@import url("../renewal-tokens.css?v=20260902d");
/* ═══════════════════════════════════════════════════════════════
   PropVis 디자인 리뉴얼 — 내 정보(profile.html) 전용
   프로토타입 #page-profile (docs/design/prototype-toss-interactive-2026-07-28.html
   1568~1632줄) 카드 언어 복제. 공유 renewal.css는 수정하지 않고
   .rn-profile 스코프로 페이지 전용 정의만 둔다.
   팝업(dialog)은 DOM 불변 — 하단의 ID 스코프 재도색만.
   ═══════════════════════════════════════════════════════════════ */

/* .rn 의 margin:0 리셋이 .main-box(margin-left/margin-top)를 덮으므로 재선언
   (renewal.css .rn-dash 블록과 동일 패턴) */
.rn.rn-profile { min-height: calc(100vh - 60px); padding: 24px 0 60px; margin-left: 260px; margin-top: 60px; }
.navbar-container.close + .rn.rn-profile { margin-left: 68px; }
@media screen and (max-width: 1760px) {
  .rn.rn-profile { margin-left: 220px; }
}
/* 우측 여백 = FAB 안전영역(--rn-fab-safe 88px, chat-widget.css). 우측 열 카드(구독 정보 카드의 [구독 해지]·
   결제 정보 값 등 카드 우측 끝 요소)가 스크롤 위치에 따라 FAB(뷰포트 우측 24~80px)에 덮였다.
   콘텐츠 우측 끝을 88px 에 두면 폭(1600/1280/1024)과 무관하게 겹침 0 (2026-09-01 R14). */
.rn-profile .prf-content { width: 100%; margin: 0 auto; padding: 4px var(--rn-fab-safe, 88px) 0 28px; }

/* ─ 헤드 ─ */
.rn-profile .head { display: flex; align-items: flex-start; justify-content: space-between; margin: 6px 0 12px; gap: 12px; flex-wrap: wrap; }
.rn-profile .head h3 { font-size: 22px; font-weight: 800; letter-spacing: -.025em; margin: 0; line-height: 1.3; color: var(--rn-text); }
.rn-profile .hsub { font-size: 14px; font-weight: 500; color: var(--rn-text-sub); margin-top: 6px; }

/* ─ 카드 공통 (프로토타입 .card) ─ */
.rn-profile .card {
  background: var(--rn-card-bg); border: 1px solid var(--rn-border); border-radius: 12px;
  box-shadow: 0 1px 4px rgba(34, 30, 28, .04); padding: 16px 20px; min-width: 0;
}
.rn-profile .card._listy { padding: 6px 8px 8px; }

/* ─ ① 계정 아이덴티티 카드 ─ */
.rn-profile .idcard { display: flex; flex-direction: row; align-items: center; gap: 16px; margin: 10px 0 14px; flex-wrap: wrap; }
.rn-profile .idava {
  width: 52px; height: 52px; border-radius: 12px; font-size: 20px; font-weight: 800;
  background: var(--rn-brand-soft); color: var(--rn-brand);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rn-profile .idmain { flex: 1; min-width: 160px; }
.rn-profile .idname { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.rn-profile .idsub { font-size: 12.5px; color: var(--rn-text-dim); margin-top: 2px; }

/* ─ 2열 스택 (프로토타입 .cols) ─ */
.rn-profile .cols { display: flex; gap: 14px; align-items: stretch; }
.rn-profile .cols > * { min-width: 0; }
.rn-profile .colstack { flex: 1; display: flex; flex-direction: column; gap: 13px; min-width: 0; }

/* ─ 리스트 카드 내부 (프로토타입 .lsec / .lrow / .lmain / .lright) ─ */
.rn-profile .lsec {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12.5px; font-weight: 750; color: var(--rn-text-dim); padding: 12px 14px 5px;
}
.rn-profile .lsec .lsec-acts { display: inline-flex; align-items: center; gap: 6px; }
/* 정보 표시 행 — 클릭 요소가 아니므로 pointer/hover 없음 (2026-07-29 커서 규칙) */
.rn-profile .lrow { display: flex; align-items: center; gap: 13px; padding: 9px 14px; border-radius: 10px; }
.rn-profile .lico {
  width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; font-size: 12.5px; font-weight: 800; flex-shrink: 0;
}
.rn-profile .lico._w { background: var(--rn-brand-soft); color: var(--rn-brand); }
.rn-profile .lico._n { background: var(--rn-grey); color: var(--rn-text-dim); }
.rn-profile .lmain { flex: 1; min-width: 0; }
.rn-profile .lmain b { display: block; font-size: 14px; font-weight: 750; letter-spacing: -.015em; }
/* 직계 자식만 — b 안의 .chip 이 블록으로 늘어나지 않게 (프로토타입 주석 준수) */
.rn-profile .lmain > span { font-size: 11.5px; color: var(--rn-text-dim); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rn-profile .lright { text-align: right; min-width: 0; }
.rn-profile .lright .lval {
  display: block; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px;
}

/* ─ 칩 (프로토타입 .chip) ─ */
.rn-profile .chip {
  display: inline-block; font-size: 10.5px; font-weight: 700; border-radius: 6px;
  padding: 2px 8px; background: var(--rn-grey); color: var(--rn-text-sub); vertical-align: middle;
}
.rn-profile .chip._w { background: var(--rn-brand-soft); color: var(--rn-brand); }

/* ─ 버튼 변형 (renewal.css .btn 위에 페이지 보조 변형만 추가) ─ */
/* 소형 버튼은 한 규격 — 같은 행(.lsec-acts)·같은 모달에서 .btn._sm(33px·r8·12.5px)과 .mbtn(28px·r10·11.5px)이
   나란히 놓여 두 벌로 보였다(g1 🟡 Y3). 프로토타입 .mbtn 규격으로 통일 */
.rn-profile .btn._sm { padding: 6px 13px; font-size: 11.5px; font-weight: 750; border-radius: 10px; }
.rn-profile .btn._line { background: var(--rn-brand-faint); color: var(--rn-brand); border: 1px solid var(--rn-brand-border); }
.rn-profile .btn._line:hover { background: var(--rn-brand-soft); color: var(--rn-brand); }

/* 행 안 소형 버튼 (프로토타입 .mbtn) — renewal-skin 전역 button 규칙 위에 재정의 */
.rn-profile .mbtn {
  display: inline-flex; align-items: center; border: 1px solid var(--rn-input-border);
  background: var(--rn-card-bg); border-radius: 10px; padding: 6px 13px; font-size: 11.5px;
  font-weight: 750; color: var(--rn-grey-text); cursor: pointer; white-space: nowrap; font-family: inherit;
}
.rn-profile .mbtn:hover { background: var(--rn-card-bg); color: var(--rn-grey-text); border-color: var(--rn-border-hover); }
.rn-profile .mbtn._danger { border-color: var(--rn-brand-border); color: var(--rn-st-unmatched); background: var(--rn-danger-faint); }
.rn-profile .mbtn._danger:hover { background: var(--rn-st-unmatched); color: #fff; border-color: var(--rn-st-unmatched); }

/* ─ 공동인증서 만료 태그 (#expireDate — 클릭 가능 요소라 pointer 유지) ─ */
.rn-profile .prf-certtag {
  display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--rn-st-wait);
  background: var(--rn-st-wait-soft); border-radius: 6px; padding: 3px 9px; cursor: pointer; white-space: nowrap;
}

/* ─ 회원탈퇴 (하단 조용한 위험 버튼 — hiddenContent 로 비대표에겐 계속 숨김) ─ */
/* ⚠️ 우측 정렬이라 채팅 FAB(우측 24px + 56px)와 정확히 겹쳐 클릭이 아예 안 됐다(2026-08-24 검수).
   안전영역은 이제 .prf-content 의 우측 padding 이 페이지 전체에 확보하므로 여기서 또 띄우지 않는다(이중 176px 방지). */
.rn-profile .prf-danger { display: flex; justify-content: flex-end; margin-top: 16px; }
.rn-profile .prf-leave {
  border: none; background: none; font-size: 12.5px; font-weight: 700;
  color: var(--rn-text-dim); cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; padding: 6px 8px; font-family: inherit;
}
.rn-profile .prf-leave:hover { background: none; color: var(--rn-st-unmatched); }

/* 좁은 화면: 2열 → 1열 */
@media screen and (max-width: 1279px) {
  .rn-profile .cols { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════
   팝업 라이트 재도색 — 이 페이지 전용 dialog ID 스코프.
   DOM(id/class/트리거/필드)은 그대로 두고 라운드·보더·타이틀 톤만 A안으로.
   (#userInfoDialog·#cancelSubscriptionDialog 는 7/27에 이미 신규 톤 —
    공통 셸 정리만 함께 적용)
   ═══════════════════════════════════════════════════════════════ */
/* 팝업 셸(라운드·보더·백드롭·타이틀)은 renewal-skin.css 공통이 담당한다.
   여기에는 이 화면 고유 규칙만 남긴다. */
/* 결제 내역 팝업의 구식 인주색 hr — 인라인 스타일이라 !important 필요 (시각만) */
#payHistoryDialog hr { border: none !important; border-top: 1px solid var(--rn-border) !important; }
#payHistoryDialog { min-height: auto; }
/* '무료 결제 종료일:' 라벨 — 날짜를 채우는 JS가 없는 데드 라벨이 하단 고정 버튼과 겹쳐
   보이던 결함(2026-08-10 팝업 점검 발견). 주입 로직이 생기면 이 규칙을 제거할 것 */
#payHistoryDialog #freeTrialEndDate { display: none; }

/* ═══════════════════════════════════════════════════════════════
   입금 계좌 등록 팝업(#accountDialog) 토스 전면 재설계 (2026-08-12)
   DOM 계약(id·row 표시 토글 display:flex)은 profile.html JS 그대로 —
   style.css 레거시(라벨 좌측 110px 행 배치)를 상단 라벨 구조로 덮는다.
   보안 필드(계좌번호·비밀번호)는 잠금 실(seal)+종이톤 배경으로 '보호된 입력' 신호.
   ═══════════════════════════════════════════════════════════════ */
#accountDialog[open] {
  width: 560px; max-width: 92vw;
  /* .df-popup[open]의 top:50%+transform 센터링 해크는 fixed+auto 높이를
     뷰포트 하단 절반에 가둔다(가용높이 = 100vh - top). 그 탓에 폼이 늘 스크롤로 잘렸다.
     dialog 기본 방식(inset:0 + margin:auto + fit-content)으로 중앙정렬을 되돌린다. */
  top: 0; left: 0; transform: none; margin: auto;
  height: fit-content;
  max-height: 86vh; min-height: 0;
  padding: 26px 28px 24px;
}
/* style.css 의 #registerForm flex:1(=basis 0)은 다이얼로그 본질 높이 계산에서 폼을 0으로
   잡는다 → 내용 크기 기준으로 되돌린다(86vh 초과분만 폼 내부 스크롤). */
#accountDialog[open] #registerForm { flex: 1 1 auto; }
#accountDialog .popup-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 18px;
}
#accountDialog .acc-sub { font-size: 12.5px; color: var(--rn-text-dim); margin-top: 5px; }

/* 폼 — 라벨 상단 배치 */
#accountDialog .account-popup-form { gap: 14px; }
#accountDialog .account-popup-form .field {
  flex-direction: column; align-items: stretch; gap: 6px;
}
#accountDialog .account-popup-form .field > label {
  width: auto; flex-shrink: 1;
  font-size: 11.5px; font-weight: 750; color: var(--rn-text-dim);
}
#accountDialog .account-popup-form .field-input { position: relative; }
#accountDialog .account-popup-form input,
#accountDialog .account-popup-form select {
  width: 100%; height: 44px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--rn-input-border); background: var(--rn-card-bg);
  font-size: 13.5px; color: var(--rn-text);
  transition: border-color .15s ease;
}
#accountDialog .account-popup-form input:focus,
#accountDialog .account-popup-form select:focus { border-color: var(--rn-brand); outline: none; }
/* select 네이티브 화살표 잔존 — 직원관리 표 select 규격의 셰브론으로 통일 (2026-09-02 M10) */
#accountDialog .account-popup-form select {
  appearance: none; -webkit-appearance: none;
  padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23837D76' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}
#accountDialog .account-popup-form input::placeholder { color: var(--rn-text-faint); }

/* 계좌번호 — 일반 입력 + blur 시 가운데 * 마스킹 표시. 자릿수가 또렷하게 */
#accountDialog #bankAccountNum { font-variant-numeric: tabular-nums; letter-spacing: .5px; }

/* 보안 필드 — 보안 키패드 전용(스크립트가 readonly 처리). 차콜 잠금 실 + 종이톤 배경 */
#accountDialog .acc-secure input {
  background: var(--rn-bg); padding-right: 40px; cursor: pointer;
}
#accountDialog .acc-secure input:hover { border-color: var(--rn-brand); }
#accountDialog .acc-seal {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 17px; color: #3A4149; pointer-events: none;
}
/* 케이뱅크 경고 — 우측정렬 빨강 소문구 → 경고 칩 */
#accountDialog .bank-warning-text {
  text-align: left; margin-top: 0; padding: 8px 12px; width: 100%;
  background: #FCF3F0; border-radius: 8px;
  color: var(--rn-st-unmatched); font-size: 11.5px; font-weight: 600;
}

/* 빠른조회 도움말 아이콘 — 리뉴얼 보더 톤 */
#accountDialog .quickhelp-icon {
  border-color: var(--rn-border-strong); background: var(--rn-card-bg); color: var(--rn-text-dim);
}

/* 빠른조회 아이디 표시 토글(눈) — 입력칸 우측 안쪽 */
#accountDialog .acc-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: none; background: none; padding: 4px; cursor: pointer;
  font-size: 19px; color: var(--rn-text-faint); line-height: 1;
}
#accountDialog .acc-eye:hover { color: var(--rn-grey-text); }
#accountDialog #webId { padding-right: 40px; }

/* 하단 보안 안내 — 노트 카드 (style.css 의 border-top 텍스트 블록을 대체) */
#accountDialog .account-security-note {
  display: flex; gap: 10px; align-items: flex-start;
  border-top: none; margin-top: 16px; padding: 12px 14px;
  background: var(--rn-bg); border-radius: 12px;
  font-size: 11.5px; color: var(--rn-text-dim); line-height: 1.6;
}
#accountDialog .account-security-note b { color: var(--rn-grey-text); }
#accountDialog .acc-note-ico { font-size: 18px; color: var(--rn-st-done); margin-top: 1px; }

/* CTA — 전체폭 브랜드 버튼.
   style.css .df-popup .btn-group 이 position:absolute(bottom 고정)라 폼과 겹침 → 문서 흐름으로 복귀 */
#accountDialog .btn-group {
  position: static; width: 100%; left: auto; bottom: auto; margin-top: 14px;
}
#accountDialog .acc-cta {
  width: 100%; height: 46px; border: none; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--rn-brand); color: #fff; font-size: 14px; font-weight: 750;
  cursor: pointer; transition: background .15s ease; font-family: inherit;
}
#accountDialog .acc-cta:hover { background: var(--rn-brand-hover); }
#accountDialog .acc-cta .material-symbols-outlined { font-size: 17px; }

/* 좁은 화면: 2열 → 1열 */
@media screen and (max-width: 560px) {
  #accountDialog .account-popup-form .row-two-col { flex-direction: column; gap: 14px; }
}

/* ═══════════════════════════════════════════════════════════════
   계정 정보 수정 팝업(#userInfoDialog) — profile.html 인라인 <style> 에서 이관 (2026-09-01 R9)
   레거시 팔레트(제목 #000·섹션 #222·라벨 #888·보더 #eee/#f4f1f0/#e5dddd)와
   '구독 결제 취소' 의 control.css _redLine(#D61919/#FFF3F3)을 토큰으로 치환.
   dialog 는 body 직계(.rn-profile 밖)라 ID 스코프로 둔다.
   ═══════════════════════════════════════════════════════════════ */
#userInfoDialog { min-height: auto; width: 560px; color: var(--rn-text); }
#userInfoDialog .btn-group { position: static; width: 100%; left: auto; bottom: auto; margin-top: 28px; }
#userInfoDialog .popupTitle { margin-bottom: 6px; }
#userInfoDialog .uip-sub { font-size: 13px; color: var(--rn-text-dim); margin-bottom: 22px; }
#userInfoDialog .uip-sec-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 750; color: var(--rn-text); margin: 22px 0 10px;
}
#userInfoDialog .uip-sec-title::before { content: ''; width: 3px; height: 14px; background: var(--rn-brand); border-radius: 2px; }
#userInfoDialog .uip-card { border: 1px solid var(--rn-border); border-radius: 12px; background: #fff; overflow: hidden; }
#userInfoDialog .uip-row { display: flex; align-items: center; padding: 11px 20px; }
#userInfoDialog .uip-row:not(:first-child),
#userInfoDialog .uip-row._sep,
#userInfoDialog .uip-toggle._sep { border-top: 1px solid var(--rn-border-soft); }
#userInfoDialog .uip-label { width: 110px; flex-shrink: 0; color: var(--rn-text-dim); font-size: 13.5px; }
#userInfoDialog .uip-row input:not([type="checkbox"]) { flex: 1; font-size: 13.5px; height: 38px; }
#userInfoDialog .uip-toggle {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  padding: 13px 20px; background: #fff; border-radius: 0;
  font-size: 14px; font-weight: 750; color: var(--rn-text); cursor: pointer; text-align: left;
}
#userInfoDialog .uip-toggle:hover { background: var(--rn-bg); color: var(--rn-text); }
#userInfoDialog .uip-toggle .material-symbols-outlined { font-size: 20px; color: var(--rn-text-dim); transition: transform .3s; }
#userInfoDialog .uip-collapse { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
#userInfoDialog .uip-check { display: flex; align-items: center; cursor: pointer; color: var(--rn-text); font-size: 13.5px; }
#userInfoDialog .uip-note { font-size: 12px; color: var(--rn-text-dim); line-height: 1.6; padding: 10px 20px 14px; }
#userInfoDialog .uip-danger {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 24px; padding-top: 16px; border-top: 1px dashed var(--rn-border-strong);
  font-size: 13px; color: var(--rn-text-dim);
}
/* 구독 결제 취소 — 소형 위험 버튼(.mbtn._danger 와 같은 규격) */
#userInfoDialog .uip-cancel-btn {
  display: inline-flex; align-items: center; white-space: nowrap; font-family: inherit;
  border: 1px solid var(--rn-brand-border); background: var(--rn-danger-faint); color: var(--rn-st-unmatched);
  border-radius: 10px; padding: 6px 13px; font-size: 11.5px; font-weight: 750; cursor: pointer;
}
#userInfoDialog .uip-cancel-btn:hover { background: var(--rn-st-unmatched); color: #fff; border-color: var(--rn-st-unmatched); }

/* 결제 내역 팝업 안내문 (인라인 color:#555 → 토큰) */
#payHistoryDialog .prf-pay-note { text-align: center; margin: 10px 0; font-size: 13.5px; color: var(--rn-grey-text); }

/* ═══════════════════════════════════════════════════════════════
   해지 신청 사유 모달(.prf-modal) · 구독 취소 위저드(.cw-*) — profile.html 인라인 <style> 에서 이관
   한색 리터럴(rgba(15,20,20,.42)·#5C6A69·#14201F·#8A9997·#DCE3E2·#A9560F)을 토큰으로,
   셸은 공통 규격(오버레이 rgba(34,30,28,.4)·r16·보더·그림자)으로 (g1 🟡 Y1)
   ═══════════════════════════════════════════════════════════════ */
.prf-modal { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; }
.prf-modal-dim { position: absolute; inset: 0; background: rgba(34, 30, 28, .4); }
.prf-modal-box {
  position: relative; width: min(480px, calc(100vw - 32px));
  background: #fff; border: 1px solid var(--rn-border); border-radius: 16px; padding: 24px 24px 20px;
  box-shadow: 0 20px 54px rgba(34, 30, 28, .24); color: var(--rn-text);
}
.prf-modal-box h3 { margin: 0 0 8px; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.prf-modal-desc { margin: 0 0 16px; font-size: 13px; line-height: 1.7; color: var(--rn-grey-text); }
.prf-modal-desc b { color: var(--rn-text); font-weight: 700; }
.prf-modal-label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.prf-modal-optional { font-weight: 500; font-size: 11.5px; color: var(--rn-text-dim); margin-left: 4px; }
#cancelReasonText {
  width: 100%; box-sizing: border-box; resize: vertical;
  border: 1px solid var(--rn-input-border); border-radius: 10px; padding: 11px 13px;
  font: inherit; font-size: 13.5px; line-height: 1.65; color: var(--rn-text); outline: none;
}
#cancelReasonText:focus { border-color: var(--rn-brand); }
.prf-modal-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
/* 해지 신청 접수 상태 배지 */
.prf-sub-pending { color: var(--rn-st-wait); font-weight: 700; }

#cancelSubscriptionDialog { max-width: 520px; }
.cw-viewport { overflow: hidden; }
.cw-track { display: flex; width: 400%; transition: transform .38s cubic-bezier(.4, 0, .2, 1); }
@media (prefers-reduced-motion: reduce) { .cw-track { transition: none; } }
.cw-step { flex: 0 0 25%; width: 25%; padding: 10px 6px 0; box-sizing: border-box; }
.cw-step-icon { font-size: 42px; color: var(--rn-brand); display: block; text-align: center; margin-bottom: 10px; }
.cw-step-icon._done { color: var(--rn-st-done); }
.cw-step h4 { font-size: 17px; font-weight: 750; text-align: center; margin-bottom: 8px; }
.cw-desc { font-size: 13.5px; color: var(--rn-text-sub); text-align: center; line-height: 1.7; margin-bottom: 14px; }
.cw-box { border: 1px solid var(--rn-border); background: var(--rn-bg); border-radius: 12px; padding: 14px 16px; font-size: 13.5px; line-height: 1.7; }
.cw-check { display: flex; align-items: center; justify-content: center; cursor: pointer; margin-top: 12px; font-size: 14px; }
/* 취소 확정 전 환불정책 열람 경로 (PG 심사 요건) */
.cw-policy-link { display: block; text-align: center; margin-top: 10px; font-size: 13px; color: var(--rn-brand); text-decoration: underline; }
.cw-policy-link:hover { color: var(--rn-brand-hover); }
/* 구독 영역 아래 환불정책 링크 — 결제 정보 옆 열람 경로 */
.card-policy-link { display: inline-block; margin-top: 10px; font-size: 12.5px; color: var(--rn-brand); text-decoration: underline; }
.card-policy-link:hover { color: var(--rn-brand-hover); }
.cw-pw { display: block; width: 80%; margin: 0 auto; }
.cw-dots { display: flex; justify-content: center; align-items: center; gap: 7px; margin: 20px 0 2px; }
.cw-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--rn-border-strong); transition: all .3s ease; }
.cw-dot._active { width: 22px; background: var(--rn-brand); }
.cw-dot._done { background: var(--rn-brand-border); }