/* 꿀집 — 흰 종이에 잉크, 꿀색은 답에 긋는 형광펜으로만. 힘은 '답'에 한 번만 준다. */
:root{
  --paper:#FFFFFF; --ink:#1E2430; --sub:#5E6673; --line:#E6E8EC; --well:#F5F6F8;
  --marker:#FFD54A; --link:#1F5FBF; --warn:#B4361A;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#15181E; --ink:#E9ECF1; --sub:#9AA3B0; --line:#2A303A; --well:#1D2129; --marker:#B8901A; --link:#7FB0FF; --warn:#FF8A6B}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.7 "Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;word-break:keep-all}
body.lock{overflow:hidden}
a{color:var(--link);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* 형광펜 — 이 사이트에서 유일하게 힘주는 장치 */
.hl,.big b,.answer strong{background:linear-gradient(transparent 58%,var(--marker) 58%,var(--marker) 92%,transparent 92%);padding:0 2px}

/* 헤더 */
header.site{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.bar{max-width:720px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;height:56px}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:19px;color:var(--ink);text-decoration:none;letter-spacing:-.03em}
.burger{display:none;width:44px;height:44px;margin-right:-8px;border:0;background:transparent;cursor:pointer;position:relative}
.burger span{position:absolute;left:12px;width:20px;height:2px;background:var(--ink);border-radius:1px;transition:transform .2s,opacity .2s}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:27px}
header.open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
header.open .burger span:nth-child(2){opacity:0}
header.open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu{display:flex;gap:2px}
.grp{position:relative}
.grp-t{display:block;border:0;background:transparent;font:inherit;font-weight:600;font-size:15px;color:var(--ink);padding:8px 12px;cursor:pointer;text-decoration:none;border-radius:8px}
.grp-t:hover,.grp.on .grp-t{background:var(--well)}
.grp-m{display:none;position:absolute;top:calc(100% + 6px);right:0;min-width:210px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:6px}
.grp:hover .grp-m,.grp:focus-within .grp-m,.grp.on .grp-m{display:block}
.grp-m a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:var(--ink);text-decoration:none}
.grp-m a:hover{background:var(--well)}
.grp-m i{font-style:normal;width:22px;text-align:center}
@media (min-width:721px){header.site{display:flex;justify-content:space-between;align-items:center;padding:0 max(16px,calc(50% - 344px))}.bar{margin:0;padding:0;max-width:none}}
@media (max-width:720px){
  .burger{display:block}
  /* 화면 전체 패널 — 메뉴 안에서 스크롤 */
  .menu{display:none;position:fixed;top:57px;left:0;right:0;bottom:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
        background:var(--paper);flex-direction:column;gap:0;padding:4px 16px 40px}
  header.open .menu{display:flex}
  .grp{border-bottom:1px solid var(--line);padding:10px 0}
  .grp-t{font-size:13px;color:var(--sub);padding:6px 0;pointer-events:none;background:none!important}
  .grp a.grp-t{pointer-events:auto;font-size:17px;color:var(--ink);font-weight:700}
  .grp-m{position:static;display:block;border:0;padding:0;min-width:0}
  .grp-m a{padding:12px 0;font-size:17px;border-radius:0}
}

/* 본문 */
main{max-width:720px;margin:0 auto;padding:28px 16px 56px}
h1{font-size:30px;line-height:1.28;margin:0 0 10px;letter-spacing:-.035em;font-weight:800}
h2{font-size:21px;line-height:1.4;letter-spacing:-.025em;font-weight:750}
.crumb{font-size:14px;margin:0 0 6px}.crumb a{color:var(--sub);text-decoration:none}
.meta{font-size:14px;color:var(--sub);margin:0 0 18px}
.lead{color:var(--sub);margin:0 0 24px;font-size:17px}
.answer{font-size:19px;line-height:1.65;font-weight:600;margin:0 0 26px;letter-spacing:-.02em}

/* 계산기·도구 */
.calc{border:1px solid var(--line);border-radius:14px;padding:20px}
.calc label{display:block;font-weight:600;font-size:15px;margin:16px 0 6px}.calc label:first-child{margin-top:0}
.calc small{color:var(--sub);font-weight:400}
.calc input,.calc select,.calc textarea{width:100%;padding:12px 14px;border:1px solid #CDD2D9;border-radius:10px;font:inherit;font-size:16px;background:var(--paper);color:var(--ink)}
.calc input:focus,.calc select:focus,.calc textarea:focus{outline:0;border-color:var(--ink)}
.calc textarea{min-height:88px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.go{margin-top:18px;width:100%;padding:15px;border:0;border-radius:10px;background:var(--ink);color:var(--paper);font:inherit;font-size:17px;font-weight:700;cursor:pointer}
.go:active{transform:translateY(1px)}
.result{margin-top:18px}.result:empty{display:none}
.big{padding:6px 0 2px;font-size:15px;color:var(--sub)}
.big b{display:inline-block;margin-top:4px;font-size:40px;line-height:1.2;color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.result table{width:100%;border-collapse:collapse;margin-top:12px;font-size:15px}.result td{padding:10px 0;border-bottom:1px solid var(--line)}.result td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.warn{color:var(--warn);font-size:14px;margin-top:10px}

/* 글 */
article{font-size:17px;line-height:1.85;letter-spacing:-.01em;margin-top:10px}
article p{margin:0 0 15px}
article h2{margin:40px 0 10px}
article h3{font-size:18px;margin:24px 0 6px}
article ul,article ol{padding-left:20px;margin:6px 0 15px}article li{margin:4px 0}
article table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:12px 0 20px;font-size:15px}
article th,article td{border-bottom:1px solid var(--line);padding:9px 12px 9px 0;text-align:left;min-width:64px;vertical-align:top}
article th{font-weight:700;border-bottom:2px solid var(--ink)}
article aside{margin:18px 0;padding:14px 16px;background:var(--well);border-radius:10px;font-size:16px}
.faq h2,.sources h2,.related h2{margin-top:44px}
.faq details{border-bottom:1px solid var(--line);padding:14px 0}.faq summary{font-weight:600;cursor:pointer}
.faq details p{margin:8px 0 0;color:var(--sub)}
.sources ul{padding-left:18px;font-size:14px}
.note{color:var(--sub);font-size:13px;margin-top:36px;border-top:1px solid var(--line);padding-top:14px}

/* 목록(서랍) — 카드 대신 선으로 나눈 줄 */
.cards{display:block;margin:6px 0 10px;border-top:1px solid var(--line)}
.card{display:flex;gap:14px;align-items:center;padding:14px 2px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.card .ic{font-style:normal;font-size:22px;width:28px;text-align:center;flex:none}
.card b{display:block;font-size:17px;font-weight:700}
.card span{display:block;color:var(--sub);font-size:14px;line-height:1.5;margin-top:1px}
.card:hover b{text-decoration:underline;text-underline-offset:3px}
@media (min-width:721px){.cards{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}}
footer{max-width:720px;margin:0 auto;color:var(--sub);font-size:13px;padding:28px 16px 40px;border-top:1px solid var(--line)}footer a{color:var(--sub)}

/* ── 놀이 도구 ── */
.stage{position:relative;margin-top:16px;user-select:none}
.chip{border:1px solid #CDD2D9;background:var(--paper);color:var(--ink);border-radius:999px;padding:8px 14px;font:inherit;font-size:15px;cursor:pointer}
.sub-btns{display:flex;gap:8px;margin-top:12px}.sub-btns .chip{flex:1}
.ladder-names,.ladder-res{display:grid;gap:4px}
.ladder-names button{border:0;border-radius:8px;padding:9px 2px;font:inherit;font-size:14px;font-weight:700;color:#fff;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ladder-names button:active{transform:scale(.96)}
.ladder-res span{text-align:center;font-size:14px;font-weight:700;padding:9px 2px;border-radius:8px;background:var(--well);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ladder-res span.hide{color:transparent;background:repeating-linear-gradient(45deg,var(--line) 0 6px,var(--well) 6px 12px)}
.ladder-res span.flip{animation:flip .45s ease}
.ladder-wrap canvas{width:100%;height:340px;display:block}
@keyframes flip{0%{transform:rotateX(90deg)}100%{transform:none}}
.wheel{position:relative;width:min(100%,380px);margin:6px auto 0;aspect-ratio:1}
.wheel canvas{width:100%;height:100%;display:block}
.wheel .pin{position:absolute;left:50%;top:-6px;width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-top:30px solid var(--ink);transform:translateX(-50%);transform-origin:50% 0;transition:transform .08s}
.wheel .pin.tick{transform:translateX(-50%) rotate(-14deg)}
.wheel .hub{position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:5px solid var(--paper);background:var(--ink);color:var(--paper);font:inherit;font-weight:800;font-size:16px;cursor:pointer}
.wheel .hub:active{transform:translate(-50%,-50%) scale(.95)}
.history{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;font-size:13px;color:var(--sub)}
.history span{background:var(--well);border-radius:6px;padding:3px 8px}
.dice-row{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;padding:20px 0 8px;perspective:700px}
.die{width:64px;height:64px;position:relative;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.2,.8,.25,1)}
.face{position:absolute;inset:0;background:#fff;border:1px solid #D9DDE3;border-radius:12px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:9px}
.face i{width:11px;height:11px;border-radius:50%;background:#1E2430;align-self:center;justify-self:center}
.face.f1 i{background:#D7263D;width:15px;height:15px}
.f1{transform:rotateY(0) translateZ(32px)}.f6{transform:rotateY(180deg) translateZ(32px)}
.f2{transform:rotateY(90deg) translateZ(32px)}.f5{transform:rotateY(-90deg) translateZ(32px)}
.f3{transform:rotateX(90deg) translateZ(32px)}.f4{transform:rotateX(-90deg) translateZ(32px)}
.dice-sum{text-align:center;font-size:15px;color:var(--sub);margin-top:8px}
.dice-sum b{font-size:40px;color:var(--ink);display:inline-block;margin-top:2px;font-weight:800;background:linear-gradient(transparent 58%,var(--marker) 58%,var(--marker) 92%,transparent 92%);padding:0 4px}
.deck{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;margin-top:16px;perspective:800px}
.pcard{height:104px;position:relative;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.8,.25,1)}
.pcard .fr,.pcard .bk{position:absolute;inset:0;border-radius:10px;display:grid;place-items:center;backface-visibility:hidden;font-weight:700;text-align:center;padding:6px}
.pcard .bk{background:var(--ink);font-size:28px}
.pcard .fr{background:var(--paper);border:1px solid var(--line);transform:rotateY(180deg);font-size:15px}
.pcard.open{transform:rotateY(180deg)}
.pcard.win .fr{border:2px solid var(--ink);font-size:16px;background:linear-gradient(transparent 60%,var(--marker) 60%)}
.pcard.shake{animation:shake .5s ease}
@keyframes shake{25%{transform:translate(-6px,3px) rotate(-4deg)}50%{transform:translate(5px,-3px) rotate(3deg)}75%{transform:translate(-3px,2px) rotate(-2deg)}}
.teams{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:16px}
.team{border:1px solid var(--line);border-radius:12px;padding:12px}.team b{display:block;margin-bottom:6px}
.team span{display:inline-block;background:var(--well);border-radius:6px;padding:4px 9px;margin:3px;font-size:14px;animation:pop .3s ease both}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:100}

.big{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
footer a{margin-right:14px}

/* iOS 사파리: 날짜 입력칸 고유 최소 폭 때문에 나란히 놓으면 겹침 → 칸 폭 안에서 줄어들게 */
.row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.row>div{min-width:0}
.calc input{min-width:0;max-width:100%;display:block}
.calc input[type=date]{-webkit-appearance:none;appearance:none;min-height:48px}
.calc input[type=date]::-webkit-date-and-time-value{text-align:left}

/* 입력칸 높이 고정 — iOS 사파리는 빈 날짜 칸을 접어서 입력 전후 높이가 달라짐 */
.calc input,.calc select{height:48px;line-height:1.2}
/* 날짜 칸: 여백 13 + 글자 줄 20 + 여백 13 + 테두리 2 = 48px, 글자는 세로 가운데 */
.calc input[type=date]{padding-top:13px;padding-bottom:13px}
.calc input[type=date]::-webkit-date-and-time-value{min-height:20px;line-height:20px;margin:0}
.calc input[type=date]::-webkit-datetime-edit{padding:0;line-height:20px}

/* 홈: 폰 홈 화면처럼 아이콘+이름 격자 */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.apps-t{font-size:15px;font-weight:700;color:var(--sub);margin:8px 0 12px}
.apps-t~.apps-t{margin-top:30px}
.apps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 8px}
.app{display:flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none;color:var(--ink);-webkit-tap-highlight-color:transparent}
.app .ai{width:60px;height:60px;border-radius:18px;background:var(--well);display:grid;place-items:center;font-size:30px;transition:transform .12s}
.app:active .ai{transform:scale(.92)}
.app .al{font-size:13px;font-weight:600;text-align:center;line-height:1.3;letter-spacing:-.02em}
@media (min-width:721px){.apps{grid-template-columns:repeat(6,1fr)}.app:hover .ai{background:var(--line)}}
article h2:first-child{margin-top:40px}

article .apps-t:first-child{margin-top:0}
main:has(h1.sr){padding-top:20px}

/* 체크박스 줄 */
.calc label.check{display:flex;align-items:center;gap:8px;font-weight:500;margin-top:14px;cursor:pointer}
.calc label.check input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--ink)}
/* 기념일 표 */
.marks tr.past td{color:var(--sub);opacity:.6}
.marks tr.next td{font-weight:700}
.marks tr.next td:first-child span{background:linear-gradient(transparent 58%,var(--marker) 58%,var(--marker) 92%,transparent 92%);padding:0 2px}
.marks td:nth-child(2){color:var(--sub);text-align:left}

/* 상환 일정표 */
.tscroll{overflow-x:auto;margin-top:12px}
.sched{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.sched th{font-weight:600;color:var(--sub);text-align:right;padding:6px 4px;border-bottom:1px solid #E3E6EA}
.sched td{text-align:right;padding:6px 4px}
.sched th:first-child,.sched td:first-child{text-align:center}
.calc textarea[data-live]{min-height:180px}
/* 선택칸: 사파리 기본 모양은 글자가 위아래로 잘려 보여 직접 그린다 */
.calc select{-webkit-appearance:none;appearance:none;height:48px;line-height:20px;padding:13px 38px 13px 14px;
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2321262E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
@media (prefers-color-scheme:dark){.calc select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23E9ECF1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}}

/* 입력 줄 간격: 두 칸짜리 줄도 한 칸짜리 라벨과 같은 리듬으로 */
.calc .row{margin-top:16px}
.calc form>.row:first-child{margin-top:0}
.won-hint{display:block;min-height:0;margin-top:6px;font-size:13px;color:var(--sub);font-variant-numeric:tabular-nums}
.won-hint:empty{display:none}
/* 계산기 메뉴: 목적별 묶음 */
.grp-m .sec b{display:block;font-size:12px;font-weight:600;color:var(--sub);padding:10px 10px 4px}
@media (min-width:721px){.grp-m.wide{columns:2;column-gap:6px;min-width:440px}.grp-m .sec{break-inside:avoid}}
@media (max-width:720px){.grp-m .sec b{padding:14px 0 2px;font-size:13px}}

/* AI에게 이어서 물어보기 */
.ask{margin-top:28px;padding:18px 20px;background:var(--well);border-radius:14px}
.ask h2{margin:0 0 6px;font-size:17px}
.ask p{margin:0 0 14px;font-size:15px;color:var(--sub)}
.copy-ask{padding:11px 18px;border:1px solid var(--ink);border-radius:10px;background:var(--paper);color:var(--ink);font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.copy-ask.ok{background:var(--ink);color:var(--paper)}
.copy-ask:focus-visible,.go:focus-visible{outline:3px solid var(--marker);outline-offset:2px}
.ask details{margin-top:12px;border:0}
.ask summary{font-size:14px;color:var(--sub);cursor:pointer}
.ask-text{margin:10px 0 0;padding:14px;background:var(--paper);border:1px solid var(--line);border-radius:10px;white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere;font-family:inherit;font-size:13px;line-height:1.65;max-height:320px;overflow:auto}