:root { --ink:#07111f; --muted:#96a6b8; --white:#fff; --cyan:#4de4d4; --blue:#5390ff; }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; color:var(--white); background:radial-gradient(circle at 82% 12%,rgba(77,228,212,.16),transparent 28rem),radial-gradient(circle at 8% 88%,rgba(49,120,255,.18),transparent 30rem),var(--ink); font-family:"Noto Sans KR",sans-serif; }
body::before { position:fixed; inset:0; content:""; pointer-events:none; opacity:.13; background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px); background-size:54px 54px; mask-image:linear-gradient(to bottom,#000,transparent 85%); }
.maintenance-shell { position:relative; display:grid; place-items:center; min-height:100vh; padding:48px 24px; }
.maintenance-card { width:min(820px,100%); }
.brand { display:inline-flex; align-items:center; gap:12px; margin-bottom:clamp(64px,12vh,120px); font:700 18px/1 "Manrope",sans-serif; }
.brand-mark { position:relative; display:inline-block; width:28px; height:22px; }
.brand-mark i { position:absolute; top:3px; width:15px; height:15px; border:2px solid currentColor; border-radius:50%; }
.brand-mark i:first-child { left:0; border-right-color:transparent; }
.brand-mark i:last-child { right:0; border-left-color:transparent; }
.status { display:flex; align-items:center; gap:11px; margin-bottom:24px; color:var(--cyan); font:700 11px/1.3 "Manrope",sans-serif; letter-spacing:.17em; }
.status span { width:8px; height:8px; background:var(--cyan); border-radius:50%; box-shadow:0 0 0 7px rgba(77,228,212,.1); }
h1 { margin:0; font-size:clamp(44px,7vw,76px); line-height:1.13; letter-spacing:-.06em; font-weight:600; word-break:keep-all; }
h1 em { color:var(--blue); font-style:normal; }
.intro { max-width:680px; margin:30px 0 0; color:#b8c4d2; font-size:clamp(16px,2vw,18px); line-height:1.85; word-break:keep-all; }
.facts { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:48px 0 0; padding:25px 0; border-block:1px solid rgba(255,255,255,.13); }
.facts div { display:grid; gap:6px; }
.facts dt { color:var(--cyan); font:700 10px/1 "Manrope",sans-serif; letter-spacing:.15em; }
.facts dd { margin:0; color:#c6d1dd; font-size:13px; }
.contact-box { margin-top:32px; border:1px solid rgba(255,255,255,.16); border-radius:20px; background:rgba(255,255,255,.045); overflow:hidden; }
.contact-box summary { display:flex; justify-content:space-between; align-items:center; padding:19px 22px; cursor:pointer; list-style:none; font-weight:700; }
.contact-box summary::-webkit-details-marker { display:none; }
.contact-box[open] summary { border-bottom:1px solid rgba(255,255,255,.13); }
.contact-content { padding:24px 22px 26px; }
.contact-content>p { margin:0 0 22px; color:var(--muted); font-size:14px; }
form { display:grid; gap:17px; }
form label:not(.consent) { display:grid; gap:8px; }
form label>span { font-size:13px; font-weight:600; }
input,textarea { width:100%; padding:13px 14px; color:var(--white); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.17); border-radius:11px; font:400 16px/1.5 "Noto Sans KR",sans-serif; outline:none; }
textarea { resize:vertical; }
input:focus,textarea:focus { border-color:var(--cyan); box-shadow:0 0 0 4px rgba(77,228,212,.08); }
.consent { display:grid; grid-template-columns:18px 1fr; gap:9px; align-items:start; color:var(--muted); }
.consent input { width:17px; height:17px; margin:2px 0 0; accent-color:var(--cyan); }
.consent span { font-weight:400; }
button { display:flex; justify-content:space-between; align-items:center; min-height:52px; padding:0 18px; color:var(--ink); background:var(--cyan); border:0; border-radius:12px; font:700 14px "Noto Sans KR",sans-serif; cursor:pointer; }
button:hover { background:#7aeee2; }
footer { display:flex; justify-content:space-between; gap:24px; margin-top:34px; color:#74869a; font:600 11px/1.5 "Manrope",sans-serif; }
@media (max-width:580px) { .maintenance-shell { align-items:start; padding:32px 18px; } .brand { margin-bottom:70px; } h1 { font-size:43px; } .facts { grid-template-columns:1fr; gap:17px; } footer { flex-direction:column; gap:7px; } }
@media (prefers-reduced-motion:no-preference) { .maintenance-card { animation:appear .65s ease-out both; } @keyframes appear { from { opacity:0; transform:translateY(16px); } } }