/* hub.css — 지붕 껍데기(왼쪽 도구 목록 + 본문)와 첫 쪽 «저절로 도는 사용법» 그림 (2026-11-01)
   사용자 원문 *"굳이 클릭하지않아도 대충 어떻게 돌아가고 사용법이 뭔지 돌아가게 하고 좌측 사이드에는 서비스들이 쭉 있고 디폴트는 홈 탭"*.
   껍데기는 Equalook 틀의 앱 화면 짜임(.ap-shell · .ap-side · .ap-mi · .ap-main · .ap-card — /assets/eq.css)을 그대로 쓰고 이 파일은 그 위 덧층이다.
   그림은 CSS 만으로 돈다(스크립트 0 · CSP style-src 'self' 라 style 속성 없이 class 로만 자리를 잡는다).
   한 바퀴 = 세 걸음(0 · 33 · 66%) · 네 바퀴 뒤 마지막 걸음에 선다 · «움직임 멈춤» 칸 · 덜 움직이기 설정이면 처음부터 마지막 걸음 그림(WCAG 2.2.2).
   기본 꼴(애니메이션이 없을 때)이 곧 마지막 걸음이다 — 애니메이션은 거기까지 가는 길만 그린다. */

.hub-shell { --ap-side: 236px; background: var(--eq-bg); }
.hub-side { display: flex; flex-direction: column; gap: 2px; background: color-mix(in srgb, var(--eq-text) 3%, var(--eq-bg)); border-right: 0; }
.hub-side .ap-brand { font-weight: 700; color: var(--eq-text); text-decoration: none; }
.hub-side nav { display: flex; flex-direction: column; gap: 2px; }
.hub-side .ap-group { color: var(--eq-muted); margin-top: 18px; }
.hub-side .ap-mi { font-size: 15px; color: var(--eq-text); }
.hub-side .ap-mi:hover { background: color-mix(in srgb, var(--eq-accent) 9%, transparent); }
.hub-side .ap-mi.on, .hub-side .ap-mi.on:hover { background: var(--eq-accent); color: #fff; }
.hub-side .ap-mi svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.hub-side .ap-mi .hub-ext { margin-left: auto; opacity: .6; font-size: 12px; }
.hub-side .hub-soon { color: var(--eq-muted); cursor: default; }
.hub-side .hub-soon:hover { background: none; }
.hub-side-foot { margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.hub-side-foot a { color: var(--eq-muted); text-decoration: none; }
.hub-side-foot a:hover { color: var(--eq-text); text-decoration: underline; }
.hub-side-foot .hub-tip { color: var(--eq-accent); font-weight: 600; }

.hub-main { padding: 32px clamp(16px, 4vw, 48px) 0; gap: 28px; }
.hub-main > .bl-page { margin: 0 calc(-1 * clamp(16px, 4vw, 48px)); }
.hub-main .pl-footer { margin: 0 calc(-1 * clamp(16px, 4vw, 48px)); }
.hub-main .pl-footer a { text-decoration: underline; color: inherit; }
.hub-main a.hub-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px; border-radius: 999px; background: var(--eq-accent); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; }
.hub-main a.hub-btn:hover { background: color-mix(in srgb, var(--eq-accent) 85%, #000); }
.hub-main a.hub-btn.ghost { background: color-mix(in srgb, var(--eq-text) 7%, var(--eq-bg)); color: var(--eq-text); }

/* 첫 쪽 머리 */
.hub-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.hub-head h1 { margin: 0 0 6px; font-size: clamp(26px, 3.2vw, 36px); line-height: 1.25; }
.hub-head p { margin: 0; color: var(--eq-muted); max-width: 56ch; }
.hub-pause { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; color: var(--eq-muted); cursor: pointer; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--eq-text) 5%, var(--eq-bg)); }
.hub-pause input { accent-color: var(--eq-accent); margin: 0; }

/* 카드 */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.hub-card { display: flex; flex-direction: column; gap: 12px; border: 0; background: color-mix(in srgb, var(--eq-text) 3.5%, var(--eq-bg)); border-radius: 16px; padding: 16px; }
.hub-card h2, .hub-card h3 { margin: 0; font-size: 19px; }
.hub-card h2 a, .hub-card h3 a { color: var(--eq-text); text-decoration: none; }
.hub-card h2 a:hover, .hub-card h3 a:hover { text-decoration: underline; }
.hub-card p { margin: 0; color: var(--eq-muted); font-size: 14.5px; line-height: 1.55; }
.hub-card .hub-btn { align-self: flex-start; margin-top: auto; }
.hub-feat { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: center; padding: 20px; }
.hub-feat .hub-txt { display: flex; flex-direction: column; gap: 12px; }
.hub-feat h2 { font-size: 24px; }
.hub-kick { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--eq-accent); font-weight: 700; }
.hub-why h2 { margin: 0 0 14px; font-size: 22px; }
.hub-why .hub-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.hub-slot { background: transparent; outline: 1.5px dashed color-mix(in srgb, var(--eq-text) 18%, transparent); outline-offset: -1.5px; }
.hub-slot .dm { opacity: .5; }

/* 세 걸음 글 — 그림과 같은 박자로 지금 걸음에 불이 들어온다 */
.dm-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; counter-reset: st; }
.dm-steps li { counter-increment: st; font-size: 13px; padding: 4px 10px 4px 6px; border-radius: 999px; color: var(--eq-muted); background: color-mix(in srgb, var(--eq-text) 6%, var(--eq-bg)); display: inline-flex; gap: 6px; align-items: center; }
.dm-steps li::before { content: counter(st); display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 700; background: color-mix(in srgb, var(--eq-text) 12%, var(--eq-bg)); color: var(--eq-text); }
.dm-steps li:last-child { background: color-mix(in srgb, var(--eq-accent) 14%, var(--eq-bg)); color: var(--eq-text); }
.dm-steps li:last-child::before { background: var(--eq-accent); color: #fff; }

/* 그림 판 — 자리는 모두 % */
.dm { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--eq-bg); }
.dm * { position: absolute; box-sizing: border-box; }
.dm .p { background: color-mix(in srgb, var(--eq-text) 6%, var(--eq-bg)); border-radius: 8px; }
.dm .ln { left: 10%; height: 7%; border-radius: 4px; background: color-mix(in srgb, var(--eq-text) 16%, transparent); }
.dm .chip { font: 600 11px/1 system-ui, sans-serif; padding: 6px 10px; border-radius: 999px; background: var(--eq-accent); color: #fff; white-space: nowrap; }
.dm .scan { left: 0; right: 0; top: 100%; height: 3px; background: var(--eq-accent); opacity: 0; }
.dm .l1 { top: 18%; width: 70%; } .dm .l2 { top: 34%; width: 80%; } .dm .l3 { top: 50%; width: 60%; } .dm .l4 { top: 66%; width: 74%; } .dm .l5 { top: 82%; width: 50%; }

/* site — 참고 화면 → 내 화면 → HTML */
.dm-site .ref { left: 5%; top: 12%; width: 36%; height: 76%; }
.dm-site .ref .b1 { left: 8%; top: 8%; width: 84%; height: 30%; border-radius: 4px; background: color-mix(in srgb, var(--eq-text) 22%, transparent); }
.dm-site .ref .b2, .dm-site .ref .b3, .dm-site .ref .b4 { top: 46%; width: 26%; height: 40%; border-radius: 4px; background: color-mix(in srgb, var(--eq-text) 13%, transparent); }
.dm-site .ref .b2 { left: 8%; } .dm-site .ref .b3 { left: 37%; } .dm-site .ref .b4 { left: 66%; }
.dm-site .out { left: 47%; top: 12%; width: 48%; height: 76%; background: color-mix(in srgb, var(--eq-accent) 6%, var(--eq-bg)); outline: 1.5px solid color-mix(in srgb, var(--eq-accent) 35%, transparent); }
.dm-site .out .b1 { left: 8%; top: 8%; width: 84%; height: 30%; border-radius: 4px; background: var(--eq-accent); }
.dm-site .out .b2, .dm-site .out .b3, .dm-site .out .b4 { top: 46%; width: 26%; height: 40%; border-radius: 4px; background: color-mix(in srgb, var(--eq-accent) 28%, var(--eq-bg)); }
.dm-site .out .b2 { left: 8%; } .dm-site .out .b3 { left: 37%; } .dm-site .out .b4 { left: 66%; }
.dm-site .chip { right: 4%; bottom: 5%; }

/* text — 사진 → 글자 찾기 → 꺼낸 글 */
.dm-text .img { left: 5%; top: 12%; width: 44%; height: 76%; background: color-mix(in srgb, var(--eq-text) 14%, var(--eq-bg)); overflow: hidden; }
.dm-text .img .ln { background: color-mix(in srgb, var(--eq-bg) 70%, transparent); }
.dm-text .out { left: 55%; top: 12%; width: 40%; height: 76%; }
.dm-text .out .ln { background: color-mix(in srgb, var(--eq-text) 55%, transparent); height: 6%; }
.dm-text .chip { right: 4%; bottom: 5%; }

/* clean — 파일 → 숨은 정보 → 지운 사본 */
.dm-clean .file { left: 6%; top: 14%; width: 30%; height: 72%; }
.dm-clean .file .th { left: 10%; top: 9%; width: 80%; height: 58%; border-radius: 6px; background: color-mix(in srgb, var(--eq-accent) 30%, var(--eq-bg)); }
.dm-clean .file .ln { top: 76%; width: 60%; left: 20%; }
.dm-clean .tag { left: 44%; width: 50%; height: 16%; display: flex; align-items: center; padding: 0 10%; font: 600 12px/1 system-ui, sans-serif; color: var(--eq-muted); border-radius: 8px; background: color-mix(in srgb, var(--eq-text) 5%, var(--eq-bg)); text-decoration: line-through; opacity: .45; }
.dm-clean .tag i { position: static; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-right: 8px; font-style: normal; }
.dm-clean .t1 { top: 14%; } .dm-clean .t2 { top: 34%; } .dm-clean .t3 { top: 54%; }
.dm-clean .chip { left: 44%; top: 76%; }

/* redact — PDF → 찾기 → 검은 칸 */
.dm-redact .doc { left: 22%; top: 8%; width: 42%; height: 84%; background: color-mix(in srgb, var(--eq-text) 4%, var(--eq-bg)); outline: 1.5px solid color-mix(in srgb, var(--eq-text) 12%, transparent); }
.dm-redact .hit { height: 7%; border-radius: 2px; background: color-mix(in srgb, var(--eq-text) 88%, #000); }
.dm-redact .h1 { left: 46%; top: 18%; width: 30%; } .dm-redact .h2 { left: 10%; top: 50%; width: 36%; } .dm-redact .h3 { left: 52%; top: 66%; width: 32%; }
.dm-redact .chip { right: 6%; bottom: 8%; }

/* csv — 날 글 → 표 → 묻기 */
.dm-csv .raw { left: 5%; top: 12%; width: 32%; height: 76%; padding: 8% 8%; font: 11px/1.9 ui-monospace, Consolas, monospace; color: var(--eq-muted); white-space: pre; overflow: hidden; }
.dm-csv .raw span { position: static; }
.dm-csv .tbl { left: 43%; top: 12%; width: 52%; height: 76%; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 3px; padding: 4px; }
.dm-csv .tbl i { position: static; border-radius: 3px; background: color-mix(in srgb, var(--eq-text) 9%, var(--eq-bg)); }
.dm-csv .tbl i.hd { background: color-mix(in srgb, var(--eq-text) 22%, var(--eq-bg)); }
.dm-csv .tbl i.col { background: color-mix(in srgb, var(--eq-accent) 32%, var(--eq-bg)); }
.dm-csv .chip { right: 6%; bottom: 5%; }

/* 그 밖(그림을 아직 안 정한 앱 · 준비 중) — 넣기 → 도는 막대 → 끝 */
.dm-generic .box { left: 36%; top: 18%; width: 28%; height: 50%; display: grid; place-items: center; }
.dm-generic .box svg { position: static; width: 40%; height: 40%; fill: none; stroke: var(--eq-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dm-generic .bar { left: 30%; top: 76%; width: 40%; height: 5%; border-radius: 999px; background: color-mix(in srgb, var(--eq-text) 10%, transparent); overflow: hidden; }
.dm-generic .bar b { left: 0; top: 0; bottom: 0; width: 100%; background: var(--eq-accent); border-radius: 999px; }

/* 박자 — 둘째 걸음(33%)에 나타남 · 셋째 걸음(66%)에 나타남 · 훑기 · 자라기 · 지우기 */
@keyframes dm-in2 { 0%, 30% { opacity: 0; transform: translateY(6%); } 38%, 100% { opacity: 1; transform: none; } }
@keyframes dm-in3 { 0%, 63% { opacity: 0; transform: translateY(10%); } 71%, 100% { opacity: 1; transform: none; } }
@keyframes dm-scan { 0%, 33% { top: -4%; opacity: 0; } 35% { opacity: 1; } 62% { top: 100%; opacity: 1; } 64%, 100% { top: 100%; opacity: 0; } }
@keyframes dm-mark { 0%, 33% { background: color-mix(in srgb, var(--eq-text) 16%, transparent); transform: scaleX(1); } 38%, 63% { background: #f5c542; } 64% { transform: scaleX(.05); } 72%, 100% { background: color-mix(in srgb, var(--eq-text) 88%, #000); transform: scaleX(1); } }
@keyframes dm-tag { 0%, 33% { opacity: 1; text-decoration: none; color: var(--eq-muted); background: color-mix(in srgb, var(--eq-text) 5%, var(--eq-bg)); } 38%, 63% { opacity: 1; text-decoration: none; color: #8a3b00; background: #ffe7c2; } 72%, 100% { opacity: .45; text-decoration: line-through; color: var(--eq-muted); background: color-mix(in srgb, var(--eq-text) 5%, var(--eq-bg)); } }
@keyframes dm-col { 0%, 63% { background: color-mix(in srgb, var(--eq-text) 9%, var(--eq-bg)); } 71%, 100% { background: color-mix(in srgb, var(--eq-accent) 32%, var(--eq-bg)); } }
@keyframes dm-fill { 0%, 30% { transform: scaleX(0); } 64%, 100% { transform: scaleX(1); } }
@keyframes dm-st1 { 0%, 32% { background: color-mix(in srgb, var(--eq-accent) 14%, var(--eq-bg)); color: var(--eq-text); } 34%, 100% { background: color-mix(in srgb, var(--eq-text) 6%, var(--eq-bg)); color: var(--eq-muted); } }
@keyframes dm-st2 { 0%, 32% { background: color-mix(in srgb, var(--eq-text) 6%, var(--eq-bg)); color: var(--eq-muted); } 34%, 65% { background: color-mix(in srgb, var(--eq-accent) 14%, var(--eq-bg)); color: var(--eq-text); } 67%, 100% { background: color-mix(in srgb, var(--eq-text) 6%, var(--eq-bg)); color: var(--eq-muted); } }
@keyframes dm-st3 { 0%, 65% { background: color-mix(in srgb, var(--eq-text) 6%, var(--eq-bg)); color: var(--eq-muted); } 67%, 100% { background: color-mix(in srgb, var(--eq-accent) 14%, var(--eq-bg)); color: var(--eq-text); } }

@media (prefers-reduced-motion: no-preference) {
  .hub-card { --dm-t: 7.5s; --dm-n: 4; }
  .hub-card .a2, .hub-card .a3, .hub-card .scan, .hub-card .dm-redact .hit, .hub-card .dm-clean .tag, .hub-card .dm-csv .col, .hub-card .dm-generic .bar b, .hub-card .dm-steps li {
    animation-duration: var(--dm-t); animation-iteration-count: var(--dm-n); animation-fill-mode: both; animation-timing-function: ease-out; }
  .hub-card .a2 { animation-name: dm-in2; }
  .hub-card .a3 { animation-name: dm-in3; }
  .hub-card .scan { animation-name: dm-scan; animation-timing-function: linear; }
  .hub-card .dm-redact .hit { animation-name: dm-mark; transform-origin: left center; }
  .hub-card .dm-clean .tag { animation-name: dm-tag; }
  .hub-card .dm-csv .col { animation-name: dm-col; }
  .hub-card .dm-generic .bar b { animation-name: dm-fill; transform-origin: left center; }
  .hub-card .dm-steps li:nth-child(1) { animation-name: dm-st1; }
  .hub-card .dm-steps li:nth-child(2) { animation-name: dm-st2; }
  .hub-card .dm-steps li:nth-child(3) { animation-name: dm-st3; }
  .hub-card .dm-steps li:last-child::before { background: color-mix(in srgb, var(--eq-text) 12%, var(--eq-bg)); color: var(--eq-text); }   /* 도는 동안은 셋째 번호도 다른 둘과 같은 색 — 불은 글 칸 바탕이 진다 */
  .hub-main:has(.hub-pause input:checked) .hub-card *, .hub-card:hover * { animation-play-state: paused; }
}

/* 폰 — 왼쪽 목록이 위 가로 줄로 */
.hub-side .hub-lang { display: none; }
@media (max-width: 768px) {
  .hub-side { position: sticky; top: 0; z-index: 20; height: auto; padding: 10px 12px; flex-direction: row; align-items: center; gap: 10px; }
  .hub-side .ap-brand { margin: 0; font-size: 17px; flex: none; }
  .hub-side nav { flex-direction: row; overflow-x: auto; gap: 4px; min-width: 0; scrollbar-width: none; }
  .hub-side .ap-group, .hub-side .hub-soon, .hub-side-foot, .hub-side .ap-mi .hub-ext { display: none; }
  .hub-side .ap-mi { white-space: nowrap; padding: 8px 12px; font-size: 14px; }
  .hub-side .ap-mi svg { display: none; }
  .hub-side .hub-lang { display: inline-flex; flex: none; margin-left: auto; padding: 8px 10px; font-size: 13px; color: var(--eq-muted); }
  .hub-main { padding-top: 20px; }
  .hub-feat { grid-template-columns: 1fr; padding: 16px; }
}
.hub-main:has(> .bl-page) { padding-top: 0; }   /* 앱 · 법 문서 쪽 — 본문 칸(.bl-app 옅은 면)이 위 끝까지 */

/* 요청 · 반영(2026-11-01 · /board/ 와 홈 끝 «최근 반영») — 요청 한 줄 = 상태 꼬리표 + 요약 + 답 한 줄 + 도구 · 건수 · 날짜 */
.hub-reqs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hub-req { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--eq-text) 3.5%, var(--eq-bg)); }
.hub-req > div { min-width: 0; display: grid; gap: 4px; }
.hub-req p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--eq-muted); overflow-wrap: anywhere; }
.hub-req .hub-req-t { color: var(--eq-text); font-weight: 600; }
.hub-req .hub-req-m { font-size: 13px; }
.hub-st { flex: none; min-width: 5.5em; text-align: center; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--eq-text) 8%, var(--eq-bg)); color: var(--eq-text); }
.st-done .hub-st { background: var(--eq-accent); color: #fff; }
.st-doing .hub-st { background: color-mix(in srgb, var(--eq-accent) 16%, var(--eq-bg)); color: var(--eq-text); }
.hub-empty { color: var(--eq-muted); margin: 0; }
.hub-recent { display: grid; gap: 12px; }
.hub-recent h2 { margin: 0; font-size: 22px; }
.hub-recent .hub-more { justify-self: start; color: var(--eq-accent); font-weight: 600; font-size: 14.5px; }

/* 미리보기 창(2026-11-02) — 왼쪽 목록 칸이 #t-<id> 로 연다. 사용법 그림 · 세 걸음 · 열기 단추만 · 바탕 · ✕ 가 닫는다 */
.hub-pv { display: none; position: fixed; inset: 0; z-index: 50; align-items: center; justify-content: center; padding: 16px; }
.hub-pv:target { display: flex; }
.hub-pv-bg { position: absolute; inset: 0; background: color-mix(in srgb, #000 45%, transparent); }
.hub-pv-box { position: relative; box-sizing: border-box; width: min(100%, 460px); min-width: 0; padding: 22px; gap: 16px; background: var(--eq-bg); box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
.hub-pv-box .dm { min-height: 200px; }
.hub-pv-box h2 { font-size: 22px; }
.hub-pv-box .hub-btn { align-self: stretch; min-height: 48px; font-size: 16px; }
.hub-pv-x { position: absolute; z-index: 3; top: 10px; right: 12px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--eq-muted); text-decoration: none; }
.hub-pv-x span { font-size: 26px; line-height: 1; font-family: Arial, sans-serif; }
.hub-pv-x:hover { background: color-mix(in srgb, var(--eq-text) 8%, var(--eq-bg)); color: var(--eq-text); }

/* 후원 — 오른쪽 위 고정 한 자리(2026-11-02 사용자) */
.hub-donate { position: fixed; top: 12px; right: 16px; z-index: 40; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--eq-accent); color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.hub-donate:hover { background: color-mix(in srgb, var(--eq-accent) 85%, #000); }
.hub-donate svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hub-head { padding-right: 190px; }
@media (max-width: 768px) {
  .hub-donate { top: 8px; right: 8px; min-height: 34px; width: 34px; padding: 0; justify-content: center; }
  .hub-donate span { display: none; }
  .hub-side { padding-right: 52px; }
  .hub-head { padding-right: 0; }
}