/* ============================================================
   kim-seonil-portfolio2 — 애플 문법 전면 적용
   검증을 통과한 하이브리드 규율을 8케이스 전체에 확장한 스타일시트.
   ============================================================ */

/* 폰트는 자체 호스팅 서브셋. CDN 을 쓰지 않는다 —
   전체 variable 파일은 2.06MB 단일 요청이고, 서브셋은 3웨이트 합쳐 170KB 다. */
@font-face{font-family:Pretendard;font-weight:400;font-style:normal;font-display:swap;
  src:url("fonts/Pretendard-Regular.woff2") format("woff2");}
@font-face{font-family:Pretendard;font-weight:600;font-style:normal;font-display:swap;
  src:url("fonts/Pretendard-SemiBold.woff2") format("woff2");}
@font-face{font-family:Pretendard;font-weight:700;font-style:normal;font-display:swap;
  src:url("fonts/Pretendard-Bold.woff2") format("woff2");}

:root{
  --bg:#ffffff;
  --bg2:#f5f5f7;
  --ink:#1d1d1f;
  --ink2:#6e6e73;          /* 흰 배경 5.07:1 */
  --line:#d2d2d7;
  --line-soft:rgba(0,0,0,.07);
  --accent:#1b64da;        /* 흰 배경 5.41:1 */
  --accent-soft:rgba(27,100,218,.08);
  --graphic:#8e8e93;       /* 뜻을 지닌 도형 — 흰 배경 3.26:1 (WCAG 1.4.11) */

  --pad:clamp(72px,9vw,130px);
  --pad-tight:clamp(44px,5.4vw,78px);
  --gut:clamp(20px,4.5vw,44px);
  --maxw:1120px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
html,body{margin:0;padding:0;max-width:100%;overflow-x:clip;}
body{
  background:var(--bg);color:var(--ink);
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Malgun Gothic",sans-serif;
  font-size:17px;line-height:1.5;letter-spacing:-0.012em;
  word-break:keep-all;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,ul,ol,li,dl,dt,dd,figure,figcaption{margin:0;padding:0;}
ul,ol{list-style:none;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}

/* 알약이 둥글어 기본 사각 아웃라인이 어긋나 보인다. offset 으로 모양을 따라가게 한다. */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px;}
.pill:focus-visible{outline-offset:4px;}
.skip{
  position:absolute;left:16px;top:-64px;z-index:99;background:var(--ink);color:#fff;
  padding:12px 20px;border-radius:12px;font-size:.95rem;font-weight:600;
  transition:top .2s var(--ease);
}
.skip:focus{top:16px;}

/* ---------- 상단바 ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px var(--gut);
  background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line-soft);
}
.brandmark{display:inline-flex;align-items:baseline;gap:8px;min-height:44px;align-content:center;}
.brandmark b{font-size:1.02rem;font-weight:700;letter-spacing:-0.022em;}
.brandmark span{font-size:.8rem;color:var(--ink2);}
.topbar nav{display:flex;align-items:center;gap:6px;}
.topbar nav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 12px;
  font-size:.92rem;font-weight:500;color:var(--ink2);letter-spacing:-0.01em;border-radius:10px;
}
.topbar nav a:hover{color:var(--ink);}
/* 단독 컨트롤이므로 44px 을 지킨다 — 상단바가 조금 두꺼워지는 편이
   손가락으로 못 누르는 버튼보다 낫다. */
.pill--sm{
  min-height:44px !important;padding:0 18px !important;border-radius:980px;
  background:var(--accent);color:#fff !important;font-weight:600 !important;
}
.pill--sm:hover{opacity:.88;}

/* ---------- 밴드 ---------- */
.band{width:100%;padding:var(--pad) 0;background:var(--bg);}
.band--alt{background:var(--bg2);}
.band--tight{padding:var(--pad-tight) 0;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);}
.center{text-align:center;}

/* ---------- 타이포 ---------- */
/* 한글에 uppercase 는 무효인데 넓은 자간만 남아 벌어진다. 쓰지 않는다. */
.eyebrow{
  font-size:clamp(.82rem,1.1vw,.9rem);font-weight:600;letter-spacing:.01em;
  color:var(--accent);margin-bottom:clamp(14px,1.8vw,20px);
}
.eyebrow--mute{color:var(--ink2);}
.title{font-size:clamp(2.1rem,4.6vw,3.6rem);font-weight:600;letter-spacing:-0.025em;line-height:1.1;}
.title--sm{font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.16;}
.sub{
  font-size:clamp(1.05rem,1.7vw,1.35rem);font-weight:400;letter-spacing:-0.014em;line-height:1.45;
  color:var(--ink2);margin:clamp(14px,2vw,22px) auto 0;max-width:46ch;
}

/* ---------- CTA ---------- */
.ctas{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,3.2vw,40px);}
.pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;min-width:44px;padding:0 26px;border-radius:980px;
  font-size:1.03rem;font-weight:500;letter-spacing:-0.01em;
  border:1px solid transparent;transition:opacity .25s var(--ease),background-color .25s var(--ease);
}
.pill--fill{background:var(--accent);color:#fff;}
.pill--fill:hover{opacity:.86;}
.pill--line{border-color:var(--accent);color:var(--accent);}
.pill--line:hover{background:var(--accent-soft);}

/* ---------- 홈 히어로 ----------
   거대 슬롯에 숫자가 아니라 판단 문장을 놓는다. 큰 퍼센트를 놓으면
   옆 지원자의 더 큰 퍼센트에게 지는 '비교 가능한 축'이 된다. */
.hero{padding:clamp(64px,8vw,120px) 0 clamp(52px,6vw,86px);}
.hero-name{font-size:clamp(.95rem,1.3vw,1.06rem);font-weight:600;color:var(--ink2);margin-bottom:clamp(18px,2.4vw,28px);}
.hero-claim{
  font-size:clamp(2.3rem,7vw,5rem);font-weight:600;letter-spacing:-0.03em;line-height:1.06;
  max-width:17ch;margin:0 auto;
}
.hero-claim em{font-style:normal;color:var(--accent);}
.hero-sub{
  margin:clamp(20px,2.6vw,32px) auto 0;max-width:42ch;
  font-size:clamp(1.02rem,1.6vw,1.3rem);line-height:1.5;color:var(--ink2);letter-spacing:-0.014em;
}
/* 신뢰 신호는 캡션으로 흘리지 않고 본문 크기로 첫 화면에 둔다 */
.trust{margin:clamp(26px,3.2vw,40px) auto 0;display:flex;justify-content:center;flex-wrap:wrap;gap:10px 12px;}
.trust li{
  border:1px solid var(--line);border-radius:980px;padding:9px 18px;
  font-size:clamp(.88rem,1.1vw,.98rem);color:var(--ink2);letter-spacing:-0.008em;
}
.trust b{color:var(--ink);font-weight:600;}

/* ---------- 숫자로 본 경력 ---------- */
.kpis{
  margin-top:clamp(34px,4vw,54px);display:grid;gap:clamp(16px,2vw,24px);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.kpi{border:1px solid var(--line);border-radius:20px;padding:clamp(22px,2.6vw,30px) clamp(16px,2vw,22px);background:var(--bg);}
.kpi-v{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:600;letter-spacing:-0.035em;line-height:1;font-variant-numeric:tabular-nums;}
.kpi-k{margin-top:12px;font-size:.9rem;font-weight:600;}
.kpi-n{margin-top:6px;font-size:.8rem;color:var(--ink2);line-height:1.5;}

/* ---------- 케이스 카드 ----------
   .case--own  기여도 60%+ : 대표 수치를 크게
   .case--team 기여도 60%− : 수치를 낮추고 '무엇을 설계했는가'를 올린다
   기여도 20% 케이스의 1,184% 가 기여도 100% 의 '약 3배' 보다 크게
   조판되면, 화면이 스스로 "남의 성과를 가장 크게" 말하게 된다. */
.cases{
  margin-top:clamp(38px,4.6vw,60px);display:grid;gap:clamp(14px,1.6vw,20px);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.case{min-width:0;}
.case-hit{
  display:flex;flex-direction:column;height:100%;
  border:1px solid var(--line);border-radius:20px;background:var(--bg);
  padding:clamp(20px,2.2vw,26px);text-align:left;
  transition:box-shadow .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease);
}
.case-hit:hover{box-shadow:0 10px 30px rgba(0,0,0,.07);transform:translateY(-2px);border-color:#c9c9cf;}
.case-brand{font-size:.96rem;font-weight:600;letter-spacing:-0.018em;}
.case-ind{margin-top:4px;font-size:.8rem;color:var(--ink2);}
.case-lead{margin-top:clamp(15px,1.8vw,20px);display:flex;flex-direction:column;}
.case--own .case-figure{
  font-size:clamp(1.6rem,2.8vw,2.2rem);font-weight:600;letter-spacing:-0.03em;line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.case--own .case-figure .from{color:var(--ink2);font-size:.6em;}
.case--own .case-figure .arw{color:var(--ink2);font-size:.56em;margin:0 .14em;}
.case--own .case-metric{margin-top:8px;font-size:.82rem;color:var(--ink2);}
.case--own .case-role{margin-top:10px;font-size:.86rem;color:var(--ink2);line-height:1.5;}
.case--team .case-role{font-size:clamp(1.02rem,1.4vw,1.18rem);font-weight:600;letter-spacing:-0.022em;line-height:1.32;}
.case--team .case-figure{margin-top:10px;font-size:.92rem;color:var(--ink2);line-height:1.5;font-variant-numeric:tabular-nums;}
.solo{
  display:inline-block;margin-top:10px;padding:5px 11px;border-radius:980px;
  background:var(--accent-soft);color:var(--accent);font-size:.76rem;font-weight:600;
}
/* 기간·기여도·기준을 대표 수치와 같은 시각 무게로 고정 슬롯화한다.
   이 세 줄이 없으면 큰 숫자는 그냥 주장이다. */
.case-meta{
  margin-top:auto;padding-top:clamp(14px,1.6vw,18px);border-top:1px solid var(--line-soft);
  display:grid;gap:6px;font-size:.79rem;color:var(--ink2);line-height:1.45;
}
.case-meta div{display:flex;gap:8px;}
.case-meta dt{flex:none;width:3.6em;}
.case-meta dd{margin:0;color:var(--ink);font-weight:500;min-width:0;}
.case-meta .own{color:var(--accent);font-weight:600;}
.case-go{margin-top:14px;font-size:.82rem;font-weight:600;color:var(--accent);}

/* ---------- 경력 ---------- */
.career{margin-top:clamp(34px,4vw,54px);display:grid;gap:clamp(14px,1.8vw,20px);text-align:left;}
.job{border:1px solid var(--line);border-radius:20px;background:var(--bg);padding:clamp(22px,2.6vw,30px);}
.job-period{font-size:.8rem;font-weight:600;color:var(--accent);}
.job-co{margin-top:8px;font-size:clamp(1.1rem,1.6vw,1.3rem);font-weight:600;letter-spacing:-0.022em;}
.job-co span{font-size:.78rem;font-weight:500;color:var(--ink2);margin-left:6px;}
.job-title{margin-top:4px;font-size:.88rem;color:var(--ink2);}
.job-sum{margin-top:12px;font-size:.96rem;line-height:1.62;color:var(--ink2);}
.job-cl{margin-top:10px;font-size:.84rem;color:var(--ink2);}
.job-hl{margin-top:10px;font-size:.86rem;font-weight:600;color:var(--accent);line-height:1.55;}

/* ---------- 케이스 표제부 ---------- */
.case-hero{padding-top:clamp(52px,6vw,86px);}
.back{color:var(--accent);}
.ch-brand{font-size:.9rem;font-weight:600;color:var(--ink2);}
.ch-title{
  margin-top:10px;font-size:clamp(1.9rem,4.4vw,3.4rem);font-weight:600;
  letter-spacing:-0.028em;line-height:1.14;max-width:26ch;
}
.ch-sub{margin-top:clamp(16px,2vw,24px);max-width:58ch;font-size:clamp(1rem,1.3vw,1.14rem);line-height:1.66;color:var(--ink2);}
/* 역할·기여도는 성과보다 먼저, 같은 화면에. 아래로 밀면 10초 스캔에서 사라진다. */
.rolebox{
  margin-top:clamp(26px,3.2vw,40px);border-top:1px solid var(--line);padding-top:clamp(20px,2.4vw,26px);
  display:grid;gap:clamp(14px,1.8vw,20px);grid-template-columns:repeat(2,minmax(0,1fr));
}
.rolebox > div{display:flex;flex-direction:column;gap:6px;min-width:0;}
.rolebox dt{font-size:.79rem;font-weight:600;color:var(--ink2);letter-spacing:.01em;}
.rolebox dd{margin:0;font-size:.97rem;line-height:1.55;color:var(--ink2);}
.rolebox dd b{color:var(--ink);font-weight:600;}
.contrib{font-size:clamp(1.5rem,2.2vw,1.8rem);font-weight:600;letter-spacing:-0.03em;color:var(--ink);font-variant-numeric:tabular-nums;}
.cnote{display:block;margin-top:4px;font-size:.82rem;color:var(--ink2);}

/* ---------- 서사 4블록 ----------
   문제 → 근거 → 전략 → 실행. sticky 스크롤 무대는 쓰지 않는다 —
   8케이스면 3,200svh 이고 모바일 이탈을 늘리는 처방이다. */
.acts{display:grid;gap:0;}
.act{
  display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);
  gap:clamp(20px,4vw,56px);padding:clamp(32px,4vw,52px) 0;align-items:start;
}
.act + .act{border-top:1px solid var(--line);}
.act-no{font-size:.78rem;font-weight:600;color:var(--ink2);letter-spacing:.06em;font-variant-numeric:tabular-nums;}
.act-eye{margin-top:6px;font-size:clamp(1.1rem,1.7vw,1.34rem);font-weight:600;letter-spacing:-0.022em;}
.act-body{font-size:clamp(1rem,1.25vw,1.1rem);line-height:1.72;color:var(--ink2);max-width:52ch;}
.steps{display:grid;gap:clamp(12px,1.6vw,16px);}
.steps li{display:flex;gap:14px;align-items:flex-start;}
.step-n{
  flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  font-size:.78rem;font-weight:600;display:flex;align-items:center;justify-content:center;
}
.steps p{font-size:clamp(.96rem,1.2vw,1.05rem);line-height:1.62;color:var(--ink2);}

/* ---------- 결과: 거대 조판 (케이스당 1회) ---------- */
.mega-row{
  margin-top:clamp(32px,4vw,54px);
  display:flex;align-items:center;justify-content:center;gap:clamp(10px,2.2vw,30px);flex-wrap:wrap;
}
.mega{
  font-size:clamp(2.8rem,9vw,7rem);font-weight:600;letter-spacing:-0.035em;line-height:1;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.mega-row--long .mega{font-size:clamp(2rem,6vw,4.6rem);}
.mega--past{color:var(--ink2);}
.mega-arrow{font-size:clamp(1.4rem,3.4vw,2.6rem);color:var(--ink2);line-height:1;}
.mega-cap{margin-top:clamp(16px,2vw,24px);font-size:.94rem;color:var(--ink2);}

/* 보조 수준값 */
.tiles{
  margin-top:clamp(34px,4vw,52px);display:grid;gap:clamp(14px,1.8vw,20px);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.tile{border:1px solid var(--line);border-radius:20px;background:var(--bg);padding:clamp(22px,2.6vw,30px) clamp(18px,2.2vw,24px);}
.band--alt .tile{background:var(--bg);}
.tile-k{font-size:.86rem;font-weight:600;color:var(--ink2);}
.tile-v{margin-top:12px;font-size:clamp(1.5rem,2.6vw,2.05rem);font-weight:600;letter-spacing:-0.03em;line-height:1.1;font-variant-numeric:tabular-nums;}
.tile-v .from{color:var(--ink2);font-size:.62em;}
.tile-v .arw{color:var(--ink2);font-size:.58em;margin:0 .14em;}
.tile-n{margin-top:10px;font-size:.82rem;color:var(--ink2);line-height:1.5;}

/* 지수 증감값 — 수준값과 기준이 다르므로 분리하고 기준을 밝힌다.
   좋은 숫자를 초록으로 칠하지 않는다. 주식앱 문법이지 애플 문법이 아니다. */
.deltas{margin-top:clamp(28px,3.2vw,40px);border-top:1px solid var(--line);padding-top:clamp(22px,2.6vw,30px);}
.deltas-h{font-size:.86rem;font-weight:600;color:var(--ink2);margin-bottom:16px;}
.delta-row{display:grid;gap:clamp(14px,2vw,24px);grid-template-columns:repeat(3,minmax(0,1fr));}
.delta-row .tile{border:0;background:transparent;padding:0;text-align:center;}
.delta-row .tile-v{font-size:clamp(1.2rem,2vw,1.55rem);}

/* ---------- 차트 ----------
   막대 높이와 눈금은 값에서 계산한다. 눈대중 좌표를 쓰지 않는다. */
.chart{margin:clamp(30px,3.6vw,46px) auto 0;max-width:640px;}
.plot{
  position:relative;height:clamp(190px,26vw,270px);padding-left:48px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,5vw,60px);align-items:end;
  margin-top:56px;
}
.gl{position:absolute;left:48px;right:0;border-top:1px solid var(--line-soft);}
.gl::after{
  content:attr(data-v);position:absolute;left:-48px;top:-.62em;width:42px;text-align:right;
  font-size:.7rem;color:var(--ink2);font-variant-numeric:tabular-nums;
}
.barwrap{position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center;}
.bar{width:100%;max-width:112px;border-radius:8px 8px 0 0;transform-origin:bottom center;}
.bar--past{background:var(--graphic);}
.bar--now{background:var(--accent);}
/* 값 라벨은 막대 밖에 둔다 — 막대 안에 두면 성장 애니메이션에 같이 눌린다 */
.bar-v{
  position:absolute;left:0;right:0;text-align:center;margin-bottom:16px;
  font-weight:600;letter-spacing:-0.03em;line-height:1;font-variant-numeric:tabular-nums;
}
.bar-v--past{font-size:clamp(1rem,1.5vw,1.2rem);color:var(--ink2);}
.bar-v--now{font-size:clamp(1.9rem,4vw,3rem);color:var(--ink);}
.xaxis{
  margin-top:12px;padding-left:48px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,5vw,60px);text-align:center;font-size:.84rem;color:var(--ink2);
}
.chart figcaption{margin-top:12px;padding-left:48px;font-size:.8rem;line-height:1.55;color:var(--ink2);text-align:left;}

/* ---------- 증빙 ---------- */
.proofs{margin-top:clamp(34px,4vw,52px);display:grid;gap:clamp(18px,2.4vw,28px);grid-template-columns:repeat(2,minmax(0,1fr));}
.proof{min-width:0;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--bg);}
.proof--wide{grid-column:1 / -1;}
/* 증빙은 잘라내지 않는다. 잘라내면 보여주려던 표가 화면 밖으로 나간다. */
.proof img{width:100%;aspect-ratio:16 / 9;object-fit:contain;background:var(--bg2);border-bottom:1px solid var(--line);}
.proof--wide img{aspect-ratio:1366 / 261;}
.proof figcaption{padding:clamp(16px,2vw,20px);font-size:.87rem;line-height:1.6;color:var(--ink2);text-align:left;}
.proof figcaption a{color:var(--accent);font-weight:500;}
.proof figcaption a:hover{text-decoration:underline;}

/* ---------- 역할·배운 것 / 출처 ---------- */
.duo{margin-top:clamp(30px,3.6vw,48px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px);text-align:left;}
.duo h3{font-size:clamp(1.05rem,1.5vw,1.22rem);font-weight:600;letter-spacing:-0.022em;padding-bottom:14px;border-bottom:1px solid var(--line);}
.duo p{margin-top:16px;font-size:clamp(.96rem,1.2vw,1.05rem);line-height:1.7;color:var(--ink2);}
.source{margin:clamp(20px,2.4vw,28px) auto 0;max-width:64ch;font-size:.9rem;line-height:1.72;color:var(--ink2);}

footer{border-top:1px solid var(--line);padding:clamp(30px,3.6vw,44px) var(--gut);text-align:center;font-size:.86rem;color:var(--ink2);}
footer b{color:var(--ink);}
.foot-sub{margin-top:8px;font-size:.8rem;}
footer a{color:var(--accent);}

/* ---------- 모션 (JS + 모션 허용일 때만) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(16px);transition:opacity .75s var(--ease),transform .75s var(--ease);}
  .js .rv.in{opacity:1;transform:none;}
  .js .bar{transform:scaleY(0);transition:transform 1s var(--ease) .15s;}
  .js .chart.in .bar{transform:none;}
  .js .bar-v{opacity:0;transition:opacity .55s var(--ease) .7s;}
  .js .chart.in .bar-v{opacity:1;}
}

/* ---------- 반응형 ---------- */
@media (max-width:1060px){
  .cases,.kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:900px){
  body{font-size:16px;}
  .act{grid-template-columns:minmax(0,1fr);gap:14px;}
  .act-body,.ch-sub{max-width:none;}
  .tiles,.delta-row,.proofs,.duo{grid-template-columns:minmax(0,1fr);}
  .proof--wide{grid-column:auto;}
  .chart{--h:0;}
  .plot{height:clamp(170px,40vw,220px);margin-top:48px;}
}
/* 태블릿 세로(701–900)는 폰이 아니다. 폭이 충분한 구간은 2열을 되돌린다. */
@media (min-width:701px) and (max-width:900px){
  .tiles,.delta-row,.duo{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .cases,.kpis{grid-template-columns:minmax(0,1fr);}
  .rolebox{grid-template-columns:minmax(0,1fr);}
  .topbar nav a:not(.pill--sm){display:none;}
  .ctas{flex-direction:column;align-items:center;}
  .pill{width:100%;max-width:330px;}
  .mega-row{gap:2px;}
  .mega-arrow{transform:rotate(90deg);margin:4px 0;}
}

/* ---------- 인쇄 ---------- */
@media print{
  @page{size:A4 portrait;margin:12mm 10mm;}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  html,body{font-size:11px;}
  .js .rv,.js .bar,.js .bar-v{opacity:1 !important;transform:none !important;transition:none !important;}
  .topbar,.skip,.ctas,.case-go{display:none !important;}
  .wrap{max-width:none !important;padding:0 !important;}
  .band{padding:14px 0 !important;}
  .hero{padding:0 0 14px !important;}
  .act{padding:10px 0 !important;}
  .hero-claim{font-size:24pt !important;}
  .mega{font-size:32pt !important;}
  .title{font-size:18pt !important;}
  .title--sm{font-size:14pt !important;}
  .cases{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:8px !important;}
  .case-hit{padding:10px !important;border-radius:10px !important;box-shadow:none !important;}
  .tiles,.delta-row{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
  .proofs{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .proof img{aspect-ratio:21 / 9;}
  .plot{height:120px !important;margin-top:40px !important;}
  .case,.tile,.job,.act,.proof,.kpi{page-break-inside:avoid;}
}

/* 값 라벨을 뺀 차트는 위쪽 여백이 필요 없다 */
.chart--bare .plot{margin-top:8px;}