/* thanksfor 사이트 — 5단계 조립 (2026-10-26). kit.css(@layer kit) 다음에 부른다.
   첫 화면 = 3단계 이긴 벌 C «먹판 벌»(_시안/first_C.html · first.css) + 시험자 조건 ⓐⓑⓒ.
   색 하나 #0F6B66 은 «같다» 표시(칩·제목 밑줄·주 버튼·«평소대로» 막대·머리줄 심볼)
   + 8단계 쌤 «중요한 포인트에 악센트»(10-26): 섹션마다 핵심 하나 — 약속 막대(.pin) · 행동(.go·«열기»·비용 버튼) · 수리 결과 숫자 · 주 연락(전화). 새 꼴 없이 위 표지만 다시 씀 */
:root {
  --c-one: #0F6B66; --c-on-one: #ffffff;
  --c-ink: #16191C; --c-mute: #4A5056; --c-line: #CDD3D7;
  --c-paper: #FFFFFF; --c-soft: #F2F5F6; --c-g4bar: #E8ECEE; --c-chrome: #EDF1F3;
  --c-bg: var(--c-paper);
  --f-head: 'Pretendard', sans-serif; /* 8단계 쌤(10-26) «필라테스와 색감 비슷» → 베이지·명조 버리고 흰·회청 바탕 + 고딕 굵은 제목 */
  --f-latin: 'Plus Jakarta Sans', 'Pretendard', sans-serif;
  --pad: 40px;
}
body { background: var(--c-bg); color: var(--c-ink); }
.fs-in { width: 1360px; max-width: calc(100% - 2 * var(--pad)); margin-inline: auto; }

/* ── 머리줄 ── */
.hd { min-height: 72px; padding-inline: var(--pad); border-bottom: 1px solid var(--c-line); background: var(--c-bg); }
.brand { gap: 10px; }
.brand svg { width: 20px; height: 20px; flex: none; }
.brand-name { font-family: var(--f-latin); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; }
.brand-sub { font-size: 13px; color: var(--c-mute); padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--c-line); line-height: 1; }
.hd-right { display: flex; align-items: center; gap: 32px; }
.gnb ul { gap: 28px; }
.gnb a { font-size: 16px; }
.ask { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 6px; background: var(--c-one); color: #fff; font-size: 15px; font-weight: 700; position: relative; } /* 견적 문의 = 칠한 버튼(필라테스 테 두른 전화 버튼과 갈림) */
.ask::after { content: ""; position: absolute; inset: -2px 0; min-height: 44px; } /* 누르는 자리 44 */

/* ── 공용 글 ── */
.h1 { font-family: var(--f-head); font-weight: 800; letter-spacing: -0.035em; color: var(--c-ink); word-break: keep-all; }
.cta { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 6px; background: var(--c-one); color: var(--c-on-one); font-weight: 700; font-size: 16px; white-space: nowrap; transition: transform .25s ease; }
.cta:hover { transform: translateY(-1px); }
.first { position: relative; padding-left: 16px; font-size: 17px; font-weight: 700; line-height: 1.45; }
.first::before, .pin::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px; background: #0F6B66; }
.pin { position: relative; padding-left: 20px; } /* 섹션의 약속 한 줄 — «평소대로» 막대와 같은 꼴 */

/* 이것도 합니다 — 항목은 줄바꿈 안 함. 가운뎃점은 항목 앞(gap 안)에 두고, 줄 머리 항목의 점은 칸 왼쪽 밖이라 잘린다
   → 줄이 «·» 로 끝나지도 시작하지도 않음(r1 P2-7 ③). 바닥글·사례 숫자 줄·비용 칸도 같은 수 */
.also-k { font-size: 13px; color: var(--c-mute); }
.also-list { margin-top: 4px; font-size: 15px; line-height: 26px; display: flex; flex-wrap: wrap; column-gap: 16px; overflow: hidden; }
.also-list span, .ft-info span { position: relative; white-space: nowrap; }
.also-list span::before, .ft-info span::before { content: "·"; position: absolute; left: -16px; width: 16px; text-align: center; color: var(--c-mute); }
.nw { white-space: nowrap; }
.also { padding-top: 16px; border-top: 1px solid var(--c-line); }

/* ── 손님 물건: 같은 주소, 같은 글 — 창 두 장(같은 주소창·같은 글)을 원근으로 기울여 겹친다 ──
   창 안 크기는 바탕 크기로 그리고 벌마다 zoom 으로 키운다 — 글자·여백·그림자가 한 비율로 */
.obj { position: relative; background: var(--c-bg); } /* gate #22: figure 에 바탕 명시 */
.stage { position: relative; perspective: 1600px; perspective-origin: 70% 40%; }
.stage::after { content: ""; position: absolute; left: 8%; right: 4%; bottom: -22px; height: 48px; z-index: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(30,34,38,.22), transparent 70%); pointer-events: none; }
.wins { position: relative; z-index: 1; display: grid; zoom: var(--z, 1); transform-style: preserve-3d;
  transform: rotateY(var(--ry, -8deg)) rotateX(var(--rx, 3deg)); transform-origin: 40% 50%; }
.win { grid-area: 1 / 1; display: flex; flex-direction: column; background: #fff; border-radius: 10px; overflow: hidden; min-width: 0; }
.w-old { width: var(--w-old, 60%); justify-self: start; align-self: start; border: 1px solid var(--c-line);
  box-shadow: 0 1px 2px rgba(30,34,38,.06), 0 10px 24px -10px rgba(30,34,38,.20); transform: translateZ(-30px); }
.w-new { width: var(--w-new, 72%); justify-self: end; align-self: start; margin-top: var(--stag, 140px); position: relative; z-index: 1;
  --sh-a: 0 1px 2px rgba(30,34,38,.10); --sh-b: 0 34px 60px -16px rgba(30,34,38,.38); --sh-b2: 0 44px 76px -16px rgba(30,34,38,.44);
  box-shadow: var(--sh-a), var(--sh-b); transform: translateZ(40px); transition: transform .4s ease, box-shadow .4s ease; }
.obj:hover .w-new { transform: translateZ(40px) translateY(-2px); box-shadow: var(--sh-a), var(--sh-b2); }
.win-tab { display: flex; align-items: center; gap: 14px; height: 32px; padding: 0 14px; background: var(--c-chrome); font-size: 12px; font-weight: 600; color: var(--c-ink); white-space: nowrap; }
.dots { display: flex; gap: 6px; flex: none; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: #C5CCD1; }
.win-addr { padding: 0 12px 8px; background: var(--c-chrome); border-bottom: 1px solid var(--c-line); }
.addr-path { display: block; height: 30px; line-height: 30px; padding: 0 12px; border-radius: 6px; background: #fff; overflow: hidden;
  font-family: var(--f-latin); font-weight: 500; font-size: 13px; color: var(--c-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.addr-path .short { display: none; }
.chip { display: inline-block; white-space: nowrap; background: var(--c-one); color: #fff; border-radius: 4px; padding: 0 6px; margin-left: 2px; line-height: 20px;
  font-family: var(--f-latin); font-weight: 600; font-variant-numeric: tabular-nums; }
.scr { display: flex; flex-direction: column; background: #fff; color: var(--c-ink); }
.u { text-decoration: underline 2px #0F6B66; text-underline-offset: 5px; text-decoration-skip-ink: none; }

/* 사이트 표지 — 두 겹 네모(그누보드4 기본 스킨 머리 꼴) */
.mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px;
  font-style: normal; font-size: 11px; font-weight: 700; line-height: 1; } /* 이름 첫 글자 표지 — 빈 네모는 자리표시로 읽힘(v3.2 2회차) */

/* 옛 화면 — 그누보드4 기본 꼴: 머리(표지·이름·메뉴 넷) · 표 칸 · 작은 글자, 글은 창 안에 다 들어간다(잘림·말줄임 없음) */
.old { font-size: 13px; }
.g4-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--c-line); }
.g4-head .mark { background: #6E747A; color: #fff; }
.g4-logo { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; margin-right: auto; white-space: nowrap; }
.g4-menu { display: flex; font-size: 12px; white-space: nowrap; }
.g4-menu span { padding: 0 7px; border-left: 1px solid var(--c-line); line-height: 12px; }
.g4-menu span:first-child { border-left: 0; }
.g4-in { padding: 10px 12px 12px; }
.g4-bar { background: var(--c-g4bar); border: 1px solid var(--c-line); padding: 3px 8px; font-size: 12px; font-weight: 600; }
.g4-tb { border: 1px solid var(--c-line); border-top: 0; }
.g4-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 8px; padding: 5px 8px; border-top: 1px solid var(--c-line); font-size: 12.5px; }
.g4-row:first-child { border-top: 0; }
.g4-title { font-weight: 600; font-size: 13px; padding-block: 7px; }
.g4-no { font-size: 12px; font-weight: 400; color: var(--c-mute); white-space: nowrap; }
.g4-no .chip, .g5-meta .chip { font-size: 12px; line-height: 18px; }
.g4-meta, .g4-file { color: var(--c-mute); font-size: 12px; }
.g4-body { padding: 8px 8px 6px; border-top: 1px solid var(--c-line); font-size: 12px; line-height: 1.6; }
.g4-cmt { font-size: 12px; }
.g4-btns { display: flex; gap: 4px; padding-top: 8px; }
.g4-btns span { border: 1px solid var(--c-line); padding: 1px 8px; font-size: 12px; background: #fff; }

/* 새 화면 — 그누보드5 지금 꼴: 먹 사이트 띠(흰 표지·이름·메뉴 셋) · 큰 제목 · 넓은 여백 */
.g5-site { display: flex; align-items: center; gap: 18px; height: 40px; padding: 0 22px; background: var(--c-ink); color: #fff; font-size: 12px; white-space: nowrap; }
.g5-site .mark { background: #fff; color: var(--c-ink); margin-right: -8px; }
.g5-name { margin-right: auto; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.g5-in { padding: 18px 26px 18px; }
.g5-board { font-size: 12px; color: var(--c-mute); letter-spacing: .02em; margin-bottom: 6px; }
.g5-title { font-size: 20px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.g5-meta { margin-top: 10px; font-size: 13px; color: var(--c-mute); }
.g5-body { margin-top: 14px; font-size: 14px; line-height: 1.8; }
.g5-file { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px 12px; border: 1px solid var(--c-line); border-radius: 6px; font-size: 13px; }
.clip { position: relative; width: 10px; height: 13px; border: 1.5px solid var(--c-mute); border-radius: 1px 4px 1px 1px; }
.g5-cmt { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--c-line); font-size: 13px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .w-new, .cta { transition: none; } .obj:hover .w-new { transform: translateZ(40px); box-shadow: var(--sh-a), var(--sh-b); } .cta:hover { transform: none; } }

.tag { display: flex; align-items: baseline; gap: 14px; margin-top: 30px; }
.tag-k { font-size: 16px; font-weight: 700; white-space: nowrap; }
.tag-s { font-size: 13px; color: var(--c-mute); }
.tag { flex-wrap: wrap; row-gap: 4px; }
/* 예시 표기 — 숫자·출처와 떨어진 그림 오른쪽 위 구석(v3.2 2회차 «고지가 숫자와 섞여 숫자도 지어낸 듯») */
.fig-x { position: absolute; top: 0; right: 0; z-index: 2; font-size: 12px; color: var(--c-mute); }
.w-old .g4-body { display: none; } /* 뒤 창 본문은 앞 창에 가려 «모두 고…» 로 잘림 — 숨김(v3.2 1회차 지적) */

/* ── 숫자 — 카드 아닌 괘선 칸, 40px + 단위 16px ── */
.nums li { display: flex; flex-direction: column; justify-content: center; }
.st-k { font-size: 13px; color: var(--c-mute); white-space: nowrap; }
.st-v { margin-top: 2px; white-space: nowrap; }
.st-v b { font-family: var(--f-latin); font-weight: 700; font-size: 40px; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.st-v small { font-size: 16px; color: var(--c-mute); margin-left: 4px; }
.strip { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.strip .nums { display: contents; }
.strip-first { display: flex; align-items: center; padding-right: 24px; }
.strip li { padding: 16px 24px; border-left: 1px solid var(--c-line); min-height: 104px; }
.src { font-size: 13px; color: var(--c-mute); margin-top: 8px; }

/* ── 폰 공통 ── */
@media (max-width: 767px) {
  :root { --pad: 16px; }
  .hd { min-height: 56px; }
  .hd-right { margin-left: auto; margin-right: 4px; } /* 글 양 리뷰 P1-2: 폰에도 «견적 문의» — 메뉴(.gnb)는 kit.css 가 숨김 */
  .ask { min-height: 36px; padding: 0 12px; font-size: 14px; }
  .ask::after { inset: -4px 0; }
  .brand-name { font-size: 18px; }
  .brand-sub { display: none; }
  .fs-in { max-width: none; width: auto; margin-inline: var(--pad); }
  .wins { --z: .74; --w-old: 80%; --w-new: 94%; --stag: 197px; --ry: -5deg; --rx: 2deg; }
  .w-old { transform: translateZ(-16px); } .w-new { transform: translateZ(20px); }
  .w-old .addr-path .long { display: none; } .w-old .addr-path .short { display: inline; } /* 뒤 창은 좁아 칩이 잘리지 않게 짧은 꼴 */
  .w-old .g4-meta, .w-old .g4-file, .w-old .g4-cmt, .w-old .g4-btns { display: none; } /* 앞 창 왼쪽 옆으로 표 칸 부스러기가 비치지 않게 — 제목 줄까지만 */
  .obj:hover .w-new { transform: translateZ(20px) translateY(-2px); }
  .stage { perspective: 1200px; }
  .win { border-radius: 8px; }
  .tag { flex-direction: column; gap: 2px; margin-top: 18px; }
  .tag-k { font-size: 14px; line-height: 20px; }
  .tag-s { display: none; } /* 글 양 리뷰 P1-1: h1 과 같은 말 — 폰에선 «글 번호 그대로» 만 */
  .fig-x { position: static; display: block; order: 3; margin-top: 4px; font-size: 11px; line-height: 15px; }
  .cta { width: 100%; min-height: 48px; }
  .also-list { font-size: 14px; line-height: 24px; }
  .first { font-size: 15px; }
  .st-v b { font-size: 26px; }
  .st-v small { font-size: 13px; margin-left: 2px; }
  .st-k { font-size: 12px; }
  .strip { grid-template-columns: repeat(3, 1fr); }
  .strip-first { grid-column: 1 / -1; padding: 12px 0; border-bottom: 1px solid var(--c-line); }
  .strip li { padding: 12px 10px; min-height: 76px; }
  .strip li:first-of-type { border-left: 0; padding-left: 0; }
  .g4-menu span:nth-child(n+3), .g5-site span:nth-of-type(n+3) { display: none; }
}
@media (max-width: 374px) {
  .addr-path .long { display: none; }
  .addr-path .short { display: inline; }
  .st-v b { font-size: 22px; }
}

/* ══ 첫 화면 — 주인공 C «먹판 벌» + 3단계 시험자 조건 ⓐⓑⓒ(5단계) ══════════════════
   ⓑ 왼쪽 기둥 덜기: 숫자 셋은 판 아래 전폭 괘선 띠로(첫 칸 «평소대로»), 왼쪽 칸 = 한 줄 설명 · 버튼 · «이런 일도» 만, 앞 창 본문 보임
   ⓒ 띠 아래 출처 줄 + «이 사이트를 옮긴 기록 보기» → #cases · «60만 건+» → «60만 건 넘게»
   1440×900 예산: 72 + 28 + h1 116 + 28 + 판 456 + 20 + 띠 92 + 출처 32 = 844 */
.fs { padding-top: 20px; overflow-x: clip; } /* 28 → 20, .fs-row 28 → 24: 위 공고 상자 높이를 되찾음 */
.fs-row { margin-bottom: 24px; }
/* 8단계 쌤(10-26) PHP 보안 공고 — /photo/ 안내 상자(.tp-notice) 꼴에 막대만 청록. 맨 위 한 상자 */
.alert { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-bottom: 18px; padding: 7px 24px 7px 20px; background: #fff; border: 1px solid var(--c-line); border-left: 3px solid #0F6B66; border-radius: 6px; font-size: 15px; line-height: 1.55; word-break: keep-all; }
.alert-h { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; }
.alert-h b { font-weight: 700; color: var(--c-one); }
.alert-h span { font-size: 13px; color: var(--c-mute); }
.alert-m { display: none; }
.alert a { flex: none; font-weight: 600; color: var(--c-one); text-decoration: underline 1px; text-underline-offset: 4px; display: inline-flex; align-items: center; min-height: 44px; }
.fs .h1 { font-size: 46px; line-height: 58px; white-space: nowrap; }
.fs-body { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 80px; align-items: stretch; }
.side { display: flex; flex-direction: column; padding-top: 4px; }
.side .lede { font-size: 17px; line-height: 1.7; margin-bottom: 28px; }
.side .cta { align-self: flex-start; }
.side .also { margin-top: auto; }
.obj { --mr: min(-40px, calc((1360px - 100vw) / 2)); margin-right: var(--mr); height: 444px; overflow: hidden; /* r1 P2-1 ①: 456 은 본문 둘째 줄 글자 가운데를 잘랐다 → 첫 줄 아래 틈에서 */
  background: #1E2226; border-radius: 14px 0 0 14px; padding: 36px 0 0 48px; color: #F4F2EE; }
.stage { height: 100%; }
.stage::after { display: none; }
.wins { --z: 1.16; --w-old: 64%; --w-new: 68%; --stag: 92px; --ry: -6deg; --rx: 0deg; width: 640px; transform-origin: 30% 30%; }
.w-new .g5-file, .w-new .g5-cmt { display: none; } /* 앞 창은 본문 두 줄까지 — 뒤 창 표와 전후 대칭(시험자 ⓑ), 판 아랫변 잘림 0 */
.win { --sh-a: 0 1px 2px rgba(0,0,0,.3); }
.w-new { --sh-b: 0 30px 60px -12px rgba(0,0,0,.65); --sh-b2: 0 40px 76px -12px rgba(0,0,0,.72); }
.w-old { border-color: #2C3136; }
.w-old .g4-file, .w-old .g4-body, .w-old .g4-cmt, .w-old .g4-btns { display: none; }
.w-old .g4-menu { display: none; } /* r1 P2-1 ②: 새 창 위로 반쯤 나와 읽히지 않는 글자 줄 — 사이트 이름만 남김 */
.obj .tag { position: absolute; left: 48px; bottom: 30px; margin: 0; width: 230px; flex-direction: column; gap: 6px; z-index: 2; }
.obj .tag-k { color: #fff; }
.obj .tag-s { color: #A9AEB3; line-height: 1.55; }
.obj .fig-x { color: #8A8F94; top: 14px; right: 88px; }
.fs .strip { margin-top: 20px; }
.fs .strip li { min-height: 92px; padding: 14px 24px; }
.fs .strip-first { padding-left: 16px; font-family: var(--f-head); font-weight: 800; font-size: 21px; line-height: 1.4; letter-spacing: -0.015em; } /* r1 P2-8: 흐림에서 숫자보다 먼저 사라졌다 */
.fs-src { margin-top: 10px; font-size: 13px; color: var(--c-mute); }
.fs-src a { color: var(--c-ink); font-weight: 600; text-decoration: underline 1px; text-underline-offset: 4px; white-space: nowrap; display: inline-flex; align-items: center; min-height: 28px; }
/* r1 P2-8: 낮은 화면(1366×768 · 1280×720)에서도 «평소대로» 띠가 첫 화면 안에 — 판은 글 번호 줄 아래에서 자름 */
@media (min-width: 1180px) and (max-height: 820px) {
  .fs { padding-top: 12px; }
  .alert { margin-bottom: 14px; padding-block: 5px; font-size: 14px; }
  .fs-row { margin-bottom: 20px; }
  .fs .h1 { font-size: 42px; line-height: 52px; }
  .obj { height: 410px; }
  .fs .strip { margin-top: 16px; }
  .fs .strip li { min-height: 84px; padding-block: 10px; }
}
@media (max-width: 1179px) {
  .fs .h1 { white-space: normal; font-size: 40px; line-height: 50px; }
  .fs-body { grid-template-columns: 300px minmax(0, 1fr); gap: 40px; }
  .wins { --z: 1; }
  .obj .tag { width: 200px; }
}
/* ⓐ 폰: 제목 → 판 → 버튼(겨눔표 «판 → h1 → 버튼» 을 시험자 근거로 바꿈 — 2·3회차 «판이 먼저라 앱 캡처 같음») */
@media (max-width: 767px) {
  .fs { padding-top: 16px; }
  .fs-in { display: flex; flex-direction: column; margin-inline: 0; }
  .fs-body { display: contents; }
  .fs-row { order: 1; margin: 0 16px 16px; }
  /* 폰: 제목 | 버튼 한 줄 + 본문 두 줄 — 주인공 판이 첫 화면에 남게(gate #15). 날짜 줄·첫 문장은 PC 에만 */
  /* 글 양 리뷰 P1-1(10-26): 폰은 제목 + 짧은 한 줄 | «내 사이트 확인» — 긴 문장은 PC 에만 */
  .alert { order: 0; gap: 12px; margin: 0 16px 12px; padding: 6px 12px; font-size: 15px; line-height: 1.45; }
  .alert-h { display: block; }
  .alert-h span, .alert > div > p:last-child, .alert-pc { display: none; }
  .alert-h b { display: block; }
  .alert-h .alert-m { display: block; font-size: 14px; color: var(--c-ink); }
  .alert a .alert-m { display: inline; }
  .alert a { font-size: 15px; }
  .fs .h1 { font-size: 26px; line-height: 32px; white-space: normal; }
  .pc-br { display: none; }
  .obj { order: 2; margin: 0 12px; height: auto; border-radius: 10px; padding: 14px 0 0 12px; display: flex; flex-direction: column; }
  .stage { height: auto; padding-bottom: 12px; }
  .w-old .g4-in { display: none; }
  .w-old .g4-menu { display: flex; }
  .w-new .g5-body { display: none; }
  .wins { --z: .8; --w-old: 78%; --w-new: 92%; --stag: 112px; --ry: -3deg; --rx: 0deg; width: auto; margin-right: 12px; }
  .obj .tag { position: static; width: auto; padding: 10px 12px 10px 0; gap: 2px; border-top: 1px solid rgba(255,255,255,.18); }
  .obj .fig-x { margin: -6px 0 10px; }
  .side { order: 3; margin: 14px 16px 0; padding-top: 0; }
  .side .lede { font-size: 15px; margin-bottom: 12px; }
  .side .lede .nw { display: none; } /* 글 양 리뷰 P1-1: 폰 버튼을 첫 화면 안으로 — «무엇까지 그대로» 는 이전 섹션 첫 줄이 맡음 */
  .side .cta { align-self: stretch; }
  .side .also { margin-top: 24px; }
  .fs .strip { order: 4; margin: 28px 16px 0; }
  .fs .strip li { min-height: 76px; padding: 12px 10px; }
  .fs .strip-first { padding-left: 16px; font-size: 17px; }
  .fs-src { order: 5; margin: 10px 16px 0; }
}

/* ══ 아래 섹션 공용 ═══════════════════════════════════════════════════
   섹션마다 역할 하나 · 장식 하나 · 이웃과 다른 틀. 색 하나(청록)는 여기서도 주 버튼에만 */
.sec { padding-block: 104px; }
.sec.alt { background: var(--c-soft); } /* 섹션 가름 = 바탕 번갈아(괘선 대신) — 정보 덩어리가 한눈에 갈리게 */
.wrap { width: 1360px; max-width: calc(100% - 2 * var(--pad)); margin-inline: auto; }
.wrap.narrow { width: 880px; }
.h2 { font-family: var(--f-head); font-weight: 800; font-size: 36px; line-height: 48px; letter-spacing: -0.035em; word-break: keep-all; }
.h3 { font-size: 19px; font-weight: 700; line-height: 1.45; letter-spacing: -0.01em; }
.sub { margin-top: 14px; font-size: 18px; line-height: 1.65; color: var(--c-mute); max-width: 40em; }
.note { font-size: 14px; color: var(--c-mute); line-height: 1.65; }
.go { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--c-one); text-decoration: underline 1px; text-underline-offset: 5px; }
.btn-line { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 1px solid var(--c-ink); border-radius: 6px; font-weight: 600; font-size: 15px; }
.lat { font-family: var(--f-latin); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.sec-head { margin-bottom: 48px; }

/* ② 무료 진단 — 틀: 두 칸(설명 | 창) · 장식: 브라우저 창 틀(입력칸이 곧 주소창) */
.ck { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 80px; align-items: start; }
.ck-win { background: #fff; border: 1px solid var(--c-line); border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(30,34,38,.06), 0 24px 48px -24px rgba(30,34,38,.30); }
.ck-form { display: flex; gap: 8px; padding: 0 12px 12px; background: var(--c-chrome); border-bottom: 1px solid var(--c-line); }
.ck-form label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ck-form input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 1px solid var(--c-line); border-radius: 6px; background: #fff;
  font-family: var(--f-latin); font-weight: 500; font-size: 16px; }
.ck-form input:focus-visible { outline-offset: 0; }
.ck-form .cta { min-height: 48px; padding: 0 22px; }
.ck-form .cta[disabled] { opacity: .7; cursor: wait; }
.ck-out { padding: 26px 28px 30px; min-height: 260px; }
.ck-out:has(> .ck-msg:only-child) { min-height: 0; } /* r1 P3-5: 안내 한 줄일 때 빈 칸을 남기지 않음 */
.ck-rows > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid #E1E6E9; font-size: 15px; }
.ck-rows > div:first-child { border-top: 1px solid #E1E6E9; }
.ck-rows span:first-child { color: var(--c-mute); font-size: 14px; }
.ck-rows .warn { font-weight: 700; }
.ck-wait { color: var(--c-mute); }
.ck-v { margin-bottom: 18px; }
.ck-v b { display: block; font-family: var(--f-head); font-weight: 800; font-size: 22px; line-height: 1.4; }
.ck-v p { margin-top: 6px; line-height: 1.7; }
.ck-v a, .ck-msg a { font-weight: 600; text-decoration: underline 1px; text-underline-offset: 4px; }
.ck-ev { margin-top: 12px; font-size: 13px; color: var(--c-mute); }
.ck-next { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }

/* ③ 이전 길 — 틀: 괘선 표(넷 줄) · 장식: 머리 2px 먹선 */
.mv { border-top: 2px solid var(--c-ink); }
.mv-row { display: grid; grid-template-columns: 300px minmax(0, 1fr) 280px; gap: 40px; padding: 28px 0; border-bottom: 1px solid var(--c-line); align-items: baseline; }
.mv-row .h3 { font-size: 22px; }
.mv-row p { font-size: 17px; line-height: 1.65; }
.mv-rec .go { display: flex; min-height: 36px; font-size: 15px; } /* 글 양 리뷰 P2-2: 꼬리말 글은 빼고 링크만 */
.mv-row.is-main .h3 { position: relative; padding-left: 20px; }
.mv-row.is-main .h3::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; background: #0F6B66; } /* 실측 기록이 있는 길 */
/* ④ 사례 — 틀: 먹판 띠(전폭, 둥글지 않음) 두 칸 · 장식: 먹판(첫 화면 판에서 온 표지) */
.cases { background: #1E2226; color: #F4F2EE; border-top: 0 !important; }
.cases + .sec { border-top: 0; }
.cases .sub, .cases .note { color: #A9AEB3; }
.cs { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 80px; }
.cs-facts li { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 24px; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.cs-facts li:first-child { border-top: 1px solid rgba(255,255,255,.18); }
.cs-facts .k { font-size: 14px; color: #A9AEB3; padding-top: 3px; }
.cs-facts b { display: block; font-size: 20px; font-weight: 700; line-height: 1.5; }
/* r1 P2-3: 숫자 셋은 히어로 띠가 맡고 여기는 한 줄 — 이 섹션만의 사실 «옮긴 다음 날» 을 큰 글자로 */
.cs-sum { margin-top: 20px; display: flex; flex-wrap: wrap; column-gap: 16px; overflow: hidden; font-size: 15px; color: #C9CDD1; }
.cs-sum span { position: relative; white-space: nowrap; }
.cs-sum span::before { content: "·"; position: absolute; left: -16px; width: 16px; text-align: center; color: #8A8F94; }
.cs-day { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.18); }
.cs-day .k { font-size: 14px; color: #A9AEB3; }
.cs-day b { display: block; margin-top: 8px; font-family: var(--f-head); font-weight: 800; font-size: 26px; line-height: 1.45; letter-spacing: -0.015em; word-break: keep-all; }
.cs-day p { margin-top: 12px; color: #C9CDD1; line-height: 1.75; }
.cs-day .cs-end { margin-top: 20px; color: #fff; font-size: 17px; font-weight: 600; }
.cs-day .go { margin-top: 8px; color: #F4F2EE; } /* 글 양 리뷰 P1-2: 사례 끝 문의 길 — 먹판 위라 흰 글 */

/* ⑥ 순서와 비용 — 틀: 왼쪽 다섯 줄 | 오른쪽 약속 · 장식: 단 번호(라틴 숫자) · 큰 약속 한 문장. 글 양 리뷰 P2-6: 줄마다 «이름 — 하실 일» 하나, 괘선 대신 여백 */
.sc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: start; }
.steps li { display: grid; grid-template-columns: 52px 150px minmax(0, 1fr); align-items: baseline; padding: 11px 0; font-size: 17px; line-height: 1.55; }
.steps .n { font-family: var(--f-latin); font-weight: 700; font-size: 20px; color: var(--c-one); }
.steps b { font-weight: 700; }
.cost-promise { font-family: var(--f-head); font-weight: 800; font-size: 28px; line-height: 1.5; letter-spacing: -0.02em; word-break: keep-all; }
.cost-by { margin-top: 24px; font-size: 17px; line-height: 1.7; }
.cost-after { margin-top: 8px; font-size: 17px; line-height: 1.7; }
.cost .cta { margin-top: 28px; }

/* ⑤ 수리 — 틀: 결과 셋 세로 괘선 칸(숫자 하나 + 근거 한 줄, 코퍼스 106 outcome_cards 골격) · 장식: 전 → 후 숫자 */
.fx-head { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 80px; align-items: end; margin-bottom: 48px; }
.fx-case { font-size: 14px; color: var(--c-mute); line-height: 1.65; }
.fx-case b { display: block; color: var(--c-ink); font-size: 15px; }
.fx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.fx li { padding: 28px 28px 30px; border-left: 1px solid var(--c-line); }
.fx li:first-child { border-left: 0; padding-left: 0; }
.fx .k { font-size: 14px; color: var(--c-mute); }
.fx .v { margin-top: 6px; font-family: var(--f-latin); font-weight: 700; font-size: 36px; line-height: 1.2; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx .v small { font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--c-mute); margin-left: 2px; }
.fx .v i { font-style: normal; color: var(--c-mute); font-weight: 500; margin: 0 6px; }
.fx .v em { font-style: normal; color: var(--c-one); } /* 고친 뒤 값 */
.fx p { margin-top: 12px; font-size: 15px; line-height: 1.7; }
.fx-promise { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; margin-top: 36px; }
.fx-promise b { display: block; font-size: 19px; font-weight: 700; margin-bottom: 4px; }
.fx-promise p { line-height: 1.7; }
.fx-cta { margin-top: 36px; } /* 글 양 리뷰 P1-2: 수리 광고 착지(#fix)에서 바로 문의 */

/* 무료 도구 목록 — photo/ 쪽이 씀 */
.tl-list { border-top: 1px solid var(--c-ink); }
.tl-list a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--c-line); }
.tl-list .n { font-family: var(--f-latin); font-weight: 600; font-size: 15px; color: var(--c-mute); }
.tl-list b { font-size: 18px; font-weight: 700; }
.tl-list span.d { display: block; font-size: 14px; color: var(--c-mute); margin-top: 2px; }
.tl-list .arr { font-size: 14px; font-weight: 600; color: var(--c-one); white-space: nowrap; }
.tl-list a:hover b { text-decoration: underline 1px; text-underline-offset: 5px; }
.tl-facts { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; color: var(--c-mute); }
/* 무료 도구 한 줄(글 양 리뷰 P2-5) — 견적 아래, 바닥글 위 */
.tl-line { border-top: 1px solid var(--c-line); }
.tl-line a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 22px 0; font-size: 15px; }
.tl-line b { font-weight: 700; }
.tl-names { color: var(--c-mute); }
.tl-line .arr { font-weight: 600; color: var(--c-one); text-decoration: underline 1px; text-underline-offset: 4px; }

/* ⑦ 자주 묻는 것 — 틀: 접는 목록 한 단 · 장식: 없음(글만) */
.faq details { border-bottom: 1px solid var(--c-line); }
.faq details:first-of-type { border-top: 1px solid var(--c-line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 64px; padding: 14px 0; cursor: pointer; list-style: none; font-size: 18px; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "열기"; flex: none; font-size: 13px; font-weight: 500; color: var(--c-mute); }
.faq details[open] summary::after { content: "닫기"; }
.faq details p { padding: 0 0 22px; line-height: 1.8; max-width: 44em; }

/* ⑧ 견적 문의 — 틀: 왼쪽 제목 | 오른쪽 양식 · 장식: 맡기실 일 칩(고르면 청록으로 칠함) */
.ct { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 80px; }
.qt { background: #fff; border: 1px solid var(--c-line); border-radius: 10px; padding: 32px; }
.qt-work { border: 0; padding: 0; margin: 0; }
.qt legend, .qt-grid label > span { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 700; }
.qt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.qt-chips label { position: relative; }
.qt-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qt-chips span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--c-line); border-radius: 6px; font-size: 15px; font-weight: 600; cursor: pointer; }
.qt-chips input:checked + span { background: var(--c-one); border-color: var(--c-one); color: #fff; }
.qt-chips input:focus-visible + span { outline: 2px solid var(--c-one); outline-offset: 2px; }
.qt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 26px; }
.qt-grid .wide { grid-column: 1 / -1; }
.qt-grid input, .qt-grid textarea { display: block; width: 100%; padding: 0 14px; border: 1px solid var(--c-line); border-radius: 6px; background: #fff; font-size: 16px; }
.qt-grid input { height: 48px; }
.qt-grid textarea { padding-block: 12px; line-height: 1.6; resize: vertical; }
.qt-grid small { display: block; margin-top: 6px; font-size: 13px; color: var(--c-mute); }
.qt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* 동의 — 진짜 칸을 줄 전체에 투명하게 덮어 누르는 자리를 줄 크기로(gate ⑳ 44px), 보이는 칸은 span 앞 네모 */
.qt-agree { position: relative; display: block; min-height: 44px; margin-top: 22px; padding: 10px 0 10px 34px; font-size: 15px; font-weight: 600; cursor: pointer; }
.qt-agree input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.qt-agree span::before { content: ""; position: absolute; left: 0; top: 11px; width: 22px; height: 22px; border: 1.5px solid var(--c-mute); border-radius: 4px; background: #fff; }
.qt-agree input:checked + span::before { content: "✓"; display: grid; place-items: center; background: var(--c-one); border-color: var(--c-one); color: #fff; font-size: 15px; font-weight: 700; line-height: 1; }
.qt-agree input:focus-visible + span::before { outline: 2px solid var(--c-one); outline-offset: 2px; }
.qt-agree small { font-weight: 400; color: var(--c-mute); }
.qt-send { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 24px; }
.qt-send .cta[disabled] { opacity: .7; cursor: wait; }
.qt-out { font-weight: 600; }
.qt-out.err { color: #B3261E; }
.qt-done { padding: 8px 0; }
.qt-done b { display: block; font-family: var(--f-head); font-weight: 800; font-size: 24px; line-height: 1.4; }
.qt-done p { margin-top: 8px; color: var(--c-mute); }

/* 바닥 — 상상인 사업자 정보 */
.ft { background: var(--c-chrome); border-top: 1px solid var(--c-line); padding: 40px 0 48px; font-size: 13px; color: var(--c-mute); line-height: 1.8; }
.ft b { color: var(--c-ink); }
.ft-info { display: flex; flex-wrap: wrap; column-gap: 16px; overflow: hidden; }
.ft small { display: block; margin-top: 8px; font-size: 12px; }

/* r2 P3-1: 앞 창이 화면 오른쪽 끝을 지나는 너비(1280·1024 실측)에서 메뉴가 글자 가운데서 잘린다.
   메뉴 묶음은 창 오른쪽 끝에 붙어 있어 줄여도 남은 것이 다시 잘림 → 옛 창(r1 P2-1 ②)처럼 사이트 이름만. 폰은 아래 둘 */
@media (min-width: 768px) and (max-width: 1365px) {
  .g5-site span { display: none; }
}
@media (max-width: 1179px) {
  .ck, .cs, .ct, .sc { gap: 48px; }
  .cs, .ct { grid-template-columns: 300px minmax(0, 1fr); }
  .mv-row { grid-template-columns: 240px minmax(0, 1fr) 220px; gap: 28px; }
  .sc { grid-template-columns: 1fr; }
  .fx-head { grid-template-columns: 1fr; gap: 20px; }
  .fx .v { font-size: 30px; }
}
@media (max-width: 767px) {
  .sec { padding-block: 72px; }
  .h2 { font-size: 26px; line-height: 34px; }
  .sub { font-size: 15px; }
  .sec-head { margin-bottom: 32px; }
  .ck, .cs, .ct, .sc, .fx-promise { grid-template-columns: 1fr; gap: 32px; }
  .ck-form { flex-direction: column; }
  .ck-form input { flex: none; }
  .ck-out { padding: 20px 16px 24px; }
  .ck-rows > div { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
  .mv-row { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  .mv-row .h3 { font-size: 19px; }
  .cs-facts li { grid-template-columns: 1fr; gap: 4px; }
  .steps li { grid-template-columns: 40px minmax(0, 1fr); padding: 9px 0; font-size: 16px; }
  .steps li > span:last-child { grid-column: 2; color: var(--c-mute); font-size: 15px; }
  .cost-promise { font-size: 23px; }
  .cost-by, .cost-after { font-size: 16px; }
  .fx { grid-template-columns: 1fr; }
  .fx li, .fx li:first-child { border-left: 0; padding: 22px 0; }
  .fx li + li { border-top: 1px solid var(--c-line); }
  .fx .v { font-size: 30px; }
  .tl-list a { grid-template-columns: 32px minmax(0, 1fr); }
  .tl-list .arr { display: none; }
  .tl-names { font-size: 14px; }
  .faq summary { font-size: 16px; }
  .qt { padding: 22px 16px; }
  .qt-grid { grid-template-columns: 1fr; }
  .qt-send .cta { width: 100%; }
}