@charset "utf-8";
/* =========================================================================
   제품소개 — 프리미엄 쇼케이스 (대그룹 수준 톤)
   ========================================================================= */

/* Intro */
.pintro{padding-top:clamp(48px,6vw,84px)}
.pintro .eyebrow{justify-content:flex-start}
.pintro h2{font-size:clamp(2rem,3.6vw,3.1rem);font-weight:800;color:var(--navy-800);line-height:1.2;letter-spacing:-.02em;margin-top:14px}
.pintro .lead{font-size:var(--fs-lead);color:var(--ink-500);margin-top:18px;max-width:56ch}
.pintro-meta{display:flex;flex-wrap:wrap;gap:14px 40px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line-200)}
.pintro-meta .m b{display:block;font-size:clamp(1.5rem,2.4vw,2rem);font-weight:800;color:var(--brand-600);line-height:1;letter-spacing:-.02em}
.pintro-meta .m span{font-size:.9rem;color:var(--ink-500);font-weight:600;margin-top:6px;display:block}

/* 제품 카테고리 (2개 대분류 · 각 4개 제품) — 편집형 미니멀 */
.pcat{padding-top:clamp(34px,4.4vw,60px)}
.pcat + .pcat{padding-top:clamp(20px,2.6vw,36px)}
.pcat-head{display:flex;gap:24px;align-items:flex-start;padding-bottom:24px;border-bottom:2px solid var(--navy-900)}
.pcat-no{font-family:ui-monospace,monospace;font-size:1rem;font-weight:800;color:var(--accent-600);letter-spacing:.1em;padding-top:7px;flex-shrink:0}
.pcat-head h2{font-size:clamp(1.45rem,2.5vw,2.05rem);font-weight:800;color:var(--navy-800);line-height:1.28;letter-spacing:-.02em}
.pcat-head p{color:var(--ink-500);margin-top:11px;font-size:1rem;line-height:1.7;max-width:64ch}
.pcard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:38px}
.pcard{background:#F6F8FB;border:1px solid var(--line-200);border-radius:16px;padding:18px 18px 24px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-3);border-color:transparent}
.pthumb{background:#fff;border:1px solid var(--line-200);border-radius:12px;aspect-ratio:1/0.84;
  display:grid;place-items:center;overflow:hidden;padding:10px 18px 26px}
.pthumb img{max-width:100%;max-height:100%;object-fit:contain;display:block;margin-top:-6px}
.pcard-name{font-size:1.06rem;font-weight:800;color:var(--navy-800);letter-spacing:-.01em;
  text-align:center;margin-top:18px}
.pcard-desc{color:var(--ink-500);font-size:.9rem;line-height:1.72;margin-top:12px}
@media (max-width:1024px){.pcard-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.pcat-head{gap:16px}}
@media (max-width:520px){.pcard-grid{grid-template-columns:1fr}}

/* Product feature blocks */
.pfeature{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,4vw,64px);align-items:center;
  padding:clamp(40px,5vw,72px) 0;border-top:1px solid var(--line-200)}
.pfeature:first-of-type{border-top:0}
.pfeature:nth-child(even) .pf-media{order:2}

/* media */
.pf-media{position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-2);
  background:#0B2545;aspect-ratio:4/3}
.pf-media > img{width:100%;height:100%;object-fit:cover;display:block}
.pf-index{position:absolute;top:20px;left:22px;font-family:ui-monospace,monospace;font-size:.9rem;
  font-weight:700;color:#9BD0FF;letter-spacing:.1em;z-index:2}
.pf-index b{color:#fff;font-size:1.5rem}
.pf-chips{position:absolute;left:22px;right:22px;bottom:20px;display:flex;flex-wrap:wrap;gap:8px;z-index:2}
.pf-chip{font-size:.76rem;font-weight:700;color:#DCEBFB;background:rgba(11,37,69,.55);
  border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);padding:6px 12px;border-radius:999px}

/* in-card 360 viewer */
.pf-media.pf-has360{cursor:grab}
.pf-media.pf-has360.grab{cursor:grabbing}
.pf360{position:absolute;inset:0;display:grid;place-items:center;touch-action:pan-y}
.pf360 img{grid-area:1/1;width:86%;max-width:540px;pointer-events:none;-webkit-user-drag:none;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.4))}
.pf360 img:not(.on){display:none}
.pf360-badge{position:absolute;top:18px;right:18px;z-index:3;display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);color:#fff;font-weight:800;font-size:.78rem;
  padding:6px 12px;border-radius:999px;backdrop-filter:blur(6px)}
.pf360-badge svg{width:15px;height:15px}
.pf360-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;white-space:nowrap;
  color:#DCEBFB;font-size:.8rem;font-weight:600;background:rgba(11,37,69,.55);border:1px solid rgba(255,255,255,.18);
  padding:7px 15px;border-radius:999px;backdrop-filter:blur(4px);transition:opacity .4s;pointer-events:none}
.pf360-hint.hide{opacity:0}

/* info */
.pf-cat{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand-600)}
.pf-cat::before{content:"";width:22px;height:2px;background:var(--accent-600)}
.pf-name{font-size:clamp(1.7rem,2.8vw,2.4rem);font-weight:800;color:var(--navy-800);line-height:1.15;margin-top:14px;letter-spacing:-.02em}
.pf-name small{display:block;font-size:.42em;font-weight:700;color:var(--ink-400);letter-spacing:.14em;margin-top:8px}
.pf-desc{color:var(--ink-500);font-size:1.02rem;line-height:1.8;margin-top:16px;max-width:46ch}
.pf-specs{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:26px;border-top:1px solid var(--line-200)}
.pf-specs .s{padding:14px 0;border-bottom:1px solid var(--line-200)}
.pf-specs .s:nth-child(odd){padding-right:20px}
.pf-specs .s:nth-child(even){padding-left:20px;border-left:1px solid var(--line-200)}
.pf-specs .s .k{font-size:.78rem;color:var(--ink-400);font-weight:600}
.pf-specs .s .v{font-size:1rem;color:var(--navy-800);font-weight:700;margin-top:3px}
.pf-apply{margin-top:20px;font-size:.9rem;color:var(--ink-500)}
.pf-apply b{color:var(--navy-800)}

/* Quality band (dark, data viz) */
.pquality{background:linear-gradient(135deg,#08192F,#123a63);color:#fff;border-radius:24px;
  padding:clamp(40px,5vw,64px);margin-top:clamp(30px,4vw,56px);position:relative;overflow:hidden}
.pquality::after{content:"";position:absolute;right:-80px;top:-80px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(46,123,214,.35),transparent 70%)}
.pquality .eyebrow{color:#9BD0FF;position:relative;z-index:1}
.pquality h3{font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:800;margin-top:12px;position:relative;z-index:1}
.pquality p{color:#AFC6E0;margin-top:12px;max-width:52ch;position:relative;z-index:1}
.pq-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px;position:relative;z-index:1}
.pq{border-top:2px solid rgba(124,192,255,.4);padding-top:18px}
.pq .n{font-size:clamp(2rem,3.2vw,2.8rem);font-weight:800;line-height:1;letter-spacing:-.02em}
.pq .n span{font-size:.5em;color:#7CC0FF;margin-left:2px}
.pq .l{color:#AFC6E0;font-size:.92rem;font-weight:600;margin-top:10px}

/* Process */
.pprocess{margin-top:clamp(40px,5vw,72px)}
.pprocess .phead{text-align:center;max-width:640px;margin:0 auto 44px}
.pprocess .phead h3{font-size:var(--fs-h2);font-weight:800;color:var(--navy-800)}
.pprocess .phead p{color:var(--ink-500);margin-top:12px}
.psteps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:ps}
.pstep{position:relative;padding:28px 24px;border:1px solid var(--line-200);border-right:0}
.pstep:last-child{border-right:1px solid var(--line-200)}
.pstep:first-child{border-radius:14px 0 0 14px}
.pstep:last-child{border-radius:0 14px 14px 0}
.pstep .no{font-family:ui-monospace,monospace;font-size:.85rem;font-weight:700;color:var(--brand-600);letter-spacing:.1em}
.pstep h4{font-size:1.15rem;font-weight:700;color:var(--navy-800);margin-top:14px}
.pstep p{color:var(--ink-500);font-size:.92rem;margin-top:8px}
.pstep::after{content:"→";position:absolute;right:-11px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;background:#fff;border:1px solid var(--line-200);border-radius:50%;
  display:grid;place-items:center;font-size:.75rem;color:var(--ink-400);z-index:2}
.pstep:last-child::after{display:none}

.pnote{text-align:center;margin-top:34px;font-size:.85rem;color:var(--ink-400)}

@media (max-width:900px){
  .pfeature{grid-template-columns:1fr;gap:24px}
  .pfeature:nth-child(even) .pf-media{order:0}
  .pq-grid{grid-template-columns:1fr 1fr;gap:28px 24px}
  .psteps{grid-template-columns:1fr 1fr}
  .pstep{border-right:1px solid var(--line-200);border-bottom:0}
  .pstep:nth-child(1){border-radius:14px 0 0 0}.pstep:nth-child(2){border-radius:0 14px 0 0}
  .pstep:nth-child(3){border-radius:0 0 0 14px;border-top:0}.pstep:nth-child(4){border-radius:0 0 14px 0;border-top:0}
  .pstep::after{display:none}
}
@media (max-width:560px){
  .pintro-meta{gap:14px 26px}
  .pf-specs{grid-template-columns:1fr}
  .pf-specs .s:nth-child(even){padding-left:0;border-left:0}
  .pf-specs .s:nth-child(odd){padding-right:0}
  .pq-grid,.psteps{grid-template-columns:1fr}
  .pstep{border-radius:0!important}
}