/* 브랜드 서체는 실제 사이트가 쓰는 MaruBuri 를 그대로 담았다. */
    @font-face {
      font-family: "Maru Buri";
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url("/assets/fonts/MaruBuri-Bold.woff2") format("woff2");
    }
    :root {
      color-scheme: dark;
      --bg: #080302;
      --panel: rgba(255, 248, 239, 0.045);
      --ink: #fff8ef;
      --muted: rgba(255, 238, 210, 0.72);
      --dim: rgba(255, 238, 210, 0.52);
      --gold: #f2bf6b;
      --line: rgba(242, 191, 107, 0.18);
      --deep: #1a0705;
      --font-brand: "Maru Buri", "Noto Serif KR", serif;
      --font-body: "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      background:
        radial-gradient(circle at 50% 0, rgba(242, 191, 107, 0.12), transparent 24rem),
        linear-gradient(180deg, var(--deep), var(--bg) 34%, #000 100%);
      color: var(--ink);
      font-family: var(--font-body);
    }
    a { color: var(--gold); text-decoration: none; font-weight: 800; }
    a:hover { color: #ffd694; }
    h1, h2, h3 { margin: 0; letter-spacing: 0; }
    p { margin: 0; }

    .page { width: 100%; max-width: 820px; margin: 0 auto; padding: 20px 16px 44px; display: flex; flex-direction: column; gap: 22px; }
    .brand { display: inline-grid; gap: 3px; font-family: var(--font-brand); }
    .brand img { display: block; width: 118px; height: auto; }
    .home-link {
      display: inline-flex; align-items: center; min-height: 38px; padding: 0 12px;
      border: 1px solid var(--line); border-radius: 999px; color: var(--gold);
      font-size: 12px; font-weight: 800;
    }
    .eyebrow { color: var(--gold); font-size: 12px; font-weight: 900; }
    h1 { font-family: var(--font-brand); font-size: 38px; line-height: 1.08; }
    .lead { color: var(--ink); font-size: 17px; line-height: 1.72; word-break: keep-all; }
    .lead em { font-style: normal; color: var(--gold); }
    .sub { color: var(--muted); font-size: 14px; line-height: 1.75; word-break: keep-all; }

    .card {
      display: grid; gap: 10px; padding: 20px 16px;
      border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
    }
    .card h2 { color: #ffe4b8; font-size: 18px; line-height: 1.35; }
    .card h3 { color: #ffe4b8; font-size: 16px; line-height: 1.4; }
    .card p { color: var(--muted); font-size: 14px; line-height: 1.75; word-break: keep-all; }

    .cta {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      min-height: 52px; padding: 0 18px; border: none; border-radius: 999px;
      background: var(--gold); color: var(--deep);
      font-family: var(--font-body); font-size: 15px; font-weight: 800; cursor: pointer;
    }
    .cta-ghost {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      min-height: 52px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px;
      background: none; color: var(--gold);
      font-family: var(--font-body); font-size: 15px; font-weight: 800; cursor: pointer;
    }
    .cta-row {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px;
      background: none; color: var(--gold);
      font-family: var(--font-body); font-size: 14px; font-weight: 800; cursor: pointer;
      width: 100%; text-align: left;
    }

    /* 누르면 열리는 줄. 상담 카드와 단계, 질문이 같은 방식을 쓴다. */
    .open-head {
      display: flex; align-items: center; gap: 12px; width: 100%;
      min-height: 56px; padding: 16px; border: none; background: none;
      color: inherit; font-family: var(--font-body); text-align: left; cursor: pointer;
    }
    .open-body { padding: 0 16px 16px; display: grid; gap: 12px; border-top: 1px solid var(--line); }
    .shell { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow: hidden; }
    .shell-on { border-color: rgba(242, 191, 107, 0.42); }

    .chip {
      display: inline-flex; align-items: center; min-height: 32px; padding: 0 11px;
      border: 1px solid var(--line); border-radius: 999px;
      color: var(--muted); font-size: 12px; font-weight: 700;
    }
    .price { color: var(--gold); font-size: 14px; font-weight: 800; }
    .meta { color: var(--dim); font-size: 12px; font-weight: 700; }

    .footer { display: grid; gap: 8px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--dim); font-size: 12px; line-height: 1.65; }
    .footer strong { color: rgba(255, 248, 236, 0.82); }
    .nav-pills { display: flex; flex-wrap: wrap; gap: 8px; }
    .nav-pills a {
      display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px;
      border: 1px solid var(--line); border-radius: 999px; color: var(--muted);
      font-size: 13px; font-weight: 800;
    }
    .nav-pills .on { background: rgba(242, 191, 107, 0.12); color: var(--gold); }
  
html{scroll-behavior:smooth}body{font-size:16px}.page{max-width:1000px;padding:28px 24px 60px;gap:24px}
.sub,.card p,.open-body p{font-size:16px;line-height:1.85;color:var(--muted);word-break:keep-all;overflow-wrap:anywhere}
.lead{font-size:21px;max-width:820px}.summary-copy{display:grid;gap:6px;flex:1;min-width:0}.summary-end{display:grid;gap:10px;justify-items:end;flex-shrink:0}
.item-title{font-family:var(--font-brand);font-size:18px;line-height:1.5;color:#ffe4b8}
.open-head{list-style:none;padding:20px;min-height:72px}.open-head::-webkit-details-marker{display:none}
.open-body{padding:18px 20px 20px}.shell[open]{border-color:rgba(242,191,107,.42)}
.chips{display:flex;flex-wrap:wrap;gap:7px}.chevron{color:var(--gold);font-size:22px;flex-shrink:0}.shell[open]>.open-head .chevron{transform:rotate(180deg)}
.step-number{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;color:var(--gold)}
.meta,.footer{color:#c0aa8c}.cta:hover{background:#ffd694;color:var(--deep)}:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
#services{scroll-margin-top:24px}h1{font-size:48px}.price{white-space:nowrap}
@media(max-width:600px){.page{padding:16px 16px 40px;gap:20px}h1{font-size:36px}.lead{font-size:18px}.open-head{padding:16px;gap:10px}.item-title{font-size:16px}.summary-copy .sub{font-size:14px}.open-body{padding:16px}.price{font-size:13px}.sub,.card p,.open-body p{font-size:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Public introduction and FAQ: source design width and accessible media. */
.page{max-width:820px;padding:20px 16px 48px}
.brand-public{--line-poster:rgba(216,186,114,.24);--black-950:#090705;--cream-100:#fff8ef;--gold-600:#826632;--gold-300:#e6cb8b;--gold-200:#f6dfab;--gold-400:#d8ba72;--font-display:var(--font-brand)}
.brand-public .poster-rail{padding-inline:16px;scroll-padding-inline:16px}
.brand-public .poster:focus-visible{outline-offset:-5px}
.brand-public .poster em{color:#e2d8cb}.brand-public .poster .scope-line,.brand-public .poster .price-line>span{color:#c4b8a7}
.brand-public .poster strong{font-size:26px}
.brand-public .poster .badge{position:absolute;top:20px;left:20px;max-width:calc(100% - 40px);min-height:26px;display:inline-flex;align-items:center;padding:5px 9px;font-size:10px;line-height:14px;white-space:nowrap;background:rgba(8,3,2,.82);backdrop-filter:blur(8px)}
.service-gallery,.service-details{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;min-width:0}
.service-gallery>*{min-width:0}.brand-public .poster-rail{position:relative;max-width:100%}
.service-details.is-enhanced .service-detail:not(.is-selected){display:none}
.service-details.is-enhanced .service-detail>summary{display:none}
.service-details.is-enhanced .service-detail .open-body{border-top:0}
.service-details.is-enhanced .service-detail .open-body::before{content:attr(data-title);font-family:var(--font-brand)}
.service-detail{scroll-margin-top:24px}
.poster-controls{display:flex;justify-content:space-between;align-items:center;gap:12px}
.poster-controls button{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;color:var(--gold);background:var(--panel);font-size:20px;cursor:pointer}
.poster-controls p,.rail-hint{font-size:13px;color:#c0aa8c;line-height:1.6}
.brand-film{position:relative;isolation:isolate;min-height:460px;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#130b07}
.brand-film video{position:absolute;width:100%;height:100%;inset:0;object-fit:cover;object-position:center 36%}
.film-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,3,2,.94),rgba(8,3,2,.2) 75%),linear-gradient(90deg,rgba(8,3,2,.45),transparent)}
.film-copy{position:absolute;left:32px;right:24px;bottom:72px}.film-copy span{font-size:11px;letter-spacing:.2em;color:var(--gold)}.film-copy h2{font-family:var(--font-brand);font-size:36px;line-height:1.4;margin:14px 0}.film-copy p{font-size:15px;color:#e2d8cb}
.film-toggle{position:absolute;bottom:22px;left:32px;min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:#130b07;color:var(--gold);cursor:pointer}
.free-card{background:radial-gradient(ellipse at top right,#55361255,transparent 70%),var(--panel)}
.faq-art{width:100%;aspect-ratio:3/1;object-fit:cover;object-position:center 55%;border-radius:12px;border:1px solid var(--line)}
.faq-tabs{display:flex;gap:8px;flex-wrap:wrap}.faq-tabs a,.faq-pager a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;font-size:14px}
.faq-tabs a[aria-current=page]{background:#f2bf6b20;color:var(--gold);border-color:#f2bf6b66}
.faq-pager{display:flex;justify-content:space-between;gap:12px}
.faq-question{scroll-margin-top:20px}.faq-question h3{font:inherit;margin:0}
.faq-crumb{display:flex;gap:8px;flex-wrap:wrap;font-size:13px;color:#c0aa8c}
.faq-index{display:grid;grid-template-columns:1fr 1fr;gap:12px}.faq-index .card{align-content:start}
.faq-index a{line-height:1.6}.question-link{font-size:13px;text-decoration:underline}
@media(max-width:560px){.brand-film{min-height:410px}.film-copy{left:22px;bottom:72px}.film-copy h2{font-size:29px}.film-toggle{left:22px}.faq-index{grid-template-columns:1fr}.brand-public .poster-rail{--poster-w:min(300px,calc(100% - 64px))}.brand-public .poster{height:400px}.faq-art{aspect-ratio:2.2/1}}
[hidden]{display:none!important}