@charset "UTF-8";
/* 글꼴을 CSS 안에서 부릅니다.
화면마다 를 넣으면 빠뜨리는 곳이 생깁니다.
실제로 동네·시설 화면 858장에 글꼴 link 가 없어
명조가 기기 글꼴로 떨어지고 있었습니다.
글꼴을 못 받아도 기기 글꼴로 읽힙니다. 화면이 깨지지 않습니다. */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;600&display=swap');
/* ==========================================================
곁 — 대장(臺帳) 디자인 시스템 v3.1
우리는 팔지 않는다. 우리는 적어 둔다.
대비 전수 검증 완료 · WCAG AA
========================================================== */
/* ── 글줄 길이 ──
ch 를 쓰지 마십시오. ch 는 숫자 0 의 폭이라 한글에서는 절반으로 좁아집니다.
46ch 는 한글 23자밖에 안 됩니다. 한글은 한 글자가 1em 이므로 em 으로 적습니다.
편한 길이는 한글 35~45자입니다. */
@font-face{font-family:'RIDIBatang';
src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/RIDIBatang.woff') format('woff');
font-weight:400;font-style:normal;font-display:swap}
/* ══════════════════════════════════════════════════════════
조판 층계 — 한글 기준 (v4)
한글은 네모틀 하나에 자소가 서넛 들어갑니다. 같은 크기라도
라틴 글자보다 빽빽하고, 위아래로 삐져나온 획이 없어 줄이 붙어 보입니다.
그래서 **더 크게, 더 성기게** 짭니다.
본문 17px 라틴 기준 16px 보다 한 눈금 위
최소 14px 이보다 작으면 어떤 것도 적지 않습니다
행간 1.85 라틴 관행 1.5 보다 훨씬 넓게
자간 음수 한글은 조여야 덩어리로 읽힙니다
글줄 길이는 em 으로 적습니다. ch 는 숫자 0 의 폭이라
한글에서 절반으로 좁아집니다. 46ch = 한글 23자밖에 안 됩니다.
══════════════════════════════════════════════════════════ */
:root{
/* 글자 크기 — 일곱 눈금. 이 밖의 값을 쓰지 마십시오 */
--t-note: .875rem; /* 14px 단위 · 각주 · 도장 옆 최소 */
--t-sub: .9375rem; /* 15px 보조 설명 · 표 안 */
--t-body: 1.0625rem; /* 17px 본문 ★기준 */
--t-lead: 1.1875rem; /* 19px 중요한 문장 · 값 */
--t-h3: 1.375rem; /* 22px 작은 제목 */
--t-h2: 1.75rem; /* 28px 화면 제목 */
--t-num: 2.25rem; /* 36px 큰 숫자 */
--t-hero: 3rem; /* 48px 화면 대표 숫자 하나 */
/* 행간 — 한글은 넓게 */
--lh-tight: 1.35; /* 제목 */
--lh-num: 1.15; /* 숫자 */
--lh-snug: 1.7; /* 짧은 글 */
--lh-body: 1.85; /* 본문 ★ */
/* 자간 — 한글은 조입니다. 크면 더 조입니다 */
--ls-body: -.008em;
--ls-lead: -.014em;
--ls-head: -.025em;
/* 여백 — 본문 한 줄(17px × 1.85 ≈ 32px)을 「1행」으로 삼습니다 */
--s-hair: .25rem; /* 4px ⅛행 */
--s-tight: .5rem; /* 8px ¼행 */
--s-1: .75rem; /* 12px ⅜행 */
--s-2: 1rem; /* 16px ½행 */
--s-3: 1.5rem; /* 24px ¾행 */
--s-4: 2rem; /* 32px 1행 ★ */
--s-5: 3rem; /* 48px 1.5행 */
--s-6: 4rem; /* 64px 2행 */
/* 글줄 길이 — 한글 자수 기준 */
--w-read: 34em; /* 본문. 한글 34자 */
--w-note: 40em; /* 짧은 설명 */
}
:root{
/* 종이와 잉크 */
--paper:#FAF7EE; --field:#FFFFFF;
--ink:#14181A; --ink-2:#454B4D; --ink-3:#666B6D;
--rule:#A79E88 /* 종이색 대비 2.48:1 — 노인 눈에도 보이게. 1.63 이었다 */; --rule-bold:#8F8266; --rule-hair:#E7E3D9;
--seal:#0E4F4A; --vermilion:#9B2226;
--wash:#F2EDE0; --wash-warm:#F5EEDF;
/* 데이터 — 색은 데이터에만 */
--d-copay: #243E42; --d-meal: #3C5C73; --d-room: #568C49;
--d-etc: #96834E; --d-deposit: #804F8C; --d-care: #633A34;
--serif:'RIDIBatang','Noto Serif KR','Nanum Myeongjo','Apple SD Gothic Neo','Batang','BatangChe','AppleMyungjo',serif;
--sans:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','맑은 고딕','Noto Sans KR',sans-serif;
--w:62.5rem;
}
/* ══════════════════════════════════════════════════════════
대장의 배열 — 장부는 이렇게 생겼습니다
1 한 줄에 한 가지 급하신 분은 훑으십니다
2 숫자는 오른쪽 끝에 맞춤 세로로 견주시라고
3 숫자는 폭이 같은 활자로 자리가 흔들리면 못 견줍니다
4 괘선은 가늘게 줄을 세지 말고 따라가시라고
5 양끝 맞춤 안 함 한글 양끝맞춤은 낱말 사이가 벌어집니다
══════════════════════════════════════════════════════════ */
.tnum, .money, .fa td, .trapline > span:last-child, .wn{
font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
letter-spacing:0}
/* 돈과 수는 오른쪽 끝에 세웁니다 */
.trapline > span:last-child, .fa td, .money{text-align:right}
/* 한글에는 양끝 맞춤을 쓰지 않습니다 */
p, li, dd, td, th{text-align:left;word-break:keep-all;overflow-wrap:break-word}
.trapline > span:last-child, .fa td, .money{text-align:right}
/* 낱말이 가운데서 잘리지 않게 — 한글은 낱말 단위로 끊습니다 */
h1,h2,h3,h4,.fn,.wl{word-break:keep-all}
/* ── 제목 조판 ──
한글은 크게 짤수록 낱자 사이가 벌어져 보입니다. 크기가 커지면 더 조입니다.
제목에 행간을 넉넉히 주면 두 줄로 넘어갈 때 덩어리가 흩어집니다. */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;
line-height:var(--lh-tight);letter-spacing:var(--ls-head);
text-wrap:balance}
h1{font-size:var(--t-h2)}
h2{font-size:var(--t-h3)}
h3{font-size:var(--t-lead)}
h4{font-size:var(--t-body)}
/* 본문 문단 — 한 줄에 한글 34자. 그보다 길면 눈이 다음 줄을 못 찾습니다. */
p{max-width:var(--w-read)}
p+p{margin-top:var(--s-2)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;font-size:100%}
html.fs2{font-size:112.5%}
html.fs3{font-size:125%}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);
word-break:keep-all;overflow-wrap:break-word;
font-size:var(--t-body);line-height:var(--lh-body);letter-spacing:var(--ls-body)}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2.5px solid var(--seal);outline-offset:3px;border-radius:2px}
.tn{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
/* 글자 크기 조절 — NHS·GOV.UK 방식 */
.fsctl{display:flex;align-items:center;gap:0;border:1px solid var(--rule-bold);border-radius:3px;
overflow:hidden;background:var(--paper);flex:none}
.fsctl button{min-height:2.75rem;padding:0 var(--s-1);font-family:var(--serif);line-height:1;
color:var(--ink-2);border-right:1px solid var(--rule)}
.fsctl button:last-child{border-right:0}
.fsctl button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.fsctl button:hover{background:var(--wash)}
.fsctl button[aria-pressed=true]:hover{background:var(--ink)}
.fsctl .f1{font-size:var(--t-note)}.fsctl .f2{font-size:var(--t-sub)}.fsctl .f3{font-size:var(--t-lead)}
/* 모바일 하단 고정 행동 — 토스 방식, 다만 장식 없이 */
.dock{display:none}
@media(max-width:880px){
.dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;gap:var(--s-tight);
padding:.625rem .875rem calc(.625rem + env(safe-area-inset-bottom));
background:var(--paper);border-top:1px solid var(--rule-bold)}
.dock .act{flex:1;min-height:3.25rem;font-size:var(--t-body);margin:0}
.dock .act.line{flex:0 0 auto;padding:0 var(--s-3)}
body{padding-bottom:5.25rem}
}
/* 빈 상태 — 분위기가 아니라 방향 */
.blank{padding:var(--s-5) var(--s-3);text-align:center;border:1px dashed var(--rule-bold);border-radius:4px;
background:var(--field)}
.blank h2,.blank h3,.blank h4{font-family:var(--serif);font-size:var(--t-h3);font-weight:400;margin-bottom:var(--s-tight)}
.blank p{font-size:var(--t-sub);line-height:var(--lh-snug);color:var(--ink-2);max-width:34em;margin:0 auto .9375rem}
.blank .bact{display:flex;gap:var(--s-tight);justify-content:center;flex-wrap:wrap}
/* 왔던 길 */
.crumb{display:flex;align-items:center;gap:var(--s-tight);flex-wrap:wrap;
padding:var(--s-2) 0 0;font-size:var(--t-note);color:var(--ink-3)}
.crumb a{color:var(--ink-3);border-bottom:1px solid var(--rule)}
.crumb a:hover{color:var(--ink);border-color:var(--ink)}
.crumb span[aria-current]{color:var(--ink-2)}
.crumb .sep{color:var(--rule-bold)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;font-weight:600}
.skip:focus{left:0.625rem;top:0.625rem;padding:var(--s-2) var(--s-3);background:var(--ink);color:var(--paper);
border-radius:3px;font-size:var(--t-sub)}
.rname .norec{color:var(--ink-2)}
.rname .soon{display:inline-block;margin-left:var(--s-tight);padding:.0625rem var(--s-tight);
border:1px solid var(--rule-bold);border-radius:2px;font-family:var(--sans);
font-size:var(--t-note);font-weight:400;color:var(--ink-3);vertical-align:.125rem}
/* ── 막대 무늬 ──
여섯 색은 색맹에서 구별되지 않는다. 매체의 한계다.
색을 비틀 게 아니라 색에 기대지 않는다.
무늬가 구별하고, 색은 거들고, 글자가 확정한다. */
.bar i,.sw{background-repeat:repeat;background-position:0 0}
.p-copay {background-image:none}
.p-meal {background-image:repeating-linear-gradient(45deg,
rgba(255,255,255,.42) 0 2px,transparent 2px 0.3125rem)}
.p-room {background-image:repeating-linear-gradient(-45deg,
rgba(255,255,255,.42) 0 2px,transparent 2px 0.3125rem)}
.p-etc {background-image:repeating-linear-gradient(90deg,
rgba(255,255,255,.46) 0 2px,transparent 2px 0.3125rem)}
.p-deposit{background-image:radial-gradient(rgba(255,255,255,.55) 1px,transparent 1.2px);
background-size:4px 4px}
.p-care {background-image:repeating-linear-gradient(0deg,
rgba(255,255,255,.42) 0 2px,transparent 2px 0.3125rem)}
@media print{
.bar i,.sw{background-color:#fff!important;border:1px solid #000}
.p-copay {background-image:none;background-color:#000!important}
.p-meal {background-image:repeating-linear-gradient(45deg,#000 0 1.5px,#fff 1.5px 0.25rem)}
.p-room {background-image:repeating-linear-gradient(-45deg,#000 0 1.5px,#fff 1.5px 0.25rem)}
.p-etc {background-image:repeating-linear-gradient(90deg,#000 0 1.5px,#fff 1.5px 0.25rem)}
.p-deposit{background-image:radial-gradient(#000 1px,#fff 1.2px);background-size:4px 4px}
.p-care {background-image:repeating-linear-gradient(0deg,#000 0 1.5px,#fff 1.5px 0.25rem)}
}
/* ── 평가등급 칸 ──
등급 「없음」에는 세 종류가 있다.
거부했거나 · 대상이 아니거나 · 새로 생겼거나.
한 칸에 뭉쳐 「-」로 두면 신설 시설이 평가거부 시설과 같아 보인다. */
.gradecell{display:inline-flex;align-items:baseline;gap:var(--s-tight);flex-wrap:wrap}
.gradecell .g{font-family:var(--serif);font-size:var(--t-body)}
.gradecell .why{font-size:var(--t-note);color:var(--ink-2);
padding:.125rem var(--s-tight);background:var(--wash);border:1px solid var(--rule);border-radius:2px}
.gradecell .why.refuse{color:var(--vermilion);border-color:var(--vermilion);background:#FBF2F0}
/* ── 거짓청구 공표 이력 ──
법에 따라 공표되는 공개데이터다. 어느 민간 사이트도 붙이지 않는다.
붙이지 않는 이유는 짐작이 간다 — 파트너 시설이 걸리기 때문이다. */
.cleanbox{margin-top:var(--s-3);padding:var(--s-2) var(--s-3);border:1px solid var(--rule-bold);
border-radius:3px;background:var(--wash);font-size:var(--t-sub);line-height:var(--lh-body);color:var(--ink-2)}
.cleanbox b{color:var(--ink)}
/* ── 대장의 건강 상태 ──
CQC는 자기 파일이 지금 어디가 늦고 있는지, 과거에 무슨 오류가 있었고
어느 기간이 영향받는지를 공개 페이지에 적어 둔다.
대장은 자기가 틀렸던 것도 적는다. */
.health{margin-top:var(--s-3);border:1.5px solid var(--rule-bold);border-radius:3px;
background:var(--field);overflow:hidden}
.health h2{font-family:var(--serif);font-size:var(--t-lead);font-weight:400;
padding:var(--s-2) var(--s-3);background:var(--wash);
border-bottom:1px solid var(--rule-bold)}
.health .hb{padding:var(--s-2) var(--s-3)}
.health dl{display:grid;grid-template-columns:auto 1fr;gap:var(--s-1) var(--s-2);
font-size:var(--t-sub);line-height:var(--lh-snug)}
.health dt{font-family:var(--serif);white-space:nowrap;color:var(--ink)}
.health dd{color:var(--ink-2)}
.health dd b{color:var(--ink)}
.health .late dt,.health .late dd b{color:var(--vermilion)}
.health .errata{margin-top:var(--s-2);padding-top:var(--s-2);
border-top:1px solid var(--rule);font-size:var(--t-note);line-height:var(--lh-body);color:var(--ink-2)}
.health .errata b{color:var(--ink)}
.health .errata h3{font-family:var(--serif);font-size:var(--t-body);font-weight:400;
color:var(--ink);margin-bottom:var(--s-tight)}
/* ── 0 · 모름 · 답없음 ──
「작업치료사 0명」과 「작업치료사 모름」은 완전히 다르다.
둘을 같은 빈칸으로 두면 없는 곳이 모르는 곳처럼 보이고,
더 나쁘게는 모르는 곳이 없는 곳처럼 보인다. */
.staff{display:grid;grid-template-columns:1fr auto;gap:var(--s-tight) var(--s-2);font-size:var(--t-sub)}
.staff dt{color:var(--ink-2)}
.staff dd{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.staff dd .zero{color:var(--ink);font-weight:600}
.staff dd .unknown{color:var(--ink-3);font-family:var(--serif)}
.staff dd .noanswer{color:var(--vermilion);font-size:var(--t-note)}
.staff .sub{grid-column:1/-1;margin-top:var(--s-1);padding-top:var(--s-1);
border-top:1px solid var(--rule);font-size:var(--t-note);line-height:var(--lh-snug);color:var(--ink-3)}
.staff .sub b{color:var(--ink-2)}
/* ── 침실 구성 ──
1인실 0 · 2인실 5 · 4인실 73 을 보여주면
상급침실료가 붙을 확률을 스스로 짐작하실 수 있다. */
.rooms{display:flex;gap:var(--s-tight);flex-wrap:wrap;margin-top:var(--s-1)}
.rooms span{padding:var(--s-tight) var(--s-1);border:1px solid var(--rule-bold);border-radius:2px;
background:var(--field);font-size:var(--t-note);white-space:nowrap}
.rooms span b{font-variant-numeric:tabular-nums}
.rooms span.up{border-color:var(--vermilion);background:#FBF2F0}
.rooms span.up b{color:var(--vermilion)}
/* ── 후원 공개 ──
무료 서비스는 누가 돈을 대는지 밝히지 않으면 무너진다.
A Place for Mom은 이용자에게 무료였다. 시설이 냈을 뿐이다.
숨기면 14년 뒤에 터진다. 그래서 첫 화면에 적는다. */
.donor{margin-top:var(--s-3);border:1.5px solid var(--rule-bold);border-radius:3px;
background:var(--field)}
.donor h3{font-family:var(--serif);font-size:var(--t-body);font-weight:400;
padding:var(--s-1) var(--s-2);background:var(--wash-warm);
border-bottom:1px solid var(--rule-bold)}
.donor .db{padding:var(--s-2) var(--s-2)}
.donor p{font-size:var(--t-sub);line-height:var(--lh-body);color:var(--ink-2)}
.donor p+p{margin-top:.9em}
.donor p b{color:var(--ink)}
.donor ul{margin-top:var(--s-1);padding-left:0;list-style:none}
.donor li{position:relative;padding-left:var(--s-3);margin-top:var(--s-tight);
font-size:var(--t-sub);line-height:var(--lh-body);color:var(--ink-2)}
.donor li::before{content:"—";position:absolute;left:0;color:var(--seal)}
.donor li b{color:var(--ink)}
.donor .out{margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px solid var(--rule);
font-size:var(--t-note);line-height:var(--lh-body);color:var(--ink-3)}
.donor .out b{color:var(--vermilion)}
/* ── 받는 식대와 쓰는 식대 ──
한국은 「받는 돈」만 공표한다. 「쓰는 돈」은 어디에도 없다.
호주는 1인 하루 $10 미만이면 규제기관에 회부한다. */
.meal{margin-top:var(--s-3);border:1.5px solid var(--rule-bold);border-radius:3px;
background:var(--field)}
.meal h3{font-family:var(--serif);font-size:var(--t-body);font-weight:400;
padding:var(--s-1) var(--s-2);background:var(--wash-warm);
border-bottom:1px solid var(--rule-bold)}
.meal .mb{padding:var(--s-2) var(--s-2)}
.meal .two{display:grid;grid-template-columns:1fr 1fr;gap:1px;
background:var(--rule-bold);border:1px solid var(--rule-bold);border-radius:2px}
.meal .two>div{background:var(--paper);padding:var(--s-2) var(--s-2)}
.meal .two .lab{font-size:var(--t-note);color:var(--ink-3);margin-bottom:var(--s-tight)}
.meal .two .num{font-family:var(--serif);font-size:var(--t-h3);
font-variant-numeric:tabular-nums;line-height:var(--lh-num)}
.meal .two .sub{margin-top:var(--s-hair);font-size:var(--t-note);color:var(--ink-3)}
.meal .two .q .num{color:var(--ink-3)}
.meal p{margin-top:var(--s-2);font-size:var(--t-sub);line-height:var(--lh-body);color:var(--ink-2)}
.meal p b{color:var(--ink)}
@media (max-width:30rem){.meal .two{grid-template-columns:1fr}}
/* 빈칸의 종류 — 넷 */
.staff dd .refused{color:var(--vermilion);font-size:var(--t-note);font-weight:600}
/* ── 평가의 유효기간 ──
대만은 등급 없이 「합격」과 「언제까지」만 적는다.
우리는 평가일만 적고 언제까지인지는 안 적었다. */
.until{margin-top:var(--s-2);padding:var(--s-2) var(--s-2);border-radius:2px;
border:1px solid var(--rule-bold);background:var(--wash);font-size:var(--t-sub);line-height:var(--lh-body)}
.until b{color:var(--ink)}
.until.past{border-color:var(--vermilion);background:#FBF2F0}
.until.past b{color:var(--vermilion)}
.until .bar{display:flex;height:.5rem;margin:var(--s-1) 0 var(--s-tight);border-radius:1px;
overflow:hidden;border:1px solid var(--rule-bold)}
.until .bar i{display:block;height:100%}
.until .bar .done{background:var(--rule-bold)}
.until .bar .over{background:repeating-linear-gradient(45deg,
var(--vermilion) 0 .25rem,transparent .25rem .5rem);opacity:.55}
.until .ends{display:flex;justify-content:space-between;
font-size:var(--t-note);color:var(--ink-3);font-variant-numeric:tabular-nums}
/* ── 세는 법 ──
홍콩은 대기 개월수를 공표하면서 「무엇을 뺐고 왜 뺐는지」를 같이 적는다.
숫자만 적으면 그 숫자가 무엇인지 아무도 모른다. */
.howcount{margin-top:var(--s-2);border:1.5px solid var(--rule-bold);border-radius:3px;
background:var(--field)}
.howcount h3{font-family:var(--serif);font-size:var(--t-body);font-weight:400;
padding:var(--s-1) var(--s-2);background:var(--wash-warm);border-bottom:1px solid var(--rule-bold)}
.howcount .hb{padding:var(--s-2) var(--s-2);font-size:var(--t-sub);line-height:var(--lh-body);color:var(--ink-2)}
.howcount dl{display:grid;grid-template-columns:auto 1fr;gap:var(--s-tight) var(--s-2);margin-bottom:var(--s-2)}
.howcount dt{font-family:var(--serif);color:var(--ink-3);white-space:nowrap}
.howcount dd{color:var(--ink)}
.howcount .ex{padding-top:var(--s-2);border-top:1px solid var(--rule);font-size:var(--t-note);color:var(--ink-3)}
.howcount .ex b{color:var(--ink-2)}
/* 대기 상태 — 기다리는 중 · 잠시 멈춤 · 들어가심 */
.wstate{display:flex;gap:var(--s-tight);flex-wrap:wrap;margin-top:var(--s-1)}
.wstate span{padding:var(--s-tight) var(--s-1);border:1px solid var(--rule-bold);border-radius:2px;
background:var(--field);font-size:var(--t-note)}
.wstate span.on{border-color:var(--seal);background:var(--wash);font-weight:600}
.wstate span.pause{border-style:dashed;color:var(--ink-3)}
/* ── 전화 전에 여쭤볼 것 ── */
.act .tip{margin-top:var(--s-2);padding:var(--s-1) var(--s-2);background:var(--wash);
border-left:3px solid var(--seal);border-radius:0 3px 3px 0;font-size:var(--t-note);line-height:var(--lh-body)}
/* ── 급하신 분 ──
퇴원 날짜를 들은 사람에게 제도 설명을 먼저 읽히지 않는다.
첫 화면에서 바로 할 일 두 가지만 준다. */
.urgent{margin:var(--s-3) 0 0;padding:var(--s-3) var(--s-3);border:2px solid var(--seal);
border-radius:3px;background:var(--field)}
.urgent .ut{font-family:var(--serif);font-size:var(--t-lead);color:var(--seal);margin-bottom:var(--s-tight)}
.urgent p{font-size:var(--t-sub);line-height:var(--lh-body);color:var(--ink-2);max-width:43em}
.urgent .ub{display:flex;gap:var(--s-1);flex-wrap:wrap;margin:var(--s-2) 0}
.urgent .ub a{flex:1;min-width:13rem;padding:var(--s-2) var(--s-2);border:1.5px solid var(--rule-bold);
border-radius:3px;background:var(--paper);text-decoration:none;color:var(--ink)}
.urgent .ub a:hover{border-color:var(--seal);background:var(--wash)}
.urgent .ub .t{display:block;font-family:var(--serif);font-size:var(--t-body)}
.urgent .ub .c{display:block;margin-top:var(--s-hair);font-size:var(--t-note);color:var(--ink-3)}
.urgent .un2{margin-top:var(--s-2);padding-top:var(--s-1);border-top:1px solid var(--rule);font-size:var(--t-note);line-height:var(--lh-body);color:var(--ink-2)}
.urgent .un{margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px solid var(--rule);font-size:var(--t-note)}
.urgent .un b{color:var(--ink)}
.urgent .un a{color:var(--seal);font-weight:600}
/* ── 보기 화면 띠 ──
설계 원형은 가상 시설을 쓴다. 실제 자료 화면과 나란히 놓이므로
무엇이 보기인지 화면 맨 위에서 밝힌다. */
.demo{margin:0 0 var(--s-3);padding:var(--s-2) var(--s-2);border:1.5px solid var(--vermilion);
border-radius:3px;background:var(--paper);font-size:var(--t-note);line-height:var(--lh-body);color:var(--ink-2)}
.demo b{color:var(--vermilion)}
.demo a{color:var(--seal);font-weight:600}
/* ── 같은 동네 다른 갈래 ── */
.sibling{margin-top:var(--s-3);padding:var(--s-2) var(--s-2);border:1px solid var(--rule-bold);
border-radius:3px;background:var(--wash)}
.sibling h3{font-family:var(--serif);font-size:var(--t-body);font-weight:400;color:var(--ink);margin-bottom:var(--s-tight)}
.sibling .go{display:flex;gap:var(--s-tight);flex-wrap:wrap;margin-top:var(--s-1)}
.sibling .go a{flex:1;min-width:11rem;padding:var(--s-1) var(--s-2);border:1.5px solid var(--rule-bold);
border-radius:3px;background:var(--field);text-decoration:none;color:var(--ink)}
.sibling .go a:hover{border-color:var(--seal);background:var(--paper)}
.sibling .go .t{display:block;font-family:var(--serif);font-size:var(--t-body)}
.sibling .go .c{display:block;margin-top:.1875rem;font-size:var(--t-note);color:var(--ink-3);
font-variant-numeric:tabular-nums}
/* ── 월 한도액 ──
방문요양은 쓴 만큼 낸다. 그런데 한도를 넘으면 초과분은 전액 본인 부담이다.
이용자가 가장 자주 놀라는 자리다. 꺾이는 지점을 보이게 그린다. */
.cap{margin-top:var(--s-2);border:1.5px solid var(--rule-bold);border-radius:3px;background:var(--field)}
.cap h3{font-family:var(--serif);font-size:var(--t-body);font-weight:400;padding:var(--s-1) var(--s-2);
background:var(--wash-warm);border-bottom:1px solid var(--rule-bold)}
.cap .cb{padding:var(--s-2) var(--s-2);font-size:var(--t-sub);line-height:var(--lh-body);color:var(--ink-2)}
.cap .cb b{color:var(--ink)}
.cap .track{margin:var(--s-2) 0 var(--s-tight);height:2.25rem;display:flex;border:1px solid var(--rule-bold);
border-radius:2px;overflow:hidden}
.cap .track i{display:flex;align-items:center;justify-content:center;height:100%;
font-size:var(--t-note);font-style:normal;white-space:nowrap}
.cap .track .within{background:var(--wash);color:var(--ink-2);flex:7}
.cap .track .overrun{flex:3;color:var(--vermilion);font-weight:600;
background:repeating-linear-gradient(45deg,rgba(155,34,38,.22) 0 .3125rem,transparent .3125rem .625rem)}
.cap .mark{display:flex;justify-content:space-between;font-size:var(--t-note);color:var(--ink-3)}
.cap .mark b{color:var(--vermilion)}
/* ── 같은 분이 오시나 ── 방문요양의 핵심 물음 */
.same{margin-top:var(--s-2);padding:var(--s-2) var(--s-2);border:1.5px solid var(--rule-bold);
border-radius:3px;background:var(--field)}
.same .q{font-family:var(--serif);font-size:var(--t-body);color:var(--ink);margin-bottom:var(--s-1)}
.same .pick{display:flex;gap:var(--s-tight);flex-wrap:wrap}
.same .pick button{flex:1;min-width:6rem;min-height:2.75rem;padding:var(--s-1) var(--s-1);
border:1.5px solid var(--rule-bold);border-radius:3px;background:var(--paper);
font-family:var(--serif);font-size:var(--t-body);color:var(--ink);cursor:pointer}
.same .pick button:hover{border-color:var(--seal);background:var(--wash)}
.same .pick button:focus-visible{outline:2px solid var(--seal);outline-offset:2px}
.same .note{margin-top:var(--s-2);padding-top:var(--s-1);border-top:1px solid var(--rule);
font-size:var(--t-note);line-height:var(--lh-body);color:var(--ink-3)}
.same .note b{color:var(--ink-2)}
/* ── 방문요양 셈 ── */
.hcalc{margin-top:var(--s-2);border:1.5px solid var(--rule-bold);border-radius:3px;background:var(--field)}
.hcalc h2{font-family:var(--serif);font-size:var(--t-body);font-weight:400;padding:var(--s-1) var(--s-2);
background:var(--wash-warm);border-bottom:1px solid var(--rule-bold)}
.hcalc h2{margin:0}
.hcalc .body{padding:var(--s-2) var(--s-2)}
.hcalc .fld{margin-bottom:var(--s-2)}
.hcalc .fld>label{display:block;font-size:var(--t-note);color:var(--ink-3);margin-bottom:var(--s-tight)}
.hcalc select,.hcalc input{width:100%;min-height:2.75rem;padding:var(--s-tight) var(--s-1);
border:1.5px solid var(--rule-bold);border-radius:3px;background:var(--paper);
font-family:var(--serif);font-size:var(--t-body);color:var(--ink)}
.hcalc select:focus-visible,.hcalc input:focus-visible{outline:2px solid var(--seal);outline-offset:1px}
.hcalc .two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-1)}
.hcalc .out{margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px solid var(--rule-bold)}
.hcalc .big{font-family:var(--serif);font-size:var(--t-h2);color:var(--ink);
font-variant-numeric:tabular-nums;letter-spacing:var(--ls-lead)}
.hcalc .big small{font-size:var(--t-sub);color:var(--ink-3);margin-left:var(--s-tight)}
.hcalc .bar{margin:var(--s-2) 0 var(--s-tight);height:2rem;display:flex;border:1px solid var(--rule-bold);
border-radius:2px;overflow:hidden;background:var(--paper)}
.hcalc .bar i{display:block;height:100%;font-style:normal}
.hcalc .bar .in{background:var(--wash)}
.hcalc .bar .ov{background:repeating-linear-gradient(45deg,rgba(155,34,38,.24) 0 .3125rem,transparent .3125rem .625rem)}
.hcalc .cap-mark{display:flex;justify-content:space-between;font-size:var(--t-note);color:var(--ink-3);
font-variant-numeric:tabular-nums}
.hcalc dl.br{display:grid;grid-template-columns:auto 1fr;gap:var(--s-tight) var(--s-2);margin-top:var(--s-2);
font-size:var(--t-note);font-variant-numeric:tabular-nums}
.hcalc dl.br dt{color:var(--ink-3)}
.hcalc dl.br dd{text-align:right;color:var(--ink-2)}
.hcalc dl.br dd b{color:var(--ink)}
.hcalc .warn{margin-top:var(--s-2);padding:var(--s-1) var(--s-2);border:1.5px solid var(--vermilion);
border-radius:3px;background:rgba(155,34,38,.05);font-size:var(--t-note);line-height:var(--lh-body);color:var(--ink-2)}
.hcalc .warn b{color:var(--vermilion)}
.hcalc .no{margin-top:var(--s-2);padding:var(--s-1) var(--s-2);border:1.5px solid var(--rule-bold);
border-radius:3px;background:var(--wash);font-size:var(--t-note);line-height:var(--lh-body);color:var(--ink-2)}
/* ── 함께 보기 ── */
.sharebox{margin-top:var(--s-2);padding:var(--s-3) var(--s-3);background:var(--wash-warm);
border:1.5px solid var(--rule-bold);border-radius:3px}
.sharebox h2,.sharebox h3,.sharebox h4{font-family:var(--serif);font-size:var(--t-lead);font-weight:400;margin-bottom:var(--s-1)}
.shareurl{width:100%;font-family:var(--sans);font-size:var(--t-note);padding:var(--s-1) var(--s-1);
min-height:2.75rem;background:var(--field);border:1px solid var(--rule-bold);
border-radius:3px;color:var(--ink)}
.shareurl:focus-visible{outline:2.5px solid var(--seal);outline-offset:2px}
.sharebtns{display:flex;gap:var(--s-tight);flex-wrap:wrap;margin-top:var(--s-1)}
.sharewhat{margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px solid var(--rule);
font-size:var(--t-note);line-height:var(--lh-snug);color:var(--ink-2)}
.sharewhat b{display:block;margin-top:var(--s-1);color:var(--ink);font-size:var(--t-note)}
.sharewhat b:first-child{margin-top:0}
.sharewhat ul{list-style:none;margin:var(--s-hair) 0 0}
.sharewhat li{padding:.1875rem 0 .1875rem var(--s-2);position:relative}
.sharewhat li::before{content:'·';position:absolute;left:.1875rem;color:var(--seal);font-weight:700}
.sharewhat li em{font-style:normal;color:var(--ink-3)}
.sharewhat p{margin-top:var(--s-1);padding:var(--s-1) var(--s-1);background:var(--field);
border-left:3px solid var(--seal);border-radius:0 3px 3px 0}
.speakbtn{white-space:nowrap}
/* ── 말 풀이 ──
겪어본 사람만 아는 말에 처음 한 번만 붙는다.
어르신 본인이 보실 때 이 말들이 벽이 되지 않도록. */
.term{font:inherit;color:inherit;background:none;border:0;
/* 인라인이라 44px를 강제하면 글줄이 깨진다.
대신 위아래로 눌리는 자리를 넓힌다 — 글줄 높이는 그대로. */
padding:var(--s-hair) .125rem;margin:-.3125rem -.125rem;
border-bottom:1px dotted var(--seal);cursor:pointer;
-webkit-tap-highlight-color:transparent}
.term::after{content:'?';display:inline-block;margin-left:.1875rem;
font-family:var(--sans);font-size:.6875em;font-weight:700;color:var(--seal);
vertical-align:.35em}
.term:hover{border-bottom-style:solid}
.term:focus-visible{outline:2.5px solid var(--seal);outline-offset:2px;border-radius:2px}
.term[aria-expanded="true"]{border-bottom-style:solid;background:var(--wash-warm)}
.termbox{display:block;margin:var(--s-tight) 0;padding:var(--s-1) var(--s-2);
background:var(--wash-warm);border-left:3px solid var(--seal);border-radius:0 3px 3px 0;
font-family:var(--sans);font-size:var(--t-sub);line-height:var(--lh-body);color:var(--ink-2)}
.termbox b{color:var(--seal);font-weight:600}
.fs2 .termbox,.fs3 .termbox{font-size:var(--t-body)}
/* ── 빈칸 집계 ── */
.gaps{width:100%;border-collapse:collapse;margin-top:var(--s-hair)}
.gaps th,.gaps td{padding:var(--s-1) var(--s-1);border-bottom:1px solid var(--rule);
text-align:left;font-size:var(--t-note);vertical-align:baseline}
.gaps th{font-size:var(--t-note);font-weight:600;color:var(--ink-3);
border-bottom:1px solid var(--rule-bold)}
.gaps td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.gaps td.n b{font-size:var(--t-body)}
.gaps tr.hot td{background:var(--wash-warm)}
.gaps .fw{font-family:var(--serif);font-size:var(--t-sub)}
.gaps .rg{font-size:var(--t-note);color:var(--ink-3)}
.gapbar{display:block;height:.375rem;background:var(--rule);border-radius:2px;
margin-top:var(--s-hair);overflow:hidden}
.gapbar i{display:block;height:100%;background:var(--seal)}
.nothing{padding:var(--s-3);text-align:center;color:var(--ink-3);font-size:var(--t-note);line-height:var(--lh-snug)}
/* ── 관리자 · 키 입력 ── */
.danger{margin-top:var(--s-3);padding:var(--s-2) var(--s-3);background:var(--field);
border:1px solid var(--vermilion);border-left-width:3px;border-radius:3px}
.danger .dt{font-family:var(--serif);font-size:var(--t-body);color:var(--vermilion);margin-bottom:var(--s-tight)}
.danger .db{font-size:var(--t-note);line-height:var(--lh-snug);color:var(--ink-2)}
.danger .db b{color:var(--ink)}
.keyrow{display:flex;gap:var(--s-tight);align-items:flex-start}
.keyrow input{flex:1;font-family:var(--mono,var(--sans));letter-spacing:.02em}
.keyrow button{flex:none;min-height:2.75rem;padding:0 var(--s-2);background:var(--field);
border:1px solid var(--rule-bold);border-radius:3px;font-family:var(--sans);
font-size:var(--t-note);color:var(--ink);cursor:pointer}
.keyrow button:hover{background:var(--wash)}
.keyrow button:focus-visible{outline:2.5px solid var(--seal);outline-offset:2px}
.probe{margin-top:var(--s-2);padding:var(--s-2) var(--s-2);border:1px solid var(--rule);
border-radius:3px;background:var(--wash);font-size:var(--t-note);line-height:var(--lh-snug)}
.probe .pl{display:flex;gap:var(--s-tight);align-items:baseline;padding:var(--s-hair) 0}
.probe .pl .m{font-family:var(--serif);font-size:var(--t-sub);width:1.25rem;flex:none}
.probe .pl.ok .m{color:var(--seal)}
.probe .pl.no .m{color:var(--vermilion)}
.probe .pl.wait .m{color:var(--ink-3)}
.probe .pl .t{color:var(--ink-2)}
.probe .pl .t b{color:var(--ink)}
.modes{display:grid;gap:var(--s-tight);margin-top:var(--s-hair)}
.modes label{display:flex;gap:var(--s-tight);align-items:flex-start;padding:var(--s-1) var(--s-2);
border:1px solid var(--rule);border-radius:3px;cursor:pointer;background:var(--field)}
.modes label:hover{background:var(--wash)}
.modes label:has(input:checked){border-color:var(--seal);border-width:2px;padding:var(--s-1) var(--s-2)}
.modes .mn{font-size:var(--t-sub);font-weight:600}
.modes .mc{display:block;margin-top:var(--s-hair);font-size:var(--t-note);line-height:var(--lh-body);color:var(--ink-2)}
.modes .mm{display:block;margin-top:.1875rem;font-family:var(--mono,monospace);
font-size:var(--t-note);color:var(--ink-3)}
/* ── 사서(AI 도우미) ── */
.askbtn{position:fixed;right:1.125rem;bottom:1.125rem;z-index:600;
display:inline-flex;align-items:center;gap:var(--s-tight);min-height:3.125rem;padding:0 var(--s-3);
background:var(--ink);color:var(--paper);border:0;border-radius:3px;
font-family:var(--sans);font-size:var(--t-sub);font-weight:600;cursor:pointer;
box-shadow:0 2px 0 var(--rule-bold)}
.askbtn .gi{font-family:var(--serif);font-size:var(--t-body);font-weight:400}
.askbtn:hover{background:var(--ink-2)}
.askbtn:focus-visible{outline:2.5px solid var(--seal);outline-offset:3px}
@media(max-width:880px){.askbtn{bottom:calc(4.5rem + env(safe-area-inset-bottom))}}
.askveil{position:fixed;inset:0;background:rgba(20,24,26,.32);z-index:640;display:none}
.askveil.on{display:block}
.askpanel{position:fixed;right:0;top:0;bottom:0;width:min(26.5rem,100%);z-index:650;
background:var(--paper);border-left:1px solid var(--rule-bold);
display:none;flex-direction:column}
.askpanel.on{display:flex}
.askhead{flex:none;display:flex;align-items:baseline;gap:var(--s-1);
padding:var(--s-2) var(--s-3) var(--s-2);border-bottom:2px solid var(--ink)}
.askhead .an{font-family:var(--serif);font-size:var(--t-h3)}
.askhead .ar{font-size:var(--t-note);color:var(--ink-3)}
.askhead .ax{margin-left:auto;min-width:2.75rem;min-height:2.75rem;background:none;
border:1px solid var(--rule-bold);border-radius:3px;font-size:var(--t-lead);color:var(--ink);cursor:pointer}
.askhead .ax:focus-visible{outline:2.5px solid var(--seal);outline-offset:2px}
.askrule{flex:none;padding:var(--s-1) var(--s-3);background:var(--wash);
border-bottom:1px solid var(--rule);font-size:var(--t-note);line-height:var(--lh-body);color:var(--ink-2)}
.askrule b{color:var(--ink)}
.asklog{flex:1;overflow-y:auto;padding:var(--s-2) var(--s-3);display:flex;flex-direction:column;gap:var(--s-2)}
.msg{max-width:92%;font-size:var(--t-sub);line-height:var(--lh-snug)}
.msg.me{align-self:flex-end;background:var(--field);border:1px solid var(--rule);
border-radius:3px;padding:var(--s-1) var(--s-2);color:var(--ink)}
.msg.bot{align-self:flex-start}
.msg.bot .who{font-family:var(--serif);font-size:var(--t-note);color:var(--ink-3);margin-bottom:var(--s-hair)}
.msg.bot .bd{background:var(--wash-warm);border:1px solid var(--rule);border-radius:3px;
padding:var(--s-1) var(--s-2);color:var(--ink-2)}
.msg.bot .bd b{color:var(--ink)}
.msg.bot .bd .seal{vertical-align:-.125rem}
.msg.bot .bd a{color:var(--seal);border-bottom:1px solid var(--seal);font-weight:600}
.msg.bot .bd .go{display:inline-block;margin-top:var(--s-tight)}
.askchips{flex:none;display:flex;gap:var(--s-tight);flex-wrap:wrap;padding:var(--s-1) var(--s-3);
border-top:1px solid var(--rule)}
.askchips button{min-height:2.375rem;padding:var(--s-hair) var(--s-1);background:var(--field);
border:1px solid var(--rule-bold);border-radius:1.1875rem;
font-family:var(--sans);font-size:var(--t-note);color:var(--ink);cursor:pointer}
.askchips button:hover{background:var(--wash)}
.askchips button:focus-visible{outline:2.5px solid var(--seal);outline-offset:2px}
.askform{flex:none;display:flex;gap:var(--s-tight);padding:.75rem 1.125rem
calc(.875rem + env(safe-area-inset-bottom));border-top:1px solid var(--rule-bold)}
.askform input{flex:1;font-family:var(--sans);font-size:var(--t-body);padding:var(--s-1) var(--s-2);
min-height:2.875rem;background:var(--field);border:1px solid var(--rule-bold);
border-radius:3px;color:var(--ink)}
.askform input:focus-visible{outline:2.5px solid var(--seal);outline-offset:2px}
.askform button{min-height:2.875rem;padding:0 var(--s-3);background:var(--seal);color:var(--paper);
border:0;border-radius:3px;font-family:var(--sans);font-size:var(--t-sub);font-weight:600;cursor:pointer}
.askform button:focus-visible{outline:2.5px solid var(--ink);outline-offset:2px}
.askwarn{flex:none;display:none;padding:var(--s-1) var(--s-3);background:var(--field);
border-top:1px solid var(--vermilion);font-size:var(--t-note);line-height:var(--lh-body);color:var(--vermilion)}
.askwarn.on{display:block}
@media(prefers-reduced-motion:no-preference){
.askpanel.on{animation:slidein .18s ease-out}
@keyframes slidein{from{transform:translateX(1.5rem);opacity:0}to{transform:none;opacity:1}}
}
@media print{.askbtn,.askpanel,.askveil{display:none!important}}
/* ── 지도 ── */
.gmap{position:relative;height:19rem;border:1px solid var(--rule-bold);border-radius:3px;
overflow:hidden;background:var(--wash)}
.gmap.tall{height:26rem}
.leaflet-container{font-family:var(--sans)!important;background:var(--wash)!important}
.leaflet-control-attribution{font-size:.6875rem!important;background:rgba(250,247,238,.9)!important;
color:var(--ink-3)!important}
.leaflet-control-attribution a{color:var(--ink-2)!important}
.leaflet-bar a{color:var(--ink)!important;background:var(--field)!important;
border-bottom-color:var(--rule)!important;width:2rem!important;height:2rem!important;
line-height:2rem!important;font-size:var(--t-lead)!important}
.leaflet-bar a:hover{background:var(--wash)!important}
.leaflet-popup-content-wrapper{background:var(--paper)!important;border:1px solid var(--rule-bold)!important;
border-radius:3px!important;box-shadow:none!important}
.leaflet-popup-tip{background:var(--paper)!important;border:1px solid var(--rule-bold)!important;
box-shadow:none!important}
.leaflet-popup-content{margin:var(--s-1) var(--s-2)!important;font-family:var(--sans)!important;
font-size:var(--t-note)!important;line-height:var(--lh-snug)!important;color:var(--ink-2)!important}
.leaflet-popup-content .pn{font-family:var(--serif);font-size:var(--t-body);color:var(--ink);
display:block;margin-bottom:var(--s-hair)}
.leaflet-popup-content .pd{font-size:var(--t-note);color:var(--ink-3)}
.leaflet-popup-content a{display:inline-block;margin-top:var(--s-tight);color:var(--seal);
border-bottom:1px solid var(--seal);font-weight:600}
/* 핀 — 출처인과 같은 언어 */
.gpin{display:grid;place-items:center;width:1.75rem;height:1.75rem;
background:var(--paper);border:1.5px solid var(--ink);border-radius:2px;
font-family:var(--serif);font-size:var(--t-sub);color:var(--ink);
box-shadow:0 1px 0 var(--rule-bold)}
.gpin.here{background:var(--seal);border-color:var(--seal);color:var(--paper)}
.gpin.dim{border-color:var(--ink-3);color:var(--ink-3);border-style:dashed}
/* 지도가 안 뜰 때 */
.mapfall{position:absolute;inset:0;display:none;place-items:center;text-align:center;
padding:var(--s-3);background:var(--wash)}
.mapfall.on{display:grid}
.mapfall .mt{font-family:var(--serif);font-size:var(--t-lead);color:var(--ink-2);margin-bottom:var(--s-tight)}
.mapfall .md{font-size:var(--t-note);line-height:var(--lh-snug);color:var(--ink-3);max-width:28em}
/* 길찾기 */
.wayto{display:flex;gap:var(--s-tight);flex-wrap:wrap;margin-top:var(--s-1)}
.wayto a{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 var(--s-2);
border:1px solid var(--rule-bold);border-radius:3px;font-size:var(--t-note);color:var(--ink);
text-decoration:none;background:var(--field)}
.wayto a:hover{background:var(--wash)}
.wayto a:focus-visible{outline:2.5px solid var(--seal);outline-offset:2px}
/* 범례 */
.maplegend{display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center;
margin-top:var(--s-1);font-size:var(--t-note);color:var(--ink-3)}
.maplegend span.i{display:inline-flex;align-items:center;gap:var(--s-hair)}
.maplegend .gpin{width:1.375rem;height:1.375rem;font-size:var(--t-note);box-shadow:none}
/* 목록 ↔ 지도 */
.viewtog{display:inline-flex;border:1px solid var(--rule-bold);border-radius:3px;overflow:hidden}
.viewtog button{min-height:2.75rem;padding:0 var(--s-3);background:var(--field);border:0;
font-family:var(--sans);font-size:var(--t-sub);color:var(--ink-2);cursor:pointer}
.viewtog button+button{border-left:1px solid var(--rule-bold)}
.viewtog button[aria-pressed=true]{background:var(--ink);color:var(--paper);font-weight:600}
.viewtog button:focus-visible{outline:2.5px solid var(--seal);outline-offset:-3px}
/* 가까움에 대한 주의 */
.nearnote{margin-top:var(--s-1);font-size:var(--t-note);line-height:var(--lh-snug);color:var(--ink-3);max-width:42em}
.nearnote b{color:var(--ink-2)}
/* 지역 선택 */
.rgn{display:flex;align-items:center;gap:var(--s-tight);flex-wrap:wrap;margin-bottom:var(--s-2)}
.rgn select{font-family:var(--sans);font-size:var(--t-body);padding:var(--s-1) var(--s-1);min-height:2.75rem;
background:var(--field);border:1px solid var(--rule-bold);border-radius:3px;color:var(--ink)}
.rgn select:focus-visible{outline:2.5px solid var(--seal);outline-offset:3px}
.rgn .sep{color:var(--ink-3)}
.rgn .thick{margin-left:var(--s-hair);font-size:var(--t-note);color:var(--ink-3)}
.rgn .thick b{color:var(--ink-2)}
/* 기록이 얇은 지역 */
.thin-rgn{margin:var(--s-3) 0;padding:var(--s-3) var(--s-3);background:var(--wash-warm);
border:1px solid var(--rule-bold);border-radius:4px}
.thin-rgn h2,.thin-rgn h3,.thin-rgn h4{font-family:var(--serif);font-size:var(--t-h3);font-weight:400;margin-bottom:var(--s-1)}
.thin-rgn p{font-size:var(--t-sub);line-height:var(--lh-body);color:var(--ink-2);max-width:42em}
.thin-rgn p b{color:var(--ink);font-weight:600}
.thin-rgn .ta{margin-top:var(--s-2);display:flex;gap:var(--s-tight);flex-wrap:wrap}
.thin-rgn .ta .act{min-height:2.75rem;padding:0 var(--s-2);font-size:var(--t-sub);margin:0}
.nocost{color:var(--ink-3);font-family:var(--serif);font-size:var(--t-body)}
/* 무엇이 어디 저장되는가 — 상시 고지 */
.keep{display:flex;align-items:flex-start;gap:var(--s-1);flex-wrap:wrap;
margin-top:var(--s-3);padding:var(--s-2) var(--s-3);background:var(--field);
border:1px solid var(--rule);border-left:3px solid var(--seal);border-radius:0 3px 3px 0}
.keep .ki{font-family:var(--serif);font-size:var(--t-lead);color:var(--seal);flex:none;line-height:var(--lh-tight)}
.keep .kb{flex:1;min-width:14rem}
.keep .kb b{color:var(--ink);font-weight:600}
.keep p{font-size:var(--t-note);line-height:var(--lh-snug);color:var(--ink-2)}
.keep .ka{display:flex;gap:var(--s-tight);flex-wrap:wrap;margin-top:var(--s-1)}
.keep .ka .act{min-height:2.75rem;padding:0 var(--s-2);font-size:var(--t-note);margin:0}
/* 무엇을 가지고 있나 — 표 */
.hold{margin-top:var(--s-hair);width:100%;border-collapse:collapse}
.hold th,.hold td{padding:var(--s-2) var(--s-1);border-bottom:1px solid var(--rule);
text-align:left;font-size:var(--t-sub);vertical-align:top}
.hold th{font-size:var(--t-note);font-weight:600;color:var(--ink-3);border-bottom:1px solid var(--rule-bold)}
.hold td.w{font-family:var(--serif);font-size:var(--t-body);width:9rem}
.hold td.k{color:var(--ink-2);font-size:var(--t-note);line-height:var(--lh-body)}
.hold td.n{white-space:nowrap;font-size:var(--t-note);color:var(--seal);font-weight:600}
.hold tr.no td.n{color:var(--vermilion)}
/* 상태: 불러오는 중 */
.skel{padding:var(--s-3) 0;border-bottom:1px solid var(--rule)}
.skb{height:.875rem;border-radius:2px;background:var(--rule-hair);margin-bottom:var(--s-tight)}
@media(prefers-reduced-motion:no-preference){
.skb{animation:sk 1.4s ease-in-out infinite}
@keyframes sk{0%,100%{opacity:1}50%{opacity:.45}}
}
.skwrap[aria-busy=true]{opacity:1}
/* 상태: 잘못됨 */
.err{margin-top:var(--s-3);padding:var(--s-3) var(--s-3);background:var(--field);
border:1px solid var(--vermilion);border-radius:3px}
.err h2,.err h3,.err h4{font-size:var(--t-body);color:var(--vermilion);margin-bottom:var(--s-tight)}
.err p{font-size:var(--t-sub);line-height:var(--lh-snug);color:var(--ink-2)}
.err .ea{margin-top:var(--s-2);display:flex;gap:var(--s-tight);flex-wrap:wrap}
.err .ea .act{min-height:2.75rem;padding:0 var(--s-2);font-size:var(--t-note);margin:0}
.fixnote{margin-top:var(--s-2);font-size:var(--t-note);line-height:var(--lh-snug);color:var(--ink-3)}
.fixnote b{color:var(--ink-2)}
.fixlink{font-size:var(--t-note);font-weight:600;color:var(--seal);border-bottom:1px solid var(--seal);
padding:0 0 1px;min-height:auto;margin-right:var(--s-tight)}
.fixlink:hover{color:var(--ink);border-color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
/* ── 제호 ── */
.masthead{border-bottom:2px solid var(--ink);background:var(--paper);position:sticky;top:0;z-index:60}
.mh{max-width:var(--w);margin:0 auto;padding:0 var(--s-3);height:3.875rem;display:flex;align-items:center;gap:var(--s-3)}
.brand{font-family:var(--serif);font-size:var(--t-h2);letter-spacing:.04em;line-height:1;padding-top:3px}
.brand em{font-style:normal;font-family:var(--sans);font-size:var(--t-note);letter-spacing:.14em;
color:var(--ink-3);margin-left:var(--s-1);vertical-align:3px;font-weight:600}
.mnav{margin-left:auto;display:flex;gap:2px;align-items:center}
.mh .fsctl{margin-left:var(--s-2)}
.mh .who{margin-left:auto}
@media(max-width:700px){
.mh{height:auto;padding:var(--s-1) var(--s-2);flex-wrap:wrap;gap:var(--s-1)}
.mnav{margin-left:auto;order:3}
.mh .fsctl{margin-left:auto;order:2}
.mnav a{padding:var(--s-tight) var(--s-1);font-size:var(--t-note)}
}
.mnav a{padding:var(--s-1) var(--s-2);font-size:var(--t-sub);color:var(--ink-2);border-radius:3px}
.mnav a:hover,.mnav a.here{background:var(--wash);color:var(--ink)}
.mnav a.cmp{border:1.5px solid var(--rule-bold);margin-left:var(--s-tight)}
.trail{max-width:var(--w);margin:0 auto;padding:var(--s-2) var(--s-3) 0;font-size:var(--t-note);color:var(--ink-3)}
.trail a:hover{color:var(--seal);text-decoration:underline}
.sheet{max-width:var(--w);margin:0 auto;padding:0 var(--s-3) 7.5rem}
/* ── 시그니처: 출처인(出處印) ── */
.seal{display:inline-grid;place-items:center;width:1.75em;height:1.75em;flex:none;
border:1.5px solid currentColor;border-radius:2px;
font-family:var(--serif);font-size:var(--t-note);line-height:1;padding-top:1px;vertical-align:middle}
.seal.g,.seal.p{color:var(--seal)} /* 공 — 정부 공개 */ /* 공 — 정부 공개데이터 */
.seal.f{color:var(--ink-2)} /* 관 — 시설이 입력 */
.seal.u{color:var(--vermilion)} /* 민 — 이용자 제보 */
.seal.n{color:var(--ink-3)} /* 미 — 아직 확인 못함 */
.stamp{display:inline-flex;align-items:center;gap:var(--s-tight);font-size:var(--t-note);
color:var(--ink-3);white-space:nowrap;position:relative}
.stamp[tabindex]{cursor:help}
.stamp b{font-weight:600;color:var(--ink-2)}
.stamp .tip{display:none;position:absolute;bottom:calc(100% + 0.5625rem);left:0;width:14.75rem;
padding:var(--s-1) var(--s-2);background:var(--ink);color:#fff;font-size:var(--t-note);font-weight:400;
line-height:var(--lh-body);border-radius:3px;z-index:40;white-space:normal;letter-spacing:0}
.stamp:hover .tip,.stamp:focus-within .tip{display:block}
.legend{display:flex;gap:var(--s-3);flex-wrap:wrap;padding:var(--s-2) 0;
border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
/* ── 기록 머리 ── */
.rechead{padding:var(--s-4) 0 0}
.eyebrow{display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap;
font-size:var(--t-note);color:var(--ink-3);font-weight:600}
.eyebrow .no{margin-left:auto;font-family:var(--serif);font-size:var(--t-note)}
h1{font-family:var(--serif);font-size:var(--t-hero);line-height:var(--lh-num);letter-spacing:var(--ls-lead);
margin:var(--s-1) 0 0;font-weight:400}
.addr{margin-top:var(--s-1);font-size:var(--t-body);color:var(--ink-2)}
.byline{margin-top:var(--s-1);font-size:var(--t-sub);color:var(--ink-3)}
.byline b{color:var(--seal);font-weight:600}
.sealrow{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-3);padding:var(--s-2) 0;
border-top:1px solid var(--rule-bold);border-bottom:1px solid var(--rule-bold)}
.drawline{transform-origin:left;animation:draw .5s cubic-bezier(.2,.7,.3,1) both}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* ── 사람의 목소리 ── */
.quote{margin:var(--s-4) 0 0;padding:var(--s-3) 0;border-bottom:1px solid var(--rule)}
.qpick{display:flex;align-items:center;gap:var(--s-1);flex-wrap:wrap;margin-bottom:var(--s-2);
font-size:var(--t-note);color:var(--ink-3);font-weight:600}
.qpick .sw{display:flex;gap:0;margin-left:auto;border:1px solid var(--rule-bold);border-radius:3px;overflow:hidden}
.qpick .sw button{min-height:2.125rem;padding:var(--s-hair) var(--s-1);font-size:var(--t-note);font-weight:600;color:var(--ink-3);letter-spacing:0}
.qpick .sw button+button{border-left:1px solid var(--rule-bold)}
.qpick .sw button.on{background:var(--ink);color:var(--paper)}
.quote blockquote{font-family:var(--serif);font-size:var(--t-h2);line-height:var(--lh-body);
letter-spacing:var(--ls-lead);max-width:26em;text-indent:-.42em}
.quote figcaption{margin-top:var(--s-2);font-size:var(--t-note);color:var(--ink-3);
display:flex;align-items:center;gap:var(--s-1);flex-wrap:wrap}
.quote figcaption b{color:var(--ink-2);font-weight:600}
.qrule{margin-top:var(--s-2);font-size:var(--t-note);color:var(--ink-3);line-height:var(--lh-body)}
/* ── 대장 구획 ── */
.entry{display:grid;grid-template-columns:7.375rem 1fr;border-bottom:1px solid var(--rule)}
.entry.last,.entry:last-of-type{border-bottom:2px solid var(--ink)}
.ekey{padding:var(--s-4) var(--s-3) var(--s-4) 0;border-right:1px solid var(--rule);
font-family:var(--serif);font-size:var(--t-lead);line-height:var(--lh-tight)}
.ekey small{display:block;font-family:var(--sans);font-size:var(--t-note);letter-spacing:.05em;
color:var(--ink-3);margin-top:var(--s-hair);font-weight:600}
.eval{padding:var(--s-4) 0 var(--s-4) var(--s-4);min-width:0}
.lede{font-size:var(--t-body);color:var(--ink-2);margin-bottom:var(--s-3);max-width:43em}
/* ── 금액 ── */
.figure{display:flex;align-items:baseline;gap:var(--s-1);flex-wrap:wrap}
.figure .n{font-size:var(--t-hero);font-weight:700;letter-spacing:-.038em;line-height:1;
font-variant-numeric:tabular-nums}
.figure .u{font-size:var(--t-h3);color:var(--ink-2);font-weight:500}
.figcap{margin-top:var(--s-1);display:flex;align-items:center;gap:var(--s-1);flex-wrap:wrap;
font-size:var(--t-sub);color:var(--ink-3)}
.bar{display:flex;height:0.8125rem;margin-top:var(--s-3);border:1px solid var(--ink);background:var(--field)}
.bar i{transition:flex .35s cubic-bezier(.3,.8,.3,1)}
.bar i+i{border-left:1px solid var(--field)}
/* ── leader dots — 장부의 언어 ── */
.ledger{margin-top:var(--s-3)}
.led{display:flex;align-items:baseline;gap:var(--s-1);padding:var(--s-1) 0;border-bottom:1px dotted var(--rule)}
.led:last-child{border-bottom:0}
.led .sw{width:0.625rem;height:0.625rem;flex:none;align-self:center;border:1px solid rgba(0,0,0,.18)}
.led .k{font-size:var(--t-body);color:var(--ink-2);white-space:nowrap}
.led .k em{font-style:normal;font-size:var(--t-note);color:var(--ink-3);margin-left:var(--s-hair)}
.led .fill{flex:1;min-width:0.875rem}
.led .v{font-size:var(--t-body);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.led .v.dim{font-weight:400;color:var(--ink-3)}
.led.total{border-top:1px solid var(--ink);border-bottom:0;margin-top:var(--s-tight);padding-top:var(--s-2)}
.led.gap{background:var(--wash);margin:0 -12px;padding:var(--s-1);border-bottom:0;border-radius:3px}
.led.gap .v{color:var(--vermilion)}
.gapnote{margin-top:var(--s-2);padding:var(--s-2) var(--s-3);border-left:3px solid var(--vermilion);
background:var(--wash);font-size:var(--t-sub);line-height:var(--lh-body);color:var(--ink-2);border-radius:0 3px 3px 0}
.gapnote b{color:var(--ink);font-weight:600}
/* ── 사실 목록 ── */
.facts{display:grid}
.fact{display:grid;grid-template-columns:7rem 1fr auto;gap:var(--s-2);align-items:baseline;
padding:var(--s-1) 0;border-bottom:1px dotted var(--rule)}
.fact:last-child{border-bottom:0}
.fact .k{font-size:var(--t-sub);color:var(--ink-3)}
.fact .v{font-size:var(--t-body)}
.fact .v b{font-weight:600}
.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:0 var(--s-4)}
.item{display:flex;align-items:baseline;gap:var(--s-1);padding:var(--s-1) 0;border-bottom:1px dotted var(--rule)}
.item .t{font-size:var(--t-body)}
.item .mk{margin-left:auto;font-size:var(--t-note);font-weight:600;white-space:nowrap}
.item.y .mk{color:var(--seal)}
.item.n .mk{color:var(--ink-3)}
.item.u{color:var(--ink-3)}
.item.u .mk{color:var(--ink-3);font-weight:400}
/* ── 제보 ── */
.repwrap{background:var(--wash-warm);border-radius:4px;padding:var(--s-3) var(--s-3)}
.rep{padding:var(--s-3) 0;border-bottom:1px solid var(--rule-hair)}
.repwrap .rep:first-of-type{padding-top:0}
.repwrap .rep:last-of-type{border-bottom:0;padding-bottom:0}
.rep-h{display:flex;align-items:center;gap:var(--s-1);flex-wrap:wrap;
font-size:var(--t-note);color:var(--ink-3);margin-bottom:var(--s-1)}
.rep-h b{color:var(--ink-2);font-weight:600}
.rep p{font-size:var(--t-body);line-height:var(--lh-body);max-width:44em}
.rep-f{margin-top:var(--s-1);display:flex;gap:var(--s-tight)}
.tick{font-size:var(--t-note);min-height:2.75rem;padding:var(--s-tight) var(--s-2);border:1px solid var(--rule);
border-radius:3px;color:var(--ink-2)}
.tick:hover{border-color:var(--ink);color:var(--ink)}
.gate{margin-top:var(--s-3);padding:var(--s-4) var(--s-4);border:1px solid var(--rule-bold);border-radius:4px;
background:var(--wash-warm);text-align:center}
.gate h2,.gate h3,.gate h4{font-family:var(--serif);font-size:var(--t-h3);font-weight:400;margin-bottom:var(--s-1)}
.gate p{font-size:var(--t-body);color:var(--ink-2);max-width:36em;margin:0 auto 1.25rem;line-height:var(--lh-body)}
/* ── 조작 ── */
.act{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-tight);
min-height:3.125rem;padding:0 var(--s-3);border-radius:4px;font-size:var(--t-body);font-weight:600}
.act.solid{background:var(--ink);color:var(--paper)}
.act.solid:hover{background:var(--seal)}
.act.line{border:1.5px solid var(--ink)}
.act.line:hover{background:var(--wash)}
.act.on{background:var(--seal);color:var(--paper);border-color:var(--seal)}
.act.full{width:100%}
.act+.act{margin-top:var(--s-tight)}
.chip{min-height:2.75rem;padding:var(--s-tight) var(--s-2);border:1px solid var(--rule);border-radius:3px;
font-size:var(--t-sub);color:var(--ink-2);background:var(--field)}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:600}
.chips{display:flex;gap:var(--s-tight);flex-wrap:wrap}
/* ── 우측 요약 ── */
.wrap{display:grid;grid-template-columns:1fr 16.75rem;gap:var(--s-5);align-items:start}
.aside{position:sticky;top:5.125rem;padding-top:var(--s-4)}
.abox{border:1.5px solid var(--ink);background:var(--field);padding:var(--s-3);border-radius:4px}
.abox+.abox{margin-top:var(--s-2);border-width:1px;border-color:var(--rule-bold)}
.abox h2,.abox h3,.abox h4{font-family:var(--serif);font-size:var(--t-body);font-weight:400;margin-bottom:var(--s-2);
padding-bottom:var(--s-1);border-bottom:1px solid var(--rule)}
.vac{font-size:var(--t-sub);font-weight:600;color:var(--seal);margin-bottom:var(--s-2);
display:flex;align-items:center;gap:var(--s-tight)}
.vac::before{content:'';width:0.4375rem;height:0.4375rem;background:var(--seal);flex:none}
.vac.none{color:var(--ink-3)} .vac.none::before{background:var(--ink-3)}
.phone{display:block;margin-top:var(--s-tight);padding:var(--s-2);border:1px solid var(--rule-bold);
border-radius:3px;text-align:center}
.phone:hover{border-color:var(--ink)}
.phone .l{font-size:var(--t-note);color:var(--ink-3);}
.phone .n{font-size:var(--t-h3);font-weight:700;font-variant-numeric:tabular-nums;margin-top:3px}
.fine{margin-top:var(--s-2);font-size:var(--t-note);line-height:var(--lh-body);color:var(--ink-3)}
.kv{display:flex;gap:var(--s-1);padding:var(--s-tight) 0;border-bottom:1px dotted var(--rule);font-size:var(--t-sub)}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--ink-3);width:4.5rem;flex:none;font-size:var(--t-note)}
/* ── 기여자 ── */
.contrib{max-width:var(--w);margin:0 auto;padding:var(--s-4) var(--s-3) 0}
.contrib .in{background:var(--wash-warm);border-radius:4px;padding:var(--s-3) var(--s-4);
display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.contrib h2,.contrib h3,.contrib h4{font-family:var(--serif);font-size:var(--t-h3);font-weight:400;line-height:var(--lh-tight)}
.contrib p{font-size:var(--t-sub);color:var(--ink-2);line-height:var(--lh-body);max-width:38em}
.contrib .n{font-family:var(--serif);font-size:var(--t-hero);line-height:1;color:var(--seal);
font-variant-numeric:tabular-nums}
/* ── 판권 ── */
.colophon{max-width:var(--w);margin:0 auto;padding:var(--s-4) var(--s-3) var(--s-6);
border-top:2px solid var(--ink);font-size:var(--t-note);line-height:var(--lh-body);color:var(--ink-3)}
.colophon b{color:var(--ink-2)}
.method{display:inline-flex;align-items:center;gap:var(--s-tight);margin-bottom:var(--s-1);font-size:var(--t-note);
font-weight:600;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px}
.proto{color:#9A8E73}
/* ── 알림·바닥 ── */
.mobile{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--paper);
border-top:2px solid var(--ink);padding:0.6875rem 1.25rem calc(0.6875rem + env(safe-area-inset-bottom));gap:var(--s-1)}
.toast{position:fixed;left:50%;bottom:2.125rem;transform:translate(-50%,0.875rem);background:var(--ink);
color:var(--paper);padding:var(--s-2) var(--s-3);border-radius:4px;font-size:var(--t-sub);opacity:0;
pointer-events:none;transition:.24s;z-index:100;max-width:calc(100% - 2.5rem);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.veil{display:none;position:fixed;inset:0;background:rgba(20,24,26,.5);z-index:80;
align-items:center;justify-content:center;padding:var(--s-3)}
.veil.on{display:flex}
.modal{background:var(--paper);border:2px solid var(--ink);border-radius:4px;
max-width:35rem;width:100%;max-height:88vh;overflow:auto;padding:var(--s-4)}
.modal h2{font-family:var(--serif);font-size:var(--t-h2);font-weight:400;margin-bottom:var(--s-tight)}
/* ── 반응 ── */
@media(max-width:880px){
.wrap{grid-template-columns:1fr;gap:0}
.aside{position:static;padding-top:var(--s-4);order:2}
.mobile{display:flex}
.sheet{padding-bottom:6.25rem}
h1{font-size:var(--t-num)}
.figure .n{font-size:var(--t-hero)}
.quote blockquote{font-size:var(--t-h3)}
.contrib .n{font-size:var(--t-num)}
.entry{grid-template-columns:1fr}
.ekey{padding:var(--s-3) 0 0;border-right:0;font-size:var(--t-body);display:flex;align-items:baseline;gap:var(--s-1)}
.ekey small{margin-top:0}
.eval{padding:var(--s-2) 0 var(--s-4)}
.fact{grid-template-columns:6rem 1fr}
.fact .stamp{grid-column:2}
.mnav a{padding:var(--s-1) var(--s-1);font-size:var(--t-note)}
.mh{gap:var(--s-tight)}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{
.masthead,.mobile,.toast,.aside,.act,.tick,.noprint{display:none!important}
body{background:#fff;font-size:11pt}
.entry{break-inside:avoid}
}
/* ── 통(.mh)이 없는 머리말 ──
생성 화면(전국·동네·시설)은 빵부스러기와 제목만 있는 단순한 머리말을 쓴다.
글자 크기 조절은 빵부스러기 줄 오른쪽에 앉힌다.
좁은 화면에서는 겹치지 않게 제목 아래로 내린다. */
.masthead>.fsctl{position:absolute;top:.8125rem;right:1.5rem;margin:0}
@media(max-width:640px){
.masthead>.fsctl{position:static;margin:var(--s-1) var(--s-3) var(--s-2)}
}
@media print{.fsctl{display:none}}
/* ── 기다리는 기간 ──
공개 자료에 없는 값이다. 먼저 들어가신 분들이 알려주신 것만 적는다.
그래서 「민」 도장이 붙고, 제보 건수를 반드시 함께 보인다.
숫자만 크게 적으면 확정된 사실처럼 읽히므로 근거를 곁에 붙여 둔다. */
.waitgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr));
gap:var(--s-2);margin-top:var(--s-2)}
.wq{padding:var(--s-2) var(--s-3);border:1.5px solid var(--rule-bold);border-radius:3px;
background:var(--field)}
.wl{letter-spacing:var(--ls-body);font-size:var(--t-note);color:var(--ink-3);}
.wn{font-family:var(--serif);font-size:var(--t-num);line-height:var(--lh-num);color:var(--ink);
margin-top:.1875rem;font-variant-numeric:tabular-nums}
.wu{font-family:var(--sans);font-size:var(--t-sub);color:var(--ink-2);margin-left:.1875rem}
.wm{font-size:var(--t-note);color:var(--ink-2);margin-top:var(--s-tight);line-height:var(--lh-body)}
.wr{font-size:var(--t-note);color:var(--ink-3);margin-top:var(--s-tight);
padding-top:var(--s-tight);border-top:1px solid var(--rule);line-height:var(--lh-body)}
/* 제보가 얇으면 숫자를 작게 — 그럴듯해 보이지 않게 */
.wq.thin .wn{font-size:var(--t-h3);color:var(--ink-2)}
/* 햇수 고르기 (실버타운) */
.yrbtns{display:flex;gap:var(--s-tight);flex-wrap:wrap;margin-top:var(--s-1)}
.yb[aria-pressed="true"],.yb.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* ── 광고 금액과 실제로 빠지는 돈이 다른 자리 ──
곁이 있는 이유에 가장 가까운 구획이다.
「3등급 47만원」 같은 숫자는 급여 본인부담만 적은 것이고,
상급침실료·식대·기저귀가 그 위에 붙는다.
그래서 어디서나 같은 것과 시설마다 다른 것을 갈라 적는다. */
.trapbox{margin-top:var(--s-3);padding:var(--s-3) var(--s-3);border:1.5px solid var(--vermilion);
border-radius:3px;background:var(--field)}
.trapbox>b,.trapbox>h3{display:block;font-family:var(--serif);font-size:var(--t-body);
font-weight:400;color:var(--ink);margin-bottom:var(--s-tight)}
.trapline{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-2);
padding:var(--s-tight) 0;border-bottom:1px solid var(--rule);font-size:var(--t-note);color:var(--ink-2)}
.trapline:last-child{border-bottom:0}
.trapline .hi{color:var(--vermilion);font-weight:600}
.tb{margin-top:var(--s-1);padding-top:var(--s-1);border-top:1px solid var(--rule);
font-size:var(--t-note);color:var(--ink-3);line-height:var(--lh-body);max-width:42em}
/* ── 시설이 직접 적은 말 ──
「사실 입력 가능, 표현 불가」. 곁은 고치지도 지우지도 않는다.
대신 누가 적었는지 도장으로 밝힌다. */
.facilsay{margin-top:var(--s-2);padding:var(--s-2) var(--s-3);border-left:3px solid var(--rule-bold);
background:var(--wash);border-radius:0 3px 3px 0}
.fsh{font-size:var(--t-note);color:var(--ink-3);margin-bottom:var(--s-tight)}
.fsf{font-size:var(--t-note);color:var(--ink-3);line-height:var(--lh-body);margin-top:var(--s-1);
padding-top:var(--s-tight);border-top:1px solid var(--rule);max-width:42em}
/* 대기는 순번이 아니다 — 잘못 읽히면 기다림을 오해하신다 */
.waitnote{margin-top:var(--s-1);font-size:var(--t-note);color:var(--ink-2);line-height:var(--lh-body);max-width:42em}
/* 잔글씨 안내 */
.gnote{margin-top:var(--s-1);font-size:var(--t-note);color:var(--ink-3);line-height:var(--lh-body);max-width:40em}
.fallwhy{margin-top:var(--s-tight);font-size:var(--t-note);color:var(--ink-2);line-height:var(--lh-body)}
.act-row{display:flex;gap:var(--s-tight);flex-wrap:wrap;align-items:center;margin-top:var(--s-1)}
/* 눈에는 안 보이고 읽어 주는 기계에만 들리는 글.
출처인 도장이 뒷글자와 붙어 「민제보」로 들리던 것을 끊는 데 쓴다. */
.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}
/* ══════════════════════════════════════════════════════════
작은 기기에서 넘치지 않게
가로로 넘치면 어르신은 **글자가 잘린 줄 모르십니다.**
손가락으로 옆으로 미는 것을 모르시는 분도 계십니다.
nowrap 을 쓴 곳은 옆에 값이 붙으면 한 줄을 넘어갑니다.
좁은 기기에서는 줄을 바꾸게 둡니다.
══════════════════════════════════════════════════════════ */
@media(max-width:420px){
.led, .item, .rooms, .gaps tr, .hold tr{flex-wrap:wrap}
.led .k, .led .v, .staff dd, .health dt, .howcount dt, .rooms span{
white-space:normal;word-break:keep-all}
/* 표가 넘치면 표만 옆으로 밀 수 있게 — 화면 전체가 밀리면 안 됩니다 */
.fa, .gaps, .hold, .cands{display:block;overflow-x:auto;
-webkit-overflow-scrolling:touch}
}
/* 어떤 화면도 가로로 밀리지 않게 */
html, body{overflow-x:hidden;max-width:100%}
img, table, pre{max-width:100%}
/* ══════════════════════════════════════════════════════════
종이로 나올 때
어르신은 화면을 인쇄해 들고 다니십니다.
자녀에게 보여 드리거나, 시설에 가져가 여쭤보십니다.
그래서 **어느 화면이든** 종이로 나와도 읽히게 합니다.
· 누를 수 없는 것은 지웁니다 (단추 · 머리말 · 건너뛰기)
· 링크 주소를 옆에 적습니다 — 종이에서는 누를 수 없으니
· 접힌 것을 펼칩니다 — 종이에서는 열 수 없으니
· 밝히는 글은 **반드시 함께 찍힙니다**
══════════════════════════════════════════════════════════ */
@media print{
/* 종이에서는 뜻이 없는 것 */
.skip, .masthead, .fsctl, .send, .speakbtn, .sharebtn,
button, nav, .crumb, [role="button"]{display:none!important}
/* 종이 아끼기 · 잉크 아끼기 */
body{background:#fff;color:#000;font-size:10.5pt;line-height:1.6}
.sheet{max-width:none;padding:0;margin:0}
a{color:#000;text-decoration:underline}
/* 종이에서는 누를 수 없으니 주소를 옆에 적습니다.
안쪽 링크는 파일 이름만 적어도 뜻이 통합니다. */
a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt;
word-break:break-all}
/* 접힌 것을 펼칩니다 — 종이에서는 열 수 없습니다 */
details{display:block}
details > summary{font-weight:600;list-style:none}
details[open] > summary::marker, details > summary::marker{content:""}
details > *{display:revert!important}
/* 밝히는 글은 반드시 함께 찍힙니다.
작게 적으면 적어 두고도 숨긴 것이 됩니다. */
.keep, .keepbox, .disclose, .mockbar, .gonewhy, .note{
font-size:9.5pt!important;color:#000!important;
border:1px solid #000;padding:6pt;page-break-inside:avoid}
/* 표와 카드가 장을 넘어가며 잘리지 않게 */
table, .fa, .ecard, .facility, .guard{page-break-inside:avoid}
h1, h2, h3{page-break-after:avoid}
/* 그림자 · 둥근 모서리는 잉크만 먹습니다 */
*{box-shadow:none!important}
}
/* ══ 전화를 거시기 전에 ═══════════════════════════════════
번호를 드린 다음이 진짜 문제입니다. 처음 거시는 분은 무엇을
물어야 할지 모르셔서 「빈 자리 있나요」만 여쭙고 끊으십니다.
전화가 붙은 화면에만 나옵니다. 없는 동네에 띄우면 놀리는 것입니다. */
.callcard{margin:var(--s-4) 0;padding:var(--s-3);
border:2px solid var(--ink);border-radius:4px;background:var(--field)}
.cch{display:flex;align-items:center;justify-content:space-between;
gap:var(--s-2);margin-bottom:var(--s-tight)}
.cch h2{font-family:var(--serif);font-size:var(--t-h3);font-weight:400;margin:0}
.pr{min-height:2.75rem;padding:0 var(--s-2);border:1px solid var(--rule-bold);
border-radius:3px;font-size:var(--t-sub);color:var(--ink-2);background:var(--paper)}
.pr:hover{background:var(--wash);color:var(--ink);border-color:var(--ink)}
.ccs{font-size:var(--t-sub);color:var(--ink-2);line-height:var(--lh-snug);
max-width:var(--w-note)}
.ccs b{color:var(--ink);font-weight:600}
.ccl{list-style:none;counter-reset:q;margin-top:var(--s-2);padding:0}
.ccl li{counter-increment:q;position:relative;
padding:var(--s-2) 0 var(--s-2) 2.5rem;border-top:1px solid var(--rule-hair)}
.ccl li::before{content:counter(q);position:absolute;left:0;top:var(--s-2);
display:grid;place-items:center;width:1.75rem;height:1.75rem;
background:var(--ink);color:var(--paper);border-radius:50%;
font-size:var(--t-note);font-weight:600;letter-spacing:0}
.ccl li b{display:block;font-size:var(--t-body);font-weight:600;
letter-spacing:var(--ls-lead)}
.ccl li span{display:block;font-size:var(--t-sub);color:var(--ink-2);
line-height:var(--lh-snug);margin-top:2px;max-width:var(--w-note)}
.ccl li em{font-style:normal;color:var(--ink);font-weight:600}
.ccn{font-size:var(--t-note);color:var(--ink-2);line-height:var(--lh-snug);
margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px solid var(--rule-hair)}
.ccn a{color:var(--seal);border-bottom:1px solid var(--seal)}
@media print{
/* 종이에 적어 들고 거십니다. 이 장은 반드시 한 쪽에 */
.callcard{border:2px solid #000;break-inside:avoid;page-break-inside:avoid}
.pr{display:none}
.ccl li::before{background:#000;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* ══ 찾기 ═══════════════════════════════════════════════════ */
.sbox{display:flex;gap:var(--s-tight);margin:var(--s-3) 0 var(--s-tight);
max-width:var(--w-note)}
.sbox input{flex:1;min-height:3.25rem;padding:0 var(--s-2);
font-size:var(--t-lead);border:2px solid var(--rule-bold);border-radius:3px;
background:var(--field);color:var(--ink)}
.sbox input:focus{outline:none;border-color:var(--seal);
box-shadow:0 0 0 3px rgba(14,79,74,.12)}
.sbox button{min-height:3.25rem;padding:0 var(--s-2);border:1px solid var(--rule-bold);
border-radius:3px;font-size:var(--t-sub);color:var(--ink-2);background:var(--paper)}
.shelp{font-size:var(--t-note);color:var(--ink-2);max-width:var(--w-note)}
.shelp b{color:var(--ink)}
.sfil{display:flex;align-items:center;gap:var(--s-tight);flex-wrap:wrap;
margin:var(--s-2) 0 var(--s-3)}
.fbtn{min-height:2.75rem;padding:0 var(--s-2);border:1px solid var(--rule-bold);
border-radius:999px;font-size:var(--t-sub);color:var(--ink-2);background:var(--paper)}
.fbtn:hover{background:var(--wash);color:var(--ink)}
.fbtn.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tonly{display:inline-flex;align-items:center;gap:var(--s-hair);
font-size:var(--t-sub);color:var(--ink-2);cursor:pointer;padding:0 var(--s-tight)}
.tonly input{width:1.125rem;height:1.125rem;accent-color:var(--seal)}
.sstat{font-size:var(--t-sub);color:var(--ink-2);line-height:var(--lh-snug);
margin-bottom:var(--s-2);max-width:var(--w-note)}
.sstat b{color:var(--ink)}
.sstat .sn{color:var(--ink-3);font-size:var(--t-note)}
.sres{list-style:none;padding:0;margin:0}
.sres .sr{padding:var(--s-2) 0;border-bottom:1px solid var(--rule-hair);
position:static;width:auto;height:auto;clip:auto;overflow:visible;
white-space:normal;margin:0}
.srn{display:block;font-size:var(--t-lead);font-weight:600;
letter-spacing:var(--ls-lead);word-break:keep-all}
.srm{display:block;font-size:var(--t-sub);color:var(--ink-2);margin-top:2px}
.srt,.srx{display:inline-block;margin-top:var(--s-hair);padding:.125rem .5rem;
border-radius:999px;font-size:var(--t-note);font-weight:600;letter-spacing:0}
.srt{background:var(--wash);color:var(--seal)}
.srx{background:var(--wash);color:var(--ink-3)}
#more{margin-top:var(--s-3);text-align:center}
/* ══════════════════════════════════════════════════════════════
v6 「밝은 카드」 — 겉모습만 갈아 끼웁니다
──────────────────────────────────────────────────────────────
버린 것 크림색 종이 · 명조 제목 · 사각 도장 테두리 · 각진 모서리
남긴 것 본문 17px · 행간 1.85 · 한글 자간 · keep-all · tabular-nums
글자 크기 조절 · 인쇄 · WCAG AA
★ 등급 A~E 는 여전히 무채색입니다.
색을 입히는 순간 「A는 좋고 E는 나쁘다」는 판정이 됩니다.
곁은 줄을 세우지 않습니다.
★ 선은 3.0:1 이상으로 둡니다.
v3 에서 괘선이 1.63:1 이라 노인 눈에 안 보였던 일을 겪었습니다.
처음에 2.57:1 로 두었더니 저장소 검사가 「모자란다」고 했습니다.
제 기준(2.4)보다 검사가 엄격했는데, 노인 눈을 생각하면 검사가 옳습니다.
══════════════════════════════════════════════════════════════ */
:root{
--paper:#FFFFFF; --field:#FFFFFF;
--wash:#F5F8F9; --wash-warm:#F5F8F9;
--ink:#101A1F; --ink-2:#48575F; --ink-3:#657078;
--rule:#889296; --rule-bold:#889296; --rule-hair:#C4CCCE;
--seal:#04554E; --vermilion:#A32A2D;
--serif:var(--sans); /* 명조를 버립니다. 이름만 남겨 규칙을 안 깨뜨립니다 */
}
h1,h2,h3,h4{font-family:var(--sans);letter-spacing:-.028em}
h1{font-weight:700} h2{font-weight:650} h3,h4{font-weight:600}
/* 밝히는 글 */
.gate{background:#E6F2F0;border:0;border-radius:16px;padding:var(--s-3)}
.sortnote{background:var(--wash);border:0;border-radius:12px;
padding:var(--s-2) var(--s-3)}
/* 도장 — 사각 테두리를 알약으로 */
.seal{border:0;border-radius:999px;min-width:1.5rem;height:1.5rem;
padding:0 .4375rem;width:auto;font-weight:700}
.seal.g,.seal.p{background:#E6F2F0;color:var(--seal)}
.seal.f{background:#E9EFF1;color:var(--ink-2)}
.seal.u{background:#FAE9E9;color:var(--vermilion)}
.seal.n{background:#E9EFF1;color:var(--ink-2)}
/* 대장 상태 */
.health{background:var(--field);border:1px solid var(--rule-hair);
border-radius:16px;padding:var(--s-3);
box-shadow:0 1px 2px rgba(16,26,31,.04),0 2px 8px rgba(16,26,31,.05)}
.health dl{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.health dt{font-size:var(--t-note);font-weight:600;color:var(--ink-3);
letter-spacing:0;padding-top:var(--s-2)}
.health dd{padding:var(--s-hair) 0 var(--s-2);border-bottom:1px solid var(--rule-hair)}
/* ── 시설 카드 ────────────────────────────────────────────── */
.faclist{display:grid;gap:var(--s-2)}
.fac{background:var(--field);border:1px solid var(--rule-hair);
border-radius:16px;padding:var(--s-3);
transition:border-color .15s,box-shadow .15s}
.fac:hover{border-color:var(--rule);
box-shadow:0 1px 2px rgba(16,26,31,.04),0 2px 8px rgba(16,26,31,.05)}
.fn{font-size:var(--t-h3);font-weight:700;line-height:1.28;letter-spacing:-.028em}
.fn a{color:inherit;border-bottom:2px solid transparent}
.fn a:hover{border-bottom-color:var(--seal);color:var(--seal)}
/* 등급 — 무채색. 색을 입히면 순위가 됩니다 */
.gr{width:2.75rem;height:2.75rem;line-height:1;display:grid;place-items:center;
font-size:var(--t-lead);font-weight:800;letter-spacing:0;
color:var(--ink);background:var(--wash);
border:1.5px solid var(--rule);border-radius:8px}
.gr.gA,.gr.gB,.gr.gC,.gr.gD,.gr.gE{color:var(--ink);border-color:var(--rule)}
.past{display:inline-block;margin-left:var(--s-hair);padding:.125rem .5rem;
border-radius:999px;background:#FDF0E7;color:#8A4B1C;
font-size:var(--t-note);font-weight:650;letter-spacing:0}
.was{display:inline-block;margin-top:var(--s-1);
padding:var(--s-tight) var(--s-1);background:var(--wash);border-radius:8px;
font-size:var(--t-note);color:var(--ink-2)}
/* ★ 연락 방법 — 접지 않습니다 */
.reach{margin-top:var(--s-2);padding:var(--s-2);border-radius:12px}
.reach.has{background:#E6F2F0;display:flex;align-items:baseline;
gap:var(--s-tight) var(--s-2);flex-wrap:wrap}
.reach.none{background:var(--wash)}
.wt{font-size:var(--t-lead);font-weight:700;color:var(--seal);
font-variant-numeric:tabular-nums;letter-spacing:0;border-bottom:0}
.wt:hover{text-decoration:underline;text-underline-offset:3px}
.wx{font-size:var(--t-sub);color:var(--ink-2)}
.wa{display:block;font-size:var(--t-sub);color:var(--ink-2);
line-height:var(--lh-snug);margin-top:0}
.reach.has .wa{flex-basis:100%}
.wn{font-size:var(--t-sub);font-weight:650;color:var(--ink)}
.wnh{font-size:var(--t-note);color:var(--ink-2);line-height:var(--lh-snug)}
.wc{margin-top:var(--s-tight);padding:var(--s-tight) var(--s-2);
background:var(--wash);border-radius:8px;
font-size:var(--t-sub);color:var(--ink-2)}
.wc b{color:var(--ink);font-weight:700}
.wcn{display:block;font-size:var(--t-note);color:var(--ink-3);
line-height:var(--lh-snug);margin-top:1px}
/* 펼침 — 단추처럼 */
.more>summary{display:inline-flex;align-items:center;gap:var(--s-tight);
min-height:2.5rem;padding:0 var(--s-2);list-style:none;
border:1px solid var(--rule-hair);border-radius:999px;
font-size:var(--t-sub);font-weight:600;color:var(--ink-2)}
.more>summary::-webkit-details-marker{display:none}
.more>summary::after{content:'▾';font-size:.75em;color:var(--ink-3)}
.more[open]>summary::after{content:'▴'}
.more>summary:hover{background:var(--wash);color:var(--ink);border-color:var(--rule)}
/* 그 밖 상자들 */
.cleanbox,.cbox,.keep,.kinbox,.gaps,.ask,.tip,.facts,.sheet,.blank{
border-radius:16px}
.cleanbox,.keep,.gaps,.ask,.tip{background:var(--wash);border:0;padding:var(--s-3)}
.common{background:var(--wash);border:0;border-radius:16px;padding:var(--s-3)}
.callcard{border:2px solid var(--ink);border-radius:16px}
.ccl li::before{border-radius:999px}
.act{border-radius:999px}
.fsctl{border:0;border-radius:999px;background:var(--wash);padding:3px;gap:2px}
.fsctl button{border-right:0;border-radius:999px;min-width:2.5rem}
.sbox input{border-radius:12px;border-color:var(--rule)}
.fbtn{border-color:var(--rule-hair)}
@media print{
:root{--wash:#fff}
.fac{border:0;border-bottom:1px solid #999;border-radius:0;box-shadow:none}
.reach.has,.reach.none,.wc{background:#fff;border:1px solid #ccc}
}
/* ══════════════════════════════════════════════════════════════
v7 — 뼈대
──────────────────────────────────────────────────────────────
★ main 에 폭 규칙이 아예 없었습니다.
화면마다 개별 CSS 로 폭을 잡고 있었고, 찾기 화면은 그게 없어
글줄이 모니터 끝까지 뻗었습니다. 한글 34자 원칙이 깨진 것입니다.
뼈대는 한 곳에서 정합니다. 새 화면을 만들어도 저절로 맞습니다.
══════════════════════════════════════════════════════════════ */
main{max-width:var(--w);margin:0 auto;padding:0 var(--s-3) var(--s-6)}
.masthead > .crumb,
.masthead > h1{max-width:var(--w);margin-left:auto;margin-right:auto;
padding-left:var(--s-3);padding-right:var(--s-3)}
.masthead > h1{padding-top:var(--s-1);padding-bottom:var(--s-2)}
@media(max-width:640px){
main{padding-left:var(--s-2);padding-right:var(--s-2)}
.masthead > .crumb,.masthead > h1{padding-left:var(--s-2);padding-right:var(--s-2)}
}
/* 읽는 글은 더 좁게. 설명문이 한 줄에 60자씩 가면 눈이 다음 줄을 못 찾습니다 */
.gate,.sortnote > *,.shelp,.sstat,.common p,.blank p{max-width:var(--w-note)}
/* ══════════════════════════════════════════════════════════════
v7 — 찾기
──────────────────────────────────────────────────────────────
★ 찾는 칸이 붙어 다닙니다.
스물한 곳을 넘겨 보시다가 다시 찾으려면 맨 위로 올라가야 했습니다.
결과가 이백 곳이 넘으면 그 일이 계속 생깁니다.
★ 결과를 카드로 바꿉니다.
줄이 이어지면 어디까지가 한 곳인지 눈이 못 가릅니다.
★ 등급은 여전히 무채색입니다. 색을 입히면 순위가 됩니다.
══════════════════════════════════════════════════════════════ */
.sdock{position:sticky;top:0;z-index:60;background:var(--paper);
border-bottom:1px solid var(--rule-hair);
box-shadow:0 2px 12px rgba(16,26,31,.05)}
.sdin{max-width:var(--w);margin:0 auto;padding:var(--s-2) var(--s-3)}
.sbox{display:flex;gap:var(--s-tight);max-width:var(--w-note);margin:0}
.sbox input{flex:1;min-height:3.25rem;padding:0 var(--s-2);
font-size:var(--t-lead);border:1.5px solid var(--rule);border-radius:12px;
background:var(--field);color:var(--ink)}
.sbox input::placeholder{color:var(--ink-3)}
.sbox input:focus{outline:none;border-color:var(--seal);
box-shadow:0 0 0 3px rgba(4,85,78,.12)}
.sbox button{min-height:3.25rem;padding:0 var(--s-2);
border:1px solid var(--rule-hair);border-radius:12px;
font-size:var(--t-sub);color:var(--ink-2);background:var(--paper)}
.sbox button:hover{background:var(--wash);color:var(--ink)}
/* 갈래 고르기 — 좁은 화면에서는 옆으로 넘깁니다 */
.sfil{display:flex;align-items:center;gap:var(--s-hair);
margin-top:var(--s-tight);overflow-x:auto;scrollbar-width:none;
-webkit-overflow-scrolling:touch;padding-bottom:2px}
.sfil::-webkit-scrollbar{display:none}
.fbtn{flex:none;min-height:2.5rem;padding:0 var(--s-2);
border:1px solid var(--rule-hair);border-radius:999px;
font-size:var(--t-sub);font-weight:600;color:var(--ink-2);
background:var(--paper);white-space:nowrap}
.fbtn:hover{background:var(--wash);color:var(--ink)}
.fbtn.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tonly{flex:none;display:inline-flex;align-items:center;gap:var(--s-hair);
min-height:2.5rem;padding:0 var(--s-2);border-radius:999px;
background:var(--wash);font-size:var(--t-sub);color:var(--ink-2);
cursor:pointer;white-space:nowrap;margin-left:var(--s-hair)}
.tonly input{width:1.125rem;height:1.125rem;accent-color:var(--seal)}
/* 몇 곳 찾았나 · 왜 이 차례인가 */
.sstat{font-size:var(--t-body);color:var(--ink-2);line-height:var(--lh-snug);
margin:var(--s-3) 0 var(--s-2);max-width:var(--w-note)}
.sstat .sc{font-size:var(--t-h3);font-weight:700;color:var(--ink);
letter-spacing:-.028em;font-variant-numeric:tabular-nums}
.swhy{margin-left:var(--s-tight);min-height:2.25rem;padding:0 var(--s-1);
border:1px solid var(--rule-hair);border-radius:999px;
font-size:var(--t-note);font-weight:600;color:var(--ink-2);background:var(--paper)}
.swhy:hover{background:var(--wash);color:var(--ink);border-color:var(--rule)}
.swb{display:block;margin-top:var(--s-tight);padding:var(--s-2);
background:var(--wash);border-radius:12px;
font-size:var(--t-sub);line-height:var(--lh-snug);color:var(--ink-2)}
.swb b{color:var(--ink);font-weight:650}
.swb[hidden]{display:none}
/* ── 결과 카드 ─────────────────────────────────────────────── */
.sres{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-tight)}
.sres .sr{padding:0;border:0;margin:0;position:static;width:auto;height:auto;
clip:auto;overflow:visible;white-space:normal}
.srl{display:block;padding:var(--s-2) var(--s-3);
background:var(--field);border:1px solid var(--rule-hair);border-radius:12px;
transition:border-color .15s,box-shadow .15s}
.srl:hover{border-color:var(--rule);
box-shadow:0 1px 2px rgba(16,26,31,.04),0 2px 8px rgba(16,26,31,.05)}
.srh{display:flex;align-items:flex-start;justify-content:space-between;
gap:var(--s-2)}
.srn{flex:1;font-size:var(--t-lead);font-weight:650;line-height:1.3;
letter-spacing:-.028em;word-break:keep-all}
/* 등급 — 무채색. 색을 입히면 순위가 됩니다 */
.srg{flex:none;display:grid;place-items:center;width:2.25rem;height:2.25rem;
font-size:var(--t-body);font-weight:800;letter-spacing:0;line-height:1;
color:var(--ink);background:var(--wash);
border:1.5px solid var(--rule);border-radius:8px}
.srg.none{color:var(--ink-3);border-style:dashed}
.srm{display:block;font-size:var(--t-sub);color:var(--ink-2);
line-height:var(--lh-snug);margin-top:2px}
.srt,.srx{display:inline-block;margin-top:var(--s-tight);
padding:.125rem .5625rem;border-radius:999px;
font-size:var(--t-note);font-weight:650;letter-spacing:0}
.srt{background:#E6F2F0;color:var(--seal)}
.srx{background:var(--wash);color:var(--ink-3)}
#more{margin-top:var(--s-3);text-align:center}
@media(max-width:640px){
.sdin{padding:var(--s-tight) var(--s-2)}
.sbox input{min-height:3rem;font-size:var(--t-body)}
.sbox button{min-height:3rem}
.srl{padding:var(--s-2)}
.srn{font-size:var(--t-body)}
.srg{width:2rem;height:2rem;font-size:var(--t-sub)}
}
/* ══════════════════════════════════════════════════════════════
v7 — 스물다섯 장을 함께 끌어올립니다
──────────────────────────────────────────────────────────────
화면마다