/* goal-flow-survey.css — goal_flow v3 배치 A(입구·설문) 신규·변경 스타일
 * SDD: docs/sdd/goal_flow_v3.md §4 · 정본: docs/sdd/goal_flow/handoff/proto/v2.css (E130~E142)
 * design-port: docs/sdd/goal_flow_v3/design-port.md (토큰 = tokens.css 의 goal_flow_v3 블록)
 *
 * goal-flow.css 뒤에 로드한다(같은 특이도의 기존 규칙을 이 파일이 덮는다). 정본 클래스 이름을 그대로 옮겼다
 * (contract PROTO_CLASS_MAP 항등 매핑 — `.v2one` `.v2off` `.v2more` `.v2st` `.v2hero` `.v2etc` `.swap`).
 * 값은 정본 그대로 — 바뀐 곳은 주석으로 이유를 적는다(탭타겟 44px 는 레포 접근성 규칙이 정본보다 우선).
 */

/* ── W2 소속 — 열린 한 칸(✓) · 준비 중 칸 · 알림 링크 (E130~E134) ─────────────────── */
.v2one { cursor: pointer; }
.v2one__ck {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--rtp-orange); color: var(--rtp-white);
  display: grid; place-items: center; font-size: var(--bb-goal-fs-13); font-weight: 800;
}
.v2off { opacity: .42; cursor: default; pointer-events: none; }
.v2off__t {
  flex: 0 0 auto; margin-left: auto; padding: 4px 9px; border-radius: var(--bb-goal-radius-999);
  background: var(--bb-hero-line); font-size: var(--bb-goal-fs-11); font-weight: 800; color: var(--bb-goal-v2-c02);
}
.v2more {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 14px; padding: 13px 0; border: 0; background: 0;
  font-family: inherit; font-size: var(--bb-goal-fs-12p5); font-weight: 700; color: var(--bb-goal-v2-c03);
  text-decoration: none; cursor: pointer;
}
/* 탭타겟 44px — 눈에 보이는 크기는 정본 그대로(41px), 누르는 영역만 위아래 2px 넓힌다 */
.v2more:before { content: ""; position: absolute; inset: -2px 0; }
.v2more i { font-style: normal; font-size: var(--bb-goal-fs-15); line-height: 1; }
/* 카드 안 둘째 줄(중3 안내) — 부제와 같은 결, 한 줄 더 */
.rtp-goal-gate__card-b [data-w2-middle3] { margin-top: 2px; }
/* W3 `남자 고등학교로 시작하기`(hidden form 안의 버튼) — `.later` 는 링크/버튼 모두 같은 모양 */
.later-form { margin: 0; }
/* 탭타겟 44px — 눈에 보이는 크기(35px)는 그대로, 누르는 영역만 위아래 5px 넓힌다 */
[data-goal-w3] .later { position: relative; }
[data-goal-w3] .later:before { content: ""; position: absolute; inset: -5px 0; }

/* ── STEP2 학년 칩 — 4개(고1 고2 고3 대1)가 한 줄에 들어간다 ──────────────────────── */
.rtp-goal-field .rtp-stat-toggles > .rtp-goal-pill { flex: 1 1 0; }

/* ── STEP4·5 계열 페이지 (E135~E138) ───────────────────────────────────────────── */
.v2st {
  display: flex; align-items: center; gap: 6px; margin: 2px 0 14px;
  font-size: var(--bb-goal-fs-12); font-weight: 700; color: var(--rtp-ink-4);
}
.v2st__it { padding: 5px 10px; border-radius: var(--bb-goal-radius-999); }
.v2st__it.on { background: var(--rtp-ink); color: var(--rtp-white); font-weight: 800; }
.v2st__it.has { color: var(--rtp-ink-2); }
.v2st__it em { font-style: normal; font-family: var(--bb-font-num); font-weight: 800; color: var(--rtp-orange); }
.v2st__sep { font-style: normal; color: var(--rtp-ink-4); }
/* E136 — 머리 카드가 오른쪽 24px 밖에서 들어온다(v2hIn). 그동안 문서가 8px 넘쳐 가로 스크롤이 생겼다(390px 에서 398px).
   페이지 컨테이너에서 가로만 잘라(clip) 어느 프레임에도 넘치지 않게 한다 — 세로·포커스 링은 그대로. */
.rtp-goal-pickpage { overflow-x: clip; }
.v2hero {
  display: flex; align-items: center; gap: 14px; margin-bottom: 6px; padding: 14px 16px;
  border-radius: var(--bb-goal-radius-18); background: var(--bb-primary-tint);
  word-break: keep-all;
  animation: v2hIn .35s cubic-bezier(.2, 1.2, .4, 1) both;
}
.v2hero img {
  flex: 0 0 auto; width: 64px; height: 64px; object-fit: contain;
  animation: v2eIn .5s .08s cubic-bezier(.2, 1.7, .4, 1) both;
}
.v2hero .q { margin: 0; }
.v2hero .sub { margin: 6px 0 0; }
.v2hero--sc { background: var(--bb-primary-tint); }   /* 득점 = 기본색(.v2hero 와 같은 값 — 계열 셋이 서로 다른 색임을 이름으로 남긴다) */
.v2hero--as { background: var(--bb-info-soft); }      /* Q15 — 정본 #eef5ff ≈ 가장 가까운 레포 토큰(PROTO_STYLE_EXCEPTIONS) */
.v2hero--df { background: var(--bb-goal-v2-c05); }
/* SS-2 AA — 어시스트·수비 머리 설명 글자: ink-3(#8b95a1) → ink-2(#4e5968). 2.70/2.83 → 6.31/6.64:1 (득점 머리는 그대로) */
.v2hero--as .sub, .v2hero--df .sub { color: var(--rtp-ink-2); }
@keyframes v2hIn { from { transform: translateX(24px); opacity: 0; } }
@keyframes v2eIn { from { transform: scale(.3) rotate(-20deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .v2hero, .v2hero img { animation: none; } }

.v2etc { margin-top: 8px; }
.v2etc .rtp-field__input { width: 100%; box-sizing: border-box; }
.v2etc[hidden] { display: none; }   /* auto_rules frontend/ — hidden 토글 요소의 가드 */

/* 기타 칩 — 다른 칩(label>input)과 같은 얼굴, 상태만 aria-pressed 로(<button> 이라 UA 기본값을 지운다) */
.rtp-goal-chip__face--btn {
  appearance: none; font: inherit; color: inherit; text-align: left; cursor: pointer; margin: 0;
}
.rtp-goal-chip__face--btn:focus-visible { box-shadow: var(--bb-focus-ring); outline: none; }
.rtp-goal-chip__face--btn[aria-pressed="true"] { border-color: var(--bb-primary); background: var(--bb-primary-tint); }
.rtp-goal-chip__face--btn[aria-pressed="true"] .rtp-goal-chip__check { border-color: var(--bb-primary); background: var(--bb-primary); }
.rtp-goal-chip__face--btn[aria-pressed="true"] .rtp-goal-chip__check:after {
  content: "✓"; font-size: 11px; font-weight: 800; color: var(--bb-bg); line-height: 1;
}
/* 기타 부제(입력값) — 길어도 칩을 밀어내지 않는다 */
.rtp-goal-chip__text [data-etc-desc] { overflow-wrap: anywhere; }

/* ── STEP6 스탯 1개 (E139~E142) ────────────────────────────────────────────────── */
/* 노트(첫 미션 · 1개만 · 바꾸기)는 목록이 길어도 화면 위에 붙어 있다 — 정본은 하단 고정 바(.ft__note)라 항상 보였다 */
.rtp-goal-note--sticky {
  position: sticky; top: 0; z-index: 3;
  margin: 0 0 var(--bb-space-2); padding: var(--bb-space-2) 0;
  background: var(--bb-bg);
}
/* `연결` 배지 — 정본 `.st__rec`(어두운 알약, 고르면 주황) */
.rtp-goal-stat__link {
  flex: 0 0 auto; margin-left: 2px; padding: 4px 8px; border-radius: var(--bb-goal-radius-6);
  background: var(--rtp-ink); font-size: var(--bb-goal-fs-9p5); font-weight: 800; letter-spacing: .4px;
  color: var(--bb-goal-c-white);
}
.rtp-goal-stat--active .rtp-goal-stat__link { background: var(--rtp-orange); }
/* `바꾸기` — 정본 `.swap` */
.swap {
  position: relative; margin-left: 4px; min-height: 28px; padding: 0 10px; border: 0;
  border-radius: var(--bb-goal-radius-8); background: var(--rtp-ink); color: var(--rtp-white);
  font-family: inherit; font-size: var(--bb-goal-fs-11p5); font-weight: 800; cursor: pointer;
}
/* 탭타겟 44px — 눈에 보이는 크기(28px)는 그대로, 누르는 영역만 위아래로 넓힌다 */
.swap:before { content: ""; position: absolute; inset: -8px -4px; }