/* =====================================================================
   챌린지배틀 → 도스커뮤니티 디자인 통합 브리지

   app.css 는 색·모양을 전부 CSS 변수로 뽑아 쓰고 있다.
   그 변수만 도스커뮤니티 토큰(assets/dos/dos.css)으로 갈아끼우면
   컴포넌트를 건드리지 않고도 사이트 전체와 같은 옷을 입는다.

   로드 순서: app.css → dos.css → 이 파일
   app.css 와 dos.css 가 함께 쓰는 이름은 --bg 와 --text 둘뿐이다.
   dos.css 를 뒤에 두어야 그 둘이 도스 값(라이트 모드 포함)으로 잡힌다.
   ===================================================================== */

:root {
    /* app.css 전용 토큰을 도스 토큰으로 갈아끼운다 (--bg·--text 는 dos.css 것을 그대로 쓴다) */
    --bg-soft: var(--surface-2);
    --card: var(--surface);
    --card-2: var(--surface-2);
    --line: var(--edge);
    --text-dim: var(--muted);

    /* 액센트는 사이트 공통 탈리 레드 하나로 통일 */
    --accent: var(--tally);
    --accent-2: var(--tally);
    --accent-soft: color-mix(in srgb, var(--tally) 12%, transparent);

    --gold: var(--warn);
    --danger: var(--tally);
    --blue: var(--muted);

    /* 도스 디자인은 둥근 모서리와 그림자를 쓰지 않는다 */
    --radius: 0;
    --shadow: none;
}

/* dos.css 가 body 배경·글꼴을 이미 잡는다. app.css 의 그라디언트 배경을 걷어낸다. */
body {
    background: var(--bg);
    font-family: var(--sans);
    line-height: 1.7;
}

a { color: inherit; }

/* ── 셸 ───────────────────────────────────────────────
   페이지 골격은 dos-rack 헤더 + dos-main 본문 + dos-foot 푸터를 그대로 쓴다.
   위아래 여백은 .dos-main 이 잡으므로 .container 는 좌우 폭만 담당한다. */
.container {
    max-width: var(--w);
    margin: 0 auto;
    padding: 0 24px;
}

/* 예전 자체 헤더는 dos-rack 이 대신한다 */
.topbar { display: none; }

/* 서브 바의 후원 버튼은 링크 높이에 맞춘다 */
.dos-sub__row .btn { margin-left: auto; }

/* 계정 영역은 자바스크립트가 채운다. 감싼 span 이 flex 간격을 먹지 않게 한다. */
#dos-account { display: contents; }

/* 토스트·모달도 같은 톤으로 */
.toast { background: var(--surface-2); border: 1px solid var(--edge); box-shadow: none; }
.toast-error { border-color: color-mix(in srgb, var(--tally) 50%, transparent); }
.toast-success { border-color: color-mix(in srgb, var(--ok) 50%, transparent); }

.modal { background: var(--surface); border: 1px solid var(--edge); box-shadow: none; }
.modal-head h3 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em; }
.modal-desc, .modal-foot { color: var(--muted); }
.sp-card { background: var(--surface-2); border: 1px solid var(--edge-soft); }
.sp-card:hover { border-color: var(--tally); transform: none; }
.sp-card img { border-radius: 0; }

.spin { border-color: var(--edge); border-top-color: var(--tally); }

/* ── 모서리 평탄화 ────────────────────────────────────── */
.card,
.btn,
.input,
select.input,
.feature,
.room-item,
.notice,
.error-box,
.room-head,
.invite-box,
.obs-guide,
.empty-hint,
.ov-frame,
.ov-zone,
.modal,
.toast,
.sp-card,
.seg,
.seg button,
.plist > *,
.stand-card { border-radius: 0; }

.badge,
.code-pill,
.switch,
.userchip { border-radius: 0; }

/* 아바타는 원형을 유지한다 — 사람 얼굴은 사각형보다 원이 낫다 */
.avatar, .avatar-fallback { border-radius: 50%; }

/* ── 카드 ─────────────────────────────────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--edge-soft);
    box-shadow: none;
    padding: 22px 20px;
}

.card h2 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em; }
.card h3 { font-size: .9375rem; font-weight: 700; letter-spacing: -.01em; }
.card .desc { color: var(--muted); font-size: .875rem; }

/* ── 버튼 ─────────────────────────────────────────────── */
.btn {
    background: transparent;
    border: 1px solid var(--edge);
    color: var(--text);
    font-family: var(--sans);
    font-size: .9375rem;
    font-weight: 600;
    padding: 11px 18px;
    transition: border-color .16s, background .16s;
}

.btn:hover { border-color: var(--muted); background: var(--surface); }
.btn:active { transform: none; }

.btn-primary {
    background: var(--tally);
    border: 1px solid var(--tally);
    color: #fff;
}

.btn-primary:hover {
    filter: none;
    background: color-mix(in srgb, var(--tally) 86%, #000);
    border-color: color-mix(in srgb, var(--tally) 86%, #000);
}

.btn-danger {
    background: transparent;
    border-color: color-mix(in srgb, var(--tally) 45%, transparent);
    color: var(--tally);
}

.btn-danger:hover { border-color: var(--tally); background: color-mix(in srgb, var(--tally) 10%, transparent); }

.btn-sm { padding: 6px 11px; font-size: .8125rem; }
.btn-lg { padding: 14px 22px; font-size: 1rem; }

/* ── 입력 ─────────────────────────────────────────────── */
.input, select.input {
    background: var(--surface-2);
    border: 1px solid var(--edge);
    color: var(--text);
    font-family: var(--sans);
}

.input:focus { border-color: var(--tally); }

label.field .lbl {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dim);
    font-weight: 400;
}

.mono { font-family: var(--mono); }
.muted { color: var(--muted); }

/* ── 배지 · 칩 ────────────────────────────────────────── */
.badge {
    background: transparent;
    border: 1px solid var(--edge);
    color: var(--dim);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .13em;
    text-transform: uppercase;
    padding: 3px 8px;
}

.badge-live { background: transparent; border-color: color-mix(in srgb, var(--tally) 45%, transparent); color: var(--tally); }
.badge-on { background: transparent; border-color: color-mix(in srgb, var(--ok) 45%, transparent); color: var(--ok); }
.badge-owner { background: transparent; border-color: color-mix(in srgb, var(--warn) 45%, transparent); color: var(--warn); }
.badge-demo { background: transparent; border-color: var(--edge); color: var(--muted); }

.code-pill {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--tally) 45%, transparent);
    color: var(--tally);
    font-family: var(--mono);
    font-weight: 600;
    letter-spacing: .22em;
}

.code-pill:hover { filter: none; border-color: var(--tally); }

/* ── 방 헤더 ──────────────────────────────────────────── */
.room-head {
    background: var(--surface);
    border: 1px solid var(--edge);
    box-shadow: none;
}

.rh-title-row h1 { font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; }

.invite-box { background: var(--surface-2); border: 1px solid var(--edge-soft); }

.invite-box .invite-lbl {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dim);
    font-weight: 400;
}

/* ── 랜딩 ─────────────────────────────────────────────── */
.hero { text-align: left; padding: 8px 0 26px; }

.hero h1 {
    font-size: clamp(1.9rem, 4.4vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.2;
    max-width: 20ch;
}

.hero h1 .accent { color: var(--tally); }
.hero p { margin: 0 0 26px; max-width: 56ch; color: var(--muted); font-size: 1.0625rem; }

.feature { background: var(--surface); border: 1px solid var(--edge-soft); }
.feature b { font-size: .9375rem; }
.feature span { color: var(--muted); font-size: .875rem; }

.login-panel { margin-left: 0; }

/* SOOP 전용 버튼 → 통합 로그인 버튼 */
.soop-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tally);
    border: 1px solid var(--tally);
    color: #fff;
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 700;
    padding: 15px;
    text-decoration: none;
    cursor: pointer;
}

.soop-btn:hover { filter: none; background: color-mix(in srgb, var(--tally) 86%, #000); }

.divider { color: var(--dim); font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.divider::before, .divider::after { background: var(--edge); }

/* ── 목록 · 알림 ──────────────────────────────────────── */
.room-item { background: var(--surface); border: 1px solid var(--edge-soft); }
.room-item:hover { border-color: var(--tally); }
.room-item .code { color: var(--tally); font-family: var(--mono); letter-spacing: .2em; }

.notice {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
    color: var(--warn);
}

.error-box {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--tally) 45%, transparent);
    color: var(--tally);
}

.empty-hint { background: var(--surface-2); border: 1px dashed var(--edge); color: var(--muted); }
.empty-hint b { color: var(--tally); }

.obs-guide { border: 1px dashed var(--edge); }
.obs-guide summary { color: var(--muted); }
.obs-guide ol { color: var(--muted); }
.obs-guide b { color: var(--text); }

/* ── 토글 · 세그먼트 ──────────────────────────────────── */
.switch { background: var(--surface-2); border: 1px solid var(--edge); }
.switch > span { border-radius: 0; background: var(--dim); }
.switch.on { background: var(--tally); border-color: var(--tally); }
.switch.on > span { background: #fff; }

.mission-row:hover { border-color: var(--tally); }
.mission-row.on { border-color: var(--tally); background: color-mix(in srgb, var(--tally) 10%, transparent); }

.ov-zone { background: color-mix(in srgb, var(--tally) 28%, transparent); border-color: var(--tally); }
.ovs-val { color: var(--tally); font-family: var(--mono); font-weight: 700; }

.btn-link { color: var(--muted); }
.btn-link:hover { color: var(--tally); }

/* 세그먼트 · 목록 · 현황 카드 */
.seg { background: var(--surface-2); border: 1px solid var(--edge); padding: 2px; gap: 2px; }
.seg button { color: var(--muted); font-weight: 600; font-size: .8125rem; }
.seg button.active { background: var(--tally); color: #fff; }

.plist-item { background: var(--surface-2); border: 1px solid var(--edge-soft); }

.stand-card { background: var(--surface); border: 1px solid var(--edge-soft); }
.stand-card.rank-1 { background: var(--surface); border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.stand-card.flash { animation: none; border-color: var(--tally); }
.stand-gift-float { color: var(--tally); }
.stand-sum .num { color: var(--tally); font-family: var(--mono); font-weight: 700; }
.rank-num { font-family: var(--mono); font-weight: 700; color: var(--dim); }
.rank-1 .rank-num { color: var(--warn); }

.chip {
    border-radius: 0;
    border: 1px solid var(--edge);
    background: transparent;
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 2px 6px;
}

.chip-active { color: var(--tally); border-color: color-mix(in srgb, var(--tally) 45%, transparent); }
.chip-success { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.chip-fail { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.chip-idle { color: var(--dim); }

.top-donors { border-top: 1px dashed var(--edge); }
.top-row .tcnt { color: var(--muted); font-family: var(--mono); font-weight: 400; }

/* ── 후원 안내 바 — 하단 팝업 광고와 겹치므로 본문에서는 뺀다 ── */
.support-bar { display: none; }

/* ── 하단 팝업 광고가 마지막 카드를 가리지 않도록 여유 ── */
body { padding-bottom: 76px; }