/* 학습(/app) 전용 — 공통 토큰은 /lib/ui.css
   화면은 위 메뉴와 같은 폭(1040px) + 위 탭 셋. 복습·퀴즈 중엔 탭을 숨긴다(body.focus) */

:root { --c-learn: #f08c00; --app-w: calc(1040px + 2 * var(--gut)); } /* 위 메뉴 알약과 같은 폭 */

/* 탭: 떠 있는 메뉴와 같은 알약 모양. 지금 화면은 까맣게 채운다 */
.tabs-inner { max-width: var(--app-w); margin: 0 auto; padding: 20px var(--gut) 0; }
.seg-tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.seg-tabs a { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 18px 0 14px; border-radius: 999px; font-size: 15px; font-weight: 700; color: var(--ink-2); transition: background .2s, color .2s; white-space: nowrap; }
.seg-tabs a:hover { background: var(--bg-2); color: var(--ink); }
.seg-tabs a[aria-current="page"] { background: var(--ink); color: var(--bg); }
.seg-tabs .glyph-i svg { width: 19px; height: 19px; }
.seg-tabs .count { font-size: 12.5px; font-weight: 800; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: var(--sign); color: #111; }
@media (max-width: 600px) {
  .seg-tabs { display: flex; }
  .seg-tabs a { flex: 1; justify-content: center; gap: 4px; padding: 0 6px; font-size: 13.5px; height: 40px; }
  .seg-tabs .glyph-i { display: none; }
}
body.focus .tabs { display: none; }

.view { max-width: var(--app-w); margin: 0 auto; padding: 24px var(--gut) 96px; min-height: 60vh; }
.view:focus { outline: none; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.h1 { font-size: clamp(26px, 3.2vw, 30px); font-weight: 780; letter-spacing: -0.045em; line-height: 1.2; }
.h1-count { color: var(--ink-3); font-weight: 650; }
.lead { color: var(--ink-2); margin-top: 6px; font-size: 15.5px; }
.block { margin-top: 36px; }
.block-title { display: flex; align-items: baseline; gap: 10px; font-size: 18px; font-weight: 780; letter-spacing: -0.03em; margin: 28px 0 12px; }
.block .block-title { margin-top: 0; }
.block-title small { font-size: 14px; font-weight: 550; color: var(--ink-3); letter-spacing: 0; }
.block-title .more { margin-left: auto; font-size: 14px; font-weight: 650; color: var(--ink-3); }
.block-title .more:hover { color: var(--ink); }
.glyph-i { display: inline-grid; }
.glyph-i svg { width: 22px; height: 22px; }

/* 도톰한 버튼 — 누르면 쑥 들어간다 */
.btn-3d { transition: transform .08s, opacity .2s; }
.btn-3d:active:not(:disabled) { transform: scale(.98); }
.btn-3d.btn-sign { --shade: #d4ad00; }
.btn-ink { background: var(--ink); color: var(--bg); }
.btn-3d.btn-ink { --shade: color-mix(in srgb, var(--ink) 55%, #000); }
.btn-good { background: var(--good); color: #fff; }
.btn-3d.btn-good { --shade: color-mix(in srgb, var(--good) 65%, #000); }
.btn-bad { background: var(--bad); color: #fff; }
.btn-3d.btn-bad { --shade: color-mix(in srgb, var(--bad) 65%, #000); }

/* ───────── 학습 첫 화면 ───────── */
/* 한 줄 기록 */
.strip { display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap; margin-bottom: 14px; font-size: 14px; font-weight: 650; color: var(--ink-2); }
.strip > span { display: inline-flex; align-items: center; gap: 8px; }
.strip-streak svg { width: 18px; height: 18px; color: var(--ink-3); }
.strip-streak.lit { color: #e8590c; }
.strip-streak.lit svg { color: #ff7a1a; }
.strip .goal { width: 110px; height: 8px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.strip .goal i { display: block; height: 100%; border-radius: inherit; background: var(--sign); }
.strip b { color: var(--ink); }
.strip-done { margin-left: auto; }

/* 오늘 할 일 */
.hero-do { background: var(--panel); color: var(--panel-ink); box-shadow: inset 0 0 0 1px var(--panel-line); border-radius: 14px; padding: clamp(26px, 4vw, 44px); display: flex; align-items: center; gap: clamp(20px, 4vw, 48px); min-height: 280px; }
.hero-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.hero-kicker { font-size: 14px; font-weight: 700; color: color-mix(in srgb, var(--panel-ink) 60%, transparent); }
.hero-title { font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -0.05em; line-height: 1.18; }
.hero-title em { font-style: normal; color: var(--sign); }
.hero-desc { font-size: 16px; line-height: 1.6; color: color-mix(in srgb, var(--panel-ink) 72%, transparent); max-width: 460px; }
.hero-actions { margin-top: 10px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero-actions .btn { min-width: 200px; }
.hero-teaser { flex: 0 0 min(42%, 400px); margin: 0; display: grid; gap: 10px; }
.hero-teaser video { width: 100%; aspect-ratio: 700 / 466; object-fit: cover; border-radius: 14px; background: #1d2536; }
.hero-teaser figcaption { font-size: 14px; font-weight: 700; color: color-mix(in srgb, var(--panel-ink) 72%, transparent); text-align: center; }
.hero-check { display: none; flex-shrink: 0; width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--good) 22%, transparent); color: #6fe09a; }
.hero-check svg { width: 56px; height: 56px; }

/* 내 낱말: 수어 카드 */
.sgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.scard { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 10px 10px 14px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s, transform .3s var(--ease); }
.scard:hover { box-shadow: 0 0 0 1px var(--line-2), var(--shadow); transform: translateY(-2px); }
.scard-media { position: relative; aspect-ratio: 700 / 466; border-radius: 14px; overflow: hidden; background: var(--bg-2); display: grid; place-items: center; }
.scard-media video, .scard-media img { width: 100%; height: 100%; object-fit: cover; }
.scard-media img { image-rendering: auto; filter: saturate(.95); }
.no-sign { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 8px; }
.no-sign b { font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; letter-spacing: -0.04em; color: var(--ink-2); }
.no-sign small { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.scard.plain .scard-tx b { display: none; } /* 낱말은 위 큰 글자로 이미 보인다 */
.scard-play { position: absolute; right: 8px; bottom: 8px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(15, 23, 41, .6); color: #fff; transition: opacity .2s; }
.scard-play svg { width: 13px; height: 13px; }
.scard:hover .scard-play { opacity: 0; }
.scard-tx { display: grid; gap: 2px; padding: 0 6px; }
.scard-tx b { font-size: 19px; letter-spacing: -0.03em; }
.scard-tx small { font-size: 13.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scard .badge { position: absolute; left: 18px; top: 18px; }

/* 퀴즈 */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.pcard-q { background: var(--card); border-radius: 14px; padding: 22px; box-shadow: 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 6px; min-height: 180px; transition: box-shadow .2s, transform .3s var(--ease); }
.pcard-q:hover { box-shadow: 0 0 0 1px var(--line-2), var(--shadow); transform: translateY(-2px); }
.pq-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--easy) 12%, var(--card)); color: var(--easy); margin-bottom: 8px; }
.pq-ic.s { background: color-mix(in srgb, var(--sign) 38%, var(--card)); color: #5c4800; }
.pcard-q b { font-size: 17px; letter-spacing: -0.025em; }
.pcard-q small { font-size: 14px; color: var(--ink-2); }
.pq-foot { margin-top: auto; padding-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--easy); }
.pq-foot::after { content: " →"; }
.later { margin-top: 22px; display: grid; gap: 6px; }
.later-title { font-size: 13px; font-weight: 750; color: var(--ink-3); margin-bottom: 2px; }
.later-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--bg-2); font-size: 14.5px; font-weight: 650; color: var(--ink-2); }
.later-row .glyph-i svg { width: 18px; height: 18px; }
.later-name { flex: 1; }
.later-row small { font-size: 13px; color: var(--ink-3); }
a.later-row:hover { background: var(--bg-3); }

@media (max-width: 960px) {
  .hero-do { flex-direction: column; align-items: stretch; min-height: 0; }
  .hero-teaser { flex-basis: auto; order: -1; }
  .hero-check { display: none; }
  .sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip-done { margin-left: 0; }
}
@media (max-width: 420px) {
  .strip-done { display: none; }
  .hero-actions .btn { width: 100%; }
  .sgrid { gap: 10px; }
  .scard-tx b { font-size: 17px; }
}

/* 낱말 | 뜻 목록(퀴즈렛) */
.terms { display: grid; column-gap: 40px; border-top: 1px solid var(--line); }
@media (min-width: 961px) { .terms { grid-template-columns: 1fr 1fr; } }
.term { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px 6px; border-bottom: 1px solid var(--line); border-radius: 0; transition: background .15s; }
a.term:hover { background: var(--bg-2); }
.term-tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.term-tx b { display: flex; align-items: center; gap: 7px; font-size: 16.5px; font-weight: 700; letter-spacing: -0.025em; }
.term-tx small { font-size: 14px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term-tx .skeleton { display: inline-block; width: 160px; height: 11px; vertical-align: middle; }
.due-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sign); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sign) 30%, transparent); }
.term .icon-btn { width: 34px; height: 34px; opacity: 0; transition: opacity .15s; }
.term:hover .icon-btn, .term:focus-within .icon-btn { opacity: 1; }
.tthumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--bg-2); }
.tthumb.none { display: inline-block; }
.term-have { font-size: 13px; font-weight: 650; color: var(--good); }
.sign-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sign); flex-shrink: 0; }
.badge.due { background: var(--sign); color: #111; }
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.search { position: relative; flex: 1; min-width: 0; }
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-3); }
.search .input { padding-left: 40px; }
.sort { height: 48px; padding: 0 14px; border-radius: 14px; border: 0; background: var(--bg-2); font: inherit; font-size: 14px; font-weight: 650; color: var(--ink); }
.chips { margin-bottom: 14px; }
.listbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
.listbar .chips { margin-bottom: 0; }
.listbar-r { display: flex; align-items: center; gap: 14px; }
.sort.plain { height: 32px; padding: 0 2px; background: none; font-size: 13.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.text-btn { font-size: 13.5px; font-weight: 600; color: var(--ink-2); padding: 6px 2px; }
.text-btn:hover, .sort.plain:hover { color: var(--ink); }
.picking .text-btn { color: var(--bad); }
.list-foot { margin-top: 12px; font-size: 13px; color: var(--ink-3); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* 낱말 자세히 */
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); font-weight: 600; font-size: 14.5px; margin-bottom: 14px; }
.back:hover { color: var(--ink); }
.back svg { width: 18px; height: 18px; }
.detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.detail-main { display: grid; gap: 14px; align-content: start; }
.detail-main .back { justify-self: start; margin-bottom: 0; }
.detail-sign { position: sticky; top: calc(var(--nav-h) + 16px); }
.dsec { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.dsec h2 { font-size: 13px; font-weight: 750; color: var(--ink-3); letter-spacing: 0; }
.dtext { font-size: 16px; line-height: 1.65; color: var(--ink); }
.dsrc { font-size: 12.5px; color: var(--ink-3); }
.dchips { display: flex; flex-wrap: wrap; gap: 6px; }
.dchips span { padding: 5px 12px; border-radius: 999px; background: var(--bg-2); font-weight: 650; font-size: 14px; }
.dstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dstats div { background: var(--bg-2); border-radius: 14px; padding: 12px; display: grid; gap: 2px; }
.dstats small { font-size: 12px; color: var(--ink-3); font-weight: 650; }
.dstats b { font-size: 18px; letter-spacing: -0.03em; }
.dbar { height: 5px; border-radius: 3px; background: var(--line-2); overflow: hidden; margin-top: 4px; }
.dbar i { display: block; height: 100%; background: var(--good); }
@media (max-width: 900px) { .detail { grid-template-columns: 1fr; } .detail-sign { position: static; order: -1; } .dstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.headword { font-size: clamp(40px, 6vw, 56px); font-weight: 780; letter-spacing: -0.055em; line-height: 1.05; }
.meaning { font-size: 19px; line-height: 1.55; letter-spacing: -0.02em; }
.meaning.easy { border-left: 3px solid var(--easy); padding-left: 14px; }
.ctx { padding: 16px 18px; border-radius: 16px; background: var(--bg-2); font-size: 15px; color: var(--ink-2); display: grid; gap: 4px; }
.ctx small { font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.ctx mark { background: color-mix(in srgb, var(--sign) 55%, transparent); color: inherit; padding: 0 2px; border-radius: 3px; }
.ctx a { display: inline-flex; margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink); gap: 4px; align-items: center; }
.ctx a svg { width: 14px; height: 14px; }
.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* 수어 영상 */
.stage { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.stage-video { position: relative; background: var(--bg-2); aspect-ratio: 700 / 466; }
.stage-video video { width: 100%; height: 100%; object-fit: contain; }
.stage-video .msg { position: absolute; inset: 0; display: grid; place-items: center; color: #b6b9c0; font-size: 14px; text-align: center; padding: 16px; }
.stage-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; flex-wrap: wrap; }
.stage-bar .label { font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin-right: auto; }
.pill { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; font-weight: 650; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; background: var(--card); }
.pill[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pill svg { width: 15px; height: 15px; }
.formula { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 14px 14px 4px; font-size: 15px; }
.formula .eq { color: var(--ink-3); font-weight: 700; padding: 0 2px; }
.part { height: 36px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-2); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; background: var(--card); }
.part[aria-pressed="true"] { background: var(--sign); border-color: var(--sign); color: #111; }
.part.none { border-style: dashed; color: var(--ink-3); font-weight: 600; cursor: default; }
.part small { font-size: 11px; font-weight: 600; opacity: .7; }
.explain { padding: 6px 14px 12px; font-size: 14px; color: var(--ink-2); }
.stage-note { padding: 0 14px 14px; font-size: 13px; color: var(--ink-3); }
.stage-note a { text-decoration: underline; text-underline-offset: 3px; }
.alts { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px 12px; }

/* ───────── 복습·퀴즈 세션 ───────── */
.session { max-width: 640px; margin: 0 auto; }
.session.wide { max-width: 760px; }
.view.fit { max-width: 800px; padding: 12px var(--gut) 16px; min-height: 0; }
.session.fit { height: calc(100dvh - var(--nav-h) - 28px); min-height: 480px; display: flex; flex-direction: column; }
.session-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.progress { flex: 1; height: 14px; background: var(--bg-2); border-radius: 999px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--good); border-radius: inherit; width: var(--p); transition: width .5s var(--ease); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .1), inset 0 3px 0 rgba(255, 255, 255, .25); }
.session-top .num { font-size: 13.5px; color: var(--ink-3); font-weight: 650; min-width: 44px; text-align: right; }
.combo span { display: inline-flex; align-items: center; gap: 2px; font-size: 13.5px; font-weight: 800; color: #ff7a1a; animation: pop .3s var(--ease) both; }
.combo svg { width: 18px; height: 18px; }
.session-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.session-foot { display: grid; gap: 8px; }
.q { font-size: 15px; font-weight: 700; color: var(--ink-3); text-align: center; }
.q-meaning { font-size: clamp(22px, 3vw, 28px); font-weight: 750; letter-spacing: -0.035em; text-align: center; line-height: 1.4; padding: 12px 4px; }
.q-cloze { font-size: 20px; line-height: 1.6; text-align: center; padding: 8px 4px; }
.q-cloze .blank { display: inline-block; min-width: 72px; border-bottom: 3px solid var(--ink); margin: 0 4px; }

/* 뒤집는 카드 */
.flip { flex: 1; min-height: 0; perspective: 1600px; cursor: pointer; outline: none; }
.flip-in { position: relative; height: 100%; transition: transform .55s var(--ease); transform-style: preserve-3d; }
.flip.on .flip-in { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--card); border-radius: 14px; box-shadow: 0 0 0 1.5px var(--line), 0 5px 0 var(--line); padding: clamp(16px, 2.6vw, 24px); display: flex; flex-direction: column; gap: 12px; }
.flip:focus-visible .face { box-shadow: 0 0 0 2px var(--ink), 0 5px 0 var(--line); }
/* 영상은 따로 그려져서 backface-visibility만으론 뒷면에 비친다 — 반쯤 돌았을 때 안 보이는 면을 아예 숨긴다 */
.flip .rear, .flip.on .front { visibility: hidden; transition: visibility 0s .27s; }
.flip.on .rear { visibility: visible; transition: visibility 0s .27s; }
.face.rear { transform: rotateY(180deg); align-items: center; justify-content: center; text-align: center; }
.face .q-meaning { flex: 1; display: grid; place-items: center; }
.flip-hint { text-align: center; font-size: 13.5px; color: var(--ink-3); font-weight: 600; }
.back-video { width: min(100%, 340px); aspect-ratio: 700 / 466; min-height: 0; flex: 0 1 auto; max-height: 42%; object-fit: cover; border-radius: 16px; background: var(--bg-2); }
.face.rear .headword { font-size: clamp(36px, 6vw, 52px); }
.face.rear .meaning { font-size: 17px; color: var(--ink-2); max-width: 440px; }

/* 수어 영상이 카드 남는 높이를 채운다 */
.face .stage, .qprompt .stage { flex: 1 1 auto; min-height: 110px; display: flex; flex-direction: column; border: 0; border-radius: 0; background: none; }
.face .stage-video, .qprompt .stage-video { flex: 1; min-height: 0; aspect-ratio: auto; border-radius: 16px; overflow: hidden; }
.face .stage-video video, .qprompt .stage-video video { position: absolute; inset: 0; }
.face .stage-bar, .qprompt .stage-bar { padding: 6px 0 0; }

.grades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.grades[hidden] { display: none; }
.grade { position: relative; display: grid; gap: 2px; padding: 11px 8px; border-radius: 16px; background: var(--card); font-weight: 750; font-size: 15.5px; box-shadow: 0 0 0 1.5px var(--line-2), 0 4px 0 var(--line-2); margin-bottom: 4px; transition: transform .08s, box-shadow .08s; }
.grade:active { transform: translateY(4px); box-shadow: 0 0 0 1.5px var(--line-2); }
/* 아래 4px 입체 그림자까지 감싸는 초점 테두리(outline은 그림자를 가로지른다) */
.grade:focus-visible, .choice:focus-visible { outline: none; }
.grade:focus-visible::after, .choice:focus-visible::after { content: ""; position: absolute; inset: -5px -5px -9px; border-radius: 20px; box-shadow: 0 0 0 2px var(--easy); pointer-events: none; }
.grade small { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.grade.again { color: var(--bad); }
.grade.hard { color: var(--c-learn); }
.grade.good { background: var(--good); color: #fff; box-shadow: 0 4px 0 color-mix(in srgb, var(--good) 65%, #000); }
.grade.good small { color: rgba(255, 255, 255, .8); }
.kbd { font-size: 12px; color: var(--ink-3); text-align: center; }
@media (hover: none) { .kbd { display: none; } } /* 키보드 없는 휴대폰에선 단축키 안내가 자리만 차지한다 */
.kbd kbd { font-family: inherit; font-size: 11px; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--card); }

/* 퀴즈 */
.qcard { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.qprompt { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.qcard.meaning2word .qprompt, .qcard.cloze .qprompt, .qcard.word2sign .qprompt { flex: 0 1 auto; padding: 20px 0; }
.qcard.word2sign .qprompt { padding: 4px 0; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qcard.word2sign .choices { flex: 1; min-height: 0; grid-template-rows: 1fr 1fr; }
.choice { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 12px 14px; border-radius: 14px; background: var(--card); font-size: 18px; font-weight: 750; letter-spacing: -0.02em; box-shadow: 0 0 0 2px var(--line-2), 0 4px 0 var(--line-2); margin-bottom: 4px; transition: transform .08s, box-shadow .12s, background .12s; }
.choice .key { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 12.5px; font-weight: 800; color: var(--ink-3); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.choice:hover:not(:disabled) { background: var(--bg-2); }
.choice:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 2px var(--line-2); }
.choice.right { background: color-mix(in srgb, var(--good) 14%, var(--card)); color: var(--good); box-shadow: 0 0 0 2px var(--good), 0 4px 0 var(--good); }
.choice.wrong { background: color-mix(in srgb, var(--bad) 12%, var(--card)); color: var(--bad); box-shadow: 0 0 0 2px var(--bad), 0 4px 0 var(--bad); }
.choice.right .key, .choice.wrong .key { color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.choice:disabled { cursor: default; }
.choice.video { padding: 6px; min-height: 0; }
.choice.video video { width: 100%; height: 100%; object-fit: cover; border-radius: 13px; background: var(--bg-2); }
.choice.video .key { top: 14px; left: 14px; transform: none; background: var(--card); }


/* 결과 */
.result { flex: 1; display: grid; align-content: center; justify-items: center; gap: 14px; text-align: center; padding: 16px 0; animation: pop .4s var(--ease) both; }
.result-badge { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--sign); color: #111; }
.result-badge svg { width: 40px; height: 40px; }
.result h2 { font-size: clamp(26px, 4vw, 34px); letter-spacing: -0.045em; }
.result-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 120px)); gap: 10px; }
.result-stats div { border-radius: 16px; padding: 3px; display: grid; }
.result-stats span { font-size: 12px; font-weight: 800; color: #fff; padding: 4px 0 5px; }
.result-stats b { background: var(--card); border-radius: 13px; padding: 12px 4px; font-size: 21px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.result-stats .c-good { background: var(--good); } .result-stats .c-good b { color: var(--good); }
.result-stats .c-easy { background: var(--easy); } .result-stats .c-easy b { color: var(--easy); }
.result-stats .c-sign { background: #e6b800; } .result-stats .c-sign b { color: #9a7a00; }
.missed { display: grid; gap: 6px; justify-items: center; }
.missed small { font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.missed div { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.missed a { padding: 6px 12px; border-radius: 999px; background: var(--bg-2); font-weight: 650; font-size: 14px; }
.result-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

/* ───────── 낱말 모으기 ───────── */
.sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.set { background: var(--card); border-radius: 14px; padding: 20px; display: grid; gap: 6px; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s, transform .3s var(--ease); }
.set:hover { box-shadow: 0 0 0 1px var(--line-2), var(--shadow); transform: translateY(-2px); }
.set b { font-size: 17px; letter-spacing: -0.03em; }
.set p { color: var(--ink-2); font-size: 14px; }
.set .words { color: var(--ink-3); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-prog { height: 8px; border-radius: 999px; background: var(--bg-2); overflow: hidden; margin-top: 6px; }
.set-prog i { display: block; height: 100%; background: var(--good); border-radius: inherit; }
.set-have { font-size: 12.5px; font-weight: 700; color: var(--ink-3); }

.gate { text-align: center; max-width: 440px; margin: 48px auto; display: grid; gap: 10px; justify-items: center; }
.gate h2 { font-size: 22px; letter-spacing: -0.03em; }
.gate-ic { width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--sign) 40%, var(--card)); color: #5c4800; margin-bottom: 6px; }
.gate-ic svg { width: 30px; height: 30px; }

@media (max-width: 600px) {
  .answer-video + div { justify-items: center; text-align: center; }
  .result-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .today-foot { flex-wrap: wrap; }
}
@media (max-width: 420px) {
  .choices { gap: 8px; }
  .choice { font-size: 16.5px; min-height: 58px; }
}

/* 퀴즈 채점: 문제 자리가 정답 카드로 바뀌고, 보기엔 ✓/✕, 아래엔 다음 버튼 */
.answer-card { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 18px; border-radius: 14px; animation: pop .35s var(--ease) both; }
.answer-card.ok { background: color-mix(in srgb, var(--good) 9%, var(--card)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--good) 35%, transparent); }
.answer-card.no { background: color-mix(in srgb, var(--bad) 7%, var(--card)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bad) 30%, transparent); }
.verdict { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px 0 9px; border-radius: 999px; font-size: 14px; font-weight: 800; color: #fff; }
.verdict svg { width: 17px; height: 17px; }
.answer-card.ok .verdict { background: var(--good); }
.answer-card.no .verdict { background: var(--bad); }
.answer-body { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.answer-video { width: min(240px, 60vw); aspect-ratio: 700 / 466; object-fit: cover; border-radius: 14px; background: var(--bg-2); }
.answer-body > div { display: grid; gap: 4px; justify-items: center; text-align: center; }
.answer-video + div { justify-items: start; text-align: left; }
.answer-word { font-size: clamp(30px, 4.4vw, 40px); font-weight: 800; letter-spacing: -0.05em; }
.answer-mean { font-size: 15.5px; color: var(--ink-2); max-width: 320px; }
.qcard .qprompt:has(.answer-card) { flex: 0 1 auto; }
.choice.dim { opacity: .38; }
.choice .key svg { width: 15px; height: 15px; }
.choice.right .key { background: var(--good); color: #fff; box-shadow: none; }
.choice.wrong .key { background: var(--bad); color: #fff; box-shadow: none; }
.choice.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.qfoot { min-height: 56px; display: grid; align-items: center; }
.next-btn { position: relative; overflow: hidden; background: var(--ink); color: var(--bg); }
.next-btn span { position: relative; }
.next-btn.go { background: color-mix(in srgb, var(--good) 40%, #0b0f14); color: #fff; }
.next-fill { position: absolute; inset: 0; background: var(--good); transform-origin: left; animation: fill 1.8s linear both; }
@keyframes fill { from { transform: scaleX(0); } }

/* 단어장 골라 빼기 */
.term.pick { width: 100%; text-align: left; font: inherit; cursor: pointer; }
.term.pick .tick { width: 22px; height: 22px; border-radius: 7px; display: inline-grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line-2); color: transparent; flex-shrink: 0; }
.term.pick .tick svg { width: 14px; height: 14px; }
.term.pick { background: none; border-left: 0; border-right: 0; border-top: 0; }
.term.pick.on { background: color-mix(in srgb, var(--bad) 6%, transparent); }
.term.pick.on .tick { background: var(--bad); color: #fff; box-shadow: none; }
.selbar { position: sticky; bottom: 16px; z-index: 20; margin-top: 16px; }
.selbar[hidden] { display: none; }
.selbar-in { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--line-2), var(--shadow-lg); }
.selbar-in b { font-size: 15px; margin-right: 4px; }
.selbar-in .grow { flex: 1; }
.sort.sm { height: 36px; font-size: 13.5px; border-radius: 11px; padding: 0 10px; }
.gpick { position: relative; }
.gpick .caret { font-size: 11px; opacity: .6; }
.gmenu { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 30; width: min(360px, 86vw); max-height: 320px; overflow: auto; padding: 8px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); animation: pop .2s var(--ease) both; }
.gmenu[hidden] { display: none; }
.glabel { font-size: 12px; font-weight: 750; color: var(--ink-3); padding: 8px 10px 4px; }
.gitem { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 11px; font: inherit; font-size: 14.5px; text-align: left; color: var(--ink); }
.gitem:hover { background: var(--bg-2); }
.gitem .tick { width: 20px; height: 20px; border-radius: 6px; display: inline-grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line-2); color: transparent; flex-shrink: 0; }
.gitem .tick svg { width: 13px; height: 13px; }
.gitem.on .tick { background: var(--bad); color: #fff; box-shadow: none; }
.gname { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gitem b { font-size: 13px; color: var(--ink-3); }

/* ───────── 낱말 담기 ───────── */
.block.first { margin-top: 8px; }
.find { display: flex; gap: 10px; }
.find .search { flex: 1; }
.find .input { height: 54px; font-size: 16px; }
.found { margin-top: 12px; }
.found:empty { display: none; }
.found-card { background: var(--card); border-radius: 14px; padding: 20px; box-shadow: 0 0 0 1px var(--line); display: grid; gap: 12px; animation: pop .3s var(--ease) both; }
.found-card.one { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: center; }
.found-tx { display: grid; gap: 6px; justify-items: start; }
.found-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 750; color: var(--good); }
.found-ok svg { width: 17px; height: 17px; }
.found-word { font-size: 34px; font-weight: 800; letter-spacing: -0.05em; }
.found-mean { font-size: 16px; color: var(--ink-2); line-height: 1.55; }
.found-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.found-chips a { padding: 7px 14px; border-radius: 999px; background: var(--bg-2); font-weight: 700; font-size: 15px; }
.found-chips a:hover { background: var(--bg-3); }
.found-err { color: var(--bad); font-weight: 650; font-size: 14.5px; }

.howto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 14px; }
.howto-col { background: var(--bg-2); border-radius: 14px; padding: 22px; display: grid; gap: 16px; align-content: start; }
.howto-head { display: flex; align-items: baseline; gap: 10px; }
.howto-head b { font-size: 19px; letter-spacing: -0.03em; }
.howto-head small { font-size: 13.5px; color: var(--ink-3); font-weight: 600; }
.howto { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.howto li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; background: var(--card); border-radius: 14px; padding: 12px; }
.howto li b { font-size: 15.5px; letter-spacing: -0.02em; }
.howto li p { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; margin-top: 3px; }
.howto-no { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 11.5px; font-weight: 800; vertical-align: 1px; }

/* 단계 그림 — 실제 확장 화면을 단순하게. 누를 곳은 노란 테두리(.hl) */
.mock { height: 92px; border-radius: 12px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.mock .hl { box-shadow: 0 0 0 2.5px var(--sign), 0 0 0 6px color-mix(in srgb, var(--sign) 35%, transparent); animation: hl 1.6s ease-in-out infinite; }
@keyframes hl { 50% { box-shadow: 0 0 0 2.5px var(--sign), 0 0 0 9px color-mix(in srgb, var(--sign) 15%, transparent); } }
.mk-bar { background: #0f1729; align-items: flex-end; padding: 10px; gap: 8px; }
.mk-play { width: 0; height: 0; border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.mk-line { flex: 1; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #ff3b30 45%, rgba(255,255,255,.3) 45%); align-self: center; }
.mk-logo { width: 14px; height: 10px; border-radius: 5px; border: 2px solid #ffd60a; border-left-color: #4c9dff; }
.mk-switch { width: 30px; height: 17px; border-radius: 999px; background: #1366e4; position: relative; }
.mk-switch i { position: absolute; right: 2px; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; }
.mk-cap { background: radial-gradient(120% 100% at 70% 0%, #3a5b8f 0%, #1a2a47 55%, #0b1220 100%); }
.mk-cap > span { padding: 4px 8px; border-radius: 6px; background: rgba(8, 9, 12, .75); color: #fff; font-weight: 700; font-size: 11.5px; white-space: nowrap; }
.mk-cap u { text-decoration: underline dotted; text-underline-offset: 3px; border-radius: 4px; padding: 0 2px; }
.mk-panel { background: var(--bg-2); justify-content: flex-start; align-items: flex-start; padding: 12px; gap: 8px; }
.mk-panel b { font-size: 18px; letter-spacing: -0.03em; }
.mk-book { width: 26px; height: 26px; border-radius: 8px; background: var(--card); display: grid; place-items: center; color: var(--ink); }
.mk-book svg { width: 15px; height: 15px; }
.mk-vid { position: absolute; left: 12px; right: 12px; bottom: 10px; height: 34px; border-radius: 8px; background: linear-gradient(135deg, #8fa3b8, #5b6c80); }
.mk-text { background: var(--bg-2); flex-direction: column; align-items: stretch; justify-content: center; gap: 7px; padding: 14px; }
.mk-text i { display: block; height: 8px; border-radius: 4px; background: var(--line-2); }
.mk-text i.sel { background: #b9d3ff; width: 82%; }
.mk-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; margin-left: 30%; padding: 4px 10px; border-radius: 999px; background: var(--card); font-weight: 750; font-size: 11.5px; }
.mk-chip .dot { width: 10px; height: 7px; border-radius: 4px; border: 2px solid #ffd60a; border-left-color: #4c9dff; }
.mk-card { background: var(--bg-2); flex-direction: column; align-items: stretch; gap: 6px; padding: 12px 14px; }
.mk-card small { font-size: 10.5px; font-weight: 800; color: var(--easy); }
.mk-card .ln { height: 7px; border-radius: 4px; background: var(--line-2); }
.mk-save { align-self: flex-start; padding: 3px 10px; border-radius: 8px; background: var(--card); font-weight: 750; font-size: 11.5px; }

@media (max-width: 960px) { .howto-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .find { flex-direction: column; }
  .found-card.one { grid-template-columns: 1fr; }
  .howto li { grid-template-columns: 1fr; }
}

/* 확장 설치 안내 */
.hero-note { font-size: 14px; color: var(--ink-2); max-width: 36em; }
.install-row { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.empty .btn { margin-top: 14px; }

.replay { margin-top: 28px; text-align: center; }