/* 옴니셀러 가이드 — 흰 배경 한 가지(다크 모드 없음). 단계 목록의 빨간 번호 = 화면 사진 속 빨간 번호.
   구성: 위 고정 머리줄(기둥 탭 · 검색) · 왼쪽 목차(지금 기둥의 흐름 → 화면 → 할 일) · 본문 한 줄 */
:root {
  color-scheme: light;
  --bg: #f5f6f8; --surface: #ffffff; --fg: #18212b; --muted: #5d6875; --line: #dde1e7;
  --accent: #1d4f91; --accent-soft: #e8f0fb; --mark: #e53935;
  --warn-bg: #fff4e5; --warn-fg: #8a4b08; --ok-bg: #e9f6ef; --ok-fg: #1b6b43; --tip-bg: #f0f3f7;
  --font: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}
* { box-sizing: border-box }
html { scroll-padding-top: 76px }
body { background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 15px; line-height: 1.65; margin: 0 }
a { color: var(--accent) }
.gh { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 8px 20px }
.gh .brand { font-weight: 700; font-size: 15px; color: var(--fg); text-decoration: none; white-space: nowrap; letter-spacing: -.01em }
.gh .brand i { display: inline-block; width: 10px; height: 10px; background: var(--accent); border-radius: 2px; margin-right: 8px }
.gh nav.pillars { display: flex; gap: 2px; flex-wrap: wrap }
.gh nav.pillars a { padding: 5px 11px; border-radius: 6px; font-size: 14px; color: var(--muted); text-decoration: none; white-space: nowrap }
.gh nav.pillars a:hover, .gh nav.pillars a:focus-visible { background: var(--accent-soft); color: var(--accent); outline: none }
.gh nav.pillars a[aria-current="true"] { background: var(--accent); color: #fff; font-weight: 600 }
.gh .search { margin-left: auto; position: relative; min-width: 0 }
.gh .search input { width: 230px; max-width: 100%; font: inherit; font-size: 14px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg) }
.gh .search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; background: var(--surface) }
#res { position: absolute; right: 0; top: calc(100% + 6px); width: min(460px, 92vw); max-height: 60vh; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 28px rgba(20, 30, 45, .14); padding: 4px }
#res[hidden] { display: none }
#res a { display: block; padding: 8px 10px; border-radius: 6px; color: var(--fg); text-decoration: none; font-size: 14px }
#res a:hover, #res a:focus-visible { background: var(--accent-soft); outline: none }
#res a small { display: block; color: var(--muted); font-size: 12.5px }
#res p { margin: 8px 10px; color: var(--muted); font-size: 13.5px }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 20px; padding-block: 26px 90px; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 36px }
.wrap.solo { grid-template-columns: minmax(0, 1fr); max-width: 1000px }
aside.side { position: sticky; top: 74px; align-self: start; max-height: calc(100vh - 92px); overflow: auto; font-size: 13.5px; padding-right: 6px }
aside.side .ph { font-size: 12px; color: var(--muted); letter-spacing: .04em; margin: 0 0 4px }
aside.side .pn { display: block; font-weight: 700; font-size: 15px; margin: 0 0 12px; color: var(--fg); text-decoration: none }
aside.side .fl { margin: 14px 0 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); display: flex; gap: 6px; align-items: baseline }
aside.side .fl b { color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 700 }
aside.side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px }
aside.side li a { display: block; padding: 4px 8px; border-radius: 6px; color: var(--fg); text-decoration: none }
aside.side li a:hover, aside.side li a:focus-visible { background: var(--accent-soft); color: var(--accent); outline: none }
aside.side li a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600 }
aside.side li ol { list-style: none; margin: 2px 0 4px 10px; padding: 0 0 0 8px; border-left: 2px solid var(--line); display: grid; gap: 0 }
aside.side li ol a { font-size: 13px; color: var(--muted); padding: 2px 6px }
main { min-width: 0 }
.crumb { margin: 0; font-size: 13px; color: var(--muted) }
.crumb a { color: var(--muted); text-decoration: none }
.crumb a:hover { color: var(--accent); text-decoration: underline }
h1 { font-size: 30px; line-height: 1.25; margin: 4px 0 10px; letter-spacing: -.01em; text-wrap: balance }
.openhow { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13.5px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; margin: 0 0 14px }
.openhow b { color: var(--muted); font-weight: 600; font-size: 12.5px }
.openhow i { font-style: normal; color: var(--muted) }
.lead { margin: 0 0 14px; max-width: 64ch }
.warn { background: var(--warn-bg); color: var(--warn-fg); border-radius: 8px; padding: 10px 14px; font-size: 14px; max-width: 64ch; margin: 0 0 12px }
.warn b { font-weight: 700 }
.pick { margin: 26px 0 6px }
.pick h2 { font-size: 16px; margin: 0 0 10px }
.pick ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px }
.pick a { display: block; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; color: var(--fg); text-decoration: none }
.pick a:hover, .pick a:focus-visible { border-color: var(--accent); outline: none }
.pick a span { display: block; font-size: 12.5px; color: var(--muted) }
section.step { margin-top: 44px; padding-top: 8px; scroll-margin-top: 76px }
section.step > h2 { font-size: 21px; margin: 0 0 4px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; text-wrap: balance }
section.step > h2 small { font-size: 13px; font-weight: 500; color: var(--muted) }
.when { margin: 0 0 12px; color: var(--muted); font-size: 14px; max-width: 64ch }
ol.do { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; counter-reset: s }
ol.do > li { counter-increment: s; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start }
ol.do > li::before { content: counter(s); width: 24px; height: 24px; border-radius: 50%; background: var(--mark); color: #fff; font-weight: 700; font-size: 13px; display: grid; place-items: center; margin-top: 1px }
ol.do > li .sub { display: block; font-size: 13.5px; color: var(--muted) }
.btn { display: inline-block; font-size: 13px; font-weight: 600; line-height: 1.5; padding: 0 7px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); white-space: nowrap }
figure { margin: 0 0 12px }
figure button { display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; cursor: zoom-in }
figure button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
figure img { display: block; width: 100%; height: auto }
figure.narrow button { max-width: 620px }
figcaption { font-size: 12.5px; color: var(--muted); margin-top: 6px }
.done { display: flex; gap: 8px; align-items: baseline; background: var(--ok-bg); color: var(--ok-fg); border-radius: 8px; padding: 8px 12px; font-size: 14px; max-width: 64ch; margin: 0 0 10px }
.done::before { content: "결과"; font-weight: 700; font-size: 12.5px; white-space: nowrap }
.tip { font-size: 14px; color: var(--muted); max-width: 64ch; margin: 10px 0 }
.tip b { color: var(--fg) }
.note { background: var(--tip-bg); border-radius: 8px; padding: 9px 14px; font-size: 14px; max-width: 64ch; margin: 10px 0 }
.note b { font-weight: 700 }
.warn.inline { margin: 10px 0 }
.txt { max-width: 64ch; margin: 0 0 10px }
ul.bul { margin: 0 0 12px; padding-left: 20px; max-width: 64ch }
ul.bul li { margin: 2px 0 }
.tbl { overflow-x: auto; margin: 12px 0 }
table { border-collapse: collapse; background: var(--surface); font-size: 14px; min-width: 480px }
th, td { border: 1px solid var(--line); padding: 7px 12px; text-align: left; vertical-align: top }
th { background: var(--accent-soft); color: var(--fg); font-weight: 600 }
.related { margin-top: 44px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px }
.related h2 { font-size: 15px; margin: 0 0 6px }
.related ul { margin: 0; padding-left: 18px }
.pn-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 30px }
.pn-nav a { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; color: var(--fg); text-decoration: none; min-width: 0 }
.pn-nav a:hover, .pn-nav a:focus-visible { border-color: var(--accent); outline: none }
.pn-nav a small { display: block; color: var(--muted); font-size: 12px }
.pn-nav a.next { text-align: right; grid-column: 2 }
/* 허브(첫 화면)·기둥 소개 */
.hero { margin: 4px 0 26px }
.hero h1 { font-size: 34px }
.hero p { max-width: 62ch; margin: 0 0 10px; color: var(--fg) }
.life { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 18px 0 8px; padding: 0; list-style: none }
.life li { display: flex; align-items: center; gap: 8px }
.life li a { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; text-decoration: none; color: var(--fg); font-size: 14px; min-width: 120px }
.life li a small { display: block; color: var(--muted); font-size: 12px }
.life li a:hover, .life li a:focus-visible { border-color: var(--accent); outline: none }
.life li + li::before { content: "→"; color: var(--muted) }
.pcard { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; margin: 0 0 16px }
.pcard > h2 { margin: 0; font-size: 20px }
.pcard > h2 a { color: inherit; text-decoration: none }
.pcard > h2 a:hover { color: var(--accent) }
.pcard > p { margin: 2px 0 12px; color: var(--muted); font-size: 14px; max-width: 64ch }
.flows { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 22px }
.flows h3 { margin: 0 0 4px; font-size: 14px; display: flex; gap: 6px; align-items: baseline }
.flows h3 b { color: var(--accent); font-variant-numeric: tabular-nums }
.flows p { margin: 0 0 4px; font-size: 12.5px; color: var(--muted) }
.flows ul { list-style: none; margin: 0; padding: 0; font-size: 14px }
.flows li a { display: block; padding: 2px 0; text-decoration: none }
.flows li a:hover { text-decoration: underline }
.flows li .todo { color: var(--muted) }
.want { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; margin: 0 0 26px; padding: 0; list-style: none }
.want a { display: block; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; color: var(--fg); text-decoration: none }
.want a:hover, .want a:focus-visible { border-color: var(--accent); outline: none }
.want a span { display: block; font-size: 12.5px; color: var(--muted) }
h2.sec { font-size: 17px; margin: 30px 0 10px }
dialog { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 94vh }
dialog::backdrop { background: rgba(10, 16, 24, .72) }
dialog img { display: block; max-width: 96vw; max-height: 90vh; width: auto; height: auto; border-radius: 6px; background: #fff }
dialog p { color: #fff; font-size: 13px; text-align: center; margin: 6px 0 0 }
details.mobtoc { display: none }
@media (max-width: 900px) {
  .wrap { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-inline: 16px }
  aside.side { display: none }
  details.mobtoc { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-size: 14px }
  details.mobtoc summary { cursor: pointer; font-weight: 600 }
  details.mobtoc .fl { margin: 10px 0 2px; font-size: 12.5px; font-weight: 600; color: var(--muted) }
  details.mobtoc ul { list-style: none; margin: 0; padding: 0 }
  details.mobtoc li a { display: block; padding: 4px 6px; text-decoration: none; color: var(--fg) }
  .gh { padding-inline: 16px }
  .gh .search { margin-left: 0; width: 100% }
  .gh .search input { width: 100% }
  h1 { font-size: 25px }
  .hero h1 { font-size: 27px }
  .pn-nav { grid-template-columns: 1fr }
  .pn-nav a.next { grid-column: 1 }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth } }