/* views.css — 各视图专属样式。基础组件在 app.css。 */

/* ============ 今日 ============ */

.hello { padding: 16px 2px 22px; }

.hello__date {
  font-family: var(--font-data);
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  color: var(--ink-4);
  text-transform: uppercase;
}

.hello__line {
  margin-top: 10px;
  font-family: var(--font-ko);
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.hello__line small {
  display: block;
  margin-top: 6px;
  font-family: var(--font-ui);
  font-size: var(--fs-s);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-3);
}

/* 任务行：数字 + 说明 + 箭头 */
.task {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  margin-bottom: 10px;
  border-radius: var(--r-l);
  border: 1px solid rgba(21, 24, 31, .07);
  background: var(--paper-2);
  box-shadow: var(--shadow-2);
  text-decoration: none;
  color: inherit;
  transition: transform .16s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}

.task:active { transform: scale(.99); }
.task[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.task__n {
  min-width: 46px;
  font-family: var(--font-data);
  font-size: var(--fs-2xl);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.task__n small {
  display: block;
  margin-top: 4px;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--ink-4);
}

.task__body { flex: 1; min-width: 0; }
.task__title { font-size: var(--fs-l); font-weight: 620; letter-spacing: -.01em; }
.task__desc { margin-top: 2px; font-size: var(--fs-s); color: var(--ink-3); }
.task__arrow { flex: none; color: var(--ink-4); transition: transform .18s var(--ease); }
.task:active .task__arrow { transform: translateX(3px); }

.task--done { background: linear-gradient(to right, var(--paper-2), var(--paper-3)); }
.task--done .task__n { color: var(--ink-4); }

.todaynote {
  margin: 26px 0 0;
  text-align: center;
  font-family: var(--font-data);
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  color: var(--ink-4);
}

/* ============ 导入 ============ */

.pane { animation: inkIn .26s var(--ease-out) both; }
.pane[data-on="0"] { display: none; }

.importbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 8px 8px 14px;
  border-radius: var(--r-m);
  background: var(--paper-3);
}

.importbar__n {
  font-family: var(--font-data);
  font-size: var(--fs-s);
  color: var(--ink-2);
  letter-spacing: .02em;
}

.previewlist { margin-top: 12px; }

.prow {
  display: grid;
  grid-template-columns: 22px auto 1fr;
  column-gap: 10px;
  row-gap: 1px;
  align-items: baseline;
  padding: 9px 4px 9px 2px;
  border-bottom: 1px dashed var(--rule);
  animation: rise .3s var(--ease-out) both;
}

.prow__n {
  grid-row: 1 / span 2;
  font-family: var(--font-data);
  font-size: var(--fs-xs);
  color: var(--ink-4);
  text-align: right;
}

.prow__ko {
  grid-column: 2;
  font-size: var(--fs-l);
  font-weight: 560;
  letter-spacing: -.01em;
}

.prow__hanja {
  grid-column: 3;
  font-size: var(--fs-s);
  color: var(--ink-3);
  letter-spacing: .04em;
}

.prow__zh {
  grid-column: 2 / span 2;
  font-size: var(--fs-s);
  color: var(--ink-2);
  line-height: 1.55;
}

.prow--more {
  display: block;
  border-bottom: 0;
  padding: 12px 4px 0;
  font-size: var(--fs-s);
  color: var(--ink-3);
  text-align: center;
}

.prow.pr--ok { box-shadow: inset 2px 0 0 var(--jade); padding-left: 8px; }
.prow.pr--err { box-shadow: inset 2px 0 0 var(--pen); padding-left: 8px; }

/* ============ 词库 ============ */

.searchwrap { position: sticky; top: var(--topbar-h); z-index: 20; padding: 4px 0 8px; background: linear-gradient(to bottom, var(--paper) 72%, rgba(245, 242, 234, 0)); }

.searchbox { position: relative; }

.searchbox > svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-4);
  pointer-events: none;
}

.searchbox .input { padding-left: 40px; }

.countline {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.countline::-webkit-scrollbar { display: none; }

.wordrow { padding: 13px 16px; }
.wordrow__w { font-family: var(--font-ko); font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.wordrow__m { margin-top: 1px; font-size: var(--fs-s); color: var(--ink-2); }

.wordrow__tag {
  flex: none;
  align-self: center;
  font-family: var(--font-data);
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--ink-4);
  text-align: right;
  letter-spacing: .02em;
}

/* 词条详情 */
.wd__word { font-family: var(--font-ko); font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.wd__sub { margin-top: 4px; font-size: var(--fs-s); color: var(--ink-3); font-family: var(--font-data); letter-spacing: .01em; }
.wd__sec { margin-top: 20px; }

.wd__h {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--ink-4);
  text-transform: uppercase;
  margin-bottom: 7px;
}

.wd__sec ol { counter-reset: m; }
.wd__sec ol li {
  counter-increment: m;
  position: relative;
  padding-left: 22px;
  margin: 5px 0;
  font-size: var(--fs-m);
}
.wd__sec ol li::before {
  content: counter(m);
  position: absolute;
  left: 0;
  font-family: var(--font-data);
  font-size: var(--fs-xs);
  color: var(--ink-4);
  top: 3px;
}

.conj { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.conj > div {
  padding: 9px 10px;
  border-radius: var(--r-s);
  background: var(--paper-3);
  text-align: center;
}

.conj span { display: block; font-size: var(--fs-xs); color: var(--ink-3); letter-spacing: .05em; }
.conj b { display: block; margin-top: 3px; font-size: var(--fs-m); font-weight: 600; }

/* ============ 课文 ============ */

.lessonmeta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: var(--fs-s);
  color: var(--ink-3);
}

.lessonmeta .seg { margin-left: auto; }
.lessonmeta .seg button { min-height: 30px; padding: 0 11px; font-size: var(--fs-xs); }

.reader { display: flex; flex-direction: column; gap: 20px; }

.sent {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
  animation: rise .4s var(--ease-out) both;
}

.sent:last-child { border-bottom: 0; }

.sent__ko {
  font-family: var(--font-ko);
  font-size: 19px;
  line-height: 1.72;
  letter-spacing: .002em;
}

.sent__zh {
  margin-top: 5px;
  font-size: var(--fs-m);
  color: var(--ink-2);
  line-height: 1.66;
  transition: opacity .22s var(--ease);
}

.sent__gram { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.sent__gram button {
  padding: 4px 10px;
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  background: var(--hl-2);
  color: #6b5312;
  font-family: var(--font-ko);
  font-size: var(--fs-s);
  cursor: pointer;
  transition: transform .14s var(--ease), background .18s var(--ease);
}

.sent__gram button:active { transform: scale(.96); background: var(--hl); }
.sent__gram button small { font-family: var(--font-ui); color: #8a6d1c; margin-left: 5px; }

.sent__marks {
  margin-top: 8px;
  font-family: var(--font-ko);
  font-size: var(--fs-s);
  color: var(--ink-3);
  line-height: 1.7;
}

.sent__marks b { font-weight: 600; color: var(--ink-2); }

.reader[data-zh="0"] .sent__zh,
.reader[data-zh="0"] .sent__marks { display: none; }

/* ============ 语法 ============ */

.gcard {
  display: block;
  padding: 15px 17px 13px;
  margin-bottom: 10px;
  border-radius: var(--r-l);
  border: 1px solid rgba(21, 24, 31, .07);
  background: var(--paper-2);
  box-shadow: var(--shadow-2);
  text-decoration: none;
  color: inherit;
  transition: transform .16s var(--ease), box-shadow .2s var(--ease);
}

.gcard:active { transform: scale(.99); }

.gcard__top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }

.gcard__form {
  font-family: var(--font-ko);
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -.01em;
}

.gcard__name { font-size: var(--fs-s); color: var(--ink-2); }

.gcard__sum {
  margin-top: 6px;
  font-size: var(--fs-m);
  color: var(--ink-2);
  line-height: 1.6;
}

.gcard__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-family: var(--font-data);
  font-size: var(--fs-xs);
  color: var(--ink-4);
}

.gcard__meta .unitcell { margin-right: auto; }

/* 语法详情 */
.gdetail { padding-bottom: 8px; }
.gdetail__head { margin-bottom: 18px; }
.gdetail__form { font-family: var(--font-ko); font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
.gdetail__title { margin-top: 3px; font-size: var(--fs-m); color: var(--ink-2); }

.gdetail__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  font-family: var(--font-data);
  font-size: var(--fs-xs);
  color: var(--ink-4);
}

.gdetail__meta .btn { margin-left: auto; }

.gdetail__sum { margin: 18px 0 6px; }

.gdetail__meta .btn + .btn { margin-left: 0; }

.gexs { display: flex; flex-direction: column; gap: 12px; }

.gex {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-m);
  background: var(--paper-2);
  border: 1px solid var(--rule);
}

.gex__n {
  flex: none;
  font-family: var(--font-data);
  font-size: var(--fs-xs);
  color: var(--ink-4);
  padding-top: 4px;
}

.gex__ko { font-family: var(--font-ko); font-size: 16px; line-height: 1.68; }
.gex__zh { margin-top: 3px; font-size: var(--fs-s); color: var(--ink-2); }

.gex__note {
  margin-top: 7px;
  padding-left: 9px;
  border-left: 2px solid var(--hl);
  font-size: var(--fs-s);
  color: var(--ink-3);
  line-height: 1.6;
}

.pitfalls { display: flex; flex-direction: column; gap: 8px; }

.pitfall {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 13px;
  border-radius: var(--r-m);
  background: var(--pen-wash);
  color: #7f2a18;
  font-size: var(--fs-s);
  line-height: 1.62;
}

.pitfall svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--pen); }
.pitfall b { font-weight: 650; }

/* ============ 学习 / 复习 ============ */

.studybar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 2px 0;
  font-family: var(--font-data);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  letter-spacing: .04em;
}

.studycard {
  margin: auto 0;
  padding-bottom: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#sess { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.prompt { text-align: center; padding: 6px 0 0; }

.prompt__kicker {
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  color: var(--ink-4);
  text-transform: uppercase;
}

.prompt__word {
  margin-top: 16px;
  font-family: var(--font-ko);
  font-size: 56px;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.02em;
  animation: inkIn .34s var(--ease-out) both;
}

.prompt__pron {
  margin-top: 8px;
  font-family: var(--font-data);
  font-size: var(--fs-m);
  color: var(--ink-3);
  letter-spacing: .04em;
}

.prompt__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  font-size: var(--fs-s);
  color: var(--ink-3);
}

.answer {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  animation: inkIn .32s var(--ease-out) both;
}

.answer__mean { font-size: var(--fs-l); line-height: 1.6; }

.answer__mean ol { counter-reset: a; }
.answer__mean li {
  counter-increment: a;
  position: relative;
  padding-left: 26px;
  font-weight: 560;
}
.answer__mean li::before {
  content: counter(a);
  position: absolute;
  left: 2px;
  top: 3px;
  font-family: var(--font-data);
  font-size: var(--fs-s);
  font-weight: 400;
  color: var(--ink-4);
}

.answer__row { display: flex; gap: 12px; align-items: baseline; margin-top: 10px; }
.answer__k { flex: none; font-size: var(--fs-xs); letter-spacing: .12em; color: var(--ink-4); text-transform: uppercase; }
.answer__v { font-size: var(--fs-m); color: var(--ink-2); }

.ex { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; }
.ex + .ex { border-top: 1px dashed var(--rule); }

.ex__n {
  flex: none;
  width: 14px;
  font-family: var(--font-data);
  font-size: var(--fs-xs);
  color: var(--ink-4);
  padding-top: 3px;
}

.ex__ko { font-family: var(--font-ko); font-size: 15.5px; line-height: 1.66; }
.ex__zh { margin-top: 2px; font-size: var(--fs-s); color: var(--ink-3); }

.studyfoot {
  position: sticky;
  bottom: 0;
  z-index: 10;
  margin: 18px -18px 0;
  padding: 12px 18px calc(12px + var(--safe-b));
  background: linear-gradient(to top, var(--paper) 62%, rgba(245, 242, 234, 0));
}

.studyfoot > .btn,
.studyfoot > .revealbtn { width: 100%; }

/* 长内容页（学习卡、词条详情）：底栏不透明，免得正文从渐变里透出来 */
.studyfoot--solid {
  background: var(--paper);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -10px 22px -14px rgba(21, 24, 31, 0.22);
}

.revealbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  border: 1px solid var(--ink);
  border-radius: var(--r-l);
  background: var(--ink);
  color: #fffdf8;
  font-size: var(--fs-l);
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(21, 24, 31, .18), 0 16px 30px -18px rgba(21, 24, 31, .8);
  transition: transform .14s var(--ease), background .2s var(--ease);
}

.revealbtn:active { transform: scale(.98); background: #000; }

.studyfoot__hint {
  margin-top: 9px;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--ink-4);
  letter-spacing: .03em;
}

.grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.grade {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 11px 4px 9px;
  border: 1px solid rgba(21, 24, 31, .12);
  border-radius: var(--r-m);
  background: var(--paper-2);
  cursor: pointer;
  transition: transform .14s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
  animation: pop .26s var(--ease-out) both;
}

.grade:nth-child(2) { animation-delay: 30ms; }
.grade:nth-child(3) { animation-delay: 55ms; }
.grade:nth-child(4) { animation-delay: 75ms; }
.grade:active { transform: scale(.96); }

.grade__k { font-size: var(--fs-m); font-weight: 620; letter-spacing: .01em; }

.grade__v {
  font-family: var(--font-data);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  letter-spacing: .02em;
}

.grade[data-r="again"] .grade__k { color: var(--pen); }
.grade[data-r="hard"] .grade__k { color: var(--ink-2); }
.grade[data-r="good"] .grade__k { color: var(--jade); }
.grade[data-r="easy"] .grade__k { color: var(--jade); }

.donescreen {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12vh 10px 40px;
  animation: slideUp .4s var(--ease-out) both;
}

.donescreen__n {
  font-family: var(--font-data);
  font-size: 64px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--ink);
}

.donescreen__t { margin-top: 14px; font-size: var(--fs-l); font-weight: 620; }
.donescreen__d { margin-top: 6px; max-width: 280px; font-size: var(--fs-s); color: var(--ink-3); line-height: 1.66; }
.donescreen .btnrow { justify-content: center; margin-top: 22px; }

/* ============ 设置 ============ */

.setrow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
}

.setrow + .setrow { border-top: 1px solid var(--rule); }
.setrow > div:first-child { flex: 1; min-width: 0; }
.setrow__k { font-size: var(--fs-m); font-weight: 560; }
.setrow__h { margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.55; }
.setrow .input { width: 92px; flex: none; text-align: right; }
.setrow .btn { flex: none; }
.setrow .switch { flex: none; }

/* =====================================================================
   单词解析卡（学习队列 / 词条详情共用）
   ===================================================================== */

.wcard { display: block; }

.wcard__head {
  padding: 4px 0 16px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 18px;
}

/* 词条详情页顶部的小状态徽标 */
.wdhead {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 2px 0 0;
  font-size: var(--fs-xs);
  line-height: 1;
}
.wdhead__learned,
.wdhead__todo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.wdhead__learned { background: var(--jade-wash); color: var(--jade); }
.wdhead__learned svg { width: 12px; height: 12px; }
.wdhead__todo { background: var(--paper-3); color: var(--ink-3); }

.wcard__word {
  font-family: var(--font-ko);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.wcard__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: var(--fs-s);
  color: var(--ink-3);
}

.wcard__pron { font-family: var(--font-data); letter-spacing: 0.02em; }

.wcard__pos {
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--paper-3);
  color: var(--ink-2);
}

.wcard__kind {
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid var(--rule-2);
  color: var(--ink-3);
}

.wcard__hanja {
  font-family: var(--font-ui);
  color: var(--pen);
  letter-spacing: 0.08em;
}

.wcard__means {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 12px;
  font-size: var(--fs-l);
  color: var(--ink);
}

.wcard__body { display: block; }

.wcard__foot {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.wcard__foot .btn { flex: 1; }

/* ---- 分区 ---- */

.wsec { margin: 0 0 22px; }
.wsec:last-child { margin-bottom: 0; }

.wsec__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin-bottom: 9px;
}

.wsec--pen .wsec__label { color: var(--pen); }

.wsec--empty {
  padding: 14px 16px;
  border: 1px dashed var(--rule-2);
  border-radius: var(--r-3);
  background: var(--paper-2);
}
.wsec--empty .hint { margin: 5px 0 0; }

/* ---- 语素格 ---- */

.morphs {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 6px;
}

.morph {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 12px 6px;
  border: 1px solid var(--rule-2);
  border-radius: 8px;
  background: var(--paper-2);
  min-width: 56px;
}

.morph__ko {
  font-family: var(--font-ko);
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}

.morph__hanja {
  font-size: 12px;
  color: var(--pen);
  letter-spacing: 0.06em;
}

.morph__gloss {
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.3;
}

.morph__plus {
  align-self: center;
  color: var(--ink-4);
  font-size: 13px;
}

/* 复习卡里的紧凑版 */
.answer__morphs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
}
.morph--sm { padding: 4px 9px; min-width: 0; flex-direction: row; gap: 5px; align-items: baseline; }
.morph--sm .morph__ko { font-size: 17px; }
.morph--sm .morph__hanja { font-size: 11px; }
.morph--sm .morph__gloss { font-size: 11px; }

/* ---- 同族词 ---- */

.relchips { display: flex; flex-wrap: wrap; gap: 8px; }

.relchip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid var(--rule-2);
  border-radius: 8px;
  background: var(--paper-2);
  cursor: pointer;
  font: inherit;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.relchip:active { transform: scale(0.98); }
.relchip:hover { border-color: var(--ink-3); }

.relchip__ko { font-family: var(--font-ko); font-size: 17px; font-weight: 600; color: var(--ink); }
.relchip__hanja { font-size: 11px; color: var(--pen); }
.relchip__zh { font-size: 12px; color: var(--ink-3); }

/* ---- 易混 ---- */

.confuse {
  padding: 10px 0;
  border-top: 1px solid var(--rule);
}
.confuse:first-of-type { border-top: 0; padding-top: 0; }

.confuse__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.confuse__ko { font-family: var(--font-ko); font-size: 19px; font-weight: 600; }
.confuse__hanja { font-size: 12px; color: var(--pen); letter-spacing: 0.06em; }
.confuse__zh { font-size: 13px; color: var(--ink-2); }
.confuse__diff { margin-top: 4px; font-size: var(--fs-s); color: var(--ink-3); line-height: 1.6; }

/* ---- 构词套路 ---- */

.pattern {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.pattern__form {
  font-family: var(--font-data);
  font-size: 17px;
  font-weight: 700;
  color: var(--pen);
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--pen-wash);
}
.pattern__role { font-size: var(--fs-s); color: var(--ink-2); }
.pattern__gloss { margin-top: 8px; font-size: var(--fs-s); color: var(--ink-3); line-height: 1.7; }

/* ---- 声音的意思 ---- */

.sound__axis { font-size: var(--fs-m); color: var(--ink); line-height: 1.7; }
.sound__pair {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
  font-size: var(--fs-s);
  color: var(--ink-3);
}
.sound__pair b { font-family: var(--font-ko); font-size: 17px; color: var(--ink); }
.sound__note { margin-top: 6px; font-size: var(--fs-s); color: var(--ink-3); line-height: 1.7; }

/* ---- 记忆钩子 ---- */

.hook {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 20px;
  border-radius: var(--r-3);
  background: var(--hl-2);
  border-left: 3px solid var(--pen);
  font-size: var(--fs-m);
  line-height: 1.75;
  color: var(--ink);
}
.hook__mark {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--pen);
  padding-top: 4px;
}

.answer__hook {
  margin-top: 12px;
  padding: 9px 12px;
  border-left: 2px solid var(--pen);
  background: var(--hl-2);
  border-radius: 0 6px 6px 0;
  font-size: var(--fs-s);
  line-height: 1.7;
}

/* ---- 例句 / 变形 ---- */

.wex {
  display: flex;
  gap: 11px;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
}
.wex:first-of-type { border-top: 0; padding-top: 0; }
.wex__n {
  flex: none;
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--ink-4);
  padding-top: 4px;
  width: 14px;
}
.wex__body { flex: 1; min-width: 0; }
.wex__ko { font-family: var(--font-ko); font-size: 16px; line-height: 1.6; color: var(--ink); }
.wex__zh { margin-top: 3px; font-size: var(--fs-s); color: var(--ink-3); line-height: 1.6; }

.conjrow { display: flex; flex-wrap: wrap; gap: 8px; }
.conjrow__item {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 12px;
  border-radius: 8px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
}
.conjrow__k { font-size: 10px; color: var(--ink-4); letter-spacing: 0.08em; }
.conjrow__v { font-family: var(--font-ko); font-size: 16px; color: var(--ink); }

/* =====================================================================
   学习队列（先回忆、再看讲解）
   ===================================================================== */

.recall {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8vh 0 0;
}

.recall__kind {
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  color: var(--ink-3);
  margin-bottom: 18px;
}

.recall__word {
  font-family: var(--font-ko);
  font-size: 52px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.recall__pron {
  margin-top: 14px;
  font-family: var(--font-data);
  font-size: 16px;
  color: var(--ink-3);
}

.recall__hint {
  margin-top: 26px;
  font-size: var(--fs-s);
  color: var(--ink-4);
}

/* 今日页里「学新词」是主任务，给一点强调 */
.task--lead {
  border-color: var(--ink);
  box-shadow: var(--shadow-2);
}
.task--lead .task__title { color: var(--ink); }

/* =====================================================================
   词库索引
   ===================================================================== */

.libbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 12px;
}
.libbar__count { margin-left: auto; font-size: 11px; color: var(--ink-4); }

.seg--sm button { font-size: var(--fs-s); padding: 6px 10px; min-height: 0; white-space: nowrap; }

.jumpbar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 0 10px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 4px;
}

.jumpbar__k {
  min-width: 26px;
  padding: 4px 5px;
  border: 0;
  border-radius: 5px;
  background: none;
  font-family: var(--font-ko);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}
.jumpbar__k:hover { background: var(--paper-3); color: var(--ink); }
.jumpbar__k:active { background: var(--ink); color: var(--paper-2); }

.libgroup { margin-top: 10px; }

.libgroup__head {
  position: sticky;
  top: var(--topbar-h);
  z-index: 5;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 2px 6px;
  font-family: var(--font-ko);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  background: linear-gradient(to bottom, var(--paper) 70%, rgba(245, 242, 234, 0));
}

.wordrow__top { display: flex; align-items: baseline; gap: 8px; }
.wordrow__hanja { font-size: 12px; color: var(--pen); letter-spacing: 0.06em; }
.wordrow__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pen);
  align-self: center;
  opacity: 0.75;
}

/* 导入页的「顺便写讲解」 */
.checkrow {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 12px 0 0;
  font-size: var(--fs-s);
  line-height: 1.6;
  color: var(--ink-3);
  cursor: pointer;
}
.checkrow input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--pen);
}

.btnrow--center { justify-content: center; }