/* 한국만세 — 크림 종이 + 스티커. 토큰 값은 설계 문서 4.5절·UX M절. */
/* 2026-10-21 둘째 배포(롤백 연습): 자산 해시를 바꾸려고 넣은 줄 */
@font-face{font-family:"Hankook Sans";src:url(/assets/fonts/hankook-sans-400.v1.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hankook Sans";src:url(/assets/fonts/hankook-sans-700.v1.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Hankook Sans";src:url(/assets/fonts/hankook-sans-900.v1.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Hankook Hanja";src:url(/assets/fonts/hankook-hanja-700.v1.woff2) format("woff2");font-weight:700;font-display:swap}
/* 손글씨는 "앗!"(오류 쪽 머리말)만 담은 작은 서브셋이다. 다른 글자에 .pen을 쓰려면 tool/fonts/build_fonts.py의 PEN_TEXT에 더한다. */
@font-face{font-family:"Hankook Pen Card";src:url(/assets/fonts/hankook-pen-card-400.v1.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --paper:#f2e7cf; --ink:#141414; --card:#fbf5e6; --line:#141414; --muted:#5b5346;
  --wood:#3fae4c; --fire:#ea4a2f; --earth:#f4cb3c; --metal:#fbf5e6; --water:#4a9fe6; --mag:#d94ae6;
  --on-sticker:#141414; --answer:#f4cb3c; --jeol:#dff0d8;
  --sun-text:#b8321b; --sat-text:#1f62a8; /* 크림 위 대비 4.5:1 이상(밝은 오행색은 배경·점에만) */
  --scale:1; --radius:22px;
  --font:"Hankook Sans","Hankook Hanja",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --font-hanja:"Hankook Hanja","Noto Sans KR","Apple SD Gothic Neo",serif;
  color-scheme:light;
}
:root[data-scale="s"]{--scale:0.85}
:root[data-scale="l"]{--scale:1.3}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#1c1813; --card:#29231b; --line:#efe3c8; --ink:#f2e7cf; --muted:#c9bda4;
    --wood:#52c160; --fire:#f05f45; --earth:#f7d55a; --metal:#fbf5e6; --water:#62adf0;
    --answer:#f7d55a; --jeol:#2f3f27; --sun-text:#f05f45; --sat-text:#62adf0; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#1c1813; --card:#29231b; --line:#efe3c8; --ink:#f2e7cf; --muted:#c9bda4;
  --wood:#52c160; --fire:#f05f45; --earth:#f7d55a; --metal:#fbf5e6; --water:#62adf0;
  --answer:#f7d55a; --jeol:#2f3f27; --sun-text:#f05f45; --sat-text:#62adf0; color-scheme:dark;
}

*{box-sizing:border-box;margin:0}
html{font-size:calc(100% * var(--scale));-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);font-family:var(--font);line-height:1.6;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.4  0 0 0 0 0.3  0 0 0 0 0.15  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  padding-bottom:72px; overflow-wrap:anywhere;
}
a{color:inherit}
.hj{font-family:var(--font-hanja);font-weight:700}
.pen{font-family:"Hankook Pen Card",var(--font);font-weight:400}
.muted,.note{color:var(--muted)}
.note{font-size:.85rem;margin-top:.5rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--card);padding:8px;z-index:9}

/* 스티커 */
.stk{display:inline-flex;align-items:center;justify-content:center;gap:.3em;border:2px solid var(--line);border-radius:18px;background:var(--card);color:var(--ink);text-decoration:none;font-weight:700}
.stk.ch,.stk.pill,.stk.cta,.logo{color:var(--on-sticker)}
.pill{border-radius:999px;padding:.35rem .9rem;font-size:.9rem;background:var(--metal)}
.cta{border-radius:999px;padding:.8rem 1.4rem;background:var(--fire);font-weight:900;margin-top:1rem}
.el-wood{background:var(--wood)}.el-fire{background:var(--fire)}.el-earth{background:var(--earth)}
.el-metal{background:var(--metal)}.el-water{background:var(--water)}

/* 머리말 · 메뉴 */
.top{padding:12px 16px}
.top-in{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:12px}
.logo{border-radius:999px;background:var(--earth);padding:.4rem 1.1rem;font-weight:900;font-size:1.15rem}
.menu{display:none;gap:8px;align-items:center;margin-left:auto}
.menu>a,.menu summary{font-weight:700;font-size:.85rem;padding:6px 12px;border:2px solid var(--line);border-radius:999px;background:var(--card);text-decoration:none;cursor:pointer;list-style:none}
.menu [aria-current="page"]{background:var(--earth);color:var(--on-sticker)}
.more{position:relative}
.more ul{position:absolute;right:0;top:110%;list-style:none;padding:8px;background:var(--card);border:2px solid var(--line);border-radius:18px;min-width:160px;z-index:5}
.more li a{display:block;padding:6px 10px;text-decoration:none;font-weight:700}
/* 머리말은 어느 폭에서도 한 줄: 글자 단위로 쪼개지지 않게(body는 overflow-wrap:anywhere) */
.logo,.menu>a,.menu summary{white-space:nowrap}
@media (min-width:600px) and (max-width:899px){.top-in{gap:8px}.menu{gap:6px}.menu>a,.menu summary{padding:6px 10px}} /* 600px·글자 크게에서도 메뉴가 들어가게 */
/* 머리말 검색(UX I): 돋보기 단추를 누르면 머리말 아래로 칸이 펼쳐진다. JS가 없으면 단추는 /more 링크 */
.find-toggle{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.find-toggle+.icon-btn{margin-left:0}
.find-panel{max-width:1200px;margin:10px auto 0}
.find-panel[hidden]{display:none}
.find{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.find input{flex:1 1 12rem;min-width:0;font:inherit;font-size:max(16px,1rem);-webkit-appearance:none;appearance:none;padding:7px 14px;border:2px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink)}
.find input[aria-invalid="true"]{border-color:var(--fire)}
.find button{flex:none;font:inherit;font-size:.9rem;font-weight:700;white-space:nowrap;padding:7px 14px;border:2px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);cursor:pointer}
.find button[type=submit]{background:var(--earth);color:var(--on-sticker)}
.find-msg{flex-basis:100%;font-size:.85rem;font-weight:700} /* 늘 두는 알림 칸: 비어 있으면 높이 0 */
/* 쪽 이동 진행 줄(UX M): 링크를 누르면 잠깐 뒤 위쪽에 얇은 줄이 차오른다(10초 뒤·돌아오면 끔) */
html.nav-busy::before{content:"";position:fixed;top:0;left:0;right:0;height:3px;background:var(--mag);transform-origin:left;transform:scaleX(0);z-index:20;animation:nav-bar 8s cubic-bezier(.1,.7,.3,1) .15s forwards}
@keyframes nav-bar{to{transform:scaleX(.9)}}
@media (prefers-reduced-motion:reduce){html.nav-busy::before{animation:none;transform:scaleX(.6)}}
.icon-btn{margin-left:auto;border:2px solid var(--line);border-radius:50%;width:40px;height:40px;background:var(--card);color:var(--ink);font-size:1.1rem;cursor:pointer}

/* 아래 탭바(모바일) */
.tabbar{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,1fr);background:var(--card);border-top:2px solid var(--line);z-index:6}
.tabbar a{text-align:center;padding:10px 0 12px;font-size:.8rem;font-weight:700;text-decoration:none}
.tabbar [aria-current="page"]{background:var(--earth);color:var(--on-sticker)}
@media (min-width:600px){.menu{display:flex}.icon-btn{margin-left:0}.tabbar{display:none}body{padding-bottom:0}}

/* 본문 틀 */
.page{max-width:1200px;margin:0 auto;padding:8px 16px 32px;display:grid;gap:20px}
@media (min-width:1024px){.page.with-aside{grid-template-columns:minmax(0,1fr) 300px}.side{position:sticky;top:16px;align-self:start}}
/* 오른쪽 칸에 보이는 것이 없으면(광고 자리만 있고 아직 숨김 — 오늘·변환기) 칸을 접는다 */
.side:not(:has(>:not([hidden]))){display:none}
@media (min-width:1024px){.page.with-aside:not(:has(>.side>:not([hidden]))){grid-template-columns:minmax(0,1fr)}}
main{min-width:0;display:grid;gap:16px;align-content:start}
.crumbs ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-size:.8rem;color:var(--muted)}
.crumbs li+li::before{content:"›";margin-right:6px}
.card{background:var(--card);border:2px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.card-title{font-size:1.1rem;font-weight:900;margin-bottom:.6rem;letter-spacing:-.02em}
.answer{background:var(--answer);color:var(--on-sticker);border:2px solid var(--line);border-radius:28px;padding:22px 24px}
.answer h1{font-size:clamp(1.5rem,4.5vw,2.2rem);font-weight:900;letter-spacing:-.03em;line-height:1.25}
.answer .kicker{font-weight:700;font-size:.95rem}
.answer p{margin-top:.4rem;font-weight:700}
.answer .note,.answer .muted{color:#3b352b} /* 노란 바탕 위 대비 4.5:1 이상 */
.big{font-size:1.25rem;font-weight:900}
.links{padding-left:1.1rem}.links li{margin:.2rem 0}
.facts{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem}.facts dt{font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:8px}
ul.chips{list-style:none;padding-left:0;margin-left:0}
.chip{border:2px solid var(--line);border-radius:999px;padding:.2rem .7rem;font-size:.85rem;font-weight:700;background:var(--card);text-decoration:none}
.prevnext{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.prevnext a[rel="next"]{margin-left:auto}
.ad{min-height:100px}
.ad[hidden]{display:none}
/* UX L: 모바일은 본문 중간 광고 1개, PC(오른쪽 칸 있음)는 오른쪽 칸 광고만 */
@media (max-width:1023.98px){.side .ad{display:none}}
@media (min-width:1024px){.with-aside main .ad{display:none}}
.two-col{display:grid;gap:16px}@media (min-width:600px){.two-col{grid-template-columns:1fr 1fr}}
.jump{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.jump input,.jump button{font:inherit;border:2px solid var(--line);border-radius:12px;padding:.35rem .6rem;background:var(--card);color:var(--ink)}
.jump input[aria-invalid="true"]{border-color:var(--fire);box-shadow:0 0 0 2px var(--fire)}
.jump input{max-width:100%;min-width:0}
.jump-msg{flex-basis:100%;font-size:.85rem;font-weight:700} /* 늘 두는 알림 칸 */
.jump-msg:empty{position:absolute} /* 비면 흐름에서 빼 줄 간격도 없앤다(display:none이 아니라 알림 영역은 남는다) */

/* 간지 스티커 */
.gz-row{display:flex;flex-wrap:wrap;gap:14px}
.gz{display:grid;grid-template-columns:auto auto;gap:4px;align-items:end}
.gz-label{grid-column:1/-1;font-size:.8rem;font-weight:700;text-align:center}
.stk.ch{flex-direction:column;width:3.2rem;height:3.6rem;gap:0}
.stk.ch .hj{font-size:1.6rem;line-height:1}
.stk.ch small{font-size:.7rem;font-weight:700}

/* 월별 달력 */
.cal{width:100%;border-collapse:separate;border-spacing:4px;table-layout:fixed}
.cal th{font-size:.8rem}
.cal td{vertical-align:top;padding:0}
.cal-cell{display:block;min-height:4.2rem;padding:4px;border:2px solid var(--line);border-radius:12px;background:var(--card);text-decoration:none;font-size:.75rem;line-height:1.3}
.cal-cell .dnum{font-weight:900;font-size:.95rem}
.cal-cell .dnum{overflow-wrap:normal}
.cal-cell .lunar{display:block;color:var(--muted)}
.cal-cell .gzs{display:block;font-weight:700}
.cal-cell .dot{display:inline-block;width:.6em;height:.6em;border-radius:50%;border:1px solid var(--line);margin-right:2px}
.cal-cell .term,.cal-cell .holname{display:none}
/* 오늘 칸은 그림자 고리(outline은 포커스 표시에 남겨 둔다) */
.cal-cell.is-today{box-shadow:0 0 0 1px var(--paper),0 0 0 4px var(--mag)}
.cal-cell:focus-visible{outline:3px solid var(--ink);outline-offset:6px}
.sun .dnum,.hol .dnum{color:var(--sun-text)}.sat .dnum{color:var(--sat-text)}
@media (min-width:600px){.cal-cell{min-height:6rem}.cal-cell .term,.cal-cell .holname{display:block;font-weight:700}}
.sheet{border:2px solid var(--line);border-radius:22px;background:var(--card);color:var(--ink);padding:18px;max-width:420px;width:calc(100% - 32px)}
.sheet::backdrop{background:rgba(0,0,0,.35)}

/* 24절기표 */
.terms{width:100%;border-collapse:collapse}
.terms th,.terms td{padding:.45rem .4rem;border-bottom:1.5px dashed var(--line);text-align:left}
.terms tr.jeol{background:var(--jeol)}
.jeol-tag{font-size:.7rem;font-weight:700;white-space:nowrap}
.terms tr.is-current{outline:3px solid var(--mag);outline-offset:-3px}
.terms .desc{display:none}
@media (min-width:600px){.terms .desc{display:table-cell}}

/* 60갑자 · FAQ */
.gapja{display:grid;grid-template-columns:repeat(auto-fill,minmax(7rem,1fr));gap:8px}
.faq details{border-bottom:1.5px dashed var(--line);padding:.6rem 0}
.faq summary{font-weight:700;cursor:pointer}

.foot{max-width:1200px;margin:0 auto;padding:24px 16px;font-size:.8rem;color:var(--muted);display:grid;gap:6px}

/* 용어 툴팁: 열면 화면 아래에 한 줄 뜻(칸 밖으로 넘쳐 가로 스크롤이 생기지 않게 fixed) */
.tip{display:inline}
.tip summary{display:inline;list-style:none;cursor:help;text-decoration:underline dotted;text-underline-offset:3px}
.tip summary::-webkit-details-marker{display:none}
.tip-body{position:fixed;left:16px;right:16px;bottom:84px;z-index:9;max-width:560px;margin:0 auto;background:var(--card);color:var(--ink);border:2px solid var(--line);border-radius:14px;padding:10px 12px;font-size:.85rem;font-weight:400;text-align:left;box-shadow:4px 4px 0 var(--line)}
@media (min-width:600px){.tip-body{bottom:24px}}

/* 계산기(UX C·K) */
/* 섬 자리를 미리 잡아 앱 JS가 그릴 때 아래 내용이 밀리지 않게(CLS). 모바일은 첫 화면을 다 채워
   섬이 더 길어져도 밀리는 부분이 화면 밖이다. 값은 2026-10-19 실측(375/768/1280px) 기준. */
.calc-app,.chart-app,.today-app,.convert-app{min-height:100vh;min-height:100svh}
.chart-app:has(> .chart-error){min-height:0} /* 깨진 링크 안내는 짧으므로 자리를 잡지 않는다 */
:is(.calc-app,.chart-app,.today-app,.convert-app):has(> .island-failure){min-height:0} /* 섬 실패 안내도 짧다 */
@media (min-width:600px){.calc-app{min-height:41rem}.today-app{min-height:47rem}.convert-app{min-height:33rem}}
@media (min-width:900px){.convert-app{min-height:24rem}} /* 변환기는 두 칸이 되면 낮아진다(첫 화면 실측: 한 칸 32rem, 두 칸 23rem) */
.calc-grid{display:grid;gap:16px;max-width:1100px;width:100%;margin:0 auto}
@media (min-width:600px){.calc-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.calc-in h1{font-size:1.4rem;font-weight:900;letter-spacing:-.02em;margin-bottom:.6rem}
.calc-form{display:grid;gap:14px}
.field{display:grid;gap:4px;min-width:0}
.field>label,.seg legend{font-weight:700;font-size:.9rem}
.calc-form input[type="text"],.calc-form input[type="search"],.calc-form select,.opts select{font:inherit;border:2px solid var(--line);border-radius:12px;padding:.5rem .7rem;background:var(--card);color:var(--ink);min-width:0;width:100%}
.calc-form input:disabled{opacity:.55}
.calc-form input.bad{border-color:var(--fire);box-shadow:0 0 0 2px var(--fire)}
.err{color:var(--sun-text);font-size:.85rem;font-weight:700}
.hint{font-size:.8rem;color:var(--muted)}
.row{display:flex;gap:8px;align-items:center;min-width:0}
.row>input,.row>select{flex:1 1 0}
.chk{display:inline-flex;gap:4px;align-items:center;font-weight:700;white-space:nowrap}
.seg{border:0;padding:0;display:grid;gap:4px;min-width:0}
.seg-row{display:flex;flex-wrap:wrap;gap:6px}
.seg-row button,.tabs button,.fold{font:inherit;font-weight:700;border:2px solid var(--line);border-radius:999px;padding:.35rem .9rem;background:var(--card);color:var(--ink);cursor:pointer}
.seg-row button.on{background:var(--earth);color:var(--on-sticker)}
.adv summary{font-weight:700;cursor:pointer}
.opts{display:grid;gap:10px;margin-top:8px}
.calc-form .cta,.acts button,.edit,.sheet-close{font:inherit;font-weight:900;cursor:pointer}
.calc-form .cta{justify-self:start}
.calc-preview .gz-row{margin-top:4px}
.today-mini{font-weight:700;text-decoration:none}
/* 오늘 화면은 앱 JS가 #today-app 안에 카드 여러 장을 innerHTML로 넣는다: main과 같은 간격 */
.today-app{display:grid;gap:16px;align-content:start}

/* 사주 결과(UX D·J): 같은 마크업이 폭에 따라 배치만 바뀐다 */
.chart-grid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.chart-grid>*{min-width:0}
.col-input{display:none}
.chart-grid.editing .col-input{display:block;position:fixed;left:0;right:0;bottom:0;max-height:85vh;overflow:auto;z-index:8;border-radius:22px 22px 0 0;box-shadow:0 -6px 0 rgba(0,0,0,.18);padding-top:0}
.chart-grid.editing::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:7}
@media screen{html.sheet-open{overflow:hidden}}
.chart-grid.editing .sheet-head{position:sticky;top:0;background:var(--card);padding-top:14px;z-index:1}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.col-sum{display:flex;gap:12px;align-items:flex-start}
.sum h1{font-size:1.25rem;font-weight:900;line-height:1.3;letter-spacing:-.02em}
.sum p{font-size:.85rem;font-weight:700;margin-top:4px}
.edit{margin-left:auto;background:var(--earth);flex:none;white-space:nowrap}
.saju{width:100%;max-width:560px;border-collapse:separate;border-spacing:5px;table-layout:fixed}
.saju th[scope="row"]{width:2.9rem;font-size:.7rem;color:var(--muted);text-align:right;font-weight:700}
.saju thead th{font-size:.85rem;font-weight:900}
.saju td{text-align:center;vertical-align:middle;font-size:.8rem;font-weight:700}
.saju .stk.ch{width:100%;max-width:4.6rem;height:auto;aspect-ratio:1/1;position:relative}
.saju .stk.ch .hj{font-size:clamp(1.3rem,6vw,2.1rem)}
.saju .unk{border:2px dashed var(--line);border-radius:14px;color:var(--muted)}
.saju .ilgan{color:var(--muted)}
.me{position:absolute;top:-9px;right:-7px;background:var(--mag);border:2px solid var(--line);border-radius:50%;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:900;font-size:.7rem;color:var(--on-sticker);transform:rotate(10deg)}
.fold{display:block;margin:6px auto 0;font-size:.8rem}
.acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.copied{font-size:.85rem;font-weight:700}
/* 이미지로 저장(UX D-14): 늘 두는 알림 칸 + 미리보기·공유·내려받기 */
.card-msg{font-size:.85rem;font-weight:700}
.card-msg:not(:empty){margin-top:8px}
.card-out{display:grid;gap:10px;justify-items:center;margin-top:12px;padding-top:12px;border-top:2px dashed var(--line)}
.card-out img{width:100%;max-width:270px;height:auto;border:2px solid var(--line);border-radius:14px}
.card-acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.card-out .note{max-width:34rem;text-align:center}
.card-acts .stk{font:inherit;font-weight:900;cursor:pointer}
/* 음양력 변환기(UX G) */
.conv-grid{display:grid;gap:16px;max-width:1100px;width:100%;margin:0 auto}
@media (min-width:900px){.conv-grid{grid-template-columns:minmax(0,22rem) minmax(0,1fr);align-items:start}}
.conv-in h1{font-size:1.4rem;font-weight:900;letter-spacing:-.02em;margin-bottom:.6rem}
.conv-out-wrap{display:grid;gap:16px;min-width:0}
.conv-links{font-weight:700}
.el-count{list-style:none;padding:0}
.el-count li{font-size:.85rem}
.rels{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.rels li{border:2px solid var(--line);border-radius:10px;padding:2px 8px;font-size:.85rem;font-weight:700}
.tabs{display:flex;gap:6px}
.tabs button{flex:1}
.tabs button.on{background:var(--ink);color:var(--paper)}
.daeun{display:flex;gap:8px;overflow-x:auto;padding:6px 2px 10px;position:relative} /* 안의 .sr(absolute)이 스크롤 영역 밖으로 새지 않게 */
.du{flex:0 0 3.7rem;border:2px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;font:inherit;cursor:pointer}
.du.now{box-shadow:3px 3px 0 var(--line)}
.du.sel{background:var(--earth);color:var(--on-sticker)}
.du small{font-size:.7rem;font-weight:700}
.mini b{display:inline-block;min-width:1.25em;padding:0 2px;border-radius:6px;color:var(--on-sticker);font-size:1rem;line-height:1.35}
.sub{font-size:.95rem;font-weight:900;margin:8px 0 6px}
.seun{list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.seun li{border:1.5px solid var(--line);border-radius:10px;text-align:center;padding:4px 0;display:grid;gap:2px}
.seun li small{font-size:.7rem;font-weight:700}
.seun li.now{outline:3px solid var(--mag);outline-offset:1px}
.sinsal{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.sinsal li{border:2px solid var(--line);border-radius:12px;padding:6px 8px;display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap;font-weight:700;font-size:.85rem}
.sinsal li.none small{color:var(--muted)}
.why{background:var(--answer);color:var(--on-sticker)}
.why .note,.why .hint{color:#3b352b}
.why a{color:var(--on-sticker)}
.why-list{list-style:none;padding:0}
.why-list li{display:grid;grid-template-columns:4.8rem minmax(0,1fr);gap:8px;padding:6px 0;border-bottom:1.5px dashed rgba(0,0,0,.3);font-size:.85rem}
.warn{background:var(--card);color:var(--ink);border:2px solid var(--line);border-radius:12px;padding:8px 10px;font-size:.85rem;font-weight:700;margin-bottom:8px}
.why .opts{margin:10px 0}
@media (max-width:599.98px){
  .chart-grid[data-tab="daeun"] .col-sinsal,.chart-grid[data-tab="daeun"] .col-why,
  .chart-grid[data-tab="sinsal"] .col-daeun,.chart-grid[data-tab="sinsal"] .col-why,
  .chart-grid[data-tab="why"] .col-daeun,.chart-grid[data-tab="why"] .col-sinsal{display:none}
  .chart-grid:not(.hidden-open) .r-hidden{display:none}
}
@media (min-width:600px){
  .tabs,.fold{display:none}
  .chart-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"sum sum" "table why" "el el" "daeun daeun" "sinsal sinsal"}
  .col-sum{grid-area:sum}.col-table{grid-area:table}.col-why{grid-area:why}
  .col-elements{grid-area:el}.col-daeun{grid-area:daeun}.col-sinsal{grid-area:sinsal}
  .seun{grid-template-columns:repeat(auto-fill,minmax(3.4rem,1fr))} /* 보통 크기면 10년 한 줄, 크게·확대하면 줄바꿈 */
}
@media (min-width:1024px){
  .chart-grid{grid-template-columns:minmax(0,17rem) minmax(0,1fr) minmax(0,18rem);grid-template-areas:"input sum why" "input table why" "input el why" "input daeun why" "input sinsal why";align-items:start}
  .col-input,.chart-grid.editing .col-input{display:block;grid-area:input;position:sticky;top:16px;max-height:none;border-radius:var(--radius);box-shadow:none;z-index:auto}
  .col-why{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto} /* 화면보다 길면 칸 안에서 스크롤 */
  .chart-grid.editing::before{display:none}
  .edit,.sheet-close{display:none}
}

@page{size:A4;margin:12mm}
@media print{
  .chart-grid.editing::before,html.nav-busy::before{display:none !important}
  /* 다크 모드(시스템·수동)여도 종이에는 밝은 값: 다크 블록과 같은 세기(0,2,0)이고 뒤에 있어 이긴다 */
  :root,:root:not([data-theme="light"]),:root[data-theme]{--paper:#fff;--card:#fff;--ink:#141414;--line:#141414;--muted:#5b5346;--wood:#3fae4c;--fire:#ea4a2f;--earth:#f4cb3c;--metal:#fbf5e6;--water:#4a9fe6;--answer:#f4cb3c;--jeol:#dff0d8;--sun-text:#b8321b;--sat-text:#1f62a8;color-scheme:light}
  .top,.tabbar,.ad,.foot,.icon-btn,.crumbs{display:none}
  body{background:#fff;color:#141414;padding:0}
  .calc-app,.chart-app,.today-app,.convert-app{min-height:0}
  .col-why{position:static}
  .col-input,.tabs,.acts,.card-msg,.card-out,.edit,.fold,.opts,.sheet-close,.tip-body,.card-cancel{display:none !important}
  .col-why{max-height:none;overflow:visible}
  .chart-grid{display:block}
  .chart-grid>*{margin-bottom:10px}
  .chart-grid .col-daeun,.chart-grid .col-sinsal,.chart-grid .col-why{display:block !important}
  .r-hidden{display:table-row !important}
  .card,.answer,.why{break-inside:avoid;box-shadow:none}
  .stk,.answer,.terms tr.jeol{-webkit-print-color-adjust:exact;print-color-adjust:exact} /* 오행 색 스티커가 하얗게 찍히지 않게 */
  .daeun{flex-wrap:wrap;overflow:visible}
}