/* ═══════════════════════════════════════════════════════════════
   speedcos-tariff 계산기 — 메디리턴몰 skin51 디자인 체계 이식본
   출처 프로토타입: reference/prototypes/tube-cream-configurator.html

   ⚠️ 스코핑 규칙 (깨뜨리면 테마와 싸운다)
   1) CSS 변수는 :root 가 아니라 .spdtf 에 선언한다.
      → 루트 밖으로 나가는 요소(WC notice, Elementor 팝업, UM 모달)는
        var() 를 못 받아 색이 사라진다. 그런 요소엔 리터럴 색을 쓸 것.
   2) element 리셋은 반드시 #spdtf 접두(특이도 1,1,1).
      Elementor 킷이 .elementor-kit-16 h1 (0,1,1) 을 인라인 <style> 로 뿌리는데
      우리가 .spdtf h1 (0,1,1) 로 쓰면 출력 순서로 승부가 갈려 환경마다 달라진다.
   3) !important 를 쓰지 않는다. 나중에 우리가 우리를 못 덮는다.
   4) html / body 에는 아무것도 쓰지 않는다.
   5) 일반명 클래스 금지 — 전부 .spdtf- 접두. 특히 .hidden 은 WP 코어·다수
      플러그인이 전역으로 뿌려 양방향 사고가 난다 → .spdtf-hide
   ═══════════════════════════════════════════════════════════════ */
.spdtf {
  --spdtf-stick-bottom: 24px;   /* 3차: 우측 고정 카드 아랫변과 화면 바닥 사이(런처 히트테스트로 조정) */
  --spdtf-bg: #FFFFFF;
  --spdtf-bg-page: #F8FAFC;
  --spdtf-bg-soft: #F2F4F6;
  --spdtf-bg-chip: #F8F9FB;
  --spdtf-text: #191F28;
  --spdtf-text-2: #4E5968;
  --spdtf-text-3: #6B7684;
  --spdtf-text-4: #8B95A1;
  --spdtf-text-5: #B0B8C1;
  --spdtf-line: #E5E8EB;
  --spdtf-line-2: #D1D6DB;
  --spdtf-brand: #0000EC;   /* 2026-08-03 브랜드 파랑 통일 (전 #0064FF) */
  --spdtf-brand-dark: #0051CC;
  --spdtf-brand-soft: #E8F3FF;
  --spdtf-brand-faint: #F0F7FF;
  --spdtf-brand-line: #BFD7FA;
  --spdtf-danger: #F04452;
  --spdtf-danger-soft: #FEEEEE;
  --spdtf-amber-faint: #FFF8E5;
  --spdtf-amber-text: #8A6400;
  --spdtf-r-card: 14px;
  --spdtf-r-btn: 12px;
  --spdtf-r-input: 10px;
  --spdtf-ring: 0 0 0 3px rgba(0, 0, 236, 0.12);
  --spdtf-card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);   /* 6차(2026-10-04): 이상한아카데미 카드 그림자(tailwind shadow-lg 실측). 전엔 아주 옅은 값이고 쓰는 곳이 없었다 */
  --spdtf-r-box: 12px;   /* 6차: 우측 박스 2개의 모서리 — 우리 카드 14 와 이상한아카데미 8 의 절충 */
  --spdtf-sans: "Pretendard", "Pretendard Fallback", -apple-system, BlinkMacSystemFont,
                "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
  --spdtf-ls: -0.2px;

  background: var(--spdtf-bg);
  color: var(--spdtf-text);
  font-family: var(--spdtf-sans);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: var(--spdtf-ls);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}

.spdtf, .spdtf *, .spdtf *::before, .spdtf *::after { box-sizing: border-box; }

#spdtf h1, #spdtf h2, #spdtf h3 {
  margin: 0; text-wrap: balance; line-height: 1.28;
  letter-spacing: -0.5px; word-break: keep-all; color: var(--spdtf-text);
}
#spdtf p { margin: 0; }
/* 🐞 element 리셋을 #spdtf 로 올리면(1,0,1) 뒤에 오는 컴포넌트 클래스(0,1,0)를 **이긴다**.
   프로토타입에서는 `button{background:none}` 이 (0,0,1) 이라 `.btn-1` 에 졌는데,
   ID 접두를 붙이는 순간 캐스케이드가 뒤집혀 CTA 버튼이 맨 텍스트로 렌더됐다.
   → 리셋이 건드리는 속성(background/color/border)을 되돌리는 컴포넌트 규칙은
     반드시 같은 #spdtf 접두를 달아야 한다. 아래 버튼·탭·칩이 그 대상이다. */#spdtf button {
  font: inherit; color: inherit; background: none; border: none;
  cursor: pointer; letter-spacing: var(--spdtf-ls);
}
#spdtf table { border-collapse: collapse; width: 100%; }
.spdtf :focus-visible { outline: none; box-shadow: var(--spdtf-ring); border-radius: 6px; }

.spdtf-n { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
/* .spdtf-hide 는 파일 맨 끝에 #spdtf 접두로 선언한다 — 아래 참고 */

/* 2026-09-24: 사이트 공통 틀(speedcos-theme chrome.css .spdc-wrap)과 같은 폭 — 헤더 로고와 본문 왼쪽 선이 한 줄에 선다. */
.spdtf-wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
@media (max-width: 767px) { .spdtf-wrap { padding: 0 16px; } }

/* ── 섹션 ─────────────────────────────────────────────── */
.spdtf-sec { padding: 88px 0 0; }
.spdtf-sec:last-of-type { padding-bottom: 88px; }
.spdtf-sec-head { text-align: center; margin-bottom: 40px; }
#spdtf .spdtf-sec-head h2 { font-size: 30px; font-weight: 800; }
#spdtf .spdtf-sec-head p {
  margin: 14px auto 0; font-size: 16px; color: var(--spdtf-text-3);
  max-width: 60ch; line-height: 1.65;
}
.spdtf-sec-head p b { color: var(--spdtf-text-2); }

.spdtf-idx-err { text-align: center; color: var(--spdtf-text-4); padding: 48px 0; }

/* ── 배지 ─────────────────────────────────────────────── */
.spdtf-bdg {
  display: inline-block; font-size: 11px; font-weight: 700;
  border-radius: 5px; padding: 2px 7px; vertical-align: 2px;
}
.spdtf-bdg-fix { background: var(--spdtf-brand-soft); color: var(--spdtf-brand); }
.spdtf-bdg-ex { background: var(--spdtf-amber-faint); color: var(--spdtf-amber-text); }

/* ── 주문폼 — 2026-09-24 시안의 회색 라벨 표로 바뀌었다(아래 「정찰가 상세」 블록). 셀렉트·입력칸·설명 줄만 여기 남는다. ── */
.spdtf-fnote { width: 100%; font-size: 12.5px; color: var(--spdtf-text-4); line-height: 1.55; }

.spdtf-sel {
  appearance: none; -webkit-appearance: none; height: 42px;
  border: 1px solid var(--spdtf-line-2); border-radius: 8px;
  padding: 0 34px 0 14px; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--spdtf-text); background: var(--spdtf-bg)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B7684' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat right 13px center;
  cursor: pointer; letter-spacing: var(--spdtf-ls); max-width: 100%;
}
.spdtf-sel:hover { border-color: var(--spdtf-brand-line); }
.spdtf-sel:focus-visible { border-color: var(--spdtf-brand); }

.spdtf-inp {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--spdtf-line-2); border-radius: 8px;
  background: var(--spdtf-bg); height: 42px; padding: 0 14px; transition: all .18s ease;
}
.spdtf-inp:hover { border-color: var(--spdtf-brand-line); }
.spdtf-inp:focus-within { border-color: var(--spdtf-brand); box-shadow: var(--spdtf-ring); }
.spdtf-inp input {
  flex: 1; min-width: 0; border: none; background: none; font: inherit;
  font-size: 15px; font-weight: 700; text-align: right; padding: 0;
  -moz-appearance: textfield; font-variant-numeric: tabular-nums; color: var(--spdtf-text);
}
.spdtf-inp input::-webkit-outer-spin-button,
.spdtf-inp input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.spdtf-inp input:focus { outline: none; }
.spdtf-inp .spdtf-u { font-size: 12px; color: var(--spdtf-text-4); font-weight: 600; flex: none; }
.spdtf-ml-inp { width: 120px; }

/* ── 견적 레일 ────────────────────────────────────────── */
.spdtf-quote {
  border: 1px solid var(--spdtf-line); border-radius: var(--spdtf-r-card);
  background: var(--spdtf-bg); box-shadow: var(--spdtf-card-shadow); overflow: hidden;
}
.spdtf-q-rows { padding: 8px 24px 6px; }
.spdtf-qr {
  display: flex; justify-content: space-between; gap: 16px; padding: 11px 0;
  font-size: 14px; border-bottom: 1px solid var(--spdtf-line);
}
.spdtf-qr:last-child { border-bottom: none; }
.spdtf-qr .spdtf-k { color: var(--spdtf-text-3); }
.spdtf-qr .spdtf-v { font-weight: 600; text-align: right; }
.spdtf-qr.spdtf-tot { padding: 14px 0; }
.spdtf-qr.spdtf-tot .spdtf-k { color: var(--spdtf-text); font-weight: 700; font-size: 15px; }
.spdtf-qr.spdtf-tot .spdtf-v { font-size: 18px; font-weight: 800; }
.spdtf-qr.spdtf-sub .spdtf-k, .spdtf-qr.spdtf-sub .spdtf-v {
  color: var(--spdtf-text-4); font-size: 13px; font-weight: 500;
}
.spdtf-qr.spdtf-sub .spdtf-k { padding-left: 12px; }   /* 옵션 가산 줄 — 「└」 글리프 대신 들여쓰기(09-05) */

.spdtf-alerts { padding: 0 24px; display: flex; flex-direction: column; gap: 9px; }
/* 알림은 아이콘 없이 문장만 — 색 배경이 종류를 말한다(사장님 09-05: △ ⚠ ↓ 같은 글리프 금지). */
.spdtf-alert {
  display: block; padding: 12px 14px;
  border-radius: var(--spdtf-r-input); font-size: 13px; line-height: 1.6;
}
.spdtf-a-crit { background: var(--spdtf-danger-soft); color: var(--spdtf-danger); }
.spdtf-a-warn { background: var(--spdtf-amber-faint); color: var(--spdtf-amber-text); }
.spdtf-a-warn b { color: #6B4D00; }
.spdtf-a-info { background: var(--spdtf-bg-soft); color: var(--spdtf-text-2); }
.spdtf-a-good { background: var(--spdtf-brand-soft); color: var(--spdtf-brand); }

/* ── 장바구니 미리보기 ────────────────────────────────── */
/* 레일 장바구니 미리보기(.spdtf-cart 계열)는 2026-09-05 에 지웠다 — configurator.js 「장바구니」 주석. */

/* ── CTA ──────────────────────────────────────────────── */
.spdtf-q-cta { padding: 18px 24px 24px; display: flex; flex-direction: column; gap: 10px; }
#spdtf .spdtf-btn {
  display: block; width: 100%; text-align: center; border-radius: var(--spdtf-r-btn);
  text-decoration: none; font-size: 15px; font-weight: 700;
  height: 54px; line-height: 54px; transition: all .15s ease;
}
#spdtf .spdtf-btn-1 { background: var(--spdtf-brand); color: #fff; }
#spdtf .spdtf-btn-1:hover:not(:disabled) { background: var(--spdtf-brand-dark); color: #fff; }
#spdtf .spdtf-btn-2 { background: var(--spdtf-brand-soft); color: var(--spdtf-brand); }
#spdtf .spdtf-btn-2:hover:not(:disabled) { background: #DCEBFF; }
#spdtf .spdtf-btn-3 {
  border: 1px solid var(--spdtf-line); color: var(--spdtf-text-2);
  background: var(--spdtf-bg); height: 50px; line-height: 48px; font-size: 14px; font-weight: 600;
}
#spdtf .spdtf-btn-3:hover:not(:disabled) { border-color: var(--spdtf-brand); color: var(--spdtf-brand); background: #F4F8FF; }
#spdtf .spdtf-btn:disabled { opacity: .45; cursor: not-allowed; }
#spdtf .spdtf-btn.spdtf-busy { opacity: .6; pointer-events: none; }
.spdtf-q-fine { font-size: 12.5px; color: var(--spdtf-text-4); text-align: center; line-height: 1.6; }

/* ── 2026-09-05 「충격가 · 상담 메인 · 결제 밑밥」 ─────────────────
   신뢰 띠(상세 머리) · 인덱스 카드 「₩N부터」 · 튜브 배지 · 상담 신청 폼(모달 안). */
/* 튜브 「자동 충전」 배지(.spdtf-segbdg)는 6차(2026-10-04)에 뺐다 — 손님이 뜻을 모르는 공장 말이고 가격과 무관(사장님). tube 플래그·첫 선택은 그대로. */

/* 상담 신청 폼 — 모달(.spdtf-modal max-height 82vh, overflow auto) 안에 선다. */
.spdtf-lead { position: relative; display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.spdtf-fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#spdtf .spdtf-fld label { font-size: 12.5px; font-weight: 600; color: var(--spdtf-text-2); }
.spdtf-req { color: var(--spdtf-danger); }
#spdtf .spdtf-fld input, #spdtf .spdtf-fld textarea {
  width: 100%; max-width: 100%; box-sizing: border-box; height: 42px; margin: 0;
  border: 1px solid var(--spdtf-line-2); border-radius: var(--spdtf-r-input);
  padding: 0 12px; font: inherit; font-size: 14px; color: var(--spdtf-text); background: var(--spdtf-bg);
}
#spdtf .spdtf-fld textarea { height: auto; padding: 9px 12px; line-height: 1.5; resize: vertical; }
#spdtf .spdtf-fld input:focus, #spdtf .spdtf-fld textarea:focus {
  outline: none; border-color: var(--spdtf-brand); box-shadow: var(--spdtf-ring);
}
#spdtf .spdtf-chk { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--spdtf-text-2); cursor: pointer; line-height: 1.5; }
#spdtf .spdtf-chk input { width: 16px; height: 16px; margin: 2px 0 0; flex: none; accent-color: var(--spdtf-brand); }
#spdtf .spdtf-chk small { display: block; font-size: 11.5px; color: var(--spdtf-text-4); margin-top: 2px; line-height: 1.5; }
.spdtf-lead-err {
  margin: 0; padding: 9px 12px; border-radius: 8px;
  background: var(--spdtf-danger-soft); color: var(--spdtf-danger); font-size: 13px; font-weight: 600; line-height: 1.5;
}

/* 모달이 열린 동안 상담 런처 2개를 숨긴다 — 390px 에서 .woot-widget-bubble 이 모달 「닫기」를 덮었다(09-05 실측).
   body.spdtf-modal-open 은 configurator.js modal()/closeModal() 이 붙였다 뗀다. 플러그인을 끄면 표식이 안 붙는다. */
body.spdtf-modal-open #spm-main-cta-icon-m,
body.spdtf-modal-open .woot-widget-bubble,
body.spdtf-modal-open .woot-widget-holder { visibility: hidden; }

/* ── 모달 ─────────────────────────────────────────────── */
/* 루트 안에 두되 fixed 라 스택 컨텍스트를 벗어난다 → 변수는 상속으로 도달한다.
   단 Elementor 헤더가 z-index 를 높게 쓰므로 여유 있게 999 로 둔다. */.spdtf-mask {
  position: fixed; inset: 0; background: rgba(25, 31, 40, .45);
  display: grid; place-items: center; z-index: 999; padding: 20px;
}
.spdtf-modal {
  background: #fff; border-radius: 16px; max-width: 440px; width: 100%;
  padding: 26px 26px 22px; max-height: 82vh; overflow: auto;
  box-shadow: 0 18px 50px rgba(25, 31, 40, .22);
  color: var(--spdtf-text); font-family: var(--spdtf-sans);
}
#spdtf .spdtf-modal h3 { font-size: 18px; font-weight: 800; margin: 0; }
.spdtf-mbody { margin-top: 14px; font-size: 14px; color: var(--spdtf-text-2); line-height: 1.7; }
.spdtf-mrow {
  display: flex; justify-content: space-between; gap: 14px; padding: 9px 0;
  font-size: 13.5px; border-bottom: 1px solid var(--spdtf-line);
}
.spdtf-mrow .spdtf-k { color: var(--spdtf-text-3); }
.spdtf-mrow .spdtf-v { font-weight: 700; text-align: right; }
.spdtf-mrow.spdtf-tot .spdtf-k { color: var(--spdtf-text); font-weight: 700; }
.spdtf-mrow.spdtf-tot .spdtf-v { font-weight: 800; color: var(--spdtf-brand); font-size: 16px; }
.spdtf-mnote {
  margin-top: 14px; font-size: 12.5px; color: var(--spdtf-text-4); line-height: 1.65;
  background: var(--spdtf-bg-soft); border-radius: 8px; padding: 11px 13px;
}
.spdtf-mx { margin-top: 18px; display: flex; gap: 8px; }
.spdtf-mx .spdtf-btn { height: 48px; line-height: 48px; }

/* 첫 방문 안내 시트(2026-10-16 사장님 「팝업 같은 거 잠깐 띄울 수 있어?」 → 토스트 대신 1회 시트) — 상담 모달 틀(.spdtf-mask/.spdtf-modal)을 그대로 쓰고
   .spdtf-notice 가 붙으면 살짝 떠오르며 나타난다(0.22/0.26s, 움직임 줄이기면 위 규칙이 끈다). 폰(≤767)은 아래 시트(둥근 위 모서리 20, 전폭, safe-area).
   JS noticeOpen() 이 붙이고 closeModal() 이 어느 닫기 경로든 뗀다 — 상담 모달이 이 모양을 물려받지 않는다. */
.spdtf-mask.spdtf-notice .spdtf-modal { opacity: 0; transform: translateY(16px); transition: opacity .22s ease, transform .26s cubic-bezier(.22, 1, .36, 1); }
.spdtf-mask.spdtf-notice-in .spdtf-modal { opacity: 1; transform: none; }
.spdtf-mask.spdtf-notice .spdtf-mbody { font-size: 15px; }
@media (max-width: 767px) {
  .spdtf-mask.spdtf-notice { place-items: end stretch; padding: 0; }
  .spdtf-mask.spdtf-notice .spdtf-modal { max-width: none; border-radius: 20px 20px 0 0; padding: 24px 20px calc(20px + env(safe-area-inset-bottom)); transform: translateY(24px); box-shadow: 0 -8px 32px rgba(0, 0, 0, .12); max-height: calc(100vh - 8px); max-height: calc(100dvh - 8px); }
  .spdtf-mask.spdtf-notice-in .spdtf-modal { transform: none; }
}
/* 10-17 사장님 캡처(제목이 헤더 밑으로 잘림): 낮은 화면(창을 낮게·크게 확대·폰 키보드)에서는 82vh 안에 제목·본문·버튼이 안 들어가 안쪽 스크롤이 생기고 초점 이동이 제목을 밀어 올렸다.
   높이를 뷰포트 끝까지 쓰고 여백을 줄인다(JS 는 열린 직후 scrollTop 0). */
@media (max-height: 460px) {
  .spdtf-mask.spdtf-notice .spdtf-modal { max-height: calc(100vh - 8px); max-height: calc(100dvh - 8px); padding-top: 16px; padding-bottom: 16px; }
  .spdtf-mask.spdtf-notice .spdtf-mbody { margin-top: 8px; }
  .spdtf-mask.spdtf-notice .spdtf-mx { margin-top: 12px; }
}

/* 사급 안내(.spdtf-byo) · 준비중(.spdtf-soon) · 클로징(.spdtf-close) 은
   2026-08-22 에 /how-we-work/ 로 이사했다. 그 페이지 스타일은 how-we-work.css 다. */

/* ── 모바일 하단 바 ─────────────────────────────────────
   860px 이하에서 견적 레일이 본문 아래로 떨어져(아래 미디어쿼리) 화면 밖으로
   나간다. 애드피아 하단 결제금액 바와 같은 자리에 금액과 메인 CTA(상담 신청)를 고정한다.
   표시 여부는 **CSS 가 정한다** — JS 로 폭을 재면 회전·리사이즈마다 어긋난다.
   2026-09-24: 1024 → 860 — 861~1024 는 견적서 칸이 옆에서 따라다니는 2단이 됐는데 바가 그대로 떠 첫 화면 버튼과 견적서 칸을 덮었다(화면 검수 3R). */
.spdtf-sticky { display: none; }
@media (max-width: 860px), (max-width: 1024px) and (max-height: 700px) {
  #spdtf .spdtf-sticky:not(.spdtf-hide) {
    display: flex; align-items: center; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--spdtf-bg); border-top: 1px solid var(--spdtf-line);
    box-shadow: 0 -2px 14px rgba(0, 0, 0, .08);
  }
  .spdtf-sb-l { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
  .spdtf-sb-k {
    font-size: 11.5px; color: var(--spdtf-text-4);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .spdtf-sb-v { font-size: 20px; font-weight: 800; color: var(--spdtf-brand); letter-spacing: -.6px; }
  /* 확정 전 예시 — 모바일에서는 이 바가 유일하게 보이는 금액이라 색으로도 구분한다. */
  #spdtf .spdtf-sticky.is-ex { background: var(--spdtf-amber-faint); }
  #spdtf .spdtf-sticky.is-ex .spdtf-sb-k { color: var(--spdtf-amber-text); font-weight: 700; }
  #spdtf .spdtf-sticky .spdtf-btn { flex: none; width: auto; padding: 0 20px; height: 46px; line-height: 46px; }

  /* 🐞 2026-08-22 실측(390px): 상담 런처 2개가 bottom:20~30px 에 떠 있어
     **「장바구니 넣기」 버튼을 그대로 덮었다.** 캡처로만 갈린 결함이다.
     ⚠️ 우리 파일에서 남의 요소를 옮기는 유일한 자리다. 범위를 세 겹으로 좁힌다 —
        ① body.spdtf-bar (계산기 상세 화면에서만 JS 가 붙인다)
        ② 이 미디어쿼리(≤1024px) 안
        ③ 그 두 선택자만
        플러그인을 끄면 클래스가 안 붙어 원래 자리로 돌아간다. !important 는 쓰지 않는다. */
  body.spdtf-bar .woot-widget-bubble,
  body.spdtf-bar .woot-widget-bubble.woot-elements--right,
  body.spdtf-bar #spm-main-cta-icon-m { bottom: 96px; }
}

/* ── 로딩 ─────────────────────────────────────────────── */
.spdtf-loading { padding: 80px 0; text-align: center; color: var(--spdtf-text-4); font-size: 14px; }

/* ── 주문 상세의 사급 자재 블록 (speedcos_oem_after_progress_bar) ── */
.spdtf-order-supply { margin: 24px 0; }
.spdtf-order-supply h3 { font-size: 16px; font-weight: 700; margin: 0 0 12px; }
.spdtf-order-supply table { width: 100%; border-collapse: collapse; font-size: 14px; }
.spdtf-order-supply th, .spdtf-order-supply td {
  padding: 10px 12px; border-bottom: 1px solid #E5E8EB; text-align: right;
}
.spdtf-order-supply th:first-child, .spdtf-order-supply td:first-child { text-align: left; }
.spdtf-order-supply p { margin-top: 12px; font-size: 13px; color: #6B7684; line-height: 1.7; }

/* ── 반응형 ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .spdtf-sec { padding-top: 64px; }
  .spdtf-sec-head h2 { font-size: 24px; }
}
@media (max-width: 560px) {
  .spdtf { font-size: 14.5px; }
  .spdtf-sec { padding-top: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .spdtf *, .spdtf *::before, .spdtf *::after { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   숨김 유틸 — 반드시 파일 끝, 반드시 #spdtf 접두.

   🐞 실측 사고(2026-08-01): `.spdtf-hide{display:none}` 을 파일 앞쪽에 클래스
      특이도(0,1,0)로 두었더니, 뒤에 나오는 `.spdtf-mask{display:grid}` 와
      `.spdtf-inp{display:flex}` 가 같은 특이도라 **선언 순서로 이겨서**
      숨겨야 할 모달이 화면 전체를 덮고 클릭을 가로챘다.
      (Playwright: "spdtf-mask intercepts pointer events")
      → ID 접두(1,1,0)로 올리고 맨 끝에 둔다. !important 는 쓰지 않는다.
   ═══════════════════════════════════════════════════════════════ */#spdtf .spdtf-hide,
#spdtf.spdtf-hide { display: none; }

/* ── 하이브리드 컨트롤 (2026-08-13 — 애드피아 배치 × 사장님 v4 칩 모양) ──
   5개 이하 축은 노출형 버튼: 선택지가 항상 보이고 가산 "+₩N/개" 가 버튼 안에 붙는다.
   수량 버튼(.spdtf-qty)과 같은 상태 문법(aria-pressed)을 쓴다. */

.spdtf-segs { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
#spdtf .spdtf-seg {
  padding: 8px 14px; border: 1px solid var(--spdtf-line-2); border-radius: 8px;
  background: var(--spdtf-bg); font-size: 14px; font-weight: 700;
  color: var(--spdtf-text-2); letter-spacing: -.3px; transition: all .15s ease;
  text-align: left; min-height: 44px;
}
#spdtf .spdtf-seg:hover { border-color: var(--spdtf-brand-line); }
#spdtf .spdtf-seg[aria-pressed="true"] {
  border-color: var(--spdtf-brand); background: var(--spdtf-brand-faint); color: var(--spdtf-brand);
}
.spdtf-seg small {
  display: block; font-size: 11px; font-weight: 500;
  color: var(--spdtf-text-4); margin-top: 2px; letter-spacing: 0;
}
.spdtf-seg[aria-pressed="true"] small { color: var(--spdtf-brand); }

/* 🐞 2026-08-22 실측: .spdtf-fc 가 flex-row 라 이 그리드는 **flex 아이템**이고,
   기본 flex-basis:auto 로 내용에 맞춰 줄어든다. 사진이 있던 12처방은 썸네일 덕에
   폭이 나왔지만, **사진 없는 신규 36처방은 한 줄에 1장씩 쌓이고 오른쪽이 텅 비었다.**
   (코드 검사·존재검사는 이걸 못 본다 — 캡처로만 갈렸다.)
   → 항상 행 전체를 차지하게 하고, auto-fit 으로 빈 트랙을 접어 4장이 한 줄에 서게 한다. */
.spdtf-fcards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px;
  flex: 1 1 100%; min-width: 0;
}
#spdtf .spdtf-fcard {
  padding: 12px 14px; border: 1px solid var(--spdtf-line-2); border-radius: 10px;
  background: var(--spdtf-bg); text-align: left; transition: all .15s ease; min-height: 44px;
  /* 🐞 2026-08-22 실측: <button> 이 어딘가에서 white-space:nowrap 을 상속받아
     처방 설명이 카드 밖으로 79px 까지 삐져나가 잘렸다(전 카테고리 공통, 옛 12처방도).
     카드 폭이 172px 로 좁아지면서 눈에 띄었을 뿐 새로 생긴 결함은 아니다.
     세그먼트·수량 버튼은 짧아서 nowrap 이 오히려 맞으므로 **카드에만** 푼다. */
  white-space: normal;
}
#spdtf .spdtf-fcard:hover { border-color: var(--spdtf-brand-line); }
#spdtf .spdtf-fcard[aria-pressed="true"] {
  border-color: var(--spdtf-brand); background: var(--spdtf-brand-faint);
}
.spdtf-fcard strong {
  display: block; font-size: 15px; font-weight: 800; color: var(--spdtf-text); letter-spacing: -.4px;
}
.spdtf-fcard[aria-pressed="true"] strong { color: var(--spdtf-brand); }
.spdtf-fcard span {
  display: block; font-size: 12px; color: var(--spdtf-text-3); margin-top: 3px;
  line-height: 1.5; word-break: keep-all;
}

/* ── 제형·용기 썸네일 (2026-08-19) ─────────────────────────────────
   사장님 지적: "odm price 는 사람이 인지하기에 부적합하다 — 콘텐츠가 없다."
   실측 근거: configurator.php 169줄 전체에 <img> 0개·<svg> 0개였고, 처방 12종이
   전부 글자 2줄짜리 버튼이었다. 성원애드피아는 같은 자리에 실물 썸네일이 붙는다.

   ⚠️ 사진이 없는 항목에는 아무것도 넣지 않는다(.has-img 가 없으면 규칙이 안 걸린다).
      회색 네모나 "사진 자리" 글자를 손님에게 보이는 쪽이 더 나쁘다.
   ⚠️ 카드 폭을 220 → 150 으로 줄여 한 줄에 4장이 들어가게 했다. 처방이 카테고리마다
      정확히 4개라 4열이면 줄바꿈 없이 한눈에 비교된다. */
.spdtf-fcards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
#spdtf .spdtf-fcard.has-img { padding: 10px 10px 12px; }
.spdtf-fthumb {
  display: block; aspect-ratio: 1/1; border-radius: var(--spdtf-r-input, 10px);
  overflow: hidden; background: var(--spdtf-bg-soft, #F2F4F6); margin-bottom: 10px;
}
.spdtf-fthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

#spdtf .spdtf-seg.has-img {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px;
}
.spdtf-segimg {
  flex: none; width: 40px; height: 40px; border-radius: 8px; overflow: hidden;
  background: var(--spdtf-bg-soft, #F2F4F6);
}
.spdtf-segimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spdtf-segtxt { display: block; }

@media (max-width: 600px) {
  .spdtf-fcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* 견적 대기 중 — 요약은 새 조합인데 단가·행·하단 바는 옛 값이라, 값이 오기 전까지 흐리게(2026-09-05 반증 8R). paintQuote 가 푼다. */
#spdtf .spdtf-pending { opacity: .45; transition: opacity .15s ease; }

/* ═══════════════════════════════════════════════════════════════
 * 정찰가 목록 (2026-09-24 B2B 2단계) — 시안 uploads/spd-mock/b2b-v1/list.html · _src/mock.css 「목록」 블록 값 그대로.
 * 폭은 사이트 공통 틀(speedcos-theme chrome.css .spdc-wrap: 1240 + 좌우 20)과 맞춘다 — 헤더와 본문 왼쪽 선이 같은 자리.
 * 사진 이음새 회색 #E4E4E4 는 제품 컷 가장자리 실측값(시안 가정, 팔레트 예외).
 * ═══════════════════════════════════════════════════════════════ */
/* 여백(2026-10-03 2차, 사장님 「너무 숨막힌다」) — 메디리턴 카테고리 리듬(헤더 아래 큰 여백 → 배너 → 48 → 정렬 줄 → 카드, 카드 행 40).
   메뉴 줄→경로 48(섹션 padding 30 + 경로 18 — .spdtf-lcrumb 는 상세 경로와 같은 클래스라 안 건드린다) · 경로→배너 16 · 배너→칩 40 · 칩→카드 48 · 카드 행 48 열 24 · 바닥 72 */
#spdtf .spdtf-index.spdtf-sec { padding-top: 30px; padding-bottom: 72px; }
#spdtf .spdtf-lcrumb { font-size: 13px; color: var(--spdtf-text-3); padding: 18px 0 0; }
#spdtf .spdtf-lcrumb a { color: var(--spdtf-text-3); text-decoration: none; }
#spdtf .spdtf-lcrumb a:hover { color: var(--spdtf-text); }
#spdtf .spdtf-lcrumb i { font-style: normal; margin: 0 6px; color: var(--spdtf-text-4); }
#spdtf .spdtf-lcrumb b { color: var(--spdtf-text); font-weight: 600; }
/* 배너(2026-10-03) — 메디리턴 라인 배너 틀(둥근 전폭 카드 1280×200, 왼쪽 제목·부제, 오른쪽 제품 사진)을 HTML 글자 + 사진으로.
   사진은 오른쪽 50% 상자에 cover 로 앉히고 왼쪽 40% 를 마스크로 바탕색에 녹인다 — 글자 자리가 비고 이음새가 안 보인다.
   사진 바탕은 PIL 로 --spdtf-bg-soft 에 맞춰 두었다(speedcos-theme tools/cate-banner.py). 사진이 없으면 .has-img 가 빠져 글자 배너만(메디리턴 글자 카드 폴백). */
#spdtf .spdtf-lhero { position: relative; display: flex; align-items: center; min-height: 200px; margin: 16px 0 40px; padding: 0 40px; border-radius: var(--spdtf-r-card); background: var(--spdtf-bg-soft); overflow: hidden; }
#spdtf .spdtf-lhero-tx { position: relative; z-index: 1; max-width: 52%; padding: 28px 0; }
#spdtf .spdtf-lhero-h { display: flex; align-items: flex-end; gap: 10px; }
#spdtf .spdtf-lhero h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1.2; }
#spdtf .spdtf-lcnt { font-size: 15px; color: var(--spdtf-text-3); margin-bottom: 3px; }
#spdtf .spdtf-lhero-d { margin: 8px 0 0; font-size: 15px; font-weight: 500; letter-spacing: -0.3px; line-height: 1.5; color: var(--spdtf-text-2); text-wrap: pretty; }
#spdtf .spdtf-lhero-d[hidden] { display: none; }
/* 10-16 머리 상태 문장(#spdtf-lstate) — 부제와 같은 .spdtf-lhero-d(크기·색 그대로, 작게·회색 금지). 부제와 줄 간격만 6px. 확정 전 카테고리가 0이면 hidden(서버+JS). */
#spdtf .spdtf-lstate { margin-top: 6px; }
#spdtf .spdtf-lhero-img { position: absolute; right: 0; top: 0; bottom: 0; width: 50%; margin: 0; }
#spdtf .spdtf-lhero-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40%); mask-image: linear-gradient(to right, transparent 0, #000 40%); }
/* 가격 기준 한 줄(.spdtf-lnote)은 2차(10-03 「빼라」)에 목록에서 지웠다 — 정렬 버튼이 오른쪽 끝(margin-left:auto) */
/* 칩 줄 아래 가는 선(2026-10-03 3차 사장님 「필터랑 카드 사이에 선 하나」 — 메디리턴 개수·정렬 줄의 border-bottom 1px #E5E8EB). 칩→카드 48 = 아래 여백 16 + 선 + 32 */
#spdtf .spdtf-lfilter { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--spdtf-line); margin-bottom: 32px; }
#spdtf .spdtf-lchips { display: flex; gap: 8px; flex-wrap: wrap; }
/* 칩 = 상세 「종류」 선택 버튼(.spdtf-seg)과 같은 문법(3차 사장님 「검은 버튼은 우리 사이트랑 안 맞는다, 종류 버튼 느낌이 강조가 잘 된다」):
   흰 바탕 · 1px 회색 테두리 · 둥글기 8 · 고르면 파란 테두리 + 연한 파란 바탕 + 파란 글자. 뒤의 개수 숫자는 뺐다(사장님 「불필요」). */
#spdtf .spdtf-chip {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 8px;
  border: 1px solid var(--spdtf-line-2); font-size: 14px; font-weight: 500; letter-spacing: -0.3px; background: var(--spdtf-bg); color: var(--spdtf-text); text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
#spdtf .spdtf-chip:hover { border-color: var(--spdtf-brand-line); color: var(--spdtf-text); }
#spdtf .spdtf-chip.on { border-color: var(--spdtf-brand); background: var(--spdtf-brand-faint); color: var(--spdtf-brand); font-weight: 700; }
#spdtf .spdtf-lsort { margin-left: auto; display: flex; gap: 14px; font-size: 13px; }
#spdtf .spdtf-lsort button { font-size: 13px; line-height: 1.5; color: var(--spdtf-text-3); padding: 0; }
#spdtf .spdtf-lsort button:hover { color: var(--spdtf-text); }
#spdtf .spdtf-lsort button[aria-pressed="true"] { color: var(--spdtf-text); font-weight: 700; }

#spdtf .spdtf-idx-g { margin-top: 0; }
#spdtf .spdtf-idx-gh { display: flex; align-items: baseline; gap: 8px; flex-wrap: nowrap; margin: 0 0 24px; }
#spdtf .spdtf-idx-gh h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.6px; line-height: 1.5; }
#spdtf .spdtf-idx-gh span { color: var(--spdtf-text-3); font-size: 14px; }
#spdtf .spdtf-idx-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 24px; margin-bottom: 48px; }   /* 행 간격은 아래 subgrid 블록의 카드 margin-bottom 이 실효값 */
#spdtf .spdtf-idx-card {
  display: block; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: var(--spdtf-text); text-decoration: none; min-width: 0;
}
#spdtf .spdtf-idx-card:hover { border: 0; box-shadow: none; transform: none; }
/* 카드 = 메인 카드 문법(2026-10-03 사장님 「메인 참고」 — speedcos-theme home-b.css .spdhb-tag · .spdhb-nm · .spdhb-price 값 그대로):
   사진 · 묶음 칩 · 이름 15/500 · **부제 13/400 회색**(2차 10-03 사장님 「메디리턴처럼 상품명 밑에 부제」 — 메디리턴 style-prod-item.css:460-469 값) · 검은 가격 16/700.
   🚨 사장님이 카드 글자를 두 번 반려했다(09-30) — 이 넷 밖에 글자를 더 넣지 마라. 부제는 catalog.php cat_subtitles 한 곳. */
#spdtf .spdtf-idx-card:hover .spdtf-idx-nm { color: var(--spdtf-brand); }
#spdtf .spdtf-idx-thumb { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: #E4E4E4; margin-bottom: 12px; }
#spdtf .spdtf-idx-thumb > img { display: block; width: 100%; height: 100%; object-fit: cover; }
#spdtf .spdtf-idx-tag { display: inline-block; justify-self: start; font-size: 12px; font-weight: 500; letter-spacing: -0.2px; color: var(--spdtf-text-2); background: var(--spdtf-bg-soft); border-radius: 4px; padding: 2px 7px; line-height: 18px; margin-bottom: 6px; }
#spdtf .spdtf-idx-nm { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 500; letter-spacing: -0.3px; margin-bottom: 2px; }
#spdtf .spdtf-idx-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 400; line-height: 1.45; letter-spacing: -0.2px; color: var(--spdtf-text-3); word-break: keep-all; text-wrap: pretty; margin-bottom: 6px; }
#spdtf .spdtf-idx-from { display: block; font-size: 16px; line-height: 1.5; font-weight: 700; letter-spacing: -0.3px; color: var(--spdtf-text); margin-top: 0; }
#spdtf .spdtf-idx-from em { font-style: normal; font-size: 16px; font-weight: 700; }
#spdtf .spdtf-idx-from em:first-child { font-size: 13px; font-weight: 500; margin-right: 3px; }
#spdtf .spdtf-idx-from b { font-size: 16px; font-weight: 700; color: inherit; letter-spacing: -0.3px; line-height: inherit; }
@media (max-width: 1024px) {
  #spdtf .spdtf-idx-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 16px; }
  #spdtf .spdtf-index.spdtf-sec { padding-top: 10px; padding-bottom: 48px; }
  #spdtf .spdtf-lhero { min-height: 170px; margin: 12px 0 28px; padding: 0 28px; }
  #spdtf .spdtf-lfilter { padding-bottom: 14px; margin-bottom: 22px; }
  #spdtf .spdtf-idx-gh { margin-bottom: 20px; }
}
@media (max-width: 767px) {
  #spdtf .spdtf-lsort { display: none; }
  #spdtf .spdtf-index.spdtf-sec { padding-top: 2px; padding-bottom: 40px; }
  /* 배너 폰: 358 폭 안에서 제목 24 + 부제 13 두 줄 — 글자 68% (마스크가 사진 왼쪽 40% 를 비우므로 겹치지 않는다) */
  #spdtf .spdtf-lhero { min-height: 140px; margin: 12px 0 24px; padding: 0 20px; }
  #spdtf .spdtf-lfilter { padding-bottom: 12px; margin-bottom: 20px; }
  #spdtf .spdtf-idx-gh { margin-bottom: 16px; }
  #spdtf .spdtf-lhero-tx { max-width: 68%; padding: 20px 0; }
  #spdtf .spdtf-lhero h1 { font-size: 24px; letter-spacing: -0.6px; }
  #spdtf .spdtf-lcnt { font-size: 13px; margin-bottom: 2px; }
  #spdtf .spdtf-lhero-d { font-size: 13px; letter-spacing: -0.2px; margin-top: 6px; }
  #spdtf .spdtf-lstate-a { display: none; }   /* 10-16 폰은 상태 문장 한 문장만(첫 문장 숨김) — 부제 2줄 + 3줄이 배너를 채워서(반증 의견, 사장님 결정) */
  #spdtf .spdtf-lhero-img { width: 45%; }
  #spdtf .spdtf-idx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
}

/* ═══════════════════════════════════════════════════════════════
 * 정찰가 상세 (2026-09-24 B2B 3단계) — 시안 uploads/spd-mock/b2b-v1/detail.html · _src/mock.css 「상세」 블록 값 그대로.
 * 상단 상품 블록 → 탭 줄(사이트 메뉴 줄 바로 아래에 붙는다 — top 은 JS bindTabs 가 메뉴 줄 높이로 잡는다)
 * → 회색 라벨 열 견적 조건 표 + 우측 견적서 패널 → 수량별 가격 → 상품 정보 · 진행 과정 · 결제와 할부 · 자주 묻는 질문.
 * 🚨 #spdtf 접두 필수 — 파일 앞쪽 리셋(#spdtf button, #spdtf h1…)이 (1,0,1) 이라 접두 없는 클래스는 진다.
 * ═══════════════════════════════════════════════════════════════ */
/* hello 테마 theme.css 의 표 규칙(모든 칸 세로 테두리 · 홀수 줄 회색 · 줄 hover 회색)이 새어 들어온다 — 우리 표는 시안대로 가로 선만. */
#spdtf table th, #spdtf table td { border: 0; background-color: transparent; }
#spdtf table tbody tr:hover > td, #spdtf table tbody tr:hover > th { background-color: transparent; }
#spdtf .spdtf-sel { width: auto; }
#spdtf .spdtf-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#spdtf .spdtf-detail { padding-bottom: 0; }
#spdtf .spdtf-pd-top { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 48px; padding: 14px 0 56px; }
#spdtf .spdtf-pd-main { aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; background: #E4E4E4; }
#spdtf .spdtf-pd-main img { display: block; width: 100%; height: 100%; object-fit: cover; }
#spdtf .spdtf-pd-thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
#spdtf .spdtf-pd-th { display: block; aspect-ratio: 1 / 1; padding: 0; border-radius: 8px; overflow: hidden; background: #E4E4E4; border: 1px solid transparent; }
#spdtf .spdtf-pd-th:hover { border-color: var(--spdtf-line-2); }
#spdtf .spdtf-pd-th[aria-pressed="true"] { border-color: var(--spdtf-text); }
#spdtf .spdtf-pd-th img { display: block; width: 100%; height: 100%; object-fit: cover; }
#spdtf .spdtf-pd-th.is-form, #spdtf .spdtf-pd-th.is-form img { background: #FFFFFF; object-fit: contain; }
#spdtf .spdtf-pd-th.is-form { border-color: var(--spdtf-line); }
#spdtf .spdtf-pd-th.is-form[aria-pressed="true"] { border-color: var(--spdtf-text); }
/* hover — 용기 사진 칸(.is-form)의 테두리 규칙이 hover 와 특이도가 같아 덮였다(hover 감사). 누른 칸은 그대로 */
#spdtf .spdtf-pd-th:not([aria-pressed="true"]):hover, #spdtf .spdtf-pd-th.is-form:not([aria-pressed="true"]):hover { border-color: var(--spdtf-text-4); }
#spdtf .spdtf-pd-th { transition: border-color .15s ease; }
#spdtf .spdtf-faq summary { transition: color .15s ease; }
#spdtf .spdtf-faq summary:hover { color: var(--spdtf-brand); }
#spdtf .spdtf-lchip { display: inline-block; font-size: 12px; font-weight: 600; color: var(--spdtf-text-2); background: var(--spdtf-bg-soft); border-radius: 6px; padding: 2px 8px; margin-bottom: 8px; }
#spdtf .spdtf-pd-info h1 { margin: 4px 0 8px; font-size: 32px; font-weight: 800; letter-spacing: -1px; line-height: 1.2; }
#spdtf .spdtf-pd-lead { font-size: 15px; color: var(--spdtf-text-2); margin: 0 0 12px; letter-spacing: -0.3px; line-height: 1.5; }   /* 5차: 부제가 생겨 20→12(카드가 내려오는 만큼) */
#spdtf .spdtf-pd-kinds { font-size: 13px; color: var(--spdtf-text-3); margin: -6px 0 16px; letter-spacing: -0.2px; }   /* 5차: 종류 나열(토너, 미스트, 토너패드) — 부제 바로 아래 작은 회색 줄 */
#spdtf .spdtf-pd-lead b { color: var(--spdtf-text); }
#spdtf .spdtf-pd-spec { width: 100%; border-collapse: collapse; border-top: 1px solid var(--spdtf-text); margin-bottom: 22px; }
#spdtf .spdtf-pd-spec th, #spdtf .spdtf-pd-spec td { padding: 12px 0; border-bottom: 1px solid var(--spdtf-line); text-align: left; vertical-align: top; font-size: 14px; line-height: 1.5; }
#spdtf .spdtf-pd-spec th { width: 96px; font-weight: 500; color: var(--spdtf-text-3); }
#spdtf .spdtf-pd-spec td { color: var(--spdtf-text); }
#spdtf .spdtf-pd-from { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
#spdtf .spdtf-pd-price { font-size: 30px; font-weight: 800; letter-spacing: -0.4px; color: var(--spdtf-text); line-height: 1.5; }
#spdtf .spdtf-pd-price small { font-size: 16px; font-weight: 600; color: var(--spdtf-text); margin-right: 6px; }
#spdtf .spdtf-pd-price .spdtf-n { color: var(--spdtf-brand); }
#spdtf .spdtf-pd-price em { font-style: normal; font-size: 18px; }
#spdtf .spdtf-pd-base { font-size: 13px; color: var(--spdtf-text-3); }
#spdtf .spdtf-pd-low { font-size: 13px; color: var(--spdtf-text-2); margin-bottom: 22px; }
#spdtf .spdtf-pd-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#spdtf .spdtf-pd-cta .spdtf-btn, #spdtf .spdtf-est .spdtf-btn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 48px; line-height: 1.2; border-radius: 10px; font-size: 15px; font-weight: 600; }
#spdtf .spdtf-pd-note { font-size: 12px; color: var(--spdtf-text-3); margin-top: 10px; }

/* 버튼 — 시안 .btn / .btn.pri (옛 54px·12px 둥근 모서리를 덮는다) */
#spdtf .spdtf-btn { border-radius: 10px; }
#spdtf .spdtf-btn-1 { background: var(--spdtf-brand); color: #FFFFFF; border: 1px solid var(--spdtf-brand); }
#spdtf .spdtf-btn-1:hover:not(:disabled) { background: #0000B8; border-color: #0000B8; color: #FFFFFF; }
#spdtf .spdtf-btn-3 { background: #FFFFFF; color: var(--spdtf-text); border: 1px solid var(--spdtf-line); font-weight: 600; }
#spdtf .spdtf-btn-3:hover:not(:disabled) { border-color: var(--spdtf-text); color: var(--spdtf-text); background: #FFFFFF; }

/* 탭 줄 */
#spdtf .spdtf-tabbar { position: -webkit-sticky; position: sticky; top: 0; z-index: 15; background: #FFFFFF; border-bottom: 1px solid var(--spdtf-line); margin-bottom: 36px; }
#spdtf .spdtf-tabbar .spdtf-wrap { display: flex; }
#spdtf .spdtf-tabbar a { flex: 1; text-align: center; padding: 16px 0 13px; font-size: 15px; font-weight: 600; color: var(--spdtf-text-3); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
#spdtf .spdtf-tabbar a:hover { color: var(--spdtf-text); }
#spdtf .spdtf-tabbar a.on { color: var(--spdtf-brand); font-weight: 700; border-bottom-color: var(--spdtf-brand); }   /* 4차(2026-10-03 사장님 「컬러가 들어가야 탭인지 안다」): 고른 탭 = 브랜드 파랑 글자 + 파란 밑줄 2px(이상한아카데미식). 전엔 검은 글자·검은 1px */
#spdtf .spdtf-tabbar .s { display: none; }

/* 견적 조건 표 + 견적서 패널 */
#spdtf .spdtf-cfg { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; margin-bottom: 72px; }
#spdtf .spdtf-ctbl { width: 100%; border-collapse: collapse; border-top: 1px solid var(--spdtf-text); }
#spdtf .spdtf-ctbl th.spdtf-fl { width: 128px; background: var(--spdtf-bg-soft); text-align: left; vertical-align: top; padding: 16px; font-size: 14px; font-weight: 600; color: var(--spdtf-text); border-bottom: 1px solid var(--spdtf-line); line-height: 1.5; }
#spdtf .spdtf-ctbl th.spdtf-fl small { display: block; font-size: 12px; font-weight: 400; color: var(--spdtf-text-3); margin-top: 2px; }
#spdtf .spdtf-ctbl td.spdtf-fc { padding: 12px 16px; border-bottom: 1px solid var(--spdtf-line); vertical-align: top; }
#spdtf .spdtf-fnote { display: block; width: 100%; font-size: 13px; color: var(--spdtf-text-3); line-height: 1.55; margin-top: 6px; }
#spdtf .spdtf-fnote:empty { display: none; }
#spdtf .spdtf-ml-note { display: inline; width: auto; margin: 0 0 0 8px; }
#spdtf .spdtf-segs { display: flex; flex-wrap: wrap; gap: 6px; }
#spdtf .spdtf-seg {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border: 1px solid var(--spdtf-line); border-radius: 8px;
  font-size: 14px; font-weight: 400; color: var(--spdtf-text); background: #FFFFFF; letter-spacing: -0.2px; text-align: left;
}
#spdtf .spdtf-seg small { display: inline; margin: 0; font-size: 12px; font-weight: 400; color: var(--spdtf-text-3); }
#spdtf .spdtf-seg:hover { border-color: var(--spdtf-line-2); }
#spdtf .spdtf-seg[aria-pressed="true"] { border-color: var(--spdtf-brand); color: var(--spdtf-brand); font-weight: 600; background: #EEF0FF; }
#spdtf .spdtf-seg[aria-pressed="true"] small { color: var(--spdtf-brand); }
#spdtf .spdtf-seg.has-img { padding: 6px 14px 6px 8px; }
#spdtf .spdtf-segimg { width: 32px; height: 32px; border-radius: 6px; background: transparent; }
#spdtf .spdtf-segimg img { object-fit: contain; }
#spdtf .spdtf-segtxt small { display: block; }
#spdtf .spdtf-fcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
#spdtf .spdtf-fcard { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 6px; min-height: 40px; border: 1px solid var(--spdtf-line); border-radius: 8px; background: #FFFFFF; text-align: left; white-space: normal; }
#spdtf .spdtf-fcard.has-img { padding: 6px; }
#spdtf .spdtf-fcard:hover { border-color: var(--spdtf-line-2); }
#spdtf .spdtf-fcard[aria-pressed="true"] { border-color: var(--spdtf-brand); background: #EEF0FF; }
#spdtf .spdtf-fthumb { margin: 0; border-radius: 6px; background: #E4E4E4; }
#spdtf .spdtf-fcard strong { font-size: 14px; font-weight: 600; letter-spacing: -0.3px; padding: 0 4px; color: var(--spdtf-text); }
#spdtf .spdtf-fcard[aria-pressed="true"] strong { color: var(--spdtf-brand); }
#spdtf .spdtf-fcard > span:not(.spdtf-fthumb) { font-size: 12px; color: var(--spdtf-text-3); padding: 0 4px 4px; margin: 0; }
#spdtf .spdtf-qtys { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
#spdtf .spdtf-qty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; padding: 6px 4px; border: 1px solid var(--spdtf-line); border-radius: 8px; background: #FFFFFF; color: var(--spdtf-text); letter-spacing: -0.2px; }
#spdtf .spdtf-qty .spdtf-n { font-size: 15px; font-weight: 700; }
#spdtf .spdtf-qty small { display: block; margin: 0; font-size: 12px; font-weight: 400; color: var(--spdtf-text-3); }
#spdtf .spdtf-qty:hover:not(:disabled) { border-color: var(--spdtf-line-2); }
#spdtf .spdtf-qty:disabled { opacity: .45; cursor: not-allowed; background: var(--spdtf-bg-soft); }   /* 2026-10-15 가마 최소 제조량 미달 수량 — 회색, 작은 글자 「상담으로」 */
#spdtf .spdtf-qty[aria-pressed="true"] { border-color: var(--spdtf-brand); color: var(--spdtf-brand); background: #EEF0FF; }
#spdtf .spdtf-qty[aria-pressed="true"] small { color: var(--spdtf-brand); }
#spdtf .spdtf-qty .spdtf-qty-per { font-style: normal; }
/* 2026-10-18 수량 5칸 고정 — 못 만드는 칸은 회색으로 막지 않는다(10-15 오전 회색 칩은 「안 된다」로 읽혔다). 테두리·바탕은 보통 칸 그대로, 둘째 줄만 파란 글자 「300ml부터」(누르면 그 용량으로) */
#spdtf .spdtf-qty small.spdtf-qty-up { color: var(--spdtf-brand); font-weight: 600; white-space: nowrap; }
#spdtf .spdtf-qtbl .spdtf-qtbl-up, #spdtf .spdtf-qlist .spdtf-qtbl-up { color: var(--spdtf-brand); font-weight: 600; }
#spdtf .spdtf-mlq[data-mlq-fm] { grid-template-columns: 64px 1fr auto; }   /* 10-18 「수량별」 줄은 수량이 앞(「20,000개」가 56px 를 넘는다) */
#spdtf .spdtf-alert a.spdtf-why { color: var(--spdtf-brand); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }   /* 10-18 안내 줄 끝 「이유 보기」(필독칼럼 3편, 새 탭) */
/* 10-17 밤 「용량별」 줄 — 한 줄에 「300ml · 1,000개부터 · 개당 3,280원」 세 칸(가운뎃점 없이 칸으로 나눈다). 선택 상태 문법은 수량 버튼과 같다(aria-pressed). */
#spdtf .spdtf-mlqs { display: flex; flex-direction: column; gap: 4px; }
#spdtf .spdtf-mlq { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 6px 10px; border: 1px solid var(--spdtf-line); border-radius: 8px; background: #FFFFFF; color: var(--spdtf-text); font-size: 13px; text-align: left; letter-spacing: -0.2px; }
#spdtf .spdtf-mlq b { font-weight: 700; }
#spdtf .spdtf-mlq span { color: var(--spdtf-text-3); white-space: nowrap; }
#spdtf .spdtf-mlq .spdtf-mlq-u { color: var(--spdtf-text); font-weight: 600; }
#spdtf .spdtf-mlq:hover { border-color: var(--spdtf-line-2); }
#spdtf .spdtf-mlq[aria-pressed="true"] { border-color: var(--spdtf-brand); color: var(--spdtf-brand); background: #EEF0FF; }
#spdtf .spdtf-mlq[aria-pressed="true"] span { color: var(--spdtf-brand); }
/* 두 자리 중 폭에 맞는 하나만(템플릿 #spdtf-mlq-wide 주석) — PC 고정 카드는 노트북 높이에서 여유가 40px 남짓이라 사진 아래로 */
#spdtf .spdtf-mlq-wide { display: none; }
@media (min-width: 1025px) {
  #spdtf #spdtf-mlq-row { display: none; }
  #spdtf .spdtf-mlq-wide:not(.spdtf-hide) { display: block; max-width: 600px; margin-top: 20px; }
  #spdtf .spdtf-mlq-h { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--spdtf-text); }
  #spdtf .spdtf-mlq-wide .spdtf-mlq { grid-template-columns: 72px 1fr auto; min-height: 40px; padding: 8px 14px; font-size: 14px; }
}
/* 2026-10-17 기본 1,000개(원가 모델) — 버튼이 거의 모든 종류에서 5개가 됐다. PC 오른쪽 420 칸(1200 이상)은 5개 한 줄 = 버튼 59px 인데
   「개당 1,890원」 11px 이 58~65px 로 넘친다(23종 중 21종 실측, 전에도 바디로션 등 5개 종류는 넘쳤다). 그 줄에서만 「개당」을 숨긴다 — 1025~1199(4+1)·폰(3열)은 그대로 들어간다. */
@media (min-width: 1200px) {
  #spdtf .spdtf-pd-stick .spdtf-ctbl-hero .spdtf-qtys:has(> :nth-child(5)) .spdtf-qty-per { display: none; }
}
#spdtf .spdtf-sel { height: 40px; min-width: 180px; border-color: var(--spdtf-line); font-weight: 400; }

/* 수량별 가격 */
#spdtf .spdtf-qcap { margin: 32px 0 12px; font-size: 17px; font-weight: 700; letter-spacing: -0.4px; }
#spdtf .spdtf-qcap small { font-size: 13px; font-weight: 400; color: var(--spdtf-text-3); margin-left: 6px; letter-spacing: -0.2px; }
#spdtf .spdtf-qwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#spdtf .spdtf-qtbl { width: 100%; border-collapse: collapse; font-size: 14px; text-align: right; }
#spdtf .spdtf-qtbl th, #spdtf .spdtf-qtbl td { padding: 11px 14px; border-bottom: 1px solid var(--spdtf-line); }
#spdtf .spdtf-qtbl thead th { background: var(--spdtf-bg-soft); font-weight: 600; color: var(--spdtf-text); border-top: 1px solid var(--spdtf-text); }
#spdtf .spdtf-qtbl th:first-child, #spdtf .spdtf-qtbl td:first-child { text-align: left; color: var(--spdtf-text-3); font-weight: 500; }
#spdtf .spdtf-qtbl .hl { background: #EEF0FF; color: var(--spdtf-brand); font-weight: 700; }
#spdtf .spdtf-qtbl tbody td b { font-weight: 700; color: var(--spdtf-text); }
#spdtf .spdtf-qtbl tbody td.hl b { color: var(--spdtf-brand); }
#spdtf .spdtf-qlist { display: none; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--spdtf-text); }
#spdtf .spdtf-qlist li { display: grid; grid-template-columns: 72px 1fr; column-gap: 10px; padding: 12px 4px; border-bottom: 1px solid var(--spdtf-line); font-size: 13px; color: var(--spdtf-text-2); }
#spdtf .spdtf-qlist li b { grid-row: span 4; font-size: 15px; font-weight: 700; color: var(--spdtf-text); }
#spdtf .spdtf-qlist li em { font-style: normal; font-weight: 700; color: var(--spdtf-text); }
#spdtf .spdtf-qlist li.hl { background: #EEF0FF; }
#spdtf .spdtf-qlist li.hl b, #spdtf .spdtf-qlist li.hl em { color: var(--spdtf-brand); }

/* 견적서 패널 */
#spdtf .spdtf-rail { position: -webkit-sticky; position: sticky; top: 120px; }
#spdtf .spdtf-quote { border: 1px solid var(--spdtf-text); border-radius: 14px; overflow: hidden; background: #FFFFFF; box-shadow: none; }
#spdtf .spdtf-est-hd { display: flex; align-items: center; gap: 8px; padding: 14px 18px; background: var(--spdtf-text); color: #FFFFFF; font-size: 16px; font-weight: 700; letter-spacing: -0.4px; }
#spdtf .spdtf-est-hd span { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--spdtf-text-4); }
#spdtf .spdtf-est-bd { padding: 16px 18px 18px; }
#spdtf .spdtf-est-rows { margin: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr); row-gap: 6px; font-size: 13px; padding-bottom: 14px; border-bottom: 1px solid var(--spdtf-line); }
#spdtf .spdtf-est-rows dt { color: var(--spdtf-text-3); }
#spdtf .spdtf-est-rows dd { margin: 0; color: var(--spdtf-text); text-align: right; }
#spdtf .spdtf-est-rows #spdtf-q-unit-note { margin-left: 6px; font-size: 12px; color: var(--spdtf-text-3); }
#spdtf .spdtf-q-rows { padding: 10px 0 0; }
#spdtf .spdtf-qr { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 14px; border: 0; }
#spdtf .spdtf-qr .spdtf-k { color: var(--spdtf-text-2); }
#spdtf .spdtf-qr .spdtf-v { font-weight: 600; text-align: right; color: var(--spdtf-text); }
#spdtf .spdtf-qr.spdtf-sub .spdtf-k, #spdtf .spdtf-qr.spdtf-sub .spdtf-v { font-size: 12px; font-weight: 400; color: var(--spdtf-text-3); }
#spdtf .spdtf-qr.spdtf-sub .spdtf-k { padding-left: 10px; }
#spdtf .spdtf-qr.spdtf-tot { align-items: baseline; padding: 10px 0 0; margin-top: 4px; border-top: 1px solid var(--spdtf-line); }
#spdtf .spdtf-qr.spdtf-tot .spdtf-k { font-size: 15px; font-weight: 700; color: var(--spdtf-text); }
#spdtf .spdtf-qr.spdtf-tot .spdtf-v { font-size: 24px; font-weight: 800; letter-spacing: -0.6px; color: var(--spdtf-brand); }
#spdtf .spdtf-est-inst { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--spdtf-bg-soft); font-size: 13px; color: var(--spdtf-text); line-height: 1.55; }
#spdtf .spdtf-est-inst b { font-weight: 700; }
#spdtf .spdtf-est-inst small { display: block; font-size: 12px; color: var(--spdtf-text-3); }
#spdtf .spdtf-alerts { padding: 0; margin: 10px 0 14px; gap: 6px; }
#spdtf .spdtf-alert { padding: 0; background: transparent; font-size: 12px; line-height: 1.55; border-radius: 0; }
#spdtf .spdtf-a-info { color: var(--spdtf-text-2); }
#spdtf .spdtf-a-good { color: var(--spdtf-brand); font-weight: 600; }
#spdtf .spdtf-a-warn, #spdtf .spdtf-a-crit { padding: 8px 10px; border-radius: 8px; }
#spdtf .spdtf-a-warn { background: var(--spdtf-amber-faint); }
#spdtf .spdtf-a-crit { background: var(--spdtf-danger-soft); }
#spdtf .spdtf-q-cta { padding: 0; display: block; }
#spdtf .spdtf-q-cta .spdtf-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 46px; line-height: 1.2; font-size: 15px; font-weight: 600; }
#spdtf .spdtf-q-cta .spdtf-btn + .spdtf-btn { margin-top: 6px; }
#spdtf .spdtf-est-re { display: block; width: 100%; margin-top: 12px; text-align: center; font-size: 13px; color: var(--spdtf-text-2); text-decoration: underline; text-underline-offset: 3px; background: none; padding: 4px 0; }
#spdtf .spdtf-est-re:hover:not(:disabled) { color: var(--spdtf-text); }
#spdtf .spdtf-est-re:disabled { opacity: .45; cursor: not-allowed; }
#spdtf .spdtf-q-fine { font-size: 12px; color: var(--spdtf-text-3); margin-top: 10px; text-align: center; text-wrap: balance; }   /* 좁은 레일에서 「됩니다.」 한 단어만 둘째 줄(4R) */

/* 안내 칸 */
#spdtf .spdtf-info-sec { margin-bottom: 64px; }
#spdtf .spdtf-info-sec h3 { margin: 0 0 16px; font-size: 22px; font-weight: 700; letter-spacing: -0.6px; }
#spdtf .spdtf-ftbl { width: 100%; border-collapse: collapse; border-top: 1px solid var(--spdtf-text); font-size: 14px; }
#spdtf .spdtf-ftbl th, #spdtf .spdtf-ftbl td { padding: 14px 16px; border-bottom: 1px solid var(--spdtf-line); text-align: left; vertical-align: middle; line-height: 1.5; }
#spdtf .spdtf-ftbl th { width: 160px; background: var(--spdtf-bg-soft); font-weight: 600; color: var(--spdtf-text); }
#spdtf .spdtf-ftbl td { color: var(--spdtf-text); }
#spdtf .spdtf-flist { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; border-top: 1px solid var(--spdtf-text); padding-top: 20px; }
#spdtf .spdtf-fl-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; margin-bottom: 10px; background: #E4E4E4; }
#spdtf .spdtf-fl-card b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -0.3px; }
#spdtf .spdtf-fl-card span { display: block; font-size: 13px; color: var(--spdtf-text-2); margin: 2px 0 6px; }
#spdtf .spdtf-fl-card em { font-style: normal; font-size: 14px; font-weight: 700; color: var(--spdtf-text); }
#spdtf .spdtf-flist-cap { font-size: 12px; color: var(--spdtf-text-3); margin: 12px 0 20px; }
#spdtf .spdtf-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--spdtf-line); border: 1px solid var(--spdtf-line); border-radius: 14px; overflow: hidden; }
#spdtf .spdtf-steps li { list-style: none; padding: 22px 6px 18px; text-align: center; background: #FFFFFF; }
#spdtf .spdtf-st-no { display: block; font-size: 12px; font-weight: 700; color: var(--spdtf-brand); margin-bottom: 8px; }
#spdtf .spdtf-st-ic { width: 48px; height: 48px; border-radius: 50%; background: var(--spdtf-bg-soft); display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; color: var(--spdtf-text); }
#spdtf .spdtf-st-ic .spdtf-ico { width: 24px; height: 24px; }
#spdtf .spdtf-steps li.pro .spdtf-st-ic { background: #EEF0FF; color: var(--spdtf-brand); }
#spdtf .spdtf-steps b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.2px; }
#spdtf .spdtf-st-sub { display: block; font-size: 12px; color: var(--spdtf-text-3); margin-top: 2px; }
#spdtf .spdtf-steps-note { font-size: 13px; color: var(--spdtf-text-3); margin-top: 10px; }
#spdtf .spdtf-faq details { border-bottom: 1px solid var(--spdtf-line); }
#spdtf .spdtf-faq details:first-child { border-top: 1px solid var(--spdtf-text); }
#spdtf .spdtf-faq summary { list-style: none; display: flex; gap: 10px; padding: 18px 4px; font-size: 15px; font-weight: 600; cursor: pointer; }
#spdtf .spdtf-faq summary::-webkit-details-marker { display: none; }
#spdtf .spdtf-faq summary i { font-style: normal; color: var(--spdtf-brand); font-weight: 800; }
#spdtf .spdtf-faq details p { margin: 0; padding: 0 4px 18px 26px; color: var(--spdtf-text-2); font-size: 14px; line-height: 1.7; }
#spdtf .spdtf-info-sec, #spdtf .spdtf-cfg { scroll-margin-top: 0; }

@media (max-width: 1024px) {
  #spdtf .spdtf-pd-top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  #spdtf .spdtf-cfg { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  #spdtf .spdtf-rail { position: static; }
  #spdtf .spdtf-tabbar a { font-size: 14px; }
  #spdtf .spdtf-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  #spdtf .spdtf-pd-info h1 { font-size: 26px; }
  #spdtf .spdtf-pd-price { font-size: 26px; }
  #spdtf .spdtf-pd-cta { grid-template-columns: minmax(0, 1fr); }
  #spdtf .spdtf-ctbl, #spdtf .spdtf-ctbl tbody, #spdtf .spdtf-ctbl tr, #spdtf .spdtf-ctbl th.spdtf-fl, #spdtf .spdtf-ctbl td.spdtf-fc { display: block; width: 100%; }
  #spdtf .spdtf-ctbl th.spdtf-fl { padding: 12px 14px 10px; border-bottom: 0; }
  #spdtf .spdtf-ctbl td.spdtf-fc { padding: 10px 0 16px; }
  #spdtf .spdtf-fcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #spdtf .spdtf-qtys { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #spdtf .spdtf-qwrap .spdtf-qtbl { display: none; }
  #spdtf .spdtf-qlist { display: block; }
  #spdtf .spdtf-ml-note { display: block; margin: 8px 0 0; }
  #spdtf .spdtf-tabbar .l { display: none; }
  #spdtf .spdtf-tabbar .s { display: inline; }
  #spdtf .spdtf-tabbar a { padding: 14px 0 11px; }
  #spdtf .spdtf-ftbl th { width: 96px; padding: 12px 10px; }
  #spdtf .spdtf-ftbl td { padding: 12px 10px; }
  #spdtf .spdtf-flist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  #spdtf .spdtf-steps li { padding: 16px 4px 14px; }
  #spdtf .spdtf-st-ic { width: 40px; height: 40px; margin-bottom: 8px; }
}
/* 모바일 하단 바 — 시안 mbar: 윗줄 「20,000개 기준, 부가세 별도」 · 「개당 350원」 · [견적서] [상담 신청] (860 이하 — 위 「모바일 하단 바」와 같은 조건) */
@media (max-width: 860px), (max-width: 1024px) and (max-height: 700px) {
  #spdtf .spdtf-sticky:not(.spdtf-hide) { gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow: none; }
  #spdtf .spdtf-sb-k { font-size: 11px; color: var(--spdtf-text-3); }
  #spdtf .spdtf-sb-v { font-size: 18px; font-weight: 800; letter-spacing: -0.4px; color: var(--spdtf-brand); }
  #spdtf .spdtf-sticky .spdtf-btn { flex: none; width: auto; display: inline-flex; align-items: center; height: 44px; line-height: 1.2; padding: 0 14px; font-size: 14px; font-weight: 600; }   /* 두 버튼 굵기 600(시안 .btn) — 「상담 신청」만 700 이었다(4R) */
  /* 6차(2026-10-04) cat 모드 폰 바 = 이상한아카데미 폰 바 문법: [OEM 처방 상담](윤곽) [상담 신청](채움) 반반, 숫자 줄 없음. 높이는 44 그대로(바 65 → body padding 66 유지) */
  #spdtf .spdtf-sticky-2 .spdtf-btn { flex: 1 1 0; min-width: 0; width: auto; padding: 0 8px; justify-content: center; white-space: nowrap; }
  /* 6차 반증(중): 바가 「확정 전 예시」(is-ex)면 호박색 바탕(:279) + 버튼 위 한 줄 — 숫자 줄이 없어진 뒤에도 폰 첫 화면에 경고가 남는다 */
  #spdtf .spdtf-sticky-2 { flex-wrap: wrap; }
  #spdtf .spdtf-sticky-2 .spdtf-sb-ex { display: none; flex: 1 0 100%; font-size: 11px; font-weight: 700; color: var(--spdtf-amber-text); text-align: center; line-height: 1.3; margin: -2px 0 4px; }
  #spdtf .spdtf-sticky-2.is-ex .spdtf-sb-ex { display: block; }
  /* 고정바가 마지막 줄을 가린다 — 여백은 아래 :has 규칙이 body 에 준다(옛 detail2 wrap 패딩 76→0 상쇄 규칙은 3차에서 지웠다). */
  /* 전체 카테고리 패널(speedcos-theme chrome.js body.spdc-menu-open)이 열리면 하단 바를 숨긴다 — 시안 body.menu-open .mbar(반증 1R 하5). */
  body.spdc-menu-open #spdtf .spdtf-sticky { display: none; }
}

/* ── 2026-09-24 화면 검수(PC·폰) 다듬기 ─────────────────────────────
   사장님 「어설픈 곳 아직 많다, 검증 돌려서 없게」 → 검수 2명이 짚은 목록·상세 결함. */
/* 썸네일: 큰 사진에 뜬 처방 한 칸만 진하게 — 용기 칸까지 「선택됨」이라 두 칸이 동시에 진했다(시안은 한 칸). 선택된 용기는 아래 옵션 표에 보인다 */
#spdtf .spdtf-pd-th.is-form[aria-pressed="true"] { border-color: var(--spdtf-line); }
#spdtf .spdtf-pd-th.is-form[aria-pressed="true"]:hover { border-color: var(--spdtf-text-4); }
#spdtf .spdtf-segimg { background: var(--spdtf-line); border-radius: 6px; }   /* 한 단계 더 진하게 — bg-soft 로는 흰 용기가 여전히 흐렸다(2R) */
/* 결제 수단 한 수단은 한 줄로 */
#spdtf .spdtf-nw { white-space: nowrap; }
/* 「직접 입력 10~100ml」 안내 — 선택칸이 블록이라 다음 줄로 떨어지면서 왼쪽 8px 만 남아 들여써졌다 → 모든 폭에서 아래 줄, 들여쓰기 없음 */
#spdtf .spdtf-ml-note { display: block; margin: 8px 0 0; }
/* 작은 글자 12px 이상 */
.spdtf-seg small, #spdtf .spdtf-seg small { font-size: 12px; }
/* 목록 카드: 같은 줄 카드끼리 층마다 높이를 맞춘다(subgrid) — 층이 어긋나면 가격 높이가 6~24px 달라졌다(화면 검수 1·2R).
   층: 사진 · 이름 · 가격(2026-09-27 사장님 「카드 내용이 너무 많다」 → 설명·스펙·안내·「N개 주문 시」 층을 뺐다). 이름이 두 줄이어도 가격은 한 높이. */
#spdtf .spdtf-idx-cards { row-gap: 0; }
#spdtf .spdtf-idx-card { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; align-content: start; margin-bottom: 48px; }   /* 층 다섯(2026-10-03 묶음 칩·부제 추가) — span 과 아래 grid-row 를 같이 바꾼다. 행 간격 48(2차 여백) */
#spdtf .spdtf-idx-card > .spdtf-idx-thumb { grid-row: 1; }
#spdtf .spdtf-idx-card > .spdtf-idx-tag { grid-row: 2; }
#spdtf .spdtf-idx-card > .spdtf-idx-nm { grid-row: 3; }
#spdtf .spdtf-idx-card > .spdtf-idx-sub { grid-row: 4; }
#spdtf .spdtf-idx-card > .spdtf-idx-from { grid-row: 5; align-self: start; }
#spdtf .spdtf-idx-g:last-child .spdtf-idx-cards { margin-bottom: 0; }   /* 목록 맨 아래 빈칸이 다른 화면의 두 배였다 */
/* 옵션 표 묶음 경계의 회색 2px 선 — hello reset 의 tbody+tbody 테두리가 새어 들어왔다(팔레트 밖) */
#spdtf .spdtf-ctbl tbody + tbody { border-block-start: 0; border-top: 0; }
#spdtf .spdtf-pd-spec td { text-wrap: pretty; }
/* 목록 4열 — 3열이면 묶음(7·4·7)마다 마지막 줄에 1장만 남았다(2R). 메인과 같게 */
@media (min-width: 861px) and (max-width: 1024px) {
  #spdtf .spdtf-idx-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1024px) { #spdtf .spdtf-idx-card { margin-bottom: 40px; } }   /* 2차 여백: 태블릿 카드 행 40 */
/* 태블릿 넓은 쪽(861~1024) 상세 첫 화면: 1단이면 흐린 사진(원본 600px 를 984px 로) 한 장만 보이고 제목·가격이 밀렸다 → 2단 유지.
   🚨 화면 높이 700 이하(가로로 든 큰 폰 932×430, 툴바가 보이는 태블릿 가로 등)는 빼고 폰처럼 1단 + 하단 바 — 따라다니는 견적서 칸(613px, top 118)이
   화면보다 길어 버튼이 스크롤 내내 거의 안 보였다(5R 600 이하 → 6R: 601~679 에 「상담 신청」이 19곳 중 2곳). 위 하단 바 블록들이 같은 조건(… and (max-height: 700px))을 받는다 */
@media (min-width: 861px) and (max-width: 1024px) {
  #spdtf .spdtf-pd-top { grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; }   /* 첫 화면(사진|정보)은 높이와 무관하게 2단 — 1단이면 1024×700 에서 사진 옆 384px 가 비었다(7R) */
}
@media (min-width: 861px) and (max-width: 1024px) and (min-height: 701px) {
  /* 견적 조건 표 + 견적서 패널도 2단 — 1단이면 견적서 칸이 960px 로 늘어 품목과 값이 양 끝에 떨어졌다(2R) */
  #spdtf .spdtf-cfg { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; }
  #spdtf .spdtf-rail { position: sticky; }
  /* 2단의 왼쪽 칸은 497~660px 뿐이다. 이름 칸(128px)을 빼면 처방 카드가 78px(한 장에 7~8줄)·수량 칩 글자가 테두리에 닿았고,
     수량별 가격 표(내용 568px)는 잘려 고른 수량 칸이 안 보였다(화면 검수 4R, 861~939). 조건 표는 폰처럼 이름을 위에 두고, 수량별 표는 칸 여백을 줄인다 */
  #spdtf .spdtf-ctbl, #spdtf .spdtf-ctbl tbody, #spdtf .spdtf-ctbl tr, #spdtf .spdtf-ctbl th.spdtf-fl, #spdtf .spdtf-ctbl td.spdtf-fc { display: block; width: 100%; }
  #spdtf .spdtf-ctbl th.spdtf-fl { padding: 12px 14px 10px; border-bottom: 0; }
  #spdtf .spdtf-ctbl td.spdtf-fc { padding: 10px 0 16px; }
  #spdtf .spdtf-qtbl { font-size: 13px; }
  #spdtf .spdtf-qtbl th, #spdtf .spdtf-qtbl td { padding: 11px 8px; }
}
/* 태블릿도 손가락으로 누른다 — 폰(767 이하)에만 있던 누르는 칸 40px 를 1024 까지(4R: 860 에서 정렬 20·경로 15·재주문 28px). 음수 마진이라 자리는 그대로 */
@media (max-width: 1024px) {
  #spdtf .spdtf-lsort button { padding: 10px 7px; margin: -10px -7px; line-height: 20px; }   /* 가로도 — 「기본순」 33px 폭(5R) · 줄 높이 20 이라야 40(6R: 39.5) */
  #spdtf .spdtf-lcrumb a:not(.spdtf-hide) { display: inline-block; box-sizing: border-box; min-width: 40px; text-align: center; padding: 10px 12px; margin: -10px -12px; line-height: 20px; }   /* 「홈」 11px 폭(5R) → 35(7R) → 40. :not(.spdtf-hide) — (1,1,1) 이 #spdtf .spdtf-hide(1,1,0) 를 이겨 JS 가 숨긴 묶음 링크(#spdtf-crumb-grp)가 ≤1024 에서 되살아나 「클렌징 클렌징」(10-14) */
  #spdtf .spdtf-est-re { padding: 12px 0; margin-top: 4px; }
  #spdtf .spdtf-chip { height: 40px; }   /* 목록 칩 36 → 40(5R: 태블릿에만 36 이 남았다) */
}
/* 화면이 낮으면(가로로 든 폰 390~430px) 상세에서 사이트 메뉴 줄을 붙이지 않는다 — 메뉴 줄 50 + 탭 줄 52 + 하단 바 66 = 168px 이
   화면의 43% 를 먹었다(5R). 폰 세로(767 이하) 규칙과 같다. 탭 줄 위치는 bindTabs pad 가 메뉴 줄 sticky 여부로 다시 잰다 */
@media (max-height: 500px), (max-width: 1024px) and (max-height: 700px) {   /* 6R: 1024×600 도 메뉴 50+탭 52+바 66 = 28% */
  body:has(#spdtf[data-view="detail"]) .spdc-nav { position: relative; top: auto; }
}
/* 짧은 글·쉼표 목록 끝에 한두 단어만 떨어졌다(5R: 「중 선택」「보내주세요.」, 처방 카드 「마무리」). pretty 로는 안 잡혀 줄 길이를 고르게 */
#spdtf .spdtf-pd-spec td, #spdtf .spdtf-alert, #spdtf .spdtf-fcard strong, #spdtf .spdtf-fcard > span:not(.spdtf-fthumb),
#spdtf .spdtf-fl-card span { text-wrap: balance; }
/* 모달 「확인」 글자가 9px 아래로 처졌다(6R) — 높이 48 규칙(.spdtf-mx)이 #spdtf 기본 54 에 특이도로 졌고, 테마 button 위아래 여백 8px 이 더해졌다 */
#spdtf .spdtf-btn { padding-top: 0; padding-bottom: 0; }
/* 용량 「직접 입력」: 안쪽 input 에 테마 reset(뒤에 실린다)의 테두리·초점 링이 살아 상자 안의 상자로 보였고, 위 선택칸과 0px 로 붙었다(7R) */
#spdtf .spdtf-inp input, #spdtf .spdtf-inp input:focus { border: 0; outline: none; box-shadow: none; background: transparent; padding: 0; border-radius: 0; }
#spdtf .spdtf-ml-inp { margin-top: 8px; }
#spdtf .spdtf-sel:hover { border-color: var(--spdtf-line-2); }   /* 옆 칩들처럼 hover 반응(7R) */
#spdtf .spdtf-mx .spdtf-btn { height: 48px; line-height: 48px; }
/* 목록 카드 키보드 초점 — Tab 으로 가도 표시가 없었다(6R). hover 와 같은 이름 밑줄 + 초점 링 */
#spdtf a.spdtf-idx-card:focus-visible { outline: 2px solid var(--spdtf-brand); outline-offset: 4px; border-radius: 12px; }
#spdtf a.spdtf-idx-card:focus-visible .spdtf-idx-nm { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px), (max-width: 1024px) and (max-height: 700px) {
  #spdtf .spdtf-pd-main, #spdtf .spdtf-pd-thumbs { max-width: 600px; }   /* 원본(600px)보다 크게 늘리지 않는다 */
}
/* 태블릿 세로(768~860, 가로로 든 폰 포함) 상세 첫 화면: 1단이면 사진만 첫 화면을 채우고 제목·가격이 아래로 밀렸고(768×1024 에서 제목 y960 —
   하단 바 뒤), 사진 600 왼쪽 · 아래 표 전폭이라 오른쪽 끝선도 안 맞았다(7R 남긴 것) → 861~1024 처럼 사진 | 정보 2단 */
/* 🚨 600 부터(768 아님) — 1단이면 사진이 첫 화면을 다 먹어 iPad mini 세로(744×1133)·699×1000 에서 제목이 하단 바 뒤로 숨었다(09-25 반증).
   정보 칸은 폭의 48%(260~340) — 600 에서 사진 272 | 정보 272 */
@media (min-width: 600px) and (max-width: 860px) {
  #spdtf .spdtf-pd-top { grid-template-columns: minmax(0, 1fr) clamp(260px, 48%, 340px); gap: 24px; }
  #spdtf .spdtf-pd-info h1 { font-size: 28px; }
}
/* 1단일 때 견적서 칸: 560px 로 막아 왼쪽에 붙이니 오른쪽이 비었고(1024×700 에서 424px, 639 에서 위 표보다 47px 짧음) — 칸은 전폭.
   700 이상은 품목과 값이 양 끝에 떨어지지 않게(2R) 안을 두 묶음으로(왼쪽 품목·금액 | 오른쪽 안내·버튼, templates/configurator.php .spdtf-est-l/-r).
   700 미만은 한 줄로 — 640 에서 두 칸이면 「합계(부가세 포함)」가 두 줄로 꺾였다(09-25 반증) */
@media (min-width: 700px) and (max-width: 860px), (min-width: 861px) and (max-width: 1024px) and (max-height: 700px) {
  #spdtf .spdtf-est-bd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  /* 오른쪽 묶음은 버튼을 먼저 — 안내(여유분 N개…)가 폭 729~744 에서 수량에 따라 2↔3줄로 바뀌어 아래 버튼이 18px 오르내렸다(09-25 반증 2R).
     버튼이 위에 있으면 안내 길이와 무관하게 제자리다 */
  #spdtf .spdtf-est-r { display: flex; flex-direction: column; }
  #spdtf .spdtf-est-r .spdtf-q-cta { order: -1; }
  #spdtf .spdtf-est-r .spdtf-alerts { margin: 16px 0 0; }
}
/* 한 칸으로 쌓일 때(699 이하): 맨 아래 안내(여유분 N개를 보내주세요)가 수량에 따라 두 줄↔세 줄로 바뀌어 버튼이 19px 오르내렸다(390, 09-25 반증) — 세 줄 자리를 늘 둔다 */
@media (max-width: 699px) {
  #spdtf .spdtf-alerts .spdtf-a-info:last-child { min-height: calc(12px * 1.55 * 3); }
}
/* 아주 좁은 폰(360 이하): 합계가 커지면 「합계(부가세 포함)」 줄이 꺾여 버튼이 19px 움직였다(320~340, 09-25 반증 2R) — 금액은 늘 다음 줄 오른쪽 */
@media (max-width: 360px) {
  #spdtf .spdtf-qr.spdtf-tot { flex-wrap: wrap; }
  #spdtf .spdtf-qr.spdtf-tot .spdtf-k { flex: 1 0 100%; }
  #spdtf .spdtf-qr.spdtf-tot .spdtf-v { margin-left: auto; }
}
/* 861~1024 2단 옆 칸(300px): 합계가 8자리면 「합계(부가세 포함)」 줄이 꺾여 버튼이 19px 내려갔다(09-25 반증) — 금액 글자를 조금 줄여 한 줄 */
@media (min-width: 861px) and (max-width: 1024px) and (min-height: 701px) {
  #spdtf .spdtf-qr.spdtf-tot .spdtf-v { font-size: 21px; letter-spacing: -0.5px; }
}
@media (max-width: 860px), (max-width: 1024px) and (max-height: 700px) {
  /* 하단 고정 바가 페이지 끝 푸터를 덮었다 — 여백을 본문 안(탭 아래)이 아니라 문서 끝에 둔다(바와 같은 조건) */
  body:has(#spdtf[data-view="detail"] .spdtf-sticky:not(.spdtf-hide)) { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  #spdtf .spdtf-sb-k { font-size: 12px; }
}
@media (max-width: 767px) {
  /* 상세에서는 사이트 메뉴 줄을 붙이지 않는다 — 메뉴 줄 46 + 탭 줄 48 + 하단 바 65 가 늘 떠서 화면의 19% 를 먹었다.
     탭 줄이 맨 위에 붙는다(bindTabs pad 가 메뉴 줄이 sticky 가 아니면 0 부터 잰다). speedcos-theme chrome.css 의 .spdc-nav 를 이 화면에서만 덮는다 */
  body:has(#spdtf[data-view="detail"]) .spdc-nav { position: relative; top: auto; }
  /* 엄지로 누르는 곳 40px 이상 */
  #spdtf .spdtf-chip { height: 40px; }
  /* 목록 칩은 한 줄 — 「헤어와 바디」만 둘째 줄로 떨어졌다. 칩 안 여백·간격을 줄여 390 폭에 4개가 다 들어간다(2R: 12px 만 밀리고 흐림에 숫자가 걸렸다).
     더 좁은 폭에서는 가로로 민다 */
  #spdtf .spdtf-lchips { flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; }
  #spdtf .spdtf-lchips::-webkit-scrollbar { display: none; }
  #spdtf .spdtf-chip { flex: none; padding: 0 10px; }   /* 10-14 선케어 묶음이 켜져 칩 6개 — 11px 이면 390 에서 오른쪽 끝이 5px 넘쳤다(list.py 실측 379 > 374) */
  #spdtf .spdtf-idx-card { margin-bottom: 32px; }   /* 2차 여백: 폰 카드 행 32 */
  /* 사진이 있는 선택 묶음(용기 형태)은 2열 같은 폭 — 튜브형 166 · 단지형 121 로 폭이 달랐다(2R) */
  #spdtf .spdtf-segs:has(.spdtf-segimg) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 2026-10-03 「ODM 기준 단가만 노출 → 상담 신청」 ─────────────────────────────
   상담 폼 관심 항목 체크 2열 · 완료 창 견적서 링크. (오전의 g당 줄·레일 개당 칸 규칙은 오후 2차에서 뺐다 — 아래 「한 덩어리 머리」 블록) */
#spdtf .spdtf-qr.spdtf-sum { padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--spdtf-line); }
#spdtf .spdtf-qr.spdtf-sum .spdtf-k { font-weight: 600; color: var(--spdtf-text); }
#spdtf .spdtf-qr.spdtf-sum .spdtf-v { font-size: 16px; font-weight: 700; }
#spdtf .spdtf-fld-lb { font-size: 12.5px; font-weight: 600; color: var(--spdtf-text-2); }
#spdtf .spdtf-chks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
#spdtf .spdtf-chks .spdtf-chk { align-items: center; }
#spdtf .spdtf-est-link { color: var(--spdtf-brand); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 360px) {
  #spdtf .spdtf-chks { grid-template-columns: minmax(0, 1fr); }
}

/* ── 2026-10-03 오후 2차(사장님 소감 3건) — 한 덩어리 머리 · OEM/ODM 칸 · 개당 가격만 ────────────────
   ① 머리 요약표와 아래 「단가」 섹션이 중복 → 선택 표(종류·처방·용기·용량·수량)를 사진 옆 정보 칸 안으로, 가격 칸(개당·발주 금액·상담 신청)도 같은 칸.
      아래 단가 섹션·오른쪽 레일·「단가」 탭은 cat 모드에서 안 그린다(templates/configurator.php `$spdtf_cat_on`). 수량별 표는 머리 바로 아래.
   ② 「OEM과 ODM」 2카드 섹션(#spdtf-oem).  ③ g당·충전과 포장 숫자 없음 — 가격 칸은 개당 + 발주 금액(부가세 별도)뿐.
   🚨 정보 칸(480px, 861~1024 는 400px) 안에 선택 표가 들어가므로 처방 카드는 2열 가로형, 수량 버튼은 auto-fit — 폭대마다 1px 훑기로 잰다. */
#spdtf .spdtf-pd-info .spdtf-ctbl-hero { margin: 14px 0 0; border-top: 1px solid var(--spdtf-line); }
#spdtf .spdtf-ctbl-hero tr.spdtf-frow { border-bottom: 1px solid var(--spdtf-line); }
#spdtf .spdtf-ctbl-hero th.spdtf-fl { width: 60px; padding: 11px 0; background: transparent; font-size: 13px; font-weight: 500; color: var(--spdtf-text-3); border-bottom: 0; vertical-align: middle; }
#spdtf .spdtf-ctbl-hero th.spdtf-fl small { display: none; }
#spdtf .spdtf-ctbl-hero td.spdtf-fc { padding: 8px 0 8px 6px; border-bottom: 0; vertical-align: middle; }
#spdtf .spdtf-ctbl-hero .spdtf-fcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }   /* 정보 칸 480(PC)·400(861~1024) → 2×2 */
#spdtf .spdtf-ctbl-hero .spdtf-fcard, #spdtf .spdtf-ctbl-hero .spdtf-fcard.has-img { flex-direction: row; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; min-height: 44px; }
#spdtf .spdtf-ctbl-hero .spdtf-fthumb { width: 36px; height: 36px; flex: none; margin: 0; aspect-ratio: auto; border-radius: 6px; }
#spdtf .spdtf-ctbl-hero .spdtf-fcard strong { font-size: 13px; padding: 0; line-height: 1.3; }
#spdtf .spdtf-ctbl-hero .spdtf-fcard > span:not(.spdtf-fthumb) { display: none; }   /* 설명은 아래 상품 정보 카드에 있다 — 좁은 칸에서는 이름만 */
#spdtf .spdtf-ctbl-hero .spdtf-qtys { grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 5px; }   /* 정보 칸 480(라벨 60) → 5개 한 줄 · 400 → 4+1 */
#spdtf .spdtf-ctbl-hero .spdtf-qty { min-height: 50px; padding: 5px 2px; }
#spdtf .spdtf-ctbl-hero .spdtf-qty .spdtf-n { font-size: 14px; }
#spdtf .spdtf-ctbl-hero .spdtf-qty small { font-size: 11.5px; }
#spdtf .spdtf-ctbl-hero .spdtf-seg { min-height: 36px; padding: 4px 10px; font-size: 13px; }
#spdtf .spdtf-ctbl-hero .spdtf-seg.has-img { padding: 4px 10px 4px 6px; }
#spdtf .spdtf-ctbl-hero .spdtf-segimg { width: 28px; height: 28px; }
#spdtf .spdtf-ctbl-hero .spdtf-sel { height: 36px; min-width: 140px; }
#spdtf .spdtf-ctbl-hero .spdtf-fnote { font-size: 12px; margin-top: 4px; }
#spdtf .spdtf-ctbl-hero .spdtf-ml-note { margin: 6px 0 0; }
/* 가격 칸 */
#spdtf .spdtf-pd-price-box { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--spdtf-text); }
#spdtf .spdtf-pd-unit { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
#spdtf .spdtf-pd-ul { font-size: 15px; font-weight: 600; color: var(--spdtf-text); }
#spdtf .spdtf-pd-unit #spdtf-q-unit { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; color: var(--spdtf-brand); line-height: 1.2; }   /* 8차(2026-10-05, 사장님 「개당 N원 글자가 너무 크다」): 30 → 24 */
#spdtf .spdtf-pd-unit #spdtf-q-unit-note { font-size: 12px; color: var(--spdtf-text-3); }
#spdtf .spdtf-pd-price-box .spdtf-q-rows { padding: 2px 0 0; }
#spdtf .spdtf-pd-price-box .spdtf-qr.spdtf-sum { border-top: 0; margin: 0; padding: 2px 0; }
#spdtf .spdtf-pd-price-box .spdtf-qr.spdtf-sum .spdtf-k { font-weight: 500; color: var(--spdtf-text-2); }
#spdtf .spdtf-pd-price-box .spdtf-qr.spdtf-sum .spdtf-v { font-size: 15px; }
#spdtf .spdtf-pd-price-box .spdtf-alerts { margin: 8px 0 12px; }
#spdtf .spdtf-pd-price-box .spdtf-q-cta { padding: 0; }
#spdtf .spdtf-pd-price-box .spdtf-q-cta .spdtf-btn { height: 50px; font-size: 16px; }
#spdtf .spdtf-pd-price-box .spdtf-q-cta #spdtf-cta-oem { height: 46px; font-size: 15px; margin-top: 8px; }   /* 4차: 안내문 5문장 대신 [OEM 처방 상담] — 윤곽선 버튼(.spdtf-btn-3) */
#spdtf .spdtf-pd-price-box .spdtf-alerts:empty { margin: 12px 0 0; }   /* 4차: 수량·여유분 알림을 뺐다 — 경고가 없으면 가격 줄과 버튼 사이 간격만 */
#spdtf .spdtf-pd-price-box .spdtf-q-fine:empty, #spdtf .spdtf-pd-price-box .spdtf-q-rows:empty { display: none; }   /* 7차: 발주 금액 줄이 버튼 아래로 — 빈 칸이 여백을 남기지 않게 */
#spdtf .spdtf-pd-price-box .spdtf-q-fine { margin-top: 10px; }
#spdtf .spdtf-q-note { font-size: 12px; color: var(--spdtf-text-3); text-align: center; margin: 4px 0 0; line-height: 1.5; text-wrap: balance; }   /* 2026-10-15 단가 변동 고지 — 발주 금액 줄 바로 아래 고정 글자 */
#spdtf .spdtf-flist-cap:empty { display: none; }
/* OEM과 ODM 2카드 */
#spdtf .spdtf-oem-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; border-top: 1px solid var(--spdtf-text); padding-top: 20px; }
#spdtf .spdtf-oem-card { border: 1px solid var(--spdtf-line); border-radius: 14px; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 8px; background: #FFFFFF; }
#spdtf .spdtf-oem-tag { align-self: flex-start; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--spdtf-brand-soft); color: var(--spdtf-brand); }
/* 8차(2026-10-05, 사장님 「회색칠해 놓으니 서비스가 별로인 건가 같은 느낌」): OEM 태그도 ODM 과 같은 파랑, 본문 글자도 회색(text-2) 대신 본문색 */
#spdtf .spdtf-oem-card b { font-size: 17px; font-weight: 700; letter-spacing: -0.4px; }
#spdtf .spdtf-oem-card p { font-size: 14px; color: var(--spdtf-text); line-height: 1.6; flex: 1; text-wrap: pretty; }
#spdtf .spdtf-oem-card .spdtf-btn { height: 44px; line-height: 1.2; font-size: 14px; margin-top: 6px; display: flex; align-items: center; justify-content: center; }
#spdtf .spdtf-oem-link { font-size: 13px; color: var(--spdtf-text-2); text-decoration: underline; text-underline-offset: 3px; margin-top: 2px; }
/* 수량별 표(cat 모드) — 머리 바로 아래, 탭 줄 위. 여백은 3차부터 격자 row-gap(아래 「좌/우 2단 고정」 블록) */
#spdtf .spdtf-qtbl-hero { margin: 0; }
#spdtf .spdtf-qtbl-hero .spdtf-qcap { margin-top: 0; }
/* 600~860 은 정보 칸이 260~340px(태블릿 세로 2단) — 라벨을 위로 올려 세로 쌓기, 처방 카드 2열·수량 3열 */
@media (max-width: 860px) {
  #spdtf .spdtf-ctbl-hero, #spdtf .spdtf-ctbl-hero tbody, #spdtf .spdtf-ctbl-hero tr, #spdtf .spdtf-ctbl-hero th.spdtf-fl, #spdtf .spdtf-ctbl-hero td.spdtf-fc { display: block; width: 100%; }
  #spdtf .spdtf-ctbl-hero th.spdtf-fl { width: auto; padding: 10px 0 4px; }
  #spdtf .spdtf-ctbl-hero td.spdtf-fc { padding: 0 0 12px; }
  #spdtf .spdtf-ctbl-hero .spdtf-qtys { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 599 이하(1단)는 정보 칸이 전폭 — 처방 카드는 폭에 맞춰(390 → 2열, 320 → 2열) */
@media (max-width: 599px) {
  #spdtf .spdtf-ctbl-hero .spdtf-fcards { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); }
}
@media (max-width: 767px) {
  #spdtf .spdtf-oem-cards { grid-template-columns: minmax(0, 1fr); }
  #spdtf .spdtf-pd-unit #spdtf-q-unit { font-size: 22px; }   /* 8차: 26 → 22 */
}

/* ── 2026-10-03 3차 — 좌/우 2단 고정(사장님 「우측 옵션 선택 + 상담 신청이 따라다니게」, 메디리턴·이상한아카데미 참고) ──────────
   DOM: .spdtf-pd-top 격자 직속 자식 4개 = .spdtf-pd-gal(1열 1행) · .spdtf-pd-info(2열 1~3행 = 제목 + 카드 .spdtf-pd-stick) · #spdtf-qtbl-box(1열 2행) · #spdtf-detail2(1열 3행, 탭 줄 + 섹션).
   레시피 = 메디리턴 skin50 style-detail.css 「pdp-sticky v13」: 오른쪽 칸을 격자 전체 높이로 늘려(grid-row:1/-1 + stretch) 이동 거리를 확보하고, 카드는
   position:sticky + max-height(화면 − top − 바닥 여백) + 본문(.spdtf-pd-stick-bd)만 안쪽 스크롤 + 가격 칸(flex:0 0 auto)은 카드 바닥. JS 는 --spdtf-stick(메뉴 줄 아래 끝) 한 변수만.
   🚨 명시 행(grid-template-rows) 없이 grid-row:1/-1 을 쓰면 1행만 차지한다 · 🚨 .spdtf-pd-stick-bd 의 min-height:0 이 없으면 안쪽 스크롤이 0 · 🚨 격자 직속 자식 사이에 요소를 끼우면 암시적 4행.
   PC(1025 이상)만 2단 고정. 861~1024 는 머리만 2단(지금 규칙)·카드는 테두리 없는 보통 div, 860 이하 1열 + 하단 바(지금과 같음). 사장님 결정 3건(10-03): v13·1025 이상·카드. */
#spdtf .spdtf-pd-top > #spdtf-qtbl-box,
#spdtf .spdtf-pd-top > .spdtf-detail2 { grid-column: 1 / -1; min-width: 0; }   /* 600~1024 의 2열 머리에서도 전폭 */
#spdtf .spdtf-pd-top > .spdtf-detail2 > .spdtf-tabbar { display: flex; }        /* cat 모드는 탭 줄 안쪽 .spdtf-wrap 이 없다(:568 은 옛 모드용) */
#spdtf .spdtf-pd-grid { padding-bottom: 0; }   /* 머리 바닥 패딩 56 은 옛 구조용(표·탭이 격자 밖). .spdtf-pd-grid = cat 모드 격자(템플릿) — 옛 모드 격자엔 이 블록이 한 줄도 안 걸린다 */
#spdtf .spdtf-pd-top > .spdtf-qtbl-hero { margin: 8px 0 12px; }   /* 861~1024(격자 gap 32): 표 위 40·아래 44 = 2차와 같은 자리. 🚨 row-gap 을 모든 폭에 주면 폰에서 사진↔제목이 13px 벌어진다(시안 대조 390 이 잡음) */
@media (max-width: 860px) { #spdtf .spdtf-pd-top > .spdtf-qtbl-hero { margin: 16px 0 20px; } }   /* gap 24 → 40·44 */
@media (max-width: 767px) { #spdtf .spdtf-pd-top > .spdtf-qtbl-hero { margin: 24px 0 12px; } }   /* gap 24 → 48·36(2차의 폰 리듬) */
@media (max-width: 599px) { #spdtf .spdtf-pd-top > .spdtf-qtbl-hero { margin: 20px 0 8px; } }    /* gap 28 → 48·36 */
#spdtf .spdtf-pd-grid > .spdtf-detail2 > .spdtf-info-sec:last-child { margin-bottom: 24px; }   /* 마지막 섹션의 바닥 64 가 격자 칸에 갇혀 푸터까지 104 가 됐다(반증 1R) → 24 로 되돌려 2차와 같은 64 */
@media (max-width: 1024px) {   /* 탭 줄이 바깥 .spdtf-wrap(패딩 20/16) 안으로 들어왔다 — 전폭 흰 띠는 유지 */
  #spdtf .spdtf-pd-top > .spdtf-detail2 > .spdtf-tabbar { margin-left: -20px; margin-right: -20px; padding: 0 20px; }
}
@media (max-width: 767px) {
  #spdtf .spdtf-pd-top > .spdtf-detail2 > .spdtf-tabbar { margin-left: -16px; margin-right: -16px; padding: 0 16px; }
}
@media (min-width: 1025px) {
  #spdtf .spdtf-pd-grid { grid-template-rows: auto auto auto; align-items: start; row-gap: 40px; }
  #spdtf .spdtf-pd-top > .spdtf-qtbl-hero { margin: 0; }
  #spdtf .spdtf-pd-grid > .spdtf-pd-gal   { grid-column: 1; grid-row: 1; }
  #spdtf .spdtf-pd-grid > .spdtf-pd-info  { grid-column: 2; grid-row: 1 / -1; align-self: stretch; }   /* 이동 거리 = 격자 전체 높이 */
  #spdtf .spdtf-pd-top > #spdtf-qtbl-box { grid-column: 1; grid-row: 2; }
  #spdtf .spdtf-pd-top > .spdtf-detail2  { grid-column: 1; grid-row: 3; }
  #spdtf .spdtf-pd-stick {
    position: -webkit-sticky; position: sticky;
    top: calc(var(--spdtf-stick, var(--spdc-stick, 53px)) + 16px);
    max-height: calc(100vh - var(--spdtf-stick, var(--spdc-stick, 53px)) - 16px - var(--spdtf-stick-bottom));
    display: flex; flex-direction: column;
    border: 1px solid var(--spdtf-line); border-radius: var(--spdtf-r-box); padding: 16px; background: #FFFFFF; box-shadow: var(--spdtf-card-shadow);   /* 6차: 이상한아카데미 옵션 카드(그림자). 7차: 칸이 420 으로 줄어 안쪽 16(24/20 이면 수량 칩 5개가 두 줄). 촘촘 모드(높이 ≤860)는 12/16/14 */
  }
  /* 6차(2026-10-04, 사장님 「발주 옵션과 상품 소개가 박스 1개씩」): 제목 박스 — 같은 카드 꼴(안쪽 20, 아래 16). 안쪽 리듬은 top-margin 으로 — JS 가 칩·부제·종류 줄을 숨겨도
     마지막 보이는 줄 아래가 늘 padding 20 으로 끝난다(:last-child 방식은 숨긴 형제 때문에 어긋난다). 흘러가는 박스라 sticky 식(top·max-height)엔 영향 없다. */
  #spdtf .spdtf-pd-head { border: 1px solid var(--spdtf-line); border-radius: var(--spdtf-r-box); padding: 20px; background: #FFFFFF; box-shadow: var(--spdtf-card-shadow); margin: 0 0 16px; }
  #spdtf .spdtf-pd-head h1 { margin: 0; }
  #spdtf .spdtf-pd-head .spdtf-lchip:not(.spdtf-hide) + h1 { margin-top: 4px; }   /* 칩이 숨는 카테고리(묶음 이름 == 카드 이름, 클렌징)에서 위 여백이 24 가 되던 것(반증 낮-1) */
  #spdtf .spdtf-pd-head .spdtf-pd-lead { margin: 8px 0 0; }
  #spdtf .spdtf-pd-head .spdtf-pd-kinds { margin: 6px 0 0; }
  @supports (height: 100dvh) {
    #spdtf .spdtf-pd-stick { max-height: calc(100dvh - var(--spdtf-stick, var(--spdc-stick, 53px)) - 16px - var(--spdtf-stick-bottom)); }
  }
  #spdtf .spdtf-pd-stick-bd { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 3px; margin: 0 -3px; scrollbar-width: thin; }   /* 안쪽 스크롤(낮은 화면) · 초점 링이 x 잘림에 안 깎이게 3px */
  #spdtf .spdtf-pd-stick > .spdtf-pd-price-box { flex: 0 0 auto; }   /* 가격·[상담 신청]은 카드 바닥 */
  #spdtf .spdtf-pd-stick .spdtf-ctbl-hero { margin-top: 0; border-top: 0; }
  /* 7차(2026-10-04, 사장님 「우측 폭이 넓다」): 칸 480 → 420(아래 @media 1200). 수량 칩 5개 한 줄을 지키려고 칩 최소 60·간격 4·글자 13/11(실측 「20,000개」 14px = 60.5 → 13px ≈ 56, 「개당 1,440원」 11px ≈ 57).
     산식 420 − 2(테두리) − 32(안쪽 16×2) − 66(라벨 60 + td 6) = 320 ≥ 5×60 + 4×4 = 316. 안쪽 스크롤바(윈도우 15px, 아주 낮은 화면)가 생기면 305 < 316 → 4+1(촘촘 구간만). 1025~1199(400 칸)는 원래 4+1. */
  #spdtf .spdtf-pd-stick .spdtf-ctbl-hero .spdtf-qtys { grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 4px; }
  #spdtf .spdtf-pd-stick .spdtf-ctbl-hero .spdtf-qty .spdtf-n { font-size: 13px; }
  #spdtf .spdtf-pd-stick .spdtf-ctbl-hero .spdtf-qty small { font-size: 11px; }
}
@media (min-width: 1025px) {
  #spdtf .spdtf-pd-stick .spdtf-ctbl-hero tbody:last-child tr:last-child { border-bottom: 0; }   /* 수량 줄 회색 선 + 가격 칸 검은 선이 두 줄로 보였다(반증 낮음) */
  /* 안쪽 스크롤이 남는 아주 낮은 화면(1280×600 등)에서 「아래 더 있음」 표시 — 스크롤 그림자(끝에 닿으면 사라진다) */
  #spdtf .spdtf-pd-stick-bd {
    background:
      linear-gradient(#FFFFFF 40%, rgba(255,255,255,0)) top / 100% 20px no-repeat local,
      linear-gradient(rgba(255,255,255,0), #FFFFFF 60%) bottom / 100% 20px no-repeat local,
      radial-gradient(farthest-side at 50% 0, rgba(17,24,39,.16), rgba(17,24,39,0)) top / 100% 8px no-repeat scroll,
      radial-gradient(farthest-side at 50% 100%, rgba(17,24,39,.16), rgba(17,24,39,0)) bottom / 100% 8px no-repeat scroll;
  }
}
/* 낮은 PC 화면 촘촘 모드(반증 1R 높음: 1366×768·1280×720·1536×730 에서 카드가 화면보다 길어 「수량」 줄이 안쪽 스크롤 밑으로 숨었다) —
   1단계(높이 860 이하): 줄·카드·가격 칸 여백을 줄여 약 66px. 2단계(높이 760 이하, 좁은 PC 는 880 이하): 처방·용량 안내 두 줄을 숨겨 약 47px 더
   (같은 말이 상품 정보 캡션에 있다). 그래도 넘치는 화면(높이 690 미만)은 v13 대로 선택 표만 안쪽 스크롤. */
@media (min-width: 1025px) and (max-height: 860px) {
  #spdtf .spdtf-pd-stick { padding: 12px 16px 14px; }
  #spdtf .spdtf-pd-stick .spdtf-ctbl-hero th.spdtf-fl { padding: 7px 0; }
  #spdtf .spdtf-pd-stick .spdtf-ctbl-hero td.spdtf-fc { padding: 5px 0 5px 6px; }
  /* 2026-10-15 고지 줄(.spdtf-q-note)과 유화 카드의 안내 한 줄(spdtf-a-info)이 들어가 약 40px 를 더 깎는다 — 처방 카드 36·칩 42·버튼 44(OEM 은 :923 id 2개 규칙을 같은 특이도로 덮는다)·가격 칸 8/8·알림 아래 8·발주 금액 줄 6·고지 11.5px */
  #spdtf .spdtf-pd-stick .spdtf-ctbl-hero .spdtf-fcard, #spdtf .spdtf-pd-stick .spdtf-ctbl-hero .spdtf-fcard.has-img { min-height: 36px; padding: 2px 8px 2px 4px; }
  #spdtf .spdtf-pd-stick .spdtf-ctbl-hero .spdtf-qty { min-height: 42px; padding: 3px 2px; }
  #spdtf .spdtf-pd-stick .spdtf-pd-price-box { margin-top: 8px; padding-top: 8px; }
  #spdtf .spdtf-pd-stick .spdtf-pd-price-box .spdtf-alerts { margin: 6px 0 8px; }
  #spdtf .spdtf-pd-stick .spdtf-pd-price-box .spdtf-q-cta .spdtf-btn, #spdtf .spdtf-pd-stick .spdtf-pd-price-box .spdtf-q-cta #spdtf-cta-oem { height: 44px; }
  #spdtf .spdtf-pd-stick .spdtf-pd-price-box .spdtf-q-fine { margin-top: 6px; line-height: 1.45; }
  #spdtf .spdtf-pd-stick .spdtf-pd-price-box .spdtf-q-note { font-size: 11.5px; line-height: 1.4; margin-top: 2px; }
}
/* 2026-10-15 오후 — 카드 안 용기 버튼이 3개 이상(썬크림: 튜브형·튜브형(대)·대용량 보틀)이면 420 칸에서 두 줄로 꺾여 1280×720 카드가 33px 넘쳤다(실측 bd 307/274).
   3개부터는 사진 없이 글자만·작게 해 한 줄(이름이 서로 달라 사진 없이도 구분된다 — tonerB/emulB 「보틀」 중복은 용기 1개짜리 카테고리라 해당 없음). :has() 미지원 브라우저는 두 줄로 꺾일 뿐 동작은 같다. */
@media (min-width: 1025px) {
  #spdtf .spdtf-pd-stick .spdtf-ctbl-hero #spdtf-form-segs:has(> :nth-child(3)) .spdtf-seg { padding: 3px 7px; font-size: 12px; min-height: 34px; }
  #spdtf .spdtf-pd-stick .spdtf-ctbl-hero #spdtf-form-segs:has(> :nth-child(3)) .spdtf-seg.has-img { padding: 3px 7px; }
  #spdtf .spdtf-pd-stick .spdtf-ctbl-hero #spdtf-form-segs:has(> :nth-child(3)) .spdtf-segimg { display: none; }
  #spdtf .spdtf-pd-stick .spdtf-ctbl-hero #spdtf-form-segs:has(> :nth-child(3)) .spdtf-seg small { font-size: 10.5px; }
}
/* 2026-10-15 오후 촘촘 2단계(높이 740 이하, 1280×720): 「크림」 카드(보습·아이·핸드 종류 줄 + 확정 전 예시 + 최소 수량 안내 두 줄)가 1단계 레버로는 34px 넘쳤다(실측 bd 288/254).
   종류·용기 세그 30 · 표 줄 2/2 · 카드 머리 여백 2 · 가격 칸 6/6 · 알림 4/6 · 칩 40 · 버튼 42·간격 4 · 발주 금액 줄 4 · 고지 0 — 합 ≈ 40px. 1366×768 은 1단계로 이미 맞아 손대지 않는다. */
/* 2026-10-17: 23종 전부 「확정 전 예시」 경고(+1줄)가 붙자 1025~1199 폭(우측 칸 400 — 칩 4+1 두 줄)·높이 768 에서 토너·미스트·패드·세럼·컨디셔너 9px, 헤어 트리트먼트(경고+유화 안내) 34px 안쪽 스크롤 —
   그 띠는 높이 860 이하면 2단계 레버를 같이 쓴다(1280×720·1366×768 은 1단계로 충분, 실측 560·596 ≤ 563·659). MOQ 재설계 세션(speedmover-ca) 지적. */
@media (min-width: 1025px) and (max-height: 740px), (min-width: 1025px) and (max-width: 1199px) and (max-height: 860px) {
  #spdtf .spdtf-pd-stick-hd { margin: 0 0 2px; }
  #spdtf .spdtf-pd-stick .spdtf-ctbl-hero th.spdtf-fl { padding: 3px 0; }
  #spdtf .spdtf-pd-stick .spdtf-ctbl-hero td.spdtf-fc { padding: 2px 0 2px 6px; }
  #spdtf .spdtf-pd-stick .spdtf-ctbl-hero .spdtf-seg { min-height: 30px; padding: 2px 8px; }
  #spdtf .spdtf-pd-stick .spdtf-ctbl-hero .spdtf-seg.has-img { padding: 2px 8px 2px 4px; }
  #spdtf .spdtf-pd-stick .spdtf-ctbl-hero .spdtf-segimg { width: 24px; height: 24px; }
  #spdtf .spdtf-pd-stick .spdtf-ctbl-hero .spdtf-sel { height: 30px; }
  #spdtf .spdtf-pd-stick .spdtf-ctbl-hero .spdtf-qty { min-height: 40px; }
  #spdtf .spdtf-pd-stick .spdtf-pd-price-box { margin-top: 6px; padding-top: 6px; }
  #spdtf .spdtf-pd-stick .spdtf-pd-price-box .spdtf-alerts { margin: 4px 0 6px; }
  #spdtf .spdtf-pd-stick .spdtf-pd-price-box .spdtf-q-cta .spdtf-btn, #spdtf .spdtf-pd-stick .spdtf-pd-price-box .spdtf-q-cta #spdtf-cta-oem { height: 42px; }
  #spdtf .spdtf-pd-stick .spdtf-pd-price-box .spdtf-q-cta #spdtf-cta-oem { margin-top: 4px; }
  #spdtf .spdtf-pd-stick .spdtf-pd-price-box .spdtf-q-fine { margin-top: 4px; }
  #spdtf .spdtf-pd-stick .spdtf-pd-price-box .spdtf-q-note { margin-top: 0; }
}
/* 4차(2026-10-03 저녁): 안내문이 있던 카드 맨 아래에 이제 [OEM 처방 상담] 버튼이 온다 — 오른쪽 아래 문의 런처(56×56, right 20·bottom 20)가
   카드 귀퉁이와 겹치는 폭(세로 스크롤바 포함 1375 까지)에서는 카드 바닥을 런처 위(76 + 12)로 올려 버튼 오른쪽 끝이 안 가리게 한다.
   (3차의 「안내문 오른쪽 여백 52」·「촘촘 2단계 = 안내 두 줄 숨김」은 그 문구들이 없어져 지웠다) */
@media (min-width: 1025px) and (max-width: 1375px) {
  #spdtf.spdtf { --spdtf-stick-bottom: 88px; }
}
@media (min-width: 1200px) {
  #spdtf .spdtf-pd-grid { grid-template-columns: minmax(0, 1fr) 420px; }   /* 7차: 480 → 420(사장님 「넓다」, 이상한아카데미 384/1216). 🚨 :521 의 480 은 옛 모드 공용이라 cat 전용 .spdtf-pd-grid 로만 */
}
@media (min-width: 1025px) and (max-width: 1199px) {   /* 좁은 PC: 오른쪽 400 이면 왼쪽 553~727 — 수량별 표 6열·진행 과정 4칸이 선다 */
  #spdtf .spdtf-pd-grid { grid-template-columns: minmax(0, 1fr) 400px; column-gap: 32px; }
  #spdtf .spdtf-pd-grid .spdtf-qtbl { font-size: 13px; }   /* 1025 에서 6열 표가 칸보다 11~45px 넓어 20,000개 열이 잘렸다(반증 1R 중, 18종 전부) */
  #spdtf .spdtf-pd-grid .spdtf-qtbl th, #spdtf .spdtf-pd-grid .spdtf-qtbl td { padding: 11px 6px; }
}

/* ── 2026-10-03 밤 5차 — 카드 머리 「발주 옵션」(이상한아카데미 「수강 옵션」) ─────────────────────────
   .spdtf-pd-stick 의 첫 자식, 안쪽 스크롤 본문 밖. 낮은 화면 촘촘 모드에서는 작게(13px) + 표 줄 여백을 1px 씩 더 줄여(5줄 × 2 = −10)
   종류 줄 있는 카드(여유 20~24px, 1280×720·1025×768)에 머리가 들어간다 — 실측으로 수량 칩 전부 보임·안쪽 스크롤 0 을 지킨다. */
#spdtf .spdtf-pd-stick-hd { font-size: 16px; font-weight: 700; letter-spacing: -0.3px; color: var(--spdtf-text); margin: 0 0 10px; line-height: 1.3; }
@media (max-width: 1024px) { #spdtf .spdtf-pd-stick-hd { margin: 14px 0 6px; } }   /* 1024 이하: 카드가 보통 div — 제목 아래에서 선택 표로 이어지는 머리 */
@media (min-width: 1025px) and (max-height: 860px) {
  #spdtf .spdtf-pd-stick-hd { font-size: 14px; margin: 0 0 6px; }   /* 행 라벨(13px)보다 한 단계 크게 — 반증 낮-8 */
  #spdtf .spdtf-pd-stick .spdtf-ctbl-hero th.spdtf-fl { padding: 5px 0; }   /* 2026-10-15 고지 줄 몫으로 1px 더(5줄 × 2) */
  #spdtf .spdtf-pd-stick .spdtf-ctbl-hero td.spdtf-fc { padding: 3px 0 3px 6px; }
}

/* 숨김 유틸 다시 — 위 「정찰가 상세」 블록이 파일 끝 숨김 선언(같은 특이도) 뒤에 붙어 display 를 가진 요소(.spdtf-lchip 등)가
   숨김을 이겼다. 숨김은 언제나 파일 맨 끝이어야 한다(파일 중간 주석 2026-08-01 사고와 같은 원리). */
#spdtf .spdtf-hide,
#spdtf.spdtf-hide { display: none; }
/* 🚨 표 줄 숨김 — 폰·태블릿에서 선택 표를 세로로 쌓는 규칙(`#spdtf .spdtf-ctbl tr { display:block }`, 특이도 1,1,1)이 위 숨김(1,1,0)을 이겨
   종류가 하나뿐인 카드(겔크림 등)의 「종류」 줄이 빈 채로 보였다(2026-10-03 4차 폰 캡처에서 발견). 줄 숨김은 더 높은 특이도로 한 번 더. */
#spdtf .spdtf-ctbl tr.spdtf-hide { display: none; }

/* ═══════════════════════════════════════════════════════════════
   로딩 골격 (2026-10-16, templates/configurator.php .spdtf-skel) — 사장님 「페이지 이동 때 푸터가 먼저 살짝 보인다」.
   JS 가 본문을 그리기 전(data-view="loading")까지만 보이는 글자 없는 회색 블록. 모양은 상세(.spdtf-pd-top 격자)·목록(배너+카드)을 닮게 —
   boot() 뒤 푸터가 거꾸로 튀어 오르지 않게 실측 높이(1366: 사진 732·카드 360 / 390: 사진 358·카드 452)에 맞췄다. 열 폭·패딩은 cat 모드 격자
   .spdtf-pd-grid(:1074 420 / :1077 400 / :969 padding-bottom 0)와 같게 — 옛 모드 값(:523 480·56)을 쓰면 boot 순간 사진 칸이 옆·아래로 튄다(반증 1R). 어떤 폭에서든 첫 화면을
   넘기도록 min-height 안전망(100svh − 56). 움직임(shimmer)은 없다 — 정적 회색(토스식), prefers-reduced-motion 무관.
   특이도 규칙(:322~331)대로 #spdtf 접두, !important 없음. 숨김은 기본값, 보임은 [data-view="loading"] 에서만.
   ═══════════════════════════════════════════════════════════════ */
#spdtf .spdtf-skel { display: none; }
#spdtf[data-view="loading"] .spdtf-skel { display: block; min-height: calc(100vh - 56px); min-height: calc(100svh - 56px); }
#spdtf .spdtf-skel-crumb { width: 180px; height: 14px; margin: 24px 0 0; border-radius: 4px; background: var(--spdtf-bg-soft); }   /* .spdtf-lcrumb 38px 자리(패딩 18 + 글자 20) — 24+14 = 38, 아래 격자 padding 14 까지 더해 사진 칸 top 이 실물과 같은 줄(1366: 181) */
/* 상세 — .spdtf-pd-top 격자(:523·:1074·:1077·:779·:826·:701)와 같은 열·간격 */
#spdtf .spdtf-skel-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; padding: 14px 0 0; align-items: start; }   /* cat 모드 격자(:1074 420 · :969 padding-bottom 0) — 옛 모드 480 을 쓰면 boot 때 사진 칸이 60px 옆으로 튄다(반증 1R) */
#spdtf .spdtf-skel-gal { aspect-ratio: 1 / 1; border-radius: 14px; background: var(--spdtf-bg-soft); }
@media (max-width: 860px), (max-width: 1024px) and (max-height: 700px) { #spdtf .spdtf-skel-gal { max-width: 600px; } }   /* :818-819 와 같은 조건에서만 600 상한 — 1025 이상 실물은 칸 전폭(1366 에서 732) */
#spdtf .spdtf-skel-chip { width: 72px; height: 22px; border-radius: 999px; background: var(--spdtf-bg-soft); }
#spdtf .spdtf-skel-h1 { width: 62%; height: 34px; margin: 12px 0 10px; border-radius: 6px; background: var(--spdtf-bg-soft); }
#spdtf .spdtf-skel-line { width: 86%; height: 16px; border-radius: 4px; background: var(--spdtf-bg-soft); }
#spdtf .spdtf-skel-card { height: 360px; margin-top: 24px; border: 1px solid var(--spdtf-line); border-radius: var(--spdtf-r-box, 12px); background: var(--spdtf-bg); box-shadow: var(--spdtf-card-shadow); }
@media (min-width: 1025px) and (max-width: 1199px) { #spdtf .spdtf-skel-grid { grid-template-columns: minmax(0, 1fr) 400px; column-gap: 32px; } }   /* :1077 */
@media (max-width: 1024px) { #spdtf .spdtf-skel-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } #spdtf .spdtf-skel-card { height: 450px; } }   /* :701 1단 */
@media (min-width: 861px) and (max-width: 1024px) and (min-height: 701px) { #spdtf .spdtf-skel-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; } }   /* :779 */
@media (min-width: 600px) and (max-width: 860px) { #spdtf .spdtf-skel-grid { grid-template-columns: minmax(0, 1fr) clamp(260px, 48%, 340px); gap: 24px; } }   /* :826 */
/* 목록 — .spdtf-lhero(200/178) · .spdtf-lfilter(53) · .spdtf-idx-cards(4 → 3 → 2열, :470·:490·:508) */
#spdtf .spdtf-skel-hero { height: 200px; margin: 16px 0 40px; border-radius: var(--spdtf-r-card); background: var(--spdtf-bg-soft); }
#spdtf .spdtf-skel-filter { height: 36px; padding-bottom: 16px; border-bottom: 1px solid var(--spdtf-line); margin-bottom: 32px; }
#spdtf .spdtf-skel-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 24px; }
#spdtf .spdtf-skel-cardi > div:first-child { aspect-ratio: 1 / 1; border-radius: 10px; background: var(--spdtf-bg-soft); }
#spdtf .spdtf-skel-cardi > div + div { height: 15px; width: 72%; margin-top: 12px; border-radius: 4px; background: var(--spdtf-bg-soft); }
#spdtf .spdtf-skel-cardi > div:last-child { width: 46%; }
@media (max-width: 1024px) { #spdtf .spdtf-skel-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 16px; } #spdtf .spdtf-skel-hero { height: 174px; } }
@media (max-width: 767px) { #spdtf .spdtf-skel-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; } }   /* :496~508 */