:root {
  --ink: #050706;
  --panel: #0b0e0c;
  --panel-high: #111611;
  --line: #293128;
  --paper: #e8ede4;
  --muted: #899288;
  --signal: #b6ff34;
  --warning: #ff8a34;
  --display: "DIN Condensed", "Bebas Neue", "Avenir Next Condensed", sans-serif;
  --body: "Avenir Next", "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--ink); color: var(--paper); }
body { margin: 0; min-height: 100vh; font-family: var(--body); background: radial-gradient(circle at 80% 0%, #172218 0, transparent 32rem), var(--ink); word-break: keep-all; overflow-wrap: break-word; }
/* keep-all: 한국어에는 단어 사이 공백이 있는데도 브라우저 기본값은 음절 아무
   데서나 줄을 바꿉니다. 폰 폭에서 "흐려집니다" 가 "흐려집니" / "다" 로, "자랑하기"
   가 "자랑하 / 기" 로 잘려 나왔습니다 — 읽는 속도가 눈에 띄게 떨어지고, 우리
   사용자는 대부분 폰으로 옵니다. overflow-wrap 을 함께 두는 이유는 keep-all 만
   두면 주소나 쿠폰 코드처럼 공백 없는 긴 문자열이 화면 밖으로 밀려나기 때문입니다. */
a { color: inherit; }
.noise { position: fixed; inset: 0; pointer-events: none; opacity: .16; background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.025) 3px 4px); z-index: 20; }
.site-header { min-height: 76px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 32px; padding: 0 4vw; position: sticky; top: 0; z-index: 10; background: rgba(5,7,6,.9); backdrop-filter: blur(14px); }
.wordmark { display: flex; align-items: center; gap: 12px; text-decoration: none; font: 700 12px/1 var(--display); letter-spacing: .16em; }
.wordmark-mark { width: 34px; aspect-ratio: 1; display: grid; place-items: center; color: var(--ink); background: var(--signal); font-size: 19px; clip-path: polygon(0 0,100% 0,100% 72%,72% 100%,0 100%); }
nav { display: flex; gap: 24px; }
nav a { color: var(--muted); text-decoration: none; font-size: 13px; }
nav a:hover { color: var(--signal); }
.identity, .eyebrow, .panel-kicker { font: 700 11px/1 var(--display); letter-spacing: .18em; color: var(--muted); }
main { width: min(1440px, 92vw); margin: 0 auto; }
.hero { min-height: 72vh; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 4vw; }
/* The display stack carries no Hangul, so every Korean headline is drawn by a
   system fallback whose glyphs fill far more of the em box than DIN Condensed
   does. At the old line-height of .78 the two hero lines drew through each
   other and the first line's ink covered the eyebrow above it. The tracking,
   the weight and the outline treatment below are untouched — only the box the
   glyphs are given has to be big enough to hold them. */
.hero h1, .page-head h1 { margin: 26px 0 18px; font: 800 clamp(64px,10vw,150px)/1.04 var(--display); letter-spacing: -.055em; text-transform: uppercase; }
.hero-line { display: block; }
.hero h1 em { color: transparent; -webkit-text-stroke: 1px var(--signal); font-style: normal; }
.hero-lede, .page-head p { color: #b8c0b6; max-width: 640px; font-size: clamp(16px,1.4vw,21px); line-height: 1.7; }
.button { min-height: 48px; border: 1px solid #566152; padding: 0 18px; display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; color: var(--paper); text-decoration: none; background: transparent; font: 700 13px var(--body); cursor: pointer; }
.button:hover { border-color: var(--signal); color: var(--signal); }
.button-signal { margin-top: 24px; min-width: 250px; color: var(--ink); border-color: var(--signal); background: var(--signal); }
.button-signal:hover { color: var(--ink); filter: brightness(1.15); }
.button.is-disabled { color: #667064; cursor: not-allowed; }
.hero-instrument { width: min(36vw,520px); aspect-ratio: 1; justify-self: end; border: 1px solid var(--line); border-radius: 50%; position: relative; display: grid; place-items: center; background: radial-gradient(circle, rgba(182,255,52,.09), transparent 55%); }
.radar-ring { position: absolute; border: 1px solid #384237; border-radius: 50%; }
.ring-one { inset: 14%; }.ring-two { inset: 30%; border-style: dashed; animation: spin 20s linear infinite; }
.scope-core { display: grid; text-align: center; z-index: 1; }.scope-core strong { font: 800 clamp(72px,10vw,140px)/.8 var(--display); color: var(--signal); }.scope-core span { margin-top: 15px; letter-spacing: .35em; font-size: 11px; }
.scope-label { position: absolute; font: 700 10px var(--display); letter-spacing: .2em; color: var(--muted); }.scope-label.top { top: 7%; }.scope-label.bottom { bottom: 7%; }
.rule-strip { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3,1fr); }
.rule-strip article { padding: 32px; border-right: 1px solid var(--line); }.rule-strip span { color: var(--signal); font: 700 11px var(--display); }.rule-strip h2 { font: 700 24px var(--display); text-transform: uppercase; }.rule-strip p { color: var(--muted); line-height: 1.6; }
.page-head { padding: 90px 0 55px; border-bottom: 1px solid var(--line); }.page-head h1 { font-size: clamp(58px,8vw,112px); }.page-head p { font-size: 17px; }
.server-grid { display: grid; grid-template-columns: 2fr 1fr; border: 1px solid var(--line); margin-top: 40px; }
.countdown-panel { min-width: 0; padding: clamp(28px,5vw,70px); background: linear-gradient(135deg, var(--panel-high), var(--panel)); }
.panel-kicker { color: var(--signal); }.pulse { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 18px var(--signal); }
.countdown { display: flex; align-items: baseline; gap: .25em; margin: 55px 0 35px; font: 800 clamp(38px,7vw,108px)/1 var(--display); letter-spacing: -.05em; white-space: nowrap; }.countdown i { color: var(--muted); font: 700 11px var(--display); letter-spacing: 0; }
.server-state { color: var(--muted); }.server-state strong { color: var(--paper); }
.server-meta { border-left: 1px solid var(--line); display: flex; flex-direction: column; padding: 36px; gap: 28px; }.server-meta div { border-bottom: 1px solid var(--line); padding-bottom: 24px; }.server-meta span, .server-meta div > span { display: block; color: var(--muted); font-size: 10px; letter-spacing: .17em; margin-bottom: 9px; }.server-meta code { overflow-wrap: anywhere; color: var(--signal); }
/* The address is the reason this screen exists: it is the one thing a member
   cannot get anywhere else. It reads bigger than everything beside it, and the
   internal marker below reads smaller. */
.server-address code { display: block; font-size: clamp(18px,2.6vw,26px); line-height: 1.3; letter-spacing: .01em; }
.address-hint { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }.address-hint a { color: var(--signal); }
.server-debug { border-bottom: 0 !important; padding-bottom: 0 !important; }.server-debug code { font-size: 11px; color: var(--muted) !important; }
/* The egg switch destroys the server's files, so its warning is the one piece
   of body text on this page that is not muted grey — a sentence styled like
   every other hint is a sentence that gets skipped. */
.warning-note { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--warning); color: var(--paper); font-size: 13px; line-height: 1.7; }
.server-option .stack-form { margin-top: 12px; }
.mission-callout { margin: 24px 0 80px; padding: 28px; border: 1px solid var(--line); text-decoration: none; display: flex; justify-content: space-between; }.mission-callout:hover { border-color: var(--signal); }.mission-callout span { color: var(--muted); }
.mission-deadlines { display: flex; flex-wrap: wrap; gap: 18px; margin: 12px 0 0 !important; color: var(--muted); font-size: 12px; }.mission-deadlines:empty { display: none; }
.coupon-redeem { margin-top: 36px; border: 1px solid var(--line); background: var(--panel); padding: 34px; display: grid; gap: 16px; }.coupon-redeem p { margin: 0; color: var(--muted); line-height: 1.7; max-width: 640px; }.coupon-redeem .proof-form { max-width: 520px; }
.mission-list { padding: 30px 0 90px; display: grid; gap: 14px; }
.mission-card { display: grid; grid-template-columns: 70px 1fr minmax(220px, .35fr); gap: 30px; padding: 34px; border: 1px solid var(--line); background: var(--panel); transition: transform .2s, border-color .2s, opacity .2s; }.mission-card:hover { transform: translateX(5px); border-color: #566152; }.mission-card.is-completed { opacity: .42; order: 5; filter: saturate(.4); }.mission-card.is-completed h2 { text-decoration: line-through; text-decoration-thickness: 1px; }
.mission-index { color: var(--signal); font: 800 38px var(--display); }.mission-copy h2 { margin: 14px 0 8px; font: 700 clamp(24px,3vw,42px) var(--display); }.mission-copy p { margin: 0; color: var(--muted); line-height: 1.6; }.mission-flags { display: flex; flex-wrap: wrap; gap: 8px; }.mission-flags span, .state { border: 1px solid var(--line); padding: 6px 8px; font: 700 9px var(--display); letter-spacing: .12em; color: var(--muted); }.mission-flags .state-available { color: var(--signal); border-color: #4d6c22; }
.mission-action { display: flex; flex-direction: column; align-items: stretch; gap: 13px; }.mission-action > strong { color: var(--signal); font: 800 44px var(--display); text-align: right; }.mission-action .stack-form { gap: 8px; }.mission-action .button-signal { margin-top: 0; min-width: 0; justify-content: center; gap: 0; }
.board-balance { margin-top: 36px; padding: 28px 34px 30px; border: 1px solid var(--line); background: var(--panel); }.board-balance .countdown { margin: 16px 0 0; font-size: clamp(30px,4.6vw,62px); }
.proof-form { display: grid; grid-template-columns: 1fr auto; }.proof-form input { min-width: 0; }.proof-form output { grid-column: 1/-1; }
input, textarea, select { width: 100%; color: var(--paper); background: #080b09; border: 1px solid #364034; padding: 12px; font: inherit; }.proof-form button { color: var(--ink); border: 0; background: var(--signal); font-weight: 700; }.proof-form output, form output { min-height: 18px; margin-top: 6px; color: var(--warning); font-size: 12px; }form output.is-granted { color: var(--signal); }
.empty-state { margin: 40px 0 80px; min-height: 360px; border: 1px solid var(--line); display: grid; grid-template-columns: .5fr 1fr 1fr; align-items: center; gap: 40px; padding: 50px; }.giant-index { color: transparent; -webkit-text-stroke: 1px #3b4639; font: 800 130px var(--display); }.empty-state h2 { font: 700 36px var(--display); }.empty-state p { color: var(--muted); line-height: 1.7; }
.stack-form, .admin-form { display: grid; gap: 18px; }.stack-form label, .admin-form label { display: grid; gap: 8px; color: var(--muted); font-size: 12px; }
.admin-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; padding: 36px 0 90px; }.admin-form, .admin-list { border: 1px solid var(--line); background: var(--panel); padding: 34px; }.form-head { border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 8px; }.form-head span { color: var(--signal); font: 700 10px var(--display); letter-spacing: .17em; }.form-head h2 { margin: 7px 0 0; font: 700 30px var(--display); }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.admin-list article { padding: 22px 0; border-bottom: 1px solid var(--line); }.admin-list h3 { margin: 10px 0 4px; }.admin-list p { color: var(--muted); margin: 0; }
.mission-inventory { max-height: 960px; overflow: auto; }.inventory-title { display: flex; align-items: center; gap: 10px; }.compact-form { display: grid; gap: 12px; margin-top: 18px; }.compact-form label { color: var(--muted); display: grid; gap: 6px; font-size: 11px; }.button-row { display: flex; gap: 10px; }.danger { border-color: #763d28; color: var(--warning); }.danger:hover { border-color: var(--warning); color: var(--warning); }.review-queue { margin: 0 0 90px; border: 1px solid var(--line); padding: 34px; }.review-queue > article { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); }.review-queue h3 { margin: 10px 0 5px; }.review-queue p, .queue-empty { color: var(--muted); }.review-queue pre { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--signal); background: #070a08; border: 1px solid var(--line); padding: 14px; }.review-actions, .review-actions form { display: grid; gap: 10px; }.review-actions .button-signal { margin: 0; }
.form-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }.form-note strong { color: var(--warning); }.check-label { display: flex !important; align-items: center; gap: 10px; }.check-label input { width: auto; }
.control-deck { margin: 36px 0 0; border: 1px solid var(--line); background: var(--panel); padding: 34px; display: grid; gap: 22px; }.control-state { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }.control-state article { border: 1px solid var(--line); padding: 20px; }.control-state span { display: block; color: var(--muted); font: 700 10px/1 var(--display); letter-spacing: .17em; }.control-state strong { display: block; margin: 12px 0 8px; font: 800 30px var(--display); }.control-state .is-live { color: var(--signal); }.control-state .is-halted { color: var(--warning); }.control-state p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.control-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; align-items: start; }.control-actions .button { justify-content: center; gap: 0; }
.coupon-inventory, .ban-inventory { max-height: 960px; overflow: auto; }.coupon-inventory article, .ban-inventory article { padding: 20px 0; border-bottom: 1px solid var(--line); }.coupon-meta { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }.coupon-inventory .button-row, .ban-inventory .button-row { margin-top: 14px; }
.ledger-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 90px; }.ledger-panel { border: 1px solid var(--line); padding: 34px; background: var(--panel); }.ledger-panel article { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); }.ledger-panel article > strong { color: var(--signal); font: 800 24px var(--display); }.ledger-panel h3 { margin: 0 0 5px; }.ledger-panel p { margin: 0; color: var(--muted); font-size: 11px; }
footer { width: min(1440px,92vw); margin: 0 auto; padding: 28px 0 40px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
.reveal { animation: reveal .65s both cubic-bezier(.2,.8,.2,1); }.delay-1 { animation-delay: .1s; }.delay-2 { animation-delay: .2s; }
@keyframes reveal { from { opacity: 0; transform: translateY(18px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
@media (max-width: 820px) { .site-header { grid-template-columns: 1fr auto; }.site-header nav { grid-row: 2; grid-column: 1/-1; padding-bottom: 15px; }.identity { display: none; }.hero { grid-template-columns: 1fr; padding: 70px 0; }.hero-instrument { width: 78vw; justify-self: center; }.rule-strip, .server-grid, .admin-grid, .ledger-grid, .control-state, .control-actions { grid-template-columns: 1fr; }.server-meta { border-left: 0; border-top: 1px solid var(--line); }.mission-card { grid-template-columns: 48px 1fr; }.mission-action { grid-column: 2; }.empty-state { grid-template-columns: 1fr; }.giant-index { font-size: 90px; }.form-row, .review-queue > article { grid-template-columns: 1fr; } }