/* 기술 상세 화면 여섯(국문 셋·영문 셋)이 함께 쓰는 규격입니다.
   pages.json 의 "css": "tech-detail" 로 걸려 있습니다.

   이 파일만은 #p-<화면이름> 접두사를 붙이지 않습니다. 옮겨 온 화면들과 달리
   처음부터 이 여섯 화면에만 실리는 파일이고, 이름도 여기에서만 쓰는 것들이라
   다른 화면과 겹칠 일이 없기 때문입니다. base.css 다음에 실리므로 같은 이름이
   있어도 이쪽이 이깁니다. */

/* ── 첫 화면 ────────────────────────────────────────────── */
/* 자리를 잡아 두어야 배경 상자가 이 안에 갇힙니다. 이것을 빠뜨리면
   .hbg 가 화면 전체를 기준으로 잡혀 아래 밴드까지 검게 덮습니다. */
.hero{position:relative;isolation:isolate;overflow:hidden}
/* 사진이 아직 없는 자리는 이름만 적힌 상자로 둡니다. */
.hero .hbg{position:absolute;inset:0;z-index:0;background:var(--surface-deep);
  display:flex;align-items:flex-end;justify-content:flex-start;padding:var(--s-lg)}
.hero .hbg span{font-size:11px;color:rgba(255,255,255,.35)}
.hero .hbg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.6)}
.hero .inner{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.hero .hbg::after{background:rgba(0,0,0,.66)}}


/* ── 밴드 머리 ──────────────────────────────────────────── */
.bhead{display:flex;flex-direction:column;align-items:flex-start}
.bhead h2{margin-top:var(--s-sm)}
.bhead .lede{font-size:17px;line-height:1.7;color:var(--mute);margin-top:var(--s-lg);max-width:62ch}
/* 안내가 한 문장이면 62ch 에서 잘려 두 줄이 됩니다. 한 줄로 세울
   문장에만 상자를 풀어 줍니다. 여러 줄짜리 문단은 그대로 62ch 를 씁니다. */
.bhead .lede.one{max-width:none}
.band.dark .bhead .lede{color:var(--on-dark-mute)}

/* ── 세 칸 ──────────────────────────────────────────────
   셋이 두 열로 접히면 마지막 하나가 줄에 혼자 남습니다.
   세 열에서 곧바로 한 열로 세웁니다. */
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-xl);margin-top:var(--s-xxxl)}
@media(max-width:900px){.cards3{grid-template-columns:1fr;gap:var(--s-xl)}}
.cards3 .c{border-top:1px solid var(--hairline-strong);padding-top:var(--s-md);
  display:flex;flex-direction:column}
.band.dark .cards3 .c{border-top-color:var(--divider-dark)}
.cards3 .k{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--ash)}
.band.dark .cards3 .k{color:rgba(255,255,255,.5)}
.cards3 .t{font-size:19px;font-weight:700;line-height:1.35;color:var(--ink);margin-top:6px}
.band.dark .cards3 .t{color:var(--on-dark)}
.cards3 .d{font-size:15px;line-height:1.75;color:var(--charcoal);margin-top:var(--s-lg)}
.band.dark .cards3 .d{color:var(--on-dark-mute)}

/* ── 두 칸 ──────────────────────────────────────────────
   나란히 놓이는 칸은 눈에 한 줄로 읽혀야 합니다. 두 가지를 맞춥니다.

   하나, 사진과 영상의 높이입니다. 원본 비율이 서로 다르면 한 비율로
   고정하고 넘치는 만큼 잘라 씁니다. 홀로 서는 그림은 원본 비율을
   그대로 두지만, 목록에 나란히 서는 것은 칸 높이가 같아야 합니다.

   둘, 설명의 줄 수입니다. 한쪽이 두 줄이고 다른 쪽이 한 줄이면 아래
   끝이 어긋납니다. 그림 줄과 설명 줄을 바깥 격자의 같은 칸에 세워
   (subgrid) 줄 수가 달라도 끝이 맞도록 합니다. */
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-xl);margin-top:var(--s-xxxl)}
@media(max-width:767px){.two{grid-template-columns:1fr}}

@media(min-width:768px){
  .two > .fig{display:grid;grid-row:span 2;grid-template-rows:subgrid;gap:0}
}
/* 넉 장을 한 줄에 놓습니다. 둘씩 두 줄로 두면 한 칸이 564px 정사각이 되어
   밴드가 과하게 커집니다. 넷은 4·2·1 어느 열에서도 나누어떨어집니다. */
.two.four{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-md)}
@media(max-width:900px){.two.four{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-xl)}}
@media(max-width:560px){.two.four{grid-template-columns:1fr}}
@media(min-width:561px){.two.four > .fig{grid-row:span 2;grid-template-rows:subgrid}}
.two.four .figcap{font-size:13px;line-height:1.65}

/* 가로로 긴 것끼리 */
.two.wide > .fig .figv{aspect-ratio:16/9}
.two.wide > .fig .figm{aspect-ratio:16/9;object-fit:cover}
/* 정사각에 가까운 것끼리 */
.two.square > .fig .figv{aspect-ratio:1/1}
.two.square > .fig .figm{aspect-ratio:1/1;object-fit:cover}

/* ── 사진과 영상 ───────────────────────────────────────────
   비율은 고정하지 않고 원본을 따릅니다. 영상은 첫 장면(poster)만 세워
   두고 파일은 내려받지 않다가, 손을 얹거나 누르면 그때 재생합니다.
   그래서 화면을 열 때 받는 것은 첫 장면 그림 한 장뿐입니다. */
.fig{margin:0;display:flex;flex-direction:column}
.figm{display:block;width:100%;height:auto;background:var(--surface-soft)}
.band.dark .figm{background:var(--surface-deep)}
/* 상자가 비율을 쥐고, 영상은 그 안을 채웁니다. 영상을 흐름 안에 두면
   제 비율로 상자의 높이를 밀어 올려, 옆 칸과 높이가 어긋납니다. */
.figv{position:relative;display:block;line-height:0;overflow:hidden;background:var(--surface-soft)}
.band.dark .figv{background:var(--surface-deep)}
.figv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* 이름은 회색 작은 글씨로 두면 사진 위에서 묻힙니다.
   왼쪽 아래에 검은 띠를 깔고 흰 글씨로 적습니다. */
.figv .lbl{position:absolute;left:0;bottom:0;display:inline-flex;align-items:center;gap:6px;
  background:var(--surface-dark);color:var(--on-dark);font-size:11px;font-weight:700;
  letter-spacing:.02em;line-height:1;padding:7px 10px}
.figv .lbl::before{content:"";width:0;height:0;border-style:solid;
  border-width:4px 0 4px 6px;border-color:transparent transparent transparent #fff}
.figv.playing .lbl::before{border-width:0;width:6px;height:8px;
  background:linear-gradient(90deg,#fff 0 2px,transparent 2px 4px,#fff 4px 6px)}
@media(hover:hover){.figv{cursor:pointer}}

/* ── 아직 받지 못한 자리 ───────────────────────────────────
   사진이나 영상이 아직 없는 자리는 이름만 적힌 상자로 둡니다. */
.figbox{aspect-ratio:16/9;background:var(--surface-soft);display:flex;flex-direction:column;
  align-items:flex-start;justify-content:flex-end;gap:2px;padding:var(--s-md)}
.band.dark .figbox{background:var(--surface-deep)}
.figbox .nm{font-size:12px;font-weight:700;color:var(--charcoal)}
.band.dark .figbox .nm{color:var(--on-dark-mute)}
.figbox .mt{font-size:11px;color:var(--ash)}
.band.dark .figbox .mt{color:rgba(255,255,255,.35)}
.figcap{font-size:14px;line-height:1.7;color:var(--mute);margin-top:var(--s-sm)}
.band.dark .figcap{color:var(--on-dark-mute)}

/* ── 지표 줄 ──────────────────────────────────────────────
   왼쪽에 무엇을 잰 것인지, 오른쪽에 값을 둡니다. */
.mrows{margin-top:var(--s-xxl);border-top:1px solid var(--hairline-strong)}
.band.dark .mrows{border-top-color:var(--divider-dark)}
.mrows .rw{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-lg);align-items:baseline;
  padding:var(--s-md) 0;border-bottom:1px solid var(--hairline)}
.band.dark .mrows .rw{border-bottom-color:var(--divider-dark)}
.mrows .k{font-size:16px;line-height:1.6;color:var(--charcoal)}
.band.dark .mrows .k{color:var(--on-dark-mute)}
.mrows .n{font-size:20px;font-weight:700;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.band.dark .mrows .n{color:var(--on-dark)}
/* 표 아래에 조건을 작게 답니다. 숫자를 가리지 않으면서 근거는 남깁니다.
   묻는 사람에게는 보이고, 훑는 사람의 눈은 숫자에 머무릅니다. */
.mrows + .mfine{margin-top:var(--s-md);font-size:13px;line-height:1.7;color:var(--ash)}
.band.dark .mrows + .mfine{color:rgba(255,255,255,.5)}
.mrows .rw.hi .k{color:var(--ink);font-weight:700}
.band.dark .mrows .rw.hi .k{color:var(--on-dark)}

/* 머리 상자의 이름은 .atehd 입니다. .hd 는 컴퍼니 첫 화면이 쓰는 이름이고
   .hero,.hd{min-height:72vh} 가 접두사 없이 걸려 있어, 그 이름을 쓰면
   머리가 화면 높이의 72% 로 부풀어 막대가 한참 아래로 밀려납니다. */
/* ── 궤적 오차 비교 막대 ──────────────────────────────────────
   그림으로 넣으면 글자가 그림 안에 박혀, 영문 화면에도 한국어가 그대로
   남습니다. 글자는 글자로 두고 막대만 폭으로 그립니다. 그래야 두 언어가
   같은 그림을 쓰고, 화면을 키워도 흐려지지 않으며, 읽어 주는 기기도
   숫자를 그대로 읽습니다. 막대는 숫자를 되풀이할 뿐이라 건너뛰게 둡니다. */
.ate{margin:var(--s-xxl) 0 0;padding:0}
.ate .atehd{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-xs);
  padding-bottom:var(--s-lg);border-bottom:1px solid var(--hairline-strong)}
.ate .atehd .k{font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--mute)}
.ate .atehd .t{font-size:18px;font-weight:700;line-height:1.4;color:var(--ink)}
.ate .atehd .d{font-size:14px;line-height:1.7;color:var(--mute)}
.ate .r{display:grid;grid-template-columns:136px minmax(0,1fr) 88px 116px;
  gap:var(--s-md);align-items:center;
  padding:var(--s-md) 0;border-bottom:1px solid var(--hairline)}
.ate .alg{font-size:15px;font-weight:700;color:var(--charcoal)}
.ate .r.ours .alg{color:var(--ink)}
/* 막대는 가장 큰 값을 100% 로 두고 폭을 나눕니다. 우리 값만 먹으로 채워
   한눈에 구분되게 하고, 비교군은 옅은 회색으로 물러나 있게 합니다. */
.ate .bar{display:block;height:10px;background:var(--hairline)}
/* 막대는 화면에 들어올 때 0에서 제 길이까지 차오릅니다. 폭은 마크업에
   적혀 있으므로, 자바스크립트가 없거나 움직임을 줄이도록 설정한 분에게는
   처음부터 제 길이로 서 있습니다. 줄어드는 쪽이 아니라 늘어나는 쪽이라
   중간에 멈춰도 값이 과장되어 보이지 않습니다. */
.ate .bar i{display:block;height:100%;background:var(--stone);
  transition:width .9s cubic-bezier(.22,.61,.36,1)}
@media(prefers-reduced-motion:reduce){.ate .bar i{transition:none}}
.ate .r.ours .bar i{background:var(--ink)}
.ate .v{font-size:15px;font-weight:700;color:var(--ink);text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.ate .v em{font-style:normal;font-size:12px;font-weight:400;color:var(--mute);margin-left:2px}
.ate .cut{font-size:12px;line-height:1.4;color:var(--mute);text-align:right}
.ate .note{font-size:12px;line-height:1.6;color:var(--ash);margin-top:var(--s-md)}
/* 비교표가 둘일 때는 나란히 놓습니다. 같은 실험의 두 부하를 위아래로 길게
   늘어놓는 것보다 한눈에 견주기 쉽습니다. 감싸는 상자에만 걸어, 표가 하나인
   화면(측위)은 그대로 둡니다. 칸이 절반으로 좁아지므로 이름·값·차이 칸도
   함께 줄여 막대가 설 자리를 남깁니다. */
.ates{margin-top:var(--s-xxl);display:grid;grid-template-columns:1fr 1fr;gap:var(--s-xxxl)}
.ates > .ate{margin-top:0;min-width:0}
.ates .r{grid-template-columns:104px minmax(0,1fr) 76px 84px;gap:var(--s-sm)}
.ates .atehd .d{min-height:3.4em}
@media(max-width:1023px){
  .ates{grid-template-columns:1fr;gap:0}
  .ates > .ate{margin-top:var(--s-xxl)}
  .ates .r{grid-template-columns:136px minmax(0,1fr) 88px 116px;gap:var(--s-md)}
  .ates .atehd .d{min-height:0}
}
/* 좁은 화면에서는 네 칸이 한 줄에 들어가지 않습니다. 이름과 값을 위에
   나란히 두고, 막대와 설명을 그 아래로 내려 한 덩어리로 읽히게 합니다. */
@media(max-width:640px){
  .ate .r{grid-template-columns:minmax(0,1fr) auto;gap:8px var(--s-sm)}
  .ate .bar{grid-column:1 / -1;order:3}
  .ate .cut{grid-column:1 / -1;order:4;text-align:left}
}
.band.dark .ate .atehd .t{color:var(--on-dark)}
.band.dark .ate .atehd .d,.band.dark .ate .cut{color:var(--on-dark-mute)}
.band.dark .ate .alg,.band.dark .ate .v{color:var(--on-dark)}
.band.dark .ate .r{border-bottom-color:var(--divider-dark)}
.band.dark .ate .atehd{border-bottom-color:var(--divider-dark)}
.band.dark .ate .bar{background:rgba(255,255,255,.14)}
.band.dark .ate .r.ours .bar i{background:var(--on-dark)}


/* ── 쓰임 목록 ── */
.uses{list-style:none;margin:var(--s-xxl) 0 0;padding:0;border-top:1px solid var(--hairline-strong)}
.band.dark .uses{border-top-color:var(--divider-dark)}
.uses li{padding:var(--s-lg) 0;border-bottom:1px solid var(--hairline);
  display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--s-lg);align-items:baseline}
.band.dark .uses li{border-bottom-color:var(--divider-dark)}
@media(max-width:767px){.uses li{grid-template-columns:1fr;gap:6px}}
.uses .t{font-size:17px;font-weight:700;line-height:1.4;color:var(--ink)}
.band.dark .uses .t{color:var(--on-dark)}
.uses .d{font-size:16px;line-height:1.75;color:var(--charcoal)}
.band.dark .uses .d{color:var(--on-dark-mute)}

/* ── 출처 한 줄 ── */
.srcnote{font-size:13px;line-height:1.7;color:var(--ash);margin-top:var(--s-lg)}
.band.dark .srcnote{color:rgba(255,255,255,.5)}

/* ── 옆 화면으로 ────────────────────────────────────────── */
.sibs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-md);
  margin-top:var(--s-xxl);border-top:1px solid var(--hairline-strong);padding-top:var(--s-lg)}
@media(max-width:767px){.sibs{grid-template-columns:1fr;gap:0}}
.sibs a{display:flex;flex-direction:column;gap:6px;padding:var(--s-md) 0}
@media(max-width:767px){.sibs a{border-bottom:1px solid var(--hairline)}}
.sibs .k{font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--ash)}
.sibs .t{font-size:19px;font-weight:700;line-height:1.3;color:var(--ink)}
.sibs a:hover .t{text-decoration:underline;text-underline-offset:4px}
.sibs .d{font-size:14px;line-height:1.65;color:var(--mute)}

/* ── 마무리 제안 ── */
.cta{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-lg)}
.cta p{color:var(--on-dark-mute);max-width:52ch}