/* ══════════════════════════════════════════════
   help.css — 도움말 센터(가이드·매뉴얼·자주 묻는 질문) 공용 모양 (2026-10-28)
   공개 웹(routes/help_pages.py, body.help-public)과 앱 안 도움말 센터가 같은 클래스를 쓴다.
   값은 style.css :root 토큰만 — 색·그림자 리터럴 없음(tests/unit/frontend/test_design_ratchet.py 가 센다).
   뼈대 = 설정형(LAY-21): 왼쪽 SideNav(.cfg-subnav 규격) + 가운데 읽기 본문(최대 720). 860 아래 SideNav 는 가로 줄(LAY-22).
   ══════════════════════════════════════════════ */

/* ── 공개 웹 루트 — style.css body 는 앱 셸 전제(flex·100vh·overflow hidden)라 문서 스크롤을 되살린다 ── */
body.help-public {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    overflow: visible;
    background: var(--c-bg-card);
}
.help-public a { text-decoration: none; }
.help-public a:not(.btn) { color: inherit; }   /* 머리 '로그인'(.btn-secondary) 색은 버튼 규칙대로 */

.help-public-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-12);
    height: var(--topbar-h); padding: 0 var(--space-20);
    background: var(--c-bg-card); border-bottom: 1px solid var(--c-border);
}
.help-head-acts { display: inline-flex; align-items: center; gap: var(--space-8); }
.help-ask .svg-ic { flex-shrink: 0; }
.help-brand { display: inline-flex; align-items: center; gap: var(--space-8); font-size: 16px; font-weight: 700; color: var(--c-text); }
.help-mark { display: inline-flex; flex-shrink: 0; }
.help-mark-disc { fill: var(--c-mark-disc); }
.help-mark-1 { stroke: var(--c-mark-violet); }
.help-mark-2 { stroke: var(--c-mark-cyan); }
.help-mark-3 { stroke: var(--c-mark-yellow); }
.help-mark-4 { stroke: var(--c-mark-pink); }

/* 첫 줄 탭(LAY-09) — 모양은 공용 .tabs/.tab, 여기는 가장자리 여백만 */
.help-tabs { padding: 0 var(--space-20); background: var(--c-bg-card); }
.help-public .help-tabs .tab { color: var(--c-text-sec); }
.help-public .help-tabs .tab[aria-selected="true"] { color: var(--c-text); }

/* ── 뼈대 ── */
.help-layout { display: flex; align-items: stretch; min-height: 0; }
.help-public .help-layout, .help-public > .help-main { flex: 1; }

/* SideNav — .cfg-subnav 규격(폭 subnav-w, 면 c-bg-sec) */
.help-nav {
    width: var(--subnav-w); flex-shrink: 0;
    background: var(--c-bg-sec); border-right: 1px solid var(--c-border-l);
    padding: var(--space-12);
}
.help-nav-group { margin-bottom: var(--space-16); }
.help-nav-group:last-child { margin-bottom: 0; }
.help-nav-group-label {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-8);
    font-size: 13px; font-weight: 700; color: var(--c-text);   /* 묶음 이름이 글 줄(14·500)보다 먼저 읽히게 — 진하게 */
    padding: var(--space-4) var(--space-10) var(--space-6);
}
.help-nav-count { font-weight: 500; color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
/* 묶음 접기·펴기 — details/summary, 이름 앞 꺾쇠가 펴지면 아래로 */
summary.help-nav-group-label {
    justify-content: flex-start; list-style: none; cursor: pointer;
    border-radius: var(--radius-sm); user-select: none;
}
summary.help-nav-group-label::-webkit-details-marker { display: none; }
summary.help-nav-group-label::before {
    content: ""; width: 12px; height: 12px; flex-shrink: 0;
    background: currentColor; mask: var(--ic-chevron-right) center / contain no-repeat;
    -webkit-mask: var(--ic-chevron-right) center / contain no-repeat;
    transition: transform var(--dur) var(--ease);
}
details[open] > summary.help-nav-group-label::before { transform: rotate(90deg); }
summary.help-nav-group-label > .help-nav-count { margin-left: auto; }
summary.help-nav-group-label:hover { background: var(--c-bg-hover); }
summary.help-nav-group-label:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
details.help-nav-group:not([open]) { margin-bottom: var(--space-4); }
.help-nav-item {
    display: flex; align-items: center; gap: var(--space-8); width: 100%;
    padding: var(--space-8) var(--space-10); margin-bottom: var(--space-2);
    border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: var(--c-text-sec);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.help-public .help-nav-item { color: var(--c-text-sec); }
.help-nav-item:hover { background: var(--c-bg-hover); color: var(--c-text); }
.help-nav-item[aria-current="true"], .help-public .help-nav-item[aria-current="true"] { background: var(--c-primary-bg); color: var(--c-primary); font-weight: 600; }
.help-nav-item:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.help-nav-num { min-width: 18px; flex-shrink: 0; font-weight: 500; color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.help-nav-item[aria-current="true"] .help-nav-num { color: var(--c-primary); }
/* 현재 글의 소제목 — 보고 있는 곳은 왼쪽 2px 주색 선 */
.help-nav-sub {
    display: block; padding: var(--space-4) var(--space-10) var(--space-4) 34px; margin-left: var(--space-2);
    border-left: 2px solid transparent; font-size: 13px; color: var(--c-text-sec);
}
.help-public .help-nav-sub { color: var(--c-text-sec); }
.help-nav-sub:hover { color: var(--c-text); }
.help-nav-sub.is-on, .help-public .help-nav-sub.is-on { color: var(--c-primary); font-weight: 600; border-left-color: var(--c-primary); }

[data-theme="dark"] .help-nav { background: var(--c-bg-card); border-color: var(--c-border); }

/* ── 본문 ── */
.help-main { flex: 1; min-width: 0; display: flex; align-items: flex-start; justify-content: center; padding: var(--space-24) var(--space-32) 0; }
/* 글은 내용 높이로 자란다(align-items: flex-start) — stretch 면 글 상자가 화면 높이에 묶이고 내용이 넘쳐,
   아래 여백이 스크롤 끝에 안 잡혀 이전·다음 줄이 바닥에 붙었다. 여백은 글 쪽에 둔다. */
.help-article { width: 100%; max-width: 1040px; padding-bottom: 72px; }
.help-main > .empty-state { align-self: flex-start; width: 100%; max-width: 1040px; }
.help-crumb { font-size: 12px; color: var(--c-text-muted); margin-bottom: var(--space-8); }
.help-title { font-size: 22px; line-height: 1.35; font-weight: 700; color: var(--c-text); margin-bottom: var(--space-6); }
.help-meta { font-size: 13px; color: var(--c-text-muted); }

/* 글 머리(경로·제목·수정일)와 본문 사이 선 — 제목과 본문이 한 덩어리로 읽히던 것 */
.help-article > .help-body { margin-top: var(--space-20); padding-top: var(--space-24); border-top: 1px solid var(--c-border-l); }
.help-body { font-size: 14px; line-height: 1.75; color: var(--c-text); overflow-wrap: anywhere; }
.help-body > :first-child { margin-top: 0; }
/* 소제목 = 구역 시작 — 위에 넓은 간격과 옅은 선, 아래는 본문과 붙지 않게 */
.help-body h1, .help-body h2 {
    font-size: 18px; line-height: 1.4; font-weight: 700; margin: 40px 0 var(--space-12);
    padding-top: var(--space-24); border-top: 1px solid var(--c-border-l); scroll-margin-top: var(--space-16);
}
.help-body > h1:first-child, .help-body > h2:first-child { padding-top: 0; border-top: 0; }
/* 편집기가 남기는 빈 줄(<p><br></p>)이 소제목 바로 앞이면 접는다 — 소제목 위 간격이 이미 구역을 나눈다 */
.help-body > p:has(> br:only-child):has(+ :is(h1, h2, h3, h4, h5, h6)) { display: none; }
.help-body h3 { font-size: 16px; line-height: 1.4; font-weight: 700; margin: 28px 0 var(--space-8); }
.help-body h4, .help-body h5, .help-body h6 { font-size: 14px; font-weight: 700; margin: var(--space-24) 0 var(--space-6); }
.help-body p { margin: 0 0 var(--space-12); }
.help-body ul, .help-body ol { margin: 0 0 var(--space-12); padding-left: var(--space-20); }
.help-body li { margin: var(--space-2) 0; }
.help-body li > ul, .help-body li > ol { margin-bottom: 0; }
.help-body a, .help-public .help-body a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; }
.help-body strong, .help-body b { font-weight: 700; }
.help-body img { display: block; max-width: 100%; height: auto; margin: var(--space-12) 0; border: 1px solid var(--c-border); border-radius: var(--radius); }
.help-body figure { margin: var(--space-16) 0; }
.help-body figcaption { font-size: 12px; color: var(--c-text-muted); text-align: center; margin-top: var(--space-6); }
/* 이미지 크기 — 편집기 alt 끝의 {작게}·{중간}·{꽉 차게}(domain/help_content.figure_images). 표식 없으면 원래 크기(본문 폭까지). */
.help-body .help-fig img { margin: 0 auto; }
.help-body .help-fig-s img, .help-body img.help-img-s { width: min(100%, 320px); }
.help-body .help-fig-m img, .help-body img.help-img-m { width: min(100%, 560px); }
.help-body .help-fig-f img, .help-body img.help-img-f { width: 100%; }
.help-body blockquote {
    margin: var(--space-16) 0; padding: var(--space-8) var(--space-14);
    border-left: 2px solid var(--c-border); color: var(--c-text-sec);
}
.help-body blockquote > :last-child { margin-bottom: 0; }
.help-body code { font-family: var(--font-mono); font-size: 13px; background: var(--c-bg-el); padding: 1px var(--space-4); border-radius: var(--radius-xs); }
.help-body pre { margin: 0 0 var(--space-12); padding: var(--space-12) var(--space-14); background: var(--c-bg-el); border-radius: var(--radius-sm); overflow-x: auto; }
.help-body pre code { background: none; padding: 0; }
.help-body hr { border: 0; border-top: 1px solid var(--c-border-l); margin: var(--space-24) 0; }
.help-body table { width: 100%; border-collapse: collapse; margin: var(--space-12) 0 var(--space-16); font-size: 13px; display: block; overflow-x: auto; }
.help-body th, .help-body td { border: 1px solid var(--c-border); padding: var(--space-6) var(--space-10); text-align: left; vertical-align: top; }
.help-body th { background: var(--c-bg-sec); font-weight: 600; }

/* 유튜브 — 16:9 상자, iframe 은 상자를 채운다 */
.help-video { aspect-ratio: 16 / 9; width: 100%; margin: var(--space-16) 0; background: var(--c-bg-el); border-radius: var(--radius); overflow: hidden; }
.help-video iframe { display: block; width: 100%; height: 100%; border: 0; }

/* 이전·다음 — 두 칸 */
.help-pn { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); margin-top: var(--space-32); padding-top: var(--space-16); border-top: 1px solid var(--c-border-l); }
.help-pn a, .help-public .help-pn a {
    display: block; padding: var(--space-12) var(--space-14);
    border: 1px solid var(--c-border); border-radius: var(--radius);
    font-weight: 600; color: var(--c-text);
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.help-pn a:hover { background: var(--c-bg-hover); border-color: var(--c-border-control); }
.help-pn small { display: block; font-size: 12px; font-weight: 500; color: var(--c-text-muted); margin-bottom: var(--space-2); }
.help-pn-next { grid-column: 2; text-align: right; }

/* ── 자주 묻는 질문 — <details> 아코디언, 여러 개 펼칠 수 있다 ── */
.help-faq { width: 100%; max-width: 1040px; }
.help-faq-item { border-top: 1px solid var(--c-border-l); }
.help-faq-item:last-child { border-bottom: 1px solid var(--c-border-l); }
.help-faq-item > summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-12);
    padding: var(--space-14) var(--space-12); font-size: 14px; font-weight: 600; color: var(--c-text);
    cursor: pointer; list-style: none; transition: background var(--dur) var(--ease);
}
.help-faq-item > summary:hover { background: var(--c-bg-hover); }
/* 펼친 질문 — 옅은 바탕 + 왼쪽 2px 주색 선(목차 현재 위치와 같은 표시), 질문 글자도 주색 */
.help-faq-item[open] { background: var(--c-bg-sec); box-shadow: inset 2px 0 0 var(--c-primary); }
.help-faq-item[open] > summary { color: var(--c-primary); }
.help-faq-item[open] > summary:hover { background: transparent; }
.help-faq-item > summary::-webkit-details-marker { display: none; }
.help-faq-item > summary::after {
    content: ""; flex-shrink: 0; width: 16px; height: 16px; color: var(--c-text-muted);
    background: currentColor; mask: var(--ic-chevron-down) center / contain no-repeat;
    -webkit-mask: var(--ic-chevron-down) center / contain no-repeat;
    transition: transform var(--dur) var(--ease);
}
.help-faq-item[open] > summary::after { transform: rotate(180deg); }
.help-faq-item > summary:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.help-faq-cat { font-size: 12px; font-weight: 500; color: var(--c-text-muted); margin-right: var(--space-8); }
.help-faq-a { padding: var(--space-4) var(--space-12) var(--space-20); color: var(--c-text); }

/* ── 좁은 폭 ── */
@media (max-width: 860px) {
    .help-layout { flex-direction: column; }
    /* 묶음을 접고 펴는 목차라 가로 한 줄(LAY-22) 대신 본문 위 세로 목록 — 지금 글 묶음만 펴져 짧다, 넘치면 그 칸만 스크롤 */
    .help-nav {
        width: 100%; max-height: 40vh; overflow-y: auto; padding: var(--space-10);
        border-right: 0; border-bottom: 1px solid var(--c-border-l);
    }
    .help-nav-sub { display: none; }
    .help-main { padding: var(--space-20) var(--space-16) 0; }
    .help-article { padding-bottom: 56px; }
}
@media (max-width: 768px) {
    .help-public-head, .help-tabs { padding: 0 var(--space-16); }
    .help-ask > span { display: none; }   /* 좁은 폭은 말풍선 아이콘만(aria-label 이 이름) */
    .help-pn { grid-template-columns: 1fr; }
    .help-pn-next { grid-column: auto; }
}