/* app.css — 자동화 설비(시퀀스 제어) 원격학습 플랫폼 공용 테마 */
:root {
  --navy: #13213f;
  --navy-2: #1b2f57;
  --blue: #5b86c5;
  --blue-soft: #e8eefb;
  --ink: #15202e;
  --muted: #5c6b7a;
  --line: #d9e1ec;
  --bg: #f4f7fb;
  --surface: #ffffff;
  --grid: rgba(91,134,197,.14);
  --good: #166b45; --good-bg:#e4f5ec;
  --warn: #9a5b00; --warn-bg:#fdf1de;
  --bad: #b42318; --bad-bg:#fbe8e6;
  --shadow: 0 10px 30px rgba(19,33,63,.08);
  --radius: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --navy:#0e1830; --navy-2:#162744; --blue:#7fa3da; --blue-soft:#19253f;
    --ink:#e8edf6; --muted:#9fb0c6; --line:#293a56; --bg:#0b1324; --surface:#121c33;
    --grid: rgba(127,163,218,.10);
    --good:#5fd79b; --good-bg:#103527; --warn:#f0b64d; --warn-bg:#3a2a0c; --bad:#ff8a80; --bad-bg:#3a1512;
    --shadow: 0 10px 30px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"] {
  --navy:#0e1830; --navy-2:#162744; --blue:#7fa3da; --blue-soft:#19253f;
  --ink:#e8edf6; --muted:#9fb0c6; --line:#293a56; --bg:#0b1324; --surface:#121c33;
  --grid: rgba(127,163,218,.10);
  --good:#5fd79b; --good-bg:#103527; --warn:#f0b64d; --warn-bg:#3a2a0c; --bad:#ff8a80; --bad-bg:#3a1512;
  --shadow: 0 10px 30px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }
html, body { margin:0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'IBM Plex Sans KR', -apple-system, 'Noto Sans KR', sans-serif;
  word-break: keep-all;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px;
}
code, .mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
a { color: var(--blue); text-decoration: none; }
h1,h2,h3,h4 { text-wrap: balance; margin: 0; }
img { max-width:100%; }

.topbar {
  background: var(--navy);
  color: #fff;
  padding: 14px 20px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  box-shadow: var(--shadow);
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
}
.topbar .brand { font-weight: 700; font-size: 16px; letter-spacing: .2px; }
.topbar .sp { flex: 1; }
.unit-pill {
  padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.08); color: #d7e2f6; font-size: 13px;
  border: 1px solid rgba(255,255,255,.14);
}
.unit-pill.on { background: var(--blue); color: #0e1830; font-weight: 700; border-color: transparent; }
.topbar .me { font-size: 13px; color: #c9d6ee; }
.topbar button.ghost {
  background: transparent; border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 8px; padding: 6px 12px; cursor:pointer; font-size:13px;
}
.topbar button.ghost:hover { background: rgba(255,255,255,.1); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 24px 16px calc(60px + env(safe-area-inset-bottom, 0px)); }
.wrap.narrow { max-width: 880px; }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px;
}
.hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #fff; border-radius: 18px; padding: 28px 24px; margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.hero .eyebrow { font-size: 13px; color: #a9c0ea; letter-spacing: .4px; margin-bottom: 6px; }
.hero h1 { font-size: clamp(22px, 4vw, 30px); }
.hero p { color: #cfdcf2; margin-top: 8px; font-size: 14px; line-height: 1.6; }

.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; } }

.unit-card { cursor:pointer; transition: transform .15s, box-shadow .15s; }
.unit-card:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(19,33,63,.14); }
.unit-card .tag { display:inline-block; font-size:12px; color: var(--blue); background: var(--blue-soft); padding:3px 10px; border-radius:999px; margin-bottom:8px; font-weight:600; }
.unit-card h3 { font-size: 18px; margin-bottom: 6px; }
.unit-card .meta { color: var(--muted); font-size: 13px; margin-top: 4px; }

.progress-bar { height: 8px; background: var(--blue-soft); border-radius: 999px; overflow:hidden; margin-top:10px; }
.progress-bar > span { display:block; height:100%; background: var(--blue); border-radius: 999px; transition: width .4s; }

.lesson-list { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; }
.lesson-row { display:flex; align-items:center; gap:10px; padding: 8px 0; font-size: 13px; }
.lesson-row .n { width: 26px; height:26px; border-radius:50%; background:var(--blue-soft); color:var(--navy); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; flex-shrink:0; }
.lesson-row a { color: var(--ink); font-weight:600; }
.lesson-row .links { display:flex; gap:8px; margin-left:auto; }
.lesson-row .links a { font-size:12px; padding:4px 9px; border-radius:7px; background: var(--blue-soft); color: var(--navy); }

.tree-branch { margin-bottom: 18px; }
.tree-branch > summary { cursor:pointer; font-weight:700; font-size:16px; padding:12px 14px; background: var(--blue-soft); border-radius:10px; list-style:none; display:flex; align-items:center; gap:8px; }
.tree-branch > summary::-webkit-details-marker { display:none; }
.tree-branch > summary::before { content:'▸'; color: var(--blue); transition: transform .15s; }
.tree-branch[open] > summary::before { transform: rotate(90deg); }
.tree-sub { margin: 10px 0 10px 14px; border-left: 2px solid var(--line); padding-left: 14px; }
.tree-sub > summary { cursor:pointer; font-weight:600; font-size:14px; padding:8px 0; list-style:none; color: var(--navy); }
.tree-sub > summary::-webkit-details-marker { display:none; }
.tree-sub > summary::before { content:'· '; color: var(--blue); }

.concept-card { border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 12px; background: var(--surface); }
.concept-card.done { border-color: var(--good); background: var(--good-bg); }
.concept-card h4 { font-size: 15px; display:flex; align-items:center; gap:8px; }
.concept-card .min { font-size:11px; background: var(--blue-soft); color: var(--navy); padding:2px 8px; border-radius:999px; font-weight:700; }
.concept-card .done-badge { font-size:11px; background: var(--good); color:#fff; padding:2px 8px; border-radius:999px; font-weight:700; }
.concept-card .summary { margin-top:8px; font-size:14px; line-height:1.7; color: var(--ink); }
.concept-card ul.points { margin: 8px 0 0 0; padding-left: 20px; font-size: 13.5px; line-height:1.7; color: var(--muted); }
.concept-card .page-tag { font-size:11px; color: var(--muted); margin-top:6px; }
.concept-card .figure-box { margin-top:10px; border:1px dashed var(--line); border-radius:10px; padding:10px; background: var(--blue-soft); }
.concept-card .ox-row { margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); }
.concept-card .ox-item { display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:13.5px; }
.concept-card .ox-btn { width:30px; height:30px; border-radius:8px; border:1px solid var(--line); background:#fff; cursor:pointer; font-weight:700; }
.concept-card .ox-btn.o.sel { background: var(--good); color:#fff; border-color: transparent; }
.concept-card .ox-btn.x.sel { background: var(--bad); color:#fff; border-color: transparent; }
.concept-card .think { margin-top:10px; font-size:13px; color: var(--navy); background: var(--blue-soft); padding:8px 10px; border-radius:8px; }
.concept-card .check-box { margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); }
.concept-card .check-choice { display:block; width:100%; text-align:left; padding:8px 10px; border-radius:8px; border:1px solid var(--line); background:#fff; margin-bottom:6px; cursor:pointer; font-size:13.5px; }
.concept-card .check-choice:hover { border-color: var(--blue); }
.concept-card .check-choice.correct { background: var(--good-bg); border-color: var(--good); }
.concept-card .check-choice.wrong { background: var(--bad-bg); border-color: var(--bad); }
.concept-card .related-task { margin-top:10px; font-size:12.5px; }

.btn { display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:9px; border:none; background: var(--navy); color:#fff; font-weight:600; cursor:pointer; font-size:13.5px; }
.btn.sm { padding:6px 12px; font-size:12.5px; }
.btn.ghost { background:#fff; color: var(--navy); border:1px solid var(--line); }
.btn.blue { background: var(--blue); color:#0e1830; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn.block { width:100%; justify-content:center; }

.menu-btn { position: fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:40; border-radius:999px; box-shadow: var(--shadow); }

input, textarea, select {
  font-family: inherit; font-size: 14px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); width: 100%;
}
textarea { resize: vertical; min-height: 70px; }
label.field-label { display:block; font-size: 12.5px; font-weight:600; color: var(--muted); margin-bottom:4px; }

table.etable { width:100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; overflow-x:auto; display:block; }
table.etable thead { background: var(--blue-soft); }
table.etable th, table.etable td { border: 1px solid var(--line); padding: 6px 8px; text-align:center; }
table.etable input, table.etable select { padding: 4px 6px; font-size: 13px; }

.sec-card { border:1px solid var(--line); border-radius: 12px; padding:18px; margin-bottom:16px; background: var(--surface); }
.sec-card .sec-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.sec-card .sec-head h3 { font-size:15px; }
.sec-card .sec-min { font-size:11px; background: var(--blue-soft); color: var(--navy); padding:2px 8px; border-radius:999px; font-weight:700; }
.sec-card .sec-desc { font-size:13px; color: var(--muted); margin-bottom:10px; line-height:1.6; }
.sec-card .textbook-note { font-size:12px; color: var(--warn); background: var(--warn-bg); padding:6px 10px; border-radius:8px; margin-bottom:10px; }
.sec-card .inquiry-box { background: var(--blue-soft); border-radius:10px; padding:10px 12px; margin-bottom:12px; font-size:13.5px; }
.sec-card .concept-chip { display:inline-block; font-size:11.5px; background: var(--navy); color:#fff; padding:3px 10px; border-radius:999px; margin-top:6px; }
.sec-card .field-row { margin-bottom:12px; }
.sec-card .review-chip { display:inline-block; font-size:11.5px; background: var(--bad-bg); color: var(--bad); padding:3px 10px; border-radius:999px; margin-top:4px; cursor:pointer; }

.side-nav { position: sticky; top: 90px; }
.side-nav .snav-item { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:9px; font-size:13px; margin-bottom:4px; color:var(--ink); }
.side-nav .snav-item.active { background: var(--blue-soft); font-weight:700; color: var(--navy); }
.ring { width:26px; height:26px; border-radius:50%; position:relative; flex-shrink:0; }
.ring svg { transform: rotate(-90deg); }
.ring circle { fill:none; stroke-width:3; }

.quiz-item { border:1px solid var(--line); border-radius:10px; padding:14px; margin-bottom:12px; }
.quiz-item .q { font-weight:600; margin-bottom:10px; font-size:14px; }
.quiz-item label.opt { display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:8px; font-size:13.5px; cursor:pointer; }
.quiz-item label.opt:hover { background: var(--blue-soft); }
.quiz-item .result { margin-top:8px; font-size:13px; padding:6px 10px; border-radius:8px; }
.quiz-item .result.ok { background: var(--good-bg); color: var(--good); }
.quiz-item .result.bad { background: var(--bad-bg); color: var(--bad); }

.badge { font-size:11px; padding:2px 9px; border-radius:999px; font-weight:700; }
.badge.draft { background: var(--warn-bg); color: var(--warn); }
.badge.submitted { background: var(--good-bg); color: var(--good); }
.badge.none { background: var(--line); color: var(--muted); }

.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:18px; overflow-x:auto; }
.tabs button { padding:10px 16px; border:none; background:none; font-size:13.5px; font-weight:600; color: var(--muted); cursor:pointer; border-bottom:3px solid transparent; white-space:nowrap; }
.tabs button.on { color: var(--navy); border-color: var(--blue); }

.chart-wrap { position: relative; height: 260px; }

.login-box { max-width:380px; margin: 60px auto; }
.login-box .card { padding: 28px; }

footer.note { text-align:center; color: var(--muted); font-size:12px; margin-top: 30px; line-height:1.7; }

@media (max-width: 760px) {
  .wrap { padding: 16px 12px 70px; }
  .hero { padding: 20px 16px; }
  table.etable { font-size: 12px; }
}