/* ===== 공부하자 시계보기 - 스타일 ===== */

:root{
  --purple:#534AB7;
  --purple-light:#7F77DD;
  --purple-bg:#EEEDFE;
  --purple-text:#3C3489;
  --orange:#D85A30;
  --pink:#D4537E;
  --pink-bg:#FBEAF0;
  --pink-text:#993556;
  --green:#1D9E75;
  --green-bg:#E1F5EE;
  --green-text:#0F6E56;
  --amber:#EF9F27;
  --amber-bg:#FAEEDA;
  --amber-text:#854F0B;
  --blue:#378ADD;
  --blue-bg:#E6F1FB;
  --blue-text:#185FA5;
  --ink:#2C2C2A;
  --muted:#6b6a66;
  --line:#e7e5dd;
  --font-title:'Jua','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --font-body:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

html,body{ height:100%; }

body{
  font-family:var(--font-body);
  background:#f4f2ea;
  color:var(--ink);
  display:flex;
  justify-content:center;
  height:100%;
  overflow:hidden;              /* 페이지 전체는 안 움직이고, 화면 안에서만 스크롤 */
}

/* 주아체는 큰 로고 제목에만 사용 */
.logo-sub,.logo-main{ font-family:var(--font-title); font-weight:400; }

button,input,select,textarea{ font-family:var(--font-body); }
select,.input-area input{ font-family:var(--font-body); font-weight:500; }

#app{
  width:100%;
  max-width:430px;
  height:100vh;
  height:100dvh;                /* 모바일 동적 뷰포트 (지원 브라우저 우선) */
  background:#fff;
  position:relative;
  overflow:hidden;
}

/* ---- 화면 전환 ---- */
.screen{
  display:none; height:100%; flex-direction:column;
  overflow-y:auto; -webkit-overflow-scrolling:touch;   /* 내용이 길면 화면 안에서 스크롤 */
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.screen.active{ display:flex; animation:fade .25s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

.hidden{ display:none !important; }

/* ---- 상단바 ---- */
.topbar{
  height:52px; flex:0 0 52px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 14px; color:#fff;
}
.topbar-purple{ background:var(--purple); }
.topbar-purple2{ background:var(--purple-light); }
.topbar-green{ background:var(--green); }
.topbar-pink{ background:var(--pink); }
.topbar-orange{ background:var(--orange); }
.topbar-blue{ background:var(--blue); }
.topbar-title{ font-size:16px; font-weight:600; }
.topbar-left,.topbar-right{ font-size:13px; display:flex; align-items:center; gap:10px; }
.topbar-pad{ width:36px; }
.dot{ color:#9ee6c7; font-size:9px; }
.coin{ background:rgba(255,255,255,.2); padding:4px 9px; border-radius:20px; font-weight:700; }
.back-btn{
  width:36px; height:36px; border:0; background:rgba(255,255,255,.2);
  color:#fff; font-size:24px; border-radius:50%; cursor:pointer; line-height:1;
}
.sound-btn{ border:0; background:transparent; font-size:18px; cursor:pointer; }

.pad{ padding:18px 16px 28px; flex:1; }
/* 글자가 많은 화면은 흰 카드로 감싸 배경 그림 위에서도 잘 읽히게 (카드 아래는 배경이 보임) */
#screen-theory .pad, #screen-practice-setup .pad, #screen-game-select .pad, #screen-record .pad, #screen-shop .pad{
  flex:0 0 auto;
  background:rgba(255,255,255,0.94); border-radius:20px; margin:12px; padding:16px 16px 20px;
  box-shadow:0 4px 14px rgba(83,74,183,.10);
}
.center-col{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }
/* 문제·게임·결과 화면은 배경이 그대로 보이도록 투명 */
.pad.center-col{ background:transparent; border-radius:0; margin:0; box-shadow:none; }

/* ---- 홈 ---- */
.home-body{ flex:1; padding:14px 16px 22px; display:flex; flex-direction:column; }
.logo-card{
  background:var(--amber-bg); border:1.5px solid var(--amber);
  border-radius:18px; padding:12px; text-align:center; position:relative; margin-bottom:14px;
}
.logo-sub{ font-size:14px; font-weight:700; color:var(--purple); letter-spacing:2px; }
.logo-main{ font-size:34px; font-weight:800; letter-spacing:3px; line-height:1.1; }
.logo-main .c-orange{ color:var(--orange); }
.logo-main .c-pink{ color:var(--pink); }
.logo-main .c-purple{ color:var(--purple); }
.logo-main .c-blue{ color:var(--blue); }
.logo-star{ position:absolute; color:var(--amber); font-size:16px; animation:twinkle 1.8s ease-in-out infinite; }
.logo-star.s1{ top:10px; left:16px; }
.logo-star.s2{ bottom:10px; right:18px; color:var(--orange); animation-delay:.6s; }
@keyframes twinkle{ 0%,100%{opacity:.4; transform:scale(.9);} 50%{opacity:1; transform:scale(1.2);} }

.hero{ display:flex; gap:12px; margin-bottom:12px; align-items:stretch; }
.hero-char{ flex:0 0 108px; text-align:center; cursor:pointer; display:flex; flex-direction:column; align-items:center; }
.speech{
  position:relative; background:#fff; border:1.5px solid var(--line); border-radius:14px;
  padding:7px 10px; font-size:12px; color:var(--ink); line-height:1.3; margin-bottom:8px;
  word-break:keep-all; width:100%;
}
.speech::after{
  content:''; position:absolute; bottom:-7px; left:50%; transform:translateX(-50%);
  border:7px solid transparent; border-top-color:#fff; border-bottom:0;
}
.char-face{
  width:84px; height:84px; margin:0 auto; border-radius:50%; overflow:hidden;
  background:var(--pink-bg); border:3px solid var(--pink);
  display:flex; align-items:center; justify-content:center; font-size:46px;
  animation:bob 2.4s ease-in-out infinite;
}
.char-face img{ width:100%; height:100%; object-fit:contain; }
@keyframes bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);} }
.char-name-sm{ font-size:12px; color:var(--muted); margin-top:6px; }

.hero-right{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:7px; }
.level-row{ display:flex; align-items:center; justify-content:space-between; }
.lv-group{ display:flex; align-items:center; gap:6px; min-width:0; }
.level-badge{
  background:var(--purple); color:#fff; font-size:13px; font-weight:700;
  padding:3px 12px; border-radius:20px; flex:0 0 auto;
}
.title-badge{
  background:var(--purple-bg); color:var(--purple-text); font-size:12px; font-weight:700;
  padding:3px 10px; border-radius:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.exp-text{ font-size:12px; color:var(--muted); flex:0 0 auto; }
.exp-bar{ height:9px; background:#eceae2; border-radius:20px; overflow:hidden; }
.exp-fill{ height:100%; width:0; background:var(--purple-light); border-radius:20px; transition:width .4s; }

.mission-card{
  background:var(--green-bg); border:1.5px solid #9FE1CB; border-radius:14px; padding:10px 12px; margin-top:2px;
}
.mission-top{ display:flex; justify-content:space-between; align-items:center; }
.mission-title{ font-size:13px; font-weight:700; color:var(--green-text); }
.mission-count{ font-size:13px; font-weight:700; color:var(--green-text); }
.mbar{ height:8px; background:#cdeee0; border-radius:20px; overflow:hidden; margin:7px 0 5px; }
.mbar-fill{ height:100%; width:0; background:var(--green); border-radius:20px; transition:width .4s; }
.mission-reward{ font-size:11px; color:var(--green-text); }

.mini-cards{ display:flex; gap:9px; margin-bottom:14px; }
.mini-card{ flex:1; background:#f4f2ea; border-radius:14px; padding:11px 8px; text-align:center; cursor:pointer; }
.mini-label{ font-size:11px; color:var(--muted); }
.mini-val{ font-size:21px; font-weight:800; margin-top:2px; }

.menu{ display:flex; flex-direction:column; gap:11px; margin-top:10px; }
.menu-btn{
  border:0; color:#fff; border-radius:16px; padding:16px; font-size:18px; font-weight:600;
  cursor:pointer; transition:transform .08s; text-align:center;
}
.menu-btn:active{ transform:scale(.97); }
.m-purple{ background:var(--purple-light); }
.m-green{ background:var(--green); }
.m-pink{ background:var(--pink); }

.home-foot{ display:flex; gap:10px; margin-top:16px; }
.ghost-btn{
  flex:1; border:1.5px solid var(--line); background:#fff; color:var(--muted);
  border-radius:14px; padding:12px; font-size:14px; font-weight:600; cursor:pointer;
}
.ghost-btn.danger{ color:#A32D2D; border-color:#F0999580; margin-top:20px; width:100%; flex:none; }

/* ---- 시계 그림 (공통) ---- */
.clock-wrap{ display:flex; justify-content:center; margin:6px 0; }
.clock-wrap svg{ display:block; }

/* ---- 시계 배우기 ---- */
.hint{ font-size:14px; color:var(--muted); text-align:center; margin-bottom:8px; }
.learn-read{
  text-align:center; font-size:30px; font-weight:800; color:var(--purple); margin:6px 0 14px;
}
.learn-controls{ display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:320px; margin:0 auto; }
.learn-controls.three{ grid-template-columns:repeat(2,1fr); }
.adj-btn{
  border:1.5px solid var(--line); background:#fff; border-radius:14px; padding:13px;
  font-size:16px; font-weight:700; cursor:pointer; color:var(--ink);
}
.adj-btn.h{ color:var(--orange); border-color:#EBBBA6; }
.adj-btn.m{ color:var(--blue); border-color:#A9CCEE; }
.adj-btn:active{ transform:scale(.96); }
.hand-legend{ display:flex; justify-content:center; gap:18px; margin:14px 0 4px; }
.legend-item{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; }
.legend-bar{ width:22px; height:6px; border-radius:4px; }
.legend-bar.h{ background:var(--orange); }
.legend-bar.m{ background:var(--blue); }
.explain-box{
  margin-top:14px; background:var(--green-bg); border:1.5px solid #5DCAA5;
  border-radius:14px; padding:16px; text-align:center; color:var(--green-text);
  font-size:15px; line-height:1.7;
}
.explain-box b{ font-size:17px; }
.explain-box .c-h{ color:var(--orange); }
.explain-box .c-m{ color:var(--blue); }

/* ---- 설정 / 공통 폼 ---- */
.setup-h{ font-size:15px; font-weight:600; margin:18px 0 10px; color:var(--ink); }
.seg{ display:flex; gap:8px; }
.seg-btn{
  flex:1; height:44px; border:1.5px solid var(--line); background:#fff; color:var(--muted);
  border-radius:12px; font-size:15px; font-weight:600; cursor:pointer;
}
.seg-btn.active{ background:var(--purple); color:#fff; border-color:var(--purple); }
.seg-note{ font-size:12px; color:var(--muted); margin-top:6px; text-align:center; }

.big-btn{
  width:100%; border:0; color:#fff; border-radius:16px; padding:16px; font-size:18px;
  font-weight:700; cursor:pointer; margin-top:26px;
}
.big-btn:active{ transform:scale(.98); }
.b-green{ background:var(--green); }
.b-pink{ background:var(--pink); }
.b-amber{ background:var(--amber); color:var(--amber-text); }

/* ---- 문제 / 게임 공통 ---- */
.q-title{ font-size:22px; font-weight:800; color:var(--ink); margin:14px 0 2px; text-align:center; }
.choices{ display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; max-width:340px; }
.choice{
  background:var(--purple-bg); color:var(--purple-text); border:1.5px solid #AFA9EC;
  border-radius:16px; padding:16px 10px; font-size:18px; font-weight:800; cursor:pointer;
  transition:transform .08s;
}
.choice:active{ transform:scale(.96); }
.choice.right{ background:var(--green); color:#fff; border-color:var(--green); }
.choice.wrong{ background:#F09595; color:#fff; border-color:#E24B4A; }
.input-area{ display:flex; flex-direction:column; gap:14px; width:100%; max-width:300px; align-items:center; }
.time-inputs{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:20px; font-weight:800; color:var(--muted); }
.time-inputs input{
  width:78px; height:60px; border:2px solid var(--line); border-radius:16px; text-align:center;
  font-size:28px; font-weight:800; color:var(--purple);
}
.time-inputs input:focus{ outline:none; border-color:var(--purple); }
.feedback{ margin-top:18px; font-size:20px; font-weight:800; min-height:30px; text-align:center; }
.feedback.ok{ color:var(--green); }
.feedback.no{ color:#E24B4A; }

/* ---- 게임 ---- */
.game-cards{ display:flex; flex-direction:column; gap:12px; }
.game-card{
  display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  border:1.5px solid var(--line); background:#fff; border-radius:18px; padding:16px; cursor:pointer;
}
.game-card:active{ transform:scale(.98); }
.game-emoji{ font-size:34px; margin-bottom:6px; }
.game-title{ font-size:18px; font-weight:700; color:var(--ink); }
.game-desc{ font-size:13px; color:var(--muted); margin-top:2px; }
.time-bar{ height:8px; background:#eceae2; overflow:hidden; }
.time-bar-fill{ height:100%; width:100%; background:var(--pink); transition:width .1s linear, background .2s; }
.game-lives{ font-size:18px; letter-spacing:2px; }
.game-timer{ font-size:16px; font-weight:800; background:rgba(255,255,255,.2); padding:4px 12px; border-radius:20px; }
.stat-row{ display:flex; gap:12px; width:100%; max-width:340px; margin-top:8px; }
.stat-box{ flex:1; background:#f4f2ea; border-radius:14px; padding:10px; text-align:center; }
.stat-box.stat-combo{ background:var(--amber-bg); }
.stat-label{ font-size:12px; color:var(--muted); }
.stat-combo .stat-label{ color:var(--amber-text); }
.stat-val{ font-size:24px; font-weight:800; }
.stat-combo .stat-val{ color:var(--orange); }
.game-flash{ font-size:28px; font-weight:800; min-height:40px; margin-top:10px; }

/* ---- 게임 결과 ---- */
.over-col{ justify-content:center; flex:1; gap:6px; padding-top:60px; }
.over-emoji{ font-size:72px; animation:pop .4s ease; }
@keyframes pop{ from{transform:scale(0);} to{transform:scale(1);} }
.over-title{ font-size:24px; font-weight:800; }
.over-score{ font-size:48px; font-weight:800; color:var(--pink); margin:6px 0; }
.over-best{ font-size:15px; color:var(--amber-text); font-weight:700; }
.over-coin{ font-size:15px; color:var(--muted); margin-bottom:20px; }
.over-col .big-btn{ width:100%; max-width:260px; }
.over-col .ghost-btn{ flex:none; width:100%; max-width:260px; margin-top:10px; }

/* ---- 캐릭터 ---- */
.gacha-card{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--purple-bg); border:1.5px solid var(--purple-light);
  border-radius:18px; padding:14px 16px; margin-bottom:16px;
}
.gacha-title{ font-size:16px; font-weight:700; color:var(--purple-text); }
.gacha-sub{ font-size:13px; color:var(--purple); margin-top:2px; }
.gacha-btn{
  border:0; background:var(--purple); color:#fff; border-radius:14px;
  padding:12px 22px; font-size:16px; font-weight:800; cursor:pointer;
}
.gacha-btn:active{ transform:scale(.96); }
.char-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.char-cell{
  border:1.5px solid var(--line); border-radius:16px; padding:12px 6px; text-align:center;
  background:#fff; cursor:pointer; position:relative;
}
.char-cell.selected{ border-color:var(--orange); border-width:2.5px; }
.char-cell.locked{ opacity:.55; }
.char-circle{
  width:60px; height:60px; margin:0 auto 6px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:32px; overflow:hidden;
}
.char-circle img{ width:100%; height:100%; object-fit:contain; }
.char-nm{ font-size:13px; font-weight:600; }
.char-rank{ font-size:11px; font-weight:700; margin-top:2px; }
.rank-common{ color:var(--muted); }
.rank-rare{ color:var(--purple); }
.rank-epic{ color:var(--blue-text); }
.rank-legend{ color:var(--orange); }
.char-badge{
  position:absolute; top:6px; right:6px; font-size:11px; background:var(--orange);
  color:#fff; border-radius:10px; padding:1px 7px; font-weight:700;
}

/* ---- 기록 ---- */
.rec-cards{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.rec-card{ background:#f4f2ea; border-radius:14px; padding:14px; }
.rec-label{ font-size:12px; color:var(--muted); }
.rec-val{ font-size:24px; font-weight:800; margin-top:4px; }
.weak-list{ font-size:15px; color:var(--muted); background:#f4f2ea; border-radius:12px; padding:14px; }
.weak-tag{ display:inline-block; background:var(--pink-bg); color:var(--pink-text); border-radius:10px; padding:4px 10px; margin:3px; font-weight:700; }

/* 뽑기 연출 */
.gacha-pop{
  position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex;
  align-items:center; justify-content:center; z-index:50; animation:fade .2s;
}
.gacha-pop .box{
  background:#fff; border-radius:24px; padding:30px 26px; text-align:center; max-width:280px;
  animation:pop .4s ease;
}
.gacha-pop .big-emoji{ font-size:80px; }
.gacha-pop .got{ font-size:20px; font-weight:800; margin:10px 0 4px; }
.gacha-pop .rk{ font-size:14px; font-weight:700; margin-bottom:16px; }
.gacha-pop button{
  border:0; background:var(--purple); color:#fff; border-radius:14px;
  padding:12px 28px; font-size:16px; font-weight:800; cursor:pointer;
}
/* 버튼이 둘일 때(광고 재뽑기 + 확인) 세로로 나란히 */
.gacha-pop .btns{ display:flex; flex-direction:column; gap:8px; align-items:stretch; }
.gacha-pop .btns button{ width:100%; padding:12px; }
.gacha-pop .gacha-redraw{ background:linear-gradient(180deg,#7bd88f,#39b36f); }

/* 게임 중 레벨업 안내 — 화면 아래쪽에 띄워 문제를 안 가림 */
.game-notice{
  position:absolute; left:50%; bottom:74px; transform:translateX(-50%) translateY(8px);
  background:rgba(60,40,90,.82); color:#fff; font-size:14px; font-weight:800;
  padding:8px 16px; border-radius:16px; white-space:nowrap; z-index:6; pointer-events:none;
  opacity:0; transition:opacity .2s ease, transform .2s ease;
}
.game-notice.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---- 랭킹 ---- */
.nick-btn{
  border:0; background:rgba(255,255,255,.18); color:#fff; cursor:pointer;
  font-size:13px; font-weight:700; padding:5px 11px; border-radius:20px;
  display:flex; align-items:center; gap:5px;
}

.rank-me{
  display:flex; align-items:center; gap:8px;
  background:var(--purple-bg); border-radius:14px; padding:10px 12px; margin-bottom:12px;
}
.rank-me-label{ font-size:12px; color:var(--muted); }
.rank-me-nick{ flex:1; font-size:16px; font-weight:800; color:var(--purple-text); }
.rank-nick-btn{
  border:0; background:var(--purple); color:#fff; cursor:pointer;
  font-size:12px; font-weight:700; padding:6px 12px; border-radius:20px;
}

.rank-nick-hint{
  font-size:12px; color:var(--muted); text-align:center; margin:-6px 0 12px;
}

/* 홈 상단 공지(종) 버튼 — 안 본 공지가 있으면 빨간 점 */
.notice-btn{ position:relative; }
.notice-btn.has-new::after{
  content:''; position:absolute; top:0; right:0;
  width:8px; height:8px; border-radius:50%;
  background:#E24B4A; border:1.5px solid var(--purple);
}

.seg-sm{ margin-bottom:8px; }
.seg-sm .seg-btn{ font-size:13px; padding:9px 0; }

.rank-season{ font-size:13px; font-weight:700; color:var(--muted); margin:10px 0 6px; text-align:center; }

.rank-row{
  display:flex; align-items:center; gap:10px;
  padding:11px 12px; border-bottom:1px solid var(--line);
}
.rank-row.me{ background:var(--amber-bg); border-radius:12px; border-bottom-color:transparent; }
.rank-badge{ width:30px; text-align:center; font-size:17px; }
.rank-num{ font-size:14px; font-weight:800; color:var(--muted); }
.rank-nick{ flex:1; min-width:0; font-weight:700; font-size:15px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-score{ font-weight:800; color:var(--purple-text); }

.rank-msg{ text-align:center; color:var(--muted); font-size:14px; padding:28px 10px; line-height:1.6; }
.rank-sub{ font-size:12px; }

.hall-season{ margin-bottom:16px; }
.hall-season-h{ font-size:14px; font-weight:800; color:var(--amber-text); margin-bottom:6px; }
.hall-row{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--line); }
.hall-row.me{ background:var(--amber-bg); border-radius:12px; border-bottom-color:transparent; }
.hall-medal{ width:26px; text-align:center; font-size:16px; }
.hall-nick{ flex:1; min-width:0; font-weight:700; font-size:15px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hall-score{ font-weight:800; color:var(--amber-text); }

/* 닉네임 입력 모달 */
.nick-title{ font-size:18px; font-weight:800; margin-bottom:4px; }
.nick-sub{ font-size:13px; color:var(--muted); margin-bottom:14px; }
.nick-input{
  width:100%; border:2px solid var(--line); border-radius:14px;
  padding:12px 14px; font-size:16px; font-weight:600; margin-bottom:16px; outline:none;
}
.nick-input:focus{ border-color:var(--purple-light); }
.nick-input.shake{ animation:alarmShake .35s ease; border-color:#E24B4A; }

/* ---- 상점 ---- */
.shop-tabs{
  display:flex; gap:6px; padding:10px 12px 0; flex:0 0 auto;
}
.shop-tab{
  flex:1; border:0; background:#eceae2; color:var(--muted);
  padding:10px 0; border-radius:12px; font-size:14px; font-weight:700; cursor:pointer;
}
.shop-tab.active{ background:var(--orange); color:#fff; }

.shop-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px;
}
.shop-item{
  background:#fff; border:2px solid var(--line); border-radius:16px;
  padding:10px 6px 8px; text-align:center; cursor:pointer; position:relative;
}
.shop-item.selected{ border-color:var(--orange); background:var(--amber-bg); }
.shop-item.locked{ opacity:.82; }
.shop-thumb{
  width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  overflow:hidden; border-radius:12px;
}
.shop-thumb svg{ width:100%; height:100%; }
.shop-swatch{ width:100%; height:100%; background-size:cover; background-position:center; border-radius:12px; }
.shop-name{ font-size:13px; font-weight:700; margin-top:6px; }
.shop-tag{ display:inline-block; font-size:11px; font-weight:800; padding:2px 8px; border-radius:20px; margin-top:4px; }
.shop-tag.sel{ background:var(--orange); color:#fff; }
.shop-tag.own{ background:var(--green-bg); color:var(--green-text); }
.shop-tag.buy{ background:var(--amber-bg); color:var(--amber-text); }

/* ---- 확인 팝업 (예/아니오) ---- */
.confirm-pop{
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:90;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.confirm-box{
  background:#fff; border-radius:22px; padding:24px 22px 18px; max-width:320px; width:100%;
  text-align:center; animation:pop .3s ease;
}
.confirm-msg{ font-size:16px; font-weight:600; line-height:1.5; margin-bottom:18px; }
.confirm-btns{ display:flex; gap:10px; }
.confirm-btns button{
  flex:1; border:0; border-radius:14px; padding:13px 0;
  font-size:15px; font-weight:800; cursor:pointer;
}
.confirm-cancel{ background:#eceae2; color:var(--muted); }
.confirm-ok{ background:var(--purple); color:#fff; }

/* 소리/배경음 끈 상태 */
.sound-btn.muted{ opacity:.38; }

/* ---- 알람 끄기 ---- */
#screen-alarm{ position:relative; }   /* 레벨 안내(.game-notice)가 이 화면 기준으로 놓이도록 */
.alarm-lv{ font-size:13px; font-weight:800; background:rgba(255,255,255,.2); padding:4px 9px; border-radius:20px; }

.alarm-head{ text-align:center; padding:14px 16px 8px; flex:0 0 auto; }
.alarm-ask{ font-size:14px; color:var(--muted); }
.alarm-target{
  font-family:var(--font-title); font-size:32px; color:var(--pink);
  margin-top:2px; letter-spacing:-.5px;
}

.alarm-field{
  flex:1; min-height:0;
  display:grid;
  /* 열·행 수는 시계 개수에 맞춰 알람끄기.js 가 정합니다 (2x2 → 4x3) */
  grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  gap:8px; padding:6px 12px 10px;
}
.alarm-clock{
  position:relative; border:0; background:transparent; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  animation:alarmPop .28s cubic-bezier(.2,1.4,.5,1) backwards;
}
.alarm-clock svg{ width:100%; height:100%; max-width:100%; max-height:100%; }
@keyframes alarmPop{ from{ transform:scale(.2); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* 울리는 중 — 살짝 흔들림 */
.alarm-clock:not(.off):not(.wrong){ animation:alarmPop .28s cubic-bezier(.2,1.4,.5,1) backwards, alarmRing 1.1s ease-in-out .3s infinite; }
@keyframes alarmRing{ 0%,100%{ transform:rotate(0); } 25%{ transform:rotate(-4deg); } 75%{ transform:rotate(4deg); } }

.alarm-bell{
  position:absolute; top:-2px; right:2px; font-size:17px; z-index:2;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));
}

/* 알람을 껐다 */
.alarm-clock.off{ animation:alarmOff .45s ease forwards; }
.alarm-clock.off .alarm-bell{ opacity:.25; }
@keyframes alarmOff{ to{ transform:scale(.55); opacity:0; } }

/* 엉뚱한 걸 껐다 */
.alarm-clock.wrong{ animation:alarmShake .35s ease; opacity:.35; }
@keyframes alarmShake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-7px); } 75%{ transform:translateX(7px); } }

/* 시간 초과 때 정답 알려주기 */
.alarm-clock.right::after{
  content:''; position:absolute; inset:-4px; border:3px solid var(--green);
  border-radius:50%; animation:alarmPulse .5s ease-in-out 2;
}
@keyframes alarmPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

#alarm-flash{ flex:0 0 auto; text-align:center; font-size:20px; padding-bottom:10px; }

/* 토스트 알림 */
.toast{
  position:fixed; top:64px; left:50%; transform:translateX(-50%) translateY(-12px);
  background:var(--purple); color:#fff; font-size:14px; font-weight:700;
  padding:11px 18px; border-radius:20px; z-index:80; opacity:0;
  transition:opacity .25s, transform .25s; white-space:nowrap; max-width:90%;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }