/* ─────────────────────────────────────────────────────────────────────────────
   오늘의 서버 — 사이드바 상자 (2026-08-19)
   ★사장님 결정: **모양은 단순하게**(모서리 안 깎음) · **흰색 + 파랑**.
   ⚠️이 파일은 **자기 것만** 손댄다. 사이드바·달력 등 기존 규칙은 건드리지 않는다.
   ───────────────────────────────────────────────────────────────────────────── */

/* ⚠️`.sidebar > div:not(.sidebar-banners)` 가 **흰 배경 + 회색 테두리**를 강제한다.
   그래서 아이디(#)로 눌러 이긴다 — 클래스로 쓰면 그 규칙에 진다.
   ★흰 바탕으로 뒀더니 **주변 카드에 묻혀 눈에 안 띄었다**(사장님 지적) → 파랑으로 꽉 채운다. */
#today-servers-box {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    border: 1px solid #1d4ed8 !important;
    border-radius: 4px;
    box-shadow: 0 3px 12px rgba(29, 78, 216, .28);
    cursor: pointer;
    user-select: none;
    transition: filter .15s ease, box-shadow .15s ease;
}

#today-servers-box:hover {
    filter: brightness(1.08);
    box-shadow: 0 4px 16px rgba(29, 78, 216, .40);
}

#today-servers-box:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
}

#today-servers-box .ts-inner {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 16px;
}

/* ★사이드바가 숨겨진 화면(게시판 등 모바일)에서 **본문 위로 옮겨졌을 때**.
   그 자리는 사이드바 밖이라 `.sidebar > div { margin-bottom: 20px }` 가 안 걸린다.
   ⚠️채팅 화면의 `.container` 는 **가로 배치(flex row)** 라, 그냥 넣으면 상자가
     한 칸을 차지하며 **세로로 길게 늘어난다**(실측 104x830).
     `width:100%` 로 한 줄을 다 쓰게 하고, 늘어나지 않게 못 박는다. */
#today-servers-box.ts-moved {
    margin: 0 0 14px;
    width: 100%;
    flex: 0 0 auto;
    align-self: flex-start;   /* ★세로로 늘어나지 않게 (stretch 가 기본값이라 명시해야 한다) */
    box-sizing: border-box;
}

/* 운영중 표시 — 초록 점은 그대로 둔다(지금 돌아가는 중이라는 뜻) */
#today-servers-box .ts-dot-wrap {
    position: relative;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

#today-servers-box .ts-dot {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #4ade80;                          /* 파란 바탕 위라 밝은 초록 */
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .28);
}

/* 처음 모양엔 구분선이 없었다 — 자리만 차지하지 않게 숨긴다 */
#today-servers-box .ts-sep {
    display: none;
}

#today-servers-box .ts-box-label {
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
}

/* 개수 — 반투명 흰 알약 */
#today-servers-box .ts-box-count {
    margin-left: auto;
    flex-shrink: 0;
    padding: 4px 11px;
    background: rgba(255, 255, 255, .22);
    color: #ffffff;
    border-radius: 20px;
    font-weight: 700;
    font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   팝업 — ★상자와 같은 파란 계열로 맞춤 (2026-08-19, 사장님 지시)
   ═══════════════════════════════════════════════════════════════════════════ */
.ts-modal {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 99999;
    background: rgba(12, 26, 51, .62);
    padding: 20px;
    overflow-y: auto;
}

.ts-modal.ts-open {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.ts-modal-box {
    width: 100%;
    max-width: 560px;
    margin: auto;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 16px 44px rgba(12, 26, 51, .40);
}

.ts-modal-inner {
    background: #ffffff;
}

/* ── 머리 — 상자와 같은 파랑 ─────────────────────────────────────────────── */
.ts-modal-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.ts-modal-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: rgba(255, 255, 255, .20);
    border-radius: 9px;
}

.ts-modal-htxt { min-width: 0; }

.ts-modal-title {
    color: #ffffff;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.2;
}

.ts-modal-sub {
    color: rgba(255, 255, 255, .88);
    font-size: 12.5px;
    font-weight: 600;
    margin-top: 4px;
}

.ts-modal-close {
    margin-left: auto;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .20);
    color: #ffffff;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}

.ts-modal-close:hover { background: rgba(255, 255, 255, .34); }

.ts-modal-body {
    padding: 8px 14px 14px;
    max-height: 62vh;
    overflow-y: auto;
}

/* ── 한 줄 ───────────────────────────────────────────────────────────────── */
.ts-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 8px;
    border-bottom: 1px solid #eef1f6;
    transition: background .14s ease;
}

.ts-row:last-child { border-bottom: none; }
.ts-row:hover { background: #f4f8ff; }

/* 오픈 시각 */
.ts-time {
    flex-shrink: 0;
    width: 46px;
    height: 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #eaf2ff;
    border: 1px solid #c7dcfa;
    border-radius: 7px;
}

.ts-time b {
    color: #1d4ed8;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}

.ts-time small {
    color: #7994b8;
    font-size: 9px;
    margin-top: 2px;
}

.ts-time-none {
    color: #b3bdcc;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 가운데 */
.ts-mid {
    flex: 1 1 auto;
    min-width: 0;                 /* 없으면 긴 이름이 줄어들지 않고 삐져나온다 */
}

.ts-name-row {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.ts-badge {
    flex-shrink: 0;
    padding: 2px 8px;
    background: #eafaf0;
    color: #17924f;
    border: 1px solid #bfe6cf;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
}

.ts-name {
    min-width: 0;
    color: #1c2635;
    font-size: 15px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-desc {
    margin-top: 3px;
    color: #8592a6;
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 바로가기 — 상자와 같은 파랑 */
.ts-go {
    flex-shrink: 0;
    /* ★모바일(mobile.css)에 `button, a { min-height: 44px }` 라는 터치 규칙이 있다.
       기본값(content-box)이면 그 44px 에 위아래 여백이 **더해져** 58px 까지 커진다(실측).
       border-box 로 두면 여백을 포함해 44px 로 맞아 단추가 알맞은 크기가 된다. */
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 15px;
    color: #ffffff !important;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 6px;
    transition: filter .14s ease;
}

.ts-go:hover { filter: brightness(1.10); }

.ts-go-none {
    background: none;
    color: #b3bdcc !important;
    padding: 8px 6px;
    font-weight: 600;
}

/* ── 모바일 ──────────────────────────────────────────────────────────────── */
/* ⚠️사이드바는 1024px 이하에서 세로로 서고 **순서를 order 로 강제**한다
   (같은 사이드바 안: 채팅 0 · 로그인 1 · 배너 2). 값을 안 주면 0 이 되어 채팅과
   같은 등급이 되므로 분명히 적어 둔다. */
@media (max-width: 1024px) {
    #today-servers-box {
        order: -1;
        margin-bottom: 15px;
    }
    /* ⚠️`mobile.css` 의 `button, a, input, select, textarea { min-height: 44px }` 가
       1024px 이하에서 **닫기 단추를 34x44 타원으로** 찌그러뜨린다(실측).
       규칙을 지우지 않고 가로도 44px 로 맞춰 원형을 지킨다. */
    .ts-modal-close { width: 44px; height: 44px; }
}

@media (max-width: 480px) {
    #today-servers-box .ts-inner { gap: 8px; padding: 12px 13px; }
    #today-servers-box .ts-box-label { font-size: 15px; }
    #today-servers-box .ts-box-count { font-size: 12.5px; padding: 4px 10px; }

    .ts-modal { padding: 12px; }
    .ts-modal-head { padding: 15px 15px; }
    .ts-modal-title { font-size: 17px; }
    .ts-modal-body { padding: 6px 9px 12px; }
    .ts-row { gap: 9px; padding: 10px 4px; }
    .ts-time { width: 40px; height: 38px; }
    .ts-time b { font-size: 16px; }
    .ts-name { font-size: 14px; }
    .ts-desc { font-size: 11px; }
    .ts-go { padding: 7px 11px; font-size: 12px; }
}