/* 가타카나 1000 디자인 시스템 (2026-11-03 다시 씀: 전문가 3명 검토 반영)
   콘셉트: 일본 거리 여행. 종이색 바탕 · 藍(남색) 주 버튼 · 朱(주홍) 도장과 강조 · 남색 간판(흰 테두리 선)
   - 빨강은 '틀림'에만 쓴다 (주홍 도장과 구분: 더 차갑고 진한 빨강)
   - 글꼴: Pretendard(한글, 서버에 둠) + 시스템 일본어 글꼴(히라기노·Noto CJK)
   - 밤(어두운 화면)에는 간판이 네온처럼 빛난다
   - 누르는 곳 44px 이상, 마우스 올림 효과는 마우스가 있는 기기에서만, 움직임 줄이기 설정을 따른다 */
:root {
  --paper: #f6f3ec;
  --paper-2: #eee9df;
  --card: #ffffff;
  --ink: #1b1d22;
  --ink-2: #44464d;
  --muted: #6b675e;
  --line: #e4dfd4;
  --line-2: #d4cdbf;
  --ai: #24365a;            /* 藍: 주 버튼·간판 */
  --ai-ink: #ffffff;
  --ai-soft: #e6eaf3;
  --ai-text: #24365a;       /* 남색 글자 (어두운 화면에서는 밝게) */
  --shu: #d6452b;           /* 朱: 도장·브랜드 */
  --shu-ink: #b8371f;       /* 연한 바탕 위 주홍 글자 */
  --shu-soft: #fbe8e2;
  --good: #1d7546;
  --good-soft: #e1f1e7;
  --bad: #b3262f;
  --bad-soft: #fbe5e5;
  --warn: #8a5600;
  --warn-soft: #fbf0d9;
  --sign: #22345a;
  --shadow: 0 1px 2px rgba(27, 29, 34, .05), 0 6px 20px rgba(27, 29, 34, .06);
  --shadow-lift: 0 2px 6px rgba(27, 29, 34, .08), 0 18px 44px rgba(27, 29, 34, .14);
  --r: 18px;
  --r-sm: 12px;
  --jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --ko: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --pop: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #111216;
    --paper-2: #1a1b20;
    --card: #1b1c21;
    --ink: #eceae6;
    --ink-2: #c6c4be;
    --muted: #9b988f;
    --line: #2b2c32;
    --line-2: #3a3b42;
    --ai: #3d5a99;
    --ai-ink: #ffffff;
    --ai-soft: #1f2940;
    --ai-text: #9fb4e6;
    --shu: #e65a3f;
    --shu-ink: #f27a61;
    --shu-soft: #35201b;
    --good: #3fa772;
    --good-soft: #15291d;
    --bad: #ef6b6b;
    --bad-soft: #36191b;
    --warn: #e2ad52;
    --warn-soft: #30270f;
    --sign: #1d2c4c;
    --shadow: none;
    --shadow-lift: 0 18px 44px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
/* 화면 틀 (모든 서비스 공통 규칙 /srv/infra/shared/UX.md '1. 화면 틀'):
   문서는 스크롤하지 않는다. 틀(body)은 화면 높이에 맞춰 두고, 화면마다 내용 칸 하나만 스크롤한다
   - 머리줄(.top)이 있는 화면(홈·단어장·실전·내 기록·설정·로그인): main이 내용 칸
   - 머리줄이 없는 화면(공부·첫 안내·승인 대기·시작): 그 화면(section.screen)이 내용 칸 */
html, body { margin: 0; overscroll-behavior: none; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 var(--ko);
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a, button, summary, label, [role="button"] { touch-action: manipulation; } /* 두 번 눌러도 화면이 커지지 않게 (UX.md '7. 터치') */
a { color: var(--ai-text); }
h1, h2, h3 { margin: 0; }
.jp, [lang="ja"] { font-family: var(--jp); word-break: normal; letter-spacing: 0; }
.sr-only { position: fixed; top: 0; left: 0; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* fixed: absolute면 위치를 잡을 부모가 없을 때 문서 아래에 붙어 문서가 스크롤된다 (UX.md 1 숨김 글자) */
svg.i { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2.5px solid color-mix(in srgb, var(--ai-text) 70%, transparent); outline-offset: 2px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }

/* ---- 틀 ---- */
.screen { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
.screen:has(> .top) { overflow: visible; }   /* 머리줄이 있으면 main만 스크롤 */
/* 공부·시작 화면은 가운데 560px 폭 (스크롤 칸은 화면 폭 전체, 안쪽 여백으로 가운데에 둔다) */
#study.screen, #boot.screen { padding-left: max(0px, calc((100% - 560px) / 2)); padding-right: max(0px, calc((100% - 560px) / 2)); }
#study.screen { overscroll-behavior-y: none; }   /* 공부 중에는 끝에서 튕기지 않는다 (카드를 옆으로 밀 때 화면이 흔들리지 않게) */
/* 머리줄: 틀 안의 한 칸 (떠 있지 않다). 바탕·아래 선은 그림자로 화면 양 끝까지 늘리고(내용 칸이 가운데 좁아도) clip-path로 위아래는 자른다 */
.top {
  flex: none; position: relative; z-index: 1;
  display: flex; align-items: center; gap: 6px; width: 100%; max-width: 560px; margin: 0 auto;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  background: var(--paper);
  box-shadow: 0 0 0 100vmax var(--paper), 0 1px 0 100vmax var(--line);
  clip-path: inset(0 -100vmax -1px);
}
.top .spacer { flex: 1; }
.top-title { font-size: 17px; font-weight: 700; margin-left: 2px; }
/* 내용 칸: 화면 폭 전체가 스크롤 칸이고, 내용은 안쪽 여백으로 가운데 --mw 폭에 둔다 */
main {
  --mw: 560px;
  flex: 1; min-height: 0; width: 100%; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; align-content: start;
  padding: 6px max(16px, env(safe-area-inset-right), calc((100% - var(--mw)) / 2 + 16px)) calc(36px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left), calc((100% - var(--mw)) / 2 + 16px));
}
/* main은 높이가 정해진 스크롤 칸이라, 격자로 쓰는 화면(가로 홈·단어장·기록)은 줄 높이를 내용만큼으로 못 박는다.
   안 그러면 넘침을 자르는 카드·목록의 줄이 0으로 눌려 서로 겹친다 */
.screen > main { grid-auto-rows: max-content; }
.stack > * + * { margin-top: 14px; }

/* 브랜드: 작은 남색 간판 + 주홍 도장 점 */
.brand { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 800; letter-spacing: -.03em; }
.brand-mark {
  position: relative; display: inline-grid; place-items: center; height: 30px; padding: 0 8px; border-radius: 6px;
  background: var(--sign); color: #fff; font: 600 15px/1 var(--jp); letter-spacing: .06em;
  box-shadow: inset 0 0 0 2px var(--sign), inset 0 0 0 3.5px rgba(255, 255, 255, .85);
}
.brand-mark::after { content: ""; position: absolute; right: -4px; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--shu); box-shadow: 0 0 0 2px var(--paper); }
.brand-mark.big { height: 56px; padding: 0 16px; font-size: 28px; border-radius: 10px; box-shadow: inset 0 0 0 3px var(--sign), inset 0 0 0 5.5px rgba(255, 255, 255, .85); }
.brand-mark.big::after { width: 18px; height: 18px; right: -6px; top: -6px; box-shadow: 0 0 0 3px var(--paper); }

.icon-btn, .nav-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 10px;
  border: 0; border-radius: 12px; background: transparent; color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 600;
}
.nav-btn svg.i { width: 19px; height: 19px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 18px; }
.card-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.card-title h2 { font-size: 15px; font-weight: 700; color: var(--ink); }
.card-title span { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.eyebrow { font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 0 10px; }

/* ---- 버튼 ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 18px; border-radius: 14px;
  border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font-weight: 650; font-size: 16px; text-decoration: none;
  white-space: nowrap; touch-action: manipulation; transition: transform .12s var(--ease), background .15s, border-color .15s, box-shadow .15s;
}
/* 누르는 순간 모양을 바꾸지 않는다 (:active 없음. 화면을 바꾸는 단추·링크·설정 줄, 아이폰이 두 번 눌러야 넘어가는 문제 UX.md 7) */
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--ai); border-color: var(--ai); color: var(--ai-ink); box-shadow: 0 6px 16px color-mix(in srgb, var(--ai) 28%, transparent); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ai-text); box-shadow: none; }
.btn.big { width: 100%; min-height: 56px; font-size: 17px; border-radius: 16px; }
.btn.danger { color: var(--bad); }
.btn.sm { min-height: 44px; padding: 8px 14px; font-size: 14px; border-radius: 12px; }
.btn .sub { font-weight: 500; opacity: .82; font-size: 13.5px; }
.btn-col { display: grid; gap: 8px; }
@media (hover: hover) {
  .btn:hover { border-color: var(--muted); }
  .btn.primary:hover { filter: brightness(1.08); border-color: var(--ai); }
  .btn.ghost:hover { background: var(--ai-soft); }
  .icon-btn:hover, .nav-btn:hover { background: var(--paper-2); color: var(--ink); }
}

/* ---- 간판: 남색 판 + 안쪽 흰 줄 (일본 안내판처럼) ---- */
.sign {
  display: inline-block; font-family: var(--jp); font-weight: 600; color: #fff; letter-spacing: .04em; line-height: 1.2;
  background: linear-gradient(#2c416c, var(--sign)); border-radius: .18em; padding: .2em .6em .24em;
  box-shadow: inset 0 0 0 .07em var(--sign), inset 0 0 0 .11em rgba(255, 255, 255, .9), 0 1px 0 rgba(0, 0, 0, .2), 0 6px 14px rgba(36, 54, 90, .18);
}
.sign.sm { font-size: 13px; padding: 3px 7px 4px; border-radius: 5px; letter-spacing: .02em; box-shadow: inset 0 0 0 1px var(--sign), inset 0 0 0 2px rgba(255, 255, 255, .55); }
@media (prefers-color-scheme: dark) {
  /* 밤거리: 간판이 은은하게 빛난다 */
  .sign { background: #10182b; color: #e8eeff; box-shadow: inset 0 0 0 .07em #6f8fd6, 0 0 18px rgba(111, 143, 214, .32), 0 0 2px rgba(150, 175, 235, .6); text-shadow: 0 0 8px rgba(160, 190, 255, .55); }
  .sign.sm { background: #121a2e; box-shadow: inset 0 0 0 1px #6f8fd6, 0 0 8px rgba(111, 143, 214, .25); text-shadow: none; }
}

/* ---- 홈: 기차표(切符) ---- */
.ticket {
  position: relative; border-radius: 22px; overflow: hidden; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.ticket-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px 0; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .08em; }
.ticket-head .jp { letter-spacing: .3em; }
.ticket-edit { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 10px; margin-right: -10px; border: 0; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; border-radius: 10px; letter-spacing: 0; }
.ticket-edit svg.i { width: 15px; height: 15px; }
.ticket-edit { position: relative; }
.ticket-edit::after { content: ""; position: absolute; inset: -4px 0; }   /* 모양은 36px 그대로, 누르는 곳은 44px */
.route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 8px; padding: 6px 18px 0; }
.route .stop { display: grid; gap: 0; }
.route .stop.to { text-align: right; }
.route .jp { font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: .02em; }
.route small { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.route .arrow { align-self: center; color: var(--shu); margin-bottom: 14px; }
.route .arrow svg.i { width: 28px; height: 28px; stroke-width: 1.8; }
.dday-row { display: flex; align-items: baseline; gap: 10px; padding: 10px 18px 0; }
.dday { font-size: 44px; font-weight: 850; line-height: 1; letter-spacing: -.035em; color: var(--shu); font-variant-numeric: tabular-nums; }
.dday .dash { margin: 0 .03em; font-weight: 600; }
.dday-row .msg-line { font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.dday-row .msg-line.warn { color: var(--warn); }
.track { padding: 14px 18px 0; }
.track-bar { position: relative; height: 6px; border-radius: 99px; background: repeating-linear-gradient(90deg, var(--line-2) 0 8px, transparent 8px 13px); }
.track-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--shu); transform-origin: left; width: 100%; transform: scaleX(0); transition: transform .8s var(--ease); }
.track-bar b { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 3px var(--shu); transition: left .8s var(--ease); }
.track-label { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.perf { position: relative; height: 22px; margin-top: 12px; }
.perf::before { content: ""; position: absolute; left: 14px; right: 14px; top: 50%; border-top: 2px dashed var(--line-2); }
.perf::after, .perf .notch { content: ""; position: absolute; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); }
.perf::after { right: -12px; box-shadow: inset 1px 0 0 var(--line); }
.perf .notch { left: -12px; box-shadow: inset -1px 0 0 var(--line); }
.ticket-body { padding: 4px 18px 18px; }
.start-btn { flex-direction: column; gap: 0; min-height: 66px; }
.start-btn .sub { font-size: 13px; }
.today-done { text-align: center; padding: 4px 0 12px; }
.today-done b { display: block; font-size: 19px; font-weight: 750; margin-bottom: 2px; }
.today-done span { font-size: 14px; color: var(--muted); }
.goal-empty { display: grid; gap: 4px; padding: 6px 18px 0; }
.goal-empty b { font-size: 20px; font-weight: 750; }
.goal-empty span { font-size: 14px; color: var(--muted); }
.fix-row { padding: 10px 18px 0; }
.travel-search { display: flex; align-items: center; gap: 10px; min-height: 52px; width: 100%; padding: 0 14px; margin-bottom: 10px; border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--paper); color: var(--muted); font-size: 15px; text-align: left; }

/* 도장 (최근 7일) */
.stamps { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.stamps div { display: grid; justify-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.stamps i { position: relative; width: 34px; height: 34px; border-radius: 50%; border: 1.5px dashed var(--line-2); display: grid; place-items: center; }
.stamps .on i { border: 0; background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--shu) 88%, #fff) 0, var(--shu) 70%); color: #fff; transform: rotate(-8deg); box-shadow: inset 0 0 0 2.5px rgba(255, 255, 255, .55); }
.stamps .on i svg.i { width: 16px; height: 16px; stroke-width: 2.6; }
.stamps .today i { outline: 2px solid var(--ai-text); outline-offset: 2px; }
.stamps .today span { color: var(--ink); font-weight: 700; }
.week-line { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; font-size: 14px; color: var(--ink-2); flex-wrap: wrap; }
.week-line b { font-variant-numeric: tabular-nums; }

/* 노선(여정 지도) */
.journey { list-style: none; margin: 0; padding: 0; }
.journey li { position: relative; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px; min-height: 52px; padding: 6px 0; }
.journey li:not(:last-child)::before { content: ""; position: absolute; left: 14px; top: 38px; bottom: -14px; border-left: 2px dotted var(--line-2); }
.journey li.done:not(:last-child)::before { border-left: 2px solid var(--shu); }
.journey .dot { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 2px solid var(--line-2); color: var(--muted); font-size: 12px; font-weight: 700; }
.journey .dot svg.i { width: 15px; height: 15px; }
.journey .done .dot { background: var(--shu-ink); border-color: var(--shu-ink); color: #fff; } /* 흰 글자 대비 4.5 이상 (--shu는 4.43) */
@media (prefers-color-scheme: dark) { .journey .done .dot { background: var(--shu); border-color: var(--shu); color: var(--paper); } } /* 밤: 밝은 주홍 바탕에 어두운 글자 (흰 글자는 3.56) */
.journey .current .dot { background: var(--ai); border-color: var(--ai); color: #fff; box-shadow: 0 0 0 5px var(--ai-soft); }
.journey .name { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 650; font-size: 15px; }
.journey .count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.journey .current .count { color: var(--ai-text); font-weight: 700; }
.journey .locked .name { color: var(--muted); font-weight: 500; }
.journey .locked .sign { background: var(--muted); box-shadow: none; text-shadow: none; color: var(--card); }
.journey .mini { grid-column: 2 / -1; height: 5px; border-radius: 99px; background: var(--ai-soft); overflow: hidden; margin-top: -2px; }
.journey .mini i { display: block; height: 100%; width: 100%; background: var(--ai); transform-origin: left; transform: scaleX(0); transition: transform .6s var(--ease); }
.link-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--ai-text); font-weight: 650; font-size: 14px; }
.link-btn svg.i { width: 16px; height: 16px; }

/* 목록 줄 (연습하기 등) */
.rows { display: grid; }
.rows > * + * { border-top: 1px solid var(--line); }
.row-link {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 2px;
  border: 0; background: transparent; text-align: left; color: var(--ink);
}
.row-link .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--ai-soft); color: var(--ai-text); }
.row-link .ic.shu { background: var(--shu-soft); color: var(--shu-ink); }
.row-link b { display: block; font-size: 15px; font-weight: 650; }
.row-link small { display: block; font-size: 13px; color: var(--muted); }
.row-link > svg.i { color: var(--muted); }
.row-link.locked b { color: var(--ink-2); }

/* 앱으로 설치 안내 자리: 비어 있으면 간격도 차지하지 않게 (안은 kit installBanner) */
.install-slot { display: contents; }
.stack > * + .install-slot > .ak-install { margin-top: 14px; }
.sync { text-align: center; font-size: 13px; color: var(--muted); margin-top: 16px; }
.sync.warn { color: var(--warn); }

/* ---- 공부 ---- */
.study-top { display: flex; align-items: center; gap: 10px; padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 4px max(10px, env(safe-area-inset-left)); }
.study-top .progress { flex: 1; height: 8px; background: var(--paper-2); border-radius: 99px; overflow: hidden; }
.study-top .progress i { display: block; height: 100%; width: 100%; background: var(--ai); border-radius: 99px; transform-origin: left; transform: scaleX(0); transition: transform .35s var(--ease); }
.study-top .left { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 3.4em; text-align: right; font-weight: 600; }
.study-body { flex: 1; display: flex; flex-direction: column; padding: 4px max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); }
.flash {
  position: relative; flex: 1; min-height: 46vh; min-height: 46dvh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center;
  padding: clamp(56px, 11vh, 110px) 18px 22px; border-radius: 24px; border: 1px solid var(--line);
  background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 0) 0 0 / 16px 16px, var(--card);
  box-shadow: var(--shadow); touch-action: pan-y; transition: border-color .2s, box-shadow .2s;
}
.flash.swipe { touch-action: none; } /* 정답 뒤: 손동작을 브라우저가 스크롤로 가져가지 않게. 위아래 스크롤은 study.js가 직접 */
.flash.dragging { transition: none; box-shadow: var(--shadow-lift); user-select: none; -webkit-user-select: none; }
.flash.right { border-color: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 22%, transparent); }
.flash.wrong { border-color: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 18%, transparent); }
.flash.top-pad { padding-top: 56px; }
.flash .hint-left, .flash .hint-right { position: absolute; top: 54px; font-size: 15px; font-weight: 800; padding: 6px 14px; border-radius: 99px; opacity: 0; transition: opacity .1s; }
.flash .hint-left { right: 14px; background: var(--bad-soft); color: var(--bad); transform: rotate(6deg); }
.flash .hint-right { left: 14px; background: var(--good-soft); color: var(--good); transform: rotate(-6deg); }
.tag { position: absolute; top: 14px; left: 14px; font-size: 12px; font-weight: 650; color: var(--muted); background: var(--paper-2); padding: 4px 10px; border-radius: 99px; }
.tag.new { color: var(--shu-ink); background: transparent; box-shadow: inset 0 0 0 1.5px var(--shu); border-radius: 6px; font-weight: 750; letter-spacing: .02em; }
.corner-btn { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); display: grid; place-items: center; }
.corner-btn:active { background: var(--paper-2); }
.face { font-family: var(--jp); font-weight: 600; line-height: 1.15; font-size: clamp(32px, 10.5vw, 56px); }
.face.kana { font-size: clamp(108px, 33vw, 156px); font-weight: 500; line-height: 1.05; }
.face.long { font-size: clamp(24px, 7.6vw, 40px); }
.face.xl { font-size: clamp(19px, 6.2vw, 30px); }
.face.tap-speak { cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 12px; }
.face.tap-speak:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 4px; }
.face.tapped { animation: face-tap .28s ease-out; }
@keyframes face-tap { 40% { transform: scale(.96); } }
@media (prefers-reduced-motion: reduce) { .face.tapped { animation: none; } }
.prompt { margin: 18px 0 0; color: var(--muted); font-size: 15px; }

.answer { width: 100%; margin-top: 18px; display: grid; gap: 10px; justify-items: center; }
.answer > * { animation: rise .28s var(--ease) both; }
.answer > :nth-child(2) { animation-delay: .04s; }
.answer > :nth-child(3) { animation-delay: .08s; }
.answer > :nth-child(4) { animation-delay: .12s; }
.answer > :nth-child(5) { animation-delay: .16s; }
.say { display: grid; justify-items: center; gap: 0; }
.reading { font-size: clamp(24px, 7.6vw, 30px); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.reading .ro { font-size: 15px; color: var(--muted); font-weight: 600; margin-left: 6px; letter-spacing: 0; }
.meaning { font-size: 17px; color: var(--ink-2); margin-top: 2px; }
.origin { font-size: 14px; color: var(--muted); }
.origin b { color: var(--ink-2); font-weight: 650; }
.note { font-size: 13px; color: var(--muted); max-width: 32em; }
.parts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.part { display: grid; justify-items: center; gap: 1px; min-width: 44px; min-height: 52px; padding: 6px 8px 5px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); transition: background .15s, border-color .15s; }
.part .jp { font-size: 20px; line-height: 1.2; }
.part small { font-size: 12px; color: var(--muted); }
.part.weak { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.part.weak .jp, .part.weak small { color: var(--bad); }
.part.open { border-color: var(--ai); background: var(--ai-soft); }
.part:not(.plain):active { background: var(--paper-2); }
.part.plain { cursor: default; }
.part-hint, .hint { font-size: 14px; background: var(--paper-2); border-radius: 12px; padding: 10px 12px; max-width: 30em; text-align: left; color: var(--ink-2); }
.part-hint b { font-family: var(--jp); font-size: 17px; margin-right: 4px; color: var(--ink); }
.warnbox { font-size: 13.5px; text-align: left; background: var(--bad-soft); color: var(--bad); border-left: 3px solid var(--bad); border-radius: 4px 10px 10px 4px; padding: 7px 12px; max-width: 30em; }
.example { font-size: 15px; color: var(--ink-2); }
.example .jp { font-size: 18px; margin-right: 6px; color: var(--ink); }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--card); font-size: 14px; color: var(--ink-2); }
.chip-btn svg.i { width: 17px; height: 17px; }
.chip-btn:active { background: var(--paper-2); }

.study-actions { position: sticky; bottom: 0; padding: 12px max(14px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); background: linear-gradient(to top, var(--paper) 78%, transparent); }
.grades { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grades.four { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.grade { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 64px; border-radius: 18px; border: 0; background: var(--card); font-weight: 750; font-size: 18px; touch-action: manipulation; transition: transform .1s var(--ease); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.grade:active { transform: scale(.97); }
.grade small { font-size: 12.5px; font-weight: 550; opacity: .8; font-variant-numeric: tabular-nums; }
.grade.g1 { color: var(--bad); background: var(--bad-soft); box-shadow: none; }
.grade.g2 { color: var(--warn); background: var(--warn-soft); box-shadow: none; }
.grade.g3 { color: var(--good); background: var(--good-soft); box-shadow: none; }
.grade.g4 { color: var(--ai-text); background: var(--ai-soft); box-shadow: none; }
.grades.four .grade { font-size: 15px; }
.swipe-tip, .keys { text-align: center; font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.keys kbd { font: 600 11px/1 var(--ko); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; padding: 2px 5px; background: var(--card); }
@media (hover: none) { .keys { display: none; } }
@media (hover: hover) { .swipe-tip { display: none; } }

.options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.option { position: relative; min-height: 72px; border: 0; box-shadow: inset 0 0 0 1.5px var(--line-2); background: var(--card); border-radius: 18px; padding: 10px 6px; font-size: 24px; font-weight: 800; touch-action: manipulation; transition: transform .1s var(--ease), background .15s, box-shadow .15s; }
.option small { display: block; font-size: 13px; font-weight: 550; color: var(--muted); }
.option:active:not(:disabled) { transform: scale(.97); background: var(--paper-2); }
.option.right { box-shadow: inset 0 0 0 2px var(--good); background: var(--good-soft); color: var(--good); }
.option.wrong { box-shadow: inset 0 0 0 2px var(--bad); background: var(--bad-soft); color: var(--bad); }
.option.right::after, .option.wrong::after { position: absolute; top: 6px; right: 10px; font-size: 15px; font-weight: 800; }
.option.right::after { content: "✓"; }
.option.wrong::after { content: "✕"; }
.option:disabled { cursor: default; }
.option:disabled:not(.right):not(.wrong) { color: var(--muted); }
.idk { display: flex; margin: 8px auto 0; }
.verdict { font-weight: 800; font-size: 18px; }
.verdict.ok { color: var(--good); }
.verdict.no { color: var(--bad); }
.verdict s { color: var(--muted); font-weight: 600; text-decoration-thickness: 2px; }
.auto-bar { height: 3px; border-radius: 99px; background: var(--good); transform-origin: left; animation: shrink .95s linear forwards; margin: 2px auto 0; width: 120px; }
@keyframes shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* 비교·적기·듣기 */
.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; width: 100%; }
.cmp { border-radius: 18px; padding: 12px 8px 14px; background: var(--paper); text-align: center; box-shadow: inset 0 0 0 1.5px var(--line); }
.cmp.me { box-shadow: inset 0 0 0 2px var(--shu); background: var(--card); }
.cmp-ch { font-size: 60px; line-height: 1.1; font-weight: 500; }
.cmp b { display: block; font-size: 18px; }
.cmp b small { font-size: 13px; color: var(--muted); font-weight: 500; }
.cmp p { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.type-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; width: 100%; max-width: 380px; margin-top: 18px; }
.type-in { min-height: 54px; border: 1.5px solid var(--line-2); border-radius: 16px; padding: 10px 14px; font-size: 20px; background: var(--card); text-align: center; }
.type-in:focus { outline: none; border-color: var(--ai); box-shadow: 0 0 0 4px var(--ai-soft); }
.type-form .idk { grid-column: 1 / -1; margin: 0 auto; }
.listen-btn { display: grid; place-items: center; gap: 6px; width: 132px; height: 132px; border-radius: 50%; border: 0; background: var(--ai); color: var(--ai-ink); box-shadow: var(--shadow-lift); font-size: 13px; font-weight: 650; }
.listen-btn svg.i { width: 46px; height: 46px; }
.listen-btn:active { transform: scale(.96); }
.listen-btn.playing { animation: ring 1.2s var(--ease) infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ai) 45%, transparent); } 100% { box-shadow: 0 0 0 22px transparent; } }
.listen-opt .sign.sm { font-size: 17px; padding: 5px 10px 6px; }

/* ---- 공부 끝: 도장 ---- */
.summary { justify-content: flex-start; padding-top: 34px; }
.hanko { width: 112px; height: 112px; margin: 0 auto 10px; transform: rotate(-9deg); animation: stamp .42s var(--pop) both; }
.hanko circle, .hanko path { fill: none; stroke: var(--shu); }
.hanko text { fill: var(--shu); font-family: var(--jp); }
@keyframes stamp { 0% { transform: scale(1.7) rotate(-20deg); opacity: 0; filter: blur(2px); } 60% { transform: scale(.94) rotate(-8deg); opacity: 1; filter: blur(0); } 100% { transform: scale(1) rotate(-9deg); } }
.summary .summary-title { font-size: 26px; font-weight: 850; letter-spacing: -.03em; }
.summary .sub-line { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 22px 0 6px; width: 100%; }
.metric { display: grid; gap: 2px; }
.metric + .metric { border-left: 1px solid var(--line); }
.metric b { font-size: 32px; font-weight: 850; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.metric span { font-size: 12.5px; color: var(--muted); }
.sum-block { width: 100%; text-align: left; margin-top: 18px; }
.sum-block .eyebrow { margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips .sign.sm { font-size: 14px; }
.chip-bad { font-family: var(--jp); font-size: 17px; padding: 4px 11px; border-radius: 10px; background: var(--bad-soft); color: var(--bad); }
.next-up { width: 100%; margin-top: 18px; padding: 12px 14px; border-radius: 14px; background: var(--paper); text-align: left; font-size: 14px; color: var(--ink-2); display: grid; gap: 6px; }
.next-up b { color: var(--ink); }
.next-up .bar { height: 5px; border-radius: 99px; background: var(--ai-soft); overflow: hidden; }
.next-up .bar i { display: block; height: 100%; width: 100%; background: var(--ai); transform-origin: left; }

/* ---- 첫 사용 안내 ---- */
.ob { flex: 1; display: flex; flex-direction: column; padding: max(14px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); max-width: 560px; margin: 0 auto; width: 100%; }
.ob-top { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; min-height: 44px; }
.ob-steps { flex: 1; display: flex; gap: 6px; }
.ob-steps i { flex: 1; height: 4px; border-radius: 99px; background: var(--line); }
.ob-steps i.on { background: var(--ai); }
.ob h1 { font-size: 28px; line-height: 1.28; margin: 0 0 8px; letter-spacing: -.035em; font-weight: 800; white-space: pre-line; }
.ob .lead { font-size: 16px; color: var(--ink-2); margin: 0 0 22px; }
.ob .grow { flex: 1; }
.ob .actions { display: grid; gap: 8px; margin-top: 20px; }
.hero-sign { display: grid; justify-items: center; gap: 10px; padding: 18px 0 22px; }
.hero-sign .sign { font-size: 44px; }
.hero-sign .parts .part { min-height: 46px; }
.why { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.why li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; }
.why .n { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--ai-soft); color: var(--ai-text); }
.why b { display: block; font-size: 15px; font-weight: 700; }
.why span { font-size: 14px; color: var(--muted); }
.paces, .levels { display: grid; gap: 10px; }
.pace { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: left; padding: 14px 16px; border-radius: 18px; border: 0; box-shadow: inset 0 0 0 1.5px var(--line-2); background: var(--card); min-height: 74px; }
.pace b { font-size: 17px; font-weight: 700; }
.pace .tagline { grid-column: 1 / -1; font-size: 14px; color: var(--muted); }
.pace .tagline.ok { color: var(--good); }
.pace .tagline.late { color: var(--warn); }
.pace .rec { font-size: 12px; font-weight: 750; color: var(--shu-ink); box-shadow: inset 0 0 0 1.5px var(--shu); padding: 3px 8px; border-radius: 6px; align-self: center; }
.pace.on { box-shadow: inset 0 0 0 2px var(--ai); background: var(--ai-soft); }
.pace:active { transform: scale(.99); }
.pace .preview { grid-column: 1 / -1; margin-top: 6px; display: flex; gap: 4px; flex-wrap: wrap; }
.diag-progress { height: 6px; border-radius: 99px; background: var(--paper-2); overflow: hidden; margin-bottom: 8px; }
.diag-progress i { display: block; height: 100%; width: 100%; background: var(--ai); transform-origin: left; transform: scaleX(0); transition: transform .3s var(--ease); }
.diag-count { text-align: center; font-size: 14px; color: var(--muted); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.known-grid { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 4px 0 6px; }
.known-grid .sign.sm { font-size: 18px; padding: 4px 9px 5px; }
.install-steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.install-steps li { counter-increment: s; display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: center; font-size: 15px; }
.install-steps li::before { content: counter(s); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ai-soft); color: var(--ai-text); font-weight: 800; }
.install-steps svg.i { width: 18px; height: 18px; vertical-align: -3px; }

/* ---- 폼 ---- */
.form { display: grid; gap: 14px; }
.form label, .form .field { display: grid; gap: 6px; font-size: 14px; font-weight: 650; }
.form label small, .form .field small { font-weight: 400; color: var(--muted); }
.form input, .form select { min-height: 50px; border: 1px solid var(--line-2); background: var(--card); border-radius: 14px; padding: 10px 14px; font-size: 16px; width: 100%; }
/* 로그인 비밀번호 보기 단추: 칸 오른쪽 안, 누르는 곳 44px (모든 서비스 로그인 같게) */
.pw-wrap { position: relative; display: block; }
.form .pw-wrap input { padding-right: 72px; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-width: 60px; min-height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--ai-text); font-size: 14px; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.form input:focus, .form select:focus { outline: none; border-color: var(--ai); box-shadow: 0 0 0 4px var(--ai-soft); }
.form label.switch, .switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 650; font-size: 15px; min-height: 48px; }
.switch input { appearance: none; -webkit-appearance: none; width: 50px; height: 30px; min-height: 30px; padding: 0; border-radius: 99px; background: var(--line-2); border: 0; position: relative; flex: none; transition: background .2s; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s var(--ease); }
.switch input:checked { background: var(--good); }
.switch input:checked::after { transform: translateX(20px); }
.switch input:focus { box-shadow: 0 0 0 4px var(--ai-soft); }
.help { font-size: 13px; color: var(--muted); font-weight: 400; margin: -6px 0 0; }
.row { display: flex; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 100%; }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--paper-2); border-radius: 14px; padding: 4px; gap: 4px; }
.seg button { border: 0; background: transparent; border-radius: 11px; min-height: 44px; font-weight: 650; color: var(--muted); font-size: 15px; }
.seg button.on, .seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.msg { font-size: 14px; color: var(--bad); margin: 0; }
.msg:empty { display: none; }
.msg.ok { color: var(--good); }
.credit { font-size: 12px; color: var(--muted); text-align: center; }
.set-group { display: grid; gap: 0; }
.set-group > * + * { border-top: 1px solid var(--line); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 6px 0; font-size: 15px; font-weight: 600; }
.set-row small { display: block; font-weight: 400; font-size: 13px; color: var(--muted); }
.set-row select { min-height: 44px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--card); padding: 0 12px; font-size: 16px; } /* 16px 아래면 아이폰이 누를 때 화면을 키운다 */
details.set-more summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 52px; font-weight: 650; cursor: pointer; }
details.set-more summary::-webkit-details-marker { display: none; }
details.set-more summary::after { content: "›"; font-size: 20px; color: var(--muted); transition: transform .2s; }
details.set-more[open] summary::after { transform: rotate(90deg); }

/* ---- 로그인 ---- */
.login-page main { --mw: 420px; padding-top: 10vh; }
.login-head { text-align: center; margin-bottom: 24px; display: grid; justify-items: center; gap: 4px; }
.login-head h1 { margin: 14px 0 0; font-size: 26px; letter-spacing: -.035em; font-weight: 800; }
.login-head p { margin: 0; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--paper-2); border-radius: 14px; padding: 4px; margin-bottom: 16px; }
.tabs button { border: 0; background: transparent; border-radius: 11px; min-height: 44px; font-weight: 650; color: var(--muted); }
.tabs button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }

/* ---- 관리자 ---- */
.wide { max-width: 900px; }
.users { width: 100%; border-collapse: collapse; font-size: 14px; }
.users th, .users td { text-align: left; padding: 10px 6px; border-bottom: 1px solid var(--line); vertical-align: top; word-break: keep-all; }
.users th { color: var(--muted); font-weight: 650; font-size: 12px; white-space: nowrap; }
.users td.btns { text-align: right; }
.users td.btns .btn { margin: 2px 0 2px 4px; }
.badge { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 99px; background: var(--paper-2); color: var(--muted); margin-left: 4px; white-space: nowrap; }
.badge.pending { background: var(--warn-soft); color: var(--warn); }
.badge.admin { background: var(--shu-soft); color: var(--shu-ink); }
@media (max-width: 560px) { .users .hide-sm { display: none; } .card:has(.users) { overflow-x: auto; } }
code.invite { font-size: 18px; font-weight: 700; background: var(--paper-2); padding: 4px 10px; border-radius: 8px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.tile { background: var(--paper); border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; }
.tile span { font-size: 13px; color: var(--muted); }
.tile b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tile small { font-size: 12px; color: var(--muted); }
.recall-check { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; font-size: 14px; color: var(--ink-2); }
.recall-check.ok { color: var(--good); }
.recall-check.warn { color: var(--warn); }
.chart-title { margin-top: 18px; }
.chart-wrap { position: relative; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { fill: var(--muted); font-size: 11px; font-family: var(--ko); }
.chart .bar { fill: var(--ai); }
.chart .bar.on { fill: var(--shu); }
.chart .hit { fill: transparent; cursor: pointer; }
.chart-tip { position: absolute; top: -6px; transform: translate(-50%, -100%); background: var(--ink); color: var(--paper); border-radius: 10px; padding: 6px 10px; font-size: 12px; display: grid; gap: 1px; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-lift); }
.chart-tip b { font-size: 13px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }

/* ---- 단어장 ---- */
.search { position: relative; display: block; }
.search svg.i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search input { width: 100%; min-height: 52px; border: 1px solid var(--line-2); background: var(--card); border-radius: 16px; padding: 10px 14px 10px 44px; font-size: 16px; }
.search input:focus { outline: none; border-color: var(--ai); box-shadow: 0 0 0 4px var(--ai-soft); }
.filters { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.filters::-webkit-scrollbar { display: none; }
.filters button { position: relative; flex: none; min-height: 40px; padding: 6px 14px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--card); font-size: 14px; color: var(--ink-2); font-weight: 600; }
.filters button::after { content: ""; position: absolute; inset: -2px 0; }   /* 보이는 크기는 그대로, 누르는 곳을 넓힘 */
@media (pointer: coarse) { .filters button { min-height: 44px; } }   /* 터치에서는 44px (UX.md '7. 터치') */
.filters button.on { background: var(--ai); border-color: var(--ai); color: var(--ai-ink); }
.filters button:last-child { margin-right: 40px; }
.book-count { font-size: 13px; color: var(--muted); margin: 4px 2px; }
.book { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.book > li + li { border-top: 1px solid var(--line); }
/* 긴 단어(デジタルトランスフォーメーション 등)도 한글·뜻 칸이 6em 아래로 줄지 않게: 간판이 대신 줄을 바꾼다 (320px) */
.book-row { display: grid; grid-template-columns: minmax(0, max-content) minmax(6em, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; background: transparent; text-align: left; min-height: 60px; }
.book-row:active { background: var(--paper-2); }
.book-row .sign { font-size: 16px; max-width: 100%; word-break: break-all; }
@media (max-width: 360px) { .book-row { gap: 10px; padding: 12px 12px; grid-template-columns: minmax(0, max-content) minmax(5.5em, 1fr) auto; } .book-row .sign { font-size: 14px; letter-spacing: .02em; } }
.book-row .txt { min-width: 0; }
.book-row .txt b { display: block; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.book-row .txt span { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.level { font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
.level.l0 { color: var(--muted); background: var(--paper-2); }
.level.l1 { color: var(--warn); background: var(--warn-soft); }
.level.l2 { color: var(--ai-text); background: var(--ai-soft); }
.level.l3 { color: var(--good); background: var(--good-soft); }
.book-detail { padding: 8px 14px 18px; display: grid; gap: 10px; justify-items: center; text-align: center; background: var(--paper); border-top: 1px dashed var(--line); }
.book-more { display: flex; margin: 10px auto 0; }

/* ---- 실전 ---- */
.board { border-radius: 22px; padding: 18px 12px 20px; display: flex; flex-wrap: wrap; gap: 12px 10px; justify-content: center; align-content: center; min-height: 340px; }
.board.street { background: radial-gradient(120% 80% at 50% 0%, #343a4a, #1d2029); }
.board.station { background: #e9ecef; }
.board.hotel { background: #efe7da; }
.board.shop { background: #f2f5f0; }
@media (prefers-color-scheme: dark) { .board.station, .board.hotel, .board.shop { background: #202229; } }
.sg { position: relative; border: 0; font-family: var(--jp); font-weight: 600; font-size: 17px; padding: 10px 12px; border-radius: 8px; min-height: 48px; transition: transform .12s var(--ease), box-shadow .15s; }
.sg:active { transform: scale(.97); }
.board.street .sg { background: #15171c; color: #ffd36b; box-shadow: 0 0 0 2px #ffd36b inset, 0 0 14px rgba(255, 211, 107, .28); text-shadow: 0 0 6px rgba(255, 211, 107, .5); }
.board.street .sg:nth-child(3n) { color: #ff8fa3; box-shadow: 0 0 0 2px #ff8fa3 inset, 0 0 14px rgba(255, 143, 163, .28); text-shadow: 0 0 6px rgba(255, 143, 163, .5); }
.board.street .sg:nth-child(3n+1) { color: #8fe3ff; box-shadow: 0 0 0 2px #8fe3ff inset, 0 0 14px rgba(143, 227, 255, .28); text-shadow: 0 0 6px rgba(143, 227, 255, .5); }
.board.station .sg { background: #fff; color: #1b1d22; border-left: 8px solid #24365a; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.board.station .sg:nth-child(odd) { border-left-color: #1f7a4d; }
.board.hotel .sg { background: #3b2f25; color: #f3e6c8; border-radius: 4px; letter-spacing: .04em; }
.board.shop .sg { background: #fff; color: #1d7546; border: 2px solid #1d7546; border-radius: 99px; }
.board.shop .sg:nth-child(even) { color: #b3262f; border-color: #b3262f; }
.sg.right { outline: 3px solid #3fa772; outline-offset: 3px; }
.sg.wrong { outline: 3px solid #ef6b6b; outline-offset: 3px; }
.sg.right::before, .sg.wrong::before { position: absolute; top: -10px; right: -10px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 800 13px/22px var(--ko); color: #fff; z-index: 1; }
.sg.right::before { content: "✓"; background: #2f9562; }
.sg.wrong::before { content: "✕"; background: #c8383f; }
.sg-read { position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); white-space: nowrap; font: 600 11px/1.3 var(--ko); padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, .72); color: #fff; z-index: 2; pointer-events: none; }
.task { text-align: center; margin: 10px 0 14px; display: grid; gap: 2px; }
.task b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.task .q { font-size: 13px; color: var(--muted); }
.menu-board { background: #3a2a1d; color: #f6ead2; border-radius: 18px; padding: 18px 16px; box-shadow: inset 0 0 0 6px #5a4330, var(--shadow); }
.menu-board h3 { margin: 0 0 10px; text-align: center; font: 700 22px/1.2 var(--jp); letter-spacing: .3em; color: #ffcf73; }
.menu-item { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 11px 8px; border: 0; background: transparent; color: inherit; font: 600 18px/1.3 var(--jp); text-align: left; border-radius: 8px; min-height: 50px; }
.menu-item > span:first-child { flex: none; }
.menu-item .leader { flex: 1; border-bottom: 2px dotted rgba(246, 234, 210, .3); transform: translateY(-4px); }
.menu-item small { font-family: var(--ko); font-size: 15px; opacity: .9; font-variant-numeric: tabular-nums; }
.menu-item.on { background: rgba(246, 234, 210, .14); box-shadow: inset 4px 0 0 #ffd36b; }
.menu-item.right { box-shadow: inset 4px 0 0 #5cc48a; }
.menu-item.wrong { box-shadow: inset 4px 0 0 #f07a6e; }
.menu-item .read { display: block; font: 500 12px var(--ko); opacity: .85; }
.order-slip { background: var(--card); border-radius: 6px 6px 0 0; padding: 14px 16px 18px; margin-bottom: 14px; text-align: center; box-shadow: var(--shadow);
  -webkit-mask: conic-gradient(from 135deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 8px repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat;
  mask: conic-gradient(from 135deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 8px repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat; }
.order-slip b { font-size: 19px; font-weight: 800; }
.order-slip .eyebrow { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .08em; }
.total { display: flex; justify-content: space-between; padding: 12px 8px 0; font-size: 15px; font-variant-numeric: tabular-nums; }

/* 시작 화면 */
.boot { flex: 1; display: grid; place-items: center; align-content: center; gap: 18px; text-align: center; padding: 24px; }
.boot .brand-mark { animation: lightup 1.2s ease-in-out infinite; }
@keyframes lightup { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.boot-err { text-align: left; white-space: pre-wrap; word-break: break-all; font-size: 12px; color: var(--muted); background: var(--paper-2); border-radius: 12px; padding: 10px 12px; margin-top: 16px; max-height: 40vh; max-height: 40dvh; overflow: auto; overscroll-behavior: contain; }

/* 아래 알림은 공통 부품(kit toast)이 그린다 (UX.md '4. 아래 알림'). 여기서는 색과 자리만 알려 준다. 관리 화면(body.ak)은 kit 기본 그대로 */
body:not(.ak) { --ak-toast-bg: var(--sign); --ak-toast-text: #fff; --ak-toast-act: #ffd0c2; }
@media (prefers-color-scheme: dark) { body:not(.ak) { --ak-toast-bg: #2a2c33; --ak-toast-act: #ffb3a1; } }
body.studying { --ak-toast-b: 92px; }   /* 공부 중: 아래 평가 버튼 위에 */

/* ---- 넓은 화면 (PC) ---- */
@media (min-width: 900px) {
  #home .top { max-width: 980px; }
  #home main { --mw: 980px; }
  #home main.home-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: start; }
  #home main.home-grid > * + * { margin-top: 0; }
  #home .col { display: grid; gap: 16px; }
  .flash { max-height: 600px; }
}

/* ---- 움직임 ---- */
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.02); } 100% { transform: scale(1); } }
.shake { animation: shake .35s var(--ease); }
.pop { animation: pop .3s var(--ease); }
.enter { animation: rise .22s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .study-top .progress i, .track-bar i, .journey .mini i { background: Highlight; }
  .option.right, .flash.right { border: 3px solid Highlight; }
  .option.wrong, .flash.wrong { border: 3px dashed CanvasText; }
}

/* 설정 줄: 링크·버튼으로도 쓴다 */
a.set-row, button.set-row { width: 100%; border: 0; background: transparent; color: var(--ink); text-decoration: none; text-align: left; font: inherit; font-weight: 600; font-size: 15px; }
.set-row { flex-wrap: wrap; }
.set-row > span:first-child { flex: 1 1 180px; }
.set-row .seg { min-width: 150px; }
.set-row > svg.i { color: var(--muted); }
details.set-more .form { padding: 0 0 16px; }

/* 고침: 입력칸이 줄어들지 않아 확인 버튼이 화면 밖으로 밀리던 문제, D-25 줄바꿈 */
.type-in { min-width: 0; width: 100%; }
.dday { white-space: nowrap; flex: none; }
.flash:focus:not(:focus-visible) { outline: none; } /* 누르거나 새 카드로 옮길 때는 테두리 없이, 키보드로 왔을 때는 보이게 */
.compare:has(> :nth-child(4)) { grid-template-columns: 1fr 1fr; }
.known-grid { margin: 18px 0 20px; }

/* 좁은 화면(아이폰 SE 등 320~360px) */
.brand, .nav-btn, .brand-mark { white-space: nowrap; flex: none; }
.stamps i { width: min(34px, 9vw); height: min(34px, 9vw); }
@media (max-width: 360px) {
  .nav-btn .lbl { display: none; }
  .brand { font-size: 16px; }
  .route .jp { font-size: 26px; }
  .dday { font-size: 38px; }
}

/* ---- 마지막 검토 반영 ---- */
.help { margin: 4px 0 0; }
.board { gap: 30px 10px; padding-bottom: 34px; }
@media (max-height: 700px) {
  .summary { padding-top: 14px; }
  .hanko { width: 80px; height: 80px; margin-bottom: 4px; }
  .metrics { margin: 14px 0 4px; }
  .metric b { font-size: 26px; }
}
.pace .meta { display: flex; align-items: center; justify-content: flex-end; gap: 8px; align-self: center; white-space: nowrap; } /* 추천 표시와 시간을 한 줄에 */
.pace .time { font-size: 13px; color: var(--muted); }
.diag-skip { color: var(--muted); font-size: 14px; }
.place-name { font-size: 13px; color: var(--muted); }
.card > h2, .card h2 { font-size: 15px; font-weight: 700; margin: 0 0 12px; }
.users td.nowrap { white-space: nowrap; }
details.set-more summary::after { content: none; }
details.set-more summary svg.i { color: var(--muted); transition: transform .2s; }
details.set-more[open] summary svg.i { transform: rotate(90deg); }
.switch input:checked { background: var(--ai); }
.row-link.locked .ic { background: var(--paper-2); color: var(--muted); }
.row-link.locked small { color: var(--muted); }
@media (prefers-color-scheme: dark) {
  .tag { background: rgba(255, 255, 255, .08); color: var(--ink-2); }
  .tag.new { background: transparent; }
  /* 밤: 남색 판과 흰 안쪽 줄은 그대로, 바깥에 은은한 빛만 */
  .sign { background: linear-gradient(#2c416c, #1d2c4c); color: #fff; text-shadow: 0 0 10px rgba(170, 195, 255, .35);
    box-shadow: inset 0 0 0 .07em #1d2c4c, inset 0 0 0 .11em rgba(255, 255, 255, .85), 0 0 22px rgba(111, 143, 214, .28); }
  .sign.sm { background: #22345a; box-shadow: inset 0 0 0 1px #22345a, inset 0 0 0 2px rgba(255, 255, 255, .5), 0 0 8px rgba(111, 143, 214, .2); text-shadow: none; }
}
@media (min-width: 900px) {
  #study .study-body { flex: none; }
  #study .flash { min-height: 420px; }
  #study .study-actions { position: static; background: none; padding-top: 16px; }
  #study.screen { justify-content: flex-start; }
}

/* 아이폰 사파리: 날짜 칸이 자체 최소 폭 때문에 width:100%를 무시하고 카드 밖으로 튀어나옴 → 기본 모양을 끄고 폭을 맞춘다.
   글자도 다른 칸처럼 왼쪽 정렬 (사파리는 가운데로 둠) */
input[type="date"] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; width: 100%; text-align: left; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
/* 터치 기기: 폭과 상관없이 모든 입력칸 글자 16px 이상 (16px보다 작으면 아이폰이 누를 때 화면을 키운다. UX.md '6. 입력칸') */
@media (pointer: coarse) { input, select, textarea { font-size: max(16px, 1em); } }

/* ---- 내 기록 ---- */
/* 기억 단계 색: 익히는 중(노랑) → 거의 외움(남색) → 외웠어요(초록). 바탕이 새 단어. 범례에 글자·숫자가 같이 있어 색만으로 구분하지 않음 */
.lv-bar { display: flex; gap: 2px; height: 8px; border-radius: 99px; overflow: hidden; background: var(--paper-2); }
.lv-bar.big { height: 14px; margin: 16px 0 12px; }
.lv-bar i { display: block; height: 100%; min-width: 3px; }
.lv-bar .l3, .lv-legend .l3 { background: var(--good); }
.lv-bar .l2, .lv-legend .l2 { background: var(--ai); }
.lv-bar .l1, .lv-legend .l1 { background: var(--warn); }
.lv-legend .l0 { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.lv-legend { list-style: none; padding: 0; margin: 0 0 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.lv-legend li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.lv-legend li i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.lv-legend li b { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink); }
.rec-big { display: flex; align-items: baseline; gap: 8px; }
.rec-big b { font-size: 48px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.rec-big span { font-size: 17px; color: var(--muted); font-weight: 600; }
.rec-sub { margin: 8px 0 0; font-size: 14px; color: var(--ink-2); }
.rec-tiles { grid-template-columns: 1fr 1fr; }
.rec-tiles .tile { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: var(--r); padding: 14px 16px; }
.rec-tiles .tile b { font-size: 24px; }
.chart .bar.today { fill: var(--shu); }
.place-list, .hard-list { list-style: none; padding: 0; margin: 0; }
.place-list li + li, .hard-list li + li { border-top: 1px solid var(--line); }
.place-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; width: 100%; padding: 12px 0; border: 0; background: transparent; text-align: left; min-height: 56px; }
.place-row .name { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 15px; min-width: 0; }
.place-row .ess { font-size: 11px; font-weight: 700; color: var(--shu-ink); background: var(--shu-soft); padding: 2px 7px; border-radius: 99px; }
.place-row .count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.place-row .lv-bar { grid-column: 1 / -1; }
.due-cols { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.due-cols > div { display: grid; grid-template-rows: auto 84px auto; gap: 4px; justify-items: center; }
.due-cols b { font-size: 14px; font-variant-numeric: tabular-nums; }
.due-cols .col { width: 100%; max-width: 30px; display: flex; align-items: flex-end; background: var(--paper); border-radius: 8px; overflow: hidden; }
.due-cols .col i { display: block; width: 100%; background: var(--ai); border-radius: 8px 8px 0 0; }
.due-cols small { font-size: 12px; color: var(--muted); }
.due-cols .today .col i { background: var(--shu); }
.due-cols .today small { color: var(--ink); font-weight: 700; }
.hard-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 10px 0; border: 0; background: transparent; text-align: left; min-height: 56px; }
.hard-row .txt { display: grid; min-width: 0; }
.hard-row .txt b { font-size: 15px; }
.hard-row .txt small { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hard-row .miss { font-size: 13px; font-weight: 700; color: var(--bad); white-space: nowrap; font-variant-numeric: tabular-nums; }
.card > .btn { margin-top: 12px; width: 100%; }
.card .week-line + .link-btn, .card .stamps + .link-btn { margin-top: 6px; }
@media (hover: hover) { .place-row:hover, .hard-row:hover { background: var(--paper); } }
.place-row .name, .hard-row .txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place-row .name .sign, .hard-row .sign { white-space: nowrap; flex: none; }
.hard-row .sign { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
.place-row .count b { color: var(--ink); font-weight: 700; }
.rec-tiles .tile b { white-space: nowrap; }
.hard-row .sign { max-width: 40%; }
.hard-row { grid-template-columns: auto minmax(64px, 1fr) auto; }
@media (max-width: 360px) {
  .rec-tiles .tile b { font-size: 20px; }
  .rec-tiles .tile { padding: 12px; }
  .place-row .ess { display: none; }
  .hard-row { gap: 8px; }
}
/* 자주 틀리는 카드: 윗줄 가타카나 + 틀린 횟수, 아랫줄 소리 · 뜻 (긴 단어도 잘리지 않게) */
.hard-row { grid-template-columns: 1fr auto; gap: 6px 10px; }
.hard-row .sign { max-width: none; overflow: visible; justify-self: start; }
.hard-row .txt { grid-column: 1 / -1; display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hard-row .txt b { font-size: 14px; color: var(--ink); }
.hard-row .txt small { display: inline; font-size: 13px; }
.hard-row .miss { grid-row: 1; grid-column: 2; }

/* ---- 관리자: 가입 승인 대기 숫자 풍선 (golf와 같은 꼴) ---- */
.count-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; }
.icon-btn { position: relative; }
.icon-btn .count-badge { position: absolute; top: 3px; right: 1px; box-shadow: 0 0 0 2px var(--paper); }
.set-row .count-badge { margin-left: auto; margin-right: 6px; }
.notice { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 10px 12px 14px; font-size: 14px; color: var(--ink); text-decoration: none; box-shadow: var(--shadow); min-height: 52px; }
.notice > svg.i:first-child { color: var(--bad); flex: none; }
.notice p { margin: 0; flex: 1; font-weight: 600; }
.notice b { color: var(--ai-text); font-size: 14px; white-space: nowrap; }
.notice > svg.i:last-child { color: var(--ai-text); width: 16px; height: 16px; }

/* 아이폰 홈 화면 앱(iOS 26~): 화면 맨 위에 고정된 띠가 없으면 아이폰이 머리줄 위에 뿌연 흐림을 덮는다.
   보이지 않는 고정 띠(.ios-edge, 각 HTML의 body 첫 줄)를 두면 흐림 대신 이 배경색으로 상태 표시줄 자리를 칠한다.
   글자 모양으로만 칠해서(background-clip: text) 실제로는 아무것도 그리지 않고, 누를 수도 없다 (2026-11-09) */
.ios-edge {
  position: fixed; top: 0; left: 0; right: 0; height: 11px; z-index: 2147483647; pointer-events: none;
  background-color: var(--paper); -webkit-background-clip: text; background-clip: text;
}
body.ak .ios-edge { background-color: var(--ak-card); }

/* ================= 휴대폰 가로 화면 (2026-11-10) =================
   낮고 넓은 화면(예: 844×390)은 높이가 가장 귀하다 → 세로 화면을 넓히지 않고 전용 배치를 쓴다.
   - 위 머리줄은 옆 세로 막대(rail)로 옮긴다: 홈은 간판 표시 + 단어장·기록·설정, 다른 화면은 뒤로 + 세로로 쓴 제목(세로 간판처럼)
   - 공부: 왼쪽에 카드를 크게, 오른쪽 칸에 진행 막대와 답·평가 버튼 (엄지가 닿는 곳)
   - 홈: 기차표를 가로로 긴 표(왼쪽 구간·오른쪽 떼는 쪽에 '오늘 공부')로, 아래는 두 칸
   조건: 가로 + 높이 520px 이하 + 폭 560px 이상 (모든 서비스 공통). 세로에서 자판이 올라와 납작해진 경우·태블릿·PC는 빠진다.
   home.js·record.js에 같은 조건이 적혀 있다 (바꾸면 같이). */

/* 안전 영역: 아이폰은 가로일 때 아일랜드가 한쪽에만 있어도 양쪽에 같은 여백(약 59px)을 알려 준다.
   boot-guard.js가 돌린 방향을 보고 html.island-left / island-right를 붙이면 반대쪽은 0으로 둔다 (stock·PLAY와 같은 방식).
   가로 배치의 좌우 여백은 env()를 바로 쓰지 않고 이 변수를 쓴다 */
:root { --sa-l: env(safe-area-inset-left, 0px); --sa-r: env(safe-area-inset-right, 0px); --sa-b: env(safe-area-inset-bottom, 0px); }
html.island-left { --sa-r: 0px; }
html.island-right { --sa-l: 0px; }
.rail-lbl { display: none; }      /* 세로 막대에서만 보이는 버튼 이름 */
.ob-body { display: contents; }   /* 첫 안내 본문 묶음: 세로에서는 없는 것처럼 */

@media (orientation: landscape) and (max-height: 520px) and (min-width: 560px) {
  :root {
    --rail: 60px;                                   /* 세로 막대 폭 */
    --edge-l: calc(var(--rail) + var(--sa-l));      /* 막대가 있는 화면의 왼쪽·오른쪽 비움 (막대는 아일랜드 쪽에 선다) */
    --edge-r: var(--sa-r);
    --side: clamp(250px, 36vw, 330px);              /* 공부·실전·첫 안내의 오른쪽 버튼 칸 폭 */
  }
  html.island-right { --edge-l: var(--sa-l); --edge-r: calc(var(--rail) + var(--sa-r)); }
  /* 공통 부품(kit)의 아래 알림이 세로 막대를 피해 내용 가운데에 뜨게 막대 폭을 알려 준다 (kit README '가로 모드') */
  /* 세로 막대가 있는 화면(머리줄 .top이 있는 화면)에서만. 관리 화면(body.ak)은 kit이 자기 메뉴 폭으로 정한다 */
  body:not(.ak):has(> .screen:not([hidden]) > .top) { --ak-rail-l: var(--rail); }
  html.island-right body:not(.ak):has(> .screen:not([hidden]) > .top) { --ak-rail-l: 0px; --ak-rail-r: var(--rail); }

  /* ---- 틀: 세로 막대 ---- */
  #home.screen, #book.screen, #record.screen, #settings.screen, #play.screen { padding-left: var(--edge-l); padding-right: var(--edge-r); }
  .screen > .top, #home .top {
    position: fixed; z-index: 5; top: 0; bottom: 0; left: 0; width: var(--edge-l); max-width: none; margin: 0; box-shadow: none; clip-path: none;
    flex-direction: column; align-items: center; gap: 2px; padding: 10px 0 max(8px, var(--sa-b)) var(--sa-l);
    background: var(--paper-2); border-right: 1px solid var(--line);
  }
  /* 아일랜드가 오른쪽이면 막대도 오른쪽으로 (가려지는 쪽을 막대 바탕으로 채운다) */
  html.island-right .screen > .top, html.island-right #home .top { left: auto; right: 0; width: var(--edge-r); padding-left: 0; padding-right: var(--sa-r); border-right: 0; border-left: 1px solid var(--line); }
  .screen > main, #home main { padding: 12px 16px calc(18px + var(--sa-b)); }
  .top .brand { font-size: 0; gap: 0; margin: 4px 0 0; }           /* 이름 글자는 접고 간판 표시만 */
  .top .nav-btn, .top .icon-btn { flex-direction: column; gap: 1px; width: 52px; min-width: 52px; height: 52px; padding: 0; }
  .top .nav-btn .lbl, .top .rail-lbl { display: block; font-size: 12px; font-weight: 650; line-height: 1.25; letter-spacing: -.02em; }
  .top .icon-btn .count-badge { top: 1px; right: 3px; box-shadow: 0 0 0 2px var(--paper-2); }
  /* 화면 제목은 세로 간판처럼 세로로 쓴다 (높이를 쓰지 않게) */
  .top .top-title { -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; margin: 8px 0 0; font-size: 15px; letter-spacing: .16em; white-space: nowrap; overflow: hidden; min-height: 0; flex: 0 1 auto; }

  /* ---- 홈: 가로로 긴 기차표 + 아래 두 칸 ---- */
  #home main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
  #home main > * { margin-top: 0; grid-column: 1; }
  #home main > .notice, #home main > .ticket, #home main > .sync, #home .install-slot > * { grid-column: 1 / -1; margin-top: 0; }
  #home main > section.card:nth-of-type(3) { grid-column: 2; grid-row: span 2; }   /* 여행 노선: 오른쪽 칸에 길게 */
  /* 기차표: 왼쪽은 구간·D-day·진도, 점선 오른쪽(떼는 쪽)은 오늘 공부 */
  #home .ticket { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(240px, 38%); }
  #home .ticket > * { grid-column: 1; }
  #home .ticket > .track { padding-bottom: 16px; }
  #home .ticket > .perf { grid-column: 2; grid-row: 1 / span 6; width: 22px; height: auto; margin: 0; }
  #home .perf::before { left: 50%; right: auto; top: 14px; bottom: 14px; border-top: 0; border-left: 2px dashed var(--line-2); }
  #home .perf::after { top: auto; bottom: -12px; left: 0; right: auto; box-shadow: inset 0 1px 0 var(--line); }
  #home .perf .notch { top: -12px; left: 0; box-shadow: inset 0 -1px 0 var(--line); }
  #home .ticket > .ticket-body { grid-column: 3; grid-row: 1 / span 6; align-self: center; padding: 14px 18px 14px 8px; }
  #home .ticket-body > * + * { margin-top: 10px; }
  #home .ticket-body > .small { margin-bottom: 0; }
  #home .start-btn { min-height: 76px; }
  #home .today-done { padding-bottom: 4px; }
  #home .ticket-edit { min-height: 44px; }

  /* ---- 공부: 왼쪽 카드, 오른쪽 버튼 칸 ---- */
  #study.screen { display: grid; grid-template-columns: minmax(0, 1fr) var(--side); grid-template-rows: auto 1fr; padding: 0 var(--sa-r) 0 var(--sa-l); }
  #study .study-body { grid-column: 1; grid-row: 1 / span 2; flex: 1; padding: 10px 4px max(10px, var(--sa-b)) 12px; min-height: 100vh; min-height: 100dvh; }
  #study .study-top { grid-column: 2; grid-row: 1; position: sticky; top: 0; z-index: 2; padding: 8px 12px 0 2px; }
  #study .study-actions {
    grid-column: 2; grid-row: 2; position: sticky; top: 52px; align-self: start; background: none;
    display: flex; flex-direction: column; justify-content: center;
    height: calc(100vh - 52px); height: calc(100dvh - 52px); padding: 4px 12px max(12px, var(--sa-b)) 8px;
  }
  #study .flash { flex: 1; min-height: 0; max-height: none; justify-content: center; padding: 46px 18px 16px; }
  #study .flash.top-pad { padding-top: 46px; }
  #study .flash .hint-left, #study .flash .hint-right { top: 50px; }
  /* 글자 크기는 카드 폭(화면 폭 - 버튼 칸)에 맞춘다. 큰 글자 한 자는 높이에 맞춘다 */
  #study .face { font-size: clamp(30px, 5.6vw, 48px); }
  #study .face.long { font-size: clamp(24px, 4.1vw, 36px); }
  #study .face.xl { font-size: clamp(19px, 3vw, 27px); }
  #study .face.kana { font-size: clamp(84px, 30vh, 132px); }
  #study .prompt { margin-top: 14px; }
  #study .answer { margin-top: 12px; gap: 8px; }
  #study .reading { font-size: 28px; }
  #study .compare { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
  #study .cmp-ch { font-size: 52px; }
  /* 버튼 칸: 엄지로 누르기 쉽게 크게 */
  #study .grade { min-height: 92px; }
  #study .grades.four { grid-template-columns: 1fr 1fr; gap: 10px; }
  #study .grades.four .grade { min-height: 68px; font-size: 17px; }
  #study .study-actions > .btn.big { min-height: 76px; }
  #study .options { gap: 8px; }
  #study .option { min-height: 68px; }
  /* 판 끝 요약: 도장을 제목 옆에 두어 낮은 화면에 맞춘다 */
  #study .flash.summary { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-content: center; justify-items: stretch; text-align: left; padding: 18px 22px; }
  #study .flash.summary > * { grid-column: 1 / -1; }
  #study .flash.summary > .hanko { grid-column: 1; grid-row: 1 / span 2; width: 78px; height: 78px; margin: 0; }
  #study .flash.summary > .summary-title { grid-column: 2; align-self: end; }
  #study .flash.summary > .sub-line { grid-column: 2; align-self: start; }
  #study .flash.summary > .metrics { margin: 14px 0 2px; text-align: center; }
  #study .flash.summary > .sum-block, #study .flash.summary > .next-up { margin-top: 12px; }
  /* 알림 띠('되돌리기')는 오른쪽 칸 위, 진행 막대 바로 아래 (카드의 답도 버튼도 가리지 않게). 창 안에 든 알림은 kit 자리 그대로 */
  body.studying > .ak-toast { left: auto; right: calc(var(--sa-r) + 12px); top: 56px; bottom: auto; margin: 0; padding: 4px 14px; }

  /* ---- 단어장: 찾기와 장소 고르기를 한 줄에, 목록은 두 칸 ---- */
  #book main { display: grid; grid-template-columns: minmax(200px, 34%) minmax(0, 1fr); gap: 8px 12px; align-items: center; }
  #book main > * { margin-top: 0; grid-column: 1 / -1; }
  #book main > .search { grid-column: 1; }
  #book main > .filters { grid-column: 2; padding: 2px 0; }
  #book .search input { min-height: 48px; }
  #book .filters button { min-height: 44px; }
  #book .book-count { margin: 0 2px; }
  #book .book { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #book .book > li { border-top: 0; border-bottom: 1px solid var(--line); min-width: 0; }
  #book .book > li:nth-child(odd) { border-right: 1px solid var(--line); }

  /* ---- 내 기록: 두 칸 ---- */
  #record main { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 12px; align-items: start; }
  #record main > * { margin-top: 0; grid-column: 1 / -1; order: 9; }
  #record main > section:nth-of-type(1) { grid-column: 1 / span 5; order: 1; align-self: stretch; }   /* 외운 카드 */
  #record main > section:nth-of-type(2) { grid-column: 6 / -1; order: 2; align-self: stretch; grid-auto-rows: 1fr; }   /* 연속·공부한 날·시간·점수 */
  #record main > section:nth-of-type(3) { grid-column: 1 / span 6; order: 3; align-self: stretch; }   /* 최근 30일 */
  #record main > section:nth-of-type(5) { grid-column: 7 / -1; order: 4; align-self: stretch; }       /* 앞으로 7일 (30일 그래프 옆으로 올림) */
  #record main > section:nth-of-type(4) { order: 5; }                                                 /* 장소별 */
  #record main > section:nth-of-type(6) { order: 6; }                                                 /* 자주 틀리는 카드 */
  #record .rec-big b { font-size: 42px; }
  #record .lv-bar.big { margin: 12px 0 10px; }
  #record .rec-tiles .tile { align-content: center; }
  #record .place-list, #record .hard-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; }
  #record .place-list li, #record .hard-list li { border-top: 0; min-width: 0; }
  #record .place-list li:nth-child(n+3), #record .hard-list li:nth-child(n+3) { border-top: 1px solid var(--line); }

  /* ---- 설정: 카드를 두 단으로 흘린다 (카드 높이가 달라도 빈자리가 생기지 않게) ---- */
  #settings main { -webkit-columns: 2; columns: 2; -webkit-column-gap: 12px; column-gap: 12px; }
  #settings main > * { margin: 0 0 12px; -webkit-column-break-inside: avoid; break-inside: avoid; }
  #settings main > .btn, #settings main > p { -webkit-column-span: all; column-span: all; }
  #settings main > .btn.big { display: flex; width: min(360px, 100%); margin: 4px auto 12px; }
  #settings main > p { margin-bottom: 6px; }

  /* ---- 실전 연습 ---- */
  #play .play-list .rows { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; }
  #play .play-list .rows > * { border-top: 0; }
  #play .play-list .rows > :nth-child(n+3) { border-top: 1px solid var(--line); }
  /* 장면 읽기: 왼쪽 간판 판, 오른쪽에 문제와 버튼 */
  #play main.play-scene { display: grid; grid-template-columns: minmax(0, 1fr) clamp(200px, 30vw, 270px); grid-template-rows: auto 1fr; column-gap: 14px; min-height: 100vh; min-height: 100dvh; padding-top: 10px; padding-bottom: max(10px, var(--sa-b)); }
  #play .play-scene > .board { grid-column: 1; grid-row: 1 / span 2; min-height: 0; align-self: stretch; gap: 26px 10px; padding: 16px 12px 30px; }
  #play .play-scene > .task { grid-column: 2; grid-row: 1; margin: 0; padding: 20px 0 16px; align-self: start; position: sticky; top: 0; }
  #play .play-scene .task b { font-size: 21px; line-height: 1.35; }
  #play .play-scene .sg { font-size: 16px; padding: 9px 11px; }
  #play .play-scene > .stack { grid-column: 2; grid-row: 2; align-self: end; position: sticky; bottom: max(12px, var(--sa-b)); }
  /* 메뉴판 주문: 왼쪽 메뉴판(두 줄), 오른쪽에 주문서와 버튼 */
  #play main.play-menu { display: grid; grid-template-columns: minmax(0, 1fr) clamp(210px, 31vw, 280px); grid-template-rows: auto 1fr; gap: 12px 14px; align-items: start; }
  #play .play-menu > * { margin-top: 0; grid-column: 2; }
  #play .play-menu > .order-slip { margin-bottom: 0; position: sticky; top: 12px; z-index: 1; }   /* 메뉴판이 길어 내려가도 주문서와 버튼은 보이게 */
  #play .play-menu > .menu-board { grid-column: 1; grid-row: 1 / span 2; padding: 14px 14px; }
  #play .play-menu .menu-item small { flex: none; white-space: nowrap; }
  @media (min-width: 760px) {
    #play .play-menu .menu-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; align-items: start; }
    #play .play-menu .menu-board > h3, #play .play-menu .menu-board > .total { grid-column: 1 / -1; }
    #play .play-menu .menu-item > span:first-child { flex: 0 1 auto; min-width: 0; }
  }
  #play .play-menu > .btn-col { position: sticky; bottom: max(12px, var(--sa-b)); align-self: end; }
  #play main.play-done { max-width: 520px; margin: 0 auto; align-self: center; width: 100%; }

  /* ---- 첫 사용 안내: 왼쪽 설명, 오른쪽 아래 버튼 ---- */
  .ob {
    max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) var(--side); grid-template-rows: auto 1fr; column-gap: 28px;
    padding: 6px calc(20px + var(--sa-r)) max(14px, var(--sa-b)) calc(20px + var(--sa-l));
  }
  .ob-top { grid-column: 1 / -1; margin-bottom: 4px; }
  .ob-body { display: block; min-width: 0; align-self: center; }
  .ob .grow { display: none; }
  .ob .actions { margin-top: 0; align-self: end; }
  .ob h1 { font-size: 24px; margin-bottom: 6px; }
  .ob .lead { margin-bottom: 14px; }
  /* 환영: 왼쪽에 글, 오른쪽에 간판과 시작 버튼 */
  .ob-welcome { grid-template-rows: auto auto auto 1fr; }
  .ob-welcome .ob-body { display: contents; }
  .ob-welcome .ob-body > * { grid-column: 1; }
  .ob-welcome .hero-sign { grid-column: 2; grid-row: 2 / span 2; padding: 0; align-self: center; }
  .ob-welcome .hero-sign .sign { font-size: 38px; }
  .ob-welcome .why { gap: 8px; align-self: start; }
  .ob-welcome .actions { grid-column: 2; grid-row: 4; }
  /* 하루 속도·실력: 고를 것을 옆으로 나란히 */
  .ob-pace, .ob-level { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
  .ob-pace .paces { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ob-level .levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ob-pace .pace, .ob-level .pace { align-content: start; height: 100%; }
  .ob-pace .actions { justify-self: end; width: var(--side); margin-top: 8px; }
  .ob-pace .pace { padding: 12px 14px; min-height: 0; }
  .ob-pace .msg, .ob-pace .help { margin-top: 6px; }
  /* 실력 확인: 공부 화면처럼 왼쪽 글자, 오른쪽 보기 */
  .ob-diag .ob-body { align-self: stretch; display: flex; flex-direction: column; }
  .ob-diag .flash { flex: 1; min-height: 0; justify-content: center; padding: 12px; }
  .ob-diag .face.kana { font-size: clamp(84px, 30vh, 132px); }
  .ob-diag .actions { align-self: center; }
  .ob-diag .option { min-height: 64px; }

  /* ---- 로그인·가입: 왼쪽 이름, 오른쪽 입력 ---- */
  .login-page main {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 24px; align-items: center; align-content: stretch;
    padding: 12px calc(max(0px, (100% - 820px) / 2) + 20px + var(--sa-r)) max(12px, var(--sa-b)) calc(max(0px, (100% - 820px) / 2) + 20px + var(--sa-l));
  }
  .login-page .login-head { margin-bottom: 0; align-self: start; position: sticky; top: calc(50vh - 88px); top: calc(50dvh - 88px); }   /* 가입 칸이 길어 내려가도 이름은 가운데에 */
  .login-page .card { padding: 14px 16px; }
  .login-page .tabs { margin-bottom: 12px; }
  .login-page .form { gap: 10px; }
  .login-page .form input { min-height: 46px; }
  .login-page .btn.big { min-height: 50px; }

  /* 시작 실패 안내 */
  #boot.screen { padding-left: max(0px, calc((100% - 640px) / 2)); padding-right: max(0px, calc((100% - 640px) / 2)); }
  /* 승인 대기(kit 화면이 들어오는 자리): 낮은 화면에 한 번에 들어오게 위아래 여백만 줄인다 */
  #pending.screen { padding-top: 8px; padding-bottom: max(8px, var(--sa-b)); }
}