@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&family=Noto+Sans+KR:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --paper:#EDE6D6;
  --paper-2:#E4DAC1;
  --paper-3:#DCCFAE;
  --ink:#2B2A25;
  --ink-soft:#665D49;
  --thread:#B23A2E;
  --stamp:#3F6659;
  --tag:#9C6F1E;
  --line:#C9BB98;
  --serif:'Gowun Batang', serif;
  --sans:'Noto Sans KR', sans-serif;
  --mono:'IBM Plex Mono', monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}

/* focus */
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--thread); outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

/* header */
header.site{
  position:sticky; top:0; z-index:20; background:var(--paper);
  border-bottom:1px dashed var(--line);
}
header.site .bar{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-weight:700;font-size:21px;text-decoration:none;color:var(--ink)}
.brand .dot{width:9px;height:9px;background:var(--thread);border-radius:1px;transform:rotate(45deg);display:inline-block}
nav.primary{display:flex;gap:26px}
nav.primary a{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--ink-soft);border-bottom:1px solid transparent;padding-bottom:2px}
nav.primary a:hover,nav.primary a[aria-current="page"]{color:var(--thread);border-color:var(--thread)}
.menu-btn{display:none;background:none;border:1px solid var(--ink);border-radius:2px;padding:7px 10px;font-family:var(--mono);font-size:12px;cursor:pointer}
@media (max-width:720px){
  nav.primary{position:absolute;top:100%;left:0;right:0;background:var(--paper);flex-direction:column;gap:0;border-bottom:1px dashed var(--line);display:none}
  nav.primary.open{display:flex}
  nav.primary a{padding:14px 24px;border-bottom:1px dashed var(--line)}
  .menu-btn{display:block}
}

/* eyebrow / labels */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--thread);margin:0 0 10px}
.badge-draft{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-soft);border:1px dashed var(--line);border-radius:2px;padding:3px 8px;margin-bottom:18px}

/* perforated divider */
.perf{position:relative;height:1px;margin:56px 0;background-image:repeating-linear-gradient(to right,var(--line) 0 8px,transparent 8px 16px)}
.perf::before,.perf::after{content:'';position:absolute;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--paper);border:1px dashed var(--line)}
.perf::before{left:-31px}
.perf::after{right:-31px}
@media (max-width:600px){.perf::before,.perf::after{display:none}}

/* hero */
.hero{padding:64px 0 20px;display:grid;grid-template-columns:1.15fr 0.85fr;gap:48px;align-items:center}
.hero h1{font-family:var(--serif);font-size:44px;line-height:1.28;margin:0 0 20px;font-weight:700}
.hero p.lead{font-size:16.5px;color:var(--ink-soft);max-width:46ch;margin:0 0 30px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.btn{font-family:var(--mono);font-size:13px;letter-spacing:.04em;text-decoration:none;padding:13px 22px;border-radius:2px;display:inline-block}
.btn-primary{background:var(--ink);color:var(--paper);opacity:.55;cursor:default}
.btn-ghost{border:1px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}

/* price-tag graphic */
.tag-shape{
  position:relative;justify-self:center;width:270px;aspect-ratio:1/1.15;
  background:var(--paper-2);
  clip-path:polygon(14% 0%,100% 0%,100% 100%,14% 100%,0% 50%);
  transform:rotate(4deg);
  border:1.5px dashed var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:0 20px 0 34px;
}
.tag-shape .hole{position:absolute;left:32px;top:50%;transform:translateY(-50%);width:16px;height:16px;border-radius:50%;border:2px solid var(--ink);background:var(--paper)}
.tag-shape .stamp{font-family:var(--serif);font-weight:700;font-size:27px;transform:rotate(-4deg)}
.tag-shape .stamp-sub{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--thread);transform:rotate(-4deg)}
@media (max-width:840px){
  .hero{grid-template-columns:1fr;padding-top:44px}
  .hero h1{font-size:32px}
  .tag-shape{width:210px;justify-self:start;margin-top:8px}
}

/* receipt list */
.receipt{border:1px solid var(--line);background:var(--paper-2);padding:6px 0}
.receipt .row{display:flex;align-items:center;gap:16px;padding:14px 22px;border-bottom:1px dashed var(--line)}
.receipt .row:last-child{border-bottom:none}
.receipt .idx{font-family:var(--mono);font-size:13px;color:var(--ink-soft);width:28px}
.receipt .name{font-weight:500;flex:1}
.receipt .status{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--tag);border:1px solid var(--tag);border-radius:2px;padding:3px 8px;white-space:nowrap}

/* trust grid */
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.trust-card{border:1px solid var(--line);padding:24px;background:var(--paper-2)}
.trust-card .mono-badge{display:inline-block;font-family:var(--mono);font-weight:600;font-size:13px;color:var(--paper);background:var(--stamp);padding:5px 9px;border-radius:2px;margin-bottom:14px}
.trust-card h3{font-family:var(--serif);font-size:18px;margin:0 0 8px}
.trust-card p{color:var(--ink-soft);font-size:14px;margin:0}
@media (max-width:760px){.trust-grid{grid-template-columns:1fr}}

/* steps (real sequence only) */
.steps{display:grid;gap:0}
.step{display:flex;gap:22px;padding:26px 0;border-bottom:1px dashed var(--line)}
.step:last-child{border-bottom:none}
.step .num{font-family:var(--mono);font-size:26px;color:var(--paper-3);color:var(--thread);opacity:.55;width:52px;flex-shrink:0}
.step h3{font-family:var(--serif);font-size:19px;margin:0 0 6px}
.step p{color:var(--ink-soft);margin:0;font-size:14.5px}

/* article (terms/privacy) */
article.doc h2{font-family:var(--serif);font-size:21px;margin:38px 0 12px}
article.doc h2:first-child{margin-top:0}
article.doc p, article.doc li{color:var(--ink-soft);font-size:14.5px;line-height:1.85}
article.doc ul{padding-left:20px}

/* faq */
details.faq{border-bottom:1px dashed var(--line);padding:18px 0}
details.faq summary{cursor:pointer;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:12px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:'+';font-family:var(--mono);color:var(--thread);flex-shrink:0}
details.faq[open] summary::after{content:'–'}
details.faq p{color:var(--ink-soft);margin:12px 0 0;font-size:14.5px}

/* footer */
footer.site{border-top:1px dashed var(--line);margin-top:80px;padding:40px 0}
footer.site .cols{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px}
footer.site .fbrand{font-family:var(--serif);font-weight:700;font-size:17px}
footer.site .flinks{display:flex;gap:18px;font-family:var(--mono);font-size:12px}
footer.site .flinks a{text-decoration:none;color:var(--ink-soft)}
footer.site .flinks a:hover{color:var(--thread)}
footer.site .fine{margin-top:22px;font-size:12.5px;color:var(--ink-soft)}

/* 404 */
.notfound{min-height:56vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 0}
.notfound h1{font-family:var(--serif);font-size:34px;margin:18px 0 10px}
.notfound p{color:var(--ink-soft);margin:0 0 22px}