/* =====================================================================
   도스커뮤니티 공통 스타일
   방송 멀티뷰어(송출 감시화면)에서 가져온 시각 언어.
   - 뉴트럴은 모니터 베젤의 청색 편향
   - 액센트는 탈리등 레드 1종. 상태색(운영/준비/문의)은 액센트와 분리
   - 유틸리티 역할은 모노스페이스가 담당(채널 ID·상태·라벨)
   ===================================================================== */

:root {
    --bg: #0B0E13;
    --surface: #121620;
    --surface-2: #171C28;
    --edge: #262E3C;
    --edge-soft: #1C2331;
    --text: #E6E9EF;
    --muted: #8894A8;
    --dim: #5D6879;
    --tally: #F04A2E;
    --ok: #3FB68B;
    --warn: #D9A441;

    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --sans: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont,
            "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
    --w: 1140px;
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #F2F3F6;
        --surface: #FFFFFF;
        --surface-2: #FAFBFD;
        --edge: #D8DCE4;
        --edge-soft: #E6E9EF;
        --text: #131722;
        --muted: #5C6779;
        --dim: #8A94A4;
        --tally: #D3341A;
        --ok: #1F8A63;
        --warn: #9C6F14;
    }
}

* { box-sizing: border-box; }

html { color-scheme: dark light; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

.dos-wrap { max-width: var(--w); margin: 0 auto; padding: 0 24px; }

a { color: inherit; }

:focus-visible { outline: 2px solid var(--tally); outline-offset: 3px; }

/* ---------- 상단 랙 바 ---------- */
.dos-rack {
    border-bottom: 1px solid var(--edge);
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 20;
}

.dos-rack__row {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 52px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}

.dos-brand {
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--text);
    text-decoration: none;
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 9px;
}

.dos-tally {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tally);
    flex: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tally) 22%, transparent);
}

.dos-rack__nav { display: flex; align-items: center; gap: 16px; }
.dos-rack__nav a { color: var(--muted); text-decoration: none; }
.dos-rack__nav a:hover { color: var(--text); }

.dos-me {
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--text);
    text-decoration: none;
}

.dos-me img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--edge);
}

/* ---------- 하위 시스템 서브 바 (팀 경매 등) ---------- */
.dos-sub { border-bottom: 1px solid var(--edge); background: var(--surface-2); }

.dos-sub__row {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 46px;
    flex-wrap: wrap;
}

.dos-sub__title {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tally);
    text-decoration: none;
    flex: none;
}

.dos-sub__nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-right: auto; }

.dos-sub__nav a {
    color: var(--muted);
    text-decoration: none;
    font-size: .9375rem;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
    transition: color .16s, border-color .16s;
}

.dos-sub__nav a:hover { color: var(--text); }
.dos-sub__nav a.is-active { color: var(--text); border-bottom-color: var(--tally); }

.dos-sub__grade {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dim);
    border: 1px solid var(--edge);
    padding: 3px 8px;
    flex: none;
}

/* ---------- 버튼 ---------- */
.dos-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border: 1px solid var(--edge);
    background: transparent;
    color: var(--text);
    text-decoration: none;
    font-family: var(--sans);
    font-size: .9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .16s, background .16s;
}

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

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

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

.dos-btn[disabled], .dos-btn--off { opacity: .45; pointer-events: none; }

/* ---------- 본문 공통 ---------- */
.dos-main { min-height: 60vh; padding: 56px 0; }

.dos-h1 {
    margin: 0 0 10px;
    font-size: clamp(1.6rem, 3.4vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.dos-lede { margin: 0 0 28px; color: var(--muted); max-width: 60ch; }

.dos-eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--tally);
    margin: 0 0 10px;
}

/* ---------- 알림 ---------- */
.dos-flash, .dos-error {
    padding: 13px 16px;
    border: 1px solid;
    margin: 0 0 24px;
    font-size: .9375rem;
}

.dos-flash { border-color: color-mix(in srgb, var(--ok) 45%, transparent); color: var(--ok); }
.dos-error { border-color: color-mix(in srgb, var(--tally) 45%, transparent); color: var(--tally); }

/* ---------- 로그인 · 연동 (화면 중앙 정렬) ---------- */
.dos-auth {
    max-width: 440px;
    margin: 0 auto;
    min-height: calc(100vh - 340px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.dos-auth .dos-eyebrow { display: flex; justify-content: center; }
.dos-auth .dos-h1 { margin-bottom: 12px; }
.dos-auth .dos-lede { margin-left: auto; margin-right: auto; }

.dos-auth__list { display: grid; gap: 10px; margin: 28px 0 18px; }

.dos-auth__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 20px;
    border: 1px solid var(--edge);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    transition: border-color .16s, background .16s;
}

.dos-auth__btn:hover { border-color: var(--muted); background: var(--surface-2); }
.dos-auth__btn--soop:hover { border-color: #1E6FFF; }
.dos-auth__btn--chzzk:hover { border-color: #00FFA3; }
.dos-auth__btn--cime:hover { border-color: #7B5CFF; }

.dos-auth__note { font-size: .875rem; color: var(--dim); }

/* ---------- 연동 목록 ---------- */
.dos-links { display: grid; gap: 12px; margin: 0 0 32px; }

.dos-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--edge-soft);
    background: var(--surface);
    flex-wrap: wrap;
}

.dos-link__badge {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 4px 8px;
    border: 1px solid var(--edge);
    color: var(--dim);
    flex: none;
}

.dos-link__body { display: grid; gap: 2px; margin-right: auto; min-width: 0; }
.dos-link__name { font-weight: 600; }
.dos-link__meta { font-family: var(--mono); font-size: 11px; color: var(--dim); word-break: break-all; }

.dos-link__primary {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ok);
    border: 1px solid color-mix(in srgb, var(--ok) 42%, transparent);
    padding: 3px 8px;
}

/* ---------- SMSL2 공개 페이지 ---------- */
.smsl-rel { display: inline-flex; flex-direction: column; gap: 2px; justify-content: center; }

.smsl-rel__ver {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .12em;
    color: var(--muted);
}

.smsl-rel__note { font-size: .8125rem; color: var(--dim); max-width: 40ch; }

.smsl-list { display: grid; gap: 12px; }
.smsl-item { border: 1px solid var(--edge-soft); background: var(--surface); }
.smsl-item--down { opacity: .72; }

.smsl-card {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border: 0;
    background: transparent;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background .16s;
}

.smsl-card:hover { background: var(--surface-2); }

/* 꺼진 서버 — 펼칠 내용이 없으므로 누를 수 있는 것처럼 보이지 않게 한다 */
.smsl-card--static { cursor: default; }
.smsl-card--static:hover { background: transparent; }

/* 펼침 화살표 */
.smsl-card__caret {
    flex: none;
    width: 10px;
    height: 10px;
    border-right: 1.5px solid var(--dim);
    border-bottom: 1.5px solid var(--dim);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s, border-color .16s;
}

.smsl-card:hover .smsl-card__caret { border-color: var(--tally); }
.smsl-card[aria-expanded="true"] .smsl-card__caret { transform: rotate(-135deg) translate(-2px, -2px); }

/* 서버 배경 이미지는 흐릿한 바탕으로만 쓴다 — 글자 가독성 우선 */
.smsl-card__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .16;
    filter: saturate(.7);
    pointer-events: none;
}

.smsl-card:hover .smsl-card__bg { opacity: .24; }

.smsl-card__body {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
}

.smsl-card__icon {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border: 1px solid var(--edge);
    background: var(--surface-2);
    flex: none;
    image-rendering: pixelated;
}

.smsl-card__icon--none { display: block; }

.smsl-card__main { display: grid; gap: 3px; min-width: 0; margin-right: auto; }
.smsl-card__name { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em; }

.smsl-card__meta {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    color: var(--dim);
}

.smsl-card__state { display: grid; gap: 6px; justify-items: end; flex: none; }
.smsl-card__state .dos-chip { margin-left: 0; }

.smsl-card__players {
    font-family: var(--mono);
    font-size: .9375rem;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.smsl-card__players-label { font-size: 10px; letter-spacing: .12em; color: var(--dim); }

.smsl-card__maint {
    position: relative;
    display: block;
    padding: 10px 18px;
    border-top: 1px solid var(--edge-soft);
    font-size: .8125rem;
    color: var(--warn);
}

/* ---------- 펼쳐지는 방송 목록 ---------- */
.smsl-panel { border-top: 1px solid var(--edge); padding: 18px; display: grid; gap: 20px; }

.smsl-panel__loading,
.smsl-panel__empty { margin: 0; color: var(--muted); font-size: .9375rem; }
.smsl-panel__note { margin: 0; color: var(--dim); font-size: .8125rem; }

.smsl-group { display: grid; gap: 10px; }

.smsl-group__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--edge-soft);
}

.smsl-group__label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text);
}

/* 플랫폼별 구분선 — 액센트가 아니라 라벨 색으로만 구분한다 */
.smsl-group--soop .smsl-group__label { color: #4C8DFF; }
.smsl-group--chzzk .smsl-group__label { color: #22C58B; }
.smsl-group--cime .smsl-group__label { color: #8B6CFF; }

.smsl-group__count {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .1em;
    color: var(--dim);
    font-variant-numeric: tabular-nums;
}

.smsl-group__grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.smsl-live {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--edge-soft);
    background: var(--surface-2);
    text-decoration: none;
    color: inherit;
    transition: border-color .16s;
}

a.smsl-live:hover { border-color: var(--tally); }
.smsl-live--off { opacity: .55; }

.smsl-live__thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--bg);
    border: 1px solid var(--edge-soft);
    overflow: hidden;
}

.smsl-live__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.smsl-live__badge {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 6px;
    background: var(--tally);
    color: #fff;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .14em;
}

.smsl-live__body { display: grid; gap: 3px; min-width: 0; }
.smsl-live__name { font-weight: 700; font-size: .9375rem; }

.smsl-live__title {
    font-size: .8125rem;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.smsl-live__meta {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--dim);
    font-variant-numeric: tabular-nums;
}

/* ---------- 계정 병합 ---------- */
.dos-merge { max-width: 720px; }

.dos-merge__pair {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 14px;
    align-items: stretch;
    margin-top: 26px;
}

@media (max-width: 640px) {
    .dos-merge__pair { grid-template-columns: 1fr; }
    .dos-merge__arrow { transform: rotate(90deg); }
}

.dos-merge__side {
    display: grid;
    gap: 5px;
    align-content: start;
    padding: 18px;
    border: 1px solid var(--edge);
    background: var(--surface);
}

.dos-merge__side--keep { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.dos-merge__side--drop { opacity: .72; }

.dos-merge__tag {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dim);
}

.dos-merge__side--keep .dos-merge__tag { color: var(--ok); }
.dos-merge__name { font-size: 1.0625rem; }
.dos-merge__meta { color: var(--muted); font-size: .875rem; }

.dos-merge__arrow {
    display: grid;
    place-items: center;
    color: var(--dim);
    font-size: 1.25rem;
}

.dos-merge__moves { display: grid; gap: 1px; background: var(--edge); border: 1px solid var(--edge); }

.dos-merge__move {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 14px;
    background: var(--surface);
}

.dos-merge__move-name { font-family: var(--mono); font-size: .8125rem; color: var(--muted); word-break: break-all; }
.dos-merge__move-n { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }

.dos-merge__warn {
    margin: 26px 0 0;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
    color: var(--warn);
    font-size: .9375rem;
}

.dos-merge__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* ---------- 푸터 ---------- */
.dos-foot { border-top: 1px solid var(--edge); padding: 32px 0 56px; color: var(--muted); font-size: .875rem; }
.dos-foot__row { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.dos-foot__row a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--edge); }
.dos-foot__row a:hover { color: var(--text); border-color: var(--muted); }

.dos-foot__meta {
    margin-top: 16px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dim);
}

/* ---------- 메인: PGM 히어로 ---------- */
.dos-hero { padding: 20px 0 60px; border-bottom: 1px solid var(--edge); }

.dos-hero__h1 {
    margin: 0 0 18px;
    font-size: clamp(2.1rem, 5.2vw, 3.5rem);
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -.03em;
    text-wrap: balance;
    max-width: 19ch;
}

.dos-hero__h1 em { font-style: normal; color: var(--tally); }

.dos-hero__lede { margin: 0 0 26px; max-width: 56ch; color: var(--muted); font-size: 1.0625rem; }

.dos-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 메인: 섹션 ---------- */
.dos-band { padding: 56px 0; border-bottom: 1px solid var(--edge); }
.dos-band:last-of-type { border-bottom: 0; }

.dos-band__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.dos-band__h2 { margin: 0; font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; }

.dos-band__note {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dim);
}

/* ---------- 메인: 서비스 분류 ---------- */
.dos-cat + .dos-cat { margin-top: 42px; }

.dos-cat__head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--edge);
}

.dos-cat__label {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.015em;
}

.dos-cat__note {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dim);
    font-variant-numeric: tabular-nums;
}

.dos-cat__desc { margin: 12px 0 18px; color: var(--muted); font-size: .9375rem; max-width: 62ch; }

/* ---------- 메인: 소스 타일 ---------- */
.dos-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.dos-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 20px 20px;
    background: var(--surface);
    border: 1px solid var(--edge-soft);
    text-decoration: none;
    color: inherit;
    transition: border-color .16s, background .16s;
}

/* 카메라 프레이밍 가이드를 닮은 코너 브래킷 */
.dos-tile::before,
.dos-tile::after {
    content: "";
    position: absolute;
    width: 11px;
    height: 11px;
    pointer-events: none;
    border: 1px solid var(--dim);
    opacity: .55;
    transition: opacity .16s, border-color .16s;
}

.dos-tile::before { top: 7px; left: 7px; border-right: 0; border-bottom: 0; }
.dos-tile::after { bottom: 7px; right: 7px; border-left: 0; border-top: 0; }

a.dos-tile:hover { border-color: var(--muted); background: var(--surface-2); }
a.dos-tile:hover::before,
a.dos-tile:hover::after { opacity: 1; border-color: var(--tally); }
a.dos-tile:hover .dos-tile__go { color: var(--tally); }

.dos-tile--off { opacity: .62; }

.dos-tile__strip { display: flex; align-items: center; gap: 10px; }

.dos-tile__ch {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .16em;
    font-weight: 600;
    color: var(--dim);
    border: 1px solid var(--edge);
    padding: 3px 7px;
}

.dos-tile__h3 { margin: 0; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em; }
.dos-tile__desc { margin: 0; color: var(--muted); font-size: .9375rem; line-height: 1.62; }

.dos-tile__go {
    margin-top: auto;
    padding-top: 6px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--dim);
}

.dos-chip {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .13em;
    text-transform: uppercase;
    padding: 3px 8px;
    border: 1px solid;
}

.dos-chip--live { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 42%, transparent); }
.dos-chip--soon { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 42%, transparent); }
.dos-chip--ask { color: var(--muted); border-color: var(--edge); }

/* ---------- 메인: 후원 ---------- */
/* 왼쪽 안내 · 오른쪽 계좌. 광고 자리는 하단 팝업으로 옮겼다. */
.dos-support { display: grid; gap: 26px; grid-template-columns: 1fr; }

@media (min-width: 880px) {
    .dos-support { grid-template-columns: 1fr minmax(320px, .8fr); align-items: start; }
}

.dos-support__text .dos-lede:last-child { margin-bottom: 0; }

.dos-acct { border: 1px solid var(--edge); background: var(--surface); padding: 22px; display: grid; gap: 14px; }

.dos-acct__label {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dim);
}

.dos-acct__no {
    font-family: var(--mono);
    font-size: 1.0625rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    word-break: break-all;
}

.dos-acct__row { display: flex; flex-wrap: wrap; gap: 10px; }

/* 하단 팝업 광고는 assets/dos/ads.css 에 따로 둔다 —
   위플랩·챌린지배틀처럼 이 파일을 쓰지 않는 화면에서도 같은 모양이어야 하기 때문이다. */

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}