:root {
  --bg: #ffffff;
  --surface: #f6f8fb;
  --panel: #ffffff;
  --panel-2: #f9fbfd;
  --text: #1f2937;
  --muted: #64748b;
  --line: #dbe3ee;
  --primary: #009485;
  --primary-strong: #00796f;
  --primary-soft: #e2f5f2;
  --accent: #ff8a3d;
  --code: #edf2f7;
  --shadow: 0 8px 24px rgba(15,23,42,.08);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0b1117;
  --surface: #111821;
  --panel: #151e29;
  --panel-2: #101720;
  --text: #d8dee9;
  --muted: #9aa8ba;
  --line: #263241;
  --primary: #00bfa5;
  --primary-strong: #26d6bd;
  --primary-soft: rgba(0,191,165,.14);
  --accent: #ff9d5c;
  --code: #0f1720;
  --shadow: 0 12px 34px rgba(0,0,0,.28);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family: Roboto, Pretendard, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); line-height:1.72; }
a { color: var(--primary-strong); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.site-header { position: sticky; top:0; z-index:30; min-height:56px; background: var(--primary); color:#fff; box-shadow: 0 2px 10px rgba(0,0,0,.24); }
.nav { max-width: 1220px; margin:0 auto; min-height:56px; padding:0 18px; display:flex; align-items:center; gap:12px; }
.brand { min-height:56px; display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:700; letter-spacing:-.01em; white-space:nowrap; }
.brand-mark { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); }
.nav-links { display:flex; align-items:center; gap:2px; flex-wrap:wrap; margin-left:auto; }
.nav-links a { color:rgba(255,255,255,.78); text-decoration:none; font-size:14px; line-height:1; padding:21px 10px 18px; border-bottom:3px solid transparent; }
.nav-links a:hover, .nav-links a.active { color:#fff; border-bottom-color:#fff; background:rgba(255,255,255,.08); }
.nav-tools { display:flex; align-items:center; gap:8px; }
.search { width:150px; height:34px; border:0; border-radius:4px; padding:0 10px; background:rgba(255,255,255,.16); color:#fff; outline:1px solid rgba(255,255,255,.12); }
.search::placeholder { color: rgba(255,255,255,.72); }
.search:focus { background:rgba(255,255,255,.24); outline-color:rgba(255,255,255,.45); }
.theme-toggle { width:36px; height:36px; border:0; border-radius:50%; background:transparent; color:#fff; cursor:pointer; font-size:18px; display:grid; place-items:center; }
.theme-toggle:hover { background:rgba(255,255,255,.14); }
main { max-width: 980px; margin:0 auto; padding:42px 22px 84px; }
.hero { padding:18px 0 24px; }
.eyebrow { color: var(--primary); font-weight:700; letter-spacing:.02em; font-size:14px; margin-bottom:8px; }
h1,h2,h3 { line-height:1.3; letter-spacing:-.025em; margin:0 0 14px; color:var(--text); font-weight:700; }
h1 { font-size: clamp(32px, 4.7vw, 52px); }
h2 { font-size: clamp(23px, 3vw, 31px); margin-top:44px; padding-top:12px; border-top:1px solid var(--line); }
h3 { font-size:20px; }
p { color:var(--muted); margin:0 0 15px; }
.lead { font-size: clamp(17px, 2vw, 20px); max-width:760px; color:var(--muted); }
.actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.button { display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:7px 14px; border-radius:4px; border:1px solid var(--line); background:var(--panel); color:var(--primary-strong); text-decoration:none; font-weight:700; box-shadow:0 1px 1px rgba(0,0,0,.04); }
.button.primary { background:var(--primary); border-color:var(--primary); color:#fff; }
.panel,.card,.post-card { background:var(--panel); border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow); }
.panel { padding:22px; }
.card,.post-card { padding:18px 20px; }
.card-grid,.process-grid,.status-board { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.status-board { grid-template-columns:repeat(4,minmax(0,1fr)); }
.card.clickable { display:block; color:inherit; text-decoration:none; }
.card.clickable:hover { border-color:var(--primary); transform:translateY(-1px); }
details.dashboard-item { margin:14px 0; }
details.dashboard-item>summary { cursor:pointer; list-style:none; }
details.dashboard-item>summary::-webkit-details-marker { display:none; }
details.dashboard-item>summary.card::after { content:"펼치기"; display:inline-flex; margin-top:10px; color:var(--primary-strong); font-weight:700; font-size:14px; }
details.dashboard-item[open]>summary.card::after { content:"접기"; }
.dashboard-body { margin-top:12px; padding:18px; background:var(--panel-2); border:1px solid var(--line); border-radius:6px; }
.badge { display:inline-flex; align-items:center; border-radius:999px; padding:3px 9px; color:var(--primary-strong); font-size:12px; font-weight:700; background:var(--primary-soft); margin-bottom:10px; }
.status { display:inline-flex; align-items:center; border-radius:999px; padding:3px 9px; font-size:12px; font-weight:700; margin-bottom:10px; }
.status.active { color:#00695c; background:#b2dfdb; }
.status.waiting { color:#8a4b00; background:#ffe0b2; }
.status.done { color:#1b5e20; background:#c8e6c9; }
.status.blocked { color:#b71c1c; background:#ffcdd2; }
.status.frozen { color:#455a64; background:#cfd8dc; }
:root[data-theme="dark"] .status.active { color:#80fff0; background:rgba(0,150,136,.24); }
:root[data-theme="dark"] .status.waiting { color:#ffd29b; background:rgba(255,138,61,.18); }
:root[data-theme="dark"] .status.done { color:#b9f6ca; background:rgba(46,125,50,.26); }
:root[data-theme="dark"] .status.frozen { color:#cfd8dc; background:rgba(96,125,139,.28); }
.meta { color:var(--muted); font-size:14px; margin-top:10px; }
.timeline { display:grid; gap:14px; }
.timeline-item { display:grid; grid-template-columns:128px minmax(0,1fr); gap:18px; padding:18px; border:1px solid var(--line); border-radius:6px; background:var(--panel); box-shadow:var(--shadow); }
.day { color:var(--accent); font-weight:700; }
ul.clean, ol { color:var(--muted); padding-left:22px; }
.callout { border-left:4px solid var(--primary); padding:16px 18px; background:var(--primary-soft); border-radius:4px; color:var(--text); }
.footer { border-top:1px solid var(--line); background:var(--surface); color:var(--muted); padding:28px 22px; text-align:center; }
code, pre { font-family:"Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
code { background:var(--code); border:1px solid var(--line); border-radius:4px; padding:2px 6px; color:var(--text); overflow-wrap:anywhere; }
pre { background:var(--code); border:1px solid var(--line); border-radius:6px; padding:14px 16px; overflow:auto; color:var(--text); }
.table-like { display:grid; gap:0; }
.table-row { display:grid; grid-template-columns:150px minmax(0,1fr); gap:14px; padding:12px 0; border-bottom:1px solid var(--line); }
.table-like.compact .table-row { grid-template-columns:120px minmax(0,1fr); padding:9px 0; }
.table-row strong { color:var(--text); }
.post-list { display:grid; gap:18px; }
.post-card { margin:0; }
.post-card h3 { font-size:24px; }
.post-card section { margin-top:18px; }
.post-card h4 { margin:18px 0 8px; color:var(--text); font-size:16px; }
.lesson-box { background:var(--panel-2); border:1px solid var(--line); border-radius:6px; padding:14px; margin-top:10px; }
.quote { font-weight:700; color:var(--text); border-left:3px solid var(--accent); padding-left:12px; }
[hidden] { display:none !important; }
@media (max-width:980px){ .nav{align-items:flex-start; flex-direction:column; padding:8px 18px 12px;} .brand{min-height:38px;} .nav-links{margin-left:0;} .nav-links a{padding:9px 8px 7px;} .status-board{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:760px){ .card-grid,.process-grid,.status-board{grid-template-columns:1fr;} .timeline-item,.table-row,.table-like.compact .table-row{grid-template-columns:1fr;} .nav-tools{width:100%;}.search{flex:1;width:auto;} }

.worklog-list { display:grid; gap:10px; }
.worklog-link { display:grid; gap:3px; padding:16px 18px; border:1px solid var(--line); border-radius:6px; background:var(--panel); text-decoration:none; box-shadow:var(--shadow); }
.worklog-link span { color:var(--accent); font-weight:700; font-size:14px; }
.worklog-link strong { color:var(--text); font-size:18px; }
.worklog-link em { color:var(--muted); font-style:normal; }
.worklog-link:hover { border-color:var(--primary); transform:translateY(-1px); }

.problem-details { margin: 24px 0; }
.problem-details > summary { cursor: pointer; color: var(--text); }
.problem-details h3 { margin-top: 20px; font-size: 18px; }
.problem-details section { margin-top: 14px; }