/* 알뜰 스튜디오 상품 상세 윗부분 (2026-10-26 대표님 요청 — 보내 주신 예시 배치를 검정·흰색·연두 모양으로)
   theme.css 는 첫 화면 작업과 겹치지 않게 그대로 두고, 상세 화면은 이 파일만 쓴다. */
.pd2 .detail-img { margin: 0; }
.pd2 .detail-img .thumb { width: 100%; aspect-ratio: 1 / 1; border-radius: 0; }
.pd2-info { padding: 18px 16px 6px; }
.pd2-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pd2-tags { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; }
.pd2-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border: 1.5px solid #0E0E0E; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: #0E0E0E; background: #fff; }
.pd2-tag.sale { border-color: #E5484D; color: #E5484D; }
.pd2-tag.fill { background: #0E0E0E; color: #fff; }
.pd2-tag.lime { background: #D6F24A; border-color: #D6F24A; }
.pd2-tag.gray { border-color: #B5B5B5; color: #767676; }
.pd2-share { flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: #0E0E0E; cursor: pointer; padding: 0; }
.pd2-share svg { width: 26px; height: 26px; }
.pd2-share.copied { color: #3A7D00; }
.pd2-name { margin: 12px 0 4px; font-size: 26px; line-height: 1.3; }
.pd2-meta { margin: 0 0 8px; color: #767676; font-size: 13px; }
/* 가격 줄: 원래 가격(취소선) · 할인율(빨강) · 지금 가격 — 예시 순서. 옵션을 바꾸면 shop.js 가 같은 상자를 다시 채운다 */
.pd2-price .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 14px; }
.pd2-price .price del { order: 1; font-size: 22px; color: #B5B5B5; text-decoration-color: #E5484D; text-decoration-thickness: 2px; }
.pd2-price .price .price-off { order: 2; background: none; padding: 0; font-size: 28px; font-weight: 800; color: #E5484D; }
.pd2-price .price strong { order: 3; font-size: 30px; }
.pd2-price .price .vat { order: 4; flex-basis: 100%; font-size: 12px; color: #767676; }
.pd2-coupon { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; padding: 10px 10px 10px 14px; white-space: nowrap; border: 1.5px solid #0E0E0E; margin: 0 0 18px; }
.pd2-cp-label { font-size: 14px; color: #0E0E0E; }
.pd2-coupon strong { font-size: 24px; font-weight: 900; }
.pd2-cp-help { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1.5px solid #0E0E0E; border-radius: 50%; font-size: 12px; font-weight: 800; cursor: help; }
.pd2-cp-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; background: #0E0E0E; color: #D6F24A; font-weight: 800; text-decoration: none; }
.pd2-cp-btn svg { width: 18px; height: 18px; }
.pd2-cp-btn.done { background: #F2F2F2; color: #0E0E0E; font-weight: 700; font-size: 13px; height: 38px; }
.pd2-rows { margin: 0; }
.pd2-rows > div { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid #E6E6E6; }
.pd2-rows > div:first-child { border-top: 0; }
.pd2-rows dt { font-weight: 800; color: #0E0E0E; }
.pd2-rows dd { margin: 0; color: #767676; line-height: 1.55; word-break: keep-all; }
/* 아래 탭: 예시처럼 칸으로 나눈 모양 */
.pd2 ~ .tabs, .pd2 .tabs { display: flex; gap: 0; border-top: 1px solid #E6E6E6; border-bottom: 1px solid #0E0E0E; }
.pd2 .tabs button { flex: 1; height: 50px; border: 0; border-right: 1px solid #E6E6E6; background: #fff; color: #767676; font-weight: 700; border-radius: 0; }
.pd2 .tabs button:last-child { border-right: 0; }
.pd2 .tabs button.on { background: #F2F2F2; color: #0E0E0E; box-shadow: inset 0 -3px 0 #0E0E0E; }
@media (max-width: 380px) { .pd2-name { font-size: 22px; } .pd2-price .price strong { font-size: 26px; } .pd2-coupon strong { font-size: 22px; } .pd2-coupon { flex-wrap: wrap; } .pd2-cp-btn { margin-left: 0; width: 100%; justify-content: center; } }

/* 2026-10-27 대표님 요청: 상품 화면 탭은 스크롤해도 따라오지 않고(고정 안 함) 제자리에 둔다 */
.tabs.no-stick, .shop .tabs.no-stick, .pd2 .tabs.no-stick { position: static; top: auto; }