/* ==========================================================================
   Growth Villain — Dark/Orange design system (Figma: Growth Villain — Portfolio Creative Visual)
   Shared stylesheet for the 9-page portfolio (index, planning, viral, data,
   performance, commerce, leadership, career, contact).
   ========================================================================== */

:root{
  --bg:#060708;
  --bg-alt:#08090b;
  --ink:#f5f2ed;
  --muted:#adb2c0;
  --muted-2:#d3d5dc;
  --accent:#ff5233;
  --accent-soft:rgba(255,82,51,.12);
  --peach:#f5cca8;
  --card-0:#0e0f11;
  --card-1:#13141a;
  --card-2:#1a1b21;
  --card-3:#0b0c0f;
  --border:rgba(48,51,59,.75);
  --border-soft:rgba(48,51,59,.55);
  --grid-line:rgba(255,255,255,.045);
  --font-display:'Noto Sans KR',-apple-system,BlinkMacSystemFont,sans-serif;

  /* legacy variable names referenced by inline styles carried over from the old page */
  --color-primary:#ff5233;
  --color-primary-on-dark:#ff5233;
  --color-ink:#f5f2ed;
  --color-ink-muted-48:#9499a6;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.dpage{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-display);
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}

.dbg-video{
  position:fixed;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-1;opacity:.22;pointer-events:none;
}
@media (prefers-reduced-motion:reduce){.dbg-video{display:none}}

/* faint vertical grid, matches the Figma canvas ruler */
body.dpage::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px 116px);
  background-position:80px 0;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
ul{margin:0;padding:0;list-style:none}
p{margin:0}

/* ---------- nav ---------- */
.dnav{
  position:sticky;top:0;z-index:40;
  background:rgba(6,7,8,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-soft);
}
.dnav-in{
  max-width:1280px;margin:0 auto;padding:0 32px;
  height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.dnav .name{font-weight:800;font-size:16px;letter-spacing:.2px;white-space:nowrap}
.dnav ul{display:flex;gap:4px;flex-wrap:wrap}
.dnav ul li a{
  display:inline-block;padding:8px 12px;border-radius:999px;
  font-size:13.5px;color:var(--muted);font-weight:500;white-space:nowrap;
  transition:color .15s, background .15s;
}
.dnav ul li a:hover{color:var(--ink)}
.dnav ul li a.active{color:var(--ink);background:var(--accent-soft)}

/* ---------- layout shells ---------- */
.dwrap{max-width:1280px;margin:0 auto;padding:0 32px;position:relative;z-index:1}

/* single-page section shells (formerly separate pages) — each keeps its own
   positioning context for the decorative orb/particles, plus a chapter
   divider so the reading flow never feels like it "cuts" between pages */
.dpagesec{position:relative;scroll-margin-top:76px}
.dpagesec + .dpagesec{border-top:1px solid var(--border-soft)}

.dorb{
  position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle, rgba(255,82,51,.16), rgba(255,82,51,0) 70%);
  filter:blur(6px);
}
.dorb.tr{top:-160px;right:-80px;width:430px;height:430px}
.dorb.br{bottom:-140px;right:120px;width:360px;height:360px;opacity:.7}

.dhero{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.05fr 1fr;gap:56px;
  padding:130px 0 100px;
  align-items:start;
}
.dhero.single{grid-template-columns:1fr;max-width:680px}
@media (max-width:960px){
  .dhero{grid-template-columns:1fr;padding:88px 0 56px}
}

/* flat fact/bullet list — minimal, reused across sections */
.dlist{margin-top:14px}
.dlist li{color:var(--muted);font-size:14.5px;line-height:1.85;padding-left:16px;position:relative}
.dlist li::before{content:"·";position:absolute;left:0;color:var(--accent)}
.dlist.big li{color:var(--ink);font-size:15.5px;font-weight:500}

.deyebrow{
  color:var(--accent);font-size:16px;font-weight:600;letter-spacing:1.2px;margin:0 0 18px;
}
.dline{width:280px;max-width:100%;height:2px;background:rgba(255,82,51,.9);margin-bottom:34px}
.dh1{
  font-weight:900;letter-spacing:-1.4px;line-height:1.16;
  font-size:clamp(32px,4.4vw,58px);
  margin:0 0 30px;color:var(--ink);
}
.dsub{color:var(--muted);font-size:19px;line-height:1.6;margin:0 0 32px;max-width:520px}
.dclose{color:var(--peach);font-size:16px;line-height:1.65;font-weight:500;margin-top:32px;max-width:560px}

/* pill tags (page 1) */
.dpills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px}
.dpill{
  background:var(--card-0);border:1px solid var(--border);border-radius:20px;
  padding:9px 16px;font-size:13px;font-weight:500;color:var(--ink);
}

/* 2x2 stat grid */
.dstats{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:560px}
@media (max-width:520px){.dstats{grid-template-columns:1fr}}
.dstat{
  background:var(--card-0);border:1px solid var(--border-soft);border-radius:18px;
  padding:18px 20px;
}
.dstat .num{font-size:30px;font-weight:700;line-height:1.2;color:var(--ink)}
.dstat .lbl{font-size:13.5px;color:var(--muted);margin-top:8px}

/* pipeline stepper — flagship automation banner (page 1 top) */
.dpipe{
  position:relative;z-index:1;grid-column:1/-1;
  background:var(--card-1);border:1px solid var(--border);border-radius:24px;
  padding:28px 28px 24px;margin-bottom:8px;
}
.dpipe-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.dpipe-eyebrow{color:var(--accent);font-size:13px;font-weight:700;letter-spacing:1px}
.dpipe-title{font-size:22px;font-weight:800;color:var(--ink);margin-top:4px}
.dpipe-tag{font-size:12.5px;color:var(--muted);background:var(--card-0);border:1px solid var(--border-soft);border-radius:999px;padding:6px 12px;white-space:nowrap}
.dpipe-steps{display:flex;flex-wrap:wrap;align-items:center;gap:0;row-gap:12px}
.dpipe-step{
  display:flex;align-items:center;gap:10px;
  background:var(--card-2);border:1px solid var(--border-soft);border-radius:14px;
  padding:12px 16px;flex:1 1 150px;min-width:150px;
}
.dpipe-step .no{color:var(--accent);font-weight:700;font-size:13px}
.dpipe-step .lb{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35}
.dpipe-arrow{color:var(--accent);font-size:18px;padding:0 10px;flex:0 0 auto}
@media (max-width:700px){.dpipe-arrow{transform:rotate(90deg);padding:2px 0}
  .dpipe-steps{flex-direction:column;align-items:stretch}
  .dpipe-step{flex:1 1 auto}}
.dpipe-note{margin-top:18px;font-size:13.5px;color:var(--muted)}

/* right-side big overview card */
.dcard{
  position:relative;z-index:1;
  background:var(--card-1);border:1px solid var(--border);border-radius:30px;
  padding:34px 32px;
}
.dcard-eyebrow{color:var(--accent);font-size:15px;font-weight:600;letter-spacing:1px;margin-bottom:10px}
.dcard-h2{font-size:clamp(22px,2.4vw,32px);font-weight:800;color:var(--ink);margin-bottom:8px;line-height:1.25}
.dcard-caption{font-size:13px;color:var(--muted);margin-bottom:22px}
.dcard-note{font-size:14px;color:var(--peach);font-weight:500;margin-top:22px;line-height:1.6}

/* numbered items inside dcard */
.ditem{
  position:relative;background:var(--card-2);border:1px solid var(--border-soft);border-radius:20px;
  padding:18px 20px;margin-bottom:14px;
}
.ditem:last-of-type{margin-bottom:0}
.ditem .no{color:var(--accent);font-size:13px;font-weight:600;margin-bottom:6px}
.ditem .t{font-size:18px;font-weight:700;color:var(--ink);margin-bottom:8px}
.ditem .d{font-size:13.5px;color:var(--muted);line-height:1.55}
.ditem.has-shot{padding-right:150px}
.ditem .dph-inline{
  position:absolute;right:16px;top:16px;bottom:16px;width:118px;
  border:1px dashed rgba(255,82,51,.4);border-radius:12px;background:rgba(15,17,19,.6);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;
  font-size:10.5px;color:var(--muted-2);padding:8px;line-height:1.3;
}

/* small abstract line-icon used inside "실제 화면 자리" placeholders — decorative only, never a fake screenshot */
.dph-icon{width:20px;height:20px;flex:0 0 auto;color:var(--accent);opacity:.55;
  animation:diconpulse 2.8s ease-in-out infinite;animation-play-state:paused}
.rv-in .dph-icon{animation-play-state:running}
@keyframes diconpulse{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.9;transform:scale(1.12)}}

/* process step rows (planning/viral/data/performance/commerce/leadership) */
.dstep{
  display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  background:var(--card-2);border:1px solid var(--border-soft);border-radius:18px;
  padding:16px 20px;margin-bottom:12px;
}
.dstep .no{color:var(--accent);font-size:13px;font-weight:600;flex:0 0 auto;padding-top:3px}
.dstep .t{font-size:18px;font-weight:700;color:var(--ink);flex:0 0 auto;min-width:150px}
.dstep .d{font-size:13.5px;color:var(--muted);line-height:1.5;flex:1 1 200px}

/* same placeholder pattern, sized for the flex step rows */
.dstep-shot{
  flex:0 0 100px;align-self:center;min-height:50px;
  border:1px dashed rgba(255,82,51,.4);border-radius:10px;background:rgba(15,17,19,.6);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:6px;font-size:9.5px;color:var(--muted-2);text-align:center;line-height:1.25;
}
.dstep-shot .dph-icon{width:16px;height:16px}
@media (max-width:640px){.dstep-shot{flex-basis:100%}}

/* ambient floating particles near the corner glow — pure decoration, no assets */
.dfloat{position:absolute;border-radius:50%;background:var(--accent);pointer-events:none;z-index:0}
.dfloat.d1{top:60px;right:220px;width:5px;height:5px;opacity:.5;animation:dfloaty 7s ease-in-out infinite}
.dfloat.d2{top:170px;right:120px;width:3px;height:3px;opacity:.35;animation:dfloaty 9s ease-in-out infinite 1.5s}
.dfloat.d3{top:20px;right:340px;width:4px;height:4px;opacity:.4;animation:dfloaty 8s ease-in-out infinite .7s}
@keyframes dfloaty{0%,100%{transform:translate(0,0);opacity:.3}50%{transform:translate(-14px,18px);opacity:.7}}
@media (max-width:960px){.dfloat{display:none}}

/* mini flow chain banner */
.dflow-mini{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  background:var(--card-3);border:1px solid var(--border);border-radius:20px;
  padding:16px 20px;margin:18px 0;
}
.dflow-mini span{font-size:14px;font-weight:700;color:var(--ink)}
.dflow-mini span.on{color:var(--peach)}
.dflow-mini em{color:var(--accent);font-style:normal;font-size:15px;padding:0 4px}

/* dashed real-screenshot placeholder */
.dph{
  border:1px dashed rgba(107,112,125,.72);background:rgba(15,17,19,.5);border-radius:14px;
  min-height:150px;display:flex;align-items:center;justify-content:center;
  color:var(--muted-2);font-size:13px;text-align:center;padding:16px;
}
.dph-label{font-size:13px;color:#adb2bf;margin-bottom:10px;text-align:center}

/* generic evidence sections below the hero+card fold */
.esec{padding:100px 0;border-top:1px solid var(--border-soft);position:relative;z-index:1}
.esec.tight{padding:64px 0}
@media (max-width:640px){.esec{padding:72px 0}}
.eeyebrow{color:var(--accent);font-size:14px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:14px}
.edisplay{font-size:clamp(24px,3vw,38px);font-weight:800;line-height:1.28;margin:0 0 18px;color:var(--ink)}
.edisplay-sm{font-size:clamp(20px,2.2vw,27px);font-weight:800;line-height:1.3;margin:0 0 18px;color:var(--ink)}
.elead{color:var(--muted);font-size:16.5px;line-height:1.7;margin-bottom:8px}
.enote{color:var(--muted);font-size:12.5px;margin-top:14px}
.ecase-sub{font-size:12.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-weight:600}

.egrid{display:grid;gap:20px;margin-top:8px}
.egrid.g2{grid-template-columns:1fr 1fr}
.egrid.g3{grid-template-columns:repeat(3,1fr)}
.egrid.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:860px){.egrid.g3,.egrid.g4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.egrid.g2,.egrid.g3,.egrid.g4{grid-template-columns:1fr}}

.ecard{background:var(--card-0);border:1px solid var(--border-soft);border-radius:18px;padding:26px}
.ecard .k{color:var(--accent);font-size:12.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;margin-bottom:8px}
.ecard .tt{font-size:18px;font-weight:700;color:var(--ink);margin-bottom:8px}
.ecard p{color:var(--muted);font-size:14px;line-height:1.6}
.ecard ul{margin-top:4px}
.ecard li{color:var(--muted);font-size:14px;line-height:1.7;padding-left:14px;position:relative}
.ecard li::before{content:"·";position:absolute;left:0;color:var(--accent)}

.estats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}
.estats.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.estats,.estats.three{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.estats,.estats.three{grid-template-columns:1fr}}
.estat{background:var(--card-0);border:1px solid var(--border-soft);border-radius:16px;padding:18px 20px}
.estat .num{font-size:26px;font-weight:800;color:var(--ink)}
.estat .num em{color:var(--accent);font-style:normal}
.estat .lbl{font-size:13px;color:var(--muted);margin-top:6px}

.ecase{border-top:1px solid var(--border-soft);padding-top:44px;margin-top:44px}
.ecase:first-of-type{border-top:0;margin-top:0;padding-top:0}
.ecno{color:var(--accent);font-size:13px;font-weight:700;letter-spacing:1px;margin-bottom:10px}
.esec h3,.ecase h3{font-size:clamp(19px,2vw,24px);font-weight:800;color:var(--ink);margin:0 0 14px}
.edesc{color:var(--muted);font-size:15px;line-height:1.7;margin-bottom:18px;max-width:820px}

.emrow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
@media (max-width:700px){.emrow{grid-template-columns:1fr}}
.em{background:var(--card-0);border:1px solid var(--border-soft);border-radius:14px;padding:16px 18px}
.em .mv{font-size:19px;font-weight:800;color:var(--ink)}
.em .mv em{color:var(--accent);font-style:normal}
.em .ml{font-size:12.5px;color:var(--muted);margin-top:6px}

.eflow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:20px}
.efstep{background:var(--card-0);border:1px solid var(--border-soft);border-radius:999px;padding:9px 16px;font-size:13px;color:var(--ink);font-weight:500}
.efarr{color:var(--accent);font-size:15px}

.ebbi{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:16px;margin-top:20px;background:var(--card-0);border:1px solid var(--border-soft);border-radius:18px;padding:22px}
@media (max-width:800px){.ebbi{grid-template-columns:1fr}}
.ebbi .lab{color:var(--accent);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px}
.ebbi p,.ebbi li{color:var(--muted);font-size:13.5px;line-height:1.6}
.ebbi .col.build{border-left:1px solid var(--border-soft);border-right:1px solid var(--border-soft);padding:0 16px}
@media (max-width:800px){.ebbi .col.build{border-left:0;border-right:0;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);padding:16px 0}}

.eshot{margin:0}
.eshot img{border-radius:14px;border:1px solid var(--border-soft);cursor:zoom-in}
.eshot-cap{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.5}

.etechs{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.etech{background:var(--card-0);border:1px solid var(--border-soft);border-radius:8px;padding:6px 12px;font-size:12.5px;color:var(--muted-2)}

.esched .row{display:grid;grid-template-columns:180px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--border-soft)}
.esched .row:last-child{border-bottom:0}
.esched .t{color:var(--accent);font-weight:700;font-size:13.5px}
.esched .d{color:var(--muted);font-size:13.5px;line-height:1.6}

.epgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:16px}
@media (max-width:960px){.epgrid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:640px){.epgrid{grid-template-columns:repeat(2,1fr)}}
.epitem{background:var(--card-0);border:1px solid var(--border-soft);border-radius:14px;padding:14px;text-align:center;transition:border-color .15s}
.epitem:hover{border-color:var(--accent)}
.epthumb{width:44px;height:44px;border-radius:10px;overflow:hidden;margin:0 auto 10px;background:#fff}
.epthumb img{width:100%;height:100%;object-fit:contain}
.epname{font-size:13px;font-weight:700;color:var(--ink)}
.eptag{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.4}

.etrack{display:flex;flex-direction:column;gap:26px;margin-top:8px}
.ejob{display:grid;grid-template-columns:150px 1fr;gap:20px}
@media (max-width:600px){.ejob{grid-template-columns:1fr;gap:6px}}
.ejob .when{color:var(--accent);font-size:13.5px;font-weight:700}
.ejob .who{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:4px}
.ejob .what{font-size:14px;color:var(--muted);line-height:1.6}
.ejob .what a{color:var(--accent);font-weight:600}

.elead-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
@media (max-width:860px){.elead-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.elead-grid{grid-template-columns:1fr}}
.elead-cell{background:var(--card-0);border:1px solid var(--border-soft);border-radius:18px;padding:22px}
.elead-cell .eno{color:var(--accent);font-size:13px;font-weight:700;margin-bottom:8px}
.elead-cell .elt{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:8px}
.elead-cell p{color:var(--muted);font-size:13.5px;line-height:1.6}

.rlink a{color:var(--accent);font-weight:600}

/* studiomx-style "impact moment" — one big number, generous breathing room */
.dimpact{
  border-top:1px solid var(--border-soft);
  padding:80px 0;margin:0;text-align:center;position:relative;z-index:1;
}
.dimpact .lab{color:var(--accent);font-size:13px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;margin:0 0 22px}
.dimpact .num{font-size:clamp(42px,7vw,88px);font-weight:900;color:var(--ink);line-height:1;letter-spacing:-1px}
.dimpact .sub{color:var(--muted);font-size:16px;margin:20px auto 0;max-width:560px;line-height:1.65}
@media (max-width:640px){.dimpact{padding:56px 0}}

/* footer + contact */
.dfoot{
  border-top:1px solid var(--border-soft);padding:28px 0 40px;text-align:center;
  color:var(--muted);font-size:13px;position:relative;z-index:1;
}
.dfoot a{color:var(--ink)}
.dfoot-built{margin-top:6px;color:#5c606b;font-size:11.5px}

.dcontact-card{
  background:var(--card-1);border:1px solid var(--border);border-radius:24px;
  padding:26px 28px;max-width:480px;margin-top:44px;
}
.dcontact-card .k{color:var(--accent);font-size:13px;font-weight:600;letter-spacing:1px;margin-bottom:10px}
.dcontact-card .mail{font-size:20px;font-weight:700;color:var(--ink);margin-bottom:6px}
.dcontact-card .tel{font-size:16px;color:var(--muted)}

.dbadge{
  position:absolute;width:170px;height:170px;border-radius:50%;
  border:1px solid rgba(255,82,51,.5);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:15px;font-weight:700;color:var(--ink);line-height:1.35;padding:20px;
}

/* lightbox (reused from old site) */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.86);display:none;z-index:100;overflow-y:auto;padding:40px 20px}
.lightbox.open{display:flex;flex-direction:column;align-items:center}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:10px;cursor:zoom-in;margin:auto}
.lightbox img.zoomed{max-width:min(1100px,96vw);max-height:none;cursor:zoom-out;margin:0 auto}

/* large scrollable/draggable detail-page preview (Case 03) */
.dpv{margin-top:16px}
.dpv-main{
  width:100%;max-width:420px;margin:0 auto;height:640px;overflow-y:auto;overflow-x:hidden;
  border-radius:14px;border:1px solid var(--border-soft);background:var(--card-0);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
}
.dpv-main::-webkit-scrollbar{width:0;height:0;display:none}
.dpv-main img{
  width:100%;height:auto;display:block;cursor:zoom-in;
  -webkit-user-drag:none;user-select:none;
}
.dpv-label{font-size:12.5px;color:var(--muted);margin-top:14px;text-align:center;max-width:420px;margin-left:auto;margin-right:auto}
/* horizontal drag-to-swipe image slider — one shot at a time, ratio never forced */
.dslide{
  display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;border-radius:14px;border:1px solid var(--border-soft);
  background:var(--card-0);scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;margin-top:14px;
}
.dslide::-webkit-scrollbar{display:none}
.dslide .dslide-item{
  flex:0 0 100%;scroll-snap-align:start;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:28px;min-height:340px;
}
.dslide img{max-width:100%;max-height:60vh;width:auto;height:auto;object-fit:contain;border-radius:8px;display:block;cursor:zoom-in;-webkit-user-drag:none;user-select:none}
.dslide-cap{margin-top:14px;color:var(--muted);font-size:12.5px;text-align:center}
.dslide-dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
.dslide-dots span{width:6px;height:6px;border-radius:50%;background:var(--border);transition:background .2s}
.dslide-dots span.on{background:var(--accent)}
@media (max-width:640px){.dslide .dslide-item{padding:18px;min-height:240px}}

.dpv-more{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:22px;background:var(--accent);color:#0a0a0a;font-weight:700;font-size:14.5px;
  text-decoration:none;cursor:pointer;
}
@media (max-width:640px){.dpv-main{height:520px}}

/* reveal-on-scroll (reused pattern) */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.rv-in{opacity:1;transform:none}

/* ---------- hero motion graphics (inline SVG, no external assets) ---------- */
.dgraphic{width:100%;height:auto;max-height:120px;margin:4px 0 30px;display:block;overflow:visible}
.dgraphic .dg-line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:100;stroke-dashoffset:100;animation:ddraw 1.8s cubic-bezier(.4,0,.2,1) forwards;animation-play-state:paused}
.dgraphic .dg-line2{fill:none;stroke:var(--border);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:100;stroke-dashoffset:100;animation:ddraw 1.8s cubic-bezier(.4,0,.2,1) .15s forwards;animation-play-state:paused}
.dgraphic .dg-fill{fill:var(--accent);opacity:.07}
.dgraphic .dg-dot{fill:var(--accent);opacity:0;animation:ddotpop .5s ease forwards,dpulse 2.4s ease-in-out infinite;animation-play-state:paused}
.dgraphic .dg-dot-static{fill:var(--muted);opacity:.5}
.dgraphic .dg-bar{fill:var(--accent);transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);animation:dbar .7s cubic-bezier(.2,.8,.3,1) forwards;animation-play-state:paused}
.dgraphic.rv-in .dg-line,.dgraphic.rv-in .dg-line2,.dgraphic.rv-in .dg-dot,.dgraphic.rv-in .dg-bar{animation-play-state:running}

@keyframes ddraw{to{stroke-dashoffset:0}}
@keyframes ddotpop{to{opacity:1}}
@keyframes dpulse{0%,100%{opacity:1;r:4}50%{opacity:.45;r:5.5}}
@keyframes dbar{to{transform:scaleY(1)}}

@media (max-width:640px){.dgraphic{max-height:88px}}

/* flowing pipeline arrows (page 1 flagship banner) */
.dpipe-arrow{animation:dflowpulse 2.4s ease-in-out infinite}
.dpipe-steps .dpipe-arrow:nth-of-type(1){animation-delay:0s}
.dpipe-steps .dpipe-arrow:nth-of-type(2){animation-delay:.3s}
.dpipe-steps .dpipe-arrow:nth-of-type(3){animation-delay:.6s}
.dpipe-steps .dpipe-arrow:nth-of-type(4){animation-delay:.9s}
.dpipe-steps .dpipe-arrow:nth-of-type(5){animation-delay:1.2s}
.dpipe-steps .dpipe-arrow:nth-of-type(6){animation-delay:1.5s}
@keyframes dflowpulse{0%,100%{opacity:.45;transform:translateX(0)}50%{opacity:1;transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){
  .dpipe-arrow{animation:none}
  .dgraphic .dg-line,.dgraphic .dg-line2,.dgraphic .dg-dot,.dgraphic .dg-bar{animation:none;stroke-dashoffset:0;opacity:1;transform:none}
  .dph-icon,.dfloat{animation:none}
}

/* AI capabilities: one list, one total, and the existing product screenshot. */
#ai .ai-overview{display:block;padding-bottom:48px}
#ai .ai-overview .dh1{font-size:clamp(36px,4.7vw,64px);line-height:1.2;max-width:none}
#ai .ai-cases{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px}
#ai .ai-cases li{display:flex;align-items:center;min-height:94px;padding:22px 0;border-bottom:1px solid var(--border);color:var(--ink);font-size:clamp(21px,2vw,26px);font-weight:700;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}
#ai .ai-total{margin-top:36px;color:var(--accent);font-size:clamp(28px,3vw,42px);font-weight:900;line-height:1.3;letter-spacing:-1px}
#ai .ai-screenshot{max-width:1000px;margin:0 auto 96px}
#ai .ai-screenshot img{display:block;width:100%;height:auto;border:1px solid var(--border);border-radius:18px}
@media(max-width:700px){#ai .ai-cases{grid-template-columns:1fr;margin-top:28px}#ai .ai-cases li{min-height:0;padding:20px 0;font-size:22px}#ai .ai-overview{padding-bottom:36px}#ai .ai-total{margin-top:28px}#ai .ai-screenshot{margin-bottom:56px}}

/* Planning: three 2026 brand cases with large outcomes and authentic work. */
#planning .planning-hero{padding-bottom:65px}
#planning .planning-index{align-self:center}
#planning .planning-index>a{display:flex;align-items:center;gap:20px;color:var(--ink);font-weight:700;font-size:21px;text-decoration:none;border-top:1px solid var(--border-soft);padding:18px 0}
#planning .planning-index>a:first-of-type{margin-top:18px}
#planning .planning-index>a>span:first-child{font-size:13px;color:var(--accent)}
#planning .planning-index>a>span:last-child{margin-left:auto;color:var(--accent)}
#planning .brand-story{border-top:1px solid var(--border-soft);padding:70px 0;scroll-margin-top:88px}
#planning .brand-story:first-child{border-top:0;padding-top:18px}
#planning .brand-story-head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:30px}
#planning .brand-story-head h2{font-size:clamp(27px,3.5vw,44px);line-height:1.25;color:var(--ink);margin-top:9px}
#planning .brand-metrics{display:flex;gap:28px;flex-wrap:wrap}
#planning .brand-metrics>div{display:flex;flex-direction:column;gap:7px;min-width:126px}
#planning .brand-metrics strong{font-size:clamp(32px,4vw,54px);font-weight:900;line-height:1.1;color:var(--accent);white-space:nowrap}
#planning .brand-metrics span{font-size:13px;color:var(--muted)}
#planning .brand-story h3{font-size:22px;margin:40px 0 16px;color:var(--ink)}
#planning .brand-ad-grid{display:grid;grid-template-columns:repeat(2,minmax(0,320px));gap:18px}
#planning .brand-ad-grid figure{min-width:0;margin:0}
#planning .brand-ad-grid img{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:14px;border:1px solid var(--border-soft)}
#planning .brand-ad-grid figcaption,#planning .brand-video figcaption{font-size:13px;color:var(--muted);margin-top:10px}
#planning .brand-detail-preview{width:100%;max-width:430px;height:560px;overflow:auto;overscroll-behavior:contain;border:1px solid var(--border-soft);border-radius:14px;background:var(--card-0);-webkit-overflow-scrolling:touch}
#planning .brand-detail-preview img{display:block;width:100%;height:auto}
#planning .brand-more{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:14px;padding:12px 18px;color:var(--accent);border:1px solid var(--accent);border-radius:999px;text-decoration:none;font-size:15px;font-weight:700}
#planning .brand-detail-link{display:flex;justify-content:space-between;align-items:center;gap:16px;max-width:650px;border:1px solid var(--border-soft);border-radius:16px;padding:18px 22px;background:var(--card-0)}
#planning .brand-detail-link>span{color:var(--ink);font-weight:700}
#planning .brand-detail-link a{color:var(--accent);font-weight:700;text-decoration:none;white-space:nowrap}
#planning .mogrami-ppl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:24px 0}
#planning .mogrami-ppl a{display:flex;flex-direction:column;gap:9px;padding:22px;border:1px solid var(--border-soft);border-radius:16px;background:var(--card-0);text-decoration:none}
#planning .mogrami-ppl strong{font-size:32px;color:var(--accent);line-height:1.1}
#planning .mogrami-ppl span{color:var(--muted);font-size:14px;line-height:1.55}
#planning .brand-video{max-width:300px}
#planning .brand-video video{display:block;width:100%;border-radius:14px;background:#000}
@media(max-width:850px){#planning .brand-story-head{display:block}#planning .brand-metrics{margin-top:24px}#planning .mogrami-ppl{grid-template-columns:1fr}}
@media(max-width:560px){#planning .planning-hero{padding-bottom:30px}#planning .brand-story{padding:48px 0}#planning .brand-story-head h2{font-size:30px}#planning .brand-metrics{gap:20px}#planning .brand-metrics strong{font-size:38px}#planning .brand-ad-grid{gap:10px}#planning .brand-detail-preview{height:430px}#planning .brand-detail-link{display:block}#planning .brand-detail-link a{display:block;margin-top:12px}#planning .mogrami-ppl a{padding:18px}}
@media(max-width:560px){#planning .brand-ad-grid{grid-template-columns:1fr;max-width:320px}.dorb.tr{right:0;width:min(430px,100vw)}}

/* Brand work: detail pages, their sales result, and complete creative galleries. */
#planning .brand-results-layout{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:32px;align-items:start}
#planning .brand-results-layout>div{min-width:0}
#planning .brand-results-layout h3{margin-top:0}
#planning .brand-sales-chart{margin:0;min-height:560px;display:flex;flex-direction:column;justify-content:center;padding:32px 22px;background:var(--card-0);border:1px solid var(--border-soft);border-radius:14px}
#planning .brand-sales-chart figcaption{display:flex;flex-direction:column;gap:9px;margin-bottom:32px}
#planning .brand-sales-chart figcaption span{font-size:16px;color:var(--muted)}
#planning .brand-sales-chart figcaption strong{font-size:clamp(28px,3vw,44px);line-height:1.2;color:var(--accent);letter-spacing:-1.4px}
#planning .brand-sales-chart figcaption small{font-size:14px;color:var(--muted)}
#planning .brand-sales-chart svg{display:block;width:100%;height:auto;overflow:visible}
#planning .brand-creatives{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:36px}
#planning .brand-creative{min-width:0;margin:0;overflow:hidden;background:var(--card-0);border:1px solid var(--border-soft);border-radius:14px}
#planning .brand-creative video{display:block;width:100%;aspect-ratio:9/16;object-fit:contain;background:#000}
#planning .brand-creative figcaption{display:flex;flex-direction:column;gap:7px;padding:15px;font-size:14px;line-height:1.5;color:var(--muted)}
#planning .brand-creative figcaption strong{font-size:24px;color:var(--accent);line-height:1.15}
#planning .brand-creative figcaption span{font-size:13px}
#planning .brand-creative video:fullscreen{height:100%;aspect-ratio:auto;object-fit:contain}
#planning .brand-story [id]{scroll-margin-top:100px}
@media(max-width:900px){#planning .brand-creatives{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}#planning .brand-results-layout{grid-template-columns:1fr;gap:28px}#planning .brand-product-result .brand-detail-preview{max-width:100%}#planning .brand-sales-chart{min-height:0;padding:28px;max-width:650px}}
@media(max-width:560px){#planning .brand-creatives{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#planning .brand-creative figcaption{padding:12px 10px;font-size:13px}#planning .brand-creative figcaption strong{font-size:21px}#planning .brand-sales-chart{padding:24px 14px}#planning .brand-sales-chart figcaption{margin-bottom:24px}#planning .brand-sales-chart figcaption strong{font-size:32px}#planning .brand-sales-chart svg text{font-size:26px}}

#data .optimust-subtitle{font-size:22px;font-weight:700;color:var(--muted-2);margin:12px 0 28px}
#data .optimust-results .tt{color:var(--accent);font-size:clamp(23px,2.6vw,34px);font-weight:800}
#data .optimust-results{margin-bottom:28px}
/* Data project directory: all existing company cases remain visible. */
#data .client-logo-grid{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin:24px 0 0;padding:0}
#data .client-logo-grid>li{min-width:0;padding:0;margin:0}
#data .client-logo-grid>li::before{content:none}
#data .client-logo-card{height:100%;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border-soft);border-radius:16px;background:var(--card-0);text-decoration:none;color:var(--ink);transition:border-color .18s,transform .18s}
#data .client-logo-art{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:2/1;padding:14px;background:#fff;box-sizing:border-box}
#data .client-logo-art img{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}
#data .client-logo-caption{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:60px;padding:12px 14px;font-size:14px;font-weight:700;line-height:1.45;box-sizing:border-box;word-break:keep-all;overflow-wrap:anywhere}
#data .client-logo-arrow{flex-shrink:0;color:var(--muted);font-size:17px;font-weight:500}
#data .client-logo-card:hover{border-color:var(--accent);transform:translateY(-3px)}
#data .client-logo-card:hover .client-logo-arrow{color:var(--accent)}
#data .client-logo-card:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
@media(max-width:1100px){#data .client-logo-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:640px){#data .client-logo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#data .client-logo-art{padding:12px}#data .client-logo-caption{padding:11px 12px;min-height:60px}}
@media(prefers-reduced-motion:reduce){#data .client-logo-card{transition:none}#data .client-logo-card:hover{transform:none}}

#data .data-intro{padding-bottom:24px;min-height:0}
#data .data-case{padding:48px 0 64px;border-bottom:1px solid var(--border-soft)}
#data .data-case:last-child{border-bottom:0}
#data .data-case>.ecase-sub{margin-bottom:14px}
#data .data-case h2{line-height:1.3}
#data .client-data-methods{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:30px;align-items:center;margin-top:40px}
#data .client-data-methods h3{font-size:23px;margin:0 0 16px}
#data .client-data-methods .dlist{margin:0}
#data .client-data-methods .eshot{margin:0;width:100%}
#data .petbox-results .tt{font-size:clamp(28px,3vw,40px);font-weight:800;color:var(--accent)}
#data .petbox-before{font-size:19px;color:var(--muted);margin:16px 0 6px}
@media(max-width:800px){#data .client-data-methods{grid-template-columns:1fr}#data .data-case{padding-top:32px}}

/* Final seven-section reading order. */
.section-anchor{position:absolute;top:0;left:0;scroll-margin-top:76px}
#petbox .data-intro{padding-bottom:24px;min-height:0}
#petbox .data-case{padding:32px 0 70px}
#petbox .data-case>.ecase-sub{margin-bottom:14px}
#petbox .petbox-results .tt{font-size:clamp(28px,3vw,40px);font-weight:800;color:var(--accent)}
#petbox .petbox-before{font-size:19px;color:var(--muted);margin:16px 0 6px}
#career .career-project{margin:0 0 70px;border:1px solid var(--border-soft);border-radius:16px;background:var(--card-0);overflow:hidden}
#career .career-project>summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:24px;font-size:20px;font-weight:700;cursor:pointer;list-style:none}
#career .career-project>summary::-webkit-details-marker{display:none}
#career .career-project>summary span{color:var(--accent);font-size:25px}
#career .career-project[open]>summary span{transform:rotate(45deg)}
#career .career-project>.esec{padding:14px 24px 28px;margin:0}
#career .optimust-subtitle{font-size:22px;font-weight:700;color:var(--muted-2);margin:12px 0 28px}
#career .optimust-results .tt{color:var(--accent);font-size:clamp(23px,2.6vw,34px);font-weight:800}
#career .optimust-results{margin-bottom:28px}

@media(max-width:850px){.dnav-in{gap:16px;padding:0 20px}.dnav ul{flex-wrap:nowrap;min-width:0;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;padding:8px 0}.dnav ul::-webkit-scrollbar{display:none}.dnav ul li{flex:0 0 auto}}

#case-desillab .launch-results{display:grid;gap:6px;color:var(--accent);font-size:clamp(32px,3.7vw,52px);font-weight:900;line-height:1.25;letter-spacing:-1.2px}
#case-desillab .launch-results p{margin:0;font:inherit;letter-spacing:inherit;white-space:nowrap}
@media(max-width:850px){#case-desillab .launch-results{margin-top:24px}}

/* Jeongango: the supplied before/after sources, each independently scrollable. */
#planning #case-binusoap .brand-results-layout{grid-template-columns:minmax(0,2fr) minmax(320px,1fr);gap:24px}
#planning .detail-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
#planning .comparison-version{min-width:0}
#planning .comparison-version>h3{font-size:24px;line-height:1.3;margin:0 0 16px;color:var(--muted-2)}
#planning .comparison-after>h3{color:var(--accent)}
#planning .comparison-preview{width:100%;max-width:none;height:600px;scrollbar-gutter:stable;background:#fff;scrollbar-color:#858585 #f3f3f3}
#planning .comparison-after .comparison-preview{border-color:var(--accent)}
#planning .comparison-preview:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
#planning .comparison-preview>a{display:block}
#planning .comparison-embed{position:relative;width:100%;aspect-ratio:16/9;background:#101114}
#planning .comparison-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
#planning #case-binusoap .brand-sales-result{padding-top:47px}
#planning #case-binusoap .brand-sales-chart{min-height:600px;padding:26px 18px}
#planning #case-binusoap .brand-sales-chart figcaption strong{font-size:clamp(28px,2.4vw,36px)}
#planning #case-binusoap .brand-sales-chart h3{font-size:21px;line-height:1.5}
@media(max-width:1100px){#planning #case-binusoap .brand-results-layout{grid-template-columns:1fr;gap:28px}#planning #case-binusoap .brand-sales-result{padding-top:0}#planning #case-binusoap .brand-sales-chart{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);align-items:center;gap:24px;min-height:0;max-width:none;padding:28px}#planning #case-binusoap .brand-sales-chart figcaption{margin:0}}
@media(max-width:600px){#planning .detail-comparison{grid-template-columns:1fr;gap:28px}#planning .comparison-preview{height:450px}#planning #case-binusoap .brand-sales-chart{display:flex;padding:24px 14px;gap:0}#planning #case-binusoap .brand-sales-chart figcaption{margin-bottom:24px}#planning .comparison-version>h3{font-size:24px}}