/* Vibers TikTok Shop Landing · 공용 스타일
   구조: brandazine 레퍼런스 · 디자인 언어: chatcut.io 웜톤 결합 */
:root{
  --b-white:#FFFFFF; --bg:#F5F5F7; --b100:#F5F5F7; --b200:#E8E8ED; --b300:#D2D2D7;
  --b400:#6E6E73; --b500:#86868B; --b600:#48484A; --b700:#2D2D2F; --b800:#1D1D1F;
  --state-blocked:#D92D20;
  --accent:#1D1D1F; --accent-soft:#86868B; --gold:#1D1D1F;
  --kr:'Pretendard Variable',Pretendard,Arial,sans-serif;
  --disp:'Pretendard Variable',Pretendard,Arial,sans-serif;
  --r-card:32px; --r-btn:999px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--kr);color:var(--b800);background:var(--bg);-webkit-font-smoothing:antialiased;word-break:keep-all;}
a{text-decoration:none;color:inherit;}
img{display:block;max-width:100%;}
.container{max-width:1240px;margin:0 auto;padding:0 20px;}

/* ============ nav ============ */
.nav{position:fixed;inset:0 0 auto;z-index:100;background:var(--b-white);height:72px;display:flex;align-items:center;box-shadow:0 1px 0 rgba(29,29,31,.05);}
.nav-in{width:100%;display:flex;align-items:center;gap:20px;padding:0 24px;}
.wordmark{display:inline-flex;align-items:center;gap:10px;}
.wordmark img{height:32px;width:auto;display:block;}
.wordmark .tempo{font-family:var(--disp);font-size:15px;font-weight:800;letter-spacing:.14em;color:var(--b800);border-left:1px solid var(--b300);padding-left:10px;}
.toggle{display:flex;background:var(--b200);border-radius:999px;padding:4px;gap:2px;}
.toggle a{font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;color:var(--b500);}
.toggle a.on{background:var(--b-white);color:var(--b800);box-shadow:0 1px 4px rgba(0,0,0,.08);}
.nav-menu{display:flex;gap:8px;margin:0 auto;align-items:center;}
.nav-menu>a,.nav-menu .has-mega>a{font-size:15px;font-weight:600;padding:10px 16px;border-radius:10px;transition:background .15s;display:block;}
.nav-menu>a:hover,.nav-menu .has-mega>a:hover{background:var(--b100);}
.nav-r{display:flex;gap:8px;align-items:center;}
/* 모바일 내비 (≤1024px에서 표시) — 애플식 풀스크린 오버레이 */
.nav-burger{display:none;background:none;border:0;width:40px;height:40px;border-radius:10px;cursor:pointer;padding:0;
  flex-direction:column;justify-content:center;align-items:center;gap:4.5px;}
.nav-burger span{display:block;width:18px;height:2px;background:var(--b800);border-radius:2px;
  transition:transform .25s cubic-bezier(.22,1,.36,1),opacity .2s;}
.nav.menu-open .nav-burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav.menu-open .nav-burger span:nth-child(2){opacity:0;}
.nav.menu-open .nav-burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.m-menu{position:fixed;inset:72px 0 0;background:var(--b-white);z-index:95;padding:20px 24px 40px;overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity .28s cubic-bezier(.22,1,.36,1),visibility .28s;}
.nav.menu-open .m-menu{opacity:1;visibility:visible;}
.m-menu>*{opacity:0;transform:translateY(14px);transition:opacity .38s cubic-bezier(.22,1,.36,1),transform .38s cubic-bezier(.22,1,.36,1);}
.nav.menu-open .m-menu>*{opacity:1;transform:none;}
.nav.menu-open .m-menu>*:nth-child(2){transition-delay:.04s;}
.nav.menu-open .m-menu>*:nth-child(3){transition-delay:.08s;}
.nav.menu-open .m-menu>*:nth-child(4){transition-delay:.12s;}
.nav.menu-open .m-menu>*:nth-child(5){transition-delay:.16s;}
.nav.menu-open .m-menu>*:nth-child(6){transition-delay:.2s;}
.nav.menu-open .m-menu>*:nth-child(7){transition-delay:.24s;}
.nav.menu-open .m-menu>*:nth-child(8){transition-delay:.28s;}
.mm-label{font-size:12px;font-weight:700;color:var(--b400);letter-spacing:.08em;text-transform:uppercase;
  margin:30px 0 8px;padding-bottom:10px;border-bottom:1px solid var(--b200);}
.m-menu>.mm-label:first-child{margin-top:8px;}
.mm-big{display:block;padding:13px 0;font-family:var(--kr);font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--b800);}
.mm-big .md{display:block;font-family:var(--kr);font-size:12.5px;font-weight:500;color:var(--b500);margin-top:4px;letter-spacing:0;}
.mm-cta{margin-top:34px;width:100%;padding:15px 18px;font-size:15px;}
@media(min-width:1025px){.m-menu{display:none;}}
.icon-btn{width:40px;height:40px;border-radius:999px;background:var(--b100);display:grid;place-items:center;font-size:17px;}
.btn{display:inline-flex;align-items:center;justify-content:center;font-size:14.5px;font-weight:600;
  border-radius:var(--r-btn);padding:11px 18px;cursor:pointer;border:0;font-family:var(--kr);
  transition:transform .25s cubic-bezier(.22,1,.36,1),opacity .15s,background .15s;}
.btn:hover{transform:translateY(-2px);}
.btn.gray{background:var(--b100);color:var(--b800);border:1px solid var(--b300);}
.btn.gray:hover{background:var(--b200);}
.btn.black{background:var(--b800);color:#fff;}
.btn.black:hover{opacity:.85;}
.btn.white{background:#fff;color:var(--b800);border:1px solid var(--b200);}

/* mega menu */
.has-mega{position:relative;}
.mega{position:fixed;left:50%;top:80px;transform:translateX(-50%) translateY(10px);width:min(680px,94vw);
  background:#FFFFFF;border-radius:24px;box-shadow:0 24px 80px rgba(0,0,0,.16);border:1px solid var(--b200);
  padding:18px;display:grid;grid-template-columns:240px 1fr;gap:24px;
  opacity:0;visibility:hidden;transition:opacity .22s cubic-bezier(.22,1,.36,1),transform .22s cubic-bezier(.22,1,.36,1),visibility .22s;z-index:99;}
/* 그림 없는 메뉴. 인사이트는 발행물 셋을 묶기만 하므로 왼쪽 240px 이미지 칸이 없다. */
.mega.is-plain{grid-template-columns:1fr;width:min(380px,94vw);}
.has-mega:hover .mega,.mega:hover{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.mega-img{border-radius:16px;overflow:hidden;position:relative;min-height:260px;background:var(--b800);}
.mega-img .ph{position:absolute;inset:0;opacity:.75;}
.mega-img .cap{position:absolute;left:16px;bottom:16px;color:#fff;font-size:12.5px;font-weight:600;line-height:1.55;z-index:1;}
.mega-col{padding-top:6px;}
.mega-col .mt{font-size:12px;color:var(--b500);font-weight:600;padding:8px 12px 12px;}
.mega-col a{display:block;padding:11px 12px;border-radius:12px;transition:background .15s;}
.mega-col a:hover{background:var(--b100);}
.mega-col .lt{font-size:16.5px;font-weight:700;letter-spacing:-.01em;}
.mega-col .ld{font-size:12px;color:var(--b500);margin-top:3px;}

/* ============ hero ============ */
.hero{padding:170px 20px 60px;text-align:center;}
.hero .h1{font-size:clamp(38px,6.6vw,78px);font-weight:800;line-height:1.14;letter-spacing:-.03em;}
.hero .partner-badge{margin:30px 0 0;}
.tempo-logo{height:clamp(40px,6vw,72px);width:auto;display:inline-block;}
.tempo-inline{height:.9em;width:auto;display:inline-block;vertical-align:-.08em;}
.hero .hero-state{margin-top:16px;font-family:var(--disp);font-size:clamp(38px,6.6vw,78px);font-weight:800;line-height:1.14;letter-spacing:-.03em;color:var(--b800);}
.h1{font-family:var(--disp);font-size:clamp(34px,4.6vw,56px);font-weight:700;letter-spacing:-.03em;line-height:1.28;}
.h1 .gr{color:var(--b300);}
.hero p{margin-top:22px;font-size:clamp(16px,2.2vw,22px);font-weight:600;line-height:1.55;color:var(--b600);letter-spacing:-.01em;}
.hero-btns{margin-top:30px;display:flex;gap:10px;justify-content:center;}

/* tilted photo marquee */
.tilt-zone{overflow:hidden;padding:70px 0 90px;max-width:1240px;margin:0 auto;}
.tilt-track{display:flex;gap:70px;width:max-content;animation:mq-tilt 55s linear infinite;padding:40px 0;
  will-change:transform;transform:translate3d(0,0,0);backface-visibility:hidden;}
.tcard{width:430px;height:560px;border-radius:22px;border:4px solid #1D1D1F;overflow:hidden;position:relative;flex-shrink:0;
  box-shadow:0 30px 60px rgba(0,0,0,.18);contain:layout paint;}
.tcard:nth-child(6n+1){transform:rotate(-8deg);}
.tcard:nth-child(6n+2){transform:rotate(6deg) translateY(30px);}
.tcard:nth-child(6n+3){transform:rotate(-4deg) translateY(-14px);}
.tcard:nth-child(6n+4){transform:rotate(9deg) translateY(24px);}
.tcard:nth-child(6n+5){transform:rotate(-7deg) translateY(6px);}
.tcard:nth-child(6n){transform:rotate(5deg) translateY(-20px);}
.tcard .ph{position:absolute;inset:0;}
.tcard .chip{position:absolute;left:18px;bottom:16px;font-size:13px;font-weight:700;letter-spacing:.08em;color:#fff;
  text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.4);}
.tcard .handle{position:absolute;top:14px;left:50%;transform:translateX(-50%);background:#fff;border-radius:999px;
  font-size:12px;font-weight:600;padding:6px 12px;display:flex;align-items:center;gap:6px;box-shadow:0 2px 8px rgba(0,0,0,.15);}
.tcard .handle i{width:18px;height:18px;border-radius:50%;display:block;}
/* 트랙 절반 이동 시 gap 절반 보정으로 루프 점프 제거 */
@keyframes mq-tilt{to{transform:translate3d(calc(-50% - 35px),0,0);}}
@keyframes mq-logo{to{transform:translate3d(calc(-50% - 45px),0,0);}}
@keyframes mq-gal{to{transform:translate3d(calc(-50% - 9px),0,0);}}
/* real thumbnails */
.th{background-size:cover;background-position:center top;}
.th::after{content:none;}
/* 컨테이너 채움형 썸네일 (교체 전 .ph 절대배치 규칙 대체) */
.tcard .th,.big-visual .th,.mega-img .th,.post .p-img .th,.rcard .th{position:absolute;inset:0;}
.mega-img .th{opacity:.75;}

/* ============ 직선형 릴 마퀴 (썸네일 세일즈형) ============ */
.reel-zone{overflow-x:auto;padding:50px 0 100px;max-width:1240px;margin:0 auto;
  scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch;}
.reel-zone::-webkit-scrollbar{display:none;}
.reel-zone.dragging{cursor:grabbing;}
.reel-track{display:flex;gap:20px;width:max-content;
  will-change:transform;transform:translate3d(0,0,0);backface-visibility:hidden;}
@keyframes mq-reel{to{transform:translate3d(calc(-50% - 10px),0,0);}}
.rcard{width:290px;height:470px;border-radius:18px;overflow:hidden;position:relative;flex-shrink:0;
  background:var(--b200);contain:layout paint;}
.rcard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;
  background:linear-gradient(transparent,rgba(0,0,0,.75));}
.rcard video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.rcard .stat{position:absolute;left:18px;bottom:16px;color:#fff;z-index:1;}
.rcard .stat{white-space:nowrap;}
.rcard .stat .v{font-size:21px;font-weight:800;letter-spacing:-.01em;text-shadow:0 1px 6px rgba(0,0,0,.35);}
.rcard .stat .s{font-size:12px;opacity:.85;margin-top:4px;font-weight:500;}
@media(max-width:640px){.rcard{width:220px;height:360px;}}
/* photo placeholders (실사진 교체용) */
.ph{background-size:cover;background-position:center;}
.ph.p1{background:linear-gradient(160deg,#d9c8b8,#8a7364 60%,#4a3b30);}
.ph.p2{background:linear-gradient(200deg,#e8e2da,#b8a898 55%,#6b5d50);}
.ph.p3{background:linear-gradient(150deg,#c9cdd4,#8b929e 60%,#3f444d);}
.ph.p4{background:linear-gradient(210deg,#e6d8ce,#c49a82 55%,#7a5140);}
.ph.p5{background:linear-gradient(170deg,#dcd6ce,#a89f92 60%,#575046);}
.ph.p6{background:linear-gradient(190deg,#d4cfd6,#9a8fa0 55%,#4d4452);}
.ph::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 25%,rgba(255,255,255,.35),transparent 55%);}

/* ============ logo marquee ============ */
.logos{overflow:hidden;padding:36px 0;max-width:1240px;margin:0 auto;}
.logo-track{display:flex;gap:90px;width:max-content;animation:mq-logo 22s linear infinite;align-items:center;
  will-change:transform;transform:translate3d(0,0,0);backface-visibility:hidden;}
.logo-track img{height:34px;width:auto;filter:grayscale(1);opacity:.85;}

/* ============ stats ============ */
.stats{padding:150px 20px 160px;}
.stats .h1{text-align:left;}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:110px;}
.pill-label{display:inline-block;background:var(--b100);border-radius:8px;font-size:14px;font-weight:600;padding:8px 14px;}
.stat-num{font-family:var(--disp);font-size:clamp(56px,7vw,92px);font-weight:600;letter-spacing:-.03em;margin-top:28px;}
.stat-cap{margin-top:16px;font-size:14.5px;color:var(--b400);padding-bottom:26px;border-bottom:1px solid var(--b200);}

/* ============ service cards ============
   스티키 스택 → 동일 크기 3장 나열.
   세 상품이 같은 위계라 top 오프셋·겹침·크기 차이를 모두 제거함.
   라운드는 이 컴포넌트에서만 18px (다른 섹션의 --r-card 32px는 유지). */
.svc-stack{padding:0 20px 140px;}
.scard-wrap{margin:0 auto 28px;max-width:1240px;}
.scard-wrap:last-child{margin-bottom:0;}

/* 카드 자체가 클리핑 프레임. 목업은 이 모서리 밖으로 잘려 나간다. */
.scard{position:relative;overflow:hidden;border-radius:18px;min-height:500px;
  display:grid;grid-template-columns:1fr 1.1fr;
  box-shadow:0 2px 12px rgba(29,29,31,.07);}
.scard.g{background:var(--b100);}
.scard.w{background:#FFFFFF;border:1px solid var(--b200);}
.scard.b{background:var(--b800);color:#fff;}

/* 카피는 하나의 붙은 덩어리 — eyebrow → 헤드라인 → 링크 */
.scard-l{padding:56px 60px;display:flex;flex-direction:column;align-items:flex-start;}
.scard-eyebrow{font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--b500);}
.scard.b .scard-eyebrow{color:var(--b400);}
.scard-title{margin:14px 0 0;font-size:clamp(15px,3.9vw,32px);font-weight:600;white-space:nowrap;
  letter-spacing:-.022em;line-height:1.34;}
.scard-title .gr{color:var(--b500);font-weight:600;}   /* 인라인 2톤 */
.scard.b .scard-title .gr{color:var(--b400);}
.scard .btn{margin-top:26px;width:fit-content;}

/* 비주얼: 배경 박스 없이 카드 위에 직접 얹고 오른쪽·아래로 블리드 */
.panel{position:relative;background:none;padding:0;border-radius:0;}
.panel>*{position:relative;}
/* 하단 앵커 — 세 카드 모두 목업이 아래 모서리로 잘려 나가도록 통일 */
.panel-in{position:absolute;top:48px;left:0;right:28px;bottom:-44px;
  display:flex;align-items:flex-end;}
@media(min-width:1025px){
  .panel{overflow:visible;}
}
/* mock: entry checklist */
.mock-card{background:#fff;border-radius:16px;box-shadow:0 12px 32px rgba(0,0,0,.12);padding:22px;width:300px;}
.mock-card + .mock-card{margin-left:-40px;margin-top:120px;}
.mock-title{font-size:13px;font-weight:700;}
.mock-sub{font-size:11px;color:var(--b500);margin-top:2px;}
.mock-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--b100);font-size:12.5px;font-weight:600;}
.mock-row:last-child{border-bottom:0;}
.ck{width:18px;height:18px;border-radius:50%;background:var(--b800);color:#fff;font-size:10px;display:grid;place-items:center;flex-shrink:0;}
.ck.off{background:var(--b200);color:var(--b400);}
.mock-badge{font-size:10.5px;font-weight:700;background:var(--b100);border-radius:6px;padding:4px 8px;margin-left:auto;color:var(--b400);}
.mock-btn{margin-top:14px;background:var(--b800);color:#fff;text-align:center;font-size:12px;font-weight:700;border-radius:10px;padding:11px;}
/* mock: creator profile */
.mock-prof{background:#fff;border-radius:16px;box-shadow:0 12px 32px rgba(0,0,0,.12);padding:20px;width:300px;}
.mock-prof .top{display:flex;gap:10px;align-items:center;}
.ava{width:38px;height:38px;border-radius:50%;}
.mock-prof .nm{font-size:13px;font-weight:700;}
.mock-prof .dt{font-size:11px;color:var(--b500);}
.mock-tabs{display:flex;gap:14px;margin-top:14px;border-bottom:1px solid var(--b200);font-size:12px;font-weight:600;color:var(--b500);}
.mock-tabs b{color:var(--b800);padding-bottom:8px;border-bottom:2px solid var(--accent);}
.mock-stats{display:flex;gap:22px;margin-top:12px;font-size:11.5px;color:var(--b500);}
.mock-stats b{color:var(--b800);font-size:13px;margin-left:4px;}
.mock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px;}
.mock-grid .cell{aspect-ratio:3/4;border-radius:8px;position:relative;overflow:hidden;}
/* 단일 영상형 + 카드 높이 통일 */
.mock-grid.one{grid-template-columns:1fr;flex:1;}
.mock-grid.one .cell{aspect-ratio:auto;height:100%;min-height:240px;}
.lic,.mock-prof{min-height:440px;display:flex;flex-direction:column;}
.lic .l-btn{margin-top:auto;}
.mock-prof .mock-add{margin-top:12px;}
.mock-prof2{position:absolute;right:26px;top:34px;background:#fff;border-radius:16px;box-shadow:0 12px 32px rgba(0,0,0,.12);padding:18px;width:200px;}
.mock-prof2 .h{font-size:12.5px;font-weight:700;}
.mock-prof2 .s{display:flex;gap:14px;font-size:10.5px;color:var(--b500);margin-top:6px;}
.mock-prof2 .s b{color:var(--b800);}
.mock-grid2{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px;}
.mock-grid2 .cell{aspect-ratio:1;border-radius:8px;position:relative;overflow:hidden;}
.mock-add{margin-top:12px;background:var(--b800);color:#fff;font-size:11px;font-weight:700;border-radius:9px;padding:10px;text-align:center;}
/* mock: seeding grid */
.seed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%;transform:rotate(-6deg) scale(1.15);}
.seed-grid .cell{aspect-ratio:1;border-radius:16px;position:relative;overflow:hidden;}

/* ============ service detail (showroom형) ============ */
.detail{padding:170px 20px 60px;text-align:center;}
.detail.sub-page{padding-top:150px;}
/* 서비스 상세 스티키 서브내비 (Apple 로컬내비 패턴) */
.svc-subnav{position:sticky;top:0;z-index:80;margin-top:72px;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--b200);}
.svc-subnav .in{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:4px;padding:0 16px;height:48px;overflow-x:auto;}
.svc-subnav a{font-size:13.5px;font-weight:600;color:var(--b400);padding:8px 14px;border-radius:999px;white-space:nowrap;}
.svc-subnav a:hover{background:var(--b100);color:var(--b800);}
.svc-subnav a.on{background:var(--b800);color:#fff;}
.svc-subnav .pr{margin-left:auto;color:var(--b600);}
.svc-subnav ~ .detail.sub-page{padding-top:64px;}
.svc-subnav ~ .pro-hero{padding-top:110px;}
/* 히어로 신뢰 스트립 */
.proof-line{display:inline-flex;align-items:center;gap:10px;background:#FFFFFF;border:1px solid var(--b200);
  border-radius:999px;padding:9px 16px;margin-top:24px;font-size:12.5px;font-weight:700;color:var(--b600);}
.proof-line img{height:16px;width:auto;display:block;}
.proof-line i{width:1px;height:12px;background:var(--b300);}
.num-badge{display:inline-flex;align-items:center;border-radius:10px;overflow:hidden;font-size:13px;font-weight:700;}
.num-badge .n{background:var(--b800);color:#fff;padding:8px 12px;}
.num-badge .t{background:var(--b100);padding:8px 14px;}
.detail .h2,.center-h2{font-family:var(--disp);font-size:clamp(28px,3.6vw,44px);font-weight:700;letter-spacing:-.025em;line-height:1.35;margin-top:28px;}
.detail .h2 .gr,.center-h2 .gr{color:inherit;}
.detail2 .h2 .gr,.fcard h4 .gr,.fcard h5 .gr,.fcard.blue h4 .tr{color:inherit;}
.detail p.sub{margin-top:22px;font-size:15px;line-height:1.7;color:var(--b400);}
.detail-btns{margin-top:28px;display:flex;gap:10px;justify-content:center;}
.big-visual{max-width:1240px;margin:60px auto 0;border-radius:32px;overflow:hidden;position:relative;aspect-ratio:1200/520;}
.big-visual .ph{position:absolute;inset:0;}
.sku-tag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;border-radius:16px;
  box-shadow:0 16px 40px rgba(0,0,0,.18);display:flex;gap:14px;align-items:center;padding:16px 26px 16px 16px;text-align:left;}
.sku-tag .thumb{width:52px;height:52px;border-radius:10px;overflow:hidden;position:relative;}
.sku-tag .bn{font-size:11.5px;font-weight:600;letter-spacing:.08em;color:var(--b500);text-transform:uppercase;}
.sku-tag .pn{font-size:14px;font-weight:700;margin-top:3px;}
.steps-cap{max-width:1240px;margin:56px auto 0;text-align:left;font-size:13.5px;font-weight:700;color:var(--b500);letter-spacing:.02em;}
.steps-cap + .steps{margin-top:20px;}
.steps{max-width:1240px;margin:56px auto 0;display:grid;grid-template-columns:repeat(5,1fr);gap:28px;text-align:left;}
.step{transition:border-color .3s ease;}
.step .sn{font-size:17px;font-weight:600;color:var(--b300);transition:color .18s;}
.step .st{font-size:16.5px;font-weight:700;margin-top:34px;padding-bottom:14px;border-bottom:2px solid var(--b200);color:var(--b400);
  transition:color .18s,border-color .18s;}
.step:hover .sn{color:var(--b600);}
.step:hover .st{color:var(--b800);border-color:var(--b400);}
.step.on .sn{color:var(--b800);}
.step.on .st{color:var(--b800);border-color:var(--accent);}
.detail2{padding:120px 20px 40px;}
.detail2 .h2{font-family:var(--disp);font-size:clamp(26px,3.2vw,40px);font-weight:700;letter-spacing:-.025em;line-height:1.4;max-width:24ch;}
.detail2 .h2 .gr{color:inherit;}
.feat-grid{max-width:1240px;margin:56px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.fcard{border-radius:28px;padding:44px 44px 0;min-height:600px;overflow:hidden;position:relative;}
.fcard.blue{background:linear-gradient(180deg,#8593a8,#aeb6c4);}
.fcard.gray{background:var(--b100);}
.fcard.short{min-height:480px;}
.fcard h4{font-size:clamp(19px,2vw,24px);font-weight:700;line-height:1.5;letter-spacing:-.015em;}
.fcard.blue h4{color:#fff;}
.fcard.blue h4 .tr{color:inherit;}
.fcard.gray h4 .gr{color:inherit;}
.fcard .visual{margin-top:40px;display:flex;justify-content:center;gap:20px;align-items:flex-start;}
/* phone-style post mockup */
.post{background:#fff;border-radius:20px 20px 0 0;width:300px;box-shadow:0 20px 50px rgba(0,0,0,.2);overflow:hidden;}
.post .p-h{display:flex;align-items:center;gap:8px;padding:12px 14px;font-size:12px;font-weight:700;}
.post .p-h i{width:26px;height:26px;border-radius:50%;display:block;position:relative;overflow:hidden;}
.post .p-img{aspect-ratio:3/3.4;position:relative;overflow:hidden;}
.post .p-img .lbl{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(11,11,11,.72);color:#fff;
  font-size:11px;font-weight:700;border-radius:8px;padding:6px 12px;letter-spacing:.06em;}
.post .p-f{display:flex;align-items:center;gap:10px;padding:12px 14px;}
.post .p-f .fb{margin-left:auto;background:var(--b800);color:#fff;font-size:11px;font-weight:700;border-radius:8px;padding:7px 14px;}
.post .p-f .fn{font-size:12px;font-weight:800;}
.post .p-f .fc{font-size:10px;color:var(--b500);letter-spacing:.08em;}
/* license/ads mockup */
.lic{background:#fff;border-radius:18px;box-shadow:0 16px 40px rgba(0,0,0,.1);width:300px;padding:20px;text-align:left;}
.lic .l-t{font-size:13.5px;font-weight:700;padding-bottom:14px;border-bottom:1px solid var(--b100);}
.lic .l-row{display:flex;align-items:flex-start;gap:10px;padding:13px 0;font-size:12.5px;}
.lic .rd{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--b300);flex-shrink:0;margin-top:1px;}
.lic .rd.on{border:0;background:var(--b800);color:#fff;font-size:9px;display:grid;place-items:center;}
.lic .l-n{font-weight:700;}
.lic .l-s{font-size:11px;color:var(--b500);margin-top:2px;}
.lic .l-p{margin-left:auto;font-weight:700;white-space:nowrap;}
.lic .l-btn{margin-top:12px;background:var(--b800);color:#fff;border-radius:12px;text-align:center;font-size:12.5px;font-weight:700;padding:13px;}
.toast{background:#fff;border-radius:16px;box-shadow:0 16px 40px rgba(0,0,0,.1);width:210px;padding:16px;text-align:left;margin-top:56px;}
.toast .t-h{display:flex;gap:8px;align-items:center;font-size:12px;font-weight:800;}
.toast .t-h i{width:24px;height:24px;border-radius:50%;display:block;position:relative;overflow:hidden;}
.toast .t-b{background:var(--b100);border-radius:10px;padding:12px;margin-top:10px;font-size:11.5px;font-weight:700;}
.toast .t-s{font-size:10.5px;color:var(--b500);font-weight:500;margin-top:3px;}
.toast .t-tag{display:inline-block;margin-top:8px;background:var(--accent);color:#fff;font-size:10.5px;font-weight:700;border-radius:7px;padding:5px 9px;}

/* ============ studio형 페이지 컴포넌트 ============ */
.tabs{display:flex;gap:8px;justify-content:center;margin-top:34px;flex-wrap:wrap;}
.tabs span{padding:10px 18px;border-radius:999px;background:var(--b100);font-size:13.5px;font-weight:600;color:var(--b400);cursor:default;}
.tabs span.on{background:var(--b800);color:#fff;}
.trio{max-width:1240px;margin:56px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.trio .fcard{min-height:440px;padding:36px 32px 0;}
.trio .fcard h5{font-size:18px;font-weight:700;line-height:1.5;}
.trio .fcard h5 .gr{color:inherit;}
.trio .visual{margin-top:28px;}
.trio .cellbig{width:100%;aspect-ratio:3/3.2;border-radius:16px 16px 0 0;position:relative;overflow:hidden;}
/* 비교 플랜 카드 */
.cmp2{max-width:1240px;margin:64px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:24px;text-align:left;}
.pcard{border-radius:24px;border:1px solid var(--b200);padding:38px;display:flex;flex-direction:column;}
.pcard.dark{background:var(--b800);color:#fff;border:0;}
.pcard .pl{font-size:12.5px;font-weight:700;color:var(--b500);}
.pcard.dark .pl{color:var(--b400);}
.pcard h4{font-size:27px;font-weight:700;margin-top:12px;letter-spacing:-.02em;}
.pcard p{font-size:14px;color:var(--b400);margin-top:8px;}
.pcard ul{list-style:none;margin-top:24px;}
.pcard li{padding:13px 0;border-bottom:1px solid var(--b200);font-size:14px;font-weight:600;display:flex;gap:10px;align-items:center;}
.pcard li::before{content:"✓";font-size:12px;font-weight:800;}
.pcard.dark li{border-color:#2c2c2c;}
.pcard .btn{margin-top:26px;width:100%;}

/* ============ studio-pro형 다크 히어로 ============ */
.pro-hero{background:var(--b800);color:#fff;padding:180px 20px 110px;text-align:center;position:relative;overflow:hidden;}
.pro-hero .collage{position:absolute;inset:0;opacity:.4;display:flex;gap:26px;justify-content:center;align-items:center;pointer-events:none;}
.pro-hero .collage .cell{width:230px;aspect-ratio:3/4;border-radius:18px;position:relative;overflow:hidden;flex-shrink:0;}
.pro-hero .collage .cell:nth-child(odd){transform:rotate(-7deg) translateY(34px);}
.pro-hero .collage .cell:nth-child(even){transform:rotate(6deg) translateY(-26px);}
.pro-hero .inner{position:relative;z-index:1;}
.text-logo{font-family:var(--disp);font-size:clamp(34px,5vw,58px);font-weight:800;letter-spacing:-.03em;}
.pro-hero .h1 .tr{color:#fff;}
.pro-hero .h1 .nw{white-space:nowrap;}
@media(max-width:640px){.pro-hero .h1{font-size:clamp(18px,5.3vw,34px);}}
.pro-hero p{margin-top:24px;font-size:16px;line-height:1.7;color:rgba(255,255,255,.65);}
/* 갤러리 마퀴 */
.gal{overflow:hidden;padding:50px 0;max-width:1240px;margin:0 auto;}
.gal-track{display:flex;gap:18px;width:max-content;animation:mq-gal 45s linear infinite;
  will-change:transform;transform:translate3d(0,0,0);backface-visibility:hidden;}
.gal-track .cell{width:250px;aspect-ratio:3/4;border-radius:18px;overflow:hidden;position:relative;flex-shrink:0;}

/* ============ case studies ============ */
.cases{padding:60px 20px 140px;}
.cases .h1{text-align:left;}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:70px;}
.ccard{background:var(--b100);border-radius:24px;padding:26px 26px 20px;}
.fan{position:relative;height:300px;display:grid;place-items:center;}
.fan .f{position:absolute;width:150px;aspect-ratio:3/4;border-radius:14px;border:4px solid #fff;overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.14);}
.fan .f.l{transform:rotate(-14deg) translateX(-84px);}
.fan .f.r{transform:rotate(13deg) translateX(84px);}
.fan .f.c{width:170px;z-index:2;}
.ccard .info{background:#fff;border-radius:16px;padding:20px;margin-top:14px;}
.ccard .bn{font-size:22px;font-weight:700;letter-spacing:-.01em;}
.ccard .bc{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--b500);text-transform:uppercase;margin-top:4px;}
.ccard .btn{margin-top:14px;}

/* ============ faq ============ */
.faq{padding:80px 20px 150px;}
.faq .h1{text-align:left;}
.faq-list{margin-top:60px;display:flex;flex-direction:column;gap:16px;}
details{background:#FFFFFF;border:1px solid var(--b200);border-radius:20px;padding:0 28px;
  box-shadow:0 2px 10px rgba(29,29,31,.04);transition:box-shadow .2s;}
details:hover{box-shadow:0 6px 20px rgba(29,29,31,.07);}
summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;cursor:pointer;
  padding:26px 0;font-size:18px;font-weight:700;letter-spacing:-.01em;}
summary::-webkit-details-marker{display:none;}
.plus{width:22px;height:22px;position:relative;flex-shrink:0;transition:transform .25s;}
.plus::before,.plus::after{content:"";position:absolute;background:var(--b800);}
.plus::before{left:0;right:0;top:10px;height:2px;}
.plus::after{top:0;bottom:0;left:10px;width:2px;}
details[open] .plus{transform:rotate(45deg);}
details .ans{padding:0 0 28px;font-size:15.5px;line-height:1.7;color:var(--b400);max-width:74ch;}
details .ans b{color:var(--b800);}

/* ============ big cta ============ */
.cta{padding:120px 20px 60px;text-align:center;overflow:hidden;}
.cta .h1{max-width:20ch;margin:0 auto;}
.cta .btn{margin-top:36px;font-size:16px;padding:16px 34px;}
.cta-grid{margin-top:80px;display:grid;grid-template-columns:repeat(6,1fr);gap:16px;max-width:1240px;margin-left:auto;margin-right:auto;}
.cta-grid .cell{aspect-ratio:3/4;border-radius:16px;position:relative;overflow:hidden;}
.cta-grid .cell:nth-child(odd){transform:translateY(26px);}

/* ============ footer ============ */
footer{padding:56px 20px 70px;border-top:1px solid var(--b200);text-align:center;}
footer.site-footer{background:var(--b700);padding:48px 20px;border-top:1px solid var(--b600);text-align:left;}
.site-footer-inner{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:start;}
.site-footer-copy{display:grid;gap:4px;}
.f-min{font-size:12.5px;color:var(--b500);line-height:2.1;}
.f-in{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:40px;}
.f-col .t{font-size:13px;font-weight:700;color:var(--b500);margin-bottom:16px;}
.f-col a{display:block;font-size:14.5px;font-weight:600;padding:6px 0;}
.f-col a:hover{color:var(--b400);}
.f-sub{max-width:1240px;margin:56px auto 0;font-size:12.5px;color:var(--b500);line-height:2;}
.f-legal{max-width:1240px;margin:18px auto 0;display:flex;justify-content:center;gap:22px;font-size:12.5px;font-weight:600;color:var(--b400);flex-wrap:wrap;}
/* 법무 링크는 밑줄을 갖는다 — a{text-decoration:none}가 전역이라 밑줄이 없으면 옆의
   푸터 문구와 글자만으로 구분되지 않는다. */
.f-legal a{text-decoration:underline;text-underline-offset:3px;}
.f-legal a:hover{color:var(--b800);}
.site-footer .f-min{color:var(--b300);}
.site-footer .f-legal{margin:0;align-items:center;justify-content:flex-end;color:var(--b200);}
.site-footer .f-legal a{color:var(--b-white);}
@media(max-width:640px){
  footer.site-footer{padding:36px 18px;}
  .site-footer-inner{grid-template-columns:1fr;gap:20px;}
  .site-footer .f-legal{justify-content:flex-start;}
}

/* ============ reveal + perf ============ */
.rv{opacity:0;transform:translate3d(0,26px,0);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);}
.rv.on{opacity:1;transform:translate3d(0,0,0);}
/* content-visibility:auto + contain-intrinsic-size:auto 900px 를 걷어냈다.
   화면 밖 섹션마다 900px 를 미리 잡는데 실제 내용이 그보다 짧아 빈 자리가 남았고, 스크롤이
   그 자리에 닿는 순간 아래 내용이 통째로 위로 튀었다. 실측 — /service-entry 6,132→5,094px,
   /dashboard 6,232→4,827px 로 최대 1,405px 를 과다 예약했다. 정적 HTML 랜딩이라 렌더를
   생략해 버는 것보다 레이아웃이 흔들리는 값이 크다. */
@media (prefers-reduced-motion:reduce){
  .tilt-track,.logo-track,.gal-track{animation:none;}
  .rv{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ============ responsive ============ */
@media(max-width:1024px){
  .nav-menu{display:none;}
  .nav-burger{display:flex;}
  .nav-r{margin-left:auto;}
  .feat-grid,.cmp2{grid-template-columns:1fr;}
  .trio{grid-template-columns:1fr;}
  .steps{grid-template-columns:repeat(2,1fr);gap:18px;}
  .big-visual{aspect-ratio:4/3;}
  .scard{grid-template-columns:1fr;min-height:0;}
  .scard-l{padding:40px 32px;}
  .panel{min-height:360px;}
  .panel-in{position:relative;inset:auto;padding:0 0 0 32px;}
  .case-grid{grid-template-columns:1fr;}
  .cta-grid{grid-template-columns:repeat(3,1fr);}
  .f-in{grid-template-columns:1fr 1fr;}
}
@media(max-width:640px){
  .toggle{display:none;}
  .stat-grid{grid-template-columns:1fr;gap:40px;}
  .tcard{width:300px;height:400px;}
  .hero{padding-top:130px;}
  .mock-card + .mock-card{display:none;}
  /* 스텝: 세로 카드형 */
  .steps{grid-template-columns:1fr;gap:10px;}
  .steps-cap{margin-top:44px;}
  .step{display:flex;align-items:center;gap:14px;background:#FFFFFF;border:1px solid var(--b200);border-radius:14px;padding:15px 18px;}
  .step .sn{font-size:13px;}
  .step .st{margin-top:0;padding-bottom:0;border-bottom:0;font-size:15px;flex:1;}
  .step.on{border-color:var(--accent);}
  /* 서비스 상세 카드: 세로 스택 + 오버플로 방지 */
  .fcard{min-height:0;padding:30px 22px 34px;}
  .fcard.short{min-height:0;}
  .fcard .visual{flex-direction:column;align-items:center;gap:16px;margin-top:28px;}
  .mock-card,.lic,.post,.toast{width:100%;max-width:320px;}
  .toast{margin-top:0;}
  .post{border-radius:20px;}
  /* 상세 카드: 애플식 가로 스냅 캐러셀 */
  .feat-grid,.trio,.cmp2{display:flex;overflow-x:auto;gap:14px;margin-left:-20px;margin-right:-20px;
    padding:8px 20px 18px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .feat-grid::-webkit-scrollbar,.trio::-webkit-scrollbar,.cmp2::-webkit-scrollbar{display:none;}
  .feat-grid>*,.trio>*,.cmp2>*{flex:0 0 85%;scroll-snap-align:center;}
  /* 상세 헤드라인: 강제 줄바꿈 해제 */
  .detail .h2 br,.detail2 .h2 br,.center-h2 br{display:none;}
  /* FAQ: 질문을 되도록 한 줄에 (크기 축소). nowrap 은 걷어냈다 —
     가장 긴 질문이 390px 에서 12.5px 로도 안 들어가 페이지를 17px 옆으로 밀었다.
     .faq 의 content-visibility 가 그 넘침을 가두고 있어 여태 안 보였을 뿐이다. */
  details{padding:0 20px;}
  summary{font-size:clamp(12.5px,3.7vw,16px);padding:22px 0;gap:12px;}
}


/* ============ chatcut식 프롬프트 바 ============ */
.prompt-bar{max-width:640px;margin:44px auto 0;background:#FFFFFF;border:1px solid var(--b200);border-radius:999px;
  display:flex;align-items:center;gap:14px;padding:10px 10px 10px 24px;box-shadow:0 10px 34px rgba(29,29,31,.08);text-align:left;}
.prompt-bar .tag-chip{background:var(--b100);border-radius:999px;font-size:12px;font-weight:700;padding:7px 12px;color:var(--b400);white-space:nowrap;}
.prompt-bar .q{flex:1;font-size:15px;font-weight:500;color:var(--b600);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.prompt-bar .send{width:44px;height:44px;border-radius:50%;background:var(--b800);color:#fff;display:grid;place-items:center;font-size:17px;flex-shrink:0;}

/* ============ pricing (chatcut형) ============ */
.pricing{padding:80px 20px 150px;text-align:center;}
.price-grid{max-width:1240px;margin:64px auto 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;text-align:left;}
.prcard{background:#FFFFFF;border:1px solid var(--b200);border-radius:24px;padding:38px 34px;display:flex;flex-direction:column;
  box-shadow:0 2px 12px rgba(29,29,31,.04);}
.prcard.feat{border:1.5px solid var(--b800);box-shadow:0 14px 40px rgba(29,29,31,.1);}
.prcard .pn{font-family:var(--disp);font-size:34px;font-weight:800;letter-spacing:-.02em;}
.prcard .pn small{font-size:15px;font-weight:600;color:var(--b400);}
.prcard .pd{font-size:13.5px;color:var(--b400);margin-top:8px;}
.prcard .btn{margin:24px 0 8px;width:100%;}
.prcard ul{list-style:none;margin-top:14px;}
.prcard li{padding:10px 0;font-size:14px;font-weight:500;color:var(--b600);display:flex;gap:10px;}
.prcard li::before{content:"✓";font-weight:800;font-size:12px;margin-top:2px;}
@media(max-width:1024px){.price-grid{grid-template-columns:1fr;}}


/* ============ 공식 파트너 배지 ============ */
.partner-badge{display:inline-flex;align-items:center;gap:12px;background:#FFFFFF;border:1px solid var(--b200);
  border-radius:14px;padding:12px 20px;box-shadow:0 4px 16px rgba(29,29,31,.06);margin-bottom:30px;}
.partner-badge img{height:22px;width:auto;}
.partner-badge i{width:1px;height:18px;background:var(--b300);}
.partner-badge span{font-size:13px;font-weight:700;color:var(--b600);letter-spacing:.02em;}


/* ============ 하단 고정 리드 바 ============ */
body:not(.landing-content-page){padding-bottom:124px;}
.cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:#FFFFFF;border-top:1px solid var(--b200);
  transform:translateY(110%);transition:transform .35s ease;}
.cta-bar.show{transform:translateY(0);}
.cta-bar{
  box-shadow:0 -10px 40px rgba(29,29,31,.08);}
.cta-inner{max-width:1240px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding:14px 24px;}
.cta-copy{display:flex;flex-direction:column;gap:2px;}
.cta-copy b{font-size:15.5px;font-weight:800;}
.cta-copy span{font-size:12.5px;color:var(--b400);}
.lead-form{display:flex;gap:10px;align-items:stretch;}
.lead-form input{background:var(--b100);border:1px solid var(--b200);border-radius:11px;padding:13px 16px;
  font-size:14.5px;font-family:var(--kr);color:var(--b800);width:150px;}
.lead-form input::placeholder{color:var(--b500);}
.lead-form input:focus-visible{outline:3px solid #005fcc;outline-offset:2px;border-color:var(--b800);}
.lead-form .submit{background:var(--b800);color:#fff;border:0;border-radius:11px;padding:0 24px;font-size:14.5px;min-width:112px;
  font-weight:800;cursor:pointer;white-space:nowrap;font-family:var(--kr);transition:opacity .15s;}
.lead-form .submit:hover{opacity:.9;}
.lead-form .submit:disabled{cursor:default;opacity:.72;}
.lead-form__error{flex:1 0 100%;margin:0;color:var(--state-blocked);font-size:12.5px;line-height:1.45;}
/* 실패 문구는 `flex:1 0 100%` 라 폼을 한 줄 가득 늘린다. 필드가 넷인 신청 바(`/report-b/*`)에서는
   늘어난 폼이 `.cta-inner` 한 줄을 넘겨 카피가 다시 접히고 바가 114→169px 로 자란다.
   아래 `padding-bottom:124px` 는 그 전 높이를 재고 정한 값이라 모자라고, 모자란 만큼
   `position:fixed` 인 바가 푸터를 덮는다. 같은 자리를 3필드로 재면 113px 이라 접히지 않는다
   (1440px 실측, 2026-08-27). 실패 상태에만 건다 — 정상 상태는 넷이어도 114px 그대로다. */
body:not(.landing-content-page):has(#leadform .lead-form__error){padding-bottom:180px;}
/* 개인정보 수집 동의 — 항목·목적·보유기간·거부권을 제출 버튼과 같은 화면에 둔다.
   접는 자리에 넣으면 「누르기 전에 읽었다」가 성립하지 않는다.

   체크박스는 폼 **밖**에 두고 `form="leadform"` 으로 묶는다. 폼 안에 넣으면 이
   `flex:1 0 100%` 가 폼의 고유 너비를 부풀려 카피와 폼이 위아래로 갈라진다(바가
   92→160px). `name="privacy"` 를 두어 동의한 정책 버전을 Tempo 접수에도 함께 보낸다. */
.lead-consent{flex:1 0 100%;display:flex;align-items:flex-start;gap:8px;font-size:11.5px;line-height:1.7;color:var(--b500);cursor:pointer;}
.lead-consent input{flex:none;width:14px;height:14px;margin:4px 0 0;accent-color:var(--b800);cursor:pointer;}
.lead-consent a{text-decoration:underline;text-underline-offset:2px;color:var(--b400);}
.lead-consent a:hover{color:var(--b800);}
@media(max-width:900px){
  .cta-inner{flex-direction:column;align-items:stretch;gap:9px;padding:12px 16px;}
  .cta-copy{text-align:center;}
  .lead-form{flex-wrap:wrap;}
  .lead-form input{flex:1;width:auto;min-width:100px;}
  .lead-form .submit{flex:1 0 100%;padding:15px 24px;font-size:15px;}
  body:not(.landing-content-page){padding-bottom:250px;}
  /* 이메일까지 받는 4필드 신청 바(`/report-b/*`)는 390px 에서 입력이 두 줄로 접혀 바가 입력
     한 줄만큼(약 55px) 높아진다. 위 250px 는 3필드 바를 재고 정한 값이라 그만큼 모자라고,
     모자란 만큼 `position:fixed` 인 바가 푸터를 덮는다. 폼에 이메일이 있는 페이지에만 건다.

     **390px 는 계산으로만 확인했다.** Aside REPL 이 뷰포트 폭을 바꾸지 못한다. 1440px 는
     실측했고 4필드에서도 바가 114px 로 3필드와 같아 데스크톱에는 영향이 없다. */
  body:not(.landing-content-page):has(#leadform input[name='email']){padding-bottom:306px;}
  /* 좁은 폭에서는 접힌 입력 줄 위에 실패 문구 줄이 하나 더 붙는다. 계산으로만 확인했다. */
  body:not(.landing-content-page):has(#leadform .lead-form__error){padding-bottom:336px;}
}

/* ============ 메가메뉴 브랜드 타일 (TikTok Shop Partner) ============ */
.mega-brand{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:radial-gradient(130% 100% at 75% 15%,#3B2D1F,#1D1D1F 62%);}
.mega-brand img{height:24px;width:auto;filter:brightness(0) invert(1);}
.mega-brand .ofc{font-family:var(--disp);font-size:10.5px;font-weight:700;letter-spacing:.26em;color:var(--accent-soft);text-transform:uppercase;}
.mega-img .cap{z-index:1;}


/* ============ 서비스 상세 리뉴얼 컴포넌트 (소개서 기반) ============ */
/* 수치 밴드 (증거) */
.stat-band{max-width:1240px;margin:56px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:left;}
.stat-band .sb{background:#fff;border:1px solid var(--b200);border-radius:20px;padding:26px 24px;}
.stat-band .n{font-family:var(--disp);font-size:30px;font-weight:800;letter-spacing:-.02em;}
.stat-band .n em{font-style:normal;color:var(--accent);}
.stat-band .d{font-size:12.5px;color:var(--b400);margin-top:8px;font-weight:600;line-height:1.5;}
/* 문제 카드 (이유) */
.pain{max-width:1240px;margin:44px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;text-align:left;}
.pain .pi{background:#fff;border:1px solid var(--b200);border-radius:18px;padding:24px 22px;font-size:13.5px;font-weight:500;color:var(--b400);line-height:1.6;}
.pain .pi b{display:block;font-size:15.5px;font-weight:700;color:var(--b800);margin-bottom:8px;}
.pain-note{max-width:1240px;margin:28px auto 0;text-align:left;font-size:14.5px;font-weight:600;color:var(--b600);
  border-left:3px solid var(--accent);padding-left:16px;line-height:1.7;}
/* 클라이언트 스트립 (증거) */
.client-strip{max-width:1240px;margin:40px auto 0;text-align:left;font-size:13.5px;font-weight:700;color:var(--b500);line-height:2.2;letter-spacing:.02em;}
/* CTA 안심 문구 (행동) */
.assure{margin-top:20px;font-size:13px;color:var(--b500);font-weight:600;line-height:1.7;}
/* 6단계 스텝 */
.steps.s6{grid-template-columns:repeat(6,1fr);gap:20px;}
.steps.s3{grid-template-columns:repeat(3,1fr);}
@media(max-width:1024px){
  .stat-band{grid-template-columns:repeat(2,1fr);}
  .pain{grid-template-columns:1fr;}
  .steps.s6{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .stat-band{grid-template-columns:1fr 1fr;gap:10px;}
  .stat-band .sb{padding:18px 16px;}
  .stat-band .n{font-size:22px;}
  .steps.s6{grid-template-columns:1fr;}
}
/* `.steps.s3` 는 좁은 폭에서도 3열을 유지하도록 특정도(0,2,0)로 위 `.steps{1fr}` 을 이긴다.
   그런데 640px 이하에서 `.step` 이 가로 카드(flex row)로 바뀌어 칸 하나의 min-content 가
   ~95px 이라, 360px 아래에서는 3열이 컨테이너를 넘어 페이지를 옆으로 민다(320px 에서 22px).
   그 폭에서만 한 열로 떨어뜨린다 — 360px 이상의 3열 배치는 그대로다. */
@media(max-width:360px){
  .steps.s3{grid-template-columns:1fr;}
}


/* ============ 플라이휠 순환 화살표 ============ */
.steps{position:relative;}
@media(min-width:641px){
  .steps .step{position:relative;}
  .steps .step:not(:last-child)::after{content:"→";position:absolute;right:-24px;top:50%;transform:translateY(-50%);
    color:var(--b400);font-size:15px;font-weight:700;}
  .steps.s6 .step:not(:last-child)::after{right:-18px;}
  .steps.s3 .step:not(:last-child)::after{content:none;}
}
/* 641~1024px 에서 `.steps` 는 2열이 된다. 오른쪽 칸의 화살표는 다음 칸이 아니라 컨테이너
   바깥(right:-24px)을 가리켜 768px 에서 페이지를 4px 옆으로 밀었다. 다음 칸은 아랫줄에
   있으니 오른쪽을 가리키는 것 자체가 틀렸다 — 그 칸에서는 끈다. */
@media(min-width:641px) and (max-width:1024px){
  .steps:not(.s3) .step:nth-child(2n)::after{content:none;}
}
.loop-arrow{max-width:1240px;margin:14px 8px 0;height:30px;border:1.5px solid var(--b300);border-top:0;
  border-radius:0 0 18px 18px;position:relative;}
.loop-arrow::before{content:"";position:absolute;left:-7px;top:-8px;border:6px solid transparent;border-bottom:10px solid var(--b400);}
@media(max-width:640px){
  .loop-arrow{display:none;}
  /* 05 → 01 대형 플라이휠 화살표 (왼쪽 곡선) */
  .steps:not(.s3){margin-left:34px;}
  .steps:not(.s3)::before{content:"";position:absolute;left:-26px;top:28px;bottom:28px;width:20px;
    border:3px solid var(--b800);border-right:0;border-radius:18px 0 0 18px;}
  .steps:not(.s3)::after{content:"";position:absolute;left:-10px;top:19px;
    border:8px solid transparent;border-left:12px solid var(--b800);}
}


/* ============ 성장 루프 (홈) ============
   바퀴는 보는 것이 아니라 도는 것이다. 클릭휠이 도표가 아니었던 것과 같은 이유로,
   여기 원도 라벨을 두른 도표가 아니라 실제로 도는 물건이어야 한다.

   호 하나가 9초에 한 바퀴를 돈다. 점 다섯을 1.8초 간격으로 지나가고, 지나갈 때마다
   오른쪽 목록의 그 줄이 켜진다. 호버가 필요 없고 다섯 줄은 늘 다 보인다. */
.loop-sec{padding:40px 20px 150px;}
.loop-sec .h1{max-width:20ch;}

.flywheel{margin-top:88px;display:grid;grid-template-columns:420px 1fr;gap:80px;align-items:center;}

/* ---- 도는 쪽 ---- */
.fw-stage{position:relative;width:420px;height:420px;}
.fw{display:block;width:100%;height:100%;overflow:visible;}
.fw-track{fill:none;stroke:var(--b300);stroke-width:1.5;}
.fw-sweep{fill:none;stroke:var(--b800);stroke-width:3;stroke-linecap:round;
  transform:rotate(-140deg);transform-origin:210px 210px;}
.flywheel.spin .fw-sweep{animation:fwSpin 9s linear infinite;}
@keyframes fwSpin{from{transform:rotate(-140deg);}to{transform:rotate(220deg);}}
.fw-dot{fill:var(--b300);transform-box:fill-box;transform-origin:center;}
.flywheel.spin .fw-dot{animation:fwDot 9s linear infinite;}
@keyframes fwDot{
  0%{transform:scale(1);fill:var(--b300);}
  3%{transform:scale(1.7);fill:var(--b800);}
  18%{transform:scale(1.7);fill:var(--b800);}
  24%,100%{transform:scale(1);fill:var(--b300);}
}
/* 중앙은 단계가 아니라 결과가 지킨다. HubSpot 중앙이 Growth 인 것과 같은 이유다. */
.fw-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;
  font-family:var(--disp);font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1.35;}

/* ---- 읽는 쪽. 이쪽이 본문이다. ---- */
/* 칸 사이를 "그래서" 로 잇는다. 인과가 말로 이어지지 않으면 목록이지 바퀴가 아니다.
   연결어는 칸 밖 여백에 놓여 하이라이트에 덮이지 않는다. */
.fw-list{list-style:none;display:flex;flex-direction:column;gap:30px;}
.fw-list li{position:relative;padding:16px 20px;border-radius:14px;background:rgba(255,255,255,0);}
.fw-list li + li::before{content:"그래서";position:absolute;left:20px;top:-23px;
  font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--b400);}
.flywheel.spin .fw-list li{animation:fwRow 9s linear infinite;}
@keyframes fwRow{
  0%{background:rgba(255,255,255,0);transform:translateX(0);}
  3%{background:rgba(255,255,255,1);transform:translateX(8px);}
  18%{background:rgba(255,255,255,1);transform:translateX(8px);}
  24%,100%{background:rgba(255,255,255,0);transform:translateX(0);}
}
.fw-list .fn{display:block;font-size:12.5px;font-weight:600;color:var(--b400);}
.fw-list .ft{margin-top:7px;font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.4;}
.flywheel.spin .fw-dots .fw-dot:nth-child(2),
.flywheel.spin .fw-list li:nth-child(2){animation-delay:1.8s;}
.flywheel.spin .fw-dots .fw-dot:nth-child(3),
.flywheel.spin .fw-list li:nth-child(3){animation-delay:3.6s;}
.flywheel.spin .fw-dots .fw-dot:nth-child(4),
.flywheel.spin .fw-list li:nth-child(4){animation-delay:5.4s;}
.flywheel.spin .fw-dots .fw-dot:nth-child(5),
.flywheel.spin .fw-list li:nth-child(5){animation-delay:7.2s;}

@media(max-width:1080px){
  .flywheel{grid-template-columns:340px 1fr;gap:48px;}
  .fw-stage{width:340px;height:340px;}
  .fw-core{font-size:22px;}
  .fw-list .ft{font-size:17px;}
}
@media(max-width:820px){
  /* 원을 더 줄이면 중앙 글자가 죽는다. 원을 접고 목록만 남긴다. */
  .flywheel{grid-template-columns:1fr;gap:0;margin-top:52px;}
  .fw-stage{display:none;}
  .fw-list li{background:var(--b-white);border:1px solid var(--b200);}
  .flywheel.spin .fw-list li{animation:none;transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .flywheel.spin .fw-sweep,.flywheel.spin .fw-dot,.flywheel.spin .fw-list li{animation:none;}
  .fw-list li{background:var(--b-white);}
}

/* ============ 산출물 캐러셀 ============
   스크린샷이 아니라 다시 그린 것이다. 캡처는 홈 상단에서 글자가 뭉개지고 무겁다.
   가로 스크롤 스냅이라 JS 가 죽어도 손가락으로는 넘어간다 — 버튼은 마우스 쓰는 사람 몫이다. */
.work{padding:40px 20px 150px;}
.work .h1{max-width:24ch;}
.work-lede{margin-top:20px;font-size:13px;color:var(--b500);}
.work-deck{margin-top:64px;}
.work-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:24px;}

.wcard{background:var(--b-white);border-radius:24px;padding:34px 32px 32px;
  box-shadow:0 12px 32px rgba(0,0,0,.06);display:flex;flex-direction:column;}
.wc-step{display:block;font-size:12px;font-weight:600;color:var(--b400);}
.wcard h3{margin-top:10px;font-family:var(--disp);font-size:23px;font-weight:700;
  letter-spacing:-.025em;line-height:1.35;white-space:nowrap;}
.wc-vis{margin-top:26px;display:flex;flex-direction:column;flex:1;}

/* 큰 숫자는 카드 바닥에 고정된다. 세 장의 눈높이가 맞아야 견줘진다. */
.wc-nums{padding-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.wc-nums.three{grid-template-columns:repeat(3,1fr);gap:12px;}
.wc-nums b{display:block;font-family:var(--disp);font-size:32px;font-weight:600;letter-spacing:-.03em;line-height:1;}
.wc-nums em{font-style:normal;font-size:.5em;font-weight:600;margin-left:2px;color:var(--b400);}
.wc-nums span{display:block;margin-top:9px;font-size:12px;line-height:1.5;color:var(--b400);}

/* 1 · 유형 라벨링. 막대가 굵어질수록 조회는 작아진다 — 그 역상이 이 표의 전부다. */
/* 막대와 숫자가 자리를 나눠 갖는다. 겹쳐 놓으면 51.8% 처럼 긴 막대가 제 숫자를 덮는다. */
.types .sh{width:31%;white-space:nowrap;}
.types .track{display:inline-block;width:calc(100% - 46px);height:7px;vertical-align:middle;
  border-radius:4px;background:var(--b100);}
.types .track i{display:block;height:100%;min-width:3px;border-radius:4px;background:var(--b300);}
.types .sh em{display:inline-block;width:40px;text-align:right;vertical-align:middle;font-style:normal;font-size:11px;
  color:var(--b400);font-variant-numeric:tabular-nums;}
.types tr.crowd .track i{background:var(--b600);}
.tag{display:inline-block;white-space:nowrap;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap;}
.tag.go{background:var(--b800);color:var(--b-white);}
.tag.no{background:var(--b200);color:var(--b500);}

/* 2 · 유료 대 무가 표 */
/* 칸 폭을 내용에 맡기면 표마다 축이 달라진다. 라벨은 남는 폭을 갖고 나머지는 고정한다.
   마지막 알약 칸은 폭을 못 박아야 세 표의 오른쪽 끝이 한 줄로 선다. */
.wc-tbl{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:fixed;}
.wc-tbl th,.wc-tbl td{padding:9px 4px;text-align:right;border-bottom:1px solid var(--b200);}
.wc-tbl th:first-child,.wc-tbl td:first-child{width:auto;}
.wc-tbl th:last-child,.wc-tbl td:last-child{width:64px;}
.wc-tbl .hi{width:62px;}
/* 두 칸짜리 표. 절반씩 나누면 두 값이 화면 양끝으로 벌어져 한 행으로 안 읽힌다.
   숫자 칸만 고정하고 라벨이 남는 폭을 갖되, 라벨도 오른쪽으로 붙여 둘을 가깝게 둔다. */
/* 두 칸뿐인 표를 아래 네 칸 표의 앞 두 칸 자리에 맞춘다. 라벨은 왼쪽 끝에서 시작하고
   숫자는 아래 표의 「비중」 칸과 같은 세로선에서 끝난다. 뒤쪽 두 칸 폭(62+64)만큼을
   마지막 셀의 오른쪽 안쪽 여백으로 비워 두면 줄은 끝까지 그어지고 값만 제자리에 선다. */
.wc-tbl.rate th:first-child,.wc-tbl.rate td:first-child{width:auto;text-align:left;}
.wc-tbl.rate th:last-child,.wc-tbl.rate td:last-child{width:188px;padding-right:130px;}
.wc-tbl.rate + .wc-sub{margin-top:26px;}
.wc-tbl thead th{font-size:11px;font-weight:600;color:var(--b400);white-space:nowrap;}
/* 강조 띠는 행 전체에 건다. td 에만 걸면 왼쪽 절반이 잘려 보인다. */
.wc-tbl tr.base th,.wc-tbl tr.base td{background:var(--b100);}
.wc-tbl th[scope="row"]{text-align:left;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;}
/* 라벨은 왼쪽, 나머지는 전부 오른쪽. 판정이 문장이던 시절의 왼쪽 정렬이 남아
   알약만 혼자 왼쪽에 붙어 있었다. 숫자 축과 판정 축이 어긋나면 표가 두 개로 읽힌다. */
.wc-tbl td:last-child{text-align:right;}
.wc-tbl .hi{font-weight:700;font-variant-numeric:tabular-nums;}
/* 지금 서 있는 가정. 나머지 두 줄은 그 가정이 틀렸을 때를 보여준다. */
.wc-tbl tr.base th[scope="row"]::after{content:"현재 가정";display:block;margin-top:3px;
  font-size:10.5px;font-weight:600;color:var(--b400);}
.wc-sub{margin-top:24px;font-size:12px;font-weight:700;color:var(--b500);}
.wc-sub + .wc-tbl,.wc-sub + .beats,.wc-sub + .shots{margin-top:10px;}
.wc-vis > .wc-sub:first-child{margin-top:0;}

/* 3 · 촬영 지시와 금지. WPM·컷 밀도는 편집자 지표라 뺐다. */
.shots{list-style:none;display:flex;flex-direction:column;gap:8px;}
.shots li{display:flex;gap:12px;align-items:baseline;}
.shots .dk{flex:none;width:34px;font-size:12px;font-weight:700;color:var(--b400);}
.shots .dv{font-size:13.5px;font-weight:700;line-height:1.5;}
/* 타임라인. 초 값은 실측 컷 시트 그대로다. 첫 구간에서 승부가 나므로 거기만 반전한다. */
.beats{list-style:none;display:flex;flex-direction:column;gap:2px;}
.beats li{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:9px;background:var(--b100);}
.beats .bt{flex:none;min-width:34px;font-size:11.5px;font-weight:600;color:var(--b400);
  font-variant-numeric:tabular-nums;}
.beats .bl{font-size:13.5px;font-weight:700;}
.beats li.first{background:var(--b800);}
.beats li.first .bt{color:var(--b300);}
.beats li.first .bl{color:var(--b-white);}

/* 재생 헤드가 구간을 훑는다. 0초부터 14초까지 한 바퀴 도는 데 8.4초.
   구간이 켜질 때 오른쪽으로 살짝 밀려 재생 중임을 알린다.
   화면에 있을 때만 돈다 — site.js 가 .spin 을 붙였다 뗀다. */
.beats li{position:relative;overflow:hidden;transition:background .2s;}
.beats li::after{content:"";position:absolute;inset:0;background:var(--b800);
  transform:scaleX(0);transform-origin:left;opacity:.06;}
.work-deck.spin .beats li::after{animation:beatPlay 8.4s linear infinite;}
.work-deck.spin .beats li:nth-child(2)::after{animation-delay:1.4s;}
.work-deck.spin .beats li:nth-child(3)::after{animation-delay:2.8s;}
.work-deck.spin .beats li:nth-child(4)::after{animation-delay:4.2s;}
.work-deck.spin .beats li:nth-child(5)::after{animation-delay:5.6s;}
.work-deck.spin .beats li:nth-child(6)::after{animation-delay:7.0s;}
@keyframes beatPlay{
  0%{transform:scaleX(0);transform-origin:left;}
  6%{transform:scaleX(1);transform-origin:left;}
  16%{transform:scaleX(1);transform-origin:right;}
  22%,100%{transform:scaleX(0);transform-origin:right;}
}
.work-deck.spin .beats li .bl{transition:transform .3s ease;}
.work-deck.spin .beats li{animation:beatNudge 8.4s linear infinite;}
.work-deck.spin .beats li:nth-child(2){animation-delay:1.4s;}
.work-deck.spin .beats li:nth-child(3){animation-delay:2.8s;}
.work-deck.spin .beats li:nth-child(4){animation-delay:4.2s;}
.work-deck.spin .beats li:nth-child(5){animation-delay:5.6s;}
.work-deck.spin .beats li:nth-child(6){animation-delay:7.0s;}
@keyframes beatNudge{
  0%,4%{padding-left:12px;}
  8%,16%{padding-left:18px;}
  22%,100%{padding-left:12px;}
}
@media (prefers-reduced-motion:reduce){
  .work-deck.spin .beats li,.work-deck.spin .beats li::after{animation:none;}
}

.work-nav{margin-top:32px;display:flex;align-items:center;gap:14px;}
.wn-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--b300);background:var(--b-white);
  font-size:14px;color:var(--b600);cursor:pointer;display:none;}
.wn-btn:hover{border-color:var(--b800);color:var(--b800);}
.wn-btn[disabled]{opacity:.35;cursor:default;}
.wn-dots{display:none;gap:7px;}
.wn-dots i{width:7px;height:7px;border-radius:50%;background:var(--b300);}
.wn-dots i.on{background:var(--b800);}

@media(max-width:1080px){
  /* 세 장을 나란히 두면 표가 뭉개진다. 옆으로 넘긴다.
     레일은 컨테이너 좌우 여백을 뚫고 나가되(margin 음수) 같은 만큼 안쪽 패딩을 준다.
     그래야 첫 장과 끝 장이 화면 가장자리에 붙지 않고, 스냅도 여백 기준으로 선다.
     이 짝(margin 음수 + padding + scroll-padding)이 없으면 카드가 잘린 채 물린다. */
  .work-deck{--rail-pad:20px;}
  .work-rail{
    grid-auto-columns:min(84%,420px);
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-left:var(--rail-pad);
    margin-inline:calc(-1 * var(--rail-pad));
    padding:4px var(--rail-pad) 8px;
    gap:14px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;cursor:grab;
  }
  .work-rail::-webkit-scrollbar{display:none;}
  .work-rail.dragging{cursor:grabbing;scroll-snap-type:none;}
  .wcard{scroll-snap-align:start;scroll-snap-stop:always;}
  /* 화살표는 손가락이 하는 일을 중복한다. 점만 남긴다. */
  .wn-btn{display:none;}
  .wn-dots{display:flex;justify-content:center;width:100%;}
  .work-nav{margin-top:22px;}
}
@media(max-width:640px){
  .work-rail{grid-auto-columns:88%;}
  .wcard{padding:28px 22px 26px;}
  .wc-nums{gap:14px;}
  .wc-nums.three{gap:8px;}
  .wc-nums b{font-size:26px;}
}
.wn-dots i{transition:width .25s,background .25s;}
.wn-dots i.on{width:20px;border-radius:4px;}

/* ============ 콘텐츠 유형 릴 (influencer 이식) ============ */
.vt{padding:70px 0 0;text-align:center;}
.vt .vt-t{font-family:var(--disp);font-size:clamp(24px,3.4vw,40px);font-weight:800;letter-spacing:-.03em;}
.vt .vt-d{margin-top:12px;font-size:14.5px;color:var(--b400);}
.vt .reel-zone{padding:36px 0 24px;}
/* ============ 함께한 브랜드 그리드 (influencer 스펙) ============ */
.brand-grid{max-width:1100px;margin:56px auto 0;display:grid;grid-template-columns:repeat(6,1fr);
  justify-items:center;align-items:center;gap:44px 40px;}
.brand-grid .bc{display:flex;align-items:center;justify-content:center;}
.brand-grid .bc img{height:30px;width:auto;filter:brightness(0);opacity:.78;transition:opacity .2s;}
.brand-grid .bc img:hover{opacity:1;}
.brand-grid .bt{font-size:20px;font-weight:800;letter-spacing:-.01em;color:var(--b800);opacity:.78;line-height:1;}
@media(max-width:900px){.brand-grid{grid-template-columns:repeat(4,1fr);gap:36px 22px;}}
@media(max-width:560px){.brand-grid{grid-template-columns:repeat(3,1fr);gap:30px 18px;margin-top:40px;}
  .brand-grid .bt{font-size:16px;}}


/* ============ tempo Report 판매 페이지 ============ */
.report-page{background:#F5F5F7;color:var(--b800);}
.report-page .nav-r .btn.gray{background:#fff;}
.report-subnav{top:72px;margin-top:72px;}
.report-hero{position:relative;min-height:calc(100svh - 72px);padding:140px 20px 80px;background:#0A0A0B;color:#fff;overflow:hidden;display:grid;place-items:center;text-align:center;}
.report-hero__bg{position:absolute;inset:-8%;display:grid;place-items:center;opacity:.14;filter:grayscale(1) blur(2px);pointer-events:none;}
.report-hero__bg img{width:min(1100px,86vw);border-radius:26px;transform:rotate(-4deg) scale(1.06);box-shadow:0 50px 140px rgba(0,0,0,.7);}
.report-hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 64% 54% at 50% 47%,rgba(10,10,11,.9),rgba(10,10,11,.4) 68%,transparent);}
.report-hero__inner{position:relative;z-index:1;max-width:980px;margin:0 auto;}
.report-badge{margin-bottom:28px;background:rgba(255,255,255,.94);}
.report-eyebrow{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--b500);}
.report-hero .report-eyebrow{color:rgba(255,255,255,.58);}
.report-hero h1{font-family:var(--disp);font-size:clamp(48px,8vw,104px);font-weight:800;line-height:1.02;letter-spacing:-.055em;}
.report-hero__copy{max-width:780px;margin:28px auto 0;font-size:clamp(17px,2vw,24px);font-weight:650;line-height:1.58;color:rgba(255,255,255,.72);letter-spacing:-.018em;}
.report-hero__actions{margin-top:34px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;}
.report-hero__actions .btn{min-height:52px;display:inline-flex;align-items:center;padding:0 30px;font-size:15.5px;}
.report-hero__actions .btn.black{background:#fff;color:var(--b800);}
.report-hero__actions .btn.white{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.22);}
.report-hero__terms{margin:26px auto 0;max-width:760px;font-size:14px;line-height:1.7;font-weight:700;color:rgba(255,255,255,.72);}
.report-hero__terms b{color:#fff;font-weight:800;}
.report-price{display:inline-flex;align-items:baseline;gap:9px;flex-wrap:wrap;justify-content:center;}
.report-price s{opacity:.5;text-decoration-thickness:1.5px;font-weight:700;}
.report-price b{font-size:1.24em;letter-spacing:-.02em;}
.report-price i{font-style:normal;font-size:.82em;font-weight:800;letter-spacing:-.01em;border-radius:999px;padding:3px 9px;background:#FF3B30;color:#fff;}
.report-price[data-launch-expired] s,.report-price[data-launch-expired] i{display:none;}
.report-cta-bar .cta-copy .report-price{justify-content:flex-start;color:var(--b800);}
.report-cta-bar .cta-copy .report-price s{color:var(--b400);}
.report-product-card strong s{display:block;font-size:13px;font-weight:700;color:var(--b400);text-decoration-thickness:1.5px;margin-bottom:2px;}
.report-hero__urgency{margin:22px auto 0;display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);border-radius:999px;padding:12px 22px;}
.report-hero__urgency b{font-family:var(--disp);font-size:clamp(18px,2.1vw,25px);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:#fff;}
.report-hero__urgency span{font-size:13px;line-height:1.5;font-weight:700;color:rgba(255,255,255,.72);}
.report-hero__proof{margin:24px auto 0;max-width:720px;font-size:14px;line-height:1.7;font-weight:700;color:rgba(255,255,255,.6);}
.report-hero__proof b{color:#fff;font-weight:800;}
.report-hero__proof span{opacity:.7;font-size:.92em;}

.report-trust{background:#fff;border-bottom:1px solid var(--b200);display:grid;grid-template-columns:minmax(0,1.08fr) minmax(400px,.92fr);gap:64px;padding:96px max(20px,calc((100vw - 1280px)/2));align-items:start;}
.report-trust__lead{margin-top:20px;max-width:620px;font-size:16px;line-height:1.72;font-weight:650;color:var(--b500);}
.report-trust__brands .brand-grid{max-width:none;margin-top:40px;grid-template-columns:repeat(4,1fr);gap:34px 20px;}
.report-trust__brands .report-fine{margin-top:34px;}
.report-trust__creds{display:grid;gap:12px;}
.report-trust__creds article{border:1px solid var(--b200);border-radius:20px;padding:22px 24px;background:#fff;}
.report-trust__creds article b{display:block;margin-top:12px;font-size:18px;letter-spacing:-.025em;line-height:1.35;}
.report-trust__creds article>span:last-child{display:block;margin-top:9px;font-size:13.5px;line-height:1.7;color:var(--b500);font-weight:550;}
.report-cred__badge{height:26px;width:auto;display:block;}
.report-cred__badge--forbes{height:22px;}
.report-cred__badge--snu{height:34px;}
.report-cred__note{display:block;margin-top:9px;font-size:12px;font-weight:800;letter-spacing:-.01em;color:var(--b500);}
.report-stars{font-size:.62em;letter-spacing:2px;color:#FFC02D;}
.report-cred__mark{display:inline-flex;align-items:baseline;gap:7px;font-family:var(--disp);font-size:20px;font-weight:800;letter-spacing:-.03em;color:var(--b800);}
.report-cred__mark em{font-family:var(--kr);font-style:normal;font-size:12px;font-weight:800;letter-spacing:0;color:var(--b500);}
.report-trust__stat{margin-top:6px;border:1px solid var(--b800);border-radius:20px;padding:22px 24px;background:var(--b800);color:#fff;}
.report-trust__stat b{display:flex;align-items:center;gap:14px;font-family:var(--disp);font-size:clamp(38px,4.4vw,54px);line-height:1;letter-spacing:-.06em;}
.report-trust__stat span{display:block;margin-top:12px;font-size:13px;line-height:1.7;color:rgba(255,255,255,.66);font-weight:600;}
.report-trust__actions{margin-top:8px;display:flex;gap:10px;flex-wrap:wrap;}

.report-preview{padding:0 0 130px;overflow:clip;scroll-margin-top:120px;}
.report-preview__story{height:430svh;position:relative;}
.report-preview__sticky{position:sticky;top:120px;height:calc(100svh - 190px);box-sizing:border-box;padding:16px 0;display:flex;flex-direction:column;gap:12px;overflow:hidden;}
.report-preview__meta{width:min(96vw,1680px);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);align-items:end;gap:40px;}
.report-preview__meta h2{margin-top:9px;font-family:var(--disp);font-size:clamp(30px,4vw,54px);line-height:1.04;letter-spacing:-.045em;font-weight:800;}
.report-preview__meta>p{max-width:650px;font-size:15px;line-height:1.58;color:var(--b500);font-weight:650;}
.report-preview__stage{width:min(96vw,1680px);margin:0 auto;flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;}
.report-browser{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;background:#111113;border:1px solid rgba(255,255,255,.1);border-radius:30px;padding:14px;box-shadow:0 42px 120px rgba(29,29,31,.24);overflow:hidden;}
.report-browser::before{content:"";position:absolute;inset:-30% -10% auto;height:420px;background:radial-gradient(circle at 30% 40%,rgba(255,255,255,.18),transparent 60%);pointer-events:none;}
.report-browser__top{position:relative;z-index:1;height:42px;flex:0 0 42px;display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.56);font-size:12px;font-weight:700;padding:0 8px;}
.report-browser__top span{width:10px;height:10px;border-radius:50%;background:#3B3B40;}
.report-browser__top span:nth-child(1){background:#FF5F57;}
.report-browser__top span:nth-child(2){background:#FEBC2E;}
.report-browser__top span:nth-child(3){background:#28C840;}
.report-browser__top b{margin-left:10px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.report-preview__expand{margin-left:auto;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(255,255,255,.08);color:#fff;padding:8px 13px;font:750 12px var(--kr);cursor:pointer;white-space:nowrap;}
.report-preview__expand:hover{background:rgba(255,255,255,.16);}
.report-preview__expand:focus-visible,.report-preview__tab:focus-visible,.report-preview-dialog button:focus-visible{outline:2px solid #2997FF;outline-offset:3px;}
.report-preview__viewport{position:relative;z-index:1;flex:1;min-height:0;overflow:hidden;border-radius:20px;background:#fff;}
.report-preview__track{display:flex;height:100%;will-change:transform;}
.report-shot{position:relative;flex:0 0 100%;width:100%;height:100%;border-radius:0;background:#fff;object-fit:cover;object-position:top left;}
.report-preview__tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;border:1px solid var(--b200);border-radius:16px;background:var(--b200);overflow:hidden;flex:0 0 auto;}
.report-preview__tab{appearance:none;border:0;background:#fff;padding:10px 14px;text-align:left;color:var(--b800);cursor:pointer;font-family:var(--kr);display:flex;align-items:center;gap:10px;min-height:50px;}
.report-preview__tab.on{background:#111113;color:#fff;}
.report-preview__tab span,.report-preview__tab b{display:block;}
.report-preview__tab span{font-size:10px;font-weight:800;color:var(--b500);}
.report-preview__tab b{font-size:13px;line-height:1.25;letter-spacing:-.02em;}
.report-preview__tab.on span{color:rgba(255,255,255,.55);}
.report-fine{font-size:12.5px;line-height:1.7;color:var(--b500);font-weight:600;}
.report-preview__note{margin-top:10px;font-size:13px;line-height:1.62;font-weight:600;color:var(--b500);}
.report-preview__note b{color:var(--b800);font-weight:800;}
.report-preview__foot{width:min(96vw,1680px);margin:28px auto 0;padding:0 8px;}
.report-preview__disclosure{margin:0;}
.report-preview__close{margin-top:22px;padding-top:22px;border-top:1px solid var(--b200);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;}
.report-preview__close p{font-size:15.5px;line-height:1.7;font-weight:650;color:var(--b500);}
.report-preview__close b{color:var(--b800);font-weight:800;}
.report-preview__cta{display:flex;gap:10px;flex-wrap:wrap;}
.report-preview__cta .btn{min-height:52px;display:inline-flex;align-items:center;padding:0 26px;}
.report-preview-dialog{width:96vw;height:92vh;max-width:none;max-height:none;margin:auto;padding:0;border:0;border-radius:24px;background:#111113;color:#fff;box-shadow:0 50px 180px rgba(0,0,0,.55);overflow:hidden;}
.report-preview-dialog[open]{display:flex;flex-direction:column;}
.report-preview-dialog::backdrop{background:rgba(0,0,0,.82);backdrop-filter:blur(10px);}
.report-preview-dialog__bar{height:58px;flex:0 0 58px;display:flex;align-items:center;gap:16px;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.12);}
.report-preview-dialog__bar b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.report-preview-dialog__bar button{margin-left:auto;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(255,255,255,.08);color:#fff;padding:8px 13px;font:750 12px var(--kr);cursor:pointer;}
.report-preview-dialog__canvas{flex:1;min-height:0;overflow:auto;background:#fff;}
.report-preview-dialog__canvas img{display:block;width:max(100%,1000px);height:auto;}

.report-deliverables,.report-cases,.report-process,.report-fit,.report-order{padding:130px 20px;}
.report-grid{margin-top:62px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.report-grid article{background:#fff;border:1px solid var(--b200);border-radius:24px;padding:30px;min-height:260px;box-shadow:0 2px 12px rgba(29,29,31,.04);}
.report-grid span{font-size:12px;font-weight:800;color:var(--b500);}
.report-grid h3{margin-top:20px;font-size:23px;letter-spacing:-.025em;}
.report-grid p{margin-top:12px;font-size:14.5px;line-height:1.72;color:var(--b500);font-weight:550;}
.report-grid article.report-grid__lead{grid-column:span 3;background:var(--b800);border-color:var(--b800);color:#fff;display:flex;flex-direction:column;min-height:0;padding:38px;}
.report-grid article.report-grid__lead span{color:rgba(255,255,255,.5);}
.report-grid article.report-grid__lead h3{margin-top:16px;font-size:clamp(26px,2.7vw,34px);letter-spacing:-.03em;line-height:1.24;}
.report-grid article.report-grid__lead p{color:rgba(255,255,255,.68);font-size:16px;max-width:900px;}
.report-grid article.report-grid__lead .report-grid__proof{margin-top:auto;padding-top:18px;font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.5);}
.report-deliverables__foot{margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;border-top:1px solid var(--b200);padding-top:26px;}
.report-deliverables__foot p{font-size:15.5px;line-height:1.7;font-weight:650;color:var(--b500);max-width:640px;}
.report-deliverables__foot b{color:var(--b800);font-weight:800;}
.report-deliverables__foot .btn{min-height:52px;display:inline-flex;align-items:center;padding:0 26px;}

.report-cases{background:#fff;}
.report-case-notice{margin-top:22px;max-width:820px;font-size:14px;line-height:1.72;font-weight:600;color:var(--b500);}
.report-case-grid{margin-top:48px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.report-case{border:1px solid var(--b200);border-radius:26px;padding:34px;background:#fff;display:flex;flex-direction:column;}
.report-case__tag{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--b500);}
.report-case__before{margin-top:16px;font-size:17px;line-height:1.6;font-weight:650;color:var(--b500);}
.report-case__before b{display:block;margin-top:5px;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.03em;color:var(--b800);font-weight:800;}
.report-case__answers{margin-top:26px;display:grid;gap:1px;background:var(--b200);border:1px solid var(--b200);border-radius:18px;overflow:hidden;}
.report-case__answers>div{background:#fff;padding:22px;}
.report-case__answers>div>b{display:block;font-size:17px;line-height:1.42;letter-spacing:-.025em;}
.report-case__answers>div>span{display:block;margin-top:9px;font-size:14px;line-height:1.72;color:var(--b500);font-weight:550;}
.report-case__basis{margin-top:auto;padding-top:20px;font-size:12.5px;line-height:1.7;font-weight:700;color:var(--b400);}
.report-cases__foot{margin-top:24px;padding-top:24px;border-top:1px solid var(--b200);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.report-cases__foot p{font-size:17px;line-height:1.6;font-weight:750;color:var(--b800);}
.report-cases__foot .btn{min-height:52px;display:inline-flex;align-items:center;padding:0 26px;}

.report-process{background:#111113;color:#fff;}
.report-process .h1{color:#fff;}
.report-process .report-eyebrow,.report-process .report-fine{color:rgba(255,255,255,.55);}
.report-process__split{margin-top:56px;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:18px;align-items:stretch;}
.report-process__who{font-size:12px;font-weight:800;letter-spacing:.1em;color:rgba(255,255,255,.5);}
.report-process__you{background:#fff;color:var(--b800);border-radius:24px;padding:32px;display:flex;flex-direction:column;}
.report-process__you .report-process__who{color:var(--b500);}
.report-process__you b{margin-top:14px;font-size:clamp(21px,2.2vw,27px);letter-spacing:-.03em;line-height:1.3;}
.report-process__you ul{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:1px;background:var(--b200);border:1px solid var(--b200);border-radius:16px;overflow:hidden;}
.report-process__you li{background:#fff;padding:12px 16px;font-size:14.5px;font-weight:700;}
.report-process__you>p{margin-top:auto;padding-top:20px;font-size:13.5px;line-height:1.7;color:var(--b500);font-weight:600;}
.report-process__us{display:flex;flex-direction:column;}
.report-timeline{margin-top:14px;flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.14);border-radius:24px;overflow:hidden;}
.report-timeline div{background:#18181B;min-height:200px;padding:26px;display:flex;flex-direction:column;justify-content:space-between;}
.report-timeline b{font-size:14px;color:rgba(255,255,255,.5);}
.report-timeline span{font-size:16.5px;font-weight:800;line-height:1.45;letter-spacing:-.02em;}
.report-process__safety{margin-top:18px;border:1px solid rgba(255,255,255,.2);border-radius:24px;padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;}
.report-process__safety b{font-size:20px;letter-spacing:-.025em;}
.report-process__safety span{display:block;margin-top:10px;max-width:720px;font-size:14.5px;line-height:1.72;color:rgba(255,255,255,.66);font-weight:550;}
.report-process__safety span b{color:#fff;font-size:inherit;font-weight:800;}
.report-process__safety .btn{min-height:52px;display:inline-flex;align-items:center;padding:0 26px;flex:0 0 auto;}
.report-process .report-fine{margin-top:22px;}

.report-fit{background:#fff;}
.report-fit .h1{max-width:900px;}
.report-fit__grid{margin-top:52px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.report-fit__grid article{border:1px solid var(--b200);border-radius:26px;padding:34px;display:flex;flex-direction:column;}
.report-fit__grid h3{font-size:21px;letter-spacing:-.025em;}
.report-fit__grid ul{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:14px;}
.report-fit__grid li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.7;font-weight:600;color:var(--b500);}
.report-fit__grid li b{color:var(--b800);font-weight:800;}
.report-fit__yes{background:var(--b800);border-color:var(--b800);color:#fff;}
.report-fit__yes h3{color:#fff;}
.report-fit__yes li{color:rgba(255,255,255,.72);}
.report-fit__yes li b{color:#fff;}
.report-fit__yes li::before{content:"";position:absolute;left:0;top:9px;width:13px;height:8px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg);}
.report-fit__no li::before{content:"";position:absolute;left:2px;top:11px;width:12px;height:2.5px;background:var(--b400);}
.report-fit__no>p{margin-top:auto;padding-top:22px;font-size:14.5px;line-height:1.72;font-weight:750;color:var(--b800);}
.report-fit__foot{margin-top:24px;padding-top:24px;border-top:1px solid var(--b200);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.report-fit__foot p{font-size:17px;line-height:1.6;font-weight:750;color:var(--b800);}
.report-fit__foot .btn{min-height:52px;display:inline-flex;align-items:center;padding:0 26px;}

.report-payment-result{max-width:920px;margin:80px auto 0;padding:48px 28px;text-align:center;background:#fff;border:1px solid var(--b200);border-radius:30px;box-shadow:0 18px 50px rgba(29,29,31,.08);}
.report-payment-result[hidden]{display:none;}
.report-payment-result h2{margin-top:12px;font-family:var(--disp);font-size:clamp(34px,5vw,58px);line-height:1.1;letter-spacing:-.045em;}
.report-payment-result>p:not(.report-eyebrow){margin:18px auto 0;max-width:620px;color:var(--b500);font-size:15px;line-height:1.7;font-weight:600;}
.report-payment-result .btn{margin-top:24px;}

.report-order{background:#E8E8ED;}
.report-order__intro{max-width:900px;margin:0 auto;text-align:center;}
.report-order__intro p:last-child{margin-top:22px;font-size:15.5px;line-height:1.7;color:var(--b500);font-weight:600;}
.report-checkout{max-width:1120px;margin:64px auto 0;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:18px;text-align:left;}
.report-checkout__left,.report-checkout__right{background:#fff;border:1px solid var(--b200);border-radius:30px;padding:26px;box-shadow:0 18px 50px rgba(29,29,31,.08);}
.report-checkout__right{position:sticky;top:148px;height:max-content;}
.report-product-card{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:flex-start;border:1px solid var(--b200);border-radius:20px;padding:20px;cursor:pointer;}
.report-product-card+.report-product-card{margin-top:12px;}
.report-product-card.checked{border-color:var(--b800);background:#F8F8FA;}
.report-product-card input{margin-top:5px;accent-color:var(--b800);}
.report-product-card b{display:block;font-size:18px;letter-spacing:-.02em;}
.report-product-card em{display:block;margin-top:6px;font-size:13.5px;line-height:1.55;color:var(--b500);font-style:normal;font-weight:600;}
.report-product-card strong{white-space:nowrap;font-size:18px;letter-spacing:-.02em;}
.report-buyer-grid{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.report-buyer-grid label{display:grid;gap:8px;font-size:12.5px;font-weight:800;color:var(--b500);}
.report-buyer-grid input{width:100%;border:1px solid var(--b200);border-radius:14px;background:#F5F5F7;padding:14px 15px;font:650 15px var(--kr);color:var(--b800);}
.report-buyer-grid input:focus-visible{outline:2px solid var(--b800);outline-offset:2px;border-color:var(--b800);background:#fff;}
.report-consent{margin-top:18px;display:flex;gap:12px;align-items:flex-start;background:#F5F5F7;border:1px solid var(--b200);border-radius:18px;padding:18px;}
.report-consent input{margin-top:3px;accent-color:var(--b800);flex-shrink:0;}
.report-consent span{font-size:12.5px;line-height:1.72;color:var(--b500);font-weight:600;}
.report-consent b{display:block;color:var(--b800);font-size:13px;margin-bottom:4px;}
.report-total{border-bottom:1px solid var(--b200);padding-bottom:20px;}
.report-total span,.report-total em{display:block;font-size:12.5px;font-weight:800;color:var(--b500);font-style:normal;}
.report-total b{display:block;margin-top:8px;font-family:var(--disp);font-size:38px;letter-spacing:-.04em;}
.report-total em{margin-top:4px;}
.report-payment-box{margin-top:20px;border:1px dashed var(--b300);border-radius:18px;padding:16px;}
#report-payment-methods:empty,#report-payment-agreement:empty{display:none;}
.report-payment-note{font-size:12px;line-height:1.65;color:var(--b500);font-weight:600;}
.report-pay-button{width:100%;margin-top:18px;padding:15px 20px;font-size:15.5px;}
.report-pay-button:disabled{opacity:.55;cursor:not-allowed;}
.report-order-status{min-height:22px;margin-top:12px;font-size:12.5px;line-height:1.6;color:var(--b500);font-weight:700;}
.report-order-status[data-tone="warn"]{color:#B42318;}
.report-order-status[data-tone="ok"]{color:#067647;}
.report-gap{background:#F5F5F7;padding:130px 20px;}
.report-gap .h1{max-width:1000px;}
.report-gap__viz{margin-top:52px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:18px;align-items:stretch;}
.report-gap__chart{background:#fff;border:1px solid var(--b200);border-radius:26px;padding:30px 32px 26px;display:flex;flex-direction:column;}
.report-gap__chart figcaption{font-size:13px;font-weight:800;letter-spacing:-.01em;color:var(--b500);}
.report-gap__chart svg{margin-top:10px;width:100%;height:auto;overflow:visible;}
.report-gap__chart>p{margin-top:auto;padding-top:16px;font-size:14.5px;line-height:1.72;font-weight:650;color:var(--b500);}
/* 지금 분기는 페이지가 이미 쓰는 강조색, 지난 분기는 후퇴. 두 막대 모두 값을
   직접 라벨로 달아 색만으로 구분하지 않는다. */
.gapAxis{stroke:var(--b300);stroke-width:1;}
.gapBar--prev{fill:var(--b300);}
.gapBar--now{fill:#FF3B30;}
.gapVal{font-family:var(--disp);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;fill:var(--b800);font-size:19px;}
.gapVal--muted{fill:var(--b400);font-size:16px;}
.gapVal--big{font-size:30px;}
.gapDelta{font-family:var(--disp);font-size:17px;font-weight:800;letter-spacing:-.02em;fill:#FF3B30;}
.gapYear{font-size:12.5px;font-weight:700;fill:var(--b400);}
.report-gap__side{display:grid;gap:18px;align-content:start;}
.report-gap__conc{background:var(--b800);color:#fff;border-radius:26px;padding:30px 32px;}
.report-gap__conc>p{font-size:17px;line-height:1.55;font-weight:800;letter-spacing:-.025em;}
.report-gap__bar{margin-top:20px;display:flex;gap:2px;height:36px;border-radius:8px;overflow:hidden;}
.report-gap__bar i{display:block;}
.report-gap__bar .is-top{flex:52;background:#FF3B30;}
.report-gap__bar .is-rest{flex:48;background:rgba(255,255,255,.22);}
.report-gap__barkey{margin-top:14px;display:grid;gap:7px;}
.report-gap__barkey span{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:650;color:rgba(255,255,255,.62);}
.report-gap__barkey b{color:#fff;font-weight:800;}
.report-gap__barkey em{width:11px;height:11px;border-radius:3px;flex:0 0 auto;}
.report-gap__barkey .is-top{background:#FF3B30;}
.report-gap__barkey .is-rest{background:rgba(255,255,255,.22);}
.report-gap__conc-note{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16);font-size:14px;line-height:1.7;font-weight:600;color:rgba(255,255,255,.62);}
.report-gap__mini{background:#fff;border:1px solid var(--b200);border-radius:26px;padding:24px 28px;}
.report-gap__mini figcaption{font-size:12px;font-weight:800;color:var(--b500);}
.report-gap__mini svg{margin-top:6px;width:100%;height:auto;overflow:visible;}
.report-gap__mini>p{margin-top:10px;font-size:13.5px;line-height:1.7;font-weight:650;color:var(--b500);}
.gapLine{stroke-width:2;stroke-linecap:round;fill:none;}
.gapLine--cn{stroke:var(--b500);}
.gapLine--us{stroke:#FF3B30;}
.gapDot--cn{fill:var(--b500);stroke:#fff;stroke-width:2;}
.gapDot--us{fill:#FF3B30;stroke:#fff;stroke-width:2;}
.gapMini{font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;}
.gapMini--cn{fill:var(--b400);}
.gapMini--us{fill:#FF3B30;}
.report-gap__fomo{margin-top:34px;display:grid;grid-template-columns:repeat(2,1fr);gap:40px;}
.report-gap__fomo p{font-size:16px;line-height:1.76;font-weight:600;color:var(--b500);}
.report-gap__fomo b{color:var(--b800);font-weight:800;}
.report-gap__grid p{font-size:17px;line-height:1.76;color:var(--b500);font-weight:600;}
.report-gap__grid b{color:var(--b800);font-weight:800;}
.report-gap .report-fine{margin-top:36px;}
.report-value{background:#111113;color:#fff;padding:130px 20px;}
.report-value .h1{color:#fff;max-width:1000px;}
.report-value .report-eyebrow,.report-value .report-fine{color:rgba(255,255,255,.55);}
.report-value__headline{margin-top:52px;display:flex;align-items:baseline;gap:24px;flex-wrap:wrap;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.16);}
.report-value__headline b{font-family:var(--disp);font-size:clamp(52px,7.4vw,104px);line-height:.94;letter-spacing:-.055em;}
.report-value__headline span{font-size:14.5px;line-height:1.72;font-weight:650;color:rgba(255,255,255,.6);}
.report-value__gets{margin-top:34px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.report-value__gets article{border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:26px;}
.report-value__gets b{display:block;font-size:19px;letter-spacing:-.025em;}
.report-value__gets span{display:block;margin-top:11px;font-size:14px;line-height:1.72;color:rgba(255,255,255,.62);font-weight:550;}
.report-value__assure{margin-top:18px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.report-value__assure article{border:1px solid rgba(255,255,255,.16);border-radius:24px;padding:30px;}
.report-value__assure h3{font-size:21px;letter-spacing:-.025em;}
.report-value__assure p{margin-top:12px;font-size:14.5px;line-height:1.72;color:rgba(255,255,255,.62);font-weight:550;}
.report-value .report-fine{margin-top:26px;}
.report-order-urgency{margin-top:14px;border:1px solid var(--b200);border-radius:16px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--b100);}
.report-order-urgency b{font-family:var(--disp);font-size:19px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.report-order-urgency .report-price{gap:7px;}
.report-order-urgency .report-price s{font-size:12.5px;color:var(--b400);}
.report-order-urgency .report-price i{font-size:11.5px;padding:3px 8px;}
.report-product-card em i{display:block;margin-top:7px;font-style:normal;font-size:12px;color:var(--b400);font-weight:650;}
.report-order-assure{margin-top:14px;font-size:13px;line-height:1.6;font-weight:750;color:var(--b500);text-align:center;}
.report-intake{margin-top:14px;font-size:13.5px;line-height:1.66;font-weight:750;color:#fff;}
.report-order-assure.report-intake{margin-top:6px;color:var(--b800);}
.report-reviews{background:#fff;padding:130px 20px;border-top:1px solid var(--b200);}
.report-reviews__summary{margin-top:26px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.report-reviews__summary b{font-family:var(--disp);font-size:clamp(30px,3.4vw,44px);line-height:1;letter-spacing:-.04em;}
.report-reviews__summary span{font-size:15px;font-weight:750;color:var(--b500);}
.report-reviews__demo{font-style:normal;font-size:12px;font-weight:800;border-radius:999px;padding:5px 11px;background:#FFF3CD;color:#7A5B00;border:1px solid #F2D98B;}
.report-reviews__list{margin-top:34px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.report-reviews__list:empty{margin-top:0;}
.report-review{background:#fff;border:1px solid var(--b200);border-radius:22px;padding:26px;box-shadow:0 2px 12px rgba(29,29,31,.04);}
.report-review.is-demo{border-style:dashed;}
.report-review__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.report-review__top b{font-size:17px;line-height:1.4;letter-spacing:-.02em;}
.report-review__stars{flex:0 0 auto;font-size:13px;letter-spacing:1px;color:#1D1D1F;}
.report-review p{margin-top:14px;font-size:14.5px;line-height:1.75;color:var(--b500);font-weight:550;}
.report-review footer{margin-top:18px;padding-top:14px;border-top:1px solid var(--b200);font-size:12.5px;font-weight:700;color:var(--b400);}
.report-review footer i{font-style:normal;color:#067647;font-weight:800;}
.report-reviews__empty{margin-top:28px;max-width:720px;font-size:15px;line-height:1.75;font-weight:650;color:var(--b500);}
.report-reviews .report-fine{margin-top:22px;}
.report-faq{background:#F5F5F7;}
.report-faq__foot{margin-top:34px;padding-top:28px;border-top:1px solid var(--b200);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.report-faq__foot p{font-size:17px;line-height:1.6;font-weight:750;color:var(--b800);}
.report-faq__foot div{display:flex;gap:10px;flex-wrap:wrap;}
.report-faq__foot .btn{min-height:52px;display:inline-flex;align-items:center;padding:0 26px;}
.report-cta-bar .cta-inner>a{padding:13px 24px;}

@media(max-width:1024px){
  .report-trust{grid-template-columns:1fr;gap:44px;padding:72px 20px;}
  .report-trust__brands .brand-grid{grid-template-columns:repeat(4,1fr);}
  .report-checkout__right{position:relative;top:auto;}
  .report-preview__meta{grid-template-columns:1fr;gap:8px;}
  .report-preview__tabs{display:flex;overflow-x:auto;scroll-snap-type:x proximity;border-radius:16px;}
  .report-preview__tab{flex:0 0 190px;scroll-snap-align:start;}
  .report-grid{grid-template-columns:1fr 1fr;}
  .report-grid article.report-grid__lead{grid-column:span 2;}
  .report-case-grid,.report-checkout{grid-template-columns:1fr;}
  .report-fit__grid{grid-template-columns:1fr;}
  .report-gap__fomo,.report-value__assure{grid-template-columns:1fr;}
  .report-gap__viz{grid-template-columns:1fr;}
  .report-reviews__list{grid-template-columns:1fr;}
  .report-trust__brands .brand-grid{grid-template-columns:repeat(3,1fr);gap:28px 16px;}
  .report-value__compare{grid-template-columns:1fr;}
  .report-process__split{grid-template-columns:1fr;}
  .report-timeline{grid-template-columns:1fr 1fr;}
  .report-timeline div{min-height:130px;}
}
@media(max-width:640px){
  .report-subnav{display:none;}
  .report-hero{padding-top:128px;min-height:auto;}
  .report-hero__bg img{width:118vw;}
  .report-hero::after{background:radial-gradient(ellipse 130% 62% at 50% 44%,rgba(10,10,11,.95),rgba(10,10,11,.78) 68%,rgba(10,10,11,.58));}
  .report-hero h1{font-size:clamp(42px,13vw,64px);}
  .report-grid{grid-template-columns:1fr;}
  .report-grid article.report-grid__lead{grid-column:span 1;}
  /* 이 3열만 무너지는 규칙이 없어 320~430px 에서 페이지가 458px 로 고정돼 있었다
     (390px 에서 68px 옆으로 밀림). 옆의 report 그리드들과 같이 한 열로 떨어뜨린다. */
  .report-value__gets{grid-template-columns:1fr;}
  .report-deliverables__foot .btn{width:100%;justify-content:center;}
  .report-preview{padding:0 0 88px;scroll-margin-top:72px;}
  .report-preview__story{height:430dvh;}
  .report-preview__sticky{top:72px;height:calc(100dvh - 72px);padding:12px 0;justify-content:center;}
  .report-preview__meta,.report-preview__stage,.report-preview__disclosure{width:calc(100vw - 24px);}
  .report-preview__meta h2{margin-top:6px;font-size:clamp(28px,8vw,36px);}
  .report-preview__meta>p{font-size:13px;line-height:1.48;}
  .report-preview__stage{margin:0 auto;flex:none;}
  .report-reviews{padding:88px 20px;}
  .report-gap,.report-value{padding:88px 20px;}
  .report-timeline{grid-template-columns:1fr;}
  .report-process__safety{padding:24px;}
  .report-process__safety .btn{width:100%;justify-content:center;}
  .report-fit__foot .btn{width:100%;justify-content:center;}
  .report-faq__foot div{width:100%;}
  .report-faq__foot .btn{width:100%;justify-content:center;}
  .report-deliverables,.report-cases,.report-process,.report-fit,.report-order{padding:88px 20px;}
  .report-browser{flex:none;aspect-ratio:.78;border-radius:22px;padding:10px;}
  .report-browser__top{height:36px;flex-basis:36px;padding:0 4px;}
  .report-browser__top b{display:none;}
  .report-preview__expand{font-size:12.5px;font-weight:800;padding:9px 14px;background:rgba(255,255,255,.2);}
  .report-preview__close{grid-template-columns:1fr;gap:18px;}
  .report-preview__cta .btn{width:100%;justify-content:center;}
  .report-preview__viewport{border-radius:14px;}
  .report-preview__tab{flex-basis:170px;padding:9px 12px;min-height:46px;}
  .report-preview-dialog{width:100vw;height:100dvh;border-radius:0;}
  .report-cases__foot .btn{width:100%;justify-content:center;}
  .report-buyer-grid{grid-template-columns:1fr;}
  .report-product-card{grid-template-columns:auto 1fr;}
  .report-product-card strong{grid-column:2;}
  .report-page .nav-r .btn.gray{display:none;}
  .report-page .nav-r .btn{white-space:nowrap;padding:9px 15px;font-size:13.5px;}
  .report-hero__urgency{width:100%;justify-content:center;padding:12px 16px;gap:8px;margin-top:18px;}
  .report-hero__terms{margin-top:20px;}
  .report-hero__proof{margin-top:18px;}
  .report-hero__actions{margin-top:28px;gap:10px;}
  .report-hero__actions .btn{min-height:48px;padding:0 20px;font-size:14.5px;}
  .report-hero__terms,.report-hero__proof{font-size:13px;}
  /* 모바일에서 sticky CTA 를 되살린다. 헤더 버튼 하나만으로는 긴 페이지에서 주문 진입점이 사라진다. */
  .report-page .cta-bar .cta-copy{display:none;}
  .report-page .cta-bar .cta-inner{padding:10px 16px;gap:0;}
  .report-page .cta-bar .cta-inner>a{width:100%;text-align:center;}
}
@media (prefers-reduced-motion:reduce){
  .report-preview__story{height:auto;}
  .report-preview__sticky{position:relative;top:auto;height:auto;min-height:0;overflow:visible;}
  .report-browser{height:min(72vh,760px);aspect-ratio:1.52;flex:none;}
  .report-preview__track{transform:none!important;}
  .report-shot{display:none;}
  .report-browser[data-shot="proposal"] .report-shot--proposal,
  .report-browser[data-shot="briefing"] .report-shot--briefing,
  .report-browser[data-shot="compare"] .report-shot--compare,
  .report-browser[data-shot="category"] .report-shot--category,
  .report-browser[data-shot="guide"] .report-shot--guide,
  .report-browser[data-shot="ledger"] .report-shot--ledger{display:block;}
}

/* ============ report 타이포 리듬 ============
   Apple 제품 페이지를 실측해 맞춘 조정이다. 그쪽은 섹션 패딩 160/216, 본문
   줄당 38~68자, 디스플레이 굵기 600 으로 간다. 이 페이지는 130/130 에 줄당
   평균 81자·최대 179자였고, 그래서 빽빽하게 읽혔다. 폭·여백·굵기 셋만 손대고
   구조는 건드리지 않는다. */

/* 1) 숨 쉴 자리. 섹션마다 위아래를 늘리고, 아래를 위보다 넉넉히 둔다. */
.report-gap,.report-value,.report-reviews,
.report-deliverables,.report-cases,.report-process,.report-fit,.report-order{
  padding-top:152px;padding-bottom:184px;}
.report-trust{padding-top:120px;padding-bottom:140px;}
.report-faq{padding-top:120px;padding-bottom:150px;}

/* 2) 줄 길이. 한 줄이 길수록 다음 줄을 찾는 데 눈이 오래 걸린다.
      1,200px 를 가로지르던 각주가 여기서 잘린다. */
.report-page main p{max-width:min(100%,660px);}
.report-fine{max-width:min(100%,720px);}
.report-case-notice{max-width:min(100%,660px);}
.report-grid article.report-grid__lead p{max-width:min(100%,700px);}
.report-grid__proof{max-width:min(100%,640px);}
.report-trust__stat span,.report-value__headline span{max-width:min(100%,520px);}
/* 가운데 정렬 구간은 폭을 줄이되 가운데를 유지한다. */
.report-hero__copy,.report-hero__terms,.report-hero__proof,
.report-order__intro p{margin-left:auto;margin-right:auto;}

/* 3) 큰 글자는 가볍게. 800 은 한글 대형 타이포에서 획이 뭉친다. */
.report-hero h1{font-weight:700;letter-spacing:-.045em;}
.report-page main .h1,.report-preview__meta h2{font-weight:700;letter-spacing:-.035em;}

/* 4) 본문은 넉넉하게. 읽는 줄과 읽는 줄 사이가 좁으면 덩어리로 보인다. */
.report-page main p{line-height:1.78;}
.report-fine{line-height:1.75;}

/* 5) 리드. 헤드라인에서 덜어낸 절반이 여기로 온다. Apple 이 28/35 로 쓰는 자리로,
      제목과 본문 사이에 한 단 더 두어 시선이 한 번에 떨어지지 않게 한다. */
.report-lead{margin-top:20px;max-width:min(100%,680px);
  font-size:clamp(19px,2.1vw,27px);line-height:1.42;font-weight:650;
  letter-spacing:-.025em;color:var(--b500);text-wrap:balance;}
.report-hero .report-lead{margin-left:auto;margin-right:auto;color:rgba(255,255,255,.82);}
.report-process .report-lead,.report-value .report-lead{color:rgba(255,255,255,.66);}
.report-order__intro .report-lead{margin-left:auto;margin-right:auto;}
.report-page main .h1{text-wrap:balance;}

/* ============ report 모션·컨트롤 정리 ============
   Apple 제품 페이지 실측: 전환 0.32s 가 지배적이고 컨트롤 높이는 44px 로 일정,
   콘텐츠 폭은 1183px. 이 페이지는 리빌이 0.7s 였고 버튼이 42/49/52 로 갈렸다. */

/* 1) 0.7s 는 눈이 이미 지나간 뒤에 글이 도착한다. 긴 페이지일수록 손해다. */
.report-page .rv{transition-duration:.32s;transform:translate3d(0,18px,0);}
.report-page .rv.on{transform:translate3d(0,0,0);}

/* 2) 컨트롤은 한 치수로. 문장 버튼이 42·49·52 로 섞여 있었다. */
.report-page main a.btn,.report-page main button.btn{
  min-height:52px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 26px;font-size:16px;}
.report-page .report-pay-button{width:100%;}

/* 3) 본문 폭. 카드 그리드가 조금 좁아지며 한 칸에 들어가는 글자 수도 함께 준다. */
.report-page main .container{max-width:1180px;}

/* ============ report 마감 손질 ============ */
/* 약관을 세 단으로 갈라 값·조건·안전장치가 각각 한 줄을 갖게 한다.
   가운뎃점으로 넷을 잇던 줄은 어디서 끊어 읽을지 알 수 없었다. */
.report-hero__terms{margin-top:22px;}
.report-hero__terms--sub{margin-top:10px;font-size:13.5px;color:rgba(255,255,255,.62);}
.report-hero__terms--fine{margin-top:8px;font-size:13px;color:rgba(255,255,255,.5);}
.report-hero__terms--fine b{color:rgba(255,255,255,.86);}
/* 보조 CTA 가 어두운 바탕에 묻혀 버튼으로 안 읽혔다. 테두리를 세운다. */
.report-hero__actions .btn.white{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06);}
.report-hero__actions .btn.white:hover{background:rgba(255,255,255,.14);}

/* ============ report 모서리 정리 ============
   Apple 은 카드 71개 중 46개가 radius 28, 중첩된 안쪽 상자가 10 으로 2단이다.
   이 페이지도 사실상 2단이었지만 섹션을 하나씩 고쳐오는 동안 18·20·24·26·30
   다섯 값으로 흩어졌다. 값만 모으고 구조는 그대로 둔다. */
.report-page{--r-outer:26px;--r-inner:14px;}
.report-page .report-gap__chart,.report-page .report-gap__conc,.report-page .report-gap__mini,
.report-page .report-case,.report-page .report-fit__grid article,
.report-page .report-grid article,.report-page .report-value__gets article,
.report-page .report-value__assure article,.report-page .report-trust__creds article,
.report-page .report-trust__stat,.report-page .report-process__you,
.report-page .report-process__safety,.report-page .report-timeline,
.report-page .report-browser,.report-page .report-checkout__left,
.report-page .report-checkout__right,.report-page .report-review,
.report-page .report-preview-dialog{border-radius:var(--r-outer);}
.report-page .report-case__answers,.report-page .report-preview__viewport,
.report-page .report-process__you ul,.report-page .report-fit__grid ul,
.report-page .report-gap__bar,.report-page .report-value__compare,
.report-page .report-preview__tabs,.report-page .report-order-urgency,
.report-page .report-product-card{border-radius:var(--r-inner);}

/* 히어로 배경은 실제 리포트라 질감으로는 맞지만, 타원형 scrim 이 가운데만 덮어
   모서리에서 원문 제목과 숫자가 그대로 읽혔다. 가장자리까지 눌러 준다. */
.report-hero__bg{opacity:.1;filter:grayscale(1) blur(3px);}
.report-hero::after{background:
  radial-gradient(ellipse 70% 58% at 50% 47%,rgba(10,10,11,.92),rgba(10,10,11,.62) 62%,rgba(10,10,11,.5)),
  linear-gradient(rgba(10,10,11,.55),rgba(10,10,11,.35) 40%,rgba(10,10,11,.7));}

/* ============ 말 대신 보여주기 ============ */
/* 표를 60자로 설명하던 자리에 실제 원장을 건다. 이미지가 정사각형이라
   표 구간만 잘라 띠로 보여주고, 원본은 크게 보기에서 그대로 확인한다. */
.report-ledger{margin-top:22px;border-radius:var(--r-inner);overflow:hidden;background:#fff;}
.report-ledger__frame{display:block;position:relative;aspect-ratio:3.1;overflow:hidden;}
.report-ledger__frame img{position:absolute;top:-55%;left:0;width:100%;height:auto;display:block;}
.report-ledger figcaption{padding:12px 16px;background:rgba(255,255,255,.06);
  font-size:12px;font-weight:700;color:rgba(255,255,255,.55);}
/* 두 사례가 같은 배분에 닿는다는 것이 이 섹션의 논지다. 같은 모양이 두 번 나와야 보인다. */
.tier-split{margin-top:12px;display:flex;gap:2px;height:30px;border-radius:8px;overflow:hidden;}
.tier-split i{display:flex;align-items:center;justify-content:center;font-style:normal;}
.tier-split b{font-size:11.5px;font-weight:800;letter-spacing:-.01em;}
.tier-split .is-nano{background:var(--b800);}
.tier-split .is-nano b{color:#fff;}
.tier-split .is-micro{background:var(--b300);}
.tier-split .is-micro b{color:var(--b800);}

/* ══ 3D 리포트 덱 ═══════════════════════════════════════════════════════════
   실제 납품 리포트 6장을 공간에 세워 두고 스크롤로 넘긴다.

   WebGL(three.js) 이 아니라 CSS 3D 를 쓴다. 대상이 평면 문서이기 때문이다.
   텍스처로 굽지 않으니 글자가 원본 해상도 그대로 또렷하고, 컨텍스트 손실도
   폴백도 170KB 런타임도 없다. WebGL 은 조명과 지오메트리가 필요할 때 값을
   하지, 공간에 놓인 판 여섯 장에는 과잉이다.

   perspective 는 뷰포트에, preserve-3d 는 그 안의 트랙에 건다. 한 요소에
   overflow:hidden 과 preserve-3d 를 같이 주면 3D 가 평면으로 눌린다. */
.report-page .report-preview__viewport{perspective:2200px;perspective-origin:50% 44%;}
.report-page .report-preview__track{display:block;position:relative;height:100%;
  transform:none;transform-style:preserve-3d;will-change:auto;}
.report-page .report-shot{position:absolute;inset:0;width:100%;height:100%;
  transform-origin:50% 50%;backface-visibility:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.30),0 2px 8px rgba(0,0,0,.16);
  will-change:transform,opacity;}

@media (prefers-reduced-motion:reduce){
  .report-page .report-shot{transform:none;box-shadow:none;}
}