/* ═══════════════════════════════════════════════════════════════
   unFold 공통 기반 — 손님 화면 모든 페이지가 페이지 <style> 보다 먼저 링크한다.
   페이지 스타일이 뒤에 오므로 여기 규칙은 «기본값»이다.
   (가이드 95번 4-1 · 4-5 · 2-2 · 5-4)
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* 삼성 인터넷 강제 다크 모드가 그림책 색을 뒤집는 것을 막는다 */
  color-scheme: only light;

  --uf-focus: #1d4ed8;
  --uf-safe-top: env(safe-area-inset-top, 0px);
  --uf-safe-bottom: env(safe-area-inset-bottom, 0px);
  --uf-touch: 44px;

  /* z-index 체계: 헤더 < 드롭다운 < 배너 < 모달 < 토스트 */
  --uf-z-header: 100;
  --uf-z-dropdown: 500;
  --uf-z-banner: 1500;
  --uf-z-modal: 3000;
  --uf-z-toast: 3500;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* word-break: keep-all 은 띄어쓰기가 있는 한국어용이다.
   띄어쓰기가 없는 일본어·중국어에 걸리면 제목 전체가 한 단어가 되어 카드·격자를 밀어낸다(ja 390px 에서 +128px). */
html:lang(ja) *,
html:lang(zh) * {
  word-break: normal !important;
  line-break: strict;
}

/* hidden 속성이 페이지의 display 규칙에 지지 않게 */
[hidden] {
  display: none !important;
}

/* 키보드 포커스 링 — 마우스·터치에는 보이지 않는다 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--uf-focus);
  outline-offset: 2px;
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

/* 모션 줄이기 설정을 켠 아이 (전정기관 민감) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* iOS 는 16px 미만 입력칸에 포커스하면 화면을 확대하고 되돌리지 않는다 (가이드 2-7②).
   페이지마다 입력칸 선택자가 달라(ID·미디어쿼리 안) 터치 기기에서만 잠근다. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* 터치 영역 44px — 보이는 크기는 그대로 두고 투명 히트 영역만 넓힌다 */
.lang-btn {
  position: relative;
}
.lang-btn::after {
  content: '';
  position: absolute;
  inset: -10px -2px;
}

/* 터치 기기에서 여러 페이지에 반복되는 조작 요소 44px */
@media (pointer: coarse) {
  .lang-btn {
    min-width: 44px;
  }
  header a.logo,
  a.back-btn {
    min-height: 44px;
  }
  a.back-btn {
    display: inline-flex;
    align-items: center;
  }
}

/* ── 부모 확인 창 (uf-common.js) ── */
.uf-gate {
  position: fixed;
  inset: 0;
  z-index: var(--uf-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(17, 24, 39, 0.55);
}
.uf-gate-card {
  width: min(360px, 100%);
  padding: 22px 20px 16px;
  border-radius: 20px;
  background: #fff;
  color: #1f2937;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
.uf-gate-title { font-size: 20px; font-weight: 800; }
.uf-gate-hint { margin-top: 6px; font-size: 14px; color: #4b5563; line-height: 1.5; }
.uf-gate-q { margin: 16px 0 12px; font-size: 28px; font-weight: 800; letter-spacing: 0.02em; }
.uf-gate-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.uf-gate-opt {
  min-height: 52px;
  border: 2px solid #d1d5db;
  border-radius: 14px;
  background: #fff;
  color: #1f2937;
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
}
.uf-gate-msg { min-height: 22px; margin-top: 8px; font-size: 14px; color: #b91c1c; }
.uf-gate-cancel {
  min-height: 44px;
  margin-top: 4px;
  padding: 8px 18px;
  border: none;
  background: none;
  color: #374151;
  font-size: 15px;
  text-decoration: underline;
  cursor: pointer;
}

/* ── 공통 헤더: 폰 메뉴 토글 (index · books · intro) ── */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--primary, #3E5FAC);
  transition: transform .2s, opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }
  .header-nav.open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px 16px 16px;
    background: var(--uf-surface, #fff);
    border-bottom: 3px solid var(--primary, #3E5FAC);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
  }
  .header-nav.open .nav-item {
    text-align: center;
    padding: 12px;
  }
  .header-nav.open .lang-switcher {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    justify-content: center;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, .08);
  }
  .header-nav.open .lang-btn {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 14px;
  }
}