/* 상품 상세 — styles.css 의 토큰(--blue, --ink, --line …)을 그대로 쓴다 */
.pd-wrap{max-width:1280px;margin:auto;padding:0 28px 96px}
.pd-crumb{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#6f8291;padding:20px 0}
.pd-crumb span{color:#b6c4cd}
.pd-crumb b{color:var(--ink)}

.pd-top{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}

/* 왼쪽 */
.pd-main{margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.pd-main img{width:100%;display:block;aspect-ratio:1/1;object-fit:contain;background:#fff}
.pd-main figcaption{border-top:1px solid var(--line);padding:11px 16px;font-size:13.5px;color:#6f8291;background:#f8fafb}
.pd-thumbs{display:flex;gap:9px;margin-top:12px}
.pd-thumbs button{width:74px;height:74px;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;background:#fff;padding:0}
.pd-thumbs button.active{border-color:var(--blue);box-shadow:0 0 0 3px rgba(23,105,170,.14)}
.pd-thumbs img{width:100%;height:100%;object-fit:contain}

/* 오른쪽 */
.pd-material{font-size:13.5px;font-weight:800;color:var(--blue);margin:0 0 6px;letter-spacing:.04em}
.pd-buy h1{font-size:35px;letter-spacing:-.045em;margin:0 0 10px;line-height:1.2}
.pd-lead{color:var(--muted);margin:0 0 22px;line-height:1.7}

.pd-price{display:flex;align-items:baseline;gap:10px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pd-price s{color:#9fb0bc;font-size:17px}
.pd-price b{font-size:33px;letter-spacing:-.04em}
.pd-price span{font-size:14.5px;font-weight:800;color:#c0392b}

.pd-spec{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:22px 0}
.pd-spec div{background:#fff;padding:13px 15px}
.pd-spec dt{font-size:12.5px;color:#7d8d99;margin:0}
.pd-spec dd{font-size:16px;font-weight:800;margin:4px 0 0}

.pd-core-title{font-size:14.5px;font-weight:800;margin:0 0 9px}
.pd-core-title em{font-style:normal;font-weight:400;color:#7d8d99;margin-left:6px}
.pd-core-pick{display:flex;gap:9px}
.pd-core-pick button{flex:1;border:1px solid #ccd9e1;background:#fff;border-radius:11px;
  padding:13px 14px;text-align:left;color:var(--ink)}
.pd-core-pick button b{display:block;font-size:17px}
.pd-core-pick button span{display:block;font-size:13px;color:#7d8d99;margin-top:3px}
.pd-core-pick button.active{border-color:var(--blue);background:#edf6fc;box-shadow:0 0 0 3px rgba(23,105,170,.1)}
.pd-core-note{font-size:13.5px;color:#7d8d99;margin:9px 0 0;min-height:1.4em}

.pd-qty{display:flex;align-items:center;gap:12px;margin:24px 0 0}
.pd-qty label{font-size:14.5px;font-weight:800}
.pd-qty-box{display:flex;border:1px solid #ccd9e1;border-radius:10px;overflow:hidden}
.pd-qty-box button{width:42px;height:46px;border:0;background:#f7fafb;font-size:19px;color:var(--ink)}
@media(hover:hover) and (pointer:fine){.pd-qty-box button:hover{background:#e8f2f8}}
.pd-qty-box input{width:64px;height:46px;border:0;border-left:1px solid #e3ebf0;
  border-right:1px solid #e3ebf0;text-align:center;font-weight:800;outline:0}
.pd-qty-unit{font-size:14.5px;color:#7d8d99}
/* 전용리본 함께 담기 (10/14, 영카트 추가옵션) — 직각·그림자 없음 */
.pd-supply{margin:16px 0 0}
.pd-supply label{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid #ccd9e1;cursor:pointer;font-size:14.5px;line-height:1.5;word-break:keep-all}
.pd-supply label+label{margin-top:8px}
.pd-supply input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--ink)}
.pd-supply b{font-weight:800;margin-right:4px}
.pd-supply em{font-style:normal;font-weight:800;color:var(--ink);white-space:nowrap}
.pd-supply label:has(input:checked){border-color:var(--ink)}

.pd-total{display:flex;align-items:baseline;justify-content:space-between;
  margin:20px 0 16px;padding:16px 18px;background:#f3f7f9;border-radius:12px}
.pd-total span{font-size:14.5px;font-weight:800;color:#536b7e}
.pd-total b{font-size:27px;letter-spacing:-.04em}

.pd-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pd-actions .primary-button{width:100%}
.pd-actions .add-cart{height:50px}

.pd-ship{list-style:none;margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--line);
  font-size:14.5px;color:#536b7e;display:grid;gap:7px}
.pd-ship b{color:var(--ink)}

/* 원단 안내 */
.pd-info{margin-top:72px;padding-top:44px;border-top:1px solid var(--line)}
.pd-info h2{font-size:27px;letter-spacing:-.04em;margin:0 0 24px}
.pd-info-body{display:grid;grid-template-columns:1.1fr 1fr;gap:34px;align-items:start}.pd-info-body.no-photo{grid-template-columns:1fr}
.pd-info-body figure{margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.pd-info-body img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}
.pd-info-eng{font-size:13px;font-weight:800;letter-spacing:.14em;color:var(--blue);margin:0 0 6px}
.pd-info-body h3{font-size:27px;letter-spacing:-.04em;margin:0 0 12px}
.pd-info-body p{color:var(--muted);line-height:1.8;margin:0}
.pd-matspec{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0}
.pd-matspec div{border:1px solid var(--line);border-radius:9px;padding:9px 13px;background:#fff}
.pd-matspec dt{font-size:12px;color:#7d8d99;margin:0}
.pd-matspec dd{font-size:14.5px;font-weight:800;margin:3px 0 0}
.pd-source{font-size:13px;color:#8b9aa6;margin:22px 0 0}

/* 같은 규격 다른 원단 */
.pd-same{margin-top:72px;padding-top:44px;border-top:1px solid var(--line)}
.pd-same h2{font-size:27px;letter-spacing:-.04em;margin:0 0 6px}
.pd-same-lead{color:var(--muted);margin:0 0 24px;font-size:16px}
.pd-same-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

@media(max-width:900px){
  .pd-top{grid-template-columns:1fr;gap:30px}
  .pd-info-body{grid-template-columns:1fr}
  .pd-same-grid{grid-template-columns:1fr 1fr}
  .pd-wrap{padding:0 18px 70px}
}
@media(max-width:560px){
  .pd-buy h1{font-size:28px}
  .pd-price b{font-size:28px}
  .pd-actions{grid-template-columns:1fr}
  .pd-spec{grid-template-columns:1fr}
}

/* 제작품 안내 — 당일 발송과 나란히 두면 모순으로 읽힌다. 따로 크게 뺀다. */
.pd-made{margin:18px 0 0;padding:15px 17px;border-radius:12px;
  background:#fff6e8;border:1px solid #f0d3a4;display:grid;gap:5px}
.pd-made b{font-size:13.5px;color:#8a5a12}
.pd-made em{font-style:normal;font-size:18px;font-weight:800;color:#6b4406;letter-spacing:-.02em}
.pd-made span{font-size:13px;color:#8a6b3e;line-height:1.6}

/* ── 지관 안내 표 ─────────────────────────────────────────────
   실제 상세에도 같은 표가 있다. 고르기 전에 이게 필요하다. */
.pd-core-table{width:100%;margin-top:12px;border-collapse:collapse;font-size:12.5px}
.pd-core-table th,.pd-core-table td{padding:8px 9px;border:1px solid var(--line);text-align:center}
.pd-core-table th{background:var(--surface);color:#54687a;font-weight:800;text-align:left;white-space:nowrap}
.pd-core-table tr:first-child td{background:#eff6fb;color:var(--blue-dark)}

/* 품절·재고 적음 */
.pd-core-pick button.sold{opacity:.5;cursor:not-allowed}
.pd-sold{font-style:normal;margin-left:6px;padding:2px 7px;border-radius:999px;
  background:#efe3e2;color:#9c4a42;font-size:11px;font-weight:800}
.pd-low{font-style:normal;margin-left:6px;padding:2px 7px;border-radius:999px;
  background:#fdf0d9;color:#8a6118;font-size:11px;font-weight:800}
.pd-qty-limit{margin-left:10px;color:var(--muted);font-size:12.5px;font-weight:700}

/* ── 탭 ───────────────────────────────────────────────────── */
.pd-tabs{max-width:1180px;margin:56px auto 0;padding:0 28px}
.pd-tabbar{display:flex;gap:4px;border-bottom:2px solid var(--line)}
.pd-tabbar button{min-height:50px;padding:0 22px;border:0;background:transparent;
  color:#7b8e9e;font-size:14.5px;font-weight:800;position:relative}
.pd-tabbar button b{margin-left:5px;color:#a6b6c3;font-size:12.5px}
.pd-tabbar button.active{color:var(--ink)}
.pd-tabbar button.active:after{content:"";position:absolute;left:0;right:0;bottom:-2px;
  height:2px;background:var(--blue)}
.pd-panel{padding:28px 2px 0}
.pd-panel h3{margin:0 0 10px;font-size:18px;letter-spacing:-.01em}
.pd-panel h3+ul{margin-bottom:26px}
.pd-detail-lead{margin:0 0 18px;color:var(--muted);font-size:14.5px}
.pd-detail-spec{margin:0;display:grid;gap:0}
.pd-detail-spec div{display:grid;grid-template-columns:130px 1fr;gap:14px;
  padding:11px 2px;border-bottom:1px solid var(--line);font-size:14px}
.pd-detail-spec dt{margin:0;color:#54687a;font-weight:700}
.pd-detail-spec dd{margin:0;font-weight:700}
.pd-detail-warn{margin:16px 0 0;padding-left:17px;color:var(--muted);font-size:13.5px;line-height:1.8}
.pd-policy{margin:0;padding-left:17px;color:#46617a;font-size:14px;line-height:1.85;max-width:80ch}
.pd-policy b{color:var(--ink)}
.pd-empty{margin:0;padding:38px 0;text-align:center;color:var(--muted);font-size:14px}
.pd-qa-hint{margin:0;padding:16px 18px;border-radius:11px;background:var(--surface);
  color:#46617a;font-size:13.5px;line-height:1.7}
.pd-qa-hint a{color:var(--blue);font-weight:800}
.pd-rv-point{padding:18px 20px;border-radius:12px;background:#f4f9fc;
  border-left:3px solid var(--blue)}
.pd-rv-point b{display:block;margin-bottom:9px;font-size:14.5px}
.pd-rv-point ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.pd-rv-point li{padding:7px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);
  font-size:13px;font-weight:700;color:#4c6a80}
.pd-rv-point li b{display:inline;margin:0;color:var(--blue)}

/* ── 이전 · 다음 상품 ─────────────────────────────────────── */
.pd-nearby{max-width:1180px;margin:44px auto 0;padding:0 28px;display:grid;
  grid-template-columns:1fr 1fr;gap:12px}
.pd-nearby a{padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:#fff}
@media(hover:hover) and (pointer:fine){.pd-nearby a:hover{border-color:var(--blue)}}
.pd-nearby span{display:block;color:var(--muted);font-size:12px;font-weight:800}
.pd-nearby b{display:block;margin-top:5px;font-size:14.5px}
.pd-nearby .next{text-align:right}

@media(max-width:560px){
  .pd-tabs{padding:0 15px;margin-top:40px}
  .pd-tabbar{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pd-tabbar button{padding:0 14px;font-size:13.5px;white-space:nowrap}
  .pd-detail-spec div{grid-template-columns:1fr;gap:3px}
  .pd-nearby{grid-template-columns:1fr;padding:0 15px}
  .pd-nearby .next{text-align:left}
  .pd-qty-limit{width:100%;margin:6px 0 0}
}

/* ── 상세설명 ─────────────────────────────────────────────────
   실제 상세설명은 긴 세로 이미지 한 장이다. 같은 내용을 글과 표로.
   그래야 폰에서 읽히고, 규격이 늘어도 표가 알아서 늘어난다. */
.ex-promise{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:34px}
.ex-promise div{padding:18px 20px;border-radius:12px;text-align:center;
  background:linear-gradient(105deg,#123c64,#1769aa);color:#eaf4fb}
.ex-promise b{display:block;font-size:19px;letter-spacing:-.01em}
.ex-promise span{display:block;margin-top:5px;font-size:12.5px;opacity:.85}

.ex-block{margin-bottom:40px}
.ex-eng{margin:0;color:#9fb1c0;font-size:12px;font-weight:800;letter-spacing:.14em}
.ex-title{margin:7px 0 10px;font-size:25px;letter-spacing:-.02em}
.ex-h4{margin:0 0 8px;font-size:19px;letter-spacing:-.01em}
.ex-sub{margin:0 0 18px;color:var(--muted);font-size:14px;line-height:1.65;max-width:72ch}
.ex-body{margin:0 0 16px;color:#46617a;font-size:14.5px;line-height:1.85;max-width:76ch}
.ex-shot{margin:0 0 18px}
.ex-shot img{width:100%;max-width:440px;border-radius:12px;display:block}

.ex-icons{margin:0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(4,1fr);gap:10px}
.ex-icons li{padding:14px 12px;border:1px solid var(--line);border-radius:11px;text-align:center}
.ex-icons b{display:block;color:var(--muted);font-size:12px;font-weight:800}
.ex-icons span{display:block;margin-top:6px;font-size:14px;font-weight:800}

.ex-cores{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ex-cores article{padding:20px;border:1px solid var(--line);border-radius:12px}
.ex-cores b{font-size:19px;letter-spacing:-.01em}
.ex-cores span{display:block;margin-top:5px;color:var(--blue);font-size:13px;font-weight:800}
.ex-cores i{display:inline-block;margin-top:9px;padding:4px 10px;border-radius:999px;
  background:var(--surface);color:#54687a;font-style:normal;font-size:12px;font-weight:800}
.ex-cores p{margin:11px 0 0;color:var(--muted);font-size:13.5px;line-height:1.65}

.ex-plant{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.ex-plant figure{margin:0}
.ex-plant img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:11px;display:block}
.ex-plant figcaption{margin-top:8px;font-size:13.5px;font-weight:800}

/* 규격표 — 원래 이미지였던 것 */
.ex-size-tabs{display:flex;gap:7px;margin-bottom:14px}
.ex-size-tabs button{min-height:40px;padding:0 17px;border:1px solid var(--line);
  border-radius:999px;background:#fff;color:#54687a;font-size:13px;font-weight:800}
.ex-size-tabs button.active{border-color:var(--blue);background:var(--blue);color:#fff}
.ex-size-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ex-size-table{width:100%;min-width:520px;border-collapse:collapse;font-size:13px}
.ex-size-table th{padding:10px 8px;background:var(--ink);color:#eaf4fb;
  font-size:12px;font-weight:800;white-space:nowrap;position:sticky;top:0}
.ex-size-table td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:center;
  white-space:nowrap}
.ex-size-table td:nth-child(-n+3){font-weight:800}
.ex-size-table td.no{color:#c3d0da}
.ex-size-table td.ok a{color:var(--blue);font-weight:800}
@media(hover:hover) and (pointer:fine){.ex-size-table td.ok a:hover{text-decoration:underline}}
.ex-size-table td.now b{padding:3px 9px;border-radius:999px;background:var(--blue);
  color:#fff;font-size:11.5px}
.ex-size-table tr.here td{background:#f2f8fc}
@media(hover:hover) and (pointer:fine){.ex-size-table tr:hover td{background:#f7fafc}}
.ex-size-count{margin:12px 0 0;color:var(--muted);font-size:12.5px;font-weight:700}

@media(max-width:560px){
  .ex-promise{grid-template-columns:1fr;gap:9px;margin-bottom:26px}
  .ex-promise div{display:flex;align-items:baseline;justify-content:center;gap:9px;padding:14px}
  .ex-promise b{font-size:16px}
  .ex-promise span{margin:0}
  .ex-title{font-size:20px}
  .ex-icons{grid-template-columns:1fr 1fr}
  .ex-cores{grid-template-columns:1fr}
  .ex-plant{grid-template-columns:1fr}
  .ex-plant img{aspect-ratio:16/9}
}

/* A4 규격표 — 컬럼이 다섯이라 롤 표보다 좁아도 된다 */

/* A4 표의 도안 — 실제 상세설명 이미지도 칸마다 그림을 보여준다 */
/* A4 는 표가 아니라 카드로 본다 — 숫자를 견주는 게 아니라 모양을 보고 고른다 */
.ex-a4-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ex-a4-card{position:relative;padding:16px 14px 15px;border:1px solid var(--line);
  border-radius:12px;background:#fff;text-align:center;display:block}
@media(hover:hover) and (pointer:fine){.ex-a4-card:hover{border-color:var(--blue);box-shadow:0 8px 22px rgba(30,71,100,.09)}}
.ex-a4-card.here{border-color:var(--blue);background:#f4f9fc}
.ex-a4-k{display:inline-block;margin-bottom:10px;padding:4px 11px;border-radius:999px;
  background:var(--ink);color:#eaf4fb;font-size:12px;font-weight:800}
.ex-a4-card.here .ex-a4-k{background:var(--blue)}
.ex-draw{display:block;width:100%;max-width:124px;height:auto;margin:0 auto 12px}
.ex-a4-card b{display:block;font-size:14px;letter-spacing:-.01em}
.ex-a4-arr{display:block;margin-top:4px;color:var(--muted);font-size:12.5px;font-weight:700}
.ex-a4-card i{position:absolute;top:10px;right:10px;padding:3px 8px;border-radius:999px;
  background:var(--blue);color:#fff;font-style:normal;font-size:11px;font-weight:800}
@media(hover:hover) and (pointer:fine){.ex-a4-card:hover .ex-draw g{fill:#e3eef6;stroke:var(--blue)}}

@media(max-width:900px){.ex-a4-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.ex-a4-grid{grid-template-columns:1fr 1fr;gap:9px}
  .ex-a4-card{padding:13px 10px}}
/* 폰에서 A4 카드 폭(약 128px)에 "99.1 × 33.9 mm" 가 들어가도록 */
@media(max-width:560px){.ex-a4-card b{font-size:12.5px;letter-spacing:-.02em;white-space:nowrap}}

/* 9/30 전수조사: 관심상품 · 품절 · 규격표 칸마다 매수 */
.pd-wish{margin-top:8px;width:100%;height:44px;border:1px solid var(--line);border-radius:10px;background:#fff;font-weight:700;color:var(--ink);cursor:pointer}
.pd-wish[aria-pressed="true"]{color:#c0392b;border-color:#e3b1ab}
.pd-soldout{background:#f4f6f8;border-color:#d5dde4}
.pd-soldout b{color:#44525e}
.pd-soldout a{font-weight:800;color:var(--navy);border-bottom:1px solid currentColor}
.pd-actions button:disabled{opacity:.45;cursor:not-allowed}
.ex-size-table td small{display:block;font-size:12px;font-weight:600;color:#6b7c8a;margin-top:2px}
.ex-size-table td.sold a{color:#8a98a4}