/* ============================================
   jihae.info — Case study shell
   2% wrap · 12 columns · rail 1–3 / body 4–12
   body has its own 12-col track:
     text  = 6 of 12  (exactly half → aligns with the left cell of a 2-col image grid)
     g2    = 6 + 6
     g3    = 4 + 4 + 4
   No rules. Separation is whitespace only.
   ============================================ */
@font-face{font-family:'Knockout';src:url('./fonts/Knockout-HTF46-Flyweight.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'HelveticaStd';src:url('./fonts/Helvetica-Light.woff2') format('woff2');font-weight:300;font-display:swap;}
@font-face{font-family:'HelveticaStd';src:url('./fonts/Helvetica-Regular.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'HelveticaStd';src:url('./fonts/Helvetica-Bold.woff2') format('woff2');font-weight:500 700;font-display:swap;}

:root{
  --ink:#161616; --muted:#8f8f8f; --link:#4758fb; --rule:#eee; --wash:#f4f4f4; --bad:#e0323c;
  --card:#f7f7f7; --card-bad:#fdf1f0; --dim:#575757; --wash-soft:#fdf3fe;
  --sans:'HelveticaStd','Pretendard Variable',Pretendard,Helvetica,Arial,sans-serif;
  --display:'Knockout','Arial Narrow',sans-serif;
  --air:clamp(96px,13vw,190px);      /* space between sections */
  --title:clamp(30px,5.6vw,66px);    /* the nav's type size, from site.css */
  --tabh:0px;                        /* chapter bar height, set when present */
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{background:#fff;color:var(--ink);font-family:var(--sans);font-weight:400;
  -webkit-font-smoothing:antialiased;word-break:keep-all;}
a{color:inherit;text-decoration:none;}
img,video{display:block;width:100%;height:auto;}
.wrap{padding:0 2%;}
.wrap--top{padding-top:calc(2% - var(--title) * 0.152);}
@media(max-width:800px){.wrap{padding:0 16px;} .wrap--top{padding-top:calc(16px - var(--title) * 0.152);}}

/* nav, index and footer come from site.css */

/* ---------- type ---------- */
.t-eyebrow{font-size:12px;line-height:18px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.t-body{font-size:16px;line-height:26px;}
.t-label{font-size:14px;line-height:1.4;color:var(--muted);}
.t-title{font-weight:500;font-size:26px;line-height:1.45;letter-spacing:-.02em;}
.t-title--big{font-size:34px;line-height:1.36;}
.t-title--next{margin-top:calc(var(--air) * .38);}
.lead{font-size:16.5px;line-height:27px;color:#555;}

/* ---------- cover: full bleed, no margins ---------- */
.cover{background:var(--wash);aspect-ratio:21/9;overflow:hidden;}
.cover img,.cover video{width:100%;height:100%;object-fit:cover;}
/* the beauty shot, held back from the edges */
.cover--sm{display:flex;align-items:center;justify-content:center;background:#ecf0e1;}  /* the shot's own ground */
.cover--sm img,.cover--sm video{width:90%;height:auto;max-height:100%;object-fit:contain;}
.cover__ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:13px;letter-spacing:.04em;}

/* ---------- story line: sits under the cover ---------- */
.hero{padding:calc(var(--air) * .55) 0 calc(var(--air) * .5);}
.hero__line{font-weight:500;font-size:clamp(26px,3vw,40px);line-height:1.32;letter-spacing:-.025em;
  margin-top:14px;max-width:19em;}

/* ---------- meta bar: no rules ---------- */
.meta-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:var(--air);}
.meta-item .t-label{margin-bottom:8px;}
.meta-val{font-size:15px;line-height:22px;}

/* ---------- left rail index ---------- */
.case,.case-head{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;}
.case-head>*{grid-column:3/span 8;}
.railnav{grid-column:1/span 2;position:sticky;top:calc(var(--air) * .22);align-self:start;
  margin-top:-3.5px;max-height:88vh;overflow:auto;scrollbar-width:none;}
.railnav::-webkit-scrollbar{display:none;}
.railnav{transition:opacity .28s ease;}
.railnav.is-off{opacity:0;pointer-events:none;}
.railnav__ch{font-size:12px;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;
  color:#c2c2c2;margin:18px 0 5px;font-weight:500;padding:0;}
.railnav__ch:first-child{margin-top:0;}
.railnav a{display:block;font-size:12px;line-height:1.3;color:var(--muted);
  padding:3px 0;transition:color .15s;}
.railnav a:hover{color:var(--ink);}
.railnav a.is-on{color:var(--ink);font-weight:500;}
.railnav__ch.is-on{color:var(--ink);}
.case__body{grid-column:3/span 8;min-width:0;}

/* ---------- section shell ---------- */
.section{margin-bottom:var(--air);scroll-margin-top:40px;}
.section__anchor{display:none;}
.section__body{display:grid;grid-template-columns:repeat(12,1fr);
  gap:30px 24px;align-content:start;}
.sec-eyebrow{grid-column:1/-1;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin-bottom:-14px;}
.sec-eyebrow b{color:var(--link);font-weight:500;}
/* a chapter marker: its own line in the link blue, set apart from the section
   label below it, which stays with its title and text */
.sec-chapter{grid-column:1/-1;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--link);font-weight:500;margin-bottom:10px;}
.section__body>.t-title,.section__body>.t-eyebrow{grid-column:1/-1;}
.section__body>.t-body,.section__body>.lead{grid-column:1/span 6;}
/* a picture on its own wash: the gap around it is 14% of the picture's width,
   which solves to 10.94% padding on the container */
.figbox-w{width:100%;}   /* the container shares the body's own left edge */
.figbox{background:var(--wash);padding:10.94%;}
.figbox img,.figbox video{display:block;width:100%;height:auto;}
/* a short container: 70% of the height it would otherwise take, with the
   picture fitted inside it and the 14% gap kept on the short side */
.figbox--short{aspect-ratio:2.02;display:flex;align-items:center;justify-content:center;
  padding:0;}
.figbox--short img,.figbox--short video{width:auto;height:78.1%;max-width:78.1%;}
@media(max-width:860px){.figbox{padding:8%;}.figbox--short{aspect-ratio:auto;padding:8%;}
  .figbox--short img,.figbox--short video{width:100%;height:auto;max-width:100%;}}

/* the opening summary: a bold label then the sentence, same as Safety */
.tldr{grid-column:1/span 8;display:flex;flex-direction:column;gap:20px;}
@media(max-width:1180px){.tldr{grid-column:1/span 10;}}
.section__body>.full,.section__body>.grid,.section__body>.cards,.section__body>.note{grid-column:1/-1;}
.section__body>.half{grid-column:1/span 6;}

/* feature hierarchy: a tier, then the components that belong in it.
   The names sit under the components as text, not baked into a picture,
   and each component is shown at its real size relative to the others. */
.hier__tier{margin-bottom:40px;}
.hier__tier:last-child{margin-bottom:0;}
.hier__lab{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink);font-weight:500;margin-bottom:12px;}
.hier__lab b{font-weight:inherit;}
.hier__box{background:var(--wash);height:110px;
  display:flex;align-items:center;justify-content:center;}
/* each component at its real size relative to the others: a pill is taller
   than the bare icon-and-label it holds, and the app chip is taller again */
.hier__box img{width:auto;height:38px;max-width:82%;}   /* pill — 좌우 여백을 남긴다 */
.hier__box img.is-label{height:24px;}        /* icon + label, no pill */
.hier__box img.is-icon{height:44px;}         /* icon button */
.hier__box img.is-app{height:52px;}          /* app chip */
@media(max-width:800px){.hier__box{height:92px;}}

/* 62vh 상한 — 그리드 정렬과 함께 성립시키는 방법.
   컨테이너는 컬럼 폭을 그대로 지켜서 양 끝이 그리드에 붙어 있고, 그 안에서
   그림만 줄어든다. 그림이 이미 자기 바탕색을 들고 있으므로 컨테이너에 같은
   바탕을 깔면 줄어든 자리에 이음매가 보이지 않는다.
   (상한을 그림에만 걸고 컨테이너를 비워두면 상자가 좁아지면서 컬럼에서 떨어진다.) */
.full:has(> img), .full:has(> video),
.grid figure > div:not(.hier__box):has(> img),
.grid figure > div:not(.hier__box):has(> video),
.cards figure > div:has(> img){
  display:flex;align-items:center;justify-content:center;background:var(--wash);}
.full.soft:has(> img){background:var(--wash-soft);}
/* 폭은 컬럼을 그대로 채우고(그리드 정렬·로딩 전 자리 확보), 높이만 62vh에서 멈춘다.
   멈춘 만큼은 object-fit 이 레터박스로 남기고 컨테이너의 같은 회색이 비쳐서
   이음매가 보이지 않는다. width:auto 로 두면 로딩 전 크기가 0이 되어 자리가 밀린다. */
.full > img, .full > video,
.grid figure > div:not(.hier__box) > img,
.grid figure > div:not(.hier__box) > video,
.cards figure > div > img{
  width:100%;height:auto;max-height:62vh;object-fit:contain;}

/* ---------- blocks ---------- */
.grid{display:grid;gap:30px 24px;grid-template-columns:repeat(12,1fr);}
.grid>*{grid-column:span 6;}
.g3>*{grid-column:span 4;}
.g1>*{grid-column:1/-1;}   /* one wide picture per row, for figures too dense to halve */
figure{margin:0;}
.stack{display:flex;flex-direction:column;gap:12px;}
.pill{display:inline-flex;width:fit-content;max-width:100%;font-size:11.5px;font-weight:500;
  color:var(--muted);background:var(--wash);border-radius:999px;padding:4px 12px;margin-bottom:12px;}
.pill--bad{background:var(--card-bad);color:var(--bad);}
.pill--on{background:#ededfd;color:var(--link);}
.cap{font-size:13.5px;line-height:1.7;color:var(--dim);margin-top:14px;}
.cap b{display:block;color:var(--ink);font-weight:500;font-size:15px;margin-bottom:6px;}
.cap .warn{color:var(--bad);display:block;margin-top:6px;}

/* closing line — blue text, no box (matches the deck) */
.note p{font-size:15px;line-height:1.7;color:var(--link);font-weight:500;}

/* cards replace the old ruled rows */
.cards{display:grid;gap:24px;grid-template-columns:repeat(12,1fr);}
.cards>*{grid-column:span 4;}
.cards--2>*{grid-column:span 6;}
.cards--1>*{grid-column:span 12;}
.card{background:var(--card);padding:24px 24px 26px;}
.card--bad{background:var(--card-bad);}
.card__k{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;}
.card--bad .card__k{color:var(--bad);}
.card__t{font-weight:500;font-size:16.5px;line-height:1.45;letter-spacing:-.01em;margin-bottom:10px;}
.card__d{font-size:14.5px;line-height:1.75;color:var(--dim);}

@media(max-width:1280px){
  .case__body,.case-head>*{grid-column:3/span 9;}
}
@media(max-width:1100px){
  .section__body>.t-body,.section__body>.lead{grid-column:1/span 8;}
}
@media(max-width:860px){
  :root{--air:clamp(64px,16vw,110px);}
  .cover{aspect-ratio:16/10;}
  .case,.case-head{display:block;}
  .railnav{display:none;}
  .case__body{grid-column:auto;}
  .section__body{grid-template-columns:1fr;}
  .section__body>*{grid-column:1/-1 !important;}
  .grid,.cards{grid-template-columns:1fr;}
  .grid>*,.cards>*{grid-column:1/-1;}
  .meta-bar{grid-template-columns:1fr;}
  .meta-bar>.meta-item:first-child,.meta-bar__grid{grid-column:1/-1;}
  .meta-bar__grid{grid-template-columns:1fr;}
}
@media print{
  body{font-size:10pt;} .landing-nav,.site-foot,.railnav{display:none;}
  .case,.case-head{display:block;}
  .section{display:block;margin-bottom:12mm;break-inside:avoid;}
  .section__body{display:block;} .grid,.cards{display:block;}
  img,video{max-height:80mm;width:auto;} @page{margin:14mm;}
}

/* the overview's lead picture gets a longer pause before the story starts */
#project-overview .section__body>.full+.t-body{margin-top:34px;}
@media(max-width:860px){#project-overview .section__body>.full+.t-body{margin-top:14px;}}

/* a link out to the full deck: the site's one link style, blue with an arrow
   (.proj-link, in proj.css) — under the meta bar, or at the end of a section */
.meta-bar:has(+ .case-link){margin-bottom:40px;}
.case-head>.case-link{margin-bottom:var(--air);}
.section__body>.cap{margin-top:-16px;}   /* a caption sits under its picture */

/* soft theme: a very light grey page, so screens drawn on white sit on white
   containers — the containers flip from the wash to white */
body.theme-soft{background:#fff;}   /* the grey (#fafafa) is painted by script from the soft-start section down */
.theme-soft .figbox{background:#fff;}
.theme-soft .pill:not(.pill--bad):not(.pill--on){background:#fff;}

/* two frictions inside one container */
.card--stack .card__d{margin-bottom:20px;}
.card--stack .card__d:last-child{margin-bottom:0;}

/* user test result — image in the site's wash box, statement under it */
.figbox--round img{border-radius:8px;}

/* participant quotes — numbered, no rule */
.vqs{counter-reset:vq;display:flex;flex-direction:column;justify-content:center;}
.vq{position:relative;margin:0 0 26px;padding-left:44px;}
.vq:last-child{margin-bottom:0;}
.vq::before{counter-increment:vq;content:counter(vq);position:absolute;left:0;top:1px;width:26px;height:26px;border-radius:999px;background:var(--card);color:var(--ink);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;}
.vq p{font-size:16.5px;line-height:27px;font-weight:700;color:var(--ink);margin:0 0 8px;}
.vq cite{font-style:normal;font-size:13.5px;line-height:1.7;color:var(--dim);}

/* phones — see site.css; repeated because case.css redefines --title */
@media(max-width:600px){
  .landing-nav{flex-wrap:wrap;row-gap:6px;}
  /* back to top stays on the last project's line, flush right like .archive above */
  .site-foot__top{margin-left:auto;}
}

/* ---- narrow screens only (max-width:860px) ---- */
@media(max-width:860px){
  :root{--title:clamp(40px,11.2vw,48px);}
  /* the 62vh height cap is for wide screens. Here every picture scales with its
     column at its own ratio, so nothing is letterboxed into a second grey */
  .full > img,.full > video,
  .grid figure > div:not(.hier__box) > img,
  .grid figure > div:not(.hier__box) > video,
  .cards figure > div > img{max-height:none;}
  /* the cover shows the whole picture at its own ratio instead of cropping it */
  .cover:not(.cover--sm):not(:has(.cover__ph)){aspect-ratio:auto;}
  .cover:not(.cover--sm) img,.cover:not(.cover--sm) video{height:auto;object-fit:contain;}
  /* Overview: the final comparison sits in a square, and the three placements
     share the container ratio of the adaptive rule pictures (600:382) */
  #device-consistency .grid.g1 figure > div{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--wash);}
  #device-consistency .grid.g1 figure > div > img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;}
  #core-action .grid.g3 figure > div{position:relative;aspect-ratio:600/382;overflow:hidden;background:var(--wash);}
  #core-action .grid.g3 figure > div > img{position:absolute;left:50%;top:50%;width:76.8%;height:auto;max-width:none;max-height:none;transform:translate(-50%,-47%);}
}