@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ============================================================
   Case-study design tokens — shared by all detail pages
   (Medicai, Dale UI, …). Edit here, every page updates.
   ============================================================ */

:root{
  /* color */
  --bg:#FCFCFC; --surface:#FFFFFF; --text:#16191B; --text-soft:#5C6166;
  --text-faint:#6B7176; --line:#E7E7E4; --accent:#00C853; --accent-ink:#00B84B;
  --accent-soft:rgba(0,200,83,0.12); --danger:#C7503A;
  --shadow:0 18px 50px -24px rgba(18,22,20,0.28);
  /* radius scale */
  --r-lg:8px; --r-md:4px; --r-sm:4px; --r-media:8px;
  /* layout — 본문 컨테이너 폭(--wrap)과 좌우 거터 상한(--gutter).
     거터는 [data-wrap] 등의 padding-inline에서 clamp로 "필요할 때만" 유동적으로 나타남(§아래). */
  --wrap:1000px; --gutter:24px;
  /* type */
  --font-sans:Geist, system-ui, sans-serif;
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --bubble-radius:14px 14px 14px 0;
  --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
[data-theme="dark"]{
  --bg:#0C0E0D; --surface:#141615; --text:#ECEEEC; --text-soft:#969C98;
  --text-faint:#7C827C; --line:#232624; --accent:#29E06B; --accent-ink:#4DE988;
  --accent-soft:rgba(41,224,107,0.18); --danger:#E0795F;
  --shadow:0 24px 60px -28px rgba(0,0,0,0.70);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;transition:background .5s ease,color .5s ease}
h1,h2,h3,[data-footer-quote]{font-family:var(--font-display)}
::selection{background:var(--accent);color:#fff}
a{color:inherit;text-decoration:none}

/* side table of contents uses the mono face */
[data-toc-link]{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:0.01em}

/* image / placeholder media boxes — sharp corners, managed in one place */
.media{border-radius:var(--r-media)}

/* ---- adaptive nav: switch to light ink when the bar sits over a dark
   backdrop (hero video at the top, or the whole page in dark mode).
   [data-on-dark] is toggled per-frame in case-study.js from the measured
   background luminance behind each element. ---- */
[data-topnav="brand"][data-on-dark]{color:rgba(255,255,255,.86) !important;text-shadow:0 1px 10px rgba(0,0,0,.55),0 0 2px rgba(0,0,0,.45)}
[data-topnav="center"] a,[data-topnav="center"] button{transition:color .25s ease,background .2s}
nav[data-topnav="center"][data-on-dark]{
  background:color-mix(in srgb,#0a0c0b 48%,transparent);
  border-color:rgba(255,255,255,.18);
}
[data-topnav="center"][data-on-dark] a,
[data-topnav="center"][data-on-dark] button{color:#fff !important}
[data-topnav="center"][data-on-dark] [data-nav-divider]{background:rgba(255,255,255,.24) !important}

/* ---- hero scrim: keep the fixed top nav legible over cover media that
   cycles light<->dark behind the buttons. Sits above the video (z-index:1)
   but below the fixed nav (z-index:50/51), only over the top strip so the
   video body stays untouched. Tone is matched to the nav ink:
   light heroes -> faint white scrim (protects dark ink);
   dark heroes (data-hero-tone="dark") -> dark scrim (protects light ink).
   The dark scrim is strong enough that even a full #fff frame stays dark
   enough behind white text. ---- */
[data-hero-cover]::before{
  content:"";position:absolute;top:0;left:0;right:0;height:96px;z-index:2;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,.78) 0,rgba(255,255,255,.5) 36px,transparent 96px);
}
[data-hero-cover][data-hero-tone="dark"]::before{
  background:linear-gradient(to bottom,rgba(0,0,0,.66) 0,rgba(0,0,0,.5) 36px,transparent 96px);
}
/* dark mode: 라이트 히어로용 흰 scrim이 다크 배경 위에선 흰 안개처럼 떠 보여서 톤을 낮춤 */
[data-theme="dark"] [data-hero-cover]:not([data-hero-tone="dark"])::before{
  background:linear-gradient(to bottom,rgba(255,255,255,.45) 0,rgba(255,255,255,.28) 36px,transparent 96px);
}

@media (max-width:1279px){ [data-toc]{display:none !important} }
/* fluid gutter: 넓은 화면에선 0(이미지가 컨테이너를 꽉 채움), 뷰포트가 컨테이너 폭에 가까워질수록 최대 --gutter까지 좌우 여백이 부드럽게 생김 */
[data-wrap],[data-resp-wrap],[data-resp-foot]{ padding-inline: clamp(0px, calc(var(--wrap) + var(--gutter) * 2 - 100%), var(--gutter)) !important }
@media (max-width:800px){
  [data-2col]{grid-template-columns:1fr !important;gap:32px !important}
  [data-steps3]{grid-template-columns:1fr !important;gap:28px !important}
}
@media (max-width:820px){
  [data-wrap]{padding-left:26px !important;padding-right:26px !important}
  [data-meta]{grid-template-columns:1fr 1fr !important;gap:30px 26px !important}
  [data-resp-foot]{grid-template-columns:1fr 1fr !important;gap:34px 24px !important}
  [data-resp-foot] [data-footer-quote]{grid-column:1 / -1 !important;font-size:1.625rem !important;max-width:22ch !important}
}
@media (max-width:620px){
  [data-nav-social],[data-nav-divider]{display:none !important}
  [data-wrap]{padding-top:52px !important}
  [data-stats]{grid-template-columns:1fr 1fr !important}
  [data-tldr-stats]{grid-template-columns:1fr 1fr !important}
  [data-impact-stats]{grid-template-columns:1fr 1fr !important;gap:24px 20px !important}
  [data-rowsplit]{grid-template-columns:1fr !important;gap:8px !important;align-items:start !important}
  [data-tldr-gallery]{grid-template-columns:repeat(2,1fr) !important}
  [data-bento]{grid-template-columns:1fr !important}
  [data-pillars]{grid-template-columns:1fr !important}
  [data-iter]{grid-template-columns:1fr !important}
  [data-reflect]{grid-template-columns:1fr !important}
  [data-other]{grid-template-columns:1fr !important}
  [data-title]{font-size:2.375rem !important}
  [data-hero-cover]{height:46vh !important;min-height:300px !important}
  [data-brand]{display:none !important}
}


/* ---- image slots: drop <img class="slot"> (or <video class="slot">) into any .media or hero box.
   Until the file loads — or if it 404s — a gray gradient with a centered "?" shows instead. ---- */
.media:has(> img.slot),.media:has(> video.slot),[data-hero-cover]:has(> img.slot),[data-hero-cover]:has(> video.slot){position:relative;overflow:hidden}
.media:has(> img.slot)::after,.media:has(> video.slot)::after,[data-hero-cover]:has(> img.slot)::after,[data-hero-cover]:has(> video.slot)::after{
  content:attr(data-slot-name);position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;border:none;padding:0 12px;text-align:center;box-sizing:border-box;
  background:color-mix(in srgb,var(--text) 3%,var(--bg));
  font:500 13px/1.4 'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;letter-spacing:0.04em;color:color-mix(in srgb,var(--text) 30%,transparent);word-break:break-all}
img.slot,video.slot{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
/* ---- light/dark image swap: drop TWO slots, .slot-light + .slot-dark, and the page shows the one matching the theme ---- */
img.slot-dark,video.slot-dark{display:none}
[data-theme="dark"] img.slot-light,[data-theme="dark"] video.slot-light{display:none}
[data-theme="dark"] img.slot-dark,[data-theme="dark"] video.slot-dark{display:block}
[data-theme="dark"] .media:has(> img.slot)::after,[data-theme="dark"] .media:has(> video.slot)::after,[data-theme="dark"] [data-hero-cover]:has(> img.slot)::after,[data-theme="dark"] [data-hero-cover]:has(> video.slot)::after{
  background:color-mix(in srgb,var(--text) 4%,var(--bg));color:color-mix(in srgb,var(--text) 22%,transparent)}
/* ---- logo-plate: transparent-background logo walls (mostly dark brand marks).
   Light mode sits on the page bg as usual; dark mode lays a white plate under
   the logos so black marks (amazon, Barnes&Noble, Scribd…) never vanish. ---- */
img.logo-plate{background:var(--bg)}
[data-theme="dark"] img.logo-plate{background:#fff}

/* ---- solo-video cover: in a [data-solo-group], every waiting video wears a dark cover
   with a play affordance; the live one fades its cover out. JS injects the element and
   owns play/pause (hover on fine pointers, in-view on touch). No hover scale. ---- */
.media > .solo-cover{
  position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  background:rgba(10,12,11,.44);color:#fff;opacity:1;transition:opacity .28s ease}
.media > .solo-cover .solo-cover-ico{display:flex;opacity:.95}
.media > .solo-cover .solo-cover-txt{
  font:500 0.75rem/1 'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.06em;text-transform:uppercase;opacity:.85}

/* ---- As-is / To-be media toggle: pure CSS (radio :checked), no JS.
   Structure: .mtoggle > [2 radios] > .mtoggle-tabs > .mtoggle-frame(.media){ .mtoggle-pane.pane-asis, .pane-tobe } ---- */
.mtoggle{position:relative}
.mtoggle > input{position:absolute;width:0;height:0;opacity:0;pointer-events:none;margin:0}
.mtoggle-tabs{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-md);background:color-mix(in srgb,var(--text) 6%,transparent);margin-bottom:14px}
.mtoggle-tabs label{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font:500 0.8125rem/1 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint);padding:7px 14px;border-radius:calc(var(--r-md) - 1px);transition:color .2s,background .2s}
.mtoggle-tabs label .dot{width:7px;height:7px;border-radius:50%;flex:none;background:currentColor;opacity:.55}
.mtoggle-frame{position:relative}
.mtoggle-pane{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .4s ease}
.mtoggle-pane.is-static{position:relative;opacity:1;visibility:visible}
/* default (nothing checked) = After (To-be) shown + active */
.mtoggle-pane.pane-tobe{opacity:1;visibility:visible;z-index:1}
.mtoggle-tabs label.tab-tobe{background:var(--accent);color:#fff}
.mtoggle-tabs label.tab-tobe .dot{opacity:1;background:#fff}
/* when Before (As-is) is selected, flip */
.mtoggle > input.is-asis:checked ~ .mtoggle-frame .pane-tobe{opacity:0;visibility:hidden;z-index:1}
.mtoggle > input.is-asis:checked ~ .mtoggle-frame .pane-asis{opacity:1;visibility:visible;z-index:2}
.mtoggle > input.is-asis:checked ~ .mtoggle-tabs label.tab-tobe{background:transparent;color:var(--text-faint)}
.mtoggle > input.is-asis:checked ~ .mtoggle-tabs label.tab-tobe .dot{opacity:.55;background:currentColor}
.mtoggle > input.is-asis:checked ~ .mtoggle-tabs label.tab-asis{background:var(--accent);color:#fff}