/*
 * 보기 설정의 '기계 장치' 부분.
 *
 * 로그인 화면과 본 화면이 같이 쓴다 - 화면이 안 보이는 사람은 로그인부터 못 하므로
 * 로그인에도 같은 조절 기능이 있어야 한다. 두 화면의 색 팔레트는 서로 다르지만
 * 배율·간격·숫자 굵기와 설정 패널의 모양은 완전히 같다.
 *
 * 여기 있는 것
 *   1) html[data-scale] 이 실제로 크기를 바꾸는 규칙 (font-size 한 줄)
 *   2) 밀도·숫자굵기·초점굵기의 기본 변수
 *   3) 설정 버튼과 패널의 모양
 *
 * 여기 없는 것
 *   색 토큰(--bg/--panel/--ink…)과 고대비 팔레트. 그건 화면마다 다르므로
 *   각자의 스타일시트에서 정의한다. 이 파일은 그 변수를 '쓰기만' 한다.
 */

:root{
  --pad:1;        /* 여백 배수 (밀도) */
  --focus:2px;    /* 초점 테두리 굵기 */
  --numw:600;     /* 숫자 굵기 */
}

/*
 * 크기 배율. 이 한 줄이 전부다 - 나머지는 각 스타일시트가 rem 을 쓰기 때문에 따라온다.
 * 4단으로 끊는 이유: 슬라이더는 눌러서 맞추기가 어렵고, 단계가 있으면 '한 칸 더'로 끝난다.
 */
html{font-size:16px}
html[data-scale="2"]{font-size:18px}
html[data-scale="3"]{font-size:20px}
html[data-scale="4"]{font-size:23px}

/* 넉넉한 간격. 글자만 키우면 줄이 붙어 보여서 오히려 읽기 어렵다. */
html[data-density="comfy"]{--pad:1.45}
html[data-numbold="on"]{--numw:800}

/* ---- 설정 버튼 ------------------------------------------------------- */
.iconbtn{font:inherit;font-size:1rem;line-height:1;background:none;border:1px solid transparent;
         color:var(--ink);cursor:pointer;padding:.375rem .625rem;border-radius:.375rem;flex:none;
         min-width:2.5rem;min-height:2.25rem;display:inline-flex;align-items:center;gap:.25rem}
.iconbtn:hover{background:rgba(127,127,127,.12)}
.iconbtn:focus-visible{outline:var(--focus) solid var(--accent);outline-offset:2px}
.iconbtn[aria-expanded="true"]{background:rgba(127,127,127,.14);border-color:var(--rule)}
.iconbtn .cap{font-size:.813rem}

/* ---- 설정 패널 ------------------------------------------------------
   DevExtreme 팝업을 쓰지 않는다. 이 패널은 '위젯 크기가 잘못 보일 때'
   그것을 고치러 여는 곳이므로 위젯에 의존해선 안 된다. 순수 HTML 이다.
   배경은 --panel 이 없는 화면(로그인)에서도 뚫리지 않게 --card 로 폴백한다. */
.a11y-wrap{position:relative;flex:none}
.a11y-panel{position:absolute;right:0;top:calc(100% + .375rem);z-index:60;
            width:19rem;max-width:calc(100vw - 1.5rem);
            /* ★ 화면 밖으로 나가지 않게 높이를 묶고 창 안에서 스크롤한다.
               375x812 에 배율 1.44배를 걸면 창이 803px 이 되어 아래 71px -
               [기본값으로]·[닫기] 가 있는 줄 - 이 화면 밖으로 잘려 나갔다.
               dvh 를 쓰는 이유: 휴대전화는 주소창이 접히며 실제 높이가 변하는데
               vh 는 그걸 반영하지 않아 여전히 잘린다. 모르는 브라우저용으로
               vh 를 먼저 적어 둔다. */
            max-height:calc(100vh - 6.5rem);
            max-height:calc(100dvh - 6.5rem);
            overflow-y:auto;overscroll-behavior:contain;
            background:var(--panel,var(--card,#fff));color:var(--ink);
            border:1px solid var(--rule);border-radius:.5rem;
            box-shadow:0 .5rem 2rem rgba(0,0,0,.22);padding:.875rem;display:none;
            flex-direction:column;gap:.875rem;text-align:left}
.a11y-panel.on{display:flex}
.a11y-panel h4{margin:0;font-size:.875rem;font-weight:700}
.a11y-panel .hint{margin:0;font-size:.75rem;color:var(--soft);line-height:1.5;text-align:left}
.a11y-row{display:flex;flex-direction:column;gap:.375rem}
.a11y-row > label{font-size:.75rem;color:var(--soft);font-weight:600}
.a11y-seg{display:flex;gap:.25rem;flex-wrap:wrap}
.a11y-seg button{font:inherit;font-size:.813rem;padding:.438rem .625rem;min-height:2.25rem;flex:1 1 auto;
                 background:var(--bg);color:var(--ink);border:1px solid var(--rule);border-radius:.375rem;
                 cursor:pointer;white-space:nowrap}
.a11y-seg button:hover{border-color:var(--accent)}
.a11y-seg button:focus-visible{outline:var(--focus) solid var(--accent);outline-offset:1px}
.a11y-seg button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);
                                      color:var(--accent-ink,#fff);font-weight:700}
/* 글자 크기 버튼은 그 크기대로 보여준다 - 눌러 보기 전에 알 수 있다. */
.a11y-seg button.s1{font-size:.813rem} .a11y-seg button.s2{font-size:.938rem}
.a11y-seg button.s3{font-size:1.063rem} .a11y-seg button.s4{font-size:1.25rem}
.a11y-panel .foot{display:flex;justify-content:space-between;align-items:center;gap:.5rem;
                  border-top:1px solid var(--rule);padding-top:.75rem}

:root[data-contrast="high"] .a11y-row > label{color:var(--ink)}

/* 좁은 화면에서는 패널을 화면 폭에 맞춰 띄운다. */
@media (max-width:560px){
  .a11y-panel{position:fixed;left:.75rem;right:.75rem;top:3.5rem;width:auto;
              /* top 이 3.5rem 이므로 아래 여백까지 더해 그만큼 뺀다 */
              max-height:calc(100vh - 4.75rem);
              max-height:calc(100dvh - 4.75rem)}
  .iconbtn .cap{display:none}
}