/* ══════════════════════════════════════════════════════════════════
   HILiT 신청 양식 공용 스타일 — 출시 알림(coming-soon.html) · 광고 문의(ad-inquiry.html)가 함께 쓴다.
   🔺 2026-10-09 coming-soon.html 안에 있던 규칙을 그대로 옮겨 왔다(광고 문의 양식을 열면서 — 사용자 지시).
   🔴 색·간격은 tokens.css 다음에 불러온다. 랜딩(site.css)과 같은 종이·잉크·시안 색이다.
   ══════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
:root { --paper: #f3fcfe; --ink: #0d1b24; --ink-2: #3c4f5a; --cyan: #08d9ed; --cb: #0077c8; --err: #b42318;
  --font-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; }
html { background: var(--paper); }
body { min-width: 320px; min-height: 100svh; margin: 0; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); font-family: var(--font-body); line-height: 1.6; word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
a { color: var(--cb); text-underline-offset: .25em; }
:focus-visible { outline: 3px solid #1d5bff; outline-offset: 3px; }
::selection { background: var(--cyan); color: var(--ink); }
[hidden] { display: none !important; }

/* ── 위 막대 — 랜딩 내비와 같은 검정 막대 + 시안→라임 선 ─────────────── */
.bar { position: sticky; inset-block-start: 0; z-index: var(--z-nav); background: rgb(232 250 254 / .92); box-shadow: 0 1px 0 var(--ink), 0 4px 0 var(--cyan); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.bar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: min(100%, 87.5rem); min-height: var(--nav-height); margin-inline: auto; padding-inline: var(--page-gutter); }
.bar-brand { display: inline-flex; }
.bar-brand img { display: block; width: clamp(6rem, 10vw, 7.5rem); height: auto; }
.bar-back { display: inline-flex; align-items: center; gap: .5em; min-height: 2.5rem; padding-inline: var(--space-4); border: 0; background: rgb(13 27 36 / .08); color: var(--ink); font-size: var(--text-xs); font-weight: 700; text-decoration: none; white-space: nowrap; }
.bar-back::before { content: "\2190"; }

/* ── 본문 ─────────────────────────────────────────────────────────── */
.soon { flex: 1; display: grid; place-items: center; padding: var(--space-7) var(--page-gutter) var(--space-8);
  background: radial-gradient(40% 30% at 20% 10%, rgb(255 255 255 / .8), transparent 70%), radial-gradient(55% 40% at 50% 0%, rgb(8 217 237 / .75), transparent 72%), linear-gradient(180deg, #7fe4f6 0%, #c4f2fb 40%, #e4f9fd 75%); }
.soon-inner { display: grid; gap: var(--space-5); width: min(100%, 30rem); text-align: center; }
.soon-mark { justify-self: center; width: clamp(4.5rem, 12vw, 6rem); height: auto; border-radius: 18%; box-shadow: 0 18px 40px rgb(13 27 36 / .25); }
.eyebrow { margin: 0; color: var(--cb); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; }
h1 { margin: 0; font-size: clamp(2rem, 6vw, 2.9rem); font-weight: 800; line-height: 1.12; letter-spacing: -.05em; }
h1 em { white-space: nowrap; font-style: normal; background: linear-gradient(100deg, #0091d1, #1d5bff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lede { margin: 0; color: var(--ink-2); font-size: var(--text-base); }

/* ── 신청 양식 ───────────────────────────────────────────────────── */
.form { display: grid; gap: var(--space-4); margin-block-start: var(--space-2); text-align: start; }
.field { display: grid; gap: var(--space-2); }
.field label { font-size: var(--text-sm); font-weight: 700; }
.field input { width: 100%; min-height: 3.25rem; padding-inline: var(--space-4); border: 1.5px solid var(--ink); border-radius: 0; background: #fff; color: var(--ink); font: inherit; font-size: 1rem; }
.field input::placeholder { color: #7a8b94; }
.field input:focus-visible { outline: none; border-color: #1d5bff; box-shadow: 0 0 0 2px #1d5bff; }
.field input[aria-invalid="true"] { border-color: var(--err); }
.field-error { margin: 0; color: var(--err); font-size: var(--text-xs); font-weight: 600; }
/* 사람에게는 보이지 않는 칸 — 자동 입력기만 채운다. */
.trap { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 이용 유형 — 넷 중 하나를 고른다. 고른 칸은 테두리와 바탕으로 표시한다. */
.choices { display: grid; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.choices legend { margin-block-end: var(--space-2); padding: 0; font-size: var(--text-sm); font-weight: 700; }
.choice-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.choice { display: flex; align-items: center; gap: var(--space-3); min-height: 3.25rem; padding-inline: var(--space-4); border: 1.5px solid var(--ink); background: #fff; font-size: var(--text-sm); font-weight: 700; cursor: pointer; }
.choice input { flex: none; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--ink); }
.choice:has(input:checked) { background: #bff3fc; box-shadow: 3px 3px 0 var(--ink); }
.choice:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.choices[aria-invalid="true"] .choice { border-color: var(--err); }
.choices-hint { margin: calc(-1 * var(--space-1)) 0 var(--space-1); color: var(--ink-2); font-size: var(--text-xs); }
.consent { display: grid; gap: var(--space-2); padding: var(--space-4); border: 0; border-radius: .75rem; background: #eef9fc; }
.consent-check { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); font-weight: 700; cursor: pointer; }
.consent-check input { flex: none; width: 1.15rem; height: 1.15rem; margin: .2rem 0 0; accent-color: var(--ink); }
.consent-check strong { color: var(--cb); }
.consent details { font-size: var(--text-xs); color: var(--ink-2); }
.consent summary { width: fit-content; margin-inline-start: calc(1.15rem + var(--space-3)); color: var(--ink-2); text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }
.consent dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: var(--space-3) 0 0; }
.consent dt { color: var(--ink); font-weight: 700; }
.consent dd { margin: 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.75rem; padding-inline: var(--space-6); border: 0; border-radius: 0; background: var(--cyan); color: var(--ink); font: inherit; font-size: var(--text-base); font-weight: 800; text-decoration: none; cursor: pointer; transition: transform 120ms ease-out, background-color 220ms ease-out, color 220ms ease-out; }
.btn:disabled { opacity: .55; cursor: progress; }
@media (hover: hover) and (pointer: fine) {
  .btn:not(:disabled):hover { background: var(--ink); color: var(--cyan); transform: translateY(-2px); }
}
.form-status { margin: 0; min-height: 1.5em; color: var(--err); font-size: var(--text-sm); font-weight: 600; text-align: center; }

.done { display: grid; gap: var(--space-3); padding: var(--space-6) var(--space-5); border: 0; border-radius: 1.25rem; background: #fff; box-shadow: 0 1px 2px rgb(13 27 36 / .06), 0 14px 36px rgb(13 27 36 / .1); }
.done h2 { margin: 0; font-size: var(--text-lg); font-weight: 800; }
.done p { margin: 0; color: var(--ink-2); font-size: var(--text-sm); }
.done b { color: var(--ink); }

/* ── 광고 문의 양식에서 더 쓰는 칸 — 여러 줄 입력 · 고르기 · 두 칸 나란히 ── */
.field textarea, .field select { width: 100%; padding: var(--space-3) var(--space-4); border: 1.5px solid var(--ink); border-radius: 0; background: #fff; color: var(--ink); font: inherit; font-size: 1rem; }
.field textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.field select { min-height: 3.25rem; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 1.25rem) 55%, calc(100% - .9rem) 55%; background-size: .35rem .35rem; background-repeat: no-repeat; }
.field :is(textarea, select):focus-visible { outline: none; border-color: #1d5bff; box-shadow: 0 0 0 2px #1d5bff; }
.field :is(textarea, select)[aria-invalid="true"] { border-color: var(--err); }
.field .opt-label { color: var(--ink-2); font-weight: 500; }
.field-hint { margin: 0; color: var(--ink-2); font-size: var(--text-xs); }
.field-row { display: grid; gap: var(--space-4); }
@media (min-width: 40rem) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-group-title { margin: var(--space-3) 0 0; padding-block-start: var(--space-3); border-block-start: 1px solid rgb(13 27 36 / .15); font-size: var(--text-sm); font-weight: 700; }

/* 휴대폰 — 글꼴 굵기를 둘(400·700)로만 받는다(fonts-mobile.css). 없는 굵기를 흉내 내 굵히지 않는다. */
@media (max-width: 39.999rem) { html { font-synthesis: none; } }