:root {
  --navy-950: #06172d; --navy-900: #0a203e; --navy-800: #102c51;
  --blue: #155de9; --blue-2: #2d78ff; --blue-soft: #eaf1ff;
  --paper: #f8fafc; --white: #ffffff; --ink: #0b1c36; --muted: #58677d;
  --line: #d5ddea; --line-dark: #aab8cc; --green: #18854c; --green-soft: #e8f6ee;
  --amber: #b66b00; --amber-soft: #fff4dc; --red: #c53831; --red-soft: #ffedea;
  --orange: #f05a2a; --shadow: 0 22px 55px rgba(3, 18, 38, .14); --max: 1536px;
  font-family: "Pretendard", "SUIT", "Noto Sans KR", "Malgun Gothic", sans-serif;
  color: var(--ink); background: var(--paper); font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); font-size: 17px; line-height: 1.55; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button { transition: transform .14s cubic-bezier(.16,1,.3,1), box-shadow .18s ease-out, background-color .18s ease-out, border-color .18s ease-out; }
button:not(:disabled):active { transform: scale(.975); }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #73a5ff; outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: .5; }
textarea { font: inherit; color: inherit; caret-color: var(--blue); }
textarea:focus-visible, summary:focus-visible { outline: 3px solid #73a5ff; outline-offset: 3px; }
::selection { background: #b8d0ff; color: var(--navy-950); }
* { scrollbar-color: #9aa8bc #edf1f6; scrollbar-width: thin; }

.topbar { position: sticky; top: 0; z-index: 30; height: 72px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 32px; color: var(--ink); background: rgba(255,255,255,.98); border-bottom: 1px solid var(--line); }
.brand { justify-self: start; display: flex; align-items: center; gap: 14px; border: 0; padding: 0; background: transparent; color: inherit; }
.kns-logo { display: block; width: 68px; height: auto; }
.brand-divider { width: 1px; height: 28px; background: var(--line); }
.brand-name { font-size: 22px; font-weight: 850; letter-spacing: -.04em; }
.brand-name strong { color: var(--blue); }
.header-standard { margin: 0; color: var(--muted); font-size: 14px; font-weight: 750; letter-spacing: .04em; }
.guide-button, .back-button { justify-self: end; min-height: 42px; border: 1px solid currentColor; border-radius: 8px; padding: 0 16px; background: transparent; color: inherit; font-size: 14px; font-weight: 800; }

.app-shell { display: grid; grid-template-columns: 230px minmax(0,1fr); max-width: var(--max); min-height: calc(100vh - 72px); margin: 0 auto; background: var(--white); }
.day-rail { position: sticky; top: 72px; height: calc(100vh - 72px); overflow: hidden; padding: 28px 20px 24px; color: var(--ink); background: #f7f9fc; border-right: 1px solid var(--line); }
.rail-heading { padding: 0 8px 18px; }
.rail-heading h2 { margin: 0; font-size: 20px; letter-spacing: -.04em; }
.day-list { position: relative; height: calc(100% - 64px); overflow-y: auto; padding: 3px 5px 28px; }
.day-button { position: relative; width: 100%; min-height: 54px; display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 10px; border: 0; border-radius: 8px; padding: 5px 7px; text-align: left; color: var(--ink); background: transparent; }
.day-button:hover { color: var(--blue); }
.day-num { width: 34px; height: 30px; display: grid; place-items: center; justify-self: center; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: white; font-size: 11px; font-weight: 850; }
.day-button.complete .day-num { border-color: #8bcdaa; color: var(--green); background: var(--green-soft); }
.day-button.selected { color: var(--blue); background: var(--blue-soft); }
.day-button.selected .day-num { border-color: var(--blue); color: white; background: var(--blue); }
.day-copy strong, .day-copy small { display: block; }
.day-copy strong { font-size: 14px; }
.day-copy small { margin-top: 1px; color: #8ea0b9; font-size: 11px; }
.day-button.selected .day-copy strong { color: var(--blue); }
.day-button.selected .day-copy small { color: var(--muted); }

.workspace { min-width: 0; }
.route-workspace { background: var(--paper); }
.route-hero { min-height: 660px; padding: 42px 48px 30px; color: var(--ink); background: white; border-bottom: 1px solid var(--line); }
.route-title h1 { margin: 0; font-size: clamp(34px,4vw,58px); line-height: 1.05; letter-spacing: -.045em; }
.route-title p { max-width: 660px; margin: 12px 0 0; color: var(--muted); font-size: 17px; }
.interchange { position: relative; min-height: 330px; display: grid; grid-template-columns: 320px minmax(0,1fr); align-items: center; gap: 42px; margin-top: 18px; }
.route-entry { display: none; }
.day-ring { position: relative; z-index: 1; width: 288px; height: 230px; display: flex; flex-direction: column; align-items: center; justify-content: center; justify-self: center; border: 1px solid #b9cbed; border-radius: 20px; background: linear-gradient(145deg,#fff 55%,#edf3ff); box-shadow: 0 18px 42px rgba(21,93,233,.10); }
.day-ring::after { display: none; }
.day-ring span { color: var(--blue); font-size: 16px; font-weight: 900; letter-spacing: .1em; }
.day-ring strong { font-size: 74px; line-height: .95; letter-spacing: -.04em; }
.day-ring b { margin-top: 16px; font-size: 18px; }
.block-lines { display: grid; gap: 14px; }
.block-platform { position: relative; min-height: 80px; display: grid; align-items: center; padding: 12px 18px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.block-platform:first-child { border-color: #86adf8; background: var(--blue-soft); }
.block-platform.complete { border-color: #8bcdaa; background: var(--green-soft); }
.platform-copy p { margin: 0; color: var(--blue); font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.platform-copy strong { font-size: 23px; }
.platform-copy small { display: block; color: var(--muted); font-size: 12px; }
.block-actions { display: none; }
.platform-action, .platform-review { min-height: 42px; border-radius: 7px; padding: 0 13px; font-size: 13px; font-weight: 850; }
.platform-action { border: 1px solid var(--blue); color: white; background: var(--blue); }
.platform-review { border: 1px solid var(--line-dark); color: var(--muted); background: white; }
.platform-review.done { border-color: #7be2a9; color: #7be2a9; }
.route-summary { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,390px); align-items: end; gap: 34px; margin-top: 18px; padding-top: 22px; border-top: 1px solid var(--line); }
.route-summary span { color: var(--muted); font-size: 13px; font-weight: 800; }
.route-summary strong { display: block; margin-top: 3px; font-size: 35px; }
.route-summary strong small { color: var(--muted); font-size: 18px; }
.route-summary p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.track { height: 8px; overflow: hidden; border-radius: 99px; background: #dbe2ed; }
.track { position: relative; }
.track i { display: block; height: 100%; background: var(--blue); }
.dark-track { max-width: 480px; margin-top: 10px; background: #dce4ef; }
.dark-track i { background: #5e96ff; }
.route-cta { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 28px; border: 1px solid #74a3ff; border-radius: 10px; padding: 0 22px; color: white; background: var(--blue); box-shadow: 0 12px 32px rgba(21,93,233,.3); }
.route-cta span { color: #dbe7ff; }
.route-cta strong { margin: 0; font-size: 20px; }
.route-cta::after { content: "→"; font-size: 25px; }
.below-route { padding: 34px 48px 80px; background: white; }
.utility-row { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.utility-button { min-height: 78px; display: flex; align-items: center; justify-content: space-between; border: 0; border-right: 1px solid var(--line); padding: 0 19px; background: white; text-align: left; }
.utility-button:last-child { border-right: 0; }
.utility-button:hover { background: var(--blue-soft); }
.utility-button strong { font-size: 16px; }
.utility-button span { color: var(--muted); font-size: 13px; }
.pdf-link strong { color: var(--blue); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 44px 0 12px; }
.section-heading h2, .section-heading h3 { margin: 0; font-size: 25px; letter-spacing: -.04em; }
.section-heading span { color: var(--muted); font-size: 14px; }
.preview-table { border-top: 3px solid var(--navy-900); }
.preview-row { min-height: 66px; display: grid; grid-template-columns: 60px 180px minmax(240px,1fr) 70px; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 16px; }
.preview-row.head { min-height: 48px; color: var(--muted); background: #eef2f7; font-size: 13px; font-weight: 850; }
.preview-row > strong { font-size: 20px; }

.study-layout { min-height: calc(100vh - 72px); display: grid; grid-template-columns: minmax(0,1fr) 300px; max-width: var(--max); margin: 0 auto; background: white; }
.study-main { min-width: 0; padding: 30px 42px 24px; background: #f2f5f9; }
.study-meta { display: flex; justify-content: space-between; align-items: flex-start; color: var(--ink); }
.study-meta p { margin: 0 0 3px; color: var(--blue); font-size: 13px; font-weight: 900; letter-spacing: .06em; }
.study-meta h1 { margin: 0; color: var(--muted); font-size: 20px; }
.study-meta h1 strong { color: var(--ink); font-size: 37px; }
.study-meta .back-button { color: var(--ink); background: white; }
.study-progress { width: 250px; margin-top: 7px; overflow: visible; }
.milestone { position: absolute; top: 50%; width: 9px; height: 9px; transform: translate(-50%,-50%); border: 2px solid white; border-radius: 50%; background: #8fa0b7; box-shadow: 0 0 0 1px #8fa0b7; }
.milestone.m5 { left: 16.667%; } .milestone.m10 { left: 33.333%; } .milestone.m20 { left: 66.667%; } .milestone.m30 { left: 99%; }
.study-card { position: relative; max-width: 900px; min-height: 0; margin: 16px auto 14px; overflow: hidden; border: 1px solid #b9c5d6; border-radius: 14px; padding: 24px 42px 30px; background: white; box-shadow: var(--shadow); animation: card-enter .24s cubic-bezier(.16,1,.3,1); }
.importance-ribbon { width: fit-content; max-width: 100%; display: flex; align-items: center; gap: 8px; margin: 0 auto 14px; border: 1px solid #9bbaf2; border-radius: 999px; padding: 8px 15px; color: var(--blue); background: var(--blue-soft); font-size: 14px; line-height: 1.25; box-shadow: 0 5px 16px rgba(21,93,233,.08); }
.importance-ribbon strong { flex: 0 0 auto; }
.importance-ribbon span { color: var(--ink); font-weight: 750; }
.study-card::before { display: none; }
.study-card::after { display: none; }
.recall-instruction { text-align: center; color: var(--muted); font-size: 14px; }
.study-word-line { min-height: 112px; display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 5px; }
.study-word-line h2 { max-width: 100%; overflow-wrap: anywhere; margin: 0; font-size: clamp(58px,7vw,94px); line-height: 1; letter-spacing: -.04em; }
.study-word-line h2.long-word { max-width: 700px; font-size: clamp(42px,4.8vw,66px); line-height: 1.02; text-align: center; overflow-wrap: anywhere; }
.audio-button { min-height: 42px; flex: 0 0 auto; border: 1px solid var(--line-dark); border-radius: 22px; padding: 0 16px; color: var(--blue); background: white; font-size: 13px; font-weight: 850; }
.audio-button:hover { background: var(--blue-soft); }
.centered { text-align: center; }
.student-cue { margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--blue); font-size: 14px; font-weight: 800; }
.reveal-button { width: min(380px,100%); min-height: 58px; display: block; margin: 34px auto 8px; border: 1px solid var(--blue); border-radius: 9px; color: white; background: var(--blue); font-size: 18px; font-weight: 900; }
.meaning-panel { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.meaning-group { display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: start; gap: 12px; }
.meaning-group h3 { margin: 5px 0 0; }
.pos-badge { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 1.5px solid var(--blue); border-radius: 50%; color: var(--blue); background: white; font-size: 15px; font-style: normal; font-weight: 900; }
.meaning-group ol { display: flex; flex-direction: column; align-self: start; width: 100%; margin: 0; padding: 0; list-style: none; }
.meaning-group li { flex: 0 0 auto; min-height: 44px; display: block; padding: 5px 0; border-bottom: 1px solid #e6eaf0; }
.sense-row { min-height: 34px; display: grid; grid-template-columns: 34px 20px minmax(0,1fr); align-items: center; gap: 8px; }
.sense-number { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--blue); background: var(--blue-soft); font-size: 13px; font-weight: 900; }
.sense-star { color: #d25724; font-size: 17px; }
.sense-star.empty-star { visibility: hidden; }
.sense-copy { font-size: 20px; font-weight: 700; }
.sense-example { margin: 5px 0 5px 62px; border-left: 2px solid #bad0f9; padding: 3px 0 3px 12px; }
.sense-example summary { width: fit-content; cursor: pointer; color: var(--blue); font-size: 12px; font-weight: 850; }
.sense-example p { margin: 7px 0 3px; font-size: 16px; line-height: 1.55; }
.sense-example small { color: var(--muted); font-size: 11px; }
mark { border-radius: 3px; padding: 0 2px; color: inherit; background: #fff0a8; }
.source-note { margin: 10px 0 0; color: var(--muted); font-size: 13px; text-align: right; }
.source-note strong { color: var(--blue); }
.recall-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 12px; }
.status-button { position: relative; min-height: 78px; border: 1px solid var(--line-dark); border-radius: 9px; padding: 10px 14px 10px 38px; background: white; text-align: left; }
.status-button::before { content: ""; position: absolute; left: 15px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%); border: 2px solid currentColor; border-radius: 50%; }
.status-button strong, .status-button span { display: block; }
.status-button strong { font-size: 17px; }
.status-button span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.status-button.known { color: var(--green); }
.status-button.unsure { color: var(--amber); }
.status-button.unknown { color: var(--red); }
.status-button.known.selected { background: var(--green-soft); border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
.status-button.unsure.selected { background: var(--amber-soft); border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber); }
.status-button.unknown.selected { background: var(--red-soft); border-color: var(--red); box-shadow: 0 0 0 2px var(--red); }
.is-advancing .study-card { transform: translateX(18px); opacity: .25; }
.example-panel { margin-top: 12px; border: 1px solid #bad0f9; border-radius: 8px; padding: 13px 16px; background: var(--blue-soft); }
.example-panel div { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.example-panel strong { color: var(--blue); }
.example-panel span { color: var(--muted); }
.example-panel p { margin: 9px 0 0; font-size: 18px; line-height: 1.6; }
.study-footer { max-width: 900px; display: flex; align-items: center; justify-content: space-between; margin: 0 auto; color: var(--muted); font-size: 13px; }
.nav-button { min-height: 44px; border: 1px solid var(--line-dark); border-radius: 8px; padding: 0 18px; background: white; font-weight: 800; }
.primary-outline { color: var(--blue); border-color: var(--blue); }
.shortcut-hint { margin: 10px 0 0; color: #7b8799; font-size: 11px; text-align: center; }
.study-side { position: sticky; top: 72px; height: calc(100vh - 72px); overflow-y: auto; padding: 26px 20px; color: var(--ink); background: #f7f9fc; border-left: 1px solid var(--line); }
.study-side > div:first-child { padding: 0 0 16px; border-bottom: 1px solid var(--line); }
.study-side p { margin: 0; color: var(--blue); font-size: 12px; font-weight: 850; }
.study-side h2 { margin: 3px 0 0; font-size: 23px; }
.station-list { position: relative; padding-top: 8px; }
.side-word { position: relative; width: 100%; min-height: 54px; display: grid; grid-template-columns: 32px 1fr 70px; align-items: center; gap: 8px; border: 0; border-bottom: 1px solid #e4e9f0; padding: 0 8px; color: var(--ink); background: transparent; text-align: left; }
.side-word.current { border-radius: 7px; color: white; background: var(--blue); }
.side-word > span { color: var(--muted); font-size: 11px; font-weight: 800; }
.side-word.current > span, .side-word.current small { color: white; }
.side-word strong { font-size: 14px; }
.side-word small { color: var(--muted); font-size: 10px; text-align: right; }
.side-word small.known { color: var(--green); }
.side-word small.unsure { color: var(--amber); }
.side-word small.unknown { color: var(--red); }

.panel-page, .quiz-wrap { max-width: 1120px; margin: 0 auto; padding: 46px 28px 80px; }
.panel-head, .quiz-top { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding-bottom: 22px; border-bottom: 3px solid var(--navy-900); }
.panel-head p, .quiz-top p { margin: 0 0 8px; color: var(--blue); font-size: 13px; font-weight: 900; }
.panel-head h1, .quiz-top h1 { margin: 0; font-size: 38px; letter-spacing: -.04em; }
.panel-head span { display: block; margin-top: 8px; color: var(--muted); }
.panel-head .back-button, .quiz-top .back-button { color: var(--ink); background: white; }
.filters { display: grid; grid-template-columns: 1fr 160px 170px; gap: 10px; padding: 22px 0; }
.filters input, .filters select { height: 48px; border: 1px solid var(--line-dark); border-radius: 8px; padding: 0 13px; background: white; }
.result-count { margin-bottom: 10px; color: var(--muted); font-size: 13px; text-align: right; }
.dictionary-list, .review-list { border-top: 2px solid var(--blue); }
.dictionary-row { display: grid; grid-template-columns: 190px minmax(0,1fr) 150px; gap: 24px; padding: 24px 10px; border-bottom: 1px solid var(--line); }
.dictionary-word > span { color: var(--blue); font-size: 12px; font-weight: 850; }
.dictionary-word h2 { margin: 4px 0 9px; font-size: 28px; }
.dictionary-evidence { display: block; margin: -2px 0 10px; color: var(--muted); font-size: 11px; }
.small-audio { min-height: 34px; font-size: 11px; }
.dictionary-meanings { display: grid; gap: 12px; }
.dictionary-meanings > div { display: grid; grid-template-columns: 66px 1fr; gap: 10px; }
.dictionary-meanings strong { color: var(--blue); }
.dictionary-meanings span { grid-column: 2; display: flex; gap: 8px; font-size: 18px; }
.dictionary-meanings b { color: var(--blue); }
.dictionary-meanings em { color: #d25724; font-style: normal; }
.dictionary-meta { text-align: right; }
.dictionary-meta > span { display: inline-block; padding: 5px 8px; border-radius: 5px; background: #edf1f6; font-size: 11px; font-weight: 850; }
.dictionary-meta .known { color: var(--green); }
.dictionary-meta .unsure { color: var(--amber); }
.dictionary-meta .unknown { color: var(--red); }
.dictionary-meta small { display: block; margin-top: 12px; color: var(--muted); }
.empty { padding: 80px 20px; text-align: center; color: var(--muted); }
.review-page { max-width: 960px; }
.review-list { margin-top: 20px; }
.review-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; padding: 18px 10px; border-bottom: 1px solid var(--line); }
.review-row > div:first-child { display: grid; grid-template-columns: 35px 1fr 84px; gap: 8px; align-items: center; }
.review-row > div strong { font-size: 21px; }
.review-meanings { grid-column: 1/-1; padding: 16px 20px; background: #eef2f7; }
.text-button, .secondary, .primary { min-height: 44px; border-radius: 8px; padding: 0 16px; font-weight: 850; }
.text-button, .secondary { border: 1px solid var(--line-dark); background: white; }
.primary { border: 1px solid var(--blue); color: white; background: var(--blue); }
.review-finish { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; padding: 22px; border: 1px solid #bdd0f3; border-radius: 10px; background: var(--blue-soft); }
.review-finish p { margin: 0; }
.quiz-card { margin-top: 24px; padding: 46px 0; }
.quiz-progress { margin-top: -1px; }
.quiz-top { display: grid; grid-template-columns: 1fr auto auto; align-items: end; }
.quiz-streak { min-width: 88px; border: 1px solid #b9cdf4; border-radius: 9px; padding: 7px 11px; color: var(--blue); background: var(--blue-soft); text-align: center; }
.quiz-streak span, .quiz-streak strong { display: block; }
.quiz-streak span { font-size: 10px; font-weight: 800; }
.quiz-streak strong { font-size: 22px; line-height: 1.1; }
.quiz-type { width: fit-content; margin: 0 auto 10px; border-radius: 999px; padding: 5px 11px; color: var(--blue); background: var(--blue-soft); font-size: 12px; font-weight: 900; }
.quiz-instruction { color: var(--muted); text-align: center; }
.quiz-instruction strong, .quiz-instruction span { display: block; }
.quiz-card h2 { margin: 16px 0 38px; font-size: 48px; text-align: center; }
.quiz-card h2.sentence-prompt { max-width: 880px; margin-left: auto; margin-right: auto; font-size: 24px; line-height: 1.65; text-align: left; }
.quiz-instruction strong { color: var(--blue); font-size: 18px; }
.quiz-instruction span { margin-left: 8px; color: var(--muted); font-size: 12px; }
.options { display: grid; grid-template-columns: 1fr; gap: 10px; }
.option { min-height: 74px; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 8px; border: 1px solid var(--line-dark); border-radius: 9px; padding: 12px 18px; background: white; text-align: left; font-weight: 750; }
.option span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #edf1f6; }
.option.correct { border-color: var(--green); color: var(--green); background: var(--green-soft); }
.option.wrong { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.option.chosen { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 2px rgba(21,93,233,.12); }
.quiz-submit { width: 100%; margin-top: 16px; }
.quiz-feedback { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; border-radius: 9px; padding: 13px 16px; }
.quiz-feedback strong { flex: 0 0 auto; }
.quiz-feedback span { text-align: right; }
.quiz-feedback.is-correct { color: var(--green); background: var(--green-soft); }
.quiz-feedback.is-wrong { color: var(--red); background: var(--red-soft); }
.quiz-next { display: flex; justify-content: flex-end; align-items: center; margin-top: 12px; }
.quiz-source { margin: 18px 0 0; color: var(--muted); font-size: 12px; text-align: right; }
.quiz-result { padding: 65px 20px; text-align: center; }
.quiz-result > strong { display: block; color: var(--blue); font-size: 76px; }
.quiz-result > div { display: flex; justify-content: center; gap: 10px; }
.result-badges { margin: 22px 0; }
.result-badges span { border: 1px solid var(--line); border-radius: 9px; padding: 12px 18px; background: white; }
.result-badges strong { color: var(--blue); }

@keyframes card-enter {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

.guide-dialog { width: min(620px,calc(100% - 32px)); border: 0; border-radius: 12px; padding: 0; box-shadow: 0 28px 90px rgba(0,0,0,.3); }
.guide-dialog::backdrop { background: rgba(6,23,45,.72); }
.guide-dialog form { position: relative; padding: 34px; }
.guide-dialog h2 { margin: 0 0 20px; font-size: 29px; }
.guide-dialog ol { padding-left: 22px; line-height: 1.8; }
.dialog-close { position: absolute; right: 16px; top: 14px; border: 0; color: var(--muted); background: transparent; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 100; transform: translate(-50%,20px); opacity: 0; pointer-events: none; border: 1px solid #627795; border-radius: 8px; padding: 12px 18px; color: white; background: var(--navy-950); font-size: 13px; transition: transform .18s ease-out, opacity .18s ease-out; }
.toast.show { transform: translate(-50%,0); opacity: 1; }

@media (max-width:1120px) {
  .app-shell { grid-template-columns: 200px minmax(0,1fr); }
  .route-hero, .below-route { padding-left: 28px; padding-right: 28px; }
  .interchange { grid-template-columns: 250px minmax(0,1fr); gap: 28px; }
  .day-ring { width: 230px; height: 230px; border-width: 18px; }
  .day-ring strong { font-size: 60px; }
  .block-platform { padding-left: 62px; }
  .utility-row { grid-template-columns: 1fr 1fr; }
  .utility-button:nth-child(2) { border-right: 0; }
  .utility-button:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .study-layout { grid-template-columns: minmax(0,1fr) 250px; }
  .study-main { padding: 28px 22px; }
  .study-card { padding: 32px; }
}

@media (max-width:760px) {
  body { font-size: 16px; }
  .topbar { height: 62px; grid-template-columns: 1fr auto; padding: 0 16px; }
  .header-standard { display: none; }
  .kns-logo { width: 54px; } .brand-name { font-size: 19px; }
  .guide-button { min-height: 36px; padding: 0 10px; }
  .app-shell { display: block; }
  .day-rail { position: static; height: auto; padding: 10px 14px; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); }
  .rail-heading { display: none; }
  .day-list { height: auto; display: flex; gap: 8px; overflow-x: auto; padding: 3px 0 6px; }
  .day-button { min-width: 76px; min-height: 48px; display: block; padding: 4px; text-align: center; }
  .day-num { width: 34px; height: 25px; margin: 0 auto; }
  .day-copy strong { margin-top: 3px; font-size: 11px; } .day-copy small { display: none; }
  .route-hero { min-height: 0; padding: 28px 16px 24px; }
  .route-title h1 { font-size: 34px; } .route-title p { font-size: 15px; }
  .interchange { display: block; min-height: 0; margin-top: 28px; } .route-entry { display: none; }
  .day-ring { width: 100%; height: 150px; margin: 0 auto 16px; }
  .day-ring strong { font-size: 54px; } .day-ring b { margin-top: 8px; font-size: 15px; }
  .block-lines { gap: 9px; }
  .block-platform { min-height: 76px; padding: 10px 14px; }
  .platform-copy strong { font-size: 20px; } .platform-copy small { font-size: 11px; }
  .block-actions { display: grid; gap: 5px; }
  .platform-action, .platform-review { min-height: 34px; padding: 0 9px; font-size: 11px; }
  .route-summary { grid-template-columns: 1fr; gap: 18px; margin-top: 24px; } .route-cta { width: 100%; }
  .below-route { padding: 24px 16px 60px; }
  .utility-row { grid-template-columns: 1fr 1fr; }
  .utility-button { min-height: 70px; display: block; padding: 12px; border-bottom: 1px solid var(--line); }
  .utility-button strong, .utility-button span { display: block; }
  .section-heading { align-items: start; margin-top: 34px; } .section-heading span { display: none; }
  .preview-row { grid-template-columns: 34px 96px minmax(0,1fr); gap: 7px; padding: 9px 5px; font-size: 13px; }
  .preview-row > :last-child { display: none; } .preview-row > strong { font-size: 16px; }

  .study-layout { display: block; min-height: calc(100vh - 62px); background: #f2f5f9; }
  .study-main { padding: 10px 10px max(10px,env(safe-area-inset-bottom)); } .study-side { display: none; }
  .study-meta { align-items: center; }
  .study-meta p { font-size: 12px; }
  .study-meta h1 { line-height: 1.1; }
  .study-meta h1 strong { font-size: 30px; } .study-progress { width: 120px; height: 7px; margin-top: 5px; }
  .study-meta .back-button { min-height: 40px; padding: 0 12px; }
  .study-card { min-height: 0; margin-top: 8px; overflow: visible; padding: 16px 14px 10px; box-shadow: none; }
  .importance-ribbon { width: 100%; justify-content: center; flex-wrap: wrap; gap: 3px 6px; margin-bottom: 9px; border-radius: 8px; padding: 6px 8px; font-size: 11px; text-align: center; }
  .recall-instruction { font-size: 12px; }
  .study-word-line { min-height: 72px; display: flex; flex-wrap: wrap; text-align: center; gap: 8px 12px; }
  .study-word-line h2 { font-size: clamp(46px,14vw,60px); } .audio-button { min-height: 38px; margin-top: 0; padding: 0 13px; }
  .study-word-line h2.long-word { font-size: clamp(28px,8vw,44px); }
  .student-cue { margin-top: 8px; padding-top: 10px; font-size: 12px; }
  .meaning-panel { gap: 6px; margin-top: 10px; }
  .meaning-group { grid-template-columns: 36px minmax(0,1fr); align-items: start; gap: 6px; }
  .pos-badge { width: 32px; height: 32px; font-size: 14px; }
  .meaning-group h3 { margin-top: 4px; }
  .meaning-group li { min-height: 38px; padding: 3px 0; }
  .sense-row { min-height: 32px; grid-template-columns: 28px 17px minmax(0,1fr); gap: 5px; }
  .sense-number { width: 26px; height: 26px; }
  .sense-star { font-size: 15px; }
  .sense-copy { font-size: 17px; line-height: 1.35; }
  .sense-example { margin-left: 50px; padding-left: 9px; }
  .sense-example p { font-size: 14px; line-height: 1.45; }
  .source-note { margin-top: 6px; text-align: left; }
  .recall-actions { position: sticky; bottom: max(6px,env(safe-area-inset-bottom)); z-index: 5; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: 8px; padding: 6px; border: 1px solid #cad4e2; border-radius: 11px; background: rgba(255,255,255,.98); box-shadow: 0 12px 32px rgba(6,23,45,.14); }
  .status-button { min-height: 56px; padding: 6px 4px; text-align: center; } .status-button::before { display: none; }
  .status-button strong { font-size: 14px; } .status-button span { display: none; }
  .example-panel { margin-top: 8px; padding: 10px 12px; }
  .example-panel p { margin-top: 6px; font-size: 15px; line-height: 1.5; } .shortcut-hint { display: none; }
  .study-footer { display: none; }

  .panel-page, .quiz-wrap { padding: 30px 15px 60px; }
  .panel-head { align-items: start; } .panel-head h1 { font-size: 31px; }
  .filters { grid-template-columns: 1fr 1fr; } .filters input { grid-column: 1/-1; }
  .dictionary-row { grid-template-columns: 1fr; gap: 14px; padding: 22px 4px; }
  .dictionary-meta { text-align: left; } .dictionary-meta small { display: inline; margin-left: 10px; }
  .review-row > div:first-child { grid-template-columns: 28px 1fr 72px; }
  .review-finish { display: block; } .review-finish .primary { width: 100%; margin-top: 14px; }
  .quiz-top { grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
  .quiz-top .back-button { grid-column: 2; grid-row: 1; }
  .quiz-streak { grid-column: 1/-1; grid-row: 2; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px; }
  .quiz-streak span, .quiz-streak strong { display: inline; }
  .quiz-card { margin-top: 12px; padding: 24px 0; }
  .quiz-type { margin-bottom: 6px; }
  .quiz-instruction { margin: 6px 0; }
  .quiz-card h2.sentence-prompt { margin: 10px 0 18px; font-size: 18px; line-height: 1.45; }
  .quiz-card h2.word-prompt { margin: 8px 0 18px; font-size: 34px; }
  .option { min-height: 58px; padding: 8px 12px; }
  .quiz-feedback { display: block; }
  .quiz-feedback span { display: block; margin-top: 5px; text-align: left; }
  .options { grid-template-columns: 1fr; } .quiz-card h2 { font-size: 40px; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Web-only learning: inherit the white KNS study surface and cobalt actions. */
.learning-home { padding: 38px 42px 44px; background: white; }
.home-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 30px; }
.home-heading h1 { margin: 0; font-size: clamp(26px, 3vw, 40px); letter-spacing: -.035em; line-height: 1.3; }
.home-heading p { margin: 8px 0 0; color: var(--muted); }
.today-record { flex-shrink: 0; font-size: 14px; color: var(--muted); text-align: right; }
.today-record strong { display: block; color: var(--blue); font-size: 24px; font-variant-numeric: tabular-nums; }
.today-plan { border-block: 2px solid var(--ink); padding-top: 24px; }
.plan-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 18px; }
.plan-heading h2 { margin: 0; font-size: 28px; }
.plan-heading h2 span { display: block; color: var(--muted); font-size: 15px; font-weight: 500; margin-top: 4px; }
.pace-control { margin: 0; padding: 0; border: 0; display: flex; gap: 4px; }
.pace-control legend { margin-bottom: 6px; color: var(--muted); font-size: 13px; }
.pace-control button { min-height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: white; font-size: 14px; font-weight: 700; }
.pace-control button[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.learning-steps { padding: 0; margin: 12px 0 0; list-style: none; }
.learning-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 25px 0; }
.learning-steps li + li { border-top: 1px solid var(--line); }
.step-number { color: var(--blue); font-weight: 850; font-size: 22px; align-self: start; padding-top: 2px; }
.learning-steps h3 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.learning-steps p { margin: 6px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.learning-steps button { min-width: 150px; }
.learning-home .secondary, .list-toolbar .secondary, .pagination .secondary { min-height: 46px; }
.progress-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 28px 0; }
.progress-overview h2 { margin: 0 0 12px; font-size: 20px; }
.progress-overview p { margin: 8px 0; color: var(--muted); font-size: 15px; }
.progress-overview p strong { float: right; color: var(--ink); }
.progress-overview .progress-note { font-size: 13px; }
.progress-overview dl, .session-totals { display: flex; gap: 22px; margin: 0; align-items: center; justify-content: space-between; }
.progress-overview dt, .session-totals dt { color: var(--muted); font-size: 14px; }
.progress-overview dd, .session-totals dd { margin: 4px 0 0; font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.home-tools { display: flex; border-block: 1px solid var(--line); }
.home-tools button { flex: 1; min-height: 58px; padding: 12px 16px; background: white; border: 0; font-size: 16px; text-align: left; }
.home-tools button + button { border-left: 1px solid var(--line); }
.home-tools strong, .home-tools span { color: var(--blue); float: right; }
.home-tools button:hover { background: var(--blue-soft); }
.local-note { margin: 18px 0 0; color: var(--muted); font-size: 13px; }
.resume-line { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; margin-bottom: 24px; background: var(--blue-soft); border-radius: 10px; }
.resume-line span { display: block; color: var(--muted); font-size: 14px; margin-top: 4px; }
.study-meta h1.session-heading { font-size: 24px; line-height: 1.3; margin: 0; }
.study-meta p { margin-top: 8px; }
.study-side h2 { font-size: 18px; }
.recall-pad { max-width: 660px; margin: 20px auto; text-align: left; }
.recall-pad label { display: block; font-size: 16px; font-weight: 700; }
.recall-pad label span { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); font-weight: 400; }
.recall-pad textarea { display: block; width: 100%; resize: vertical; min-height: 88px; padding: 14px; margin-top: 12px; border: 1px solid var(--line-dark); border-radius: 8px; background: var(--paper); font-size: 17px; line-height: 1.6; }
.recall-pad textarea::placeholder { color: var(--muted); }
.recall-pad p { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.rating-prompt { font-size: 16px; font-weight: 750; margin-top: 24px; text-align: center; }
.draft-comparison { padding: 14px 18px; background: var(--blue-soft); border-radius: 8px; font-size: 16px; overflow-wrap: anywhere; white-space: pre-wrap; }
.study-card .recall-actions { margin-top: 12px; }
.study-footer button { min-height: 44px; }
.session-result { max-width: 800px; padding-top: 60px; }
.session-result h1 { font-size: clamp(26px, 4vw, 38px); line-height: 1.35; letter-spacing: -.03em; }
.session-result > p { color: var(--muted); }
.session-totals { padding: 28px 0; border-block: 1px solid var(--line); margin: 28px 0; justify-content: space-around; }
.result-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.result-actions button { min-height: 48px; }
.quiz-result h1 { font-size: 28px; }
.quiz-result > .result-actions { display: flex; flex-wrap: wrap; }
.wrong-answers { list-style: none; padding: 0; text-align: left; max-width: 680px; margin: 28px auto; }
.wrong-answers li { padding: 16px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 140px 1fr; gap: 20px; }
.wrong-answers strong { overflow-wrap: anywhere; }
.list-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 18px 0; }
.list-toolbar > span { margin-right: auto; }
.meanings-covered .dictionary-meanings { visibility: hidden; }
.meanings-covered .dictionary-row { position: relative; min-height: 120px; }
.dictionary-meta .text-button { font-size: 14px; min-height: 44px; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 28px; }
.storage-notice { margin: 0; padding: 14px 24px; background: var(--amber-soft); color: #744400; font-size: 15px; }
.app-footer { padding: 22px 20px; text-align: center; border-top: 1px solid var(--line); color: var(--muted); background: white; font-size: 12px; }
.guide-dialog { max-height: calc(100dvh - 48px); overflow: auto; }
.guide-dialog p { font-size: 15px; color: var(--muted); }
.day-copy small { color: var(--muted); }
.quiz-instruction span { font-size: 16px; }
.panel-head h1, .quiz-top h1, .route-title h1 { letter-spacing: -.035em; }
@media (max-width: 1100px) {
  .learning-home { padding: 28px; }
  .learning-steps li { gap: 12px; grid-template-columns: 24px minmax(0, 1fr); }
  .learning-steps li > button { grid-column: 2; justify-self: start; }
  .progress-overview { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 760px) {
  .learning-home { padding: 24px 18px 30px; }
  .home-heading { align-items: start; gap: 12px; margin-bottom: 24px; }
  .home-heading h1 { font-size: 25px; }
  .home-heading p { font-size: 14px; max-width: 220px; }
  .today-record { font-size: 12px; max-width: 76px; }
  .today-record strong { font-size: 22px; }
  .plan-heading { align-items: start; gap: 12px; }
  .plan-heading h2 { font-size: 25px; }
  .plan-heading h2 span { font-size: 13px; }
  .pace-control legend { font-size: 12px; }
  .pace-control button { font-size: 13px; padding: 0 8px; }
  .learning-steps li { padding: 20px 0; }
  .learning-steps h3 { font-size: 18px; }
  .learning-steps p { font-size: 14px; }
  .learning-steps li > button { width: 100%; }
  .progress-overview { padding: 24px 0; }
  .home-tools { flex-direction: column; }
  .home-tools button + button { border-left: 0; border-top: 1px solid var(--line); }
  .home-tools button { padding-inline: 0; }
  .resume-line { align-items: start; padding: 16px; }
  .resume-line strong { font-size: 15px; }
  .resume-line .primary { flex-shrink: 0; padding: 0 12px; font-size: 14px; }
  .study-meta h1.session-heading { font-size: 19px; }
  .study-meta .back-button { font-size: 13px; padding-inline: 10px; }
  .recall-pad { margin: 20px 0; }
  .recall-pad label { font-size: 15px; }
  .recall-pad textarea { min-height: 92px; }
  .study-card .recall-actions { position: static; margin-inline: 0; width: auto; }
  .study-footer { display: flex; gap: 10px; }
  .study-footer button { padding: 0 12px; font-size: 14px; }
  .session-result { padding-top: 30px; }
  .result-actions { flex-direction: column; }
  .quiz-result > .result-actions { flex-direction: column; }
  .quiz-result h1 { font-size: 24px; }
  .wrong-answers li { grid-template-columns: 1fr; gap: 6px; }
  .session-totals { gap: 12px; }
  .session-totals dt { font-size: 13px; }
  .list-toolbar { gap: 8px; font-size: 14px; }
  .list-toolbar button { padding-inline: 10px; font-size: 14px; }
  .home-heading p, .today-record { word-break: keep-all; }
  .home-heading p { max-width: none; }
  .today-record { max-width: 90px; }
  .study-card .recall-actions { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.guided-plan .plan-heading { display: block; }
.guided-plan h2 { font-size: clamp(23px, 3vw, 32px); line-height: 1.35; letter-spacing: -.03em; }
.plan-description { max-width: 65ch; margin: 12px 0 24px; color: var(--muted); }
.course-path { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 0; list-style: none; counter-reset: course; margin: 0 0 28px; color: var(--muted); font-size: 15px; }
.course-path li { counter-increment: course; display: flex; align-items: center; gap: 8px; }
.course-path li::before { content: counter(course); font-weight: 800; }
.course-path .current { color: var(--blue); font-weight: 750; }
.plan-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0 8px; }
.plan-bottom > span { color: var(--muted); font-size: 14px; }
.plan-bottom .primary { min-height: 52px; padding-inline: 24px; }
.day-button.locked { opacity: 1; color: var(--muted); }
.day-button.locked .day-num { background: transparent; border-style: dashed; }
.day-button.locked .day-copy small { color: var(--muted); font-size: 11px; }
.day-copy small.day-state-mobile { display: none; }
.completed-tools { display: flex; flex-wrap: wrap; gap: 20px; padding-block: 12px; }
.listening-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.listening-controls > span { font-size: 14px; color: var(--muted); max-width: 44ch; }
.listen-button { min-height: 48px; min-width: 142px; }
.listen-first { padding: 44px 0; text-align: center; }
.listen-first h2 { font-size: clamp(23px, 3vw, 30px); letter-spacing: -.02em; }
.listen-first p { color: var(--muted); }
.dictation-form { display: grid; gap: 12px; margin: 24px 0 16px; }
.dictation-form label { font-weight: 750; font-size: 16px; }
.dictation-form input { width: 100%; max-width: 480px; min-height: 54px; padding: 12px 16px; background: var(--paper); border: 1px solid var(--line-dark); border-radius: 8px; font-size: 22px; caret-color: var(--blue); }
.dictation-form p { margin: 0; font-size: 14px; color: var(--muted); }
.dictation-form .primary { justify-self: start; min-height: 48px; }
.listening-alternative { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.listening-alternative button { text-align: left; font-size: 14px; min-height: 44px; }
.listening-feedback { padding-top: 20px; }
.listening-feedback h2 { font-size: 36px; color: var(--blue); margin: 12px 0; overflow-wrap: anywhere; }
.listening-feedback > p { max-width: 65ch; line-height: 1.7; }
.listening-feedback .translation { color: var(--muted); font-size: 16px; }
.wrong-answers li > small { color: var(--muted); grid-column: 2; font-size: 13px; }
.listening-card .sentence-prompt { margin-top: 28px; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .day-copy small.day-state-mobile { display: block; margin-top: 3px; font-size: 11px; line-height: 1.3; }
  .course-path { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; font-size: 14px; margin-bottom: 24px; }
  .plan-bottom { align-items: stretch; flex-direction: column; gap: 14px; }
  .plan-bottom .primary { width: 100%; }
  .plan-description { font-size: 15px; }
  .listening-controls { align-items: start; flex-direction: column; }
  .listening-controls .listen-button { width: 100%; }
  .listen-first { padding: 28px 0; }
  .listen-first p { font-size: 15px; }
  .listening-card .sentence-prompt { font-size: 20px; }
  .dictation-form .primary { width: 100%; }
  .listening-feedback > p { font-size: 18px; }
  .listening-feedback .translation { font-size: 15px; }
  .wrong-answers li > small { grid-column: 1; }
}
@media print {
  body > * { display: none !important; }
  body::after { content: "수단비 630은 웹앱에서 학습할 수 있습니다. © KNS"; display: block; padding: 40px; }
}