@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;600;700&display=swap');

:root{
  --paper:#FAFAF8;
  --panel:#FFFFFF;
  --ink:#1B1D22;
  --muted:#6B7078;
  --line:#E4E2DD;
  --accent:#96731A;
  --accent-soft:#F5EEDA;
  --danger:#C63F3F;
  --danger-soft:#FBE9E9;
  --track:#ECEAE4;
  --seal:#B5453F;
  --shadow:0 1px 2px rgba(27,29,34,.04), 0 6px 20px rgba(27,29,34,.05);
}
:root[data-theme="dark"]{
  --paper:#131417;
  --panel:#1B1D22;
  --ink:#ECEDEF;
  --muted:#9096A0;
  --line:#2D2F36;
  --accent:#E3BE63;
  --accent-soft:#3A3120;
  --danger:#E9706F;
  --danger-soft:#3A1D1D;
  --track:#25272D;
  --seal:#D97570;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#131417;
    --panel:#1B1D22;
    --ink:#ECEDEF;
    --muted:#9096A0;
    --line:#2D2F36;
    --accent:#E3BE63;
    --accent-soft:#3A3120;
    --danger:#E9706F;
    --danger-soft:#3A1D1D;
    --track:#25272D;
    --seal:#D97570;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--paper);}
.num{font-variant-numeric:tabular-nums;}

.page{
  background:var(--paper);
  color:var(--ink);
  font-family:"Pretendard Variable","Pretendard","Apple SD Gothic Neo","Malgun Gothic",-apple-system,BlinkMacSystemFont,sans-serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0 16px 48px;
}

.wrap{width:100%;max-width:640px;margin-top:20px;}

header{padding:8px 0 18px;text-align:center;position:relative;}
.theme-toggle{
  position:absolute;top:4px;right:0;width:34px;height:34px;border-radius:99px;
  border:1px solid var(--line);background:var(--panel);font-size:15px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.theme-toggle:hover{border-color:var(--accent);}
.brand{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 8px;}
h1{font-size:clamp(24px,5vw,30px);font-weight:800;margin:0 0 8px;letter-spacing:-.01em;}
.tagline{color:var(--muted);font-size:14.5px;margin:0;}

.hero{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:20px 22px 22px;
  margin-top:20px;
  box-shadow:var(--shadow);
}

.type-tabs{display:flex;gap:6px;background:var(--track);border-radius:11px;padding:4px;margin-bottom:18px;}
.type-tab{
  flex:1;text-align:center;font-family:inherit;font-size:13.5px;font-weight:700;padding:9px 4px;
  border-radius:8px;border:none;background:transparent;color:var(--muted);cursor:pointer;
}
.type-tab.active{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08);}

.result-block{text-align:center;padding:6px 0 4px;}
.result-label{font-size:12.5px;color:var(--muted);font-weight:600;margin:0 0 6px;}
.result-amount{font-size:clamp(34px,9vw,46px);font-weight:800;letter-spacing:-.02em;color:var(--accent);}
.result-sub{font-size:13px;color:var(--muted);margin:8px 0 0;}
.result-note{font-size:11.5px;color:var(--muted);margin:4px 0 0;}
/* trust-notice가 extra-note보다 훨씬 커서(2~3줄+박스 패딩), 관계를 바꿀 때마다 이 영역 높이가
   요동치며 아래 패널 전체가 위아래로 출렁였다(CEO 지적, 2026-08-13 15개 이슈 #2 → 8-1에서 min-height로
   1차 대응했으나 2026-08-15 재발견 — min-height는 "최소값"일 뿐이라 trust-notice 문구가 좁은
   화면에서 2~3줄로 꺾이면 여전히 min-height를 넘어서며 출렁였다). height를 고정값으로 바꿔
   가장 긴 트러스트 노티스 문구가 좁은 화면(320px대)에서 3줄로 꺾이는 경우까지 감안한 여유를
   두면, 어떤 관계·문구 조합이어도 이 영역의 실제 높이가 항상 동일해 아래 패널이 움직이지 않는다. */
.note-area{height:112px;display:flex;flex-direction:column;justify-content:center;}
.extra-note{font-size:11.5px;color:var(--muted);margin:4px 0 0;font-style:italic;}
.trust-notice{
  margin-top:10px;font-size:12.5px;line-height:1.6;font-weight:700;text-align:left;
  background:var(--danger-soft);color:var(--danger);border-radius:10px;padding:10px 12px;
}

.panel-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:20px;
  margin-top:14px;
  box-shadow:var(--shadow);
}

.steps{display:flex;flex-direction:column;gap:18px;}
.step{display:flex;gap:12px;transition:opacity .15s ease;}
.step-num{
  flex:none;width:24px;height:24px;border-radius:99px;background:var(--accent-soft);color:var(--accent);
  font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.step-body{flex:1;}
.step-label{font-size:13.5px;font-weight:700;margin:0 0 10px;}
.muted-inline{color:var(--muted);font-weight:500;}

.chip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
@media (max-width:420px){.chip-grid{grid-template-columns:repeat(2,1fr);}}
.chip{
  font-family:inherit;font-size:12.5px;font-weight:600;padding:10px 6px;border-radius:9px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;text-align:center;
}
.chip.active{background:var(--accent);border-color:var(--accent);color:#fff;}

.intimacy-slider{margin-top:12px;}
.intimacy-range{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;
  background:var(--track);outline:none;margin:6px 0 4px;
}
.intimacy-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:99px;
  background:var(--accent);cursor:pointer;border:2px solid var(--panel);box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.intimacy-range::-moz-range-thumb{
  width:18px;height:18px;border-radius:99px;background:var(--accent);cursor:pointer;
  border:2px solid var(--panel);box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.intimacy-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);}

.pill-group{display:flex;gap:8px;flex-wrap:wrap;}
.pill{
  font-family:inherit;font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:99px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;
}
.pill.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);}

.situation-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.funeral-attend-note{font-size:12px;line-height:1.6;color:var(--muted);background:var(--accent-soft);border-radius:10px;padding:10px 12px;margin:0;}
.situation-row:last-child{margin-bottom:0;}
.situation-row .pill-group{flex:1;}
.situation-title{font-size:11.5px;color:var(--muted);font-weight:600;margin:0 0 6px;}

.envelope-section h2{font-size:16.5px;font-weight:800;margin:0 0 6px;}
.envelope-hint{font-size:12.5px;color:var(--muted);margin:0 0 14px;}
.envelope-examples{display:flex;gap:16px;flex-wrap:wrap;}
.envelope-example{flex:1;min-width:130px;text-align:center;}
.envelope-caption{font-size:12px;font-weight:700;margin:8px 0 0;display:flex;flex-direction:column;gap:2px;}
.envelope-caption-sub{font-size:10.5px;font-weight:500;color:var(--muted);}
.envelope-back{
  display:flex;align-items:center;justify-content:center;
}
.envelope-back-text{
  font-family:"Noto Serif KR",serif;font-weight:700;font-size:13px;color:#241f1a;
}
.envelope{
  width:100%;max-width:150px;height:96px;margin:0 auto;
  background:linear-gradient(180deg,#fdfbf6,#f8f4ea);
  border:1px solid var(--line);
  border-radius:6px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.envelope-hanja{
  writing-mode:vertical-rl;
  text-orientation:upright;
  font-family:"Noto Serif KR",serif;
  font-weight:700;
  font-size:17px;
  color:#241f1a;
  letter-spacing:.1em;
}
.envelope-seal{
  position:absolute;right:12px;bottom:10px;
  width:20px;height:20px;border-radius:4px;
  background:var(--seal);color:#fff;font-size:9px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  transform:rotate(-6deg);
  font-family:"Noto Serif KR",serif;
}
/* 실제 축의금·부의금 봉투는 이름+올림도 세로쓰기가 관례다(CEO 지적, 2026-08-15) —
   기존엔 이 이름만 가로쓰기로 남아 있어 나머지 세로쓰기 요소들과 섞여 어색했다. */
.envelope-name{
  position:absolute;left:16px;top:16px;bottom:16px;
  writing-mode:vertical-rl;text-orientation:upright;
  font-family:"Noto Serif KR",serif;
  font-size:10.5px;color:#4a4238;font-weight:600;letter-spacing:.08em;
}
.envelope-legend{flex:1;min-width:180px;}
.envelope-legend .row{display:flex;justify-content:space-between;font-size:12.5px;padding:6px 0;border-top:1px solid var(--line);}
.envelope-legend .row:first-child{border-top:none;padding-top:0;}
.envelope-legend .row span:first-child{color:var(--muted);}
.envelope-legend .row span:last-child{font-weight:700;font-family:"Noto Serif KR",serif;}

.action-row{display:flex;gap:8px;margin-top:16px;}
.action-hint{font-size:11px;color:var(--muted);text-align:center;margin:8px 0 0;}
.btn{
  font-family:inherit;font-size:13px;font-weight:600;padding:11px 14px;border-radius:9px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;flex:1;
}
.btn:hover{border-color:var(--accent);color:var(--accent);}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn.primary:hover{opacity:.9;color:#fff;}

.disclaimer{
  margin-top:14px;font-size:11.5px;color:var(--muted);background:var(--track);
  border-radius:10px;padding:12px 14px;line-height:1.6;
}

.privacy-note{
  display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--muted);
  margin:24px 2px 0;
}
.privacy-note .dot{width:6px;height:6px;border-radius:99px;background:var(--accent);flex:none;}

.site-footer{
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  margin-top:14px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);
}
.site-footer a{color:var(--muted);text-decoration:none;}
.site-footer a:hover{color:var(--accent);}
.site-footer .dividers{color:var(--line);}

/* [hidden] 속성이 display:flex를 지정한 요소(.situation-row 등)에서는 동일 명시도 충돌로
   무시되던 문제 — 파일 맨 끝에 둬서 캐스케이드 순서로 항상 이기게 한다. */
[hidden]{display:none;}