/* ──────────────────────────────────────────────────────────
   신청서 공통 모양 — apply/design · video · blog · sns 가 같이 씁니다.
   🔴 여기를 고치면 신청서 네 장이 한꺼번에 바뀝니다.
   ────────────────────────────────────────────────────────── */
:root{
  /* ═══ 뼈대 토큰 (2026-10-06) ═══════════════════════════════════════
     🔴 새 값을 만들지 말고 여기 있는 것만 쓰세요.
        예전에는 글자 크기가 44가지, 여백이 45가지였습니다. 그래서 어디를 고치면
        어디가 어긋나는지 아무도 알 수 없었습니다.
     글자 — 본문·UI 는 아래 7단계만. 큰 «숫자»와 «아이콘»은 자리마다 따로 둡니다
            (숫자를 글자 단계에 맞추면 금액이 작아 보입니다).
     여백 — 전부 4의 배수. 7·9·11·13·17px 같은 값은 쓰지 않습니다. */
  --t-xs:12px; --t-sm:13px; --t-base:15px; --t-md:17px;
  --t-lg:22px; --t-xl:30px; --t-2xl:44px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:72px;
  --r-sm:6px; --r-md:12px; --r-pill:999px;

  --paper:#F4F7FB; --surface:#FFFFFF; --surface-2:#EFF3F9;
  --ink:#0E1B33; --muted:#56657F; --line:#DFE6F1;
  --accent:#2E5FE8; --accent-ink:#1E47C0; --band:#12294D;
  --ok:#12805C; --bad:#C2413B;
  --f:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--paper:#0A101E;--surface:#101B30;--surface-2:#16233C;--ink:#E7EDF7;--muted:#9BAAC3;
        --line:#22314C;--accent:#6E93FF;--accent-ink:#8FAAFF;--ok:#4FBF95;--bad:#F08A85;}
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f);font-size:var(--t-base);line-height:1.75;
     -webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{margin:0;letter-spacing:-.02em;line-height:1.3;word-break:keep-all}
p{margin:0;word-break:keep-all}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:5px}
.wrap{max-width:780px;margin:0 auto;padding:0 20px}

header{background:radial-gradient(120% 100% at 15% -20%,#1E4374 0%,#12294D 62%);color:#fff;padding:44px 0 40px}
header .back{display:inline-flex;align-items:center;gap:8px;color:#A9C4EA;font-size:var(--t-sm);
             font-weight:600;text-decoration:none;margin-bottom:8px;min-height:44px}
header .back:hover{color:#fff}
header h1{font-size:clamp(24px,4vw,32px)}
header p{color:#B7CBEA;margin-top:12px;font-size:var(--t-base);max-width:48ch}

main{padding:24px 0 72px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:24px 24px;margin-bottom:16px}
.eyebrow{font-size:var(--t-xs);font-weight:800;letter-spacing:.18em;color:var(--accent-ink);text-transform:uppercase}
.card h2{font-size:var(--t-md);margin:4px 0 16px}
.card h2 .req{color:var(--bad);font-size:var(--t-sm)}
.hint{color:var(--muted);font-size:var(--t-sm);font-weight:400}
.sub{color:var(--muted);font-size:var(--t-sm);margin:-8px 0 16px;line-height:1.7}

.fld{margin-bottom:16px}
.fld:last-child{margin-bottom:0}
.fld label{display:block;font-size:var(--t-sm);font-weight:700;margin-bottom:8px}
/* 🔴 .fld 안에 들어간 칩은 위 규칙에 눌려 display:block 이 됩니다(선택자가 더 자세함).
      그러면 gap 이 안 먹어 체크박스와 글씨가 붙습니다. 이 줄을 지우지 마세요. */
.fld label.chip{display:inline-flex;align-items:center;gap:12px;margin-bottom:0;font-size:var(--t-sm)}
.fld label .hint{font-weight:500}
.inp{width:100%;min-height:44px;padding:12px 12px;border:1px solid var(--line);border-radius:10px;
     background:var(--surface-2)}
.inp:focus{outline:none;border-color:var(--accent);background:var(--surface)}
textarea.inp{min-height:92px;resize:vertical}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:620px){.g2{grid-template-columns:1fr}}

/* 큰 고르는 칸 */
.picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media(max-width:640px){.picks{grid-template-columns:1fr}}
.pick{border:1px solid var(--line);border-radius:12px;padding:16px 16px;background:var(--surface-2);cursor:pointer;
      transition-property:background-color,border-color,box-shadow;transition-duration:.14s;transition-timing-function:ease-out;display:block;position:relative}
.pick:hover{border-color:var(--accent)}
.pick.on{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px rgba(46,95,232,.13)}
.pick .n{font-size:var(--t-xs);font-weight:800;color:var(--accent-ink);font-style:italic}
.pick b{display:block;font-size:var(--t-base);margin:4px 0 4px}
.pick span{font-size:var(--t-sm);color:var(--muted);line-height:1.6}
.pick input{position:absolute;opacity:0;pointer-events:none}

/* ── 고르는 비교표 — 세로로 견주면서 그 자리에서 고릅니다 ──
   🔴 라디오는 그대로 둡니다. 신청서가 값을 모으는 방식(form.js readOne)이 바뀌면 안 됩니다. */
.cmpw{margin-top:16px;overflow-x:auto;border:1px solid var(--line);border-radius:12px;
      background:var(--surface);-webkit-overflow-scrolling:touch;
      /* 🔴 position:relative 를 지우지 마세요 — 없으면 표(560px)가 «페이지 전체»를 옆으로
            밀어 버립니다(안에서만 밀려야 합니다). 홈페이지 쪽은 화면 전환 효과의 transform 이
            우연히 막아 주고 있었지만, 「동작 줄이기」를 켜면 그 효과가 꺼져 똑같이 샙니다. */
      position:relative}
.cmp{width:100%;border-collapse:collapse;min-width:560px}
.cmp th,.cmp td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:center;font-size:var(--t-sm)}
.cmp thead th{background:var(--surface-2);padding:0;vertical-align:top}
.cmp th:first-child,.cmp td:first-child{text-align:left;color:var(--muted);font-size:var(--t-xs);font-weight:700;
      white-space:nowrap;background:var(--surface-2);position:sticky;left:0;z-index:1}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp .big{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.cmp .no{color:var(--muted);opacity:.45}
.cmp .ok{color:var(--accent-ink);font-weight:800;font-size:var(--t-base)}
/* 머리칸 전체가 고르는 버튼입니다 */
.cmp .ph{display:block;padding:16px 16px 16px;cursor:pointer;transition-property:background-color,border-bottom-color,color;transition-duration:.15s;transition-timing-function:ease-out;border-bottom:3px solid transparent}
.cmp .ph:hover{background:var(--surface)}
.cmp .ph .dot{display:inline-block;width:15px;height:15px;border:2px solid var(--line);border-radius:50%;
      vertical-align:-3px;margin-right:8px;transition-property:background-color,border-color,box-shadow;transition-duration:.15s;transition-timing-function:ease-out}
.cmp .ph .nm{font-size:var(--t-xs);font-weight:800;color:var(--muted);letter-spacing:.1em}
.cmp .ph .pr{display:block;font-size:var(--t-md);font-weight:800;color:var(--ink);margin-top:8px;letter-spacing:-.02em;
      font-variant-numeric:tabular-nums}
.cmp .ph input{position:absolute;opacity:0;pointer-events:none}
.cmp .ph .pr.sm{font-size:var(--t-sm);color:var(--muted);font-weight:700}  /* 금액이 아닌 칸 */
.cmp .ph.on{background:var(--surface);border-bottom-color:var(--accent)}
.cmp .ph.on .dot{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3px var(--surface)}
.cmp .ph.on .nm{color:var(--accent-ink)}

/* 작은 고르는 칸 */
.chips{display:flex;flex-wrap:wrap;gap:8px}
/* 🔴 min-height:44px 를 지우지 마세요 — 손가락으로 누르는 최소 크기입니다(애플 44pt·구글 48dp).
      예전에는 37px 이라 손가락이 굵으면 빗나갔습니다. 글씨까지가 누름 범위입니다. */
.chip{border:1px solid var(--line);border-radius:999px;padding:8px 16px;min-height:44px;background:var(--surface-2);
      cursor:pointer;font-size:var(--t-sm);font-weight:600;display:inline-flex;align-items:center;gap:12px;transition-property:background-color,border-color,color;transition-duration:.14s;transition-timing-function:ease-out}
.chip:hover{border-color:var(--accent)}
.chip.on{border-color:var(--accent);background:var(--surface);color:var(--accent-ink)}
.chip input{width:20px;height:20px;accent-color:var(--accent);margin:0;flex:0 0 auto}

/* 수량 고르는 칸 (옵션 추가) */
.opts{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.opt{display:flex;align-items:center;gap:16px;padding:16px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.opt:last-child{border-bottom:0}
.opt .t{flex:1;min-width:190px}
.opt .t b{display:block;font-size:var(--t-base)}
.opt .t span{font-size:var(--t-sm);color:var(--muted);line-height:1.6}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface-2)}
/* 🔴 44px — 더하기·빼기는 신청서에서 가장 많이 눌리는 단추입니다. 줄이지 마세요. */
.qty button{border:0;background:none;width:44px;height:44px;font-size:var(--t-md);cursor:pointer;color:var(--muted)}
.qty button:hover{color:var(--accent-ink)}
.qty input{width:48px;height:44px;border:0;background:none;text-align:center;font-weight:800;
           font-variant-numeric:tabular-nums}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.consent{min-height:44px;display:flex;gap:16px;align-items:flex-start;font-size:var(--t-sm);color:var(--muted);line-height:1.7}
.consent input{width:22px;height:22px;accent-color:var(--accent);margin-top:2px;flex:0 0 auto}
.consent a{color:var(--accent-ink);font-weight:700}

.note{background:var(--surface-2);border-radius:11px;padding:16px 16px;font-size:var(--t-sm);color:var(--muted);
      line-height:1.8}
.note b{color:var(--ink)}

/* 개인정보 수집 · 이용 고지 상자 (동의 체크 칸 바로 위) */
.pinfo{background:var(--surface-2);border-radius:11px;padding:16px;margin-bottom:16px;font-size:var(--t-sm);color:var(--muted);line-height:1.8}
.pinfo b{color:var(--ink)}
.pinfo ul{list-style:none;margin:6px 0 0;padding:0}
.pinfo li{position:relative;padding-left:14px}
.pinfo li::before{content:"·";position:absolute;left:3px;font-weight:800}

.submit{text-align:center;padding-top:8px}
/* ── 버튼 한 벌 (2026-10-06) ──────────────────────────────────
   🔴 새 버튼 클래스를 만들지 마세요. 이 세 가지면 됩니다.
      .btn + .btn-primary (채운 것) / .btn-ghost (테두리만)
      크기는 .btn-s (작게) · .btn-lg (크게) 로만 바꿉니다.
   예전에는 .btn-primary / .btn-p / .btn-light 가 파일마다 따로 있어서
   「기본 버튼」 하나 고치려면 세 군데를 찾아야 했습니다.
   min-height:44px 는 손가락으로 누르는 최소 크기입니다. 줄이지 마세요. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:12px 24px;border-radius:var(--r-md);font-family:inherit;font-weight:700;font-size:var(--t-base);border:1px solid transparent;cursor:pointer;white-space:nowrap;transition-property:background-color,transform;transition-duration:.14s;transition-timing-function:ease-out}
.btn-s{min-height:36px;padding:8px 12px;font-size:var(--t-sm);border-radius:var(--r-sm)}
.btn-lg{padding:16px 32px;font-size:var(--t-md)}
/* 신청서의 「내기」 단추는 큰 치수를 씁니다 */
.submit .btn,.btn-primary{background:var(--band);color:#fff}
.submit .btn{padding:16px 32px;font-size:var(--t-md)}
.btn:hover{background:#1B3A69}
.btn[disabled]{opacity:.55;cursor:default}
.err{color:var(--bad);font-size:var(--t-sm);margin-top:12px;min-height:20px;font-weight:600}

.done{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:44px 24px;text-align:center}
.done .ic{font-size:40px}
.done h2{font-size:var(--t-lg);margin:12px 0 8px}
.done p{color:var(--muted);font-size:var(--t-base)}
.done .box{background:var(--surface-2);border-radius:11px;padding:16px 16px;margin-top:20px;
           font-size:var(--t-sm);text-align:left;color:var(--muted);line-height:1.8}
.done .box b{color:var(--ink)}

footer{border-top:1px solid var(--line);padding:24px 0 48px;color:var(--muted);font-size:var(--t-xs);line-height:1.9}
footer a{color:var(--ink);font-weight:700;text-decoration:none}
footer a:hover{text-decoration:underline}
footer span.sep{margin:0 8px;color:var(--line)}

/* ── 세부 다듬기 (2026-10-06) ─────────────────────────────────────
   🔴 왜 넣었는지 적어 둡니다. 지우기 전에 읽어 주세요.
   ① 제목 줄바꿈 — 「홍보에 필요한 것을 / 한 회사에서」처럼 윗줄만 길고 아랫줄에
      한두 글자만 남는 모양을 막습니다(text-wrap:balance).
   ② 설명글 줄바꿈 — 마지막 줄에 한 낱말만 떨어지는 것을 막습니다(pretty).
   ③ 누를 때 — 살짝 눌리는 느낌만 줍니다. 크게 움직이면 어지럽습니다.
   ④ 글자 매끄럽게 — 맥에서 글씨가 두껍게 뭉개지는 것을 막습니다.
   ⑤ 「동작 줄이기」를 켠 분에게는 ③이 꺼집니다. */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,.h2,.h1{text-wrap:balance}
.lead,.sub,.hint,.pnote,.note,.card p,.gsub{text-wrap:pretty}
.btn:active,.chip:active,.pick:active,.sp:active,.tab:active{transform:scale(.97)}
img{outline:1px solid rgba(0,0,0,.1);outline-offset:-1px}
@media (prefers-color-scheme:dark){img{outline-color:rgba(255,255,255,.1)}}
@media (prefers-reduced-motion:reduce){
  .btn:active,.chip:active,.pick:active,.sp:active,.tab:active{transform:none}
}