/* SNS 사이트 공용 스타일: 모바일 우선, 간결한 카드형 화면, 밝은/어두운 테마 */
/* 모든 기기에서 같은 글꼴(Pretendard, 쓰는 글자만 내려받는 방식) */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
/* 아이폰이 가로 화면 등에서 글자를 멋대로 키우지 않게 */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* 첫 방문 언어 고르기 창 */
.lang-pick { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.45); display: grid; place-items: center; padding: 16px; }
.lang-pick-box { width: 100%; max-width: 340px; background: var(--bg); border-radius: 18px; padding: 20px; display: grid; gap: 10px; }
.lang-pick-box h2 { margin: 0 0 4px; font-size: 18px; text-align: center; }
:root {
  --bg: #f6f5f1; --surface: #ffffff; --surface2: #f0eee8; --border: #e6e2d8;
  --text: #1c2420; --muted: #77817b; --accent: #2f7d55; --accent-soft: #e6f2eb; --accent-text: #ffffff;
  --know: #2f7d55; --unsure: #a87a12; --forgot: #c4513f;
  --know-soft: #e6f2eb; --unsure-soft: #f8f0dc; --forgot-soft: #fbe9e5;
  --radius: 14px; --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(28, 36, 32, .05), 0 4px 14px rgba(28, 36, 32, .04);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121714; --surface: #1a211d; --surface2: #232c27; --border: #2c3731;
    --text: #e9efea; --muted: #a7b1aa; --accent: #6cc493; --accent-soft: #1f3529; --accent-text: #0f2218;
    --know: #6cc493; --unsure: #e2b350; --forgot: #ef8a78;
    --know-soft: #1f3529; --unsure-soft: #3a3120; --forgot-soft: #3d2622;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
  }
}
/* 위와 같은 다크 색: 앱이 직접 다크로 정했을 때 (아이폰 홈 화면 앱이 화면 모드 변경을 늦게 반영하는 문제) */
  :root[data-theme="dark"] {
    --bg: #121714; --surface: #1a211d; --surface2: #232c27; --border: #2c3731;
    --text: #e9efea; --muted: #a7b1aa; --accent: #6cc493; --accent-soft: #1f3529; --accent-text: #0f2218;
    --know: #6cc493; --unsure: #e2b350; --forgot: #ef8a78;
    --know-soft: #1f3529; --unsure-soft: #3a3120; --forgot-soft: #3d2622;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
  }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.5;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
.wrap { max-width: 460px; margin: 0 auto; padding: 12px 16px 32px; }
.brand { font-size: 11px; letter-spacing: .12em; color: var(--accent); font-weight: 700; }
h1 { font-size: 22px; font-weight: 700; line-height: 1.3; margin: 6px 0 4px; letter-spacing: -.02em; }
h2 { font-size: 15px; font-weight: 700; margin: 0 0 10px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.card-box { background: var(--surface); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }

/* 버튼: 기본은 옅은 회색 바탕, 주 버튼은 초록 */
button, .btn {
  font: inherit; font-size: 15px; font-weight: 600; border-radius: var(--radius-sm); border: none;
  background: var(--surface2); color: var(--text); padding: 11px 14px; min-height: 44px; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; text-align: center;
  transition: transform .06s, opacity .15s;
}
button:active, .btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent); color: var(--accent-text); }
button:disabled { opacity: .45; cursor: default; transform: none; }
.full { width: 100%; }
button.small { font-size: 13px; min-height: 34px; padding: 6px 12px; }

input, select {
  font: inherit; width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); margin: 4px 0 10px; min-height: 42px;
}
input:focus, select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
label { font-size: 13px; color: var(--muted); }
.error { color: var(--forgot); font-size: 13px; min-height: 18px; }
.hidden { display: none !important; }
/* 메신저 안 브라우저 안내 띠 (첫 화면·가이드 맨 위) */
.inapp-note { display: flex; flex-direction: column; gap: 8px; margin: 10px 12px 0; padding: 12px 14px; border-radius: 12px;
  background: var(--unsure-soft); color: var(--text); font-size: 13.5px; line-height: 1.5; }
.inapp-btns { display: flex; gap: 8px; }
.inapp-note .inapp-btns .btn-primary { background: var(--accent); color: var(--accent-text); border: none; }
.inapp-note button { align-self: flex-start; min-height: 34px; padding: 6px 12px; font-size: 13px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); color: var(--text); }
a { color: var(--accent); text-decoration: none; }

/* 탭(로그인/가입) */
.tabs { display: flex; gap: 4px; background: var(--surface2); padding: 3px; border-radius: var(--radius-sm); margin: 0 0 14px; }
.tabs button { flex: 1; background: transparent; min-height: 36px; padding: 6px; color: var(--muted); }
.tabs button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

/* 짧은 레벨 테스트 */

/* 학습 노트 (완료 화면·노트 페이지) */
.notes { text-align: left; }
.notes-h { font-size: 12px; font-weight: 700; color: var(--muted); margin: 12px 0 6px; letter-spacing: .02em; }
.notes-h:first-child { margin-top: 0; }   /* 목록 맨 위 묶음 이름 위 빈 공간 없앰 */
.note { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--surface2); border-left: 3px solid var(--border); margin-bottom: 6px; }
.note.n-forgot { border-left-color: var(--forgot); } .note.n-unsure { border-left-color: var(--unsure); } .note.n-know { border-left-color: var(--know); }
.note-body { flex: 1; min-width: 0; }
.note-w { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.note-w b { font-size: 15px; }
.note-w span { font-size: 13px; color: var(--muted); }
.note-ex { font-size: 13px; color: var(--text); margin-top: 2px; }
.note-tr { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.note-say { flex: none; min-height: 30px; padding: 2px 8px; font-size: 13px; background: transparent; }
.note.playing { box-shadow: inset 0 0 0 2px var(--accent); }
/* '전체 듣기': 어디서나 화면 아래 같은 동그라미 (채운 강조색, 재생 중엔 정지 표시) */
.play-all { pointer-events: auto; flex: none; width: 54px; height: 54px; min-height: 54px; padding: 0; border-radius: 50%; border: none;
  display: inline-grid; place-items: center; background: var(--accent); color: var(--accent-text);
  box-shadow: 0 8px 24px rgba(28, 36, 32, .14), 0 1px 3px rgba(28, 36, 32, .10); }
.play-all:active { transform: scale(.97); }
/* 전체 듣기 중 버튼 위 캡슐 진행 막대 (학습 화면 진행 막대와 같은 모양) */
.play-bar { position: fixed; left: 0; right: 0; bottom: calc(82px + env(safe-area-inset-bottom)); z-index: 5; width: calc(100% - 32px); max-width: 428px; margin: 0 auto;
  display: flex; gap: 4px; height: 24px; padding: 8px 12px; box-sizing: border-box; border-radius: 99px; background: var(--surface);
  box-shadow: 0 6px 18px rgba(28, 36, 32, .12), 0 1px 3px rgba(28, 36, 32, .08); pointer-events: none; }
.play-bar > span { flex: 1; border-radius: 99px; background: var(--border); transition: background .25s; }
.play-bar > span.cap-done { background: var(--accent); }
.play-bar > span.cap-now { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
/* 홈 버튼이 없는 곳(PC 노트, 학습 결과 화면)의 아래 고정 자리: 한 손 설정 쪽에 붙음 */
.play-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; max-width: 460px; margin: 0 auto; display: flex; justify-content: flex-end;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom)); pointer-events: none; }
.play-dock.left { justify-content: flex-start; }
/* 아래 고정 줄의 홈 버튼 (휴대폰 하위 화면 홈 버튼과 같은 모양, PC에서도 보임) */
.play-dock .dock-home { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; gap: 2px; height: 54px; margin-right: 10px;
  padding: 0 18px 0 12px; border-radius: 99px; background: var(--surface); color: var(--text);
  box-shadow: 0 8px 24px rgba(28, 36, 32, .14), 0 1px 3px rgba(28, 36, 32, .10); }
.play-dock .dock-home:active { transform: scale(.97); }
.play-dock .dock-home svg { color: var(--accent); }
.play-dock .dock-home svg:first-child { color: var(--muted); }

/* 공용 셸: 위 브랜드 바 */
.appbar { display: flex; align-items: center; gap: 10px; max-width: 460px; margin: 0 auto; padding: 12px 16px 2px; }
/* 맨 윗줄은 배경색이 꽉 찬 고정 머리 막대로 (아이폰 홈 화면 앱에서 맨 위 띠가 흐리게 보이던 문제, 내려도 늘 보임) */
.appbar { position: sticky; top: 0; z-index: 6; background: var(--bg); padding-bottom: 8px; }
.logo { width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: var(--accent-text);
  display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.brand-name { font-weight: 700; font-size: 16px; line-height: 1.15; letter-spacing: -.01em; }
.brand-tag { font-size: 9.5px; font-weight: 700; letter-spacing: .2em; color: var(--accent); }
.brand-words { flex: 1; }
.appbar-btn { display: grid; place-items: center; width: 38px; height: 38px; margin: -4px; border-radius: 10px; color: var(--muted); }
.appbar-btn:active { background: var(--surface2); }
.appbar-pill { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 11px; margin-right: 4px; border-radius: 99px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 12px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.appbar-pill svg { color: var(--accent); }
.appbar-pill:active { background: var(--surface2); }
.page-title { font-size: 19px; margin: 6px 0 10px; }
.slogan { font-size: 12px; color: var(--muted); }
.title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 6px 0 10px; }
.title-row .page-title { margin: 0; }
.brand-name, .brand-tag { white-space: nowrap; }
@media (max-width: 360px) {
  .appbar { gap: 8px; }
  .appbar-pill { padding: 0 9px; margin-right: 0; }
  .appbar-pill svg { display: none; }
  .brand-tag { letter-spacing: .12em; }
}

/* 휴대폰 하위 화면 아래 고정 '홈으로' (한 손으로 나가기). 홈의 오늘 버튼과 같은 높이 */
.home-dock { display: none; }
@media (max-width: 600px) {
  /* 떠 있는 알약 버튼 (‹ 화살표 + 집 아이콘) (뒤는 배경색으로 자연스럽게 흐려짐) */
  .home-dock { display: flex; justify-content: flex-end; position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; max-width: 460px; margin: 0 auto;
    padding: 28px 16px calc(16px + env(safe-area-inset-bottom)); pointer-events: none;
    background: linear-gradient(to top, var(--bg) 55%, color-mix(in srgb, var(--bg) 0%, transparent)); }
  .home-dock.left { justify-content: flex-start; }
  .home-dock a { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; gap: 2px; height: 54px; padding: 0 18px 0 12px; border-radius: 99px;
    background: var(--surface); color: var(--text);
    box-shadow: 0 8px 24px rgba(28, 36, 32, .14), 0 1px 3px rgba(28, 36, 32, .10); transition: transform .08s; }
  .home-dock a:active { transform: scale(.97); }
  .home-dock .play-all { margin-left: 10px; }
  .home-dock a svg { color: var(--accent); }
  .home-dock a svg:first-child { color: var(--muted); }
  body.has-home-dock .wrap { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}
/* 하위 화면 위쪽: ‹ + 화면 제목 (브랜드 대신) */
.appbar .appbar-title { flex: 1; margin: 0; font-size: 18px; font-weight: 700; }
/* ‹ + 제목 전체가 홈으로 가는 링크 (누르는 자리를 넓게) */
.appbar-back { flex: 1; display: flex; align-items: center; gap: 6px; min-height: 44px; margin: -6px 0 -6px -10px; padding: 0 10px; border-radius: 12px; color: var(--text); }
.appbar-back svg { flex: none; color: var(--muted); }
.appbar-back:active { background: var(--surface2); }
/* 선 아이콘 (이모지 대신) */
.ic { display: inline-grid; place-items: center; flex: none; }
.ic svg { display: block; }
/* 불러오는 동안 자리 표시 (빛이 지나가는 회색 틀) */
.skel { position: relative; overflow: hidden; background: var(--surface2) !important; color: transparent !important; border-radius: var(--radius-sm); box-shadow: none !important; }
.skel > * { visibility: hidden; }
.skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 55%, transparent), transparent); animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }
/* 안 읽은 공지 수 (홈 '의견 남기기' 옆) */
.nbadge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px; border-radius: 99px; background: var(--forgot); color: #fff; font-size: 11px; font-weight: 700; }
/* 줄바꿈: 한 글자·한 단어만 다음 줄로 떨어지지 않게
   - 한국어는 띄어쓰기에서만 줄을 바꿈(단어 중간에서 끊지 않음), 너무 긴 단어만 예외로 끊음
   - 일본어는 띄어쓰기가 없으므로 일본어 줄바꿈 규칙(strict)만
   - 가운데 정렬된 짧은 글·제목은 줄 길이를 고르게(balance), 문단은 마지막 줄이 외롭지 않게(pretty) */
html:lang(ko) body { word-break: keep-all; overflow-wrap: break-word; }
html:lang(ja) body { line-break: strict; }
/* text-wrap 은 상속되므로 화면 전체에 한 번 */
body { text-wrap: pretty; }
/* 안내 상자의 굵은 버튼 이름은 중간에서 끊지 않음 */
.how b { white-space: nowrap; }
h1, h2, h3, .page-title, .screen p, .sheet p, .sheet h2, .done h2, .done p, .hero p, .hero h1, .tap, .feel-sub, .feel-q, .auth-note { text-wrap: balance; }

/* 학습 목적 팝업 (홈·설정 공용) */
.goal-bg { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .4); display: flex; align-items: flex-end; justify-content: center; }
.goal-sheet { width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto; background: var(--surface); border-radius: 22px 22px 0 0;
  padding: 22px 18px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
.goal-sheet h2 { margin: 0; font-size: 19px; text-wrap: balance; }
.goal-sheet p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.55; }
.goal-list { display: flex; flex-direction: column; gap: 8px; }
.goal-opt { display: flex; align-items: center; gap: 12px; text-align: left; justify-content: flex-start; padding: 12px 14px; min-height: 64px;
  border-radius: 14px; background: var(--surface2); border: 2px solid transparent; }
.goal-opt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.goal-emo { font-size: 24px; flex: none; }
.goal-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.goal-txt b { font-size: 15px; }
.goal-txt small { font-size: 12.5px; color: var(--muted); font-weight: 500; line-height: 1.4; }
.goal-check { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: transparent; border: 2px solid var(--border); }
.goal-opt[aria-pressed="true"] .goal-check { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.goal-act { display: flex; gap: 8px; }
.goal-act .btn-primary { flex: 1; min-height: 50px; }
.goal-later { background: transparent; color: var(--muted); min-height: 50px; padding: 0 16px; }
.goal-other { margin: -2px 0 2px; min-height: 46px; font-size: 15px; }

/* 기다리는 중 도는 표시 */
.spin { display: inline-block; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -3px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2s; } }

/* 학습 카드 테마: 바탕색은 설정에서 고름(기본 크림), 글자·칩·말풍선은 같은 색 계열로 맞춤. 다크 모드는 색마다 어두운 판 */
:root { --cb: #FBF7EE; --cc: #F1E6CC; --ci: #2C2C2A; --ci2: #854F0B; --co-bg: #E6F1FB; --co-ink: #0C447C; --cm-bg: #E1F5EE; --cm-ink: #04342C; }
[data-card="cream"] { --cb: #FBF7EE; --cc: #F1E6CC; --ci: #2C2C2A; --ci2: #854F0B; --co-bg: #E6F1FB; --co-ink: #0C447C; --cm-bg: #E1F5EE; --cm-ink: #04342C; }
[data-card="mint"] { --cb: #E1F5EE; --cc: #BDEBD9; --ci: #04342C; --ci2: #0F6E56; --co-bg: #FFFFFF; --co-ink: #085041; --cm-bg: #BDEBD9; --cm-ink: #04342C; }
[data-card="sky"] { --cb: #E6F1FB; --cc: #C7DEF6; --ci: #042C53; --ci2: #185FA5; --co-bg: #FFFFFF; --co-ink: #0C447C; --cm-bg: #C7DEF6; --cm-ink: #042C53; }
[data-card="lavender"] { --cb: #EEEDFE; --cc: #DAD7FA; --ci: #26215C; --ci2: #534AB7; --co-bg: #FFFFFF; --co-ink: #3C3489; --cm-bg: #DAD7FA; --cm-ink: #26215C; }
[data-card="peach"] { --cb: #FAECE7; --cc: #F6D3C6; --ci: #4A1B0C; --ci2: #993C1D; --co-bg: #FFFFFF; --co-ink: #712B13; --cm-bg: #F6D3C6; --cm-ink: #4A1B0C; }
[data-card="lemon"] { --cb: #FDF5E3; --cc: #F8E2B0; --ci: #412402; --ci2: #854F0B; --co-bg: #FFFFFF; --co-ink: #633806; --cm-bg: #F8E2B0; --cm-ink: #412402; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --cb: #24211A; --cc: #3A3424; --ci: #F4EEE0; --ci2: #E3C79A; --co-bg: #1B2B3A; --co-ink: #E6F1FB; --cm-bg: #17332B; --cm-ink: #E1F5EE; }
  :root:not([data-theme="light"])[data-card="cream"] { --cb: #24211A; --cc: #3A3424; --ci: #F4EEE0; --ci2: #E3C79A; --co-bg: #1B2B3A; --co-ink: #E6F1FB; --cm-bg: #17332B; --cm-ink: #E1F5EE; }
  :root:not([data-theme="light"])[data-card="mint"] { --cb: #102A23; --cc: #1F4D40; --ci: #E1F5EE; --ci2: #9FE1CB; --co-bg: #183B32; --co-ink: #E1F5EE; --cm-bg: #24584A; --cm-ink: #E1F5EE; }
  :root:not([data-theme="light"])[data-card="sky"] { --cb: #112334; --cc: #1F3E5E; --ci: #E6F1FB; --ci2: #B5D4F4; --co-bg: #193349; --co-ink: #E6F1FB; --cm-bg: #244A70; --cm-ink: #E6F1FB; }
  :root:not([data-theme="light"])[data-card="lavender"] { --cb: #1E1C3A; --cc: #363265; --ci: #EEEDFE; --ci2: #CECBF6; --co-bg: #2A2750; --co-ink: #EEEDFE; --cm-bg: #3D3973; --cm-ink: #EEEDFE; }
  :root:not([data-theme="light"])[data-card="peach"] { --cb: #2E1D17; --cc: #52332A; --ci: #FAECE7; --ci2: #F5C4B3; --co-bg: #3F2820; --co-ink: #FAECE7; --cm-bg: #5C3A2F; --cm-ink: #FAECE7; }
  :root:not([data-theme="light"])[data-card="lemon"] { --cb: #2C2414; --cc: #4D3F20; --ci: #FAEEDA; --ci2: #FAC775; --co-bg: #3B311B; --co-ink: #FAEEDA; --cm-bg: #574724; --cm-ink: #FAEEDA; }
}
/* 위와 같은 다크 색: 앱이 직접 다크로 정했을 때 (아이폰 홈 화면 앱이 화면 모드 변경을 늦게 반영하는 문제) */
  :root[data-theme="dark"] { --cb: #24211A; --cc: #3A3424; --ci: #F4EEE0; --ci2: #E3C79A; --co-bg: #1B2B3A; --co-ink: #E6F1FB; --cm-bg: #17332B; --cm-ink: #E1F5EE; }
  :root[data-theme="dark"][data-card="cream"] { --cb: #24211A; --cc: #3A3424; --ci: #F4EEE0; --ci2: #E3C79A; --co-bg: #1B2B3A; --co-ink: #E6F1FB; --cm-bg: #17332B; --cm-ink: #E1F5EE; }
  :root[data-theme="dark"][data-card="mint"] { --cb: #102A23; --cc: #1F4D40; --ci: #E1F5EE; --ci2: #9FE1CB; --co-bg: #183B32; --co-ink: #E1F5EE; --cm-bg: #24584A; --cm-ink: #E1F5EE; }
  :root[data-theme="dark"][data-card="sky"] { --cb: #112334; --cc: #1F3E5E; --ci: #E6F1FB; --ci2: #B5D4F4; --co-bg: #193349; --co-ink: #E6F1FB; --cm-bg: #244A70; --cm-ink: #E6F1FB; }
  :root[data-theme="dark"][data-card="lavender"] { --cb: #1E1C3A; --cc: #363265; --ci: #EEEDFE; --ci2: #CECBF6; --co-bg: #2A2750; --co-ink: #EEEDFE; --cm-bg: #3D3973; --cm-ink: #EEEDFE; }
  :root[data-theme="dark"][data-card="peach"] { --cb: #2E1D17; --cc: #52332A; --ci: #FAECE7; --ci2: #F5C4B3; --co-bg: #3F2820; --co-ink: #FAECE7; --cm-bg: #5C3A2F; --cm-ink: #FAECE7; }
  :root[data-theme="dark"][data-card="lemon"] { --cb: #2C2414; --cc: #4D3F20; --ci: #FAEEDA; --ci2: #FAC775; --co-bg: #3B311B; --co-ink: #FAEEDA; --cm-bg: #574724; --cm-ink: #FAEEDA; }

.card-box.flip { background: var(--cb); color: var(--ci); }
.card-box.flip.deck { border-color: var(--cc); box-shadow: 0 10px 0 -5px var(--cb), 0 10px 0 -4px var(--cc), 0 8px 22px rgba(28, 36, 32, .08); }
.card-box.flip.deck.front { border-top-color: var(--ci2); }
.card-box.flip .badge:not(.stretch) { background: var(--cc); color: var(--ci); }
.card-box.flip .v2-q, .card-box.flip .v2-sit, .card-box.flip .v2-note, .card-box.flip .hint, .card-box.flip .tap, .card-box.flip .v2-line .who { color: var(--ci2); }
.card-box.flip .v2-sit.big, .card-box.flip .prompt, .card-box.flip .v2-line, .card-box.flip .answer { color: var(--ci); }
.card-box.flip .blank { border-bottom-color: var(--ci2); }
.card-box.flip .v2-play, .card-box.flip .listen, .card-box.flip .example { background: var(--co-bg); color: var(--ci2); }
.card-box.flip .example b { color: var(--ci2); }
.card-box.flip .choices button:not(.right):not(.wrong) { background: var(--co-bg); color: var(--co-ink); }
.card-box.flip .v2-flag button { color: var(--ci2); border-color: var(--cc); }
/* 대화는 메신저 말풍선: 상대는 왼쪽(흰·하늘), 나는 오른쪽(바탕보다 한 단계 진한 같은 색) */
.card-box.flip .v2-dlg { background: transparent; padding: 0; gap: 6px; }
.card-box.flip .v2-dl, .card-box.flip .bubble { align-self: flex-start; max-width: 86%; background: var(--co-bg); color: var(--co-ink);
  border-radius: 16px 16px 16px 4px; padding: 7px 12px; }
.card-box.flip .v2-dl.me, .card-box.flip .bubble.me { align-self: flex-end; background: var(--cm-bg); color: var(--cm-ink); border-radius: 16px 16px 4px 16px; }
.card-box.flip .v2-dl b { color: inherit; }
.card-box.flip .v2-dl span { color: inherit; opacity: .78; }
.card-box.flip .bubble .prompt { color: inherit; font-size: 18px; }
.card-box.flip .bubble.me .blank { border-bottom-color: var(--cm-ink); }
/* 설정: 카드 색 고르기 */
.card-swatches { display: flex; gap: 8px; }
.card-swatches button { width: 28px; height: 28px; min-height: 28px; padding: 0; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .14); }
.card-swatches button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }