/* ===== jbeng prototype — design tokens ===== */
:root {
  --bg:        #0B0C10;
  --surface:   #15171E;
  --surface-2: #1D2029;
  --surface-3: #272B36;
  --line:      #2E333F;

  --text:      #F2F3F6;
  --text-2:    #A2A8B8;
  --text-3:    #6B7183;

  --accent:    #7C6CFF;
  --accent-dim:#4A3FB0;
  --success:   #19D39A;
  --danger:    #FF5A6E;
  --warn:      #FFB84D;
  --gold:      #FFD166;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;

  --pad: 20px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* ── 색상 리터럴을 토큰으로 승격 (테마 전환용) ── */
  /* accent */
  --accent-a05: rgba(124,108,255,0.05);
  --accent-a10: rgba(124,108,255,0.1);
  --accent-a15: rgba(124,108,255,0.15);
  --accent-a20: rgba(124,108,255,0.2);
  --accent-a25: rgba(124,108,255,0.25);
  --accent-a30: rgba(124,108,255,0.3);
  --accent-a35: rgba(124,108,255,0.35);
  --accent-a40: rgba(124,108,255,0.4);
  --accent-a45: rgba(124,108,255,0.45);
  --accent-a55: rgba(124,108,255,0.55);
  --accent-a60: rgba(124,108,255,0.6);
  /* info */
  --info-a10: rgba(93,173,255,0.1);
  --info-a15: rgba(93,173,255,0.15);
  --info-a20: rgba(93,173,255,0.2);
  --info-a25: rgba(93,173,255,0.25);
  /* info2 */
  --info2-a12: rgba(127,192,255,.12);
  --info2-a30: rgba(127,192,255,.3);
  --info2-a55: rgba(127,192,255,.55);
  /* success */
  --success-a10: rgba(25,211,154,0.1);
  --success-a15: rgba(25,211,154,0.15);
  --success-a30: rgba(25,211,154,0.3);
  --success-a40: rgba(25,211,154,0.4);
  --success-a60: rgba(25,211,154,0.6);
  /* warn */
  --warn-a10: rgba(255,184,77,0.1);
  --warn-a15: rgba(255,184,77,0.15);
  --warn-a25: rgba(255,184,77,0.25);
  --warn-a40: rgba(255,184,77,0.4);
  /* danger */
  --danger-a10: rgba(255,90,110,0.1);
  --danger-a15: rgba(255,90,110,0.15);
  --danger-a30: rgba(255,90,110,0.3);
  --danger-a35: rgba(255,90,110,0.35);
  --danger-a45: rgba(255,90,110,0.45);
  --danger-a50: rgba(255,90,110,0.5);
  /* gold */
  --gold-a10: rgba(255,209,102,0.1);
  --gold-a15: rgba(255,209,102,0.15);
  --gold-a20: rgba(255,209,102,0.2);
  --gold-a30: rgba(255,209,102,0.3);
  --gold-a40: rgba(255,209,102,0.4);
  /* shade */
  --shade-a45: rgba(0,0,0,0.45);
  --shade-a55: rgba(0,0,0,0.55);
  --shade-a60: rgba(0,0,0,0.6);
  --accent-grad: #6355E8;
  --accent-lite: #A79BFF;
  --accent-lite2: #C9C2FF;
  --app-bg: #06070A;
  --bg-blur: rgba(13,14,18,.92);
  --danger-lite: #FF8A99;
  --gold-grad: #D9A93A;
  --info: #7FC0FF;
  --info-lite: #9FD0FF;
  --on-accent: #fff;
  --shade-full: #000;
  --success-lite: #5BE3B8;

  /* ── 그림자 ── */
  --shadow-sm: 0 8px 24px var(--shade-a45);
  --shadow-md: 0 10px 30px var(--shade-a55);
  --shadow-lg: 0 20px 60px var(--shade-a60);
  --shadow-phone: 0 30px 80px var(--shade-a60);
}

/* ===========================================================
   밝은 모드
   토큰만 다시 정의하면 된다 — 나머지 CSS 는 전부 var(--…) 를 쓴다.

   세 가지 모드
     시스템  data-theme 없음 → prefers-color-scheme 를 따른다
     밝게    data-theme="light"
     어둡게  data-theme="dark"  (기본 팔레트 그대로)
   =========================================================== */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --light: 1; }
}
:root[data-theme="light"] { --light: 1; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --app-bg:    #E8E9EF;
    --bg:        #F7F8FB;
    --surface:   #FFFFFF;
    --surface-2: #F1F2F7;
    --surface-3: #E3E5EC;
    --line:      #DCDFE8;
    --bg-blur:   rgba(247,248,251,.92);

    --text:   #15171E;
    --text-2: #474C59;
    --text-3: #7B8191;

    --accent:      #5A49D6;
    --accent-dim:  #9A90F2;
    --accent-grad: #6E5CE8;
    --success: #0C8F67;
    --danger:  #D63A52;
    --warn:    #B07400;
    --gold:    #A9790A;

    --on-accent:     #FFFFFF;
    --accent-lite:   #4B3BC4;
    --accent-lite2:  #4B3BC4;
    --info:          #1E6CB8;
    --info-lite:     #1A5EA3;
    --success-lite:  #0A7D5A;
    --danger-lite:   #C0304A;
    --gold-grad:     #8E6508;

    /* 밝은 배경에서는 틴트를 조금 더 진하게 — 안 보이면 의미가 없다 */
    --accent-a05: rgba(90,73,214,.07);  --accent-a10: rgba(90,73,214,.12);
    --accent-a15: rgba(90,73,214,.16);  --accent-a20: rgba(90,73,214,.2);
    --accent-a25: rgba(90,73,214,.24);  --accent-a30: rgba(90,73,214,.28);
    --accent-a35: rgba(90,73,214,.32);  --accent-a40: rgba(90,73,214,.36);
    --accent-a45: rgba(90,73,214,.4);   --accent-a55: rgba(90,73,214,.5);
    --accent-a60: rgba(90,73,214,.55);

    --info-a10: rgba(30,108,184,.1);   --info-a15: rgba(30,108,184,.14);
    --info-a20: rgba(30,108,184,.18);  --info-a25: rgba(30,108,184,.22);
    --info2-a12: rgba(30,108,184,.12); --info2-a30: rgba(30,108,184,.3);
    --info2-a55: rgba(30,108,184,.5);

    --success-a10: rgba(12,143,103,.1);  --success-a15: rgba(12,143,103,.14);
    --success-a30: rgba(12,143,103,.28); --success-a40: rgba(12,143,103,.34);
    --success-a60: rgba(12,143,103,.5);

    --warn-a10: rgba(176,116,0,.1);  --warn-a15: rgba(176,116,0,.14);
    --warn-a25: rgba(176,116,0,.24); --warn-a40: rgba(176,116,0,.36);

    --danger-a10: rgba(214,58,82,.1);  --danger-a15: rgba(214,58,82,.14);
    --danger-a30: rgba(214,58,82,.28); --danger-a35: rgba(214,58,82,.32);
    --danger-a45: rgba(214,58,82,.4);  --danger-a50: rgba(214,58,82,.45);

    --gold-a10: rgba(169,121,10,.1);  --gold-a15: rgba(169,121,10,.14);
    --gold-a20: rgba(169,121,10,.18); --gold-a30: rgba(169,121,10,.26);
    --gold-a40: rgba(169,121,10,.34);

    --shade-a45: rgba(20,24,40,.12);
    --shade-a55: rgba(20,24,40,.16);
    --shade-a60: rgba(20,24,40,.2);
    --shade-full: #000;          /* 마스크 그라데이션용 — 테마와 무관하지만 일관성 유지 */
  }
}

:root[data-theme="light"] {
  --app-bg:    #E8E9EF;
  --bg:        #F7F8FB;
  --surface:   #FFFFFF;
  --surface-2: #F1F2F7;
  --surface-3: #E3E5EC;
  --line:      #DCDFE8;
  --bg-blur:   rgba(247,248,251,.92);

  --text:   #15171E;
  --text-2: #474C59;
  --text-3: #7B8191;

  --accent:      #5A49D6;
  --accent-dim:  #9A90F2;
  --accent-grad: #6E5CE8;
  --success: #0C8F67;
  --danger:  #D63A52;
  --warn:    #B07400;
  --gold:    #A9790A;

  --on-accent:     #FFFFFF;
  --accent-lite:   #4B3BC4;
  --accent-lite2:  #4B3BC4;
  --info:          #1E6CB8;
  --info-lite:     #1A5EA3;
  --success-lite:  #0A7D5A;
  --danger-lite:   #C0304A;
  --gold-grad:     #8E6508;

  --accent-a05: rgba(90,73,214,.07);  --accent-a10: rgba(90,73,214,.12);
  --accent-a15: rgba(90,73,214,.16);  --accent-a20: rgba(90,73,214,.2);
  --accent-a25: rgba(90,73,214,.24);  --accent-a30: rgba(90,73,214,.28);
  --accent-a35: rgba(90,73,214,.32);  --accent-a40: rgba(90,73,214,.36);
  --accent-a45: rgba(90,73,214,.4);   --accent-a55: rgba(90,73,214,.5);
  --accent-a60: rgba(90,73,214,.55);

  --info-a10: rgba(30,108,184,.1);   --info-a15: rgba(30,108,184,.14);
  --info-a20: rgba(30,108,184,.18);  --info-a25: rgba(30,108,184,.22);
  --info2-a12: rgba(30,108,184,.12); --info2-a30: rgba(30,108,184,.3);
  --info2-a55: rgba(30,108,184,.5);

  --success-a10: rgba(12,143,103,.1);  --success-a15: rgba(12,143,103,.14);
  --success-a30: rgba(12,143,103,.28); --success-a40: rgba(12,143,103,.34);
  --success-a60: rgba(12,143,103,.5);

  --warn-a10: rgba(176,116,0,.1);  --warn-a15: rgba(176,116,0,.14);
  --warn-a25: rgba(176,116,0,.24); --warn-a40: rgba(176,116,0,.36);

  --danger-a10: rgba(214,58,82,.1);  --danger-a15: rgba(214,58,82,.14);
  --danger-a30: rgba(214,58,82,.28); --danger-a35: rgba(214,58,82,.32);
  --danger-a45: rgba(214,58,82,.4);  --danger-a50: rgba(214,58,82,.45);

  --gold-a10: rgba(169,121,10,.1);  --gold-a15: rgba(169,121,10,.14);
  --gold-a20: rgba(169,121,10,.18); --gold-a30: rgba(169,121,10,.26);
  --gold-a40: rgba(169,121,10,.34);

  --shade-a45: rgba(20,24,40,.12);
  --shade-a55: rgba(20,24,40,.16);
  --shade-a60: rgba(20,24,40,.2);
  --shade-full: #000;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--app-bg);
  color-scheme: dark light;
  font-family: var(--font);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ===== phone frame ===== */
.phone {
  position: relative;
  width: 390px; height: 844px;
  margin: 24px auto;
  background: var(--bg);
  border-radius: 44px;
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-phone);
}
@media (max-width: 430px) {
  .phone { width: 100%; height: 100vh; height: 100dvh; margin: 0; border-radius: 0; border: none; box-shadow: none; }
}

.screen {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 10px var(--pad) 0;        /* 헤더에 딱 붙지 않게 숨 쉴 틈 */
  -webkit-overflow-scrolling: touch;
}
.screen::-webkit-scrollbar { width: 0; }
.screen.no-pad { padding: 0; }

/* ===== top bar ===== */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 16px var(--pad) 10px;
  flex-shrink: 0;
}
.topbar h1 { font-size: 20px; font-weight: 700; margin: 0; letter-spacing: -.02em; }
.topbar .spacer { flex: 1; }
.iconbtn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface-2); border: none; color: var(--text-2);
  font-size: 17px; cursor: pointer; display: grid; place-items: center;
}
.iconbtn:active { background: var(--surface-3); }

/* ===== tab bar ===== */
.tabbar {
  flex-shrink: 0;
  display: flex;
  background: var(--bg-blur);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  padding: 8px 0 max(10px, env(safe-area-inset-bottom));
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; cursor: pointer;
  color: var(--text-3); font-size: 10px; font-weight: 600;
  text-decoration: none; padding: 4px 0;
}
.tab .ic { font-size: 19px; line-height: 1; }
.tab.active { color: var(--accent); }

/* ===== cards ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
  margin-bottom: 14px;
}
.card.flat { background: var(--surface-2); border-color: transparent; }

.label { font-size: 11px; font-weight: 700; color: var(--text-3); letter-spacing: .08em; text-transform: uppercase; }

/* ===== buttons ===== */
.btn {
  width: 100%; padding: 16px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text); font-size: 16px; font-weight: 650; font-family: var(--font);
  cursor: pointer; transition: transform .08s, background .15s;
}
.btn:active { transform: scale(.98); }
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-grad));
  border-color: transparent; color: var(--on-accent);
  box-shadow: 0 8px 24px var(--accent-a30);
}
.btn-ghost { background: transparent; }
.btn-sm { padding: 11px 16px; font-size: 14px; width: auto; border-radius: var(--r-sm); }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }

/* ===== progress ===== */
.bar { height: 10px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.bar > i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--success));
  transition: width .7s cubic-bezier(.2,.8,.2,1);
}
.bar.thin { height: 6px; }

.bignum { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.bignum small { font-size: 16px; font-weight: 600; color: var(--text-3); letter-spacing: 0; }

.streak {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--warn-a10); color: var(--warn);
  padding: 7px 13px; border-radius: 99px; font-size: 13px; font-weight: 700;
}

.statrow { display: flex; gap: 10px; }
.stat {
  flex: 1; background: var(--surface-2); border-radius: var(--r-sm);
  padding: 13px; text-align: center;
}
.stat b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.stat span { font-size: 11px; color: var(--text-3); font-weight: 600; }

/* ===== pos badge ===== */
.pos {
  display: inline-block; padding: 4px 11px; border-radius: 99px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.pos-noun      { background: var(--accent-a15); color: var(--accent-lite); }
.pos-verb      { background: var(--success-a15);  color: var(--success-lite); }
.pos-adjective { background: var(--warn-a15);  color: var(--warn); }
.pos-adverb    { background: var(--info-a15);  color: var(--info); }
.pos-phrase    { background: var(--danger-a15);  color: var(--danger-lite); }
.pos-other     { background: var(--surface-3);      color: var(--text-2); }

/* ===== game: header ===== */
.gamebar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px var(--pad); flex-shrink: 0;
}
.dots { display: flex; gap: 4px; flex: 1; flex-wrap: nowrap; overflow: hidden; }
.dots i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--surface-3); flex-shrink: 0;
  transition: background .2s, transform .2s;
}
.dots i.done { background: var(--success); }
.dots i.miss { background: var(--danger); }
.dots i.cur  { background: var(--accent); transform: scale(1.5); }
.hearts { font-size: 13px; letter-spacing: 1px; }
.counter { font-size: 13px; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ===== game: question ===== */
.qstage {
  flex: 1; display: flex; flex-direction: column;
  padding: 0 var(--pad); overflow-y: auto;
}
.qword {
  text-align: center;
  padding: 44px 0 36px;
  flex-shrink: 0;
}
.qword .w {
  font-size: 40px; font-weight: 800; letter-spacing: -.03em;
  margin-bottom: 14px; word-break: break-word; line-height: 1.1;
}
.qword .w.ko { font-size: 29px; }
.qword .hint { font-size: 13px; color: var(--text-3); margin-top: 12px; font-weight: 600; }

.answers { padding-bottom: 24px; }

/* choices */
.choice {
  width: 100%; text-align: left;
  padding: 17px 18px; margin-bottom: 10px;
  border-radius: var(--r); border: 1.5px solid var(--line);
  background: var(--surface); color: var(--text);
  font-size: 16px; font-weight: 600; font-family: var(--font);
  cursor: pointer; transition: transform .08s, border-color .15s, background .15s;
}
.choice:active { transform: scale(.985); }
.choice.wrong {
  border-color: var(--danger); background: var(--danger-a10); color: var(--danger-lite);
  animation: shake .36s;
}
.choice.correct { border-color: var(--success); background: var(--success-a10); color: var(--success-lite); }
.choice.dead { opacity: .32; pointer-events: none; }

/* typing */
.typebox {
  display: flex; gap: 10px; margin-bottom: 14px;
}
.typebox input {
  flex: 1; padding: 17px 18px; border-radius: var(--r);
  border: 1.5px solid var(--line); background: var(--surface);
  color: var(--text); font-size: 18px; font-weight: 650; font-family: var(--font);
  outline: none; min-width: 0;
}
.typebox input:focus { border-color: var(--accent); }
.typebox.wrong input { border-color: var(--danger); animation: shake .36s; }

/* mic */
.mic-wrap { text-align: center; padding: 10px 0 24px; }
.orb {
  width: 108px; height: 108px; margin: 0 auto 22px;
  border-radius: 50%; display: grid; place-items: center;
  font-size: 38px;
  background: radial-gradient(circle at 50% 40%, var(--accent-a35), var(--accent-a10));
  border: 1.5px solid var(--accent-a45);
}
.orb.listening { animation: pulse 1.5s ease-in-out infinite; }
.orb.bad { background: radial-gradient(circle at 50% 40%, var(--danger-a35), var(--danger-a10)); border-color: var(--danger-a50); animation: shake .36s; }
.orb.ok  { background: radial-gradient(circle at 50% 40%, var(--success-a40), var(--success-a10)); border-color: var(--success-a60); }

.heard {
  min-height: 56px;
  background: var(--surface-2); border-radius: var(--r);
  padding: 14px; margin-bottom: 14px;
}
.heard .label { display: block; margin-bottom: 6px; }
.heard .txt { font-size: 19px; font-weight: 650; color: var(--text); min-height: 24px; }
.heard .txt.empty { color: var(--text-3); font-weight: 500; font-size: 15px; }
.heard.wrong { background: var(--danger-a10); }

.micmsg { font-size: 14px; font-weight: 650; text-align: center; margin-bottom: 16px; min-height: 20px; }
.micmsg.bad { color: var(--danger); }
.micmsg.ok  { color: var(--success); }

/* ===== explain card ===== */
.explain { padding: 20px var(--pad) 24px; }
.ex-mark { font-size: 34px; text-align: center; margin-bottom: 10px; }
.ex-head { text-align: center; margin-bottom: 22px; }
.ex-head .w { font-size: 33px; font-weight: 800; letter-spacing: -.03em; display: inline-flex; align-items: center; gap: 10px; }
.ex-head .ko { font-size: 18px; color: var(--text); font-weight: 650; margin-top: 12px; }
.ex-head .pos { margin-top: 12px; }

.sent {
  position: relative;            /* 툴팁 기준점 */
  background: var(--surface-2); border-radius: var(--r); padding: 17px; margin-bottom: 18px;
}
.sent .ko { font-size: 16px; font-weight: 600; line-height: 1.5; }
.sent .arrow { color: var(--text-3); margin: 9px 0; font-size: 14px; }
.sent .en {
  font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--accent-lite);
  display: flex; align-items: flex-start; gap: 9px;
}
.sent .en em { font-style: normal; background: var(--accent-a20); border-radius: 4px; padding: 0 3px; }

.spk {
  background: var(--surface-3); border: none; color: var(--text-2);
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  font-size: 14px; flex-shrink: 0; display: grid; place-items: center;
}
.spk:active { background: var(--accent-dim); color: var(--on-accent); }

.mastery { text-align: center; margin-bottom: 20px; }
.mastery .pips { font-size: 17px; letter-spacing: 5px; margin-bottom: 7px; }
.mastery .pips b { color: var(--success); }
.mastery .pips s { color: var(--surface-3); text-decoration: none; }
.mastery .txt { font-size: 13px; color: var(--text-3); font-weight: 600; }
.mastery .delta { font-weight: 800; }
.mastery .delta.up   { color: var(--success); }
.mastery .delta.down { color: var(--danger); }
.mastery .delta.zero { color: var(--text-3); }

.mastered-banner {
  background: linear-gradient(135deg, var(--gold-a20), var(--warn-a10));
  border: 1px solid var(--gold-a30); color: var(--gold);
  border-radius: var(--r); padding: 13px; text-align: center;
  font-size: 14px; font-weight: 700; margin-bottom: 16px;
}

/* ===== speed round ===== */
.speed-head { text-align: center; padding: 18px 0 14px; }
.speed-head h2 { font-size: 22px; margin: 0 0 6px; font-weight: 800; letter-spacing: -.02em; }
.speed-head p  { font-size: 13px; color: var(--text-3); margin: 0; font-weight: 600; }
.timer { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin: 14px 0 18px; }
.timer > i { display: block; height: 100%; background: var(--warn); border-radius: 99px; }
.timer.low > i { background: var(--danger); }

.match { display: flex; gap: 10px; }
.match .col { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.tile {
  padding: 15px 11px; border-radius: var(--r-sm);
  border: 1.5px solid var(--line); background: var(--surface);
  color: var(--text); font-size: 14px; font-weight: 650; font-family: var(--font);
  cursor: pointer; text-align: center; min-height: 54px;
  display: grid; place-items: center; line-height: 1.3;
  transition: transform .08s, border-color .15s, opacity .2s;
}
.tile:active { transform: scale(.97); }
.tile.sel  { border-color: var(--accent); background: var(--accent-a15); }
.tile.gone { opacity: .2; pointer-events: none; border-style: dashed; }
.tile.bad  { border-color: var(--danger); animation: shake .36s; }
.combo { text-align: center; font-size: 13px; font-weight: 700; color: var(--gold); min-height: 18px; margin-top: 14px; }

/* ===== result ===== */
.result { padding: 28px var(--pad); text-align: center; }
.result .ring { font-size: 56px; font-weight: 800; letter-spacing: -.04em; }
.result .ring small { font-size: 22px; color: var(--text-3); }
.newwords { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 12px; }
.chip {
  background: var(--surface-3); border-radius: 99px; padding: 6px 13px;
  font-size: 13px; font-weight: 650;
}
.chip.gold { background: var(--gold-a15); color: var(--gold); }

/* ===== wordbook ===== */
.filters { display: flex; gap: 7px; overflow-x: auto; padding: 4px 0 14px; }
.filters::-webkit-scrollbar { height: 0; }
.fbtn {
  flex-shrink: 0; padding: 8px 14px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--text-2); font-size: 13px; font-weight: 650; font-family: var(--font);
  cursor: pointer; white-space: nowrap;
}
.fbtn.on { background: var(--accent); border-color: transparent; color: var(--on-accent); }

.wrow {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.wrow .main { flex: 1; min-width: 0; }
.wrow .en { font-size: 16px; font-weight: 700; margin-bottom: 3px; }
.wrow .ko { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrow .pips { font-size: 11px; letter-spacing: 2px; flex-shrink: 0; }
.wrow .pips b { color: var(--success); }
.wrow .pips s { color: var(--surface-3); text-decoration: none; }

/* ===== sheet (word detail) ===== */
.sheet-bg {
  position: absolute; inset: 0; background: var(--shade-a60);
  display: none; z-index: 40;
}
.sheet-bg.open { display: block; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 41;
  background: var(--surface); border-radius: var(--r-lg) var(--r-lg) 0 0;
  border-top: 1px solid var(--line);
  padding: 10px var(--pad) 26px;
  transform: translateY(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1);
  max-height: 80%; overflow-y: auto;
}
.sheet.open { transform: translateY(0); }
.grip { width: 38px; height: 4px; border-radius: 99px; background: var(--surface-3); margin: 0 auto 16px; }

/* ===== misc ===== */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-3); }
.empty-state .ic { font-size: 40px; margin-bottom: 12px; }
.spacer-24 { height: 24px; }
.center { text-align: center; }
.muted { color: var(--text-3); font-size: 13px; font-weight: 600; }
.warnbox {
  background: var(--warn-a10); border: 1px solid var(--warn-a25);
  color: var(--warn); border-radius: var(--r-sm); padding: 12px;
  font-size: 12.5px; font-weight: 600; line-height: 1.5; margin-bottom: 14px;
}

/* ===== animations ===== */
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 var(--accent-a35); }
  50%     { box-shadow: 0 0 0 18px transparent; }
}
@keyframes pop {
  0%   { transform: scale(.9); opacity: 0; }
  100% { transform: scale(1);  opacity: 1; }
}
.pop { animation: pop .22s cubic-bezier(.2,.9,.3,1.3); }
@keyframes slideup {
  0%   { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}
.slideup { animation: slideup .26s cubic-bezier(.2,.8,.2,1); }


/* ===== 문장 속 단어 탭 → 뜻 툴팁 ===== */
.lex {
  cursor: pointer;
  border-bottom: 1px dotted var(--text-3);
  padding-bottom: 1px;
}
.lex:active { background: var(--accent-a20); border-radius: 3px; }
.lex-target {
  background: var(--accent-a20); border-radius: 4px; padding: 0 3px;
  border-bottom-color: var(--accent);
}

.tiphint {
  float: right; text-transform: none; letter-spacing: 0;
  font-size: 10.5px; font-weight: 600; color: var(--text-3); opacity: .8;
}

.tip {
  position: absolute; z-index: 30;
  min-width: 132px; max-width: 232px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  box-shadow: 0 10px 30px var(--shade-a55);
  animation: pop .14s cubic-bezier(.2,.9,.3,1.3);
}
.tip-top {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 7px; flex-wrap: wrap;
}
.tip-top .spk { width: 26px; height: 26px; font-size: 12px; }
.tip-top b { font-size: 15px; font-weight: 750; }
.tip-top .pos { font-size: 10px; padding: 2px 7px; }
.tip-ko { font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--text); }
.tip-foot {
  margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line);
  font-size: 11px; font-weight: 650; color: var(--text-3);
}
.tip::after {
  content: ''; position: absolute; left: 50%; bottom: -5px;
  width: 9px; height: 9px; margin-left: -4.5px;
  background: var(--surface-3);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transform: rotate(45deg);
}
.tip.below::after {
  bottom: auto; top: -5px;
  border-right: none; border-bottom: none;
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
}

/* ===== 모드 뱃지 ===== */
.modetag {
  display: inline-block; margin-bottom: 16px;
  padding: 5px 12px; border-radius: 99px;
  background: var(--surface-2); color: var(--text-3);
  font-size: 11px; font-weight: 750; letter-spacing: .04em;
}

/* ===== 모드 비중 바 (세션 시작 / 결과) ===== */
.mixrow {
  display: flex; align-items: center; gap: 10px; margin-bottom: 9px;
}
.mixrow:last-child { margin-bottom: 0; }
.mixname { width: 64px; flex-shrink: 0; font-size: 12px; font-weight: 650; color: var(--text-2); }
.mixbar {
  flex: 1; height: 8px; border-radius: 99px;
  background: var(--surface-3); overflow: hidden;
}
.mixbar > i { display: block; height: 100%; border-radius: 99px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.mixnum {
  width: 38px; flex-shrink: 0; text-align: right;
  font-size: 12px; font-weight: 750; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.mix-B { background: var(--info); }
.mix-D { background: var(--warn); }
.mix-C { background: var(--success); }
.mix-A { background: var(--accent); }

/* ===== 난이도 사다리 (해설 카드) ===== */
.ladder {
  display: flex; gap: 5px; justify-content: center; margin-top: 14px; flex-wrap: wrap;
}
.mchip {
  padding: 4px 10px; border-radius: 99px;
  background: var(--surface-2); color: var(--text-3);
  font-size: 10.5px; font-weight: 700;
  border: 1px solid transparent;
}
.mchip.on {
  background: var(--success-a15); color: var(--success-lite);
  border-color: var(--success-a30);
}

/* ===== 중단 버튼 (상단바) ===== */
.iconbtn.quit {
  width: 28px; height: 28px; font-size: 14px;
  background: transparent; color: var(--text-3);
  flex-shrink: 0;
}
.iconbtn.quit:active { background: var(--surface-3); color: var(--text); }

/* 진행 점 — 확실히 안다 처리 */
.dots i.pass { background: var(--gold); }

/* ===== "이 단어 확실히 알아요" ===== */
.passrow {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.btn-pass {
  background: transparent;
  border: 1.5px dashed var(--gold-a40);
  color: var(--gold);
  font-size: 14px; padding: 13px;
}
.btn-pass:active { background: var(--gold-a10); }
.passnote {
  margin-top: 8px;
  font-size: 11px; font-weight: 600; line-height: 1.5;
  color: var(--text-3);
}

/* ===== 브랜드 / 코스 전환 ===== */
.brand {
  background: none; border: none; cursor: pointer;
  color: var(--text); font-family: var(--font);
  font-size: 20px; font-weight: 800; letter-spacing: -.02em;
  padding: 0; display: inline-flex; align-items: center; gap: 6px;
}
.caret { font-size: 11px; color: var(--text-3); }

.coursepill {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 12px 0 4px; padding: 11px 15px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 99px; cursor: pointer;
  font-size: 13.5px; font-weight: 700; color: var(--text-2);
}
.coursepill:active { background: var(--surface-3); }

/* 설정 시트 옵션 */
.optlist { display: flex; flex-direction: column; gap: 7px; }
.optrow {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 15px; border-radius: var(--r);
  border: 1.5px solid var(--line); background: var(--surface);
  color: var(--text); font-family: var(--font); font-size: 15px; font-weight: 650;
  cursor: pointer; text-align: left;
}
.optrow.on { border-color: var(--accent); background: var(--accent-a10); }
.optrow:active { background: var(--surface-2); }
.optflag { font-size: 19px; flex-shrink: 0; }
.optname { flex: 1; min-width: 0; }
.optsub { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-3); margin-top: 3px; }
.optcheck { color: var(--accent); font-weight: 800; flex-shrink: 0; }

/* ===== 나이 카드 ===== */
.agecard { background: linear-gradient(145deg, var(--surface), var(--accent-a05)); }
.agerow { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.agebig {
  font-size: 30px; font-weight: 800; letter-spacing: -.03em;
  color: var(--accent); flex-shrink: 0; line-height: 1.1;
}
.agemeta { flex: 1; min-width: 0; }
.agetitle { font-size: 17px; font-weight: 750; margin-bottom: 4px; }
.agequip { font-size: 12.5px; font-weight: 600; color: var(--text-3); line-height: 1.45; }

.agesteps { display: flex; gap: 3px; margin-top: 14px; }
.agesteps i {
  flex: 1; height: 4px; border-radius: 2px; background: var(--surface-3);
}
.agesteps i.past { background: var(--accent-dim); }
.agesteps i.now  { background: var(--accent); box-shadow: 0 0 8px var(--accent-a60); }

/* ===== 챕터 행 ===== */
.chapterrow {
  display: flex; align-items: center; gap: 13px;
  padding: 16px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
  text-decoration: none; color: var(--text);
}
.chapterrow.locked { opacity: .55; }
.chapterico { font-size: 22px; flex-shrink: 0; }
.chaptermain { flex: 1; min-width: 0; }
.chaptermain b { display: block; font-size: 15px; margin-bottom: 3px; }
.chaptermain .muted { font-size: 12px; }
.chapterarrow { color: var(--text-3); font-size: 20px; flex-shrink: 0; }

/* ===== 발음 표기 ===== */
.qroman {
  font-size: 16px; font-weight: 650; color: var(--text-2);
  margin: -6px 0 14px; letter-spacing: .01em;
}
.exroman { font-size: 15px; font-weight: 650; color: var(--text-2); margin-top: 8px; }
.sentroman {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--text-3); line-height: 1.5;
}
.tip-roman { font-size: 12.5px; font-weight: 650; color: var(--text-3); margin-bottom: 5px; }
.rowroman { font-size: 12px; font-weight: 600; color: var(--text-3); }

/* ===== 검색 ===== */
.searchbox {
  position: relative; display: flex; align-items: center;
  margin: 4px 0 14px;
}
.searchbox input {
  flex: 1; min-width: 0;
  padding: 12px 38px 12px 36px; border-radius: var(--r);
  border: 1.5px solid var(--line); background: var(--surface);
  color: var(--text); font-family: var(--font); font-size: 15px; font-weight: 600;
  outline: none; -webkit-appearance: none;
}
.searchbox input:focus { border-color: var(--accent); }
.searchbox input::-webkit-search-cancel-button { display: none; }
.searchico {
  position: absolute; left: 13px; font-size: 16px; color: var(--text-3);
  pointer-events: none;
}
.searchclear {
  position: absolute; right: 9px;
  width: 24px; height: 24px; border-radius: 50%;
  border: none; background: var(--surface-3); color: var(--text-2);
  font-size: 11px; cursor: pointer; display: grid; place-items: center;
}

/* ===== 페이징 ===== */
.pager {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 20px 0 6px;
}
.pbtn {
  padding: 10px 18px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font-family: var(--font); font-size: 13.5px; font-weight: 650;
  cursor: pointer;
}
.pbtn:disabled { opacity: .35; cursor: default; }
.pbtn:active:not(:disabled) { background: var(--surface-2); }
.pinfo {
  font-size: 13px; font-weight: 700; color: var(--text-3);
  font-variant-numeric: tabular-nums; min-width: 54px; text-align: center;
}

/* ===== 단어 연결 ===== */
.slotbox {
  min-height: 62px; padding: 12px;
  border-radius: var(--r); border: 1.5px dashed var(--line);
  background: var(--surface-2);
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
  margin-bottom: 18px;
}
.slotempty { color: var(--text-3); font-size: 14px; font-weight: 600; }
.tile.slot { border-color: var(--accent); background: var(--accent-a15); }

.tilepool { display: flex; flex-wrap: wrap; gap: 8px; }
.tilepool .tile, .slotbox .tile {
  min-height: 0; padding: 11px 14px; font-size: 14.5px;
  display: inline-grid; width: auto;
}

.verdict {
  text-align: center; font-size: 21px; font-weight: 800;
  letter-spacing: -.02em; margin-bottom: 14px;
}
.verdict.ok   { color: var(--success); }
.verdict.warn { color: var(--warn); }
.verdict.bad  { color: var(--danger); }

/* 배너 변형 */
.banner-info {
  background: var(--info2-a12) !important;
  border-color: var(--info2-a30) !important;
  color: var(--info) !important;
}
.banner-bad {
  background: var(--danger-a10) !important;
  border-color: var(--danger-a30) !important;
  color: var(--danger) !important;
}

/* 탭이 5개가 되면서 글자가 좁아진다 */
.tabbar .tab { font-size: 9.5px; }
.tabbar .tab .ic { font-size: 17px; }

/* ===== 스피커 버튼 — 크게 + 눌린 느낌 ===== */
.spk {
  background: var(--surface-3); border: none; color: var(--text-2);
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  font-size: 15px; flex-shrink: 0; display: grid; place-items: center;
  transition: transform .1s, background .15s, color .15s;
}
.spk:active { transform: scale(.88); background: var(--accent); color: var(--on-accent); }
.spk-lg {
  width: 48px; height: 48px; font-size: 22px;
  background: var(--accent-a15);
  border: 1.5px solid var(--accent-a40);
  color: var(--accent-lite);
}
.spk-lg:active { transform: scale(.9); background: var(--accent); color: var(--on-accent); }
.spk.playing {
  background: var(--accent); color: var(--on-accent);
  animation: spkpulse .95s ease-out;
}
@keyframes spkpulse {
  0%   { box-shadow: 0 0 0 0 var(--accent-a55); }
  100% { box-shadow: 0 0 0 20px transparent; }
}
.spkrow { display: flex; justify-content: center; margin: 4px 0 16px; }

/* 마이크 패스 버튼 */
.btn-micoff {
  font-size: 13px;
  border-color: var(--warn-a40);
  color: var(--warn);
  background: transparent;
}
.btn-micoff:active { background: var(--warn-a10); }

/* 삭제 버튼 */
.btn-danger {
  background: transparent;
  border: 1.5px solid var(--danger-a45);
  color: var(--danger);
}
.btn-danger:active { background: var(--danger-a10); }

/* ===== 터치 기기 — 손가락 타겟 확대 =====
   48px 로 키운 것은 데스크톱 기준이고, 터치에서는 둘레 여백까지 눌려야 한다.
   Apple HIG 최소 44px 를 밑돌지 않게 맞춘다. */
@media (pointer: coarse) {
  .spk {
    width: 42px; height: 42px; font-size: 19px;
  }
  .spk-lg {
    width: 62px; height: 62px; font-size: 28px;
    border-width: 2px;
  }
  .spkrow { margin: 8px 0 18px; }

  .iconbtn { width: 42px; height: 42px; font-size: 19px; }
  .iconbtn.quit { width: 36px; height: 36px; font-size: 17px; }

  .fbtn { padding: 10px 16px; font-size: 14px; }
  .pbtn { padding: 13px 22px; font-size: 15px; }
  .searchclear { width: 30px; height: 30px; font-size: 13px; }
  .choice { padding: 19px 18px; }
  .tilepool .tile, .slotbox .tile { padding: 13px 16px; font-size: 15.5px; }
  .tabbar { padding: 10px 0 max(12px, env(safe-area-inset-bottom)); }
}

/* 아주 좁은 화면에서 탭 5개가 겹치지 않게 */
@media (max-width: 360px) {
  .tabbar .tab { font-size: 8.5px; }
  .tabbar .tab .ic { font-size: 16px; }
  :root { --pad: 16px; }
}

/* ===========================================================
   화면 높이 — 모바일 브라우저 바를 감안한 실제 보이는 높이
   =========================================================== */

html, body { height: 100%; }

@media (max-width: 430px) {
  /* .phone 이 100vh 면 주소줄·하단바가 차지하는 만큼 아래가 잘린다.
     svh = 바가 보이는 상태의 높이(가장 안전), dvh = 바 상태에 따라 동적.
     뒤에 선언한 것이 지원되면 이긴다. */
  /* body 를 overflow:hidden 으로 묶으면 svh/dvh 미지원 브라우저에서
     하단 탭바에 닿을 방법이 없어진다. 안쪽 컨테이너가 스크롤하므로 그대로 둔다. */
  .phone {
    width: 100%;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    margin: 0; border-radius: 0; border: none; box-shadow: none;
    /* viewport-fit=cover 라서 노치 아래로 내용이 들어간다 — 위쪽 여백을 확보 */
    padding-top: env(safe-area-inset-top);
  }
}

/* ===========================================================
   세로가 짧은 화면 — 문제 화면이 한 눈에 들어오게 압축
   브라우저 바가 있으면 844px 기기도 실제로는 700px 대가 된다.
   =========================================================== */
@media (max-height: 760px) {
  .statusbar { height: 28px; }
  .stage-age { padding: 0 11px; font-size: 12px; }
  .stage-track span { font-size: 11px; padding: 0 20px; }

  .gamebar { padding: 9px var(--pad); }
  .topbar  { padding: 11px var(--pad) 7px; }

  .qword { padding: 18px 0 12px; }
  .qword .w    { font-size: 32px; margin-bottom: 9px; }
  .qword .w.ko { font-size: 24px; }
  .qword .hint { margin-top: 8px; font-size: 12px; }
  .modetag { margin-bottom: 10px; padding: 4px 10px; }

  .spkrow { margin: 2px 0 10px; }
  .spk-lg { width: 46px; height: 46px; font-size: 21px; }

  .choice { padding: 14px 16px; margin-bottom: 8px; font-size: 15px; }
  .answers { padding-bottom: 14px; }

  .passrow { margin-top: 12px; padding-top: 12px; }
  .passnote { display: none; }       /* 좁으면 설명은 접는다 */
  .btn { padding: 14px; }
  .spacer-24 { height: 14px; }

  .mic-wrap { padding: 4px 0 12px; }
  .orb { width: 84px; height: 84px; font-size: 30px; margin-bottom: 14px; }
  .heard { padding: 11px; min-height: 48px; }
  .micmsg { margin-bottom: 10px; }

  .ex-mark { font-size: 27px; margin-bottom: 6px; }
  .ex-head { margin-bottom: 16px; }
  .ex-head .w { font-size: 27px; }
  .sent { padding: 14px; margin-bottom: 14px; }
  .mastery { margin-bottom: 14px; }
  .card { padding: 15px; margin-bottom: 11px; }
}

/* 아주 짧은 화면 (가로 모드 등) */
@media (max-height: 600px) {
  .statusbar { display: none; }      /* 나이는 홈에서 다시 보여준다 */
  .qword { padding: 12px 0 8px; }
  .qword .w { font-size: 27px; }
  .qword .hint { display: none; }
  .spk-lg { width: 42px; height: 42px; font-size: 19px; }
  .choice { padding: 12px 14px; margin-bottom: 7px; }
}

/* 터치 기기 타겟을 조금 낮춘다 — 62px 은 화면을 너무 먹는다 (최소 44px 유지) */
@media (pointer: coarse) {
  .spk-lg { width: 56px; height: 56px; font-size: 25px; }
}
@media (pointer: coarse) and (max-height: 760px) {
  .spk { width: 38px; height: 38px; font-size: 17px; }
  .spk-lg { width: 46px; height: 46px; font-size: 21px; }
}

/* ===========================================================
   해설 카드 — [다음] 을 항상 손에 닿는 곳에
   =========================================================== */

/* 스크롤 컨테이너(.qstage) 기준으로 하단에 붙는다.
   내용이 길어도 [다음] 을 찾아 스크롤할 필요가 없다. */
.stickynext {
  position: sticky; bottom: 0;
  margin: 10px calc(var(--pad) * -1) 0;
  padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent 0%, var(--bg) 38%, var(--bg) 100%);
}
.explain { padding-bottom: 0; }

/* 암기도 한 줄 안에 점수·다음 등장을 함께 */
.mastery .sep { margin: 0 7px; opacity: .45; }
.mastery .reasonline {
  margin-top: 4px; opacity: .7;
  font-size: 12px; line-height: 1.45;
}

/* ===== 짧은 화면에서 해설 카드 압축 ===== */
@media (max-height: 760px) {
  .ex-mark { font-size: 24px; margin-bottom: 4px; }
  .ex-head { margin-bottom: 12px; }
  .ex-head .w { font-size: 25px; gap: 8px; }
  .ex-head .ko { font-size: 16px; margin-top: 8px; }
  .ex-head .pos { margin-top: 8px; }
  .exroman { font-size: 13px; margin-top: 5px; }

  .sent { padding: 12px; margin-bottom: 11px; }
  .sent .ko, .sent .en { font-size: 15px; line-height: 1.45; }
  .sent .arrow { margin: 6px 0; font-size: 12px; }
  .sentroman { margin-top: 7px; padding-top: 7px; font-size: 12px; }

  .mastered-banner { padding: 10px; font-size: 12.5px; margin-bottom: 11px; }

  .mastery { margin-bottom: 10px; }
  .mastery .pips { font-size: 15px; letter-spacing: 4px; margin-bottom: 5px; }
  .mastery .txt { font-size: 12px; }
  .ladder { margin-top: 10px; gap: 4px; }
  .mchip { padding: 3px 8px; font-size: 10px; }

  .tiphint { display: none; }
  .stickynext { margin-top: 6px; padding-top: 10px; }
}

@media (max-height: 600px) {
  .ex-mark { display: none; }
  .ex-head .w { font-size: 22px; }
  .mastery .reasonline { display: none; }
  .ladder { display: none; }
}

/* 결과 화면도 버튼이 멀어지지 않게 */
.result .btn-row { position: sticky; bottom: 0; }
@media (max-height: 760px) {
  .result { padding: 16px var(--pad); }
  .result .ring { font-size: 44px; }
  .result .ring small { font-size: 18px; }
  .result .btn-row {
    margin: 8px calc(var(--pad) * -1) 0;
    padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent 0%, var(--bg) 38%, var(--bg) 100%);
  }
}

/* ===== 점수 분포 히스토그램 ===== */
.histo {
  display: flex; gap: 7px; align-items: flex-end;
  margin-top: 12px;
}
.hcol { flex: 1; min-width: 0; text-align: center; }
.hbarwrap {
  height: 52px; display: flex; align-items: flex-end; justify-content: center;
  margin-bottom: 6px;
}
.hbar {
  display: block; width: 100%; border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-dim));
  transition: height .5s cubic-bezier(.2,.8,.2,1);
  min-height: 0;
}
.hbar.done { background: linear-gradient(180deg, var(--gold), var(--gold-grad)); }
.hnum {
  font-size: 12px; font-weight: 750; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.hlab { font-size: 10.5px; font-weight: 700; color: var(--text-3); margin-top: 2px; }

@media (max-height: 760px) {
  .hbarwrap { height: 40px; }
  .histo { gap: 5px; margin-top: 9px; }
}

/* ===== 관리 메뉴 — 실제 메뉴 구조 (목록 → 상세) ===== */
.menulist {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
}
.menurow {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: var(--text);
}
.menurow:last-child { border-bottom: none; }
.menurow:active { background: var(--surface-2); }
.menuico { font-size: 19px; width: 24px; text-align: center; flex-shrink: 0; }
.menumain { flex: 1; min-width: 0; }
.menumain b { display: block; font-size: 14.5px; font-weight: 700; margin-bottom: 3px; }
.menumain .muted {
  font-size: 11.5px; display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.menuarrow { color: var(--text-3); font-size: 20px; flex-shrink: 0; }

.admback {
  display: inline-block; margin: 2px 0 12px;
  padding: 7px 13px 7px 9px; border-radius: 99px;
  background: var(--surface-2); color: var(--text-2);
  text-decoration: none; font-size: 13px; font-weight: 700;
}
.admback:active { background: var(--surface-3); color: var(--text); }
.admtitle {
  margin: 0 0 14px; font-size: 19px; font-weight: 800; letter-spacing: -.02em;
}

.admtable {
  width: 100%; border-collapse: collapse;
  font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.admtable th {
  text-align: left; padding: 7px 8px 7px 0;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-3);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.admtable td {
  padding: 9px 8px 9px 0; vertical-align: top;
  border-bottom: 1px solid var(--line);
  color: var(--text-2); line-height: 1.45;
}
.admtable td:first-child { color: var(--text); }
.admtable tr:last-child td { border-bottom: none; }
.admtable tr.mark td { background: var(--accent-a10); }
.admtable code {
  font-size: 11px; background: var(--surface-3);
  padding: 2px 5px; border-radius: 4px; word-break: break-all;
}

.admage { color: var(--accent); font-weight: 750; white-space: nowrap; }
.admquip { font-size: 11px; color: var(--text-3); font-weight: 600; }
.nowtag {
  display: inline-block; padding: 1px 6px; border-radius: 99px;
  background: var(--accent); color: var(--on-accent);
  font-size: 9.5px; font-weight: 800; vertical-align: middle;
}
.unlocktag {
  display: inline-block; margin-top: 4px;
  font-size: 10.5px; font-weight: 700; color: var(--gold);
}
.admitem {
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.admitem:last-child { border-bottom: none; }
.admitem b { font-size: 13.5px; }

/* ===== "이미 아는 단어예요" — 보조 동작으로 눈에 덜 띄게 =====
   이전 스타일(금색 점선 테두리 + 전체 너비)은 "주의/경고" 로 읽혀서
   정반대 의미("모르겠다")로 오인됐다. 테두리를 없애고 차분하게 둔다. */
.passrow {
  margin-top: 14px; padding-top: 0; border-top: none;
  text-align: center;
}
.btn-pass {
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
  width: auto; margin: 0 auto; padding: 10px 16px;
  background: none; border: none; border-radius: var(--r-sm);
  color: var(--text-3); font-family: var(--font);
  font-size: 13.5px; font-weight: 650; cursor: pointer;
  transition: color .15s, background .15s;
}
.btn-pass:active { background: var(--surface-2); color: var(--text-2); }
.passcheck { color: var(--success); font-weight: 800; }
.passsub { font-size: 10.5px; font-weight: 600; color: var(--text-3); opacity: .75; }

.micoffnote {
  text-align: center; margin-top: 8px;
  font-size: 11px; font-weight: 600; line-height: 1.5; color: var(--text-3);
}

/* ===== 토스트 ===== */
.toast {
  position: absolute; left: 50%; top: 76px; z-index: 60;
  transform: translate(-50%, -10px);
  padding: 10px 16px; border-radius: 99px;
  background: var(--surface-3); border: 1px solid var(--line);
  color: var(--text); font-size: 13px; font-weight: 700;
  box-shadow: 0 8px 24px var(--shade-a45);
  opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s;
  white-space: nowrap; max-width: 90%;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-height: 760px) {
  .passrow { margin-top: 10px; }
  .btn-pass { padding: 8px 14px; font-size: 13px; }
  .passsub { display: none; }
  .micoffnote { font-size: 10.5px; margin-top: 6px; }
}

/* 관리 메뉴 — 위험 동작 */
button.menurow {
  width: 100%; background: var(--surface); font-family: var(--font);
  text-align: left; cursor: pointer;
}
.menurow.danger .menumain b { color: var(--danger); }
.menurow.danger .menuico { filter: saturate(1.2); }
.menurow.danger:active { background: var(--danger-a10); }
.testtag {
  display: inline-block; margin-left: 7px;
  padding: 1px 7px; border-radius: 99px;
  background: var(--warn-a15); color: var(--warn);
  font-size: 9.5px; font-weight: 800; vertical-align: middle;
  letter-spacing: .02em;
}

/* ===== 학습 단계 목록 (연습 페이지) ===== */
.steprow {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; margin-bottom: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); text-decoration: none; color: var(--text);
}
.steprow.locked { opacity: .6; }
.steprow:not(.locked):active { background: var(--surface-2); }
.stepnum {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-3); font-size: 20px;
}
.steprow:not(.locked) .stepnum {
  background: var(--accent-a15); border: 1px solid var(--accent-a35);
}
.stepmain { flex: 1; min-width: 0; }
.steptag {
  display: block; font-size: 10px; font-weight: 800;
  letter-spacing: .06em; color: var(--text-3); margin-bottom: 3px;
}
.stepmain b { display: block; font-size: 15px; margin-bottom: 3px; }
.stepmain .muted { font-size: 11.5px; display: block; line-height: 1.45; }
.stepbar {
  display: block; height: 4px; border-radius: 2px;
  background: var(--surface-3); overflow: hidden; margin-top: 8px;
}
.stepbar > i { display: block; height: 100%; background: var(--accent-dim); border-radius: 2px; }
.menurow.locked { opacity: .55; }

/* ===== 스텝2 단어 찾기 ===== */
.findsent {
  position: relative;            /* 뜻 툴팁 기준점 */
  background: var(--surface-2); border: 1.5px solid var(--line);
  border-radius: var(--r); padding: 16px 12px;
  font-size: 17px; font-weight: 650; line-height: 2.2;
  margin-bottom: 12px; text-align: center;
  transition: border-color .25s, background .25s;
}
.findsent.complete { border-color: var(--success); background: var(--success-a10); }
.findsent.flash { animation: findflash .5s; }
@keyframes findflash {
  0%   { background: var(--info-a25); border-color: var(--info); }
  100% { background: var(--surface-2); border-color: var(--line); }
}

.fw {
  display: inline-block; padding: 2px 7px; margin: 0 2px;
  border-radius: 6px; font-family: var(--font);
}
/* 공개 전 — 단어 개수만 알려준다 (길이 정보는 주지 않는다) */
.fw.blank {
  color: var(--text-3); letter-spacing: .06em;
  border-bottom: 2px solid var(--surface-3); border-radius: 0;
  padding: 0 2px;
}
/* 찾은 단어 */
.fw.got { background: var(--info-a20); color: var(--info-lite); }
/* 공개됐지만 아직 안 찾은 단어 — 보이되 죽여 둔다 */
.fw.grey { color: var(--text-3); opacity: .5; }

/* 사전에 있는 단어는 눌러서 뜻을 볼 수 있다 (스텝1 과 같은 툴팁) */
.fw.lex {
  cursor: pointer;
  border-bottom: 1px dotted currentColor;
  border-radius: 6px 6px 0 0;
}
.fw.lex:active { background: var(--accent-a20); }
.fw.grey.lex { opacity: .62; }

.findstat {
  text-align: center; font-size: 12.5px; font-weight: 650;
  color: var(--text-3); margin-bottom: 14px; min-height: 18px; line-height: 1.5;
}
.findstat .ok { color: var(--success); }
.findstat .warn { color: var(--info); }
.findhint {
  text-align: center; margin-top: 16px;
  font-size: 11px; font-weight: 600; color: var(--text-3); opacity: .7;
}

.findpool { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.findpool .tile {
  min-height: 0; padding: 11px 14px; font-size: 14.5px;
  display: inline-grid; width: auto;
}
/* 공개 후 — 이 문장에 들어가는 단어를 연한 하늘색으로 유도한다 */
.findpool .tile.hint {
  border-color: var(--info2-a55);
  background: var(--info-a10);
  color: var(--info-lite);
  animation: hintglow 2s ease-in-out infinite;
}
@keyframes hintglow {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50%      { box-shadow: 0 0 0 5px var(--info-a10); }
}

/* ===== 스텝3 시작 문장 ===== */
.starterpick { text-align: center; font-size: 17px; font-weight: 700; }
.dots3 { color: var(--text-3); font-weight: 600; }
.starterbig {
  text-align: center; font-size: 28px; font-weight: 800;
  letter-spacing: -.02em; margin: 6px 0 22px; color: var(--accent);
}

/* ===== 타이핑 모드 — 글자 공개 힌트 + 포기 ===== */
.hintpat {
  margin-top: 18px; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 3px;
}
.pch {
  display: inline-grid; place-items: center;
  min-width: 17px; padding: 2px 1px;
  font-size: 18px; font-weight: 750; color: var(--text-3);
  border-bottom: 2px solid var(--surface-3);
}
.pch.open { color: var(--accent); border-bottom-color: var(--accent); }
.pgap { width: 12px; }

.btn-giveup {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  margin-top: 10px; background: transparent;
  border: 1px solid var(--danger-a30); color: var(--danger);
  font-size: 13.5px;
}
.btn-giveup:active { background: var(--danger-a10); }
.giveupsub { font-size: 10.5px; font-weight: 600; color: var(--text-3); }

@media (max-height: 760px) {
  .findsent { padding: 12px 10px; font-size: 16px; line-height: 2; margin-bottom: 10px; }
  .findstat { margin-bottom: 10px; font-size: 11.5px; }
  .findhint { display: none; }
  .findpool .tile { padding: 10px 12px; font-size: 14px; }
  .hintpat { margin-top: 12px; }
  .pch { font-size: 16px; min-width: 15px; }
  .btn-giveup { margin-top: 8px; padding: 10px; }
  .giveupsub { display: none; }
  .starterbig { font-size: 24px; margin: 4px 0 16px; }
  .steprow { padding: 13px; margin-bottom: 8px; }
  .stepnum { width: 38px; height: 38px; font-size: 18px; }
}

/* ===== 메인 — 언어 나이 히어로 ===== */
.agehero {
  display: block; width: 100%; text-align: left;
  background: linear-gradient(145deg, var(--surface), var(--accent-a10));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px 18px 16px; margin: 14px 0 14px;
  font-family: var(--font); color: var(--text); cursor: pointer;
}
.agehero:active { background: var(--surface-2); }
.aheadline {
  display: block; font-size: 21px; font-weight: 800;
  letter-spacing: -.025em; line-height: 1.3; margin-bottom: 7px;
}
.aquip {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--text-2); line-height: 1.5;
}
.asteps { display: flex; gap: 3px; margin: 16px 0 12px; }
.asteps i { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-3); }
.asteps i.past { background: var(--accent-dim); }
.asteps i.now  { background: var(--accent); box-shadow: 0 0 8px var(--accent-a60); }
.aguide {
  display: block; font-size: 11.5px; font-weight: 700;
  color: var(--accent); letter-spacing: .01em;
}

/* 학습 허브 — 추천 항목 강조 */
.steprow.hot { border-color: var(--accent-a55); background: var(--accent-a10); }
.hottag {
  display: inline-block; margin-left: 7px;
  padding: 1px 7px; border-radius: 99px;
  background: var(--accent); color: var(--on-accent);
  font-size: 9.5px; font-weight: 800; vertical-align: middle;
}

/* ===== 네 가지 학습 타일 ===== */
.ltiles { display: flex; gap: 8px; align-items: stretch; }
.ltile {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 14px 6px 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); text-decoration: none; color: var(--text);
  transition: transform .1s, border-color .15s, background .15s;
}
.ltile:active { transform: scale(.97); }
.ltile.locked { opacity: .45; }
.ltile .lic { font-size: 21px; line-height: 1; }
.ltile .lname {
  font-size: 11px; font-weight: 700; text-align: center;
  line-height: 1.25; letter-spacing: -.01em;
}
.ltile .lnum {
  font-size: 11px; font-weight: 800; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
/* 추천되는 학습을 크게 강조 */
.ltile.hot {
  flex: 1.45;
  background: linear-gradient(145deg, var(--accent-a20), var(--accent-a05));
  border-color: var(--accent-a55);
  box-shadow: 0 6px 20px var(--accent-a20);
}
.ltile.hot .lic { font-size: 28px; }
.ltile.hot .lname { font-size: 12.5px; color: var(--accent-lite2); }
.ltile.hot .lnum { color: var(--accent-lite); }

.recline {
  margin-top: 12px; padding: 12px 14px;
  background: var(--accent-a10);
  border: 1px solid var(--accent-a25);
  border-radius: var(--r-sm);
  font-size: 13px; font-weight: 700; color: var(--accent-lite2);
  text-align: center; line-height: 1.5;
}

/* ===== 홈 — 다음 나이까지의 목표 =====
   타일의 숫자는 "지금까지", 여기 숫자는 "얼마나 더". 그래서 칸을 나눴다. */
.goalbox {
  margin-top: 10px; padding: 14px 14px 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r);
}
.glabel {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: .02em;
  color: var(--text-2); margin-bottom: 11px;
}
.gsub { font-size: 11px; font-weight: 700; color: var(--text-3); white-space: nowrap; }
.goalrow {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; font-size: 12px;
}
.gic { font-size: 13px; line-height: 1; flex-shrink: 0; }
.gname { width: 54px; flex-shrink: 0; font-weight: 700; color: var(--text-2); }
.gbar {
  flex: 1; min-width: 0; height: 5px; border-radius: 3px;
  background: var(--surface-3); overflow: hidden;
}
.gbar > i { display: block; height: 100%; background: var(--accent-dim); border-radius: 3px; }
.goalrow.over .gbar > i { background: var(--success); }
/* 레벨업 판정에 쓰이지 않는 참조 목표 (2세까지의 연결·시작·완성).
   값은 그대로 보여주고 추천에도 쓰므로, 숨기지 않고 한 톤만 낮춘다. */
.goalrow.soft .gname,
.goalrow.soft .gnum { opacity: .72; }
.goalrow.soft .gbar > i { background: var(--accent-dim); opacity: .55; }
/* 아직 열리지 않은 학습 */
.goalrow.lockedrow .gname { color: var(--text-3); }
.goalrow.lockedrow .gbar > i { background: var(--text-3); }
.goalrow.lockedrow .gtag { color: var(--warn); }
.gnum {
  flex-shrink: 0; font-variant-numeric: tabular-nums;
  font-size: 11.5px; color: var(--text-3);
}
.gnum b { color: var(--text); font-weight: 800; font-size: 12.5px; }
.gtag {
  width: 52px; flex-shrink: 0; text-align: right;
  font-size: 10.5px; font-weight: 800; color: var(--text-3);
}
.goalrow.over .gtag { color: var(--success); }
.gnote {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line);
  font-size: 11px; font-weight: 600; color: var(--text-3); line-height: 1.5;
}

/* 성장 가이드·관리의 목표 단계표 — 칸이 다섯이라 촘촘하게 */
.goaltable { font-size: 11.5px; }
.goaltable th, .goaltable td { padding: 7px 4px; }
.goaltable .gcell { text-align: right; font-variant-numeric: tabular-nums; }
.goaltable th.gcell { color: var(--text-3); font-size: 10px; font-weight: 800; }
.goaltable .gdash { color: var(--text-3); opacity: .5; }
.goaltable .gsoft { color: var(--text-3); }

/* 깊이 요약 칩 */
.depthrow {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px;
  padding-top: 13px; border-top: 1px solid var(--line);
}
.dchip {
  padding: 5px 10px; border-radius: 99px;
  background: var(--surface-2); color: var(--text-3);
  font-size: 11px; font-weight: 650;
}
.dchip b { color: var(--text); font-weight: 800; margin-left: 2px; }

@media (max-height: 760px) {
  .agehero { padding: 16px 15px 13px; margin: 11px 0; }
  .aheadline { font-size: 19px; }
  .asteps { margin: 12px 0 9px; }
  .ltile { padding: 11px 5px 10px; }
  .ltile.hot .lic { font-size: 25px; }
  .recline { margin-top: 10px; padding: 10px 12px; font-size: 12.5px; }
  .goalbox { padding: 12px 12px 10px; }
  .goalrow { padding: 4px 0; }
}

/* ===== 단어장 품사별 진도 요약 ===== */
.possum {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin: 2px 0 14px;
}
.poscell {
  display: flex; flex-direction: column; gap: 4px;
  padding: 9px 10px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line);
  font-family: var(--font); color: var(--text); cursor: pointer; text-align: left;
}
.poscell.on { border-color: var(--accent); background: var(--accent-a10); }
.poscell:active { background: var(--surface-2); }
.pc-name { font-size: 10.5px; font-weight: 700; color: var(--text-3); }
.pc-num {
  font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1;
}
.pc-num i { font-size: 10px; font-weight: 600; color: var(--text-3); font-style: normal; }
.pc-bar { height: 3px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.pc-bar > i { display: block; height: 100%; background: var(--accent-dim); border-radius: 2px; }

/* ===========================================================
   헤더 — 상단 두 줄을 하나로 합치고 셋으로 쪼갰다
   =========================================================== */
.appheader {
  flex-shrink: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.hdr {
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: 46px; padding: 0 var(--pad);
  overflow: hidden;
}

/* 왼쪽 — 국기 + 언어 나이. 칩 모양으로 "눌러서 바꿀 수 있다" 를 읽히게 한다 */
.hchip {
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
  padding: 5px 9px 5px 8px; border-radius: 99px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-family: var(--font); color: var(--text); cursor: pointer;
}
.hchip:active { background: var(--surface-3); border-color: var(--accent-a55); }
.hflag { font-size: 15px; line-height: 1; flex-shrink: 0; }
.hage {
  font-size: 17px; font-weight: 800; letter-spacing: -.03em;
  line-height: 1; white-space: nowrap;
}
.hcaret { color: var(--text-3); font-size: 9px; }

/* 가운데 — 닉네임. 누르면 관리(프로필) 로 간다 */
.hname {
  display: flex; align-items: center; gap: 2px;
  flex: 1; min-width: 0; padding: 6px 2px;
  background: none; border: none; text-align: left;
  font-family: var(--font); color: var(--text); cursor: pointer;
}
.hnametx {
  font-size: 14px; font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hname.unset .hnametx { color: var(--accent); font-weight: 650; }
.hnamearrow { color: var(--text-3); font-size: 14px; flex-shrink: 0; }
.hname:active .hnametx { color: var(--accent); }

/* 오른쪽 — 연속 학습일 */
.hright {
  flex-shrink: 0;
  font-size: 13px; font-weight: 800; color: var(--warn);
  white-space: nowrap;
}

/* 컨텐츠 첫 줄 — 앱 이름 / 페이지 제목 */
.wordmark {
  margin: 6px 0 4px; padding: 0;
  font-size: 30px; font-weight: 900; letter-spacing: .02em;
  line-height: 1;
}
.pagetitle {
  display: flex; align-items: baseline; gap: 8px;
  margin: 6px 0 14px; padding: 0;
  font-size: 22px; font-weight: 800; letter-spacing: -.02em;
}
.pagecount { font-size: 13px; font-weight: 700; color: var(--text-3); }

/* ===========================================================
   니나노 소개
   NINANO 를 NI·NA·NO 로 쪼개 색을 달리 입혀서,
   머리글자가 어디서 나왔는지 글자만 보고 알 수 있게 한다.
   =========================================================== */
.about { padding: 4px 0 2px; }
.abhead {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px;
  margin-bottom: 14px;
}
.abword {
  font-size: 34px; font-weight: 900; letter-spacing: .01em; line-height: 1;
}
.abword > i { font-style: normal; }
.abs0 { color: var(--accent); }
.abs1 { color: var(--accent-lite); }
.abs2 { color: var(--text); }
.abipa {
  font-size: 15px; font-weight: 700; color: var(--text-3);
  letter-spacing: .02em; white-space: nowrap;
}
.abtag {
  font-size: 14px; font-weight: 750; line-height: 1.55;
  letter-spacing: -.01em; color: var(--text);
}
.abtagl {
  font-size: 13.5px; font-weight: 650; line-height: 1.6;
  color: var(--text-2); margin-top: 5px;
}

.ablist {
  margin: 22px 0 0;
  border-top: 1px solid var(--line);
}
.abrow {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.abkey {
  width: 36px; flex-shrink: 0;
  font-size: 19px; font-weight: 900; letter-spacing: .01em; line-height: 1.25;
}
.abmain { flex: 1; min-width: 0; }
.abmain b {
  display: block; font-size: 14.5px; font-weight: 750;
  letter-spacing: -.01em; line-height: 1.4;
}
.abmain span {
  display: block; font-size: 12.5px; font-weight: 650;
  color: var(--text-2); line-height: 1.5; margin-top: 3px;
}
.abnote {
  margin-top: 18px; padding: 12px 13px;
  background: var(--accent-a10); border: 1px solid var(--accent-a25);
  border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 650; color: var(--accent-lite2);
  line-height: 1.55;
}

@media (max-height: 760px) {
  .abword { font-size: 30px; }
  .abrow { padding: 12px 0; }
}

/* ===========================================================
   프로필 — 관리 페이지 첫 줄 + 상세 입력
   =========================================================== */
.profcard {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 14px; margin: 2px 0 14px;
  background: linear-gradient(145deg, var(--surface), var(--accent-a10));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  text-decoration: none; color: var(--text);
}
.profcard:active { background: var(--surface-2); }
.pfav {
  width: 50px; height: 50px; flex-shrink: 0;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 26px; line-height: 1;
}
.pfmain { flex: 1; min-width: 0; }
.pfname {
  display: block; font-size: 16px; font-weight: 800;
  letter-spacing: -.02em; margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pfname.unset { color: var(--accent); }
.pfgreet {
  display: block; font-size: 12px; font-weight: 600; color: var(--text-2);
  line-height: 1.4; margin-bottom: 7px;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pfsocial {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  font-size: 11.5px; font-weight: 600; color: var(--text-3);
}
.pfsocial b { color: var(--text); font-weight: 800; }

/* 상세 입력 — 적는 즉시 저장되므로 저장 버튼이 없다 */
.pform { display: flex; flex-direction: column; gap: 18px; }
.pfrow { display: block; }
.pfhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
.pflabel { font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--text-2); }
.pfalways { font-size: 10.5px; font-weight: 700; color: var(--text-3); }

/* 공개 여부 */
.pfeye {
  flex-shrink: 0; padding: 4px 10px; border-radius: 99px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-family: var(--font); font-size: 10.5px; font-weight: 800;
  color: var(--text-3); cursor: pointer;
}
.pfeye.on {
  background: var(--success-a15); border-color: var(--success-a40); color: var(--success);
}

.pfin {
  width: 100%; box-sizing: border-box;
  padding: 11px 12px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1.5px solid var(--line);
  font-family: var(--font); font-size: 14px; font-weight: 650; color: var(--text);
}
.pfin::placeholder { color: var(--text-3); font-weight: 600; }
.pfin:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.pfta { resize: vertical; line-height: 1.5; min-height: 58px; }
.pfnum { width: 110px; }

/* 프로필 이미지 선택 */
.pfpick { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.pfopt {
  aspect-ratio: 1; display: grid; place-items: center;
  border-radius: var(--r-sm); font-size: 19px;
  background: var(--surface-2); border: 1.5px solid var(--line);
  cursor: pointer; padding: 0;
}
.pfopt.on { border-color: var(--accent); background: var(--accent-a15); }

/* 성별 — 가로 선택 */
.pfseg { display: flex; gap: 6px; flex-wrap: wrap; }
.pfsegb {
  flex: 1; min-width: 68px; padding: 9px 8px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1.5px solid var(--line);
  font-family: var(--font); font-size: 12.5px; font-weight: 700;
  color: var(--text-2); cursor: pointer;
}
.pfsegb.on { border-color: var(--accent); background: var(--accent-a15); color: var(--text); }

/* 다른 사람에게 보이는 모양 */
.pfprev {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 6px 13px;
}

@media (max-width: 360px) {
  .pfpick { grid-template-columns: repeat(6, 1fr); }
}

/* ===== 설정 모달 — 2열 카드 ===== */
.lgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lcard {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 13px 12px; border-radius: var(--r);
  border: 1.5px solid var(--line); background: var(--surface);
  color: var(--text); font-family: var(--font); cursor: pointer; text-align: left;
}
.lcard.wide { grid-column: span 2; flex-direction: row; align-items: center; gap: 11px; }
.lcard.on { border-color: var(--accent); background: var(--accent-a10); }
.lcard:active { background: var(--surface-2); }
.lcflag { font-size: 21px; line-height: 1; flex-shrink: 0; }
.lcname { font-size: 13.5px; font-weight: 700; flex: 1; min-width: 0; }
.lcsub { display: block; font-size: 11px; font-weight: 600; color: var(--text-3); margin-top: 3px; }
.lccheck {
  position: absolute; top: 9px; right: 11px;
  color: var(--accent); font-weight: 800; font-size: 13px;
}
.lcard.wide .lccheck { position: static; }

/* ===== 언어 성취도 행 ===== */
.achlist {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
}
.achrow {
  display: flex; align-items: center; gap: 4px; width: 100%;
  border-bottom: 1px solid var(--line);
}
.achrow:last-child { border-bottom: none; }
.achrow.active { background: var(--accent-a10); }
/* 행 본체 — 누르면 그 언어로 바꾼다 */
.acpick {
  display: flex; align-items: center; gap: 11px;
  flex: 1; min-width: 0; padding: 13px 4px 13px 14px;
  background: none; border: none;
  font-family: var(--font); color: var(--text); cursor: pointer; text-align: left;
}
.acpick:active { background: var(--surface-2); }
/* › — 누르면 세부 성취도 */
.acinfo {
  flex-shrink: 0; padding: 13px 13px 13px 7px;
  background: none; border: none; cursor: pointer;
  color: var(--text-3); font-size: 17px; font-family: var(--font);
}
.acinfo:active { color: var(--accent); }
.acflag { font-size: 20px; line-height: 1; flex-shrink: 0; }
.acmain { flex: 1; min-width: 0; }
.acmain b { display: block; font-size: 14px; margin-bottom: 2px; }
.acmain .muted { font-size: 11.5px; display: block; }
.acage {
  font-size: 15px; font-weight: 800; color: var(--accent);
  white-space: nowrap; flex-shrink: 0;
}

/* 성취도 세부 다이얼로그 */
.acdim { position: fixed; inset: 0; background: var(--shade-a60); z-index: 70; }
.acdlg {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 71; width: min(330px, calc(100% - 40px));
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 18px;
  box-shadow: 0 20px 60px var(--shade-a60);
  animation: pop .18s cubic-bezier(.2,.9,.3,1.3);
}
.acdhead {
  display: flex; align-items: center; gap: 11px;
  padding-bottom: 14px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.acdhead b { display: block; font-size: 16px; }
.acdhead .muted { font-size: 12px; display: block; margin-top: 2px; }
.acdrow {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 7px 0; font-size: 13px; color: var(--text-2);
}
.acdrow b { color: var(--text); font-size: 15px; font-variant-numeric: tabular-nums; }
.acdcourses { margin: 14px 0 10px; }

/* 관리 — 학습일 달력 */
.caldots { display: flex; flex-direction: column; gap: 4px; }
.calrow { display: flex; gap: 4px; }
.calcell {
  flex: 1; aspect-ratio: 1; max-width: 22px;
  border-radius: 3px; background: var(--surface-3);
}
.calcell.on { background: var(--warn); }
.calcell.today { box-shadow: 0 0 0 2px var(--accent); }

@media (max-height: 760px) {
  .hdr { height: 40px; }
  .hage { font-size: 16px; }
  .hflag { font-size: 14px; }
  .hnametx { font-size: 13px; }
  .wordmark { font-size: 26px; margin: 12px 0 2px; }
  .pagetitle { font-size: 19px; margin: 12px 0 10px; }
}