:root {--fs-25:25px;--fs-20:20px;--fs-18:18px;--fs-17:17px;--fs-15:15px;--fs-12:12px;--fs-10:10px;--fs-9:9px;--fs-8:8px;
  color-scheme: light;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  /* ROUTINE SHARED TOKENS v1 — 기준: 루틴.js SHELL_HTML :root (docs/DESIGN_TOKENS.md) */
  --bg: #f4f5f7;
  --bg-2: #dce4ef;
  --surface: rgba(255, 255, 255, 0.86);
  --surface-solid: #fff;
  --surface-soft: #edf1f6;
  --text: #17191c;
  --muted: #727780;
  --faint: #9aa0a8;
  --line: rgba(24, 28, 34, 0.09);
  --accent: #527ba0;
  --accent-2: #7fa8c9;
  --accent-soft: rgba(82, 123, 160, 0.12);
  --success: #248a5a;
  --danger: #d94c4c;
  --shadow: 0 14px 36px rgba(25, 35, 45, 0.09);
  --radius: 22px;
  --jp-font:
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --nav-bg: rgba(246, 248, 250, 0.78);
  --overlay: rgba(236, 240, 245, 0.8);
}
html[data-theme="dark"] {
  color-scheme: dark;
  /* 기준: 루틴.js 다크 토큰 + THEME_PALETTES.blue.dark */
  --bg: #101311;
  --bg-2: #2b4c6f;
  --surface: rgba(28, 33, 29, 0.88);
  --surface-solid: #1c211d;
  --surface-soft: #232a25;
  --text: #f2f4f2;
  --muted: #9aa19c;
  --faint: #7d847f;
  --line: rgba(255, 255, 255, 0.09);
  --accent: #7cb3e6;
  --accent-2: #5282b4;
  --accent-soft: rgba(124, 179, 230, 0.14);
  --success: #4fbf8f;
  --danger: #e06a6a;
  --shadow: 0 16px 38px rgba(0, 0, 0, 0.28);
  --nav-bg: rgba(20, 24, 21, 0.78);
  --overlay: rgba(12, 15, 13, 0.82);
}
html[data-jp-font="klee"] {
  --jp-font:
    "Klee One", "KleeOne-Regular", "Hiragino Sans", "Yu Gothic", sans-serif;
}
* {
  box-sizing: border-box;
  min-width: 0;
}
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--bg);
}
body {
  margin: 0;
  min-height: 100dvh;
  padding: calc(var(--safe-t) + 58px) max(14px, env(safe-area-inset-left))
    calc(86px + var(--safe-b)) max(14px, env(safe-area-inset-right));
  color: var(--text);
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Apple SD Gothic Neo",
    sans-serif;
  font-size: 14px;
  line-height: 1.5;
  background:
    radial-gradient(
      circle at 92% 4%,
      color-mix(in srgb, var(--accent) 14%, transparent),
      transparent 35%
    ),
    linear-gradient(150deg, var(--bg), var(--bg-2) 120%);
  background-attachment: fixed;
}
[lang="ja"],
.basic-ja,
.basic-coach-ja,
.japanese-line,
.furigana-line {
  font-family: var(--jp-font);
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button:active {
  transform: scale(0.985);
}
.hidden {
  display: none !important;
}
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
}
.topbar {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
  height: calc(58px + var(--safe-t));
  padding-top: var(--safe-t);
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg) 92%, transparent),
    color-mix(in srgb, var(--bg) 72%, transparent)
  );
  border-bottom: 1px solid color-mix(in srgb, var(--line) 45%, transparent);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}
.topbar-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.topbar h1 {
  font-size:var(--fs-17);
  letter-spacing: -0.03em;
  margin: 0;
}
.version-pill {
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size:var(--fs-9);
  font-weight: 900;
  letter-spacing: 0.05em;
}
.top-spacer {
  width: 42px;
}
.icon-button {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  font-size: 28px;
  line-height: 1;
  color: var(--text);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.04);
}
.view {
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  animation: viewIn 0.18s ease;
}
.immersive-view {
  max-width: 720px;
}
.stack {
  display: grid;
  gap: 13px;
}
.eyebrow {
  margin: 0 0 3px;
  color: var(--accent);
  font-size:var(--fs-9);
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.home-intro,
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 2px 12px;
}
.home-intro h2,
.section-head h2 {
  font-size:var(--fs-25);
  line-height: 1.14;
  letter-spacing: -0.045em;
  margin: 0 0 6px;
}
.home-intro p:not(.eyebrow),
.section-head p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size:var(--fs-12);
  line-height: 1.55;
}
.mini-link {
  border: 0;
  background: transparent;
  color: var(--accent);
  font-weight: 850;
  padding: 8px 4px;
  white-space: nowrap;
}
.menu-list,
.compact-panel,
.result-card,
.scene-brief,
.voice-composer,
.release-card,
.history-item,
.premium-item,
.talk-evaluation {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.menu-list {
  overflow: hidden;
}
.menu-row {
  width: 100%;
  display: grid;
  grid-template-columns: 34px 1fr 14px;
  align-items: center;
  gap: 10px;
  padding: 15px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
}
.menu-row:last-child {
  border-bottom: 0;
}
.menu-row strong {
  display: block;
  font-size: 16px;
  letter-spacing: -0.025em;
}
.menu-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.menu-row > b {
  font-size: 24px;
  color: var(--accent);
  font-weight: 500;
}
.menu-glyph {
  color: var(--accent);
  font-size:var(--fs-18);
  font-weight: 800;
  letter-spacing: -0.08em;
}
.settings-menu .menu-glyph {
  font-size: 16px;
}
.recent-section {
  margin-top: 20px;
}
.reuse-head,
.setting-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin: 0 2px 9px;
}
.reuse-head h3,
.setting-title h3 {
  margin: 0;
  font-size:var(--fs-17);
  letter-spacing: -0.025em;
}
.subtle-label,
.setting-value,
.fixed-provider {
  font-size:var(--fs-9);
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 5px 8px;
  font-weight: 850;
}
.recent-learning,
.history-list,
.premium-grid,
.release-list {
  display: grid;
  gap: 9px;
}
.recent-item {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 17px;
}
.recent-item .kind {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}
.recent-item b {
  display: block;
  font-size: 13px;
}
.recent-item small {
  display: block;
  color: var(--muted);
  font-size:var(--fs-10);
  margin-top: 2px;
}
.recent-item > strong {
  font-size: 11px;
  color: var(--accent);
}
.compact-panel {
  padding: 16px;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.form-grid .full {
  grid-column: 1/-1;
}
label {
  display: grid;
  gap: 6px;
  font-size:var(--fs-12);
  font-weight: 760;
}
input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-solid);
  padding: 11px 12px;
  outline: none;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea {
  resize: vertical;
  line-height: 1.55;
}
.primary,
.secondary,
.ghost {
  min-height: 43px;
  border-radius: 14px;
  padding: 11px 14px;
  font-weight: 850;
  border: 1px solid transparent;
}
.primary {
  background: linear-gradient(
    135deg,
    var(--accent),
    color-mix(in srgb, var(--accent) 62%, var(--accent-2))
  );
  color: white;
}
.secondary {
  background: var(--surface-solid);
  border-color: var(--line);
  color: var(--accent);
}
.ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
}
.full {
  width: 100%;
}
.dual-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.status {
  min-height: 18px;
  margin: 4px 0;
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.status.success {
  color: var(--success);
}
.status.error {
  color: var(--danger);
}
.scenario-presets,
.reuse-strip,
.tab-row,
.speed-row,
.pron-basic-tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 1px 1px 7px;
  scrollbar-width: none;
}
.scenario-presets::-webkit-scrollbar,
.reuse-strip::-webkit-scrollbar,
.tab-row::-webkit-scrollbar {
  display: none;
}
.preset-chip,
.chip {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  padding: 8px 12px;
  color: var(--muted);
  font-size:var(--fs-10);
  font-weight: 800;
}
.preset-chip.active,
.chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.reuse-card {
  flex: 0 0 230px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  text-align: left;
}
.reuse-card b {
  display: block;
  font-size:var(--fs-12);
}
.reuse-card small {
  display: block;
  color: var(--muted);
  font-size:var(--fs-9);
  margin-top: 4px;
}
#scenarioPreview {
  margin-top: 2px;
}
.scenario-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
}
.scenario-meta-grid span,
.mission-preview,
.keigo-focus,
.starter-hints,
.mission-box {
  padding: 11px;
  border-radius: 14px;
  background: var(--surface-soft);
}
.scenario-meta-grid small,
.mission-preview small {
  display: block;
  color: var(--muted);
  font-size:var(--fs-9);
}
.scenario-meta-grid b {
  font-size: 11px;
}
.mission-preview p {
  margin: 4px 0 0;
}
.keigo-focus {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.keigo-focus b {
  flex: 0 0 auto;
  color: var(--accent);
}
.starter-hints ul {
  margin: 7px 0 0;
  padding-left: 18px;
}
.starter-hints li + li {
  margin-top: 8px;
}
.scene-brief {
  padding: 14px;
  margin-bottom: 9px;
}
.scene-title-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}
.scene-title-line h2 {
  margin: 1px 0 4px;
  font-size:var(--fs-18);
}
.scene-title-line > b {
  font-size:var(--fs-9);
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}
.scene-brief > p {
  font-size: 11px;
  color: var(--muted);
  margin: 5px 0 10px;
}
.mission-box {
  display: grid;
  gap: 3px;
  font-size: 11px;
}
.mission-box b {
  color: var(--accent);
}
.scenario-progress {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  font-size:var(--fs-9);
  color: var(--muted);
  padding: 0 3px 8px;
}
.scenario-progress div {
  height: 5px;
  border-radius: 999px;
  background: var(--surface-soft);
  overflow: hidden;
}
.scenario-progress i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
}
.study-aid-bar {
  display: flex;
  justify-content: center;
  gap: 5px;
  position: sticky;
  top: calc(61px + var(--safe-t));
  z-index: 8;
  margin-bottom: 9px;
}
.study-aid-bar button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--nav-bg);
  padding: 7px 11px;
  color: var(--muted);
  font-size:var(--fs-9);
  font-weight: 850;
  backdrop-filter: blur(14px);
}
.study-aid-bar button.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.chat-list {
  display: grid;
  gap: 13px;
  padding-bottom: 190px;
}
.turn-block {
  max-width: min(92%, 470px);
}
.ai-turn {
  justify-self: start;
}
.user-turn {
  justify-self: end;
}
.speaker-label {
  margin: 0 7px 4px;
  color: var(--muted);
  font-size:var(--fs-9);
}
.talk-bubble {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  padding: 12px 14px;
  text-align: left;
  line-height: 1.58;
  overflow-wrap: anywhere;
}
.talk-bubble.ai {
  color: var(--text);
}
.talk-bubble.user {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.study-expression {
  display: grid;
  gap: 3px;
}
.furigana-line {
  font-size: 0.68em;
  letter-spacing: 0.06em;
  color: var(--accent);
  line-height: 1.25;
}
.japanese-line {
  font-size: 16px;
  font-weight: 500;
}
.meaning-line {
  font-size: 11px;
  color: var(--muted);
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.talk-bubble.user .meaning-line,
.talk-bubble.user .furigana-line {
  color: rgba(255, 255, 255, 0.8);
}
.correction-card {
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  overflow: hidden;
}
.correction-card summary {
  display: grid;
  grid-template-columns: 27px 1fr 14px;
  gap: 8px;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  list-style: none;
}
.correction-card summary::-webkit-details-marker {
  display: none;
}
.correction-status {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 900;
}
.correction-card summary b {
  display: block;
  font-size: 11px;
}
.correction-card summary small {
  display: block;
  color: var(--muted);
  font-size:var(--fs-8);
}
.correction-body {
  padding: 0 10px 10px;
  display: grid;
  gap: 7px;
}
.correction-line {
  position: relative;
  padding: 9px;
  border-radius: 11px;
  background: var(--surface-soft);
}
.correction-line > small {
  display: block;
  color: var(--muted);
  font-size:var(--fs-8);
  margin-bottom: 4px;
}
.tiny-listen {
  margin-top: 6px;
  border: 0;
  background: var(--surface-solid);
  border-radius: 8px;
  padding: 5px 8px;
  color: var(--accent);
  font-size:var(--fs-8);
}
.correction-explain {
  font-size:var(--fs-10);
  margin: 1px;
  line-height: 1.5;
}
.grammar-chip {
  width: max-content;
  max-width: 100%;
  font-size:var(--fs-8);
  color: var(--accent);
  background: var(--accent-soft);
  padding: 5px 8px;
  border-radius: 999px;
}
.retry-sentence {
  border: 1px solid var(--line);
  background: var(--surface-solid);
  border-radius: 10px;
  padding: 8px;
  color: var(--accent);
  font-size:var(--fs-9);
}
.voice-composer {
  position: fixed;
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  bottom: calc(72px + var(--safe-b));
  max-width: 640px;
  margin: auto;
  padding: 10px;
  z-index: 25;
}
.transcript {
  margin: 0 0 8px;
  color: var(--muted);
  font-size:var(--fs-10);
}
.composer-actions {
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  gap: 8px;
  align-items: center;
}
.mic-button {
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-size: 19px;
  box-shadow: 0 9px 24px color-mix(in srgb, var(--accent) 28%, transparent);
}
.mic-button.large {
  width: 70px;
  height: 70px;
}
.mic-button.recording {
  background: var(--danger);
  animation: pulse 1s infinite;
}
.draft-review {
  padding: 9px;
  border-radius: 13px;
  background: var(--surface-soft);
  margin-bottom: 8px;
}
.draft-review p {
  font-family: var(--jp-font);
  margin: 4px 0;
  font-size: 13px;
}
.draft-review > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.shadow-card.advanced {
  display: grid;
  grid-template-columns: 27px 1fr;
  gap: 10px;
  padding: 13px;
  margin: 9px 0;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface);
}
.shadow-number {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 900;
}
.shadow-session-head {
  padding: 13px;
  border-radius: 17px;
  background: var(--surface);
}
.shadow-ja {
  font-family: var(--jp-font);
  font-size:var(--fs-17);
  font-weight: 500;
  line-height: 1.6;
  margin: 0;
}
.shadow-aid {
  margin-top: 7px;
}
.shadow-ko {
  font-size: 11px;
  color: var(--muted);
}
.focus-note {
  font-size:var(--fs-9);
  color: var(--muted);
  margin-top: 7px;
}
.shadow-toolbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 9px;
}
.shadow-toolbar button {
  border: 1px solid var(--line);
  background: var(--surface-solid);
  border-radius: 10px;
  padding: 8px 5px;
  color: var(--accent);
  font-size:var(--fs-8);
}
.shadow-steps {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}
.shadow-steps i {
  height: 4px;
  flex: 1;
  border-radius: 999px;
  background: var(--surface-soft);
}
.record-stage {
  text-align: center;
  padding: 16px 0;
}
.record-stage p {
  font-size:var(--fs-9);
  color: var(--muted);
}
.wave {
  height: 27px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.wave i {
  width: 3px;
  height: 7px;
  border-radius: 3px;
  background: var(--muted);
}
.wave.active i {
  animation: wave 0.65s infinite alternate;
}
.wave.active i:nth-child(2),
.wave.active i:nth-child(4) {
  animation-delay: 0.12s;
}
.pron-result,
.result-card {
  padding: 14px;
}
.pron-result-hero {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
}
.score-ring {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(
    var(--accent) calc(var(--score, 0) * 1%),
    var(--surface-soft) 0
  );
}
.score-ring > span {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-solid);
  text-align: center;
}
.score-ring b {
  display: block;
  font-size: 22px;
}
.score-ring small {
  font-size:var(--fs-8);
}
.score-detail,
.memory-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin: 12px 0;
}
.score-detail span,
.memory-summary-grid > div {
  padding: 9px;
  border-radius: 12px;
  background: var(--surface-soft);
  text-align: center;
}
.score-detail small {
  display: block;
  color: var(--muted);
  font-size:var(--fs-8);
}
.score-detail b {
  font-size: 16px;
}
.recognized-card,
.pron-issue,
.perfect-card {
  padding: 11px;
  border-radius: 13px;
  background: var(--surface-soft);
}
.pron-issues {
  display: grid;
  gap: 7px;
}
.pron-issue {
  display: grid;
  grid-template-columns: 25px 1fr;
  gap: 8px;
}
.priority {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--surface-solid);
  color: var(--accent);
  font-weight: 900;
}
.pron-issue h4 {
  margin: 1px 0 3px;
}
.pron-issue p,
.pron-issue .tip {
  margin: 0;
  font-size:var(--fs-9);
}
.issue-actions {
  display: flex;
  gap: 5px;
  margin-top: 7px;
}
.issue-actions button {
  border: 0;
  border-radius: 8px;
  padding: 6px;
  background: var(--surface-solid);
  color: var(--accent);
  font-size:var(--fs-8);
}
.pron-basic-tabs {
  flex-wrap: nowrap;
}
.basic-pron-list {
  display: grid;
  gap: 6px;
}
.basic-pron-card {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-solid);
  padding: 10px 11px;
  text-align: left;
}
.basic-pron-card > span {
  display: grid;
}
.basic-ja {
  font-size: 16px;
  font-weight: 400 !important;
  line-height: 1.45;
}
.basic-pron-card small {
  color: var(--muted);
  font-size:var(--fs-9);
}
.basic-pron-card strong {
  color: var(--accent);
  font-size:var(--fs-9);
}
.basic-coach-ja {
  font-size: 23px;
  font-weight: 400 !important;
  margin: 5px 0;
}
.pron-guide {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 8px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size:var(--fs-10);
}
.pron-guide b {
  color: var(--accent);
}
.pron-guide.warn b {
  color: var(--danger);
}
.setting-section {
  margin: 4px 0 20px;
}
.setting-help,
.route-note,
.dialog-note {
  color: var(--muted);
  font-size:var(--fs-10);
  line-height: 1.55;
}
.theme-segments,
.engine-segments,
.profile-segments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.engine-segments {
  grid-template-columns: repeat(4, 1fr);
}
.theme-segments button,
.engine-segments button,
.profile-segments button {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-solid);
  padding: 9px 5px;
  color: var(--muted);
  font-size:var(--fs-9);
  font-weight: 850;
}
.theme-segments button.active,
.engine-segments button.active,
.profile-segments button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.theme-preview-grid,
.font-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 11px;
}
.theme-preview,
.font-choice-grid button {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 11px;
  background: var(--surface-solid);
  text-align: left;
}
.theme-preview i {
  display: block;
  width: 100%;
  height: 28px;
  border-radius: 9px;
  margin-bottom: 7px;
}
.light-preview i {
  background: linear-gradient(135deg, #fff, #e9f4f7);
}
.dark-preview i {
  background: linear-gradient(135deg, #12191b, #0a3544);
}
.theme-preview b,
.font-choice-grid b {
  font-size: 11px;
}
.theme-preview small,
.font-choice-grid small {
  display: block;
  color: var(--muted);
  font-size:var(--fs-8);
}
.font-choice-grid button span {
  display: block;
  font-size: 14px;
  margin: 7px 0;
}
.font-choice-grid button.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.voice-control-card {
  display: grid;
  gap: 11px;
}
.voice-summary-button,
.model-summary-button {
  width: 100%;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-solid);
  padding: 10px;
  text-align: left;
}
.model-summary-button {
  grid-template-columns: 1fr auto;
}
.voice-avatar {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 900;
}
.voice-summary-button b,
.model-summary-button b {
  display: block;
  font-size:var(--fs-12);
}
.voice-summary-button small,
.model-summary-button small {
  display: block;
  color: var(--muted);
  font-size:var(--fs-9);
  margin-top: 2px;
}
.voice-summary-button i,
.model-summary-button i {
  font-style: normal;
  color: var(--accent);
  font-size:var(--fs-9);
}
.rate-control {
  grid-template-columns: auto 1fr;
  align-items: center;
}
.voice-action-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px;
  align-items: center;
}
.audio-status {
  margin: 0;
  padding: 8px 10px;
  border-radius: 11px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size:var(--fs-9);
  overflow-wrap: anywhere;
}
.audio-status.success {
  color: var(--success);
}
.audio-status.error {
  color: var(--danger);
}
.toggle-line,
.compact-select-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.toggle-line:last-child,
.compact-select-line:last-child {
  border-bottom: 0;
}
.toggle-line b,
.compact-select-line b {
  display: block;
  font-size: 11px;
}
.toggle-line small,
.compact-select-line small {
  display: block;
  color: var(--muted);
  font-size:var(--fs-8);
  margin-top: 2px;
}
.toggle-line input {
  width: 42px;
}
.compact-select-line select {
  width: 150px;
}
.switch input {
  width: auto;
}
.task-route-list {
  display: grid;
  gap: 8px;
}
.task-route-card {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  padding: 12px;
  text-align: left;
}
.task-route-card b {
  font-size:var(--fs-12);
}
.task-route-card small {
  display: block;
  color: var(--muted);
  font-size:var(--fs-9);
  margin-top: 3px;
}
.route-chain {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  margin-top: 9px;
  padding-bottom: 2px;
}
.route-chain em {
  font-style: normal;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  border-radius: 999px;
  background: var(--surface-soft);
  padding: 5px 7px;
  font-size:var(--fs-8);
}
.route-chain em i {
  font-style: normal;
  color: var(--accent);
  font-weight: 900;
}
.route-chain > span {
  color: var(--faint);
}
.fallback-card {
  padding-top: 5px;
  padding-bottom: 5px;
}
.provider-status {
  padding: 11px 16px;
}
.provider-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.provider-row:last-child {
  border-bottom: 0;
}
.provider-row b {
  font-size: 11px;
}
.provider-row small {
  display: block;
  color: var(--muted);
  font-size:var(--fs-9);
  margin-top: 3px;
  overflow-wrap: anywhere;
}
.provider-row em {
  display: block;
  color: var(--faint);
  font-size:var(--fs-8);
  font-style: normal;
  margin-top: 4px;
}
.provider-row .ok {
  color: var(--success);
}
.provider-row .error,
.provider-row .no {
  color: var(--danger);
}
.runtime-diagnostics,
.notice {
  margin-top: 9px;
  border-radius: 16px;
  background: var(--accent-soft);
  padding: 13px;
  color: var(--muted);
  font-size:var(--fs-10);
}
.notice strong {
  color: var(--accent);
}
.release-card,
.history-item,
.premium-item {
  padding: 14px;
}
.release-card.current {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
}
.release-card > div {
  display: flex;
  justify-content: space-between;
}
.release-card > div span {
  font-size:var(--fs-8);
  color: var(--accent);
}
.release-card h3 {
  font-size: 14px;
  margin: 8px 0 4px;
}
.release-card p,
.release-card li {
  font-size:var(--fs-10);
  color: var(--muted);
}
.release-card ul {
  padding-left: 17px;
}
.release-card li + li {
  margin-top: 4px;
}
.bottom-nav {
  position: fixed;
  z-index: 45;
  left: 50%;
  bottom: max(8px, var(--safe-b));
  transform: translateX(-50%);
  width: min(330px, calc(100% - 28px));
  height: 58px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--line) 110%, transparent);
  border-radius: 22px;
  background: var(--nav-bg);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.13);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.bottom-nav button {
  border: 0;
  border-radius: 17px;
  background: transparent;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size:var(--fs-10);
  font-weight: 800;
}
.bottom-nav button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bottom-nav button.active {
  background: var(--accent-soft);
  color: var(--accent);
}
body[data-view="scenarioRoom"] .bottom-nav {
  display: none;
}
body[data-view="scenarioRoom"] {
  padding-bottom: calc(176px + var(--safe-b));
}
.loading-overlay {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--overlay);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
}
.loader-card {
  width: min(340px, calc(100% - 38px));
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--surface);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
  text-align: center;
}
.loader-brand {
  color: var(--accent);
  font-size:var(--fs-9);
  font-weight: 900;
  letter-spacing: 0.18em;
}
.loader-orb {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  margin: 0 auto 14px;
  background:
    radial-gradient(circle at 35% 30%, #fff 0 8%, transparent 9%),
    linear-gradient(145deg, var(--accent-2), var(--accent));
  box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 30%, transparent);
  animation: orb 1.6s ease-in-out infinite;
}
.loader-card h2 {
  font-size:var(--fs-18);
  margin: 7px 0;
}
.loader-card > p {
  font-size:var(--fs-10);
  color: var(--muted);
}
.loading-steps {
  display: grid;
  gap: 6px;
  margin: 15px 0;
  text-align: left;
}
.loading-steps span {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 8px;
  align-items: center;
  color: var(--faint);
  font-size:var(--fs-9);
}
.loading-steps i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--line);
}
.loading-steps span.active {
  color: var(--text);
}
.loading-steps span.active i {
  border-color: var(--accent);
  border-top-color: transparent;
  animation: spin 0.8s linear infinite;
}
.loading-steps span.done i {
  background: var(--success);
  border-color: var(--success);
}
.loading-foot {
  display: flex;
  justify-content: space-between;
  font-size:var(--fs-8);
  color: var(--muted);
}
dialog {
  border: 0;
  padding: 0;
  width: min(430px, calc(100% - 24px));
  max-height: min(78dvh, 700px);
  border-radius: 23px;
  background: var(--surface-solid);
  color: var(--text);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.3);
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(8px);
}
dialog form {
  padding: 16px;
}
.dialog-close {
  position: absolute;
  right: 13px;
  top: 12px;
  border: 0;
  background: var(--surface-soft);
  width: 31px;
  height: 31px;
  border-radius: 10px;
}
.voice-picker-list,
.model-picker-list,
.route-picker-list {
  display: grid;
  gap: 7px;
  max-height: 55dvh;
  overflow: auto;
  margin-top: 12px;
}
.voice-picker-item,
.model-picker-item {
  width: 100%;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  text-align: left;
}
.model-picker-item {
  grid-template-columns: 1fr auto auto;
}
.voice-picker-item.selected,
.model-picker-item.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.voice-picker-item b,
.model-picker-item b {
  font-size: 11px;
}
.voice-picker-item small,
.model-picker-item small,
.model-picker-item em {
  display: block;
  color: var(--muted);
  font-size:var(--fs-8);
  font-style: normal;
}
.route-slot {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 8px;
  align-items: center;
}
.route-slot > span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.route-slot i {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-style: normal;
  font-size:var(--fs-9);
}
.model-search {
  margin-top: 8px;
}
.toast {
  position: fixed;
  z-index: 180;
  left: 50%;
  bottom: calc(78px + var(--safe-b));
  transform: translateX(-50%);
  max-width: calc(100% - 36px);
  background: #172126;
  color: #fff;
  border-radius: 13px;
  padding: 9px 13px;
  font-size:var(--fs-10);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.update {
  position: fixed;
  z-index: 220;
  top: calc(var(--safe-t) + 7px);
  left: 50%;
  transform: translateX(-50%);
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  padding: 8px 13px;
  font-size:var(--fs-10);
  font-weight: 850;
}
@keyframes viewIn {
  from {
    opacity: 0.55;
    transform: translateY(3px);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes wave {
  to {
    height: 24px;
  }
}
@keyframes pulse {
  50% {
    transform: scale(1.05);
  }
}
@keyframes orb {
  50% {
    transform: translateY(-4px) rotate(3deg);
  }
}
@media (max-width: 480px) {
  body {
    padding-left: 12px;
    padding-right: 12px;
  }
  .home-intro h2,
  .section-head h2 {
    font-size: 23px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .form-grid .full {
    grid-column: auto;
  }
  .scenario-meta-grid {
    grid-template-columns: 1fr;
  }
  .voice-action-row {
    grid-template-columns: 1fr;
  }
  .theme-preview-grid,
  .font-choice-grid {
    grid-template-columns: 1fr;
  }
  .compact-select-line {
    grid-template-columns: 1fr;
  }
  .compact-select-line select {
    width: 100%;
  }
  .route-slot {
    grid-template-columns: 1fr;
  }
  .score-detail {
    grid-template-columns: repeat(3, 1fr);
  }
  .bottom-nav {
    width: min(300px, calc(100% - 24px));
  }
}
@media (max-width: 360px) {
  .menu-row {
    padding: 13px 12px;
  }
  .menu-row strong {
    font-size: 14px;
  }
  .engine-segments {
    grid-template-columns: repeat(2, 1fr);
  }
  .profile-segments {
    grid-template-columns: 1fr;
  }
  .composer-actions {
    grid-template-columns: 1fr 52px 1fr;
  }
  .secondary,
  .primary,
  .ghost {
    padding-left: 8px;
    padding-right: 8px;
    font-size:var(--fs-10);
  }
}


/* Routine Speak v1.5 */
body[data-view="home"],
body[data-view="settings"] {
  padding-top: max(14px, var(--safe-t));
}
body[data-view="home"] .bottom-nav,
body[data-view="settings"] .bottom-nav {
  margin-top: 2px;
}
.home-learning-menu .menu-row strong {
  font-size: 16px;
}
.app-version-footer {
  padding: 18px 0 2px;
  color: var(--faint);
  font-size:var(--fs-8);
  text-align: center;
  letter-spacing: .08em;
}
.scene-selector-panel {
  padding: 11px;
}
.scene-step-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.scene-select-button {
  min-height: 92px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-solid);
  text-align: left;
  color: var(--text);
}
.scene-select-button:disabled {
  opacity: .48;
}
.scene-select-button.selected {
  border-color: color-mix(in srgb, var(--accent) 65%, var(--line));
  background: var(--accent-soft);
}
.scene-select-button small,
.scene-select-button span {
  display: block;
  color: var(--muted);
  font-size:var(--fs-8);
  line-height: 1.35;
}
.scene-select-button b {
  display: block;
  margin: 6px 0 5px;
  font-size: 14px;
  line-height: 1.2;
}
.scene-selection-summary {
  margin-top: 9px;
  padding: 10px 11px;
  border-radius: 13px;
  background: var(--surface-soft);
}
.scene-selection-summary b,
.scene-selection-summary span {
  display: block;
}
.scene-selection-summary b {
  font-size:var(--fs-10);
}
.scene-selection-summary span {
  margin-top: 4px;
  color: var(--muted);
  font-size:var(--fs-9);
  line-height: 1.45;
}
.scene-clear {
  width: 100%;
  margin-top: 4px;
  text-align: center;
}
.scenario-options-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.scene-picker-list {
  display: grid;
  gap: 7px;
  max-height: 56dvh;
  margin-top: 12px;
  overflow-y: auto;
}
.scene-picker-item {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
}
.scene-picker-item.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.scene-picker-item b,
.scene-picker-item small {
  display: block;
}
.scene-picker-item b {
  font-size: 11px;
}
.scene-picker-item small {
  margin-top: 3px;
  color: var(--muted);
  font-size:var(--fs-8);
  line-height: 1.4;
}
.scene-picker-item i {
  color: var(--accent);
  font-style: normal;
  font-weight: 900;
}
.scene-path {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 16px;
  margin: 7px 0 8px;
  color: var(--accent);
  font-size:var(--fs-8);
  font-weight: 800;
}
.scene-path:empty {
  display: none;
}
.scene-path b {
  opacity: .5;
}
.scene-path.compact {
  margin: 5px 0 8px;
}
.source-mode-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.source-mode-row .chip {
  width: 100%;
}
#shadowReusePanel .reuse-head span b,
#shadowReusePanel .reuse-head span small {
  display: block;
}
#shadowReusePanel .reuse-head span small {
  margin-top: 2px;
  color: var(--muted);
  font-size:var(--fs-8);
}
.shadow-session-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.shadow-session-progress {
  width: 86px;
  color: var(--muted);
  font-size:var(--fs-8);
  text-align: right;
}
.shadow-session-progress i {
  display: block;
  height: 5px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-soft);
}
.shadow-session-progress b {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .2s ease;
}
.shadow-toolbar.dense {
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.shadow-toolbar .shadow-done.active {
  border-color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, var(--surface-solid));
  color: var(--success);
}
.pron-source-card {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}
.pron-source-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.pron-source-actions button {
  min-height: 40px;
  padding: 8px 5px;
  font-size:var(--fs-9);
}
.pron-library {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.pron-library .result-card {
  margin-top: 10px;
}
.pron-reuse-card b {
  font-family: var(--jp-font);
  font-weight: 500;
}
@media (max-width: 390px) {
  .scene-step-grid {
    grid-template-columns: 1fr;
  }
  .scene-select-button {
    min-height: 76px;
  }
  .scenario-options-grid {
    grid-template-columns: 1fr 1fr;
  }
  .scenario-options-grid label:nth-child(3) {
    grid-column: 1 / -1;
  }
  .shadow-session-head {
    grid-template-columns: 1fr;
  }
  .shadow-session-progress {
    width: 100%;
    text-align: left;
  }
}
@media (max-width: 340px) {
  .pron-source-actions,
  .source-mode-row,
  .shadow-toolbar.dense {
    grid-template-columns: 1fr;
  }
}

/* v1.6 · 관계/복구/한국인 발음 코스 */
.recovery-panel,.pron-focus-panel{padding:16px}
.recovery-chip-grid,.pron-focus-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.recovery-chip-grid .chip,.pron-focus-grid .chip{min-height:38px;padding:0 13px}
.pron-focus-note{margin:12px 2px 0;color:var(--muted);font-size:13px;line-height:1.55}
.recovery-preview{margin-top:14px;padding:14px;border-radius:18px;background:color-mix(in srgb,var(--accent) 9%,transparent);border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line))}
.recovery-preview>b{font-size:13px}.recovery-preview>div{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0}.recovery-preview span{padding:5px 9px;border-radius:999px;background:var(--panel-strong);font-size:var(--fs-12)}.recovery-preview small{color:var(--muted);line-height:1.45}
.scenario-meta-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.scene-context-line{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:var(--fs-12);margin:10px 0 0}
.pron-category{display:inline-flex;margin-bottom:5px;padding:3px 7px;border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-weight:750;font-size:11px}
@media(max-width:560px){.scenario-meta-grid{grid-template-columns:1fr 1fr}.scenario-meta-grid span:first-child{grid-column:1/-1}.recovery-chip-grid,.pron-focus-grid{gap:7px}.recovery-chip-grid .chip,.pron-focus-grid .chip{font-size:var(--fs-12);padding:0 11px}}


/* ROUTINE SPEAK v1.7 — mission review, linked practice, shadowing flow */
.mission-preview-list{
  list-style:none;
  display:grid;
  gap:7px;
  margin:10px 0 0;
  padding:0;
}
.mission-preview-list li{
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  gap:8px;
  align-items:start;
  padding:8px 9px;
  border-radius:11px;
  background:var(--surface-solid);
  border:1px solid var(--line);
}
.mission-preview-list li>i{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:8px;
  background:var(--accent-soft);
  color:var(--accent);
  font-style:normal;
  font-size:var(--fs-9);
  font-weight:900;
}
.mission-preview-list b,
.mission-preview-list small{display:block}
.mission-preview-list b{font-size:11px}
.mission-preview-list small{margin-top:2px;font-size:var(--fs-8);line-height:1.45;color:var(--muted)}
.scene-key-expressions{
  padding:11px;
  border-radius:14px;
  background:var(--surface-soft);
}
.scene-key-expressions>b{display:block;margin-bottom:7px;font-size:var(--fs-10);color:var(--accent)}
.scene-key-expressions>div{display:grid;gap:6px}
.scene-key-expressions button{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-solid);
  padding:9px 10px;
  color:var(--text);
  text-align:left;
}
.scene-key-expressions button>small{color:var(--muted);font-size:var(--fs-8);white-space:nowrap}
.mission-live{
  display:grid;
  gap:8px;
  margin-top:9px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:color-mix(in srgb,var(--accent) 6%,var(--surface-soft));
}
.mission-live>div{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.mission-live>div b{font-size:var(--fs-10);color:var(--accent)}
.mission-live>div small{font-size:7.5px;color:var(--muted);text-align:right}
.mission-live ol{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5px;
  margin:0;
  padding:0;
}
.mission-live li{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  padding:6px 7px;
  border-radius:9px;
  background:var(--surface-solid);
  color:var(--muted);
  font-size:var(--fs-8);
}
.mission-live li i{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:17px;
  height:17px;
  border-radius:6px;
  background:var(--accent-soft);
  color:var(--accent);
  font-style:normal;
  font-weight:900;
}
.mission-live li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.talk-evaluation.v17{
  display:grid;
  grid-template-columns:82px minmax(0,1fr);
  gap:12px;
  padding:15px;
}
.talk-evaluation.v17 .evaluation-main{align-self:center}
.talk-evaluation.v17 .evaluation-main h2{margin:1px 0 4px;font-size:var(--fs-18)}
.talk-evaluation.v17 .evaluation-main p:last-child{margin:0;color:var(--muted);font-size:var(--fs-10);line-height:1.55}
.mission-results,
.expression-deck.v17,
.next-step-card,
.evaluation-actions,
.talk-evaluation.v17>.evaluation-column,
.talk-evaluation.v17>.ghost{grid-column:1/-1}
.mission-results{display:grid;gap:6px}
.mission-results h3,
.expression-deck.v17 h3,
.talk-evaluation.v17 .evaluation-column h3{margin:0 0 3px;font-size:var(--fs-12)}
.mission-result{
  display:grid;
  grid-template-columns:26px minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-solid);
}
.mission-result>i{
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  border-radius:9px;
  font-style:normal;
  font-weight:900;
}
.mission-result.completed>i{background:color-mix(in srgb,var(--success) 15%,transparent);color:var(--success)}
.mission-result.partial>i{background:color-mix(in srgb,var(--warning) 16%,transparent);color:var(--warning)}
.mission-result.missed>i{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger)}
.mission-result b,.mission-result small{display:block}
.mission-result b{font-size:var(--fs-10)}
.mission-result small{margin-top:2px;color:var(--muted);font-size:var(--fs-8);line-height:1.4}
.mission-result>em{font-style:normal;color:var(--muted);font-size:7.5px;white-space:nowrap}
.retry-expression{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:stretch;
  padding:9px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--surface-solid);
}
.retry-expression+.retry-expression{margin-top:6px}
.expression-main{
  border:0;
  background:transparent;
  color:var(--text);
  text-align:left;
  padding:0;
}
.expression-main>small{display:block;margin-top:5px;color:var(--accent);font-size:var(--fs-8)}
.retry-expression>div{display:grid;gap:5px}
.retry-expression>div button{
  min-width:46px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--surface-soft);
  color:var(--accent);
  font-size:var(--fs-8);
}
.next-step-card{
  padding:11px 12px;
  border-radius:13px;
  background:var(--accent-soft);
}
.next-step-card small,.next-step-card b{display:block}
.next-step-card small{font-size:var(--fs-8);color:var(--accent);font-weight:900}
.next-step-card b{margin-top:4px;font-size:var(--fs-10);line-height:1.5}
.evaluation-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
}
.evaluation-actions button{min-width:0;padding-left:7px;padding-right:7px;font-size:var(--fs-9)}
.shadow-training-bar{
  position:sticky;
  top:calc(61px + var(--safe-t));
  z-index:7;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:7px;
  align-items:center;
  margin:9px 0;
  padding:10px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--nav-bg);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.shadow-training-bar b,.shadow-training-bar small{display:block}
.shadow-training-bar b{font-size:var(--fs-10)}
.shadow-training-bar small{margin-top:2px;color:var(--muted);font-size:7.5px}
.shadow-training-bar button{min-height:34px;padding:7px 9px;font-size:var(--fs-8)}
.shadow-card.advanced{transition:border-color .18s,box-shadow .18s,transform .18s}
.shadow-card.advanced.is-active{
  border-color:color-mix(in srgb,var(--accent) 55%,var(--line));
  box-shadow:0 0 0 3px var(--accent-soft);
}
.shadow-number{border:0;cursor:pointer}
.shadow-chunks{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  align-items:center;
  margin-top:8px;
  padding:8px 9px;
  border-radius:11px;
  background:var(--surface-soft);
  font-family:var(--jp-font);
  font-size:11px;
  line-height:1.45;
}
.shadow-chunks i{color:var(--accent);font-style:normal;font-weight:900}
.rhythm-note{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:7px;
  margin-top:6px;
  padding-top:6px;
  border-top:1px solid var(--line);
  font-size:var(--fs-8);
  line-height:1.45;
}
.rhythm-note b{color:var(--accent)}
.rhythm-note span{color:var(--muted)}
.shadow-toolbar.dense{grid-template-columns:repeat(4,minmax(0,1fr))}
.shadow-toolbar .shadow-routine{grid-column:span 2;color:white;background:var(--accent);border-color:var(--accent)}
.memory-summary-grid.v17{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}
.memory-summary-grid.v17>article{
  min-width:0;
  padding:10px 8px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--surface);
  text-align:center;
}
.memory-summary-grid.v17 small,.memory-summary-grid.v17 b{display:block}
.memory-summary-grid.v17 small{color:var(--muted);font-size:var(--fs-8)}
.memory-summary-grid.v17 b{margin-top:4px;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.memory-next-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  margin:9px 0;
  padding:13px;
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));
  border-radius:16px;
  background:color-mix(in srgb,var(--accent) 8%,var(--surface));
}
.memory-next-card small{color:var(--accent);font-size:var(--fs-8);font-weight:900}
.memory-next-card h3{margin:2px 0 4px;font-size:var(--fs-15)}
.memory-next-card p{margin:0;font-family:var(--jp-font);font-size:13px;line-height:1.45}
.memory-next-card button{min-height:38px;font-size:var(--fs-9)}
@media(max-width:390px){
  .mission-live ol{grid-template-columns:1fr}
  .talk-evaluation.v17{grid-template-columns:68px minmax(0,1fr);padding:12px}
  .shadow-training-bar{grid-template-columns:1fr 1fr}
  .shadow-training-bar>div{grid-column:1/-1}
  .shadow-toolbar.dense{grid-template-columns:repeat(3,minmax(0,1fr))}
  .shadow-toolbar .shadow-routine{grid-column:span 2}
  .evaluation-actions{grid-template-columns:1fr 1fr}
  .evaluation-actions .primary{grid-column:1/-1}
}

/* ===== v1.8 인출 모드 (한국어 큐 → 말하기 → 정답 확인) ===== */
#shadowPlayer.recall .shadow-card .shadow-copy .study-text,
#shadowPlayer.recall .shadow-card .shadow-chunks {
  filter: blur(7px);
  user-select: none;
  transition: filter 0.25s ease;
}
#shadowPlayer.recall .shadow-card.revealed .shadow-copy .study-text,
#shadowPlayer.recall .shadow-card.revealed .shadow-chunks {
  filter: none;
  user-select: auto;
}
.recall-cue {
  display: none;
  margin: 2px 0 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
}
#shadowPlayer.recall .shadow-card:not(.revealed) .recall-cue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.recall-cue > span {
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
}
.recall-cue > span > small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}
.recall-cue .recall-reveal {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size:var(--fs-12);
  font-weight: 700;
}
#shadowRecallMode.active,
#shadowAutoAdvance.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ===== v1.8 저장 자료 소스 필터 ===== */
.reuse-source-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0 2px;
}
.reuse-source-row .chip {
  font-size:var(--fs-12);
  padding: 6px 11px;
}


/* ROUTINE SPEAK v1.9 — shared form system, scenario layout, local font */
html[data-jp-font="klee"]{
  --jp-font:"RoutineKlee","Klee One","KleeOne-Regular","Hiragino Sans",sans-serif;
}
.font-choice-grid .font-preview-hiragino{
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","YuGothic",sans-serif!important;
}
.font-choice-grid .font-preview-klee{
  font-family:"RoutineKlee","Klee One","KleeOne-Regular","Hiragino Sans",sans-serif!important;
}
.font-choice-head{display:flex!important;align-items:center;justify-content:space-between;gap:8px;margin:0!important}
.font-choice-head em{font-style:normal;font-size:var(--fs-8);padding:4px 7px;border-radius:999px;background:var(--surface-soft);color:var(--muted)}
.font-choice-head em.ready{background:color-mix(in srgb,var(--success) 13%,transparent);color:var(--success)}
.font-file-actions{display:grid;grid-template-columns:1.35fr 1fr;gap:8px;margin-top:10px}
.font-file-actions button{min-height:42px}
.font-file-actions button:disabled{opacity:.45}
.scenario-options-v19{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  padding:12px;
}
.scenario-field{
  min-width:0;
  display:grid;
  align-content:start;
  gap:7px;
  padding:11px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--surface-solid);
}
.scenario-field>span{font-size:var(--fs-10);font-weight:900;color:var(--text)}
.scenario-field>small{min-height:22px;font-size:7.5px;line-height:1.4;color:var(--muted)}
.scenario-field select,
.scenario-field textarea{
  width:100%;
  min-width:0;
  margin:0;
  border:0;
  border-radius:11px;
  background:var(--surface-soft);
  color:var(--text);
  box-sizing:border-box;
}
.scenario-field select{
  height:43px;
  padding:0 28px 0 10px;
  font-size:var(--fs-10);
  font-weight:850;
  text-overflow:ellipsis;
}
.scenario-relationship-field{grid-column:1;grid-row:2}
.scenario-request-field{grid-column:2/4;grid-row:2}
.scenario-request-field textarea{
  min-height:108px;
  resize:vertical;
  padding:11px 12px;
  font-size:var(--fs-10);
  line-height:1.55;
}
.scenario-config-summary{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:4px 9px;
  align-items:baseline;
  margin:-3px 2px 2px;
  padding:10px 12px;
  border-radius:14px;
  background:var(--surface-soft);
}
.scenario-config-summary>span{font-size:var(--fs-8);color:var(--accent);font-weight:900;letter-spacing:.06em}
.scenario-config-summary>b{min-width:0;font-size:var(--fs-9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scenario-config-summary>small{grid-column:1/-1;color:var(--muted);font-size:var(--fs-8);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.recovery-chip-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px!important;
}
.recovery-chip-grid .chip{
  width:100%;
  min-width:0;
  min-height:42px!important;
  padding:7px 5px!important;
  display:grid;
  place-items:center;
  text-align:center;
  white-space:normal;
  line-height:1.25;
}
.scene-select-button b{overflow-wrap:anywhere}
#scenarioView .primary#generateScenario{min-height:51px;font-size:13px;box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 22%,transparent)}
.loader-card{border-radius:24px}
.loader-orb{border-radius:17px}
@media(max-width:390px){
  .scenario-options-v19{gap:7px;padding:9px}
  .scenario-field{padding:9px 7px;border-radius:13px}
  .scenario-field>span{font-size:var(--fs-9)}
  .scenario-field>small{font-size:7px}
  .scenario-field select{height:40px;padding-left:7px;padding-right:22px;font-size:var(--fs-9)}
  .scenario-request-field textarea{min-height:100px;padding:9px;font-size:var(--fs-9)}
  .recovery-chip-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .recovery-chip-grid .chip{font-size:var(--fs-10)!important}
}
@media(max-width:340px){
  .scenario-options-v19{grid-template-columns:1fr 1fr}
  .scenario-guidance-field{grid-column:1/-1}
  .scenario-relationship-field{grid-column:1;grid-row:auto}
  .scenario-request-field{grid-column:1/-1;grid-row:auto}
  .recovery-chip-grid{grid-template-columns:1fr 1fr!important}
  .font-file-actions{grid-template-columns:1fr}
}


/* ROUTINE SPEAK v2.0 — shared UI architecture */
:root{--radius-xs:10px;--radius-sm:14px;--radius-md:18px;--radius-lg:24px;--space-1:6px;--space-2:10px;--space-3:14px;--space-4:18px;--state-progress:var(--accent);--state-complete:var(--success);--state-warning:#d49a1e;--state-error:var(--danger)}
.home-intro-v20{align-items:flex-start}.today-focus-v20{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:13px;align-items:center;margin:18px 0 22px;padding:17px;border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));border-radius:24px;background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 13%,var(--panel)),var(--panel));box-shadow:var(--shadow)}.today-focus-v20 .focus-icon{width:48px;height:48px;border-radius:16px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:21px;font-weight:900}.today-focus-v20 div{min-width:0}.today-focus-v20 small{display:block;color:var(--accent);font-size:var(--fs-9);font-weight:950;letter-spacing:.14em}.today-focus-v20 b{display:block;margin-top:5px;font-size:var(--fs-17);line-height:1.25}.today-focus-v20 p{margin:5px 0 0;color:var(--muted);font-size:11px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.today-focus-v20 button{min-height:42px;padding:0 14px;white-space:nowrap}
.home-cluster-v20{margin:0 0 24px}.cluster-head-v20{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 3px 10px}.cluster-head-v20 span small{display:block;color:var(--accent);font-size:var(--fs-9);font-weight:950;letter-spacing:.16em}.cluster-head-v20 span b{display:block;margin-top:3px;font-size:var(--fs-20)}.cluster-head-v20 em{font-style:normal;color:var(--muted);font-size:var(--fs-10)}.home-learning-menu-v20{border-radius:22px}.home-learning-menu-v20 .menu-row{min-height:94px}.home-review-grid-v20{display:grid;grid-template-columns:1fr 1fr;gap:10px}.home-review-card-v20{min-width:0;padding:17px;border:1px solid var(--line);border-radius:20px;background:var(--panel);color:var(--text);text-align:left;box-shadow:var(--shadow)}.home-review-card-v20>span{display:grid;width:36px;height:36px;border-radius:12px;background:var(--surface-soft);place-items:center;color:var(--accent);font-weight:900}.home-review-card-v20>b{display:block;margin-top:12px;font-size:var(--fs-15)}.home-review-card-v20>small{display:block;margin-top:5px;min-height:34px;color:var(--muted);font-size:var(--fs-10);line-height:1.45}.home-review-card-v20>strong{display:block;margin-top:10px;color:var(--accent);font-size:11px}
.ui-summary-card-v20{margin:0 0 12px;padding:16px;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));border-radius:21px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 10%,var(--panel)),var(--panel));box-shadow:var(--shadow)}.ui-summary-card-v20>small{display:block;color:var(--accent);font-size:var(--fs-8);font-weight:950;letter-spacing:.14em}.ui-summary-card-v20>div{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:8px}.ui-summary-card-v20 b{font-size:var(--fs-18);line-height:1.2}.ui-summary-card-v20 span{max-width:52%;color:var(--muted);font-size:var(--fs-10);line-height:1.4;text-align:right}.ui-recommend-v20{margin:0 0 12px;padding:14px;border:1px solid color-mix(in srgb,var(--success) 25%,var(--line));border-radius:18px;background:color-mix(in srgb,var(--success) 7%,var(--panel));display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px}.ui-recommend-v20>i{width:30px;height:30px;border-radius:10px;background:color-mix(in srgb,var(--success) 16%,transparent);display:grid;place-items:center;color:var(--success);font-style:normal;font-weight:950}.ui-recommend-v20 b{display:block;font-size:13px}.ui-recommend-v20 small{display:block;margin-top:4px;color:var(--muted);font-size:var(--fs-10);line-height:1.5}.ui-preview-card-v20{margin:0 0 12px;padding:15px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}.ui-preview-card-v20>small{display:block;color:var(--muted);font-size:var(--fs-8);font-weight:900;letter-spacing:.1em}.ui-preview-card-v20>div{margin-top:10px}.ui-diagnostic-link-v20{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 0;padding:14px 15px;border:1px solid var(--line);border-radius:18px;background:var(--panel);color:var(--text);text-align:left}.ui-diagnostic-link-v20 span{min-width:0}.ui-diagnostic-link-v20 b{display:block;font-size:13px}.ui-diagnostic-link-v20 small{display:block;margin-top:4px;color:var(--muted);font-size:var(--fs-10)}.ui-diagnostic-link-v20 strong{color:var(--accent);font-size:var(--fs-12);white-space:nowrap}.learning-flow-preview-v20{display:flex!important;align-items:center;justify-content:space-between;gap:5px}.learning-flow-preview-v20 span{padding:8px 9px;border-radius:11px;background:var(--surface-soft);font-size:var(--fs-10);font-weight:850}.learning-flow-preview-v20 i{color:var(--muted);font-style:normal}.settings-action-list-v20{padding:0!important;overflow:hidden}.settings-action-list-v20>button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);text-align:left}.settings-action-list-v20>button:last-child{border-bottom:0}.settings-action-list-v20 b{display:block;font-size:13px}.settings-action-list-v20 small{display:block;margin-top:4px;color:var(--muted);font-size:var(--fs-10)}.settings-action-list-v20 strong{color:var(--accent);font-size:11px;white-space:nowrap}
.diagnostics-grid-v20{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}.diagnostic-tile-v20{padding:15px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}.diagnostic-tile-v20 small{display:block;color:var(--muted);font-size:var(--fs-9)}.diagnostic-tile-v20 b{display:block;margin-top:7px;font-size:var(--fs-15)}.diagnostic-tile-v20.good b{color:var(--success)}.diagnostic-tile-v20.warn b{color:var(--state-warning)}.diagnostic-tile-v20.bad b{color:var(--danger)}
.routine-inbox-list-v20{display:grid;gap:12px}.routine-inbox-card-v20{padding:16px;border:1px solid var(--line);border-radius:20px;background:var(--panel);box-shadow:var(--shadow)}.routine-inbox-card-v20>small{color:var(--accent);font-size:var(--fs-8);font-weight:900}.inbox-cue-v20{width:100%;margin-top:9px;padding:13px;border:0;border-radius:15px;background:var(--surface-soft);color:var(--text);text-align:left}.inbox-cue-v20 span,.inbox-answer-v20 small{display:block;color:var(--muted);font-size:var(--fs-8)}.inbox-cue-v20 b{display:block;margin-top:5px;font-size:14px;line-height:1.5}.inbox-answer-v20{margin-top:9px;padding:13px;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));border-radius:15px;background:color-mix(in srgb,var(--accent) 7%,var(--panel))}.inbox-answer-v20 b{display:block;margin-top:5px;font-size:var(--fs-17);line-height:1.6}.inbox-answer-v20 span{display:block;margin-top:4px;color:var(--muted);font-size:var(--fs-10)}.routine-inbox-card-v20>div:last-child{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.recent-item-v20{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;padding:0!important;overflow:hidden}.recent-main-v20{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center;padding:14px;border:0;background:transparent;color:var(--text);text-align:left;min-width:0}.recent-practice-v20{align-self:stretch;min-width:72px;border:0;border-left:1px solid var(--line);background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent);font-size:var(--fs-10);font-weight:900}.empty-state-v20,.error-state-v20{padding:20px;border-radius:19px;text-align:center}.empty-state-v20{border:1px dashed var(--line);background:var(--panel)}.error-state-v20{border:1px solid color-mix(in srgb,var(--danger) 30%,var(--line));background:color-mix(in srgb,var(--danger) 7%,var(--panel))}.empty-state-v20 b,.error-state-v20 b{display:block;font-size:14px}.empty-state-v20 small,.error-state-v20 small{display:block;margin-top:6px;color:var(--muted);font-size:var(--fs-10);line-height:1.5}.error-state-v20 button{margin-top:12px}
.loading-actions-v20{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}.loading-overlay.failed .loader-orb{animation:none;background:linear-gradient(145deg,color-mix(in srgb,var(--danger) 70%,var(--accent)),var(--danger))}.loading-steps span.error{color:var(--danger)}.loading-steps span.error i{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 18%,transparent)}
/* scenario/mobile hierarchy */
@media(max-width:430px){.scenario-options-v19{grid-template-columns:1fr 1fr!important}.scenario-level-field{grid-column:1}.scenario-register-field{grid-column:2}.scenario-guidance-field{grid-column:1;grid-row:2}.scenario-relationship-field{grid-column:2;grid-row:2}.scenario-request-field{grid-column:1/-1;grid-row:3}.scenario-field select{font-size:var(--fs-12)!important}.scenario-field>small{min-height:0!important}.recovery-chip-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.recovery-chip-grid .chip:last-child{grid-column:1/-1}.today-focus-v20{grid-template-columns:44px minmax(0,1fr)}.today-focus-v20 button{grid-column:1/-1;width:100%}.home-review-grid-v20{grid-template-columns:1fr}.cluster-head-v20 em{display:none}.ui-summary-card-v20>div{align-items:flex-start;flex-direction:column}.ui-summary-card-v20 span{max-width:none;text-align:left}.recent-item-v20{grid-template-columns:1fr!important}.recent-practice-v20{min-height:42px;border-left:0;border-top:1px solid var(--line)}}

body{padding-bottom:calc(112px + env(safe-area-inset-bottom))}


/* Routine Speak v2.1 · compact focus and calm dark background */
body{background:var(--bg)!important;background-attachment:initial!important;position:relative;isolation:isolate}
body::before{content:"";position:fixed;z-index:-1;left:0;right:0;top:0;height:260px;pointer-events:none;background:radial-gradient(circle at 88% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 58%),linear-gradient(180deg,color-mix(in srgb,var(--bg-2) 72%,var(--bg)),transparent 100%)}
html[data-theme="dark"] body::before{height:220px;opacity:.58;background:radial-gradient(circle at 88% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 62%),linear-gradient(180deg,color-mix(in srgb,var(--bg-2) 58%,var(--bg)),transparent 100%)}
.home-cluster-v20{margin-bottom:16px}.home-learning-menu-v20 .menu-row{min-height:76px;padding-top:13px;padding-bottom:13px}.cluster-head-v20{margin-bottom:8px}.recent-section{margin-top:0}
.home-review-strip-v21{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 16px}.home-review-strip-v21>button{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:9px;align-items:center;min-height:62px;padding:10px 11px;border:1px solid var(--line);border-radius:17px;background:var(--panel);color:var(--text);text-align:left;box-shadow:var(--shadow)}.home-review-strip-v21>button>span{display:grid;width:32px;height:32px;place-items:center;border-radius:10px;background:var(--surface-soft);color:var(--accent);font-weight:900}.home-review-strip-v21 small{display:block;color:var(--accent);font-size:7px;font-weight:950;letter-spacing:.12em}.home-review-strip-v21 b{display:block;margin-top:2px;font-size:var(--fs-12);white-space:nowrap}.home-review-strip-v21 strong{color:var(--accent);font-size:8.5px;white-space:nowrap}
.recent-item-v21{padding:0!important;overflow:hidden}.recent-main-v21{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:9px;align-items:center;padding:12px 13px;border:0;background:transparent;color:var(--text);text-align:left}.recent-main-v21 .kind{display:grid;width:34px;height:34px;place-items:center;border-radius:11px;background:var(--surface-soft);color:var(--accent);font-weight:900}.recent-main-v21 b{display:block;font-size:var(--fs-12);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recent-main-v21 small{display:block;margin-top:3px;color:var(--muted);font-size:8.5px}.recent-main-v21 em{padding:4px 7px;border-radius:99px;background:var(--accent-soft);color:var(--accent);font-style:normal;font-size:7.5px;font-weight:900;white-space:nowrap}.recent-main-v21 strong{font-size:var(--fs-9);white-space:nowrap}
.learning-settings-head-v21{margin-bottom:10px}.learning-settings-hero-v21{margin-bottom:11px;padding:17px;border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line));border-radius:22px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 13%,var(--panel)),var(--panel));box-shadow:var(--shadow)}.learning-settings-title-v21 small{color:var(--accent);font-size:var(--fs-8);font-weight:950;letter-spacing:.14em}.learning-settings-title-v21 b{display:block;margin-top:7px;font-size:var(--fs-20);line-height:1.22}.learning-settings-title-v21 span{display:block;margin-top:5px;color:var(--muted);font-size:9.5px}.learning-default-chips-v21{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}.learning-default-chips-v21 span{padding:6px 9px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:99px;background:var(--panel);color:var(--text);font-size:var(--fs-9);font-weight:850}.learning-edit-primary-v21{width:100%;margin-top:13px;min-height:46px}.learning-flow-card-v21{margin-bottom:10px;padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}.learning-flow-card-v21>small{color:var(--accent);font-size:var(--fs-8);font-weight:900}.learning-flow-card-v21>div{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:9px}.learning-flow-card-v21>div span{padding:7px 8px;border-radius:10px;background:var(--surface-soft);font-size:8.5px;font-weight:850}.learning-flow-card-v21>div i{color:var(--muted);font-style:normal}.learning-flow-card-v21 p{margin:9px 0 0;color:var(--muted);font-size:var(--fs-9);line-height:1.5}.learning-review-link-v21{width:100%;display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;margin-bottom:10px;padding:13px;border:1px solid var(--line);border-radius:18px;background:var(--panel);color:var(--text);text-align:left}.learning-review-link-v21>span{display:grid;width:36px;height:36px;place-items:center;border-radius:11px;background:var(--surface-soft);color:var(--accent);font-weight:900}.learning-review-link-v21 b{display:block;font-size:13px}.learning-review-link-v21 small{display:block;margin-top:3px;color:var(--muted);font-size:var(--fs-9)}.learning-review-link-v21 strong{color:var(--accent);font-size:var(--fs-9)}.learning-diagnostic-v21{margin-top:0}
@media(max-width:430px){.home-review-strip-v21{grid-template-columns:1fr}.home-review-strip-v21>button{min-height:56px}.recent-main-v21{grid-template-columns:auto minmax(0,1fr) auto}.recent-main-v21 em{display:none}.learning-flow-card-v21>div span{padding:7px 5px;font-size:7.8px}}


/* Routine Speak v2.3 · stable home recent cards and one-action review strip */
.home-review-strip-v21{grid-template-columns:1fr!important}
.recent-card-v22{display:block;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow)}
.recent-main-v22{width:100%;min-width:0;display:grid;grid-template-columns:42px minmax(0,1fr) auto 12px;gap:11px;align-items:center;padding:15px;border:0;background:transparent;color:var(--text);text-align:left}
.recent-main-v22 .kind{display:grid;width:42px;height:42px;place-items:center;border-radius:14px;background:var(--surface-soft);color:var(--accent);font-size:var(--fs-15);font-weight:900}
.recent-copy-v22{display:block;min-width:0}
.recent-copy-v22 b{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;line-height:1.35}
.recent-copy-v22 small{display:flex;align-items:center;gap:6px;margin-top:5px;color:var(--muted);font-size:var(--fs-9);line-height:1.35;white-space:nowrap}
.recent-copy-v22 small i{font-style:normal;opacity:.55}
.recent-main-v22 em{padding:5px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-style:normal;font-size:var(--fs-8);font-weight:900;white-space:nowrap}
.recent-main-v22>strong{color:var(--accent);font-size:13px}
@media(max-width:390px){
  .recent-main-v22{grid-template-columns:38px minmax(0,1fr) 10px;padding:13px;gap:10px}
  .recent-main-v22 .kind{width:38px;height:38px;border-radius:13px}
  .recent-main-v22 em{display:none}
  .recent-copy-v22 b{font-size:var(--fs-12)}
  .recent-copy-v22 small{font-size:8.5px}
}


/* ===== v2.3 UI 통일 — 타입·간격 스케일 =====
   원칙: 밀도는 유지하고 역할별 크기를 2단계 라벨·1단계 행제목·1단계 보조설명으로 수렴 */
:root {
  --fs-label: 8px;    /* 클러스터·스트립 마이크로 라벨 */
  --fs-micro: 9px;    /* eyebrow */
  --fs-caption: 10px; /* 행 보조 설명 */
  --fs-item: 15px;    /* 행 제목 */
  --flow-gap: 18px;   /* 홈 섹션 사이 공통 리듬 */
}
.eyebrow { font-size: var(--fs-micro); }
/* 복습 스트립에 버튼이 하나면 반쪽짜리 칸 대신 전체 폭 사용 */
.home-review-strip-v21 > button:only-child { grid-column: 1 / -1; }

/* 빈 상태 문구가 남기는 유령 여백 제거 (학습 흐름 방해 요소) */
.status:empty { min-height: 0; margin: 0; }

/* 활성 카드로 스크롤할 때 세션 헤더에 가리지 않도록 */
.shadow-card { scroll-margin-top: 84px; }

/* 학습 툴바 버튼 높이·글자 통일 (같은 줄에서 들쭉날쭉 방지) */
.shadow-toolbar button { min-height: 40px; font-size: 11px; }
.shadow-toolbar button.primary { font-size:var(--fs-12); }

/* 키보드·스위치 컨트롤 포커스 링 통일 (보강) */
:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 72%, transparent);
  outline-offset: 2px;
}


/* ===== v2.4 타입 역할 통일 — 밀도 유지, 미세 크기 수렴 =====
   역할 사다리: 화면 제목 25 / 클러스터 20 / 서브 화면 18 / 패널 17 / 카드 15
   행 버튼 제목 15 / 목록 행 제목 12 / 보조 10 / 라벨 9 / 마이크로 8 */

/* 7.5px 5곳 → 마이크로 8px */
.mission-live > div small,
.mission-result > em,
.shadow-training-bar small,
.scenario-field > small,
.recent-main-v21 em { font-size: var(--fs-label); }

/* 8.5px 4곳 → 라벨 9px */
.recent-main-v21 small,
.learning-flow-card-v21 > div span,
.home-review-strip-v21 strong,
.recent-copy-v22 small { font-size: var(--fs-micro); }

/* 9.5px → 보조 10px */
.learning-settings-title-v21 span { font-size: var(--fs-caption); }

/* 행 버튼 계열 제목 통일: learning-review-link도 메뉴 행과 같은 문법(15/10) */
.learning-review-link-v21 b { font-size: var(--fs-item); }
.learning-review-link-v21 small,
.learning-review-link-v21 strong { font-size: var(--fs-caption); }


/* ROUTINE SUITE 2.1 · SETTINGS UX ONLY */
.settings-category-v21{margin-top:22px}
.settings-category-head-v21{display:flex;align-items:flex-end;justify-content:space-between;margin:0 2px 8px;gap:12px}
.settings-category-head-v21>div{min-width:0;display:grid;gap:3px}
.settings-category-head-v21 b{font-size:14px;line-height:1.3;letter-spacing:-.02em}
.settings-category-head-v21 small{color:var(--muted);font-size:11px;line-height:1.4;overflow-wrap:anywhere}
.settings-menu-v21{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--panel);box-shadow:var(--shadow-soft)}
.settings-menu-v21 .menu-row{width:100%;min-height:66px;height:auto;margin:0;border:0;border-radius:0;border-bottom:1px solid var(--line);background:transparent;padding:13px 14px;align-items:center;text-align:left}
.settings-menu-v21 .menu-row:last-child{border-bottom:0}
.settings-menu-v21 .menu-row>span:nth-child(2){min-width:0;flex:1}
.settings-menu-v21 .menu-row strong,.settings-menu-v21 .menu-row small{white-space:normal;overflow-wrap:anywhere}
.settings-menu-v21 .menu-row small{line-height:1.42}
.settings-accordion-v21{margin:12px 0;border:1px solid var(--line);border-radius:18px;background:var(--panel);box-shadow:var(--shadow-soft);overflow:hidden;height:auto!important;max-height:none!important}
.settings-accordion-v21>summary{display:flex;align-items:center;gap:12px;min-height:66px;height:auto;padding:14px 15px;cursor:pointer;list-style:none}
.settings-accordion-v21>summary::-webkit-details-marker{display:none}
.settings-accordion-v21>summary span{min-width:0;flex:1;display:grid;gap:3px}
.settings-accordion-v21>summary b{font-size:14px;line-height:1.35;white-space:normal;overflow-wrap:anywhere}
.settings-accordion-v21>summary small{color:var(--muted);font-size:11px;line-height:1.42;white-space:normal;overflow-wrap:anywhere}
.settings-accordion-v21>summary i{font-style:normal;color:var(--muted);transition:transform .2s ease;flex:0 0 auto}
.settings-accordion-v21[open]>summary{border-bottom:1px solid var(--line)}
.settings-accordion-v21[open]>summary i{transform:rotate(90deg)}
.settings-accordion-body-v21{padding:12px;height:auto!important;max-height:none!important;overflow:visible}
.settings-accordion-body-v21>.setting-section{margin:0 0 12px}
.settings-accordion-body-v21>.setting-section:last-child{margin-bottom:0}
.settings-accordion-body-v21 .compact-panel{box-shadow:none}
.settings-accordion-body-v21 .toggle-line,.settings-accordion-body-v21 .compact-select-line,.settings-accordion-body-v21 .voice-summary-button,.settings-accordion-body-v21 .model-summary-button{min-height:56px;height:auto}
.settings-accordion-body-v21 .toggle-line>span,.settings-accordion-body-v21 .compact-select-line>span,.settings-accordion-body-v21 .voice-summary-button>span,.settings-accordion-body-v21 .model-summary-button>span{min-width:0}
.settings-accordion-body-v21 b,.settings-accordion-body-v21 small,.settings-accordion-body-v21 em,.settings-accordion-body-v21 p{overflow-wrap:anywhere}
.review-assist-v21{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.review-assist-v21 button{min-width:0;height:42px;padding:0 6px}
.review-recovery-v21{display:flex;flex-wrap:wrap;gap:7px}
.setting-info-list-v21{display:grid;gap:0;padding:0;overflow:hidden}
.setting-info-list-v21>div{display:grid;gap:3px;padding:13px 14px;border-bottom:1px solid var(--line)}
.setting-info-list-v21>div:last-child{border-bottom:0}
.setting-info-list-v21 b{font-size:13px}
.setting-info-list-v21 small{color:var(--muted);font-size:11px;line-height:1.45}
.ai-save-body-v21>.primary{width:100%;margin-top:0}
@media(max-width:390px){
  .settings-menu-v21 .menu-row{min-height:62px;padding:12px}
  .settings-accordion-v21>summary{min-height:62px;padding:13px}
  .settings-accordion-body-v21{padding:10px}
  .review-assist-v21{grid-template-columns:1fr}
  .settings-accordion-body-v21 .engine-segments,.settings-accordion-body-v21 .profile-segments{grid-template-columns:repeat(2,minmax(0,1fr))}
  .settings-accordion-body-v21 .task-route-list{grid-template-columns:1fr}
}
@media(min-width:600px){
  .settings-category-v21,.settings-accordion-v21{max-width:760px;margin-left:auto;margin-right:auto}
}


/* PWA component 2.5.2 hotfix: reliable iOS checkbox switches */
.toggle-line input[type="checkbox"],
.switch input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 46px;
  min-width: 46px;
  height: 28px;
  margin: 0;
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 999px;
  background-color: var(--surface-soft);
  background-image: radial-gradient(circle at 14px 13px, #ffffff 0 9.5px, transparent 10px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, background-image .18s ease;
  vertical-align: middle;
}
.toggle-line input[type="checkbox"]:checked,
.switch input[type="checkbox"]:checked {
  border-color: var(--accent);
  background-color: var(--accent);
  background-image: radial-gradient(circle at 32px 13px, #ffffff 0 9.5px, transparent 10px);
}
.toggle-line input[type="checkbox"]:focus-visible,
.switch input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--accent-soft);
  outline-offset: 2px;
}
.toggle-line input[type="checkbox"]:disabled,
.switch input[type="checkbox"]:disabled { opacity: .45; cursor: default; }
.switch { display: inline-flex; align-items: center; flex: 0 0 auto; }
.switch > span { display: none; }
.compact-select-line select {
  min-height: 42px;
  color: var(--text);
  background-color: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 0 34px 0 12px;
  font-size:var(--fs-12);
  line-height: 1.25;
}
.diagnostic-tile-v20.ok b { color: var(--success); }
.diagnostic-tile-v20.error b { color: var(--danger); }


/* Routine Suite 2.4.5 · shared theme / typography / speaking polish */
:root{
  --p0:#dce4ef;--p1:#acd5f2;--p2:#7fa8c9;--p3:#527ba0;--p4:#254e77;
  --fs-micro:9px;--fs-caption:11px;--fs-label:12px;--fs-body:14px;--fs-item:16px;--fs-section:19px;--fs-title:24px;--fs-display:32px;--fs-numeric:28px;
  --warning:#c48216;--premium:#8d58df;--ai-accent:var(--accent);
  --bg:color-mix(in srgb,var(--p0) 30%,#f7f8fa);--bg-2:color-mix(in srgb,var(--p1) 50%,#eef2f6);
  --accent:var(--p3);--accent-2:var(--p2);--accent-soft:color-mix(in srgb,var(--p2) 18%,transparent);
}
html[data-theme="dark"]{
  --bg:color-mix(in srgb,var(--p0) 68%,#0b0e0d);--bg-2:color-mix(in srgb,var(--p1) 62%,#111513);
  --surface:color-mix(in srgb,var(--p0) 34%,#161b18);--surface-solid:color-mix(in srgb,var(--p0) 24%,#181d1a);--surface-soft:color-mix(in srgb,var(--p1) 28%,#1c221e);
  --accent:var(--p4);--accent-2:var(--p3);--accent-soft:color-mix(in srgb,var(--p4) 18%,transparent);--ai-accent:var(--p4);
}
html[data-jp-font="mincho"]{--jp-font:"Hiragino Mincho ProN","Yu Mincho",serif}
html[data-jp-font="maru"]{--jp-font:"Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif}
.theme-palette-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding-top:4px}
.theme-palette-card{min-height:82px;padding:11px;border:1px solid var(--line);border-radius:17px;background:var(--surface);color:var(--text);text-align:left;box-shadow:none}
.theme-palette-card>span{display:grid;grid-template-columns:repeat(5,1fr);height:18px;overflow:hidden;border-radius:8px;margin-bottom:9px}
.theme-palette-card i{display:block;background:var(--swatch)}.theme-palette-card b{display:block;font-size:var(--fs-label);line-height:1.25}.theme-palette-card small{display:block;margin-top:3px;color:var(--muted);font-size:var(--fs-micro)}
.theme-palette-card.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.font-preview-mincho{font-family:"Hiragino Mincho ProN","Yu Mincho",serif!important}.font-preview-maru{font-family:"Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif!important}
.shadow-ko-brief{margin:7px 0 0;color:var(--muted);font-size:var(--fs-caption);line-height:1.55}.pron-ready-chip em{margin-left:4px;padding:2px 5px;border-radius:99px;background:var(--accent-soft);color:var(--accent);font-size:var(--fs-8);font-style:normal}
.diagnostics-grid-v20{grid-template-columns:repeat(2,minmax(0,1fr))}.diagnostic-tile-v20{min-height:74px}
.loading-card .loader-orb,.loading-overlay .loader-orb{background:linear-gradient(145deg,color-mix(in srgb,var(--ai-accent) 88%,white),var(--ai-accent))}
@media(max-width:390px){.theme-palette-grid{grid-template-columns:1fr}.font-choice-grid{grid-template-columns:1fr}.diagnostics-grid-v20{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.loader-orb,.busy-orb{animation-duration:.01ms!important;animation-iteration-count:1!important}.view{animation:none!important}}

.loading-overlay[data-loading-kind="utility"] .loader-orb{width:70px;height:42px;border-radius:14px;background:linear-gradient(90deg,var(--surface-soft) 0 28%,color-mix(in srgb,var(--accent) 24%,var(--surface-soft)) 45% 55%,var(--surface-soft) 72% 100%);background-size:220% 100%;animation:utility-skeleton 1.25s ease-in-out infinite;box-shadow:none}
.loading-overlay[data-loading-kind="utility"] .loader-orb i{display:none}
.loading-overlay[data-loading-kind="utility"] .eyebrow{color:var(--muted)}
@keyframes utility-skeleton{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media(prefers-reduced-motion:reduce){.loading-overlay[data-loading-kind="utility"] .loader-orb{animation:none}}

/* v2.4.6 */
.speed-row-label{align-self:center;margin-right:2px;color:var(--muted);font-size:var(--fs-10);font-weight:700}
.shadow-speed-row{margin-top:2px}
.pitch-accent-card{margin-top:12px;padding:12px 13px;border:1px solid var(--line);border-radius:14px;background:var(--card-solid)}
.pitch-accent-head{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.pitch-accent-head small{color:var(--muted);font-size:var(--fs-9);font-weight:700}
.pitch-accent-head b{font-size:var(--fs-12)}
.pitch-accent-head em{margin-left:auto;font-style:normal;color:var(--muted);font-size:var(--fs-8);border:1px solid var(--line);border-radius:99px;padding:2px 7px}
.pitch-accent-scroll{overflow-x:auto;padding-bottom:2px}
.pitch-accent-scroll svg{display:block}
.pitch-accent-scroll polyline{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pitch-accent-scroll circle{fill:var(--accent)}
.pitch-accent-scroll circle.lo{fill:var(--card-solid);stroke:var(--accent);stroke-width:2}
.pitch-accent-kana{display:flex}
.pitch-accent-kana span{flex:0 0 30px;text-align:center;font-size:var(--fs-12);color:var(--text)}
.pitch-accent-kana span:first-child{margin-left:-1px}


/* Suite 2.5.5 — pronunciation voice contour beta */
.pronunciation-analysis-setting-v255{margin-bottom:10px}
.intonation-analysis-card{margin:13px 0;padding:13px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:17px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 7%,var(--panel)),var(--panel));overflow:hidden}
.intonation-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.intonation-card-head small{display:block;color:var(--accent);font-size:var(--fs-8);font-weight:950;letter-spacing:.12em}
.intonation-card-head h3{margin:4px 0 0;font-size:var(--fs-14)}
.intonation-card-head>span{flex:0 0 auto;padding:4px 7px;border:1px solid var(--line);border-radius:99px;color:var(--muted);font-size:var(--fs-8);font-weight:800}
.intonation-summary{margin:10px 0;color:var(--text);font-size:var(--fs-10);line-height:1.55}
.intonation-chart-wrap{padding:8px 7px 6px;border:1px solid var(--line);border-radius:14px;background:var(--surface-solid);overflow:hidden}
.intonation-chart{display:block;width:100%;height:auto;min-height:112px}
.intonation-chart path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:3}
.intonation-reference{stroke:var(--accent)}
.intonation-user{stroke:var(--success);opacity:.9}
.intonation-midline{stroke:var(--line);stroke-width:1;stroke-dasharray:4 5}
.intonation-analysis-card.hide-user-contour .intonation-user{display:none}
.intonation-mora-row{display:flex;align-items:center;justify-content:space-around;gap:2px;overflow:hidden;padding:2px 3px 0}
.intonation-mora-row span{min-width:0;color:var(--muted);font-size:var(--fs-8);text-align:center;white-space:nowrap}
.intonation-legend{display:flex;gap:13px;align-items:center;margin-top:8px;color:var(--muted);font-size:var(--fs-8);font-weight:800}
.intonation-legend span{display:inline-flex;align-items:center;gap:5px}
.intonation-legend i{width:14px;height:3px;border-radius:99px;background:var(--accent)}
.intonation-legend .user i{background:var(--success)}
.intonation-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:10px}
.intonation-actions button{min-height:38px;padding:8px 5px;font-size:var(--fs-9)}
.intonation-note,.intonation-error{margin:9px 0 0;color:var(--muted);font-size:var(--fs-8);line-height:1.55}
.intonation-error{color:var(--danger);font-size:var(--fs-9)}
.intonation-loading{display:flex;gap:10px;align-items:center;margin-top:12px;padding:11px;border-radius:13px;background:var(--surface-soft)}
.intonation-loading>i{width:18px;height:18px;flex:0 0 auto;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .85s linear infinite}
.intonation-loading p{margin:0}.intonation-loading b{display:block;font-size:var(--fs-9)}.intonation-loading small{display:block;margin-top:3px;color:var(--muted);font-size:var(--fs-8);line-height:1.45}
@media(max-width:380px){.intonation-actions{grid-template-columns:1fr 1fr}.intonation-actions button:last-child{grid-column:1/-1}.intonation-mora-row span{font-size:7.5px}}