/* 136 홈페이지 모션그래픽: 첫 화면(mg-hero-)·가격표 아래(mg-price-)·시공 과정(mg-proc-) 그림의 모양과 움직임.
   tools/mg136/build.cjs 가 세 생성기(tools/mg136/hero·price·process/gen.cjs) 결과를 이어 붙여 만든다. 손으로 고치지 말고 생성기를 고친 뒤 다시 만든다.
   기본 상태(스크립트 없음·늦음·실패·동작 줄이기) = 끝 장면. 시작 장면은 @keyframes 안과 mg136.js 가 붙이는 블록 클래스 아래에서만. */

/* task 136 첫 화면(#hero) 3D 창 구성 그림: tools/mg136/hero/gen.cjs 가 만든 조각(손으로 고치지 말고 생성기를 고친다).
   클래스 접두사 mg-hero-. 색은 팔레트만(투명도 섞은 색·그림자·흐림·필터 없음). 글꼴은 페이지(body) 것을 물려받는다.
   기본 상태(애니메이션 없음 = 동작 줄이기·구형 브라우저·애니메이션 끝) = 끝 장면: 창 10짝·띠·알약·번호 모두 보임, 반투명 없음.
   시작 장면은 @keyframes 안에서만 만든다(페이지 열리면 한 번 재생, 재생 조절은 mg136.js 첫 화면 몫). */

/* ---------- 자리 ---------- */
.mg-hero-fig{margin:0;min-width:0;max-width:100%}
.mg-hero-svg{display:block;width:100%;height:auto;transform-origin:50% 0}

/* ---------- 그림 ---------- */
.mg-hero-floor{fill:#ffffff;stroke:#1a1611;stroke-width:1.1;stroke-linejoin:round}
.mg-hero-slab-s{fill:#4a423b;stroke:#1a1611;stroke-width:1.1;stroke-linejoin:round}
.mg-hero-slab-e{fill:#1a1611;stroke:#1a1611;stroke-width:1.1;stroke-linejoin:round}
.mg-hero-veranda{fill:#efe8e0;stroke:none}
.mg-hero-svc,.mg-hero-entry{fill:#e3d9ce;stroke:none}
.mg-hero-wall .mg-hero-ft{fill:#ffffff;stroke:#ffffff;stroke-width:.5;stroke-linejoin:round}
.mg-hero-wall .mg-hero-fs{fill:#e3d9ce;stroke:#e3d9ce;stroke-width:.5;stroke-linejoin:round}
.mg-hero-wall .mg-hero-fe{fill:#6b6459;stroke:#6b6459;stroke-width:.5;stroke-linejoin:round}
.mg-hero-wall .mg-hero-edge{fill:none;stroke:#1a1611;stroke-width:1.1;stroke-linecap:round}
.mg-hero-band{fill:none;stroke-linecap:round}
.mg-hero-band.mg-hero-ext{stroke:#ab2c29;stroke-width:2.4}
.mg-hero-band.mg-hero-int{stroke:#1a1611;stroke-width:1.6;stroke-dasharray:4 3;stroke-linecap:butt}
/* 창. 빈 창 자리 윤곽(ghost)은 끝 장면에 없다(stroke:none), 시작 장면에서만 @keyframes 로 그린다 */
.mg-hero-ghost{fill:none;stroke:none;stroke-width:1;stroke-dasharray:3 3}
.mg-hero-glass{stroke:none}
.mg-hero-win.mg-hero-ext .mg-hero-glass{fill:#f6e9e1}
.mg-hero-win.mg-hero-ext .mg-hero-frame{fill:#ab2c29;stroke:none}
.mg-hero-win.mg-hero-ext .mg-hero-glint{fill:none;stroke:#ab2c29;stroke-width:1.2;stroke-linecap:round}
.mg-hero-win.mg-hero-ext .mg-hero-outline{stroke:#8e2421}
.mg-hero-win.mg-hero-int .mg-hero-glass{fill:#ffffff}
.mg-hero-win.mg-hero-int .mg-hero-frame{fill:#1a1611;stroke:none}
.mg-hero-win.mg-hero-int .mg-hero-glint{fill:none;stroke:#4a423b;stroke-width:1;stroke-dasharray:2.5 2.5;stroke-linecap:round}
.mg-hero-win.mg-hero-int .mg-hero-outline{stroke:#1a1611}
.mg-hero-outline{fill:none;stroke-width:1.3;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:0}
/* 띠가 그려지는 마스크 선(마스크 안이라 흰색 = 보임) */
.mg-hero-trace{fill:none;stroke:#ffffff;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:0}
/* 알약·번호 */
.mg-hero-pill-t,.mg-hero-no-t{font-size:15.5px;font-weight:700}
.mg-hero-pill.mg-hero-ext .mg-hero-pill-r{fill:#ab2c29}
.mg-hero-pill.mg-hero-ext .mg-hero-pill-t{fill:#ffffff}
.mg-hero-pill.mg-hero-int .mg-hero-pill-r{fill:#ffffff;stroke:#1a1611;stroke-width:1.4}
.mg-hero-pill.mg-hero-int .mg-hero-pill-t{fill:#1a1611}
.mg-hero-leader{fill:none;stroke-width:1.2}
.mg-hero-ext .mg-hero-leader{stroke:#ab2c29}
.mg-hero-int .mg-hero-leader{stroke:#1a1611}
.mg-hero-ext .mg-hero-dot{fill:#ab2c29;stroke:#ffffff;stroke-width:1.2}
.mg-hero-int .mg-hero-dot{fill:#ffffff;stroke:#1a1611;stroke-width:1.4}
.mg-hero-badge.mg-hero-ext .mg-hero-no{fill:#ab2c29;stroke:#ffffff;stroke-width:1.6}
.mg-hero-badge.mg-hero-ext .mg-hero-no-t{fill:#ffffff}
.mg-hero-badge.mg-hero-int .mg-hero-no{fill:#ffffff;stroke:#1a1611;stroke-width:1.6}
.mg-hero-badge.mg-hero-int .mg-hero-no-t{fill:#1a1611}
.mg-hero-pop{transform-box:fill-box;transform-origin:50% 50%}
/* ---------- 움직임: 페이지가 열리면 한 번. 시각은 요소마다 --mg-hero-t ----------
   카메라: 그림 전체가 28px 아래·.93 크기에서 제자리로(위 가장자리 기준이라 그림 아래끝이 제자리보다 내려가지 않음, PC 숫자 줄 선 침범 없음).
   1막 외부창: 바깥 벽선(레드)이 그려지고 창 1→5 가 위에서 자리로 내려와 들어섬, 테두리가 그려지고 번호가 뜸 → '외부창' 알약
   2막 내부창: 베란다↔방 벽선(먹 점선)이 그려지고 창 6→10 → '내부창' 알약
   곡선은 모두 넘치지 않는 감속(튀어 오름 없음). 투명도는 번호·알약이 들어오는 짧은 페이드에만.
   빈 창 자리 윤곽은 창이 거의 다 내려온 순간(t+.4s) 사라진다(투명도 아님, 시작 장면 keyframes 의 backwards 채움이 끝남).
   transform·opacity·stroke-dashoffset·stroke 만 움직임. 움직임은 CSS 만 하고, JS 는 느린 기기 안전장치(결정 D6)로
   재생 시작 뒤 0.75초 동안만 rAF 시각을 읽는다(레이아웃 읽기 없음). */
@keyframes mg-hero-cam{from{transform:translateY(28px) scale(.93)}to{transform:none}}
@keyframes mg-hero-rise{from{transform:translateY(calc(var(--mg-hero-dy,40px) * -1))}to{transform:none}}
@keyframes mg-hero-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes mg-hero-ghost{from{stroke:#6b6459}to{stroke:#6b6459}}
@keyframes mg-hero-in{from{opacity:0}to{opacity:1}}
@keyframes mg-hero-pop{from{transform:scale(.5)}to{transform:none}}
@media (prefers-reduced-motion:no-preference){
  .mg-hero-svg{animation:mg-hero-cam 1.9s cubic-bezier(.16,1,.3,1) both}
  .mg-hero-rise{animation:mg-hero-rise .6s cubic-bezier(.22,1,.36,1) var(--mg-hero-t) both}
  .mg-hero-ghost{animation:mg-hero-ghost .01s linear calc(var(--mg-hero-t) + .4s) backwards}
  .mg-hero-outline{animation:mg-hero-draw .55s cubic-bezier(.45,0,.25,1) calc(var(--mg-hero-t) + .18s) both}
  .mg-hero-trace{animation:mg-hero-draw var(--mg-hero-d) cubic-bezier(.5,0,.25,1) var(--mg-hero-t) both}
  .mg-hero-badge{animation:mg-hero-in .2s linear calc(var(--mg-hero-t) + .32s) both}
  .mg-hero-badge .mg-hero-pop{animation:mg-hero-pop .5s cubic-bezier(.22,1,.36,1) calc(var(--mg-hero-t) + .32s) both}
  .mg-hero-pill .mg-hero-pop{animation:mg-hero-pop .5s cubic-bezier(.22,1,.36,1) var(--mg-hero-t) both,mg-hero-in .2s linear var(--mg-hero-t) both}
}

/* ---------- 첫 화면 자리 ----------
   그림 안 글자(15.5 단위)가 화면에서 12px 이상이려면 그림 폭 >= 278px(viewBox 폭 358 기준). 그림 높이 = 폭 x 0.941.
   위 머리글(53~57px)·아래 고정 상담 띠(59px) 사이에 그림이 다 들어오게 화면 높이로도 묶는다. */
/* 휴대폰·태블릿(한 칸): 사진 자리에 가운데. 칸 너비를 밀어 넓히지 않게 width 100%, 크기는 max-width 로 */
@media (max-width:899px){
  .mg-hero-fig{width:100%;max-width:clamp(278px,calc((100vh - 124px) * 1.06),340px);margin:0 auto}
  .mg-hero-fig{max-width:clamp(278px,calc((100svh - 124px) * 1.06),340px)}
}
/* 좁은 PC(두 칸, 900~1099): 오른쪽 칸 위에서부터, 글 칸 높이 안 */
@media (min-width:900px) and (max-width:1099px){
  .mg-hero-fig{width:min(100%,385px,max(300px,calc((100vh - 220px) * 1.06)));margin:0 auto;align-self:start}
}
/* PC(1100 이상): 그림 상자는 글 칸 높이(행)에 맞춰 늘고(행 높이를 바꾸지 않음 → #price 위치 그대로),
   그림은 그 안에서 절대 위치로 행 가운데(3px 위)에 480px 까지, 오른쪽 칸(약 415px)에서 사이트 폭 바깥 여백 쪽으로 넓어짐.
   폭은 화면 오른쪽 끝에서 40px 이상 떨어지게(50vw - 85px), 화면 높이로도 묶음 */
@media (min-width:1100px){
  .mg-hero-fig{--mg-hero-w:min(480px,calc(50vw - 85px),max(300px,calc((100vh - 220px) * 1.06)));position:relative;align-self:stretch;width:100%;margin:0}
  .mg-hero-svg{position:absolute;left:0;top:calc(50% - var(--mg-hero-w) * 0.4707 - 3px);width:var(--mg-hero-w);max-width:none}
}

/* ===== 가격표 아래 창 구성 그림(mg-price), task 136. tools/mg136/price/gen.cjs 가 만듦(손으로 고치지 않음) =====
   기본(JS 없음·동작 줄이기·재생 끝) = 끝 장면. 움직임은 JS 가 .mg-price-armed(멈춘 첫 장면) → .mg-price-play(재생)를 붙일 때만. */

/* 배치: 768 이상 = .price-compare 720 칸에 그림 500 + 옆 목록, 767 이하 = 그림 위·목록 아래 2단 */
.mg-price-wrap{margin-top:28px;display:grid;grid-template-columns:minmax(0,500px) minmax(0,1fr);column-gap:28px;align-items:center}
.mg-price-fig{min-width:0}
.mg-price-dwg{display:block;width:100%;height:auto;margin:0 auto;overflow:visible}
/* 낮은 화면: 그림 높이 ≤ 화면 높이 - 130(위 머리글 57 + 아래 상담 띠 59 + 여유). 글자 12px 아래로는 안 줄임(PC 429px, 휴대폰 320px) */
.mg-price-dwg-pc{max-width:max(429px,calc((100vh - 130px) * 1.1416))}
.mg-price-dwg-mo{max-width:max(320px,min(420px,calc((100vh - 130px) * 1.274)))}
@supports (height:100svh){
  .mg-price-dwg-pc{max-width:max(429px,calc((100svh - 130px) * 1.1416))}
  .mg-price-dwg-mo{max-width:max(320px,min(420px,calc((100svh - 130px) * 1.274)))}
}
/* 넓고 높은 화면 = PC 그림, 그 밖(767 이하 · 높이 505 이하) = 휴대폰 그림 */
@media (min-width:768px) and (min-height:506px){.mg-price-dwg-mo{display:none}}
@media (max-width:767.98px),(max-height:505.98px){.mg-price-dwg-pc{display:none}}

/* 목록 */
.mg-price-list{min-width:0;display:flex;flex-direction:column;gap:20px}
.mg-price-gh{margin:0 0 8px;line-height:1}
.mg-price-pl{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:13px;font-size:14px;font-weight:700;line-height:1;border:1.5px solid #ab2c29}
.mg-price-ext .mg-price-pl{background:#ab2c29;color:#ffffff}
.mg-price-int .mg-price-pl{background:#ffffff;color:#1a1611;border-color:#1a1611}
.mg-price-ol{list-style:none;margin:0;padding:0}
.mg-price-li{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:10px;align-items:center;padding:5px 0;border-top:1px solid #e3d9ce;font-size:15px;line-height:1.35;color:#1a1611}
.mg-price-lno{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;line-height:1;border:1.5px solid #ab2c29;background:#ab2c29;color:#ffffff}
.mg-price-li.mg-price-int .mg-price-lno{background:#ffffff;color:#1a1611;border-color:#1a1611}
.mg-price-tx{min-width:0}
.mg-price-lnm{font-weight:700}
.mg-price-sub{font-size:13px;font-weight:500;color:#ab2c29;white-space:nowrap}
.mg-price-note{font-size:13px;font-weight:500;color:#6b6459;white-space:nowrap}
/* 넓지만 낮은 화면: 옆 목록 줄 간격을 줄여 그림 높이에 맞춤 */
@media (min-width:768px) and (max-height:640px){
  .mg-price-list{gap:12px}
  .mg-price-gh{margin-bottom:6px}
  .mg-price-li{padding:2px 0;font-size:14px;line-height:1.3}
}
/* 767 이하: 그림 위, 목록 아래 2단(외부창 | 내부창) */
@media (max-width:767.98px){
  .mg-price-wrap{display:block;margin-top:16px}
  .mg-price-list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px;margin-top:8px}
  .mg-price-gh{margin-bottom:4px}
  .mg-price-pl{height:22px;padding:0 10px;font-size:13px}
  .mg-price-li{grid-template-columns:20px minmax(0,1fr);column-gap:6px;padding:2px 0;font-size:14px;line-height:1.25}
  .mg-price-lno{width:20px;height:20px;font-size:12px;border-width:1.25px}
  .mg-price-sub,.mg-price-note{font-size:12px}
}
/* 359 이하(320 휴대폰): 그림을 화면 좌우 끝까지(여백 16px 만큼) 넓혀 그림 글자(13.5px 단위)가 12px 이상이 되게 */
@media (max-width:359.98px){.mg-price-fig{margin:0 -16px}}

/* 그림 */
.mg-price-dwg text{font-family:'Noto Sans KR',sans-serif}
.mg-price-floor{fill:#ffffff;stroke:#1a1611;stroke-width:1;stroke-linejoin:round}
.mg-price-slab-s{fill:#4a423b;stroke:#1a1611;stroke-width:1;stroke-linejoin:round}
.mg-price-slab-e{fill:#1a1611;stroke:#1a1611;stroke-width:1;stroke-linejoin:round}
.mg-price-veranda{fill:#efe8e0;stroke:none}
.mg-price-svc,.mg-price-entry{fill:#e3d9ce;stroke:none}
/* 벽: 0.9m 로 자른 윗면 흰색, 남쪽 면 #e3d9ce, 동쪽 면 #6b6459 */
.mg-price-ft{fill:#ffffff;stroke:#ffffff;stroke-width:.5;stroke-linejoin:round}
.mg-price-fs{fill:#e3d9ce;stroke:#e3d9ce;stroke-width:.5;stroke-linejoin:round}
.mg-price-fe{fill:#6b6459;stroke:#6b6459;stroke-width:.5;stroke-linejoin:round}
.mg-price-edge{fill:none;stroke:#1a1611;stroke-width:1;stroke-linecap:round}
/* 벽선 띠: 외부창 줄 = 레드 실선, 내부창 줄 = 먹 점선 */
.mg-price-band{fill:none;stroke-linecap:round}
.mg-price-band.mg-price-ext{stroke:#ab2c29;stroke-width:2.6}
.mg-price-band.mg-price-int{stroke:#1a1611;stroke-width:1.6;stroke-dasharray:4 3;stroke-linecap:butt}
.mg-price-reveal{fill:none;stroke:#ffffff;stroke-width:18;stroke-linejoin:round;stroke-linecap:round}
/* 창: 외부창 유리 #f6e9e1(빨강은 테두리·띠만), 내부창 유리 흰색 */
.mg-price-glass{stroke:none}
.mg-price-pane.mg-price-ext .mg-price-glass{fill:#f6e9e1}
.mg-price-pane.mg-price-ext .mg-price-frame{fill:#ab2c29;stroke:#ab2c29;stroke-width:.8;stroke-linejoin:round}
.mg-price-pane.mg-price-ext .mg-price-glint{fill:none;stroke:#ab2c29;stroke-width:1.3;stroke-linecap:round}
.mg-price-pane.mg-price-ext .mg-price-trace{fill:none;stroke:#8e2421;stroke-width:1.4;stroke-linejoin:round}
.mg-price-pane.mg-price-int .mg-price-glass{fill:#ffffff}
.mg-price-pane.mg-price-int .mg-price-frame{fill:#1a1611;stroke:#1a1611;stroke-width:.8;stroke-linejoin:round}
.mg-price-pane.mg-price-int .mg-price-glint{fill:none;stroke:#4a423b;stroke-width:1.1;stroke-dasharray:2.5 2.5;stroke-linecap:round}
.mg-price-pane.mg-price-int .mg-price-trace{fill:none;stroke:#1a1611;stroke-width:1.4;stroke-linejoin:round}
/* 번호 원 */
.mg-price-leader{fill:none;stroke-width:1.3}
.mg-price-badge.mg-price-ext .mg-price-leader{stroke:#ab2c29}
.mg-price-badge.mg-price-int .mg-price-leader{stroke:#1a1611}
.mg-price-badge.mg-price-ext .mg-price-dot{fill:#ab2c29;stroke:#ffffff;stroke-width:1.2}
.mg-price-badge.mg-price-int .mg-price-dot{fill:#ffffff;stroke:#1a1611;stroke-width:1.4}
.mg-price-badge.mg-price-ext .mg-price-no{fill:#ab2c29;stroke:#ffffff;stroke-width:1.6}
.mg-price-badge.mg-price-ext .mg-price-no-t{fill:#ffffff}
.mg-price-badge.mg-price-int .mg-price-no{fill:#ffffff;stroke:#1a1611;stroke-width:1.6}
.mg-price-badge.mg-price-int .mg-price-no-t{fill:#1a1611}
.mg-price-no-t{font-weight:700}
.mg-price-dwg-pc .mg-price-no-t{font-size:14px}
.mg-price-dwg-mo .mg-price-no-t{font-size:13.5px}
/* 공간 이름(모두 수평). 바탕색 테두리(paint-order)로 벽선 위에서도 읽히게 */
.mg-price-zn{font-weight:500;fill:#6b6459;paint-order:stroke;stroke-width:3px;stroke-linejoin:round}
.mg-price-dwg-pc .mg-price-zn{font-size:15px}
.mg-price-dwg-mo .mg-price-zn{font-size:13.5px}
.mg-price-zn.mg-price-h-w{stroke:#efe8e0}
.mg-price-zn.mg-price-h-b{stroke:#e3d9ce;fill:#4a423b}
.mg-price-zn.mg-price-h-f{stroke:#ffffff}
.mg-price-zn.mg-price-h-o{stroke:#ffffff}
.mg-price-zn.mg-price-h-n{stroke:none;fill:#4a423b}

/* 움직임: 외부창 띠가 그려짐 → 외부창 1~5 차례로 위에서 내려와 박힘(테두리 그려짐) + 번호 원 → 내부창 띠 → 내부창 6~10.
   목록 번호 원은 같은 때에 색이 참(글자는 처음부터 보임). 부드러운 감속 곡선만(튀어 오름 없음) */
.mg-price-wrap [data-n="1"]{--mg-price-d:0.75s}
.mg-price-wrap [data-n="2"]{--mg-price-d:0.95s}
.mg-price-wrap [data-n="3"]{--mg-price-d:1.15s}
.mg-price-wrap [data-n="4"]{--mg-price-d:1.35s}
.mg-price-wrap [data-n="5"]{--mg-price-d:1.55s}
.mg-price-wrap [data-n="6"]{--mg-price-d:2.25s}
.mg-price-wrap [data-n="7"]{--mg-price-d:2.45s}
.mg-price-wrap [data-n="8"]{--mg-price-d:2.65s}
.mg-price-wrap [data-n="9"]{--mg-price-d:2.85s}
.mg-price-wrap [data-n="10"]{--mg-price-d:3.05s}
.mg-price-wrap [data-band="FE"]{--mg-price-b:0.35s}
.mg-price-wrap [data-band="RE"]{--mg-price-b:0.35s}
.mg-price-wrap [data-band="FI"]{--mg-price-b:1.85s}
.mg-price-wrap [data-band="RI"]{--mg-price-b:1.85s}
@media (prefers-reduced-motion:no-preference){
  .mg-price-armed .mg-price-pane{animation:mg-price-drop .62s cubic-bezier(.2,.8,.2,1) var(--mg-price-d) both}
  .mg-price-armed .mg-price-trace,.mg-price-armed .mg-price-leader,.mg-price-armed .mg-price-reveal{stroke-dasharray:1 1}
  .mg-price-armed .mg-price-trace{animation:mg-price-draw .7s cubic-bezier(.65,0,.35,1) calc(var(--mg-price-d) + .05s) both}
  .mg-price-armed .mg-price-pane.mg-price-int .mg-price-glass{animation:mg-price-glass 1.1s cubic-bezier(.4,0,.2,1) calc(var(--mg-price-d) + .25s) both}
  .mg-price-armed .mg-price-reveal{animation:mg-price-draw .95s cubic-bezier(.65,0,.35,1) calc(var(--mg-price-b) + .12s) both}
  .mg-price-armed .mg-price-leader{animation:mg-price-draw .3s ease-out calc(var(--mg-price-d) + .2s) both}
  .mg-price-armed .mg-price-dot{animation:mg-price-fade .2s linear calc(var(--mg-price-d) + .2s) both}
  .mg-price-armed .mg-price-bd{transform-box:fill-box;transform-origin:center;animation:mg-price-pop .45s cubic-bezier(.22,1,.36,1) calc(var(--mg-price-d) + .3s) both}
  .mg-price-armed .mg-price-lno{animation:mg-price-li .4s ease-out calc(var(--mg-price-d) + .3s) both}
  .mg-price-armed:not(.mg-price-play) *{animation-play-state:paused!important}
}
/* 인쇄는 재생 전이라도 끝 장면 */
@media print{.mg-price-armed *{animation:none!important}}
@keyframes mg-price-drop{from{opacity:0;transform:translateY(-22px)}30%{opacity:1}}
@keyframes mg-price-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes mg-price-glass{from{fill:#e3d9ce}}
@keyframes mg-price-pop{from{opacity:0;transform:scale(.4)}}
@keyframes mg-price-fade{from{opacity:0}}
@keyframes mg-price-li{from{background-color:#ffffff;color:#6b6459;border-color:#e3d9ce}}

/* ===== 136 시공 과정(#process) '시공 당일': 접두사 mg-proc- (tools/mg136/process/gen.cjs 가 만듦) =====
   - 시간표 글자는 기존 그대로(HTML). 그림(SVG)에는 글자 없음. 색은 kyw-lx.css 팔레트 변수만.
   - HTML 그대로(스크립트 없음·늦음·실패·관찰자 무응답·동작 줄이기) = 끝 장면(시공 완료: 새 창 10짝). 교체 전 창·빈 자리·보양판·묶음·사다리는
     SVG 속성 visibility="hidden" 이라 처음부터 안 보이고, 아래 .mg-proc-on(스크립트가 붙임) 선택자에서만 보이게 바뀜.
   - 스크립트 켬 → .mg-proc-on + 누적 단계 .is-s1(양중) .is-s2(보양) .is-s3(철거) .is-s4(시공) .is-s5(완료). 움직임은 CSS 전환만.
   - 투명도는 들어오는 순간의 짧은 페이드에만. 빠지는 것은 움직인 뒤 visibility 로 사라짐(반투명 정지 없음). */

/* ---------- 틀: 휴대폰 = 시간표 5칸 위, 그림 아래(화면 가장자리까지) / 768 이상 = 시간표 왼쪽 세로, 그림 오른쪽 ---------- */
.day.mg-proc{display:grid;grid-template-columns:minmax(0,1fr);gap:14px 0}
.mg-proc-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:4px;min-width:0}
.mg-proc-list .day-t{grid-column:1/-1;width:auto;margin-bottom:8px}
.mg-proc .mg-proc-s{position:relative;display:block;min-width:0;padding-top:9px;border-top:2px solid var(--line);line-height:1.4;white-space:normal;word-break:keep-all;-webkit-tap-highlight-color:transparent}
.mg-proc .mg-proc-s b{display:block;margin:0 0 1px;line-height:1.35;font-variant-numeric:tabular-nums}
.mg-proc-s.mg-proc-pick{cursor:pointer}
.mg-proc-fig{margin:0 -16px;padding:14px 0 0;background:var(--ink);display:flex;justify-content:center;align-items:center}
.mg-proc-svg{display:block;width:100%;height:auto;max-height:calc(100vh - 170px);max-height:calc(100svh - 170px);overflow:hidden;--mg-proc-sw:1.55}
@media (max-width:359px){.mg-proc-svg{--mg-proc-sw:1.75}}
@media (min-width:768px){
  .day.mg-proc{grid-template-columns:184px minmax(0,1fr);column-gap:40px;align-items:center}
  .mg-proc-list{grid-template-columns:minmax(0,1fr)}
  .mg-proc-list .day-t{margin-bottom:10px}
  .mg-proc .mg-proc-s{padding:13px 0 13px 18px;border-top:0;border-left:2px solid var(--line);font-size:var(--f3)}
  .mg-proc .mg-proc-s b{display:inline-block;min-width:62px;margin:0 8px 0 0;font-size:var(--f4)}
  .mg-proc-fig{margin:0;padding:22px 22px 0;border-radius:var(--r)}
  /* PC 높이 상한 470px(1440 에서 늘어나는 길이 +480 이하): 넓은 칸에서는 무대 가운데에 놓임 */
  .mg-proc-svg{max-height:470px;max-height:min(470px,calc(100vh - 190px));max-height:min(470px,calc(100svh - 190px));--mg-proc-sw:1}
}
@media (min-width:768px) and (max-width:959px){.mg-proc-svg{--mg-proc-sw:1.25}}
/* 낮은 화면(가로 휴대폰·1280×540 등): 그림이 머리글·아래 상담 띠 사이에 다 들어오게. 작게 그려지면 선 배율(--mg-proc-sw)을 키움 */
@media (max-height:559px){
  .mg-proc-fig{padding-top:8px}
  .mg-proc-svg{max-height:calc(100vh - 150px);max-height:calc(100svh - 150px);--mg-proc-sw:1.6}
}
@media (max-height:450px){.mg-proc-svg{--mg-proc-sw:2.4}}

/* ---------- 도면(첫 화면·가격표 아래 그림과 같은 색·선, 어두운 무대 위 흰 모형) ---------- */
.mg-proc-svg polygon,.mg-proc-svg path{stroke-linejoin:round}
.mg-proc-floor{fill:var(--white);stroke:var(--ink);stroke-width:calc(var(--mg-proc-sw)*1px)}
/* 받침: 어두운 무대(#1a1611)와 섞이지 않게 남면 #6b6459·동면 #4a423b */
.mg-proc-slab-s{fill:var(--ink3);stroke:var(--ink);stroke-width:calc(var(--mg-proc-sw)*1px)}
.mg-proc-slab-e{fill:var(--ink2);stroke:var(--ink);stroke-width:calc(var(--mg-proc-sw)*1px)}
.mg-proc-veranda{fill:var(--bg1)}
.mg-proc-svc{fill:var(--line)}
.mg-proc-ft{fill:var(--white);stroke:var(--white);stroke-width:.5px}
.mg-proc-fs{fill:var(--line);stroke:var(--line);stroke-width:.5px}
.mg-proc-fe{fill:var(--ink3);stroke:var(--ink3);stroke-width:.5px}
.mg-proc-edge{fill:none;stroke:var(--ink);stroke-width:calc(var(--mg-proc-sw)*1px);stroke-linecap:round}
.mg-proc-band{fill:none}
.mg-proc-band.mg-proc-ext{stroke:var(--red);stroke-width:calc(var(--mg-proc-sw)*2.5px);stroke-linecap:butt}
.mg-proc-band.mg-proc-int{stroke:var(--ink);stroke-width:calc(var(--mg-proc-sw)*1.6px);stroke-dasharray:calc(var(--mg-proc-sw)*4px) calc(var(--mg-proc-sw)*3px)}
/* 새 창: 외부창 = 레드 틀 + 연한 유리 / 내부창 = 먹 틀 + 흰 유리 */
.mg-proc-ng{stroke:none}
.mg-proc-ext .mg-proc-ng{fill:var(--red-l)}
.mg-proc-ext .mg-proc-nf{fill:var(--red);stroke:var(--red);stroke-width:.8px}
.mg-proc-int .mg-proc-ng{fill:var(--white)}
.mg-proc-int .mg-proc-nf{fill:var(--ink);stroke:var(--ink);stroke-width:.8px}
.mg-proc-gl{fill:none;stroke-linecap:butt;stroke-width:calc(var(--mg-proc-sw)*1.2px)}
.mg-proc-ext .mg-proc-gl{stroke:var(--red)}
.mg-proc-int .mg-proc-gl{stroke:var(--ink2)}
.mg-proc-no{fill:none;stroke-linecap:butt;stroke-linejoin:miter}
.mg-proc-ext .mg-proc-no{stroke:var(--red-d);stroke-width:calc(var(--mg-proc-sw)*1.5px)}
.mg-proc-int .mg-proc-no{stroke:var(--ink);stroke-width:calc(var(--mg-proc-sw)*1.3px)}
/* 교체 전 창(회색 틀 + 가운데 문설주), 철거 뒤 빈 자리(점선 #6b6459: 무대 위에서도 보임) */
.mg-proc-og{fill:var(--line);stroke:none}
.mg-proc-of{fill:var(--ink3);stroke:var(--ink3);stroke-width:.6px}
.mg-proc-om{fill:none;stroke:var(--ink3);stroke-width:calc(var(--mg-proc-sw)*1.6px)}
.mg-proc-gap{fill:none;stroke:var(--ink3);stroke-width:calc(var(--mg-proc-sw)*1.3px);stroke-dasharray:calc(var(--mg-proc-sw)*4px) calc(var(--mg-proc-sw)*3px)}
/* 실내 보양: 판 = 면 색(#efe8e0) + 판 이음매(가장자리 선). 평행 빗금 없음(마루판으로 읽히지 않게) */
.mg-proc-pf{fill:var(--bg1);stroke:var(--ink3);stroke-width:calc(var(--mg-proc-sw)*.8px);stroke-linejoin:miter}
/* 가구 굵기(D13): 색은 그림 안 속성, 굵기만 화면 크기별 */
.mg-proc-fu-g{stroke-width:calc(var(--mg-proc-sw)*0.8px)}.mg-proc-fu-mk{stroke-width:calc(var(--mg-proc-sw)*0.8px)}.mg-proc-fu-mw{stroke-width:calc(var(--mg-proc-sw)*1px)}.mg-proc-fu-mi{stroke-width:calc(var(--mg-proc-sw)*1px)}.mg-proc-fu-md{stroke-width:calc(var(--mg-proc-sw)*0.8px)}.mg-proc-fu-mf{stroke-width:calc(var(--mg-proc-sw)*0.8px)}.mg-proc-fu-ml{stroke-width:calc(var(--mg-proc-sw)*1px)}.mg-proc-fu-mb{stroke-width:calc(var(--mg-proc-sw)*1.2px)}.mg-proc-fu-lg{stroke-width:calc(var(--mg-proc-sw)*1.8px)}
/* 양중: 사다리(밝은 선) + 받침 + 세운 창 판 */
.mg-proc-rail{fill:none;stroke:var(--line);stroke-width:calc(var(--mg-proc-sw)*2px);stroke-linecap:butt}
.mg-proc-rung{fill:none;stroke:var(--line);stroke-width:calc(var(--mg-proc-sw)*1px)}
.mg-proc-bt{fill:var(--bg2);stroke:var(--ink2);stroke-width:calc(var(--mg-proc-sw)*.8px)}
.mg-proc-bs,.mg-proc-be{fill:var(--line);stroke:var(--ink2);stroke-width:calc(var(--mg-proc-sw)*.8px)}
.mg-proc-w.mg-proc-int{--mg-proc-gx:240ms}

/* ---------- 스크립트 켬(.mg-proc-on): 시작(at 없음) = 교체 전 ---------- */
.mg-proc-on .mg-proc-old,.mg-proc-on .mg-proc-prot,.mg-proc-on .mg-proc-lift,.mg-proc-on .mg-proc-bunw{visibility:visible}
.mg-proc-on .mg-proc-old{transform-box:fill-box;transform-origin:50% 0}
.mg-proc-on .mg-proc-gap{opacity:0}
.mg-proc-on .mg-proc-new{opacity:0;transform:translateY(-16px)}
.mg-proc-on .mg-proc-no,.mg-proc-on .mg-proc-gl,.mg-proc-on .mg-proc-band.mg-proc-ext,.mg-proc-on .mg-proc-rail{stroke-dasharray:1 2;stroke-dashoffset:1}
.mg-proc-on .mg-proc-band.mg-proc-int{opacity:0}
.mg-proc-on .mg-proc-pf{opacity:0;transform:translateY(-8px)}
.mg-proc-on .mg-proc-rung{opacity:0}
.mg-proc-on .mg-proc-bun{opacity:0;transform:translateY(var(--mg-proc-rise))}

/* at1 08:00 제품 양중: 사다리가 아래에서 받침 자리(앞 베란다 창 높이)까지 그려지고, 받침과 창 판 묶음이 사다리 따라 올라옴 */
.mg-proc-on.is-s1 .mg-proc-rail{stroke-dashoffset:0;transition:stroke-dashoffset .55s cubic-bezier(.3,.6,.3,1)}
.mg-proc-on.is-s1 .mg-proc-rung{opacity:1;transition:opacity .15s calc(var(--mg-proc-f)*.45s + .05s)}
.mg-proc-on.is-s1 .mg-proc-bun{opacity:1;transform:none;transition:transform 1s cubic-bezier(.22,1,.36,1) .3s,opacity .2s .3s}

/* at2 09:00 실내 보양: 보양판이 위에서 내려와 앞에서 뒤로 깔림 */
.mg-proc-on.is-s2 .mg-proc-pf{opacity:1;transform:none;transition:opacity .18s calc(var(--mg-proc-k)*40ms + .05s),transform .45s cubic-bezier(.22,1,.36,1) calc(var(--mg-proc-k)*40ms + .05s)}

/* at3 10:00 창호 철거: 기존 창이 위로 접히며 빠지고 자리가 점선으로 */
.mg-proc-on.is-s3 .mg-proc-old{transform:translateY(-6px) scaleY(0);visibility:hidden;transition:transform .32s cubic-bezier(.5,0,.75,0) calc(var(--mg-proc-r)*75ms),visibility 0s calc(var(--mg-proc-r)*75ms + .32s)}
.mg-proc-on.is-s3 .mg-proc-gap{visibility:visible;opacity:1;transition:opacity .2s calc(var(--mg-proc-r)*75ms + .2s)}

/* at4 15:00 창호 시공: 창 판이 집 안으로 들어가고 받침·사다리는 내려가 걷힘. 외부창 1→5, 내부창 6→10 이 위에서 내려와 자리 잡고 테두리·벽선이 그려짐 */
.mg-proc-on.is-s4 .mg-proc-bq{transform:translate(var(--mg-proc-inx),var(--mg-proc-iny));visibility:hidden;transition:transform .4s cubic-bezier(.4,0,.6,1),visibility 0s .4s}
.mg-proc-on.is-s4 .mg-proc-bun{transform:translateY(var(--mg-proc-rise));visibility:hidden;transition:transform .5s cubic-bezier(.5,0,.75,0) .45s,visibility 0s .95s}
.mg-proc-on.is-s4 .mg-proc-rail{stroke-dashoffset:1;transition:stroke-dashoffset .45s ease-in .5s}
.mg-proc-on.is-s4 .mg-proc-rung{visibility:hidden;transition:visibility 0s calc((1 - var(--mg-proc-f))*.45s + .5s)}
.mg-proc-on.is-s4 .mg-proc-new{opacity:1;transform:none;transition:opacity .18s calc(var(--mg-proc-o)*95ms + var(--mg-proc-gx,0ms) + .25s),transform .5s cubic-bezier(.22,1,.36,1) calc(var(--mg-proc-o)*95ms + var(--mg-proc-gx,0ms) + .25s)}
.mg-proc-on.is-s4 .mg-proc-gap{visibility:hidden;transition:visibility 0s calc(var(--mg-proc-o)*95ms + var(--mg-proc-gx,0ms) + .75s)}
.mg-proc-on.is-s4 .mg-proc-no{stroke-dashoffset:0;transition:stroke-dashoffset .5s cubic-bezier(.4,0,.2,1) calc(var(--mg-proc-o)*95ms + var(--mg-proc-gx,0ms) + .3s)}
.mg-proc-on.is-s4 .mg-proc-band.mg-proc-ext{stroke-dashoffset:0;transition:stroke-dashoffset calc(var(--mg-proc-bl)*.55s) linear calc(var(--mg-proc-b)*.55s + .75s)}
.mg-proc-on.is-s4 .mg-proc-band.mg-proc-int{opacity:1;transition:opacity .25s calc(var(--mg-proc-b)*.45s + 1.4s)}
/* 사다리·묶음 틀도 다 빠진 뒤(1초) 숨김: 끝 장면이 HTML 그대로(속성 visibility="hidden")와 같은 모습이 되게 */
.mg-proc-on.is-s4 .mg-proc-lift,.mg-proc-on.is-s4 .mg-proc-bunw{visibility:hidden;transition:visibility 0s 1s}

/* at5 18:00 시공 완료: 보양판이 뒤에서부터 들려 걷히고, 유리에 반사선이 차례로 */
.mg-proc-on.is-s5 .mg-proc-pf{transform:translateY(-8px);visibility:hidden;transition:transform .3s cubic-bezier(.5,0,.75,0) calc(var(--mg-proc-kr)*35ms + .2s),visibility 0s calc(var(--mg-proc-kr)*35ms + .5s)}
.mg-proc-on.is-s5 .mg-proc-gl{stroke-dashoffset:0;transition:stroke-dashoffset .35s ease-out calc(var(--mg-proc-o)*70ms + .35s)}
/* 보양판 틀도 판이 다 걷힌 뒤(마지막 판 1.2초) 숨김 */
.mg-proc-on.is-s5 .mg-proc-prot{visibility:hidden;transition:visibility 0s 1.25s}

/* ---------- 시간표 강조(스크립트 켬일 때만). 글자·순서는 그대로, 색과 진행 막대만 ---------- */
.mg-proc-on .mg-proc-s,.mg-proc-on .mg-proc-s b{color:var(--ink3);transition:color .25s}
.mg-proc-on .mg-proc-s:hover,.mg-proc-on .mg-proc-s:hover b{color:var(--ink)}
.mg-proc-on .mg-proc-s.mg-proc-done,.mg-proc-on .mg-proc-s.mg-proc-done b{color:var(--ink)}
.mg-proc-on .mg-proc-s.mg-proc-now,.mg-proc-on .mg-proc-s.mg-proc-now b{color:var(--red)}
.mg-proc-on .mg-proc-s::before{content:'';position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left center}
.mg-proc-on .mg-proc-s.mg-proc-done::before{transform:none;background:var(--ink)}
.mg-proc-on .mg-proc-s.mg-proc-now::before{transform:none;transition:transform var(--mg-proc-dur,1.4s) linear}
@media (min-width:768px){
  /* PC 만 지금 단계를 굵게(휴대폰은 단계 이름이 두 줄까지 접혀 굵기가 바뀌면 높이가 출렁임: 색만) */
  .mg-proc-on .mg-proc-s.mg-proc-now{font-weight:700}
  .mg-proc-on .mg-proc-s::before{left:-2px;right:auto;top:0;bottom:0;width:2px;height:auto;transform:scaleY(0);transform-origin:center top}
}

/* 순간 이동(처음 붙일 때·단계 누름 직전 상태 맞추기)·동작 줄이기: 전환 없음 */
.mg-proc-snap *,.mg-proc-snap *::before{transition:none!important}
@media (prefers-reduced-motion:reduce){.mg-proc *,.mg-proc *::before{transition:none!important}}