/* public/css/app.css */
/* ── Reset ── */
html, body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { padding-top: 60px; background: #fff; color: #000; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body.mwatch-mode { padding-top: 0; }
a { color: inherit; text-decoration: none; }
/* ── 헤더 ── */
.header {
background: #202020; color: white; padding: 10px 20px;
display: flex; justify-content: space-between; align-items: center;
position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
box-sizing: border-box;
}
.header-left { display: flex; align-items: center; gap: 10px; }
.header-right { display: flex; align-items: center; gap: 15px; }
.logo-img { height: 32px; }
/* ── 검색 ── */
.header-center { position: absolute; left: 50%; transform: translateX(-50%); }
.search-wrap { position: relative; display: flex; align-items: center; }
.search-input { padding: 6px 10px; border: none; border-radius: 3px 0 0 3px; font-size: 14px; width: 240px; }
.search-btn {
width: 30px; height: 30px;
background: url('/icons/search.png') no-repeat center / 20px 20px #fff;
border: none; border-radius: 0 3px 3px 0; cursor: pointer;
}
.search-history-dropdown {
display: none; position: absolute; top: 38px; left: 0; width: 100%;
max-height: 200px; overflow-y: auto; background: #fff; border: 1px solid #ccc;
z-index: 1000; color: #000; box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.search-history-dropdown .sh-item {
display: flex; justify-content: space-between; align-items: center;
padding: 8px 10px; cursor: pointer;
}
.search-history-dropdown .sh-item:hover { background: #f0f0f0; }
.sh-delete {
width: 20px; height: 20px;
background: url('/icons/delete.png') no-repeat center / cover;
flex-shrink: 0;
}
/* ── 아이콘 버튼 ── */
.hamburger-btn { font-size: 24px; background: none; border: none; color: white; cursor: pointer; }
.upload-btn {
display: block; width: 24px; height: 24px;
background: url('/icons/upload.png') no-repeat center / cover;
}
.mobile-search-btn {
display: none; width: 30px; height: 30px;
background: url('/icons/white_search.png') no-repeat center / 20px 20px transparent;
border: none; cursor: pointer;
}
.login-link { color: white; font-weight: bold; font-size: 14px; white-space: nowrap; }
/* ── 프로필 드롭다운 ── */
.profile-img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; cursor: pointer; }
.dropdown { position: relative; }
.dropdown-content {
display: none; position: absolute; right: 0; top: calc(100% + 8px);
background: white; color: black; flex-direction: column; min-width: 150px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2); z-index: 10;
}
.dropdown-content.active { display: flex; }
.dropdown-content a { padding: 10px; border-bottom: 1px solid #ccc; color: black; }
.dropdown-content a:hover { background: #eee; }
/* ── 알림 ── */
.notif-wrap { position: relative; display: inline-flex; align-items: center; }
.notif-btn {
width: 24px; height: 24px; position: relative;
background: url('/icons/noti.png') no-repeat center / cover transparent;
border: none; cursor: pointer;
}
.notif-badge {
position: absolute; top: -2px; right: -4px;
background: #e53935; color: white; border-radius: 10px;
font-size: 10px; font-weight: 700; padding: 1px 5px; min-width: 16px;
text-align: center; line-height: 14px; pointer-events: none; display: none;
}
.notif-panel {
display: none; position: absolute; right: 0; top: calc(100% + 10px);
width: 320px; background: #1e1e1e; border: 1px solid #333;
border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.6); z-index: 9999; overflow: hidden;
}
.notif-panel.open { display: block; }
.notif-panel-header {
display: flex; justify-content: space-between; align-items: center;
padding: 12px 16px; border-bottom: 1px solid #2a2a2a;
font-size: 14px; font-weight: 700; color: #eee;
}
.notif-read-all {
background: none; border: 1px solid #444; color: #aaa;
font-size: 11px; padding: 3px 8px; border-radius: 4px; cursor: pointer;
}
.notif-read-all:hover { background: #2a2a2a; }
.notif-list { max-height: 360px; overflow-y: auto; }
.notif-item { padding: 12px 16px; border-bottom: 1px solid #222; cursor: pointer; transition: background 0.12s; }
.notif-item:hover { background: #252525; }
.notif-item.unread { border-left: 3px solid #1976d2; padding-left: 13px; }
.notif-item-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.notif-item-title { font-size: 13px; font-weight: 600; color: #eee; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-item-body { font-size: 12px; color: #777; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-item-date { font-size: 11px; color: #555; margin-top: 3px; }
.notif-type { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.notif-type-notice { background: #1565c0; color: white; }
.notif-type-warning { background: #e65100; color: white; }
.notif-type-info { background: #6a1b9a; color: white; }
.notif-loading, .notif-empty { padding: 24px; text-align: center; color: #555; font-size: 13px; }
.notif-panel-footer { padding: 10px 16px; border-top: 1px solid #2a2a2a; text-align: center; }
.notif-panel-footer a { color: #1976d2; font-size: 13px; }
.notif-panel-footer a:hover { text-decoration: underline; }
/* ── 사이드 메뉴 ── */
.side-menu {
position: fixed; top: 0; left: -75%; width: 70%; max-width: 300px; height: 100%;
background: #202020; color: white; z-index: 9999;
transition: left 0.3s ease-in-out; box-shadow: 2px 0 5px rgba(0,0,0,0.5);
}
.side-menu.open { left: 0; }
.side-menu-content {
display: flex; flex-direction: column; padding: 20px; height: 100%;
overflow-y: auto; box-sizing: border-box;
}
.side-menu-content a { color: white; padding: 10px 0; border-bottom: 1px solid #333; display: block; }
.side-menu-content a:hover { background: #333; padding-left: 6px; }
.close-btn { align-self: flex-end; font-size: 24px; background: none; border: none; color: white; cursor: pointer; margin-bottom: 20px; }
.side-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9998; }
.side-overlay.active { display: block; }
/* ── 모바일 검색 오버레이 ── */
.mobile-search-overlay {
display: none; position: fixed; inset: 0;
background: rgba(32,32,32,0.97); z-index: 9999;
justify-content: center; align-items: center; flex-direction: column; gap: 10px;
}
.mobile-search-overlay.active { display: flex; }
.mobile-search-close { position: absolute; top: 15px; left: 15px; font-size: 24px; cursor: pointer; color: white; }
.mobile-search-overlay input { padding: 10px; font-size: 16px; width: 80%; border-radius: 4px; border: none; }
.mobile-search-overlay button { padding: 10px 24px; font-size: 16px; cursor: pointer; border-radius: 4px; border: none; background: #fff; }
/* ── 페이지 로딩 ── */
.page-loading { text-align: center; padding: 60px 20px; color: #888; font-size: 1.1em; }
/* ═══════════════════════════════
홈 페이지
═══════════════════════════════ */
.section-title { text-align: center; margin: 20px 0 10px; font-size: 1.2em; color: #000; }
/* Top 9 그리드 */
.top9-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 30px; padding: 20px; justify-items: center;
}
.top-video-box { width: 100%; color: #000; }
.top-video-box a { color: #000; }
.top-video-box a:hover { color: #333; }
.thumbnail-wrapper { width: 100%; aspect-ratio: 16/9; background: black; overflow: hidden; }
.thumbnail-wrapper img { width: 100%; height: 100%; object-fit: contain; background: black; }
/* 일반 추천 행 */
.normal-row { display: flex; flex-wrap: wrap; gap: 20px; padding: 0 20px 20px; }
.video-card { width: calc((100% - 40px) / 3); box-sizing: border-box; color: #000; }
.video-thumb-wrap { position: relative; display: block; }
.video-thumb { width: 100%; aspect-ratio: 16/9; object-fit: contain; background: black; border-radius: 6px; display: block; }
.video-title-text { margin: 5px 0 0; font-weight: normal; font-size: .95rem; height: 2.6em; overflow: hidden; line-height: 1.3em; color: #000; }
.video-title-text a { color: #000; font-weight: normal; text-decoration: none; }
.video-title-text a:hover { color: #222; text-decoration: underline; }
.video-channel { margin-top: 4px; display: flex; align-items: center; gap: 6px; color: #000; font-size: .88rem; font-weight: normal; }
.video-channel a { color: #000; font-weight: normal; }
.channel-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.video-meta { font-size: .85rem; color: #222; margin-top: 2px; font-weight: 500; }
/* ── HRM 가로 스크롤 ── */
.section-row { width: 100%; box-sizing: border-box; padding: 10px 20px 4px; margin-bottom: 6px; }
.section-row-label { font-size: 14px; font-weight: 700; color: #000; margin-bottom: 8px; }
.scroll-track {
display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px;
-webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.scroll-track::-webkit-scrollbar { height: 4px; }
.scroll-track::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }
.hrm-card { flex: 0 0 120px; width: 120px; }
.hrm-thumb { width: 120px; aspect-ratio: 9/16; background: black; overflow: hidden; border-radius: 6px; }
.hrm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hrm-card-title { font-size: 11.5px; margin-top: 4px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4; color: #000; font-weight: normal; text-shadow: none; }
.hrm-card a { color: #000; text-decoration: none; }
.hrm-card a:hover .hrm-card-title { color: #222; text-decoration: underline; }
/* ── 라이브 카드 ── */
.live-card { flex: 0 0 200px; width: 200px; color: #000; text-decoration: none; }
.live-thumb { width: 200px; aspect-ratio: 16/9; background: #111; border-radius: 6px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; }
.live-thumb img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.live-badge { position: absolute; top: 6px; left: 6px; background: #e53935; color: white; font-size: 9px; font-weight: 700; letter-spacing: 1px; padding: 2px 6px; border-radius: 3px; display: flex; align-items: center; gap: 3px; }
.live-dot { width: 5px; height: 5px; background: white; border-radius: 50%; animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }
.live-title { font-size: 12px; font-weight: normal; margin-top: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #000; }
.live-user { font-size: 11px; color: #222; font-weight: 500; display: flex; align-items: center; gap: 4px; margin-top: 3px; }
.live-user img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.feed-hr { margin: 4px 20px; border: none; border-top: 1px solid #e0e0e0; }
/* ═══════════════════════════════
시청 페이지 (Watch)
═══════════════════════════════ */
.watch-layout { padding: 20px; max-width: 960px; margin: auto; }
.video-player-wrap { width: 100%; background: black; aspect-ratio: 16/9; }
.video-player-wrap video { width: 100%; height: 100%; display: block; }
.watch-title { font-size: 1.2rem; margin: 12px 0 6px; }
.watch-meta { font-size: .9rem; color: gray; }
.watch-actions { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.like-btn, .dislike-btn { width: 26px; height: 26px; cursor: pointer; border: none; background: transparent; padding: 0; }
.like-btn img, .dislike-btn img { width: 100%; height: 100%; }
.subscribe-btn { padding: 6px 16px; background: #e53935; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: .9rem; font-weight: bold; }
.subscribe-btn.subscribed { background: #aaa; }
/* 설명 */
.watch-desc { font-size: .95rem; line-height: 1.5; }
.watch-desc.collapsed { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.desc-toggle { color: #4a90e2; cursor: pointer; font-size: .9rem; margin-top: 4px; display: inline-block; }
/* 댓글 */
.comment-form textarea { width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid #ccc; border-radius: 4px; resize: none; font-family: inherit; }
.comment-form button { margin-top: 6px; padding: 6px 16px; background: #4a90e2; color: white; border: none; border-radius: 4px; cursor: pointer; }
.comment-item { display: flex; gap: 8px; margin-bottom: 12px; }
.comment-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.comment-body-wrap { flex: 1; }
.comment-username { font-weight: bold; font-size: .9rem; }
.comment-text { font-size: .9rem; line-height: 1.4; }
.comment-text.collapsed { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.comment-time { font-size: .8rem; color: gray; margin-top: 2px; }
.comment-actions button { background: none; border: none; font-size: .82rem; color: #666; cursor: pointer; padding: 2px 4px; }
.comment-actions button:hover { color: #333; }
.reply-form { margin-top: 6px; }
.reply-form textarea { width: 100%; box-sizing: border-box; padding: 6px; border: 1px solid #ccc; border-radius: 4px; resize: none; font-size: .9rem; }
.reply-form button { margin-top: 4px; padding: 4px 12px; background: #4a90e2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: .85rem; }
.replies-section { margin-left: 20px; margin-top: 6px; }
.timecode { color: #4a90e2; cursor: pointer; }
/* 추천 그리드 (watch 하단) */
.recommend-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 12px 0; }
.recommend-box { box-sizing: border-box; }
.recommend-box .rec-thumb-wrap { width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 6px; overflow: hidden; position: relative; }
.recommend-box .rec-thumb-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; }
.recommend-card { width: calc((100% - 40px) / 3); box-sizing: border-box; }
/* ═══════════════════════════════
검색 페이지 (search_ui.php)
═══════════════════════════════ */
.search-page { padding: 20px; }
/* 검색 바 */
.search-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.search-page-input { padding: 8px 10px; font-size: 15px; border: 1px solid #ccc; border-radius: 4px; width: 280px; }
.search-type-select { padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; }
.search-exec-btn { padding: 8px 18px; background: #202020; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; }
.search-exec-btn:hover { background: #444; }
/* 섹션 */
.search-section { margin-top: 28px; }
.search-section-title { font-size: 1rem; margin-bottom: 12px; color: #333; border-bottom: 2px solid #eee; padding-bottom: 6px; }
.search-empty { color: gray; font-size: .9rem; }
/* 영상 카드 그리드 */
.search-video-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.search-video-item { width: 200px; vertical-align: top; }
.search-video-item a { color: black; text-decoration: none; display: block; }
.search-video-item a:hover .search-video-title { color: gray; }
.search-thumb-wrap { position: relative; width: 200px; height: 112px; overflow: hidden; border-radius: 8px; background: black; }
.search-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; }
.search-video-title { font-weight: bold; font-size: .92rem; margin-top: 5px; line-height: 1.3; }
.search-video-meta { font-size: .82rem; color: gray; margin-top: 2px; }
/* 채널 카드 그리드 */
.search-channel-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.search-channel-item { width: 140px; text-align: center; }
.search-channel-item a { color: black; text-decoration: none; display: block; }
.search-channel-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; }
.search-channel-name { font-weight: bold; font-size: .9rem; margin-top: 5px; }
.search-channel-desc { font-size: .8rem; color: gray; margin-top: 3px; }
/* ═══════════════════════════════
검색 기록 페이지 (search_history.php / 모바일)
═══════════════════════════════ */
.search-history-page { padding: 20px; max-width: 440px; }
.sh-bar { display: flex; align-items: center; border: 2px solid black; padding: 5px 10px; margin-bottom: 20px; border-radius: 4px; }
.sh-bar input { border: none; outline: none; flex: 1; font-size: 17px; }
.sh-bar button { background: none; border: none; cursor: pointer; padding: 2px; display: flex; align-items: center; }
.sh-list { border-top: 2px solid black; }
.sh-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #ccc; cursor: pointer; }
.sh-keyword { font-size: 15px; flex: 1; }
.sh-keyword:hover { color: #555; }
.sh-delete-btn { background: none; border: none; cursor: pointer; padding: 2px; }
.sh-delete-btn img { width: 20px; height: 20px; }
/* ═══════════════════════════════
반응형
═══════════════════════════════ */
@media (max-width: 768px) {
.header-center { display: none; }
.mobile-search-btn { display: inline-block; }
.top9-grid { grid-template-columns: 1fr; gap: 16px; padding: 10px; }
.normal-row { flex-direction: column; padding: 0 10px 16px; }
.video-card { width: 100%; }
.recommend-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.recommend-card { width: calc((100% - 20px) / 2); }
.hrm-card { flex: 0 0 100px; width: 100px; }
.hrm-thumb { width: 100px; }
.live-card { flex: 0 0 160px; width: 160px; }
.live-thumb { width: 160px; }
.search-thumb { width: 140px; }
}
@media (max-width: 480px) {
.recommend-grid { grid-template-columns: 1fr; }
.recommend-card { width: 100%; }
}
/* ═══════════════════════════════
스튜디오 (studio.php)
═══════════════════════════════ */
.studio-layout { display: flex; min-height: calc(100vh - 60px); background: #0f0f0f; color: #e0e0e0; }
.studio-sidebar { width: 220px; background: #1a1a1a; border-right: 1px solid #2a2a2a; padding: 20px 0; flex-shrink: 0; position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto; }
.studio-sidebar-title { padding: 0 20px 16px; font-size: 13px; font-weight: 700; color: #888; letter-spacing: 1px; }
.studio-nav-item { display: flex; align-items: center; gap: 8px; padding: 10px 20px; color: #bbb; font-size: 14px; cursor: pointer; text-decoration: none; }
.studio-nav-item:hover { background: #252525; color: white; }
.studio-nav-item.active { background: #252525; color: white; border-left: 3px solid #e53935; padding-left: 17px; }
.studio-badge { background: #e53935; color: white; border-radius: 10px; padding: 1px 6px; font-size: 11px; font-weight: 700; margin-left: auto; }
.studio-main { flex: 1; padding: 30px; max-width: 900px; }
.studio-page-title { font-size: 20px; font-weight: 700; margin-bottom: 20px; color: #eee; }
.studio-loading { color: #666; padding: 40px; text-align: center; }
.studio-empty { text-align: center; color: #555; padding: 60px 0; font-size: 14px; }
/* 메시지 */
.studio-read-all-btn { background: none; border: 1px solid #444; color: #aaa; padding: 5px 12px; border-radius: 5px; font-size: 12px; cursor: pointer; margin-bottom: 16px; }
.studio-msg-card { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 8px; padding: 16px; margin-bottom: 12px; cursor: pointer; }
.studio-msg-card.unread { border-left: 3px solid #1976d2; }
.studio-msg-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.studio-msg-title { font-size: 15px; font-weight: 600; flex: 1; color: #eee; }
.studio-msg-meta { font-size: 12px; color: #666; }
.studio-msg-body { font-size: 13px; color: #aaa; line-height: 1.6; display: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid #2a2a2a; white-space: pre-wrap; }
.studio-msg-card.open .studio-msg-body { display: block; }
.studio-type-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; }
.type-notice { background: #1565c0; color: white; }
.type-warning { background: #e65100; color: white; }
.type-info { background: #6a1b9a; color: white; }
.studio-unread-dot { display: inline-block; width: 8px; height: 8px; background: #1976d2; border-radius: 50%; }
/* 영상 그리드 */
.studio-video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.studio-video-card { background: #1a1a1a; border-radius: 8px; overflow: hidden; }
.studio-thumb-wrap { position: relative; }
.studio-video-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.studio-video-thumb-empty { width: 100%; aspect-ratio: 16/9; background: #111; display: flex; align-items: center; justify-content: center; color: #444; font-size: 12px; }
.studio-video-info { padding: 10px; }
.studio-video-title { font-size: 13px; font-weight: 600; color: #eee; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 4px; }
.studio-video-meta { font-size: 11px; color: #666; }
.studio-video-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.studio-action-btn { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; cursor: pointer; text-decoration: none; border: none; background: #333; color: #eee; }
.studio-action-btn.cut { background: #e65100; color: white; }
.studio-action-btn.restore { background: #1565c0; color: white; }
.studio-action-btn.delete { background: #c62828; color: white; }
.studio-action-btn.delete:disabled { background: #999; cursor: not-allowed; }
/* 라이브 통계 */
.studio-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
.studio-stat-card { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 8px; padding: 16px; text-align: center; }
.studio-stat-value { font-size: 22px; font-weight: 700; color: white; margin-bottom: 4px; }
.studio-stat-label { font-size: 12px; color: #666; }
.studio-live-status { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 8px; padding: 16px; font-size: 13px; color: #aaa; line-height: 2; }
/* 녹화 */
.studio-rec-row { display: flex; gap: 14px; align-items: center; background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 8px; padding: 12px; margin-bottom: 10px; }
.studio-rec-thumb { width: 120px; height: 68px; object-fit: cover; border-radius: 5px; flex-shrink: 0; }
.studio-rec-thumb-empty { width: 120px; height: 68px; background: #111; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: #444; font-size: 11px; flex-shrink: 0; }
.studio-rec-info { flex: 1; min-width: 0; }
.studio-rec-title { font-size: 14px; font-weight: 600; color: #eee; margin-bottom: 6px; }
.studio-rec-meta { font-size: 12px; color: #666; }
.studio-rec-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.studio-badge { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; margin-right: 5px; }
.badge-rec { background: #b71c1c; color: white; }
.badge-done { background: #1565c0; color: white; }
.badge-pub { background: #1b5e20; color: white; }
/* 설정 */
.studio-settings-card { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 8px; padding: 20px; }
.studio-settings-card h3 { font-size: 15px; color: #eee; margin-bottom: 6px; }
.studio-settings-card p { font-size: 13px; color: #888; margin-bottom: 14px; }
.studio-select { width: 100%; max-width: 300px; padding: 8px 12px; background: #111; color: #eee; border: 1px solid #333; border-radius: 6px; font-size: 14px; margin-bottom: 14px; display: block; }
.studio-save-btn { padding: 8px 20px; background: #1976d2; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; }
/* ═══════════════════════════════
채널 수정 (edit_channel.php)
═══════════════════════════════ */
.edit-channel-page { max-width: 640px; margin: 30px auto; padding: 0 20px 60px; }
.edit-channel-title { font-size: 22px; font-weight: 700; margin-bottom: 24px; text-align: center; }
.edit-channel-msg { max-width: 600px; margin: 0 auto 16px; padding: 12px 16px; border-radius: 6px; text-align: center; font-size: 13px; }
.ec-msg-ok { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.ec-msg-err { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.edit-channel-form { background: #f9f9f9; border-radius: 10px; padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.ec-field { display: flex; flex-direction: column; gap: 6px; }
.ec-label { font-size: 13px; font-weight: 700; color: #444; }
.ec-input { width: 100%; padding: 8px 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 14px; box-sizing: border-box; }
.ec-textarea { width: 100%; padding: 8px 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 14px; resize: vertical; box-sizing: border-box; }
.ec-hint { font-size: 12px; color: #888; }
.ec-hint-warn { color: #d9534f; }
.ec-char-count { font-size: 12px; color: #888; text-align: right; }
.ec-profile-row { display: flex; align-items: center; gap: 14px; }
.ec-current-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid #ddd; }
.ec-profile-btns { display: flex; flex-direction: column; gap: 8px; }
.ec-btn { display: inline-block; padding: 7px 16px; border: none; border-radius: 5px; font-size: 13px; font-weight: 600; cursor: pointer; background: #4a90e2; color: white; text-align: center; }
.ec-btn-upload { background: #28a745; }
.ec-btn-delete { background: #e74c3c; }
.ec-btn-add-link { background: #28a745; width: fit-content; margin-top: 6px; }
.ec-btn-save { background: #4a90e2; width: 100%; padding: 12px; font-size: 15px; font-weight: 700; }
.ec-link-item { background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 12px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.ec-link-remove { background: #dc3545; color: white; border: none; border-radius: 4px; padding: 4px 10px; font-size: 12px; font-weight: 700; cursor: pointer; align-self: flex-start; }
/* ═══════════════════════════════
라이브 목록 (lives_list.php)
═══════════════════════════════ */
.lives-page { background: #080808; min-height: calc(100vh - 60px); color: #e0e0e0; }
.lives-page-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 32px; border-bottom: 1px solid #222; background: #111; position: sticky; top: 60px; z-index: 10; }
.lives-page-title { font-size: 22px; font-weight: 700; color: #e0e0e0; }
.lives-filter-toggle { display: flex; gap: 4px; background: #181818; border: 1px solid #222; border-radius: 8px; padding: 4px; }
.lives-filter-btn { background: none; border: none; color: #555; font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 5px; cursor: pointer; }
.lives-filter-btn.active { background: #111; color: #e0e0e0; box-shadow: 0 1px 4px rgba(0,0,0,0.4); }
.lives-filter-btn.active.live { color: #e53935; }
.lives-count-bar { padding: 16px 32px; font-size: 12px; color: #555; border-bottom: 1px solid #222; display: flex; align-items: center; gap: 16px; }
.lives-count-live { display: flex; align-items: center; gap: 5px; color: #e53935; font-weight: 700; }
.lives-live-dot { width: 6px; height: 6px; background: #e53935; border-radius: 50%; animation: livesBlink 1.2s ease-in-out infinite; }
@keyframes livesBlink { 0%,100%{opacity:1} 50%{opacity:0.2} }
.lives-grid-wrap { padding: 28px 32px; max-width: 1200px; margin: 0 auto; }
.lives-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.lives-empty { text-align: center; color: #555; padding: 60px; font-size: 14px; }
.lives-card { background: #111; border: 1px solid #222; border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: border-color 0.2s, transform 0.2s; }
.lives-card:hover { border-color: #333; transform: translateY(-2px); }
.lives-card.is-live { border-color: rgba(229,57,53,0.3); }
.lives-card-thumb { aspect-ratio: 16/9; background: #181818; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lives-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lives-thumb-icon { color: #2a2a2a; }
.lives-card-overlay { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: flex-start; padding: 10px; }
.lives-badge-live { display: inline-flex; align-items: center; gap: 5px; background: #e53935; color: white; font-size: 10px; font-weight: 700; letter-spacing: 1px; padding: 3px 8px; border-radius: 3px; }
.lives-badge-dot { width: 5px; height: 5px; background: white; border-radius: 50%; animation: livesBlink 1.2s ease-in-out infinite; }
.lives-badge-offline { display: inline-flex; align-items: center; background: rgba(0,0,0,0.6); color: #555; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 3px; border: 1px solid #222; }
.lives-card-body { padding: 14px 16px; }
.lives-card-title { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; }
.lives-card-user { font-size: 12px; color: #555; display: flex; align-items: center; gap: 5px; }
/* ═══════════════════════════════
라이브 시청 (live.php)
═══════════════════════════════ */
.live-page { background: #0a0a0a; color: #e8e8e8; min-height: calc(100vh - 60px); display: flex; flex-direction: column; }
.live-topbar { display: flex; align-items: center; gap: 12px; padding: 10px 20px; background: #111; border-bottom: 1px solid #2a2a2a; flex-wrap: wrap; }
.live-online-badge { display: flex; align-items: center; gap: 6px; background: #e53935; color: white; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 3px; }
.live-offline-badge { background: #1a1a1a; color: #666; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 3px; border: 1px solid #2a2a2a; }
.live-title-wrap { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.live-stream-title { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 400px; }
.live-title-edit-input { font-size: 15px; background: #1a1a1a; border: 1px solid #444; border-radius: 5px; color: #e8e8e8; padding: 3px 10px; outline: none; width: 300px; }
.live-edit-icon-btn { background: none; border: none; color: #666; cursor: pointer; padding: 2px 4px; font-size: 14px; }
.live-edit-icon-btn:hover { color: #e8e8e8; }
.live-desc-toggle-btn { background: none; border: 1px solid #2a2a2a; border-radius: 4px; color: #666; cursor: pointer; font-size: 11px; font-weight: 700; padding: 3px 10px; }
.live-viewer-count { margin-left: auto; font-size: 13px; color: #666; }
.live-channel-btn { display: flex; align-items: center; gap: 7px; text-decoration: none; color: #e8e8e8; background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 6px; padding: 4px 10px 4px 4px; flex-shrink: 0; }
.live-channel-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.live-channel-name { font-size: 13px; font-weight: 500; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.live-check-icon { width: 13px; height: 13px; }
.live-main-layout { display: flex; flex: 1; overflow: hidden; min-height: 0; }
.live-left-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.live-video-area { flex: 1; background: #000; position: relative; display: flex; align-items: center; justify-content: center; min-height: 300px; }
.live-video-area video { width: 100%; height: 100%; object-fit: contain; }
.live-offline-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.5); color: #666; font-size: 14px; }
.live-unmute-banner { position: absolute; bottom: 54px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.8); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; color: #fff; font-size: 13px; font-weight: 600; padding: 9px 18px; cursor: pointer; }
.live-desc-panel { max-height: 0; overflow: hidden; transition: max-height 0.3s; background: #111; border-top: 1px solid #2a2a2a; padding: 0 20px; }
.live-desc-panel.open { max-height: 160px; padding: 14px 20px; }
.live-desc-panel p { font-size: 13px; color: #bbb; white-space: pre-wrap; }
.live-chat-sidebar { width: 320px; flex-shrink: 0; border-left: 1px solid #2a2a2a; background: #111; display: flex; flex-direction: column; }
.live-chat-header { padding: 12px 16px; border-bottom: 1px solid #2a2a2a; font-size: 12px; font-weight: 700; color: #666; display: flex; align-items: center; justify-content: space-between; }
.live-pop-btn { background: none; border: 1px solid #2a2a2a; border-radius: 4px; color: #666; cursor: pointer; padding: 3px 6px; font-size: 13px; }
.live-chat-box { flex: 1; overflow-y: auto; padding: 12px 0; }
.live-chat-msg { padding: 4px 14px; font-size: 13px; line-height: 1.5; word-break: break-word; }
.live-chat-msg:hover { background: #1a1a1a; }
.live-chat-ts { font-size: 10px; color: #555; margin-right: 4px; }
.live-chat-uname { font-weight: 700; color: #f9a825; margin-right: 4px; }
.live-chat-txt { color: #e8e8e8; }
.live-chat-msg.deleted .live-chat-txt { color: #555; font-style: italic; }
.live-chat-system { color: #4caf50; font-size: 12px; padding: 6px 14px; font-style: italic; }
.live-chat-error { color: #ef5350; font-size: 12px; padding: 6px 14px; }
.live-chat-input-area { border-top: 1px solid #2a2a2a; padding: 12px; flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; }
.live-chat-input-row { display: flex; gap: 8px; }
.live-chat-input-row input { flex: 1; background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 6px; color: #e8e8e8; font-size: 13px; padding: 8px 12px; outline: none; }
.live-chat-input-row input:disabled { opacity: 0.4; }
.live-send-btn { background: #e53935; border: none; border-radius: 6px; color: white; font-size: 13px; font-weight: 600; padding: 8px 14px; cursor: pointer; }
.live-send-btn:disabled { opacity: 0.4; }
.live-login-notice { font-size: 12px; color: #555; text-align: center; }
.live-login-notice a { color: #64b5f6; }
.live-ctx-menu, .live-ban-submenu { background: #1e1e1e; border: 1px solid #333; border-radius: 6px; padding: 4px 0; z-index: 9999; min-width: 160px; box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
.live-ctx-item { padding: 8px 16px; font-size: 13px; cursor: pointer; color: #e8e8e8; }
.live-ctx-item:hover { background: #2a2a2a; }
.live-ctx-item.danger { color: #ef5350; }
.live-ctx-sep { border-top: 1px solid #333; margin: 4px 0; }
.live-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #222; border: 1px solid #333; border-radius: 8px; color: #e8e8e8; font-size: 13px; padding: 10px 20px; opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 9999; }
.live-toast.show { opacity: 1; }
.live-toast.ok { border-color: rgba(67,160,71,0.5); color: #66bb6a; }
.live-toast.err { border-color: rgba(229,57,53,0.5); color: #ef5350; }
@media (max-width: 700px) {
.live-main-layout { flex-direction: column; }
.live-chat-sidebar { width: 100%; border-left: none; border-top: 1px solid #2a2a2a; height: 360px; }
.lives-page-header { padding: 14px 16px; }
.lives-grid-wrap { padding: 16px; }
.lives-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.studio-sidebar { width: 60px; }
.studio-sidebar-title, .studio-nav-item span { display: none; }
}
/* ═══════════════════════════════
로그인 / 회원가입 (auth)
═══════════════════════════════ */
.auth-wrap { display: flex; justify-content: center; align-items: flex-start; padding: 40px 20px 80px; min-height: calc(100vh - 60px); }
.auth-card { width: 100%; max-width: 400px; padding: 30px; border: 1px solid #ccc; border-radius: 8px; background: #fafafa; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
.auth-title { text-align: center; margin: 0 0 24px; color: #333; font-size: 22px; }
.auth-msg { padding: 12px 16px; border-radius: 5px; font-size: 14px; margin-bottom: 16px; text-align: center; font-weight: 600; }
.auth-msg-ok { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.auth-msg-err { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.auth-field { margin-bottom: 16px; }
.auth-input { width: 100%; padding: 10px 12px; border: 1px solid #bbb; border-radius: 5px; font-size: 1rem; box-sizing: border-box; transition: border-color 0.3s; }
.auth-input:focus { border-color: #4a90e2; outline: none; }
.auth-remember { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #555; margin-bottom: 16px; cursor: pointer; }
.auth-btn { width: 100%; padding: 12px; background: #4a90e2; color: white; font-weight: 600; font-size: 1.05rem; border: none; border-radius: 6px; cursor: pointer; transition: background 0.3s; margin-bottom: 10px; }
.auth-btn:hover { background: #357ABD; }
.auth-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.auth-links { display: flex; flex-direction: column; gap: 8px; align-items: center; margin-top: 10px; }
.auth-links a { font-size: 0.9rem; color: #4a90e2; text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }
@media (max-width: 480px) {
.auth-card { padding: 20px 16px; }
}
/* ═══════════════════════════════
채널 페이지
═══════════════════════════════ */
.ch-wrap { max-width: 900px; margin: 0 auto; padding: 20px 16px 80px; }
.ch-header { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.ch-avatar { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ch-live-wrap { display: inline-block; position: relative; text-decoration: none; }
.ch-avatar-live { border: 3px solid #e53935; animation: live-pulse 1.8s ease-in-out infinite; }
.ch-live-badge { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); background: #e53935; color: white; font-size: 10px; font-weight: 700; letter-spacing: 1px; padding: 2px 7px; border-radius: 3px; white-space: nowrap; }
@keyframes live-pulse { 0%,100%{ box-shadow:0 0 0 3px rgba(229,57,53,.35)} 50%{box-shadow:0 0 0 6px rgba(229,57,53,.12)} }
.ch-meta { flex: 1; min-width: 200px; display: flex; flex-direction: column; align-items: flex-start; }
.ch-name { font-size: 22px; margin: 0 0 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ch-check { width: 16px; height: 16px; vertical-align: middle; }
.ch-desc { color: #555; max-width: 540px; margin: 4px 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.ch-desc.expanded { white-space: pre-wrap; word-break: break-all; overflow: visible; text-overflow: unset; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ch-sub-count { color: #666; font-size: 14px; margin: 6px 0; }
.ch-sub-btn { padding: 8px 20px; background: #222; color: white; border: none; border-radius: 20px; font-weight: 600; cursor: pointer; transition: background .2s; margin-top: 6px; }
.ch-sub-btn.subscribed { background: #e0e0e0; color: #333; }
.ch-sub-btn:hover { opacity: .85; }
.ch-divider { border: none; border-top: 1px solid #ddd; margin: 10px 0 20px; }
.ch-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.ch-tab { padding: 8px 18px; border: none; background: #f0f0f0; border-radius: 5px; cursor: pointer; font-size: 14px; transition: background .2s; }
.ch-tab.active { background: #007bff; color: white; }
.ch-tab:hover:not(.active) { background: #e0e0e0; }
.ch-section-title { margin: 0 0 12px; font-size: 18px; }
.ch-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.ch-video-box { width: 220px; flex-shrink: 0; }
.ch-thumb-wrap { display: block; position: relative; }
.ch-thumb-wrap img { width: 100%; aspect-ratio: 16/9; object-fit: contain; background: #000; border-radius: 6px; display: block; }
.ch-video-title { font-size: 14px; margin: 6px 0 2px; display: block; }
.ch-video-meta { font-size: 12px; color: #888; }
.ch-video-actions { display: flex; gap: 8px; margin-top: 6px; align-items: center; }
.ch-del-btn { background: none; border: none; cursor: pointer; padding: 0; }
.ch-featured { max-width: 460px; margin-bottom: 24px; }
.ch-featured img { width: 100%; aspect-ratio: 16/9; object-fit: contain; background: #000; border-radius: 8px; display: block; margin-bottom: 8px; }
.ch-sort-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.ch-sort-btn { padding: 7px 16px; border: none; background: #f0f0f0; border-radius: 5px; cursor: pointer; font-size: 13px; }
.ch-sort-btn.active { background: #007bff; color: white; }
.ch-empty { color: #888; padding: 20px 0; }
.ch-err { color: #c00; padding: 20px 0; }
.ch-post-form { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.1); margin-bottom: 20px; }
.ch-post-form textarea { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 4px; resize: vertical; font-family: inherit; box-sizing: border-box; }
.ch-post-char { text-align: right; color: #666; font-size: 12px; margin-top: 4px; }
.ch-post-imgs { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.ch-img-label { font-size: 13px; color: #555; cursor: pointer; }
.ch-img-label input { display: none; }
.ch-post-preview { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ch-post-previmg { width: 90px; height: 90px; object-fit: cover; border-radius: 4px; }
.ch-post-btn { padding: 10px 24px; background: #007bff; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; }
.ch-post { background: white; padding: 16px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.1); margin-bottom: 12px; }
.ch-post-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ch-post-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.ch-post-time { color: #888; font-size: 11px; }
.ch-post-body { line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.ch-post-body.clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ch-post-more { color: #007bff; font-size: 13px; cursor: pointer; margin-top: 4px; display: inline-block; }
.ch-post-img { max-width: 280px; border-radius: 4px; margin-top: 8px; display: block; }
.ch-post-date { color: #888; font-size: 11px; margin-top: 8px; }
.ch-post-del { margin-left: auto; background: none; border: none; cursor: pointer; font-size: 16px; color: #e53935; }
.ch-info { max-width: 600px; }
.ch-info-edit-btn { display: inline-block; padding: 10px 20px; background: #007bff; color: white; text-decoration: none; border-radius: 5px; font-weight: 600; margin-bottom: 20px; }
.ch-info-section { margin-bottom: 20px; }
.ch-info-section h4 { margin: 0 0 8px; }
.ch-info-section p { margin: 4px 0; font-size: 14px; color: #444; }
.ch-link-item { display: flex; align-items: center; gap: 10px; padding: 10px; background: white; border-radius: 8px; text-decoration: none; color: inherit; box-shadow: 0 1px 3px rgba(0,0,0,.1); margin-bottom: 8px; transition: background .2s; }
.ch-link-item:hover { background: #f5f5f5; }
.ch-link-favicon { width: 18px; height: 18px; object-fit: contain; }
@media (max-width: 600px) {
.ch-grid { gap: 12px; }
.ch-video-box { width: calc(50% - 6px); }
.ch-featured { max-width: 100%; }
}
/* ═══════════════════════════════
업로드 페이지
═══════════════════════════════ */
.upload-wrap { display: flex; justify-content: center; padding: 40px 16px 80px; min-height: calc(100vh - 60px); }
.upload-card { width: 100%; max-width: 540px; }
.upload-card h2 { margin: 0 0 12px; }
.upload-reso-info { color: #555; margin-bottom: 20px; font-size: 14px; }
.upload-drop { border: 2px dashed #ccc; border-radius: 12px; padding: 40px 20px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; background: #fafafa; }
.upload-drop.dragover { border-color: #007bff; background: #eef5ff; }
.upload-drop-icon { font-size: 48px; margin-bottom: 12px; }
.upload-drop p { color: #666; font-size: 14px; }
.upload-file-info { display: flex; gap: 12px; align-items: center; margin: 12px 0; font-size: 14px; color: #444; }
.upload-msg { padding: 12px 16px; border-radius: 5px; font-size: 14px; margin: 12px 0; font-weight: 600; }
.upload-msg-ok { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.upload-msg-err { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.upload-progress-wrap { margin: 16px 0; }
.upload-progress-label { font-size: 14px; color: #555; margin-bottom: 6px; }
.upload-progress-bar { height: 8px; background: #e9ecef; border-radius: 4px; overflow: hidden; }
.upload-progress-fill { height: 100%; background: #007bff; border-radius: 4px; transition: width .4s; }
.upload-progress-pct { text-align: right; font-size: 12px; color: #666; margin-top: 4px; }
.upload-btn1 { width: 100%; padding: 12px; background: #007bff; color: white; border: none; border-radius: 6px; font-size: 1rem; font-weight: 600; cursor: pointer; margin-top: 16px; transition: background .2s; }
.upload-btn1:hover:not(:disabled) { background: #0056b3; }
.upload-btn1:disabled { opacity: .5; cursor: not-allowed; }
.upload-back-btn { display: inline-block; margin-top: 20px; padding: 10px 24px; background: #6c757d; color: white; border-radius: 6px; text-decoration: none; font-weight: 600; }
/* ═══════════════════════════════
HRM 풀스크린 뷰어
═══════════════════════════════ */
body.hrm-mode { overflow: hidden; }
/* 데스크톱: header 표시, sidebar만 숨김 */
body.hrm-mode #appHeader { display: flex !important; z-index: 1001; }
body.hrm-mode #sidebar { display: none !important; }
/* 모바일: header 숨기고 footer 표시 */
@media (max-width: 768px) {
body.hrm-mode #appHeader { display: none !important; }
}
.hrm-root { position: fixed; inset: 0; background: black; color: white; overflow: hidden; z-index: 1000; user-select: none; }
/* 데스크톱: header 아래부터 시작 */
@media (min-width: 769px) {
.hrm-root { top: var(--header-height, 56px); }
}
.hrm-loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 18px; background: rgba(0,0,0,.8); padding: 20px 40px; border-radius: 12px; z-index: 10; }
.hrm-container { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.hrm-container video { width: 100%; height: 100%; object-fit: contain; cursor: pointer; }
.hrm-more-btn { position: fixed; top: 20px; right: 20px; width: 40px; height: 40px; background: rgba(255,255,255,.2); border: none; border-radius: 50%; color: white; font-size: 22px; cursor: pointer; z-index: 110; backdrop-filter: blur(10px); }
.hrm-more-menu { position: fixed; top: 70px; right: 20px; background: rgba(28,28,28,.95); backdrop-filter: blur(20px); border-radius: 12px; padding: 8px 0; min-width: 200px; z-index: 111; display: none; box-shadow: 0 4px 20px rgba(0,0,0,.5); }
.hrm-more-menu.show { display: block; }
.hrm-menu-item { padding: 12px 20px; cursor: pointer; font-size: 14px; transition: background .2s; }
.hrm-menu-item:hover { background: rgba(255,255,255,.1); }
.hrm-actions { position: fixed; right: 12px; bottom: 80px; display: flex; flex-direction: column; gap: 20px; z-index: 100; }
.hrm-action-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.hrm-action-btn { width: 48px; height: 48px; background: rgba(255,255,255,.2); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px); cursor: pointer; font-size: 22px; }
.hrm-action-count { font-size: 12px; margin-top: 4px; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.hrm-bottom { position: fixed; bottom: 80px; left: 16px; right: 76px; z-index: 99; }
.hrm-uploader { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.hrm-uploader-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: white; }
.hrm-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.3); }
.hrm-uname { font-size: 14px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.hrm-sub-btn { padding: 6px 16px; background: white; color: black; border: none; border-radius: 18px; font-weight: 600; font-size: 13px; cursor: pointer; }
.hrm-sub-btn.subscribed { background: rgba(255,255,255,.3); color: white; }
.hrm-title { font-size: 14px; line-height: 1.4; text-shadow: 0 1px 3px rgba(0,0,0,.8); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hrm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.95); z-index: 200; display: none; overflow-y: auto; padding: 20px; }
.hrm-overlay.show { display: block; }
.hrm-overlay-content { max-width: 600px; margin: 40px auto; }
.hrm-overlay-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.hrm-desc-text { white-space: pre-wrap; line-height: 1.6; font-size: 14px; }
.hrm-desc-meta { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12px; color: rgba(255,255,255,.6); }
.hrm-close-btn { width: 36px; height: 36px; background: rgba(255,255,255,.2); border: none; border-radius: 50%; color: white; font-size: 18px; cursor: pointer; }
.hrm-comments { position: fixed; bottom: -100%; left: 0; right: 0; height: 70vh; background: rgba(18,18,18,.98); backdrop-filter: blur(20px); border-radius: 20px 20px 0 0; z-index: 200; transition: bottom .3s; display: flex; flex-direction: column; }
.hrm-comments.show { bottom: 0; }
.hrm-comments-hd { padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; align-items: center; }
.hrm-comments-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.hrm-comment { display: flex; gap: 10px; margin-bottom: 16px; }
.hrm-comment-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.hrm-comment-content { flex: 1; }
.hrm-comment-time { color: rgba(255,255,255,.5); font-size: 12px; }
.hrm-comment-content p { margin: 4px 0 0; font-size: 14px; }
.hrm-comment-input { padding: 14px 20px; border-top: 1px solid rgba(255,255,255,.1); display: flex; gap: 10px; align-items: center; }
.hrm-comment-input input { flex: 1; padding: 10px 16px; background: rgba(255,255,255,.1); border: none; border-radius: 20px; color: white; font-size: 14px; outline: none; }
.hrm-comment-input input::placeholder { color: rgba(255,255,255,.5); }
.hrm-comment-input button { width: 40px; height: 40px; background: rgba(255,255,255,.2); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hrm-footer { position: fixed; bottom: 0; left: 0; right: 0; height: 60px; background: rgba(18,18,18,.9); backdrop-filter: blur(20px); display: flex; justify-content: space-around; align-items: center; z-index: 98; border-top: 1px solid rgba(255,255,255,.1); }
.hrm-footer-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; color: white; font-size: 11px; }
/* 데스크톱: footer 숨김 */
@media (min-width: 769px) {
.hrm-footer { display: none; }
.hrm-actions { bottom: 40px; }
.hrm-bottom { bottom: 40px; }
}
/* ── studio 추가 스타일 ── */
.studio-alert-ok { background:#1b5e20; color:#a5d6a7; padding:10px 14px; border-radius:6px; margin-bottom:16px; font-size:13px; }
.studio-live-info { background:#1a1a1a; border:1px solid #2a2a2a; border-radius:8px; padding:16px; font-size:13px; color:#aaa; }
/* 관리자 탭 */
.sadmin-tab { padding:8px 18px; border:none; border-radius:6px 6px 0 0; cursor:pointer; font-size:14px; font-weight:600; background:#252525; color:#888; }
.sadmin-tab.active { background:#1a1a1a; color:#3ea6ff; box-shadow:0 1px 4px rgba(0,0,0,.3); }
.sa-row { margin-bottom:14px; }
.sa-label { display:block; font-size:13px; font-weight:600; color:#888; margin-bottom:5px; }
.sa-input { width:100%; padding:8px 12px; background:#111; color:#eee; border:1px solid #333; border-radius:6px; font-size:14px; }
.sa-textarea { width:100%; resize:vertical; background:#111; color:#eee; border:1px solid #333; border-radius:6px; padding:8px 12px; font-size:14px; font-family:inherit; }
.sa-table { width:100%; border-collapse:collapse; font-size:13px; }
.sa-table th { padding:9px 12px; background:#252525; font-weight:600; color:#888; text-align:left; }
.sa-table td { padding:9px 12px; border-bottom:1px solid #2a2a2a; }
/* ══════════════════════════════════════════
내 녹화 관리 (/my-recordings) - myRecordings.js
══════════════════════════════════════════ */
.mr-wrap { max-width: 900px; margin: 0 auto; padding: 28px 20px; color: #000; min-height: calc(100vh - 60px); }
.mr-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.mr-title { font-size: 22px; font-weight: 700; margin: 0; color: #000; }
.mr-back-btn { font-size: 13px; color: #444; text-decoration: none; padding: 6px 12px; border: 1px solid #ccc; border-radius: 6px; }
.mr-back-btn:hover { color: #000; border-color: #888; }
.mr-alert { padding: 12px 16px; border-radius: 6px; background: #e8f5e9; color: #1b5e20; border: 1px solid #c8e6c9; margin-bottom: 20px; font-size: 14px; }
.mr-empty { text-align: center; color: #555; padding: 80px 0; font-size: 15px; }
/* 카드 */
.mr-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 10px; padding: 16px; margin-bottom: 14px; display: flex; gap: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.08); color: #000; }
.mr-thumb-wrap { flex-shrink: 0; }
.mr-thumb { width: 160px; height: 90px; object-fit: cover; border-radius: 7px; background: #111; display: block; transition: opacity .2s; }
.mr-thumb:hover { opacity: .82; }
.mr-thumb-empty { width: 160px; height: 90px; background: #222; border: 1px solid #444; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; transition: opacity .2s; }
.mr-thumb-empty:hover { opacity: .82; }
.mr-info { flex: 1; min-width: 0; color: #000; }
.mr-rec-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-meta { font-size: 12px; color: #555; margin-bottom: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
/* 배지 */
.mr-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; margin-right: 4px; }
.mr-badge-rec { background: #ffebee; color: #c62828; }
.mr-badge-done { background: #e3f2fd; color: #1565c0; }
.mr-badge-pub { background: #e8f5e9; color: #2e7d32; }
/* 액션 */
.mr-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mr-action-row { display: flex; gap: 6px; align-items: center; }
.mr-btn { padding: 6px 14px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; transition: opacity .15s; color: #fff; }
.mr-btn:hover { opacity: .82; }
.mr-btn-pub { background: #1565c0; color: #fff; }
.mr-btn-keep { background: #555; color: #fff; }
.mr-btn-edit { background: #e65100; color: #fff; text-decoration: none; }
.mr-btn-del { background: #c62828; color: #fff; }
.mr-title-input { padding: 6px 10px; background: #fff; color: #000; border: 1px solid #ccc; border-radius: 6px; font-size: 13px; width: 220px; outline: none; }
.mr-title-input:focus { border-color: #888; }
.mr-title-input::placeholder { color: #999; }
.mr-status-recording { color: #c62828; font-size: 13px; margin-top: 8px; font-weight: 600; }
.mr-status-published { color: #2e7d32; font-size: 13px; margin-top: 8px; display: flex; align-items: center; font-weight: 600; }
/* 영상 미리보기 모달 - 모달은 어두운 오버레이 유지 */
.mr-modal { position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 9000; display: flex; align-items: center; justify-content: center; }
.mr-modal-inner { background: #111; border-radius: 10px; padding: 16px; max-width: 900px; width: 95%; position: relative; }
.mr-modal-close { position: absolute; top: 10px; right: 14px; background: none; border: none; color: #aaa; font-size: 26px; cursor: pointer; line-height: 1; }
.mr-modal-close:hover { color: #fff; }
.mr-modal-title { font-size: 14px; font-weight: 600; color: #eee; margin-bottom: 10px; padding-right: 30px; }
.mr-modal-video { width: 100%; border-radius: 7px; background: #000; max-height: 70vh; display: block; }
/* ══════════════════════════════════════════
계정 전환 (/account/switch) - accountSwitch.js
══════════════════════════════════════════ */
.sw-wrap { max-width: 480px; margin: 40px auto; padding: 0 20px 60px; color: #000; position: relative; min-height: calc(100vh - 60px); }
.sw-title { font-size: 22px; font-weight: 700; margin-bottom: 24px; color: #000; }
.sw-section-label { font-size: 11px; font-weight: 700; color: #555; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
/* 카드 공통 */
.sw-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 10px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; margin-bottom: 8px; transition: background .15s, border-color .15s; color: #000; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.sw-card-current { border-color: #1976d2; border-width: 2px; }
.sw-card-other { cursor: pointer; }
.sw-card-other:hover { background: #f5f5f5; border-color: #bbb; }
.sw-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #eee; flex-shrink: 0; }
.sw-info { flex: 1; min-width: 0; }
.sw-username { font-size: 15px; font-weight: 600; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-admin-badge { display: inline-block; background: #b71c1c; color: #fff; font-size: 10px; font-weight: 700; border-radius: 4px; padding: 1px 6px; margin-top: 3px; }
.sw-current-mark { font-size: 12px; color: #1976d2; font-weight: 600; white-space: nowrap; }
.sw-switch-arrow { font-size: 18px; color: #888; }
/* 탭 바 */
.sw-tab-bar { display: flex; border-bottom: 2px solid #e0e0e0; margin-bottom: 0; }
.sw-tab { flex: 1; padding: 10px 0; border: none; background: none; font-size: 14px; font-weight: 600; color: #888; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color .15s, border-color .15s; }
.sw-tab.active { color: #1565c0; border-bottom-color: #1565c0; }
.sw-tab:hover:not(.active) { color: #333; }
/* 탭 패널 */
.sw-tab-pane { background: #f9f9f9; border: 1px solid #e0e0e0; border-top: none; border-radius: 0 0 10px 10px; padding: 20px 16px 16px; }
/* 폼 요소 */
.sw-input { width: 100%; box-sizing: border-box; padding: 9px 12px; background: #fff; color: #000; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; outline: none; margin-bottom: 10px; display: block; }
.sw-input:focus { border-color: #1565c0; }
.sw-input::placeholder { color: #999; }
.sw-form-msg { padding: 9px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 12px; }
.sw-reg-hint { font-size: 12px; color: #666; margin: 8px 0 0; }
/* 버튼 */
.sw-btn { padding: 9px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; transition: opacity .15s; text-decoration: none; display: inline-block; color: #fff; }
.sw-btn:hover { opacity: .84; }
.sw-btn-login { width: 100%; background: #1565c0; color: #fff; padding: 10px; font-size: 14px; }
.sw-btn-cancel { background: #e0e0e0; color: #333; }
.sw-remember-label { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #555; margin-bottom: 12px; cursor: pointer; user-select: none; }
.sw-remember-label input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; }
/* 전환 중 오버레이 */
.sw-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 9000; display: flex; align-items: center; justify-content: center; }
.sw-overlay-inner { background: #fff; border-radius: 12px; padding: 32px 44px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
.sw-overlay-spinner { width: 36px; height: 36px; border: 3px solid #e0e0e0; border-top-color: #1565c0; border-radius: 50%; animation: swSpin .7s linear infinite; margin: 0 auto 14px; }
@keyframes swSpin { to { transform: rotate(360deg); } }
.sw-overlay-msg { font-size: 15px; color: #333; font-weight: 500; }
/* ══════════════════════════════════════════
최신 영상 (/new) + 구독 (/subscriptions)
══════════════════════════════════════════ */
.nv-wrap { max-width: 1100px; margin: 0 auto; padding: 24px 20px 60px; color: #000; }
.nv-title { font-size: 22px; font-weight: 700; margin: 0 0 20px; color: #000; }
.nv-subtitle { font-size: 16px; font-weight: 700; margin: 0 20px 14px; color: #000; }
.nv-empty { text-align: center; color: #555; padding: 60px 20px; font-size: 14px; }
.nv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; padding: 0 0 20px; }
.nv-card { color: #000; }
.nv-thumb-wrap { display: block; position: relative; width: 100%; aspect-ratio: 16/9; background: #111; border-radius: 7px; overflow: hidden; }
.nv-thumb { width: 100%; height: 100%; object-fit: contain; background: #111; display: block; transition: opacity .15s; }
.nv-thumb:hover { opacity: .85; }
.nv-info { padding: 6px 0 0; }
.nv-video-title { font-size: 13px; font-weight: bold; color: #000; margin-bottom: 4px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nv-video-title a { color: #000; font-weight: bold; text-decoration: none; }
.nv-video-title a:hover { text-decoration: underline; }
.nv-channel { font-size: 12px; font-weight: bold; color: #000; margin-bottom: 2px; }
.nv-meta { font-size: 11px; color: #333; font-weight: 500; }
.nv-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 20px 0; }
.nv-page-btn { padding: 7px 18px; background: #000; color: #fff; border-radius: 6px; font-size: 13px; font-weight: 600; text-decoration: none; }
.nv-page-btn:hover { background: #333; }
.nv-page-info { font-size: 13px; color: #444; font-weight: 500; }
/* 구독 채널 목록 가로 스크롤 */
.sub-channel-list { display: flex; gap: 16px; overflow-x: auto; padding: 0 0 12px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.sub-channel-list::-webkit-scrollbar { height: 4px; }
.sub-channel-list::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }
.sub-channel-item { display: flex; flex-direction: column; align-items: center; gap: 5px; text-decoration: none; flex-shrink: 0; width: 70px; color: #000; }
.sub-channel-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid #e0e0e0; }
.sub-channel-name { font-size: 11px; font-weight: bold; color: #000; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.sub-check { width: 12px; height: 12px; }
/* ══════════════════════════════════════════
계정 관리 (/account)
══════════════════════════════════════════ */
.ac-wrap { max-width: 560px; margin: 0 auto; padding: 28px 20px 60px; color: #000; }
.ac-title { font-size: 22px; font-weight: 700; margin: 0 0 24px; color: #000; }
.ac-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 10px; padding: 20px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.07); }
.ac-card-title { font-size: 15px; font-weight: 700; color: #000; margin-bottom: 14px; }
.ac-info-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 14px; }
.ac-label { font-size: 13px; font-weight: 600; color: #555; min-width: 80px; }
.ac-value { font-size: 14px; color: #000; font-weight: 500; }
.ac-field { margin-bottom: 12px; }
.ac-field .ac-label { display: block; margin-bottom: 5px; }
.ac-input { width: 100%; box-sizing: border-box; padding: 9px 12px; background: #fff; color: #000; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; outline: none; }
.ac-input:focus { border-color: #888; }
.ac-msg { padding: 10px 14px; border-radius: 6px; font-size: 13px; margin-bottom: 14px; }
.ac-desc { font-size: 13px; color: #555; margin: 0 0 14px; }
.ac-btn { display: inline-block; padding: 8px 18px; border: none; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; transition: opacity .15s; }
.ac-btn:hover { opacity: .85; }
.ac-btn-primary { background: #1565c0; color: #fff; }
.ac-btn-secondary { background: #e0e0e0; color: #333; }
.ac-btn-danger { background: #c62828; color: #fff; }
/* ── 계정 관리 추가 스타일 ── */
.ac-verify-banner {
background: #e3f2fd; border: 1px solid #90caf9; border-radius: 7px;
padding: 11px 14px; font-size: 13px; color: #1565c0; margin-bottom: 14px; line-height: 1.6;
}
.ac-hint { font-size: 12px; color: #666; margin: 8px 0 0; }
/* ══════════════════════════════════════════
컷편집 (/edit-recording)
══════════════════════════════════════════ */
.er-wrap { background:#0f0f0f; color:#e0e0e0; min-height:calc(100vh - 60px); padding:20px; }
.er-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
.er-title { font-size:18px; font-weight:700; color:#fff; margin:0; }
.er-back-btn { font-size:13px; color:#888; text-decoration:none; padding:5px 12px; border:1px solid #333; border-radius:5px; }
.er-back-btn:hover { color:#eee; border-color:#555; }
.er-layout { display:flex; gap:20px; align-items:flex-start; max-width:1100px; }
.er-left { flex:1; min-width:0; }
.er-right { width:290px; flex-shrink:0; }
/* 플레이어 */
.er-video-wrap { background:#000; border-radius:8px; overflow:hidden; position:relative; }
.er-video-wrap video { width:100%; display:block; max-height:420px; }
#erSubOverlay { position:absolute; bottom:10%; left:50%; transform:translateX(-50%); pointer-events:none; text-align:center; z-index:10; width:90%; display:none; }
#erSubText { display:inline-block; background:rgba(0,0,0,.75); color:#fff; font-size:16px; line-height:1.5; padding:4px 14px; border-radius:4px; white-space:pre-line; text-shadow:0 1px 3px #000; }
.er-preview-badge { display:none; position:absolute; top:8px; left:8px; background:#e53935; color:#fff; font-size:11px; font-weight:700; padding:3px 8px; border-radius:4px; }
/* 타임라인 */
.er-timeline-wrap { margin-top:14px; background:#1a1a1a; border-radius:8px; padding:14px; }
.er-tl-label { font-size:12px; color:#888; margin-bottom:8px; display:flex; justify-content:space-between; }
.er-tl-hint { font-size:11px; color:#555; }
.er-tl-bar { position:relative; height:48px; background:#111; border-radius:6px; cursor:crosshair; user-select:none; overflow:hidden; }
.er-tl-progress { position:absolute; top:0; left:0; height:100%; background:rgba(25,118,210,.25); pointer-events:none; }
.er-tl-playhead { position:absolute; top:0; width:2px; height:100%; background:#1976d2; pointer-events:none; }
.er-tl-seg { position:absolute; top:0; height:100%; pointer-events:none; }
.er-tl-keep { background:rgba(46,125,50,.3); border-left:2px solid #43a047; border-right:2px solid #43a047; }
.er-tl-cut { background:rgba(229,57,53,.35); border-left:2px solid #e53935; border-right:2px solid #e53935; }
.er-tl-marker { position:absolute; top:0; width:3px; height:100%; cursor:ew-resize; z-index:5; }
.er-tl-marker-in { background:#43a047; }
.er-tl-marker-out { background:#fb8c00; }
/* 컨트롤 */
.er-controls { display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
.er-ctrl-btn { background:#2a2a2a; border:1px solid #333; color:#eee; padding:5px 10px; border-radius:5px; cursor:pointer; font-size:12px; }
.er-ctrl-btn:hover { background:#333; }
.er-time-display { font-size:13px; color:#aaa; min-width:120px; }
.er-speed-select { background:#2a2a2a; border:1px solid #333; color:#eee; padding:4px 8px; border-radius:5px; font-size:12px; }
/* 패널 */
.er-panel { background:#1a1a1a; border-radius:8px; padding:14px; margin-bottom:12px; }
.er-panel-title { font-size:11px; font-weight:700; color:#888; text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px; }
.er-empty-hint { color:#555; font-size:12px; }
.er-inout-row { display:flex; gap:8px; margin-bottom:8px; }
.er-inout-display { font-size:12px; color:#888; text-align:center; margin-bottom:10px; }
/* 구간 목록 */
.er-seg-item { display:flex; align-items:center; gap:6px; background:#111; border-radius:5px; padding:7px 10px; margin-bottom:6px; font-size:12px; }
.er-seg-badge { font-size:10px; font-weight:700; padding:2px 5px; border-radius:3px; flex-shrink:0; }
.er-seg-keep { background:#1b5e20; color:#a5d6a7; }
.er-seg-cut { background:#b71c1c; color:#ef9a9a; }
.er-seg-time { flex:1; color:#ccc; }
.er-seg-dur { font-size:11px; color:#555; }
.er-seg-del { background:none; border:none; color:#555; cursor:pointer; font-size:15px; }
.er-seg-del:hover { color:#e53935; }
/* 액션 버튼 */
.er-action-btn { width:100%; padding:9px; border:none; border-radius:6px; font-size:13px; font-weight:700; cursor:pointer; margin-bottom:6px; transition:opacity .15s; }
.er-action-btn:hover { opacity:.85; }
.er-btn-keep { background:#1b5e20; color:#a5d6a7; }
.er-btn-cut { background:#b71c1c; color:#ef9a9a; }
.er-btn-preview { background:#1565c0; color:#fff; }
.er-btn-export { background:#e65100; color:#fff; }
.er-btn-restore { background:#4a148c; color:#ce93d8; }
.er-autosave-btn { width:100%; padding:7px; border:1px solid #333; border-radius:5px; background:#1a1a1a; color:#888; font-size:12px; cursor:pointer; margin-bottom:6px; }
.er-autosave-btn:hover { background:#222; color:#ccc; }
.er-autosave-saved { border-color:#43a047 !important; color:#43a047 !important; }
.er-export-warn { font-size:11px; color:#ef9a9a; margin-top:6px; background:#2a1010; padding:7px; border-radius:5px; }
/* 자막 */
.er-sub-list { max-height:240px; overflow-y:auto; margin-bottom:6px; }
.er-sub-item { background:#111; border-radius:6px; padding:8px 10px; margin-bottom:7px; font-size:12px; }
.er-sub-item.er-sub-dragging { opacity:.4; }
.er-sub-head { display:flex; align-items:center; gap:5px; margin-bottom:5px; }
.er-sub-handle { color:#444; cursor:grab; font-size:13px; padding:0 3px; user-select:none; }
.er-sub-handle:active { cursor:grabbing; }
.er-sub-times { display:flex; align-items:center; gap:4px; flex:1; }
.er-sub-time-input { width:68px; background:#1e1e1e; border:1px solid #333; color:#ccc; padding:2px 5px; border-radius:3px; font-size:11px; text-align:center; }
.er-sub-time-input:focus { outline:none; border-color:#1976d2; color:#fff; }
.er-sub-sep { color:#555; font-size:11px; }
.er-sub-dur { font-size:10px; color:#555; background:#1a1a1a; padding:1px 5px; border-radius:3px; white-space:nowrap; }
.er-sub-del { background:none; border:none; color:#555; cursor:pointer; font-size:14px; margin-left:auto; }
.er-sub-del:hover { color:#e53935; }
.er-sub-text { width:100%; background:#1e1e1e; border:1px solid #333; color:#eee; padding:4px 7px; border-radius:4px; font-size:12px; resize:vertical; min-height:34px; font-family:inherit; }
.er-sub-text:focus { outline:none; border-color:#1976d2; }
.er-sub-add-btn { width:100%; padding:6px; background:#1565c0; border:none; color:#fff; border-radius:5px; cursor:pointer; font-size:12px; margin-bottom:4px; }
.er-sub-add-btn:hover { background:#1976d2; }
.er-sub-hint { font-size:11px; color:#555; text-align:center; }
/* 모달 */
.er-modal { position:fixed; inset:0; background:rgba(0,0,0,.8); z-index:9999; display:flex; align-items:center; justify-content:center; }
.er-modal-box { background:#1a1a1a; border-radius:10px; padding:28px 32px; min-width:320px; text-align:center; border:1px solid #2a2a2a; }
.er-modal-title { font-size:16px; font-weight:700; color:#eee; margin-bottom:14px; }
.er-progress-wrap { background:#111; border-radius:4px; height:8px; overflow:hidden; margin-bottom:8px; }
.er-progress-bar { height:100%; background:#1976d2; transition:width .3s; width:0%; }
.er-modal-pct { font-size:12px; color:#888; margin-bottom:6px; }
.er-modal-status { font-size:13px; color:#666; margin-bottom:16px; }
.er-modal-btn { padding:7px 18px; border:none; border-radius:6px; cursor:pointer; font-size:13px; font-weight:600; text-decoration:none; display:inline-block; }
.er-modal-btn-blue { background:#1565c0; color:#fff; }
.er-modal-btn-gray { background:#333; color:#ccc; }
/* 토스트 */
#erToast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#1e1e1e; border:1px solid #333; color:#aaa; font-size:12px; padding:7px 18px; border-radius:20px; opacity:0; transition:opacity .3s; pointer-events:none; z-index:9998; }
.er-toast-show { opacity:1 !important; }
/* 반응형 */
@media (max-width:768px) {
.er-layout { flex-direction:column; }
.er-right { width:100%; }
}
/* ══════════════════════════════════════════
라이브 설정 (/live-edit)
══════════════════════════════════════════ */
.le-wrap { min-height:calc(100vh - 60px); background:#0a0a0a; padding:40px 16px; display:flex; align-items:flex-start; justify-content:center; }
.le-card { background:#111; border:1px solid #222; border-radius:12px; padding:36px 32px; width:100%; max-width:540px; }
.le-header { margin-bottom:28px; }
.le-label { font-size:11px; font-weight:700; letter-spacing:2px; color:#e53935; text-transform:uppercase; margin-bottom:8px; }
.le-title { font-size:20px; font-weight:700; color:#e0e0e0; margin:0 0 4px; }
.le-sub { font-size:13px; color:#555; }
.le-admin-badge { display:inline-flex; align-items:center; gap:5px; background:rgba(229,57,53,.12); border:1px solid rgba(229,57,53,.3); color:#e53935; font-size:11px; font-weight:700; padding:3px 10px; border-radius:4px; margin-top:8px; }
.le-section-title { font-size:11px; font-weight:700; letter-spacing:2px; color:#444; text-transform:uppercase; margin-bottom:16px; }
.le-divider { border:none; border-top:1px solid #1e1e1e; margin:24px 0; }
.le-alert { padding:11px 14px; border-radius:6px; font-size:13px; margin-bottom:18px; }
.le-field { margin-bottom:16px; }
.le-label-sm { display:block; font-size:12px; font-weight:700; letter-spacing:.5px; color:#666; text-transform:uppercase; margin-bottom:7px; }
.le-input { width:100%; box-sizing:border-box; background:#1a1a1a; border:1px solid #2a2a2a; border-radius:7px; color:#e0e0e0; font-size:14px; padding:10px 13px; outline:none; transition:border-color .2s; }
.le-input:focus { border-color:#444; }
.le-input::placeholder { color:#333; }
.le-input-copy { background:#141414; color:#aaa; cursor:default; font-family:'Courier New',monospace; font-size:13px; }
.le-textarea { width:100%; box-sizing:border-box; background:#1a1a1a; border:1px solid #2a2a2a; border-radius:7px; color:#e0e0e0; font-size:14px; padding:10px 13px; outline:none; resize:vertical; min-height:110px; font-family:inherit; line-height:1.6; transition:border-color .2s; }
.le-textarea:focus { border-color:#444; }
.le-char-count { text-align:right; font-size:11px; color:#555; margin-top:4px; }
.le-char-warn { color:#f9a825; }
.le-char-over { color:#e53935; }
.le-copy-field { display:flex; gap:7px; align-items:center; }
.le-icon-btn { background:#1a1a1a; border:1px solid #2a2a2a; border-radius:6px; color:#666; cursor:pointer; padding:8px 9px; display:flex; align-items:center; justify-content:center; transition:border-color .2s,color .2s; flex-shrink:0; }
.le-icon-btn:hover { border-color:#444; color:#ccc; }
.le-icon-btn-copied { border-color:rgba(67,160,71,.5) !important; color:#66bb6a !important; }
.le-btn-row { display:flex; gap:10px; margin-top:8px; }
.le-btn { flex:1; padding:10px; border:none; border-radius:7px; font-size:14px; font-weight:700; cursor:pointer; text-align:center; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; transition:opacity .15s; }
.le-btn:hover { opacity:.85; }
.le-btn-primary { background:#e53935; color:#fff; }
.le-btn-primary:disabled { background:#444; cursor:not-allowed; opacity:1; }
.le-btn-ghost { background:#1a1a1a; color:#888; border:1px solid #2a2a2a; }
.le-btn-sm { flex:none; padding:7px 14px; font-size:12px; }
.le-key-warn { font-size:12px; color:#555; margin-top:7px; }
.le-no-key { font-size:13px; color:#444; padding:10px 13px; background:#141414; border:1px solid #222; border-radius:7px; }
/* ══════════════════════════════════════════
업로드 2단계 (/upload-details)
══════════════════════════════════════════ */
.ud-wrap { max-width: 1060px; margin: 0 auto; padding: 28px 20px 60px; }
.ud-title { font-size: 20px; font-weight: 700; color: #000; margin-bottom: 22px; }
.ud-layout { display: flex; gap: 28px; align-items: flex-start; }
.ud-left { width: 380px; flex-shrink: 0; }
.ud-right { flex: 1; min-width: 0; }
/* 영상 정보 박스 */
.ud-video-wrap { border-radius: 10px; overflow: hidden; background: #000; margin-bottom: 12px; }
.ud-meta-box { background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 8px; padding: 12px 14px; }
.ud-meta-row { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 4px 0; }
.ud-meta-label { color: #666; font-weight: 600; min-width: 72px; }
.ud-meta-val { color: #000; }
/* 폼 */
.ud-msg { padding: 10px 14px; border-radius: 6px; font-size: 13px; margin-bottom: 16px; }
.ud-field { margin-bottom: 18px; }
.ud-label { display: block; font-size: 13px; font-weight: 600; color: #333; margin-bottom: 7px; }
.ud-required { color: #e53935; }
.ud-input { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; color: #000; background: #fff; outline: none; }
.ud-input:focus { border-color: #1565c0; }
.ud-textarea { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; color: #000; background: #fff; outline: none; resize: vertical; min-height: 130px; font-family: inherit; line-height: 1.6; }
.ud-textarea:focus { border-color: #1565c0; }
.ud-select { width: 100%; padding: 9px 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; color: #000; background: #fff; outline: none; }
.ud-file-input { display: block; font-size: 13px; color: #555; }
.ud-hint { font-size: 12px; color: #888; margin-top: 4px; }
/* 썸네일 선택 */
.ud-thumbs-wrap { display: flex; flex-wrap: wrap; gap: 10px; }
.ud-thumb-label { cursor: pointer; }
.ud-thumb-label input[type="radio"] { display: none; }
.ud-thumb-img { width: 152px; height: 86px; object-fit: cover; border-radius: 5px; border: 2px solid transparent; transition: border-color .15s; }
.ud-thumb-label input[type="radio"]:checked + .ud-thumb-img { border-color: #1565c0; }
.ud-thumb-img:hover { border-color: #888; }
/* 버튼 */
.ud-btn-row { display: flex; gap: 10px; margin-top: 8px; }
.ud-btn { flex: 1; padding: 11px; border: none; border-radius: 7px; font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity .15s; }
.ud-btn:hover { opacity: .85; }
.ud-btn:disabled { opacity: .5; cursor: not-allowed; }
.ud-btn-submit { background: #1565c0; color: #fff; }
.ud-btn-cancel { background: #e0e0e0; color: #333; }
/* 반응형 */
@media (max-width: 768px) {
.ud-layout { flex-direction: column; }
.ud-left { width: 100%; }
}
/* ══════════════════════════════════════════
영상 수정 (/edit-video)
══════════════════════════════════════════ */
.ev-wrap { max-width: 680px; margin: 40px auto; padding: 0 20px 60px; }
.ev-title { font-size: 20px; font-weight: 700; color: #000; margin-bottom: 24px; }
.ev-msg { padding: 10px 14px; border-radius: 6px; font-size: 13px; margin-bottom: 18px; }
.ev-field { margin-bottom: 20px; }
.ev-label { display: block; font-size: 13px; font-weight: 600; color: #333; margin-bottom: 7px; }
.ev-required { color: #e53935; }
.ev-hint { font-size: 12px; color: #888; margin: 4px 0; }
.ev-input { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; color: #000; background: #fff; outline: none; }
.ev-input:focus { border-color: #1565c0; }
.ev-textarea { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; color: #000; background: #fff; outline: none; resize: vertical; min-height: 160px; font-family: inherit; line-height: 1.6; }
.ev-textarea:focus { border-color: #1565c0; }
.ev-select { width: 100%; padding: 9px 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; color: #000; background: #fff; outline: none; }
.ev-file-input { display: block; font-size: 13px; color: #555; }
.ev-current-thumb { max-width: 200px; border-radius: 6px; border: 1px solid #ddd; display: block; }
.ev-thumbs-wrap { display: flex; flex-wrap: wrap; gap: 10px; }
.ev-thumb-label { cursor: pointer; }
.ev-thumb-label input[type="radio"] { display: none; }
.ev-thumb-img { width: 152px; height: 86px; object-fit: cover; border-radius: 5px; border: 2px solid transparent; transition: border-color .15s; display: block; }
.ev-thumb-label input[type="radio"]:checked + .ev-thumb-img { border-color: #1565c0; }
.ev-thumb-img:hover { border-color: #888; }
.ev-btn-row { display: flex; gap: 10px; margin-top: 8px; align-items: center; }
.ev-btn { flex: 1; padding: 11px; border: none; border-radius: 7px; font-size: 14px; font-weight: 700; cursor: pointer; text-align: center; text-decoration: none; display: inline-block; transition: opacity .15s; }
.ev-btn:hover { opacity: .85; }
.ev-btn:disabled { opacity: .5; cursor: not-allowed; }
.ev-btn-submit { background: #1565c0; color: #fff; }
.ev-btn-cancel { background: #e0e0e0; color: #333; }
/* studio 수정 버튼 */
.studio-action-btn.edit { background: #1565c0; }
/* ══════════════════════════════════════════
신고하기 (/report)
══════════════════════════════════════════ */
.rp-wrap { max-width: 640px; margin: 40px auto; padding: 0 20px 60px; }
.rp-page-title { font-size: 22px; font-weight: 700; color: #000; margin-bottom: 28px; }
.rp-section { background: #fff; border: 1px solid #e0e0e0; border-radius: 10px; padding: 24px; margin-bottom: 20px; }
.rp-section-title { font-size: 16px; font-weight: 700; color: #000; margin: 0 0 18px; }
.rp-msg { padding: 10px 14px; border-radius: 6px; font-size: 13px; margin-bottom: 14px; }
.rp-field { margin-bottom: 16px; }
.rp-label { display: block; font-size: 13px; font-weight: 600; color: #333; margin-bottom: 6px; }
.rp-optional { font-size: 12px; color: #888; font-weight: 400; }
.rp-input { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; color: #000; background: #fff; outline: none; }
.rp-input:focus { border-color: #1565c0; }
.rp-textarea { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; color: #000; background: #fff; outline: none; resize: vertical; font-family: inherit; line-height: 1.6; }
.rp-textarea:focus { border-color: #1565c0; }
.rp-file-input { display: block; font-size: 13px; color: #555; }
.rp-btn { padding: 10px 28px; background: #e53935; color: #fff; border: none; border-radius: 6px; font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity .15s; }
.rp-btn:hover { opacity: .85; }
.rp-btn:disabled { opacity: .5; cursor: not-allowed; }
/* ── 회원 탈퇴 카드 ── */
.ac-card-withdraw { border-color: #ffcdd2; }
.ac-card-withdraw .ac-card-title { color: #c62828; }
.ac-desc-warn { font-size: 13px; color: #666; margin-bottom: 14px; }
.ac-desc-warn strong { color: #c62828; }
.ac-btn-withdraw { background: #c62828; color: #fff; border: none; border-radius: 6px; padding: 9px 20px; font-size: 13px; font-weight: 700; cursor: pointer; transition: opacity .15s; }
.ac-btn-withdraw:hover { opacity: .85; }
.ac-btn-withdraw:disabled { opacity: .5; cursor: not-allowed; }
/* ── 영상 썸네일 재생시간 배지 ── */
.thumb-duration {
position: absolute;
bottom: 5px; right: 6px;
background: rgba(0,0,0,0.78);
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 1;
padding: 2px 5px;
border-radius: 3px;
pointer-events: none;
letter-spacing: 0.3px;
font-variant-numeric: tabular-nums;
}
/* ═══════════════════════════════
커뮤니티 게시글 상세 (post_view.php)
═══════════════════════════════ */
.cp-wrap { max-width: 800px; margin: 20px auto; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.cp-back { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: #f0f0f0; border-radius: 4px; text-decoration: none; color: #333; font-size: 13px; margin-bottom: 16px; transition: background .15s; }
.cp-back:hover { background: #e0e0e0; }
.cp-content { font-size: 15px; line-height: 1.7; margin: 16px 0; white-space: pre-wrap; word-wrap: break-word; }
.cp-images { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.cp-img { max-width: 100%; height: auto; border-radius: 4px; cursor: pointer; }
.cp-date { font-size: 12px; color: #999; margin-bottom: 16px; }
.cp-author { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; margin-bottom: 14px; }
.cp-author-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.cp-author-info { flex: 1; }
.cp-author-name { font-weight: bold; font-size: 15px; display: flex; align-items: center; gap: 5px; }
.cp-author-name a { color: #000; text-decoration: none; }
.cp-author-subs { font-size: 12px; color: #666; margin-top: 2px; }
.cp-sub-btn { padding: 7px 18px; background: #ff0000; color: white; border: none; border-radius: 20px; cursor: pointer; font-weight: bold; font-size: 13px; }
.cp-sub-btn.subscribed { background: #606060; }
.cp-actions { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid #eee; margin-bottom: 20px; }
.cp-action-btn { display: flex; align-items: center; gap: 6px; padding: 7px 14px; background: #f0f0f0; border: none; border-radius: 20px; cursor: pointer; font-size: 13px; transition: background .15s; }
.cp-action-btn:hover { background: #e0e0e0; }
.cp-action-btn.active { background: #d0e0ff; }
.cp-comments { margin-top: 8px; }
.cp-comments-hd { font-size: 17px; font-weight: bold; margin-bottom: 16px; }
.cp-comment-form { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 24px; }
.cp-comment-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cp-comment { display: flex; gap: 10px; margin-bottom: 18px; }
.cp-comment-body { flex: 1; }
.cp-comment-author { font-weight: bold; font-size: 13px; margin-bottom: 3px; }
.cp-comment-text { font-size: 13px; line-height: 1.5; margin-bottom: 3px; white-space: pre-wrap; word-wrap: break-word; }
.cp-comment-time { font-size: 11px; color: #999; }
.cp-comment-actions { display: flex; gap: 8px; margin-top: 5px; }
.cp-comment-actions button { background: none; border: none; color: #065fd4; cursor: pointer; font-size: 12px; padding: 2px 6px; }
.cp-comment-actions button:hover { text-decoration: underline; }
/* 커뮤니티 탭 게시글 링크 */
.ch-post-link { display: block; text-decoration: none; color: inherit; }
.ch-post-link:hover { opacity: .9; }
/* ── 영상 플레이어 컨텍스트 메뉴 차단 ── */
/* 우클릭/길게 터치 시 다운로드·링크복사 메뉴 방지 */
video {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
pointer-events: auto;
}
.custom-video-container,
.custom-video-container video,
#mwPlayerContainer,
#mwPlayerContainer video,
.video-player-wrap,
.video-player-wrap video {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}