/* ─────────────────────────────────────────────────────────────
 * products.css — 제품 카탈로그(/products/) 스타일 (class prefix: .pp-)
 * theme.css 토큰 사용. 과학기자재 카탈로그 톤.
 * ⚠️ preview/product.html 의 인라인 <style> 와 항상 동일하게 유지할 것.
 * ───────────────────────────────────────────────────────────── */

/* Hero */
.pp-hero { background: var(--c-fg-1); color:#fff; padding: var(--s-16) 0 var(--s-20); position:relative; overflow:hidden; }
.pp-hero::before { content:""; position:absolute; inset:0; background: radial-gradient(800px 400px at 85% 20%, rgba(0,66,130,0.55), transparent 60%), radial-gradient(600px 300px at 10% 90%, rgba(0,66,130,0.35), transparent 60%); pointer-events:none; }
.pp-hero-inner { position:relative; display:grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--s-12); align-items:center; }
.pp-hero-eyebrow { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border:1px solid rgba(255,255,255,0.24); background:rgba(255,255,255,0.06); color:#cbd1d6; border-radius:var(--r-pill); font-size:13px; font-weight:600; margin-bottom:var(--s-5); }
.pp-hero-eyebrow [data-lucide]{ width:14px; height:14px; }
.pp-hero h1 { font-size:58px; line-height:1.08; letter-spacing:-0.03em; color:#fff; font-weight:800; margin-bottom:var(--s-5); }
.pp-hero h1 em { font-style:normal; color:#7ab0e0; font-weight:900; }
.pp-hero h1 .ln { display:block; }
.pp-hero-sub { font-size:19px; color:#cbd1d6; max-width:560px; margin-bottom:var(--s-8); line-height:1.65; }
.pp-hero-actions { display:flex; gap:var(--s-3); flex-wrap:wrap; margin-bottom:var(--s-10); }
.pp-hero .btn--primary{ background:#fff; color:var(--c-primary); }
.pp-hero .btn--primary:hover{ background:#e6eef7; color:var(--c-primary); }
.pp-hero .btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,0.35); }
.pp-hero .btn--ghost:hover{ background:rgba(255,255,255,0.08); color:#fff; border-color:rgba(255,255,255,0.6); }
.pp-hero-meta{ display:flex; gap:var(--s-8); padding-top:var(--s-6); border-top:1px solid rgba(255,255,255,0.14); flex-wrap:wrap; }
.pp-hero-meta strong{ display:block; font-size:26px; font-weight:800; color:#fff; letter-spacing:-0.01em; }
.pp-hero-meta span{ display:block; font-size:13px; color:#8c959f; margin-top:2px; }

.pp-hero-visual{ position:relative; min-height:480px; }
.pp-hero-card{ position:absolute; background:#fff; color:var(--c-fg-1); border-radius:var(--r-lg); box-shadow:0 20px 60px rgba(0,0,0,0.35); overflow:hidden; width:300px; }
.pp-hero-card .pp-ph{ height:200px; }
.pp-hero-card-body{ padding:var(--s-4) var(--s-5); }
.pp-hero-card .pp-hc-cat{ display:block; font-size:11px; font-weight:700; letter-spacing:0.06em; color:var(--c-primary); margin-bottom:4px; }
.pp-hero-card .pp-hc-title{ font-size:16px; font-weight:700; margin:0; line-height:1.3; }
.pp-hero-card--a{ right:36px; top:0; z-index:3; transform:rotate(-1.5deg); }
.pp-hero-card--b{ left:0; top:152px; z-index:2; transform:rotate(3deg); width:262px; }
.pp-hero-card--b .pp-ph{ height:162px; }
.pp-hero-card--c{ right:8px; bottom:0; z-index:1; transform:rotate(-4deg); width:232px; }
.pp-hero-card--c .pp-ph{ height:138px; }
.pp-hero-badge{ position:absolute; top:-10px; left:-10px; z-index:4; background:var(--c-primary); color:#fff; padding:8px 14px; border-radius:var(--r-pill); font-size:12px; font-weight:700; letter-spacing:0.04em; box-shadow:0 6px 20px rgba(0,0,0,0.4); display:inline-flex; align-items:center; gap:6px; }
.pp-hero-badge [data-lucide]{ width:14px; height:14px; }

/* Section shell */
.pp-section{ padding:var(--s-20) 0; }
.pp-section--muted{ background:var(--c-bg); }
.pp-section--tight{ padding:var(--s-12) 0; }
.pp-section-head{ margin-bottom:var(--s-10); max-width:760px; }
.pp-section-head--center{ text-align:center; margin-left:auto; margin-right:auto; }
.pp-section-head--row{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--s-6); margin-bottom:var(--s-8); max-width:none; flex-wrap:wrap; }
.pp-kicker{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--c-primary); margin-bottom:var(--s-3); }
.pp-title{ font-size:40px; line-height:1.15; letter-spacing:-0.02em; margin-bottom:var(--s-3); font-weight:800; }
.pp-section-sub{ font-size:17px; color:var(--c-fg-3); margin:0; line-height:1.6; }
.pp-head-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* 이미지 플레이스홀더 */
.pp-ph{ position:relative; display:flex; align-items:center; justify-content:center; background-color:var(--c-surface-alt); background-image:repeating-linear-gradient(45deg, rgba(0,66,130,0.045) 0 12px, transparent 12px 24px); border-bottom:1px solid var(--c-border); }
.pp-ph-label{ font-family:var(--font-mono); font-size:11px; color:var(--c-fg-4); letter-spacing:0.04em; text-align:center; padding:0 12px; line-height:1.5; }
.pp-ph--textbook{ background-color:#eaf1f8; }
.pp-ph--creative{ background-color:#fff4e0; }
.pp-ph--steam{ background-color:#e9f6ee; }
.pp-ph--robot{ background-color:#f1eef9; }
.pp-ph-img{ width:100%; height:100%; object-fit:cover; display:block; }

/* 사업분야 */
.pp-cat-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4); }
.pp-cat-card{ display:flex; flex-direction:column; gap:var(--s-2); padding:var(--s-6); background:#fff; border:1px solid var(--c-border); border-radius:var(--r-lg); text-decoration:none; color:inherit; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.pp-cat-card:hover{ border-color:var(--c-primary); box-shadow:var(--sh-md); transform:translateY(-2px); text-decoration:none; color:inherit; }
.pp-cat-icon{ width:44px; height:44px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; background:var(--c-primary-softer); color:var(--c-primary); }
.pp-cat-icon [data-lucide]{ width:24px; height:24px; }
.pp-cat-name{ font-size:16px; font-weight:700; color:var(--c-fg-1); }
.pp-cat-desc{ font-size:13px; color:var(--c-fg-3); line-height:1.5; }
.pp-cat-count{ font-size:12px; font-weight:700; color:var(--c-primary); font-family:var(--font-mono); }

/* 상품 카드 그리드 */
.pp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-5); }
.pp-card{ position:relative; background:#fff; border:1px solid var(--c-border); border-radius:var(--r-lg); overflow:hidden; text-decoration:none; color:inherit; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; display:flex; flex-direction:column; }
.pp-card:hover{ border-color:var(--c-primary); box-shadow:var(--sh-md); transform:translateY(-2px); text-decoration:none; color:inherit; }
.pp-card .pp-ph{ aspect-ratio:1/1; }
.pp-card-badges{ position:absolute; top:10px; left:10px; display:flex; gap:4px; flex-wrap:wrap; z-index:1; }
.pp-badge{ padding:4px 8px; border-radius:var(--r-sm); font-size:10px; font-weight:700; letter-spacing:0.04em; color:#fff; }
.pp-badge--new{ background:var(--c-success); }
.pp-badge--best{ background:var(--c-warning); color:var(--c-warning-text); }
.pp-badge--sale{ background:#d23b3b; }
.pp-badge--coop{ background:var(--c-primary); }
.pp-badge--dev{ background:#5b6166; color:#fff; }
.pp-ph-dev{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:#7a6aa8; text-align:center; }
.pp-ph-dev [data-lucide]{ width:44px; height:44px; }
.pp-ph-dev span{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.04em; }
.pp-card-rank{ position:absolute; top:10px; left:10px; width:30px; height:30px; border-radius:50%; background:var(--c-fg-1); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; font-family:var(--font-mono); z-index:1; }
.pp-card-body{ padding:var(--s-4) var(--s-5); display:flex; flex-direction:column; flex:1; }
.pp-card-cat{ font-size:11px; font-weight:700; letter-spacing:0.04em; color:var(--c-primary); margin-bottom:6px; }
.pp-card-code{ font-family:var(--font-mono); font-size:11px; color:var(--c-fg-4); margin-bottom:4px; letter-spacing:0.04em; }
.pp-card-name{ font-size:15px; font-weight:700; color:var(--c-fg-1); margin-bottom:6px; line-height:1.35; }
.pp-card-desc{ font-size:13px; color:var(--c-fg-3); line-height:1.5; margin:0 0 var(--s-3); flex:1; }
.pp-price{ margin-top:auto; }
.pp-price-list{ font-size:12px; color:var(--c-fg-4); text-decoration:line-through; }
.pp-price-now{ font-size:18px; font-weight:800; color:var(--c-fg-1); display:flex; align-items:baseline; gap:6px; }
.pp-price-now em{ font-style:normal; font-size:13px; color:#d23b3b; font-weight:800; }
.pp-price-note{ font-size:11px; color:var(--c-fg-4); margin-top:3px; }

/* 공동제작 */
.pp-projects{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-6); }
.pp-project{ position:relative; background:#fff; border:1px solid var(--c-border); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; text-decoration:none; color:inherit; }
.pp-project:hover{ border-color:var(--c-primary); box-shadow:var(--sh-lg); transform:translateY(-4px); text-decoration:none; color:inherit; }
.pp-project .pp-ph{ aspect-ratio:16/10; }
.pp-project-partner{ position:absolute; top:12px; left:12px; background:rgba(255,255,255,0.92); color:var(--c-fg-1); padding:5px 12px; border-radius:var(--r-pill); font-size:12px; font-weight:700; }
.pp-project-body{ padding:var(--s-5) var(--s-6); display:flex; flex-direction:column; flex:1; }
.pp-project-cat{ font-size:11px; font-weight:700; letter-spacing:0.04em; color:var(--c-primary); margin-bottom:8px; }
.pp-project-title{ font-size:19px; font-weight:700; color:var(--c-fg-1); margin-bottom:8px; line-height:1.3; }
.pp-project-desc{ font-size:14px; color:var(--c-fg-3); line-height:1.55; margin:0 0 var(--s-4); flex:1; }
.pp-project-cta{ color:var(--c-primary); font-weight:600; font-size:14px; display:inline-flex; align-items:center; gap:6px; }
.pp-project-cta [data-lucide]{ width:16px; height:16px; }
.pp-projects--single{ display:block; }
.pp-project--feature{ display:grid; grid-template-columns: 0.95fr 1.05fr; align-items:stretch; }
.pp-project--feature .pp-ph{ aspect-ratio:auto; min-height:300px; height:100%; }
.pp-project--feature .pp-project-body{ padding:var(--s-8) var(--s-10); justify-content:center; }
.pp-project--feature .pp-project-title{ font-size:26px; }
@media (max-width:960px){ .pp-project--feature{ grid-template-columns:1fr; } .pp-project--feature .pp-ph{ min-height:220px; } }

/* 필터 칩 */
.pp-filters{ display:flex; gap:var(--s-2); flex-wrap:wrap; margin-bottom:var(--s-8); padding:6px; background:var(--c-surface-alt); border-radius:var(--r-pill); width:fit-content; }
.pp-filters button{ background:transparent; border:0; padding:8px 18px; border-radius:var(--r-pill); font-size:14px; font-weight:600; color:var(--c-fg-3); cursor:pointer; transition:all .15s ease; }
.pp-filters button:hover{ color:var(--c-fg-1); }
.pp-filters button.is-active{ background:#fff; color:var(--c-primary); box-shadow:var(--sh-sm); }

/* CTA */
.pp-cta-band{ background:var(--c-fg-1); color:#fff; border-radius:var(--r-lg); padding:var(--s-10) var(--s-12); display:grid; grid-template-columns:1fr auto; gap:var(--s-8); align-items:center; position:relative; overflow:hidden; }
.pp-cta-band::before{ content:""; position:absolute; inset:0; background:radial-gradient(600px 300px at 85% 50%, rgba(0,66,130,0.5), transparent 70%); pointer-events:none; }
.pp-cta-band > *{ position:relative; }
.pp-cta-band h3{ font-size:28px; color:#fff; margin-bottom:var(--s-2); font-weight:800; }
.pp-cta-band p{ font-size:15px; color:#a8b0b9; margin:0; }
.pp-cta-band-actions{ display:flex; gap:var(--s-3); flex-wrap:wrap; }
.pp-cta-band .btn--primary{ background:#fff; color:var(--c-primary); }
.pp-cta-band .btn--primary:hover{ background:#e6eef7; color:var(--c-primary); }
.pp-cta-band .btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,0.35); }
.pp-cta-band .btn--ghost:hover{ background:rgba(255,255,255,0.08); color:#fff; border-color:rgba(255,255,255,0.6); }

/* ─── 관리자 편집 ─── */
.pp-admin-toggle{ position:fixed; right:18px; bottom:18px; z-index:200; display:inline-flex; align-items:center; gap:8px; background:#1d2327; color:#fff; border:0; border-radius:var(--r-pill); padding:11px 18px; font-size:13px; font-weight:700; box-shadow:0 8px 24px rgba(0,0,0,.28); cursor:pointer; }
.pp-admin-toggle [data-lucide]{ width:16px; height:16px; }
.pp-admin-toggle.is-on{ background:var(--c-primary); }
.pp-sec-edit-btn{ display:none; align-items:center; gap:6px; background:var(--c-primary-softer); color:var(--c-primary); border:1px solid var(--c-primary); border-radius:var(--r-pill); padding:8px 16px; font-size:13px; font-weight:700; cursor:pointer; }
.pp-sec-edit-btn [data-lucide]{ width:15px; height:15px; }
body.is-admin .pp-sec-edit-btn{ display:inline-flex; }
.pp-edit-banner{ display:none; align-items:center; gap:8px; background:#fff7e6; border:1px solid #f0c869; color:#8a6d1a; border-radius:var(--r-md); padding:10px 14px; font-size:13px; font-weight:600; margin-bottom:var(--s-5); }
body.is-admin .pp-edit-banner{ display:flex; }
.pp-edit-banner [data-lucide]{ width:16px; height:16px; flex:none; }
.pp-card-remove{ display:none; position:absolute; top:8px; right:8px; z-index:4; width:30px; height:30px; border-radius:50%; border:0; background:#d23b3b; color:#fff; cursor:pointer; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.pp-card-remove [data-lucide]{ width:16px; height:16px; }
body.is-admin .pp-card-remove{ display:flex; }
body.is-admin .pp-card{ cursor:default; }
.pp-add-tile{ display:none; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:170px; border:2px dashed var(--c-border); border-radius:var(--r-lg); background:#fff; color:var(--c-primary); font-weight:700; font-size:14px; cursor:pointer; transition:border-color .15s ease, background .15s ease; }
.pp-add-tile:hover{ border-color:var(--c-primary); background:var(--c-primary-softer); }
.pp-add-tile [data-lucide]{ width:28px; height:28px; }
body.is-admin .pp-add-tile{ display:flex; }
.pp-edit-img-btn{ display:none; position:absolute; bottom:8px; right:8px; z-index:4; align-items:center; gap:5px; background:rgba(29,35,39,.86); color:#fff; border:0; border-radius:var(--r-pill); padding:6px 11px; font-size:11px; font-weight:700; cursor:pointer; }
.pp-edit-img-btn [data-lucide]{ width:13px; height:13px; }
body.is-admin .pp-edit-img-btn{ display:inline-flex; }
.pp-img-hint{ display:none; position:absolute; bottom:8px; left:8px; z-index:4; background:rgba(29,35,39,.72); color:#fff; border-radius:var(--r-md); padding:5px 10px; font-size:11px; font-weight:600; letter-spacing:.01em; }
body.is-admin .pp-img-hint{ display:inline-block; }
/* 섹션 노출 순서 편집 (↑/↓) — 섹션 우상단 floating */
body.is-admin section[data-sec-key]{ position:relative; }
.pp-sec-order{ display:none; position:absolute; top:14px; right:16px; z-index:5; align-items:center; gap:2px; background:var(--c-primary-softer); border:1px solid var(--c-primary); border-radius:var(--r-pill); padding:4px 8px; }
body.is-admin .pp-sec-order{ display:inline-flex; }
.pp-sec-order-label{ font-size:12px; font-weight:700; color:var(--c-primary); padding:0 6px 0 4px; }
.pp-sec-order-btn{ display:flex; align-items:center; justify-content:center; width:26px; height:26px; border:0; border-radius:50%; background:transparent; color:var(--c-primary); cursor:pointer; }
.pp-sec-order-btn:hover:not(:disabled){ background:#fff; }
.pp-sec-order-btn:disabled{ opacity:.35; cursor:default; }
.pp-sec-order-btn [data-lucide]{ width:16px; height:16px; }
body.is-admin [data-edit]{ outline:1px dashed rgba(0,66,130,.45); outline-offset:2px; border-radius:3px; cursor:text; }
body.is-admin [data-edit]:hover{ outline-color:var(--c-primary); }
body.is-admin [data-edit]:focus{ outline:2px solid var(--c-primary); background:#fff; }
.pp-hero-edit{ display:none; position:absolute; top:8px; right:8px; z-index:5; align-items:center; gap:5px; background:var(--c-primary); color:#fff; border:0; border-radius:var(--r-pill); padding:6px 12px; font-size:11px; font-weight:700; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.3); }
.pp-hero-edit [data-lucide]{ width:13px; height:13px; }
body.is-admin .pp-hero-edit{ display:inline-flex; }
body.is-admin .pp-hero-card{ cursor:default; }

/* picker modal */
.pp-modal{ position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center; padding:24px; }
.pp-modal.is-open{ display:flex; }
.pp-modal-backdrop{ position:absolute; inset:0; background:rgba(15,20,25,.55); }
.pp-modal-panel{ position:relative; width:min(880px,100%); max-height:86vh; background:#fff; border-radius:var(--r-lg); display:flex; flex-direction:column; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.4); }
.pp-modal-head{ padding:18px 22px; border-bottom:1px solid var(--c-border); display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.pp-modal-head h3{ font-size:18px; font-weight:800; margin:0; }
.pp-modal-sub{ font-size:12px; color:var(--c-fg-3); margin-top:3px; }
.pp-modal-close{ background:transparent; border:0; cursor:pointer; color:var(--c-fg-3); width:34px; height:34px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; flex:none; }
.pp-modal-close:hover{ background:var(--c-surface-alt); color:var(--c-fg-1); }
.pp-modal-tools{ padding:14px 22px; border-bottom:1px solid var(--c-border); display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.pp-search{ flex:1; min-width:200px; display:flex; align-items:center; gap:8px; background:var(--c-surface-alt); border:1px solid var(--c-border); border-radius:var(--r-md); padding:9px 12px; }
.pp-search input{ border:0; background:transparent; outline:none; width:100%; font-size:14px; color:var(--c-fg-1); }
.pp-search [data-lucide]{ width:16px; height:16px; color:var(--c-fg-3); flex:none; }
.pp-modal-body{ padding:18px 22px; overflow:auto; }
.pp-pick-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.pp-pick{ position:relative; text-align:left; background:#fff; border:1px solid var(--c-border); border-radius:var(--r-md); overflow:hidden; cursor:pointer; padding:0; transition:border-color .15s ease, box-shadow .15s ease; }
.pp-pick:hover{ border-color:var(--c-primary); box-shadow:var(--sh-sm); }
.pp-pick.is-picked{ border-color:var(--c-primary); box-shadow:0 0 0 2px var(--c-primary) inset; }
.pp-pick-thumb{ height:88px; aspect-ratio:auto; }
.pp-pick-info{ padding:8px 10px; display:block; }
.pp-pick-cat{ font-size:10px; font-weight:700; color:var(--c-primary); display:block; }
.pp-pick-name{ font-size:13px; font-weight:700; color:var(--c-fg-1); line-height:1.3; margin-top:2px; display:block; }
.pp-pick-code{ font-family:var(--font-mono); font-size:10px; color:var(--c-fg-4); margin-top:2px; display:block; }
.pp-pick-check{ position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:50%; background:var(--c-primary); color:#fff; display:none; align-items:center; justify-content:center; z-index:2; }
.pp-pick.is-picked .pp-pick-check{ display:flex; }
.pp-pick-check [data-lucide]{ width:14px; height:14px; }
.pp-modal-foot{ padding:14px 22px; border-top:1px solid var(--c-border); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pp-modal-count{ font-size:13px; color:var(--c-fg-3); font-weight:600; }
@media (max-width:680px){ .pp-pick-grid{ grid-template-columns:repeat(2,1fr); } }

/* Responsive */
@media (max-width: 960px) {
  .pp-hero-inner { grid-template-columns: 1fr; }
  .pp-hero h1 { font-size: 42px; }
  .pp-cat-strip { grid-template-columns: repeat(2, 1fr); }
  .pp-grid { grid-template-columns: repeat(2, 1fr); }
  .pp-projects { grid-template-columns: 1fr; }
  .pp-cta-band { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pp-grid, .pp-cat-strip { grid-template-columns: 1fr; }
  .pp-hero-visual { min-height: 430px; }
  .pp-title { font-size: 30px; }
}