/* 워니픽 — sections below the fold, sub-pages, motion, responsive */

.wrap { width: min(1240px, 100% - 48px); margin-inline: auto; }
.band { padding: clamp(80px, 10vw, 160px) 0; }
.band + .band { border-top: 1px solid var(--rule); }

.h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  text-wrap: balance;
}
.h3 { font-size: clamp(21px, 1.8vw, 26px); font-weight: 700; margin: 0 0 10px; line-height: 1.35; }
.intro { max-width: 40em; color: var(--ivory-dim); font-size: clamp(17px, 1.35vw, 20px); margin: 0 0 clamp(40px, 5vw, 72px); }
.intro strong { color: var(--ivory); }
.hl { color: var(--phosphor); font-weight: 700; }

/* select-your-game: one lit cabinet at a time */
.select {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.2vw, 32px);
  list-style: none; margin: 0; padding: 0;
}
.select > li { display: flex; }
.game {
  --glow: var(--cyan);
  position: relative;
  flex: 1;
  display: flex; flex-direction: column;
  padding: 0 0 26px;
  background: linear-gradient(180deg, #0c0f1f, #080913 70%);
  border: 1px solid #1a2140;
  border-radius: 14px 14px 6px 6px;
  text-decoration: none;
  color: var(--ivory);
  transition: border-color .35s var(--ease-out), transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.select > li:nth-child(2) .game { --glow: var(--magenta); }
.select > li:nth-child(3) .game { --glow: #a68bff; }
.marquee {
  margin: 14px 14px 0;
  padding: 14px 18px;
  border-radius: 8px;
  border: 2px solid color-mix(in oklab, var(--glow) 40%, transparent);
  display: flex; align-items: baseline; justify-content: center; gap: 12px;
  font-family: var(--display);
  font-size: clamp(22px, 2.2vw, 32px);
  color: color-mix(in oklab, var(--glow) 55%, var(--muted));
  background: #0a0c18;
  transition: color .35s var(--ease-out), border-color .35s var(--ease-out), text-shadow .35s var(--ease-out), background .35s var(--ease-out);
}
.marquee .p { font-family: var(--seg); font-size: max(13px, .6em); letter-spacing: .04em; }
.screen {
  position: relative;
  margin: 14px 14px 0;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  border: 6px solid #05060c;
}
.screen img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.5) brightness(.6); transition: filter .5s var(--ease-out); }
.demo-tag {
  position: absolute; right: 8px; bottom: 8px;
  font-size: 12px; font-weight: 600;
  padding: 2px 8px; border-radius: 4px;
  background: rgba(8, 9, 19, .8); color: var(--ivory-dim);
}
.game-body { padding: 22px 26px 0; }
.game-body p { margin: 0; color: var(--ivory-dim); font-size: 17px; }
.game-foot {
  margin-top: auto;
  padding: 22px 26px 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 16px;
}
.game-foot .cost { color: var(--phosphor); font-weight: 700; }
.game-foot .go { color: var(--muted); transition: color .3s; white-space: nowrap; }

.game:is(:hover, :focus-visible, .is-lit) {
  border-color: color-mix(in oklab, var(--glow) 60%, transparent);
  transform: translateY(-4px);
  box-shadow: 0 28px 60px -32px color-mix(in oklab, var(--glow) 70%, transparent);
}
.game:is(:hover, :focus-visible, .is-lit) .marquee {
  color: var(--glow);
  border-color: var(--glow);
  background: color-mix(in oklab, var(--glow) 10%, #0a0c18);
  text-shadow: 0 0 18px color-mix(in oklab, var(--glow) 70%, transparent);
}
.game:is(:hover, :focus-visible, .is-lit) .screen img { filter: none; }
.game:is(:hover, :focus-visible, .is-lit) .go { color: var(--glow); }

/* stages of the process */
.stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); }
.stages li { padding: 36px 32px 8px 0; }
.stages li + li { padding-left: 32px; border-left: 1px solid var(--rule); }
.stage-no { display: block; font-size: 14px; color: var(--cyan); font-weight: 700; letter-spacing: .12em; margin-bottom: 18px; }
.stage-no .seg { font-size: 15px; margin-left: 6px; text-shadow: none; }
.stages p { margin: 0; color: var(--ivory-dim); }
.stages .when { display: inline-block; margin-top: 16px; font-size: 15px; color: var(--phosphor); font-weight: 600; }

/* high-score board: comparison */
.board { width: 100%; border-collapse: collapse; font-size: 17px; }
.board th, .board td { padding: 20px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.board thead th { font-size: 14px; letter-spacing: .1em; font-weight: 700; color: var(--muted); padding-top: 0; }
.board thead th.us { color: var(--cyan); }
.board tbody th { font-weight: 600; color: var(--ivory); width: 17%; white-space: nowrap; }
.board td.them { color: var(--muted); width: 36%; }
.board td.us { color: var(--ivory); }
.board td.us strong { color: var(--cyan); font-weight: 700; }
.board tbody tr { transition: background .25s; }
.board tbody tr:hover { background: rgba(25, 240, 247, .04); }

/* credits: price list */
.split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.credits { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ivory); }
.credits li {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 6px 24px;
  padding: 22px 0; border-bottom: 1px solid var(--rule);
}
.credits .item { font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; }
.credits .note { grid-column: 1 / -1; color: var(--muted); font-size: 15px; }
.credits .amt { font-family: var(--seg); font-size: clamp(22px, 2.3vw, 32px); color: var(--phosphor); white-space: nowrap; }
.credits .amt small { font-family: var(--sans); font-size: .55em; font-weight: 700; margin-left: 4px; }
.fine { color: var(--muted); font-size: 15px; margin: 18px 0 0; }
.fine a { color: var(--ivory); text-underline-offset: .3em; }
.fine a:hover { color: var(--cyan); }

/* game start band */
.start {
  text-align: center;
  padding: clamp(96px, 12vw, 180px) 0;
  background: var(--aisle);
  border-top: 1px solid var(--rule);
}
.start .h2 { font-size: clamp(38px, 5.4vw, 84px); margin-bottom: 18px; }
.start p { color: var(--ivory-dim); margin: 0 auto 44px; max-width: 32em; }
.start .credit { display: block; font-size: 14px; font-weight: 700; letter-spacing: .2em; color: var(--phosphor); margin-top: 28px; }
.coin-btn.solo { --u: calc(1600px / 2688 * 1.1); width: auto; height: 80px; padding: 0 48px; font-size: 19px; display: inline-flex; }
.coin-btn.solo .line { inset: 8px; }
.blink { animation: blink 1.4s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* footer */
.site-foot { border-top: 1px solid var(--rule); padding: 44px 0 56px; color: var(--muted); font-size: 15px; }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: center; justify-content: space-between; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: var(--cyan); }

/* sub-page title */
.page-top { padding: clamp(72px, 9vw, 140px) 0 clamp(48px, 6vw, 88px); border-bottom: 1px solid var(--rule); }
.page-top .h1 { font-family: var(--display); font-weight: 400; font-size: clamp(42px, 6.4vw, 100px); line-height: 1.06; letter-spacing: -0.03em; margin: 0 0 24px; text-wrap: balance; }
.page-top p { margin: 0; max-width: 38em; color: var(--ivory-dim); font-size: clamp(17px, 1.4vw, 21px); }
.page-top .price-line { margin-top: 20px; color: var(--phosphor); font-weight: 700; }

/* rate table (services) */
.table-scroll { overflow-x: auto; }
.rates { width: 100%; border-collapse: collapse; font-size: 17px; min-width: 560px; }
.rates th, .rates td { padding: 16px 14px; border-bottom: 1px solid var(--rule); text-align: right; white-space: nowrap; }
.rates th:first-child, .rates td:first-child { text-align: left; white-space: normal; }
.rates thead th { font-size: 14px; color: var(--muted); font-weight: 700; letter-spacing: .04em; }
.rates tbody th { font-weight: 600; }
.rates td { font-family: var(--seg); font-size: 18px; color: var(--phosphor); }
.rates td small { font-family: var(--sans); font-weight: 700; font-size: 13px; margin-left: 2px; }
.rates .why { display: block; font-family: var(--sans); font-weight: 400; font-size: 15px; color: var(--muted); margin-top: 4px; }

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); list-style: none; margin: 0; padding: 0; }
.tier { padding: 30px 28px 32px; border-top: 3px solid var(--rule); background: linear-gradient(180deg, #0c0f1f, transparent); }
.tier.lit { border-top-color: var(--cyan); }
.tier .amt { display: block; font-family: var(--seg); font-size: clamp(28px, 3vw, 40px); color: var(--phosphor); margin: 14px 0 4px; }
.tier .amt small { font-family: var(--sans); font-size: .45em; font-weight: 700; margin-left: 4px; }
.tier .per { color: var(--muted); font-size: 15px; }
.tier p { color: var(--ivory-dim); margin: 16px 0 0; }
.sub-h { margin: clamp(56px, 7vw, 96px) 0 24px; }

/* placeholders: content the owner must still supply */
.slot {
  border: 2px dashed #3a4468;
  border-radius: 10px;
  padding: 28px 30px;
  color: var(--muted);
  background: rgba(58, 68, 104, .08);
}
.slot strong { display: block; color: var(--phosphor); font-size: 14px; letter-spacing: .02em; margin-bottom: 8px; }
.slot p { margin: 0; }
.slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

.principles { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.principles li { display: grid; grid-template-columns: 76px 1fr; gap: 20px; padding: 28px 0; border-bottom: 1px solid var(--rule); }
.principles li::before { counter-increment: p; content: counter(p); font-family: var(--seg); font-size: 40px; color: var(--cyan); line-height: 1; }
.principles p { margin: 0; color: var(--ivory-dim); }

/* contact */
.kakao-panel {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 72px); align-items: center;
  padding: clamp(28px, 4vw, 56px);
  border: 1px solid #1d2a52; border-radius: 16px;
  background: linear-gradient(135deg, #0c1230, #080913 60%);
}
.kakao-panel .h2 { margin-bottom: 14px; }
.kakao-panel p { color: var(--ivory-dim); margin: 0 0 30px; }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.checklist li:last-child { border-bottom: 0; }
.checklist svg { width: 22px; height: 22px; color: var(--cyan); margin-top: 3px; }
.checklist b { color: var(--ivory); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; padding: 24px 44px 24px 0; font-size: clamp(18px, 1.5vw, 21px); font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; border-right: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--ease-out); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq summary:hover { color: var(--cyan); }
.faq details p { margin: 0 0 26px; color: var(--ivory-dim); max-width: 44em; }

/* power-on: the one authored motion moment */
@media (prefers-reduced-motion: no-preference) {
  .js .stage .art-main, .js .stage .art-back { animation: power 1.2s var(--ease-out) both; }
  .js .stage .art-back { animation-delay: .3s; }
  .js .headline, .js .kicker, .js .lede, .js .price, .js .coin, .js .more { animation: rise .8s var(--ease-out) both; }
  .js .lede { animation-delay: .06s; } .js .price { animation-delay: .12s; } .js .coin, .js .more { animation-delay: .18s; }
  @keyframes power { 0% { opacity: .2; filter: brightness(.3); } 16% { opacity: 1; filter: brightness(1.45); } 24% { filter: brightness(.55); } 36%, 100% { opacity: 1; filter: brightness(1); } }
  @keyframes rise { from { opacity: .001; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .blink { animation: none; } }

/* ── responsive ─────────────────────────────────────── */
@media (max-width: 1100px) {
  :root { --u: calc(1100px / 2688); }
  .site-head { padding: 0 24px; height: 68px; }
  .nav { position: static; margin-left: auto; margin-right: 28px; gap: 28px; height: auto; }
  .nav a { font-size: 16px; }
  .head-cta { margin-left: 0; height: 40px; font-size: 15px; padding: 0 18px; }
  .logo-kr { font-size: 28px; }
  .logo-en { font-size: 15px; }

  .stage { height: auto; display: grid; grid-template-columns: 1fr; padding: 48px 24px 0; overflow: hidden; }
  .stage > * { position: static; }
  .kicker { font-size: 14px; order: 1; }
  .headline { font-size: clamp(40px, 9vw, 76px); margin-top: 12px; order: 2; }
  .lede { width: auto; font-size: 18px; margin-top: 20px; order: 3; }
  .lede br { display: none; }
  .price { white-space: normal; font-size: 19px; margin-top: 16px; order: 4; }
  .coin { width: 100%; max-width: 520px; height: 68px; margin-top: 28px; order: 5; }
  .coin-btn { font-size: 17px; --bev: 14px; }
  .coin-btn .line { inset: 6px; --bev: 10px; }
  .more { margin-top: 18px; order: 6; justify-self: start; }
  .text-link { font-size: 16px; }
  .stage .art-main { order: 7; width: min(100%, 620px); height: auto; justify-self: center; margin-top: 36px; aspect-ratio: 8 / 9; object-fit: cover; object-position: 50% 0; -webkit-mask-image: none; mask-image: none; }
  .stage .art-back { display: none; }

  .scorebar { grid-template-columns: 1fr; height: auto; padding: 8px 24px; }
  .score, .score:first-child, .score:last-child { justify-content: space-between; padding: 18px 0; height: auto; }
  .score + .score { border-left: 0; border-top: 1px solid var(--rule); }
  .score dt { font-size: 16px; gap: 12px; }
  .score dt svg { width: 26px; height: 26px; margin-right: 0; }
  .score dd { font-size: 18px; gap: 4px; }
  .seg { font-size: 30px; }

  .select, .stages, .tiers { grid-template-columns: 1fr; }
  .stages li, .stages li + li { padding: 28px 0; border-left: 0; }
  .stages li + li { border-top: 1px solid var(--rule); }
  .split, .kakao-panel, .slots { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .site-head { padding: 0 16px; }
  .nav { display: none; }
  .nav.open { display: flex; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0; background: #0b0d1a; border-bottom: 1px solid var(--rule); padding: 8px 16px 16px; }
  .nav.open a { padding: 14px 0; font-size: 18px; border-bottom: 1px solid var(--rule); }
  .nav.open a:last-child { border-bottom: 0; }
  .nav a[aria-current="page"]::after { display: none; }
  .menu-btn {
    display: inline-grid; place-items: center; margin-left: 10px;
    width: 44px; height: 44px; border: 1px solid #2a3560; border-radius: 10px; background: transparent; color: var(--ivory); cursor: pointer;
  }
  .menu-btn svg { width: 22px; height: 22px; }
  .head-cta { margin-left: auto; padding: 0 14px; font-size: 14px; }
  .logo-en { display: none; }
  .wrap { width: calc(100% - 32px); }
  .stage { padding-inline: 16px; }
  .scorebar { padding-inline: 16px; }
  .board thead { display: none; }
  .board, .board tbody, .board tr, .board th, .board td { display: block; width: auto !important; }
  .board tr { padding: 18px 0; border-bottom: 1px solid var(--rule); }
  .board th, .board td { border: 0; padding: 4px 0; white-space: normal; }
  .board td.them::before { content: "보통 업체 · "; color: #6c7894; font-size: 13px; font-weight: 700; }
  .board td.us::before { content: "워니픽 · "; color: var(--cyan); font-size: 13px; font-weight: 700; }
  .coin-btn.solo { height: 68px; padding: 0 26px; font-size: 16px; }
}

/* ── review fixes: authored arrow, cabinet trio, page signs ── */
.arr { width: 1em; height: 1em; vertical-align: -0.14em; margin-left: .15em; }

.game {
  border-color: color-mix(in oklab, var(--glow) 28%, #141a33);
  border-radius: 18px 18px 6px 6px;
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--glow) 16%, transparent) 0 3px, transparent 3px calc(100% - 3px), color-mix(in oklab, var(--glow) 16%, transparent) calc(100% - 3px)),
    linear-gradient(180deg, #0d1022, #080913 75%);
}
.marquee {
  margin: 0;
  border-radius: 16px 16px 0 0;
  border-width: 0 0 2px;
  padding: 20px 18px;
  color: color-mix(in oklab, var(--glow) 72%, var(--ivory));
  text-shadow: 0 0 10px color-mix(in oklab, var(--glow) 35%, transparent);
  background: linear-gradient(180deg, color-mix(in oklab, var(--glow) 12%, #0a0c18), #0a0c18);
}
.panel { display: block; margin: 18px 26px 0; padding: 10px 14px; border-radius: 8px; background: #0b0e1d; border: 1px solid #1a2140; }
.panel svg { display: block; width: 120px; height: 20px; fill: color-mix(in oklab, var(--glow) 45%, #2a3150); transition: fill .35s var(--ease-out); }
.game:is(:hover, :focus-visible, .is-lit) .panel svg { fill: var(--glow); }

.stage-no .seg { font-size: 30px; margin-left: 0; color: var(--cyan); }

.sign {
  position: relative;
  display: inline-block;
  padding: clamp(22px, 3vw, 40px) clamp(26px, 4vw, 56px);
  margin-bottom: clamp(28px, 3vw, 40px);
  border: 2px solid var(--cyan);
  border-radius: 14px;
  background: linear-gradient(180deg, #0b1b36, #070d1d);
  box-shadow: 0 0 0 6px #0b0e1d, 0 0 0 7px #1d2a52, 0 24px 60px -30px rgba(25, 240, 247, .5);
}
.sign::before, .sign::after {
  content: ""; position: absolute; top: 50%; width: 8px; height: 40%;
  transform: translateY(-50%);
  background: radial-gradient(circle, var(--phosphor) 0 2.5px, transparent 3px) 50% 0 / 8px 14px repeat-y;
}
.sign::before { left: 10px; } .sign::after { right: 10px; }
.sign .h1 { margin: 0; color: var(--ivory); text-shadow: 0 0 22px rgba(25, 240, 247, .25); }

@media (max-width: 1100px) {
  .panel { margin-inline: 20px; }
  .sign { display: block; }
}

/* round 2: backlit acrylic caps at rest, paired 0원 in the score bar */
.marquee {
  color: #fff;
  background: linear-gradient(180deg, color-mix(in oklab, var(--glow) 38%, #0a0c18), color-mix(in oklab, var(--glow) 16%, #0a0c18));
  border-bottom-color: var(--glow);
  text-shadow: 0 0 12px color-mix(in oklab, var(--glow) 80%, transparent), 0 1px 0 rgba(0,0,0,.35);
  opacity: .78;
  transition: opacity .35s var(--ease-out), text-shadow .35s var(--ease-out);
}
.game:is(:hover, :focus-visible, .is-lit) .marquee {
  opacity: 1;
  color: #fff;
  background: linear-gradient(180deg, color-mix(in oklab, var(--glow) 55%, #0a0c18), color-mix(in oklab, var(--glow) 24%, #0a0c18));
  text-shadow: 0 0 18px var(--glow), 0 1px 0 rgba(0,0,0,.35);
}
.score dd .pair { align-self: center; margin-left: calc(18 * var(--u)); font-family: var(--sans); font-size: calc(30 * var(--u)); font-weight: 600; color: var(--phosphor); letter-spacing: -0.01em; }
@media (max-width: 1100px) { .score dd .pair { font-size: 14px; margin-left: 8px; } }

/* round 2b: detector tells — no decorative halo, caps as flat lit panels clipped by the cabinet */
.game { overflow: hidden; }
.marquee {
  border-radius: 0;
  background: linear-gradient(180deg, color-mix(in oklab, var(--glow) 42%, #0a0c18), color-mix(in oklab, var(--glow) 18%, #0a0c18));
}
.game:is(:hover, :focus-visible, .is-lit) .marquee {
  background: linear-gradient(180deg, color-mix(in oklab, var(--glow) 62%, #0a0c18), color-mix(in oklab, var(--glow) 28%, #0a0c18));
}

.score:first-child { padding-right: calc(40 * var(--u)); }

/* ── v6: 무료 진단 폼 · 상품 목록 · 30초 리포트 (2026-09-24) ── */
.tier .role { color: var(--muted); font-size: 14px; font-weight: 700; letter-spacing: .04em; margin: 0 0 6px; }
.tier .tag-pick { display: inline-block; margin-bottom: 10px; padding: 3px 10px; border: 1px solid var(--cyan); border-radius: 999px; color: var(--cyan); font-size: 13px; font-weight: 700; }
.tier ul { list-style: none; margin: 18px 0 0; padding: 0; }
.tier li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--rule); color: var(--ivory-dim); font-size: 16px; }
.tier li::before { content: "✓"; color: var(--cyan); font-weight: 800; }
.tier li.no { color: var(--muted); }
.tier li.no::before { content: "–"; color: var(--muted); }
.tier li.bonus::before { content: "+"; }
.tier .tier-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; }

.todo { color: var(--phosphor); border-bottom: 1px dashed var(--phosphor); }

.diag {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "head side" "list side"; align-items: start; column-gap: clamp(28px, 4vw, 64px); row-gap: 24px;
  padding: clamp(24px, 3.4vw, 48px); border: 1px solid #1d2a52; border-radius: 16px;
  background: linear-gradient(135deg, #0d1a3a, var(--aisle) 70%);
}
.diag-form { display: grid; gap: 4px; }
.diag-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.diag-tab {
  appearance: none; min-height: 48px; border: 1px solid #2a3560; border-radius: 8px; background: transparent;
  color: var(--ivory-dim); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.diag-tab[aria-selected="true"] { border-color: var(--cyan); color: var(--cyan); background: rgba(25,240,247,.06); }
.diag-form label.f { display: block; margin: 14px 0 6px; font-size: 15px; font-weight: 700; color: var(--ivory); }
.diag-form .req { color: var(--magenta); }
.diag-input {
  width: 100%; min-height: 56px; padding: 0 16px; border: 1px solid #2a3560; border-radius: 8px;
  background: #0b0d1a; color: var(--ivory); font: inherit; font-size: 17px;
}
.diag-input::placeholder { color: #7d8aa0; }
.diag-input:focus { outline: 3px solid var(--phosphor); outline-offset: 2px; border-color: transparent; }
select.diag-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--cyan) 50%), linear-gradient(135deg, var(--cyan) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.diag-hint { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.diag-consent { display: grid; gap: 12px; margin-top: 18px; font-size: 15px; color: var(--ivory-dim); }
.diag-consent label { display: grid; grid-template-columns: 22px 1fr; gap: 10px; cursor: pointer; }
.diag-consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--cyan); }
.diag-consent b { color: var(--ivory); }
.diag-error { min-height: 1.4em; margin: 12px 0 0; color: var(--magenta); font-size: 15px; }
.diag-form .coin-btn { width: 100%; margin-top: 8px; border: 0; background: transparent; font-family: inherit; font-weight: inherit; cursor: pointer; }
.diag-form[hidden] { display: none; }
.diag-done { display: none; }
.diag-done.on { display: block; }
.diag-done .h3 { color: var(--cyan); }
.diag-done p { color: var(--ivory-dim); }
.diag-done pre { white-space: pre-wrap; margin: 16px 0; padding: 16px; border: 1px dashed var(--slot-dash, #3a4468); border-radius: 10px; font: inherit; font-size: 16px; color: var(--ivory); }

.report {
  max-width: 520px; padding: 22px; border: 6px solid #05060c; border-radius: 10px;
  background: #0b0e1d; box-shadow: 0 0 0 1px #1d2a52;
}
.report-top { display: flex; justify-content: space-between; color: var(--muted); font-size: 14px; }
.report-status { margin: 10px 0 0; font-size: 22px; font-weight: 800; color: var(--ivory); }
.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 16px; background: var(--rule); border: 1px solid var(--rule); }
.report-grid div { padding: 14px; background: #0b0e1d; }
.report-grid small { display: block; color: var(--muted); font-size: 13px; }
.report-grid b { font-family: var(--seg); font-size: 26px; color: var(--cyan); text-shadow: 0 0 12px rgba(25,240,247,.45); }
.report-act { margin-top: 14px; padding: 14px; border-left: 3px solid var(--cyan); background: rgba(25,240,247,.06); color: var(--ivory); }
.report-act small { display: block; color: var(--muted); font-size: 13px; font-weight: 700; }

.diag-head { grid-area: head; }
.diag-list { grid-area: list; }
.diag-side { grid-area: side; }
@media (max-width: 1100px) {
  .diag { grid-template-columns: 1fr; grid-template-areas: "head" "side" "list"; }
}

/* ── v7: 신뢰 · 사례 · 결제 (ChatGPT 7차 검토 반영, 2026-09-24) ── */
/* 가격은 전광판 숫자 대신 읽기 쉬운 글꼴로. 점수판(첫 화면)만 7세그먼트를 유지한다. */
.tier .amt, .credits .amt, .rates td { font-family: var(--sans); font-weight: 800; letter-spacing: -0.01em; }
.tier .extra { margin: 14px 0 0; color: var(--muted); font-size: 15px; }
.plan-cta {
  display: flex; align-items: center; justify-content: center; min-height: 52px; margin-top: 22px;
  border: 1px solid var(--cyan); border-radius: 8px; color: var(--cyan); font-weight: 800; text-decoration: none;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out);
}
.plan-cta:hover, .plan-cta.lit { background: var(--cyan); color: var(--aisle); }
.plan-cta.lit:hover { box-shadow: 0 4px 24px rgba(25,240,247,.35); }

.trust-line { width: min(1240px, 100% - 48px); margin: 28px auto 0; color: var(--muted); font-size: 15px; }
.trust-line span { display: inline-block; margin-right: 10px; padding: 2px 10px; border: 1px solid #2a3560; border-radius: 999px; color: var(--ivory); font-weight: 700; font-size: 14px; }

.case { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 3.4vw, 56px); align-items: center; margin-top: 36px; }
.case-shot { display: block; border: 6px solid #05060c; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px #1d2a52; }
.case-shot img { display: block; width: 100%; height: auto; }
.case-tag { margin: 0 0 6px; color: var(--muted); font-size: 14px; font-weight: 700; }
.case-body .h3 { margin: 0 0 12px; }
.case-body .text-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; }

.pay-panel .pay-plan { color: var(--phosphor); }
.pay-account { margin: 18px 0 0; border-top: 2px solid var(--ivory); }
.pay-account div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.pay-account dt { color: var(--muted); font-size: 15px; }
.pay-account dd { margin: 0; font-weight: 700; font-size: 18px; }
.copy-btn { margin-left: 8px; padding: 4px 12px; border: 1px solid #2a3560; border-radius: 999px; background: transparent; color: var(--cyan); font: inherit; font-size: 14px; cursor: pointer; }
.copy-btn:hover { border-color: var(--cyan); }
.pay-panel .checklist li { grid-template-columns: 28px 1fr; }
.step-n { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; background: var(--cyan); color: var(--aisle); font-size: 13px; font-weight: 800; }

.site-foot .biz { display: grid; gap: 4px; font-size: 14px; }
.site-foot .biz b { color: var(--ivory); }

.diag { grid-template-rows: auto 1fr; }
.diag-list { align-self: start; }

@media (max-width: 1100px) {
  .case { grid-template-columns: 1fr; }
  .diag { grid-template-rows: none; }
}
.stage .art-back[hidden] { display: none; }

/* ── 무료 진단 즉시 요약 ── */
.quick-status { margin: 16px 0 0; padding: 14px 16px; border: 1px dashed #3a4468; border-radius: 10px; color: var(--ivory-dim); }
.quick { margin: 18px 0 8px; padding: 22px; border: 6px solid #05060c; border-radius: 10px; background: #0b0e1d; box-shadow: 0 0 0 1px #1d2a52; }
.quick-who { margin: 0; color: var(--ivory-dim); font-size: 15px; }
.quick-who b { color: var(--ivory); }
.quick-check { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.quick-retry { padding: 0; border: 0; background: none; color: var(--cyan); font: inherit; text-decoration: underline; text-underline-offset: .3em; cursor: pointer; }
.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 16px; background: var(--rule); border: 1px solid var(--rule); }
.quick-grid div { padding: 14px; background: #0b0e1d; }
.quick-grid small { display: block; color: var(--muted); font-size: 13px; }
.quick-grid b { font-family: var(--seg); font-size: 28px; color: var(--cyan); text-shadow: 0 0 12px rgba(25,240,247,.45); }
.quick-grid b.word { font-family: var(--sans); font-size: 22px; font-weight: 800; }
.quick-grid span { margin-left: 4px; color: var(--ivory-dim); font-weight: 700; }
.quick-note { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.quick-head { margin: 22px 0 8px; color: var(--ivory); }
.quick p { color: var(--ivory-dim); }
.quick-pick { padding-top: 12px; border-top: 1px solid var(--rule); }
.quick-next { margin-bottom: 0; padding: 12px 14px; border-left: 3px solid var(--cyan); background: rgba(25,240,247,.06); }
.quick-next b { color: var(--ivory); }
@media (max-width: 720px) { .quick-grid { grid-template-columns: 1fr; } }

/* ── 업종별 디자인 예시: 폰 화면 20개가 오락실 화면처럼 한 줄로 ── */
.ex-row { list-style: none; margin: 36px 0 0; padding: 0 0 18px; display: grid; grid-auto-flow: column; grid-auto-columns: clamp(168px, 20vw, 230px); gap: clamp(14px, 1.8vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-color: var(--cyan-deep) transparent; }
.ex-row li { scroll-snap-align: start; }
.ex-screen { margin: 0; border: 6px solid #05060c; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px #1d2a52; aspect-ratio: 420 / 909; background: #0b0e1d; transition: box-shadow .35s var(--ease-out), transform .35s var(--ease-out); }
.ex-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ex-row li:hover .ex-screen { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--cyan), 0 24px 50px -28px rgba(25,240,247,.7); }
.ex-kind { display: block; margin-top: 10px; color: var(--ivory-dim); font-size: 15px; font-weight: 600; text-align: center; }
@media (prefers-reduced-motion: reduce) { .ex-screen { transition: none; } }

/* ── 우리 동네 상점가: 오락기 화면 속 가게 아이콘 ── */
.street-cabinet { margin-top: 40px; border: 1px solid #1d2a52; border-radius: 18px 18px 8px 8px; overflow: hidden; background: #05060c; box-shadow: 0 28px 70px -40px rgba(25,240,247,.55); }
.street-marquee { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px; background: linear-gradient(180deg, #0e3c55, #0a2437); color: #fff; font-family: var(--display); font-size: clamp(22px, 2.4vw, 32px); text-shadow: 0 0 14px rgba(25,240,247,.8); }
.street-marquee .p { font-family: var(--seg); font-size: .55em; color: var(--cyan); }
.street-screen { position: relative; margin: 10px; border-radius: 12px; background: #05081a; padding: clamp(18px, 3vw, 36px) clamp(10px, 2vw, 28px) 18px; overflow: hidden; }
.street-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px); }
.street { list-style: none; margin: 0; padding: 0 0 14px; display: grid; grid-template-columns: repeat(8, 1fr); gap: clamp(4px, 1vw, 14px); border-bottom: 4px solid #1b2c55; }
.shop { position: relative; display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--ivory); border-radius: 10px; padding: 6px 2px 10px; transition: transform .3s var(--ease-out), background-color .3s var(--ease-out); }
.shop img { width: 100%; max-width: 170px; height: auto; mix-blend-mode: lighten; filter: saturate(.85) brightness(.9); transition: filter .3s var(--ease-out); }
.shop-name { margin-top: 4px; font-size: clamp(13px, 1.1vw, 15px); font-weight: 700; text-align: center; }
.shop-press { margin-top: 4px; font-family: var(--seg); font-size: 11px; color: var(--phosphor); opacity: 0; transition: opacity .3s var(--ease-out); }
.shop:hover, .shop:focus-visible { transform: translateY(-6px); background-color: rgba(25,240,247,.06); }
.shop:hover img, .shop:focus-visible img { filter: none; }
.shop:hover .shop-press, .shop:focus-visible .shop-press { opacity: 1; }
.street-credit { margin: 16px 0 0; text-align: center; font-family: var(--seg); font-size: 14px; color: var(--phosphor); letter-spacing: .2em; }
@media (max-width: 1100px) { .street { grid-template-columns: repeat(4, 1fr); row-gap: 18px; } }
@media (max-width: 560px) { .street { grid-template-columns: repeat(2, 1fr); } .shop-press { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .shop, .shop img, .shop-press { transition: none; } }

/* ── 업종별 이유 페이지 ── */
.why-head { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: clamp(20px, 3vw, 44px); align-items: center; }
.why-icon { width: 100%; height: auto; border-radius: 16px; background: #070b1b; box-shadow: 0 0 0 1px #1d2a52, 0 20px 50px -30px rgba(25,240,247,.6); }
.why-kind { margin: 0 0 10px; color: var(--cyan); font-weight: 700; letter-spacing: .06em; }
.why-data { margin-top: 18px; padding: 14px 16px; border-left: 3px solid var(--phosphor); background: rgba(246,236,90,.06); color: var(--ivory); }
.why-list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.why-list li { display: grid; grid-template-columns: 52px 1fr; gap: 16px; padding: clamp(22px, 2.6vw, 34px); background: var(--aisle); }
.why-n { font-family: var(--seg); font-size: 34px; color: var(--cyan); text-shadow: 0 0 12px rgba(25,240,247,.45); }
.why-list .h3 { margin: 0 0 8px; }
.why-list p { margin: 0; color: var(--ivory-dim); }
.why-ex { max-width: 300px; margin: 0 auto; }
.why-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 36px; }
@media (max-width: 720px) { .why-head { grid-template-columns: 1fr; } .why-icon { max-width: 180px; } .why-list { grid-template-columns: 1fr; } }
.why-data small { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }