/* 안내 모드 — 허브 인트로 박스 + 레퍼런스 섹션을 옮긴 읽기 전용 콘텐츠.
   부모(.mode-root)가 overflow:hidden 이라 이 안에서 직접 스크롤한다. */
/* keep-all: 숫자+단위(예: "8개")나 영문 약어+조사 사이에서 한글 줄바꿈 규칙상
   임의로 끊기는 걸 막는다 — 공백에서만 줄을 바꾼다.
   너비는 다른 모드(browse-list 등)처럼 제한을 두지 않는다 — max-width 로
   좁혀두면 넓은 화면에서 내용이 왼쪽에 쏠리고 오른쪽이 통째로 빈다. */
.about{height:100%;overflow-y:auto;padding:18px 22px;word-break:keep-all}
/* 허브의 .intro-box 처럼 흰 카드 위에 얹는다 — 페이지 배경(body의 --bg-soft, 옅은
   회색)에 문단·안내문이 그대로 노출되면 회색 배경에 회색 글자가 겹쳐 가독성이 떨어진다. */
.ab-section{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:20px 24px;
}
.ab-section + .ab-section{margin-top:20px}
.ab-section h2{margin:0 0 10px;font-size:18px}
.ab-h4{margin:22px 0 10px;font-size:13px;color:var(--text);font-weight:700}
.ab-lead{margin:0 0 12px;font-size:13.5px;line-height:1.7;color:var(--text-sub)}
.ab-note{
  margin:0 0 8px;padding:9px 12px;border-radius:var(--radius);
  background:var(--bg-tint);color:var(--text-sub);font-size:12.5px;line-height:1.6;
}

.ab-guide-grid{
  /* auto-fit: 카드 수보다 계산된 열이 많으면 남는 열을 접어 있는 카드들이
     그만큼 더 넓게 펴진다 — auto-fill 이면 빈 열이 폭만 차지하고 그대로 남는다. */
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;
  align-items:start; /* 링크 수가 다른 카드끼리 같은 줄에서 키를 맞추면 짧은 카드에
                        빈 공간만 남는다 — 각자 내용 높이만큼만 차지하게 한다 */
}
.ab-guide-group{
  border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;background:var(--bg);
}
.ab-guide-head{
  display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:13px;font-weight:700;color:var(--text);
}
.ab-auto-tag{
  margin-left:auto;padding:1px 7px;border-radius:999px;background:var(--accent-bg);
  color:var(--primary);font-size:10px;font-weight:600;white-space:nowrap;
}
.ab-other-note{margin:0;font-size:12px;color:var(--text-muted);line-height:1.6}

.ab-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.ab-links a{color:var(--primary);font-size:12.5px;text-decoration:none}
.ab-links a:hover{text-decoration:underline}

.ab-changelog{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ab-changelog li{font-size:12.5px;line-height:1.6;color:var(--text-sub)}
.ab-changelog strong{color:var(--text);margin-right:4px}

.ab-caution{
  margin-top:20px;padding:10px 12px;border-radius:var(--radius);
  border:1px solid #FDE68A;background:#FFFBEB;color:#92400E;font-size:12.5px;line-height:1.6;
}

@media (max-width:760px){
  .ab-guide-grid{grid-template-columns:1fr}
}