/* ============================================================
   INNO&M — ABOUT_V2  (Figma 442:2 → local build)
   Design: 1920 canvas, content margin 336px (max content 1248px)
   ============================================================ */
/* ------------------------------------------------------------
   Shared tokens / reset / body / utilities / .container /
   .reveal  → 모두 common.css 제공 (값 동일하여 ABOUT에서 제거).
   common.css를 about.css보다 먼저 link 함.
   ------------------------------------------------------------ */

/* ---------- Eyebrow / Shared headings ---------- */
/* 공통 eyebrow(.eyebrow, .eb-num, .eb-label, .eb-line)와 .h-section / .lead 는
   common.css 제공(값 동일하여 제거). 아래 한 줄만 ABOUT 전용(common.css에 없음):
   01 WHO / 05 TRUST / 06 LOCATION eyebrow 라벨을 흰색으로. */
.who .eb-label,.trust .eb-label,.location .eb-label{color:var(--text);}

/* ============================================================
   HEADER — inherited from common.css (A안: 로고 좌·메뉴 우 확대).
   ABOUT-only re-definition removed so the header matches all 4 pages
   (was overriding common with old 24/14px sizes + no right-align).
   ============================================================ */

/* Mobile nav drawer: layout class applied by JS while open (display stays flex
   during the close animation). opacity/transform only. */
.nav.nav--drawer{
  display:flex;position:absolute;top:100%;right:24px;flex-direction:column;
  background:rgba(10,10,12,0.97);padding:16px 24px;border-radius:12px;gap:16px;
  opacity:0;transform:translateY(-8px);
  transition:opacity .22s ease,transform .22s cubic-bezier(.22,.61,.36,1);
}
.nav.nav--drawer.nav--open{opacity:1;transform:translateY(0);}

/* ============================================================
   HERO
   ============================================================ */
/* ---- flow like HOME: drop the per-section "0X LABEL ———" eyebrows so sections
   run together as one narrative instead of numbered chapters. (ABOUT-only) ---- */
.eyebrow{display:none;}

.hero{position:relative;height:100vh;min-height:760px;background:var(--canvas);overflow:hidden;}
.hero-bg{
  position:absolute;inset:0;
  background:url("../assets/who-team.jpg") center center/cover no-repeat;
  /* 어두운 블루 오피스 사진 — 팀이 함께 일하는 컷("직접 운영·데이터" 포지셔닝) */
}
/* 은은한 상·하 다크 그라디언트: 상단(헤더)·하단만 살짝 눌러 깊이 + 흰 헤드라인 대비.
   가운데는 rgba 0 으로 비워 사진 텍스처가 그대로 살아있게 한다. */
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,7,14,.36) 0%,rgba(4,7,14,0) 28%,rgba(4,7,14,0) 60%,rgba(4,7,14,.56) 100%);}
/* readability scrim: 흰 스크림을 다크 라디얼로 교체 — 카피가 놓이는 우상단만 은은히
   어둡게 눌러 흰 헤드라인 가독성 확보. 왼쪽으로 갈수록 0 으로 풀려 사진이 뿌옇게 죽지 않음. */
.hero-bg::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 95% at 76% 42%,rgba(5,9,18,.66) 0%,rgba(5,9,18,.34) 40%,rgba(5,9,18,0) 70%);}
.hero-copy{
  /* Figma 442:3 — copy block x=573 w=1107 on 1920 canvas → right edge 1680,
     i.e. right margin 240/1920 = 12.5vw. Anchor by that right margin so the
     block hugs the right edge exactly as Figma (prev calc()-cap pulled it ~130px
     too far left, reading as centered). At ≤900 the mobile rule re-centers it. */
  position:absolute;z-index:2;top:42%;transform:translateY(-50%);
  right:12.5vw;
  width:min(1107px,86vw);text-align:right;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
}
.hero-h1{
  font-family:var(--ff-ko);font-weight:700;
  font-size:clamp(40px,6.6vw,102px);line-height:1.08;letter-spacing:-2.04px;color:#ffffff;
  white-space:nowrap;text-shadow:0 2px 34px rgba(0,0,0,.5);
}
.hero-accent{
  display:block;
  font-family:var(--ff-serif);font-style:italic;font-weight:500;
  font-size:clamp(40px,6.6vw,102px);line-height:1.08;letter-spacing:-2.04px;color:var(--accent);
  margin-top:2px;text-shadow:0 2px 34px rgba(0,0,0,.45);
}
.hero-lead{
  font-family:var(--ff-ko);font-weight:400;
  font-size:clamp(15px,1.25vw,18px);line-height:1.7;color:rgba(255,255,255,.88);
  width:min(620px,100%);margin-top:18px;text-shadow:0 1px 18px rgba(0,0,0,.55);
}

/* ============================================================
   SECTION base
   ============================================================ */
.section{position:relative;padding:104px 0;}

/* ============================================================
   01 WHO WE ARE
   ============================================================ */
.who{background:#0c0d0f;background-image:radial-gradient(120% 80% at 50% 50%,#15171b 0%,#070708 70%);text-align:center;}
.eclipse{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin:44px 0;
}
/* crescent phases: inline SVG circular segment (sharp arc + chord), no box-shadow blur.
   Each .ec is just a flex slot sized to its SVG (height 96 = full-circle diameter). */
.eclipse .ec{
  position:relative;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
}
.ec--cr{height:96px;}
.ec--cr svg{display:block;height:96px;width:auto;shape-rendering:geometricPrecision;transform:translateZ(0);backface-visibility:hidden;}
.ec--big{
  width:128px;height:128px;border-radius:50%;background:var(--text);
  display:flex;align-items:center;justify-content:center;margin:0 8px;
}
.ec--big em{font-family:var(--ff-en);font-weight:200;font-size:var(--fs-lg);font-style:normal;color:#0c0d0f;letter-spacing:.5px;}
.who-foot{margin-top:8px;}
.who-sub{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-sm);color:var(--muted);margin-bottom:10px;}
.who-sub strong{font-weight:700;color:var(--text);}
.who-line{font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-2xl);color:var(--text);}

/* ============================================================
   02 OPERATOR MODEL
   ============================================================ */
.operator{background:var(--canvas);}
/* keep the differentiator term "대행사" from breaking mid-word on mobile */
.operator .h-section{word-break:keep-all;}
.head{display:flex;flex-direction:column;gap:18px;margin-bottom:64px;}
.compare{display:flex;gap:24px;align-items:stretch;}
.card{flex:1;min-width:0;padding:36px 34px;display:flex;flex-direction:column;gap:22px;}
.card--agency{background:var(--panel);border:1px solid var(--hair);}
.card--innonm{background:rgba(255,255,255,0.04);border:1.5px solid var(--accent);box-shadow:0 10px 50px rgba(2,112,255,0.24);}
.card-head{display:flex;flex-direction:column;gap:8px;}
.card-tag{font-family:var(--ff-en);font-weight:600;font-size:var(--fs-xs);letter-spacing:2.16px;color:var(--muted-2);}
.card-tag.accent{color:var(--accent);}
.card-title{font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-xl);line-height:1.3;letter-spacing:-.46px;color:var(--text);}
.card-title.muted{color:var(--muted);}
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.chip{font-family:var(--ff-ko);font-weight:500;font-size:var(--fs-xs);color:var(--muted);background:var(--panel);border:1px solid var(--hair);border-radius:var(--radius-pill);padding:6px 12px;}
.chip--accent{color:var(--accent);background:var(--accent-line);border-color:var(--accent-line);}
.arr{font-family:var(--ff-ko);font-size:var(--fs-xs);color:var(--muted-2);}
.hr{height:1px;width:100%;background:var(--hair);}
.bullets{list-style:none;display:flex;flex-direction:column;gap:14px;}
.bullets li{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-sm);line-height:1.6;color:var(--muted);}
.bullets li span:last-child{flex:1;}
.mk{font-family:var(--ff-ko);font-weight:700;flex:0 0 auto;}
.mk--x{color:var(--muted-2);}
.mk--v{color:var(--accent);}

/* DIRECT MODEL — 대조 표 (외주 ✕ vs 직접 ✓) */
.dm-table{position:relative;}
.dm-table::after{content:"";position:absolute;top:0;right:0;width:50%;height:100%;background:linear-gradient(180deg,rgba(2,112,255,.07),rgba(2,112,255,.02));border-left:1px solid rgba(2,112,255,.22);pointer-events:none;border-radius:0 14px 14px 0;}
.dm-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;}
.dm-chl,.dm-chr{padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.1);}
.dm-chl{text-align:right;padding-right:36px;}
.dm-chr{padding-left:36px;}
.dm-lab{font-family:var(--ff-en);font-weight:700;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;}
.dm-chl .dm-lab{color:rgba(255,255,255,.34);}
.dm-chr .dm-lab{color:var(--accent);}
.dm-name{font-family:var(--ff-ko);font-weight:700;font-size:clamp(19px,1.7vw,24px);letter-spacing:-.5px;margin-top:9px;}
.dm-chl .dm-name{color:rgba(255,255,255,.46);}
.dm-chr .dm-name{color:var(--text);}
.dm-chr .dm-name .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-left:8px;vertical-align:middle;box-shadow:0 0 12px rgba(2,112,255,.8);}
.dm-bad,.dm-good{display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(255,255,255,.06);padding:clamp(22px,2.4vw,30px) 0;font-family:var(--ff-ko);font-size:clamp(15px,1.35vw,17px);line-height:1.5;word-break:keep-all;}
.dm-bad{justify-content:flex-end;text-align:right;padding-right:36px;color:rgba(255,255,255,.5);}
.dm-good{padding-left:36px;color:var(--text);font-weight:500;}
.dm-good b{font-weight:700;color:var(--text);}
.dm-good .em{color:var(--color-brand-soft);font-weight:700;}
.dm-x{flex:none;width:20px;height:20px;border-radius:50%;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.4);font-size:11px;display:inline-flex;align-items:center;justify-content:center;}
.dm-c{flex:none;width:20px;height:20px;border-radius:50%;background:rgba(2,112,255,.16);border:1px solid rgba(2,112,255,.5);color:var(--color-brand-soft);font-size:11px;display:inline-flex;align-items:center;justify-content:center;}
@media(max-width:760px){
  .dm-grid{grid-template-columns:1fr;}
  .dm-table::after{display:none;}
  .dm-chl,.dm-bad{text-align:left;justify-content:flex-start;padding-right:0;}
  .dm-chr{padding-left:0;}
}

/* ============================================================
   03 HOW WE WORK  (orbit)
   ============================================================ */
.how{background:var(--canvas);text-align:center;overflow:hidden;}
.how-title{font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-5xl);line-height:1.03;color:var(--text);text-align:center;margin:48px 0 0;}
/* Figma 441:1326 — ring with 4 labels at 12/3/6/9 o'clock sitting on the ring edge,
   3D asset centered. Base structural rules; the pinned-snap overrides at the END of
   this file (".how-track / .orbit / .orbit-center / .pr--* / .orbit-progress") win. */
.orbit{position:relative;margin:0 auto;}
.orbit-stage{position:relative;width:100%;aspect-ratio:1/1;margin:0 auto;}
/* desktop: principle cards overlay the ring (clock positions resolve vs the stage) */
.pr-cards{position:absolute;inset:0;z-index:3;pointer-events:none;}
.pr-cards .pr{pointer-events:auto;}
.orbit-ring{position:absolute;border-radius:50%;}
.orbit-ring--lg{inset:0;border:1px solid rgba(255,255,255,0.14);}
/* old spinning --sm border ring removed: SVG progress arc takes over (hidden via override) */
.orbit-dot{position:absolute;width:16px;height:16px;border-radius:50%;z-index:2;
  box-shadow:0 0 0 5px rgba(0,0,0,1);}
.orbit-dot--accent{background:var(--accent);box-shadow:0 0 0 5px var(--canvas),0 0 14px rgba(2,112,255,0.6);}
.orbit-dot--white{background:var(--text);box-shadow:0 0 0 5px var(--canvas);}
.orbit-center{position:absolute;pointer-events:none;}
.pr{position:absolute;width:280px;display:flex;flex-direction:column;align-items:center;gap:6px;z-index:3;}
.pr-num{font-family:var(--ff-serif);font-weight:500;font-size:var(--fs-xl);color:var(--accent);line-height:1;}
.pr h3{font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-md);color:var(--text);}
.pr p{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-xs);line-height:1.55;color:var(--muted);}
/* labels centered on the ring edge (12/3/6/9). horizontal/vertical centering kept here;
   the radial GAP (40px near-edge) is set by the .pr--* overrides at the END of file. */
.pr--top{left:50%;transform:translateX(-50%);}
.pr--bottom{left:50%;transform:translateX(-50%);}
.pr--right{top:50%;transform:translateY(-50%);text-align:left;align-items:flex-start;width:220px;}
.pr--left{top:50%;transform:translateY(-50%);text-align:right;align-items:flex-end;width:220px;}

/* ============================================================
   04 PROCESS
   ============================================================ */
.process{background:var(--canvas);}
.steps{display:flex;align-items:flex-start;justify-content:center;gap:50px;margin-top:60px;}
.step{flex:1;min-width:0;display:flex;flex-direction:column;gap:20px;align-items:flex-start;}
.step-no{font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-md);color:var(--text);letter-spacing:-.18px;}
.step-div{width:1px;align-self:stretch;background:var(--hair);}
.pie{
  width:124px;height:124px;border-radius:50%;
  /* ring gauge (donut): accent arc fills 25→100% clockwise from top over a faint track,
     hollow center via ::after — reads as "filling progress", not a broken wedge. */
  background:conic-gradient(var(--accent) var(--pct,25%),rgba(255,255,255,.10) 0);
  position:relative;
}
.pie::after{content:"";position:absolute;inset:16px;border-radius:50%;background:var(--canvas);}
/* PROCESS step card: settles in slightly after its pie fills (JS adds .step-lit).
   transform/opacity only; reduced-motion forces final state below. */
.step .step-no,.step h3,.step p{transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1);}
.step.step-dim .step-no,.step.step-dim h3,.step.step-dim p{opacity:.42;transform:translateY(6px);}
.step.step-lit .step-no,.step.step-lit h3,.step.step-lit p{opacity:1;transform:none;}
.step h3{font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-md);line-height:1.4;letter-spacing:-1px;color:var(--text);}
.step p{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-sm);line-height:1.6;color:var(--muted);max-width:262px;}

/* ============================================================
   05 TRUST
   ============================================================ */
.trust{background:var(--canvas);}
.trust-grid{display:grid;grid-template-columns:624px 624px;gap:0;margin-top:60px;justify-content:space-between;}
.trust-left{display:flex;flex-direction:column;}
.trust-left .h-section{font-size:var(--fs-5xl);}
.trust-sub{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-base);line-height:1.7;color:var(--muted);margin-top:28px;}
.btn-pill{align-self:flex-start;margin-top:40px;display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--text);font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-sm);text-decoration:none;border-radius:var(--radius-pill);padding:16px 30px;transition:opacity .2s;}
.btn-pill:hover{opacity:.88;}
.btn-pill .arr{color:var(--text);font-family:var(--ff-en);font-weight:600;}
.trust-right{display:flex;flex-direction:column;}
.stat{display:flex;align-items:baseline;justify-content:space-between;padding:18px 0;}
.stat-num{font-family:var(--ff-serif);font-weight:500;font-size:var(--fs-5xl);line-height:1;color:var(--text);}
.stat-num--hero{font-size:var(--fs-6xl);}
.stat-num.accent{color:var(--accent);}
.stat-label{font-family:var(--ff-ko);font-weight:500;font-size:var(--fs-md);color:rgba(255,255,255,0.82);}
.stat-hr{height:1px;background:var(--hair);}
.stat-note{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-xs);color:rgba(255,255,255,0.4);margin-top:24px;}

/* ============================================================
   06 LOCATION
   ============================================================ */
.location{background:var(--canvas);border-top:1px solid var(--hair);}
.loc-grid{display:flex;gap:80px;align-items:center;margin-top:40px;}
.loc-info{width:568px;max-width:100%;display:flex;flex-direction:column;gap:40px;}
.loc-list{display:flex;flex-direction:column;gap:16px;}
.loc-row{display:flex;gap:20px;align-items:flex-start;padding-bottom:16px;border-bottom:1px solid var(--hair);}
.loc-row dt{font-family:var(--ff-ko);font-weight:500;font-size:var(--fs-xs);color:var(--accent);width:80px;flex:0 0 80px;}
.loc-row dd{font-family:var(--ff-ko);font-weight:500;font-size:var(--fs-base);color:var(--text);}
.loc-map{
  position:relative;width:600px;height:400px;flex:0 0 auto;max-width:100%;
  background:#0e0f12 url("../assets/office-map.jpg") center/cover no-repeat;
  border:1px solid rgba(255,255,255,0.08);border-radius:10px;overflow:hidden;
}

/* ============================================================
   07 CONTACT  (common.css와 거의 동일하나 .ir-big font-size 가
   ABOUT 의도값 80px(var(--fs-6xl)) — common 78px. 블록 유지.)
   ============================================================ */
.contact{background:var(--accent-2);}
.contact .container{padding-top:56px;}
/* .contact-body geometry (510px gutters / max-width 1920 / min-height) is the
   frozen common.css rule and matches Figma 442:237 (frame padding 0/510/0/510 at
   1920) — do NOT override it here. A prior pass added a width:min(900px,…) override
   reasoned from a 1440 capture artifact; removed so common.css governs. */
.ir-block{display:flex;align-items:center;gap:40px;width:100%;}
.ir-from,.ir-to{display:flex;flex-direction:column;gap:6px;}
.ir-to{align-items:flex-end;}
.ir-tag{font-family:var(--ff-en);font-weight:700;font-size:var(--fs-md);letter-spacing:1.44px;color:rgba(255,255,255,0.75);}
.ir-big{font-family:var(--ff-en);font-weight:800;font-style:italic;font-size:var(--fs-6xl);color:var(--text);line-height:1;}
.ir-line{flex:1;height:1px;background:rgba(255,255,255,0.6);min-width:0;}
.contact-cta{background:var(--text);color:var(--accent);font-family:var(--ff-en);font-weight:700;font-size:var(--fs-md);letter-spacing:1.44px;text-decoration:none;border-radius:var(--radius-pill);padding:20px 48px;transition:transform .2s;}
.contact-cta:hover{transform:translateY(-2px);}

/* ============================================================
   08 FOOTER  (common.css와 거의 동일하나 .footer-bottom font-size 가
   ABOUT 의도값 13px(var(--fs-xs)) — common 12px. 블록 유지.)
   ============================================================ */
.footer{background:var(--canvas);border-top:1px solid var(--hair);padding:50px 0 64px;}
.footer-top{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;}
.footer-brand{display:flex;flex-direction:column;gap:8px;}
.footer-logo{font-family:var(--ff-en);font-weight:800;font-size:var(--fs-2xl);letter-spacing:-.9px;color:var(--text);}
.footer-tagline{font-family:var(--ff-en);font-weight:600;font-size:var(--fs-xs);letter-spacing:2.34px;color:var(--muted);text-transform:uppercase;}
.footer-consult{align-self:flex-start;margin-top:14px;font-family:var(--ff-ko);font-weight:500;font-size:var(--fs-sm);color:var(--text);text-decoration:none;border:1px solid var(--hair-2);border-radius:var(--radius-pill);padding:11px 18px;transition:border-color .2s;}
.footer-consult:hover{border-color:var(--text);}
.footer-col{display:flex;flex-direction:column;gap:11px;}
.footer-h{font-family:var(--ff-en);font-weight:700;font-size:var(--fs-micro);letter-spacing:1.98px;color:var(--accent);}
.footer-col a{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-xs);color:var(--muted);text-decoration:none;transition:color .2s;}
.footer-col a:hover{color:var(--text);}
.footer-social{display:flex;gap:10px;margin-top:5px;}
.soc{font-family:var(--ff-en);font-weight:700;font-size:var(--fs-micro);letter-spacing:1.98px;color:var(--muted);border:1px solid var(--hair);border-radius:var(--radius-sm);padding:6px 10px;}
.footer-hr{height:1px;background:var(--hair);margin:40px 0;}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:var(--fs-xs);color:var(--muted-2);}
.footer-bottom p{font-family:var(--ff-ko);font-weight:400;}
.footer-copy{font-family:var(--ff-en);font-weight:600;letter-spacing:2.16px;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1280px){
  .header-inner{padding:18px 40px;}
  .h-section,.how-title,.trust-left .h-section{font-size:var(--fs-4xl);}
  .trust-grid{grid-template-columns:1fr 1fr;gap:60px;}
}
/* ---- 03 HOW orbit: at <=1080 the side labels (3/9 o'clock) no longer fit the
   gutters beside the ring and were clipped by .how{overflow:hidden}
   (measured: 1024 left -62px / right +62px, 768 -187/+187). Drop the absolute
   clock layout below the desktop band and flow the 4 principles as a 2x2 grid
   under a centered ring. Pie-ring motif (orbit-center/rings/dots) is preserved. */
@media(max-width:1080px){
  .orbit{width:min(680px,100%);max-width:none;margin:56px auto 48px;
    display:flex;flex-direction:column;align-items:center;gap:44px;}
  .orbit-stage{width:min(380px,68vw);}
  .orbit-center{width:54%;}
  .orbit-dot{display:none;}
  /* cards leave the absolute overlay and flow as a 2x2 grid under the ring */
  .pr-cards{position:static;inset:auto;display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 32px;
    width:100%;max-width:600px;margin:0 auto;padding:0 4px;}
  .pr,.pr--top,.pr--right,.pr--bottom,.pr--left{
    position:static;left:auto;right:auto;top:auto;bottom:auto;
    width:auto;transform:none;text-align:center;align-items:center;}
}
@media(max-width:900px){
  .nav,.btn-consult{display:none;}
  .nav-toggle{display:block;}
  .header-inner{padding:16px 24px;}
  .section{padding:80px 0;}
  .hero-copy{left:0;right:0;margin:0 auto;transform:translateY(-50%);text-align:center;align-items:center;width:90vw;top:46%;gap:6px;}
  .hero-h1{white-space:normal;font-size:7vw;line-height:1.2;letter-spacing:-.5px;}
  .hero-accent{font-size:11vw;margin-top:8px;}
  .hero-lead{width:100%;font-size:var(--fs-sm);margin-top:14px;}
  .compare{flex-direction:column;}
  .steps{flex-wrap:wrap;gap:30px 24px;}
  .step{flex:1 1 40%;align-items:center;text-align:center;}
  .step p{text-align:center;}
  .step-div{display:none;}
  .trust-grid{grid-template-columns:1fr;gap:48px;}
  .stat-num--hero{font-size:var(--fs-5xl);}
  .loc-grid{flex-direction:column;gap:40px;align-items:stretch;}
  .loc-info,.loc-map{width:100%;}
  /* orbit narrow layout handled by the <=1080 grid block above */
  .ir-big{font-size:13vw;}
  .ir-block{gap:16px;}
  .footer-top{flex-direction:column;gap:32px;}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px;}
}
@media(max-width:560px){
  .h-section,.how-title{font-size:var(--fs-3xl);}
  .eclipse{gap:8px;}
  .ec--cr{height:11vw;}
  .ec--cr svg{height:11vw;}
  .ec--big{width:16vw;height:16vw;}
  .ec--big em{font-size:var(--fs-micro);}
  .who-line{font-size:var(--fs-lg);}
  .stat{flex-direction:column;align-items:flex-start;gap:4px;}
}

/* ============================================================
   REDUCED MOTION — all ABOUT motion jumps to final state.
   (pie sequential fill, stat count-up, step settle, nav slide)
   JS reads the same query and skips staggers/rAF/count-up.
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .step .step-no,.step h3,.step p,
  .step.step-dim .step-no,.step.step-dim h3,.step.step-dim p,
  .step.step-lit .step-no,.step.step-lit h3,.step.step-lit p{
    opacity:1;transform:none;transition:none;
  }
  .nav.nav--drawer{transition:none;}
}

/* ============================================================
   03 HOW WE WORK — PINNED SNAP-SCROLL OVERRIDES (ported from
   about-how-demo.html). Appended LAST so they win over the base
   .orbit / .orbit-center / .orbit-ring / .orbit-progress / .pr--*
   rules above at equal specificity. The <=1080 grid reflow block
   earlier in this file still governs the mobile 2x2 .pr-cards.
   ============================================================ */
/* ---- crisp-snap track: .how pins (sticky); the wheel steps through the 4 principles
   in place (one gesture = one step) without consuming scroll, so the track only needs
   a little over 100vh — just enough to pin and then release to the next section. */
.how-track{position:relative;height:130vh;background:var(--canvas);}
.how{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  justify-content:center;align-items:center;overflow:hidden;}
.how .container{width:100%;}

/* (1) breathing room: title clears the 01 top label, orbit re-centered.
   Smaller stage so the side labels + top/bottom labels sit fully outside. */
.how-title{margin:0 0 0;}
/* MOODFIX B: 상단 128px — 12시 노드 카드(.pr--top, bottom:calc(100%+40px))가
   링 위로 떠 '01 전담 팀 배정' 라벨과 제목이 겹치던 것 해소. 하단 52px 압축. */
.orbit{position:relative;width:480px;max-width:74vw;margin:128px auto 52px;}
.orbit-stage{position:relative;width:100%;aspect-ratio:1/1;margin:0 auto;transform:none;}

/* (1) UNIFORM radial gap: every label's NEAR edge sits exactly 40px from the ring
   at its cardinal point. Top/bottom anchored by their near edge too (via
   bottom/top:calc(100%+G)), so the gap no longer varies with text height. */
.pr--top{top:auto;bottom:calc(100% + 40px);}
.pr--bottom{bottom:auto;top:calc(100% + 40px);}
.pr--right{left:calc(100% + 40px);}
.pr--left{right:calc(100% + 40px);}

/* (2) center: SHRUNK + perfectly centered (no -20px / -3% nudge).
   Replaces the oversized img. ~46% of stage, capped small. */
.orbit-center{width:46%;height:auto;max-width:212px;aspect-ratio:1/1;
  top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;text-align:center;pointer-events:none;border-radius:50%;
  /* MOODFIX B: 블루 글로우 제거 → 중립 그라디언트(에디토리얼 플랫 톤) */
  background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.05),rgba(255,255,255,.015) 58%,transparent 74%);
  transition:opacity .38s ease;}
.orbit-center .oc-img{width:76%;height:76%;object-fit:contain;display:block;}
.orbit-center.is-swapping{opacity:0;}

/* (2b) SVG ring overlay that fills in quarter steps. 12 o'clock start, CW. */
.orbit-ring--sm{display:none;} /* div-border arc removed; SVG takes over */
/* thinner faint track ring (was 1px) -> fine line under the arc */
.orbit-ring--lg{border-width:0.5px;}
.orbit-progress{position:absolute;inset:0;width:100%;height:100%;
  z-index:2;pointer-events:none;overflow:visible;transform:rotate(-90deg);}
.orbit-progress circle{fill:none;stroke:var(--accent);stroke-width:1;
  stroke-linecap:round;transition:stroke-dashoffset .5s cubic-bezier(.22,.61,.36,1);}

/* (3) per-step emphasis: dim non-active labels + dots */
.pr{transition:opacity .38s ease;}
.pr.is-dim{opacity:.3;}
.pr.is-active .pr-num{color:var(--accent);}
.pr.is-active h3{color:var(--text);}
.orbit-dot{transition:opacity .38s ease,box-shadow .38s ease;}
.orbit-dot.is-dim{opacity:.28;}
.orbit-dot.is-active{opacity:1;background:var(--accent);
  box-shadow:0 0 0 5px var(--canvas),0 0 18px rgba(2,112,255,0.9);}

/* mobile: stack labels under a centered orbit (about.css <=1080 grid takes
   over for .pr-cards). Keep ring + center, hide side-collision risk. */
@media(max-width:760px){
  .orbit{width:min(360px,82vw);margin:72px auto 56px;}
  .orbit-center{width:52%;max-width:172px;}
  .pr--top{top:-78px;}
  .pr--bottom{bottom:-84px;}
}

/* ---- reduced motion: no pin, all 4 steps static & visible ---- */
@media(prefers-reduced-motion:reduce){
  .how-track{height:auto;}
  .how{position:static;height:auto;display:block;padding:120px 0;}
  .orbit-progress circle{stroke-dasharray:none !important;stroke-dashoffset:0 !important;
    transition:none !important;}
  .pr,.orbit-dot{opacity:1 !important;}
  .pr-num{color:var(--accent);}
  .orbit-center{opacity:1 !important;}
}

/* ============================================================
   HOW principles — 데모 비교 모드 (로컬 전용, body.hm-a / body.hm-b)
   일반 about.html(클래스 없음)은 영향 0. JS는 about.js가 모드 분기.
   ============================================================ */
/* A: 스크롤 위치 기반 — 트랙을 넉넉히 늘려 단계마다 충분한 스크롤 거리 확보 */
.hm-a .how-track{height:320vh;}

/* C3: 명시적 긴 트랙(=핀 거리) + ScrollTrigger가 .how를 그 안에서 핀. pinSpacing:false로 트랙 높이를 그대로 사용 */
.hm-c3 .how-track{height:420vh;}          /* 100vh(핀) + 320vh(또박또박 진행거리) */
.hm-c3 .how{position:relative;top:auto;height:100vh;}

/* B(정적) · C4(진입 시 순차 등장) — 둘 다 핀 없는 레이아웃 */
.hm-b .how-track,.hm-c4 .how-track{height:auto;}
.hm-b .how,.hm-c4 .how{position:static;height:auto;display:block;padding:120px 0 128px;}
/* MOODFIX B: C4(현행 about) 위/아래 검정 공백 압축 — 03→04 사이 성긴 여백 완화 */
.hm-c4 .how{padding:84px 0 92px;}
/* B만 즉시 풀-표시(애니메이션 없음). C4는 JS가 순차로 켜므로 강제표시 안 함 */
.hm-b .orbit-progress circle{stroke-dashoffset:0 !important;transition:none !important;}
.hm-b .pr,.hm-b .orbit-dot{opacity:1 !important;}
.hm-b .orbit-center{opacity:1 !important;}


/* ============================================================
   ABOUT refresh 2026-07-08 — trust points, proof, mono orbit, gauge, tablet, a11y
   ============================================================ */
/* TRUST 좌측 신뢰 포인트 */
.trust-points{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;}
.trust-points li{display:flex;align-items:flex-start;gap:11px;font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-base);line-height:1.5;color:rgba(255,255,255,.80);}
.trust-points b{color:var(--text);font-weight:700;}
.trust-points .tp-c{flex:none;width:22px;height:22px;border-radius:50%;background:rgba(2,112,255,.16);border:1px solid rgba(2,112,255,.55);color:var(--color-brand-light);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;margin-top:1px;}
.trust-left .btn-pill{margin-top:36px;}

/* PROOF 섹션 (대표 성과) */
.proof{background:var(--canvas);}
.proof .head{margin-bottom:8px;}
.proof-sample{display:inline-block;margin-left:8px;font-family:var(--ff-ko);font-weight:500;font-size:var(--fs-xs);color:var(--muted-2);border:1px solid var(--hair);border-radius:999px;padding:3px 10px;vertical-align:middle;}
.proof-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;}
.pc{background:var(--card-panel-bg);border:1px solid var(--card-panel-border);border-radius:var(--radius-md);padding:24px 24px 22px;transition:border-color .3s,transform .3s;}
.pc:hover{border-color:rgba(2,112,255,.42);transform:translateY(-3px);}
.pc-top{display:flex;flex-direction:column;gap:5px;margin-bottom:18px;}
.pc-cat{font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-sm);color:var(--text);}
.pc-ch{font-family:var(--ff-ko);font-weight:500;font-size:var(--fs-xs);color:var(--color-brand-light);}
.pc-metric{display:flex;align-items:baseline;gap:10px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,.09);}
.pc-metric b{font-family:var(--ff-serif);font-weight:500;font-size:38px;line-height:1;color:var(--accent);}
.pc-metric span{font-family:var(--ff-ko);font-weight:500;font-size:var(--fs-xs);color:var(--muted);}
.pc-desc{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-sm);line-height:1.55;color:var(--muted);word-break:keep-all;}
.proof-logos{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:34px;padding-top:28px;border-top:1px solid var(--hair);}
.pl-label{font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-sm);color:rgba(255,255,255,.75);}
.pl-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.pl-chip{font-family:var(--ff-ko);font-weight:500;font-size:var(--fs-sm);color:rgba(255,255,255,.72);background:rgba(255,255,255,.05);border:1px solid var(--hair);border-radius:999px;padding:8px 16px;}
.pl-more{font-family:var(--ff-en);font-weight:600;font-size:var(--fs-xs);color:var(--muted-2);}
@media(max-width:900px){.proof-cases{grid-template-columns:1fr;}}

/* HOW 오빗 중앙: 3D 광택 → 모노·플랫(MOODFIX B: 하이라이트 뭉갬 밝기↑·대비↓, 블루글로우 제거) */
.orbit-center .oc-img{filter:grayscale(1) brightness(1.32) contrast(.82);opacity:.9;}

/* HERO 헤드라인: 태블릿(≤1200px)에서 nowrap 잘림 방지 */
@media(max-width:1200px){.hero-h1{white-space:normal;}}

/* a11y: 저강조 텍스트 대비 상향 */
.stat-note{color:rgba(255,255,255,.55);}
.dm-lab{color:rgba(255,255,255,.5);}

/* TRUST 밑 브랜드 스트립 — 별도 블록(섹션 밖), 토글 없이 항상 노출 */
/* 05b 함께한 브랜드 — 다른 ABOUT 섹션과 동일한 풀폭 레이아웃(박스/카드 없음).
   섹션 헤딩은 공통 .h-section 토큰, 콘텐츠는 .container 폭 안에서 그대로 흐른다.
   기존 카드(border/background/radius/padding)는 제거하고, 2행 반대방향 마퀴는 유지. */
.brandwall{background:var(--canvas);padding:150px 0;}
/* 로고월 마퀴 — 2행 반대방향 무한 가로 스크롤(1행 왼→오, 2행 오→왼).
   각 track = [set]+[복제 set]. -50% 이동 = 정확히 한 set 폭이라 복제본이 원본 자리에 겹쳐 이음새 없이 루프.
   좌우 mask로 가장자리 페이드, hover 시 일시정지, reduced-motion이면 정지 노출(맨 아래 규칙). */
.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-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%);}
}

/* TRUST 하단 신뢰 신호 (브랜드 스트립 + 포트폴리오 링크) */
.trust-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:0;padding-top:30px;border-top:1px solid var(--hair);}
.tf-label{font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-sm);color:rgba(255,255,255,.75);}
.tf-chips{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.trust-foot .chip{font-family:var(--ff-ko);font-weight:500;font-size:var(--fs-sm);color:rgba(255,255,255,.72);background:rgba(255,255,255,.05);border:1px solid var(--hair);border-radius:999px;padding:8px 15px;}
.tf-link{margin-left:auto;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;transition:color .2s,gap .2s;}
.tf-link:hover{color:var(--text);gap:11px;}
.tf-link .arr{font-family:var(--ff-en);font-weight:600;}
@media(max-width:900px){.trust-foot{gap:12px;}.tf-link{margin-left:0;}}

/* ============================================================
   ABOUT — 신규 6섹션 (2026-07-08c)
   채널네트워크 / 대표인사말 / 4대서비스 / 전담팀 / 인사이트 / FAQ
   다크 배경 + 블루(#0270ff), 큰 타이포. 핵심 수치는 Inter 800 산세리프.
   ============================================================ */

/* 샘플 표기 pill (여러 섹션 공용) */
.cnet-sample{display:inline-block;margin-left:8px;font-family:var(--ff-ko);font-weight:500;
  font-size:var(--fs-xs);color:var(--color-brand-light);background:rgba(2,112,255,.10);
  border:1px solid rgba(2,112,255,.34);border-radius:999px;padding:3px 11px;
  vertical-align:middle;letter-spacing:0;white-space:nowrap;}

/* ---------- CHANNEL NETWORK ---------- */
.cnet{background:var(--canvas);}
.cnet .lead{max-width:820px;word-break:keep-all;}
.cnet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px;}
.cn-card{background:var(--card-panel-bg);border:1px solid var(--card-panel-border);
  border-radius:var(--radius-md);padding:26px 24px 24px;display:flex;flex-direction:column;
  transition:border-color .3s,transform .3s;}
.cn-card:hover{border-color:rgba(2,112,255,.42);transform:translateY(-3px);}
.cn-label{font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-md);color:var(--text);letter-spacing:-.3px;}
.cn-label-sub{font-weight:400;font-size:var(--fs-xs);color:var(--muted);letter-spacing:0;}
.cn-num{font-family:var(--ff-en);font-weight:800;font-size:46px;line-height:1;color:var(--text);
  letter-spacing:-1.5px;margin:16px 0 14px;}
.cn-num .cn-unit{font-family:var(--ff-ko);font-weight:500;font-size:var(--fs-sm);color:var(--muted);
  letter-spacing:0;margin-left:4px;}
.cn-bar{height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;}
.cn-bar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--color-brand),var(--color-brand-soft));box-shadow:0 0 14px rgba(2,112,255,.5);}
.cn-desc{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-sm);line-height:1.55;
  color:var(--muted);margin-top:16px;word-break:keep-all;}
.cnet-sum{display:flex;align-items:center;flex-wrap:wrap;gap:18px 28px;margin-top:40px;
  padding:28px 32px;border:1px solid rgba(2,112,255,.28);border-radius:var(--radius-card);
  background:linear-gradient(180deg,rgba(2,112,255,.08),rgba(2,112,255,.02));}
.cn-sum-item{display:flex;align-items:baseline;gap:12px;}
.cn-sum-big{font-family:var(--ff-en);font-weight:800;font-size:56px;line-height:1;
  letter-spacing:-2px;color:var(--accent);}
.cn-sum-item--alt .cn-sum-big{color:var(--text);}
.cn-sum-lab{font-family:var(--ff-ko);font-weight:500;font-size:var(--fs-md);color:rgba(255,255,255,.82);}
.cn-sum-lab b{font-weight:700;color:var(--text);}
.cn-sum-plus{font-family:var(--ff-en);font-weight:400;font-size:34px;color:var(--muted-2);}
.cn-sum-note{flex:1 1 100%;font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-xs);
  color:rgba(255,255,255,.5);margin:0;padding-top:6px;border-top:1px solid var(--hair);word-break:keep-all;}
@media(max-width:1080px){.cnet-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.cnet-grid{grid-template-columns:1fr;}
  .cn-sum-big{font-size:42px;}.cn-sum-plus{font-size:26px;}}

/* ---------- CHANNEL NETWORK — 와플 비교 D (waffle chart) ----------
   10×10=100칸 격자를 아래→위로 %만큼 채우는 진짜 와플차트. 축 3개 × 각 축마다
   일반 대행사(회색, 낮게) vs 이노앤엠(블루, 높게) 페어. 색은 브랜드 블루(#0270ff)와
   회색(rgba(255,255,255,.24)) 2톤. 칸 채움은 js/about.js buildWaffle 담당.
   경쟁사 실수치 없음 — dmW-note 각주로 개념적 예시임을 명시. */
.cnet-waffle{margin-top:52px;}
.dmW-panel{border:1px solid var(--hair);border-radius:20px;padding:34px 36px 32px;
  background:linear-gradient(160deg,rgba(2,112,255,.05),rgba(255,255,255,.01));}
.dmW-tag{display:inline-block;font-family:var(--ff-en);font-weight:700;font-size:11px;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--accent);margin-bottom:8px;}
.dmW-msg{font-family:var(--ff-ko);font-weight:700;font-size:20px;line-height:1.55;
  color:rgba(255,255,255,.92);margin-bottom:28px;padding-bottom:24px;
  border-bottom:1px solid var(--hair);word-break:keep-all;}
.dmW-msg b{color:var(--accent);}

.wf-grid{display:grid;gap:3px;grid-template-columns:repeat(10,1fr);}
.wf-cell{width:100%;aspect-ratio:1/1;border-radius:2px;}
.wf-cell--a{background:#0270ff;}
.wf-cell--empty{background:transparent;border:1px solid rgba(255,255,255,.08);}
.wf-cell--out{background:rgba(255,255,255,.24);}

/* -- 와플 비교 행: 축 3개를 나란히, 각 축 안에 대행사 vs 이노앤엠 와플 페어 -- */
.dmWF-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:4px;}
.dmWF-axis{min-width:0;border:1px solid var(--hair-2);border-radius:16px;
  padding:22px 18px 20px;background:rgba(255,255,255,.02);}
.dmWF-axis-lab{font-family:var(--ff-ko);font-weight:700;font-size:14.5px;line-height:1.4;
  color:#fff;text-align:center;word-break:keep-all;min-height:40px;display:flex;
  align-items:center;justify-content:center;}
.dmWF-pair{display:flex;align-items:flex-end;justify-content:center;gap:18px;margin-top:16px;}
.dmWF-item{flex:1 1 0;max-width:118px;text-align:center;}
.dmWF-item .wf-grid{width:100%;}
.dmWF-pct{margin-top:12px;font-family:var(--ff-en);font-weight:800;font-size:26px;line-height:1;
  color:rgba(255,255,255,.55);letter-spacing:-.5px;}
.dmWF-pct span{font-size:14px;font-weight:700;margin-left:1px;}
.dmWF-pct--us{color:var(--accent);font-size:30px;}
.dmWF-plab{margin-top:6px;font-family:var(--ff-ko);font-weight:600;font-size:12px;
  color:var(--muted);word-break:keep-all;}
.dmWF-plab span{display:block;font-weight:400;font-size:10.5px;color:var(--muted-2);margin-top:1px;}
.dmWF-plab--us{color:rgba(255,255,255,.88);}

.dmWF-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 26px;
  margin-top:26px;list-style:none;padding:0;}
.dmWF-legend li{display:flex;align-items:center;gap:7px;font-family:var(--ff-ko);
  font-weight:500;font-size:12.5px;color:var(--muted);}
.dmWF-legend-sw{width:11px;height:11px;border-radius:3px;flex:none;}
.dmWF-legend-sw--us{background:#0270ff;}
.dmWF-legend-sw--agency{background:rgba(255,255,255,.24);}

.dmW-note{margin-top:26px;padding-top:20px;border-top:1px solid var(--hair);
  font-family:var(--ff-ko);font-weight:400;font-size:12.5px;line-height:1.65;
  color:var(--muted-2);word-break:keep-all;}
.dmW-note b{color:rgba(255,255,255,.75);font-weight:700;}

@media(max-width:900px){
  .dmW-panel{padding:28px 26px 26px;}
  .dmW-msg{font-size:18px;margin-bottom:24px;padding-bottom:20px;}
  .dmWF-row{grid-template-columns:1fr;gap:18px;}
  .dmWF-item{max-width:150px;}
}
@media(max-width:560px){
  .cnet-waffle{margin-top:40px;}
  .dmW-panel{padding:24px 20px 22px;}
  .dmW-msg{font-size:16px;}
  .dmWF-pair{gap:12px;}
}

/* ---------- FOUNDER MESSAGE ---------- */
.founder{background:var(--canvas);border-top:1px solid var(--hair);}
.founder-quote{max-width:900px;margin:52px auto 0;text-align:center;}
.fq-lead{font-family:var(--ff-serif);font-style:italic;font-weight:500;
  font-size:clamp(24px,3vw,40px);line-height:1.4;color:var(--text);letter-spacing:-.5px;
  word-break:keep-all;}
.fq-body{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-md);line-height:1.85;
  color:rgba(255,255,255,.78);margin-top:32px;word-break:keep-all;}
.fq-body b{font-weight:700;color:var(--text);}
.fq-mission{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-lg);line-height:1.7;
  color:var(--text);margin-top:28px;word-break:keep-all;}
.fq-mission b{font-weight:700;color:var(--accent);}
.fq-sign{font-family:var(--ff-ko);font-weight:500;font-size:var(--fs-sm);color:var(--muted);
  margin-top:32px;letter-spacing:.3px;}
@media(max-width:560px){.fq-br{display:none;}}

/* ---------- WHAT WE DO (4대 서비스) ---------- */
.svc4{background:var(--canvas);}
.svc4-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px;}
.svc4-card{display:flex;flex-direction:column;text-decoration:none;
  background:var(--card-panel-bg);border:1px solid var(--card-panel-border);
  border-radius:var(--radius-md);padding:28px 26px 26px;transition:border-color .3s,transform .3s,background .3s;}
.svc4-card:hover{border-color:rgba(2,112,255,.5);transform:translateY(-4px);
  background:rgba(2,112,255,.06);}
.svc4-num{font-family:var(--ff-serif);font-style:italic;font-weight:500;font-size:var(--fs-2xl);
  color:var(--accent);line-height:1;}
.svc4-t{font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-lg);color:var(--text);
  letter-spacing:-.5px;margin:18px 0 12px;line-height:1.35;word-break:keep-all;}
.svc4-d{flex:1;font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-sm);line-height:1.6;
  color:var(--muted);word-break:keep-all;}
.svc4-arr{font-family:var(--ff-ko);font-weight:500;font-size:var(--fs-sm);color:var(--color-brand-light);
  margin-top:20px;display:inline-flex;align-items:center;gap:6px;transition:gap .2s,color .2s;}
.svc4-arr b{font-family:var(--ff-en);font-weight:600;}
.svc4-card:hover .svc4-arr{color:var(--text);gap:10px;}
@media(max-width:1080px){.svc4-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.svc4-grid{grid-template-columns:1fr;}}

/* ---------- DEDICATED TEAM ---------- */
.team{background:var(--canvas);border-top:1px solid var(--hair);}
.team-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:56px;}
.tm-card{background:var(--card-panel-bg);border:1px solid var(--card-panel-border);
  border-radius:14px;padding:24px 20px;display:flex;flex-direction:column;
  transition:border-color .3s,transform .3s;}
.tm-card:hover{border-color:rgba(2,112,255,.42);transform:translateY(-3px);}
.tm-role{font-family:var(--ff-en);font-weight:800;font-size:var(--fs-lg);color:var(--accent);
  letter-spacing:-.5px;line-height:1;}
.tm-t{font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-md);color:var(--text);
  letter-spacing:-.4px;margin:16px 0 10px;word-break:keep-all;}
.tm-d{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-sm);line-height:1.55;
  color:var(--muted);word-break:keep-all;}
@media(max-width:1080px){.team-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.team-grid{grid-template-columns:1fr;}}

/* ---------- INSIGHT (왜 바이럴이 통하는가) ---------- */
.insight{background:var(--canvas);border-top:1px solid var(--hair);}
.insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px;}
.ins-card{background:var(--card-panel-bg);border:1px solid var(--card-panel-border);
  border-radius:var(--radius-card);padding:34px 30px;}
.ins-no{font-family:var(--ff-en);font-weight:800;font-size:var(--fs-2xl);color:rgba(2,112,255,.55);
  letter-spacing:-1px;line-height:1;}
.ins-t{font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-xl);color:var(--text);
  letter-spacing:-.5px;margin:20px 0 14px;line-height:1.35;word-break:keep-all;}
.ins-d{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-base);line-height:1.7;
  color:rgba(255,255,255,.72);word-break:keep-all;}
@media(max-width:900px){.insight-grid{grid-template-columns:1fr;}}

/* ---------- FAQ ---------- */
.faq{background:var(--canvas);border-top:1px solid var(--hair);}
.faq-list{max-width:920px;margin:48px auto 0;}
.faq-item{border-bottom:1px solid var(--hair);}
.faq-item:first-child{border-top:1px solid var(--hair);}
.faq-q{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:26px 4px;font-family:var(--ff-ko);font-weight:700;
  font-size:clamp(17px,1.6vw,21px);color:var(--text);letter-spacing:-.4px;word-break:keep-all;
  transition:color .2s;}
.faq-q::-webkit-details-marker{display:none;}
.faq-q:hover{color:var(--color-brand-light);}
.faq-ic{flex:none;position:relative;width:20px;height:20px;}
.faq-ic::before,.faq-ic::after{content:"";position:absolute;background:var(--accent);
  border-radius:2px;transition:transform .28s ease,opacity .28s ease;}
.faq-ic::before{top:9px;left:0;width:20px;height:2px;}
.faq-ic::after{top:0;left:9px;width:2px;height:20px;}
.faq-item[open] .faq-ic::after{transform:scaleY(0);opacity:0;}
.faq-a{overflow:hidden;padding:0 4px 26px;}
.faq-a p{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-base);line-height:1.75;
  color:rgba(255,255,255,.72);margin:0;word-break:keep-all;max-width:800px;}
.faq-a b{font-weight:700;color:var(--color-brand-light);}
.faq-item[open] .faq-a{animation:faqReveal .32s ease;}
@keyframes faqReveal{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){.faq-item[open] .faq-a{animation:none;}}

/* ============================================================
   ABOUT — 6섹션 디벨롭 (2026-07-08d)
   도표·데이터·실사·목업·에셋. 모두 CSS/SVG 무료, 실사는 기존 에셋 재활용.
   ============================================================ */

/* ---------- (1) CHANNEL NETWORK — 채널 믹스 스택 바 ---------- */
.cmix{margin-top:52px;padding:26px 30px 24px;border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius-md);background:rgba(255,255,255,.025);}
.cmix-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:10px 20px;margin-bottom:18px;}
.cmix-title{font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-md);color:var(--text);letter-spacing:-.3px;}
.cmix-total{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-sm);color:var(--muted);}
.cmix-total b{font-family:var(--ff-en);font-weight:800;font-size:var(--fs-lg);color:var(--text);letter-spacing:-.5px;margin-right:4px;}
.cmix-total-sub{margin-left:10px;font-size:var(--fs-xs);color:var(--muted-2);}
.cmix-bar{display:flex;height:52px;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.05);}
.cmix-seg{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;transition:filter .25s;}
.cmix-seg em{font-family:var(--ff-en);font-weight:700;font-style:normal;font-size:13px;color:var(--text);letter-spacing:-.3px;text-shadow:0 1px 3px rgba(0,0,0,.35);white-space:nowrap;}
.cmix-seg:hover{filter:brightness(1.12);}
.cmix-seg--1{background:var(--color-brand);}
.cmix-seg--2{background:var(--color-brand-mid1);}
.cmix-seg--3{background:var(--color-brand-mid2);}
.cmix-seg--4{background:var(--color-brand-light);}
.cmix-seg--4 em{color:#0a1a33;text-shadow:none;}
.cmix-seg--x{background:repeating-linear-gradient(45deg,rgba(255,255,255,.14),rgba(255,255,255,.14) 7px,rgba(255,255,255,.07) 7px,rgba(255,255,255,.07) 14px);border-left:2px solid var(--canvas);}
.cmix-seg--x em{color:var(--text);}
.cmix-legend{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin:16px 0 0;padding:0;}
.cmix-legend li{display:flex;align-items:center;gap:8px;font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-xs);color:var(--muted);}
.cmix-legend b{font-family:var(--ff-en);font-weight:700;color:var(--text);margin-left:2px;}
.cmix-dot{width:11px;height:11px;border-radius:3px;flex:none;}
.cmix-dot--1{background:var(--color-brand);}.cmix-dot--2{background:var(--color-brand-mid1);}
.cmix-dot--3{background:var(--color-brand-mid2);}.cmix-dot--4{background:var(--color-brand-light);}
.cmix-dot--x{background:repeating-linear-gradient(45deg,rgba(255,255,255,.5),rgba(255,255,255,.5) 3px,rgba(255,255,255,.2) 3px,rgba(255,255,255,.2) 6px);}
@media(max-width:560px){
  .cmix-bar{height:44px;}
  .cmix-seg--3 em,.cmix-seg--4 em{display:none;}
}

/* ---------- (1) CHANNEL NETWORK — 직접 운영 채널 미니 월 ---------- */
.cnet-wall{margin-top:44px;}
.cw-head{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;}
.cw-label{font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-sm);color:rgba(255,255,255,.75);}
.cw-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.cw-marquee + .cw-marquee{margin-top:12px;}
.cw-track{display:flex;gap:12px;width:max-content;will-change:transform;}
.cw-marquee--a .cw-track{animation:cwScroll 46s linear infinite;}
.cw-marquee--b .cw-track{animation:cwScroll 52s linear infinite reverse;}
.cw-marquee:hover .cw-track{animation-play-state:paused;}
@keyframes cwScroll{to{transform:translateX(-50%);}}
.cw-thumb{flex:0 0 auto;width:96px;height:96px;border-radius:12px;background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.10);}
@media(max-width:560px){.cw-thumb{width:76px;height:76px;}}
@media(prefers-reduced-motion:reduce){
  .cw-marquee--a .cw-track,.cw-marquee--b .cw-track{animation:none;transform:none;}
}

/* ---------- (2) FOUNDER — 2단 (실사 + 인용문) ---------- */
.founder-layout{display:grid;grid-template-columns:0.82fr 1fr;gap:48px;align-items:stretch;margin:52px auto 0;max-width:1100px;}
.founder-photo{position:relative;margin:0;border-radius:var(--radius-card);overflow:hidden;min-height:420px;border:1px solid rgba(255,255,255,.10);}
.fp-img{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(1) contrast(1.02) brightness(.9);}
.founder-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,7,9,0) 42%,rgba(6,7,9,.78) 100%);}
.fp-cap{position:absolute;left:22px;bottom:20px;z-index:1;font-family:var(--ff-ko);font-weight:500;font-size:var(--fs-xs);color:rgba(255,255,255,.82);letter-spacing:.2px;}
.fp-cap-k{color:var(--accent);font-weight:700;}
.founder-layout .founder-quote{max-width:none;margin:0;text-align:left;align-self:center;}
.founder-layout .fq-lead{font-size:clamp(22px,2.4vw,32px);line-height:1.42;}
/* fq-br 유지: 원문에 br 양옆 공백이 없어 숨기면 어절이 붙는다(이유를→아무도). 절 경계 줄바꿈 그대로. */
@media(max-width:900px){
  .founder-layout{grid-template-columns:1fr;gap:30px;}
  .founder-photo{min-height:280px;}
  .founder-layout .founder-quote{text-align:center;}
}

/* ---------- (3) WHAT WE DO — 카드 썸네일 ---------- */
.svc4-card{padding:0;overflow:hidden;}
.svc4-thumb{display:block;height:158px;background-size:cover;background-position:center;border-bottom:1px solid rgba(255,255,255,.08);transition:transform .4s ease;}
.svc4-card:hover .svc4-thumb{transform:scale(1.05);}
.svc4-body{display:flex;flex-direction:column;flex:1;padding:24px 24px 24px;}
.svc4-body .svc4-t{margin-top:14px;}
@media(max-width:560px){.svc4-thumb{height:180px;}}

/* ---------- (4) TEAM — 실사 밴드 ---------- */
.team-band{position:relative;margin:52px 0 0;border-radius:var(--radius-card);overflow:hidden;height:280px;border:1px solid rgba(255,255,255,.10);}
.tb-img{position:absolute;inset:0;background-size:cover;background-position:center 32%;}
.team-band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,7,9,.72) 0%,rgba(6,7,9,.28) 46%,rgba(6,7,9,.55) 100%);}
.tb-cap{position:absolute;left:34px;bottom:28px;z-index:1;font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-lg);color:rgba(255,255,255,.9);letter-spacing:-.3px;word-break:keep-all;}
.tb-cap b{font-weight:700;color:var(--text);}
.team-grid{margin-top:24px;}
@media(max-width:560px){.team-band{height:200px;}.tb-cap{left:20px;bottom:18px;font-size:var(--fs-md);}}

/* ---------- (5) INSIGHT — 확산 flow 도표 ---------- */
.ins-flow{margin-top:44px;padding:30px 30px 26px;border:1px solid rgba(255,255,255,.10);border-radius:var(--radius-card);background:radial-gradient(120% 140% at 8% 50%,rgba(2,112,255,.10),rgba(255,255,255,.02) 60%);}
.if-svg{display:block;width:100%;height:auto;max-height:250px;}
.if-seed{fill:var(--accent);filter:drop-shadow(0 0 10px rgba(2,112,255,.7));animation:ifPulse 2.6s ease-in-out infinite;}
.if-hub circle{fill:rgba(2,112,255,.24);stroke:var(--accent);stroke-width:1.6;}
@keyframes ifPulse{0%,100%{opacity:1;}50%{opacity:.72;}}
.if-links path{stroke-dasharray:4 5;animation:ifDash 14s linear infinite;}
@keyframes ifDash{to{stroke-dashoffset:-90;}}
.if-stages{display:flex;align-items:stretch;gap:14px;margin-top:22px;padding-top:22px;border-top:1px solid var(--hair);}
.if-st{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
.if-st-n{font-family:var(--ff-en);font-weight:800;font-size:var(--fs-sm);color:var(--accent);letter-spacing:.5px;}
.if-st-t{font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-md);color:var(--text);letter-spacing:-.3px;}
.if-st-d{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-xs);line-height:1.55;color:var(--muted);word-break:keep-all;}
.if-st-arr{align-self:center;font-family:var(--ff-en);font-weight:400;font-size:20px;color:var(--muted-2);flex:none;}
.insight .insight-grid{margin-top:24px;}
@media(max-width:760px){
  .if-stages{flex-direction:column;gap:16px;}
  .if-st-arr{transform:rotate(90deg);}
}
@media(prefers-reduced-motion:reduce){
  .if-seed{animation:none;}.if-links path{animation:none;stroke-dasharray:none;}
}

/* ============================================================
   REASON(founder) — 좌우 2열 sticky 복원 (대표 확정 방향 2026-07-09)
   왼쪽 = 헤드라인 "우리가 직접 하는 reason." → position:sticky로
   섹션 스크롤 동안 뷰포트 세로 중앙에 붙박이(데스크탑 한 줄 nowrap).
   오른쪽 = 01 문제 → 02 전환 → 03 답 3스텝이 자연 스크롤에 하나씩
   등장(IntersectionObserver fade+slide-up, js/about.js). 휠 가로채기 없음.
   모바일(≤900px)에서는 세로 스택 + sticky 해제.
   (이전 "중앙 단일컬럼" 시안은 복원 폐기됨.)
   ============================================================ */
/* 왼쪽 컬럼은 오른쪽(3스텝) 높이만큼 stretch. 그 안의 헤드라인이 sticky로
   뷰포트 세로 중앙(top:calc(50vh…))에 붙박여 섹션 스크롤 동안 유지된다.
   (컬럼 자체에 100vh를 주지 않아 섹션 높이가 부풀지 않음.) */
/* 좌우 2단: 왼쪽 0.8fr(sticky 헤드라인) / 오른쪽 1.2fr(3스텝). 시안1 확정값. */
.reason-grid{display:grid;grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr);
  gap:80px;align-items:start;}

/* 왼쪽: sticky 헤드라인 — 뷰포트 세로 중앙 고정 · 디자인시스템 h-section 60px(--fs-5xl) */
.reason-left{min-width:0;}
#founder .head{position:sticky;top:calc(50vh - 1.9em);text-align:left;margin:0;}
#founder .reason-head{white-space:normal;word-break:keep-all;text-align:left;margin:20px 0 0;
  font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-5xl);
  line-height:var(--lh-tight);letter-spacing:var(--ls-tight);}

/* 오른쪽: 3스텝 — 세로 커넥터 라인 + 원형 번호뱃지, 스크롤 진입 시 순차 리빌 */
.reason-right{min-width:0;padding:6px 0;}
.rsteps{display:flex;flex-direction:column;}
.rstep{padding:44px 0 44px 40px;position:relative;border-top:1px solid var(--hair);
  opacity:0;transform:translateY(30px);
  transition:opacity .75s cubic-bezier(.16,.8,.24,1),transform .75s cubic-bezier(.16,.8,.24,1);}
.rstep:first-child{border-top:0;padding-top:8px;}
.rstep.is-visible{opacity:1;transform:translateY(0);}
/* 세로 커넥터 라인 — 뱃지 중앙(left:22px)을 지나며 스텝을 잇는다 */
.rstep::after{content:"";position:absolute;left:22px;top:0;bottom:0;width:1px;background:var(--hair);}
.rstep:first-child::after{top:20px;}
.rstep:last-child::after{display:none;}

.rstep-head{position:relative;z-index:1;display:flex;align-items:center;gap:14px;margin:0 0 24px -40px;}
.rstep-badge{flex:none;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--canvas);border:1px solid var(--hair-2);
  font-family:var(--ff-serif);font-style:italic;font-weight:500;font-size:17px;color:rgba(255,255,255,.6);}
.rstep[data-step="3"] .rstep-badge{border-color:var(--accent);color:var(--accent);
  box-shadow:0 0 0 4px rgba(2,112,255,.10);}
.rstep-kicker{font-family:var(--ff-en);font-weight:700;font-size:11px;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--muted-2);white-space:nowrap;}
.rstep[data-step="3"] .rstep-kicker{color:var(--accent);}
/* MOODFIX B: step03(답) → 파란 결론 카드로 마감. 커넥터 라인 끊고 카드로 분리. */
.rstep[data-step="3"]{
  margin-top:20px;padding:36px 40px;border-top:0;
  background:linear-gradient(160deg,rgba(2,112,255,.06),rgba(255,255,255,.015));
  border:1px solid rgba(2,112,255,.18);border-radius:18px;
}
.rstep[data-step="3"]::after{display:none;}
.rstep[data-step="3"] .fq-mission,.rstep[data-step="3"] .fq-sign{max-width:none;}

.rstep .fq-lead{margin:0;text-align:left;max-width:none;
  font-size:clamp(22px,1.9vw,27px);line-height:1.5;letter-spacing:-.3px;}
.rstep .fq-mission{margin:0;text-align:left;max-width:640px;}
.rstep .fq-sign{margin-top:16px;}
.rstep-split{display:flex;gap:34px;align-items:center;}
.rstep-photo.founder-photo{flex:0 0 230px;width:230px;height:180px;min-height:0;margin:0;}
.rstep-text{flex:1;min-width:0;}
.rstep-text .fq-body{margin:0;text-align:left;}
.clause{display:inline-block;background:rgba(2,112,255,.10);border:1px solid rgba(2,112,255,.28);
  border-radius:6px;padding:0 7px;box-decoration-break:clone;-webkit-box-decoration-break:clone;}

@media(max-width:900px){
  /* 세로 스택 + sticky 해제: 헤드라인 위, 3스텝 아래 · 커넥터 라인 제거 */
  .reason-grid{grid-template-columns:1fr;gap:24px;}
  #founder .head{position:static;top:auto;}
  #founder .reason-head{font-size:var(--fs-3xl);}
  .reason-right{padding:8px 0 0;}
  .rstep{padding:44px 0;}
  .rstep::after{display:none;}
  .rstep-head{margin-left:0;}
  .rstep-split{flex-direction:column;align-items:stretch;}
  .rstep-photo.founder-photo{width:100%;flex:none;height:200px;}
}
@media(prefers-reduced-motion:reduce){
  .rstep{transition:none;}
}

/* ---------- (6) TRUST — 미니 리포트 대시보드 목업 ---------- */
.trust-dash{margin-top:52px;border:1px solid rgba(255,255,255,.10);border-radius:var(--radius-md);background:rgba(255,255,255,.025);overflow:hidden;}
.td-head{display:flex;align-items:center;gap:12px;padding:18px 24px;border-bottom:1px solid var(--hair);}
.td-title{font-family:var(--ff-ko);font-weight:700;font-size:var(--fs-sm);color:var(--text);letter-spacing:-.3px;}
.td-body{display:grid;grid-template-columns:1fr 300px;gap:0;}
.td-chart{padding:22px 24px 18px;border-right:1px solid var(--hair);}
.td-chart-lab{display:block;font-family:var(--ff-ko);font-weight:500;font-size:var(--fs-xs);color:var(--muted);margin-bottom:12px;}
.td-svg{display:block;width:100%;height:150px;}
.td-grid{stroke:rgba(255,255,255,.07);stroke-width:1;}
.td-area{fill:rgba(2,112,255,.14);}
.td-line{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 3px 8px rgba(2,112,255,.4));}
.td-pt circle{fill:#0a0b0d;stroke:var(--accent);stroke-width:2;}
.td-x{display:flex;justify-content:space-between;margin-top:8px;font-family:var(--ff-en);font-weight:500;font-size:10px;color:var(--muted-2);letter-spacing:.4px;}
.td-kpis{display:flex;flex-direction:column;}
.td-kpi{flex:1;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:16px 24px;border-bottom:1px solid var(--hair);}
.td-kpi:last-child{border-bottom:0;}
.td-k-num{font-family:var(--ff-en);font-weight:800;font-size:26px;color:var(--text);letter-spacing:-1px;line-height:1;}
.td-k-num--accent{color:var(--accent);}
.td-k-lab{font-family:var(--ff-ko);font-weight:400;font-size:var(--fs-xs);color:var(--muted);}
@media(max-width:760px){
  .td-body{grid-template-columns:1fr;}
  .td-chart{border-right:0;border-bottom:1px solid var(--hair);}
  .td-kpis{flex-direction:row;}
  .td-kpi{flex:1;border-bottom:0;border-right:1px solid var(--hair);text-align:center;align-items:center;}
  .td-kpi:last-child{border-right:0;}
}
@media(max-width:480px){.td-kpis{flex-direction:column;}.td-kpi{border-right:0;border-bottom:1px solid var(--hair);text-align:left;align-items:flex-start;}.td-kpi:last-child{border-bottom:0;}}