/* [쉬운 사용 · 모든 화면] 글자 크기 3단(기본 16 · 크게 18 · 아주 크게 20)과 버튼·여백 연동, 키보드 포커스 표시, 건너뛰기 링크, 움직임 줄이기.
   고치면 → 앱 전체의 글자·버튼 크기. 값은 설정 화면 첫 칸 '쉬운 사용'(js\core\access.js)이 <html data-fs="1|2|3" data-motion="reduce"> 로 켬.
   색은 tokens.css 의 var(--…)만 씀(새 색 없음). 대비 표는 tokens.css 머리말 참고. */

/* ── 글자 크기 단계: 기본(1) — 설계사 본문 15→16, 라벨 14→15 */
:root{ --fs-body:16px; }   /* 라벨·배지(cap)는 기존 14 그대로 — 좁은 폰 줄이 깨지지 않게 */
/* 크게(2): 글자 18 · 누르는 칸 48/52/60 · 여백 한 칸씩 넓게 */
html[data-fs="2"]{
  --fs-num:36px; --fs-t1:30px; --fs-t2:26px; --fs-t3:22px; --fs-tab:18px; --fs-body-l:20px; --fs-body:18px; --fs-cap:16px;
  --hit-pc:48px; --hit-m:52px; --hit-l:60px; --s-2:10px; --s-3:14px; --s-4:18px; --header-h:60px; --side-w:236px; --chip-h:36px;
}
/* 아주 크게(3): 글자 20 · 누르는 칸 52/56/64 */
html[data-fs="3"]{
  --fs-num:40px; --fs-t1:32px; --fs-t2:28px; --fs-t3:24px; --fs-tab:20px; --fs-body-l:22px; --fs-body:20px; --fs-cap:18px;
  --hit-pc:52px; --hit-m:56px; --hit-l:64px; --s-2:12px; --s-3:16px; --s-4:20px; --header-h:64px; --side-w:264px; --chip-h:40px;
}
/* 고객 화면(.is-customer)은 원래 한 단계 큼 → 같은 비율로 */
html[data-fs="2"] .is-customer{ --fs-body:19px; --fs-cap:17px; --hit-pc:52px; }
html[data-fs="3"] .is-customer{ --fs-body:21px; --fs-cap:19px; --hit-pc:56px; }
html[data-fs="2"] body, html[data-fs="3"] body{ font-size:var(--fs-body); }

/* ── 키보드 포커스: 어느 칸에 있는지 늘 보이게(2px 파랑 + 흰 테두리, 어두운 화면에서도 보임) */
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible, textarea:focus-visible,
input:focus-visible, [tabindex]:focus-visible, .rowbtn:focus-visible, .sc:focus-visible, .pick-card:focus-visible{
  outline:3px solid var(--blue); outline-offset:2px; border-radius:var(--r-sm); }
.input:focus-visible, input.input:focus{ outline:3px solid var(--blue); outline-offset:1px; }   /* 글 쓰는 칸도 같은 파란 테두리(월 고르기 칸 등 빠졌던 곳 포함) */
main:focus{ outline:none; }   /* 건너뛰기로 본문에 올 때 큰 테두리 안 보이게 */

/* ── 건너뛰기 링크: 첫 Tab 에서만 나타남 → Enter 하면 본문 */
.skip{ position:absolute; left:var(--s-3); top:-120px; z-index:100; padding:var(--s-3) var(--s-5); min-height:var(--hit-m); display:inline-flex; align-items:center;
  background:var(--blue); color:var(--on-blue); font-weight:var(--fw-b); border-radius:var(--r-md); text-decoration:none; }
.skip:focus-visible{ top:var(--s-3); }

html[data-fs="2"] .vlist>li{ height:84px; } html[data-fs="3"] .vlist>li{ height:96px; }
.skip:not(:focus-visible){ top:-120px; }   /* 마우스로 눌렀을 때는 안 보이고, 키보드 Tab 일 때만 나타남 */

/* ── 누르는 칸 44px 아래로 안 내려가게(칩은 눈에 보이는 높이와 별개로 보이지 않는 누름 영역 44 가 이미 있음) */
a.btn, button.btn, .tabbar a, .rows a, .rowbtn, summary, select, .appbar a, .appbar button{ min-height:44px; }
.btn-icon{ min-width:44px; }
input[type=checkbox], input[type=radio]{ min-width:24px; min-height:24px; }

/* ── 긴 글이 든 칩(첫 화면 업데이트 한 줄 등)은 폰 폭을 넘지 않게 줄 바꿈 — 글자를 키워도 잘리지 않음 */
.chip{ max-width:100%; }
a.chip{ white-space:normal; height:auto; min-height:var(--chip-h); padding-block:var(--s-1); line-height:var(--lh-cap); }

/* ── 고객 목록 줄: 배지가 둘일 때(회수 대상 + 보장분석 없음)·글자를 키웠을 때 폰 폭을 넘지 않게 배지를 줄 바꿈(칸 폭 30% 한도) */
.vlist .badge{ flex:0 1 auto; min-width:0; max-width:30%; white-space:normal; text-align:center; line-height:1.25; overflow-wrap:anywhere; }

/* ── 쉬운 사용 설정 칸(설정 화면 첫 칸) */
.easy-card{ border:var(--bw-focus) solid var(--blue); }
.fs-pick{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-2); }
.fs-pick button{ display:grid; justify-items:center; gap:var(--s-1); min-height:var(--hit-l); padding:var(--s-2); border:var(--bw) solid var(--line-input); border-radius:var(--r-md); background:var(--card); color:var(--t1); cursor:pointer; font-weight:var(--fw-m); }
.fs-pick button[aria-pressed="true"]{ border:var(--bw-focus) solid var(--blue); background:var(--blue-fill); color:var(--blue); padding:calc(var(--s-2) - 1px); }
.fs-pick .a1{ font-size:16px; } .fs-pick .a2{ font-size:18px; } .fs-pick .a3{ font-size:20px; }
.fs-pick small{ font-size:var(--fs-cap); color:var(--t3); font-weight:var(--fw-r); }
.fs-pick button[aria-pressed="true"] small{ color:var(--blue); }

/* ── 첫 화면 '자주 쓰는 3개' 줄(폰 한 손: 엄지가 닿는 큰 칸 3개를 맨 위에) */
.fav3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-2); }
.fav3 a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s-1); min-height:84px; padding:var(--s-3) var(--s-2); border-radius:var(--r-lg); text-decoration:none; text-align:center;
  font-size:var(--fs-body); font-weight:var(--fw-b); line-height:var(--lh-cap); background:var(--card); color:var(--t1); border:var(--bw) solid var(--line-strong); }
.fav3 a.is-main{ background:var(--blue); color:var(--on-blue); border-color:var(--blue); }
.fav3 a .badge{ margin:0; }
.sc-more>summary{ list-style:none; display:flex; align-items:center; gap:var(--s-2); min-height:var(--hit-pc); cursor:pointer; color:var(--blue); font-weight:var(--fw-m); }
.sc-more>summary::-webkit-details-marker{ display:none; }

/* ── 움직임 줄이기: 기기 설정이거나 우리 설정에서 켰을 때 — 깜빡이는 막대·넘어가는 효과·돌아가는 표시를 모두 멈춤 */
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after{
  animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* 11/6 밤 목차 단순화: 묶음 제목 한 줄(부제·숫자·그림 없음) · 하나뿐인 묶음은 바로 가는 한 줄 · 아래 글줄 하나 */
.mgroup>summary{min-height:var(--hit-pc)}
.menu-top.menu-one{background:none;margin:0;padding:var(--s-2) 0;min-height:var(--hit-pc);border-radius:0;border-bottom:var(--bw) solid var(--line)}
.menu-top.menu-one[aria-current="page"]{color:var(--blue);font-weight:var(--fw-m)}
.menu-top .h3,.mgroup>summary .h3{font-weight:var(--fw-m)}
.side .foot{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin-top:auto;padding-top:var(--s-2)}
.foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--t2)}
.foot a::before{content:"·";margin:0 var(--s-2);color:var(--t3);text-decoration:none;display:inline-block}
.foot a{text-decoration:none}
.foot .foot-warn{flex-basis:100%;color:var(--t2)}