/* 도움말(DOCS) — 문서 화면 전용. app.css 의 card · table.admin · badge · alert · notice · codeblock 위에
   목차(왼쪽, 넓은 화면에서 고정)와 본문 간격만 더한다. 공개 레이아웃과 관리자 레이아웃에서 함께 쓴다. */

.docs{ display:grid; grid-template-columns:230px minmax(0,1fr); gap:2rem; align-items:start }
.docs-head{ margin-bottom:1.6rem }
.docs-head .crumbs a{ border-bottom:1px solid var(--line) }
.docs-head p{ color:var(--ink-soft); margin-top:.4rem; max-width:46em }

.docs-toc{ position:sticky; top:calc(var(--header-h) + 1rem); max-height:calc(100vh - var(--header-h) - 2rem); overflow:auto;
  padding:1rem .8rem; border:1.5px solid var(--ink); border-radius:var(--rad-card); background:var(--panel); font-size:.86rem; line-height:1.5 }
.docs-toc__title{ font:700 .64rem/1 var(--mono); letter-spacing:.16em; color:var(--ink-faint); margin:0 .4rem .6rem }
.docs-toc ol{ list-style:none; margin:0; padding:0 }
.docs-toc ol ol{ margin:.1rem 0 .3rem .8rem }
.docs-toc a{ display:block; padding:.22rem .4rem; border-radius:6px; color:var(--ink-2) }
.docs-toc a:hover{ background:rgba(26,26,26,.06); color:var(--ink) }

.docs-body{ min-width:0; max-width:56rem; font-size:.95rem; line-height:1.8; color:var(--ink-2) }
.docs-body > section{ margin-bottom:2.6rem; scroll-margin-top:calc(var(--header-h) + 1rem) }
.docs-body h2{ font-size:1.3rem; color:var(--ink); padding-bottom:.45rem; margin-bottom:1rem; border-bottom:1.5px solid var(--line) }
.docs-body h3{ font-size:1.05rem; color:var(--ink); margin:1.7rem 0 .55rem; scroll-margin-top:calc(var(--header-h) + 1rem) }
.docs-body h4{ font-size:.95rem; color:var(--ink); margin:1.2rem 0 .4rem }
.docs-body p,.docs-body ul,.docs-body ol,.docs-body dl,.docs-body pre,.docs-body .table-wrap,.docs-body .notice,.docs-body .alert{ margin-bottom:.9rem }
.docs-body ul{ list-style:disc; padding-left:1.3rem }
.docs-body ol{ list-style:decimal; padding-left:1.4rem }
.docs-body li + li{ margin-top:.25rem }
.docs-body li > ul,.docs-body li > ol{ margin:.3rem 0 0 }
.docs-body a:not(.btn){ color:var(--ink); border-bottom:1px solid var(--line-strong) }
.docs-body a:not(.btn):hover{ border-bottom-color:var(--ink) }
.docs-body strong{ color:var(--ink) }
.docs-body code{ font-size:.84em; background:var(--paper-2); padding:.05rem .32rem; border-radius:4px; overflow-wrap:anywhere }
.docs-body pre code{ background:none; padding:0; font-size:inherit; overflow-wrap:normal }
.docs-body .codeblock.docs-code{ white-space:pre; overflow-wrap:normal; overflow-x:auto; font-size:.78rem; line-height:1.65 }
.docs-body .alert span,.docs-body .notice{ line-height:1.7 }

.docs-body table.admin{ min-width:540px }
.docs-body table.admin td{ vertical-align:top; line-height:1.65 }
.docs-body table.admin td code{ white-space:nowrap }
.docs-body .card{ box-shadow:none }
.docs-body .card .table-wrap{ margin-bottom:0 }

.docs-ep{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin:1.8rem 0 .7rem; padding:.55rem .85rem;
  border:1.5px solid var(--ink); border-radius:10px; background:var(--panel); font:.92rem/1.4 var(--mono); color:var(--ink);
  scroll-margin-top:calc(var(--header-h) + 1rem) }
.docs-ep .m{ font:700 .72rem/1 var(--mono); letter-spacing:.06em; padding:.3rem .5rem; border-radius:6px; background:var(--ink); color:var(--paper) }
.docs-ep .m--post{ background:var(--accent) }
.docs-ep .badge{ margin-left:auto }

.docs-faq dt{ font-weight:700; color:var(--ink); margin-top:1.1rem }
.docs-faq dt:first-child{ margin-top:0 }
.docs-faq dd{ margin:.3rem 0 0 }

.docs-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--gap); margin-bottom:2rem }
a.docs-card{ display:block; background:var(--panel); border:1.5px solid var(--ink); border-radius:var(--rad-card); padding:1.2rem;
  box-shadow:var(--shadow-card); transition:background var(--t-fast) }
a.docs-card:hover{ background:var(--paper-2) }
.docs-card .k{ font:700 .66rem/1 var(--mono); letter-spacing:.16em; color:var(--accent) }
.docs-card h2{ font-size:1.08rem; margin:.55rem 0 .35rem }
.docs-card p{ font-size:.9rem; color:var(--ink-soft) }
.docs-links{ columns:2 18rem; column-gap:2rem; list-style:disc; padding-left:1.2rem; line-height:1.9 }
.docs-links a{ border-bottom:1px solid var(--line-strong) }

/* ── 2026-10-05 전면 정리: 가이드 영상 · 시작 순서 · 상품 카드 · 메뉴 지도 ── */
.docs-cards--4{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) }
.docs-card .k--video{ color:#dc2626 }

.docs-video{ margin:1.1rem 0 1.6rem; border:1.5px solid var(--ink); border-radius:var(--rad-card); overflow:hidden; background:#0f172a }
.docs-video video{ display:block; width:100%; height:auto; aspect-ratio:16/9; background:#0f172a }
.docs-video figcaption{ background:var(--panel); border-top:1.5px solid var(--ink); padding:.75rem 1rem .85rem; font-size:.88rem; line-height:1.6; color:var(--ink-soft) }
.docs-video figcaption b{ color:var(--ink) }
.docs-video__tag{ display:inline-block; font:700 .62rem/1 var(--mono); letter-spacing:.12em; color:#fff; background:#dc2626; border-radius:4px; padding:.25rem .4rem; margin-right:.4rem; vertical-align:2px }
.docs-video__desc{ display:block; margin-top:.25rem }
.docs-body .docs-video__steps{ margin:.5rem 0 .3rem; padding-left:1.3rem; font-size:.86rem; columns:2 15rem; column-gap:1.6rem }
.docs-video__more{ display:inline-block; margin-top:.35rem; font-size:.84rem }
.docs-body .docs-video a.docs-video__more{ border-bottom:1px solid var(--line-strong) }

.docs-vgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1rem; margin:1rem 0 2rem }
a.docs-vthumb{ display:block; border:1.5px solid var(--ink); border-radius:var(--rad-card); overflow:hidden; background:var(--panel); color:var(--ink) }
a.docs-vthumb img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; background:#0f172a }
a.docs-vthumb span{ display:block; padding:.6rem .8rem; font-size:.9rem; font-weight:700; line-height:1.4 }
a.docs-vthumb small{ display:block; font:500 .74rem/1.4 var(--mono); color:var(--ink-faint); margin-top:.15rem }
a.docs-vthumb:hover{ background:var(--paper-2) }

.docs-steps{ list-style:none; counter-reset:dstep; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.8rem; padding:0; margin:0 0 1rem }
.docs-steps > li{ counter-increment:dstep; position:relative; border:1.5px solid var(--ink); border-radius:var(--rad-card); background:var(--panel); padding:2.4rem 1rem .9rem; line-height:1.55; font-size:.9rem; color:var(--ink-soft) }
.docs-steps > li::before{ content:counter(dstep, decimal-leading-zero); position:absolute; left:1rem; top:.8rem; font:700 .8rem/1 var(--mono); color:var(--accent); letter-spacing:.08em }
.docs-steps > li b{ display:block; color:var(--ink); font-size:1rem; margin-bottom:.25rem }
.docs-steps > li a{ font-size:.82rem; border-bottom:1px solid var(--line-strong) }
.docs-body .docs-steps > li + li{ margin-top:0 }

.docs-prod{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; margin:0 0 1.2rem }
.docs-prod > div{ border:1.5px solid var(--ink); border-radius:var(--rad-card); background:var(--panel); padding:1.1rem 1.2rem }
.docs-prod .k{ font:700 .66rem/1 var(--mono); letter-spacing:.16em; color:var(--accent) }
.docs-prod h3{ margin:.5rem 0 .3rem; font-size:1.12rem; color:var(--ink) }
.docs-prod .big{ font:800 1.6rem/1.1 var(--mono); color:var(--ink); margin:.35rem 0 .45rem }
.docs-prod .big small{ font:600 .8rem/1 var(--mono); color:var(--ink-faint); margin-left:.3rem }
.docs-prod ul{ margin:.4rem 0 0; padding-left:1.1rem; list-style:disc; font-size:.88rem; line-height:1.65; color:var(--ink-soft) }
.docs-body .docs-prod li + li{ margin-top:.1rem }

.docs-menu td:first-child{ white-space:nowrap; font-weight:700; color:var(--ink) }
.docs-tip{ border-left:4px solid var(--accent); background:var(--paper-2); padding:.7rem 1rem; border-radius:0 10px 10px 0; line-height:1.7; margin-bottom:.9rem }
.docs-tip b{ color:var(--ink) }
.docs-note-v{ font-size:.82rem; color:var(--ink-faint) }

@media (max-width:640px){
  .docs-body table.admin{ min-width:480px }
  .docs-steps{ grid-template-columns:1fr }
  .docs-vgrid{ grid-template-columns:1fr }
  .docs-body .docs-video__steps{ columns:1 }
}

@media (max-width:992px){
  .docs{ grid-template-columns:1fr; gap:1.2rem }
  .docs-toc{ position:static; max-height:none }
}
@media print{
  .docs{ display:block }
  .docs-toc{ display:none }
}