/* [만들어진 파일] work/v2/fontsize.py — 글자 크기 조절. 손으로 고치지 말 것 — 다시 지으면 덮인다.
   단계 값은 website/assets/css/tokens.css 에서 읽었다(본원 v1 과 같은 속성 html[data-size] · 같은 열쇠 dn-size). 서사 쪽의 @media 바탕(main.css 80% 등)은 v2-extra.css 끝에 따로 있다. */
html[data-size="lg"]{font-size:112.5%}html[data-size="xl"]{font-size:125%}
html[data-size="lg"]{--dn-fs:1.125}html[data-size="xl"]{--dn-fs:1.25}
/* JS 가 안 돌면 단추가 안 보인다 — 부트스트랩(머리)이 data-size-js 를 켠다 */
html:not([data-size-js]) .size-ctl{display:none}
/* 단추 셋 — v1 의 .size-ctl 꼴(가 · 가 · 가 · 눌린 것은 바탕을 살짝 채움). 색은 머리띠 글 색(--dn-size-ink · 없으면 그대로 물려받음)과 그 색의 흐린 판만 */
.size-ctl{display:inline-flex;align-items:stretch;flex:0 0 auto;border:1px solid color-mix(in srgb,currentColor 32%,transparent);border-radius:999px;overflow:hidden;color:var(--dn-size-ink,inherit);line-height:1}
.size-ctl button{font:inherit;line-height:1;font-weight:700;border:0;background:transparent;color:inherit;cursor:pointer;padding:0 .7em;min-height:2.25rem;min-width:2.5rem;display:inline-flex;align-items:center;justify-content:center}
.size-ctl button+button{border-left:1px solid color-mix(in srgb,currentColor 32%,transparent)}
.size-ctl button[aria-pressed="true"]{background:color-mix(in srgb,currentColor 14%,transparent)}
.size-ctl button:focus-visible{outline:2px solid currentColor;outline-offset:-3px}
.size-ctl .s-md{font-size:max(.8rem,calc(13px*var(--dn-fs,1)))}.size-ctl .s-lg{font-size:max(.95rem,calc(15px*var(--dn-fs,1)))}.size-ctl .s-xl{font-size:max(1.1rem,calc(17px*var(--dn-fs,1)))}
/* 머리띠 안 — 「다나음한방병원 홈」 단추의 왼 여백은 이동줄과의 사이용이었다 · 단추 묶음이 그 사이에 들어오면 뺀다. 폰 머리띠(이동줄 · 홈 단추가 숨는다)는 단추 묶음과 메뉴 단추 사이를 좁힌다 */
.size-ctl+.dn_home{margin-left:0}
@media(max-width:1024px){.header .head_rt{gap:1rem}}
/* ── 센터 쪽 PC 머리띠(≥1025 · .header) — 단추 묶음(108~153px)이 들어가 자리가 모자라면 이동줄이 **항목 안에서** 꺾이고 「홈」이 표어에 붙었다
   (검수 20261002_hp3 F1 : lg·xl 1280~1640 에서 2~3줄 · 틈 0 — md 도 1100~1240 에서 2줄 · 전엔 1025~1100 만 꺾였다). 셋으로 푼다 :
   ① 사이를 좁힌다 — .head_rt 3.75rem → 1.5rem · .gnb 3.125/2.125rem → 2rem : ≤1360 은 모든 단계 · 커진 단계(html[data-size])는 ≥1025 전부
   ② 표어(.dn_slogan · 240~340px)를 숨긴다 — md 는 ≤1240 · 커진 단계는 ≤1760(1640 을 넘으면 원본 main.css 가 html 을 100% 로 올려 xl 이 20px 가 되고 1700 쯤까지 다시 모자란다 · 이 글은 % 서식 안이라 % 둘)
   ③ 커진 단계 ≥1241 은 항목이 안 꺾이게(nowrap) — 1025~1240 의 커진 단계는 이동줄을 아예 폰 메뉴로 돌린다(아래 블록 · 재검수 hp3_fix2 F2)
   세기 : .header 를 앞에 붙여 extras 의 .dn_slogan{display:flex}(0,1,0 · 이 파일 뒤에 실림)와 main.css 의 .header .gnb(0,2,0 · 앞에 실림)를 이긴다 */
@media(min-width:1025px) and (max-width:1360px){html .header .head_rt{gap:1.5rem}html .header .gnb{gap:2rem}}   /* 상한 1360 — 1280 이면 md 1281~1303 에서 암면역 쪽 이동줄이 두 줄 · 「홈」이 표어에 붙었다(재검수 hp3_fix2 F1 · 1361 에서 틈 40) */
@media(min-width:1025px){html[data-size] .header .head_rt{gap:1.5rem}html[data-size] .header .gnb{gap:2rem}}
@media(min-width:1025px) and (max-width:1240px){.header .dn_slogan{display:none}}
@media(min-width:1025px) and (max-width:1760px){html[data-size] .header .dn_slogan{display:none}}
@media(min-width:1241px){html[data-size] .header .gnb a,html[data-size] .header .gnb .soon{white-space:nowrap}}
/* ── 「칼럼」 칸이 있을 때(리서치 칼럼 승인 글 1편 이상이면 column_store.nav_items 가 「오시는 길」 앞에 넣는다 · 2026-10-03) — 칸 하나만큼 모자라
   md 1361~1473 암면역 쪽 이동줄 두 줄 · 「홈」이 표어에 붙음(틈 0 · 로고 10px 눌림) · 척추 md 1441~1447 두 줄 · 척추 xl 1241~1273 틈 0 · 로고 21px 눌림이었다(칼럼 초안 빌드 실측).
   칸이 있는 머리띠에만 건다(.header:has(.gnb 의 칼럼 주소)) — 칼럼 0편 머리띠는 위 규칙 그대로다. :has 를 모르는 옛 브라우저는 이 규칙들을 버리고 전처럼 그린다.
   잣대 : 꺾임 0 에 더해 「홈」 앞 틈(표어 또는 로고 오른끝 → 「홈」) ≥ 이웃 이동줄 칸 사이 — 더 좁으면 「…뒤에도 홈」 · 「다나음한방병원 홈」처럼 앞 글에 붙어 읽힌다(검수 20261003_navcol J1).
   ④ md 사이 좁힘을 1680 까지(1641 부터 html 이 100% 라 넓은 사이 50px 로는 틈 34 · 1681 부터는 머리띠 안쪽 폭이 main.css .inner 의 max-width:105rem = 1680px 에서 멈춰 틈 73 이상)
   ⑤ 가장 큰 단계 1241~1300 은 이동줄 사이 2rem → 1.5rem(1301 부터는 2rem 으로 틈 39 · 칸 사이 32)
   ⑥ md 1025~1050 도 이동줄 사이 1.5rem(척추 쪽은 표어가 숨어 「홈」이 로고 바로 뒤에 온다 · 틈 14 · 칸 사이 26 → 1051 부터는 2rem 으로 틈 40)
   ⑦ 표어가 다시 나타나는 폭을 늦춘다 — md 1241 → 1261(암 틈 16 → 36 · 칸 사이 26) · 가장 큰 단계 1761 → 1801(틈 17 → 57 · 칸 사이 40) */
@media(min-width:1361px) and (max-width:1680px){html .header:has(.gnb a[href*="column/"]) .head_rt{gap:1.5rem}html .header:has(.gnb a[href*="column/"]) .gnb{gap:2rem}}
@media(min-width:1241px) and (max-width:1300px){html[data-size="xl"] .header:has(.gnb a[href*="column/"]) .gnb{gap:1.5rem}}
@media(min-width:1025px) and (max-width:1050px){html .header:has(.gnb a[href*="column/"]) .gnb{gap:1.5rem}}
@media(min-width:1241px) and (max-width:1260px){html .header:has(.gnb a[href*="column/"]) .dn_slogan{display:none}}
@media(min-width:1761px) and (max-width:1800px){html[data-size="xl"] .header:has(.gnb a[href*="column/"]) .dn_slogan{display:none}}
/* 커진 단계 · 1025~1240 — PC 이동줄 대신 **폰 메뉴**(햄버거 · mobnav 의 .v2nav-panel)를 쓴다(재검수 hp3_fix2 F2 · main 판단 ⓐ).
   그 폭에서는 로고 + 이동줄 + 단추 + 「다나음한방병원 홈」이 다 안 들어 이동줄이 2~3줄로 꺾이고 「홈」이 로고에 붙었다(척추 xl 은 로고가 83px 로 눌림).
   「홈」 단추만 숨기면 본원 가는 길이 그 폭에서 사라진다 — 폰 메뉴 맨 위에 같은 길(a.v2nav-home href="/" 「← 다나음한방병원 홈」)이 있어 그것을 쓰게 한다.
   열고 닫는 손은 폰과 같은 v2-nav.js(폭을 안 묻는다). 막혀 있던 둘을 푼다 : main.css .mob{display:none !important} · v2-nav.css @media(min-width:1025px){.v2nav-panel{display:none !important}} — 둘 다 세기가 더 높은 !important 로 */
@media(min-width:1025px) and (max-width:1240px){
  html[data-size] .header .gnb,html[data-size] .header .dn_home{display:none}
  html[data-size] .header .head_mob_btn.mob{display:block !important;width:2rem;cursor:pointer}
  html[data-size] .v2nav-panel[data-v2nav="1"]{display:block !important}
}
/* 방침 · 비급여 · 칼럼 전체 목록의 머리띠(privacy.top_html) — 센터 둘 · 전화 다음에 */
.dn_pv__top .size-ctl{margin-left:0}
/* PLACE="quick"(원장님 안 ⓐ) — PC 는 떠 있는 묶음 맨 위의 세로 알약 · 폰은 머리띠. 둘 중 하나만 보인다 */
@media(min-width:1025px){.size-ctl--phone{display:none}}
@media(max-width:1024px){.quick .size-ctl--quick{display:none}}
.quick .size-ctl--quick{flex-direction:column;width:4.0625rem;margin-bottom:.6rem;background:Canvas;box-shadow:0 6px 18px color-mix(in srgb,currentColor 22%,transparent)}
.quick .size-ctl--quick button{min-height:2.4rem;min-width:0;padding:0}
.quick .size-ctl--quick button+button{border-left:0;border-top:1px solid color-mix(in srgb,currentColor 32%,transparent)}