/* ============================================================
   INNO&M — HOME_V2  (Figma 291:646 → local build)
   Depends on common.css (tokens / header / footer / eyebrow / contact)
   Canvas 1920, content margin 336px (max content 1248px)
   ============================================================ */

/* section base (not in common.css) */
.section{position:relative;padding:140px 0;}

/* ── Korean wrap fix (home-wide) ──────────────────────────────────────────
   Multi-word Korean paragraphs/headings must break at word/clause boundaries,
   never mid-word (e.g. "실행까지" was splitting as 실행까/지). keep-all does
   that; overflow-wrap lets genuinely long tokens still break; text-wrap:pretty
   balances orphans where supported. NOT applied to .who-word (nowrap display
   type by design) or English display type. */
.connect-head,.cstat-label,
.svc-head,.svc-sub,.svc-title,.svc-desc,
.wc-sub,
.rev-head,.rev-subline,.rev-text,.rev-tag,.rev-id .ro,
.footer-tagline,.footer-bottom p{
  word-break:keep-all;overflow-wrap:break-word;text-wrap:pretty;
}

/* ============================================================
   00 HERO  (291:654)
   bg glass-rings image + blue "loop" ellipse + Playfair headline
   ============================================================ */
/* HERO renders on a 1920x1080 design stage; every element is placed
   by its exact Figma coordinate (% of 1920 / 1080). Blue Playfair text
   sits DIRECTLY on the glass backdrop — no white scrim (Figma has none). */
.hero{position:relative;height:100vh;min-height:760px;background:#0c0c0d;overflow:hidden;}
/* bottom fallback layer (poster image) — sits BENEATH the video */
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:url("../assets/hero-bg.jpg") center center/cover no-repeat;
}
/* mp4 background — the visible backdrop, full-bleed cover, above .hero-bg */
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
/* subtle legibility scrim between the video (z0) and the stage/words (z2+).
   Keeps the moving video mostly intact; just lifts blue-text contrast top/bottom. */
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.12) 24%,rgba(0,0,0,.12) 76%,rgba(0,0,0,.38) 100%);}
/* design stage: 1920x1080, scaled to fill the viewport (cover) and centred */
.hero-stage{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:100vw;height:56.25vw;min-width:177.78vh;min-height:100vh;
  z-index:2;
}
/* font scale: 1 design-px = stageWidth/1920.
   stage width = max(100vw, 177.78vh) → 1 design-px = max(0.05208vw,0.09259vh) */
.hero-stage{--u:max(0.05208vw,0.09259vh);}
/* blue loop ellipse: Figma left173 top240 w845 h576 */
.hero-loop{
  position:absolute;left:9.01%;top:22.22%;width:44.01%;height:53.33%;
  pointer-events:none;
}
/* staircase headline — each word an absolutely placed Playfair 102px line */
.hero-head{margin:0;}
.hero-head .hw{
  position:absolute;
  font-family:var(--ff-serif);font-weight:400;color:var(--accent);
  font-size:calc(102 * var(--u));line-height:.98;letter-spacing:-.01em;
  white-space:nowrap;z-index:3;
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
}
/* entrance — FOUC-safe: JS adds .hero-pre (snap hidden) then .hero-go (animate in).
   No JS / reduced-motion → words stay visible (default state). */
#hero.hero-pre .hw{opacity:0;transform:translateY(28px);transition:none;}
#hero.hero-go .hw{opacity:1;transform:none;}
.hw-the{left:15.63%;top:20.28%;transition-delay:.05s;}      /* 300 / 219 */
.hw-growth{left:19.01%;top:30.37%;transition-delay:.13s;}   /* 365 / 328 */
.hw-youare{left:30.99%;top:40.56%;transition-delay:.21s;}   /* 595 / 438 */
.hw-looking{left:19.01%;top:50.65%;transition-delay:.29s;}  /* 365 / 547 */
.hw-for{left:40.00%;top:60.83%;transition-delay:.37s;}      /* 768 / 657 */
.hw-is{left:15.63%;top:72.69%;font-size:calc(78 * var(--u));transition-delay:.47s;}  /* 300 / 785 */
.hero-head .en-bold{
  font-family:var(--ff-en);font-weight:800;font-style:normal;
  color:var(--accent);letter-spacing:-.03em;
}
/* corner micro-labels (Inter SemiBold 18, ls 1.08) */
.hero-tag{position:absolute;font-family:var(--ff-en);font-weight:600;
  font-size:calc(18 * var(--u));letter-spacing:1.08px;color:var(--accent);
  line-height:1.3;z-index:3;transition:opacity .8s ease;}
.hero-tag--beyond{left:11.51%;top:42.69%;}  /* 221 / 461 */
.hero-tag--inm{left:78.13%;top:24.91%;}     /* 1500 / 269 */
.hero-tag--grow{left:78.13%;top:71.11%;}    /* 1500 / 768 */
#hero.hero-pre .hero-tag,#hero.hero-pre .hero-scroll{opacity:0;transition:none;}
#hero.hero-go .hero-tag{opacity:1;transition-delay:.6s;}
#hero.hero-go .hero-scroll{opacity:1;transition:opacity .8s ease .95s;}
.hero-scroll{position:absolute;left:48.52%;top:94.44%;
  font-family:var(--ff-en);font-weight:600;font-size:calc(11 * var(--u));
  letter-spacing:3.74px;color:#333;}

/* ============================================================
   01 WHO  — 001 replica. Single static statement (no rotation/pager/dots).
   Full-bleed dark band, GIANT 3-line type "직접 / 운영하는 / 대행사",
   thin circle threading through, @inno_m pill, body copy bottom-left.
   TALL by design: height tracks the type via cqw — NOT clamped to 100vh.
   ============================================================ */
.who{background:var(--canvas);position:relative;overflow:hidden;}
/* tighter band padding — the tall poster supplies its own vertical breathing room */
.section.who{padding:88px 0 16px;}
/* full-bleed poster; container query drives all type/positions off its width */
.who-poster{
  position:relative;
  width:100%;
  /* height is driven by the type (flow) below — NOT a width ratio, which
     ballooned on wide screens and left huge dead gaps between the words. */
  color:var(--text);
  overflow:hidden;
  container-type:inline-size;
}

/* kicker pill, top-left */
.who-pill{
  position:absolute;top:3.7%;left:5.2%;z-index:4;
  border:1px solid rgba(255,255,255,.55);border-radius:var(--radius-pill,999px);
  padding:1.05cqw 2.4cqw;
  font-family:var(--ff-en);font-weight:500;font-size:clamp(11px,1.9cqw,20px);
  letter-spacing:.2px;line-height:1;color:var(--text);
}

/* thin circle threading through the giant type (hero-loop blue tone) */
.who-circle{
  position:absolute;left:6.5%;top:16%;
  width:64%;aspect-ratio:1/1;
  border:1px solid rgba(2,112,255,.55);
  border-radius:50%;z-index:1;
}
/* decorative: soft blue glow behind the giant type */
.who-glow{
  position:absolute;z-index:0;top:24%;left:33%;width:52%;aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle,rgba(2,112,255,.30),rgba(2,112,255,.06) 54%,transparent 72%);
  filter:blur(6px);pointer-events:none;
}
/* decorative: glowing accent orb sitting on top of the circle */
.who-orb{
  position:absolute;z-index:3;left:38.5%;top:16%;width:16px;height:16px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 22px 5px rgba(2,112,255,.55),0 0 0 4px rgba(2,112,255,.18);
  transform:translate(-50%,-50%);pointer-events:none;
}

/* giant 3-line stack — TALL editorial canvas (user intent): the section is
   deliberately taller than the viewport, and the three words distribute
   top → middle → bottom via space-between so they spread with breathing room
   (an intentional grand rhythm, not a packed stack). */
.who-type{position:relative;z-index:2;display:flex;flex-direction:column;
  justify-content:space-between;min-height:clamp(1200px,150vh,1780px);
  padding:clamp(72px,10vh,150px) 0;gap:clamp(4px,1.3vh,24px);}
.who-word{
  position:relative;
  font-family:var(--ff-ko);font-weight:700;
  color:var(--text);line-height:.84;letter-spacing:-.5cqw;
  white-space:nowrap;padding:.16em 0;   /* vertical room so the overflow-mask never clips glyph tops/bottoms */
}
.who-word .accent{color:var(--accent);}
.who-w1{align-self:flex-start;margin-left:3.5%;font-size:clamp(54px,16cqw,232px);}
.who-w2{align-self:flex-end;margin-right:3.5%;text-align:right;font-size:clamp(40px,12.5cqw,184px);}
.who-w2 .who-ul{display:block;height:.6cqw;background:var(--text);margin-top:1.2cqw;width:100%;}
.who-w3{align-self:flex-start;margin-left:3.5%;font-size:clamp(54px,16cqw,232px);}

/* ── WHO kinetic mask-reveal variant (JS adds .who-kinetic via ?who=kinetic) ──
   Each giant word wraps up from a mask, staggered on entry. One-shot. */
.who-kinetic .who-word{overflow:hidden;}
/* kinetic reveals via mask (transform) — keep words opaque (scrub would zero them). */
#whoPoster.who-kinetic .who-word{opacity:1 !important;}
.who-kinetic .kt-in{display:block;will-change:transform;
  transition:transform .82s cubic-bezier(.16,1,.3,1);}
/* per-word 슬라이드 인 — 글자가 정렬된 쪽 밖에서 안으로 쓸려 들어옴(마스크 와이프).
   직접/대행사(좌측정렬)=왼쪽에서, 운영하는(우측정렬)=오른쪽에서. go=제자리(translateX 0). */
.who-kinetic .who-w1.kt-armed .kt-in,
.who-kinetic .who-w3.kt-armed .kt-in{transform:translateX(-112%);}
.who-kinetic .who-w2.kt-armed .kt-in{transform:translateX(112%);}
.who-kinetic .who-word.kt-go .kt-in{transform:translateX(0);}
@media (prefers-reduced-motion:reduce){
  .who-kinetic .kt-in{transform:none !important;transition:none;}
}

/* ── WHO scroll-linked reveal (scrub) ──────────────────────────────────────
   Each line fades + slides in tied to scroll POSITION (JS-driven), and reverses
   on scroll up — not a one-shot entrance. Default (no JS / reduced-motion /
   ?cap) = fully visible → FOUC-safe + accessible. JS adds .who-scrub to hide
   the elements until it scrubs their opacity/transform per scroll. */
.who-word,.who-body,.who-pill,.who-circle,.who-glow,.who-orb{will-change:opacity,transform,filter;}
#whoPoster.who-scrub .who-word,
#whoPoster.who-scrub .who-body,
#whoPoster.who-scrub .who-pill,
#whoPoster.who-scrub .who-circle,
#whoPoster.who-scrub .who-glow,
#whoPoster.who-scrub .who-orb{opacity:0;}
@media (prefers-reduced-motion:reduce){
  #whoPoster.who-scrub .who-word,#whoPoster.who-scrub .who-body,
  #whoPoster.who-scrub .who-pill,#whoPoster.who-scrub .who-circle,
  #whoPoster.who-scrub .who-glow,#whoPoster.who-scrub .who-orb{opacity:1;transform:none;filter:none;}
}

/* body copy, bottom-left */
.who-body{
  position:absolute;left:5.2%;top:39%;width:34%;z-index:3;
  margin:0;
  font-family:var(--ff-ko);font-weight:400;
  font-size:clamp(13px,2.45cqw,28px);line-height:1.6;
  color:var(--text);text-align:left;
  word-break:keep-all;overflow-wrap:break-word;text-wrap:pretty;
}
/* keep paired phrases (e.g. "전략부터 실행까지") from splitting across lines */
.who-body .nowrap{white-space:nowrap;}
/* mobile: let the band grow taller and widen the body copy column so the
   giant type + copy don't collide (still tall, no horizontal overflow) */
@media(max-width:560px){
  .section.who{padding:56px 0;}
  .who-body{width:54%;top:37%;font-size:clamp(12px,3.4cqw,18px);}
}

/* ============================================================
   02 CONNECT  (291:979) — blue radial, 마케팅 + 성과 rings, stats
   ============================================================ */
.connect{position:relative;background:var(--accent);overflow:hidden;padding:32px 0 124px;margin-top:-8px;}
.connect::before{content:"";position:absolute;inset:0;
  background:radial-gradient(96% 70% at 50% 50%,rgba(0,0,0,.66) 0%,rgba(0,0,0,.92) 70%,var(--canvas) 100%);}
/* ambient blue light — large, very soft ellipse that melts into the dark
   background instead of reading as a hard-edged orb. */
.connect::after{content:"";position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:2200px;height:1700px;max-width:180vw;border-radius:50%;
  background:radial-gradient(ellipse at 50% 46%,
    rgba(2,112,255,.30),rgba(2,112,255,.13) 30%,rgba(2,112,255,.04) 56%,transparent 80%);
  filter:blur(70px);pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 6%,#000 26%,#000 84%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 6%,#000 26%,#000 84%,transparent 100%);}
.connect .container{position:relative;z-index:2;}
.connect-head{position:relative;z-index:4;text-align:center;font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-5xl);letter-spacing:var(--ls-tight);color:var(--text);margin-bottom:8px;}
/* ── heading TOP + horizontal stat row, marquee card wall below ────────── */
.connect .container{display:flex;flex-direction:column;align-items:center;
  max-width:min(1720px,96vw);width:100%;}

/* TOP block: heading then a single horizontal divider row of stats */
.cw-top{position:relative;z-index:4;width:100%;max-width:1320px;margin:0 auto 34px;
  display:flex;flex-direction:column;align-items:center;text-align:center;}
.cw-top .connect-head{margin-bottom:26px;}
.cw-stats{position:relative;z-index:4;display:flex;flex-wrap:wrap;
  justify-content:center;align-items:stretch;
  gap:0;width:100%;}
.cw-stats .cstat{display:flex;flex-direction:column;align-items:center;gap:8px;
  text-align:center;padding:2px 38px;position:relative;}
/* thin vertical divider between stats */
.cw-stats .cstat + .cstat::before{content:"";position:absolute;left:0;top:8%;
  width:1px;height:84%;background:rgba(255,255,255,.20);}
.cw-stats .cstat-num{font-family:var(--ff-serif);font-weight:500;font-size:var(--fs-5xl);line-height:1;color:var(--text);}
.cw-stats .cstat-num .accent{color:var(--accent);}
.cw-stats .cstat-label{font-family:var(--ff-ko);font-weight:500;font-size:var(--fs-base);line-height:1.5;color:var(--muted);white-space:nowrap;}

/* STAGE: 4 marquee columns fill the area below the heading + stats */
.cw-stage{position:relative;z-index:4;width:100%;max-width:1680px;height:960px;
  margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;
  gap:18px;align-items:start;
  /* top/bottom fade so cards dissolve in/out of the loop */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);}

/* a single column = a clipping viewport */
.cw-col{position:relative;height:960px;overflow:hidden;}
/* the moving track holds TWO identical card sets stacked => seamless loop */
.cw-track{display:flex;flex-direction:column;gap:22px;will-change:transform;}
.cw-dup{display:contents;}

/* alternate directions; outer cols slower+dimmer+smaller for depth */
.cw-col--up   .cw-track{animation:cw-up   38s linear infinite;}
.cw-col--down .cw-track{animation:cw-down 38s linear infinite;}
.cw-col.is-outer{opacity:.6;}
.cw-col.is-outer .cw-card{transform:scale(.9);transform-origin:center;}
.cw-col.is-outer .cw-track{animation-duration:46s;}
.cw-col:hover .cw-track{animation-play-state:paused;}
@keyframes cw-up   {from{transform:translateY(0);}      to{transform:translateY(-50%);}}
@keyframes cw-down {from{transform:translateY(-50%);}   to{transform:translateY(0);}}

/* ── card ── */
.cw-card{position:relative;border-radius:16px;overflow:hidden;
  background:#fff;
  border:1px solid rgba(20,22,33,.08);
  box-shadow:0 16px 36px rgba(20,16,44,.16),
             0 2px 8px rgba(20,16,44,.08);
  transition:box-shadow .4s ease, transform .4s cubic-bezier(.2,.8,.3,1);}
.cw-card:hover{box-shadow:0 26px 54px rgba(20,16,44,.24),0 0 0 1px rgba(2,112,255,.22);
  transform:translateY(-3px);}
.cw-col.is-outer .cw-card:hover{transform:scale(.9) translateY(-3px);}

.cw-thumb-wrap{position:relative;}
.cw-card .cw-thumb{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:#13245096;}
.cw-card.is-ui .cw-thumb{aspect-ratio:3/5;object-fit:cover;object-position:top center;background:#fff;}
.cw-card.is-ui .cw-thumb-wrap::after{display:none;}
.cw-thumb-wrap::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,17,36,0) 55%,rgba(8,17,36,.55) 100%);}
.cw-chip{position:absolute;top:9px;left:9px;z-index:2;display:inline-flex;align-items:center;gap:5px;
  font-family:var(--ff-en);font-weight:700;font-size:9.5px;letter-spacing:.6px;
  color:var(--text);background:rgba(8,17,36,.62);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:4px 9px;text-transform:uppercase;}
.cw-chip.is-live{background:rgba(2,112,255,.22);border-color:rgba(2,112,255,.55);}
.cw-chip .cw-livedot{width:5px;height:5px;border-radius:50%;background:var(--color-success);
  box-shadow:0 0 8px rgba(57,224,160,.95);}
.cw-time{position:absolute;bottom:8px;right:10px;z-index:2;font-family:var(--ff-en);font-weight:500;
  font-size:9.5px;color:rgba(255,255,255,.78);letter-spacing:.2px;text-shadow:0 1px 3px rgba(0,0,0,.6);}

.cw-card .cw-meta{padding:11px 12px 12px;}
.cw-cap{display:flex;align-items:center;gap:7px;font-family:var(--ff-ko);font-weight:600;
  font-size:12.5px;letter-spacing:-.3px;color:#191c26;line-height:1.25;word-break:keep-all;}
.cw-cap .cw-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 9px rgba(2,112,255,.95);}
.cw-handle{margin:5px 0 0;font-family:var(--ff-en);font-weight:500;font-size:10px;
  color:#9aa0af;letter-spacing:.1px;word-break:keep-all;overflow-wrap:break-word;}
.cw-eng{display:flex;align-items:center;gap:12px;margin-top:9px;padding-top:9px;
  border-top:1px solid rgba(20,22,33,.09);
  font-family:var(--ff-ko);font-size:10.5px;color:#8a8f9e;letter-spacing:-.2px;}
.cw-eng b{color:#1c1f2b;font-weight:600;}
.cw-eng .cw-heart{color:#ff5a7a;}
.cw-eng .cw-cmt{color:#7fb6ff;}

/* a11y: CONNECT eyebrow on blue bg */
#connect .eb-label{color:var(--text);}

/* reduced motion: columns static */
@media (prefers-reduced-motion:reduce){
  .cw-track{animation:none!important;}
}

/* ============================================================
   03 SERVICES  (347:131 base / 421:1245 hover) — ★ morph interaction
   4 columns, each with own bg image. dim→sharp on hover.
   click viral → shared-element FLIP to service.html
   ============================================================ */
.services{background:var(--canvas);padding:130px 0 0;overflow:hidden;}
.services .container{margin-bottom:36px;}
.svc-head{font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-5xl);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);color:var(--text);max-width:900px;}
.svc-sub{margin-top:20px;font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-base);line-height:1.6;color:var(--muted);max-width:520px;}
.svc-grid{display:flex;width:100%;border-top:1px solid rgba(255,255,255,.18);}
.svc-col{
  position:relative;flex:1 0 0;min-width:0;height:798px;max-height:78vh;
  border-left:1px solid rgba(255,255,255,.18);overflow:hidden;cursor:pointer;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:50px 20px;text-decoration:none;
}
.svc-col:last-child{border-right:1px solid rgba(255,255,255,.18);}
.svc-col-img{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
  /* dim by default */
  filter:grayscale(.25) brightness(.42) saturate(.9);
  transform:scale(1.04);
  transition:filter .55s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1);
}
.svc-col-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.05) 30%,rgba(0,0,0,.05) 55%,rgba(0,0,0,.82) 100%);
  transition:opacity .55s;}
.svc-col[data-svc="viral"] .svc-col-img{background-image:url("../assets/svc-viral.jpg?v=9");background-position:60% 42%;}
.svc-col[data-svc="influencer"] .svc-col-img{background-image:url("../assets/svc-inf-hero.jpg");background-position:72% 42%;}
.svc-col[data-svc="performance"] .svc-col-img{background-image:url("../assets/svc-perf-hero.jpg?v=6");background-position:52% 62%;}
.svc-col[data-svc="search"] .svc-col-img{background-image:url("../assets/svc-seo-hero.jpg?v=s4");background-position:66% 50%;}
/* hover → sharp */
.svc-col:hover .svc-col-img{filter:grayscale(0) brightness(.72) saturate(1.05);transform:scale(1);}
.svc-col:hover .svc-col-img::after{opacity:.6;}
.svc-top,.svc-bot{position:relative;z-index:2;}
.svc-top{display:flex;align-items:center;justify-content:space-between;
  font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-sm);color:var(--text);}
.svc-top .en{font-family:var(--ff-ko);}
.svc-bot{display:flex;flex-direction:column;gap:4px;}
.svc-title{font-family:var(--ff-ko);font-weight:350;font-size:var(--fs-3xl);line-height:1.3;letter-spacing:-.72px;color:var(--text);}
.svc-desc{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-sm);line-height:1.6;color:rgba(255,255,255,.7);}
.svc-soon{position:absolute;top:50px;left:50%;transform:translateX(-50%);z-index:3;
  font-family:var(--ff-en);font-weight:600;font-size:var(--fs-micro);letter-spacing:1.5px;color:var(--muted);
  border:1px solid rgba(255,255,255,.25);border-radius:var(--radius-pill);padding:5px 11px;opacity:0;transition:opacity .4s;}
.svc-col[data-soon="1"]:hover .svc-soon{opacity:1;}
.svc-col[data-soon="1"]{cursor:default;}

/* shared-element FLIP overlay (viral → service.html) */
.flip-overlay{position:fixed;z-index:999;border-radius:0;overflow:hidden;pointer-events:none;
  background-size:cover;background-position:center;
  box-shadow:0 30px 90px rgba(0,0,0,.6);
  transition:all .62s cubic-bezier(.7,0,.2,1);will-change:transform,width,height,top,left;}
.flip-overlay::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.25);}
body.flip-leaving{overflow:hidden;}
body.flip-leaving .page-fade{opacity:0;transition:opacity .45s ease .12s;}

/* ============================================================
   04 WHY  — DISCRETE SCROLL STEPPER (wide cards + right images)
   .wc-why = 스크롤 track(200vh) · .wc-pin = sticky 100vh stage
   휠 1번 = 카드 1장. 모두 올라가기 전 다음 섹션으로 안 넘어감(JS jack).
   네임스페이스 wc-* (구 .why-* 와 충돌 없음)
   ============================================================ */
/* track 높이 = 진입 + N스텝 + 클린 릴리스에 딱 맞게(하단 빈 밴드 제거).
   sticky 핀이 100vh이고 잭이 스텝을 휠로 처리(스크롤 거리 안 먹음)하므로
   track은 카드 수와 무관 — 110vh면 release 직후 바로 #reviews로 넘어가
   마지막 카드 뒤 죽은 스크롤(빈 밴드)이 거의 없다. (160vh는 60vh 죽은영역 회귀였음) */
.wc-why{position:relative;}
.wc-pin{
  position:relative;
  padding:clamp(80px,12vh,140px) var(--gutter,24px);
  box-sizing:border-box;overflow:hidden;
}
.wc-head{width:min(1180px,100%);margin:0 auto;text-align:left;}
.wc-kicker{display:inline-block;font-family:var(--ff-en);font-weight:600;font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 14px;}
.wc-title{font-family:var(--ff-ko);font-weight:700;font-size:clamp(26px,3.4vw,44px);line-height:1.12;letter-spacing:-.01em;color:var(--text);margin:0;}
.wc-title .accent-italic{font-style:normal;font-weight:700;color:var(--accent);}
.wc-sub{font-family:var(--ff-ko);font-weight:400;font-size:clamp(13px,1.3vw,16px);line-height:1.65;color:var(--muted);margin:12px 0 0;}
.wc-sub .wc-sub-en{display:inline-block;margin-top:4px;font-family:var(--ff-en);font-weight:500;letter-spacing:.04em;color:rgba(255,255,255,.40);}

.wc-carousel{position:relative;width:min(1180px,100%);margin:clamp(40px,5vh,64px) auto 0;}
.wc-stage{
  display:flex;gap:24px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:6px 4px 20px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;outline:none;cursor:grab;
}
.wc-stage::-webkit-scrollbar{display:none;}
.wc-stage.drag{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing;}
.wc-stage:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.wc-arrow{flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(8,18,44,.82);border:1px solid rgba(2,112,255,.45);color:var(--text);
  font-family:var(--ff-en);font-size:22px;line-height:1;padding-bottom:3px;cursor:pointer;
  transition:background .2s,opacity .2s,transform .2s;}
.wc-arrow:hover{background:rgba(2,112,255,.9);transform:scale(1.08);}
.wc-arrow:disabled{opacity:.28;pointer-events:none;}
.wc-next{margin-right:4px;}

.wc-card{
  flex:0 0 clamp(300px,54%,640px);scroll-snap-align:start;height:clamp(360px,52vh,460px);
  opacity:.62;transform:scale(.94);transition:opacity .4s ease,transform .4s ease;
  display:grid;grid-template-columns:1fr 0.82fr;gap:0;
  border-radius:22px;overflow:hidden;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(2,112,255,.22), transparent 58%),
    linear-gradient(150deg,#0c1f49 0%, #0b1838 48%, #091230 100%);
  border:1px solid rgba(2,112,255,.30);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06);
}
.wc-card.key{border-color:rgba(2,112,255,.55);
  box-shadow:0 34px 80px -26px rgba(2,112,255,.45), 0 30px 70px -28px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.08);}
.wc-card.is-active{opacity:1;transform:scale(1);}
@media (prefers-reduced-motion:reduce){.wc-card{transition:none;}}
.wc-left{padding:clamp(22px,3vw,40px);display:flex;flex-direction:column;justify-content:center;gap:12px;position:relative;z-index:2;}
.wc-tag{display:inline-flex;align-items:center;gap:8px;width:max-content;font-family:var(--ff-en);font-weight:500;font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);padding:6px 12px;border:1px solid rgba(2,112,255,.42);border-radius:var(--radius-pill);background:rgba(2,112,255,.08);}
.wc-tag b{font-weight:700;color:var(--accent);}
.wc-ctitle{font-family:var(--ff-ko);font-weight:700;font-size:clamp(20px,2.3vw,30px);line-height:1.18;color:var(--text);margin:2px 0 0;word-break:keep-all;text-wrap:pretty;}
.wc-cdesc{font-family:var(--ff-ko);font-weight:400;font-size:clamp(13px,1.15vw,15px);line-height:1.7;color:rgba(255,255,255,.74);margin:0;max-width:46ch;word-break:keep-all;text-wrap:pretty;}
.wc-cdesc b{font-weight:700;color:var(--text);}
.wc-img{position:relative;background:#0c1f49;overflow:hidden;}
.wc-img-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0;}
.wc-dots{display:flex;flex-direction:row;gap:9px;}
.wc-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22);transition:all .3s;cursor:pointer;border:0;padding:0;appearance:none;-webkit-appearance:none;font:inherit;}
.wc-dot:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.wc-dot.on{background:var(--accent);width:24px;border-radius:6px;}
.wc-hint{width:min(1180px,100%);margin:22px auto 0;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--ff-en);font-size:var(--fs-xs);letter-spacing:.06em;}
.wc-ctrl{display:flex;align-items:center;gap:14px;}
.wc-hint .wc-prog{color:var(--accent);font-weight:700;}

/* ============================================================
   05 REVIEWS  (292:1199) — orbital rings + quote carousel
   ============================================================ */
.reviews{background:var(--canvas);position:relative;overflow:hidden;text-align:center;}
/* .rev-orbit neutralized — its blue radial spotlight + ring pattern were a
   leftover that broke the "clean near-black band" requirement for REVIEWS.
   Kept as an empty, inert node (no bg, no rings) so markup stays valid. */
.rev-orbit{display:none;}
.reviews .container{position:relative;z-index:2;}
.rev-head{font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-4xl);line-height:1.24;letter-spacing:-1px;color:var(--text);}
.rev-subline{margin:18px auto 0;font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-sm);line-height:1.6;color:var(--muted);max-width:340px;}
/* Big circular avatar — pops OUT over the top edge of the card and sits clearly
   IN FRONT (z-index above the card). ~50% of the face overlaps onto the card top.
   relative + high z-index + a small negative bottom margin pulls the card up under it. */
.rev-avatar{position:relative;z-index:6;width:132px;height:132px;border-radius:50%;
  margin:54px auto -92px;
  background:radial-gradient(circle at 50% 38%,#1a2740,#0a1120);
  border:4px solid rgba(8,10,16,.92);
  box-shadow:0 0 0 1px rgba(2,112,255,.45),0 14px 40px rgba(0,0,0,.55),0 0 34px rgba(2,112,255,.30);
  display:flex;align-items:center;justify-content:center;overflow:hidden;}
.rev-avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;display:block;
  transition:opacity .18s ease;}
.rev-avatar.swapping img{opacity:0;}
/* overflow-hidden clip so the whooshing card never spills → no horizontal
   scrollbar from the off-screen slide-out / slide-in. Padding gives the card's
   drop-shadow + the blue glow room so the clip doesn't crop them. */
.rev-card-wrap{position:relative;z-index:2;max-width:760px;margin:0 auto;
  overflow:hidden;padding:30px 26px 48px;}
/* Blue center GLOW — soft luminous #0270ff radial behind the card so the
   testimonial "shines". Gentle pulse; sits behind the card (z-index 0), the
   card itself is z-index 1, so text is never washed out. */
.rev-card-wrap::before{content:"";position:absolute;z-index:0;
  left:50%;top:52%;transform:translate(-50%,-50%);
  width:min(86%,640px);height:78%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(2,112,255,.34) 0%,rgba(2,112,255,.16) 40%,rgba(2,112,255,0) 72%);
  filter:blur(8px);animation:revGlowPulse 5.5s ease-in-out infinite;}
@keyframes revGlowPulse{0%,100%{opacity:.7;}50%{opacity:1;}}
.rev-card{position:relative;z-index:1;background:rgba(10,14,22,.86);backdrop-filter:blur(8px);
  border:1px solid rgba(2,112,255,.16);border-radius:14px;padding:54px 60px 40px;
  box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 50px rgba(2,112,255,.14);text-align:left;min-height:300px;
  will-change:transform,opacity;}
/* direction-aware whoosh (휙휙). Snappy ease-out; the card translates a full
   multiple of its own width so it fully clears the clip box. The OUT phase is a
   touch quicker than the IN so it reads as a fast "whip out, glide in". */
.rev-card.rev-swooshing{transition:transform .15s cubic-bezier(.4,0,1,1),opacity .15s cubic-bezier(.4,0,1,1);}
.rev-card.rev-swooshing.rev-in-run{transition:transform .18s cubic-bezier(.16,.9,.3,1),opacity .18s cubic-bezier(.16,.9,.3,1);}
.rev-card.rev-out-left{transform:translateX(-118%);opacity:0;}
.rev-card.rev-out-right{transform:translateX(118%);opacity:0;}
/* incoming pre-positioned off-screen (no transition), then released to center */
.rev-card.rev-in-left{transform:translateX(-118%);opacity:0;transition:none;}
.rev-card.rev-in-right{transform:translateX(118%);opacity:0;transition:none;}
.rev-quote{position:absolute;font-family:var(--ff-serif);font-size:var(--fs-5xl);line-height:.4;color:rgba(2,112,255,.55);}
.rev-quote.l{left:24px;top:54px;}
.rev-quote.r{right:24px;bottom:30px;}
.rev-viewport{overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;}
.rev-viewport:active{cursor:grabbing;}
.rev-slides{display:flex;will-change:transform;}
.rev-slide{flex:0 0 100%;min-width:0;}
.rev-rhead{display:flex;align-items:center;gap:13px;margin-bottom:18px;}
.rev-ava-sm{width:48px;height:48px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-md);color:var(--text);}
.rev-id .nm{font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-base);color:var(--text);}
.rev-id .ro{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-xs);color:var(--muted);}
.rev-tags{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px;}
.rev-tag{font-family:var(--ff-ko);font-weight:500;font-size:var(--fs-sm);color:rgba(255,255,255,.8);}
.rev-tag.dot::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:middle;}
.rev-stars{color:var(--accent);font-size:var(--fs-sm);letter-spacing:2px;}
.rev-chip{margin-left:auto;font-family:var(--ff-ko);font-weight:500;font-size:var(--fs-xs);color:var(--accent);
  border:1px solid var(--accent-line);background:rgba(2,112,255,.1);border-radius:var(--radius-pill);padding:6px 13px;}
.rev-text{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-md);line-height:1.7;color:var(--text);}
/* Highlighter (형광펜) sweep — a SOFT yellow marker stroke grows from width 0 →
   full behind the key phrase when the slide settles in. The stroke is a
   pseudo-element with transform:scaleX, origin left, so it "paints" left→right.
   Toned down from the old neon (#f2ff00 .92): a slightly muted yellow (#eaff3a)
   at ~0.58 alpha + softer glow → tasteful, less glaring. Dark text still reads
   cleanly over it (white goes low-contrast on a translucent band). */
.rev-hl{display:inline;z-index:0;color:#15171d;font-weight:700;padding:0 .08em;
  white-space:normal;border-radius:3px;
  /* The yellow band is painted as the element's OWN background (not an absolute
     ::before). box-decoration-break:clone makes the band wrap correctly across
     EVERY line box — the previous absolute ::before collapsed to a ~3px sliver
     whenever the phrase wrapped onto two lines (this was the slide-04 bug:
     "방문 예약이 빠르게 찼습니다" is the only phrase long enough to wrap).
     RESTING STATE = FULL band (background-size 100%), so the dark phrase text
     ALWAYS has yellow behind it even if the .lit sweep is missed/interrupted. */
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  background-image:linear-gradient(180deg,rgba(234,255,58,.55) 0%,rgba(234,255,58,.62) 100%);
  background-repeat:no-repeat;background-position:left center;
  background-size:100% 86%;
  box-shadow:0 0 8px rgba(234,255,58,.26);}
/* .lit replays the entrance sweep (left→right reveal) on each slide change;
   animates background width 0→100%. fill-mode `both` + final keyframe at 100%
   guarantee it lands FULL even if interrupted partway by the fast auto-advance. */
.rev-hl.lit{animation:revHlSweep .56s cubic-bezier(.22,.61,.36,1) .12s both;}
@keyframes revHlSweep{from{background-size:0% 86%;}to{background-size:100% 86%;}}
.rev-foot{display:flex;align-items:center;gap:18px;margin-top:26px;}
.rev-page{font-family:var(--ff-en);font-weight:500;font-size:var(--fs-xs);color:var(--muted);}
.rev-dots{display:flex;gap:9px;}
.rev-dot{width:8px;height:8px;border-radius:var(--radius-pill);background:rgba(255,255,255,.22);cursor:pointer;transition:.3s;}
.rev-dot.on{width:20px;background:var(--accent);}
/* reduced-motion: no card whoosh — fall back to the instant in-place swap */
@media(prefers-reduced-motion:reduce){
  .rev-card.rev-swooshing{transition:none;}
  .rev-card.rev-out-left,.rev-card.rev-out-right,
  .rev-card.rev-in-left,.rev-card.rev-in-right{transform:none;opacity:1;}
  /* highlighter shown statically (full band, no sweep); glow pulse stilled */
  .rev-hl,.rev-hl.lit{background-size:100% 86%;animation:none;}
  .rev-card-wrap::before{animation:none;}
}
/* arrows removed — swipe slider (variant A) */

/* ============================================================
   HOME — PER-SECTION BACKGROUND BANDS  (clean black ↔ deep-blue)
   Each section is a clean SOLID COLOR band (with an optional very subtle
   single gradient for depth, like CONNECT). NO patterns, NO dot/line
   grids, NO per-section spotlights. Adjacent sections differ clearly by
   COLOR — near-black ↔ deep-blue alternation — staying dark, premium,
   readable. All layers are static, pointer-events:none, behind content.

   Band sequence (top → bottom):
     00 HERO      image bg                         (own band, untouched)
     01 WHO       near-black   #0a0a0c
     02 CONNECT   bright blue  #0270ff             (own band, as-is)
     03 SERVICES  near-black   #08080a
     04 WHY       deep navy    #0b1838
     05 REVIEWS   near-black   #08080a
     07 CONTACT   deep blue    #0033a0             (own band, as-is)
   Result: black → bright-blue → black → navy → black → blue.
   ============================================================ */

/* (1) Shared static grain — extremely faint, UNIFORM site-wide noise.
   Not a per-section differentiator; just binds the bands subtly. */
.bg-grain{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.03;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
/* keep grain BEHIND the page content but above the body canvas */
body.home .page-fade{position:relative;z-index:1;}

/* per-section bands must sit behind each section's own content */
.who,.services,.why,.reviews{position:relative;}
.who .container,.services .container,.why .container,
.reviews .container{position:relative;z-index:2;}
.wc-pin,.rev-orbit{position:relative;z-index:2;}

/* ---- clean SOLID color bands (black ↔ deep-blue alternation) ---------
   A single, very subtle radial gives premium depth (like CONNECT) without
   any pattern. Boundary gradients soften the band edge so each color step
   feels intentional, not a hard line. */

/* 01 WHO — near-black */
.who{
  background:
    radial-gradient(120% 100% at 50% 0%,#0c0c0f 0%,#0a0a0c 60%,#09090b 100%);
}
/* soft fade INTO the bright-blue CONNECT below */
.who::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:160px;z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(2,112,255,.06));
}

/* 03 SERVICES — near-black */
.services{
  background:
    radial-gradient(120% 90% at 50% 0%,#0a0a0d 0%,#08080a 55%,#070709 100%);
}

/* 04 WHY — deep navy (clearly bluer than the black bands, still dark) */
.why{
  background:
    radial-gradient(130% 110% at 50% 12%,#0d1c44 0%,#0b1838 55%,#0a1430 100%);
}

/* 05 REVIEWS — near-black */
.reviews{
  background:
    radial-gradient(120% 100% at 50% 30%,#0a0a0d 0%,#08080a 60%,#070709 100%);
}

/* reduced-motion has no effect on these static layers (intentional) */

/* ============================================================
   RESPONSIVE (home-specific)
   ============================================================ */
@media(max-width:1280px){
  .connect-head,.svc-head,.rev-head{font-size:var(--fs-4xl);}
  /* tighten marquee + horizontal stat row for narrower viewports */
  .cw-stage{max-width:1040px;height:520px;gap:18px;}
  .cw-col{height:520px;}
  .cw-stats .cstat{padding:2px 26px;}
  .cw-stats .cstat-num{font-size:var(--fs-4xl);}
}
@media(max-width:980px){
  .svc-grid{flex-wrap:wrap;}
  .svc-col{flex:1 1 50%;height:520px;border-top:1px solid rgba(255,255,255,.18);}
}
@media(max-width:900px){
  .hero-tag{display:none;}
  .hero-loop{opacity:.55;}
  /* ≤900px: marquee OFF → heading+stats on top + a tidy STATIC card grid below */
  .connect-head{margin-bottom:20px;font-size:var(--fs-3xl);word-break:keep-all;text-wrap:balance;text-align:center;}
  /* stats wrap into a 2-col grid (no vertical dividers); heading stays on top */
  .cw-top{margin-bottom:26px;max-width:560px;}
  .cw-top .connect-head{margin-bottom:18px;}
  .cw-stats{display:grid;grid-template-columns:1fr 1fr;gap:26px 24px;
    width:100%;max-width:460px;margin:0 auto;}
  .cw-stats .cstat{padding:0;}
  .cw-stats .cstat + .cstat::before{display:none;}
  .cw-stats .cstat-num{font-size:var(--fs-3xl);}
  .cw-stats .cstat-label{white-space:normal;word-break:keep-all;}
  /* stage becomes a static 2-col card grid; columns flatten */
  .cw-stage{position:static;height:auto;max-width:560px;margin:0 auto;
    grid-template-columns:1fr 1fr;gap:14px;align-items:stretch;
    -webkit-mask-image:none;mask-image:none;}
  /* columns + tracks dissolve so each card becomes a direct grid cell */
  .cw-col{height:auto;overflow:visible;display:contents;}
  .cw-track{display:contents;animation:none!important;}
  .cw-col.is-outer{opacity:1;}
  .cw-col.is-outer .cw-card{transform:none;}
  /* show only the FIRST card set on mobile (hide the duplicate loop set) */
  .cw-track .cw-dup{display:none;}
  .rev-card{padding:44px 28px 34px;}
}
@media(max-width:560px){
  .connect-head,.svc-head,.rev-head{font-size:var(--fs-2xl);}
  .svc-col{flex:1 1 100%;height:440px;}
  .rev-text{font-size:var(--fs-base);}
  .cstat-num{font-size:var(--fs-3xl);}
}
/* WHY scroll-stepper — 모바일 ≤640 : 정적 4-카드 세로 스택(잭 비활성) */
@media(max-width:640px){
  .wc-card{grid-template-columns:1fr;grid-template-rows:0.42fr 1fr;flex-basis:86%;height:clamp(420px,64vh,520px);}
  .wc-img{order:-1;}
  .wc-cdesc{max-width:none;}
}
/* ============================================================
   성과/변화 — 결과(사례·매출+노출추이) + 이유(말풍선 대화)  [v11]
   ============================================================ */
#result,#reason{--rs-soft:#7db8ff;--rs-t3:rgba(255,255,255,.4);--rs-ease:cubic-bezier(.22,.61,.36,1);}
.rsec{position:relative;padding:150px 96px;overflow:hidden;}
#result{background:var(--canvas);}
#reason{background:var(--surface-sunken);}
.rwrap{max-width:1360px;margin:0 auto;position:relative;z-index:2;}
.rs-cursorglow{position:fixed;left:0;top:0;width:680px;height:680px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(2,112,255,.12),transparent 68%);filter:blur(30px);opacity:0;transition:opacity .45s ease;will-change:transform;}
.rs-hl,.rs-s2head{font-family:var(--ff-ko);font-weight:700;letter-spacing:var(--ls-tight);line-height:var(--lh-tight);word-break:keep-all;color:var(--text);}
.rs-hl{font-size:clamp(40px,4.4vw,60px);max-width:960px;}
.rs-s2head{font-size:clamp(28px,3.2vw,42px);margin-top:24px;}
.rs-hl .rs-it,.rs-s2head .rs-it,em.rs-it{color:var(--accent);font-weight:700;font-style:normal;}
.rs-sub{color:var(--muted);font-size:var(--fs-md);line-height:1.7;margin-top:20px;max-width:620px;word-break:keep-all;}
/* 섹션1 결과 */
#result::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(56% 44% at 32% 54%,rgba(2,112,255,.08),transparent 62%);}
.rs-s1bg{position:absolute;top:0;right:0;width:52%;height:100%;z-index:0;background:url("../assets/rs-bg.jpg") center right/cover;opacity:.09;transform:scale(1.12);will-change:transform;-webkit-mask-image:linear-gradient(90deg,transparent,#000 82%);mask-image:linear-gradient(90deg,transparent,#000 82%);}
.rs-caselabel{font-family:var(--ff-ko);font-size:var(--fs-xs);color:var(--rs-t3);display:flex;align-items:center;gap:14px;margin:96px 0 56px;word-break:keep-all;}
.rs-caselabel b{font-family:var(--ff-en);font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--muted);}
.rs-caselabel::after{content:"";flex:1;height:1px;background:var(--hair);min-width:40px;}
.r1-ba{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:40px;position:relative;z-index:2;}
.r1-num{text-align:center;}
.r1-num .lbl{display:block;font-family:var(--ff-ko);font-size:var(--fs-xs);color:var(--rs-t3);margin-bottom:22px;}
.r1-num .v{font-family:var(--ff-serif);font-weight:500;font-size:clamp(62px,9.4vw,138px);letter-spacing:-2px;line-height:.9;color:var(--muted);transition:text-shadow .4s ease;}
.r1-num.after .v{color:var(--text);}
.r1-num.after:hover .v{text-shadow:0 0 40px rgba(2,112,255,.7);}
.r1-num .v small{font-family:var(--ff-ko);font-size:.2em;font-weight:500;color:var(--rs-t3);margin-left:8px;letter-spacing:0;}
.r1-num.after .v small{color:var(--rs-soft);}
.r1-chart .runner{filter:drop-shadow(0 0 6px rgba(125,184,255,.9));}
.r1-measure{min-width:170px;display:flex;flex-direction:column;align-items:center;padding-top:24px;}
.r1-measure .d{font-family:var(--ff-en);font-weight:700;font-size:var(--fs-md);color:var(--accent);margin-bottom:12px;}
.r1-measure .line{width:100%;height:1px;background:var(--accent);position:relative;}
.r1-measure .line::before,.r1-measure .line::after{content:"";position:absolute;top:-4px;width:1px;height:9px;background:var(--accent);}
.r1-measure .line::before{left:0;}.r1-measure .line::after{right:0;}
.r1-after{margin-top:88px;border-top:1px solid var(--hair);padding-top:54px;display:grid;grid-template-columns:1.3fr .7fr;gap:60px;align-items:center;position:relative;z-index:2;}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.chart-head .ch-t{font-family:var(--ff-ko);font-size:var(--fs-sm);color:var(--muted);}
.chart-head .ch-badge{font-family:var(--ff-en);font-weight:700;font-size:var(--fs-xs);color:var(--accent);background:var(--accent-wash);border:1px solid var(--accent-line);padding:5px 12px;border-radius:var(--radius-pill);}
.r1-chart{display:block;width:100%;height:auto;overflow:visible;}
.r1-chart .axl{font-family:var(--ff-en);font-size:var(--fs-micro);fill:var(--rs-t3);}
.r1-chart .axk{font-family:var(--ff-ko);font-size:var(--fs-micro);fill:var(--rs-t3);}
.r1-chart .mk{font-family:var(--ff-ko);font-size:var(--fs-micro);font-weight:700;fill:var(--rs-soft);}
.r1-chart .vlab{font-family:var(--ff-en);font-weight:700;font-size:var(--fs-xs);}
.r1-chart .pt{cursor:pointer;transition:r .2s var(--rs-ease);}
.r1-chart .pt:hover{r:7;}
.chart-note{margin-top:12px;font-family:var(--ff-ko);font-size:var(--fs-micro);line-height:1.6;color:var(--rs-t3);letter-spacing:.1px;word-break:keep-all;}
.chart-cap{font-family:var(--ff-ko);font-size:var(--fs-sm);line-height:1.8;color:var(--muted);word-break:keep-all;}
.chart-cap b{color:var(--text);font-weight:700;}
.chart-cap .q{display:block;margin-top:18px;font-size:clamp(18px,2vw,22px);font-weight:500;color:var(--text);}
.chart-cap .q::before{content:"\201C";color:var(--accent);}.chart-cap .q::after{content:"\201D";color:var(--accent);}
.chart-cap .honest{display:block;margin-top:14px;font-size:var(--fs-xs);color:var(--rs-t3);}
/* 섹션2 이유 */
.r2-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:stretch;}
.chat{margin-top:50px;display:flex;flex-direction:column;gap:20px;position:relative;}
.msg{display:flex;align-items:flex-end;gap:12px;max-width:96%;}
.msg.us{flex-direction:row-reverse;align-self:flex-end;}
.msg.me{align-self:flex-start;}
.ava{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--ff-en);font-weight:800;font-size:var(--fs-sm);}
.ava.me{background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);}
.ava.me svg{width:20px;height:20px;}
.ava.us{background:linear-gradient(160deg,#3a9bff,var(--color-brand));color:var(--text);box-shadow:0 4px 16px rgba(2,112,255,.4);}
.bubwrap{min-width:0;}
.who{display:block;font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-xs);margin-bottom:7px;}
.msg.me .who{color:rgba(255,255,255,.78);}
.msg.us .who{color:var(--rs-soft);text-align:right;}
.bub{padding:15px 20px;border-radius:var(--radius-lg);font-size:var(--fs-base);line-height:1.6;word-break:keep-all;transition:transform .25s var(--rs-ease),box-shadow .3s ease;}
.msg.me .bub{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-bottom-left-radius:6px;color:var(--text);}
.msg.us .bub{background:linear-gradient(180deg,rgba(2,112,255,.22),rgba(2,112,255,.1));border:1px solid rgba(2,112,255,.4);border-bottom-right-radius:6px;color:#eaf2ff;}
.msg.us .bub b{color:var(--text);font-weight:700;}
.bub .fee{color:#ff9a9a;font-weight:700;}
.msg.me .bub:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.4);}
.msg.us .bub:hover{transform:translateY(-3px);box-shadow:0 12px 34px rgba(2,112,255,.32);}
.bub.typing{display:inline-flex;gap:6px;align-items:center;padding:18px 22px;}
.bub.typing .dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.5;animation:rsTyped 1.1s infinite;}
.bub.typing .dot:nth-child(2){animation-delay:.15s;}.bub.typing .dot:nth-child(3){animation-delay:.3s;}
@keyframes rsTyped{0%,60%,100%{transform:translateY(0);opacity:.4;}30%{transform:translateY(-4px);opacity:1;}}
.s2-photo{position:relative;border-radius:24px;overflow:hidden;align-self:stretch;min-height:560px;border:1px solid rgba(255,255,255,.08);transition:transform .3s var(--rs-ease);transform-style:preserve-3d;}
.s2-photo img{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;}
.s2-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,7,13,.08),rgba(6,7,13,.72));}
.s2-photo .pcap{position:absolute;left:24px;bottom:22px;z-index:2;}
.s2-photo .pcap .pk{font-family:var(--ff-en);font-size:var(--fs-micro);letter-spacing:1.5px;text-transform:uppercase;color:var(--rs-soft);}
.s2-photo .pcap .pt2{font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-md);margin-top:6px;}
.s2-close{margin-top:44px;border-top:1px solid var(--hair);padding-top:34px;font-family:var(--ff-ko);font-weight:700;font-size:clamp(20px,2.3vw,28px);line-height:1.5;word-break:keep-all;color:var(--text);}
.s2-close b{color:var(--accent);}
.s2-foot{margin-top:22px;font-family:var(--ff-en);font-size:var(--fs-micro);color:var(--rs-t3);letter-spacing:.2px;word-break:keep-all;}
/* 모션 */
.rs-count,.r1-num .v{font-variant-numeric:tabular-nums;}
@media (prefers-reduced-motion: no-preference){
  .janim .reveal-lines .ln{display:block;overflow:hidden;padding-bottom:.08em;}
  .janim .reveal-lines .i{display:block;transform:translateY(118%);transition:transform .75s var(--rs-ease);}
  .janim .reveal-lines.in .i{transform:translateY(0);}
  .janim .reveal-lines .ln:nth-child(2) .i{transition-delay:.09s;}
  .janim .rs-fade{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s var(--rs-ease);}
  .janim .rs-fade.in{opacity:1;transform:none;}
  .janim .r1-num{opacity:0;transition:opacity .7s ease;}
  .janim .r1-ba.in .r1-num{opacity:1;}
  .janim .r1-ba.in .r1-num.after{transition-delay:.14s;}
  .janim .r1-measure .line{transform:scaleX(0);transform-origin:center;transition:transform .8s var(--rs-ease) .5s;}
  .janim .r1-ba.in .r1-measure .line{transform:scaleX(1);}
  .janim .r1-measure .d{opacity:0;transition:opacity .5s ease 1s;}
  .janim .r1-ba.in .r1-measure .d{opacity:1;}
  .janim .r1-chart{clip-path:inset(0 100% 0 0);transition:clip-path 1.15s var(--rs-ease) .15s;}
  .janim .r1-after.in .r1-chart{clip-path:inset(0 0 0 0);}
  .janim .chat .msg{opacity:0;transform:translateY(14px);}
  .janim .chat .msg.in{opacity:1;transform:none;transition:opacity .45s ease,transform .45s var(--rs-ease);}
  .janim .s2-photo{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s var(--rs-ease);}
  .janim .s2-photo.in{opacity:1;transform:none;}
}
@media(max-width:900px){
  .rsec{padding:90px 22px;}
  .r1-ba,.r1-after,.r2-grid{grid-template-columns:1fr;}
  .s2-photo{min-height:300px;}
  .rs-s1bg{width:100%;opacity:.1;}
}

/* ============================================================
   ✦ 3-PERSONA AGREED INTERACTIONS — vanilla add-on (lib:0)
   easing token reused: cubic-bezier(.22,.61,.36,1)
   All effects gated by .janim-x (JS adds it only when motion OK).
   ============================================================ */

/* ---- (2) Magnetic CTA ------------------------------------------------
   JS writes --mx/--my (px) on .is-magnetic; label nudges less via --lx/--ly.
   Transform is additive-safe: .contact-cta already animates `transform` on
   hover (translateY -2px). We keep hover as-is and add the magnetic offset
   through a CSS var layered on a wrapper-less translate. Snap-back handled by
   the transition below. */
.is-magnetic{--mx:0px;--my:0px;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);will-change:transform;}
.is-magnetic.mag-active{transition:transform .08s linear;}
/* header consult btn + hero scroll + contact cta carry the offset */
.btn-consult.is-magnetic{transform:translate(var(--mx),var(--my));}
.contact-cta.is-magnetic{transform:translate(var(--mx),var(--my));}
.contact-cta.is-magnetic:hover{transform:translate(var(--mx),calc(var(--my) - 2px));}
.footer-consult.is-magnetic{display:inline-block;transform:translate(var(--mx),var(--my));}
.mag-label{display:inline-block;transition:transform .35s cubic-bezier(.22,.61,.36,1);
  transform:translate(var(--lx,0px),var(--ly,0px));will-change:transform;}

/* ---- (3) 3D card tilt — REVIEWS card + CONTACT ir-block --------------
   JS writes --rx/--ry (deg, ≤8) on .is-tilt; pointer-driven, hover only.
   Reviews card already animates `transform` for the whoosh — so tilt is
   applied to the WRAP (.rev-card-wrap), never the card itself → no fight. */
.tilt-wrap{perspective:1100px;}
.is-tilt{transition:transform .4s cubic-bezier(.22,.61,.36,1);
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;will-change:transform;}
.is-tilt.tilt-active{transition:transform .12s ease-out;}

/* ---- (6) CONTACT shader-like animated gradient mesh ------------------
   Pure CSS: layered radial/conic gradients drifting slowly behind content.
   #0270ff ~ #0033a0 ~ black, low-sat, low-speed, subtle. */
.contact{position:relative;overflow:hidden;}
.contact .contact-body{position:relative;z-index:1;}
.contact-shader{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.contact-shader::before,.contact-shader::after{content:"";position:absolute;
  inset:-30%;border-radius:46% 54% 50% 50%;mix-blend-mode:screen;
  will-change:transform;}
.contact-shader::before{
  background:
    radial-gradient(38% 38% at 32% 34%,rgba(2,112,255,.16),transparent 60%),
    radial-gradient(46% 44% at 72% 60%,rgba(0,51,160,.20),transparent 62%);
  animation:ctMesh1 26s ease-in-out infinite;}
.contact-shader::after{
  background:
    radial-gradient(40% 40% at 68% 30%,rgba(2,112,255,.12),transparent 58%),
    radial-gradient(50% 48% at 28% 72%,rgba(0,18,70,.28),transparent 64%);
  animation:ctMesh2 34s ease-in-out infinite;}
/* a faint conic sheen rotating very slowly over the top */
.contact-shader .ct-sheen{position:absolute;inset:-20%;opacity:.08;
  background:conic-gradient(from 0deg at 50% 50%,
    rgba(2,112,255,.0),rgba(2,112,255,.5),rgba(0,51,160,.0),
    rgba(2,112,255,.4),rgba(2,112,255,.0));
  filter:blur(40px);animation:ctSpin 48s linear infinite;}
@keyframes ctMesh1{
  0%,100%{transform:translate(-4%,-3%) scale(1.05) rotate(0deg);}
  50%{transform:translate(5%,4%) scale(1.18) rotate(8deg);}}
@keyframes ctMesh2{
  0%,100%{transform:translate(4%,3%) scale(1.12) rotate(0deg);}
  50%{transform:translate(-5%,-4%) scale(1.0) rotate(-7deg);}}
@keyframes ctSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

/* ---- (5) CONNECT card hover blue-wipe: removed per request (do not re-add) */

/* ---- reduced-motion / ?cap: disable ALL of the above ---------------- */
@media (prefers-reduced-motion:reduce){
  .is-magnetic,.contact-cta.is-magnetic,.btn-consult.is-magnetic,
  .footer-consult.is-magnetic,.mag-label{transform:none!important;}
  .is-tilt{transform:none!important;}
  .contact-shader::before,.contact-shader::after,.contact-shader .ct-sheen{animation:none!important;}
  .cw-card .cw-thumb-wrap::after{transition:none;}
}

/* ============================================================
   PORTFOLIO (cx) — 선별 사례 에디토리얼 (service 프로토타입에서 이식)
   card 토큰은 home에 없어 .cx 스코프에 로컬 정의
   ============================================================ */
.cx{--card-border:rgba(2,112,255,.10);--card-border-hover:rgba(2,112,255,.30);--card-radius:var(--radius-card);--card-bg:linear-gradient(165deg,rgba(14,20,34,.55),rgba(6,8,14,.5));--card-glow:0 0 40px rgba(2,112,255,.14);background:var(--canvas);overflow:hidden;}
.cx-headrow{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;}
.cx-h2{margin:0;font-family:var(--ff-ko);font-weight:700;font-size:clamp(32px,4.2vw,60px);line-height:1.16;letter-spacing:var(--ls-tight);color:var(--text);}
.cx-h2 .accent-italic{font-family:var(--ff-serif);font-style:italic;font-weight:500;color:var(--accent);}
.cx-sub{margin:0;max-width:30em;font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-md);line-height:1.7;color:var(--muted);word-break:keep-all;text-align:right;}
.cx-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-rows:repeat(3,auto);gap:clamp(18px,1.6vw,26px);margin-top:clamp(40px,5vh,64px);}
.cx-feature{grid-row:1 / span 3;display:flex;flex-direction:column;border:1px solid var(--card-border);border-radius:var(--card-radius);overflow:hidden;background:var(--card-bg);transition:border-color .35s,transform .45s cubic-bezier(.2,.8,.3,1),box-shadow .45s;}
.cx-feature:hover{border-color:var(--card-border-hover);transform:translateY(-4px);box-shadow:0 30px 60px rgba(3,9,24,.5),var(--card-glow);}
.cx-feat-img{aspect-ratio:1.85;background-size:cover;background-position:center;position:relative;transition:transform .55s cubic-bezier(.2,.8,.3,1);}
.cx-feat-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,7,14,0) 50%,rgba(4,7,14,.55) 100%);}
.cx-feature:hover .cx-feat-img{transform:scale(1.04);}
.cx-feat-body{padding:clamp(24px,2.4vw,38px);display:flex;flex-direction:column;flex:1;}
.cx-tag{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-family:var(--ff-en);font-weight:700;font-size:var(--fs-micro);letter-spacing:1.2px;text-transform:uppercase;color:var(--accent);}
.cx-livedot{width:6px;height:6px;border-radius:50%;background:var(--color-success);box-shadow:0 0 9px rgba(57,224,160,.95);}
.cx-feat-ttl{margin:16px 0 0;font-family:var(--ff-ko);font-weight:700;font-size:clamp(22px,2.2vw,34px);line-height:1.3;letter-spacing:-.6px;color:var(--text);word-break:keep-all;}
.cx-feat-desc{margin:16px 0 0;font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-md);line-height:1.75;color:var(--muted);word-break:keep-all;}
.cx-feat-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(30px,3.6vh,52px);padding-top:clamp(24px,2.6vw,34px);border-top:1px solid var(--hair);}
.cx-metric{position:relative;padding:0 clamp(18px,1.6vw,28px);}
.cx-metric:first-child{padding-left:0;}   /* 첫 지표는 제목과 좌측 정렬 */
.cx-metric:not(:last-child)::after{content:"";position:absolute;right:0;top:2px;bottom:2px;width:1px;background:var(--hair);}
.cx-mnum{display:block;font-family:var(--ff-ko);font-weight:800;font-size:clamp(20px,1.8vw,28px);letter-spacing:-.6px;color:var(--accent);}
.cx-mlab{display:block;margin-top:7px;font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-xs);line-height:1.45;color:var(--muted-2);word-break:keep-all;}
.cx-mini{display:grid;grid-template-columns:clamp(140px,12vw,164px) 1fr;gap:0;border:1px solid var(--card-border);border-radius:var(--card-radius);overflow:hidden;background:rgba(12,15,22,.5);transition:border-color .35s,transform .4s cubic-bezier(.2,.8,.3,1),box-shadow .4s;}
.cx-mini:hover{border-color:var(--card-border-hover);transform:translateY(-3px);box-shadow:var(--card-glow);}
.cx-mini-img{background-size:cover;background-position:center;min-height:120px;transition:transform .55s cubic-bezier(.2,.8,.3,1);}
.cx-mini:hover .cx-mini-img{transform:scale(1.05);}
.cx-mini-body{padding:clamp(22px,2.2vw,30px) clamp(24px,2vw,32px);display:flex;flex-direction:column;justify-content:center;min-width:0;}
.cx-mini-tag{font-family:var(--ff-en);font-weight:600;font-size:var(--fs-micro);letter-spacing:1.2px;text-transform:uppercase;color:var(--accent);}
.cx-mini-ttl{margin:11px 0 0;font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-lg);letter-spacing:-.4px;color:var(--text);line-height:1.34;word-break:keep-all;}
.cx-mini-line{margin:10px 0 0;font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-xs);line-height:1.55;color:var(--muted);word-break:keep-all;}
.cx-mini-result{display:flex;align-items:flex-start;gap:8px;margin-top:16px;font-family:var(--ff-ko);font-weight:500;font-size:var(--fs-xs);line-height:1.5;color:rgba(255,255,255,.74);word-break:keep-all;}
.cx-mini-result .nowrap{white-space:nowrap;}
.cx-rk{flex:0 0 auto;font-family:var(--ff-en);font-weight:700;font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--accent);background:var(--accent-wash);border:1px solid var(--accent-line);border-radius:5px;padding:2px 6px;margin-top:1px;}
.cx-note{margin:clamp(26px,3vh,38px) 0 0;font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-xs);color:var(--muted-2);line-height:1.6;word-break:keep-all;}
@media(max-width:980px){
  .cx-headrow{flex-direction:column;align-items:flex-start;gap:14px;}
  .cx-sub{text-align:left;}
  .cx-grid{grid-template-columns:1fr;grid-template-rows:none;}
  .cx-feature{grid-row:auto;}
  .cx-feat-metrics{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:560px){
  .cx-mini{grid-template-columns:96px 1fr;}
  .cx-feat-metrics{grid-template-columns:1fr;gap:16px;}
  .cx-metric,.cx-metric:first-child{padding:0 0 14px;}
  .cx-metric:not(:last-child)::after{display:none;}
  .cx-metric:not(:last-child){border-bottom:1px solid var(--hair);}
}

/* PORTFOLIO "전체 보기" CTA (cx 섹션 → portfolio.html) */
.cx-cta{margin-top:clamp(30px,4vh,48px);display:flex;justify-content:center;}
.cx-viewall{display:inline-flex;align-items:center;gap:10px;font-family:var(--ff-ko);font-weight:600;font-size:var(--fs-base);color:var(--text);text-decoration:none;border:1px solid rgba(2,112,255,.45);border-radius:var(--radius-pill);padding:14px 30px;transition:background .25s,border-color .25s,transform .25s;}
.cx-viewall:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px);}
.cx-viewall span{transition:transform .25s;}
.cx-viewall:hover span{transform:translateX(4px);}
/* 카드 전체를 portfolio.html로 클릭 가능하게 (stretched link) */
.cx-feature,.cx-mini{position:relative;}
.cx-cardlink{position:absolute;inset:0;z-index:6;border-radius:inherit;-webkit-tap-highlight-color:transparent;}
.cx-cardlink:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.cx-feature,.cx-mini{cursor:pointer;}

/* ============================================================
   GALLERY (cg) — A5 도표형 안A 이식 (2026-07-21, #gallery 전용).
   .cx-* 는 portfolio.html이 계속 쓰므로 삭제하지 않고 그대로 둠.
   ============================================================ */
.cg{background:var(--canvas);overflow:hidden;}
.cg-headrow{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:30px;}
.cg-h2{margin:0;font-family:var(--ff-ko);font-weight:700;font-size:clamp(32px,4.2vw,60px);line-height:1.16;letter-spacing:var(--ls-tight);color:var(--text);}
.cg-h2 .accent-italic{font-family:var(--ff-serif);font-style:italic;font-weight:500;color:var(--accent);}
.cg-sub{margin:0;font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-md);line-height:1.7;color:var(--muted);word-break:keep-all;text-align:right;}

.cg-chips{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 30px;}
.cg-chip{display:flex;align-items:center;gap:8px;font-family:var(--ff-ko);font-weight:600;font-size:13.5px;color:var(--muted);background:rgba(255,255,255,.03);border:1px solid var(--hair);border-radius:var(--radius-pill);padding:11px 20px;cursor:pointer;transition:all .25s;}
.cg-chip .n{font-family:var(--ff-en);font-weight:700;font-size:10px;color:var(--accent);}
.cg-chip.is-active{color:var(--text);background:var(--accent-wash);border-color:var(--accent);}
.cg-chip.is-active .n{color:var(--text);}

.cg-viewport{position:relative;}
.cg-track{
  display:flex;gap:26px;align-items:stretch;
  list-style:none;margin:0;padding:6px 0 30px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  /* ★ touch-action:pan-y 였다가 pan-x 추가 (2026-07-21 모바일 QA RED).
     이 트랙은 overflow-x:auto 네이티브 가로 스크롤러인데 pan-y만 허용하면
     브라우저가 가로 터치 팬을 원천 차단해 폰에서 카드가 안 넘어간다.
     화면 카피는 "좌우로 밀어서 넘겨보세요"인데 실제로 안 되던 상태였다.
     되돌리지 마라 — pan-y 단독으로 돌리면 모바일 스와이프가 다시 죽는다. */
  scrollbar-width:none;cursor:grab;touch-action:pan-x pan-y;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
.cg-track::-webkit-scrollbar{display:none;}
.cg-track.dragging{cursor:grabbing;scroll-snap-type:none;}
.cg-track::before,.cg-track::after{content:"";flex:0 0 var(--cg-pad,40px);}

.cg-card{
  position:relative;flex:0 0 min(720px,84vw);border-radius:var(--radius-card);overflow:hidden;
  background:linear-gradient(165deg,rgba(14,20,34,.55),rgba(6,8,14,.5));
  border:1px solid rgba(2,112,255,.10);
  scroll-snap-align:center;scroll-snap-stop:always;
  display:flex;flex-direction:column;cursor:pointer;
  transform:scale(.93);opacity:.5;
  transition:transform .5s var(--ease-entrance),opacity .5s,border-color .5s,box-shadow .5s;
}
.cg-card.is-focus{transform:scale(1);opacity:1;border-color:rgba(2,112,255,.42);box-shadow:0 30px 70px rgba(3,9,24,.55),0 0 40px rgba(2,112,255,.14);}
.cg-card.is-near{opacity:.72;}

.cg-img{aspect-ratio:1.9;position:relative;flex-shrink:0;pointer-events:none;overflow:hidden;}
.cg-img-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;filter:grayscale(.88) contrast(1.06) brightness(.9);}
.cg-img::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(4,7,14,0) 45%,rgba(4,7,14,.62) 100%);}
.cg-imgtag{position:absolute;left:20px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-en);font-weight:700;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent);}
.cg-livedot{width:6px;height:6px;border-radius:50%;background:var(--color-success);box-shadow:0 0 9px rgba(57,224,160,.95);}
.cg-ttl{position:absolute;left:20px;right:20px;bottom:38px;z-index:2;margin:0;font-family:var(--ff-ko);font-weight:700;font-size:20px;line-height:1.36;letter-spacing:-.4px;color:var(--text);pointer-events:none;word-break:keep-all;}

.cg-body{padding:26px 28px 30px;display:flex;flex-direction:column;gap:22px;flex:1;pointer-events:none;}

.cg-metric-lbl{display:block;font-family:var(--ff-en);font-weight:700;font-size:10.5px;letter-spacing:1.6px;color:var(--muted-2);text-transform:uppercase;margin-bottom:10px;}
.cg-nums{display:flex;gap:28px;flex-wrap:wrap;}
.cg-num-item{display:flex;flex-direction:column;gap:4px;}
.cg-num{font-family:var(--ff-serif);font-style:normal;font-weight:500;font-size:var(--fs-3xl);color:var(--accent);line-height:1;}
.cg-num-lbl{font-family:var(--ff-ko);font-weight:500;font-size:12.5px;color:rgba(255,255,255,.7);}
.cg-metric-empty-sm{display:inline-flex;align-items:center;font-family:var(--ff-ko);font-weight:600;font-size:12.5px;color:var(--muted-2);background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.24);border-radius:8px;padding:7px 11px;line-height:1;}
.cg-num-item--empty .cg-num-lbl{color:rgba(255,255,255,.5);}

.cg-row{border-top:1px solid var(--hair);padding-top:16px;}
.cg-row-lbl{display:block;font-family:var(--ff-en);font-weight:700;font-size:10px;letter-spacing:1.4px;color:var(--muted-2);text-transform:uppercase;margin-bottom:8px;}
.cg-row-txt{margin:0;font-family:var(--ff-ko);font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.78);word-break:keep-all;}

.cg-cta-row{margin-top:2px;pointer-events:auto;}
.cg-cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-ko);font-weight:600;font-size:13px;color:rgba(255,255,255,.86);background:transparent;border:1px solid var(--hair-2);border-radius:var(--radius-pill);padding:11px 20px;text-decoration:none;transition:background .2s,border-color .2s,color .2s;}
.cg-cta:hover{border-color:var(--accent);color:var(--text);background:var(--accent-wash);}
.cg-cta .arrow{transition:transform .2s;}
.cg-cta:hover .arrow{transform:translateX(3px);}

/* ---- 진행 프로세스 도표 — 안A: 선형 흐름(원 노드) ---- */
.cg-proc-chain{display:flex;align-items:flex-start;--proc-r:30px;--proc-d:60px;margin-top:4px;}
.cg-proc-step{position:relative;flex:1 1 0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 4px;}
.cg-proc-step:not(:last-child)::after{content:"";position:absolute;top:var(--proc-r);left:calc(50% + var(--proc-r) + 4px);right:calc(-50% + var(--proc-r) + 4px);height:1px;background:var(--hair);}
.cg-proc-step:not(:last-child)::before{content:"";position:absolute;top:calc(var(--proc-r) - 3px);right:calc(-50% + var(--proc-r) + 2px);width:0;height:0;border-top:3px solid transparent;border-bottom:3px solid transparent;border-left:5px solid var(--hair-2);z-index:1;}
.cg-proc-circle{position:relative;z-index:2;width:var(--proc-d);height:var(--proc-d);border-radius:50%;border:1px solid var(--hair-2);background:rgba(255,255,255,.025);display:flex;align-items:center;justify-content:center;font-family:var(--ff-ko);font-weight:600;font-size:10.5px;line-height:1.25;color:rgba(255,255,255,.82);padding:4px;box-sizing:border-box;}
.cg-proc-step:last-child .cg-proc-circle{border:1.5px solid var(--accent);background:var(--accent-wash);color:var(--text);box-shadow:0 6px 18px rgba(2,112,255,.22);}
.cg-proc-cap{margin-top:12px;font-family:var(--ff-ko);font-size:11px;line-height:1.55;color:var(--muted-2);max-width:118px;word-break:keep-all;}

.cg-arrow{position:absolute;top:38%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(10,10,14,.7);border:1px solid var(--hair);color:var(--text);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;transition:background .2s,border-color .2s;}
.cg-arrow:hover{background:var(--accent-wash);border-color:var(--accent);}
.cg-arrow-prev{left:-4px;}
.cg-arrow-next{right:-4px;}
.cg-arrow[disabled]{opacity:.28;cursor:default;pointer-events:none;}

@media(max-width:900px){
  .cg-h2{font-size:clamp(28px,7vw,40px);}
  .cg-headrow{flex-direction:column;align-items:flex-start;gap:14px;}
  .cg-sub{text-align:left;}
  .cg-arrow{display:none;}
  .cg-card{flex:0 0 88vw;}
  .cg-ttl{font-size:17px;}
  .cg-proc-chain{--proc-r:24px;--proc-d:48px;}
  .cg-proc-circle{font-size:9.5px;}
  .cg-proc-cap{font-size:10px;max-width:88px;}
}
@media (prefers-reduced-motion:reduce){
  .cg-track{scroll-behavior:auto;}
  .cg-card{transition:none;}
}

/* ============================================================
   WHY (#why) — 도표 + 사진 백드롭 (대조 플로우)
   ============================================================ */
.wh-kick{font-family:var(--ff-en,"Inter");font-weight:700;font-size:var(--fs-xs);letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.5);}
.wh-title{font-family:var(--ff-ko);font-weight:700;font-size:clamp(34px,3.6vw,52px);line-height:1.15;letter-spacing:-1.4px;margin:18px 0 0;color:var(--text);word-break:keep-all;overflow-wrap:break-word;}
.wh-title .ac{color:var(--color-brand);}
.wh-sub{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-base);line-height:1.7;color:rgba(255,255,255,.6);margin:18px 0 0;max-width:44em;word-break:keep-all;}
.wh-cta{display:inline-flex;align-items:center;gap:9px;font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-sm);color:var(--text);background:var(--color-brand);border-radius:10px;padding:14px 26px;text-decoration:none;transition:background .2s,transform .2s;}
.wh-cta:hover{background:var(--color-brand-hover);transform:translateX(3px);}
.wh-cta .ar{transition:transform .2s;} .wh-cta:hover .ar{transform:translateX(4px);}
.wh-foot{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:clamp(36px,3.4vw,52px);}

.v4f-bg{position:absolute;inset:-5%;background-image:linear-gradient(115deg,#070a10,#0b1726 56%,#0c1f37);background-size:cover;background-position:72% 42%;animation:v4zoom 22s ease-in-out infinite alternate;will-change:transform;z-index:0;}
.v4f-veil{position:absolute;inset:0;z-index:1;}
.v4f-sweep{position:absolute;top:0;bottom:0;left:-45%;width:45%;background:linear-gradient(90deg,transparent,rgba(2,112,255,.07),transparent);animation:v4sweep 11s ease-in-out infinite;pointer-events:none;z-index:1;}
@keyframes v4zoom{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes v4sweep{0%{left:-45%}55%{left:130%}100%{left:130%}}

.fd-sec{position:relative;padding:clamp(72px,7vw,120px) 0;overflow:hidden;background:radial-gradient(120% 100% at 82% -5%,rgba(2,112,255,.10),transparent 56%),#070a10;}
.fd-sec.has-photo .v4f-veil{background:linear-gradient(180deg,rgba(6,8,12,.9),rgba(6,8,12,.8)),radial-gradient(92% 120% at 84% -10%,rgba(2,112,255,.18),transparent 55%);}
.fd-inner{position:relative;z-index:2;max-width:1500px;margin:0 auto;padding:0 clamp(40px,5vw,80px);}
.fd-inner .wh-title{font-size:clamp(36px,4vw,62px);}
.fd{margin-top:clamp(46px,4.2vw,68px);}
.fd-row{display:flex;align-items:center;gap:0;}
.fd-row+.fd-row{margin-top:clamp(38px,3.4vw,56px);position:relative;}
.fd-row+.fd-row::before{content:"";position:absolute;left:clamp(96px,10vw,150px);right:0;top:calc(-1*clamp(19px,1.7vw,28px));height:1px;background:linear-gradient(90deg,rgba(255,255,255,.09),transparent);}
.fd-rlab{flex:none;width:clamp(96px,10vw,150px);text-align:right;padding-right:24px;}
.fd-rlab .k{font-family:var(--ff-en,"Inter");font-weight:700;font-size:var(--fs-micro);letter-spacing:1.4px;text-transform:uppercase;display:block;}
.fd-rlab .n{font-family:var(--ff-ko);font-weight:700;font-size:clamp(15px,1.4vw,19px);margin-top:6px;letter-spacing:-.4px;}
.fd-row.bad .k{color:rgba(255,255,255,.3);} .fd-row.bad .n{color:rgba(255,255,255,.44);}
.fd-row.good .k{color:var(--color-brand);} .fd-row.good .n{color:var(--text);}
.fd-chain{display:flex;align-items:center;flex:1;min-width:0;}
.fd-node{display:flex;align-items:center;gap:9px;flex:none;padding:13px 18px;border-radius:11px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.03);color:rgba(255,255,255,.55);font-family:var(--ff-ko);font-weight:600;font-size:clamp(13px,1.1vw,15px);white-space:nowrap;}
.fd-node.brand{color:var(--text);border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.05);}
.fd-node.fdhero{gap:11px;background:rgba(2,112,255,.17);border:1px solid rgba(2,112,255,.62);color:var(--text);box-shadow:0 0 30px rgba(2,112,255,.32);padding:15px 26px;}
.fd-node.fdhero .sub{display:block;font-size:var(--fs-micro);font-weight:400;color:#8fbcff;margin-top:3px;letter-spacing:.2px;}
.fd-node svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;}
.fd-node.fdhero svg{width:22px;height:22px;}
.fd-row.good .fd-node svg{stroke:var(--color-brand-soft);}
.fd-row.good .fd-node.fdhero svg{stroke:#e4f1ff;}
.fd-htxt{display:flex;flex-direction:column;line-height:1.16;}
.fd-conn{flex:1;min-width:30px;height:2px;position:relative;margin:0 7px;background:rgba(255,255,255,.15);}
.fd-conn::after{content:"";position:absolute;right:-1px;top:50%;transform:translateY(-50%);border-left:6px solid rgba(255,255,255,.28);border-top:5px solid transparent;border-bottom:5px solid transparent;}
.fd-conn .leak{position:absolute;top:9px;left:50%;transform:translateX(-50%);font-family:var(--ff-ko);font-size:10.5px;color:rgba(255,255,255,.32);white-space:nowrap;}
.fd-conn.blue{background:transparent;background-image:linear-gradient(90deg,var(--color-brand) 55%,transparent 55%);background-size:12px 2px;animation:fddash .55s linear infinite;}
.fd-conn.blue::after{border-left-color:var(--color-brand);}
.fd-conn.blue .gain{position:absolute;top:9px;left:50%;transform:translateX(-50%);font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-micro);color:var(--color-brand-soft);white-space:nowrap;}
@keyframes fddash{to{background-position:12px 0}}
.fd-cap{margin-top:clamp(38px,3.6vw,58px);font-family:var(--ff-ko);font-size:clamp(15px,1.3vw,18px);line-height:1.7;color:rgba(255,255,255,.66);max-width:none;word-break:keep-all;}
.fd-cap b{color:var(--text);font-weight:700;} .fd-cap .em{color:var(--color-brand-soft);font-weight:700;}
@media(max-width:900px){
  .fd-row{flex-direction:column;align-items:flex-start;gap:10px;}
  .fd-rlab{width:auto;text-align:left;padding:0 0 4px;}
  .fd-chain{flex-wrap:wrap;gap:8px;} .fd-conn{min-width:24px;flex:0 0 24px;}
  .fd-conn .leak,.fd-conn.blue .gain{display:none;} .fd-row+.fd-row::before{display:none;}
}
/* 진입 스태거 — JS가 .anim-ready 부여(무JS면 그대로 노출), 뷰포트 진입 시 .in */
.fd-sec.anim-ready .fd-node,.fd-sec.anim-ready .fd-conn,.fd-sec.anim-ready .fd-cap,.fd-sec.anim-ready .wh-foot{opacity:0;transform:translateY(16px);transition:opacity .55s ease var(--d,0s),transform .55s ease var(--d,0s);}
.fd-sec.anim-ready.in .fd-node,.fd-sec.anim-ready.in .fd-conn,.fd-sec.anim-ready.in .fd-cap,.fd-sec.anim-ready.in .wh-foot{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){ .v4f-bg,.fd-conn.blue{animation:none;} .v4f-sweep{display:none;} }

/* ===== 모바일 히어로/WHO — 랜드스케이프 키네틱 → 세로 스택(가독) · 리뷰 반영 ===== */
@media(max-width:600px){
  /* 히어로: 절대배치 16:9 스테이지 → 일반 흐름 세로 스택 */
  .hero-stage{position:relative;left:auto;top:auto;transform:none;width:100%;height:auto;min-width:0;min-height:0;padding:132px 26px 96px;display:block;}
  .hero-head{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;}
  .hero-head .hw{position:relative!important;left:auto!important;top:auto!important;white-space:nowrap;font-size:clamp(34px,12.5vw,58px)!important;line-height:1.06;}
  .hw-is{font-size:clamp(30px,10.5vw,50px)!important;margin-top:6px;}
  .hero-loop,.hero-tag{display:none!important;}
  /* WHO 대형 워드: 뷰포트 폭 안에 맞춤(우측 잘림 해소) */
  .who-w1,.who-w3{font-size:clamp(48px,15.5vw,120px);}
  .who-w2{font-size:clamp(38px,12.5vw,96px);}
}

/* ============================================================
   06b CLIENTS (brandwall) — 로고월, ABOUT에서 이식 + 4행 마퀴
   about.css .brandwall/.lw- 패턴과 동일 골격. 1·3행 오른쪽, 2·4행 왼쪽으로 흐르고,
   3·4행은 --right2/--left2로 속도를 살짝 다르게 줘 4행이 겹쳐 보이지 않게 함.
   ============================================================ */
.brandwall{background:var(--canvas);padding:150px 0;}
.brandwall .head{display:flex;flex-direction:column;gap:18px;margin-bottom:64px;}
.lw-marquee{display:flex;flex-direction:column;gap:24px;overflow:hidden;margin-top:12px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);}
.lw-mq-track{display:flex;width:max-content;will-change:transform;}
.lw-mq-set{display:flex;flex:none;}
.lw-mq-track--right{animation:lw-marquee-right 46s linear infinite;}
.lw-mq-track--left{animation:lw-marquee-left 40s linear infinite;}
.lw-mq-track--right2{animation:lw-marquee-right 58s linear infinite;}
.lw-mq-track--left2{animation:lw-marquee-left 34s linear infinite;}
.lw-marquee:hover .lw-mq-track{animation-play-state:paused;}
@keyframes lw-marquee-left{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes lw-marquee-right{from{transform:translateX(-50%);}to{transform:translateX(0);}}
.lw-slot{flex:none;width:180px;height:96px;margin-right:18px;
  border:1px dashed rgba(255,255,255,.15);border-radius:12px;
  background:rgba(255,255,255,.02);display:flex;align-items:center;justify-content:center;
  filter:grayscale(1);transition:border-color .3s,background .3s;}
.lw-slot:hover{border-color:rgba(2,112,255,.4);background:rgba(2,112,255,.04);}
.lw-slot span{font-family:var(--ff-en);font-weight:600;font-size:11px;letter-spacing:1.5px;
  text-transform:uppercase;color:rgba(255,255,255,.26);}
.lw-foot{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:44px;}
.lw-note{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-xs);color:var(--muted-2);word-break:keep-all;max-width:760px;}
.lw-link{font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-sm);color:var(--color-brand-light);text-decoration:none;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:color .2s,gap .2s;}
.lw-link:hover{color:var(--text);gap:11px;}
.lw-link .arr{font-family:var(--ff-en);font-weight:600;}
@media(max-width:900px){
  .brandwall{padding:110px 0;}
  .lw-slot{width:158px;height:84px;}
}
@media(max-width:560px){.brandwall{padding:88px 0;}.lw-slot{width:140px;height:74px;}}
@media(prefers-reduced-motion:reduce){
  .lw-mq-track{animation:none;transform:none;}
  .lw-marquee{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 93%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 93%,transparent 100%);}
}

/* ============================================================
   01-B BRAND STORY — scroll-pin 3카드 (시안 v4 통합, 2026-07-21)
   원본: _시안_홈개편_2026-07/02_home-brandstory-cards/index_v4_3카드.html
   pin 340vh, 스크롤=활성카드 결정(휠 가로채기 없음), 카드 전환 640ms
   quint-in-out + rAF lerp 관성. 카드별 스크롤 구간 14/24/62% 비균등 배분
   (카드3=결론이 더 오래 버팀). 카피는 대표 확정본 그대로.
   ============================================================ */
.bs-pin{ position:relative; height:340vh; background:#000; }
body.capture-mode .bs-pin{ height:100vh; }

.bs-stage{
  position:sticky; top:0; left:0; width:100%; height:100vh;
  overflow:hidden; background:#000;
}
body.capture-mode .bs-stage{ position:relative; }

.bs-bg{ position:absolute; inset:0; opacity:0; transition:opacity .85s cubic-bezier(.65,0,.35,1); will-change:opacity; }
.bs-bg.is-active{ opacity:1; }
.bs-bg img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.08); filter:saturate(.85) brightness(.62);
  transition:transform 1.3s cubic-bezier(.16,1,.3,1);
}
.bs-bg.is-active img{ transform:scale(1.0); }
.bs-bg img.bg-dim-1{ filter:saturate(.85) brightness(.52); }
.bs-bg img.bg-bright-fix{ filter:saturate(.85) brightness(.40); }
.bs-bg img.bg-card3-v2{ filter:saturate(.85) brightness(.26); object-position:62% 42%; }
.bs-scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 60%, rgba(0,0,0,.35) 0%, rgba(0,0,0,.72) 62%, rgba(0,0,0,.9) 100%),
    linear-gradient(0deg, rgba(0,0,0,.5) 0%, transparent 26%, transparent 74%, rgba(0,0,0,.35) 100%);
}
.bs-grain{
  position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

.bs-eyebrow{
  position:absolute; z-index:5; top:64px; left:8vw; right:8vw;
  display:flex; align-items:center; gap:14px;
}
.bs-eb-num{font-family:var(--ff-en); font-weight:600; font-size:16px; color:var(--accent);}
.bs-eb-label{font-family:var(--ff-en); font-weight:600; font-size:13px; letter-spacing:2.34px; color:var(--muted); text-transform:uppercase; white-space:nowrap;}
.bs-eb-line{flex:1; height:1px; background:var(--hair);}

.bs-card-stage{
  position:absolute; z-index:4; inset:0;
  display:flex; align-items:center;
}
.bs-card{
  position:absolute; top:50%; left:8vw;
  /* 2026-07-21 대표 카피 확정 반영: 카드1 1행이 640px 폭에서 근소 초과, keep-all이
     마지막 어절을 다음 줄로 밀어 2줄이 3줄로 깨짐. 카드 폭만 640→680으로 소폭 확장. */
  width:min(680px,58vw);
  opacity:0; pointer-events:none;
  transform:translate(0,-50%) translateX(0) scale(.96);
  transition:
    transform .64s cubic-bezier(.83,0,.17,1),
    opacity .46s cubic-bezier(.65,0,.35,1);
}
.bs-card.side-right{ left:auto; right:8vw; }

.bs-card.state-idle{ transition:none; }
.bs-card.state-idle.dir-left{ transform:translate(0,-50%) translateX(-9%) scale(.94); }
.bs-card.state-idle.dir-right{ transform:translate(0,-50%) translateX(9%) scale(.94); }

.bs-card.state-active{
  opacity:1; pointer-events:auto;
  transform:translate(0,-50%) translateX(0) scale(1);
}

.bs-card.state-exit{
  opacity:0; pointer-events:none;
  transform:translate(0,-50%) translateX(0) scale(.96);
}
.bs-card.state-exit.dir-left{ transform:translate(0,-50%) translateX(-10%) scale(.90); }
.bs-card.state-exit.dir-right{ transform:translate(0,-50%) translateX(10%) scale(.90); }

.bs-card-num{
  font-family:var(--ff-en); font-weight:700; font-size:14px; letter-spacing:1px;
  color:var(--accent); margin:0 0 18px;
  display:flex; align-items:center; gap:10px;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
}
.bs-card-num::after{ content:''; width:28px; height:1px; background:var(--accent-line); }
.bs-card-headline{
  font-family:var(--ff-ko); font-weight:700; letter-spacing:-1.1px;
  font-size:clamp(26px,3.4vw,44px); line-height:1.34; margin:0;
  word-break:keep-all; color:#fff;
  text-shadow:0 10px 34px rgba(0,0,0,.6), 0 2px 10px rgba(0,0,0,.55);
}
.bs-card-headline em{ font-style:normal; color:var(--accent); }

.bs-progress-wrap{ position:absolute; z-index:5; left:8vw; right:8vw; bottom:56px; display:flex; align-items:center; gap:18px; }
.bs-progress-track{ flex:1; height:2px; background:var(--hair); position:relative; }
.bs-progress-fill{ position:absolute; left:0; top:0; height:100%; width:0%; background:var(--accent); transition:width .64s cubic-bezier(.83,0,.17,1); }
.bs-step{ font-family:var(--ff-en); font-size:12px; letter-spacing:1.5px; color:var(--muted); white-space:nowrap; }
.bs-step b{ color:#fff; }
.bs-dots{ position:absolute; z-index:5; right:8vw; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:12px; }
.bs-dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.25); transition:background .3s ease, transform .3s ease; }
.bs-dot.is-active{ background:var(--accent); transform:scale(1.5); }

@media(max-width:900px){
  .bs-card{ width:82vw; }
}
@media(max-width:720px){
  .bs-dots{ display:none; }
  .bs-eyebrow{ top:40px; }
  .bs-progress-wrap{ bottom:34px; }
  .bs-card, .bs-card.side-right{ left:6vw; right:6vw; width:auto; }
  /* 2026-07-21 검증(Playwright, Range.getClientRects): 720px 데스크톱용 clamp(26~44px)를
     그대로 두면 390px 카드1 1행("대행사인데, 왜 직접 해보지 않았을까")이 두 줄로 접혀
     전체 3줄이 됨(2줄 고정 요구 위반). 390px 폭에서 2줄로 딱 떨어지는 상한을 실측해
     22px로 고정(357px 이하는 아래 별도 규칙). */
  .bs-card-headline{ font-size:22px; }
}
@media(max-width:357px){
  /* 358px 경계 실측(Playwright): fs=22px는 358px부터 2줄, 355px 이하는 3줄로 깨짐.
     320~357px 구간은 19px로 낮춰야 카드1이 2줄을 유지(실측 320px에서 19px=2줄 확인). */
  .bs-card-headline{ font-size:19px; }
}

body.capture-mode .bs-bg{ transition:none; }
body.capture-mode .bs-bg img{ transition:none; }
body.capture-mode .bs-card{ transition:none; }
body.capture-mode .bs-progress-fill{ transition:none; }

@media (prefers-reduced-motion: reduce){
  .bs-bg, .bs-bg img, .bs-card, .bs-progress-fill{ transition:none !important; }
}