/* 부록 — 종이 위 잉크. 색은 색인 탭에만. 구조는 얇은 구분선 목록. BRAND.md 참고
   가독성 기준(관문 check_site.py 가 본다): 글자색 토큰은 배경·패널 위에서 대비 4.5:1 이상.
   다크 모드는 두지 않는다 — 종이 콘셉트이고, 어두운 바탕에서 회색 글씨가 묻혀 읽기 어렵다는 지적이 있었다(2026-09-25). */
:root{color-scheme:light;--bg:#fff;--surface:#fff;--fg:#191919;--sub:#444;--mute:#6b6b6b;--line:#e3e3e3;--line2:#efefef;--panel:#f6f6f4;--acc:#191919;--acc-bg:#f0f0ee;--red:#e0303f;--blue:#2a6fdb;--serif:"Noto Serif KR","Apple SD Gothic Neo",serif;--sans:Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif}
body[data-section=calc]{--acc:#2F6FED;--acc-bg:#eaf0fe}body[data-section=calendar]{--acc:#1E9E5A;--acc-bg:#e8f6ee}body[data-section=forms]{--acc:#7A5AF8;--acc-bg:#efebfe}body[data-section=fortune]{--acc:#F2542D;--acc-bg:#fdeee9}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.7 var(--sans);letter-spacing:-.01em;word-break:keep-all;overflow-wrap:anywhere}
a{color:inherit;text-decoration:none}
main p a,.faq a,main li a[href^="https:"]{text-decoration:underline;text-decoration-color:#b5b5b5;text-underline-offset:3px}main p a:hover{text-decoration-color:currentColor}
.wrap{max-width:820px;margin:0 auto;padding:0 20px}
.top{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:5}
.top .wrap{display:flex;align-items:stretch;gap:20px;height:58px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-weight:600;font-size:20px;color:var(--fg);white-space:nowrap;flex:0 0 auto;letter-spacing:.02em}
.brand img{width:24px;height:24px}.brand small{font-family:var(--sans);font-weight:500;font-size:11px;color:var(--mute);letter-spacing:.14em;margin-top:3px}
.top nav{display:flex;gap:0;margin-left:auto;overflow-x:auto;scrollbar-width:none}.top nav::-webkit-scrollbar{display:none}
.top nav a{display:flex;align-items:center;gap:7px;padding:0 12px;color:var(--sub);font-weight:600;font-size:16px;white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-1px}
.top nav a i{width:8px;height:8px;border-radius:2px;background:var(--tab)}.top nav a.on{color:var(--fg);border-bottom-color:var(--tab)}
/* 모바일: 탭 다섯이 360px 한 줄에 다 보이게(가로 스크롤 뒤에 탭이 숨으면 없는 것과 같다) */
@media(max-width:560px){.wrap{padding:0 16px}.top .wrap{gap:8px}.brand{font-size:18px;gap:7px}.brand small,.top nav a i{display:none}.top nav a{padding:0 5px;font-size:15px}}
.crumb{font-size:14px;color:var(--mute);margin:20px 0 8px}.crumb a{color:var(--mute)}.crumb b{color:var(--acc);font-weight:600}
h1{font-family:var(--serif);font-size:27px;line-height:1.35;margin:2px 0 12px;font-weight:600;letter-spacing:0}
h2{font-family:var(--serif);font-size:20px;margin:36px 0 10px;font-weight:600}h3{font-size:17px;margin:22px 0 8px;font-weight:700}
p{margin:8px 0}.lead{color:var(--sub);font-size:16px;line-height:1.75}
main ul{padding-left:20px}main li{margin:4px 0}
.today{border-top:2px solid var(--fg);border-bottom:1px solid var(--line);padding:18px 0 16px;margin:18px 0 6px;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:16px}
@media(max-width:640px){.today{grid-template-columns:1fr 1fr}.today>div:first-child{grid-column:1/-1}.today .date{font-size:23px}}
.today .date{font-family:var(--serif);font-size:26px;font-weight:600;line-height:1.3;white-space:nowrap}.today .date small{display:block;font-family:var(--sans);font-size:14px;color:var(--sub);font-weight:500;margin-top:4px;white-space:normal}
.today dl{margin:0;font-size:14px}.today dt{color:var(--mute);margin-bottom:2px}.today dd{margin:0 0 8px;font-weight:600;font-size:16px;font-variant-numeric:tabular-nums}.today dd a{border-bottom:1px solid var(--line)}
.tool{background:var(--panel);border-radius:10px;padding:18px 18px 20px;margin:14px 0}
.tool label{display:block;font-size:14px;color:var(--sub);margin:12px 0 5px;font-weight:600}
/* 입력칸 16px: 그보다 작으면 아이폰이 입력칸을 누를 때 화면을 확대한다 */
.tool input,.tool select,.tool textarea{width:100%;font:inherit;font-size:16px;padding:11px 12px;border:1px solid #cfcfcf;border-radius:6px;background:var(--surface);color:var(--fg);font-variant-numeric:tabular-nums}
.tool input[data-num]{text-align:right;font-weight:600;letter-spacing:0}
/* 입력칸·선택칸 높이를 하나로: 선택칸은 제 높이가 45px 이라 옆 입력칸(51px)과 밑선이 어긋났다(학점 계산기) */
.tool input:not([type=checkbox]):not([type=radio]),.tool select{height:50px}
.tool input:focus,.tool select:focus,.tool textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-bg)}
.hint{font-size:14px;color:var(--acc);text-align:right;margin-top:4px;font-weight:600}
.tool .row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}@media(max-width:560px){.tool .row{grid-template-columns:1fr}}
/* 칸 하나 = 라벨·입력·읽기 보조 세 줄. subgrid 로 옆 칸과 줄을 맞춰, 라벨이 두 줄이거나 한쪽에만 '3억 원' 이 붙어도 입력칸 높이가 같다 */
.tool .f{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}.tool .f label{align-self:end}
.tool button,.actions button{font:inherit;font-weight:700;padding:11px 18px;border:0;border-radius:6px;cursor:pointer}
.tool>button,form>.tool>button{margin-top:16px;background:var(--fg);color:var(--bg);width:100%;font-size:16px}
.result{margin-top:16px;padding:16px 16px 6px;border-radius:8px;background:var(--surface);border:1px solid var(--line);display:none}
/* 결과 숫자는 세리프가 아니라 고딕 + 고정폭 숫자: 세리프 굵은 숫자는 자릿수가 한눈에 안 읽혔다 */
.result.on{display:block}.result .big{font-family:var(--sans);font-size:24px;font-weight:700;margin:0 0 10px;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.4}
.result table{width:100%;border-collapse:collapse;font-size:15px}
.result td{padding:9px 0;border-top:1px solid var(--line2);color:var(--sub)}.result td:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--fg);font-weight:600;padding-left:12px}
.result tr:first-child td{border-top:0}.result p{color:var(--sub);font-size:14px;padding-bottom:8px}
.up{color:var(--red)}.down{color:var(--blue)}
.note{font-size:14px;color:var(--mute);line-height:1.65}
.list{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--line)}
.list li{border-bottom:1px solid var(--line);margin:0}
.list a{display:flex;align-items:center;gap:12px;padding:13px 2px}
.list b{font-weight:600;font-size:16px;flex:0 0 auto}.list span{color:var(--mute);font-size:14px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list a::after{content:"";width:7px;height:7px;border-right:1.5px solid var(--mute);border-bottom:1.5px solid var(--mute);transform:rotate(-45deg);flex:0 0 auto;margin-right:4px}
.list a:hover b{color:var(--acc)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin:36px 0 4px}.sec-head h2{margin:0;display:flex;align-items:center;gap:8px}.sec-head h2 i{width:10px;height:10px;border-radius:2px;background:var(--tab,var(--acc))}.sec-head a{font-size:14px;color:var(--mute)}
.faq{margin-top:28px}.faq details{border-bottom:1px solid var(--line);padding:2px 0}.faq summary{cursor:pointer;font-weight:600;padding:12px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";color:var(--mute);font-weight:400}.faq details[open] summary::after{content:"–"}.faq details p{color:var(--sub);margin:0 0 12px;font-size:15px}
.rel ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}.rel li{margin:0}.rel li a{display:inline-block;padding:7px 12px;border:1px solid var(--line);border-radius:999px;font-size:14px;color:var(--sub);background:var(--surface)}.rel li a:hover{border-color:var(--acc);color:var(--acc)}
.adbox{margin:28px 0;padding-top:6px;border-top:1px solid var(--line2)}.adbox b{display:block;font-size:12px;color:var(--mute);font-weight:500;margin-bottom:4px}
.updated{font-size:13px;color:var(--mute);margin-top:36px}
.foot{border-top:1px solid var(--line);margin-top:44px;padding:22px 20px 30px;font-size:13px;color:var(--mute);line-height:1.75}.foot .brand{font-size:16px;margin-bottom:6px}.foot a{color:var(--sub)}
table.cal{width:100%;border-collapse:collapse;table-layout:fixed;margin:12px 0;border-top:1px solid var(--line)}
table.cal th{font-size:13px;color:var(--mute);padding:8px 0;font-weight:600;border-bottom:1px solid var(--line)}
table.cal td{height:68px;vertical-align:top;border-bottom:1px solid var(--line2);padding:6px 4px;font-size:13px}
table.cal td .d{font-weight:700;font-size:16px;font-variant-numeric:tabular-nums}table.cal td .l{color:var(--mute);font-size:12px;display:block;margin-top:2px}
table.cal td .h{color:var(--red);font-size:12px;display:block;font-weight:600;line-height:1.35}table.cal .sun .d,table.cal .hol .d{color:var(--red)}table.cal .sat .d{color:var(--blue)}
table.cal td .s{color:#137A45;font-size:11px;display:block;font-weight:600;line-height:1.35}  /* 흰 바탕 대비 5.4:1 — 달력 강조색(#1E9E5A)은 3.4:1 이라 작은 글자에 못 쓴다 */
table.cal td.now .d{background:var(--fg);color:var(--bg);border-radius:4px;padding:0 5px;display:inline-block}
@media(max-width:560px){table.cal td{padding:5px 2px;height:62px}table.cal td .l,table.cal td .h{font-size:11px}}
.doc{background:#fff;color:#000;border:1px solid var(--line);padding:40px;margin:14px 0;line-height:1.8;font-size:15px}
@media(max-width:560px){.doc{padding:20px 14px;font-size:14px}}
.doc h2{font-family:var(--serif);text-align:center;font-size:24px;letter-spacing:10px;margin:0 0 26px}
.doc table{width:100%;border-collapse:collapse}.doc td,.doc th{border:1px solid #444;padding:8px 10px;text-align:left;font-weight:500}.doc th{width:26%;background:#f5f5f5;font-weight:600}
.doc [contenteditable]{border-bottom:1px dashed #999;min-width:60px;display:inline-block;padding:0 4px}.doc [contenteditable]:focus{outline:none;background:#fffbe6}
.doc .sign{margin-top:30px;text-align:right}
@media print{.top,.crumb,.rel,.faq,.foot,.updated,.tool,h1,.lead,.actions,.list,.note,h2,.sec-head,.adbox,p:not(.doc p){display:none!important}.doc{border:0;padding:0}body{background:#fff;color:#000}}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.actions button,.actions a.pill{border:1px solid var(--line);background:var(--surface);color:var(--fg);font-weight:600;font-size:14px;padding:8px 14px;border-radius:6px}
.pill{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--panel);color:var(--sub);font-size:14px;font-weight:600}
.fortune{border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:8px;padding:18px;margin:14px 0;background:var(--surface)}
.fortune h3{margin:0 0 6px;font-size:17px;font-family:var(--serif);font-weight:600}.fortune .score{font-size:14px;color:var(--mute);margin:0 0 12px}.stars{color:var(--acc);letter-spacing:1px;font-size:14px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:15px}.kv b{color:var(--mute);font-weight:600}.kv span{color:var(--fg)}
.warn{font-size:14px;color:var(--mute);border-left:2px solid var(--line);padding-left:10px}
/* 설문 문항(MBTI 간이 테스트). legend 는 float 로 상자 안에 넣는다 — 기본 legend 는 테두리 선 위에 그려져 배경 상자에 반쯤 걸쳤다 */
fieldset.q{border:0;margin:0 0 10px;padding:14px 16px 14px;background:var(--panel);border-radius:10px;min-width:0}
fieldset.q legend{float:left;width:100%;padding:0;margin:0 0 10px;font-weight:600;font-size:16px;line-height:1.5}
fieldset.q legend b{display:inline-block;min-width:26px;color:var(--acc);font-variant-numeric:tabular-nums}
fieldset.q .opts{clear:both;display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:560px){fieldset.q .opts{grid-template-columns:1fr}}
fieldset.q label{display:flex;align-items:center;gap:10px;margin:0;padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer;font-size:15px;line-height:1.45;color:var(--fg)}
fieldset.q label:hover{border-color:var(--acc)}
fieldset.q label:has(input:checked){border-color:var(--acc);background:var(--acc-bg);font-weight:600}
fieldset.q input{accent-color:var(--acc);width:18px;height:18px;margin:0;flex:0 0 auto}
fieldset.q.miss{box-shadow:0 0 0 2px var(--red)}
.cands{list-style:none;margin:8px 0 12px;padding:0;border-top:1px solid var(--line2)}.cands li{margin:0;border-bottom:1px solid var(--line2)}
.cands button{display:block;width:100%;text-align:left;background:none;border:0;padding:10px 2px;font:inherit;color:var(--fg);cursor:pointer}.cands button:hover b{color:var(--acc)}
.cands b{display:block;font-weight:600}.cands span{display:block;font-size:14px;color:var(--sub);font-variant-numeric:tabular-nums}
.result .cp{font:inherit;font-size:12px;font-weight:600;padding:3px 8px;margin-left:6px;border:1px solid var(--line);background:var(--surface);color:var(--sub);border-radius:6px;cursor:pointer;vertical-align:1px}
body[data-section=address]{--acc:#0B7A75;--acc-bg:#e6f4f3}
@media(max-width:350px){.top .brand{font-size:0}}
/* 영문주소 결과: 항목 이름을 값 위에 쌓는다 — 옆에 두면 좁은 화면에서 "Addre/ss line"처럼 끊기거나 가로로 넘친다 */
body[data-section=address] #r tr{display:block;border-top:1px solid var(--line2);padding:8px 0}body[data-section=address] #r tr:first-child{border-top:0}
body[data-section=address] #r td{display:block;border:0;padding:0;text-align:left!important}body[data-section=address] #r td:first-child{font-size:13px;color:var(--mute)}
body[data-section=address] #r td:last-child{padding-left:0;overflow-wrap:break-word;word-break:normal}
/* 긴 영문주소가 든 표는 줄바꿈 허용(가로로 끝없이 늘지 않게) */
.extable.wrap table{white-space:normal}.extable.wrap td{text-align:left;word-break:keep-all;overflow-wrap:break-word}.extable.wrap th{text-align:left}@media(min-width:600px){.extable.wrap td:first-child{white-space:nowrap}}
/* 예시 표(빌드 때 계산기 JS 로 만든 정적 표). 좁은 화면에서는 표만 가로로 밀린다 — 페이지는 넘치지 않게 */
.extable{overflow-x:auto;margin:10px 0 4px;border-top:1px solid var(--line)}
.extable table{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
.extable th{font-size:13px;color:var(--mute);font-weight:600;text-align:right;padding:9px 8px;border-bottom:1px solid var(--line)}
.extable td{text-align:right;padding:9px 8px;border-bottom:1px solid var(--line2)}
.extable th:first-child,.extable td:first-child{text-align:left;padding-left:2px;font-weight:600;position:sticky;left:0;background:var(--bg)}
/* 표가 많은 서식(견적서·거래명세서)이 좁은 화면에서 페이지를 가로로 넘쳤다 — 문서 안에서만 밀리게 */
.doc{overflow-x:auto}.doc table{min-width:520px}
@media print{.doc{overflow:visible}.doc table{min-width:0}}
/* 휴대폰: 520px 종이 폭 그대로면 오른쪽이 잘려 보였다(2026-09-25). 라벨|값 표는 한 줄에 한 쌍씩 쌓고, 목록 표는 폭에 맞추고,
   5칸 이상 명세표(견적서·거래명세서)는 그 표만 옆으로 민다 — 문서 전체가 밀리면 합계 칸이 화면 밖에 남았다. 칸 구분은 표 테두리 대신 칸마다 위·왼쪽 선 + 표의 오른쪽·아래 선 */
@media screen and (max-width:560px){
.doc table{min-width:0}.doc table.t-wide{display:block;overflow-x:auto}.doc table.t-wide th,.doc table.t-wide td{min-width:64px}.doc td,.doc th{padding:6px 7px}
.doc table.t-kv,.doc table.t-kv tbody{display:block}.doc table.t-kv{border-right:1px solid #444;border-bottom:1px solid #444}
.doc table.t-kv tr{display:grid;grid-template-columns:minmax(84px,32%) 1fr}
.doc table.t-kv th,.doc table.t-kv td{width:auto;border:0;border-top:1px solid #444;border-left:1px solid #444}
.doc table.t-kv tr>:only-child{grid-column:1/-1}
/* 목록 표는 칸 폭을 고르게 고정 — 입력칸은 크롬이 contenteditable 에 줄바꿈 규칙을 따로 걸어 내용 폭 아래로 줄지 않았다 */
.doc table.t-list{table-layout:fixed;font-size:13px}.doc table.t-list td,.doc table.t-list th{padding:6px 5px}.doc table.t-list [contenteditable]{min-width:0;overflow-wrap:anywhere}}