/* Maison Elite 실전 대화 — 공통 스타일 (시안 4판, 밝은 톤)
   흰 바탕 + 아주 옅은 하늘색 구역, 버튼·숫자는 맑은 파랑, 결론 첫마디만 형광펜 노랑.
   규칙: 스타일은 클래스에만 건다(id 는 앵커용). 20px 이하 글자는 rem. 한글 keep-all. 폰 화면 그림 쓰지 않음. */

:root{
  --white:#fff;
  --sky:#F1F2F4;
  --sky-2:#E6E8EB;
  --blue:#111214;
  --blue-d:#000000;
  --marker:#FFE45C;
  --ink:#14171C;
  --mid:#4D5562;
  --dim:#7A8290;
  --line:rgba(20,40,80,.10);
  --line-strong:rgba(20,40,80,.22);

  --h1:clamp(40px,5.4vw,76px);
  --h2:clamp(28px,3.4vw,46px);
  --body:clamp(1rem,1.1vw,1.07rem);
  --r-big:22px;
  --r-mid:16px;
  --r-small:12px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--white);color:var(--ink);font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",sans-serif;font-size:var(--body);line-height:1.65;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
[tabindex="-1"]:focus{outline:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4.5vw,56px)}
@media (min-width:1800px){.wrap{max-width:1300px}}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 28px;border-radius:14px;background:var(--blue);color:#fff;font-weight:800;font-size:1.02rem;text-decoration:none;border:0;cursor:pointer;font-family:inherit;transition:transform .12s,background .15s;box-shadow:0 10px 24px -14px rgba(17,18,20,.35)}
.btn:hover{background:var(--blue-d)}
.btn:active{transform:scale(.98)}
.btn.small{min-height:40px;padding:0 16px;border-radius:11px;font-size:.92rem;box-shadow:none}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.btn.ghost:hover{background:var(--sky)}
.btn[disabled]{background:#C9D2DF;box-shadow:none;cursor:not-allowed}

/* 머리말 */
.top{position:fixed;top:0;left:0;right:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);transition:box-shadow .2s}
.top.is-scrolled{box-shadow:0 1px 0 var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.mark{font-weight:800;font-size:1.22rem;letter-spacing:-.03em;text-decoration:none}
.top-nav{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);font-size:.95rem;font-weight:600}
.top-nav a{text-decoration:none;color:var(--mid)}
.top-nav a:hover{color:var(--ink)}
.top-nav .btn{color:#fff}
@media (max-width:719px){.top-nav .nav-text{display:none}}

/* 1 히어로 */
.hero{background:var(--white)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);align-items:center;padding-top:clamp(104px,11vw,140px);padding-bottom:clamp(40px,5vw,72px)}
.hero h1{font-size:var(--h1);line-height:1.12;letter-spacing:-.05em;font-weight:900}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero .sub{margin-top:clamp(18px,2vw,26px);font-size:clamp(1.06rem,1.4vw,1.25rem);color:var(--mid)}
.hero .acts{margin-top:clamp(28px,3vw,40px);display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.hero .price{color:var(--mid);font-size:.95rem}
.hero .price b{color:var(--ink)}
.hero .proof{margin-top:clamp(26px,3vw,36px);display:inline-flex;align-items:center;gap:14px;padding:14px 20px 14px 16px;border-radius:var(--r-mid);background:var(--sky)}
.hero .proof b{font-size:clamp(1.8rem,2.6vw,2.3rem);font-weight:900;letter-spacing:-.04em;color:var(--blue);line-height:1}
.hero .proof span{font-size:.9rem;font-weight:600;line-height:1.45}
.hero .proof small{display:block;font-size:.74rem;color:var(--dim);font-weight:500;margin-top:2px}
.portrait{position:relative;justify-self:center;width:min(100%,520px)}
.portrait::before{content:"";position:absolute;left:8%;right:8%;bottom:0;height:78%;border-radius:50% 50% var(--r-big) var(--r-big)/40% 40% var(--r-big) var(--r-big);background:var(--sky)}
.portrait img{position:relative;width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 30%;-webkit-mask-image:radial-gradient(ellipse 62% 70% at 50% 44%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 62% 70% at 50% 44%,#000 62%,transparent 100%);mix-blend-mode:multiply}
.talk{position:absolute;left:-4%;top:12%;background:var(--blue);color:#fff;font-weight:800;font-size:clamp(1rem,1.5vw,1.2rem);letter-spacing:-.02em;padding:12px 18px;border-radius:20px 20px 20px 6px;box-shadow:0 14px 28px -14px rgba(31,111,255,.7)}
.portrait .who{position:absolute;right:4%;bottom:10%;background:#fff;border-radius:999px;padding:8px 14px;font-size:.84rem;font-weight:700;box-shadow:0 10px 24px -14px rgba(20,40,80,.45)}
.portrait .who small{color:var(--dim);font-weight:600;margin-left:6px}
@media (max-width:899px){.hero .wrap{grid-template-columns:1fr}.portrait{width:min(100%,380px)}}

/* 2 이력 띠 */
.cred{background:var(--white);overflow:hidden;padding:16px 0 26px}
.track{display:flex;gap:12px;width:max-content;animation:flow 46s linear infinite}
.cred:hover .track{animation-play-state:paused}
.cr{flex:none;display:inline-flex;align-items:center;gap:10px;padding:9px 18px 9px 10px;border-radius:999px;background:var(--sky);font-size:.94rem;font-weight:700;white-space:nowrap}
.cr em{font-style:normal;display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:26px;padding:0 8px;border-radius:999px;background:#fff;color:var(--blue);font-size:.78rem;font-weight:800}
@keyframes flow{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.track{animation:none;flex-wrap:wrap;width:auto;padding:0 20px}.cred .dup{display:none}}

/* 구역 */
.sec{padding:clamp(76px,9vw,128px) 0}
.sec.sky{background:var(--sky)}
.sec h2{font-size:var(--h2);line-height:1.22;letter-spacing:-.045em;font-weight:900}
.sec .lead{margin-top:12px;color:var(--mid);font-size:clamp(1rem,1.2vw,1.12rem)}

/* 3 꺼내기 어려운 말 */
.says{margin-top:clamp(30px,3.4vw,48px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px) clamp(12px,1.4vw,18px)}
.bubble{position:relative;background:var(--white);border-radius:22px 22px 22px 6px;padding:clamp(18px,2vw,24px) clamp(18px,2vw,26px);box-shadow:0 16px 32px -24px rgba(20,40,80,.4)}
.bubble p{font-size:clamp(1.08rem,1.45vw,1.28rem);font-weight:800;letter-spacing:-.03em;line-height:1.42}
.bubble span{display:inline-block;margin-bottom:10px;padding:3px 10px;border-radius:999px;background:var(--sky);font-size:.76rem;font-weight:800;color:var(--blue)}
.bubble:nth-child(3n+2){transform:translateY(18px)}
@media (max-width:819px){.says{grid-template-columns:1fr 1fr}.bubble:nth-child(3n+2){transform:none}.bubble:nth-child(2n){transform:translateY(14px)}}
@media (max-width:519px){.says{grid-template-columns:1fr}.bubble:nth-child(2n){transform:none;margin-left:28px;border-radius:22px 22px 6px 22px}}

/* 4 일주일에 받는 것 */
.week{margin-top:clamp(30px,3.4vw,48px);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);align-items:center}
.cal{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1vw,12px)}
.day{border-radius:var(--r-mid);overflow:hidden;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line)}
.day .hd{display:block;background:var(--sky);color:var(--blue);font-size:.78rem;font-weight:800;text-align:center;padding:7px 4px}
.day .num{display:block;text-align:center;font-size:clamp(1.7rem,2.6vw,2.4rem);font-weight:900;letter-spacing:-.04em;padding:12px 0 2px}
.day .what{display:block;text-align:center;font-size:.86rem;font-weight:700;color:var(--mid);padding:0 6px 14px;line-height:1.35}
.day.go{box-shadow:0 0 0 2.5px var(--blue)}
.day.go .hd{background:var(--blue);color:#fff}
.day.go .num{color:var(--blue)}
.cal-note{margin-top:16px;font-size:.92rem;color:var(--mid)}
.paper{position:relative;background:var(--white);border-radius:8px;padding:clamp(22px,2.6vw,32px);box-shadow:0 30px 60px -34px rgba(20,40,80,.4),0 0 0 1px var(--line);transform:rotate(1.2deg)}
.paper .ph{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.paper .ph b{font-size:1.02rem;font-weight:900;letter-spacing:-.02em}
.paper .ph small{font-size:.78rem;color:var(--dim);font-weight:700}
.paper dt{margin-top:16px;font-size:.78rem;font-weight:800;color:var(--blue)}
.paper dd{margin-top:3px;font-weight:700;line-height:1.5}
.paper dd mark{background:linear-gradient(transparent 38%,var(--marker) 38%);color:inherit;padding:0 2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.paper dd.no{color:var(--dim);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--ink);font-weight:600}
.paper .if{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;font-size:.95rem}
.paper .if span{color:var(--dim);font-weight:600}
@media (max-width:899px){.week{grid-template-columns:1fr}.paper{transform:none}}
@media (max-width:479px){.cal{grid-template-columns:1fr 1fr}}

/* 5 계산기 */
.calc{margin-top:clamp(30px,3.4vw,48px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);align-items:end}
.seg{display:inline-flex;padding:5px;border-radius:14px;background:#fff;gap:4px;box-shadow:inset 0 0 0 1px var(--line)}
.seg button{font-family:inherit;border:0;background:transparent;min-width:72px;min-height:44px;border-radius:10px;font-size:1rem;font-weight:800;color:var(--mid);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--blue);color:#fff}
.sal{margin-top:26px;display:flex;align-items:baseline;justify-content:space-between}
.sal label{font-weight:700;color:var(--mid)}
.sal output{font-size:clamp(1.7rem,2.8vw,2.4rem);font-weight:900;letter-spacing:-.04em}
.rng{width:100%;margin:16px 0 0;-webkit-appearance:none;appearance:none;height:8px;border-radius:8px;background:linear-gradient(var(--blue),var(--blue)) 0/var(--fill,30%) 100% no-repeat,var(--sky-2);outline-offset:6px}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;border:7px solid var(--blue);box-shadow:0 4px 10px -2px rgba(20,40,80,.3);cursor:pointer}
.rng::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:7px solid var(--blue);cursor:pointer}
.out{background:#fff;border-radius:var(--r-big);padding:clamp(20px,2.6vw,30px);box-shadow:0 24px 50px -34px rgba(20,40,80,.45)}
.out .k{font-size:.92rem;font-weight:700;color:var(--mid)}
.out .v{display:block;font-size:clamp(2.6rem,5vw,4.2rem);font-weight:900;letter-spacing:-.05em;line-height:1.1;color:var(--blue)}
.bars{margin-top:18px;display:grid;gap:10px}
.bars div{display:grid;grid-template-columns:110px 1fr auto;gap:12px;align-items:center;font-size:.88rem;font-weight:700;color:var(--mid)}
.bars i{display:block;height:12px;border-radius:12px;background:#EEF2F7;overflow:hidden}
.bars i b{display:block;height:100%;border-radius:12px;background:var(--blue);transition:width .35s cubic-bezier(.3,.7,.3,1)}
.bars .cost i b{background:#AAB4C3}
.bars em{font-style:normal;color:var(--ink);min-width:5.6em;text-align:right}
.calc-note{margin-top:16px;font-size:.8rem;color:var(--dim)}
@media (max-width:819px){.calc{grid-template-columns:1fr}}

/* 6 채널 영상 */
.vids-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:14px}
.vids-head a{font-weight:800;font-size:.95rem;color:var(--blue);text-decoration:none}
.vids{margin-top:clamp(28px,3vw,44px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
.vid{display:block;text-decoration:none}
.vid .im{position:relative;display:block;border-radius:var(--r-big);overflow:hidden;background:var(--sky);aspect-ratio:720/753}
.vid img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.vid:hover img{transform:scale(1.025)}
.vid .play{position:absolute;right:14px;bottom:14px;width:46px;height:46px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px -8px rgba(0,0,0,.4)}
.vid .t{display:block;margin-top:12px;font-weight:800;font-size:1.04rem;letter-spacing:-.02em;line-height:1.4}
@media (max-width:599px){.vids{grid-template-columns:repeat(3,76%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}.vid{scroll-snap-align:start}}

/* 7 가격·신청 */
.pf{margin-top:clamp(30px,3.4vw,48px);display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(14px,2vw,24px);align-items:start}
.plan{background:var(--white);border-radius:var(--r-big);padding:clamp(24px,3vw,38px);box-shadow:0 0 0 2px var(--blue),0 30px 60px -40px rgba(31,111,255,.6)}
.plan .unit{font-weight:800;color:var(--blue)}
.plan .won{font-size:clamp(2.8rem,4.6vw,3.8rem);font-weight:900;letter-spacing:-.05em;line-height:1.12}
.plan ul{margin-top:18px;display:grid;gap:10px}
.plan li{display:grid;grid-template-columns:22px 1fr;gap:8px;font-weight:600}
.plan li svg{margin-top:.3em}
.plan .btn{margin-top:24px;width:100%}
.plan .safe{margin-top:12px;text-align:center;font-size:.86rem;color:var(--mid)}
.faq{display:grid;gap:8px}
.qa{background:var(--white);border-radius:var(--r-mid)}
.qa summary{list-style:none;cursor:pointer;padding:18px 54px 18px 20px;position:relative;font-weight:700;line-height:1.45}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:22px;top:50%;width:12px;height:12px;margin-top:-6px;background:linear-gradient(var(--blue),var(--blue)) center/12px 2px no-repeat,linear-gradient(var(--blue),var(--blue)) center/2px 12px no-repeat;transition:transform .2s}
.qa[open] summary::after{transform:rotate(45deg)}
.qa p{padding:0 20px 18px;color:var(--mid);margin-top:-6px}
@media (max-width:819px){.pf{grid-template-columns:1fr}}

/* 8 바닥 */
.foot{background:#F7F9FC;color:var(--dim);padding:clamp(44px,5vw,64px) 0 clamp(110px,10vw,48px);font-size:.82rem;line-height:1.85;border-top:1px solid var(--line)}
.foot .mark{color:var(--ink);font-size:1.15rem}
.foot .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center}
.foot .links{display:flex;flex-wrap:wrap;gap:16px;font-weight:600}
.foot .links a{text-decoration:none;color:var(--mid)}
.foot .links a:hover{color:var(--ink)}
.foot .biz{margin-top:18px}
.foot .biz span{display:inline-block;margin-right:14px}

/* 폰 아래 신청 띠 */
.dock{display:none}
@media (max-width:719px){
  .dock{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:50;align-items:center;justify-content:space-between;gap:12px;background:#fff;color:var(--ink);border-radius:18px;padding:8px 8px 8px 18px;box-shadow:0 16px 34px -14px rgba(20,40,80,.45),0 0 0 1px var(--line);transform:translateY(150%);transition:transform .25s}
  .dock.is-on{transform:none}
  .dock span{font-size:.9rem;font-weight:700}
  .dock .btn{min-height:44px;border-radius:12px;box-shadow:none}
}
@media (max-height:500px){.dock{display:none}}

/* ───── 신청 화면 (첫 화면과 같은 색: 흰 바탕·검정) ───── */
.mailbox{margin-top:22px;padding:16px 18px;border-radius:var(--r-mid);background:var(--sky);font-size:.92rem;color:var(--mid)}
.mailbox b{color:var(--ink)}
.mailbox .btn{margin-top:12px;min-height:44px}
.apply-body{min-height:100svh;display:flex;flex-direction:column;background:var(--white)}
.apply-top{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.apply-top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.apply-top a.out{font-size:.92rem;color:var(--mid);text-decoration:none}
.bar{height:4px;background:#E9EFF7}
.bar i{display:block;height:100%;width:0;background:var(--blue);transition:width .3s}
.form{flex:1;display:flex;justify-content:center;padding:clamp(28px,6vh,72px) 20px 40px}
.panel{width:100%;max-width:560px}
.step{display:none}
.step.is-on{display:block}
.step .n{font-size:.88rem;font-weight:800;color:var(--blue)}
.step h1{margin-top:8px;font-size:clamp(1.6rem,3.2vw,2.15rem);line-height:1.3;letter-spacing:-.045em;font-weight:900}
.step .help{margin-top:8px;color:var(--mid)}
.opts{margin-top:clamp(20px,3vh,28px);display:grid;gap:10px}
.opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:60px;justify-content:center;text-align:left;font-family:inherit;font-size:1.04rem;font-weight:700;color:var(--ink);background:var(--white);border:0;border-radius:var(--r-mid);padding:14px 18px;box-shadow:inset 0 0 0 1.5px var(--line-strong);cursor:pointer;transition:box-shadow .15s,transform .12s,background .15s}
.opt small{font-size:.86rem;font-weight:500;color:var(--dim)}
.opt:hover{background:var(--sky)}
.opt:active{transform:scale(.995)}
.opt[aria-pressed="true"]{box-shadow:inset 0 0 0 2.5px var(--blue);background:var(--sky)}
.chips{margin-top:clamp(20px,3vh,28px);display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:inherit;font-size:.96rem;font-weight:700;color:var(--ink);background:var(--white);border:0;border-radius:999px;min-height:44px;padding:0 16px;box-shadow:inset 0 0 0 1.5px var(--line-strong);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--blue);color:#fff;box-shadow:none}
.days{margin-top:clamp(20px,3vh,28px);display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.days .opt{align-items:center;text-align:center;min-height:64px;padding:10px}
.field{margin-top:clamp(20px,3vh,28px);display:grid;gap:8px}
.field+.field{margin-top:16px}
.field label{font-size:.92rem;font-weight:700}
.field input,.field textarea{width:100%;font-family:inherit;font-size:1.04rem;color:var(--ink);background:var(--white);border:0;border-radius:var(--r-mid);padding:15px 16px;box-shadow:inset 0 0 0 1.5px var(--line-strong);line-height:1.6}
.field textarea{min-height:180px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;box-shadow:inset 0 0 0 2.5px var(--blue)}
.field .hint{font-size:.84rem;color:var(--dim)}
.sub-h{margin-top:22px;font-size:.92rem;font-weight:700}
.agree{margin-top:20px;display:grid;gap:10px}
.agree label{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;font-size:.95rem;line-height:1.5;cursor:pointer}
.agree input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--blue)}
.agree small{color:var(--dim)}
.nav{margin-top:clamp(26px,4vh,36px);display:flex;gap:10px}
.nav .btn{flex:1}
.nav .back{flex:0 0 auto}
.err{margin-top:10px;font-size:.9rem;color:#C2321B;min-height:1.4em}
.sum{margin-top:22px;background:var(--sky);border-radius:var(--r-mid);padding:6px 20px}
.sum div{display:grid;grid-template-columns:90px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.sum div:last-child{border-bottom:0}
.sum dt{font-size:.88rem;color:var(--dim)}
.sum dd{white-space:pre-line;font-weight:600}
.pay{margin-top:18px;display:flex;align-items:baseline;justify-content:space-between}
.pay b{font-size:1.7rem;letter-spacing:-.04em}
.done-mark{width:58px;height:58px;border-radius:50%;background:var(--sky);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.next{margin-top:24px;display:grid;gap:12px}
.next li{display:grid;grid-template-columns:28px 1fr;gap:10px;line-height:1.55}
.next li b{display:inline-flex;width:24px;height:24px;border-radius:50%;background:var(--blue);color:#fff;font-size:.8rem;align-items:center;justify-content:center;margin-top:.12em}
.proto{margin-top:22px;font-size:.84rem;color:var(--dim)}
.sec:not(.sky) .qa{background:var(--sky)}