:root {
  --bg: #f64c25;          /* 비비드 오렌지 배경 */
  --bg-2: #ff6a3d;
  --ink: #16130f;         /* near-black */
  --card: #16130f;        /* 블랙 카드 */
  --card-soft: #211d18;
  --cream: #f6efe4;       /* 카드 위 밝은 텍스트 */
  --teal: #16c5b9;        /* 포인트 1 */
  --yellow: #ffd23f;      /* 포인트 2 */
  --green: #34d27b;       /* 정답 하이라이트 */
  --pink: #ff8fb1;
  --muted: #b8b0a4;
  --danger: #ff5a5a;
  --paper: #fffaf2;              /* 메인 카드 — 크림 종이 */
  --ink-soft: rgba(22,19,15,0.62);
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 6px 6px 0 rgba(0,0,0,0.22);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.hidden { display: none !important; }

/* 인앱 브라우저(카카오톡 등) 음성 안내 배너 */
.inapp-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--ink); color: var(--cream);
  padding: 10px 14px; font-size: 13px; font-weight: 600;
  position: sticky; top: 0; z-index: 50;
}
.inapp-msg { flex: 1; min-width: 180px; line-height: 1.4; }
.inapp-btns { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.inapp-open {
  border: none; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 13px;
  background: var(--yellow); color: var(--ink); padding: 8px 14px; border-radius: 999px; white-space: nowrap;
}
.inapp-x {
  border: none; cursor: pointer; background: rgba(246,239,228,0.14); color: var(--cream);
  width: 30px; height: 30px; border-radius: 8px; font-size: 14px;
}

/* --page를 색상으로 등록하면 배경 전환이 부드럽게 애니메이션됨 */
@property --page {
  syntax: "<color>";
  inherits: true;
  initial-value: #f64c25;
}

/* ===== flat 아이콘 공통 ===== */
.icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  display: inline-block;
  vertical-align: -0.18em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn .icon, .tab .icon { margin-right: 2px; }
/* 아이콘+텍스트 버튼/라벨 정렬 */
.btn { display: inline-flex; align-items: center; gap: 5px; }
label.btn { cursor: pointer; }

/* ===== 영역별 테마 색상 ===== */
#listening { --area: #16c5b9; }   /* 듣기 — 틸 */
#speaking  { --area: #ffd23f; }   /* 말하기 — 옐로 */
#pronun    { --area: #4dd4ff; }   /* 발음 — 스카이 */
#writing   { --area: #ff85a1; }   /* 쓰기 — 핑크 */
#reading   { --area: #8b9bff; }   /* 읽기 — 블루 */
#word      { --area: #b08bff; }   /* 단어 — 바이올렛 */
#materials { --area: #ff8359; }   /* 교재 — 코랄 */
#dashboard { --area: #ffa94d; }   /* 내 학습 — 앰버 */
#manage    { --area: #34d27b; }   /* 관리 — 그린 */

body {
  margin: 0;
  font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  --page: var(--bg);
  background:
    radial-gradient(circle at 84% 6%, rgba(255,255,255,0.22), transparent 44%),
    radial-gradient(circle at 6% 96%, rgba(0,0,0,0.14), transparent 46%),
    var(--page);
  background-attachment: fixed;
  transition: --page 0.45s ease;
}

/* 영역 대표색 — 배경(--page)과 메인의 바로가기 카드가 같은 색을 쓴다 */
:root {
  --c-listening: #16c5b9;
  --c-speaking:  #ffd23f;
  --c-pronun:    #4dd4ff;
  --c-writing:   #ff85a1;
  --c-reading:   #8b9bff;
  --c-word:      #b08bff;
  --c-materials: #ff8359;
  --c-home:      #ffd23f;
}

/* 영역별 배경색 — 탭 전환 시 body[data-area]가 바뀌며 화면 전체 색이 전환됨 */
body[data-area="home"]      { --page: #f7a072; }   /* 메인 — 살구 */
body[data-area="listening"] { --page: #16c5b9; }   /* 듣기 — 틸 */
body[data-area="speaking"]  { --page: #ffd23f; }   /* 말하기 — 옐로 */
body[data-area="pronun"]    { --page: #4dd4ff; }   /* 발음 — 스카이 */
body[data-area="writing"]   { --page: #ff85a1; }   /* 쓰기 — 핑크 */
body[data-area="reading"]   { --page: #8b9bff; }   /* 읽기 — 블루 */
body[data-area="word"]      { --page: #b08bff; }   /* 단어 — 바이올렛 */
body[data-area="materials"] { --page: #ff8359; }   /* 교재 — 코랄 */
body[data-area="dashboard"] { --page: #ffa94d; }   /* 내 학습 — 앰버 */
body[data-area="manage"]    { --page: #34d27b; }   /* 관리 — 그린 */

/* 헤더 */
.app-header {
  padding: 22px 24px 18px;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--page);
  transition: --page 0.45s ease;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand .logo {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--ink);
  color: var(--yellow);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.brand .logo .icon { width: 24px; height: 24px; }
.brand h1 {
  font-family: "Archivo", sans-serif;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.5px;
  margin: 0;
  color: var(--ink);
  text-transform: uppercase;
}
.brand h1::after {
  content: "•";
  color: var(--yellow);
  margin-left: 4px;
}

/* 탭 */
.tabs { display: flex; gap: 10px; flex-wrap: wrap; order: 3; flex-basis: 100%; margin-top: 16px; }
.tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  padding: 9px 16px;
  border-radius: 999px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease;
}
.tab:hover { transform: translateY(-2px); }
/* 비활성 탭은 아이콘만 영역색으로 컬러 코딩 */
.tab[data-tab="listening"] .icon { color: #0e9a90; }
.tab[data-tab="speaking"]  .icon { color: #c69400; }
.tab[data-tab="pronun"]    .icon { color: #1795c9; }
.tab[data-tab="writing"]   .icon { color: #e35d7d; }
.tab[data-tab="reading"]   .icon { color: #5a6ddb; }
/* 활성 탭은 블랙으로 — 컬러 배경 위에서 또렷하게 대비 */
.tab.active { background: var(--ink); color: var(--cream); box-shadow: var(--shadow); }
.tab.active .icon { color: var(--cream); }

/* 본문 */
.content { flex: 1; padding: 26px 24px 40px; max-width: 860px; margin: 0 auto; width: 100%; }

.panel { display: none; animation: fade 0.3s ease; }
.panel.active { display: block; }

/* #/book/... 직접 진입 (js/boot.js가 <html data-boot>을 설정) — 첫 페인트부터 교재 탭.
   app.js의 switchTab()이 실제 클래스를 적용하면서 data-boot을 지운다.
   마크업의 기본 활성 패널(#home)이 무엇이든 덮도록 .panel 전체를 끄고 교재만 켠다. */
html[data-boot="materials"] .panel { display: none; }
html[data-boot="materials"] #materials.panel { display: block; animation: none; }
html[data-boot="materials"] body { --page: #ff8359; }   /* 배경색도 교재(코랄)로 — 색이 튀지 않게 */
html[data-boot="materials"] .tab.active { background: transparent; color: var(--ink); box-shadow: none; }
html[data-boot="materials"] .tab.active .icon { color: var(--c-home); }
html[data-boot="materials"] .tab[data-tab="materials"] { background: var(--ink); color: var(--cream); box-shadow: var(--shadow); }
html[data-boot="materials"] .tab[data-tab="materials"] .icon { color: var(--cream); }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: "Archivo", sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 6.5vw, 44px);
  line-height: 0.95;
  letter-spacing: -1px;
  text-transform: uppercase;
  margin: 0 0 10px;
  color: var(--ink);
}
.h2-ic {
  flex: none;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--ink);
  color: var(--area);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.h2-ic .icon { width: 28px; height: 28px; stroke-width: 2.2; }
.hint {
  color: rgba(22,19,15,0.8);
  margin: 0 0 22px;
  font-size: 15px;
  font-weight: 600;
  max-width: 42ch;
}

/* 카드 */
.card {
  background: var(--card);
  color: var(--cream);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
}

/* 버튼 */
.btn {
  border: none;
  border-radius: 12px;
  padding: 12px 20px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  background: var(--area, var(--teal));
  color: var(--ink);
  transition: transform 0.1s, filter 0.15s;
}
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.97); }
.btn.ghost { background: rgba(246,239,228,0.12); color: var(--cream); }
.btn.success { background: var(--area, var(--green)); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 20px; }

/* 입력 */
input[type="text"], textarea {
  width: 100%;
  background: var(--card-soft);
  border: 2px solid rgba(246,239,228,0.16);
  border-radius: 14px;
  color: var(--cream);
  padding: 14px 16px;
  font-size: 16px;
  font-family: inherit;
}
input[type="text"]::placeholder, textarea::placeholder { color: var(--muted); }
input[type="text"]:focus, textarea:focus { outline: none; border-color: var(--area, var(--yellow)); }
textarea { min-height: 100px; resize: vertical; }

/* 피드백 */
.feedback { margin-top: 18px; padding: 14px 16px; border-radius: 14px; font-size: 15px; line-height: 1.55; font-weight: 500; }
.feedback.ok { background: rgba(52,210,123,0.18); color: var(--green); }
.feedback.no { background: rgba(255,90,90,0.16); color: var(--danger); }
.feedback.neutral { background: rgba(255,210,63,0.16); color: var(--yellow); }

.progress { font-size: 13px; color: var(--muted); margin-bottom: 14px; }

.speed-control { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); font-weight: 500; }
.speed-control #l-speed-val {
  min-width: 38px;
  text-align: center;
  color: var(--area, var(--teal));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ===== 커스텀 속도 슬라이더 ===== */
input[type="range"].speed {
  -webkit-appearance: none;
  appearance: none;
  width: 150px;
  height: 22px;
  background: transparent;
  cursor: pointer;
}
input[type="range"].speed:focus { outline: none; }

/* 트랙 — 채워진 부분은 영역색, 나머지는 옅은 트랙 */
input[type="range"].speed::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background:
    linear-gradient(var(--area, var(--teal)), var(--area, var(--teal))) 0 / var(--fill, 50%) 100% no-repeat,
    rgba(246,239,228,0.16);
}
input[type="range"].speed::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(246,239,228,0.16);
}
input[type="range"].speed::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--area, var(--teal));
}

/* 썸 — 크림색 원에 영역색 테두리 */
input[type="range"].speed::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--cream);
  border: 3px solid var(--area, var(--teal));
  box-shadow: 0 2px 7px rgba(0,0,0,0.4);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
input[type="range"].speed::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--cream);
  border: 3px solid var(--area, var(--teal));
  box-shadow: 0 2px 7px rgba(0,0,0,0.4);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
input[type="range"].speed:hover::-webkit-slider-thumb { transform: scale(1.15); }
input[type="range"].speed:active::-webkit-slider-thumb {
  transform: scale(1.15);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--area, var(--teal)) 28%, transparent);
}
input[type="range"].speed:hover::-moz-range-thumb { transform: scale(1.15); }
input[type="range"].speed:active::-moz-range-thumb {
  transform: scale(1.15);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--area, var(--teal)) 28%, transparent);
}

/* 읽기 지문 */
.passage { line-height: 1.95; font-size: 17px; margin-bottom: 20px; color: var(--cream); }
.passage .word { cursor: pointer; border-radius: 5px; padding: 0 2px; transition: background 0.1s; }
.passage .word:hover { background: var(--area, var(--teal)); color: var(--ink); }

.question { margin-top: 26px; padding-top: 24px; border-top: 1px dashed rgba(246,239,228,0.16); }
.question p { font-weight: 700; margin: 0 0 14px; color: var(--cream); font-size: 16px; }
.options { display: flex; flex-direction: column; gap: 10px; }
.option {
  text-align: left;
  background: var(--card-soft);
  border: 2px solid rgba(246,239,228,0.12);
  color: var(--cream);
  padding: 13px 16px;
  border-radius: 14px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  transition: transform 0.1s, border-color 0.15s;
}
.option:hover { border-color: var(--area, var(--yellow)); transform: translateX(3px); }
.option.correct { background: rgba(52,210,123,0.22); border-color: var(--green); color: var(--green); }
.option.wrong { background: rgba(255,90,90,0.2); border-color: var(--danger); color: var(--danger); }

.card h3 {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 22px;
  margin: 0 0 14px;
  color: var(--area, var(--yellow));
  text-transform: uppercase;
  letter-spacing: -0.3px;
}

/* 푸터 */
.app-footer {
  text-align: center;
  padding: 18px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}
.app-footer strong {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  padding: 2px 10px;
  margin-left: 4px;
  background: var(--ink);
  color: var(--yellow);
  border-radius: 999px;
  font-family: "Archivo", sans-serif;
}

/* 카드 내부 강조 텍스트 */
.korean { font-size: 18px; color: var(--area, var(--teal)); margin-bottom: 6px; font-weight: 600; }
.big-sentence {
  font-family: "Archivo", sans-serif;
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin: 10px 0 6px;
  color: var(--cream);
}
/* 말하기 가라오케 하이라이트 */
.big-sentence.karaoke .kw {
  color: rgba(246,239,228,0.45);
  border-radius: 6px; padding: 0 3px;
  transition: color 0.18s ease, background 0.18s ease, transform 0.12s ease;
  display: inline-block;
}
.big-sentence.karaoke .kw.matched {
  color: var(--ink);
  background: var(--green);
  transform: translateY(-1px);
}
.big-sentence.karaoke.listening { box-shadow: none; }
.big-sentence.karaoke.listening::after {
  content: "● REC"; font-family: "Space Grotesk", sans-serif; font-size: 11px; font-weight: 700;
  color: var(--danger); margin-left: 8px; vertical-align: middle; animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0.25; } }
.karaoke-hint { color: var(--muted); font-size: 13px; margin: 14px 0 0; font-weight: 500; }
.attempt-meta { display: inline-block; margin-left: 8px; font-size: 12px; color: var(--muted); font-weight: 600; }

.transcript { color: var(--muted); font-size: 14px; margin-top: 10px; min-height: 20px; font-weight: 500; }
.warn { color: var(--yellow); font-size: 13px; margin-top: 12px; font-weight: 500; }
.warn .icon { vertical-align: -0.2em; }

/* ===== 문제 관리(콘텐츠) 화면 ===== */
.manage-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.stat {
  flex: 1 1 100px;
  background: var(--card-soft);
  border-radius: 16px;
  padding: 14px 16px;
  text-align: center;
}
.stat-num {
  display: block;
  font-family: "Archivo", sans-serif;
  font-weight: 900;
  font-size: 30px;
  line-height: 1;
  color: var(--area, var(--green));
}
.stat-label { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); font-weight: 600; }

.mgr-msg {
  margin: 14px 0 0;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  min-height: 0;
  transition: all 0.2s;
}
.mgr-msg.show { padding: 10px 14px; border-radius: 12px; }
.mgr-msg.ok  { background: rgba(52,210,123,0.18); color: var(--green); }
.mgr-msg.err { background: rgba(255,90,90,0.16); color: var(--danger); }

.mgr-section { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(246,239,228,0.1); }
.mgr-section h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 17px;
  margin: 0 0 14px;
  color: var(--cream);
  text-transform: uppercase;
  letter-spacing: -0.2px;
}
.mgr-section h4 .icon { color: var(--area, var(--green)); }
.muted-count { font-family: "Space Grotesk", sans-serif; font-weight: 500; font-size: 12px; color: var(--muted); text-transform: none; letter-spacing: 0; }

.mgr-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.mgr-form .btn { align-self: flex-start; }

/* 추가 문장 일괄 선택/삭제 도구 */
.mgr-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.tools-spacer { flex: 1; }
.check-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cream);
  cursor: pointer;
}
.check-all input { width: 18px; height: 18px; accent-color: var(--area, var(--green)); cursor: pointer; }
.btn.danger { background: rgba(255,90,90,0.16); color: var(--danger); }
.btn.danger:hover { filter: none; background: rgba(255,90,90,0.28); }

.mgr-list { display: flex; flex-direction: column; gap: 8px; }
.mgr-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card-soft);
  border-radius: 12px;
  padding: 11px 14px;
}
.sel-sentence { width: 18px; height: 18px; flex: none; accent-color: var(--area, var(--green)); cursor: pointer; }
.sel-spacer { width: 18px; flex: none; }
.mgr-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mgr-en { color: var(--cream); font-weight: 600; font-size: 15px; word-break: break-word; }
.mgr-ko { color: var(--muted); font-size: 13px; word-break: break-word; }
.mgr-meta { display: flex; align-items: center; gap: 8px; flex: none; }

.tag {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.tag.base { background: rgba(246,239,228,0.12); color: var(--muted); }
.tag.mine { background: var(--area, var(--green)); color: var(--ink); }
.why-tag { display: inline-block; vertical-align: middle; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--area, #ff8359); color: var(--ink); white-space: nowrap; margin-left: 4px; }

.icon-btn {
  border: none;
  background: rgba(255,90,90,0.14);
  color: var(--danger);
  width: 32px; height: 32px;
  border-radius: 10px;
  display: grid; place-items: center;
  cursor: pointer;
  flex: none;
  transition: background 0.15s, transform 0.1s;
}
.icon-btn:hover { background: rgba(255,90,90,0.28); }
.icon-btn:active { transform: scale(0.92); }
.icon-btn .icon { width: 17px; height: 17px; }

.empty { color: var(--muted); font-size: 14px; padding: 6px 2px; }

/* 지문 문제 빌더 */
.q-block {
  background: var(--card-soft);
  border: 1px solid rgba(246,239,228,0.1);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
}
.q-block-head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.q-block-head .q-text { flex: 1; }
.q-options { display: flex; flex-direction: column; gap: 8px; }
.q-opt { display: flex; align-items: center; gap: 10px; }
.q-opt input[type="radio"] { flex: none; width: 18px; height: 18px; accent-color: var(--area, var(--green)); cursor: pointer; }
.q-opt .q-optext { margin: 0; }
.q-hint { font-size: 12px; color: var(--muted); margin: 2px 0 12px; line-height: 1.6; }
.q-hint code { background: rgba(246,239,228,0.12); color: var(--cream); padding: 1px 6px; border-radius: 6px; font-size: 12px; }
.q-hint b { color: var(--cream); }

/* ===== 사용자 칩 (헤더) ===== */
.user-chip {
  order: 2; margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ink); color: var(--cream);
  padding: 7px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: var(--shadow);
  max-width: 45%;
}
.user-chip .icon { width: 16px; height: 16px; flex: none; }
.user-chip #user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) {
  .app-header { padding: 16px 16px 14px; }
  .brand h1 { font-size: 21px; }
  .brand .logo { width: 38px; height: 38px; }
  .tabs { margin-top: 12px; }
}

/* ===== 단어 학습 ===== */
.word-modes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.chip {
  border: 2px solid rgba(246,239,228,0.18); background: transparent;
  color: var(--cream); padding: 7px 13px; border-radius: 999px;
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; transition: all 0.15s;
}
.chip .icon { width: 15px; height: 15px; }
.chip:hover { border-color: var(--area); }
.chip.on { background: var(--area); color: var(--ink); border-color: var(--area); }
.chip.src { font-size: 12px; padding: 6px 11px; }
.known-count { color: var(--area, var(--cream)); font-weight: 700; font-size: 13px; margin: 6px 0 16px; }

/* 단어 모드: 큰 탭 (주 메뉴) */
/* 답 입력창 상단 여백 (듣기·쓰기) */
.answer-input { margin-top: 18px; }

/* 단어 헤더: 탭(좌) + 옵션(우 상단, 세로) */
.word-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.word-opts-col { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.word-opts-col .seg-group { justify-content: flex-end; gap: 6px; }
/* 콘텐츠/뜻 토글을 더 작게 */
.word-opts-col .seg-label { font-size: 10px; }
.word-opts-col .seg { padding: 2px; }
.word-opts-col .seg-btn { padding: 4px 9px; font-size: 10.5px; }

.word-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.wtab {
  border: none; cursor: pointer; font-family: inherit;
  background: rgba(246,239,228,0.07); color: var(--cream);
  padding: 11px 18px; border-radius: 14px;
  font-size: 15px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 7px; transition: all 0.15s;
}
.wtab .icon { width: 18px; height: 18px; }
.wtab { white-space: nowrap; }
.lbl-short { display: none; }
.wtab:hover { background: rgba(246,239,228,0.14); }
.wtab.on { background: var(--area); color: var(--ink); box-shadow: var(--shadow); }
/* 내 단어장: 북마크 아이콘만 */
.wtab-icon { flex: none; padding: 11px 14px; }
.wtab-icon .icon { width: 20px; height: 20px; margin: 0; }

/* 단어 옵션: 작은 세그먼트 토글 (부가 설정) */
.word-opts { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.seg-group { display: flex; align-items: center; gap: 8px; }
.seg-label { font-size: 12px; color: var(--muted); font-weight: 700; }
.seg { display: inline-flex; background: rgba(0,0,0,0.28); border-radius: 999px; padding: 3px; gap: 2px; }
.seg-btn {
  border: none; cursor: pointer; font-family: inherit;
  background: transparent; color: var(--muted);
  padding: 6px 13px; border-radius: 999px;
  font-size: 12px; font-weight: 600; transition: all 0.15s;
}
.seg-btn.on { background: var(--cream); color: var(--ink); }

/* 단어 헤더 반응형: 좁은 화면에선 세로로 펼쳐 깔끔하게 */
@media (max-width: 600px) {
  .word-header { flex-direction: column; align-items: stretch; gap: 12px; }
  .word-tabs { gap: 6px; }
  .word-tabs .wtab { flex: 1 1 0; justify-content: center; padding: 11px 6px; font-size: 13px; gap: 4px; }
  .word-tabs .wtab .icon { width: 16px; height: 16px; }
  .lbl-full { display: none; }
  .lbl-short { display: inline; }
  .word-tabs .wtab-icon { flex: 0 0 auto; padding: 11px 13px; }
  .word-tabs .wtab-icon .icon { width: 18px; height: 18px; }
  .word-opts-col { width: 100%; align-items: stretch; gap: 10px; }
  .word-opts-col .seg-group { justify-content: space-between; width: 100%; gap: 10px; }
  .word-opts-col .seg-label { font-size: 13px; }
  .word-opts-col .seg { padding: 3px; }
  .word-opts-col .seg-btn { font-size: 13px; padding: 8px 16px; }
}
@media (max-width: 380px) {
  .word-tabs .wtab { font-size: 12px; padding: 10px 4px; }
  .word-tabs .wtab .icon { display: none; }
}

.flashcard {
  position: relative;
  background: var(--card-soft);
  border-radius: 18px;
  padding: 34px 24px 26px;
  text-align: center;
  margin-bottom: 16px;
}
.flash-word {
  font-family: "Archivo", sans-serif; font-weight: 900;
  font-size: clamp(30px, 8vw, 52px); line-height: 1.05;
  color: var(--cream); letter-spacing: -1px; word-break: break-word;
  cursor: pointer;
}
.flash-word:hover { opacity: 0.85; }
/* 둥근 스피커 버튼 — 여러 번 발음 듣기 */
.speak-btn {
  width: 60px; height: 60px; border-radius: 50%;
  border: none; cursor: pointer; margin: 8px auto 0;
  background: var(--area); color: var(--ink);
  display: grid; place-items: center;
  box-shadow: var(--shadow); transition: transform 0.12s, filter 0.15s;
}
.speak-btn .icon { width: 28px; height: 28px; stroke-width: 2.2; }
.speak-btn:hover { transform: scale(1.08); filter: brightness(1.05); }
.speak-btn:active { transform: scale(0.95); }
.flash-pos { color: var(--area); font-weight: 700; margin: 8px 0 14px; font-size: 15px; }
.flash-mean {
  font-size: clamp(18px, 4.5vw, 24px); font-weight: 700; color: var(--cream);
  margin: 4px 0 16px; word-break: keep-all; line-height: 1.3;
}
.flash-mean.muted { color: var(--muted); font-weight: 500; font-size: 15px; }
.reveal-btn { margin: 2px 0 16px; }
.meaning-modes { margin-bottom: 14px; }
.mode-label { font-size: 12px; color: var(--muted); font-weight: 700; margin-right: 2px; }
.spell-mean { color: var(--cream); font-size: 15px; margin: 0 0 12px; }
.spell-mean strong { color: var(--area); }
.feedback .muted { color: var(--muted); font-weight: 500; }
.bookmark-btn {
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px; border-radius: 12px;
  border: none; cursor: pointer;
  background: rgba(246,239,228,0.1); color: var(--muted);
  display: grid; place-items: center; transition: all 0.15s;
}
.bookmark-btn .icon { width: 20px; height: 20px; }
.bookmark-btn:hover { background: rgba(246,239,228,0.18); }
.bookmark-btn.on { background: var(--area); color: var(--ink); }

.spell-box { text-align: center; }
.spell-instr { color: var(--cream); font-weight: 600; margin: 4px 0 14px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.spell-box .overlay-input { max-width: 320px; margin: 14px auto; text-align: center; font-size: 20px; letter-spacing: 1px; }
#sp-fb, #w-feedback { max-width: 420px; margin-left: auto; margin-right: auto; }

/* ===== 오버레이 (온보딩 / 관리자 로그인) ===== */
.overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10,8,6,0.55); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 24px;
  animation: fade 0.2s ease;
}
.overlay-card {
  background: var(--ink); color: var(--cream);
  border-radius: 22px; padding: 28px; width: 100%; max-width: 360px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.overlay-title { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 22px; margin: 0 0 6px; }
.overlay-sub { color: var(--muted); font-size: 14px; margin: 0 0 18px; }
.overlay-input {
  width: 100%; background: var(--card-soft);
  border: 2px solid rgba(246,239,228,0.16); border-radius: 12px;
  color: var(--cream); padding: 13px 15px; font-size: 16px; font-family: inherit;
  margin-bottom: 14px;
}
.overlay-input:focus { outline: none; border-color: var(--area, var(--teal)); }
.overlay-err { color: var(--danger); font-size: 13px; font-weight: 600; min-height: 18px; margin-top: 10px; text-align: center; }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.auth-tab {
  flex: 1; border: none; cursor: pointer; font-family: inherit;
  background: var(--card-soft); color: var(--muted);
  padding: 10px; border-radius: 10px; font-size: 14px; font-weight: 700;
}
.auth-tab.on { background: var(--teal); color: var(--ink); }
.overlay.auth .overlay-input { margin-bottom: 10px; }
.pw-wrap { position: relative; margin-bottom: 10px; }
.pw-wrap .overlay-input { margin-bottom: 0; padding-right: 46px; }
.pw-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: var(--muted); padding: 6px; display: grid; place-items: center; border-radius: 8px;
}
.pw-toggle:hover { color: var(--cream); background: rgba(246,239,228,0.08); }
.overlay-skip {
  display: block; margin: 12px auto 0; background: none; border: none;
  color: var(--muted); font-size: 13px; cursor: pointer; text-decoration: underline; font-family: inherit;
}

/* ===== 관리자 서브탭 + 모니터링 ===== */
.admin-subtabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.subtab {
  border: 2px solid var(--ink); background: transparent; color: var(--ink);
  padding: 9px 15px; border-radius: 999px; font-family: inherit;
  font-size: 13px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.subtab .icon { width: 16px; height: 16px; }
.subtab.active { background: var(--ink); color: var(--cream); }
.subtab.logout-btn { margin-left: auto; border-color: rgba(22,19,15,0.4); }

.student-row {
  background: var(--card-soft); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 10px;
}
.student-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.student-head-btns { display: flex; align-items: center; gap: 8px; }
.chip.sm { padding: 5px 11px; font-size: 12px; }
.student-detail { margin-top: 14px; padding-top: 16px; border-top: 1px solid rgba(246,239,228,0.12); }
.student-detail .dash-sec:first-child { margin-top: 0; }
.student-name { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--cream); font-size: 16px; }
.student-name .icon { width: 18px; height: 18px; color: var(--area); }
.student-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.student-modes { display: flex; gap: 8px; flex-wrap: wrap; }
.mode-stat {
  background: rgba(246,239,228,0.08); color: var(--muted);
  padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 600;
}
.mode-stat b { color: var(--area); font-size: 13px; }

/* ===== 학생 본인 대시보드 ===== */
.overlay.dash { align-items: flex-start; overflow-y: auto; padding: 5vh 16px; }
.dash-card { max-width: 460px; --area: #b08bff; }
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.dash-title { display: flex; align-items: center; gap: 9px; font-family: "Archivo", sans-serif; font-weight: 800; font-size: 22px; }
.dash-title .icon { width: 22px; height: 22px; color: var(--area); }
.dash-head-btns { display: flex; align-items: center; gap: 8px; }
.dash-sec { display: flex; align-items: center; gap: 7px; font-family: "Archivo", sans-serif; font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: -0.2px; color: var(--cream); margin: 22px 0 12px; }
.dash-sec .icon { width: 16px; height: 16px; color: var(--area); }
.dash-card .manage-stats { margin-bottom: 0; }
.dash-card .stat { background: rgba(246,239,228,0.06); }

.bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 110px; background: rgba(246,239,228,0.05); border-radius: 12px; padding: 12px 10px 6px; }
.bar-chart.days { overflow-x: auto; }
.bar-chart.days .bar-col { min-width: 22px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.bar { width: 70%; max-width: 26px; min-height: 3px; background: var(--area); border-radius: 5px 5px 0 0; transition: height 0.3s; }
.bar.alt { background: var(--teal); }
.bar-label { font-size: 10px; color: var(--muted); font-weight: 600; }
.bar-val { font-size: 10px; color: var(--cream); font-weight: 700; }

.mode-list { display: flex; flex-direction: column; gap: 9px; }
.mode-row { display: flex; align-items: center; gap: 10px; }
.mode-name { width: 44px; flex: none; font-size: 13px; font-weight: 700; color: var(--cream); }
.mode-bar { flex: 1; height: 10px; background: rgba(246,239,228,0.1); border-radius: 999px; overflow: hidden; }
.mode-fill { height: 100%; background: var(--area); border-radius: 999px; transition: width 0.4s; }
.mode-num { flex: none; font-size: 12px; color: var(--muted); font-weight: 600; min-width: 78px; text-align: right; }

.rec-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 240px; overflow-y: auto; padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(246,239,228,0.28) transparent;
}
.rec-list::-webkit-scrollbar { width: 5px; }
.rec-list::-webkit-scrollbar-track { background: transparent; }
.rec-list::-webkit-scrollbar-thumb { background: rgba(246,239,228,0.25); border-radius: 999px; }
.rec-list::-webkit-scrollbar-thumb:hover { background: rgba(246,239,228,0.4); }
.rec-row { display: flex; align-items: center; gap: 10px; background: rgba(246,239,228,0.05); border-radius: 10px; padding: 8px 12px; }
.rec-mode {
  flex: none; font-size: 11px; font-weight: 700; color: var(--ink);
  background: var(--area); border-radius: 6px; padding: 2px 8px;
}
.rec-detail {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 500; color: var(--cream);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rec-res { flex: none; }
.rec-res .icon { width: 16px; height: 16px; }
.rec-res.ok { color: var(--green); }
.rec-res.no { color: var(--danger); }
.rec-time { font-size: 12px; color: var(--muted); }
.empty.small { font-size: 13px; padding: 10px 2px; }

/* 대시보드 서브탭 (통계 / Note) */
.dash-subtabs { display: flex; gap: 8px; margin-bottom: 18px; }
.dsub {
  border: none; cursor: pointer; font-family: inherit;
  background: rgba(246,239,228,0.07); color: var(--cream);
  padding: 10px 18px; border-radius: 12px;
  font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 7px; transition: all 0.15s;
}
.dsub .icon { width: 16px; height: 16px; }
.dsub:hover { background: rgba(246,239,228,0.14); }
.dsub.on { background: var(--area); color: var(--ink); box-shadow: var(--shadow); }
.note-list { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(246,239,228,0.28) transparent; }
.note-list::-webkit-scrollbar { width: 5px; }
.note-list::-webkit-scrollbar-track { background: transparent; }
.note-list::-webkit-scrollbar-thumb { background: rgba(246,239,228,0.25); border-radius: 999px; }

/* 추천 카드 */
.rec-cards { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.rec-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--card-soft); border-radius: 14px; padding: 14px 16px;
}
.rec-ic {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--area); color: var(--ink);
}
.rec-ic .icon { width: 22px; height: 22px; }
.rec-body { flex: 1; min-width: 0; }
.rec-title { color: var(--cream); font-weight: 700; font-size: 15px; margin-bottom: 3px; }
.rec-title .tag { vertical-align: middle; }
.rec-desc { color: var(--muted); font-size: 13px; line-height: 1.45; }
.rec-go { flex: none; padding: 9px 16px; font-size: 13px; }

/* 정답률 추이 뱃지 */
.trend { font-size: 13px; font-weight: 800; margin-left: 4px; }
.trend.up { color: var(--green); }
.trend.down { color: var(--danger); }

/* 인사이트 행 */
.insight-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 4px; }
.insight { flex: 1 1 100px; background: rgba(246,239,228,0.06); border-radius: 14px; padding: 12px 14px; text-align: center; }
.insight-val { display: block; font-family: "Archivo", sans-serif; font-weight: 800; font-size: 18px; color: var(--area); }
.insight-label { display: block; font-size: 11px; color: var(--muted); font-weight: 600; margin-top: 3px; }

/* 오답노트 */
.wrong-list .rec-row { background: rgba(255,90,90,0.08); }

/* 요일 × 모드 스택 막대 */
.bar-chart.stacked .stack { width: 70%; max-width: 26px; min-height: 3px; display: flex; flex-direction: column-reverse; border-radius: 5px 5px 0 0; overflow: hidden; }
.seg-bar { width: 100%; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.leg { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); font-weight: 600; }
.leg i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* ===== 교재 / 자료 페이지 ===== */
.material-filter { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.material-filter label { font-weight: 700; color: var(--ink); font-size: 15px; }
.grade-select {
  appearance: none; -webkit-appearance: none;
  background: var(--ink); color: var(--cream);
  border: 2px solid var(--ink); border-radius: 12px;
  padding: 12px 40px 12px 16px; font-size: 15px; font-weight: 600;
  font-family: inherit; cursor: pointer; max-width: 280px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f6efe4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center;
}
.grade-select:focus { outline: none; border-color: var(--ink); }

.material-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.material-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  box-shadow: var(--shadow);
  min-height: 200px; justify-content: center;
}
.material-grade {
  font-size: 13px; font-weight: 700; letter-spacing: 0.3px;
  color: var(--area, var(--muted));
}
.material-title {
  font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: 24px; line-height: 1.1; color: var(--cream);
  letter-spacing: -0.4px;
}
.btn.dl {
  text-decoration: none;
  background: var(--area, var(--teal)); color: var(--ink);
  padding: 11px 22px;
}
.btn.dl.is-disabled { background: rgba(246,239,228,0.12); color: var(--muted); cursor: not-allowed; }

/* ===== 인터랙티브 샘플 풀기 ===== */
.sample-head { margin: 16px 0 18px; }
.sample-title { font-family: "Archivo", sans-serif; font-weight: 900; font-size: 30px; color: var(--cream); margin: 6px 0 4px; }
.sample-source { color: var(--area); font-weight: 600; font-size: 13px; margin: 0 0 8px; }
.sample-intro { color: var(--muted); font-size: 14px; margin: 0; line-height: 1.5; }

.sample-passage { background: var(--card-soft); border-radius: 14px; padding: 18px 20px; margin-bottom: 22px; color: var(--cream); font-size: 15px; line-height: 1.7; }
.sample-chart { background: var(--card-soft); border-radius: 14px; padding: 16px; margin-bottom: 22px; }
.chart-title { font-family: "Archivo", sans-serif; font-weight: 800; color: var(--area); margin-bottom: 12px; font-size: 18px; }
.qa-scroll { overflow-x: auto; }
.qa-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.qa-table th { text-align: left; color: var(--ink); background: var(--area); padding: 8px 10px; font-weight: 700; }
.qa-table td { color: var(--cream); padding: 9px 10px; border-bottom: 1px solid rgba(246,239,228,0.1); vertical-align: top; line-height: 1.45; }
.qa-table tr td:first-child { font-weight: 600; min-width: 130px; }

.sample-questions { display: flex; flex-direction: column; gap: 18px; margin-bottom: 20px; }
.sample-q { background: var(--card-soft); border-radius: 14px; padding: 16px; }
.sample-qn { color: var(--cream); font-weight: 600; font-size: 15px; line-height: 1.5; margin-bottom: 10px; }
.sample-qn b { color: var(--area); margin-right: 4px; }
.sample-qn .q-hint { display: inline; font-size: 12px; color: var(--muted); }
.sample-sentence { color: var(--cream); font-size: 17px; font-weight: 600; margin: 6px 0 12px; }
.sample-input { width: 100%; background: var(--card); border: 2px solid rgba(246,239,228,0.16); border-radius: 12px; color: var(--cream); padding: 11px 14px; font-size: 15px; font-family: inherit; }
.sample-input:focus { outline: none; border-color: var(--area); }
textarea.sample-input { min-height: 64px; resize: vertical; }

.sample-choices { display: flex; gap: 10px; flex-wrap: wrap; }
.sample-choice { border: 2px solid rgba(246,239,228,0.18); background: transparent; color: var(--cream); padding: 9px 20px; border-radius: 10px; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.sample-choice:hover { border-color: var(--area); }
.sample-choice.sel { background: var(--area); color: var(--ink); border-color: var(--area); }
.sample-choice.correct { background: rgba(52,210,123,0.25); border-color: var(--green); color: var(--green); }
.sample-choice.wrong { background: rgba(255,90,90,0.22); border-color: var(--danger); color: var(--danger); }

.sample-words { font-size: 18px; line-height: 2; color: var(--cream); }
.sw { cursor: pointer; padding: 2px 4px; border-radius: 6px; transition: background 0.12s; }
.sw:hover { background: rgba(246,239,228,0.12); }
.sw.sel { background: var(--area); color: var(--ink); }
.sw.correct { background: rgba(52,210,123,0.3); color: var(--green); outline: 2px solid var(--green); }
.sw.wrong { background: rgba(255,90,90,0.25); color: var(--danger); }

.sample-fb { margin-top: 10px; font-size: 14px; font-weight: 600; line-height: 1.5; }
.sample-fb:empty { display: none; }
.sample-fb.ok { color: var(--green); }
.sample-fb.no { color: var(--danger); }
.sample-fb.model { color: var(--cream); background: rgba(246,239,228,0.07); padding: 10px 12px; border-radius: 10px; }
.sample-fb.model strong { color: var(--area); margin-right: 6px; }

.sample-score { margin-top: 16px; font-size: 15px; color: var(--cream); }
.sample-score:empty { display: none; }
.sample-score.show { background: rgba(246,239,228,0.08); padding: 14px 16px; border-radius: 12px; font-weight: 600; }
.sample-score.ok { border-left: 4px solid var(--green); }
.sample-score.no { border-left: 4px solid var(--danger); }
.sample-score strong { color: var(--area); }

/* 인라인 발음 버튼 */
.speak-inline {
  border: none; cursor: pointer; vertical-align: middle;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--area); color: var(--ink);
  display: inline-grid; place-items: center; margin: 0 2px;
}
.speak-inline .icon { width: 17px; height: 17px; }
.speak-inline:hover { filter: brightness(1.06); }

/* 따라쓰기 캔버스 */
.trace-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.trace-pad { position: relative; width: 320px; max-width: 100%; height: 200px; background: var(--card); border: 2px dashed rgba(246,239,228,0.25); border-radius: 14px; overflow: hidden; }
.trace-guide {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: "Archivo", sans-serif; font-weight: 900; font-size: 150px;
  color: rgba(246,239,228,0.14); user-select: none; pointer-events: none;
}
.trace-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }

/* Topic Guide 목록 */
.guide-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.guide-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--card-soft); border-radius: 12px; padding: 12px 16px; }
.guide-topic { color: var(--cream); font-weight: 600; font-size: 15px; }
.guide-lesson { flex: none; color: var(--ink); background: var(--area); border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 700; }

/* Help Pages (참고 자료) */
.help-section { background: var(--card-soft); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; }
.help-title { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 16px; color: var(--area); margin-bottom: 12px; }
.help-items { display: flex; flex-direction: column; gap: 7px; }
.help-item { display: flex; gap: 14px; align-items: baseline; }
.help-t { flex: none; min-width: 130px; color: var(--cream); font-weight: 700; font-size: 14px; }
.help-d { color: var(--muted); font-size: 14px; line-height: 1.45; }
.help-rules { margin: 4px 0 0; padding-left: 22px; color: var(--cream); line-height: 1.6; font-size: 14px; }
.help-rules li { margin-bottom: 5px; }
.help-rules li::marker { color: var(--area); font-weight: 700; }
@media (max-width: 560px) { .help-item { flex-direction: column; gap: 2px; } .help-t { min-width: 0; } }

/* ===== 책장 / 도서 ===== */
.shelf-hint { color: rgba(22,19,15,0.8); font-size: 14px; font-weight: 600; margin: 0 0 14px; }
.shelf-group { margin-bottom: 22px; }
.shelf-group-title { display: flex; align-items: center; gap: 6px; font-family: "Archivo", sans-serif; font-weight: 800; font-size: 15px; color: var(--ink); margin: 0 0 12px; }
.shelf-group-title .icon { width: 17px; height: 17px; }
.bookshelf { display: flex; gap: 16px; flex-wrap: wrap; }
.book-cover {
  position: relative; cursor: pointer; text-align: left;
  width: 150px; min-height: 200px;
  background: var(--card); color: var(--cream);
  border: none; border-radius: 6px 12px 12px 6px;
  padding: 22px 16px 18px 26px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--shadow);
  transition: transform 0.12s ease, filter 0.15s ease;
}
.book-cover:hover { transform: translateY(-3px) rotate(-0.5deg); filter: brightness(1.07); }
.book-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 10px; border-radius: 6px 0 0 6px; background: var(--cream); opacity: 0.92; }
.book-label { font-family: "Archivo", sans-serif; font-weight: 900; font-size: 22px; line-height: 1.1; letter-spacing: -0.5px; }
.book-sub { font-size: 12px; color: var(--muted); line-height: 1.4; margin-top: auto; }
/* 준비 중 도서 — 흐리게, 호버 살짝만, 클릭해도 안 열림 */
.book-cover.soon { cursor: default; opacity: 0.6; filter: grayscale(0.35); }
.book-cover.soon:hover { transform: none; filter: grayscale(0.35) brightness(1.02); }
.book-soon { position: absolute; top: 10px; right: 10px; font-family: "Archivo", sans-serif; font-weight: 800; font-size: 10px; letter-spacing: 0.3px; color: var(--ink); background: var(--cream); border-radius: 999px; padding: 3px 8px; opacity: 0.95; }

/* 챕터 이전/목차/다음 내비게이션 */
.chapter-nav { display: flex; gap: 8px; align-items: center; margin: 12px 0; }
.chapter-nav .nav-toc { margin: 0 auto; }
.chapter-nav .btn { padding: 8px 12px; font-size: 13px; }
.chapter-nav .btn:disabled { opacity: 0.35; cursor: default; }
.icon-flip { display: inline-flex; transform: scaleX(-1); }

/* 책 머리말 + 목차 */
.book-head { margin: 14px 0 16px; }
.book-head.chapter-head { margin-top: 24px; }
.book-head-sub { color: rgba(22,19,15,0.7); font-weight: 700; font-size: 13px; }
.book-hint { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: rgba(22,19,15,0.85); font-size: 13px; font-weight: 700; margin: 0 0 16px; }
.book-hint .icon { width: 15px; height: 15px; }
.book-intro { background: rgba(255,253,249,0.78); color: var(--ink); border: 1px solid rgba(22,19,15,0.07); border-radius: 16px; padding: 16px 18px; margin: 0 0 14px; }
.book-intro > summary { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 15px; cursor: pointer; list-style: none; color: var(--ink); }
.book-intro > summary::-webkit-details-marker { display: none; }
.book-intro > summary::after { content: " ▾"; color: rgba(22,19,15,0.45); }
.book-intro[open] > summary::after { content: " ▴"; }
.book-intro p { font-size: 14px; line-height: 1.75; margin: 12px 0 0; color: rgba(22,19,15,0.78); }
.book-source { font-size: 12px; color: rgba(22,19,15,0.5); }
.book-source a { color: var(--ink); font-weight: 700; }
.book-notice { display: flex; align-items: flex-start; gap: 8px; background: rgba(255,253,249,0.6); border: 1px solid rgba(22,19,15,0.07); border-radius: 12px; padding: 11px 14px; margin: 0 0 16px; color: rgba(22,19,15,0.72); font-size: 13px; font-weight: 600; line-height: 1.55; }
.book-notice .icon { flex: none; width: 16px; height: 16px; margin-top: 1px; opacity: 0.6; }
.book-head-title { font-family: "Archivo", sans-serif; font-weight: 900; font-size: clamp(22px, 5vw, 30px); color: var(--ink); margin: 4px 0 0; line-height: 1.15; }
.toc-section { margin-bottom: 22px; }
.toc-section-title { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 15px; color: var(--ink); background: rgba(22,19,15,0.08); border-radius: 10px; padding: 8px 12px; margin: 0 0 10px; }
.toc-list { display: flex; flex-direction: column; gap: 6px; }
.toc-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  background: var(--card); color: var(--cream); border: none; border-radius: 12px; padding: 11px 14px;
  font-family: inherit; transition: transform 0.1s, filter 0.15s;
}
.toc-item:hover { transform: translateX(3px); filter: brightness(1.08); }
.toc-n { flex: none; width: 30px; height: 30px; display: grid; place-items: center; background: var(--area); color: var(--ink); border-radius: 8px; font-weight: 800; font-size: 13px; }
.toc-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; }
.toc-meta { flex: none; font-size: 11px; font-weight: 700; color: var(--muted); }
.toc-meta.ready { color: var(--ink); background: var(--area); border-radius: 999px; padding: 2px 9px; }
.toc-19 { font-family: "Archivo", sans-serif; font-size: 11px; font-weight: 900; color: #fff; background: #e23b5a; border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }
.toc-item.toc-locked .toc-meta { color: var(--muted); }
.toc-item.toc-locked .toc-meta .icon { width: 15px; height: 15px; }

/* 번역 지문 난이도 배지 — 검은 카드 위에서 잘 보이도록 밝은 배경 + 진한 글자 */
.toc-diff { flex: none; font-family: "Archivo", sans-serif; font-size: 11px; font-weight: 900; color: #16130f; border-radius: 999px; padding: 3px 9px; letter-spacing: .2px; }
.toc-diff.beginner { background: #34d27b; }
.toc-diff.intermediate { background: #ffd23f; }
.toc-diff.advanced { background: #ff7a5c; }

/* 난이도 필터 바 */
.toc-filter { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 13px; font-weight: 700; color: var(--cream); }
.toc-filter select { font: inherit; font-weight: 600; padding: 6px 10px; border: 1px solid rgba(246,239,228,0.25); border-radius: 8px; background: var(--card); color: var(--cream); cursor: pointer; }
.toc-section.toc-hide, .toc-item.toc-hide { display: none; }

/* 19금 나이 확인 게이트 */
.age-gate { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(10,8,6,0.62); backdrop-filter: blur(3px); animation: fadeIn 0.15s ease; }
.age-card { width: 100%; max-width: 380px; background: var(--card); color: var(--cream); border-radius: 22px; padding: 28px 24px; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,0.4); }
.age-emoji { font-size: 52px; line-height: 1; }
.age-badge19 { width: 56px; height: 56px; margin: 0 auto 2px; border-radius: 50%; display: grid; place-items: center; background: #e23b5a; color: #fff; font-family: "Archivo", sans-serif; font-weight: 900; font-size: 24px; letter-spacing: -1px; box-shadow: 0 6px 16px rgba(226,59,90,0.4); }
.age-card h3 { font-family: "Archivo", sans-serif; font-weight: 900; font-size: 22px; margin: 12px 0 8px; color: #fff; }
.age-card p { font-size: 14px; line-height: 1.65; color: rgba(247,243,235,0.85); margin: 0 0 6px; }
.age-card .age-q { font-weight: 800; color: var(--area); margin: 14px 0 18px; font-size: 15px; }
.age-label { display: block; text-align: left; font-size: 13px; font-weight: 700; color: rgba(247,243,235,0.75); margin: 16px 0 6px; }
.age-input { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(247,243,235,0.18); background: rgba(255,255,255,0.06); color: var(--cream); font-size: 15px; font-family: inherit; color-scheme: dark; }
.age-input:focus { outline: none; border-color: var(--area); }
.age-err { color: #ff8a9c; font-weight: 700; font-size: 13px; margin: 10px 0 0; text-align: left; }
.age-note { font-size: 11px; color: rgba(247,243,235,0.5); margin: 12px 0 0; line-height: 1.5; }
.age-actions { display: flex; gap: 10px; margin-top: 18px; }

/* 회원정보 실명인증 카드 */
.adult-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: var(--card); color: var(--cream); border-radius: 16px; padding: 16px 18px; margin: 0 0 16px; box-shadow: var(--shadow); }
.adult-card.ok { border: 1px solid rgba(52,210,123,0.5); }
.adult-info { display: flex; align-items: center; gap: 12px; }
.adult-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,0.08); }
.adult-ic .icon { width: 20px; height: 20px; }
.adult-card.ok .adult-ic { background: rgba(52,210,123,0.18); color: var(--green); }
.adult-t { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 15px; }
.adult-d { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.age-actions .btn { flex: 1; justify-content: center; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 챕터 연습 카드 */
.study-list { display: flex; flex-direction: column; gap: 12px; }
.study-card { position: relative; background: var(--card); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); }
.study-card .bookmark-btn { top: 12px; right: 12px; }
.study-en { font-family: "Archivo", sans-serif; font-weight: 700; font-size: 20px; color: var(--cream); line-height: 1.2; padding-right: 44px; }
.study-ko { color: var(--area); font-weight: 600; font-size: 16px; margin-top: 8px; }
.study-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.study-acts .btn { padding: 9px 14px; font-size: 13px; }
.study-write { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.study-write .study-input { flex: 1; min-width: 180px; margin: 0; }
/* 쓰기 연습 모드 (순서 배열 / 빈칸 채우기 / 전체 쓰기) */
.write-modes { flex-basis: 100%; display: flex; gap: 6px; flex-wrap: wrap; }
.write-hint { flex-basis: 100%; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.write-gap { font-family: "Archivo", sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 1px; line-height: 1.6; color: var(--cream); word-break: break-word; }
.wchip.used { opacity: 0.3; cursor: default; }
.wchip-reset { color: var(--muted); border-style: dashed; }

/* 챕터 부가 학습 블록 — 흰색 큰 패널에 팁 / 실제 대화 / 0.5초 리뷰 / 문단 쓰기를 묶음 */
.book-extras { margin-top: 20px; background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 20px; padding: 16px; box-shadow: var(--shadow); }
.extras-head { display: flex; align-items: center; gap: 8px; font-family: "Archivo", sans-serif; font-weight: 800; font-size: 16px; color: var(--ink); padding: 2px 4px 0; }
.extras-head .icon { width: 18px; height: 18px; color: #e2552f; }
.book-extra { background: #fff; border: 1px solid rgba(0,0,0,0.1); border-radius: 16px; padding: 18px; margin-top: 12px; }
.extra-title { display: flex; align-items: center; gap: 7px; font-family: "Archivo", sans-serif; font-weight: 800; font-size: 15px; color: var(--ink); margin-bottom: 12px; }
.extra-title .icon { width: 17px; height: 17px; color: #e2552f; }
.tip-feel { display: inline-block; background: rgba(246,76,37,0.12); color: #d8431f; font-weight: 800; font-size: 13px; padding: 5px 12px; border-radius: 999px; margin-bottom: 10px; }
.tip-when { color: #3a352e; font-size: 14px; line-height: 1.7; margin: 0; }
.dlg-line { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; }
.dlg-line:first-of-type { margin-top: 0; }
.dlg-sp { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,0.08); color: #6b655c; font-size: 12px; font-weight: 800; margin-top: 2px; }
.dlg-line.b .dlg-sp { background: #f64c25; color: #fff; }
.dlg-bubble { background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 12px; padding: 10px 12px; line-height: 1.5; }
.dlg-play { border: none; background: transparent; color: #d8431f; cursor: pointer; padding: 0; vertical-align: middle; margin-right: 4px; }
.dlg-play .icon { width: 15px; height: 15px; }
.dlg-en { color: var(--ink); font-size: 14.5px; }
.dlg-ko { display: block; color: #857e72; font-size: 12.5px; margin-top: 3px; }
.sr-desc { color: #857e72; font-size: 13px; line-height: 1.6; margin: 0 0 12px; }
.sr-count { color: #a49c8f; font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.sr-ko { font-size: 18px; font-weight: 700; color: #d8431f; margin-bottom: 10px; }
.sr-bar { height: 6px; background: rgba(0,0,0,0.1); border-radius: 999px; overflow: hidden; margin-bottom: 12px; }
.sr-bar i { display: block; height: 100%; width: 0; background: #f64c25; transition: width 1.5s linear; }
.sr-en { font-family: "Archivo", sans-serif; font-weight: 700; font-size: 19px; color: var(--ink); margin-bottom: 12px; }
.sr-grade { display: flex; gap: 8px; flex-wrap: wrap; }
.sr-result { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.sr-result b { color: #d8431f; }
/* 문단 쓰기 (브레인스토밍) */
.pw-topic { color: #3a352e; font-size: 14px; line-height: 1.7; margin: 0 0 10px; }
.pw-words { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.pw-words-label { color: #a49c8f; font-size: 12px; font-weight: 800; margin-right: 2px; }
.pw-input { width: 100%; min-height: 110px; resize: vertical; border-radius: 12px; border: 2px solid rgba(0,0,0,0.12); background: #fff; color: var(--ink); font-family: inherit; font-size: 14px; line-height: 1.7; padding: 12px; }
.pw-input::placeholder { color: #a49c8f; }
.pw-input:focus { outline: none; border-color: #f64c25; }
.pw-acts { margin-top: 10px; }
/* 원곡 감상 (유튜브 임베드) */
.yt-box { background: var(--card); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); margin-bottom: 16px; }
.yt-frame { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.yt-frame .btn { padding: 9px 14px; font-size: 13px; }
a.yt-link { text-decoration: none; }
.yt-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 싱어롱 플레이어 (Pop Pop Pop) */
.karaoke { background: var(--card); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); margin-bottom: 16px; }
.kr-title { display: flex; align-items: center; gap: 7px; font-family: "Archivo", sans-serif; font-weight: 800; font-size: 15px; color: var(--cream); }
.kr-title .icon { width: 17px; height: 17px; color: var(--area); }
.kr-ctrl { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.kr-ctrl .btn { padding: 9px 14px; font-size: 13px; }
.kr-rate, .kr-src { background: rgba(255,255,255,0.08); color: var(--cream); border: 2px solid rgba(246,239,228,0.18); border-radius: 999px; padding: 7px 12px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.kr-src { border-color: rgba(126,211,178,0.4); }
.kr-lines { margin-top: 14px; max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(246,239,228,0.28) transparent; }
.kr-lines::-webkit-scrollbar { width: 5px; }
.kr-lines::-webkit-scrollbar-track { background: transparent; }
.kr-lines::-webkit-scrollbar-thumb { background: rgba(246,239,228,0.25); border-radius: 999px; }
.kr-lines::-webkit-scrollbar-thumb:hover { background: rgba(246,239,228,0.4); }
.kr-line { padding: 8px 12px; border-radius: 10px; cursor: pointer; transition: background 0.15s; }
.kr-line:hover { background: rgba(255,255,255,0.05); }
.kr-en { font-family: "Archivo", sans-serif; font-weight: 700; font-size: 15.5px; color: rgba(246,239,228,0.72); transition: color 0.15s, font-size 0.15s; }
.kr-line.on { background: rgba(255,131,89,0.16); }
.kr-line.on .kr-en { color: var(--area); font-size: 17px; }
.kr-koline { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
/* 가사 속 단어 */
.vocab-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.vocab-row:last-child { border-bottom: none; }
.vocab-en { color: var(--ink); font-size: 14.5px; }
.vocab-ko { color: #857e72; font-size: 13px; flex: 1; }
.vocab-bm { border: none; background: rgba(0,0,0,0.06); color: #a49c8f; border-radius: 8px; padding: 5px 7px; cursor: pointer; }
.vocab-bm .icon { width: 15px; height: 15px; }
.vocab-bm.on { background: #f64c25; color: #fff; }
/* 흰 패널 위에서 잘 보이도록 칩·버튼·피드백 색 보정 */
.book-extras .chip { color: #3a352e; border-color: rgba(0,0,0,0.15); }
.book-extras .chip:hover { border-color: #f64c25; }
.book-extras .btn.ghost { background: rgba(0,0,0,0.07); color: var(--ink); }
.book-extras .study-fb.ok { color: #1f9d58; }
.book-extras .study-fb.no { color: #d84343; }
.book-extras .study-fb.neutral { color: #a97b00; }
.study-fb { margin-top: 12px; font-size: 14px; font-weight: 600; line-height: 1.5; }
.study-fb:empty { display: none; }
.study-fb.ok { color: var(--green); }
.study-fb.no { color: var(--danger); }
.study-fb.neutral { color: var(--yellow); }

/* ===== 발음 연습 ===== */
/* 난이도 선택 (기초~고급) */
.pronun-levels { display: flex; gap: 2px; background: rgba(0,0,0,0.28); border-radius: 999px; padding: 3px; margin: 16px 0 10px; width: fit-content; max-width: 100%; }
.plevel {
  border: none; cursor: pointer; font-family: inherit;
  background: transparent; color: var(--muted);
  font-size: 13px; font-weight: 700;
  padding: 8px 16px; border-radius: 999px;
  transition: background 0.12s, color 0.12s;
}
.plevel:hover { color: var(--cream); }
.plevel.on { background: var(--area); color: var(--ink); }
.pronun-sets { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 4px; }
.pronun-sets .chip b { color: var(--area); margin-right: 2px; font-weight: 800; }
.pronun-sets .chip.on b { color: var(--ink); }
/* 입모양 팁 — 콜아웃 박스 */
.pronun-tip {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  background: var(--card-soft);
  border-left: 4px solid var(--area);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 16px 0 6px;
}
.pronun-tip .tip-badge {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,210,63,0.14); color: var(--yellow);
  font-size: 12px; font-weight: 800; letter-spacing: -0.2px;
  padding: 5px 11px; border-radius: 999px; margin-top: 1px;
}
.pronun-tip .tip-text { flex: 1; min-width: 200px; color: var(--cream); font-size: 14px; font-weight: 500; line-height: 1.6; }
.pronun-instr { color: var(--muted); font-size: 14.5px; font-weight: 600; margin: 14px 0 40px; }
.pronun-instr.quiz-instr { margin-bottom: 45px; }   /* 소리 구별 안내문구 아래 */
.pronun-instr strong { color: var(--area); font-weight: 800; }

/* 녹음 비교 3단계 안내 칩 */
.pronun-steps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 16px 0 10px; }
.pstep {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--card-soft);
  border: 2px solid rgba(246,239,228,0.12);
  border-radius: 999px; padding: 7px 14px 7px 8px;
  font-size: 13px; font-weight: 700; color: var(--cream); white-space: nowrap;
}
.pstep b {
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--area); color: var(--ink);
  font-family: "Archivo", sans-serif; font-size: 11.5px; font-weight: 900;
}
.pstep-arrow { color: var(--muted); font-weight: 800; }
.pronun-sub { color: var(--muted); font-size: 13px; font-weight: 500; margin: 0 0 40px; }
#pronun .big-sentence { margin: 28px 0 45px; }   /* 연습 문장 위아래 여백 */

/* 최소대립쌍 선택 버튼 */
.pair-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 6px; }
.pair-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--card-soft);
  border: 3px solid rgba(246,239,228,0.12);
  border-radius: var(--radius-sm);
  padding: 22px 12px;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.1s, border-color 0.15s;
}
.pair-btn:hover:not(:disabled) { border-color: var(--area); transform: translateY(-2px); }
.pair-btn.correct { background: rgba(52,210,123,0.2); border-color: var(--green); }
.pair-btn.wrong { background: rgba(255,90,90,0.18); border-color: var(--danger); }
.pair-word { font-family: "Archivo", sans-serif; font-weight: 800; font-size: clamp(22px, 4.5vw, 30px); color: var(--cream); letter-spacing: -0.5px; }
.pair-word.big { font-size: clamp(30px, 6vw, 42px); }
.pair-ko { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.pair-btn.correct .pair-word { color: var(--green); }
.pair-btn.wrong .pair-word { color: var(--danger); }
.btn-inline { padding: 6px 12px; font-size: 12.5px; margin-left: 8px; vertical-align: middle; }

/* 따라 말하기 목표 단어 */
.pronun-target { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 12px 18px; margin-bottom: 45px; }
.pronun-rival { font-size: 12.5px; font-weight: 700; color: var(--yellow); background: rgba(255,210,63,0.12); padding: 5px 12px; border-radius: 999px; margin-top: 6px; }

/* 녹음 상태 */
.rec-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); margin-right: 6px; animation: blink 1s steps(1) infinite; vertical-align: -1px; }
.btn.recording { background: var(--danger); color: #fff; }

/* AI 평가 결과 */
.ai-result { display: flex; align-items: center; gap: 22px; margin-top: 18px; flex-wrap: wrap; }
.ai-score {
  flex: none; width: 108px; height: 108px; border-radius: 50%;
  border: 6px solid var(--sc, var(--area));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--card-soft);
}
.ai-score-num { font-family: "Archivo", sans-serif; font-weight: 900; font-size: 34px; color: var(--sc, var(--cream)); line-height: 1; }
.ai-score-label { font-size: 11px; font-weight: 700; color: var(--muted); }
.ai-bars { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 10px; }
.ai-bar-row { display: flex; align-items: center; gap: 10px; }
.ai-bar-label { flex: none; width: 48px; font-size: 13px; font-weight: 700; color: var(--cream); }
.ai-bar { flex: 1; height: 12px; border-radius: 999px; background: rgba(0,0,0,0.3); overflow: hidden; }
.ai-bar-fill { height: 100%; border-radius: 999px; transition: width 0.5s ease; }
.ai-bar-num { flex: none; width: 30px; text-align: right; font-family: "Archivo", sans-serif; font-weight: 800; font-size: 14px; color: var(--cream); }
.ai-words { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.ai-word {
  display: inline-flex; align-items: baseline; gap: 6px;
  border: 2px solid transparent; border-radius: 10px; padding: 7px 11px;
  font-family: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
  background: var(--card-soft); color: var(--cream);
  transition: transform 0.1s;
}
.ai-word:hover { transform: translateY(-2px); }
.ai-word small { font-size: 11px; font-weight: 800; }
.ai-word.good { border-color: var(--green); }  .ai-word.good small { color: var(--green); }
.ai-word.soso { border-color: var(--yellow); } .ai-word.soso small { color: var(--yellow); }
.ai-word.bad  { border-color: var(--danger); } .ai-word.bad small { color: var(--danger); }
.ai-word.miss { border-color: rgba(246,239,228,0.25); opacity: 0.55; text-decoration: line-through; }
.ai-phonemes { margin-top: 12px; font-size: 14px; min-height: 20px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.ai-phonemes:empty { display: none; }
.ai-ph-title { color: var(--muted); font-weight: 700; font-size: 13px; }
.ai-ph { font-family: "Space Grotesk", monospace; font-weight: 600; }
.ai-ph b { font-family: "Archivo", sans-serif; }

@media (max-width: 560px) {
  .pair-options { grid-template-columns: 1fr; }
  .ai-result { gap: 14px; }
}

/* ===== Quiz Quest (교재 · 영어 퀴즈 카드) ===== */
.quest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-top: 18px; }
.quest-deck {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  background: var(--card-soft);
  border: 3px solid rgba(246,239,228,0.12);
  border-radius: var(--radius-sm);
  padding: 18px 16px;
  cursor: pointer; font-family: inherit; text-align: left;
  transition: transform 0.1s, border-color 0.15s;
}
.quest-deck:hover { border-color: var(--area); transform: translateY(-3px); }
.quest-g { font-family: "Archivo", sans-serif; font-weight: 900; font-size: 24px; color: var(--area); letter-spacing: -0.5px; }
.quest-desc { color: var(--cream); font-size: 14px; font-weight: 700; }
.quest-meta { color: rgba(246,239,228,0.8); font-size: 13px; font-weight: 600; }

.quest-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.quest-count { color: var(--cream); font-size: 15px; font-weight: 700; }
.quest-count b { color: var(--area); font-family: "Archivo", sans-serif; font-size: 19px; }
.quest-streak { margin-left: auto; color: var(--yellow); font-size: 15px; font-weight: 800; }
.quest-bar { height: 10px; border-radius: 999px; background: rgba(0,0,0,0.35); overflow: hidden; margin: 14px 0 16px; }
.quest-bar-fill { height: 100%; border-radius: 999px; background: var(--area); transition: width 0.3s ease; }

/* 문제 카드 — 실제 퀴즈 카드처럼 */
.quest-card {
  background: var(--card-soft);
  border: 3px solid rgba(246,239,228,0.16);
  border-radius: var(--radius-sm);
  padding: 26px 24px 20px;
  box-shadow: var(--shadow);
}
.quest-q {
  font-family: "Archivo", sans-serif; font-weight: 700;
  font-size: clamp(20px, 3.8vw, 26px); line-height: 1.4; letter-spacing: -0.3px;
  color: #fff; margin-bottom: 22px;
}
.quest-card .options { gap: 12px; }
.quest-card .option {
  background: rgba(0,0,0,0.3);
  border-width: 3px;
  color: #fff;
  font-size: 16.5px; font-weight: 600;
  padding: 15px 18px;
}
.quest-card .option:disabled { cursor: default; }
.quest-card .option.correct { background: rgba(52,210,123,0.25); }
.quest-card .option.wrong { background: rgba(255,90,90,0.22); }
.quest-card .answer-input { max-width: 380px; font-size: 17px; }
.quest-card .feedback { font-size: 16px; font-weight: 600; }

.quest-end { text-align: center; padding: 30px 12px 16px; }
.quest-end-emoji { font-size: 58px; line-height: 1; }
.quest-end-title { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 26px; color: #fff; margin: 14px 0 6px; }
.quest-end-score { font-family: "Archivo", sans-serif; font-weight: 900; font-size: 44px; color: var(--area); }
.quest-end-score small { font-size: 19px; color: rgba(246,239,228,0.85); font-weight: 700; }
.quest-end-meta { color: rgba(246,239,228,0.85); font-size: 14.5px; font-weight: 600; margin: 8px 0 22px; }

/* ===== 대시보드 · 내 번역 기록 (책 한 권 영문 번역해보기) ===== */
.trans-list { display: flex; flex-direction: column; gap: 8px; }
.trans-item { border: 1px solid var(--line, #e7e3dc); border-radius: 10px; background: #fff; overflow: hidden; }
.trans-item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; font-size: 13px; }
.trans-item > summary::-webkit-details-marker { display: none; }
.tbadge { font-size: 11px; padding: 2px 7px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.tbadge.dir { background: #f3e6dd; color: #c2683c; }
.tbadge.method { background: #eef1ea; color: #6b7a5b; }
.trans-attempt { flex: 1; color: #55504a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trans-body { padding: 4px 12px 12px; font-size: 13px; line-height: 1.6; border-top: 1px solid var(--line, #eee); }
.trans-body > div { margin-top: 7px; }
.trans-src { color: #6b655c; }
.trans-mine { color: #23201c; }
.trans-body b { color: #c2683c; }
.tsum { color: #55504a; }
.tissues { list-style: none; margin: 6px 0 0; padding: 0; }
.tissues li { padding: 5px 0; border-top: 1px dashed var(--line, #eee); }
.tmodel { padding: 8px 10px; background: #f4f1ea; border-radius: 8px; }
.trans-body .bad-span { color: #c0492b; text-decoration: line-through; }
.trans-body .fix { color: #2f8a56; font-weight: 600; }
.trans-body .why { color: #7c756c; display: block; margin-top: 2px; }
.trans-body .chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: baseline; }
.trans-body .chips .lab { font-size: 12px; color: #7c756c; }
.trans-body .chip { font-size: 12px; padding: 2px 8px; border-radius: 999px; }
.trans-body .chip.miss { background: #f6e0da; color: #c0492b; }
.trans-body .chip.extra { background: #eee7db; color: #8a7a56; text-decoration: line-through; }
.del-trans { margin-top: 10px; }

/* ===== 메인 (홈) =====
   로그인 없이 보는 첫 화면. 검은 카드 + 하드 섀도우라는 기존 언어를 그대로 쓰되,
   페이지 배경 위에 바로 놓이는 제목(.home-sec)만 잉크색으로 둔다. */
.brand { border: none; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.brand:hover h1 { transform: translateY(-1px); }
.brand h1 { transition: transform 0.12s ease; }

.home-hero { margin-bottom: 26px; }
.home-title {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: "Archivo", sans-serif; font-weight: 900; font-size: 34px;
  letter-spacing: -1px; color: var(--ink); margin: 0 0 6px;
}
.home-title .icon { width: 30px; height: 30px; }
.home-lead { color: rgba(22,19,15,0.72); font-size: 15px; margin: 0; }

.home-sec {
  display: flex; align-items: center; gap: 7px;
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: 14px;
  text-transform: uppercase; letter-spacing: -0.2px;
  color: var(--ink); margin: 26px 0 12px;
}
.home-sec .icon { width: 16px; height: 16px; }

/* 오늘의 추천 */
.home-today { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.home-pick {
  position: relative; overflow: hidden;
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow);
  border: 2px solid var(--ink);
}
/* 오른쪽 위에 옐로 얼룩 하나 — 종이에 도장 찍은 느낌 */
.home-pick::after {
  content: ""; position: absolute; top: -46px; right: -46px;
  width: 130px; height: 130px; border-radius: 50%;
  background: var(--yellow); opacity: 0.28; pointer-events: none;
}
.home-pick-tag {
  position: relative; z-index: 1;
  display: inline-block; background: var(--ink); color: var(--yellow);
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 11px;
  padding: 4px 10px; border-radius: 999px; margin-bottom: 10px;
}
.home-pick-en { position: relative; z-index: 1; font-family: "Archivo", sans-serif; font-weight: 700; font-size: 19px; line-height: 1.35; margin: 0 0 6px; }
.home-pick-ko { position: relative; z-index: 1; color: var(--ink-soft); font-size: 14px; margin: 0 0 14px; }
.home-pick-act { position: relative; z-index: 1; display: flex; gap: 8px; flex-wrap: wrap; }
/* 크림 카드 위에서는 ghost 버튼을 잉크 테두리 버전으로 */
.home-pick-act .btn { border: 2px solid var(--ink); }
.home-pick-act .btn.ghost { background: transparent; color: var(--ink); }
.home-pick-act .btn.ghost:hover { background: rgba(22,19,15,0.07); filter: none; }

/* 새로 들어온 교재 */
.home-books { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.home-book {
  --area: var(--c-materials);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  background: var(--paper); color: var(--ink); cursor: pointer;
  border: 2px solid var(--ink); border-left: 7px solid var(--area);
  border-radius: var(--radius-sm); padding: 18px 18px 18px 16px; box-shadow: var(--shadow);
  transition: transform 0.12s ease;
}
/* 책등처럼 위에서 흘러내리는 옅은 색 띠 */
.home-book::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 100%;
  background: linear-gradient(160deg, var(--area) 0%, transparent 62%);
  opacity: 0.16; pointer-events: none;
}
.home-book > * { position: relative; z-index: 1; }
.home-book:hover { transform: translateY(-3px); }
.home-book-sub { font-size: 11px; color: var(--ink-soft); font-weight: 600; }
.home-book-title { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 16px; line-height: 1.25; }
.home-book-meta { font-size: 12px; color: var(--ink-soft); font-weight: 600; margin-top: 4px; }
.home-books .empty { color: rgba(22,19,15,0.6); }

/* 영역별 바로가기 */
.home-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.home-area {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  background: var(--paper); color: var(--ink); cursor: pointer;
  border: 2px solid var(--ink); border-left: 7px solid var(--area);
  border-radius: var(--radius-sm); padding: 16px 16px 16px 14px; box-shadow: var(--shadow);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
/* 카드 오른쪽 위에 섹션 색이 번지는 큰 원 — 카드마다 다른 표정이 난다 */
.home-area::before {
  content: ""; position: absolute; top: -58px; right: -34px;
  width: 138px; height: 138px; border-radius: 50%;
  background: var(--area); opacity: 0.22;
  transition: transform 0.25s ease, opacity 0.25s ease;
  pointer-events: none;
}
.home-area > * { position: relative; z-index: 1; }
.home-area:hover { transform: translateY(-3px); box-shadow: 9px 9px 0 rgba(0,0,0,0.24); }
.home-area:hover::before { transform: scale(1.18); opacity: 0.3; }

.home-area-ic {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 11px;
  background: var(--area); border: 2px solid var(--ink);
  margin-bottom: 8px;
}
.home-area-ic .icon { width: 19px; height: 19px; color: var(--ink); }
.home-area-name { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 16px; }
.home-area-desc { font-size: 12px; color: var(--ink-soft); line-height: 1.35; }
.home-area-count {
  align-self: flex-start; margin-top: 8px;
  font-size: 11px; font-weight: 700; color: var(--ink);
  background: var(--area); border-radius: 999px; padding: 3px 9px;
}

@media (max-width: 520px) {
  .home-title { font-size: 27px; }
  .home-areas { grid-template-columns: repeat(2, 1fr); }
}

/* TTS 진단 페이지 로그 */
#log .line { color: var(--cream); border-bottom: 1px solid rgba(246,239,228,0.08); padding: 3px 0; }
#log .line.ok { color: var(--green); }
#log .line.err { color: var(--danger); }