/* 서비스 안내 (/guide.html) — 큐의 지식 나무 한 장. 기둥·글자 계단·조작 높이는 style.css 의 토큰을 그대로 쓴다. */
.help-wrap{padding-bottom:var(--sp-40)}
.help-head{display:grid;grid-template-columns:1fr auto;gap:var(--sp-20);align-items:end;padding:var(--sp-32) 0 var(--sp-20);border-bottom:1px solid var(--line)}
.help-head h1{margin:var(--sp-4) 0 var(--sp-8)}
.help-lead{margin:0;max-width:62ch;color:var(--ink-2);font-size:var(--t-md);line-height:var(--lh-body)}
/* 검색 칸은 폭이 고정이다 (P08) — 개수 글자가 생길 때 같은 줄에서 칸을 왼쪽으로 밀고, 좁은 칸에서 안내문이 잘렸다.
   개수는 칸 아래 자리에 선다. */
.help-search{position:relative;display:flex;align-items:center;width:340px;max-width:100%}
.help-search input{width:100%;height:var(--ctl-xl);min-width:0;padding:0 var(--sp-12);border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface-2);color:var(--ink);font:var(--t-base)/1 var(--body)}
.help-search input:focus-visible{outline:2px solid var(--hot);outline-offset:1px}
.help-count{position:absolute;top:calc(100% + var(--sp-4));right:0;font-size:var(--t-sm);color:var(--ink-2);white-space:nowrap}
.help-search input::placeholder{color:var(--ink-3);text-overflow:ellipsis}

.help-grid{display:grid;grid-template-columns:220px 1fr;gap:var(--sp-32);align-items:start;padding-top:var(--sp-24)}
.help-toc{position:sticky;top:68px;display:flex;flex-direction:column;gap:2px}
.help-toc a{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-8);min-height:var(--ctl-md);padding:0 var(--sp-10);border-radius:var(--r);color:var(--ink-2);font-size:var(--t-base);text-decoration:none}
.help-toc a{transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.help-toc a em{font-style:normal;font-size:var(--t-xs);color:var(--ink-3)}
.help-toc a:hover{background:var(--fill);color:var(--ink)}
.help-toc a[hidden]{display:none}
.help-toc a.on{background:var(--fill-2);color:var(--ink);font-weight:600}

.help-domain{padding-bottom:var(--sp-24);margin-bottom:var(--sp-24);border-bottom:1px solid var(--line)}
.help-domain:last-child{border-bottom:0}
.help-domain h2{margin:0 0 var(--sp-10);font-size:var(--t-lg);font-weight:700;scroll-margin-top:72px}
.help-domain h2 small{margin-inline-start:var(--sp-6);font-size:var(--t-xs);font-weight:500;color:var(--ink-3)}
.help-topic{border-top:1px solid var(--line);scroll-margin-top:72px}
.help-topic>summary{gap:var(--sp-10);min-height:var(--ctl-xl);padding:var(--sp-6) 0;font-size:var(--t-md);font-weight:600;color:var(--ink)}
.help-a{padding:0 0 var(--sp-14);color:var(--ink-1);font-size:var(--t-base);line-height:var(--lh-body)}
.help-a p{margin:0 0 var(--sp-8);max-width:72ch}
.help-a .guide-val{color:var(--ink);font-weight:700}
.help-a .guide-item{display:inline-block;margin:0 var(--sp-4) var(--sp-4) 0;padding:var(--sp-2) var(--sp-8);border-radius:var(--r-full);background:var(--fill);font-size:var(--t-sm)}
.help-goes,.help-rels{display:flex;flex-wrap:wrap;gap:var(--sp-6);margin-top:var(--sp-6)}
.help-go{display:inline-flex;align-items:center;gap:var(--sp-4);height:var(--ctl-md);padding:0 var(--sp-10);border:1px solid var(--line-2);border-radius:var(--r);color:var(--ink);font-size:var(--t-sm);text-decoration:none}
.help-go:hover{background:var(--fill)}
.help-go small{font-size:var(--t-xs);color:var(--ink-3)}
.help-rels{align-items:center;font-size:var(--t-sm)}
.help-rels span{color:var(--ink-3)}
.help-rel{color:var(--hot);text-decoration:none}
.help-rel:hover{text-decoration:underline}

.help-ask{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-20);margin-top:var(--sp-32);padding:var(--sp-20);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}
.help-ask b{font-size:var(--t-md)}
.help-ask p{margin:var(--sp-4) 0 0;color:var(--ink-2);font-size:var(--t-base)}
.help-ask-actions{display:flex;gap:var(--sp-8);flex:0 0 auto}
.help-empty{display:grid;justify-items:start;gap:var(--sp-8);padding:var(--sp-40) var(--sp-24);border:1px dashed var(--line-2);border-radius:var(--r-lg);background:var(--surface-2)}
.help-empty b{font-size:var(--t-xl)}
.help-empty p{margin:0;max-width:56ch;color:var(--ink-2);font-size:var(--t-md);line-height:var(--lh-body)}
.help-empty .help-ask-actions{margin-top:var(--sp-8)}
.help-foot{display:flex;gap:var(--sp-20);flex-wrap:wrap;border-top:1px solid var(--line);margin-top:var(--sp-32);padding-top:var(--sp-20);font-size:var(--t-base);color:var(--ink-2)}

@media (max-width:900px){
  .help-head{grid-template-columns:1fr}
  .help-search{width:100%}
  .help-grid{grid-template-columns:1fr;gap:var(--sp-16)}
  .help-toc{position:static;flex-direction:row;flex-wrap:wrap;gap:var(--sp-6)}
  .help-toc a{min-height:var(--ctl-sm);padding:0 var(--sp-8);border:1px solid var(--line);font-size:var(--t-sm)}
  .help-ask{flex-direction:column;align-items:stretch}
}

/* 한국어는 어절 단위로 접는다 (P15) — '했습니/다' 처럼 낱글자에서 끊긴 줄이 남았다 */
.help-wrap:lang(ko){word-break:keep-all;overflow-wrap:anywhere}
/* 한·중·일 눈썹 글은 넓은 자간이 낱글자로 흩어진다 (P17) — 영어 대문자용 .15em 을 줄인다 */