/* 한자 탭 전용 스타일 (공통 .card .btn .chip .meter .sheet 와 가나 탭의 .k-tabs .quiz .days 등을 함께 써요) */

/* 복습 카드 */
.kface { display: grid; place-items: center; align-content: center; gap: 10px; min-height: 280px; padding: 24px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); text-align: center; }
.kface .kzb { font-size: clamp(96px, 30vw, 148px); line-height: 1.05; color: var(--accent); }
.kface .kzb.sm { font-size: clamp(72px, 22vw, 104px); }
.kface .kko { font-size: 24px; font-weight: 700; line-height: 1.4; text-wrap: balance; }

/* 음독·훈독 줄 */
.krows { display: grid; gap: 6px; width: 100%; text-align: left; }
.krow { display: grid; grid-template-columns: 3rem 1fr auto; gap: 8px; align-items: baseline; padding: 8px 12px; border-radius: 10px; background: var(--surface2); }
.krow b { font-size: 12px; font-weight: 500; color: var(--muted); }
.krow span { font-family: var(--f-kana); font-weight: 500; font-size: 18px; line-height: 1.5; word-break: keep-all; }
.krow span i { font-style: normal; color: var(--muted); padding: 0 2px; }
.krow .x { color: var(--muted); font-weight: 400; }

/* 평가 버튼 */
.rate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rate button { position: relative; display: grid; gap: 2px; justify-items: center; align-content: center; min-height: 64px; padding: 6px 2px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.rate button b { font-size: 15px; }
.rate button small { font-size: 11px; color: var(--muted); }
.rate button kbd { position: absolute; top: 3px; right: 6px; font-family: var(--f-mono); font-size: 10px; color: var(--muted); }
.rate .r0 { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, var(--surface)); }
.rate .r2 { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.rate .r3 { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, var(--surface)); }

/* 한자 칸 */
.kgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 6px; }
.kc { height: 52px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--accent) calc(var(--lv, 0) * 9%), var(--surface)); font-family: var(--f-kana); font-weight: 500; font-size: 26px; line-height: 1; }
.kc.off { border-style: dashed; color: var(--muted); }
.kc.due { border: 2px solid var(--accent); }
.ksearch { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--fg); font-size: 15px; }

@media (max-width: 380px) { .rate button b { font-size: 13px; } }

/* 드래그로 고르는 칸: 글자가 선택되거나 길게 누를 때 메뉴가 뜨지 않게 */
.kc { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* 음·훈 듣기 버튼 */
.spk { align-self: center; min-height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 12px; white-space: nowrap; }