/* 지원자 화면 — 시안 B안(미드나잇 오로라) */
:root { --bg:#05060c; --ink:#eef0ff; --font:'Pretendard','Noto Sans KR','Malgun Gothic',-apple-system,sans-serif; color-scheme:dark; }
* { box-sizing:border-box; word-break:keep-all; }
html, body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); -webkit-font-smoothing:antialiased; }
button, input { font-family:inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline:2px solid #8f95ff; outline-offset:2px; }

.aur { position:fixed; inset:-40%; filter:blur(60px); opacity:.7; pointer-events:none; z-index:0;
       background: radial-gradient(circle at 30% 30%, #4f46e5 0, transparent 35%),
                   radial-gradient(circle at 70% 60%, #0ea5e9 0, transparent 30%),
                   radial-gradient(circle at 40% 80%, #a855f7 0, transparent 30%);
       animation: drift 12s ease-in-out infinite alternate; }
@keyframes drift { to { transform: rotate(40deg) scale(1.15) translate(4%,-6%); } }

.scr { position:relative; z-index:1; max-width:440px; margin:0 auto; padding:52px 20px calc(120px + env(safe-area-inset-bottom)); min-height:100vh; }
.loading { padding-top:40vh; text-align:center; opacity:.5; font-size:13px; }

@keyframes up { from { opacity:0; transform:translateY(16px); filter:blur(6px);} to {opacity:1; transform:none; filter:none;} }
.in { opacity:0; animation: up .9s cubic-bezier(.2,.8,.2,1) forwards; }
.d1{animation-delay:.15s}.d2{animation-delay:.35s}.d3{animation-delay:.55s}.d4{animation-delay:.8s}
.p-brand { font-size:11px; letter-spacing:.32em; opacity:.65; font-weight:600; }
.hi { font-size:26px; font-weight:700; line-height:1.3; margin-top:18px; letter-spacing:-.02em; }
.hi span { background:linear-gradient(90deg,#a5b4fc,#67e8f9,#c4b5fd,#a5b4fc); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:300%; animation: sheen 6s linear infinite; }
@keyframes sheen { to { background-position:300% 0; } }
.sub { font-size:12.5px; opacity:.6; margin:8px 0 18px; line-height:1.6; }
.glass { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-radius:22px; padding:14px 12px; }

.cal-head { display:flex; align-items:center; justify-content:space-between; padding:0 4px 10px; }
.cal-title { font-size:16px; font-weight:700; }
.cal-title small { font-size:12px; opacity:.5; font-weight:500; margin-right:4px; }
.nav { width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06); color:#fff; display:grid; place-items:center; cursor:pointer; font-size:15px; }
.nav:disabled { opacity:.2; cursor:default; }
.wk, .grid { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; }
.wk { font-size:10.5px; opacity:.45; padding-bottom:6px; }
.wk .sun { color:#fda4af; } .wk .sat { color:#93c5fd; }
.grid { row-gap:4px; }
.grid.slide-l { animation: slideL .45s cubic-bezier(.2,.8,.2,1); }
.grid.slide-r { animation: slideR .45s cubic-bezier(.2,.8,.2,1); }
@keyframes slideL { from { opacity:0; transform:translateX(30px);} to {opacity:1; transform:none;} }
@keyframes slideR { from { opacity:0; transform:translateX(-30px);} to {opacity:1; transform:none;} }
.day { position:relative; height:40px; width:40px; margin:auto; display:grid; place-items:center; font-size:13.5px; border-radius:50%; border:none; background:none; color:inherit; padding:0; transition: background .25s, box-shadow .25s, transform .15s; }
.day.off { opacity:.22; }
.day.full { opacity:.35; }
.day.full::after { content:'마감'; position:absolute; bottom:-3px; left:0; right:0; font-size:8px; }
.day.ok { cursor:pointer; font-weight:600; }
.day.ok::after { content:''; position:absolute; bottom:4px; left:50%; margin-left:-2px; width:4px; height:4px; border-radius:50%; background:#67e8f9; box-shadow:0 0 6px #67e8f9; }
.day.ok:hover { background:rgba(255,255,255,.1); }
.day.ok:active { transform:scale(.9); }
.day.today { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.day.sel { background:linear-gradient(135deg,#6366f1,#0ea5e9); box-shadow:0 6px 20px -4px rgba(14,165,233,.9); }
.day.sel::after { background:#fff; box-shadow:none; }
.no-slots { text-align:center; font-size:12.5px; opacity:.6; padding:14px 0 4px; line-height:1.6; }

.slots-label { font-size:13px; font-weight:600; margin:18px 4px 10px; display:flex; justify-content:space-between; }
.slots-label small { opacity:.5; font-weight:500; }
.slots { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.sl { padding:13px 0; text-align:center; border-radius:13px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08); font-size:14px; font-variant-numeric:tabular-nums; cursor:pointer; opacity:0; animation: up .5s cubic-bezier(.2,.8,.2,1) forwards; color:inherit; transition: background .2s, box-shadow .2s, transform .15s; }
.sl:active { transform:scale(.94); }
.sl.taken { opacity:.25 !important; cursor:default; text-decoration:line-through; }
.sl.pick { background:linear-gradient(135deg,#6366f1,#0ea5e9); border-color:transparent; box-shadow:0 8px 24px -6px rgba(14,165,233,.8); }
.pnote { display:flex; gap:8px; align-items:flex-start; margin-top:12px; padding:11px 13px; border-radius:14px; background:rgba(251,191,36,.1); border:1px solid rgba(251,191,36,.25); color:#fde68a; font-size:12px; line-height:1.55; }
.pnote::before { content:'!'; flex:none; width:16px; height:16px; border-radius:50%; background:#fbbf24; color:#1a1406; font-weight:800; font-size:10.5px; display:grid; place-items:center; margin-top:1px; }
.sec-t { font-size:13px; font-weight:700; margin:26px 4px 10px; letter-spacing:-.01em; }

.place { border-radius:20px; overflow:hidden; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }
.place .map { display:block; line-height:0; border-bottom:1px solid rgba(255,255,255,.08); }
.place .map svg { width:100%; height:auto; display:block; }
.pin-pulse { transform-box:fill-box; transform-origin:center; animation: pulse 2s ease-out infinite; }
@keyframes pulse { from { transform:scale(.4); opacity:.7; } to { transform:scale(1.8); opacity:0; } }
.addr-row { display:flex; gap:10px; align-items:flex-start; padding:13px 14px 4px; }
.addr-row > div { flex:1; min-width:0; font-size:12.5px; line-height:1.5; }
.addr-row b { display:block; font-size:13.5px; }
.addr-row span { opacity:.7; }
.mini { flex:none; height:28px; padding:0 11px; border-radius:8px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#eef0ff; font-size:11.5px; cursor:pointer; }
.guide { display:flex; gap:7px; align-items:center; padding:6px 14px 0; font-size:12px; color:#a5f3fc; }
.guide i { width:16px; height:16px; border-radius:50%; background:#EF7C1C; color:#fff; font-style:normal; font-size:9px; font-weight:800; display:grid; place-items:center; flex:none; }
.route { margin:10px 14px 0; padding:11px 12px; border-radius:12px; background:rgba(255,255,255,.05); font-size:12px; line-height:1.6; }
.route-t { font-weight:700; font-size:12.5px; margin-bottom:4px; }
.route p { margin:0; opacity:.7; }
.route ol { margin:6px 0 0; padding:0; list-style:none; counter-reset:st; display:grid; gap:5px; }
.route li { counter-increment:st; display:flex; gap:7px; opacity:.85; }
.route li::before { content:counter(st); flex:none; width:16px; height:16px; border-radius:50%; background:rgba(103,232,249,.18); color:#a5f3fc; font-size:9.5px; font-weight:800; display:grid; place-items:center; margin-top:1px; }
.map-btns { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:12px 14px 14px; }
.mbtn { height:38px; border-radius:10px; display:grid; place-items:center; font-size:12.5px; font-weight:600; color:#eef0ff; text-decoration:none; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); }
.mbtn:hover { background:rgba(255,255,255,.14); }

.consent { margin-top:22px; padding:14px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; gap:10px; }
.c-check { flex:1; display:flex; align-items:center; gap:9px; font-size:13px; cursor:pointer; min-width:0; }
.c-check input { accent-color:#38bdf8; width:19px; height:19px; margin:0; flex:none; }
.c-check b, .cdoc h4 b { color:#fda4af; font-weight:700; }
.c-view { flex:none; background:none; border:none; color:#a5b4fc; font-size:12.5px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:4px; }

.cta-bar { position:fixed; left:0; right:0; bottom:0; z-index:4; padding:14px 20px calc(22px + env(safe-area-inset-bottom)); background:linear-gradient(to top, rgba(5,6,12,.96) 60%, transparent); }
.cta-bar .cta { display:block; max-width:400px; margin:0 auto; }
.cta { width:100%; padding:16px; border:none; border-radius:18px; font-weight:700; font-size:15px; background:#fff; color:#05060c; cursor:pointer; transition: opacity .3s, transform .15s; }
.cta:disabled { opacity:.3; cursor:default; }
.cta:not(:disabled):active { transform:scale(.97); }
.ghost { flex:1; padding:15px; border-radius:16px; border:1px solid rgba(255,255,255,.15); background:transparent; color:#fff; font-size:14px; cursor:pointer; }

.dim { position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); z-index:5; opacity:0; pointer-events:none; transition:.35s; }
.dim.show { opacity:1; pointer-events:auto; }
.sheet { position:fixed; left:50%; bottom:0; width:min(100%, 440px); transform:translate(-50%, 110%); z-index:6; border-radius:30px 30px 0 0; padding:26px 20px calc(22px + env(safe-area-inset-bottom)); background:rgba(22,24,40,.96); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(20px); transition: transform .5s cubic-bezier(.2,.9,.2,1); }
.sheet.show { transform:translate(-50%, 0); }
.sheet h4 { margin:0 0 14px; font-size:17px; }
.sheet .when { padding:16px; border-radius:16px; background:rgba(255,255,255,.06); margin-bottom:10px; }
.sheet .when b { display:block; font-size:20px; }
.sheet .when span { font-size:12px; opacity:.6; }
.sheet .pnote { margin:0 0 14px; }
.row { display:flex; gap:8px; }
.row .cta { flex:2; }
.ppop { position:fixed; inset:0; z-index:9; display:none; align-items:center; justify-content:center; padding:28px; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); }
.ppop.show { display:flex; }
.pcard { width:100%; max-width:380px; padding:24px 20px 18px; border-radius:24px; background:#171a2c; border:1px solid rgba(255,255,255,.14); text-align:center; }
.pcard h4 { margin:0 0 8px; font-size:17px; }
.pcard p { margin:0 0 18px; font-size:13px; opacity:.75; line-height:1.6; }
.pcard.cdoc { text-align:left; }
.cdoc h4 { font-size:15.5px; }
.cdoc-body { font-size:12.5px; line-height:1.75; opacity:.78; margin:12px 0 18px; max-height:50vh; overflow-y:auto; white-space:pre-line; }

.okbadge { width:56px; height:56px; border-radius:50%; display:grid; place-items:center; margin-top:18px; background:linear-gradient(135deg,#6366f1,#0ea5e9); box-shadow:0 0 40px rgba(56,189,248,.55); transform:scale(0); animation: pop .7s .1s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes pop { to { transform:scale(1); } }
.okbadge path { stroke-dasharray:40; stroke-dashoffset:40; animation: draw .5s .5s ease forwards; }
@keyframes draw { to { stroke-dashoffset:0; } }
.okbadge + .hi { margin-top:14px; }
.ticket { margin-top:4px; border-radius:24px; overflow:hidden; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(16px); }
.ticket .top { padding:22px 20px 18px; background:linear-gradient(135deg,rgba(99,102,241,.55),rgba(14,165,233,.45)); position:relative; }
.ticket .dday { position:absolute; top:18px; right:18px; font-size:12px; font-weight:700; padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.2); }
.ticket .lb { font-size:10.5px; letter-spacing:.2em; opacity:.75; }
.ticket .date { font-size:21px; font-weight:700; margin-top:10px; }
.ticket .time { font-size:40px; font-weight:800; letter-spacing:-.03em; line-height:1.1; font-variant-numeric:tabular-nums; }
.ticket .time small { font-size:15px; font-weight:600; opacity:.8; margin-right:6px; }
.ticket .cut { height:0; border-top:1.5px dashed rgba(255,255,255,.2); margin:0 16px; }
.ticket .rows { padding:14px 20px 18px; font-size:13px; }
.ticket .rows div { display:flex; justify-content:space-between; padding:5px 0; }
.ticket .rows span { opacity:.55; }
.callbtn { margin-top:14px; display:flex; align-items:center; gap:10px; padding:16px; border-radius:16px; background:#fff; color:#05060c; text-decoration:none; font-weight:700; font-size:14.5px; }
.callbtn span { margin-left:auto; font-weight:600; font-size:13px; opacity:.6; font-variant-numeric:tabular-nums; }
.tfoot { margin-top:12px; font-size:12px; opacity:.55; line-height:1.6; text-align:center; }
.bad { padding-top:12vh; display:flex; flex-direction:column; align-items:center; text-align:center; }
.bad .ic { width:76px; height:76px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); font-size:32px; margin-bottom:22px; }
.bad h4 { font-size:21px; margin:0 0 10px; }
.bad p { font-size:13px; opacity:.6; line-height:1.7; margin:0 0 22px; }
.bad .callbtn { width:100%; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }