@font-face { font-family: P; src: url(/fonts/P-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: P; src: url(/fonts/P-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: P; src: url(/fonts/P-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --paper: #f6f3ec;
  --ink: #1b1d22;
  --sub: #6a6a66;
  --line: #d9d4c8;
  --night: #14213a;
  --gold: #b8935a;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #e9e5db; color: var(--ink);
       font: 400 15px/1.7 P, "Apple SD Gothic Neo", sans-serif; word-break: keep-all; }
.sheet { max-width: 440px; min-height: 100vh; margin: 0 auto; background: var(--paper); padding-bottom: 40px; }
a { color: inherit; }

/* 키 비주얼 */
.kv { background: var(--night); color: #f6f3ec; padding: 56px 28px 40px; position: relative; overflow: hidden; }
.kv svg { position: absolute; right: -60px; top: -40px; width: 300px; opacity: .9; }
.kv .eyebrow { font-size: 12px; letter-spacing: .32em; color: var(--gold); margin: 0 0 18px; position: relative; }
.kv h1 { font-size: 34px; line-height: 1.25; font-weight: 700; margin: 0 0 22px; position: relative; letter-spacing: -.01em; }
.kv .date { font-size: 15px; font-weight: 600; position: relative; border-top: 1px solid rgba(246,243,236,.35); padding-top: 14px; display: flex; justify-content: space-between; }

.body { padding: 32px 28px 0; }
.greet { margin: 0 0 28px; }
.greet b { font-weight: 600; }
dl.info { margin: 0 0 32px; border-top: 1px solid var(--ink); }
dl.info div { display: grid; grid-template-columns: 72px 1fr; padding: 13px 0; border-bottom: 1px solid var(--line); }
dl.info dt { color: var(--sub); font-size: 13px; padding-top: 1px; }
dl.info dd { margin: 0; font-weight: 600; }
dl.info dd small { display: block; font-weight: 400; color: var(--sub); font-size: 13px; }

.cta { display: block; text-align: center; text-decoration: none; background: var(--ink); color: var(--paper);
       font-weight: 600; font-size: 16px; padding: 17px 0; border-radius: 4px; }
.cta:active { background: #000; }
.cta-note { text-align: center; font-size: 13px; color: var(--sub); margin: 10px 0 0; }
.foot { margin: 40px 28px 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--sub); }

/* 안내 페이지 */
.top { padding: 20px 28px; border-bottom: 1px solid var(--line); font-size: 14px; }
.top a { text-decoration: none; color: var(--sub); }
.page-h { padding: 28px 28px 8px; }
.page-h .eyebrow { font-size: 12px; letter-spacing: .24em; color: var(--gold); margin: 0 0 6px; font-weight: 600; }
.page-h h1 { font-size: 26px; margin: 0; line-height: 1.3; }
h2 { font-size: 15px; margin: 32px 0 10px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; color: var(--sub); font-weight: 400; border-bottom: 1px solid var(--ink); }
td.t, th:first-child { width: 84px; }
td.t { font-weight: 600; white-space: nowrap; padding-right: 12px; }
ol.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
ol.steps li { counter-increment: s; padding: 10px 0 10px 34px; position: relative; border-bottom: 1px solid var(--line); }
ol.steps li::before { content: counter(s); position: absolute; left: 0; top: 10px; width: 22px; height: 22px;
                      border: 1px solid var(--ink); border-radius: 50%; font-size: 12px; text-align: center; line-height: 21px; }
ul.notes { margin: 0; padding-left: 18px; color: var(--sub); font-size: 14px; }
.map { height: 160px; background: #e3ded2; border: 1px solid var(--line); margin-top: 6px; }
.map svg { width: 100%; height: 100%; display: block; }

/* 샘플 소개(첫 주소) */
.demo h1 { font-size: 24px; margin: 0 0 10px; }
.demo .row { display: block; text-decoration: none; padding: 18px 0; border-bottom: 1px solid var(--line); }
.demo .row b { font-size: 17px; display: block; }
.demo .row span { color: var(--sub); font-size: 13px; }
.demo .row::after { content: "→"; float: right; margin-top: -38px; font-size: 18px; }