/* 자동적용 셋팅 껍데기 — «화면 밖» 부분만.
 *
 * ⛔ 화면 «안» 은 setup/자동적용-공통.css 와 각 시안의 <style> 이 맡는다. 여기서 덮지 마라.
 *    덮으면 시안 8장이 조금씩 갈라지고, 그 사고는 조용하다.
 * ⛔ portal/public/styles.css 는 소싱2 파일이다. 여기에 그 선택자를 다시 쓰지 마라.
 *    이 파일은 `gs-` 로 시작하는 이름만 쓴다 — 앱의 다른 화면과 섞이지 않게.
 */

/* ⛔ 색을 여기서 «정하지 않는다». 정본은 tokens.css (setup.html 이 먼저 건다).
   아래는 «옛 이름 → 토큰» 별칭뿐이다 — 이 파일이 gs- 이름을 그대로 쓰고 있어서다.
     --gs-bg → --page   --gs-card → --card   --gs-line → --line-c
     --gs-tx → --tx     --gs-mut → --tx2     --gs-dim → --tx3
     --gs-lime → --now  --gs-warn → --guide  --gs-bad → --danger */
:root {
  --gs-bg: var(--page);
  --gs-card: var(--card);
  --gs-line: var(--line-c);
  --gs-tx: var(--tx);
  --gs-mut: var(--tx2);
  --gs-dim: var(--tx3);
  --gs-lime: var(--now);
  --gs-lime-ink: var(--now-ink);
  --gs-warn: var(--guide);
  --gs-bad: var(--danger);
}

html, body { margin: 0; padding: 0; background: var(--gs-bg); }
body {
  color: var(--gs-tx);
  font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Pretendard',
    'Malgun Gothic', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── 맨 위 띠 ─────────────────────────────────────────────── */
.gs-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--page) 93%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gs-line);
}
.gs-brand { font-size: 13px; font-weight: 700; letter-spacing: -.01em; flex: none; }
.gs-brand i { font-style: normal; color: var(--gs-dim); font-weight: 500; margin-left: 7px; }

/* 화면 여덟 — 지금 어디인지 + 눌러서 건너뛰기 */
.gs-jump { display: flex; gap: 5px; flex: 1; flex-wrap: wrap; }
.gs-j {
  width: 25px; height: 25px; border-radius: 7px; flex: none;
  background: transparent; border: 1px solid var(--gs-line);
  color: var(--gs-dim); font-size: 11.5px; font-weight: 700;
  font-family: inherit; cursor: pointer; line-height: 1;
}
.gs-j:hover { border-color: var(--gs-mut); color: var(--gs-tx); }
.gs-j.on { background: var(--gs-lime); border-color: var(--gs-lime); color: var(--gs-lime-ink); }
.gs-j.done { border-color: var(--done-ln); color: var(--done); }
.gs-j.on.done { background: var(--gs-lime); color: var(--gs-lime-ink); }
.gs-j:focus-visible { outline: 2px solid var(--gs-lime); outline-offset: 2px; }


/* ④ 나가는 길. 눈에 띄되 «다음으로 가는 버튼»보다 세면 안 된다 —
   손님이 끝내는 것과 나가는 것을 헷갈린다. 그래서 라임을 안 쓴다. */
.gs-out {
  flex: none; font-size: 12px; color: var(--gs-mut); text-decoration: none;
  border: 1px solid var(--gs-line); border-radius: 7px; padding: 5px 11px; line-height: 1;
}
.gs-out:hover { border-color: var(--gs-mut); color: var(--gs-tx); }
.gs-out:focus-visible { outline: 2px solid var(--gs-lime); outline-offset: 2px; }
/* 8/8 을 저장하면 이 자리가 «다음 걸음»이 된다 — 셋팅은 목록으로 가는 길목이다 (§4-B ⑲-㉦) */
.gs-out.go { border-color: var(--gs-lime); color: var(--gs-lime); font-weight: 700; }

.gs-state { flex: none; font-size: 12px; color: var(--gs-mut); min-width: 0; }
.gs-state b { color: var(--gs-tx); font-weight: 600; }
.gs-state.ok b { color: var(--done); }
.gs-state.bad b { color: var(--gs-bad); }

/* ── 「혼자 보기」 알림 ─────────────────────────────────────
   서버 없이 열었을 때. **감추지 않는다** — 저장이 안 되는데 된 줄 알면 그게 제일 나쁘다 */
.gs-alone {
  margin: 0; padding: 9px 16px;
  background: rgba(230, 193, 92, .09);
  border-bottom: 1px solid rgba(230, 193, 92, .28);
  font-size: 12.5px; color: var(--gs-warn); line-height: 1.6;
}
.gs-alone b { color: var(--guide); }

/* ── 화면 자리 ────────────────────────────────────────────── */
.gs-frame { display: block; width: 100%; border: 0; min-height: 70vh; }

/* ── 맨 아래 — 저장한 값 확인 ───────────────────────────────
   ⚠️ 손님용이 아니다. 붙는 동안 «무엇이 나갔나»를 눈으로 보는 자리다 */
.gs-log {
  margin: 0; padding: 12px 16px 30px;
  border-top: 1px solid var(--gs-line); background: var(--page);
}
.gs-log summary { font-size: 12px; color: var(--gs-dim); cursor: pointer; }
.gs-log pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; color: var(--done); line-height: 1.7;
  margin: 10px 0 0; white-space: pre-wrap; word-break: break-all;
}
.gs-log .gs-note { font-size: 12px; color: var(--gs-mut); line-height: 1.7; margin: 9px 0 0; }
.gs-log .gs-note b { color: var(--gs-tx); }

@media (max-width: 620px) {
  .gs-top { flex-wrap: wrap; gap: 9px; }
  .gs-state { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .gs-frame { scroll-behavior: auto; }
}