/* ZerOn Browser 사이트
   다운로드 페이지(zeron-school .zb)의 실측값을 기반으로 하고, 다크 세트와 하단 섹션을 더함. */

:root {
  color-scheme: light dark;
  --fg: #1e2124;
  --fg-muted: #4b5563;
  --fg-placeholder: #5f6a75;      /* 실측 #6d7882 → 13px 텍스트 대비 4.5:1 확보용 */
  --brand: #256ef4;
  --brand-hover: #0b50d0;
  --btn-bg: #256ef4;
  --btn-bg-hover: #0b50d0;
  --btn-shadow: rgba(37,110,244,.35);
  --btn-shadow-hover: rgba(37,110,244,.4);
  --page-bg: #dbe7fb;
  --glow-1: rgba(37,110,244,.45);
  --glow-2: rgba(160,200,255,.6);
  --glow-3: rgba(255,255,255,.7);
  --grad-a: #e8f0fd;
  --grad-b: #c9dbf8;
  --glass: rgba(255,255,255,.45);
  --glass-edge: rgba(255,255,255,.6);
  --glass-top: rgba(255,255,255,.9);
  --glass-shadow: rgba(20,60,140,.18);
  --tile: rgba(255,255,255,.65);
  --tile-shadow: rgba(20,60,140,.14);
  --chip: rgba(255,255,255,.7);
  --code: rgba(255,255,255,.5);
  --divider: rgba(30,33,36,.08);
  --wire: rgba(30,33,36,.1);
  --wire-strong: rgba(30,33,36,.18);
  --ring: rgba(37,110,244,.35);
  --logo-glow: rgba(37,110,244,.45);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fg: #eef0f4;
    --fg-muted: #b4bcc8;
    --fg-placeholder: #98a2b3;
    --brand: #4d8dff;
    --brand-hover: #6ea1ff;
    --btn-bg: #256ef4;             /* 흰 글자 대비 때문에 두 테마 모두 같은 값 */
    --btn-bg-hover: #3b80ff;
    --btn-shadow: rgba(37,110,244,.45);
    --btn-shadow-hover: rgba(37,110,244,.5);
    --page-bg: #0b0f17;
    --glow-1: rgba(37,110,244,.3);
    --glow-2: rgba(70,120,210,.22);
    --glow-3: rgba(255,255,255,.05);
    --grad-a: #0d1320;
    --grad-b: #080b12;
    --glass: rgba(255,255,255,.06);
    --glass-edge: rgba(255,255,255,.12);
    --glass-top: rgba(255,255,255,.18);
    --glass-shadow: rgba(0,0,0,.55);
    --tile: rgba(255,255,255,.07);
    --tile-shadow: rgba(0,0,0,.45);
    --chip: rgba(255,255,255,.08);
    --code: rgba(255,255,255,.06);
    --divider: rgba(255,255,255,.08);
    --wire: rgba(255,255,255,.1);
    --wire-strong: rgba(255,255,255,.18);
    --ring: rgba(77,141,255,.4);
    --logo-glow: rgba(77,141,255,.5);
  }
}

/* 기본 */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  font-weight: 500;
  line-height: 1.5;
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  background: var(--page-bg);
  background-image:
    radial-gradient(900px 600px at 18% 20%, var(--glow-1), transparent 65%),
    radial-gradient(800px 700px at 85% 80%, var(--glow-2), transparent 65%),
    radial-gradient(600px 500px at 60% 10%, var(--glow-3), transparent 60%),
    linear-gradient(180deg, var(--grad-a) 0, var(--grad-b) 100%);
  background-size: 160% 160%, 160% 160%, 160% 160%, 100% 100%;
  background-attachment: fixed;
  animation: glow-drift 28s ease-in-out infinite alternate;
}
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }
a:focus-visible, summary:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--ring); border-radius: 8px; }
h1, h2, h3, p, ul, figure { margin: 0; }

/* 유리 카드 두 종류 */
.window {
  display: flex; flex-direction: column; align-items: center; gap: 36px;
  width: 100%; max-width: 760px;
  padding: 64px 48px 56px;
  border-radius: 40px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  backdrop-filter: blur(40px) saturate(160%);
  box-shadow: 0 30px 80px var(--glass-shadow), inset 0 1px 0 var(--glass-top), inset 0 0 0 1px var(--glass-edge);
}
.tile {
  background: var(--tile);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 var(--glass-top), inset 0 0 0 1px var(--glass-edge), 0 10px 28px var(--tile-shadow);
}

/* 히어로 */
.hero { min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 48px 20px; }
.brand { display: flex; flex-direction: column; align-items: center; gap: 20px; animation: rise .64s cubic-bezier(.2,0,0,1) both; }
.logo {
  display: block; width: 96px; height: 96px; color: var(--brand);
  filter: drop-shadow(0 8px 24px var(--logo-glow));
  animation: logo-tilt 6s ease-in-out infinite; transform-origin: 50% 50%;
}
.bar { stroke: currentColor; opacity: 0; stroke-dasharray: 33; stroke-dashoffset: 33; animation: bar-in .42s cubic-bezier(.2,0,0,1) both; }
.bar:nth-child(1) { animation-delay: 0.12s; }
.bar:nth-child(2) { animation-delay: 0.175s; }
.bar:nth-child(3) { animation-delay: 0.23s; }
.bar:nth-child(4) { animation-delay: 0.285s; }
.bar:nth-child(5) { animation-delay: 0.34s; }
.bar:nth-child(6) { animation-delay: 0.395s; }
.bar:nth-child(7) { animation-delay: 0.45s; }
.bar:nth-child(8) { animation-delay: 0.505s; }
.bar:nth-child(9) { animation-delay: 0.56s; }
.bar:nth-child(10) { animation-delay: 0.615s; }
.bar:nth-child(11) { animation-delay: 0.67s; }
.bar:nth-child(12) { animation-delay: 0.725s; }
.bar:nth-child(13) { animation-delay: 0.78s; }
.bar:nth-child(14) { animation-delay: 0.835s; }
.bar:nth-child(15) { animation-delay: 0.89s; }
.bar:nth-child(16) { animation-delay: 0.945s; }
.bar:nth-child(17) { animation-delay: 1.0s; }
.bar:nth-child(18) { animation-delay: 1.055s; }
.bar:nth-child(19) { animation-delay: 1.11s; }
.bar:nth-child(20) { animation-delay: 1.165s; }
.bar:nth-child(21) { animation-delay: 1.22s; }
.bar:nth-child(22) { animation-delay: 1.275s; }
.bar:nth-child(23) { animation-delay: 1.33s; }
.bar:nth-child(24) { animation-delay: 1.385s; }
.title { font-size: 34px; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; }
.cta { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hero .cta { animation: rise .64s cubic-bezier(.2,0,0,1) both; animation-delay: .22s; }
.download-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 60px; padding: 0 36px; border-radius: 9999px;
  background: var(--btn-bg); color: #fff;
  font-size: 18px; font-weight: 700; line-height: 1; white-space: nowrap;
  box-shadow: 0 10px 28px var(--btn-shadow), inset 0 1px 0 rgba(255,255,255,.35);
  transition: background .2s cubic-bezier(.2,0,0,1), transform .24s cubic-bezier(.2,0,0,1), box-shadow .24s cubic-bezier(.2,0,0,1);
}
.download-btn:hover { color: #fff; background: var(--btn-bg-hover); transform: translateY(-3px); box-shadow: 0 16px 36px var(--btn-shadow-hover), inset 0 1px 0 rgba(255,255,255,.35); }
.download-btn:active { transform: translateY(0) scale(.98); }
.download-btn:focus-visible { outline: 0; border-radius: 9999px; box-shadow: 0 0 0 4px var(--ring), 0 10px 28px var(--btn-shadow); }
.download-btn svg { width: 22px; height: 22px; }
.note { font-size: 13px; line-height: 1.5; color: var(--fg-placeholder); text-align: center; }

/* 섹션 공통 */
.section { padding: 96px 20px; }
.container { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.container.narrow { max-width: 760px; }
.section h2 { font-size: 28px; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; text-align: center; }

/* 무엇이 다른가 */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.card { display: flex; flex-direction: column; gap: 16px; padding: 32px; }
.card-icon {
  width: 56px; height: 56px; border-radius: 9999px; color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  background: var(--chip); box-shadow: inset 0 0 0 1px var(--glass-edge);
}
.card-icon svg { width: 28px; height: 28px; }
.card h3 { font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
.card p { font-size: 16px; line-height: 1.6; color: var(--fg-muted); }
.diagram { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.diagram svg { display: block; width: 100%; height: auto; }
.diagram .frame { fill: none; stroke: var(--wire-strong); stroke-width: 2; }
.diagram .line { fill: var(--wire-strong); }
.diagram .slot { fill: none; stroke: var(--fg-placeholder); stroke-width: 2; stroke-dasharray: 4 4; }
.diagram .arrow { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.diagram-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--fg-placeholder); }
.diagram-labels span { width: 43%; text-align: center; }

/* 전후 비교 */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.shot { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.shot img { display: block; width: 100%; height: auto; border-radius: 16px; }
.chip {
  align-self: flex-start; padding: 6px 14px; border-radius: 9999px;
  background: var(--chip); box-shadow: inset 0 0 0 1px var(--glass-edge);
  font-size: 13px; font-weight: 700;
}
/* 스크린샷 자리표시 — 실제 이미지가 오면 index.html의 .wire 블록을 <img>로 교체하고 이 블록은 지워도 됨 */
.wire { flex: 1; display: flex; flex-direction: column; border-radius: 16px; background: var(--wire); overflow: hidden; }
.wire-bar { height: 28px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: var(--wire-strong); }
.wire-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-placeholder); opacity: .6; }
.wire-url { flex: 1; height: 12px; border-radius: 6px; background: var(--wire); }
.wire-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 20px 24px; }
.wire-line { height: 10px; border-radius: 5px; background: var(--wire-strong); }
.wire-ad {
  height: 44px; border-radius: 8px; border: 2px dashed var(--wire-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--fg-placeholder);
}
.wire-badge { display: flex; justify-content: center; padding: 0 16px 14px; }
.wire-badge span { padding: 6px 12px; border-radius: 9999px; background: var(--chip); font-size: 12px; color: var(--fg-placeholder); white-space: nowrap; }

/* 내려받기 */
.window-download { gap: 28px; }
.steps { padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 520px; font-size: 16px; line-height: 1.6; color: var(--fg-muted); }
.steps code, .verify code { font-family: ui-monospace, Menlo, Consolas, monospace; }
.steps code { font-size: 14px; padding: 2px 6px; border-radius: 6px; background: var(--code); }
.steps strong { color: var(--fg); font-weight: 700; }
.verify { width: 100%; max-width: 520px; padding-top: 20px; border-top: 1px solid var(--divider); }
.verify summary { font-size: 14px; }
.verify code { display: block; margin-top: 8px; font-size: 12px; line-height: 1.6; word-break: break-all; color: var(--fg-placeholder); }

/* 펼침 목록 공통 */
summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 700; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
.chev { flex: none; width: 20px; height: 20px; color: var(--fg-placeholder); transition: transform .2s cubic-bezier(.2,0,0,1); }
details[open] > summary .chev { transform: rotate(180deg); }

/* 자주 묻는 질문 */
.faq { display: flex; flex-direction: column; padding: 4px 32px; }
.faq details { padding: 22px 0; border-top: 1px solid var(--divider); }
.faq details:first-child { border-top: 0; }
.faq summary { font-size: 17px; line-height: 1.4; }
.faq details p { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--fg-muted); }

/* 푸터 */
.footer { padding: 40px 20px 56px; font-size: 13px; color: var(--fg-placeholder); text-align: center; }

/* 모션 */
@keyframes glow-drift {
  0%   { background-position: 0 0, 100% 100%, 50% 0, 0 0; }
  50%  { background-position: 60% 40%, 40% 70%, 80% 30%, 0 0; }
  to   { background-position: 100% 100%, 0 0, 20% 60%, 0 0; }
}
@keyframes rise { 0% { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes logo-tilt { 0%, to { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes bar-in { 0% { opacity: 0; stroke-dashoffset: 33; } to { opacity: 1; stroke-dashoffset: 0; } }

/* 반응형 */
@media (max-width: 960px) {
  .cards, .compare { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hero { padding: 32px 16px; }
  .window { padding: 40px 24px 32px; border-radius: 32px; gap: 28px; }
  .title { font-size: 28px; }
  .section { padding: 64px 20px; }
  .section h2 { font-size: 24px; }
  .card { padding: 24px; }
  .faq { padding: 4px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  body, .logo, .bar, .brand, .hero .cta { animation: none; }
  .bar { opacity: 1; stroke-dashoffset: 0; }
  .download-btn, .download-btn:hover { transform: none; transition: none; }
  .chev { transition: none; }
}