/* ===================================================
   남성역 헤르니티 — 모바일 랜딩
   =================================================== */
:root{
  --dark:#2b2619;
  --dark2:#1c1910;
  --ink:#1d1d1f;
  --gold:#d9b46a;
  --gold-l:#f3d999;
  --gold-g:linear-gradient(180deg,#fbe7b3 0%,#d9b46a 55%,#a9803a 100%);
  --coral:#ff7b6b;
  --mint:#7ee8c6;
  --sky:#8fd3ff;
  --navy:#1f3a68;
  --w:640px;
  --hd:58px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--hd)}
body{font-family:"Pretendard Variable",Pretendard,system-ui,sans-serif;color:var(--ink);background:#151209;-webkit-font-smoothing:antialiased;word-break:keep-all;letter-spacing:-.02em}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
em{font-style:normal}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}
main,.ft{max-width:var(--w);margin:0 auto;background:#fff;overflow:hidden}
main{padding-top:var(--hd)}
section{position:relative}
.dark{background:radial-gradient(120% 70% at 50% 0%,#4a3f26 0%,var(--dark) 45%,var(--dark2) 100%);color:#fff}
.gold{background:var(--gold-g);-webkit-background-clip:text;background-clip:text;color:transparent}
.c-mint{color:var(--mint)} .c-sky{color:var(--sky)}
.script{font-family:"Great Vibes",cursive;font-weight:400;letter-spacing:0}
.cg-note{font-size:11px;color:#8a8577;text-align:center;padding:10px 16px 18px}
.dark .cg-note{color:#a39a85}
.sec-sub{text-align:center;font-size:clamp(17px,4.6vw,24px);font-weight:600}
.sec-tit{text-align:center;font-size:clamp(30px,8.6vw,46px);font-weight:900;margin-top:6px;letter-spacing:-.04em}

/* ---------- 헤더 ---------- */
.hd{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--w);height:var(--hd);z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:var(--dark);border-bottom:3px solid transparent;border-image:linear-gradient(90deg,#c0392b,#e2a04a,#7fae4e,#c0392b) 1}
.hd-menu{width:34px;height:34px;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:4px}
.hd-menu span{display:block;height:2px;background:#fff;border-radius:2px;transition:.3s}
.hd-menu[aria-expanded=true] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hd-menu[aria-expanded=true] span:nth-child(2){opacity:0}
.hd-menu[aria-expanded=true] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.hd-logo{display:flex;align-items:center;gap:6px;color:#fff}
.hd-logo img{width:36px}
.hd-logo b{display:block;font-family:Marcellus,serif;font-weight:400;font-size:20px;letter-spacing:.02em;line-height:1}
.hd-logo small{display:block;font-size:10.5px;color:#e9dcc0;letter-spacing:.06em;margin-top:2px}
.hd-tel{display:flex;align-items:center;gap:3px;padding:6px 11px 6px 8px;border-radius:30px;background:var(--gold-g);color:#8f1c13;font-weight:900;font-size:15px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.25),0 0 0 1px #8b6a2c}
.hd-tel svg{width:17px;fill:#1a1a1a}

.gnb{position:fixed;top:var(--hd);left:50%;width:100%;max-width:var(--w);transform:translate(-50%,-110%);z-index:49;background:rgba(28,25,16,.97);padding:10px 24px 24px;transition:transform .35s ease;visibility:hidden}
.gnb.on{transform:translate(-50%,0);visibility:visible}
.gnb a{display:block;color:#fff;font-size:18px;font-weight:600;padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.1)}
.gnb .gnb-tel{margin-top:16px;border:0;text-align:center;border-radius:8px;background:var(--gold-g);color:#2b2619;font-weight:800}

/* ---------- 상단 띠배너 ---------- */
.topbar{display:flex;justify-content:center;align-items:center;gap:14px;background:#fbe3a6;padding:10px 12px;font-size:clamp(16px,4.6vw,24px);font-weight:900;color:#1d1d1f}
.topbar em{color:#c8321f}
.topbar i{font-style:normal;color:#c8321f;font-weight:900}

/* ---------- 01 메인 ---------- */
.s-hero{background:linear-gradient(180deg,#3d8fd6 0%,#7cbbe8 38%,#cfe6f5 60%,#e9f2f7 66%)}
.hero-copy{padding:34px 18px 0;text-align:center;position:relative;z-index:2}
.hero-sub{color:#fff;font-size:clamp(17px,4.8vw,26px);font-weight:800;text-shadow:0 2px 6px rgba(0,0,0,.35)}
.hero-sub em{color:var(--gold-l);font-size:1.25em}
.bubble{position:relative;margin:18px auto 0;width:86%;padding:28px 10px 30px;border:14px solid #e0473a;border-radius:26px;box-shadow:8px 10px 0 #9b1f17,0 18px 30px rgba(0,0,0,.25);transform:rotate(-4deg);background:rgba(255,255,255,.04)}
.bubble::after{content:"";position:absolute;left:24%;bottom:-62px;border:30px solid transparent;border-top:44px solid #e0473a;border-left-width:6px;filter:drop-shadow(8px 6px 0 #9b1f17)}
.bubble p{color:#fff;font-weight:900;line-height:1.1;text-shadow:0 3px 0 rgba(0,0,0,.25),0 6px 14px rgba(0,0,0,.25);letter-spacing:-.05em}
.bubble .b1{font-size:clamp(34px,10vw,56px);font-weight:500}
.bubble .b2{font-size:clamp(38px,11.4vw,64px);color:var(--gold-l)}
.hero-list{margin:40px 0 0 auto;width:fit-content;text-align:right;padding-right:6px}
.hero-list li{color:#fff;font-size:clamp(17px,4.9vw,26px);font-weight:800;line-height:1.45;text-shadow:0 2px 6px rgba(0,0,0,.4);transform:rotate(-4deg)}
.hero-list em{font-size:1.15em}
.hero-img{position:relative;margin-top:-30px}
.hero-img img{width:100%;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 18%);mask-image:linear-gradient(180deg,transparent 0%,#000 18%)}
.hero-tag{position:absolute;right:0;bottom:0;background:linear-gradient(90deg,rgba(0,0,0,0),#2b2619 18%);color:#fff;padding:12px 18px 12px 46px;font-size:clamp(17px,5vw,26px);font-weight:700;border-top:2px solid var(--gold)}
.hero-tag b{color:var(--coral);font-weight:900}

/* ---------- 02 혜택 ---------- */
.s-benefit{padding:34px 0 40px;overflow:hidden}
.glow{position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 0%,rgba(255,220,150,.07) 0deg 3deg,transparent 3deg 14deg);pointer-events:none}
.brand{display:flex;flex-direction:column;align-items:center;gap:4px;position:relative}
.brand img{width:64px}
.brand span{font-family:Marcellus,serif;color:var(--gold);font-size:18px;letter-spacing:.08em}
.s-benefit .sec-sub{margin-top:16px}
.paper{position:relative;margin:26px 22px 0;background:#fff;color:var(--ink);padding:22px 18px 30px;box-shadow:0 14px 30px rgba(0,0,0,.45);clip-path:polygon(0 0,100% 0,100% 94%,94% 100%,0 100%)}
.paper-head{display:flex;align-items:center;justify-content:center;gap:8px;position:relative}
.paper-head .script{font-size:40px;color:#b89759;position:absolute;left:4%;top:-6px;opacity:.9}
.paper-head p{text-align:right}
.paper-head small{display:block;font-size:16px;font-weight:600;padding-left:40px}
.paper-head b{font-size:clamp(22px,6vw,32px);font-weight:800;letter-spacing:-.03em}
.paper-head b em{color:#c8321f}
.big3{font-size:76px;line-height:.9;font-weight:900;color:transparent;-webkit-text-stroke:3px #d4433a;text-shadow:4px 4px 0 rgba(212,67,58,.25)}
.gift-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}
.gift{position:relative;padding:20px 14px;min-height:110px;display:flex;align-items:center}
.gift p{font-size:clamp(17px,4.6vw,24px);font-weight:600;line-height:1.3}
.gift b{font-weight:900}
.gift i{position:absolute;right:10px;top:10px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;color:#5a4316;background:var(--gold-g);box-shadow:0 0 0 2px #fff,0 0 0 3px #c9a45c}
.g1{background:#efe6da}
.g2{background:#dfe7f2}
.g2 b{color:var(--navy)}
.g3{grid-column:1/-1;background:linear-gradient(90deg,#3a3122,#5a4a30);color:#fff}
.g3 b{color:var(--gold-l)}

/* ---------- 03 입지 ---------- */
.s-loc{background:linear-gradient(180deg,#2c4f8f 0%,#4f78bd 46%,#eef1f6 46.1%);padding:30px 0 26px}
.eng-bar{font-family:Marcellus,serif;color:#e4ebf8;letter-spacing:.12em;font-size:18px;padding-left:44px;position:relative}
.eng-bar::before{content:"";position:absolute;left:30px;top:-4px;bottom:-4px;width:4px;background:var(--sky)}
.loc-tit{padding:16px 30px 0;color:#fff;font-size:clamp(23px,6.6vw,36px);font-weight:800;line-height:1.35;letter-spacing:-.04em}
.loc-tit span{color:var(--sky)}
.loc-tit em{color:var(--gold-l)}
.map-card{margin:22px 22px 0;border-radius:18px;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.3);border:3px solid rgba(255,255,255,.6)}
.p4{margin-top:30px}
.p4-head{display:flex;align-items:center;gap:10px;padding:0 18px}
.p4-head img{width:34%;border-radius:8px;opacity:.85;-webkit-mask-image:linear-gradient(90deg,#000 60%,transparent);mask-image:linear-gradient(90deg,#000 60%,transparent)}
.p4-head p{font-size:clamp(15px,4.2vw,22px);font-weight:600}
.p4-head p em{color:#e07a1f;font-weight:800}
.p4-head h3{white-space:nowrap;font-size:clamp(32px,9vw,56px);font-weight:900;color:var(--navy);line-height:1;letter-spacing:-.03em}
.p4-head h3 b{background:linear-gradient(135deg,#ff7b6b,#ffb547 40%,#5ac8fa 70%,#7c5cff);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.2em}
.p4-list{padding:16px 22px 0;display:grid;gap:12px}
.p4-list li{display:flex;gap:14px;align-items:center;background:#fff;border-radius:10px;padding:16px 14px;box-shadow:0 4px 12px rgba(30,40,70,.14)}
.p4-list i{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-family:Marcellus,serif;font-style:normal;font-size:22px;color:#fff;background:linear-gradient(135deg,#3b5ea6,#1f3a68)}
.p4-list li:nth-child(2) i{background:linear-gradient(135deg,#d39b43,#8a6223)}
.p4-list li:nth-child(3) i{background:linear-gradient(135deg,#e2685a,#a3342a)}
.p4-list li:nth-child(4) i{background:linear-gradient(135deg,#4caf8a,#2a7356)}
.p4-list h4{font-size:clamp(18px,5vw,25px);font-weight:800;color:var(--navy)}
.p4-list li:nth-child(even) h4{color:#7a5a1f}
.p4-list p{font-size:clamp(13px,3.6vw,17px);color:#555;margin-top:3px}

/* ---------- 04 시장환경 ---------- */
.s-supply{padding:40px 0 34px}
.stat-row{display:flex;align-items:center;justify-content:center;gap:10px;margin:24px 18px 0}
.stat{flex:1;text-align:center;border-radius:12px;padding:14px 6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)}
.stat small{display:block;font-size:13px;color:#d9d1bf}
.stat b{font-size:clamp(24px,7vw,34px);font-weight:900}
.stat b span{font-size:.5em;font-weight:600;margin-left:2px}
.stat.hot{background:linear-gradient(160deg,#c8321f,#7c1a10);border-color:#ff9a7a;box-shadow:0 0 0 3px rgba(255,123,107,.25)}
.stat-row>i{font-style:normal;font-size:24px;color:var(--gold)}
.graph{margin:22px 18px 0;background:#fff;color:var(--ink);border-radius:12px;overflow:hidden}
.graph h3{display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(90deg,#3a3122,#5a4a30);color:#fff;padding:14px;font-size:clamp(16px,4.6vw,22px);font-weight:700}
.graph h3 svg{width:20px;fill:var(--gold-l)}
.bars{padding:18px 14px 6px;display:grid;gap:10px}
.bars li{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:8px}
.bars span{font-size:14px;font-weight:700;color:#7a6a48;text-align:right}
.bars div{border-left:2px solid #333;padding:2px 0;display:flex;align-items:center;gap:8px}
.bars i{display:block;width:var(--bw);height:30px;background:#8c8c8c;transform-origin:left;animation:grow 1.2s ease both}
.bars b{font-size:15px;font-weight:800;color:#555}
.bars li.hot b{color:#c8321f}
.bars li.hot i{background:linear-gradient(90deg,#b4271a,#e0473a)}
.bars li.hot span{color:#c8321f}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.graph .src{font-size:11px;color:#888;padding:4px 14px 14px;text-align:right}

/* ---------- 05 세대안내 ---------- */
.s-unit{background:radial-gradient(90% 50% at 50% 40%,#fff 0%,#f1efe9 70%) ,#f1efe9;padding-bottom:6px}
.unit-head{position:relative;margin-left:13%;background:#fff;padding:22px 20px 22px 26px;border-top:4px solid;border-image:linear-gradient(90deg,#c4ae7b 25%,#1f2f55 25%) 1}
.unit-head .script{font-size:26px;color:#8a7650}
.unit-head .eng{position:absolute;right:14px;top:14px;font-family:Marcellus,serif;font-size:12px;letter-spacing:.14em;color:#7c7c7c}
.unit-head p{margin-top:6px;font-size:clamp(18px,5vw,25px);font-weight:600}
.unit-head p em{color:#8a6a2a;font-weight:800}
.unit-head h2{font-size:clamp(30px,8.4vw,44px);font-weight:800}
.unit-head h2 b{font-family:Marcellus,serif;font-weight:400;font-size:1.5em;letter-spacing:.06em;background:linear-gradient(120deg,#1f2f55 0%,#3d5a9a 50%,#1f2f55 100%);-webkit-background-clip:text;background-clip:text;color:transparent;margin-right:6px}
.unit{display:flex;align-items:center;gap:6px;padding:26px 14px;border-bottom:1px solid #ddd8cc}
.unit img{width:58%;mix-blend-mode:multiply}
.unit>div{flex:1;text-align:center}
.unit h3{font-family:Marcellus,serif;font-weight:400;font-size:clamp(38px,11vw,58px);color:#6b5323;line-height:1;letter-spacing:-.01em}
.unit h3 small{font-size:.5em}
.unit h3.navy{color:var(--navy);font-size:clamp(30px,8.6vw,46px)}
.cnt{display:inline-block;margin-top:12px;min-width:84%;padding:9px 10px;color:#fff;font-weight:700;font-size:clamp(16px,4.4vw,21px);box-shadow:0 0 0 2px #fff,0 0 0 3px #b9a982}
.c1{background:#6b5323}.c2{background:var(--navy)}.c3{background:#3f3322}
.note{font-size:12px;color:#777;margin-top:8px}

/* ---------- 06 띠배너 ---------- */
.s-strip{background:linear-gradient(90deg,#231f15 0%,#3a3020 60%,#5e5850 100%);color:#fff;padding:22px 20px 24px 26px;border-left:4px solid #b58a4a}
.s-strip p{font-size:clamp(16px,4.4vw,22px);font-weight:600}
.s-strip .script{font-size:1.4em;margin-left:8px;color:#e9dcc0}
.s-strip h2{margin-top:8px;font-size:clamp(22px,6.4vw,34px);font-weight:800}
.s-strip h2 em{color:var(--mint)}

/* ---------- 07 단지설계 ---------- */
.s-design{background:linear-gradient(180deg,#f7f5f0,#ece8df);padding-top:20px}
.design-top{display:flex;gap:12px;padding:0 0 22px 22px;align-items:flex-start}
.design-txt{flex:1}
.design-txt .eng{font-family:Marcellus,serif;color:#9c9584;letter-spacing:.1em;font-size:14px}
.design-txt h2{margin-top:14px;font-size:clamp(25px,7vw,38px);font-weight:900;line-height:1.25}
.design-txt h2 em{color:#7a5a1f}
.vline{display:block;width:1px;height:28px;background:#555;margin:16px 0}
.design-txt .desc{font-size:clamp(13px,3.6vw,17px);color:#555;line-height:1.5}
.arch{width:46%;border-radius:999px 999px 0 0;overflow:hidden;border:4px solid #c8a96a;aspect-ratio:3/4.6;flex:none}
.arch img{width:100%;height:100%;object-fit:cover;object-position:40% 50%}
.cg{position:relative;overflow:hidden}
.cg img{width:100%;aspect-ratio:16/10;object-fit:cover}
.cg-row{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:4px}
.cg-row .cg img{aspect-ratio:1/1.1}
.cg figcaption{position:absolute;left:10px;top:0;background:linear-gradient(180deg,#1d7be0,#0e4fa8);color:#fff;text-align:center;padding:8px 10px 10px;font-weight:800;font-size:17px;line-height:1.1;clip-path:polygon(0 0,100% 0,100% 100%,50% 88%,0 100%)}
.cg figcaption small{display:block;font-size:9px;font-weight:600;letter-spacing:.04em;margin-bottom:3px}
.cg.big::after{content:"풀옵션\A기본제공";white-space:pre;position:absolute;right:14px;bottom:14px;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;text-align:center;font-weight:900;color:#fff;font-size:18px;line-height:1.2;background:radial-gradient(circle,#d8322a 60%,#9b1f17 100%);box-shadow:0 0 0 4px #fff,0 0 0 7px #c8321f,0 8px 18px rgba(0,0,0,.35)}

/* ---------- 08 커뮤니티 ---------- */
.s-comm{padding:0 0 4px}
.comm-head{display:flex;align-items:flex-start;gap:16px;padding:0 22px}
.ribbon{flex:none;width:86px;background:linear-gradient(180deg,#22325a,#15213f);color:#fff;text-align:center;padding:26px 6px 34px;font-weight:800;font-size:12px;line-height:1.25;clip-path:polygon(0 0,100% 0,100% 100%,50% 86%,0 100%)}
.comm-head>div:last-child{flex:1;text-align:right;padding-top:30px}
.comm-head p{font-size:clamp(16px,4.6vw,23px)}
.comm-head p b{font-weight:900}
.comm-head h2{font-size:clamp(30px,8.6vw,46px);font-weight:900;letter-spacing:-.04em}
.comm-head h2 em{color:var(--sky)}
.eng-line{margin:14px 22px 16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.3);text-align:right;letter-spacing:.32em;font-size:12px;color:#cfc6b1}
.cm{position:relative;border-radius:10px;overflow:hidden;background:#000}
.cm img{width:100%;aspect-ratio:4/3;object-fit:cover}
.cm.big{margin:0 18px}
.cm.big img{aspect-ratio:16/9}
.cm figcaption{position:absolute;left:0;bottom:0;padding:8px 12px;background:rgba(0,0,0,.6);font-weight:700;font-size:clamp(15px,4.4vw,21px)}
.cm-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 18px 0}

/* ---------- 09 입지 강조 ---------- */
.s-station{background:linear-gradient(180deg,#f1ece2 0%,#e7dccb 40%,#c9b89c 100%)}
.station-copy{position:relative;padding:34px 22px 0}
.station-copy .t1{font-size:clamp(17px,4.8vw,25px);font-weight:600}
.station-copy .t1 em{color:#a3342a;font-weight:900}
.station-copy h2{margin-top:10px;font-size:clamp(34px,9.6vw,52px);font-weight:900;letter-spacing:-.05em}
.station-copy .red{color:#d62a1d;font-style:italic;font-size:1.25em;text-shadow:3px 3px 0 #fff,5px 5px 0 rgba(0,0,0,.15)}
.station-copy .t2{margin-top:14px;font-size:clamp(14px,4vw,19px);line-height:1.55;font-weight:500}
.signs{position:absolute;right:14px;bottom:-150px;z-index:2;display:flex;gap:5px}
.signs span{width:34px;padding:6px 0 8px;border-radius:5px;background:linear-gradient(180deg,#3b3b3b,#151515);color:#e5e5e5;text-align:center;font-size:13px;font-weight:700;line-height:1.35;box-shadow:0 6px 12px rgba(0,0,0,.3)}
.signs i{display:grid;place-items:center;width:20px;height:20px;margin:0 auto 6px;border-radius:50%;font-style:normal;font-size:11px;color:#fff}
.signs .l7{background:#747f00}.signs .l4{background:#00a5de}.signs .l2{background:#00a84d}
.s-station>img{margin-top:-10px;width:100%;-webkit-mask-image:linear-gradient(180deg,transparent,#000 20%);mask-image:linear-gradient(180deg,transparent,#000 20%)}

/* ---------- 10 풀옵션 ---------- */
.s-option{background:linear-gradient(180deg,#1c1910 0%,#3a3122 32%,#d9d7d2 32.1%,#efeeea 100%);padding-top:14px;text-align:center}
.opt-tab{display:inline-block;margin-right:auto;font-family:Marcellus,serif;color:#2b2619;background:var(--gold-g);padding:6px 26px;border-radius:0 30px 30px 0;font-size:16px;float:left}
.opt-brand{clear:both;display:flex;justify-content:center;align-items:center;gap:8px;padding-top:18px;color:#fff;text-align:left}
.opt-brand img{width:44px}
.opt-brand span{font-family:Marcellus,serif;font-size:24px;line-height:1}
.opt-brand small{display:block;font-family:"Pretendard Variable",sans-serif;font-size:11px;letter-spacing:.06em;color:#e9dcc0}
.s-option h2{margin-top:12px;color:#fff;font-size:clamp(34px,10vw,54px);font-weight:900;letter-spacing:.02em}
.opt-img{width:92%;margin:16px auto 0;border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.opt-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:-18px 14px 0;position:relative}
.oc{padding:4px;color:var(--ink);background:#c8321f}
.oc.o2{background:#5b7fd6}.oc.o3{background:#2e9e5b}
.oc small{display:flex;justify-content:space-between;color:#fff;font-size:11px;padding:2px 4px 4px}
.oc small i{font-style:normal;font-family:Marcellus,serif;letter-spacing:.1em}
.oc p{background:#fff;padding:10px 2px;font-size:clamp(13px,3.8vw,18px);font-weight:600;line-height:1.3}
.oc b{color:#c8321f;font-weight:900}
.oc.o2 b{color:#2f55b5}.oc.o3 b{color:#21804a}

/* ---------- 11 사업일정 ---------- */
.s-sched{padding:40px 0 10px}
.tl{margin:26px 26px 0;position:relative;padding-left:26px}
.tl::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;background:rgba(217,180,106,.35)}
.tl li{position:relative;display:flex;justify-content:space-between;align-items:center;padding:12px 14px;margin-bottom:8px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.tl li::before{content:"";position:absolute;left:-24px;width:12px;height:12px;border-radius:50%;background:#5c5240;border:2px solid #8a7a55}
.tl li.done{background:linear-gradient(90deg,rgba(217,180,106,.28),rgba(217,180,106,.08));border-color:rgba(217,180,106,.5)}
.tl li.done::before{background:var(--gold);border-color:#fbe7b3;box-shadow:0 0 0 4px rgba(217,180,106,.25)}
.tl b{font-size:clamp(15px,4.2vw,19px);font-weight:700}
.tl span{font-size:13px;color:#d9d1bf}
.tl li.done span{color:var(--gold-l);font-weight:700}
.tl li.done span::after{content:" 완료";}

/* ---------- 12 방문예약 ---------- */
.s-form{background:radial-gradient(80% 40% at 0% 100%,#f4efe6 0%,#fff 70%);color:var(--ink);padding:44px 18px 40px;--brown:#9c8257}
.form-intro{padding:0 6px}
.s-form .eng{font-size:12px;font-weight:700;letter-spacing:.24em;color:var(--brown)}
.s-form h2{margin-top:10px;font-size:clamp(28px,8vw,36px);font-weight:800;line-height:1.3;letter-spacing:-.04em}
.s-form h2 em{color:var(--brown)}
.form-desc{margin-top:16px;font-size:15px;line-height:1.75;color:#555}
.form-call{display:block;margin-top:22px;padding:20px 10px;text-align:center;border:1px solid #e3d9c8;border-radius:6px;background:#fff}
.form-call small{display:block;font-size:14px;font-weight:600;color:#444}
.form-call b{display:block;margin-top:4px;font-size:clamp(34px,9.6vw,42px);font-weight:800;letter-spacing:.01em;color:var(--brown)}
.form-card{margin-top:26px;padding:28px 18px 26px;border:1px solid #e6e1d8;border-radius:10px;background:#fff;box-shadow:0 10px 30px rgba(80,60,20,.06)}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 12px}
.f{display:grid;gap:10px;font-size:14px;font-weight:700;color:#222}
.f i{font-style:normal;color:#c0392b}
.f.full{grid-column:1/-1}
.f input,.f select,.f textarea{width:100%;height:50px;padding:0 14px;border:1px solid #e1ddd5;border-radius:4px;background:#fff;color:var(--ink);font:inherit;font-weight:400;font-size:15px;appearance:auto}
.f input::placeholder,.f textarea::placeholder{color:#999}
.f textarea{height:100px;padding:12px 14px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--brown);box-shadow:0 0 0 3px rgba(156,130,87,.15)}
.f-source{border:0;margin-top:26px;padding-bottom:22px;border-bottom:1px solid #e6e1d8}
.f-source legend{font-size:14px;font-weight:700;margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:10px 8px}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-block;padding:11px 18px;border-radius:30px;background:#efebe4;border:1px solid #e1dbd0;font-size:14px;color:#333;cursor:pointer;transition:.2s}
.chip input:checked+span{background:var(--brown);border-color:var(--brown);color:#fff}
.chip input:focus-visible+span{outline:2px solid var(--brown);outline-offset:2px}
.privacy{margin-top:20px;height:90px;overflow-y:auto;padding:10px 14px;background:#efebe4;border:1px solid #e1dbd0;font-size:12px;line-height:1.85;color:#777;scrollbar-color:#8a7350 transparent}
.agree{display:flex;align-items:center;gap:8px;margin-top:20px;font-size:14px;font-weight:700}
.agree input{width:16px;height:16px;accent-color:var(--brown)}
.agree u{text-underline-offset:3px}
.submit{width:100%;height:56px;margin-top:22px;border-radius:4px;background:linear-gradient(90deg,#a98e64,#8c7148);color:#fff;font-size:17px;font-weight:700;box-shadow:0 8px 18px rgba(140,113,72,.3)}
.submit span{font-size:20px;margin-left:6px}
.submit:disabled{opacity:.6}
.form-msg{min-height:1.2em;margin-top:12px;text-align:center;font-size:14px;font-weight:600;color:#8c7148}
@media (max-width:360px){.f-grid{grid-template-columns:1fr}}

/* ---------- 푸터 ---------- */
.ft{background:#f3f2ef;padding-bottom:190px}
.ft-call{display:flex;justify-content:space-between;align-items:center;padding:16px 14px;border-bottom:1px solid #ddd}
.ft-call a{font-size:clamp(22px,6.4vw,30px);font-weight:600}
.ft-call b{font-weight:900}
.to-top{width:40px;height:40px;border-radius:50%;background:#2b2619;color:#fff;font-size:20px;font-weight:800}
.ft-info{padding:20px 16px 0;font-size:13px;line-height:1.75;color:#7d7a72}
.ft-info b{color:#6a675f;font-weight:700}
.ft-info .tel{color:#a07a35;font-weight:800}
.ft-logo{display:flex;align-items:center;gap:8px;color:#2b2619;margin-bottom:14px}
.ft-logo img{width:44px}
.ft-logo span{font-family:Marcellus,serif;font-size:24px;line-height:1}
.ft-logo small{display:block;font-family:"Pretendard Variable",sans-serif;font-size:11px;letter-spacing:.06em;color:#6a675f}
.ft-info p+p{margin-top:6px}
.legal{margin-top:14px;font-size:11.5px;line-height:1.6;color:#8d8a82}
.copy{margin-top:12px;font-size:11.5px}

/* ---------- 플로팅 퀵 ---------- */
.quick-side{position:fixed;left:max(8px,calc(50% - var(--w)/2 + 8px));bottom:96px;z-index:40;display:grid;gap:10px}
.qs{width:70px;height:70px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;font-weight:800;box-shadow:0 6px 14px rgba(0,0,0,.35)}
.qs svg{width:24px;margin-bottom:2px}
.qs-tel{background:var(--gold-g);color:#2b2619;border:3px solid #fff3d4}
.qs-tel svg{fill:#2b2619}
.qs-visit{background:linear-gradient(180deg,#fff,#d9d9d9);color:#222;border:3px solid #fff}
.qs-visit svg{fill:#222}
.quick-bottom{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--w);z-index:41;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:linear-gradient(180deg,#3b3221,#1c1910)}
.quick-bottom a{display:flex;align-items:center;justify-content:center;gap:6px;height:52px;border-radius:6px;border:2px solid #c9a45c;background:linear-gradient(180deg,#4a3f2a,#231e13);color:#fff;font-size:clamp(18px,5.2vw,24px);font-weight:900;letter-spacing:-.03em;box-shadow:inset 0 0 0 1px #000}
.quick-bottom em{background:var(--gold-g);-webkit-background-clip:text;background-clip:text;color:transparent}

@media (min-width:641px){
  body{background:#151209 url("../img/aerial.jpg") center/cover fixed}
  body::before{content:"";position:fixed;inset:0;background:rgba(21,18,9,.82);z-index:-1}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bars i{animation:none}
}