/* 집중 타이머 — 집중=토마토색 · 휴식=초록 · 끝 알림=노란 띠 */
[data-app="focus-timer"]{ display:flex; flex-direction:column; gap:6px; }
[data-app="focus-timer"].ft-anim{ transition:background .3s, border-color .3s; }   /* 처음 그린 뒤부터(열 때 흰색→어두운색 번짐 없게) */
/* 두 번 눌러 확인: 어두운 판에서도 빨간색으로(공통 .ndt-dark .ndt-btn 이 공통 빨강을 덮어서) */
[data-app="focus-timer"] .ndt-btn.ndt-arm{ background:#B42318; border-color:#B42318; color:#fff; }
[data-app="focus-timer"].ft-brk{ background:#0D2620; border-color:#0D2620; }
[data-app="focus-timer"] .ft-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
[data-app="focus-timer"] .ft-ph{ display:inline-flex; align-items:center; gap:6px; padding:3px 11px; border-radius:999px; background:rgba(255,138,101,.16); color:#FFB39C; font-size:13px; font-weight:800; white-space:nowrap; }
[data-app="focus-timer"] .ft-ph::before{ content:''; width:8px; height:8px; border-radius:50%; background:currentColor; }
[data-app="focus-timer"].ft-brk .ft-ph{ background:rgba(95,211,160,.16); color:#86E3BC; }
[data-app="focus-timer"] .ft-sndl{ display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 2px; font-size:13px; font-weight:700; color:#C7CCD4; cursor:pointer; white-space:nowrap; }
[data-app="focus-timer"] .ft-sndl input{ width:18px; height:18px; margin:0; accent-color:#FF8A65; cursor:pointer; }
[data-app="focus-timer"] .ft-alert{ padding:10px 12px; border-radius:12px; background:#FFCF4A; color:#1A1A1A; font-size:14px; font-weight:600; line-height:1.5; text-align:center; word-break:keep-all; overflow-wrap:anywhere; }
[data-app="focus-timer"] .ft-alert:empty{ display:none; }
[data-app="focus-timer"] .ft-alert b{ display:block; font-size:19px; font-weight:900; }
[data-app="focus-timer"] .ft-alert span{ display:inline-block; }
[data-app="focus-timer"].ft-ring .ft-alert{ animation:ndtFocusRing 1s ease-in-out 4; }
@keyframes ndtFocusRing{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,207,74,.75); } 60%{ box-shadow:0 0 0 7px rgba(255,207,74,0); } }
[data-app="focus-timer"] .ft-time{ text-align:center; font-size:58px; font-weight:900; line-height:1.05; letter-spacing:.01em; font-variant-numeric:tabular-nums; }
[data-app="focus-timer"] .ft-state{ min-height:1.4em; text-align:center; font-size:12.5px; color:#9BA3AE; word-break:keep-all; }
[data-app="focus-timer"].ft-run .ft-state{ color:#C7CCD4; }
[data-app="focus-timer"] .ft-bar{ height:6px; border-radius:3px; background:#2B3240; overflow:hidden; }
[data-app="focus-timer"] .ft-fill{ height:100%; width:0; background:#FF8A65; transition:width .25s linear; }
[data-app="focus-timer"].ft-brk .ft-fill{ background:#5FD3A0; }
[data-app="focus-timer"] .ft-btns{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr); gap:6px; margin-top:4px; }
[data-app="focus-timer"] .ft-btns .ndt-btn{ padding:0 8px; min-width:0; }
[data-app="focus-timer"] .ft-btns .ft-go{ background:#FF8A65; border-color:#FF8A65; color:#1A1209; }
[data-app="focus-timer"].ft-brk .ft-btns .ft-go{ background:#5FD3A0; border-color:#5FD3A0; color:#08221A; }
[data-app="focus-timer"].ft-run .ft-btns .ft-go{ background:#E7E9EC; border-color:#E7E9EC; color:#11151F; }
[data-app="focus-timer"] .ft-foot{ display:flex; flex-direction:column; gap:8px; margin-top:6px; padding-top:10px; border-top:1px solid #2B3240; }
[data-app="focus-timer"].ft-brk .ft-foot{ border-top-color:#1F4238; }
[data-app="focus-timer"] .ft-today{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:0; font-size:14px; color:#C7CCD4; }
[data-app="focus-timer"] .ft-today b{ font-size:17px; font-weight:900; color:#E7E9EC; font-variant-numeric:tabular-nums; }
[data-app="focus-timer"] .ft-sep{ color:#6B717B; }
[data-app="focus-timer"] .ft-dots{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:3px; }
[data-app="focus-timer"] .ft-dots i{ width:10px; height:10px; border-radius:50%; background:#FF8A65; }
[data-app="focus-timer"] .ft-dots span{ font-size:12px; font-weight:800; color:#FFB39C; }
[data-app="focus-timer"] .ft-set{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; }
[data-app="focus-timer"] .ft-lab{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700; color:#C7CCD4; }
[data-app="focus-timer"] .ft-lab .ndt-in{ width:70px; min-height:40px; text-align:right; padding-right:6px; }
[data-app="focus-timer"] .ft-erow{ gap:6px; }
[data-app="focus-timer"] .ft-foot .ndt-muted{ margin:0; line-height:1.55; word-break:keep-all; }
@media (max-width:560px){
  [data-app="focus-timer"] .ft-time{ font-size:50px; }
}