/* ============================================================
   xy2026.css  —  엑스와이넷 애플 오버레이 (신규 상품군 페이지 전용)
   모든 규칙을 .xy2026 아래로 스코프 → 기존 Bootstrap style.css와 충돌 방지.
   라이트 단일 테마(라이브 사이트에 맞춤).
   ============================================================ */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@latest/dist/web/variable/pretendardvariable-dynamic-subset.css');

.xy2026{
  --xy-bg:#FFFFFF; --xy-alt:#F5F5F7; --xy-surface:#FFFFFF;
  --xy-ink:#1D1D1F; --xy-muted:#6E6E73; --xy-line:#E2E6EC;
  --xy-accent:#E8462B; --xy-accent-ink:#C7381F; --xy-accent-soft:#FDECE7;
  --xy-pending:#B4791C; --xy-pending-soft:#FBF2DE;
  --xy-mono:ui-monospace,"SFMono-Regular","Menlo","Consolas",monospace;
  --xy-font:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo','Malgun Gothic','Segoe UI',sans-serif;
  font-family:var(--xy-font); color:var(--xy-ink); background:var(--xy-bg);
  font-size:17px; line-height:1.55; letter-spacing:-.01em; word-break:keep-all; -webkit-font-smoothing:antialiased;
}
.xy2026 *{box-sizing:border-box}
.xy2026 .xy-container{max-width:1080px; margin:0 auto; padding:0 22px}
.xy2026 a{color:inherit; text-decoration:none}

/* buttons */
.xy2026 .xy-btn{display:inline-flex; align-items:center; gap:7px; font-size:16px; font-weight:600; border-radius:980px; padding:12px 26px; transition:background .2s, transform .15s; cursor:pointer; border:none; font-family:inherit}
.xy2026 .xy-btn.sm{font-size:14px; padding:10px 18px; width:100%; justify-content:center}
.xy2026 .xy-btn.primary{background:var(--xy-accent); color:#fff}
.xy2026 .xy-btn.primary:hover{background:var(--xy-accent-ink); transform:translateY(-1px); color:#fff}
.xy2026 .xy-btn.ghost{background:transparent; color:var(--xy-accent); font-weight:600}
.xy2026 .xy-btn.ghost::after{content:"›"; font-size:19px; line-height:1}
.xy2026 .xy-btn.ghost:hover{text-decoration:underline; text-underline-offset:3px; color:var(--xy-accent)}

/* intro / hero */
.xy2026 .xy-intro{padding:88px 0 64px; text-align:center; background:radial-gradient(110% 80% at 50% 0%,var(--xy-accent-soft),transparent 60%)}
.xy2026 .xy-eyebrow{font-size:14px; font-weight:700; color:var(--xy-accent); letter-spacing:.02em; margin:0 0 16px; display:inline-flex; align-items:center; gap:9px}
.xy2026 .xy-h1{font-size:clamp(34px,5.4vw,58px); line-height:1.08; font-weight:800; letter-spacing:-.035em; margin:0 auto 18px; max-width:20ch; text-wrap:balance}
.xy2026 .xy-lead{font-size:clamp(17px,2.2vw,21px); color:var(--xy-muted); max-width:44ch; margin:0 auto 30px; line-height:1.45; text-wrap:balance}
.xy2026 .xy-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* badges */
.xy2026 .xy-badge{font-size:11px; font-weight:800; padding:3px 9px; border-radius:980px; background:var(--xy-accent-soft); color:var(--xy-accent); letter-spacing:.03em}
.xy2026 .xy-badge.soon{background:var(--xy-pending-soft); color:var(--xy-pending)}

/* sections */
.xy2026 .xy-sec{padding:76px 0}
.xy2026 .xy-sec.alt{background:var(--xy-alt)}
.xy2026 .xy-sechead{text-align:center; max-width:60ch; margin:0 auto 44px}
.xy2026 .xy-tag{display:block; font-size:14px; font-weight:700; color:var(--xy-accent); margin-bottom:10px}
.xy2026 .xy-h2{font-size:clamp(26px,3.6vw,40px); line-height:1.1; font-weight:800; letter-spacing:-.03em; margin:0 0 12px; text-wrap:balance}
.xy2026 .xy-sub{font-size:clamp(16px,1.9vw,19px); color:var(--xy-muted); margin:0; line-height:1.5}

/* tier grid */
.xy2026 .xy-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.xy2026 .xy-tier{background:var(--xy-surface); border:1px solid var(--xy-line); border-radius:22px; padding:26px 24px; display:flex; flex-direction:column}
.xy2026 .xy-tier.feat{border-color:var(--xy-accent); box-shadow:0 0 0 1px var(--xy-accent)}
.xy2026 .xy-tn{font-family:var(--xy-mono); font-size:13px; font-weight:700; color:var(--xy-accent); letter-spacing:.02em}
.xy2026 .xy-tt{font-size:20px; font-weight:750; letter-spacing:-.02em; margin:4px 0 18px}
.xy2026 .xy-spec{list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:11px}
.xy2026 .xy-spec li{display:flex; justify-content:space-between; font-size:14.5px; border-bottom:1px solid var(--xy-line); padding-bottom:11px; color:var(--xy-muted)}
.xy2026 .xy-spec li:last-child{border-bottom:none; padding-bottom:0}
.xy2026 .xy-spec li b{font-weight:650; color:var(--xy-ink); font-variant-numeric:tabular-nums}
.xy2026 .xy-pend{margin:auto 0 14px; text-align:center; padding:16px; border-radius:14px; background:var(--xy-pending-soft)}
.xy2026 .xy-pl{display:block; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--xy-pending); margin-bottom:4px}
.xy2026 .xy-pb{display:block; font-size:22px; font-weight:800; color:var(--xy-ink); margin-bottom:2px}
.xy2026 .xy-ps{display:block; font-size:12px; color:var(--xy-muted)}
.xy2026 .xy-note-line{text-align:center; font-size:14px; color:var(--xy-muted); margin:28px 0 0}

/* chips */
.xy2026 .xy-chips{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.xy2026 .xy-chip{display:inline-flex; align-items:center; gap:8px; font-size:14px; background:var(--xy-surface); border:1px solid var(--xy-line); border-radius:999px; padding:10px 18px}
.xy2026 .xy-chip .xy-ck{color:var(--xy-accent); font-weight:800}

/* add-on options */
.xy2026 .xy-opts{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; max-width:760px; margin:0 auto}
.xy2026 .xy-opt{display:flex; justify-content:space-between; align-items:baseline; gap:14px; background:var(--xy-surface); border:1px solid var(--xy-line); border-radius:14px; padding:18px 20px}
.xy2026 .xy-opt .on{font-weight:700; font-size:15.5px}
.xy2026 .xy-opt .od{font-size:13px; color:var(--xy-muted); margin-top:3px}
.xy2026 .xy-opt .op{font-family:var(--xy-mono); font-weight:700; font-size:14px; white-space:nowrap}
.xy2026 .xy-opt .op.soon{color:var(--xy-pending)}

/* inquiry */
.xy2026 .xy-inqbox{text-align:center; max-width:640px; margin:0 auto}
.xy2026 .xy-inqbox h2{font-size:clamp(24px,3.4vw,36px); font-weight:800; letter-spacing:-.03em; margin:0 0 12px; text-wrap:balance}
.xy2026 .xy-inqbox p{font-size:17px; color:var(--xy-muted); margin:0 0 26px}
.xy2026 .xy-tel-note{font-size:12.5px; color:var(--xy-muted); margin:18px 0 0}

/* feature cards (보안 · 부가) */
.xy2026 .xy-fgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.xy2026 .xy-fcard{background:var(--xy-surface); border:1px solid var(--xy-line); border-radius:18px; padding:24px; display:flex; flex-direction:column}
.xy2026 .xy-fcard .xy-fi{color:var(--xy-accent); height:26px; line-height:0; margin-bottom:14px}
.xy2026 .xy-fcard .xy-fi svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.xy2026 .xy-fcard h4{font-size:17px; font-weight:750; letter-spacing:-.01em; margin:0 0 6px}
.xy2026 .xy-fcard p{font-size:13.5px; color:var(--xy-muted); margin:0 0 14px; line-height:1.55}
.xy2026 .xy-fcard .xy-fspec{font-family:var(--xy-mono); font-size:12px; color:var(--xy-muted); margin:0 0 14px}
.xy2026 .xy-fcard .xy-fbadge{margin-top:auto; align-self:flex-start; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:5px 11px; border-radius:980px; background:var(--xy-pending-soft); color:var(--xy-pending); text-decoration:none}
.xy2026 .xy-fcard .xy-fbadge.ok{background:var(--xy-accent-soft); color:var(--xy-accent)}

/* 홈페이지 임베드: 상세 인트로를 섹션 헤더로 축소 + 개별 문의 숨김 */
.xy2026.embed .xy-intro{padding:58px 0 4px; background:none}
.xy2026.embed .xy-intro .xy-h1{font-size:clamp(26px,3.6vw,40px)}
.xy2026.embed .xy-intro .xy-cta{display:none}
.xy2026.embed section[id$="inquiry"]{display:none}

@media (max-width:860px){
  .xy2026 .xy-grid{grid-template-columns:1fr}
  .xy2026 .xy-opts{grid-template-columns:1fr}
  .xy2026 .xy-fgrid{grid-template-columns:1fr}
}