/* =============================================================================
   viewplus 앱 사용자 매뉴얼 — 공용 스타일 (선택 사용)
   -----------------------------------------------------------------------------
   매뉴얼 HTML 은 자유다. 이 파일은 "사이트와 같은 톤으로 빨리 만들고 싶을 때" 쓰는
   스타터일 뿐이고, 안 써도 서빙에는 아무 영향이 없다.

   값은 design.md(v2.1) 라이트 팔레트를 **리터럴로** 옮긴 것이다 — 매뉴얼은
   샌드박스 안에서 열리므로 사이트의 CSS 변수·Tailwind 를 알지 못한다.
   네이비 면 + 골드 액센트(한 화면 3곳 이하) + 헤어라인 + 2px 라운드.

   사용:  <link rel="stylesheet" href="/manuals/_shared/manual.css">
   ========================================================================== */

:root {
  --paper: #FDFDFE;  --ink: #141820;  --ink-2: #515B6B;  --ink-3: #667080;
  --surface: #F6F8FA; --card: #FFFFFF; --rule: #DDE1E7;  --rule-strong: #85909F;
  --navy: #00183C;   --navy-2: #1B386B; --gold: #8E6618;  --gold-on-dark: #B8862A;
  --ok: #3F6249;     --warn: #A8420C;   --err: #A02A22;   --beige: #FAF5EA;
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Hiragino Sans", "Yu Gothic",
          "PingFang SC", "Microsoft YaHei", sans-serif;
  --radius: 2px;
  --measure: 72ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--beige); }
img, video { max-width: 100%; height: auto; }
a { color: var(--navy-2); text-underline-offset: 2px; }
a:hover { color: var(--navy); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── 머리띠(헤더 밴드) — 네이비 면 + 골드 헤어라인 ─────────────────────────── */
.m-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--navy); color: #fff;
  border-bottom: 1px solid var(--gold-on-dark);
}
.m-header__inner {
  max-width: 1080px; margin: 0 auto; padding: .75rem 1.25rem;
  display: flex; align-items: center; gap: 1rem;
}
.m-header__brand { color: #fff; text-decoration: none; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.m-header__brand b { color: var(--gold-on-dark); font-weight: 600; }
.m-header__title { flex: 1; min-width: 0; font-size: .95rem; color: #C8D2E2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-header__meta { font-size: .75rem; color: #C8D2E2; white-space: nowrap; }
.m-header__lang a { color: #C8D2E2; text-decoration: none; font-size: .8rem; margin-left: .5rem; }
.m-header__lang a[aria-current="true"] { color: #fff; border-bottom: 1px solid var(--gold-on-dark); }

/* ── 본문 레이아웃: 목차(데스크탑 좌측) + 본문 ─────────────────────────────── */
.m-layout { max-width: 1080px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; display: grid; gap: 2rem; }
@media (min-width: 900px) {
  .m-layout { grid-template-columns: 240px minmax(0, 1fr); padding-top: 2.5rem; }
  .m-toc { position: sticky; top: 4.5rem; align-self: start; max-height: calc(100vh - 5rem); overflow: auto; }
}
.m-toc { font-size: .9rem; border-left: 1px solid var(--rule); padding-left: 1rem; }
.m-toc__label { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .5rem; }
.m-toc ol { list-style: none; margin: 0; padding: 0; }
.m-toc li { margin: .25rem 0; }
.m-toc li li { margin-left: .9rem; font-size: .85rem; }
.m-toc a { color: var(--ink-2); text-decoration: none; display: block; padding: .15rem 0; }
.m-toc a:hover, .m-toc a.is-active { color: var(--navy); }
.m-toc a.is-active { font-weight: 600; }
@media (max-width: 899px) {
  .m-toc { border-left: 0; padding: 0; }
  .m-toc details { border: 1px solid var(--rule); border-radius: var(--radius); padding: .6rem .9rem; background: var(--card); }
  .m-toc summary { cursor: pointer; font-weight: 600; color: var(--navy); }
  .m-toc ol { margin-top: .5rem; }
}

.m-main { max-width: var(--measure); }
.m-main > h1 { font-size: clamp(1.75rem, 3.5vw, 2.4rem); line-height: 1.2; letter-spacing: -.01em; margin: 0 0 .5rem; color: var(--navy); }
.m-lede { font-size: 1.1rem; color: var(--ink-2); margin: 0 0 2rem; }
.m-main h2 { font-size: 1.4rem; line-height: 1.3; margin: 3rem 0 1rem; padding-top: 1rem; border-top: 1px solid var(--rule); color: var(--navy); }
.m-main h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.5rem; }
.m-main h3 { font-size: 1.1rem; margin: 2rem 0 .6rem; }
.m-main p, .m-main ul, .m-main ol { margin: 0 0 1rem; }
.m-main li + li { margin-top: .35rem; }
.m-main figure { margin: 1.5rem 0; }
.m-main figcaption { font-size: .85rem; color: var(--ink-3); margin-top: .5rem; }
.m-main img { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.m-main table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 1.25rem 0; }
.m-main th { text-align: left; background: var(--navy); color: #fff; font-weight: 500; padding: .6rem .8rem; }
.m-main td { padding: .6rem .8rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.m-main code, .m-main kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
.m-main kbd { border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: .05rem .4rem; background: var(--card); box-shadow: inset 0 -1px 0 var(--rule); }

/* 단계 — 순번은 네이비(골드 금지: 반복 요소) */
.m-steps { list-style: none; counter-reset: step; padding: 0; margin: 1.25rem 0; }
.m-steps > li { counter-increment: step; position: relative; padding-left: 2.6rem; margin: 0 0 1.1rem; }
.m-steps > li::before {
  content: counter(step); position: absolute; left: 0; top: .05rem;
  width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--navy); color: #fff;
  font-size: .85rem; font-weight: 600; display: grid; place-items: center;
}

/* 콜아웃 — 색은 상태색 틴트 + 글자 */
.m-note, .m-tip, .m-warn { border-left: 3px solid; padding: .8rem 1rem; margin: 1.25rem 0; border-radius: 0 var(--radius) var(--radius) 0; font-size: .95rem; }
.m-note { border-color: var(--rule-strong); background: var(--surface); }
.m-tip  { border-color: var(--ok);   background: color-mix(in srgb, var(--ok) 8%, var(--card)); }
.m-warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, var(--card)); }
.m-note > strong:first-child, .m-tip > strong:first-child, .m-warn > strong:first-child { display: block; margin-bottom: .2rem; }

/* 스크린샷 자리표시(이미지가 아직 없을 때) — 단색 틴트, 그라데이션 없음 */
.m-shot {
  display: grid; place-items: center; aspect-ratio: 16/9; border: 1px dashed var(--rule-strong);
  border-radius: var(--radius); background: color-mix(in srgb, var(--navy) 6%, var(--card));
  color: var(--ink-3); font-size: .85rem; text-align: center; padding: 1rem;
}

/* FAQ */
.m-faq details { border-top: 1px solid var(--rule); padding: .8rem 0; }
.m-faq details:last-child { border-bottom: 1px solid var(--rule); }
.m-faq summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.m-faq summary::marker { color: var(--navy); }
.m-faq details > *:not(summary) { margin-top: .6rem; color: var(--ink-2); }

/* 꼬리 */
.m-footer { border-top: 1px solid var(--rule); margin-top: 3rem; padding-top: 1.25rem; font-size: .85rem; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.m-footer a { color: var(--ink-2); }

/* 인쇄 — 헤더 고정 해제, 목차 숨김, 링크 URL 표기 */
@media print {
  .m-header { position: static; background: #fff; color: #000; border-bottom: 2px solid #000; }
  .m-header__title, .m-header__meta { color: #000; }
  .m-header__lang, .m-toc, .m-footer .no-print { display: none !important; }
  .m-layout { display: block; padding: 0; }
  .m-main { max-width: none; }
  .m-main h2 { break-after: avoid; }
  .m-main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}