/* ==========================================================================
   Cherry English 유입 도구 키트 — 스타일 (2026-09-30). /css/common.css 다음에 불러옵니다.
   사용법은 KIT.md. 컴포넌트 JS 는 /js/kit-ui.js.

   색: 제작 요청서(2026-09-30)의 체리 #B02042 · 강조 #E8424D · 아이보리 #FFFBF7.
   common.css 의 토큰을 **이 파일을 부른 페이지에서만** 덮어씁니다(다른 30개 도구는 그대로).
   명암비(실측 계산):
     #B02042 글자 — 흰 6.71 · 아이보리 6.51 · 보조면 #FCEEF2 5.96 / 흰 글자 on #B02042 6.71
     #546274 보조 글자 — 흰 6.22 · 아이보리 6.04 · 보조면 5.52
     🔴 #E8424D 는 흰 3.95 · 아이보리 3.84 — **글자·흰 글자 버튼에 쓰지 않습니다.**
        막대·테두리 같은 비텍스트 장식(3:1)에만: --kit-highlight.
     다크: #FF8AA5 표면 7.26 · #FF6B75(장식) 5.86 · 주색 위 글자 #101722 8.08
   ========================================================================== */
:root {
  --color-bg: #FFFBF7;
  --color-surface-soft: #FCEEF2;
  --color-primary: #B02042;
  --color-primary-hover: #8E1A35;
  --color-accent: #B02042;
  --color-accent-soft: #FCEEF2;
  --color-focus: #B02042;
  --color-grid: rgba(176, 32, 66, 0.04);
  --kit-highlight: #E8424D;
}

/* 🔴 위 :root 가 common.css 의 다크 값을 덮으므로, 위에서 바꾼 토큰은 여기서 **전부** 다시 적습니다.
      (bg·surface-soft 를 빠뜨리면 다크 모드에서 아이보리 바탕에 흰 글자가 됩니다 — 검수 때 실제로 났음) */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #101722;
    --color-surface-soft: #1E2B40;
    --color-primary: #FF8AA5;
    --color-primary-hover: #FFB3C4;
    --color-on-primary: #101722;
    --color-accent: #FF8AA5;
    --color-accent-soft: #34202A;
    --color-focus: #FFB3C4;
    --color-grid: rgba(255, 138, 165, 0.06);
    --kit-highlight: #FF6B75;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 영어 문장은 낱말 중간에서 끊지 않되, 긴 URL·낱말이 화면을 밀지 않게 합니다. */
[lang="en"] {
  word-break: normal;
  overflow-wrap: anywhere;
}

/* --- 장면 카드 ------------------------------------------------------------- */
.kit-scene {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--kit-highlight);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.kit-scene__meta {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.kit-scene__title {
  margin: 0;
  font-size: var(--text-xl);
  line-height: 1.35;
}

.kit-scene__text {
  margin: 0;
}

.kit-speech {
  margin: 0;
  padding: var(--space-4);
  border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);
  background: var(--color-surface-soft);
}

.kit-speech__who {
  display: block;
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.kit-speech__en {
  margin: var(--space-1) 0 0;
  font-size: var(--text-lg);
  line-height: 1.5;
}

.kit-speech__ko {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.kit-goal {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--kit-highlight);
  background: var(--color-bg);
  font-size: var(--text-sm);
}

/* --- 선택지 ---------------------------------------------------------------- */
.kit-choices {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  border: 0;
}

.kit-choice {
  display: flex;
  width: 100%;
  min-height: 56px;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  text-align: left;
  line-height: 1.5;
  cursor: pointer;
}

.kit-choice:hover:not(:disabled) {
  border-color: var(--color-primary);
}

.kit-choice__letter {
  display: inline-flex;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.kit-choice__body {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.kit-choice__en {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

.kit-choice__ko {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.kit-choice:disabled {
  cursor: default;
}

/* 고른 것 — 색만이 아니라 테두리 두께·채운 글자·"내 선택" 글씨로 구분합니다. */
.kit-choice[aria-pressed="true"] {
  border: 2px solid var(--color-primary);
  padding: calc(var(--space-4) - 1px);
}

.kit-choice[aria-pressed="true"] .kit-choice__letter {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.kit-choice[aria-pressed="true"]::after {
  flex: none;
  margin-left: auto;
  color: var(--color-primary);
  content: "내 선택";
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

/* --- 해설 ------------------------------------------------------------------ */
.kit-feedback {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 2px solid var(--color-text);
}

.kit-feedback__tag {
  justify-self: start;
  margin: 0;
  padding: var(--space-1) var(--space-3);
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  color: var(--color-success);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.kit-feedback__reply {
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.5;
}

.kit-feedback__why {
  margin: 0;
}

.kit-alts {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
  list-style: none;
}

.kit-alts__title {
  margin: 0;
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.kit-alts li span {
  display: block;
}

.kit-alts li span + span {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* --- 가려 말하기 ------------------------------------------------------------ */
.kit-cover {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.kit-cover__line {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: 1.6;
}

.kit-cover__ko {
  margin: 0;
  color: var(--color-text-muted);
}

.kit-mask {
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
}

.kit-cover__levels,
.kit-timer__presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.kit-chip {
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--text-sm);
  cursor: pointer;
}

.kit-chip[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: var(--weight-bold);
}

.kit-cover__listen {
  justify-self: start;
}

/* --- 타이머 ---------------------------------------------------------------- */
.kit-timer {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

.kit-timer__face {
  margin: 0;
  font-size: var(--text-stat);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-bold);
  line-height: 1.1;
}

/* --- 상태 문구·작은 안내 ------------------------------------------------------ */
.kit-status {
  min-height: 24px;
  margin: 0;
  font-size: var(--text-sm);
}

.kit-note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* --- 버튼 줄(복사·인쇄·저장·공유) ---------------------------------------------- */
.kit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.kit-actions .button {
  flex: 1 1 160px;
}

.kit-share {
  display: grid;
  gap: var(--space-3);
}

.kit-share__manual {
  display: grid;
  gap: var(--space-2);
}

/* --- 관련 학습자료·도구 목록 — 글줄 속 링크가 아니라 목록이므로 44px 를 줍니다 ---------- */
.kit-links {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kit-links a {
  display: flex;
  min-height: 44px;
  align-items: center;
}

/* --- 선택 기록(결과) ---------------------------------------------------------- */
.kit-record {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kit-record li {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
}

.kit-record__label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.kit-record__phrase {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

/* --- 결과 카드 이미지 -------------------------------------------------------- */
.kit-card {
  display: grid;
  gap: var(--space-3);
  max-width: 420px;
}

.kit-card__img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

@media print {
  .kit-actions,
  .kit-share,
  .kit-card,
  .kit-timer,
  .kit-cover__levels,
  .kit-cover__listen,
  .kit-status {
    display: none !important;
  }

  .kit-scene,
  .kit-cover,
  .kit-record li {
    break-inside: avoid;
  }
}