/* ==========================================================================
   stop&loss — 자주 묻는 질문(faq.html) 전용 스타일

   faq.html 하나만 이 파일을 싣는다. 새로 만든 클래스는 전부 .fq- 접두사라
   공용 style.css · 관리자 콘솔과 충돌할 자리가 없다. 여기를 통째로 지워도
   다른 페이지는 픽셀 하나 안 바뀌고, FAQ 도 style.css 의 기본 아코디언
   모양으로 물러날 뿐 기능은 그대로 산다.

   왜 다시 만들었나
     예전 화면은 다른 페이지와 똑같은 회색 머리띠(.page-hero) 아래 760px 폭에
     질문 여섯 개를 세로로 늘어놓은 것이 전부였다. 분류도 검색도 없어서 원하는
     답을 찾으려면 여섯 개를 다 열어 봐야 했고, 넓은 모니터에서는 화면 양옆이
     통째로 비었다. 질문이 늘어날수록 못 쓰게 되는 구조였다.

   지금 구조
     .fq-hero    두 줄짜리 띠(약 110px) — 윗줄 이동 경로 · 라벨, 아랫줄 제목 / 설명
                 로그인과 같은 유체 엔진(static/fluid.js)이 물감을 그린다
     .fq-shell   좁은 화면 = 한 칸 / 1024px 이상 = 왼쪽 고정 목차 + 오른쪽 본문
     .fq-side    분류 내비. 좁으면 가로 스크롤 칩, 넓으면 세로 목차가 된다
     .fq-search-bar  검색창. 640px 이상에서 헤더 아래에 붙어 따라온다
     #faqList    질문 목록. 주제별 묶음(.fq-group) 안에 .faq-item 이 들어간다

   공지사항과 무엇을 맞추고 무엇을 가르나 (2026-08-30 재정리)
     히어로는 맞춘다. 골격 · 접히는 폭(900px) · 칼럼 배분 · 라벨 모양이 저쪽과
     같은 값이고, 마우스 효과도 같은 물감 엔진이다. 예전에는 그것들을 일부러
     갈라 두었는데(이쪽은 '원', 저쪽은 '선'), 그 때문에 제목이 시작하는 세로선이
     페이지마다 밀려 두 화면을 오갈 때 글이 좌우로 흔들렸다.
     히어로에서 갈라야 할 것은 형태가 아니라 색이다 — 이쪽은 청록이 앞에 선다.

     본문은 가른다. 이쪽은 찾아 들어가는 '인덱스'이고(도트 매트릭스 · 고정폭 번호 ·
     2열 + 왼쪽 고정 목차 · 카드 위 원형 스포트라이트), 저쪽은 시간 순으로 읽는
     '피드'다(가로 스캔라인 · 타임라인 · 1열 + 상단 필터 레일 · 세로 하이라인).
     본문 쪽 값을 다른 쪽으로 복사해 오지 말 것 — 그렇게 해서 똑같아졌던 화면이다.

   아코디언 자체는 이 파일이 만들지 않는다
     여닫는 동작은 예전 그대로 static/app.js 의 initFaq 가 맡는다(#faqList 위임 ·
     .faq-q · aria-controls · .faq-item.is-open). 그래서 style.css 의 .faq-*
     규칙을 지우면 안 되고, 여기서는 그 위에 덧칠만 한다.
     static/faq.js 는 검색 · 분류 · 개수 · 링크 이동만 맡는다 — 여닫기를 한 벌 더
     만들면 언젠가 두 구현이 어긋난다.

   색은 새로 만들지 않았다. 전부 style.css 토큰과 히어로 색분산 계열이다.
     배경 #040407(--bg) · 청록 #3de9ff(--primary) · 적 #ff2d5c · 보라 #b48cff
   ========================================================================== */

/* ---------- 1. 히어로 (두 줄짜리 띠) ---------- */

/*
 * 눌러 놓은 히어로.
 *
 * 세 번 줄였다. ① 가운데 축에 배지 · 제목 · 리드 · 숫자 판을 세로로 쌓아 480px,
 * ② 눕히면서 오른쪽에 주제 인덱스 카드를 세워 190px, ③ 그 카드를 들어내고
 * 두 줄짜리 띠로 눌러 약 130px(데스크톱 실측 — 처음의 4분의 1).
 *
 * 지금 구조 — 900px 이상에서 격자 두 줄 × 두 칸이다.
 *   'meta  facts'   이동 경로 · 라벨  |  숫자 셋
 *   'title lead'    제목             |  한 줄 설명
 *
 * DOM 순서(meta → title → lead → facts)와 보이는 순서가 다르다. 읽는 순서는
 * 제목이 숫자보다 먼저여야 하고, 보이는 순서는 숫자가 윗줄 오른쪽이라야 제목이
 * 아래 왼쪽에서 가장 크게 선다 — grid-template-areas 를 쓰는 이유가 이것이다.
 *
 * 공지사항(nt-hero)의 값을 가져다 쓰지 않는다. 파일 머리말 참조.
 */
.fq-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 22px 0 20px;
  background: var(--bg);
}

/*
 * 아래 경계선.
 * 왼쪽(제목 쪽)에서 가장 밝게 시작해 오른쪽으로 잦아든다. 가운데가 밝던 예전
 * 이음매는 가운데 정렬 히어로의 축 표시였다 — 왼쪽 정렬에서는 뜻이 없어진다.
 */
.fq-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(61, 233, 255, .55),
    rgba(255, 255, 255, .12) 34%,
    rgba(255, 255, 255, .05) 62%,
    transparent);
}

.fq-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.fq-hero-bg > span {
  position: absolute;
  inset: 0;
  display: block;
}

/*
 * 빛은 왼쪽 위 하나가 주(主)다. 글이 왼쪽에 있으므로 무게도 그쪽에 있어야 한다.
 * blur() 를 쓰지 않고 그라데이션의 투명 정지점만 쓰는 것은 저사양 PC 에서
 * 프레임이 떨어질 이유를 만들지 않기 위해서다(사이트 공통 규칙).
 */
.fq-hero-glow {
  background:
    radial-gradient(620px 300px at 8% -40%, rgba(61, 233, 255, .15), transparent 64%),
    radial-gradient(520px 260px at 78% 150%, rgba(180, 140, 255, .07), transparent 68%);
}

/*
 * 도트 매트릭스 — 이 페이지의 질감이다.
 *
 * 격자(선)가 아니라 점인 이유: 선은 화면을 칸으로 나눠 '표'처럼 읽히고, 점은
 * 나누지 않으면서 바탕에 결만 남긴다. 공지사항은 가로 스캔라인을 쓰므로
 * 두 페이지가 같은 배경을 깔지 않는다.
 */
.fq-hero-dots {
  background-image: radial-gradient(rgba(255, 255, 255, .085) 1px, transparent 1px);
  background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(108deg, #000 2%, rgba(0, 0, 0, .34) 44%, transparent 74%);
  mask-image: linear-gradient(108deg, #000 2%, rgba(0, 0, 0, .34) 44%, transparent 74%);
}

/* ---------- 1-b. 물감 배경 (이 페이지의 마우스 효과) ---------- */

/*
 * 로그인 화면과 같은 유체 엔진(static/fluid.js)이 이 무대 안 캔버스에 물감을 그린다.
 * 커서를 따라 잉크가 번지고, 손을 멈추면 몇 초에 한 방울씩 스스로 피어난다.
 *
 * 예전에는 여기에 '커서 렌즈'(청록 점 격자를 마스크로 뚫는 겹)가 있었다.
 * 두 화면(자주 묻는 질문 · 공지사항)의 히어로를 모두 물감으로 바꾸면서 지웠다.
 * 되살리려거든 물감 캔버스와 같은 자리를 다투게 된다는 것부터 볼 것 — 둘 다
 * 켜면 커서 둘레가 이중으로 밝아져 어느 쪽이 반응인지 읽히지 않는다.
 *
 * 공지사항과 무엇이 다른가
 *   엔진은 같고 색만 다르다. 이쪽은 청록(#3de9ff)이 앞에 서고 저쪽은 적(#ff2d5c)이
 *   앞에 선다. 그 아래 깔린 질감도 다르다 — 이쪽은 도트 매트릭스, 저쪽은 가로
 *   스캔라인이다. 두 값을 서로 복사해 오면 그 순간 두 페이지가 같은 화면이 된다.
 *
 * 캔버스가 배경을 덮지 않는다
 *   셰이더가 밝기에서 알파를 뽑아 내보내므로 물감이 없는 자리는 투명하게 남고,
 *   위 1절의 잔광 · 도트가 그대로 비친다. WebGL 이 없거나 셰이더가 실패하면
 *   캔버스는 통째로 투명하게 남는다 — 효과만 사라지고 화면은 지금 모습 그대로다.
 */
.fq-hero-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* 커서는 히어로 <section> 이 받는다(faq-lens.js). 이 겹이 이벤트를 먹으면
     그 아래 이동 경로 · 본문 링크를 누를 수 없게 된다. */
  pointer-events: none;
}

.fq-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /*
   * 위아래 끝을 흘려보낸다.
   *
   * 히어로가 110px 짜리 띠라 마스크가 없으면 물감이 헤더 밑선과 아래 이음매에
   * 칼로 자른 듯 끊긴다 — 배경이 아니라 '띠 하나가 얹힌' 것으로 보인다.
   * 좌우는 셰이더의 가장자리 감쇠가 이미 맡고 있어 여기서 건드리지 않는다.
   */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
  opacity: 0;
  transition: opacity .9s ease;
}

/* 첫 프레임이 실제로 나온 뒤에만 드러낸다(fluid.js 가 무대에 is-live 를 단다).
   미리 켜면 빈 사각형이 한 번 번쩍인다 — 로그인 화면과 같은 규칙이다. */
.fq-hero-stage.is-live .fq-hero-canvas { opacity: 1; }

/*
 * 가독성 베일. 이 한 겹이 없으면 물감이 가장 진해지는 순간 그 자리의 글자가
 * 읽히지 않는다 — 로그인은 카드가 어두운 유리라 그 일을 대신하지만, 여기서는
 * 제목과 설명이 배경 위에 바로 앉는다.
 *
 * 물감의 세기(fluid 옵션의 gain · 감쇠)와 한 묶음이다. 이 값을 낮추려면
 * static/faq-lens.js 의 gainMax 도 함께 낮춰야 대비가 유지된다.
 */
.fq-hero-veil {
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 7, .38);
}

/* ---------- 1-c. 히어로 배치 ---------- */

.fq-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    'meta'
    'title'
    'lead';
  gap: 10px 44px;
  /*
   * 검정 배경에서는 보이지 않는다. 물감이 글자 뒤를 지날 때만 일한다 —
   * 베일(1-b절)만으로는 잉크가 가장 진해지는 순간의 대비가 모자란다.
   * 상속되므로 이동 경로 · 라벨 · 제목 · 설명이 한 줄로 함께 받는다
   * (요금제 히어로가 셰이더 위에서 쓰는 것과 같은 수법이다).
   */
  text-shadow: 0 1px 14px rgba(4, 4, 7, .85);
}

/* 이동 경로와 라벨이 한 줄에 선다. 예전에는 라벨이 제 줄을 통째로 차지했는데,
   글자 열한 자 때문에 22px 을 쓰는 것은 띠에서 가장 아까운 높이였다. */
.fq-hero-meta {
  grid-area: meta;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  min-width: 0;
}

/* 왼쪽 정렬로 되돌린다. 가운데 정렬은 축이 하나였던 시절의 값이다. */
.fq-crumb { justify-content: flex-start; }

/*
 * 영문 라벨 — 알약이 아니라 고정폭 글자다.
 *
 * 공지사항은 알약(.nt-badge)을 그대로 쓴다. 예전에는 두 페이지가 똑같은 알약이라
 * 첫 줄부터 같은 화면으로 보였다. 고정폭에 자간을 넓게 벌린 글자는 '문서 · 색인'의
 * 결이라 이 페이지의 성격과도 맞는다.
 *
 * 뒤로 이어지던 선(::after)은 지웠다. 제목 '위'에 홀로 서던 시절의 장치라,
 * 이동 경로 옆에 붙은 지금은 왼쪽 머리카락 선 하나가 그 일을 대신한다.
 */
.fq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 12px;
  border-left: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .22em;
}

.fq-eyebrow i {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(61, 233, 255, .16);
}

/*
 * 흰색이 아래로 잦아드는 결. style.css 의 .text-gradient 와 같은 문법이라
 * 사이트 안에서 처음 보는 물건이 되지 않는다.
 *
 * 기본값은 흰 글자이고 그라데이션은 @supports 안에서만 켠다. 순서를 뒤집으면
 * background-clip: text 를 모르는 브라우저에서 color: transparent 만 적용되어
 * 제목이 통째로 사라진다 — 화면이 비는 경로는 만들지 않는다.
 */
.fq-title {
  grid-area: title;
  /* 상한이 44 → 38 로 또 내려갔다. 이제 제목이 한 줄로 서야 띠가 두 줄로 끝난다 —
     44px 이면 900~1100px 구간에서 열두 글자짜리 제목이 두 줄로 꺾인다(실측).
     제목을 길게 고칠 때는 이 폭을 함께 확인할 것. */
  font-size: clamp(26px, 5.2vw, 38px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.04em;
  color: #fff;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .fq-title {
    background: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, .62));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.fq-lead {
  grid-area: lead;
  /* 46ch 는 오른쪽 칸이 900px 에서 갖는 폭과 거의 같다. 더 넓게 두면 설명이
     제목 쪽으로 흘러가 두 칸의 경계가 흐려진다. */
  max-width: 46ch;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.fq-lead a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fq-lead a:hover { color: #fff; }

/*
 * 여기에 있던 숫자 줄(.fq-facts — 19개 질문 · 5개 주제 · 24시간 내 회신)은 지웠다.
 *
 * 제목이 아래로 잦아드는 그라데이션(.fq-title)이라, 그 위 · 오른쪽에 놓인 12.5px
 * 회색 글자가 배경에 묻혀 읽히지 않았다(사용자 지적). 크기를 키우면 띠가 다시
 * 길어지고, 색을 올리면 제목보다 밝아져 위계가 뒤집힌다 — 그래서 옮기지 않고 지웠다.
 *
 * 2026-08-30 — 이 페이지에서 개수를 보여주던 자리를 전부 없앴다(목차 칩 · 주제
 * 머리글 · 검색창 아래 한 줄). 질문 수는 목록을 보면 알 수 있는 값이고, 숫자가
 * 곳곳에 흩어져 있으면 정작 읽어야 할 질문이 밀린다. 회신 시간만 페이지 맨 아래
 * CTA 문장에 남아 있다. 되살리려거든 그 자리들과 겹치지 않는지부터 따질 것.
 */

/*
 * 여기에 있던 주제 인덱스 카드(.fq-index · .fq-idx*)는 통째로 지웠다.
 *
 * 그 카드가 들고 있던 주제 다섯은 바로 아래 칩 줄(.fq-cat)에도 똑같이 있었다.
 * 같은 목록을 두 곳에 두면서 히어로만 190px 이 됐고, 개수도 두 곳에서 따로 세고
 * 있어 언젠가 한쪽만 고쳐질 자리였다.
 *
 * 되살리려거든 먼저 '이 화면에서 할 한 가지(검색해서 답을 찾는 것)'가 스크롤
 * 밖으로 밀리지 않는지부터 재 볼 것. 그것이 이 카드를 세 번째로 줄인 이유다.
 */

/* ---------- 2. 셸 ---------- */

.fq-main { padding: 28px 0 72px; }

/*
 * 좁은 화면에서는 한 칸(분류 칩 줄 → 검색 → 목록), 1024px 부터 2열이 된다.
 *
 * 예전처럼 760px 한 칸으로 두면 넓은 모니터에서 양옆이 통째로 빈다. 그렇다고
 * 본문을 그냥 넓히면 한 줄이 100자를 넘어가 눈이 다음 줄 첫 글자를 못 찾는다.
 * 남는 폭을 목차에 주는 것이 두 문제를 함께 푸는 방법이다.
 */
.fq-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.fq-side { min-width: 0; }
.fq-body { min-width: 0; }

/* ---------- 3. 분류 내비 (좁으면 칩 · 넓으면 목차) ---------- */

/*
 * 같은 버튼이 두 가지 모습으로 산다. 요소를 두 벌 만들지 않는 이유는,
 * 두 벌이면 개수 배지나 선택 상태를 한쪽에서만 고치는 날이 반드시 오기 때문이다.
 */
.fq-cats {
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* 스크롤 그림자가 잘리지 않도록 아래쪽만 조금 띄운다. */
  padding-bottom: 2px;
}

.fq-cats::-webkit-scrollbar { display: none; }

.fq-cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 15px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border);
  border-radius: 9999px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--ease), background var(--ease), border-color var(--ease);
}

.fq-cat:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .08);
}

/* 고른 쪽은 흰 알약. 공지사항의 분류 칩(.notice-chip)과 같은 문법이라
   두 페이지를 오가는 사람이 규칙을 다시 배우지 않아도 된다. */
.fq-cat.is-active {
  background: #fff;
  border-color: #fff;
  color: #0a0a12;
}

/*
 * 여기에 있던 개수 배지(.fq-cat-count)는 지웠다(2026-08-30).
 *
 * 라벨 오른쪽에 '20' · '4' 같은 숫자가 붙어 있었다. 1024px 이상에서 세로 목차가
 * 되면 그 숫자들이 오른쪽에 한 줄로 늘어서서, 목차가 아니라 숫자 표처럼 보였다 —
 * 정작 눌러야 할 라벨이 눈에 덜 들어왔다.
 *
 * 아래 .fq-cat 의 gap 과 1024px 블록의 justify-content 는 남겨 둔다. 자식이 하나뿐인
 * 지금은 아무 일도 하지 않지만, 라벨 옆에 무언가(아이콘 등)를 다시 달 때 필요한 값이다.
 */

/* 여기에 있던 '찾는 답이 없나요?' 도움 카드(.fq-help)는 지웠다. 페이지 맨 아래
   CTA 가 같은 문구 · 같은 링크를 이미 들고 있어, 목차 옆의 것은 배경처럼 읽혔다. */

/* ---------- 4. 검색 ---------- */

/*
 * 640px 부터 헤더 아래에 붙어 따라온다.
 *
 * 좁은 화면에서는 일부러 붙이지 않는다. 헤더 64px + 검색 68px 이면 세로가
 * 짧은 휴대폰에서 화면의 4분의 1이 늘 조작 막대로 차 버린다 — 정작 읽어야 할
 * 답이 그만큼 좁아진다.
 */
.fq-search-bar {
  position: relative;
  z-index: 10;
  /*
   * 아래 여백이 넉넉한 것은 실수가 아니다.
   *
   * 640px 이상에서 이 막대가 헤더 밑에 붙어 따라온다. 그때 아래로 지나가는 카드를
   * 가려 주는 것은 '배경이 칠해진 높이' 뿐이라, 여백이 얇으면 카드가 검색창 코앞까지
   * 올라와 붙어 보인다. 아래의 scroll-margin-top 값과 한 묶음이다 — 이 값을 바꾸면
   * 5절 · 6절의 착지 여백도 함께 다시 재야 한다.
   */
  padding: 14px 0 18px;
  background: var(--bg);
}

/*
 * 여기에 있던 12px 짜리 페이드(.fq-search-bar::after)는 지웠다(2026-08-30).
 *
 * 막대 아래 12px 을 var(--bg) → 투명 그라데이션으로 덮어, 카드가 지나갈 때 경계가
 * 부드러워지게 하던 겹이다. 문제는 스크롤과 무관하게 '늘' 거기 있었다는 것이다 —
 * 검색창 바로 아래 글자의 윗부분이 언제나 배경색에 반쯤 잠겨, 글자가 잘린 것처럼
 * 보였다(사용자 지적).
 *
 * 배경이 단색(#040407)이라 페이드가 없어도 이음매가 드러나지 않는다. 되살리지 말 것.
 * 부드럽게 만들고 싶으면 겹을 덧대지 말고 위의 아래 여백을 늘릴 것 — 그쪽은 글자를
 * 덮는 대신 글자를 밀어낸다.
 */

.fq-search {
  position: relative;
  display: block;
}

.fq-search .input {
  width: 100%;
  min-height: 48px;
  /* 왼쪽은 돋보기, 오른쪽은 지우기 버튼 자리다. */
  padding: 12px 46px 12px 44px;
  border-radius: 9999px;
  font-size: 15px;
}

.fq-search .input:focus {
  border-color: rgba(61, 233, 255, .55);
  box-shadow: 0 0 0 3px rgba(61, 233, 255, .12);
}

/* 브라우저 기본 지우기 버튼은 다크 배경에서 검게 찍힌다. 우리 버튼을 쓴다. */
.fq-search .input::-webkit-search-cancel-button { display: none; }

.fq-search-icon {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.6' fill='none' stroke='%23ffffff' stroke-opacity='.45' stroke-width='1.6'/%3E%3Cpath d='M10.6 10.6 14 14' fill='none' stroke='%23ffffff' stroke-opacity='.45' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

.fq-search-clear {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, .06);
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  transition: color var(--ease), background var(--ease);
}

.fq-search-clear:hover { color: #fff; background: rgba(255, 255, 255, .14); }
.fq-search-clear[hidden] { display: none; }

/*
 * 여기에 있던 개수 줄(.fq-meta — '질문 20개')은 지웠다(2026-08-30).
 *
 * 화면을 보면 질문이 몇 개인지 세어 볼 수 있고, 주제를 고르면 목록이 바뀌는 것도
 * 눈에 그대로 보인다. 검색창과 첫 질문 사이에서 읽을 것만 한 줄 늘리던 자리였다.
 *
 * 요소 자체는 남아 있다 — faq.html 에서 sr-only 로 바뀌어 화면 낭독기에만 결과
 * 개수를 알린다(그 이유는 그쪽 주석 참조). 보이지 않으므로 여기에 규칙이 없다.
 * 다시 보이게 하려거든 위 검색창의 아래 여백부터 줄일 것 — 지금 값은 이 줄이
 * 없는 것을 전제로 잡혀 있다.
 */

/* ---------- 5. 주제 묶음 ---------- */

.fq-groups { display: grid; gap: 26px; }

.fq-group[hidden] { display: none; }

/* 주소의 #조각으로 바로 들어왔을 때의 착지점.
   헤더(64) + 검색 막대(14 + 48 + 18 = 80) 뒤로 묶음 제목이 들어가지 않게 띄운다.
   92 는 그 80 에 숨 쉴 자리 12px 을 더한 값이다 — 검색 막대의 여백을 바꾸면
   이 값과 아래 6절의 같은 값도 함께 다시 재야 한다. */
.fq-group {
  scroll-margin-top: calc(var(--header-h) + 92px);
}

.fq-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

/* 고정폭 번호. 목록을 스크롤하다 멈춰도 지금 몇 번째 주제를 보고 있는지 알 수 있고,
   무엇보다 이 페이지가 '번호 붙은 색인'이라는 인상을 만든다 — 히어로에서 인덱스
   카드를 들어낸 뒤로는 그 인상을 이 두 글자가 혼자 짊어진다.
   공지사항의 같은 자리에는 고정폭 '날짜'가 선다. 두 페이지가 갈리는 작은 축이다. */
.fq-group-num {
  color: rgba(255, 255, 255, .28);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.fq-group-title {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* 주제 머리글의 개수(.fq-group-count — '4개')도 함께 지웠다. 바로 아래 목록이
   그 답을 이미 들고 있어서, 제목 옆의 숫자는 세어 볼 것을 미리 알려 줄 뿐이었다. */

.fq-list { display: grid; gap: 10px; }

/* ---------- 6. 질문 카드 (style.css 의 .faq-* 위에 덧칠) ---------- */

/*
 * 여기서 클래스 이름을 새로 만들지 않는다. app.js 가 .faq-item · .faq-q ·
 * .faq-a · .is-open 을 그대로 찾기 때문이다. 이름을 바꾸면 아코디언이 죽는다.
 */
.fq-list .faq-item {
  /* 아래 두 겹(::before · ::after)의 기준 상자. 없으면 겹이 카드가 아니라
     화면 전체를 기준으로 자리를 잡는다. */
  position: relative;
  /* 카드 안 커서 좌표. static/faq-lens.js 가 CSSOM 으로 넣는다. 기본값이
     가운데라, 스크립트가 없으면 호버 시 카드 한가운데가 은은히 밝아진다 —
     효과가 사라질 뿐 화면이 깨지지 않는다. */
  --fq-cx: 50%;
  --fq-cy: 50%;
  border-radius: var(--radius-md);
  transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);
  /* 링크로 바로 들어왔을 때 헤더와 검색 막대에 가리지 않게 한다(5절과 같은 값). */
  scroll-margin-top: calc(var(--header-h) + 92px);
}

.fq-list .faq-item[hidden] { display: none; }

.fq-list .faq-item:hover { border-color: rgba(255, 255, 255, .2); }

/* 열린 항목은 왼쪽 선 하나로 표시한다. 테두리 색만 바꾸면 목록이 길 때
   어느 것이 열려 있는지 훑어서 알기 어렵다. */
.fq-list .faq-item.is-open {
  background: rgba(255, 255, 255, .025);
  border-color: rgba(255, 255, 255, .22);
  box-shadow: inset 2px 0 0 var(--primary);
}

/*
 * 커서 스포트라이트 — 이 페이지의 마우스 효과가 목록으로 이어지는 자리.
 *
 * 커서를 중심으로 한 '원'이다. 공지사항은 목록에서 레일 위의 마디와 1px 세로
 * 하이라인('선')을 쓴다 — 히어로를 같은 물감으로 맞춘 지금, 두 페이지를 형태로
 * 가르는 것은 본문의 이 규칙뿐이다. 한쪽 값을 다른 쪽에 복사해 오지 말 것.
 *
 * 겹을 둘로 나눈 이유: 안쪽 채움(::before)만으로는 경계가 흐려 '눌리는 것'으로
 * 보이지 않고, 테두리 빛(::after)만으로는 카드 안이 어두운 채로 남는다.
 */
.fq-list .faq-item::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(240px circle at var(--fq-cx) var(--fq-cy),
    rgba(61, 233, 255, .11), transparent 62%);
  opacity: 0;
  transition: opacity .28s ease;
}

.fq-list .faq-item:hover::before,
.fq-list .faq-item:focus-within::before { opacity: 1; }

/*
 * 테두리 빛. padding + mask-composite 는 '테두리만 칠하는' 표준 수법이다.
 *
 * @supports 로 감싸는 이유가 중요하다 — mask-composite 를 모르는 브라우저에서는
 * 이 겹이 카드 전체를 청록으로 덮어 글자를 못 읽게 만든다. 모르면 아예 그리지
 * 않는 편이 맞다(안쪽 채움은 그대로 남으므로 효과가 통째로 사라지지도 않는다).
 */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .fq-list .faq-item::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(200px circle at var(--fq-cx) var(--fq-cy),
      rgba(61, 233, 255, .8), transparent 58%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .28s ease;
  }

  .fq-list .faq-item:hover::after,
  .fq-list .faq-item:focus-within::after { opacity: 1; }
}

/* 두 겹은 배치된 요소라, 정적인 질문 · 답변보다 위에 그려진다. 내용에도 자리를
   줘서 위로 올린다 — 이 두 줄이 없으면 글자가 빛 아래로 깔려 흐려 보인다. */
.fq-list .faq-q,
.fq-list .faq-a { position: relative; z-index: 1; }

.fq-list .faq-q {
  align-items: flex-start;
  gap: 14px;
  /* 손가락으로 눌러도 빗나가지 않는 높이. */
  min-height: 60px;
  padding: 17px 18px;
  font-size: 15px;
  line-height: 1.55;
}

.fq-list .faq-q > span:first-child {
  min-width: 0;
  /* 긴 질문이 아이콘을 밀어내지 않게 한다. */
  flex: 1 1 auto;
}

/* 아이콘을 동그란 웰 안에 넣는다. 표적이 커져 누르기 쉬워지고,
   닫힘(+) · 열림(−) 상태가 배경 덕에 멀리서도 보인다. */
.fq-list .faq-icon {
  width: 28px;
  height: 28px;
  margin-top: -2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  transition: background var(--ease), color var(--ease);
}

/* style.css 는 16px 상자를 기준으로 막대를 left:0 에 두었다. 상자를 28px 로
   키웠으므로 가운데로 다시 맞춘다(가로 6px · 세로 -1px). transform 은
   건드리지 않는다 — 열림 표시(rotate)가 그쪽에 있다. */
.fq-list .faq-icon::before,
.fq-list .faq-icon::after {
  left: 6px;
  top: calc(50% - 1px);
  width: 16px;
}

.fq-list .faq-q:hover .faq-icon { background: rgba(255, 255, 255, .14); }

.fq-list .faq-item.is-open .faq-icon {
  background: rgba(61, 233, 255, .16);
  color: var(--primary);
}

/*
 * 답변 본문.
 *
 * 여기서는 '자리'만 정한다. 글의 모양(문단 간격 · 목록 점 · 링크 · 표 · 이미지)은
 * static/prose.css 가 맡는다 — 답변 안쪽이 .prose.prose-sm 이기 때문이다.
 *
 * 2026-08-30 에 안쪽 규칙(p + p · ul · li::before · a · b)을 여기서 걷어냈다.
 *   답변이 관리자가 쓴 HTML 로 바뀌면서 조판이 홈페이지 · 관리자 미리보기 ·
 *   공지 상세 세 곳에서 같아야 했는데, 그 규칙들이 여기 남아 있으면 이 페이지만
 *   다르게 보인다. 선택자 무게가 더 높아서(.fq-list .faq-a li::before 가
 *   .prose ul > li::before 를 이긴다) 파일 순서를 바꿔도 소용이 없다.
 *   되살리지 말 것 — 되살리는 순간 관리자 미리보기가 거짓말을 시작한다.
 */
.fq-list .faq-a { padding: 0 18px 18px; }

/* 답변이 나타날 때만 아주 짧게 떠오른다.
   app.js 가 hidden 을 걷는 순간 선택자가 다시 맞아 애니메이션이 재생되므로
   자바스크립트를 한 줄도 더 쓰지 않는다. */
.fq-list .faq-a:not([hidden]) {
  animation: fq-answer-in .24s cubic-bezier(.22, 1, .36, 1);
}

@keyframes fq-answer-in {
  from { opacity: 0; transform: translateY(-5px); }
}

/* ---------- 6-b. 불러오는 중 ---------- */

/*
 * 질문이 서버에서 오므로 첫 화면에는 아무것도 없다. 빈 자리를 그대로 두면
 * '질문이 없는 페이지'로 읽히고, 잠시 뒤 목록이 나타나며 화면이 아래로 튄다.
 * 카드가 들어올 자리를 미리 잡아 두면 둘 다 없어진다.
 */
.fq-skeleton { display: grid; gap: 10px; }

.fq-skeleton-row {
  height: 62px;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: fq-shimmer 1.4s ease-in-out infinite;
}

@keyframes fq-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- 7. 검색 결과 없음 ---------- */

.fq-empty {
  display: grid;
  gap: 10px;
  place-items: center;
  padding: 52px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.fq-empty[hidden] { display: none; }

.fq-empty-title {
  color: var(--text);
  font-size: 15.5px;
  font-weight: 700;
}

.fq-empty-text {
  max-width: 440px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.fq-empty .btn { margin-top: 6px; }

/* ---------- 8. 하단 CTA ---------- */

/* 판은 style.css 의 .cta-band 를 그대로 쓴다. 여기서는 위 여백만 정한다. */
.fq-cta { margin-top: 44px; }

/* ---------- 9. 반응형 ---------- */

@media (min-width: 640px) {
  .fq-hero { padding: 24px 0 22px; }
  .fq-main { padding: 32px 0 88px; }
  .fq-lead { font-size: 14.5px; }

  /* 여기서부터 검색창이 헤더 아래에 붙는다(4절 주석 참조). */
  .fq-search-bar {
    position: sticky;
    top: var(--header-h);
  }

  .fq-list .faq-q { padding: 18px 22px; font-size: 15.5px; }
  /* 글자 크기는 여기서 정하지 않는다 — .prose-sm 이 화면 폭에 맞춰 올린다. */
  .fq-list .faq-a { padding: 0 22px 20px; }
}

/*
 * 히어로가 두 줄 × 두 칸으로 접히는 지점.
 *
 * 900px 은 제목이 한 줄을 지키면서 오른쪽 칸에 설명 46ch 를 내줄 수 있는 최소
 * 폭이다. 더 일찍 나누면 제목이 두 줄로 꺾여 띠가 세 줄이 되고, 줄이려던 높이가
 * 도로 늘어난다(실측). 공지사항도 같은 900px 에서 접힌다 — 창을 줄여 가며 볼 때
 * 두 페이지가 서로 다른 폭에서 접히면 한쪽이 고장 난 것처럼 보인다.
 *
 * align-items: end 로 두 줄의 아랫선을 맞춘다. 그래야 큰 제목과 작은 설명이
 * 같은 바닥에 서서, 글자 크기가 달라도 한 줄로 읽힌다.
 */
@media (min-width: 900px) {
  .fq-hero { padding: 26px 0 24px; }

  /*
   * 윗줄은 이동 경로가 통째로 쓴다. 숫자 셋이 있던 오른쪽 칸이 비어서다.
   *
   * 공지사항도 윗줄이 경로 하나인데, 두 페이지가 그것만으로 같아지지는 않는다 —
   * 저쪽은 라벨이 제목 '옆'이고 이쪽은 '위'이며, 질감(도트 ↔ 스캔라인) · 빛의
   * 방향(왼쪽 위 청록 ↔ 오른쪽 위 적색) · 마우스 효과의 축(원 ↔ 선)이 다르다.
   */
  .fq-hero-inner {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    grid-template-areas:
      'meta  meta'
      'title lead';
    gap: 12px 48px;
    align-items: end;
  }

  /* 제목의 마지막 줄과 설명의 마지막 줄이 같은 바닥에 서도록 미세 보정. */
  .fq-lead { padding-bottom: 3px; }

  .fq-group-title { font-size: 16px; }
}

/*
 * 2열. 왼쪽 목차가 헤더 아래에 붙어 따라오고, 분류 칩은 세로 목차가 된다.
 *
 * 244px 은 '재정거래 · 안전' 같은 가장 긴 라벨과 개수가 한 줄에 들어가는 폭이다.
 * 더 좁히면 라벨이 두 줄로 꺾여 목차의 줄 간격이 제각각이 된다.
 */
@media (min-width: 1024px) {
  .fq-shell {
    grid-template-columns: 244px minmax(0, 1fr);
    gap: 48px;
  }

  .fq-side {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }

  .fq-cats {
    flex-direction: column;
    gap: 2px;
    overflow: visible;
    padding-bottom: 0;
  }

  /* 세로 목차에서는 흰 알약이 너무 크게 소리친다. 관리자 콘솔의 사이드 메뉴와
     같은 문법(왼쪽 강조선 + 옅은 유리)으로 바꾼다. */
  .fq-cat {
    position: relative;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border-color: transparent;
    border-radius: var(--radius-sm);
    font-size: 14px;
  }

  .fq-cat:hover {
    background: rgba(255, 255, 255, .05);
    border-color: transparent;
  }

  .fq-cat.is-active {
    background: rgba(255, 255, 255, .08);
    border-color: transparent;
    color: #fff;
  }

  .fq-cat.is-active::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 3px;
    background: var(--primary);
    border-radius: 0 3px 3px 0;
  }

  /* 본문 폭 상한. 2열이 되어도 한 줄이 너무 길어지지 않게 한다 —
     넓은 모니터에서 100자를 넘어가면 눈이 다음 줄 첫 글자를 못 찾는다. */
  .fq-groups { max-width: 780px; }
  .fq-search { max-width: 780px; }
  .fq-empty { max-width: 780px; }
}

@media (min-width: 1280px) {
  .fq-shell { grid-template-columns: 260px minmax(0, 1fr); gap: 56px; }
}

/* ---------- 10. 접근성: 모션 최소화 ---------- */

/*
 * 물감 배경과 카드 스포트라이트는 여기서 끄지 않는다.
 *
 * 성능을 위해 창 애니메이션을 꺼 둔 Windows PC 는 브라우저가 모든 사이트에
 * reduce 를 보고한다. 그 신호로 마우스 효과를 지우면 정작 주 사용자만 밋밋한
 * 화면을 보게 된다 — 메인 히어로 셰이더 · 로그인 유체 · 요금제 프리즘과 같은
 * 규칙이다. 물감은 CSS 전환이 아니라 캔버스에 그려지는 것이라, 아래에서
 * 전환 시간을 지워도 그대로 흐른다(첫 프레임에 드러나는 순간만 즉시 바뀐다).
 *
 * 내용을 모션 뒤에 숨기지 않는 것이 이 사이트의 원칙이라, 어떤 설정에서도
 * 질문과 답은 그대로 보인다.
 */
@media (prefers-reduced-motion: reduce) {
  .fq-list .faq-a:not([hidden]) { animation: none; }
  /* 무한히 반복하는 것은 duration 을 줄여도 계속 깜빡인다. 이것만 통째로 끈다. */
  .fq-skeleton-row { animation: none; }
  .fq-cat,
  .fq-list .faq-item,
  .fq-hero-canvas,
  .fq-list .faq-icon { transition: none; }
}