/* 서비스 소개 페이지 공통 스타일.
   넓은 화면(1024px 이상): 피그마 1920×966 프레임을 좌표 그대로 놓되 높이만 992px(1080 모니터의 페이지 영역)로 늘리고 service.js 가 화면 폭에 맞춰 --z 로 확대·축소한다.
   좁은 화면(1023 이하): 피그마 "Section 1 — KR (한국어 반응형)" 태블릿 834×1194 · 휴대폰 393×852 배치(맨 아래 미디어 쿼리). */
* { box-sizing: border-box; }
html, body { margin: 0; background: #fff; }
html { overflow-x: clip; } /* PC 에서 1920 시안의 좌우 여백이 창 밖으로 나가 있어도 가로로 밀리지 않게 */
body { overflow-x: hidden; -webkit-font-smoothing: antialiased; }
main { zoom: var(--z, 1); width: 1920px; margin-left: calc(var(--mx, 0px) / var(--z, 1)); } /* zoom 은 여백에도 걸리므로 화면 px(--mx)을 z 로 나눠 준다 */
p, h1, h2, ul { margin: 0; padding: 0; font-weight: inherit; font-size: inherit; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; }

.stage { position: relative; width: 1920px; height: 986px; overflow: hidden; background: #fff; }
/* 2026-11-13 시안(986 높이): 화면마다 창 높이를 꽉 채워 다음 화면 윗부분이 아래로 비치지 않게 한다(시안 메모 "끝이 보여서 조금씩 올라가 높이가 안 맞아 보임").
   설명 화면은 위에서 262 그대로(시안 메모 "맨 위랑 간격 262"), 첫 화면 글은 헤더를 뺀 영역 가운데에 오도록 늘어난 높이의 절반만큼 내린다. */
@media (min-width: 1024px) {
  .stage.hero, .stage.step { --sh: max(840px, calc(100vh / var(--z, 1))); height: var(--sh); } /* 창 높이에 맞춘다. 창이 아주 낮아도 내용(아래끝 y822)이 들어가게 최소 840 */
  .stage.step { --sh: 966px; } /* 2026-11-14 주인님: 일반 스크롤이 되면서 창 높이(÷z)만큼 늘어난 설명 화면 아래에 빈 칸이 크게 생겼다 → 설명 화면은 시안 높이(966) 고정. 첫 화면(hero)만 창 높이(랜딩 사진 선과 맞춤) */
  .stage.hero > .eyebrow, .stage.hero > h1, .stage.hero > .lead, .stage.hero > .btn { translate: 0 calc((var(--sh) - 986px) / 2); }
  .stage.hero > .hero-art { opacity: .52; } /* 948:17037(2026-11-13): 스케치가 절반 농도 — 그 위에 '설계하러 가기' 버튼이 올라온다. 크기 791×720 은 원본을 세로로 2% 늘린 값 */
}
.stage > * { position: absolute; }

.geist, .st, .body, .list li, .btn span, .eyebrow { font-family: 'Geist', 'Noto Sans KR', sans-serif; }

/* 구글 웹 글꼴 Noto Sans KR 은 한글 사이 공백이 피그마보다 넓다(0.047em). 시안 폭에 맞춘다. 로마자 쪽은 시안과 같아 건드리지 않는다. */
:where([lang="ko"]) .hero h1, :where([lang="ko"]) .lead, :where([lang="ko"]) .index strong, :where([lang="ko"]) .index small, :where([lang="ko"]) .list li.extra, :where([lang="ko"]) .cta-text h2, :where([lang="ko"]) .cta-text p { word-spacing: -0.047em; }

/* 격자선: 모든 UI 뒤. 쌓는 순서 = 격자선 0 < 배경 이미지 1 < 글 패널 2 < 글자·이미지 3 < 헤더 4 */
.grid { inset: 0; z-index: 0; pointer-events: none; }
.grid i { position: absolute; top: 0; width: 1px; height: 100%; background: rgba(26, 25, 83, 0.05); }

/* 소개 */
.eyebrow { font-weight: 300; font-size: 15px; line-height: 1.2; letter-spacing: -0.45px; color: #403b39; white-space: nowrap; z-index: 3; }
/* 2026-11-14 주인님: 'Propmate Map 이용 방법'·'Madang 이용 방법' 문구는 보이지 않게(지움). 자리는 남겨 제목·설명 위치는 그대로 */
.stage.hero > .eyebrow { visibility: hidden; }
.hero h1 { font-family: 'Geist', 'Noto Sans KR', sans-serif; font-weight: 500; font-size: 60px; line-height: 1.18; letter-spacing: -2.4px; color: #403b39; white-space: nowrap; z-index: 3; margin-top: 1px; }
.lead { font-family: 'Geist', 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 18px; line-height: 1.6; letter-spacing: -0.36px; color: #5f5a52; z-index: 3; }

.index { left: 0; bottom: 0; width: 1920px; height: 165px; display: flex; padding: 0 240px; border-top: 1px solid #c9c9c9; border-bottom: 1px solid #c9c9c9; z-index: 3; }
.index li { flex: 1 0 0; display: flex; flex-direction: column; gap: 10px; padding: 36px 0 40px; }
.index em { font: normal 400 15px/1.4 'Geist', sans-serif; letter-spacing: -0.3px; color: #5f5a52; position: relative; top: -9px; } /* 2026-11-13 주인님: 번호 9px 위로 */
.index strong { font: 500 20px/1.3 'Noto Sans KR', sans-serif; letter-spacing: -0.4px; color: #403b39; }
.index small { position: relative; top: -5px; font: 300 14px/1.4 'Noto Sans KR', sans-serif; letter-spacing: -0.28px; color: #5f5a52; } /* 2026-11-13 주인님: 설명 5px 위로 */

/* 단계 설명 */
.panel { background: #fff; border-top: 1px solid #000; z-index: 2; }
.st, .body, .list li { font-weight: 400; font-size: 12px; line-height: 18px; color: #060606; }
.st { white-space: nowrap; z-index: 3; }
.body { z-index: 3; word-break: break-word; white-space: pre-wrap; }
.step h2 { font-family: 'Geist', 'Noto Sans KR', sans-serif; font-weight: 500; font-size: 25px; line-height: 1.6; color: #1f1e1e; white-space: nowrap; z-index: 3; }
.list { display: contents; }
.list li { position: absolute; z-index: 3; }
.list li.extra { font-family: 'Geist', 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 17px; line-height: 1.5; letter-spacing: -0.34px; color: #403b39; }

.vis { z-index: 3; }
.vis.under { z-index: 1; }
.narrow { display: none; }

/* 화살표 버튼 */
.btn { z-index: 3; }
.btn span { position: absolute; left: 0; top: 0; font-weight: 400; font-size: 15px; line-height: 35px; color: #1f1e1e; white-space: nowrap; }
.btn b { position: absolute; left: 0; right: 0; top: 42.86%; bottom: 5.71%; }
.btn b img { position: absolute; width: auto; height: auto; }

/* 마무리 */
.cta-bg { left: 0; top: 0; width: 1920px; height: 741px; z-index: 1; }
.cta-text { left: 0; top: 413px; width: 1920px; text-align: center; color: #fff; z-index: 3; }
.cta-text h2 { font: 500 56px/1.25 'Noto Sans KR', sans-serif; letter-spacing: -1.68px; white-space: nowrap; }
.cta-text p { margin-top: 20px; font: 300 18px/1.6 'Noto Sans KR', sans-serif; letter-spacing: -0.36px; }
.cta-links { inset: 0; z-index: 3; pointer-events: none; }
.cta-links .btn { position: absolute; pointer-events: auto; }
.btn-cta span { font-family: 'Geist', 'Noto Sans KR', sans-serif; font-size: 18px; } /* 11-11 글꼴 통일: 시안은 나눔고딕이었다 */

/* 마무리 사진 아래 끝 = 랜딩 첫 화면 사진 아래 끝(100vh × 741/966). main 이 zoom 이라 --z 로 나눠 화면 px 로 맞춘다.
   글은 사진 높이 비율(413/741) 그대로, 버튼은 사진 아래 64px(시안 741 → 805). (주인님 11-10 "이미지 끝나는 부분 통일") */
@media (min-width: 1024px) {
  .stage.cta { --ch: calc(100vh * 741 / 966 / var(--z, 1)); height: calc(var(--ch) + 251px); }
  .stage.cta .cta-bg { height: var(--ch); object-fit: cover; }
  .stage.cta .cta-text { top: calc(var(--ch) * 413 / 741); }
  .stage.cta .cta-links .btn { top: calc(var(--ch) + 64px) !important; }
}

/* ── 첫 화면 사진(프롭메이트 맵, 2026-11-13 시안 882:8410): 사진 741 + 아래 흰 띠(목차 783~946), 글·버튼은 흰색.
      마당 첫 화면은 사진 없이 목차 띠 윗선이 y743(882:9129) ── */
.hero-bg { left: 0; top: 0; width: 1920px; height: 741px; object-fit: cover; z-index: 1; }
.stage.hero.photo .eyebrow, .stage.hero.photo h1, .stage.hero.photo .lead, .stage.hero.photo > .btn span { color: #fff; }
.stage.hero.photo .index { bottom: 40px; height: 163px; border: 0; }
.stage.hero:not(.photo) .index { bottom: 78px; border-bottom: 0; }
@media (min-width: 1024px) {
  /* 2026-11-13 주인님: 첫 화면의 사진 아래끝(지도 소개)·목차 윗선(마당 소개)을 랜딩 첫 화면 사진 아래끝과 같은 높이로 — 랜딩은 창 높이 × 741/966.
     --sh 는 창 높이(÷z) 라 화면 px 로도 같은 자리가 된다(창이 840 보다 낮을 때만 --sh 가 840 에 멈춰 조금 달라진다) */
  .stage.hero { --line: calc(var(--sh) * 741 / 966); }
  .stage.hero.photo .hero-bg { height: var(--line); }
  .stage.hero.photo .index { top: min(calc(var(--line) + 42px), calc(var(--sh) - 203px)); bottom: auto; } /* 사진 아래 42px 띄운 목차 글(전과 같은 간격). 창이 낮으면 화면 안에 들어오게 */
  .stage.hero:not(.photo) .index { top: var(--line); bottom: auto; }
  .stage.hero > .hero-art { top: calc(var(--line) - 718px) !important; } /* 스케치 아래끝도 목차 윗선에(시안 y742) */
}
/* 맵 4번 화면(882:8925)만 시안이 다르다: 번호·소제목 한 줄("04  |  AI 분석"), 본문 14px, 목록 간격 30 */
.stage.step.big > .st { white-space: pre; }
@media (min-width: 1024px) {
  .stage.step.big > .body { font-size: 14px; }
  :where([lang="ko"]) .stage.step.big > .body { word-spacing: -0.047em; word-break: keep-all; } /* 시안 줄바꿈(…㎡당 가격을 / 예측합니다…)과 같게 */
}

/* ══════════ 좁은 화면(1023 이하) — 피그마 "Section 1 — KR (한국어 반응형)" 921:5541 (2026-11-13) ══════════
   화면(.stage) 하나 = 기기 화면 한 장(최소 높이, 스냅은 2026-11-14 없앰). 태블릿 834×1194 기준 값, 767 이하는 휴대폰 393×852 기준 값.
   세로 위치는 시안 비율(화면 높이 대비)로, 글 사이 간격은 시안 px 그대로. 글이 길어 넘치면 화면이 그만큼 길어진다. */
@media (max-width: 1023px) {
  main { zoom: 1; width: 100%; margin-left: 0; padding-top: 0; }
  .stage { display: flex; flex-direction: column; width: 100%; height: auto; min-height: 100svh; padding: 0 40px; overflow: hidden; } /* 스냅 없앰(2026-11-14 주인님) */
  .stage > *, .list li, .btn span { position: static !important; }
  .stage > [style], .list li[style] { left: auto !important; top: auto !important; width: auto !important; height: auto !important; }
  .stage > * { flex: none; }
  .grid, .panel, .wide, .stage > .wide { display: none; }
  .narrow { display: block; }
  .hero h1, .lead, .body, .step h2, .cta-text h2 { word-break: keep-all; white-space: normal; }

  /* ── 첫 화면: 위쪽(사진·스케치) = 화면 높이 - 목차 띠, 글은 위에서 349/952 지점부터, 버튼은 아래에서 108/952 ── */
  .stage.hero { --strip: 242px; --ph: calc(100svh - var(--strip)); }
  .stage > .hero-bg.narrow, .stage > .cta-bg.narrow { position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; object-fit: cover; z-index: 0; }
  .stage.hero > .hero-bg.narrow { height: calc(100% - var(--strip)) !important; }
  .stage.hero > .eyebrow, .stage.hero > h1, .stage.hero > .lead, .stage.hero > .btn { position: relative !important; z-index: 2; }
  .stage.hero > .eyebrow { margin-top: max(110px, calc(var(--ph) * 349 / 952)); font-size: 15px; }
  .hero h1 { margin-top: 66px; font-size: 44px; line-height: 57px; letter-spacing: 0; }
  .stage.hero > .lead { margin-top: 39px; max-width: 660px; font-size: 18px; line-height: 23px; letter-spacing: 0; color: #403b39; }
  .stage.hero.photo > .lead { color: #fff; }
  .stage.hero > .btn { display: block; width: 254px !important; height: 32px !important; margin-top: auto; padding-top: 0; margin-bottom: max(32px, calc(var(--ph) * 108 / 952)); }
  .stage.hero > .lead { margin-bottom: 40px; } /* 글과 버튼 사이 최소 40px(글이 길 때) */
  .stage.hero > .hero-art { position: absolute !important; left: auto !important; right: 0; top: auto !important; bottom: var(--strip); width: min(791px, 95%) !important; height: auto !important; aspect-ratio: 791 / 706; object-fit: contain; z-index: 0; }
  /* 목차 띠: 2칸(맵 4개) · 3칸(마당 5개), 한 칸 높이 115 */
  .index { position: static !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; width: auto; height: var(--strip); margin: 0 -40px; padding: 0 40px; border: 0; background: transparent; z-index: 2; } /* 흰 바탕을 깔면 배경 세로선(body::after)이 가려진다 — 사진·스케치는 띠 위에서 끝나므로 바탕이 없어도 된다(2026-11-13 주인님) */
  .stage.hero.photo .index, .stage.hero:not(.photo) .index { bottom: auto; height: var(--strip); }
  .stage.hero:not(.photo) .index { border-top: 1px solid #c9c9c9; border-bottom: 0; }
  .index:has(li:nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .index li { height: 115px; gap: 4px; padding: 20px 8px 0 0; }
  .index small, .index em { top: 0; } /* 좁은 화면 배치는 그대로 */

  /* ── 설명 화면: 위 선(y163) → 번호·제목·본문·목록·버튼 → 아래에 화면 예시(754×470, 바닥에서 60) ── */
  .stage.step { padding: max(120px, calc(100svh * 163 / 1194)) 40px 60px; }
  .stage.step::before { content: ''; display: block; flex: none; border-top: 1px solid #000; }
  .stage.step > .st { margin-top: 39px; font-size: 12px; line-height: 18px; }
  .step h2 { margin-top: 8px; font-size: 25px; line-height: 1.6; }
  .stage.step > .body { max-width: 420px; margin-top: 33px; font-size: 14px; line-height: 18px; white-space: normal !important; }
  .list { display: block; margin-top: 41px; }
  .list li, .list li.extra { margin-bottom: 12px; font-family: 'Geist', 'Noto Sans KR', sans-serif; font-weight: 400; font-size: 13px; line-height: 18px; letter-spacing: 0; color: #060606; }
  .list li:last-child { margin-bottom: 0; }
  .stage.step > .btn { display: block; width: 309px !important; height: 39px !important; margin-top: 40px; }
  /* 화면 예시: 시안 비율(754×470)이 기본. 화면이 낮으면(iPad mini 등) 한 화면에 들어오게 남는 높이만큼만 — 그림은 잘리지 않고 줄어든다 */
  .stage > .vis.narrow, .stage.step > .vis:not(.wide) { display: block; flex: 1 1 0; width: 100% !important; height: auto !important; min-height: 220px; max-height: calc((100vw - 80px) * 470 / 754); object-fit: contain; object-position: left bottom; margin-top: 44px; }
  .stage.step > .btn { margin-bottom: auto; } /* 남는 높이는 버튼과 화면 예시 사이로(예시는 바닥에 붙는다). 최소 간격 44 는 예시의 margin-top */

  /* 버튼(화살표 선): 글자는 왼쪽 위, 선은 버튼 아래쪽 */
  .btn { position: relative !important; }
  .btn span { position: absolute !important; left: 0; top: 0; }
  .btn b { position: absolute !important; left: 0; right: 0; top: 42.86%; bottom: 5.71%; height: auto; }
  .btn b img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; inset: 0 !important; }

  /* ── 마지막 화면: 사진(화면 높이 - 242) 가운데에 글, 아래 흰 띠에 버튼 두 개 ── */
  .stage.cta { --ph: calc(100svh - 242px); padding: 0; }
  .stage.cta > .cta-bg.narrow { height: var(--ph) !important; }
  .cta-text { position: relative !important; left: auto; top: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: var(--ph); padding: 14px 40px 0; z-index: 2; }
  .cta-text h2 { font-size: 44px; line-height: 57px; letter-spacing: 0; text-align: center; }
  .cta-text p { margin-top: 20px; font-size: 18px; line-height: 23px; letter-spacing: 0; }
  .stage > .cta-links { position: static !important; display: flex; justify-content: space-between; padding: 81px 11.27% 0; pointer-events: auto; }
  .cta-links .btn { display: block; position: relative !important; left: auto !important; top: auto !important; width: 228px !important; height: 35px !important; }
  .btn-cta span { font-size: 18px; line-height: 35px; }
}

/* ── 휴대폰(767 이하) — 393×852 ── */
@media (max-width: 767px) {
  .stage { padding: 0 20px; }
  .stage.hero { --strip: clamp(250px, calc(100svh * 314 / 852), 314px); }
  .stage.hero > .eyebrow { margin-top: max(84px, calc(var(--ph) * 151 / 538)); font-size: 13px; }
  .hero h1 { margin-top: clamp(20px, 4.7svh, 40px); font-size: 28px; line-height: 36px; }
  .stage.hero > .lead { margin-top: clamp(20px, 4.7svh, 40px); margin-bottom: 24px; max-width: 320px; font-size: 13px; line-height: 17px; }
  .stage.hero > .btn { width: 203px !important; height: 26px !important; margin-bottom: max(24px, calc(var(--ph) * 41 / 538)); }
  .stage.hero > .hero-art { width: min(373px, 95%) !important; }
  .index, .index:has(li:nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; /* 칸 폭 모두 같게(2026-11-13 주인님). 시안은 왼쪽 칸 182 고정이었다 */ align-content: stretch; margin: 0 -20px; padding: 20px 20px 0; }
  .index li { height: auto; gap: 2px; padding: 5px 6px 0 0; }
  .index em { font-size: 11px; line-height: 11px; }
  .index strong { font-size: 14px; line-height: 18px; }
  .index small { font-size: 13px; line-height: 18px; }

  .stage.step { padding: max(80px, calc(100svh * 112 / 852)) 20px clamp(28px, 7svh, 60px); }
  .stage.step > .st { margin-top: 29px; font-size: 11px; line-height: 16.68px; }
  .step h2 { margin-top: 11px; font-size: 23px; }
  .stage.step > .body { max-width: none; margin-top: 30px; font-size: 13px; line-height: 16.68px; }
  .list { margin-top: 30px; }
  .list li, .list li.extra { margin-bottom: 8px; }
  .stage.step > .btn { width: 203px !important; height: 26px !important; margin-top: clamp(28px, 7.3svh, 62px); }
  .stage > .vis.narrow, .stage.step > .vis:not(.wide) { min-height: 150px; max-height: calc((100vw - 40px) * 220 / 353); margin-top: clamp(20px, 4.4svh, 37px); }
  .btn span { font-size: 14px; line-height: 32px; }
  .stage.step > .btn span, .stage.hero > .btn span { line-height: 24px; }

  .stage.cta { --ph: calc(100svh * 630 / 852); }
  .cta-text { padding: 32px 20px 0; }
  .cta-text .mbr { display: block; }
  .cta-text h2 { font-size: 28px; line-height: 36px; text-wrap: balance; }
  .cta-text p { margin-top: 10px; font-size: 14px; line-height: 18px; }
  .stage > .cta-links { flex-direction: column; align-items: center; justify-content: flex-start; gap: 44px; padding: 50px 20px 40px; }
  .cta-links .btn { width: 211px !important; height: 32px !important; }
  .btn-cta span { font-size: 15px; line-height: 32px; }
}

/* 좁은 화면 배경 세로선(2026-11-13 주인님): 화면 좌우 여백(태블릿 40 · 휴대폰 20) 안에 9줄 */
@media (max-width: 1023px) {
  body::after { content: ''; position: fixed; top: 0; bottom: 0; left: 40px; right: 39px; z-index: 0; pointer-events: none;
    background: repeating-linear-gradient(to right, rgba(26, 25, 83, 0.05) 0 1px, transparent 1px calc((100% - 1px) / 8)); }
}
@media (max-width: 767px) {
  body::after { left: 20px; right: 19px; }
}

/* 낮은 화면(iPad mini 1024 · 작은 휴대폰)과 긴 번역: 한 화면에 들어오게 위아래 여백만 줄인다(시안 기기 크기에서는 시안 값 그대로) */
@media (min-width: 768px) and (max-width: 1023px) and (max-height: 1100px) {
  .stage.hero > .eyebrow { margin-top: max(110px, calc(var(--ph) * 349 / 952 - 70px)); }
  .hero h1 { margin-top: 48px; }
}
@media (max-width: 767px) {
  html:not([lang="ko"]) .stage.hero > .btn { margin-bottom: 24px; }
}
@media (max-width: 767px) and (max-height: 800px) {
  .stage.hero > .eyebrow { margin-top: 76px; }
  .hero h1, .stage.hero > .lead { margin-top: 18px; }
  .stage.hero > .lead { margin-bottom: 18px; }
  .stage.hero > .btn { margin-bottom: 20px; }
  .stage.step { padding-top: 72px; padding-bottom: 20px; }
  .stage.step > .st { margin-top: 18px; }
  .step h2 { margin-top: 4px; }
  .stage.step > .body, .list { margin-top: 16px; }
  .stage.step > .btn { margin-top: 20px; }
  .stage > .vis.narrow, .stage.step > .vis:not(.wide) { margin-top: 16px; min-height: 120px; }
  .stage > .cta-links { gap: 28px; padding-top: 32px; padding-bottom: 20px; }
}

/* ══ 배경 세로선에 붙어 있던 글자를 선에서 똑같이 띄운다 (2026-11-13 주인님) — 값은 사이트 공통 --lg(src/css/line_gap.css 와 같은 값) ══
   PC 는 main 이 zoom 으로 줄어 있어 화면 px 로 --lg 가 되게 z 로 나눈다 */
:root { --lg: 8px; }
@media (min-width: 1024px) {
  .stage.hero > .eyebrow, .stage.hero > h1, .stage.hero > .lead { translate: calc(var(--lg) / var(--z, 1)) calc((var(--sh) - 986px) / 2); } /* 버튼은 두 페이지 모두 오른쪽 끝(x1427~1681)이라 선에 붙지 않는다 */
  .index li { padding-left: calc(var(--lg) / var(--z, 1)); }
  .stage.cta .cta-links .btn { translate: calc(var(--lg) / var(--z, 1)) 0; }
}
@media (max-width: 1023px) {
  .stage.hero > .eyebrow, .stage.hero > h1, .stage.hero > .lead, .stage.step > .st, .stage.step > h2, .stage.step > .body, .list li, .list li.extra { padding-left: var(--lg); }
  .stage.hero > .btn, .stage.step > .btn { margin-left: var(--lg); }
  .index li { padding-left: var(--lg); }
  .stage.cta .cta-links .btn { translate: var(--lg) 0; } /* 태블릿 시안 폭(834)에서 둘째 버튼이 선에 걸린다 — PC 처럼 두 버튼을 같이 */
}

/* 2026-11-14 주인님: 태블릿에서 지도(화면 예시)가 작게 보였다 — 스냅 때 "한 화면에 들어오게" 남는 높이만큼 줄이던 규칙 때문.
   일반 스크롤이 되었으니 시안처럼(948:14773) 본문 폭 그대로·원래 비율로 보인다(휴대폰도 같다) */
@media (max-width: 1023px) {
  .stage > .vis.narrow, .stage.step > .vis:not(.wide) { flex: none; height: auto !important; min-height: 0; max-height: none; }
}

/* 2026-11-14 주인님: PC 첫 화면 소개글(lead) — 영어·독일어·핀란드어에서 줄 끝 한 단어만 다음 줄로 넘어가던 것 → 줄바꿈(<br>) 단위로 한 줄씩, 두 줄로.
   글 상자 폭(820)을 글 길이만큼 늘리되 오른쪽 버튼(x1427) 앞까지만 */
@media (min-width: 1024px) {
  :where(:not([lang="ko"])) .stage.hero > .lead:has(br) { width: max-content !important; max-width: 1150px; white-space: nowrap; } /* 줄바꿈이 있는 글만(독일어·핀란드어 마당은 한 문단이라 제외) */
}