/* 레이아웃: 휴대폰 기준 한 줄 칼럼(최대 640px). 결혼식/장례식 전환 → 입력 카드 → 흰 봉투 모양 결과 카드(결혼식은 붉은 "축", 장례식은 먹색 "부의" 도장) → 공유 → 메모장 → 자주 묻는 질문 */
:root{
  --paper:#eef0f3;
  --card:#ffffff;
  --ink:#1b2130;
  --muted:#5b6474;
  --line:#d9dde5;
  --seal:#b8293a;
  --seal-soft:#f8e6e8;
  --font-display:"Gowun Batang","Nanum Myeongjo",serif;
  --font-body:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  color-scheme:light;
}
body.funeral{--seal:#3a4150; --seal-soft:#e7e9ee}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#11141a; --card:#1a1f28; --ink:#e7e9ee; --muted:#9aa3b2; --line:#2c3340;
    --seal:#ec5d69; --seal-soft:#3a1d23; color-scheme:dark;
  }
  :root:not([data-theme="light"]) body.funeral{--seal:#c6ccd7; --seal-soft:#2a303b}
}
:root[data-theme="dark"]{
  --paper:#11141a; --card:#1a1f28; --ink:#e7e9ee; --muted:#9aa3b2; --line:#2c3340;
  --seal:#ec5d69; --seal-soft:#3a1d23; color-scheme:dark;
}
:root[data-theme="dark"] body.funeral{--seal:#c6ccd7; --seal-soft:#2a303b}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.6}
main{max-width:640px;margin:0 auto;padding:28px 16px 48px;display:flex;flex-direction:column;gap:20px}
h1,h2,h3{font-family:var(--font-display);text-wrap:balance;margin:0;line-height:1.3}
h1{font-size:1.9rem}
h2{font-size:1.25rem}
p{margin:0}
.lede{color:var(--muted);max-width:34em}
header{display:flex;flex-direction:column;gap:8px}

.mode{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:4px}
.mode button{font:inherit;font-weight:600;padding:10px 8px;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer}
.mode button[aria-pressed="true"]{background:var(--seal);color:var(--card)}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line)}
.tabs a{padding:10px 14px;text-decoration:none;color:var(--muted);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a[aria-current="page"]{color:var(--ink);border-color:var(--seal)}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--seal);outline-offset:2px}

.view{display:flex;flex-direction:column;gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:16px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:420px){.grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field.full,.grid > .full{grid-column:1/-1}
label{font-size:.88rem;font-weight:600}
.hint{font-size:.8rem;color:var(--muted)}
select,input[type=number],input[type=text]{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px 12px;width:100%}
.amount-wrap{display:flex;align-items:center;gap:8px}
.amount-wrap input{font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:inherit;font-size:.85rem;padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--seal-soft);border-color:var(--seal);color:var(--seal)}

/* 결과: 흰 봉투 */
.envelope{position:relative;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px 20px 20px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.envelope::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--seal)}
.seal{position:absolute;right:18px;top:22px;width:56px;height:56px;border:2px solid var(--seal);border-radius:8px;color:var(--seal);font-family:var(--font-display);font-weight:700;font-size:1.7rem;display:grid;place-items:center;transform:rotate(-6deg);opacity:.9;line-height:1}
body.funeral .seal{font-size:1.15rem;transform:none}
.result-label{font-size:.9rem;color:var(--muted);padding-right:72px}
.big{font-family:var(--font-display);font-size:3rem;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.big small{font-size:1.4rem;font-weight:400;margin-left:2px}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tier{border:1px solid var(--line);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column}
.tier span{font-size:.78rem;color:var(--muted)}
.tier b{font-variant-numeric:tabular-nums;font-size:1.05rem}
.tier.on{border-color:var(--seal);background:var(--seal-soft)}
.tier.on b{color:var(--seal)}
.steps{margin:0;padding:14px 0 0;list-style:none;display:flex;flex-direction:column;gap:8px;border-top:1px dashed var(--line)}
.steps li{display:grid;grid-template-columns:1fr auto;gap:12px;font-size:.92rem}
.steps li span:last-child{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.note{font-size:.85rem;color:var(--muted)}

.btn{font:inherit;font-weight:600;padding:10px 16px;border-radius:8px;border:1px solid var(--seal);background:var(--seal);color:var(--card);cursor:pointer}
.btn.ghost{background:transparent;color:var(--seal)}
.btn.small{padding:6px 12px;font-size:.85rem}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#shareImg{width:100%;max-width:360px;border-radius:10px;border:1px solid var(--line);display:block}
.toast{font-size:.85rem;color:var(--seal);min-height:1.2em}
.ad-slot{border:1px dashed var(--line);border-radius:8px;padding:18px;text-align:center;color:var(--muted);font-size:.8rem}

table.ledger{width:100%;border-collapse:collapse;font-size:.9rem}
.ledger th,.ledger td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line)}
.ledger td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.ledger-wrap{overflow-x:auto}
.kind{font-size:.75rem;padding:2px 7px;border-radius:999px;border:1px solid var(--line);white-space:nowrap}
.empty{color:var(--muted);font-size:.9rem}

details{border-top:1px solid var(--line);padding:12px 0}
details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:600}
details p{margin-top:8px;color:var(--muted);font-size:.93rem}
footer{font-size:.78rem;color:var(--muted);display:flex;flex-direction:column;gap:4px}
[hidden]{display:none!important}
body.funeral .w-only{display:none!important}
body:not(.funeral) .f-only{display:none!important}
@media (prefers-reduced-motion: no-preference){.chip,.tabs a,.btn,.mode button{transition:background .15s,border-color .15s,color .15s}}