/* ==========================================================================
   docs.css — 사용 가이드 허브(hub-) · 가이드 글(g-) (B3 · DESIGN 8-2 · 8-3 · 3-4 · 3-5 · 3-8 · 4-9 자리 · 4-11)
   - 색 · 그림자 · 모서리는 tokens.css 이름만(테마는 html[data-theme] 하나 — 이 파일에 색 테마 미디어 쿼리 0).
   - 단계 목록(.tx-steps)의 꼴 · 진행선 · 지금 장 = B2 player.css · 그림(.tx-fig) 꼴 = B2 fig.css — 여기는 자리 · 여백만(M4).
   - ≤1023 채팅 길(3-8): 글자 줄 · 조작 · 그림은 max-width:calc(100% - var(--lane-cut)) → 오른쪽 84px 비움.
     폭 전체 플레이어만 예외(재생을 누르면 player.js 가 화면 가운데로).
   - 그라데이션 · 빛 번짐 · 입자 0 · 움직임은 guide.js(편 탭 표시기 · 스프링) 만.
   ========================================================================== */

/* ── 공통: 빵부스러기 ───────────────────────────────────────── */
.g-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 0; padding: 0; list-style: none;
  font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--ink-3); }
.g-crumb li { display: inline-flex; align-items: center; min-width: 0; }
.g-crumb li + li::before { content: "\203A"; margin: 0 8px; color: var(--ink-3); }
.g-crumb a { color: var(--ink-2); border-radius: 4px; }
.g-crumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.g-crumb [aria-current] { color: var(--ink-3); }

/* ========================================================================
   가이드 글 /ko/docs/<slug>/ (8-3)
   ======================================================================== */
.g-page { display: grid; grid-template-columns: minmax(0, 1fr); padding: 28px 0 96px; }
.g-article { min-width: 0; }
/* ≥1280: 본문 열 760 + 오른쪽 레일 300 — 본문 왼쪽 끝 = 로고 · 레일 오른쪽 끝 = 머리글 주 단추(1440 → x 1340 · H14) */
@media (min-width: 1280px) {
  .g-page { grid-template-columns: minmax(0, 760px) 300px; column-gap: 56px; justify-content: space-between; align-items: start; }
}
/* 1024–1279: 레일 없음 · 본문 열 가운데 760 */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .g-article { width: 100%; max-width: 760px; margin-inline: auto; }
}
@media (max-width: 1279.98px) { .g-rail { display: none; } }

.g-title {
  margin: 14px 0 28px; font-size: 40px; font-weight: 800; line-height: 1.2; letter-spacing: -.04em;
  word-break: keep-all; text-wrap-style: balance;
}
@media (max-width: 1439px) { .g-title { font-size: 36px; } }
@media (max-width: 1023.98px) { .g-title { font-size: 32px; } }
@media (max-width: 600.98px)  { .g-title { font-size: 28px; margin: 10px 0 20px; } }

/* 플레이어 · 편 탭(H9 — 본문 열 맨 위 하나) */
.g-media { margin: 0; }
.g-tabs {
  position: relative; display: flex; gap: 2px; width: max-content; max-width: 100%;
  margin: 0 0 14px; padding: 3px; border-radius: 999px; background: var(--bg-2);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.g-tabs::-webkit-scrollbar { display: none; }
.g-tab {
  position: relative; z-index: 1; flex: none; min-height: 38px; padding: 0 16px; border-radius: 999px;
  font-size: 14px; font-weight: 650; line-height: 1.2; color: var(--ink-2); white-space: nowrap;
  transition: color var(--ui-fast) ease-out;
}
.g-tab:hover { color: var(--ink); }
.g-tab[aria-selected="true"] { color: var(--ink); }
.g-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
/* 표시기 = 한 요소의 앞 · 뒤 가장자리(sp.edgeLead ω18 ζ.82 / sp.edgeTrail ω14 ζ.9 · 0.06초 늦게 — guide.js) */
.g-tabs__ind {
  position: absolute; z-index: 0; top: 3px; left: 0; width: 0; height: calc(100% - 6px);
  border-radius: 999px; background: var(--surface); box-shadow: var(--sh-1); pointer-events: none; visibility: hidden;
}
.g-tabs.is-ready .g-tabs__ind { visibility: visible; }
/* JS 전 첫 그림에도 지금 편이 보이게(빈 탭 줄 0) */
.g-tabs:not(.is-ready) .g-tab[aria-selected="true"] { background: var(--surface); box-shadow: var(--sh-1); }
.g-panel { margin: 0; }

/* 본문(운영 MDX 원문 — 문단 → 그림 · 소제목 위 여유) */
.g-body { margin: 0; }
.g-sec { margin-top: 52px; }
.g-body > .g-sec:first-child { margin-top: 44px; }
.g-page.no-video .g-body > .g-sec:first-child { margin-top: 0; }
.g-sub { margin-top: 34px; }
.g-h2 { margin: 0 0 12px; font-size: 24px; font-weight: 750; line-height: 1.42; letter-spacing: -.025em; word-break: keep-all; }
.g-h3 { margin: 0 0 10px; font-size: 19px; font-weight: 750; line-height: 1.45; letter-spacing: -.018em; word-break: keep-all; }
.g-sec--sub > .g-h3 { margin-top: 0; }
.g-h__t { word-break: keep-all; }
.g-h2 .tx-steptime, .g-h3 .tx-steptime { position: relative; top: -.08em; }
/* 재생 중 지금 단계 점(B2 .tx-stepdot · 8px)은 제목 글자를 밀지 않게 왼쪽 여백에 걸어 둠(≥601 — 본문 왼쪽에 자리가 있음) */
@media (min-width: 601px) {
  .g-h2, .g-h3 { position: relative; }
  .g-h2 > .tx-stepdot, .g-h3 > .tx-stepdot { position: absolute; left: -20px; top: calc(.5lh - 4px); margin: 0; }   /* 첫 줄 가운데 */
}
.g-p { margin: 0 0 16px; font-size: 17px; font-weight: 450; line-height: 1.85; color: var(--ink); word-break: keep-all; overflow-wrap: break-word; }
.g-p a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.g-body .g-fig { margin: 22px 0 34px; }
.g-figdrop { display: block; height: 0; margin: 0; padding: 0; }
@media (max-width: 1023.98px) {
  .g-h2 { font-size: 22px; }
}
@media (max-width: 600.98px) {
  .g-sec { margin-top: 44px; }
  .g-h2 { font-size: 21px; }
  .g-h3 { font-size: 18px; }
  .g-p { font-size: 16px; line-height: 1.8; }
}

/* 이어지는 사용 가이드(운영 NextGuides — .tx-next 3) */
.g-next { margin-top: 64px; }
.g-next__h { margin: 0 0 16px; font-size: 20px; font-weight: 750; line-height: 1.4; letter-spacing: -.015em; }
.g-next__card { min-height: 112px; }
.g-next__card .g-next__group { font-size: 13px; font-weight: 650; color: var(--ink-3); }
.g-next__card .g-next__title { font-size: 16px; font-weight: 700; line-height: 1.45; color: var(--ink); }
.g-next__card .g-next__len { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 6px; }
.g-next__len svg { width: 15px; height: 15px; flex: none; }
.g-next__len > span { font-size: 13px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.g-next__card:hover .g-next__title { text-decoration: underline; text-underline-offset: 3px; }

/* 「해결이 안 됐나요?」 한 줄 */
.g-help {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  margin: 56px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line);
}
.g-help__t { margin: 0; font-size: 17px; font-weight: 750; line-height: 1.4; }
.g-help__btn svg { width: 18px; height: 18px; flex: none; }

/* 「이 문서에서」 레일(≥1280 · 끈끈 top = sticky-top + 24 — 3-9) */
.g-rail { position: sticky; top: calc(var(--sticky-top) + 24px); align-self: start; margin-top: 40px; min-width: 0; }
.g-rail__in { max-height: calc(100vh - var(--sticky-top) - 48px); overflow-y: auto; overscroll-behavior: contain; padding: 4px 4px 8px; scrollbar-width: thin; }   /* 안 여백 4 = 초점 고리 자리(레일 밖으로 넘치지 않게 음수 여백 0) */
.g-rail__title { margin: 0 0 8px 2px; font-size: 13px; font-weight: 750; line-height: 1.4; color: var(--ink-3); }
.g-steps { margin: 0; }
.g-steps .tx-step { min-height: 38px; padding-top: 7px; padding-bottom: 7px; }
.g-steps .tx-step__name { font-size: 14.5px; line-height: 1.45; }
.g-steps__li--sub .tx-step__name { padding-left: 12px; font-size: 14px; }
/* 한국 전용 편의 장(한국 밖이면 그 편 플레이어가 접힘) — 시각만 숨기고 누르면 그 절로(guide.js) */
html:not([data-country="KR"]) .g-steps [data-kr-vid] .tx-step__t { visibility: hidden; }
.g-step--link { text-decoration: none; }
.g-step--link:hover .tx-step__name { text-decoration: underline; text-underline-offset: 3px; }

/* 레일 위 작은 조작 줄 — 플레이어가 화면 밖이고 재생 중일 때만(guide.js) · iframe 은 옮기지 않음 */
.g-mini {
  display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 8px 8px 8px 8px;
  border-radius: 16px; background: var(--surface); box-shadow: var(--sh-2);
}
.g-mini[hidden] { display: none; }
.g-mini__pp {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 50%; background: var(--btn); color: var(--btn-ink);
}
.g-mini__pp svg { width: 18px; height: 18px; }
.g-mini__pp:focus-visible, .g-mini__go:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.g-mini:not([data-state="playing"]) .g-mini__i--pause, .g-mini[data-state="playing"] .g-mini__i--play { display: none; }
.g-mini__i { display: inline-flex; }
.g-mini__time { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.g-mini__go {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 0 12px 0 9px;
  border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line-strong); font-size: 13px; font-weight: 650; color: var(--ink); white-space: nowrap;
}
.g-mini__go svg { width: 15px; height: 15px; }
.g-mini__go:hover { box-shadow: inset 0 0 0 1.5px var(--ink-2); }

/* ≤1023 채팅 길(3-8) — 글자 · 조작 · 그림은 오른쪽 84 비움 · 폭 전체 플레이어만 예외 */
@media (max-width: 1023.98px) {
  .g-crumb, .g-title, .g-tabs, .g-body, .g-next, .g-help { max-width: calc(100% - var(--lane-cut)); }
  .g-next .tx-next { max-width: none; }        /* 바깥 .g-next 가 이미 채팅 길만큼 줄었으므로 core 의 같은 줄임을 두 번 하지 않음 */
}
@media (max-width: 600.98px) {
  .g-page { padding-top: 20px; }
  .g-tab { min-height: 36px; padding: 0 14px; }
}

/* ========================================================================
   사용 가이드 허브 /ko/docs/ (8-2)
   ======================================================================== */
.hub { padding: 16px 0 96px; }
.hub-title { margin: 40px 0 6px; font-size: 34px; font-weight: 800; line-height: 1.25; letter-spacing: -.035em; }   /* 카드형(사용자 10/20 참고 그림) */
.hub-sub { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.6; color: var(--ink-2); word-break: keep-all; }
@media (max-width: 1439px) { .hub-title { font-size: 32px; } }
@media (max-width: 1023.98px) { .hub-title { margin-top: 32px; font-size: 30px; } .hub-sub { font-size: 16px; } }
@media (max-width: 600.98px)  { .hub-title { margin-top: 24px; font-size: 26px; } .hub-sub { font-size: 15px; } }

/* 「질문」 칸(꼬리표 + 칸 · 모서리 0 20 20 20 — 3-6) */
.hub-q { position: relative; max-width: 640px; margin-top: 62px; }
.hub-q__tab {
  position: absolute; left: 0; bottom: calc(100% - 1.5px); z-index: 1; display: flex; align-items: center;
  height: 31.5px; margin: 0; padding: 0 15px 1.5px; border: 1.5px solid var(--line-strong); border-bottom: 0;
  border-radius: 12px 12px 0 0; background: var(--surface); font-size: 13px; font-weight: 700; line-height: 1; color: var(--ink);
}
.hub-q__field {
  position: relative; display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 14px 0 18px;
  border: 1.5px solid var(--line-strong); border-radius: 0 20px 20px 20px; background: var(--surface); cursor: text;
}
.hub-q__field:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.hub-q__ico { display: inline-flex; color: var(--ink-3); }
.hub-q__ico svg { width: 20px; height: 20px; }
.hub-q__input {
  flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; background: none;
  font-size: 17px; font-weight: 500; color: var(--ink); caret-color: var(--accent); outline: none;
  -webkit-appearance: none; appearance: none;
}
.hub-q__input:focus-visible { outline: none; }
.hub-q__input::placeholder { color: var(--ink-3); opacity: 1; }
.hub-q__input::-webkit-search-cancel-button, .hub-q__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.hub-q__kbd { flex: none; }
@media (max-width: 1023.98px) {
  .hub-q__kbd { display: none; }
  .g-crumb, .hub-title, .hub-sub, .hub-q { max-width: calc(100% - var(--lane-cut)); }
}
@media (max-width: 600.98px) {
  .hub-q { margin-top: 52px; }
  .hub-q__tab { font-size: 14px; }             /* 「질문」 꼬리표 ≤600 14px/700(3-4 — 13px 층에 안 셈) */
  .hub-q__field { height: 56px; padding: 0 12px 0 14px; }
  .hub-q__input { font-size: 16px; }           /* iOS 확대 방지 16 이상 */
  /* 판단: 채팅 길 너비(390 → 290)에 운영 자리표시 「무엇을 찾으세요? 예: 문자가 안 보여요」가 다 들어가게 —
     ≤600 은 돋보기를 빼고(「질문」 꼬리표가 이름) 자리표시만 15px(입력 글자는 16 그대로 — 확대 방지) · ≤380 은 14px */
  .hub-q__ico { display: none; }
  .hub-q__input::placeholder { font-size: 15px; }
}
@media (max-width: 380px) { .hub-q__input::placeholder { font-size: 14px; } }
.hub-index { position: relative; }

/* 답 자리(inline 답 카드 — 꼴 = B2 answer.css) */
.hub-ans { max-width: 760px; }
.hub-ans:empty { display: none; }
@media (max-width: 1023.98px) { .hub-ans { max-width: calc(100% - var(--lane-cut)); } }   /* 위 760 뒤에 — 채팅 길이 이김 */

/* 두 문(8-2 #3) — ≥1280 둘 칸(7 : 5) · 그 아래는 세로 */
.hub-doors { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 44px 0 0; }
@media (min-width: 1280px) { .hub-doors { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; } }
@media (max-width: 1023.98px) { .hub-doors { max-width: calc(100% - var(--lane-cut)); } }
.hub.is-filtering .hub-doors { display: none; }
.hub-door { min-width: 0; padding: 24px 26px 22px; border-radius: var(--r-board); background: var(--surface); box-shadow: var(--sh-1); }
.hub-door__h { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.3; letter-spacing: -.03em; }
.hub-door__ha { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); border-radius: 6px; }
.hub-door__ha svg { width: 20px; height: 20px; color: var(--ink-3); }
.hub-door__ha:hover { text-decoration: underline; text-underline-offset: 4px; }
.hub-door__sub { margin: 4px 0 0; font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--ink-2); }
.hub-door__link { margin-top: 2px; }
@media (max-width: 600.98px) { .hub-door { padding: 20px 18px 18px; } }

/* 처음 시작하기 작은 정지판(7-1 — 6역 이름 · 고리만 · 길이 0) · 폰 차선 위 · PC 차선 아래 · ④ 캡슐이 두 차선을 잇는다 */
.hub-route { --lab: 34px; --y1: 22px; --y2: 98px; position: relative; height: 158px; margin: 22px 0 10px; }
.hub-route__lane { position: absolute; left: 0; font-size: 13px; font-weight: 700; line-height: 1; color: var(--ink-2); }
.hub-route__lane[data-lane="phone"] { top: calc(var(--y1) - 7px); }
.hub-route__lane[data-lane="pc"] { top: calc(var(--y2) - 7px); }
.hub-route__line { position: absolute; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--ink); }
.hub-route__line[data-lane="phone"] { top: var(--y1); left: calc(var(--lab) + (100% - var(--lab)) * .5 / 6); width: calc((100% - var(--lab)) * 3 / 6); }
.hub-route__line[data-lane="pc"]    { top: var(--y2); left: calc(var(--lab) + (100% - var(--lab)) * 3.5 / 6); width: calc((100% - var(--lab)) * 2 / 6); }
.hub-route__st { position: absolute; top: 0; right: 0; bottom: 0; left: var(--lab); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.hub-route__li { position: relative; min-width: 0; }
.hub-route__ring {
  position: absolute; left: 50%; width: 22px; height: 22px; margin-left: -11px;
  border: 3px solid var(--ink); border-radius: 50%; background: var(--surface);
}
.hub-route__li[data-lane="phone"] .hub-route__ring { top: calc(var(--y1) - 11px); }
.hub-route__li[data-lane="pc"] .hub-route__ring { top: calc(var(--y2) - 11px); }
.hub-route__li[data-lane="transfer"] .hub-route__ring { top: calc(var(--y1) - 11px); width: 26px; height: calc(var(--y2) - var(--y1) + 22px); margin-left: -13px; border-radius: 13px; }
.hub-route__name {
  position: absolute; left: 2px; right: 2px; text-align: center; font-size: 13px; font-weight: 650; line-height: 1.35;
  color: var(--ink); word-break: keep-all; overflow-wrap: break-word;
}
.hub-route__li[data-lane="phone"] .hub-route__name { top: calc(var(--y1) + 17px); }
.hub-route__li[data-lane="pc"] .hub-route__name,
.hub-route__li[data-lane="transfer"] .hub-route__name { top: calc(var(--y2) + 17px); }
/* ≤600 세로 노선(4-16 390 꼴 — 왼쪽 세로 3px 선 · 고리 · 오른쪽 이름 · ④ 는 가로 캡슐) */
@media (max-width: 600.98px) {
  .hub-route { height: auto; margin: 18px 0 10px; }
  .hub-route__lane, .hub-route__line { display: none; }
  .hub-route__st { position: relative; inset: auto; display: block; }
  .hub-route__st::before { content: ""; position: absolute; left: 13px; top: 20px; bottom: 20px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); }
  .hub-route__li { display: flex; align-items: center; gap: 12px; min-height: 40px; }
  .hub-route__ring, .hub-route__li[data-lane] .hub-route__ring { position: relative; left: auto; top: auto; flex: none; margin: 0 0 0 2px; }
  .hub-route__li[data-lane="transfer"] .hub-route__ring { width: 26px; height: 22px; margin-left: 0; border-radius: 11px; }
  .hub-route__name, .hub-route__li[data-lane] .hub-route__name { position: static; text-align: left; font-size: 15px; }
}

/* 「문제 해결」 문 — 증상 3(운영 글 제목) */
.hub-sym { margin: 14px 0 0; padding: 0; list-style: none; }
.hub-sym li + li { border-top: 1px solid var(--line); }
.hub-sym__a { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 10px 2px; font-size: 16px; font-weight: 650; line-height: 1.45; color: var(--ink); }
.hub-sym__a > span { flex: 1; min-width: 0; }
.hub-sym__a svg { width: 18px; height: 18px; flex: none; color: var(--ink-3); }
.hub-sym__a:hover > span { text-decoration: underline; text-underline-offset: 3px; }

/* 묶음 칩 막대(끈끈 · 높이 --chipbar-h 52 · 지금 묶음 = 흰 알약 + 앞 정지 주황 점 — 8-2 #4) */
.hub-chips {
  position: sticky; top: var(--sticky-top); z-index: var(--z-chipbar); height: var(--chipbar-h);
  display: flex; align-items: center; gap: 28px; margin: 0; background: var(--bg);
}
.hub-chips__label { flex: none; margin: 0 0 0 2px; font-size: 18px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
@media (max-width: 600.98px) { .hub-chips__label { display: none; } }
.hub-chips.is-stuck { box-shadow: 0 1px 0 var(--line); }
.hub-chips__in {
  display: flex; align-items: center; gap: 4px; height: 100%; padding: 0 2px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.hub-chips__in::-webkit-scrollbar { display: none; }
.hub-chips .hub-chips__in { flex: 1; min-width: 0; }
.hub-chip {
  flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px;
  border-radius: 999px; font-size: 14px; font-weight: 650; line-height: 1.2; color: var(--ink-2); white-space: nowrap;
  transition: background-color var(--ui-fast) ease-out, color var(--ui-fast) ease-out;
}
.hub-chip:hover { color: var(--ink); background: var(--bg-2); }
.hub-chip[aria-current="true"] { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-ink); }
.hub-chip[aria-current="true"]::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.hub-chip:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
@media (max-width: 1023.98px) { .hub-chips { max-width: calc(100% - var(--lane-cut)); } }

/* 묶음 칸 10(8-2 #5) — ≥1024 왼쪽 묶음 이름 · 부제 / 오른쪽 글 줄 */
.hub-groups { margin: 0; }
.hub-group { padding: 40px 0 0; }   /* 카드형: 묶음 머리(제목 + 설명 한 줄) 아래 카드 · 선 없음(사용자 10/20 참고 그림) */
.hub-group:first-child { padding-top: 32px; }
.hub-group[hidden] { display: none; }
.hub-group__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0 0 18px; }
.hub-group__h { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.3; letter-spacing: -.03em; }
.hub-group__sub { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--ink-2); word-break: keep-all; }
/* 카드(사용자 10/20 참고 그림) — ≥1024 세 칸 · 601~1023 두 칸 · ≤600 한 칸 · 처음 시작하기 = 넓은 카드 하나 */
.hub-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 1023.98px) { .hub-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 600.98px) { .hub-rows { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
.hub-rows--hero { grid-template-columns: minmax(0, 1fr); }
.hub-rows__li { display: flex; min-width: 0; }
.hub-rows__li[hidden] { display: none; }
.hub-card {
  display: flex; align-items: center; gap: 18px; width: 100%; min-height: 96px; padding: 18px 22px 18px 20px;
  border-radius: 16px; background: var(--surface); box-shadow: var(--sh-1); color: var(--ink);
  transition: box-shadow var(--ui-fast) ease-out, transform var(--ui-fast) ease-out;
}
.hub-card:hover { box-shadow: var(--sh-2); transform: translateY(-1px); }
.hub-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.hub-card__ico { --c: #3478F6; flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--c); }
.hub-card__ico svg { width: 26px; height: 26px; }
.hub-card__ico[data-c="orange"] { --c: #F26B3A; }
.hub-card__ico[data-c="green"]  { --c: #1FA36A; }
.hub-card__ico[data-c="purple"] { --c: #7C5CE0; }
.hub-card__ico[data-c="blue"]   { --c: #3478F6; }
.hub-card__ico[data-c="yellow"] { --c: #E39A12; }
.hub-card__ico[data-c="red"]    { --c: #E5484D; }
.hub-card__main { flex: 1; min-width: 0; }
.hub-card__t { display: block; font-size: 17px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em; word-break: keep-all; }
.hub-card__d { display: block; margin-top: 4px; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--ink-2); word-break: keep-all; }
.hub-card__len { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hub-card__len svg { width: 18px; height: 18px; flex: none; }
.hub-card__go { flex: none; display: inline-flex; color: var(--ink-2); }
.hub-card__go svg { width: 20px; height: 20px; }
.hub-card--hero { gap: 28px; min-height: 124px; padding: 22px 30px 22px 38px; background: color-mix(in srgb, var(--accent) 11%, var(--surface)); box-shadow: none; }
.hub-card--hero .hub-card__t { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.hub-card__play { flex: none; display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.hub-card__play svg { box-sizing: content-box; width: 22px; height: 22px; padding: 9px 8px 9px 10px; border-radius: 50%; background: var(--accent); color: #FFFFFF; }
@media (max-width: 600.98px) {
  .hub-card { gap: 14px; min-height: 76px; padding: 14px 16px; }
  .hub-card__ico { width: 46px; height: 46px; border-radius: 12px; }
  .hub-card__ico svg { width: 22px; height: 22px; }
  .hub-card__t { font-size: 16px; }
  .hub-card--hero { gap: 16px; padding: 18px; }
  .hub-card--hero .hub-card__t { font-size: 19px; }
  .hub-card__d { font-size: 14px; }
  .hub-card__play { width: 60px; height: 60px; }
  .hub-card__play svg { width: 18px; height: 18px; padding: 7px 6px 7px 8px; }
}
.hub-row__sec { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--ink-3); }
.hub-row__sec[hidden] { display: none; }
.hub-hit { background: none; color: inherit; text-decoration: underline 2px var(--accent); text-underline-offset: 4px; text-decoration-skip-ink: none; }
@media (max-width: 1023.98px) {
  .hub-group { padding: 32px 0 0; }
  .hub-group__head, .hub-rows { max-width: calc(100% - var(--lane-cut)); }
  .hub-group__h { font-size: 22px; }
}

/* 「더 필요하세요?」(8-2 #6) */
.hub-more { max-width: 760px; margin: 56px 0 0; padding: 26px 28px; border-radius: var(--r-board); background: var(--surface); box-shadow: var(--sh-1); }
.hub-more__h { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.3; letter-spacing: -.03em; }
.hub-more__p { margin: 6px 0 18px; font-size: 16px; font-weight: 450; line-height: 1.6; color: var(--ink-2); word-break: keep-all; }
.hub-more__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.hub-more__chat svg, .hub-more__api svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 1023.98px) { .hub-more { max-width: calc(100% - var(--lane-cut)); } }
@media (max-width: 600.98px) { .hub-more { padding: 22px 18px; } }

/* 절 아래에 놓인 플레이어(place:sec — 사용자 10/19) — 아래 문단과 띄움 */
.g-sec > .g-media { margin: 16px 0 20px; }