:root {
  --bg: #ffffff;
  --bg-sidebar: #f6f7f9;
  --bg-hover: #eceff3;
  --bg-active: #e2e8f5;
  --bg-code: #f3f4f6;
  --border: #dde1e7;
  --text: #1c2128;
  --text-dim: #5b6472;
  --text-faint: #8b93a1;
  --accent: #3b5bdb;
  --accent-text: #24409c;
  --badge-core: #6741d9;
  --badge-hal: #0b7285;
  --badge-drivers: #e8590c;
  --badge-comm: #087f5b;
  --badge-protocols: #1864ab;
  --badge-service: #c2255c;
  --badge-libraries: #9c36b5;
  --ok: #2b8a3e;
  --code-border: #e3e6ea;
  --scrollbar: #c7cdd6;
  --tok-kw: #d6336c;
  --tok-str: #2b8a3e;
  --tok-num: #e8590c;
  --tok-com: #6b7280;
  --tok-macro: #1971c2;
  --mark-bg: #ffe066;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --bg-sidebar: #191c21;
    --bg-hover: #22262d;
    --bg-active: #262c3d;
    --bg-code: #1b1e24;
    --border: #2a2e36;
    --text: #e6e8eb;
    --text-dim: #a7adb8;
    --text-faint: #767d89;
    --accent: #7c93f7;
    --accent-text: #a9b8fa;
    --badge-core: #9775fa;
    --badge-hal: #22b8cf;
    --badge-drivers: #ff922b;
    --badge-comm: #40c057;
    --badge-protocols: #4dabf7;
    --badge-service: #f06595;
    --badge-libraries: #cc5de8;
    --ok: #69db7c;
    --code-border: #2c3038;
    --scrollbar: #3a3f48;
    --tok-kw: #ff8fc7;
    --tok-str: #8ce99a;
    --tok-num: #ffa94d;
    --tok-com: #7d8590;
    --tok-macro: #74c0fc;
    --mark-bg: #5c4b00;
  }
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Pretendard", "Malgun Gothic", sans-serif;
  font-size: 14px;
}
code, pre, .mono { font-family: "SF Mono", "Menlo", "Consolas", "D2Coding", monospace; }
a { color: inherit; text-decoration: none; }

.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 320px; min-width: 240px; max-width: 50vw; flex-shrink: 0;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow: hidden;
}
.sidebar-header { padding: 16px 16px 10px; border-bottom: 1px solid var(--border); }
.sidebar-header h1 { font-size: 15px; margin: 0 0 2px; font-weight: 700; }
.sidebar-header .sub { font-size: 11.5px; color: var(--text-faint); }
.search-box { margin: 10px 16px 8px; position: relative; }
.search-box input {
  width: 100%; padding: 7px 10px 7px 28px;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--bg); color: var(--text);
  font-size: 13px; outline: none;
}
.search-box input:focus { border-color: var(--accent); }
.search-box svg { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); opacity: .5; width: 14px; height: 14px; }
.search-meta { padding: 0 16px 8px; font-size: 11px; color: var(--text-faint); min-height: 14px; }
.sidebar-footer {
  flex-shrink: 0; padding: 10px 16px; border-top: 1px solid var(--border);
  font-size: 10.5px; color: var(--text-faint); text-align: center;
}

.nav { overflow-y: auto; flex: 1; padding: 4px 8px 20px; }
.nav::-webkit-scrollbar { width: 8px; }
.nav::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 4px; }

.type-group, .cat-group { margin-bottom: 2px; }
.type-group summary, .cat-group summary { list-style: none; cursor: pointer; }
.type-group summary::-webkit-details-marker, .cat-group summary::-webkit-details-marker { display: none; }

.type-header {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 8px; border-radius: 6px;
  font-weight: 700; font-size: 12.5px; color: var(--text);
  user-select: none;
}
.type-header:hover { background: var(--bg-hover); }
.type-header .badge-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.type-header .count { margin-left: auto; font-size: 10.5px; color: var(--text-faint); font-weight: 500; }
.type-items { padding-left: 8px; border-left: 1px solid var(--border); margin-left: 12px; }
.type-group.hidden { display: none; }

.cat-header {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 8px; border-radius: 6px;
  font-weight: 600; font-size: 12px; color: var(--text-dim);
  user-select: none;
}
.cat-header:hover { background: var(--bg-hover); }
.cat-header .count { margin-left: auto; font-size: 10.5px; color: var(--text-faint); font-weight: 500; }
.cat-title-link { color: inherit; text-decoration: none; }
.cat-title-link:hover { color: var(--accent-text); text-decoration: underline; }
.type-title-link { color: inherit; text-decoration: none; }
.type-title-link:hover { color: var(--accent-text); text-decoration: underline; }
.ov-note-p { font-size: 13px; line-height: 1.7; color: var(--text-dim); margin: 10px 0; }
.ov-buildlabel { font-size: 13px; margin: 16px 0 6px; color: var(--text); }
.ov-checklist { font-size: 13px; line-height: 1.9; color: var(--text-dim); padding-left: 20px; margin: 6px 0; }
.ov-checklist li { margin: 2px 0; }
.cat-items { padding-left: 6px; }
.cat-group.hidden { display: none; }

.type-header .chev, .cat-header .chev {
  width: 9px; height: 9px; transition: transform .15s ease;
  border-right: 1.6px solid var(--text-faint); border-bottom: 1.6px solid var(--text-faint);
  transform: rotate(-45deg); margin-left: 2px;
}
.type-group[open] > summary .type-header .chev { transform: rotate(45deg); }
.cat-group[open] > summary .cat-header .chev { transform: rotate(45deg); }

.fn-item {
  display: block;
  padding: 6px 10px 6px 20px; border-radius: 6px;
  font-size: 12.8px; margin: 1px 0;
}
.fn-item:hover { background: var(--bg-hover); }
.fn-item.active { background: var(--bg-active); color: var(--accent-text); font-weight: 600; }
.fn-item .fn-name { font-family: "SF Mono", "Menlo", monospace; }
.fn-item .fn-name mark { background: var(--mark-bg); color: inherit; border-radius: 2px; padding: 0 1px; }
.fn-item.hidden { display: none; }

.main { flex: 1; overflow-y: auto; }

.welcome { max-width: 760px; margin: 0 auto; padding: 64px 40px; }
.welcome h2 { font-size: 22px; margin-bottom: 6px; }
.welcome p { color: var(--text-dim); line-height: 1.7; font-size: 13.5px; }
.stats { display: flex; gap: 20px; margin-top: 28px; flex-wrap: wrap; }
.stat { background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: 10px; padding: 14px 20px; min-width: 110px; }
.stat .n { font-size: 24px; font-weight: 700; }
.stat .l { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }
.welcome .hint { margin-top: 32px; padding: 14px 16px; border-radius: 10px; background: var(--bg-sidebar); border: 1px solid var(--border); font-size: 12.5px; color: var(--text-dim); }
.welcome .cat-list { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.welcome .cat-list a { display: block; padding: 12px 14px; background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: 10px; font-size: 12.5px; }
.welcome .cat-list a:hover { border-color: var(--accent); }
.welcome .cat-list .cn { font-weight: 600; }
.welcome .cat-list .cc { color: var(--text-faint); font-size: 11px; margin-top: 2px; }

.detail { max-width: 860px; margin: 0 auto; padding: 40px 44px 80px; }
.detail-header { margin-bottom: 22px; }
.crumb { font-size: 11.5px; color: var(--text-faint); margin-bottom: 10px; }
.crumb a:hover { text-decoration: underline; }
.crumb .sep { margin: 0 5px; }
.fn-title, .item-title { font-size: 24px; font-weight: 700; font-family: "SF Mono", "Menlo", monospace; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.badge { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 20px; color: #fff; letter-spacing: .2px; }
.badge.core { background: var(--badge-core); }
.badge.hal { background: var(--badge-hal); }
.badge.drivers { background: var(--badge-drivers); }
.badge.comm { background: var(--badge-comm); }
.badge.protocols { background: var(--badge-protocols); }
.badge.service { background: var(--badge-service); }
.badge.libraries { background: var(--badge-libraries); }

.brief { font-size: 14.5px; color: var(--text-dim); margin-top: 8px; line-height: 1.6; }
.source-file, .requires { margin-top: 8px; font-size: 11.5px; color: var(--text-faint); }
.source-file code, .requires code { background: var(--bg-code); padding: 1px 6px; border-radius: 4px; }

.sig-block, .spec-block { margin: 20px 0; background: var(--bg-code); border: 1px solid var(--code-border); border-radius: 10px; padding: 16px 18px; overflow-x: auto; }
.sig-block code, .spec-block code { font-size: 13px; white-space: pre; line-height: 1.5; }
.tok-kw    { color: var(--tok-kw); font-weight: 600; }
.tok-type  { color: var(--badge-hal); }
.tok-fn    { color: var(--accent-text); font-weight: 700; }
.tok-str   { color: var(--tok-str); }
.tok-num   { color: var(--tok-num); }
.tok-com   { color: var(--tok-com); font-style: italic; }
.tok-macro { color: var(--tok-macro); }
.tok-pre   { color: var(--text-faint); font-weight: 600; }

.section { margin-top: 30px; }
.section h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-faint); margin-bottom: 12px; font-weight: 700; }
.remark { font-size: 13.5px; line-height: 1.75; color: var(--text); white-space: pre-line; }

.ov-partitions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.ov-partition { padding: 12px 14px; background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: 10px; }
.ov-partition-name { font-family: monospace; font-weight: 700; font-size: 12.5px; color: var(--accent-text); margin-bottom: 4px; }
.ov-partition-desc { font-size: 12.5px; line-height: 1.6; color: var(--text-dim); }

.ov-steps { display: flex; flex-direction: column; gap: 0; }
.ov-step { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.ov-step:last-child { border-bottom: none; }
.ov-step-n {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.ov-step-body { min-width: 0; }
.ov-step-fn { font-family: monospace; font-size: 13px; font-weight: 700; color: var(--accent-text); }
.ov-step-fn:hover { text-decoration: underline; }
.ov-step-desc { font-size: 13px; line-height: 1.7; color: var(--text-dim); margin-top: 4px; }
.ov-step-desc code { background: var(--bg-code); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

.ov-extras { display: flex; flex-direction: column; gap: 10px; }
.ov-extra { padding: 10px 14px; background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: 8px; }
.ov-extra .ov-step-desc { margin-top: 3px; }

.brief-list { font-size: 14.5px; color: var(--text-dim); line-height: 1.7; margin-top: 10px; padding-left: 20px; }
.brief-list li { margin-bottom: 7px; }

table.params, table.settings { width: 100%; border-collapse: collapse; font-size: 13px; }
table.params th, table.settings th { text-align: left; font-size: 11px; color: var(--text-faint); font-weight: 600; padding: 6px 10px; border-bottom: 1px solid var(--border); }
table.params td, table.settings td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.5; }
table.params tr:last-child td, table.settings tr:last-child td { border-bottom: none; }
table.params .pname, table.settings .pname { font-family: monospace; font-weight: 600; white-space: nowrap; }
table.params .ptype, table.settings .ptype { font-family: monospace; color: var(--badge-hal); white-space: nowrap; }

.coverage-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
.coverage-badge.full { background: rgba(43,138,62,.15); color: var(--ok); }
.coverage-badge.partial { background: rgba(232,89,12,.15); color: var(--badge-drivers); }
.coverage-badge.none { background: rgba(139,147,161,.15); color: var(--text-faint); }
table.platform-table td.impl-yes { color: var(--ok); font-weight: 600; white-space: nowrap; }
table.platform-table td.impl-no { color: var(--text-faint); white-space: nowrap; }
table.platform-table td.impl-no-note { color: var(--text-faint); font-style: italic; }
table.platform-table code { font-size: 12px; }

.cov-wrap { margin-top: 18px; }
.cov-cat-group { margin-bottom: 8px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.cov-cat-group summary { list-style: none; cursor: pointer; }
.cov-cat-group summary::-webkit-details-marker { display: none; }
.cov-cat-header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; background: var(--bg-sidebar);
  font-weight: 600; font-size: 13px;
}
.cov-cat-header .count { margin-left: auto; font-size: 11px; color: var(--text-faint); font-weight: 500; }
.cov-cat-group table.platform-table { margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--border); }
.cov-cat-group table.platform-table th, .cov-cat-group table.platform-table td { padding: 7px 16px; }

.spec-selector { margin-top: 18px; }
.spec-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.spec-chip {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 7px 14px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--bg-sidebar); color: var(--text-dim);
}
.spec-chip:hover { border-color: var(--accent); color: var(--text); }
.spec-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.spec-result { margin-top: 16px; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-sidebar); }
.spec-result-title { font-size: 12px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px; }
.spec-result-empty { font-size: 12.5px; color: var(--text-faint); }
.spec-mcu-list { display: flex; flex-wrap: wrap; gap: 10px; }
.spec-mcu {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 8px; border: 1.5px solid var(--border);
  background: var(--bg); font-size: 12.5px; font-weight: 600;
  transition: opacity .15s ease, border-color .15s ease;
}
.spec-mcu .spec-mcu-count { font-family: monospace; font-weight: 700; font-size: 11.5px; padding: 2px 7px; border-radius: 10px; }
.spec-mcu.full { border-color: var(--ok); }
.spec-mcu.full .spec-mcu-count { background: rgba(43,138,62,.15); color: var(--ok); }
.spec-mcu.partial { border-color: var(--badge-drivers); }
.spec-mcu.partial .spec-mcu-count { background: rgba(232,89,12,.15); color: var(--badge-drivers); }
.spec-mcu.none { opacity: .4; }
.spec-mcu.none .spec-mcu-count { background: rgba(139,147,161,.15); color: var(--text-faint); }

.returns-box, .behavior-box { font-size: 13.5px; line-height: 1.7; padding: 12px 14px; background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: 8px; }
.errcode-link { color: var(--accent-text); text-decoration: none; font-family: "SF Mono", "Menlo", monospace; font-size: 0.92em; border-bottom: 1px dotted var(--accent); }
.errcode-link:hover { border-bottom-style: solid; }
.errcode-usage { font-size: 12px; line-height: 1.8; }
.errcode-usage a { color: var(--accent-text); text-decoration: none; }
.errcode-usage a:hover { text-decoration: underline; }

pre.example { background: var(--bg-code); border: 1px solid var(--code-border); border-radius: 10px; padding: 16px 18px; overflow-x: auto; font-size: 12.8px; line-height: 1.65; margin: 0; }

.related { display: flex; flex-wrap: wrap; gap: 8px; }
.related a { font-family: monospace; font-size: 12px; padding: 5px 10px; background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: 7px; }
.related a:hover { background: var(--bg-hover); border-color: var(--accent); }

.menu-toggle {
  display: none;
  position: fixed; top: 12px; left: 12px; z-index: 1001;
  width: 38px; height: 38px; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text);
  font-size: 18px; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.16);
}
.nav-backdrop { display: none; }

@media (max-width: 760px) {
  .menu-toggle { display: flex; }
  .layout { flex-direction: column; }
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: 82vw; max-width: 320px;
    transform: translateX(-100%);
    transition: transform .22s ease;
    z-index: 1000;
    box-shadow: 2px 0 20px rgba(0,0,0,.25);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open .nav-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 999;
  }
  .sidebar-header { padding-top: 56px; }
  .detail, .welcome { padding: 64px 20px 60px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   SCADA 도움말 — 참조본(ac_fw_platform API) 위에 얹는 규칙.
   위쪽은 참조본 원본이므로 손대지 않는다. 여기만 우리 것.
   ───────────────────────────────────────────────────────────────────────── */

/* 트랙 배지 — 참조본의 --badge-* 를 그대로 재사용한다(다크 대응이 이미 돼 있다) */
.badge.authoring { background: var(--badge-core); }
.badge.bind      { background: var(--badge-comm); }
.badge.runtime   { background: var(--badge-protocols); }
.badge.element   { background: var(--badge-hal); }
.badge.symbol    { background: var(--badge-libraries); }
.badge.ref       { background: var(--badge-service); }

/* .remark 는 참조본에서 white-space: pre-line 이다(줄바꿈이 그대로 살아난다).
   우리는 <p>·<ul> 을 쓰므로 그 페이지에서만 끈다. 안 끄면 들여쓴 마크업의
   공백 줄이 그대로 빈 줄이 되어 문단 사이가 두 배로 벌어진다. */
.remark.rich { white-space: normal; }
.remark.rich p { margin: 0 0 12px; }
.remark.rich p:last-child { margin-bottom: 0; }
.remark.rich ul, .remark.rich ol { margin: 0 0 12px 20px; }
.remark.rich li { margin-bottom: 6px; }
.remark code, .behavior-box code, table.settings code {
  background: var(--bg-code); padding: 1px 6px; border-radius: 4px;
  font-family: "SF Mono", Menlo, monospace; font-size: .92em;
}

/* 참고·주의 — 문단 단위 강조. 주의는 되돌릴 수 없는 동작에만 쓴다. */
.note, .warn {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 8px;
  border-left: 3px solid var(--accent); background: var(--bg-sidebar);
  font-size: 13px; line-height: 1.7;
}
.warn { border-left-color: var(--badge-drivers); }
.note:last-child, .warn:last-child { margin-bottom: 0; }

/* 해 보기 — 예제 코드 대신 편집기에서 실제로 열리는 샘플 */
.sample-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; margin-bottom: 8px;
  background: var(--bg-sidebar); border: 1px solid var(--border);
  border-radius: 10px; font-size: 13px;
}
.sample-link:hover { border-color: var(--accent); background: var(--bg-hover); }
.sample-link .sl-desc { display: block; color: var(--text-faint); font-size: 11.5px; margin-top: 3px; }
.sample-link .chev { color: var(--text-faint); }

/* 랜딩 — 역할별 3트랙 */
.track-cards {
  margin-top: 28px; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.track-card {
  display: block; padding: 18px; border-radius: 12px;
  background: var(--bg-sidebar); border: 1px solid var(--border);
}
.track-card:hover { border-color: var(--accent); }
.track-card h2 { font-size: 16px; margin: 10px 0 6px; }
.track-card p { font-size: 12.5px; color: var(--text-dim); line-height: 1.6; }
.track-card .count { display: block; margin-top: 10px; font-size: 11px; color: var(--text-faint); }
.quick { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.quick a {
  padding: 7px 12px; border-radius: 20px; font-size: 12.5px;
  background: var(--bg-sidebar); border: 1px solid var(--border);
}
.quick a:hover { border-color: var(--accent); }

/* 아직 안 쓴 항목 — 링크가 아니라 회색 글자로 남긴다.
   목차에서 빼 버리면 전체 구조가 안 보이고, <a> 로 두면 404 로 데려간다. */
.fn-item.todo { cursor: default; opacity: .45; }
.fn-item.todo:hover { background: none; }
.fn-item.todo .fn-name::after { content: " · 준비 중"; font-size: 10px; color: var(--text-faint); }

/* 아직 없는 문서로 가는 자리 — <a> 로 두면 404 를 만든다.
   빼 버리면 "관련 항목이 원래 없는 것"처럼 보이므로 회색 칩으로 남긴다. */
.related .todo-link,
.track-card.todo,
.quick .todo-link { opacity: .45; cursor: default; }
.related .todo-link {
  font-family: monospace; font-size: 12px; padding: 5px 10px;
  background: var(--bg-sidebar); border: 1px dashed var(--border); border-radius: 7px;
}
.quick .todo-link {
  padding: 7px 12px; border-radius: 20px; font-size: 12.5px;
  background: var(--bg-sidebar); border: 1px dashed var(--border);
}
.track-card.todo:hover { border-color: var(--border); }

/* 그림 — SVG 는 인라인해서 페이지의 CSS 변수를 그대로 쓰게 한다(다크 모드 대응) */
.figure {
  margin: 18px 0 0; padding: 14px 10px;
  background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: 10px;
}
.figure svg { display: block; width: 100%; height: auto; }
.figure img {
  display: block; width: 100%; height: auto; border-radius: 6px;
  border: 1px solid var(--border);
}
.figure figcaption {
  margin: 10px 2px 0; font-size: 12.5px; line-height: 1.6; color: var(--text-dim);
}

/* 심볼 시트 — 글리프는 **밝은 판** 위에 고정한다. 심볼 선색이 어두워서(#1e293b)
   다크 모드의 어두운 배경에 그대로 놓으면 형체가 사라진다. */
.fig-plate { fill: #f1f5f9; stroke: #cbd5e1; stroke-width: 1; }
.fig-lbl { font: 500 13px system-ui, -apple-system, sans-serif; fill: var(--text); }
.fig-dot { fill: #10b981; }

/* file:// 사본에서 '해 보기' — 갈 곳이 없으므로 링크가 아니라 안내로 남긴다 */
.sample-link.offline { opacity: .55; cursor: default; }
.sample-link.offline:hover { border-color: var(--border); background: var(--bg-sidebar); }
.sample-link.offline .chev { font-size: 11px; white-space: nowrap; }

/* 랜딩의 '에이전트' 칸 — 사람용 문서와 독자가 다른 두 파일로 보낸다 */
.agent-box {
  margin: 22px 0 0; padding: 16px 18px;
  background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: 10px;
}
.agent-title { font-size: 14px; font-weight: 600; color: var(--text); }
.agent-box p { margin: 6px 0 12px; font-size: 13px; line-height: 1.7; color: var(--text-dim); }
.agent-link {
  display: block; margin-top: 6px; padding: 10px 12px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  text-decoration: none; color: var(--text);
}
.agent-link:hover { border-color: var(--accent); background: var(--bg-hover); }
.agent-link b { display: block; font-size: 13px; font-weight: 600; }
.agent-link span { display: block; margin-top: 2px; font-size: 12px; color: var(--text-dim); }