/* 기본값을 화이트(Light)로 변경 */
:root {
  --bg-main: #ffffff; --bg-panel: #f9f9f9; --text-main: #333333; --text-sub: #888888;
  --border-color: #e5e5e5; --btn-bg: #f0f0f0; --btn-text: #333333; --hover-color: #e9e9e9; --point-color: #03c75a;
}
[data-theme="dark"] {
  --bg-main: #121212; --bg-panel: #1e1e1e; --text-main: #ffffff; --text-sub: #aaaaaa;
  --border-color: #333333; --btn-bg: #333333; --btn-text: #ffffff; --hover-color: #444444; --point-color: #03c75a;
}

body { background-color: var(--bg-main); color: var(--text-main); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; margin: 0; display: flex; height: 100vh; overflow: hidden; transition: background-color 0.3s; }

#loginScreen { margin: auto; text-align: center; padding: 40px; background-color: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 12px; width: 300px; }
input, button, select { padding: 12px; margin: 10px 0; width: 90%; box-sizing: border-box; background-color: var(--bg-main); color: var(--text-main); border: 1px solid var(--border-color); border-radius: 8px; outline: none; }
button { font-weight: bold; cursor: pointer; transition: 0.1s; }
button:hover { opacity: 0.8; }

#mainScreen { display: none; width: 100%; height: 100%; }
.sidebar { width: 220px; background-color: var(--bg-panel); padding: 20px; border-right: 1px solid var(--border-color); transition: margin-left 0.3s ease; display: flex; flex-direction: column; z-index: 100; }
.sidebar.collapsed { margin-left: -261px; }

.menu-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; margin-bottom: 10px; }
.menu-header h3 { margin: 0; cursor: pointer; flex: 1; }
.close-sidebar-btn { cursor: pointer; padding: 5px; opacity: 0.7; }
.menu-item { display: block; padding: 12px 0; color: var(--text-main); cursor: pointer; opacity: 0.7; font-weight: 500; }
.menu-item:hover { opacity: 1; font-weight: bold; }
.content { flex: 1; padding: 30px; overflow-y: auto; position: relative; }
.open-sidebar-btn { font-size: 24px; cursor: pointer; display: none; margin-bottom: 20px; width: 30px; }

.room-card { background-color: var(--bg-panel); padding: 24px; margin-bottom: 15px; border-radius: 12px; cursor: pointer; border: 1px solid var(--border-color); font-size: 1.1em; font-weight: bold; }
.room-card:hover { border-color: var(--text-main); }
.theme-toggle { margin-top: auto; cursor: pointer; font-size: 24px; padding-top: 20px; user-select: none; }

.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 1000; justify-content: center; align-items: center; }
.modal-content { background: var(--bg-panel); padding: 25px; border-radius: 12px; max-width: 800px; width: 95%; border: 1px solid var(--border-color); display: flex; flex-direction: column; max-height: 90vh; overflow-y: auto; }

.room-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 2px solid var(--border-color); padding-bottom: 15px; }
.upload-btn { width: auto; padding: 8px 16px; background: var(--btn-bg); color: var(--text-main); border: 1px solid var(--border-color); }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; }
.gallery-item { cursor: pointer; display: flex; flex-direction: column; }
.gallery-img-wrapper { width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color); background-color: var(--bg-panel); }
.gallery-img-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.gallery-info { padding: 10px 5px; }
.gallery-title { font-weight: bold; font-size: 1em; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gallery-meta { font-size: 0.8em; color: var(--text-sub); display: flex; gap: 8px; align-items: center; }
.writer-badge { color: var(--point-color); font-weight: bold; font-size: 1em; }

#postDetailScreen { display: none; background-color: var(--bg-main); max-width: 900px; margin: 0 auto; }
.detail-header-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; }
.detail-title { font-size: 1.6em; font-weight: bold; margin-bottom: 10px; }
.detail-profile-area { display: flex; align-items: center; gap: 10px; position: relative; }
.profile-img { width: 36px; height: 36px; border-radius: 50%; background-color: #ddd; display: inline-block; }

.dropdown-content { display: none; position: absolute; background-color: var(--bg-panel); min-width: 140px; box-shadow: 0px 4px 12px rgba(0,0,0,0.15); z-index: 10; border: 1px solid var(--border-color); border-radius: 4px; padding: 5px 0; font-size: 0.9em; }
.dropdown-content a { color: var(--text-main); padding: 10px 16px; text-decoration: none; display: block; cursor: pointer; }
.dropdown-content a:hover { background-color: var(--hover-color); }
.show { display: block; }
.kebab-btn { cursor: pointer; font-size: 1.5em; padding: 0 10px; user-select: none; color: var(--text-sub); }

.detail-image-container { text-align: center; margin: 40px 0 20px 0; }
.detail-image-container img { max-width: 100%; }

/* 에디터 스타일 추가 */
.editor-toolbar { display: flex; gap: 5px; padding: 10px; background: var(--bg-panel); border: 1px solid var(--border-color); border-bottom: none; border-radius: 8px 8px 0 0; }
.editor-toolbar button { width: auto; padding: 5px 12px; margin: 0; background: var(--bg-main); border: 1px solid var(--border-color); color: var(--text-main); font-size: 0.9em; }
.editor-toolbar button:hover { background: var(--hover-color); }
.editor-content { min-height: 250px; padding: 15px; border: 1px solid var(--border-color); border-radius: 0 0 8px 8px; background: var(--bg-main); outline: none; overflow-y: auto; text-align: left; line-height: 1.6; }

/* 아카라이브 스타일 투표 박스 */
.vote-box-container { display: flex; gap: 15px; justify-content: center; margin: 40px 0; }
.vote-box { border: 1px solid #cccccc; border-radius: 6px; width: 90px; padding: 15px 0; text-align: center; cursor: pointer; background: #ffffff; color: #333333; transition: transform 0.1s; user-select: none; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.vote-box:active { transform: scale(1.05); }
.vote-box .vote-title { font-size: 1em; margin-bottom: 5px; color: #555555; }
.vote-box .vote-count { font-size: 1em; font-weight: bold; }

/* 개념글 달성 효과 */
.vote-box.hot { border-color: #ffaa00; background: #fffdf5; box-shadow: 0 0 12px rgba(255, 170, 0, 0.3); }
.vote-box.hot .vote-title, .vote-box.hot .vote-count { color: #ff8800; font-weight: bold; }

[data-theme="dark"] .vote-box { background: #2a2a2a; border-color: #444; color: #eee; }
[data-theme="dark"] .vote-box .vote-title { color: #aaa; }
[data-theme="dark"] .vote-box.hot { background: #332b10; border-color: #ffaa00; }

@media (max-width: 600px) { .sidebar { position: absolute; height: 100%; } }