/* ============================================================================
   EXCEL Financial Services — rookie-landing.css (신인 모집 랜딩 /sinip 전용)
   출처: 디자인 시스템 landing-core.css (ds- 레이어). 기존 landing-core.css와 분리.
   변경: 원본 1행의 jsdelivr Pretendard @import 제거(사이트 CSP style-src 위반).
         → --ds-font-sans 시스템 폰트 폴백 사용. 하단에 /sinip 인터랙션 .r-* 클래스 추가.
   ============================================================================ */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  --ds-color-navy: #001B2A;
  --ds-color-navy-soft: #0E3A52;
  --ds-color-ink: #151820;
  --ds-color-ink-soft: #3A3F47;

  --ds-color-accent: #FF6A00;
  /* 흰 바탕·연주황 바탕 위 작은 글씨가 대비 4.5:1 을 넘도록(접근성 기준, 2026-09-24 Lighthouse). 이전 #E55F00 = 3.51 */
  --ds-color-accent-strong: #B84A00;
  --ds-color-accent-soft: #FFF0E3;

  --ds-color-blue: #2D7FF5;
  --ds-color-blue-strong: #1D63C8;
  --ds-color-blue-soft: #E3EEFD;

  --ds-color-cyan: #00BCD4;
  --ds-color-cyan-strong: #0097A7;
  --ds-color-cyan-soft: #E7FCFF;

  --ds-color-paper: #FFFFFF;
  --ds-color-subtle: #F4F5F7;
  --ds-color-line: #E8EAEE;
  --ds-color-line-strong: #D4D7DC;
  --ds-color-muted: #5F6570; /* 연회색 바탕 대비 4.43 → 5.3 */
  --ds-color-faint: #8B9098;

  --ds-color-on-dark: #FFFFFF;
  --ds-color-on-dark-muted: #A8B6BF;
  --ds-color-on-dark-line: rgba(255, 255, 255, 0.18);

  --ds-color-danger: #D6453D;
  --ds-color-success: #1E8A5B;

  /* 폰트: jsdelivr @import 제거 → Pretendard 미설치 시 시스템 한글 폰트로 폴백 */
  --ds-font-sans: 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', -apple-system, BlinkMacSystemFont, sans-serif;
  --ds-font-display-1: 30px;
  --ds-font-display-2: 24px;
  --ds-font-title: 19px;
  --ds-font-body: 16px;
  --ds-font-small: 14px;
  --ds-font-caption: 12.5px;
  --ds-leading-display: 1.28;
  --ds-leading-body: 1.6;

  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 24px;
  --ds-space-6: 32px;
  --ds-space-7: 48px;
  --ds-space-8: 64px;

  --ds-radius-sm: 8px;
  --ds-radius-md: 14px;
  --ds-radius-lg: 20px;
  --ds-radius-pill: 999px;

  --ds-border: 1px solid var(--ds-color-line);
  --ds-shadow-card: 0 4px 16px rgba(0, 27, 42, 0.08);
  --ds-shadow-raised: 0 10px 30px rgba(0, 27, 42, 0.14);

  --ds-z-header: 100;
  --ds-z-sticky-cta: 90;
  --ds-z-modal: 200;
  --ds-z-toast: 300;

  --ds-container: 1120px;
  --ds-gutter: 20px;
}

/* ============================================================
   2. BASE
   ============================================================ */
/* 브라우저 기본 body 여백(8px)이 남아 페이지 전체에 흰 테두리가 생기고,
   화면 끝까지 붙는 고정바와 가장자리가 어긋났다. 두 페이지 공통 버그라 양쪽에 같이 적용한다. */
html, body { margin: 0; padding: 0; }

.ds-page {
  margin: 0;
  font-family: var(--ds-font-sans);
  font-size: var(--ds-font-body);
  line-height: var(--ds-leading-body);
  color: var(--ds-color-ink);
  background: var(--ds-color-paper);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}
.ds-page *,
.ds-page *::before,
.ds-page *::after { box-sizing: border-box; }
/* 두 번 탭 확대를 기다리는 지연을 없앤다(구형 인앱 웹뷰). 핀치 확대는 그대로 된다. */
.ds-page a, .ds-page button, .ds-page summary, .ds-page label, .ds-page input, .ds-page select { touch-action: manipulation; }
.ds-page img { max-width: 100%; display: block; }

/* ============================================================
   3. COMPONENTS — 버튼
   ============================================================ */
.ds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  min-height: 52px;
  padding: 14px 24px;
  border: 0;
  border-radius: var(--ds-radius-pill);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-font-body);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out;
}
.ds-button:focus-visible { outline: 3px solid var(--ds-color-blue); outline-offset: 2px; }
.ds-button:disabled,
.ds-button[aria-disabled="true"] { background: var(--ds-color-line); color: var(--ds-color-faint); cursor: not-allowed; }
.ds-button--primary { background: var(--ds-color-accent); color: #fff; }
.ds-button--primary:hover:not(:disabled) { background: #E55F00; } /* 버튼 색은 그대로. 글씨용 accent-strong 은 대비 때문에 더 진하다 */
.ds-button--navy { background: var(--ds-color-navy); color: #fff; }
.ds-button--navy:hover:not(:disabled) { background: var(--ds-color-navy-soft); }
.ds-button--outline { background: var(--ds-color-paper); color: var(--ds-color-ink); border: 1.5px solid var(--ds-color-line-strong); }
.ds-button--outline:hover:not(:disabled) { border-color: var(--ds-color-ink); }
.ds-button--phone { background: var(--ds-color-blue-strong); color: #fff; } /* 흰 글자 대비 3.84 → 5.6 */
.ds-button--phone:hover:not(:disabled) { background: #174FA0; }
.ds-button--kakao { background: #FEE500; color: #191600; }
.ds-button--kakao:hover:not(:disabled) { background: #F2D900; }
.ds-button--small { min-height: 40px; padding: 8px 16px; font-size: var(--ds-font-small); }
.ds-button--block { display: flex; width: 100%; }
.ds-button__chevron {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.25); font-size: 14px; font-weight: 800;
}

/* --- 아이브로우/뱃지 --- */
.ds-eyebrow {
  display: inline-flex; align-items: center; gap: var(--ds-space-2);
  font-size: var(--ds-font-small); font-weight: 700; color: var(--ds-color-ink-soft);
}
.ds-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ds-color-accent); }
.ds-eyebrow--on-dark { color: var(--ds-color-on-dark-muted); }
.ds-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: var(--ds-radius-pill); font-size: var(--ds-font-caption);
  font-weight: 700; background: var(--ds-color-subtle); color: var(--ds-color-ink-soft);
}
.ds-badge--accent { background: var(--ds-color-accent-soft); color: var(--ds-color-accent-strong); }
.ds-badge--blue { background: var(--ds-color-blue-soft); color: var(--ds-color-blue-strong); }
.ds-badge--on-dark { background: rgba(255, 255, 255, 0.1); color: var(--ds-color-on-dark); }

/* 히어로(진남색 배경) 안으로 폼을 올리면서 생긴 문제 —
   라벨과 개인정보 동의 문구가 검정/진회색이라 남색 위에서 읽히지 않았다.
   동의 고지가 안 보이는 것은 심의·법적 문제이므로 폼을 밝은 카드로 분리한다.
   시각적으로도 입력 영역이 도드라져 첫 화면에서 손이 간다. */
.ds-hero .ds-inquiry {
  background: var(--ds-color-paper);
  border: var(--ds-border);
  border-radius: var(--ds-radius-md);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

/* /sinip 히어로 — 기종별 수치 대신, 화면에 비례해 줄고 늘어나는 규칙 한 벌.
   글자·여백은 폭(vw)과 보이는 높이(svh) 중 작은 쪽을 따라 상한·하한 사이에서 움직인다.
   높이를 보는 이유: 인앱 브라우저의 상하단 툴바는 세로만 깎는다.
   목표: 스크롤 0 에서 이름칸~제출 버튼이 한 화면에. 문구는 하나도 숨기지 않는다(심의).
   svh 를 못 읽는 옛 웹뷰는 바로 앞 줄의 vh 값을 쓴다.
   `.ds-page--hero-form`(sinip.html 에만 있음)으로 /sinip 에만 건다 — /sinip-b(대조군)는 그대로.
   :has() 대신 클래스를 쓰는 이유: iOS 15.3 이하·Chromium 105 미만 웹뷰는 :has() 규칙을 통째로 버린다.
   `.ds-hero .ds-inquiry` 역시 폼이 히어로 안에 있을 때만 맞으므로 /sinip 전용이다. */
.ds-page--hero-form .ds-hero { padding-top: clamp(8px, 1.5vh, 48px); padding-top: clamp(8px, 1.5svh, 48px); }
.ds-page--hero-form .ds-hero .ds-hero__title {
  line-height: 1.25;
  font-size: clamp(22px, min(7.6vw, 3.8vh), var(--ds-font-display-1));
  font-size: clamp(22px, min(7.6vw, 3.8svh), var(--ds-font-display-1));
}
.ds-page--hero-form .ds-hero .ds-hero__lede {
  font-size: clamp(13px, min(4.2vw, 2vh), 16px);
  font-size: clamp(13px, min(4.2vw, 2svh), 16px);
  margin-bottom: clamp(6px, 1vh, 16px);
  margin-bottom: clamp(6px, 1svh, 16px);
}
.ds-hero .ds-inquiry {
  margin: clamp(6px, 1vh, 12px) 0 4px;
  margin: clamp(6px, 1svh, 12px) 0 4px;
  padding: clamp(8px, 1.4vh, 16px) clamp(10px, 3.4vw, 16px);
  padding: clamp(8px, 1.4svh, 16px) clamp(10px, 3.4vw, 16px);
}
.ds-hero .ds-inquiry .ds-form-field { margin-bottom: clamp(5px, 1.1vh, 10px); margin-bottom: clamp(5px, 1.1svh, 10px); }
.ds-hero .ds-inquiry .ds-form-field__label { margin-bottom: 2px; font-size: clamp(13px, 1.7vh, 14px); font-size: clamp(13px, 1.7svh, 14px); }
.ds-hero .ds-inquiry .ds-agree span { line-height: 1.45; font-size: clamp(12px, 1.7vh, 14px); font-size: clamp(12px, 1.7svh, 14px); }
/* 짧은 화면(iPhone SE 인앱 375x600 등)에서도 제출 버튼까지 첫 화면에 들어오게, 입력칸·동의 상자·제목 여백도
   높이에 비례시킨다. 입력칸은 44px 아래로 줄이지 않는다(터치 영역). 글자는 숨기지 않는다. */
.ds-page--hero-form .ds-hero__title { margin-top: clamp(4px, 1.2vh, 12px); margin-top: clamp(4px, 1.2svh, 12px); margin-bottom: clamp(4px, 1vh, 8px); margin-bottom: clamp(4px, 1svh, 8px); }
.ds-hero .ds-inquiry .ds-form-field__input { min-height: clamp(44px, 6.7vh, 52px); min-height: clamp(44px, 6.7svh, 52px); padding-block: clamp(8px, 1.5vh, 12px); padding-block: clamp(8px, 1.5svh, 12px); }
.ds-hero .ds-inquiry .ds-agree { padding: clamp(8px, 1.5vh, 12px) clamp(12px, 2vh, 16px); padding: clamp(8px, 1.5svh, 12px) clamp(12px, 2svh, 16px); }
.ds-hero .ds-inquiry .ds-form-field__hint { margin-bottom: 0; line-height: 1.45; }
.ds-page--hero-form .ds-hero__lede { line-height: 1.5; }
.ds-hero .ds-inquiry [type="submit"] { min-height: clamp(44px, 6.7vh, 52px); min-height: clamp(44px, 6.7svh, 52px); padding-block: 10px; }
/* 폭 760 미만(폰·폴드 펼침)에서는 폼이 본문 폭을 다 쓴다. 560 고정이면 폴드 펼침(690)에서
   카드가 왼쪽에 붙고 오른쪽이 비었다. 데스크톱에서만 읽기 좋은 폭으로 묶는다. */
@media (min-width: 760px) { .ds-hero .ds-inquiry { max-width: 560px; } }

/* --- 폼 --- */
.ds-form-field { margin-bottom: var(--ds-space-4); }
.ds-form-field__label { display: block; margin-bottom: var(--ds-space-2); font-size: var(--ds-font-small); font-weight: 700; color: var(--ds-color-ink); }
.ds-form-field__label .ds-required { color: var(--ds-color-danger); }
.ds-form-field__input {
  width: 100%; min-height: 52px; padding: 12px 16px;
  border: 1.5px solid var(--ds-color-line-strong); border-radius: var(--ds-radius-sm);
  font-family: var(--ds-font-sans); font-size: var(--ds-font-body); color: var(--ds-color-ink);
  background: var(--ds-color-paper); transition: border-color 0.2s ease-out;
}
.ds-form-field__input::placeholder { color: var(--ds-color-faint); }
.ds-form-field__input:focus { outline: none; border-color: var(--ds-color-blue); box-shadow: 0 0 0 3px var(--ds-color-blue-soft); }
.ds-form-field__input[aria-invalid="true"] { border-color: var(--ds-color-danger); }
.ds-form-field__hint { margin-top: var(--ds-space-1); font-size: var(--ds-font-caption); color: var(--ds-color-muted); }
.ds-agree {
  display: flex; align-items: flex-start; gap: var(--ds-space-3);
  padding: var(--ds-space-3) var(--ds-space-4); border-radius: var(--ds-radius-sm);
  background: var(--ds-color-subtle); font-size: var(--ds-font-small); color: var(--ds-color-ink-soft);
}
.ds-agree input[type="checkbox"] { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ds-color-accent); flex-shrink: 0; }
.ds-agree a { color: var(--ds-color-blue-strong); font-weight: 600; }

/* ============================================================
   4. SECTION PATTERNS
   ============================================================ */
.ds-section { padding: var(--ds-space-7) 0; }
.ds-section--subtle { background: var(--ds-color-subtle); }
.ds-section--navy { background: var(--ds-color-navy); color: var(--ds-color-on-dark); }
.ds-section__inner { max-width: var(--ds-container); margin: 0 auto; padding: 0 var(--ds-gutter); }
.ds-section__title { margin: 0 0 var(--ds-space-2); font-size: var(--ds-font-display-2); font-weight: 800; line-height: var(--ds-leading-display); }
.ds-section__lede { margin: 0 0 var(--ds-space-5); font-size: var(--ds-font-body); color: var(--ds-color-muted); }
.ds-section--navy .ds-section__lede { color: var(--ds-color-on-dark-muted); }

/* 헤더·고정바의 backdrop-filter(흐림)는 뺐다. 스크롤 매 프레임 뒤 배경을 다시 흐리게 그려
   저가 안드로이드에서 스크롤이 무거워진다. 배경이 96% 불투명이라 흐림은 눈에 거의 안 보였다. */
.ds-header { position: sticky; top: 0; z-index: var(--ds-z-header); background: rgba(255, 255, 255, 0.98); border-bottom: var(--ds-border); }
.ds-header__inner { max-width: var(--ds-container); margin: 0 auto; padding: 10px var(--ds-gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-4); }
.ds-header__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ds-color-ink); min-width: 0; }
.ds-header__logo { width: 28px; height: 28px; flex-shrink: 0; }
.ds-header__name { min-width: 0; overflow-wrap: anywhere; font-size: var(--ds-font-small); font-weight: 800; line-height: 1.25; }
/* 폴드 커버(344px)에서 전화번호가 "1844-/1435" 로 쪼개지고 회사명이 "…"로 잘렸다.
   번호는 한 줄을 지키고, 회사명은 자리가 모자랄 때만 단어 단위(keep-all)로 두 줄이 된다. */
.ds-header .ds-button { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 374px) {
  .ds-header__inner { gap: var(--ds-space-2); }
  .ds-header .ds-button--small { padding: 8px 12px; font-size: 13px; }
  .ds-header__name { font-size: 13px; }
}

.ds-hero { background: var(--ds-color-navy); color: var(--ds-color-on-dark); padding: var(--ds-space-7) 0; }
.ds-hero__title { margin: var(--ds-space-3) 0 var(--ds-space-2); font-size: var(--ds-font-display-1); font-weight: 900; line-height: var(--ds-leading-display); }
.ds-hero__title .ds-accent { color: var(--ds-color-accent); }
.ds-hero__lede { margin: 0 0 var(--ds-space-5); font-size: var(--ds-font-body); color: var(--ds-color-on-dark-muted); }
.ds-hero__note { margin-top: var(--ds-space-4); font-size: var(--ds-font-caption); color: var(--ds-color-on-dark-muted); }
.ds-hero__chips { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin: 0 0 var(--ds-space-5); padding: 0; list-style: none; }

.ds-cta-cluster { display: flex; flex-direction: column; gap: var(--ds-space-3); }

.ds-inquiry { background: var(--ds-color-paper); border-radius: var(--ds-radius-lg); padding: var(--ds-space-5); box-shadow: var(--ds-shadow-raised); color: var(--ds-color-ink); }

.ds-footer { background: var(--ds-color-navy); color: var(--ds-color-on-dark-muted); padding: var(--ds-space-7) 0 var(--ds-space-8); font-size: var(--ds-font-caption); line-height: 1.7; }
.ds-footer a { color: var(--ds-color-on-dark); }
.ds-footer__brand { display: flex; align-items: center; gap: 10px; color: var(--ds-color-on-dark); font-size: var(--ds-font-small); font-weight: 800; margin-bottom: var(--ds-space-4); }
.ds-footer__brand img { width: 26px; height: 26px; }
.ds-footer hr { border: 0; border-top: 1px solid var(--ds-color-on-dark-line); margin: var(--ds-space-5) 0; }
.ds-footer__compliance { border-radius: var(--ds-radius-sm); background: rgba(255, 255, 255, 0.08); padding: var(--ds-space-4); }
.ds-footer__compliance strong { color: var(--ds-color-on-dark); }

.ds-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--ds-z-sticky-cta);
  display: flex; gap: var(--ds-space-2);
  padding: 10px var(--ds-gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.98); border-top: var(--ds-border);
}
.ds-sticky-cta .ds-button { flex: 1; min-height: 48px; }
/* 인앱 브라우저 하단 툴바 보정은 JS(liftStickyCtaInApp)가 visualViewport 로 실측해
   인라인 스타일로 적용한다. 추정치를 CSS 에 박으면 툴바가 없는 환경에서 헛공간이 생긴다. */
/* 고정 CTA 가림 방지 — 하단 푸터(사업자·심의 문구)가 CTA 바에 덮이지 않도록 여백 확보 */
.ds-page { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
/* 앵커 이동 시 sticky 헤더(52px)에 가려지지 않도록 — 미적용 시 "눌러도 안 움직인 것처럼" 보임 */
.ds-section[id], .ds-hero[id], [id="apply"], [id="quiz"], [id="r-form"] { scroll-margin-top: 64px; }
/* /sinip 은 폼이 첫 화면에 있어, 폼이 보이는 동안 고정바는 제출 버튼·동의 체크를 가리기만 했다.
   폼을 지나 내려가면 JS(initStickyCta)가 .is-shown 을 붙여 올린다.
   JS 가 없으면 끝까지 숨는다 — 폼이 맨 위에 있으므로 잃는 경로가 없다. /sinip-b 는 그대로. */
.ds-page--hero-form .ds-sticky-cta { transform: translateY(110%); visibility: hidden; transition: transform 0.2s ease-out, visibility 0s linear 0.2s; }
.ds-page--hero-form .ds-sticky-cta.is-shown { transform: none; visibility: visible; transition: transform 0.2s ease-out; }

/* ============================================================
   5. BREAKPOINTS
   ============================================================ */
@media (min-width: 760px) {
  :root { --ds-font-display-1: 40px; --ds-font-display-2: 28px; }
  .ds-cta-cluster { flex-direction: row; flex-wrap: wrap; }
  .ds-cta-cluster .ds-button { flex: 0 0 auto; }
  .ds-sticky-cta { display: none; }
}
@media (min-width: 1040px) {
  :root { --ds-font-display-1: 48px; --ds-font-display-2: 32px; }
  .ds-hero { padding: var(--ds-space-8) 0; }
}

/* ============================================================
   6. /sinip 인터랙션 (.r-*) — 바닐라 JS가 .is-open 토글
   ============================================================ */
[data-snap-row] { scrollbar-width: none; }
[data-snap-row]::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* 접이식 패널 (페르소나·여정 스텝) */
/* 번호 저장 안내 — 하단 고정바 위에 5초. */
.r-toast {
  position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: calc(var(--ds-z-sticky-cta) + 1);
  width: max-content; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 16px;
  background: var(--ds-color-navy); color: #fff; font-size: 14px; font-weight: 700; text-align: center; word-break: keep-all;
  transform: translate(-50%, 12px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0s linear 0.2s;
}
.r-toast.is-shown { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.2s ease-out, transform 0.2s ease-out; }
.r-panel { overflow: hidden; max-height: 0; transition: max-height 0.3s ease; }
.r-panel.is-open { max-height: 360px; }
.r-panel__body { margin: 0; padding: 0 16px 16px 16px; font-size: 15px; line-height: 1.6; color: var(--ds-color-ink-soft); word-break: keep-all; }
.r-acc-row { border: var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-color-paper); overflow: hidden; }
.r-acc-btn { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 14px 16px; border: 0; background: none; font-family: inherit; cursor: pointer; text-align: left; }
.r-acc-btn:active { background: var(--ds-color-subtle); }
.r-acc-chev { font-size: 18px; font-weight: 800; color: var(--ds-color-muted); transition: transform 0.25s ease; }
.r-acc-btn[aria-expanded="true"] .r-acc-chev { transform: rotate(180deg); }
.r-step-num { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: #fff; background: var(--ds-color-navy); transition: background 0.2s ease; }
.r-acc-btn[aria-expanded="true"] .r-step-num { background: var(--ds-color-accent); }

/* 퀴즈 옵션 버튼 */
.r-quiz-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 14px 18px; border: var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-color-paper); font-family: inherit; font-size: 17px; font-weight: 600; color: var(--ds-color-ink); text-align: left; cursor: pointer; transition: transform 0.12s ease, border-color 0.12s ease; }
.r-quiz-opt:hover { border-color: var(--ds-color-accent); }
.r-quiz-opt:active { transform: scale(0.97); border-color: var(--ds-color-accent); }
.r-quiz-opt span:last-child { color: var(--ds-color-accent-strong); font-weight: 800; }

/* 카톡식 챗 */
.r-chat-chip { min-height: 44px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--ds-color-accent); background: var(--ds-color-paper); font-family: inherit; font-size: 14px; font-weight: 700; color: var(--ds-color-accent-strong); cursor: pointer; transition: transform 0.12s ease; }
.r-chat-chip:active { transform: scale(0.95); }
.r-chat-chip.is-asked { border: var(--ds-border); color: var(--ds-color-muted); cursor: default; opacity: 0.45; }
.r-chat-bubble { max-width: 82%; padding: 10px 14px; font-size: 15px; line-height: 1.55; word-break: keep-all; }
.r-chat-bubble--bot { border-radius: 4px 16px 16px 16px; background: var(--ds-color-paper); color: var(--ds-color-ink); border: var(--ds-border); }
.r-chat-bubble--user { border-radius: 16px 4px 16px 16px; background: var(--ds-color-accent); color: #fff; }
@keyframes ds-typing-dot { 0%, 60%, 100% { opacity: 0.25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.r-typing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ds-color-muted); animation: ds-typing-dot 1s infinite; }

/* 토글 표시/숨김 */
.r-hidden { display: none !important; }