/* 코리아왁싱 — 생성 파일. 고치지 말 것.
   원본: preview/style.css + preview4/style.css
   `python3 build-live.py` 로 다시 만든다. */

/* ═══════════════════════════════════════════════════════
   KOREA WAXING — 리뉴얼 시안
   따뜻한 아이보리 · 더스티 로즈 · 허니 골드
   ═══════════════════════════════════════════════════════ */
:root{
  --ivory:#FDF7F2;
  --cream:#F8EFE7;
  --blush:#F9E9E5;
  --rose:#C08497;
  --rose-deep:#A96B7E;
  --rose-pale:#EFD9DC;
  --honey:#C1974C;
  --honey-pale:#EBD9BB;
  --espresso:#3B2B26;
  --ink:#54423B;
  --muted:#8D7A72;
  --line:#EADCD1;
  --navy:#2F4257;
  --navy-pale:#E9EFF5;

  /* 본 사이트와 같은 파스텔 왁스 팔레트 (드립용) */
  --wax-blush:#F6C9CF;--wax-peach:#F9D8BE;--wax-butter:#F7E6A8;--wax-mint:#C4E3D2;
  --wax-sky:#C7DCEF;--wax-lilac:#DCCFEC;--wax-rose:#EFB3BE;

  --serif:'Playfair Display',serif;
  --script:'Dancing Script',cursive;
  --kr:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;

  --pad:clamp(20px,5vw,72px);
  --gap:clamp(64px,8vw,112px);
  --r:20px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--kr);background:var(--ivory);color:var(--ink);font-size:15.5px;line-height:1.78;overflow-x:hidden;word-break:keep-all;overflow-wrap:break-word}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
::selection{background:var(--rose-pale)}

/* 시안 표시 띠 */
.draft{position:relative;z-index:200;background:var(--espresso);color:#fff;
  font-size:11.5px;letter-spacing:.14em;text-align:center;padding:8px 14px;line-height:1.5}
.draft a{border-bottom:1px solid rgba(255,255,255,.45)}

/* 타이포 */
.serif{font-family:var(--serif)}
h1,h2,h3{font-family:var(--serif);font-weight:500;color:var(--espresso);line-height:1.2;letter-spacing:-.005em}
h2{font-size:clamp(28px,4.2vw,46px)}
h3{font-size:clamp(20px,2.4vw,28px)}
.script{font-family:var(--script);color:var(--rose);font-weight:600}
.label{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:500}
.lede{color:var(--muted);max-width:60ch}
p{max-width:64ch}

/* 헤더 */
header{position:sticky;top:0;z-index:100;background:var(--blush);transition:background .35s,box-shadow .35s}
header.solid{background:rgba(253,247,242,.94);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px var(--pad)}
.logo{font-family:var(--serif);font-size:20px;letter-spacing:.16em;color:var(--espresso);white-space:nowrap}
.logo small{display:block;font-family:var(--kr);font-size:9.5px;letter-spacing:.3em;color:var(--honey);margin-top:1px}
nav{display:flex;gap:clamp(14px,1.9vw,28px)}
nav a{font-size:13.5px;color:var(--ink);padding:4px 0;border-bottom:1px solid transparent;white-space:nowrap}
nav a:hover{border-bottom-color:var(--rose)}
@media(max-width:1000px){nav{display:none}}

/* 버튼 */
.btn{display:inline-flex;align-items:center;gap:9px;border-radius:999px;white-space:nowrap;
  font-size:14px;font-weight:500;padding:14px 28px;transition:.25s}
.btn-rose{background:var(--rose);color:#fff}
.btn-rose:hover{background:var(--rose-deep)}
.btn-ghost{border:1px solid var(--rose);color:var(--rose-deep)}
.btn-ghost:hover{background:var(--rose);color:#fff}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:#22303F}
.btn svg{width:16px;height:16px;flex:none}
.btn-sm{padding:11px 22px;font-size:13px}

/* 섹션 */
section{padding:var(--gap) var(--pad)}
.wrap{max-width:1180px;margin:0 auto}
.sec-top{text-align:center;max-width:720px;margin:0 auto clamp(38px,5vw,60px)}
.sec-top .label{display:block;margin-bottom:14px}
.sec-top p{margin:16px auto 0;color:var(--muted)}
.rule{display:flex;align-items:center;justify-content:center;gap:12px;margin:16px 0}
.rule i{height:1px;width:52px;background:var(--line)}
.rule svg{width:13px;height:13px;color:var(--rose)}

/* ── 히어로 ─────────────────────────────── */
.hero{padding-top:clamp(160px,21vw,290px);background:linear-gradient(170deg,var(--blush) 0%,var(--ivory) 58%)}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,64px);align-items:center;max-width:1180px;margin:0 auto}
.hero .script{font-size:clamp(26px,3.4vw,40px);display:block;line-height:1.1}
.hero h1{font-size:clamp(36px,5.6vw,70px);line-height:1.12;margin:4px 0 8px}
.hero h1 em{font-style:italic;color:var(--rose-deep)}
.hero .sub{font-size:16px;color:var(--muted);margin-top:18px;max-width:44ch}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero-photo{position:relative;border-radius:260px 260px var(--r) var(--r);overflow:hidden;aspect-ratio:4/5;
  box-shadow:0 24px 60px -30px rgba(59,43,38,.4)}
.hero-badge{position:absolute;right:clamp(-6px,1vw,10px);bottom:26px;width:clamp(112px,13vw,152px);aspect-ratio:1;
  border-radius:50%;background:var(--rose);color:#fff;display:grid;place-content:center;text-align:center;
  font-size:11.5px;line-height:1.5;letter-spacing:.06em;padding:12px}
.hero-badge b{display:block;font-family:var(--script);font-size:22px;font-weight:600;margin-top:2px}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-photo{aspect-ratio:1;border-radius:200px 200px var(--r) var(--r)}}

/* ── 신뢰 배지 줄 ───────────────────────── */
.trust{background:var(--cream);padding:clamp(26px,3.4vw,40px) var(--pad)}
.trust-in{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,30px);max-width:1180px;margin:0 auto}
.trust-item{display:flex;align-items:center;gap:13px;justify-content:center}
.trust-item .ic{width:42px;height:42px;flex:none;border-radius:50%;background:var(--rose-pale);
  display:grid;place-content:center;color:var(--rose-deep)}
.trust-item .ic svg{width:20px;height:20px}
.trust-item b{display:block;font-size:13.5px;font-weight:600;color:var(--espresso)}
.trust-item span{font-size:12px;color:var(--muted)}
@media(max-width:820px){.trust-in{grid-template-columns:repeat(2,1fr)}}

/* ── 3분류 서비스 ───────────────────────── */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,34px)}
.svc-card{background:#fff;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  transition:transform .35s,box-shadow .35s}
.svc-card:hover{transform:translateY(-5px);box-shadow:0 18px 44px -26px rgba(59,43,38,.36)}
.svc-card figure{aspect-ratio:16/11;overflow:hidden}
.svc-card img{transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.svc-card:hover img{transform:scale(1.06)}
.svc-body{padding:clamp(20px,2.4vw,30px);text-align:center}
.svc-ic{width:66px;height:66px;margin:-52px auto 14px;position:relative;border-radius:50%;
  background:var(--blush);border:4px solid #fff;display:grid;place-content:center;color:var(--rose-deep)}
.svc-ic svg{width:32px;height:32px}
.svc-body h3{font-size:20px;margin-bottom:6px}
.svc-body p{font-size:13.8px;color:var(--muted);margin:0 auto}
.svc-list{list-style:none;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.svc-list li{font-size:12px;color:var(--muted);background:var(--ivory);border-radius:999px;padding:4px 12px}
@media(max-width:880px){.svc{grid-template-columns:1fr;max-width:440px;margin:0 auto}}

/* ── 비교 2단 ───────────────────────────── */
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.vs-col{padding:clamp(24px,3vw,40px)}
.vs-col.b{background:var(--cream)}
.vs-mid{display:grid;place-content:center;min-width:56px;background:var(--rose);color:#fff;
  font-family:var(--serif);font-style:italic;font-size:18px;letter-spacing:.02em}
.vs-head{display:flex;align-items:center;gap:13px;margin-bottom:8px}
.vs-head .ic{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-content:center}
.vs-head .ic.h{background:var(--honey-pale);color:#8A6A28}
.vs-head .ic.s{background:var(--rose-pale);color:var(--rose-deep)}
.vs-head .ic svg{width:22px;height:22px}
.vs-head h3{font-size:21px}
.vs-col>p{font-size:13.8px;color:var(--muted);margin-bottom:16px}
.vs-col ul{list-style:none;display:grid;gap:11px}
.vs-col li{display:flex;gap:11px;font-size:13.8px;line-height:1.6}
.vs-col li svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--rose)}
.vs-col li b{font-weight:600;color:var(--espresso);display:block}
.vs-col li span{color:var(--muted)}
@media(max-width:880px){.vs{grid-template-columns:1fr}
  .vs-mid{padding:9px;font-size:15px}}

/* ── 비키니 종류 다이어그램 ─────────────── */
.types{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.8vw,22px)}
.type{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,2.2vw,26px);text-align:center}
.type h4{font-family:var(--serif);font-size:18px;color:var(--espresso);font-weight:600;margin-bottom:3px}
.type .en{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--honey);display:block;margin-bottom:14px}
.type svg.fig{width:100%;max-width:154px;height:auto;margin:2px auto 16px;display:block}
.type p{font-size:12.8px;color:var(--muted);line-height:1.65}
.type .min{display:inline-flex;align-items:center;gap:6px;margin-top:14px;background:var(--blush);
  border-radius:999px;padding:5px 14px;font-size:12px;color:var(--rose-deep);font-weight:600}
.type .min svg{width:13px;height:13px}
@media(max-width:900px){.types{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.types{grid-template-columns:1fr;max-width:320px;margin:0 auto}}

/* ── 가격 ───────────────────────────────── */
.tabs{display:flex;justify-content:center;gap:10px;margin-bottom:30px}
.tabs button{font-family:var(--kr);font-size:14px;font-weight:500;border:1px solid var(--line);
  background:#fff;color:var(--muted);border-radius:999px;padding:11px 30px;cursor:pointer;transition:.25s}
.tabs button[aria-selected=true]{background:var(--rose);border-color:var(--rose);color:#fff}
.menu{display:none}.menu.on{display:block}
.pgroup{margin-bottom:30px}
.pgroup h4{font-family:var(--serif);font-size:17px;color:var(--espresso);font-weight:600;
  display:flex;align-items:center;gap:12px;margin-bottom:14px}
.pgroup h4::after{content:'';flex:1;height:1px;background:var(--line)}
.prows{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,3vw,48px)}
.prow{display:flex;align-items:baseline;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line)}
.prow .nm{font-size:14.5px;color:var(--espresso)}
.prow .nm small{display:block;font-size:11.8px;color:var(--muted)}
.prow .dot{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px)}
.prow .pr{font-family:var(--serif);font-size:15.5px;color:var(--rose-deep);white-space:nowrap;font-weight:600}
@media(max-width:820px){.prows{grid-template-columns:1fr}}
.pnote{background:var(--cream);border-radius:var(--r);padding:18px 24px;font-size:13px;color:var(--muted);margin-top:8px}

/* ── 남성 ───────────────────────────────── */
.men{background:var(--navy-pale)}
.men h2,.men h3{color:var(--navy)}
.men .label{color:#6E8299}
.men-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(26px,4vw,56px);align-items:center}
.men-photo{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}
.men-parts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px}
.men-part{background:#fff;border-radius:14px;padding:14px 8px;text-align:center}
.men-part .ic{width:34px;height:34px;margin:0 auto 7px;border-radius:50%;background:var(--navy-pale);
  display:grid;place-content:center;color:var(--navy)}
.men-part .ic svg{width:18px;height:18px}
.men-part span{font-size:12px;color:var(--navy);font-weight:500}
@media(max-width:880px){.men-grid{grid-template-columns:1fr}.men-parts{grid-template-columns:repeat(4,1fr)}}
@media(max-width:520px){.men-parts{grid-template-columns:repeat(2,1fr)}}

/* ── 케어 팁 ────────────────────────────── */
.tips{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px)}
.tip{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.4vw,28px);text-align:center}
.tip .ic{width:54px;height:54px;margin:0 auto 14px;border-radius:50%;background:var(--blush);
  display:grid;place-content:center;color:var(--rose-deep)}
.tip .ic svg{width:26px;height:26px}
.tip b{display:block;font-size:14px;color:var(--espresso);margin-bottom:6px;font-weight:600}
.tip span{font-size:12.8px;color:var(--muted);line-height:1.65}
@media(max-width:900px){.tips{grid-template-columns:repeat(2,1fr)}}

/* 6장짜리 카드 줄 — 4열이면 4+2 로 한 줄이 남아서 3열로 짠다 */
.tips.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.tips.three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tips.three{grid-template-columns:1fr;max-width:360px;margin:0 auto}}

/* 왁스 페이지 도입부 — 하위 페이지는 sec-top 을 걷어내므로 전용 블록을 쓴다 */
.waxintro{text-align:center;max-width:780px;margin:0 auto clamp(30px,4vw,48px)}
.waxintro .label{display:block;margin-bottom:14px}
.waxintro p{margin:16px auto 0;color:var(--muted)}

/* 왁스 설명 글상자 */
.waxnote{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,3vw,36px);margin-top:clamp(18px,2.4vw,30px)}
.waxnote h3{font-size:clamp(19px,2.3vw,25px);margin-bottom:12px}
.waxnote p{color:var(--ink);max-width:none}
.waxnote p + p{margin-top:12px}
.waxnote p:last-child{color:var(--espresso)}

/* ── FAQ 카드 ───────────────────────────── */
.faqwrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,54px);align-items:center}
.faq-photo{border-radius:var(--r);overflow:hidden;aspect-ratio:3/4}
.faqs details{background:#fff;border:1px solid var(--line);border-radius:16px;margin-bottom:10px;overflow:hidden}
.faqs summary{list-style:none;cursor:pointer;padding:17px 22px;display:flex;align-items:center;gap:12px;
  font-size:15px;color:var(--espresso);font-weight:500}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary::after{content:'+';margin-left:auto;color:var(--rose);font-size:19px;font-family:var(--serif);transition:.3s}
.faqs details[open] summary::after{transform:rotate(45deg)}
.faqs .a{padding:0 22px 20px 22px;font-size:13.8px;color:var(--muted)}
@media(max-width:880px){.faqwrap{grid-template-columns:1fr}.faq-photo{aspect-ratio:16/10}}

/* ── 갤러리 ─────────────────────────────── */
.gal{display:grid;grid-auto-flow:dense;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,16px)}
.gal figure{border-radius:16px;overflow:hidden;aspect-ratio:1}
.gal figure:nth-child(1){grid-row:span 2;aspect-ratio:1/2.06}
/* 사진 11장 + 세로 2칸 1개 = 12칸 → 4열 3줄이 정확히 채워진다.
   예전엔 6번도 세로 2칸이라 13칸이 되어 마지막 줄에 빈칸이 남았다 (2026-09-09). */
.gal img{transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.gal figure:hover img{transform:scale(1.07)}
/* 사진 11장을 화면 폭마다 다르게 배치해 빈칸 없이 채운다 (2026-09-09)
   4열: 1번이 세로 2칸 → 12칸 = 3줄
   3열: 1번이 세로 2칸 → 12칸 = 4줄
   2열: 1번이 가로 2칸 → 12칸 = 6줄   */
@media(min-width:761px) and (max-width:1100px){
  .gal{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal figure:nth-child(1){grid-row:auto;grid-column:span 2;aspect-ratio:16/10}
}

/* ── 예약 배너 ──────────────────────────── */
.book{background:linear-gradient(135deg,var(--rose) 0%,var(--rose-deep) 100%);color:#fff;text-align:center;
  border-radius:var(--r);padding:clamp(38px,5.5vw,72px) clamp(20px,4vw,56px)}
.book h2{color:#fff}
.book .script{color:var(--rose-pale);font-size:clamp(24px,3vw,34px);display:block}
.book p{color:rgba(255,255,255,.9);margin:14px auto 0}
.book .btn{margin-top:28px;background:#fff;color:var(--rose-deep)}
.book .btn:hover{background:var(--ivory)}
.book .meta{display:flex;gap:10px 30px;justify-content:center;flex-wrap:wrap;margin-top:26px;
  font-size:13px;color:rgba(255,255,255,.88)}
.book .meta span{display:inline-flex;align-items:center;gap:7px}
.book .meta svg{width:15px;height:15px}

/* 얇은 예약 띠 */
.strip{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;gap:14px 26px;flex-wrap:wrap;
  padding:clamp(18px,2.4vw,26px) var(--pad);text-align:center}
.strip p{font-size:15px;color:var(--espresso);margin:0}
.strip .script{font-size:22px}

/* ── 푸터 ───────────────────────────────── */
footer{background:var(--espresso);color:#EADCD1;padding:clamp(44px,6vw,72px) var(--pad) 32px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(24px,4vw,56px);max-width:1180px;margin:0 auto}
.fgrid .logo{color:#fff}
.fgrid .logo small{color:var(--honey-pale)}
.fgrid p{font-size:13px;color:#BFA99C;margin-top:14px;max-width:38ch}
.fgrid h5{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--honey-pale);margin-bottom:13px;font-weight:600}
.fgrid ul{list-style:none}
.fgrid li{font-size:13px;padding:3px 0;color:#BFA99C}
.fgrid li a:hover{color:#fff}
/* 검색어 줄 — 본 사이트 .seoline 과 같은 역할.
   숨기지 않는다. 숨김 텍스트는 검색엔진이 스팸으로 본다. */
.fkw{max-width:1180px;margin:30px auto 0;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.13);
  font-size:11px;line-height:1.95;color:#9C877B;letter-spacing:.005em}
.fbot{max-width:1180px;margin:22px auto 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:11.5px;color:#9C877B}
@media(max-width:760px){.fgrid{grid-template-columns:1fr}}

/* 리빌 */
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}}

/* ═══ 멀티페이지 추가 스타일 ═══════════════════════════ */

/* 페이지 상단 배너 */
.phero{background:linear-gradient(170deg,var(--blush) 0%,var(--ivory) 70%);
  padding:clamp(34px,5vw,58px) var(--pad) clamp(40px,5.5vw,66px);text-align:center}
.phero .crumb{font-size:12.5px;color:var(--muted);margin-bottom:16px}
.phero .crumb a:hover{color:var(--rose-deep)}
.phero .crumb span{margin:0 7px;opacity:.5}
.phero .script{font-size:clamp(21px,2.6vw,30px);display:block;line-height:1.2}
.phero h1{font-size:clamp(30px,4.6vw,52px);margin:2px 0 0;line-height:1.16}
.phero p{margin:16px auto 0;color:var(--muted);max-width:56ch}
.phero .rule{margin-top:18px}

/* 현재 페이지 표시 */
nav a.here{color:var(--rose-deep);border-bottom-color:var(--rose)}

/* 모바일 메뉴 */
.menubtn{display:none;background:none;border:0;cursor:pointer;color:var(--espresso);padding:6px}
.menubtn svg{width:24px;height:24px}
.mnav{display:none;background:var(--ivory);border-top:1px solid var(--line);padding:8px var(--pad) 16px}
.mnav.open{display:block}
.mnav a{display:block;padding:11px 0;font-size:14.5px;border-bottom:1px solid var(--line)}
.mnav a:last-child{border-bottom:0}
.mnav a.here{color:var(--rose-deep);font-weight:600}
@media(max-width:1000px){.menubtn{display:block}}

/* 다음 페이지로 이어가기 */
.next{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px)}
.nextcard{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,2.4vw,26px);transition:transform .3s,box-shadow .3s}
.nextcard:hover{transform:translateY(-4px);box-shadow:0 16px 38px -24px rgba(59,43,38,.34)}
.nextcard .label{display:block;margin-bottom:9px}
.nextcard b{display:block;font-family:var(--serif);font-size:19px;color:var(--espresso);
  font-weight:600;margin-bottom:6px}
.nextcard span{font-size:13.2px;color:var(--muted)}
.nextcard > span:not(.label):not(.go){display:block}
.nextcard .go{display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-size:13px;color:var(--rose-deep);font-weight:500}
.nextcard .go svg{width:15px;height:15px;transition:transform .25s}
.nextcard:hover .go svg{transform:translateX(4px)}
@media(max-width:820px){.next{grid-template-columns:1fr}}

/* 서비스 카드가 링크일 때 */
a.svc-card{display:block;color:inherit}

/* ═══ 흘러내리는 왁스 드립 — 본 사이트 히어로에서 이식 (2026-09-07) ═══ */
.hero{position:relative;overflow:hidden}
.hero-grid{position:relative;z-index:3}
.drips{position:absolute;inset:0 0 auto 0;height:clamp(140px,22vw,290px);display:flex;pointer-events:none;z-index:2}
.drip{position:relative;flex:1 1 0;transform-origin:top}
.drip i{transform-origin:top}
.drip i{
  position:absolute;left:-1px;right:-1px;top:0;display:block;
  border-radius:0 0 52% 48% / 0 0 clamp(22px,3.2vw,48px) clamp(22px,3.2vw,48px);
  animation:ooze 9s ease-in-out infinite alternate;
}
/* 흘러내림이 좌우로 치우치게 — 실제 페인트처럼 */
.drip:nth-child(3n+1) i{border-radius:0 0 62% 38% / 0 0 clamp(30px,4.2vw,64px) clamp(14px,2vw,30px)}
.drip:nth-child(3n+2) i{border-radius:0 0 40% 60% / 0 0 clamp(15px,2.1vw,32px) clamp(32px,4.4vw,68px)}
.drip:nth-child(3n+3) i{border-radius:0 0 50% 50% / 0 0 clamp(24px,3.4vw,52px) clamp(24px,3.4vw,52px)}
.drip b{
  position:absolute;left:50%;width:clamp(10px,1.5vw,18px);height:clamp(13px,2vw,24px);
  margin-left:calc(clamp(10px,1.5vw,18px) / -2);
  border-radius:50% 50% 46% 46% / 40% 40% 60% 60%;
  animation:fall 7s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes ooze{from{transform:scaleY(.94)}to{transform:scaleY(1.06)}}
@keyframes fall{
  0%,55%{transform:translateY(0) scale(.6);opacity:0}
  62%{opacity:1;transform:translateY(6px) scale(1)}
  100%{transform:translateY(190px) scale(.75);opacity:0}
}
@media(prefers-reduced-motion:reduce){.drip i,.drip b{animation:none}.drip b{opacity:0}}

/* ═══ 이벤트 팝업 (홈) ═══════════════════════════════ */
.popup{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;
  padding:18px;background:rgba(59,43,38,.55);backdrop-filter:blur(3px)}
.popup.on{display:flex}
/* 포스터(720x1280)가 잘리지도 남지도 않게 — 남는 높이에서 너비를 역산한다.
   max-height 로 자르면 요소 비율이 어긋나 좌우가 잘린다 (2026-09-08). */
.popup-box{position:relative;--poster:.5625;--acts:104px;
  width:min(420px,100%,calc((100vh - 36px - var(--acts)) * var(--poster)));
  display:flex;flex-direction:column;
  background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,0,0,.5)}
@supports (height:100dvh){.popup-box{width:min(420px,100%,calc((100dvh - 36px - var(--acts)) * var(--poster)))}}
.popup-box img{width:100%;height:auto;aspect-ratio:720/1280;object-fit:contain;background:#3B2B26}
.popup-box a.img{display:block;line-height:0}
.popup-actions{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:12px 14px;
  border-top:1px solid var(--line);background:var(--ivory)}
.popup-actions .btn{justify-content:center}
.popup-dismiss{font-size:12.5px;color:var(--muted);background:none;border:0;cursor:pointer;padding:8px 6px;
  font-family:var(--kr);white-space:nowrap}
.popup-dismiss:hover{color:var(--espresso)}
.popup-x{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.9);color:var(--espresso);font-size:20px;line-height:34px;text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.25)}
.popup-x:hover{background:#fff}
@media(max-width:440px){
  .popup{padding:10px}
  .popup-box{width:min(100%,calc((100vh - 20px - var(--acts)) * var(--poster)))}
  .popup-actions{grid-template-columns:1fr;gap:6px;padding:10px 12px}
  .popup-dismiss{padding:4px 6px}
}
@supports (height:100dvh){@media(max-width:440px){
  .popup-box{width:min(100%,calc((100dvh - 20px - var(--acts)) * var(--poster)))}
}}

/* 예약 배너 — 네이버 / 카카오 / 전화 3버튼 */
.book-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.book .book-btns .btn{margin-top:0}
.btn-kakao{background:#FEE500;color:#3B1E1E}
.btn-kakao:hover{background:#F5DC00;color:#3B1E1E}
.btn-ghost-light{border:1px solid rgba(255,255,255,.75);color:#fff}
.btn-ghost-light:hover{background:#fff;color:var(--rose-deep)}

/* 헤더 가로 넘침 방지 — 좁은 화면에서 로고+버튼이 375px 를 넘겨
   페이지 전체에 가로 스크롤이 생기고, 그 폭에 맞춰 팝업까지 밀렸다 (2026-09-08) */
.bar{flex-wrap:nowrap;min-width:0}
.bar > a.logo{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media(max-width:520px){
  .bar{gap:10px;padding-left:16px;padding-right:16px}
  .logo{font-size:17px;letter-spacing:.1em}
  .logo small{font-size:8.5px;letter-spacing:.18em}
  .bar .btn-sm{padding:9px 13px;font-size:12px}
  .bar .btn-sm svg{display:none}
}
@media(max-width:380px){
  .bar .btn-sm{padding:8px 10px;font-size:11.5px}
  .logo{font-size:15.5px}
}

/* ═══ 처음이신가요 / 심야 / 위생 / 계산기 (2026-09-08) ═══ */

/* ── 처음이신가요 ── */
.firstgrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,4vw,56px);align-items:start}
/* 답변이 길어져 사진이 짧아 보이므로 위에 고정한다 (2026-09-09) */
.firstgrid > div:first-child{position:sticky;top:96px}
.first-photo{aspect-ratio:3/4}
.first-photo{border-radius:var(--r);overflow:hidden}
.qa{display:grid;gap:12px}
.qa-item{background:#fff;border:1px solid var(--line);border-radius:16px;padding:clamp(16px,2vw,22px)}
.qa-item dt{display:flex;gap:11px;align-items:baseline;font-size:15.5px;font-weight:600;color:var(--espresso);margin-bottom:7px}
.qa-q{flex:none;width:24px;height:24px;border-radius:50%;background:var(--blush);color:var(--rose-deep);
  font-family:var(--serif);font-size:12px;display:grid;place-content:center;transform:translateY(2px)}
.qa-item dd{font-size:13.8px;color:var(--muted);padding-left:33px;line-height:1.72}
.qa-more{margin-top:14px;font-size:13px;color:var(--muted);text-align:center}
@media(max-width:880px){.firstgrid{grid-template-columns:1fr}
  .firstgrid > div:first-child{position:static}
  .first-photo{aspect-ratio:16/10}}

/* ── 심야 ── */
.night{background:linear-gradient(160deg,#3B2B26 0%,#54423B 100%);color:#EADCD1}
.night h2,.night .nf-big{color:#fff}
.night .label{color:var(--honey-pale)}
.night .lede{color:#C9B4A6}
.night-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,60px);align-items:center}
.nf{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid rgba(255,255,255,.16)}
.nf-big{display:block;font-family:var(--serif);font-size:clamp(30px,4.4vw,48px);letter-spacing:.01em;line-height:1.1}
.nf-big em{font-style:normal;color:var(--honey-pale);margin:0 4px}
.nf-sub{display:block;font-size:13px;color:#C9B4A6;margin-top:8px}
.nf-list{list-style:none;display:grid;gap:14px}
.nf-list li{display:flex;gap:12px;align-items:flex-start}
.nf-list svg{width:19px;height:19px;flex:none;margin-top:3px;color:var(--honey-pale)}
.nf-list b{display:block;font-size:14.5px;font-weight:600;color:#fff}
.nf-list span span,.nf-list li>span>*{}
.nf-list li>span{font-size:12.8px;color:#C9B4A6;line-height:1.6}
@media(max-width:880px){.night-in{grid-template-columns:1fr}}

/* ── 위생 ── */
.hygiene{background:var(--cream)}
.hyg{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px)}
.hyg-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,3vw,34px);overflow:hidden}
.hyg-no{position:absolute;right:16px;top:10px;font-family:var(--serif);font-size:44px;
  color:var(--blush);line-height:1;user-select:none}
.hyg-ic{width:52px;height:52px;border-radius:50%;background:var(--blush);color:var(--rose-deep);
  display:grid;place-content:center;margin-bottom:16px}
.hyg-ic svg{width:26px;height:26px}
.hyg-card h3{font-size:19px;margin-bottom:8px}
.hyg-card p{font-size:13.6px;color:var(--muted);line-height:1.72}
@media(max-width:880px){.hyg{grid-template-columns:1fr;max-width:460px;margin:0 auto}}

/* ── 부위 담아보기 ── */
.calc{background:var(--ivory)}
.calc-tabs{display:flex;justify-content:center;gap:10px;margin-bottom:26px}
.calc-tabs button{font-family:var(--kr);font-size:14px;font-weight:500;border:1px solid var(--line);
  background:#fff;color:var(--muted);border-radius:999px;padding:10px 28px;cursor:pointer;transition:.25s}
.calc-tabs button[aria-selected=true]{background:var(--rose);border-color:var(--rose);color:#fff}
.calc-menu{display:none}.calc-menu.on{display:block}
.calc-group{margin-bottom:22px}
.calc-group h4{font-family:var(--serif);font-size:16px;color:var(--espresso);font-weight:600;
  display:flex;align-items:center;gap:12px;margin-bottom:12px}
.calc-group h4::after{content:'';flex:1;height:1px;background:var(--line)}
.calc-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.calc-item{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:11px 14px;cursor:pointer;transition:border-color .2s,background .2s}
.calc-item:hover{border-color:var(--rose-pale)}
.calc-item input{accent-color:var(--rose);width:17px;height:17px;flex:none;cursor:pointer}
.calc-item:has(input:checked){background:var(--blush);border-color:var(--rose)}
.ci-nm{flex:1;font-size:14px;color:var(--espresso)}
.ci-pr{font-family:var(--serif);font-size:14px;color:var(--rose-deep);font-weight:600;white-space:nowrap}
.calc-bar{position:sticky;bottom:12px;z-index:20;margin-top:22px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:12px 14px 12px 24px;
  box-shadow:0 14px 34px -18px rgba(59,43,38,.34);transition:border-color .25s}
.calc-bar.has{border-color:var(--rose)}
.cb-left{font-size:14px;color:var(--muted)}
.cb-left b{color:var(--espresso);font-weight:600}
.cb-left strong{font-family:var(--serif);font-size:19px;color:var(--rose-deep);margin-left:2px}
.cb-vat{font-size:11.5px;color:var(--muted);margin-left:8px}
.cb-right{display:flex;gap:8px;flex-wrap:wrap}
.calc-note{max-width:none;margin-top:14px;font-size:12.5px;color:var(--muted);text-align:center}
@media(max-width:560px){
  .calc-bar{border-radius:18px;padding:14px 16px;justify-content:center;text-align:center}
  .cb-right{width:100%;justify-content:center}
  .calc-items{grid-template-columns:1fr}
}

/* ═══ 심야 강조 (2026-09-09) ═══ */
.hero-night{display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;
  background:var(--espresso);color:#F6E7D8;border-radius:999px;
  padding:9px 18px 9px 14px;font-size:13.5px;font-weight:500;letter-spacing:.01em}
.hero-night b{color:var(--honey-pale);font-weight:700}
.hero-night svg{width:15px;height:15px;transition:transform .25s}
.hero-night:hover svg{transform:translateX(3px)}
.hn-dot{width:8px;height:8px;border-radius:50%;background:#8FD6A8;flex:none;
  box-shadow:0 0 0 0 rgba(143,214,168,.7);animation:hnpulse 2.2s infinite}
@keyframes hnpulse{70%{box-shadow:0 0 0 7px rgba(143,214,168,0)}100%{box-shadow:0 0 0 0 rgba(143,214,168,0)}}
@media(prefers-reduced-motion:reduce){.hn-dot{animation:none}}
.hero-badge-night{background:var(--espresso);color:#F6E7D8;font-size:12.5px}
.hero-badge-night b{font-family:var(--serif);font-size:26px;color:var(--honey-pale);
  display:block;margin-top:2px;font-weight:600}
.trust-item:first-child .ic{background:var(--espresso);color:var(--honey-pale)}

/* ═══ 계산기 — 모바일 컴팩트 (한 화면에 최대한) ═══ */
@media(max-width:560px){
  .calc{padding-top:clamp(34px,7vw,50px);padding-bottom:clamp(34px,7vw,50px)}
  .calc .sec-top{margin-bottom:18px}
  .calc .sec-top h2{font-size:26px}
  .calc .sec-top p{font-size:13px;margin-top:8px}
  .calc-tabs{margin-bottom:14px;gap:8px}
  .calc-tabs button{padding:8px 22px;font-size:13px}

  /* 그룹을 접었다 펴기 — 기본은 첫 그룹만 열림 */
  .calc-group{margin-bottom:10px;border:1px solid var(--line);border-radius:14px;
    background:#fff;overflow:hidden}
  .calc-group h4{margin:0;padding:13px 15px;font-size:14.5px;cursor:pointer;
    background:var(--cream);gap:8px}
  .calc-group h4::after{content:'▾';flex:none;color:var(--rose-deep);font-size:12px;
    height:auto;background:none;transition:transform .25s;margin-left:auto}
  .calc-group.open h4::after{transform:rotate(180deg)}
  .calc-group .calc-items{display:none;padding:8px;gap:5px}
  .calc-group.open .calc-items{display:grid}

  /* 항목을 두 줄에서 한 줄로 — 높이 절반 */
  .calc-item{padding:9px 11px;border-radius:10px;gap:8px}
  .calc-item input{width:16px;height:16px}
  .ci-nm{font-size:13.2px}
  .ci-pr{font-size:12.8px}

  /* 합계 바를 화면 하단에 고정 */
  .calc-bar{position:fixed;left:10px;right:10px;bottom:10px;margin:0;z-index:60;
    padding:11px 14px;border-radius:16px;gap:8px;
    box-shadow:0 12px 30px -12px rgba(59,43,38,.45)}
  .cb-left{font-size:13px;width:100%;text-align:center}
  .cb-left strong{font-size:17px}
  .cb-vat{display:block;margin:2px 0 0}
  .cb-right{width:100%;justify-content:stretch;gap:6px}
  .cb-right .btn{flex:1;justify-content:center;padding:10px 12px;font-size:12.5px}
  .calc-note{margin-bottom:150px}   /* 고정 바에 가리지 않게 */
}

/* 약속 카드 — 영문 라벨 + 여러 문단 (2026-09-09) */
.hyg-en{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--honey);margin-bottom:8px;font-weight:600}
.hyg-card h3{font-size:20px;line-height:1.3;margin-bottom:12px}
.hyg-card p{font-size:13.4px;color:var(--muted);line-height:1.75}
.hyg-card p + p{margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
.hyg-card p b{color:var(--espresso);font-weight:600}
@media(max-width:880px){.hyg-card h3{font-size:19px}}

/* ═══ 브라질리언 FAQ BEST 5 (2026-09-09) ═══ */
.faqbest{background:var(--cream)}
.fb-list{display:grid;gap:10px;max-width:920px;margin:0 auto}
.fb{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.fb summary{list-style:none;cursor:pointer;padding:18px 22px;display:flex;align-items:flex-start;gap:13px;
  font-size:16px;font-weight:600;color:var(--espresso);line-height:1.5}
.fb summary::-webkit-details-marker{display:none}
.fb summary::after{content:'+';margin-left:auto;color:var(--rose);font-size:20px;
  font-family:var(--serif);line-height:1;transition:transform .3s;flex:none}
.fb[open] summary::after{transform:rotate(45deg)}
.fb-no{flex:none;width:26px;height:26px;border-radius:50%;background:var(--rose);color:#fff;
  font-family:var(--serif);font-size:14px;display:grid;place-content:center;transform:translateY(1px)}
.fb-a{padding:0 22px 22px 61px;font-size:14.5px;color:var(--muted);line-height:1.85;max-width:none}
.fb:hover summary{background:#FDFBF9}
@media(max-width:560px){
  .fb summary{padding:15px 16px;font-size:15px;gap:10px}
  .fb-a{padding:0 16px 18px 16px;font-size:14px}
}

/* 약속 카드 — 원문이 길어진 만큼 여백 조정 */
.hyg-card h3{font-size:18px;line-height:1.4;margin-bottom:6px}
.hyg-en{display:block;font-size:11.5px;letter-spacing:.12em;color:var(--honey);
  text-transform:uppercase;margin-bottom:12px}
.hyg-card p{font-size:13.8px;line-height:1.8}

/* ── 왁싱 용어 사전 (구 원페이지에서 옮겨 옴) ──────────── */
.terms{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.6vw,20px)}
.term{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:clamp(16px,2vw,24px)}
.term dt{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--espresso);
  margin-bottom:6px;line-height:1.35}
.term dt em{display:block;font-family:var(--kr);font-style:normal;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--honey);margin-top:3px}
.term dd{font-size:13.5px;color:var(--muted);line-height:1.72}
@media(max-width:760px){.terms{grid-template-columns:1fr}}

/* ── 지역 안내 ───────────────────────────────────────── */
.areas{display:grid;gap:clamp(14px,2vw,22px)}
.area-block{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:clamp(18px,2.4vw,30px)}
.area-block h3{font-size:clamp(17px,2vw,21px);margin-bottom:6px}
.area-block .caption{font-size:13.5px;color:var(--muted);margin-bottom:14px;max-width:none}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{font-size:12px;color:var(--ink);background:var(--cream);
  border:1px solid var(--line);border-radius:999px;padding:4px 11px;white-space:nowrap}


/* 비에라 원문 목록 — 「항목명: 설명」 원문 형식을 그대로 살린다 */
.vlist{list-style:none;display:grid;gap:12px;margin-top:4px}
.vlist li{position:relative;padding-left:20px;color:var(--ink);line-height:1.75}
.vlist li::before{content:'';position:absolute;left:2px;top:.72em;width:7px;height:7px;
  border-radius:50%;background:var(--rose)}
.vlist b{color:var(--espresso);font-weight:600}


/* ═══ 시안 D 오버라이드 ═══ */
/* ═══════════════════════════════════════════════════════
   리뉴얼 시안 D — 매장 전경 진한 버전
   시안 A 의 스타일을 그대로 가져다 쓰고, 배경만 덮어쓴다.
   (A 를 고치면 D 도 같이 바뀐다 — 의도된 동작)

   시안 B / C / D 의 차이는 "배경을 어떻게 보이게 하느냐" 뿐:
     B = 크림 베일(.84)로 덮어 은은하게
     C = 베일을 거의 걷어(.08) 원본 그대로, 본문은 흰 시트에
     D = 사진을 진하게 눌러 깊은 룸처럼 만들고,
         밝은 시트를 그 위에 띄운다. 히어로는 밝은 글씨로 뒤집는다.
   ═══════════════════════════════════════════════════════ */


/* ── 배경: 로고월을 진하게 ────────────────────────────
   bg-lobby.jpg 만 갈아끼우면 배경 사진이 바뀐다. */
body{background:transparent}
body::before{
  content:'';position:fixed;inset:0;z-index:-2;
  background:url("/images/bg-lobby.jpg") center center / cover no-repeat;
  filter:saturate(1.06) contrast(1.06) brightness(.82);
}
/* 에스프레소 톤으로 한 겹 더 눌러 깊이를 만든다 */
body::after{
  content:'';position:fixed;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(38,26,22,.44) 0%,rgba(38,26,22,.56) 100%);
}

/* ── 헤더·모바일 메뉴는 밝게 유지 (본문 시트와 한 벌) ─── */
header{background:rgba(253,247,242,.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
header.solid{background:rgba(253,247,242,.96)}
.mnav{background:rgba(253,247,242,.97);backdrop-filter:blur(14px)}

/* ── 히어로: 어두운 룸 위에 밝은 글씨 ─────────────────── */
.hero{background:linear-gradient(180deg,rgba(38,26,22,.30) 0%,rgba(38,26,22,.08) 100%)}
.hero .script{color:var(--rose-pale)}
.hero h1{color:#FDF7F2}
.hero h1 em{color:#EFD9DC}
.hero .sub{color:rgba(253,247,242,.84)}
.hero .rule i{background:rgba(253,247,242,.42)}
.hero .rule svg{color:var(--rose-pale)}
.hero .btn-ghost{border-color:rgba(253,247,242,.72);color:#FDF7F2}
.hero .btn-ghost:hover{background:#FDF7F2;color:var(--rose-deep)}

/* ── 하위 페이지 머리글도 같은 방식으로 ───────────────── */
.phero{background:linear-gradient(170deg,rgba(38,26,22,.34) 0%,rgba(38,26,22,.12) 100%)}
.phero .crumb,.phero .crumb a{color:rgba(253,247,242,.72)}
.phero .crumb a:hover{color:var(--rose-pale)}
.phero .script{color:var(--rose-pale)}
.phero h1{color:#FDF7F2}
.phero p{color:rgba(253,247,242,.84)}
.phero .rule i{background:rgba(253,247,242,.42)}
.phero .rule svg{color:var(--rose-pale)}

/* ── 본문: 섹션 바탕을 걷고 .wrap 을 밝은 시트로 ─────────
   배경이 어두우므로 시트는 거의 불투명하게 두고,
   그림자를 깊게 줘서 사진 위에 떠 있는 것처럼 보이게 한다. */
main > section:not(.night):not(.hero){background:transparent!important}
main > section:not(.night):not(.hero){
  padding-top:clamp(28px,3.6vw,54px);padding-bottom:clamp(28px,3.6vw,54px)}
main > section:not(.night):not(.hero) > .wrap{
  background:rgba(255,255,255,.96);
  border-radius:22px;
  padding:clamp(24px,3.2vw,46px);
  box-shadow:0 28px 72px rgba(0,0,0,.38);
}
/* 넓은 화면에서는 시트를 좁혀 양옆으로도 사진이 보이게 한다 */
@media(min-width:1200px){
  main > section:not(.night):not(.hero) > .wrap{max-width:1080px}
}

/* 원래 크림/아이보리였던 섹션은 시트 색으로 옮긴다.
   위 기본 규칙과 특이도를 맞춰야 하므로 :not() 사슬을 똑같이 붙인다. */
main > section:not(.night):not(.hero).hygiene > .wrap,
main > section:not(.night):not(.hero).faqbest > .wrap,
main > section:not(.night):not(.hero)[style*="--cream"] > .wrap{background:rgba(248,239,231,.96)}
main > section:not(.night):not(.hero).calc > .wrap,
main > section:not(.night):not(.hero)[style*="--ivory"] > .wrap{background:rgba(253,247,242,.96)}
main > section:not(.night):not(.hero).men > .wrap{background:rgba(233,239,245,.96)}

/* 예약 배너는 그 자체가 진한 로즈 카드다 — 시트를 겹치지 않는다 */
main > section:not(.night):not(.hero)[style*="padding-top"] > .wrap{
  background:transparent;border:0;box-shadow:none;padding:0}
main > section[style*="padding-top"] .book{box-shadow:0 28px 72px rgba(0,0,0,.38)}

/* ── 띠 두 개도 밝게 ─────────────────────────────────── */
.trust,.strip{background:rgba(248,239,231,.96);box-shadow:0 20px 60px rgba(0,0,0,.30)}

/* ── 심야 섹션은 살짝 투명하게 해서 뒤 사진이 비치게 ──── */
.night{background:linear-gradient(160deg,rgba(59,43,38,.88) 0%,rgba(84,66,59,.80) 100%)}

/* 모바일: 시트 안쪽 여백이 더해지면 본문이 좁아진다 —
   섹션 좌우 여백을 줄여 시안 A 와 글줄 너비를 비슷하게 맞춘다. */
@media(max-width:640px){
  main > section:not(.night):not(.hero){padding-left:14px;padding-right:14px}
  main > section:not(.night):not(.hero) > .wrap{padding:20px 16px;border-radius:16px}
}

/* ── 마스코트 카드를 히어로에 쓸 때 ────────────────────
   위아래에 문구가 있는 정사각 카드라 아치로 자르면 글자가 날아간다.
   비율을 정사각으로 두고 contain 으로 통째로 보여 준다. */
.hero-photo.mongu{border-radius:20px;aspect-ratio:1/1;background:#FBF8F3}
.hero-photo.mongu img{object-fit:contain}
/* 카드 아래쪽에 문구가 있으므로 원형 배지는 겹치지 않게 숨긴다 */
.hero-photo.mongu + .hero-badge{display:none}

/* ── 상단 물감 띠는 없애고, 흘러내리는 줄기만 남긴다 ─────
   시안 A 의 드립은 칸마다 폭을 꽉 채워(left/right:-1px) 서로 붙는 탓에
   위쪽이 통짜 파스텔 띠로 보인다. 줄기를 좁혀 사이를 띄우고
   전체 높이도 낮춰서 "물감이 떨어지는" 부분만 남긴다. */
.hero .drips{height:clamp(64px,8.5vw,124px)}
.hero .drip i{left:20%;right:20%}
/* 방울은 줄기 끝에서 떨어지므로 낙하 거리도 함께 줄인다 */
.hero .drip b{animation-name:fall-short}
@keyframes fall-short{
  0%,55%{transform:translateY(0) scale(.6);opacity:0}
  62%{opacity:1;transform:translateY(5px) scale(1)}
  100%{transform:translateY(120px) scale(.75);opacity:0}
}
/* 띠가 사라진 만큼 히어로 윗여백도 되돌린다 */
.hero{padding-top:clamp(74px,10vw,148px)}