/* SSLNOW 가이드 공통 스타일 — 왼쪽 목차(페이지 → 절, 2단) + 본문. 테마는 4개 사이트 공통 쿠키(sslnow_theme). */
:root {
  --bg: #f7f8fa; --surface: #ffffff; --text: #1c2330; --muted: #5b6472; --line: #e3e7ee;
  --brand: #4f46e5; --brand-soft: #eef0ff; --warn-bg: #fff7e8; --warn-line: #f0c36d; --warn-text: #8a5a00;
  --ok-bg: #eefaf2; --ok-text: #157347; --code-bg: #101828; --code-text: #e6edf7;
}
html[data-theme="dark"] {
  --bg: #0d1117; --surface: #161d29; --text: #e6edf7; --muted: #9aa6b8; --line: #26303f;
  --brand: #8b85ff; --brand-soft: #1e2140; --warn-bg: #2a2210; --warn-line: #7a5b16; --warn-text: #f0c36d;
  --ok-bg: #10261a; --ok-text: #57c98a; --code-bg: #0a0f18; --code-text: #dbe6f5;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --bg: #0d1117; --surface: #161d29; --text: #e6edf7; --muted: #9aa6b8; --line: #26303f;
    --brand: #8b85ff; --brand-soft: #1e2140; --warn-bg: #2a2210; --warn-line: #7a5b16; --warn-text: #f0c36d;
    --ok-bg: #10261a; --ok-text: #57c98a; --code-bg: #0a0f18; --code-text: #dbe6f5;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.75 -apple-system, "Segoe UI", "Noto Sans KR", sans-serif; }

/* 상단 바 */
.top { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); background: var(--surface); }
.top-in { max-width: 1200px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.top a.brand { color: var(--text); text-decoration: none; font-weight: 800; letter-spacing: .02em; display: flex; align-items: center; gap: 10px; }
.top .crumb { font-size: 13px; color: var(--muted); font-weight: 600; }
.top .back { font-size: 13px; color: var(--brand); text-decoration: none; font-weight: 700; white-space: nowrap; }
.mark { position: relative; width: 30px; height: 30px; border-radius: 9px; background: #12213b; box-shadow: 0 4px 11px rgba(18,33,59,.18); flex-shrink: 0; }
.mark::before, .mark::after { content: ""; position: absolute; border-radius: 999px; transform: rotate(-42deg); background: #fff; }
.mark::before { width: 5px; height: 15px; left: 9px; top: 8px; }
.mark::after { width: 5px; height: 11px; left: 17px; top: 7px; background: #2f6fe0; }
html[data-theme="dark"] .mark { background: #3e5fbf; }
html[data-theme="dark"] .mark::after { background: #5b9dff; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .mark { background: #3e5fbf; }
  html:not([data-theme="light"]) .mark::after { background: #5b9dff; }
}

/* 레이아웃 */
.layout { max-width: 1200px; margin: 0 auto; padding: 28px 20px 80px; display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 40px; }
.side { position: sticky; top: 76px; align-self: start; max-height: calc(100vh - 92px); overflow: auto; padding-right: 6px; }
.side-title { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; margin: 4px 0 10px; }
.side-title a { color: inherit; text-decoration: none; }
.side ul { list-style: none; margin: 0; padding: 0; }
.side > ul > li { margin: 2px 0; }
.side .grp { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 10px; border-radius: 9px; color: var(--text); font-weight: 750; font-size: 14px; text-decoration: none; cursor: pointer; }
.side .grp:hover { background: var(--brand-soft); }
.side .grp .n { color: var(--muted); font-size: 12px; font-weight: 700; margin-right: 8px; min-width: 18px; display: inline-block; }
.side .grp .chev { width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .18s; flex-shrink: 0; margin-left: 8px; }
.side li.open > .grp .chev { transform: rotate(45deg); }
.side li.current > .grp { color: var(--brand); }
.side ul.sub { display: none; margin: 2px 0 6px 18px; padding-left: 10px; border-left: 1px solid var(--line); }
.side li.open > ul.sub { display: block; }
.side ul.sub a { display: block; padding: 5px 8px; border-radius: 7px; color: var(--muted); font-size: 13px; text-decoration: none; line-height: 1.45; }
.side ul.sub a:hover { color: var(--text); background: var(--brand-soft); }
.side ul.sub a.active { color: var(--brand); font-weight: 700; background: var(--brand-soft); }
.side-toggle { display: none; }

main { min-width: 0; }
h1 { font-size: 26px; line-height: 1.35; margin: 0 0 6px; }
.lead { color: var(--muted); margin: 0 0 26px; }
h2 { font-size: 19px; margin: 40px 0 10px; padding-top: 22px; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
h3 { font-size: 16px; margin: 26px 0 8px; scroll-margin-top: 80px; }
p { margin: 8px 0; }
ol, ul { padding-left: 22px; }
li { margin: 5px 0; }
a { color: var(--brand); }
code { background: var(--brand-soft); padding: 1px 6px; border-radius: 5px; font-size: 13px; }
pre { background: var(--code-bg); color: var(--code-text); padding: 14px 16px; border-radius: 10px; overflow: auto; font-size: 13px; line-height: 1.6; }
pre code { background: transparent; padding: 0; color: inherit; font-size: inherit; }
.muted { color: var(--muted); font-size: 13px; }
.box { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; background: var(--surface); margin: 14px 0; font-size: 14px; }
.box.warn { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn-text); }
.box.ok { background: var(--ok-bg); color: var(--ok-text); border-color: transparent; }
.box.vals { border-left: 4px solid var(--brand); background: var(--brand-soft); }
.box p { margin: 6px 0; }
table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
th, td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
th { background: var(--brand-soft); font-weight: 750; }
td.c, th.c { text-align: center; }
.path { color: var(--muted); font-size: 13px; font-weight: 500; }

/* 가이드 홈 카드 */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--surface); text-decoration: none; color: var(--text); display: block; }
.card:hover { border-color: var(--brand); }
.card b { display: block; font-size: 15px; margin-bottom: 4px; }
.card span { color: var(--muted); font-size: 13px; line-height: 1.5; display: block; }
.card small { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; }

/* 이전/다음 */
.pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; }
.pager a { text-decoration: none; font-weight: 700; }
.pager span { color: var(--muted); }

.foot { max-width: 1200px; margin: 0 auto; padding: 18px 20px 40px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); }
.foot a { color: var(--muted); }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; gap: 16px; padding-top: 16px; }
  .side { position: static; max-height: none; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 10px 12px; display: none; }
  .side.show { display: block; }
  .side-toggle { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 10px; padding: 9px 14px; font: inherit; font-weight: 700; cursor: pointer; }
  .cards { grid-template-columns: 1fr; }
  .top .crumb { display: none; }
}

.public-guide .side-toggle { display:none; }
.public-guide .guide-cta { display:inline-block;padding:11px 18px;background:var(--brand);color:var(--surface);border-radius:9px;text-decoration:none;font-weight:700; }
.public-guide .side a[aria-current] {background:var(--brand-soft);color:var(--brand);}
@media(max-width:900px){.public-guide .side{display:block;position:static;max-height:none}.public-guide .side ul{display:flex;flex-wrap:wrap;gap:4px}.public-guide .layout{grid-template-columns:minmax(0,1fr)}.public-guide .top-in{flex-wrap:wrap}}