/* ============================================================
   KD 국내배송 상품상세 — V2 SHOP 상세와 동일 디자인 시스템 (2026-07-27)
   토큰: item.css 와 동일 (--black #111 / --muted #858585 / --line #ececea /
         --soft #f6f6f4, Pretendard/Noto Sans KR, radius 8~16, 버튼 h49)
   Mobile First: 기본 = 모바일 1열(760px 중앙), ≥1024px = 2컬럼.
   ============================================================ */
:root{
    --black:#111; --muted:#858585; --line:#ececea; --soft:#f6f6f4;
    --green:#137a3d; --green-bg:#e6f4ea; --accent:#4b48d6;
    --safe:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:#fff;color:#171717;
    font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Noto Sans KR",sans-serif;font-size:14px}
a{color:inherit;text-decoration:none}
img{max-width:100%}
button{font-family:inherit}

/* ── 상단 바 (V2 앱형 헤더) ── */
.kdv-top{position:sticky;top:0;z-index:120;display:flex;align-items:center;gap:8px;height:52px;
    padding:0 12px;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.kdv-top .bk{display:flex;align-items:center;justify-content:center;width:36px;height:36px;
    border:0;background:none;font-size:22px;font-weight:700;cursor:pointer;border-radius:10px}
.kdv-top .bk:hover{background:var(--soft)}
.kdv-top h1{flex:1;margin:0;font-size:14.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kdv-top .hm{font-size:12.5px;font-weight:800;padding:8px 10px;border-radius:10px}
.kdv-top .hm:hover{background:var(--soft)}

/* ── 레이아웃 ── */
.kdv-wrap{width:100%;max-width:760px;margin:0 auto;padding-bottom:calc(84px + var(--safe))}
.kdv-topgrid{display:block}
.kdv-info{padding:16px 16px 0;display:flex;flex-direction:column;gap:14px}

/* PC 2컬럼 — 갤러리:정보, 초대형에서도 과확장 방지 */
@media (min-width:1024px){
    .kdv-wrap{max-width:1200px;padding-left:28px;padding-right:28px}
    .kdv-topgrid{display:grid;grid-template-columns:minmax(420px,560px) minmax(400px,1fr);
        gap:44px;align-items:start;padding-top:28px}
    .kdv-info{padding:0}
    .kdv-gallery{position:sticky;top:76px}
}
@media (min-width:1440px){ .kdv-topgrid{gap:56px} }

/* ── 갤러리 ── */
.kdv-gallery{min-width:0}
.kdv-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    border-radius:0;background:var(--soft)}
.kdv-track::-webkit-scrollbar{display:none}
.kdv-slide{flex:0 0 100%;scroll-snap-align:center;position:relative;aspect-ratio:1/1;
    overflow:hidden;border:0;padding:0;background:var(--soft);cursor:zoom-in}
.kdv-slide img{width:100%;height:100%;object-fit:cover;display:block;
    transition:transform .35s cubic-bezier(.2,.7,.3,1)}
@media (hover:hover) and (min-width:1024px){
    .kdv-slide:hover img{transform:scale(1.07)}
}
@media (min-width:768px){ .kdv-track{border-radius:16px} }
.kdv-dots{display:flex;justify-content:center;gap:5px;padding:10px 0 0}
.kdv-dots i{width:6px;height:6px;border-radius:99px;background:#d9d9de;transition:all .2s}
.kdv-dots i.on{width:16px;background:var(--black)}
@media (min-width:1024px){ .kdv-dots{display:none} }
.kdv-thumbs{display:flex;gap:8px;padding:10px 16px 0;overflow-x:auto;scrollbar-width:none}
.kdv-thumbs::-webkit-scrollbar{display:none}
@media (min-width:1024px){ .kdv-thumbs{padding:12px 0 0} }
.kdv-thumb{flex:0 0 auto;width:60px;height:60px;padding:0;border:2px solid transparent;border-radius:12px;
    overflow:hidden;background:var(--soft);cursor:pointer;transition:border-color .15s}
.kdv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.kdv-thumb.on{border-color:var(--black)}
.kdv-thumb:hover{border-color:#bbb}
.kdv-thumb.on:hover{border-color:var(--black)}

/* ── 카드 공통 (V2 카드 시스템) ── */
.kdv-card{border:1px solid var(--line);border-radius:16px;padding:16px;background:#fff}
.kdv-card h3{margin:0 0 10px;font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.2px}

/* ── 배지/카테고리 ── */
.kdv-crumb{font-size:11.5px;color:#9a9aa2;font-weight:700}
.kdv-crumb a:hover{color:var(--black);text-decoration:underline}
.kdv-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.kdv-badge{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 11px;border-radius:99px;
    font-size:11.5px;font-weight:800;background:var(--green-bg);color:var(--green)}
.kdv-badge.gray{background:var(--soft);color:#55575e}
.kdv-badge.red{background:#fdeaea;color:#c0392b}

/* ── 상품명/가격 ── */
.kdv-title{margin:10px 0 0;font-size:19px;font-weight:850;line-height:1.38;word-break:keep-all}
@media (min-width:1024px){ .kdv-title{font-size:clamp(20px,1.7vw,24px)} }
.kdv-price{margin-top:12px;font-size:25px;font-weight:950;letter-spacing:-.3px}
.kdv-price small{font-size:15px;font-weight:800;margin-left:1px}
@media (min-width:1024px){ .kdv-price{font-size:clamp(24px,2vw,28px)} }

/* ── 배송정보 카드 ── */
.kdv-ship{display:flex;flex-direction:column;gap:7px;font-size:13px;color:#3d3d44}
.kdv-ship .row{display:flex;gap:10px}
.kdv-ship .row b{flex:0 0 74px;font-size:12px;color:var(--muted);font-weight:800;padding-top:1px}
.kdv-ship .free{color:var(--green);font-weight:800}

/* ── 스토어 카드 ── */
.kdv-store{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;
    border:1px solid var(--line);border-radius:16px;padding:15px 16px;background:#fff;
    transition:border-color .18s,box-shadow .18s,transform .18s}
a.kdv-store:hover{border-color:#c9c8f2;box-shadow:0 8px 26px rgba(75,72,214,.10);transform:translateY(-1px)}
.kdv-store-avatar{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#1c1c22,#3a3a46);
    color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900}
.kdv-store-nm{font-size:14.5px;font-weight:850}
.kdv-store-vf{display:inline-flex;align-items:center;gap:3px;margin-top:2px;font-size:11.5px;color:var(--green);font-weight:800}
.kdv-store-stats{display:flex;gap:10px;margin-top:6px;font-size:11.5px;color:var(--muted);font-weight:700}
.kdv-store-stats b{color:#3d3d44;font-weight:850}
.kdv-store-stats .star{color:#f5a623}
.kdv-store-go{display:inline-flex;align-items:center;height:34px;padding:0 13px;border:1px solid var(--line);
    border-radius:99px;font-size:12px;font-weight:800;color:var(--accent);white-space:nowrap;transition:all .15s}
a.kdv-store:hover .kdv-store-go{border-color:var(--accent);background:#f5f5ff}

/* ── 옵션/수량 ── */
.kdv-field label{display:block;font-size:12px;font-weight:800;color:var(--muted);margin-bottom:6px}
.kdv-field select{width:100%;height:47px;border:1px solid #e0e0e6;border-radius:12px;padding:0 12px;
    font:inherit;font-weight:700;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
    appearance:none;-webkit-appearance:none}
.kdv-field select:focus{outline:2px solid var(--black);outline-offset:-1px}
.kdv-qty{display:inline-flex;align-items:center;border:1px solid #e0e0e6;border-radius:12px;overflow:hidden}
.kdv-qty button{width:44px;height:44px;border:0;background:#fff;font-size:17px;cursor:pointer;color:#3d3d44;transition:background .15s}
.kdv-qty button:hover{background:var(--soft)}
.kdv-qty input{width:54px;height:44px;border:0;text-align:center;font:inherit;font-weight:850;font-size:14px}
.kdv-stockhint{font-size:11.5px;color:var(--muted);font-weight:700;margin-left:10px}

/* ── 버튼 (V2 buy-bar 와 동일 규격: h49 · radius 8 · #111) ── */
.kdv-btn{display:flex;align-items:center;justify-content:center;height:49px;border-radius:8px;
    font-size:14px;font-weight:850;cursor:pointer;transition:transform .12s,box-shadow .18s,opacity .15s;border:0}
.kdv-btn:active{transform:scale(.985)}
.kdv-btn.line{border:1px solid var(--black);background:#fff;color:var(--black)}
.kdv-btn.line:hover{background:var(--soft);box-shadow:0 4px 14px rgba(0,0,0,.06)}
.kdv-btn.pri{background:var(--black);color:#fff}
.kdv-btn.pri:hover{box-shadow:0 6px 18px rgba(0,0,0,.22)}
.kdv-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}
.kdv-pcbtns{display:none}
@media (min-width:1024px){
    .kdv-pcbtns{display:grid;grid-template-columns:1fr 1.25fr;gap:8px}
}

/* ── 모바일 하단 Sticky 구매바 (V2 .v2-buy-bar 동일 규격) ── */
.kdv-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:500;width:100%;max-width:760px;
    display:grid;grid-template-columns:1fr 1.25fr;gap:7px;padding:8px 10px calc(8px + var(--safe));
    border-top:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.98);box-shadow:0 -4px 18px rgba(0,0,0,.07)}
@media (min-width:1024px){ .kdv-bar{display:none} }

/* ── 탭 (V2 .v2-tabs 동일: sticky 48px · 하단 인디케이터) ── */
.kdv-tabs{position:sticky;top:52px;z-index:110;display:grid;grid-template-columns:repeat(5,1fr);height:48px;
    margin-top:22px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.97);backdrop-filter:blur(12px)}
.kdv-tabs button{position:relative;border:0;background:none;color:#888;font-size:12px;font-weight:700;cursor:pointer}
.kdv-tabs button.active{color:var(--black);font-weight:900}
.kdv-tabs button.active::after{content:"";position:absolute;left:18%;right:18%;bottom:-1px;height:2px;background:var(--black);border-radius:2px}
@media (max-width:374px){ .kdv-tabs button{font-size:11px} }

/* ── 섹션 ── */
.kdv-sec{padding:26px 16px;border-bottom:8px solid var(--soft);scroll-margin-top:104px}
@media (min-width:1024px){ .kdv-sec{padding:30px 0;border-bottom-width:1px;border-color:var(--line)} }
.kdv-sechead{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.kdv-sechead h2{margin:0;font-size:16px;font-weight:900}
.kdv-sechead span{font-size:12px;color:var(--muted);font-weight:700}
.kdv-detailbody{line-height:1.7;font-size:14px}
.kdv-detailbody img{max-width:100%;height:auto;border-radius:10px}
.kdv-dimg{width:100%;height:auto;display:block;border-radius:10px;margin:0 0 10px}
.kdv-guide{font-size:13px;color:#55575e;line-height:1.85}
.kdv-guide b{color:var(--black)}
.kdv-guide .warn{color:#c0392b;font-weight:800}
.kdv-guide a{color:var(--accent);font-weight:800}

/* ── 후기 ── */
.kdv-rvtab{height:34px;padding:0 12px;border-radius:99px;border:1px solid #e0e0e6;background:#fff;
    font:inherit;font-size:12px;font-weight:800;cursor:pointer;color:#55575e;transition:all .15s}
.kdv-rvtab:hover{border-color:#bbb}
.kdv-rvtab.on{background:var(--black);border-color:var(--black);color:#fff}
.kdv-rv{border-top:1px solid #f2f2f5;padding:14px 0}
.kdv-rv-head{display:flex;align-items:center;gap:8px;font-size:12.5px}
.kdv-rv-body{margin:8px 0 0;font-size:13px;line-height:1.65;color:#3d3d44;word-break:break-word}
.kdv-rv-imgs{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.kdv-rv-imgs img{width:76px;height:76px;object-fit:cover;border-radius:9px;background:var(--soft)}
.kdv-rv-reply{margin-top:10px;background:#f8f8fb;border-radius:10px;padding:10px 12px;font-size:12.5px;color:#55575e;line-height:1.6}
.kdv-rv-reply b{color:var(--accent);font-size:11.5px}
.kdv-rvmore{width:100%;height:46px;margin-top:10px;border:1px solid #e0e0e6;border-radius:12px;background:#fff;
    font:inherit;font-size:13px;font-weight:800;cursor:pointer;transition:background .15s}
.kdv-rvmore:hover{background:var(--soft)}
.kdv-rvwrite{margin-left:auto;display:inline-flex;align-items:center;height:36px;padding:0 14px;
    border:1px solid #c9c8f2;border-radius:99px;color:var(--accent);font-weight:800;font-size:12.5px;transition:all .15s}
.kdv-rvwrite:hover{background:#f5f5ff;border-color:var(--accent)}

/* ── 상품 그리드(스토어상품/추천) — V2 카드 톤 ── */
.kdv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:768px){ .kdv-grid{grid-template-columns:repeat(4,1fr)} }
.kdv-pcard{display:block;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;
    transition:border-color .18s,box-shadow .18s,transform .18s}
.kdv-pcard:hover{border-color:#d5d5dc;box-shadow:0 10px 26px rgba(0,0,0,.08);transform:translateY(-2px)}
.kdv-pcard img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--soft);display:block}
.kdv-pcard .nm{display:block;padding:9px 11px 0;font-size:12.5px;font-weight:700;line-height:1.4;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#3d3d44}
.kdv-pcard b{display:block;padding:3px 11px 11px;font-size:14px;font-weight:900}

/* ── 뷰어(확대보기) ── */
.kdv-viewer{position:fixed;inset:0;z-index:900;background:rgba(10,10,14,.92);display:none;
    align-items:center;justify-content:center}
.kdv-viewer.open{display:flex}
.kdv-viewer img{max-width:96vw;max-height:88vh;object-fit:contain;border-radius:8px;
    transition:transform .25s;cursor:zoom-in}
.kdv-viewer img.zoom{transform:scale(1.9);cursor:zoom-out}
.kdv-viewer .x{position:absolute;top:14px;right:16px;width:40px;height:40px;border:0;border-radius:99px;
    background:rgba(255,255,255,.14);color:#fff;font-size:20px;cursor:pointer}
.kdv-viewer .nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;
    border-radius:99px;background:rgba(255,255,255,.14);color:#fff;font-size:22px;cursor:pointer}
.kdv-viewer .nav:hover,.kdv-viewer .x:hover{background:rgba(255,255,255,.3)}
.kdv-viewer .prev{left:12px}.kdv-viewer .next{right:12px}

/* ── 토스트 ── */
.kdv-toast{position:fixed;left:50%;bottom:calc(92px + var(--safe));transform:translateX(-50%);
    background:var(--black);color:#fff;padding:11px 18px;border-radius:99px;font-weight:700;font-size:13px;
    opacity:0;transition:opacity .25s;z-index:990;pointer-events:none;white-space:nowrap}
.kdv-toast.show{opacity:1}

/* 초소형(320~360) 보정 — 겹침/잘림 방지 */
@media (max-width:359px){
    .kdv-info{padding:12px 12px 0}
    .kdv-sec{padding:22px 12px}
    .kdv-title{font-size:17px}
    .kdv-price{font-size:22px}
    .kdv-store{grid-template-columns:44px 1fr;gap:10px}
    .kdv-store-avatar{width:44px;height:44px;border-radius:12px;font-size:17px}
    .kdv-store-go{display:none}
}