/*
 * college-gauge.css — 대학 선배 기록 비교 (college_gauge)
 * SDD: docs/sdd/college_gauge.md §4 UI Design
 * 정본 목업: docs/sdd/college_gauge/mockups/gauge-v2.html (G1~G7)
 *
 * 네임스페이스: .bb-gauge-* (W5 — 목업의 .st/.bar/.gr/.ldb 처럼 전역에 너무 일반적인
 * 이름은 쓰지 않는다). 토큰은 전부 --bb-*(tokens.css) — raw hex/px 금지.
 * 모바일 우선(375px 기준), 데스크탑은 필요한 곳만 @media(min-width) 로 override.
 *
 * ⚠️ T10 [hidden] 가드 — auto_rules frontend/ 4회 재발 규칙. 이 파일에서 `hidden`
 * 속성으로 토글하는 대상은 .bb-gauge-panel 과 .bb-gauge-ctaform__hook 둘이다(둘 다 가드 있음).
 * 나머지 토글(대학 바꾸기 시트)은 기존 .bb-sheet*(components.css) 의 opacity/transform
 * 클래스 토글을 그대로 재사용해 hidden 자체를 쓰지 않는다.
 */

/* =============================================================
 * 진입 훅 배너 (my_stats.html · signup_entry.html 공용)
 * 정본 시안: docs/sdd/college_gauge/mockups/handoff-goal-cta/
 *
 * ⚠️ 이건 G1 이 아니다 — G1 은 이 배너를 눌러 들어가는 **전체 화면**이고 아래 블록이다.
 * 배너 전체가 <a> 라서 :hover/:active 를 배너 자신이 받는다. 안쪽에 버튼을 두지 않는다.
 * ============================================================= */
.bb-gauge-hook {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: var(--bb-space-3) 0;
  padding: var(--bb-space-3);
  background: var(--bb-hero-dark);
  border-radius: var(--bb-radius-xl);
  color: var(--bb-neutral-0);
  text-align: left;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.bb-gauge-hook:active { transform: translateY(1px); }
.bb-gauge-hook:focus-visible {
  outline: 2px solid var(--bb-primary);
  outline-offset: 3px;
}
.bb-gauge-hook__tag {
  display: inline-block;
  margin-bottom: var(--bb-space-2);
  padding: var(--bb-space-1) var(--bb-space-2);
  border-radius: var(--bb-radius-pill);
  background: var(--bb-primary);
  color: var(--bb-neutral-0);
  font-family: var(--bb-font-num);
  font-size: var(--bb-text-2xs);
  font-weight: 800;
  letter-spacing: 0.05em;
}
.bb-gauge-hook__title {
  margin: 0 0 var(--bb-space-1);
  font-size: var(--bb-text-base);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -0.03em;
}
.bb-gauge-hook__title em {
  font-style: normal;
  color: var(--bb-primary);
}
.bb-gauge-hook__sub {
  margin: 0;
  font-size: var(--bb-text-11-plus);
  font-weight: 600;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}
.bb-gauge-hook__row {
  display: flex;
  align-items: center;
  gap: var(--bb-space-2);
  margin-top: var(--bb-space-15);
}
/* 로고 스택 — 겹쳐서 한 줄만 차지한다. 링(box-shadow) 색은 배너 배경과 같아야
   겹침이 깔끔하다. 배경을 바꾸면 img/em 의 box-shadow 색도 같이 바꿀 것. */
.bb-gauge-hook__stack { display: flex; flex: 0 0 auto; }
.bb-gauge-hook__stack img {
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  padding: var(--bb-space-1);
  object-fit: contain;
  background: var(--bb-neutral-0);
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--bb-hero-dark);
}
.bb-gauge-hook__stack img + img,
.bb-gauge-hook__stack em { margin-left: -9px; }
.bb-gauge-hook__stack em {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bb-neutral-700);
  box-shadow: 0 0 0 1.5px var(--bb-hero-dark);
  font-style: normal;
  font-family: var(--bb-font-num);
  font-size: var(--bb-text-2xs);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.8);
}
.bb-gauge-hook__go {
  display: flex;
  align-items: center;
  gap: var(--bb-space-1);
  margin-left: auto;
  font-size: var(--bb-text-12);
  font-weight: 800;
  color: var(--bb-primary);
}

/* 아주 좁은 기기(≤340px)에서 제목이 3줄 되는 것 방지 */
@media (max-width: 340px) {
  .bb-gauge-hook__title { font-size: var(--bb-text-sm); }
}

/* =============================================================
 * G1 — 진입 화면 (spec §1 [G1 진입]). 배너가 아니라 **전체 화면**이다:
 * "비교하기" 로 들어와서 처음 만나는 화면이고, 여기서 다시 누르면 G2 그리드로 간다.
 * ============================================================= */
.bb-gauge-intro {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--bb-hero-dark);
  color: var(--bb-neutral-0);
}
/* 떠 있는 대학 로고 — 시안 `ask__sky`. 아래로 갈수록 배경색으로 덮어 제목을 지킨다. */
.bb-gauge-intro__sky {
  /* 시안의 top%% 는 ~560px 패널 기준이라 뷰포트 전체에 그대로 펴면 로고가 흩어진다.
     예전엔 `position:absolute; height:68%%` 로 가뒀는데, 그 68%% 는 **본문 높이와
     무관한 고정값**이라 본문이 조금만 길어지면(비로그인 가입 시트가 붙는 경우)
     로고가 "30초" 배지와 제목 위로 그대로 내려앉았다.
     그래서 본문 위에 **남는 공간을 차지하는 flex 아이템**으로 바꾼다 — 밀도는
     지키면서 글과는 절대 겹치지 않는다(goal_flow INTRO 와 같은 처방). */
  position: relative;
  flex: 1 1 auto;
  min-height: 168px;
  pointer-events: none;
}
.bb-gauge-intro__sky::after {
  content: "";
  position: absolute;
  inset: auto 0 -32px;
  height: 66%;
  background: linear-gradient(to top, var(--bb-hero-dark) 36%, transparent);
}
.bb-gauge-intro__sky b {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
  animation: bb-gauge-drift 7s ease-in-out infinite;
}
.bb-gauge-intro__sky b img {
  width: 70%;
  height: 70%;
  object-fit: contain;
}
@keyframes bb-gauge-drift { 50% { transform: translateY(-13px); } }
@media (prefers-reduced-motion: reduce) {
  .bb-gauge-intro__sky b { animation: none; }
}
.bb-gauge-intro__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 0 var(--bb-space-25) var(--bb-space-5);
}
.bb-gauge-intro__tag {
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 5px 11px;
  border-radius: var(--bb-radius-pill);
  background: var(--bb-primary);
  color: var(--bb-neutral-0);
  font-size: var(--bb-text-11);
  font-weight: 800;
  letter-spacing: 0.02em;
}
.bb-gauge-intro__title {
  margin: 0 0 var(--bb-space-15);
  font-size: var(--bb-text-26);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.03em;
}
.bb-gauge-intro__sub {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.75);
  word-break: keep-all;          /* #30: 어절 중간에서 끊지 않는다 ("찍었을 / 까") */
  overflow-wrap: break-word;
}
/* gauge_demo_mode R4 — "고등학생이 아니어도 체험해볼 수 있어요" (프로토 `.ask__try`). */
.bb-gauge-intro__try {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 0;
  padding: 6px 11px;
  border-radius: var(--bb-radius-pill);
  background: rgba(255, 255, 255, 0.1);
  font-size: var(--bb-text-11-plus);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  word-break: keep-all;          /* #30 */
  overflow-wrap: break-word;
}
.bb-gauge-intro__foot {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  padding: var(--bb-space-15) var(--bb-space-25) var(--bb-space-25);
}
/* 아직 안 열린 줄 (프로토 gauge-v2 `.prep`). 어두운 히어로 위에 얹히므로
   토큰이 아니라 흰색 알파를 쓴다 — 같은 화면의 __note 와 같은 방식이다. */
.bb-gauge-intro__prep {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 11px;
  padding: var(--bb-space-2) 10px;
  border-radius: var(--bb-radius-pill);
  background: rgba(255, 255, 255, 0.07);
}
.bb-gauge-intro__prep-items {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: var(--bb-space-1);
  overflow-x: auto;
  scrollbar-width: none;
}
.bb-gauge-intro__prep-items::-webkit-scrollbar { height: 0; }
/* gauge_demo_mode R5 — 칩이 프로토의 `<i>` 텍스트에서 실제 `<button>` 으로 바뀐다
   (누를 수 있어야 한다). 같은 시각 스펙을 유지하되 UA 버튼 기본값(배경·테두리·폰트)을
   리셋한다. ⚠️ 죽은 `i` 규칙은 지웠다 — PROTO_CLASS_MAP 의 `.prep__q i` 가 이제
   `button` 을 가리키므로(아무도 렌더 안 하는 규칙을 재면 게이트가 통과해도 의미가 없다)
   남겨둘 이유가 사라졌다. */
.bb-gauge-intro__prep-items button {
  flex: 0 0 auto;
  font: inherit;
  font-style: normal;
  /* 🔴 ← code-review MAJOR — 이 칩이 이 기능의 **유일한 진입점**(R5)인데 프로토 스펙
     그대로면 높이가 약 23px 이라 레포 탭타겟 규칙(44px)을 못 지킨다. 프로토는 <i>
     텍스트라 높이 규정이 없었다. .sw__e(32→44) · .gr__t button(38→44) 과 같은 판단
     이고 PROTO_STYLE_EXCEPTIONS 에 사유를 선언했다. 글자 크기·테두리는 그대로 두고
     세로 중앙정렬로만 키워 INTRO 하단 리듬을 유지한다. */
  display: inline-flex;
  align-items: center;
  min-height: var(--bb-tap-target);
  /* 44px 높이에 프로토의 좌우 7px 을 그대로 두면 알약이 세로로 길쭉한 '달걀' 이 된다.
     가로를 같이 넓혀야 버튼처럼 읽힌다(텍스트 크기·테두리는 프로토 그대로). */
  padding: 0 14px;
  border-radius: var(--bb-radius-pill);
  border: 1px dashed rgba(255, 255, 255, 0.26);
  background: transparent;
  font-size: var(--bb-text-2xs);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bb-gauge-intro__prep-sheet-count {
  margin: var(--bb-space-15) 0 0;
  font-size: var(--bb-text-2xs);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
}
.bb-gauge-intro__prep-sheet-count:empty { display: none; }
.bb-gauge-intro__prep-items button:active {
  border-color: var(--bb-primary);
  color: rgba(255, 255, 255, 0.85);
}
.bb-gauge-intro__prep-label {
  flex: 0 0 auto;
  padding-right: var(--bb-space-1);
  font-size: var(--bb-text-2xs);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
}

.bb-gauge-intro__note {
  margin: var(--bb-space-2) 0 0;
  text-align: center;
  font-size: var(--bb-text-11);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}

/* =============================================================
 * gauge_demo_mode R5/R6/R7 — 준비 중 시트(프로토 `.psdim`/`.ps`).
 * `.bb-gauge-intro` 가 이미 position:fixed 전체화면이라 그 안에서 absolute 로
 * 앉힌다 — 프로토와 같은 구성(폰 프레임=뷰포트). hidden 으로 토글하므로
 * auto_rules [hidden] 가드(UA 기본보다 특이도가 낮은 display 선언은 진다)가 필수.
 * ============================================================= */
.bb-gauge-intro__prep-dim {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(10, 14, 20, 0.55);
}
.bb-gauge-intro__prep-dim[hidden] { display: none; }

.bb-gauge-intro__prep-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  max-height: 88vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 10px var(--bb-space-25) var(--bb-space-25);
  background: var(--bb-hero-dark);
  border-radius: var(--bb-radius-20) var(--bb-radius-20) 0 0;
  color: var(--bb-neutral-0);
  box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.4);
}
.bb-gauge-intro__prep-sheet[hidden] { display: none; }
.bb-gauge-intro__prep-sheet-grab {
  display: block;
  width: 38px;
  height: 4px;
  margin: 0 auto var(--bb-space-3);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.22);
}
.bb-gauge-intro__prep-sheet-kicker {
  display: inline-block;
  margin-bottom: var(--bb-gauge-sheet-kicker-mb);
  padding: 4px 10px;
  border-radius: var(--bb-radius-pill);
  background: rgba(255, 122, 44, 0.18);
  font-size: var(--bb-text-2xs-plus);
  font-weight: 800;
  color: var(--bb-primary);
}
.bb-gauge-intro__prep-sheet-title {
  margin: 0 0 9px;
  font-size: var(--bb-text-19);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.4;
  word-break: keep-all;
}
.bb-gauge-intro__prep-sheet-reason {
  margin: 0 0 var(--bb-space-3);
  font-size: var(--bb-text-12-plus);
  font-weight: 600;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.66);
  word-break: keep-all;
}
.bb-gauge-intro__prep-sheet-bar {
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.bb-gauge-intro__prep-sheet-bar i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--bb-primary);
}
.bb-gauge-intro__prep-sheet-n {
  display: flex;
  justify-content: space-between;
  margin: var(--bb-space-2) 0 var(--bb-gauge-sheet-n-mb);
  font-family: var(--bb-font-num);
  font-size: var(--bb-text-2xs-plus);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
}
.bb-gauge-intro__prep-sheet-later {
  display: block;
  width: 100%;
  min-height: var(--bb-tap-target);
  margin: var(--bb-space-2) 0 0;
  padding: 10px 0;
  border: 0;
  border-radius: var(--bb-radius);
  background: transparent;
  font-family: inherit;
  font-size: var(--bb-text-12-plus);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  cursor: pointer;
}
/* R7 — 신청 후 토글 상태(JS 가 붙인다). */
.bb-gauge-intro__prep-sheet-later--signed {
  color: var(--bb-primary);
}

/* =============================================================
 * gauge_demo_mode R3 — 체험 배너 (프로토 `.dmo`). 결과 화면 상단 일반 흐름 1회
 * 노출 — sticky 학년 탭과 겹치지 않게 absolute 오버레이를 쓰지 않는다(SDD D20 계열
 * 판단과 같은 이유, §5 "프로토를 그대로 베끼면 깨지는 것").
 * ============================================================= */
.bb-gauge-demo-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 var(--bb-space-3);
  padding: 9px 10px;
  border-radius: var(--bb-radius);
  background: var(--bb-primary);
  color: var(--bb-neutral-0);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}
.bb-gauge-demo-banner__text {
  flex: 1;
  min-width: 0;
  font-size: var(--bb-text-11-plus);
  font-weight: 800;
  letter-spacing: -0.2px;
  word-break: keep-all;
}
.bb-gauge-demo-banner__dismiss {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--bb-tap-target);
  padding: 0 var(--bb-space-2);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  font-size: var(--bb-text-2xs-plus);
  font-weight: 800;
  color: var(--bb-neutral-0);
  text-decoration: none;
}

/* =============================================================
 * 공용 루트 / 레이아웃
 * ============================================================= */
.bb-gauge {
  position: relative;
  padding: 0 var(--bb-space-3) var(--bb-space-6);
}
/* 결과 화면은 CTA 바(하단 sticky)가 마지막 줄이다 — 아래 여백은 바가 메뉴 바로 위에 붙도록
   바 쪽 음수 margin 이 맞춘다(.bb-gauge-ctaform 주석). */
.bb-gauge--has-cta { padding-bottom: 0; }

/* =============================================================
 * G3 — 수집 연출 (D16). 시안 `ldb`.
 * 기준선은 미리 계산돼 있어 조회는 즉시 끝난다 — 이 화면은 **연출**이다.
 * 첫 진입 1회만 뜨고, college-gauge.js 가 COLLECT_MS 동안 퍼센트를 올린 뒤 치운다.
 * ============================================================= */
.bb-gauge-collect {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  flex-direction: column;
  padding: 40px var(--bb-space-4) var(--bb-space-5);
  background: var(--bb-hero-dark);
  color: var(--bb-neutral-0);
}
.bb-gauge-collect[hidden] { display: none; }
.bb-gauge-collect__kicker {
  margin: 0;
  font-family: var(--bb-font-num);
  font-size: var(--bb-text-2xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
}
.bb-gauge-collect__pct {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: var(--bb-space-3) 0 0;
  font-family: var(--bb-font-num);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--bb-primary);
}
.bb-gauge-collect__pct em { font-style: normal; font-size: 64px; line-height: 1; }
.bb-gauge-collect__pct i  { font-style: normal; font-size: 22px; letter-spacing: 0; }
.bb-gauge-collect__now {
  margin: var(--bb-space-3) 0 0;
  font-size: var(--bb-text-base);
  font-weight: 700;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}
.bb-gauge-collect__now b { font-weight: 800; color: var(--bb-neutral-0); }
.bb-gauge-collect__track {
  margin-top: var(--bb-space-3);
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.bb-gauge-collect__track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 3px;
  background: var(--bb-primary);
  transition: width 0.35s linear;
}
.bb-gauge-collect__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--bb-space-5);
}
.bb-gauge-collect__row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  border-radius: var(--bb-radius);
  background: rgba(255, 255, 255, 0.07);
}
.bb-gauge-collect__row img {
  width: 28px;
  height: 28px;
  padding: 4px;
  box-sizing: border-box;
  object-fit: contain;
  background: var(--bb-neutral-0);
  border-radius: 50%;
  flex: 0 0 auto;
}
.bb-gauge-collect__row .nm { flex: 1; min-width: 0; }
.bb-gauge-collect__row .nm b {
  display: block;
  font-size: var(--bb-text-sm);
  font-weight: 800;
}
.bb-gauge-collect__row .nm s {
  display: block;
  margin-top: 3px;
  text-decoration: none;
  font-family: var(--bb-font-num);
  font-size: var(--bb-text-2xs);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
}
.bb-gauge-collect__row .st {
  flex: 0 0 auto;
  font-family: var(--bb-font-num);
  font-size: var(--bb-text-2xs-plus);
  font-weight: 800;
  color: var(--bb-primary);
}
.bb-gauge-collect__row--done,
.bb-gauge-collect__row--wait { background: rgba(255, 255, 255, 0.04); }
.bb-gauge-collect__row--done .st { color: rgba(255, 255, 255, 0.5); }
.bb-gauge-collect__row--wait .nm b { color: rgba(255, 255, 255, 0.72); }
.bb-gauge-collect__row--wait .nm s,
.bb-gauge-collect__row--wait .st { color: rgba(255, 255, 255, 0.62); }
.bb-gauge-collect__mini {
  display: block;
  margin-top: 6px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.bb-gauge-collect__mini i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--bb-primary);
}
.bb-gauge-collect__row--wait .bb-gauge-collect__mini,
.bb-gauge-collect__row--done .bb-gauge-collect__mini { visibility: hidden; }
.bb-gauge-collect__note {
  margin: auto 0 0;
  font-size: var(--bb-text-2xs-plus);
  font-weight: 600;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
}

/* =============================================================
 * 준비 안 됨 상태
 * ============================================================= */
.bb-gauge-notready {
  display: flex;
  flex-direction: column;
  gap: var(--bb-space-3);
  align-items: center;
  padding: var(--bb-space-6) var(--bb-space-3);
  text-align: center;
}
.bb-gauge-notready__text {
  margin: 0;
  font-size: var(--bb-text-lg);
  font-weight: 700;
  color: var(--bb-ink-sub);
}

/* =============================================================
 * G2 — 첫 선택 페이지 헤더
 * ============================================================= */
.bb-gauge-pickerpage {
  padding-top: var(--bb-space-4);
}
.bb-gauge-pickerpage__title {
  margin: 0 0 6px;
  font-size: var(--bb-text-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  word-break: keep-all;
}
.bb-gauge-pickerpage__sub {
  margin: 0 0 var(--bb-space-4);
  font-size: var(--bb-text-sm);
  font-weight: 600;
  color: var(--bb-ink-sub);
  line-height: 1.6;
}

/* =============================================================
 * G2·G7 공용 — 대학 선택 그리드 (_college_gauge_picker.html)
 * ============================================================= */
.bb-gauge-picker__picked {
  display: flex;
  gap: var(--bb-space-2);
  margin-bottom: var(--bb-space-3);
}
.bb-gauge-picker__slot {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--bb-space-2);
  min-height: var(--bb-tap-target);
  padding: var(--bb-space-2);
  border: 1.5px solid var(--bb-primary);
  border-radius: var(--bb-radius);
  background: var(--bb-primary-tint);
  font-size: var(--bb-text-sm);
  font-weight: 800;
}
.bb-gauge-picker__slot--empty {
  justify-content: center;
  border: 1.5px dashed var(--bb-border);
  background: transparent;
  color: var(--bb-ink-sub);
  font-weight: 600;
}
.bb-gauge-picker__slot-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex: 0 0 auto;
}
/* 시안: 채워진 슬롯은 이름 아래 선배 수를 같이 보여주고 × 로 뺀다 */
.bb-gauge-picker__slot-name {
  flex: 1;
  min-width: 0;
  display: block;
}
.bb-gauge-picker__slot-name b {
  display: block;
  font-size: var(--bb-text-sm);
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bb-gauge-picker__slot-name s {
  display: block;
  margin-top: 1px;
  text-decoration: none;
  font-family: var(--bb-font-num);
  font-size: var(--bb-text-2xs-plus);
  font-weight: 700;
  color: var(--bb-ink-sub);
}
.bb-gauge-picker__slot-x {
  /* 글리프는 작지만 탭 타겟은 44px 이어야 한다(frontend.md · flow 테스트가 잰다).
     슬롯이 세로로 커지지 않게 오른쪽 여백만 음수로 먹인다. */
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--bb-tap-target);
  height: var(--bb-tap-target);
  margin-right: calc(var(--bb-space-2) * -1);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-family: var(--bb-font);
  font-size: var(--bb-text-base);
  font-weight: 700;
  line-height: 1;
  color: var(--bb-ink-sub);
  cursor: pointer;
}

.bb-gauge-picker__listhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bb-space-2);
  margin-bottom: var(--bb-space-2);
  font-size: var(--bb-text-sm);
}
.bb-gauge-picker__listhead b { font-weight: 800; }
.bb-gauge-picker__listhead span { color: var(--bb-ink-sub); font-weight: 600; }

.bb-gauge-picker__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bb-space-2);
  margin-bottom: var(--bb-space-4);
}
.bb-gauge-uni {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bb-space-1);
  min-height: var(--bb-tap-target);
  padding: var(--bb-space-2) 6px var(--bb-space-2);
  border: 1.5px solid var(--bb-border);
  border-radius: var(--bb-radius);
  background: var(--bb-bg);
  font-family: var(--bb-font);
  cursor: pointer;
}
.bb-gauge-uni--active,
.bb-gauge-uni[aria-pressed="true"] {
  border-color: var(--bb-primary);
  background: var(--bb-primary-tint);
}
/* 고른 순서 배지 — 시안 `uc__n`. 안 고른 카드에서는 숨는다. */
.bb-gauge-uni__n {
  position: absolute;
  top: 6px;
  right: 6px;
  display: none;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--bb-primary);
  color: var(--bb-neutral-0);
  font-family: var(--bb-font-num);
  font-size: var(--bb-text-2xs);
  font-weight: 800;
}
.bb-gauge-uni[aria-pressed="true"] .bb-gauge-uni__n { display: grid; }
.bb-gauge-uni__logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.bb-gauge-uni__name {
  font-size: var(--bb-text-sm);
  font-weight: 700;
  text-align: center;
}
.bb-gauge-uni__count {
  font-size: var(--bb-text-2xs-plus);
  font-weight: 600;
  color: var(--bb-ink-sub);
}

.bb-gauge-picker__submit {
  margin-top: var(--bb-space-1);
}

/* =============================================================
 * G4 — 비교 분석
 * ============================================================= */
/* 시안 G4 상단 리드 — 결론(헤드라인)이 맨 위다 */
.bb-gauge-lead {
  padding: var(--bb-space-4) 0 var(--bb-space-2);
}
.bb-gauge-lead__kicker {
  margin: 0;
  font-family: var(--bb-font-num);
  font-size: var(--bb-text-2xs-plus);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--bb-ink-sub);
}
.bb-gauge-lead__headline {
  margin: var(--bb-space-2) 0 0;
  font-size: var(--bb-text-22);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.03em;
  word-break: keep-all;
}
.bb-gauge-lead__sub {
  margin: var(--bb-space-2) 0 0;
  font-size: var(--bb-text-sm);
  font-weight: 600;
  line-height: 1.7;
  color: var(--bb-ink-sub);
  word-break: keep-all;
}

/* ⚠️ 바 전체를 sticky 로 두면 안 된다. 라벨 2줄 + 대학 탭 + 학년 탭(내 값 병기까지)
   해서 201px 이라 844px 화면의 1/4 을 영구히 덮는다 — 스크롤 끝에서 마지막 지표와
   요약 문장이 그 아래로 들어가 **안 보였다**. 붙어 있어야 하는 건 학년 탭뿐이다. */
.bb-gauge-gradebar {
  padding: var(--bb-space-3) 0 var(--bb-space-2);
  background: var(--bb-bg);
}
.bb-gauge-gradebar__row {
  display: flex;
  align-items: center;
  gap: var(--bb-space-2);
  margin-bottom: var(--bb-space-2);
  font-weight: 700;
}
.bb-gauge-gradebar__label {
  font-size: var(--bb-text-11);
  font-weight: 700;
  color: var(--bb-ink-sub);
}
.bb-gauge-gradebar__label--sub {
  display: block;
  margin: var(--bb-space-2) 0 var(--bb-space-1);
}
.bb-gauge-gradebar__change {
  margin-left: auto;
  min-height: var(--bb-tap-target);
  padding: 0 var(--bb-space-15);
  border: 1.5px solid var(--bb-border);
  border-radius: var(--bb-radius-pill);
  background: var(--bb-bg);
  font-family: var(--bb-font);
  font-size: var(--bb-text-11-plus);
  font-weight: 800;
  color: var(--bb-ink);
  cursor: pointer;
}

/* 대학 탭 · 학년 탭은 **같은 세그먼트 트랙**이다 (프로토 .gr__t / .gr__t--u).
   예전엔 대학 탭만 테두리 알약이라 한 화면에 두 가지 탭 언어가 섞였다
   (2026-09-22 사용자 지적: "설정할 때 디자인이 살짝 다르다"). */
.bb-gauge-unitabs,
.bb-gauge-gradetabs {
  display: flex;
  gap: var(--bb-gauge-seg-gap);
  padding: var(--bb-gauge-seg-pad);
  border-radius: var(--bb-radius);
  /* ⚠️ --bb-surface(#F9FAFB) 가 아니라 --rtp-bg(#f1f3f5) 다. surface 는 흰색과
     거의 구분이 안 돼 트랙이 안 보이고, 선택된 흰 알약이 떠 보이지 않는다. */
  background: var(--rtp-bg);
}
.bb-gauge-unitabs__btn,
.bb-gauge-gradetabs__btn {
  /* ⚠️ flex:1 — 예전 `flex:0 0 auto` 는 내용만큼만 차지해서 6개 탭이 트랙을 다 못
     채우고 **오른쪽에 빈칸**이 남았다(2026-09-22 사용자 지적). */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 탭타겟 44px — 프로토는 38px 이지만 레포 접근성 규칙이 더 세다
     (PROTO_STYLE_EXCEPTIONS 참조). */
  min-height: var(--bb-tap-target);
  border: 0;
  border-radius: var(--bb-gauge-seg-radius);
  background: transparent;
  font-family: var(--bb-font);
  font-size: var(--bb-gauge-seg-text);
  font-weight: 700;
  color: var(--bb-ink-sub);
  cursor: pointer;
}
.bb-gauge-unitabs__btn--active,
.bb-gauge-gradetabs__btn--active {
  background: var(--bb-bg);
  color: var(--bb-ink);
  font-weight: 800;
  box-shadow: var(--bb-shadow-sm);
}
.bb-gauge-unitabs__btn {
  gap: var(--bb-gauge-seg-uni-gap);
}
.bb-gauge-unitabs__btn img {
  width: var(--bb-gauge-seg-logo);
  height: var(--bb-gauge-seg-logo);
  object-fit: contain;
  flex: 0 0 auto;
}

/* 학년 탭은 위 세그먼트 규칙을 그대로 쓰고, 여기서는 sticky 와 2줄 배치만 더한다.
   ⚠️ sticky 는 부모 박스 안에서만 붙으므로 gradebar **밖**에 있어야 한다(D20).
      프로토는 .gr 통째로 sticky 지만 그러면 201px 가 화면 위에 고정돼 모바일에서
      본문이 그만큼 사라진다 — 의도적 차이다. */
.bb-gauge-gradetabs {
  position: sticky;
  top: 0;
  z-index: 5;
  /* sticky 로 떠 있는 동안 위아래로 본문이 비쳐 보이지 않게 바깥 여백까지 덮는다 */
  box-shadow: 0 0 0 var(--bb-space-2) var(--bb-bg);
  margin-bottom: var(--bb-space-3);
}
.bb-gauge-gradetabs__btn {
  flex-direction: column;
}
.bb-gauge-gradetabs__btn:disabled {
  color: var(--bb-ink-muted);
  cursor: not-allowed;
}
/* 내 기록이 없는 학년 — 눌러서 선배 값은 볼 수 있다(D13). 잠그지 않고 흐리게만 둔다. */
.bb-gauge-gradetabs__btn--norec:not(:disabled) {
  color: var(--bb-ink-muted);
  font-weight: 500;
}
.bb-gauge-gradetabs__btn b { font-weight: 800; }
/* 탭 아래 내 값 — 시안 G4 "내 9.2점" */
.bb-gauge-gradetabs__btn s {
  display: block;
  margin-top: 1px;
  text-decoration: none;
  font-family: var(--bb-font-num);
  font-size: var(--bb-gauge-seg-sub);
  font-weight: 700;
  color: var(--bb-ink-muted);
}
.bb-gauge-gradetabs__btn--active {
  background: var(--bb-bg);
  color: var(--bb-ink);
  box-shadow: var(--bb-shadow-sm);
}
/* 프로토 .gr__t button[aria-selected=true] s — 선택된 학년의 내 값은 주황 */
.bb-gauge-gradetabs__btn--active s { color: var(--bb-primary); }
.bb-gauge-gradetabs__btn--norec.bb-gauge-gradetabs__btn--active {
  color: var(--bb-ink-sub);
}

.bb-gauge-panel {
  display: block;
  padding: var(--bb-space-4) 0;
  border-bottom: 1px solid var(--bb-border-soft);
}
.bb-gauge-panel[hidden] { display: none; }

.bb-gauge-panel__head {
  display: flex;
  align-items: center;
  gap: var(--bb-space-2);
  margin-bottom: var(--bb-space-3);
}
.bb-gauge-panel__logo { width: 32px; height: 32px; object-fit: contain; flex: 0 0 auto; }
.bb-gauge-panel__name { flex: 1; min-width: 0; }
.bb-gauge-panel__name b { display: block; font-size: var(--bb-text-base); font-weight: 800; }
.bb-gauge-panel__name span { display: block; margin-top: 2px; font-size: var(--bb-text-2xs-plus); color: var(--bb-ink-sub); font-weight: 600; }

.bb-gauge-verdict { flex: 0 0 auto; font-weight: 800; }
.bb-gauge-verdict--ok { background: var(--bb-primary-soft); color: var(--bb-primary-dark); }
.bb-gauge-verdict--mid { background: var(--bb-surface); color: var(--bb-ink-sub); }
.bb-gauge-verdict--hi { background: var(--bb-neutral-100); color: var(--bb-ink-muted); }

.bb-gauge-panel__headline {
  margin: 0 0 var(--bb-space-1);
  font-size: var(--bb-text-lg);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.02em;
  word-break: keep-all;
}
.bb-gauge-panel__games {
  margin: 0 0 var(--bb-space-2);
  font-size: var(--bb-text-2xs-plus);
  font-weight: 600;
  color: var(--bb-ink-sub);
}
.bb-gauge-panel__note {
  margin: 0 0 var(--bb-space-3);
  padding: var(--bb-space-2);
  border-radius: var(--bb-radius);
  background: var(--bb-surface);
  font-size: var(--bb-text-sm);
  font-weight: 600;
  color: var(--bb-ink-sub);
  line-height: 1.6;
}
.bb-gauge-panel__thin { margin-bottom: var(--bb-space-3); }

.bb-gauge-stats {
  display: flex;
  flex-direction: column;
  gap: var(--bb-space-3);
}
.bb-gauge-stat__top {
  display: flex;
  align-items: baseline;
  gap: var(--bb-space-2);
  margin-bottom: 6px;
}
.bb-gauge-stat__label {
  font-size: var(--bb-text-sm);
  font-weight: 800;
  color: var(--bb-ink-sub);
}
/* E49 — 낮을수록 좋은 지표(팀 순위)의 라벨 옆 칩. 정본 .st__lo */
.bb-gauge-stat__lo {
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: var(--bb-radius-pill);
  background: var(--rtp-bg);
  font-size: var(--bb-gauge-seg-sub);
  font-weight: 800;
  color: var(--rtp-ink-2);
}
/* 내 값은 지표 이름 **바로 옆**이다(내 기록 상세와 같은 읽는 법).
   멀리 오른쪽에 두면 "무엇의 값인지" 를 눈이 한 번 더 이어붙여야 한다. */
.bb-gauge-stat__me {
  font-family: var(--bb-font-num);
  font-size: var(--bb-text-lg);
  font-weight: 800;
  color: var(--bb-ink);
}
/* 평균과의 차이 — 맨 오른쪽에 알약으로 감싼다. 맨숭맨숭한 글씨보다 눈에 붙는다. */
.bb-gauge-stat__diff {
  margin-left: auto;
  padding: 3px var(--bb-space-2);
  border-radius: var(--bb-radius-pill);
  font-family: var(--bb-font-num);
  font-size: var(--bb-text-2xs-plus);
  font-weight: 800;
  white-space: nowrap;
}
.bb-gauge-stat__diff--up { background: var(--bb-primary-soft); color: var(--bb-primary-dark); }
.bb-gauge-stat__diff--dn { background: var(--bb-surface);      color: var(--bb-ink-sub); }
.bb-gauge-stat__diff:empty { display: none; }

/* D21 — 내 기록 상세(rtp-sd-gauge) 와 같은 읽는 법: 막대 하나 + 눈금 2개,
   숫자는 눈금 바로 아래. 값을 좌우 양끝에 흩으면 어디를 가리키는지가 안 읽힌다.
   ⚠️ overflow:hidden 을 주면 안 된다 — 눈금이 막대 위아래로 삐져나오는 게 디자인이다. */
.bb-gauge-bar {
  position: relative;
  height: 10px;
  margin-top: var(--bb-space-2);
  border-radius: var(--bb-radius-pill);
  background: var(--bb-border-soft);
}
.bb-gauge-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: var(--bb-radius-pill);
  background: var(--bb-primary);
}
.bb-gauge-bar__tick {
  position: absolute;
  top: -5px;
  width: 2px;
  height: 20px;
  border-radius: 1px;
  transform: translateX(-1px);
}
.bb-gauge-bar__tick--avg  { background: var(--bb-ink-muted); }
.bb-gauge-bar__tick--best { background: var(--bb-ink); }
.bb-gauge-bar__dot {
  position: absolute;
  top: -3px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: var(--bb-radius-pill);
  background: var(--bb-bg);
  border: 3px solid var(--bb-primary);
}
.bb-gauge-bar__fill--alumni ~ .bb-gauge-bar__tick--avg { background: var(--bb-accent-dark); }
/* E51 — 낮을수록 좋은 행(팀 순위): 채움 없이 눈금 + 내 값 손잡이. 정본 .bar--lo / .bar--lo u.
   내 값이 없으면 손잡이를 안 그려 눈금(선배 평균)만 남는다. */
.bb-gauge-bar--lo {
  background: linear-gradient(90deg, var(--bb-gauge-lo-track), var(--rtp-bg));
}
.bb-gauge-bar__knob {
  position: absolute;
  top: -3px;
  width: 12px;
  height: 15px;
  margin-left: -6px;
  border-radius: var(--bb-radius-sm);
  background: var(--bb-primary);
  border: 2px solid var(--bb-bg);
  box-shadow: var(--bb-gauge-shadow-knob);
}
/* 내 기록이 없는 학년 — 막대가 내 값이 아니라 **선배 평균**이다(D15).
   주황(내 값)과 헷갈리면 안 되므로 정본 accent 파랑을 쓴다. */
.bb-gauge-bar__fill--alumni {
  background: var(--bb-accent);
}

.bb-gauge-stat__scale {
  position: relative;
  height: 15px;
  margin-top: 9px;
  font-family: var(--bb-font-num);
  font-size: var(--bb-text-2xs-plus);
  font-weight: 600;
  color: var(--bb-ink-sub);
}
/* 눈금 바로 아래에 붙는 숫자. 양끝에서 잘리지 않게 가장자리에서만 정렬을 바꾼다. */
.bb-gauge-stat__scale > span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
/* ⚠️ `.bb-gauge-stat__scale > span` 이 (0,1,1) 이라 클래스 하나로는 못 이긴다 —
   자식 선택자를 그대로 달아 특이도를 맞춘다. */
.bb-gauge-stat__scale > .bb-gauge-stat__scale--start { transform: none; }
.bb-gauge-stat__scale > .bb-gauge-stat__scale--end   { transform: translateX(-100%); }
/* 두 눈금 라벨이 글자 폭 기준으로 겹치면 JS(college-gauge.js fixScaleOverlap)가 --stack 을 달아
   1등 라벨을 둘째 줄로 내린다. 팀 순위처럼 1등이 1위 근처(왼쪽 끝)고 평균이 가까우면 생긴다. */
.bb-gauge-stat__scale--stack { height: 32px; }
.bb-gauge-stat__scale--stack > .bb-gauge-stat__scale--best { top: 17px; }
.bb-gauge-stat__scale--best {
  font-weight: 700;
  color: var(--bb-ink);
}
/* 지표 목록 전체에 대한 안내다. 바로 아래 첫 지표에 붙어 보이면 그 지표만의 문구로
   읽히니, 아래 여백을 벌리고 왼쪽 선으로 묶어준다. */
.bb-gauge-panel__norec {
  margin: var(--bb-space-3) 0 var(--bb-space-2);
  padding-left: var(--bb-space-2);
  border-left: 3px solid var(--bb-accent);
  font-size: var(--bb-text-sm);
  font-weight: 700;
  color: var(--bb-ink-sub);
}
.bb-gauge-stat__n {
  margin: 4px 0 0;
  font-size: var(--bb-text-2xs-plus);
  font-weight: 500;
  color: var(--bb-ink-muted);
}

.bb-gauge-panel__denominator {
  margin: var(--bb-space-3) 0 0;
  font-size: var(--bb-text-2xs-plus);
  font-weight: 600;
  color: var(--bb-ink-sub);
  line-height: 1.6;
}

.bb-gauge-asof {
  margin: var(--bb-space-4) 0 0;
  font-size: var(--bb-text-2xs-plus);
  font-weight: 600;
  color: var(--bb-ink-muted);
  text-align: center;
}
.bb-gauge-disclaimer {
  margin: var(--bb-space-2) 0 var(--bb-space-4);
  font-size: var(--bb-text-2xs-plus);
  font-weight: 500;
  color: var(--bb-ink-muted);
  line-height: 1.6;
}

/* E55~E59 — CTA 바(하단 고정). 정본 .ft.ft--cta / .ft__hook / .ft__go / .ft__note
   - 위 구분선 없음 · 위 모서리 20px · 위로 드리운 그림자(--bb-gauge-shadow-ft) · 안쪽 14/20/20px
   - z-index 5 — 대학 바꾸기 시트(.bb-sheet 120)·딤(110)·하단 메뉴(100)·본인인증 띠(101) **아래**.
   - sticky bottom = 하단 메뉴(+본인인증 띠) 높이 → 메뉴 바로 위에 틈 0 으로 붙는다.
     메뉴 높이는 --rtp-footer-nav-h(62px)+safe-area, 띠는 --rtp-identity-banner-h(body 클래스가 있을 때만 정의).
   - 좌우는 .bb-gauge 의 16px 안쪽 여백을 음수 margin 으로 뚫어 화면 폭 전체를 쓴다.
   - 음수 margin-bottom: 스크롤 끝에서 바가 메뉴 위에 정확히 앉도록, 아래쪽 컨테이너 여백 중
     "메뉴+띠 높이를 뺀 나머지"(= rtp-components.css 의 26px 여유)를 바가 먹는다. 메뉴 없는 화면은 컨테이너 64px. */
.bb-gauge-ctaform {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin: 0 calc(-1 * var(--bb-space-3)) -64px;
  padding: 14px 20px 20px;
  background: var(--bb-bg);
  border-radius: var(--bb-radius-20) var(--bb-radius-20) 0 0;
  box-shadow: var(--bb-gauge-shadow-ft);
}
body.rtp-has-nav .bb-gauge-ctaform {
  bottom: calc(var(--rtp-footer-nav-h) + env(safe-area-inset-bottom, 0px));
  margin-bottom: -26px;
}
body.rtp-has-nav.rtp-has-identity-banner .bb-gauge-ctaform {
  bottom: calc(var(--rtp-footer-nav-h) + env(safe-area-inset-bottom, 0px) + var(--rtp-identity-banner-h));
}
.bb-gauge-ctaform__hook {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 11px;
}
.bb-gauge-ctaform__hook[hidden] { display: none; }
.bb-gauge-ctaform__hook b {
  font-size: var(--bb-gauge-text-lead);
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--bb-ink);
  word-break: keep-all;
}
/* 정본은 --rtp-ink-3(#8b95a1, 흰 바탕 3.04:1)이나 새 글씨가 대비 기준선에 없는 미달을 만들지 않도록
   기존 안내문(.bb-gauge-ctaform__note)과 같은 --bb-ink-sub 를 쓴다(2026-09-24 대비 결정: 기준선 밖 신규 미달 금지). */
.bb-gauge-ctaform__hook span {
  font-size: var(--bb-text-12);
  font-weight: 600;
  color: var(--bb-ink-sub);
  word-break: keep-all;
}
.bb-gauge-ctaform__go { box-shadow: var(--bb-gauge-shadow-cta); }
/* S20 — 들썩임. JS 가 결과가 보인 뒤 이 클래스를 달고(수집 연출 중이면 끝난 뒤), 끝나면 뗀다.
   1s 는 "보인 뒤 1초" 지연, 2.4s × 2회. 대학 탭 전환엔 클래스를 다시 달지 않는다. */
.bb-gauge-ctaform__go--nudge { animation: bb-gauge-nudge 2.4s ease-out 1s 2; }
@keyframes bb-gauge-nudge {
  0%, 70%, 100% { transform: none; }
  78%           { transform: translateY(-3px); }
  86%           { transform: none; }
  92%           { transform: translateY(-1.5px); }
}
@media (prefers-reduced-motion: reduce) {
  .bb-gauge-ctaform__go--nudge { animation: none; }
}
.bb-gauge-ctaform__note {
  margin: 9px 0 0;
  text-align: center;
  font-size: var(--bb-text-11);
  font-weight: 600;
  color: var(--bb-ink-sub);
}

/* CTA 토스트 — hidden 토글 없음(서버가 조건부로만 렌더 + JS 가 타임아웃 뒤 el.remove()). */
.bb-gauge-toast {
  margin: 0 0 var(--bb-space-3);
  padding: var(--bb-space-2) var(--bb-space-3);
  border-radius: var(--bb-radius);
  background: var(--bb-ink);
  color: var(--bb-neutral-0);
  font-size: var(--bb-text-sm);
  font-weight: 700;
  text-align: center;
}

/* =============================================================
 * G7 — 대학 바꾸기 시트 (components.css 의 .bb-sheet*/.bb-sheet-dim* 재사용)
 * ============================================================= */
/* G7 — 시트 하단 안내 (시안 ft__note) */
.bb-gauge-change-sheet__note {
  margin: var(--bb-space-2) 0 0;
  text-align: center;
  font-size: var(--bb-text-11);
  font-weight: 600;
  color: var(--bb-ink-sub);
}
.bb-gauge-change-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--bb-space-1);
}
.bb-gauge-change-sheet__close {
  min-width: var(--bb-tap-target);
  min-height: var(--bb-tap-target);
  border: 0;
  background: transparent;
  font-size: var(--bb-text-lg);
  color: var(--bb-ink-sub);
  cursor: pointer;
}

/* =============================================================
 * 모바일 / 탭타겟
 * ============================================================= */
@media (max-width: 374px) {
  .bb-gauge-picker__grid { grid-template-columns: repeat(2, 1fr); }
}