/* 서부청기와 — 밝은 바탕 · 짙은 남색 테마
   변수 이름은 그대로 두고 값만 바꿨습니다. (기존 화면이 그대로 따라옵니다) */
:root{
  /* 바탕 — 아주 연한 회색 */
  --bg:#F1F3F7; --panel:#FFFFFF; --panel-2:#F7F9FC; --raise:#EDF1F7;
  --line:#E0E5EE; --line-2:#C8D2E0;

  /* 글자 — 짙은 남색 계열 */
  --ink:#152744; --ink-2:#3B4D6B; --mut:#6C7C96; --faint:#9AA7BC;

  /* 브랜드 짙은 남색 (기존 --jade 자리) */
  --jade:#1C3A66; --jade-dim:#E7EDF7; --jade-2:#2A5290;

  --crit:#C0392B; --crit-dim:#FBEAE8;
  --warn:#A96A00; --warn-dim:#FDF2DF;
  --ok:#1D7A4A;   --ok-dim:#E6F3EC;
  --info:#12559F; --info-dim:#E7EFFA;
  --proj:#563C9E; --proj-dim:#EEEAFA;

  --r:11px;
  --sh:0 1px 2px rgba(21,39,68,.06), 0 1px 3px rgba(21,39,68,.04);
  --sh-2:0 4px 14px rgba(21,39,68,.10);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
.n{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.wrap{max-width:660px;margin:0 auto;padding:0 16px 90px}
.wide{max-width:1600px}

/* 상단 */
.top{display:flex;align-items:center;gap:11px;padding:16px 0 12px;flex-wrap:wrap}
.me{font-size:19px;font-weight:800;letter-spacing:-.025em;color:var(--jade)}
.me span{font-size:12.5px;font-weight:600;color:var(--faint);margin-left:8px}
.spacer{margin-left:auto}
.day{font-size:12.5px;color:var(--mut)}

/* 버튼 */
button{font:inherit}
.btn{appearance:none;font-size:13.5px;font-weight:700;cursor:pointer;min-height:46px;
  background:var(--panel);border:1px solid var(--line-2);color:var(--ink-2);
  border-radius:9px;padding:0 15px;box-shadow:var(--sh)}
.btn:hover{background:var(--jade-dim);border-color:var(--jade);color:var(--jade)}
.btn:focus-visible{outline:3px solid var(--jade);outline-offset:2px}
.btn.on{background:var(--jade);border-color:var(--jade);color:#fff}
.big{appearance:none;font-size:16px;font-weight:800;cursor:pointer;width:100%;min-height:56px;
  border:none;border-radius:10px;color:#fff;background:var(--jade);box-shadow:var(--sh-2)}
.big:hover{background:var(--jade-2)}
.big:disabled{opacity:.45;cursor:default}
.big.warn{background:var(--warn)} .big.info{background:var(--info)}

/* 시간대 박스 */
.now{border-radius:var(--r);padding:17px 19px;margin-bottom:14px;border:1px solid;box-shadow:var(--sh)}
.now.reg{background:var(--warn-dim);border-color:var(--warn)}
.now.work{background:var(--jade-dim);border-color:var(--jade)}
.now.cls{background:var(--info-dim);border-color:var(--info)}
.now .nt{font-size:18.5px;font-weight:800;letter-spacing:-.02em;line-height:1.35}
.now.reg .nt{color:var(--warn)} .now.work .nt{color:var(--jade)} .now.cls .nt{color:var(--info)}
.now .ns{font-size:13.5px;color:var(--ink-2);margin-top:6px;line-height:1.6}
.now .big{margin-top:13px}

/* 릴레이 */
.relay{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--jade);
  border-radius:0 var(--r) var(--r) 0;padding:13px 16px;margin-bottom:14px;box-shadow:var(--sh)}
.relay .rl{font-size:10.5px;letter-spacing:.12em;font-weight:800;color:var(--jade);margin-bottom:7px}
.relay ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.relay li{font-size:13.5px;color:var(--ink-2);display:grid;grid-template-columns:auto 1fr;gap:9px}
.relay li b{color:var(--warn);font-weight:800;font-size:11.5px;white-space:nowrap}

/* 탭 */
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:12px}
.tabs button{appearance:none;font-size:13.5px;font-weight:700;cursor:pointer;min-height:52px;
  background:var(--panel);border:1px solid var(--line);color:var(--mut);border-radius:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:var(--sh)}
.tabs button em{font-style:normal;font-size:17px;font-weight:800;letter-spacing:-.03em}
.tabs button[aria-pressed="true"]{background:var(--jade);border-color:var(--jade);color:#fff}
.tabs button[aria-pressed="true"].p{background:var(--proj);border-color:var(--proj);color:#fff}

h2{font-size:11.5px;letter-spacing:.14em;font-weight:800;color:var(--mut);margin:20px 0 9px;
  display:flex;align-items:center;gap:9px}
h2 .c{background:var(--raise);border-radius:20px;padding:2px 9px;font-size:11px;color:var(--ink-2)}

/* 카드 */
.list{display:grid;gap:8px}
.card{width:100%;appearance:none;text-align:left;color:inherit;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
  padding:15px 16px;display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;min-height:76px}
.card:hover{border-color:var(--line-2);box-shadow:var(--sh-2)}
.card:focus-visible{outline:3px solid var(--jade);outline-offset:2px}
.card.crit{border-color:var(--crit)} .card.warn{border-color:var(--warn)}
.card.proj{border-color:var(--proj)} .card.done{opacity:.55}
.sig{width:11px;height:11px;border-radius:50%;margin-top:6px;flex:none;background:var(--faint)}
.card.crit .sig{background:var(--crit);box-shadow:0 0 0 5px var(--crit-dim)}
.card.warn .sig{background:var(--warn);box-shadow:0 0 0 5px var(--warn-dim)}
.card.proj .sig{background:var(--proj);box-shadow:0 0 0 5px var(--proj-dim)}
.card.done .sig{background:var(--ok)}
.ct{font-size:15.5px;font-weight:700;letter-spacing:-.015em;line-height:1.4}
.card.done .ct{text-decoration:line-through;color:var(--mut)}
.cm{font-size:12.5px;color:var(--mut);margin-top:5px;display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.cm b{color:var(--ink-2);font-weight:600}
.chip{font-size:11px;font-weight:800;padding:2px 8px;border-radius:20px}
.chip.crit{background:var(--crit);color:#fff}
.chip.warn{background:var(--warn-dim);color:var(--warn)}
.chip.ok{background:var(--ok-dim);color:var(--ok)}
.chip.info{background:var(--info-dim);color:var(--info)}
.chip.proj{background:var(--proj-dim);color:var(--proj)}
.chip.relay{background:var(--jade-dim);color:var(--jade)}
.empty{background:var(--panel);border:1px dashed var(--line-2);border-radius:var(--r);
  padding:26px;text-align:center;font-size:14px;color:var(--mut)}

/* 시트 */
.scrim{position:fixed;inset:0;background:rgba(21,39,68,.38);opacity:0;pointer-events:none;
  transition:.18s;z-index:60;backdrop-filter:blur(2px)}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--panel);
  border-top:1px solid var(--line);border-radius:16px 16px 0 0;box-shadow:0 -14px 46px rgba(21,39,68,.18);
  transform:translateY(101%);transition:transform .25s cubic-bezier(.32,.72,0,1);max-height:92vh;overflow-y:auto}
.sheet.on{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.sheet,.scrim{transition:none}}
.sin{max-width:660px;margin:0 auto;padding:6px 16px 36px}
.grab{width:36px;height:4px;border-radius:4px;background:var(--line-2);margin:9px auto 14px}
.qh{display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--line);padding-bottom:13px;margin-bottom:15px}
.qh h3{margin:0;font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--jade)}
.qh .sub{font-size:12px;color:var(--faint);display:block;margin-top:3px;font-weight:600}
.qx{appearance:none;background:var(--raise);border:1px solid var(--line-2);color:var(--ink-2);
  width:40px;height:40px;border-radius:10px;font-size:17px;cursor:pointer;margin-left:auto;flex:none}
.qx:hover{background:var(--crit-dim);border-color:var(--crit);color:var(--crit)}
.prog{display:flex;gap:4px;margin-bottom:17px}
.prog i{height:4px;flex:1;border-radius:2px;background:var(--line)}
.prog i.on{background:var(--jade)}
.q{font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.45;margin-bottom:6px}
.qs{font-size:13px;color:var(--mut);margin-bottom:15px;line-height:1.6}
.opts{display:grid;gap:8px}
.opt{appearance:none;font-size:15.5px;font-weight:700;cursor:pointer;text-align:left;
  background:var(--panel);border:1px solid var(--line-2);color:var(--ink-2);
  border-radius:11px;padding:15px 17px;min-height:56px;box-shadow:var(--sh)}
.opt:hover{background:var(--jade-dim);border-color:var(--jade);color:var(--jade)}
.opt:focus-visible{outline:3px solid var(--jade);outline-offset:2px}
.opt.ok{background:var(--jade);border-color:var(--jade);color:#fff}
.opt.warn{border-color:var(--warn);color:var(--warn)}
.opt.crit{border-color:var(--crit);color:var(--crit)}
.opt.etc{border-style:dashed;border-color:var(--warn);color:var(--warn)}
.opts.two{grid-template-columns:1fr 1fr}
.opts.three{grid-template-columns:1fr 1fr 1fr}
.opts.two .opt,.opts.three .opt{text-align:center;padding:15px 8px}
.opts.scroll{max-height:46vh;overflow-y:auto;border:1px solid var(--line);
  border-radius:12px;background:var(--panel-2);padding:3px}
.scount{font-size:12px;color:var(--faint);margin:-8px 0 9px}
.scount b{color:var(--ink-2);font-weight:700}

/* 입력 */
.field{display:grid;gap:9px;margin-bottom:13px}
input,textarea,select{font:inherit;font-size:16px;padding:15px;border-radius:10px;
  border:1px solid var(--line-2);background:var(--panel);color:var(--ink);width:100%}
input:focus,textarea:focus{outline:2px solid var(--jade);outline-offset:-1px;background:#fff}
input::placeholder{color:var(--faint)}

/* 시간 격자 */
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;touch-action:none;user-select:none;margin-bottom:13px}
.tc{background:var(--panel);border:1px solid var(--line-2);border-radius:8px;min-height:46px;
  display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:700;color:var(--mut);cursor:pointer}
.tc.sel{background:var(--jade);border-color:var(--jade);color:#fff;font-weight:800}
.tc.past{opacity:.45}
.tg-head{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.tg-pick{font-size:19px;font-weight:800;color:var(--jade)}
.tg-pick.none{color:var(--faint);font-size:14px;font-weight:600}

/* 증빙 */
.att{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.att button{appearance:none;font-size:14.5px;font-weight:700;cursor:pointer;min-height:72px;
  background:var(--panel-2);border:1px dashed var(--line-2);color:var(--ink-2);border-radius:11px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.att button:hover{border-color:var(--jade);color:var(--jade);border-style:solid;background:var(--jade-dim)}
.att em{font-style:normal;font-size:21px}
.af{background:var(--jade-dim);border:1px solid var(--jade);border-radius:9px;padding:10px 13px;
  font-size:13px;color:var(--jade);font-weight:700;margin-bottom:6px}
.warnbox{background:var(--crit-dim);border:1px solid var(--crit);border-radius:10px;
  padding:12px 15px;font-size:13px;color:var(--ink-2);line-height:1.6;margin-bottom:13px}
.warnbox b{color:var(--crit)}
.okbox{background:var(--ok-dim);border:1px solid var(--ok);border-radius:11px;padding:18px 20px;text-align:center}
.okbox .dt{font-size:18px;font-weight:800;color:var(--ok)}
.okbox .ds{font-size:13.5px;color:var(--ink-2);margin-top:7px;line-height:1.65}

/* 토스트 */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);z-index:90;
  background:var(--jade);border:1px solid var(--jade);color:#fff;font-weight:700;font-size:14px;
  padding:14px 22px;border-radius:10px;opacity:0;pointer-events:none;transition:.2s;
  max-width:calc(100vw - 32px);text-align:center;box-shadow:var(--sh-2)}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.bad{background:var(--crit);border-color:var(--crit)}

/* 로그인 */
.login{max-width:400px;margin:12vh auto;padding:0 20px}
.login h1{font-size:26px;font-weight:800;letter-spacing:-.03em;margin:0 0 6px;color:var(--jade)}
.login p{font-size:13.5px;color:var(--mut);margin:0 0 22px;line-height:1.6}
.foot{margin-top:24px;padding-top:14px;border-top:1px solid var(--line);
  font-size:12px;color:var(--mut);line-height:1.7}
.foot b{color:var(--ink-2);font-weight:700}