/* 메인 페이지 섹션 (A-01 ~ A-06: 히어로 → 강점 → 사업분야 → 병원빌딩 전문 → 시공사례 → 견적 문의). 값은 tokens.css의 변수만 읽는다. 모션·3D는 R4·R5 — 여기는 정지 상태. */

/* ───────── A-01 히어로 ───────── */
.hero { position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; overflow: hidden; }
.hero-in { position: relative; flex: 1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; gap: var(--s-6); padding-top: var(--header-h); }
.hero-copy { position: relative; z-index: 2; padding-bottom: 40px; }
.eyebrow { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-6); font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); }
.eyebrow .tick { width: 36px; height: var(--bw); background: var(--accent); }
.hero-title .ln { display: block; padding-bottom: .06em; white-space: nowrap; }
.hero-title .acc { color: var(--accent); }
.hero-sub { margin-top: 28px; font-size: var(--fs-lead); line-height: 1.7; color: var(--ink-2); }
.hero-cta { display: flex; gap: var(--s-3); margin-top: 44px; }
.hero-meta { display: flex; gap: 40px; margin-top: var(--s-7); padding-top: var(--s-5); max-width: 560px; border-top: var(--bw) solid var(--line); }
.hero-meta dt { margin-bottom: 6px; font-size: var(--fs-small); color: var(--ink-3); }
.hero-meta dd { font-weight: 600; }
.hero-draw { position: relative; display: flex; align-items: center; justify-content: center; align-self: stretch; margin-right: calc(var(--gut) * -1); }
.hero-glow { position: absolute; left: 50%; top: 48%; width: min(760px, 86%); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, color-mix(in oklab, var(--cyan) 26%, transparent) 0%, color-mix(in oklab, var(--cyan) 9%, transparent) 42%, transparent 70%); }
.hero-svg { position: relative; width: 100%; height: auto; max-height: calc(100vh - 120px); overflow: visible; transition: opacity .6s var(--ease); }
/* R4 3D 캔버스 — hero3d.js가 준비되면 붙이고 .h3d로 opacity만 한 번 전환. 자리는 .hero-draw 전체(레이아웃에 영향 없음) */
.hero-3d { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .6s var(--ease); touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.hero.h3d .hero-3d { opacity: 1; }
.hero.h3d .hero-svg { opacity: 0; }
.hero.h3d-done .hero-3d { cursor: grab; }
.hero-3d.drag { cursor: grabbing; }
/* R4 2b 층 표시 — 젠스파크 시안 .h3d-dim과 같은 모양(위치는 hero3d.js가 transform으로만 옮김) */
.h3d-dim { position: absolute; left: 0; top: 0; z-index: 2; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .4s; will-change: transform; }
.h3d-dim b { min-width: 2.2em; font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--accent); }
.h3d-dim span { font-size: 12px; color: var(--ink-2); }
.h3d-dim.on { opacity: 1; }
.hero-svg .el { fill: none; stroke: var(--ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.hero-svg .el.thin { stroke-width: .8; stroke: var(--line-3); }
.hero-svg .el.axis { stroke: var(--line-2); stroke-dasharray: 6 6; }
.hero-svg .el.dim { stroke: var(--accent); stroke-width: 1; }
.axis-no { fill: none; stroke: var(--line-3); }
.hero-svg .el-txt { font-family: var(--font-mono); font-size: 12px; fill: var(--ink-3); }
.hero-svg .el-txt.acc { fill: var(--accent); }
.hero-svg .el-txt.ko { font-family: var(--font-ko); font-size: 13px; }
.titleblock { position: absolute; z-index: 3; right: var(--gut); bottom: 36px; display: grid; grid-template-columns: auto auto; border: var(--bw) solid var(--line-2); font-size: var(--fs-label); background: color-mix(in oklab, var(--navy) 80%, transparent); }
.titleblock div { padding: 7px var(--s-3); border-bottom: var(--bw) solid var(--line); }
.titleblock div:nth-child(odd) { color: var(--ink-3); border-right: var(--bw) solid var(--line); }
.titleblock div:nth-last-child(-n+2) { border-bottom: 0; }
.titleblock .ko { font-family: var(--font-ko); font-size: var(--fs-small); }

/* 바로가기: 도면 목록 (Sheet Index) */
.sheet-index { position: relative; z-index: 1; padding: var(--s-7) 0 var(--s-8); border-top: var(--bw) solid var(--line-2); }
.si-head { display: flex; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-4); color: var(--ink-3); }
.si-head .mono { color: var(--accent); }
.sheet-index ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--bw) solid var(--line-2); }
.sheet-index li { border-bottom: var(--bw) solid var(--line-2); }
.sheet-index li + li { border-left: var(--bw) solid var(--line); }
.sheet-index a { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: var(--s-4); padding: var(--s-5) var(--s-4); transition: background .25s var(--ease); }
.sheet-index a:hover { background: var(--acc-soft); }
.sheet-index .no { color: var(--accent); }
.sheet-index .n { font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.sheet-index .arr { color: var(--ink-3); }

/* ───────── A-02 강점 ───────── */
.st-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); align-items: end; }
.st-top .lead { margin-top: 28px; max-width: 480px; }
.yr { text-align: right; }
.yr-cap { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-bottom: var(--s-2); color: var(--ink-3); }
.yr-cap b { color: var(--accent); font-weight: 600; }
.yr-num { display: inline-flex; align-items: flex-start; font-size: clamp(120px, 17vw, 248px); font-weight: 200; line-height: .86; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.yr-num > span:first-child { display: inline-block; text-align: right; }
.yr-num small { margin: .35em 0 0 .25em; font-size: .16em; font-weight: 500; letter-spacing: 0; color: var(--accent); }
.tl { position: relative; height: 96px; margin-top: calc(var(--sp) * .4); }
/* R4 [G5] 줄자: 케이스(왼쪽, 시작 연도 위) + 테이프(케이스 입구~오른쪽 끝, 1년마다 눈금·5년마다 긴 눈금, --n = 햇수) + 끝 고리.
   케이스 색은 --tape-case 한 곳(기본 --ink, 비교안 --brand-green). 테이프는 .tape-win 안에서 translateX로만 나온다(눈금 간격 고정) */
.tl { --tape-case: var(--ink); --case-w: 56px; --tape-h: 13px; --arc-h: 56px; margin-top: calc(var(--sp) * .4 + 40px); }
/* 케이스: 바깥 사각(모서리 0) + 테이프 감긴 원형 드럼 + 위 잠금 버튼 + 오른쪽 아래 입구 틈. 입구 높이가 테이프와 맞도록 아래 끝 = 테이프 아래 + 8px */
.tape-case { position: absolute; left: 0; top: calc(var(--tape-h) + 2px - var(--case-w)); width: var(--case-w); height: var(--case-w); transform-origin: 50% 100%; }
.tape-case svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tc-body { fill: var(--tape-case); }
.tc-lock { fill: var(--ink-2); }
.tc-drum { fill: none; stroke: var(--paper); stroke-width: 1.6; }
.tc-mouth { fill: var(--paper); }
/* 테이프: 흰 면, 눈금은 위쪽 가장자리에 붙음(1년 5px·5년 9px). 테이프 위 끝 = .tl 위 -6px */
.tape-win { position: absolute; left: var(--case-w); right: -2px; top: -6px; height: calc(var(--tape-h) + 14px); overflow: hidden; }
.tape { position: relative; height: var(--tape-h); margin-right: 2px; background-color: var(--white); border: solid var(--line-3); border-width: var(--bw) 0;
  background-image: repeating-linear-gradient(90deg, var(--ink-2) 0 1px, transparent 1px calc(500% / var(--n))), repeating-linear-gradient(90deg, var(--ink-2) 0 1px, transparent 1px calc(100% / var(--n)));
  background-size: 100% 9px, 100% 5px; background-repeat: no-repeat; }
/* 끝 고리: ㄱ자로 꺾인 금속판(테이프 끝을 덮고 아래로 꺾임) */
.tape-hook { position: absolute; right: -2px; top: -2px; width: 7px; height: calc(var(--tape-h) + 11px); border: solid var(--ph); border-width: 3px 3px 0 0; transform-origin: 100% 0; }
/* 호: 케이스 입구 ~ 끝 고리를 잇는 낮고 넓은 반타원 점선, 양 끝 점. 꼭대기에 기존 "N년"(뒤는 바탕색).
   드러날 때는 창(.tape-arc, 넘침 숨김)과 내용(.arc-in)이 반대로 translateX — 왼쪽부터 드러나고 바탕 격자를 가리지 않는다 */
.tape-arc { position: absolute; left: calc(var(--case-w) - 4px); right: -4px; top: calc(-10px - var(--arc-h)); height: calc(var(--arc-h) + 8px); overflow: hidden; }
.arc-in { position: absolute; inset: 0; }
.arc-in svg { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); overflow: visible; }
.tape-arc path { fill: none; stroke: var(--ink-3); stroke-width: 1.3; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.arc-dot { position: absolute; bottom: 1px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.arc-dot.l { left: 1px; } .arc-dot.r { right: 1px; }.tl-mid { position: absolute; left: calc(50% + var(--case-w) / 2); top: calc(-6px - var(--arc-h) - .85em); transform: translateX(-50%); padding: 0 14px; background: var(--bg); color: var(--accent); font-weight: 600; }.tl-lab { position: absolute; top: 44px; color: var(--ink-2); font-size: var(--fs-small); }
.tl-lab b { display: block; margin-bottom: 2px; font-size: 20px; color: var(--ink); font-weight: 600; }
.tl-lab.l { left: 0; }
.tl-lab.r { right: 0; text-align: right; }
.strength-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); margin-top: calc(var(--sp) * .55); }
.strength-grid .card { display: flex; flex-direction: column; }
.card-art { margin: var(--s-3) var(--s-3) 0; border-bottom: var(--bw) solid var(--line); background: color-mix(in oklab, var(--bg) 86%, var(--ink-on-light)); }
.card-art svg { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; } /* R4 [G]: 칸 높이 80%(도면 320×200 → 칸 2:1, 도면은 가운데 맞춤) */
.biz-art svg { width: 100%; height: 100%; }
.biz-art svg * { vector-effect: non-scaling-stroke; } /* 2칸 카드와 1칸 카드의 선 굵기를 같게 */
.bl-fill { fill: var(--accent); fill-opacity: .07; stroke: none; }
.bl-txt { font-family: var(--font-mono); font-size: 8px; fill: var(--ink-3); stroke: none; }
.bl-txt.yr { font-size: 12px; fill: var(--ink-2); } /* 강점 25년 눈금 양 끝 연도 */
.bl-sky { fill: none; stroke: var(--cyan); stroke-width: 1.3; } /* 강점 병원 십자: 선만, 하늘색 */
.card-body { display: flex; flex-direction: column; flex: 1; padding: 36px 32px 32px; }
.card-no { margin-bottom: var(--s-4); color: var(--accent); }
.card-body h3 { font-size: var(--fs-h3); line-height: 1.25; margin-bottom: var(--s-4); }
.card-body p:not(.card-no) { color: var(--ink-2); }
.card-stat { display: flex; justify-content: space-between; align-items: baseline; margin-top: auto; padding-top: var(--s-5); }
.card-stat dt { color: var(--ink-3); font-size: var(--fs-small); }
.card-stat dd { font-size: 28px; font-weight: 600; }
.card-stat.names { display: block; }
.card-stat.names dt { margin-bottom: var(--s-2); }
.card-stat.names dd { display: grid; gap: var(--s-2); font-size: var(--fs-body); line-height: 1.5; }
.card-stat.names li { padding-top: var(--s-2); border-top: var(--bw) solid var(--line); }
.more { display: flex; justify-content: center; margin-top: var(--s-7); }

/* 선화 선 스타일 */
.bl-line { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.bl-thin { fill: none; stroke: var(--ink-2); stroke-width: .9; } /* R4 [G] 그림 칸 '다': 보조선 --ink-3 → --ink-2 */
.bl-acc { fill: none; stroke: var(--accent); stroke-width: 1.3; }
.bl-dash { fill: none; stroke: var(--ink-2); stroke-width: .9; stroke-dasharray: 5 5; }

/* ───────── A-04 병원빌딩 전문 (왼쪽 사례 사진 · 오른쪽 지도) ───────── */
.hp-head { max-width: 760px; margin-bottom: var(--s-7); }
.hp-head .lead { margin-top: 28px; }
/* 두 열(사진 카드 | 지도 카드)은 같은 높이로 늘어난다 — 사진이 남는 높이를 object-fit: cover로 채워 하단이 맞는다 */
.hp-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); align-items: stretch; }
.hp-left, .hp-right { display: flex; }
.hp-left > *, .hp-right > * { flex: 1 1 auto; min-width: 0; }
.hp-cases { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-5); align-items: stretch; }
.hp-side { display: flex; flex-direction: column; gap: var(--s-5); }
.hc { display: flex; flex-direction: column; }
.hc-small { flex: 1 1 0; }
.hc-ph { display: block; overflow: hidden; background: var(--ph); }
.hc-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hc-big .hc-ph { position: relative; flex: 1 1 auto; min-height: 380px; }
.hc-big .hc-ph img { position: absolute; inset: 0; }
/* 작은 카드는 큰 카드 높이에 맞춰 늘어나고(하단 정렬), 사진은 남는 높이를 object-fit: cover로 채운다 */
.hc-small .hc-ph { position: relative; flex: 1 1 auto; min-height: 180px; }
.hc-small .hc-ph img { position: absolute; inset: 0; }
.hc h3 { margin: var(--s-3) 0 var(--s-2); font-size: 20px; line-height: 1.3; }
.hc h3 a:hover { color: var(--accent); }
.hc-stat { display: grid; gap: var(--s-2); }
.hc-stat div { display: flex; justify-content: space-between; gap: var(--s-4); padding-top: var(--s-2); border-top: var(--bw) solid var(--line); }
.hc-stat dt { color: var(--ink-3); flex: none; }
.hc-stat dd { font-weight: 600; text-align: right; }
/* 구 목록: 두 열 아래 가로 4칸 띠, 버튼은 띠 오른쪽 끝 */
.hp-strip { display: flex; align-items: center; gap: var(--s-6); margin-top: var(--s-7); border-top: var(--bw) solid var(--line-2); border-bottom: var(--bw) solid var(--line); }
.hp-more { flex: none; margin-left: auto; white-space: nowrap; }
.dlist { flex: 1 1 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dlist li { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); padding: 20px var(--s-4); border-left: var(--bw) solid var(--line); color: var(--ink-2); }
.dlist li:first-child { border-left: 0; padding-left: 4px; }
.dlist .no { color: var(--accent); }
.dlist .n { font-size: 21px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.mapsheet { border: var(--bw) solid var(--line-2); background: color-mix(in oklab, var(--bg) 80%, var(--chrome)); }
.ms-head, .ms-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); font-size: var(--fs-small); color: var(--ink-3); }
.ms-head { border-bottom: var(--bw) solid var(--line); }
.ms-foot { border-top: var(--bw) solid var(--line); align-items: flex-start; }
.ms-cap { display: grid; gap: 2px; }
.ms-cap small { font-size: var(--fs-small); color: var(--ink-3); }
.ms-head b { color: var(--ink); font-weight: 600; }
.map-slot { margin: var(--s-4); }
.daegu-map { display: block; width: 100%; height: auto; }
.daegu-map .gu { fill: none; stroke: var(--line-3); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.daegu-map .gu.hd { fill: var(--acc-soft); }
.daegu-map .gu-name { fill: var(--ink); font-family: var(--font-ko); font-size: 21px; font-weight: 600; text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; }
.daegu-map .pin { fill: var(--accent); stroke: var(--bg); stroke-width: 2px; }
.daegu-map .pin-halo { fill: none; stroke: var(--accent); stroke-width: 1.5px; opacity: .6; }
.legend { display: grid; gap: var(--s-2); justify-items: start; }
.legend .lg { display: flex; align-items: center; gap: var(--s-2); white-space: nowrap; }
.legend i { flex: none; }
.legend .lg-pin { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); outline: 3px solid var(--acc-soft); }
.legend .lg-area { width: 18px; height: 12px; border: var(--bw) solid var(--line-3); background: var(--acc-soft); }

/* ───────── A-03 사업분야 ───────── */
#business h2 { margin-bottom: calc(var(--sp) * .5); }
.biz-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.biz-card { display: flex; flex-direction: column; border: var(--bw) solid var(--line); background: color-mix(in oklab, var(--bg) 55%, var(--white)); }
.biz-card.wide { grid-column: span 2; }
.biz-art { height: 205px; display: flex; align-items: flex-end; padding: 20px 20px 0; border-bottom: var(--bw) solid var(--line); background: color-mix(in oklab, var(--bg) 86%, var(--ink-on-light)); }
.biz-body { padding: 28px 28px 32px; }
.biz-body h3 { margin-bottom: var(--s-3); font-size: var(--fs-h3-sm); }
.biz-body h3 a:hover { color: var(--accent); }
.biz-body h3 a .mono { color: var(--accent); }
.biz-card.wide h3 { font-size: var(--fs-h3); }
.biz-body p { color: var(--ink-2); }

/* ───────── A-05 시공사례 ───────── */
#works h2 { margin-bottom: var(--s-5); }
#works .lead { margin-bottom: var(--s-6); max-width: 620px; }
.before-after { max-width: 960px; margin: 0 auto var(--s-8); }
.ba-view { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-top: var(--bw) solid var(--line); border-bottom: var(--bw) solid var(--line); }
.ba-layer { position: absolute; inset: 0; }
.ba-layer img { width: 100%; height: 100%; object-fit: cover; }
.ba-after { clip-path: inset(0 0 0 50%); }
.ba-bar { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--accent); transform: translateX(-1px); }
.ba-grip { position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--accent); outline: 6px solid var(--acc-soft); }
.ba-tag { position: absolute; top: var(--s-4); padding: 6px 10px; background: color-mix(in oklab, var(--navy) 78%, transparent); border: var(--bw) solid var(--line-dark-2); color: var(--ink-on-dark); font-size: var(--fs-small); font-weight: 600; }
.ba-tag.l { left: var(--s-4); }
.ba-tag.r { right: var(--s-4); }
.before-after figcaption { margin-top: var(--s-3); color: var(--ink-2); font-size: var(--fs-small); font-weight: 600; }
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.work-card { 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)); }
.work-card h3 { font-size: 22px; line-height: 1.3; }
.work-card h3 a:hover { color: var(--accent); }
.work-media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ph); }
.work-media img { width: 100%; height: 100%; object-fit: cover; }
.work-card dl { display: grid; gap: var(--s-2); }
.work-card dl div { display: flex; justify-content: space-between; gap: var(--s-4); padding-top: var(--s-2); border-top: var(--bw) solid var(--line); }
.work-card dt { color: var(--ink-3); flex: none; }
.work-card dd { font-weight: 600; text-align: right; }

/* ───────── A-06 견적 문의 ───────── */
.q-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-8); align-items: start; }
/* [C2] 왼쪽 열을 폼 높이에 맞추고(그리드 행 높이로 늘림) 남는 세로는 그림 자리(R10 장면 A)가 채운다 */
.q-copy { align-self: stretch; display: flex; flex-direction: column; }
/* R10 [M3-1] 위 여백 --s-3: 크레인 꼭대기가 그림 자리 맨 위에 오므로(--ex) 제목 ~ 지브가 --s-6 안팎 */
.q-scene { flex: 1 0 330px; margin: var(--s-3) 0 var(--s-6); }
.q-call { margin-bottom: var(--s-3); }
.q-hours { color: var(--ink-3); font-size: var(--fs-small); }
.q-card { padding: var(--s-7); container-type: inline-size; }
.q-card h3 { margin-bottom: var(--s-5); font-size: var(--fs-h3-sm); }
.quote-form { display: grid; gap: var(--s-5); }
.quote-form .btn { width: 100%; }
/* R10 [M3-2] Turnstile interaction-only: 통과되면 위젯이 0px인데 그리드 간격은 남으므로, 그다음 보이는 줄(오류 문구 또는 버튼)을 간격만큼 올린다.
   확인이 필요해 위젯이 나타나면 그 줄은 위젯 바로 아래 붙는다 */
.quote-form > .cf-turnstile ~ :is(.form-error:not([hidden]), .form-error[hidden] + .btn) { margin-top: calc(var(--s-5) * -1); }
/* R9 [Q4] 이름+전화번호, 예상 시기+예상 금액: 카드 안쪽 폭 440px 이상이면 나란히, 아니면 세로 */
.field-row { display: grid; gap: var(--s-5); align-items: start; }
@container (min-width: 440px) { .field-row:not(.field-row-use) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* R10 [M3-2] 1024 이상: 왼쪽 제목부터 폼 버튼까지 1440×800·1536×730 한 화면 — 칸 사이·카드 안쪽 여백 한 단계 작게, 건축 용도(좁게)+주소(넓게) 한 줄,
   요청 내용은 칸 이름과 안내를 한 줄·처음 2줄, 동의 안내 상자는 작은 글자(15px)·좁은 줄 간격. 1023 이하는 그대로 */
@media (min-width: 1024px) {
  .q-card { padding: var(--s-6); }
  .q-copy { padding-top: var(--s-4); } /* 제목 첫 줄 윗선 = 카드 안 "견적 문의" 윗선 */
  .q-scene { flex: 1 0 240px; margin: var(--s-6) 0; }
  .q-card h3 { margin-bottom: var(--s-4); }
  .quote-form, .field-row { gap: var(--s-4); }
  .quote-form > .cf-turnstile ~ :is(.form-error:not([hidden]), .form-error[hidden] + .btn) { margin-top: calc(var(--s-4) * -1); }
  .quote-form .field { gap: var(--s-1); }
  .quote-form .field label, .quote-form .field.check a { line-height: 1.4; }
  .field-row-use { grid-template-columns: 8.5em minmax(0, 1fr); }
  .quote-form .field-ta { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-4); }
  .quote-form .field-ta textarea { min-height: calc(2lh + var(--s-2) * 2 + var(--bw) * 2); max-height: calc(8lh + var(--s-2) * 2 + var(--bw) * 2); padding-block: var(--s-2); }
  .quote-form .consent-note { padding: var(--s-2) var(--s-3); font-size: var(--fs-small); line-height: 1.5; }
}

/* R10 A-06 견적 그림 장면 A "크레인 간판"(lib/drawings.js quoteCraneScene). 자리(.q-scene)는 크기 컨테이너 — 보통 세로 칸은 넓은 구도 w,
   아주 긴 세로 칸(1024 등, 가로÷세로 .55 미만)은 t, 가로 띠(1023 이하 160px)는 좁은 구도 n.
   SVG(viewBox 단위)와 간판 겹침 요소가 같은 비율의 무대(.qa-st)를 쓰고, --u(무대 폭 ÷ viewBox 폭)로 간판 위치·크기를 viewBox 단위로 맞춘다.
   선은 주선 1.5·보조선 1, 굵기 고정(vector-effect). 면은 남색에 흰색·하늘색을 섞은 단계만 */
.q-scene { position: relative; container: q-scene / size; }
.qa {
  position: absolute; inset: 0; overflow: clip; /* 물러나는 크레인이 그림 자리 밖으로 나가지 않게 */
  --qa-face: color-mix(in srgb, var(--white) 18%, var(--navy)); --qa-side: color-mix(in srgb, var(--white) 10%, var(--navy));
  --qa-stone: color-mix(in srgb, var(--white) 30%, var(--navy)); --qa-hi: color-mix(in srgb, var(--white) 42%, var(--navy));
  --qa-deep: color-mix(in srgb, var(--white) 4%, var(--navy)); --qa-glass: color-mix(in srgb, var(--cyan) 14%, var(--navy));
  --qa-lit: color-mix(in srgb, var(--cyan) 16%, var(--white));
}
.qa-st { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; container-type: inline-size; --u: calc(100cqw / var(--vbw)); }
.qa-w { aspect-ratio: 600 / 507; width: min(100%, 100cqh * 600 / 507); }
.qa-t, .qa-n { display: none; }
.qa-t { aspect-ratio: 400 / 981; width: min(100%, 100cqh * 400 / 981); }
.qa-n { aspect-ratio: 350 / 160; width: min(100%, 100cqh * 350 / 160); }
@container q-scene (aspect-ratio < .55) { .qa-w { display: none; } .qa-t { display: block; } }
@container q-scene (aspect-ratio > 1.8) { .qa-w { display: none; } .qa-n { display: block; } } /* R10 [M3-2] 1024 이상 자리도 가로로 길어져(약 1.5) 가로 띠(1023 이하 2.1 이상)만 n */
.qa-st > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.qa svg * { vector-effect: non-scaling-stroke; }
.qa-main, .qa-aux { fill: none; stroke: var(--line-3); stroke-width: 1.5; }
.qa-aux { stroke: var(--line-2); stroke-width: 1; }
.qa-cable { stroke: var(--line-3); }
.qa-slot { stroke-dasharray: 4 3; }
.qa-face { fill: var(--qa-face); }
.qa-side { fill: var(--qa-side); }
.qa-hi { fill: var(--qa-hi); }
.qa-stone { fill: var(--qa-stone); }
.qa-deep { fill: var(--qa-deep); }
.qa-glass { fill: var(--qa-glass); }
.qa-steel { fill: var(--line-3); }
.qa-white { fill: var(--white); }
.qa-far { fill: color-mix(in srgb, var(--white) 6%, var(--navy)); }
.qa-hook { fill: var(--cyan); }
/* 불 켜진 창(R10 [M3]): 히어로 3D 완공 화면처럼 창의 약 40%만(무늬는 lib/drawings.js), 밝기도 히어로 창에 맞춰 낮춤(전: 모든 창 .92) */
.qa-lamp { --lo: .8; fill: var(--qa-lit); opacity: 0; }
.qa-lamp-side { --lo: .55; }
.qa-on .qa-lamp, .qa-play .qa-lamp { opacity: var(--lo); }
.qa-on .qa-slot, .qa-on .qa-rig { display: none; }
.qa-play .qa-crane, .qa-play .qa-slot, .qa-play .qa-rig { opacity: 0; }
.qa-load { position: absolute; left: 0; top: 0; translate: calc(var(--x) * var(--u)) calc(var(--y) * var(--u)); transform-origin: 0 calc(var(--rh) * var(--u) * -1); }
.qa-rig { position: absolute; left: calc(var(--pw) * -.5 * var(--u)); top: calc(var(--rh) * -1 * var(--u)); width: calc(var(--pw) * var(--u)); height: calc(var(--rh) * var(--u)); max-width: none; overflow: visible; }
.qa-plate { position: absolute; left: calc(var(--pw) * -.5 * var(--u)); top: 0; display: flex; align-items: center; justify-content: center; gap: calc(var(--gp) * var(--u)); width: calc(var(--pw) * var(--u)); height: calc(var(--ph) * var(--u)); padding: 0 calc(var(--pd) * var(--u)); background: var(--white); }
.qa-plate img { flex: none; width: calc(var(--lg) * var(--u)); height: auto; }
.qa-name { color: var(--brand-green); font-size: calc(var(--fs) * var(--u)); font-weight: 700; line-height: 1; white-space: nowrap; }
/* R10 [M3] 폼 연결(html.mo일 때만, transform·opacity 계열만). 대기: 간판이 길가 높이에서 훅에 매달려 아주 작게 흔들림(±.6°).
   필수 칸이 유효해질 때마다(그림 .qa와 띠 .qs에 qa-k1~qa-k4, public/js/site.js) 들어 올림 → 트롤리 이동(살짝 지나쳤다 돌아옴) → 내려옴 → 벽 앞에서 걸린 채 멈춤.
   자리 옮김은 transition(중간에 다음 단계가 와도 그 자리에서 이어짐), 흔들림은 단계마다 한 번 도는 rotate 애니메이션(회전 중심은 훅).
   제출 성공(qa-ok): 판이 "착" 붙음(bump만큼 더 내려갔다 돌아옴 + 건물 scaleY .99 반동) → 0.5초 뒤(qa-lit) 창 불이 아래층부터 0.1초 간격 → 크레인이 왼쪽으로 물러나며 사라짐.
   .mo가 없으면(모션 줄이기·JS 없음) 처음부터 완공 정지 화면(간판·불빛, 크레인 없음) */
.qa-bldg { transform-box: fill-box; transform-origin: 50% 100%; }
.qa-cable { transform-box: fill-box; transform-origin: 50% 0; }
/* R10 [M3-1] 크레인 윗부분(지브·트롤리·마스트 꼭대기)을 그림 자리 맨 위로 — --ex(viewBox 단위, public/js/site.js가 자리 높이로 계산). 줄은 그만큼 길어진다 */
.qa-play .qa-top { translate: 0 calc(var(--ex, 0) * -1px); }
.mo .qa-play .qa-crane, .mo .qa-play .qa-slot, .mo .qa-play .qa-rig { opacity: 1; }
.mo .qa-play .qa-lamp { opacity: 0; }
/* 단계별 자리는 움직이는 세 요소(간판·줄·트롤리)에 직접 준다 — 무대의 상속 변수를 바꾸면 SVG 전체가 스타일을 다시 계산한다(4배 감속 긴 작업) */
.mo .qa-play .qa-load { translate: calc(var(--ax0) * var(--u)) calc(var(--ay0) * var(--u)); transition: translate 1s cubic-bezier(.45, 0, .25, 1); animation: qa-idle 1.6s ease-in-out infinite alternate; }
.mo .qa-play .qa-cable { scale: 1 calc((var(--cl) + var(--ex, 0)) / var(--cl)); transition: scale 1s cubic-bezier(.45, 0, .25, 1); }
.mo .qa-play .qa-trolley { translate: 0 0; transition: translate 1.1s cubic-bezier(.34, 1.32, .64, 1); }
.mo .qa-play.qa-k1 .qa-load { translate: calc(var(--ax0) * var(--u)) calc(var(--ay1) * var(--u)); animation: qa-sw-lift 1.8s ease-in-out both; }
.mo .qa-play.qa-k2 .qa-load { translate: calc(var(--ax2) * var(--u)) calc(var(--ay1) * var(--u)); transition-duration: 1.1s; transition-timing-function: cubic-bezier(.34, 1.32, .64, 1); animation: qa-sw-move 2.4s ease-in-out both; }
.mo .qa-play.qa-k3 .qa-load { translate: calc(var(--ax2) * var(--u)) calc(var(--ay3) * var(--u)); animation: qa-sw-lift 1.8s ease-in-out both; }
.mo .qa-play.qa-k4 .qa-load { translate: calc(var(--ax2) * var(--u)) calc(var(--ay4) * var(--u)); animation: qa-sw-stop 1.2s ease-in-out both; }
.mo .qa-play.qa-k1 .qa-cable, .mo .qa-play.qa-k2 .qa-cable { scale: 1 calc((var(--ay1) - var(--rh) - var(--ty) + var(--ex, 0)) / var(--cl)); }
.mo .qa-play.qa-k3 .qa-cable { scale: 1 calc((var(--ay3) - var(--rh) - var(--ty) + var(--ex, 0)) / var(--cl)); }
.mo .qa-play.qa-k4 .qa-cable { scale: 1 calc((var(--ay4) - var(--rh) - var(--ty) + var(--ex, 0)) / var(--cl)); }
.mo .qa-play.qa-k2 .qa-trolley, .mo .qa-play.qa-k3 .qa-trolley, .mo .qa-play.qa-k4 .qa-trolley { translate: calc((var(--ax2) - var(--ax0)) * 1px) 0; }
.mo .qa-play.qa-k4 .qa-load, .mo .qa-play.qa-k4 .qa-cable { transition-duration: .8s; transition-timing-function: cubic-bezier(.2, .7, .3, 1); }
.mo .qa-play.qa-ok .qa-load { animation: qa-attach .5s both; }
.mo .qa-play.qa-ok .qa-cable { animation: qa-attach-cable .5s both; }
.mo .qa-play.qa-ok .qa-bldg { animation: qa-squash .5s .25s both; }
.mo .qa-play.qa-ok .qa-slot { opacity: 0; transition: opacity .2s .3s; }
.mo .qa-play.qa-ok .qa-rig, .mo .qa-play.qa-ok .qa-cable { opacity: 0; transition: opacity .3s .5s; } /* 훅과 줄은 함께 사라짐 */
/* 창 불·크레인 퇴장은 0.5초 뒤 qa-lit에서(성공 순간의 스타일 계산을 두 번으로 나눔 — 보이는 시간은 같음) */
.mo .qa-play.qa-lit .qa-lamp { animation: qa-lamp .5s calc(.05s + var(--fl) * .1s) both; }
.mo .qa-play.qa-lit .qa-crane { animation: qa-exit .9s cubic-bezier(.5, 0, .75, .4) .3s both; }
@keyframes qa-idle { from { rotate: -.6deg; } to { rotate: .6deg; } }
@keyframes qa-sw-lift { 0% { rotate: 0deg; } 25% { rotate: 1deg; } 50% { rotate: -.6deg; } 75% { rotate: .3deg; } 100% { rotate: 0deg; } }
@keyframes qa-sw-move { 0% { rotate: 0deg; } 15% { rotate: 4deg; } 35% { rotate: -3deg; } 52% { rotate: 2deg; } 68% { rotate: -1.2deg; } 84% { rotate: .5deg; } 100% { rotate: 0deg; } }
@keyframes qa-sw-stop { 0% { rotate: 0deg; } 35% { rotate: .6deg; } 70% { rotate: -.3deg; } 100% { rotate: 0deg; } }
@keyframes qa-attach {
  0% { translate: calc(var(--ax2) * var(--u)) calc(var(--ay4) * var(--u)); animation-timing-function: cubic-bezier(.5, 0, 1, 1); }
  55% { translate: calc(var(--ax2) * var(--u)) calc((var(--ay5) + var(--bump)) * var(--u)); animation-timing-function: cubic-bezier(0, 0, .3, 1); }
  100% { translate: calc(var(--ax2) * var(--u)) calc(var(--ay5) * var(--u)); }
}
@keyframes qa-attach-cable {
  0% { scale: 1 calc((var(--ay4) - var(--rh) - var(--ty) + var(--ex, 0)) / var(--cl)); animation-timing-function: cubic-bezier(.5, 0, 1, 1); }
  55% { scale: 1 calc((var(--ay5) + var(--bump) - var(--rh) - var(--ty) + var(--ex, 0)) / var(--cl)); animation-timing-function: cubic-bezier(0, 0, .3, 1); }
  100% { scale: 1 calc((var(--ay5) - var(--rh) - var(--ty) + var(--ex, 0)) / var(--cl)); }
}
@keyframes qa-squash { 0% { scale: 1 1; } 30% { scale: 1 .99; } 65% { scale: 1 1.003; } 100% { scale: 1 1; } }
@keyframes qa-lamp { from { opacity: 0; } to { opacity: var(--lo); } }
@keyframes qa-exit { from { translate: 0 0; opacity: 1; } to { translate: calc(var(--vbw) * -.3px) 0; opacity: 0; } }
/* 1023 이하 폼 카드 위 띠(.qs, 40px): 작은 로고 + 진행 4칸. 칸은 opacity로 켜짐, 성공하면 로고가 도장처럼(scale 1.15 → 1) */
.qs { display: none; align-items: center; gap: var(--s-4); height: 40px; }
.qs img { display: block; width: 32px; height: 32px; padding: 4px; background: var(--white); }
.qs-cells { display: flex; gap: 6px; }
.qs-cells i { position: relative; width: 40px; height: 6px; border: var(--bw) solid var(--line-2); }
.qs-cells i::after { content: ""; position: absolute; inset: 0; background: var(--cyan); opacity: 0; }
.mo .qs-cells i::after { transition: opacity .3s; }
.qa-k1 .qs-cells i:nth-child(-n + 1)::after, .qa-k2 .qs-cells i:nth-child(-n + 2)::after, .qa-k3 .qs-cells i:nth-child(-n + 3)::after, .qa-k4 .qs-cells i::after { opacity: 1; }
.mo .qs.qa-ok img { animation: qs-stamp .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes qs-stamp { from { scale: 1.15; opacity: 0; } }

/* R9 [Q4] 1023px 이하 견적 문의는 한 칸(폼이 좁은 두 칸에서 넘치던 768 해결). R10 [M3]: 그림 자리 160px(좁은 구도) + 폼 카드 위 띠 40px —
   전의 그림 자리 200px과 합이 같아 섹션 높이는 그대로 */
@media (max-width: 1023px) {
  .q-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .q-scene { flex: none; height: 160px; margin: var(--s-5) 0; }
  .qs { display: flex; }
}

/* ═════════ 모바일 (760px 이하) ═════════ */
@media (max-width: 760px) {
  .hero { min-height: auto; }
  .hero-in { grid-template-columns: 1fr; gap: 0; padding-top: var(--header-h); }
  .hero-draw { order: -1; height: 400px; margin: 0 calc(var(--gut) * -1); }
  .hero-glow { width: min(420px, 110%); top: 52%; }
  .hero-svg { height: 100%; max-height: none; }
  .hero-copy { padding: var(--s-2) 0 40px; }
  .eyebrow { margin-bottom: 18px; }
  .eyebrow .tick { width: 24px; }
  .hero-title { line-height: 1.24; }
  .hero-title .ln { white-space: normal; }
  .hero-sub { margin-top: 18px; }
  .hero-cta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-top: 28px; }
  .hero-cta .btn { padding: 0 var(--s-3); }
  .hero-meta, .titleblock { display: none; }

  .sheet-index { padding: var(--s-6) 0 var(--s-7); }
  .sheet-index ol { grid-template-columns: 1fr; }
  .sheet-index li + li { border-left: 0; }

  .st-top { grid-template-columns: 1fr; gap: 40px; }
  .st-top .lead { margin-top: var(--s-5); }
  .yr { text-align: left; padding-top: var(--s-5); border-top: var(--bw) solid var(--line); }
  .yr-cap { justify-content: flex-start; }
  .yr-num { font-size: 108px; }
  .tl { height: 88px; margin-top: 64px; --case-w: 46px; --tape-h: 11px; --arc-h: 32px; } /* [G5] 케이스·호가 큰 숫자에 붙지 않게 */
  .tl-lab { top: 44px; }
  .tl-lab b { font-size: var(--fs-body); }
  .strength-grid { grid-template-columns: 1fr; gap: var(--s-4); margin-top: var(--s-7); }
  .card-body { padding: 28px 22px 24px; }
  .card-stat dd { font-size: 22px; }

  /* 병원빌딩 전문: 390px은 사진 → 지도 → 구 목록 → 버튼 순서 */
  .hp-head { margin-bottom: var(--s-6); }
  .hp-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .hp-left, .hp-right { display: block; }
  .hp-cases { grid-template-columns: 1fr; gap: var(--s-6); }
  .hc-big .hc-ph { flex: none; min-height: 0; aspect-ratio: 4 / 5; }
  .hc-big .hc-ph img { position: static; }
  .hp-side { gap: var(--s-6); }
  .hc-small { flex: none; }
  .hc-small .hc-ph { flex: none; min-height: 0; aspect-ratio: 3 / 2; }
  .hc-small .hc-ph img { position: static; }
  .mapsheet { margin: 0 -8px; }
  .hp-strip { flex-direction: column; align-items: stretch; gap: var(--s-4); margin-top: var(--s-6); border: 0; }
  .dlist { display: block; border-top: var(--bw) solid var(--line-2); }
  .hp-more { margin-left: 0; width: 100%; }
  .ms-head, .ms-foot { padding: var(--s-3) var(--s-4); }
  .ms-head .mono { display: none; }
  .ms-foot { flex-direction: column; gap: var(--s-3); }
  .map-slot { margin: var(--s-2); }
  .dlist li { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: var(--s-2); padding: var(--s-4) 2px; border-left: 0; border-bottom: var(--bw) solid var(--line); }
  .dlist li:first-child { padding-left: 2px; }
  .dlist .n { font-size: 19px; }

  .biz-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .biz-card.wide { grid-column: auto; }
  .biz-art { height: 160px; padding: 14px 14px 0; }
  .biz-body, .biz-card.wide .biz-body { padding: 22px 20px 26px; }

  .before-after { margin-bottom: var(--s-7); }
  .ba-grip { width: 44px; height: 44px; }
  .work-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .work-card h3 { font-size: 20px; }
  .more { margin-top: var(--s-6); }
  .more .btn { width: 100%; }

  .q-call .btn { width: 100%; }
  .q-card { padding: var(--s-5) var(--s-4); }
}

/* ───────── R5-lite 모션 — transform·opacity만. html.mo(모션 허용 + JS)일 때만, JS가 없거나 모션 줄이기면 처음부터 최종 상태 ───────── */
@keyframes hero-up { from { transform: translateY(18px); } to { transform: none; } }
@keyframes hero-up-f { from { opacity: .01; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.mo .hero-title { animation: hero-up .3s var(--ease) both; }            /* 제목은 opacity 0에서 시작하지 않는다(LCP) */
.mo .hero-sub { animation: hero-up-f .3s var(--ease) .1s both; }
.mo .hero-cta { animation: hero-up-f .3s var(--ease) .2s both; }        /* 0.2 + 0.3 = 0.5초에 끝 */
.mo .rv { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease) var(--rv-d, 0s), transform .6s var(--ease) var(--rv-d, 0s); }
.mo .rv.rv-in { opacity: 1; transform: none; }
.mo .pins-wait .map-pin { opacity: 0; transform: scale(.4); }
.mo .map-pin { transform-box: fill-box; transform-origin: 50% 50%; transition: opacity .6s var(--ease) var(--pd, 0s), transform .6s var(--ease) var(--pd, 0s); }
@media (hover: hover) and (pointer: fine) {
  .biz-card { transition: transform .4s var(--ease); }
  .biz-card:hover, .biz-card:has(a:focus-visible) { transform: translateY(-3px); }
}