@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}

/* 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:#3A2012;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:#EEC77A;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:#F5EAD6;background:rgba(58,32,18,.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:#F5EAD6;font-size:.8rem;font-weight:600;background:rgba(58,32,18,.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,#241109,#6B3A1C);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,154,99,.35),transparent 70%)}
.pquality .eyebrow{color:#EEC77A;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:#CDB69F;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:#EEC77A;margin-left:2px}
.pq .l{color:#CDB69F;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}
}