/* 쇼핑몰(고객) 셸 — style.css 의 토큰만 사용한다.
 * 시안: asset/frontend_image/메인_수정.png
 * 고객 화면은 라이트 단일 톤이라 [data-theme="dark"] 를 따르지 않는다.
 */
:root {
  --shop-navy:      #14284B;
  --shop-navy-deep: #0E1D38;
  /* 1280 → 1440. 상품 그리드가 한 줄에 한 칸 더 들어간다.
     읽는 글(약관·상세설명)은 `--shop-read` 로 따로 좁힌다 — 한 줄이 1,400px 면 못 읽는다. */
  --shop-wrap:      1440px;
  --shop-read:      900px;
}

/* ★ style.css 의 body 는 **어드민 셸 전용** 2단 그리드다
   (grid-template-areas: "sidebar topbar" / "sidebar main").
   고객 화면은 그 셸을 쓰지 않으므로 반드시 되돌린다 — 안 되돌리면 <main> 이
   사이드바 칸(--sidebar-w = 220px)에 갇혀 페이지 전체가 220px 폭으로 찌그러진다. */
body.shop {
  display: block;
  grid-template-columns: none;
  grid-template-rows: none;
  grid-template-areas: none;
  min-height: 100dvh;
  background: var(--surface);
  color: var(--text);
}

.shop-wrap { max-width: var(--shop-wrap); margin: 0 auto; padding: 0 20px; }

/* 최상단 유틸 바 */
.shop-utility { background: var(--shop-navy-deep); color: #fff; font-size: 12px; }
.shop-utility .shop-wrap { display: flex; align-items: center; justify-content: space-between; height: 34px; }
.shop-tagline { opacity: .75; }
.shop-util-nav { display: flex; gap: 18px; }
.shop-util-nav a { color: #fff; text-decoration: none; opacity: .9; }
.shop-util-nav a:hover { opacity: 1; text-decoration: underline; }

/* 로고 + 검색 + 연락처 */
.shop-header .shop-wrap { display: flex; align-items: center; gap: 32px; height: 92px; }
.shop-logo { display: flex; flex-direction: column; text-decoration: none; color: var(--shop-navy); font-size: 28px; font-weight: 800; letter-spacing: -.5px; }
.shop-logo small { font-size: 9px; font-weight: 500; letter-spacing: .3px; color: var(--text-muted); }
/* 로고 + 금강산업 공식 홈페이지 링크(2026-10-12). 로고 모양은 그대로, 링크만 아래에 작게 · 왼쪽 정렬 */
.shop-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex: none; min-width: 0; }
.shop-brand-home { font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.shop-brand-home:hover, .shop-brand-home:focus-visible { text-decoration: underline; }

.shop-search { flex: 1; display: flex; border: 2px solid var(--shop-navy); border-radius: var(--radius-sm); overflow: hidden; }
.shop-search input { flex: 1; border: 0; padding: 12px 16px; font-size: 14px; font-family: var(--font); outline: none; }
.shop-search button { border: 0; background: var(--shop-navy); color: #fff; padding: 0 22px; font-size: 13px; font-weight: 600; cursor: pointer; }

.shop-header-side { display: flex; align-items: center; gap: 20px; font-size: 12px; }
.shop-header-side a { color: var(--text-muted); text-decoration: none; }
.shop-header-side a:hover { color: var(--text); }
.shop-tel { display: flex; flex-direction: column; align-items: flex-end; }
.shop-tel b { color: var(--accent); font-size: 18px; }
.shop-tel small { color: var(--text-subtle); }
/* 폰 전용 메뉴·장바구니 버튼 — 파일 끝 "폰" 블록에서만 켠다 */
.shop-mmenu, .shop-mcart { display: none; }

/* 카테고리 바 */
.shop-catnav { background: var(--shop-navy); }
.shop-catnav .shop-wrap { display: flex; gap: 34px; min-height: 48px; }
/* 한 줄에 안 들어가면 옆으로 밀거나 잘리지 않고 둘째 줄로 내린다 — 줄마다 48px (결정 0041) */
.shop-catnav-links { display: flex; flex-wrap: wrap; column-gap: 34px; min-width: 0; }
.shop-catnav-row { display: contents; }  /* 폰에서만 두 줄 묶음으로 쓴다 */
.shop-catnav-links a { display: flex; align-items: center; height: 48px; }
.shop-catnav a { white-space: nowrap; }  /* 항목이 세로로 쪼개지는 것 방지 */
.shop-catnav a { color: #fff; text-decoration: none; font-size: 14px; font-weight: 500; }
.shop-catnav a:hover { text-decoration: underline; }

/* 본문 */
.shop-main { min-height: 50vh; padding: 32px 0 64px; }
.shop-hero { padding: 76px 0; margin-bottom: 48px;
             background: linear-gradient(115deg, var(--shop-navy-deep), #24405F 60%, #3B5F82);
             color: #fff; }
.shop-hero-eyebrow { margin: 0 0 10px; color: rgba(255,255,255,.72); font-size: 15px; }
.shop-hero h1 { margin: 0 0 18px; font-size: 48px; font-weight: 800; letter-spacing: -1.5px; }
.shop-hero-sub { margin: 0 0 28px; color: rgba(255,255,255,.82); line-height: 1.8; font-size: 15px; }
.shop-hero-cta { display: inline-block; padding: 14px 30px; background: var(--accent);
                 border-radius: var(--radius-sm); color: #fff; text-decoration: none;
                 font-size: 15px; font-weight: 700; }
.shop-hero-cta:hover { background: var(--accent-hover); }
.shop-note { padding: 14px 16px; background: var(--accent-soft); border-radius: var(--radius); color: var(--text-muted); font-size: 13px; }

/* ── 메인 히어로 슬라이더 (운영자 관리, /admin/promo) ────────────────
   기존 `.shop-hero`(글자 히어로)는 슬라이드가 하나도 없을 때만 쓰인다.
   여기서는 배경 사진 위에 글자를 얹으므로 겹침 순서(veil → body)가 중요하다. */
.shop-hero-slider { position: relative; margin-bottom: 48px; overflow: hidden;
                    background: var(--shop-navy-deep); color: #fff; }
.shop-hero-track { position: relative; }
.shop-hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden;
                   transition: opacity .5s ease; display: flex; align-items: center; }
/* 첫 장은 흐름 안에 둬서 **높이를 만든다** — 전부 absolute 면 높이가 0 이 된다. */
.shop-hero-slide[data-idx="0"] { position: relative; }
.shop-hero-slide.is-on { opacity: 1; visibility: visible; z-index: 1; }
.shop-hero-bg { position: absolute; inset: 0; display: block; }
.shop-hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-hero-veil { position: absolute; inset: 0; background: #0B1B2B; }
.shop-hero-body { position: relative; z-index: 2; padding: 92px 20px; width: 100%; }
/* `.shop-wrap` 의 좌우 여백(20px)을 `padding: 92px 0` 이 덮어써서, 배경을 넣자마자
   제목이 **화면 끝에 딱 붙었다**(2026-09-07 실측). 아래 본문과도 어긋난다. */
.shop-hero-slide.is-center .shop-hero-body { text-align: center; }
.shop-hero-slide.is-right  .shop-hero-body { text-align: right; }
.shop-hero-slide h1 { margin: 0 0 18px; font-size: 48px; font-weight: 800;
                      letter-spacing: -1.5px; text-shadow: 0 2px 12px rgba(0,0,0,.35); }

.shop-hero-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
                 width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
                 background: rgba(0,0,0,.35); color: #fff; display: grid; place-items: center; padding: 0; }
.shop-hero-nav svg { width: 24px; height: 24px; }
.shop-hero-nav:hover { background: rgba(0,0,0,.55); }
.shop-hero-nav.prev { left: 16px; }
.shop-hero-nav.next { right: 16px; }
.shop-hero-dots { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 3;
                  display: flex; justify-content: center; gap: 8px; }
.shop-hero-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
                 background: rgba(255,255,255,.45); cursor: pointer; }
.shop-hero-dot.is-on { background: #fff; width: 22px; border-radius: 5px; }

/* ── 홍보 팝업 ───────────────────────────────────────────────────── */
.shop-popup { position: fixed; z-index: 60; width: var(--popup-w, 420px); max-width: 92vw;
              background: var(--surface); border: 1px solid var(--border);
              border-radius: var(--radius); box-shadow: 0 18px 50px rgba(0,0,0,.28);
              overflow: hidden;
              /* 화면보다 길면(가로로 든 폰 등) 팝업 안에서 스크롤 — 닫기가 화면 밖으로 나가 못 닫았다 */
              max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; }
.shop-popup.is-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.shop-popup.is-left-bottom { left: 20px; bottom: 20px; }
.shop-popup.is-right-bottom { right: 20px; bottom: 20px; }
.shop-popup-inner { padding: 0 0 4px; }
.shop-popup-title { margin: 0; padding: 14px 16px; font-size: 15px; font-weight: 700;
                    border-bottom: 1px solid var(--border); }
.shop-popup-img { display: block; width: 100%; height: auto; }
.shop-popup-body { padding: 14px 16px; font-size: 14px; line-height: 1.7;
                   color: var(--text); }
.shop-popup-foot { display: flex; align-items: center; justify-content: space-between;
                   gap: 10px; padding: 10px 14px; background: var(--surface-strong);
                   border-top: 1px solid var(--border); font-size: 13px; }
.shop-popup-hide { display: inline-flex; align-items: center; gap: 6px;
                   color: var(--text-muted); cursor: pointer; }
.shop-popup-close { border: 1px solid var(--border); background: var(--surface);
                    border-radius: var(--radius-sm); padding: 6px 14px; cursor: pointer;
                    font-size: 13px; color: var(--text); }
.shop-popup-close:hover { background: var(--surface-strong); }

/* 좌우 화살표(44px, 가장자리 16px)가 본문 칸 안으로 들어오는 폭에서는 글자를
   그만큼 밀어 준다 — 안 그러면 동그란 화살표가 부제 첫 글자를 덮는다.
   640px 블록보다 **앞에** 둔다(뒤에 두면 폰 규칙을 이 규칙이 덮는다). */
@media (max-width: 1560px) {
  .shop-hero-body { padding-left: 72px; padding-right: 72px; }
}

@media (max-width: 640px) {
  .shop-hero-body { padding: 56px 56px; }
  .shop-hero-slide h1 { font-size: 30px; }
  .shop-hero-nav { width: 36px; height: 36px; }
  .shop-hero-nav svg { width: 20px; height: 20px; }
  /* 폰에서는 구석 팝업이 화면을 반쯤 가린다 — 아래에 붙인다.
     가운데 팝업은 관리자가 고른 대로 가운데에 두고, 폭만 화면 안(좌우 8px)으로 줄인다(결정 0043). */
  .shop-popup, .shop-popup.is-left-bottom,
  .shop-popup.is-right-bottom {
    left: 8px; right: 8px; bottom: 8px; top: auto; width: auto; transform: none;
  }
  .shop-popup.is-center { right: auto; bottom: auto; width: var(--popup-w, 420px); max-width: calc(100vw - 16px); }
}

/* 장바구니 — 지금은 못 파는 줄 (조용히 사라지지 않게 알린다) */
.shop-cart-gone { border: 1px solid var(--warn); border-radius: var(--radius);
                  background: var(--surface-strong); padding: 14px 16px; margin-bottom: 16px; }
.shop-cart-gone p { margin: 0 0 8px; font-size: 14px; }
.shop-cart-gone ul { margin: 0 0 8px; padding-left: 18px; }
.shop-cart-gone li { margin: 4px 0; display: flex; align-items: center; gap: 8px;
                     flex-wrap: wrap; font-size: 13px; }
.shop-inline-form { display: inline; }

/* 푸터 */
.shop-footer { border-top: 1px solid var(--border); padding: 28px 0 48px; color: var(--text-muted); font-size: 12px; }
.shop-footer p { margin: 0 0 6px; }
.shop-footer a { color: var(--text-muted); }

@media (max-width: 900px) {
  .shop-header .shop-wrap { flex-wrap: wrap; height: auto; padding-top: 14px; padding-bottom: 14px; gap: 14px; }
  .shop-search { order: 3; flex-basis: 100%; }
  .shop-header-side { margin-left: auto; }
  .shop-catnav .shop-wrap { gap: 20px; }
  .shop-catnav-links { column-gap: 20px; }
  .shop-hero h1 { font-size: 30px; }
  /* 유틸바 — 390px 에서 태그라인 + 링크 4개가 안 들어가 단어 중간에 줄이 갈렸다
     ("로그 인", "고객센 터"). 태그라인은 장식이라 접고, 링크는 안 쪼개지게 둔다. */
  .shop-tagline { display: none; }
  .shop-utility .shop-wrap { justify-content: flex-end; gap: 14px; overflow-x: auto; }
  .shop-util-nav { gap: 14px; }
  .shop-util-nav a { white-space: nowrap; }
}

/* ── 폼 (가입·로그인) ─────────────────────────────────────── */
/* 고객 쪽도 같은 이유로 읽는 글은 좁힌다 (`--shop-read`). */
.shop-form-sub, .shop-muted-lead { max-width: var(--shop-read); }
.shop-form-wrap { max-width: 760px; padding-top: 8px; }
.shop-form-narrow { max-width: 420px; }
.shop-form-title { margin: 24px 0 8px; font-size: 26px; font-weight: 700; }
.shop-form-sub { margin: 0 0 24px; color: var(--text-muted); font-size: 14px; line-height: 1.7; }
.shop-form-foot { margin-top: 20px; color: var(--text-muted); font-size: 13px; line-height: 1.8; }

.shop-alert { margin: 0 0 18px; padding: 12px 14px; border-radius: var(--radius);
              background: #FDECEA; border: 1px solid #F5C6C2; color: var(--danger); font-size: 14px; }
/* 내용이 없는 오류 상자(주문서 `#checkout-error` 는 늘 그려 둔다)가 빈 분홍 띠로 보였다 */
.shop-alert:empty { display: none; }

/* fieldset 은 브라우저 기본 `min-width: min-content` 를 가진다 — 이걸 안 풀면
   안에 넓은 표가 있을 때 fieldset 이 통째로 늘어나 페이지가 가로로 밀린다.
   (표 자체는 이미 스크롤되게 해 놨는데도 fieldset 때문에 소용이 없었다.) */
.shop-form fieldset { min-width: 0; margin: 0 0 22px; padding: 18px 20px;
                      border: 1px solid var(--border);
                      border-radius: var(--radius); }
.shop-form legend { padding: 0 8px; font-size: 13px; font-weight: 700; color: var(--shop-navy); }
.shop-form label { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 600; }
.shop-form label:last-child { margin-bottom: 0; }
.shop-form input[type=text], .shop-form input[type=password], .shop-form input[type=email],
.shop-form input:not([type]) {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-size: 14px; font-family: var(--font); font-weight: 400;
}
.shop-form input[type=file] { display: block; margin-top: 6px; font-weight: 400; }
.shop-form input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.shop-form small { display: block; margin-top: 4px; color: var(--text-subtle); font-weight: 400; }
.shop-form .req { color: var(--danger); }
.shop-form-row { display: flex; gap: 14px; }
.shop-form-row > label { flex: 1; }

/* 중복확인 — 입력칸과 버튼을 한 줄에 (시안 백엔드 27) */
.shop-check-row { display: flex; gap: 8px; align-items: stretch; margin-top: 6px; }
.shop-check-row > input { flex: 1; min-width: 0; margin-top: 0 !important; }
.shop-check-row > button { flex: none; white-space: nowrap; }
.shop-check-msg:empty { display: none; }
.shop-check-msg.is-ok { color: var(--ok, #1a7f37); }
.shop-check-msg.is-bad { color: var(--danger); }

.shop-form label.chk { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; }
.shop-form label.chk input { width: auto; margin: 2px 0 0; }

.shop-btn-primary { width: 100%; padding: 14px; border: 0; border-radius: var(--radius-sm);
                    background: var(--shop-navy); color: #fff; font-size: 15px; font-weight: 700;
                    font-family: var(--font); cursor: pointer; }
.shop-btn-primary:hover { background: var(--shop-navy-deep); }

/* ── 카탈로그 ──────────────────────────────────────────────── */
/* 시안: "전체 카테고리"는 왼쪽에 진한 블록으로 따로 떼어 놓는다 */
.shop-catnav-all { display: flex; gap: 8px; align-items: center; align-self: stretch;
                   margin-left: -20px; padding: 0 22px; font-weight: 700;
                   background: var(--shop-navy-deep); }
.shop-catnav-all svg { width: 18px; height: 18px; }
.shop-catnav-all:hover { text-decoration: none !important; }
/* 지금 보고 있는 메뉴 — 어디에 있는지 모르면 길을 잃는다 */
.shop-catnav a.is-on { position: relative; font-weight: 700; }
.shop-catnav a.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0;
                              height: 3px; background: var(--accent); border-radius: 2px; }
@media (max-width: 900px) {
  .shop-catnav-all { margin-left: 0; padding: 0 12px; }
}

.shop-list-head { display: flex; align-items: baseline; justify-content: space-between;
                  gap: 16px; margin: 8px 0 20px; flex-wrap: wrap; }
.shop-list-head h1 { margin: 0; font-size: 22px; font-weight: 700; }
.shop-count { margin-left: 8px; font-size: 14px; font-weight: 500; color: var(--text-muted); }
.shop-sort select { padding: 8px 12px; border: 1px solid var(--border-strong);
                    border-radius: var(--radius-sm); font-family: var(--font); font-size: 13px; }

/* 좌우 margin 은 auto 여야 한다 — `.shop-wrap` 의 `margin: 0 auto` 를 여기서 0 으로 덮어써
   빵부스러기만 화면 왼쪽 끝에 붙어 있었다(2026-09-16). 로고·본문과 같은 기준선. */
.shop-crumb { margin: 12px auto 20px; font-size: 13px; color: var(--text-muted); }
.shop-crumb a { color: var(--text-muted); }

.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
             gap: 16px; list-style: none; margin: 0; padding: 0; }
.shop-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
             background: var(--surface); transition: box-shadow var(--dur, 150ms) ease; }
.shop-card:hover { box-shadow: var(--shadow-card); }
.shop-card a { text-decoration: none; color: inherit; display: block; }
.shop-card-thumb { display: flex; align-items: center; justify-content: center; height: 150px;
                   background: var(--surface-strong); color: var(--text-subtle);
                   font-size: 40px; font-weight: 800; }
.shop-card-body { padding: 12px 14px 16px; }
.shop-card-cat { margin: 0 0 4px; font-size: 11px; color: var(--accent); font-weight: 600; }
.shop-card-name { margin: 0 0 6px; font-size: 14px; font-weight: 600; line-height: 1.45;
                  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                  overflow: hidden; }
.shop-card-code { margin: 0 0 10px; font-size: 11px; color: var(--text-subtle);
                  font-family: var(--font-mono); }
.shop-card-price { margin: 0 0 6px; font-size: 13px; }
.shop-card-price b { font-size: 17px; }
.shop-card-stock { margin: 0; font-size: 12px; }
.shop-stock-in { color: var(--ok); }
.shop-stock-out { color: var(--text-subtle); }
.shop-price-hidden { color: var(--text-subtle); font-size: 13px; }
.shop-badge { display: inline-block; padding: 2px 6px; border-radius: var(--radius-sm);
              background: var(--accent-soft); color: var(--accent);
              font-size: 11px; font-weight: 700; vertical-align: 2px; }

.shop-pager { display: flex; align-items: center; justify-content: center; gap: 16px;
              margin: 32px 0; font-size: 14px; }
.shop-empty { padding: 60px 0; text-align: center; color: var(--text-muted); }

/* 상세 */
.shop-detail { display: grid; grid-template-columns: 380px 1fr; gap: 36px; align-items: start; }
.shop-detail-thumb { display: flex; align-items: center; justify-content: center; height: 340px;
                     background: var(--surface-strong); border-radius: var(--radius);
                     color: var(--text-subtle); font-size: 88px; font-weight: 800; }
.shop-detail-info h1 { margin: 0 0 6px; font-size: 24px; font-weight: 700; line-height: 1.4; }
.shop-detail-code { margin: 0 0 20px; font-family: var(--font-mono); font-size: 12px;
                    color: var(--text-subtle); }
.shop-detail-price { padding: 18px 0; border-top: 1px solid var(--border);
                     border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.shop-price { margin: 0; font-size: 15px; }
.shop-price b { font-size: 28px; color: var(--shop-navy); }
.shop-price small { color: var(--text-muted); font-size: 12px; }
.shop-badge-line { margin: 8px 0 0; font-size: 12px; color: var(--text-muted); }
.shop-btn-inline { display: inline-block; margin-right: 6px; padding: 8px 16px;
                   border: 1px solid var(--shop-navy); border-radius: var(--radius-sm);
                   color: var(--shop-navy); text-decoration: none; font-size: 13px; font-weight: 600; }

.shop-spec { width: 100%; border-collapse: collapse; font-size: 13px; }
.shop-spec th, .shop-spec td { padding: 9px 0; border-bottom: 1px solid var(--border);
                               text-align: left; vertical-align: top; }
.shop-spec th { width: 120px; color: var(--text-muted); font-weight: 600; }
.shop-spec small { color: var(--text-subtle); }
.shop-muted { color: var(--text-subtle); }

.shop-detail-desc { margin-top: 48px; }
.shop-detail-desc h2 { font-size: 16px; border-bottom: 2px solid var(--shop-navy);
                       padding-bottom: 10px; }
.shop-detail-text { margin: 20px 0; font-size: 14px; line-height: 1.8; white-space: pre-line;
                    overflow-wrap: anywhere; }
.shop-detail-images { margin: 20px auto 0; max-width: 1000px; }
.shop-detail-images img { display: block; width: 100%; height: auto; }
/* 상세 아래 "전체 옵션" 표 — 옵션이 많으면 칸 안에서만 세로 스크롤, 머리줄(색상·규격·상품코드·재고)은
   고정(2026-09-30). KHC-S 107줄이 PC 페이지를 4,000px 넘게 늘였다. 폰(≤640)은 아래 폰 블록의 360px.
   머리줄 밑선은 box-shadow 로 — border-collapse 표는 고정된 칸의 border 가 스크롤과 함께 사라진다. */
.shop-variant-scroll { max-height: 480px; overflow-y: auto; border: 1px solid var(--border);
                       border-radius: var(--radius); }
.shop-variant-scroll .shop-table { margin: 0; }
.shop-variant-scroll thead th { position: sticky; top: 0; z-index: 1; border-bottom: 0;
                                box-shadow: inset 0 -1px 0 var(--border); }
.shop-variant-scroll tbody tr:last-child td { border-bottom: 0; }
/* 비교 선택 버튼(최소 44px)이 줄을 67px(폰은 글자가 두 줄로 꺾여 79px)로 늘여 한 칸에 6줄(폰 4줄)만
   보였다(2026-10-19 요청). 이 표만 칸 여백·버튼을 줄인다. */
.shop-variant-scroll .shop-table th, .shop-variant-scroll .shop-table td { padding: 6px 10px; vertical-align: middle; }
.shop-variant-scroll .shop-compare-pick { min-height: 0; padding: 3px 10px; font-size: 12px;
                                          line-height: 1.4; white-space: nowrap; }
@media (max-width: 640px) {
  .shop-variant-scroll .shop-table th, .shop-variant-scroll .shop-table td { padding: 6px 5px; font-size: 12px; }
  .shop-variant-scroll .shop-compare-pick { padding: 3px 7px; }
}

@media (max-width: 900px) {
  .shop-detail { grid-template-columns: 1fr; gap: 20px; }
  .shop-detail-thumb { height: 220px; font-size: 60px; }
}

/* ── 장바구니 · 주문 ──────────────────────────────────────── */
.shop-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 16px; }
.shop-table th, .shop-table td { padding: 11px 10px; border-bottom: 1px solid var(--border);
                                 text-align: left; vertical-align: top; }
.shop-table thead th { background: var(--surf-2, var(--surface-strong)); color: var(--text-muted);
                       font-weight: 600; font-size: 12px; }
.shop-table .num { text-align: right; }
.shop-table td small { display: block; margin-top: 2px; font-size: 11px; }
.shop-table a { color: var(--text); font-weight: 600; }

.shop-qty-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.shop-qty-form label { font-size: 12px; color: var(--text-muted); }
/* 장바구니 수량 자동 저장 안내(2026-10-20) — 저장 중·저장됨·오류. 줄을 바꿔 아래에 */
.shop-cart-qty-msg { flex-basis: 100%; min-height: 1.4em; font-size: 12px; color: var(--text-muted); }
.shop-cart-qty-msg.is-ok { color: #1a7f37; }
.shop-cart-qty-msg.is-error { color: var(--danger); font-weight: 600; }
/* 주문서 납기일(희망) 안내 — 입력칸 바로 아래(2026-10-20) */
.shop-want-note { margin: -4px 0 10px; font-size: 12px; }
.shop-qty-form input { width: 68px; padding: 6px 8px; margin-left: 4px;
                       border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
                       font-family: var(--font); }
.shop-qty-form button, .shop-link-btn { padding: 6px 12px; border: 1px solid var(--border-strong);
                       background: var(--surface); border-radius: var(--radius-sm);
                       font-family: var(--font); font-size: 12px; cursor: pointer; }
.shop-link-btn.shop-danger { color: var(--danger); border-color: var(--danger); }

.shop-addcart { display: flex; align-items: flex-end; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.shop-addcart label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.shop-addcart input { display: block; width: 92px; margin-top: 6px; padding: 10px;
                      border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
                      font-family: var(--font); font-size: 14px; }
.shop-addcart .shop-btn-primary { width: auto; padding: 12px 28px; }
.shop-addcart-hint { margin-top: 8px; font-size: 12px; }

.shop-cart-foot { padding: 20px 0; border-top: 2px solid var(--shop-navy); text-align: right; }
.shop-cart-foot p { margin: 0 0 8px; font-size: 14px; }
.shop-cart-foot b { font-size: 20px; color: var(--shop-navy); }
.shop-btn-wide { display: inline-block; width: auto; padding: 14px 44px; margin-top: 10px;
                 text-decoration: none; text-align: center; }

.shop-ship-pick { margin-bottom: 24px; }
.shop-ship-pick fieldset { margin: 0 0 16px; padding: 16px 20px; border: 1px solid var(--border);
                           border-radius: var(--radius); }
.shop-ship-pick legend { padding: 0 8px; font-size: 13px; font-weight: 700; color: var(--shop-navy); }
.shop-ship-pick .chk { display: inline-flex; align-items: center; gap: 6px; margin-right: 24px;
                       font-size: 14px; }
.shop-ship-pick .req { color: var(--danger); }
.shop-ship-pick .shop-muted { display: block; margin: 10px 0 0; font-size: 12px; }

.shop-quote { padding: 18px 20px; margin-bottom: 24px; background: var(--accent-soft);
              border-radius: var(--radius); }
.shop-quote h2 { margin: 0 0 8px; font-size: 14px; }
.shop-quote-fee { margin: 0 0 6px; font-size: 15px; }
.shop-quote-fee b { font-size: 22px; color: var(--shop-navy); }
.shop-warn { margin: 8px 0 0; padding: 10px 12px; border-radius: var(--radius-sm);
             background: #FFF7E6; border: 1px solid #F0D9A8; color: #8A5A00; font-size: 12px; }

.shop-total { padding: 18px 20px; margin: 24px 0; border: 2px solid var(--shop-navy);
              border-radius: var(--radius); text-align: right; }
.shop-total p { margin: 0 0 6px; font-size: 14px; }
.shop-total-final { padding-top: 10px; border-top: 1px solid var(--border); font-size: 16px; }
.shop-total-final b { font-size: 24px; color: var(--shop-navy); }

.shop-panel { margin-bottom: 32px; }
.shop-panel h2 { font-size: 15px; padding-bottom: 8px; border-bottom: 2px solid var(--shop-navy); }

/* ── 시안 정합 (Phase 6) ───────────────────────────────────── */

/* 빵부스러기 */
.shop-crumb { padding: 16px 20px 0; font-size: 12px; color: var(--text-muted); }
.shop-crumb a { color: var(--text-muted); text-decoration: none; }
.shop-crumb a:hover { text-decoration: underline; }

/* 목록 2단 레이아웃 — 좌측 카테고리 + 우측 그리드 */
.shop-layout { display: grid; grid-template-columns: 232px 1fr; gap: 32px; align-items: start; }
.shop-side { position: sticky; top: 16px; }
.shop-side-title { margin: 0; padding: 16px 18px; background: var(--shop-navy); color: #fff;
                   font-size: 15px; font-weight: 700;
                   border-radius: var(--radius) var(--radius) 0 0; }
.shop-side-list { list-style: none; margin: 0 0 20px; padding: 0;
                  border: 1px solid var(--border); border-top: 0;
                  border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; }
.shop-side-list a { display: flex; justify-content: space-between; align-items: center;
                    padding: 12px 18px; border-bottom: 1px solid var(--border);
                    color: var(--text); text-decoration: none; font-size: 13px; font-weight: 500; }
.shop-side-list li:last-child a { border-bottom: 0; }
.shop-side-list a:hover { background: var(--surf-2, var(--surface-strong)); }
.shop-side-list a.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 700; }

.shop-side-cta { padding: 18px; background: var(--accent-soft); border-radius: var(--radius); }
.shop-side-cta b { display: block; margin-bottom: 8px; color: var(--shop-navy); font-size: 14px; }
.shop-side-cta p { margin: 0 0 12px; font-size: 12px; line-height: 1.6; color: var(--text-muted); }
.shop-side-cta a { display: inline-block; padding: 8px 14px; background: var(--surface);
                   border: 1px solid var(--shop-navy); border-radius: var(--radius-sm);
                   color: var(--shop-navy); text-decoration: none; font-size: 12px; font-weight: 600; }

.shop-sort { display: flex; gap: 8px; }

/* 재고 칩 */
.shop-chip { display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm);
             font-size: 11px; font-weight: 600; }
.shop-chip-in { background: #E7F5EE; color: var(--ok); }
.shop-chip-out { background: var(--surface-strong); color: var(--text-subtle); }

/* 장바구니 2단 — 좌측 목록 + 우측 금액 요약 */
.shop-cart-layout { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; }
.shop-cart-actions { margin-top: 8px; }
.shop-cart-actions .shop-link-btn { display: inline-block; text-decoration: none; color: var(--text); }

.shop-summary { position: sticky; top: 16px; padding: 20px;
                border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.shop-summary h2 { margin: 0 0 16px; font-size: 16px; font-weight: 700; }
.shop-summary dl { display: grid; grid-template-columns: 1fr auto; gap: 10px 8px;
                   margin: 0 0 16px; font-size: 13px; }
.shop-summary dt { color: var(--text-muted); }
.shop-summary dd { margin: 0; text-align: right; }
.shop-summary-total { margin: 0 0 4px; padding-top: 14px; border-top: 1px solid var(--border);
                      display: flex; justify-content: space-between; align-items: baseline;
                      font-size: 14px; }
.shop-summary-amt { white-space: nowrap; }
.shop-summary-total b { font-size: 22px; color: var(--accent); }
.shop-summary-note { margin: 0 0 16px; font-size: 11px; }
.shop-summary .shop-btn-wide { display: block; width: 100%; padding: 14px; }

/* 하단 신뢰 배너 — 시안: 아이콘 + 2줄 텍스트가 가로로 6칸 */
.shop-features { border-top: 1px solid var(--border); background: var(--surface-strong); }
.shop-features .shop-wrap { display: grid; grid-template-columns: repeat(6, 1fr);
                            gap: 18px; padding-top: 26px; padding-bottom: 26px; }
.shop-features > .shop-wrap > div { display: flex; gap: 10px; align-items: center; }
.shop-features svg { flex: none; width: 30px; height: 30px; color: var(--accent); }
.shop-features b { display: block; margin-bottom: 3px; font-size: 13px; color: var(--shop-navy); }
.shop-features span { font-size: 11px; line-height: 1.45; color: var(--text-muted); }
@media (max-width: 900px) {
  .shop-features .shop-wrap { grid-template-columns: repeat(2, 1fr); }
}

/* 푸터 4단 */
.shop-footer { border-top: 0; background: var(--shop-navy-deep); color: rgba(255,255,255,.72);
               padding: 40px 0 24px; font-size: 12px; }
.shop-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 0.8fr; gap: 28px; }
.shop-footer h3 { margin: 0 0 12px; font-size: 13px; color: #fff; font-weight: 700; }
.shop-footer p { margin: 0 0 6px; line-height: 1.7; }
.shop-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.shop-footer a:hover { color: #fff; text-decoration: underline; }
.shop-footer-brand b { display: block; margin-bottom: 10px; font-size: 20px; font-weight: 800; color: #fff; }
.shop-footer-tel { font-size: 20px; font-weight: 800; color: #fff; }
/* Override the generic footer paragraph margins, including the mobile rule. */
.shop-footer .shop-copyright { box-sizing: border-box; width: 100%; max-width: var(--shop-wrap);
                  margin: 28px auto 0; padding: 18px 20px 0;
                  border-top: 1px solid rgba(255,255,255,.12); text-align: center;
                  white-space: normal; overflow-wrap: anywhere;
                  color: rgba(255,255,255,.5); }

@media (max-width: 1000px) {
  .shop-layout, .shop-cart-layout { grid-template-columns: 1fr; }
  .shop-side, .shop-summary { position: static; }
  /* 모바일에선 사이드바가 상단에 쌓여 카테고리 27개가 화면을 다 먹는다 — 스크롤 영역으로 제한. */
  .shop-side-list { max-height: 240px; overflow-y: auto; }
  .shop-features .shop-wrap { grid-template-columns: repeat(2, 1fr); }
  .shop-footer-grid { grid-template-columns: 1fr 1fr; }
}

/* 홈 — 주요 카테고리 · 바로가기 */
.shop-home-cats { margin-bottom: 48px; }
.shop-home-cats h2 { margin: 0 0 4px; font-size: 22px; font-weight: 700; }
.shop-home-cats > p { margin: 0 0 20px; font-size: 14px; }
.shop-home-cats ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px;
                     list-style: none; margin: 0; padding: 0; }
.shop-home-cats li { min-width: 0; }
.shop-home-cats a { display: block; min-width: 0; padding: 20px; text-align: center; text-decoration: none;
                    color: inherit; border: 1px solid var(--border); border-radius: var(--radius);
                    background: var(--surface); }
.shop-home-cats a:hover { box-shadow: var(--shadow-card); border-color: var(--border-strong); }
/* 사진이 올라오면 글자 썸네일 대신 사진 — 자리는 그대로라 레이아웃이 안 흔들린다 */
.shop-home-cat-photo { overflow: hidden; background: var(--surface-strong); }
.shop-home-cat-photo img { width: 100%; height: 100%; object-fit: contain; }
.shop-home-cat-thumb { display: flex; align-items: center; justify-content: center;
                       width: 64px; height: 64px; margin: 0 auto 12px;
                       background: var(--surface-strong); border-radius: 50%;
                       color: var(--text-subtle); font-size: 26px; font-weight: 800; }
.shop-home-cats b { display: block; font-size: 14px; }
.shop-home-cats small { display: block; overflow: hidden; text-overflow: ellipsis;
                        white-space: nowrap; color: var(--text-subtle); font-size: 11px; }

/* 시안: 카테고리(좌) + 공지사항(우) */
/* `1fr` 은 min-content 가 바닥이라 긴 텍스트가 칸을 밀어낸다 — `minmax(0,1fr)` 로 잡는다.
   (대표 품목 설명이 길어 페이지 전체가 가로로 넘쳤다.) */
.shop-home-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px;
                   align-items: start; }
.shop-home-split > * { min-width: 0; }
/* 우측 세로 카드(2026-10-15) — 공지사항 아래 주문 시기 추천 · 주문 템플릿 · 주문서 이어쓰기. 틀·제목은 공지 카드와 같은 규칙을 함께 쓴다. */
.shop-home-side { display: flex; flex-direction: column; gap: 16px; margin-bottom: 48px; }
.shop-home-notice, .shop-home-box { padding: 22px 24px; border: 1px solid var(--border);
                    border-radius: var(--radius); background: var(--surface); }
.shop-home-notice h2, .shop-home-box h2 { display: flex; justify-content: space-between; align-items: baseline;
                       margin: 0 0 12px; font-size: 17px; font-weight: 700; }
.shop-home-notice h2 a, .shop-home-box h2 a { font-size: 12px; font-weight: 500; color: var(--text-muted);
                         text-decoration: none; }
.shop-home-notice ul, .shop-home-box ul { margin: 0; padding: 0; list-style: none; }
.shop-home-notice li { display: flex; gap: 12px; justify-content: space-between;
                       padding: 11px 0; border-bottom: 1px solid var(--border);
                       font-size: 13px; }
.shop-home-notice li:last-child { border-bottom: 0; }
.shop-home-notice li a { color: inherit; text-decoration: none; overflow: hidden;
                         text-overflow: ellipsis; white-space: nowrap; }
.shop-home-notice li a:hover { text-decoration: underline; }
.shop-home-notice time { flex: none; color: var(--text-subtle); font-size: 12px; }
.shop-home-box p { margin: 0 0 8px; font-size: 13px; }
.shop-home-templates li { border-bottom: 1px solid var(--border); }
.shop-home-templates li:last-child { border-bottom: 0; }
.shop-home-templates li a { display: flex; gap: 12px; justify-content: space-between; align-items: baseline;
                            padding: 11px 0; color: inherit; text-decoration: none; font-size: 13px; }
.shop-home-templates li b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.shop-home-templates li small { flex: none; color: var(--text-subtle); font-size: 12px; }
.shop-home-templates li a:hover b { text-decoration: underline; }
.shop-home-box-more { margin: 8px 0 0 !important; font-size: 12px !important; }
.shop-home-box-more a, .shop-home-templates .shop-muted a { color: var(--text-muted); }
.shop-home-resume .shop-btn-primary { display: flex; justify-content: center; width: 100%; margin-top: 6px; }
.shop-home-cat-eg { display: block; margin-top: 2px; overflow: hidden;
                    text-overflow: ellipsis; white-space: nowrap; }

/* 홈 — 자주 주문하는 상품 · 비슷한 상품 (결정 0044). 카드는 상품 목록 카드 그대로.
   PC 는 4칸 격자, 1000px 이하는 한 줄로 옆으로 민다 — 8개를 쌓으면 홈이 카드로 길어진다. */
.shop-home-picks { margin-bottom: 40px; }
.shop-home-picks h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
                      margin: 0 0 14px; font-size: 20px; font-weight: 700; }
.shop-home-picks h2 small { color: var(--text-muted); font-size: 12px; font-weight: 500; }
.shop-pick-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
                 margin: 0; padding: 0; list-style: none; }
.shop-pick { display: flex; flex-direction: column; }
.shop-pick > a, .shop-pick-box { flex: 1; }
.shop-pick-opt { margin: 0 0 10px; font-size: 12px; color: var(--text-muted); }
.shop-pick-meta { margin: 0 0 4px; font-size: 12px; color: var(--text-muted); }
.shop-pick-meta span { white-space: nowrap; }  /* 좁은 폰에서 날짜가 "2026-09-/24" 로 갈렸다 */
.shop-pick-meta b { color: var(--text); }
.shop-pick-actions { padding: 0 14px 14px; }
.shop-pick-actions form { margin: 0; }
.shop-pick-actions .shop-btn-primary,
.shop-pick-actions .shop-btn-line { display: block; width: 100%; box-sizing: border-box; padding: 9px;
                                    font-size: 13px; text-align: center; text-decoration: none; }
/* 지금 팔지 않는 품목 — 흐리게, 눌러도 안 떠오른다(견적문의 버튼만 산다) */
.shop-pick.is-off .shop-card-thumb, .shop-pick.is-off .shop-card-body { opacity: .5; }
.shop-pick.is-off:hover { transform: none; box-shadow: none; border-color: var(--border); }
@media (max-width: 1000px) {
  .shop-pick-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
                   margin: 0 -20px; padding: 0 20px 6px; scroll-padding: 0 20px; scrollbar-width: none; }
  .shop-pick-row::-webkit-scrollbar { display: none; }
  .shop-pick-row > li { flex: 0 0 calc((100% - 24px) / 3.3); scroll-snap-align: start; }
}
@media (max-width: 640px) {
  .shop-home-picks { margin-bottom: 28px; }
  .shop-home-picks h2 { font-size: 17px; }
  .shop-pick-row { gap: 10px; }
  .shop-pick-row > li { flex-basis: 44%; }
  .shop-pick-actions { padding: 0 10px 10px; }
}

.shop-home-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
                   margin-bottom: 40px; }
.shop-home-link { display: block; padding: 24px; border: 1px solid var(--border);
                  border-radius: var(--radius); text-decoration: none; color: inherit;
                  background: var(--surface); }
.shop-home-link:hover { box-shadow: var(--shadow-card); }
.shop-home-link svg { width: 34px; height: 34px; margin-bottom: 12px; color: var(--accent); }
.shop-home-link b { display: block; margin-bottom: 6px; font-size: 16px; }
.shop-home-link span { display: block; font-size: 13px; color: var(--text-muted); line-height: 1.6; }
/* 시안의 "견적문의 하기 →" — 카드 전체가 링크지만 눌러야 할 곳을 보여준다 */
.shop-home-link em { display: inline-block; margin-top: 14px; padding: 7px 14px;
                     border: 1px solid var(--border-strong); border-radius: 6px;
                     font-size: 12px; font-style: normal; font-weight: 700;
                     color: var(--accent); background: var(--surface); }
.shop-home-link-primary { background: var(--shop-navy); border-color: var(--shop-navy); color: #fff; }
.shop-home-link-primary span { color: rgba(255,255,255,.78); }
.shop-home-link-primary svg { color: #fff; }
.shop-home-link-primary em { border-color: rgba(255,255,255,.4); color: #fff;
                             background: transparent; }
@media (max-width: 1000px) {
  .shop-home-split { grid-template-columns: 1fr; }
}
.shop-home-note { margin-bottom: 40px; }

@media (max-width: 1000px) {
  .shop-home-cats ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shop-home-links { grid-template-columns: 1fr; }
  .shop-hero h1 { font-size: 32px; }
}

/* 사이드바 2단 (대분류 > 소분류)
   ※ 자식 표시를 ::before 로 넣으면 안 된다 — 링크가 flex(space-between) 라서 의사요소가
      세 번째 flex 아이템이 되어 [·]…[이름]…[개수] 로 흩어진다. 들여쓰기는 padding 으로. */
.shop-side-parent { background: var(--surf-2, var(--surface-strong)); font-weight: 700 !important; }
.shop-side-child { padding-left: 32px !important; font-size: 12.5px !important;
                   color: var(--text-muted) !important; }
.shop-side-child.is-active { color: var(--accent) !important; }

/* 썸네일 — 상품명 첫 글자는 전부 "금강"이라 구분이 안 된다. 카테고리 머리글자를 쓴다. */
.shop-card-thumb, .shop-detail-thumb { letter-spacing: -2px; }

/* ── 진행 스텝 (결제창 · 주문상세) ─────────────────────────── */
.shop-steps { display: flex; align-items: center; list-style: none; margin: 0 0 28px; padding: 0; }
.shop-steps li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-subtle); }
.shop-steps li + li::before { content: ""; width: 60px; height: 1px; background: var(--border-strong);
                              margin: 0 14px; }
.shop-step-dot { display: flex; align-items: center; justify-content: center;
                 width: 24px; height: 24px; border-radius: 50%;
                 background: var(--surface-strong); color: var(--text-subtle);
                 font-size: 12px; font-weight: 700; }
.shop-steps .is-done { color: var(--accent); }
.shop-steps .is-done .shop-step-dot { background: var(--accent); color: #fff; }
.shop-steps .is-current { color: var(--shop-navy); font-weight: 700; }
.shop-steps .is-current .shop-step-dot { background: var(--shop-navy); color: #fff; }

/* ── 주문서 2단 ─────────────────────────────────────────── */
.shop-checkout-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.shop-panel-box { padding: 20px 22px; margin-bottom: 22px;
                  border: 1px solid var(--border); border-radius: var(--radius); }
.shop-panel-box.is-required { border-color: var(--danger); }
.shop-panel-box h2 { margin: 0 0 16px; font-size: 15px; font-weight: 700; }
.shop-panel-box .req { color: var(--danger); }

.shop-ship-grid { display: grid; grid-template-columns: 1fr 260px; gap: 22px; align-items: start; }
.shop-ship-opt { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px;
                 margin-bottom: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm);
                 cursor: pointer; }
.shop-ship-opt.is-on { border-color: var(--accent); background: var(--accent-soft); }
.shop-ship-opt input { margin-top: 3px; }
.shop-ship-opt b { display: block; font-size: 13.5px; font-weight: 600; }
.shop-ship-opt em { font-style: normal; color: var(--ok); font-size: 11px; font-weight: 700; }
.shop-ship-opt small { color: var(--text-muted); font-size: 11.5px; }
.shop-ship-sub { padding: 12px 0 4px; margin-top: 6px; border-top: 1px dashed var(--border); }
.shop-ship-sublabel { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--shop-navy); }
.shop-required-msg { margin: 8px 0 0; color: var(--danger); font-size: 12px; font-weight: 600; }

.shop-ship-preview { padding: 16px; background: var(--surf-2, var(--surface-strong));
                     border-radius: var(--radius); }
.shop-ship-preview h3 { margin: 0 0 12px; font-size: 13px; font-weight: 700; }
.shop-ship-preview dl { display: grid; grid-template-columns: 1fr auto; gap: 8px;
                        margin: 0; font-size: 12px; }
.shop-ship-preview dt { color: var(--text-muted); }
.shop-ship-preview dd { margin: 0; text-align: right; font-weight: 600; }
.shop-ship-reason { margin: 12px 0 0; font-size: 11px; line-height: 1.6; }
.shop-bank { margin: 10px 0 0; font-weight: 600; }

.shop-summary-items { list-style: none; margin: 0 0 16px; padding: 0 0 14px;
                      border-bottom: 1px solid var(--border); }
/* 시안(결제창): 썸네일 | 이름·옵션·수량 | 금액. 가운데만 늘어나야 한다 —
   minmax(0,1fr) 이 아니면 긴 상품명이 칸을 밀어 금액이 밖으로 나간다. */
.shop-summary-items li { display: grid; align-items: center; gap: 10px;
                         grid-template-columns: auto minmax(0, 1fr) auto;
                         padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: 12.5px; }
.shop-summary-items li:last-child { border-bottom: 0; }
.shop-summary-thumb { display: inline-flex; width: 44px; height: 44px; flex: none;
                      align-items: center; justify-content: center; overflow: hidden;
                      border: 1px solid var(--border); border-radius: 6px;
                      background: var(--surface-2); color: var(--text-subtle);
                      font-size: 11px; font-weight: 700; }
.shop-summary-thumb img { width: 100%; height: 100%; object-fit: contain; }
.shop-summary-info { min-width: 0; display: block; }
.shop-summary-items b { display: block; font-weight: 600; }
.shop-summary-items small { display: block; color: var(--text-subtle); font-size: 11px; }
.shop-summary-items li > .shop-nowrap { text-align: right; font-weight: 700; }
.shop-summary button.shop-btn-wide { border: 0; cursor: pointer; }
.shop-summary button.shop-btn-wide:disabled { background: var(--border-strong); cursor: not-allowed; }

/* ── 마이페이지 사이드바 ─────────────────────────────────── */
/* `1fr` 은 min-content 를 바닥으로 삼는다 — 표가 넓으면 칸이 늘어나 페이지가 밀린다.
   `minmax(0, 1fr)` 로 칸이 줄어들 수 있게 하고, 표는 아래에서 제 안에서만 밀게 한다. */
.shop-mypage-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr);
                      gap: 28px; align-items: start; }
/* 본문 칸이 넓은 표를 담는다 — 칸 안에서만 밀리게 (1024px 에서 페이지가 밀렸다). */
.shop-mypage-layout > :last-child { min-width: 0; overflow-x: auto; }
.shop-mypage-nav { position: sticky; top: 16px; }
.shop-mypage-profile { display: flex; align-items: center; gap: 12px; padding: 18px;
                       background: var(--shop-navy); color: #fff;
                       border-radius: var(--radius) var(--radius) 0 0; }
.shop-mypage-avatar { display: flex; align-items: center; justify-content: center;
                      width: 38px; height: 38px; border-radius: 50%;
                      background: rgba(255,255,255,.15); font-size: 16px; font-weight: 700; }
.shop-mypage-profile b { display: block; font-size: 13px; margin-bottom: 3px; }
.shop-mypage-menu { padding: 6px 0 12px; border: 1px solid var(--border); border-top: 0;
                    border-radius: 0 0 var(--radius) var(--radius); }
.shop-mypage-menu h3 { margin: 14px 0 4px; padding: 0 16px; font-size: 12px;
                       font-weight: 700; color: var(--shop-navy); }
.shop-mypage-menu a, .shop-mypage-menu .is-soon {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px 8px 22px; font-size: 12.5px; color: var(--text-muted); text-decoration: none; }
.shop-mypage-menu a:hover { background: var(--surf-2, var(--surface-strong)); color: var(--text); }
.shop-mypage-menu a.is-active { color: var(--accent); font-weight: 700; background: var(--accent-soft); }
.shop-mypage-menu .is-soon { color: var(--text-subtle); }
.shop-mypage-menu .is-soon small { font-size: 10px; }
.shop-mypage-logout { display: block; margin-top: 14px; padding: 11px; text-align: center;
                      border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
                      color: var(--text-muted); text-decoration: none; font-size: 12.5px; }

/* 주문 상태 배지 */
.shop-ost { display: inline-block; padding: 3px 9px; border-radius: var(--radius-sm);
            font-size: 11.5px; font-weight: 700; }
.shop-ost-PENDING   { background: var(--accent-soft); color: var(--accent); }
.shop-ost-CONFIRMED { background: #E7F5EE; color: var(--ok); }
.shop-ost-PREPARING { background: #FFF4E0; color: #A96A00; }
.shop-ost-SHIPPED   { background: #E9F0FA; color: #2D5FA9; }
.shop-ost-DELIVERED { background: #E7F5EE; color: var(--ok); }
.shop-ost-CANCELLED { background: var(--surface-strong); color: var(--text-subtle); }

/* 상태 탭은 12개까지 늘어난다(주문상태 전체). 좁은 화면에서 줄이 min-content 로
   버티면 그리드 한 칸이 통째로 넓어져 **페이지 전체가 가로로 스크롤**된다.
   탭 줄 안에서만 밀리게 가둔다. */
.shop-tabs { display: flex; gap: 4px; margin-bottom: 18px; min-width: 0;
             overflow-x: auto; -webkit-overflow-scrolling: touch;
             border-bottom: 1px solid var(--border); }
.shop-tabs a { flex: none; padding: 10px 16px; font-size: 13px; color: var(--text-muted);
               white-space: nowrap;
               text-decoration: none; border-bottom: 2px solid transparent; }
.shop-tabs a.is-active { color: var(--shop-navy); font-weight: 700; border-bottom-color: var(--shop-navy); }
/* 주문 내역 보기 전환 — 쇼핑몰 주문 / 모든 경로(결정 0095). 상태 탭 위 작은 단추 줄 */
.oa-switch { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.oa-switch a { padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted);
               font-size: 13px; text-decoration: none; background: var(--surface); }
.oa-switch a.is-active { border-color: var(--shop-navy); color: #fff; background: var(--shop-navy); font-weight: 700; }
.oa-switch small { font-size: 11px; opacity: .85; }

.shop-cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 28px; }
.shop-cards3 section { min-width: 0; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); }
.shop-cards3 h3 { margin: 0 0 12px; font-size: 13px; font-weight: 700; }
.shop-cards3 dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; margin: 0; font-size: 12.5px; }
.shop-cards3 dt { color: var(--text-muted); white-space: nowrap; }
.shop-cards3 dd { margin: 0; }

@media (max-width: 1000px) {
  .shop-checkout-layout, .shop-ship-grid, .shop-mypage-layout, .shop-cards3 {
    grid-template-columns: minmax(0, 1fr); }
  .shop-mypage-nav { position: static; }
  .shop-steps li + li::before { width: 20px; margin: 0 6px; }
}

/* 구매 확인 — 시안 결제창 하단 */
.shop-confirm { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 4px;
                font-size: 12px; color: var(--text-muted); line-height: 1.6; }
.shop-confirm input { margin-top: 2px; }

/* 주문내역 · 주문상세 */
.shop-filter { display: flex; gap: 8px; align-items: center; margin-bottom: 18px; }
.shop-filter input { flex: 1; max-width: 320px; padding: 9px 12px;
                     border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
                     font-family: var(--font); font-size: 13px; }
.shop-filter button { padding: 9px 20px; border: 0; border-radius: var(--radius-sm);
                      background: var(--shop-navy); color: #fff; font-family: var(--font);
                      font-size: 13px; font-weight: 600; cursor: pointer; }
.shop-filter a { font-size: 12px; color: var(--text-muted); }

.shop-detail-head { display: flex; align-items: center; justify-content: space-between; }
/* 고객 주문 상세 — 주문 관련 기능 한 묶음(다시 담기 · 서류 출력 ▾ · 교환·반품 신청 · 취소), 같은 높이·테두리(2026-10-20) */
.shop-order-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.shop-order-actions form { margin: 0; }
.shop-act-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 16px;
                border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface);
                color: var(--text); font: 600 13px/1 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer;
                transition: border-color .15s ease, background .15s ease, color .15s ease; }
.shop-act-btn:hover, .shop-act-btn:focus-visible { border-color: var(--shop-navy); color: var(--shop-navy); background: #f2f5fa; }
.shop-act-btn:active { transform: translateY(1px); }
.shop-act-btn.shop-danger { color: var(--danger); border-color: var(--danger); }
/* 구매확정(2026-10-20) — 묶음에서 하나만 채운 버튼 */
.shop-act-btn.shop-act-primary { background: var(--shop-navy); border-color: var(--shop-navy); color: #fff; }
.shop-act-btn.shop-act-primary:hover, .shop-act-btn.shop-act-primary:focus-visible { background: var(--shop-navy-deep); color: #fff; }
.shop-act-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.shop-confirm-note { margin: 8px 0 0; font-size: 13px; color: var(--shop-navy); }
.shop-act-btn.shop-danger:hover, .shop-act-btn.shop-danger:focus-visible { background: #fdf0f0; color: var(--danger); }
.shop-act-menu { position: relative; }
.shop-act-menu > summary { list-style: none; }
.shop-act-menu > summary::-webkit-details-marker { display: none; }
.shop-act-menu > summary::after { content: ""; width: 6px; height: 6px; margin: -3px 0 0 2px; border: solid currentColor;
                                  border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .15s ease; }
.shop-act-menu[open] > summary { border-color: var(--shop-navy); color: var(--shop-navy); }
.shop-act-menu[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.shop-act-pop { position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; min-width: 150px; padding: 4px 0;
                border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface);
                box-shadow: 0 8px 24px rgba(15, 30, 60, .14); }
.shop-act-pop a { display: block; padding: 10px 16px; font-size: 13px; color: var(--text); text-decoration: none; white-space: nowrap; }
.shop-act-pop a:hover, .shop-act-pop a:focus-visible { background: #f2f5fa; color: var(--shop-navy); }
.shop-order-head { padding: 16px 18px; margin-bottom: 24px;
                   background: var(--surf-2, var(--surface-strong)); border-radius: var(--radius); }
.shop-order-head p { margin: 0 0 4px; font-size: 14px; }
.shop-order-head p:last-child { margin: 0; font-size: 12px; }
.shop-order-head b { font-family: var(--font-mono); margin-right: 8px; }
.shop-order-total { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border);
                    display: flex; justify-content: space-between; font-size: 13px; }
.shop-order-total b { font-size: 17px; color: var(--shop-navy); }

.shop-timeline { list-style: none; margin: 0; padding: 0; }
.shop-timeline li { display: grid; grid-template-columns: 150px auto 1fr; gap: 12px;
                    padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.shop-timeline-at { color: var(--text-subtle); font-size: 12px; }

.shop-status-guide { margin-top: 40px; padding: 22px;
                     background: var(--surf-2, var(--surface-strong)); border-radius: var(--radius); }
.shop-status-guide h2 { margin: 0 0 14px; font-size: 14px; }
.shop-status-guide ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
                        list-style: none; margin: 0; padding: 0; }
.shop-status-guide b { display: block; margin-bottom: 3px; font-size: 12.5px; color: var(--shop-navy); }
.shop-status-guide span { font-size: 11.5px; color: var(--text-muted); line-height: 1.6; }

@media (max-width: 1000px) {
  .shop-status-guide ul { grid-template-columns: 1fr; }
  .shop-timeline li { grid-template-columns: 1fr; gap: 2px; }
  .shop-tabs { overflow-x: auto; }
}

/* 넓은 표가 페이지 폭을 밀면 화면 전체가 좌우로 흔들린다. 표 안에서만 밀게 한다.

   **표에 `display:block` 을 걸지 않는다.** 그러면 thead/tbody 는 여전히
   table-header-group 이라 `min-width: 100%` 가 무시되고, 내용이 좁을 때 표가
   칸을 안 채우고 쪼그라든다(1440px 에서 968px 에 멈췄다). 좁은 화면에서는
   내용이 늘 넓어서 안 드러났을 뿐이다.

   대신 **표를 담은 칸**을 스크롤 컨테이너로 만든다 — `.shop-scroll-x`.
   2단 레이아웃의 본문 칸처럼 폭이 정해진 자리에 붙인다. */
.shop-scroll-x { min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* (2026-09-25 삭제) ≤700px 에서 `.shop-table{display:block; overflow-x:auto}` + `> *{width:max-content;
   min-width:100%}` 로 표 자신을 밀던 규칙이 여기 있었다. 위 주석대로 block 표는 행이 내용 폭만큼만
   그려져 — 열이 적으면 오른쪽이 비고(공지 184/640px), 많으면 칸 밖으로 넘쳤다(배송지 723/640px).
   "표들이 죄다 양끝이 안 맞는다"의 원인. 이제 표는 늘 `display:table; width:100%` 로 칸을 채우고,
   칸보다 넓어지는 표는 파일 끝 ≤700px 블록이 목록·카드로 바꾼다(결정 0039). */

/* 로그인 2단 + 혜택 */
.shop-login-card { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0;
                   max-width: 900px; margin: 12px auto 32px; padding: 44px 48px;
                   border: 1px solid var(--border); border-radius: var(--radius-lg);
                   background: var(--surface); }
/* 구분선을 2열에 "명시"하면 자동배치 커서가 3열로 넘어가, 뒤따르는 폼이 3열에
   놓이고 안내가 다음 줄로 밀린다(좌우가 뒤바뀌어 보였다). 셋 다 열을 못 박는다. */
.shop-login-card::before { content: ""; grid-column: 2; grid-row: 1; background: var(--border); }
.shop-login-form { grid-column: 1; grid-row: 1; padding-right: 48px; }
.shop-login-form h1 { margin: 0 0 6px; font-size: 26px; font-weight: 700; }
.shop-login-form .shop-muted { margin: 0 0 24px; font-size: 13px; }
.shop-login-form .shop-form { margin: 0; }
.shop-login-help { margin: 16px 0 0; font-size: 12px; color: var(--text-subtle); line-height: 1.7; }
.shop-login-aside { grid-column: 3; grid-row: 1;
                    display: flex; flex-direction: column; align-items: center;
                    justify-content: center; padding-left: 48px; text-align: center; }
.shop-login-aside h2 { margin: 0 0 12px; font-size: 17px; font-weight: 700; }
.shop-login-aside p { margin: 0 0 24px; font-size: 13px; color: var(--text-muted); line-height: 1.8; }
.shop-login-signup { padding: 13px 26px; border: 1px solid var(--accent); border-radius: var(--radius-sm);
                     color: var(--accent); text-decoration: none; font-size: 14px; font-weight: 700; }
.shop-login-signup:hover { background: var(--accent-soft); }

.shop-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                 gap: 16px; list-style: none; margin: 0 0 48px; padding: 0; }
.shop-benefits li { min-width: 0; padding: 20px; background: var(--surf-2, var(--surface-strong));
                    border-radius: var(--radius); }
.shop-benefits svg { display: block; margin-bottom: 10px; color: var(--accent); }
.shop-benefits b { display: block; margin-bottom: 6px; font-size: 13.5px; color: var(--shop-navy); }
.shop-benefits span { font-size: 12px; color: var(--text-muted); line-height: 1.6; }

/* 가입 위저드 */
.shop-agree-all { padding: 12px 14px; margin-bottom: 12px;
                  background: var(--accent-soft); border-radius: var(--radius-sm); }
.shop-form .chk a { margin-left: 8px; font-size: 11px; color: var(--text-muted); }
.shop-wizard-nav { display: flex; gap: 10px; align-items: center; }
.shop-wizard-nav .shop-btn-primary { flex: 1; }
.shop-wizard-nav .shop-link-btn { padding: 14px 26px; }

@media (max-width: 1000px) {
  .shop-login-card { grid-template-columns: 1fr; padding: 28px 22px; }
  .shop-login-card::before { display: none; }
  /* 위에서 폼·안내를 1열·3열에 못 박아 두어서, 열을 1개로 줄여도 3열이 암묵적으로 생겨
     둘이 나란히 남았다 — 폼 칸이 65px 로 찌그러져 글자가 한두 자씩 줄바뀜했다. */
  .shop-login-form, .shop-login-aside { grid-column: 1; grid-row: auto; }
  .shop-login-form { padding-right: 0; padding-bottom: 28px;
                     border-bottom: 1px solid var(--border); margin-bottom: 28px; }
  .shop-login-aside { padding-left: 0; }
  .shop-benefits { grid-template-columns: 1fr 1fr; }
}

/* 정적 안내 문서 (약관·개인정보·고객센터) */
/* `.shop-doc` 는 **읽는 글**(약관·개인정보·글 상세)의 조판이다.
   목록 화면(공지사항·자료실)도 이걸 쓰고 있었는데, 자료실 표는 7열이라
   860px 안에서 눌렸다 — 1440 화면에서 좌우 290px 씩 비어 있었다.
   조판은 그대로 쓰고 **폭만 푸는** `.shop-doc-wide` 를 둔다. */
.shop-doc { max-width: var(--shop-read); padding-bottom: 40px; }
/* `none` 이 아니라 **기본 최대폭**으로 되돌린다 — `.shop-wrap` 과 같은 요소에
   붙으므로 `none` 으로 두면 1440 상한까지 같이 풀려 2560 에서 통째로 늘어난다. */
.shop-doc-wide { max-width: var(--shop-wrap); }
/* FAQ 는 목록이 아니라 **읽는 글**이다 — 답변이 1,400px 한 줄이면 못 읽는다. */
.shop-doc-wide .shop-faq { max-width: var(--shop-read); }
.shop-doc h1 { margin: 12px 0 28px; font-size: 26px; font-weight: 700; }
.shop-doc h2 { margin: 34px 0 12px; padding-bottom: 8px; font-size: 16px;
               border-bottom: 2px solid var(--shop-navy); }
.shop-doc h3 { margin: 20px 0 8px; font-size: 13.5px; color: var(--shop-navy); }
.shop-doc p, .shop-doc li { font-size: 13.5px; line-height: 1.85; color: var(--text); }
.shop-doc ul, .shop-doc ol { padding-left: 22px; }
.shop-doc li { margin-bottom: 4px; }
.shop-doc .shop-spec { margin: 12px 0 8px; }
.shop-doc .shop-spec th { width: 160px; }
/* 약관·처리방침의 여러 칸 표(결정 0133) — 칸 사이 여백, 폰에서는 줄마다 쌓는다(칸 이름은 td 의 data-label) */
.shop-doc .shop-legal th, .shop-doc .shop-legal td { padding: 9px 12px 9px 0; vertical-align: top; }
.shop-doc .shop-legal thead th { width: auto; }
@media (max-width: 640px) {
  .shop-doc .shop-legal thead { display: none; }
  .shop-doc .shop-legal tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .shop-doc .shop-legal th, .shop-doc .shop-legal td { display: block; width: auto; padding: 2px 0; border: 0; }
  .shop-doc .shop-legal td[data-label]::before { content: attr(data-label) " — "; color: var(--text-muted); }
}
.shop-req-tag, .shop-opt-tag { display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm);
                               font-size: 11px; font-weight: 700; vertical-align: 3px; }
.shop-req-tag { background: #FDECEA; color: var(--danger); }
.shop-opt-tag { background: var(--surface-strong); color: var(--text-muted); }

.shop-support-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 12px; }
.shop-support-hero > div { padding: 22px; background: var(--accent-soft); border-radius: var(--radius); }
.shop-support-hero b { display: block; margin-bottom: 6px; font-size: 24px; color: var(--accent); }
.shop-support-hero span { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }

.shop-faq dt { margin: 18px 0 6px; font-size: 14px; font-weight: 700; color: var(--shop-navy); }
.shop-faq dt::before { content: "Q. "; color: var(--accent); }
.shop-faq dd { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.8;
               color: var(--text-muted); }

@media (max-width: 1000px) { .shop-support-hero { grid-template-columns: 1fr; } }
.shop-soon { max-width: 640px; padding: 40px 0 60px; }
.shop-soon-lead { margin-bottom: 20px; font-size: 14px; color: var(--text-muted); }

/* 상품 이미지 */
.shop-card-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 10px;
                       box-sizing: border-box; font-size: 13px; font-weight: 400; }

.shop-selected-options { flex-basis: 100%; min-width: 0; container-type: inline-size; }
.shop-selected-options h2 { font-size: 15px; margin: 4px 0 8px; }
.shop-selected-options h2 small { color: var(--accent); font-size: 13px; }
.shop-detail-info { min-width: 0; }
.shop-selected-scroll { max-height: 300px; overflow: auto; overscroll-behavior: contain;
                        border-block: 1px solid var(--border-strong); }
#selected-options-list { list-style: none; padding: 0; margin: 0; min-width: 700px; }
.shop-selected-columns, .shop-selected-option { display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(170px, 1.5fr) 98px 98px minmax(104px, .85fr) 28px;
  align-items: center; gap: 10px; min-width: 700px; padding: 8px 10px; box-sizing: border-box; }
.shop-selected-columns { position: sticky; top: 0; z-index: 1; background: var(--surface-strong);
                         border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: 11px; }
.shop-selected-columns span:nth-child(n+3) { text-align: center; }
.shop-selected-columns span:nth-child(5) { text-align: right; }
.shop-selected-option { border-bottom: 1px solid var(--border); background: var(--surface); min-height: 54px; }
.shop-selected-option:last-child { border-bottom: 0; }
.shop-selected-name, .shop-selected-code, .shop-selected-meta { display: block; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.shop-selected-name { font-size: 13px; }
.shop-selected-info { min-width: 0; line-height: 1.5; }
.shop-selected-code { font-size: 11px; }
.shop-selected-meta { font-size: 11px; }
.shop-qty-stepper { display: flex; align-items: center; height: 30px; border: 1px solid var(--border-strong);
                    border-radius: 4px; overflow: hidden; background: var(--surface); }
.shop-qty-stepper button { flex: 0 0 25px; height: 100%; padding: 0; border: 0;
  background: var(--surface-strong); color: var(--text); font-size: 16px; cursor: pointer; }
.shop-addcart .shop-qty-stepper input { width: 0; min-width: 0; flex: 1; height: 100%; margin: 0; padding: 0 2px;
  border: 0; border-radius: 0; text-align: center; font-size: 12px; appearance: textfield; -moz-appearance: textfield; }
.shop-qty-stepper input::-webkit-inner-spin-button, .shop-qty-stepper input::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0; }
.shop-qty-stepper:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.shop-option-remove { display: grid; place-items: center; width: 28px; height: 30px; padding: 0; border: 0;
  border-radius: 4px; background: transparent; color: var(--text-muted); cursor: pointer; }
.shop-option-remove:hover { color: var(--danger, #b42318); background: var(--surface-strong); }
.shop-option-remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shop-selected-subtotal { text-align: right; white-space: nowrap; line-height: 1.5; }
.shop-selected-amount { display: block; font-size: 13px; }
.shop-selected-quantity { display: block; font-size: 11px; }
.shop-option-qty-error { grid-column: 1 / -1; color: var(--danger, #b42318); font-size: 12px; margin: 0; }
.shop-option-qty-error:empty, #option-cart-status:empty { display: none; }
#option-cart-error, #option-cart-status { flex-basis: 100%; margin: 0; font-size: 13px; }
#option-cart-form button:disabled { opacity: .4; cursor: default; }
/* 700px 한 줄이 안 들어가는 칸(폰)에서는 옆으로 밀지 않게 옵션명 칸을 3줄(옵션명 / 단가·입수 /
   금액·수량)로 쌓고 박스·낱개·삭제만 오른쪽에 둔다. 코드만 뺀다. (결정 0040) */
@container (max-width: 699px) {
  #selected-options-list, .shop-selected-columns, .shop-selected-option { min-width: 0; }
  .shop-selected-scroll { overflow-x: hidden; }
  .shop-selected-columns, .shop-selected-option { grid-template-columns: minmax(0, 1fr) 78px 78px 28px;
                                                  gap: 0 6px; padding: 8px 4px; }
  .shop-selected-columns span:nth-child(2), .shop-selected-columns span:nth-child(5) { display: none; }
  .shop-selected-option { grid-template-areas: "name box loose del" "info box loose del" "sub box loose del"; }
  .shop-selected-name { grid-area: name; }
  .shop-selected-info { grid-area: info; }
  .shop-selected-code { display: none; }
  .shop-selected-subtotal { grid-area: sub; display: flex; gap: 6px; align-items: baseline; text-align: left; }
  .shop-selected-subtotal > * { display: inline; }
  .shop-selected-option .shop-qty-stepper[data-qty-kind="박스"] { grid-area: box; }
  .shop-selected-option .shop-qty-stepper[data-qty-kind="낱개"] { grid-area: loose; }
  .shop-option-remove { grid-area: del; }
}
.shop-detail-thumb.has-img { padding: 16px; }
.shop-detail-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* 썸네일 한 줄 슬라이드(결정 0064) — 넘치면 좌·우 버튼, 폰은 밀어서(가로 스크롤 + 칸 맞춤). product-gallery.js */
.shop-thumbs { --thumb-nav-size: 36px; --thumb-nav-gutter: 48px;
               position: relative; margin: 10px 0 0; padding-inline: var(--thumb-nav-gutter); }
/* 한 줄 썸네일의 전체 폭이 그리드 칸을 늘리지 않게 — 폰(1열)에서 화면이 712px 로 벌어졌다(정보 칸 .shop-detail-info 와 같은 처리) */
.shop-detail-gallery { min-width: 0; }
.shop-detail-thumbs { display: flex; gap: 8px; margin: 0; padding: 2px; scroll-padding-inline: 2px; list-style: none; flex-wrap: nowrap;
                      overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
                      -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.shop-detail-thumbs::-webkit-scrollbar { display: none; }
.shop-detail-thumbs li { flex: 0 0 auto; scroll-snap-align: start; }
.shop-detail-thumbs img { display: block; width: 62px; height: 62px; object-fit: contain; cursor: pointer;
                          background: var(--surface-strong); border: 1px solid var(--border);
                          border-radius: var(--radius-sm); padding: 4px; }
.shop-detail-thumbs img:hover, .shop-detail-thumbs img.is-on { border-color: var(--accent); }
.shop-detail-thumbs img.is-on { box-shadow: 0 0 0 1px var(--accent); }
.shop-thumbs-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
                   width: var(--thumb-nav-size); height: var(--thumb-nav-size); margin: 0; padding: 0;
                   display: inline-flex; align-items: center; justify-content: center;
                   border: 1px solid var(--border); border-radius: 50%; background: var(--surface);
                   background: color-mix(in srgb, var(--surface) 82%, transparent); color: var(--text);
                   backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
                   cursor: pointer; box-shadow: var(--shadow-card); touch-action: manipulation; }
.shop-thumbs-nav svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2;
                       stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.shop-thumbs-nav:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--surface) 94%, transparent); }
.shop-thumbs-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shop-thumbs-nav.is-prev { left: 4px; }
.shop-thumbs-nav.is-next { right: 4px; }
.shop-thumbs-nav[hidden] { display: none; }
@media (max-width: 640px) {
  .shop-thumbs { --thumb-nav-size: 44px; --thumb-nav-gutter: 56px; }
}
.shop-cards2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.shop-locked-note { margin: 12px 0 0; font-size: 11.5px; line-height: 1.6; }
.shop-addr-actions { display: flex; gap: 6px; }
@media (max-width: 1000px) { .shop-cards2 { grid-template-columns: minmax(0, 1fr) !important; } }

/* 게시판 · 문의 · 견적 */
.shop-post-meta { margin: -10px 0 20px; font-size: 12px; }
.shop-post-body { white-space: pre-wrap; line-height: 1.9; font-size: 14px; }

/* 게시글 상세 — 박스 하나에 구분선으로 나눈다 (2026-09-16).
   제목/작성자 표 → 작성일·조회수 줄 → 본문 → 첨부. 색은 전부 토큰. */
.shop-post-kind { margin: 0 0 14px; font-size: 22px; font-weight: 700; }
.shop-post-box { border-top: 2px solid var(--shop-navy); border-bottom: 1px solid var(--border);
                 background: var(--surface); }
.shop-post-head { width: 100%; border-collapse: collapse; font-size: 14px; }
.shop-post-head th { width: 120px; padding: 12px 18px; text-align: left; font-weight: 600;
                     color: var(--text-muted); background: var(--surface-2);
                     border-bottom: 1px solid var(--border); white-space: nowrap; }
.shop-post-head td { padding: 12px 18px; border-bottom: 1px solid var(--border); }
.shop-post-head .shop-post-title { font-size: 16px; font-weight: 700; }
.shop-post-info { display: flex; flex-wrap: wrap; gap: 6px 24px; padding: 10px 18px;
                  font-size: 13px; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.shop-post-info b { font-weight: 500; color: var(--text); }
.shop-post-box .shop-post-body { padding: 32px 18px 40px; min-height: 200px; }
.shop-post-files { padding: 18px; border-top: 1px solid var(--border); }
.shop-post-files h2 { margin: 0 0 10px; font-size: 14px; }
.shop-post-files .shop-table { margin-bottom: 0; }
.shop-post-files h2 small { font-weight: 400; }
.shop-post-file { font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .shop-post-head th { width: 80px; padding: 10px 12px; }
  .shop-post-head td, .shop-post-info, .shop-post-files { padding-left: 12px; padding-right: 12px; }
  .shop-post-box .shop-post-body { padding: 24px 12px 32px; }
}
.shop-answer { padding: 18px 20px; background: var(--accent-soft); border-radius: var(--radius); }
.shop-answer .shop-post-body { font-size: 13.5px; }
.shop-filelist { margin: 14px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--text-muted); }
.shop-form select, .shop-form textarea {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-size: 14px; font-family: var(--font); font-weight: 400; }
.shop-form textarea { resize: vertical; }
.shop-table input { width: 100%; padding: 7px 9px; border: 1px solid var(--border-strong);
                    border-radius: var(--radius-sm); font-family: var(--font); font-size: 13px; }
.shop-form .chk.is-off { opacity: .55; }

/* 옵션화 — 상세의 옵션 선택기 */
.shop-options { display: flex; flex-wrap: wrap; gap: 12px 18px; margin: 14px 0 4px; }
.shop-option { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.shop-option > span { color: var(--shop-muted, #6b7280); }
.shop-option select { min-width: 130px; padding: 7px 10px; border: 1px solid #d5dae1;
                      border-radius: 6px; background: #fff; font-size: 14px; }
.shop-option-hint { flex-basis: 100%; margin: 0; }
.shop-table tr.is-current { background: #f4f7fb; }

/* 배너 */
.shop-banners { display: grid; gap: 12px; margin: 16px auto; }
.shop-banner { display: block; border-radius: 10px; overflow: hidden; }
.shop-banner img { display: block; width: 100%; height: auto; }

/* 추가입력 옵션 */
.shop-inputs { display: grid; gap: 10px; margin: 12px 0; }
.shop-input-row { display: grid; gap: 4px; font-size: 13px; }
.shop-input-row > span { color: var(--shop-muted, #6b7280); }
.shop-input-row input, .shop-input-row select, .shop-input-row textarea {
  padding: 8px 10px; border: 1px solid #d5dae1; border-radius: 6px;
  font-size: 14px; font-family: inherit; width: 100%;
}
.shop-req { color: #d33; }
.shop-inputs-hint { margin: 0; font-size: 12px; }
.shop-line-opts { display: block; margin-top: 2px; font-size: 12px; color: #55606e; }
.shop-doclist { margin: 0; padding-left: 18px; }
.shop-doclist li { margin: 4px 0; }

/* 오류 화면 — 막다른 길에서 돌아갈 곳을 준다 */
.shop-error-page { padding: 72px 0 96px; text-align: center; }
.shop-error-code { margin: 0; font-size: 56px; font-weight: 800; color: var(--shop-navy); opacity: .25; }
.shop-error-page h1 { margin: 4px 0 10px; font-size: 24px; }
.shop-error-links { display: flex; gap: 10px; justify-content: center; margin: 22px 0 14px; flex-wrap: wrap; }

/* 대체상품 안내 — 품절 상품에서 막다른 길을 만들지 않는다 */
.shop-substitute { margin: 14px 0; padding: 12px 14px; border-radius: 8px;
                   background: #fff8e6; border: 1px solid #f0dca8; font-size: 14px; }
.shop-substitute ul { margin: 6px 0 0; padding-left: 18px; }
.shop-relgrid { list-style: none; margin: 0; padding: 0;
                display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.shop-relgrid a { display: block; text-decoration: none; color: inherit; }
.shop-relgrid img, .shop-relthumb { display: block; width: 100%; aspect-ratio: 1;
                object-fit: cover; border-radius: 8px; background: #eef1f5; }
.shop-relthumb { display: grid; place-items: center; font-size: 22px; color: #9aa3ad; }
.shop-relgrid b { display: block; margin-top: 6px; font-size: 13px; line-height: 1.35; }


/* 상품 상세 — 시안 대조 보정 (2026-08-26) */
.shop-detail-cat { margin: 0 0 6px; font-size: 13px; font-weight: 700; }
.shop-detail-cat a { color: var(--accent); text-decoration: none; }
.shop-crumb span { margin: 0 6px; color: var(--text-subtle); }
/* 시안: "총 상품금액 (수량)" — 담기 전에 금액이 보인다 */
.shop-addcart-total { flex-basis: 100%; margin: 14px 0 4px; padding-top: 14px;
                      border-top: 1px solid var(--border); font-size: 14px; }
.shop-addcart-total b { font-size: 22px; font-weight: 800; color: var(--accent); }
.shop-addcart-btns { display: flex; flex-basis: 100%; gap: 10px; }
.shop-addcart-btns > * { flex: 1; }
.shop-btn-line { padding: 13px 18px; border: 1px solid var(--accent); border-radius: 6px;
                 background: var(--surface); color: var(--accent);
                 font-size: 15px; font-weight: 700; cursor: pointer; }
.shop-btn-line:hover { background: var(--surface-strong); }


/* 장바구니 — 시안 대조 보정 (2026-08-26) */
.shop-cart-bar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
                 margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--border);
                 border-radius: var(--radius); background: var(--surface-strong);
                 font-size: 13px; }
.shop-chk { display: flex; gap: 6px; align-items: center; font-weight: 700; }
.shop-cart-chk { width: 38px; text-align: center; }
/* 시안: 줄마다 상품 썸네일. 사진이 없으면 글자 — 자리는 같아 레이아웃이 안 흔들린다.
   float 를 쓰면 "재고 보유" 칩이 썸네일 아래로 흘러내린다 — flex 로 묶는다. */
.shop-cart-item { display: flex; gap: 12px; align-items: flex-start; }
.shop-cart-item-body { min-width: 0; }
.shop-cart-thumb { display: inline-flex; flex: none; width: 58px; height: 58px;
                   align-items: center; justify-content: center;
                   overflow: hidden; border: 1px solid var(--border); border-radius: 6px;
                   background: var(--surface-strong); color: var(--text-subtle);
                   font-size: 13px; font-weight: 700; text-decoration: none; }
.shop-cart-thumb img { width: 100%; height: 100%; object-fit: contain; }
.shop-summary .shop-btn-line { display: block; margin-top: 8px; text-align: center;
                               text-decoration: none; }

/* 금액·단가가 "6,300 원" 처럼 갈라지지 않게 */
.shop-nowrap { white-space: nowrap; }
.shop-cart-main .shop-table td.num { white-space: nowrap; }

/* ── 주문서: 주문자 · 배송지 카드 (시안 결제창) ──────────── */
.shop-kv { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 6px 12px;
           margin: 0 0 14px; font-size: 13px; }
.shop-kv dt { color: var(--text-subtle); }
.shop-kv dd { margin: 0; font-weight: 600; word-break: break-all; }
.shop-inline-field { display: block; margin: 0 0 12px; font-size: 13px; font-weight: 600; }
.shop-inline-field input, .shop-inline-field select {
  display: block; width: 100%; margin-top: 6px; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
  color: var(--text); font: inherit; font-weight: 400; }
.shop-inline-field small { display: block; margin-top: 5px;
                           color: var(--text-subtle); font-size: 11px; font-weight: 400; }
.shop-panel-link { font-size: 12px; }
.shop-shipto .shop-form { margin: 0 0 10px; }

/* ── 마이페이지 대시보드 (시안 "마이페이지 홈") ─────────── */
.shop-mypage-hello { margin: -8px 0 18px; }
.shop-kpi { display: grid; gap: 12px; margin: 0 0 20px;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.shop-kpi a { display: block; padding: 16px 18px; text-decoration: none;
              border: 1px solid var(--border); border-radius: 10px;
              background: var(--surface); color: inherit; }
.shop-kpi a:hover { border-color: var(--brand); }
.shop-kpi span { display: block; margin-bottom: 8px;
                 color: var(--text-subtle); font-size: 12.5px; }
.shop-kpi b { font-size: 24px; font-weight: 800; color: var(--brand); }
.shop-kpi em { margin-left: 2px; font-size: 13px; font-style: normal; font-weight: 600;
               color: var(--text); }
.shop-more { float: right; font-size: 12px; font-weight: 500; }
.shop-table-mini { font-size: 12.5px; }
.shop-table-mini th, .shop-table-mini td { padding: 7px 8px; }
.shop-freq { list-style: none; margin: 0; padding: 0; }
.shop-freq li { display: flex; gap: 10px; align-items: center; padding: 8px 0;
                border-bottom: 1px dashed var(--border); }
.shop-freq li:last-child { border-bottom: 0; }
.shop-freq-thumb { display: inline-flex; width: 40px; height: 40px; flex: none;
                   align-items: center; justify-content: center; overflow: hidden;
                   border: 1px solid var(--border); border-radius: 6px;
                   background: var(--surface-2); color: var(--text-subtle);
                   font-size: 11px; font-weight: 700; text-decoration: none; }
.shop-freq-thumb img { width: 100%; height: 100%; object-fit: contain; }
.shop-freq-body { min-width: 0; font-size: 12.5px; }
.shop-freq-body small { display: block; margin-top: 2px;
                        color: var(--text-subtle); font-size: 11px; }
.shop-notice-list { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.shop-notice-list li { display: flex; gap: 10px; justify-content: space-between;
                       padding: 8px 0; border-bottom: 1px dashed var(--border); }
.shop-notice-list li:last-child { border-bottom: 0; }
.shop-notice-list small { flex: none; color: var(--text-subtle); font-size: 11px; }
.shop-quicklinks { display: grid; gap: 10px;
                   grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.shop-quicklinks a { display: block; padding: 12px 14px; text-align: center;
                     border: 1px solid var(--border); border-radius: 8px;
                     background: var(--surface); font-size: 13px; font-weight: 600;
                     text-decoration: none; color: inherit; }
.shop-quicklinks a:hover { border-color: var(--brand); color: var(--brand); }

/* ── 주문내역 날짜 범위 필터 (시안 주문 내역) ─────────────── */
/* 좁은 화면에서 줄바꿈되고 **줄어들어야** 한다. date 입력은 기본 min-width 가
   커서 그냥 두면 필터 줄이 뷰포트보다 넓어지고, 그 폭이 마이페이지 그리드를
   통째로 밀어 페이지 전체가 가로로 스크롤된다(모바일 /orders 에서 실제로 그랬다). */
.shop-filter-date { flex-wrap: wrap; align-items: center; }
.shop-filter-date label { display: flex; gap: 8px; align-items: center; min-width: 0;
                          font-size: 13px; font-weight: 600; }
.shop-filter-date label.is-bare { font-weight: 400; }
.shop-filter-date input[type="date"] { min-width: 0; flex: 1 1 130px;
                                       padding: 8px 10px; border: 1px solid var(--border);
                                       border-radius: 6px; background: var(--surface);
                                       color: var(--text); font: inherit; }
.shop-filter-date input[name="q"] { flex: 1 1 180px; min-width: 0; }
.shop-filter-tilde { color: var(--text-subtle); }
.shop-filter-excel { margin-left: auto; }
@media (max-width: 700px) {
  .shop-filter-date label { flex: 1 1 100%; }
  .shop-filter-tilde { display: none; }
  .shop-filter-excel { margin-left: 0; }
}

/* ── 배송지 인라인 수정 — :target 으로 연다 (JS 없이) ────── */
.shop-addr-editrow { display: none; }
.shop-addr-editrow:target { display: table-row; }
.shop-addr-editrow > td { background: var(--surface-2); padding: 16px; }
.shop-addr-editbtns { display: flex; gap: 10px; align-items: center; }

/* ── 견적 요청 안내 (시안 견적문의) ─────────────────────── */
.shop-quote-guide { margin-top: 24px; }
.shop-bullets { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.9;
                color: var(--text-muted); }
.shop-steps-list { list-style: none; margin: 0; padding: 0;
                   counter-reset: none; font-size: 12.5px; }
.shop-steps-list li { padding: 9px 0 9px 14px; border-left: 2px solid var(--border);
                      margin-left: 4px; }
.shop-steps-list li:first-child { border-left-color: var(--brand); }
.shop-steps-list b { display: block; }
.shop-steps-list span { color: var(--text-subtle); }

/* ── 고객센터 허브 (시안 고객센터) ──────────────────────── */
.shop-support-side { position: sticky; top: 16px; padding: 18px;
                     border: 1px solid var(--border); border-radius: 10px;
                     background: var(--surface); }
.shop-support-side h2 { margin: 0 0 4px; font-size: 15px; }
/* 빠른 상담 네 칸은 같은 카드다 — 전화 안내만 박스 없이 글자로 떠 있었다(2026-09-29).
   간격은 margin 이 아니라 gap, 높이는 가장 긴 칸(전화 안내)에 맞춘다. */
.shop-support-ways { list-style: none; margin: 14px 0 0; padding: 0;
                     display: grid; gap: 8px; grid-auto-rows: 1fr; }
.shop-support-ways a, .shop-support-ways .shop-phone-info {
  display: flex; flex-direction: column; justify-content: center; height: 100%;
  box-sizing: border-box; padding: 11px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  text-decoration: none; color: inherit; }
.shop-support-ways .shop-phone-num { color: var(--text); font-weight: 700; }
.shop-support-ways a:hover { border-color: var(--brand); }
.shop-support-ways b { display: block; font-size: 13px; }
.shop-support-ways span { display: block; margin-top: 2px;
                          color: var(--text-subtle); font-size: 11.5px; }
.shop-support-contact { margin-top: 16px; padding-top: 14px;
                        border-top: 1px solid var(--border); font-size: 12.5px; }
.shop-support-contact p { margin: 4px 0; }
.shop-support-tel { font-size: 20px; font-weight: 800; color: var(--brand); }
/* 빠른 상담을 본문 폭으로(2026-10-12) — 공지·자주 묻는 질문을 빼서 비는 왼쪽 대신. 세 칸은 PC 한 줄, 좁으면 세로.
   고객센터 안내는 그 아래 한 줄로 이어 쓴다. */
.shop-support-quick { position: static; margin: 12px 0 32px; padding: 20px 22px; }
.shop-support-quick .shop-support-ways { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shop-support-quick .shop-support-contact { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.shop-support-quick .shop-support-contact p { margin: 0; }
@media (max-width: 900px) {
  .shop-support-quick .shop-support-ways { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .shop-support-quick { padding: 16px; }
  .shop-support-quick .shop-support-contact { display: block; }
  .shop-support-quick .shop-support-contact p { margin: 4px 0; }
}

/* ── 가격 범위 필터 (시안 검색 필터) ────────────────────── */
.shop-pricefilter { margin-top: 16px; padding: 14px;
                    border: 1px solid var(--border); border-radius: 10px;
                    background: var(--surface); }
.shop-pricefilter h3 { margin: 0 0 10px; font-size: 13px; }
.shop-pricerow { display: grid; gap: 6px; align-items: center;
                 grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; }
.shop-pricerow input { min-width: 0; padding: 7px 8px; border: 1px solid var(--border);
                       border-radius: 6px; background: var(--surface); color: var(--text);
                       font: inherit; font-size: 12px; }
.shop-pricerow span { color: var(--text-subtle); }
.shop-pricerow button { padding: 7px 10px; border: 1px solid var(--border-strong);
                        border-radius: 6px; background: var(--surface-2);
                        color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.shop-priceband { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.shop-priceband a { padding: 5px 9px; border: 1px solid var(--border); border-radius: 999px;
                    font-size: 11.5px; text-decoration: none; color: var(--text-muted); }
.shop-priceband a:hover, .shop-priceband a.is-on {
  border-color: var(--brand); color: var(--brand); }
.shop-pricenote { margin: 10px 0 0; font-size: 11px; line-height: 1.6; }

/* ── 로그인: 비밀번호 표시 토글 · 아이디 저장 (시안 로그인) ── */
.shop-pw-wrap { position: relative; display: block; }
.shop-pw-wrap input { width: 100%; padding-right: 42px; }
.shop-pw-eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
               display: inline-flex; padding: 6px; border: 0; border-radius: 6px;
               background: none; color: var(--text-subtle); cursor: pointer; }
.shop-pw-eye:hover, .shop-pw-eye.is-on { color: var(--accent); }
.shop-login-remember { margin-top: -4px; font-weight: 400; }

/* ── 자료실 구분 타일 (시안 자료실) ─────────────────────── */
.shop-libcats { display: grid; gap: 10px; margin: 0 0 18px;
                grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.shop-libcats a { display: block; padding: 12px 14px; text-align: center;
                  border: 1px solid var(--border); border-radius: 8px;
                  background: var(--surface); text-decoration: none; color: inherit; }
.shop-libcats a:hover { border-color: var(--accent); }
.shop-libcats a.is-on { border-color: var(--accent); background: var(--accent-soft); }
.shop-libcats b { display: block; font-size: 12.5px; }
.shop-libcats span { display: block; margin-top: 4px; font-size: 15px; font-weight: 800;
                     color: var(--accent); }


/* 즐겨찾기 — 담기 버튼 옆의 보조 동작이라 눈에 덜 띄게 둔다. */
.shop-fav-form { margin-top: 10px; }
.shop-fav { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px;
            border: 1px solid var(--border); border-radius: var(--radius-sm);
            background: var(--surface); color: var(--text-muted); font-size: 14px;
            cursor: pointer; transition: border-color .18s ease, color .18s ease; }
.shop-fav:hover { border-color: var(--accent); color: var(--accent); }
.shop-fav.is-on { border-color: var(--warn); color: var(--warn); font-weight: 600; }

/* 함바 현장 체크 — 배송비가 확정되지 않는다는 것을 눈에 띄게 알린다. */
.shop-check { display: flex; align-items: center; gap: 8px; margin-top: 10px;
              font-size: 14px; cursor: pointer; }
.shop-check input { width: 16px; height: 16px; margin: 0; }
.shop-hamba-note { margin-top: 8px; }

/* ════════════════════════════════════════════════════════════════════
   움직임 (2026-09-07)

   화면이 뻣뻣했다 — 사진이 그냥 갈아 끼워지고, 글자는 처음부터 다 떠 있고,
   스크롤해도 아무 일이 없었다. 여기 있는 것은 전부 **거들기만 한다**:
   움직임이 없어도 화면은 그대로 읽히고, 눌리는 자리도 그대로다.

   맨 아래 `prefers-reduced-motion` 블록에서 전부 끈다. 움직임에 멀미하는
   사람이 실제로 있고, 그건 취향이 아니라 접근성이다.
   ══════════════════════════════════════════════════════════════════ */

/* ── 히어로: 배경 전환 효과 (장별로 고른다 — `fx-*`) ────────────────── */

@keyframes heroBgSlide { from { transform: translateX(7%); } to { transform: none; } }
@keyframes heroKen     { from { transform: scale(1); }  to { transform: scale(1.12); } }
@keyframes heroFocus   { from { filter: blur(16px); transform: scale(1.06); }
                         to   { filter: blur(0);    transform: none; } }

/* 사진이 통째로 움직이므로 넘칠 자리를 잘라 준다. */
.shop-hero-bg { overflow: hidden; }
.shop-hero-slide.fx-slide.is-on .shop-hero-bg {
  animation: heroBgSlide .85s cubic-bezier(.16, .84, .28, 1) both; }
/* 켄번즈 — 자동 넘김(6초)보다 길게 잡아, 끝까지 가기 전에 다음 장으로 넘어가게 한다.
   끝에 닿아 멈춰 있는 사진은 멈춘 티가 더 난다. */
.shop-hero-slide.fx-zoom.is-on .shop-hero-bg img {
  animation: heroKen 11s cubic-bezier(.33, 0, .67, 1) both; }
.shop-hero-slide.fx-blur.is-on .shop-hero-bg {
  animation: heroFocus 1s cubic-bezier(.16, .84, .28, 1) both; }

/* ── 히어로: 글자가 차례로 올라온다 ──────────────────────────────────
   전부 한꺼번에 뜨면 "갈아 끼웠다"는 느낌이고, 차례로 오면 "말을 건다".
   슬라이드는 JS 가 `is-on` 을 붙여야 보이므로, 여기서 숨겨도 잃는 것이 없다. */
@keyframes heroRise { from { opacity: 0; transform: translateY(16px); }
                      to   { opacity: 1; transform: none; } }

.shop-hero-slide.is-on .shop-hero-body > * {
  animation: heroRise .62s cubic-bezier(.16, .84, .28, 1) both; }
.shop-hero-slide.is-on .shop-hero-body > *:nth-child(1) { animation-delay: .10s; }
.shop-hero-slide.is-on .shop-hero-body > *:nth-child(2) { animation-delay: .18s; }
.shop-hero-slide.is-on .shop-hero-body > *:nth-child(3) { animation-delay: .26s; }
.shop-hero-slide.is-on .shop-hero-body > *:nth-child(4) { animation-delay: .34s; }

/* ── 히어로: 점이 다음 장까지 남은 시간을 보여 준다 ──────────────────
   `--hero-auto` 는 **JS 가 넣는다**(자동 넘김 간격과 한 값이어야 한다).
   수동 전환·같은 점 재선택 때 타이머와 함께 다시 시작한다. */
@keyframes dotFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.shop-hero-dot { position: relative; overflow: hidden; }
.shop-hero-dot.is-on { background: rgba(255, 255, 255, .4); }
.shop-hero-dot.is-on::after {
  content: ""; position: absolute; inset: 0; background: #fff;
  transform-origin: left; animation: dotFill var(--hero-auto, 5s) linear both; }
.shop-hero-slider.is-manual .shop-hero-dot.is-on { background: #fff; }
.shop-hero-slider.is-manual .shop-hero-dot.is-on::after { animation: none; }
.shop-hero-slider.is-timer-reset .shop-hero-dot.is-on::after { animation: none; }
.shop-hero-slider.is-paused .shop-hero-dot.is-on::after { animation-play-state: paused; }

.shop-hero-nav { transition: background .18s ease, transform .18s ease; }
.shop-hero-nav:hover { transform: translateY(-50%) scale(1.12); }
.shop-hero-cta { transition: background .18s ease, transform .18s ease, box-shadow .18s ease; }
.shop-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .28); }

/* ── 스크롤하면 나타난다 ────────────────────────────────────────────
   `reveal` 클래스는 **JS 가 붙인다.** CSS 에 바로 숨기면 JS 가 안 도는
   환경에서 내용이 통째로 사라진다 — 그건 움직임이 아니라 고장이다. */
.reveal { opacity: 0; transform: translateY(18px);
          transition: opacity .55s cubic-bezier(.16, .84, .28, 1),
                      transform .55s cubic-bezier(.16, .84, .28, 1); }
.reveal.is-in { opacity: 1; transform: none; }

/* ── 손이 닿는 자리 ─────────────────────────────────────────────────
   커지는 정도는 일부러 작게 뒀다. 카드가 크게 튀면 목록을 훑기 어렵다. */
.shop-card { transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.shop-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.shop-card-thumb { overflow: hidden; }
.shop-card-thumb img { transition: transform .35s cubic-bezier(.16, .84, .28, 1); }
.shop-card:hover .shop-card-thumb img { transform: scale(1.07); }

.shop-home-link { transition: box-shadow .2s ease, transform .2s ease; }
.shop-home-link:hover { transform: translateY(-4px); }
.shop-home-link em { transition: transform .2s ease; }
.shop-home-link:hover em { transform: translateX(4px); }

.shop-home-cats li a { transition: transform .2s ease; }
.shop-home-cats li a:hover { transform: translateY(-3px); }
.shop-home-cat-thumb { transition: transform .25s cubic-bezier(.16, .84, .28, 1); }
.shop-home-cats li a:hover .shop-home-cat-thumb { transform: scale(1.08); }

/* 눌린 느낌 — 눌렀는데 아무 반응이 없으면 한 번 더 누른다(그래서 주문이 두 건 된다). */
.shop-btn-primary, .shop-btn-line, .shop-btn-inline, .shop-link-btn {
  transition: transform .12s ease, background .18s ease, box-shadow .18s ease; }
.shop-btn-primary:active, .shop-btn-line:active,
.shop-btn-inline:active, .shop-link-btn:active { transform: translateY(1px); }

/* ── 팝업이 뜰 때 ───────────────────────────────────────────────────── */
@keyframes popupIn { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); }
                     to   { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes popupInCorner { from { opacity: 0; transform: translateY(14px); }
                           to   { opacity: 1; transform: none; } }

.shop-popup.is-center { animation: popupIn .32s cubic-bezier(.16, .84, .28, 1) both; }
.shop-popup.is-left-bottom, .shop-popup.is-right-bottom {
  animation: popupInCorner .32s cubic-bezier(.16, .84, .28, 1) both; }

/* ── 움직임을 줄여 달라고 한 사람에게는 전부 끈다 ────────────────────
   취향이 아니라 접근성이다 — 전정기관 문제로 실제로 어지러워하는 사람이 있다.
   끄기만 하고 **내용은 그대로 보여야** 하므로 `reveal` 은 보이는 상태로 고정한다. */
@media (prefers-reduced-motion: reduce) {
  .shop-hero-slide.is-on .shop-hero-body > *,
  .shop-hero-slide.fx-slide.is-on .shop-hero-bg,
  .shop-hero-slide.fx-zoom.is-on .shop-hero-bg img,
  .shop-hero-slide.fx-blur.is-on .shop-hero-bg,
  .shop-hero-dot.is-on::after,
  .shop-popup { animation: none !important; }
  .shop-hero-dot.is-on { background: #fff; }
  .shop-hero-dot.is-on::after { display: none; }
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .shop-card, .shop-card-thumb img, .shop-home-link, .shop-home-link em,
  .shop-home-cats li a, .shop-home-cat-thumb, .shop-hero-nav, .shop-hero-cta {
    transition: none; }
  .shop-card:hover, .shop-home-link:hover, .shop-home-cats li a:hover,
  .shop-hero-cta:hover { transform: none; }
  .shop-card:hover .shop-card-thumb img,
  .shop-home-cats li a:hover .shop-home-cat-thumb { transform: none; }
  .shop-hero-nav:hover { transform: translateY(-50%); }
}

.shop-address-dialog {width:min(520px,95vw);padding:16px;border:0;border-radius:12px;}
.shop-address-dialog::backdrop {background:#0008;}
.shop-address-search {margin:8px 0;}

/* 상품 상세만 빵부스러기가 `.shop-wrap` **안**에 있다 — `.shop-wrap` 의 좌우 20px 위에
   `.shop-crumb` 의 20px 이 한 번 더 얹혀 로고보다 20px 밀렸다(2026-09-18 캡처로 확인). */
.shop-wrap > .shop-crumb { padding-left: 0; padding-right: 0; }

/* ── 폰 (≤640px) ─────────────────────────────────────────────────────
   2026-09-25. PC 화면을 좁혀 쌓기만 해서 머리말이 첫 화면의 1/3(약 270px)을 먹었고,
   상품목록은 카테고리·견적 상자 밑 960px 에서야 첫 상품이 나왔다(한 줄에 한 개).
   파일 **끝**에 두는 이유: 앞쪽 900·1000px 블록과 팝업 애니메이션을 이 블록이 이겨야 한다. */
@media (max-width: 640px) {
  /* 머리말 — [메뉴] 로고 [장바구니] / 검색. 유틸바·견적문의·연락처는 메뉴로 접었다. */
  .shop-utility, .shop-header-side { display: none; }
  .shop-header { position: relative; z-index: 40; }
  .shop-header .shop-wrap { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px;
                            gap: 2px 4px; padding: 4px 8px 10px; }
  .shop-logo { justify-self: center; font-size: 22px; }
  /* 폰은 로고가 가운데라 링크도 로고 바로 아래 가운데(회사 영문명은 원래 숨김) */
  .shop-brand { justify-self: center; align-items: center; gap: 0; }
  .shop-brand-home { font-size: 11px; line-height: 1.4; }
  .shop-logo small { display: none; }
  .shop-search { grid-column: 1 / -1; margin: 0 12px; }
  /* 16px 미만이면 iOS 가 입력칸을 누르는 순간 화면을 확대한다 */
  .shop-search input { padding: 10px 12px; font-size: 16px; }
  .shop-search button { padding: 0 16px; }

  .shop-mmenu { display: block; }
  .shop-mcart { display: flex; }
  .shop-mmenu summary, .shop-mcart { position: relative; display: flex; align-items: center;
                                     justify-content: center; width: 44px; height: 44px;
                                     color: var(--shop-navy); cursor: pointer; list-style: none;
                                     text-decoration: none; }
  .shop-mmenu summary::-webkit-details-marker { display: none; }
  .shop-mmenu svg, .shop-mcart svg { width: 24px; height: 24px; }
  .shop-mmenu[open] summary { color: var(--accent); }
  .shop-mcart b { position: absolute; top: 3px; right: 0; min-width: 18px; height: 18px;
                  padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff;
                  font-size: 11px; line-height: 18px; text-align: center; }
  .shop-mmenu-panel { position: absolute; top: 100%; left: 0; right: 0; display: grid;
                      grid-template-columns: 1fr 1fr; background: var(--surface);
                      border-top: 1px solid var(--border);
                      box-shadow: 0 14px 28px rgba(0, 0, 0, .16); }
  .shop-mmenu-panel a { padding: 14px 20px; border-bottom: 1px solid var(--border);
                        color: var(--text); text-decoration: none; font-size: 14px; font-weight: 500; }
  .shop-mmenu-panel a:nth-child(odd) { border-right: 1px solid var(--border); }
  .shop-mmenu-panel a.shop-mmenu-tel { grid-column: 1 / -1; display: flex; align-items: baseline;
                                       gap: 8px; border-right: 0; }
  .shop-mmenu-tel b { color: var(--accent); font-size: 17px; }
  .shop-mmenu-tel small { color: var(--text-subtle); font-size: 12px; }

  /* 카테고리 바 — 한 줄을 채운 뒤 둘째 줄로. 두 줄에도 안 들어가면 base.html 스크립트가 줄 폭을 넓혀
     두 줄에 맞추고, 두 줄이 함께 옆으로 밀린다. 끝을 흐려 더 있다는 걸 보인다(0041).
     메뉴 버튼과 같은 ☰ 가 두 개 보이지 않게 여기 아이콘은 뺀다. */
  .shop-catnav { position: relative; }
  .shop-catnav .shop-wrap { gap: 18px; }
  .shop-catnav-links { display: block; overflow-x: auto; scrollbar-width: none; }
  .shop-catnav-links::-webkit-scrollbar { display: none; }
  .shop-catnav-row { display: flex; flex-wrap: wrap; column-gap: 18px; padding-right: 36px; box-sizing: border-box;
                     transition: none; }  /* 동작 줄이기 설정의 전역 0.01ms 전환이 폭 재기를 늦춰 4000px 까지 넓혔다 */
  .shop-catnav-links a { height: 44px; }
  .shop-catnav-all svg { display: none; }
  .shop-catnav::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 36px;
                        background: linear-gradient(to right, rgba(20, 40, 75, 0), var(--shop-navy));
                        pointer-events: none; }

  .shop-main { padding-top: 14px; }
  .shop-crumb { margin: 10px auto 0; font-size: 12px; }
  .shop-note { padding: 10px 12px; font-size: 12.5px; line-height: 1.6; }

  /* 상품목록 — 세로 카테고리 목록 → 가로로 미는 칩 한 줄. 견적 상자는 메뉴에 있어 뺀다.
     `minmax(0, 1fr)` 이어야 칩 줄이 넓어도 페이지가 옆으로 밀리지 않는다. */
  .shop-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .shop-side { min-width: 0; }
  .shop-side-title, .shop-side-cta, .shop-pricenote { display: none; }
  .shop-side-list { display: flex; gap: 8px; max-height: none; margin: 0 -20px; padding: 2px 20px 4px;
                    overflow-x: auto; border: 0; border-radius: 0; scrollbar-width: none; }
  .shop-side-list::-webkit-scrollbar { display: none; }
  .shop-side-list li { flex: none; }
  .shop-side-list a, .shop-side-list li:last-child a {
    gap: 6px; padding: 8px 14px !important; border: 1px solid var(--border-strong);
    border-radius: 999px; background: var(--surface); font-size: 13px !important; }
  .shop-side-list a.is-active { background: var(--shop-navy); border-color: var(--shop-navy);
                                color: #fff !important; }
  .shop-pricefilter { margin-top: 10px; padding: 10px 12px; }
  .shop-pricefilter h3 { margin-bottom: 8px; }
  .shop-pricerow input { font-size: 16px; }
  .shop-priceband { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .shop-priceband a { flex: none; }

  .shop-list-head { gap: 10px; margin: 0 0 12px; }
  .shop-list-head h1 { font-size: 19px; }
  .shop-sort { flex: 1 1 100%; flex-wrap: wrap; }
  .shop-sort select { flex: 1 1 0; min-width: 0; padding: 7px 8px; font-size: 16px; }

  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .shop-card-thumb { height: auto; aspect-ratio: 1 / 1; }
  .shop-card-thumb img { padding: 8px; }
  .shop-card-body { padding: 10px 10px 12px; }
  .shop-card-name { font-size: 13px; }
  .shop-card-code { margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .shop-card-price b { font-size: 15px; }

  /* 홍보 팝업 — 구석 팝업은 좌우 8px 까지 넓힌다. 가운데 팝업은 PC 와 같은 translate(-50%,-50%)·
     등장 애니메이션을 쓴다(위 640px 블록, 결정 0043). 화면보다 길면 팝업 안 스크롤(기본 규칙). */
  .shop-popup { max-width: none; }

  /* 한글이 낱말 중간에서 줄바뀜했다("승/인되면", "마현3/길 50", "(1551-/0494)").
     낱말 단위로 넘기고, 그래도 안 들어가는 긴 코드·주소만 아무 데서나 끊는다. */
  body.shop { word-break: keep-all; overflow-wrap: anywhere; }

  /* 진행 단계(가입·주문) — 네 칸이 390px 에 안 들어가 "약관동/의"처럼 라벨이 쪼개졌다.
     지금 단계만 이름을 보이고 나머지는 번호·체크로 둔다. 잇는 선은 남는 폭을 나눠 갖는다. */
  .shop-steps li:not(.is-current) .shop-step-label { display: none; }
  .shop-step-label { white-space: nowrap; }
  .shop-steps li + li { flex: 1 1 0; }
  .shop-steps li + li::before { flex: 1 1 auto; width: auto; min-width: 12px; }

  /* 주문일 필터 — [시작일] ~ [종료일] / [검색어][조회] 초기화 / 엑셀 */
  .shop-filter-date { gap: 8px; align-items: flex-end; }
  .shop-filter-date label { flex: 1 1 calc(50% - 16px); flex-direction: column; align-items: stretch; gap: 4px;
                            font-size: 12px; }
  .shop-filter-tilde { display: block; flex: none; padding-bottom: 10px; }
  .shop-filter-date input[type="date"] { flex: none; width: 100%; font-size: 16px; }
  .shop-filter-date input[name="q"] { flex: 1 1 55%; font-size: 16px; }
  .shop-filter-excel { margin-left: auto; }

  /* 마이페이지 — 세로 메뉴(약 780px)가 본문 위에 쌓여 첫 화면에 내용이 없었다.
     한 줄 프로필 + 가로 칩 메뉴로. 로그아웃은 ☰ 메뉴에 있다. */
  .shop-mypage-layout { gap: 14px; }
  .shop-mypage-profile { padding: 10px 14px; border-radius: var(--radius); }
  .shop-mypage-avatar { width: 30px; height: 30px; font-size: 13px; }
  .shop-mypage-profile > div { display: flex; align-items: center; gap: 8px; }
  .shop-mypage-profile b { margin: 0; }
  .shop-mypage-menu { display: flex; gap: 6px; margin: 0 -20px; padding: 10px 20px 2px;
                      overflow-x: auto; border: 0; border-radius: 0; scrollbar-width: none; }
  .shop-mypage-menu::-webkit-scrollbar { display: none; }
  .shop-mypage-menu h3, .shop-mypage-menu .is-soon, .shop-mypage-logout { display: none; }
  .shop-mypage-menu a { flex: none; padding: 7px 12px; border: 1px solid var(--border-strong);
                        border-radius: 999px; font-size: 13px; white-space: nowrap; }
  .shop-mypage-menu a.is-active { background: var(--shop-navy); border-color: var(--shop-navy); color: #fff; }
  .shop-mypage-layout .shop-form-title { margin-top: 6px; }
  .shop-detail-head { flex-wrap: wrap; gap: 8px 12px; justify-content: flex-start; }
  .shop-detail-head > h1 { flex-basis: 100%; }
  /* 주문 상세 버튼 묶음 — 폭을 나눠 채운다(두 줄이면 줄마다 꽉 차게), 서류 목록은 왼쪽 기준 */
  .shop-order-actions { width: 100%; justify-content: stretch; }
  .shop-order-actions > * { flex: 1 1 calc(33.333% - 6px); }
  .shop-order-actions .shop-act-btn { width: 100%; padding: 0 10px; }
  .shop-act-pop { left: 0; right: auto; min-width: 100%; }

  /* 상품 상세 — 옵션 선택칸이 130px 로 남아 오른쪽이 비었다. 전체 옵션 표는 칸 안에서만 스크롤. */
  .shop-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
  .shop-option select { width: 100%; min-width: 0; font-size: 16px; }
  .shop-variant-scroll { max-height: 360px; overflow-y: auto; border: 1px solid var(--border);
                         border-radius: var(--radius); }
  .shop-variant-scroll .shop-table { display: table; width: 100%; margin: 0; overflow: visible; }
  .shop-variant-scroll .shop-table > * { width: auto; min-width: 0; }
  .shop-variant-scroll thead th { position: sticky; top: 0; z-index: 1; }

  /* 주문서 — 납품 요청일 달력칸이 글자에 붙어 한 줄에 끼었다 */
  .shop-form input[type=date] { display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
                                border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
                                font: inherit; font-size: 16px; font-weight: 400; }

  /* 홈 바로가기 카드 — 세 장이 각 200px. 아이콘 옆에 제목·설명 두 줄로. */
  .shop-home-links { gap: 10px; margin-bottom: 28px; }
  .shop-home-link { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center;
                    column-gap: 14px; padding: 14px 16px; }
  .shop-home-link svg { grid-row: 1 / span 2; width: 28px; height: 28px; margin: 0; }
  .shop-home-link b { margin: 0 0 2px; font-size: 15px; }
  .shop-home-link span { font-size: 12px; line-height: 1.5; }
  .shop-home-link em { display: none; }

  /* 하단 — 신뢰 띠 + 푸터가 매 화면 끝에서 한 화면(약 840px)을 차지했다.
     띠는 아이콘+제목 3열, 푸터는 회사정보·고객센터 2열 + 바로가기 한 줄. */
  .shop-features .shop-wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px;
                              padding-top: 16px; padding-bottom: 16px; }
  .shop-features > .shop-wrap > div { flex-direction: column; gap: 4px; text-align: center; }
  .shop-features svg { width: 22px; height: 22px; }
  .shop-features b { margin: 0; font-size: 11.5px; }
  .shop-features span { display: none; }
  .shop-footer { padding: 22px 0 14px; }
  .shop-footer-grid { gap: 14px 20px; }
  .shop-footer-brand { grid-column: 1 / -1; }
  .shop-footer-brand b { margin: 0; font-size: 17px; }
  .shop-footer-brand p { display: none; }
  .shop-footer h3 { margin-bottom: 6px; font-size: 12px; }
  .shop-footer p { margin: 0 0 2px; font-size: 11.5px; line-height: 1.6; }
  .shop-footer-tel { font-size: 17px; }
  .shop-footer-grid > div:last-child { grid-column: 1 / -1; }
  .shop-footer-grid > div:last-child p { display: inline-block; margin-right: 14px; }
  .shop-footer .shop-copyright { margin: 14px auto 0; padding-top: 12px; font-size: 11px; }
}

/* ── 표 → 목록·카드 (≤700px) ──────────────────────────────────────────
   예전 ≤700px 표 규칙(위 "2026-09-25 삭제")과 같은 폭에서 켠다. 641~700px 에서도 표가 칸을
   넘치거나 비지 않게 — 폰 블록(≤640)에만 두었더니 그 사이 폭에서 옛 문제가 그대로 보였다. */
@media (max-width: 700px) {
  /* ── 폰에서 표 → 목록 (`.shop-mstack`) ──────────────────────────────
     표가 내용이 좁으면 쪼그라들어 오른쪽 끝이 안 맞고(공지 3열), 넓으면 뒤쪽 열이 화면 밖으로
     잘렸다(자료실·주문상품·배송지). 폰에서는 한 행 = 한 묶음: 첫 칸(또는 `.m-title`)이 한 줄,
     나머지는 그 아래 작게 이어 쓴다. 숫자만 남는 칸은 `data-label` 로 이름을 붙인다. */
  .shop-table.shop-mstack, .shop-table.shop-mstack tbody { display: block; overflow: visible; }
  .shop-table.shop-mstack > * { width: auto; min-width: 0; }
  .shop-table.shop-mstack thead { display: none; }
  .shop-table.shop-mstack tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
                               padding: 12px 2px; border-bottom: 1px solid var(--border); }
  .shop-table.shop-mstack td { display: block; padding: 0; border: 0; white-space: normal;
                               font-size: 12px; color: var(--text-muted); text-align: left; }
  .shop-table.shop-mstack td:first-child { flex-basis: 100%; font-size: 14px; color: var(--text); }
  .shop-table.shop-mstack.has-title td:first-child { flex-basis: auto; font-size: 12px;
                                                     color: var(--text-muted); }
  .shop-table.shop-mstack.has-title td.m-title { order: -1; flex-basis: 100%; font-size: 14px;
                                                 color: var(--text); }
  .shop-table.shop-mstack td:not(:first-child) small { display: inline; margin: 0 0 0 4px; }
  .shop-table.shop-mstack td.m-title small { display: block; margin: 2px 0 0; }
  .shop-table.shop-mstack td[data-label]::before { content: attr(data-label); margin-right: 4px;
                                                   color: var(--text-subtle); }
  .shop-table.shop-mstack td input[type=number] { width: 80px !important; font-size: 16px; }
  /* 배송지 수정 줄은 :target 일 때만 편다 — 위 `tr{display:flex}` 가 숨김을 이기지 않게 */
  .shop-table.shop-mstack tr.shop-addr-editrow { display: none; }
  .shop-table.shop-mstack tr.shop-addr-editrow:target { display: block; }
  .shop-table.shop-mstack tr.shop-addr-editrow > td { padding: 14px 12px; font-size: 13px; color: var(--text); }
  .shop-form-row { flex-wrap: wrap; }
  .shop-form-row > label { flex: 1 1 140px; min-width: 0; }

  /* 장바구니 — 7칸 표가 715px 로 페이지를 밀었다. 한 상품 = 한 카드:
     [✓] 상품 [✕] / 수량 / 단가 · 금액. 배송 칸("주문서에서 산정")은 요약에 같은 말이 있어 뺀다. */
  .shop-cart-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .shop-cart-main { min-width: 0; }
  .shop-cart-bar { gap: 8px; padding: 10px 12px; }
  .shop-cart-bar > .shop-muted { display: none; }
  .shop-table.shop-cart-table, .shop-table.shop-cart-table tbody { display: block; overflow: visible; }
  .shop-table.shop-cart-table > * { width: auto; min-width: 0; }
  .shop-table.shop-cart-table thead { display: none; }
  .shop-table.shop-cart-table tr { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 34px;
                                   grid-template-areas: "chk info info del" ". qty qty qty" ". unit amt amt";
                                   gap: 10px 10px; padding: 14px 0; border-bottom: 1px solid var(--border); }
  .shop-table.shop-cart-table td { padding: 0; border: 0; white-space: normal; }
  .shop-cart-table td.shop-cart-chk { grid-area: chk; width: auto; text-align: left; }
  .shop-cart-table td.shop-cart-info { grid-area: info; }
  .shop-cart-table td.shop-cart-del { grid-area: del; text-align: right; }
  .shop-cart-table td.shop-cart-qty { grid-area: qty; }
  .shop-cart-table td.shop-cart-unit { grid-area: unit; text-align: left; align-self: center;
                                       font-size: 12px; color: var(--text-muted); }
  .shop-cart-table td.shop-cart-unit br { display: none; }
  .shop-cart-table td.shop-cart-unit[data-label]::before { content: attr(data-label); margin-right: 4px;
                                                           color: var(--text-subtle); }
  .shop-cart-table td.shop-cart-amt { grid-area: amt; align-self: center; font-size: 15px; white-space: nowrap; }
  .shop-cart-table td.shop-cart-ship { display: none; }
  .shop-cart-table .shop-cart-thumb { width: 48px; height: 48px; }
  .shop-cart-table .shop-qty-form { gap: 6px 10px; }
  .shop-cart-table .shop-qty-form input { width: 58px; font-size: 16px; }

  /* 주문내역 — 결정 0024 의 칸을 **빼지 않고** 카드로 접는다(가로 스크롤 표에서는 앞 세 칸만
     보였다). 주문번호 / 상품명 / 주문일 / 금액 두 칸 / 나머지는 이름표를 달고 이어 쓴다.
     목록삭제 칸은 2026-09-30 에 없앴다(결정 0049) — 그 칸을 주문번호 옆으로 올리던 nth-child(15) 규칙도 뺐다
     (남겨 두면 15번째가 된 메모가 위로 올라간다). */
  [data-page="shop-orders"] .order-table-scroll { overflow: visible; }
  [data-page="shop-orders"] .order-list-table,
  [data-page="shop-orders"] .order-list-table tbody { display: block; min-width: 0; overflow: visible; }
  [data-page="shop-orders"] .order-list-table > * { width: auto; min-width: 0; }
  [data-page="shop-orders"] .order-list-table thead { display: none; }
  [data-page="shop-orders"] .order-list-table tr { display: flex; flex-wrap: wrap; align-items: baseline;
                                                   gap: 2px 10px; padding: 12px 2px;
                                                   border-bottom: 1px solid var(--border); }
  [data-page="shop-orders"] .order-list-table td { display: block; padding: 0; border: 0;
                                                   min-width: 0 !important; max-width: none !important;
                                                   white-space: normal !important; text-align: left;
                                                   font-size: 11.5px; color: var(--text-muted); }
  [data-page="shop-orders"] .order-list-table small { display: inline; margin: 0 0 0 4px; font-size: inherit; }
  [data-page="shop-orders"] .order-list-table td[data-label]::before {
    content: attr(data-label); margin-right: 4px; color: var(--text-subtle); }
  [data-page="shop-orders"] .order-list-table td:nth-child(2) { order: -3; flex: 1 1 auto;
                                                                font-size: 14px; font-weight: 700; }
  [data-page="shop-orders"] .order-list-table td:nth-child(4) { order: -1; flex-basis: 100%;
                                                                font-size: 13px; color: var(--text); }
  [data-page="shop-orders"] .order-list-table td.order-money { flex-basis: 100%; font-size: 12px;
                                                               color: var(--text); }
  .shop-filter-excel { padding: 6px 12px; font-size: 12px; }
  .shop-status-guide { margin-top: 24px; padding: 14px 16px; }
  .shop-status-guide ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }

  /* 배송지 수정 줄 버튼 — [저장](폭 100%)이 칸을 다 먹어 [닫기]가 "닫/기" 두 줄로 눌렸다 */
  .shop-addr-editbtns .shop-btn-primary { flex: 1 1 auto; width: auto; }
  .shop-addr-editbtns .shop-btn-line { flex: none; white-space: nowrap; }
  /* 주문 부분취소 — 취소 사유 입력칸이 기본 모양(좁은 칸)으로 글자 옆에 붙어 있었다 */
  #cancel-items label > input[name="reason"] { display: block; width: 100%; margin: 6px 0 10px;
                                              padding: 10px 12px; border: 1px solid var(--border-strong);
                                              border-radius: var(--radius-sm); font: inherit; font-size: 16px; }

  /* 견적 요청 품목 — 입력칸 다섯 개가 한 줄에 끼어 잘렸다. 품목명 한 줄 / 코드·수량 / 비고·삭제 */
  .shop-table.shop-quote-items, .shop-table.shop-quote-items tbody { display: block; overflow: visible; }
  .shop-table.shop-quote-items > * { width: auto; min-width: 0; }
  .shop-table.shop-quote-items thead { display: none; }
  .shop-table.shop-quote-items tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                                    gap: 8px 10px; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .shop-table.shop-quote-items td { padding: 0; border: 0; white-space: normal; }
  .shop-table.shop-quote-items td:first-child { grid-column: 1 / -1; }
  .shop-table.shop-quote-items td:last-child { align-self: end; }
  .shop-table.shop-quote-items td[data-label]::before { content: attr(data-label); display: block;
                                                        margin-bottom: 4px; font-size: 12px;
                                                        font-weight: 600; color: var(--text-muted); }
  .shop-table.shop-quote-items input { width: 100% !important; font-size: 16px; }
}
/* 장바구니 담기 안내 팝업(2026-10-12, cart-added.js) — 화면 가운데. 폰은 화면 폭에 맞추고 버튼은 크게 두 칸 */
.shop-cart-added { width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0;
                   border-radius: 12px; background: var(--surface, #fff); color: var(--text);
                   box-shadow: 0 24px 64px rgba(0, 0, 0, .24); }
.shop-cart-added::backdrop { background: rgba(15, 23, 42, .45); }
.shop-cart-added-body { padding: 22px 24px 24px; }
.shop-cart-added-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.shop-cart-added-head h2 { margin: 0; font-size: 18px; font-weight: 700; }
.shop-cart-added-x { flex: none; width: 40px; height: 40px; margin: -8px -10px 0 0; border: 0; background: transparent;
                     color: var(--text-muted); font-size: 24px; line-height: 1; cursor: pointer; }
.shop-cart-added-name { margin: 12px 0 8px; font-weight: 600; overflow-wrap: anywhere; }
.shop-cart-added-lines { display: grid; gap: 6px; max-height: 40vh; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.shop-cart-added-lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline;
                            padding: 8px 10px; border-radius: 8px; background: var(--surface-strong, #f5f7fa); font-size: 14px; }
.shop-cart-added-lines li span { overflow-wrap: anywhere; }
.shop-cart-added-lines li small { color: var(--text-muted); white-space: nowrap; }
.shop-cart-added-lines li b { white-space: nowrap; }
.shop-cart-added-extra { margin: 8px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.shop-cart-added-total { margin: 14px 0 18px; text-align: right; font-size: 15px; }
.shop-cart-added-total b { font-size: 18px; }
.shop-cart-added-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.shop-cart-added-btns > * { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%;
                            min-height: 46px; margin: 0; text-align: center; text-decoration: none; }
@media (max-width: 640px) {
  .shop-cart-added { width: calc(100vw - 24px); }
  .shop-cart-added-body { padding: 18px 16px 16px; }
  .shop-cart-added-btns > * { min-height: 48px; font-size: 15px; }
}

/* 주문 상세 택배사·송장번호·배송조회 (2026-10-13) — 분할출고면 출고마다.
   2026-10-14: 택배사·송장번호를 배송지 정보의 다른 줄과 같은 라벨·값 줄로 나누고, 송장번호 오른쪽에 [복사][배송조회].
   송장번호 칸·라벨·버튼이 같은 높이(--track-h)라 첫 줄이 맞고, 칸이 좁으면 버튼 묶음이 통째로 다음 줄로 내려간다(겹치지 않음). */
.shop-cards3 { --track-h: 28px; }
.shop-cards3 dt.shop-track-dt { line-height: var(--track-h); }
.shop-track { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.shop-track-no { min-width: 0; padding: calc((var(--track-h) - 1.5em) / 2) 0; line-height: 1.5;   /* 한 줄 = 버튼 높이, 넘치면 첫 줄이 라벨과 같은 높이 */
                 overflow-wrap: anywhere; font-weight: 700; font-variant-numeric: tabular-nums; }
.shop-track-btns { display: inline-flex; gap: 4px; flex: none; }
.shop-track-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
                  min-height: var(--track-h); padding: 0 8px; font-size: 12px; line-height: 1; white-space: nowrap; text-decoration: none; }
.shop-copy-btn { color: var(--text); }
.shop-copy-btn.is-done { color: var(--accent); border-color: var(--accent); }
@media (max-width: 640px) {
  .shop-cards3 { --track-h: 40px; }
  .shop-track-btn { padding: 0 14px; }
}

/* 교환·반품(환불) 신청 — 처리 방법 · 진행 단계 (2026-10-14, 결정 0093) */
.shop-pickup { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius, 8px); }
.shop-pickup legend { padding: 0 4px; font-weight: 700; }
.shop-pickup label { display: block; margin: 6px 0; }
.shop-pickup label small { display: block; margin-left: 22px; }
.shop-pickup label.is-disabled { opacity: .45; cursor: not-allowed; }   /* 디퓨저류 — 택배 맞교환 막음(2026-10-20) */
.shop-pickup .shop-warn { margin: 8px 0 0; }
.shop-pickup-note { margin-top: 8px; }
.claim-pickup { margin: 6px 0 2px; }
.claim-stage { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; margin: 6px 0; padding: 0; font-size: 12px; }
.claim-stage li { padding: 3px 10px; border: 1px solid var(--border); color: var(--text-subtle); background: var(--surface); white-space: nowrap; }
.claim-stage li + li { margin-left: -1px; }
.claim-stage li:first-child { border-radius: 999px 0 0 999px; }
.claim-stage li:last-child { border-radius: 0 999px 999px 0; }
.claim-stage li.is-done { color: var(--shop-navy); background: var(--surface-strong); }
.claim-stage li.is-cur { color: #fff; background: var(--shop-navy); border-color: var(--shop-navy); font-weight: 700; }
.claim-stage-rej { margin: 6px 0; color: var(--danger, #b42318); font-weight: 700; }

/* 주문내역 상단 탭 숫자 (N)(2026-10-14) — 탭 글자와 같은 크기·색, 선택된 탭에선 글자와 함께 굵게 */
.shop-tab-count { font: inherit; color: inherit; }