/**
 * 파일명: assets/css/product-page.css
 * 위치: /assets/css/
 * 기능: 상품 상세(product.php) 전용 스타일 — DS03 팔레트 통일 + 상단바 네비 통일
 *
 * @version   1.0.0
 * @updated   2026-07-28
 * @standalone 원천 고유 디자인이다 — panchok/zengift 로 복사하지 않는다.
 *             팔레트 출처: ~/OneDrive/WEB/Projects/docs/design/design_system_03-dark-mono-clean.md
 *             홈·허브·세부 카테고리·순위·안내 페이지와 같은 팔레트·컴포넌트 패턴을 재사용한다.
 * @changelog
 *   1.0.0 (2026-07-28) 최초 작성 — product.php 를 공용(gift 세트)에서 해제하고 독자 디자인 적용.
 *                      기존 인라인 <style>(teal 액센트 + 오렌지/레드 그라데이션 CTA)을 DS03 무채색
 *                      팔레트로 교체(그라데이션 제거 원칙), 상단 자체 제작 네비(.pd-topbar)를
 *                      site_topbar.php 공용 네비로 교체(inquiry.php 등 안내 6P와 동일 상단바).
 *                      클래스명(pd-*)은 변경 범위 최소화를 위해 유지, 색상 변수만 재정의.
 */

body.product-ds03 {
    --color-bg: #fbfbfc;
    --color-surface: #ffffff;
    --color-dot: #dcdde3;
    --color-accent: #111317;
    --color-accent-dark: #000000;
    --color-on-accent: #ffffff;
    --color-link: #2563eb;
    --color-text: #0c0d10;
    --color-text-muted: #71757e;
    --color-border: #d4d6dd;
    --color-success: #16a34a;
    --shadow: 0 1px 2px rgba(16, 18, 24, .04), 0 6px 24px rgba(16, 18, 24, .05);
    --radius: 16px;

    background-color: var(--color-bg);
    background-image: radial-gradient(var(--color-dot) 1px, transparent 1px);
    background-size: 22px 22px;
    background-position: -11px -11px;
    color: var(--color-text);
    word-break: keep-all;
}

@media (prefers-color-scheme: dark) {
    body.product-ds03 {
        --color-bg: #0d0d0d;
        --color-surface: #1a1a1a;
        --color-dot: #232326;
        --color-accent: #f0f0f0;
        --color-accent-dark: #ffffff;
        --color-on-accent: #111317;
        --color-text: #e0e0e0;
        --color-text-muted: #888888;
        --color-border: #333333;
        --color-link: #60a5fa;
        --color-success: #22c55e;
        --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 24px rgba(0, 0, 0, .4);
    }
}

/* ===== 상단 바 (site_topbar.php — 안내 6P와 동일 컴포넌트, 이 파일에도 독립 정의) ===== */
.site-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255, 255, 255, .8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-border);
}
@media (prefers-color-scheme: dark) {
    .site-topbar { background: rgba(26, 26, 26, .8); }
}
.site-topbar .container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-top: .7rem;
    padding-bottom: .7rem;
}
.topbar-brand {
    font-weight: 800;
    font-size: 15px;
    color: var(--color-text);
    text-decoration: none;
    flex-shrink: 0;
}
.topbar-links {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.topbar-links::-webkit-scrollbar { display: none; }
.topbar-links a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.topbar-links a:hover,
.topbar-links a.active {
    background: color-mix(in srgb, var(--color-link) 8%, transparent);
    color: var(--color-link);
}

/* ===== 레이아웃 폭 (index 와 동일 반응형 폭) ===== */
.pd-wrap{ width:100%; margin-left:auto; margin-right:auto; padding-left:.75rem; padding-right:.75rem; padding-bottom:2rem; }
@media (min-width:576px){ .pd-wrap{ max-width:540px; } }
@media (min-width:768px){ .pd-wrap{ max-width:720px; } }
@media (min-width:992px){ .pd-wrap{ max-width:960px; } }
@media (min-width:1200px){ .pd-wrap{ max-width:1140px; } }
@media (min-width:1400px){ .pd-wrap{ max-width:1320px; } }

/* ===== 브레드크럼 ===== */
.pd-crumb{ font-size:.85rem; color:var(--color-text-muted); padding:.85rem 0; margin-bottom:1.1rem; border-bottom:1px solid var(--color-border); }
.pd-crumb a{ color:var(--color-text-muted); text-decoration:none; }
.pd-crumb a:hover{ color:var(--color-link); }
.pd-crumb .sep{ margin:0 .45rem; color:var(--color-text-muted); }
.pd-crumb [aria-current="page"]{ color:var(--color-text); font-weight:600; }

/* ===== 히어로 ===== */
.pd-hero{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; display:grid; grid-template-columns:minmax(0,44%) minmax(0,56%); }
.pd-hero-media{ background:var(--color-bg); display:flex; align-items:center; justify-content:center; padding:1.5rem; border-right:1px solid var(--color-border); }
.pd-hero-media img{ width:100%; height:auto; max-height:420px; object-fit:contain; border-radius:10px; }
.pd-hero-media .noimg{ color:var(--color-text-muted); font-size:4rem; }
.pd-hero-body{ padding:1.8rem; display:flex; flex-direction:column; }
.pd-chip{ align-self:flex-start; background:color-mix(in srgb, var(--color-link) 8%, transparent); color:var(--color-link); font-weight:700; font-size:.8rem; padding:.28rem .7rem; border-radius:999px; text-decoration:none; margin-bottom:.8rem; }
.pd-title{ font-size:1.5rem; line-height:1.35; font-weight:800; color:var(--color-text); letter-spacing:-.01em; margin:0 0 1.2rem; }
.pd-stats{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.4rem; }
.pd-stat{ flex:1 1 auto; min-width:120px; background:var(--color-bg); border:1px solid var(--color-border); border-radius:10px; padding:.7rem .85rem; }
.pd-stat .k{ display:block; font-size:.75rem; color:var(--color-text-muted); margin-bottom:.15rem; }
.pd-stat .v{ display:block; font-size:1rem; font-weight:700; color:var(--color-text); }
.pd-buy{ margin-top:auto; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:800; font-size:1.05rem; padding:.95rem 1.4rem; border-radius:999px; color:var(--color-on-accent); text-decoration:none; background:var(--color-accent); transition:background .15s ease; }
.pd-buy:hover{ background:var(--color-accent-dark); color:var(--color-on-accent); }
.pd-buy-note{ text-align:center; font-size:.8rem; color:var(--color-text-muted); margin:.6rem 0 0; }

/* ===== 섹션 카드 ===== */
.pd-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.6rem 1.7rem; margin-top:1.2rem; }
.pd-h2{ display:flex; align-items:center; gap:.6rem; font-size:1.2rem; font-weight:800; color:var(--color-text); margin:0 0 1.1rem; letter-spacing:-.01em; }
.pd-h2 .ic{ width:34px; height:34px; flex:0 0 34px; border-radius:9px; background:color-mix(in srgb, var(--color-link) 8%, transparent); color:var(--color-link); display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem; }
.pd-sub{ font-size:.85rem; color:var(--color-text-muted); margin:-.5rem 0 1rem; }

/* ===== 요약 ===== */
.pd-summary{ background:color-mix(in srgb, var(--color-link) 6%, transparent); border:1px solid color-mix(in srgb, var(--color-link) 20%, transparent); border-left:4px solid var(--color-link); border-radius:12px; padding:1.1rem 1.3rem; font-size:1.05rem; line-height:1.7; color:var(--color-text); font-weight:500; margin-top:1.2rem; }
.pd-summary i{ color:var(--color-link); margin-right:.3rem; }

/* ===== 상품 소개 본문 ===== */
.pd-desc{ line-height:1.95; color:var(--color-text); font-size:1rem; }
.pd-desc p{ margin:0 0 1rem; }
.pd-desc p:last-child{ margin-bottom:0; }

/* ===== 규격/판매이력 테이블 ===== */
.pd-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:.95rem; }
.pd-table th,.pd-table td{ padding:.75rem .9rem; border-bottom:1px solid var(--color-border); text-align:left; vertical-align:middle; }
.pd-table tr:last-child th,.pd-table tr:last-child td{ border-bottom:0; }
.spec-table th{ width:34%; background:var(--color-bg); color:var(--color-text-muted); font-weight:600; border-radius:0; }
.spec-table td{ color:var(--color-text); font-weight:500; }
.sales-table thead th{ background:var(--color-bg); color:var(--color-text-muted); font-weight:700; font-size:.8rem; border-bottom:2px solid var(--color-accent); }
.sales-table tbody td{ color:var(--color-text); }
.sales-table tbody td:last-child{ font-weight:700; }
.sales-table tbody tr:hover{ background:var(--color-bg); }
.pd-note{ font-size:.8rem; color:var(--color-text-muted); margin:.7rem 0 0; }

/* ===== 주요 특징 ===== */
.feat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.feat-item{ display:flex; gap:.6rem; padding:.85rem 1rem; background:var(--color-bg); border:1px solid var(--color-border); border-radius:10px; }
.feat-item i{ color:var(--color-link); font-size:1.05rem; margin-top:.1rem; }
.feat-item .k{ font-weight:700; color:var(--color-text); display:block; margin-bottom:.15rem; }
.feat-item .t{ font-size:.9rem; color:var(--color-text-muted); }

/* ===== 활용 ===== */
.use-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }
.use-card{ background:var(--color-bg); border:1px solid var(--color-border); border-radius:12px; padding:1.1rem; text-align:left; }
.use-card .ic{ width:40px; height:40px; border-radius:10px; background:var(--color-surface); border:1px solid var(--color-border); display:flex; align-items:center; justify-content:center; color:var(--color-link); font-size:1.2rem; margin-bottom:.7rem; }
.use-card .h{ font-weight:700; color:var(--color-text); margin-bottom:.3rem; font-size:.95rem; }
.use-card .t{ font-size:.85rem; color:var(--color-text-muted); line-height:1.55; }

/* ===== 추천 대상 ===== */
.tgt-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.tgt-item{ background:var(--color-bg); border:1px solid var(--color-border); border-radius:12px; padding:1.1rem; }
.tgt-item .h{ font-weight:700; color:var(--color-text); margin-bottom:.35rem; display:flex; align-items:center; gap:.4rem; }
.tgt-item .h i{ color:var(--color-link); }
.tgt-item .t{ font-size:.9rem; color:var(--color-text-muted); line-height:1.6; }

/* ===== 주문 전 확인 ===== */
.guide-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.guide-card{ display:flex; gap:.9rem; background:var(--color-bg); border:1px solid var(--color-border); border-radius:12px; padding:1.1rem; }
.guide-n{ flex:0 0 30px; height:30px; border-radius:50%; background:var(--color-accent); color:var(--color-on-accent); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.9rem; }
.guide-card .h{ font-weight:700; color:var(--color-text); margin-bottom:.3rem; }
.guide-card .t{ font-size:.9rem; color:var(--color-text-muted); line-height:1.6; }

/* ===== FAQ ===== */
.faq-item{ padding:1.1rem 0; border-bottom:1px solid var(--color-border); }
.faq-item:first-child{ padding-top:0; }
.faq-item:last-child{ border-bottom:0; padding-bottom:0; }
.faq-item .q{ font-weight:700; color:var(--color-text); margin-bottom:.5rem; display:flex; gap:.5rem; }
.faq-item .q .badge-q{ color:var(--color-link); font-weight:800; }
.faq-item .a{ color:var(--color-text-muted); line-height:1.7; padding-left:1.4rem; }

/* ===== 관련 상품 ===== */
.rel-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; }
.rel-card{ display:block; background:var(--color-surface); border:1px solid var(--color-border); border-radius:12px; overflow:hidden; text-decoration:none; transition:border-color .15s ease; }
.rel-card:hover{ border-color:#c7c9d0; }
.rel-thumb{ aspect-ratio:1/1; background:var(--color-bg); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.rel-thumb img{ width:100%; height:100%; object-fit:contain; }
.rel-thumb .noimg{ color:var(--color-text-muted); font-size:1.6rem; }
.rel-body{ padding:.7rem .8rem; }
.rel-name{ font-size:.85rem; font-weight:700; color:var(--color-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ===== AI 안내 + 하단 액션 ===== */
.pd-ai-note{ font-size:.82rem; color:var(--color-text-muted); margin-top:1.2rem; display:flex; align-items:center; gap:.4rem; }
.pd-foot-actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem; }
.pd-foot-actions a{ font-size:.9rem; font-weight:600; color:var(--color-text-muted); background:var(--color-surface); border:1px solid var(--color-border); border-radius:10px; padding:.6rem 1rem; text-decoration:none; }
.pd-foot-actions a:hover{ color:var(--color-link); border-color:color-mix(in srgb, var(--color-link) 30%, transparent); }

/* ===== 하단 고정 CTA 배너 ===== */
.cta-spacer{ height:84px; background:var(--color-accent); }
.floating-cta{ position:fixed; left:0; right:0; bottom:0; z-index:1030; background:var(--color-accent); border-top:1px solid color-mix(in srgb, var(--color-on-accent) 12%, transparent); box-shadow:0 -6px 24px rgba(0,0,0,.18); transform:translateY(0); transition:transform .3s ease; }
.floating-cta.is-hidden{ transform:translateY(120%); }
.floating-cta .fc-inner{ max-width:960px; margin:0 auto; padding:.85rem 1rem; display:flex; align-items:center; gap:1rem; }
.floating-cta .fc-info{ min-width:0; flex:1; }
.floating-cta .fc-name{ font-weight:700; color:var(--color-on-accent); font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.floating-cta .fc-sub{ color:color-mix(in srgb, var(--color-on-accent) 65%, transparent); font-size:.82rem; }
.floating-cta .fc-btn{ flex:0 0 auto; font-weight:800; padding:.85rem 1.7rem; border-radius:999px; background:var(--color-on-accent); color:var(--color-accent) !important; border:0; text-decoration:none; transition:opacity .15s ease; white-space:nowrap; }
.floating-cta .fc-btn:hover{ opacity:.85; text-decoration:none; }
.floating-cta .fc-close{ flex:0 0 auto; background:none; border:0; color:color-mix(in srgb, var(--color-on-accent) 55%, transparent); font-size:1.3rem; line-height:1; padding:.3rem; }
.floating-cta .fc-close:hover{ color:var(--color-on-accent); }

/* ===== 반응형 ===== */
@media (max-width:767.98px){
    .pd-hero{ grid-template-columns:1fr; }
    .pd-hero-media{ border-right:0; border-bottom:1px solid var(--color-border); }
    .use-grid{ grid-template-columns:1fr 1fr; }
    .rel-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:575.98px){
    .pd-card{ padding:1.2rem 1.1rem; }
    .pd-title{ font-size:1.3rem; }
    .feat-grid,.tgt-grid,.guide-grid{ grid-template-columns:1fr; }
    .cta-spacer{ height:104px; }
    .floating-cta .fc-inner{ flex-wrap:wrap; gap:.4rem .8rem; padding:.6rem .85rem; }
    .floating-cta .fc-info{ flex:1 1 100%; }
    .floating-cta .fc-name{ font-size:.92rem; white-space:normal; }
    .floating-cta .fc-btn{ flex:1 1 auto; text-align:center; padding:.75rem 1rem; }
    .site-topbar .container{ gap:.75rem; }
}