/* 설정 판 — 소싱 「설정」 탭의 «안» (J.J 확정 2026-08-26)
 *
 * 시안 정본 : ~/globalroad-notes/시안-소싱셋팅흐름-고침-20260825.html
 *
 * ⛔ 색 값을 여기서 «새로 고르지 않는다». 정본은 portal/public/tokens.css 다.
 * ⛔ `.gr-cfg-*`(옛 카드 나열)를 고치지 않는다 — 그건 index.html·shell.css 것이라 남의 파일이다.
 *    이 판은 `first-home.js` 가 «자기 마크업»을 새로 그린다.
 *
 * 🔴 이름은 `fhome-` 다. `fh-` 를 쓰지 마라 — 이미 임자가 있다.
 *    `.fh` / `.fh-it` / `.fh-sec` 는 소싱의 «사진 가이드창»이 08-23 부터 쓰는 이름이다(styles.css).
 *    처음에 `fh-` 로 지었다가 라이브에서 부딪쳤다 — 저쪽 `.fh-it:first-of-type{padding-top:0}` 이
 *    내 첫 카드의 윗여백을 지워 제목이 «잘린 것처럼» 보였다(J.J 2026-08-26 실측).
 *    ⚠️ 반대로도 깨진다: 내 파일이 styles.css «뒤»에 실려서 저쪽 가이드창도 내가 덮고 있었다.
 *    ⛔ 새 이름을 지을 땐 임자가 있나부터 세라.
 *
 * ── 왜 이 모양인가 (J.J 와 시안 여섯 벌을 견주고 정했다) ──────────────────
 *   ⛔ 머리에 «단계 목록»을 또 두지 않는다 — 아래 목록과 두 벌이 되어
 *      손님이 「위에서도 눌러야 하나」로 읽는다(J.J 가 그 자리에서 잡았다).
 *   ⭕ 인사(16px) → 두 줄 → 「설정」(25px) → 할 일 목록. 덩어리는 «둘»이다.
 *   ⭕ 「약 5분」은 «첫 진입에만». 그 뒤로는 «남은 개수»만 말한다(J.J).
 */

/* ── 인사 ─────────────────────────────────────────────────────────────── */
.fhome-hello { margin: 0 0 9px; font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: var(--tx); }
.fhome-hello .fhome-who { color: var(--now); }
.fhome-s1 { margin: 0 0 2px; font-size: 14px; color: var(--tx2); }
.fhome-s1 b { color: var(--tx); font-weight: 700; }
.fhome-s2 { margin: 0 0 34px; font-size: 13.5px; color: var(--tx3); }

/* ── 「설정」 + 단추 한 줄 ─────────────────────────────────────────────── */
.fhome-hd { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.fhome-hd .fhome-l { flex: 1; min-width: 220px; }
.fhome-sect { margin: 0; font-size: 25px; font-weight: 800; letter-spacing: -.035em; line-height: 1.1; color: var(--tx); }
.fhome-lead { margin: 9px 0 0; font-size: 13px; color: var(--tx2); }
.fhome-lead b { color: var(--tx); }
.fhome-btns { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

/* ── 시그니처 «도는 빛» 단추 ────────────────────────────────────────────
   shell.css 의 홈 카드(.cwR)와 «같은 재료»다. 다만 여기선 마크업을 0줄로 두려고
   등록 속성(@property)으로 각도를 애니메이션한다 — shell.css 의 `.gr-cfg-card::after` 와 같은 수법.
   ⚠️ 등록 속성을 모르는 옛 브라우저에선 «안 돈다». 빛띠가 멈춰 있을 뿐 깨지지는 않는다. */
@property --fhome-각 { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes fhome돌기 { to { --fhome-각: 360deg; } }
.fhome-go {
  position: relative; isolation: isolate; cursor: pointer; font-family: inherit;
  background: transparent; color: var(--tx);
  border: 1px solid color-mix(in srgb, var(--tx) 17%, transparent);
  border-radius: 10px; padding: 11px 20px;
  font-size: 13px; font-weight: 700; letter-spacing: -.01em;
}
.fhome-go::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: 10px; padding: 1px;
  background: conic-gradient(from var(--fhome-각),
    var(--now) 0deg, color-mix(in srgb, var(--tx) 26%, transparent) 46deg, transparent 96deg,
    transparent 264deg, color-mix(in srgb, var(--tx) 26%, transparent) 314deg, var(--now) 360deg);
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-clip: content-box, border-box; -webkit-mask-composite: xor;
  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-clip: content-box, border-box; mask-composite: exclude;
  animation: fhome돌기 6s linear infinite;
}
.fhome-go:hover { background: color-mix(in srgb, var(--now) 8%, transparent); }
/* ⚠️ 빛이 도는 게 불편한 손님을 존중한다 — shell.css 가 같은 배려를 한다 */
@media (prefers-reduced-motion: reduce) { .fhome-go::after { animation: none; } }

.fhome-later {
  background: transparent; border: 1px solid var(--line-c); border-radius: 10px;
  padding: 10px 15px; font-size: 12.5px; color: var(--tx2); cursor: pointer; font-family: inherit;
}
.fhome-later:hover { color: var(--tx); border-color: var(--tx3); }

/* ── 진행 ──────────────────────────────────────────────────────────────
   ⛔ 「N/4 끝냈어요」 줄은 «첫 진입에만» 쓴다. 걸음 중에는 「N개 남았어요」가 그 말이라
      두면 같은 말을 두 번 하게 된다(J.J 2026-08-26). */
.fhome-prog { margin: 22px 0 6px; display: flex; align-items: baseline; gap: 9px; }
.fhome-prog .fhome-num { font-family: var(--gr-mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
  font-size: 19px; font-weight: 600; color: var(--now); letter-spacing: -.02em; }
.fhome-prog .fhome-lb { font-size: 12.5px; color: var(--tx3); }
.fhome-prog .fhome-rt { margin-left: auto; font-size: 12px; color: var(--tx2); font-weight: 600; }
.fhome-bar { height: 8px; border-radius: 8px; display: flex; overflow: hidden;
  background: color-mix(in srgb, var(--tx) 9%, transparent);
  border: 1px solid var(--line-c); margin-top: 18px; margin-bottom: 22px; }
.fhome-prog + .fhome-bar { margin-top: 0; }
.fhome-bar i { display: block; height: 100%; background: var(--now); }
.fhome-bar u { display: block; height: 100%; flex: 1; border-left: 1px solid var(--line-c); }

/* ── 할 일 ────────────────────────────────────────────────────────────── */
.fhome-sec { display: flex; align-items: center; gap: 9px; margin: 0 0 9px;
  font-family: var(--gr-mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
  font-size: 10.5px; font-weight: 600; letter-spacing: .16em; color: var(--tx3); }
.fhome-sec i { flex: 1; height: 1px; background: var(--line-c); }
.fhome-list { display: flex; flex-direction: column; gap: 8px; }
.fhome-it { display: flex; align-items: center; gap: 13px; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line-c); border-radius: 12px; padding: 13px 14px; }
.fhome-it:hover { border-color: var(--tx3); }
.fhome-it .fhome-no { flex: none; width: 20px; color: var(--tx3); letter-spacing: .04em;
  font-family: var(--gr-mono, ui-monospace, "SFMono-Regular", Menlo, monospace); font-size: 12px; font-weight: 600; }
.fhome-it .fhome-bd { flex: 1; min-width: 0; }
.fhome-it .fhome-nm { display: block; font-size: 14px; font-weight: 700; letter-spacing: -.015em; }
.fhome-it .fhome-de { display: block; font-size: 12px; color: var(--tx3); margin-top: 2px; }
.fhome-it .fhome-de b { color: var(--tx2); }
.fhome-it .fhome-s { flex: none; font-size: 11px; font-weight: 700; border-radius: 20px; padding: 4px 11px; white-space: nowrap;
  background: color-mix(in srgb, var(--tx) 8%, transparent); color: var(--tx3); }

/* 지금 할 것 */
.fhome-it.fhome-now { border-color: color-mix(in srgb, var(--now) 55%, transparent);
  background: color-mix(in srgb, var(--now) 6%, var(--card)); }
.fhome-it.fhome-now .fhome-no { color: var(--now); }
.fhome-it.fhome-now .fhome-s { background: var(--now); color: var(--now-ink); }
/* ⛔ 라이트에서 면에 --now-solid 를 쓰지 마라 — #3F76D9 위 흰 글자는 4.37 로 못 읽는다.
      tokens.css 가 --done-solid 로 같은 함정을 이미 적어 뒀다. 면은 --now(#2b6acb) 다. */

/* 끝냈어요 — «우리가 본 사실» */
.fhome-it.fhome-done .fhome-no { color: var(--done); }
.fhome-it.fhome-done .fhome-s { background: var(--done-bg); border: 1px solid var(--done-ln); color: var(--done); }

/* 이미 했다고 하셨어요 — «손님 말». ⛔ 위와 같은 칸에 뭉치지 마라(첫셋팅 규율) */
.fhome-it.fhome-skip { opacity: .8; }
.fhome-it.fhome-skip .fhome-s { background: var(--wait-bg); border: 1px solid var(--wait-ln); color: var(--wait); }

/* 아직 */
.fhome-it.fhome-wait { opacity: .55; }
.fhome-it.fhome-wait .fhome-s { background: var(--wait-bg); border: 1px solid var(--wait-ln); color: var(--wait); }

/* 04 칸 «안의 8개» — 겉 셈은 4개 그대로 두고 이 칸만 8을 말한다 */
.fhome-it .fhome-s.fhome-inner { font-family: var(--gr-mono, ui-monospace, "SFMono-Regular", Menlo, monospace); letter-spacing: .03em; }

/* ── 「지금 건너뛸까요?」 ───────────────────────────────────────────────── */
.fhome-veil { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px;
  background: color-mix(in srgb, #000 60%, transparent); }
.fhome-veil[hidden] { display: none; }
.fhome-modal { background: var(--card); border: 1px solid var(--line-c); border-radius: 15px;
  padding: 20px 22px; max-width: 400px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.75); }
/* 제목은 «경고색»이다 (J.J 2026-08-26). 낱말은 --warn — 08-22 에 J.J 가 연 그것이다
   (「경고 문구니까 주황 · 너무 경고스럽지 않게」). ⛔ --danger 아니다 — 그건 «실패»고 이건 «주의»다. */
.fhome-modal h3 { font-size: 17px; font-weight: 800; margin: 0 0 11px; letter-spacing: -.02em;
  color: var(--warn); }
.fhome-modal p { font-size: 12.5px; color: var(--tx2); margin: 0 0 9px; line-height: 1.75; }
.fhome-modal p.fhome-hi { color: var(--tx); }
.fhome-modal p.fhome-hi b { color: var(--now); }
.fhome-mbtns { display: flex; gap: 9px; margin-top: 16px; flex-wrap: wrap; }

/* ── 다 끝낸 손님이 «직접» 설정에 들어왔을 때 ─────────────────────────── */
.fhome-alldone { display: flex; align-items: center; gap: 9px; margin: 0 0 22px;
  background: var(--done-bg); border: 1px solid var(--done-ln); border-radius: 11px;
  padding: 11px 13px; font-size: 12.5px; color: var(--tx2); }
.fhome-alldone b { color: var(--tx); }

/* ── 「할 일」 아래에 붙는 «설정 카드 나열» ────────────────────────────────
   `.gr-cfg` 는 index.html·shell.css 것이라 «내 것이 아니다». 여기서 고치는 건
   자리(margin) 하나뿐이고, 그마저 «우리가 그린 판 안»으로만 좁힌다 —
   `.fhome-list ~` 가 그 조건이다(우리가 안 그리면 .fhome-list 가 없으니 이 규칙도 안 산다).
   ⛔ 색·테두리·글자는 건드리지 마라. 그건 저쪽 레인의 시안이다(test-topbar 가 센다). */
[data-pane="first"] .fhome-list ~ .gr-cfg { margin-top: 14px; }