/* 웹노바 정적 사이트 공용 스타일 — style-light(밝은 기본) / style-nova(어두운 네온, webnova.kr 컨셉) */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);line-height:1.65;word-break:keep-all;overflow-wrap:anywhere}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:16px;z-index:10;background:#fff;color:#000;padding:8px 12px;border-radius:6px}
h1,h2,h3{font-weight:var(--title-weight);line-height:1.3;margin:0}
.hl{font-style:normal;color:var(--accent)}

/* ── 상단 ── */
.top-in{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;flex-wrap:wrap}
.eyebrow{margin:0;font-weight:700;font-size:15px;display:flex;align-items:center;gap:10px}
.eyebrow .bar{width:4px;height:20px;border-radius:2px;background:var(--accent);display:inline-block}
.brand-en{margin:0;font-size:12px;letter-spacing:.24em;font-weight:600}
.menu-in{display:flex;gap:6px;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin}
.menu a{text-decoration:none;padding:8px 14px;border-radius:999px;white-space:nowrap;font-size:14px;font-weight:600}

/* ── 히어로 ── */
.hero{padding:40px 0 56px;text-align:center}
.brand{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:22px}
.logo-webnova{width:min(520px,86vw);height:auto}
.logo-img{max-height:120px;width:auto}
.brand-ko{margin:0;font-size:clamp(22px,4vw,34px);font-weight:700;align-self:center}
.brand-ko .pipe{opacity:.5;font-weight:400;margin-right:6px}
.hero h1{font-size:clamp(24px,4.2vw,44px);letter-spacing:-.02em;max-width:24em;margin-inline:auto;text-wrap:balance}
.hero .sub{font-size:clamp(15px,1.9vw,19px);max-width:42em;margin:16px auto 0;opacity:.85}
.hero-img{margin:28px auto 0;border-radius:16px;max-height:420px;width:auto}
.cta-row{margin:28px 0 0}
.cta{display:inline-block;text-decoration:none;font-weight:700;padding:14px 30px;border-radius:999px;background:var(--accent);color:#fff}

/* ── 섹션·카드 ── */
.sec{padding:48px 0}
.sec h2{font-size:clamp(21px,3vw,30px);text-align:center;letter-spacing:-.01em;text-wrap:balance}
.sec .body{max-width:46em;margin:14px auto 0;text-align:center;opacity:.85;text-wrap:pretty}
.cards{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.cards.n6{grid-template-columns:repeat(6,minmax(0,1fr))}
.card{padding:24px 18px;border-radius:16px;text-align:center}
.card h3{font-size:18px;margin-top:10px}
.card p{margin:6px 0 0;font-size:14px;opacity:.8}
.card a{text-decoration:none}
.card-img{border-radius:10px;margin:0 auto 10px}
.ic-wrap{display:inline-flex;width:76px;height:76px;align-items:center;justify-content:center;border-radius:20px}
.ic{width:46px;height:46px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.link-row{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.link-row a{display:inline-block;padding:8px 16px;border-radius:999px;text-decoration:none;font-size:14px}

/* ── 쇼핑 ── */
.notice{font-size:13px;margin:18px auto 0;padding:8px 14px;border-radius:8px;display:inline-block}
.products{list-style:none;padding:0;margin:0;display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr))}
.product{position:relative;border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:6px}
.product img,.product .ph{aspect-ratio:1/1;object-fit:cover;width:100%;border-radius:10px}
.product h3{font-size:16px}
.product h3 a{text-decoration:none}
.price{margin:0;font-weight:800;font-size:17px}
.desc{margin:0;font-size:13px;opacity:.8}
.badge{position:absolute;top:18px;left:18px;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--accent);color:#fff}
.empty{text-align:center;opacity:.7}

/* ── 푸터 ── */
.foot{position:relative;padding:40px 0 28px;font-size:13px;overflow:clip}
.foot-brand{font-size:clamp(20px,3vw,30px);font-weight:700;text-align:center;margin:0 0 18px}
.biz{display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:center;margin:6px 0;opacity:.8}
.copy{text-align:center;opacity:.6;margin:14px 0 0}

/* ════ style-light ════ */
.style-light{background:#fbfcfe;color:#0f172a}
.style-light .top{border-bottom:1px solid #e5e9f2;background:#fff}
.style-light .menu a{background:#f1f4fa}
.style-light .brand-en{color:#64748b}
.style-light .card,.style-light .product{background:#fff;border:1px solid #e5e9f2}
.style-light .ic-wrap{background:#eef4ff;color:var(--accent)}
.style-light .sec:nth-of-type(even){background:#f4f7fc}
.style-light .link-row a{border:1px solid #d7deea}
.style-light .notice{background:#fff7e6;color:#8a5300}
.style-light .ph{background:#eef1f6}
.style-light .foot{background:#0f172a;color:#cbd5e1}

/* ════ style-nova (webnova.kr 컨셉: 짙은 남색 우주 + 청록·파랑·보라 네온) ════ */
.style-nova{background:#040a2a;color:#e8eeff;
  background-image:radial-gradient(1200px 520px at 50% -8%,rgba(59,130,246,.30),transparent 62%),
                   radial-gradient(700px 380px at 6% 30%,rgba(34,211,238,.14),transparent 70%),
                   radial-gradient(700px 380px at 94% 34%,rgba(168,85,247,.16),transparent 70%);
  background-repeat:no-repeat}
.style-nova .eyebrow .bar{background:#22d3ee;box-shadow:0 0 12px #22d3ee}
.style-nova .eyebrow{color:#fff}
.style-nova .brand-en{color:#dbe6ff}
.style-nova .menu a{background:rgba(255,255,255,.06);border:1px solid rgba(125,170,255,.25)}
.style-nova .menu a:hover{border-color:#22d3ee}
.style-nova .hl{color:#22d3ee;text-shadow:0 0 18px rgba(34,211,238,.45)}
.style-nova .hero{position:relative}
.style-nova .hero::after{content:"";display:block;width:min(760px,90%);height:2px;margin:40px auto 0;
  background:linear-gradient(90deg,transparent,#3b82f6,#22d3ee,#3b82f6,transparent);box-shadow:0 0 14px #3b82f6}
.style-nova .cta{background:linear-gradient(90deg,#06b6d4,#3b82f6 55%,#a855f7);box-shadow:0 0 24px rgba(59,130,246,.55)}
.style-nova .cards.n6{gap:0}
.style-nova .card{background:transparent;border-radius:0;border-left:1px solid rgba(125,170,255,.22)}
.style-nova .cards.n6 .card:first-child{border-left:0}
.style-nova .cards:not(.n6) .card{border:1px solid rgba(125,170,255,.22);border-radius:16px;background:rgba(10,20,70,.45)}
.style-nova .ic-wrap{color:#9fd8ff;background:radial-gradient(circle at 50% 80%,rgba(59,130,246,.45),transparent 70%);
  filter:drop-shadow(0 0 8px rgba(80,160,255,.8))}
.style-nova .card h3{color:#fff}
.style-nova .card p{color:#c9d6f5;opacity:1}
.style-nova .link-row a{border:1px solid rgba(125,170,255,.35)}
.style-nova .product{background:rgba(10,20,70,.55);border:1px solid rgba(125,170,255,.22)}
.style-nova .ph{background:linear-gradient(135deg,#0b1a5c,#24104f)}
.style-nova .notice{background:rgba(34,211,238,.1);color:#bdefff;border:1px solid rgba(34,211,238,.3)}
.style-nova .foot{background:transparent;color:#dbe6ff;padding-top:120px}
.style-nova .planet{position:absolute;left:50%;top:0;width:1600px;height:900px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,#0a1a5a 0 92%,transparent 93%),
             radial-gradient(closest-side,rgba(59,130,246,.9) 0 93.5%,transparent 95%);
  box-shadow:0 -10px 60px rgba(59,130,246,.55),0 -2px 18px rgba(34,211,238,.8);z-index:-1}
.style-nova .foot-in{position:relative}
.style-nova .foot-brand{color:#fff;text-shadow:0 0 16px rgba(80,160,255,.5)}

/* ── 반응형 ── */
@media (max-width:1000px){.cards.n6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .style-nova .cards.n6 .card{border-left:0;border-top:1px solid rgba(125,170,255,.18)}}
@media (max-width:560px){.cards.n6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .top-in{justify-content:center;text-align:center}.brand-en{width:100%;text-align:center;font-size:11px}
  .card{padding:18px 8px}.card h3{font-size:16px}.ic-wrap{width:64px;height:64px}.ic{width:38px;height:38px}}