/* room-list.html, quiz-detail.html 공용 방 만들기 모달 스타일 */

/* 방 만들기 모달 폼 */
.create-room-form .form-group { margin-bottom: 1rem; }
.mode-options { display: flex; gap: 0.5rem; }
.mode-option { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius); text-align: center; cursor: pointer; transition: var(--transition); font-size: 0.9rem; display: flex; align-items: center; justify-content: center; gap: 0.4rem; }
.mode-option:hover { border-color: var(--primary-color); }
.mode-option.active { background: var(--primary-color); color: white; border-color: var(--primary-color); }
.mode-option-icon { font-size: 1.1rem; display: inline; }
.quiz-mode-tab { padding: 0.3rem 0.6rem; font-size: 0.8rem; font-weight: 600; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-secondary); cursor: pointer; transition: var(--transition); white-space: nowrap; border-radius: 6px; }
.quiz-mode-tab.active { background: var(--primary-color); color: white; border-color: var(--primary-color); }

/* 공개/비공개 선택 */
.room-access-options { display: flex; gap: 0.5rem; }
.radio-label { display: flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.8rem; border: 1px solid var(--border-color); border-radius: 50px; cursor: pointer; font-size: 0.85rem; transition: var(--transition); }
.radio-label:has(input:checked) { border-color: var(--primary-color); background: rgba(99,102,241,0.08); color: var(--primary-color); font-weight: 600; }
.radio-label input { display: none; }

/* 퀴즈 선택 영역 */
.quiz-select-area { border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 1rem; min-height: 60px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); }
.quiz-select-area:hover { border-color: var(--primary-color); background: var(--bg-color); }
.quiz-select-area.selected { border-color: var(--primary-color); background: var(--bg-color); }
.quiz-selected-info { display: flex; align-items: center; gap: 0.75rem; width: 100%; }
.quiz-selected-info img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; }
.quiz-selected-name { font-weight: 600; }
.quiz-selected-meta { font-size: 0.8rem; color: var(--text-secondary); }

/* 퀴즈 선택 모달 필터 */
.qs-filter-section { margin-bottom: 1rem; }
.qs-genre-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.qs-genre-chips .chip { padding: 4px 12px; font-size: 0.8rem; border: 1px solid var(--border-color); border-radius: 50px; background: var(--card-bg); cursor: pointer; transition: var(--transition); }
.qs-genre-chips .chip:hover { border-color: var(--primary-color); }
.qs-genre-chips .chip.chip-active { background: var(--primary-color); color: white; border-color: var(--primary-color); }
.qs-filter-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.75rem; }
.qs-filter-row select { padding: 0.4rem 0.6rem; border: 1px solid var(--border-color); border-radius: var(--border-radius); font-size: 0.85rem; }
.qs-filter-row input[type="text"] { flex: 1; min-width: 120px; padding: 0.4rem 0.6rem; border: 1px solid var(--border-color); border-radius: var(--border-radius); font-size: 0.85rem; }
.qs-options-filter { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 0.75rem; }
.qs-options-filter .checkbox-label { font-size: 0.8rem; display: flex; align-items: center; gap: 0.3rem; cursor: pointer; }

/* 퀴즈 목록 */
.quiz-pick-list { max-height: 350px; overflow-y: auto; }
.quiz-pick-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: var(--border-radius); cursor: pointer; transition: var(--transition); border: 1px solid transparent; }
.quiz-pick-item:hover { background: var(--bg-color); border-color: var(--border-color); }
.quiz-pick-item img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.quiz-pick-info { flex: 1; min-width: 0; }
.quiz-pick-title { font-weight: 600; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quiz-pick-desc { font-size: 0.78rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quiz-pick-meta { font-size: 0.8rem; color: var(--text-secondary); }

/* 닉네임 입력 모달 */
.nickname-modal-body { text-align: center; padding: 1rem 0; }
.nickname-modal-body input { width: 100%; max-width: 300px; padding: 0.75rem 1rem; border: 1px solid var(--border-color); border-radius: var(--border-radius); font-size: 1.1rem; text-align: center; margin: 1rem 0; }

/* 장르 선택 칩 */
.genre-select-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem; background: var(--bg-color); border-radius: var(--border-radius); min-height: 40px; }
.genre-select-chips .chip { padding: 0.4rem 0.9rem; border: 2px solid var(--border-color); border-radius: 20px; cursor: pointer; font-weight: 600; font-size: 0.85rem; background: var(--card-bg); transition: all 0.2s; }
.genre-select-chips .chip:hover { border-color: var(--primary-color); }
.genre-select-chips .chip.chip-active { background: var(--primary-color); color: white; border-color: var(--primary-color); }

/* 모바일 */
@media (max-width: 480px) {
  .mode-options { flex-direction: column; }
}