/* =============================================================
   LinuxDrill — Design System
   ============================================================= */
:root {
  --bg:           #eef1f5;
  --surface:      #ffffff;
  --surface-soft: #f7f9fb;
  --ink:          #1b2430;
  --ink-2:        #4a5667;
  --ink-3:        #7b8794;
  --line:         #e4e8ee;
  --line-2:       #d3d9e1;
  --shell:        #0f141b;
  --shell-soft:   #161d27;
  --shell-line:   #28323f;
  --accent:       #4f6ef2;
  --accent-str:   #3a55d9;
  --accent-soft:  #eef1fe;
  --green:        #1f9254;
  --green-soft:   #ecf6f0;
  --green-term:   #3ecf8e;
  --red:          #cf3f57;
  --red-soft:     #fceef1;
  --red-term:     #f2647e;
  --font-sans: "Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,sans-serif;
  --font-mono: ui-monospace,"Cascadia Code","SF Mono",Consolas,"Liberation Mono",monospace;
  --r-sm: 7px; --r-md: 11px; --r-lg: 16px;
  --sh-1: 0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
  --sh-2: 0 6px 16px -4px rgba(16,24,40,.10),0 2px 6px -2px rgba(16,24,40,.06);
  --sh-focus: 0 0 0 3px rgba(79,110,242,.18);
}

/* ---- Dark mode ---- */
[data-theme="dark"] {
  --bg:           #0d1117;
  --surface:      #161b22;
  --surface-soft: #1c2128;
  --ink:          #e6edf3;
  --ink-2:        #8b949e;
  --ink-3:        #6e7681;
  --line:         #30363d;
  --line-2:       #21262d;
  --accent-soft:  #1d2640;
  --accent-str:   #aab8f5;
}
[data-theme="dark"] .cat-card:hover { border-color:#33406a; }
[data-theme="dark"] .cat-card-icon { background:#1d2640; color:#aab8f5; }
[data-theme="dark"] .home-card-num { background:#1d2640; color:#aab8f5; }

*  { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font-sans); color:var(--ink); background:var(--bg);
  line-height:1.65; font-size:17.5px; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
code, kbd { font-family:var(--font-mono); }

/* ---- Header ---- */
.app-header {
  display:flex; align-items:center; justify-content:space-between;
  height:60px; padding:0 28px;
  background:var(--shell); border-bottom:1px solid rgba(255,255,255,.06);
  position:sticky; top:0; z-index:100;
}
.logo {
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  user-select:none; font-weight:700; font-size:1.15rem; color:#fff; text-decoration:none;
}
.logo:focus-visible { outline:none; box-shadow:var(--sh-focus); border-radius:var(--r-sm); }
.logo-mark {
  display:inline-grid; place-items:center; width:30px; height:30px;
  border-radius:7px; background:linear-gradient(140deg,var(--accent) 0%,#6d83f6 100%);
  color:#fff; font-size:.9rem;
}
.logo-linux { color:#aab8f5; }
.logo-drill { color:#fff; }

.header-right { display:flex; align-items:center; gap:12px; }
.scorebar { display:flex; gap:14px; }
.sb-item { font-size:.78rem; color:#6a8098; white-space:nowrap; }
.sb-item b { color:#aab8f5; }
.icon-btn {
  background:transparent; border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-sm); color:#8da0b8;
  padding:4px 10px; cursor:pointer; font-size:.9rem;
  transition:background .12s;
}
.icon-btn:hover { background:rgba(255,255,255,.06); }

/* ---- Layout ---- */
.layout { display:flex; min-height:calc(100vh - 60px); }

/* ---- Sidebar ---- */
.sidebar {
  width:220px; min-width:180px; flex-shrink:0;
  background:var(--shell); border-right:1px solid var(--shell-line);
  display:flex; flex-direction:column; overflow-y:auto;
}

.cat-section { padding:16px 12px 8px; }
.cat-label { font-size:.7rem; font-weight:700; letter-spacing:.08em; color:#4a5e78; text-transform:uppercase; padding:0 8px 8px; }
.cat-list { list-style:none; display:flex; flex-direction:column; gap:2px; }
.cat-item {
  display:flex; align-items:center; gap:9px;
  padding:9px 10px; border-radius:var(--r-sm); cursor:pointer; user-select:none;
  color:#8da0b8; font-size:.9rem; font-weight:500; transition:background .12s,color .12s;
}
.cat-item:hover { background:var(--shell-soft); color:#c8d6e6; }
.cat-item.active { background:#1d2a3f; color:#aab8f5; }
.cat-item .cat-icon { font-size:1rem; flex-shrink:0; }
.cat-item .cat-cnt {
  margin-left:auto; font-size:.7rem; padding:1px 6px; border-radius:99px;
  background:rgba(255,255,255,.07); color:#5a7090;
}
.cat-item.active .cat-cnt { background:rgba(79,110,242,.2); color:#7b9af5; }

.prob-section { flex:1; padding:0 12px 16px; display:none; }
.prob-section.show { display:block; }
.prob-section-title { font-size:.7rem; font-weight:700; letter-spacing:.08em; color:#4a5e78; text-transform:uppercase; padding:12px 8px 6px; }
.prob-list { list-style:none; display:flex; flex-direction:column; gap:2px; }
.prob-item {
  display:flex; align-items:center; gap:7px;
  padding:7px 10px; border-radius:var(--r-sm); cursor:pointer; user-select:none;
  color:#7a90a8; font-size:.82rem; transition:background .12s,color .12s;
}
.prob-item:hover { background:var(--shell-soft); color:#c8d6e6; }
.prob-item.active { background:#1d2a3f; color:#aab8f5; }
.prob-item .prob-num { font-size:.72rem; color:#405060; min-width:18px; }
.prob-item.cleared .prob-num::before { content:'✓'; color:var(--green-term); font-size:.75rem; }
.prob-item.cleared { color:#5a90a0; }
.prob-item.active.cleared { color:#aab8f5; }

/* ---- Home mode: light sidebar ---- */
body.is-home .sidebar {
  background:var(--bg); border-right:1px solid var(--line);
}
body.is-home .cat-label { color:var(--ink-3); }
body.is-home .cat-item { color:var(--ink-2); }
body.is-home .cat-item:hover { background:var(--surface); color:var(--ink); }
body.is-home .cat-item.active { background:var(--accent-soft); color:var(--accent-str); }
body.is-home .cat-item .cat-cnt { background:var(--line); color:var(--ink-3); }
body.is-home .cat-item.active .cat-cnt { background:var(--accent-soft); color:var(--accent); }
body.is-home .sidebar-footer { border-top-color:var(--line); }
body.is-home .sister-link { color:var(--ink-3); }
body.is-home .sister-link:hover { background:var(--surface); color:var(--ink-2); }

/* ---- Guide section (home screen) ---- */
.guide-section { margin-top:40px; }
.guide-section-title {
  font-size:.72rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:14px;
}
.guide-links { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.guide-link {
  display:flex; flex-direction:column; gap:4px;
  padding:16px 18px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  text-decoration:none; transition:border-color .15s, box-shadow .15s;
}
.guide-link:hover { border-color:var(--accent); box-shadow:var(--sh-1); }
.guide-link-title { font-size:.9rem; font-weight:600; color:var(--accent-str); }
.guide-link-desc  { font-size:.8rem; color:var(--ink-3); line-height:1.5; }

/* ---- Sister site link ---- */
.sidebar-footer { margin-top:auto; padding:12px 12px 16px; border-top:1px solid var(--shell-line); }
.sister-link {
  display:flex; align-items:center; gap:7px;
  padding:7px 10px; border-radius:var(--r-sm);
  color:#4a5e78; font-size:.78rem; font-weight:500; text-decoration:none;
  transition:background .12s, color .12s;
}
.sister-link:hover { background:var(--shell-soft); color:#8da0b8; }
.sister-icon { font-size:.85rem; }

/* ---- Main content ---- */
.content { flex:1; overflow:hidden; display:flex; flex-direction:column; }

/* ---- Home / Category landing ---- */
.cat-landing { padding:40px 40px 32px; flex:1; }

.home-hero {
  padding:26px 0 30px;
  border-bottom:1px solid var(--line);
  margin-bottom:30px;
}
.home-title {
  font-size:2rem; font-weight:700; letter-spacing:-.02em;
  color:var(--ink); margin-bottom:8px;
}
.home-subtitle { font-size:1.02rem; color:var(--ink-2); }

.cat-cards { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.cat-card {
  position:relative; display:flex; flex-direction:column; gap:9px;
  padding:22px 22px 24px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--sh-1); cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.cat-card:hover { transform:translateY(-3px); box-shadow:var(--sh-2); border-color:#c9d2f6; }
.cat-card-icon {
  display:inline-grid; place-items:center;
  width:36px; height:36px; border-radius:10px;
  background:var(--accent-soft); color:var(--accent);
  font-size:1.1rem;
}
.cat-card-title { font-size:1.08rem; font-weight:700; letter-spacing:-.01em; color:var(--ink); }
.cat-card-desc  { font-size:.9rem; line-height:1.65; color:var(--ink-2); flex:1; }
.cat-card-meta  { font-size:.78rem; color:var(--ink-3); display:flex; align-items:center; gap:8px; }
.cat-card-prog  { flex:1; height:4px; background:var(--line); border-radius:99px; overflow:hidden; }
.cat-card-prog-bar { height:100%; background:var(--accent); border-radius:99px; transition:width .3s; }
.btn-start {
  display:block; width:100%; margin-top:4px;
  padding:10px 14px;
  background:var(--surface); color:var(--accent-str);
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  font-family:var(--font-sans); font-size:.92rem; font-weight:600; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.cat-card:hover .btn-start { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ---- Drill view ---- */
.drill-view { flex:1; display:none; }
.drill-view.show { display:flex; flex-direction:column; height:calc(100vh - 60px); }
.drill-inner { flex:1; display:flex; overflow:hidden; }

/* ---- Problem panel ---- */
.problem-panel {
  width:380px; min-width:300px; flex-shrink:0;
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; overflow-y:auto;
  padding:20px;
}
.prob-tag { font-size:.72rem; color:var(--ink-3); letter-spacing:.04em; margin-bottom:4px; }
.prob-title { font-size:1.1rem; font-weight:700; margin-bottom:12px; }
.prob-prompt {
  background:var(--surface-soft); border:1px solid var(--line); border-radius:var(--r-md);
  padding:12px 14px; color:var(--ink); line-height:1.75; font-size:.9rem; margin-bottom:14px;
}
.lpic-tag { font-size:.75rem; color:var(--ink-3); margin-bottom:16px; }

.hints-wrap { margin-bottom:16px; }
.hint-btn {
  background:transparent; border:1px solid var(--line-2); border-radius:var(--r-sm);
  color:var(--accent); padding:6px 12px; font-size:.82rem; cursor:pointer; font-weight:600;
  transition:background .12s;
}
.hint-btn:hover { background:var(--accent-soft); }
.hint-box { margin-top:8px; display:flex; flex-direction:column; gap:6px; }
.hint-item {
  background:var(--surface-soft); border-left:3px solid var(--accent);
  padding:8px 12px; border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:.83rem; color:var(--ink-2); line-height:1.6;
}
.hint-item code { background:#e8eef8; padding:1px 5px; border-radius:4px; color:var(--accent-str); font-size:.9em; }

.actions { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.btn { border:none; border-radius:var(--r-sm); padding:9px 14px; font-size:.85rem; font-weight:600; cursor:pointer; transition:background .12s, opacity .12s; }
.btn-check  { background:var(--accent); color:#fff; }
.btn-check:hover  { background:var(--accent-str); }
.btn-reset  { background:transparent; color:var(--ink-3); border:1px solid var(--line); }
.btn-reset:hover  { background:var(--surface-soft); }
.btn-next   { background:var(--surface-soft); color:var(--ink-2); border:1px solid var(--line); }
.btn-next:hover   { background:var(--line); }

.verdict { display:none; padding:10px 14px; border-radius:var(--r-sm); font-weight:700; font-size:.88rem; margin-bottom:10px; }
.verdict.ok { display:block; background:var(--green-soft); color:var(--green); border:1px solid #bfe3cd; }
.verdict.ng { display:block; background:var(--red-soft); color:var(--red); border:1px solid #f2ccd5; }

.explain { display:none; font-size:.85rem; color:var(--ink-2); line-height:1.75; }
.explain.show { display:block; }
.explain code { background:var(--accent-soft); padding:1px 5px; border-radius:4px; color:var(--accent-str); }

.btn-share {
  display:inline-block; margin-top:12px;
  background:transparent; border:1px solid var(--line-2);
  border-radius:var(--r-sm); color:var(--ink-2);
  padding:6px 12px; font-size:.82rem; cursor:pointer;
  transition:background .12s, color .12s, border-color .12s;
}
.btn-share:hover { background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }

/* ---- Terminal panel ---- */
.term-panel { flex:1; background:var(--shell); display:flex; flex-direction:column; overflow:hidden; }
.term-header {
  padding:10px 16px; border-bottom:1px solid var(--shell-line);
  display:flex; align-items:center; gap:8px;
  font-size:.8rem; color:#5a7090; font-family:var(--font-mono);
}
.term-dot { width:10px; height:10px; border-radius:50%; }
.term-dot.red    { background:#f2647e; }
.term-dot.yellow { background:#f5c842; }
.term-dot.green  { background:#3ecf8e; }
.term-label { margin-left:4px; }

#term {
  flex:1; overflow:hidden;
  font-family:var(--font-mono); font-size:13.5px; line-height:1.55;
}

/* ---- Terminal widget styles ---- */
.ld-term { background:transparent; height:100%; overflow-y:auto; padding:14px 18px; cursor:text; color:#e7ecf2; }
.ld-term-output, .ld-out-block { white-space:pre-wrap; word-break:break-all; color:#e7ecf2; }
.ld-out-stderr  { color:var(--red-term); }
.ld-out-muted   { color:#5a7090; }
.ld-echo .ld-term-prompt { color:var(--green-term); }
.ld-term-prompt { color:var(--green-term); white-space:pre; }
.ld-term-inputline { display:flex; align-items:baseline; }
.ld-term-input {
  flex:1; background:transparent; border:none; outline:none;
  color:#e7ecf2; font-family:inherit; font-size:inherit; caret-color:var(--green-term);
}

/* ---- Footer ---- */
.site-footer { background:var(--shell); border-top:1px solid var(--shell-line); padding:20px 24px; }
.footer-inner { max-width:1200px; margin:0 auto; display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; }
.footer-brand { color:#fff; font-weight:600; font-size:.9rem; }
.footer-copy  { color:#405060; font-size:.8rem; }
.footer-links { display:flex; flex-wrap:wrap; gap:12px; }
.footer-links a { color:#aeb8c9; font-size:.82rem; text-decoration:none; }
.footer-links a:hover { color:#fff; }
.footer-mark  { color:var(--green-term); }

/* ---- Doc pages (privacy.html, guide/*.html) ---- */
.doc { max-width:800px; margin:0 auto; padding:48px 28px 80px; }
.doc-body {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:36px 40px;
  box-shadow:var(--sh-1);
}
.doc-body h1 { font-size:1.6rem; font-weight:700; margin-bottom:6px; }
.doc-body h2 {
  font-size:1.05rem; font-weight:700; margin:28px 0 8px;
  border-top:1px solid var(--line); padding-top:20px;
}
.doc-body p, .doc-body ul, .doc-body ol { color:var(--ink-2); line-height:1.8; margin-bottom:12px; }
.doc-body ul, .doc-body ol { padding-left:1.4em; }
.doc-body li { margin-bottom:6px; }
.doc-body a { color:var(--accent); }
.doc-body a:hover { color:var(--accent-str); }
.doc-body pre {
  background:var(--shell); color:#e7ecf2;
  border-radius:var(--r-md); padding:14px 18px; margin-bottom:14px;
  font-family:var(--font-mono); font-size:.85rem; overflow-x:auto; line-height:1.6;
}
.doc-body code {
  background:var(--accent-soft); padding:1px 5px;
  border-radius:4px; color:var(--accent-str); font-size:.9em;
}
.doc-body pre code { background:transparent; color:inherit; padding:0; font-size:inherit; }
.doc-updated { font-size:.82rem; color:var(--ink-3); margin-bottom:28px; }
.doc-back { margin-top:40px; font-size:.88rem; }
.doc-nav { margin-bottom:20px; font-size:.85rem; color:var(--ink-3); }
.doc-nav a { color:var(--accent); text-decoration:none; }
.doc-nav a:hover { color:var(--accent-str); }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .layout { flex-direction:column; min-height:auto; }
  .sidebar {
    width:100%; min-width:0; flex-shrink:0;
    flex-direction:row; overflow-x:auto; overflow-y:hidden;
    border-right:none; border-bottom:1px solid var(--shell-line);
    padding:8px 12px; position:sticky; top:60px; z-index:50;
    min-height:0;
  }
  .cat-section { padding:0; }
  .cat-label { display:none; }
  .cat-list { flex-direction:row; gap:4px; flex-wrap:nowrap; }
  .cat-item { padding:7px 12px; font-size:.82rem; white-space:nowrap; }
  .cat-item .cat-icon { display:none; }
  .prob-section { display:none !important; }
  .sidebar-footer { display:none; }
  .content { overflow:visible; }
  .drill-view.show { height:auto; min-height:calc(100vh - 60px - 48px); }
  .drill-inner { flex-direction:column; }
  .problem-panel { width:100%; min-width:0; border-right:none; border-bottom:1px solid var(--line); max-height:50vh; }
  .term-panel { min-height:280px; }
  .cat-landing { padding:24px 20px 24px; }
  .cat-cards { grid-template-columns:repeat(2, 1fr); }
  .guide-links { grid-template-columns:1fr; }
  .scorebar { display:none; }
}
@media (max-width: 600px) {
  .cat-cards { grid-template-columns:1fr; }
  .problem-panel { max-height:45vh; }
  .home-title { font-size:1.5rem; }
  .doc-body { padding:24px 20px; }
}