/* ============================================================
   학급 타이머 (timer.jsx) — 교사 전용 수업 도구
   패널: 우측 하단(빠른 이동 FAB 왼쪽) / 최소화: 원형 위젯 / 최대화: 전자칠판용 전체 화면
   ============================================================ */
.tm-panel { position: fixed; right: 80px; bottom: 18px; z-index: 90; width: min(600px, calc(100vw - 100px));
  background: var(--surface, #fff); color: var(--ink, #2b2b2b); border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.28);
  border: 1px solid var(--line, #e3ddd3); display: flex; flex-direction: column; overflow: hidden; }
.tm-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line, #e3ddd3); }
.tm-title { flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line, #e3ddd3);
  font-size: 13px; background: var(--paper, #faf7f2); color: var(--ink, #2b2b2b); }
.tm-head-btns { display: flex; gap: 4px; }
.tm-ib { min-width: 34px; height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line, #e3ddd3);
  background: var(--surface, #fff); color: var(--slate, #6b6259); font-size: 14px; font-weight: 700; cursor: pointer; }
.tm-ib:hover { background: var(--paper, #faf7f2); }
.tm-ib.danger:hover { background: #fbeeee; color: #a04040; border-color: #e3b8b8; }

.tm-body { display: flex; min-height: 0; }
.tm-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 18px 16px; border-right: 1px solid var(--line, #e3ddd3); }
.tm-right { flex: 0 0 220px; display: flex; flex-direction: column; gap: 12px; padding: 12px; overflow-y: auto; max-height: 62vh; }

/* LCD */
.tm-lcd { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 18px; background: #111827;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.55); }
.tm-col { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tm-arrow { background: none; border: none; color: #6b7280; font-size: 14px; cursor: pointer; padding: 2px 8px; line-height: 1; }
.tm-arrow:hover:not(:disabled) { color: #86efac; }
.tm-arrow:disabled { opacity: .2; cursor: default; }
.tm-digits { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: 60px; line-height: 1; color: #86efac; background: transparent; border: none; text-align: center; width: 1.3em; padding: 0; }
.tm-digits:focus { outline: none; background: rgba(22,101,52,.4); border-radius: 8px; }
.tm-digits:disabled { opacity: 1; color: #86efac; }
.tm-digits.low, .tm-digits.low:disabled { color: #f87171; animation: tm-pulse 1s ease-in-out infinite; }
.tm-digits.done, .tm-digits.done:disabled { color: #4ade80; }
.tm-colon { width: auto; padding-bottom: 6px; font-size: 52px; }
.tm-colon.run { animation: tm-pulse 1s ease-in-out infinite; }
@keyframes tm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.tm-done-badge { font-size: 16px; font-weight: 800; color: #16a34a; animation: tm-bounce .8s ease-in-out infinite; }
@keyframes tm-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* 버튼 */
.tm-ctrl { display: flex; gap: 8px; width: 100%; }
.tm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--line, #e3ddd3); background: var(--surface, #fff); color: var(--ink, #2b2b2b); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.tm-btn:hover:not(:disabled) { background: var(--paper, #faf7f2); }
.tm-btn.primary { flex: 1 1 auto; background: #f97316; border-color: #f97316; color: #fff; font-size: 14px; }
.tm-btn.primary:hover:not(:disabled) { background: #ea580c; }
.tm-btn:disabled { opacity: .4; cursor: default; }
.tm-btn.sm { padding: 6px 10px; font-size: 12px; border-radius: 8px; }
/* 🎵 음악만 재생 — 타이머와 별개의 BGM 스위치. 재생 중엔 초록 */
.tm-bgm-toggle { width: 100%; padding: 8px 12px; font-size: 13px; font-weight: 800; }
.tm-bgm-toggle.on { background: #e7f5ec; border-color: #7fc496; color: #1f6b3d; }
.tm-bgm-toggle.on:hover:not(:disabled) { background: #d9efe1; }
.tm-chip { padding: 7px 4px; font-size: 12px; font-weight: 700; border-radius: 9px; border: 1px solid var(--line, #e3ddd3);
  background: var(--surface, #fff); color: var(--ink, #2b2b2b); cursor: pointer; }
.tm-chip:hover { background: var(--ink, #2b2b2b); color: #fff; border-color: var(--ink, #2b2b2b); }
.tm-chip.plus { border-color: #99d6c9; color: #0f766e; }
.tm-chip.plus:hover { background: #0d9488; border-color: #0d9488; color: #fff; }
.tm-chip.minus { border-color: #f1b3b3; color: #dc2626; }
.tm-chip.minus:hover { background: #ef4444; border-color: #ef4444; color: #fff; }
.tm-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.tm-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 4px; }

/* 우측 설정 */
.tm-sec { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--line, #e3ddd3); }
.tm-sec:last-child { border-bottom: 0; padding-bottom: 0; }
.tm-sec-title { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  color: var(--slate, #6b6259); text-transform: uppercase; }
.tm-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; user-select: none; }
.tm-check input { width: 14px; height: 14px; accent-color: #f97316; }
.tm-tag { font-size: 10px; font-weight: 700; color: #fff; background: #f97316; border-radius: 999px; padding: 2px 6px; line-height: 1; }
.tm-seg { display: inline-flex; border: 1px solid var(--line, #e3ddd3); border-radius: 999px; overflow: hidden; text-transform: none; letter-spacing: 0; }
.tm-seg button { font-size: 11px; font-weight: 700; padding: 3px 9px; border: none; background: transparent; color: var(--slate, #6b6259); cursor: pointer; }
.tm-seg button.on { background: var(--ink, #2b2b2b); color: #fff; }
.tm-row { display: flex; gap: 4px; align-items: center; }
.tm-input { flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line, #e3ddd3); font-size: 12px;
  background: var(--paper, #faf7f2); color: var(--ink, #2b2b2b); }
.tm-hist { display: flex; flex-wrap: wrap; gap: 4px; }
.tm-hist-chip { display: inline-flex; align-items: center; gap: 2px; background: var(--paper, #faf7f2); border: 1px solid var(--line, #e3ddd3);
  border-radius: 6px; padding: 2px 6px; font-size: 10.5px; max-width: 100%; }
.tm-hist-chip.on { border-color: #f97316; }
.tm-hist-chip button { background: none; border: none; color: var(--slate, #6b6259); cursor: pointer; padding: 0; font-size: 10.5px;
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-hist-chip button:hover { color: var(--ink, #2b2b2b); }
.tm-hist-chip .x { margin-left: 2px; font-size: 12px; }
.tm-hist-chip .x:hover { color: #dc2626; }
.tm-hint { margin: 0; font-size: 11px; line-height: 1.45; color: var(--slate, #6b6259); }
.tm-file-name { flex: 1 1 auto; min-width: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-file-btn { cursor: pointer; text-align: center; }
.tm-vol { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.tm-vol input { flex: 1 1 auto; accent-color: #f97316; }
.tm-yt-preview { font-size: 11px; font-weight: 700; color: var(--brand, #b06a3b); cursor: pointer; }

/* BGM 홀더 — 항상 마운트(최소화·최대화에도 음악이 이어진다). 유튜브는 기본 숨김, '영상 화면 보기'로 미리보기 */
.tm-bgm-holder { position: fixed; left: -9999px; top: 0; width: 320px; height: 180px; }
.tm-bgm-holder.show { left: auto; right: 80px; bottom: 300px; z-index: 91; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.tm-bgm-holder iframe { width: 100%; height: 100%; border: 0; }

/* 최소화 위젯 */
.tm-bubble-wrap { position: fixed; right: 80px; bottom: 18px; z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tm-bubble-title { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; font-weight: 700;
  background: var(--surface, #fff); border: 1px solid var(--line, #e3ddd3); border-radius: 999px; padding: 2px 8px; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.tm-bubble-box { position: relative; }
.tm-bubble { position: relative; width: 72px; height: 72px; border-radius: 50%; background: #111827; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 28px rgba(0,0,0,.35); transition: transform .14s; }
.tm-bubble:hover { transform: scale(1.06); }
.tm-bubble.done { animation: tm-pulse 1s ease-in-out infinite; }
.tm-bubble svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.tm-bubble-time { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 800; font-size: 15px; color: #86efac; font-variant-numeric: tabular-nums; }
.tm-bubble-time.low { color: #f87171; }
.tm-bubble-time.done { color: #4ade80; }
.tm-bubble-pause { position: absolute; bottom: 8px; font-size: 9px; color: #94a3b8; }
.tm-bubble-x { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface, #fff);
  border: 2px solid var(--line, #e3ddd3); color: var(--slate, #6b6259); font-size: 12px; font-weight: 800; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.tm-bubble-x:hover { background: #dc2626; border-color: #dc2626; color: #fff; }

/* 최대화 — 전자칠판 */
.tm-max { position: fixed; inset: 0; z-index: 120; background: linear-gradient(160deg, #0f172a, #1e293b); color: #f2f0ea; display: flex; flex-direction: column; }
.tm-max-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-bottom: 1px solid rgba(255,255,255,.12); }
.tm-max-title { font-size: 22px; font-weight: 800; }
.tm-max-btns { display: flex; gap: 6px; }
.tm-max .tm-ib { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: #f2f0ea; }
.tm-max-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 20px; }
.tm-digits.huge { font-size: min(17vw, 38vh); letter-spacing: .02em; white-space: nowrap; width: auto; }
.tm-digits.huge .tm-colon { font-size: inherit; padding: 0 .05em; display: inline-block; }
.tm-max .tm-done-badge { font-size: 36px; }
.tm-max-ctrl { display: flex; gap: 12px; width: min(560px, 90vw); }
.tm-max .tm-btn { padding: 16px 20px; font-size: 18px; border-radius: 16px; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: #f2f0ea; }
.tm-max .tm-btn.primary { background: #f97316; border-color: #f97316; }
.tm-max-adj { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.tm-max .tm-chip { padding: 10px 14px; font-size: 15px; background: rgba(255,255,255,.04); }

/* 좁은 화면 — 패널이 바닥 시트로 */
@media (max-width: 720px) {
  .tm-panel { right: 0; left: 0; bottom: 0; width: 100%; border-radius: 16px 16px 0 0; max-height: 92vh; }
  .tm-body { flex-direction: column; overflow-y: auto; }
  .tm-left { border-right: 0; border-bottom: 1px solid var(--line, #e3ddd3); }
  .tm-right { flex: 0 0 auto; max-height: none; overflow: visible; }
  .tm-digits { font-size: 48px; }
  .tm-bubble-wrap, .tm-bgm-holder.show { right: 80px; }
}