/* ══════════════════════════════════════════════════════════════════════════
   상담 시작 허브 (D-433 · D-434) — 빠른상담 지면. 사용자 참조 시안
   (tax-demo-premium-render.html)의 문법을 서비스 토큰으로 옮겼다:
   · 아이콘은 언제나 **무대(stage)** 위에 선다 — 라이트 블루 라운드 사각, 규격 3종.
   · hover는 **리프트+그림자**뿐이다(참조 그대로) — D-433의 포인터 틸트·광택은
     D-434에서 걷었고(사용자 지시: «지금 바로 상담»은 정적), 타일도 참조 문법을 따른다.
     JS가 전혀 없다 — hub-tilt.js도 함께 은퇴했다.
   · 타일은 **정사각형**: 큰 무대 위 아이콘, 텍스트는 아래(사용자 지시).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 허브 기둥(D-435) — 넓은 화면에서도 참조 프레임(560px)과 같은 비율을 지킨다. ── */
.hub-wrap { max-width: 620px; margin: 0 auto; }

/* ── 아이콘 무대 — 참조의 .stage 이식(규격·비율 동일) ── */
.hub-stage {
  background: #F1F6FE; display: flex; align-items: center; justify-content: center;
  flex: none;
}
.hub-s44 { width: 44px; height: 44px; border-radius: 12px; }
.hub-s44 svg { width: 36px; height: 36px; }
.hub-s52 { width: 52px; height: 52px; border-radius: 14px; }
.hub-s52 svg { width: 42px; height: 42px; }
/* 🔴 타일 무대는 D-671에서 108 → 128(svg 88 → 104)로 키웠다(사용자 지적: 「글씨랑 아이콘이 작아서
   읽기 힘들어」). 620px 기둥에서 타일은 303px 정사각이고, 확대 뒤 쌓임(무대 128 + 제목 26 + 설명 21
   + 여백 22 = 197)이 콘텐츠 상자 261px 안에 그대로 든다 — 정사각은 유지된다.
   ⚠ D-435에서 «너무 크다»로 한 번 되돌린 이력이 있는 자리다. 더 키우려면 그 실측부터 다시 보라. */
.hub-sxl { width: 128px; height: 128px; border-radius: 30px; }
.hub-sxl svg { width: 104px; height: 104px; }

/* ── 견적요청서 선택 띠 — 맨 위(사용자 확정 배치) ── */
/* 상담노트 띠 — 마크업·스타일은 홈과 공유한다(fragments/brief-current + home.css .cur-brief, D-670).
   여기서는 허브 안 여백만 준다. 옛 .hub-brief 규칙은 그 조각으로 은퇴했다. */
.hub-cur { margin-top: 16px; }

/* ── 띠를 «내가 적어 둔 글줄»로 (D-684, 사용자 확정) ─────────────────────────────
   허브의 띠는 지금껏 제목과 분야 칩 둘만 보여 줬다. 제목은 40자로 잘린 이름표라
   «이 노트를 보낸다»의 그 노트가 무엇인지 말하지 못했고, 제목이 같은 두 장을 구별하지도
   못했다. 설명 줄을 사용자가 실제로 쓴 한 문장으로 바꾸고(BriefQuote), **도판을 걷어
   그 자리를 글자에 준다**(사용자 지시: 「아이콘을 제거하고 대신 폰트를 더 크게」).

   🔴 이 블록은 hub.css에만 산다. hub.css는 quick-consult.html 하나만 싣고 home.css **뒤에**
      링크되므로 (0,2,0) 선택자가 홈에 **물리적으로 닿지 않고** 캐스케이드에서도 이긴다.
      fragments/brief-current.html도 index.html도 home.css도 **한 글자 안 고쳤다** —
      이 안이 홈과 갈라지는 방식은 «조각 가르기»가 아니라 «지면 CSS»다. 되돌리지 마라.

   실측(현행 → 이 안): 690 95.5 → 101.5(+6) · 390 125.5 → 130(+4.5).
   예산은 데스크톱 +20 · 모바일 +30이므로 둘 다 안쪽이다(아래가 고정이라 띠 증분이 곧
   첫 화면 손실이다 — 타일 둘째 행 설명 바닥 = 띠높이 + 785, 접힘선 900).
   도판을 걷어 인용 글줄의 가로가 478 → 532(690) · 276 → 328(390)으로 늘었다.
   그래서 글씨를 13 → 16px으로 키우고도 보이는 글자 수가 줄지 않는다. */
.hub-cur .cur-brief-ico { display: none; }   /* aria-hidden="true"라 접근성 손실 0 */

/* 🔴 띠를 «한 눈에 들어오는 크기»로 키운다(D-685, 사용자 지시: 「영역의 크기와 폰트크기를 더 크게」).
   허브에서 이 띠는 화면의 첫 블록이고 아래 네 갈래가 전부 이 노트로 열리므로, 홈의 «얇은 줄»과
   달리 제 무게를 가져도 된다. 자리와 글자를 함께 키운다 — 글자만 키우면 상자가 답답해진다. */
.hub-cur .cur-brief { padding: 20px 22px; border-radius: var(--r-xl); }

/* 🔴 띠에 배경색 — C안 «파랑 틴트»(D-687, 사용자 확정). 이 화면에서 유일한 면이다.
   면 --surface-tint(#F8FBFF)는 흰 지면 대비 **명도차 3.91이 아니라 1.50**으로 아주 얕다 —
   강조를 실제로 지는 것은 **테두리 --tint-blue-line**이고, 면은 그 안을 «내 자리»로 물들인다.
   ⚠ 죽은 파랑 틴트(--band-tint #DCEBFC, D-155에서 「하늘색 배경 + 검은 글씨가 이질감」으로
     폐기)와 같은 계열이되 **깊이가 1/5**이고, 그때 원인 ⓑ(테두리가 없어 카드 경계가 녹음)는
     여기 해당 없다 — 테두리가 살아 있고 오히려 색이 붙는다.
   ⚠ --surface-tint 토큰 주석은 「글자를 얹지 않는 면이라 대비 규칙 밖」이라고 못박고 있다.
     이 띠는 글자를 얹으므로 **그 면제가 사라진다** — 그래서 아래 캡션 보정이 필수다.
   세로 증분 0(비-레이아웃 속성만 바꾼다) · 마크업 0줄 · .hub-cur 접두라 홈에 안 닿는다. */
.hub-cur .cur-brief {
  background: var(--surface-tint);
  border-color: var(--tint-blue-line);
}
/* 캡션·「보기」는 이 면 위에서 4.45로 AA(4.5)에 0.05 미달이다 — grey700이면 6.85.
   🔴 .cur-brief-on 안으로 좁힌다: home.css의 `.cur-brief-off .cur-brief-cap`도 (0,2,0)이라
      좁히지 않으면 hub.css가 뒤에 있다는 이유만으로 **빈 띠 머리글의 색까지 끌어내린다**. */
.hub-cur .cur-brief-on .cur-brief-cap,
.hub-cur .cur-brief-on .cur-brief-view { color: var(--grey700); }
/* 분야 칩 — 파랑 면 위에 파랑 면을 겹치지 않는다(파랑이 다섯 겹이 된다).
   흰 알약 + 파랑 헤어라인으로 뒤집어 한 겹을 덜고, 면 위에서 또렷해진다. */
.hub-cur .cur-brief-cat {
  background: var(--surface); border: 1px solid var(--tint-blue-line); padding: 2px 9px;
}
/* 인용 세로선 — --divider는 이 면 위에서 약해진다. 같은 파랑 눈금으로 맞춘다. */
.hub-cur-q .cur-brief-on .cur-brief-lead { border-left-color: var(--tint-blue-line); }
/* 🔴 D-685가 만든 결함 되돌림 — 위 `.hub-cur .cur-brief-cap {font-size:13px}`(0,2,0)이
   같은 특이도의 `home.css .cur-brief-off .cur-brief-cap {font-size:15px}`를 **뒤에서 이겨**,
   노트가 없을 때 머리글이 15px이 아니라 13px로 그려지고 있었다. */
.hub-cur .cur-brief-off .cur-brief-cap { font-size: 15px; }

.hub-cur .cur-brief-cap { font-size: 13px; }
.hub-cur .cur-brief-title { font-size: 20px; }
.hub-cur .cur-brief-cat { font-size: 13px; padding: 3px 10px; }
.hub-cur .cur-brief-view { font-size: 14px; }
.hub-cur .cur-brief-chg { font-size: 15px; }

/* 인용 글줄 — **제목과 같은 조판**(nowrap + 말줄임)이다.
   🔴 -webkit-line-clamp: 2 를 쓰지 마라. 그것은 높이를 고정하지 못해 짧은 본문에서 한 줄이 되고
      띠가 19.5px 출렁인다 — D-266이 목록에서 본문 발췌를 뺀 첫째 이유가 정확히 그것이다.
      한 줄로 못 박으면 띠 높이가 어떤 노트에서도 단일값이다.
   ⚠ 선택자를 .cur-brief-on 안으로 좁힌 이유: 같은 .hub-cur 아래 **빈 띠**의 안내는 좁은 폭에서
      두 줄이어야 하고, 거기에 nowrap이 걸리면 문장이 잘린다. */
.hub-cur .cur-brief-on .cur-brief-lead {
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 18px; color: var(--text-primary);
}
/* 인용면 표시 — 무채색 세로선 하나. 세로로는 0을 더한다(테두리·패딩 모두 왼쪽만).
   실을 것이 없는 노트에서는 이 클래스가 안 붙어 «이 줄의 주인»이 플랫폼으로 돌아간다. */
.hub-cur-q .cur-brief-on .cur-brief-lead {
  border-left: 2px solid var(--divider); padding-left: 10px;
}

@media (max-width: 640px) {
  /* 🔴 52 = 아이콘 40 + gap 12 가 home.css:1361에 손으로 박혀 있었다. 도판을 걷었으니
     그 폭을 온전히 돌려준다 — 안 고치면 좁은 폭에서 52px이 조용히 빈 채로 남는다. */
  .hub-cur .cur-brief-body { flex-basis: 100%; }
  /* 좁은 폭은 가로가 328px뿐이라 글자를 한 단 낮춘다 — 더 키우면 인용이 열 몇 자에서 끊긴다. */
  .hub-cur .cur-brief { padding: 16px 16px; }
  .hub-cur .cur-brief-title { font-size: 18px; }
  .hub-cur .cur-brief-on .cur-brief-lead { font-size: 16px; }
  .hub-cur-q .cur-brief-on .cur-brief-lead { padding-left: 8px; }
}

/* ── ④ 지금 상담 — **카드가 아니라 «머리글 + 목록»이다**(D-691, 사용자 확정: D안) ──────
   🔴 상자를 다시 세우지 마라. border·background·border-radius를 .hub-big에 붙이는 순간 이 안이
      사라진다. 이 섹션의 경계는 아래 «두 눈금»(.hub-list의 first/last child)이 전부다.
      걷은 이유: 지면(--background)과 카드 면(--surface)이 **같은 #FFFFFF**라 프레임이 하던 일은
      1px 헤어라인 하나였고, 그 값이 타일 넷과 완전히 같아 이 섹션이 «큰 타일»로 읽혔다.
   🔴 카드는 여전히 **정적**이다(D-434) — 틸트·그림자·transform을 되살리지 마라.
      다만 D-434의 「입체감은 아이콘 렌더가 지고」는 도판을 걷어 전제를 잃었다(Q-281). */
.hub-big { display: block; margin-top: var(--s-3xl); }

/* 섹션 머리글 — 지면의 섹션 제목(home.css .sec-head h2)과 **같은 값**이다.
   19/800 → 20/700: 굵기를 오히려 한 단 낮춰(지면의 800이 하나 준다) 크기가 위계를 진다. */
.hub-big-t {
  margin: 0; font-size: 20px; font-weight: 700; line-height: 1.5;
  letter-spacing: var(--ls-xl); color: var(--text-primary);
  word-break: keep-all;              /* D-687 — 한글이 아무 글자에서나 갈리는 것을 막는다 */
}
.hub-big-nw { white-space: nowrap; } /* D-687 — 「지금 바로 상담 / 가능한 세무사」에서만 갈린다 */

/* 접속 사실 — 초록 «면»(옛 .hub-live 알약)을 걷고 캡션 한 줄로. 남는 유채색은 점 하나뿐이다. */
.hub-big-c {
  display: flex; align-items: center; gap: 6px;
  margin: 4px 0 0; font-size: 13.5px; color: var(--text-secondary);
}
.hub-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #2EA36F;
                flex: none; animation: hub-pulse 1.8s ease-in-out infinite; }
@keyframes hub-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: .55; }
}

/* 목록 — 두 눈금 사이. 감싸개가 있어야 :first-child가 «첫 행»을 가리킨다
   (옛 .hub-row:first-of-type은 같은 타입의 첫 형제가 머리줄이라 한 번도 안 걸렸다). */
.hub-list { margin-top: 12px; }
.hub-list > :first-child { border-top: 1px solid var(--border); }
.hub-list > :last-child  { border-bottom: 1px solid var(--border); }

/* 안내문 — 여백을 margin이 아니라 padding으로 준다. 그래야 두 눈금이 글줄 위아래 16px에
   대칭으로 서서 «자리는 있고 지금 비었다»가 조판으로 진술된다. */
.hub-none { margin: 0; padding: 16px 0; font-size: 14px; color: var(--text-tertiary); }

/* 정렬 근거 — 두 눈금 «밖»이다(표의 방법 주석 자리). 문면은 /fit(fit.html:500) 정본 그대로. */
.hub-foot { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5;
            letter-spacing: var(--ls-sm); color: var(--text-tertiary); }

/* 행 비율(D-437, 사용자 지시) — 사람(사진 54·이름 17)이 버튼(40)보다 커야 한다.
   ⚠ margin: 0 -12px는 그대로 산다. 하던 일만 바뀐다 — 카드 안여백을 되먹던 것이
     이제 기둥 밖으로 12px 나간다(390 지면 여백 16 중 12를 써서 4px 남는다: 넘침 없음).
     «눈금·띠는 지면 폭, 글자는 기둥 폭»이 목록 조판의 관례다. */
.hub-row { display: flex; align-items: center; gap: 14px; padding: 16px 12px; margin: 0 -12px;
           border-top: 1px solid var(--divider); border-radius: 12px; }
/* 견적요청 목록과 같은 hover 배경(D-441, 사용자 지시) — 마우스 기기에서만.
   ⚠ :not(:first-child)로 좁힌다 — 첫 행의 border-top은 «머리 눈금»이라 hover가 지우면
     괄호 한 짝이 사라진다. */
@media (hover: hover) {
  .hub-row:hover { background: var(--surface-alt); }
  .hub-row:not(:first-child):hover { border-top-color: transparent; }
  .hub-row:hover + .hub-row { border-top-color: transparent; }
}
.hub-ava {
  flex: none; width: 54px; height: 54px; border-radius: 50%; object-fit: cover;
  background: #F1F6FE; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 19px; color: var(--primary);
}
.hub-row-b { flex: 1; min-width: 0; }
/* 🔴 display:block — <span>은 inline 박스라 overflow·text-overflow가 **적용되지 않는다**.
   nowrap만 살아서 390에서 긴 사무소명이 카드를 75px 넘고 지면이 가로로 59px 스크롤됐다.
   마크업의 <br/>을 걷었으므로 이 둘이 각자 줄을 갖는다. */
.hub-row-n { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.hub-row-s { display: block; font-size: 13px; color: var(--text-tertiary); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-row form { margin: 0; flex: none; }
.hub-row .btn { height: 40px; padding: 0 18px; font-size: 14px; border-radius: 12px; }

/* ── 타일 2×2 — 정사각·큰 무대·텍스트 아래(사용자 지시) ── */
/* 🔴 열은 `1fr`이 아니라 `minmax(0, 1fr)`이다(D-671). `1fr`의 최소치는 **min-content**인데,
   `aspect-ratio: 1/1`이 그 최소 «높이»(무대+제목+설명 두 줄)를 «폭»으로 전이시킨다 — 그래서 무대나
   글씨를 키우면 타일의 최소 폭이 함께 올라가고, 어느 좁은 폭부터 격자가 화면을 가로로 넘겼다
   (확대 전 실측: 481~499px과 ≤428px 구간에서 scrollWidth 초과). `minmax(0, …)`가 그 전이를 끊는다. */
.hub-tiles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.hub-tile {
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 0;
  border: 1px solid var(--border); border-radius: 20px; padding: 20px 16px;
  background: var(--surface); color: inherit; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hub-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(28, 35, 51, .10); border-color: #D7E4F8;
}
.hub-tile:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.hub-tile .hub-stage { transition: transform .25s ease; }
.hub-tile:hover .hub-stage { transform: translateY(-2px); }
.hub-tile b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 1.35; margin-top: 16px; }
.hub-tile span:last-child { display: block; font-size: 14px; color: var(--text-tertiary); margin-top: 6px; line-height: 1.5; }

/* 중간 폭 — 두 열이 좁아지는 만큼 한 단 줄인다(D-671).
   ⚠ 사실대로 적는다: 이 단을 두어도 481~600에서는 타일이 **정사각보다 조금 높다**(490px 실측 222×236).
     `aspect-ratio`는 «제안»이라 내용이 넘치면 높이가 늘어난다 — 글자가 잘리는 것보다 낫고, 두 타일이
     같은 행에서 같은 높이로 늘어나 어긋나 보이지도 않는다. 이 단이 하는 일은 «넘침을 없애는 것»이 아니라
     «넘치는 양을 한 줄 만큼으로 줄이는 것»이다(이 단이 없으면 30px 이상 벌어진다). */
@media (max-width: 600px) {
  .hub-sxl { width: 112px; height: 112px; border-radius: 26px; }
  .hub-sxl svg { width: 92px; height: 92px; }
  .hub-tile b { font-size: 17px; margin-top: 14px; }
  .hub-tile span:last-child { font-size: 13px; }
}
/* 폰 — 확대 전에도 이 구간은 쌓임이 정사각을 1px 넘고 있었다(실측 390px: 154 vs 153).
   🔴 그래서 여기서만 **정사각을 놓는다**(`aspect-ratio: auto`) — 높이를 내용에 맡기면 설명이 두 줄이
   되어도 글자가 잘리지 않는다. 정사각은 «넓은 화면의 조형»(D-434 ④)이고, 폰에서 글을 자르면서까지
   지킬 규칙이 아니다. 무대·글씨는 옛 값(80/64·14.5·11.5)보다 한 단 크다. */
@media (max-width: 480px) {
  .hub-tiles { gap: 12px; }
  .hub-tile { aspect-ratio: auto; padding: 18px 12px; }
  .hub-sxl { width: 100px; height: 100px; border-radius: 24px; }
  .hub-sxl svg { width: 82px; height: 82px; }
  .hub-tile b { font-size: 16px; margin-top: 12px; }
  .hub-tile span:last-child { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-live-dot { animation: none; }
  .hub-tile, .hub-tile .hub-stage { transition: none; }
}