.timer-panel{padding:40px}
.timer-display{position:relative;width:340px;height:340px;margin:0 auto 32px;display:flex;align-items:center;justify-content:center;flex-direction:column}
.ring{width:100%;height:100%;transform:rotate(-90deg);position:absolute;top:0;left:0}
.ring-bg{fill:none;stroke:var(--line-soft);stroke-width:8}
.ring-fg{fill:none;stroke:url(#ringGrad);stroke-width:8;stroke-linecap:round;stroke:var(--primary);
  stroke-dasharray:565.5;stroke-dashoffset:0;transition:stroke-dashoffset .25s linear, stroke .3s}
.time-text{font-family:"Space Grotesk",monospace;font-size:84px;font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums;position:relative;z-index:1}
.status-text{margin-top:10px;font-size:13px;color:var(--ink-soft);letter-spacing:.18em;text-transform:uppercase;font-family:"Space Grotesk",sans-serif;position:relative;z-index:1}

.timer-panel.warning .ring-fg{stroke:var(--butter)}
.timer-panel.warning .time-text{color:var(--butter)}
.timer-panel.danger .ring-fg{stroke:var(--rose)}
.timer-panel.danger .time-text{color:var(--rose);animation:tick-pulse 1s infinite}
.timer-panel.done .ring-fg{stroke:#7d6cff}
.timer-panel.done .time-text{color:var(--ink);animation:done-bounce .6s}

@keyframes tick-pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes done-bounce{0%{transform:scale(1)}30%{transform:scale(1.18)}60%{transform:scale(.95)}100%{transform:scale(1)}}

.presets{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:20px}
.preset{padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--paper-2);color:var(--ink);cursor:pointer;font:inherit;font-size:13px;font-family:inherit;transition:all .12s}
.preset:hover{background:var(--sage-soft);border-color:var(--primary);color:var(--ink)}
.preset.active{background:linear-gradient(135deg,#7d6cff,#26a4ff);border-color:transparent;color:var(--ink)}

.custom-time{display:flex;gap:12px;align-items:flex-end;justify-content:center;margin-bottom:24px;flex-wrap:wrap}
.custom-time .field{width:100px}
.custom-time input{text-align:center;font-size:18px;font-family:"Space Grotesk",monospace}

.controls{display:flex;gap:10px;justify-content:center;margin-bottom:28px;flex-wrap:wrap}

.options{display:flex;justify-content:center;gap:8px;flex-direction:column;max-width:400px;margin:0 auto;padding-top:20px;border-top:1px solid var(--line-soft)}

/* 풀스크린 오버레이 */
.fullscreen-overlay{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;flex-direction:column;
  background:radial-gradient(circle at 50% 50%,#1a1a2e,#000);}
.fs-time{font-family:"Space Grotesk",monospace;font-size:min(28vw,360px);font-weight:700;color:var(--ink);line-height:1;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;color:#fff}
.fs-label{margin-top:24px;font-family:"Space Grotesk",sans-serif;letter-spacing:.4em;font-size:18px;color:var(--primary);text-transform:uppercase}
.fullscreen-overlay.warning .fs-time{color:var(--butter)}
.fullscreen-overlay.danger .fs-time{color:var(--rose);animation:tick-pulse 1s infinite}
.fullscreen-overlay.done .fs-time{animation:done-bounce .6s}
.fs-close{position:absolute;top:24px;right:32px;background:var(--paper-2);border:1px solid var(--line);color:var(--ink);
  width:48px;height:48px;border-radius:50%;font-size:28px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.fs-close:hover{background:var(--line)}

/* ============================================================
   🤫 소음 감지 모드
   ============================================================ */
.noise-settings{border-top:1px dashed var(--line);margin-top:8px;padding-top:10px}
.noise-privacy{margin:0 0 0 46px;font-size:11px;color:var(--ink-soft)}
.noise-hint{margin:8px 0 0 46px;font-size:12px;color:var(--butter);line-height:1.5}
.noise-config{display:flex;flex-direction:column;gap:14px;margin:12px 0 4px 46px}
.noise-config input[type=range]{width:100%;accent-color:var(--primary);cursor:pointer}
.noise-config .sense-scale{font-style:normal;color:var(--ink-soft)}
.noise-config .bonus-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink)}
.noise-config .bonus-row input{width:80px;text-align:center;font-family:"Space Grotesk",monospace}
.noise-config .bonus-row em{font-style:normal}
.noise-rule{margin:0;font-size:12px;color:var(--ink-soft)}

/* 실시간 소음 게이지 */
.noise-gauge{max-width:460px;margin:-8px auto 26px;position:relative}
.gauge-track{position:relative;height:26px;border-radius:999px;background:rgba(0,0,0,.35);
  border:1px solid var(--line);overflow:hidden}
.gauge-fill{position:absolute;top:0;bottom:0;left:0;width:0%;border-radius:999px;
  background:linear-gradient(90deg,#3ddc97,var(--primary));transition:width .08s linear;
  box-shadow:0 0 14px rgba(141,225,255,.35)}
.gauge-fill.loud{background:linear-gradient(90deg,var(--butter),#ff5c7a);box-shadow:0 0 18px rgba(255,92,122,.5)}
.gauge-thresh{position:absolute;top:0;bottom:0;width:3px;background:#fff;opacity:.85;border-radius:2px;transform:translateX(-50%)}
.gauge-info{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:13px;color:var(--ink-soft);gap:12px;flex-wrap:wrap}
.gauge-stats{font-variant-numeric:tabular-nums;white-space:nowrap}
.gauge-stats .neg{color:var(--rose)}
.gauge-stats .pos{color:#3ddc97}

/* "+N초!" 보너스 팝업 */
.bonus-pop{position:absolute;left:50%;top:-14px;transform:translate(-50%,0);opacity:0;pointer-events:none;
  font-family:"Space Grotesk","Noto Sans KR",sans-serif;font-weight:700;font-size:24px;color:#3ddc97;
  text-shadow:0 0 20px rgba(61,220,151,.6);z-index:5}
.bonus-pop.show{animation:bonus-float 1.4s ease-out}
@keyframes bonus-float{
  0%{opacity:0;transform:translate(-50%,12px) scale(.7)}
  15%{opacity:1;transform:translate(-50%,0) scale(1.15)}
  30%{transform:translate(-50%,-6px) scale(1)}
  100%{opacity:0;transform:translate(-50%,-48px) scale(1)}
}

/* 페널티: 붉은 플래시 + 게이지 흔들림 */
.timer-panel.noise-alarm{border-color:rgba(255,92,122,.6);animation:noise-flash 1s infinite}
@keyframes noise-flash{
  0%,100%{box-shadow:0 20px 60px var(--paper-2)}
  50%{box-shadow:0 0 0 5px rgba(255,92,122,.4),0 0 70px rgba(255,92,122,.4)}
}
.noise-alarm .gauge-track{animation:gauge-shake .25s infinite}
@keyframes gauge-shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)}
  75%{transform:translateX(5px)}
}

/* 보너스: 초록 플래시 */
.timer-panel.noise-bonus-flash{border-color:rgba(61,220,151,.6);
  box-shadow:0 0 0 5px rgba(61,220,151,.35),0 0 70px rgba(61,220,151,.35)}

/* 풀스크린에서의 게이지·플래시 */
.fs-noise{position:absolute;bottom:56px;left:50%;transform:translateX(-50%);width:min(72vw,720px)}
.fs-noise .gauge-track{height:34px}
.fs-noise-stats{text-align:center;margin-top:10px;font-family:"Space Grotesk","Noto Sans KR",sans-serif;
  font-size:16px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.fs-noise .bonus-pop{top:-46px;font-size:40px}
.fullscreen-overlay.noise-alarm::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2;
  box-shadow:inset 0 0 0 10px rgba(255,92,122,.7),inset 0 0 140px rgba(255,92,122,.4);
  animation:fs-edge-flash 1s infinite}
@keyframes fs-edge-flash{0%,100%{opacity:.35}50%{opacity:1}}
.fullscreen-overlay.noise-bonus-flash::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2;
  box-shadow:inset 0 0 0 10px rgba(61,220,151,.6),inset 0 0 140px rgba(61,220,151,.35)}