:root{
  --bg:#0b0f14; --card:#141a21; --text:#e8eef5; --muted:#9fb2c7; --accent:#6ea8fe; --border:#223041;
  --tab:#101923; --tab-active:#315b97; --tab-active-text:#ffffff;
  --btn:#101923; --btn-text:#e8eef5; --btn-border:#223041;
  --btn-primary:#1e365c; --btn-primary-text:#ffffff;
}
.light{
  --bg:#ffffff; --card:#ffffff; --text:#0a0a0a; --muted:#475569; --accent:#2563eb; --border:#d1d5db;
  --tab:#f3f4f6; --tab-active:#2563eb; --tab-active-text:#ffffff;
  --btn:#f8fafc; --btn-text:#0a0a0a; --btn-border:#cbd5e1;
  --btn-primary:#2563eb; --btn-primary-text:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Pretendard,'Noto Sans KR','Noto Sans',Inter,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--accent); text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:24px 16px;display:flex;flex-direction:column;gap:16px;align-items:center}
header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}
header h1{font-size:26px;font-weight:700;margin:0}
.top-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.select,.toggle{background:var(--btn);border:1px solid var(--btn-border);border-radius:999px;padding:8px 12px;cursor:pointer;font-size:14px;color:var(--btn-text)}
nav[role="tablist"]{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:100%}
.tabbtn{background:var(--tab);color:var(--text);border:1px solid var(--border);border-radius:999px;padding:8px 12px;cursor:pointer;font-size:14px}
.tabbtn.active{background:var(--tab-active);color:var(--tab-active-text);border-color:var(--tab-active)}
.tabbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ad{display:flex;align-items:center;justify-content:center;width:100%;background:#0f141a;border:1px dashed var(--border);border-radius:12px;height:90px}
.light .ad{background:#f1f5f9}
.grid{display:grid;grid-template-columns:1fr;gap:16px;width:100%}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;width:100%;box-shadow:0 6px 14px rgba(0,0,0,.06)}
.title{margin:0 0 8px;font-weight:700}
.muted{color:var(--muted);font-size:13px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
input[type="number"],input[type="text"],textarea,select{background:#0e151d;border:1px solid var(--border);border-radius:12px;color:var(--text);padding:12px;font-size:17px;min-width:0;outline:none}
.light input[type="number"],.light input[type="text"],.light textarea,.light select{background:#ffffff;border:1px solid var(--border);color:var(--text)}
input[type="number"],input[type="text"],select{width:100%;max-width:260px}
#memo-title{flex-grow:1;min-width:250px;font-size:15px}
textarea{min-height:160px;width:100%}
.btn{background:var(--btn);color:var(--btn-text);border:1px solid var(--btn-border);border-radius:12px;padding:12px 16px;font-size:17px;cursor:pointer}
.btn.primary{background:var(--btn-primary);color:var(--btn-primary-text);border-color:var(--btn-primary)}
.btn:hover{filter:brightness(0.97)} .btn.primary:hover{filter:brightness(0.95)}
.timer{font-size:72px;font-weight:800;text-align:center;margin:12px 0}
@media (min-width:1024px){.timer{font-size:112px}}
.hidden{display:none}
.file-hidden{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#cd-steppers .btn.step{padding:10px 12px;font-size:15px}