/* 요금 안내·기능 소개 공용. 납품 현장의 거래명세서 같은 종이·잉크 느낌 */
html { -webkit-text-size-adjust: 100%; }
body { word-break: keep-all; overflow-wrap: anywhere; }
body { margin: 0; }
:root {
  --paper: #f5f6f3;
  --sheet: #ffffff;
  --ink: #18202b;
  --muted: #5b6573;
  --line: #d9ddd6;
  --blue: #1e4fb8;
  --blue-soft: #e7edfa;
  --mark: #f4b400;
  --soon-bg: #fff4d6;
  --soon-fg: #7a5600;
  --font-body: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --font-num: ui-monospace, "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #12161c; --sheet: #1a2029; --ink: #e6e9ee; --muted: #9aa4b2; --line: #2c3440;
    --blue: #7ea2ff; --blue-soft: #1d2a47; --mark: #f4b400; --soon-bg: #3a2f10; --soon-fg: #f3d27a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #12161c; --sheet: #1a2029; --ink: #e6e9ee; --muted: #9aa4b2; --line: #2c3440;
  --blue: #7ea2ff; --blue-soft: #1d2a47; --mark: #f4b400; --soon-bg: #3a2f10; --soon-fg: #f3d27a;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  background: var(--paper); color: var(--ink); font-family: var(--font-body);
  font-size: 15px; line-height: 1.6;
}
.wrap {
  max-width: 920px; margin: 0 auto;
  padding-block: 32px 56px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: grid; gap: 28px;
}
header { display: grid; gap: 8px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--blue); letter-spacing: .02em; }
.bars { display: inline-flex; gap: 2px; height: 18px; align-items: stretch; }
.bars i { display: block; background: currentColor; }
h1 { font-size: 28px; line-height: 1.3; margin: 0; text-wrap: balance; }
.lead { margin: 0; color: var(--muted); max-width: 62ch; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-weight: 500; }
h2 { font-size: 19px; margin: 0 0 12px; text-wrap: balance; }
section { min-width: 0; }
.sheet { background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; color: var(--muted); font-weight: 500; letter-spacing: .04em; white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.total td { font-weight: 700; background: var(--blue-soft); }
.name { font-weight: 700; white-space: nowrap; }
.req { color: var(--muted); font-size: 13px; }
.bundles { display: grid; gap: 14px; }
.bundle { padding: 18px 18px 16px; display: grid; gap: 10px; }
.bundle-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.bundle-head h3 { margin: 0; font-size: 17px; }
.price { font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--blue); font-weight: 500; white-space: nowrap; }
.price small { color: var(--muted); font-family: var(--font-body); font-weight: 400; }
.who { margin: 0; color: var(--muted); font-size: 14px; }
ul.feat { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
ul.feat li { display: grid; grid-template-columns: 7px 1fr; gap: 10px; align-items: start; }
ul.feat li::before { content: ""; width: 7px; height: 7px; margin-top: 9px; background: var(--ink); border-radius: 1px; }
ul.feat b { font-weight: 500; }
.soon { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 4px; background: var(--soon-bg); color: var(--soon-fg); margin-left: 4px; vertical-align: 1px; white-space: nowrap; }
.first { border-top: 4px solid var(--mark); }
.examples { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ex { padding: 16px; display: grid; gap: 6px; align-content: start; }
.ex h3 { margin: 0; font-size: 15px; }
.ex p { margin: 0; color: var(--muted); font-size: 14px; }
.ex .price { font-size: 18px; }
.notes { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--muted); }
footer { color: var(--muted); font-size: 13px; }
@media (max-width: 520px) { h1 { font-size: 23px; } th, td { padding: 9px 10px; } }
.brand { text-decoration: none; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn { display: inline-block; padding: 10px 18px; border-radius: 8px; background: var(--blue); color: #fff; font-weight: 700; text-decoration: none; }
.btn.ghost { background: var(--sheet); color: var(--blue); border: 1px solid var(--line); }
.steps { margin: 0; padding: 18px 18px 18px 38px; display: grid; gap: 8px; }
.prose { padding: 18px; display: grid; gap: 10px; }
.prose p { margin: 0; }
.faq { padding: 6px 18px; }
.faq details { border-bottom: 1px solid var(--line); padding: 12px 0; }
.faq details:last-child { border-bottom: none; }
.faq summary { font-weight: 700; cursor: pointer; }
.faq p { margin: 8px 0 0; color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.cards a { color: inherit; text-decoration: none; }
.cards .ex:hover { border-color: var(--blue); }
footer a { color: var(--muted); }
footer p { margin: 4px 0; }
.figure { margin: 0 0 12px; }
.figure img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); background: #fff; }