/* 집중 타이머: 공통 + 테마 a(파스텔) b(원목) c(네온), html.th-x / html.dark */
html{--bg:#f7f8fb;--fg:#1d2433;--muted:#667085;--card:#fff;--line:#e6e8ee;--red:#2f6a4c}
html body{background:var(--bg);color:var(--fg);transition:background .3s,color .3s}
.ft .lead{color:var(--muted)}
.themes{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:6px 0 0}
.themes button{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;font-size:14px}
.themes button.on{border-color:var(--red);box-shadow:0 0 0 2px var(--red) inset}
.sw{width:18px;height:18px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.1)}
.sw-a{background:linear-gradient(135deg,#8fb8ff,#6c7cf5)}.sw-b{background:radial-gradient(circle,#3f7d5c 0 45%,#b77d49 46%)}.sw-c{background:linear-gradient(135deg,#ff6ad5,#8a5cff,#35d0ff)}
.timer{display:flex;flex-direction:column;align-items:center;gap:18px;padding:20px 0 8px}
.device{--ds:min(86vw,400px);width:var(--ds);height:var(--ds);min-height:var(--ds);aspect-ratio:1/1;flex:0 0 auto;align-self:center;box-sizing:border-box}
#dial{width:100%;height:100%;display:block;overflow:visible;color:var(--fg)}
#dial .ta,#dial .tb,#dial .tc{display:none}
html.th-a #dial .ta,html.th-b #dial .tb,html.th-c #dial .tc{display:inline}
#time{font-size:52px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1;margin-top:10px}
#mode{color:var(--muted);font-size:14px;font-weight:500;margin-top:-8px}
.row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}
.ft button{font:inherit;font-size:15px;font-weight:600;padding:11px 20px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer;transition:transform .12s,background .2s,box-shadow .2s}
.ft button:active{transform:scale(.97)}
.ft button.primary{background:var(--red);border-color:var(--red);color:#fff;min-width:120px}
.ft button.ghost{background:transparent}
.seg{display:inline-flex;padding:4px;border-radius:999px;background:var(--card);border:1px solid var(--line)}
.ft .seg button{border:0;background:transparent;padding:8px 18px;box-shadow:none;color:var(--muted)}
.ft .seg button.on{background:var(--red);color:#fff}
.ft input[type=number]{font:inherit;width:110px;padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--fg);text-align:center}
.ft label{font-size:14px;color:var(--muted);display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.ft input[type=checkbox]{accent-color:var(--red);width:16px;height:16px}
.ft .ad-slot{background:transparent;border-color:var(--line)}
.ft article a{color:var(--red)}.ft article p,.ft article li{opacity:.9}.ft .h1{font-size:22px;margin-top:8px}
body.running .ad-slot,body.fs .ad-slot,body.fs header.site,body.fs footer.site,body.fs .content,body.fs .ft>h1,body.fs .lead,body.fs .themes{display:none}
body.fs .ft{max-width:none}body.fs .timer{min-height:100vh;justify-content:center}body.fs .device{--ds:min(70vh,86vw)}
@media(max-width:480px){#time{font-size:44px}.ft .seg button{padding:8px 13px}}
/* 다크(파스텔·원목) — 헤더/푸터도 맞춤 */
html.dark header.site,html.dark footer.site,html.th-c header.site,html.th-c footer.site{background:var(--card);border-color:var(--line)}
html.dark .logo,html.th-c .logo{color:var(--fg)}
html.th-c .darkopt{display:none}

/* A 파스텔 */
html.th-a{--bg:#f6f4fb;--fg:#2b2d42;--muted:#8a8ca3;--card:#fff;--line:#e6e3f1;--red:#6c7cf5}
html.th-a.dark{--bg:#17182b;--fg:#e8e9f7;--muted:#9496b5;--card:#22233a;--line:#30324f}
.th-a .device{border-radius:50%;padding:5%;background:radial-gradient(circle at 30% 25%,#fff,#ece9f8);box-shadow:0 30px 60px -25px rgba(108,124,245,.45),inset 0 0 0 1px rgba(108,124,245,.08)}
.th-a.dark .device{background:radial-gradient(circle at 30% 25%,#2a2c48,#1d1e33)}
.th-a .faceplate{fill:transparent;stroke:none}.th-a .hole{fill:#f8f7fd}.th-a.dark .hole{fill:#23243c}
.th-a #face line{opacity:.35}.th-a #face text{font-size:3.6px;fill:var(--muted);font-weight:500}
.th-a #disc{fill:url(#ga)}
.th-a .ft button.primary{box-shadow:0 8px 18px -6px rgba(108,124,245,.6)}

/* B 원목 */
html.th-b{--bg:#efe7db;--fg:#3a2a1c;--muted:#8b7560;--card:#fbf6ee;--line:#e0d3c0;--red:#2f6a4c}
html.th-b.dark{--bg:#1d1813;--fg:#efe3d1;--muted:#a8927a;--card:#2a221a;--line:#3a3026}
.th-b .device{border-radius:50%;padding:7%;background:repeating-radial-gradient(circle at 48% 52%,#a8703f 0 3px,#b77d49 3px 7px,#9c6537 7px 9px);box-shadow:0 30px 50px -20px rgba(70,40,15,.55),inset 0 3px 6px rgba(255,220,180,.4),inset 0 -6px 12px rgba(60,30,10,.4)}
.th-b .faceplate{fill:url(#wd);stroke:#7a4d26;stroke-width:1.2}
.th-b #dial{color:#4a3320}.th-b #face text{font-family:Georgia,serif;font-weight:700}
.th-b #disc{fill:url(#gb)}
.th-b .ft button{border-radius:12px}.th-b .seg{border-radius:14px}.th-b .ft .seg button{border-radius:10px}
.th-b .ft button.primary{box-shadow:0 6px 0 #1f4a35,0 10px 20px -8px rgba(0,0,0,.4)}.th-b .ft button.primary:active{transform:translateY(3px);box-shadow:0 3px 0 #1f4a35}

/* C 네온 (항상 어두움) */
html.th-c{--bg:#0b0b1a;--fg:#f1f0ff;--muted:#9a98c4;--card:rgba(255,255,255,.06);--line:rgba(255,255,255,.12);--red:#8a5cff}
html.th-c body{background:radial-gradient(1200px 600px at 20% -10%,#3b1d6e,transparent),radial-gradient(900px 500px at 100% 30%,#0e4a6b,transparent),#0b0b1a;background-attachment:fixed}
html.th-c header.site,html.th-c footer.site{background:rgba(11,11,26,.85)}
.th-c .device{border-radius:32%;padding:7%;background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.03));backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.18);box-shadow:0 40px 80px -30px rgba(138,92,255,.6)}
.th-c .faceplate{fill:rgba(10,10,30,.55);stroke:rgba(255,255,255,.12)}.th-c #dial{color:#e6e4ff}.th-c #face text{font-weight:500;opacity:.8}
.th-c #disc{fill:url(#gc);opacity:.92;filter:url(#glow)}
.th-c .ft button.primary{background:linear-gradient(90deg,#ff6ad5,#8a5cff,#35d0ff);border:0;box-shadow:0 10px 30px -8px rgba(138,92,255,.8)}
.th-c .ft .seg button.on{background:rgba(255,255,255,.9);color:#140f2e}

.ft button.small{padding:6px 12px;font-size:13px}.ft .note{margin:-8px 0 0;font-size:12px;color:var(--muted);text-align:center}