/* ===================================================================
   접근성 애드온 — 글자 크기 조절(--fs) + 야간(다크) 모드
   style.css 뒤에 로드. 기본값(--fs:1 / light)은 기존과 100% 동일.
   clusteryongin.mycafe24.com · 북오산자이 드포레
=================================================================== */
:root{ --fs:1; }                 /* 글자 배율 (0.9 ~ 1.4) */
html{ color-scheme:light; }
:root[data-theme="dark"]{ color-scheme:dark; }

/* ── ① 글자 크기 조절 : 본문 텍스트를 배율(var(--fs))로 스케일 ──
   기존 px 디자인을 유지하면서 calc(원본 × 배율)로만 키움 → 레이아웃 보존.
   헤더/GNB/유틸바/플로팅 버튼(=UI 크롬)은 제외해 메뉴 깨짐 방지. */
body{ font-size:calc(16px * var(--fs)); }         /* 크기 미지정 본문 텍스트 기준 */

.summary li{ font-size:calc(16.5px * var(--fs)); }
.src-note,.tbl caption,.crumb,.news-meta,.reg-note{ font-size:calc(12.5px * var(--fs)); }
.tbl table th,.tbl table td{ font-size:calc(15px * var(--fs)); }
.card h3{ font-size:calc(19px * var(--fs)); }
.card p{ font-size:calc(14.5px * var(--fs)); }
.card .c-num{ font-size:calc(13px * var(--fs)); }
.card .c-big{ font-size:calc(26px * var(--fs)); }
.type-card b{ font-size:calc(22px * var(--fs)); }
.type-card .t-cnt{ font-size:calc(15px * var(--fs)); }
.type-card span{ font-size:calc(13px * var(--fs)); }
.tl b{ font-size:calc(14.5px * var(--fs)); }
.tl span{ font-size:calc(13px * var(--fs)); }
.comm-grid figcaption{ font-size:calc(13.5px * var(--fs)); }
.fig-card figcaption{ font-size:calc(14px * var(--fs)); }
.faq-q{ font-size:calc(16px * var(--fs)); }
.faq-a{ font-size:calc(15px * var(--fs)); }
.tabs button{ font-size:calc(15px * var(--fs)); }
.rp-head b{ font-size:calc(15px * var(--fs)); }
.rp-head span{ font-size:calc(12px * var(--fs)); }
.rp-val{ font-size:calc(14.5px * var(--fs)); }
.rp-val.gold{ font-size:calc(16px * var(--fs)); }
.news-card h3{ font-size:calc(18.5px * var(--fs)); }
.news-detail{ font-size:calc(14px * var(--fs)); }
.news-more{ font-size:calc(13.5px * var(--fs)); }
.reg-form label{ font-size:calc(13.5px * var(--fs)); }
.reg-form input[type=text],.reg-form input[type=tel],.reg-form select,.reg-form textarea{ font-size:calc(15px * var(--fs)); }
.reg-form .agree{ font-size:calc(13px * var(--fs)); }
.reg-submit{ font-size:calc(17px * var(--fs)); }
.reg-done h3{ font-size:calc(22px * var(--fs)); }
.sec-head h2{ font-size:calc(clamp(24px,3.4vw,34px) * var(--fs)); }
.footer{ font-size:calc(13px * var(--fs)); }
/* 인라인 font-size를 대체하는 배율 유틸 클래스 */
.fss-14{ font-size:calc(14px * var(--fs)); }
.fss-145{ font-size:calc(14.5px * var(--fs)); }
.fss-15{ font-size:calc(15px * var(--fs)); }
/* 표 모바일 압축값도 배율 유지(style.css 520px 규칙보다 뒤 = 우선) */
@media (max-width:520px){
  .tbl table th,.tbl table td{ font-size:calc(12.5px * var(--fs)); }
}

/* ── ② 야간(다크) 모드 — 옵션 B : 눈 편한 다크. 흰 이미지와 충돌 최소화 ──
   조감도·평면도 이미지는 자연색 유지, 페이지 배경·카드·글자만 어둡게. */
:root[data-theme="dark"]{
  --ivory:#131E19;   /* 페이지 배경 */
  --paper:#1C2A23;   /* 카드·표·폼 등 표면 */
  --ink:#E7ECE7;     /* 본문 글자(순백 대신 살짝 낮춰 눈부심 완화) */
  --ink2:#A6B3AB;    /* 보조 글자 */
  --line:#2E3D34;    /* 경계선 */
  --green:#123B2D;   /* 다크 배경용 브랜드 그린(유지) */
  --green3:#1E5140;
  --gold:#D8BC7E;
  --gold-d:#C6A867;
}

/* 부드러운 전환 (이른 인라인 스크립트가 초기 테마를 미리 적용 → 로드시 깜빡임 없음) */
body,.header,.card,.type-card,.faq-item,.tbl,.reg-form,.tabs button,.rp-list,.fig-card,.to-top,.drawer-panel{
  transition:background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* 흰색으로 하드코딩된 표면 → 다크 표면으로 */
:root[data-theme="dark"] .header{ background:rgba(19,30,25,.94); }
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .type-card,
:root[data-theme="dark"] .faq-item,
:root[data-theme="dark"] .tbl,
:root[data-theme="dark"] .reg-form,
:root[data-theme="dark"] .reg-done,
:root[data-theme="dark"] .tabs button,
:root[data-theme="dark"] .rp-list,
:root[data-theme="dark"] .fig-card,
:root[data-theme="dark"] .drawer-panel{ background:var(--paper); }
:root[data-theme="dark"] .to-top{ background:var(--paper); color:var(--gold); }
:root[data-theme="dark"] .gnb a:hover{ background:#203028; }
:root[data-theme="dark"] .tbl table tbody th{ background:#22322A; color:#CFE0D4; }
:root[data-theme="dark"] .rp-track{ background:#26332C; }
:root[data-theme="dark"] .fig-card figcaption{ background:#1F2C25; }
:root[data-theme="dark"] .tl::before{ background:var(--paper); }
:root[data-theme="dark"] .reg-form input[type=text],
:root[data-theme="dark"] .reg-form input[type=tel],
:root[data-theme="dark"] .reg-form select,
:root[data-theme="dark"] .reg-form textarea{ background:#22322A; color:var(--ink); }

/* 라이트 모드에서 '진한 그린 = 어두운 글자'로 쓰인 곳 → 다크에선 밝게 */
:root[data-theme="dark"] :is(
  .brand .b-name,.gnb .g-tel,.sec-head h2,.card h3,.type-card b,.tl b,
  .news-card h3 a,.reg-done h3,.rp-val,.rp-me .rp-head b,.rp-head b){ color:#EAF0EB; }
:root[data-theme="dark"] :is(
  .summary li b,.faq-a b,.tbl .hl,.gnb a.on,.news-more){ color:var(--gold); }
:root[data-theme="dark"] .menu-btn span{ background:var(--gold); }

/* 야간엔 대형 히어로 이미지만 살짝 톤다운(평면도·조감도 본문 이미지는 자연색 유지) */
:root[data-theme="dark"] .hero-slide img{ filter:brightness(.85) saturate(.96); }

/* ── 유틸바 항상 노출: 스크롤해도 상단 고정(헤더는 그 아래로) ── */
.utilbar{ position:sticky; top:0; z-index:101; }
.header{ top:38px; }   /* 유틸바(38px) 높이만큼 내려 겹침 방지 */

/* ── ③ 접근성 컨트롤 위젯 (상단 유틸바) ── */
.a11y{ display:flex; align-items:center; gap:6px; }
.a11y .a11y-grp{ display:flex; align-items:center; gap:2px;
  background:rgba(255,255,255,.09); border-radius:999px; padding:2px; }
.a11y button{ appearance:none; border:0; background:transparent; color:#E7EDE8;
  font-family:inherit; font-weight:700; line-height:1; cursor:pointer;
  height:27px; min-width:29px; padding:0 8px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center; gap:1px; transition:.15s; }
.a11y button:hover{ background:rgba(255,255,255,.18); color:#fff; }
.a11y button:active{ transform:scale(.94); }
.a11y button:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
.a11y .a11y-fs{ font-size:13px; }
.a11y .a11y-fs sup{ font-size:10px; line-height:0; }
.a11y .a11y-fs[data-fs="up"]{ font-size:15px; }
.a11y .a11y-fs[data-fs="down"]{ font-size:11px; }
.a11y .a11y-theme{ font-size:15px; margin-left:2px; }
.a11y .a11y-theme .ic{ display:none; }
.a11y .a11y-theme[data-mode="auto"] .ic-auto{ display:inline; }
.a11y .a11y-theme[data-mode="light"] .ic-sun{ display:inline; }
.a11y .a11y-theme[data-mode="dark"] .ic-moon{ display:inline; }
@media (max-width:400px){
  .a11y button{ min-width:26px; padding:0 6px; height:26px; }
}
@media (prefers-reduced-motion:reduce){
  body,.header,.card,.type-card,.faq-item,.tbl,.reg-form,.tabs button,.rp-list,.fig-card,.to-top,.drawer-panel{ transition:none; }
}