/* 임용 준비 사이트 공통 스타일
   매일 여는 도구다. 화려할 필요 없고, 숫자가 잘 읽히고 밤에 눈이 안 아프면 된다.
   중립색은 살짝 푸른 쪽으로 기울여 두었다 — 순회색은 고른 느낌이 안 난다. */

:root{
  --bg:#f4f6f8; --panel:#fff; --panel2:#eaeef1;
  --ink:#12181e; --ink2:#4a5661; --ink3:#7b8894;
  --rule:#d3dae0; --rule2:#e3e9ed;
  --accent:#1f4ed8;          /* 진도·강조 */
  --good:#0f7a52; --warn:#a8620d; --bad:#a52020;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Malgun Gothic","Noto Sans KR",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0d1116; --panel:#151c23; --panel2:#1c252e;
    --ink:#e6edf3; --ink2:#a3b0bc; --ink3:#6e7d8a;
    --rule:#28323c; --rule2:#1e2831;
    --accent:#6f9bff; --good:#3fbf8a; --warn:#e0a34a; --bad:#e07070;
  }
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100% }
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{ color:inherit }

.wrap{ max-width:980px; margin:0 auto; padding:0 18px 64px }
.narrow{ max-width:720px }

/* ── 머리 ── */
.nav{ display:flex; align-items:center; gap:16px; padding:14px 0; margin-bottom:8px;
      border-bottom:1px solid var(--rule); font-size:13.5px; flex-wrap:wrap }
.nav a{ color:var(--ink2); text-decoration:none; padding:3px 0; border-bottom:2px solid transparent }
.nav a:hover{ color:var(--ink) }
.nav a[aria-current]{ color:var(--ink); border-bottom-color:var(--accent); font-weight:700 }
.nav .brand{ font-weight:800; color:var(--ink); letter-spacing:-.02em; margin-right:4px }
.nav .sp{ flex:1 }
.nav .stat{ font-family:var(--mono); font-size:12px; color:var(--ink3) }

/* ── 남은 날짜 ── */
.dday{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
       padding:22px 0 18px; border-bottom:1px solid var(--rule) }
.dday .n{ font-family:var(--mono); font-size:clamp(38px,8vw,64px); font-weight:800;
          letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums }
.dday .u{ font-size:17px; font-weight:700; color:var(--ink2) }
.dday .when{ font-size:13.5px; color:var(--ink3); font-family:var(--mono) }
.dday .sp{ flex:1 }
.dday .hrs{ text-align:right; font-family:var(--mono); font-size:13px; color:var(--ink3);
            line-height:1.7 }
.dday .hrs b{ color:var(--ink2); font-size:15px }

/* ── 구역 ── */
section{ margin-top:34px }
.shead{ display:flex; align-items:baseline; gap:10px; margin-bottom:14px }
.shead h2{ font-size:17px; font-weight:800; letter-spacing:-.02em }
.shead .note{ font-size:12.5px; color:var(--ink3) }
.shead .sp{ flex:1 }

/* ── 오늘 할 것 ── */
.today{ display:grid; gap:10px }
.task{ display:flex; align-items:flex-start; gap:12px; background:var(--panel);
       border:1px solid var(--rule); border-radius:6px; padding:14px 16px }
.task .tick{ appearance:none; width:20px; height:20px; flex:none; margin-top:2px;
             border:2px solid var(--rule); border-radius:4px; cursor:pointer;
             background:transparent; transition:background .12s,border-color .12s }
.task .tick:checked{ background:var(--accent); border-color:var(--accent) }
.task .tick:checked::after{ content:"✓"; display:block; color:#fff; font-size:13px;
                            font-weight:800; text-align:center; line-height:16px }
.task .tick:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.task .body{ flex:1; min-width:0 }
.task .t{ font-weight:700; letter-spacing:-.01em }
.task .d{ font-size:13px; color:var(--ink2); margin-top:2px }
.task .go{ font-family:var(--mono); font-size:12px; color:var(--accent);
           text-decoration:none; white-space:nowrap; flex:none; align-self:center }
.task.done .t,.task.done .d{ color:var(--ink3); text-decoration:line-through }

/* ── 영역 진도 막대 ── */
.areas{ border:1px solid var(--rule); border-radius:6px; overflow:hidden; background:var(--panel) }
.area{ display:grid; grid-template-columns:104px 1fr 74px; gap:12px; align-items:center;
       padding:9px 14px; border-top:1px solid var(--rule2); font-size:13.5px }
.area:first-child{ border-top:0 }
.area .k{ font-weight:700; letter-spacing:-.01em; white-space:nowrap;
          overflow:hidden; text-overflow:ellipsis }
.area .bar{ height:8px; background:var(--panel2); border-radius:99px; overflow:hidden }
.area .bar i{ display:block; height:100%; background:var(--accent); border-radius:99px }
.area .v{ font-family:var(--mono); font-size:12px; color:var(--ink3); text-align:right;
          font-variant-numeric:tabular-nums }
.area.weak .k{ color:var(--warn) }
.area.weak .bar i{ background:var(--warn) }

/* ── 카드 격자 ── */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px }
.card{ display:block; background:var(--panel); border:1px solid var(--rule); border-radius:6px;
       padding:14px 16px; text-decoration:none; transition:border-color .12s,transform .12s }
.card:hover{ border-color:var(--accent); transform:translateY(-1px) }
.card .k{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--ink3);
          text-transform:uppercase }
.card h3{ font-size:15px; font-weight:800; letter-spacing:-.02em; margin-top:5px }
.card p{ font-size:12.5px; color:var(--ink2); margin-top:5px; line-height:1.5 }
.card .prog{ margin-top:9px; height:5px; background:var(--panel2); border-radius:99px; overflow:hidden }
.card .prog i{ display:block; height:100%; background:var(--accent) }

/* ── 표 ── */
.tbl{ width:100%; border-collapse:collapse; font-size:13.5px }
.tbl th,.tbl td{ text-align:left; padding:8px 10px 8px 0; border-bottom:1px solid var(--rule2) }
.tbl thead th{ font-family:var(--mono); font-size:11px; letter-spacing:.08em;
               text-transform:uppercase; color:var(--ink3); font-weight:500;
               border-bottom:1px solid var(--rule) }
.tbl td.n{ font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right }
.scroll{ overflow-x:auto }

/* ── 알림 띠 ── */
.call{ border-left:3px solid var(--accent); background:var(--panel); padding:12px 15px;
       border-radius:0 6px 6px 0; font-size:13.5px; color:var(--ink2); line-height:1.6 }
.call b{ color:var(--ink) }
.call.warn{ border-left-color:var(--warn) }
.call.bad{ border-left-color:var(--bad) }

/* ── 단추 ── */
button.btn{ font:inherit; font-size:13px; font-weight:700; color:var(--ink);
            background:var(--panel); border:1px solid var(--rule); border-radius:5px;
            padding:6px 13px; cursor:pointer }
button.btn:hover{ border-color:var(--accent); color:var(--accent) }
button.btn.primary{ background:var(--accent); border-color:var(--accent); color:#fff }
button.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* ── 동기화 표시 ── */
#sync{ position:fixed; right:14px; bottom:14px; font-family:var(--mono); font-size:11.5px;
       padding:6px 11px; border-radius:99px; border:1px solid var(--rule);
       background:var(--panel); color:var(--ink3); display:none; z-index:50 }
#sync.on{ display:block }
#sync.bad{ color:var(--bad); border-color:var(--bad) }

.foot{ margin-top:44px; padding-top:16px; border-top:1px solid var(--rule);
       font-size:12.5px; color:var(--ink3); line-height:1.8 }
.foot code{ font-family:var(--mono); font-size:11.5px; background:var(--panel2);
            padding:1px 5px; border-radius:3px }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important } }