/* 처음 셋팅 세 화면 — 게이지와 「다음 / ← 이전」
 * 생김새는 자동적용 화면(`setup/자동적용-공통.css`)을 따라 맞췄다. 색은 시안의 :root 를 그대로 쓴다.
 * ⛔ setup/ 쪽 파일은 남의 레인이라 한 줄도 안 건드렸다 — 여기에 «따로» 적었다.
 */

/* ⭐ 「액션 타이틀 색」의 «정본 한 곳». 쓰는 데가 늘면 여기 값을 가져다 쓰고, 값을 베끼지 마라.
      쓰는 곳 — ① 지금 하는 단계 제목  ② `.ask-q`  ③ `.glo-h2`(빛이 훑고 감)
      ⚠️ 시안 <style> 이 이 파일보다 «뒤»에 오지만, 시안 :root 엔 이 이름이 없어 안 부딪힌다. */
:root { --action-ramp: linear-gradient(100deg, #cdf3ef 0%, #e3e6fb 52%, #e2d7fb 100%); }
.fs-prog { margin: 2px 0 18px; }
.fs-lab {
  display: flex; align-items: baseline; gap: 5px;
  font-size: 12px; font-weight: 700; color: var(--lime);
  margin-bottom: 8px; letter-spacing: .01em;
}
.fs-lab b { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fs-lab i { font-style: normal; color: var(--dim); font-weight: 600; }
.fs-now { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--mut); }
.fs-now::before { content: '·'; margin-right: 6px; color: var(--line2); }

.fs-bar { display: flex; gap: 4px; }
.fs-seg {
  flex: 1; height: 8px; border-radius: 4px; background: #171b21;
  box-shadow: inset 0 0 0 1px var(--line2);
  transition: background .35s ease;
}
.fs-seg.done { background: var(--lime); box-shadow: none; }
.fs-seg.cur {
  background: linear-gradient(90deg, #9fd132, var(--lime));
  box-shadow: 0 0 0 3px rgba(198, 242, 78, .05);
}

.fs-nav {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin: 22px 0 4px;
}
.fs-next {
  min-width: 240px; padding: 15px 26px;
  font: inherit; font-size: 15px; font-weight: 700; color: var(--lime-ink);
  background: var(--lime); border: 0; border-radius: 12px; cursor: pointer;
}
.fs-next:hover { filter: brightness(1.06); }
.fs-back {
  padding: 9px 18px; font: inherit; font-size: 13px; color: var(--mut);
  background: transparent; border: 1px solid var(--line2); border-radius: 10px; cursor: pointer;
}
.fs-back:hover { color: var(--tx); border-color: var(--line2); }

/* 못 넘어가는 까닭을 버튼 «위»에 한 줄로 — 눌렀는데 아무 일도 안 나는 자리를 없앤다 */
.fs-block {
  margin: 0; font-size: 13px; color: #f6c344;
  background: #241f14; border: 1px solid #4a3d17; border-radius: 10px; padding: 9px 14px;
}

/* 한 화면에 한 판만 두므로 «잠긴 판» 표시는 필요 없다 (시안의 자물쇠 자국을 지운다) */
.sec.gated { opacity: 1 !important; filter: none !important; pointer-events: auto !important; }
.sec.gated::after { content: none !important; }

@media (max-width: 600px) {
  .fs-next { width: 100%; min-width: 0; }
}

/* 시안 안에 있던 「다음 단계」 줄은 감춘다 — 우리 이동줄이 그 일을 대신한다.
   ⚠️ 지우지 «않는다». 막는 검사가 그 버튼 안에 있어서, 우리가 대신 눌러 쓴다. */
#tabFlow .nextrow { display: none !important; }

/* 「지금 판이 아님」 — hidden 을 안 쓰는 까닭은 first-steps.js 주석에 있다 */
.fs-off { display: none !important; }

/* ── 안내원 팝업 ──────────────────────────────────────────
   화면이 열리면 읽을 게 하나여야 한다 (J.J 08-12). 뒤 화면은 «가리지 않고» 어둡게만 둔다 —
   손님이 「내가 어디에 있는지」는 계속 보여야 하니까. */
.fs-hello {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(6, 8, 11, .72);
  animation: fs-hello-in .18s ease-out both;
}
.fs-hello.gone { animation: fs-hello-out .18s ease-in both; }
@keyframes fs-hello-in  { from { opacity: 0 } to { opacity: 1 } }
@keyframes fs-hello-out { from { opacity: 1 } to { opacity: 0 } }

.fs-hello-card {
  width: 100%; max-width: 460px;
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  background: var(--card2); border: 1px solid var(--lime-line); border-radius: 9px;  /* 눈금 7·9·999 (first-shell.css ⑤) — 18 은 이 카드만 어긋나 있었다 */
  padding: 26px 24px 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  animation: fs-hello-pop .22s cubic-bezier(.2, .9, .3, 1.2) both;
}
@keyframes fs-hello-pop { from { transform: translateY(10px) scale(.97) } to { transform: none } }

.fs-hello-face { line-height: 0; }
/* 🔴 시안이 글자에 `#cdd8b6`(연한 올리브)를 박아 뒀다 — 어두운 면 위에서만 사는 색이다.
   라이트 카드(#F1F2F4) 위에서 대비 **1.33** 이라 «글이 통째로 안 읽혔다»(2026-08-22 실측).
   ㉜ 와 같은 병이고 이걸로 세 번째다(.outcome.go · .outcome.pass 에 이어). 처방도 같다 —
   글자는 --tx2, 강조만 --now. 면·테두리는 안 건드린다. */
.fs-hello-say {
  font-size: 14.5px; line-height: 1.7; color: var(--tx2); word-break: keep-all;
}
.fs-hello-say b { color: var(--now); }
/* 시안 칸을 통째로 들어왔으므로 그 안의 아이콘·여백 흔적을 여기 모양에 맞춘다 */
.fs-hello-say .bulb { display: none; }
.fs-hello-say .tiptext, .fs-hello-say .mut2 { display: inline; }

/* 「알겠어요」는 «이 화면에서 지금 할 것»이라 이동줄의 「다음」과 «같은 물건»이어야 한다
   (J.J 2026-08-22: 「우리 스타일에 맞게」).
   ⛔ 값을 여기에 베끼지 «않는다» — 생김새(아웃라인 알약 · 면 없음 · --now 테두리 · 은은한 광 ·
      높이 40 · 글씨 14/700 · 모서리 9999)는 first-shell.css 의 «으뜸 단추 ③» 규칙이 준다.
      그 규칙의 선택자 목록에 `.fs-hello-ok` 를 넣어 뒀다 — 나중에 J.J 가 단추를 다시 손보면
      이 팝업도 «같이» 따라간다. 여기 남는 것은 `.fs-next` 와 같은 «되돌릴 값»뿐이다.
   🔴 열 때 focus() 를 주는 단추라 «포커스 표시»가 늘 켜진 채로 뜬다 — 그 처방도
      first-shell.css 의 으뜸 단추 블록에 같이 뒀다(테두리만 진해진다 · 링은 안 그린다). */
.fs-hello-ok {
  margin-top: 4px; min-width: 180px; padding: 13px 24px;
  font: inherit; font-size: 15px; font-weight: 700; color: var(--lime-ink);
  background: var(--lime); border: 0; border-radius: 12px; cursor: pointer;
}
.fs-hello-ok:hover { filter: brightness(1.06); }

@media (prefers-reduced-motion: reduce) {
  .fs-hello, .fs-hello-card, .fs-hello.gone { animation: none; }
}

/* ── 안내원이 «말하는» 움직임 ────────────────────────────
   J.J 08-12: 「좀더 리드미컬하게 … 아래위로 붕붕움직이면서 설명하는느낌이 좋은데」
   붕붕 뜨기(몸) + 끄덕임(고개) + 안테나 흔들림 + 눈 깜빡임 — 넷의 주기를 «일부러 다르게» 둔다.
   같은 주기로 맞추면 기계처럼 딱딱 떨어져서 오히려 죽어 보인다.
   눈 깜빡임(.eye)은 자동적용 화면에 있던 것과 «같은 값»이다. */
.fs-hello-face { display: inline-block; animation: fs-float 2.6s ease-in-out infinite; }
.fs-hello-face svg { display: block; animation: fs-nod 1.9s ease-in-out infinite; transform-origin: 50% 80%; }
.fs-hello-face .fs-ant { animation: fs-ant 1.5s ease-in-out infinite; transform-origin: 17px 8px; transform-box: view-box; }
.fs-hello-face .eye { animation: blink 6s infinite; transform-origin: center; transform-box: fill-box; }
.fs-hello-face .fs-mouth { animation: fs-talk 1.9s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }

@keyframes fs-float { 0%, 100% { transform: translateY(-3px) } 50% { transform: translateY(3px) } }
@keyframes fs-nod   { 0%, 100% { transform: rotate(-3deg) }   50% { transform: rotate(3deg) } }
@keyframes fs-ant   { 0%, 100% { transform: rotate(-9deg) }   50% { transform: rotate(9deg) } }
@keyframes fs-talk  { 0%, 100% { transform: scaleY(1) }       50% { transform: scaleY(1.5) } }
@keyframes blink    { 0%, 92%, 100% { transform: scaleY(1) }  95% { transform: scaleY(.12) } }

@media (prefers-reduced-motion: reduce) {
  .fs-hello-face, .fs-hello-face svg, .fs-hello-face .fs-ant,
  .fs-hello-face .eye, .fs-hello-face .fs-mouth { animation: none; }
}

/* ── 가이드는 «안내원이 말한다» ─────────────────────────
   J.J 08-12: 「가이드들 누르면 위로 올라가서 가독성이 안좋은데」
   시안의 `.gtip` 은 제목 «위로» 뜨는 330px 고정폭 툴팁이다 — 게이지·제목을 가리고
   폰에서는 화면 밖으로 잘린다(모바일 넘침의 그 원인). 떠오르는 건 끄고, 눌러서 안내원이 말한다. */
.help .gtip { display: none !important; }
.help { cursor: pointer; }

/* (가이드 팝업은 «한 벌»(guide-panel.css)로 옮겼다 — 총지휘 지침 2026-08-12.
    여기 있던 `.fs-guide` 규칙은 그래서 걷어냈다. 첫 인사 팝업만 이 파일이 맡는다.) */

/* ── 가이드 안의 «움직이는 그림» ────────────────────────
   ⚠️ 이 그림은 이제 «한 벌 판»(.gp) 안에서 그려진다 — 선택자를 판에 매지 않는다.
   시안 B 의 `.demo` 문법을 그대로 따랐다 — 작은 무대 · ☝ 커서 · 9초 반복 · ①② 설명 줄.
   손이 가는 가이드 둘에만 붙는다(탭 만들기 · 같은 내용/다른 내용). */
.fs-demo {
  /* 높이는 «네 줄이 다 들어가는» 값이다 — 140 이면 새로 생긴 줄이 잘려서 안 보였다 */
  position: relative; display: block; width: 300px; height: 178px; margin: 2px 0 10px;
  background: #12151b; border: 1px solid var(--line2); border-radius: 10px; padding: 10px;
  overflow: hidden;
}
.fs-demo-2 { height: 84px; }

.fs-d-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--card2); border: 1px solid var(--line); border-radius: 7px;
  padding: 6px 8px; margin-bottom: 6px;
}
.fs-d-row b { font-size: 10.5px; font-weight: 700; color: #e8eaed; }
.fs-d-chip {
  margin-left: auto; font-size: 9.5px; font-style: normal; color: var(--mut);
  border: 1px solid var(--line2); border-radius: 5px; padding: 2px 8px; white-space: nowrap;
}
.fs-d-chip.fs-d-on  { animation: fs-d-on 9s ease-in-out infinite; }
.fs-d-chip.fs-d-set { color: var(--lime-ink); background: var(--lime); border-color: var(--lime); }

.fs-d-add { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.fs-d-field {
  flex: 1; height: 24px; display: flex; align-items: center; padding: 0 7px;
  background: var(--card2); border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
}
.fs-d-type {
  /* ⚠️ inline 이면 width 가 «안 먹는다» — 글자가 한 자도 안 보였다. inline-block 이어야 한다 */
  display: inline-block; vertical-align: middle;
  font-size: 10px; color: #e8eaed; white-space: nowrap; overflow: hidden;
  width: 0; animation: fs-d-type 9s steps(9, end) infinite;
}
.fs-d-btn {
  font-size: 9.5px; font-style: normal; color: rgba(255, 255, 255, .55);
  border: 1px solid var(--line2); border-radius: 6px; padding: 4px 8px; white-space: nowrap;
}
.fs-d-born { opacity: 0; animation: fs-d-born 9s ease-in-out infinite; }
.fs-d-cur  { position: absolute; font-size: 14px; animation: fs-d-cur 9s ease-in-out infinite; }

@keyframes fs-d-on {
  0%, 14% { color: var(--mut); background: transparent; border-color: var(--line2) }
  18%, 100% { color: var(--lime-ink); background: var(--lime); border-color: var(--lime) }
}
@keyframes fs-d-type { 0%, 40% { width: 0 } 58%, 100% { width: 52px } }
@keyframes fs-d-born { 0%, 68% { opacity: 0 } 74%, 100% { opacity: 1 } }
/* ⚠️ 좌표는 «짐작이 아니라 재서» 넣은 값이다. 처음엔 눈대중으로 넣었더니 손끝이 목표보다
   6~14px 위를 가리켰다(J.J: 「직접추가할때 마우스 위치 커서가 조금 이상행」).
   ☝ 는 위를 가리키므로 `top` 은 «목표의 세로 한가운데»에 둔다 — 시안 B 의 `dcur` 과 같은 규칙이다.
   잰 값(무대 기준): 사용칩 가운데 (255,69) · 적는 칸 (112,107) · ＋직접추가 (249,107) · 첫 줄 (·,24) */
@keyframes fs-d-cur {
  0%, 6%    { left: 30px;  top: 24px }
  14%, 20%  { left: 249px; top: 69px }   /* Care 의 「사용」 */
  36%, 56%  { left: 62px;  top: 107px }  /* 적는 칸 — 쳐지는 글자 끝 */
  66%, 74%  { left: 243px; top: 107px }  /* ＋ 직접 추가 */
  90%, 100% { left: 30px;  top: 24px }
}

/* ② 같은 내용 / 다른 내용 — 둘 중 하나를 눌러 고르는 모습 */
.fs-d-seg {
  font-size: 9px; font-style: normal; color: var(--mut);
  border: 1px solid var(--line2); border-radius: 5px; padding: 2px 6px; white-space: nowrap;
}
.fs-d-seg:nth-of-type(2) { margin-left: auto; }
.fs-d-seg1 { animation: fs-d-pick 9s ease-in-out infinite; }
.fs-d-seg2 { animation: fs-d-pick2 9s ease-in-out infinite; }
.fs-d-cur2 { animation: fs-d-cur2 9s ease-in-out infinite; }
@keyframes fs-d-pick  { 0%, 16% { color: var(--mut); background: transparent; border-color: var(--line2) }
                        22%, 100% { color: var(--lime-ink); background: var(--lime); border-color: var(--lime) } }
@keyframes fs-d-pick2 { 0%, 58% { color: var(--mut); background: transparent; border-color: var(--line2) }
                        64%, 100% { color: var(--lime-ink); background: var(--lime); border-color: var(--lime) } }
/* 여기도 잰 값이다 — seg1 가운데 (150,28) · seg2 가운데 (237,68) */
@keyframes fs-d-cur2 {
  0%, 6%    { left: 30px;  top: 28px }
  18%, 30%  { left: 144px; top: 28px }
  60%, 74%  { left: 231px; top: 68px }
  92%, 100% { left: 30px;  top: 28px }
}

.fs-d-legend { display: block; font-size: 11.5px; color: var(--mut); line-height: 1.6; margin-bottom: 10px; }
.fs-d-legend b { color: var(--tx); }

/* 「움직임 줄이기」를 켠 사람에게는 «안 움직이는 글»로 준다 (위저드 08-13).
   ⚠️ 애니만 멈추면 «반쪽 그림»이 남는다 — 실제로 그랬다: 칩은 안 켜진 회색인데
      아래엔 이미 「사용 중」 줄이 생겨 있어 앞뒤가 안 맞는 장면이 된다.
   → 무대를 통째로 감추고 ①② 설명 줄만 남긴다. 그 줄이 «글로 쓴 같은 내용»이다. */
@media (prefers-reduced-motion: reduce) {
  .fs-demo { display: none; }
  .fs-d-legend { margin-top: 2px; }
}

/* ── 「왜 사이즈표가 필요한가요?」 — 이유 둘 + 살아 움직이는 예시 (J.J 2026-08-13) ──
   ⛔ 예시는 «캡처가 아니다». 우리가 그린 것이고 CSS 만으로 돈다(JS 0줄).
      손님이 링크를 눌러 팝업이 뜨고, CM ↔ INCHES 를 눌러 숫자가 바뀌는 그 장면이다. */
.whylead { font-size: 14px; color: var(--mut); margin: 2px 0 14px; }
.whylead b { color: var(--tx); }

.why2 { margin-bottom: 18px; }
.why2-h { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.why2-n {
  flex: none; font-size: 11.5px; font-weight: 700; color: var(--lime);
  background: var(--lime-tint); border: 1px solid var(--lime-line);
  border-radius: 20px; padding: 3px 11px; white-space: nowrap;
}
.why2-h b { font-size: 15px; color: var(--tx); }
.why2 p { font-size: 13.5px; color: var(--mut); line-height: 1.75; margin: 0 0 7px; word-break: keep-all; }
.why2 p b { color: var(--tx); }

/* ── 예시 무대 ─────────────────────────────────────── */
.szdemo {
  position: relative; width: 100%; max-width: 460px; height: 250px;
  margin: 12px 0 8px; padding: 14px;
  background: #f4f5f7; border-radius: 12px; overflow: hidden;
}
.szd-link {
  display: inline-block; font-size: 12px; font-weight: 700; color: #1b1f26;
  border-bottom: 1px solid #9aa0a6; padding-bottom: 2px;
}
.szd-pop {
  position: absolute; left: 14px; right: 14px; top: 46px;
  background: #fff; border-radius: 10px; padding: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
  opacity: 0; animation: szd-pop 6s ease-in-out infinite;
}
.szd-toggle {
  display: inline-flex; background: #eceef1; border-radius: 999px; padding: 3px; margin-bottom: 8px;
}
.szd-t {
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: #6b7178;
  padding: 5px 14px; border-radius: 999px;
}
.szd-t-cm { animation: szd-cm 6s ease-in-out infinite; }
.szd-t-in { animation: szd-in 6s ease-in-out infinite; }

.szd-tb { border: 1px solid #e3e6ea; border-radius: 7px; overflow: hidden; }
.szd-r { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; }
.szd-r > span {
  font-size: 10.5px; color: #1b1f26; padding: 6px 8px; border-top: 1px solid #eceef1;
  position: relative; min-height: 26px;
}
.szd-r:first-child > span { border-top: 0; }
.szd-head > span { background: #14181d; color: #fff; font-weight: 800; letter-spacing: .04em; font-size: 9.5px; }
.szd-r > span > i { font-style: normal; position: absolute; }
.u-cm { animation: szd-showcm 6s ease-in-out infinite; }
.u-in { opacity: 0; animation: szd-showin 6s ease-in-out infinite; }

.szd-cur { position: absolute; font-size: 16px; animation: szd-cur 6s ease-in-out infinite; }

/* J.J 08-15: 「사이즈 가이드 뜨는 게 조금 «텀이 길어»」 — 재보니 그랬다(9초 한 바퀴):
   팝업이 다 뜨는 데 1.62초 · 첫 볼거리(INCHES)까지 3.96초 · 다시 도는 데 9초.
   → 한 바퀴를 «6초»로 줄이고, «앞의 기다리는 구간»을 특히 앞당겼다:
       팝업 다 뜸  1.62 → 0.6초      (%로도 18% → 10%)
       INCHES 로   3.96 → 2.16초     (44% → 36%)
       CM 복귀     7.02 → 4.5초      (78% → 75%)
   ⛔ 「몇 초 보여줄지」는 그대로 뒀다 — INCHES 를 보여주는 시간이 2.3초라 읽을 만하다.
      더 줄이면 «바뀌었다»만 보이고 «무엇으로 바뀌었나»를 못 읽는다. */
@keyframes szd-pop    { 0%, 4% { opacity: 0; transform: translateY(6px) } 10%, 100% { opacity: 1; transform: none } }
@keyframes szd-cur    {
  0%, 3%    { left: 24px;  top: 26px }     /* 「사이즈 가이드」 링크 */
  24%, 34%  { left: 96px;  top: 74px }     /* INCHES */
  66%, 75%  { left: 40px;  top: 74px }     /* CM */
  90%, 100% { left: 24px;  top: 26px }
}
@keyframes szd-cm     { 0%, 34% { background: #fff; color: #14181d } 36%, 71% { background: transparent; color: #6b7178 } 75%, 100% { background: #fff; color: #14181d } }
@keyframes szd-in     { 0%, 34% { background: transparent; color: #6b7178 } 36%, 71% { background: #fff; color: #14181d } 75%, 100% { background: transparent; color: #6b7178 } }
@keyframes szd-showcm { 0%, 35% { opacity: 1 } 36%, 72% { opacity: 0 } 75%, 100% { opacity: 1 } }
@keyframes szd-showin { 0%, 35% { opacity: 0 } 36%, 72% { opacity: 1 } 75%, 100% { opacity: 0 } }

.szd-cap { font-size: 12.5px; color: var(--mut); margin: 0; }
.szd-cap b { color: var(--tx); }

/* 「움직임 줄이기」면 안 움직이는 그림으로 — 무대는 그대로 두되 «CM 이 켜진 모습»에서 멈춘다 */
@media (prefers-reduced-motion: reduce) {
  .szd-pop { opacity: 1; transform: none; animation: none; }
  .szd-cur, .szd-t-cm, .szd-t-in, .u-cm, .u-in { animation: none; }
  .szd-cur { display: none; }
  .szd-t-cm { background: #fff; color: #14181d; }
  .u-in { display: none; }
}

/* ── 가이드 단계 안의 캡처 (C 만 있다 · J.J 2026-08-13) ────────────────────
   글로사이즈 도움말(/help/ko)에서 옮겨온 그림 9장.
   ⚠️ 원본이 940~1400px 인데 판은 그보다 좁다 — `max-width:100%` 로 «줄이기만» 한다.
      키우면 흐려진다(원본보다 크게 안 한다 · 📕 규칙 12 와 같은 결).
   ⚠️ 밝은 화면 캡처라 어두운 판 위에서 «둥둥» 뜬다 → 테두리로 가둔다. */
img.gshot {
  display: block; width: 100%; max-width: 560px; height: auto;
  margin: 8px 0 4px; border-radius: 8px; border: 1px solid var(--line);
  cursor: zoom-in;   /* 눌러서 크게 (J.J 08-13) — 판 안에선 560px 로 줄어 글씨가 안 읽힌다 */
}
img.gshot:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.ways img.gshot { margin: 6px 0 2px; }

/* 캡처를 «크게» 띄우는 겹 — first-steps.js 가 만든다 (C 에만 붙는다: .gshot 이 C 에만 있다) */
.shot-zoom {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 28px 20px;
  background: rgba(8, 10, 13, .88);
  cursor: zoom-out;
}
.shot-zoom img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  border-radius: 10px; border: 1px solid var(--line2);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8);
}
.shot-x {
  position: absolute; top: 14px; right: 16px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--card2); border: 1px solid var(--line2); color: var(--tx);
  font-size: 15px; line-height: 1; cursor: pointer;
}
.shot-x:hover { border-color: var(--lime); color: var(--lime); }
.shot-tip {
  position: absolute; left: 0; right: 0; bottom: 14px;
  text-align: center; font-size: 12px; color: var(--dim);
}

/* 앱스토어로 바로 가는 줄 (J.J 08-13: 「링크까지 친절히 줘야징」)
   ⚠️ 새 창으로 연다 — 셋팅하다 말고 나가면 「어디까지 했더라」가 된다(A9 문서 §6 와 같은 결). */
.golink {
  display: flex; align-items: center; gap: 11px;
  margin: 10px 0 12px; padding: 11px 14px; max-width: 420px;
  background: var(--lime-tint); border: 1px solid var(--lime-line);
  border-radius: 10px; text-decoration: none;
}
.golink:hover { border-color: var(--lime); }
.golink:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.golink-i { flex: none; display: flex; }
.golink-i img { border-radius: 6px; }
.golink-w { flex: 1; min-width: 0; }
.golink-t { display: block; font-size: 13.5px; font-weight: 700; color: var(--lime); }
.golink-t b { color: var(--lime); }
.golink-u {
  display: block; font-size: 11.5px; color: var(--dim);
  margin-top: 2px; overflow-wrap: anywhere;
}
.golink-x { flex: none; font-size: 14px; color: var(--lime); }
/* 걸음 «안»에 들어간 링크는 위아래 여백만 줄인다 */
.ways .golink { margin: 8px 0 6px; }

/* ── 「하나씩 따라가는」 걸음 (C 에만 있다 · A·B 는 `.ways` 를 안 쓴다 — 전수 0건) ──────
   J.J 08-13 이 둘을 짚었고, 재보니 그대로였다:
     「명색이 가이드인데 글자가 작은 거 같아서」  → 걸음 글 13.5px, 단계 제목(14.5px)과 «1px 차이»
     「1. 이런 버튼도 너무 티가 안 나서」          → 번호가 본문과 «크기·굵기·색이 똑같았다»(13.5/400/흰색)
                                                   목록 기본 표시라 티가 날 수가 없었다
   → 글자를 키우고, 번호는 «라임 동그라미 배지»로 세운다.
   ⛔ 색은 앱 것(--lime·--lime-ink)만 쓴다 — 새로 고르지 않았다(§4-B ㉹).
   🔴 «명시도를 한 칸 더 준다» — 시안 <style> 이 이 파일보다 «뒤»에 온다.
      `.ways` 로만 쓰면 시안의 `.ways{font-size:13.5px}` 가 이겨서 «안 먹는다».
      (`html.gs-walking .head h1` 에서 이미 한 번 데인 자리다) */
.gbody .ways {
  list-style: none; counter-reset: way;
  margin: 0; padding-left: 0;
  font-size: 15px; line-height: 1.8;
}
.gbody .ways > li {
  counter-increment: way;
  position: relative; padding-left: 33px; margin: 0 0 9px;
}
.gbody .ways > li::before {
  content: counter(way);
  position: absolute; left: 0; top: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--lime); color: var(--lime-ink);
  font-size: 12.5px; font-weight: 800; line-height: 22px; text-align: center;
}
/* 걸음마다 캡처가 붙어 길어지는 쪽은 사이를 더 벌린다 */
.gbody .ways.big > li { margin-bottom: 18px; }
.gbody .ways.big > li:last-child { margin-bottom: 4px; }

/* J.J 08-13: 「3번의 경우 «액션 이미지 ~ 다음 액션» 간의 여백이 좀 적어 붙어 보이니까 약간만 여백을」
   재보니 그림 아래에서 다음 걸음까지 «9px» 이었다. 큰 그림 밑에 9px 이면 다음 걸음이 그림에 붙는다.
   ⛔ «그림이 든 걸음»만 벌린다 — 글만 있는 걸음까지 벌리면 목록이 헐거워진다.
   ⚠️ `:has()` 를 쓴다. 못 쓰는 브라우저에선 그냥 «전과 같은 9px» 이라 깨지지 않는다(되돌릴 길). */
.gbody .ways > li:has(> img.gshot) { margin-bottom: 20px; }
/* 걸음 안의 덧붙이는 말 — 본문보다 한 단 작고 흐리게 */
.ghint.sm {
  display: block; margin-top: 5px;
  font-size: 12px; line-height: 1.65; color: var(--dim);
}
.ghint.sm b { color: var(--mut); }

/* 「처음 14일은 무료」 — J.J 08-13: 「액션 바로 아래에, 지금보다 눈에 띄게」.
   전엔 그림 «아래» 흐린 글씨였다. 손님이 값을 보고 멈칫하는 자리라 «누르라는 말 바로 밑»에 세운다.
   ⛔ 새 색을 안 골랐다 — 화면이 이미 쓰는 라임 계열 그대로다(§4-B ㉹). */
.freetag {
  display: inline-block; margin: 7px 0 2px; padding: 6px 12px;
  background: var(--lime-tint); border: 1px solid var(--lime-line); border-radius: 8px;
  font-size: 13px; font-weight: 700; color: var(--lime);
  word-break: keep-all;
}
.freetag b { color: var(--lime); font-weight: 800; }

/* 「앱이 안 보인다면?」 — 걸음 «안»에 접어 두는 물음표 라벨 (J.J 08-13)
   따로 걸음으로 세우면 «단계가 많아 보인다». 필요한 사람만 펴 보게 한다.
   ⛔ 걸음(li)이 아니라 `<details>` 다 — 번호를 안 먹는다.
   ⚠️ 판 1 의 `.globox` 와 «다른 물건»이다. 저건 자랑거리 판이고 이건 «막혔을 때» 여는 것이라
      라임을 안 쓰고 조용한 색(--line·--mut)으로 둔다 — 걸음보다 눈에 덜 띄어야 맞다. */
/* J.J 08-13: 「보라색 청회색 «점선» 테두리를 해서 눈에 더 잘 띄게 … 누르면 «하나로 합쳐져» 보이거나
   팝업창 또는 테두리가 그려지게」
   ⛔ 색을 새로 짓지 않았다 — 액션 타이틀 그라데이션이 이미 «청회(#e3e6fb) → 보라(#e2d7fb)» 다.
      그 두 색을 점선에 그대로 쓴다(테두리는 어두운 판 위라 조금 눌러서). */
.qbox {
  --q-보라: #b6a8e4;
  --q-청회: #9fb0cb;
  margin: 8px 0 10px;
  border: 1.5px dashed transparent; border-radius: 12px;
  transition: border-color .15s ease, background-color .15s ease;
}
.q-sum {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(182, 168, 228, .09);
  border: 1.5px dashed var(--q-보라);
  font-size: 12.5px; font-weight: 700; color: var(--q-보라);
  cursor: pointer; list-style: none; user-select: none;
}
.q-sum::-webkit-details-marker { display: none; }
.q-sum::before { content: '❔'; font-size: 12px; }
.q-sum::after { content: '⌄'; font-size: 13px; line-height: 1; margin-top: -3px; }
.q-sum:hover { color: #cfc3f4; border-color: #cfc3f4; }
.q-sum:focus-visible { outline: 2px solid var(--q-보라); outline-offset: 2px; }

/* 열면 «하나로 합쳐진다» — 바깥이 점선 상자가 되고, 라벨은 그 상자의 «제목»이 된다.
   (알약 테두리를 지워서 «두 덩어리»로 안 보이게 하는 것이 핵심) */
.qbox[open] {
  border-color: var(--q-청회);
  background: rgba(159, 176, 203, .06);
  padding: 11px 13px 13px;
}
.qbox[open] .q-sum {
  border-color: transparent; background: transparent;
  padding: 0 0 2px; color: var(--q-보라);
}
.qbox[open] .q-sum::after { content: '⌃'; margin-top: 2px; }
.q-body {
  margin-top: 9px; padding-top: 10px;
  border-top: 1px dashed var(--q-청회);
}
.q-body p {
  margin: 0 0 6px; font-size: 13px; line-height: 1.75;
  color: var(--mut); word-break: keep-all;
}
.q-body p b { color: var(--tx); }

/* ── 「사이즈차트는 어떤 걸 사용하나요?」 칸 (C 만 있다 · J.J 2026-08-13) ──────
   J.J: 「제목 색을 바꿔주거나 혹은 약간 다른 섹션처럼 그 위에 라인이 생기게 하거나 니가 판단해서」
   → «윗선»으로 갔다. 앞의 「왜 필요한가(이유 둘)」와 묻는 것이 달라서, 색보다 «자리»를 갈라야
     한 덩어리로 안 읽힌다. 색은 앱 것(--line·--tx·--lime)만 쓴다 — 새로 고르지 않았다(§4-B ㉹).
   ⭐ 그 뒤 J.J 가 색까지 지목했다 — 「그 다음 단계 보면 «액션 타이틀»에 쓰는 색, 그걸로」.
      = 지금 하는 단계 제목의 청록→보라(라이브 실측 `.sec.gs-now .sech h2`).
      ⛔ 값을 여기 «베끼지 않았다» — 아래 @supports 한 곳에 `.ask-q` 를 «같이 물렸다».
         두 벌로 적어두면 다음에 한쪽만 고쳐진다(내가 한 번 데인 자리다). */
.askbox { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
/* ⚠️ 이 `color` 는 «되돌릴 길»이다 — background-clip:text 를 못 쓰는 곳에서 글자가 사라지지 않게
   🔴 `width:fit-content` 가 «색의 일부»다. 지우지 마라.
      그라데이션은 «칸»에 깔리고 글자가 그걸 오려낸다. 칸이 글자보다 넓으면 뒤쪽 색이 허공에 남는다.
      실측: 이 칸은 922px 인데 글자는 211px 이라 «앞 23%»(청록)만 나오고 보라가 안 왔다.
      액션 타이틀은 flex 자식이라 칸이 175px = 글자 175px 이어서 저절로 맞았던 것이다. */
.ask-q {
  font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--tx);
  margin-bottom: 10px; width: fit-content; max-width: 100%;
}
.ask-a { font-size: 15px; color: var(--tx); margin: 0; }

/* J.J: 「'가이드' 라는 말 대신 … 이건 아래 탭으로 열리게 해줘. 다른 첫셋팅이랑은 좀 다른 성격이거든」
   → 옆에 뜨는 가이드 판을 «안 쓴다». 여기만 제자리에서 아래로 펼친다.
   ⛔ `guide-panel.{js,css}` 는 한 줄도 안 건드렸다 — 자동적용 8장이 같이 쓰는 물건이다.
      판은 `.gtip` 이 든 `.help` 에만 붙으므로, 그 둘을 안 쓰면 판은 여기 «안 온다».
   ⚠️ `<details>` 는 이 세 화면에서 여기 하나뿐이다(전수 0건이었다) — 다른 것과 안 부딪힌다. */
.globox { margin-top: 14px; }
.glo-sum {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--lime);
  background: var(--lime-tint); border: 1px solid var(--lime-line);
  border-radius: 9px; padding: 9px 14px; cursor: pointer;
  list-style: none; user-select: none;
}
.glo-sum::-webkit-details-marker { display: none; }   /* 사파리 기본 ▶ 를 우리 것으로 바꾼다 */
.glo-sum::before { content: '📘'; font-size: 13px; }
.glo-sum::after {
  content: '⌄'; font-size: 14px; line-height: 1; margin-top: -4px;
  transition: transform .15s ease;   /* ⛔ 자리를 옮기는 애니는 안 준다 — 화살표 하나만 돈다 */
}
.globox[open] .glo-sum::after { transform: rotate(180deg); margin-top: 2px; }
.glo-sum:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

.glo-body {
  margin-top: 10px; padding: 16px 18px;
  background: var(--card2); border: 1px solid var(--line); border-radius: 12px;
}
.glo-h { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 800; color: var(--tx); margin-bottom: 8px; }
/* 글로사이즈 앱 아이콘 — J.J 가 파일을 주면서 「이 두 군데 앞에 붙여줘」(08-13).
   원본이 «어두운 바탕에 라임»인 통짜 그림이라 배경을 못 지운다(글로가 번져 있다).
   → 앱스토어가 하듯 «둥근 타일»로 놓는다. 판 바탕(--card2)보다 어두워서 타일로 읽힌다. */
.glo-ico { flex: none; width: 18px; height: 18px; border-radius: 5px; }
.glo-lead { font-size: 13.5px; color: var(--mut); line-height: 1.75; margin: 0 0 16px; word-break: keep-all; }
.glo-lead b { color: var(--tx); }
/* 「글로사이즈는 이런 게 특별해요.」 — 장점 목록의 머리 (J.J 08-13 ②)
   ⚠️ 바로 위 `.glo-h`(「왜 글로사이즈인가요」)와 «크기를 벌려» 둘이 같은 층으로 안 보이게 한다
   ⭐ J.J 08-13: 「이 부분 «빛이 훑고 가듯이», 색상은 우리 액션 타이틀에 쓰이는 청색 보라색으로」
      → 바탕을 «두 겹»으로 깐다. 아래는 액션 색(고정) · 위는 흰 빛줄기(움직인다).
        글자가 그 둘을 오려낸다.
   🔴 `width:fit-content` 는 «색의 일부»다 — 칸이 글자보다 넓으면 앞쪽 색만 온다(속은자리 ⑧).
   ⛔ 자리를 움직이는 애니는 «안 준다». 움직이는 건 `background-position` 뿐이라 글자는 안 흔들린다. */
/* ⚠️ 아이콘을 `.glo-h2` «안»에 넣지 않았다 — 이 칸은 `width:fit-content` 로 «글자만큼»이어야
      빛과 색이 제대로 앉는다(속은자리 ⑧). 아이콘이 안에 들어오면 칸이 그만큼 넓어져 어긋난다.
      그래서 줄(`.glo-h2row`)을 하나 두고 아이콘은 «옆»에 세운다. 아래 여백도 줄이 갖는다. */
.glo-h2row { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.glo-h2 {
  font-size: 13px; font-weight: 800; letter-spacing: .01em;
  width: fit-content; max-width: 100%;
  color: var(--mut);           /* 되돌릴 길 — background-clip:text 를 못 쓰는 곳 */
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .glo-h2 {
    /* 겹이 «셋»이다 — 위에서부터 ① 빛줄기(움직인다) ② 살짝 누르는 겹 ③ 액션 색(제자리)
       🔴 ② 가 없으면 «빛이 안 보인다». 액션 색은 #cdf3ef~#e2d7fb 로 이미 흰색에 가까워서,
          흰 빛줄기가 «흰 바탕 위»를 지나가 아무 일도 안 일어난 것처럼 보였다.
          바탕을 조금 눌러 두면 그 위를 지나는 흰빛이 «좍» 하고 산다.
          ⛔ 색을 바꾼 게 아니다 — 같은 청록→보라를 조금 가라앉힌 것뿐이다.
       ⚠️ 넓고 흐리면 «스며드는» 느낌이 된다. 가운데는 흰색 그대로, 가장자리만 흘린다. */
    background-image:
      linear-gradient(100deg,
        rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 42%,
        #fff 50%,
        rgba(255,255,255,.55) 58%, rgba(255,255,255,0) 70%),
      linear-gradient(rgba(13,15,18,.42), rgba(13,15,18,.42)),
      var(--action-ramp);
    background-size: 200% 100%, 100% 100%, 100% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: glo-sheen 3.4s linear infinite;
  }
}
/* 빛줄기만 지나간다 — 아래 액션 색 겹은 «제자리»(0 0) 라 청록→보라는 늘 그대로다.
   ⭐ 「좍」은 «빠르게 지나간 뒤 쉬는» 것이다 — 0.88초에 훑고, 남은 2.5초는 가만히 있는다.
      내내 움직이면 그건 반짝임이지 «지나가는 빛»이 아니다. 그래서 linear + 뒤를 눌러 세웠다. */
/* ⚠️ 겹이 셋이라 자리도 «셋»을 적어야 한다. 하나라도 빠뜨리면 그 겹이 제자리를 잃는다 */
@keyframes glo-sheen {
  0%        { background-position: 150% 0, 0 0, 0 0; }
  26%, 100% { background-position: -50% 0, 0 0, 0 0; }
}
/* 「움직임 줄이기」면 빛줄기를 멈춘다 — 색은 그대로 남는다 (빛은 화면 «밖»에 세워 둔다) */
@media (prefers-reduced-motion: reduce) {
  .glo-h2 { animation: none; background-position: -50% 0, 0 0, 0 0; }
}
.glo-rows { display: grid; gap: 10px; }
.glo-row {
  font-size: 12.5px; color: var(--mut); line-height: 1.7;
  padding-left: 12px; border-left: 2px solid var(--line2); word-break: keep-all;
}
/* ⚠️ 줄바꿈은 «맨 앞 b»(줄 제목)에만 준다.
      처음에 `.glo-row b` 로 걸었더니 글 «안»의 굵은 말까지 통째로 줄이 바뀌었다 —
      「글로사이즈는 «한글을 완벽하게 지원» 합니다」가 세 도막으로 끊겼다(실측 줄높이 136px).
      안쪽 b 가 «자식»이 아니라 «형제»라 `b b` 로는 못 잡는다. `:first-child` 로 갈라야 한다. */
.glo-row b { font-weight: 700; color: var(--tx); }
.glo-row > b:first-child { display: block; font-size: 13px; margin-bottom: 2px; }
/* 값 줄만 라임 — J.J: 「가격 이 부분이 젤 중요한데」 (08-13 ⑦).
   ⛔ 새 색을 고르지 않았다. 앱이 이미 쓰는 --lime 계열 그대로다(§4-B ㉹) */
.glo-row-price { border-left-color: var(--lime-line); }
.glo-row-price > b:first-child { color: var(--lime); }

/* ── 걷기 시작하면 머리글을 «통째로» 접는다 (J.J 2026-08-23 3차) ──────────────
   전엔 「자리는 두고 색만 내린다」였는데(위저드 규격 08-13), 그 흐린 제목이 «빈 띠»처럼
   남아 판 카드가 왼쪽 레일보다 한 뼘 아래에서 시작했다 — J.J: 「시작 지점이 안 맞아. 맞춰줘」.
   지금은 «여기가 어디인지»를 왼쪽 레일(이 화면 진행)과 맨 위 빵부스러기가 말해 줘서,
   흐린 제목이 그 일을 나눠 들 필요가 없다. 첫 판(안 걷는 상태)에선 그대로 다 보인다. */
html.gs-walking .head { display: none; }

/* 지금 하는 단계 제목 — 19px + «흰색에 가까운» 청록 → 보라.
   ⛔ 되돌릴 길을 «먼저» 둔다: background-clip:text 를 못 쓰는 곳에선 글자가 사라진다.
      기본은 흰색으로 칠하고, 되는 곳에서만 갈아탄다. */
.gs-walking .sec.gs-now .sech h2 { font-size: 19px; letter-spacing: -.015em; color: var(--tx); }
/* ⭐ 이 색의 «정본은 여기 한 곳»이다. 쓰는 곳이 늘면 값을 베끼지 말고 선택자를 «여기에» 더해라.
      · `.sec.gs-now .sech h2`  지금 하는 단계 제목(액션 타이틀)
      · `.ask-q`                「사이즈차트는 어떤 걸 사용하나요?」 — J.J 가 «그 색으로» 지목(08-13)
      ⚠️ `.ask-q` 는 «지금 단계»가 아니어도 늘 이 색이다 — 그래서 `.gs-walking` 을 안 붙였다.
      ⚠️ 글자 크기·자간은 각자 자기 규칙에 있다. 여기서 나누는 건 «색»뿐이다.
      🔴 **여기에 선택자를 더할 땐 그 칸이 «글자만큼»인지 봐라.** 그라데이션은 칸에 깔린다 —
         칸이 넓으면 «앞쪽 색만» 글자에 얹히고 뒤 색은 허공에 남는다(J.J 가 08-13 에 짚었다).
         블록이면 `width:fit-content` 를 같이 줘라. flex 자식은 저절로 맞는다. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gs-walking .sec.gs-now .sech h2,
  .ask-q {
    background: var(--action-ramp);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}
/* 번호 배지만 라임으로 밝게 (자동적용의 `.secn` 자리 — 우리 시안에선 `.step` 이다) */
.gs-walking .sec.gs-now .sech .step {
  background: var(--lime); border-color: var(--lime); color: var(--lime-ink);
}

/* ── 「지난번에 하셨어요」 안내 줄 (J.J 2026-08-25) ────────────────────────────
   J.J 2026-08-25: 「이건 초록색으로 하는 게 맞는 거 같아. 상태창이니까」
   ⇒ 사전의 «상태» 낱말을 그대로 쓴다:  끝냈다 = --done(초록·완료) · 그 밖 = --wait(회색)
   ⛔ 「이미 했다고 하셨어요」를 초록으로 칠하지 않는다 — 우리가 본 적 없는 것을 «완료»로
      말하는 셈이라, 애써 갈라둔 뜻이 색에서 도로 뭉개진다.
   ⛔ 라임(--now)은 안 쓴다 — 라임은 «지금 할 것» 하나뿐이고, 이 줄은 지나간 일이다.
   ⛔ 채움 단추는 없다 — 둘 다 아웃라인 알약(상태는 옅은 면 + 테두리라는 코어 규칙).
   ⛔ 값을 베끼지 않는다 — 토큰 이름만. 사전이 바뀌면 이 줄도 따라온다. */
.fs-again {
  margin: 0 0 14px; padding: 12px 14px;
  border: 1px solid var(--ln); border-radius: 12px;
  background: var(--bg2);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
}
.fs-again-t { margin: 0; flex: 1 1 240px; font-size: 14px; color: var(--fg); }
.fs-again-t b { font-weight: 800; }
.fs-again-b { display: inline-flex; gap: 8px; flex: 0 0 auto; }
.fs-again-go, .fs-again-redo {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 7px 14px; border-radius: 9999px;
  background: transparent; border: 1px solid var(--ln); color: var(--fg);
}
.fs-again-go:hover, .fs-again-redo:hover { border-color: var(--fg); }
.fs-again-go:focus-visible, .fs-again-redo:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
/* 「다시 해도 안 지워져요」 — 줄 전체를 차지해 단추 아래로 내려온다 */
.fs-again-n { margin: 0; flex: 1 1 100%; font-size: 12.5px; color: var(--mut); }
.fs-again-n b { font-weight: 700; color: var(--fg); }
@media (max-width: 560px) {
  .fs-again-b { flex: 1 1 100%; }
  .fs-again-go, .fs-again-redo { flex: 1 1 auto; }
}

/* 상태별 색 — 사전 낱말만 갈아 끼운다(구조는 위 하나뿐이다) */
.fs-again-done { --fg: var(--done); --ln: var(--done-ln); --bg2: var(--done-bg); }
.fs-again-wait { --fg: var(--wait); --ln: var(--wait-ln); --bg2: var(--wait-bg); }