/* frontend/css/korzina/detail.css — 단어 상세 시트 · 사전/예문/한자 섹션 · 알럿/가져오기 모달.
   K-P1(2026-09-23): 색·글꼴·간격을 iOS(WordDetailViewController · AnkiImportViewController)로 통일.
   구조(모달 시트 · 한 장 마법사)는 K-2까지의 웹 구조를 그대로 두었다 — 우선순위 밖(§14 결정 5).
   정본 ~/Desktop/control/KORZINA-WEB-PARITY.md §14. */

/* ===== 모달 ===== */
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4);
  z-index: 10000; align-items: center; justify-content: center; padding: 16px;
}
.modal-overlay.show { display: flex; }
/* K-P3(§16) — 시트 프레임에서는 모달도 시트 안에 뜬다(앱과 같게). 띠는 덮지 않는다. */
html.kz-touch .modal-overlay {
  top: var(--kz-band-h);
  border-radius: var(--kz-sheet-r-top) var(--kz-sheet-r-top)
                 var(--kz-sheet-r-bottom) var(--kz-sheet-r-bottom);
}
.modal {
  background: var(--ios-card); border-radius: 16px; max-width: 560px; width: 100%;
  max-height: 90vh; overflow-y: auto; padding: 20px;
  font-size: 15px;
}
.modal h2 { font-size: 20px; font-weight: 700; color: var(--ios-label); margin-bottom: 4px; }
.modal .modal-sub { font-size: 15px; color: var(--ios-secondary); margin-bottom: 16px; }
.map-grid { display: grid; grid-template-columns: 64px 1fr; gap: 10px 12px; align-items: center; margin: 12px 0; }
.map-grid label { font-size: 15px; }
.map-grid select, .modal input[type=text], .modal input[type=number], .modal-row select {
  padding: 9px 10px; border: 1px solid var(--ios-separator); border-radius: var(--kz-chip-radius);
  font-family: inherit; font-size: 15px; width: 100%;
  background: var(--ios-surface); color: var(--ios-label);
}
.sample-preview { font-size: 13px; border: 1px solid var(--ios-separator); border-radius: var(--kz-chip-radius); overflow-x: auto; margin: 12px 0; }
.sample-preview table { width: 100%; border-collapse: collapse; }
.sample-preview th { background: var(--ios-grouped-bg); padding: 6px 10px; text-align: left; font-weight: 600; color: var(--ios-secondary); white-space: nowrap; }
.sample-preview td { padding: 6px 10px; border-top: 1px solid var(--ios-separator); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sample-preview th.mapped, .sample-preview td.mapped { background: var(--kz-brand-soft); }
.modal-row { display: flex; gap: 14px; margin: 12px 0; flex-wrap: wrap; }
.modal-row > div { flex: 1; min-width: 150px; }
.modal-row label { font-size: 13px; color: var(--ios-secondary); display: block; margin-bottom: 5px; }
/* A2(2026-09-23): 폴더 나누기 아래 각주 — iOS AnkiImportViewController의 folder 섹션 footer
   (anki.folder.hint)를 웹 한 장 모달에 옮긴 자리. */
.anki-hint { font-size: 13px; color: var(--ios-secondary); margin: -4px 0 12px; line-height: 1.45; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }
.btn-modal {
  padding: 0 18px; height: 44px; border-radius: var(--kz-radius); font-family: inherit;
  font-size: 17px; font-weight: 600; cursor: pointer; border: none;
}
.btn-modal.primary { background: var(--kz-brand); color: var(--kz-on-accent); }
.btn-modal.ghost { background: var(--ios-fill); color: var(--kz-brand); }

/* ===== 단어 상세 화면 (iOS WordDetailViewController) =====
   K-4(2026-09-24): 바텀 시트 모달 → 내비 스택의 한 화면(#screen-detail).
   레이아웃은 복습 화면(#screen-review)과 같은 틀 — 내비 아래를 꽉 채우고 스크롤은 안쪽에서만,
   하단 바(이전/재생/다음)는 iOS setupBottomBar처럼 safe area 위에 고정된다. */
#screen-detail.active,
#screen-import.active {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(var(--kz-sa-top) + var(--kz-nav-h));
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-width: 900px;
  margin: 0 auto;
  background: var(--ios-grouped-bg);
}
html.kz-touch #screen-detail.active,
html.kz-touch #screen-import.active { top: calc(var(--kz-band-h) + var(--kz-nav-h)); }

.wd-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px var(--kz-pad) 12px;
  background: var(--ios-grouped-bg);
}
.wd-card {
  background: var(--ios-card);
  border-radius: var(--kz-radius);   /* K-P4 실측 — 상세 카드는 14pt(목록 카드 25pt와 다르다) */
  padding: 14px 16px;
}
.wd-card.wd-headcard { padding: 20px; }   /* iOS embed(headerStack, pad: 20) */
.wd-card.wd-dict { max-height: none; overflow: visible; }
.wd-card[hidden] { display: none; }
/* K-P4(2026-09-24) — 헤더 카드는 iOS와 같은 **가운데 정렬 세로 스택**이다
   (WordDetailViewController L227~L257: headerStack alignment .center · spacing 8 · pad 20,
   단어 40 bold / 읽기 17 headline ruby / 뜻 19 body secondary). 시뮬 캡처 vocab.word로 확인.
   DOM은 종전 그대로 두고(하네스가 .wd-head-main의 자식 구조를 본다) 표시만 블록으로 바꾼다. */
.wd-head-row { display: flex; align-items: center; gap: 0; }
.wd-head-main { flex: 1; min-width: 0; text-align: center; }
.wd-word { display: block; font-size: 40px; font-weight: 700; line-height: 1.15; color: var(--ios-label); }
.wd-reading { display: block; font-size: 17px; font-weight: 600; color: var(--kz-ruby); margin: 8px 0 0; }
.wd-meaning { font-size: 19px; color: var(--ios-secondary); margin: 8px 0 0; }
.wd-context { font-size: 13px; color: var(--ios-secondary); margin-top: 8px; }
.wd-field {
  font-size: 13px;
  color: var(--ios-secondary);
  margin-bottom: 8px;
}
.wd-deck-btn {
  width: 100%;
  text-align: left;
  padding: 11px 12px;
  border: none;
  border-radius: var(--kz-radius-sm);
  background: var(--ios-fill);
  color: var(--ios-label);
  font-family: inherit;
  font-size: 17px;
  cursor: pointer;
}
.wd-status-body { font-size: 15px; color: var(--ios-label); }
.wd-leech { font-size: 13px; color: var(--ios-red); margin-top: 6px; }
.wd-delete {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: var(--kz-radius);
  background: var(--ios-card);
  color: var(--ios-red);
  font-family: inherit;
  font-size: 17px;
  cursor: pointer;
}

/* 하단 바 — [‹ 이전][● 56 원형 재생][다음 ›] (iOS setupBottomBar) */
.wd-navbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 16px calc(8px + var(--kz-sa-bottom));
  background: var(--ios-card);
  border-top: 1px solid var(--ios-separator);
}
.wd-bar-ghost {
  border: none;
  background: none;
  color: var(--kz-brand);
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  padding: 10px 6px;
  cursor: pointer;
}
.wd-bar-ghost:disabled { color: var(--ios-tertiary); cursor: default; }
.wd-bar-play {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: var(--kz-brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
}
.wd-bar-play svg { width: 26px; height: 26px; fill: currentColor; }
.wd-bar-play:active { transform: scale(0.97); }
.wd-bar-play:disabled { background: var(--ios-tertiary); cursor: default; box-shadow: none; }

/* 재생 설정 — 토글 3행 + (ja) 보이스 한 줄(iOS UISwitch 규격 51×31) */
.wd-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  font-size: 17px;
  color: var(--ios-label);
  cursor: pointer;
}
.wd-toggle {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 51px;
  height: 31px;
  border-radius: 16px;
  background: rgba(120, 120, 128, 0.16);
  position: relative;
  cursor: pointer;
  transition: background 0.18s ease;
  margin: 0;
}
.wd-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.16);
  transition: transform 0.18s ease;
}
.wd-toggle:checked { background: var(--kz-brand); }
.wd-toggle:checked::after { transform: translateX(20px); }
.wd-voice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  font-size: 17px;
  color: var(--ios-label);
}
.wd-voice-row > span { flex: 0 0 auto; white-space: nowrap; }
.wd-voice-btn {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  padding: 8px 12px;
  text-align: right;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== 사전 · 예문 · 한자 섹션 ===== */
.wd-dict-title { font-size: 13px; color: var(--ios-secondary); margin-bottom: 8px; }
.wd-entry { margin-bottom: 12px; }
.wd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.wd-chips .chip { font-size: 12px; background: var(--ios-fill); padding: 2px 9px; border-radius: 999px; color: var(--ios-secondary); }
.wd-sense { margin: 6px 0 10px; }
.wd-sense-lemma { font-size: 15px; font-weight: 600; color: var(--ios-label); }
.wd-sense-def { font-size: 13px; color: var(--ios-secondary); margin-top: 2px; }
.wd-example { font-size: 13px; color: var(--ios-label); margin-top: 4px; padding-left: 10px; border-left: 3px solid var(--ios-separator); }
.wd-attribution { font-size: 11px; color: var(--ios-secondary); margin-top: 10px; }
.wd-empty { font-size: 15px; color: var(--ios-secondary); }
.wd-kj-row { display: flex; gap: 12px; align-items: flex-start; padding: 7px 0; }
.wd-kj-row + .wd-kj-row { border-top: 1px solid var(--ios-separator); }
.wd-kj-lit { font-size: 30px; line-height: 1.25; flex-shrink: 0; color: var(--ios-label); }
.wd-kj-ok { font-size: 15px; font-weight: 600; margin-bottom: 1px; color: var(--ios-label); }
.wd-kj-parts { font-size: 12px; color: var(--ios-secondary); margin-bottom: 1px; }
.wd-kj-pc { font-weight: 600; color: var(--kz-brand); }
.wd-kj-psep { opacity: .5; }
.wd-kj-tag { font-size: 10px; font-weight: 600; color: var(--kz-brand); }
.wd-kj-read { font-size: 12px; color: var(--ios-label); }
.wd-kj-read + .wd-kj-tag { margin-left: 8px; }
.wd-kj-mean { font-size: 13px; color: var(--ios-secondary); margin-top: 2px; }
.wd-kj-row .wd-chips { margin: 4px 0 0; }
.wd-jaex-ja { padding: 2px 0 8px; }

/* ===== 폰 마감 ===== */
@media (max-width: 699px) {
  .wd-scroll { padding: 4px 16px 10px; }   /* K-P4 — 카드 좌우 인셋은 앱과 같은 16pt */
}

/* ===== Anki 가져오기 화면 (iOS AnkiImportViewController — insetGrouped 4섹션) ===== */
.ai-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 var(--kz-pad) 12px;
}
.ai-bottom {
  flex: 0 0 auto;
  padding: 10px var(--kz-pad) calc(12px + var(--kz-sa-bottom));
}
.ai-bottom:empty { display: none; }
.ai-section + .ai-section { margin-top: 6px; }
.ai-footer {
  font-size: 13px;
  color: var(--ios-secondary);
  line-height: 1.45;
  padding: 7px 16px 0;
}
.ai-row {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  font-family: inherit;
  color: var(--ios-label);
  padding: 11px 16px;
}
.ai-row + .ai-row { border-top: 1px solid var(--ios-separator); }
.ai-row-value {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  cursor: pointer;
}
.ai-row-value .ai-row-label { flex: 1 1 auto; min-width: 0; }
.ai-row-value .ai-row-value {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--kz-brand);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-row-value.danger .ai-row-value { color: var(--ios-red); }
.ai-row-chevron { flex: 0 0 auto; color: var(--ios-tertiary); font-size: 17px; }
.ai-row-sample { cursor: default; }
.ai-sample-main { font-size: 17px; font-weight: 600; }
.ai-sample-reading { font-size: 13px; color: var(--ios-red); margin-left: 8px; }
.ai-sample-sub { font-size: 15px; color: var(--ios-secondary); margin-top: 2px; }
.ai-row-field input {
  width: 100%;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 17px;
  color: var(--ios-label);
  padding: 0;
}
.ai-row-field input:focus { outline: none; }
.ai-row-seg { padding: 8px 16px; }
.ai-row-seg .kz-segment { margin: 0; }
.ai-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
/* 파싱·업로드 중 — iOS는 화면 가운데 UIActivityIndicator + 문구 하나뿐이다. */
.ai-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 60vh;
}
.ai-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--ios-separator);
  border-top-color: var(--ios-secondary);
  animation: aiSpin 0.9s linear infinite;
}
.ai-loading-text { font-size: 15px; color: var(--ios-secondary); }
@keyframes aiSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ai-spinner { animation: none; } }