/* 하위 페이지 (/about/, /works/, /works/{slug}/, /privacy/, 404). 값은 tokens.css의 변수만 읽는다. */

/* ───────── 배너 (고객 제공 사진 + 네이비 오버레이, 비율은 --pb-overlay) ─────────
   사진 파일은 scripts/make-banners.mjs가 글자·후광·전선·빨간색이 없는 구간만 잘라 만든다 (파일 밖 부분은 보이지 않는다) */
.page-banner { --pb-visible: 216px; position: relative; display: flex; align-items: flex-end; height: calc(var(--header-h) + var(--pb-visible)); overflow: hidden; }
.pb-img { position: absolute; inset: 0; overflow: hidden; }
.pb-draw { color: var(--line-3); }
.bn-svg { width: 100%; height: 100%; }
.bn-svg .bn-line, .bn-svg .bn-thin, .bn-svg .bn-axis, .bn-svg .bn-dash, .bn-svg .bn-dim { fill: none; vector-effect: non-scaling-stroke; }
.bn-svg .bn-dash { stroke: var(--line-3); stroke-width: 1; stroke-dasharray: 10 6; }
.bn-svg .bn-line { stroke: var(--line-3); stroke-width: 1.2; }
.bn-svg .bn-thin { stroke: var(--line-2); stroke-width: .8; }
.bn-svg .bn-axis { stroke: var(--line); stroke-width: .8; stroke-dasharray: 6 6; }
.bn-svg .bn-dim { stroke: var(--accent); stroke-width: 1; }
.bn-svg .bn-txt { fill: var(--ink-3); font-family: var(--font-mono); font-size: 10px; }
.pb-img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
.page-banner::after { content: ""; position: absolute; inset: 0; background: color-mix(in oklab, var(--navy) var(--pb-overlay, 65%), transparent); }
.pb-in { position: relative; z-index: 2; width: 100%; padding-bottom: var(--s-6); }
.pb-in .sheetbar { margin-bottom: var(--s-5); }
.page-banner h1 { font-size: var(--fs-h2); line-height: 1.2; letter-spacing: -.035em; }

/* ───────── 본문 영역 ───────── */
.page-sec { padding: calc(var(--s-8) + var(--s-3)) 0 calc(var(--sp) * .6); }
.page-sec.top { padding-top: calc(var(--header-h) + var(--s-7)); }
.page-head { margin-bottom: var(--s-7); }
.page-head .sheetbar { margin-bottom: var(--s-5); }
.page-head h1 { font-size: var(--fs-h2); line-height: 1.2; letter-spacing: -.035em; }
.page-head .badge { font-size: var(--fs-small); letter-spacing: 0; vertical-align: middle; }
.works-tabs { margin-bottom: var(--s-6); }

/* ───────── /works/ 목록 (R5 [W1]) ─────────
   6칸 격자, 줄 틀은 lib/works.js layoutWorks(): 큰 칸(4)+세로 칸(2) / 3장(2·2·2) / 반반(3·3) / 전체 폭(6). 카드 비율은 틀마다 고정, 사진은 object-fit cover.
   모서리 0·그림자 없음. 모션은 transform·opacity만: 등장 덮개 scaleX, 단계 사진 opacity, 진행 막대 scaleX, 탭 전환 FLIP translate */
.wk-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-5); }
.wk-card { grid-column: span 2; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-5); border: var(--bw) solid var(--line); background: color-mix(in oklab, var(--bg) 55%, var(--white)); }
.wk-card[hidden] { display: none; }
.wk-big { grid-column: span 4; }
.wk-half { grid-column: span 3; }
.wk-wide { grid-column: 1 / -1; }
.wk-media { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--ph); }
.wk-big .wk-media, .wk-half .wk-media { aspect-ratio: 16 / 10; }
.wk-tall .wk-media { flex: 1; aspect-ratio: auto; min-height: 240px; } /* 큰 칸과 같은 줄 높이를 사진이 채운다 */
.wk-wide .wk-media { aspect-ratio: 21 / 9; }
.wk-cover, .wk-st, .wk-veil { position: absolute; inset: 0; }
.wk-media picture, .wk-media img { display: block; width: 100%; height: 100%; }
.wk-media img { object-fit: cover; }
.wk-media .ph { position: absolute; inset: 0; }
.wk-st { opacity: 0; transition: opacity .35s var(--ease); }
.wk-st.on { opacity: 1; }
.wk-prog { display: block; height: 2px; margin-top: calc(var(--s-3) * -1 + 2px); background: var(--accent); transform: scaleX(0); transform-origin: left center; }
.wk-info h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 22px; line-height: 1.35; }
.wk-info h3 a:hover { color: var(--accent); }
.wk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-3); }
.wk-spec { color: var(--ink-2); font-size: var(--fs-small); }
/* 등장(R6 [W1-m2]): 도면 종이 + 분류 윤곽. html.mo(모션 허용+JS)에서만 첫 화면부터 덮고, site.js가 화면에 들어온 카드에 .in →
   ① 도면 그리기 0.6초: 선 묶음(바깥 윤곽 .bl-line → 층·창 보조선 .bl-thin → 접지선·치수선 .bl-dash/.bl-acc/.bl-fill)이 차례로 opacity 0→1 + scale .94→1
   ② 머무르기 0.4초(완성된 도면 그대로) ③ 사진으로 바뀌기 0.6초: 도면 opacity 1→0, 사진 opacity 0→1 + 칸 안에서 scale 1.06 → 1. 옆으로 미는 움직임 없음.
   .done은 끝난 상태(탭 전환 때는 site.js가 바로 .done을 붙여 다시 재생하지 않는다). 초기화 실패(.rc-off)·JS 없음·모션 줄이기면 덮개 없이 처음부터 완성 상태 */
.wk-veil { z-index: 2; display: none; padding: var(--s-4); background: color-mix(in oklab, var(--bg) 86%, var(--ink-on-light)); }
.wk-veil svg { width: 100%; height: 100%; }
.wk-veil svg * { vector-effect: non-scaling-stroke; }
.wk-veil svg > * { transform-box: view-box; transform-origin: 50% 50%; }
.mo:not(.rc-off) .wk-veil { display: block; }
.mo:not(.rc-off) .wk-card:not(.in) .wk-cover { opacity: 0; transform: scale(1.06); }
.mo:not(.rc-off) .wk-card:not(.in) .wk-veil svg > * { opacity: 0; transform: scale(.94); }
.wk-card.in .wk-veil svg > * { transition: opacity .25s var(--ease) var(--wk-d, 0s), transform .25s var(--ease) var(--wk-d, 0s); }
.wk-card.in .wk-veil svg > .bl-thin { transition-delay: calc(var(--wk-d, 0s) + .175s); }
.wk-card.in .wk-veil svg > :not(.bl-line):not(.bl-thin) { transition-delay: calc(var(--wk-d, 0s) + .35s); }
.wk-card.in .wk-veil { opacity: 0; transition: opacity .6s var(--ease) calc(var(--wk-d, 0s) + 1s); }
.wk-card.in .wk-cover { transition: opacity .6s var(--ease) calc(var(--wk-d, 0s) + 1s), transform .6s var(--ease) calc(var(--wk-d, 0s) + 1s); }
.wk-card.done .wk-veil { display: none; }
.wk-card.done .wk-cover { transition: none; }
.empty { padding: var(--s-7) 0; color: var(--ink-2); }

.page-sec.about #strengths { margin: var(--s-8) 0; }
.page-sec.about #strengths h2 { margin-bottom: var(--s-6); font-size: var(--fs-h3-sm); }
.page-sec.about .strength-grid { margin-top: 0; }
/* R4 [K] 회사소개: 왼쪽 인사말·소개 그대로, 오른쪽 빈 곳에 원색 전체 로고. 각진 흰 칸(테두리 없음, 위쪽 3px 베이지 선) — 흰 바탕이 격자를 가려 칸 안에서만 격자가 안 보인다 */
.about-top { display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.about-logo { position: relative; z-index: 1; display: grid; place-items: center; padding: var(--s-8) var(--s-7); background: var(--white); border-top: 3px solid var(--brand-beige); }
.about-logo img { width: 100%; max-width: 280px; height: auto; }
/* R5 [F4·F5] 대표 시공 사례 줄: 화면 전체 폭 남색 섹션(s-dark, 위아래 --sp). 원본 비율 그대로 큰 1장(왼쪽) + 작은 2장(오른쪽 위아래), 가운데 정렬.
   1440 높이 약 520px: 폭 851px에서 열 2.226 : 1이면 세 사진 비율(1280×1079, 1226×940, 1083×992)과 설명 줄 높이로 양쪽 높이가 같다 —
   폭이 줄면 남는 몇 px만 큰 사진이 object-fit으로 흡수. 설명은 사진 아래. 모서리 0, 그림자·필터·오버레이 없음 */
/* R5 [F6] 위아래 안쪽 여백 --sp의 65%(1440: 112 → 72.8px, 390: 62 → 40.3px). 제목은 본문 왼쪽 끝(대표 인사말)에, 링크 오른쪽 끝은 사진 줄 오른쪽 끝(851px 가운데 정렬)에 */
.about-photo-sec { padding: calc(var(--sp) * .65) 0; }
.ap-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-4); margin: 0 0 var(--s-6); }
.ap-head h2 { font-size: var(--fs-h3-sm); }
.about-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
.about-photos figure { margin: 0; }
/* R5 [F6-2] 같은 크기 3칸. 가로:세로 8:7이면 세 사진 모두 건물 전체(꼭대기~1층 바닥)가 보인다 — 건물 세로 범위가 가장 큰 3번째 사진(폭 대비 .843~.916)의 가운데 값. 폭에 따라 높이가 같이 변해 어느 폭에서도 같은 결과 */
.about-photos picture { display: block; aspect-ratio: 8 / 7; overflow: hidden; background: var(--ph); }
.about-photos img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-photos figcaption { margin-top: var(--s-2); color: var(--ink-3); font-size: var(--fs-small); }
/* 등장(site.js .rv 재사용): 사진 칸이 아래에서 올라오고(0.12초 간격), 사진은 칸 안에서 1.04 → 1, 설명은 그 뒤 opacity. html.mo 없으면 처음부터 완성 상태 */
.mo .about-photos img { transition: transform .9s var(--ease) var(--rv-d, 0s); }
.mo .about-photos .rv:not(.rv-in) img { transform: scale(1.04); }
.mo .about-photos figcaption { transition: opacity .45s var(--ease) calc(var(--rv-d, 0s) + .35s); }
.mo .about-photos .rv:not(.rv-in) figcaption { opacity: 0; }
.prose { display: grid; gap: var(--s-7); max-width: 760px; }
.prose h2 { margin-bottom: var(--s-3); font-size: var(--fs-h3-sm); }
.prose p, .prose li { color: var(--ink-2); }
.prose ul { display: grid; gap: var(--s-2); padding-left: 1.2em; list-style: disc; }
.prose .st-list { display: grid; gap: var(--s-5); padding-left: 0; list-style: none; }
.prose .st-list h3 { margin-bottom: var(--s-2); font-size: var(--fs-h3-sm); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ───────── 시공사례 상세: 사진 + 표제란 (R6 [W3]: 목록 카드와 같은 구성 — 사진 왼쪽, 건물명·분류·표제란 오른쪽) ───────── */
.wd-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "photo head" "photo spec"; grid-template-rows: auto 1fr; gap: var(--s-5) var(--s-7); align-items: start; }
.wd-head { grid-area: head; }
.wd-head h1 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.03em; word-break: keep-all; overflow-wrap: anywhere; }
.wd-head p { margin-top: var(--s-3); }
.wd-photos { grid-area: photo; display: grid; gap: var(--s-5); }
.wd-spec { grid-area: spec; }
.wd-desc { max-width: 720px; margin-top: var(--s-7); color: var(--ink-2); }
.wd-photos figure { margin: 0; }
.wd-photos .before-after { margin: 0; max-width: none; }
.wd-photos figure > img, .wd-photos figure > .ph { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.wd-photos figcaption { margin-top: var(--s-2); color: var(--ink-3); font-size: var(--fs-small); }
.lb-open { display: block; overflow: hidden; cursor: zoom-in; }
.lb-open img { display: block; width: 100%; height: auto; }
.wd-photos .lb-open img { aspect-ratio: 4 / 3; object-fit: cover; } /* 세로 사진도 칸 높이 고정(전체는 크게 보기에서) */
/* 등장(R6 [W3], /works/ 카드와 같은 방식): 대표 사진은 opacity 0 → 1 + scale 1.06 → 1(0.8초) 한 번. html.mo 없으면 처음부터 완성 상태 */
@keyframes wd-in { from { opacity: 0; transform: scale(1.06); } }
.mo:not(.rc-off) .wd-photos > figure:first-of-type .lb-open img { animation: wd-in .8s var(--ease) both; }

/* 표제란: 도면 오른쪽 아래의 정보 표 형식 — 1px 선, 이름칸/값칸 */
.tb { border: var(--bw) solid var(--line-3); background: color-mix(in oklab, var(--bg) 55%, var(--white)); }
.tb > div { display: grid; grid-template-columns: minmax(104px, 34%) minmax(0, 1fr); border-bottom: var(--bw) solid var(--line-2); }
.tb > div:last-child { border-bottom: 0; }
.tb dt { padding: 14px var(--s-4); border-right: var(--bw) solid var(--line-2); color: var(--ink-3); font-size: var(--fs-small); }
.tb dd { padding: 14px var(--s-4); font-weight: 600; }
.tb .big dd { font-size: 22px; line-height: 1.35; }
/* 이전·다음 사례(목록 순서) */
.wd-pn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-8); }
.wd-pn a { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-4) var(--s-5); border: var(--bw) solid var(--line-3); background: color-mix(in oklab, var(--bg) 55%, var(--white)); }
.wd-pn span { color: var(--ink-3); font-size: var(--fs-small); }
.wd-pn b { word-break: keep-all; overflow-wrap: anywhere; }
.wd-pn a:hover b { color: var(--accent); }
.wd-pn-next { grid-column: 2; text-align: right; }
.wd-nav { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* 사진 크게 보기(dialog): Esc 닫기, ←·→ 넘기기, 닫으면 누른 사진으로 초점(site.js). 모서리 0·그림자 없음 */
.lb { margin: auto; width: min(1200px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); padding: 0; border: var(--bw) solid var(--line-dark-2); background: var(--chrome); color: var(--ink-on-dark); }
.lb::backdrop { background: color-mix(in oklab, var(--chrome) 90%, transparent); }
.lb-img { display: block; width: 100%; height: auto; max-height: calc(100vh - 32px - 66px); object-fit: contain; }
.lb-bar { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); }
.lb-n { margin-right: auto; font-size: var(--fs-small); }
.lb button { min-width: 48px; min-height: 48px; border: var(--bw) solid var(--line-dark-2); background: transparent; color: var(--ink-on-dark); font-size: 22px; line-height: 1; cursor: pointer; }
.lb button:hover { border-color: var(--ink-on-dark); }
.lb button[hidden] { display: none; }
@keyframes lb-in { from { opacity: 0; } }
.mo .lb[open] { animation: lb-in .25s var(--ease); }

/* ───────── 시공사례 상세: 공사 기록 (공정표, R6 [W3]) ─────────
   기록 사진 2장 이상([data-record]): 단계가 화면에 들어오면 사진이 opacity 0 → 1 + scale 1.06 → 1, 진행선은 scaleX(PC)·scaleY(휴대폰)로 그 단계까지 자란다(한 번).
   기본(JS 없음·모션 줄이기·초기화 실패 .rc-off)은 처음부터 사진·진행선 가득. 기록 사진 1장(.one)은 진행선·모션 없이 사진과 단계 이름만. 모서리 0·그림자 없음, transform·opacity만 */
.record { margin-top: var(--s-8); }
.record h2 { margin-bottom: var(--s-6); font-size: var(--fs-h3); }
.rc-bar { margin-bottom: var(--s-6); }
.rc-ends { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-4); font-size: var(--fs-small); color: var(--ink-2); }
.rc-mid { font-weight: 600; color: var(--ink); }
.rc-track { position: relative; height: var(--bw); margin-bottom: 56px; background: var(--line-3); }
.rc-fill { position: absolute; left: 0; top: -1px; width: 100%; height: 3px; background: var(--accent); transform: scaleX(var(--fill, 1)); transform-origin: left center; transition: transform .8s var(--ease); }
.rc-tick { position: absolute; left: var(--p); top: 0; padding-top: 20px; transform: translateX(-50%); white-space: nowrap; font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); }
.rc-tick::before { content: ""; position: absolute; left: 50%; top: -7px; width: 3px; height: 15px; transform: translateX(-50%); background: var(--accent); transition: opacity .8s var(--ease); }
.rc-tick:first-of-type { transform: none; }
.rc-tick:first-of-type::before { left: 0; transform: none; }
.rc-tick:last-of-type { transform: translateX(-100%); }
.rc-tick:last-of-type::before { left: auto; right: 0; transform: none; }
.rc-armed .rc-tick:not(.on)::before { opacity: .25; }
.rc-list { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
.rc-list.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rc-list.one { grid-template-columns: minmax(0, 720px); }
.rc-list:not(.two) .rc-main { grid-column: 1 / -1; }
.rc-item figure { margin: 0; }
.rc-ph { position: relative; isolation: isolate; overflow: hidden; background: var(--ph); }
.rc-ph img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: opacity .6s var(--ease), transform .8s var(--ease); }
.rc-main .rc-ph img { aspect-ratio: 16 / 9; max-height: 560px; }
.mo:not(.rc-off) [data-record] .rc-item:not(.on) .rc-ph img { opacity: 0; transform: scale(1.06); }
.rc-glow { position: absolute; inset: 0; pointer-events: none; background: var(--glow); mix-blend-mode: soft-light; opacity: .3; transition: opacity .8s var(--ease); }
.mo:not(.rc-off) [data-record] .rc-item:not(.on) .rc-glow { opacity: 0; }
.rc-cap { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-3); padding: 10px var(--s-3); border: var(--bw) solid var(--line-3); border-top: 0; background: color-mix(in oklab, var(--bg) 55%, var(--white)); font-size: var(--fs-small); }
.rc-cap .mono { color: var(--ink-3); font-size: var(--fs-label); letter-spacing: .1em; }
.rc-cap b { color: var(--ink); }
.rc-done { margin-left: auto; font-weight: 600; color: var(--accent); transition: opacity .8s var(--ease); }
.mo:not(.rc-off) [data-record] .rc-item:not(.on) .rc-done { opacity: 0; }

@media (max-width: 760px) {
  .page-banner { --pb-visible: 166px; }
  .pb-in { padding-bottom: var(--s-5); }
  .pb-in .sheetbar { margin-bottom: var(--s-3); }
  .page-sec { padding: calc(var(--s-7) + var(--s-2)) 0 var(--sp); }
  .page-sec.top { padding-top: calc(var(--header-h) + var(--s-6)); }
  .page-head { margin-bottom: var(--s-6); }
  .about-top { grid-template-columns: 1fr; gap: var(--s-6); }
  .about-logo { order: -1; padding: var(--s-6) var(--s-5); }
  .about-logo img { max-width: 107px; }
  .ap-head { margin-bottom: var(--s-5); }
  .ap-head .btn { width: 100%; }
  .about-photos { grid-template-columns: 1fr; gap: var(--s-5); }
  .about-photos picture { aspect-ratio: auto; }
  .about-photos img { height: auto; object-fit: fill; }
  .wk-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .wk-card, .wk-big, .wk-half, .wk-wide { grid-column: auto; }
  .wk-card .wk-media, .wk-tall .wk-media { flex: none; aspect-ratio: 3 / 2; min-height: 0; }
  .wk-card.is-f .wk-media { aspect-ratio: 4 / 3; } /* 대표 사례만 조금 더 크게 */
  .wk-info h3 { font-size: 20px; }
  .wd-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "photo" "spec"; grid-template-rows: none; gap: var(--s-5); }
  .tb .big dd { font-size: 20px; }
  .wd-pn { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); margin-top: var(--s-7); }
  .wd-pn-next { grid-column: auto; }
  .wd-nav .btn { flex: 1 1 100%; }
  .lb { width: 100vw; max-height: 100vh; border: 0; }
  .lb-img { max-height: calc(100vh - 66px); }
  /* 공사 기록: 왼쪽 세로 공정선(회색 바탕 rc-item::before, 진행선 ::after scaleY, 점 figure::before) + 사진 세로 쌓기 (가로 스크롤·스크롤 가로채기 없음) */
  .rc-track { display: none; }
  .rc-bar { margin-bottom: var(--s-5); }
  .rc-list, .rc-list.two, .rc-list.one { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); padding-left: 28px; }
  .rc-list.one { padding-left: 0; }
  .rc-list:not(.two) .rc-main { grid-column: auto; }
  .rc-main .rc-ph img { aspect-ratio: 4 / 3; max-height: none; }
  .rc-item { position: relative; }
  [data-record] .rc-item figure::before { content: ""; position: absolute; left: -26px; top: 4px; width: 9px; height: 9px; background: var(--accent); transition: opacity .8s var(--ease); }
  [data-record] .rc-item::before, [data-record] .rc-item::after { content: ""; position: absolute; left: -22px; top: 15px; bottom: calc(-1 * var(--s-6) + 4px); width: var(--bw); background: var(--line-3); }
  [data-record] .rc-item::after { background: var(--accent); transform-origin: center top; transition: transform .8s var(--ease); }
  [data-record] .rc-item:last-child::before, [data-record] .rc-item:last-child::after { display: none; }
  .mo:not(.rc-off) [data-record] .rc-item:not(.on) figure::before { opacity: .3; }
  .mo:not(.rc-off) [data-record] .rc-item:not(.on)::after { transform: scaleY(0); }
}