/* === 도쿄 어드벤처 스타일 === */
@import url('https://fonts.googleapis.com/css2?family=Pretendard:wght@400;600;700;800&display=swap');

:root {
  --bg: #faf8f5;
  --card-bg: #ffffff;
  --text: #2d2d2d;
  --text-sub: #777;
  --accent: #e74c3c;
  --accent2: #3498db;
  --tokyo-pink: #ff6b9d;
  --tokyo-blue: #4ecdc4;
  --tokyo-orange: #ff8a5c;
  --tokyo-purple: #a855f7;
  --border: #eee;
  --shadow: 0 2px 12px rgba(0,0,0,0.08);
  --radius: 16px;
}

[data-theme="dark"] {
  --bg: #1a1a2e;
  --card-bg: #16213e;
  --text: #e0e0e0;
  --text-sub: #999;
  --border: #2a2a4a;
  --shadow: 0 2px 12px rgba(0,0,0,0.3);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Pretendard', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  transition: background 0.3s, color 0.3s;
}

/* Header */
.header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--accent), var(--tokyo-orange));
  color: white;
  position: sticky;
  top: 0;
  z-index: 100;
}
.back-btn {
  color: white;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 600;
  margin-right: 12px;
  opacity: 0.9;
}
.back-btn:hover { opacity: 1; }
.header-text { flex: 1; }
.header-title { font-size: 1.3rem; font-weight: 800; }
.header-sub { font-size: 0.8rem; opacity: 0.9; margin-top: 2px; }
.dark-toggle {
  background: rgba(255,255,255,0.2);
  border: none;
  font-size: 1.2rem;
  padding: 8px;
  border-radius: 50%;
  cursor: pointer;
}

/* Container */
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px 16px;
}

/* Login Required */
.login-required { text-align: center; padding: 60px 20px; }
.login-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 40px 24px;
  box-shadow: var(--shadow);
}
.login-emoji { font-size: 4rem; margin-bottom: 16px; }
.login-text { font-size: 1.1rem; line-height: 1.6; margin-bottom: 24px; }
.login-home-btn {
  display: inline-block;
  background: var(--accent);
  color: white;
  padding: 12px 32px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
}

/* Progress */
.progress-section {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-sub);
  margin-bottom: 8px;
}
.progress-bar {
  background: var(--border);
  border-radius: 10px;
  height: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--tokyo-blue), var(--tokyo-pink));
  border-radius: 10px;
  transition: width 0.5s ease;
}
.progress-phases {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
}
.phase-dot {
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--border);
  color: var(--text-sub);
  font-weight: 600;
}
.phase-dot.active {
  background: var(--accent);
  color: white;
}
.phase-dot.done {
  background: var(--tokyo-blue);
  color: white;
}

/* Wildcard Status Bar */
.wildcard-status-bar {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--tokyo-purple);
}
.wildcard-status-title {
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--tokyo-purple);
}
.wildcard-status-members {
  display: flex;
  justify-content: space-around;
  gap: 8px;
}
.wildcard-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.wildcard-me {
  background: rgba(168,85,247,0.08);
  padding: 8px 12px;
  border-radius: 10px;
}
.wildcard-name { font-size: 0.85rem; font-weight: 700; }
.wildcard-count { font-size: 1.1rem; font-weight: 800; color: var(--tokyo-purple); }
.wildcard-detail { font-size: 0.7rem; color: var(--text-sub); }

/* Story Bubble */
.story-section { margin-bottom: 20px; }
.story-bubble {
  display: flex;
  gap: 12px;
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--tokyo-blue);
}
.story-avatar { font-size: 2rem; flex-shrink: 0; }
.story-text {
  font-size: 0.95rem;
  line-height: 1.7;
  white-space: pre-line;
}

/* Question Card */
.question-section { margin-bottom: 20px; }
.question-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}
.question-badge {
  display: inline-block;
  background: var(--accent);
  color: white;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.question-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.5;
}
.question-desc {
  font-size: 0.9rem;
  color: var(--text-sub);
  margin-bottom: 20px;
  line-height: 1.5;
}

/* Bot Comment */
.bot-comment {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(78,205,196,0.08);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border-left: 3px solid var(--tokyo-blue);
}
.bot-comment-avatar { font-size: 1.5rem; flex-shrink: 0; }
.bot-comment-text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-line;
}

/* Options */
.options-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.option-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--text);
}
.option-btn:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(231,76,60,0.15);
}
.option-btn:active { transform: translateY(0); }
.option-btn.selected {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(231,76,60,0.08), rgba(255,138,92,0.08));
}
.option-btn.voted {
  opacity: 0.7;
  cursor: not-allowed;
}
.option-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--accent);
  color: white;
  border-radius: 8px;
  font-weight: 800;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.option-emoji { font-size: 1.3rem; flex-shrink: 0; }
.option-text { flex: 1; line-height: 1.4; }
.option-voters {
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 600;
  background: rgba(231,76,60,0.08);
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

/* Wildcard Voters */
.wildcard-voters {
  padding: 10px 14px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--tokyo-purple);
  background: rgba(168,85,247,0.06);
  border-radius: 10px;
  margin-bottom: 8px;
}
.wildcard-voters:empty { display: none; }
.wildcard-voters-label { font-weight: 700; margin-bottom: 4px; }

/* Wildcard */
.wildcard-section { margin-bottom: 16px; }
.wildcard-toggle {
  width: 100%;
  padding: 12px;
  background: none;
  border: 2px dashed var(--tokyo-purple);
  border-radius: 12px;
  color: var(--tokyo-purple);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}
.wildcard-toggle:hover {
  background: rgba(168,85,247,0.05);
}
.wildcard-form {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.wildcard-input {
  flex: 1;
  padding: 12px;
  border: 2px solid var(--tokyo-purple);
  border-radius: 10px;
  font-size: 0.9rem;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
}
.wildcard-submit {
  padding: 12px 20px;
  background: var(--tokyo-purple);
  color: white;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

/* Vote Status */
.vote-status {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 12px;
  background: var(--bg);
  border-radius: 12px;
  margin-top: 16px;
}
.vote-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.vote-name { font-size: 0.8rem; font-weight: 600; }
.vote-check { font-size: 1.2rem; }

/* My Vote Done */
.my-vote-done {
  text-align: center;
  padding: 16px;
  background: rgba(78,205,196,0.1);
  border-radius: 12px;
  margin-top: 16px;
}
.my-vote-done p { margin-bottom: 8px; }
.vote-waiting { font-size: 0.85rem; color: var(--text-sub); }
.refresh-btn {
  margin-top: 8px;
  padding: 8px 20px;
  background: var(--tokyo-blue);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

/* Waiting Section */
.waiting-section { margin-bottom: 20px; }
.waiting-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 40px 24px;
  text-align: center;
  box-shadow: var(--shadow);
}
.waiting-anim {
  font-size: 3rem;
  margin-bottom: 16px;
  animation: think 2s ease-in-out infinite;
}
@keyframes think {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1) rotate(5deg); }
}
.waiting-text { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.waiting-sub { font-size: 0.85rem; color: var(--text-sub); margin-bottom: 16px; }

/* History */
.history-section { margin-top: 24px; }
.history-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 16px;
}
.history-list { display: flex; flex-direction: column; gap: 12px; }
.history-empty {
  text-align: center;
  color: var(--text-sub);
  padding: 20px;
  font-size: 0.9rem;
}
.history-item {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--tokyo-blue);
}
.history-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.history-item-badge {
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--tokyo-blue);
  color: white;
  padding: 2px 8px;
  border-radius: 8px;
}
.history-item-phase {
  font-size: 0.75rem;
  color: var(--text-sub);
}
.history-item-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.history-item-result {
  font-size: 0.9rem;
  color: var(--accent);
  font-weight: 700;
}
.history-item-votes {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--text-sub);
}
.history-vote-chip {
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 6px;
}

/* Schedule */
.schedule-section { margin-top: 24px; }
.schedule-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 16px;
}
.schedule-grid { display: flex; flex-direction: column; gap: 16px; }
.schedule-day {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.schedule-day-title {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border);
}
.schedule-slot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.schedule-slot:last-child { border-bottom: none; }
.schedule-time {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-sub);
  width: 50px;
  flex-shrink: 0;
}
.schedule-activity {
  font-size: 0.9rem;
  flex: 1;
}
.schedule-empty {
  color: var(--text-sub);
  font-style: italic;
}

/* Footer */
.footer {
  text-align: center;
  padding: 24px;
  color: var(--text-sub);
  font-size: 0.8rem;
}

/* Confirm Modal */
.confirm-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  opacity: 0;
  animation: fadeIn 0.2s forwards;
}
@keyframes fadeIn { to { opacity: 1; } }
.confirm-modal {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 340px;
  width: 90%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.confirm-text {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 20px;
  line-height: 1.5;
}
.confirm-buttons { display: flex; gap: 10px; }
.confirm-yes, .confirm-no {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  font-family: inherit;
}
.confirm-yes { background: var(--accent); color: white; }
.confirm-no { background: var(--border); color: var(--text); }