/* 공용 FAQ 뼈대 — G-에딧 FAQ(/help/faq)와 공용 도움말(/help)이 «함께» 쓴다.
   🔴 2026-09-07 — 여기 있던 규칙은 help-faq.html 의 <style> 안에 있던 것을 «글자 그대로» 옮긴 것이다.
      한 값도 안 바꿨다. 옮긴 뒤 선택자 목록을 세어 원본과 같은지 확인했다.
   ⛔ 두 벌로 만들지 마라 — 여기 고치면 두 화면이 «같이» 바뀐다. 그게 이 파일이 있는 까닭이다.
   ⚠️ 한 화면에만 필요한 것은 여기 넣지 마라. 시연 타일(.f-demo)은 G-에딧 FAQ 전용이라
      그 화면 <style> 에 그대로 남겨 두었다.
   ⚠️ 경로는 «상대»다 — 두 화면 다 file:// 로 열어도 혼자 서야 한다. */

/* 🔴 **이음 셋을 여기서 잇는다 — 새 색이 아니다** (2026-08-30 실측 사고).
   목업의 결은 `--accent` · `--accent-fill` · `--accent-ink` 를 쓰는데, 그 «이름»은
   tokens.css 가 아니라 **styles.css 가** 만든다. 이 화면은 styles.css 를 안 싣는다
   (tokens.css + shell.css 둘뿐). 그래서 셋이 «빈 값»이 되어 이렇게 죽어 있었다:
      바로가기 단추 면   → 투명 (단추가 단추로 안 보인다)
      열린 줄 왼쪽 2px  → 없음
   ⚠️ 오류는 0줄이고 글자·나머지 색은 멀쩡했다 — 눌러서 열어 봐야 보이는 자리였다.
   ⛔ 색을 «고르지» 않았다. styles.css 의 그 세 줄을 «그대로» 옮긴 것뿐이다:
        --accent: var(--now)  ·  --accent-fill: var(--now-solid)  ·  --accent-ink: var(--now-ink)
      그래서 라이트/다크가 저절로 따라온다(지침 2절 「hex 로 박지 말고 토큰 이름으로」).
   ⛔ styles.css 를 통째로 싣지 않는다 — 이 화면과 상관없는 규칙 수천 줄이 같이 온다. */
.판 { --accent: var(--now); --accent-fill: var(--now-solid); --accent-ink: var(--now-ink); }

/* 🔴 **box-sizing 도 여기서 준다** (2026-08-30 실측).
   목업은 제 머리에 `*{box-sizing:border-box}` 를 깔고 있었고 «앱 화면»엔 그게 없다.
   그래서 검색칸이 폭 100% + 좌우 안여백 74px 가 «더해져» 본문 밖으로 나갔다:
      375px 화면에서 검색칸 405px · 문서가 가로로 54px 넘쳤다.
   ⚠️ 넓은 화면에선 안 보인다 — 본문이 820px 로 묶여 있어 넘친 만큼이 안 드러난다.
      좁혀 봐야 나오는 자리다.
   ⛔ 전역(`*`)에 걸지 않는다 — 이 화면 «안»에만 건다. 앱의 다른 규칙을 건드리지 않는다. */
.판, .판 *, .판 *::before, .판 *::after { box-sizing: border-box; }

/* 🔤 검색칸 테두리는 «도움말 파랑»이다 (J.J 2026-08-30).
   까닭 — 「궁금한 것을 검색해 보세요」 칸이 다른 화면의 입력칸과 «똑같이» 생겨서 겹쳐 보였다.
   🔄 2026-08-30 «면도 바꿨다» — 처음엔 「테두리만」이었는데(J.J) 그걸로는 안 됐다.
      재 보니 색 문제가 아니라 «실루엣»이 같았다 — 검색칸 776×47 · 질문 한 줄 774×47 ·
      면은 카드와 «완전히 같은 값»(#1e2125). 테두리만 올리면 대비가 1.61→1.99, 0.38 밖에 안 오른다.
      ⇒ 면을 --card 에서 **--page** 로 내려 «파인 입력칸»으로 만든다(J.J 확정 · 안 ㉡).
        「입력칸은 판보다 어두운 곳」은 이미 아는 규칙이라 손님이 새로 배울 게 없다.
      ⛔ 되돌리지 마라 — 「면은 안 바꾼다」는 그 앞 회차의 말이고, 그걸로 안 돼서 여기까지 왔다.
      근거 목업 ~/globalroad-notes/검색칸-갈래-시안.html (안 여섯 · 겹치는 것 실측)
   ⛔ 새 색이 아니다. `--read` 는 이 저장소가 «알려주기·읽기»에 이미 쓰는 색이고
      tokens.css 가 「가이드 화면 전용」이라 적어 둔 그 색이다. 라이트에선 청록(#007b8b)으로 따라간다.
   ⛔ 라임(--accent)은 안 쓴다 — 이 화면에서 라임은 「고른 분류」와 「바로가기」의 것이다.
   평소 테두리 --read-ln (옅은 선) · 포커스 --read (또렷한 선 + 20% 링)

══ 여기부터 손님 화면 (안 A) ══════════════════════════════════════════ */
.판{background:var(--page);color:var(--tx);min-height:100%;
 font:14px/1.65 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard",sans-serif}
.판 .속통{max-width:820px;margin:0 auto;padding:26px 22px 60px}

.f-h{margin:0 0 16px}
.f-h h1{font-size:23px;font-weight:800;margin:0 0 5px;letter-spacing:-.01em}
.f-h p{margin:0;font-size:13px;color:var(--tx3)}

.f-s{position:relative;margin:0 0 12px}
.f-s input{width:100%;font:inherit;font-size:14px;padding:11px 36px 11px 38px;border-radius:10px;
 border:1px solid var(--read-ln);background:var(--page);color:var(--tx);outline:none}
.f-s input::placeholder{color:var(--tx3)}
.f-s input:focus{border-color:var(--read);box-shadow:0 0 0 3px color-mix(in srgb,var(--read) 20%,transparent)}
.f-s .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--tx3);display:flex}
.f-s .x{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:none;
 color:var(--tx3);cursor:pointer;font:inherit;font-size:15px;padding:4px 7px;border-radius:6px}

/* ── ② 고른 칩 — 면·테두리·글자 셋을 «한꺼번에» 올린다 (브랜드 토큰 안에서만) ──
   기본은 중립 그대로. 고른 것만 --now-bg / --now-ln / --now 로 간다.
   ⛔ 분류마다 다른 색을 주지 않는다 — 색은 «고름»이라는 한 가지 뜻만 말한다.
   ⛔ 형광 «채움»(--now-solid)은 안 쓴다. 그건 이 화면에서 바로가기 CTA 하나의 것이다. */
.f-c{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 14px}
.f-c button{font:inherit;font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;
 border:1px solid var(--line-c);background:transparent;color:var(--tx3);cursor:pointer;white-space:nowrap;
 display:inline-flex;align-items:center;gap:5px}
.f-c button:hover{background:var(--chip-c);color:var(--tx2)}
.f-c button b{font-weight:600;font-size:11.5px;opacity:.55}
.f-c button.on{background:var(--now-bg);border-color:var(--now-ln);color:var(--now);font-weight:800}
.f-c button.on b{opacity:1;font-weight:800}
.f-c button:disabled{opacity:.35;cursor:default}
.구버전 .f-c button.on{background:var(--chip-c);border-color:var(--tx3);color:var(--tx);font-weight:700}
.구버전 .f-c button.on b{opacity:.55;font-weight:600}

.f-r{font-size:12px;color:var(--tx3);margin:0 0 9px}
.f-r b{color:var(--read);font-weight:700}

.f-g{margin:0 0 14px}
.f-g > h2{font-size:11.5px;font-weight:700;color:var(--tx3);margin:0 0 6px;padding:0 2px;letter-spacing:.04em}
.f-l{background:var(--card);border:1px solid var(--line-c);border-radius:12px;overflow:hidden}
.f-i + .f-i{border-top:1px solid var(--line-s)}

/* ── ① 열린 줄 — 질문과 답이 «한 덩이»로 묶이고, 그 «안»에서 선으로 갈린다 ──
   ⛔ 카드를 새로 만들지 않는다. 옅은 면 + 왼쪽 2px 포인트뿐이다. */
.f-i.열{background:color-mix(in srgb,var(--chip-c) 62%,transparent);box-shadow:inset 2px 0 0 var(--accent)}
.구버전 .f-i.열{background:none;box-shadow:none}
/* 🔵 시안 2 — 무채색 초점 (J.J 확정 2026-08-29): 닫힌 줄은 한 톤 아래, «열린 줄만» --tx.
   아코디언이 한 번에 하나만 열려서, 나머지를 내리는 것이 «손해»가 아니라 «초점»이 된다.
   ⛔ 색을 늘리지 않는다 — 무채색 셋 안에서 끝난다. 브랜드색 세 자리는 그대로다. */
.f-q{width:100%;display:flex;align-items:flex-start;gap:10px;text-align:left;font:inherit;
 font-size:14px;font-weight:600;color:var(--tx2);background:none;border:0;cursor:pointer;
 padding:13px 14px;line-height:1.5;transition:color .12s ease}
.f-q:hover{background:var(--chip-c)}
.f-i.열 .f-q{font-weight:800;color:var(--tx);padding-bottom:11px}
.f-i.열 .f-q:hover{background:none}
.구버전 .f-q{color:var(--tx)}
.구버전 .f-i.열 .f-q{font-weight:700;padding-bottom:0}
.f-q .kar{margin-left:auto;flex:none;color:var(--tx3);transition:transform .16s ease;margin-top:3px}
.f-i.열 .f-q .kar{transform:rotate(180deg);color:var(--tx2)}

/* 답 — 질문 밑에 «선 한 겹»으로 갈린다 */
.f-a{margin:0 14px;padding:12px 0 15px;border-top:1px solid var(--line-c)}
.구버전 .f-a{margin:0;padding:0 14px 15px;border-top:0}
.f-a .답{font-size:14.5px;font-weight:700;color:var(--tx);margin:0 0 8px;line-height:1.6}
.구버전 .f-a .답{font-size:13.5px}
.f-a p.설{margin:0 0 12px;font-size:13px;color:var(--tx2);line-height:1.75}
.구버전 .f-a p.설{font-size:13.5px}
.f-a .곳{display:flex;gap:6px;align-items:flex-start;font-size:12.5px;color:var(--tx3);margin:0}
/* 🔄 2026-09-08 — 「앱 스토어 손님 «전용» 답」 두 줄을 걷었다 (J.J: Q9·Q10·Q14·Q16 «완전 숨김»).
   전엔 넷의 답을 두 벌로 그려 놓고 이 CSS 가 골랐다. 이제는 그 넷이 목록에서 «통째로» 빠지므로
   (help-faq.html 의 보일것) 고를 것이 없다 — 죽은 규칙을 남기지 않는다.
   ⛔ 되살리지 마라. 되살리는 것은 「완전 숨김」에서 「대신 보여주기」로 돌아가는 것이다.
   ⚠️ 짝처럼 보이는 .앱스토어숨김 은 «걷지 않았다» — 그건 /first/writing 막다른 길 표이고
      2026-09-06 의 다른 지침이다. 그 감춤은 shell.css 한 곳에 그대로 있다. */

/* ── ③ 바로가기 — «실제 화면 이동»에만. 본문보다 먼저 눈에 들지 않게 한 치수 내렸다 ── */
.f-go{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12.5px;font-weight:700;
 padding:6px 12px;border-radius:8px;border:0;cursor:pointer;
 background:var(--accent-fill);color:var(--accent-ink)}
.f-go:hover{filter:brightness(1.06)}
.f-go .화{font-size:11px;opacity:.85}
.구버전 .f-go{font-size:13px;padding:8px 15px;border-radius:9px}

.f-0{background:var(--card);border:1px solid var(--line-c);border-radius:12px;padding:26px 18px;
 text-align:center;color:var(--tx3);font-size:13px}
.f-0 b{display:block;color:var(--tx2);font-size:14px;font-weight:700;margin-bottom:5px}

/* 🔄 목업은 「좁게 보기」를 손으로 켰다(.판.좁). 진짜 화면엔 그런 스위치가 없으니
   같은 규칙을 «폭»으로 옮긴다. 값은 한 개도 안 바꿨다 — 켜지는 조건만 바뀐다. */
@media (max-width: 640px) {
  .판 .속통{padding:18px 14px 48px}
  .판 .f-h h1{font-size:19px}
  .판 .f-c{flex-wrap:nowrap;overflow-x:auto;padding-bottom:5px;margin-right:-14px;padding-right:14px;scrollbar-width:none}
  .판 .f-c::-webkit-scrollbar{display:none}
  .판 .f-q{font-size:13.5px;padding:12px 12px}
  .판 .f-a{margin:0 12px;padding:11px 0 14px}
  .판 .f-a .답{font-size:13.8px}
  .판 .f-a p.설{font-size:12.8px}
}