@import url('https://cdn.jsdelivr.net/gh/JellyBrick/SeguFont/Goseogu-Regular.css');

/* ==========================================================================
   1. 글로벌 기본 설정 (Global Styles)
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Goseogu', sans-serif;
}

body {
    background-color: #f4f7fa;
    color: #4a5568;
    line-height: 1.6;
    font-size: 18px;
}

/* ==========================================================================
   2. 공통 레이아웃 컴포넌트 (Common Layout Components)
   ========================================================================== */
/* 메인 흰색 박스 컨테이너 */
.main-container {
    max-width: 850px;
    margin: 50px auto;
    background: #ffffff;
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(162, 175, 200, 0.15);
}

/* 로그인/회원가입 전용 콤팩트 컨테이너 */
.main-container.small-container {
    max-width: 500px;
}

/* 상단 메인 비주얼 배너 */
.main-banner {
    width: 100%;
    height: 160px;
    background-image: url('../images/banner.png');
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    margin-bottom: 35px;
    box-shadow: 0 4px 15px rgba(162, 175, 200, 0.1);
}

/* 상단 로그인 유저 세션 정보바 */
.user-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding: 18px 24px;
    background: #f0f5fa;
    border-radius: 16px;
    color: #5a6782;
    font-size: 18px;
}

.user-info strong {
    color: #8b9dc3;
    font-size: 21px;
}

/* ==========================================================================
   3. 인증 관련 구역 (Login / Register Styles)
   ========================================================================== */
.login-box {
    text-align: center;
    padding: 20px;
}

.login-box p {
    color: #718096;
    margin-bottom: 20px;
    font-size: 18px;
}

.login-box form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.login-box input {
    width: 70%;
    padding: 14px 20px;
    background-color: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 18px;
    outline: none;
    transition: all 0.3s ease;
}

.login-box input:focus {
    border-color: #a3bfed;
    background-color: #ffffff;
}

/* 로그인 버튼 기본 */
.login-box button {
    width: 70%;
    padding: 14px 20px;
    background: #a3bfed;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.login-box button:hover {
    background: #8aaeee;
    transform: translateY(-2px);
}

/* 파스텔 라벤더 회원가입 유도 버튼 */
.login-box .btn-register {
    display: inline-block;
    width: 70%;
    padding: 14px 20px;
    background: #c4b5fd;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    box-sizing: border-box;
    margin-top: 10px;
}

.login-box .btn-register:hover {
    background: #a78bfa;
    transform: translateY(-2px);
}

/* 로그아웃 버튼 */
.btn-logout {
    background: #ffb3ba;
    color: white;
    padding: 8px 18px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    transition: background 0.2s;
}

.btn-logout:hover {
    background: #ff9ea7;
}

/* ==========================================================================
   4. 대시보드 메인 테이블 (Streamer List Table)
   ========================================================================== */
.streamer-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 10px;
}

.streamer-table th {
    background: #e9f0f7;
    color: #7a8aa3;
    padding: 15px;
    text-align: left;
    font-weight: 700;
    font-size: 18px;
}

.streamer-table th:first-child { border-top-left-radius: 14px; border-bottom-left-radius: 14px; }
.streamer-table th:last-child { border-top-right-radius: 14px; border-bottom-right-radius: 14px; }

.streamer-table td {
    padding: 18px 15px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.streamer-table tbody tr {
    transition: background-color 0.2s ease;
}

.streamer-table tbody tr:hover {
    background-color: #fbfdff;
}

/* 프로필 이미지 기본 및 호버 링크 스타일 */
.profile-link {
    display: inline-block;
    text-decoration: none;
    outline: none;
}

.profile-img {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    border: 2px solid #ffffff;
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* 💡 부드러운 애니메이션 추가 */
    cursor: pointer;
}

/* 프로필 마우스 호버 시 살짝 커지면서 그림자가 짙어지는 효과 */
.profile-img:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 14px rgba(162, 175, 200, 0.3);
}

.bj-nick {
    font-size: 22px;
    font-weight: 800;
    color: #2d3748;
}

.bj-id {
    font-size: 15px;
    color: #a0aec0;
}

/* ==========================================================================
   5. 방송 상태 표시 영역 (Broadcasting Status - LIVE / OFFLINE)
   ========================================================================== */
/* 실시간 방송중(LIVE) 좌측 정렬 대형 컨테이너 */
.status-live {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding-left: 10px;
}

.live-title-row {
    font-size: 20px;
    color: #4a5568;
    font-weight: bold;
    margin-top: 2px;

    /* 💡 핵심: 지정한 너비를 넘어가면 ... 처리 */
    max-width: 280px;        /* 대시보드 레이아웃에 맞게 너비 제한 (필요시 조절) */
    white-space: nowrap;     /* 줄바꿈 금지 */
    overflow: hidden;        /* 넘치는 글자 숨김 */
    text-overflow: ellipsis; /* 숨겨진 텍스트 끝에 ... 붙이기 */
    cursor: help;            /* 마우스 올리면 물음표/팁 포인터로 변경해 힌트 제공 */
}

/* 1단: 라이브 뱃지와 보러가기 버튼 가로 배치 */
.live-top-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

/* 🔴 LIVE 뱃지 라벨 */
.badge-live {
    display: inline-block;
    background: #ff9fa8;
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 800;
    width: fit-content;
    box-shadow: 0 4px 12px rgba(255, 159, 168, 0.4);
    animation: pulse 2s infinite;
}

/* ▶️ 보러가기 파스텔 버튼 */
.live-link {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    background-color: #a3bfed;
    color: white !important;
    text-decoration: none !important;
    border-radius: 6px;
    font-size: 13px;
    font-weight: bold;
    transition: background-color 0.2s;
}

.live-link:hover {
    background-color: #8fb4e8;
}

/* 2단: 시작 시간 독립 안내 구조 */
.live-time-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
}

.live-info {
    font-size: 16px; /* 💡 14px에서 16px로 업그레이드 완료 */
    color: #718096;
    margin: 0;
    white-space: nowrap;
}

/* 💤 방송 오프라인 안내 유닛 */
.status-offline {
    color: #64748b;
    font-size: 16px;
    font-weight: 500;
    display: inline-block;
    padding: 8px 14px;
    background: #f1f5f9;
    border-radius: 10px;
}

.status-offline-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.offline-time-info {
    font-size: 11px;
    color: #8c8391;
    margin: 0;
    padding-left: 2px;
    font-weight: 300;
}

/* ==========================================================================
   6. 데이터 제어 및 관리 영역 (Management UI & Features)
   ========================================================================== */
/* 웹 스트리머 추가 박스 */
.web-add-box {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    padding: 15px;
    background: #f8fafc;
    border-radius: 16px;
    border: 2px dashed #e2e8f0;
}

.web-add-box input {
    flex: 1;
    padding: 12px 18px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s;
}

.web-add-box input:focus {
    border-color: #a3bfed;
}

.web-add-box button {
    padding: 12px 24px;
    background: #a3bfed;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}

.web-add-box button:hover {
    background: #8aaeee;
}

/* 우측 설정/관리 통합 셀 (토글 스위치와 삭제 버튼 수직 배치) */
.action-manage-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%; /* 💡 칸 전체를 활용하도록 명시 */
}

/* 파스텔 알림 토글 스위치 */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    vertical-align: middle;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #cbd5e1;
    transition: .3s;
    border-radius: 34px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: #a3bfed;
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

/* 스트리머 단발성 삭제 버튼 */
.btn-delete-streamer {
    background: #ffb3ba;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-delete-streamer:hover {
    background: #ff9ea7;
}

/* 2단계 삭제 예/아니오 확인 박스 유닛 */
.delete-confirm-box {
    display: flex;
    gap: 6px;
    white-space: nowrap; /* 💡 예/아니오 버튼이 좁아서 위아래로 찢어지는 현상 절대 방지 */
}

.btn-confirm-yes {
    background: #ffb3ba;
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
}

.btn-confirm-yes:hover {
    background: #ff9ea7;
}

.btn-confirm-no {
    background: #cbd5e1;
    color: #4a5568;
    border: none;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
}

.btn-confirm-no:hover {
    background: #94a3b8;
}

/* 드래그 앤 드롭 핸들 아이콘(☰) */
.drag-handle {
    cursor: grab;
    font-size: 24px;
    color: #cbd5e1;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: color 0.2s;
}

.drag-handle:hover { color: #a3bfed; }
.drag-handle:active { cursor: grabbing; color: #8b9dc3; }

.sortable-ghost {
    opacity: 0.3;
    background-color: #f0f5fa !important;
}

/* ==========================================================================
   7. 애니메이션 효과 키프레임 (Animation Keyframes)
   ========================================================================== */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 159, 168, 0.7);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(255, 159, 168, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 159, 168, 0);
    }
}