/* Mint English design guide preview. Only the blue, gray, font, size, and border
   samples named in design-guidelines.md are treated as verified values.
   NEEDS_DESIGN_REVIEW: page background, dark palette, layout surfaces, and
   unverified component variants use restrained neutral values. */
:root {
  --ink: #242424;
  --muted: #777777;
  --line: #e1e1e1;
  --cream: #f7f7f7;
  --white: #ffffff;
  --mint: #f1f7fc;
  --green: #0f91ff;
  --blue: #eef7ff;
  --shadow: none;
}

html, body, #app, .app-shell { background: #f7f7f7; color: #242424; }
body { font-family: 'Pretendard Variable', Pretendard, Arial, sans-serif; background: #f7f7f7; }
button, input, textarea, select { font-family: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid #0f91ff;
  outline-offset: 2px;
}
button:disabled, input:disabled { opacity: .5; cursor: not-allowed; }

.topbar { background: #ffffff; border-bottom: 1px solid #e1e1e1; box-shadow: none; }
.brand { color: #242424; }
.brand-mark { background: #0f91ff; color: #ffffff; box-shadow: none; border-radius: 8px; }
.tag { color: #777777; background: #f7f7f7; border: 1px solid #e1e1e1; }
.theme-toggle, .site-return { background: #ffffff; color: #444444; border: 1px solid #e1e1e1; border-radius: 8px; }
.theme-toggle:hover, .site-return:hover { background: #f5faff; border-color: #0f91ff; }
html[data-theme="light"] .theme-toggle:hover,
html[data-theme="light"] .site-return:hover { background:#eef7ff; border-color:#0f91ff; color:#0869bb; }
.lang-toggle { background: #ffffff; border: 1px solid #e1e1e1; border-radius: 8px; }
.lang-toggle button { color: #777777; border-radius: 6px; font-size: 14px; font-weight: 500; }
.lang-toggle button.active { color: #0f91ff; background: #eef7ff; box-shadow: none; font-weight: 700; }
.lang-toggle button:hover, .lang-toggle button.active:hover { color:#0869bb; background:#eef7ff; }

.eyebrow, .cue-label, .cue-time span, .practice-head h1 span { color: #0f91ff; }
.helper, .footnote, .ai-caution, .write-label small, .load-footer span,
.practice-head h1 i, .cue-time, .session-progress > span, .strip-stat small { color: #777777; }
.page { max-width: 1440px; }
.home-page { height:auto; min-height:calc(100dvh - 64px); overflow:visible; }
.neon-load { overflow:visible; }
.drop-zone { min-height:150px; }
.home-story, .neon-load, .listen-surface, .insight-surface, .session-strip,
.summary-compact > div, .summary-details {
  background: #ffffff;
  border: 1px solid #e1e1e1;
  border-radius: 12px;
  box-shadow: none;
}
.home-story { background: #ffffff; }
.home-story::after, .story-orbit { display: none; }
.home-story h1, .load-head h2, .practice-head h1, .summary-v2-head h1 { color: #242424; }
.home-story p, .load-head p, .summary-v2-head p { color: #777777; }
.story-steps span { background: #f7f7f7; color: #0f91ff; border: 1px solid #e1e1e1; border-radius: 8px; }
.story-steps b { color: #444444; }
.load-number, .upload-icon { background: #eef7ff; color: #0f91ff; border-radius: 8px; }

.primary-btn, .play-button, .summary-copy-btn {
  background: #0f91ff;
  border: 1px solid #0f91ff;
  border-radius: 8px;
  color: #ffffff;
  box-shadow: none;
  font-weight: 700;
}
.primary-btn { font-size: 16px; line-height: 24px; }
.primary-btn:hover, .play-button:hover, .summary-copy-btn:hover { background: #0875ce; border-color: #0875ce; }
.secondary-btn, .ghost-btn, .pill-btn, .speed-select, .restart-button,
.cue-navigation, .cue-navigation button, .cue-navigation select {
  background: #ffffff;
  border-color: #e1e1e1;
  color: #444444;
  box-shadow: none;
  border-radius: 8px;
}
.secondary-btn:hover, .ghost-btn:hover, .pill-btn:hover, .restart-button:hover,
.cue-navigation button:hover { background: #f5faff; border-color: #0f91ff; color: #0f91ff; }
.pill-btn.active { background: #eef7ff; border-color: #0f91ff; color: #0f91ff; }

.text-input, .url-mode .text-input, .word-slot, .word-entry,
.listen-surface textarea, .speed-select {
  background: #ffffff;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  color: #242424;
  box-shadow: none;
}
.text-input, .url-mode .text-input { min-height: 40px; padding-inline: 12px; }
.text-input::placeholder, textarea::placeholder, .word-slot .word-input::placeholder {
  color: #999999;
  font-size: 14px;
  font-weight: 500;
}
.text-input:focus, .listen-surface textarea:focus, .word-slot:focus-within {
  border-color: #0f91ff;
  box-shadow: 0 0 0 2px #0f91ff26;
}
.url-mode label, .scope-label { color: #444444; }
.load-bottom .primary-btn { align-self: end; display: flex; align-items: center; justify-content: center; gap: 8px; }
.load-bottom .primary-btn span { display: inline-flex; align-items: center; line-height: 1; margin-left: 0; }
.drop-zone { background: #fbfbfb; border: 1px dashed #c8c8c8; border-radius: 8px; }
.drop-zone.drag { background: #eef7ff; border-color: #0f91ff; }
.drop-zone p, .file-line span { color: #777777; }
.file-line { background: #f7f7f7; color: #444444; border-radius: 8px; }
.resume-card { background:#f7f7f7; border-color:#e1e1e1; border-radius:8px; color:#242424; }
.resume-copy small, .resume-copy span { color:#777777; }
.resume-button { background:#0f91ff; color:#ffffff; border-radius:8px; font-weight:700; }
.resume-button:hover { background:#0875ce; }
.resume-clear { border-color:#e1e1e1; color:#444444; border-radius:8px; }
.resume-clear:hover { background:#eef7ff; border-color:#0f91ff; }
html[data-theme="light"] .resume-card { background:#f7f7f7; border-color:#e1e1e1; color:#242424; }
html[data-theme="light"] .resume-copy small, html[data-theme="light"] .resume-copy span { color:#777777; }
html[data-theme="light"] .resume-button { background:#0f91ff; color:#ffffff; }
html[data-theme="light"] .resume-button:hover { background:#0875ce; }
html[data-theme="light"] .resume-clear { border-color:#e1e1e1; color:#444444; }
.load-switch, .tool-tabs { background: #f7f7f7; border-color: #e1e1e1; border-radius: 8px; }
.load-switch button, .tool-tabs button { color: #777777; font-size: 14px; font-weight: 500; line-height: 20px; }
.load-switch button.active, .tool-tabs button.active {
  background: #ffffff;
  color: #0f91ff;
  box-shadow: inset 0 0 0 1px #0f91ff;
  border-radius: 8px;
  font-weight: 700;
}
.tool-tabs i { background: #0f91ff; }
.notice.error { background: #fff3f3; color: #a22626; border: 1px solid #e5a1a1; }

.session-progress b, .summary-details summary, .summary-details .summary-row span:last-child,
.copy-status { color: #0f91ff; }
.session-progress .progress-track { background: #e1e1e1; }
.session-progress .progress-fill { background: #0f91ff; }
.strip-stat, .summary-details .summary-row { border-color: #e1e1e1; }
.cue-navigation { background: #ffffff; }
.player { background: #f7f7f7; border: 1px solid #e1e1e1; border-radius: 8px; }
.play-button { border-radius: 8px; }
.seek-bar { background: linear-gradient(90deg,#0f91ff 0%,#0f91ff var(--seek-pct),#d5d5d5 var(--seek-pct),#d5d5d5 100%); }
.seek-bar::-webkit-slider-thumb, .seek-bar::-moz-range-thumb { background: #0f91ff; border-color: #ffffff; box-shadow: none; }
.seek-bar::-webkit-slider-thumb { background:#0f91ff; border-color:#ffffff; box-shadow:none; }
.seek-bar::-moz-range-thumb { background:#0f91ff; border-color:#ffffff; box-shadow:none; }
.player-time, .write-label small { color: #777777; }
.word-entry { background: #fbfbfb; }
.word-slot { background: #ffffff; }
.word-slot .slot-number, .slot-length { color: #777777; }
.word-slot .word-input { color: #242424; }
.word-slot.correct { background: #eef7ff; border-color: #0f91ff; }
.word-slot.correct .word-input, .word-slot.correct .slot-length,
.word-slot.correct .slot-number { color: #0869bb; }
.word-slot.revealed { background: #f3f3f3; border-color: #b7b7b7; }
.word-slot.revealed .word-input, .word-slot.revealed .slot-length,
.word-slot.revealed .slot-number { color: #333333; -webkit-text-fill-color: #333333; }

.tool-kicker, .hint-focus-word, .empty-panel b, .review-reference p,
.summary-compact b { color: #242424; }
.tool-intro strong, .tool-note, .shadow-intro p, .empty-panel p,
.hint-focus small, .summary-compact small { color: #777777; }
.tool-intro em, .empty-panel > span, .review-reference span,
.score-heading strong { color: #0f91ff; }
.hint-word, .hint-focus, .review-reference, .shadow-placeholder,
.summary-export { background: #ffffff; border-color: #e1e1e1; border-radius: 8px; color: #444444; box-shadow: none; }
.hint-word.current { border-color: #0f91ff; box-shadow: 0 0 0 1px #0f91ff; }
.hint-word.correct { background: #eef7ff; border-color: #0f91ff; color: #0869bb; }
.hint-word.system-shown { background: #f3f3f3; border-color: #b7b7b7; color: #333333; }
.hint-focus { background: #fbfbfb; }
.hint-focus-word.correct { color:#0869bb; }
.system-letter { color: #777777; text-shadow: none; }
.reveal-btn, .hint-focus .reveal-btn, .score-trigger {
  background: #eef7ff; border: 1px solid #0f91ff; border-radius: 8px;
  color: #0869bb; box-shadow: none;
}
.reveal-btn:disabled, .hint-focus .reveal-btn:disabled { opacity: .5; }
.review-ring, .review-ring.passed { background: conic-gradient(#0f91ff var(--score),#e1e1e1 0); }
.review-ring strong { background: #ffffff; color: #242424; }
.review-head span, .review-head small { color: #777777; }
/* NEEDS_DESIGN_REVIEW: the red and violet score stops are inferred; blue is verified. */
.demo-badge { background:#f3f3f3; color:#555555; }
.record-btn { background:#eef7ff; border-color:#0f91ff; color:#0869bb; }
.record-btn i { background:#c24545; box-shadow:none; }
.record-btn.recording { background:#fff2f2; border-color:#c24545; color:#9e3030; }
.download-btn { border-color:#0f91ff; color:#0869bb; }
.shadow-placeholder:first-letter { color:#0f91ff; }
.score-flow { gap: 5px 12px; padding: 5px 0; }
.score-word { display:inline-flex; flex-direction:column; gap:2px; padding:3px 0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.score-word b { color:var(--tone); font-size:13px; line-height:1.25; }
.score-word small { color:#777777; font-size:9px; font-weight:600; }
.legend-gradient { background:linear-gradient(90deg,#999999 0%,#0f91ff 100%); }
.legend-labels .pass-label, .legend-labels span:nth-child(2) { color:#0869bb; }
.summary-v2-head h1, .summary-compact b { color: #242424; }
.summary-v2 .footnote { color: #777777; }

/* NEEDS_DESIGN_REVIEW: dark mode has no audited Figma palette. Keep the saved
   theme choice usable with neutral surfaces and the verified blue action color. */
html[data-theme="dark"] { --ink:#f4f4f4; --muted:#c0c0c0; --line:#4a4a4a; --cream:#202020; --white:#292929; --mint:#292f35; --green:#0f91ff; --blue:#252f38; --shadow:none; }
html[data-theme="dark"], html[data-theme="dark"] body,
html[data-theme="dark"] #app, html[data-theme="dark"] .app-shell { background:#202020; color:#f4f4f4; }
html[data-theme="dark"] .topbar, html[data-theme="dark"] .home-story,
html[data-theme="dark"] .neon-load, html[data-theme="dark"] .listen-surface,
html[data-theme="dark"] .insight-surface, html[data-theme="dark"] .session-strip,
html[data-theme="dark"] .summary-compact > div, html[data-theme="dark"] .summary-details,
html[data-theme="dark"] .summary-export { background:#292929; border-color:#4a4a4a; box-shadow:none; }
html[data-theme="dark"] .brand, html[data-theme="dark"] .home-story h1,
html[data-theme="dark"] .load-head h2, html[data-theme="dark"] .practice-head h1,
html[data-theme="dark"] .summary-v2-head h1, html[data-theme="dark"] .tool-kicker,
html[data-theme="dark"] .hint-focus-word, html[data-theme="dark"] .empty-panel b,
html[data-theme="dark"] .review-reference p, html[data-theme="dark"] .summary-compact b { color:#f4f4f4; }
html[data-theme="dark"] .home-story p, html[data-theme="dark"] .load-head p,
html[data-theme="dark"] .summary-v2-head p, html[data-theme="dark"] .helper,
html[data-theme="dark"] .footnote, html[data-theme="dark"] .tool-note,
html[data-theme="dark"] .cue-time, html[data-theme="dark"] .session-progress > span,
html[data-theme="dark"] .strip-stat small { color:#c0c0c0; }
html[data-theme="dark"] .theme-toggle, html[data-theme="dark"] .site-return,
html[data-theme="dark"] .lang-toggle, html[data-theme="dark"] .secondary-btn,
html[data-theme="dark"] .ghost-btn, html[data-theme="dark"] .pill-btn,
html[data-theme="dark"] .speed-select, html[data-theme="dark"] .restart-button,
html[data-theme="dark"] .cue-navigation, html[data-theme="dark"] .cue-navigation button,
html[data-theme="dark"] .cue-navigation select, html[data-theme="dark"] .text-input,
html[data-theme="dark"] .word-slot, html[data-theme="dark"] .word-entry,
html[data-theme="dark"] .listen-surface textarea, html[data-theme="dark"] .hint-word,
html[data-theme="dark"] .hint-focus, html[data-theme="dark"] .review-reference,
html[data-theme="dark"] .shadow-placeholder { background:#303030; border-color:#555555; color:#f4f4f4; box-shadow:none; }
html[data-theme="dark"] .theme-toggle:hover, html[data-theme="dark"] .site-return:hover,
html[data-theme="dark"] .secondary-btn:hover, html[data-theme="dark"] .ghost-btn:hover,
html[data-theme="dark"] .pill-btn:hover { background:#363d43; border-color:#0f91ff; }
html[data-theme="dark"] .lang-toggle button, html[data-theme="dark"] .load-switch button,
html[data-theme="dark"] .tool-tabs button { color:#c0c0c0; }
html[data-theme="dark"] .lang-toggle button.active, html[data-theme="dark"] .load-switch button.active,
html[data-theme="dark"] .tool-tabs button.active, html[data-theme="dark"] .pill-btn.active {
  background:#253c50; border-color:#0f91ff; color:#7dc5ff; box-shadow:inset 0 0 0 1px #0f91ff;
}
html[data-theme="dark"] .lang-toggle button:hover { background:#253c50; color:#7dc5ff; }
html[data-theme="dark"] .load-switch, html[data-theme="dark"] .tool-tabs,
html[data-theme="dark"] .drop-zone, html[data-theme="dark"] .file-line,
html[data-theme="dark"] .player, html[data-theme="dark"] .story-steps span {
  background:#303030; border-color:#555555; color:#f4f4f4;
}
html[data-theme="dark"] .word-slot .word-input { color:#f4f4f4; }
html[data-theme="dark"] .word-slot.correct, html[data-theme="dark"] .hint-word.correct { background:#253c50; border-color:#0f91ff; color:#7dc5ff; }
html[data-theme="dark"] .word-slot.correct .word-input,
html[data-theme="dark"] .word-slot.correct .slot-length,
html[data-theme="dark"] .word-slot.correct .slot-number,
html[data-theme="dark"] .hint-focus-word.correct { color:#7dc5ff; }
html[data-theme="dark"] .word-slot.revealed, html[data-theme="dark"] .hint-word.system-shown { background:#363636; border-color:#777777; color:#f4f4f4; }
html[data-theme="dark"] .word-slot.revealed .word-input,
html[data-theme="dark"] .word-slot.revealed .slot-length,
html[data-theme="dark"] .word-slot.revealed .slot-number { color:#f4f4f4; -webkit-text-fill-color:#f4f4f4; }
html[data-theme="dark"] .system-letter { color:#c0c0c0; }
html[data-theme="dark"] .demo-badge { background:#363636; color:#c0c0c0; }
html[data-theme="dark"] .record-btn { background:#253c50; border-color:#0f91ff; color:#7dc5ff; }
html[data-theme="dark"] .record-btn.recording { background:#432b2b; border-color:#c24545; color:#ffc2c2; }
html[data-theme="dark"] .download-btn { border-color:#0f91ff; color:#7dc5ff; }
html[data-theme="dark"] .score-word { background:transparent; border:0; }
html[data-theme="dark"] .score-word small { color:#c0c0c0; }
html[data-theme="dark"] .review-ring strong { background:#292929; color:#f4f4f4; }
html[data-theme="dark"] .summary-details .summary-list { background:transparent; color:#f4f4f4; }
html[data-theme="dark"] .resume-card { background:#303030; border-color:#555555; color:#f4f4f4; }
html[data-theme="dark"] .resume-copy small, html[data-theme="dark"] .resume-copy span { color:#c0c0c0; }
html[data-theme="dark"] .resume-button { background:#0f91ff; color:#ffffff; }
html[data-theme="dark"] .resume-clear { border-color:#555555; color:#f4f4f4; }

@media(max-width:760px) {
  .load-switch button, .tool-tabs button { font-size:14px; }
  .primary-btn { font-size:14px; line-height:20px; }
}