/* ============================================================
   [V36F.1] 쇼핑몰 Visual System v2 — 상품 중심 인쇄 쇼핑몰.

   [V36G.1 R2 §9] 2026-08-27 — **화이트 + 스카이블루**로 바꿨다(사장님 지시).
   이전까지 "브라운 → 하늘색 변경 금지" 였던 제약은 이 지시로 해제됐다.

   방향
     · 색과 활력은 **실제 출력물·상품사진**이 담당한다. UI 는 절제한다.
     · 브랜드는 회사(tokens.css)와 같은 뿌리 — #111827 텍스트 · 스카이블루 강조 · 흰 바탕.
     · 상품이 화면을 지배한다. 이미지가 카드 높이의 절반 이상이다.
     · 섹션마다 표면을 바꿔 리듬을 만든다. 흰 배경 + 회색 박스 반복을 하지 않는다.

   층
     1 TOKENS   2 BASE   3 LAYOUT   4 HEADER/FOOTER   5 COMPONENTS
     6 PAGES    7 RESPONSIVE   8 TOUCH   9 PRINT

   ⚠️ 상품 사진이 0장이다. 자리표시자는 **브랜드 타이포 기반**이고,
      사진이 들어오면 레이아웃 변경 없이 그 자리에 들어간다(가짜 사진 0).
   ============================================================ */

/* [V36G.1 Gate2A] Pretendard 독립 로드 — 쇼핑몰은 회사 base.css 를 로드하지 않는다.
   font-family 는 이미 'Pretendard' 를 1순위로 선언하고 있었지만 이 파일을 불러올 소스가
   없어 방문자 PC 에 Pretendard 가 깔려 있지 않으면 fallback(맑은 고딕)으로만 보였다.
   회사가 쓰는 것과 **같은** 신뢰 소스를 그대로 재사용한다 — 새 CDN·새 패키지 도입 없음. */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* ══════════════════════════ 1. TOKENS ══════════════════════════ */
:root {
    /* ── 색 — 회사 tokens.css 와 같은 뿌리(White + Sky Blue) ── */
    --shop-ink:      #111827;   /* 제목·본문 (흰 위 17.74:1) */
    --shop-ink-2:    #344054;   /* (10.46:1) */
    --shop-ink-3:    #667085;   /* (4.97:1 — 본문 최소선) */
    /* ⚠️ 처음에 #98a2b3 을 넣었더니 흰 위 2.58:1 로 **옛 값(#8a8984, 3.50:1)보다 나빠졌다.**
       이 토큰은 위치표시 구분자·날짜·자리표시자 안내처럼 **작은 글자**에도 쓰인다.
       팔레트를 바꾸면서 읽기 쉬움을 떨어뜨리지 않게 한 단계 진하게 잡았다. */
    --shop-ink-4:    #77839a;   /* 장식용 (흰 위 3.82:1 — 본문에 쓰지 않는다) */
    --shop-line:     #e5eaf0;   /* hairline */
    --shop-line-2:   #f0f4f9;
    /* [V36G.1 Gate6R.3B] 입력 컨트롤 테두리 — hairline 보다 **한 단계 진하다.**
       레퍼런스 06 의 드롭다운 테두리를 실측하면 #cfcfcf 로, 카드 테두리(#e5e5e5)보다 진하다.
       [R2] 색은 스카이블루로 옮겼지만 **"입력칸 선이 카드 선보다 진하다" 는 관계는 그대로**다.
       우리는 카드도 입력칸도 --shop-line 한 가지라 입력칸이 바탕에 묻혀 있었다.
       ⚠️ [R2] 이제 **차가운 회색**이다 — 브랜드 뿌리(white + sky blue)를 따른다. */
    --shop-ctrl-line: #cdd9e6;
    --shop-bg:       #ffffff;   /* 상품이 놓이는 면은 흰색 */
    /* ⚠️ **순백으로 만들지 않는다.** 상품상세·로그인·회원가입·카테고리 Hero 는
          "바탕을 옅게 깔아야 흰 카드가 카드로 읽힌다" 는 실측 사고(Gate6R.3B) 위에 서 있다.
          옛 값 #f7f5f0 의 흰색 대비는 1.08 이었다 — 새 값도 **같은 1.08** 로 맞췄다.
          사장님이 적어 주신 #F7FBFF(1.04)를 여기 쓰면 그 사고가 그대로 재발한다.
          #F7FBFF 는 더 옅은 면 전용(`--shop-bg-tint`)으로 따로 둔다. */
    --shop-bg-soft:  #eef7ff;   /* sky surface — 섹션 교차 (흰 대비 1.08) */
    --shop-bg-warm:  #e4f0fd;   /* 한 단계 더 진한 면 (흰 대비 1.13 — 옛 #f2f0ea 와 동일) */
    --shop-bg-tint:  #f7fbff;   /* soft background — 사장님 지정값. 아주 옅은 띠 전용 */
    --shop-bg-dark:  #111827;
    /* ⚠️ 사장님이 적어 주신 #2F80ED 는 **흰 글자를 얹으면 3.87:1** 로 AA(4.5:1) 미달이다.
          채움 버튼·배지가 전부 흰 글자라 그대로 쓸 수 없다. 같은 family 에서 한 단계
          진하게 잡았다(4.92:1). 밝은 파랑이 필요한 장식 자리는 --shop-accent-lite 를 쓴다. */
    --shop-accent:   #1a6fd4;   /* primary blue — 흰 글자 4.92:1 ✅ */
    --shop-accent-ink: #175cd3; /* 작은 글자용(흰 위 5.99:1) */
    --shop-accent-soft: #eaf3ff;
    --shop-accent-lite: #2f80ed;/* 사장님 지정값 — 큰 글자·아이콘·테두리 전용(흰 글자 금지) */
    --shop-price:    #111827;   /* 금액은 가장 진하게 */
    --shop-warn:     #b42318;
    --shop-quote:    #475467;
    --shop-ok:       #067647;
    /* 초점 링은 브랜드색보다 **더 진하게** — 파란 버튼 위에서도 링이 보여야 한다 */
    --shop-focus:    #0b4fc0;

    /* ── 폭 ── */
    --shop-page:     1240px;                    /* 페이지 최대 폭 */
    --shop-page-read: 720px;                    /* 글 읽는 폭 */
    --shop-gutter:   clamp(16px, 3.4vw, 32px);

    /* ── 간격 ── */
    --shop-s1: 4px;  --shop-s2: 8px;  --shop-s3: 12px; --shop-s4: 16px;
    --shop-s5: 24px; --shop-s6: 32px; --shop-s7: 48px; --shop-s8: 72px;
    --shop-section-gap: 64px;                   /* 섹션 사이 */
    --shop-card-gap: 20px;

    /* ── 글자 ── */
    --shop-fs-xs: 12px; --shop-fs-sm: 13px; --shop-fs-md: 15px; --shop-fs-lg: 17px;
    --shop-fs-xl: 20px; --shop-fs-2xl: 26px; --shop-fs-3xl: 34px; --shop-fs-hero: 44px;
    --shop-fw-body: 400; --shop-fw-med: 500; --shop-fw-bold: 700; --shop-fw-black: 800;

    /* ── 조작 요소 = 터치 타깃 ── */
    --shop-ctrl:     44px;
    --shop-ctrl-sm:  36px;
    --shop-ctrl-lg:  52px;
    --shop-tap:      44px;     /* (V36D 호환 별칭) */
    --shop-header-h: 60px;
    /* [V36G.1 Gate1] 레퍼런스 3단 헤더 실측(1440 환산): utility 41 / brand 105 / GNB 53 */
    --shop-utilbar-h:   40px;
    --shop-brandbar-h: 104px;
    --shop-gnb-h:       52px;
    /* 3단 헤더의 실제 높이(실측 154px) + 8px 숨. sticky 요소는 이 값을 쓴다 —
       150px 로 두면 붙는 순간 패널 윗변이 헤더 아래로 4px 잘려 들어간다. */
    --shop-sticky-top: 166px;

    /* ── 테두리·모서리·그림자 — 앱카드 느낌을 내지 않는다 ── */
    --shop-radius-sm: 6px;
    --shop-radius:    10px;
    --shop-radius-lg: 14px;
    --shop-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --shop-shadow:    0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px rgba(16, 24, 40, .07);
    --shop-shadow-up: 0 -6px 20px rgba(16, 24, 40, .08);

    /* ── 카드 이미지 비율 ── */
    --shop-card-ratio: 4 / 3;

    /* ── 겹침 순서 — 한 곳에서 센다 ── */
    --shop-z-sticky: 20;
    --shop-z-header: 30;
    --shop-z-bar:    40;
    --shop-z-drawer: 45;
    --shop-z-modal:  50;

    --shop-t: .15s ease;
}

/* ══════════════════════════ 2. BASE ══════════════════════════ */
.shop { margin: 0; background: var(--shop-bg); color: var(--shop-ink);
        font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
        font-size: var(--shop-fs-md); line-height: 1.6; -webkit-text-size-adjust: 100%;
        /* 전체폭 밴드(`.shop-band`)가 세로 스크롤바 폭만큼 넘치는 것을 막는다.
           `hidden` 이 아니라 `clip` 이다 — `hidden` 은 sticky 헤더를 깨뜨린다. */
        overflow-x: clip; }
/* [2026-09-08 실측] 위 한 줄로는 부족했다. 1440 에서 문서가 실제로 가로 8px 스크롤됐다.
   원인: 전체폭 밴드는 `calc(50% - 50vw)` 로 만드는데 **`100vw` 는 세로 스크롤바 폭(15px)을
   포함**한다 → 밴드가 보이는 폭보다 15px 넓어지고 좌우로 7.5px 씩 삐져나온다.
   `.shop` 은 body 라 그 `clip` 이 뷰포트까지 전파되지 않아 스크롤이 남았다 — 루트에도 준다.
   ⚠️ `hidden` 이 아니라 `clip` 이다. `hidden` 은 sticky 헤더를 깨뜨린다(위 주석과 같은 이유).
   ⚠️ 이 파일은 쇼핑몰 화면에서만 실린다 — 회사 화면에는 적용되지 않는다. */
html { overflow-x: clip; }
.shop *, .shop *::before, .shop *::after { box-sizing: border-box; }
.shop a { color: inherit; text-decoration: none; }
.shop h1, .shop h2, .shop h3, .shop h4 { margin: 0; font-weight: var(--shop-fw-bold);
                                          letter-spacing: -0.02em; line-height: 1.3; }
/* 목록 초기화.
   ⚠️ `:where()` 로 감싼다. 그냥 `.shop ol` 로 쓰면 특이도가 (0,1,1) 이라
      `.shop-guide`·`.shop-steps` 같은 **컴포넌트 한 클래스 규칙(0,1,0)을 이겨 버린다.**
      실제로 주문 가이드에서 단계 목록의 아래 여백이 통째로 사라져
      다음 제목이 카드에 딱 붙었다. 초기화가 컴포넌트를 이기면 안 된다. */
.shop :where(ul, ol, dl) { margin: 0; padding: 0; list-style: none; }
.shop p { margin: 0; }
.shop img { max-width: 100%; height: auto; display: block; }
.shop button, .shop input, .shop select, .shop textarea { font-family: inherit; }

/* 한글이 낱말 가운데서 쪼개지지 않게 — 회사 base.css 와 같이 **뿌리에서 상속**시킨다.
   ⚠️ 선택자를 나열하면 안 된다. 상품카드·프로모션·용도타일 글자는 전부 span/a 라
      p·li·dd 목록에 걸리지 않아 "…쓰는 출력 / 물입니다" 처럼 낱말 가운데서 깨졌다.
   ⚠️ overflow-wrap 을 반드시 같이 준다. keep-all 만 주면 공백 없는 긴 토큰
      (파일명·주문번호)이 상자를 넘친다. */
.shop { word-break: keep-all; overflow-wrap: break-word; }

/* 보이는 focus — 키보드 사용자가 지금 어디 있는지 알 수 있어야 한다 */
.shop :focus-visible { outline: 3px solid var(--shop-focus); outline-offset: 2px; border-radius: 4px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
           overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.shop-skip { position: absolute; left: -9999px; top: 0; z-index: 100;
             background: var(--shop-ink); color: #fff; padding: 12px 18px; }
.shop-skip:focus { left: 8px; top: 8px; }

/* ══════════════════════════ 3. LAYOUT ══════════════════════════ */
.shop-wrap { max-width: var(--shop-page); margin: 0 auto; padding-inline: var(--shop-gutter); }
/* ⚠️ 아래 여백을 s8 로 두고 푸터에도 margin-top 을 주면 본문과 푸터 사이에
   176px 짜리 빈 흰 띠가 생긴다(1280×800 에서 화면 높이의 1/5). 한쪽만 준다. */
.shop-main { max-width: var(--shop-page); margin: 0 auto;
             padding: var(--shop-s5) var(--shop-gutter) var(--shop-s7); }
.shop-main > :last-child { margin-bottom: 0; }

/* 전체 폭 밴드 — 본문 폭을 넘어 배경을 깐다(섹션 리듬) */
.shop-band { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); }
.shop-band--soft { background: var(--shop-bg-soft); }
.shop-band--warm { background: var(--shop-bg-warm); }
.shop-band--dark { background: var(--shop-bg-dark); color: #eaf0f7; }
.shop-band--accent { background: var(--shop-accent-soft); }

.shop-section { margin-bottom: var(--shop-section-gap); }
.shop-band.shop-section { padding-block: var(--shop-s7); margin-bottom: var(--shop-section-gap); }
.shop-section__head { display: flex; align-items: flex-end; gap: var(--shop-s4);
                      flex-wrap: wrap; margin-bottom: var(--shop-s5); }
.shop-section__head h2 { font-size: var(--shop-fs-2xl); }
.shop-section > h2 { font-size: var(--shop-fs-2xl); margin-bottom: var(--shop-s2); }
.shop-section__note { color: var(--shop-ink-3); font-size: var(--shop-fs-sm); }
.shop-section__head .shop-section__note { margin-bottom: 3px; }
.shop-section__more { margin-left: auto; font-size: var(--shop-fs-sm); font-weight: var(--shop-fw-bold);
                      color: var(--shop-accent-ink); display: inline-flex; align-items: center;
                      min-height: var(--shop-ctrl); }
.shop-section__more:hover { text-decoration: underline; }
.shop-section--split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                       gap: var(--shop-s6); }

.shop-title { font-size: var(--shop-fs-3xl); margin-bottom: var(--shop-s2); }
.shop-lead { color: var(--shop-ink-2); font-size: var(--shop-fs-lg); margin-bottom: var(--shop-s5); }
/* ══ [V36G.1 Mobile Rhythm §1] FIX-014 가 "전역 정리는 별건" 이라고 남긴 그 별건이다 ══
   바로 위 두 줄의 `margin-bottom` 은 **어느 화면에서도 산 적이 없다.** 초기화
   `.shop h1`·`.shop p`(둘 다 0,1,1)가 `.shop-title`·`.shop-lead`(0,1,0)를 이기기 때문이다.
   그래서 제목·설명·다음 블록이 **간격 0px 으로 붙어** 있었다(390·430 실측: 견적문의·AI추천
   ·로그인 전부 0). 사장님이 "다닥다닥 붙어 보인다" 고 하신 것의 정확한 원인이다.
   FIX-014 는 이 원인을 이미 찾아 두고 인증 화면에만 되돌렸는데(아래 `.shop-auth …`),
   이번 지시서 §1 이 비Home 전 화면의 리듬을 요구하므로 여기서 초기화를 이긴다.
   ⚠️ `.shop` 을 한 번 더 적어 (0,2,0) 으로 올린다. 값을 새로 만들지 않았다 —
      **위 두 줄이 원래 의도했던 그 값**이 이제 실제로 적용될 뿐이다.
   ⚠️ Home 은 움직이지 않는다. `shop/index.php` 는 `.shop-title`·`.shop-lead` 를
      **한 번도 쓰지 않는다**(실측 0건). §13 "Home 건드리지 말 것" 과 충돌하지 않는다.
   ⚠️ 아래 `.shop-auth` 3줄을 지우지 않았다 — 값이 같아 결과는 그대로이고,
      스위트 6개가 그 문자열을 잠그고 있다. */
.shop .shop-title { margin-bottom: var(--shop-s2); }
.shop .shop-lead  { margin-bottom: var(--shop-s5); }
/* 안내·오류 상자도 같은 초기화에 눌려 다음 블록에 붙어 있었다. 폼 내부 필드 간격(16px)과
   같은 값을 줘서 "안내 → 폼" 이 한 묶음으로 읽히게 한다. */
.shop .shop-note  { margin-bottom: var(--shop-s4); }
/* 페이지 머리글 바로 뒤에 오는 첫 섹션은 제목끼리 붙어 보인다 — 한 칸 더 띄운다 */
.shop-title + .shop-section, .shop-lead + .shop-section { margin-top: var(--shop-s6); }
.shop-hint { background: var(--shop-bg-soft); border-radius: var(--shop-radius);
             padding: var(--shop-s3) var(--shop-s4); font-size: var(--shop-fs-sm);
             color: var(--shop-ink-2); margin-bottom: var(--shop-s5); }
.shop-count { color: var(--shop-ink-3); font-size: var(--shop-fs-sm); }
.shop-count strong { color: var(--shop-ink); font-size: var(--shop-fs-lg); }
.shop-note { background: #eff6ff; border: 1px solid #cfe2f8; border-radius: var(--shop-radius);
             padding: var(--shop-s3) var(--shop-s4); margin-bottom: var(--shop-s4);
             font-size: var(--shop-fs-sm); }
.shop-note--ok { background: #f1f8f4; border-color: #cfe4d8; }
.shop-meta { border-top: 1px solid var(--shop-line); margin-top: var(--shop-s7);
             padding-top: var(--shop-s4); font-size: var(--shop-fs-sm); color: var(--shop-ink-3); }

/* [Owner Audit Batch 1B §14] 내부 페이지 위치표시 — **여백을 정하는 유일한 자리**.
   사장님 지적: GNB 와 거의 붙어 있다(실측 GNB 아래 1px · 본문 위 12px).
   지시서 권장값: GNB→위치표시 24~32px · 위치표시→본문 20~24px.
   ⚠️ 위쪽은 `margin` 이 아니라 **`padding`** 이다. `.shop-main` 의 위 padding 이 0 이라
      자식의 margin-top 이 부모 밖으로 빠져나가(마진 상쇄) 여백이 어디에 붙는지 예측이 안 된다.
      padding 은 상쇄되지 않는다.
   ⚠️ 화면별로 다시 주지 않는다(§14 금지). 이 규칙 하나가 12개 화면을 전부 정한다. */
.shop-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
                   font-size: var(--shop-fs-sm); color: var(--shop-ink-4);
                   padding-top: 27px; margin-bottom: 22px; }
.shop-breadcrumb__sep { color: var(--shop-ink-4); }
.shop-breadcrumb a:hover { text-decoration: underline; }
.shop-breadcrumb span[aria-current] { color: var(--shop-ink-2); }
.shop-linkrow { display: flex; flex-wrap: wrap; gap: var(--shop-s3); align-items: center; }
.shop-linkrow a:not(.shop-btn) { font-weight: var(--shop-fw-bold); color: var(--shop-accent-ink);
                                 text-decoration: underline; text-underline-offset: 3px; }

/* ══════════════════════════ 4. HEADER / FOOTER ══════════════════════════ */
.shop-devbar { background: var(--shop-ink); color: #eaf0f7; font-size: var(--shop-fs-xs);
               text-align: center; padding: 7px 16px; letter-spacing: -0.01em; }

.shop-header { position: sticky; top: 0; z-index: var(--shop-z-header);
               background: var(--shop-bg); border-bottom: 1px solid var(--shop-line); }

/* 상단 얇은 줄 — 회사 홈페이지·안내 */
.shop-topbar { background: var(--shop-bg-warm); border-bottom: 1px solid var(--shop-line-2);
               font-size: var(--shop-fs-xs); color: var(--shop-ink-3); }
.shop-topbar__in { max-width: var(--shop-page); margin: 0 auto;
                   padding: 0 var(--shop-gutter); display: flex; align-items: center;
                   gap: var(--shop-s4); min-height: 32px; }
.shop-topbar__note { margin-right: auto; }
.shop-topbar a { display: inline-flex; align-items: center; min-height: 32px; }
.shop-topbar a:hover { color: var(--shop-ink); text-decoration: underline; }

/* 로고 · 검색 · 유틸 */
.shop-header__bar { display: flex; align-items: center; gap: var(--shop-s5);
                    max-width: var(--shop-page); margin: 0 auto;
                    padding: var(--shop-s4) var(--shop-gutter) var(--shop-s3); }
.shop-burger { display: none; width: var(--shop-ctrl); height: var(--shop-ctrl); flex: 0 0 auto;
               border: 1px solid var(--shop-line); background: var(--shop-bg);
               border-radius: var(--shop-radius-sm); font-size: 18px; cursor: pointer;
               color: var(--shop-ink); }
.shop-logo { display: inline-flex; align-items: baseline; gap: .3em; white-space: nowrap;
             font-size: 22px; font-weight: var(--shop-fw-black); letter-spacing: -0.035em; }
.shop-logo span { color: var(--shop-accent); }

/* 검색 — 헤더에서 가장 넓은 요소다 */
.shop-search { flex: 1 1 auto; display: flex; max-width: 620px; }
.shop-search input { flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 var(--shop-s4);
                     border: 2px solid var(--shop-ink); border-right: 0;
                     border-radius: var(--shop-radius-sm) 0 0 var(--shop-radius-sm);
                     font-size: var(--shop-fs-md); background: var(--shop-bg); }
.shop-search input::placeholder { color: var(--shop-ink-4); }
.shop-search button { height: 46px; padding: 0 22px; border: 2px solid var(--shop-ink);
                      background: var(--shop-ink); color: #fff;
                      border-radius: 0 var(--shop-radius-sm) var(--shop-radius-sm) 0;
                      font-size: var(--shop-fs-md); font-weight: var(--shop-fw-bold); cursor: pointer; }
.shop-search button:hover { background: #000; }

.shop-util { display: flex; gap: var(--shop-s4); font-size: var(--shop-fs-sm); white-space: nowrap;
             align-items: center; }
.shop-util a { display: inline-flex; align-items: center; gap: 5px;
               min-height: var(--shop-ctrl); color: var(--shop-ink-2); }
.shop-util a:hover { color: var(--shop-ink); }
.shop-util__cart { font-weight: var(--shop-fw-bold); color: var(--shop-ink) !important; }
.shop-util__badge { display: inline-flex; align-items: center; justify-content: center;
                    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
                    background: var(--shop-accent); color: #fff;
                    font-size: 11px; font-weight: var(--shop-fw-bold); line-height: 1; }
/* [V36G.1 FIX-001] 로그아웃은 POST + CSRF 라 `<a>` 가 아니라 form/button 이다.
   옆의 링크들과 **같은 것으로 보여야** 하므로 버튼 기본 스타일을 지우고 링크에 맞춘다. */
.shop-util__out { margin: 0; display: inline-flex; }
.shop-util__out button { display: inline-flex; align-items: center;
                         min-height: var(--shop-ctrl); padding: 0; border: 0; background: none;
                         font: inherit; color: var(--shop-ink-2); cursor: pointer; }
.shop-util__out button:hover { color: var(--shop-ink); }

/* GNB — 상품군이 먼저 온다 */
.shop-gnb { display: flex; gap: var(--shop-s6); align-items: center;
            max-width: var(--shop-page); margin: 0 auto;
            padding: 0 var(--shop-gutter) var(--shop-s2);
            font-size: var(--shop-fs-lg); font-weight: var(--shop-fw-bold); }
.shop-gnb a { display: inline-flex; align-items: center; gap: 5px; min-height: 38px;
              position: relative; }
.shop-gnb a:hover { color: var(--shop-accent-ink); }
.shop-gnb a[aria-current="page"] { color: var(--shop-accent-ink); }
.shop-gnb a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0;
                                          bottom: -3px; height: 3px; background: var(--shop-accent); }
.shop-gnb em { font-style: normal; font-size: 10px; font-weight: var(--shop-fw-med);
               color: var(--shop-ink-4); border: 1px solid var(--shop-line);
               border-radius: 999px; padding: 1px 6px; }
.shop-gnb__out { margin-left: auto; font-weight: var(--shop-fw-med);
                 font-size: var(--shop-fs-sm); color: var(--shop-ink-3); }

/* ── [Shop UI Follow-up §6] 상단 접이식 상담 메뉴 CSS 를 내렸다 ──
   이 규칙들은 GNB 안의 접이식 메뉴 **하나만** 꾸미던 것이라, 마크업이 사라지면 전부 죽는다.
   남겨 두면 "대체 규칙이 링크를 지켜 준다"는 계약이 지켜지는 것처럼 보이는데 지킬 마크업이 없다.
   상담 서비스 항목의 생김새는 이제 서랍(`.shop-drawer`) 규칙이 전담한다. */
/* AI 소재추천 — 상품도 서비스도 아닌 도구라 살짝 다르게 세운다(과하지 않게) */
.shop-gnb__ai { color: var(--shop-accent-ink); }
.shop-gnb__ai span { color: var(--shop-accent); }

/* 항목이 늘어난 만큼 좁은 데스크톱에서 간격을 줄인다 — 줄바꿈·가로 넘침 방지 */
@media (max-width: 1280px) {
    .shop-gnb { gap: var(--shop-s5); font-size: var(--shop-fs-md); }
}
@media (max-width: 1024px) {
    .shop-gnb { gap: var(--shop-s4); font-size: var(--shop-fs-sm); }
    .shop-gnb__out { font-size: var(--shop-fs-xs); }
}

/* 모바일 서랍 */
.shop-drawer { position: fixed; inset: 0; z-index: var(--shop-z-drawer);
               background: rgba(16, 24, 40, .45); }
.shop-drawer[hidden] { display: none; }
.shop-drawer__panel { position: absolute; left: 0; top: 0; bottom: 0; width: min(88vw, 340px);
                      background: var(--shop-bg); overflow-y: auto;
                      padding-bottom: env(safe-area-inset-bottom, 0px); }
.shop-drawer__head { display: flex; align-items: center; justify-content: space-between;
                     padding: var(--shop-s3) var(--shop-s4);
                     border-bottom: 1px solid var(--shop-line); }
.shop-drawer__close { width: var(--shop-ctrl); height: var(--shop-ctrl); border: 0;
                      background: none; font-size: 22px; cursor: pointer; color: var(--shop-ink); }
.shop-drawer nav { display: flex; flex-direction: column; padding: var(--shop-s2) var(--shop-s4) var(--shop-s6); }
.shop-drawer__group { font-size: var(--shop-fs-xs); color: var(--shop-ink-4);
                      margin-top: var(--shop-s4); padding: var(--shop-s2) 0; }
.shop-drawer a { display: flex; align-items: center; gap: var(--shop-s2);
                 min-height: var(--shop-ctrl); border-bottom: 1px solid var(--shop-line-2);
                 font-size: var(--shop-fs-lg); font-weight: var(--shop-fw-med); }
.shop-drawer a em { font-style: normal; font-size: 10px; color: var(--shop-ink-4);
                    border: 1px solid var(--shop-line); border-radius: 999px; padding: 1px 6px; }
/* [V36G.1 FIX-001] 드로어 로그아웃도 form/button 이다. 위 항목들과 같은 줄로 보이게 맞춘다.
   `width:100%` 를 줘야 다른 항목처럼 줄 전체가 눌린다. */
.shop-drawer__out { margin: 0; }
.shop-drawer__out button { display: flex; align-items: center; width: 100%;
                           min-height: var(--shop-ctrl); padding: 0; border: 0;
                           border-bottom: 1px solid var(--shop-line-2); background: none;
                           font-family: inherit; font-size: var(--shop-fs-lg);
                           font-weight: var(--shop-fw-med); color: var(--shop-ink);
                           text-align: left; cursor: pointer; }

/* 푸터 */
.shop-footer { border-top: 1px solid var(--shop-line); background: var(--shop-bg-warm); }
.shop-footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--shop-s6);
                     max-width: var(--shop-page); margin: 0 auto;
                     padding: var(--shop-s7) var(--shop-gutter) var(--shop-s5); }
.shop-footer__brand .shop-logo { font-size: 19px; margin-bottom: var(--shop-s3); }
.shop-footer__brand p { font-size: var(--shop-fs-sm); color: var(--shop-ink-3); }
.shop-footer__cols h2 { font-size: var(--shop-fs-sm); margin-bottom: var(--shop-s2);
                        letter-spacing: 0; }
.shop-footer__cols li a { display: inline-flex; align-items: center; min-height: 34px;
                          font-size: var(--shop-fs-sm); color: var(--shop-ink-3); }
.shop-footer__cols a:hover { color: var(--shop-ink); text-decoration: underline; }
.shop-footer__biz { border-top: 1px solid var(--shop-line); }
.shop-footer__biz-in { max-width: var(--shop-page); margin: 0 auto;
                       padding: var(--shop-s4) var(--shop-gutter) var(--shop-s6);
                       font-size: var(--shop-fs-xs); color: var(--shop-ink-3); line-height: 1.9; }
.shop-footer__biz dl { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.shop-footer__biz dt { color: var(--shop-ink-4); }
.shop-footer__biz dd { margin: 0; }
.shop-footer__biz dd::after { content: ""; }
.shop-footer__legal { display: flex; flex-wrap: wrap; gap: var(--shop-s3); margin-top: var(--shop-s3); }
.shop-footer__legal a { display: inline-flex; align-items: center; min-height: 34px;
                        text-decoration: underline; text-underline-offset: 3px; }
.shop-footer__copy { margin-top: var(--shop-s2); color: var(--shop-ink-4); }
.shop-footer__note { margin-top: var(--shop-s2); }

/* ══════════════════════════ 5. COMPONENTS ══════════════════════════ */

/* ── 버튼 위계 ── */
.shop-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
            min-height: var(--shop-ctrl); padding: 0 22px;
            border: 1px solid var(--shop-ink); background: var(--shop-ink); color: #fff;
            border-radius: var(--shop-radius-sm); font-size: var(--shop-fs-md);
            font-weight: var(--shop-fw-bold); cursor: pointer; transition: background var(--shop-t); }
.shop-btn:hover { background: #000; }
.shop-btn--primary { background: var(--shop-accent); border-color: var(--shop-accent); color: #fff; }
.shop-btn--primary:hover { background: var(--shop-accent-ink); border-color: var(--shop-accent-ink); }
.shop-btn--ghost { background: var(--shop-bg); color: var(--shop-ink); border-color: var(--shop-ink); }
.shop-btn--ghost:hover { background: var(--shop-bg-soft); }
.shop-btn--quiet { background: transparent; color: var(--shop-ink-2); border-color: var(--shop-line); }
.shop-btn--quiet:hover { border-color: var(--shop-ink); color: var(--shop-ink); background: transparent; }
.shop-btn--lg { min-height: var(--shop-ctrl-lg); padding: 0 30px; font-size: var(--shop-fs-lg); }
.shop-btn--sm { min-height: var(--shop-ctrl-sm); padding: 0 14px; font-size: var(--shop-fs-sm); }
.shop-btn--wide { width: 100%; }
.shop-btn[disabled] { opacity: .4; cursor: not-allowed; }
.shop-btn:active:not([disabled]) { transform: translateY(1px); }

.shop-textbtn { display: inline-flex; align-items: center; justify-content: center;
                min-height: var(--shop-ctrl); padding: 0 var(--shop-s3);
                border: 0; background: none; color: var(--shop-ink-2);
                font-size: var(--shop-fs-sm); font-family: inherit; cursor: pointer;
                text-decoration: underline; text-underline-offset: 3px; }
.shop-textbtn:hover { color: var(--shop-ink); }
.shop-textbtn--warn:hover { color: var(--shop-warn); }
.shop a.shop-textbtn { text-decoration: underline; text-underline-offset: 3px; }
.shop-iconbtn { display: inline-flex; align-items: center; justify-content: center;
                min-width: var(--shop-ctrl); min-height: var(--shop-ctrl);
                border: 0; background: none; color: var(--shop-ink-2);
                font-size: var(--shop-fs-sm); font-family: inherit; cursor: pointer;
                text-decoration: underline; text-underline-offset: 3px; }
.shop-iconbtn:hover { color: var(--shop-warn); }

/* ── 배지 ── */
.shop-badge { position: absolute; top: 10px; left: 10px; z-index: 1;
              background: rgba(16, 24, 40, .9); color: #fff; font-size: 11px;
              font-weight: var(--shop-fw-bold); padding: 5px 9px; border-radius: 4px;
              letter-spacing: -0.01em; }
.shop-badge--pending_price { background: var(--shop-warn); }
.shop-badge--quote_required { background: var(--shop-quote); }
.shop-badge--consultation_only { background: var(--shop-ink-3); }

/* ── 브랜드 자리표시자 —— 사진이 0장인 지금 쓰는 것.
      가짜 실물 사진이 아니라 **브랜드 도형/타이포**다.
      사진이 들어오면 이 블록은 그대로 대체된다(레이아웃 변경 없음). ── */
.shop-ph { position: relative; display: flex; flex-direction: column;
           align-items: center; justify-content: center; gap: 6px; overflow: hidden;
           width: 100%; height: 100%; padding: var(--shop-s3); text-align: center;
           background:
             repeating-linear-gradient(135deg,
               rgba(26, 111, 212, .05) 0 10px, transparent 10px 20px),
             var(--shop-bg-soft);
           color: var(--shop-accent); }
/* 이름은 **자르지 않는다** — "현수" 처럼 잘리면 고장난 것처럼 보인다 */
.shop-ph__mark { font-size: clamp(14px, 2.1vw, 24px); font-weight: var(--shop-fw-black);
                 letter-spacing: -0.04em; opacity: .55; line-height: 1.15; }
.shop-ph__cap { font-size: 10px; color: var(--shop-ink-4); letter-spacing: -0.01em; }
/* ⚠️ [Owner Audit Batch 1B §16] 자리표시자는 **컨테이너 클래스와 같은 요소**에 붙는다
   (`<span class="shop-ph shop-promo__visual">`). 그래서 파일 뒤쪽에 있는
   `.shop-promo__visual { display: block }`(2600번대)이 **같은 명시도**로 위 `.shop-ph` 의
   flex 를 덮었고, 이름과 안내문이 한 줄로 흘러 붙었다.
     실측 2026-08-24 — 프리미엄 6칸이 전부 자리표시자가 되면서 드러났다.
     사진이 5장 붙어 있을 때는 그 자리가 `--img` 라 **보이지 않던 결함**이다.
   ⚠️ 자동 검사는 이걸 못 잡는다(요소도 글자도 다 있다). 화면을 봐야 보인다.
   ⚠️ 자리표시자를 새 컨테이너에 붙일 때는 그 클래스도 여기 더한다. */
.shop-ph.shop-promo__visual,
.shop-ph.shop-catlist__visual,
.shop-ph.shop-card__thumb { display: flex; flex-direction: column;
                            align-items: center; justify-content: center; }
/* 큰 자리(프로모션·카테고리 목차)는 더 크게 */
.shop-promo__visual .shop-ph__mark,
.shop-catlist__visual .shop-ph__mark { font-size: clamp(20px, 2.8vw, 32px); }

/* ── 상품 카드 — image-first ── */
/* [V36G.1 Gate6] 레퍼런스(01_desktop_home)의 상품 줄은 **한 줄에 6장**이다(1122px 기준 ≈188px).
   4열은 카드 하나가 296px 이라 레퍼런스보다 훨씬 성겼고, 20종 카테고리가 5줄로 늘어졌다.
   본문 폭(1240px)에서 5열이면 카드 226px 로 레퍼런스 밀도에 가장 가깝다. */
.shop-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--shop-card-gap); }
.shop-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* [V36G.1 Gate6] 레퍼런스 카드는 **테두리 상자가 없다.** 이미지가 카드이고 글자는 그 아래
   흰 바탕에 그냥 앉는다. 테두리를 두르면 20장이 늘어설 때 격자 선이 사진보다 강해진다.
   ⚠️ 대신 이미지 자체에 모서리를 준다 — 클릭 대상의 경계는 계속 보여야 한다. */
.shop-card { position: relative; background: transparent;
             border: 0; border-radius: var(--shop-radius);
             transition: transform var(--shop-t); }
.shop-card:hover .shop-card__thumb { box-shadow: var(--shop-shadow); }
.shop-card__link { display: flex; flex-direction: column; height: 100%; }
.shop-card__thumb { position: relative; display: block; aspect-ratio: var(--shop-card-ratio);
                    background: var(--shop-bg-soft); overflow: hidden;
                    border-radius: var(--shop-radius); transition: box-shadow var(--shop-t); }
.shop-card__thumb img { width: 100%; height: 100%; object-fit: cover;
                        transition: transform .25s ease; }
.shop-card:hover .shop-card__thumb img { transform: scale(1.03); }
/* 정보 영역은 **꼭 필요한 만큼만** 차지한다 — 이미지 비중을 55% 이상으로 유지하기 위해서다(§13) */
.shop-card__body { display: flex; flex-direction: column; gap: 3px;
                   padding: var(--shop-s3) 2px 0; flex: 1 1 auto; }
.shop-card__name { font-size: var(--shop-fs-lg); font-weight: var(--shop-fw-bold);
                   line-height: 1.3; }
.shop-card__lead { font-size: var(--shop-fs-sm); color: var(--shop-ink-3); line-height: 1.45;
                   display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                   overflow: hidden; }
/* [Owner Audit Batch 1B §3] 금액 줄. 예전에는 `㎡당`(윗줄) + 금액(아랫줄) 두 줄이었다.
   이제 **금액이 윗줄**이고 아래에 그 금액의 **기준 규격**이 작게 붙는다.
   ⚠️ 기준 줄을 지우지 않는다. 금액만 남기면 고객이 "이 값이면 산다" 로 읽는데
      실제로는 그 규격 한 장 값이다. */
.shop-card__price { margin-top: auto; padding-top: var(--shop-s2);
                    display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.shop-card__price strong { font-size: var(--shop-fs-xl); font-weight: var(--shop-fw-black);
                           color: var(--shop-price); letter-spacing: -0.03em; }
.shop-card__price span.shop-card__amt { font-size: var(--shop-fs-xl);
                           font-weight: var(--shop-fw-black); color: var(--shop-price);
                           letter-spacing: -0.03em; line-height: 1.25; }
.shop-card__price span.shop-card__basis { color: var(--shop-ink-4);
                           font-size: var(--shop-fs-xs); line-height: 1.4; }
/* 금액이 없는 상품의 상태 문구.
   ⚠️ 반드시 `span.` 을 붙여 위 `.shop-card__price span:not(...)` 와 특이도를 맞춰야 한다.
      클래스 하나(0,1,0)로는 (0,2,1) 에 밀려 색·크기가 통째로 무시되고,
      그러면 가격 자리가 바로 위 설명문(13px·ink-3)과 똑같아져 **가격 줄이 사라져 보인다.**
   강조색은 쓰지 않는다 — 금액 자리는 크기·굵기로 읽히게 한다. */
.shop-card__price span.shop-card__price--none { color: var(--shop-warn);
                          font-weight: var(--shop-fw-bold); font-size: var(--shop-fs-md); }
.shop-card__price span.shop-card__price--calc { color: var(--shop-ink-2);
                          font-weight: var(--shop-fw-bold); font-size: var(--shop-fs-md); }
.shop-card__variants { font-size: var(--shop-fs-xs); color: var(--shop-ink-4); }
.shop-card__why { font-size: var(--shop-fs-xs); color: var(--shop-accent-ink); }
.shop-card__cta { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px;
                  font-size: var(--shop-fs-sm); font-weight: var(--shop-fw-bold);
                  color: var(--shop-accent-ink); }
.shop-card:hover .shop-card__cta { text-decoration: underline; text-underline-offset: 3px; }

/* ── 프로모션 블록(상품군) ── */
.shop-promo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--shop-s4); }
.shop-promo__item { position: relative; display: flex; flex-direction: column;
                    border-radius: var(--shop-radius-lg); overflow: hidden;
                    background: var(--shop-bg); border: 1px solid var(--shop-line);
                    transition: box-shadow var(--shop-t), border-color var(--shop-t); }
.shop-promo__item:hover { border-color: var(--shop-ink-4); box-shadow: var(--shop-shadow); }
/* ⚠️ `height: auto` 를 반드시 같이 준다.
   이 요소에는 `.shop-ph` 도 함께 붙어 있고 거기 `height: 100%` 가 있어서
   그대로 두면 **명시 높이가 aspect-ratio 를 이긴다.** 모바일(≤560px)에서 그림 자리가
   16:9 가 아니라 정사각형(356×367)으로 부풀어 제목·설명·CTA 가 상자 밖으로 밀려났다. */
.shop-promo__visual { aspect-ratio: 16 / 9; height: auto; }
.shop-promo__body { padding: var(--shop-s5); display: flex; flex-direction: column; gap: 6px;
                    flex: 1 1 auto; }
.shop-promo__name { font-size: var(--shop-fs-2xl); }
.shop-promo__lead { color: var(--shop-ink-2); font-size: var(--shop-fs-md); }
.shop-promo__meta { font-size: var(--shop-fs-sm); color: var(--shop-ink-4); }
.shop-promo__cta { margin-top: auto; padding-top: var(--shop-s4);
                   font-size: var(--shop-fs-md); font-weight: var(--shop-fw-bold);
                   color: var(--shop-accent-ink); display: inline-flex; align-items: center; gap: 5px; }
.shop-promo__item:hover .shop-promo__cta { text-decoration: underline; text-underline-offset: 3px; }

/* ── 유틸 타일(용도로 찾기 · 지원) ── */
.shop-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--shop-s3); }
.shop-tile { display: flex; flex-direction: column; gap: 3px; padding: var(--shop-s4);
             background: var(--shop-bg); border: 1px solid var(--shop-line);
             border-radius: var(--shop-radius); min-height: 96px;
             transition: border-color var(--shop-t), background var(--shop-t); }
.shop-tile:hover { border-color: var(--shop-ink); }
.shop-tile__mark { width: 30px; height: 30px; display: grid; place-items: center;
                   border-radius: var(--shop-radius-sm); background: var(--shop-accent-soft);
                   color: var(--shop-accent-ink); font-size: var(--shop-fs-sm);
                   font-weight: var(--shop-fw-black); margin-bottom: var(--shop-s2); }
.shop-tile strong { font-size: var(--shop-fs-md); }
.shop-tile span { font-size: var(--shop-fs-sm); color: var(--shop-ink-3); }
.shop-tile__count { margin-top: auto; font-size: var(--shop-fs-xs); color: var(--shop-ink-4); }

/* ── 칩 ── */
.shop-chips { display: flex; flex-wrap: wrap; gap: var(--shop-s2); align-items: center; }
.shop-chips__label { font-size: var(--shop-fs-sm); color: var(--shop-ink-4); }
.shop-chips a { display: inline-flex; align-items: center; min-height: 34px;
                font-size: var(--shop-fs-sm); padding: 0 var(--shop-s3);
                border: 1px solid var(--shop-line); border-radius: 999px; color: var(--shop-ink-2);
                background: var(--shop-bg); }
.shop-chips a:hover { border-color: var(--shop-ink); color: var(--shop-ink); }
.shop-chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 var(--shop-s3);
             background: var(--shop-bg); border: 1px solid var(--shop-line); border-radius: 999px;
             font-size: var(--shop-fs-sm); color: var(--shop-ink-2); }
.shop-chip:hover { border-color: var(--shop-ink); color: var(--shop-ink); }
.shop-chip.is-on { background: var(--shop-accent); border-color: var(--shop-accent); color: #fff;
                   font-weight: var(--shop-fw-bold); }

/* ── 빈 상태 — 개발용 회색 박스가 아니다 ── */
.shop-empty-state { display: flex; align-items: center; gap: var(--shop-s5); flex-wrap: wrap;
                    border: 1px solid var(--shop-line); border-radius: var(--shop-radius-lg);
                    background: var(--shop-bg-soft); padding: var(--shop-s5) var(--shop-s6); }
/* 표식은 한글 3글자('준비중'·'디자인')가 **한 줄로** 들어가야 한다.
   20px 로 두면 60px 라 56px 상자에서 줄바꿈돼 글자가 뭉친다. */
.shop-empty-state__mark { flex: 0 0 auto; width: 64px; height: 64px; display: grid; place-items: center;
                          border-radius: var(--shop-radius); background: var(--shop-bg);
                          border: 1px solid var(--shop-line); white-space: nowrap;
                          color: var(--shop-accent); font-size: 15px; letter-spacing: -.02em;
                          font-weight: var(--shop-fw-black); }
.shop-empty-state__body { flex: 1 1 320px; min-width: 0; }
.shop-empty-state h2, .shop-empty-state h3 { font-size: var(--shop-fs-lg); margin-bottom: 4px; }
.shop-empty-state p { font-size: var(--shop-fs-sm); color: var(--shop-ink-2); }
.shop-empty-state__links { display: flex; gap: var(--shop-s2); flex-wrap: wrap;
                           margin-left: auto; }

/* (V36C 호환) 준비 중 안내 */
.shop-placeholder { border: 1px solid var(--shop-line); border-radius: var(--shop-radius-lg);
                    padding: var(--shop-s6) var(--shop-s5); text-align: center;
                    background: var(--shop-bg-soft); margin: var(--shop-s4) 0; }
.shop-placeholder h2 { font-size: var(--shop-fs-lg); margin-bottom: var(--shop-s2); }
.shop-placeholder p { color: var(--shop-ink-2); max-width: 620px; margin: 0 auto var(--shop-s4);
                      font-size: var(--shop-fs-sm); }
.shop-placeholder__links { display: flex; gap: var(--shop-s4); justify-content: center; flex-wrap: wrap; }
.shop-placeholder__links a { display: inline-flex; align-items: center; min-height: 40px;
                             font-weight: var(--shop-fw-bold); text-decoration: underline;
                             text-underline-offset: 3px; }

/* ── 폼 요소 ── */
.shop-field { border: 0; margin: 0 0 var(--shop-s5); padding: var(--shop-s5) 0 0;
              border-top: 1px solid var(--shop-line-2); }
.shop-field:first-of-type { border-top: 0; padding-top: 0; }
.shop-field legend { font-size: var(--shop-fs-md); font-weight: var(--shop-fw-bold);
                     color: var(--shop-ink); padding: 0 0 var(--shop-s3); }
.shop-field__help { font-size: var(--shop-fs-xs); color: var(--shop-ink-4); margin-top: 6px; }
.shop-field__help button { margin-right: 4px; }

.shop-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--shop-s2); }
.shop-field .shop-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--shop-s2); }
.shop-choice { display: inline-flex; align-items: center; gap: var(--shop-s2);
               min-height: var(--shop-ctrl); padding: 0 var(--shop-s3);
               border: 1px solid var(--shop-line); border-radius: var(--shop-radius-sm);
               font-size: var(--shop-fs-sm); cursor: pointer; background: var(--shop-bg);
               justify-content: flex-start; transition: border-color var(--shop-t); }
.shop-choice:hover { border-color: var(--shop-ink-4); }
.shop-choice input { margin: 0; accent-color: var(--shop-accent); flex: 0 0 auto; }
.shop-choice__label { flex: 1 1 auto; min-width: 0; }
/* 소재별 단가는 쇼핑몰의 가격표다 — 관리자 목록의 부가 메모처럼 흐리면 안 된다 */
.shop-choice__price { flex: 0 0 auto; margin-left: auto; padding-left: var(--shop-s2);
                      font-size: var(--shop-fs-sm); font-weight: var(--shop-fw-med);
                      color: var(--shop-ink-2); white-space: nowrap; }
/* 주문 패널 안에서는 **한 줄에 하나**다.
   "장폭솔벤현수막 · ㎡당 6,000원" 처럼 이름이 길면 2열에서는 단가와 붙어 겹친다(§27). */
/* [V36G.1 Gate6] 옵션이 넓은 좌측 열로 오면서 2열은 헐거워졌다. 레퍼런스 밀도에 맞춰 3열로 편다.
   ⚠️ 소재를 드롭다운으로 접지 않는다 — 원단마다 ㎡ 단가가 다르고, 그 비교가 이 화면의 핵심이다. */
.shop-detail__main .shop-choices,
.shop-detail__main .shop-field .shop-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shop-choice:has(input:checked) { border-color: var(--shop-ink); background: var(--shop-ink);
                                  color: #fff; font-weight: var(--shop-fw-med); }
.shop-choice:has(input:checked) .shop-choice__price { color: #cfe0f5; }
.shop-choice__price--none { color: var(--shop-warn); font-weight: var(--shop-fw-bold); }
.shop-choice.is-off { opacity: .65; }

.shop-size { display: flex; align-items: flex-end; gap: var(--shop-s3); max-width: 420px; }
.shop-size__cell { display: flex; flex-direction: column; gap: 4px; flex: 1 1 0; min-width: 0; }
.shop-size__cell label { font-size: var(--shop-fs-xs); color: var(--shop-ink-4); }
.shop-size__cell input { width: 100%; height: var(--shop-ctrl); padding: 0 var(--shop-s3);
                         border: 1px solid var(--shop-line); border-radius: var(--shop-radius-sm);
                         font-size: var(--shop-fs-md); }
.shop-size__x { padding-bottom: 12px; color: var(--shop-ink-4); }
.shop-preset { min-height: 32px; padding: 0 10px; border: 1px solid var(--shop-line);
               background: var(--shop-bg); border-radius: 999px; font-size: var(--shop-fs-xs);
               cursor: pointer; color: var(--shop-ink-2); }
.shop-preset:hover { border-color: var(--shop-ink); color: var(--shop-ink); }

.shop-qty { width: 104px; height: var(--shop-ctrl); padding: 0 var(--shop-s3);
            border: 1px solid var(--shop-line); border-radius: var(--shop-radius-sm);
            font-size: var(--shop-fs-md); }
.shop-select { width: 100%; height: var(--shop-ctrl); padding: 0 var(--shop-s3);
               border: 1px solid var(--shop-line); border-radius: var(--shop-radius-sm);
               font-size: var(--shop-fs-md); background: var(--shop-bg); }
.shop-toggle { display: inline-flex; align-items: center; gap: var(--shop-s2);
               min-height: var(--shop-ctrl); font-size: var(--shop-fs-sm); cursor: pointer; }
.shop-addon { display: inline-flex; align-items: center; gap: var(--shop-s2); margin-right: var(--shop-s4); }
.shop-addon label { font-size: var(--shop-fs-sm); color: var(--shop-ink-2); }
/* [V36G.1 FIX-019] 라벨 길이가 달라 입력칸 시작선이 어긋났다 —
   `로프 (2,000원)` 83px vs `큐방 (500원)` 73px 이라 입력칸이 **10px** 밀렸다(전 뷰포트 실측).
   fieldset 을 2열 grid 로 만들고 각 항목을 풀어 라벨·입력이 각자 열을 차지하게 한다.
   첫 열이 `max-content` 라 **가장 긴 라벨**에 맞춰지므로 픽셀을 하드코딩하지 않는다.
   ⚠️ `legend` 는 grid item 이 되지 않고 fieldset 상단에 그대로 남는다(브라우저 규정). */
.shop-field--addons { display: grid; grid-template-columns: max-content minmax(0, 1fr);
                      gap: var(--shop-s2) var(--shop-s3); align-items: center; }
.shop-field--addons .shop-addon { display: contents; }
.shop-field--addons .shop-qty { justify-self: start; }
.shop-field--addons .shop-stepper, .shop-field--addons .shop-qtyrow { justify-self: start; }
.shop-textarea { display: flex; flex-direction: column; gap: var(--shop-s1); }
.shop-textarea > span { font-size: var(--shop-fs-sm); color: var(--shop-ink-2); }
.shop-textarea textarea { width: 100%; min-height: 88px; padding: 10px 12px; resize: vertical;
                          border: 1px solid var(--shop-line); border-radius: var(--shop-radius-sm);
                          font: inherit; font-size: var(--shop-fs-md); }

/* ── 수량 스테퍼 ── */
.shop-stepper { display: inline-flex; align-items: center; border: 1px solid var(--shop-line);
                border-radius: var(--shop-radius-sm); overflow: hidden; background: var(--shop-bg); }
.shop-stepper__btn { width: var(--shop-ctrl); height: var(--shop-ctrl); border: 0;
                     background: var(--shop-bg); font-size: var(--shop-fs-lg); line-height: 1;
                     cursor: pointer; color: var(--shop-ink); }
.shop-stepper__btn:hover { background: var(--shop-bg-soft); }
.shop-stepper__btn[disabled] { opacity: .3; cursor: not-allowed; }
.shop-stepper__n { width: 54px; height: var(--shop-ctrl); border: 0;
                   border-left: 1px solid var(--shop-line); border-right: 1px solid var(--shop-line);
                   text-align: center; font-size: var(--shop-fs-md); font-family: inherit; }
.shop-stepper__n::-webkit-outer-spin-button,
.shop-stepper__n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ══════════════════════════ 6. PAGES ══════════════════════════ */

/* ── HOME · Hero — 화면 전체 폭을 쓴다(§11) ──
   ⚠️ 밴드와 달리 padding 으로 되돌리지 않는다. 안쪽 `__in` 이 헤더와 **같은 규칙**
      (max-width + gutter)으로 중앙을 잡는다. 둘 다 하면 gutter 가 두 번 붙어 어긋난다. */
.shop-hero { position: relative; overflow: hidden; background: var(--shop-bg-dark); color: #eaf0f7;
             margin-inline: calc(50% - 50vw);
             margin-top: calc(-1 * var(--shop-s5)); margin-bottom: var(--shop-section-gap); }
.shop-hero::before { content: ""; position: absolute; inset: 0;
                     background:
                       radial-gradient(70% 120% at 82% 20%, rgba(26, 111, 212, .35), transparent 62%),
                       repeating-linear-gradient(115deg,
                         rgba(234, 240, 247, .045) 0 2px, transparent 2px 16px); }
.shop-hero__in { position: relative; max-width: var(--shop-page); margin: 0 auto;
                 padding: 56px var(--shop-gutter) 52px; }
.shop-hero__eyebrow { display: inline-flex; align-items: center; gap: 6px;
                      font-size: var(--shop-fs-sm); font-weight: var(--shop-fw-bold);
                      color: var(--shop-accent); letter-spacing: .02em; margin-bottom: var(--shop-s3); }
.shop-hero h1 { font-size: var(--shop-fs-hero); line-height: 1.22; letter-spacing: -0.035em;
                max-width: 15em; }
.shop-hero__lead { margin-top: var(--shop-s3); font-size: var(--shop-fs-lg);
                   color: rgba(234, 240, 247, .78); max-width: 34em; }
.shop-hero__cta { display: flex; gap: var(--shop-s3); flex-wrap: wrap; margin-top: var(--shop-s5); }
.shop-hero__cta .shop-btn--ghost { background: transparent; color: #eaf0f7;
                                   border-color: rgba(234, 240, 247, .5); }
.shop-hero__cta .shop-btn--ghost:hover { background: rgba(234, 240, 247, .1); }
.shop-hero__search { display: flex; max-width: 560px; margin-top: var(--shop-s5); }
.shop-hero__search input { flex: 1 1 auto; min-width: 0; height: var(--shop-ctrl-lg);
                           padding: 0 var(--shop-s5); border: 0;
                           border-radius: var(--shop-radius-sm) 0 0 var(--shop-radius-sm);
                           font-size: var(--shop-fs-md); }
.shop-hero__search button { height: var(--shop-ctrl-lg); padding: 0 26px; border: 0;
                            background: var(--shop-accent); color: #fff;
                            border-radius: 0 var(--shop-radius-sm) var(--shop-radius-sm) 0;
                            font-size: var(--shop-fs-md); font-weight: var(--shop-fw-bold);
                            cursor: pointer; }
.shop-hero__search button:hover { background: var(--shop-accent-ink); }
.shop-hero .shop-chips { margin-top: var(--shop-s4); }
.shop-hero .shop-chips__label { color: rgba(234, 240, 247, .6); }
.shop-hero .shop-chips a { background: transparent; border-color: rgba(234, 240, 247, .28);
                           color: rgba(234, 240, 247, .85); }
.shop-hero .shop-chips a:hover { border-color: #eaf0f7; color: #fff; }
.shop-hero__facts { display: flex; gap: var(--shop-s6); flex-wrap: wrap; margin-top: var(--shop-s5);
                    padding-top: var(--shop-s4); border-top: 1px solid rgba(234, 240, 247, .16);
                    font-size: var(--shop-fs-sm); color: rgba(234, 240, 247, .7); }
.shop-hero__facts strong { display: block; font-size: var(--shop-fs-xl); color: #eaf0f7;
                           font-weight: var(--shop-fw-black); letter-spacing: -0.02em; }

/* ── HOME · AI 추천 ── */
/* AI 추천 블록은 **흰 면이 아니다.** 대표상품 → 용도로 찾기 → AI 추천이
   전부 흰 바탕이면 스크롤 두세 화면이 경계 없는 한 장으로 보여 관리자 목록처럼 읽힌다. */
.shop-assist { display: flex; align-items: center; gap: var(--shop-s5); flex-wrap: wrap;
               border: 1px solid var(--shop-line); border-left: 4px solid var(--shop-accent);
               border-radius: var(--shop-radius-lg); background: var(--shop-accent-soft);
               padding: var(--shop-s5) var(--shop-s6); margin: var(--shop-s6) 0; }
.shop-assist__body { flex: 1 1 320px; min-width: 0; }
.shop-assist h2 { font-size: var(--shop-fs-xl); margin-bottom: 4px; }
.shop-assist p { color: var(--shop-ink-2); font-size: var(--shop-fs-sm); }
.shop-assist .shop-btn { margin-left: auto; }

/* ── 카테고리 ── */
/* [V36G.1 Gate6] 레퍼런스 03/04(고객센터)의 **아이보리 히어로 밴드**를 카테고리에도 쓴다.
   제목·한 줄 설명·개수가 한 덩어리로 앉고, 본문과 배경으로 구분된다.
   ⚠️ 밴드에 이미지를 지어 넣지 않는다 — 레퍼런스에는 일러스트가 있지만 우리에게는 없다. */
/* [V36G.1 Gate6R] padding 선언이 두 번 있어 뒤엣것이 이겼고, 그래서 좌우 패딩이 0 인
   **반쪽 밴드**였다(아이보리 배경이 글자에 딱 붙었다). 한 번만 선언한다.
   ⚠️ 카테고리 히어로는 이제 `.shop-hero--full` 로 옮겼다. 이 규칙은 검색 화면이 쓴다. */
.shop-cathero { background: var(--shop-bg-soft); border-radius: var(--shop-radius-lg);
                padding: var(--shop-s6);
                display: flex; align-items: flex-end; gap: var(--shop-s6); flex-wrap: wrap; }
.shop-cathero__body { flex: 1 1 380px; min-width: 0; }
.shop-cathero h1 { font-size: var(--shop-fs-3xl); margin-bottom: var(--shop-s2); }
.shop-cathero__lead { color: var(--shop-ink-2); font-size: var(--shop-fs-lg); }
.shop-cathero__stat { display: flex; gap: var(--shop-s5); margin-top: var(--shop-s4);
                      font-size: var(--shop-fs-sm); color: var(--shop-ink-3); }
.shop-cathero__stat strong { color: var(--shop-ink); font-size: var(--shop-fs-lg);
                             font-weight: var(--shop-fw-black); }
.shop-cathero__cta { display: flex; gap: var(--shop-s2); flex-wrap: wrap; margin-top: var(--shop-s4); }

.shop-catlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--shop-s5); }
.shop-catlist__item { border: 1px solid var(--shop-line); border-radius: var(--shop-radius-lg);
                      overflow: hidden; background: var(--shop-bg); display: flex; flex-direction: column; }
.shop-catlist__visual { aspect-ratio: 16 / 9; }
.shop-catlist__body { padding: var(--shop-s5); display: flex; flex-direction: column; gap: 6px;
                      flex: 1 1 auto; }
.shop-catlist__item h2 { font-size: var(--shop-fs-xl); }
.shop-catlist__item p { font-size: var(--shop-fs-sm); color: var(--shop-ink-2); }
/* 하위분류 칩과 "전체 보기" 링크.
   ⚠️ `margin-top:auto` 는 __go 한 곳에만 준다. 두 곳에 주면 남는 높이가 둘로 쪼개져
      칩 묶음이 카드 한가운데로 떠버린다. */
.shop-subcats { display: flex; flex-wrap: wrap; gap: var(--shop-s2); padding-top: var(--shop-s3); }
.shop-catlist__go { margin-top: auto; padding-top: var(--shop-s4);
                    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
                    font-size: var(--shop-fs-sm); font-weight: 600; color: var(--shop-accent-ink); }
.shop-catlist__go:hover { text-decoration: underline; }
.shop-subcats a { display: inline-flex; align-items: center; min-height: 34px;
                  font-size: var(--shop-fs-sm); padding: 0 12px;
                  border: 1px solid var(--shop-line); border-radius: 999px; color: var(--shop-ink-2); }
.shop-subcats a:hover { border-color: var(--shop-ink); color: var(--shop-ink); }

/* [V36G.1 Gate6R] 카테고리의 세부 분류는 `.shop-promo`(Home 카테고리 줄)로 옮겼다.
   이 규칙은 이제 **검색 첫 화면의 카테고리 안내**만 쓴다. */
.shop-subnav { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
               grid-auto-flow: column;
               gap: var(--shop-s3); margin-bottom: var(--shop-s4); }
/* 세부분류 묶음은 목차다 — 아래 도구줄·상품 격자와 64px 씩 벌릴 이유가 없다.
   벌려 두면 1440×900 첫 화면에서 상품이 한 장도 안 보인다. */
.shop-section:has(> .shop-subnav) { margin-bottom: var(--shop-s5); }
/* ⚠️ 여기가 두꺼우면 카테고리 첫 화면(1440×900)에 **상품 카드가 한 장도 안 보인다.**
   히어로+세부분류 8칸+도구줄+필터가 900px 를 다 먹는다. 세부분류는 목차일 뿐이다. */
.shop-subnav a { display: flex; flex-direction: column; gap: 2px; padding: var(--shop-s3);
                 border: 1px solid var(--shop-line); border-radius: var(--shop-radius);
                 background: var(--shop-bg); }
.shop-subnav a:hover { border-color: var(--shop-accent); background: var(--shop-bg-soft); }
.shop-subnav strong { font-size: var(--shop-fs-md); }
.shop-subnav span { font-size: var(--shop-fs-sm); color: var(--shop-ink-3); }
.shop-subnav__count { margin-top: auto; padding-top: var(--shop-s2);
                      font-size: var(--shop-fs-xs); color: var(--shop-ink-4) !important; }

/* 도구줄 */
/* [V36G.1 Gate6] 레퍼런스의 툴바는 목록 바로 위에서 **선 하나로** 구분된다 */
.shop-toolbar { border-bottom: 1px solid var(--shop-line); padding-bottom: var(--shop-s3);
                display: flex; flex-wrap: wrap; gap: var(--shop-s3); align-items: center;
                border-top: 1px solid var(--shop-line); border-bottom: 1px solid var(--shop-line);
                padding: var(--shop-s3) 0; margin-bottom: var(--shop-s5); }
.shop-filter-toggle { display: none; min-height: var(--shop-ctrl); padding: 0 var(--shop-s4);
                      border: 1px solid var(--shop-ink); background: var(--shop-bg);
                      border-radius: var(--shop-radius-sm); font-size: var(--shop-fs-sm);
                      font-weight: var(--shop-fw-bold); cursor: pointer; }
.shop-filter-toggle__n { display: inline-flex; align-items: center; justify-content: center;
                         min-width: 18px; height: 18px; margin-left: 6px; border-radius: 999px;
                         background: var(--shop-accent); color: #fff; font-size: 11px; }
.shop-sort { margin-left: auto; display: flex; align-items: center; gap: var(--shop-s2); }
.shop-sort__label { font-size: var(--shop-fs-xs); color: var(--shop-ink-4); }
.shop-sort ul { display: flex; gap: 2px; flex-wrap: wrap; }
.shop-sort a { display: inline-flex; align-items: center; min-height: var(--shop-ctrl-sm);
               padding: 0 12px; font-size: var(--shop-fs-sm); color: var(--shop-ink-3);
               border-radius: var(--shop-radius-sm); }
.shop-sort a:hover { background: var(--shop-bg-soft); color: var(--shop-ink); }
/* 레퍼런스의 활성 탭은 **브론즈 면 + 흰 글자**다(검정이 아니다). 같은 표현을 쓴다. */
.shop-sort a[aria-current] { background: var(--shop-accent); color: #fff;
                             font-weight: var(--shop-fw-bold); }

.shop-filters { display: flex; flex-wrap: wrap; gap: var(--shop-s5); align-items: flex-start;
                background: var(--shop-bg-soft); border-radius: var(--shop-radius);
                padding: var(--shop-s4) var(--shop-s5); margin-bottom: var(--shop-s5); }
.shop-filters fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
                         gap: var(--shop-s2); align-items: center; }
.shop-filters legend { float: left; font-size: var(--shop-fs-xs); color: var(--shop-ink-4);
                       padding: 0 8px 0 0; line-height: 34px; }
.shop-filters__clear { font-size: var(--shop-fs-sm); text-decoration: underline;
                       text-underline-offset: 3px; color: var(--shop-ink-2); line-height: 34px; }
.shop-filters__foot { display: flex; align-items: center; gap: var(--shop-s3); margin-left: auto; }
.shop-filters__foot .shop-btn { display: none; }   /* 데스크톱에서는 "N종 보기"가 필요 없다 */

/* ── 검색 ── */
/* [V36G.1 Gate6] 레퍼런스의 검색칸은 **알약형 + 브론즈 버튼**이다(헤더 검색·고객센터 검색 모두).
   검정 각진 버튼은 레퍼런스 어디에도 없다. 같은 언어로 맞춘다. */
.shop-searchbig { display: flex; max-width: 660px; margin: var(--shop-s4) 0 0;
                  background: var(--shop-bg); border: 1px solid var(--shop-line);
                  border-radius: 999px; overflow: hidden; }
.shop-searchbig input { flex: 1 1 auto; min-width: 0; height: var(--shop-ctrl-lg);
                        padding: 0 var(--shop-s5); border: 0; background: transparent;
                        font-size: var(--shop-fs-lg); }
/* ⚠️ `outline: none` 만 두면 키보드 초점이 사라진다. 알약 모양을 지키면서도 초점은 보여야 한다 —
   입력칸에는 초점 링을, 감싸는 상자에는 테두리 강조를 함께 준다. */
.shop-searchbig input:focus-visible { outline: 2px solid var(--shop-ink); outline-offset: -4px;
                                      border-radius: 999px; }
.shop-searchbig:focus-within { border-color: var(--shop-accent);
                               box-shadow: 0 0 0 3px rgba(26, 111, 212, .18); }
.shop-searchbig button { height: var(--shop-ctrl-lg); padding: 0 32px; border: 0;
                         background: var(--shop-accent); color: #fff;
                         font-size: var(--shop-fs-lg); font-weight: var(--shop-fw-bold); cursor: pointer; }
.shop-searchbig button:hover { background: var(--shop-accent-ink); }
/* 검색칸은 이제 히어로 밖 목록 바로 위에 있다(레퍼런스 03 툴바 자리) */
.shop-searchbig { margin-bottom: var(--shop-s5); }
.shop-title--sm { font-size: var(--shop-fs-xl); margin-bottom: var(--shop-s3); }

/* 상담형 결과 — 상품과 구획을 나눈다 */
.shop-consult { border: 1px solid var(--shop-line); border-left: 4px solid var(--shop-quote);
                border-radius: var(--shop-radius); padding: var(--shop-s5);
                margin: var(--shop-s5) 0; background: var(--shop-bg-soft); }
.shop-consult h2 { font-size: var(--shop-fs-lg); margin-bottom: 4px; }
.shop-consult > p { font-size: var(--shop-fs-sm); color: var(--shop-ink-2); margin-bottom: var(--shop-s3); }
.shop-consult ul { display: flex; flex-direction: column; gap: var(--shop-s3); }
.shop-consult li { display: flex; gap: var(--shop-s4); align-items: center; flex-wrap: wrap; }
.shop-consult__body { flex: 1 1 240px; min-width: 0; }
.shop-consult strong { display: block; font-size: var(--shop-fs-md); }
.shop-consult__body span { font-size: var(--shop-fs-sm); color: var(--shop-ink-2); }

/* ── 상품 상세 ── */
/* [V36G.1 FIX-008 검증 결과 — **수정하지 않았다**]
   좌측 하단 과대 공백은 **실사용에서 재현되지 않는다.** 아래 구조가 이미 옳다.

   (Gate6 에서 좌측 열 이름이 `.shop-detail__main` 으로 바뀌고 sticky 를 뗐다 — 아래 참조)
   `.shop-detail__visual` 의 sticky 는 컨테이닝 블록이 **grid area(행 전체)** 였다.
   `align-items: start` 로 아이템 높이가 콘텐츠 높이(1,572px)에서 끝나도,
   sticky 는 행 끝(2,571px)까지 유효하다. 그래서 우측 구매패널이 999~1,100px 더 길어도
   좌측은 화면에 계속 붙어 있다 — 5지점 스캔 전부에서 좌측 콘텐츠가
   평균 653~694px 보인다(1440·1280·1024 실측).

   QA-01~03 이 본 "좌측 하단 공백" 은 **fullPage 캡처가 sticky 를 한 지점에 그린 결과**다.
   QA-04·05 에서 겪은 `position: fixed` 아티팩트와 같은 종류다.

   ⚠️ 두 가지 대안을 실제로 만들어 재 봤고 둘 다 채택하지 않았다.
      · sticky 를 이미지에만 걸기 → **퇴행.** 규격칩·제작한계·작업가이드가 위로 밀려
        스크롤 중 좌측에서 읽을 것이 사라졌다(육안 비교로 확인).
      · 안쪽 래퍼로 sticky 옮기기 + `align-items` 제거 → **효과 0.** before/after 측정값이
        완전히 같았다(694/678/653px · 5/5 지점). 마크업만 늘어나므로 되돌렸다. */
/* [V36G.1 Gate6] 레퍼런스 조판으로 바꿨다 — **좌 2/3 입력 · 우 1/3 견적(sticky)**.
   근거: 06_checkout_calculator_quote_reference.png(PC: 좌 2/3 입력 폼 + 우 1/3 Sticky 요약)
        05_desktop_notice_detail.png(좌 본문 + 우 사이드 카드)

   ⚠️ 좌측 열의 sticky 를 **뗐다.** 예전 좌측은 이미지·설명뿐이라 짧아서 붙여 둘 값이 있었지만,
      이제 옵션 입력이 전부 좌측에 있어 화면보다 훨씬 길다. 긴 열에 sticky 를 걸면 아무 효과가
      없거나(top 에 닿지 않음) 스크롤이 어긋난다. 스크롤 중 따라와야 하는 것은 **금액**이고,
      그건 우측 `.shop-detail__buy` 가 계속 맡는다. */
/* [V36G.1 Gate6R] 레퍼런스 06 PC 패널 실측: 좌 폼 ~680 : 우 요약 ~256 = **73:27**.
   Gate6 의 2fr:1fr 은 66.7:33.3 이라 우측이 레퍼런스보다 넓었다. 실측 비율로 맞춘다. */
.shop-detail { display: grid; grid-template-columns: minmax(0, 73fr) minmax(300px, 27fr);
               gap: var(--shop-s8); align-items: start; }
.shop-detail__main { min-width: 0; }
/* ── [Shop UI Follow-up §8] 상품 신원 — **한 줄 옆칸에서 세로 흐름으로** ──
   앞 판은 `썸네일 + 이름` 한 줄이었다. 사장님 지적: 대표 이미지가 너무 작다.
   실측이 그 말 그대로였다 — 데스크톱 152×95, 모바일 104×78. **썸네일이다.**
   그 크기로는 고객이 무엇을 사는지 보지 못하고, 사진이 들어와도 장식으로만 보인다.

   그래서 옆칸을 폐기하고 **이미지를 먼저, 이름·설명을 그 아래**로 놓는다.
   ⚠️ 마크업은 한 글자도 바꾸지 않았다. 열을 하나로 만들면 같은 DOM 이 그대로 세로로 선다 —
      제목 층위(h1 위치)·스크린리더 순서가 유지되고, 데스크톱과 모바일이 **같은 구조**를 쓴다.
   ⚠️ 이것이 §8 이 요구한 `이미지 → 옵션 세로 흐름`이다. 두 벌을 만들지 않는다.
   ⚠️ 지금 상품 사진은 **0장**이다(발행 아티팩트·개발 파일 둘 다 없음). 그래서 이 자리는
      전부 자리표시자로 그려진다 — 데모·레퍼런스 사진을 끼워 넣지 않는다. 사진이 들어오면
      이 자리에 그대로 들어간다. */
.shop-detail__id { display: grid; grid-template-columns: minmax(0, 1fr);
                   gap: var(--shop-s4); align-items: start; margin-bottom: var(--shop-s5); }
.shop-detail__idbody { min-width: 0; }
.shop-detail__idbody h1 { font-size: var(--shop-fs-2xl); margin-bottom: 6px; }
/* 상품 배지 — 카드용 `.shop-badge` 는 카드 위에 얹히는 절대배치다. 본문 줄에서는 그냥 흐른다. */
.shop-detail__badges { margin-top: var(--shop-s3); }
.shop-detail__badges .shop-badge { position: static; display: inline-block; }
/* 옵션 입력 판 — 레퍼런스의 흰 카드 */
.shop-panel { border: 1px solid var(--shop-line); border-radius: var(--shop-radius-lg);
              padding: var(--shop-s5); background: var(--shop-bg); }
.shop-panel__t { font-size: var(--shop-fs-lg); font-weight: var(--shop-fw-bold);
                 margin-bottom: var(--shop-s4); }
/* [V36G.1 Media Pair] 상품 상세 상단은 **정사각형 두 칸**이다 — 완제품 예시 · 소재 텍스처.
   ⚠️ 칸은 언제나 2열이다. 텍스처가 없어 한 칸만 있어도 남은 열을 비워 둔다 —
      한 칸이 전폭으로 늘어나면 830px 짜리 정사각형이 되어 옵션이 화면 밖으로 밀린다.
   ⚠️ `1fr 1fr` 이라 좌우가 정확히 같은 크기다. 실제 크기는 본문 폭이 정한다(§6). */
.shop-detail__media { --media-gap: var(--shop-s4);
                      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                      gap: var(--media-gap); align-items: start; }
/* ══ [V36G.1 Mobile Rhythm §7] 소재 텍스처가 없는 상품 — 한 칸을 **가운데**로 ══
   지금까지는 오른쪽 열을 빈 채로 뒀다. 그래서 `banner`(텍스처 칸이 `hidden`)와
   `yupo-print`(칸 자체가 없음)에서 오른쪽 407px 가 그대로 흰 공백이었다(1440 실측 ·
   390 에서도 173px 공백). 사장님 결정대로 **크기는 그대로 두고 자리만 가운데로** 옮긴다.
   ⚠️ 위 주석이 경고한 "한 칸이 전폭으로 늘어나면 830px 정사각형이 되어 옵션이 밀린다" 를
      피한다 — 열 폭을 `(100% - 간격) / 2` 로 **못박아** 2열일 때와 같은 크기를 유지한다.
      늘리지도, 2:1 로 되돌리지도, 빈 자리표시 상자를 세우지도 않는다(§7 금지사항).
   ⚠️ 판정을 JS 로 하지 않는다. `order.js` 는 소재를 고를 때 `pane.hidden` 만 켜고 끄는데,
      `:has()` 가 그 상태를 그대로 읽으므로 **고객이 소재를 바꾸는 순간 자동으로** 2열↔가운데가
      오간다. 새 스크립트를 만들지 않았다.
   ⚠️ 360px 미만은 제외한다. 거기서는 아래 맨 끝 규칙이 이미 한 칸을 전폭으로 쌓는데,
      이 규칙이 명시도가 높아 절반 폭(≈166px)으로 눌러 버린다 — 소재의 결이 안 보인다. */
@media (min-width: 360px) {
    .shop-detail__media:not(:has(.shop-mediapane--tex:not([hidden]))) {
        grid-template-columns: calc((100% - var(--media-gap)) / 2);
        justify-content: center;
    }
}
.shop-mediapane { margin: 0; min-width: 0; }
/* 라벨은 **칸이 무엇인지**만 말한다. 설명문을 붙이지 않는다(§8). */
.shop-mediapane__cap { margin-top: var(--shop-s2); font-size: var(--shop-fs-xs);
                       color: var(--shop-ink-3); text-align: center; }
/* 두 칸은 같은 시각 언어를 쓴다 — 같은 비율·같은 radius·같은 면·같은 테두리. 그림자 없음. */
.shop-detail__thumb,
.shop-detail__tex { display: block; width: 100%; aspect-ratio: 1 / 1;
                    border-radius: var(--shop-radius-lg); overflow: hidden;
                    background: var(--shop-bg); border: 1px solid var(--shop-line); }
/* ⚠️ `cover` 가 아니라 **`contain`** 이다. 2:1 + cover 였을 때 세로 제품사진(유포지 3:4)의
      포스터 헤드라인이 잘렸다(실측). 어떤 비율이 와도 자르지 않는다 —
      1:1 로 새로 찍은 사진이 들어오면 여백 없이 정사각형을 꽉 채운다. */
.shop-detail__thumb img,
.shop-detail__tex img { width: 100%; height: 100%;
                        object-fit: contain; object-position: center; }
.shop-detail__thumb.is-empty { aspect-ratio: 1 / 1; }
/* 자리표시자가 커진 틀 안에서 점처럼 보이지 않게 — 문구는 그대로, 크기만 틀에 맞춘다.
   ⚠️ `.shop-ph`(418행)는 카드용이라 글자가 작다. 여기서만 올린다. */
.shop-detail__thumb .shop-ph__mark { font-size: clamp(20px, 3.4vw, 40px); }
.shop-detail__thumb .shop-ph__cap { font-size: var(--shop-fs-xs); }
/* [V36G.1 Gate6R.3B §2] 한눈 요약 3박스 규칙은 지웠다 — 겨냥할 마크업이 없어졌다.
   사장님 지시로 상품 신원 아래 요약 박스를 없앴고(레퍼런스 06 에도 그 자리가 없다),
   같은 사실은 입력칸 옆(규격 범위)과 실제 선택지(소재·마감)에 그대로 남아 있다.
   ⚠️ 쓰이지 않는 규칙을 남겨 두지 않는다. 남겨 두면 다음 사람이 다시 그린다. */

.shop-detail__buy { position: sticky; top: var(--shop-sticky-top); align-self: start;
                    border: 1px solid var(--shop-line); border-radius: var(--shop-radius-lg);
                    padding: var(--shop-s5); background: var(--shop-bg);
                    box-shadow: var(--shop-shadow-sm); }
/* h1 은 좌측 신원 행으로 옮겼다(위 .shop-detail__idbody h1) */
.shop-detail__lead { color: var(--shop-ink-3); font-size: var(--shop-fs-sm);
                     margin-bottom: var(--shop-s5); }
.shop-detail__note { font-size: var(--shop-fs-sm); color: var(--shop-ink-2); margin-bottom: var(--shop-s2); }
.shop-detail__cta { display: flex; flex-direction: column; gap: var(--shop-s2); margin-top: var(--shop-s4); }
/* [V36G.1 FIX-003] 모바일 하단 구매바 — 데스크톱에서는 없다(우측 sticky 패널이 그 역할). */
.shop-detail__bar { display: none; }
.shop-detail__gate { font-size: var(--shop-fs-xs); color: var(--shop-ink-4); margin-top: var(--shop-s2); }
.shop-detail__dropped { font-size: var(--shop-fs-xs); color: var(--shop-ink-4); margin-top: 6px; }
.shop-detail__result:empty { display: none; }
.shop-detail__result { display: flex; align-items: center; gap: var(--shop-s3); flex-wrap: wrap;
                       margin-top: var(--shop-s2); font-size: var(--shop-fs-sm); }
.shop-detail__result.is-ok { color: var(--shop-ok); font-weight: var(--shop-fw-bold); }
.shop-detail__result.is-error { color: var(--shop-warn); font-weight: var(--shop-fw-bold); }
.shop-detail__result-link { display: inline-flex; align-items: center; min-height: var(--shop-ctrl);
                            color: var(--shop-ink); font-weight: var(--shop-fw-bold);
                            text-decoration: underline; text-underline-offset: 3px; }

/* 상세 하단 정보 구획 */
.shop-detail__info { margin-top: var(--shop-s8); }
.shop-detail__about { max-width: 620px; }
.shop-detail__about h2 { font-size: var(--shop-fs-xl); margin: var(--shop-s6) 0 var(--shop-s3); }
.shop-detail__about > p { font-size: var(--shop-fs-md); color: var(--shop-ink-2); }
/* 카테고리 밴드 안의 소재 목록은 본문 전폭(1240px)을 쓴다 —
   한 줄에 하나만 두면 이름과 단가가 1,100px 떨어져 관리자 표처럼 보인다. 두 줄로 접는다. */
.shop-band .shop-limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                          column-gap: var(--shop-s7); }
.shop-limits li { display: flex; justify-content: space-between; gap: var(--shop-s4);
                  padding: 10px 0; border-bottom: 1px solid var(--shop-line-2);
                  font-size: var(--shop-fs-sm); }
.shop-limits span { color: var(--shop-ink-3); }
.shop-limits strong { font-weight: var(--shop-fw-med); }
.shop-cautions li { position: relative; padding-left: 14px; font-size: var(--shop-fs-sm);
                    color: var(--shop-ink-2); margin-bottom: 5px; }
.shop-cautions li::before { content: "·"; position: absolute; left: 4px; }

/* 금액 — 총액이 구매 anchor */
/* [V36G.1 Gate6] 우측 열이 요약 전용이 되면서 위쪽 굵은 경계선은 필요 없어졌다 —
   패널 자체가 카드다. 레퍼런스처럼 제목 옆에 "실시간 계산" 표식을 둔다. */
.shop-summary { margin-top: 0; }
.shop-summary h2 { font-size: var(--shop-fs-md); color: var(--shop-ink-3); margin-bottom: var(--shop-s3); }
.shop-summary__t { display: flex; align-items: center; justify-content: space-between;
                   gap: var(--shop-s3); }
.shop-summary__live { font-size: var(--shop-fs-xs); font-weight: var(--shop-fw-bold);
                      color: var(--shop-accent); background: var(--shop-bg-soft);
                      border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.shop-summary__hint { font-size: var(--shop-fs-sm); color: var(--shop-ink-4); padding: var(--shop-s4) 0; }
.shop-summary__error { font-size: var(--shop-fs-sm); color: var(--shop-warn);
                       padding: var(--shop-s4) 0; font-weight: var(--shop-fw-bold); }
.shop-summary__ship { font-size: var(--shop-fs-xs); color: var(--shop-ink-3); margin-top: var(--shop-s3); }
.shop-summary__vat { font-size: var(--shop-fs-xs); color: var(--shop-ink-4); margin-top: 3px; }
.shop-breakdown, .shop-total { display: grid; grid-template-columns: 1fr auto;
                               gap: 6px var(--shop-s3); font-size: var(--shop-fs-sm); }
.shop-breakdown { color: var(--shop-ink-3); padding-bottom: var(--shop-s3); }
.shop-breakdown dd, .shop-total dd { text-align: right; }
/* 총액 줄 — 레퍼런스는 따뜻한 아이보리 박스로 총 예상금액을 안는다.
   ⚠️ [Purchase Flow Gate 결함2] 여기서 `column-gap` 을 남겨 두면 dt·dd 두 배경 사이가
      벌어져 **총액 상자가 두 조각으로 갈라진다**(2026-08-27 1440 실측). 좌우 라운드로
      이어 붙이도록 만든 설계인데 gap 이 그 사이를 갈랐다.
      → 열 간격을 0 으로 두고, 일반 줄의 간격은 `dd` 의 왼쪽 여백으로 만든다.
        `dd` 는 우측 정렬이라 그 여백은 눈에 보이지 않는다. */
.shop-total { border-top: 1px solid var(--shop-line); padding-top: var(--shop-s3);
              column-gap: 0; }
.shop-total > dd { padding-left: var(--shop-s3); }
.shop-total dt.is-total, .shop-total dd.is-total { background: var(--shop-bg-soft);
    padding: var(--shop-s3) var(--shop-s4); margin-top: var(--shop-s2); }
.shop-total dt.is-total { border-radius: var(--shop-radius-sm) 0 0 var(--shop-radius-sm); }
.shop-total dd.is-total { border-radius: 0 var(--shop-radius-sm) var(--shop-radius-sm) 0; }
.shop-total .is-total { font-size: var(--shop-fs-2xl); font-weight: var(--shop-fw-black);
                        color: var(--shop-price); letter-spacing: -0.03em; align-self: center; }
.shop-total .is-sub, .estimate-doc__sum .is-sub { font-size: var(--shop-fs-xs); color: var(--shop-ink-4); }
.shop-warnings { margin-top: var(--shop-s3); }
.shop-warnings li { font-size: var(--shop-fs-xs); color: var(--shop-warn); padding-left: 12px;
                    position: relative; }
.shop-warnings li::before { content: "!"; position: absolute; left: 0; font-weight: var(--shop-fw-bold); }
[data-state="busy"] { opacity: .5; }

/* ── [V36G.1 Gate6] 옵션 선택 칩 — 레퍼런스 "옵션 컴포넌트 스타일"의 선택 버튼 ──
   ⚠️ 이름을 `.shop-chip` 으로 두면 **카테고리 필터 칩·히어로 칩과 충돌한다**(위쪽에 이미 있다).
      한 번 그렇게 썼다가 필터 칩 규칙이 통째로 덮였다. 그래서 `.shop-opt` 로 분리한다.
   ⚠️ **수량 컨트롤은 새로 만들지 않았다.** 장바구니가 쓰던 `.shop-stepper` 를 그대로 쓴다
      (§10 재사용). 새로 만들었더니 같은 이름이 두 벌이 됐다 — 장바구니 쪽이 덮일 뻔했다. */
.shop-opts { display: flex; flex-wrap: wrap; gap: var(--shop-s2); }
.shop-opt { display: inline-flex; align-items: center; gap: 6px; min-height: var(--shop-ctrl);
            padding: 0 var(--shop-s4); border: 1px solid var(--shop-line);
            border-radius: var(--shop-radius-sm); background: var(--shop-bg);
            font-size: var(--shop-fs-sm); cursor: pointer; }
.shop-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.shop-opt:hover { border-color: var(--shop-ink-4); }
.shop-opt:has(input:checked) { border-color: var(--shop-accent); background: var(--shop-accent);
                               color: #fff; font-weight: var(--shop-fw-bold); }
.shop-opt:has(input:checked) .shop-opt__p { color: #dfeaf8; }
.shop-opt:has(input:focus-visible) { outline: 2px solid var(--shop-ink); outline-offset: 2px; }
.shop-opt__p { font-size: var(--shop-fs-xs); color: var(--shop-ink-4); }

/* 수량 줄 — 기존 `.shop-stepper` 옆에 단위 글자만 붙인다 */
.shop-qtyrow { display: inline-flex; align-items: center; gap: var(--shop-s3); flex-wrap: wrap; }
.shop-qtyrow__unit { font-size: var(--shop-fs-xs); color: var(--shop-ink-4); }
.shop-stepper--sm .shop-stepper__n { width: 48px; }

/* ── 디자인 방법 카드 ── */
.shop-design__cards { display: grid; gap: var(--shop-s2); }
.shop-dcard { display: block; position: relative; cursor: pointer;
              border: 1px solid var(--shop-line); border-radius: var(--shop-radius);
              padding: var(--shop-s3) var(--shop-s4); background: var(--shop-bg);
              min-height: var(--shop-ctrl); transition: border-color var(--shop-t); }
.shop-dcard:hover { border-color: var(--shop-ink-4); }
.shop-dcard input { position: absolute; top: var(--shop-s3); right: var(--shop-s3); margin: 0;
                    accent-color: var(--shop-accent); }
.shop-dcard:has(input:checked) { border-color: var(--shop-accent);
                                 box-shadow: inset 0 0 0 1px var(--shop-accent);
                                 background: var(--shop-accent-soft); }
.shop-dcard__body { display: flex; flex-direction: column; gap: 2px; padding-right: 26px; }
.shop-dcard__top { display: flex; align-items: baseline; gap: var(--shop-s2); flex-wrap: wrap; }
.shop-dcard__title { font-size: var(--shop-fs-md); }
.shop-dcard__fee { margin-left: auto; font-size: var(--shop-fs-sm); font-weight: var(--shop-fw-bold);
                   color: var(--shop-accent-ink); }
.shop-dcard__lead { font-size: var(--shop-fs-sm); color: var(--shop-ink-3); }
.shop-dcard__lead.is-pending { color: var(--shop-ink-4); font-style: italic; }
.shop-dcard__need { font-size: var(--shop-fs-xs); color: var(--shop-ink-4); }
.shop-design__panel { margin-top: var(--shop-s3); padding-top: var(--shop-s3);
                      border-top: 1px dashed var(--shop-line); }

/* ── 파일 업로더 — raw input 느낌을 내지 않는다 ── */
.shop-upload { border: 1.5px dashed var(--shop-line); border-radius: var(--shop-radius);
               padding: var(--shop-s5) var(--shop-s4); background: var(--shop-bg-soft);
               text-align: center; transition: border-color var(--shop-t), background var(--shop-t); }
.shop-upload.is-over { border-color: var(--shop-accent); background: var(--shop-accent-soft); }
.shop-upload__mark { width: 40px; height: 40px; margin: 0 auto var(--shop-s2);
                     display: grid; place-items: center; border-radius: 50%;
                     background: var(--shop-bg); border: 1px solid var(--shop-line);
                     color: var(--shop-accent); font-size: 18px; }
.shop-upload__lead { font-size: var(--shop-fs-sm); color: var(--shop-ink-2); margin-bottom: 3px;
                     font-weight: var(--shop-fw-med); }
.shop-upload__limit { font-size: var(--shop-fs-xs); color: var(--shop-ink-4);
                      margin-bottom: var(--shop-s3); }
.shop-upload__pick { display: block; }
.shop-upload__pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.shop-upload__pick .shop-btn { width: 100%; }
.shop-upload__pick input:focus-visible + .shop-btn { outline: 3px solid var(--shop-focus);
                                                     outline-offset: 2px; }
.shop-upload__status { font-size: var(--shop-fs-sm); color: var(--shop-ink-2); margin-top: var(--shop-s2); }
.shop-upload__status.is-ok { color: var(--shop-ok); }
.shop-upload__status.is-error { color: var(--shop-warn); font-weight: var(--shop-fw-bold); }
.shop-upload__list { margin-top: var(--shop-s3); text-align: left; }
.shop-upload__list li { display: flex; align-items: center; gap: var(--shop-s2);
                        padding: 6px 0; border-top: 1px solid var(--shop-line-2); }
.shop-upload__name { flex: 1 1 auto; min-width: 0; font-size: var(--shop-fs-sm);
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-upload__meta { flex: 0 0 auto; font-size: var(--shop-fs-xs); color: var(--shop-ink-4); }
.shop-upload__note { font-size: var(--shop-fs-xs); color: var(--shop-ink-4);
                     margin-top: var(--shop-s3); text-align: left; }

/* ── 장바구니 ── */
.shop-cart { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
             gap: var(--shop-s6); align-items: start; }
.shop-cart__count { font-size: var(--shop-fs-sm); color: var(--shop-ink-3); margin-bottom: var(--shop-s3); }
.shop-cart__count strong { color: var(--shop-ink); font-size: var(--shop-fs-lg); }

/* ══════ [2026-09-06] 주문하기 버튼 바로 위 차단 사유 ══════
   ⚠️ 경고가 아니다 — 다음에 할 일을 알려 주는 줄이다. 그래서 빨갛게 만들지 않는다.
   ⚠️ 누를 수 있는 요소다. 터치 하한을 지킨다. */
.shop .shop-summary__why { display: block; width: 100%; margin: 0 0 10px;
                           min-height: 44px; padding: 10px 14px;
                           border: 1px solid var(--shop-line); border-radius: var(--shop-radius-sm);
                           background: var(--shop-bg-soft); color: var(--shop-ink-2);
                           font-size: 13.5px; line-height: 1.5; text-align: left;
                           font-family: inherit; cursor: pointer; }
.shop .shop-summary__why[hidden] { display: none; }
.shop .shop-summary__why::after { content: ' →'; color: var(--shop-ink-3); }
.shop .shop-summary__why:hover { border-color: var(--shop-accent); color: var(--shop-ink); }
.shop .shop-summary__why:focus-visible { outline: none; border-color: var(--shop-accent);
                                         box-shadow: 0 0 0 3px var(--shop-focus); }
/* 안내와 버튼은 한 덩어리로 읽혀야 한다 — 요약표와의 간격이 그대로 끼면 붕 뜬다 */
.shop .shop-summary__why + .shop-summary__cta { margin-top: 10px; }

/* ══════ 장바구니 줄 — 주문서 상품 카드와 같은 조판(2026-09-05 보정) ══════
   사진 왼쪽 · 정보 가운데 · 금액 오른쪽 위 · 조작영역은 카드 아래 한 줄.
   ⚠️ 여기서 바꾸는 것은 **보이는 것뿐**이다. 수량·금액·배송비 계산은 서버 그대로다.
   ⚠️ 썸네일을 4:3 으로 눕혀 두었더니 108×81 밖에 안 됐다 — 주문서와 같은 정사각으로 세운다. */
.shop-lines { display: flex; flex-direction: column; gap: 12px; }
.shop-line { display: grid; grid-template-columns: 136px minmax(0, 1fr) auto; gap: 18px;
             align-items: start;
             border: 1px solid var(--shop-line); border-radius: var(--shop-radius-lg);
             padding: 18px; background: var(--shop-bg); }
.shop-line.is-changed { border-color: var(--shop-warn); }
.shop-line.is-off { background: var(--shop-bg-soft); }
/* 상품 사진이 아직 저장소에 한 장도 없다 — 자리표시자도 **같은 크기**로 세운다.
   ⚠️ 사진이 없다고 칸을 줄이지 않는다. 사진이 들어오는 날 조판이 흔들린다. */
.shop-line__thumb { display: block; width: 136px; height: 136px; aspect-ratio: auto;
                    border-radius: 10px; overflow: hidden;
                    background: var(--shop-bg-warm); border: 1px solid var(--shop-line); }
.shop-line__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* 좁은 자리에 상품명 전체 + 캡션을 넣을 수 없다.
   그대로 두면 "합성지(유포지)" 가 좌우로 깎이고 "상품 이미지 준비 중" 이 3줄로 뭉갠다. */
.shop-line__thumb .shop-ph { padding: 4px; width: 100%; height: 100%; }
.shop-line__thumb .shop-ph__mark { font-size: 12px; letter-spacing: -0.05em; text-align: center; }
.shop-line__thumb .shop-ph__cap { display: none; }
/* 정보는 한 덩어리다 — 이름이 먼저 읽히고, 규격·옵션·디자인·파일이 그 아래 붙는다 */
.shop-line__body { min-width: 0; display: flex; flex-direction: column; gap: 0; }
.shop-line__name { font-size: 16px; font-weight: var(--shop-fw-bold); line-height: 1.4; }
.shop-line__name:hover { text-decoration: underline; }
.shop-line__spec { display: grid; grid-template-columns: auto minmax(0, 1fr);
                   gap: 2px 12px; margin-top: 8px;
                   font-size: 13.5px; line-height: 1.55; }
.shop-line__spec dt { color: var(--shop-ink-4); }
.shop-line__spec dd { color: var(--shop-ink-2); min-width: 0; overflow-wrap: anywhere; }
/* ── 조작영역: 수량·수정·삭제가 **한 줄에서 같은 기준선**을 쓴다 ──
   ⚠️ 예전에는 수정/삭제가 밑줄 글자였고 `margin-left: auto` 로 오른쪽 끝에 떠 있어
      수량 컨트롤과 따로 노는 데다 버튼으로 보이지도 않았다(사장님 지적).
   ⚠️ 높이는 세 요소 모두 --shop-ctrl(44px) 하나로 맞춘다. */
.shop-line__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
                   margin-top: 14px; padding-top: 14px;
                   border-top: 1px solid var(--shop-line-2); }
.shop-line__actions { display: flex; align-items: center; gap: 8px; }
/* 삭제는 폼 안에 있다 — 폼이 상자를 만들면 기준선이 어긋난다 */
.shop-line__actions form { display: flex; margin: 0; }
/* ⚠️ 수량 컨트롤의 **바깥 상자**는 46px 이다(안쪽 44px + 테두리 1px 씩).
      버튼을 44px 로 두면 테두리 선이 1px 어긋나 세 요소가 미묘하게 안 맞는다(실측).
      그래서 조작영역의 높이를 46px 하나로 못 박는다 — 터치 하한 44px 은 그대로 지킨다. */
.shop-line__foot { --shop-lineact-h: 46px; }
.shop-line__foot .shop-btn { min-height: var(--shop-lineact-h); padding: 0 18px;
                             font-size: 13.5px; font-weight: var(--shop-fw-med); }
.shop-line__foot .shop-stepper { height: var(--shop-lineact-h); }
.shop-line__price { text-align: right; display: flex; flex-direction: column; gap: 2px;
                    align-items: flex-end; min-width: 128px; }
.shop-line__price strong { font-size: var(--shop-fs-xl); font-weight: var(--shop-fw-black);
                           white-space: nowrap; letter-spacing: -0.03em; }
.shop-line__price span { font-size: var(--shop-fs-xs); color: var(--shop-ink-4); }
.shop-line__changed { font-size: var(--shop-fs-xs); color: var(--shop-warn);
                      font-weight: var(--shop-fw-bold); text-align: right; margin-top: var(--shop-s1); }
.shop-line__off { font-size: var(--shop-fs-sm); color: var(--shop-warn);
                  font-weight: var(--shop-fw-bold); text-align: right; }

.shop-cart__summary { position: sticky; top: var(--shop-sticky-top); z-index: var(--shop-z-sticky); }
.shop-cart__box { border: 1px solid var(--shop-line); border-radius: var(--shop-radius-lg);
                  padding: var(--shop-s5); background: var(--shop-bg); box-shadow: var(--shop-shadow); }
.shop-cart__box h2 { font-size: var(--shop-fs-lg); margin-bottom: var(--shop-s3); }
.shop-cart__cta { display: flex; flex-direction: column; gap: var(--shop-s2); margin-top: var(--shop-s5); }
.shop-cart__gate { font-size: var(--shop-fs-xs); color: var(--shop-ink-4); margin-top: var(--shop-s2); }
.shop-cart__more { margin-top: var(--shop-s3); text-align: center; }
.shop-cart__more a { display: inline-flex; align-items: center; justify-content: center;
                     min-height: var(--shop-ctrl); font-size: var(--shop-fs-sm);
                     color: var(--shop-ink-2); text-decoration: underline; text-underline-offset: 3px; }
.shop-cart__bar { display: none; }

.shop-empty { border: 1px solid var(--shop-line); border-radius: var(--shop-radius-lg);
              padding: var(--shop-s8) var(--shop-s5); text-align: center; background: var(--shop-bg-soft); }
.shop-empty__title { font-size: var(--shop-fs-2xl); font-weight: var(--shop-fw-bold);
                     margin-bottom: var(--shop-s2); }
.shop-empty__lead { color: var(--shop-ink-2); margin-bottom: var(--shop-s5); }
.shop-empty__links { margin-bottom: var(--shop-s4); }
/* [V36G.1 Mobile Rhythm §3] 위 세 줄도 `.shop p`(0,1,1) 에 눌려 **한 번도 산 적이 없다** —
   빈 장바구니에서 제목·설명·CTA·추천칩 네 덩어리가 **간격 0px** 으로 붙어 있었다(390·430 실측).
   세 요소가 전부 `<p>` 라 같은 함정에 걸린다.
   ⚠️ 값을 새로 만들지 않았다. 위에 이미 적혀 있던 값을 명시도만 올려 살린다
      (제목→설명 8 · 설명→CTA 24 · CTA→칩 16). */
.shop .shop-empty__title { margin-bottom: var(--shop-s2); }
.shop .shop-empty__lead  { margin-bottom: var(--shop-s5); }
.shop .shop-empty__links { margin-bottom: var(--shop-s4); }
.shop-empty__quick { display: flex; gap: var(--shop-s2); justify-content: center; flex-wrap: wrap; }
.shop-empty__quick a { display: inline-flex; align-items: center; min-height: var(--shop-ctrl);
                       padding: 0 var(--shop-s4); border: 1px solid var(--shop-line);
                       border-radius: 999px; font-size: var(--shop-fs-sm); color: var(--shop-ink-2);
                       background: var(--shop-bg); }
.shop-empty__quick a:hover { border-color: var(--shop-ink); color: var(--shop-ink); }

/* ── 주문 가이드 ── */
/* `ol` 은 .shop-section 이 아니라서 아래 여백이 없다 — 다음 h2 가 카드에 붙어 버린다 */
.shop-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--shop-s3);
              margin-bottom: var(--shop-section-gap); }
/* 문단 바로 뒤에 버튼 줄이 오면 글자 위에 버튼을 얹은 것처럼 보인다 */
.shop-section > p + .shop-linkrow { margin-top: var(--shop-s4); }
.shop-steps li { border: 1px solid var(--shop-line); border-radius: var(--shop-radius);
                 padding: var(--shop-s5) var(--shop-s4); background: var(--shop-bg); }
.shop-steps__n { display: grid; place-items: center; width: 32px; height: 32px;
                 border-radius: 50%; background: var(--shop-ink); color: #fff;
                 font-size: var(--shop-fs-sm); font-weight: var(--shop-fw-black);
                 margin-bottom: var(--shop-s3); }
.shop-steps strong { display: block; margin-bottom: 4px; font-size: var(--shop-fs-md); }
.shop-steps span { font-size: var(--shop-fs-sm); color: var(--shop-ink-3); }

.shop-guide { display: flex; flex-direction: column; gap: var(--shop-s3);
              margin-bottom: var(--shop-section-gap); }
.shop-guide__step { display: flex; gap: var(--shop-s5); border: 1px solid var(--shop-line);
                    border-radius: var(--shop-radius-lg); padding: var(--shop-s5);
                    background: var(--shop-bg); }
.shop-guide__step.is-soon { background: var(--shop-bg-soft); }
.shop-guide__n { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center;
                 background: var(--shop-ink); color: #fff; border-radius: 50%;
                 font-weight: var(--shop-fw-black); }
.shop-guide__step.is-soon .shop-guide__n { background: var(--shop-ink-4); }
.shop-guide h2 { font-size: var(--shop-fs-lg); margin-bottom: 4px; display: flex;
                 align-items: center; gap: var(--shop-s2); }
.shop-guide p { font-size: var(--shop-fs-md); color: var(--shop-ink-2); }
.shop-guide__tag { font-style: normal; font-size: 10px; font-weight: var(--shop-fw-med);
                   color: var(--shop-ink-4); border: 1px solid var(--shop-line);
                   border-radius: 999px; padding: 2px 8px; }

/* ── 고객지원 허브 ── */
/* ⚠️ `align-items: start` — 격자 기본값(stretch)이면 내용이 짧은 카드
   (준비 중인 "배송·출고"·"후가공 가이드")가 옆 카드 높이까지 늘어나
   200px 짜리 빈 흰 상자가 된다. 지원 카드는 높이가 달라도 된다. */
.shop-support { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: var(--shop-s3); align-items: start; }
.shop-support__card { display: flex; flex-direction: column; gap: 4px; padding: var(--shop-s5);
                      border: 1px solid var(--shop-line); border-radius: var(--shop-radius-lg);
                      background: var(--shop-bg); }
.shop-support__card h2, .shop-support__card h3 { font-size: var(--shop-fs-lg); }
.shop-support__card p { font-size: var(--shop-fs-sm); color: var(--shop-ink-2); }
.shop-support__card dl { margin-top: var(--shop-s2); font-size: var(--shop-fs-sm); }
.shop-support__card dt { font-weight: var(--shop-fw-bold); margin-top: var(--shop-s3); }
.shop-support__card dd { margin: 3px 0 0; color: var(--shop-ink-2); }
.shop-support__card .shop-linkrow { margin-top: auto; padding-top: var(--shop-s4); }

/* ── 예상견적서 ── */
.shop-estimate { border: 0; border-radius: var(--shop-radius-lg); padding: 0;
                 width: min(780px, 94vw); max-height: 88vh; overflow: auto;
                 z-index: var(--shop-z-modal); }
.shop-estimate::backdrop { background: rgba(16, 24, 40, .5); }
.shop-estimate__bar { display: flex; justify-content: space-between; align-items: center;
                      gap: var(--shop-s3); padding: var(--shop-s4) var(--shop-s5);
                      border-bottom: 1px solid var(--shop-line); position: sticky; top: 0;
                      background: var(--shop-bg); }
.shop-estimate__bar span { display: flex; gap: var(--shop-s2); }
.shop-estimate__doc { padding: var(--shop-s6); }
.estimate-doc__head h1 { font-size: var(--shop-fs-2xl); }
.estimate-doc__sub { font-size: var(--shop-fs-xs); color: var(--shop-ink-4); margin-top: 4px; }
.estimate-doc__meta { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--shop-s4);
                      margin: var(--shop-s5) 0; font-size: var(--shop-fs-sm); }
.estimate-doc__meta dt { color: var(--shop-ink-4); }
.estimate-doc__table { width: 100%; border-collapse: collapse; font-size: var(--shop-fs-sm);
                       margin-bottom: var(--shop-s4); }
.estimate-doc__table th, .estimate-doc__table td { border-bottom: 1px solid var(--shop-line-2);
                                                   padding: 9px 6px; text-align: left; }
.estimate-doc__table th { color: var(--shop-ink-4); font-weight: var(--shop-fw-med);
                          font-size: var(--shop-fs-xs); }
.estimate-doc__table .is-num { text-align: right; }
.estimate-doc__table .is-item td { font-weight: var(--shop-fw-bold); border-top: 1px solid var(--shop-line); }
.estimate-doc__table .is-sub td { color: var(--shop-ink-3); font-size: var(--shop-fs-sm);
                                  border-bottom: 0; padding-top: 4px; padding-bottom: 4px; }
.estimate-doc__table .is-sub td:first-child { padding-left: var(--shop-s4); }
.estimate-doc__sum { display: grid; grid-template-columns: 1fr auto; gap: 6px var(--shop-s3);
                     font-size: var(--shop-fs-sm); border-top: 1px solid var(--shop-line);
                     padding-top: var(--shop-s3); }
.estimate-doc__sum dd { text-align: right; }
.estimate-doc__sum .is-total { font-size: var(--shop-fs-xl); font-weight: var(--shop-fw-black); }
.estimate-doc__foot { margin-top: var(--shop-s5); padding-top: var(--shop-s4);
                      border-top: 1px solid var(--shop-line-2); font-size: var(--shop-fs-xs);
                      color: var(--shop-ink-2); }
.estimate-doc__foot p { margin-bottom: 4px; }
.estimate-doc__foot .is-notice { color: var(--shop-ink-4); }

/* ══════ [V36G.1 Gate6R] Reference-First 재구축 — 기존 컴포넌트의 modifier 3개 ══════
   새 컴포넌트를 만들지 않는다. Home 이 쓰는 것을 카테고리/검색이 그대로 쓴다. */

/* 카테고리 히어로 — Home 히어로와 같은 전폭 밴드.
   [Shop UI Follow-up §7] 높이 두 줄(246px · padding s6)은 **여기서 지웠다.**
   같은 선택자를 파일 뒤(§7 블록)에서 다시 선언하고 있어 이 두 줄은 **한 번도 적용된 적이 없다.**
   그런데 회귀 단언 H7 이 이 죽은 줄을 글자로 찾고 있어서 `246px` 이 지켜지는 것처럼 보였다
   (거짓 초록 — 화면은 이미 340px 이었다). 죽은 줄을 지우고 단언은 **이기는 선언**을 재게 고쳤다.
   ⚠️ 아래 세 줄은 살아 있다(뒤에서 다시 선언하지 않는다) — 지우지 않는다. */
/* [2026-08-30] `__catname` 은 분류를 대신하는 상품 화면(현수막 계산기)이 쓰는 칸이다.
   그 화면의 h1 은 상품명이라 여기에 제목을 하나 더 두면 안 된다 — 그래서 태그는 `p` 이고
   **보이는 크기만** 분류 화면의 제목과 같게 맞춘다. */
.shop-hero.shop-hero--cat h1,
.shop-hero.shop-hero--cat .shop-hero__catname {
    margin: 0; font-size: var(--shop-fs-3xl); max-width: 20ch;
    font-weight: var(--shop-fw-bold); line-height: 1.24; letter-spacing: -0.02em;
    color: var(--shop-ink); }
.shop .shop-hero--cat .shop-hero__lead { font-size: var(--shop-fs-lg); margin-top: var(--shop-s3); }
/* 계산기 위 Hero 는 상품 조판과 붙어 있으므로 아래 여백을 분류 화면보다 좁게 둔다. */
.shop-hero.shop-hero--prodcat { margin-bottom: var(--shop-s6); }
.shop-hero.shop-hero--cat .shop-cathero__stat { margin-top: var(--shop-s4); }
/* 이미지가 없는 카테고리는 밴드만 남는다 — 글자를 덮을 것이 없으니 가림막도 끈다 */
.shop-hero.shop-hero--cat:not(:has(.shop-hero__visual))::after { content: none; }

/* 세부 분류 줄 — 레퍼런스 01 의 카테고리 8칸(각 111px · 간격 13px)을 그대로.
   `/category/print` 의 2차가 정확히 8개라 칸 수가 1:1 이다. */
.shop-cats .shop-promo--wide { grid-template-columns: repeat(8, minmax(0, 1fr)); }
/* 8칸에서는 칸 폭이 138px 라 자리표시자 글자가 제목과 크기가 비슷해져 두 번 읽힌다.
   사진이 들어오면 사라질 자리이므로 글자만 줄인다. */
.shop-cats .shop-promo--wide .shop-ph__mark { font-size: var(--shop-fs-md); }
.shop-cats .shop-promo--wide .shop-ph__cap { font-size: 10px; }

/* 형제 분류 이동 — 레퍼런스 03 탭 줄의 역할. 새 탭 컴포넌트를 만들지 않고
   카테고리가 이미 쓰는 필터 칩을 그대로 쓴다(활성 = 브론즈 면). */
.shop-chips--tabs { margin-bottom: var(--shop-s5); }

/* 구매 조작부 — 레퍼런스 06 의 본문 하단 전역 행.
   레퍼런스는 옵션이 끝난 뒤 가로 한 줄에 버튼을 오른쪽으로 모은다. */
.shop-detail__actions { margin-top: var(--shop-s6); padding-top: var(--shop-s5);
                        border-top: 1px solid var(--shop-line); }
.shop-detail__actions .shop-detail__cta { flex-direction: row; justify-content: flex-end;
                                          flex-wrap: wrap; margin-top: 0; }
.shop-detail__actions .shop-detail__gate,
.shop-detail__actions .shop-detail__result { text-align: right; }
.shop-detail__actions .shop-detail__result { justify-content: flex-end; }

/* 규격 초과 안내 — 제작 한계 블록을 없애고 이 자리로 옮겼다.
   ⚠️ 평소에는 없다. 서버가 사유를 돌려줬을 때만 나타난다. */
.shop-field__err { margin-top: 6px; font-size: var(--shop-fs-sm); color: var(--shop-warn);
                   font-weight: var(--shop-fw-bold); line-height: 1.45; }
.shop-field__err[hidden] { display: none; }

/* 이어지는 정보 구획 — 본문 폭을 다 쓴다(좌열 620px 제한은 폼 안에 있을 때 이야기였다) */
.shop-main > .shop-detail__about { max-width: none; margin-top: var(--shop-s7); }
.shop-main > .shop-detail__about h2 { font-size: var(--shop-fs-xl); margin: 0 0 var(--shop-s3); }


/* ══════════════════════════ 7. RESPONSIVE ══════════════════════════ */

@media (max-width: 1200px) {
    .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .shop-detail { grid-template-columns: minmax(0, 73fr) minmax(280px, 27fr); gap: var(--shop-s6); }
    /* [V36G.1 Gate6] 한 줄 8칸은 본문 폭 1240px 에서만 들어간다. 1024 에서 그대로 두면
       7~8번째 분류가 상자 밖으로 나가 **잘려서 아예 닿을 수 없었다**(실측).
       모바일과 같은 가로 스크롤 줄로 내린다. */
    .shop-subnav { display: flex; grid-auto-flow: unset; overflow-x: auto;
                   scroll-snap-type: x proximity; padding-bottom: 4px; }
    .shop-subnav a { flex: 0 0 auto; width: 168px; scroll-snap-align: start; }
    /* [Shop UI Follow-up §8] 옆칸 축소 규칙은 지웠다 — 이제 옆칸 자체가 없다.
       좁아진 폭만큼 이미지도 같이 좁아지므로 여기서 따로 줄일 것이 없다. */
}

@media (max-width: 1024px) {
    :root { --shop-fs-hero: 36px; --shop-fs-3xl: 28px; --shop-section-gap: 52px; }
    .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* 1024 에서는 좌측 열이 좁아진다 — 소재는 2열까지만 */
    .shop-detail__main .shop-choices,
    .shop-detail__main .shop-field .shop-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shop-gnb { gap: var(--shop-s5); font-size: var(--shop-fs-md); }
    .shop-header__bar { gap: var(--shop-s4); }
    .shop-promo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--shop-s3); }
    .shop-promo__name { font-size: var(--shop-fs-xl); }
    .shop-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* [V36G.1 Gate6] 한 줄 8칸은 **데스크톱 폭 전용**이다. 390px 에서 그대로 두면 칸이 48px 이 되어
       "유 리 · 투 명" 처럼 한 글자씩 끊긴다(실측). 레퍼런스 모바일(04)의 칩 줄처럼
       **가로로 넘겨 보는 한 줄**로 바꾼다 — 정렬 줄이 이미 쓰는 패턴이다(카테고리 계약 §9). */
    .shop-subnav { display: flex; grid-auto-flow: unset; overflow-x: auto;
                   scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
                   padding-bottom: 4px; }
    .shop-subnav a { flex: 0 0 auto; width: 150px; scroll-snap-align: start; }
    .shop-subnav a > span:not(.shop-subnav__count) { display: none; }
    .shop-catlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shop-support { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shop-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shop-cart { grid-template-columns: minmax(0, 1fr) minmax(260px, 300px); }
    .shop-footer__cols { grid-template-columns: 1fr 1fr 1fr; }
    .shop-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    /* 상품상세 — 상품 신원 → 스펙 → 옵션 → 견적 요약 → 설명
       [V36G.1 Gate6] 레퍼런스 모바일(390px)의 순서를 그대로 따른다: `1. 상품/옵션` 다음이
       `2. 견적 요약` 이고, 읽을거리(설명·가이드)는 그 뒤다. 예전에는 주문 패널이 스펙보다
       먼저 와서, 무엇을 사는지 보기 전에 옵션부터 만나게 돼 있었다.
       ⚠️ `align-items: stretch` 를 되돌려 놓아야 한다. 기본 격자의 `align-items: start` 가
          flex column 에서는 **가로 축**으로 해석돼 이미지가 내용 크기로 쪼그라든다. */
    .shop-detail { display: flex; flex-direction: column; align-items: stretch;
                   gap: var(--shop-s5); }
    .shop-detail__main { display: contents; }
    /* [Shop UI Follow-up §8] 앞 판(Gate6)은 "썸네일이 첫 화면의 절반을 먹으면 옵션이 밀린다"는
       이유로 104px 짜리 작은 썸네일 행을 썼다. **사장님이 그 판단을 뒤집으셨다** —
       "모바일에서 이미지가 축소되면 안 된다 · 썸네일 수준 크기 금지 · 옵션 전에 충분한 크기로".
       그래서 모바일도 데스크톱과 **같은 세로 흐름**을 쓴다: 이미지(전폭) → 이름 → 옵션.
       ⚠️ 옵션이 밀리는 것은 사실이다. 대신 접이식(`<details>`)이 2~4번째를 접어 두므로
          한 화면에 옵션 첫 묶음까지는 들어온다 — 그 장치를 여기서 없애면 안 된다. */
    .shop-detail__id { order: 1; grid-template-columns: minmax(0, 1fr);
                       gap: var(--shop-s4); align-items: stretch; margin-bottom: 0; }
    /* [V36G.1 Media Pair §7] 모바일에서도 **한 줄 2열**을 유지한다.
       사장님 기준은 "작은 카드도 허용 · 한 화면 정보 밀도 우선" 이다 —
       390/430 에서 임의로 세로로 쌓지 않는다. gap 만 줄인다. */
    /* [V36G.1 §7] `gap` 이 아니라 **변수**를 바꾼다 — 가운데 정렬 규칙이 같은 값으로
       한 칸 폭을 계산하므로, 여기서 gap 만 따로 줄이면 두 값이 어긋난다. */
    .shop-detail__media { --media-gap: var(--shop-s3); }
    /* [V36G.1 Gate6R.3B §2] 요약 3박스의 모바일 순서 규칙도 함께 지웠다(마크업 없음). */
    /* [V36G.1 Gate6] 3열은 **데스크톱 폭 전용**이다. 390px 에서 3열로 두면 "일 반 현 수 막" 처럼
       한 글자씩 끊긴다(실측). 모바일에서는 한 줄에 하나씩 둔다. */
    .shop-detail__main .shop-choices,
    .shop-detail__main .shop-field .shop-choices { grid-template-columns: 1fr; }
    .shop-panel { order: 3; border: 0; padding: 0; }
    /* [V36G.1] `align-self: stretch` 를 **반드시 함께** 되돌린다.
       데스크톱에서 `.shop-detail__buy` 에 걸어 둔 `align-self: start` 는 우측 sticky 패널이
       세로로 늘어나지 않게 하려고 건 것인데, 모바일에서 부모가 `flex-direction: column`
       으로 바뀌면 그 값이 **가로 축**을 담당하게 된다. 그래서 부모의 `align-items: stretch`
       를 이겨 버리고 요약 칸만 내용 폭으로 쪼그라들었다 —
       실측 390px 에서 옵션 패널 358px 옆에 견적 요약이 **222.5px**(오른쪽에 76~116px 공백).
       사장님이 보신 "한쪽으로 쏠림" 의 정확한 원인이 이 한 줄이었다.
       ⚠️ `text-align` 으로 덮지 않는다. 내부 정보의 좌측 정렬은 그대로 두고
          **칸 자체의 폭만** 본문 축에 맞춘다. */
    .shop-detail__buy { order: 4; position: static; border: 0; padding: 0; box-shadow: none;
                        align-self: stretch; }
    .shop-detail__about { order: 5; margin-top: var(--shop-s2); max-width: none; }
    .shop-detail__info { margin-top: var(--shop-s5); }

    /* 장바구니 — 카드 + 하단 고정 합계 */
    .shop-cart { display: block; }
    .shop-cart__summary { position: static; margin-top: var(--shop-s5); }
    .shop-cart__box { box-shadow: none; }
    /* 모바일도 사진을 키운다 — 88px 은 무엇을 담았는지 알아볼 수 없었다 */
    .shop-line { grid-template-columns: 96px minmax(0, 1fr);
                 grid-template-areas: "thumb body" "price price"; gap: 14px; padding: 14px; }
    .shop-line__thumb { grid-area: thumb; width: 96px; height: 96px; }
    .shop-line__body { grid-area: body; }
    /* 조작영역: 수량은 한 줄, 수정·삭제는 그 아래 2열 — 둘 다 44px 터치영역을 채운다 */
    .shop-line__actions { flex: 1 1 100%; display: grid;
                          grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .shop-line__actions .shop-btn { width: 100%; }
    .shop-line__price { grid-area: price; flex-direction: row; align-items: center;
                        justify-content: space-between; text-align: left; min-width: 0;
                        border-top: 1px solid var(--shop-line-2); padding-top: var(--shop-s3); }
    .shop-line__price > span { order: -1; }
    .shop-line__changed, .shop-line__off { text-align: left; flex-basis: 100%; }
    .shop-cart__bar { display: flex; align-items: center; gap: var(--shop-s3);
                      position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--shop-z-bar);
                      padding: var(--shop-s3) var(--shop-s4);
                      padding-bottom: calc(var(--shop-s3) + env(safe-area-inset-bottom, 0px));
                      background: var(--shop-bg); border-top: 1px solid var(--shop-line);
                      box-shadow: var(--shop-shadow-up); }
    .shop-cart__bar-sum { display: flex; flex-direction: column; line-height: 1.25; }
    .shop-cart__bar-sum span { font-size: var(--shop-fs-xs); color: var(--shop-ink-4); }
    .shop-cart__bar-sum strong { font-size: var(--shop-fs-xl); font-weight: var(--shop-fw-black); }
    .shop-cart__bar .shop-btn { margin-left: auto; }
    /* ⚠️ 본문뿐 아니라 **푸터에도** 자리를 만들어야 한다. main 에만 주면
       끝까지 내렸을 때 고정 합계바가 푸터의 법적 링크·저작권 줄을 덮는다. */
    body.shop:has(.shop-cart__bar) .shop-main { padding-bottom: var(--shop-s5); }
    body.shop:has(.shop-cart__bar) .shop-footer { padding-bottom: 96px; }

    /* ── [V36G.1 FIX-003] 상품상세 모바일 하단 구매바 ──
       **이 breakpoint 인 이유**: 바로 위에서 `.shop-detail__buy` 의 sticky 가 풀린다.
       우측 sticky 패널이 구매 행동을 붙들어 주던 것이 여기서 끝나므로, 같은 지점에서
       고정바가 이어받아야 구매 수단이 끊기는 구간이 생기지 않는다.
       장바구니 바(위)·주문서 바와 같은 패턴이다 — 새 체계를 만들지 않았다. */
    .shop-detail__bar { display: flex; align-items: center; gap: var(--shop-s3);
                        position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--shop-z-bar);
                        padding: var(--shop-s3) var(--shop-gutter);
                        padding-bottom: calc(var(--shop-s3) + env(safe-area-inset-bottom, 0px));
                        background: var(--shop-bg); border-top: 1px solid var(--shop-line-2);
                        box-shadow: var(--shop-shadow-up); }
    .shop-detail__barsum { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
    .shop-detail__barlabel { font-size: var(--shop-fs-xs); color: var(--shop-ink-3); }
    .shop-detail__baramt { font-size: var(--shop-fs-xl); font-weight: var(--shop-fw-black);
                           color: var(--shop-price); }
    .shop-detail__barbtn { margin-left: auto; flex: none; }
    /* 장바구니에서와 같은 이유로 **푸터에도** 자리를 만든다 — 법적 링크가 가리면 안 된다. */
    body.shop:has(.shop-detail__bar) .shop-main   { padding-bottom: var(--shop-s5); }
    body.shop:has(.shop-detail__bar) .shop-footer { padding-bottom: 96px; }
}

@media (max-width: 860px) {
    .shop-promo { grid-template-columns: 1fr; }
    .shop-promo__item { flex-direction: row; }
    .shop-promo__visual { flex: 0 0 40%; aspect-ratio: auto; }
    .shop-promo__body { padding: var(--shop-s4); }
}

@media (max-width: 720px) {
    :root { --shop-fs-hero: 30px; --shop-fs-3xl: 25px; --shop-fs-2xl: 21px;
            --shop-section-gap: 44px; --shop-card-gap: 12px; --shop-header-h: 56px; }

    .shop-topbar { display: none; }
    .shop-burger { display: inline-flex; align-items: center; justify-content: center; }
    .shop-header__bar { flex-wrap: wrap; gap: var(--shop-s3); padding: var(--shop-s2) var(--shop-gutter); }
    .shop-logo { font-size: 19px; margin-right: auto; }
    .shop-search { order: 3; flex-basis: 100%; max-width: none; }
    .shop-search input, .shop-search button { height: var(--shop-ctrl); }
    .shop-util { gap: var(--shop-s3); }
    /* 모바일 헤더는 `[☰][로고][장바구니]` 만 남긴다. 회원 진입은 드로어가 맡는다.
       ⚠️ [V36G.1 FIX-001] 로그아웃은 `<a>` 가 아니라 form 이라 위 선택자에 걸리지 않는다.
          함께 숨기지 않으면 모바일 헤더에 버튼이 하나 더 생겨 밀도가 깨진다. */
    .shop-util a:not(.shop-util__cart) { display: none; }
    .shop-util__out { display: none; }
    .shop-gnb { display: none; }
    .shop-main { padding: var(--shop-s4) var(--shop-gutter) var(--shop-s7); }

    .shop-hero__in { padding: 34px var(--shop-gutter) 30px; }
    .shop-hero h1 { max-width: none; }
    .shop-hero__lead { font-size: var(--shop-fs-md); }
    .shop-hero__cta { flex-direction: column; align-items: stretch; gap: var(--shop-s2); }
    .shop-hero__cta .shop-btn--lg { min-height: var(--shop-ctrl); font-size: var(--shop-fs-md); }
    /* 칩이 3줄로 쌓이면 히어로만 한 화면을 다 먹는다 — 한 줄로 두고 옆으로 넘긴다 */
    .shop-hero .shop-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
                             margin-inline: calc(-1 * var(--shop-gutter));
                             padding-inline: var(--shop-gutter); }
    .shop-hero .shop-chips::-webkit-scrollbar { display: none; }
    .shop-hero .shop-chips a, .shop-hero .shop-chips__label { flex: 0 0 auto; }
    .shop-hero__facts { gap: var(--shop-s4); font-size: var(--shop-fs-xs); }
    .shop-hero__facts strong { font-size: var(--shop-fs-lg); }

    .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* 2열에서는 카드가 좁아 4:3 이미지가 작아진다 — 정사각으로 바꿔 이미지 비중을 지킨다(§13·§47).
       상세 이미지·장바구니 썸네일은 그대로 4:3 이다(가로로 긴 출력물이 자연스럽다). */
    .shop-card__thumb { aspect-ratio: 1 / 1; }
    .shop-card__body { padding: var(--shop-s3); gap: 3px; }
    .shop-card__name { font-size: var(--shop-fs-md); }
    .shop-card__lead { -webkit-line-clamp: 2; font-size: var(--shop-fs-xs); }
    .shop-card__price strong { font-size: var(--shop-fs-lg); }
    .shop-card__cta { display: none; }

    .shop-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shop-subnav a { width: 138px; }
    .shop-catlist { grid-template-columns: 1fr; }
    .shop-support { grid-template-columns: 1fr; }
    .shop-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* [V36G.1 Gate6R.3B §2] 요약 3박스의 좁은 화면 규칙도 함께 지웠다(마크업 없음). */
    .shop-section--split { gap: var(--shop-s5); }

    .shop-toolbar { gap: var(--shop-s2); }
    .shop-filter-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .shop-sort { margin-left: auto; }
    .shop-sort ul { overflow-x: auto; flex-wrap: nowrap; }

    /* 필터는 하단 시트로 — 데스크톱 chips 를 축소하지 않는다.
       ⚠️ `.shop-filters { display: flex }` 가 UA 의 `[hidden]` 을 이긴다.
          모바일에서는 시트가 열릴 때만 보여야 하므로 여기서 되살린다. */
    .shop-filters[hidden] { display: none; }
    .shop-filters { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--shop-z-bar);
                    flex-direction: column; gap: var(--shop-s4); margin: 0;
                    border-radius: var(--shop-radius-lg) var(--shop-radius-lg) 0 0;
                    background: var(--shop-bg); box-shadow: var(--shop-shadow-up);
                    max-height: 76vh; overflow-y: auto;
                    padding: var(--shop-s5) var(--shop-s4);
                    padding-bottom: calc(var(--shop-s5) + env(safe-area-inset-bottom, 0px)); }
    .shop-filters::before { content: "필터"; font-size: var(--shop-fs-lg);
                            font-weight: var(--shop-fw-bold); }
    .shop-filters__foot { margin-left: 0; width: 100%; justify-content: space-between;
                          position: sticky; bottom: 0; background: var(--shop-bg);
                          padding-top: var(--shop-s3); border-top: 1px solid var(--shop-line); }
    .shop-filters__foot .shop-btn { display: inline-flex; flex: 1 1 auto; }
    .shop-filters__clear { margin-left: 0; }

    .shop-empty-state { flex-direction: column; align-items: flex-start; padding: var(--shop-s5); }
    .shop-empty-state__links { margin-left: 0; }
    .shop-guide__step { gap: var(--shop-s3); padding: var(--shop-s4); }
    .shop-upload { padding: var(--shop-s4); }
    .shop-upload__pick .shop-btn { min-height: var(--shop-ctrl-lg); font-size: var(--shop-fs-md); }
    .shop-upload__list li { flex-wrap: wrap; }
    .shop-upload__name { flex-basis: 100%; white-space: normal; overflow-wrap: anywhere; }
    .shop-dcard { padding: var(--shop-s4); }
    .shop-line__spec { grid-template-columns: 44px minmax(0, 1fr); }
    .shop-estimate__doc { padding: var(--shop-s4); }

    .shop-footer__cols { grid-template-columns: 1fr 1fr; gap: var(--shop-s5);
                         padding-top: var(--shop-s6); }
    .shop-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .shop-field .shop-choices { grid-template-columns: 1fr; }
    .shop-promo__item { flex-direction: column; }
    .shop-promo__visual { flex: none; aspect-ratio: 16 / 9; }
    .shop-steps { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
    .shop-grid { gap: 10px; }
    .shop-tiles { grid-template-columns: 1fr; }

    /* [V36G.1 FIX-011] 이 폭에서만 완료 화면 CTA 두 개가 한 줄에 못 들어간다.
       그대로 두면 자연폭(147px / 141px)으로 쌓여 끝선이 6px 어긋나고, 모바일 주 CTA 인데
       full-width 가 아니다(로그인·회원가입 버튼은 이미 full-width 라 일관성도 어긋난다).
       ⚠️ 430 은 한 줄에 들어가므로 건드리지 않는다 — 그래서 720 이 아니라 400 블록이다. */
    .shop-result__cta { flex-direction: column; align-items: stretch; }
    .shop-result__cta .shop-btn { width: 100%; }

    /* [V36G.1 FIX-022] 주문 상세 동의 줄 규칙은 여기가 아니라 파일 뒤쪽,
       주문 상세 기본 규칙 **다음**의 400px 블록에 있다.
       같은 특정도면 뒤에 오는 쪽이 이기므로 여기 두면 덮인다(실제로 겪었다). */
}

/* ══════════════════════════ 8. TOUCH ══════════════════════════
   폭이 아니라 **입력 방식**으로 가른다. 손가락으로 누르는 기기면 44px 을 준다.
   마우스 데스크톱의 밀도는 건드리지 않는다. */
@media (max-width: 720px), (pointer: coarse) {
    .shop-breadcrumb a, .shop-breadcrumb span[aria-current] {
        display: inline-flex; align-items: center; justify-content: center;
        min-height: var(--shop-ctrl); min-width: var(--shop-ctrl); padding: 0 var(--shop-s2); }
    /* [Owner Audit Batch 1B §15] 모바일은 위 규칙이 줄 높이를 이미 44px 로 키운다.
       데스크톱 여백(27/22)을 그대로 두면 제목까지 71px 이 비어 "과도한 공백" 이 된다.
       ⚠️ 줄여도 GNB 와 붙지 않는다 — 44px 타깃 자체가 시각적 간격을 만든다. */
    .shop-breadcrumb { padding-top: 12px; margin-bottom: 8px; }
    .shop-footer__cols li a { min-height: var(--shop-ctrl); min-width: var(--shop-ctrl); }
    .shop-footer__cols li { border-bottom: 1px solid var(--shop-line-2); }
    .shop-footer__legal a, .shop-topbar a { min-height: var(--shop-ctrl); min-width: var(--shop-ctrl); }
    .shop-subcats a, .shop-chip, .shop-opt, .shop-chips a { min-height: var(--shop-ctrl); padding: 0 var(--shop-s4); }
    /* 구매 조작부는 모바일에서 전폭 세로 스택 — 44px 타깃을 확보한다.
       ⚠️ 하단 고정 구매바(FIX-003)는 그대로 둔다. 레퍼런스 모바일도 "하단 고정 CTA" 다. */
    .shop-detail__actions .shop-detail__cta { flex-direction: column; }
    .shop-detail__actions .shop-detail__cta .shop-btn { width: 100%; }
    .shop-detail__actions .shop-detail__gate,
    .shop-detail__actions .shop-detail__result { text-align: left; }

    /* 형제 분류가 8개라 390px 에 한 줄로 안 들어간다 — 레퍼런스 04 의 칩 줄처럼 넘겨 본다 */
    .shop-chips--tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
                        -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
    .shop-chips--tabs::-webkit-scrollbar { display: none; }
    .shop-chips--tabs .shop-chip { flex: 0 0 auto; }
    .shop-sort a { min-height: var(--shop-ctrl); padding: 0 var(--shop-s3); }
    .shop-filters__clear { display: inline-flex; align-items: center; min-height: var(--shop-ctrl); }
    .shop-preset { min-height: var(--shop-ctrl); padding: 0 var(--shop-s3); font-size: var(--shop-fs-sm); }
    .shop-placeholder__links a { min-height: var(--shop-ctrl); }
    .shop-gnb a, .shop-drawer a { min-height: var(--shop-ctrl); min-width: var(--shop-ctrl); }
    /* [V36G.1 FIX-001] 드로어 로그아웃 버튼도 같은 터치 하한을 받는다 */
    .shop-drawer__out button { min-height: var(--shop-ctrl); }
    .shop-util a { min-width: var(--shop-ctrl); justify-content: center; }
    .shop-logo { min-height: var(--shop-ctrl); }
    .shop-line__name, .shop-section__more, .shop-catlist__item h2 a, .shop-catlist__go {
        display: inline-flex; align-items: center;
        min-height: var(--shop-ctrl); min-width: var(--shop-ctrl); }
    .shop-linkrow a, .shop-section__note a, .shop-support a, .shop-meta a,
    .shop-empty__quick a, .shop-cart__more a, .shop-tile, .shop-subnav a {
        display: inline-flex; align-items: center;
        min-height: var(--shop-ctrl); min-width: var(--shop-ctrl); }
    .shop-tile, .shop-subnav a { display: flex; flex-direction: column; align-items: flex-start; }
    .shop-card__cta { min-height: var(--shop-ctrl); }
    :root { --shop-ctrl-sm: 44px; }
}

/* ══════════════════════════ 9. PRINT ══════════════════════════ */
@media print {
    .shop-header, .shop-topbar, .shop-footer, .shop-detail__main, .shop-assist,
    .shop-breadcrumb, .shop-devbar, .shop-estimate__bar, .shop-cart__bar, .shop-detail__bar,
    .shop-cart__summary, .shop-cart__lines, .shop-hero { display: none !important; }
    .shop-estimate { position: static; width: auto; max-height: none; overflow: visible; }
    .shop-estimate__doc { padding: 0; }
}

/* ══════════════════════════════════════════════════════════════════
   [V36G] 주문서 · 폼 · 동의 · 결과
   Visual System v2 토큰만 쓴다. 새 색·새 간격을 만들지 않는다.
   ══════════════════════════════════════════════════════════════════ */

/* ── 단계 표시 ── */
/* ── 주문 단계 표시 — 레퍼런스 06 ────────────────────────────────────────
   레퍼런스는 **테두리 없는 원형 번호 + 사이를 잇는 가는 선**이다. 알약(pill) 다섯 개가
   나란히 있으면 각각이 버튼처럼 보이고, 다섯 개가 화면 폭을 다 먹는다(1440 실측).
   ⚠️ 단계 수는 **코드 값 그대로 5개**다(`ShopCheckoutPolicy::STEPS`). 줄이지 않는다.
   ⚠️ `justify-content` 로 늘리지 않는다 — 항목 수가 바뀌어도 간격이 흔들리지 않게
      각 항목이 같은 폭(`1fr`)을 갖는 grid 로 둔다. */
.shop-steps2 { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
               gap: 0; margin: 0 0 var(--shop-s6); padding: 0; list-style: none; }
.shop-steps2__i { display: flex; flex-direction: column; align-items: center;
                  gap: var(--shop-s2); padding: 0; border: 0; background: none;
                  position: relative;
                  font-size: var(--shop-fs-sm); color: var(--shop-ink-3); }
/* 잇는 선 — 앞 항목의 오른쪽 절반과 이 항목의 왼쪽 절반을 잇는다 */
.shop-steps2__i + .shop-steps2__i::before { content: ""; position: absolute;
    top: 15px; right: 50%; left: -50%; height: 1px; background: var(--shop-line-2); }
.shop-steps2__n { display: inline-flex; align-items: center; justify-content: center;
                  width: 30px; height: 30px; border-radius: 50%; position: relative; z-index: 1;
                  background: var(--shop-bg-soft); color: var(--shop-ink-3);
                  font-size: var(--shop-fs-sm); font-weight: var(--shop-fw-bold);
                  box-shadow: 0 0 0 4px var(--shop-bg); }
.shop-steps2__t { text-align: center; }
.shop-steps2__i.is-done { color: var(--shop-ink-2); }
.shop-steps2__i.is-done .shop-steps2__n { background: var(--shop-accent-soft);
                                          color: var(--shop-accent-ink); }
.shop-steps2__i.is-done + .shop-steps2__i::before,
.shop-steps2__i.is-now::before { background: var(--shop-accent); }
.shop-steps2__i.is-now { color: var(--shop-ink); font-weight: var(--shop-fw-bold); }
.shop-steps2__i.is-now .shop-steps2__n { background: var(--shop-accent); color: #fff; }

/* [2026-09-06] 여기 있던 `.shop-co .shop-form …` 라벨 왼쪽 조판 블록을 지웠다.
   주문서를 한 화면으로 다시 짜면서 폼 클래스가 `shop-co__form` 이 되었고,
   그때부터 이 규칙은 **어디에도 걸리지 않았다.**
   실측(2026-09-06, 개발 서버 8개 화면 DOM 질의): `.shop-co .shop-form` 일치 0개.
     · `.shop-co` 가 있는 화면은 주문서뿐인데 그 안에 `.shop-form` 이 없다
     · `.shop-form` 을 쓰는 화면(주문조회·로그인·회원가입)에는 `.shop-co` 가 없다
   라벨 왼쪽 조판이 필요하면 `.shop .shop-co .shop-fld` 쪽에서 다시 세운다 —
   죽은 선택자를 남겨 두면 다음 사람이 "이미 있다" 고 믿는다. */


/* ── 폼 한 줄 ── */
.shop-form { display: flex; flex-direction: column; gap: var(--shop-s4); }
.shop-fld { display: flex; flex-direction: column; gap: var(--shop-s1); }
.shop-fld__l { font-size: var(--shop-fs-sm); font-weight: var(--shop-fw-med); color: var(--shop-ink-2); }
.shop-fld__req { color: var(--shop-warn); margin-left: 2px; }
.shop-fld__i { width: 100%; min-height: var(--shop-ctrl); padding: 0 var(--shop-s3);
               border: 1px solid var(--shop-line-2); border-radius: var(--shop-radius);
               background: var(--shop-bg); color: var(--shop-ink); font-size: var(--shop-fs-md);
               font-family: inherit; transition: border-color var(--shop-t), box-shadow var(--shop-t); }
.shop-fld__i:focus-visible { outline: none; border-color: var(--shop-accent);
                             box-shadow: 0 0 0 3px var(--shop-focus); }
.shop-fld__h { font-size: var(--shop-fs-xs); color: var(--shop-ink-4); margin: 0; }
.shop-fld__e { font-size: var(--shop-fs-xs); color: var(--shop-warn);
               font-weight: var(--shop-fw-med); margin: 0; }
.shop-fld.is-bad .shop-fld__i { border-color: var(--shop-warn); }
/* [V36G.1 FIX-006] 액션 줄은 [이전] [다음] 두 개를 받는다.
   `이전` 은 ghost 라 이미 시각적으로 약하고, `다음` 이 오른쪽 끝에서 주 행동으로 남는다.
   좁은 폭에서는 세로로 쌓되 **주 행동이 위**로 오게 뒤집는다(엄지가 닿는 곳). */
.shop-form__act { margin: var(--shop-s2) 0 0; display: flex; align-items: center;
                  gap: var(--shop-s2); flex-wrap: wrap; }
.shop-form__act .shop-btn[type="submit"],
.shop-form__act button.shop-btn { margin-left: auto; }
.shop-co__back { flex: none; }

/* [V36G.1 FIX-006] 데스크톱 1단계 주 CTA — 우측 요약 카드 아래 */
/* ── 아직 차례가 아닌 단계 — 한 줄로 눕힌다 (레퍼런스 06 모바일의 접힌 줄) ──────
   큰 빈 카드를 세로로 쌓으면 1단계가 1,442px 가 되고 주 CTA 가 화면 밖으로 밀린다(실측).
   ⚠️ 접기/펼치기 기능을 만들지 않는다. **여백만** 줄이고 이동은 기존 `?step=N` 링크 그대로다.
   ⚠️ 명시도를 **클래스 두 개**로 올린다. `.shop-co__sec` 의 `padding` 단축 선언이
      이 파일 뒤쪽(1690행대)에 있어서, 클래스 하나짜리 규칙은 순서에서 진다(실측 24px 그대로). */
.shop-co__sec.shop-co__sec--wait { padding-block: var(--shop-s3); }
.shop-co__sec--wait .shop-co__h { margin-bottom: 0; color: var(--shop-ink-3);
                                  font-size: var(--shop-fs-md); }
.shop-co__sec--wait .shop-co__todo { margin: 2px 0 0; font-size: var(--shop-fs-sm);
                                     color: var(--shop-ink-4); }
.shop-co__sec--wait .shop-info { margin-top: var(--shop-s2); padding: var(--shop-s3); }
.shop-co__sec--wait .shop-info__d { display: none; }

.shop-co__sidecta { margin: var(--shop-s4) 0 0; }
.shop-co__sidecta .shop-btn { width: 100%; }
/* ── [V36G.1 FIX-012] 주소검색 ── */
/* 우편번호 칸과 버튼을 한 줄에 세운다. 버튼은 필드의 **입력칸 높이에** 맞춰 내려앉아야
   하는데, `.shop-fld` 는 라벨·힌트까지 품은 세로 묶음이라 가운데 정렬로는 안 맞는다.
   그래서 아래를 기준으로 붙이고 힌트 높이만큼만 버튼을 올린다. */
/* [2026-09-05 보정] 예전에는 flex + `margin-bottom` 으로 버튼을 눈대중으로 끌어내렸다 —
   힌트 줄이 있고 없고에 따라 높이가 달라져 **버튼이 입력칸보다 낮거나 높게** 보였다(실측).
   이제 한 행 격자로 세우고 두 요소의 높이를 **같은 값 하나**(--shop-addr-h)로 못 박는다.
   ⚠️ 라벨이 입력칸 위에 있으므로 행을 stretch 하면 버튼이 라벨까지 삼킨다 — 바닥 정렬이다. */
.shop-addr { --shop-addr-h: 48px;
             display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px;
             align-items: end; margin: 0; }
.shop-addr__code { min-width: 0; }
.shop-addr__code .shop-fld { margin: 0; }
.shop .shop-addr__code .shop-fld__i,
.shop .shop-addr__btn { height: var(--shop-addr-h); min-height: var(--shop-addr-h);
                        box-sizing: border-box; }
.shop .shop-addr__btn { white-space: nowrap; padding: 0 18px; margin: 0;
                        border-radius: var(--shop-radius-sm); }
/* [2026-09-05 보정] 검색 UI 를 **본문 안에** 폈더니 누를 때마다 주문서가 400px 넘게
   길어지고 아래 입력칸이 통째로 밀렸다(사장님 지시로 폐지).
   이제 화면 위에 뜨는 **모달**이다 — `position: fixed` 라 문서 흐름에서 빠지고,
   따라서 열고 닫아도 주문서 높이는 1px 도 변하지 않는다.
   ⚠️ 새 탭·새 창으로 보내지 않는다. 주문서를 떠나면 적어 둔 값이 위험해진다. */
.shop-addr__panel { position: fixed; inset: 0; z-index: 120; margin: 0; padding: 16px;
                    display: flex; align-items: center; justify-content: center;
                    background: rgba(15, 23, 42, .45); overflow: auto; }
.shop-addr__panel[hidden] { display: none; }
.shop-addr__dialog { width: 100%; max-width: 520px; background: var(--shop-bg);
                     border: 1px solid var(--shop-line); border-radius: var(--shop-radius-lg);
                     overflow: hidden; box-shadow: 0 24px 60px rgba(15, 23, 42, .28); }
.shop-addr__panelbar { display: flex; align-items: center; justify-content: space-between;
                       gap: var(--shop-s2); padding: var(--shop-s2) var(--shop-s2) var(--shop-s2) var(--shop-s3);
                       border-bottom: 1px solid var(--shop-line); background: var(--shop-bg-soft); }
.shop-addr__panelt { font-size: var(--shop-fs-sm); font-weight: var(--shop-fw-med);
                     color: var(--shop-ink-2); }
.shop-addr__close { min-height: var(--shop-ctrl); }
/* 외부 iframe 이 들어온다. 높이를 주지 않으면 0 으로 접힌다. */
.shop-addr__box { width: 100%; height: 460px; }
.shop-addr__box iframe { display: block; width: 100% !important; height: 100% !important;
                         border: 0; }
/* 모달이 떠 있는 동안 뒤 본문이 따라 움직이지 않게 한다 */
.shop-addr-open, .shop-addr-open body { overflow: hidden; }
@media (max-width: 640px) {
    /* 좁은 화면에서는 화면을 다 쓴다 — 주소 목록이 두세 줄만 보이면 고르기 어렵다 */
    .shop-addr__panel { padding: 0; align-items: stretch; }
    .shop-addr__dialog { max-width: none; border: 0; border-radius: 0;
                         display: flex; flex-direction: column; }
    .shop-addr__box { flex: 1 1 auto; height: auto; min-height: 0; }
}
/* 안내 문구는 자리를 늘 차지하지 않는다 — 비어 있으면 보이지 않는다 */
.shop-form .shop-addr__msg { margin: 0; font-size: var(--shop-fs-sm);
                             color: var(--shop-ink-2); }
.shop-form .shop-addr__msg:empty { display: none; }

.shop-form__note { font-size: var(--shop-fs-sm); color: var(--shop-ink-3); margin: 0; }

/* ── 주문서 2열 ── */
.shop-co { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
           gap: var(--shop-s6); align-items: start; }
.shop-co__main { display: flex; flex-direction: column; gap: var(--shop-s5); min-width: 0; }
.shop-co__sec { border: 1px solid var(--shop-line); border-radius: var(--shop-radius-lg);
                padding: var(--shop-s5); background: var(--shop-bg); }
.shop-co__h { font-size: var(--shop-fs-lg); font-weight: var(--shop-fw-bold);
              color: var(--shop-ink); margin: 0 0 var(--shop-s4); }
.shop-co__items { display: flex; flex-direction: column; gap: var(--shop-s3); }
/* ══════════════════════════════════════════════════════════════════════════════
   [2026-09-05 UI Rebase] 주문서·주문상세
   사장님 실검수: 조작부가 링크처럼 보임 · 입력칸 경계가 약함 · 정보계층이 약함 ·
   글씨가 작고 대비가 낮음 · 1페이지인데 스크롤이 김.

   ⚠️ 길이를 **패딩으로 늘리지 않는다.** 데스크톱에서 2열로 접어 총 길이를 줄인다.
   ⚠️ 토큰을 전역에서 바꾸지 않는다 — 주문서·주문상세 안에서만 값을 올린다.
      `--shop-line-2`(#f0f4f9)가 `--shop-line`(#e5eaf0)보다 **연해서** 입력칸 경계가
      가장 흐린 선으로 그려지고 있었다(실측). 그 자리만 진한 선으로 바꾼다.
   ⚠️ `.shop` 을 한 겹 더 붙인다 — `.shop p`·`.shop h1~h4` 초기화가 한 겹 클래스를 이긴다.
   ══════════════════════════════════════════════════════════════════════════════ */
.shop .shop-co,
.shop .shop-odt {
    --co-line:  #c7d2e0;   /* 입력칸·구분선 — 흰 위에서 확실히 보이는 선 */
    --co-line-s: #dbe3ec;  /* 카드 테두리 */
}

/* ── 카드·섹션 ── */
.shop .shop-co__sec { border-color: var(--co-line-s); padding: 18px 20px; }
.shop .shop-co__h { font-size: 17px; font-weight: var(--shop-fw-bold); color: var(--shop-ink);
                    margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
/* 카드 사이 간격 — 다섯 장이 서므로 한 칸이 곧 다섯 배로 쌓인다 */
.shop .shop-co__main { gap: 14px; }
.shop .shop-co__count { margin: 0; font-size: 13px; font-weight: var(--shop-fw-reg);
                        color: var(--shop-ink-3); }

/* ── 데스크톱 2열: 주문자 정보 · 받으실 곳 ── */
.shop .shop-co__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                       gap: var(--shop-s5); align-items: start; }

/* ── 입력칸: 높이·경계·라벨 대비 ── */
.shop .shop-co .shop-fld { gap: 6px; }
.shop .shop-co .shop-fld__l { font-size: 14px; font-weight: var(--shop-fw-bold); color: var(--shop-ink); }
.shop .shop-co .shop-fld__i { min-height: 48px; border: 1px solid var(--co-line);
                              font-size: 15px; padding: 0 14px; }
.shop .shop-co .shop-fld__i::placeholder { color: #94a3b8; }
.shop .shop-co .shop-fld__i:hover { border-color: #aab8ca; }
.shop .shop-co .shop-fld__i:focus-visible { border-color: var(--shop-accent);
                                            box-shadow: 0 0 0 3px var(--shop-focus); }
.shop .shop-co .shop-fld__h { font-size: 12.5px; color: var(--shop-ink-3); }
.shop .shop-co .shop-form,
.shop .shop-co .shop-co__sec > .shop-fld + .shop-fld { margin-top: 0; }
.shop .shop-co .shop-fld + .shop-fld { margin-top: 14px; }

/* ── 우편번호 + 주소검색: 버튼 높이를 입력칸에 맞춘다 ── */
.shop .shop-co .shop-addr { margin-top: 14px; }

/* ── 주문 상품 줄 ── */
/* ⚠️ 카드의 **기하**(칸 나누기·썸네일 크기·정렬)는 여기서 정하지 않는다.
      이 파일 뒤쪽 `주문 상품 카드` 한 곳이 정본이다 — 여러 곳에 나눠 적었더니
      뒤쪽 규칙이 앞쪽을 덮어 사진이 작게 왼쪽 위에 붙었다(실측). */
.shop .shop-co__items { display: flex; flex-direction: column; gap: 14px; }

/* 삭제 — 위험을 알리되 소리치지 않는다(중립 외곽선) */
/* [2026-09-05 보정] 테두리가 너무 옅어 빈 버튼처럼 보였다 — 레드 톤을 분명히 준다.
   ⚠️ 그렇다고 채워진 빨간 버튼으로 만들지 않는다. 삭제는 위험하지만 주 행동이 아니다. */
/* ⚠️ `.shop-btn` 기본 스타일이 이 파일 **뒤쪽**에 있어 같은 특정도면 그쪽이 이긴다 —
      실제로 글자색이 흰색으로 덮여 흰 배경 위에서 글씨가 사라졌다(실측).
      그래서 `.shop` 을 한 겹 더 붙여 특정도를 올린다(이 저장소의 관례). */
/* ⚠️ `.shop .shop-btn { color: #fff }` 가 **같은 특정도로 뒤에** 있어 글자색을 흰색으로
      덮었다 — 흰 배경 위 흰 글씨라 버튼이 빈 상자처럼 보였다(실측 rgb(255,255,255)).
      그래서 클래스를 하나 더 겹쳐 특정도를 올린다(`.shop-btn.shop-btn--danger`). */
.shop .shop-btn.shop-btn--danger { background: var(--shop-bg); color: var(--shop-warn);
                                   border: 1px solid #d59a95; font-weight: var(--shop-fw-med); }
.shop .shop-btn.shop-btn--danger:hover { background: #fdf1f0; border-color: var(--shop-warn);
                                         color: var(--shop-warn); }
.shop .shop-btn.shop-btn--danger:focus-visible { outline: none; border-color: var(--shop-warn);
                                                 box-shadow: 0 0 0 3px rgba(180, 35, 24, .18); }

/* ── 약관: 한 줄씩 compact, 터치영역은 44px 유지 ── */
.shop .shop-consents__list { display: flex; flex-direction: column; }
.shop .shop-consent-item { border-bottom: 1px solid var(--shop-line); }
.shop .shop-consent-item:last-child { border-bottom: 0; }
.shop .shop-consent-row { min-height: 44px; gap: 10px; padding: 0; }
.shop .shop-consents__err { margin: 0 0 8px; }
.shop .shop-consent { flex: 1 1 auto; min-width: 0; display: flex; align-items: center;
                      gap: 10px; min-height: 44px; }
.shop .shop-consent__t { font-size: 14px; color: var(--shop-ink); }
.shop .shop-consent__req { color: var(--shop-ink-3); font-weight: var(--shop-fw-med); }
.shop .shop-consent__doc { flex: 0 0 auto; font-size: 13px; color: var(--shop-accent-ink);
                           display: inline-flex; align-items: center; min-height: 44px; }

/* ── 우측 금액 카드 ── */
.shop .shop-co__box { border-color: var(--co-line-s); padding: 18px 20px; }
.shop .shop-co__boxh { font-size: 16px; margin: 0 0 14px; }
.shop .shop-co__go { width: 100%; min-height: 52px; margin-top: 18px; font-size: 16px; }
.shop .shop-co__note { margin: 10px 0 0; font-size: 12.5px; color: var(--shop-ink-3); }
.shop .shop-co__ship { margin: 10px 0 0; font-size: 12.5px; color: var(--shop-ink-3); }
/* 총액은 화면에서 가장 큰 숫자다 */
.shop .shop-co__box .shop-total .is-total { font-size: 15px; }
.shop .shop-co__box .shop-total dd.is-total { font-size: 24px; font-weight: var(--shop-fw-bold);
                                              color: var(--shop-ink); }

@media (max-width: 1023px) {
    .shop .shop-co__cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    /* 손가락으로 누르는 화면이라 44px 을 준다(coarse pointer 기준) */
    .shop .shop-co__iact { flex-direction: row; }
    .shop .shop-co__iact .shop-btn { flex: 1 1 0; min-height: 44px; }
    .shop .shop-co__sec, .shop .shop-co__box { padding: 18px; }
    /* 좁은 화면에서는 섹션 사이를 조인다 — 길이를 늘리지 않기 위해서다 */
    .shop .shop-co__main { gap: 14px; }
    .shop .shop-co { gap: 14px; }
    .shop .shop-co__h { font-size: 17px; margin-bottom: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   [2026-09-05 UI Rebase V3] 주문서 — 레퍼런스 이미지 기준
   카드는 **위에서 아래로 일렬**, 2~3열은 **카드 안쪽 입력칸**에서만 쓴다.
   (앞선 안은 주문자 정보와 받으실 곳을 가로 2열 카드로 놓았는데 레퍼런스는 그걸 금지한다.)
   ══════════════════════════════════════════════════════════════════════════════ */

/* 섹션 제목의 번호 배지 */
.shop .shop-co__n { display: inline-flex; align-items: center; justify-content: center;
                    width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto;
                    background: var(--shop-accent); color: #fff;
                    font-size: 13px; font-weight: var(--shop-fw-bold); }
.shop .shop-co__all { margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
                      font-size: 13.5px; font-weight: var(--shop-fw-reg); color: var(--shop-ink-2);
                      min-height: 44px; cursor: pointer; }

/* ── 카드 안쪽 입력 격자 ── */
.shop .shop-co__grid { display: grid; gap: 12px 16px; }
.shop .shop-co__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shop .shop-co__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 주소 줄들은 카드 폭을 다 쓴다 */
.shop .shop-co__row { grid-column: 1 / -1; }
/* 우편번호 + 주소검색은 격자의 **한 칸**을 쓴다(옆 칸에 주소가 온다 — 레퍼런스). */
.shop .shop-co__grid .shop-addr { margin: 0; }
.shop .shop-co__grid .shop-fld + .shop-fld { margin-top: 0; }

/* ══════ ① 주문 상품 카드 — 레퍼런스 기하 (이 파일의 정본) ══════
   사진 왼쪽 · 정보 가운데 · 금액과 조작부 오른쪽. 세 칸이 전부다.
   ⚠️ 카드에 고정 높이를 주지 않는다 — 내용이 짧으면 카드도 짧아져야 한다.
      사진(136px)이 사실상 가장 높은 칸이라 그것이 카드의 최소 높이를 정한다. */
.shop .shop-co__item { display: grid; grid-template-columns: 136px minmax(0, 1fr) auto;
                       gap: 18px; align-items: center; padding: 18px;
                       border: 1px solid var(--co-line-s, #dbe3ec); border-radius: 12px;
                       background: var(--shop-bg); }
.shop .shop-co__item + .shop-co__item { margin-top: 12px; }
/* 상품 사진이 아직 저장소에 한 장도 없다 — 자리표시자도 **같은 크기**로 세운다.
   ⚠️ 사진이 없다고 칸을 줄이지 않는다. 사진이 들어오는 날 조판이 흔들린다.
   ⚠️ 다른 상품 사진이나 분위기 이미지를 대신 넣지 않는다. */
.shop .shop-co__ithumb { display: block; width: 136px; height: 136px; border-radius: 10px;
                         background: var(--shop-bg-warm); border: 1px solid var(--shop-line);
                         object-fit: cover; }
/* 정보는 세 줄 남짓의 한 덩어리다 — 줄 사이를 벌려 길게 늘어뜨리지 않는다 */
.shop .shop-co__ibody { min-width: 0; }
.shop .shop-co__ihead { display: block; }
.shop .shop-co__iname { font-size: 16px; font-weight: var(--shop-fw-bold);
                        color: var(--shop-ink); min-width: 0; line-height: 1.4; }
.shop .shop-co__iname em { font-style: normal; font-weight: var(--shop-fw-reg);
                           color: var(--shop-ink-3); }
.shop .shop-co__ispec,
.shop .shop-co__iopt,
.shop .shop-co__idesign { margin: 2px 0 0; font-size: 13.5px; line-height: 1.55;
                          color: var(--shop-ink-3); }
.shop .shop-co__ispec { margin-top: 8px; }
.shop .shop-co__idesign { color: var(--shop-ink-2); }
.shop .shop-co__idesign.is-paid { color: var(--shop-ink); font-weight: var(--shop-fw-med); }
.shop .shop-co__idesign.is-paid b { color: var(--shop-price); }
.shop .shop-co__ilater { color: var(--shop-ink-3); }
.shop .shop-co__ilater::before { content: '·'; margin: 0 6px; }
/* 오른쪽 칸: 금액은 위, 조작부는 아래 — 카드 높이를 그대로 쓴다 */
.shop .shop-co__iside { align-self: stretch; display: flex; flex-direction: column;
                        align-items: flex-end; justify-content: space-between; gap: 12px; }
.shop .shop-co__iamt { font-size: 18px; font-weight: var(--shop-fw-bold);
                       color: var(--shop-ink); white-space: nowrap; }
/* 조작부는 링크가 아니라 **버튼**으로 보여야 한다(사장님 지시) */
.shop .shop-co__iact { display: flex; gap: 8px; margin: 0; }
.shop .shop-co__iact .shop-btn { min-height: 40px; padding: 0 16px; font-size: 13.5px;
                                 font-weight: var(--shop-fw-med); }

/* ── ④ 디자인 및 파일 전달 ── */
.shop .shop-co__dm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
                     gap: 12px; margin: 0; padding: 0; list-style: none; }
.shop .shop-co__dmi { display: grid; grid-template-columns: 18px minmax(0, 1fr);
                      gap: 3px 10px; align-content: start;
                      border: 1px solid var(--co-line, #c7d2e0); border-radius: 10px;
                      padding: 12px; background: var(--shop-bg); }
.shop .shop-co__dmi.is-on { border-color: var(--shop-accent); background: var(--shop-accent-soft); }
.shop .shop-co__dmdot { width: 18px; height: 18px; border-radius: 50%; grid-row: 1 / span 2;
                        border: 2px solid #b9c6d6; background: #fff; margin-top: 2px; }
.shop .shop-co__dmi.is-on .shop-co__dmdot { border-color: var(--shop-accent);
                                            box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 10px var(--shop-accent); }
.shop .shop-co__dmt { font-size: 14px; font-weight: var(--shop-fw-bold); color: var(--shop-ink); }
.shop .shop-co__dmfee { color: var(--shop-price); }
.shop .shop-co__dmd { grid-column: 2; font-size: 12.5px; color: var(--shop-ink-3); }
.shop .shop-co__dmnote { margin: 12px 0 0; font-size: 12.5px; color: var(--shop-ink-3); }

/* ── 우측 카드 ── */
.shop .shop-co__side { display: flex; flex-direction: column; gap: var(--shop-s4); }
.shop .shop-co__safe { margin: 10px 0 0; font-size: 12.5px; color: var(--shop-ink-3);
                       text-align: center; }
.shop .shop-co__tips { margin: 0; }
.shop .shop-co__tiplist { margin: 8px 0 0; padding-left: 18px; display: flex;
                          flex-direction: column; gap: 6px; }
.shop .shop-co__tiplist li { font-size: 13px; color: var(--shop-ink-2); list-style: disc; }

@media (max-width: 1023px) {
    .shop .shop-co__grid--3,
    .shop .shop-co__grid--2 { grid-template-columns: minmax(0, 1fr); }
    .shop .shop-co__dm { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    /* 모바일: 사진 왼쪽 · 정보 오른쪽. 금액은 정보 바로 아래, 버튼은 카드 하단 2열. */
    .shop .shop-co__item { grid-template-columns: 96px minmax(0, 1fr); gap: 14px;
                           padding: 14px; align-items: start; }
    .shop .shop-co__ithumb { width: 96px; height: 96px; }
    /* ⚠️ `display: contents` 로 오른쪽 칸을 풀어 금액과 버튼을 격자에 직접 놓는다 —
          한 덩어리로 두면 버튼이 좁은 칸에 갇혀 44px 터치영역을 못 채운다. */
    .shop .shop-co__iside { display: contents; }
    .shop .shop-co__iamt { grid-column: 2; align-self: start; margin-top: 10px; }
    .shop .shop-co__iact { grid-column: 1 / -1; display: grid;
                           grid-template-columns: repeat(2, minmax(0, 1fr));
                           gap: 8px; margin-top: 12px; }
    .shop .shop-co__iact .shop-btn { width: 100%; min-height: 44px; }
    .shop .shop-co__all { margin-left: 0; width: 100%; }
    .shop .shop-co__h { flex-wrap: wrap; }
    /* 좁은 화면에서는 디자인 방식의 한 줄 설명을 접는다 — 이름과 금액이면 알아볼 수 있다.
       ⚠️ 정보를 지우는 것이 아니다. 고르는 곳(상품 화면)에는 설명이 그대로 있다. */
    .shop .shop-co__dmd { display: none; }
    .shop .shop-co__dmi { padding: 10px 12px; align-items: center; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   [2026-09-05 보정] 주문 접수 결과 — 카드 둘, 가운데 정렬, 핵심을 빨리 읽는 화면.
   앞선 안은 카드 하나에 상태·번호·안내·금액·결제·다음행동을 모두 쌓아 길고 답답했다.
   ⚠️ `.shop` 을 한 겹 더 붙인다(초기화가 한 겹 클래스를 이긴다).
   ══════════════════════════════════════════════════════════════════════════════ */
.shop .shop-done { max-width: 720px; margin-inline: auto; display: flex;
                   flex-direction: column; gap: 16px; }

.shop .shop-done__head { border: 1px solid var(--co-line-s, #dbe3ec);
                         border-radius: var(--shop-radius-lg); padding: 22px;
                         background: var(--shop-bg-warm); text-align: center; }
.shop .shop-done__state { display: flex; justify-content: center; flex-wrap: wrap;
                          gap: 8px; margin: 0 0 14px; }
.shop .shop-done__nolabel { margin: 0; font-size: 13px; color: var(--shop-ink-3); }
.shop .shop-done__no { margin: 4px 0 0; font-size: 26px; font-weight: var(--shop-fw-bold);
                       color: var(--shop-ink); letter-spacing: -0.01em; }
.shop .shop-done__lead { margin: 12px 0 0; font-size: 14px; color: var(--shop-ink-2); }

.shop .shop-done__box { border: 1px solid var(--co-line-s, #dbe3ec);
                        border-radius: var(--shop-radius-lg); padding: 22px;
                        background: var(--shop-bg); }
.shop .shop-done__boxh { margin: 0 0 14px; font-size: 16px;
                         font-weight: var(--shop-fw-bold); color: var(--shop-ink); }
.shop .shop-done__box .shop-total dd.is-total { font-size: 24px;
                                                font-weight: var(--shop-fw-bold);
                                                color: var(--shop-ink); }
.shop .shop-done__note { margin: 10px 0 0; font-size: 12.5px; color: var(--shop-ink-3); }
.shop .shop-done__warn { margin: 14px 0 0; font-size: 13.5px; color: var(--shop-warn); }
.shop .shop-done__go { width: 100%; min-height: 52px; margin-top: 16px; font-size: 16px; }
.shop .shop-done__cta { display: flex; gap: 10px; margin: 16px 0 0; }
.shop .shop-done__cta .shop-btn { flex: 1 1 0; min-height: 46px; }
.shop .shop-done__guest { margin: 0; font-size: 13px; color: var(--shop-ink-2);
                          text-align: center; }
.shop .shop-result__badge2.is-paid { background: #e6f4ec; color: #1a7f53; }

@media (max-width: 640px) {
    .shop .shop-done__head, .shop .shop-done__box { padding: 18px; }
    .shop .shop-done__no { font-size: 22px; }
    .shop .shop-done__cta { flex-direction: column; }
}

/* ══════════════ 주문 상세 (2026-09-05 UI Rebase) ══════════════
   세로로 길게 쌓이던 카드를 **데스크톱 2열**로 접는다.
   왼쪽 = 상품 · 주문자/받으실 곳 · 동의(접힘)  ·  오른쪽 = 금액 · 파일
   ⚠️ 약관 6줄은 기본으로 펼치지 않는다 — 화면만 길어지고 읽지도 않는다.
   ⚠️ 여기서도 `.shop` 을 한 겹 더 붙인다(초기화가 한 겹 클래스를 이긴다). */
.shop .shop-odt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
                  gap: var(--shop-s5); align-items: start; }
.shop .shop-odt__main { display: flex; flex-direction: column; gap: var(--shop-s4);
                        min-width: 0; grid-column: 1; }
.shop .shop-odt__side { display: flex; flex-direction: column; gap: var(--shop-s4);
                        grid-column: 2; grid-row: 1 / span 2; position: sticky;
                        top: var(--shop-sticky-top); }
.shop .shop-odt__act { grid-column: 1 / -1; margin: var(--shop-s4) 0 0; }

/* 머리 — 주문번호와 상태를 한 줄에 */
.shop .shop-odt__head { border: 1px solid var(--co-line-s, #dbe3ec);
                        border-radius: var(--shop-radius-lg); padding: 18px 22px;
                        margin: 0 0 var(--shop-s5); background: var(--shop-bg); }
.shop .shop-odt__no { margin: 0; font-size: 14px; color: var(--shop-ink-3); }
.shop .shop-odt__no b { font-size: 20px; color: var(--shop-ink); margin-left: 8px;
                        letter-spacing: -0.01em; }
.shop .shop-odt__meta { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px;
                        align-items: center; font-size: 13.5px; }

/* 품목 — 라벨 반복 없이 두세 줄로 */
.shop .shop-odt__items { display: flex; flex-direction: column; gap: 14px; }
.shop .shop-odt__item { padding-bottom: 14px; border-bottom: 1px solid var(--shop-line); }
.shop .shop-odt__item:last-child { border-bottom: 0; padding-bottom: 0; }
.shop .shop-odt__iname { margin: 0; font-size: 15px; font-weight: var(--shop-fw-bold);
                         color: var(--shop-ink); }
.shop .shop-odt__iamt { margin: 6px 0 0; font-size: 16px; font-weight: var(--shop-fw-bold);
                        color: var(--shop-ink); }

/* 파일 — 작은 카드 */
.shop .shop-odt__files { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.shop .shop-odt__files li { display: flex; justify-content: space-between; gap: 12px;
                            font-size: 13.5px; color: var(--shop-ink-2); }
.shop .shop-odt__fsize { color: var(--shop-ink-3); white-space: nowrap; }

/* 동의 — 접어 둔다 */
.shop .shop-odt__acc { margin: 0; }
.shop .shop-odt__accs { cursor: pointer; list-style: none; display: flex; align-items: center;
                        gap: 8px; min-height: 44px; font-size: 16px;
                        font-weight: var(--shop-fw-bold); color: var(--shop-ink); }
.shop .shop-odt__accs::-webkit-details-marker { display: none; }
.shop .shop-odt__accs::after { content: '▾'; margin-left: auto; color: var(--shop-ink-3);
                               transition: transform var(--shop-t); }
.shop .shop-odt__acc[open] .shop-odt__accs::after { transform: rotate(180deg); }
.shop .shop-odt__accn { font-size: 13px; font-weight: var(--shop-fw-reg); color: var(--shop-ink-3); }
.shop .shop-odt__consents { margin: 10px 0 0; display: flex; flex-direction: column; gap: 8px; }
.shop .shop-odt__consents li { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
                               font-size: 13.5px; color: var(--shop-ink-2); }
.shop .shop-odt__cver { color: var(--shop-ink-4); font-size: 12px; }
.shop .shop-odt__cagree { margin-left: auto; color: var(--shop-ink-3); }

/* 총액은 이 화면에서도 가장 큰 숫자다 */
.shop .shop-odt__side .shop-total dd.is-total { font-size: 22px; font-weight: var(--shop-fw-bold);
                                                color: var(--shop-ink); }

@media (max-width: 1023px) {
    .shop .shop-odt { grid-template-columns: minmax(0, 1fr); }
    .shop .shop-odt__main,
    .shop .shop-odt__side { grid-column: 1; grid-row: auto; position: static; }
}
@media (max-width: 640px) {
    .shop .shop-odt { gap: 14px; }
    .shop .shop-odt__head { padding: 16px 18px; }
    .shop .shop-odt__no b { font-size: 18px; }
}

/* ══════ 주문서 품목 줄 ══════
   ⚠️ [2026-09-05 보정] 여기 있던 한 열 규칙(`display: block`)이 파일 **뒤쪽**에 있어서
      앞에서 만든 세 칸 격자를 통째로 덮고 있었다 — 그래서 사진이 작게 왼쪽 위에 붙고
      아래에 죽은 공간이 생겼다(실측). 기하 규칙은 전부 지웠고, 정본은 한 곳뿐이다:
      `주문 상품 카드 — 레퍼런스 기하` 블록.
   ⚠️ 여기에 `.shop-co__item` / `__ihead` / `__iname` / `__iamt` / `__ispec` / `__iopt` /
      `__idesign` / `__iact` 규칙을 **다시 적지 않는다.** 적는 순간 또 덮는다. */
.shop .shop-co__iact form { display: inline; }
/* 품목이 몇 건인지 제목 옆에 적는다 — 장바구니에 남은 줄을 놓치지 않게 */
.shop .shop-co__count { margin-left: var(--shop-s2); font-size: var(--shop-fs-sm);
                        font-weight: var(--shop-fw-reg); color: var(--shop-ink-3); }
.shop-co__kv { display: grid; gap: var(--shop-s2); margin: 0; }
.shop-co__kv > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--shop-s3); }
.shop-co__kv dt { font-size: var(--shop-fs-sm); color: var(--shop-ink-3); }
.shop-co__kv dd { margin: 0; color: var(--shop-ink); overflow-wrap: anywhere; }
.shop-co__edit { margin: var(--shop-s3) 0 0; }
.shop-co__todo { margin: 0; }
.shop-co__sec--pay { background: var(--shop-bg-soft); }
.shop-co__pay { margin: 0; font-size: var(--shop-fs-sm); color: var(--shop-ink-2); }

/* 우측 요약 — 헤더 아래에 붙는다 */
.shop-co__side { position: sticky; top: var(--shop-sticky-top); }
.shop-co__box { border: 1px solid var(--shop-line-2); border-radius: var(--shop-radius-lg);
                padding: var(--shop-s5); background: var(--shop-bg-warm); }
.shop-co__boxh { font-size: var(--shop-fs-md); font-weight: var(--shop-fw-bold);
                 margin: 0 0 var(--shop-s4); color: var(--shop-ink); }
.shop-co__ship { margin: var(--shop-s3) 0 0; font-size: var(--shop-fs-xs); color: var(--shop-ink-3); }
.shop-total__pending { color: var(--shop-ink-3); font-weight: var(--shop-fw-med); }

/* ── 확인 필요 diff ── */
.shop-diff { border: 1px solid var(--shop-warn); border-radius: var(--shop-radius-lg);
             padding: var(--shop-s4); margin-bottom: var(--shop-s5); background: var(--shop-bg); }
.shop-diff__h { font-size: var(--shop-fs-md); font-weight: var(--shop-fw-bold);
                margin: 0 0 var(--shop-s3); color: var(--shop-ink); }
.shop-diff__list { display: flex; flex-direction: column; gap: var(--shop-s2); }
.shop-diff__list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--shop-s2);
                      font-size: var(--shop-fs-sm); }
.shop-diff__name { font-weight: var(--shop-fw-med); color: var(--shop-ink); }
.shop-diff__was { color: var(--shop-ink-4); text-decoration: line-through; }
.shop-diff__now { color: var(--shop-price); font-weight: var(--shop-fw-bold); }
.shop-diff__why { color: var(--shop-ink-3); }
.shop-diff__act { margin: var(--shop-s4) 0 0; }

/* ── 동의 ── */
.shop-consents { border: 1px solid var(--shop-line); border-radius: var(--shop-radius);
                 padding: var(--shop-s4); margin: 0; }
.shop-consents__lg { font-size: var(--shop-fs-sm); font-weight: var(--shop-fw-bold);
                     color: var(--shop-ink-2); padding: 0 var(--shop-s2); }
.shop-consents__err { color: var(--shop-warn); font-size: var(--shop-fs-sm);
                      font-weight: var(--shop-fw-med); margin: 0 0 var(--shop-s3); }
/* 한 줄 = [토글 label] + [문서 링크]. **둘은 형제다.**
   링크를 label 안에 넣으면 그 자리를 눌렀을 때 링크가 클릭을 가져가 체크가 안 된다
   (390 히트테스트에서 3줄이 실제로 그렇게 걸렸다). */
.shop-consents__list { display: flex; flex-direction: column; gap: var(--shop-s1); }
/* [V36G.1 FIX-004] **wrap 을 쓰지 않는다.**
   wrap 하는 flex 는 "줄이기"보다 "줄바꿈"을 먼저 한다 — 그래서 제목이 길면 링크가
   통째로 다음 줄로 밀려 **다음 항목 체크박스 바로 위**에 앉았다(390 에서 3건).
   nowrap 이면 대신 `.shop-consent`(min-width:0)가 줄어들고 제목 글자가 접힌다.
   링크는 어떤 폭에서도 자기 행을 떠나지 않는다. */
.shop-consent-row { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--shop-s2); }
.shop-consent { display: flex; align-items: center; gap: var(--shop-s2);
                /* 남는 가로폭을 전부 차지한다 — 글자 오른쪽 빈 곳도 토글 영역이다 */
                flex: 1 1 auto; min-width: 0;
                min-height: var(--shop-ctrl); cursor: pointer; }
/* [V36G.1 FIX-004] `margin: 0` 을 명시한다 — UA 기본 margin(3px 안팎)이 남아 있으면
   제목 시작점이 그만큼 밀려서, 아래 줄 링크의 들여쓰기 계산(체크박스 폭 + 간격)과 어긋난다.
   실제로 390 에서 링크가 제목보다 7px 왼쪽에 섰다. */
.shop-consent input { width: 20px; height: 20px; flex: none; margin: 0;
                      accent-color: var(--shop-accent); }
.shop-consent__t { font-size: var(--shop-fs-sm); color: var(--shop-ink); }
.shop-consent__req { color: var(--shop-ink-3); font-weight: var(--shop-fw-med); }
.shop-consent__doc { flex: none; font-size: var(--shop-fs-xs); color: var(--shop-ink-3);
                     min-height: var(--shop-ctrl); min-width: var(--shop-ctrl);
                     display: inline-flex; align-items: center; justify-content: center;
                     padding: 0 var(--shop-s2); text-decoration: underline; }
/* [V36G.1 FIX-021] 빠진 항목을 그 줄에서 표시한다.
   ⚠️ 이 껍데기는 **폭·여백을 갖지 않는다.** padding 이나 margin 을 주면 체크박스가 밀리고,
      FIX-004 가 맞춰 놓은 모바일 링크 들여쓰기(체크박스 20px + 간격) 계산이 어긋난다.
   ⚠️ 표시는 `outline` 으로 한다 — border 는 자리를 차지해서 줄이 흔들린다. */
.shop-consent-item { min-width: 0; }
.shop-consent-item.is-bad .shop-consent__req { color: var(--shop-warn); }
.shop-consent-item.is-bad .shop-consent input { outline: 2px solid var(--shop-warn);
                                                outline-offset: 2px; }
/* 문구는 제목 시작선에 맞춘다 — 체크박스 폭 + 간격만큼 들여쓴다(모바일 링크와 같은 계산).
   ⚠️ 선택자를 두 겹으로 쓴다. `.shop p { margin: 0 }`(0,1,1)이 한 겹 클래스(0,1,0)를 이겨서
      한 겹으로 쓰면 여백이 통째로 죽는다 — FIX-014 에서 같은 함정을 겪었다. */
.shop-consents .shop-consent__err { margin: var(--shop-s1) 0 0 calc(20px + var(--shop-s2));
                                    font-size: var(--shop-fs-xs); color: var(--shop-warn); }

/* ── 결과 ── */
/* [2026-09-05] 데스크톱에서 카드가 왼쪽으로 쏠려 있었다 — 가운데로 놓는다.
   ⚠️ `margin-inline` 만으로 충분하다. 바깥 컨테이너를 건드리지 않는다. */
.shop-result { border: 1px solid var(--shop-line-2); border-radius: var(--shop-radius-lg);
               padding: var(--shop-s6); background: var(--shop-bg-warm);
               max-width: 760px; margin-inline: auto; }
/* ── 주문 접수 결과 — 상태 → 주문번호 → 설명 → 요약 → 다음 행동 ────────────
   ⚠️ 주문번호는 고객이 적어 두는 값이다. 본문 글씨로 묻히면 안 된다(지시서 금지).
   ⚠️ 상태 딱지가 **결제 완료로 읽히면 안 된다.** 그래서 두 개다 — 접수됨 / 결제 전. */
.shop-result__state { display: flex; flex-wrap: wrap; gap: var(--shop-s2);
                      margin: 0 0 var(--shop-s4); align-items: center; }
.shop-result__badge { display: inline-flex; align-items: center; min-height: 30px;
    padding: 0 var(--shop-s3); border-radius: 999px;
    background: var(--shop-accent); color: #fff;
    font-size: var(--shop-fs-sm); font-weight: var(--shop-fw-bold); }
.shop-result__badge2 { display: inline-flex; align-items: center; min-height: 30px;
    padding: 0 var(--shop-s3); border-radius: 999px;
    border: 1px solid var(--shop-line-2); background: var(--shop-bg);
    color: var(--shop-ink-3); font-size: var(--shop-fs-sm); }
.shop-result__nolabel { font-size: var(--shop-fs-sm); color: var(--shop-ink-3); margin: 0; }
.shop-result__no { font-size: var(--shop-fs-2xl); font-weight: var(--shop-fw-black);
                   letter-spacing: -0.02em; margin: 2px 0 var(--shop-s5);
                   color: var(--shop-ink); }
.shop-result__h { font-size: var(--shop-fs-md); font-weight: var(--shop-fw-bold);
                  margin: var(--shop-s5) 0 var(--shop-s3); color: var(--shop-ink-2); }
.shop-result__lines { display: flex; flex-direction: column; gap: var(--shop-s2);
                      margin: 0 0 var(--shop-s5); }
.shop-result__lines li { font-size: var(--shop-fs-sm); color: var(--shop-ink-2); }
.shop-total--result { margin-bottom: var(--shop-s5); }
/* [Purchase Flow Gate 결함1] 총액이 무엇을 포함하는지 한 줄로 밝힌다 */
.shop-result__note { font-size: var(--shop-fs-sm); color: var(--shop-ink-3);
                     margin: calc(var(--shop-s4) * -1) 0 var(--shop-s5); }
/* [Purchase Flow Gate 결함5] 주문 상세의 유일한 행동 — 목록으로 돌아가기 */
.shop-odt__act { margin-top: var(--shop-s5); }
.shop-result__token { border: 1px solid var(--shop-warn); border-radius: var(--shop-radius);
                      padding: var(--shop-s4); margin-bottom: var(--shop-s5); background: var(--shop-bg); }
.shop-result__tokenlead { font-size: var(--shop-fs-sm); margin: 0 0 var(--shop-s2); color: var(--shop-ink); }
.shop-result__tokenval { margin: 0; }
.shop-result__tokenval code { font-size: var(--shop-fs-sm); word-break: break-all;
                              background: var(--shop-bg-soft); padding: var(--shop-s2);
                              border-radius: var(--shop-radius-sm); display: block; }
.shop-result__cta { display: flex; flex-wrap: wrap; gap: var(--shop-s3); margin: 0; }

/* ══════════════ 결제 (2026-09-05) ══════════════
   ⚠️ `.shop p` · `.shop h1~h4` 초기화가 한 겹 클래스의 여백을 죽인다.
      그래서 `.shop` 을 한 겹 더 붙여 특정도를 올린다(이 저장소의 최다 반복 결함).
   ⚠️ 금액을 크게 쓰되 위의 「주문 금액」 총액상자보다 크지 않게 둔다 —
      같은 화면에 큰 숫자가 둘이면 어느 것이 청구액인지 흐려진다. */
.shop .shop-pay { margin: var(--shop-s5) 0 var(--shop-s6);
                  padding-top: var(--shop-s5); border-top: 1px solid var(--shop-line); }
.shop .shop-pay .shop-result__h { margin-top: 0; }
.shop .shop-pay__amount { font-size: var(--shop-fs-sm); color: var(--shop-ink-2);
                          margin: 0 0 var(--shop-s4); }
.shop .shop-pay__amount b { font-size: var(--shop-fs-md); color: var(--shop-ink-1); }
.shop .shop-pay__btn { min-width: 200px; }
/* 진행 상황·실패 안내. 고객에게는 정해진 문구만 나온다(PG 원문 아님). */
.shop .shop-pay__msg { font-size: var(--shop-fs-sm); color: var(--shop-ink-2);
                       margin: var(--shop-s3) 0 0; }

@media (max-width: 640px) {
    .shop .shop-pay__btn { width: 100%; min-width: 0; }
}

/* ── 모바일 하단 요약 바 ── */
.shop-co__bar { display: none; }

@media (max-width: 960px) {
  .shop-co { grid-template-columns: minmax(0, 1fr); }
  /* 데스크톱 우측 상자는 모바일에서 하단 바가 대신한다 */
  .shop-co__side { position: static; }
}

@media (max-width: 720px), (pointer: coarse) {
  .shop-co__sec { padding: var(--shop-s4); }
  .shop-co__kv > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* ── [V36G.1 FIX-004] 좁은 폭에서는 링크를 **자기 제목 바로 아래**로 내린다 ──
     한 줄에 억지로 밀어 넣으면 제목이 잘게 접혀 읽기 나빠진다. 대신 세로로 쌓되
     ① 링크를 제목 글자와 같은 들여쓰기(체크박스 폭 + 간격)에 두고
     ② 항목 **사이** 간격을 항목 **안** 간격보다 크게 벌린다.
     그래야 링크가 자기 제목에 붙어 보이고, 다음 체크박스에 붙어 보이지 않는다.
     ⚠️ 링크는 여전히 `<label>` **밖**이다 — 안에 넣으면 체크 클릭을 가로챈다. */
  .shop-consents__list { gap: var(--shop-s4); }
  .shop-consent-row { flex-direction: column; align-items: stretch; gap: 0; }
  .shop-consent__doc { align-self: flex-start; justify-content: flex-start;
                       margin-left: calc(20px + var(--shop-s2)); padding-left: 0; }

  .shop-co__bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--shop-z-bar);
                  display: flex; align-items: center; gap: var(--shop-s3);
                  padding: var(--shop-s3) var(--shop-gutter);
                  padding-bottom: calc(var(--shop-s3) + env(safe-area-inset-bottom, 0px));
                  background: var(--shop-bg); border-top: 1px solid var(--shop-line-2);
                  box-shadow: var(--shop-shadow-up); }
  .shop-co__barsum { display: flex; flex-direction: column; min-width: 0; }
  .shop-co__barlabel { font-size: var(--shop-fs-xs); color: var(--shop-ink-3); }
  .shop-co__baramt { font-size: var(--shop-fs-lg); color: var(--shop-price); line-height: 1.2; }
  .shop-co__barship { font-size: var(--shop-fs-xs); color: var(--shop-ink-3); }
  .shop-co__barbtn { margin-left: auto; flex: none; }
  /* 하단 바 위로 요소가 올라오도록 스크롤 여백을 준다.
     ⚠️ 이게 없으면 focus·scrollIntoView 가 요소를 화면 **맨 아래**에 붙이는데
        그 자리는 하단 바가 덮고 있어서 눌러도 바가 클릭을 받는다.
        390 히트테스트에서 마지막 동의줄이 실제로 그렇게 걸렸다. */
  .shop-consent-row, .shop-fld, .shop-form__act, .shop-co__sec { scroll-margin-bottom: 120px; }

  /* [V36G.1 FIX-006] 데스크톱 1단계 CTA 는 모바일에서 **감춘다.**
     여기서는 바로 위 `.shop-co__bar` 가 같은 역할을 한다 — 둘을 동시에 보여 주면
     같은 행동이 한 화면에 두 번 나온다. 숨김 조건을 바가 켜지는 조건과 **같게** 둔다. */
  .shop-co__sidecta { display: none; }

  /* 좁은 폭에서는 [이전]/[다음]을 **DOM 순서 그대로** 세로로 쌓는다.
     ⚠️ 처음에 `column-reverse` 로 주 행동을 위에 두려 했는데, 그러면 보조 버튼이
        화면 **최하단**으로 내려가 고정바 자리에 깔린다 — 430 2단계에서 `이전` 이
        통째로 가려졌다(실측). 읽는 순서(이전 → 다음)와도 어긋난다. */
  .shop-form__act { flex-direction: column; align-items: stretch; }
  .shop-form__act .shop-btn { width: 100%; }
  .shop-form__act .shop-btn[type="submit"],
  .shop-form__act button.shop-btn { margin-left: 0; }

  /* 하단 바가 마지막 내용을 가리지 않게 한다.
     ⚠️ [V36G.1 FIX-006] main 여백이 24px 이라 **바 높이(약 80px)를 못 덮었다.**
        폼이 짧은 2단계에서 액션 줄이 바 뒤에 깔려 `이전` 버튼이 가려졌다(430 실측).
        푸터와 같은 108px 로 올려 어떤 길이의 단계에서도 액션 줄이 바 위에 남게 한다. */
  body.shop:has(.shop-co__bar) .shop-main   { padding-bottom: 108px; }
  body.shop:has(.shop-co__bar) .shop-footer { padding-bottom: 108px; }
}

/* ══════════════════════════════════════════════════════════════════
   [V36G CONT03] 로그인·회원가입 · 마이페이지 · 주문내역 · 주문상세
   ⚠️ 주문 목록은 **table 이 아니다.** 데스크톱도 카드 행, 모바일도 카드다.
   ══════════════════════════════════════════════════════════════════ */

/* ── 로그인 / 회원가입 ── */
/* [V36G.1 FIX-007] 데스크톱에서 **중앙축**에 세운다.
   전에는 폭만 420px 로 잡아 두어 좌측에 붙었고 우측이 1,000px 가까이 비었다(1440 실측).
   폭은 그대로 둔다 — 인증 폼을 넓히면 입력 줄이 길어져 오히려 읽기 나쁘다.
   ⚠️ 우측에 패널을 만들지 않았다. 넣을 근거 있는 콘텐츠가 없다(혜택·후기·수치 금지). */
.shop-auth { max-width: 420px; margin-inline: auto; }
/* ⚠️ [V36G.1 FIX-007] FIX-006 이 주문서 액션 줄에 준 `margin-left: auto`(다음 버튼을 오른쪽 끝으로)가
   인증 폼까지 따라와 `로그인`·`가입하기` 가 우측으로 밀렸다. 인증 폼에는 `이전` 이 없어
   그 규칙이 의미가 없고, QA-01~05 를 통과한 원래 모습은 좌측 정렬이다. 여기서만 되돌린다. */
.shop-auth .shop-form__act button.shop-btn { margin-left: 0; }
/* [V36G.1 FIX-014] 제목·리드·첫 라벨이 간격 **0px** 으로 붙어 리드가 첫 필드의 설명처럼 읽혔다
   (1440·390 · 로그인·회원가입 4곳 모두 0px 실측).
   원인은 이 화면이 아니라 초기화다 — `.shop p`(0,1,1) 가 `.shop-lead`(0,1,0) 를 이겨서
   `.shop-lead { margin-bottom }` 이 **어느 화면에서도 산 적이 없다**(`.shop h1` ↔ `.shop-title` 도 같다).
   목록 초기화가 `:where()` 로 감싸인 것과 같은 함정인데 `p`·`h1` 은 그대로 남아 있었다.
   전역 초기화를 지금 손대면 쇼핑몰 전 화면의 세로 리듬이 한꺼번에 바뀐다 →
   이번엔 **인증 화면에만** 원래 의도한 값을 되돌린다. 전역 정리는 별건으로 남긴다.
   값의 근거: 폼 내부 필드 간격이 16px 이므로 리드→첫 필드는 그보다 커야 묶음이 갈린다(24px).
   제목→리드는 한 묶음이라 8px 만 둔다. */
.shop-auth .shop-title { margin-bottom: var(--shop-s2); }
.shop-auth .shop-lead  { margin-bottom: var(--shop-s5); }
/* 오류가 나면 리드와 폼 사이에 알림 상자가 낀다. 같은 초기화에 `.shop-note` 의
   아래 여백도 죽어 있어서, 리드만 고치면 오류 화면에서 상자가 폼에 그대로 붙는다.
   같은 화면·같은 원인이라 함께 되돌린다. */
.shop-auth .shop-note  { margin-bottom: var(--shop-s4); }
.shop-auth__alt { margin: var(--shop-s5) 0 0; font-size: var(--shop-fs-sm); color: var(--shop-ink-2); }
.shop-auth__note { margin: var(--shop-s2) 0 0; font-size: var(--shop-fs-xs); color: var(--shop-ink-3); }
/* 문장 안의 링크도 터치 타깃이다. 세로만 44px 로 만들면 "로그인" 처럼 짧은 글자가
   가로 39px 로 남는다(390 실측). 좌우 여백으로 최소 폭을 함께 확보한다. */
.shop-auth__alt a, .shop-auth__note a { color: var(--shop-ink); text-decoration: underline;
                                        display: inline-block; min-height: var(--shop-ctrl);
                                        line-height: var(--shop-ctrl);
                                        min-width: var(--shop-ctrl); text-align: center;
                                        padding: 0 var(--shop-s1); }

/* ── 마이페이지 ── */
/* 좌측 폭 320px 에서는 긴 이메일이 단어 중간에서 끊겼다(1440·1280 실측). 여유를 준다. */
.shop-acct { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
             gap: var(--shop-s5); align-items: start; }
.shop-acct__box { border: 1px solid var(--shop-line); border-radius: var(--shop-radius-lg);
                  padding: var(--shop-s5); background: var(--shop-bg); }
.shop-acct__h { font-size: var(--shop-fs-lg); font-weight: var(--shop-fw-bold);
                margin: 0 0 var(--shop-s4); color: var(--shop-ink); }
.shop-acct__out { margin: var(--shop-s4) 0 0; }
.shop-acct__none { margin: 0 0 var(--shop-s4); color: var(--shop-ink-3); font-size: var(--shop-fs-sm); }
/* 계정 정보는 라벨을 값 **위**에 둔다.
   좌우로 나누면 값이 쓸 수 있는 폭이 절반으로 줄어 이메일이 단어 중간에서 끊긴다
   (`...@example.t / est` — 1440·1280 실측). 값에 상자 전체 폭을 준다. */
.shop-acct__box .shop-co__kv > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
.shop-acct__box .shop-co__kv { gap: var(--shop-s3); }

/* ── 주문 목록 ── */
.shop-ordlist { display: flex; flex-direction: column; gap: var(--shop-s3); }
.shop-ord { display: grid; align-items: center; gap: var(--shop-s1) var(--shop-s4);
            grid-template-columns: minmax(150px, auto) minmax(0, 1fr) auto auto;
            grid-template-areas: "no sum amt st" "date sum amt pay" "go go go go";
            border: 1px solid var(--shop-line); border-radius: var(--shop-radius-lg);
            padding: var(--shop-s4); background: var(--shop-bg);
            transition: border-color var(--shop-t); }
.shop-ord:hover { border-color: var(--shop-line-2); }
.shop-ord__no { grid-area: no; font-weight: var(--shop-fw-bold); color: var(--shop-ink);
                text-decoration: none; min-height: var(--shop-ctrl);
                display: inline-flex; align-items: center; }
.shop-ord__no:hover { text-decoration: underline; }
.shop-ord__date { grid-area: date; font-size: var(--shop-fs-xs); color: var(--shop-ink-3); }
.shop-ord__sum { grid-area: sum; color: var(--shop-ink-2); font-size: var(--shop-fs-sm);
                 overflow-wrap: anywhere; }
.shop-ord__amt { grid-area: amt; text-align: right; font-weight: var(--shop-fw-bold);
                 color: var(--shop-price); white-space: nowrap; }
.shop-ord__ship { display: block; font-style: normal; font-weight: var(--shop-fw-body);
                  font-size: var(--shop-fs-xs); color: var(--shop-ink-3); }
/* 상태는 색만으로 알리지 않는다 — 글자가 항상 함께 있다(§9) */
.shop-ord__st { grid-area: st; justify-self: end; font-size: var(--shop-fs-xs);
                font-weight: var(--shop-fw-bold); padding: 3px var(--shop-s2);
                border-radius: var(--shop-radius-sm); white-space: nowrap;
                border: 1px solid var(--shop-line-2); color: var(--shop-ink-2); }
.shop-ord__st.is-wait { background: var(--shop-accent-soft); border-color: var(--shop-accent); color: var(--shop-ink); }
.shop-ord__st.is-ok   { background: var(--shop-bg-soft); }
.shop-ord__st.is-off  { color: var(--shop-ink-4); }
.shop-ord__pay { grid-area: pay; justify-self: end; font-size: var(--shop-fs-xs); color: var(--shop-ink-3); }
/* [V36G.1 FIX-020] 주문 상태와 결제 상태를 가르는 이름표.
   값(`결제 대기` / `결제 전`)은 서비스가 준 그대로 두고 앞에 무엇의 상태인지만 밝힌다.
   ⚠️ 이름표는 값보다 약하게 — 강조가 뒤집히면 상태값이 안 읽힌다.
   ⚠️ 가운뎃점은 장식이라 `::after` 로 넣는다. 복사해도 값만 남는다. */
.shop-ord__lab { font-style: normal; font-weight: var(--shop-fw-body);
                 color: var(--shop-ink-3); }
.shop-ord__lab::after { content: '·'; padding: 0 0.35em; color: var(--shop-ink-4); }
.shop-ord__go { grid-area: go; justify-self: end; align-self: center;
                font-size: var(--shop-fs-sm); color: var(--shop-ink-2); text-decoration: none;
                min-height: var(--shop-ctrl); min-width: var(--shop-ctrl);
                display: inline-flex; align-items: center; justify-content: flex-end;
                padding: 0 var(--shop-s2); white-space: nowrap; }
.shop-ord__go:hover { color: var(--shop-ink); text-decoration: underline; }
.shop-ordlist--mini .shop-ord { padding: var(--shop-s3); }

/* ── 주문 상세 ── */
.shop-odt { display: flex; flex-direction: column; gap: var(--shop-s5); }
.shop-odt__head { border: 1px solid var(--shop-line-2); border-radius: var(--shop-radius-lg);
                  padding: var(--shop-s5); margin-bottom: var(--shop-s5); background: var(--shop-bg-warm); }
.shop-odt__no { margin: 0 0 var(--shop-s2); font-size: var(--shop-fs-lg); color: var(--shop-ink); }
.shop-odt__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--shop-s3);
                  margin: 0 0 var(--shop-s3); font-size: var(--shop-fs-sm); color: var(--shop-ink-3); }
.shop-odt__pay { color: var(--shop-ink-2); }
.shop-odt__pending { margin: 0; font-size: var(--shop-fs-sm); color: var(--shop-ink-2); }
.shop-odt__items { display: flex; flex-direction: column; gap: var(--shop-s4); }
.shop-odt__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--shop-s2) var(--shop-s4);
                  padding-bottom: var(--shop-s4); border-bottom: 1px solid var(--shop-line); }
.shop-odt__item:last-child { border-bottom: 0; padding-bottom: 0; }
.shop-odt__iname { grid-column: 1; margin: 0; font-weight: var(--shop-fw-med); color: var(--shop-ink); }
.shop-odt__spec { grid-column: 1; display: grid; gap: 2px; margin: 0; }
.shop-odt__spec > div { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: var(--shop-s2); }
.shop-odt__spec dt { font-size: var(--shop-fs-xs); color: var(--shop-ink-4); }
.shop-odt__spec dd { margin: 0; font-size: var(--shop-fs-sm); color: var(--shop-ink-2); overflow-wrap: anywhere; }
.shop-odt__iamt { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin: 0;
                  font-weight: var(--shop-fw-bold); color: var(--shop-price); white-space: nowrap; }
.shop-odt__files, .shop-odt__consents { display: flex; flex-direction: column; gap: var(--shop-s2); }
.shop-odt__files li, .shop-odt__consents li { display: flex; flex-wrap: wrap; gap: var(--shop-s2);
                                              align-items: baseline; font-size: var(--shop-fs-sm); }
.shop-odt__fname, .shop-odt__cname { color: var(--shop-ink); overflow-wrap: anywhere; }
.shop-odt__fsize, .shop-odt__cver { color: var(--shop-ink-4); font-size: var(--shop-fs-xs); }
.shop-odt__cagree { margin-left: auto; color: var(--shop-ink-2); font-size: var(--shop-fs-xs); }

@media (max-width: 960px) {
  .shop-acct { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px), (pointer: coarse) {
  .shop-auth { max-width: none; }
  .shop-acct__box { padding: var(--shop-s4); }
  /* 좁은 화면에서는 한 줄에 하나씩 — 표처럼 옆으로 늘어놓지 않는다 */
  .shop-ord { grid-template-columns: minmax(0, 1fr) auto;
              grid-template-areas: "no st" "date pay" "sum sum" "amt go";
              gap: var(--shop-s2); }
  .shop-ord__amt { text-align: left; }
  .shop-ord__pay { justify-self: end; }
  .shop-odt__item { grid-template-columns: minmax(0, 1fr); }
  .shop-odt__iamt { grid-column: 1; grid-row: auto; }
  .shop-odt__spec > div { grid-template-columns: 60px minmax(0, 1fr); }
  .shop-odt__cagree { margin-left: 0; }
}

/* [V36G.1 FIX-022] 390 에서 가장 긴 동의 줄의 우측 여유가 21px 뿐이었다(실측).
   잘리지는 않지만 라벨이나 버전 표기가 조금만 길어지면 깨진다.
   동의여부를 다음 줄로 내려 이름이 쓸 폭을 되돌려 준다.
   줄을 내리면 항목 안 간격(8px)과 항목 사이 간격(8px)이 같아져 `동의함` 이 위 항목
   것인지 아래 항목 것인지 안 읽힌다 → 항목 사이만 벌려 묶음을 되살린다.
   ⚠️ 문구·버전·상태 텍스트 자체는 그대로다. 430(여유 61px)은 건드리지 않는다.
   ⚠️ 위치 주의 — `.shop-odt__*` 기본 규칙보다 **뒤**여야 한다. 앞에 두면 같은 특정도라
      뒤의 `gap: var(--shop-s2)` 에 덮인다(앞쪽 400px 블록에서 실제로 겪었다). */
@media (max-width: 400px) {
  .shop-odt__consents { gap: var(--shop-s4); }
  .shop-odt__cagree { flex-basis: 100%; }
}

/* ══════════════════════════════════════════════════════════════════
   [V36G.1 R3] Home 리베이스
   ⚠️ 이 블록은 **파일 맨 뒤**에 둔다. 같은 특정도면 뒤가 이긴다 —
      앞쪽의 어두운 hero 규칙을 여기서 덮는다(FIX-022 에서 배운 자리다).
   ══════════════════════════════════════════════════════════════════ */

/* ── Hero — 좌 텍스트 / 우 visual ── */
.shop-hero--split { background: var(--shop-bg-soft); color: var(--shop-ink);
                    display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
                    align-items: center; gap: var(--shop-s6); }
.shop-hero--split::before { content: none; }          /* 어두운 배경 도형을 끈다 */
.shop-hero--split { max-height: 620px; }
.shop-hero--split .shop-hero__in { padding: 56px var(--shop-s7) 56px
                                   max(var(--shop-gutter), calc(50vw - var(--shop-page) / 2)); }
.shop-hero--split .shop-hero__lead { color: var(--shop-ink-2); }
.shop-hero--split .shop-hero__cta .shop-btn--ghost { background: var(--shop-bg); color: var(--shop-ink);
                                                     border-color: var(--shop-line-2); }
.shop-hero--split .shop-hero__cta .shop-btn--ghost:hover { background: var(--shop-bg-warm); }
.shop-hero--split .shop-hero__facts { color: var(--shop-ink-2); border-top-color: var(--shop-line); }
.shop-hero--split .shop-hero__facts strong { color: var(--shop-ink); }
/* ⚠️ 밝은 hero 로 바꾸면서 **어두운 배경용으로 칠해 둔 것들**이 배경에 묻힌다.
      실제로 `많이 찾는 것` 칩이 보이지 않았다(1440 캡처). 검색창 테두리도 사라진다. */
.shop-hero--split .shop-chips { color: var(--shop-ink-3); }
.shop-hero--split .shop-chips__label { color: var(--shop-ink-3); }
.shop-hero--split .shop-chips a { color: var(--shop-ink-2); background: var(--shop-bg);
                                  border: 1px solid var(--shop-line); }
.shop-hero--split .shop-chips a:hover { border-color: var(--shop-ink-4); color: var(--shop-ink); }
.shop-hero--split .shop-hero__search input { border: 1px solid var(--shop-line);
                                             border-right: 0; background: var(--shop-bg); }

.shop-hero__visual { align-self: stretch; min-width: 0; }
/* ⚠️ 원본은 **왼쪽이 빈 자리**(text-safe)이고 물건은 오른쪽에 있다.
      가운데를 기준으로 자르면 정작 보여 줄 것이 화면 밖으로 나간다 — 오른쪽을 붙잡는다. */
.shop-hero__visual img { display: block; width: 100%; height: 100%;
                         object-fit: cover; object-position: right center; }

/* ── AI 소재추천 ── */
.shop-assist2 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
                gap: var(--shop-s6); align-items: center;
                margin: 0 0 var(--shop-section-gap);
                padding: var(--shop-s7); background: var(--shop-bg);
                border: 1px solid var(--shop-line); border-radius: var(--shop-radius-lg); }
.shop-assist2__badge { display: inline-flex; margin: 0 0 var(--shop-s3);
                       padding: 4px var(--shop-s3); border-radius: 999px;
                       background: var(--shop-accent-soft); color: var(--shop-accent-ink);
                       font-size: var(--shop-fs-xs); font-weight: var(--shop-fw-bold); }
.shop-assist2 h2 { font-size: var(--shop-fs-2xl); line-height: 1.35; }
.shop-assist2__lead { margin: var(--shop-s3) 0 var(--shop-s5); color: var(--shop-ink-2);
                      font-size: var(--shop-fs-md); max-width: 40em; }
/* 칩은 링크가 아니다 — 누를 수 있는 것처럼 보이지 않게 테두리만 준다 */
.shop-assist2__chips { display: flex; flex-wrap: wrap; gap: var(--shop-s2); }
.shop-assist2__chips li { padding: 7px var(--shop-s3); border: 1px solid var(--shop-line);
                          border-radius: 999px; background: var(--shop-bg-soft);
                          font-size: var(--shop-fs-sm); color: var(--shop-ink-2); }

/* ── 상담 서비스 카드 ── */
.shop-svcsec__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
                     gap: var(--shop-card-gap); }
.shop-svccard { display: flex; flex-direction: column; overflow: hidden;
                border: 1px solid var(--shop-line); border-radius: var(--shop-radius-lg);
                background: var(--shop-bg); transition: border-color var(--shop-t); }
.shop-svccard:hover { border-color: var(--shop-ink-4); box-shadow: var(--shop-shadow); }
.shop-svccard__visual { display: block; aspect-ratio: 4 / 3; background: var(--shop-bg-soft); }
.shop-svccard__visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 사진이 없는 서비스 — 이름을 크게 두어 "사진이 빠졌다" 가 아니라 "글자 카드" 로 읽히게 */
.shop-svccard__visual--none { display: flex; align-items: center; justify-content: center;
                              background: var(--shop-bg-warm);
                              background-image: repeating-linear-gradient(115deg,
                                  rgba(16, 24, 40, .035) 0 2px, transparent 2px 14px); }
.shop-svccard__visual--none span { font-size: var(--shop-fs-xl); font-weight: var(--shop-fw-bold);
                                   color: var(--shop-ink-4); }
.shop-svccard__body { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto;
                      padding: var(--shop-s4); }
.shop-svccard__title { display: flex; align-items: center; gap: var(--shop-s2);
                       font-size: var(--shop-fs-lg); font-weight: var(--shop-fw-bold);
                       color: var(--shop-ink); }
.shop-svccard__title em { font-style: normal; font-size: 10px; font-weight: var(--shop-fw-med);
                          color: var(--shop-ink-4); border: 1px solid var(--shop-line);
                          border-radius: 999px; padding: 1px 6px; }
.shop-svccard__lead { font-size: var(--shop-fs-sm); color: var(--shop-ink-2); }
.shop-svccard__cta { margin-top: auto; padding-top: var(--shop-s3);
                     font-size: var(--shop-fs-sm); font-weight: var(--shop-fw-med);
                     color: var(--shop-accent-ink); }

/* ── 회사 강점 strip ── */
.shop-strip { margin: 0 calc(50% - 50vw) var(--shop-section-gap); padding: var(--shop-s6) 0;
              background: var(--shop-bg-soft); }
.shop-strip__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
                    gap: var(--shop-s5); max-width: var(--shop-page); margin: 0 auto;
                    padding-inline: var(--shop-gutter); }
.shop-strip__list li { display: flex; flex-direction: column; gap: 6px; }
.shop-strip__list strong { font-size: var(--shop-fs-lg); color: var(--shop-ink); }
.shop-strip__list span { font-size: var(--shop-fs-sm); color: var(--shop-ink-2); }

/* ── 카테고리 카드 이미지 ── */
.shop-promo__visual--img { display: block; overflow: hidden; }
.shop-promo__visual--img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── 다크 graphite 푸터 ── */
.shop-footer { background: var(--shop-bg-dark); border-top: 0; color: rgba(234, 240, 247, .72); }
.shop-footer .shop-logo { color: #eaf0f7; }
.shop-footer h2 { color: #eaf0f7; }
.shop-footer a { color: rgba(234, 240, 247, .78); }
.shop-footer a:hover { color: #fff; text-decoration: underline; }
.shop-footer__biz { border-top: 1px solid rgba(234, 240, 247, .14); }
.shop-footer__biz dt, .shop-footer__biz dd { color: rgba(234, 240, 247, .62); }
.shop-footer__note, .shop-footer__copy { color: rgba(234, 240, 247, .5); }

/* ── 반응형 ── */
@media (max-width: 1024px) {
    .shop-assist2 { grid-template-columns: minmax(0, 1fr); gap: var(--shop-s5);
                    padding: var(--shop-s6); }
    .shop-svcsec__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shop-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    /* 좁아지면 이미지를 위로 올린다 — 옆에 두면 글자도 사진도 좁아진다 */
    .shop-hero--split { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .shop-hero--split .shop-hero__in { order: 2; padding: var(--shop-s6) var(--shop-gutter); }
    .shop-hero__visual { order: 1; aspect-ratio: 16 / 9; }
}
@media (max-width: 720px) {
    .shop-svcsec__grid { grid-template-columns: minmax(0, 1fr); }
    .shop-svccard { flex-direction: row; }
    .shop-svccard__visual { flex: 0 0 38%; aspect-ratio: auto; }
    .shop-svccard__visual--none { min-height: 108px; }
    .shop-svccard__visual--none span { font-size: var(--shop-fs-md); }
    .shop-strip__list { grid-template-columns: minmax(0, 1fr); gap: var(--shop-s4); }
    .shop-assist2 { padding: var(--shop-s5); }
    .shop-assist2 h2 { font-size: var(--shop-fs-xl); }
}

/* ══════════════════════════════════════════════════════════════════
   [V36G.1 R4] 고객지원 — R3 Home 과 같은 카드 언어를 쓴다
   ══════════════════════════════════════════════════════════════════ */

/* ── 빠른 이동 ── */
/* ⚠️ `.shop-lead` 의 아래 여백은 전역 초기화에 죽어 있다(FIX-014 에서 확인, auth 범위에서만 되살렸다).
      그대로 두면 리드와 이 제목이 붙어 버린다 — 여기서 위 여백을 직접 준다. */
.shop-quick { margin: var(--shop-s5) 0 var(--shop-s6); }
.shop-quick__head { margin: 0 0 var(--shop-s3); font-size: var(--shop-fs-lg);
                    font-weight: var(--shop-fw-bold); color: var(--shop-ink); }
.shop-quick__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
                    gap: var(--shop-card-gap); }
.shop-quick__item { display: flex; flex-direction: column; gap: 6px; min-height: var(--shop-ctrl);
                    padding: var(--shop-s4); background: var(--shop-bg);
                    border: 1px solid var(--shop-line); border-radius: var(--shop-radius-lg);
                    transition: border-color var(--shop-t); }
.shop-quick__item:hover { border-color: var(--shop-ink-4); box-shadow: var(--shop-shadow); }
.shop-quick__t { display: flex; align-items: center; flex-wrap: wrap; gap: var(--shop-s2);
                 font-size: var(--shop-fs-lg); font-weight: var(--shop-fw-bold); color: var(--shop-ink); }
/* 회사 홈페이지로 나가는 것은 눌러 보기 전에 알 수 있어야 한다 */
.shop-quick__t em, .shop-cnews__t em { font-style: normal; font-size: 10px;
                                       font-weight: var(--shop-fw-med); color: var(--shop-ink-4);
                                       border: 1px solid var(--shop-line); border-radius: 999px;
                                       padding: 1px 6px; }
.shop-quick__d { font-size: var(--shop-fs-sm); color: var(--shop-ink-2); }

/* ── 회사 콘텐츠 링크 ── */
.shop-cnews__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
                    gap: var(--shop-card-gap); }
.shop-cnews__item { display: flex; flex-direction: column; gap: 6px; padding: var(--shop-s5);
                    background: var(--shop-bg); border: 1px solid var(--shop-line);
                    border-radius: var(--shop-radius-lg); transition: border-color var(--shop-t); }
.shop-cnews__item:hover { border-color: var(--shop-ink-4); box-shadow: var(--shop-shadow); }
.shop-cnews__t { font-size: var(--shop-fs-xl); font-weight: var(--shop-fw-bold); color: var(--shop-ink); }
.shop-cnews__d { font-size: var(--shop-fs-sm); color: var(--shop-ink-2); }
.shop-cnews__go { margin-top: auto; padding-top: var(--shop-s3);
                  font-size: var(--shop-fs-sm); font-weight: var(--shop-fw-med);
                  color: var(--shop-accent-ink); }

/* ── 연락처 ── */
.shop-contact { display: grid; grid-template-columns: minmax(0, 1fr) auto;
                align-items: center; gap: var(--shop-s6);
                margin: var(--shop-section-gap) 0 0; padding: var(--shop-s7);
                background: var(--shop-bg-soft); border-radius: var(--shop-radius-lg); }
.shop-contact h2 { font-size: var(--shop-fs-2xl); }
.shop-contact__body > p { margin: var(--shop-s2) 0 var(--shop-s5); color: var(--shop-ink-2);
                          font-size: var(--shop-fs-md); }
.shop-contact__kv { display: flex; flex-wrap: wrap; gap: var(--shop-s3) var(--shop-s6); }
.shop-contact__kv > div { display: flex; align-items: baseline; gap: var(--shop-s2); }
.shop-contact__kv dt { font-size: var(--shop-fs-xs); color: var(--shop-ink-4); }
.shop-contact__kv dd { margin: 0; font-size: var(--shop-fs-md); font-weight: var(--shop-fw-med);
                       color: var(--shop-ink); }
.shop-contact__kv a { color: var(--shop-ink); }
.shop-contact__kv a:hover { text-decoration: underline; }
.shop-contact__cta { margin: 0; }

@media (max-width: 1024px) {
    .shop-quick__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shop-cnews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .shop-quick__grid, .shop-cnews__grid { grid-template-columns: minmax(0, 1fr); }
    .shop-contact { grid-template-columns: minmax(0, 1fr); padding: var(--shop-s5); }
    .shop-contact__cta .shop-btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════
   [V36G.1 R5] 2차 화면 시각 조화 — Product · Cart · Checkout · Auth · Account · Orders
   ⚠️ **새 디자인 시스템을 만들지 않는다.** R3 Home 이 쓰는 토큰·반경·그림자를 그대로 쓴다.
   ⚠️ 기능 마크업을 바꾸지 않는다 — 여기 있는 것은 전부 표면(색·테두리·간격)뿐이다.
   ══════════════════════════════════════════════════════════════════ */

/* ── 정보 상자 — 레퍼런스의 "게이트 상태 안내" 자리 ──
   결제·배송처럼 **아직 확정되지 않은 것**을 알릴 때만 쓴다.
   ⚠️ 경고(빨강)로 칠하지 않는다. 잘못된 상태가 아니라 준비 중인 상태다. */
.shop-info { display: grid; gap: 4px; padding: var(--shop-s3) var(--shop-s4);
             background: var(--shop-accent-soft); border: 1px solid var(--shop-line);
             border-radius: var(--shop-radius); }
.shop-info__t { margin: 0; font-size: var(--shop-fs-sm); font-weight: var(--shop-fw-bold);
                color: var(--shop-accent-ink); }
.shop-info__d { margin: 0; font-size: var(--shop-fs-xs); color: var(--shop-ink-2); line-height: 1.6; }
.shop-info--ship { margin-top: var(--shop-s3); background: var(--shop-bg-soft); }
.shop-info--pay { margin-top: var(--shop-s2); }

/* ── 요약 카드(주문서 우측 · 장바구니) — 레퍼런스의 sticky 견적 요약 ── */
.shop-co__box, .shop-cart__sum { border-radius: var(--shop-radius-lg); }
.shop-co__boxh { font-size: var(--shop-fs-lg); }
/* 합계는 한 단계 더 세운다 — 레퍼런스에서 가장 강한 줄이다 */
.shop-total .is-total { font-size: var(--shop-fs-xl); }

/* ── 카드 표면 통일 ──
   화면마다 조금씩 다르던 모서리·테두리를 R3 카드 언어로 맞춘다. */
.shop-acct__box, .shop-ord, .shop-support__card, .shop-guide__card,
.shop-detail__buy, .shop-odt > .shop-co__sec, .shop-result {
    border-radius: var(--shop-radius-lg);
}
.shop-support__card, .shop-acct__box { border: 1px solid var(--shop-line); background: var(--shop-bg); }

/* ── 상태 배지 — R3 서비스 카드의 꼬리표와 같은 모양 ── */
.shop-ord__st { border-radius: 999px; padding: 4px var(--shop-s3); }

/* ── 조작 요소 ──
   높이는 이미 `--shop-ctrl` 로 통일돼 있다. 여기서는 **모서리와 테두리만** 맞춘다. */
.shop-fld__i, .shop-textarea textarea, .shop-select, .shop-qty {
    border-radius: var(--shop-radius-sm);
}
.shop-fld__i:focus-visible, .shop-textarea textarea:focus-visible {
    outline: 2px solid var(--shop-focus); outline-offset: 1px;
}

/* ── 단계 표시 — 레퍼런스의 원형 progress ── */
.shop-steps2__n { border-radius: 999px; }
    /* 레퍼런스 06 모바일은 **번호만** 남기고 단계 이름을 감춘다 — 다섯 개가 겹치지 않게 */
    .shop-steps2__t { font-size: var(--shop-fs-xs); line-height: 1.2; word-break: keep-all; }
.shop-steps2__i.is-done .shop-steps2__n { background: var(--shop-accent-soft);
                                          color: var(--shop-accent-ink); }

/* ── 예상견적서 대화상자(V33 기능) — 표면만 R5 언어로 ── */
.shop-estimate { border-radius: var(--shop-radius-lg); border: 1px solid var(--shop-line); }

@media (max-width: 720px) {
    .shop-info { padding: var(--shop-s3); }
}

/* ══════════════════════════════════════════════════════════════════
   [V36G.1 검색 서비스 discovery] 검색 결과의 두 번째 타입 — 상담 서비스
   ⚠️ 상품 카드와 **다르게 보여야 한다.** 같으면 담을 수 있는 줄 안다.
      그래서 격자가 아니라 목록이고, 가격 자리가 아예 없다.
   ══════════════════════════════════════════════════════════════════ */
.shop-svcres { margin: 0 0 var(--shop-section-gap); padding: var(--shop-s5);
               background: var(--shop-bg-soft); border: 1px solid var(--shop-line);
               border-radius: var(--shop-radius-lg); }
.shop-svcres__h { display: flex; align-items: center; gap: var(--shop-s2);
                  font-size: var(--shop-fs-xl); color: var(--shop-ink); }
.shop-svcres__h em { font-style: normal; font-size: var(--shop-fs-sm);
                     font-weight: var(--shop-fw-med); color: var(--shop-ink-3); }
.shop-svcres__note { margin: 6px 0 var(--shop-s4); font-size: var(--shop-fs-sm);
                     color: var(--shop-ink-2); }
.shop-svcres__list { display: flex; flex-direction: column; gap: var(--shop-s3); }
.shop-svcres__item { display: flex; align-items: center; justify-content: space-between;
                     gap: var(--shop-s4); padding: var(--shop-s4);
                     background: var(--shop-bg); border: 1px solid var(--shop-line);
                     border-radius: var(--shop-radius); }
.shop-svcres__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.shop-svcres__t { display: flex; align-items: center; gap: var(--shop-s2);
                  font-size: var(--shop-fs-lg); font-weight: var(--shop-fw-bold);
                  color: var(--shop-ink); }
/* `상담` 꼬리표는 R2 GNB·R3 카드와 같은 모양이다 — 화면마다 다르면 같은 뜻으로 안 읽힌다 */
.shop-svcres__t em { font-style: normal; font-size: 10px; font-weight: var(--shop-fw-med);
                     color: var(--shop-ink-4); border: 1px solid var(--shop-line);
                     border-radius: 999px; padding: 1px 6px; }
.shop-svcres__d { font-size: var(--shop-fs-sm); color: var(--shop-ink-2); overflow-wrap: anywhere; }
.shop-svcres__act { display: flex; gap: var(--shop-s2); flex: none; }

@media (max-width: 720px) {
    .shop-svcres__item { flex-direction: column; align-items: stretch; }
    .shop-svcres__act { flex-direction: column; }
    .shop-svcres__act .shop-btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════
   [V36G.1 BRIDGE] 쇼핑몰에서 이어지는 회사 화면 — `/recommend` · `/order-lookup`

   왜 여기인가
     쇼핑몰이 이미 쓰는 파일이다. 새 디자인 시스템 파일을 만들지 않는다(지시서 §10).
     회사 components.css 를 건드리지 않으므로 회사 자산 버전이 움직이지 않는다(§16).

   무엇을 고치나 — 2026-08-20 전수 캡처에서 실제로 어긋난 것만
     · 색은 이미 같았다. 회사 tokens.css 의 ivory #F2F0EA · graphite #181918 · bronze #9B7653 은
       shop.css 의 --shop-bg-warm · --shop-ink · --shop-accent 과 **같은 값**이다.
     · 어긋난 것은 조판이다. `.subhero` 는 상단 여백 160px + 제목 clamp(34~72px) 라
       쇼핑몰 페이지 제목(fs-3xl 34px · 위 24px)에서 넘어오면 화면이 통째로 바뀐 것처럼 읽혔다.
     · `/recommend` 는 제목 폭(1240px)과 본문 폭(1440px)이 서로 달라 좌측선이 어긋나 있었다.
     · `/order-lookup` 은 필드 사이 간격이 0 이고 힌트가 다음 라벨에 붙어 있었다.

   ⚠️ 회사 전체를 바꾸지 않는다. 모든 규칙이 `body.bridge` 또는 `.shop-bridge*` 안에 있다.
   ⚠️ 이 파일은 회사 components.css **뒤에** 실린다. 같은 명시도면 뒤가 이긴다.
   ══════════════════════════════════════════════════════════════════ */

/* ── 화면 머리 — 회사 `.subhero` 를 대신한다 ──
   회사 헤더는 position:absolute 라 본문이 그 높이만큼 비켜야 한다(--header-h). */
.shop-bridge { padding-top: calc(var(--header-h, 80px) + var(--shop-s6)); }
.shop-bridge__top { display: flex; align-items: center; justify-content: space-between;
                    gap: var(--shop-s3); flex-wrap: wrap; margin-bottom: var(--shop-s4);
                    min-height: var(--shop-ctrl-sm); }
.shop-bridge__crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
                       font-size: var(--shop-fs-sm); color: var(--shop-ink-4); }
.shop-bridge__crumbs a:hover { text-decoration: underline; }
.shop-bridge__crumbs [aria-current] { color: var(--shop-ink-2); }
/* 되돌아가는 길은 눌러도 되는 것으로 보여야 한다 — 쇼핑몰 pill 과 같은 모양 */
.shop-bridge__back { display: inline-flex; align-items: center; gap: 6px;
                     min-height: var(--shop-ctrl-sm); padding: 0 14px;
                     border: 1px solid var(--shop-line); border-radius: 999px;
                     background: var(--shop-bg); color: var(--shop-ink-2);
                     font-size: var(--shop-fs-sm); font-weight: var(--shop-fw-med);
                     transition: border-color var(--shop-t), color var(--shop-t); }
.shop-bridge__back:hover { border-color: var(--shop-ink); color: var(--shop-ink); }
.shop-bridge__title { margin: 0; font-size: var(--shop-fs-3xl); font-weight: var(--shop-fw-bold);
                      letter-spacing: -0.02em; line-height: 1.3; color: var(--shop-ink); }
.shop-bridge__lead { max-width: 68ch; margin: var(--shop-s2) 0 0; color: var(--shop-ink-2);
                     font-size: var(--shop-fs-lg); line-height: 1.6; }

/* ── 본문 간격 — 회사 `.section-pad` 는 위아래 최대 110px 이다. 쇼핑몰 눈금으로 줄인다. ── */
body.bridge .section-pad { padding: var(--shop-s6) 0 var(--shop-s7); }

/* ── 자격증명 한 열(주문조회) ──
   쇼핑몰 로그인·회원가입이 쓰는 `.shop-auth` 와 같은 모양이다 — 가운데 한 열.
   ⚠️ 제목과 폼이 **같은 열** 안에 있어야 한다. 제목만 페이지 왼쪽에 남으면 둘이 따로 논다
      (FIX-007 이 로그인·회원가입에서 고친 것과 같은 결함이 이 화면에도 있었다).
   폭은 420px 이 아니라 640px 이다 — 조회 결과가 2열 표(주문/결제 상태 · 규격/수량)라
      420px 에서는 한 열로 무너진다. 입력과 결과가 같은 열을 쓴다. */
.shop-bridge__col { max-width: 640px; margin-inline: auto; }
.shop-bridge--narrow .shop-bridge__body { max-width: 640px; margin-inline: auto; }

/* ── 다음 단계 — 상품 · 견적 · 상담으로 되돌아가는 길(지시서 §8) ──
   아이보리 바탕 위 흰 밴드. 쇼핑몰의 섹션 리듬과 같다. */
.shop-bridge__next { margin-top: var(--shop-s6); padding: var(--shop-s7) 0 var(--shop-s8);
                     background: var(--shop-bg); border-top: 1px solid var(--shop-line); }
.shop-bridge__nexth { margin: 0 0 var(--shop-s4); font-size: var(--shop-fs-xl);
                      font-weight: var(--shop-fw-bold); color: var(--shop-ink); }
.shop-bridge__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
                     gap: var(--shop-card-gap); }
.shop-bridge__card { display: flex; flex-direction: column; gap: 6px; min-height: var(--shop-ctrl);
                     padding: var(--shop-s4); background: var(--shop-bg);
                     border: 1px solid var(--shop-line); border-radius: var(--shop-radius-lg);
                     transition: border-color var(--shop-t), box-shadow var(--shop-t); }
.shop-bridge__card:hover { border-color: var(--shop-ink-4); box-shadow: var(--shop-shadow); }
.shop-bridge__ct { display: flex; align-items: center; flex-wrap: wrap; gap: var(--shop-s2);
                   font-size: var(--shop-fs-lg); font-weight: var(--shop-fw-bold); color: var(--shop-ink); }
/* 다른 사이트로 나가는 것은 눌러 보기 전에 알 수 있어야 한다 — R4 고객지원 꼬리표와 같은 모양 */
.shop-bridge__ct em { font-style: normal; font-size: 10px; font-weight: var(--shop-fw-med);
                      color: var(--shop-ink-4); border: 1px solid var(--shop-line);
                      border-radius: 999px; padding: 1px 6px; }
.shop-bridge__cd { font-size: var(--shop-fs-sm); color: var(--shop-ink-2); line-height: 1.55; }
/* 상담 서비스는 상품이 아니다 — 카드가 아니라 링크 줄로 둔다(검색 결과와 같은 원칙) */
.shop-bridge__svc { display: flex; align-items: center; flex-wrap: wrap; gap: var(--shop-s2);
                    margin: var(--shop-s5) 0 0; padding-top: var(--shop-s4);
                    border-top: 1px solid var(--shop-line-2); }
.shop-bridge__svc em { font-style: normal; margin-right: var(--shop-s2);
                       font-size: var(--shop-fs-sm); color: var(--shop-ink-3); }
.shop-bridge__svc a { display: inline-flex; align-items: center; min-height: var(--shop-ctrl-sm);
                      padding: 0 14px; border: 1px solid var(--shop-line); border-radius: 999px;
                      font-size: var(--shop-fs-sm); font-weight: var(--shop-fw-med);
                      color: var(--shop-ink); transition: border-color var(--shop-t); }
.shop-bridge__svc a:hover { border-color: var(--shop-ink); }

/* ── 주문조회 입력 ──
   ⚠️ 필드명(order_number · lookup_token) · 검증 · Rate Limit 은 손대지 않는다. 표면만 바꾼다.
   기존 결함: `.ol-form` 에 gap 이 없어 두 필드가 붙고, `.form-note` 의 margin-top:18px 이
   힌트를 다음 라벨 쪽으로 밀어 어느 필드의 설명인지 읽히지 않았다. */
body.bridge .ol-form { display: flex; flex-direction: column; gap: var(--shop-s5);
                       margin-top: var(--shop-s5); padding: var(--shop-s6);
                       background: var(--shop-bg); border: 1px solid var(--shop-line);
                       border-radius: var(--shop-radius-lg); }
body.bridge .ol-form .field { gap: 6px; }
body.bridge .ol-form .field label { font-size: var(--shop-fs-sm); font-weight: var(--shop-fw-med);
                                    color: var(--shop-ink-2); }
body.bridge .ol-form .field input { height: var(--shop-ctrl); border-radius: var(--shop-radius-sm);
                                    border-color: var(--shop-line-2); background: var(--shop-bg);
                                    font-size: var(--shop-fs-md); color: var(--shop-ink); }
body.bridge .ol-form .field input:focus { border-color: var(--shop-accent); }
body.bridge .ol-form .form-note { margin-top: 0; font-size: var(--shop-fs-sm);
                                  color: var(--shop-ink-3); line-height: 1.55; }
body.bridge .ol-form .form-actions { margin-top: 0; }
body.bridge .ol-toktoggle { height: var(--shop-ctrl-sm); border-radius: var(--shop-radius-sm);
                            border-color: var(--shop-line-2); background: var(--shop-bg);
                            font-size: var(--shop-fs-sm); color: var(--shop-ink-2); }
body.bridge .ol-toktoggle:hover { border-color: var(--shop-ink); color: var(--shop-ink); }
body.bridge .ol-form .btn { height: var(--shop-ctrl-lg); border-radius: var(--shop-radius-sm);
                            font-size: var(--shop-fs-md); font-weight: var(--shop-fw-bold); }
body.bridge .dev-flag { border-radius: 999px; font-size: var(--shop-fs-xs);
                        color: var(--shop-accent-ink); background: var(--shop-accent-soft); }

/* ── 주문조회 결과 ──
   ⚠️ 화면 문자열은 전부 `assets/js/order-lookup.js` 가 API 응답으로 만든다. 여기서는 면만 바꾼다.
      주문 상태와 결제 상태는 이미 각각 이름표를 달고 따로 나온다(FIX-020) — 합치지 않는다.
      배송비는 `미확정` 으로만 나온다. 무료배송·0원 문구를 만들지 않는다. */
body.bridge .ol-msg { border-radius: var(--shop-radius); border-color: var(--shop-line);
                      border-left: 3px solid var(--shop-warn); background: var(--shop-bg);
                      font-size: var(--shop-fs-sm); color: var(--shop-ink); }
body.bridge .ol-card { border-radius: var(--shop-radius-lg); border-color: var(--shop-line);
                       background: var(--shop-bg); padding: var(--shop-s5);
                       margin-bottom: var(--shop-s3); }
body.bridge .ol-card h3 { font-size: var(--shop-fs-lg); color: var(--shop-ink); }
body.bridge .ol-kv dt, body.bridge .ol-item__fields dt, body.bridge .ol-amt dt {
    font-size: var(--shop-fs-xs); color: var(--shop-ink-3); }
body.bridge .ol-badge { border-radius: 999px; font-size: var(--shop-fs-xs); padding: 4px 12px; }
body.bridge .ol-badge--review { background: var(--shop-accent-soft); color: var(--shop-accent-ink); }
body.bridge .ol-badge--exception { background: var(--shop-ink); color: #fff; }
body.bridge .ol-step.is-done .ol-step__dot { background: var(--shop-accent); }
body.bridge .ol-step.is-done:not(:first-child)::before { background: var(--shop-accent); }
body.bridge .ol-step.is-active .ol-step__dot { background: var(--shop-ink); }
body.bridge .ol-review-box { border-left: 3px solid var(--shop-accent); }
body.bridge .ol-amt--total { border-top: 2px solid var(--shop-ink); }
body.bridge .ol-notices li { color: var(--shop-ink-3); }

/* ── 반응형 ──
   쇼핑몰과 같은 분기점을 쓴다(1024 / 720). 새 분기점을 만들지 않는다. */
@media (max-width: 1024px) {
    .shop-bridge__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* ⚠️ 1024 이하에서 회사 헤더가 `position: sticky` 로 바뀌어 **흐름 안에서 자리를 차지한다**.
       그런데도 --header-h 만큼 또 비우면 헤더 아래가 두 번 비어 96px 이 뜬다(390 실측).
       (회사 `.subhero` 에도 같은 계산이 남아 있다 — 그쪽은 이번 배치 범위 밖이라 그대로 둔다.) */
    .shop-bridge { padding-top: var(--shop-s6); }
    /* 헤더가 sticky 라 조회 결과로 스크롤하면 결과 첫 줄이 헤더 밑에 깔린다.
       `order-lookup.js` 의 scrollIntoView 를 건드리지 않고 여백만 알려 준다(회사 JS 무변경). */
    body.bridge .ol-result { scroll-margin-top: calc(var(--header-h, 80px) + var(--shop-s4)); }
}
@media (max-width: 720px) {
    .shop-bridge { padding-top: var(--shop-s5); }
    .shop-bridge__top { align-items: flex-start; }
    .shop-bridge__grid { grid-template-columns: minmax(0, 1fr); }
    .shop-bridge__col, .shop-bridge--narrow .shop-bridge__body { max-width: none; }
    body.bridge .ol-form { padding: var(--shop-s4); gap: var(--shop-s4); }
    body.bridge .ol-form .btn { width: 100%; justify-content: center; }
    body.bridge .ol-card { padding: var(--shop-s4); }
}

/* ══════════════════════════════════════════════════════════════════
   [V36G.1 GATE 1] Home Reference-Locked Rebase

   시각 권위: references/ui/01_DESKTOP_HOME_SOURCE_OF_TRUTH.png
              references/ui/02_MOBILE_HOME_SOURCE_OF_TRUTH.png
   기존 화면 구조는 권위가 아니다(지시서 §0·§2·§14).

   레퍼런스 실측(1440 기준으로 환산)
     · 본문 기준선 : 좌 100px · 폭 1240px (1440 - 100*2)
     · 헤더 3단    : utility 41 / brand 105 / GNB 53
     · Hero        : 높이 412 · 좌 텍스트 ~37% · 우 visual ~63%(오른쪽 끝까지 bleed)
     · 카테고리 8칸: 카드 폭 146 · 간격 12  → 실제 6칸이므로 폭을 넓혀 밀도를 맞춘다
     · 상품 6칸    : 카드 폭 178 · 간격 32
     · 신뢰 strip  : 높이 142 · 아이보리 둥근 상자 · 4열 + 세로 구분선
     · 하단 3열    : 높이 280
     · 다크 푸터   : 높이 206

   ⚠️ 이 블록은 파일 맨 뒤에 온다. 같은 명시도면 뒤가 이긴다.
   ══════════════════════════════════════════════════════════════════ */

/* ── Home 세로 리듬 ──
   레퍼런스는 섹션 사이를 64px 로 벌리지 않는다. 표면(흰 면 ↔ 아이보리 밴드)이 구분을 맡고
   간격은 그보다 촘촘하다. 전 화면 토큰을 바꾸지 않고 Home 안에서만 조인다. */
.shop-cats, .shop-assist2, .shop-svcsec, .shop-strip, .shop-lower,
.shop-main > .shop-section { margin-bottom: var(--shop-s7); }
.shop-hero--full { margin-bottom: var(--shop-s7); }

/* ── 본문 기준선 ──
   기존 `max-width + padding` 은 1440 에서 좌측 기준선을 132px 로 만든다(레퍼런스 100px).
   폭 계산에 여백을 **포함**시켜 어느 폭에서도 기준선이 하나로 유지되게 한다. */
.shop-main,
.shop-utilbar__in,
.shop-brandbar__in,
.shop-gnb,
.shop-mquick,
.shop-footer__cols,
.shop-footer__bottom-in {
    width: min(100% - (var(--shop-gutter) * 2), var(--shop-page));
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
}
.shop-main { padding-block: 0 var(--shop-s7); }

/* ══════ 헤더 3단 ══════
   ⚠️ 3단을 전부 붙여 두면 스크롤 중 화면 위 200px 을 잡아먹는다.
      utility 줄은 흘려보내고 brand+GNB 만 붙게 한다 — 붙는 높이는 158px 로 기존과 같다. */
.shop-header { position: sticky; top: calc(-1 * var(--shop-utilbar-h));
               background: var(--shop-bg); border-bottom: 1px solid var(--shop-line);
               box-shadow: 0 1px 0 rgba(16, 24, 40, .03); }

/* 1단 — utility */
.shop-utilbar { background: var(--shop-bg-tint); border-bottom: 1px solid var(--shop-line-2);
                font-size: var(--shop-fs-xs); color: var(--shop-ink-3); }
.shop-utilbar__in { display: flex; align-items: center; gap: var(--shop-s4);
                    min-height: var(--shop-utilbar-h); }
.shop-utilbar__note { margin-right: auto; }
.shop-utilbar__nav { display: flex; align-items: center; gap: 0; }
/* 항목 사이 얇은 세로선 — 레퍼런스와 같은 구분 방식 */
.shop-utilbar__nav > * + *::before { content: ""; display: inline-block; width: 1px; height: 11px;
                                     margin: 0 var(--shop-s3); background: var(--shop-line);
                                     vertical-align: -1px; }
.shop-utilbar__nav a { display: inline-flex; align-items: center; min-height: var(--shop-utilbar-h); }
.shop-utilbar__nav a:hover { color: var(--shop-ink); text-decoration: underline; }
.shop-utilbar .shop-util__out { display: inline-flex; margin: 0; }
.shop-utilbar .shop-util__out button { display: inline-flex; align-items: center;
                                       min-height: var(--shop-utilbar-h); padding: 0; border: 0;
                                       background: none; font: inherit; color: inherit; cursor: pointer; }
.shop-utilbar .shop-util__out button:hover { color: var(--shop-ink); text-decoration: underline; }

/* 2단 — 로고 · 통합검색 · 퀵액션 */
.shop-brandbar { background: var(--shop-bg); }
.shop-brandbar__in { display: flex; align-items: center; gap: var(--shop-s6);
                     min-height: var(--shop-brandbar-h); }
.shop-brandbar .shop-logo { flex: 0 0 auto; font-size: 26px; }

/* 검색 — 헤더에서 가장 넓은 요소다. 레퍼런스의 pill 모양·브론즈 테두리·원형 버튼. */
.shop-brandbar .shop-search { flex: 1 1 auto; display: flex; align-items: center;
                              max-width: 560px; margin-inline: auto;
                              border: 1.5px solid var(--shop-accent); border-radius: 999px;
                              background: var(--shop-bg); overflow: hidden; }
.shop-brandbar .shop-search input { flex: 1 1 auto; min-width: 0; height: 48px;
                                    padding: 0 var(--shop-s3) 0 var(--shop-s5);
                                    border: 0; border-radius: 0; background: transparent;
                                    font-size: var(--shop-fs-md); color: var(--shop-ink); }
.shop-brandbar .shop-search input:focus { outline: none; }
.shop-brandbar .shop-search input::placeholder { color: var(--shop-ink-4); }
.shop-brandbar .shop-search button { flex: 0 0 auto; display: inline-flex; align-items: center;
                                     justify-content: center; width: 62px; height: 48px;
                                     padding: 0; border: 0; border-radius: 0;
                                     background: var(--shop-accent); color: #fff; cursor: pointer; }
.shop-brandbar .shop-search button:hover { background: var(--shop-accent-ink); }
.shop-brandbar .shop-search svg { width: 20px; height: 20px; fill: none; stroke: currentColor;
                                  stroke-width: 2; stroke-linecap: round; }
/* 검색창에 포커스가 들어오면 pill 전체가 반응한다 — 안쪽 input 만 빛나면 테두리와 따로 논다 */
.shop-brandbar .shop-search:focus-within { box-shadow: 0 0 0 3px var(--shop-accent-soft); }

/* 퀵액션 — 아이콘 + 라벨. 전부 실제로 열리는 라우트다. */
/* 퀵액션은 헤더 **오른쪽 끝**에 붙는다.
   ⚠️ 예전에는 이 자리를 가운데 검색창(`flex: 1 1 auto`)이 밀어 주고 있었다. 검색 노출 게이트가
      닫히면서 그 요소가 아예 렌더되지 않자, 밀어 줄 것이 없어져 퀵액션이 **로고 옆에 붙었다**.
      즉 정렬을 다른 요소의 존재에 기대고 있었던 것이 원인이다 — 이제 스스로 오른쪽에 선다.
   ⚠️ `position: absolute` 나 `right` 하드코딩을 쓰지 않는다. 컨테이너 폭·헤더 높이가 그대로 남는다.
   ⚠️ 좁은 폭에서는 `.shop-logo { margin-right: auto }` 가 이미 같은 일을 한다. 둘이 함께 있어도
      뒤따르는 auto 여백이 없으므로 퀵액션은 여전히 오른쪽 끝에서 끝난다(자리 이동 없음). */
.shop-quick2 { flex: 0 0 auto; margin-left: auto;
               display: flex; align-items: center; gap: var(--shop-s5); }
.shop-quick2 a, .shop-quick2 .shop-burger {
    position: relative; display: inline-flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 5px; min-width: 54px; min-height: var(--shop-ctrl);
    padding: 0; border: 0; background: none; cursor: pointer;
    font-size: var(--shop-fs-xs); font-weight: var(--shop-fw-med); color: var(--shop-ink-2);
    line-height: 1; white-space: nowrap; }
.shop-quick2 a:hover, .shop-quick2 .shop-burger:hover { color: var(--shop-accent-ink); }
.shop-quick2 svg { width: 24px; height: 24px; fill: none; stroke: currentColor;
                   stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.shop-quick2__cart { color: var(--shop-ink) !important; }
.shop-quick2 .shop-util__badge { position: absolute; top: -4px; right: 6px;
                                 display: inline-flex; align-items: center; justify-content: center;
                                 min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
                                 background: var(--shop-accent); color: #fff; font-style: normal;
                                 font-size: 10px; font-weight: var(--shop-fw-bold); line-height: 1; }
/* 데스크톱에서는 GNB 가 카테고리를 전부 보여 준다 — 같은 서랍을 여는 버튼을 또 두지 않는다 */
.shop-quick2 .shop-burger { display: none; }

/* 3단 — GNB */
.shop-gnbbar { background: var(--shop-bg); border-top: 1px solid var(--shop-line-2); }
.shop-gnb { display: flex; align-items: center; gap: 0;
            min-height: var(--shop-gnb-h); padding-block: 0;
            font-size: var(--shop-fs-lg); font-weight: var(--shop-fw-bold); }
/* 레퍼런스는 항목이 균등하게 벌어져 있다. 마지막 항목이 오른쪽 끝에 붙지 않게 균등 배분한다.
   [Shop UI Follow-up §6] 접이식 상담 메뉴가 빠져 GNB 는 이제 **링크만** 남았다.
   `flex: 1 1 auto` 가 남은 항목에 그대로 나눠 주므로 간격 값을 손볼 것이 없다 —
   한 칸이 줄어든 만큼 각 항목이 조금씩 넓어질 뿐이고, 그게 레퍼런스의 균등 배분 그대로다. */
.shop-gnb > a { flex: 1 1 auto; justify-content: center; }
.shop-gnb a { display: inline-flex; align-items: center; justify-content: center; gap: 5px;
              min-height: var(--shop-gnb-h); position: relative; }

/* ══════ 4. HERO ══════
   레퍼런스: 전체폭 밴드 · 사진이 오른쪽 끝까지 bleed · 글자는 사진 왼쪽 빈 자리 위에 얹힌다.
   ⚠️ 원본은 **왼쪽이 빈 자리**(text-safe)이고 물건은 오른쪽에 있다.
      가운데를 기준으로 자르면 정작 보여 줄 것이 화면 밖으로 나간다 — 오른쪽을 붙잡는다. */
/* ⚠️ 앵커 버튼은 `.shop a { color: inherit }`(0,1,1) 때문에 `.shop-btn`(0,1,0)의 글자색을
      **한 번도 받은 적이 없다.** 어두운 hero 위에서는 상속색이 우연히 맞아 보이지 않았는데,
      밝은 면으로 바꾸는 순간 흰 배경에 흰 글자가 된다(견적 문의 버튼 실측).
      선언한 색이 실제로 적용되도록 명시도만 한 단계 올린다. 색 자체는 원래 값 그대로다. */
.shop .shop-btn { color: #fff; }
.shop .shop-btn--primary { color: #fff; }
.shop .shop-btn--ghost { color: var(--shop-ink); }
.shop .shop-btn--quiet { color: var(--shop-ink-2); }
.shop .shop-btn--outline { color: var(--shop-accent-ink); }
/* [V36G.1 R2] 같은 이유로 **`.shop a`(0,1,1) 에 눌리는 링크 두 개**를 여기서 되찾는다.
   `.shop a { color: inherit }`(125행)가 단일 클래스(0,1,0)로 적은 `color` 를 이겨서,
   건너뛰기 링크와 AI 플로팅 CTA 가 **자기 배경과 같은 계열의 글자색**을 상속하고 있었다.
     · `.shop-skip` — 초점을 받으면 진한 면 위에 진한 글자(1:1). 사실상 안 보였다.
     · `.shop-fab`  — 파란 면 위에 진한 남색 글자(3.61:1). 옛 브론즈 면에서도 2.61:1 이었다.
   ⚠️ 새로 만든 결함이 아니다 — 팔레트를 바꾸며 대비를 재다가 드러났다. 원인은 색이 아니라
      **특이도**이고, 이 파일이 이미 `.shop .shop-btn` 로 쓰는 것과 같은 방식으로 고친다. */
.shop .shop-skip { color: #fff; }
.shop .shop-fab, .shop .shop-fab:hover { color: #fff; }

.shop-hero--full { position: relative; display: grid; overflow: hidden;
                   min-height: 412px; margin-top: 0; margin-bottom: var(--shop-section-gap);
                   background: var(--shop-bg-soft); color: var(--shop-ink); }
.shop-hero--full::before { content: none; }
.shop-hero--full .shop-hero__visual { position: absolute; inset: 0; z-index: 0; }
.shop-hero--full .shop-hero__visual img { display: block; width: 100%; height: 100%;
                                          object-fit: cover; object-position: right center; }
/* 글자가 놓이는 왼쪽만 살짝 밝게 눌러 준다 — 사진 위 글자가 흐려지지 않게.
   ⚠️ 전체를 덮지 않는다. 오른쪽 상품이 뿌옇게 되면 보여 줄 것이 죽는다. */
.shop-hero--full::after { content: ""; position: absolute; inset: 0; z-index: 1;
                          background: linear-gradient(90deg,
                              rgba(238, 247, 255, .96) 0%,
                              rgba(238, 247, 255, .90) 26%,
                              rgba(238, 247, 255, 0) 52%); }
.shop-hero--full .shop-hero__in { position: relative; z-index: 2;
                                  width: min(100% - (var(--shop-gutter) * 2), var(--shop-page));
                                  margin-inline: auto; padding: var(--shop-s7) 0;
                                  align-self: center; max-width: none; }
.shop-hero--full .shop-hero__eyebrow { margin: 0 0 var(--shop-s4); font-size: var(--shop-fs-md);
                                       font-weight: var(--shop-fw-med); color: var(--shop-ink-2); }
/* ⚠️ `<br>` 이 줄을 나눈다. max-width 를 좁게 두면 그 위에서 한 번 더 접혀 3줄이 된다
      (레퍼런스는 2줄이다 — 15ch 로 두면 44px 에서 382px 이라 두 번째 줄이 넘친다). */
.shop-hero--full h1 { max-width: 22ch; font-size: var(--shop-fs-hero); line-height: 1.24;
                      letter-spacing: -0.035em; color: var(--shop-ink); }
.shop-hero--full .shop-hero__lead { max-width: 34ch; margin: var(--shop-s4) 0 0;
                                    font-size: var(--shop-fs-lg); line-height: 1.6;
                                    color: var(--shop-ink-2); }
.shop-hero--full .shop-hero__cta { display: flex; flex-wrap: wrap; gap: var(--shop-s3);
                                   margin-top: var(--shop-s6); }
/* 레퍼런스의 두 번째 CTA 는 브론즈 외곽선 버튼이다 — 흰 면 위에서도 사진 위에서도 읽힌다 */
.shop-btn--outline { background: var(--shop-bg); color: var(--shop-accent-ink);
                     border-color: var(--shop-accent); }
.shop-btn--outline:hover { background: var(--shop-accent-soft); }

/* ══════ 5. 카테고리 숏컷 ══════
   레퍼런스 문법: 제목 → 짧은 설명 → 이미지. 흰 카드 · 얇은 선 · 아주 옅은 그림자. */
.shop-cats { margin-bottom: var(--shop-section-gap); }
.shop-promo { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
              gap: var(--shop-card-gap); }
.shop-promo__item { display: flex; flex-direction: column; overflow: hidden;
                    background: var(--shop-bg); border: 1px solid var(--shop-line);
                    border-radius: var(--shop-radius); box-shadow: var(--shop-shadow-sm);
                    transition: border-color var(--shop-t), box-shadow var(--shop-t); }
.shop-promo__item:hover { border-color: var(--shop-ink-4); box-shadow: var(--shop-shadow); }
.shop-promo__body { display: flex; flex-direction: column; gap: 4px; align-items: center;
                    padding: var(--shop-s4) var(--shop-s3) var(--shop-s3); text-align: center; }
.shop-promo__name { font-size: var(--shop-fs-lg); font-weight: var(--shop-fw-bold);
                    color: var(--shop-ink); }
.shop-promo__lead { font-size: var(--shop-fs-xs); color: var(--shop-ink-3); line-height: 1.45; }
/* ⚠️ 비율을 못박지 않으면 그림이 정사각으로 부푼다(V36F.1 T13 실측 회귀). */
.shop-promo__visual { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto;
                      margin-top: auto; background: var(--shop-bg-soft); overflow: hidden; }
.shop-promo__visual img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ══════ 6. AI 소재추천 ══════
   전체폭 아이보리 밴드. 흰 면만 반복되지 않게 여기서 표면을 한 번 바꾼다. */
.shop-assist2 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
                align-items: center; column-gap: var(--shop-s7); row-gap: var(--shop-s5);
                margin: 0 calc(50% - 50vw) var(--shop-section-gap);
                padding: var(--shop-s7) max(var(--shop-gutter), calc(50vw - var(--shop-page) / 2));
                background: var(--shop-bg-soft); border: 0; border-radius: 0; }
.shop-assist2__badge { display: inline-flex; margin: 0 0 var(--shop-s3);
                       padding: 4px var(--shop-s3); border-radius: 999px;
                       background: var(--shop-accent-soft); color: var(--shop-accent-ink);
                       font-size: var(--shop-fs-xs); font-weight: var(--shop-fw-bold); }
.shop-assist2 h2 { font-size: var(--shop-fs-2xl); line-height: 1.32; }
.shop-assist2__lead { margin: var(--shop-s3) 0 0; color: var(--shop-ink-2);
                      font-size: var(--shop-fs-md); max-width: 44em; }
/* 칩은 링크가 아니다 — 누를 수 있는 것처럼 보이지 않게 테두리만 준다 */
.shop-assist2__chips { display: flex; flex-wrap: wrap; gap: var(--shop-s2); align-content: center; }
.shop-assist2__chips li { padding: 7px var(--shop-s3); border: 1px solid var(--shop-line);
                          border-radius: 999px; background: var(--shop-bg);
                          font-size: var(--shop-fs-sm); color: var(--shop-ink-2); }
/* CTA 는 DOM 상 칩보다 앞이지만 화면에서는 아래에 온다 — grid 가 자리를 정한다 */
.shop-assist2__body { grid-row: 1; grid-column: 1; }
.shop-assist2__chips { grid-row: 1; grid-column: 2; }
.shop-assist2__cta { grid-row: 2; grid-column: 1; justify-self: start; }

/* ══════ 7. 상품 쇼케이스 ══════ */
.shop-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--shop-s6) var(--shop-s5); }
.shop-section__head { align-items: baseline; margin-bottom: var(--shop-s5); }
.shop-section__head h2 { font-size: var(--shop-fs-2xl); }

/* ══════ 9. 신뢰 strip ══════
   레퍼런스: 아이보리 둥근 상자 · 4열 · 사이 얇은 세로선 · 아이콘은 왼쪽. */
/* 제목이 두 줄인 카드에서 그림이 눌리지 않게 — flex 안에서 비율만으로는 지켜지지 않는다.
   ⚠️ `flex: 0 0 auto` 로 쓰면 좁은폭의 가로 카드(`flex: 0 0 38%`)까지 덮어써서 그림이 넘친다.
      줄어들지만 않으면 되므로 shrink 만 잠근다. */
.shop-svccard__visual { flex-shrink: 0; }

.shop-strip { margin: 0 0 var(--shop-section-gap); padding: 0; background: none; }
.shop-strip__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
                    gap: 0; max-width: none; margin: 0; padding: var(--shop-s6) var(--shop-s5);
                    background: var(--shop-bg-soft); border-radius: var(--shop-radius-lg); }
.shop-strip__list li { display: grid; grid-template-columns: auto minmax(0, 1fr);
                       column-gap: var(--shop-s4); row-gap: 4px; align-content: center;
                       padding: 0 var(--shop-s5); }
.shop-strip__list li + li { border-left: 1px solid var(--shop-line); }
/* [Shop UI Follow-up 2차] 아이콘 색의 **단일 출처**.
   여기서 `color` 를 못 박기 전에는, 채움 아이콘은 `currentColor`(상속값 = --shop-ink-2,
   실측 rgb(52,64,84))로 칠해지고 선 아이콘만 `var(--shop-ink)`(rgb(17,24,39))를 써서
   같은 띠 안에서 **두 가지 먹색**이 섞였다(사장님 지적). 아래 svg 규칙이 stroke 를
   `currentColor` 로 받으므로, 이 한 줄이 채움·선 양쪽의 색을 동시에 정한다. */
.shop-strip__i { grid-row: 1 / span 2; align-self: center; display: inline-flex;
                 align-items: center; justify-content: center; }
/* ⚠️ 선택자를 `.shop-strip__i`(0,1,0) 로 쓰면 **먹히지 않는다.** 파일 앞쪽(2163줄 부근)에
      strip 목록의 span 색을 --shop-ink-2 로 정하는 규칙이 있고 그것이 (0,2,0) 이라 이긴다.
      실제로 그렇게 써 보니 계산값이 그대로 rgb(52,64,84) 였다(실측). 같은 (0,2,0) 으로
      맞추고 뒤에 두어야 이긴다 — 이 파일에서 같은 함정을 밟은 것이 다섯 번째다.
      ⚠️ 주석 안에 중괄호를 적지 않는다. 선택자 블록을 훑는 단언이 주석 속 중괄호에서
         멈춘 사고가 이 파일에서 네 번 있었다. */
.shop-strip__list .shop-strip__i { color: var(--shop-ink); }
/* ⚠️ `stroke-width` 는 viewBox 비율이라 px 크기와 무관하게 같은 두께로 보인다.
      2 / 24 = 8.33% 이고, 사장님이 주신 Material Symbols 는 960 격자에서 선 80 =
      80 / 960 = 8.33% 다. 두 값을 일치시켜야 네 칸의 획 굵기가 같아진다. */
.shop-strip__i svg { width: 40px; height: 40px; fill: none; stroke: currentColor;
                     stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.shop-strip__list strong { font-size: var(--shop-fs-lg); color: var(--shop-ink); }
.shop-strip__list span:not(.shop-strip__i) { font-size: var(--shop-fs-sm); color: var(--shop-ink-2);
                                             line-height: 1.55; }

/* ══════ 10·11. 하단 3열 ══════ */
.shop-lower { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, 1fr);
              gap: var(--shop-s6); margin-bottom: var(--shop-section-gap); align-items: start; }
.shop-lower > section { min-width: 0; }

.shop-cs h2 { font-size: var(--shop-fs-lg); color: var(--shop-ink); }
.shop-cs__tel { margin: var(--shop-s3) 0 var(--shop-s2); font-size: 30px;
                font-weight: var(--shop-fw-black); letter-spacing: -0.03em; color: var(--shop-ink); }
.shop-cs__tel a { color: inherit; }
.shop-cs__note { font-size: var(--shop-fs-sm); color: var(--shop-ink-2); line-height: 1.7; }
.shop-cs__note a { color: var(--shop-accent-ink); text-decoration: underline;
                   text-underline-offset: 3px; }
.shop-cs__act { display: flex; flex-wrap: wrap; gap: var(--shop-s2); margin-top: var(--shop-s5); }

.shop-cnews__head { display: flex; align-items: baseline; gap: var(--shop-s3);
                    padding-bottom: var(--shop-s3); margin-bottom: var(--shop-s3);
                    border-bottom: 1px solid var(--shop-line); }
.shop-cnews__head h2 { font-size: var(--shop-fs-lg); color: var(--shop-ink); }
.shop-cnews__head .shop-section__more { margin-left: auto; min-height: 0; }
.shop-cnews__list { display: flex; flex-direction: column; }
.shop-cnews__list li + li { border-top: 1px solid var(--shop-line-2); }
.shop-cnews__list a { display: flex; flex-direction: column; gap: 3px;
                      padding: var(--shop-s3) 0; min-height: var(--shop-ctrl); }
.shop-cnews__list a:hover .shop-cnews__t { color: var(--shop-accent-ink); }

.shop-flow__steps { display: flex; flex-direction: column; gap: var(--shop-s3); }
.shop-flow__steps li { display: grid; grid-template-columns: auto minmax(0, 1fr);
                       column-gap: var(--shop-s3); row-gap: 2px; }
.shop-flow__n { grid-row: 1 / span 2; align-self: start; display: inline-flex;
                align-items: center; justify-content: center; width: 26px; height: 26px;
                border-radius: 999px; background: var(--shop-accent-soft);
                color: var(--shop-accent-ink); font-size: var(--shop-fs-sm);
                font-weight: var(--shop-fw-bold); }
.shop-flow__steps strong { font-size: var(--shop-fs-md); color: var(--shop-ink); }
.shop-flow__steps span:not(.shop-flow__n) { font-size: var(--shop-fs-sm); color: var(--shop-ink-2); }
.shop-flow__note { margin-top: var(--shop-s4); padding-top: var(--shop-s3);
                   border-top: 1px solid var(--shop-line-2);
                   font-size: var(--shop-fs-xs); color: var(--shop-ink-3); line-height: 1.7; }

/* ══════ 모바일 퀵 링크 줄 ══════ */
.shop-mquick { display: none; }

/* ══════ 12. 다크 푸터 ══════ */
.shop-footer { background: var(--shop-bg-dark); border-top: 0; color: rgba(234, 240, 247, .72); }
.shop-footer__cols { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr) minmax(0, .9fr);
                   gap: var(--shop-s6); padding-block: var(--shop-s6) var(--shop-s5); }
.shop-footer__brand .shop-logo { display: block; font-size: 22px; color: #eaf0f7; }
.shop-footer__tag { display: block; margin-top: 4px; font-size: 11px; letter-spacing: .16em;
                    color: rgba(234, 240, 247, .45); }
.shop-footer__brand p { margin-top: var(--shop-s3); font-size: var(--shop-fs-sm);
                        color: rgba(234, 240, 247, .6); line-height: 1.75; }
.shop-footer__biz dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                       gap: 6px var(--shop-s5); font-size: var(--shop-fs-xs); }
.shop-footer__biz dl > div { display: flex; gap: var(--shop-s3); min-width: 0; }
.shop-footer__biz dl > .is-wide { grid-column: 1 / -1; }
.shop-footer__biz dt { flex: 0 0 92px; color: rgba(234, 240, 247, .45); }
.shop-footer__biz dd { margin: 0; color: rgba(234, 240, 247, .78); overflow-wrap: anywhere; }
.shop-footer__biz a { color: inherit; }
.shop-footer__links { display: flex; flex-direction: column; gap: var(--shop-s2); }
.shop-footer__legal { display: flex; flex-wrap: wrap; gap: 0; margin: 0;
                      font-size: var(--shop-fs-xs); }
.shop-footer__legal a { display: inline-flex; align-items: center; min-height: 30px;
                        color: rgba(234, 240, 247, .78); }
.shop-footer__legal a + a::before { content: ""; display: inline-block; width: 1px; height: 10px;
                                    margin: 0 var(--shop-s3); background: rgba(234, 240, 247, .22); }
.shop-footer a:hover { color: #fff; text-decoration: underline; }
.shop-footer__bottom { border-top: 1px solid rgba(234, 240, 247, .12); }
.shop-footer__bottom-in { display: flex; flex-wrap: wrap; align-items: baseline;
                          gap: var(--shop-s3) var(--shop-s5); padding-block: var(--shop-s3) var(--shop-s4);
                          font-size: var(--shop-fs-xs); }
.shop-footer__note { margin: 0; margin-right: auto; max-width: 62ch;
                     color: rgba(234, 240, 247, .5); line-height: 1.7; }
.shop-footer__copy { margin: 0; color: rgba(234, 240, 247, .45); }

/* ══════════════════════════ 반응형 ══════════════════════════ */

@media (max-width: 1280px) {
    .shop-gnb { font-size: var(--shop-fs-md); }
    .shop-promo { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--shop-s3); }
    /* 8칸은 본문 폭 1240 에서만 들어간다. 좁아지면 4칸 두 줄로 접는다. */
    .shop-cats .shop-promo--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .shop-grid--6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .shop-hero--full h1 { font-size: var(--shop-fs-3xl); }
}

@media (max-width: 1024px) {
    .shop-brandbar .shop-search { max-width: 380px; }
    .shop-quick2 { gap: var(--shop-s4); }
    .shop-quick2 a span, .shop-quick2 .shop-burger span { display: none; }
    .shop-quick2 a, .shop-quick2 .shop-burger { min-width: var(--shop-ctrl); }
    .shop-gnb { font-size: var(--shop-fs-sm); }
    .shop-hero--full { min-height: 360px; }
    .shop-hero--full::after { background: linear-gradient(90deg,
                                  rgba(238, 247, 255, .97) 0%,
                                  rgba(238, 247, 255, .92) 34%,
                                  rgba(238, 247, 255, 0) 62%); }
    .shop-assist2 { grid-template-columns: minmax(0, 1fr); }
    .shop-assist2__body, .shop-assist2__chips, .shop-assist2__cta { grid-row: auto; grid-column: 1; }
    .shop-assist2__cta { order: 3; }
    .shop-assist2__chips { order: 2; }
    .shop-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--shop-s5); }
    .shop-strip__list li:nth-child(odd) { border-left: 0; }
    .shop-lower { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shop-lower > section:last-child { grid-column: 1 / -1; }
    .shop-footer__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .shop-footer__brand { grid-column: 1 / -1; }
    .shop-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 모바일 — 데스크톱을 줄인 것이 아니라 다시 짠다(§3).
   레퍼런스: [로고][장바구니][메뉴] 한 줄 + 전체폭 검색 · 카테고리는 가로 스크롤. */
@media (max-width: 860px) {
    .shop-header { position: sticky; top: 0; }
    .shop-utilbar { display: none; }          /* 같은 링크가 하단 퀵 줄에 있다 */
    .shop-gnbbar { display: none; }           /* 카테고리는 서랍과 홈 숏컷으로 간다 */

    .shop-brandbar__in { flex-wrap: wrap; gap: var(--shop-s3);
                         padding-block: var(--shop-s3) var(--shop-s3); min-height: 0; }
    .shop-brandbar .shop-logo { font-size: 21px; margin-right: auto; }
    .shop-brandbar .shop-search { order: 3; flex: 1 0 100%; max-width: none; margin: 0; }
    .shop-brandbar .shop-search input { height: 46px; }
    .shop-brandbar .shop-search button { width: 56px; height: 46px; }
    .shop-quick2 { order: 2; gap: var(--shop-s4); }
    /* 모바일 헤더에는 장바구니와 메뉴만 남긴다 — 나머지는 하단 퀵 줄·서랍에 있다 */
    .shop-quick2 a:not(.shop-quick2__cart) { display: none; }
    .shop-quick2 .shop-burger { display: inline-flex; }
    .shop-quick2 a span, .shop-quick2 .shop-burger span { display: block; font-size: 10px; }

    .shop-hero--full { min-height: 300px; margin-bottom: var(--shop-s7); }
    .shop-hero--full .shop-hero__in { padding: var(--shop-s6) 0; }
    /* ⚠️ R3 의 좁은폭 규칙이 `.shop-hero__visual` 에 `aspect-ratio: 16/9` 를 걸어 둔다.
          그 규칙은 이미지가 **문서 흐름 안 두 번째 칸**이던 시절 것이다. 지금은 절대배치
          배경이라 비율이 폭을 정해 버려 390 에서 이미지가 838px 로 부풀었다(실측). */
    .shop-hero--full .shop-hero__visual { aspect-ratio: auto; order: 0; }
    /* 좁은 화면에서는 물건 쪽을 더 붙잡는다 — 가운데를 잡으면 오른쪽 상품이 밀려 나간다 */
    .shop-hero--full .shop-hero__visual img { object-position: 74% center; }
    /* 글자는 사진의 **빈 왼쪽**에 머무른다. 폭을 풀어 주면 문장이 차 위로 올라가 둘 다 죽는다. */
    .shop-hero--full .shop-hero__eyebrow { max-width: 74%; }
    .shop-hero--full h1 { font-size: var(--shop-fs-2xl); max-width: 68%; }
    .shop-hero--full .shop-hero__lead { font-size: var(--shop-fs-sm); max-width: 62%; }
    /* ⚠️ 좁은폭 공용 규칙(:1211)이 `.shop-hero__cta` 를 세로로 세운다. 레퍼런스는 두 버튼이
          나란히 있다 — 방향까지 되돌려야 한다(flex-wrap 만 바꾸면 세로가 그대로 남는다). */
    .shop-hero--full .shop-hero__cta { flex-direction: row; flex-wrap: nowrap; }
    .shop-hero--full .shop-hero__cta .shop-btn { flex: 1 1 0; min-width: 0; justify-content: center;
                                                 min-height: var(--shop-ctrl);
                                                 padding: 0 var(--shop-s3); font-size: var(--shop-fs-md); }
    .shop-hero--full::after { background: linear-gradient(90deg,
                                  rgba(238, 247, 255, .96) 0%,
                                  rgba(238, 247, 255, .86) 44%,
                                  rgba(238, 247, 255, .18) 78%); }

    /* 카테고리 — 가로 스크롤. 모바일 레퍼런스는 이미지가 **위**에 온다. */
    .shop-cats { margin-inline: calc(50% - 50vw); }
    .shop-cats .shop-promo--wide { grid-template-columns: none; }
    .shop-promo { display: flex; gap: var(--shop-s3); overflow-x: auto;
                  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
                  padding-inline: var(--shop-gutter); padding-bottom: var(--shop-s2); }
    .shop-promo__item { flex: 0 0 96px; flex-direction: column-reverse;
                        scroll-snap-align: start; border: 0; box-shadow: none;
                        background: none; overflow: visible; }
    .shop-promo__visual { margin-top: 0; margin-bottom: var(--shop-s2); aspect-ratio: 1 / 1;
                          border: 1px solid var(--shop-line); border-radius: var(--shop-radius-lg);
                          box-shadow: var(--shop-shadow-sm); background: var(--shop-bg); }
    .shop-promo__body { padding: 0; gap: 2px; }
    .shop-promo__name { font-size: var(--shop-fs-md); }
    .shop-promo__lead { font-size: 11px; }

    .shop-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--shop-s5) var(--shop-s4); }
    .shop-assist2 { padding-block: var(--shop-s6); }
    .shop-assist2 h2 { font-size: var(--shop-fs-xl); }
    .shop-assist2__cta { justify-self: stretch; }

    .shop-strip__list { grid-template-columns: minmax(0, 1fr); padding: var(--shop-s5) var(--shop-s4); }
    .shop-strip__list li { padding: 0; border-left: 0 !important; }
    .shop-strip__list li + li { border-top: 1px solid var(--shop-line); padding-top: var(--shop-s4); }
    .shop-strip__i svg { width: 32px; height: 32px; }

    .shop-lower { grid-template-columns: minmax(0, 1fr); gap: var(--shop-s5); }
    .shop-lower > section:last-child { grid-column: auto; }
    .shop-cs, .shop-cnews, .shop-flow { padding: var(--shop-s5); background: var(--shop-bg);
                                        border: 1px solid var(--shop-line);
                                        border-radius: var(--shop-radius-lg); }
    .shop-cs__tel { font-size: 26px; }
    .shop-cs__act .shop-btn { flex: 1 1 auto; justify-content: center; }

    /* 하단 퀵 줄 — 데스크톱 utility 줄을 대신한다 */
    .shop-mquick { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
                   margin-block: var(--shop-s6) 0; padding: var(--shop-s4) var(--shop-s2);
                   background: var(--shop-bg-soft); border-radius: var(--shop-radius-lg); }
    .shop-mquick a { display: flex; flex-direction: column; align-items: center; gap: 6px;
                     min-height: var(--shop-ctrl); padding: 0 2px;
                     font-size: 11px; font-weight: var(--shop-fw-med); color: var(--shop-ink-2);
                     text-align: center; }
    .shop-mquick a + a { border-left: 1px solid var(--shop-line); }
    .shop-mquick__i svg { width: 22px; height: 22px; fill: none; stroke: currentColor;
                          stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

    .shop-footer__cols { grid-template-columns: minmax(0, 1fr); gap: var(--shop-s5);
                       padding-block: var(--shop-s6) var(--shop-s5); }
    .shop-footer__biz dl { grid-template-columns: minmax(0, 1fr); }
    .shop-footer__biz dt { flex-basis: 84px; }
}

@media (max-width: 420px) {
    .shop-hero--full h1 { font-size: var(--shop-fs-xl); }
    .shop-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--shop-s4) var(--shop-s3); }
    .shop-mquick a { font-size: 10px; }
}

/* ══════════ [V36G.1 Gate4] AI 소재추천 화면 ══════════
   추천 앱은 결과 3열·주문 2열을 전제로 설계돼 있다(회사 컨테이너 1440px).
   쇼핑몰 기본 본문폭에서는 열이 눌리므로 **이 화면에서만** 폭을 넓힌다.
   ⚠️ 여기서 추천 UX 를 바꾸지 않는다. 폭·겹침만 본다(§7). */
/* 회사 추천 화면의 `.container--v5`(base.css `.container` + max-width 1440px)와
   **같은 폭**이 되게 맞춘다. 좌우 여백은 회사 --pad-x 를 그대로 쓴다 —
   두 화면을 나란히 놓았을 때 다르게 보이면 그건 UX 변경이다. */
/* ══ [V36G.1 Mobile Rhythm §5] 축을 쇼핑몰 공통 기준선으로 되돌린다 ══
   위 Gate4 주석은 "회사 `.container--v5` 와 같은 폭" 을 목표로 했는데, 그 결과 **이 화면만**
   다른 축을 쓰게 됐다 — 1440 에서 L72/W1296(다른 화면 L100/W1240), 390 에서 L22(다른 화면 L16).
   고객은 회사 화면과 나란히 보지 않고 **쇼핑몰 화면들 사이를 오간다.** 그 이동에서 좌우가
   28px·6px 씩 어긋나 보이는 쪽이 더 큰 결함이라 사장님이 통일을 지시하셨다(§5).
   ⚠️ 값을 새로 짓지 않았다. 이 파일 §"본문 기준선" 절의 공식을 **그대로** 쓴다.
   ⚠️ 추천 앱 내부(질문 카드·결과 열·주문 2열) 조판은 건드리지 않는다. 바깥 축만 바꾼다.
   ⚠️ 선택자를 그대로 둔다 — 아래 embed 규칙이 "이것보다 명시도가 높아야 한다" 는 전제로
      두 클래스를 겹쳐 쓰고 있어서, 이 줄을 지우면 그 주석의 근거가 사라진다. */
body.shop--reco .shop-main { width: min(100% - (var(--shop-gutter) * 2), var(--shop-page));
                             max-width: none; }
/* [Owner Audit Batch 1B] AI 추천 화면만 본문 폭이 1440 이라, 셸이 그린 **같은** 위치표시가
   이 화면에서만 GNB 보다 왼쪽으로 20px 나갔다(2026-08-24 반증 검증에서 실측).
   ⚠️ 본문 폭은 그대로 둔다 — 추천 결과가 넓은 화면을 쓰는 것은 의도다.
      기준선을 맞춰야 하는 것은 **위치표시 한 줄**뿐이다. */
body.shop--reco .shop-breadcrumb { width: min(100% - (var(--shop-gutter) * 2), var(--shop-page));
                                   margin-inline: auto; }

/* 하단 고정 CTA 바(.v5-mbar)와 쇼핑몰 모바일 퀵링크 줄이 화면 아래에서 겹친다.
   추천 화면에서는 앱의 바를 남기고 쇼핑몰 줄을 감춘다 — 같은 자리에 두 줄을 쌓지 않는다. */
body.shop--reco .shop-mquick { display: none; }

/* ══════════ [V36G.1 Chat-First A안] AI 소재추천 패널 ══════════
   버튼을 누르면 페이지를 떠나지 않고 이 패널이 열리고, 안에서 독립 문서가 뜬다.
   ⚠️ 추천 앱 안쪽(`.rec--v5` · `.v5-*`)을 여기서 손대지 않는다. 그건 iframe 안의
      **다른 문서**라 이 파일의 규칙이 닿지도 않는다 — 그게 격리의 뜻이다.
   ⚠️ 유리질감(backdrop-filter)을 쓰지 않는다. 흰 바탕 + 하늘색 강조가 이 사이트의 결이다. */
.shop-recop { position: fixed; inset: 0; z-index: var(--shop-z-modal);
              display: flex; justify-content: flex-end; }
/* `hidden` 은 위 `display: flex` 에 눌린다 — 명시도를 한 칸 올려 되살린다 */
.shop-recop[hidden] { display: none; }
.shop-recop__scrim { position: absolute; inset: 0; background: rgba(16, 24, 40, .45); }
.shop-recop__box { position: relative; display: flex; flex-direction: column;
                   width: min(720px, 94vw); height: 100%; min-height: 0;
                   background: var(--shop-bg); border-left: 1px solid var(--shop-line);
                   box-shadow: -18px 0 44px rgba(16, 24, 40, .16); }
.shop-recop__head { flex: 0 0 auto; display: flex; align-items: center;
                    gap: var(--shop-s3); padding: var(--shop-s3) var(--shop-s4);
                    border-bottom: 1px solid var(--shop-line); background: var(--shop-bg); }
.shop-recop__t { flex: 1 1 auto; min-width: 0; margin: 0;
                 font-size: var(--shop-fs-lg); font-weight: var(--shop-fw-bold);
                 color: var(--shop-ink); letter-spacing: -0.01em; }
.shop-recop__t span { color: var(--shop-accent); }
.shop-recop__full { flex: 0 0 auto; font-size: var(--shop-fs-sm); color: var(--shop-ink-3);
                    text-decoration: underline; text-underline-offset: 3px; }
.shop-recop__full:hover { color: var(--shop-accent-ink); }
.shop-recop__x { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
                 width: var(--shop-ctrl); height: var(--shop-ctrl); padding: 0;
                 font-size: 26px; line-height: 1; color: var(--shop-ink-2);
                 background: none; border: 1px solid transparent; border-radius: var(--shop-radius);
                 cursor: pointer; }
.shop-recop__x:hover { color: var(--shop-ink); border-color: var(--shop-line); }
/* ⚠️ `overscroll-behavior: contain` — 패널 끝까지 스크롤했을 때 뒤 페이지가 따라 움직이는
      것(scroll chaining)을 막는다. body 잠금만으로는 터치 화면에서 새어 나간다. */
.shop-recop__body { flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }
.shop-recop__frame { display: block; width: 100%; height: 100%; border: 0; }

/* 모바일 — 화면 대부분을 쓰는 시트. 추천 앱의 하단 고정 CTA 바가 iframe 바닥에 붙으므로
   높이를 잘라 두면 그 바가 잘린다. 전체 높이를 준다. */
@media (max-width: 900px) {
    .shop-recop__box { width: 100%; border-left: 0; box-shadow: none; }
    .shop-recop__head { padding: var(--shop-s3); }
}

@media (prefers-reduced-motion: no-preference) {
    .shop-recop__box { animation: shopRecopIn 220ms cubic-bezier(.2, .7, .3, 1) both; }
    .shop-recop__scrim { animation: shopRecopFade 220ms ease both; }
}
@keyframes shopRecopIn { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes shopRecopFade { from { opacity: 0; } to { opacity: 1; } }

/* ══════════ 패널 안의 독립 문서 ══════════
   폭은 iframe 이 정한다. 위 `body.shop--reco` 의 1440 제약을 여기서만 푼다 —
   좁은 패널에서 1440 로 묶어 두면 좌우 여백만 남고 본문이 눌린다.
   ⚠️ 명시도가 `body.shop--reco .shop-main`(0,2,1) 보다 높아야 한다 — 그래서 두 클래스를 겹쳐 쓴다. */
body.shop--reco.shop--reco-embed .shop-main { width: 100%; max-width: none;
                                              padding: var(--shop-s4) var(--shop-s4) var(--shop-s6); }

/* ══════════════════════════════════════════════════════════════════
   [V36G.1 Gate6R.2] Home — DIRECT REFERENCE 재정렬
   ──────────────────────────────────────────────────────────────────
   근거 실측: `docs/HOME_REFERENCE_STRUCTURE_MAP.md`
   레퍼런스 `01_desktop_home.png` 원본 1122 → 1440 환산 ×1.283

     본문 폭 1,242 · 히어로 413 · 게이트웨이 181(8칸·폭 142·간격 17)
     상품 카드 222(6장·폭 195·간격 17) · 정보띠 80 · 하단 3블록 195 · 페이지 1,799

   ⚠️ 이 블록은 파일 **맨 뒤**다. Gate1 블록(2360~2866)보다 뒤라 같은 명시도면 여기가 이긴다.
      그래도 순서에 기대지 않는다 — 캐스케이드 함정을 세 번 겪었다(Gate4·6·6R).
      덮어야 하는 규칙은 명시도를 한 단계 올려 못박는다.
   ══════════════════════════════════════════════════════════════════ */

/* ── 세로 리듬 ──
   레퍼런스의 섹션 간격은 균일하지 않고 **아래로 갈수록 벌어진다**(환산 32·42·68·80·81).
   전 화면 토큰을 바꾸지 않고 Home 섹션에만 준다. */
.shop-hero.shop-hero--full { margin-bottom: var(--shop-s6); }        /* → 게이트웨이 32 */
.shop-main > .shop-cats    { margin-bottom: 40px; }                  /* → 상품 42 */
.shop-main > .shop-section { margin-bottom: var(--shop-s8); }        /* → 정보띠 68~72 */
.shop-main > .shop-strip   { margin-bottom: 80px; }                  /* → 하단 80 */
.shop-main > .shop-lower   { margin-bottom: 80px; }                  /* → 푸터 81 */

/* ── 게이트웨이 줄 ──
   `/category/print` 분류 화면과 **같은 컴포넌트**다. 8칸인 화면만 `--wide` 를 덧붙인다.
   폭이 좁아져도 열을 지킨다 — 레퍼런스가 무너지지 않는 지점에서 우리가 무너지면 페이지가 길어진다. */
.shop-cats .shop-promo--wide { grid-template-columns: repeat(8, minmax(0, 1fr));
                               gap: var(--shop-s4); }
.shop-cats .shop-promo--wide .shop-promo__body { padding: var(--shop-s3) var(--shop-s3) var(--shop-s2);
                                                 gap: 2px; }
.shop-cats .shop-promo--wide .shop-promo__name { font-size: var(--shop-fs-md); }
.shop-cats .shop-promo--wide .shop-promo__lead { font-size: 11px; line-height: 1.4; }

/* Home 은 칸이 적어 칸 폭이 넓다(6칸 = 193px). 4/3 그림을 그대로 두면 줄 높이가 레퍼런스
   환산 181 을 훨씬 넘는다. **칸이 넓어진 만큼 그림을 낮게** 잡아 줄 높이를 지킨다.
   ⚠️ `--wide`(8칸) 화면에는 걸지 않는다 — 거기 칸은 이미 좁다.
   ⚠️ [Home Fidelity §5] **프리미엄·BEST 줄도 뺀다.** 사장님 지시로 그 두 줄의 그림은
      정사각(1:1)이 됐다. 이 선택자는 `:not()` 때문에 명시도가 (0,4,0)이라
      뒤에 오는 `.shop-promo--prem .shop-promo__visual`(0,2,0)을 **조용히 이겼다**
      (390 실측: 1:1 을 줬는데 계속 16:9 로 나왔다).
      명시도를 더 올려 겨루는 대신, **매칭 자체에서 빼는 것**이 의도에 맞다. */
.shop-cats .shop-promo:not(.shop-promo--wide):not(.shop-promo--prem):not(.shop-promo--best)
    .shop-promo__visual { aspect-ratio: 16 / 9; }
.shop-cats .shop-promo:not(.shop-promo--wide) .shop-promo__body {
    padding: var(--shop-s4) var(--shop-s4) var(--shop-s3); gap: 3px; }

/* 상담 칸 표식 — 장바구니에 담을 수 없는 칸이라는 것을 눈으로 구분한다.
   ⚠️ 금액을 붙이지 않는다. 주문형 칸과 색·크기로만 다르다. */
.shop-promo__tag { margin-left: 6px; padding: 2px 6px; border-radius: 999px;
                   background: var(--shop-accent-soft); color: var(--shop-accent-ink);
                   font-size: 10px; font-style: normal; font-weight: var(--shop-fw-bold);
                   vertical-align: 2px; }

/* ── 상품 카드 줄 ── */
.shop-main .shop-grid--6 { gap: var(--shop-s5) var(--shop-s4); }     /* 열 간격 17 → 16 */
.shop-main .shop-section__head { margin-bottom: var(--shop-s4); }
.shop-main .shop-section__head h2 { font-size: var(--shop-fs-xl); }

/* ── 정보 strip ──
   레퍼런스는 4칸을 62(환산 80)에 넣는다. 우리 문구는 두 줄이라 그 높이에 넣으려면
   글자를 11px 아래로 내려야 해서 채택하지 않는다 — 열 구성과 밀도만 맞춘다. */
.shop-main .shop-strip__list { padding: var(--shop-s4) var(--shop-s4); }
.shop-main .shop-strip__list li { padding: 0 var(--shop-s4); }
.shop-main .shop-strip__list strong { font-size: var(--shop-fs-md); }
.shop-main .shop-strip__list span:not(.shop-strip__i) { line-height: 1.45; }
.shop-main .shop-strip__i svg { width: 38px; height: 38px; }

/* ── 하단 3블록 ── */
.shop-main .shop-cs__tel { margin: var(--shop-s2) 0 var(--shop-s1); font-size: 26px; }
.shop-main .shop-cs__note { line-height: 1.6; }
.shop-main .shop-cs__act { margin-top: var(--shop-s4); }
.shop-main .shop-cnews__list a { padding: var(--shop-s2) 0; min-height: 0; }
.shop-main .shop-cnews__list a { gap: 2px; }
.shop-main .shop-flow__steps { gap: var(--shop-s2); }

/* ── 1280 · 1024 — 레퍼런스는 열을 지킨다 ──
   ⚠️ Gate1·Gate6R 의 좁은폭 규칙(`repeat(4)` · `repeat(3)`)을 명시도로 되돌린다.
      순서로 이겨도 되지만, 나중에 규칙이 더 붙어도 흔들리지 않게 못박아 둔다. */
@media (max-width: 1280px) {
    .shop-cats .shop-promo--wide { grid-template-columns: repeat(8, minmax(0, 1fr));
                                   gap: var(--shop-s3); }
    .shop-cats .shop-promo:not(.shop-promo--wide) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .shop-main .shop-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
    .shop-cats .shop-promo--wide { gap: 10px; }
    .shop-cats .shop-promo--wide .shop-promo__lead { font-size: 10px; }
    .shop-main .shop-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr));
                               gap: var(--shop-s5) var(--shop-s3); }
    /* 정보띠는 2×2 로 접는다. 레퍼런스 모바일은 한 칸을 빼고 3칸으로 가지만
       **내용을 지우지 않는다** — 4칸을 두 줄로 둔다. */
    .shop-main .shop-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr));
                                   row-gap: var(--shop-s4); }
    .shop-main .shop-lower { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 모바일 — 레퍼런스 `02_mobile_home.png` 는 아무것도 1열로 쌓지 않는다 ──
   상품 줄은 **단일 가로 스크롤 행**이고 다음 카드가 살짝 보인다(사장님 결정).
   ⚠️ 2열 grid 로 재해석하지 않는다. */
@media (max-width: 860px) {
    .shop-main .shop-grid.shop-grid--6 {
        display: flex; grid-template-columns: none;
        gap: var(--shop-s3);
        overflow-x: auto; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        /* 화면 끝까지 흘려 "더 있다" 를 만들고, 안쪽 여백으로 기준선을 지킨다 */
        margin-inline: calc(50% - 50vw);
        padding-inline: var(--shop-gutter);
        padding-bottom: var(--shop-s3);
        scroll-padding-left: var(--shop-gutter);
    }
    /* 카드 폭 고정 = 다음 카드가 반드시 걸쳐 보인다(390 에서 358 폭에 2.1장) */
    .shop-main .shop-grid--6 > .shop-card { flex: 0 0 168px; scroll-snap-align: start; }
    /* 마지막 카드 뒤 여백 — 없으면 끝에서 카드가 화면 끝에 붙어 잘린 것처럼 보인다 */
    .shop-main .shop-grid--6::after { content: ""; flex: 0 0 calc(var(--shop-gutter) - var(--shop-s3)); }

    /* ── [Home Fidelity §3·§85] 섹션 사이 여백을 **하나로** 맞춘다 ──────────────
       실측(390): 대표서비스 32 · 프리미엄 40 · BEST 40 · 정보띠 80 · 하단 80 으로 제각각이었다.
       레퍼런스는 섹션 리듬이 일정하다. 좁은 화면에서 80px 는 화면 4분의 1을 빈 채로 쓴다.
       ⚠️ 새 토큰을 만들지 않는다 — 이미 있는 `--shop-section-gap` 하나로 모은다. */
    .shop-main > section,
    .shop-main .shop-hero,
    .shop-main .shop-cats,
    .shop-main .shop-strip,
    .shop-main .shop-lower { margin-bottom: var(--shop-section-gap); }

    /* ── [Home Fidelity §2·§3] 정보띠는 **한 줄에 하나**다 ────────────────────────
       2×2 로 두면 한 칸이 155px 가 되고, 아이콘(26px)과 여백을 빼면 글자 폭이 약 90px 만
       남는다. 그래서 `자체` / `제작`, `현수막·` / `배너·` / `실사출` / `력을` 처럼
       **두세 글자씩 세로로 찢어졌다**(390 실측 · 칸 높이 254px).
       레퍼런스(`ref/홈페이지UI 레퍼런스` 4번째)는 아이콘 **왼쪽** · 글자 **오른쪽**이고
       글자가 넉넉한 폭을 갖는다. 그 구조를 지키려면 좁은 화면에서는 1열이어야 한다.
       ⚠️ 칸 수(4개)를 줄이지 않는다. 배치만 세로로 편다. */
    .shop-main .shop-strip__list { grid-template-columns: minmax(0, 1fr);
                                   padding: var(--shop-s4) var(--shop-s4); row-gap: var(--shop-s4); }
    /* ⚠️ Gate1 의 `.shop-strip__list li + li`(0,1,2)를 덮어야 한다.
          !important 를 쓰지 않고 **명시도로만** 이긴다 — 이 파일은 8개까지만 허용한다(§56). */
    .shop-main .shop-strip__list li,
    .shop-main .shop-strip__list li + li { padding: 0 var(--shop-s3); border-left: 0;
                                           border-top: 0; }
    .shop-main .shop-strip__i svg { width: 30px; height: 30px; }
    /* ── [Home Fidelity §2·§3] 하단은 **한 줄에 하나**다 ─────────────────────────
       2열로 두면 한 칸이 175px 가 되어 실제로 이렇게 깨졌다(390 실측):
         · 전화번호가 `02) 6203-` / `8787` 로 **찢어짐**
         · 제목 `회사 콘텐츠` 가 두 줄
         · 탭 `공지사항 이벤트 시공…` 이 **잘림**
         · 공지 제목이 `여름 휴…` 로 **잘림**
       레퍼런스 목업은 2단이지만 그건 화면을 넓게 그린 그림이고, 실제 390px 에서는
       전화번호 한 줄조차 들어가지 않는다. **정보 계층을 지키려면 세로로 편다.**
       ⚠️ 블록을 지우거나 합치지 않는다. 순서도 그대로다. */
    .shop-main .shop-lower { grid-template-columns: minmax(0, 1fr); gap: var(--shop-s5); }
    .shop-main .shop-cs, .shop-main .shop-cnews, .shop-main .shop-flow { padding: var(--shop-s4); }
    .shop-main .shop-cs__tel { font-size: 22px; }
    .shop-main .shop-cs__act .shop-btn { flex: 1 1 100%; }
}

@media (max-width: 420px) {
    .shop-main .shop-grid--6 > .shop-card { flex: 0 0 152px; }
}

/* ══════════════════════════════════════════════════════════════════
   [V36G.1 Gate6R.2] Product — compact configurator (지시서 §7~§13)
   ──────────────────────────────────────────────────────────────────
   목표는 **기능 삭제가 아니라 압축**이다. 컨트롤은 하나도 지우지 않았다.
     · 조건부 노출 : 고르지 않은 하위 입력을 처음부터 펼치지 않는다(§9-A)
     · 묶기       : 규격과 수량을 한 행에, 후가공 그룹을 두 열에(§9-B)
     · 소재       : 세로 9장이 아니라 3열 compact grid(§9-C)
     · 디자인     : 큰 카드 3장 → 고르는 줄 + 고른 것 설명만(§9-D)
     · 읽을거리   : 구매 흐름 밖으로 빼서 접는다(§9-E)
     · 모바일     : 묶음 아코디언 + 하단 고정 CTA(§13)
   ⚠️ 44px 터치 타깃을 줄여서 길이를 벌지 않는다(§12 는 그러면 FAIL 이라고 못박았다).
   ══════════════════════════════════════════════════════════════════ */

/* ── 묶음(아코디언) ── */
.shop-acc { border: 0; margin: 0; }
.shop-acc + .shop-acc { margin-top: var(--shop-s5); padding-top: var(--shop-s5);
                        border-top: 1px solid var(--shop-line-2); }
.shop-acc__s { display: none; }                     /* 데스크톱은 접지 않는다 */
.shop-acc__b { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
               column-gap: var(--shop-s5); }
.shop-acc__b > .shop-field { grid-column: 1 / -1; }
/* 규격과 수량은 한 행 — 레퍼런스 06 의 가로 밀도(§9-B) */
.shop-acc__b > .shop-field[data-field="size"] { grid-column: 1; }
.shop-acc__b > .shop-field[data-field="qty"]  { grid-column: 2; }
/* ⚠️ 후가공 그룹은 **두 열로 묶지 않는다.** 실측해 보고 되돌렸다 —
   `재단·마감` 은 선택지가 9개라 열이 좁아지면 옵션이 두 열로 접혀 오히려 길어진다
   (전폭 156 → 두 열 288). 지시서 §9-B 의 "pair 배치 가능" 은 짧은 그룹에서만 이득이다. */
.shop-acc__b--pair > .shop-field[data-field="finish"] { grid-column: 1 / -1; }
.shop-acc .shop-field:first-child { padding-top: 0; }

/* ── 소재 (Gate6R.2 의 3열 grid 는 철거) ──
   ⚠️ Gate6R.2 에는 "소재는 드롭다운으로 숨기지 않는다" 는 제약이 있었고 그 규칙이 여기 있었다.
      사장님이 그 제약을 **철회**하셔서(Gate6R.3 §0) 소재는 드롭다운 한 줄이 됐다.
      겨냥할 마크업이 없어진 규칙을 남겨 두지 않는다.
   ⚠️ `.shop-choices`(라디오 묶음) 자체는 **지우지 않았다** — 고정규격 상품이 아직 쓴다.

   ── 옵션 줄 밀도 (Gate6R.3) ──
   레퍼런스 06 은 한 줄짜리 컨트롤이 촘촘히 쌓인다. 필드 사이 여백만 줄여 그 리듬에 맞춘다.
   ⚠️ 컨트롤 자체 높이(44px)는 건드리지 않는다 — 터치 타깃을 줄여 길이를 벌면 FAIL 이다. */
.shop-panel .shop-field { margin-bottom: var(--shop-s3); padding-top: var(--shop-s3); }
.shop-panel .shop-field > legend { margin-bottom: 4px; }

/* ── 조건부 하위 입력 (§9-A) ──
   ⚠️ `[hidden]` 은 브라우저 기본 `display:none` 인데 `.shop-qtyrow`(0,1,0)가 그걸 이긴다.
      !important 대신 **명시도**로 잠근다(0,3,0). */
.shop-panel .shop-field .shop-cond[hidden] { display: none; }
.shop-cond { margin-top: var(--shop-s3); }
.shop-toggle--addon { min-height: var(--shop-ctrl); }

/* ── 디자인 (Gate6R.3 에서 드롭다운) ──
   ⚠️ Gate6R.2 의 `--seg` 3칸 규칙은 겨냥할 마크업이 없어져 지웠다.
      비용은 선택지 라벨에 그대로 들어간다(`디자인 의뢰 — +30,000원`). */
.shop-design__say { display: flex; flex-wrap: wrap; gap: 4px var(--shop-s3);
                    margin-top: var(--shop-s2); font-size: var(--shop-fs-sm);
                    color: var(--shop-ink-2); }
.shop-design__need { color: var(--shop-ink-3); }
.shop-design__need:not(:empty)::before { content: "필요한 것 · "; color: var(--shop-ink-4); }

/* ── 읽을거리 접기 (§9-E) ── */
.shop-detail__more { margin-top: var(--shop-s7); border-top: 1px solid var(--shop-line); }
.shop-disc { max-width: none; border-bottom: 1px solid var(--shop-line); }
.shop-disc > summary { display: flex; align-items: center; gap: var(--shop-s2);
                       min-height: var(--shop-ctrl); padding: var(--shop-s3) 0;
                       cursor: pointer; list-style: none; }
.shop-disc > summary::-webkit-details-marker { display: none; }
.shop-disc > summary::after { content: "+"; margin-left: auto; font-size: 20px;
                              color: var(--shop-ink-3); line-height: 1; }
.shop-disc[open] > summary::after { content: "−"; }
.shop-disc > summary h2 { margin: 0; font-size: var(--shop-fs-lg); }
.shop-disc__b { padding-bottom: var(--shop-s5); max-width: 620px; }
.shop-disc__b > p { font-size: var(--shop-fs-md); color: var(--shop-ink-2); }

/* ── 좁아지면 한 열로(§9-B 단서) ──
   1024 에서는 좌열이 아직 660px 이라 두 열이 안 깨진다. 실제로 깨지는 지점에서만 푼다. */
@media (max-width: 860px) {
    .shop-acc__b { grid-template-columns: minmax(0, 1fr); }
    .shop-acc__b > .shop-field[data-field="size"],
    .shop-acc__b > .shop-field[data-field="qty"] { grid-column: 1 / -1; }
}

/* ── 모바일: 묶음 아코디언 (§13) ──
   접혀 있어도 **무엇을 골랐는지** 제목 줄에서 보인다. */
@media (max-width: 860px) {
    .shop-acc__s { display: flex; align-items: center; gap: var(--shop-s3);
                   min-height: var(--shop-ctrl); padding: var(--shop-s3) 0;
                   cursor: pointer; list-style: none; }
    .shop-acc__s::-webkit-details-marker { display: none; }
    .shop-acc__t { font-size: var(--shop-fs-md); font-weight: var(--shop-fw-bold);
                   color: var(--shop-ink); flex: 0 0 auto; }
    .shop-acc__sum { flex: 1 1 auto; min-width: 0; font-size: var(--shop-fs-xs);
                     color: var(--shop-ink-3); text-align: right;
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .shop-acc__s::after { content: "▾"; flex: 0 0 auto; font-size: 11px;
                          color: var(--shop-ink-3); transition: transform var(--shop-t); }
    .shop-acc[open] > .shop-acc__s::after { transform: rotate(180deg); }
    .shop-acc + .shop-acc { margin-top: 0; padding-top: 0; }
    .shop-acc__b { padding-bottom: var(--shop-s4); }
    /* ⚠️ Gate6R.2 의 소재 카드·디자인 고르는 줄 모바일 보정은 겨냥할 마크업이 사라져 지웠다.
          둘 다 Gate6R.3 에서 드롭다운이 됐다. */
}

/* ── [V36G.1 Gate6R.2] 좁은 화면 터치 타깃 보강 ──
   Home 을 5뷰포트로 재검하다가 찾았다(Gate1 부터 있던 것) —
   `전체보기 →` 42px · `주문 가이드 →` 21px · 고객센터 전화번호 26px 로 44px 아래였다.
   ⚠️ 글자 크기를 키우지 않는다. **누를 수 있는 넓이만** 44px 로 넓힌다.
   ⚠️ Gate1 의 `.shop-cnews__head .shop-section__more { min-height: 0 }`(0,2,0)를 덮어야 하므로
      같은 자리에 같은 명시도로 적는다 — 순서에 기대지 않는다는 이 배치의 규칙 그대로다. */
@media (max-width: 720px), (pointer: coarse) {
    .shop-main .shop-section__more,
    .shop-cnews__head .shop-section__more,
    .shop-main .shop-cs__tel a { display: inline-flex; align-items: center;
                                 min-height: var(--shop-ctrl); }
}

/* ── [V36G.1 Gate6R.3] 추가옵션 한 줄 (지시서 §5) ──
   레퍼런스 06 은 추가옵션을 체크박스 한 줄에 놓는다. 우리도 그 줄에 맞춘다.
   ⚠️ 체크한 항목만 수량칸이 열리는 규칙(Gate6R.2 §9-A)은 그대로다. */
.shop-field--addons-row { display: flex; flex-wrap: wrap; gap: var(--shop-s2) var(--shop-s6);
                          align-items: flex-start; }
.shop-field--addons-row > legend { flex: 1 0 100%; }
.shop-field--addons-row .shop-addon { display: flex; flex-direction: column; gap: 2px; }
.shop-field--addons-row .shop-toggle--addon { min-height: var(--shop-ctrl); }

/* ── [V36G.1 Gate6R.3] 옵션 줄 = 라벨 왼쪽 · 컨트롤 오른쪽 ──
   레퍼런스 06 은 `사이즈 / 수량 / 재질 / 출력 / 마감 / 코팅 / 추가옵션 / 디자인 파일` 을
   전부 **라벨 왼쪽 여백 + 컨트롤 오른쪽** 한 줄로 놓는다. 우리는 라벨을 컨트롤 위에 쌓고 있었고
   그 한 줄이 필드마다 36px 이었다(실측 · 7필드 = 252px).
   ⚠️ 컨트롤 높이(44px)는 그대로다. 줄이는 것은 **라벨이 차지하던 별도의 줄**이다.
   ⚠️ **grid 로는 안 된다.** `display: grid` 를 걸고 legend 에 `grid-column: 1` 을 줘 봤는데
      브라우저가 legend 를 grid 아이템으로 넣지 않아 높이가 84 → 88 로 **늘었다**(실측).
      그래서 legend 를 **absolute 로 왼쪽에 앉히고** 필드에 왼쪽 여백을 준다.
      마크업은 한 글자도 바꾸지 않는다 — fieldset/legend 접근성이 그대로 남는다.
   ⚠️ 필드에 `position: relative` 가 **반드시** 있어야 한다. 없으면 legend 가 페이지 기준으로
      날아가 화면에서 사라진다 — 실제로 그랬다(2026-08-22, 주석이 잘못 닫혀 이 줄이 통째로 죽었다). */
.shop-panel .shop-field { position: relative; padding-left: 108px; }
.shop-panel .shop-field > legend { position: absolute; left: 0; top: var(--shop-s3);
                                   width: 96px; padding: 0; margin: 0;
                                   min-height: var(--shop-ctrl); display: flex;
                                   align-items: center; line-height: 1.35; }

/* 규격 × 수량 두 열 안에서는 라벨 칸을 좁힌다 — 안쪽 폭이 절반이라 */
.shop-acc__b > .shop-field[data-field="size"],
.shop-acc__b > .shop-field[data-field="qty"] { padding-left: 68px; }
.shop-acc__b > .shop-field[data-field="size"] > legend,
.shop-acc__b > .shop-field[data-field="qty"] > legend { width: 60px; }

@media (max-width: 860px) {
    /* 좁은 화면에서는 라벨 칸을 더 좁힌다. 컨트롤이 눌리면 안 된다. */
    .shop-panel .shop-field,
    .shop-acc__b > .shop-field[data-field="size"],
    .shop-acc__b > .shop-field[data-field="qty"] { padding-left: 80px; }
    .shop-panel .shop-field > legend { width: 72px; font-size: var(--shop-fs-sm); }
}

/* ── [V36G.1 Gate6R.3] 업로드 박스 한 줄 ──
   레퍼런스 06 의 `디자인 파일` 은 **안내문 + [파일 선택] 이 한 줄**인 상자 하나다(환산 78px).
   우리는 안내문·버튼·주의문이 세로로 쌓여 146px 이었다(실측). 같은 내용을 한 줄로 편다.
   ⚠️ 문구를 지우지 않는다. 받는 형식·용량 안내(`ShopUploadService::limitText()`)와
      온라인 미첨부 형식 안내는 그대로 남는다 — 자리만 바꾼다. */
.shop-upload { display: grid; grid-template-columns: minmax(0, 1fr) auto;
               align-items: center; column-gap: var(--shop-s4); row-gap: var(--shop-s2); }
.shop-upload__lead { grid-column: 1; grid-row: 1; margin: 0; }
.shop-upload__pick { grid-column: 2; grid-row: 1; margin: 0; }
.shop-upload__status,
.shop-upload__list,
.shop-upload__note { grid-column: 1 / -1; margin: 0; }
.shop-upload__note:empty { display: none; }
/* 상자 안 여백도 한 줄에 맞춰 조인다. 점선 상자·드래그 드롭 동작은 그대로다. */
.shop-panel .shop-upload { padding: var(--shop-s3) var(--shop-s4); }
.shop-panel .shop-upload__lead { margin-bottom: 0; }
.shop-panel .shop-upload__pick .shop-btn { width: auto; padding: 0 var(--shop-s5); }
.shop-panel .shop-upload__status:empty { display: none; }

/* ══════════════════════════════════════════════════════════════════
   [V36G.1 Gate6R.3A] 우측 견적 요약 안의 구매 조작부
   ──────────────────────────────────────────────────────────────────
   사장님이 이전 결정을 **철회**하셨다(지시서 §0).
     예전: 우측 요약 = 정보만 · CTA = 본문 하단 전역 행
     지금: 레퍼런스 06 처럼 요약 카드 하단에서 바로 다음 행동으로 이어진다
   ⚠️ 본문 하단 전역 행은 없앴다 — 같은 행동을 두 곳에 두지 않는다(§6).
   ══════════════════════════════════════════════════════════════════ */
.shop-summary__cta { display: flex; flex-direction: column; gap: var(--shop-s2);
                     margin-top: var(--shop-s4); }
/* 주문하기 = 전폭 primary (§5 권장 geometry) */
.shop-summary__go { width: 100%; justify-content: center; }
/* 장바구니 담기 / 견적서 = 2분할 secondary */
.shop-summary__cta2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                      gap: var(--shop-s2); }
.shop-summary__cta2 .shop-btn { width: 100%; justify-content: center;
                                min-height: var(--shop-ctrl); padding: 0 var(--shop-s3); }
/* 버튼이 하나뿐인 상품(견적서 불가)에서는 그 하나가 전폭을 쓴다 */
.shop-summary__cta2:has(> .shop-btn:only-child) { grid-template-columns: minmax(0, 1fr); }

.shop-summary__note { margin-top: var(--shop-s2); font-size: var(--shop-fs-xs);
                      color: var(--shop-ink-3); line-height: 1.55; }
.shop-summary .shop-detail__gate { margin-top: var(--shop-s3); font-size: var(--shop-fs-xs); }
.shop-summary .shop-detail__result:empty { display: none; }

/* 상품금액 합계 / 배송비 / 총 결제 예상액 — 레퍼런스 06 의 순서 */
.shop-total dt, .shop-total dd { padding-block: 3px; }

@media (max-width: 860px) {
    /* 모바일에서도 요약 카드 안에 3개를 그대로 둔다. 고정바는 `주문하기` 하나다(§6). */
    .shop-summary__cta { margin-top: var(--shop-s3); }
}

/* [V36G.1 Gate6R.3A] 합계 줄이 좁은 열에서 두 줄로 접히지 않게.
   ⚠️ 글자를 줄이지 않는다 — 라벨을 레퍼런스 문구(`총 예상금액`)로 맞추고 줄바꿈만 막는다. */
.shop-summary .shop-total dt.is-total { white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════
   [V36G.1 Gate6R.3A §11] 견적서 인쇄 — A4 세로 · 견적서 본문만
   ⚠️ 새 PDF 라이브러리를 넣지 않는다. 브라우저 인쇄를 그대로 쓴다.
   ⚠️ 인쇄에서 남는 것은 **견적서 문서 하나뿐**이다 — 사이트 크롬·상품 본문은 나오지 않는다.
   ══════════════════════════════════════════════════════════════════ */
@page { size: A4 portrait; margin: 14mm; }

@media print {
    /* 화면 요소를 전부 접고 견적서만 남긴다 */
    .shop-header, .shop-gnbbar, .shop-utilbar, .shop-brandbar, .shop-drawer,
    .shop-footer, .shop-mquick, .shop-breadcrumb, .shop-detail, .shop-detail__more,
    .shop-detail__bar, .shop-aicta, .shop-assist, .shop-topbar { display: none; }

    /* 모달 자체는 종이 위에서 창이 아니라 **문서**가 된다 */
    .shop-estimate[open] { display: block; position: static; max-width: none; max-height: none;
                           width: auto; border: 0; padding: 0; margin: 0; box-shadow: none; }
    .shop-estimate::backdrop { display: none; }
    /* ⚠️ 우선순위 강제 선언을 쓰지 않는다(§56 상한 8개). 이 블록이 파일 맨 뒤라 순서로 이긴다. */
    .shop-estimate__bar { display: none; }
    .shop-estimate__doc { overflow: visible; max-height: none; padding: 0; }

    .estimate-doc { break-inside: auto; }
    .estimate-doc table { break-inside: auto; }
    .estimate-doc tr, .estimate-doc__sup { break-inside: avoid; }
    /* 한글이 글자 단위로 끊기지 않게 */
    .estimate-doc, .estimate-doc * { word-break: keep-all; overflow-wrap: anywhere; }
    body { background: #fff; }
}

/* [V36G.1 Gate6R.3A §10] 견적서 공급자 블록 — 라벨/값 2열.
   ⚠️ 세로로 쌓으면 A4 한 장에서 자리를 크게 먹는다(실측). 견적서는 표 형식이 정상이다. */
.estimate-doc__sup { margin-top: var(--shop-s4); }
.estimate-doc__sup h2 { font-size: var(--shop-fs-md); margin-bottom: var(--shop-s2); }
.estimate-doc__supdl { display: grid; grid-template-columns: max-content minmax(0, 1fr);
                       column-gap: var(--shop-s4); row-gap: 2px; margin: 0; }
.estimate-doc__supdl dt { font-size: var(--shop-fs-xs); color: var(--shop-ink-3); }
.estimate-doc__supdl dd { margin: 0; font-size: var(--shop-fs-sm); color: var(--shop-ink); }
@media print {
    .estimate-doc__supdl { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
                           column-gap: 10mm; }
}

/* ══════════════════════════════════════════════════════════════════════════
   [V36G.1 Gate6R.3B] Product Visual Fidelity — 레퍼런스 06 직접 대응
   ──────────────────────────────────────────────────────────────────────────
   지시서 §0: 이번 배치는 **디자인이 가장 중요하다.** 우선순위는
     1) 레퍼런스의 실제 시각   2) 기능·데이터 계약   3) 기존 Shop 스타일

   구조는 이미 레퍼런스를 따라가 있었는데 **화면 인상이 달랐다.** 실측으로 찾은 원인 다섯:

     1. 바탕이 흰색이라 흰 카드가 보이지 않았다.
        레퍼런스는 아이보리 바탕 위의 흰 카드다. 우리는 둘 다 흰색이라 1px 선만 남아
        카드로 읽히지 않았다. 색·모서리·간격을 아무리 맞춰도 이것 하나로 인상이 갈렸다.
     2. 좌우 열 사이가 72px 이었다. 레퍼런스 환산은 24px 다.
        세 배로 벌어져 두 열이 서로 다른 화면처럼 떨어져 보였다.
     3. 컨트롤이 전폭으로 늘어났다. 드롭다운 하나가 680px 이면 관리자 폼처럼 보인다.
        레퍼런스는 약 360px 에서 멈춘다.
     4. 줄 간격이 24px 이고 묶음마다 굵은 구분선이 있었다.
        레퍼런스 계산기 카드 안에는 옵션 줄 사이 구분선이 **하나도 없다.**
     5. 우측 요약이 265px 이라 `총 예상금액` 과 금액이 두 조각으로 갈라져 보였다.
        레퍼런스 환산은 385px 한 덩어리다.

   측정 근거 — `qa/reference/v36g1r5/references/ui/06_checkout_calculator_quote_reference.png`
     이미지 1536x1024. PC 패널의 좌측 카드 22..704 · 사이 704..720 · 우측 카드 720..975(sheet px).
     953 sheet 가 곧 1440 design px 이므로 배율은 **1.511** 이다.
       좌 1030 : 사이 24 : 우 385  =  72.8% : 27.2%
       컨트롤 높이 27 sheet = 41 · 줄 pitch 36 sheet = 54 · 라벨 열 126 sheet = 191

   ⚠️ 컨트롤 높이 44px 는 **줄이지 않는다.** 환산값은 41 이지만 44 는 터치 타깃 최소치이고
      그것을 지키는 단언이 이미 있다. 높이 대신 **줄 사이 여백**으로 밀도를 맞춘다.
   ⚠️ 이 화면에만 건다(`body.shop-p-detail`). 카테고리·검색·장바구니·주문서는 지시서 §9 범위 밖이다.
   ⚠️ 우선순위 강제 선언을 쓰지 않는다(§56 상한 8개). `.shop-p-detail` 접두사로 명시도를 올린다.
      (그 단어를 주석에 그대로 적으면 안전 검사가 파일을 잡는다 — 같은 함정 21번째)
   ⚠️ 데스크톱 전용이다. 모바일 규칙은 `max-width: 900px` 에 있어서, 접두사로 명시도를 올리면
      **미디어쿼리 밖 규칙이 모바일 규칙을 이겨 버린다.** 그래서 통째로 min-width 안에 넣는다.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {

    /* ── 1. 바탕 — 아이보리 위의 흰 카드 ──
       헤더는 자기 흰 배경을, 푸터는 자기 warm 배경을 갖고 있어 영향을 받지 않는다. */
    body.shop-p-detail { background: var(--shop-bg-soft); }

    /* ── 2. 두 열 — 72.8 : 27.2, 사이 24px ── */
    .shop-p-detail .shop-detail { grid-template-columns: minmax(0, 73fr) minmax(320px, 27fr);
                                  gap: var(--shop-s5); }

    /* ── 좌측 전체가 카드 하나다 ──
       레퍼런스는 상품 신원과 옵션이 **같은 카드 안**에 있다. 우리 DOM 은 신원(`<header>`)과
       옵션(`<section>`)이 형제라, 마크업을 옮기는 대신 부모를 카드로 만든다.
       ⚠️ DOM 순서를 바꾸지 않는다 — h1 이 h2 보다 먼저 와야 한다(제목 층위·스크린리더). */
    .shop-p-detail .shop-detail__main { border: 1px solid var(--shop-line);
        border-radius: var(--shop-radius-lg); background: var(--shop-bg);
        padding: 28px 28px 32px; }
    .shop-p-detail .shop-panel { border: 0; border-radius: 0; padding: 0; background: transparent; }

    /* ── [Shop UI Follow-up §8] 상품 신원 — 큰 대표 이미지 + 그 아래 이름 ──
       앞 판은 `152px 썸네일 + 이름` 한 줄이었다(레퍼런스 환산 146×92).
       그 판단의 근거는 "260px 로 두면 옆이 비어 허전하다" 였는데, **옆에 두는 것 자체가
       문제였다.** 옆칸을 없애고 세로로 세우면 빈 옆자리가 생기지 않으면서 이미지를 키울 수 있다.
       실측 1440: 152×95 → **832×416**(면적 20.5배).
       ⚠️ 비율은 2:1 이다. 4:3 이면 같은 폭에서 624px 가 되어 옵션이 첫 화면에서 완전히 밀린다.
          가로로 긴 제작물(현수막·배너·실사출력)에도 2:1 이 덜 잘린다.
       ⚠️ 사진이 없으면 자리표시자가 그대로 이 크기로 선다 — 빈 칸을 남기지 않는다. */
    .shop-p-detail .shop-detail__id { grid-template-columns: minmax(0, 1fr);
        gap: var(--shop-s4); align-items: start;
        margin-bottom: var(--shop-s5); padding-bottom: var(--shop-s5);
        border-bottom: 1px solid var(--shop-line-2); }
    .shop-p-detail .shop-detail__thumb { aspect-ratio: 1 / 1; }
    .shop-p-detail .shop-detail__idbody h1 { font-size: 23px; margin-bottom: 4px;
                                             letter-spacing: -0.01em; }
    .shop-p-detail .shop-detail__lead { font-size: var(--shop-fs-md); margin: 0; }
    .shop-p-detail .shop-detail__badges { margin-top: var(--shop-s2); }

    /* ── 카드 머리 — 제목 + 한 줄 설명 ── */
    .shop-p-detail .shop-panel__t { font-size: var(--shop-fs-xl); margin-bottom: 4px; }
    .shop-p-detail .shop-panel__sub { font-size: var(--shop-fs-sm); color: var(--shop-ink-3);
                                      margin: 0 0 var(--shop-s5); }

    /* ── 4. 줄 밀도 — 구분선 없이 촘촘히 ──
       묶음(`<details>`)마다 굵은 선을 그으면 한 카드가 네 덩어리로 쪼개져 보인다.
       ⚠️ `<details>` 자체는 그대로 둔다 — 모바일에서 접히는 장치다(Gate6R.2 §13). */
    .shop-p-detail .shop-acc + .shop-acc { margin-top: 0; padding-top: 0; border-top: 0; }
    /* ⚠️ 줄 사이 실선도 없앤다. `.shop-field { border-top }` 은 **모든 줄**에 걸려 있었고
       `:first-of-type` 만 면제라, 묶음이 넷이면 화면에 선이 예닐곱 개 그어졌다(실측 3개 보임).
       레퍼런스에는 옵션 줄 사이에 선이 없다. */
    .shop-p-detail .shop-panel .shop-field { border-top: 0;
                                             padding-top: var(--shop-s2);
                                             margin-bottom: var(--shop-s2);
                                             padding-left: 152px; }
    /* 디자인 방식 아래 점선도 마찬가지다 — 한 카드 안에서 또 나누지 않는다 */
    .shop-p-detail .shop-design__panel { border-top: 0; padding-top: 0;
                                         margin-top: var(--shop-s3); }
    .shop-p-detail .shop-panel .shop-field > legend { top: var(--shop-s2); width: 132px;
                                                      color: var(--shop-ink); }

    /* 규격 x 수량 한 행 — 라벨 열을 나머지 줄과 **같은 자리**에 맞춘다.
       Gate6R.2 §9-B 의 "규격과 수량을 한 행에" 는 사장님 결정이라 그대로 지킨다.
       왼쪽 칸을 1.6 배로 넓혀야 라벨 152px 를 빼고도 가로x세로가 들어간다(실측 347px). */
    .shop-p-detail .shop-acc__b { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
                                  column-gap: var(--shop-s5); }
    .shop-p-detail .shop-acc__b > .shop-field[data-field="size"] { padding-left: 152px; }
    .shop-p-detail .shop-acc__b > .shop-field[data-field="size"] > legend { width: 132px; }
    .shop-p-detail .shop-acc__b > .shop-field[data-field="qty"] { padding-left: 56px; }
    .shop-p-detail .shop-acc__b > .shop-field[data-field="qty"] > legend { width: 48px; }

    /* ── 3. 컨트롤 폭 — 약 360px 에서 멈춘다 ── */
    .shop-p-detail .shop-panel .shop-select { max-width: 360px; }
    .shop-p-detail .shop-panel .shop-upload { max-width: 580px; }
    .shop-p-detail .shop-panel .shop-textarea textarea { max-width: 580px; }

    /* 컨트롤 테두리 — 카드 테두리보다 한 단계 진하게(위 토큰 주석 참고) */
    .shop-p-detail .shop-panel .shop-select,
    .shop-p-detail .shop-panel .shop-size__cell input,
    .shop-p-detail .shop-panel .shop-stepper { border-color: var(--shop-ctrl-line); }

    /* 파일 선택 — 레퍼런스의 `파일 선택` 은 **브론즈 외곽선**이다.
       검은 테두리를 쓰면 상자 안에서 가장 센 요소가 되어 시선을 먼저 가져간다. */
    .shop-p-detail .shop-upload__pick .shop-btn { background: var(--shop-bg);
        color: var(--shop-accent-ink); border-color: var(--shop-accent); }

    /* ── 5. 우측 견적 요약 ──
       레퍼런스 순서: 제목 + `실시간 계산` 표식 → 내역 줄 → 점선 → 상품금액 합계(굵은 브론즈)
                      → 총 예상금액 베이지 박스 → 안내 → 조작부
       ⚠️ 두 칸 사이 column-gap 을 0 으로 둔다. 12px 이 남아 있으면 베이지 박스 한가운데로
          흰 줄이 지나가 `총 예상금액` 과 금액이 **다른 두 조각**으로 보인다(실측 결함). */
    .shop-p-detail .shop-detail__buy { padding: 26px 24px; box-shadow: none; }
    .shop-p-detail .shop-summary__t { margin-bottom: var(--shop-s4); font-size: var(--shop-fs-lg);
                                      font-weight: var(--shop-fw-bold); color: var(--shop-ink); }
    .shop-p-detail .shop-summary__live { background: var(--shop-accent-soft);
                                         color: var(--shop-accent-ink); }
    .shop-p-detail .shop-breakdown,
    .shop-p-detail .shop-total { font-size: var(--shop-fs-md); column-gap: 0; row-gap: 9px; }
    .shop-p-detail .shop-breakdown dt,
    .shop-p-detail .shop-total dt { color: var(--shop-ink-3); }
    .shop-p-detail .shop-breakdown dd,
    .shop-p-detail .shop-total dd { color: var(--shop-ink); font-weight: var(--shop-fw-med); }
    /* 내역과 합계 사이 — 레퍼런스는 점선이다 */
    .shop-p-detail .shop-total { border-top-style: dashed; padding-top: var(--shop-s4); }
    /* 상품금액 합계 — 굵은 브론즈. 내역과 총액을 잇는 중간 강조다 */
    .shop-p-detail .shop-total .is-sum { font-weight: var(--shop-fw-bold); }
    .shop-p-detail .shop-total dt.is-sum { color: var(--shop-ink); }
    .shop-p-detail .shop-total dd.is-sum { color: var(--shop-accent-ink); }
    /* 총 예상금액 — 한 덩어리 베이지 박스 */
    .shop-p-detail .shop-total dt.is-total,
    .shop-p-detail .shop-total dd.is-total { background: var(--shop-accent-soft);
        padding: 16px var(--shop-s4); }
    .shop-p-detail .shop-total dt.is-total {
        font-size: var(--shop-fs-lg); font-weight: var(--shop-fw-bold); color: var(--shop-ink); }
    .shop-p-detail .shop-total dd.is-total { font-size: 28px; color: var(--shop-accent-ink); }
    .shop-p-detail .shop-summary__note { font-size: var(--shop-fs-sm); }

    /* 조작부 — 요약 카드 안쪽 아래(Gate6R.3A 유지). 금액과 버튼 사이를 선 하나로 나눈다 */
    .shop-p-detail .shop-summary__cta { margin-top: var(--shop-s5); padding-top: var(--shop-s5);
                                        border-top: 1px solid var(--shop-line-2); }
    /* 견적서는 세 번째 위계다 — 검은 테두리를 쓰면 브론즈 외곽선 옆에서 더 세 보인다 */
    .shop-p-detail .shop-summary__cta2 .shop-btn--ghost { border-color: var(--shop-ctrl-line);
                                                          color: var(--shop-ink-2); }
    .shop-p-detail .shop-summary__cta2 .shop-btn--ghost:hover { border-color: var(--shop-ink);
                                                                color: var(--shop-ink); }

    /* ── 카드 아래 읽을거리 — 아이보리 바탕에서는 이것도 카드여야 한다 ──
       바탕만 바꾸고 두면 설명·가이드가 배경 위에 그냥 떠 있는 글자로 보인다. */
    .shop-p-detail .shop-detail__more { background: var(--shop-bg);
        border: 1px solid var(--shop-line); border-radius: var(--shop-radius-lg);
        padding: 0 var(--shop-s5); margin-top: var(--shop-s6); }
}

/* ── 총액 박스 이음매 — 화면 폭과 **무관하다** ──────────────────────────────
   레퍼런스는 PC 든 모바일이든 `총 예상금액`과 금액이 **베이지 상자 하나** 안에 있다.
   우리는 두 조각으로 갈라져 있었고 원인이 두 가지였다. 둘 다 눈으로 보고 찾았다.

     1) `<dd>` 의 브라우저 기본 여백 40px.
        `column-gap: 0` 을 줘도 dd 가 자기 왼쪽으로 40px 를 밀고 들어와
        베이지 상자 한가운데로 흰 줄이 지나갔다(실측 라벨 끝 1143 → 금액 시작 1183).
     2) `.is-total` 에 걸린 `align-self: center`.
        라벨 칸 59px · 금액 칸 77px 로 **높이가 다른** 블록 두 개가 됐다(실측).
        칸은 줄 높이까지 늘리고(stretch), 글자는 칸 안에서 세로 가운데로 놓는다.

   ⚠️ 미디어쿼리 밖에 둔다. 안에 두면 모바일에서 그대로 갈라진 채 남는다(실측 52px).
   ⚠️ [Purchase Flow Gate 결함2] 예전에는 `.shop-p-detail` 안으로만 걸어 뒀다
      ("장바구니·주문서는 그때 지시서 범위 밖"). 이번 게이트가 **바로 그 범위**이고,
      장바구니·주문서·주문결과·주문상세에서 같은 갈라짐이 그대로 있었다(2026-08-27 실측).
      그래서 한정을 풀어 `.shop-total` 전체에 건다 — 같은 결함을 두 번 고치지 않는다. */
.shop-breakdown, .shop-total { column-gap: 0; }
.shop-breakdown dt, .shop-breakdown dd,
.shop-total dt, .shop-total dd { margin: 0; }
.shop-breakdown dt, .shop-total dt { padding-right: var(--shop-s3); }
.shop-total dt.is-total,
.shop-total dd.is-total { align-self: stretch; display: flex; align-items: center; }
.shop-total dt.is-total { border-radius: 10px 0 0 10px; }
.shop-total dd.is-total { border-radius: 0 10px 10px 0; justify-content: flex-end; }

/* ── 1280 아래에서는 규격과 수량을 **각자 줄로 되돌린다** ──────────────────
   레퍼런스도 원래 `사이즈` 와 `수량` 이 각자 줄이다. 한 행에 묶은 것은 1440 폭에서의
   밀도 결정이고(Gate6R.2 §9-B), 그 결정 자체는 데스크톱 기준 폭에서 그대로 지킨다.
   ⚠️ 폭이 줄면 우측 요약이 320px 하한에 걸려 **좌측만 빠르게 좁아진다.**
      1024 에서 가로·세로 입력칸이 78px 까지 눌려 `예: 3000` 이 `예: 3` 으로 잘렸다(실측).
      무엇을 넣는 칸인지 화면에서 사라지는 것은 밀도가 아니라 결함이다. */
@media (min-width: 901px) and (max-width: 1279px) {
    .shop-p-detail .shop-acc__b > .shop-field[data-field="size"],
    .shop-p-detail .shop-acc__b > .shop-field[data-field="qty"] { grid-column: 1 / -1;
                                                                  padding-left: 152px; }
    .shop-p-detail .shop-acc__b > .shop-field[data-field="qty"] > legend { width: 132px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   [V36G.1 Owner Audit Batch1] Home — Hero 캐러셀 · 프리미엄 서비스 · 정보띠 · 플로팅 CTA
   ──────────────────────────────────────────────────────────────────────────
   실측 근거 — `qa/reference/v36g1ui/references/ui/01_desktop_home.png` (1122x1402)
     이 시트의 본문 폭이 1440 design px 를 뜻하므로 배율은 **1.283** 이다.
       Hero 밴드      155..478  → 323 sheet ≈ 415 design
       프리미엄 카드   183 design 폭 · 사이 24 · 그림 4:3 · 텍스트 **왼쪽 정렬**
       정보띠 밴드     905..1010 → 105 sheet ≈ 135 design · 아이콘 51 · 아이콘~제목 26
   ⚠️ Hero 높이는 레퍼런스(415)보다 **크게** 잡는다 — 사장님이 §3 에서 "현재보다 크고
      시원하게" 라고 지시하셨고, 4장 캐러셀이 되면서 조작부 자리도 필요해졌다.
      레퍼런스 자체 높이는 위에 적어 둔다(나중에 되돌릴 근거).
   ⚠️ 우선순위 강제 선언을 쓰지 않는다(§56 상한 8개).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── §3 Hero 캐러셀 ────────────────────────────────────────────────────────
   ⚠️ 슬라이드를 **겹치지 않는다.** 안 보이는 장은 `display: none` 이라 스크립트가 없어도
      첫 장만 깔끔하게 남고, 첫 그림이 4장 겹쳐 보이는 깜빡임도 없다.
      나머지 세 장의 목적지는 바로 아래 프리미엄 서비스 6칸에 전부 있어 링크가 사라지지 않는다. */
.shop-hero--car { min-height: 520px; }
.shop-hero--car .shop-hero__track { display: contents; }
.shop-hero__slide { display: none; }
.shop-hero__slide.is-on { display: grid; min-width: 0; }
/* 제목이 h1 인 장과 h2 인 장의 크기가 달라 보이면 캐러셀이 덜컹거린다 — 같게 맞춘다 */
.shop-hero--full .shop-hero__t { max-width: 22ch; font-size: var(--shop-fs-hero);
                                 line-height: 1.24; letter-spacing: -0.035em;
                                 font-weight: var(--shop-fw-black); color: var(--shop-ink); }
/* [Owner Audit Batch 1A §2] 사진이 없는 Hero — **중립 빈 틀**.
   사장님 결정으로 Hero 실제 이미지는 추후 별도 선정하신다.
   ⚠️ 영역의 자리·크기를 그대로 둔다. 사진이 정해지면 같은 자리에 `<img>` 가 들어가고
      조판이 한 픽셀도 움직이지 않는다.
   ⚠️ 상품명·브랜드 도형을 그리지 않는다 — 그건 콘텐츠로 읽힌다. 아주 옅은 면과
      작은 안내 글자만 둔다.
   ⚠️ 오른쪽 절반에만 둔다. 전체를 덮으면 글자 뒤로 면이 지나간다.
   ⚠️ **틀이 보여야 한다.** 앞 판은 바탕(#f7f5f0)과 면(#f2f0ea)의 차이가 너무 작아
      화면에서 "사진 준비 중" 글자만 떠 있고 **어디가 사진 자리인지 안 보였다**(실측).
      §2 의 목적은 "사진이 들어올 자리와 크기를 지금 확정해 두는 것" 이므로,
      옅은 테두리를 둘러 경계를 드러낸다. 사진이 들어오면 이 규칙만 안 쓰이게 된다. */
.shop-hero--full .shop-hero__visual--empty { position: absolute; inset: 0 0 0 auto;
    width: min(52%, 760px); z-index: 0; display: flex;
    align-items: center; justify-content: center;
    background: var(--shop-bg-warm);
    box-shadow: inset 0 0 0 1px var(--shop-line); }
.shop-hero__ph { padding: 6px 14px; border: 1px dashed var(--shop-line);
                 border-radius: 999px; background: rgba(255, 255, 255, .74);
                 font-size: var(--shop-fs-sm); color: var(--shop-ink-4);
                 letter-spacing: .02em; }
/* 조작부 — 레퍼런스는 카피 아래 왼쪽에 `1 / 3` 과 이전·다음이 있다 */
.shop-hero__nav { position: absolute; z-index: 3; left: 50%; bottom: var(--shop-s5);
                  transform: translateX(-50%);
                  width: min(100% - (var(--shop-gutter) * 2), var(--shop-page));
                  display: flex; align-items: center; gap: var(--shop-s3); }
.shop-hero__nav[hidden] { display: none; }
.shop-hero__count { font-size: var(--shop-fs-sm); font-weight: var(--shop-fw-med);
                    color: var(--shop-ink-2); font-variant-numeric: tabular-nums; }
.shop-hero__arrow { display: inline-flex; align-items: center; justify-content: center;
                    width: var(--shop-ctrl); height: var(--shop-ctrl); padding: 0;
                    border: 1px solid var(--shop-line); border-radius: 999px;
                    background: rgba(255, 255, 255, .9); color: var(--shop-ink);
                    font-size: var(--shop-fs-xl); line-height: 1; cursor: pointer;
                    transition: border-color var(--shop-t), background var(--shop-t); }
.shop-hero__arrow:hover { border-color: var(--shop-ink); background: #fff; }
.shop-hero__dots { display: inline-flex; align-items: center; gap: 6px; margin-left: var(--shop-s2); }
/* ⚠️ 점은 작지만 **누를 수 있는 크기**여야 한다 — 보이는 점 밖으로 여백을 넓혀 잡는다 */
.shop-hero__dot { width: var(--shop-ctrl-sm); height: var(--shop-ctrl-sm); padding: 0;
                  border: 0; background: none; cursor: pointer; position: relative; }
.shop-hero__dot::after { content: ""; position: absolute; inset: 50% auto auto 50%;
                         width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 999px;
                         background: var(--shop-ink-4); transition: background var(--shop-t); }
.shop-hero__dot.is-on::after { background: var(--shop-accent); width: 22px; margin-left: -11px;
                               border-radius: 999px; }

/* ── [Purchase Close §5] 지금 가장 인기있는 BEST 상품 ─────────────────────────
   프리미엄 서비스와 **같은 카드 조판**을 쓴다(그림 위 · 글자 왼쪽 정렬). 새 컴포넌트를 만들지 않는다.
   `--best` 가 켜는 것은 **한 줄 배치**와 **모바일 가로 스크롤** 둘뿐이다.

   ⚠️ 데스크톱은 칸 수만큼 균등하게 나눈다. 6칸이든 5칸이든 카드 크기가 같아야 한다 —
      `repeat(6, …)` 로 못박으면 칸이 5개일 때 마지막 자리가 빈 채로 남는다.
   ⚠️ 모바일은 **rail 안에서만** 가로로 스크롤한다. 페이지가 옆으로 밀리면 안 된다.
      그래서 rail 이 화면 폭 밖으로 나가는 만큼을 음수 여백으로 되돌리고
      `overflow-x: auto` 를 **rail 자신**에게만 준다.
   ⚠️ `overflow-x: hidden` 이 아니라 `auto` 다 — 손가락으로 밀 수 있어야 한다. */
.shop-cats--best .shop-section__head { margin-bottom: var(--shop-s5); }
/* ⚠️ 명시도를 **클래스 두 개**로 올린다. 이 파일 앞쪽(2683행대)의 `.shop-promo` 가
     `grid-template-columns: repeat(6, …)` 를 주고 있어, 클래스 하나짜리 규칙은
     같은 명시도에서 순서로 겨루다 조합에 따라 진다(1024 실측: 3칸을 줬는데 6칸이 나왔다).
     같은 캐스케이드 사고가 이 저장소에서 반복됐다 — 처음부터 두 개로 건다. */
/* ⚠️ grid 가 아니라 **flex** 로 간다. 이 파일 앞쪽 `.shop-promo` 의
     `grid-template-columns: repeat(6, …)` 가 명시도를 올려도 계속 이겼다(1024 실측:
     `grid-auto-flow` 는 내 값이 먹는데 `grid-template-columns` 만 6칸으로 남았다).
     flex 로 가면 그 속성 자체가 무의미해져 캐스케이드 싸움이 사라진다. */
.shop-cats--best .shop-promo--best { display: flex; flex-wrap: wrap;
                    gap: var(--shop-card-gap, var(--shop-s4)); }
.shop-cats--best .shop-promo--best > .shop-promo__item { flex: 1 1 0; min-width: 0; }
.shop-promo--best .shop-promo__item { padding: var(--shop-s2); }
/* (그림 비율·자리는 위 `--prem, --best` 공용 규칙이 정한다) */
.shop-promo--best .shop-promo__body { align-items: flex-start; text-align: left;
                                      gap: 5px; padding: var(--shop-s3) var(--shop-s2) var(--shop-s2); }
.shop-promo--best .shop-promo__lead { font-size: var(--shop-fs-sm); }

/* 좁아지면 칸 수를 줄인다 — 카드가 150px 까지 눌리는 것보다 줄바꿈이 낫다(1024 실측).
   ⚠️ `grid-auto-flow` 를 함께 되돌려야 한다. `column` 이 남아 있으면
      `grid-template-columns` 를 줘도 한 줄로 계속 흐른다. */
@media (min-width: 861px) and (max-width: 1279px) {
    /* 3칸씩 두 줄 — 카드가 150px 까지 눌리는 것보다 낫다(1024 실측) */
    .shop-cats--best .shop-promo--best > .shop-promo__item {
        flex: 0 0 calc((100% - var(--shop-s3) * 2) / 3); }
}

/* 모바일 — 가로로 미는 줄.
   ⚠️ 여백을 **또** 밀지 않는다. `.shop-cats` 가 이미 `margin-inline: calc(50% - 50vw)` 로
      화면 끝까지 밀고 `.shop-promo` 가 `padding-inline: var(--shop-gutter)` 로 되돌린다.
      거기에 음수 마진을 한 번 더 주면 페이지가 옆으로 16px 밀린다(390 실측).
   ⚠️ 그 공용 규칙은 카드를 96px 아이콘 줄로 만든다(카테고리용). BEST 는 **상품 카드**라
      크기와 테두리를 되살린다. */
@media (max-width: 860px) {
    .shop-cats--best .shop-promo--best { flex-wrap: nowrap; }
    /* [Home Fidelity §6] 레퍼런스는 다음 카드가 **넉넉히 걸쳐** 보인다(추천 상품 줄에 4개 남짓).
       62% 는 한 화면에 1.4개뿐이라 밀 수 있다는 느낌이 약했다(390 실측). */
    .shop-cats--best .shop-promo--best > .shop-promo__item { flex: 0 0 44%; flex-direction: column;
        border: 1px solid var(--shop-line); background: var(--shop-bg);
        border-radius: var(--shop-radius-lg); overflow: hidden; }
    .shop-promo--best .shop-promo__visual { order: -1; margin-bottom: 0;
        aspect-ratio: 1 / 1; border-radius: 0; }
    .shop-promo--best .shop-promo__body { align-items: flex-start; text-align: left;
        padding: var(--shop-s3) var(--shop-s3) var(--shop-s4); }
}
@media (max-width: 420px) {
    .shop-cats--best .shop-promo--best > .shop-promo__item { flex-basis: 50%; }
}

/* ── §4·§5 비즈니스를 위한 프리미엄 서비스 ─────────────────────────────────
   게이트웨이 줄과 대표상품 줄을 합친 한 섹션. 카드 조판은 레퍼런스 프리미엄 카드다.
   ⚠️ DOM 순서(설명 → 그림)를 바꾸지 않고 **자리만** 바꾼다. 순서를 뒤집으면
      스크린리더가 장식 그림을 먼저 읽는다. */
.shop-cats--prem .shop-section__head { margin-bottom: var(--shop-s5); }
.shop-promo--prem .shop-promo__item { padding: var(--shop-s2); }
/* ── [Home Fidelity §5] 카드 그림은 **정사각(1:1)** 이다 ──────────────────────
   레퍼런스(`ref/홈페이지UI 레퍼런스` 4번째)의 카테고리 아이콘 줄과 추천 상품 줄은 둘 다
   정사각 그림이고, 그림이 카드의 **주 시각요소**다.
   우리 것은 16:9 로 눌려 156×88 이었다(390 실측) — 글자보다 그림이 작았다.
   ⚠️ 사진이 아직 없어도 **같은 1:1 틀**을 유지한다. 사진이 들어와도 자리가 안 바뀐다.
   ⚠️ 카드 자체를 키우지 않는다. 비율만 바꾼다(§148). */
.shop-promo--prem .shop-promo__visual,
.shop-promo--best .shop-promo__visual { order: -1; margin-top: 0;
                                        aspect-ratio: 1 / 1;
                                        border-radius: var(--shop-radius-sm); }
/* 레퍼런스 카드의 글자는 **왼쪽 정렬**이다(가운데 정렬이 아니다 — 실측) */
.shop-promo--prem .shop-promo__body { align-items: flex-start; text-align: left;
                                      gap: 5px; padding: var(--shop-s3) var(--shop-s2) var(--shop-s2); }
.shop-promo--prem .shop-promo__lead { font-size: var(--shop-fs-sm); }
/* 시작가 — 카드에서 가장 강한 줄. 값은 서버가 계산한 것이고 화면은 크기만 정한다.
   ⚠️ 단위(`㎡당`)는 **윗줄에 작게** 둔다. 한 줄로 붙이면 좁은 카드에서 아무 데서나 접혀
      깨진 것처럼 보인다(1240/6 = 약 171px 실측). 상품 카드도 같은 조판을 쓴다. */
.shop-promo__price { display: block; margin-top: auto; padding-top: 6px;
                     font-size: var(--shop-fs-xl); font-weight: var(--shop-fw-bold);
                     color: var(--shop-ink); letter-spacing: -0.02em;
                     line-height: 1.25; white-space: nowrap; }
/* [Batch 1B §4] 기준 규격 — 금액 **아랫줄**. 위가 아니다(위는 이제 금액이 차지한다). */
.shop-promo__basis { display: block; font-size: var(--shop-fs-xs);
                     font-weight: var(--shop-fw-med); color: var(--shop-ink-3);
                     letter-spacing: 0; font-style: normal; white-space: nowrap; }
/* 상담 칸은 금액이 없다. 자리를 비워 두면 카드 높이가 어긋나므로 아래를 채워 맞춘다 */
.shop-promo--prem .shop-promo__body { min-height: 132px; }

/* ── §7 정보띠 — 레퍼런스 실측에 맞춘다 ────────────────────────────────────
   아이콘 51 · 아이콘~제목 26 · 제목 21 · 설명 14/1.6 (design px 환산)
   ⚠️ 반드시 `.shop-main` 접두사를 붙인다. 파일 중간(2922~2926)에 같은 이름의 규칙이
      `.shop-main` 을 달고 있어서, 접두사 없이 쓰면 (0,1,0) 이 (0,2,0) 에 눌린다 —
      실제로 그렇게 써 보니 아이콘이 32px 그대로였고 밴드 높이도 안 늘었다(실측 98px). */
.shop-main .shop-strip__list { padding: var(--shop-s6) var(--shop-s5); }
.shop-main .shop-strip__list li { column-gap: var(--shop-s5); padding: 0 var(--shop-s5); }
.shop-main .shop-strip__i svg { width: 54px; height: 54px; }
/* [Shop UI Follow-up §5] 사장님이 주신 아이콘은 **채움(fill)** 이고 기존 것은 **선(stroke)** 이다.
   같은 자리에 섞이므로 채움 쪽만 칠하는 방식을 바꾼다.
   ⚠️ 크기는 46 → 54px(+17%). 지시서의 "15~20% 확대" 범위 안이다.
   ⚠️ 채움이든 선이든 색은 위 `.shop-strip__list .shop-strip__i` 의 color 하나가 정한다. 여기서 색을
      다시 적지 않는다 — 그렇게 해서 두 가지 먹색이 섞였던 것이 사장님 지적사항이다.
   [Shop UI Follow-up 2차] 굵기는 위 `stroke-width: 2` 가 Material 격자(80/960)와 같은
      8.33% 라 네 칸이 일치한다. 여기서 굵기를 다시 적지 않는다 — 예전에 이 자리에서
      1.2 로 덮는 바람에 선 아이콘만 4.5px 대 2.7px 로 얇았다(실측). */
.shop-strip__i--solid svg { fill: currentColor; stroke: none; }
.shop-main .shop-strip__list strong { font-size: 19px; font-weight: var(--shop-fw-bold);
                                      letter-spacing: -0.01em; }
.shop-main .shop-strip__list span:not(.shop-strip__i) { font-size: var(--shop-fs-sm);
                                                        line-height: 1.62; }
/* 구분선은 밴드 높이 전체가 아니라 가운데만 지난다(레퍼런스) */
.shop-main .shop-strip__list li + li { border-left: 0; position: relative; }
.shop-main .shop-strip__list li + li::before { content: ""; position: absolute; left: 0;
                                               top: 6%; bottom: 6%; width: 1px;
                                               background: var(--shop-line); }

/* ── §8 회사 콘텐츠 5탭 ────────────────────────────────────────────────────
   레퍼런스 하단 가운데 블록: 탭 줄 → 제목·날짜 목록 → 더보기.
   ⚠️ 탭이 다섯이라 좁은 칸에서 넘칠 수 있다 — 가로 스크롤을 허용하고 잘라내지 않는다. */
.shop-tabs__bar { display: flex; gap: var(--shop-s4); overflow-x: auto;
                  border-bottom: 1px solid var(--shop-line); margin-bottom: var(--shop-s3);
                  scrollbar-width: none; }
.shop-tabs__bar::-webkit-scrollbar { display: none; }
.shop-tabs__t { flex: 0 0 auto; padding: var(--shop-s2) 2px var(--shop-s3);
                border: 0; background: none; cursor: pointer; white-space: nowrap;
                font-size: var(--shop-fs-sm); font-weight: var(--shop-fw-med);
                color: var(--shop-ink-3); position: relative;
                min-height: var(--shop-ctrl-sm); }
.shop-tabs__t:hover { color: var(--shop-ink); }
.shop-tabs__t.is-on { color: var(--shop-accent-ink); font-weight: var(--shop-fw-bold); }
/* 현재 탭 표시 — 밑줄이 경계선 위에 겹쳐 앉는다 */
.shop-tabs__t.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
                             height: 2px; background: var(--shop-accent); }
.shop-tabs__p { display: none; }
.shop-tabs__p.is-on { display: block; }
.shop-tabs__list li + li { border-top: 1px solid var(--shop-line-2); }
.shop-tabs__list a { display: flex; align-items: baseline; gap: var(--shop-s3);
                     padding: 9px 0; color: var(--shop-ink-2); font-size: var(--shop-fs-sm); }
.shop-tabs__list a:hover .shop-tabs__ti { color: var(--shop-ink); text-decoration: underline;
                                          text-underline-offset: 3px; }
.shop-tabs__ti { flex: 1 1 auto; min-width: 0; overflow: hidden;
                 text-overflow: ellipsis; white-space: nowrap; }
.shop-tabs__d { flex: 0 0 auto; font-size: var(--shop-fs-xs); color: var(--shop-ink-4);
                font-variant-numeric: tabular-nums; }
.shop-tabs__none { padding: var(--shop-s5) 0; font-size: var(--shop-fs-sm);
                   color: var(--shop-ink-4); }
.shop-tabs__more { display: inline-flex; align-items: center; min-height: var(--shop-ctrl-sm);
                   margin-top: var(--shop-s2); font-size: var(--shop-fs-sm);
                   font-weight: var(--shop-fw-bold); color: var(--shop-accent-ink); }
.shop-tabs__more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── §13 상담 시간 ── */
.shop-cs__hours { margin: 0 0 var(--shop-s3); font-size: var(--shop-fs-md);
                  color: var(--shop-ink-2); line-height: 1.6; }

/* ── §6 AI 소재추천 Floating CTA ───────────────────────────────────────────
   ⚠️ 5칸 고정 내비가 아니다. **링크 하나**다.
   ⚠️ 모바일 하단 퀵줄·푸터·safe-area 를 피한다. 아이폰 홈 인디케이터 위로 올린다.
   ⚠️ 44px 이상 · 보이는 focus · 이름이 글자로 있다(아이콘만 두지 않는다). */
.shop-fab { position: fixed; z-index: var(--shop-z-bar); right: var(--shop-s5);
            bottom: calc(var(--shop-s5) + env(safe-area-inset-bottom, 0px));
            display: inline-flex; align-items: center; gap: var(--shop-s2);
            min-height: var(--shop-ctrl); padding: 0 var(--shop-s5);
            border-radius: 999px; background: var(--shop-accent); color: #fff;
            font-size: var(--shop-fs-md); font-weight: var(--shop-fw-bold);
            box-shadow: 0 8px 22px rgba(16, 24, 40, .22);
            transition: background var(--shop-t), transform var(--shop-t); }
.shop-fab:hover { background: var(--shop-accent-ink); color: #fff; }
.shop-fab:active { transform: translateY(1px); }
.shop-fab__i { font-size: var(--shop-fs-lg); line-height: 1; }

/* ── §10 Category Hero — 더 크고 시원하게 ──────────────────────────────────
   ⚠️ `.shop-hero.shop-hero--cat`(0,2,0)로 적어야 위쪽 `--full` 규칙을 이긴다.
      단일 클래스로 적으면 미디어쿼리 안에 넣어도 못 이긴다(이 저장소에서 세 번 난 사고). */
/* [Shop UI Follow-up §7] 340px 은 여전히 **띠**였다(Home Hero 는 같은 1440 에서 480px).
   사장님 지시대로 데스크톱·모바일 모두 세로를 키운다. 카테고리 전용 사진은 아직 없으므로
   높이는 사진이 들어올 자리를 미리 확정해 두는 값이다. */
.shop-hero.shop-hero--cat { min-height: 420px; }
/* ⚠️ 높이만 키우면 **글이 위에 붙고 아래가 텅 빈다**(1440 실측: 밴드 420 · 글상자 220 ·
      아래 200px 공백). 키운 높이가 "여유" 로 읽히려면 글이 밴드 가운데에 있어야 한다.
   ⚠️ **`__in` 에 `align-self: center` 를 걸면 아무 일도 안 일어난다.** 실제로 걸어 보고
      계산값이 `center` 인데도 글이 그대로 위에 붙어 있었다 — `__in` 은 히어로의 격자
      항목이 아니기 때문이다. 구조가 `hero(grid) > __track > __slide > __in` 이라
      격자 항목은 **`__track`** 이고, 그 track 이 block 이라 안쪽 슬라이드가 내용 높이로
      위에 붙는다. 그래서 **track 을 격자로 만들어 거기서 가운데 정렬**한다.
   ⚠️ `--car`(Home)는 track 이 `display: contents` 라 구조가 다르다 — 건드리지 않는다. */
.shop-hero.shop-hero--cat .shop-hero__track { display: grid; align-content: center; }
.shop-hero.shop-hero--cat .shop-hero__in { padding-block: var(--shop-s7); }
/* ⚠️ **사진 자리를 반쪽 띠로 두지 않는다.** 지금까지 빈 틀은 오른쪽 52% 만 차지했는데,
      정작 사진이 들어오면 `.shop-hero__visual` 은 `inset: 0`(전면)이다 — 즉 지금 보이는
      자리와 사진이 실제로 들어갈 자리가 **서로 달랐다.** 그래서 빈 틀도 전면으로 맞춘다.
      §7 이 요구한 "나중에 이미지가 들어올 구조만 미리 준비" 가 이것이다.
   ⚠️ 그 결과 글자가 반쪽 틀 경계에 눌리는 문제도 같이 없어진다(모바일에서 심했다).
   ⚠️ 여기서만 바꾼다 — Home·고객센터의 빈 틀은 한 줄도 건드리지 않는다. */
.shop-hero.shop-hero--cat .shop-hero__visual--empty {
    inset: 0; width: auto; align-items: flex-start; justify-content: flex-end;
    padding: var(--shop-s5); }
/* 사진이 들어왔을 때 좁은 화면에서 어디를 붙잡을지 — 카테고리는 주제물이 가운데다.
   (Home 은 왼쪽 여백에 글을 얹으려고 74% 를 쓴다. 그 값이 여기까지 오면 안 된다.) */
.shop-hero.shop-hero--cat .shop-hero__visual img { object-position: center; }

/* ── §11 카드 시작가 줄 — `부터` 가 혼자 다음 줄로 떨어지지 않게 ────────────
   실측 결함: 배너 카테고리의 `배너 출력물만` 카드가
     1줄 `600×1800mm 기준 9,000원`  2줄 `부터`
   로 끊겨 있었다. 6칸 줄에서 카드가 190px 라 한 줄에 다 못 들어간다.
   ⚠️ 말줄임으로 내용을 지우지 않는다. 대신 **단위를 윗줄로 올려** 각 줄이 온전한
      한 덩어리가 되게 한다 — `600×1800mm 기준` / `9,000원부터`.
      Home 프리미엄 카드도 같은 조판이라 두 화면의 금액 줄이 같은 모양이 된다. */
.shop-card__amt { display: block; white-space: nowrap; }
/* 기준 규격은 길어질 수 있으므로 접히게 둔다 — 금액 줄만 안 접히면 된다 */
.shop-card__basis { display: block; }

@media (max-width: 1024px) {
    .shop-hero--car { min-height: 460px; }
    .shop-hero.shop-hero--cat { min-height: 380px; }   /* [§7] 300 → 380 */
}
/* [Shop UI Follow-up §7] 모바일도 키운다. 앞 판은 300px 이라 제목·설명·상품수 세 줄이
   위아래로 눌려 있었다. 사장님 지시: 얇은 띠 금지 · 답답하게 눌리지 말 것. */
@media (max-width: 900px) {
    .shop-hero.shop-hero--cat { min-height: 340px; }
    .shop-hero.shop-hero--cat .shop-hero__in { padding-block: var(--shop-s6); }
    /* 전면 틀이라 글자가 폭을 다 쓴다 — 20ch 제한을 풀어 두 줄로 끊기지 않게 */
    .shop-hero.shop-hero--cat h1 { max-width: none; }
    .shop-hero.shop-hero--cat .shop-hero__visual--empty { padding: var(--shop-s4); }
}
/* ── §14 로그인 · 회원가입 — 콘텐츠 페이지가 아니라 **auth 화면**으로 ────────────
   사장님 지시: "누가 봐도 로그인 화면인 hierarchy".
   지금까지는 `max-width: 420px` 한 줄뿐이라 흰 바탕 위에 글자만 떠 있었다(테두리·배경 0).

   ⚠️ `.shop-auth` 의 **기존 선언을 고치지 않는다.** 회귀 스위트가
      `.shop-auth { max-width: 420px; margin-inline: auto; }` 를 **글자 그대로** 찾는다
      (authlayout B1·B3·B6·D2). 그래서 여기서 **두 번째 규칙**으로 더하기만 한다.
   ⚠️ 래퍼 클래스에 아무것도 덧붙이지 않는다 — A 절 12건이 `<div class="shop-auth">` 를
      strpos 로 찾는다. 카드는 전부 CSS 로 만든다.
   ⚠️ `.shop-auth` 는 비회원 주문조회(`shop/orders.php`)도 쓴다. 그 화면도 같은 성격이라
      같은 카드가 되는 것이 맞다 — 다만 바탕색은 body 표시자가 있는 화면에만 깐다. */
body.shop-p-auth { background: var(--shop-bg-soft); }
.shop-auth { margin-block: var(--shop-s7) var(--shop-s8);
             padding: var(--shop-s7) var(--shop-s6);
             border: 1px solid var(--shop-line); border-radius: var(--shop-radius-lg);
             background: var(--shop-bg); box-shadow: var(--shop-shadow-sm); }
/* 제목이 화면의 주인공이다 — 가운데로 모으고 리드는 한 줄로 눌러 둔다 */
.shop-auth .shop-title { font-size: var(--shop-fs-2xl); text-align: center; }
.shop-auth .shop-lead { text-align: center; font-size: var(--shop-fs-md); }
/* 제출 버튼은 전폭 — auth 화면의 다음 행동은 하나뿐이다.
   ⚠️ 왼쪽 정렬을 되돌리는 기존 선언(`margin-left: 0`)은 그대로 두고 폭만 편다. */
.shop-auth .shop-form__act { margin-top: var(--shop-s5); }
.shop-auth .shop-form__act button.shop-btn { width: 100%; justify-content: center; }
/* 보조 안내 — 카드 안에서 가운데로 모으고 위에 얇은 선으로 구분한다 */
.shop-auth .shop-auth__alt { margin-top: var(--shop-s5); padding-top: var(--shop-s5);
                             border-top: 1px solid var(--shop-line-2); text-align: center; }
.shop-auth .shop-auth__note { text-align: center; }

@media (max-width: 860px) {
    .shop-hero--car { min-height: 400px; }
    /* 좁은 화면에서는 카드가 화면 폭을 다 쓴다(기존 `max-width: none` 유지) */
    .shop-auth { margin-block: var(--shop-s5) var(--shop-s7);
                 padding: var(--shop-s6) var(--shop-s5); }
    .shop-hero__nav { bottom: var(--shop-s4); gap: var(--shop-s2); }
    .shop-hero__dots { margin-left: 0; }
    /* ⚠️ 좁은 화면의 `.shop-promo` 는 **가로 스크롤 줄**이고 `flex-direction: column-reverse`
       로 그림을 위로 올린다(2798~2810). 거기에 내 `order: -1` 이 겹치면 **두 번 뒤집혀**
       그림이 맨 아래로 내려가고, 본문 `min-height` 에 밀려 화면 밖으로 사라진다(실측: 모바일
       카드에 사진이 하나도 안 보였다). 그래서 프리미엄 줄만 정방향으로 되돌리고 order 를 살린다. */
    /* [Home Fidelity §3] 레퍼런스는 이 줄이 **한 줄 가로 스크롤**이다(6칸이 옆으로 이어진다).
       우리는 줄바꿈이 일어나 2열 × 3줄이 됐고 그만큼 Home 이 길어졌다(390 실측).
       ⚠️ `flex-wrap: nowrap` 을 **부모에** 준다. 칸 수·순서·내용은 그대로다. */
    .shop-cats--prem .shop-promo--prem { flex-wrap: nowrap; }
    .shop-promo--prem .shop-promo__item { flex-direction: column; flex-basis: 168px;
                                          padding: 6px; }
    /* [Home Fidelity §5] 좁은 화면에서도 정사각을 지킨다 */
    .shop-promo--prem .shop-promo__visual { order: -1; margin: 0 0 var(--shop-s2);
                                            aspect-ratio: 1 / 1; }
    .shop-promo--prem .shop-promo__body { min-height: 0; padding: 0 var(--shop-s2) var(--shop-s2); }
    .shop-promo--prem .shop-promo__lead { font-size: var(--shop-fs-xs); }
    .shop-promo__price { font-size: var(--shop-fs-lg); }
    .shop-strip__list { padding: var(--shop-s5) var(--shop-s4); }
    .shop-strip__list li { padding: 0 var(--shop-s3); column-gap: var(--shop-s3); }
    .shop-strip__i svg { width: 36px; height: 36px; }
    .shop-strip__list strong { font-size: var(--shop-fs-md); }
    /* 모바일 퀵줄과 겹치지 않게 위로 올린다. 퀵줄은 흐름 안에 있으므로
       화면 아래 여백만 확보하면 된다 — 스크롤 중에도 본문을 가리지 않는 자리다. */
    .shop-fab { right: var(--shop-s4); padding: 0 var(--shop-s4);
                bottom: calc(var(--shop-s4) + env(safe-area-inset-bottom, 0px)); }
}

/* ══════════════════════════════════════════════════════════════════════════
   [V36G.1 Owner Audit Batch 1A] 고객센터 — Reference 03 / 04 직접 대응
   ──────────────────────────────────────────────────────────────────────────
   사장님 직접 검수 결과, 안내 카드가 첫 화면에 여섯 장 펼쳐진 예전 조판은 폐기했다.
   레퍼런스의 조판을 먼저 복원하고 우리 기능을 넣는다(지시서 §4).

   실측 근거 — qa/reference/v36g1ui/references/ui/03_desktop_customer_center.png (1122x1402)
     시트 1122px 가 1440 뷰포트를 뜻하므로 배율 **1.283**.
       Hero 밴드      192 sheet ≈ 246 design
       탭 줄          한 줄에 네 칸 · 같은 폭 · 선택 칸만 채움 · 바깥 테두리 1px
       본문           좌 2/3 목록 · 우 1/3 보조(TOP5 · 빠른 상담)
       하단 안내      아이보리 밴드 · 아이콘 4칸

   ⚠️ 기존 Shop 카드·pill 스타일을 그대로 쓰지 않는다(§9). 이 화면 전용 컴포넌트다.
   ⚠️ 우선순위 강제 선언을 쓰지 않는다(§56 상한 8개).
   ══════════════════════════════════════════════════════════════════════════ */

/* Hero — 카테고리보다 낮고 넓다.
   레퍼런스 03 실측: 시트 y 161→350 (189px), 시트폭 1122 = 설계폭 1440 이므로 ×1.2834
   → **242px**. 앞 판은 280 이라 38px(16%) 높았다. 재서 맞춘다. */
.shop-hero.shop-hero--cc { min-height: 242px; }
/* 레퍼런스 실측: 제목 글자 높이 ≈39 design px — 34 로는 작았다(같은 배율 대조).
   Hero 제목의 기본값(fs-hero 44)을 그대로 쓴다. */
.shop-hero.shop-hero--cc h1 { font-size: var(--shop-fs-hero); letter-spacing: -0.03em; }
.shop-hero.shop-hero--cc .shop-hero__lead { max-width: 40ch; }
.shop-cc__hours { display: flex; flex-wrap: wrap; gap: var(--shop-s2) var(--shop-s5);
                  margin-top: var(--shop-s4); font-size: var(--shop-fs-sm);
                  color: var(--shop-ink-2); }
.shop-cc__hours span { position: relative; }
.shop-cc__hours span + span::before { content: ""; position: absolute; left: calc(var(--shop-s5) / -2);
                                      top: 4px; bottom: 4px; width: 1px; background: var(--shop-line); }

/* ── §7 무엇을 찾고 계신가요? — Hero 와 탭 사이 ── */
.shop-ccfind { margin-bottom: var(--shop-s6); }
.shop-ccfind__h { font-size: var(--shop-fs-lg); font-weight: var(--shop-fw-bold);
                  margin-bottom: var(--shop-s4); }
.shop-ccfind__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
                     gap: var(--shop-s4); }
/* [§7] 조판은 레퍼런스의 **하단 이용가이드 계열**을 따른다 — 아이콘이 왼쪽, 글이 오른쪽.
   앞 판은 아이콘 위·글 아래 세로형이라 칸 높이가 142px 로 부풀고, 같은 화면 아래쪽의
   이용안내 밴드(가로형 91px)와 계열이 갈렸다(실측). 두 묶음을 같은 언어로 맞춘다. */
.shop-ccfind__i { display: grid; grid-template-columns: auto minmax(0, 1fr);
                  column-gap: var(--shop-s4); align-items: start;
                  padding: var(--shop-s5); border: 1px solid var(--shop-line);
                  border-radius: var(--shop-radius); background: var(--shop-bg);
                  transition: border-color var(--shop-t), box-shadow var(--shop-t); }
.shop-ccfind__i:hover { border-color: var(--shop-accent); box-shadow: var(--shop-shadow-sm); }
.shop-ccfind__ico { grid-row: 1 / span 2; display: inline-flex; padding-top: 2px; }
/* 아래 이용안내 밴드(52px)와 같은 계열이되 위계가 한 단 아래다. */
.shop-ccfind__ico svg { width: 40px; height: 40px; fill: none; stroke: var(--shop-accent-ink);
                        stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.shop-ccfind__t { font-size: var(--shop-fs-md); font-weight: var(--shop-fw-bold);
                  color: var(--shop-ink); }
.shop-ccfind__d { margin-top: 4px; font-size: var(--shop-fs-xs);
                  color: var(--shop-ink-3); line-height: 1.5; }

/* ── §9 탭 — 레퍼런스처럼 한 줄 네 칸, 선택된 칸만 채워진다 ──
   ⚠️ 링크다. 스크립트가 없어도 동작하고 주소로 바로 열린다. */
.shop-cctabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
               margin-bottom: var(--shop-s6);
               border: 1px solid var(--shop-line); border-radius: var(--shop-radius);
               background: var(--shop-bg); overflow: hidden; }
/* 레퍼런스 03 실측: 탭 컨테이너 시트 y 384→422 = 38px → 설계 **49px**.
   테두리 2px 을 빼면 칸 높이 47. 앞 판은 52 였다. */
.shop-cctabs__t { display: flex; align-items: center; justify-content: center;
                  min-height: 47px; padding: 0 var(--shop-s3);
                  font-size: var(--shop-fs-md); font-weight: var(--shop-fw-med);
                  color: var(--shop-ink-2); text-align: center; }
.shop-cctabs__t + .shop-cctabs__t { border-left: 1px solid var(--shop-line); }
.shop-cctabs__t:hover { background: var(--shop-bg-soft); color: var(--shop-ink); }
.shop-cctabs__t.is-on { background: var(--shop-accent); color: #fff;
                        font-weight: var(--shop-fw-bold); border-radius: var(--shop-radius); }
.shop-cctabs__t.is-on:hover { background: var(--shop-accent-ink); color: #fff; }

/* ── 본문 2열 (레퍼런스 좌 2/3 · 우 1/3) ── */
.shop-cc { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
           gap: var(--shop-s6); align-items: start;
           margin-bottom: var(--shop-section-gap); }
.shop-cc__main { min-width: 0; }
.shop-cc__side { display: flex; flex-direction: column; gap: var(--shop-s5);
                 position: sticky; top: var(--shop-sticky-top); }
.shop-cc__none { padding: var(--shop-s7) 0; font-size: var(--shop-fs-sm);
                 color: var(--shop-ink-4); text-align: center; }
.shop-cc__more { margin-top: var(--shop-s4); display: flex; flex-wrap: wrap;
                 align-items: baseline; gap: var(--shop-s2) var(--shop-s4); }
.shop-cc__more a { font-size: var(--shop-fs-sm); font-weight: var(--shop-fw-bold);
                   color: var(--shop-accent-ink); }
.shop-cc__more a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* 나가는 링크임을 밝히는 한 줄. 링크보다 약하게 — 읽히되 앞서지 않게. */
.shop-cc__morenote { font-size: var(--shop-fs-xs); color: var(--shop-ink-4); }

/* ── §13·§14·§15 목록형 탭 ──
   레퍼런스 03 은 머리줄이 있는 **표**다. 칸: 분류 · 제목 · 날짜.
   ⚠️ 글 번호 칸을 만들지 않는다 — 저장된 번호가 없다(레퍼런스의 `번호` 열은 비운 게 아니라 뺐다).
   ⚠️ 머리줄과 각 줄이 **같은 격자**를 쓴다. 앞 판은 flex 라 분류가 없는 줄에서 칸이 밀렸다. */
.shop-cclist__hd,
.shop-cclist a { display: grid; grid-template-columns: 96px minmax(0, 1fr) 104px;
                 align-items: center; column-gap: var(--shop-s4); }
.shop-cclist__hd { padding: 11px var(--shop-s4); border-radius: var(--shop-radius-sm);
                   background: var(--shop-bg-soft); font-size: var(--shop-fs-xs);
                   font-weight: var(--shop-fw-bold); color: var(--shop-ink-3);
                   text-align: center; }
.shop-cclist__hd span:nth-child(2) { text-align: left; }
.shop-cclist { border-top: 1px solid var(--shop-line); margin-top: var(--shop-s3); }
.shop-cclist li { border-bottom: 1px solid var(--shop-line-2); }
.shop-cclist a { padding: 14px var(--shop-s4); color: var(--shop-ink-2); }
.shop-cclist a:hover .shop-cclist__t { color: var(--shop-ink);
                                       text-decoration: underline; text-underline-offset: 3px; }
.shop-cclist__c { text-align: center; }
.shop-cclist__c em { display: inline-block; padding: 3px 9px; border-radius: 999px;
                     background: var(--shop-accent-soft); color: var(--shop-accent-ink);
                     font-size: var(--shop-fs-xs); font-style: normal;
                     font-weight: var(--shop-fw-bold); }
.shop-cclist__t { min-width: 0; font-size: var(--shop-fs-md);
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-cclist__d { font-size: var(--shop-fs-sm); color: var(--shop-ink-4);
                  font-variant-numeric: tabular-nums; text-align: center; }

/* ── §12 FAQ — 분류 필터 + 아코디언 ── */
.shop-ccfil { display: flex; flex-wrap: wrap; gap: var(--shop-s2);
              margin-bottom: var(--shop-s5); }
.shop-ccfil__c { display: inline-flex; align-items: center; min-height: var(--shop-ctrl-sm);
                 padding: 0 var(--shop-s4); border: 1px solid var(--shop-line);
                 border-radius: 999px; background: var(--shop-bg);
                 font-size: var(--shop-fs-sm); color: var(--shop-ink-2); }
.shop-ccfil__c:hover { border-color: var(--shop-ink-4); color: var(--shop-ink); }
.shop-ccfil__c.is-on { border-color: var(--shop-accent); background: var(--shop-accent-soft);
                       color: var(--shop-accent-ink); font-weight: var(--shop-fw-bold); }
.shop-ccfaq { border-top: 1px solid var(--shop-line); }
.shop-ccfaq li { border-bottom: 1px solid var(--shop-line-2); }
.shop-ccfaq__i > summary { display: flex; align-items: center; gap: var(--shop-s3);
                           padding: 15px 34px 15px 4px; cursor: pointer; position: relative;
                           list-style: none; }
.shop-ccfaq__i > summary::-webkit-details-marker { display: none; }
/* 펼침 표시 — 열리면 돌아간다 */
.shop-ccfaq__i > summary::after { content: ""; position: absolute; right: 10px; top: 50%;
                                  width: 8px; height: 8px; margin-top: -6px;
                                  border-right: 1.6px solid var(--shop-ink-3);
                                  border-bottom: 1.6px solid var(--shop-ink-3);
                                  transform: rotate(45deg);
                                  transition: transform var(--shop-t); }
.shop-ccfaq__i[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.shop-ccfaq__q { flex: 1 1 auto; min-width: 0; font-size: var(--shop-fs-md);
                 font-weight: var(--shop-fw-med); color: var(--shop-ink); }
.shop-ccfaq__c { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px;
                 background: var(--shop-bg-soft); color: var(--shop-ink-3);
                 font-size: var(--shop-fs-xs); font-style: normal; }
.shop-ccfaq__a { padding: 0 34px 18px 4px; font-size: var(--shop-fs-sm);
                 color: var(--shop-ink-2); line-height: 1.75; }
.shop-ccfaq__a p + p, .shop-ccfaq__a ul { margin-top: var(--shop-s3); }
.shop-ccfaq__a li { border: 0; padding-left: 14px; position: relative; }
.shop-ccfaq__a li::before { content: "·"; position: absolute; left: 4px; }
.shop-ccfaq__more a { font-size: var(--shop-fs-xs); color: var(--shop-accent-ink); }
.shop-ccfaq__more a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── §16 우측 보조영역 ── */
/* 레퍼런스 실측: 카드 위 테두리에서 제목까지 **56px**(우리 41). 안쪽을 넓힌다. */
.shop-ccbox { padding: var(--shop-s6) var(--shop-s5); border: 1px solid var(--shop-line);
              border-radius: var(--shop-radius-lg); background: var(--shop-bg); }
.shop-ccbox__h { display: flex; align-items: baseline; gap: var(--shop-s3);
                 margin-bottom: var(--shop-s4); }
.shop-ccbox h2 { font-size: var(--shop-fs-lg); font-weight: var(--shop-fw-bold); }
.shop-ccbox__more { margin-left: auto; font-size: var(--shop-fs-xs);
                    color: var(--shop-ink-3); white-space: nowrap; }
.shop-ccbox__more:hover { color: var(--shop-ink); }
.shop-ccbox__lead { font-size: var(--shop-fs-sm); color: var(--shop-ink-3);
                    margin-bottom: var(--shop-s3); }
/* 레퍼런스 실측: 항목 사이 **50px**(시트 60.5 ×1.2834 환산). 우리는 34 였다 —
   같은 자리에 다섯 줄을 넣어도 레퍼런스 쪽이 훨씬 여유 있게 읽힌다. */
.shop-cctop li + li { margin-top: 18px; }
.shop-cctop a { display: flex; align-items: flex-start; gap: var(--shop-s3);
                color: var(--shop-ink-2); font-size: var(--shop-fs-sm); }
.shop-cctop a:hover .shop-cctop__t { color: var(--shop-ink);
                                     text-decoration: underline; text-underline-offset: 3px; }
/* 레퍼런스 실측: 번호 배지는 **브랜드색 채움 + 흰 숫자**(시트 (757,570) = 옛 브라운 #9a683f).
   앞 판은 옅은 배경 + 브라운 숫자라 목록에서 번호가 거의 안 읽혔다. */
.shop-cctop__n { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
                 width: 22px; height: 22px; border-radius: 999px;
                 background: var(--shop-accent); color: #fff;
                 font-size: var(--shop-fs-xs); font-weight: var(--shop-fw-bold); }
.shop-cctop__t { flex: 1 1 auto; min-width: 0; line-height: 1.45; }
.shop-cctop__note { margin-top: var(--shop-s4); font-size: var(--shop-fs-xs);
                    color: var(--shop-ink-4); }
/* 레퍼런스의 빠른 상담 카드는 **흰 바탕 + 테두리**다(위 TOP5 카드와 같은 표면).
   우리는 베이지로 칠해 두 카드의 격이 달라 보였다 — 레퍼런스에 맞춘다. */
.shop-ccbox--call { background: var(--shop-bg); border-color: var(--shop-line); }
/* 레퍼런스에서 전화번호는 카드의 주인공이다(글자 높이 ~34px). 우리는 26 이라 작았다. */
.shop-cccall__tel { margin: var(--shop-s3) 0 var(--shop-s2); font-size: 32px;
                    font-weight: var(--shop-fw-black); letter-spacing: -0.02em; }
.shop-cccall__tel a { color: var(--shop-ink); }
.shop-cccall__h { font-size: var(--shop-fs-sm); color: var(--shop-ink-2); line-height: 1.6; }
.shop-cccall__act { margin: var(--shop-s4) 0 var(--shop-s3); }
.shop-cccall__act .shop-btn { width: 100%; justify-content: center; }
.shop-cccall__mail { font-size: var(--shop-fs-xs); color: var(--shop-ink-3); }
.shop-cccall__mail a { color: var(--shop-accent-ink); text-decoration: underline;
                       text-underline-offset: 3px; }

/* ── §17 하단 이용안내 — 아이보리 밴드 · 아이콘 4칸 ──
   레퍼런스 03 실측: 화면 끝까지 가는 띠가 **아니다.** 본문과 같은 폭(시트 x 72→1050)의
   **둥근 인셋 패널**이다. 앞 판은 full-bleed 라 아래쪽이 페이지에서 뚝 떨어져 보였다.
   패널 바탕은 옅은 면(--shop-bg-soft) · 칸 사이 얇은 세로 구분선 · 아이콘은 큼직한 선 아이콘. */
.shop-ccguide { margin-bottom: var(--shop-section-gap);
                padding: var(--shop-s7) var(--shop-s5);
                background: var(--shop-bg-soft); border-radius: var(--shop-radius-lg); }
.shop-ccguide__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
                      gap: 0; }
.shop-ccguide__list li { padding: 0 var(--shop-s5); position: relative; }
.shop-ccguide__list li + li::before { content: ""; position: absolute; left: 0; top: 6%;
                                      bottom: 6%; width: 1px; background: var(--shop-line); }
.shop-ccguide__list a { display: grid; grid-template-columns: auto minmax(0, 1fr);
                        column-gap: var(--shop-s4); align-items: start; }
.shop-ccguide__ico { display: inline-flex; }
/* 레퍼런스의 아이콘은 글보다 확실히 크다(시트 ~36px → 설계 ~46px). */
/* 레퍼런스의 아이콘은 글보다 확실히 크고 선도 굵다.
   ⚠️ **도안을 베끼지 않는다.** 레퍼런스 아이콘은 우리 저작물이 아니다. 크기와 선 굵기만
      같은 계열로 맞추고 모양은 직접 그린 것을 쓴다. */
.shop-ccguide__ico svg { width: 52px; height: 52px; fill: none; stroke: var(--shop-ink);
                         stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.shop-ccguide__b { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.shop-ccguide__b strong { font-size: var(--shop-fs-md); color: var(--shop-ink); }
.shop-ccguide__b > span { font-size: var(--shop-fs-sm); color: var(--shop-ink-2); line-height: 1.55; }
.shop-ccguide__b em { font-size: var(--shop-fs-xs); font-style: normal;
                      color: var(--shop-accent-ink); font-weight: var(--shop-fw-bold); }
.shop-ccguide__list a:hover .shop-ccguide__b em { text-decoration: underline;
                                                  text-underline-offset: 3px; }

/* 두 열일 때만: 글이 적으면 좌측이 두 줄로 끝나 우측(≈550px)과 높이가 크게 벌어진다.
   ⚠️ 글을 지어내서 채우지 않는다. 본문 칸에 바닥만 줘서 "조판이 무너진 것"처럼 보이지 않게 한다.
   ⚠️ **한 열이 되는 좁은 화면에는 걸지 않는다** — 거기서는 목록과 보조영역 사이에
      빈 320px 이 그대로 생긴다(실측: 390 에서 목록 아래 큰 구멍). */
@media (min-width: 1025px) {
    .shop-cc__main { min-height: 320px; }
}
@media (max-width: 1024px) {
    .shop-cc { grid-template-columns: minmax(0, 1fr); }
    /* 보조영역이 아래로 내려오면 sticky 는 의미가 없다 — 풀어 준다 */
    .shop-cc__side { position: static; flex-direction: row; flex-wrap: wrap; }
    .shop-cc__side > .shop-ccbox { flex: 1 1 280px; }
}
@media (max-width: 860px) {
    /* [§18] 모바일 레퍼런스 04 — 탭이 넷이라 한 줄에 안 들어간다.
       ⚠️ 글자를 줄이거나 자르지 않는다. 가로로 밀어서 본다. */
    .shop-hero.shop-hero--cc { min-height: 240px; }
    /* ⚠️ 캐스케이드 함정(이 프로젝트에서 네 번째). 공용 모바일 규칙
          `.shop-hero--full .shop-hero__lead`(0,2,0) 는 `.shop-hero.shop-hero--cc .shop-hero__lead`
          (0,3,0) 를 이기지 못한다. 그래서 390 에서 안내 문장이 **사진 틀 아래로 파고들었다**(실측).
          같은 무게로 다시 적어 눌러 준다 — 글은 사진 왼쪽에 머무른다. */
    .shop-hero.shop-hero--cc .shop-hero__lead { max-width: 62%; }
    .shop-hero.shop-hero--cc .shop-cc__hours { max-width: 62%; }
    /* 상담시간 두 토막을 좁은 화면에서 **세로로 쌓는다.**
       ⚠️ 가로 구분선은 절대배치라, 줄이 바뀌면 두 번째 줄 **앞에 홀로 남는다**(실측: 390 에서
          `| 토/일/공휴일 상담가능`). 쌓을 때는 구분선을 없앤다. */
    .shop-hero.shop-hero--cc .shop-cc__hours { flex-direction: column; gap: 2px; }
    .shop-cc__hours span + span::before { content: none; }
    /* [§2] 빈 사진 틀 — 좁은 화면에서는 **테두리를 지운다.**
       데스크톱에서는 틀이 보여야 사진 자리를 알 수 있지만, 390 에서는 그 선이 안내 문장과
       바로 부딪혀 글이 상자에 갇힌 것처럼 보인다(실측). 영역의 폭·비율은 그대로 둔다 —
       사진이 들어오면 조판이 움직이지 않는다. 안내 칩은 위로 올려 문장을 비켜 준다. */
    .shop-hero--full .shop-hero__visual--empty { box-shadow: none;
                                                 align-items: flex-start; padding-top: var(--shop-s5); }
    .shop-ccfind__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--shop-s3); }
    .shop-ccfind__i { padding: var(--shop-s4); }
    /* [§18] 모바일 레퍼런스 04 의 탭은 **붙은 한 덩어리가 아니라 떨어진 알약**이다.
       ⚠️ 앞 판은 가로 스크롤이라 넷째 칸(시공사례)이 화면 밖에서 잘려 보였다(실측).
          §8 이 네 개를 요구하므로 두 줄로 나눠 **넷 다 보이게** 한다. */
    .shop-cctabs { grid-template-columns: repeat(2, minmax(0, 1fr));
                   gap: var(--shop-s2); border: 0; background: none;
                   border-radius: 0; overflow: visible; }
    .shop-cctabs__t { min-height: 44px; padding: 0 var(--shop-s3);
                      border: 1px solid var(--shop-line); border-radius: var(--shop-radius);
                      background: var(--shop-bg); }
    .shop-cctabs__t + .shop-cctabs__t { border-left: 1px solid var(--shop-line); }
    .shop-cctabs__t.is-on { border-color: var(--shop-accent); }
    .shop-cc__side { flex-direction: column; }
    .shop-ccguide { padding: var(--shop-s6) var(--shop-s4); }
    .shop-ccguide__list { grid-template-columns: repeat(2, minmax(0, 1fr));
                          row-gap: var(--shop-s5); }
    .shop-ccguide__list li { padding: 0 var(--shop-s3); }
    .shop-ccguide__list li + li::before { content: none; }
    .shop-ccguide__ico svg { width: 32px; height: 32px; }
    /* [§18] 레퍼런스 04 의 모바일 목록은 **표가 아니다** — 분류 배지·제목·날짜가 한 줄에 붙는다.
       머리줄은 좁은 화면에서 자리만 먹고 읽히지 않으므로 감춘다(내용이 아니라 시각 보조였다). */
    .shop-cclist__hd { display: none; }
    .shop-cclist a { grid-template-columns: auto minmax(0, 1fr) auto;
                     column-gap: var(--shop-s3); padding-inline: 2px; }
    .shop-cclist__c { text-align: left; }
    .shop-cclist__d { text-align: right; }
    .shop-cclist__t { white-space: normal; }
}

/* ══════════════════════════════════════════════════════════════════════════
   [Owner Audit Batch 1B §9~§13·§23] 견적문의 — 탑디몰이 소유하는 화면.

   조판 원칙
     · 좌 = 입력, 우 = 요약·제출. 상품상세와 **같은 리듬**이다. 회사에서 넘어온 고객이
       다른 사이트에 온 것처럼 느끼지 않아야 한다(§23 Shop visual continuity).
     · 택배차광고 화면은 회사 화면과 **같은 id·같은 스크립트**를 쓴다. 그래서 스크립트가
       만들어 넣는 `tq-est__` 계열 클래스도 여기서 함께 정의한다 — 그 이름을 바꾸면
       금액 상자가 통째로 스타일을 잃는다.
   ⚠️ 새 색·새 반지름을 만들지 않는다. 전부 기존 토큰이다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 문의 유형 줄 ── */
.shop-qtypes { display: flex; flex-wrap: wrap; gap: var(--shop-s2); margin-bottom: var(--shop-s5); }
.shop-qtype { display: inline-flex; align-items: center; min-height: var(--shop-ctrl);
              padding: 0 var(--shop-s4); border: 1px solid var(--shop-line);
              border-radius: 999px; background: var(--shop-bg);
              font-size: var(--shop-fs-sm); color: var(--shop-ink-2); }
.shop-qtype:hover { border-color: var(--shop-accent); color: var(--shop-accent-ink); }
.shop-qtype.is-on { background: var(--shop-accent); border-color: var(--shop-accent);
                    color: #fff; font-weight: var(--shop-fw-bold); }

/* 어느 상품에서 왔는지 — [§9] 글자 한 줄이던 것을 **대표 비주얼 블록**으로 올렸다.
   ⚠️ `.shop-qfrom` 규칙은 남겨 둔다. 택배차광고 화면 등 다른 분기가 아직 그 클래스를 쓴다면
      지우는 순간 조판이 무너진다 — 실제로 쓰는 곳이 없어질 때 함께 정리한다. */
.shop-qfrom { margin: calc(-1 * var(--shop-s3)) 0 var(--shop-s5);
              font-size: var(--shop-fs-sm); color: var(--shop-ink-2); }
/* ── [Shop UI Follow-up §9] 문의 대상 상품 — 흰 카드 위 큰 비주얼 ──
   실측 근거: 앞 판은 사진이 **아예 없었고** 이름만 14px 한 줄이었다. 고객은 자기가 무엇에
   대해 문의하는지 보지 못한 채 폼을 채웠다.
   ⚠️ 폼보다 커지면 안 된다. 이 화면의 주인공은 입력이다 — 비주얼은 300px 로 고정하고
      본문이 남은 폭을 갖는다(1440 실측 300×225, 앞 판 대비 새로 생긴 영역).
   ⚠️ 사진이 없을 때도 같은 크기의 자리표시자가 선다. 빈 칸을 남기지 않는다. */
/* ⚠️ 폭을 본문 전체(1240)로 두면 **오른쪽이 통째로 빈다**(1440 실측: 글이 왼쪽 40% 만 채움).
      상품명과 한 줄 설명은 짧아서 폭을 못 메운다 — 카드를 줄여 여백이 구멍이 아니라
      테두리 안쪽 여백으로 읽히게 한다. §9 "과도한 빈 여백 제거". */
.shop-qsubj { display: grid; grid-template-columns: 340px minmax(0, 1fr);
              gap: var(--shop-s5); align-items: center; max-width: 860px;
              margin: calc(-1 * var(--shop-s2)) 0 var(--shop-s6);
              padding: var(--shop-s5); background: var(--shop-bg);
              border: 1px solid var(--shop-line); border-radius: var(--shop-radius-lg); }
.shop-qsubj__visual { display: block; width: 100%; aspect-ratio: var(--shop-card-ratio);
                      overflow: hidden; border-radius: var(--shop-radius);
                      background: var(--shop-bg-soft); }
.shop-qsubj__visual img { display: block; width: 100%; height: 100%;
                          object-fit: cover; object-position: center; }
.shop-qsubj__visual .shop-ph__mark { font-size: clamp(18px, 2.6vw, 28px); }
.shop-qsubj__body { min-width: 0; }
.shop-qsubj__eyebrow { margin: 0 0 6px; font-size: var(--shop-fs-xs);
                       font-weight: var(--shop-fw-med); color: var(--shop-accent-ink);
                       letter-spacing: .02em; }
.shop-qsubj__name { margin: 0; font-size: var(--shop-fs-2xl); font-weight: var(--shop-fw-bold);
                    color: var(--shop-ink); letter-spacing: -0.01em; }
.shop-qsubj__lead { margin: var(--shop-s2) 0 0; font-size: var(--shop-fs-md);
                    color: var(--shop-ink-3); line-height: 1.55; }

/* ── 두 열 ── */
.shop-quote__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px;
                    gap: var(--shop-s6); align-items: start; }
.shop-quote__main { min-width: 0; }
.shop-quote__side { position: sticky; top: 172px; }
.shop-qcard { border: 1px solid var(--shop-line); border-radius: var(--shop-radius-lg);
              background: var(--shop-bg-soft); padding: var(--shop-s5); }
.shop-quote__h { font-size: var(--shop-fs-lg); font-weight: var(--shop-fw-bold);
                 margin: 0 0 var(--shop-s2); color: var(--shop-ink); }
.shop-quote__h--card { margin-bottom: var(--shop-s3); }
.shop-quote__sub { font-size: var(--shop-fs-md); font-weight: var(--shop-fw-bold);
                   margin: var(--shop-s5) 0 4px; }
.shop-quote__hint { font-size: var(--shop-fs-xs); color: var(--shop-ink-4); margin: 0 0 var(--shop-s4); }
/* ══ [V36G.1 Mobile Rhythm §2·§11] 견적문의도 같은 함정이었다 ══
   위 세 줄의 여백은 전부 `margin` **단축 속성**(0,1,0)이라 초기화 `.shop h2/h3`·`.shop p`(0,1,1)에
   눌려 죽어 있었다. 실측(390·1440 동일):
     · `제작 정보를 입력해 주세요` → 첫 입력칸  **0px**  (제목이 라벨에 붙어 읽힌다)
     · `문의 내용` 칸 → 다음 섹션 제목        **0px**  (섹션 경계가 사라진다)
   ⚠️ 값을 새로 짓지 않았다 — 이미 적혀 있던 값을 살리고, **없던 것은 섹션 사이 간격 하나**다.
      §1 기준: 제목↔컨트롤 8~12 · 큰 섹션 사이 32~40. */
.shop .shop-quote__h    { margin-bottom: var(--shop-s3); }
.shop .shop-quote__sub  { margin: var(--shop-s5) 0 4px; }
.shop .shop-quote__hint { margin-bottom: var(--shop-s4); }
/* 두 번째 이후의 섹션 제목은 앞 블록과 확실히 떨어뜨린다 — 첫 제목에는 붙지 않는다 */
.shop .shop-quote__main > * + .shop-quote__h { margin-top: var(--shop-s6); }

/* ── 입력 ── */
.shop-qfields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: var(--shop-s4); margin-bottom: var(--shop-s4); }
.shop-qfield { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.shop-qfield--full { grid-column: 1 / -1; }
.shop-qfield label { font-size: var(--shop-fs-sm); font-weight: var(--shop-fw-bold); color: var(--shop-ink-2); }
.shop-qfield input, .shop-qfield select, .shop-qfield textarea {
    width: 100%; min-height: var(--shop-ctrl); padding: 10px var(--shop-s3);
    border: 1px solid var(--shop-line); border-radius: var(--shop-radius-sm);
    background: var(--shop-bg); font: inherit; font-size: var(--shop-fs-md); color: var(--shop-ink); }
.shop-qfield textarea { min-height: 132px; line-height: 1.6; resize: vertical; }
.shop-qfield input:focus-visible, .shop-qfield select:focus-visible, .shop-qfield textarea:focus-visible {
    outline: 2px solid var(--shop-accent); outline-offset: 1px; }
.shop-req { color: var(--shop-warn); }
.shop-err { margin: 0; font-size: var(--shop-fs-xs); color: var(--shop-warn); }
.shop-qnum { position: relative; display: block; }
.shop-qnum__u { position: absolute; right: var(--shop-s3); top: 50%; transform: translateY(-50%);
                font-size: var(--shop-fs-sm); color: var(--shop-ink-4); font-style: normal; }
.shop-qnum input { padding-right: 46px; }
/* 자동 제출 미끼 — 눈에도 스크린리더에도 보이지 않아야 한다 */
.shop-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── 동의·제출 ── */
.shop-qconsent { margin: var(--shop-s5) 0 var(--shop-s3); }
.shop-qcheck { display: flex; gap: var(--shop-s2); align-items: flex-start;
               font-size: var(--shop-fs-sm); color: var(--shop-ink-2); line-height: 1.55; }
.shop-qcheck input { margin-top: 3px; flex: 0 0 auto; width: 18px; height: 18px; }
.shop-quote__cta { width: 100%; }
.shop-quote__cta[disabled] { opacity: .55; cursor: not-allowed; }
.shop-quote__gate { margin: var(--shop-s2) 0 0; font-size: var(--shop-fs-xs); color: var(--shop-ink-3); }
.shop-quote__contact { margin: var(--shop-s3) 0 0; font-size: var(--shop-fs-xs); color: var(--shop-ink-3); }
.shop-qnotes { margin: 0 0 var(--shop-s4); padding: 0; list-style: none;
               display: flex; flex-direction: column; gap: var(--shop-s2); }
.shop-qnotes li { font-size: var(--shop-fs-sm); color: var(--shop-ink-2); line-height: 1.55; }
.shop-result__t { font-size: var(--shop-fs-xl); margin: 0 0 var(--shop-s2); }

/* ── 택배차광고 예상견적 ──
   ⚠️ 아래 `tq-est__` 계열은 **스크립트가 만들어 넣는 이름**이다(assets/js/quote-truck.js).
      이름을 바꾸면 금액 상자가 통째로 스타일을 잃는다. */
.shop-qest { border: 1px solid var(--shop-line); border-radius: var(--shop-radius);
             background: var(--shop-bg); padding: var(--shop-s4); }
.shop-qest .tq-est__head { margin: 0 0 var(--shop-s3); font-size: var(--shop-fs-sm);
                           font-weight: var(--shop-fw-bold); color: var(--shop-ink-2); }
.shop-qest .tq-est__badge { display: inline-block; margin-left: 6px; padding: 2px 8px;
                            border-radius: 999px; background: var(--shop-accent-soft);
                            color: var(--shop-accent-ink); font-size: var(--shop-fs-xs); }
.shop-qest .tq-est__rows { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.shop-qest .tq-est__rows > div { display: flex; justify-content: space-between; gap: var(--shop-s3); }
.shop-qest dt { margin: 0; font-size: var(--shop-fs-sm); color: var(--shop-ink-3); }
.shop-qest dd { margin: 0; font-size: var(--shop-fs-sm); color: var(--shop-ink); text-align: right; }
.shop-qest .tq-est__total { margin-top: var(--shop-s3); padding-top: var(--shop-s3);
                            border-top: 1px solid var(--shop-line); align-items: baseline; }
.shop-qest .tq-est__total dt { font-weight: var(--shop-fw-bold); color: var(--shop-ink); }
.shop-qest .tq-est__total dd { font-size: var(--shop-fs-xl); font-weight: var(--shop-fw-black);
                               color: var(--shop-price); letter-spacing: -0.03em; }
.shop-qest .tq-est__vat { display: block; font-size: var(--shop-fs-xs); font-weight: var(--shop-fw-med);
                          color: var(--shop-ink-4); letter-spacing: 0; }
.shop-qest .tq-est__note, .shop-qest .tq-est__empty {
    margin: var(--shop-s3) 0 0; font-size: var(--shop-fs-xs); color: var(--shop-ink-3); line-height: 1.5; }
.shop-qpreview { margin: 0; padding: var(--shop-s3); border: 1px solid var(--shop-line);
                 border-radius: var(--shop-radius-sm); background: var(--shop-bg);
                 font: inherit; font-size: var(--shop-fs-xs); color: var(--shop-ink-2);
                 line-height: 1.6; white-space: pre-wrap; word-break: break-word;
                 max-height: 200px; overflow: auto; }

/* 모바일 하단 바 — 데스크톱에서는 스크립트가 hidden 을 유지한다 */
.shop-qmbar { display: none; }

@media (max-width: 1024px) {
    .shop-quote__grid { grid-template-columns: minmax(0, 1fr); gap: var(--shop-s5); }
    .shop-quote__side { position: static; }
}
@media (max-width: 720px) {
    /* [V36G.1 §1] 한 열로 쌓이면 12px 은 라벨과 앞 칸이 한 덩어리로 보인다.
       세로로만 쌓이는 폭이므로 §1 의 "필드 ↔ 다음 필드 18~24" 를 따른다.
       ⚠️ 데스크톱 2열의 16px 은 그대로 둔다 — 거기서는 행 사이가 아니라 격자 간격이다. */
    .shop-qfields { grid-template-columns: minmax(0, 1fr); gap: var(--shop-s5); }
    /* [§9] 좁은 화면에서는 비주얼이 폭을 다 쓴다 — 옆에 붙이면 둘 다 눌린다.
       ⚠️ 여기서도 줄이지 않는다. 사장님 지시: 모바일에서 이미지가 축소되면 안 된다. */
    .shop-qsubj { grid-template-columns: minmax(0, 1fr); gap: var(--shop-s4);
                  padding: var(--shop-s4); }
    .shop-qtypes { gap: 6px; }
    .shop-qtype { padding: 0 var(--shop-s3); font-size: var(--shop-fs-xs); }
    /* 하단 고정 바 — 상품상세 구매바와 같은 규약이다 */
    .shop-qmbar:not([hidden]) { display: flex; align-items: center; gap: var(--shop-s3);
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        padding: var(--shop-s3) var(--shop-gutter);
        background: var(--shop-bg); border-top: 1px solid var(--shop-line);
        box-shadow: 0 -2px 10px rgba(16, 24, 40, .06); }
    .shop-qmbar__p { margin: 0; flex: 1 1 auto; font-size: var(--shop-fs-sm);
                     font-weight: var(--shop-fw-bold); color: var(--shop-ink); }
    .shop-qmbar .shop-btn { flex: 0 0 auto; }
    body.shop-p-quote .shop-main { padding-bottom: 96px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   [V36G.1 R2] Home 모바일 재조판 — 레퍼런스 4번(`ref/홈페이지UI 레퍼런스/
   ecfddc46-6c49-4384-9ec0-d63e36912139.png`)을 **조판의 권위**로 삼는다.

   왜 다시 짜는가(지시서 §0) —
     앞 판(Home Fidelity)은 "모바일에서는 정보 계층을 지키려면 세로로 편다" 는 판단으로
     정보띠·하단블록을 **전부 1열로 무너뜨렸고**, 가로 줄의 카드 폭을 168~179px 로 크게
     잡아 한 화면에 2.1~2.2장만 보이게 했다(390 실측). 그 판단은 이번 지시로 폐기됐다.
     사장님 지시: "모바일은 PC를 크게 읽기 쉽게 만든 화면이 아니다. 레퍼런스처럼 카드와
     폰트가 작더라도 한 화면에 충분한 정보를 밀도 있게 보여주는 것이 맞다."

   레퍼런스 실측(화면 폭 725 img px = 390 CSS px, 배율 1.859) —
     · 게이트웨이  6칸이 **한 줄**. 타일 ≈45px · 간격 ≈20px · 가로 스크롤 없음
     · 추천 상품   카드 ≈84px · 간격 ≈15px · 왼쪽 여백 ≈10px → **정확히 4장**이 폭을 채운다
     · 정보띠      둥근 상자 하나 안에 **3열** · 아이콘 왼쪽 · 글자 오른쪽
     · 하단        고객센터 | 공지탭 **2열**
     · 다크 푸터   화면 끝

   ⚠️ 레퍼런스의 **글자 크기는 그대로 옮길 수 없다.** 실측하면 카테고리 이름 4글자가
      29 CSS px(자당 7.3px)이다 — 390px 화면에서 7px 글자는 읽히지 않는다. 그 목업은
      넓은 레이아웃을 폰 프레임에 넣어 그린 그림이라 타이포가 비례적으로 작다.
      그래서 **열 구성·칸 수·배치는 레퍼런스를 따르고, 글자는 읽히는 최소값**을 쓴다
      (지시서 §3: "실제 읽을 수 있어야 함"). 실제 값은 보고서 §3 표에 적었다.

   ⚠️ 이 블록은 파일 **맨 뒤**다. shop.css 는 같은 명시도면 "미디어쿼리 안" 이 아니라
      "파일에서 뒤" 가 이긴다 — 앞 판에서 top-level 규칙(3774·3775·3776)이 @media 규칙
      (3128·3133·3135)을 통째로 무력화한 사고가 실제로 있었다. 여기가 마지막이므로
      앞의 어떤 규칙보다 뒤에 온다. 그래도 순서에만 기대지 않고 `.shop-main` 접두사로
      명시도를 한 단계 올려 둔다.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
    /* ── 세로 리듬 — 레퍼런스는 섹션 사이가 좁다. 44 → 32 ── */
    body.shop-p-home { --shop-section-gap: 32px; }

    /* ── 머리 — 여백만 줄인다. 검색칸·아이콘의 **터치 크기(44px)는 줄이지 않는다**
           (§13: 44px 규칙을 이유로 카드를 키우지도, 반대로 터치를 죽이지도 않는다). ── */
    .shop-header .shop-brandbar__in { padding-block: 10px; gap: var(--shop-s2); }
    .shop-header .shop-brandbar .shop-logo { font-size: 19px; }
    .shop-header .shop-brandbar .shop-search input,
    .shop-header .shop-brandbar .shop-search button { height: 44px; }

    /* ── 히어로 — 레퍼런스 ≈167px. 우리는 읽히는 글자를 쓰므로 그보다 크지만,
           400px 에서 크게 줄인다. 사진이 들어와도 자리가 안 바뀐다. ── */
    body.shop-p-home .shop-main .shop-hero.shop-hero--full { min-height: 248px; }
    body.shop-p-home .shop-main .shop-hero--full .shop-hero__in { padding: var(--shop-s5) 0 var(--shop-s7); }
    body.shop-p-home .shop-main .shop-hero--full .shop-hero__eyebrow { margin-bottom: var(--shop-s2);
                                                      font-size: var(--shop-fs-sm); }
    body.shop-p-home .shop-main .shop-hero--full h1,
    body.shop-p-home .shop-main .shop-hero--full .shop-hero__t { font-size: 22px; line-height: 1.28;
                                                max-width: 68%; }
    body.shop-p-home .shop-main .shop-hero--full .shop-hero__lead { margin-top: var(--shop-s2);
                                                   font-size: var(--shop-fs-xs);
                                                   line-height: 1.5; max-width: 62%; }
    body.shop-p-home .shop-main .shop-hero--full .shop-hero__cta { margin-top: var(--shop-s4); }
    body.shop-p-home .shop-main .shop-hero--full .shop-hero__cta .shop-btn { font-size: var(--shop-fs-sm); }

    /* ── 섹션 제목 줄 ── */
    body.shop-p-home .shop-main .shop-cats .shop-section__head { margin-bottom: var(--shop-s3); }
    body.shop-p-home .shop-main .shop-cats .shop-section__head h2 { font-size: var(--shop-fs-lg); }
    body.shop-p-home .shop-main .shop-cats .shop-section__more { font-size: var(--shop-fs-xs); }

    /* ══ 게이트웨이(프리미엄 서비스) — **6칸 한 줄. 가로 스크롤 없음** ══
       앞 판은 화면 끝까지 미는 가로 rail(카드 168px)이라 2.23칸만 보였다.
       레퍼런스는 6칸이 전부 한 화면에 있다. */
    body.shop-p-home .shop-main .shop-cats--prem { margin-inline: 0; }
    body.shop-p-home .shop-main .shop-cats--prem .shop-promo--prem {
        display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 6px; flex-wrap: nowrap;
        overflow: visible; margin-inline: 0; padding-inline: 0; padding-bottom: 0; }
    body.shop-p-home .shop-main .shop-cats--prem .shop-promo--prem > .shop-promo__item {
        flex: none; min-width: 0; padding: 0;
        border: 0; background: none; box-shadow: none; border-radius: 0; }
    body.shop-p-home .shop-main .shop-cats--prem .shop-promo--prem .shop-promo__visual {
        order: -1; margin: 0 0 5px; aspect-ratio: 1 / 1;
        border: 1px solid var(--shop-line); border-radius: var(--shop-radius);
        box-shadow: var(--shop-shadow-sm); background: var(--shop-bg); }
    /* 레퍼런스의 타일 글자는 **가운데 정렬**이다(데스크톱 카드는 왼쪽 정렬 — 다르다) */
    body.shop-p-home .shop-main .shop-cats--prem .shop-promo--prem .shop-promo__body {
        min-height: 0; padding: 0; gap: 2px;
        align-items: center; text-align: center; }
    body.shop-p-home .shop-main .shop-cats--prem .shop-promo--prem .shop-promo__name {
        font-size: 11px; font-weight: var(--shop-fw-bold); line-height: 1.25;
        letter-spacing: -0.03em; }
    /* ⚠️ 한 줄 설명을 **감춘다.** 레퍼런스의 보조문구는 `실내외 대형출력`처럼 5~11자인데
          우리 것은 `전국 택배차·탑차에 브랜드를 싣고 달리는 이동형 광고`(27자)다.
          54px 칸에서 6줄이 된다. 문구를 짧게 **지어내는 것은 금지**(§1)이므로 감춘다.
          이미 승인된 "Home 부연설명 최소화"(§6)와 같은 방향이고, 데스크톱에서는 그대로 나온다. */
    body.shop-p-home .shop-main .shop-cats--prem .shop-promo--prem .shop-promo__lead { display: none; }
    body.shop-p-home .shop-main .shop-cats--prem .shop-promo--prem .shop-promo__price {
        margin-top: 1px; padding-top: 0; font-size: 10px; font-weight: var(--shop-fw-bold);
        letter-spacing: -0.04em; line-height: 1.3; }
    /* 상담 칸 표식 — 이름 옆이 아니라 **아랫줄**이다. 옆에 두면 이름이 한 글자씩 접힌다. */
    body.shop-p-home .shop-main .shop-cats--prem .shop-promo--prem .shop-promo__tag {
        display: block; margin: 1px 0 0; padding: 1px 5px; font-size: 9px; line-height: 1.4; }

    /* ══ 사진이 아직 0장이다 — 작은 타일 안의 자리표시자 **글자를 감춘다** ══
       실측 결함(390): 55px 타일 안에서 `.shop-ph__mark`(최소 14px)와
       `.shop-ph__cap`(`상품 이미지 준비 중`)이 타일 밖으로 흘러나와 이웃 칸·섹션 제목과
       **8군데 겹쳤다.** 글자를 9px 까지 줄이면 겹침은 사라지지만 읽히지도 않는다.
       ⚠️ 정보 손실이 없다 — 자리표시자 전체가 `aria-hidden="true"` 이고,
          같은 이름이 **바로 아래 카드 제목**에 그대로 있다.
       ⚠️ 타일 자체(빗금 브랜드 면 + 테두리)는 남긴다. 사진이 들어오면 그 자리에 들어간다.
       ⚠️ 데스크톱·태블릿은 그대로다. 거기서는 타일이 커서 글자가 들어간다. */
    body.shop-p-home .shop-main .shop-cats--prem .shop-promo--prem .shop-ph__mark,
    body.shop-p-home .shop-main .shop-cats--prem .shop-promo--prem .shop-ph__cap,
    body.shop-p-home .shop-main .shop-cats--best .shop-promo--best .shop-ph__mark,
    body.shop-p-home .shop-main .shop-cats--best .shop-promo--best .shop-ph__cap { display: none; }
    body.shop-p-home .shop-main .shop-cats--prem .shop-promo--prem .shop-ph,
    body.shop-p-home .shop-main .shop-cats--best .shop-promo--best .shop-ph { padding: 0; gap: 0; }

    /* ══ BEST — 레퍼런스와 같은 **4장 가로 줄** ══
       앞 판은 44%(≈157px)라 2.1장이었다. 레퍼런스 실측은 카드 84 · 간격 15 · 왼쪽 여백 10 으로
       **4장이 390 폭을 정확히 채운다**. 우리는 좌우 여백이 16씩이라 폭 358 안에서
       카드 83 · 간격 8 로 잡아 같은 4.0장을 만든다. */
    body.shop-p-home .shop-main .shop-cats--best .shop-promo--best { gap: var(--shop-s2); }
    /* ⚠️ 고정 px 로 두면 폭마다 걸리는 장수가 튄다(390 에서 4.7 · 430 에서 4.8 실측).
          비율로 잡으면 **어느 폭에서도 4.2장** 으로 같다 — 레퍼런스의 4.0 에 가장 가깝고,
          0.2장이 걸쳐 보여 "옆으로 밀 수 있다" 가 눈에 남는다. */
    body.shop-p-home .shop-main .shop-cats--best .shop-promo--best > .shop-promo__item { flex: 0 0 22%; }
    body.shop-p-home .shop-main .shop-cats--best .shop-promo--best .shop-promo__body {
        padding: var(--shop-s2) 5px var(--shop-s3); gap: 3px; }
    body.shop-p-home .shop-main .shop-cats--best .shop-promo--best .shop-promo__name {
        font-size: 11px; line-height: 1.25; letter-spacing: -0.03em; }
    /* 위와 같은 이유 — BEST 설명도 `가로·세로를 직접 입력해 만드는 현수막입니다.`(22자)다.
       지시서 §4 가 "짧은 설명이 필요하면 최소화" 라고 했다. */
    body.shop-p-home .shop-main .shop-cats--best .shop-promo--best .shop-promo__lead { display: none; }
    body.shop-p-home .shop-main .shop-cats--best .shop-promo--best .shop-promo__price {
        margin-top: 2px; padding-top: 0; font-size: 11px; letter-spacing: -0.04em; }

    /* ══ 정보띠 — 1열 스택을 **2×2** 로 되돌린다 ══
       레퍼런스는 상자 하나 안에 3열이다. 우리 칸은 4개이므로 2×2 가 같은 뜻이다.
       ⚠️ 칸을 지우지 않는다(§1). 세로 스택(390 실측 418px)에서 밀도를 되찾는 것이 목적이다. */
    body.shop-p-home .shop-main .shop-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr));
                                   padding: var(--shop-s4) var(--shop-s3);
                                   row-gap: var(--shop-s4); column-gap: 0; }
    /* 글자 폭을 최대한 확보한다 — 칸이 좁을수록 설명이 잘게 접힌다 */
    body.shop-p-home .shop-main .shop-strip__list li,
    body.shop-p-home .shop-main .shop-strip__list li + li { padding: 0 var(--shop-s2); column-gap: var(--shop-s2);
                                           border-left: 0; border-top: 0; }
    /* 세로 구분선은 **오른쪽 칸 앞에만.** 1·3번 칸 앞에 그으면 상자 왼쪽 벽에 붙는다.
       (앞 판은 1열이면서 `li + li::before` 를 끄지 않아 가로 스택 위에 세로선이 남아 있었다) */
    body.shop-p-home .shop-main .shop-strip__list li + li::before { content: none; }
    body.shop-p-home .shop-main .shop-strip__list li:nth-child(even)::before { content: ""; position: absolute;
        left: 0; top: 4%; bottom: 4%; width: 1px; background: var(--shop-line); }
    body.shop-p-home .shop-main .shop-strip__list li:nth-child(even) { position: relative; }
    /* [Shop UI Follow-up 2차] 굵기를 여기서 덮지 않는다 — 덮으면 이 폭에서만 선 아이콘이
       다시 얇아진다(28px 기준 1.75px 대 채움 2.33px). 크기만 정한다. */
    body.shop-p-home .shop-main .shop-strip__i svg { width: 28px; height: 28px; }
    body.shop-p-home .shop-main .shop-strip__list strong { font-size: var(--shop-fs-sm); }
    body.shop-p-home .shop-main .shop-strip__list span:not(.shop-strip__i) { font-size: 11px; line-height: 1.5; }

    /* ══ 하단 — 1열 스택을 **2열** 로 되돌린다(레퍼런스) ══
       앞 판이 1열로 되돌린 이유는 "390에서 전화번호 한 줄이 안 들어간다" 였다.
       그건 전화번호가 26px 였기 때문이다. 레퍼런스 비율에 맞춰 글자를 줄이면 들어간다.
       세 번째 블록(주문 진행 안내)은 레퍼런스에 없는 우리 것이므로 **아래 전체폭**에 둔다. */
    /* ⚠️ `align-items: stretch` 를 되돌려 준다. 데스크톱은 3열이라 `start` 가 맞지만,
          2열에서는 두 카드 높이가 달라 오른쪽 아래가 비어 보인다(실측 299 vs 258).
          레퍼런스는 두 카드가 같은 높이다. */
    body.shop-p-home .shop-main .shop-lower { grid-template-columns: repeat(2, minmax(0, 1fr));
                             gap: var(--shop-s3); align-items: stretch; }
    body.shop-p-home .shop-main .shop-lower > section:last-child { grid-column: 1 / -1; }
    body.shop-p-home .shop-main .shop-cs,
    body.shop-p-home .shop-main .shop-cnews,
    body.shop-p-home .shop-main .shop-flow {
        padding: var(--shop-s3); }
    body.shop-p-home .shop-main .shop-cs h2,
    body.shop-p-home .shop-main .shop-cnews__head h2 { font-size: var(--shop-fs-sm); }
    body.shop-p-home .shop-main .shop-cs__tel { margin: 5px 0 3px; font-size: 19px; letter-spacing: -0.03em; }
    body.shop-p-home .shop-main .shop-cs__hours,
    body.shop-p-home .shop-main .shop-cs__note { font-size: 11px; line-height: 1.5; }
    body.shop-p-home .shop-main .shop-cs__act { margin-top: var(--shop-s3); gap: 5px; }
    body.shop-p-home .shop-main .shop-cs__act .shop-btn { flex: 1 1 100%; min-height: var(--shop-ctrl);
                                         padding: 0 var(--shop-s2); font-size: var(--shop-fs-xs); }
    /* 머리 줄 — `회사 콘텐츠` 와 `회사 홈페이지 ↗` 를 한 줄에 나란히 두면 173px 칸에서
       **둘 다 두 줄로 접혀** 머리만 57px 를 먹는다(실측). 링크를 아랫줄로 내린다.
       ⚠️ 링크를 지우지 않는다. 자리만 바꾼다. */
    body.shop-p-home .shop-main .shop-cnews__head { flex-wrap: wrap; row-gap: 2px; align-items: baseline; }
    body.shop-p-home .shop-main .shop-cnews__head h2 { flex: 1 0 100%; }
    body.shop-p-home .shop-main .shop-cnews__head .shop-section__more { margin-left: 0; font-size: 10px; }
    /* 탭이 다섯이라 좁은 칸에서 넘친다 — **잘라내지 않고** 옆으로 민다 */
    body.shop-p-home .shop-main .shop-cnews .shop-tabs__bar { gap: var(--shop-s3); }
    body.shop-p-home .shop-main .shop-cnews .shop-tabs__t { font-size: 11px; }
    body.shop-p-home .shop-main .shop-cnews .shop-tabs__ti { font-size: 11px; line-height: 1.45; }
    body.shop-p-home .shop-main .shop-cnews .shop-tabs__d,
    body.shop-p-home .shop-main .shop-cnews .shop-tabs__more { font-size: 10px; }
    body.shop-p-home .shop-main .shop-flow__steps strong { font-size: var(--shop-fs-sm); }
    body.shop-p-home .shop-main .shop-flow__steps span:not(.shop-flow__n) { font-size: 11px; line-height: 1.5; }
    body.shop-p-home .shop-main .shop-flow__note { font-size: 10px; }

    /* ── [§12] 하단 빈 공간 정리 ────────────────────────────────────────────
       실측(390): `주문 진행 안내` 가 끝나고 하단 퀵줄이 나오기까지 **112px** 이 비어 있었다.
       세 값이 겹친 것이다 — `.shop-lower` 아래여백 32 + `.shop-main` 안쪽여백 48 + 퀵줄 위여백 32.
       레퍼런스는 이 구간이 붙어 있다. 셋을 하나로 줄인다.
       ⚠️ 블록을 지우거나 합치지 않는다. 여백만 줄인다. */
    body.shop-p-home .shop-main { padding-bottom: 0; }
    body.shop-p-home .shop-mquick { margin-block: var(--shop-section-gap) 0; }

    /* ── [§16] 플로팅 AI CTA 가 **푸터 법적 문구를 덮지 않게** 자리를 비운다 ──
       실측(390·430): 페이지 맨 아래로 내리면 FAB(오른쪽 아래 고정)이
       `표시 금액은 부가세가 포함된 금액입니다…` 와 저작권 줄 위에 겹쳤다.
       띄우는 버튼은 언제나 화면 아래를 덮으므로, **문서 끝에 그만큼 여백을 준다.**
       ⚠️ FAB 을 옮기거나 줄이지 않는다(사장님이 정하신 자리다). 아래를 비울 뿐이다.
       ⚠️ Home 에만 건다 — `.shop-fab` 은 Home 에서만 그려진다. */
    body.shop-p-home .shop-footer__bottom {
        padding-bottom: calc(var(--shop-ctrl) + var(--shop-s5) + var(--shop-s3)
                             + env(safe-area-inset-bottom, 0px)); }
}

/* 360~420 — 칸 수는 그대로 두고 폭만 따라 줄인다. 열을 무너뜨리지 않는다. */
@media (max-width: 420px) {
    body.shop-p-home .shop-main .shop-cats--prem .shop-promo--prem { gap: 5px; }
    body.shop-p-home .shop-main .shop-cats--prem .shop-promo--prem .shop-promo__name { font-size: 10px; }
    body.shop-p-home .shop-main .shop-cats--prem .shop-promo--prem .shop-promo__price { font-size: 9px; }
    body.shop-p-home .shop-main .shop-cs__tel { font-size: 17px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   [V36G.1 HERO OVERRIDE] Home Hero — **전체 폭 이미지 + 그 위 왼쪽 카피**
   ──────────────────────────────────────────────────────────────────────────
   지시서: `작업지시서/V36G_1_HERO_COPY_FULLBLEED_OVERRIDE.md`

   무엇이 바뀌나
     · 이미지가 오른쪽 반쪽 칸이 아니라 **Hero 전체**에 깔린다(§3)
     · 슬라이드가 `display:none` 즉시 교체에서 **opacity fade** 로 바뀐다(§8)
     · 자동 전환 6초 → **4초**(§8, 편집 파일 `interval_ms`)
     · `사진 준비중` 빈 칸이 사라진다(§6)

   사장님 Hero 4장 실측(2172×724 · 3:1) — **왼쪽이 밝은 여백**이다
     1 브랜드 35.0% · 2 택배차 40.6% · 3 대형출력 39.5% · 4 유리필름 42.3%

   그래서 데스크톱에서는 **어두운 overlay 도 흰 패널도 깔지 않는다**(§5·§10).
   Hero 높이를 원본과 같은 3:1 로 잡아 **가로가 잘리지 않게** 했기 때문에
   그 여백이 화면에서도 그대로 여백이다.

   ⚠️ 이 블록은 파일 맨 뒤다. shop.css 는 같은 명시도면 "미디어쿼리 안" 이 아니라
      "파일에서 뒤" 가 이긴다. 그래도 순서에만 기대지 않고 명시도를 한 단계 올려 둔다.
   ⚠️ Hero 컴포넌트는 카테고리·검색·고객센터도 함께 쓴다. 아래 규칙은 전부
      `.shop-hero--car`(= Home 캐러셀) 또는 `body.shop-p-home` 아래에만 건다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 높이 — 원본 비율(3:1)을 지켜 **가로를 자르지 않는다** ──
   `min-height` 가 아니라 `height` 다. 내용이 높이를 밀면 비율이 깨지고, 비율이 깨지는 순간
   `object-fit: cover` 가 좌우를 잘라 왼쪽 여백을 먹는다(카피가 그림 위로 올라간다).
   1440 → 480 · 1280 → 427 · 1024 → 341 · 1920 이상 → 560 에서 멈춘다. */
.shop-hero.shop-hero--car { min-height: 0; height: clamp(300px, 33.34vw, 560px); }

/* ── 이미지 — Hero 전체를 덮는다 ── */
.shop-hero--car .shop-hero__visual { position: absolute; inset: 0; z-index: 0;
                                     width: auto; max-width: none; aspect-ratio: auto; }
.shop-hero--car .shop-hero__visual img { display: block; width: 100%; height: 100%;
                                         object-fit: cover; object-position: center center; }
/* 파일이 사라졌을 때의 조용한 대체 — 안내 문구도 빈 상자도 만들지 않는다 */
.shop-hero--car .shop-hero__visual--none { background: var(--shop-bg-soft); }

/* ── 스크림 — 데스크톱은 **끈다** ──
   원본 왼쪽이 이미 밝은 여백이라 덧칠할 이유가 없다(§5 "이미지가 원래 충분히 읽히면
   gradient 도 넣지 않는 것이 우선"). 좁은 화면에서만 아래에서 다시 켠다. */
.shop-hero--car::after { content: none; }

/* ── 슬라이드 전환 — opacity fade ──
   ⚠️ 스크립트가 붙기 전(`is-ready` 없음)에는 **예전 그대로** 첫 장만 `display` 로 보인다.
      4장이 한꺼번에 겹쳐 깜빡이는 것을 막는 기존 장치를 그대로 둔다.
   ⚠️ 이미지에는 transform 을 걸지 않는다 — zoom·parallax 금지(§8·§10).
      아주 약한 이동은 **글자 덩어리에만** 준다. */
.shop-hero--car.is-ready .shop-hero__slide {
    display: grid; position: absolute; inset: 0;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .45s ease, visibility 0s linear .45s; }
.shop-hero--car.is-ready .shop-hero__slide.is-on {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity .45s ease, visibility 0s; }
.shop-hero--car.is-ready .shop-hero__slide .shop-hero__in {
    transform: translate3d(0, 8px, 0); transition: transform .45s ease; }
.shop-hero--car.is-ready .shop-hero__slide.is-on .shop-hero__in {
    transform: none; }
@media (prefers-reduced-motion: reduce) {
    .shop-hero--car.is-ready .shop-hero__slide,
    .shop-hero--car.is-ready .shop-hero__slide.is-on,
    .shop-hero--car.is-ready .shop-hero__slide .shop-hero__in { transition: none; transform: none; }
}

/* ── 카피 층 ──
   좌측 inset 은 본문 컨테이너가 이미 만든다(1440 에서 100px = 6.9% · §6 의 7~10%).
   ⚠️ 카피 폭을 **원본 여백 안**에 가둔다. 1440 에서 여백은 35% = 504px 이고 글이 100px 에서
      시작하므로 쓸 수 있는 폭은 약 400px 다. 여기에 headline 이 들어가야 한다. */
.shop-hero--car .shop-hero__in { position: relative; z-index: 2; align-self: center;
                                 padding-block: var(--shop-s6); }
/* 글이 쓸 수 있는 폭은 **원본 여백에서 본문 컨테이너 왼쪽 여백을 뺀 만큼**이다.
   ⚠️ `ch` 로 재면 안 된다 — `ch` 는 숫자 `0` 의 폭이라 한글 한 글자의 절반 남짓이다.
      `13ch` 는 한글 13자가 아니라 약 7자 폭이었다(1440 실측 319px).
   ⚠️ vw 만으로도 안 된다 — 본문 컨테이너가 1240 에서 가운데 정렬이라 화면이 넓어질수록
      글 시작점이 **오른쪽으로 밀린다**. 1920 에서는 시작 340px, 여백 끝 672px 로
      쓸 수 있는 폭이 오히려 줄어든다. 그래서 그 여백을 식에 넣는다. */
.shop-hero--car { --hero-inset: max(var(--shop-gutter), calc((100vw - var(--shop-page)) / 2));
                  --hero-copy: min(420px, calc(34vw - var(--hero-inset) - 16px)); }
.shop-hero--car .shop-hero__eyebrow { margin: 0 0 var(--shop-s3); font-size: var(--shop-fs-sm);
                                      font-weight: var(--shop-fw-bold); letter-spacing: .04em;
                                      color: var(--shop-accent-ink); }
.shop-hero--car h1,
.shop-hero--car .shop-hero__t { max-width: var(--hero-copy); font-size: clamp(26px, 2.5vw, 38px);
                                line-height: 1.28; letter-spacing: -0.035em;
                                font-weight: var(--shop-fw-black); color: var(--shop-ink); }
.shop-hero--car .shop-hero__lead { max-width: var(--hero-copy); margin: var(--shop-s4) 0 0;
                                   font-size: var(--shop-fs-md); line-height: 1.65;
                                   color: var(--shop-ink-2); }
.shop-hero--car .shop-hero__cta { margin-top: var(--shop-s5); flex-wrap: wrap; }

/* ── 조작부 — 개수 표시도 점도 없이 **좌·우 화살표만** (전 폭 공통) ──
   사장님 지시: 반투명으로 그림 **양 끝**, 세로 기준 가운데.
   처음에는 좁은 화면에만 걸었는데 지시에 폭 조건이 없었고, 데스크톱에서도 같은 형태가 맞다.
   ⚠️ 껍데기는 클릭을 통과시키고(`pointer-events: none`) 화살표만 받는다 —
      그러지 않으면 투명한 띠가 그림 위 스와이프·클릭을 먹는다.
   ⚠️ 점(dot)은 `home.js` 가 만든다. CSS 로 감춰도 생성·클릭·aria 는 그대로 돌아간다.
      위치 안내는 화살표 `aria-label`·스와이프·키보드가 그대로 갖는다. */
.shop-hero--car .shop-hero__nav {
    left: 0; right: 0; width: auto; padding-inline: var(--shop-s2);
    top: 50%; bottom: auto; transform: translateY(-50%);
    justify-content: space-between; gap: 0; pointer-events: none; }
.shop-hero--car .shop-hero__count,
.shop-hero--car .shop-hero__dots { display: none; }
/* 사장님 지시: **더 반투명.** 카피와 살짝 겹쳐도 밑의 글자가 비쳐 보이면 된다.
   ⚠️ `backdrop-filter: blur()` 를 쓰지 않는다. 흐림은 반투명보다 밑의 글자를 더 망친다.
   ⚠️ 화살표 자체는 안 죽는다 — 글자(`--shop-ink`)가 진하고 테두리·그림자가 윤곽을 준다.
   ⚠️ 누르는 순간에는 진해져서 "눌렸다" 가 보인다. */
.shop-hero--car .shop-hero__arrow {
    pointer-events: auto;
    background: rgba(255, 255, 255, .28);
    border-color: rgba(255, 255, 255, .50);
    color: var(--shop-ink);
    box-shadow: 0 1px 5px rgba(16, 24, 40, .10); }
.shop-hero--car .shop-hero__arrow:hover,
.shop-hero--car .shop-hero__arrow:active {
    background: rgba(255, 255, 255, .78); border-color: rgba(255, 255, 255, .88); }

/* ── 1024 이하 — 글자만 한 단계 줄인다. 비율은 그대로다 ── */
@media (max-width: 1024px) {
    .shop-hero--car .shop-hero__lead { font-size: var(--shop-fs-sm); }
}

/* ══ 모바일 — 세로가 길어져 가로가 잘린다. 여기서만 스크림을 켠다 ══
   390×300 이면 화면비가 1.3 이라 원본(3.0)의 **가로 43% 만** 보인다. 어떤 위치를 잡아도
   카피가 주제물 위로 올라갈 수밖에 없다. 그래서 §5 가 허용한 **왼쪽 국소 그라디언트**만
   쓴다 — 전체를 덮는 어두운 overlay 도, 불투명 흰 카드도 아니다.
   ⚠️ 오른쪽은 완전히 투명하다(0). 주제물을 뿌옇게 만들지 않는다. */
@media (max-width: 860px) {
    /* ══ [사장님 지시 2026-08-27 · 4차 · 최종] **처음 판 그대로 + 화살표만 새 것** ══
       사장님 판단: "화살표는 살짝 겹쳐도 된다 — 지금보다 더 반투명으로 하면 된다.
       지금 좌측하단이 너무 비었다. 카피로 채워라. 처음에 만든 게 딱 좋았으니
       거기에 화살표 버튼만 수정된 버전으로 가져와라."

       그래서 **높이·카피·버튼을 처음 판 값으로 되돌리고**, 화살표만 새 형태를 얹는다.
         · 높이 300(≤860) / 284(≤420) — 원본 3:1 그림이 가로로 덜 잘리는 값
         · 카피는 세로 **가운데** 정렬(`align-self: center` 기본값) · 원래 크기
         · 버튼은 subcopy 바로 아래, **들여쓰기 없음**(x 16 에서 시작)
       ⚠️ 겹침을 **높이로 피하지 않는다.** 대신 화살표를 더 투명하게 해서 밑의 글자가
          비쳐 보이게 한다(아래 참고). 사장님이 그렇게 정하셨다.
       ⚠️ 2차 CTA(AI 소재추천)는 마크업에서 없앴다(그림을 가렸다). 버튼은 장마다 하나다. */
    body.shop-p-home .shop-hero.shop-hero--car { height: 300px; }
    body.shop-p-home .shop-hero--car::after {
        content: ""; position: absolute; inset: 0;
        z-index: 1; pointer-events: none;
        background: linear-gradient(96deg,
            rgba(255, 255, 255, .93) 0%,
            rgba(255, 255, 255, .80) 34%,
            rgba(255, 255, 255, .25) 62%,
            rgba(255, 255, 255, 0)   84%); }
    /* 주제물이 오른쪽에 있다 — 잘릴 때 **오른쪽을 붙잡는다** */
    /* 장마다 붙잡을 지점이 다르다 — 값은 편집 파일이 갖고 마크업이 `--hero-focus` 로 내려 준다.
       ⚠️ 데스크톱에는 걸지 않는다. 거기서는 Hero 가 원본과 같은 3:1 이라 **가로가 안 잘린다.** */
    body.shop-p-home .shop-main .shop-hero--car .shop-hero__visual img {
        object-position: var(--hero-focus, 60% center); }
    /* ⚠️ 여기부터 `.shop-main` 을 한 단계 더 붙인다. R2 모바일 블록의
          `body.shop-p-home .shop-main .shop-hero--full h1`(0,4,1)이 더 강해서
          `.shop-hero--car`(0,3,1)로 적은 값이 **조용히 무시됐다**(390 실측: 내가 준
          11ch 이 아니라 R2 의 68% 가 먹고 있었다). 같은 (0,4,1)로 올리고 뒤에 두어 이긴다. */
    /* 카피는 그림의 **윗부분**에, 버튼은 슬라이드 바닥에 — 한 열로 세워서 사이를 벌린다 */
    /* 카피 — **처음 판 그대로.** 세로 가운데 정렬이고 크기도 원래대로다.
       (한때 화살표를 피하려고 위로 모으고 한 단계 줄였는데, 그러니 왼쪽 아래가 비었다.) */
    body.shop-p-home .shop-main .shop-hero--car .shop-hero__in { padding-block: var(--shop-s5); }
    body.shop-p-home .shop-main .shop-hero--car .shop-hero__eyebrow { margin-bottom: var(--shop-s2);
                                                           font-size: var(--shop-fs-xs); }
    body.shop-p-home .shop-main .shop-hero--car h1,
    body.shop-p-home .shop-main .shop-hero--car .shop-hero__t { max-width: 70%; font-size: 22px;
                                                     line-height: 1.3; }
    body.shop-p-home .shop-main .shop-hero--car .shop-hero__lead { max-width: 66%;
                                                        margin-top: var(--shop-s2);
                                                        font-size: var(--shop-fs-xs);
                                                        line-height: 1.5; }
    /* 버튼은 subcopy 바로 아래 — 바닥으로 밀지 않는다(원복) */
    /* 버튼도 처음 판 그대로 — 들여쓰기 없이 글자 줄과 같은 x 16 에서 시작한다 */
    body.shop-p-home .shop-main .shop-hero--car .shop-hero__cta {
        margin-top: var(--shop-s3); align-items: center;
        flex-direction: row; flex-wrap: nowrap; gap: var(--shop-s2); }
    body.shop-p-home .shop-main .shop-hero--car .shop-hero__cta .shop-btn {
        flex: 0 1 auto; font-size: var(--shop-fs-sm); }

    /* 조작부 규칙은 이제 미디어쿼리 **밖**에 있다(전 폭 공통). 여기서 다시 적지 않는다. */
}

@media (max-width: 420px) {
    body.shop-p-home .shop-hero.shop-hero--car { height: 284px; }
    body.shop-p-home .shop-main .shop-hero--car h1,
    body.shop-p-home .shop-main .shop-hero--car .shop-hero__t { font-size: 20px; }
}

/* ══════════ [V36G.1 Media Pair §7] 아주 좁은 화면의 마지막 안전장치 ══════════
   390/430 은 2열을 지킨다(사장님 기준: 작은 카드 허용 · 정보 밀도 우선).
   360px 미만에서만 세로로 쌓는다 — 그 폭에서는 한 칸이 150px 아래로 내려가
   소재의 결이 보이지 않기 때문이다.
   ⚠️ 이 규칙은 **파일 맨 끝**에 있어야 한다. 위 `max-width: 900px` 의 2열 규칙과
      같은 명시도라, 앞에 두면 뒤 규칙에 눌려 아무 일도 하지 않는다. */
@media (max-width: 359px) {
    .shop-detail__media { grid-template-columns: minmax(0, 1fr); }
}

/* ══════════════ [V36G.1 Category Rebase · 2026-08-30] ══════════════
   사장님 승인 레퍼런스 방향으로 카테고리 화면을 다시 짠다.
     Hero(작게) → 상품 수 + AI compact CTA → 필터칩 + 정렬 → 1:1 카드 3열

   ⚠️ Home 을 건드리지 않는다. Home 이 쓰는 `.shop-grid--6` 은 그대로 두고
      카테고리 전용 `.shop-grid--cat` 을 새로 만든다.
   ⚠️ 카드 컴포넌트(`shop_card`)는 그대로다 — 격자와 썸네일 비율만 바꾼다.
   ⚠️ 주석 안에 중괄호를 쓰지 않는다(이 저장소에서 반복된 함정). */

/* ── Hero 높이 ──
   [2026-08-30] 사장님 전용 사진이 들어왔다. 사진이 없던 시절의 348px 는 **띠**였다.
   ⚠️ 높이 이력 — 같은 논쟁을 다시 하지 않으려고 남긴다.
        348 → 520/460/380 → 312/276/228(3/5) → 520/460/380 → **400/340/260/240 (최종 고정)**
      520 은 wide 원본(2.75:1)과 비율이 맞아 잘림은 없었지만, 첫 상품까지의 거리가 멀었다.
      2026-08-31 지시서 §2 가 **±20px 재량 없이** 고정값을 정했다. 그대로 쓴다.
   ⚠️ 칸이 낮아지면 2.75:1 원본이 위아래로 잘린다. 높이를 도로 키우지 말고
      **object-position 으로 보정**한다(지시서 §2 "피사체가 잘리면 position 을 보정").
   ⚠️ 430 과 390 이 서로 다른 값이다(260 · 240). 그래서 900px 아래에 400px 분기를 하나 더 둔다.
   ⚠️ `.shop-hero.shop-hero--cat`(0,2,0)로 적는다. 한 겹으로 적으면 위쪽 `--full` 규칙을
      못 이긴다(이 저장소에서 세 번 난 사고). */
.shop-hero.shop-hero--cat { min-height: 400px; }
.shop .shop-hero--cat .shop-hero__in { padding-block: var(--shop-s7); }
/* ⚠️ 앞 판은 사진이 없어서 `object-position: center` 로 두었다(:4052). 그런데 새 사진은
      **피사체가 오른쪽 60%** 에 있어서, 좁은 화면에서 가운데를 잡으면 물건이 밀려 나간다.
      `--cat`(0,3,1)이 `--full`(0,2,1)을 이기므로 여기서 다시 정해 준다.
   ⚠️ 세로를 가운데로 잡으면 **피사체 발밑이 잘린다.** 1440 에서 칸은 2.77:1 인데 사진은 2:1 이라
      위아래로 28%가 잘리고, 그 아래쪽에 거치대 다리·바닥이 있다(스크린샷으로 확인).
      위쪽은 천장·조명이라 잃어도 되는 자리다 — 그래서 아래쪽을 붙잡는다.
   ⚠️ [2026-08-30 wide 원본 교체 후] 새 원본은 2.75:1 이고 1440 칸은 2.77:1 이라 세로가 거의
      그대로 들어온다. 그래서 옛 값(68% · 55%)을 물려쓰지 않고 **가운데**로 되돌렸다 —
      그 값들은 2:1 원본을 낮은 칸에 욱여넣을 때 쓰던 보정이다.
      좁은 화면은 사정이 다르다(아래 900px 블록에서 따로 잡는다).
   ⚠️ 같은 선언이 파일 앞(:4052)에도 있다. 그쪽은 이 줄이 이겨서 죽은 줄이다 — 지우지 않고
      두되, 값을 고칠 때는 **반드시 이 줄**을 고쳐야 한다(앞쪽만 고치면 아무 일도 안 일어난다). */
.shop-hero.shop-hero--cat .shop-hero__visual img { object-position: center; }
/* 상품 수를 알약으로 — 레퍼런스의 `상품 6종` `바로 주문 가능 4종` 자리 */
.shop-cathero__stat { display: flex; flex-wrap: wrap; gap: var(--shop-s2); }
.shop-cathero__stat span { display: inline-flex; align-items: center; gap: 6px;
    min-height: 38px; padding: 0 var(--shop-s4); border-radius: 999px;
    background: var(--shop-bg); border: 1px solid var(--shop-line);
    font-size: var(--shop-fs-sm); color: var(--shop-ink-2); }
.shop-cathero__stat strong { color: var(--shop-ink); font-weight: var(--shop-fw-bold); }

/* ── 상품 섹션 머리 — 제목 왼쪽, AI compact CTA 오른쪽 ──
   지시서 §9: 하단의 큰 가로 AI 띠를 없애고 이 자리로 옮긴다. */
.shop-cat-head { display: flex; align-items: center; justify-content: space-between;
                 gap: var(--shop-s4); flex-wrap: wrap; margin-bottom: var(--shop-s4); }
.shop .shop-cat-head__t { margin: 0; font-size: var(--shop-fs-xl); font-weight: var(--shop-fw-bold); }
.shop-cat-head__t b { color: var(--shop-accent-ink); }
.shop-cat-ai { display: inline-flex; align-items: center; gap: var(--shop-s3); flex-wrap: wrap; }
.shop .shop-cat-ai__q { margin: 0; font-size: var(--shop-fs-sm); color: var(--shop-ink-2); }

/* ── 도구줄 — 필터 칩 한 줄 + 정렬 ── */
.shop-cat-tools { display: flex; align-items: center; justify-content: space-between;
                  gap: var(--shop-s4); flex-wrap: wrap; margin-bottom: var(--shop-s5); }
.shop-cat-tools .shop-chips { margin: 0; }

/* ── 상품 격자 — 1:1 카드 3열 ──
   지시서 §7: 1440·1280 3열 / 모바일 2열. */
.shop-grid--cat { grid-template-columns: repeat(3, minmax(0, 1fr));
                  gap: var(--shop-s6) var(--shop-s5); }
.shop-grid--cat .shop-card__thumb { aspect-ratio: 1 / 1; }

/* ── 실사출력 단일 페이지 ──
   분류를 새 페이지로 열지 않고 같은 페이지 안에서 이동한다(§13). */
.shop-secnav { display: flex; gap: var(--shop-s2); flex-wrap: wrap; margin-bottom: var(--shop-s6); }
.shop-catsec { margin-bottom: var(--shop-s7); }
/* 고정 헤더에 제목이 가리지 않게 앵커 지점을 내려 잡는다 — JS 없이 CSS 로만.
   ⚠️ `--shop-header-h` 에 기대지 않는다. 그 변수는 이 화면에서 60px 로 잡혀 있어
      계산하면 76px 이 나오는데, **붙어 있는 헤더의 실제 아랫변은 159px**(1440) ·
      119px(390) 이라 분류 제목이 그대로 가려졌다(실측).
   ⚠️ 그래서 실측한 높이에 여유 16px 를 더해 **숫자로 못박는다.** 헤더 높이가 바뀌면
      이 값도 같이 봐야 한다 — 회귀가 "제목이 헤더에 안 가린다" 를 실제로 잰다. */
.shop-catsec { scroll-margin-top: 176px; }
.shop .shop-catsec__h { display: flex; align-items: baseline; gap: var(--shop-s3);
                        margin: 0 0 var(--shop-s4); font-size: var(--shop-fs-lg);
                        font-weight: var(--shop-fw-bold); }
.shop-catsec__n { font-size: var(--shop-fs-sm); font-weight: var(--shop-fw-med);
                  color: var(--shop-ink-3); }

@media (max-width: 1023px) {
    .shop-grid--cat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* [2026-08-30] Hero 높이만 **1024 를 포함해서** 낮춘다.
   ⚠️ 격자 분기(1023)를 같이 옮기면 안 된다 — 1024 는 카테고리 **3열**이 계약이고
      그것을 재는 단언이 따로 있다. 높이와 열 수는 서로 다른 계약이므로 분기도 따로 둔다.
   ⚠️ 아래 900px 블록이 이 규칙보다 뒤에 있어야 모바일에서 380 이 이긴다(같은 명시도라 순서로 정해진다). */
@media (max-width: 1024px) {
    .shop-hero.shop-hero--cat { min-height: 340px; }   /* 1024 는 격자 분기(1023)와 따로 잡는다 */
}
@media (max-width: 900px) {
    .shop-hero.shop-hero--cat { min-height: 260px; }   /* 430 */
    .shop .shop-hero--cat .shop-hero__in { padding-block: var(--shop-s5); }
    /* ⚠️ 좁은 화면은 사진이 옆으로 잘린다(2:1 사진 → 약 1:1 칸). 가운데를 잡으면
          오른쪽 피사체가 통째로 밀려 나가므로 **오른쪽을 붙잡는다.** Home 이 쓰는 것과
          같은 처방이고 값만 카테고리 사진에 맞췄다. */
    /* 좁은 화면은 세로가 통째로 보이고(사진이 칸보다 가로로 길다) **옆이** 잘린다.
       그래서 여기서는 가로만 오른쪽으로 붙잡는다 — 세로 값은 영향이 없다. */
    .shop-hero.shop-hero--cat .shop-hero__visual img { object-position: 70% center; }
    /* ⚠️ 글이 사진 위로 번지지 않게 폭을 묶는다. 사진이 없던 시절 `max-width: none`(:4075)로
          풀어 둔 것이 지금은 글을 피사체 위로 올린다. */
    .shop-hero.shop-hero--cat h1,
    .shop-hero.shop-hero--cat .shop-hero__catname { max-width: 62%; }
    .shop-hero.shop-hero--cat .shop-hero__lead { max-width: 66%; }
    .shop-cathero__stat span { min-height: 34px; padding: 0 var(--shop-s3);
                               font-size: var(--shop-fs-xs); }
    .shop-cat-head { gap: var(--shop-s3); }
    .shop-cat-tools { gap: var(--shop-s3); }
    .shop-grid--cat { gap: var(--shop-s5) var(--shop-s4); }
    /* 분류 이동줄은 가로로 흘린다 — 줄바꿈으로 높이를 키우지 않는다(§12) */
    .shop-secnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
                   margin-inline: calc(-1 * var(--shop-gutter));
                   padding-inline: var(--shop-gutter); }
    .shop-secnav::-webkit-scrollbar { display: none; }
    .shop-secnav .shop-chip { flex: 0 0 auto; }
    /* 모바일은 붙는 헤더가 119px 다(실측) */
    .shop-catsec { scroll-margin-top: 136px; }
}

/* ── [V36G.1 Category Rebase §6] 사진이 아직 없는 Hero ──
   지시서: "큰 빈 연파랑 박스처럼 보이면 실패".
   전용 Hero 사진이 0장이라 348px 를 그대로 두면 오른쪽 60%가 빈 하늘색이다(실측).
   그래서 **사진이 없을 때만** 글자 높이에 맞춰 접는다. 사진이 들어오면 저절로 348px 로 돌아간다.
   ⚠️ 높이를 지우지 않고 낮출 뿐이다 — 마크업·이미지 배선은 그대로다.
   ⚠️ `사진 준비 중` 표는 사진이 없을 때만 있는 것이라 이 상태에서는 감춘다.
      자리표시자를 없애는 것이 아니라, 고객에게 보여 줄 말이 아니어서다. */
.shop-hero.shop-hero--cat:has(.shop-hero__visual--empty) { min-height: 0; }
.shop-hero--cat:has(.shop-hero__visual--empty) .shop-hero__ph { display: none; }
.shop .shop-hero--cat:has(.shop-hero__visual--empty) .shop-hero__in { padding-block: var(--shop-s7); }
@media (max-width: 900px) {
    .shop .shop-hero--cat:has(.shop-hero__visual--empty) .shop-hero__in { padding-block: var(--shop-s6); }
}

/* ══════════════════════════════════════════════════════════════════
   [2026-08-30 §15~§22] 문의 게시판 — 공개 목록 · 본인 조회 · 본인 상세

   레퍼런스 기준: 과한 커뮤니티 게시판이 아니라 **고객센터 목록**이다.
   기존 화이트 + 스카이블루 토큰만 쓰고 새 색을 만들지 않는다.

   반드시 지킬 것 —
     `.shop p` 와 `.shop h1~h4` 초기화가 (0,1,1) 이라 한 겹 클래스(0,1,0)의 여백을
     전부 죽인다. 그래서 여백을 주는 규칙은 **`.shop` 을 한 겹 더** 붙여 (0,2,0) 으로 쓴다.
     초기화 자체는 건드리지 않는다(이 저장소에서 가장 여러 번 되풀이된 결함이다).
   ══════════════════════════════════════════════════════════════════ */

.shop .shop-inqtop { display: flex; flex-wrap: wrap; gap: var(--shop-s3);
                     margin: var(--shop-s5) 0 var(--shop-s4); }

.shop .shop-inqcount { margin: var(--shop-s5) 0 var(--shop-s2);
                       font-size: var(--shop-fs-sm); color: var(--shop-ink-3); }
.shop .shop-inqcount strong { color: var(--shop-ink); font-weight: var(--shop-fw-bold); }

.shop-inqlist { list-style: none; margin: 0; padding: 0;
                border-top: 1px solid var(--shop-line); }

/* 상태 · 유형 · 제목 · 작성자 · 날짜 — 제목만 늘어난다 */
.shop-inq { display: grid; align-items: center; gap: var(--shop-s3);
            grid-template-columns: 84px 132px minmax(0, 1fr) 84px 56px;
            padding: var(--shop-s3) var(--shop-s2);
            border-bottom: 1px solid var(--shop-line);
            font-size: var(--shop-fs-sm); }

.shop-inq--head { color: var(--shop-ink-3); font-size: var(--shop-fs-xs);
                  background: var(--shop-bg-soft); }

.shop-inq__st { justify-self: start; border-radius: 999px; padding: 3px 10px;
                font-size: var(--shop-fs-xs); font-weight: var(--shop-fw-med);
                background: var(--shop-bg-soft); color: var(--shop-ink-2); white-space: nowrap; }
.shop-inq--head .shop-inq__st { background: none; padding: 0; }
.shop-inq__st.is-received  { background: var(--shop-bg-soft);    color: var(--shop-ink-2); }
.shop-inq__st.is-in_review { background: var(--shop-accent-soft); color: var(--shop-accent-ink); }
.shop-inq__st.is-answered  { background: var(--shop-accent);      color: #fff; }
.shop-inq__st.is-closed    { background: var(--shop-bg-soft);    color: var(--shop-ink-4); }

.shop-inq__svc  { color: var(--shop-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-inq__title { color: var(--shop-ink); font-weight: var(--shop-fw-med);
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.shop-inq__title { text-decoration: none; }
a.shop-inq__title:hover { text-decoration: underline; }
.shop-inq__who  { color: var(--shop-ink-3); }
.shop-inq__date { color: var(--shop-ink-4); font-size: var(--shop-fs-xs); text-align: right; }

/* 좁은 화면 — 표를 두 줄로 접는다. 가로 스크롤을 만들지 않는다. */
@media (max-width: 720px) {
    .shop-inq { grid-template-columns: auto minmax(0, 1fr) auto;
                grid-template-areas: "st title date" "svc who ."; row-gap: var(--shop-s1); }
    .shop-inq__st { grid-area: st; }
    .shop-inq__title { grid-area: title; }
    .shop-inq__date { grid-area: date; }
    .shop-inq__svc { grid-area: svc; font-size: var(--shop-fs-xs); }
    .shop-inq__who { grid-area: who; font-size: var(--shop-fs-xs); }
    .shop-inq--head { display: none; }
}

/* 최소 페이저 — 무한스크롤을 쓰지 않는다(§22) */
.shop .shop-pager { display: flex; align-items: center; justify-content: center;
                    gap: var(--shop-s4); margin: var(--shop-s6) 0 0; }
.shop-pager__b { min-height: 44px; display: inline-flex; align-items: center;
                 padding: 0 var(--shop-s4); border: 1px solid var(--shop-line);
                 border-radius: var(--shop-radius-sm); color: var(--shop-ink);
                 text-decoration: none; font-size: var(--shop-fs-sm); }
.shop-pager__b:hover { border-color: var(--shop-accent); color: var(--shop-accent-ink); }
.shop-pager__b.is-off { color: var(--shop-ink-4); border-color: var(--shop-line-2); }
.shop-pager__n { font-size: var(--shop-fs-sm); color: var(--shop-ink-3); }

.shop .shop-inqnote { margin: var(--shop-s6) 0 0; font-size: var(--shop-fs-sm);
                      color: var(--shop-ink-3); }

/* ── 본인 상세 ── */
.shop-inqd { max-width: 760px; }
.shop .shop-inqd__h { margin: var(--shop-s6) 0 var(--shop-s3);
                      font-size: var(--shop-fs-lg); color: var(--shop-ink); }
.shop-inqd__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                   gap: var(--shop-s3) var(--shop-s5); margin: 0;
                   padding: var(--shop-s4); border: 1px solid var(--shop-line);
                   border-radius: var(--shop-radius-lg); background: var(--shop-bg-soft); }
.shop-inqd__meta dt { font-size: var(--shop-fs-xs); color: var(--shop-ink-3); margin: 0; }
.shop-inqd__meta dd { margin: 2px 0 0; font-size: var(--shop-fs-sm); color: var(--shop-ink);
                      font-weight: var(--shop-fw-med); }
.shop .shop-inqd__body { margin: 0; padding: var(--shop-s4);
                         border: 1px solid var(--shop-line); border-radius: var(--shop-radius-lg);
                         font-size: var(--shop-fs-sm); line-height: 1.75; color: var(--shop-ink); }
.shop .shop-inqd__answer { margin: 0; padding: var(--shop-s4);
                           border: 1px solid var(--shop-accent); border-radius: var(--shop-radius-lg);
                           background: var(--shop-accent-soft); color: var(--shop-ink);
                           font-size: var(--shop-fs-sm); line-height: 1.75; }
.shop .shop-inqd__when { margin: var(--shop-s2) 0 0; font-size: var(--shop-fs-xs); color: var(--shop-ink-3); }
.shop .shop-inqd__wait { margin: 0; font-size: var(--shop-fs-sm); color: var(--shop-ink-3); }
.shop .shop-inqd__act  { margin: var(--shop-s7) 0 0; }

@media (max-width: 560px) {
    .shop-inqd__meta { grid-template-columns: minmax(0, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════
   [V36G.1 §1~§6] 이미지 확대 — 상품 `완제품 예시` · `소재 텍스처` 공용

   ⚠️ 확대할 수 있을 때만 표시가 생긴다. 원본이 작아 못 키우는 사진에는
      돋보기 표시도, 손가락 커서도 붙지 않는다 — 눌러 봐야 흐린 화면이 나오면 안 된다.
   ⚠️ `body` 에 `.shop` 이 붙어 있어 `.shop p` 초기화(0,1,1)가 모달 안내문의 여백을
      죽인다. 그래서 여백을 주는 줄은 `.shop` 을 한 겹 더 붙여 (0,2,0)로 쓴다.
   ⚠️ 배율·원본 크기 같은 숫자를 화면에 적지 않는다(§9).
   ══════════════════════════════════════════════════════════════════ */

/* ── 확대 가능 표시 ── */
.shop-mediapane.is-zoomable { position: relative; cursor: zoom-in; }
.shop-mediapane.is-zoomable::after {
    content: ""; position: absolute; right: var(--shop-s3); bottom: var(--shop-s3);
    width: 34px; height: 34px; border-radius: 50%; pointer-events: none;
    background: rgba(255, 255, 255, .92) no-repeat center / 18px 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4M11 8v6M8 11h6'/%3E%3C/svg%3E");
    box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
    opacity: .9; transition: opacity var(--shop-t, .18s) ease; }
.shop-mediapane.is-zoomable:hover::after,
.shop-mediapane.is-zoomable:focus-visible::after { opacity: 1; }
.shop-mediapane.is-zoomable:focus-visible { outline: 2px solid var(--shop-accent); outline-offset: 3px; }

/* ── 돋보기 렌즈 — 마우스는 얹으면, 손가락은 누르고 있으면 따라온다 ──
   [2026-08-30 사장님 지시] 눌러서 크게 보는 화면을 없애고 렌즈만 남겼다. 그래서 렌즈를 키운다.
   ⚠️ 손가락 화면에서도 숨기지 않는다 — 여기가 유일한 확대 수단이 됐다.
      대신 `is-lensing`(누르고 있는 동안)일 때만 보이게 해서, 화면을 넘길 때 튀어나오지 않게 한다. */
.shop-zoom__lens { position: absolute; z-index: 3; pointer-events: none; opacity: 0;
    width: clamp(150px, 56%, 300px); aspect-ratio: 1; border-radius: 50%;
    border: 3px solid #fff; box-shadow: 0 6px 26px rgba(0, 0, 0, .32);
    background-repeat: no-repeat; transition: opacity var(--shop-t, .18s) ease; }
.shop-mediapane.is-zoomable.is-lensing .shop-zoom__lens { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
    .shop-mediapane.is-zoomable:hover .shop-zoom__lens { opacity: 1; }
}
/* 확대 중에는 손가락 움직임이 화면 스크롤로 가지 않게 한다 */
.shop-mediapane.is-zoomable { touch-action: none; }
/* ⚠️ 좁은 화면은 사진 칸 자체가 171px 라, 같은 clamp 를 쓰면 렌즈가 사진의 88%를 덮는다
      (실측). 그러면 어디를 보고 있는지 알 수 없다. 좁은 화면에서만 렌즈를 줄인다. */
@media (max-width: 900px) {
    .shop-zoom__lens { width: clamp(88px, 58%, 170px); border-width: 2px; }
}

/* ══════════════════════════════════════════════════════════════════
   [2026-08-31 §2·§3·§4] Hero 마감 — 고정 높이 · 모바일 정보 정리 · 현수막 전용 높이
   ══════════════════════════════════════════════════════════════════ */

/* ── §4 현수막 Product Hero 는 계산기 바로 위라 더 짧다 ──
   ⚠️ `--prodcat` 은 `--cat` 과 함께 붙으므로, 뒤에서 다시 선언해 이긴다.
      명시도가 한 겹 더 높다(`.shop-hero.shop-hero--cat.shop-hero--prodcat`). */
.shop-hero.shop-hero--cat.shop-hero--prodcat { min-height: 340px; }

@media (max-width: 1024px) {
    .shop-hero.shop-hero--cat.shop-hero--prodcat { min-height: 300px; }
}

@media (max-width: 900px) {
    /* ── §3 모바일에서 Hero 안 정보 pill 을 감춘다 ──
       바로 아래 상품 섹션 제목이 같은 숫자를 다시 말한다(`배너 상품 6`). 두 번 읽을 이유가 없다.
       ⚠️ 카테고리명과 설명은 남긴다. 없애는 것은 **중복되는 숫자뿐**이다.
       ⚠️ `display: none` 이라 DOM 에서 읽히지도 않는다 — 화면에만 남는 유령을 만들지 않는다. */
    .shop-hero.shop-hero--cat .shop-cathero__stat { display: none; }
    .shop-hero.shop-hero--cat.shop-hero--prodcat { min-height: 230px; }   /* 430 */
}

/* ── 430 과 390 을 가르는 분기 ──
   지시서가 두 폭에 다른 값을 정했다(260/240 · 230/220). 400px 를 경계로 나눈다. */
@media (max-width: 400px) {
    .shop-hero.shop-hero--cat { min-height: 240px; }                      /* 390 */
    .shop-hero.shop-hero--cat.shop-hero--prodcat { min-height: 220px; }   /* 390 */
}

/* ── [2026-08-31 §5] 소재사진이 없을 때의 중립 칸 ──
   ⚠️ 글자·아이콘·워터마크를 넣지 않는다. 자리만 지킨다.
   ⚠️ 제품사진 칸과 **같은 1:1** 이라 소재를 바꿔도 조판이 흔들리지 않는다. */
.shop-detail__tex.is-blank { background: var(--shop-bg-soft); border: 1px solid var(--shop-line); }
.shop-detail__tex.is-blank img { display: none; }
/* 빈 칸에는 돋보기 표시도 붙지 않는다(모듈이 `is-zoomable` 을 떼므로 자동이지만, 명시해 둔다) */
.shop-mediapane--tex:has(.shop-detail__tex.is-blank) { cursor: default; }

/* ══════════════════════════════════════════════════════════════════
   [2026-08-31 §8·§9·§10] 상담형 서비스 — 랜딩 Hero · 본문 · 분류 화면 카드

   ⚠️ `.shop p` 와 `.shop h1~h4` 초기화(0,1,1)가 한 겹 클래스의 여백을 죽인다.
      여백을 주는 줄은 `.shop` 을 한 겹 더 붙여 (0,2,0)으로 쓴다.
   ⚠️ 상품 격자·필터를 쓰지 않는다 — 카테고리처럼 보이면 안 된다(§9).
   ══════════════════════════════════════════════════════════════════ */

/* ── 서비스 Hero — 원본이 2:1 이라 카테고리(400px)와 높이를 공유하지 않는다 ──
   2:1 원본을 400px 칸(1440에서 3.6:1)에 넣으면 위아래가 45% 잘린다. 전용 값을 쓴다. */
.shop-hero.shop-hero--cat.shop-hero--svc { min-height: 520px; }
/* 차·탑차는 아래쪽에 바퀴가 있다 — 가운데를 잡으면 발밑이 잘린다. 조금 아래를 붙잡는다. */
.shop-hero.shop-hero--cat.shop-hero--svc .shop-hero__visual img { object-position: center 58%; }

.shop .shop-svc__tag { margin: 0 0 var(--shop-s3); font-size: var(--shop-fs-xs);
    font-weight: var(--shop-fw-med); letter-spacing: .04em; color: var(--shop-accent-ink); }
.shop .shop-svc__from { margin: var(--shop-s4) 0 0; font-size: var(--shop-fs-xl);
    font-weight: var(--shop-fw-bold); color: var(--shop-ink); }
.shop .shop-svc__cta { margin: var(--shop-s5) 0 0; }

/* ── 진행 방식 ── */
.shop-svcpoints { max-width: var(--shop-page); margin-inline: auto; }
.shop-svcpoints__list { list-style: none; margin: 0; padding: 0; display: flex;
    flex-wrap: wrap; gap: var(--shop-s3); }
.shop-svcpoints__list li { display: inline-flex; align-items: center; min-height: 40px;
    padding: 0 var(--shop-s4); border: 1px solid var(--shop-line); border-radius: 999px;
    background: var(--shop-bg); font-size: var(--shop-fs-sm); color: var(--shop-ink-2); }

.shop-svcnext { max-width: var(--shop-page); margin: var(--shop-s7) auto 0;
    padding: var(--shop-s6); border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius-lg); background: var(--shop-bg-soft); }
.shop .shop-svcnext__lead { margin: 0 0 var(--shop-s4); font-size: var(--shop-fs-md);
    color: var(--shop-ink-2); }
.shop .shop-svcnext__act { margin: 0; display: flex; flex-wrap: wrap; gap: var(--shop-s3); }

/* ── 분류 화면의 상담 서비스 카드(§10) ── */
.shop-svccards { margin-top: var(--shop-s8); }
.shop .shop-svccards__h { margin: 0 0 var(--shop-s2); font-size: var(--shop-fs-xl);
    font-weight: var(--shop-fw-bold); color: var(--shop-ink); }
.shop .shop-svccards__lead { margin: 0 0 var(--shop-s5); font-size: var(--shop-fs-sm);
    color: var(--shop-ink-3); }
.shop-svccards__list { display: grid; gap: var(--shop-s4);
    grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shop-svccard { padding: var(--shop-s5); border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius-lg); background: var(--shop-bg); }
.shop .shop-svccard h3 { margin: 0; font-size: var(--shop-fs-lg);
    font-weight: var(--shop-fw-bold); }
.shop-svccard h3 a { color: var(--shop-ink); text-decoration: none; }
.shop-svccard h3 a:hover { text-decoration: underline; }
.shop .shop-svccard__lead { margin: var(--shop-s2) 0 0; font-size: var(--shop-fs-sm);
    color: var(--shop-ink-3); }
.shop .shop-svccard__from { margin: var(--shop-s3) 0 0; font-size: var(--shop-fs-lg);
    font-weight: var(--shop-fw-bold); color: var(--shop-ink); }
.shop .shop-svccard__act { margin: var(--shop-s4) 0 0; display: flex; flex-wrap: wrap;
    gap: var(--shop-s2); }

@media (max-width: 1024px) {
    .shop-hero.shop-hero--cat.shop-hero--svc { min-height: 440px; }
}
@media (max-width: 900px) {
    .shop-hero.shop-hero--cat.shop-hero--svc { min-height: 320px; }
    /* 서비스 Hero 안의 CTA·시작가는 **남긴다** — 이 화면에서 할 일이 그것뿐이다.
       (카테고리 Hero 의 정보 pill 만 감춘 것과 다르다.) */
    .shop-svccards__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) {
    .shop-hero.shop-hero--cat.shop-hero--svc { min-height: 300px; }
}

/* [2026-09-14] 주문상세 발송 정보 */
.shop-odt__ship { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 18px; margin: 14px 0 0; padding: 14px; border: 1px solid var(--sh-line, #E5E8EC); border-radius: 10px; background: var(--sh-surface-2, #F7F9FB); }
.shop-odt__ship > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.shop-odt__ship dt { margin: 0; font-size: 12px; color: var(--sh-ink-3, #6B7684); }
.shop-odt__ship dd { margin: 0; font-size: 14px; color: var(--sh-ink, #1B1E23); word-break: break-all; }