/* 보훈온 정적 페이지 공통 — 색·글자·머리·바닥 (설계 13·18, WO-53 Q2·Q3·Q12).
   값은 앱과 같은 토큰이다(app/lib/ui/tokens.dart, web_intro/index.html).
   글씨 3단계는 html 의 font-size 만 바꾼다 — 모든 크기를 rem 으로 두었기 때문에
   배치를 건드리지 않고 글자만 커진다(설계 18 3절). */

:root{
  --ink:#032540; --outline:#43462B; --sand:#F9F2E2; --card:#FFFCF3;
  --primary:#434E2C; --secondary:#12523A; --accent:#038D80; --sub:#4D4E48;
  --line:#C7C0A6; --khaki:#D1CCB8; --olive:#B7B79A; --gray:#A1B5AA; --dark:#8C8F6B;
  --warn:#8A4B00; --gold:#F5D481;
  --font:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",
         "Malgun Gothic","맑은 고딕",sans-serif;
}

/* ── 글씨 3단계 (보통 · 크게 · 아주 크게) ── */
html{font-size:100%}
html[data-text-size="large"]{font-size:118%}
html[data-text-size="xlarge"]{font-size:132%}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sand);color:var(--ink);font-family:var(--font);
     font-size:1.125rem;line-height:1.65;word-break:keep-all}
a{color:var(--ink)}
img{max-width:100%}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
         clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── 머리 — 앱 아이콘 + 이름 + 글씨 3단계 (모든 폭) ── */
.site-head{background:var(--sand);border-bottom:3px solid var(--outline);position:relative;
           overflow:hidden}
.site-head .inner{position:relative;z-index:1;display:flex;align-items:center;gap:0.9rem;
                  padding:0.8rem 0;flex-wrap:wrap}
.site-head .brand{display:flex;align-items:center;gap:0.75rem;text-decoration:none;color:var(--ink)}
.site-head img{width:48px;height:48px;border-radius:12px;display:block;flex:0 0 auto}
.site-head b{font-size:1.5rem;font-weight:900;letter-spacing:-.5px;display:block;line-height:1.2}
.site-head .tag{color:var(--sub);font-size:1.125rem;font-weight:700;display:block}
.site-head nav{margin-left:auto;display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap}

/* 3단계 단추 — 지금 단계는 굵은 테두리와 ● 로도 표시한다(색만으로 구분하지 않는다) */
.textsize{display:flex;align-items:center;gap:0.35rem;border:2px solid var(--outline);
          border-radius:12px;padding:0.25rem;background:var(--card)}
.textsize .lbl{font-size:1.125rem;font-weight:800;color:var(--sub);padding:0 0.35rem}
.textsize button{min-height:44px;min-width:52px;border:2px solid transparent;border-radius:9px;
                 background:transparent;color:var(--ink);font:inherit;font-weight:800;
                 font-size:1.125rem;cursor:pointer;padding:0.2rem 0.5rem}
.textsize button[aria-pressed="true"]{background:var(--primary);color:#fff;border-color:var(--outline)}
.textsize button:hover{background:var(--khaki)}

/* ── 위장 무늬 — 가장자리에만, 옅게. 글자 뒤에는 깔지 않는다(설계 13 2절) ── */
.camo{position:absolute;inset:0;z-index:0;opacity:.25;pointer-events:none}
.camo i{position:absolute;display:block;border-radius:50%}
.camo i:nth-child(1){width:14rem;height:9rem;background:var(--khaki);left:-60px;top:-40px}
.camo i:nth-child(2){width:11rem;height:8rem;background:var(--olive);left:120px;top:-70px}
.camo i:nth-child(3){width:12rem;height:9rem;background:var(--gray);right:-50px;top:-50px}
.camo i:nth-child(4){width:10rem;height:7rem;background:var(--dark);right:150px;top:-80px}

/* ── 단추 ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.6rem;
     min-height:56px;padding:0.7rem 1.4rem;border-radius:14px;border:2px solid var(--outline);
     background:var(--card);color:var(--ink);font-size:1.1875rem;font-weight:800;
     text-decoration:none;cursor:pointer}
.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn.secondary{background:var(--secondary);color:#fff;border-color:var(--secondary)}
.btn[aria-disabled="true"]{opacity:.72;cursor:default}

/* ── 바닥 — 민간 서비스 고지·법정 링크·출처/기준일 (Q12) ── */
.site-foot{border-top:3px solid var(--outline);background:var(--card);margin-top:2.5rem;
           padding:1.4rem 0 2.6rem;color:var(--sub);font-size:1.125rem;font-weight:700}
.site-foot .row{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.site-foot a{color:var(--ink);font-weight:800}
.site-foot p{margin:0.5rem 0 0}
.site-foot .notice{color:var(--warn);font-weight:800}

@media (max-width:760px){
  .site-head .inner{padding:0.6rem 0}
  .site-head nav{margin-left:0;width:100%;justify-content:flex-start}
  .textsize button{min-width:48px}
}