/* =====================================================================
 * SSHOW Jam — 샌드박스 크롬.
 *
 * s.show 의 디자인 언어를 그대로 쓴다. 서버 CSS 를 불러올 수 없는 독립
 * 페이지라(오리진이 다르다) 필요한 만큼만 옮겨 적었다:
 *   토큰    server/statics/css/variables.css (라이트/다크 한 쌍)
 *   버튼    .di-btn — 999px pill · Pretendard 600 · 40/32/30px
 *   입력    .di-input — 10px 박스 · 중립 포커스 링
 *   헤더    DESIGN.md §4.3 (55px) · §7.1 (마크 22px + Paperlogy 워드마크)
 * 브랜드 그라디언트는 쓰지 않는다 — 에디터 크롬은 무채색이다(DESIGN.md §1).
 * ===================================================================== */

@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-display: swap;
    src: url('https://static.s.show/fonts/pretendard/Pretendard-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-display: swap;
    src: url('https://static.s.show/fonts/pretendard/Pretendard-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-display: swap;
    src: url('https://static.s.show/fonts/pretendard/Pretendard-SemiBold.woff2') format('woff2');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-display: swap;
    src: url('https://static.s.show/fonts/pretendard/Pretendard-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Paperlogy';
    font-weight: 900;
    font-display: swap;
    src: url('https://static.s.show/fonts/paperlogy/Paperlogy-Black.woff2') format('woff2');
}

:root {
    --global-body-background: #ffffff;
    --global-background-color: #f5f3f0;
    --global-text-color: #2b2b2b;
    --global-text-color-rgb: 43, 43, 43;
    --global-text-muted: #6b7280;
    --global-border-color: #e5e5e5;
    --global-error-color: #e74c3c;
    --global-error-color-rgb: 231, 76, 60;
    --global-button-background-color: #2b2b2b;
    --global-button-text-color: #f5f3f0;
    --global-primary-color: #4F7BFF;

    --focus-ring-color: rgba(0, 0, 0, 0.14);
    --focus-border-color: rgba(0, 0, 0, 0.55);
    --state-hover-bg: rgba(0, 0, 0, 0.04);
    --state-active-bg: rgba(0, 0, 0, 0.08);

    --header-height: 55px;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --global-body-background: #1e1e1e;
        --global-background-color: #252526;
        --global-text-color: #cccccc;
        --global-text-color-rgb: 204, 204, 204;
        --global-text-muted: #9ca3af;
        --global-border-color: #3c3c3c;
        --global-error-color: #f14c4c;
        --global-error-color-rgb: 241, 76, 76;
        --global-button-background-color: #e0e0e0;
        --global-button-text-color: #1e1e1e;
        --global-primary-color: #3794ff;

        --focus-ring-color: rgba(255, 255, 255, 0.16);
        --focus-border-color: rgba(255, 255, 255, 0.55);
        --state-hover-bg: rgba(255, 255, 255, 0.06);
        --state-active-bg: rgba(255, 255, 255, 0.1);
    }
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--global-body-background);
    color: var(--global-text-color);
    font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    letter-spacing: -0.008em;
}

body {
    display: flex;
    flex-direction: column;
}

/* 아래 컴포넌트들이 display 를 직접 정해 두므로 [hidden] 만으로는 감춰지지
   않는다 — 속성 하나로 끄고 켜는 자리가 여럿이라 여기서 한 번에 이긴다. */
[hidden] {
    display: none !important;
}

/* ---------- 헤더 ---------------------------------------------------- */

.jam-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--header-height);
    padding: 0 16px;
    background: var(--global-body-background);
    border-bottom: 1px solid var(--global-border-color);
    user-select: none;
}

.jam-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--global-text-color);
    text-decoration: none;
}

.jam-brand svg {
    height: 22px;
    width: auto;
    aspect-ratio: 603 / 958;
    fill: currentColor;
}

.jam-wordmark {
    font-family: Paperlogy, Pretendard, sans-serif;
    font-weight: 900;
    font-size: 15px;
    text-transform: uppercase;
}

.jam-tag {
    padding: 2px 7px;
    border: 1px solid rgba(var(--global-text-color-rgb), 0.2);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--global-text-muted);
}

.jam-divider {
    width: 1px;
    height: 18px;
    margin: 0 2px;
    background: var(--global-border-color);
}

/* 방 이름 — 누르면 링크가 복사된다. */
.jam-room {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 240px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--global-background-color);
    color: var(--global-text-color);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.jam-room:hover {
    border-color: rgba(var(--global-text-color-rgb), 0.16);
}

.jam-room-id {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jam-room-copied {
    color: var(--global-text-muted);
    font-size: 11px;
    font-weight: 500;
}

.jam-spacer {
    flex: 1 1 auto;
}

/* ---------- 상태 · 역할 --------------------------------------------- */

.jam-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--global-text-muted);
}

.jam-status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.jam-status[data-status="connected"] {
    color: #1a7f37;
}

.jam-status[data-status="connecting"] {
    color: #9a6700;
}

.jam-status[data-status="disconnected"] {
    color: var(--global-error-color);
}

/* 배지는 채우지 않는다 — 테두리와 글자만(디자인 아이덴티티의 badge 규격). */
.jam-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 10px;
    border: 1px solid rgba(var(--global-text-color-rgb), 0.18);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--global-text-muted);
    white-space: nowrap;
}

.jam-badge svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.jam-badge[data-role="admin"] {
    border-color: rgba(var(--global-error-color-rgb), 0.4);
    color: var(--global-error-color);
}

/* ---------- 참가자 --------------------------------------------------- */

.jam-peers {
    display: flex;
    align-items: center;
    gap: 6px;
}

.jam-peer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 140px;
    height: 26px;
    padding: 0 10px 0 8px;
    border-radius: 999px;
    background: var(--global-background-color);
    font-size: 12px;
    font-weight: 500;
}

.jam-peer::before {
    content: '';
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color, var(--global-text-muted));
}

.jam-peer-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jam-peer[data-role="view"] {
    opacity: 0.7;
}

.jam-peer-more {
    font-size: 12px;
    font-weight: 500;
    color: var(--global-text-muted);
}

/* ---------- 내 이름 --------------------------------------------------- */

.jam-me {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--global-border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--global-text-color);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: text;
    transition: border-color 0.18s var(--ease);
}

.jam-me:hover {
    border-color: rgba(var(--global-text-color-rgb), 0.3);
}

.jam-me::before {
    content: '';
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color, var(--global-text-muted));
}

/* 이름 입력은 칩 안에서 그대로 편집된다 — 칸이 바뀌어 보이지 않게 크롬을 지운다. */
.jam-me input {
    width: 96px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    outline: none;
}

/* ---------- 버튼 (di-btn) --------------------------------------------- */

.jam-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--global-text-color);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease), opacity 0.18s var(--ease);
}

.jam-btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.jam-btn:focus-visible {
    outline: 2px solid var(--global-primary-color);
    outline-offset: 2px;
}

.jam-btn:active:not(:disabled) {
    transform: scale(0.97);
    transition-duration: 0.06s;
}

.jam-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.jam-btn-ghost:hover:not(:disabled) {
    background: var(--state-hover-bg);
}

.jam-btn-outline {
    border-color: rgba(var(--global-text-color-rgb), 0.16);
}

.jam-btn-outline:hover:not(:disabled) {
    border-color: rgba(var(--global-text-color-rgb), 0.32);
    background: var(--state-hover-bg);
}

.jam-btn-primary {
    background: var(--global-button-background-color);
    color: var(--global-button-text-color);
}

.jam-btn-primary:hover:not(:disabled) {
    opacity: 0.85;
}

.jam-btn-danger {
    border-color: rgba(var(--global-error-color-rgb), 0.35);
    color: var(--global-error-color);
}

.jam-btn-danger:hover:not(:disabled) {
    background: var(--global-error-color);
    border-color: var(--global-error-color);
    color: #fff;
}

.jam-btn-icon {
    width: 32px;
    padding: 0;
}

.jam-btn-sm {
    height: 30px;
    padding: 0 12px;
    font-size: 12px;
}

/* ---------- 입력 (di-input) -------------------------------------------- */

.jam-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(var(--global-text-color-rgb), 0.14);
    border-radius: 10px;
    background: var(--global-body-background);
    color: var(--global-text-color);
    font-family: inherit;
    font-size: 13.5px;
    transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
    -webkit-appearance: none;
    appearance: none;
}

.jam-input::placeholder {
    color: var(--global-text-muted);
}

.jam-input:focus {
    outline: none;
    border-color: var(--focus-border-color);
    box-shadow: 0 0 0 3px var(--focus-ring-color);
}

/* ---------- 게이트 (잠긴 방 · 관리자 로그인) ----------------------------
   두 얼굴이 있다. **앞문**(잠긴 방·관리자 확인·사라진 방)은 아직 들어오지
   않은 상태라 뒤가 비쳐서는 안 되고(불투명 + 브랜드 마크 = 로그인 화면),
   방 안에서 여는 **모달**(비공개로 전환)은 하던 일 위에 뜨는 것이라 반투명이
   맞다. DESIGN.md §4.6 — 다이얼로그 16px · 인증 카드 22px. */

.jam-gate {
    position: fixed;
    inset: 0;
    /* 엔진 크롬(최대 10500)보다 위 — <sshow> 가 스태킹 컨텍스트를 만들지 않아
       패널의 z-index 가 이 게이트와 같은 층에서 겨룬다. */
    z-index: 20000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(var(--global-text-color-rgb), 0.28);
}

.jam-gate.active {
    display: flex;
}

/* 앞문 — 뒤(에디터 크롬·캔버스·관리 표)를 한 겹으로 완전히 덮는다. */
.jam-gate.front {
    background: var(--global-body-background);
}

.jam-gate-mark {
    display: none;
    width: 26px;
    margin: 0 auto 20px;
    fill: var(--global-text-color);
}

.jam-gate.front .jam-gate-mark {
    display: block;
}

.jam-gate.front .jam-gate-card {
    max-width: 340px;
    padding: 32px 28px;
    border-radius: 22px;
    text-align: center;
    box-shadow: none;
}

.jam-gate.front .jam-gate-form {
    text-align: left;
}

.jam-gate-card {
    width: 100%;
    max-width: 360px;
    padding: 26px;
    border: 1px solid var(--global-border-color);
    border-radius: 16px;
    background: var(--global-body-background);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
}

.jam-gate-title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.jam-gate-desc {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--global-text-muted);
}

.jam-gate-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.jam-gate-error {
    display: none;
    font-size: 11.5px;
    color: var(--global-error-color);
}

.jam-gate-error.active {
    display: block;
}

/* ---------- 캔버스 ---------------------------------------------------- */

sshow {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

/* ---------- 관리 페이지 ------------------------------------------------ */

.jam-admin {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 1px;
    background: var(--global-border-color);
}

.jam-panel {
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--global-body-background);
}

.jam-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px 12px;
}

.jam-panel-title {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--global-text-muted);
}

.jam-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 20px 20px;
}

.jam-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.jam-table th {
    position: sticky;
    top: 0;
    padding: 8px 10px;
    background: var(--global-body-background);
    border-bottom: 1px solid var(--global-border-color);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--global-text-muted);
    text-align: left;
    white-space: nowrap;
}

.jam-table td {
    padding: 10px;
    border-bottom: 1px solid var(--global-border-color);
    vertical-align: middle;
}

.jam-table tbody tr {
    cursor: pointer;
}

.jam-table tbody tr:hover {
    background: var(--state-hover-bg);
}

.jam-table tbody tr.active {
    background: var(--state-active-bg);
}

/* 칸이 아니라 칸 안의 이름표가 자물쇠와 나란히 선다 — td 에 flex 를 주면
   표의 칸 노릇을 잃어 테두리가 어긋난다. */
.jam-table-id {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.jam-table-id svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--global-text-muted);
}

.jam-table-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.jam-num {
    font-variant-numeric: tabular-nums;
    color: var(--global-text-muted);
}

.jam-empty {
    padding: 40px 0;
    text-align: center;
    font-size: 13px;
    color: var(--global-text-muted);
}

.jam-section {
    margin-bottom: 22px;
}

.jam-section-title {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--global-text-muted);
}

.jam-list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

.jam-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--global-border-color);
}

.jam-list time {
    margin-left: auto;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    color: var(--global-text-muted);
}

.jam-kind {
    min-width: 52px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--global-text-muted);
}

@media (max-width: 640px) {
    .jam-header {
        padding: 0 10px;
        gap: 6px;
    }

    .jam-wordmark,
    .jam-tag,
    .jam-divider,
    .jam-peers {
        display: none;
    }

    .jam-admin {
        grid-template-columns: minmax(0, 1fr);
    }
}