/* ============================================================
   원내상품 카탈로그 — body.products-p2  (v2: SKU 그리드 · 상세 · 장바구니 · 신청)
   soo-p2.css 위에 얹힌다. 장식 배지·캡슐 금지(CLAUDE.md §5). 사진·상품명·가격이 먼저 보이게.
   ============================================================ */
body.products-p2 .hanja{font-size:.72em;font-weight:600}
body.products-p2 .pd-wrap{max-width:min(88vw,1280px);margin:0 auto}

/* ---------- 목록: 검색 + 카테고리 ---------- */
.pd-tools{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin:28px 0 22px}
.pd-search{display:flex;align-items:center;gap:10px;flex:1;min-width:240px}
.pd-search input{flex:1;font:inherit;font-size:1rem;padding:11px 14px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--charcoal)}
.pd-search input:focus{outline:2px solid var(--soo-red-600);outline-offset:1px}
.pd-search .cnt{font-size:.88rem;color:var(--text-mute);white-space:nowrap}
.pd-cats{display:flex;flex-wrap:wrap;gap:4px 18px}
.pd-cats button{font:inherit;font-size:.98rem;font-weight:600;color:var(--ink-soft);background:none;border:none;padding:8px 2px;cursor:pointer;border-bottom:2px solid transparent;transition:.15s}
.pd-cats button:hover{color:var(--charcoal)}
.pd-cats button.on{color:var(--soo-red-800);border-bottom-color:var(--soo-red-700)}
.pd-cart-link{margin-left:auto;font-weight:700;color:var(--charcoal);white-space:nowrap}
.pd-cart-link b{color:var(--soo-red-800)}

/* ---------- 상품 그리드 ---------- */
.pd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 24px}
.pd-grid .pd-card{display:flex;flex-direction:column;color:inherit}
.pd-card .ph{background:var(--soo-tint-2);border-radius:8px;overflow:hidden;aspect-ratio:1/1}
.pd-card .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.pd-card:hover .ph img{transform:scale(1.03)}
.pd-card .cat{font-size:.8rem;color:var(--text-mute);margin-top:12px}
.pd-card h3{font-size:1.1rem;font-weight:750;letter-spacing:-.02em;line-height:1.35;margin-top:4px;color:var(--charcoal)}
.pd-card .desc{font-size:.9rem;color:var(--ink-soft);line-height:1.55;margin-top:5px}
.pd-card .price{font-size:1.02rem;font-weight:700;color:var(--charcoal);margin-top:9px;font-variant-numeric:tabular-nums}
.pd-card .price .from{font-size:.8rem;font-weight:500;color:var(--text-mute);margin-right:4px}
.pd-card .price.ask{font-weight:600;color:var(--ink-soft)}
.pd-card .note{font-size:.8rem;color:var(--text-mute);margin-top:3px}
.pd-grid-sec{margin-top:44px}
.pd-grid-sec h2{font-size:1.35rem;letter-spacing:-.02em;margin-bottom:6px}
.pd-grid-sec > p{font-size:.95rem;color:var(--text-soft);margin-bottom:18px;max-width:720px}
.pd-empty{padding:40px 0;color:var(--text-mute)}
@media(max-width:1100px){.pd-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.pd-grid{grid-template-columns:repeat(2,1fr);gap:26px 14px}.pd-card h3{font-size:1rem}.pd-tools{gap:12px}.pd-cart-link{margin-left:0;width:100%}}
@media(max-width:340px){.pd-grid{grid-template-columns:1fr}}

/* ---------- 상세 상단: 사진 + 구매 패널 ---------- */
.pd-top{display:grid;grid-template-columns:54fr 46fr;gap:clamp(28px,4vw,64px);align-items:start}
.pd-main-ph{background:var(--soo-tint-2);border-radius:10px;overflow:hidden;aspect-ratio:1/1}
.pd-main-ph img{width:100%;height:100%;object-fit:cover;display:block}
.pd-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.pd-thumbs button{background:var(--soo-tint-2);border:2px solid transparent;border-radius:6px;overflow:hidden;padding:0;cursor:pointer;aspect-ratio:1/1}
.pd-thumbs button.on{border-color:var(--soo-red-700)}
.pd-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.pd-buy h1{font-size:clamp(1.7rem,2.6vw,2.2rem);letter-spacing:-.03em;line-height:1.25;margin:4px 0 8px}
.pd-buy .lede{font-size:1.02rem;color:var(--ink-soft);line-height:1.7}
.pd-specs{list-style:none;margin:18px 0 0;border-top:1px solid var(--line)}
.pd-specs li{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:.95rem;line-height:1.55;color:var(--ink-soft)}
.pd-specs li b{color:var(--charcoal);font-weight:700}
.pd-opts{margin-top:18px}
.pd-opts .lbl{font-size:.85rem;font-weight:700;color:var(--text-mute);margin-bottom:8px}
.pd-opts label{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:6px;margin-bottom:8px;cursor:pointer;font-size:1rem}
.pd-opts label:has(input:checked){border-color:var(--charcoal);background:#fff}
.pd-opts label input{margin-right:10px}
.pd-opts label .amt{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pd-qty{display:flex;align-items:center;gap:0;margin-top:14px}
.pd-qty .lbl{font-size:.85rem;font-weight:700;color:var(--text-mute);margin-right:14px}
.pd-qty button{width:38px;height:38px;border:1px solid var(--line);background:#fff;font-size:1.1rem;cursor:pointer;color:var(--charcoal)}
.pd-qty button:first-of-type{border-radius:6px 0 0 6px}.pd-qty button:last-of-type{border-radius:0 6px 6px 0}
.pd-qty input{width:56px;height:38px;border:1px solid var(--line);border-left:none;border-right:none;text-align:center;font:inherit;font-size:1rem}
.pd-sum{display:flex;justify-content:space-between;align-items:baseline;margin-top:18px;padding-top:14px;border-top:2px solid var(--charcoal)}
.pd-sum .lbl{font-size:.9rem;color:var(--text-mute)}
.pd-sum .amt{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pd-sum .amt.ask{font-size:1.1rem;font-weight:700;color:var(--ink-soft)}
.pd-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.pd-cta button,.pd-cta a{font:inherit;font-size:1rem;font-weight:700;padding:15px 12px;border-radius:6px;text-align:center;cursor:pointer;border:1px solid var(--charcoal);transition:.15s}
.pd-cta .add{background:#fff;color:var(--charcoal)}
.pd-cta .add:hover{background:var(--cream)}
.pd-cta .go{background:var(--charcoal);color:#fff}
.pd-cta .go:hover{background:var(--soo-red-900)}
.pd-cta .added{grid-column:1/-1;font-size:.9rem;color:var(--soo-red-800);font-weight:600;text-align:center;min-height:1.2em}
.pd-rx{font-size:.88rem;color:var(--text-mute);line-height:1.6;margin-top:12px}
.pd-avail{font-size:.9rem;color:var(--ink-soft);line-height:1.6;margin-top:10px;padding:10px 12px;background:var(--soo-tint);border-radius:6px}
@media(max-width:860px){.pd-top{grid-template-columns:1fr;gap:22px}}

/* ---------- 상세 본문 ---------- */
.pd-prose{max-width:820px}
.pd-prose p{font-size:1.06rem;color:var(--ink-soft);line-height:1.9;margin-bottom:18px}
.pd-prose p:last-child{margin-bottom:0}
.pd-prose strong{color:var(--charcoal)}
.pd-comp{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px;border-top:1px solid var(--line);max-width:900px}
.pd-comp div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line-soft);font-size:.98rem}
.pd-comp div span:first-child{color:var(--charcoal);font-weight:600}
.pd-comp div span:last-child{color:var(--ink-soft);font-variant-numeric:tabular-nums;text-align:right}
.pd-comp.wide{grid-template-columns:1fr 1fr}
.pd-comp.wide div span:last-child{text-align:left;flex:1}
@media(max-width:900px){.pd-comp{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pd-comp,.pd-comp.wide{grid-template-columns:1fr}}
.pd-table-note{font-size:.88rem;color:var(--text-mute);line-height:1.65;margin-top:12px;max-width:820px}
.pd-caut{list-style:none;max-width:860px;border-top:1px solid var(--line)}
.pd-caut li{padding:14px 4px 14px 22px;border-bottom:1px solid var(--line-soft);font-size:1rem;color:var(--ink-soft);line-height:1.75;position:relative}
.pd-caut li::before{content:"—";position:absolute;left:0;top:14px;color:var(--soo-red-600)}
.pd-consult{display:grid;grid-template-columns:1fr 1fr;gap:28px 64px;align-items:start}
.pd-consult h4{font-size:1.12rem;margin-bottom:12px}
.pd-consult ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.pd-consult li{display:flex;gap:10px;align-items:baseline;font-size:1rem;color:var(--ink-soft);line-height:1.65}
.pd-consult li::before{content:"□";flex:none;color:var(--soo-red-600);font-size:.9em}
.pd-order{background:var(--soo-tint);border-radius:8px;padding:22px 24px}
.pd-order p{font-size:.98rem;color:var(--ink-soft);line-height:1.75;margin-bottom:10px}
.pd-order .tel{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:var(--charcoal);display:block;margin:4px 0 8px}
.pd-order .kakao{font-weight:700;color:var(--soo-red-800)}
@media(max-width:760px){.pd-consult{grid-template-columns:1fr}}
.pd-guide{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 4px;max-width:900px}
.pd-guide .k{font-size:.8rem;font-weight:700;color:var(--soo-red-700);margin-bottom:4px}
.pd-guide .t{font-size:1.12rem;font-weight:700;color:var(--charcoal);line-height:1.5}
.pd-guide .go{flex:none;font-weight:700;color:var(--soo-red-800);white-space:nowrap}
@media(max-width:560px){.pd-guide{flex-direction:column;align-items:flex-start}}
.pd-rel{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 20px}
.pd-rel a{color:inherit}
.pd-rel .ph{background:var(--soo-tint-2);border-radius:8px;overflow:hidden;aspect-ratio:1/1}
.pd-rel img{width:100%;height:100%;object-fit:cover;display:block}
.pd-rel h4{font-size:.98rem;margin-top:10px;line-height:1.4}
.pd-rel .p{font-size:.88rem;color:var(--ink-soft);margin-top:3px}
@media(max-width:760px){.pd-rel{grid-template-columns:repeat(2,1fr)}}

/* ---------- 패밀리(공통 설명) 페이지의 SKU 목록 ---------- */
.pd-fam-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px 18px;margin-top:22px}

/* ---------- 장바구니 ---------- */
.ct-table{width:100%;border-collapse:collapse;border-top:2px solid var(--charcoal)}
.ct-table th{font-size:.82rem;font-weight:700;color:var(--text-mute);text-align:left;padding:12px 8px 12px 0;border-bottom:1px solid var(--line)}
.ct-table td{padding:16px 8px 16px 0;border-bottom:1px solid var(--line-soft);vertical-align:middle;font-size:.98rem}
.ct-item{display:flex;gap:14px;align-items:center}
.ct-item img{width:68px;height:68px;object-fit:cover;border-radius:6px;background:var(--soo-tint-2);flex:none}
.ct-item .nm{font-weight:700;color:var(--charcoal);line-height:1.35}
.ct-item .op{font-size:.86rem;color:var(--text-mute);margin-top:3px}
.ct-item .rx{font-size:.8rem;color:var(--soo-red-700);margin-top:3px}
.ct-qty{display:inline-flex;align-items:center}
.ct-qty button{width:32px;height:32px;border:1px solid var(--line);background:#fff;cursor:pointer;color:var(--charcoal)}
.ct-qty button:first-child{border-radius:5px 0 0 5px}.ct-qty button:last-child{border-radius:0 5px 5px 0}
.ct-qty span{min-width:40px;text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);height:32px;line-height:32px;font-variant-numeric:tabular-nums}
.ct-amt{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.ct-del{font:inherit;font-size:.85rem;color:var(--text-mute);background:none;border:none;cursor:pointer;text-decoration:underline;padding:4px}
.ct-sum{display:grid;grid-template-columns:1fr auto;gap:8px 32px;max-width:520px;margin:26px 0 0 auto;font-size:1rem}
.ct-sum .big{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;border-top:2px solid var(--charcoal);padding-top:12px}
.ct-sum .big-l{border-top:2px solid var(--charcoal);padding-top:12px;font-weight:700;align-self:end}
.ct-sum .mute{font-size:.86rem;color:var(--text-mute);grid-column:1/-1;text-align:right}
.ct-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:22px}
.ct-actions a,.ct-actions button{font:inherit;font-size:1rem;font-weight:700;padding:14px 22px;border-radius:6px;border:1px solid var(--charcoal);cursor:pointer;text-align:center}
.ct-actions .pri{background:var(--charcoal);color:#fff}
.ct-actions .sec{background:#fff;color:var(--charcoal)}
.ct-actions .clear{background:none;border-color:var(--line);color:var(--text-mute)}
.ct-empty{padding:48px 0;text-align:center;color:var(--text-mute)}
.ct-empty a{font-weight:700;color:var(--soo-red-800)}
@media(max-width:700px){
  .ct-table thead{display:none}
  .ct-table,.ct-table tbody,.ct-table tr,.ct-table td{display:block;width:100%}
  .ct-table tr{border-bottom:1px solid var(--line);padding:12px 0}
  .ct-table td{border:none;padding:5px 0}
  .ct-row-tail{display:flex;justify-content:space-between;align-items:center}
  .ct-sum{margin-left:0;max-width:none}
  .ct-actions a,.ct-actions button{flex:1}
}

/* ---------- 주문·처방 신청 ---------- */
.rq-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px 56px;align-items:start}
.rq-form label{display:block;font-size:.9rem;font-weight:700;color:var(--charcoal);margin:16px 0 6px}
.rq-form input,.rq-form textarea,.rq-form select{width:100%;font:inherit;font-size:1rem;padding:11px 13px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--charcoal)}
.rq-form textarea{min-height:110px;resize:vertical}
.rq-form .hint{font-size:.84rem;color:var(--text-mute);margin-top:6px;line-height:1.55}
.rq-form .chk{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;font-weight:500;color:var(--ink-soft);line-height:1.6;margin-top:18px}
.rq-form .chk input{width:auto;margin-top:5px}
.rq-summary{background:var(--soo-tint);border-radius:8px;padding:22px 24px}
.rq-summary h3{font-size:1.1rem;margin-bottom:12px}
.rq-summary pre{white-space:pre-wrap;font:inherit;font-size:.95rem;line-height:1.7;color:var(--charcoal);background:#fff;border:1px solid var(--line);border-radius:6px;padding:16px;max-height:420px;overflow:auto}
.rq-send{display:grid;gap:10px;margin-top:16px}
.rq-send a,.rq-send button{font:inherit;font-size:1rem;font-weight:700;padding:14px 16px;border-radius:6px;border:1px solid var(--charcoal);cursor:pointer;text-align:center;display:block}
.rq-send .pri{background:var(--charcoal);color:#fff}
.rq-send .sec{background:#fff;color:var(--charcoal)}
.rq-send .st{font-size:.88rem;color:var(--soo-red-800);font-weight:600;text-align:center;min-height:1.2em}
.rq-steps{list-style:none;border-top:1px solid var(--line);max-width:760px;margin-top:8px}
.rq-steps li{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-soft);font-size:1rem;line-height:1.65;color:var(--ink-soft)}
.rq-steps li b{color:var(--soo-red-700)}
.rq-legal{font-size:.88rem;color:var(--text-mute);line-height:1.7;max-width:820px;margin-top:22px}
@media(max-width:860px){.rq-grid{grid-template-columns:1fr}}

/* 세로형 패키지 사진(프리미엄 파우치·린디톡스 박스)은 잘라내지 않고 여백을 두고 전체가 보이게 */
.pd-card .ph.contain img,.pd-main-ph.contain img,.pd-rel .ph.contain img{object-fit:contain;padding:20px;box-sizing:border-box;background:#f4f1ec}
@media(max-width:760px){.pd-card .ph.contain img{padding:14px}}