:root {
    --bg-color: #050505; --card-bg-color: #111; --border-color: #333;
    --neon-blue: #00f3ff; --neon-green: #39ff14; --neon-orange: #ff6700; --neon-purple: #bc13fe;
    --glow-blue: 0 0 10px rgba(0,243,255,0.7), 0 0 20px rgba(0,243,255,0.5);
    --glow-green: 0 0 10px rgba(57, 255, 20, 0.7);
    --glow-orange: 0 0 15px rgba(255,103,0,0.8);
    --glow-text: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px var(--neon-blue);
}

body { margin: 0; background-color: var(--bg-color); color: #fff; font-family: 'Pretendard', sans-serif; }

/* === 대시보드 (index.html) 스타일 === */
.dashboard-bg { padding: 20px; display: flex; justify-content: center; }
.dashboard-container { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 20px; }
.logo { font-size: 2.5rem; font-weight: 800; text-align: center; margin-bottom: 10px; text-shadow: var(--glow-text); }
.card { background-color: var(--card-bg-color); border: 1px solid var(--border-color); border-radius: 20px; padding: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); }
.level-title { color: #888; font-size: 0.9rem; margin-bottom: 15px; }
.level-buttons { display: flex; gap: 15px; }
.level-btn { flex: 1; background: transparent; border: 1px solid var(--border-color); border-radius: 15px; padding: 15px; color: #888; font-weight: 600; cursor: pointer; }
.level-btn.active { border-color: var(--neon-blue); color: #fff; box-shadow: var(--glow-blue); }
.study-section { align-items: center; text-align: center; gap: 15px; }
.map-icon { font-size: 2rem; color: var(--neon-purple); text-shadow: 0 0 10px var(--neon-purple); }
.study-title { font-size: 1.5rem; font-weight: 700; margin: 10px 0; }
.target-words { color: #888; font-size: 0.9rem; }
.target-count { color: #fff; font-weight: 700; }
.start-btn { width: 100%; background: transparent; border: 2px solid var(--neon-orange); color: #fff; font-size: 1.2rem; font-weight: 700; padding: 18px; border-radius: 15px; cursor: pointer; margin-top: 15px; box-shadow: var(--glow-orange); }
.info-row { display: flex; gap: 15px; }
.info-card { flex: 1; text-align: center; padding: 20px; }
.info-title { font-size: 0.9rem; margin-bottom: 5px; }
.title-orange { color: var(--neon-orange); }
.title-green { color: var(--neon-green); }
.info-count { font-size: 1.5rem; font-weight: 700; }

/* 7일 루틴 영역 스타일 */
.routine-header { font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; }
.routine-list { list-style: none; padding: 0; margin: 0; }
.routine-item { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--border-color); }
.routine-item:last-child { border-bottom: none; }
.routine-action-btn { background: transparent; border: 1px solid var(--border-color); border-radius: 10px; padding: 8px 20px; font-weight: 600; color: #888; cursor: pointer; }
.routine-action-btn.active { border-color: var(--neon-green); color: #fff; box-shadow: var(--glow-green); }

/* === 훈련장 (study.html) 스타일 === */
.study-bg { overflow: hidden; }
#app { width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: center; position: relative; }
.back-btn { position: absolute; top: 20px; left: 20px; background: transparent; border: none; color: #888; font-size: 1rem; cursor: pointer; }
.header { width: 90%; padding: 60px 0 20px 0; text-align: center; }
.progress-box { width: 100%; height: 6px; background: #222; border-radius: 10px; overflow: hidden; margin-top: 10px; }
#bar { height: 100%; width: 100%; background: var(--neon-orange); box-shadow: 0 0 10px var(--neon-orange); transition: width 0.1s linear; }
#display { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; }
#target { font-size: 4rem; margin: 0; text-shadow: 0 0 15px #fff; }
#ipa { font-size: 1.2rem; color: #888; margin-top: 5px; }
#meanings { width: 90%; margin-top: 30px; }
#meanings div { font-size: 1.8rem; opacity: 0.1; margin: 15px 0; transition: 0.3s; text-align: center; }
#meanings div.active { opacity: 1; color: var(--neon-blue); text-shadow: 0 0 10px var(--neon-blue); font-weight: bold; }
.choice-btn { width: 100%; padding: 18px; margin: 10px 0; background: var(--card-bg-color); border: 1px solid #333; border-radius: 15px; color: #fff; font-size: 1.2rem; cursor: pointer; }
.choice-btn:active { border-color: var(--neon-green); box-shadow: 0 0 15px var(--neon-green); }
#main-action { width: 90%; padding: 20px; margin-bottom: 40px; border-radius: 15px; border: 2px solid var(--neon-orange); background: transparent; color: #fff; font-size: 1.3rem; font-weight: bold; box-shadow: 0 0 15px var(--neon-orange); cursor: pointer; }
#main-action:disabled { border-color: #444; box-shadow: none; color: #666; cursor: not-allowed; }