/* ============================================================
   detail.css — 상품 상세(detail.html) 전용 스타일 (Phase 3 / TASK-303)
   - 디자인시스템 토큰(var(--*)) + components.css 클래스와 병존
   - ⭐ js/detail.js 무편집 원칙: JS가 생성/토글하는 마크업(.size-btn,
     .thumb-item, .custom-opt-btn, .stiz-product-card, #relatedGrid 등)은
     건드리지 않고, 여기서 컨테이너/외형만 리스킨한다.
   ============================================================ */

/* ─── 래퍼 / 레이아웃 ───────────────────────────────────────── */
.detail-wrap { padding: 28px 20px 72px; }
.detail-crumb { margin-bottom: 24px; }

/* 좌 1.2 : 우 1 그리드. 좁아지면 1열로 스택 */
.detail-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; }
@media (max-width: 960px) { .detail-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ─── 좌: 이미지 갤러리(스티키) ─────────────────────────────── */
/* 데스크톱에서 우측 정보를 스크롤하는 동안 이미지가 따라오도록 sticky */
.detail-media { position: sticky; top: 96px; align-self: start; }
/* 한 열로 쌓이는 폭에서는 sticky 해제 — 이미지가 따라붙어 «스크롤이 걸리는» 느낌(2026-08-19 직원 폰 실측). 위 규칙보다 뒤에 있어야 이긴다 */
@media (max-width: 960px) { .detail-media { position: static; } }
.detail-media-main {
  position: relative;
  /* ⭐ aspect-ratio:1/1 제거 — 갤러리가 대표 1장 위주라 원본 비율대로 표시.
     세로 유니폼(2:3)이 정사각에 갇혀 축소·좌우여백 나던 문제 해소 */
  background: var(--surface-sunken);
  border-radius: var(--radius-well);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 배경(well)이 열 전체로 늘어나 이미지 좌우에 빈 여백이 남지 않도록,
     컨테이너를 이미지 폭에 맞춰 줄이고 열 안에서 가운데 정렬 */
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
/* 이미지를 자연 비율로 표시하되:
   - max-height 78vh: 세로 유니폼이 화면을 넘지 않게 세로 상한
   - width:auto + max-width:100%: 세로 이미지 좌우 레터박스 방지 + 가로 넘침 방지
   - 유니폼/의류는 잘리면 안 되므로 크롭(cover) 없이 원본 비율 유지 */
.detail-media-main img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
}

/* 썸네일 스트립: JS가 fixed 크기 .thumb-item 버튼을 생성하므로
   grid가 아닌 가로 flex 스크롤로 둔다(기존 동작 보존) */
.detail-media-thumbs { display: flex; gap: 8px; overflow-x: auto; margin-top: 12px; }
/* ⚠️ E-8 가드: 대표 1장일 때 JS가 .hidden 토글 → display:flex가 tailwind .hidden 덮어쓰는 함정 방지 */
.detail-media-thumbs.hidden { display: none; }

/* ─── 우: 상품 정보 ─────────────────────────────────────────── */
.detail-info { display: flex; flex-direction: column; }
.detail-name {
  font-size: 28px;
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
  line-height: 1.15;
  margin: 8px 0 4px;
}
@media (min-width: 768px) { .detail-name { font-size: 40px; } }
.detail-name-en { font-size: 14px; color: var(--text-muted); margin: 0 0 16px; }
/* #priceArea 컨테이너: 내부 가격 텍스트는 JS(renderPriceArea)가 렌더.
   여기서는 하단 여백만 담당 */
.detail-price { margin: 0 0 24px; }

/* ─── 옵션 패널(기성품/커스텀 공통) ─────────────────────────── */
.detail-panel { display: flex; flex-direction: column; gap: 20px; }
/* ⚠️ E-8 가드: JS가 panel에 .hidden을 토글하는데 위 display:flex(특이성 0,1,0)가
   tailwind .hidden(0,1,0, 먼저 로드)을 덮어써 안 숨겨지는 함정 방지 */
.detail-panel.hidden { display: none; }

.detail-option-label {
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
  margin: 0 0 12px;
}
.detail-sizes { display: flex; flex-wrap: wrap; gap: 8px; }

/* 총 상품 금액 박스. (bg-gray-50 클래스는 js/detail.js:406 hook용으로 병존) */
.detail-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--surface-muted);
  border-radius: var(--radius-card);
}
/* ⚠️ E-8 가드: 상담가 상품일 때 JS가 총액 박스에 .hidden을 추가 → display:flex 덮어쓰기 방지 */
.detail-total.hidden { display: none; }
.detail-total-price { font-size: 20px; font-weight: var(--fw-black); }

.detail-actions { display: flex; gap: 12px; }
.detail-actions .stiz-btn { flex: 1; }

.detail-notes { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; }
.detail-notes li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.detail-notes .material-symbols-outlined { font-size: 18px; color: var(--text-muted); }

/* ─── JS 생성 사이즈/커스텀 옵션 버튼 외형 보정(선택자 불변) ──── */
/* .size-btn / .custom-opt-btn 는 detail.js가 생성하고 .selected/.out-of-stock 를
   토글한다(인라인 <style>에서 selected/out-of-stock 색 처리). 여기선 최소 보정만. */
.detail-sizes .size-btn { min-height: 40px; }

/* ─── 커스텀 간편 견적 ─────────────────────────────────────── */
.custom-estimate-card {
  display: grid;
  gap: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--stiz-white);
  padding: 22px;
}

.custom-estimate-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.custom-estimate-head h2 {
  margin: 4px 0 0;
  color: var(--stiz-black);
  font-size: 22px;
  font-weight: var(--fw-black);
  letter-spacing: 0;
}

.custom-price-guide-link,
.custom-share-btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: var(--fw-bold);
  text-decoration: none;
}

.custom-price-guide-link:hover,
.custom-share-btn:hover {
  color: var(--stiz-blue);
}

.custom-price-guide-link .material-symbols-outlined,
.custom-share-btn .material-symbols-outlined {
  font-size: 18px;
}

.custom-estimate-field {
  display: grid;
  gap: 10px;
}

.custom-estimate-field.hidden {
  display: none;
}

.custom-step-heading {
  display: flex;
  align-items: center;
  gap: 9px;
}

.custom-step-heading .detail-option-label {
  margin: 0;
  color: var(--stiz-black);
  font-size: 14px;
}

.custom-step-number {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--stiz-black);
  color: var(--stiz-white);
  font-size: 11px;
  font-weight: var(--fw-black);
}

.custom-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.custom-option-grid .custom-opt-btn {
  min-height: 48px;
  overflow-wrap: anywhere;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  text-align: left;
}

.custom-option-grid .custom-opt-btn small {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: var(--fw-medium);
}

.custom-option-grid .custom-opt-btn.selected small {
  color: color-mix(in srgb, var(--stiz-white) 72%, transparent);
}

.custom-selected-product {
  display: flex;
  min-height: 64px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--stiz-black);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  padding: 12px 14px;
}

.custom-selected-product > .material-symbols-outlined {
  color: var(--stiz-blue);
  font-size: 22px;
}

.custom-selected-product div {
  display: grid;
  gap: 3px;
}

.custom-selected-product strong {
  color: var(--stiz-black);
  font-size: 14px;
}

.custom-selected-product small {
  color: var(--text-secondary);
  font-size: 12px;
}

.custom-price-notice {
  margin: 0;
  border-left: 3px solid var(--stiz-blue);
  background: var(--surface-muted);
  padding: 11px 12px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.6;
}

.custom-price-notice.hidden {
  display: none;
}

.custom-quantity {
  display: grid;
  grid-template-columns: 48px minmax(72px, 110px) 48px auto;
  gap: 8px;
  align-items: center;
}

.custom-quantity button,
.custom-quantity input {
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--stiz-white);
}

.custom-quantity button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--stiz-black);
}

.custom-quantity input {
  width: 100%;
  padding: 0 10px;
  font: inherit;
  font-weight: var(--fw-bold);
  text-align: center;
}

.custom-quantity > span {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: var(--fw-bold);
}

.custom-part-quantity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.custom-part-quantity {
  display: grid;
  min-width: 0;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  padding: 14px;
}

.custom-part-quantity > span {
  color: var(--stiz-black);
  font-size: 14px;
  font-weight: var(--fw-black);
}

.custom-part-quantity .custom-quantity {
  grid-template-columns: 44px minmax(58px, 1fr) 44px auto;
}

.custom-part-quantity .custom-quantity button,
.custom-part-quantity .custom-quantity input {
  min-height: 44px;
}

.custom-quantity-help {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.6;
}

.custom-estimate-composition {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 8px;
}

.custom-estimate-result {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface-muted);
}

.custom-estimate-result-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  background: var(--stiz-black);
  color: var(--stiz-white);
  padding: 18px;
}

.custom-estimate-result-head > div {
  display: grid;
  justify-items: start;
  gap: 7px;
}

.custom-estimate-result-head small {
  color: var(--gray-400);
  font-size: 11px;
  font-weight: var(--fw-bold);
}

.custom-estimate-result-head span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--gray-700);
  padding: 5px 9px;
  font-size: 10px;
  font-weight: var(--fw-black);
}

.custom-estimate-result-head span.is-discounted {
  background: var(--stiz-red);
  color: var(--stiz-white);
}

.custom-estimate-result-head strong {
  font-size: 28px;
  font-weight: var(--fw-black);
  text-align: right;
}

.custom-estimate-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--border);
  padding: 14px 18px;
}

.custom-estimate-summary > div {
  display: grid;
  min-width: 0;
  gap: 5px;
  border-right: 1px solid var(--border);
  padding: 0 12px;
}

.custom-estimate-summary > div:first-child {
  padding-left: 0;
}

.custom-estimate-summary > div:last-child {
  border-right: 0;
  padding-right: 0;
}

.custom-estimate-summary span {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: var(--fw-bold);
}

.custom-estimate-summary strong {
  overflow-wrap: anywhere;
  color: var(--stiz-black);
  font-size: 12px;
}

.custom-estimate-details summary {
  display: flex;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: var(--fw-bold);
}

.custom-estimate-details summary::-webkit-details-marker {
  display: none;
}

.custom-estimate-details summary .material-symbols-outlined {
  font-size: 19px;
  transition: transform 160ms ease;
}

.custom-estimate-details[open] summary .material-symbols-outlined {
  transform: rotate(180deg);
}

.custom-estimate-details[open] .custom-estimate-breakdown {
  border-top: 1px solid var(--border);
}

.custom-estimate-breakdown {
  display: grid;
  gap: 0;
  padding: 12px 18px;
}

.custom-estimate-breakdown > div {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px;
}

.custom-estimate-breakdown > div:last-child {
  border-bottom: 0;
}

.custom-estimate-breakdown strong {
  color: var(--stiz-black);
  text-align: right;
}

.custom-estimate-result > p {
  margin: 0;
  border-top: 1px solid var(--border);
  padding: 12px 18px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.5;
}

.custom-estimate-actions {
  display: grid;
  gap: 8px;
}

.custom-estimate-action-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0;
  color: var(--text-muted);
  font-size: 11px;
}

.custom-estimate-action-note .material-symbols-outlined {
  color: var(--stiz-blue);
  font-size: 16px;
}

@media (max-width: 520px) {
  .custom-estimate-card {
    padding: 18px;
  }

  .custom-estimate-head {
    display: grid;
  }

  .custom-price-guide-link {
    justify-content: start;
  }

  .custom-option-grid {
    grid-template-columns: 1fr;
  }

  .custom-part-quantity-grid {
    grid-template-columns: 1fr;
  }

  .custom-estimate-result-head {
    display: grid;
    align-items: start;
  }

  .custom-estimate-result-head strong {
    text-align: left;
  }

  .custom-estimate-summary {
    grid-template-columns: 1fr;
  }

  .custom-estimate-summary > div,
  .custom-estimate-summary > div:first-child,
  .custom-estimate-summary > div:last-child {
    grid-template-columns: minmax(110px, 0.8fr) 1fr;
    gap: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 10px 0;
  }

  .custom-estimate-summary > div:first-child {
    padding-top: 0;
  }

  .custom-estimate-summary > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

/* ─── 하단 탭 영역 토큰화 ──────────────────────────────────── */
.detail-tabs { border-top: 1px solid var(--border); }

/* ─── 상세설명 영역(#descriptionContent) 가로 넘침 방지 ───────────
   왜: cafe24에서 가져온 상세HTML(p.detailHtml)이 <div style="width:780px">,
   <table width="820">, <img width="900"> 같은 '고정폭 래퍼'를 포함한다.
   이 경우 자식 img의 max-width:100%는 뷰포트가 아니라 '고정폭 래퍼' 기준이 되어
   좁은 화면(모바일)에서 래퍼째로 컨테이너를 넘겨 이미지가 크게 잘려 보였다.
   해결: 상세설명 컨테이너 스코프 안에서 모든 요소를 컨테이너 폭에 가둔다.
   (스코프를 #descriptionContent로 한정해 페이지 다른 영역엔 영향 없음) */

/* 컨테이너 내부 모든 요소가 폭을 넘지 못하도록 상한 + 박스 계산 안정화 */
#descriptionContent,
#descriptionContent * {
  max-width: 100%;
  box-sizing: border-box;
}
/* 이미지: 폭에 맞게 자동 축소(비율 유지) + 블록 가운데 정렬.
   detailHtml 인라인 이미지와 appendDetailImages의 .w-full 이미지 모두 확실히 보강 */
#descriptionContent img {
  max-width: 100% !important;
  height: auto;
  display: block;
  margin-inline: auto;
}
/* cafe24 인라인 고정폭(style="width:780px" 등) 무력화 — 래퍼가 넘치는 근본 원인 차단 */
#descriptionContent [style*="width"] {
  max-width: 100% !important;
}
/* 표/영상도 폭에 맞춤 */
#descriptionContent table,
#descriptionContent video {
  max-width: 100% !important;
}
/* 긴 텍스트/URL이 강제로 컨테이너를 밀어내지 않도록 줄바꿈 */
#descriptionContent {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ─── 관련 상품 ────────────────────────────────────────────── */
.detail-related { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--border); }

/* .product-grid: detail.html은 home.css/list.css 미로드 → 동일 값 재정의 */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 960px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }