/* STUDIO916 v2 — 무광 블랙 + 유광박(은박 기본, ?foil=gold 금박) */
:root{
  --bg:#08080a; --surface:#111114; --surface-2:#18181c; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.15);
  --text:#f2f2f0; --text-2:#a3a29e; --text-3:#6c6c70;
  --foil:linear-gradient(105deg,#77777d 0%,#c9c9ce 12%,#ffffff 22%,#a2a2a8 34%,#e9e9ed 47%,#86868c 60%,#f7f7f8 74%,#9a9aa0 88%,#d6d6da 100%);
  --foil-solid:#dcdce0; --on-foil:#0b0b0d;
  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --mono:"Geist Mono","Pretendard Variable",Pretendard,ui-monospace,SFMono-Regular,Menlo,monospace;
  --gutter:20px; --maxw:1360px; --sec:104px; --radius:22px; --nav:64px;
  --ease:cubic-bezier(.16,1,.3,1);
}
:root[data-foil="gold"]{
  --foil:linear-gradient(105deg,#7a5a22 0%,#c9a356 12%,#fff1c4 22%,#a8812f 34%,#f2d68e 47%,#8a6727 60%,#fff6d6 74%,#a17b33 88%,#dcbb6c 100%);
  --foil-solid:#d9b768;
}
@media (min-width:768px){:root{--gutter:32px; --sec:136px}}
@media (min-width:1024px){:root{--gutter:48px; --sec:168px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--nav)}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:16px; line-height:1.7; letter-spacing:-.01em; word-break:keep-all; overflow-wrap:break-word; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{line-height:1.3}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
button{background:none; border:0; cursor:pointer}
::selection{background:var(--foil-solid); color:var(--on-foil)}
.wrap{width:100%; max-width:calc(var(--maxw) + var(--gutter)*2); margin:0 auto; padding:0 var(--gutter)}
.grain{pointer-events:none; position:fixed; inset:-50%; z-index:100; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* 큰 글씨가 두 줄로 넘어갈 때 줄 간격이 벌어지지 않게 */
.bridge__foot p,.faq summary,.lf-chart__t,.sf-calc b,.rrow__label,.rrow__full{line-height:1.35}
.case__stats dd,.pf__nums dd,.board__peak b,.case__reel span,.reel__play span,.ab-prof p b{line-height:1.25}
.rsay__d,.art-lead{line-height:1.55}

/* 휴대폰에서만 줄을 바꾸는 자리(m-br)와 휴대폰에서는 잇는 자리(d-br) */
.m-br{display:none}
@media (max-width:599px){
  .m-br{display:inline}
  .d-br{display:none}
  :is(p,h3):has(.m-br), .checks__head > span:has(.m-br){text-wrap:balance}
}

/* ───────── 박(foil) ───────── */
.foil{background:var(--foil); background-size:260% 100%; background-position:0% 50%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; animation:foil 9s ease-in-out infinite alternate; filter:drop-shadow(0 1px 0 rgba(0,0,0,.65))}
@keyframes foil{to{background-position:100% 50%}}
.foil-bg{background:var(--foil); background-size:260% 100%; animation:foil 9s ease-in-out infinite alternate; color:var(--on-foil)}

/* ───────── 공통 ───────── */
.hl{background:var(--foil); background-size:260% 100%; color:var(--on-foil); font-weight:650; padding:.14em .45em; border-radius:6px; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.eyebrow{font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); margin:0 0 20px; display:flex; gap:10px; align-items:center}
.h2{font-size:clamp(32px,5vw,72px); line-height:1.14; letter-spacing:-.045em; font-weight:700; margin:0}
.sec-lead{color:var(--text-2); font-size:clamp(16px,1.4vw,19px); max-width:680px; margin:22px 0 0}
.sec-lead + .sec-lead{margin-top:14px}
.sec-lead .hl{color:var(--text); font-weight:650}
.sec-head{margin-bottom:clamp(44px,6vw,84px)}
.section{padding:var(--sec) 0}
.note{font-size:12px; line-height:1.6; color:var(--text-3); margin:0; font-variant-numeric:tabular-nums}
.btn{position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:10px; height:54px; padding:0 28px; border-radius:999px; font-weight:650; font-size:16px; letter-spacing:-.01em; transition:transform .5s var(--ease), background .3s, color .3s, border-color .3s; white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn--foil{background:var(--foil); background-size:260% 100%; color:var(--on-foil); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.25), 0 8px 30px rgba(0,0,0,.45); animation:foil 9s ease-in-out infinite alternate}
.btn--foil::after{content:""; position:absolute; top:-50%; bottom:-50%; width:38%; left:-60%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent); transform:skewX(-20deg); transition:left .9s var(--ease)}
.btn--foil:hover::after{left:130%}
.btn--ghost{border:1px solid var(--line-2); color:var(--text)}
.btn--ghost:hover{background:var(--text); color:var(--bg)}
.btn--sm{height:40px; padding:0 18px; font-size:14px}
.btn .arr{transition:transform .5s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.js .reveal{opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1.2s var(--ease)}
.js .reveal.in{opacity:1; transform:none}
.js .reveal[data-d="1"]{transition-delay:.08s} .js .reveal[data-d="2"]{transition-delay:.16s} .js .reveal[data-d="3"]{transition-delay:.24s}

/* ───────── 메뉴 (이백프로 참고: 꽉 찬 띠 + 오른쪽 글자 메뉴) ───────── */
.nav{position:fixed; top:0; left:0; right:0; z-index:50; height:var(--nav); border-bottom:1px solid var(--line); background:linear-gradient(to bottom, rgba(8,8,10,.95), rgba(8,8,10,.84)); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3)}
.nav .wrap{height:100%; display:flex; align-items:center; gap:28px}
.nav__logo img{height:17px; width:auto; filter:invert(1); mix-blend-mode:screen}
.nav__links{display:none; margin-left:auto; gap:clamp(18px,2vw,30px); font-size:15px; color:var(--text-2); white-space:nowrap}
.nav__links a{position:relative; transition:color .2s; padding:6px 0}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--text)}
.nav__links a[aria-current="page"]::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--foil)}
/* 「대행」 펼침 메뉴 */
.nav__dd{position:relative; display:flex; align-items:center}
.nav__dd::after{content:""; position:absolute; left:-16px; right:-16px; top:100%; height:16px}
.nav__ddbtn{position:relative; display:inline-flex; align-items:center; gap:6px; padding:6px 0; color:inherit; transition:color .2s}
.nav__ddbtn svg{width:10px; height:10px; transition:transform .3s var(--ease)}
.nav__dd:hover .nav__ddbtn,.nav__dd.open .nav__ddbtn,.nav__ddbtn.is-current{color:var(--text)}
.nav__ddbtn.is-current::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--foil)}
.nav__dd:hover .nav__ddbtn svg,.nav__dd.open .nav__ddbtn svg{transform:rotate(180deg)}
.nav__sub{position:absolute; top:100%; left:50%; transform:translate(-50%,4px); min-width:210px; padding:8px; display:grid; gap:2px; border:1px solid var(--line-2); border-radius:16px; background:var(--surface); box-shadow:0 18px 40px rgba(0,0,0,.4); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s, transform .3s var(--ease), visibility .2s}
.nav__dd:hover .nav__sub,.nav__dd:focus-within .nav__sub,.nav__dd.open .nav__sub{opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,12px)}
.nav__links .nav__sub a{padding:11px 14px; border-radius:10px; white-space:nowrap; color:var(--text-2)}
.nav__links .nav__sub a:hover,.nav__links .nav__sub a[aria-current="page"]{color:var(--text); background:var(--surface-2)}
.nav__links .nav__sub a[aria-current="page"]::after{display:none}
.nav__cta{display:none}
.nav__burger{margin-left:auto; width:44px; height:44px; display:grid; place-items:center}
.nav__burger i{display:block; width:20px; height:1.5px; background:var(--text); position:relative; transition:background .3s}
.nav__burger i::before,.nav__burger i::after{content:""; position:absolute; left:0; width:20px; height:1.5px; background:var(--text); transition:transform .4s var(--ease)}
.nav__burger i::before{top:-6px} .nav__burger i::after{top:6px}
.nav__burger[aria-expanded="true"] i{background:transparent}
.nav__burger[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
.nav__burger[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}
@media (min-width:1080px){.nav__links{display:flex} .nav__cta{display:inline-flex} .nav__burger{display:none}}
.mnav{position:fixed; inset:var(--nav) 0 0 0; z-index:49; background:rgba(8,8,10,.97); display:flex; flex-direction:column; gap:4px; padding:28px var(--gutter); opacity:0; pointer-events:none; transition:opacity .35s}
.mnav.open{opacity:1; pointer-events:auto}
.mnav a{font-size:30px; font-weight:700; letter-spacing:-.04em; line-height:1.5; border-bottom:1px solid var(--line); padding:8px 0}
.mnav .btn{margin-top:24px; border:0; font-size:17px}
.mnav{overflow-y:auto; padding-bottom:40px}
.mnav > *{flex-shrink:0}
.mnav > a:not(.btn),.mnav__grp span{font-size:26px}
.mnav__grp{display:flex; flex-direction:column; border-bottom:1px solid var(--line); padding:8px 0 12px}
.mnav__grp span{font-weight:700; letter-spacing:-.04em; line-height:1.5}
.mnav .mnav__grp a{font-size:19px; font-weight:600; letter-spacing:-.02em; line-height:1.4; border-bottom:0; padding:7px 0 7px 14px; color:var(--text-2)}

/* 아래 상담 띠: 반투명에 뒤가 흐려 보이는 유리 느낌. 칼럼 쪽에는 없다 */
.cta-bar{position:fixed; left:50%; bottom:max(14px, env(safe-area-inset-bottom)); z-index:40; width:min(calc(100% - 24px), calc(var(--maxw) + 24px)); display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 10px 10px 26px; border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.03)), rgba(22,22,26,.56); -webkit-backdrop-filter:blur(24px) saturate(1.8); backdrop-filter:blur(24px) saturate(1.8); border:1px solid rgba(255,255,255,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.25), 0 18px 50px rgba(0,0,0,.45);
  transform:translate(-50%, 150%); opacity:0; transition:transform .7s var(--ease), opacity .4s}
.cta-bar.show{transform:translate(-50%, 0); opacity:1}
.cta-bar p{margin:0; min-width:0; display:flex; flex-direction:column; line-height:1.4}
.cta-bar b{font-size:16px; font-weight:650; letter-spacing:-.02em; color:#f2f2f0}
.cta-bar__sub{font-size:13px; color:rgba(242,242,240,.7)}
.cta-bar .btn{flex:none; height:50px; padding:0 24px}
@media (max-width:560px){.cta-bar{padding:8px 8px 8px 18px; border-radius:22px; gap:10px} .cta-bar__sub{display:none} .cta-bar b{font-size:14px; line-height:1.35} .cta-bar .btn{height:46px; padding:0 18px; font-size:15px}}

/* ───────── 첫 화면 ───────── */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; padding:calc(var(--nav) + 56px) 0 72px; overflow:hidden}
.hero__bg{position:absolute; inset:0; pointer-events:none}
.hero__grid{position:absolute; inset:0; background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:calc(100%/4) 100%; mask-image:linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent); -webkit-mask-image:linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent); opacity:.7}
@media (min-width:1024px){.hero__grid{background-size:calc(100%/12) 100%}}
.hero__916{position:absolute; right:-.05em; top:52%; transform:translateY(-50%); font-size:clamp(220px,46vw,760px); font-weight:800; letter-spacing:-.08em; line-height:.8; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.08); user-select:none; will-change:transform}
.hero__shine{position:absolute; width:80vmax; height:80vmax; right:-30vmax; top:-35vmax; background:radial-gradient(closest-side, rgba(255,255,255,.07), transparent); }
.hero__inner{position:relative; width:100%}
.hero__title{font-size:clamp(30px,8.2vw,132px); font-weight:700; line-height:1.18; letter-spacing:-.055em; margin:0}
.hero__title .line{display:block; overflow:hidden; padding-bottom:.08em}
.hero__title .line:first-child{margin-bottom:clamp(14px,2.2vw,36px)}
.hero__title .line:nth-child(n+2){font-size:clamp(22px,4.2vw,68px); font-weight:650; line-height:1.34; letter-spacing:-.045em; color:var(--text-2)}
.hero__title .line:nth-child(n+2) mark{color:var(--on-foil)}
@media (max-width:640px){.hero__title{font-size:11.4vw; line-height:1.14} .hero__title .line:nth-child(n+2){font-size:6.2vw}}
.hero__title .line > span{display:inline-block}
.js .hero__title .line > span{transform:translateY(108%); transition:transform 1.3s var(--ease)}
.loaded .hero__title .line > span{transform:none}
.loaded .hero__title .line:nth-child(2) > span{transition-delay:.09s}
.loaded .hero__title .line:nth-child(3) > span{transition-delay:.18s}
.hero__title mark{padding:0 .1em; margin:0 .02em; border-radius:.06em}
.hero__foot{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:28px; margin-top:clamp(36px,5vw,60px); padding-top:28px; border-top:1px solid var(--line)}
.hero__lead{margin:0; color:var(--text-2); font-size:clamp(16px,1.5vw,20px); line-height:1.6}
.hero__lead b{color:var(--text); font-weight:600}
.hero__btns{display:flex; flex-wrap:wrap; gap:10px}
.js .hero__foot{opacity:0; transform:translateY(16px); transition:opacity 1s .45s var(--ease), transform 1.2s .45s var(--ease)}
.loaded .hero__foot{opacity:1; transform:none}

/* ───────── +4억 ───────── */
.revenue{position:relative; padding:var(--sec) 0; overflow:hidden; border-top:1px solid var(--line)}
.revenue__kicker{font-size:clamp(26px,3.4vw,52px); letter-spacing:-.045em; font-weight:700; margin:0; line-height:1.2}
.revenue__note{margin:clamp(12px,1.4vw,18px) 0 0; font-size:clamp(14px,1.2vw,16px); line-height:1.6; color:var(--text-2)}
.revenue__note b{color:var(--text); font-weight:650}
.revenue__note a{color:var(--text); border-bottom:1px solid var(--line-2); margin-left:4px; white-space:nowrap}
.revenue__kicker small{display:inline-block; margin-left:.7em; font-size:.38em; font-weight:500; letter-spacing:-.01em; color:var(--text-2); vertical-align:middle}
.revenue__panel{position:relative; margin-top:clamp(28px,4vw,52px); padding:1.5px; border-radius:30px; background:var(--foil); background-size:260% 100%; animation:foil 9s ease-in-out infinite alternate; box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 90px rgba(255,255,255,.05)}
.revenue__inner{position:relative; overflow:hidden; border-radius:28.5px; padding:clamp(22px,4vw,64px); background:radial-gradient(130% 150% at 88% -10%, #24242b 0%, #111114 46%, #0a0a0c 100%)}
.revenue__inner::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.075) 1px, transparent 1.2px); background-size:18px 18px; -webkit-mask-image:linear-gradient(115deg, transparent 25%, #000 85%); mask-image:linear-gradient(115deg, transparent 25%, #000 85%); pointer-events:none}
.revenue__inner::after{content:""; position:absolute; top:-70%; bottom:-70%; left:-45%; width:26%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.085), transparent); transform:rotate(18deg); animation:sheen 7.5s ease-in-out infinite; pointer-events:none}
@keyframes sheen{0%,30%{left:-45%} 75%,100%{left:135%}}
.revenue__rows{position:relative; z-index:1; display:grid; grid-template-columns:1fr}
@media (min-width:900px){.revenue__rows{grid-template-columns:.8fr 1.2fr}}
.rrow{padding:clamp(8px,1.6vw,20px) 0 clamp(22px,3vw,36px); border-bottom:1px solid var(--line)}
.rrow:last-child{border-bottom:0; padding-bottom:0}
.rrow + .rrow{padding-top:clamp(22px,3vw,36px)}
@media (min-width:900px){.rrow{border-bottom:0; padding-block:clamp(8px,1.6vw,20px)} .rrow + .rrow{padding-top:clamp(8px,1.6vw,20px); padding-left:clamp(28px,4vw,64px); border-left:1px solid var(--line)}}
.rrow__label{margin:0 0 8px; font-size:clamp(16px,1.6vw,22px); color:var(--text-2); font-weight:500}
.rrow__num{margin:0; display:flex; align-items:baseline; flex-wrap:wrap; gap:0 .1em; font-size:clamp(84px,12.5vw,200px); font-weight:800; letter-spacing:-.07em; line-height:1; font-variant-numeric:tabular-nums}
.rrow--main .rrow__num{font-size:clamp(84px,12.5vw,200px)}
@media (min-width:900px){.rrow__num{flex-wrap:nowrap; white-space:nowrap}}
.rrow__num small{font-size:.24em; font-weight:700; letter-spacing:-.03em; color:var(--text-2)}
.rrow__num .up{align-self:center; display:inline-grid; place-items:center; width:.34em; height:.34em; margin:0 .06em 0 .12em; border-radius:50%; background:var(--foil); background-size:260% 100%; animation:foil 9s ease-in-out infinite alternate; color:var(--on-foil); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 6px 24px rgba(0,0,0,.5)}
.rrow__num .up svg{width:52%; height:52%}
.rrow__full{margin:16px 0 0; font-size:clamp(22px,2.6vw,38px); font-weight:600; letter-spacing:-.01em; color:var(--text-2); font-variant-numeric:tabular-nums}
.revenue__inner > *{position:relative; z-index:1}
.revenue__who{margin:0 0 clamp(14px,2vw,26px); display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text-2)}
.revenue__who b{font-size:13px; font-weight:650; letter-spacing:-.01em; color:var(--text); border:1px solid var(--line-2); border-radius:99px; padding:5px 12px}
.rfoot{margin:clamp(22px,3vw,36px) 0 0; padding-top:clamp(16px,2vw,24px); border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:6px 16px; font-size:clamp(15px,1.4vw,18px); color:var(--text-2)}
.rfoot b{font-size:clamp(26px,3vw,44px); font-weight:800; letter-spacing:-.05em; line-height:1.1; font-variant-numeric:tabular-nums; color:var(--text-3)}
.rfoot b i{font-style:normal; font-weight:300; margin:0 .3em}
.revenue__duo{display:grid; grid-template-columns:1fr; gap:clamp(14px,1.6vw,20px); margin-top:clamp(14px,1.6vw,20px)}
@media (min-width:900px){.revenue__duo{grid-template-columns:1fr 1fr}}
.revenue__duo .revenue__panel{margin-top:0; display:flex}
.revenue__duo .revenue__inner{flex:1; display:flex; flex-direction:column; padding:clamp(22px,3.2vw,48px)}
.rsay{margin:0; display:flex; flex-direction:column; align-items:flex-start; font-size:clamp(42px,5.4vw,88px); font-weight:800; letter-spacing:-.065em; line-height:1.1}
.rsay__dim{color:var(--text-3)}
.rsay__d{margin:clamp(12px,1.4vw,18px) 0 0; color:var(--text-2); font-size:clamp(16px,1.5vw,20px)}
.rso{list-style:none; margin:clamp(16px,2vw,26px) 0 0; padding:0; display:grid; gap:12px}
.rso li{display:flex; align-items:center; gap:12px; font-size:clamp(18px,1.9vw,26px); font-weight:700; letter-spacing:-.04em; line-height:1.35}
.rso li i{flex:none; display:grid; place-items:center; width:1.35em; height:1.35em; border-radius:50%; background:var(--foil); background-size:260% 100%; animation:foil 9s ease-in-out infinite alternate; color:var(--on-foil); box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.rso li i svg{width:52%; height:52%}
.revenue__duo .rfoot{margin-top:auto; padding-top:clamp(16px,2vw,24px)}
.revenue__duo .rso{margin-bottom:clamp(22px,3vw,36px)}
.ratio{margin-top:clamp(18px,2.4vw,30px); display:grid; gap:10px; max-width:440px}
.ratio__row{display:grid; grid-template-columns:44px 1fr; align-items:center; gap:10px; font-size:13px; color:var(--text-3)}
.ratio__row i{display:block; height:10px; width:var(--w); border-radius:99px; background:rgba(255,255,255,.2); transform-origin:left}
.ratio__row--after{color:var(--text)}
.ratio__row--after i{height:14px; background:var(--foil); background-size:260% 100%; animation:foil 9s ease-in-out infinite alternate; box-shadow:0 0 22px rgba(255,255,255,.18)}
.js .revenue__panel .ratio i{transform:scaleX(0); transition:transform 1.5s var(--ease) .35s}
.js .revenue__panel.in .ratio i{transform:scaleX(1)}

/* ───────── 조회수 ───────── */
.views__vs{display:grid; gap:6px; margin:0 0 clamp(44px,6vw,80px)}
.views__vs p{margin:0; font-size:clamp(24px,3.6vw,52px); font-weight:700; letter-spacing:-.045em; line-height:1.25}
.views__vs p:first-child{color:var(--text-3); text-decoration:line-through; text-decoration-thickness:2px; text-decoration-color:rgba(255,255,255,.25)}
.views__top{display:grid; grid-template-columns:1fr; gap:28px; align-items:end; border-top:1px solid var(--line); padding-top:36px}
@media (min-width:1024px){.views__top{grid-template-columns:1.2fr 1fr}}
.views__total{font-size:clamp(76px,11vw,184px); font-weight:800; letter-spacing:-.065em; line-height:.9; font-variant-numeric:tabular-nums; margin:0}
.views__total small{font-size:.3em; letter-spacing:-.02em}
.views__cap{color:var(--text-2); margin:14px 0 0; font-size:17px}
.views__tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.views__tiers div{border:1px solid var(--line); border-radius:16px; padding:18px 16px; background:var(--surface)}
.views__tiers b{display:block; font-size:clamp(30px,3vw,46px); font-weight:750; letter-spacing:-.04em; line-height:1.1}
.views__tiers span{font-size:13px; color:var(--text-2)}
.reels{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:clamp(36px,4vw,56px)}
.reels .reel:nth-child(7){display:none}
.reels .reel__play{font-size:clamp(17px,4.6vw,26px); left:10px; bottom:32px}
@media (min-width:760px){.reels{grid-template-columns:repeat(7,1fr); gap:12px} .reels .reel:nth-child(7){display:block} .reels .reel__play{font-size:clamp(15px,1.75vw,28px); left:12px; bottom:38px}}
.reel{margin:0}
.reel__img{position:relative; border-radius:16px; overflow:hidden; aspect-ratio:9/14; border:1px solid var(--line); background:var(--surface)}
.reel__img img{width:100%; height:100%; object-fit:cover; filter:saturate(.7) brightness(.85)}
.reel__img::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,8,10,.75), transparent 45%)}
.reel__play{position:absolute; left:14px; bottom:44px; z-index:1; display:flex; align-items:center; gap:6px; font-size:clamp(24px,2.2vw,34px); font-weight:800; letter-spacing:-.04em}
.reel__play svg{width:.6em; height:.6em; fill:var(--foil-solid)}
.reel figcaption{font-size:13px; color:var(--text-2); margin-top:8px}

/* 조회수 설명 3단 표 */
.steps3{display:grid; grid-template-columns:1fr; margin-top:clamp(28px,3.4vw,48px); border-top:1px solid var(--line)}
@media (min-width:900px){.steps3{grid-template-columns:1fr 1fr 1.25fr}}
.s3{padding:clamp(20px,2.4vw,32px) 0; border-bottom:1px solid var(--line)}
@media (min-width:900px){.s3{padding:clamp(24px,2.6vw,36px) clamp(20px,2.4vw,36px); border-left:1px solid var(--line)} .s3:first-child{border-left:0; padding-left:0}}
.s3__k{display:flex; align-items:center; gap:10px; margin:0 0 14px; font-size:14px; color:var(--text-2)}
.s3__k span{font-family:var(--mono); font-size:12px; color:var(--text-3); letter-spacing:.08em}
.s3 h3{margin:0; font-size:clamp(24px,2.6vw,38px); letter-spacing:-.045em; line-height:1.25; font-weight:700}
.s3:nth-child(1) h3{color:var(--text-2)}
.s3__d{margin:14px 0 0; color:var(--text-2); font-size:clamp(15px,1.3vw,17px)}
.s3__d b{color:var(--text); font-weight:650}
.s3--key{background:linear-gradient(180deg, rgba(255,255,255,.045), transparent)}
@media (max-width:899px){.s3--key{padding-inline:16px; margin-inline:-16px}}

/* 대시보드 그래프 */
.board{margin-top:clamp(56px,7vw,96px); border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(180deg, var(--surface), rgba(17,17,20,.35)); padding:clamp(22px,3vw,40px)}
.board__top{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:16px}
.board__title{margin:6px 0 0; font-size:clamp(20px,2vw,28px); letter-spacing:-.03em; font-weight:650}
.board__legend{display:flex; flex-wrap:wrap; gap:8px}
.chip{font-size:13px; border:1px solid var(--line-2); border-radius:999px; padding:6px 13px; color:var(--text-2); transition:all .25s}
.chip[aria-pressed="true"]{background:var(--foil); background-size:260% 100%; color:var(--on-foil); border-color:transparent}
.board__chart{position:relative; height:clamp(200px,26vw,320px); margin-top:64px}
.board__chart svg{width:100%; height:100%; overflow:visible}
.board__axis{position:relative; height:18px; font-size:12px; color:var(--text-3); margin-top:10px}
.board__axis span{position:absolute; top:0; transform:translateX(-50%); padding-left:0; white-space:nowrap}
.board__axis span::before{content:""; position:absolute; left:50%; top:-10px; width:1px; height:6px; background:var(--line-2)}
.board__peak{position:absolute; transform:translate(-100%,-100%); text-align:right; pointer-events:none; white-space:nowrap; padding:0 2px 16px 0}
.board__peak b{display:block; font-size:clamp(18px,2vw,26px); letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.board__peak span{font-size:12px; color:var(--text-2)}
.board__peak::after{content:""; position:absolute; right:-5px; bottom:-5px; width:10px; height:10px; border-radius:50%; background:var(--foil-solid); box-shadow:0 0 0 6px rgba(255,255,255,.08)}
.board__jump{position:absolute; transform:translate(14px,4px); pointer-events:none; white-space:nowrap; font-size:12px; color:var(--text-2)}
.board__jump b{display:block; font-size:clamp(15px,1.4vw,18px); color:var(--text); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.board__jump::before{content:""; position:absolute; left:-18px; top:-8px; width:8px; height:8px; border-radius:50%; border:1.5px solid var(--foil-solid); background:var(--bg)}
.board .note{margin-top:18px}

/* ───────── 숏폼 → 롱폼 ───────── */
.bridge__flow{display:grid; grid-template-columns:1fr; gap:14px; align-items:stretch}
@media (min-width:900px){.bridge__flow{grid-template-columns:1fr auto 1fr; gap:20px}}
.bridge__card{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:clamp(24px,3vw,40px)}
.bridge__card--long{border-color:rgba(255,255,255,.28); background:linear-gradient(160deg, rgba(255,255,255,.06), var(--surface) 55%)}
.bridge__k{display:flex; align-items:center; gap:12px; margin:0 0 18px; font-size:14px; color:var(--text-2)}
.bridge__k span{font-family:var(--mono); font-size:12px; color:var(--text-3)}
.bridge__card h3{margin:0 0 20px; font-size:clamp(26px,2.8vw,40px); letter-spacing:-.045em; line-height:1.2}
.bridge__card ul{list-style:none; margin:0; padding:18px 0 0; border-top:1px solid var(--line); display:grid; gap:10px; color:var(--text-2)}
.bridge__card li{display:flex; gap:10px} .bridge__card li::before{content:""; flex:none; width:6px; height:11px; margin:6px 4px 0 3px; border-right:1.5px solid var(--foil-solid); border-bottom:1.5px solid var(--foil-solid); transform:rotate(45deg)}
.bridge__arrow{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--text-3); font-size:13px; padding:6px 0}
.bridge__arrow i{font-style:normal; font-size:34px; line-height:1; color:var(--foil-solid); transform:rotate(90deg)}
@media (min-width:900px){.bridge__arrow i{transform:none} .bridge__arrow span{writing-mode:horizontal-tb; max-width:90px; text-align:center}}
.bridge__foot{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px; margin-top:clamp(28px,3vw,44px); padding-top:28px; border-top:1px solid var(--line)}
.bridge__foot p{margin:0; font-size:clamp(20px,2.2vw,30px); font-weight:650; letter-spacing:-.035em}
/* 이 구간만 밝은 회색 바탕 (다른 이야기라서). 안쪽 색 값을 통째로 바꾼다 */
.bridge{--text:#111114; --text-2:#55555b; --text-3:#85858b; --line:rgba(0,0,0,.1); --line-2:rgba(0,0,0,.22); --surface:#ffffff; --surface-2:#f0f0f0; --foil-solid:#17171a; --on-foil:#f7f7f7;
  --foil:linear-gradient(105deg,#2c2c31 0%,#6f6f76 14%,#17171a 28%,#57575d 44%,#0f0f12 60%,#66666c 78%,#25252a 100%);
  background:#f7f7f7; color:var(--text); padding-block:clamp(72px,9vw,132px)}
.bridge .foil{filter:none}
.bridge + .section{padding-top:var(--sec)!important}
.bridge__card{box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05)}
.bridge .bridge__card--long{--text:#f2f2f0; --text-2:#a3a29e; --text-3:#6c6c70; --line:rgba(255,255,255,.1); --foil-solid:#dcdce0; color:var(--text); border-color:transparent; background:radial-gradient(130% 150% at 100% 0%, #26262d, #0d0d10 60%); box-shadow:0 18px 40px rgba(0,0,0,.18)}

/* ───────── 문제 제기 ───────── */
.statement{padding:var(--sec) 0 calc(var(--sec)*.45)}
.statement__text{font-size:clamp(26px,3.8vw,56px); line-height:1.3; letter-spacing:-.045em; font-weight:650; margin:0; max-width:1240px}
.statement__text .st{display:block}
.statement__text .st--sm{font-size:clamp(17px,2.1vw,30px); font-weight:500; letter-spacing:-.03em; color:var(--text-2); margin-bottom:.5em}
.statement__text .st--lg{font-size:clamp(40px,7.4vw,116px); font-weight:800; letter-spacing:-.055em; line-height:1.12; margin-top:.06em}
.statement__text .w{transition:opacity .25s linear}
.js .statement__text .w{opacity:.16}
.js .statement__text .w.on{opacity:1}

/* ───────── 사례 ───────── */
.cases{padding-top:calc(var(--sec)*.45)}
.cases .sec-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:clamp(18px,2vw,26px)}
.cases__track{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:0 var(--gutter) 28px; scrollbar-width:none}
.cases__track::-webkit-scrollbar{display:none}
.case{flex:0 0 min(88vw,1180px); scroll-snap-align:center; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:clamp(22px,3vw,44px); display:flex; flex-direction:column; gap:26px; position:relative; overflow:hidden}
.case__meta{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13px; color:var(--text-3)}
.case__meta b{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; align-self:center}
.case__body{display:grid; grid-template-columns:1fr; gap:26px; flex:1}
@media (min-width:1024px){.case__body{grid-template-columns:1.3fr .7fr; gap:44px}}
.case__title{font-size:clamp(28px,3.2vw,46px); letter-spacing:-.045em; line-height:1.15; margin:0; font-weight:700}
.case__line{color:var(--text-2); margin:12px 0 0; font-size:clamp(15px,1.3vw,18px)}
.case__big{display:flex; align-items:baseline; flex-wrap:wrap; gap:.14em; margin:24px 0 4px; font-size:clamp(64px,7.6vw,124px); font-weight:800; letter-spacing:-.065em; line-height:1; font-variant-numeric:tabular-nums}
.case__big .from,.case__big .arrow{color:var(--text-3); -webkit-text-fill-color:var(--text-3)}
.case__big .arrow{font-weight:300; font-size:.55em}
.case__big small{font-size:.24em; color:var(--text-2); letter-spacing:-.02em; font-weight:650; margin-left:.25em; -webkit-text-fill-color:var(--text-2)}
.case__stats{display:grid; grid-template-columns:repeat(2,1fr); margin:22px 0 0; border-top:1px solid var(--line)}
.case__stats div{padding:15px 0; border-bottom:1px solid var(--line)}
.case__stats div:nth-child(even){padding-left:18px; border-left:1px solid var(--line)}
.case__stats dt{font-size:13px; color:var(--text-3); margin-bottom:4px}
.case__stats dd{margin:0; font-size:clamp(22px,2.2vw,32px); font-weight:700; letter-spacing:-.035em; font-variant-numeric:tabular-nums}
.case .note{margin-top:16px}
.case__wins{list-style:none; margin:clamp(12px,2vh,22px) 0 0; padding:0; display:grid; gap:clamp(6px,1.1vh,11px)}
.case__wins li{display:flex; align-items:flex-start; gap:10px; font-size:clamp(15px,1.3vw,18px); font-weight:650; letter-spacing:-.03em; line-height:1.4}
.case__wins li i{flex:none; display:grid; place-items:center; width:1.4em; height:1.4em; border-radius:50%; background:var(--foil); background-size:260% 100%; animation:foil 9s ease-in-out infinite alternate; color:var(--on-foil)}
.case__wins li i svg{width:52%; height:52%}
.case__visual{display:flex; flex-direction:column; gap:14px}
.case__reel{position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line); flex:1; min-height:220px; background:var(--surface-2)}
.case__reel img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.6) brightness(.7)}
.case__reel span{position:absolute; left:16px; bottom:46px; font-size:clamp(28px,2.6vw,40px); font-weight:800; letter-spacing:-.045em}
.case__reel i{position:absolute; left:16px; top:14px; font-style:normal; font-size:12px; color:var(--text-2); background:rgba(8,8,10,.6); padding:4px 10px; border-radius:999px}
.minichart{border-radius:18px; border:1px solid var(--line); padding:14px 16px 10px; background:var(--surface-2); display:flex; flex-direction:column; min-height:150px}
.minichart p{margin:0 0 8px; display:flex; justify-content:space-between; font-size:12px; color:var(--text-3); font-variant-numeric:tabular-nums}
.minichart svg{width:100%; flex:1; min-height:96px}
.case--end{align-items:flex-start; justify-content:space-between; background:var(--foil); background-size:260% 100%; animation:foil 9s ease-in-out infinite alternate; color:var(--on-foil); border-color:transparent}
.case--end .case__meta{color:rgba(11,11,13,.55)}
.case--end h3{font-size:clamp(44px,6vw,96px); letter-spacing:-.06em; line-height:1.02; margin:0; font-weight:800}
.case--end p{max-width:440px; font-size:18px; margin:0}
.case--end .btn{background:var(--on-foil); color:var(--text)}
@media (min-width:1024px) and (min-height:680px) and (hover:hover){
  /* 제목과 포트폴리오 버튼도 고정 구간 안에 둔다. 옆으로 넘어가는 동안 계속 보인다 */
  .cases.pinned .cases__sticky{position:sticky; top:var(--nav); height:calc(100vh - var(--nav)); overflow:hidden; display:flex; flex-direction:column; padding:clamp(14px,2.4vh,28px) 0 clamp(14px,2.4vh,28px)}
  .cases.pinned .sec-head{flex:none; margin-bottom:clamp(12px,2vh,22px)}
  .cases.pinned .sec-head .eyebrow{margin-bottom:10px}
  .cases.pinned .sec-head .h2{font-size:clamp(28px,min(4vw,6.4vh),56px)}
  .cases.pinned .cases__track{flex:1; min-height:0; overflow:visible; scroll-snap-type:none; padding:0 var(--gutter); gap:28px; will-change:transform}
  .cases.pinned .case{flex-basis:min(78vw,1180px); height:100%; max-height:700px; padding-block:clamp(18px,3.6vh,44px); gap:clamp(12px,2.4vh,26px)}
  .cases.pinned .case__big{font-size:clamp(52px,min(7.6vw,10.5vh),124px); margin-top:clamp(10px,2.4vh,24px)}
  .cases.pinned .case__title{font-size:clamp(24px,min(3.2vw,5vh),46px)}
  .cases.pinned .case__stats{margin-top:clamp(10px,2.2vh,22px)}
  .cases.pinned .case__stats div{padding-block:clamp(9px,1.6vh,15px)}
}

/* ───────── 팀 4명 ───────── */
.crew{display:grid; grid-template-columns:1fr; gap:12px}
/* 위 두 칸(기획자, 전략가)은 크게, 나머지 셋은 아래 줄 */
@media (min-width:700px){.crew{grid-template-columns:repeat(6,1fr); gap:14px} .crew__c{grid-column:span 2} .crew__c--lead{grid-column:span 3}}
.crew__c{border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(180deg, var(--surface-2), var(--surface)); padding:22px 22px 20px; display:grid; grid-template-columns:auto 1fr; gap:4px 16px; align-items:center; transition:border-color .3s, transform .5s var(--ease)}
.crew__c:hover{border-color:rgba(255,255,255,.3); transform:translateY(-3px)}
.crew__top{grid-row:1 / span 2; display:flex; flex-direction:column; align-items:center; gap:8px}
.crew__i{width:52px; height:52px; border-radius:16px; display:grid; place-items:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 8px 22px rgba(0,0,0,.45)}
.crew__i svg{width:26px; height:26px; fill:none; stroke:var(--on-foil); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.crew__n{font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--text-3)}
.crew__c h3{margin:0; font-size:clamp(19px,1.6vw,23px); letter-spacing:-.035em; line-height:1.3}
.crew__c p{margin:0; color:var(--text-2); font-size:15px; line-height:1.55}
.crew__c .crew__role{grid-column:1 / -1; margin:14px 0 0; padding-top:14px; border-top:1px solid var(--line); color:var(--text); font-size:15px; font-weight:650; letter-spacing:-.02em}
.crew__c--lead{border-color:var(--line-2)}
@media (min-width:700px){.crew__c{display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:26px 24px 22px} .crew__top{flex-direction:row; justify-content:space-between; width:100%; margin-bottom:10px} .crew__c .crew__role{width:100%; margin:auto 0 0} .crew__c p{margin-bottom:14px}
  .crew__c--lead{padding:clamp(28px,3vw,40px) clamp(26px,3vw,40px) clamp(24px,2.6vw,32px); gap:12px} .crew__c--lead h3{font-size:clamp(26px,2.8vw,38px); letter-spacing:-.045em} .crew__c--lead p{font-size:clamp(16px,1.3vw,18px)} .crew__c--lead .crew__i{width:60px; height:60px; border-radius:18px} .crew__c--lead .crew__i svg{width:30px; height:30px} .crew__c--lead .crew__role{font-size:clamp(16px,1.3vw,18px)}}
.four-after{margin:28px 0 0; color:var(--text-2); font-size:clamp(16px,1.4vw,19px); max-width:820px}
.founders{display:grid; grid-template-columns:1fr; gap:14px; margin-top:clamp(48px,5vw,72px)}
@media (min-width:768px){.founders{grid-template-columns:repeat(2,1fr); gap:20px}}
.founder{display:grid; grid-template-columns:120px 1fr; gap:18px; align-items:center; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:16px}
.founder__reel{border-radius:14px; overflow:hidden; aspect-ratio:9/14; position:relative}
.founder__reel img{width:100%; height:100%; object-fit:cover}
.founder h3{margin:0; font-size:26px; letter-spacing:-.04em}
.founder h3 small{font-size:14px; color:var(--text-2); font-weight:500; margin-left:6px; letter-spacing:0}
.founder p{margin:6px 0 0; color:var(--text-2); font-size:15px}
.founder .nums{display:flex; gap:20px; margin-top:12px}
.founder .nums b{display:block; font-size:24px; letter-spacing:-.03em}
.founder .nums span{font-size:12px; color:var(--text-3)}

/* ───────── 비교 ───────── */
.compare{display:grid; grid-template-columns:1fr; gap:36px}
@media (min-width:1024px){.compare{grid-template-columns:.9fr 1.1fr; gap:64px; align-items:start}}
.checks{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface)}
.checks__head,.checks li{display:grid; grid-template-columns:1fr 66px 62px; column-gap:6px; align-items:center}
@media (min-width:700px){.checks__head,.checks li{grid-template-columns:1fr 104px 104px; column-gap:8px}}
.checks__head{padding:16px 22px; border-bottom:1px solid var(--line); font-size:13px; color:var(--text-3)}
.checks__head b{text-align:center; font-family:var(--mono); letter-spacing:.06em; font-size:12px}
.checks ul{list-style:none; margin:0; padding:0}
.checks li{padding:17px 22px; border-bottom:1px solid var(--line); font-size:clamp(15px,1.3vw,18px); font-weight:500}
.checks li:last-child{border-bottom:0}
.checks li i{justify-self:center; width:30px; height:30px; border-radius:50%; display:grid; place-items:center}
.checks li i::before{content:""; width:11px; height:6px; border-left:2px solid var(--on-foil); border-bottom:2px solid var(--on-foil); transform:rotate(-45deg) translate(1px,-1px)}
.checks li small{display:block; font-size:12px; color:var(--text-3); font-weight:400}
.checks__head em{font-style:normal; text-align:center; font-size:12px; color:var(--text-3)}
.checks .oth{font-style:normal; justify-self:center; display:grid; justify-items:center; gap:5px; color:var(--text-3); text-align:center}
.checks .oth svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.checks .oth--tri svg{width:24px; height:24px}
.checks .oth small{font-size:11px; line-height:1.35; max-width:8em}
@media (max-width:699px){.checks__head b{font-size:10px; letter-spacing:0} .checks li{padding-inline:16px} .checks__head{padding-inline:16px}}
.compare__close{margin:40px 0 0; font-size:clamp(24px,3vw,42px); letter-spacing:-.045em; line-height:1.3; font-weight:700}

/* ───────── 서비스·진행·약속·FAQ ───────── */
.plans{display:grid; grid-template-columns:1fr; gap:16px}
@media (min-width:1024px){.plans{grid-template-columns:repeat(3,1fr); gap:20px}}
.plan{border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,2.6vw,36px); display:flex; flex-direction:column; gap:16px; background:var(--surface); position:relative}
.plan--pick{border-color:rgba(255,255,255,.35); background:linear-gradient(180deg, rgba(255,255,255,.045), var(--surface))}
.plan__badge{position:absolute; top:-13px; left:clamp(24px,2.6vw,36px); font-size:12px; font-weight:700; line-height:1.4; padding:5px 12px; border-radius:999px}
.plan__name{font-size:clamp(34px,3.4vw,50px); font-weight:800; letter-spacing:-.045em; line-height:1.05; color:var(--text); margin:0}
.plan--pick .plan__name{align-self:flex-start; background:var(--foil); background-size:260% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; animation:foil 9s ease-in-out infinite alternate}
.plan h3{font-size:clamp(19px,1.7vw,23px); font-weight:650; letter-spacing:-.03em; margin:0; line-height:1.3}
.plan .for{color:var(--text-2); margin:0; font-size:15px}
.plan ul{list-style:none; padding:18px 0 0; margin:0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px; font-size:15px}
.plan li{display:flex; gap:10px} .plan li::before{content:""; flex:none; width:6px; height:11px; margin:5px 4px 0 3px; border-right:1.5px solid var(--foil-solid); border-bottom:1.5px solid var(--foil-solid); transform:rotate(45deg)}
.plan .price{margin-top:auto; padding-top:8px; font-size:14px; color:var(--text-2)}
.plan li small,.plan .for small{display:block; margin-top:2px; font-size:12.5px; line-height:1.5; color:var(--text-3)}
.steps{display:grid; grid-template-columns:1fr; list-style:none; padding:0; margin:0; border-top:1px solid var(--line)}
@media (min-width:1200px){.steps{grid-template-columns:repeat(7,1fr)}}
.step{padding:22px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:56px 1fr; gap:4px 12px}
@media (min-width:1200px){.step{display:block; padding:26px 18px 30px; border-left:1px solid var(--line); border-bottom:0} .step:first-child{border-left:0; padding-left:0} .step:nth-child(even){padding-left:18px}}
.step__n{font-family:var(--mono); font-size:12px; color:var(--text-3)}
.step h3{margin:0; font-size:19px; letter-spacing:-.025em}
@media (min-width:1200px){.step h3{margin:26px 0 8px}}
.step p{margin:0; color:var(--text-2); font-size:14px; grid-column:2}
.steps-note{font-size:13px; color:var(--text-3); margin:16px 0 0}
.steps-note a{color:var(--text); border-bottom:1px solid var(--line-2)}
.promise{display:grid; grid-template-columns:1fr; gap:16px}
@media (min-width:900px){.promise{grid-template-columns:1.25fr .75fr; gap:24px}}
.promise__card{border-radius:var(--radius); padding:clamp(28px,4vw,56px); border:1px solid var(--line); background:var(--surface); display:flex; flex-direction:column; gap:18px}
.promise__card .k{font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); margin:0}
.promise__card h3{font-size:clamp(30px,3.6vw,52px); letter-spacing:-.05em; line-height:1.16; margin:0; font-weight:750}
.promise__card h3 small{display:block; font-size:.52em; font-weight:600; letter-spacing:-.03em; color:var(--text-2); line-height:1.45}
.promise__card h3 small:last-of-type{margin-bottom:.35em}
.promise__card .more{color:var(--text); border-bottom:1px solid var(--line-2); white-space:nowrap; margin-left:4px; font-size:15px}
.promise__card p{margin:0; font-size:17px; color:var(--text-2)}
.promise__card p + p{margin-top:-10px}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 0; font-size:clamp(17px,1.6vw,22px); font-weight:600; letter-spacing:-.025em}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none; width:36px; height:36px; border-radius:50%; border:1px solid var(--line-2); position:relative; transition:transform .5s var(--ease), background .3s}
.faq summary i::before,.faq summary i::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:1.5px; background:currentColor; transform:translate(-50%,-50%)}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary i{transform:rotate(45deg); background:var(--surface-2)}
.faq .a{color:var(--text-2); padding:0 0 26px; max-width:760px; margin:0}
@media (min-width:1024px){.faq-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:64px}}

/* ───────── 상담 신청 ───────── */
.contact{padding:var(--sec) 0; border-top:1px solid var(--line); position:relative; overflow:hidden}
.contact__grid{display:grid; grid-template-columns:1fr; gap:40px}
@media (min-width:1024px){.contact__grid{grid-template-columns:.8fr 1.2fr; gap:72px}}
.contact h2{font-size:clamp(40px,6vw,96px); letter-spacing:-.06em; line-height:1; margin:0; font-weight:800}
.contact__msg{margin:28px 0 0; display:grid; gap:14px; color:var(--text-2); font-size:clamp(15px,1.3vw,17px)}
.contact__msg p{margin:0}
.contact__msg strong{color:var(--text); font-weight:600}
.contact__msg .paren{font-size:14px; color:var(--text-3)}
.contact__alt{margin-top:28px; font-size:14px; color:var(--text-3)}
.contact__alt a{color:var(--text-2); border-bottom:1px solid var(--line-2)}
.form{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:clamp(20px,3vw,40px); display:grid; grid-template-columns:1fr; gap:18px}
@media (min-width:768px){.form{grid-template-columns:repeat(2,1fr); gap:20px 18px}}
.field{display:flex; flex-direction:column; gap:8px}
.field--full{grid-column:1/-1}
.field[hidden]{display:none}
.field .field__etc{margin-top:10px}
.field .field__etc[hidden]{display:none}
.field label,.field legend{font-size:14px; font-weight:600; color:var(--text)}
.field label em,.field legend em{font-style:normal; color:var(--foil-solid); margin-left:3px}
.field small{font-size:12px; color:var(--text-3); font-weight:400}
.field input,.field select,.field textarea{width:100%; background:var(--bg); border:1px solid var(--line-2); border-radius:12px; padding:14px 15px; font-size:16px; outline:none; transition:border-color .2s, box-shadow .2s}
.field textarea{min-height:120px; resize:vertical; line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--foil-solid); box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.field select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--text-2) 50%),linear-gradient(135deg,var(--text-2) 50%,transparent 50%); background-position:calc(100% - 20px) 52%,calc(100% - 15px) 52%; background-size:5px 5px; background-repeat:no-repeat}
.field fieldset{border:0; padding:0; margin:0}
.radios{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.radios label{font-weight:500; font-size:14px; display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line-2); border-radius:999px; padding:9px 14px; cursor:pointer; transition:all .2s}
.radios input{appearance:none; width:14px; height:14px; border-radius:50%; border:1px solid var(--text-2); margin:0; padding:0; background:transparent}
.radios input:checked{background:var(--foil-solid); border-color:var(--foil-solid)}
.radios label:has(input:checked){border-color:var(--foil-solid); color:var(--text)}
.radios input[type="checkbox"]{border-radius:4px}
.field legend small{font-weight:400; color:var(--text-3); margin-left:6px}
.consent{grid-column:1/-1; font-size:13px; color:var(--text-2); display:flex; gap:10px; align-items:flex-start; border-top:1px solid var(--line); padding-top:18px}
.consent input{margin-top:3px; width:18px; height:18px; accent-color:#d9d9d9}
.consent details{margin-top:6px; color:var(--text-3)}
.consent summary{cursor:pointer; text-decoration:underline}
.form__submit{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between}
.form__submit .btn{height:58px; padding:0 34px; font-size:17px}
.form__status{font-size:14px; color:var(--text-2); margin:0}
.form__done{grid-column:1/-1; text-align:center; padding:56px 10px}
.form__done h3{font-size:clamp(28px,3vw,40px); letter-spacing:-.04em; margin:0 0 10px}
.form__done p{color:var(--text-2); margin:0}
.hp{position:absolute; left:-9999px}

/* ───────── 푸터 ───────── */
.footer{border-top:1px solid var(--line); padding:40px 0 100px; font-size:13px; color:var(--text-3)}
.footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px}
.footer dl{display:grid; grid-template-columns:auto 1fr; gap:4px 16px; margin:0}
.footer dt{font-family:var(--mono); font-size:11px; letter-spacing:.08em}
.footer dd{margin:0; color:var(--text-2)}
.footer__logo img{height:16px; width:auto; filter:invert(1); mix-blend-mode:screen; opacity:.8}

/* ───────── 포트폴리오 페이지 ───────── */
.pf-hero{padding:calc(var(--nav) + clamp(64px,10vw,140px)) 0 clamp(40px,6vw,80px)}
.pf-hero h1{font-size:clamp(44px,8vw,128px); letter-spacing:-.06em; line-height:1.02; margin:0; font-weight:800}
.pf-hero p{color:var(--text-2); font-size:clamp(16px,1.5vw,20px); margin:24px 0 0; max-width:640px}
.pf-tabs{position:sticky; top:var(--nav); z-index:20; background:rgba(8,8,10,.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-block:1px solid var(--line)}
.pf-tabs .wrap{display:flex; gap:8px; overflow-x:auto; padding-block:12px; scrollbar-width:none}
.pf-tabs a{flex:none; font-size:14px; padding:8px 14px; border-radius:999px; border:1px solid var(--line-2); color:var(--text-2)}
.pf-tabs a:hover{color:var(--text); border-color:var(--text-2)}
.pf-group{padding:clamp(64px,8vw,120px) 0 0}
.pf-group > .wrap > h2{font-size:clamp(28px,3.6vw,52px); letter-spacing:-.045em; margin:0 0 8px}
.pf-group > .wrap > p{color:var(--text-2); margin:0 0 clamp(28px,3vw,44px)}
.pf{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:clamp(18px,2.6vw,36px); display:grid; grid-template-columns:1fr; gap:24px; margin-bottom:20px}
@media (min-width:1024px){.pf{grid-template-columns:1.05fr .95fr; gap:40px}}
.pf__head{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; align-items:baseline; grid-column:1/-1; border-bottom:1px solid var(--line); padding-bottom:18px}
.pf__head h3{margin:0; font-size:clamp(24px,2.6vw,36px); letter-spacing:-.04em}
.pf__head h3 small{display:block; font-size:14px; color:var(--text-2); font-weight:500; letter-spacing:0; margin-bottom:4px}
.pf__head a{font-size:14px; color:var(--text-2); border-bottom:1px solid var(--line-2)}
.pf__shot{border-radius:16px; overflow:hidden; background:#fff; border:1px solid var(--line)}
.pf__shot img{width:100%}
.pf__shot + .pf__shot{margin-top:12px}
.pf > div:not(.pf__head){display:flex; flex-direction:column; min-width:0}
.pf__ba{display:flex; flex-direction:column; flex:1; margin-top:12px}
.pf__ba figure{margin:0; position:relative; flex:1; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:16px; overflow:hidden; min-height:130px}
.pf__ba figcaption{position:absolute; top:10px; left:10px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; padding:4px 10px; border-radius:999px; background:rgba(8,8,10,.8); color:var(--text)}
.pf__ba img{width:100%; height:auto}
.pf__nums{display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line)}
.pf__nums div{padding:16px 0; border-bottom:1px solid var(--line)}
.pf__nums div:nth-child(even){padding-left:18px; border-left:1px solid var(--line)}
.pf__nums dt{font-size:13px; color:var(--text-3)}
.pf__nums dd{margin:2px 0 0; font-size:clamp(24px,2.4vw,34px); font-weight:750; letter-spacing:-.04em}
.pf__reels{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:16px}
.pf__reels.two{grid-template-columns:repeat(2,1fr)}
.pf__reels .reel__play{font-size:clamp(16px,1.6vw,22px); left:10px; bottom:30px}
.pf .note{margin-top:14px}
.accs__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
@media (min-width:768px){.accs__grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1200px){.accs__grid{grid-template-columns:repeat(4,1fr)}}
.accs__grid figure{margin:0; border-radius:14px; overflow:hidden; background:#fff; aspect-ratio:358/131}
.accs__grid img{width:100%; height:100%; object-fit:cover}
.pf-cta{margin:clamp(72px,9vw,140px) 0 0; padding:clamp(40px,6vw,80px) 0; border-top:1px solid var(--line); text-align:center}
.pf-cta h2{font-size:clamp(34px,5vw,72px); letter-spacing:-.05em; line-height:1.1; margin:0 0 28px}

/* 포트폴리오 추가 */
.pf__reels.three{grid-template-columns:repeat(3,1fr); gap:10px; flex:1}
.pf__reels.three .reel{margin:0; display:flex; flex-direction:column; min-width:0}
.pf__reels.three .reel__img{flex:1; aspect-ratio:auto; border-radius:14px}
.pf__reels.three .reel__img::before{content:""; display:block; padding-top:155.6%}
.pf__reels.three .reel__img img{position:absolute; inset:0}
.pf__shot:last-child{flex:1; display:flex; align-items:center; background:#fff}
.pf__nums + .pf__reels, .pf__tag + .pf__reels{margin-top:16px}
.pf__shot + .pf__nums{margin-top:14px}
.reel--note .reel__img{background:linear-gradient(160deg, rgba(255,255,255,.07), var(--surface-2)); border-color:var(--line-2)}
.reel--note p{position:absolute; inset:0; margin:0; padding:clamp(12px,1.4vw,20px); display:flex; flex-direction:column; justify-content:center; gap:8px; z-index:1}
.reel--note span{font-size:clamp(12px,1.05vw,14px); color:var(--text-2); line-height:1.5}
.reel--note b{font-size:clamp(34px,4.4vw,64px); font-weight:800; letter-spacing:-.06em; line-height:1}
.start{color:#111}
.start__in{display:flex; align-items:center; gap:clamp(14px,2vw,28px); padding:clamp(18px,2.2vw,28px) clamp(18px,3vw,40px); width:100%}
.start__ava{flex:none; width:clamp(72px,9vw,118px); aspect-ratio:1; border-radius:50%; padding:3px; background:conic-gradient(from 200deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5,#feda75)}
.start__ava img{width:100%!important; height:100%!important; border-radius:50%; border:3px solid #fff; object-fit:cover; background:#eee}
.start__tx{min-width:0; display:flex; flex-direction:column; gap:4px}
.start__tx b{font-size:clamp(19px,2.1vw,28px); font-weight:800; letter-spacing:-.03em; line-height:1.2; overflow-wrap:anywhere}
.start__tx span{font-size:clamp(13px,1.2vw,16px); color:#333}
.start__tx p{margin:6px 0 0; display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; font-size:clamp(13px,1.25vw,17px); font-weight:600; color:#111}
.start__tx em{font-style:normal; font-weight:700; padding:6px 14px; border:2.5px solid #e23a2e; border-radius:9px}
.pf-hero--wall{position:relative; overflow:hidden}
.pf-hero--wall .wrap{position:relative; z-index:1}
.pf-wall{position:absolute; top:0; bottom:0; right:0; width:min(52%,760px); display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:0 var(--gutter) 0 0; opacity:.6; -webkit-mask-image:linear-gradient(90deg, transparent, #000 38%), linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg, transparent, #000 38%), linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask-composite:intersect; pointer-events:none}
.pf-wall__col{overflow:hidden}
.pf-wall__track{display:flex; flex-direction:column; gap:12px; animation:wall 46s linear infinite}
.pf-wall__col:nth-child(2) .pf-wall__track{animation-duration:58s; animation-direction:reverse}
.pf-wall__col:nth-child(3) .pf-wall__track{animation-duration:52s}
.pf-wall__track img{width:100%; aspect-ratio:9/14; object-fit:cover; border-radius:14px; filter:saturate(.85) brightness(.8)}
@keyframes wall{to{transform:translateY(calc(-50% - 6px))}}
@media (max-width:899px){.pf-wall{width:100%; opacity:.16; padding:0 var(--gutter)}}
.pf__reels .reel__img img{filter:none}
.pf__reels .reel__img::after{display:none}
.pf__story{margin:18px 0 0; color:var(--text-2); font-size:clamp(15px,1.3vw,17px)}
.pf__story b{color:var(--text); font-weight:650}
.pf__tag{display:inline-block; align-self:flex-start; font-size:12px; font-weight:700; padding:4px 11px; border-radius:999px; margin-bottom:8px}
.pf-lead{font-size:clamp(20px,2.4vw,32px)!important; color:var(--text)!important; font-weight:650; letter-spacing:-.035em; line-height:1.35}

/* 칼럼 */
.col-group{padding:clamp(40px,5vw,72px) 0 0}
.col-grid{display:grid; grid-template-columns:1fr; gap:16px}
@media (min-width:700px){.col-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.col-grid{grid-template-columns:repeat(3,1fr); gap:20px}}
.col-card{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); overflow:hidden; display:flex; flex-direction:column; transition:border-color .3s, transform .5s var(--ease)}
a.col-card:hover{border-color:rgba(255,255,255,.3); transform:translateY(-4px)}
.col-card__thumb{position:relative; aspect-ratio:16/9; background:var(--surface-2); overflow:hidden}
.col-card__thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease)}
.col-card__thumb span{position:absolute; left:14px; top:14px; z-index:1; font-family:var(--mono); font-size:11px; letter-spacing:.12em; line-height:1; padding:7px 10px; border-radius:99px; background:rgba(255,255,255,.88); color:#111114}
a.col-card:hover .col-card__thumb img{transform:scale(1.04)}
.col-card__body{padding:20px 22px 22px; display:flex; flex-direction:column; gap:8px; flex:1}
.col-card h3{margin:0; font-size:clamp(18px,1.7vw,22px); letter-spacing:-.03em; line-height:1.38}
.col-card p{margin:0; color:var(--text-2); font-size:15px; line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.col-card time{margin-top:auto; padding-top:10px; font-size:13px; color:var(--text-3)}
.col-card--soon,.js .col-card--soon.reveal.in{opacity:.5}
.col-card--soon .col-card__thumb img{filter:grayscale(1)}
.article{max-width:740px; margin:0 auto; padding:clamp(40px,6vw,88px) 0 0}
.article .eyebrow a{color:var(--text-2); border-bottom:1px solid var(--line-2)}
.article h2{font-size:clamp(30px,4.2vw,54px); letter-spacing:-.05em; line-height:1.2; margin:0 0 14px}
.article .meta{font-size:13px; color:var(--text-3); margin:0 0 clamp(28px,4vw,44px); padding-bottom:20px; border-bottom:1px solid var(--line)}
.article .art-lead{font-size:clamp(18px,1.9vw,23px); line-height:1.65; color:var(--text); font-weight:500; letter-spacing:-.02em; margin:0 0 8px}
.article h3{font-size:clamp(21px,2.1vw,27px); letter-spacing:-.035em; margin:clamp(34px,4vw,48px) 0 12px; line-height:1.35}
.article p{color:var(--text-2); font-size:17px; line-height:1.9; margin:0 0 16px}
.article blockquote{margin:clamp(26px,3vw,38px) 0; padding:4px 0 4px 22px; border-left:2px solid var(--foil-solid); font-size:clamp(19px,2vw,25px); line-height:1.55; letter-spacing:-.03em; font-weight:650; color:var(--text)}
.article figure{margin:clamp(26px,3vw,38px) 0}
.article figcaption{margin-top:10px; font-size:13px; line-height:1.65; color:var(--text-3)}
.art-figs{display:grid; grid-template-columns:1fr; gap:18px; margin:clamp(26px,3vw,38px) 0}
@media (min-width:640px){.art-figs{grid-template-columns:1fr 1fr; align-items:start}}
.article .art-figs figure{margin:0}
.art-box{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:clamp(18px,2.4vw,28px)}
.article .art-box__t{margin:0 0 14px; font-size:13px; line-height:1.5; color:var(--text-3)}
.art-flow__row + .art-flow__row{margin-top:18px; padding-top:18px; border-top:1px solid var(--line)}
.article .art-flow__k{margin:0 0 10px; font-size:14px; line-height:1.5; font-weight:650; color:var(--text)}
.article .art-flow__row.is-dim .art-flow__k{color:var(--text-3)}
.art-flow ol{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:14px}
@media (min-width:640px){.art-flow ol{grid-template-columns:repeat(var(--n,4),1fr)}}
.art-flow li{position:relative; border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:14px; line-height:1.5; color:var(--text-2); background:var(--surface-2)}
.art-flow li:not(:last-child)::after{content:"↓"; position:absolute; left:50%; bottom:-7px; transform:translate(-50%,50%); font-size:11px; color:var(--text-3)}
@media (min-width:640px){.art-flow li:not(:last-child)::after{content:"→"; left:auto; right:-7px; top:50%; bottom:auto; transform:translate(50%,-50%)}}
.art-flow__row.is-key li:last-child{background:var(--foil); background-size:260% 100%; color:var(--on-foil); font-weight:650; border-color:transparent}
.art-flow__row.is-dim li:last-child{color:var(--text-3); border-style:dashed}
.art-tbl table{width:100%; border-collapse:collapse}
.art-tbl th,.art-tbl td{text-align:left; padding:13px 12px 13px 0; border-bottom:1px solid var(--line); font-size:15px; line-height:1.55; vertical-align:top; color:var(--text-2); font-weight:400}
.art-tbl thead th{font-size:12px; color:var(--text-3); padding-top:0}
.art-tbl tbody th{color:var(--text); font-weight:650}
.art-tbl tbody tr:last-child th,.art-tbl tbody tr:last-child td{border-bottom:0; padding-bottom:0}
.art-tbl td b{color:var(--text); font-weight:650}
.art-sum{margin:clamp(22px,3vw,34px) 0; padding:clamp(16px,2.2vw,24px) clamp(18px,2.4vw,28px); border-left:3px solid var(--foil-solid); border-radius:0 16px 16px 0; background:var(--surface)}
.art-sum ol{list-style:none; margin:0; padding:0; counter-reset:s; display:grid; gap:8px}
.art-sum li{counter-increment:s; display:grid; grid-template-columns:22px 1fr; gap:8px; font-size:16px; font-weight:600; line-height:1.55; color:var(--text)}
.art-sum li::before{content:counter(s); font-family:var(--mono); font-size:12px; font-weight:400; color:var(--text-3); padding-top:3px}
.art-check ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.art-check li{display:grid; grid-template-columns:18px 1fr; gap:12px; align-items:start; font-size:15px; line-height:1.55; color:var(--text)}
.art-check li::before{content:""; width:16px; height:16px; margin-top:3px; border:1.5px solid var(--line-2); border-radius:5px; background:var(--surface-2)}
.art-steps ol{list-style:none; margin:0; padding:0; counter-reset:st}
.art-steps li{counter-increment:st; display:grid; grid-template-columns:28px 1fr; gap:2px 12px; padding:13px 0; border-top:1px solid var(--line)}
.art-steps li:first-child{border-top:0; padding-top:0}
.art-steps li:last-child{padding-bottom:0}
.art-steps li::before{content:counter(st, decimal-leading-zero); grid-row:1 / span 2; font-family:var(--mono); font-size:12px; color:var(--text-3); padding-top:4px}
.art-steps b{font-size:16px; font-weight:650; line-height:1.5; color:var(--text)}
.art-steps span{font-size:14px; line-height:1.6; color:var(--text-2)}
.art-pair{display:grid; grid-template-columns:1fr; gap:12px}
@media (min-width:640px){.art-pair{grid-template-columns:1fr 1fr}}
.art-pair > div{border:1px solid var(--line); border-radius:12px; background:var(--surface-2); padding:14px 16px; font-size:14px; line-height:1.75; color:var(--text-2)}
.art-pair > div:last-child{color:var(--text); font-weight:500}
.art-pair h4{margin:0 0 8px; font-size:12px; font-weight:600; letter-spacing:0; color:var(--text-3)}
.art-link{display:inline-flex; gap:8px; color:var(--text); border-bottom:1px solid var(--line-2); padding-bottom:2px; font-weight:600}
.article .art-refs{margin-top:36px; padding-top:18px; border-top:1px solid var(--line); font-size:13px; line-height:1.9; color:var(--text-3)}
.art-refs a{color:var(--text-2); border-bottom:1px solid var(--line)}
.art-cta{margin:clamp(40px,5vw,64px) 0 0; padding:clamp(26px,3.4vw,44px); border-radius:var(--radius); border:1px solid rgba(255,255,255,.25); background:radial-gradient(130% 160% at 90% 0%, #24242b, #111114 55%); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px}
.art-cta h3{margin:0; font-size:clamp(22px,2.6vw,34px); letter-spacing:-.04em; line-height:1.3}
.art-more{max-width:740px; margin:clamp(48px,6vw,80px) auto 0; padding-bottom:clamp(40px,5vw,72px)}
.art-more h3{margin:0 0 14px; font-size:15px; color:var(--text-3); font-weight:500}
.art-more__grid{display:grid; gap:10px}
.art-more__c{display:grid; grid-template-columns:76px 1fr; gap:12px; align-items:baseline; padding:16px 0; border-top:1px solid var(--line)}
.art-more__c span{font-size:13px; color:var(--text-3)}
.art-more__c b{font-size:17px; font-weight:600; letter-spacing:-.02em}
.art-more__c:hover b{color:var(--foil-solid)}

/* 롱폼 상품 */
.lf-hero h1{font-size:clamp(38px,7vw,112px)}
/* 롱폼 첫 화면 뒤 배경 (AI로 만든 스튜디오 컷. 영상이 안 뜨면 사진이 보인다) */
.lf-hero{position:relative; overflow:hidden; min-height:min(88vh,860px); display:flex; align-items:flex-end}
.lf-hero .wrap{position:relative; z-index:1}
.lf-hero__bg{position:absolute; inset:0; z-index:0}
.lf-hero__bg img,.lf-hero__bg video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:78% 50%}
.lf-hero__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,8,10,.55) 0%, rgba(8,8,10,.1) 35%, rgba(8,8,10,.35) 70%, var(--bg) 100%), linear-gradient(90deg, rgba(8,8,10,.9) 0%, rgba(8,8,10,.6) 42%, rgba(8,8,10,.08) 100%)}
@media (max-width:767px){.lf-hero__bg::after{background:linear-gradient(180deg, rgba(8,8,10,.6) 0%, rgba(8,8,10,.45) 40%, rgba(8,8,10,.8) 75%, var(--bg) 100%)}}
.lf-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
@media (min-width:1000px){.lf-grid{grid-template-columns:repeat(4,1fr); gap:16px}}
.lf-card{border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(180deg, var(--surface-2), var(--surface)); padding:clamp(18px,2.2vw,28px); display:flex; flex-direction:column; gap:8px}
.lf-card p{margin:0; color:var(--text-2); font-size:15px; line-height:1.55}
.lf-card .lf-card__k{font-size:13px; color:var(--text-3)}
.lf-card .lf-card__n{font-size:clamp(26px,3vw,44px); font-weight:800; letter-spacing:-.05em; line-height:1.15; color:var(--text)}
.lf-tasks{margin-top:16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:clamp(20px,2.6vw,36px)}
.lf-tasks__t{margin:0 0 6px; font-size:14px; color:var(--text-3)}
.lf-tasks ul{list-style:none; margin:0; padding:0}
.lf-tasks li{display:grid; grid-template-columns:96px 1fr; gap:12px; padding:14px 0; border-top:1px solid var(--line); align-items:baseline}
.lf-tasks li:first-child{border-top:0}
.lf-tasks b{font-size:17px; letter-spacing:-.02em}
.lf-tasks span{color:var(--text-2); font-size:15px}
.lf-tasks .lf-up__total{display:block; font-size:clamp(44px,5.6vw,84px); font-weight:800; letter-spacing:-.055em; line-height:1.05; color:var(--text)}
.lf-tasks .lf-up__total span{font-size:inherit; color:inherit}
.lf-tasks .lf-up__total small{display:inline-block; margin-left:.6em; font-size:clamp(14px,1.3vw,17px); font-weight:500; letter-spacing:-.01em; color:var(--text-2); vertical-align:middle}
.lf-tasks li.lf-tasks__up{align-items:start; padding-block:clamp(20px,2.4vw,30px)}
.lf-tasks li.lf-tasks__up > b{padding-top:.5em}
@media (max-width:699px){.lf-tasks li.lf-tasks__up{grid-template-columns:1fr; gap:6px} .lf-tasks li.lf-tasks__up > b{padding-top:0} .lf-tasks .lf-up__total small{display:block; margin:8px 0 0}}
.lf-up{display:grid; grid-template-columns:1fr; gap:8px; margin-top:16px; font-style:normal}
@media (min-width:700px){.lf-up{grid-template-columns:repeat(3,1fr); gap:12px}}
@media (min-width:1100px){.lf-up{grid-template-columns:repeat(5,1fr)}}
.lf-up em{font-style:normal; border:1px solid var(--line-2); border-radius:14px; padding:14px 16px; color:var(--text); font-weight:650; font-size:17px; background:var(--surface-2)}
.lf-up small{display:block; margin-top:2px; font-size:13px; font-weight:400; color:var(--text-3)}
.lf-tasks__note{margin:6px 0 0; padding-top:16px; border-top:1px solid var(--line); font-size:14px; color:var(--text-3)}
.lf-tasks__note a{color:var(--text); border-bottom:1px solid var(--line-2); white-space:nowrap; margin-left:4px}
.lf-three{display:grid; grid-template-columns:1fr; gap:12px}
@media (min-width:900px){.lf-three{grid-template-columns:repeat(3,1fr); gap:16px}}
.lf-step{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:clamp(22px,2.6vw,36px)}
.lf-step__n{font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--text-3)}
.lf-step h3{margin:14px 0 10px; font-size:clamp(24px,2.6vw,36px); letter-spacing:-.045em}
.lf-step p{margin:0; color:var(--text-2); font-size:16px; line-height:1.7}
/* ───────── 밝은 판 (칼럼 쪽만. body에 theme-light) ───────── */
.theme-light{--bg:#f7f7f7; --surface:#ffffff; --surface-2:#efefef; --line:rgba(0,0,0,.09); --line-2:rgba(0,0,0,.2); --text:#111114; --text-2:#55555b; --text-3:#8a8a90; --foil-solid:#17171a; --on-foil:#f7f7f7;
  --foil:linear-gradient(105deg,#2c2c31 0%,#6f6f76 14%,#17171a 28%,#57575d 44%,#0f0f12 60%,#66666c 78%,#25252a 100%)}
.theme-light .foil{filter:none}
.theme-light .grain{opacity:.03}
.theme-light .nav{background:rgba(247,247,247,.9)}
.theme-light .mnav{background:rgba(247,247,247,.98)}
.theme-light .nav__logo img{filter:none; mix-blend-mode:multiply}
.theme-light .nav__sub{box-shadow:0 12px 30px rgba(0,0,0,.12)}
.theme-light .btn--foil{box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 8px 24px rgba(0,0,0,.18)}
.theme-light .btn--foil::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent)}
.theme-light .col-card{box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.04)}
.theme-light .col-card:hover{border-color:rgba(0,0,0,.28)}
.theme-light .art-box{box-shadow:0 1px 2px rgba(0,0,0,.03)}
/* 어두운 채로 두는 곳: 상담 안내 상자, 맨 아래 */
.theme-light .art-cta,.theme-light .footer{--bg:#08080a; --surface:#111114; --surface-2:#18181c; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.15); --text:#f2f2f0; --text-2:#a3a29e; --text-3:#6c6c70; --foil-solid:#dcdce0; --on-foil:#0b0b0d;
  --foil:linear-gradient(105deg,#77777d 0%,#c9c9ce 12%,#ffffff 22%,#a2a2a8 34%,#e9e9ed 47%,#86868c 60%,#f7f7f8 74%,#9a9aa0 88%,#d6d6da 100%); color:var(--text)}
.theme-light .art-cta .foil{filter:drop-shadow(0 1px 0 rgba(0,0,0,.65))}
.theme-light .col-card__thumb{border-bottom:1px solid var(--line)}
.theme-light .art-cta{border-color:transparent}
.theme-light .art-cta .btn--foil{box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.25), 0 8px 30px rgba(0,0,0,.45)}
.theme-light .footer{background:#0b0b0d; border-top:0; margin-top:clamp(48px,6vw,88px)}
/* 칼럼 목록 머리: 제목을 크게 쓰지 않는다 */
.col-hero{padding:calc(var(--nav) + clamp(36px,5vw,64px)) 0 0}
.col-hero .eyebrow{margin-bottom:10px}
.col-hero h1{font-size:clamp(26px,3vw,38px); letter-spacing:-.04em; line-height:1.2; font-weight:750; text-wrap:balance}
.col-hero p{margin-top:8px; font-size:clamp(15px,1.3vw,17px)}
.col-hero + .col-group{padding-top:clamp(24px,3vw,40px)}
.theme-light .article h2{font-size:clamp(26px,3.2vw,40px); letter-spacing:-.04em; line-height:1.28}
.theme-light .pf-cta h2{font-size:clamp(26px,3.4vw,44px); line-height:1.25}
.theme-light .art-cta h3{font-size:clamp(20px,2.2vw,28px)}

/* 서비스 구역: 숏폼 한 편을 여러 채널에 올린다는 어필 칸 */
.upl{display:grid; grid-template-columns:1fr; gap:clamp(18px,2.4vw,32px); align-items:center; margin-bottom:clamp(14px,1.6vw,20px); padding:clamp(22px,3vw,44px); border:1px solid rgba(255,255,255,.25); border-radius:var(--radius); background:radial-gradient(130% 150% at 100% 0%, #26262d, #0d0d10 60%)}
@media (min-width:1000px){.upl{grid-template-columns:auto 1fr; gap:clamp(32px,5vw,80px)}}
.upl p{margin:0}
.upl__k{font-size:14px; color:var(--text-3)}
.upl__n{font-size:clamp(52px,7vw,104px); font-weight:800; letter-spacing:-.06em; line-height:1.05; white-space:nowrap}
.upl__n small{font-size:.22em; font-weight:650; letter-spacing:-.02em; color:var(--text-2); margin-left:.5em}
.upl .upl__d{margin-top:8px; color:var(--text-2); font-size:clamp(15px,1.3vw,17px)}
.upl__ch{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
@media (max-width:699px){.upl__ch li:last-child:nth-child(odd){grid-column:1 / -1}}
@media (min-width:700px){.upl__ch{grid-template-columns:repeat(5,1fr); gap:12px}}
.upl__ch li{border:1px solid var(--line-2); border-radius:14px; background:var(--surface-2); padding:14px 16px; display:flex; flex-direction:column; gap:2px}
.upl__ch b{font-size:16px; letter-spacing:-.02em; line-height:1.35}
.upl__ch span{font-size:13px; color:var(--text-3)}

/* ───────── 숏폼 상품 쪽 ───────── */
.sf-hero h1{font-size:clamp(38px,7vw,112px)}
.sf-hero{min-height:min(84vh,820px); display:flex; align-items:flex-end}
.sf-hero .pf-wall{opacity:.82}
.sf-hero .pf-wall__track img{filter:saturate(.9) brightness(.92)}
@media (max-width:899px){.sf-hero .pf-wall{opacity:.2}}
.sf-four{display:grid; grid-template-columns:1fr; gap:12px}
@media (min-width:640px){.sf-four{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.sf-four{grid-template-columns:repeat(4,1fr); gap:16px}}
.sf-four .lf-step h3{font-size:clamp(21px,2vw,27px)}
.sf-say{margin:clamp(32px,4vw,56px) 0 0; font-size:clamp(22px,2.8vw,40px); font-weight:700; letter-spacing:-.045em; line-height:1.35}
.sf-quotes{display:grid; grid-template-columns:1fr; gap:12px}
@media (min-width:800px){.sf-quotes{grid-template-columns:1fr 1fr; gap:16px}}
.sf-q{margin:0; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:clamp(22px,2.8vw,40px); font-size:clamp(20px,2.3vw,32px); font-weight:650; letter-spacing:-.04em; line-height:1.4}
.sf-q::before{content:"“"; display:block; height:.55em; font-size:1.9em; line-height:1; color:var(--text-3)}
.sf-value{display:grid; grid-template-columns:1fr; gap:12px}
@media (min-width:1000px){.sf-value{grid-template-columns:1fr 1fr; gap:16px}}
.sf-big{border:1px solid rgba(255,255,255,.25); border-radius:var(--radius); background:radial-gradient(130% 150% at 100% 0%, #26262d, #0d0d10 60%); padding:clamp(26px,3.4vw,52px); display:flex; flex-direction:column; justify-content:flex-end; gap:10px; min-height:clamp(220px,24vw,340px)}
.sf-big p{margin:0}
.sf-big__k{font-size:14px; color:var(--text-3)}
.sf-big__n{font-size:clamp(40px,5.4vw,84px); font-weight:800; letter-spacing:-.06em; line-height:1.05}
.sf-big__n small{font-size:.28em; font-weight:650; letter-spacing:-.02em; color:var(--text-2); margin-left:.4em}
.sf-big__d{color:var(--text-2); font-size:15px}
.sf-calc{list-style:none; margin:0; padding:clamp(12px,1.6vw,20px) clamp(20px,2.6vw,36px); border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); display:flex; flex-direction:column; justify-content:center}
.sf-calc li{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:6px 16px; padding:clamp(16px,1.8vw,24px) 0; border-top:1px solid var(--line)}
.sf-calc li:first-child{border-top:0}
.sf-calc span{color:var(--text-2); font-size:clamp(15px,1.3vw,17px)}
.sf-calc b{font-size:clamp(19px,2vw,28px); letter-spacing:-.03em; font-variant-numeric:tabular-nums; white-space:nowrap}
.sf-vs{display:grid; grid-template-columns:1fr; gap:12px}
@media (min-width:900px){.sf-vs{grid-template-columns:1fr 1fr; gap:16px}}
.sf-vs__c{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:clamp(24px,3vw,44px); display:flex; flex-direction:column; gap:12px}
.sf-vs__c--key{border-color:rgba(255,255,255,.28); background:linear-gradient(160deg, rgba(255,255,255,.06), var(--surface) 55%)}
.sf-vs__c p{margin:0; color:var(--text-2); font-size:16px; line-height:1.7}
.sf-vs__c .sf-vs__k{font-size:14px; color:var(--text-3)}
.sf-vs__c h3{margin:0 0 4px; font-size:clamp(24px,2.6vw,38px); letter-spacing:-.045em; line-height:1.25}
.sf-vs__c:not(.sf-vs__c--key) h3{color:var(--text-2)}
.sf-vs__c .sf-vs__n{margin-top:auto; padding-top:18px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; font-size:clamp(26px,3vw,44px); font-weight:800; letter-spacing:-.05em; line-height:1.15; color:var(--text)}
.sf-vs__c:not(.sf-vs__c--key) .sf-vs__n{color:var(--text-2)}
.sf-vs__n small{font-size:14px; font-weight:500; letter-spacing:-.01em; color:var(--text-2)}
.sf-list{list-style:none; margin:4px 0 0; padding:0; display:grid; gap:14px; font-size:clamp(16px,1.4vw,19px); line-height:1.55; color:var(--text)}
.sf-list li{display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start}
.sf-list li::before{content:""; width:7px; height:13px; margin:4px 0 0 6px; border-right:2px solid var(--foil-solid); border-bottom:2px solid var(--foil-solid); transform:rotate(45deg)}
.sf-list--no{color:var(--text-2)}
.sf-list--no li::before{content:"×"; width:auto; height:auto; margin:0; border:0; transform:none; font-size:20px; line-height:1.35; color:var(--text-3); text-align:center}
.sf-road{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:12px}
@media (min-width:900px){.sf-road{grid-template-columns:repeat(3,1fr); gap:16px}}
.sf-road li{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:clamp(22px,2.6vw,36px); display:flex; flex-direction:column; gap:12px}
.sf-road li:last-child{border-color:rgba(255,255,255,.28)}
.sf-road__t{font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--text-3)}
.sf-road h3{margin:0; font-size:clamp(21px,2.2vw,30px); letter-spacing:-.045em; line-height:1.3}
.sf-road p{margin:0; color:var(--text-2); font-size:16px; line-height:1.7}
.sf-road .sf-road__r{margin-top:auto; padding-top:14px; border-top:1px solid var(--line); color:var(--text); font-weight:650; font-size:15px}

/* ───────── About 916 쪽 ───────── */
.ab-hero{position:relative; overflow:hidden; min-height:min(86vh,840px); display:flex; align-items:flex-end}
.ab-hero .wrap{position:relative; z-index:1}
.ab-hero h1{font-size:clamp(44px,8.4vw,136px)}
.ab-hero h1 small{display:block; margin-top:.22em; font-size:.4em; font-weight:700; letter-spacing:-.045em; line-height:1.25; color:var(--text-2)}
.ab-hero .ab-hero__say{margin-top:clamp(22px,3vw,40px); padding-top:clamp(18px,2.4vw,30px); border-top:1px solid var(--line-2); max-width:none; font-size:clamp(24px,3.4vw,52px); font-weight:800; letter-spacing:-.05em; line-height:1.2; color:var(--text)}
.ab-profs{display:grid; grid-template-columns:1fr; gap:14px; margin-top:clamp(40px,5vw,64px)}
@media (min-width:800px){.ab-profs{grid-template-columns:1fr 1fr; gap:20px}}
.ab-prof{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:clamp(12px,1.4vw,18px); display:flex; flex-direction:column; gap:14px}
.ab-prof__shot{aspect-ratio:1100/473; display:flex; align-items:center; background:#fff}
.ab-prof__shot img{clip-path:inset(3px 0)}
.ab-prof__meta{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:0 8px 6px}
.ab-prof h3{margin:0; font-size:clamp(22px,2vw,26px); letter-spacing:-.04em}
.ab-prof h3 small{font-size:14px; font-weight:500; letter-spacing:0; color:var(--text-2); margin-left:8px}
.ab-prof p{margin:0; display:flex; align-items:baseline; gap:10px}
.ab-prof p span{font-size:12px; color:var(--text-3)}
.ab-prof p b{font-size:clamp(20px,1.9vw,24px); letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.ab-motto{text-align:center; padding-block:clamp(48px,8vw,120px)}
.ab-motto p{margin:0}
.ab-motto__k{font-size:clamp(15px,1.4vw,19px); color:var(--text-2); margin-bottom:clamp(14px,2vw,26px)!important}
.ab-motto__t{font-size:clamp(38px,6.6vw,108px); font-weight:800; letter-spacing:-.065em; line-height:1.12}
.ab-turn{margin:clamp(36px,5vw,72px) 0 0; font-size:clamp(34px,5.4vw,84px); font-weight:800; letter-spacing:-.06em; line-height:1.15}
.sf-say + .sec-lead{margin-top:14px}
.ab-wins{display:grid; grid-template-columns:1fr; gap:12px}
@media (min-width:900px){.ab-wins{grid-template-columns:repeat(6,1fr); gap:16px} .ab-wins > *{grid-column:span 2} .ab-wins > .ab-win{grid-column:span 3}}
.ab-win{border-color:var(--line-2); background:linear-gradient(160deg, rgba(255,255,255,.06), var(--surface) 55%)}
.ab-win h3{font-size:clamp(20px,1.9vw,26px); color:var(--text-2); margin-bottom:6px}
.ab-wins{--n:clamp(34px,4.4vw,68px)}
.ab-win .ab-win__n{margin:0 0 12px; height:calc(var(--n) * 1.12); display:flex; align-items:flex-end; font-size:var(--n); font-weight:800; letter-spacing:-.06em; line-height:1.1; color:var(--text)}
.ab-win__n--sm > span{font-size:.72em; white-space:nowrap}

.sf-calc span small{display:block; margin-top:2px; font-size:13px; color:var(--text-3)}
.sf-calc ol{list-style:none; margin:0; padding:0}
.sf-nums{display:grid; grid-template-columns:1fr; gap:12px}
@media (min-width:900px){.sf-nums{grid-template-columns:repeat(3,1fr); gap:16px}}
.sf-num{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:clamp(22px,2.6vw,36px) clamp(22px,2.8vw,40px); display:flex; flex-direction:column; gap:8px}
.sf-num--key{border-color:rgba(255,255,255,.25); background:radial-gradient(130% 150% at 100% 0%, #26262d, #0d0d10 60%)}
.sf-num p{margin:0}
.sf-num__k{font-size:14px; color:var(--text-3)}
.sf-num__n{font-size:clamp(36px,4.2vw,64px); font-weight:800; letter-spacing:-.06em; line-height:1.1; white-space:nowrap; font-variant-numeric:tabular-nums}
.sf-flow{list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:1fr; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
.sf-flow li{display:flex; justify-content:space-between; align-items:baseline; gap:6px 16px; padding:16px clamp(20px,2.4vw,30px); border-top:1px solid var(--line)}
.sf-flow li:first-child{border-top:0}
.sf-flow span{font-size:15px; line-height:1.5; color:var(--text-2)}
.sf-flow span small{display:block; font-size:12px; color:var(--text-3)}
.sf-flow b{font-size:clamp(18px,1.8vw,24px); letter-spacing:-.03em; line-height:1.3; white-space:nowrap; font-variant-numeric:tabular-nums}
@media (min-width:900px){.sf-flow{grid-template-columns:repeat(4,1fr); margin-top:16px} .sf-flow li{flex-direction:column; justify-content:flex-start; align-items:flex-start; padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,30px); border-top:0; border-left:1px solid var(--line)} .sf-flow li:first-child{border-left:0}}
.sf-flow + .steps-note{margin-top:14px}
.sf-calc__t{margin:clamp(8px,1vw,14px) 0 0; font-size:14px; color:var(--text-3)}
.sf-value + .steps-note{margin-top:14px}
.sf-clients{display:grid; grid-template-columns:1fr; gap:12px; margin-top:12px}
@media (min-width:700px){.sf-clients{grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px}}
.sf-clients div{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:clamp(16px,2vw,24px) clamp(18px,2.2vw,28px); display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:2px 12px}
.sf-clients span{font-size:13px; color:var(--text-3)}
.sf-clients b{grid-row:2; font-size:clamp(20px,2vw,28px); letter-spacing:-.04em; line-height:1.25; font-variant-numeric:tabular-nums}
.sf-clients small{grid-row:2; font-size:14px; color:var(--text-2)}
/* 도움말 단추와 작은 창 (누르면 열리고, 바깥을 누르면 닫힌다) */
.tip{position:relative; display:block; margin-top:10px}
.tip summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:500; line-height:1.3; color:var(--text-2); border:1px solid var(--line-2); border-radius:99px; padding:5px 6px 5px 13px; transition:color .2s, border-color .2s}
.tip summary::-webkit-details-marker{display:none}
.tip summary i{font-style:normal; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--foil-solid); color:var(--on-foil); font-size:12px; font-weight:700}
.tip summary:hover,.tip[open] summary{color:var(--text); border-color:var(--text-2)}
.tip__box{position:absolute; z-index:6; left:0; top:calc(100% + 10px); width:min(400px,100%); padding:18px 18px 10px; border:1px solid var(--line-2); border-radius:16px; background:var(--surface-2); box-shadow:0 18px 40px rgba(0,0,0,.55)}
.tip__box b{display:block; margin-bottom:8px; font-size:15px; letter-spacing:-.02em; color:var(--text)}
.tip .tip__box p{margin:0 0 8px; font-size:14px; line-height:1.65; color:var(--text-2)}

/* 롱폼: 직접 재 본 것 */
.lf-scope{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:12px}
@media (min-width:1000px){.lf-scope{gap:16px; margin-bottom:16px}}
.lf-scope div{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:clamp(16px,2.2vw,28px)}
.lf-scope b{display:block; font-size:clamp(24px,3vw,44px); font-weight:800; letter-spacing:-.05em; line-height:1.15; font-variant-numeric:tabular-nums}
.lf-scope span{display:block; margin-top:6px; color:var(--text-2); font-size:clamp(13px,1.1vw,15px); line-height:1.45}
.lf-research{display:grid; grid-template-columns:1fr; gap:12px}
@media (min-width:1000px){.lf-research{grid-template-columns:1.2fr .8fr; gap:16px}}
.lf-chart{border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(180deg, var(--surface), rgba(17,17,20,.35)); padding:clamp(20px,2.6vw,36px); display:flex; flex-direction:column}
.lf-chart__t{margin:0 0 clamp(14px,1.6vw,22px); font-size:clamp(18px,1.8vw,24px); font-weight:650; letter-spacing:-.03em}
.lf-rows{flex:1; display:flex; flex-direction:column; justify-content:space-between}
.lf-row{display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"k v t" "bar bar bar"; gap:8px 12px; align-items:center; padding:11px 0; border-top:1px solid var(--line)}
.lf-row--head{padding:0 0 10px; border-top:0; font-size:12px; color:var(--text-3)}
.lf-row__k{grid-area:k; font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--text-3)}
.lf-row__bar{grid-area:bar; height:8px; border-radius:99px; background:rgba(255,255,255,.05); overflow:hidden}
.lf-row__bar i{display:block; height:100%; min-width:4px; border-radius:99px; background:var(--foil); background-size:260% 100%; transform-origin:left center}
.lf-row--head .lf-row__bar{display:none}
.lf-row__v{grid-area:v; text-align:right; font-size:15px; font-weight:650; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.lf-row__t{grid-area:t; min-width:76px; text-align:right; font-size:13px; font-variant-numeric:tabular-nums; color:var(--text-3)}
.lf-row--head .lf-row__v,.lf-row--head .lf-row__t{font-size:12px; font-weight:400; color:var(--text-3); letter-spacing:0}
.lf-row__t.is-down::before{content:"↓ "}
.lf-row__t.is-up::before{content:"↑ "}
.lf-row__t.is-up{color:var(--text)}
@media (min-width:700px){
  .lf-row{grid-template-columns:44px 1fr 96px 96px; grid-template-areas:"k bar v t"; padding:0; min-height:44px}
  .lf-row--head{min-height:0; padding-bottom:10px}
  .lf-row--head .lf-row__bar{display:block; visibility:hidden}
}
.js .lf-chart.reveal .lf-row__bar i{transform:scaleX(0); transition:transform 1.2s var(--ease) .2s}
.js .lf-chart.reveal.in .lf-row__bar i{transform:scaleX(1)}
.lf-chart__cap{margin:clamp(14px,1.6vw,20px) 0 0; font-size:13px; color:var(--text-3); line-height:1.6}
.lf-finds{display:grid; grid-template-columns:1fr; gap:12px}
@media (min-width:640px) and (max-width:999px){.lf-finds{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.lf-finds{gap:16px}}
.lf-find{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:clamp(20px,2.2vw,30px); display:flex; flex-direction:column; gap:8px}
.lf-find .lf-find__n{font-size:clamp(28px,3vw,44px); font-weight:800; letter-spacing:-.05em; line-height:1.15; font-variant-numeric:tabular-nums; align-self:flex-start; color:var(--text); margin-bottom:4px}
.lf-find h3{margin:0; font-size:clamp(17px,1.5vw,20px); letter-spacing:-.03em; line-height:1.4}
.lf-find p{margin:0; color:var(--text-2); font-size:15px; line-height:1.65}
.lf-find .lf-find__so{color:var(--text); font-weight:600; margin-top:auto; padding-top:10px; border-top:1px solid var(--line)}
/* 롱폼: 시안 예시 */
.lf-samples{display:grid; grid-template-columns:1fr; gap:12px}
/* 위 두 장(이미지 분석, 브랜딩 기획)은 크게, 아래 세 장 */
@media (min-width:900px){.lf-samples{grid-template-columns:repeat(6,1fr); gap:16px} .lf-sample{grid-column:span 2} .lf-sample--lead{grid-column:span 3}}
.lf-sample{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:clamp(12px,1.2vw,16px); display:flex; flex-direction:column}
.lf-sample__img{position:relative; border-radius:calc(var(--radius) - 8px); overflow:hidden; aspect-ratio:16/9; background:var(--surface-2)}
.lf-sample__img img{width:100%; height:100%; object-fit:cover; filter:saturate(.8) brightness(.9)}
.lf-sample__img::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,8,10,0) 50%, rgba(8,8,10,.6)); box-shadow:inset 0 0 0 1px var(--line)}
.lf-sample__lock{position:absolute; left:12px; bottom:12px; z-index:1; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:rgba(8,8,10,.6); border:1px solid var(--line-2); color:var(--text-2)}
.lf-sample__lock svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
.lf-sample__body{flex:1; display:flex; flex-direction:column; padding:clamp(18px,2vw,26px) clamp(8px,1vw,14px) clamp(8px,1vw,12px)}
.lf-sample .s3__k{margin-bottom:12px}
.lf-sample h3{margin:0 0 10px; font-size:clamp(22px,2.2vw,30px); letter-spacing:-.045em; line-height:1.28}
.lf-sample p{margin:0; color:var(--text-2); font-size:15px; line-height:1.65}
.lf-sample .lf-sample__n{margin-top:auto; padding-top:18px; display:flex; align-items:baseline; gap:12px; font-size:14px}
.lf-sample__n b{font-size:clamp(22px,2.2vw,30px); font-weight:800; letter-spacing:-.05em; white-space:nowrap}
@media (min-width:1200px){.steps--8{grid-template-columns:repeat(8,1fr)}}

.shot *,.shot *::before,.shot *::after{transition:none!important; animation:none!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  .js .reveal,.js .hero__foot{opacity:1; transform:none}
  .js .lf-chart.reveal .lf-row__bar i{transform:none}
  .js .hero__title .line > span{transform:none}
  .js .statement__text .w{opacity:1}
}