/* Istream 아이스트림 Q&A: MoToo learn 구조(왼쪽 카테고리, 오른쪽 검색 + 펼치는 질문). legal.css 색 토큰을 쓴다 */
.legal.qna { max-width: 980px; padding-block: clamp(24px, 5vw, 40px) clamp(32px, 6vw, 56px); padding-inline: clamp(14px, 3.5vw, 20px); }
/* 질문이 적은 카테고리를 골라도 푸터가 위로 딸려 올라오지 않게 본문 높이를 화면 높이만큼 잡아 둔다(헤더 약 74px) */
.legal.qna { min-height: calc(100vh - 74px); min-height: calc(100dvh - 74px); }
.qna-desc { margin: -6px 0 28px; color: var(--muted); word-break: keep-all; }
.qna-split { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
.qna-cats { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 4px; }
.qna-cat { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 40px; box-sizing: border-box; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; white-space: nowrap; }
.qna-cat b { color: var(--dim); font-weight: 600; font-variant-numeric: tabular-nums; }
.qna-cat:hover { background: var(--bg-2); color: var(--text); }
.qna-cat.active { background: rgba(0, 210, 255, .12); color: var(--accent); }
.qna-cat.active b { color: var(--accent); }
.qna-cat:focus-visible, .qna-q:focus-visible, .qna-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.qna-search { display: block; width: 100%; box-sizing: border-box; height: 48px; padding: 0 16px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); color: var(--text); font: inherit; font-size: 16px; }
.qna-search::placeholder { color: var(--dim); }
.qna-list { display: flex; flex-direction: column; gap: 8px; }
.qna-item { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); overflow: hidden; }
.qna-item.open { border-color: rgba(0, 210, 255, .35); }
.qna-q { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; box-sizing: border-box; padding: 14px 16px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; word-break: keep-all; }
.qna-tag { flex: none; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--muted); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.qna-text { flex: 1; min-width: 0; }
.qna-arrow { flex: none; width: 8px; height: 8px; border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim); transform: rotate(45deg); transition: transform .15s; }
.qna-item.open .qna-arrow { transform: rotate(-135deg); }
.qna-a { padding: 0 16px 16px; color: var(--muted); font-size: 14.5px; line-height: 1.75; word-break: keep-all; }
.qna-a a, .qna-empty a { color: var(--accent); }
.qna-a > b:first-child { color: var(--text); }
.qna-a ul { margin: 8px 0 10px; padding-left: 18px; }
.qna-a li { margin: 6px 0; color: var(--muted); }
.qna-a li b { color: var(--text); }
.qna-empty { color: var(--muted); padding: 20px 4px; }
@media (max-width: 768px) {
  .qna-split { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .qna-cats { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .qna-cat { width: auto; min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
  .qna-tag { display: none; }
}
@media (prefers-reduced-motion: reduce) { .qna-arrow { transition: none; } }