/* ══════════ NBNZIA 구조 이식: 팔레트·타이포 스케일을 화면 기준으로 ══════════ */
:root{
  --gray:#FFFFFF;      /* 본문 배경 (흰색) */
  --black:#2A2521;     /* 본문 잉크 (웜 다크) */
  --dark:#26201B;      /* 다크 섹션 (웜 브라운블랙) */
  --navy:#756A60;      /* 그레이지 — 보조·버튼·그림자 */
  --red:#F0643B;       /* 브랜드 오렌지 */
  --white:#FFFFFF;
  --y1:#FDE7DB;        /* 히어로 하늘 밝은 피치 */
  --y2:#F2A87E;        /* 히어로 하늘 짙은 피치 */
  --line:#E8E4E0;
  --line-dark:#3B342E;
  --sans:'Pretendard Variable',Pretendard,-apple-system,'Malgun Gothic',system-ui,sans-serif;
  /* 폰트 사이즈는 아래 3개만 쓴다 */
  --fs-1:clamp(26px,4.5vw,76px);  /* 대형: 히어로·인터루드·클로징·워드마크 */
  --fs-2:clamp(22px,3vw,42px);    /* 제목: 섹션 타이틀·가격·로고·스테이트먼트 */
  --fs-3:clamp(16px,1.25vw,18px); /* 본문: 그 외 전부 */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--gray);color:var(--black);font-family:var(--sans);
  font-size:var(--fs-3);line-height:1.7;letter-spacing:-0.015em;
  word-break:keep-all;overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:1400px;margin:0 auto;padding:0 clamp(18px,3vw,44px)}
::selection{background:var(--red);color:#fff}
img,video{max-width:100%}
h1,h2,h3{font-weight:500;letter-spacing:-0.03em;line-height:1.02}
a{color:inherit}

/* 로고의 파워버튼 O — 원 바닥이 베이스라인에 닿는다 */
.pwr{display:inline-block;width:.88em;height:.94em;flex-shrink:0}
.pwr svg{width:100%;height:100%;display:block}

.eyebrow{font-size:calc(var(--fs-3)*1.15);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:currentColor;opacity:.7}

/* ── 코너 브래킷 버튼 (NBNZIA 폼) ── */
.cbtn{position:relative;display:flex;align-items:center;justify-content:center;
  text-decoration:none;font-size:var(--fs-3);font-weight:600;letter-spacing:.01em;
  padding:15px 30px;cursor:pointer;border:0;font-family:var(--sans);
  transition:transform .25s cubic-bezier(.22,1,.36,1)}
.cbtn::before,.cbtn::after{content:"";position:absolute;width:8px;height:8px;
  border:1.5px solid currentColor;opacity:.9;transition:all .3s cubic-bezier(.22,1,.36,1)}
.cbtn::before{top:6px;left:6px;border-right:0;border-bottom:0}
.cbtn::after{bottom:6px;right:6px;border-left:0;border-top:0}
.cbtn:hover::before{top:3px;left:3px}
.cbtn:hover::after{bottom:3px;right:3px}
.cbtn:active{transform:scale(.985)}
.cbtn-navy{background:var(--navy);color:#fff}
.cbtn-red{background:var(--red);color:#fff}
.cbtn-black{background:var(--dark);color:#fff}
.cbtn-block{width:100%;padding:19px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--red);outline-offset:2px}

/* ══════════ 인트로: ON[사진]FIND → 칩 확장 → 히어로 ══════════ */
#intro{position:fixed;inset:0;z-index:200;background:var(--gray);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
#intro[hidden]{display:none}
.iwm{display:flex;align-items:baseline;white-space:nowrap;
  font-size:var(--fs-1);font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--black)}
.iwm .il,.iwm .ir{display:inline-flex;align-items:baseline;gap:.05em;will-change:transform}
.ichip{position:relative;display:inline-block;width:1.08em;height:.72em;margin:0 .06em;
  transform:translateY(.06em);overflow:hidden;border-radius:.035em;background:#EFE8E1;
  will-change:transform,width}
.ichip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.ichip .isky{position:absolute;inset:0;opacity:0;
  background:url('../img/hero-bg.jpg') center/cover no-repeat}

/* ── 섹션 이미지 카드 ── */
.ivis{margin:clamp(30px,5vh,54px) 0 0}
.ivis img{width:100%;display:block;border-radius:14px}
.wimg{display:block;width:min(860px,100%);margin:0 auto clamp(40px,7vh,70px);border-radius:14px}
.simg{display:block;width:min(560px,100%);margin-top:22px;border-radius:12px;
  box-shadow:0 14px 40px rgba(42,37,33,.10)}

/* ══════════ NAV: 로고 좌 · 메뉴 중앙 · 버튼 우 ══════════ */
nav{position:fixed;inset:0 0 auto 0;z-index:99;padding:20px 0;transition:background .3s,box-shadow .3s}
nav.scrolled{background:rgba(245,242,243,.9);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
nav .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.logo{display:flex;align-items:baseline;gap:.05em;font-size:var(--fs-2);font-weight:700;letter-spacing:-.03em;text-decoration:none;line-height:1}
.menu{display:flex;gap:clamp(16px,2.6vw,38px);justify-content:center}
.menu a{font-size:calc(var(--fs-3)*1.2);font-weight:600;text-decoration:none;color:var(--black);opacity:.9;position:relative}
.menu a::after{content:"";position:absolute;left:0;bottom:-4px;height:1px;width:0;background:currentColor;transition:width .25s}
.menu a:hover::after{width:100%}
nav .cbtn{justify-self:end;border-radius:12px;
  background:linear-gradient(180deg,#8A7E72 0%,#6E6358 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32), inset 0 -2px 0 rgba(32,20,13,.22),
             0 3px 0 #52483F, 0 9px 18px rgba(32,20,13,.28);
  transition:transform .15s,box-shadow .15s}
nav .cbtn::before,nav .cbtn::after{display:none}
nav .cbtn:hover{transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.36), inset 0 -2px 0 rgba(32,20,13,.22),
             0 4px 0 #52483F, 0 12px 22px rgba(32,20,13,.32)}
nav .cbtn:active{transform:translateY(2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(32,20,13,.2),
             0 1px 0 #52483F, 0 4px 10px rgba(32,20,13,.25)}

/* ══════════ HERO: 노란 하늘 + 흰/남색 이중 타이포 ══════════ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden;
  background:
    linear-gradient(180deg, rgba(32,20,13,0) 42%, rgba(32,20,13,.42) 100%),
    url('../img/hero-bg.jpg') center/cover no-repeat #F8C7A2;
}
/* 필름 그레인 (영상 질감 대체) */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

.hero-inner{position:relative;z-index:2;width:100%;text-align:center;margin-top:-8vh}
.hero-inner::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1100px,96vw);height:340%;pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side, rgba(32,20,13,.34) 0%, rgba(32,20,13,.18) 55%, rgba(32,20,13,0) 100%)}
.hero h1{
  font-size:var(--fs-1);font-weight:600;line-height:1.08;
  letter-spacing:-.035em;color:var(--white);
  text-shadow:0 2px 6px rgba(32,20,13,.35), 0 8px 32px rgba(32,20,13,.35);
}
.hero h1 .hline{display:block;overflow:hidden}
.hero h1 .hline>span{display:block;will-change:transform}
.hero-sub{position:absolute;z-index:3;top:calc(80px + 4vh);left:0;right:0;text-align:center;
  color:var(--navy);font-size:var(--fs-3);font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.scrollcue{position:absolute;z-index:3;bottom:18px;left:50%;transform:translateX(-50%);
  font-size:var(--fs-3);letter-spacing:.2em;color:rgba(255,255,255,.75);text-transform:uppercase}

/* ══════════ 인트로: 좌상단 미니라벨 + 대형 레드 스테이트먼트 ══════════ */
.intro{padding:clamp(56px,8vh,96px) 0 clamp(60px,9vh,110px)}
.ih{font-size:var(--fs-2);font-weight:700;letter-spacing:-.03em;margin-bottom:22px}
.wh2{font-size:var(--fs-2);font-weight:600;letter-spacing:-.03em;color:#FBF8F5;text-align:center;margin-bottom:14px}
.wsub{text-align:center;color:#BFB5AB;max-width:720px;margin:0 auto 60px;font-size:var(--fs-3)}
.wclose{max-width:640px;margin:56px auto 0;text-align:center;color:#BFB5AB;font-size:var(--fs-3);line-height:1.85}
.wclose b{color:#FBF8F5;font-weight:600}
.shead{margin-bottom:40px}
.shead h2{font-size:var(--fs-2);font-weight:600;letter-spacing:-.03em;margin-top:6px}
.csub{max-width:560px;margin:clamp(30px,5vh,50px) auto 0;color:#A89D92;font-size:var(--fs-3);line-height:1.85}
.csub b{color:#EDE7E0;font-weight:600}
.intro .micro{display:flex;flex-direction:column;gap:2px;margin-bottom:clamp(36px,6vh,72px);
  font-size:var(--fs-3);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--black);opacity:.8}
.intro p.big{
  font-size:var(--fs-2);font-weight:500;line-height:1.28;letter-spacing:-.03em;
  color:var(--red);max-width:1200px;margin-bottom:1.1em;
}
.intro p.big .dim{color:inherit;opacity:.15;transition:opacity .1s linear}
.intro p.big .dk{color:var(--black)}
.intro p.big .bb{font-weight:800}
.intro p.big .or{color:var(--red)}
/* 티커 라인: ♣ → ◆ */
.ticker{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;align-items:center;
  padding-top:30px;font-size:calc(var(--fs-3)*1.25);font-weight:600;color:var(--black)}
.ticker>span{display:inline-flex;align-items:center;gap:8px}
.ticker i{font-style:normal;color:var(--red);font-size:calc(var(--fs-3)*1.25)}

/* ══════════ 다크 섹션: [ 01 ] 리스트 ══════════ */
.what{background:var(--dark);color:#EFEAE5;padding:clamp(56px,8vh,96px) 0 clamp(90px,14vh,170px)}
.what .eyebrow{opacity:.7;display:block;margin-bottom:6px}
.what .heart{color:var(--red);text-align:center;margin:4px 0 30px;font-size:var(--fs-3)}
.witem{padding:clamp(26px,4vh,44px) 0;border-top:1px solid var(--line-dark);cursor:pointer;-webkit-tap-highlight-color:transparent}
.witem .row1 h3{transition:color .3s}
.witem.open .row1 h3{color:var(--red)}
.wbody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.22,1,.36,1)}
.witem.open .wbody{grid-template-rows:1fr}
.winner{overflow:hidden;min-height:0}
.wgrid{display:grid;grid-template-columns:1fr minmax(220px,340px);gap:clamp(20px,3.5vw,48px);
  align-items:center;margin-left:clamp(58px,6.5vw,112px);padding-top:16px;
  opacity:0;transform:translateY(8px);transition:opacity .45s ease .1s,transform .45s ease .1s}
.witem.open .wgrid{opacity:1;transform:none}
@media (hover:hover){
  .witem:hover .row1 h3{color:var(--red)}
  .witem:hover .wbody{grid-template-rows:1fr}
  .witem:hover .wgrid{opacity:1;transform:none}
}
.wgrid p{margin-left:0;max-width:620px}
.wgrid img{width:100%;display:block;border-radius:10px}
@media (max-width:880px){.wgrid{grid-template-columns:1fr;margin-left:0}}
.witem:last-of-type{border-bottom:1px solid var(--line-dark)}
.witem .row1{display:flex;gap:clamp(20px,3.4vw,54px);align-items:baseline;margin-bottom:14px}
.witem .num{font-size:var(--fs-3);font-weight:500;letter-spacing:.06em;color:#968B80;white-space:nowrap}
.witem h3{font-size:var(--fs-2);font-weight:500;letter-spacing:-.03em;color:#FBF8F5}
.witem p{max-width:760px;margin-left:clamp(58px,6.5vw,112px);font-size:var(--fs-3);line-height:1.75;color:#BFB5AB}
.witem p b{color:var(--y2);font-weight:600}

/* ══════════ 대형 틸트 타이포 인터루드 ══════════ */
.tilt{padding:clamp(110px,18vh,220px) 0;overflow:hidden;text-align:center}
.tilt h2{font-size:var(--fs-1);font-weight:500;letter-spacing:-.04em;line-height:1.02;color:var(--black)}
.tilt h2 .ch{display:inline-block;will-change:transform}
.tilt .under{margin-top:26px;font-size:var(--fs-3);color:var(--black);opacity:.6}

/* ══════════ 가격: 전폭 스택 로우 (NBNZIA 대형 버튼 문법) ══════════ */
.pricing{padding:0 0 clamp(100px,15vh,180px)}
.prow{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,3vw,44px);align-items:center;
  background:var(--dark);color:#fff;text-decoration:none;padding:clamp(20px,3vh,30px) clamp(18px,2.6vw,36px);
  margin-bottom:14px;position:relative;transition:background .25s}
.prow::before,.prow::after{content:"";position:absolute;width:8px;height:8px;border:1.5px solid rgba(255,255,255,.9)}
.prow::before{top:7px;left:7px;border-right:0;border-bottom:0}
.prow::after{bottom:7px;right:7px;border-left:0;border-top:0}
.prow:hover{background:var(--navy)}
.prow.hot{background:var(--red)}
.prow.hot:hover{background:#D9532E}
.prow .t{font-size:var(--fs-2);font-weight:600;letter-spacing:-.03em;white-space:nowrap}
.prow .t small{display:block;font-size:var(--fs-3);font-weight:600;letter-spacing:.14em;opacity:.65;text-transform:uppercase}
.prow .d{font-size:var(--fs-3);line-height:1.6;opacity:.85;max-width:660px}
.prow .p{text-align:right;font-size:var(--fs-2);font-weight:600;white-space:nowrap}
.prow .p small{display:block;font-size:var(--fs-3);font-weight:500;opacity:.65}
.pnote{margin-top:22px;font-size:var(--fs-3);line-height:1.7;color:var(--black);opacity:.65;max-width:820px}

/* ══════════ STEP 3막 (Pledge/Turn/Prestige 문법) ══════════ */
.steps{padding:clamp(56px,8vh,96px) 0 clamp(90px,14vh,170px);border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:clamp(90px,10vw,150px) 1fr;gap:clamp(20px,3.4vw,54px);
  padding:clamp(40px,6.5vh,70px) 0;border-bottom:1px solid var(--line)}
.step:first-of-type{border-top:1px solid var(--line)}
.step .sn{font-size:var(--fs-3);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--black);opacity:.55;padding-top:8px}
.step h3{font-size:var(--fs-2);font-weight:500;letter-spacing:-.035em;margin-bottom:16px}
.step h3 em{font-style:normal;color:var(--red)}
.step p{max-width:640px;font-size:var(--fs-3);color:#5C534A;margin-bottom:24px}
.tags{display:flex;flex-wrap:wrap;gap:8px 8px}
.tags i{font-style:normal;font-size:var(--fs-3);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--black);padding:7px 13px;color:var(--black);border-radius:1px}
.tags i.free{background:var(--red);border-color:var(--red);color:#fff}

/* ══════════ 플라이 인터루드: 스크롤에 흐르는 거대 단어 ══════════ */
.fly{height:230vh;background:var(--gray)}
.fly-sticky{position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;gap:3vh}
.fly-line{font-size:calc(var(--fs-1)*1.5);font-weight:700;letter-spacing:-.045em;
  line-height:1;white-space:nowrap;color:var(--black);will-change:transform;align-self:center}
.fly-line.or{color:var(--red)}
.fl1{rotate:-7deg}.fl2{rotate:5deg}.fl3{rotate:-4deg}

/* ══════════ 브랜드 워드마크: ON[칩]FIND ══════════ */
.brand{padding:clamp(90px,15vh,190px) 0;overflow:hidden;background:var(--gray)}
.brand .wm{display:flex;align-items:baseline;justify-content:center;white-space:nowrap;
  font-size:var(--fs-1);font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--black)}
.brand .wm-l,.brand .wm-r{display:inline-flex;align-items:baseline;gap:.05em;will-change:transform}
.chip{position:relative;display:inline-block;width:1.08em;height:.72em;margin:0 .06em;
  vertical-align:baseline;transform:translateY(.06em);overflow:hidden;border-radius:.035em;
  background:linear-gradient(160deg,var(--y1) 0%,#F8C7A2 60%,#ECA070 100%);will-change:width}
.chip .scene{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:1.08em;height:.72em;font-size:inherit}
/* 미니 브라우저 */
.mb{position:absolute;inset:8% 9%;background:#FFFDFB;border-radius:.022em;
  box-shadow:0 .01em .05em rgba(40,24,14,.22);overflow:hidden}
.mb-bar{position:absolute;top:0;left:0;right:0;height:16%;background:#F1EAE4;
  display:flex;align-items:center;gap:4%;padding:0 5%}
.mb-bar i{width:5.5%;aspect-ratio:1;border-radius:50%;background:#CFC5BB}
.mb-bar em{flex:1;height:44%;background:#FFFDFB;border-radius:.01em}
/* 조립되는 블록들 — 5.6초 루프 */
.mb .bl{position:absolute;opacity:0;animation:bld 5.6s infinite}
.bl-hero{top:24%;left:8%;width:84%;height:22%;background:var(--navy);border-radius:.008em;
  transform-origin:top;animation-name:bldY}
.bl-t1{top:53%;left:8%;width:64%;height:5.5%;background:#CFC5BB;animation-delay:.55s;transform-origin:left;animation-name:bldX}
.bl-t2{top:62%;left:8%;width:48%;height:5.5%;background:#CFC5BB;animation-delay:.8s;transform-origin:left;animation-name:bldX}
.bl-btn{top:74%;left:8%;width:26%;height:12%;background:var(--red);border-radius:.006em;animation-delay:1.15s;animation-name:bldP}
.bl-img{top:53%;right:8%;width:24%;height:33%;background:linear-gradient(160deg,#F8C7A2,#ECA070);border-radius:.006em;animation-delay:1.45s;animation-name:bldP}
/* 발견됨 태그 */
.found{position:absolute;top:9%;right:6%;max-width:88%;white-space:nowrap;
  background:var(--navy);color:#fff;
  font-size:.085em;font-weight:800;letter-spacing:.02em;padding:.45em .8em;border-radius:.35em;
  opacity:0;animation:fnd 5.6s infinite;box-shadow:0 .3em 1em rgba(117,106,96,.4)}
@keyframes bldY{0%,6%{opacity:0;transform:scaleY(0)}13%,88%{opacity:1;transform:scaleY(1)}96%,100%{opacity:0;transform:scaleY(1)}}
@keyframes bldX{0%,10%{opacity:0;transform:scaleX(0)}17%,88%{opacity:1;transform:scaleX(1)}96%,100%{opacity:0;transform:scaleX(1)}}
@keyframes bldP{0%,20%{opacity:0;transform:scale(.4)}27%,88%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(1)}}
@keyframes bld{0%{opacity:0}100%{opacity:0}}
@keyframes fnd{0%,38%{opacity:0;transform:translateY(30%) scale(.8)}46%,88%{opacity:1;transform:translateY(0) scale(1)}96%,100%{opacity:0}}
.brand .cap{margin-top:26px;text-align:center;font-size:var(--fs-3);color:var(--black);opacity:.55}

/* ══════════ 클로징: { 무료 진단 } + 대형 질문 + 폼 ══════════ */
.closer{background:var(--dark);color:#fff;padding:clamp(56px,8vh,96px) 0 0;text-align:center;overflow:hidden}
.brkt{display:flex;align-items:center;justify-content:center;gap:clamp(18px,4vw,60px);
  font-size:var(--fs-2);font-weight:500;letter-spacing:-.02em;margin-bottom:clamp(50px,9vh,110px)}
.brkt .b{color:var(--red);font-weight:400}
.brkt .mq{overflow:hidden;max-width:min(560px,54vw)}
.brkt .mq .in{display:flex;gap:96px;width:max-content;animation:mq 18s linear infinite;will-change:transform}
@keyframes mq{to{transform:translateX(-50%)}}
.closer h2{font-size:var(--fs-1);font-weight:500;line-height:1.22;letter-spacing:-.04em;color:#FBF8F5;text-transform:none}
.closer h2 .cl{display:block;overflow:hidden;padding-bottom:.04em}
.closer h2 .cl>span{display:block;will-change:transform}
.closer h2 .q{color:var(--red)}
.cform{max-width:680px;margin:clamp(50px,8vh,90px) auto 0;text-align:left;padding:0 22px}
.cf{margin-bottom:26px}
.cf label{display:block;font-size:var(--fs-3);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#968B80;margin-bottom:6px}
.cf input{width:100%;background:transparent;border:0;border-bottom:1px solid #4A423A;color:#fff;
  font-family:var(--sans);font-size:var(--fs-3);padding:10px 2px 13px;border-radius:0;transition:border-color .25s}
.cf input::placeholder{color:#6F645A}
.cf input:focus{outline:none;border-bottom-color:var(--red)}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:var(--fs-3);line-height:1.65;color:#A89D92;margin:30px 0 26px}
.consent input{width:17px;height:17px;margin-top:2px;flex-shrink:0;accent-color:var(--red)}
.consent b{color:#EDE7E0}
#done{display:none;margin-top:20px;padding:16px;border:1px solid #4A423A;background:#312A24;font-size:var(--fs-3);color:#EFEAE5}
.cmeta{margin-top:16px;font-size:var(--fs-3);color:#8C8177;line-height:1.6}
.follow{display:flex;justify-content:center;gap:clamp(30px,8vw,120px);margin-top:clamp(60px,10vh,110px);
  padding:26px 0;border-top:1px solid var(--line-dark);font-size:var(--fs-3);letter-spacing:.14em;text-transform:uppercase;color:#968B80}
.follow a{text-decoration:none;color:#E6E0D9}
footer{background:var(--dark);color:#8C8177;padding:22px 0 30px;font-size:var(--fs-3);letter-spacing:.08em;text-transform:uppercase}
footer .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.todo{background:var(--red);color:#fff;font-size:var(--fs-3);padding:1px 7px;font-weight:800;letter-spacing:.04em;border-radius:1px;white-space:nowrap;text-transform:none}

@media (max-width:880px){
  /* 모바일 전용 사이즈 토큰 (여전히 3개) */
  :root{
    --fs-1:clamp(32px,8.6vw,52px);
    --fs-2:clamp(21px,5.6vw,30px);
    --fs-3:clamp(15px,4vw,17px);
  }
  .wrap{padding:0 18px}

  /* 내비: 로고+버튼 위, 메뉴 아래 줄 — 순차 등장 대상 유지 */
  nav{padding:12px 0 10px}
  nav .wrap{grid-template-columns:1fr auto;grid-template-areas:"logo btn" "menu menu";row-gap:8px}
  .logo{grid-area:logo}
  nav .cbtn{grid-area:btn;padding:11px 18px;font-size:var(--fs-3)}
  .menu{grid-area:menu;display:flex;justify-content:flex-start;gap:18px}
  .menu a{font-size:var(--fs-3)}

  /* 히어로 */
  .hero-inner{margin-top:-2vh}
  .hero h1{line-height:1.14}

  /* 인트로·워드마크: 칩이 보이도록 크게 */
  .iwm{font-size:clamp(40px,11vw,58px)}
  .brand .wm{font-size:clamp(38px,10.5vw,56px)}
  .brand{padding:clamp(70px,12vh,120px) 0}

  /* 소개 — 좁은 화면에선 PC용 강제 줄바꿈을 풀어 자연스럽게 흐르게 */
  .intro p.big{line-height:1.32}
  .intro p.big br,.wsub br,.wclose br,.csub br,.wgrid p br{display:none}
  .ticker{gap:12px 18px;justify-content:flex-start}

  /* 상담 아코디언 */
  .witem p{margin-left:0}
  .witem .row1{gap:14px;margin-bottom:8px}
  .wgrid{grid-template-columns:1fr;margin-left:0;gap:14px}

  /* 가격 */
  .prow{grid-template-columns:1fr auto;gap:8px 14px}
  .prow .d{grid-column:1/-1;order:3}

  /* 과정 */
  .step{grid-template-columns:1fr;gap:10px}
  .simg{width:100%}

  /* 흐르는 단어: 짧고 크게 */
  .fly{height:170vh}
  .fly-line{font-size:calc(var(--fs-1)*1.35)}

  /* 클로징 */
  .brkt{gap:14px}
  .brkt .mq{max-width:60vw}
  .cform{padding:0 4px}
  .follow{gap:24px;flex-wrap:wrap}
}