/* ============================================================
   컴포넌트 + 메인페이지 섹션 스타일 (Premium Visual Production)
   ============================================================ */

/* ── 플레이스홀더 (실사진 확보 전, 구도·비율 표기) ── */
.ph { position: relative; background: #E6ECF3; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.ph--dark { background: #1D2939; }
.ph span { position: relative; z-index: 1; font-size: 12px; letter-spacing: .03em; color: #667085; padding: 10px 14px; border: 1px dashed #B6C2D2; max-width: 82%; line-height: 1.55; }
.ph--dark span { color: #98A2B3; border-color: #344054; }
.ph::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(0,0,0,.015) 0 16px, transparent 16px 32px); }
/* 실사진이 들어간 슬롯. 바깥 박스(.ph)의 크기 규칙은 그대로 두고 안쪽만 사진으로 채운다.
   .ph 가 position:relative(또는 absolute)라 img 의 inset:0 이 슬롯 전체를 덮는다. */
.ph--img::after { content: none; }   /* 사진 위에는 플레이스홀더 빗금을 깔지 않는다 */
.ph__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* 높이를 래퍼가 들고 있는 슬롯은 안쪽 .ph 가 래퍼를 꽉 채워야 한다.
   .subhero__media·.work__feature·.why__wide·.effect__img 는 자기 height 를 갖지만 .ph 는 안 갖는다.
   플레이스홀더 시절에는 캡션 글상자 높이(≈60px)로 버텼는데, 사진은 absolute 라 .ph 가 0 이 된다.
   (2026-09-07 실측: case-feature·ops-nationwide·서브페이지 Hero 8장이 전부 높이 0 이었다) */
.subhero__media > .ph,
.work__feature > .ph,
.why__wide > .ph,
.effect__img > .ph { height: 100%; }

/* ── 버튼 ── */
.btn { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 32px; font-size: 15px; font-weight: var(--fw-med); letter-spacing: .01em; border: 1px solid var(--graphite); color: var(--graphite); background: transparent; transition: var(--t); }
.btn:hover { background: var(--graphite); color: var(--ivory); }
.btn .ar { font-family: var(--serif); }
/* [V36G.1 R2 §10] 1차 CTA 는 **스카이블루**다. 사장님 지시: "sky blue 는 CTA / link / icon /
   아주 연한 section tint" 에 쓴다. 지금까지는 채움색이 graphite 라 브랜드색이 hover 에만
   잠깐 보였다 — 그러면 테마를 바꾼 티가 나지 않는다.
   ⚠️ 남발하지 않는다(§10). 파랑을 얻는 것은 **`--solid` 1차 CTA 하나**이고,
      기본 `.btn`(외곽선)·다크 밴드·푸터는 그대로 무채색이다.
   ⚠️ 흰 글자 대비 4.92:1 — AA 통과. hover 는 한 단계 더 진하게. */
.btn--solid { background: var(--bronze); border-color: var(--bronze); color: #fff; }
.btn--solid:hover { background: var(--bronze-text); border-color: var(--bronze-text); color: #fff; }
.btn--light { border-color: rgba(234,240,247,.5); color: var(--ivory); }
.btn--light:hover { background: var(--bronze); border-color: var(--bronze); color: #fff; }

/* ── 헤더 (히어로와 한 장면) ── */
.hdr { position: absolute; top: 0; left: 0; right: 0; z-index: 20; }
.hdr__in { display: flex; align-items: center; gap: 36px; padding: 24px var(--pad-x); }
.logo { font-family: var(--serif); font-weight: var(--fw-reg); font-size: 22px; letter-spacing: .02em; }
.logo b { font-weight: var(--fw-med); }
.gnb { display: flex; gap: 30px; font-size: 14px; }
.gnb a { opacity: .72; transition: opacity var(--t); }
.gnb a:hover { opacity: 1; }
.gnb a.active { opacity: 1; border-bottom: 1px solid var(--bronze); padding-bottom: 2px; }
.hdr__cta { margin-left: auto; display: flex; gap: 22px; align-items: center; font-size: 13px; letter-spacing: .02em; }
.hdr__cta a { opacity: .72; transition: opacity var(--t); }
.hdr__cta a:hover { opacity: 1; }
.hdr__cta a.accent { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; background: var(--bronze); color: #fff; opacity: 1; font-weight: var(--fw-med); transition: background var(--t); }
.hdr__cta a.accent:hover { background: var(--bronze-text); }
.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--graphite); }
.nav-toggle svg { width: 26px; height: 26px; }

/* ── 모바일 메뉴 ── */
.mobile-menu { position: fixed; inset: 0; z-index: 200; display: none; }
.mobile-menu.open { display: block; }
.mobile-menu__overlay { position: absolute; inset: 0; background: rgba(11,18,32,.5); }
.mobile-menu__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(86vw, 340px); background: var(--ivory); padding: 22px; overflow-y: auto; transform: translateX(100%); transition: transform .25s ease; }
.mobile-menu.open .mobile-menu__panel { transform: translateX(0); }
body.menu-open { overflow: hidden; }
.mobile-menu__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mobile-menu__close { width: 44px; height: 44px; font-size: 24px; }
.mobile-menu__list a { display: block; padding: 15px 6px; font-size: 18px; border-bottom: 1px solid var(--hair); }
.mobile-menu__list a.active { color: var(--bronze); }
.mobile-menu__cta { margin-top: 20px; display: grid; gap: 12px; }

/* ── 서비스 드롭다운 ── */
.gnb-drop { position: relative; display: flex; align-items: center; }
.gnb-drop__btn { font-size: 14px; opacity: .72; display: inline-flex; align-items: center; gap: 6px; color: var(--graphite); transition: opacity var(--t); }
.gnb-drop__btn:hover, .gnb-drop__btn.active { opacity: 1; }
.gnb-drop__btn .caret { font-size: 10px; transition: transform var(--t); }
.gnb-drop__btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.gnb-drop__panel { position: absolute; top: calc(100% + 16px); left: -14px; min-width: 340px; background: var(--surface); border: 1px solid var(--hair); box-shadow: 0 16px 44px rgba(16,24,40,.14); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--t), transform var(--t), visibility var(--t); z-index: 60; }
.gnb-drop:hover .gnb-drop__panel, .gnb-drop__panel.open { opacity: 1; visibility: visible; transform: none; }
.gnb-drop__panel a { display: block; padding: 12px 14px; }
.gnb-drop__panel a:hover { background: var(--ivory); }
.gnb-drop__panel .d-title { display: block; font-weight: var(--fw-med); color: var(--graphite); }
.gnb-drop__panel .d-lead { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.gnb-drop__panel a.active .d-title { color: var(--bronze-text); }
.gnb-drop__sep { padding: 12px 14px 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--hair); margin-top: 6px; }

/* 모바일 메뉴 섹션 라벨 */
.mm-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 18px 6px 6px; }

/* ── 플로팅 상담(PC) ── */
.consult { position: fixed; right: 24px; bottom: 24px; z-index: 70; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.consult__fab { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px; background: var(--graphite); color: var(--ivory); font-weight: var(--fw-med); font-size: 15px; box-shadow: 0 10px 30px rgba(16,24,40,.22); transition: background var(--t); }
.consult__fab:hover { background: var(--bronze); }
.consult__fab .ar { font-family: var(--serif); }
.consult__panel { width: 300px; background: var(--surface); border: 1px solid var(--hair); box-shadow: 0 16px 40px rgba(16,24,40,.18); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--t), transform var(--t), visibility var(--t); }
.consult.open .consult__panel { opacity: 1; visibility: visible; transform: none; }
.consult__head { padding: 12px 14px 8px; font-weight: var(--fw-heading); font-size: 15px; }
.consult__item { display: block; padding: 12px 14px; }
.consult__item:hover { background: var(--white); }
.consult__item b { display: block; font-weight: var(--fw-med); }
.consult__item span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
@media (max-width: 860px) { .consult { display: none; } }

/* 모바일 하단바 3분할 */
.mobile-bar__in--3 { grid-template-columns: 1fr 1fr 1fr; }

/* ── 히어로 (비대칭 분할) ── */
.hero { position: relative; min-height: 100vh; display: grid; grid-template-columns: 43fr 57fr; background: var(--ivory); }
.hero__l { display: flex; flex-direction: column; justify-content: center; padding: var(--header-h) clamp(28px, 3.5vw, 64px) 60px var(--pad-x); position: relative; z-index: 3; }
.hero__kick { margin-bottom: 30px; }
.hero h1 { font-weight: var(--fw-display); font-size: clamp(38px, 5.6vw, 84px); line-height: 1.1; letter-spacing: -.025em; margin-left: clamp(-4px, -1.4vw, -26px); }
.hero h1 em { font-style: normal; font-family: var(--serif); font-weight: var(--fw-display); }
.hero__sub { margin-top: 30px; max-width: 400px; color: var(--ink-soft); font-size: 16px; line-height: 1.85; }
.hero__act { margin-top: 44px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hero__more { font-size: 15px; font-weight: var(--fw-med); color: var(--graphite); border-bottom: 1px solid var(--graphite); padding-bottom: 2px; }
.hero__more:hover { color: var(--bronze-text); border-color: var(--bronze-text); }
.hero__r { position: relative; }
.hero__r .ph { position: absolute; inset: var(--header-h) 0 0 0; }   /* 이미지는 헤더 아래에서 시작 → 헤더는 아이보리 위 */
.hero__detail { position: absolute; left: calc(43% - 90px); bottom: 66px; width: 230px; height: 150px; z-index: 4; box-shadow: 0 24px 60px rgba(16,24,40,.22); }
.hero__scroll { position: absolute; left: var(--pad-x); bottom: 34px; z-index: 5; font-size: 12px; letter-spacing: .2em; color: var(--muted); }

/* ── 실적 (문장 중심) ── */
.record { padding: clamp(64px, 9vw, 120px) 0; }
.record__in { max-width: 1180px; }
.record p { font-weight: var(--fw-display); font-size: clamp(26px, 3.6vw, 50px); line-height: 1.35; letter-spacing: -.02em; }
.record .big { font-family: var(--serif); font-weight: var(--fw-reg); font-style: italic; white-space: nowrap; }
.record__note { margin-top: 32px; max-width: 640px; color: var(--muted); font-size: 15px; line-height: 1.8; }

/* ── 섹션 인트로 ── */
.sintro { display: flex; align-items: baseline; gap: 20px; margin-bottom: 52px; }
.sintro h2 { font-weight: var(--fw-display); font-size: clamp(28px, 3.4vw, 46px); letter-spacing: -.02em; line-height: 1.2; }

/* ── 서비스 (각기 다른 레이아웃) ── */
.svc { padding: clamp(70px, 9vw, 120px) 0; }
.svc--alt { background: var(--white); }
/* 01 전체폭 대표 이미지 */
.svc01__img { width: 100%; height: clamp(360px, 58vw, 660px); }
.svc01__cap { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-top: 26px; flex-wrap: wrap; }
.svc01__cap h3 { font-weight: var(--fw-heading); font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -.01em; }
.svc01__cap p { max-width: 420px; color: var(--muted); font-size: 15px; line-height: 1.8; }
/* 02 세로 이미지 + 좁은 설명 */
.svc02 { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.svc02__img { aspect-ratio: 3/4; }
.svc02__t h3 { font-weight: var(--fw-heading); font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -.01em; margin: 14px 0 18px; }
.svc02__t p { max-width: 360px; color: var(--ink-soft); font-size: 15px; line-height: 1.85; }
.svc-more { display: inline-block; margin-top: 26px; font-size: 14px; font-weight: var(--fw-med); border-bottom: 1px solid var(--bronze); color: var(--bronze-text); padding-bottom: 3px; }
.svc-more:hover { border-color: var(--bronze-text); }
/* 서비스 대표 이미지·제목 링크 (영역 전체를 감싸지 않음) */
a.svc-imglink { display: block; position: relative; }
a.svc-imglink .ph { position: absolute; inset: 0; }
a.svc-titlelink { color: inherit; }
a.svc-titlelink:hover { color: var(--bronze-text); }
.section-link { display: inline-block; font-size: 14px; font-weight: var(--fw-med); color: var(--bronze-text); border-bottom: 1px solid var(--bronze); padding-bottom: 3px; }
/* 03 두 이미지 비대칭 */
.svc03 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 24px; align-items: start; }
.svc03__a { grid-row: 1/3; aspect-ratio: 4/5; }
.svc03__b { aspect-ratio: 5/4; margin-top: 56px; }
.svc03__t { align-self: center; }
.svc03__t h3 { font-weight: var(--fw-heading); font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -.01em; margin: 12px 0 16px; }
.svc03__t p { max-width: 340px; color: var(--ink-soft); font-size: 15px; line-height: 1.85; }

/* ── 시공사례 (메인의 중심) ── */
.work { padding: clamp(80px, 11vw, 150px) 0; }
.work__feature { width: 100%; height: clamp(420px, 66vw, 760px); }
.work__meta { display: flex; gap: 34px; margin-top: 22px; font-size: 13px; color: var(--muted); letter-spacing: .02em; flex-wrap: wrap; }
/* 예시 이미지 고지 — 작지만 읽히는 크기로 둔다(--muted 는 흰 위 4.97:1). */
.img-note { margin-top: 16px; font-size: 13px; line-height: 1.7; color: var(--muted); letter-spacing: .01em; }
.work__meta b { color: var(--graphite); font-weight: var(--fw-med); }
.work__row { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(24px, 4vw, 56px); margin-top: clamp(60px, 8vw, 110px); align-items: end; }
.work__row .a { aspect-ratio: 16/10; }
.work__row .b { aspect-ratio: 4/5; }
.work__cap { margin-top: 16px; font-size: 13px; color: var(--muted); }
.work__cap b { color: var(--graphite); font-weight: var(--fw-med); display: block; font-size: 15px; margin-bottom: 3px; letter-spacing: -.01em; }

/* 대형 제목은 줄을 균형 있게 나눠 외톨이 단어 방지 */
.hero h1, .subhero h1, .sintro h2, .why__lead h2, .cta h2,
.record p, .lede, .effect__state h2, .trust__lead h2 { text-wrap: balance; }

/* ── 선택 이유 ── */
.why { padding: clamp(80px, 11vw, 150px) 0; }
.why__lead { max-width: 820px; margin-bottom: clamp(48px, 7vw, 90px); }
.why__lead h2 { font-weight: var(--fw-display); font-size: clamp(28px, 3.8vw, 54px); line-height: 1.28; letter-spacing: -.02em; margin-top: 22px; }
.why__wide { width: 100%; height: clamp(320px, 42vw, 520px); }
.why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); margin-top: clamp(44px, 6vw, 72px); }
.why__item h4 { font-weight: var(--fw-med); font-size: 18px; letter-spacing: -.01em; margin-bottom: 12px; padding-top: 20px; border-top: 1px solid var(--hair); }
.why__item p { color: var(--muted); font-size: 14.5px; line-height: 1.85; }

/* ── 메인 확장 서비스 (공간 광고 솔루션) ── */
.expand { padding: clamp(70px, 9vw, 120px) 0; background: var(--white); }
.expand__lead { max-width: 760px; margin-bottom: clamp(40px, 6vw, 64px); }
.expand__lead h2 { font-weight: var(--fw-display); font-size: clamp(28px, 3.4vw, 46px); letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
.expand__lead p { margin-top: 20px; color: var(--muted); font-size: 16px; line-height: 1.85; }
.expand__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 48px); }
.expand__item .svc-imglink { aspect-ratio: 16/10; }
.expand__item h3 { font-weight: var(--fw-heading); font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.01em; margin: 18px 0 8px; }
.expand__item h3 a { color: inherit; }
.expand__item h3 a:hover { color: var(--bronze-text); }
.expand__item p { color: var(--muted); font-size: 14.5px; line-height: 1.8; max-width: 420px; }
.expand__item .svc-more { margin-top: 16px; }
@media (max-width: 860px) { .expand__grid { grid-template-columns: 1fr; } }

/* ── 최종 CTA ── */
.cta { padding: clamp(100px, 14vw, 190px) 0; background: var(--graphite); color: var(--ivory); }
.cta__in { max-width: 1000px; }
.cta h2 { font-weight: var(--fw-display); font-size: clamp(32px, 5vw, 72px); line-height: 1.12; letter-spacing: -.025em; }
.cta h2 em { font-style: normal; font-family: var(--serif); color: #93C0F5; }
.cta__act { margin-top: 52px; }

/* ── 푸터 ── */
.ft { background: var(--black); color: #98A2B3; padding: 60px 0 46px; font-size: 13px; line-height: 1.9; }
.ft__top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding-bottom: 28px; border-bottom: 1px solid #1D2939; }
.ft__brand { font-family: var(--serif); font-size: 20px; color: var(--ivory); }
.ft__brand b { font-weight: var(--fw-med); }
.ft__nav { display: flex; gap: 22px; flex-wrap: wrap; }
.ft__nav a { transition: color var(--t); }
.ft__nav a:hover { color: var(--ivory); }
.ft__biz { margin-top: 24px; }
.ft__biz > div + div { margin-top: 4px; }
.ft__biz a { color: rgba(255,255,255,.78); border-bottom: 1px solid rgba(255,255,255,.18); }
.ft__biz a:hover { color: #fff; }
.ft__copy { margin-top: 12px; color: #7A8699; }

/* ── 브레드크럼(후속 페이지용, 미니멀) ── */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--muted); padding: 18px 0; }
.breadcrumb [aria-current="page"] { color: var(--graphite); }

/* ============================================================
   반응형
   ============================================================ */
/* 헤더는 태블릿(≤1024px)부터 햄버거로 전환 — 메뉴 겹침·줄바꿈 방지 */
@media (max-width: 1024px) {
  .gnb, .hdr__cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .hdr { position: sticky; background: var(--ivory); border-bottom: 1px solid var(--hair); }
}

@media (max-width: 860px) {
  /* 모바일 히어로: 텍스트(설명·H1·CTA)를 먼저, 이미지를 아래로 */
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero__l { order: 1; padding: 34px 22px 46px; }
  .hero__r { order: 2; height: 48vh; min-height: 320px; }
  .hero__r .ph { position: relative; inset: 0; height: 100%; }
  .hero h1 { font-size: 38px; margin-left: 0; }
  .hero__detail, .hero__scroll { display: none; }
  .svc02, .svc03, .work__row, .why__grid { grid-template-columns: 1fr; }
  .svc03__a { grid-row: auto; aspect-ratio: 4/3; }
  .svc03__b { margin-top: 0; }
  .why__grid { gap: 8px; }
  .why__item h4 { margin-top: 8px; }
  .sintro { flex-direction: column; gap: 6px; margin-bottom: 34px; }
  .cta__act .btn, .hero__act .btn { width: 100%; justify-content: space-between; }
}

/* ============================================================
   메인 잔여 섹션 (진행 절차 · 효과 · FAQ · 회사 신뢰 · 채널)
   ============================================================ */

/* ── 진행 절차 (괘선형 흐름) ── */
.process { padding: clamp(70px, 9vw, 120px) 0; background: var(--white); }
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.flow__step { border-top: 1px solid var(--graphite); padding: 30px 28px 0 0; }
.flow__n { font-family: var(--serif); font-size: 15px; color: var(--bronze); }
.flow__t { margin-top: 14px; font-size: 19px; font-weight: var(--fw-heading); letter-spacing: -.01em; }
.flow__d { margin-top: 8px; color: var(--muted); font-size: 14.5px; line-height: 1.8; max-width: 230px; }

/* ── 차량광고 효과 (진술 + 와이드 사진) ── */
.effect { padding: clamp(80px, 11vw, 150px) 0; }
.effect__img { width: 100%; height: clamp(340px, 46vw, 560px); margin-bottom: clamp(40px, 6vw, 72px); }
.effect__state h2 { font-weight: var(--fw-display); font-size: clamp(26px, 3.6vw, 50px); line-height: 1.3; letter-spacing: -.02em; max-width: 900px; }
.effect__state p { margin-top: 26px; max-width: 600px; color: var(--muted); font-size: 16px; line-height: 1.85; }

/* ── FAQ (에디토리얼 아코디언) ── */
.faqsec { padding: clamp(70px, 9vw, 120px) 0; background: var(--white); }
.faq { border-top: 1px solid var(--graphite); margin-top: clamp(30px, 4vw, 48px); }
.faq__item { border-bottom: 1px solid var(--hair); }
.faq__q { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 4px; font-size: clamp(17px, 2vw, 21px); font-weight: var(--fw-reg); letter-spacing: -.01em; color: var(--graphite); }
.faq__q .mk { font-family: var(--serif); font-size: 24px; line-height: 1; color: var(--bronze); flex-shrink: 0; transition: transform var(--t); }
.faq__item[aria-expanded="true"] .mk { transform: rotate(45deg); }
.faq__a { overflow: hidden; max-height: 0; transition: max-height .25s ease; }
.faq__a-inner { padding: 2px 4px 28px; color: var(--muted); font-size: 15px; line-height: 1.85; max-width: 720px; }

/* ── 회사 신뢰 (조용한 사실 밴드) ── */
.trust { padding: clamp(80px, 11vw, 150px) 0; }
.trust__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 90px); align-items: start; }
.trust__lead h2 { font-weight: var(--fw-display); font-size: clamp(26px, 3.4vw, 44px); line-height: 1.25; letter-spacing: -.02em; }
.trust__lead p { margin-top: 24px; max-width: 440px; color: var(--muted); font-size: 15px; line-height: 1.9; }
.trust__facts { border-top: 1px solid var(--graphite); }
.trust__row { display: flex; justify-content: space-between; gap: 24px; padding: 20px 2px; border-bottom: 1px solid var(--hair); font-size: 15px; }
.trust__row dt { color: var(--muted); }
.trust__row dd { font-weight: var(--fw-med); text-align: right; }
.trust__row dd .big { font-family: var(--serif); font-size: 20px; font-weight: var(--fw-reg); white-space: nowrap; }

/* ── 온라인 주문 · 탑디몰 (2분할 채널) ── */
.channels { padding: 0 0 clamp(80px, 11vw, 150px); }
.channels__grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--graphite); }
.channel { padding: clamp(40px, 5vw, 64px) 0; }
.channel + .channel { border-left: 1px solid var(--hair); padding-left: clamp(30px, 4vw, 56px); }
.channel h3 { font-weight: var(--fw-heading); font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.01em; margin: 14px 0; }
.channel p { max-width: 360px; color: var(--muted); font-size: 15px; line-height: 1.85; }
.channel .svc-more { margin-top: 22px; }

@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr 1fr; }
  .flow__step { padding-right: 20px; }
  .flow__d { max-width: none; }
  .trust__grid, .channels__grid { grid-template-columns: 1fr; }
  .channel + .channel { border-left: none; border-top: 1px solid var(--hair); padding-left: 0; }
}

/* ============================================================
   서브페이지 공통 (서비스 상세 등)
   ============================================================ */
.subhero { padding: calc(var(--header-h) + clamp(36px, 6vw, 80px)) 0 0; }
.subhero__head { max-width: 900px; }
.subhero__kick { margin-bottom: 20px; }
.subhero h1 { font-weight: var(--fw-display); font-size: clamp(34px, 5vw, 72px); line-height: 1.08; letter-spacing: -.025em; }
.subhero__sub { margin-top: 24px; max-width: 560px; color: var(--ink-soft); font-size: 17px; line-height: 1.8; }
.subhero__act { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; }
.subhero__media { width: 100%; height: clamp(340px, 50vw, 600px); margin-top: clamp(48px, 7vw, 90px); }

.section-pad { padding: clamp(64px, 8vw, 110px) 0; }
.section-pad--alt { background: var(--white); }
.lede { max-width: 860px; font-weight: var(--fw-display); font-size: clamp(24px, 3.2vw, 40px); line-height: 1.35; letter-spacing: -.02em; }
.body-narrow { max-width: 680px; color: var(--ink-soft); font-size: 16px; line-height: 1.85; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: start; }
.split--center { align-items: center; }
.split-img { aspect-ratio: 4/3; }
.colhead { font-weight: var(--fw-heading); font-size: 20px; letter-spacing: -.01em; margin-bottom: 16px; }

.rulelist { border-top: 1px solid var(--graphite); }
.rulelist li { padding: 16px 2px; border-bottom: 1px solid var(--hair); font-size: 15px; display: flex; gap: 14px; line-height: 1.7; }
.rulelist li .k { font-family: var(--serif); color: var(--bronze); flex-shrink: 0; min-width: 22px; }
.rulelist li .v b { font-weight: var(--fw-med); }

.callout { border-left: 2px solid var(--bronze); padding: 8px 0 8px 22px; font-size: 17px; color: var(--graphite); line-height: 1.7; }
.callout b { font-weight: var(--fw-med); }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
}

/* ============================================================
   시공사례 목록 (편집형 그리드)
   ============================================================ */
.pf-filter { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: clamp(36px, 5vw, 56px); font-size: 15px; }
.pf-filter a { color: var(--muted); padding-bottom: 4px; }
.pf-filter a:hover { color: var(--graphite); }
.pf-filter a.active { color: var(--graphite); border-bottom: 1px solid var(--bronze); }
.pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px) clamp(20px, 3vw, 32px); }
.pf-item { display: block; }
.pf-item__thumb { aspect-ratio: 4/3; }
.pf-item__cat { margin-top: 14px; font-size: 12px; font-weight: var(--fw-med); color: var(--bronze-text); letter-spacing: .04em; }
.pf-item__title { margin-top: 5px; font-size: 17px; font-weight: var(--fw-heading); letter-spacing: -.01em; }
.pf-item__meta { margin-top: 4px; font-size: 13px; color: var(--muted); }
.pf-empty { border-top: 1px solid var(--graphite); padding: 60px 0; color: var(--muted); font-size: 15px; }
.pager { display: flex; gap: 8px; justify-content: center; margin-top: clamp(48px, 6vw, 72px); }
.pager a, .pager span { min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; border: 1px solid var(--hair); }
.pager .cur { border-color: var(--graphite); background: var(--graphite); color: var(--ivory); }

/* ============================================================
   폼 (견적문의)
   ============================================================ */
.form-wrap { max-width: 720px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 13px; color: var(--muted); font-weight: var(--fw-med); }
.field label .req { color: var(--bronze); }
.field input, .field select, .field textarea {
  height: 52px; padding: 0 14px; border: 1px solid var(--hair); background: var(--white);
  font-size: 15px; color: var(--graphite); outline: none; transition: border-color var(--t); width: 100%;
}
.field textarea { height: 128px; padding: 12px 14px; resize: vertical; line-height: 1.7; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--graphite); }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink-soft); line-height: 1.6; }
.consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--bronze); flex-shrink: 0; }
.consent a { border-bottom: 1px solid var(--hair); }
.form-actions { margin-top: 32px; }
.form-note { margin-top: 18px; font-size: 13px; color: var(--muted); line-height: 1.7; }

@media (max-width: 640px) {
  .pf-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) and (min-width: 641px) {
  .pf-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── 파일 첨부 ── */
.uploader { border: 1px dashed var(--hair); background: var(--white); padding: 22px; text-align: center; }
.uploader label { cursor: pointer; font-weight: var(--fw-med); color: var(--graphite); }
.uploader small { display: block; margin-top: 8px; color: var(--muted); font-size: 12.5px; line-height: 1.7; }
.uploader input[type=file] { display: none; }
.uploader__list { margin-top: 12px; font-size: 13px; color: var(--muted); text-align: left; }

/* ── 서비스별 동적 필드 (선택 시 표시) ── */
.svc-fields { display: none; }
.svc-fields.show { display: contents; }

/* ── 비활성 버튼 ── */
.btn[disabled], .btn:disabled { background: var(--muted-soft); border-color: var(--muted-soft); color: var(--ivory); cursor: not-allowed; }
.btn[disabled]:hover, .btn:disabled:hover { background: var(--muted-soft); }

/* ── 개발용 표시 배지 ── */
.dev-flag { display: inline-block; margin-bottom: 18px; font-size: 12px; font-weight: var(--fw-med); letter-spacing: .04em; color: #8a5a2a; background: rgba(26,111,212,.12); padding: 6px 12px; }

/* ── 섹션 헤더 우측 링크(전체 보기) ── */
.sintro--between { justify-content: space-between; align-items: baseline; }
.sintro--between .s-right { margin-left: auto; }

/* ── 모바일 하단 고정 상담 바 ── */
.mobile-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; height: 60px; box-sizing: content-box; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--graphite); }
.mobile-bar__in { display: grid; grid-template-columns: 1fr 1fr; height: 100%; }
.mobile-bar a { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ivory); font-size: 15px; font-weight: var(--fw-med); }
.mobile-bar a + a { border-left: 1px solid rgba(234,240,247,.18); }
.mobile-bar a.primary { background: var(--bronze); }
@media (max-width: 860px) {
  .mobile-bar { display: block; }
  body.has-mobile-bar { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  body.menu-open .mobile-bar { display: none; }
  .sintro--between { flex-direction: row; align-items: center; }
}


/* ============================================================
   AI 추천 프로토타입 UI
   ============================================================ */
.rec { max-width: 940px; }
.rec__label { font-size: 13px; letter-spacing: .04em; color: var(--muted); margin-bottom: 20px; }
.rec-note-inline { color: var(--bronze-text); }
.rec-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.rec-choices--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.rec-choice { text-align: left; padding: 18px; border: 1px solid var(--hair); background: var(--surface); font-size: 15px; font-weight: var(--fw-med); color: var(--graphite); transition: border-color var(--t), background var(--t); }
.rec-choice:hover { border-color: var(--graphite); background: var(--white); }
.rec-chip { padding: 12px 18px; border: 1px solid var(--hair); background: var(--surface); font-size: 14px; color: var(--graphite); transition: border-color var(--t), background var(--t), color var(--t); }
.rec-chip:hover { border-color: var(--graphite); }
.rec-chip.is-on { background: var(--graphite); color: var(--ivory); border-color: var(--graphite); }
.rec-chip--direct { color: var(--bronze-text); border-style: dashed; }
.rec-progress { font-size: 12px; letter-spacing: .1em; color: var(--muted); margin-bottom: 14px; }
.rec__q { font-weight: var(--fw-display); font-size: clamp(22px, 3vw, 34px); letter-spacing: -.02em; margin-bottom: 22px; text-wrap: balance; }
.rec-input { height: 52px; border: 1px solid var(--hair); background: var(--surface); padding: 0 14px; font-size: 15px; outline: none; width: 100%; max-width: 320px; }
.rec-input:focus { border-color: var(--graphite); }
.rec-input--area { height: 120px; max-width: 640px; padding: 12px 14px; resize: vertical; line-height: 1.7; }
.rec-size { display: flex; align-items: center; gap: 10px; max-width: 380px; }
/* superseded by .rec-size v2 */
.rec-size span { color: var(--muted); }
.rec-hint { margin-top: 10px; font-size: 13px; color: var(--muted); line-height: 1.7; max-width: 560px; }
.rec-nav { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
.rec-back { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.rec-back:hover { color: var(--graphite); }

.rec-result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rec-card { border: 1px solid var(--hair); background: var(--surface); padding: 22px; display: flex; flex-direction: column; }
.rec-card--best { border-color: var(--graphite); }
.rec-card__tier { font-size: 12px; font-weight: var(--fw-med); letter-spacing: .06em; color: var(--bronze-text); margin-bottom: 10px; }
.rec-card--best .rec-card__tier { color: var(--ivory); background: var(--graphite); display: inline-block; padding: 3px 10px; align-self: flex-start; }
.rec-card__name { font-weight: var(--fw-heading); font-size: 18px; margin-bottom: 14px; letter-spacing: -.01em; }
.rec-fields { display: flex; flex-direction: column; margin-bottom: 14px; }
.rec-fields > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--hair); font-size: 13px; }
.rec-fields dt { color: var(--muted); }
.rec-fields dd { font-weight: var(--fw-med); text-align: right; }
.rec-finishes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.finish-group { font-size: 12.5px; line-height: 1.6; }
.finish-group__t { display: inline-block; min-width: 82px; font-weight: var(--fw-med); }
.finish-group.is-required .finish-group__t { color: var(--graphite); }
.finish-group.is-recommended .finish-group__t { color: var(--bronze-text); }
.finish-group.is-optional .finish-group__t { color: var(--muted); }
.rec-reason { font-size: 13px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 12px; }
.rec-warn { font-size: 12.5px; color: #8a5a2a; background: rgba(26,111,212,.1); padding: 8px 10px; margin-bottom: 10px; line-height: 1.6; }
.rec-warn--review { color: var(--graphite); background: var(--white); border-left: 2px solid var(--bronze); }
.rec-card__btns { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.rec-card__btns .btn { width: 100%; height: 46px; font-size: 14px; }

@media (max-width: 860px) {
  .rec-result-grid { grid-template-columns: 1fr; }
}

/* AI 추천 · 서버 계산 미리보기 */
.rec-calc:empty { display: none; }
.rec-calc { margin: 4px 0 12px; padding: 12px 14px; background: var(--white); border: 1px solid var(--hair); }
.rec-calc__total { font-size: 15px; }
.rec-calc__total b { font-family: var(--serif); font-size: 20px; }
.rec-calc__note { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.6; }

/* ============================================================
   주문조회 (order-lookup)
   ============================================================ */
.ol-form { margin-top: 6px; }
.ol-form .form-actions { margin-top: 20px; }
.ol-tokwrap { position: relative; }
.ol-tokwrap input { padding-right: 68px; }
.ol-toktoggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); height: 40px; min-width: 54px; padding: 0 12px; border: 1px solid var(--hair); background: var(--white); color: var(--graphite); font-size: 13px; line-height: 1; cursor: pointer; transition: border-color var(--t), background var(--t); }
.ol-toktoggle:hover { border-color: var(--graphite); }
.ol-toktoggle:focus-visible { outline: 2px solid var(--graphite); outline-offset: 1px; }
.ol-msg { margin-top: 16px; padding: 12px 14px; background: var(--white); border: 1px solid var(--hair); border-left: 3px solid var(--bronze); font-size: 14px; color: var(--graphite); line-height: 1.6; }

.ol-result { margin-top: 28px; }
.ol-card { background: var(--surface); border: 1px solid var(--hair); padding: 20px; margin-bottom: 14px; }
.ol-card h3 { font-size: 15px; font-weight: var(--fw-heading); margin: 0 0 14px; }

.ol-summary__num { display: flex; flex-direction: column; gap: 3px; }
.ol-summary__num .ol-label { font-size: 12px; color: var(--muted); }
.ol-summary__num b { font-size: clamp(18px, 4.5vw, 22px); font-family: var(--serif); word-break: break-all; }
.ol-summary__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-top: 16px; }
.ol-kv dt, .ol-item__fields dt, .ol-amt dt { font-size: 12px; color: var(--muted); margin: 0; }
.ol-kv dd { margin: 3px 0 0; font-weight: var(--fw-med); word-break: keep-all; }

.ol-badge { display: inline-block; margin-top: 14px; font-size: 12px; font-weight: var(--fw-med); letter-spacing: .03em; padding: 5px 12px; }
.ol-badge--review { background: rgba(26,111,212,.12); color: var(--bronze-text); }
.ol-badge--exception { background: var(--graphite); color: var(--ivory); }
.ol-note { font-size: 13px; color: var(--muted); line-height: 1.7; margin: 12px 0 0; }

/* 진행 단계 */
.ol-steps { display: flex; list-style: none; padding: 0; margin: 20px 0 4px; }
.ol-step { flex: 1; text-align: center; position: relative; }
.ol-step:not(:first-child)::before { content: ''; position: absolute; top: 7px; left: -50%; width: 100%; height: 2px; background: var(--hair); z-index: 0; }
.ol-step__dot { width: 16px; height: 16px; border-radius: 50%; background: var(--hair); display: block; margin: 0 auto 8px; position: relative; z-index: 1; }
.ol-step__t { font-size: 11px; line-height: 1.25; color: var(--muted); word-break: keep-all; display: block; padding: 0 2px; }
.ol-step.is-done .ol-step__dot { background: var(--bronze); }
.ol-step.is-done:not(:first-child)::before { background: var(--bronze); }
.ol-step.is-active .ol-step__dot { background: var(--graphite); box-shadow: 0 0 0 4px rgba(16,24,40,.12); }
.ol-step.is-active .ol-step__t { color: var(--graphite); font-weight: var(--fw-med); }

.ol-review-box { border-left: 3px solid var(--bronze); }
.ol-review-box p { font-size: 14px; color: var(--ink-soft); line-height: 1.75; margin: 0; }

/* 주문 항목 */
.ol-item { border-top: 1px solid var(--hair); padding: 14px 0; }
.ol-item:first-child { border-top: none; padding-top: 0; }
.ol-item__head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.ol-item__name { word-break: keep-all; }
.ol-item__price { font-weight: var(--fw-med); white-space: nowrap; }
.ol-item__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 12px 0 0; }
.ol-item__fields dd { margin: 2px 0 0; font-size: 14px; }

/* 금액 */
.ol-amounts { margin: 0; }
.ol-amt { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hair); }
.ol-amt dd { margin: 0; font-weight: var(--fw-med); text-align: right; }
.ol-amt--total { border-bottom: none; border-top: 2px solid var(--graphite); margin-top: 4px; padding-top: 13px; }
.ol-amt--total dt, .ol-amt--total dd { font-weight: var(--fw-heading); font-size: 16px; }
.ol-amt-note { font-size: 12px; color: var(--muted); font-weight: var(--fw-reg); }

.ol-notices ul { margin: 0; padding-left: 18px; }
.ol-notices li { font-size: 13px; color: var(--muted); line-height: 1.7; }

@media (max-width: 400px) {
  .ol-summary__grid, .ol-item__fields { grid-template-columns: 1fr; }
  .ol-step__t { font-size: 10px; }
}

/* ── 소재추천 V2 결과 ── */
.v2-msg { background: var(--white); border: 1px solid var(--hair); border-left: 3px solid var(--bronze); padding: 12px 14px; font-size: 14px; color: var(--ink-soft); line-height: 1.7; margin: 0 0 16px; }
.v2-badge { display: inline-block; font-size: 11px; font-weight: var(--fw-med); color: var(--bronze-text); background: rgba(26,111,212,.12); padding: 3px 8px; margin-left: 6px; vertical-align: middle; white-space: nowrap; }
.v2-block { margin: 12px 0; }
.v2-block__t { font-size: 12px; letter-spacing: .04em; color: var(--muted); font-weight: var(--fw-med); margin-bottom: 6px; }
.v2-block ul { margin: 0; padding-left: 18px; }
.v2-block li { font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; overflow-wrap: anywhere; }
.v2-dim { color: var(--muted); font-size: 12px; }
.v2-note { margin-top: 12px; padding: 9px 12px; background: rgba(26,111,212,.08); border: 1px dashed var(--bronze); font-size: 12.5px; line-height: 1.6; color: var(--bronze-text); overflow-wrap: anywhere; }

/* ── 소재추천 V2 온보딩(사업영역 카드·질문 태그) ── */
.rec-usages-v2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 16px; }
.rec-usage-v2 { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; padding: 16px 18px; min-height: 76px; border: 1px solid var(--hair); background: var(--surface); cursor: pointer; transition: border-color var(--t), background var(--t), transform var(--t); }
.rec-usage-v2:hover { border-color: var(--graphite); }
.rec-usage-v2:active { transform: translateY(1px); }
.rec-usage-v2__t { font-weight: var(--fw-heading); font-size: 15.5px; letter-spacing: -.01em; color: var(--graphite); }
.rec-usage-v2__d { font-size: 12.5px; color: var(--muted); line-height: 1.55; overflow-wrap: anywhere; }
.rec-tag { display: inline-block; font-size: 11px; font-weight: var(--fw-med); padding: 2px 7px; margin-left: 6px; vertical-align: middle; white-space: nowrap; }
.rec-tag--req { color: var(--bronze-text); background: rgba(26,111,212,.12); }
.rec-tag--opt { color: var(--muted); background: rgba(0,0,0,.05); }

/* ── V2 상담 요약(접이식) ── */
.v2-sum { margin: 16px 0 4px; border: 1px solid var(--hair); background: var(--white); }
.v2-sum > summary { cursor: pointer; padding: 12px 14px; font-size: 13px; font-weight: var(--fw-med); color: var(--graphite); letter-spacing: .01em; list-style: none; }
.v2-sum > summary::-webkit-details-marker { display: none; }
.v2-sum > summary::before { content: '▸ '; color: var(--bronze-text); }
.v2-sum[open] > summary::before { content: '▾ '; }
.v2-sum dl { margin: 0; padding: 4px 14px 14px; }
.v2-sum__row { display: grid; grid-template-columns: 108px 1fr; gap: 6px 12px; padding: 6px 0; border-top: 1px solid var(--hair); }
.v2-sum__row dt { font-size: 12px; color: var(--muted); font-weight: var(--fw-med); }
.v2-sum__row dd { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.6; overflow-wrap: anywhere; }

/* ── 소형 화면 방어(가로 스크롤 방지) ── */
.rec-size { flex-wrap: wrap; }
/* superseded by .rec-size v2 */
@media (max-width: 380px) {
  .rec-usages-v2 { grid-template-columns: 1fr; }
  .v2-sum__row { grid-template-columns: 1fr; gap: 2px; }
}

/* ── 온라인 주문 단계 UI (개발 검수용, /order) ── */
.ord { margin-top: 8px; }
.ord-steps { display: flex; flex-wrap: wrap; gap: 8px 14px; list-style: none; padding: 0; margin: 0 0 24px; }
.ord-steps__i { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted, #6F6E68); }
.ord-steps__n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border: 1px solid var(--hairline, #D7D4CC); border-radius: 50%; font-size: .74rem; }
.ord-steps__i.is-now { color: var(--graphite, #181918); font-weight: 600; }
.ord-steps__i.is-now .ord-steps__n { border-color: var(--graphite, #181918); }
.ord-steps__i.is-done .ord-steps__n { background: var(--graphite, #181918); color: #fff; border-color: var(--graphite, #181918); }
.ord-h2 { font-size: 1.24rem; font-weight: 600; margin: 0 0 10px; }
.ord-hint { font-size: .88rem; color: var(--muted, #6F6E68); margin: 0 0 16px; }
.ord-err { font-size: .88rem; color: #A3341F; margin: 10px 0 0; }
.ord-warn { font-size: .9rem; color: #7a5a1f; margin: 12px 0 0; }
.ord-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 18px; }
.ord-choice { text-align: left; padding: 16px; border: 1px solid var(--hairline, #D7D4CC); background: var(--soft-white, #FAFAF8); cursor: pointer; }
.ord-choice b { display: block; font-weight: 600; margin-bottom: 4px; }
.ord-choice span { font-size: .82rem; color: var(--muted, #6F6E68); }
.ord-choice.is-on { border-color: var(--graphite, #181918); box-shadow: inset 0 0 0 1px var(--graphite, #181918); }
.ord-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 8px; }
.ord-grid .field--full { grid-column: 1 / -1; }
.ord-fs { border: 1px solid var(--hairline, #D7D4CC); padding: 14px 16px; margin: 18px 0; }
.ord-fs legend { font-size: .84rem; font-weight: 600; padding: 0 6px; }
.ord-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 14px; }
.ord-check { display: flex; align-items: flex-start; gap: 8px; font-size: .88rem; min-height: 32px; }
.ord-check input { margin-top: 3px; }
.ord-sum { margin: 0 0 18px; }
.ord-sum > div { display: grid; grid-template-columns: 132px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--hairline, #D7D4CC); }
.ord-sum dt { font-size: .84rem; color: var(--muted, #6F6E68); margin: 0; }
.ord-sum dd { margin: 0; word-break: keep-all; }
.ord-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ord-notice { margin-top: 28px; }
@media (max-width: 480px) {
  .ord-steps { gap: 6px 10px; }
  .ord-steps__t { display: none; }
  .ord-sum > div { grid-template-columns: 1fr; gap: 2px; }
  .ord-nav .btn { flex: 1 1 auto; }
}

/* ── 결제 준비 UI (개발 검수용, /order 8단계) ── */
.pay-app { margin-top: 8px; }
.pay-gates { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
.pay-gate { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; color: var(--muted, #6F6E68); }
.pay-gate__m { flex: 0 0 auto; min-width: 52px; text-align: center; font-size: .74rem; padding: 2px 6px;
  border: 1px solid var(--hairline, #D7D4CC); color: var(--muted, #6F6E68); }
.pay-gate.is-ok { color: var(--graphite, #181918); }
.pay-gate.is-ok .pay-gate__m { border-color: var(--graphite, #181918); color: var(--graphite, #181918); }
.pay-idform { margin-bottom: 4px; }
.pay-sum { margin-top: 18px; }
.pay-sim { margin-top: 22px; }
.pay-sim__btns { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 8px; }
.pay-sim .btn { width: 100%; }
.pay-msg { font-size: .92rem; margin: 16px 0 0; padding: 12px 14px; border: 1px solid var(--hairline, #D7D4CC);
  background: var(--soft-white, #FAFAF8); word-break: keep-all; }
.pay-msg.is-ok { border-color: #2F6B4F; color: #2F6B4F; }
.pay-msg.is-err { border-color: #A3341F; color: #A3341F; }
@media (max-width: 480px) {
  .pay-gate { font-size: .86rem; }
  .pay-sim__btns { grid-template-columns: 1fr; }
}
.btn--sm { height: 42px; padding: 0 14px; font-size: 13px; justify-content: center; }

/* ── AI 소재추천 V3 결과 UI ── */
.rv3-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 8px; }
.rv3-cards--sm { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.rv3-card { text-align: left; padding: 16px; border: 1px solid var(--hairline, #D7D4CC); background: var(--soft-white, #FAFAF8); cursor: pointer; transition: var(--t); }
.rv3-card:hover { border-color: var(--graphite, #181918); }
.rv3-card b { display: block; font-weight: 600; margin-bottom: 4px; }
.rv3-card span { font-size: .82rem; color: var(--muted, #6F6E68); }
.rv3-card--hold { background: transparent; border-style: dashed; }
.rv3-hold { margin-top: 26px; }
.rv3-hold__t { font-size: .84rem; color: var(--muted, #6F6E68); margin-bottom: 8px; }
.rv3-hint { font-size: .86rem; color: var(--muted, #6F6E68); margin: 0 0 14px; }
.rv3-msg { font-size: .96rem; margin: 6px 0 18px; word-break: keep-all; }
.rv3-notice { font-size: .88rem; color: #7a5a1f; border-left: 2px solid var(--bronze); padding-left: 12px; margin: 0 0 18px; word-break: keep-all; }
.rv3-mat { border: 1px solid var(--hairline, #D7D4CC); padding: 18px; margin-bottom: 14px; background: var(--soft-white, #FAFAF8); }
.rv3-mat--best { border-color: var(--graphite, #181918); box-shadow: inset 0 0 0 1px var(--graphite, #181918); }
.rv3-mat__rank { font-size: .74rem; letter-spacing: .06em; color: var(--muted, #6F6E68); margin-bottom: 6px; }
.rv3-mat--best .rv3-mat__rank { color: var(--graphite, #181918); font-weight: 600; }
.rv3-mat__name { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; word-break: keep-all; }
.rv3-mat__reason { font-size: .92rem; margin: 0 0 12px; word-break: keep-all; }
.rv3-badge { display: inline-block; font-size: .7rem; font-weight: 400; padding: 2px 6px; border: 1px solid var(--hairline, #D7D4CC); color: var(--muted, #6F6E68); vertical-align: middle; }
.rv3-spec { margin: 0 0 12px; }
.rv3-spec > div { display: grid; grid-template-columns: 108px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--hairline, #D7D4CC); }
.rv3-spec dt { font-size: .82rem; color: var(--muted, #6F6E68); margin: 0; }
.rv3-spec dd { margin: 0; font-size: .9rem; word-break: keep-all; }
.rv3-spec--status { margin-top: 18px; }
.rv3-block { margin: 14px 0; }
.rv3-block__t { font-size: .84rem; font-weight: 600; margin-bottom: 6px; }
.rv3-block ul { margin: 0; padding-left: 18px; }
.rv3-block li { font-size: .88rem; margin-bottom: 4px; word-break: keep-all; }
.rv3-block--warn .rv3-block__t { color: #A3341F; }
.rv3-block--ask { border: 1px solid var(--hairline, #D7D4CC); padding: 14px 16px; }
.rv3-ask { margin-top: 10px; }
.rv3-ask__q { font-size: .88rem; margin-bottom: 6px; }
@media (max-width: 480px) {
  .rv3-cards, .rv3-cards--sm { grid-template-columns: 1fr; }
  .rv3-spec > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ── 법무 문서(개인정보·약관·환불·업로드) ── */
.lg-doc h2 { font-size: 1.06rem; font-weight: 600; margin: 34px 0 10px; }
.lg-doc h2:first-of-type { margin-top: 8px; }
.lg-doc p { font-size: .93rem; line-height: 1.75; margin: 0 0 10px; word-break: keep-all; }
.lg-stamp { font-size: .8rem; color: var(--muted, #6F6E68); margin-top: 10px; }
.lg-note { font-size: .86rem; color: var(--muted, #6F6E68); }
.lg-ul, .lg-ol { margin: 0 0 12px; padding-left: 20px; }
.lg-ul li, .lg-ol li { font-size: .92rem; line-height: 1.7; margin-bottom: 6px; word-break: keep-all; }
.lg-dl { margin: 0 0 14px; }
.lg-dl > div { display: grid; grid-template-columns: 132px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--hairline, #D7D4CC); }
.lg-dl dt { font-size: .84rem; color: var(--muted, #6F6E68); margin: 0; }
.lg-dl dd { margin: 0; font-size: .92rem; word-break: keep-all; }
.lg-tablewrap { overflow-x: auto; margin: 0 0 14px; }
.lg-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.lg-table th, .lg-table td { border: 1px solid var(--hairline, #D7D4CC); padding: 9px 10px; text-align: left; vertical-align: top; word-break: keep-all; }
.lg-table th { background: var(--soft-white, #FAFAF8); font-weight: 600; white-space: nowrap; }
.lg-foot { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--hairline, #D7D4CC); }
.lg-foot h2 { margin-top: 0; }
@media (max-width: 480px) {
  .lg-dl > div { grid-template-columns: 1fr; gap: 2px; }
  .lg-table { font-size: .82rem; }
}

/* ── 주문 동의 블록 ── */
.ord-consent { border: 1px solid var(--hairline, #D7D4CC); padding: 16px; margin: 18px 0; }
.ord-consent__t { font-size: .88rem; font-weight: 600; margin-bottom: 10px; }
.ord-consent__group { margin-bottom: 14px; }
.ord-consent__group:last-child { margin-bottom: 0; }
.ord-consent__label { font-size: .78rem; color: var(--muted, #6F6E68); margin-bottom: 6px; }
.ord-cs { display: flex; align-items: flex-start; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--hairline, #D7D4CC); }
.ord-cs:last-child { border-bottom: 0; }
.ord-cs input { margin-top: 4px; flex: 0 0 auto; }
.ord-cs__body { flex: 1 1 auto; min-width: 0; }
.ord-cs__name { font-size: .9rem; font-weight: 500; }
.ord-cs__name .req { color: #A3341F; font-size: .78rem; margin-left: 4px; }
.ord-cs__name .opt { color: var(--muted, #6F6E68); font-size: .78rem; margin-left: 4px; }
.ord-cs__sum { font-size: .84rem; color: var(--muted, #6F6E68); margin-top: 3px; word-break: keep-all; }
.ord-cs__link { font-size: .8rem; margin-top: 3px; display: inline-block; }


/* ============================================================
   선택지 버튼 · 카드 (AI 추천 UX 개편)
   - 모든 선택지는 버튼/카드이며 radiogroup semantics 를 갖는다.
   - 터치 영역 최소 44px, 키보드 focus-visible 링, selected 체크 표시.
   ============================================================ */
.opt-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 4px 0 18px; }
.opt-group--cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }

/* V13 §11 — 콘텐츠가 min-height 보다 작을 때 위로 쏠리던 문제: cross-axis 를 center 로 */
.opt-btn, .opt-card {
  position: relative; display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 13px 15px; text-align: left;
  border: 1.5px solid var(--hairline, #D7D4CC); border-radius: 2px;
  background: var(--white, #fff); color: var(--ink, #181918);
  font-size: .95rem; line-height: 1.45; cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.opt-btn__mark {
  flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%;
  border: 1.5px solid var(--hairline, #D7D4CC); background: transparent; position: relative;
}
.opt-btn__body { display: block; }
.opt-btn__label { display: block; font-weight: 500; word-break: keep-all; }
.opt-btn__note  { display: block; margin-top: 3px; font-size: .82rem; color: var(--muted, #6F6E68); word-break: keep-all; }

.opt-btn:hover, .opt-card:hover { border-color: var(--graphite, #181918); background: var(--soft-white, #FAFAF8); }
.opt-btn:active, .opt-card:active { background: #EAF0F7; }
.opt-btn:focus-visible, .opt-card:focus-visible {
  outline: none; border-color: var(--graphite, #181918);
  box-shadow: 0 0 0 3px rgba(26,111,212,.45);
}
.opt-btn.is-selected, .opt-card.is-selected {
  border-color: var(--graphite, #181918); background: var(--soft-white, #FAFAF8);
  box-shadow: inset 0 0 0 1px var(--graphite, #181918);
}
.opt-btn.is-selected .opt-btn__mark, .opt-card.is-selected .opt-btn__mark {
  border-color: var(--graphite, #181918); background: var(--graphite, #181918);
}
.opt-btn.is-selected .opt-btn__mark::after, .opt-card.is-selected .opt-btn__mark::after {
  content: ''; position: absolute; left: 5px; top: 3px; width: 5px; height: 9px;
  border: solid var(--ivory, #F2F0EA); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg);
}
.opt-btn[disabled], .opt-card[disabled] { opacity: .45; cursor: not-allowed; }
.opt-btn[disabled]:hover, .opt-card[disabled]:hover { border-color: var(--hairline, #D7D4CC); background: var(--white, #fff); }

/* '잘 모르겠어요' 도 동일한 버튼형 — 시각적으로만 부드럽게 구분 */
.opt-btn--unsure { border-style: dashed; }
.opt-btn--unsure.is-selected { border-style: solid; }

.opt-card { align-items: center; }
.opt-card__body { display: block; }
.opt-card__body b { display: block; font-size: 1rem; margin-bottom: 3px; }
.opt-card__use { display: inline-block; font-size: .78rem; color: var(--muted, #6F6E68); margin-bottom: 4px; }
.opt-card__why { display: block; font-size: .84rem; color: var(--muted, #6F6E68); word-break: keep-all; }

/* 직접 입력 */
.rec-size { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 6px 0 16px; }
.rec-size__l { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; color: var(--muted, #6F6E68); }
/* superseded by .rec-size v2 */
.rec-x { padding-bottom: 12px; color: var(--muted, #6F6E68); }

/* 다음 단계 안내 */
.rv3-next { margin: 22px 0 6px; padding: 16px 18px; background: var(--soft-white, #FAFAF8); border-left: 2px solid var(--bronze, #C6A45A); }
.rv3-next__t { font-weight: 600; margin: 0 0 6px; word-break: keep-all; }
.rv3-next__s { margin: 0 0 4px; font-size: .9rem; color: var(--muted, #6F6E68); word-break: keep-all; }

/* 메인 서비스 카드(실사출력·배너) */
.svc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.svc-card { display: block; padding: 24px; border: 1px solid var(--hairline, #D7D4CC); background: var(--white, #fff); transition: var(--t); }
.svc-card:hover { border-color: var(--graphite, #181918); }
.svc-card__k { display: block; font-size: .78rem; letter-spacing: .1em; color: var(--bronze-text, #8A6D2F); margin-bottom: 10px; }
.svc-card b { display: block; font-size: 1.12rem; margin-bottom: 8px; word-break: keep-all; }
.svc-card__d { display: block; font-size: .9rem; color: var(--muted, #6F6E68); margin-bottom: 14px; word-break: keep-all; }

@media (max-width: 640px) {
  .opt-group, .opt-group--cards { grid-template-columns: 1fr; }   /* 모바일 전체 너비 */
  .opt-btn, .opt-card { min-height: 56px; }
  .rec-size { flex-direction: column; align-items: stretch; }
  .rec-x { display: none; }
}
@media (min-width: 641px) {
  .opt-btn { min-width: 180px; }                                   /* PC 최소 버튼 폭 */
}

/* ============================================================
   모바일 퀵액션 바 (한 줄 3분할)
   ============================================================ */
.quickbar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--graphite, #181918);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -6px 18px rgba(16,24,40,.18);
}
.quickbar__in { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.quickbar__i {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 56px; padding: 8px 4px;
  color: var(--ivory, #F2F0EA); text-align: center;
}
.quickbar__i + .quickbar__i { border-left: 1px solid rgba(234,240,247,.16); }
.quickbar__ic { display: block; width: 20px; height: 20px; margin-bottom: 1px; }
.quickbar__ic svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; }
.quickbar__t { font-size: 12.5px; font-weight: 600; line-height: 1.15; white-space: nowrap; }
.quickbar__s { font-size: 10.5px; line-height: 1.15; color: rgba(234,240,247,.72); white-space: nowrap; }
.quickbar__i--ai { background: var(--bronze, #C6A45A); color: #fff; }
.quickbar__i--ai .quickbar__s { color: rgba(255,255,255,.86); }
.quickbar__i:active { background: rgba(234,240,247,.10); }
.quickbar__i--ai:active { background: var(--bronze-text); }
.quickbar__i:focus-visible { outline: 2px solid var(--ivory, #F2F0EA); outline-offset: -3px; }

@media (max-width: 860px) {
  .quickbar { display: block; }
  body.has-quickbar { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  body.menu-open .quickbar { display: none; }
}

/* 추천값 적용 패널 (주문 수정화면) */
.reco-applied { border: 1px solid var(--graphite, #181918); padding: 20px; margin-bottom: 26px; background: var(--soft-white, #FAFAF8); }
.reco-applied__t { font-weight: 600; margin: 0 0 6px; word-break: keep-all; }
.reco-applied__s { margin: 0 0 4px; font-size: .9rem; color: var(--muted, #6F6E68); word-break: keep-all; }
.reco-applied__miss { margin: 10px 0 0; font-size: .88rem; color: #8A4B1F; word-break: keep-all; }
.reco-why { margin-top: 14px; }
.reco-why summary { cursor: pointer; font-size: .9rem; font-weight: 500; }
.reco-why p, .reco-why ul { margin-top: 8px; font-size: .9rem; color: var(--muted, #6F6E68); word-break: keep-all; }

/* 추천 규격 확인 · 가정값 안내 */
.reco-confirm { border: 1px solid var(--hairline, #D7D4CC); padding: 16px 18px; margin: 6px 0 18px; background: var(--white, #fff); }
.reco-confirm__v { font-size: 1.05rem; font-weight: 600; margin: 0 0 6px; }
.reco-confirm__v span { font-weight: 400; color: var(--muted, #6F6E68); font-size: .92rem; }
.reco-confirm__why { font-size: .88rem; color: var(--muted, #6F6E68); margin: 0 0 8px; word-break: keep-all; }
.reco-confirm__note { font-size: .86rem; color: #7a5a1f; border-left: 2px solid var(--bronze, #C6A45A); padding-left: 10px; margin: 8px 0 0; word-break: keep-all; }
.reco-confirm-panel { border: 1.5px solid var(--bronze, #C6A45A); padding: 18px 20px; margin-bottom: 20px; background: #F5F9FF; }
.reco-confirm-panel .reco-confirm__t { font-weight: 600; margin: 0 0 8px; word-break: keep-all; }
.reco-confirm-panel .reco-confirm__v { margin-bottom: 6px; }
.reco-applied__assumed { margin: 10px 0 0; font-size: .88rem; color: #7a5a1f; border-left: 2px solid var(--bronze, #C6A45A); padding-left: 10px; word-break: keep-all; }
.rec-nav--confirm { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
@media (max-width: 640px) {
  .rec-nav--confirm { flex-direction: column; align-items: stretch; }
  .rec-nav--confirm .btn { width: 100%; text-align: center; }
}

/* ============================================================
   직접 규격 입력 (v2) — 가로 [숫자] mm × 세로 [숫자] mm
   textarea 스타일 금지 · 고정 높이 · 단위 표시 · 오버플로 0
   ============================================================ */
.rec-size { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 10px 0 16px; }
.rec-size__l { display: flex; flex-direction: column; gap: 5px; }
.rec-size__cap { font-size: .82rem; color: var(--muted, #6F6E68); }
.rec-size__in { position: relative; display: inline-flex; align-items: center; }
.rec-size .rec-input--num {
  height: 46px; min-height: 46px; max-height: 46px;
  width: 160px; max-width: 180px; min-width: 140px;
  padding: 0 40px 0 12px; font-size: 15px; line-height: 46px;
  border: 1.5px solid var(--hairline, #D7D4CC); background: var(--white, #fff);
  border-radius: 2px; text-align: right; resize: none; overflow: hidden; white-space: nowrap;
  -moz-appearance: textfield;
}
.rec-size .rec-input--num::-webkit-outer-spin-button,
.rec-size .rec-input--num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rec-size .rec-input--num:focus { outline: none; border-color: var(--graphite, #181918); box-shadow: 0 0 0 3px rgba(26,111,212,.35); }
.rec-size__unit { position: absolute; right: 12px; font-size: .86rem; color: var(--muted, #6F6E68); pointer-events: none; }
.rec-size__x { align-self: center; padding: 0 2px; margin-top: 18px; font-size: 1.05rem; color: var(--muted, #6F6E68); }
.rec-size--single .rec-size__l { flex: 0 0 auto; }
.rec-err { min-height: 18px; margin: 0 0 10px; font-size: .86rem; color: #A33B1F; }

@media (max-width: 640px) {
  .rec-size { flex-direction: column; align-items: stretch; gap: 10px; }
  .rec-size__l { width: 100%; }
  .rec-size .rec-input--num { width: 100%; max-width: 100%; min-width: 0; }
  .rec-size__x { display: none; }
}

/* ── AI 추천 자유입력창 (6개 핵심 슬롯 구조화) ── */
.rv3-intake { border: 1px solid var(--hairline, #D7D4CC); background: var(--soft-white, #FAFAF8); padding: 18px; margin-bottom: 26px; }
.rv3-intake__l { display: block; font-size: .95rem; font-weight: 600; margin-bottom: 6px; word-break: keep-all; }
.rv3-intake__row { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.rv3-intake__row .rec-input--area { flex: 1 1 320px; min-width: 0; max-width: 100%; height: 68px; }
.rv3-intake__row .btn { flex: 0 0 auto; }
.rv3-intake__ex { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rv3-chip { font-size: .78rem; color: var(--muted, #6F6E68); background: #fff; border: 1px solid var(--hairline, #D7D4CC); border-radius: 999px; padding: 5px 11px; cursor: pointer; text-align: left; word-break: keep-all; }
.rv3-chip:hover { border-color: var(--graphite, #181918); color: var(--graphite, #181918); }
/* 분석값 확인 버튼 — 입력표 행 안에 들어가는 작은 칩 */
.rv3-chip--confirm { padding: 2px 8px; font-size: .72rem; margin-left: 4px; vertical-align: middle; }
.rv3-intake__notice { margin: 10px 0 0; padding-left: 18px; }
.rv3-intake__notice li { font-size: .86rem; color: #7a5a1f; margin-bottom: 4px; word-break: keep-all; }
.rv3-note-sm { display: block; font-size: .78rem; color: var(--muted, #6F6E68); margin-top: 8px; word-break: keep-all; }
.rv3-applied { font-size: .84rem; color: var(--muted, #6F6E68); margin: 0 0 12px; word-break: keep-all; }
.rv3-linkbtn { font-size: .8rem; color: var(--muted, #6F6E68); background: none; border: 0; border-bottom: 1px solid currentColor; padding: 0; cursor: pointer; }
.rv3-block--product li { color: var(--graphite, #181918); }
@media (max-width: 600px) {
  .rv3-intake { padding: 14px; }
  .rv3-intake__row { flex-direction: column; align-items: stretch; }
  .rv3-intake__row .btn { width: 100%; }
}


/* ── 추천 V4 한 페이지 입력표 ── */
.v4-table { border: 1px solid var(--hairline, #D7D4CC); margin: 22px 0; }
.v4-table__t { font-size: .9rem; font-weight: 600; padding: 12px 16px; background: var(--soft-white, #FAFAF8); border-bottom: 1px solid var(--hairline, #D7D4CC); }
.v4-table__t--sub { border-top: 1px solid var(--hairline, #D7D4CC); }
.v4-row { display: grid; grid-template-columns: 190px 1fr; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #f0f0f0; align-items: start; }
.v4-row:last-child { border-bottom: none; }
.v4-row__l { font-size: .88rem; color: var(--muted, #6F6E68); word-break: keep-all; }
.v4-row__c { min-width: 0; }
.v4-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opt-btn--sm { padding: 7px 12px; font-size: .84rem; }
.opt-btn--sm .opt-btn__label { font-size: .84rem; }
.v4-size { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v4-size .rec-input--num { width: 110px; max-width: 110px; }
.v4-ask { border: 1px solid var(--graphite, #181918); padding: 16px; margin: 20px 0; }
.v4-ask__t { font-size: .9rem; font-weight: 600; margin-bottom: 10px; }
.v4-offer { border: 1px solid var(--bronze); background: #F5F9FF; padding: 16px; margin: 18px 0; }
.v4-offer__t { font-size: .9rem; font-weight: 600; margin-bottom: 6px; }
.v4-offer__m { font-size: .88rem; margin: 0 0 12px; word-break: keep-all; }
.rec-nav--top { margin-bottom: 14px; }
@media (max-width: 700px) {
  .v4-row { grid-template-columns: 1fr; gap: 8px; }
  .v4-size .rec-input--num { width: 100%; max-width: 100%; }
}


/* ============================================================
   AI 소재추천 V5 — 한 페이지 UI
   카드 선택 상태는 색상만으로 표시하지 않는다(배지 + 테두리 + aria-checked).
   ============================================================ */

.v5-step__t { font-size: 1.02rem; font-weight: 600; color: var(--graphite, #181918); margin: 22px 0 10px; word-break: keep-all; }

/* V13 §7.1 — PC 3열 고정(6개 = 3×2), 태블릿 2열, 모바일 1열 */
.v5-service-grid, .v5-usecase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 1023px) { .v5-service-grid, .v5-usecase-grid { grid-template-columns: repeat(2, 1fr); } }
.v5-card { display: flex; flex-direction: column; gap: 4px; text-align: left; background: #fff; border: 1px solid var(--hairline, #D7D4CC); border-radius: 10px; padding: 14px 16px; cursor: pointer; min-height: 64px; }
.v5-card:hover { border-color: var(--graphite, #181918); }
.v5-card:focus-visible { outline: 2px solid var(--graphite, #181918); outline-offset: 2px; }
.v5-card.is-selected { border-color: var(--graphite, #181918); box-shadow: inset 0 0 0 1px var(--graphite, #181918); }
.v5-card--sm { min-height: 52px; padding: 12px 14px; }
.v5-card__t { font-size: .94rem; font-weight: 600; color: var(--graphite, #181918); word-break: keep-all; }
.v5-card__d { font-size: .8rem; color: var(--muted, #6F6E68); word-break: keep-all; }

.v5-question-panel { margin-top: 22px; padding: 16px; background: #F4F9FF; border: 1px solid var(--hairline, #D7D4CC); border-radius: 10px; }
.v5-question { border: 0; padding: 0; margin: 0 0 14px; }
.v5-question:last-child { margin-bottom: 0; }
.v5-question__l { font-size: .92rem; font-weight: 600; color: var(--graphite, #181918); padding: 0; margin-bottom: 8px; word-break: keep-all; }
.v5-opts { display: flex; flex-wrap: wrap; gap: 6px; }

.v5-result-list { margin-top: 22px; }
.v5-result-card { border: 1px solid var(--hairline, #D7D4CC); border-radius: 10px; padding: 16px; margin-bottom: 10px; background: #fff; }
.v5-result-card.is-selected { border-color: var(--graphite, #181918); box-shadow: inset 0 0 0 1px var(--graphite, #181918); }
.v5-result-card__hit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; }
.v5-result-card__hit:focus-visible { outline: 2px solid var(--graphite, #181918); outline-offset: 3px; }
.v5-result-card__rank { font-size: .76rem; color: var(--muted, #6F6E68); background: #EEF2F7; border-radius: 999px; padding: 3px 10px; }
.v5-result-card__name { font-size: 1.02rem; font-weight: 600; color: var(--graphite, #181918); }
.v5-result-card__reason { font-size: .88rem; color: var(--graphite, #181918); margin: 10px 0 0; word-break: keep-all; }
.v5-result-card__diff { font-size: .84rem; color: var(--muted, #6F6E68); margin: 6px 0 0; word-break: keep-all; }
.v5-result-card__warn { margin: 8px 0 0; padding-left: 18px; }
.v5-result-card__warn li { font-size: .84rem; color: #7a5a1f; word-break: keep-all; }
.v5-badge { font-size: .74rem; color: var(--muted, #6F6E68); border: 1px solid var(--hairline, #D7D4CC); border-radius: 999px; padding: 2px 9px; }
.v5-badge--sel { color: #fff; background: var(--graphite, #181918); border-color: var(--graphite, #181918); }
.v5-badge--warn { color: #7a5a1f; border-color: #E4D5B4; background: #FDF8EC; }

.v5-size-panel { margin-top: 22px; padding: 16px; background: #F4F9FF; border: 1px solid var(--hairline, #D7D4CC); border-radius: 10px; }
.v5-size-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.v5-size-custom__l { font-size: .88rem; color: var(--muted, #6F6E68); }
.v5-order-panel { margin-top: 20px; }
.v5-branches { margin: 10px 0 0; padding-left: 18px; }
.v5-branches li { font-size: .88rem; color: var(--graphite, #181918); }

.v5-cross-offer { margin-top: 18px; padding: 16px; border: 1px dashed var(--hairline, #D7D4CC); border-radius: 10px; background: #F7FBFF; }
.v5-cross-offer__t { font-size: .92rem; font-weight: 600; color: var(--graphite, #181918); word-break: keep-all; }
.v5-cross-offer__m { font-size: .88rem; color: var(--muted, #6F6E68); margin: 6px 0 12px; word-break: keep-all; }

@media (max-width: 700px) {
  .v5-service-grid, .v5-usecase-grid { grid-template-columns: 1fr; }
  .v5-size-custom .rec-input--num { flex: 1 1 40%; min-width: 0; }
  .v5-result-card__hit { gap: 6px; }
}

/* 모바일 최소 터치 영역 — V5 자유입력 예시 칩(공용 .rv3-chip 은 건드리지 않는다) */
.v5-free-text .rv3-chip { min-height: 36px; padding: 8px 12px; }
@media (max-width: 700px) {
  .v5-free-text .rv3-chip { min-height: 44px; padding: 11px 14px; }
  .v5-opts .opt-btn--sm { min-height: 44px; }
  .v5-order-panel .btn, .v5-cross-offer .btn { min-height: 44px; }
}

.v5-result-card__good { margin: 8px 0 0; padding-left: 18px; }
.v5-result-card__good li { font-size: .84rem; color: var(--muted, #6F6E68); word-break: keep-all; }

.v5-result-card__vars { margin: 8px 0 0; }
.v5-result-card__vars-t { display: block; font-size: .78rem; font-weight: 600; color: var(--muted, #6F6E68); }
.v5-result-card__vars ul { margin: 4px 0 0; padding-left: 18px; }
.v5-result-card__vars li { font-size: .84rem; word-break: keep-all; }
.v5-result-card__vars em { font-style: normal; color: var(--muted, #6F6E68); }

/* ── V5 주문 옵션·가격·장바구니 (V10) ── */
.v5-option-panel, .v5-design-panel, .v5-price-panel, .v5-cart-panel {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line, #E5E3DC);
}
.v5-opt-row { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; flex-wrap: wrap; }
.v5-opt-row__l { font-size: .86rem; font-weight: 600; }
.v5-opt-row__h { font-size: .8rem; color: var(--muted, #6F6E68); }
.v5-opt-row .rec-input--num { width: 88px; min-height: 44px; }
.v5-file-box { margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v5-file-box input[type=file] { font-size: .84rem; max-width: 100%; }
.v5-file-list { margin: 8px 0 0; padding: 0; list-style: none; }
.v5-file-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0;
  border-bottom: 1px solid var(--line, #E5E3DC); font-size: .86rem; }
.v5-file-list__s { color: var(--muted, #6F6E68); font-size: .8rem; margin-left: auto; }
.v5-design-note { display: block; margin-top: 10px; font-size: .86rem; }
.v5-design-note textarea { width: 100%; margin-top: 4px; }
.v5-price { margin: 12px 0 0; }
.v5-price > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: .88rem; }
.v5-price dt { color: var(--muted, #6F6E68); }
.v5-price dd { margin: 0; font-variant-numeric: tabular-nums; }
.v5-price__total { border-top: 1px solid var(--line, #E5E3DC); margin-top: 6px; padding-top: 10px !important; }
.v5-price__total dt, .v5-price__total dd { font-weight: 700; font-size: 1rem; }
.v5-cart { margin-top: 12px; }
.v5-cart__t { font-size: .86rem; font-weight: 600; }
.v5-cart ul { margin: 6px 0; padding: 0; list-style: none; }
.v5-cart li { display: flex; align-items: center; gap: 10px; padding: 6px 0;
  border-bottom: 1px solid var(--line, #E5E3DC); font-size: .86rem; }
.v5-cart li > span:nth-child(2) { margin-left: auto; font-variant-numeric: tabular-nums; }
.v5-cart__sum { text-align: right; font-weight: 700; margin: 8px 0; }
@media (max-width: 480px) {
  .v5-opt-row { gap: 6px; }
  .v5-file-list li, .v5-cart li { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════
   V5 모션 (V11) — 빠르되 부드럽게. 애니메이션이 존재감을 드러내지 않는다.
     · 짧은 요소 반응 120~180ms · 영역 전환 180~260ms · 결과 등장 220~320ms
     · easing 은 ease-out 계열 하나로 통일한다(튀지 않는다)
     · transform/opacity 위주 — 레이아웃을 다시 계산시키지 않는다
   ══════════════════════════════════════════════════════════ */
/* V13 §12 — 전 구간 fade-up 통일. 180~300ms · ease-out · 약한 stagger.
   (V12 의 감속치는 V13 명시 규격으로 대체. easing 은 expo-out 유지 — 끝이 잦아드는 결) */
:root {
  /* ══════════ V20 §3 — V5 visual tokens ══════════
     브랜드 방향(아이보리·그래파이트·브론즈)은 유지하되 브론즈를 장식색으로 쓰지 않는다.
     장식이 아니라 계층·여백·타이포로 고급스러움을 만든다(§69). */
  --v5-bg:            #F7FBFF;   /* page — soft sky */
  --v5-surface:       #FFFFFF;   /* 카드·패널 */
  --v5-surface-muted: #F4F9FF;   /* 보조 면 · placeholder */
  --v5-surface-sel:   #EAF3FF;   /* 선택 상태 — 아주 옅은 하늘빛 */
  --v5-border:        #E5EAF0;   /* 기본 선(얇고 연하게 · §37) */
  --v5-border-strong: #C3D2E3;   /* hover·구분이 필요한 선 */
  --v5-border-sel:    #111827;   /* 선택 테두리 */
  --v5-text:          #111827;   /* primary */
  --v5-text-muted:    #667085;   /* secondary */
  --v5-text-subtle:   #98A2B3;   /* meta·label */
  --v5-accent:        #1A6FD4;   /* 스카이블루 — 포커스·강조에만 절제해서 */

  --v5-radius-sm: 8px;    /* controls */
  --v5-radius-md: 10px;   /* cards */
  --v5-radius-lg: 12px;   /* panels */

  --v5-space-1: 4px;   --v5-space-2: 8px;   --v5-space-3: 12px;
  --v5-space-4: 16px;  --v5-space-5: 20px;  --v5-space-6: 24px;
  --v5-space-8: 32px;  --v5-space-10: 40px; --v5-space-14: 56px;

  --v5-shadow-subtle: 0 1px 2px rgba(16, 24, 40, .05);

  /* §34 — type scale. 강조를 전부 bold 로 처리하지 않는다(§35) */
  --v5-font-xs:  .78rem;   /* meta·helper */
  --v5-font-sm:  .86rem;   /* 보조문구 */
  --v5-font-md:  .95rem;   /* 본문 */
  --v5-font-lg:  1.06rem;  /* 카드 제목 */
  --v5-font-xl:  1.24rem;  /* 질문 제목 */
  --v5-font-2xl: 1.5rem;   /* 섹션 제목 */

  /* V17 §2 — 100~240ms · translateY 최대 6px · scale 금지 */
  --v5-ease: cubic-bezier(.22, 1, .36, 1);
  --v5-t-instant: 100ms;
  --v5-t-fast: 140ms;
  --v5-t-base: 190ms;
  --v5-t-slow: 240ms;
  --v5-t-mid: 190ms;          /* 구 이름 호환 — 값만 V17 기준으로 내렸다 */
  --v5-enter-y: 10px;      /* V23 §7 — question enter translateY */
}

@keyframes v5FadeUp { from { opacity: 0; transform: translateY(var(--v5-enter-y)); } to { opacity: 1; transform: none; } }
/* 내용만 조용히 교체될 때(§15) — 위치는 그대로 두고 투명도만 살짝 */
@keyframes v5Soft   { from { opacity: .75; } to { opacity: 1; } }
@keyframes v5Fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes v5Shimmer { from { transform: translateX(-60%); } to { transform: translateX(260%); } }

/* ── 영역 등장 — 서명이 바뀐 영역에만 붙는다 ── */
/* V21 §18 — 구간별 duration 은 --v5-motion-* 하나에서만 온다 */
[data-anim].is-entering { animation: v5FadeUp var(--v5-motion-question) var(--v5-ease) both; }
[data-anim="summary"].is-entering,
[data-anim="service"].is-entering { animation: v5Fade var(--v5-motion-select) var(--v5-ease) both; }
[data-anim="results"].is-entering { animation: v5FadeUp var(--v5-motion-result) var(--v5-ease) both; }
[data-anim="usecase"].is-entering,
[data-anim="questions"].is-entering { animation: v5FadeUp var(--v5-motion-question) var(--v5-ease) both; }

/* V22 §21 — 추천 카드는 개별로 등장하지 않는다(stagger 폐지).
   추천 section 자체가 한 덩어리로 등장한다 — recommendation stage 가 맡는다. */

/* ── 카드 반응 ── */
.v5-card, .v5-result-card {
  /* transform 은 트랜지션 대상에서 뺀다 — 선택만으로 카드가 움직이면 안 된다(§4) */
  /* V23 §15 — 선택 상태는 select 토큰(160ms) 하나를 따른다 */
  transition: border-color var(--v5-motion-select) var(--v5-ease),
              background-color var(--v5-motion-select) var(--v5-ease),
              color var(--v5-motion-select) var(--v5-ease);
}
/* V17 §17 — hover lift·글로우·강한 그림자 금지. 색과 테두리로만 반응한다.
   선택해도 카드의 위치·크기가 변하지 않아야 한다(§4). */
.v5-card:hover, .v5-result-card:hover { border-color: var(--graphite, #181918); }
.v5-card:active { background-color: var(--soft-white, #FAFAF8); transition-duration: var(--v5-t-instant); }

/* 선택 배지는 조용히 들어온다 */
.v5-badge--sel { animation: v5Fade var(--v5-t-fast) var(--v5-ease) both; }

/* ── 선택이 옮겨갈 때: 하단 상세가 즉시 갈리지 않고 흐려졌다 다시 든다 ── */
/* §15 — 소재를 바꿔도 상세패널 전체를 다시 띄우지 않는다. 내용만 v5Soft 로 교체된다. */

/* ── 칩·버튼 ── */
/* V23 §15 — 선택 상태는 select 토큰 하나를 따른다. scale/translate 없음. */
.opt-btn, .opt-card, .btn {
  transition: border-color var(--v5-motion-select) var(--v5-ease),
              background-color var(--v5-motion-select) var(--v5-ease),
              color var(--v5-motion-select) var(--v5-ease),
              box-shadow var(--v5-motion-select) var(--v5-ease);
}
.opt-btn:active, .opt-card:active, .btn:active { transition-duration: 130ms; }

/* ── 상태 배지: 깜빡이지 않고 색만 흐르게 ── */
.rv3-badge, .v5-badge {
  transition: background-color var(--v5-t-mid) var(--v5-ease),
              color var(--v5-t-mid) var(--v5-ease),
              border-color var(--v5-t-mid) var(--v5-ease);
}

/* ── 로딩: 얇은 shimmer + 문구. 화면을 막지 않는다 ── */
.v5-loading {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px; padding: 10px 0;
  animation: v5Fade var(--v5-t-fast) var(--v5-ease) both;
}
.v5-loading__bar {
  position: relative; flex: 0 0 84px; height: 3px; border-radius: 2px;
  background: var(--hairline, #D7D4CC); overflow: hidden;
}
.v5-loading__bar::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 40%;
  background: var(--graphite, #181918); border-radius: 2px;
  animation: v5Shimmer 1.6s var(--v5-ease) infinite;
}
.v5-loading__t { font-size: .86rem; color: var(--muted, #6F6E68); }

/* 가격(§24)·추천(§21)·교차안내는 V22 에서 고정 노드/stage 가 직접 다룬다.
   [data-anim] 등장 규칙을 따로 두지 않는다 — 같은 구간이 두 번 움직이는 것을 막기 위해서다. */

/* ── 파일첨부 세부폼: 갑자기 나타나지 않는다 ──
   V22 §25 — 옛 --v5-t-mid(190ms) 대신 구간 토큰을 쓴다. INSPECT 에서 함께 느려진다. */
[data-anim="designsub"].is-entering {
  animation: v5FadeUp var(--v5-motion-designsub) var(--v5-ease) both;
}

/* ── 터치 기기: 손가락으로 고를 수 있는 크기를 확보한다(V11 §10) ── */
@media (max-width: 640px) {
  .v5-result-card__hit { min-height: 44px; }
}

/* ── 터치 기기: hover 리프트를 쓰지 않는다(선택감은 배경·보더로 충분) ── */
@media (hover: none) {
  .v5-card:hover { transform: none; box-shadow: none; }
  .v5-result-card:hover { box-shadow: none; }
}

/* ── 접근성: 모션을 줄이면 기능은 그대로 두고 효과만 뺀다 ── */
@media (prefers-reduced-motion: reduce) {
  [data-anim].is-entering,
  .v5-badge--sel,
  .v5-loading { animation: v5Fade 1ms linear both !important; }
  .v5-card, .v5-result-card, .opt-btn, .opt-card, .btn,
  .rv3-badge, .v5-badge, .v5-detail { transition-duration: 1ms !important; }
  .v5-card:hover, .v5-card:active { transform: none !important; }
  .v5-loading__bar::after { animation: none !important; width: 100%; }
  html { scroll-behavior: auto !important; }
}

/* ══════════════════════════════════════════════════════════
   카드 문구 가운데 정렬 (사장님 지시 2026-08-05)
     · 고르는 카드는 내용을 카드 한가운데에 둔다.
     · 여러 줄 목록(강점·주의·세부형)은 읽기 쉽도록 줄맞춤은 왼쪽으로 두되
       블록 자체를 가운데에 놓는다.
   ══════════════════════════════════════════════════════════ */
/* ⚠️ V18 §1·§14 로 방침이 바뀌었다.
   이전(V12)에는 카드 안 문구를 전부 가운데로 맞췄는데, 두 줄 이상 읽어야 하는 문단이
   가운데 정렬되면 읽기 어렵고 시작선이 흔들려 보인다. 이제 **본문은 좌측정렬**이고
   가운데 정렬은 아주 짧은 한 줄 제목·빈 상태에만 남긴다. */
.v5-card {
  display: flex; flex-direction: column;
  align-items: stretch; justify-content: center; text-align: left;
}
.v5-card__t, .v5-card__d { text-align: left; width: 100%; }
/* 짧은 한 줄 선택지(칩)는 가운데가 자연스럽다 — 여기까지만 허용 */
.opt-btn, .opt-card { text-align: center; justify-content: center; }
.opt-btn__label { text-align: center; }

/* 질문 제목은 좌측 — 아래 선택지들과 시작선을 맞춘다 */
.v5-step__t { text-align: left; }

.v5-result-card { text-align: left; }
.v5-result-card__hit { justify-content: flex-start; }
.v5-result-card__reason, .v5-result-card__diff { text-align: left; }
.v5-result-card__good, .v5-result-card__warn, .v5-result-card__vars ul {
  display: block; text-align: left; margin-left: 0; margin-right: 0;
}
.v5-result-card__vars { text-align: left; }
.v5-result-card .rv3-spec { justify-content: flex-start; }
.v5-result-card .rv3-note-sm { text-align: left; }

/* 금액표·요약처럼 좌우로 읽는 표는 가운데 정렬하지 않는다 */
.v5-price > div { text-align: left; }

/* ── 다른 소재 직접 고르기 ── */
.v5-other { margin-top: 14px; text-align: center; }
.v5-other__toggle {
  border: 1px solid var(--hairline, #D7D4CC); background: var(--white, #fff);
  border-radius: 999px; padding: 9px 18px; font-size: .86rem; cursor: pointer;
  min-height: 44px; transition: border-color var(--v5-t-fast) var(--v5-ease),
                                background-color var(--v5-t-fast) var(--v5-ease);
}
.v5-other__toggle:hover { border-color: var(--graphite, #181918); background: var(--soft-white, #FAFAF8); }
.v5-other__list {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px;
}
.v5-other__list .opt-btn { flex: 0 1 auto; }

/* ── 용도별 후가공 추천 ── */
.v5-finish { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line, #E5E3DC); }
.v5-finish__g { margin-top: 10px; text-align: center; }
.v5-finish__k {
  display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .02em;
  border-radius: 999px; padding: 3px 10px; border: 1px solid var(--hairline, #D7D4CC);
}
.v5-finish__k--req { background: var(--graphite, #181918); color: #fff; border-color: var(--graphite, #181918); }
.v5-finish__k--rec { background: var(--soft-white, #FAFAF8); }
.v5-finish__k--opt { color: var(--muted, #6F6E68); }
.v5-finish ul { display: inline-block; text-align: left; margin: 6px auto 0; padding-left: 18px; }
.v5-finish li { font-size: .86rem; line-height: 1.7; word-break: keep-all; }
.v5-finish li b { font-weight: 600; }
.v5-finish li span { color: var(--muted, #6F6E68); margin-left: 6px; }
@media (max-width: 480px) {
  .v5-finish li span { display: block; margin-left: 0; font-size: .82rem; }
}

/* ══════════════════════════════════════════════════════════
   V13 — 추천 결과 그리드 · 상세패널 · 옵션 grid · sticky · 모바일 바
   ══════════════════════════════════════════════════════════ */

/* ── 추천 카드 배치 — 개수만큼 같은 폭으로 한 줄(V27 §1~§3·§8) ──────
   grid class 는 렌더된 추천 **개수**로만 정한다(소재명 하드코딩 금지 · §9).
   모바일 우선 1열에서 시작해 폭이 생기면 열을 늘린다. */
.v5-result-grid { display: grid; gap: 12px; align-items: stretch;
  grid-template-columns: minmax(0, 1fr); }
/* 추천이 하나뿐이면 폭 전체를 쓰지 않는다 — 너무 긴 카드가 된다(§3) */
.v5-result-grid--1 { grid-template-columns: minmax(0, 720px); }
@media (min-width: 768px) {
  /* 768~1179: 2개는 2열 유지, 3개도 2열까지만 — 글자를 찌그러뜨리지 않는다(§8) */
  .v5-result-grid--2, .v5-result-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  .v5-result-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* §5·§6 — 세로 배치는 통일, CTA 는 카드 바닥에. 내용은 좌측정렬이다(중앙정렬 회귀 금지). */
.v5-result-grid .v5-result-card {
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  gap: 8px; margin-bottom: 0; height: 100%;
}
.v5-result-card__tags { margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
.v5-result-card__tags li {
  font-size: .78rem; color: var(--muted, #6F6E68);
  border: 1px solid var(--hairline, #D7D4CC); border-radius: 999px; padding: 3px 10px;
  word-break: keep-all;
}
/* 배지·CTA 는 늘어나지 않는다 — 왼쪽에 붙는다(§6) */
.v5-result-grid .v5-result-card__rank { align-self: flex-start; }
.v5-result-card__pick { margin-top: auto; align-self: flex-start; min-height: 44px; min-width: 130px; }

/* §3 — 상세·옵션(좌) + 주문요약(우) 2단 */
.v5-flow { margin-top: 20px; }
.v5-flow--aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 1080px) {
  .v5-flow--aside { grid-template-columns: minmax(0, 1fr) 300px; }
}
.v5-flow__main { min-width: 0; }

/* §8 — 선택 소재 상세패널 */
.v5-detail-panel { border: 1px solid var(--line, #E5E3DC); border-radius: 12px;
  padding: 18px 20px; background: var(--soft-white, #FAFAF8); }
.v5-detail-panel__why { font-size: .95rem; font-weight: 600; line-height: 1.65;
  word-break: keep-all; text-align: center; }
.v5-detail-facts { margin: 14px 0 0; }
.v5-detail-row { display: flex; gap: 12px; padding: 6px 0;
  border-bottom: 1px solid var(--line, #E5E3DC); font-size: .87rem; }
.v5-detail-row dt { flex: 0 0 108px; color: var(--muted, #6F6E68); }
.v5-detail-row dd { margin: 0; min-width: 0; }
.v5-detail-list { margin-top: 12px; text-align: center; }
.v5-detail-list ul { display: inline-block; text-align: left; margin: 6px auto 0; padding-left: 18px; }
.v5-detail-list li { font-size: .86rem; line-height: 1.7; word-break: keep-all; }
.v5-finish__t { text-align: center; font-size: .9rem; font-weight: 700; margin-top: 16px; }

/* §9 — 소재 변경 dropdown */
/* V16 — 소재 변경도 다른 옵션과 같은 폭·정렬을 쓴다(§12 통일).
   가운데 정렬·340px 제한은 옵션열 안에서 혼자 튀어 보여 걷어냈다. */
.v5-mat-select { min-height: 44px; }

/* §10 — 옵션 grid: PC 2열 */
.v5-opt-grid { display: grid; grid-template-columns: 1fr; gap: 14px 22px; margin-top: 10px; }
@media (min-width: 768px) { .v5-opt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v5-opt-cell { min-width: 0; }
.v5-opt-cell > .v5-opt-row__l { display: block; margin-bottom: 6px; }

/* §13 — 가격 상태 */
.v5-price-state { font-size: .88rem; color: var(--muted, #6F6E68); text-align: center; margin: 10px 0 0; }

/* §14 — PC 우측 sticky 주문요약 */
.v5-aside { min-width: 0; }
@media (min-width: 1080px) {
  .v5-aside__card { position: sticky; top: 84px; }
}
.v5-aside__card { border: 1px solid var(--line, #E5E3DC); border-radius: 12px;
  padding: 16px 18px; background: var(--white, #fff); }
.v5-aside__t { font-weight: 700; font-size: .95rem; text-align: center; }
.v5-aside__rows { margin: 12px 0 0; }
.v5-aside__rows > div { display: flex; justify-content: space-between; gap: 10px;
  font-size: .86rem; padding: 4px 0; }
.v5-aside__rows dt { color: var(--muted, #6F6E68); flex: 0 0 auto; }
.v5-aside__rows dd { margin: 0; text-align: right; min-width: 0; word-break: keep-all; }
.v5-aside__price { margin: 10px 0 0; border-top: 1px solid var(--line, #E5E3DC); padding-top: 8px; }
.v5-aside__price > div { display: flex; justify-content: space-between; font-size: .88rem; padding: 3px 0; }
.v5-aside__price dd { margin: 0; font-variant-numeric: tabular-nums; }
.v5-aside__total dt, .v5-aside__total dd { font-weight: 700; font-size: 1rem; }
.v5-aside__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.v5-aside__cta .btn { min-height: 46px; }
.v5-aside__reset { display: block; margin: 12px auto 0; background: none; border: 0;
  color: var(--muted, #6F6E68); font-size: .8rem; text-decoration: underline; cursor: pointer; }

/* §15 — 모바일 하단 sticky CTA (PC 에서는 숨김) */
.v5-mbar { display: none; }
@media (max-width: 1079px) {
  .v5-mbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--white, #fff); border-top: 1px solid var(--line, #E5E3DC);
    box-shadow: 0 -6px 18px rgba(16, 24, 40, .07);
  }
  .v5-mbar__p { font-weight: 700; font-size: .92rem; margin-right: auto;
    font-variant-numeric: tabular-nums; word-break: keep-all; }
  .v5-mbar .btn { min-height: 44px; }
  /* 바에 가리지 않도록 본문 하단 여백 */
  #recoV5App { padding-bottom: 84px; }
}

/* §16 — 상담형 조건 입력 */
.v5-consult .rec-input { width: 100%; min-height: 44px; }
.v5-consult { max-width: 720px; margin: 0 auto; }

/* 질문 게이트 안내(§2.3) */
.v5-gate-note { text-align: center; }

/* reduced motion — 신규 요소 포함 */
@media (prefers-reduced-motion: reduce) {
  .v5-mbar { box-shadow: none; }
}

/* 택배차 예상 견적(V13 §16) — V5 톤으로 */
.v5-truck-est { margin-top: 16px; border: 1px solid var(--line, #E5E3DC); border-radius: 12px;
  padding: 16px 18px; background: var(--soft-white, #FAFAF8); }
.v5-truck-est__t { font-weight: 700; font-size: .92rem; text-align: center; margin-bottom: 6px; }

/* ══════════════════════════════════════════════════════════════
   택배차광고 전용 견적문의(V14) — 좌 입력 / 우 sticky 견적·문의
   다른 서비스 문의폼(.form-wrap)은 이 규칙을 타지 않는다.
   ══════════════════════════════════════════════════════════════ */
.tq__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1080px) {
  /* 좌 약 63% / 우 약 37% (§7) */
  .tq__grid { grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); gap: 32px; }
}
.tq__main { min-width: 0; }
.tq__aside { min-width: 0; }
.tq__h { font-size: 1.05rem; font-weight: 700; margin: 0 0 14px; }
.tq__h--card { text-align: center; margin-bottom: 10px; }
.tq__sub { font-size: .95rem; font-weight: 700; margin: 18px 0 4px; }
.tq__hint { font-size: .82rem; color: var(--muted, #6F6E68); margin: 0 0 8px; }

/* ── 좌측 입력 2열(§15) ── */
.tq-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 16px; }
@media (min-width: 768px) { .tq-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tq-field { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tq-field--full { grid-column: 1 / -1; }
.tq-field > label { font-size: .88rem; font-weight: 600; }
.tq-field input[type="text"], .tq-field input[type="tel"], .tq-field input[type="email"],
.tq-field input[type="number"], .tq-field select, .tq-field textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line, #E5E3DC);
  border-radius: 8px; background: #fff; font: inherit; color: inherit;
}
.tq-field textarea { min-height: 84px; resize: vertical; }
.tq-field input:focus-visible, .tq-field select:focus-visible, .tq-field textarea:focus-visible {
  outline: 2px solid var(--brand, #8A6A3B); outline-offset: 1px;
}
.tq-field .is-invalid { border-color: #B3261E; }
.tq-err { margin: 0; font-size: .8rem; color: #B3261E; }
.tq-num { position: relative; }
.tq-num input { padding-right: 34px; }
.tq-num__u { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: .85rem; color: var(--muted, #6F6E68); pointer-events: none; }

/* ── 우측 패널(§8 sticky) ── */
.tq__card { border: 1px solid var(--line, #E5E3DC); border-radius: 12px; padding: 18px;
  background: var(--soft-white, #FAFAF8); }
@media (min-width: 1080px) {
  .tq__card { position: sticky; top: 84px; max-height: calc(100vh - 108px); overflow-y: auto; }
}
.tq__cta { width: 100%; min-height: 50px; margin-top: 14px; }
.tq__contact { margin: 10px 0 0; text-align: center; }

/* ── 예상 견적(§9) ── */
.tq-est { border: 1px solid var(--line, #E5E3DC); border-radius: 10px; padding: 14px; background: #fff; }
.tq-est__head { margin: 0 0 10px; font-weight: 700; font-size: .95rem; text-align: center; }
.tq-est__badge { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 999px;
  background: var(--soft-white, #FAFAF8); border: 1px solid var(--line, #E5E3DC);
  font-size: .74rem; font-weight: 600; color: var(--muted, #6F6E68); vertical-align: middle; }
.tq-est__rows { margin: 0; }
.tq-est__rows > div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0;
  font-size: .88rem; }
.tq-est__rows dt { color: var(--muted, #6F6E68); flex: 0 0 auto; }
.tq-est__rows dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; word-break: keep-all; }
.tq-est__total { margin-top: 6px; border-top: 1px solid var(--line, #E5E3DC); padding-top: 9px !important; }
.tq-est__total dt, .tq-est__total dd { font-weight: 700; font-size: 1rem; }
.tq-est__vat { display: block; font-size: .74rem; font-weight: 500; color: var(--muted, #6F6E68); }
.tq-est__note { margin: 10px 0 0; font-size: .78rem; color: var(--muted, #6F6E68); text-align: center; }
.tq-est__empty { margin: 0; font-size: .86rem; color: var(--muted, #6F6E68); text-align: center; }

/* ── 문의내용 미리보기(§11 — 직접 수정 불가) ── */
.tq-preview { margin: 0 0 4px; padding: 12px; border: 1px solid var(--line, #E5E3DC);
  border-radius: 8px; background: #fff; font: inherit; font-size: .82rem; line-height: 1.65;
  white-space: pre-wrap; word-break: break-word; max-height: 240px; overflow-y: auto; }
.tq-files { list-style: none; margin: 8px 0 0; padding: 0; font-size: .82rem; }
.tq-files li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; }
.tq-files span { color: var(--muted, #6F6E68); }

/* ── 모바일 하단 바(§14) ── */
.tq-mbar { display: none; }
@media (max-width: 1079px) {
  .tq { padding-bottom: 76px; }
  .tq-mbar[hidden] { display: none; }
  .tq-mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 1px solid var(--line, #E5E3DC);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .06); }
  .tq-mbar__p { margin: 0; margin-right: auto; font-weight: 700; font-size: .92rem;
    font-variant-numeric: tabular-nums; }
  .tq-mbar .btn { min-height: 46px; padding-inline: 20px; }
}

/* ── 등장(§19 · 180~250ms, 값이 바뀔 때 한 번만) ── */
@keyframes tqFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tq-est.is-fresh, .tq-preview.is-fresh { animation: tqFade 200ms cubic-bezier(.2, .8, .2, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .tq-est.is-fresh, .tq-preview.is-fresh { animation: none; }
  .tq-mbar { box-shadow: none; }
}

/* ══════════════════════════════════════════════════════════════
   소재 텍스처 샘플 + 4배 돋보기(V15)
   등록된 실물 사진이 있을 때만 .v5-detail-cols--tex 가 붙는다.
   ══════════════════════════════════════════════════════════════ */
.v5-detail-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 20px;
  grid-template-areas: "facts" "tex" "rest"; }
.v5-detail-cols__facts { grid-area: facts; min-width: 0; }
.v5-detail-cols__rest  { grid-area: rest;  min-width: 0; }
.v5-tex { grid-area: tex; min-width: 0; }
@media (min-width: 900px) {
  /* PC: 왼쪽 설명 / 오른쪽 상단 텍스처(§1.2).
     ≥1080px 에서는 우측 주문요약(300px)이 이미 폭을 가져가 상세패널이 좁아진다.
     텍스처 열을 비율로 두어 설명 문단이 눌리지 않게 한다(§7). */
  .v5-detail-cols--tex { grid-template-columns: minmax(0, 1fr) clamp(180px, 30%, 260px);
    grid-template-areas: "facts tex" "rest tex"; }
}

.v5-tex { margin: 4px 0 14px; }
.v5-tex__t { margin: 0 0 8px; font-size: .9rem; font-weight: 700; }
.v5-tex__fig { display: block; position: relative; width: 100%; padding: 0; margin: 0;
  border: 1px solid var(--line, #E5E3DC); border-radius: 10px; overflow: hidden;
  background: var(--soft-white, #FAFAF8); cursor: zoom-in; line-height: 0; }
.v5-tex__fig:focus-visible { outline: 2px solid var(--brand, #8A6A3B); outline-offset: 2px; }
.v5-tex__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* 렌즈는 썸네일 폭에 비례한다 — 고정 120px 이면 좁은 열에서 썸네일을 거의 덮는다 */
.v5-f--sub, .v5-f__msg { animation: v5FadeUp var(--v5-t-fast) var(--v5-ease) both; }
.v5-tex__lens { position: absolute; width: clamp(78px, 46%, 120px); aspect-ratio: 1; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .28);
  background-repeat: no-repeat; pointer-events: none;
  opacity: 0; transition: opacity var(--v5-t-fast) linear; }
.v5-tex__fig.is-lens { cursor: crosshair; }
.v5-tex__fig.is-lens .v5-tex__lens { opacity: 1; }
.v5-tex__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.v5-tex__tab { padding: 5px 10px; border: 1px solid var(--line, #E5E3DC); border-radius: 999px;
  background: #fff; font-size: .78rem; cursor: pointer; }
.v5-tex__tab.is-on { border-color: var(--brand, #8A6A3B); font-weight: 700; }
.v5-tex__hint { margin: 8px 0 0; font-size: .78rem; color: var(--muted, #6F6E68); }
.v5-tex__note { margin: 4px 0 0; font-size: .72rem; line-height: 1.6; color: var(--muted, #6F6E68); }

/* ── 확대 모달(§5) ── */
body.v5-noscroll { overflow: hidden; }
.v5-texmodal[hidden] { display: none; }
.v5-texmodal { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column;
  background: rgba(20, 19, 17, .93); animation: tqFade 180ms ease both; }
.v5-texmodal__bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  color: #fff; padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
.v5-texmodal__cap { margin-right: auto; font-size: .9rem; font-weight: 600; }
.v5-texmodal__close { padding: 8px 14px; min-height: 40px; border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 8px; background: transparent; color: #fff; font: inherit; cursor: pointer; }
.v5-texmodal__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.v5-texmodal__stage { flex: 1; overflow: hidden; display: flex; align-items: center;
  justify-content: center; touch-action: none; }
.v5-texmodal__stage img { max-width: 100%; max-height: 100%; object-fit: contain;
  transform-origin: center center; will-change: transform; user-select: none; -webkit-user-drag: none; }
.v5-texmodal__hint { margin: 0; padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  text-align: center; color: rgba(255, 255, 255, .72); font-size: .78rem; }
@media (prefers-reduced-motion: reduce) {
  .v5-texmodal { animation: none; }
  .v5-tex__lens { transition: none; }
}

/* ══════════════════════════════════════════════════════════════
   V16 — V5 주문 영역 3열 구조 · 옵션 UI 통일 · sticky 주문요약
   기존 컬러/보더 방향 유지. 새 팔레트를 만들지 않는다.
   ══════════════════════════════════════════════════════════════ */

/* ── 콘텐츠 폭(§2) — V5 화면에만 적용한다 ── */
.container--v5 { max-width: 1440px; }
.rec--v5 { max-width: none; }

/* ── 단계 이동 바(§4·§6) ──
   V27 §16 — shell 높이를 버튼 높이에 맞춰 못박는다. 버튼 상태가 바뀌어도
   nav 가 커졌다 작아졌다 하지 않는다(V24 persistent nav shell 유지). */
.v5-nav { display: flex; align-items: center; flex-wrap: nowrap; gap: 10px;
  min-height: 48px; margin-bottom: 14px; }
/* V24 §8 — 가운데는 고정 제목이다. 첫 화면부터 같은 높이를 차지한다. */
.v5-nav__title {
  flex: 1 1 auto; min-width: 0; text-align: center;
  font-size: .84rem; letter-spacing: .04em; color: var(--muted, #6F6E68);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ── 상단 조작부(V25 §2 → V27 §11~§19) ─────────────────────────────
   V25 에서 36px pill 을 44px 버튼으로 키웠지만, 실제 화면에서는 여전히
   배경과 대비가 약해 "버튼"으로 인지되지 않았다(V27 §11).
   크기만이 아니라 **면(surface)·대비·무게**를 함께 올린다.

   §15 — 이전 = graphite filled secondary / 처음부터 다시 = white outlined tertiary.
   기본 CTA(.btn--solid, 56px · padding 32px)보다는 확실히 작게 둔다(§14 끝줄). */
.v5-nav__back, .v5-nav__reset {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; min-width: 44px; padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--v5-radius-sm, 8px);
  font: inherit; line-height: 1.2; white-space: nowrap; cursor: pointer;
  transition: background-color 180ms var(--v5-ease),
              border-color 180ms var(--v5-ease),
              color 180ms var(--v5-ease); }
/* 가장 자주 찾는 동작 — 즉시 눈에 들어와야 한다(§12·§15) */
.v5-nav__back {
  background: var(--v5-text, #181918);
  border-color: var(--v5-text, #181918);
  color: var(--v5-surface, #fff);
  font-size: .9375rem; font-weight: 600; }
.v5-nav__back:hover { background: #1D2939; border-color: #1D2939; }
/* 보이되 실수로 누르게 만들지는 않는다 — 한 단계 약한 outlined tertiary(§13·§15) */
.v5-nav__reset {
  background: var(--v5-surface, #fff);
  border-color: var(--v5-border-strong, #C9C4B8);
  color: var(--v5-text, #181918);
  font-size: .90625rem; font-weight: 600; }
.v5-nav__reset:hover {
  border-color: var(--v5-text, #181918); background: var(--v5-surface-muted, #FAF9F6); }
.v5-nav__back:focus-visible, .v5-nav__reset:focus-visible {
  outline: 2px solid var(--v5-accent, #8A6A3B); outline-offset: 2px; }
/* 비활성이어도 자리는 그대로 차지한다 — nav 높이가 변하면 안 된다(§16·V24 §15) */
.v5-nav__back[disabled] { opacity: .4; cursor: default; }
.v5-nav__back[disabled]:hover { background: var(--v5-text, #181918); border-color: var(--v5-text, #181918); }
/* 질문 단계 안의 '이전' 은 상단 버튼만큼 무겁게 둘 필요가 없다 — 같은 크기, 약한 면 */
.v5-nav__back--inline {
  margin-top: 10px;
  background: var(--v5-surface, #fff);
  border-color: var(--v5-border-strong, #C9C4B8);
  color: var(--v5-text, #181918); }
.v5-nav__back--inline:hover { background: var(--v5-surface-muted, #FAF9F6); border-color: var(--v5-text, #181918); }
/* §19 — 좁은 화면에서 두 버튼이 겹치거나 줄바꿈되지 않게 가운데 라벨을 접는다.
   nav 높이는 버튼이 정하므로 라벨을 숨겨도 shell 높이는 그대로다(§16·§19 끝줄). */
@media (max-width: 480px) {
  .v5-nav__title { display: none; }
  .v5-nav { justify-content: space-between; }
  .v5-nav__back, .v5-nav__reset { padding: 12px 16px; }
}

/* ── 주문 작업 영역 3열(§1·§22) ── */
.v5-order { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 20px; }
.v5-order__read, .v5-order__opts, .v5-order__rail { min-width: 0; }
@media (min-width: 1024px) {
  /* 중형: 설명 + 옵션 2열, 주문요약은 아래로 */
  .v5-order--3 { grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr); gap: 20px; }
  .v5-order--3 .v5-order__rail { grid-column: 1 / -1; }
  .v5-order--2 { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr); }
}
@media (min-width: 1280px) {
  /* 대형: 설명 40% · 옵션 32% · 주문요약 rail 300px (§2 권장 비율) */
  .v5-order--3 { grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.9fr) 300px; gap: 22px; }
  .v5-order--3 .v5-order__rail { grid-column: auto; }
}

/* ── [V25 §11·§12·§16] 배너 전용 2영역 ──────────────────────────────
   배너는 고를 것이 몇 개 없는 고정규격 상품이라 설명·옵션·견적을 세 열로 벌리면
   빈 열이 생긴다. 설명과 **실제 수정 가능한 옵션**을 한 열로 합치고,
   예상견적/주문요약만 따로 둔다.

   ⚠️ 노드를 옮기지 않는다 — read/opts/rail 은 V22 고정 노드 그대로이고
      grid 배치만 바꾼다(§20 stable shell 유지). */
.v5-order--merged { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .v5-order--merged { grid-template-columns: minmax(0, 1fr) minmax(280px, .42fr); gap: 22px; }
  .v5-order--merged .v5-order__read { grid-column: 1; grid-row: 1; }
  .v5-order--merged .v5-order__opts { grid-column: 1; grid-row: 2; }
  .v5-order--merged .v5-order__rail { grid-column: 2; grid-row: 1 / span 2; }
  /* 두 칸이 한 패널로 읽히게 — 설명 아래 경계를 지우고 옵션이 이어지게 둔다(§13 중첩 카드 금지) */
  .v5-order--merged .v5-order__read { margin-bottom: -20px; }
  .v5-order--merged .v5-order__read .v5-detail-panel {
    border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; margin-bottom: 0; }
  .v5-order--merged .v5-option-panel--merged {
    border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; margin-top: 0; }
  .v5-order--merged .v5-aside__card { position: sticky; top: 84px; }
  /* 오른쪽 rail 이 가격을 담당하므로 가운데 가격 패널은 접는다(중복 제거) */
  .v5-order--merged .v5-order__opts .v5-price-panel { display: none; }
}

/* sticky 가 실제로 붙게 하는 부분 — 감사에서 rail 높이가 카드와 같아 이동 여유가 0 이었다.
   rail 을 행 높이만큼 늘려 카드가 그 안에서 이동할 공간을 만든다. */
.v5-order__rail { align-self: stretch; }
@media (min-width: 1280px) {
  .v5-order--3 .v5-aside__card { position: sticky; top: 84px; }
  /* 오른쪽 rail 이 가격을 담당하므로 가운데 가격 패널은 접는다(중복 제거) */
  .v5-order--3 .v5-order__opts .v5-price-panel { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   [V28 §3~§11·§25] 야외배너 제품 비교 행
   ⚠️ V27 추천 grid(.v5-result-grid / .v5-result-card)를 **재사용하지 않는다**.
      이 블록의 선택자는 .v5-banner-product-* / .v5-bprow__* 로 완전히 분리되어 있다.
   ══════════════════════════════════════════════════════════════ */
.v5-order--rows { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  /* §4 — MAIN 68~72% · 주문요약 최소 360px */
  .v5-order--rows { grid-template-columns: minmax(0, 1fr) minmax(360px, .46fr); gap: 22px; }
  .v5-order--rows .v5-order__read { display: none; }         /* 단일 제품 상세는 쓰지 않는다 */
  .v5-order--rows .v5-order__opts { grid-column: 1; grid-row: 1; }
  .v5-order--rows .v5-order__rail { grid-column: 2; grid-row: 1; }
  .v5-order--rows .v5-aside__card { position: sticky; top: 84px; }
  .v5-order--rows .v5-order__opts .v5-price-panel { display: none; }
}

.v5-banner-product-list { display: flex; flex-direction: column; gap: var(--v5-space-3); }
/* §20 — 세 행은 항상 펼쳐져 있다. accordion 으로 감추지 않는다. */
.v5-banner-product-row {
  display: grid; gap: var(--v5-space-4);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--v5-space-4);
  background: var(--v5-surface); border: 1px solid var(--v5-border);
  border-radius: var(--v5-radius-md); text-align: left; cursor: pointer;
  /* §16·§24 — 선택 표시는 면·테두리만 바꾼다. 높이·위치는 변하지 않는다. */
  transition: background-color 190ms var(--v5-ease), border-color 190ms var(--v5-ease);
}
@media (min-width: 768px) {
  /* §5 — 이미지 20~25% · 설명/규격 45~50% · 수량/디자인 25~30% */
  .v5-banner-product-row { grid-template-columns: 22% minmax(0, 1fr) 27%; align-items: start; }
}
.v5-banner-product-row:hover { border-color: var(--v5-border-strong); }
.v5-banner-product-row.is-active {
  background: var(--v5-surface-sel); border-color: var(--v5-border-sel);
  box-shadow: inset 0 0 0 1px var(--v5-border-sel);
}
.v5-banner-product-row:focus-visible { outline: 2px solid var(--v5-accent); outline-offset: 2px; }

/* §6 — 세 행의 이미지 슬롯 크기는 같다. 실물 사진이 없으면 placeholder 만 둔다. */
.v5-bprow__sample {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; min-height: 96px;
  background: var(--v5-surface-muted); border: 1px solid var(--v5-border);
  border-radius: var(--v5-radius-sm); overflow: hidden;
}
.v5-bprow__sample img { width: 100%; height: 100%; object-fit: cover; }
/* §23 — 모바일에서 한 열로 쌓이면 4:3 슬롯이 화면을 지배한다. 높이를 못박는다. */
@media (max-width: 767px) {
  .v5-bprow__sample { aspect-ratio: auto; height: 112px; }
}
.v5-bprow__sample-ph { font-size: var(--v5-font-xs); color: var(--v5-text-subtle);
  text-align: center; line-height: 1.5; padding: var(--v5-space-2); }

.v5-bprow__main { min-width: 0; display: flex; flex-direction: column; gap: var(--v5-space-2); }
.v5-bprow__name { margin: 0; font-size: var(--v5-font-lg); font-weight: 600; color: var(--v5-text); }
.v5-bprow__sub { margin-left: var(--v5-space-2); font-size: var(--v5-font-xs);
  font-weight: 400; color: var(--v5-text-subtle); }
.v5-bprow__feats { margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 6px; }
.v5-bprow__feats li { font-size: var(--v5-font-xs); color: var(--v5-text-muted);
  border: 1px solid var(--v5-border); border-radius: 999px; padding: 3px 10px; word-break: keep-all; }
.v5-bprow__field { display: flex; flex-direction: column; gap: 6px; }
.v5-bprow__label { font-size: var(--v5-font-xs); font-weight: 600; color: var(--v5-text-muted); }
.v5-bprow__fixed { margin: 0; font-size: var(--v5-font-md); font-weight: 600;
  color: var(--v5-text); font-variant-numeric: tabular-nums; }
.v5-bprow__sizes, .v5-bprow__sides { display: flex; flex-wrap: wrap; gap: 6px; }
.v5-bprow__sizes .opt-btn { font-variant-numeric: tabular-nums; }
.v5-bprow__quote { margin: 0; font-size: var(--v5-font-sm); color: var(--v5-text-muted);
  word-break: keep-all; }
.v5-bprow__side { min-width: 0; display: flex; flex-direction: column; gap: var(--v5-space-3); }
.v5-bprow__side .v5-step { max-width: 150px; }
/* 활성 행이 아닌 컨트롤은 비활성이다 — 행을 먼저 고르면 살아난다(§16).
   높이는 그대로라 선택이 바뀌어도 레이아웃이 흔들리지 않는다. */
.v5-banner-product-row [disabled] { opacity: .5; cursor: inherit; }

/* ── [V28 §14] 주문요약 확대 ────────────────────────────────── */
.v5-order--rows .v5-aside__t { font-size: 1.18rem; font-weight: 600; }
.v5-order--rows .v5-aside__rows dt { font-size: .84rem; color: var(--v5-text-muted); }
.v5-order--rows .v5-aside__rows dd { font-size: .94rem; font-weight: 500; color: var(--v5-text); }
.v5-order--rows .v5-aside__total dd { font-size: 1.45rem; font-weight: 700; }
.v5-aside__extra { margin: var(--v5-space-4) 0 0; padding-top: var(--v5-space-4);
  border-top: 1px solid var(--v5-border); }
.v5-aside__note textarea { width: 100%; }
.v5-file-box--compact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v5-space-2); }
.v5-quote-state { margin: 0; font-size: 1.12rem; font-weight: 700; color: var(--v5-text); }

/* V25 §3 — 카드 3개 아래의 보조 경로. 카드처럼 무게를 주지 않는다. */
.v5-choice-alt {
  display: inline-flex; align-items: baseline; gap: var(--v5-space-2, 8px); flex-wrap: wrap;
  margin-top: var(--v5-space-4, 16px); padding: 10px 2px; min-height: 44px;
  border: 0; background: none; font: inherit; font-size: var(--v5-font-sm, .86rem);
  color: var(--v5-text-muted, #6F6E68); text-align: left; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--v5-border-strong, #C9C4B8);
}
.v5-choice-alt:hover { color: var(--v5-text, #181918); text-decoration-color: currentColor; }
.v5-choice-alt:focus-visible { outline: 2px solid var(--v5-accent, #8A6A3B); outline-offset: 2px; }
.v5-choice-alt__d { font-size: var(--v5-font-xs, .78rem); color: var(--v5-text-subtle, #9A968C);
  text-decoration: none; }
/* V25 §5 — 패널 안 거치 방식 세그먼트 */
.v5-opts--variant { display: flex; flex-wrap: wrap; gap: var(--v5-space-2, 8px); }

/* ── 통일 옵션 필드(§12) ── */
.v5-f { display: block; margin: 0 0 12px; }
.v5-f__l { display: block; margin-bottom: 5px; font-size: .84rem; font-weight: 600;
  color: var(--graphite, #2B2A27); }
.v5-f__c { width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid var(--line, #E5E3DC);
  border-radius: 8px; background: #fff; font: inherit; font-size: .9rem; color: inherit; }
.v5-f__c--num { max-width: 160px; text-align: right; }
.v5-f__c:focus-visible { outline: 2px solid var(--brand, #8A6A3B); outline-offset: 1px; }
.v5-f__h { margin: 5px 0 0; font-size: .76rem; color: var(--muted, #6F6E68); }
.v5-f__u { font-size: .82rem; color: var(--muted, #6F6E68); }
.v5-f__msg { margin: -6px 0 12px; }
.v5-f--sub { margin-top: -6px; }

/* V25 §6 — 고정규격은 "고를 수 없는 입력칸"이 아니라 확정된 정보다.
   disabled input 처럼 흐리게 만들지 않는다 — 본문과 같은 밀도로 또렷하게 둔다. */
.v5-f__fixed {
  margin: 0; min-height: 44px; display: flex; align-items: center;
  padding: 9px 12px; border-radius: var(--v5-radius-sm, 8px);
  background: var(--v5-surface-muted, #FAF9F6);
  border: 1px solid var(--v5-border, #E5E2DA);
  font-size: .9rem; font-weight: 600; color: var(--v5-text, #181918);
  font-variant-numeric: tabular-nums;
}
/* 허용 규격이 여럿일 때 — 임의 수치 입력 없이 목록에서만 고른다(§6) */
.v5-opts--size { display: flex; flex-wrap: wrap; gap: var(--v5-space-2, 8px); }
.v5-opts--size .opt-btn { font-variant-numeric: tabular-nums; }

/* 규격 — 별도 카드가 아니라 옵션폼 안의 필드 그룹(§14) */
.v5-size2 { display: flex; align-items: center; gap: 8px; }
.v5-size2 .v5-f__c--num { max-width: none; flex: 1 1 0; }
.v5-size2__x { color: var(--muted, #6F6E68); }

/* 수량 stepper(§18) — 높이·글꼴을 select 와 맞춘다 */
.v5-step { display: flex; align-items: stretch; max-width: 180px; }
.v5-step__b { width: 44px; min-height: 44px; border: 1px solid var(--line, #E5E3DC);
  background: #fff; font: inherit; font-size: 1.05rem; cursor: pointer; color: inherit; }
.v5-step__b:first-child { border-radius: 8px 0 0 8px; }
.v5-step__b:last-child { border-radius: 0 8px 8px 0; }
.v5-step__b:hover { border-color: var(--brand, #8A6A3B); }
.v5-step__b:focus-visible { outline: 2px solid var(--brand, #8A6A3B); outline-offset: 1px; }
.v5-step__i { width: 100%; min-width: 0; min-height: 44px; padding: 9px 6px; text-align: center;
  border: 1px solid var(--line, #E5E3DC); border-inline: 0; background: #fff; font: inherit;
  font-size: .9rem; color: inherit; }
.v5-step__i:focus-visible { outline: 2px solid var(--brand, #8A6A3B); outline-offset: -2px; }

/* 옵션 패널 자체는 카드 하나로 — 옵션마다 카드를 만들지 않는다(§32) */
.v5-option-panel, .v5-design-panel { border: 1px solid var(--line, #E5E3DC); border-radius: 12px;
  padding: 16px 18px; background: #fff; margin-bottom: 14px; }

/* ── 소재 설명 머리(§8) ── */
.v5-detail__name { margin: 0; font-size: 1.08rem; font-weight: 700; }
.v5-detail__rank { margin: 2px 0 0; font-size: .78rem; color: var(--muted, #6F6E68); }
.v5-detail__lead { margin: 8px 0 0; font-size: .9rem; line-height: 1.75; }

/* ── 텍스처 슬롯 placeholder(§10) — 실제 사진과 같은 비율·크기 ── */
.v5-tex__ph { display: flex; align-items: center; justify-content: center; width: 100%;
  aspect-ratio: 4 / 3; border: 1px dashed var(--line, #E5E3DC); border-radius: 10px;
  background: var(--soft-white, #FAFAF8); }
.v5-tex__ph span { font-size: .8rem; color: var(--muted, #6F6E68); }


/* ══════════════════════════════════════════════════════════════
   V20 1차 — 표면·본문 폭·계층 (V18 통합)
   ══════════════════════════════════════════════════════════════ */
/* 입력창만 각져 있어 카드와 따로 놀았다 — 컨트롤 radius 토큰으로 통일(§38) */
#v5-free, .rec-input, .rec-input--area { border-radius: var(--v5-radius-sm); }

/* V18 §3 — 본문은 읽기 좋은 줄길이로 제한한다(카드가 좁으면 100%) */
.v5-detail__lead, .v5-detail-list li, .v5-tex__note, .v5-gate-note {
  max-width: 68ch;
}
/* V18 §4 — 한글 본문은 1.4 이하로 압축하지 않는다 */
.v5-detail__lead { line-height: 1.75; }
.v5-detail-facts dd, .v5-detail-list li { line-height: 1.65; }

/* V18 §11 · V20 §12 — 질문 제목이 가장 잘 보이게, 단계 라벨은 작고 muted */
.v5-step__t { font-size: var(--v5-font-xl); font-weight: 600; color: var(--v5-text);
  line-height: 1.35; margin-bottom: var(--v5-space-4); }

/* V20 §8·§10 — 선택 tile: 제목/설명 위계를 분명히, 여백을 넉넉히 */
.v5-card { padding: var(--v5-space-4) var(--v5-space-4); gap: var(--v5-space-1);
  border-color: var(--v5-border); border-radius: var(--v5-radius-md); }
.v5-card__t { font-size: var(--v5-font-lg); font-weight: 600; line-height: 1.35; }
.v5-card__d { font-size: var(--v5-font-sm); color: var(--v5-text-muted); line-height: 1.55; }
.v5-card:hover { border-color: var(--v5-border-strong); }
/* §8·§52 — 선택은 검은 테두리 한 줄이 아니라 면·테두리·대비로 표현한다 */
.v5-card.is-selected {
  background: var(--v5-surface-sel);
  border-color: var(--v5-border-sel);
  box-shadow: inset 0 0 0 1px var(--v5-border-sel);
}
.v5-card.is-selected .v5-card__t { font-weight: 700; }

/* ══════════════════════════════════════════════════════════════
   V19 카드 밀도 · V20 Step System — 모바일 스크롤 절감
   ══════════════════════════════════════════════════════════════ */

/* ── 단계 머리(§6·§12): 번호는 작고 muted, 질문이 가장 잘 보인다 ── */

/* ── 완료 단계 한 줄 요약(§7 · V19 §17) ── */
.v5-steprow { display: flex; align-items: center; gap: var(--v5-space-3);
  min-height: 52px; padding: var(--v5-space-2) var(--v5-space-4);
  margin-bottom: var(--v5-space-2);
  background: var(--v5-surface-muted); border: 1px solid var(--v5-border);
  border-radius: var(--v5-radius-md); }
.v5-steprow__n { font-size: var(--v5-font-xs); font-weight: 600; color: var(--v5-text-subtle);
  font-variant-numeric: tabular-nums; }
.v5-steprow__l { font-size: var(--v5-font-sm); color: var(--v5-text-muted); flex: 0 0 auto; }
.v5-steprow__v { font-size: var(--v5-font-md); font-weight: 600; color: var(--v5-text);
  margin-right: auto; min-width: 0; word-break: keep-all; }
.v5-steprow__b { flex: 0 0 auto; min-height: 36px; padding: 6px 12px;
  border: 1px solid var(--v5-border); border-radius: 999px; background: var(--v5-surface);
  font: inherit; font-size: var(--v5-font-xs); color: var(--v5-text-muted); cursor: pointer; }
.v5-steprow__b:hover { border-color: var(--v5-border-strong); color: var(--v5-text); }
.v5-steprow__b:focus-visible { outline: 2px solid var(--v5-accent); outline-offset: 2px; }

/* ── 카드 밀도(§2·§3·§6) — 모바일에서 1열 강제를 폐기한다 ── */
@media (max-width: 767px) {
  /* 이전 규칙(모든 선택 카드 1열)을 밀도 클래스가 대체한다 */
  .v5-service-grid.v5-grid--medium,
  .v5-usecase-grid.v5-grid--medium { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .v5-service-grid.v5-grid--compact,
  .v5-usecase-grid.v5-grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .v5-service-grid.v5-grid--detailed,
  .v5-usecase-grid.v5-grid--detailed { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* 360px 이하에서는 compact 도 2열로 내린다(§6 · §33) */
  @media (max-width: 374px) {
    .v5-service-grid.v5-grid--compact,
    .v5-usecase-grid.v5-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  /* V19 §13·§36 — 선택카드 보조문구는 최대 2줄. PC 설명을 그대로 넣지 않는다.
     (상세패널 원문은 그대로 — V18 §24 의 truncation 금지는 상세 영역 규칙이다) */
  .v5-service-grid .v5-card__d, .v5-usecase-grid .v5-card__d {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; }
  .v5-grid--compact .v5-card__d { display: none; }

  /* 같은 행 높이를 맞추고 최소 터치영역을 지킨다(§14·§15) */
  .v5-service-grid .v5-card, .v5-usecase-grid .v5-card { min-height: 56px; }
  .v5-grid--compact .v5-card { min-height: 48px; padding: var(--v5-space-3); justify-content: center; }
  .v5-grid--compact .v5-card__t { font-size: var(--v5-font-md); }
}

/* ── 추천 결과 위계 ──────────────────────────────────────────────
   V20 §15·§16 은 1순위를 full-width 로 깔고 2·3순위를 2열에 두었다.
   그 결과 추천이 2개일 때 **2순위 오른쪽에 빈 반쪽**이 남아 깨진 grid 로 보였다(V27 §0).

   V27 §1~§4 — 순위의 위계는 **폭이 아니라 카드 안에서** 표현한다.
   폭·개수 배치는 위쪽 `.v5-result-grid--N` 규칙 하나가 맡는다(중복 정의 제거). */
.v5-result-card { margin-bottom: 0; }
.v5-result-card__name { font-size: var(--v5-font-lg); font-weight: 600; }
/* 1순위는 같은 크기의 카드 안에서 badge·테두리·글자 무게로만 구분한다(§4·§29) */
.v5-result-card__rank--top {
  background: var(--v5-text, #181918); color: var(--v5-surface, #fff); font-weight: 600; }
.v5-result-card.is-selected .v5-result-card__name { font-weight: 700; }

/* ══════════════════════════════════════════════════════════════
   V20 3차 — 표면 분화 · 정보표 · 마감 · 경로 · 첫 화면
   (V18 §8~§13 통합. 여기 규칙은 .rec--v5 안에서만 쓴다 — 공용 UI 무변경)
   ══════════════════════════════════════════════════════════════ */

/* ── §5 첫 화면: 입력창 + 버튼을 한 상자로 ──────────────────────
   .rv3-intake 자체는 V3/V4 와 공유하므로 모양은 .v5-free-text 안에서만 덮어쓴다. */
.v5-free-text.rv3-intake { border: 0; background: transparent; padding: 0; margin-bottom: var(--v5-space-8); }
.v5-free-text .rv3-intake__l { font-size: var(--v5-font-xl); font-weight: 600; margin-bottom: var(--v5-space-1); }
.v5-intake__d { margin: 0 0 var(--v5-space-3); font-size: var(--v5-font-md);
  color: var(--v5-text-muted); line-height: 1.65; max-width: 68ch; }
.v5-free-text .rv3-intake__row {
  display: block; position: relative; padding: var(--v5-space-3) var(--v5-space-4) var(--v5-space-2);
  background: var(--v5-surface); border: 1px solid var(--v5-border);
  border-radius: var(--v5-radius-lg); transition: border-color var(--v5-t-fast) var(--v5-ease);
}
.v5-free-text .rv3-intake__row:focus-within { border-color: var(--v5-border-strong); }
.v5-free-text .rec-input--area {
  display: block; width: 100%; height: auto; min-height: 52px; padding: 0; margin: 0;
  border: 0; background: transparent; border-radius: 0; resize: vertical;
  font-size: var(--v5-font-md); line-height: 1.65;
}
.v5-free-text .rec-input--area:focus, .v5-free-text .rec-input--area:focus-visible { outline: 0; }
.v5-free-text .rec-input--area::placeholder { color: var(--v5-text-subtle); }
/* 버튼은 상자 안 오른쪽 아래 — 입력의 일부처럼 보이게 */
.v5-free-text .rv3-intake__row .btn {
  display: block; margin-left: auto; min-height: 40px; padding: 0 var(--v5-space-5);
}
.v5-free-text .rv3-intake__ex { align-items: center; gap: var(--v5-space-2); margin-top: var(--v5-space-3); }
.v5-intake__exl { font-size: var(--v5-font-xs); color: var(--v5-text-subtle); flex: 0 0 auto; }
@media (max-width: 700px) {
  /* 공용 규칙이 세로 스택으로 바꿔 놓는 것을 되돌린다 — 상자 구조는 폭과 무관하다 */
  .v5-free-text .rv3-intake__row { display: block; }
  .v5-free-text .rv3-intake__row .btn { width: auto; }
}
/* V25 §17 — 모바일에서는 입력창 **밖**의 예시를 내보내지 않는다.
   같은 예시가 placeholder 로 이미 입력창 안에 있어 첫 화면이 두 번 설명하는 꼴이었다.
   placeholder 는 그대로 두므로 안내는 사라지지 않는다(§21).
   ⚠️ .v5-free-text 안으로만 한정한다 — .rv3-intake__ex 는 V3/V4 와 공유하는 클래스다. */
@media (max-width: 767px) {
  .v5-free-text .rv3-intake__ex { display: none; }
}

/* ── §13 breadcrumb: pill 덩어리 → 한 줄 경로 ────────────────── */

/* ── §11 짧은 선택지는 버튼 그룹 모양 ─────────────────────────── */
.v5-usecase-grid.v5-grid--compact {
  display: flex; flex-wrap: wrap; gap: var(--v5-space-2);
}
.v5-card--chip {
  flex: 0 1 auto; min-height: 44px; min-width: 96px; padding: var(--v5-space-2) var(--v5-space-4);
  justify-content: center; align-items: center; border-radius: 999px;
}
.v5-card--chip .v5-card__t { font-size: var(--v5-font-md); text-align: center; }
@media (max-width: 767px) {
  /* 모바일 밀도 규칙이 grid 로 두던 compact 를 flex 로 통일한다 */
  .v5-usecase-grid.v5-grid--compact { display: flex; }
  .v5-card--chip { flex: 1 0 auto; }
}

/* ── §23 세 열의 표면을 다르게 ─────────────────────────────────
   설명 = 종이면(읽는 곳) · 옵션 = 열린 폼(조작하는 곳) · 요약 = 떠 있는 rail */

/* (1) 설명 열 — 얇은 선 + 종이 톤 */
.v5-detail-panel { background: var(--v5-surface-muted); border-color: var(--v5-border);
  border-radius: var(--v5-radius-lg); padding: var(--v5-space-5) var(--v5-space-5); }
.v5-detail-panel__why { text-align: left; }

/* (2) 옵션 열 — 카드를 걷어내고 폼만 남긴다(§24) */
.v5-order__opts .v5-option-panel,
.v5-order__opts .v5-design-panel {
  border: 0; border-radius: 0; background: transparent; padding: 0;
  margin: 0 0 var(--v5-space-6);
}
.v5-order__opts .v5-price-panel { margin-top: 0; }
/* 폼 섹션 제목 — 굵은 카드 제목이 아니라 얇은 구분선 하나로 */
.v5-sect { margin: 0 0 var(--v5-space-4); padding-bottom: var(--v5-space-2);
  font-size: var(--v5-font-lg); font-weight: 600; color: var(--v5-text);
  border-bottom: 1px solid var(--v5-border); }
.v5-order__opts .v5-f__c, .v5-order__opts .v5-step__i, .v5-order__opts .v5-step__b {
  min-height: 46px; border-color: var(--v5-border); border-radius: var(--v5-radius-sm);
}
.v5-order__opts .v5-f__c:focus-visible,
.v5-order__opts .v5-step__i:focus-visible { outline: 2px solid var(--v5-accent); outline-offset: 1px; }

/* (3) 주문요약 rail — 유일하게 살짝 떠 있는 면(§28·§29) */
.v5-aside__card { background: var(--v5-surface); border-color: var(--v5-border);
  border-radius: var(--v5-radius-lg); box-shadow: var(--v5-shadow-subtle);
  padding: var(--v5-space-5); }
.v5-aside__t { text-align: left; font-size: var(--v5-font-sm); font-weight: 600;
  letter-spacing: .02em; color: var(--v5-text-muted); }
.v5-aside__rows > div { padding: var(--v5-space-1) 0; }
/* 가격이 rail 안에서 가장 강한 요소 */
.v5-aside__price { border-top: 1px solid var(--v5-border); margin-top: var(--v5-space-3);
  padding-top: var(--v5-space-3); }
.v5-aside__total { margin-top: var(--v5-space-1); }
.v5-aside__total dt { color: var(--v5-text-muted) !important; font-weight: 600 !important;
  font-size: var(--v5-font-sm) !important; }
.v5-aside__total dd { font-size: var(--v5-font-xl) !important; font-weight: 700 !important;
  letter-spacing: -.01em; }

/* ── V18 §8 정보표: label 폭 고정 · value 시작점 통일 ─────────── */
.v5-detail-facts { margin-top: var(--v5-space-4); }
.v5-detail-row { display: grid; grid-template-columns: 116px minmax(0, 1fr);
  gap: 0 var(--v5-space-3); padding: var(--v5-space-2) 0;
  border-bottom: 1px solid var(--v5-border); font-size: var(--v5-font-sm); }
.v5-detail-row:last-child { border-bottom: 0; }
.v5-detail-row dt { color: var(--v5-text-muted); font-weight: 400; }
.v5-detail-row dd { color: var(--v5-text); font-weight: 500; }
@media (max-width: 420px) {
  .v5-detail-row { grid-template-columns: 96px minmax(0, 1fr); }
}

/* ── V20 §19 상세 안쪽은 소제목·여백으로만 나눈다 ─────────────── */
.v5-detail-list { margin-top: var(--v5-space-4); text-align: left; }
.v5-detail-list__t { margin: 0 0 var(--v5-space-1); font-size: var(--v5-font-sm);
  font-weight: 600; color: var(--v5-text-muted); }
.v5-detail-list ul { display: block; margin: 0; padding-left: 18px; }

/* ── V18 §10 compact notice ──────────────────────────────────── */
.v5-note { margin-top: var(--v5-space-4); padding: var(--v5-space-3) var(--v5-space-4);
  background: var(--v5-surface); border: 1px solid var(--v5-border);
  border-left: 2px solid var(--v5-accent); border-radius: var(--v5-radius-sm); }
.v5-note__t { display: block; font-size: var(--v5-font-xs); font-weight: 600;
  color: var(--v5-text-muted); margin-bottom: 2px; }
.v5-note__m { margin: 0; font-size: var(--v5-font-sm); line-height: 1.6; color: var(--v5-text); }

/* ── V20 §22 · V18 §12·§13 마감 옵션 ─────────────────────────── */
.v5-finish__t { text-align: left; margin: var(--v5-space-6) 0 0;
  font-size: var(--v5-font-lg); font-weight: 600; }
.v5-finish__s { margin: 2px 0 var(--v5-space-3); font-size: var(--v5-font-sm);
  color: var(--v5-text-muted); line-height: 1.6; }
.v5-fin__i { display: grid; grid-template-columns: 48px minmax(0, 1fr);
  gap: 0 var(--v5-space-3); padding: var(--v5-space-3) 0;
  border-top: 1px solid var(--v5-border); }
.v5-fin__i:first-child { border-top: 0; padding-top: 0; }
.v5-fin__b { font-size: var(--v5-font-xs); color: var(--v5-text-muted); line-height: 1.7; }
.v5-fin__b--req { color: var(--v5-text); font-weight: 600; }
.v5-fin__b--rec { color: var(--v5-accent); font-weight: 600; }
.v5-fin__c { min-width: 0; }
.v5-fin__n { display: block; font-size: var(--v5-font-md); font-weight: 600; line-height: 1.5; }
.v5-fin__w { display: block; margin-top: 1px; font-size: var(--v5-font-sm);
  color: var(--v5-text-muted); line-height: 1.6; max-width: 68ch; }

/* ── V18 §11 heading hierarchy 실측 보정 ──────────────────────
   소재명 17.28 / 섹션제목 16.96 로 거의 붙어 있어 위계가 읽히지 않았다.
   소재명 = 19.84/600(지시 18~22 semibold), 리드 본문 = 15.2/400(지시 14~16 regular).
   (__why 가 600 을 물려주고 있어 리드까지 굵어져 있던 것도 함께 푼다) */
.v5-detail__name { font-size: var(--v5-font-xl); font-weight: 600; line-height: 1.4; }
.v5-detail__lead { font-size: var(--v5-font-md); font-weight: 400; }

/* ══════════════════════════════════════════════════════════════
   V22 — Motion QA: NORMAL / INSPECT (개발 검수 전용)
     · 구간별 duration 을 한 곳에서 관리하고, INSPECT 에서만 크게 덮어쓴다.
     · 지금 값은 **최종 속도가 아니다** — 사장님이 눈으로 확인하기 위한 검수용이다.
   ══════════════════════════════════════════════════════════════ */
:root {
  /* V23 §17 — 실서비스용 최종 NORMAL 정본. 검수용 2~3초를 줄인 값이다. */
  --v5-motion-select:    190ms;
  --v5-motion-step:      240ms;
  --v5-motion-question:  430ms;
  --v5-motion-collapse:  360ms;
  --v5-motion-result:    620ms;
  --v5-motion-detail:    380ms;
  --v5-motion-price:     220ms;
  --v5-motion-designsub: 380ms;
}
/* §8 — 육안 검수용 과장값. **최종 모션 속도가 아니다**. data-motion-mode 는 JS 가 <html> 에 붙인다. */
[data-motion-mode="inspect"] {
  --v5-motion-select:    1500ms;
  --v5-motion-step:      1500ms;
  --v5-motion-question:  3000ms;
  --v5-motion-collapse:  2500ms;
  --v5-motion-result:    3000ms;
  --v5-motion-detail:    2000ms;
  --v5-motion-price:     2000ms;
  --v5-motion-designsub: 2000ms;
  /* 등장 이동거리도 눈에 보이게 키운다(§8: question 40px) */
  --v5-enter-y: 40px;
}
/* §8 이동거리 — result 48px */
[data-motion-mode="inspect"] .v5-stage--result { --v5-stage-y: 48px; }
/* V22 §21 — 추천 결과 등장은 recommendation stage 가 한 덩어리로 처리한다.
   카드별 등장 규칙은 더 이상 존재하지 않는다(이동거리는 --v5-stage-y). */

/* §8 선택 상태 1500ms — 면·테두리·글자만. translate/scale 금지(V17 유지) */
[data-motion-mode="inspect"] .v5-card,
[data-motion-mode="inspect"] .opt-btn,
[data-motion-mode="inspect"] .opt-card {
  transition: border-color var(--v5-motion-select) var(--v5-ease),
              background-color var(--v5-motion-select) var(--v5-ease),
              box-shadow var(--v5-motion-select) var(--v5-ease),
              color var(--v5-motion-select) var(--v5-ease);
}
[data-motion-mode="inspect"] .v5-card__t { transition: font-weight var(--v5-motion-select) var(--v5-ease); }

/* §4 상세 refresh — 사라졌다 다시 들어오는 게 보이도록 한 번 내려갔다 올라온다 */

/* §8 — slow 모드에서는 부드러운 스크롤도 끈다.
   (전역 html{scroll-behavior:smooth} 은 그대로 두고 이 모드에서만 무력화) */
[data-motion-mode="inspect"] { scroll-behavior: auto !important; }

/* §10 — 완료단계가 접히며 위쪽 높이가 줄 때 브라우저가 화면을 보정하지 않게 한다.
   body 전체가 아니라 추천 흐름 컨테이너에만 건다. */
#recoV5App { overflow-anchor: none; }

/* §15 의 `.v5-hold` 우회는 V22 §22 에서 제거했다 —
   응답 대기 중에는 빈 자리를 만들지 않고 **지금 보이는 단계를 그대로 둔다**. */

/* §7 — DEV 모션 오버레이. slow 모드에서 JS 가 만들 때만 존재한다. */
.v5-mdbg {
  position: fixed; right: 12px; bottom: 12px; z-index: 9999;
  display: flex; flex-direction: column; gap: 2px;
  max-width: 260px; padding: 10px 12px;
  background: rgba(24, 25, 24, .92); color: #F2F0EA;
  border-radius: 8px; font-size: 11px; line-height: 1.5;
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.v5-mdbg b { font-size: 11px; letter-spacing: .06em; color: #E4C78A; }

/* §20 — reduced motion 은 slow debug 보다 우선한다(접근성 정책 유지) */
@media (prefers-reduced-motion: reduce) {
  [data-motion-mode="inspect"] {
    --v5-motion-select: 1ms;   --v5-motion-question: 1ms; --v5-motion-collapse: 1ms;
    --v5-motion-step: 1ms;
    --v5-motion-result: 1ms;   --v5-motion-detail: 1ms;   --v5-motion-price: 1ms;
    --v5-motion-designsub: 1ms;
    --v5-enter-y: 0px;
  }
  [data-motion-mode="inspect"] .v5-stage--result { --v5-stage-y: 0px; }
  .v5-mdbg { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   V22 — Stable Motion Architecture (§15·§19)
     · region shell 은 초기 mount 이후 통째로 갈리지 않는다.
     · 단계 전환은 나가는 layer 와 들어오는 layer 가 **공존**한 상태에서 일어난다.
   ══════════════════════════════════════════════════════════════ */

/* region 은 흐름만 나눈다 — 여백·배경을 새로 만들지 않는다(V20 디자인 무변경) */
.v5-region { display: block; }

/* §19·§21·§23 — 공용 stage. 구간별 duration/이동거리는 modifier 가 정한다. */
.v5-stage {
  position: relative;
  --v5-stage-dur: var(--v5-motion-question);
  --v5-stage-y: var(--v5-enter-y);
}
.v5-stage--result { --v5-stage-dur: var(--v5-motion-result); --v5-stage-y: 12px; }
.v5-stage--detail { --v5-stage-dur: var(--v5-motion-detail); }
/* V23 §3·§4·§12 — ENTER 는 부모 높이를 늘려 내용을 드러내지 않는다.
   stage 에 overflow/height 를 걸지 않으므로 들어오는 내용은 **처음부터 전부** 보인다.
   나가는 내용만 흐름에서 빼서 겹치게 한다(빈 프레임 0 — V22 §22 계약 유지). */
.v5-stage > .v5-stage__layer--out {
  position: absolute; left: 0; top: 0; right: 0; z-index: 0;
  pointer-events: none;
  animation: v5StageOut var(--v5-stage-dur) ease-out both;
}
.v5-stage > .v5-stage__layer--in {
  position: relative; z-index: 1;
  animation: v5StageIn var(--v5-stage-dur) var(--v5-ease) both;
}
/* §13 — 상세는 크게 움직이지 않는다. 자리 그대로 흐려졌다 또렷해진다. */
.v5-stage--detail { --v5-stage-y: 0px; }
.v5-stage--detail > .v5-stage__layer--in {
  animation: v5DetailIn var(--v5-stage-dur) ease-out both;
}
@keyframes v5DetailIn { from { opacity: .15; } to { opacity: 1; } }
@keyframes v5StageIn {
  from { opacity: 0; transform: translateY(var(--v5-stage-y)); }
  to   { opacity: 1; transform: none; }
}
/* 나가는 쪽은 이동 없이 사라진다 — 이동시키면 잘린 것처럼 보인다 */
@keyframes v5StageOut { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .v5-stage > .v5-stage__layer--in,
  .v5-stage > .v5-stage__layer--out { animation: none; }
}

/* §20 — 완료 단계 접힘. 실제 높이 사이를 이동하므로 화면이 튀지 않는다. */
.v5-steps { display: flow-root; }
/* V23 §9 — 높이를 잘라가며 접지 않는다. layout 은 즉시 최종(아래 region 은 FLIP 으로 이동),
   요약 줄만 조용히 들어온다. "접히는 것"보다 "완료상태로 정리되는" 느낌을 목표로 한다. */
.v5-steprow.is-revealing {
  animation: v5StepReveal var(--v5-motion-collapse) ease-out both;
}
@keyframes v5StepReveal { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .v5-steprow.is-revealing { animation: none; }
}

/* §23 — 상세 shell. 리스트는 고정된 채 안쪽 내용만 교체된다. */
.v5-order__read .v5-stage--detail { display: block; }

/* V23 §4 — 주문 영역도 높이를 잘라가며 열고 닫지 않는다.
   나가는 쪽은 흐름에서 빼서(absolute) layout 을 즉시 최종화한 뒤 사라진다. */
.v5-region--purchase { position: relative; }
.v5-order.is-boxing-in {
  animation: v5StageIn var(--v5-motion-result) var(--v5-ease) both;
}
.v5-order.is-boxing-out {
  position: absolute; left: 0; right: 0; top: 0; z-index: 0;
  pointer-events: none;
  animation: v5StageOut var(--v5-motion-result) ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .v5-order.is-boxing-in, .v5-order.is-boxing-out { animation: none; }
}

/* §24 — 금액 갱신. 노드는 그대로 두고 숫자만 바뀐다. count-up 은 쓰지 않는다.
   한 번 흐려졌다 또렷해지는 것으로만 "값이 바뀌었다" 를 알린다. */
[data-stable="price-node"].is-priced {
  animation: v5PriceSwap var(--v5-motion-price) ease-out both;
}
@keyframes v5PriceSwap { from { opacity: .35; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  [data-stable="price-node"].is-priced { animation: none; }
}

/* ══════════════════════════════════════════════════════════════
   V22 §7·§9·§13 — Motion QA 조작부 · INSPECT 표시 (개발 검수 전용)
     운영에서는 JS 가 이 노드를 만들지 않는다(CFG.motion_debug = IS_DEV).
   ══════════════════════════════════════════════════════════════ */

/* §7 — 현재 mode 가 항상 보이고, 클릭 한 번으로 바뀐다(URL 을 기억할 필요가 없다) */
.v5-qa {
  position: fixed; left: 12px; bottom: 12px; z-index: 9999;
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px;
  background: rgba(24, 25, 24, .92); color: #F2F0EA;
  border-radius: 999px; font-size: 11px; line-height: 1; letter-spacing: .06em;
}
.v5-qa__t { color: #E4C78A; font-weight: 700; }
.v5-qa__b {
  padding: 5px 10px; border: 1px solid rgba(242, 240, 234, .35);
  border-radius: 999px; background: transparent; color: inherit;
  font: inherit; letter-spacing: inherit; cursor: pointer;
}
.v5-qa__b:hover { border-color: #E4C78A; }
.v5-qa__b.is-on { background: #E4C78A; border-color: #E4C78A; color: #1A1A18; font-weight: 700; }
.v5-qa__b:focus-visible { outline: 2px solid #E4C78A; outline-offset: 2px; }

/* V30 §40 — Analytics QA. Motion QA 바로 위에 두되 색을 달리해 혼동하지 않게 한다.
   개발환경에서만 만들어진다(운영 DOM 에 존재하지 않는다). */
.v5-aq {
  position: fixed; left: 12px; bottom: 48px; z-index: 9999;
  display: flex; align-items: baseline; gap: 8px; max-width: min(560px, calc(100vw - 24px));
  padding: 7px 10px;
  background: rgba(24, 25, 24, .92); color: #F2F0EA;
  border-radius: 8px; font-size: 11px; line-height: 1.4; letter-spacing: .04em;
}
.v5-aq__t { color: #8FD3C7; font-weight: 700; flex: 0 0 auto; }
.v5-aq__n { font-weight: 700; flex: 0 0 auto; }
.v5-aq__p { color: rgba(242, 240, 234, .72); min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* §9 — INSPECT 동안 실제로 움직이는 region 에 점선과 라벨을 붙인다.
   녹화에서 이 표시가 안 보이면 INSPECT 미작동으로 즉시 판정한다. */
[data-motion-mode="inspect"] .is-inspect {
  outline: 2px dashed #C0894A;
  outline-offset: 3px;
}
[data-motion-mode="inspect"] .is-inspect::after {
  content: attr(data-inspect);
  position: absolute; right: 0; top: -11px; z-index: 5;
  padding: 2px 7px;
  background: #C0894A; color: #1A1A18;
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  border-radius: 3px; white-space: nowrap; pointer-events: none;
}
[data-motion-mode="inspect"] .v5-stage.is-inspect,
[data-motion-mode="inspect"] .v5-steps.is-inspect,
[data-motion-mode="inspect"] [data-stable="price-node"].is-inspect { position: relative; }

/* §13 — 측정이 무효인 값 표시 */
.v5-mdbg__x { font-style: normal; color: #F2A6A6; font-weight: 700; }

/* ══════════════════════════════════════════════════════════════
   V24 §3~§6·§11 — Persistent Step Shell
     첫 화면부터 같은 shell 이 있고, 제품을 고르면 그 자리에서 상태만 바뀐다.
     CURRENT / COMPLETE 의 **높이가 같아야** 레이아웃이 흔들리지 않는다(§6).
   ══════════════════════════════════════════════════════════════ */

/* 두 상태가 같은 상자를 쓴다 — 높이를 결정하는 값은 상태별로 다르지 않다 */
.v5-step-shell {
  /* §6 — CURRENT / COMPLETE / EDITING 이 같은 높이를 갖는다.
     COMPLETE 는 변경 버튼(36) + padding(16) + border(2) = 54px 가 자연 높이다.
     CURRENT 는 버튼이 없어 더 낮아지므로 같은 값을 바닥으로 깔아 둔다. */
  min-height: 54px;
  transition: background-color var(--v5-motion-step) var(--v5-ease),
              border-color var(--v5-motion-step) var(--v5-ease),
              color var(--v5-motion-step) var(--v5-ease);
}

/* CURRENT — 지금 답할 단계. 면은 배경과 자연스럽게, 선은 약하게, 변경 버튼 없음(§5) */
.v5-step-shell[data-state="current"] {
  background: transparent;
  border-style: dashed;
  border-color: var(--v5-border);
}
.v5-step-shell[data-state="current"] > .v5-steprow__l {
  font-size: var(--v5-font-md); font-weight: 600; color: var(--v5-text);
}
.v5-step-shell[data-state="current"] > .v5-steprow__v,
.v5-step-shell[data-state="current"] > .v5-steprow__b { display: none; }

/* §6 — 어느 상태든 한 줄이다. 값이 길어도 줄바꿈으로 높이가 바뀌지 않게 한다. */
.v5-step-shell > .v5-steprow__l,
.v5-step-shell > .v5-steprow__v {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v5-step-shell[data-state="current"] > .v5-steprow__l { flex: 1 1 auto; min-width: 0; }

/* COMPLETE — V23 까지의 요약 줄 모양을 그대로 쓴다(§5) */
.v5-step-shell[data-state="complete"] { background: var(--v5-surface-muted); border-style: solid; }

/* §11 — 값이 들어올 때만 조용히. 이동 없음. */
.v5-step-shell.is-stepping > .v5-steprow__v {
  animation: v5Fade var(--v5-motion-step) ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .v5-step-shell { transition: none; }
  .v5-step-shell.is-stepping > .v5-steprow__v { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   V33 — 웹 예상견적서 preview + 인쇄
   화면에서는 A4 문서를 가운데 띄우고, 인쇄할 때는 문서만 남긴다.
   추천 화면(V22~V24 region/motion)에는 손대지 않는다 — 모달은 body 직속이다.
   ══════════════════════════════════════════════════════════════════════ */

/* 주문요약 안의 진입 버튼 — 주문 CTA 보다 약하게(§24).
   rail-cta(.v5-aside__cta)는 2열 grid 라 그냥 두면 한 칸만 차지한다. 한 줄을 통째로 쓴다. */
.v5-est-btn { grid-column: 1 / -1; flex: 1 0 100%; width: 100%; justify-content: center; }
.v5-est-row { margin-top: 12px; }

/* ── preview ───────────────────────────────────────────────────────── */
.v5-est[hidden] { display: none; }
.v5-est {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(17, 19, 22, .58);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px 16px; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.v5-estwrap { width: 100%; max-width: 860px; }
.v5-estwrap__in {
  background: #fff; color: #111;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
  border-radius: 4px; overflow: hidden;
}
.v5-estwrap__err { padding: 40px 28px; text-align: center; }
.v5-estwrap__err h1 { font-size: 1.15rem; margin: 0 0 12px; }
.v5-estwrap__err p { margin: 0 0 6px; }
.v5-estwrap__bar {
  position: sticky; bottom: 0;
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 14px 18px; background: #f6f7f8; border-top: 1px solid #e3e6ea;
}
.v5-estwrap__bar .btn { min-height: 44px; }         /* 터치 목표 44px(§50) */
html.v5-est-open { overflow: hidden; }

/* ── 문서 본문 — 인쇄물이지 카드 UI 가 아니다(§22) ─────────────────── */
.v5-estdoc {
  padding: 26px 30px 30px;
  font-size: 12px; line-height: 1.5; color: #111;
  background: #fff;
}
.v5-estdoc__top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; padding-bottom: 12px; border-bottom: 2px solid #111;
}
.v5-estdoc__brand .logo { font-size: 1.1rem; letter-spacing: -.02em; color: #111; }
.v5-estdoc__brand .logo b { font-weight: 800; }
.v5-estdoc__title { text-align: center; flex: 1; }
.v5-estdoc__title h1 {
  margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: .28em;
  text-indent: .28em; color: #111;
}
.v5-estdoc__title span { font-size: 10px; letter-spacing: .18em; color: #555; }
.v5-estdoc__date { font-size: 11px; color: #444; white-space: nowrap; }

.v5-estdoc__head { display: flex; gap: 18px; margin-top: 16px; align-items: flex-start; }
.v5-estdoc__to { flex: 1 1 46%; min-width: 0; }
.v5-estdoc__from { flex: 1 1 54%; min-width: 0; }
.v5-estdoc__torow { display: flex; align-items: baseline; gap: 6px; margin-bottom: 10px; }
.v5-estdoc__toin {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 15px; font-weight: 700;
  padding: 4px 6px; border: 0; border-bottom: 1px dashed #b8bec6; background: transparent; color: #111;
}
.v5-estdoc__toin:focus { outline: 2px solid #4a5568; outline-offset: 1px; }
.v5-estdoc__torow span { font-size: 13px; font-weight: 600; }

.v5-estdoc__meta, .v5-estdoc__sup, .v5-estdoc__deliv, .v5-estdoc__items {
  width: 100%; border-collapse: collapse; table-layout: fixed;
}
.v5-estdoc__meta th, .v5-estdoc__meta td,
.v5-estdoc__sup th, .v5-estdoc__sup td,
.v5-estdoc__deliv th, .v5-estdoc__deliv td,
.v5-estdoc__items th, .v5-estdoc__items td {
  border: 1px solid #c9ced6; padding: 5px 7px; font-size: 11px; word-break: break-word;
}
.v5-estdoc__meta th, .v5-estdoc__sup th, .v5-estdoc__deliv th {
  background: #f1f3f5; font-weight: 600; text-align: left; white-space: nowrap;
}
.v5-estdoc__meta th { width: 92px; }
.v5-estdoc__sup th { width: 62px; }
.v5-estdoc__amt { font-weight: 800; font-size: 13px; }
.v5-estdoc__say { margin: 16px 0 8px; font-size: 12px; font-weight: 600; }
.v5-estdoc__deliv { margin-bottom: 10px; }
.v5-estdoc__deliv th { width: 200px; }
.v5-estdoc__deliv th span { display: block; font-size: 8.5px; font-weight: 400; color: #667; letter-spacing: .04em; }

.v5-estdoc__items thead th {
  background: #eceff2; text-align: center; font-weight: 700; vertical-align: middle;
}
.v5-estdoc__items thead th span {
  display: block; font-size: 8px; font-weight: 400; color: #667; letter-spacing: .04em;
}
.v5-estdoc__items td.c, .v5-estdoc__items th.c { text-align: center; }
.v5-estdoc__items td.r, .v5-estdoc__items th.r { text-align: right; }
.v5-estdoc__items tfoot th { text-align: right; background: #f6f7f8; }
.v5-estdoc__items tfoot td { text-align: right; font-weight: 700; }
.v5-estdoc__sum th { background: #e6eaee; font-size: 12px; font-weight: 800; }
.v5-estdoc__sum td { font-size: 14px; font-weight: 800; }
/* 열 폭 — 숫자 가독성 우선 */
.v5-estdoc__items colgroup { display: table-column-group; }
.v5-estdoc__items thead th:nth-child(1) { width: 34px; }
.v5-estdoc__items thead th:nth-child(3) { width: 108px; }
.v5-estdoc__items thead th:nth-child(4) { width: 44px; }
.v5-estdoc__items thead th:nth-child(5) { width: 52px; }
.v5-estdoc__items thead th:nth-child(6) { width: 92px; }
.v5-estdoc__items thead th:nth-child(7) { width: 104px; }

.v5-estdoc__rem { margin-top: 14px; border: 1px solid #c9ced6; padding: 9px 11px; }
.v5-estdoc__remt { font-size: 11px; font-weight: 700; margin-bottom: 5px; }
.v5-estdoc__rem ul { margin: 0; padding-left: 15px; }
.v5-estdoc__rem li { font-size: 10.5px; line-height: 1.55; color: #333; }

@media (max-width: 767px) {
  .v5-est { padding: 0; }
  .v5-estwrap { max-width: none; }
  .v5-estwrap__in { border-radius: 0; min-height: 100vh; display: flex; flex-direction: column; }
  .v5-estdoc { padding: 18px 14px 22px; flex: 1 1 auto; }
  .v5-estdoc__head { flex-direction: column; gap: 12px; }
  .v5-estdoc__title h1 { font-size: 1.3rem; }
  /* 표는 문서 안에서만 가로 스크롤한다 — 페이지 자체는 넘치지 않는다(§50) */
  .v5-estdoc__items { display: block; overflow-x: auto; white-space: nowrap; }
  .v5-estwrap__bar { padding: 12px 14px; }
  .v5-estwrap__bar .btn { flex: 1 1 0; }
}

/* ── 인쇄 — 문서만 남긴다(§19·§20·§21) ─────────────────────────────── */
@media print {
  @page { size: A4 portrait; margin: 12mm 10mm; }

  /* 문서 밖 화면 UI 를 전부 감춘다: 헤더·내비·플로팅 CTA·개발 오버레이 */
  body > *:not(#v5-est) { display: none !important; }
  .consult, .quickbar, .v5-qa, .v5-aq, .v5-mbar, #consult, #quickBar { display: none !important; }

  html.v5-est-open { overflow: visible; }
  #v5-est {
    position: static !important; inset: auto !important;
    display: block !important; background: #fff !important;
    padding: 0 !important; overflow: visible !important;
  }
  .v5-estwrap { max-width: none !important; }
  .v5-estwrap__in { box-shadow: none !important; border-radius: 0 !important; }
  /* preview 조작 버튼은 인쇄물에 나오지 않는다(§56) */
  .v5-estwrap__bar { display: none !important; }

  .v5-estdoc { padding: 0 !important; font-size: 10.5pt; color: #000; }
  .v5-estdoc__toin { border-bottom: 0 !important; }      /* 점선은 출력에서 사라진다 */

  /* 행이 페이지 사이에서 잘리지 않게, 표 머리는 페이지마다 반복 */
  .v5-estdoc__items thead { display: table-header-group; }
  .v5-estdoc__items tfoot { display: table-footer-group; }
  .v5-estdoc__items tr, .v5-estdoc__rem, .v5-estdoc__head { break-inside: avoid; page-break-inside: avoid; }
  .v5-estdoc__items { display: table !important; white-space: normal !important; overflow: visible !important; }

  /* 배경색은 프린터에서 빠지기 쉬우므로 표 구분은 선으로 유지한다 */
  .v5-estdoc__items th, .v5-estdoc__items td,
  .v5-estdoc__meta th, .v5-estdoc__meta td,
  .v5-estdoc__sup th, .v5-estdoc__sup td,
  .v5-estdoc__deliv th, .v5-estdoc__deliv td { border-color: #000; }
}

/* ═══════════════════════════════════════════════════════════════
   [V35] 공개 콘텐츠 — 공지사항 · 시공사례 · 포트폴리오
   기존 pf-* 격자를 그대로 쓰고, 링크·요약·검색·쪽이동만 더한다.
   ═══════════════════════════════════════════════════════════════ */
.container--narrow { max-width: 760px; }

.pf-item__link { display: block; color: inherit; }
.pf-item__link:hover .pf-item__title { color: var(--bronze-text); }
.pf-item__thumb { width: 100%; height: auto; object-fit: cover; border-radius: 2px; }
.pf-item__thumb--none {
  display: block; aspect-ratio: 4/3; background: var(--paper-2, #f2f0ec);
  border: 1px solid var(--line, #e6e2db); border-radius: 2px;
}
.pf-item__desc { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--muted); }

.cms-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 28px; }
.cms-search__l { font-size: 13px; color: var(--muted); }
.cms-search__i {
  flex: 1 1 220px; min-width: 0; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--line, #e6e2db); border-radius: 2px; font-size: 15px; background: #fff;
}
.cms-search__clear { font-size: 13px; color: var(--muted); }
.cms-count { margin-bottom: 16px; font-size: 13px; color: var(--muted); }
.cms-empty { padding: 48px 0; text-align: center; color: var(--muted); font-size: 15px; }

.cms-pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 40px; }
.cms-pager__i {
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px; border: 1px solid var(--line, #e6e2db); border-radius: 2px;
  font-size: 14px; color: var(--muted);
}
.cms-pager__i.is-on { border-color: var(--graphite); color: var(--graphite); font-weight: var(--fw-med); }

.cms-article__meta { margin-top: 10px; font-size: 14px; color: var(--muted); }
.cms-article__hero { margin: 0 0 32px; }
.cms-article__hero img { width: 100%; height: auto; border-radius: 2px; }
.cms-article__hero figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); }

.cms-body { font-size: 16px; line-height: 1.85; color: var(--graphite); word-break: keep-all; }
.cms-body > * + * { margin-top: 1.1em; }
.cms-body h2 { margin-top: 1.8em; font-size: 21px; font-weight: var(--fw-heading); letter-spacing: -.01em; }
.cms-body h3 { margin-top: 1.5em; font-size: 18px; font-weight: var(--fw-heading); }
.cms-body ul, .cms-body ol { padding-left: 1.4em; }
.cms-body li + li { margin-top: .4em; }
.cms-body img { max-width: 100%; height: auto; border-radius: 2px; }
.cms-body a { color: var(--bronze-text); text-decoration: underline; text-underline-offset: 3px; }
.cms-body blockquote {
  margin-left: 0; padding: 4px 0 4px 16px; border-left: 2px solid var(--bronze, #b98b4e); color: var(--muted);
}
.cms-body table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cms-body th, .cms-body td { padding: 8px 10px; border: 1px solid var(--line, #e6e2db); text-align: left; }
.cms-body th { background: var(--paper-2, #f7f5f2); font-weight: var(--fw-med); }
.cms-body hr { border: 0; border-top: 1px solid var(--line, #e6e2db); }
/* 넓은 표는 본문을 밀어내지 않고 자기 안에서 가로 스크롤한다 */
.cms-body > table { display: block; overflow-x: auto; }

.cms-nb { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 48px; }
.cms-nb__i {
  display: block; padding: 14px 16px; border: 1px solid var(--line, #e6e2db); border-radius: 2px; color: inherit;
}
.cms-nb__i span { display: block; font-size: 12px; color: var(--muted); }
.cms-nb__i b { display: block; margin-top: 4px; font-size: 15px; font-weight: var(--fw-med); }
.cms-nb__i--next { text-align: right; }
.cms-back { margin-top: 40px; text-align: center; }

.cms-preview-bar {
  position: sticky; top: 0; z-index: 60; padding: 10px 16px;
  background: #2b2f36; color: #fff; font-size: 13.5px; text-align: center;
}

@media (max-width: 640px) {
  .cms-nb { grid-template-columns: minmax(0, 1fr); }
  .cms-nb__i--next { text-align: left; }
  .cms-body { font-size: 15.5px; }
}