/*!
 * 온도(ONDO) W1 앱 전용 스타일 — 업로드/로딩/모달 화면
 * 디자인 시스템 v1.2 §7(로딩=게이지 카운트업), §8(마이크로 인터랙션 200ms 이내) 준수
 */

/* ---------- 업로드 화면 ---------- */
.ondo-upload-screen { padding: 8px 18px 40px; }
.ondo-upload-hero { text-align: center; padding: 28px 10px 18px; }
.ondo-upload-hero h1 { font-size: 26px; font-weight: 800; letter-spacing: -.5px; line-height: 1.3; text-wrap: balance; margin: 0; } /* PC 기준 고정(모바일 vw 축소 방지 — 일관성) */
.ondo-upload-hero p { margin-top: 10px; font-size: 13px; color: var(--ink-2); line-height: 1.7; }

.ondo-dropzone {
  display: block; /* label 기본 inline → 블록 자식이 배경·점선을 쪼개던 렌더 버그 수정 */
  margin-top: 18px; border: 2px dashed var(--line); border-radius: 20px; background: var(--surface);
  padding: 32px 20px; text-align: center; cursor: pointer; transition: border-color .18s ease, background .18s ease;
}
.ondo-dropzone:hover, .ondo-dropzone.drag-over { border-color: var(--coral); background: #FFF6F0; }
.ondo-dropzone .icon { font-size: 32px; }
.ondo-dropzone .main { margin-top: 10px; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.ondo-dropzone .sub { margin-top: 4px; font-size: 12px; color: var(--ink-3); }
.ondo-dropzone input[type="file"] { display: none; }

.ondo-guide-steps {
  display: flex; flex-direction: column; gap: 8px; margin-top: 16px;
}
.ondo-guide-step {
  display: flex; gap: 10px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 14px; font-size: 12.5px; color: var(--ink-2); line-height: 1.55;
}
.ondo-guide-step .n {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--ink);
  color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.ondo-guide-step b { color: var(--ink); }

.ondo-input-row { margin-top: 16px; }
.ondo-input-row label { font-size: 12.5px; color: var(--ink-2); font-weight: 600; display: block; margin-bottom: 6px; }
.ondo-input-row input[type="text"] {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; font-size: 14px;
  background: var(--surface); color: var(--ink); font-family: inherit;
}

.ondo-primary-btn {
  display: block; width: 100%; text-align: center; background: var(--cta-bg); color: #fff;
  font-size: 15px; font-weight: 800; padding: 16px; border-radius: 16px; border: none; margin-top: 16px;
  cursor: pointer; min-height: 51px; box-shadow: 0 8px 20px rgba(208, 64, 45, .3);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ondo-primary-btn .sub2 { display:block; margin-top:3px; font-size:11px; font-weight:600; opacity:.85; }
.ondo-primary-btn:disabled { background: #D8D4CC; box-shadow: none; cursor: not-allowed; }
.ondo-primary-btn:not(:disabled):hover { transform: translateY(-2px); }

/* ---------- "재는 중" 로딩 (링 게이지 카운트업 — 유일하게 허용된 장식 모션) ---------- */
.ondo-loading-screen {
  min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 20px; text-align: center;
}
.ondo-loading-ring { position: relative; width: 150px; height: 150px; }
.ondo-loading-ring svg { transform: rotate(-90deg); }
.ondo-loading-ring .fill {
  stroke-dasharray: 408; stroke-dashoffset: 408;
  animation: ondo-gauge-fill 2.4s ease forwards infinite;
}
@keyframes ondo-gauge-fill {
  0% { stroke-dashoffset: 408; }
  70% { stroke-dashoffset: 60; }
  100% { stroke-dashoffset: 408; }
}
.ondo-loading-ring .label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: var(--ink-2);
}
/* 대기 UX v2(2026-07-27) — 단계 문구를 상황 안내의 주인공으로 강조(색·크기), 부가 정보는 톤 다운 */
.ondo-loading-text { margin-top: 20px; font-size: 17px; color: #C2452F; font-weight: 800; letter-spacing: -0.2px; text-align: center; padding: 0 22px; word-break: keep-all; }
.ondo-loading-sub { margin-top: 6px; font-size: 12px; color: var(--ink-3); }
/* '관계 한 줄' 로테이션 카드 — 장기 대기(3분+) 이탈 방지 */
.ondo-loading-quote { margin: 26px 22px 0; max-width: 330px; background: #FBF7F0; border: 1px solid #EFE7DA; border-radius: 14px; padding: 14px 18px; text-align: center; opacity: 1; transition: opacity .4s ease; }
.ondo-loading-quote.fade { opacity: 0; }
.ondo-loading-quote .q-label { display: block; font-size: 10.5px; font-weight: 700; color: #B9AE9E; letter-spacing: .12em; margin-bottom: 7px; }
.ondo-loading-quote .q-text { display: block; font-size: 13.5px; line-height: 1.7; color: #6B6257; word-break: keep-all; }
/* 리포트 저장(PDF) 버튼 — 인쇄 시엔 full-report.css @media print에서 제외 */
.ondo-save-row { margin: 26px 22px 0; text-align: center; }
.ondo-save-btn { display: inline-block; background: #fff; border: 1.5px solid #E3D9CB; border-radius: 12px; padding: 12px 22px; font-size: 14px; font-weight: 700; color: #4A4237; cursor: pointer; font-family: inherit; }
.ondo-save-hint { margin-top: 8px; font-size: 11.5px; color: #B9AE9E; }
/* 상용 전 정리 v1 스코프 B — 안심 요소(결제 유효·재열람 가능). 숫자·%는 넣지 않는다(가드레일). */
.ondo-loading-reassure {
  margin-top: 16px; font-size: 11.5px; color: var(--ink-3); line-height: 1.6;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 14px;
  max-width: 280px;
}

/* ---------- 관계유형 확인 모달 (가드레일 5) ---------- */
.ondo-modal-backdrop {
  position: fixed; inset: 0; background: rgba(30, 34, 48, .5); display: flex; align-items: flex-end;
  justify-content: center; z-index: 100;
}
.ondo-modal {
  background: var(--surface); border-radius: 24px 24px 0 0; padding: 24px 22px 28px; width: 100%;
  max-width: 480px; box-shadow: 0 -10px 40px rgba(0, 0, 0, .15);
}
.ondo-modal h3 { font-size: 17px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.3px; }
.ondo-modal p { font-size: 12.5px; color: var(--ink-3); margin: 0 0 16px; line-height: 1.6; }
.ondo-modal-options { display: flex; flex-direction: column; gap: 8px; }
.ondo-modal-opt {
  display: block; width: 100%; text-align: left; padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--surface); font-size: 14px; font-weight: 700;
  color: var(--ink); cursor: pointer; transition: border-color .18s ease, background .18s ease;
}
.ondo-modal-opt:hover { border-color: var(--coral); background: #FFF6F0; }

/* 재미 존 카드(테이서 1층 3종) — 인사이트 칩 재사용 + 살짝 다른 배경으로만 구분 */
.ondo-fun-chip { background: #FBFAF8; }

@media (max-width: 380px) {
  .ondo-ring-wrap { width: 165px; height: 165px; }
}

/* ============ v0.3 개편: 입력 탭 · 결과 예시 모달 · 결제 화면 ============ */

/* 예시 먼저 보기 */
.ondo-sample-peek { display:inline-block; margin-top:14px; font-size:12.5px; font-weight:700; color:var(--coral-text);
  background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:9px 16px; cursor:pointer; font-family:inherit; }
.ondo-sample-peek:hover { border-color:var(--coral-text); }

/* 입력 탭(TXT/캡처) */
.ondo-intab { display:flex; gap:6px; background:#EFEBE5; border-radius:14px; padding:5px; margin-top:20px; }
.ondo-intab-btn { flex:1; text-align:center; padding:11px 6px; border-radius:10px; font-size:13px; font-weight:700;
  color:var(--ink-3); background:transparent; border:none; cursor:pointer; font-family:inherit; }
.ondo-intab-btn.active { background:var(--surface); color:var(--ink); box-shadow:0 2px 8px rgba(30,34,48,.08); }
.ondo-intab-btn .reco { display:inline-block; margin-left:5px; background:var(--cta-bg); color:#fff; font-size:9px;
  font-weight:800; padding:2px 6px; border-radius:999px; vertical-align:middle; }
.ondo-tab-why { margin-top:12px; text-align:center; font-size:12px; color:var(--coral-text); font-weight:700; }
.ondo-tab-why.gray { color:var(--ink-3); font-weight:600; }

/* 캡처 탭 — 제자리 전환 콘텐츠(목업 ②) */
.ondo-dropzone.cap { background:#FBFAF8; }
.ondo-cap-note { margin-top:14px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.ondo-cap-note .h { font-size:12px; font-weight:800; color:var(--coral-text); margin-bottom:5px; }
.ondo-cap-note .t { font-size:11.5px; color:var(--ink-2); line-height:1.6; }
.ondo-cap-note .t b { color:var(--ink); }
.ondo-cap-switch { display:block; margin:14px auto 0; background:none; border:none; color:var(--ink-3); font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit; }
.ondo-cap-used { margin-top:16px; text-align:center; font-size:13px; font-weight:600; color:var(--ink-2);
  background:#FBF3F1; border:1px solid #F3D9D3; border-radius:12px; padding:12px 14px; }
.ondo-cap-used b { color:var(--coral-text); font-weight:800; }

/* 탭 하단 크로스링크(목업 .fine) — TXT↔캡처 상호 이동 */
.ondo-fine { margin-top:16px; text-align:center; font-size:11.5px; color:var(--ink-3); line-height:1.6; }
.ondo-fine-link { background:none; border:none; padding:0; font-family:inherit; cursor:pointer;
  color:var(--coral-text); font-weight:700; text-decoration:underline; font-size:11.5px; }

/* ============ 캡처 온램프 v1 — 관찰 카드(정성) + OS별 다음 스텝 ============
   층 분리 원칙: 이 화면엔 숫자·게이지·온도° UI가 없어야 정상(정량은 txt 리포트의 영역). */
.ondo-obs-loading { margin-top:22px; text-align:center; font-size:13px; font-weight:600; color:var(--ink-2); line-height:1.7; }
.ondo-obs-loading small { font-size:11px; font-weight:500; color:var(--ink-3); }
.ondo-obs-head { margin-top:16px; font-size:17px; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
.ondo-obs-sub { margin-top:4px; font-size:11.5px; color:var(--ink-3); }
.ondo-obs-card { margin-top:10px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 15px; }
.ondo-obs-card .t { font-size:13.5px; font-weight:800; color:var(--coral-text); }
.ondo-obs-card .b { margin-top:6px; font-size:12.5px; color:var(--ink-2); line-height:1.7; }
.ondo-obs-card .ev { margin-top:8px; display:inline-block; font-size:11px; color:var(--ink-3);
  background:#F4F2EE; border-radius:8px; padding:4px 9px; }
/* 층 분리 카피(하드코딩 고정 문구) — 위계 수술 2026-08-14e: 코럴 박스 → CTA 아래 각주.
   문구 자체는 가드레일이라 보존하고 크기·위치만 내렸다. 그 자리는 개인화된 갈증 문장이 쓴다. */
.ondo-obs-layer { margin-top:12px; font-size:11px; font-weight:500; color:var(--ink-3);
  line-height:1.6; text-align:center; }
.ondo-obs-hint { margin-top:8px; font-size:11.5px; color:var(--ink-3); line-height:1.6; }
.ondo-obs-more { display:block; width:100%; margin-top:10px; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:12px; font-size:12.5px; font-weight:700; color:var(--ink-2); cursor:pointer; font-family:inherit; }
.ondo-obs-more.sub { margin-top:8px; }
.ondo-obs-guide-btn { display:block; width:100%; margin-top:10px; background:#F2FAF6; border:1px solid #CDE9DA;
  border-radius:12px; padding:12px; font-size:12.5px; font-weight:800; color:var(--land-green); cursor:pointer; font-family:inherit; }
.ondo-obs-guide { margin-top:10px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.ondo-obs-guide[hidden] { display:none; } /* author display가 UA [hidden]을 이기는 문제 방지(운영 학습) */
/* 잠금 미리보기 — 캡처 결과의 전환 브릿지("전체 대화가 여는 것") */
.ondo-obs-locked { margin-top:14px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:13px 15px; }
.ondo-obs-locked .hd { font-size:12px; font-weight:800; color:var(--ink); margin-bottom:8px; }
/* 갈증 문장 — 이 화면의 전환 레버. 카드 본문(12.5px)보다 크게 둬야 위계가 선다. */
.ondo-obs-locked .gaplabel { font-size:11px; color:var(--ink-3); }
.ondo-obs-locked .gaplabel.on { font-size:12px; font-weight:800; color:var(--coral-text); } /* 질문어 미매칭 시 착지점을 라벨로 */
.ondo-obs-locked .gaptext { margin-top:5px; font-size:14px; font-weight:700; color:var(--ink);
  line-height:1.55; min-height:43px; word-break:keep-all; overflow-wrap:break-word; }
.ondo-obs-locked .gaptext b { color:var(--coral-text); font-weight:800; }
.ondo-obs-locked .rows { margin-top:11px; padding-top:9px; border-top:1px solid var(--line); }
.ondo-obs-locked .rows .hd { font-size:11px; font-weight:700; color:var(--ink-3); margin-bottom:6px; }
.ondo-obs-locked .row { display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:7px 0; border-top:1px solid var(--line); font-size:12px; color:var(--ink-2); }
.ondo-obs-locked .row:first-of-type { border-top:none; }
.ondo-obs-locked .row .lk { color:var(--ink-3); font-size:11px; }

/* 아이폰 파일 찾기 팁(이탈 방지 — '최근 항목'에 안 뜨는 허들 제거) */
.ondo-ios-tip { margin-top:12px; background:#F2FAF6; border:1px solid #CDE9DA; border-radius:12px;
  padding:11px 13px; font-size:11.5px; color:var(--ink-2); line-height:1.65; }
.ondo-ios-tip b { color:var(--land-green); }

/* OS 안내 — 감지 OS 상세 카드 + 나머지 접힘(2026-07-26 실기기 확인 스텝) */
.ondo-os-guide { margin-top:16px; }
.ondo-os-head { font-size:11.5px; font-weight:700; color:var(--ink-3); margin-bottom:8px; text-align:center; }
.ondo-os-tip { margin-top:9px; font-size:11px; color:var(--ink-3); line-height:1.6; }
.ondo-os-acc { margin-top:8px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:0 14px; }
.ondo-os-acc summary .mine { margin-left:7px; font-size:10px; font-weight:800; color:var(--coral-text);
  background:#FBF3F1; border:1px solid #F3D9D3; border-radius:20px; padding:2px 8px; vertical-align:1px; }
.ondo-os-acc summary { list-style:none; cursor:pointer; padding:11px 0; font-size:12px; font-weight:700; color:var(--ink-2); }
.ondo-os-acc summary::-webkit-details-marker { display:none; }
.ondo-os-acc summary::after { content:"▾"; float:right; color:var(--ink-3); }
.ondo-os-acc[open] summary::after { content:"▴"; }
.ondo-os-acc .ondo-guide-steps { margin:2px 0 6px; }
.ondo-os-acc .ondo-os-tip { margin:0 0 11px; }
.ondo-os-pills { display:flex; gap:8px; }
.ondo-os-pill { flex:1; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:11px 12px; }
.ondo-os-pill .os { font-size:12px; font-weight:800; color:var(--ink); margin-bottom:5px; }
.ondo-os-pill .st { font-size:11px; color:var(--ink-2); line-height:1.55; }
.ondo-os-pill .st b { color:var(--ink); }

/* ============ 결과 예시 모달 (v0.4 — 실 리포트 5종) ============
   ⚠ .sx-notice(상시 고지 배너)는 표시광고 가드레일. 삭제·축소·색약화 금지. */
.sx-backdrop {
  position:fixed; inset:0; background:rgba(30,34,48,.55); z-index:110;
  display:flex; align-items:flex-end; justify-content:center;
}
.sx-modal {
  width:100%; max-width:430px; height:100dvh; background:var(--bg);
  display:flex; flex-direction:column; overflow:hidden;
}
@supports not (height: 100dvh) { .sx-modal { height:100vh; } }
@media (min-height:840px) and (min-width:460px) {
  .sx-backdrop { align-items:center; padding:22px; }
  .sx-modal { height:780px; border-radius:22px; box-shadow:0 18px 50px rgba(0,0,0,.22); }
}

.sx-bar { flex:0 0 auto; background:var(--surface); border-bottom:1px solid var(--line); }
.sx-bar-top { display:flex; align-items:center; justify-content:space-between; padding:13px 16px 11px; }
.sx-bar-top .t { font-size:15px; font-weight:800; color:var(--ink); letter-spacing:-.02em; }
.sx-bar-top .x { width:30px; height:30px; border:0; background:#F1EEE9; border-radius:50%;
  font-size:15px; color:var(--ink-2); cursor:pointer; line-height:1; font-family:inherit; }

/* 2026-08-14f: 제목 행을 흡수한 3열 구조(아이콘 / 텍스트 2줄 / 닫기).
   배경·글자크기·대비는 이전과 동일 — 가드레일의 '축소·색약화 금지'를 지킨다.
   align-items:flex-start 라야 두 줄이 아이콘 오른쪽 같은 x에서 시작한다. */
.sx-notice { display:flex; align-items:flex-start; gap:8px; background:#FFF6ED;
  border-top:1px solid #F6E2CC; border-bottom:1px solid #F6E2CC; padding:8px 16px;
  font-size:11.5px; color:#8A5A1E; font-weight:700; }
.sx-notice .ic { flex:0 0 auto; font-size:12px; line-height:1.5; }
.sx-notice .tx { flex:1 1 auto; line-height:1.5; word-break:keep-all; overflow-wrap:break-word; font-weight:500; }
.sx-notice .tx b { font-weight:800; }
/* 닫기 — 배너로 옮기며 작아진 것을 되돌린다. 원형 칩 + 세로 중앙 정렬로 눈에 걸리게.
   36px는 두 줄 배너 높이(약 44px) 안에서 최대한 키운 값이다. */
.sx-notice .x { flex:0 0 auto; align-self:center; width:36px; height:36px; margin:-2px -5px -2px 0;
  border:0; border-radius:50%; background:#F3E2CB; color:#8A5E2A;
  font-size:16px; line-height:1; cursor:pointer; font-family:inherit; }
.sx-notice .x:hover { background:#EBD5B6; }

.sx-tabs { display:flex; gap:6px; padding:8px 16px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.sx-tabs::-webkit-scrollbar { display:none; }
.sx-tab { flex:0 0 auto; border:1px solid var(--line); background:var(--surface); color:var(--ink-2);
  font-size:12.5px; font-weight:700; padding:8px 15px; border-radius:14px; cursor:pointer;
  font-family:inherit; letter-spacing:-.02em; }
.sx-tab.on { background:var(--ink); border-color:var(--ink); color:#fff; }

.sx-body { flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.sx-pane { display:none; }
.sx-pane.on { display:block; }
.sx-pane .ondo-app { min-height:0; max-width:none; padding-bottom:0; }
/* 예시 안에서는 외부 링크·픽셀 발화를 막는다(예시 클릭이 실퍼널 지표를 오염시키지 않도록) */
.sx-pane .ondo-kakao-cta a { pointer-events:none; }
/* 번들 예시 구분선 — 풀리포트 아래에 궁합 리포트를 이어 붙일 때만 삽입된다.
   ⚠️ 두 리포트가 한 스크롤에 붙어 있으므로 "여기부터 다른 상품"임이 시각적으로 끊겨야 한다. */
.sx-gdiv { background:var(--ink); color:#fff; padding:22px 22px 20px; text-align:center; }
.sx-gdiv .tag { display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:1.6px;
  color:#D9B36A; border:1px solid rgba(217,179,106,.45); border-radius:999px; padding:4px 11px; }
.sx-gdiv .h { font-size:17px; font-weight:800; letter-spacing:-.03em; margin-top:11px; }
.sx-gdiv .d { font-size:11.5px; color:rgba(255,255,255,.68); line-height:1.7; margin-top:7px; }
.sx-endnote { padding:16px 22px 22px; font-size:11px; color:var(--ink-3); line-height:1.7; text-align:center; }

.sx-foot { flex:0 0 auto; background:var(--surface); border-top:1px solid var(--line);
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:11px; }
.sx-foot .price { font-size:12px; color:var(--ink-3); font-weight:600; line-height:1.35; flex:0 0 auto; }
/* A 맥락(업로드 화면에서 열림) — CTA는 무료 업로드로 돌아가는 버튼이라 가격을 각주로 내린다. */
.sx-foot.col { display:block; }
.sx-foot.col .sx-cta { width:100%; }
.sx-foot .price.flat { display:block; margin-top:7px; text-align:center; font-size:11px; font-weight:500; }
.sx-cta .sub2 { display:block; margin-top:3px; font-size:11px; font-weight:600; opacity:.85; }
.sx-foot .price b { display:block; font-size:15px; color:var(--ink); font-weight:800; }
.sx-cta { flex:1 1 auto; background:var(--cta-bg); color:#fff; border:0; border-radius:14px;
  height:51px; font-size:14.5px; font-weight:800; font-family:inherit; letter-spacing:-.02em;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease;
  box-shadow:0 4px 14px rgba(208,64,45,.28); }
.sx-cta:hover { transform:translateY(-2px); box-shadow:0 7px 20px rgba(208,64,45,.34); }
.sx-cta:active { transform:none; }

/* 티저 잠금 목차 하단 — 예시 진입점 B */
.sx-peek { width:100%; margin-top:11px; background:var(--surface); border:1.5px solid var(--ink);
  color:var(--ink); border-radius:14px; min-height:48px; font-size:13.5px; font-weight:800;
  font-family:inherit; cursor:pointer; transition:transform .18s ease; }
.sx-peek:hover { transform:translateY(-2px); }
.sx-peek-note { text-align:center; font-size:11px; color:var(--ink-3); margin-top:8px; }

/* 결제 화면 v0.3 */
/* 좌우 여백은 이 래퍼 한 곳에서만 준다(디자인시스템 표준 22px). 내부 블록은 좌우 0을 유지할 것. */
.ondo-co-wrap { padding:0 22px; }
.ondo-co-nav { display:flex; align-items:center; justify-content:space-between; padding:10px 0 4px; }
.ondo-nav-btn { background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:7px 13px; font-size:12px; font-weight:700; color:var(--ink-2); cursor:pointer; font-family:inherit; }
.ondo-nav-btn:hover { border-color:#D8D3CB; }
.ondo-nav-spacer { width:58px; }
.ondo-co-head { padding:16px 0 4px; }
.ondo-co-head h1 { font-size:23px; font-weight:800; letter-spacing:-.5px; line-height:1.3; text-wrap:balance; margin:0; }
.ondo-reassure { margin-top:12px; display:flex; gap:8px; align-items:flex-start; background:var(--land-green-bg); border:1px solid #CDE9DB; border-radius:14px; padding:11px 13px; }
.ondo-reassure .ic { color:var(--land-green); font-size:14px; }
.ondo-reassure .tx { font-size:12px; color:var(--land-green); font-weight:600; line-height:1.6; }
.ondo-reassure .tx b { font-weight:800; }

.ondo-plan2-list { margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.ondo-plan2 { position:relative; background:var(--surface); border:1.5px solid var(--line); border-radius:18px; padding:16px; cursor:pointer; text-align:left; width:100%; font-family:inherit; transition:border-color .15s ease; }
.ondo-plan2.sel { border-color:var(--cta-bg); background:#FFF7F5; box-shadow:0 8px 22px rgba(208,64,45,.10); }
.ondo-plan2-badge { position:absolute; top:-9px; left:14px; background:var(--cta-bg); color:#fff; font-size:10.5px; font-weight:800; padding:3px 10px; border-radius:999px; }
.ondo-plan2-radio { position:absolute; top:16px; right:16px; width:20px; height:20px; border-radius:50%; border:2px solid #D8D3CB; }
.ondo-plan2.sel .ondo-plan2-radio { border-color:var(--cta-bg); background:var(--cta-bg) radial-gradient(circle,#fff 30%,transparent 32%); }
.ondo-plan2-row { display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding-right:26px; }
.ondo-plan2-row .nm { font-size:15.5px; font-weight:800; letter-spacing:-.3px; color:var(--ink); }
.ondo-plan2-row .pr { font-size:18px; font-weight:800; color:var(--coral-text); font-variant-numeric:tabular-nums; letter-spacing:-.03em; white-space:nowrap; }
.ondo-plan2-row .pr small { font-size:12px; font-weight:700; color:var(--ink-3); }
.ondo-plan2-ds { margin-top:6px; font-size:12.5px; color:var(--ink-2); line-height:1.65; }
.ondo-plan2-muted { color:var(--ink-3); }
.ondo-plan2-save { display:inline-block; margin-top:7px; background:#FFF1EC; color:var(--coral-text); font-size:11px; font-weight:800; padding:3px 9px; border-radius:8px; }

.ondo-pay2-label { margin:20px 0 10px; font-size:12px; font-weight:700; color:var(--ink-3); }
.ondo-pay2-sub { margin-left:6px; font-weight:500; color:var(--ink-3); }
/* 토스페이먼츠 결제위젯 마운트 지점(2026-07-27) — 목 모드에선 항상 비어 있어(:empty) 여백을 만들지 않는다.
   실위젯 렌더 시에만 내용이 채워지므로 그때만 위아래 여백을 준다. */
.ondo-toss-widget-mount:empty { margin:0; }
.ondo-toss-widget-mount:not(:empty) { margin:0 0 12px; }

.ondo-co-cta { display:block; width:100%; text-align:center; background:var(--cta-bg); color:#fff; font-size:16px; font-weight:800; padding:17px; border-radius:16px; border:none; margin-top:18px; min-height:54px; box-shadow:0 10px 24px rgba(208,64,45,.28); cursor:pointer; font-family:inherit; }
.ondo-co-cta small { display:block; font-weight:500; font-size:11.5px; opacity:.92; margin-top:3px; }
/* 로고 클릭 = 홈 이동(2026-07-27) — 전 화면 공통, app.js 위임 리스너와 짝 */
.ondo-logo { cursor: pointer; }
/* 실키 모드 위젯 준비 전/실패 — CTA 게이팅(패이블 검수 소견 ①) */
.ondo-co-cta:disabled { opacity:.55; cursor:default; box-shadow:none; }
.ondo-widget-fail { display:flex; align-items:center; justify-content:space-between; gap:10px; background:#FDF3F1; border:1px solid #F2D6D0; border-radius:12px; padding:12px 14px; font-size:13.5px; color:#7A3B32; margin-top:10px; }
.ondo-widget-fail button { flex:0 0 auto; background:#fff; border:1px solid #E3B9B0; border-radius:9px; padding:7px 12px; font-size:13px; font-weight:700; color:#C2452F; cursor:pointer; font-family:inherit; }
.ondo-co-foot { margin-top:12px; text-align:center; font-size:11px; color:var(--ink-3); line-height:1.6; }
.ondo-co-foot a { color:var(--ink-3); text-decoration:underline; }
/* 이용기간 고지(전자상거래법 상품정보 제공고시 · PG 심사 요건) */
.ondo-co-usage { margin-top:14px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:13px 14px; }
.ondo-co-usage .hd { font-size:12px; font-weight:800; color:var(--ink); margin-bottom:8px; }
.ondo-co-usage .rw { display:flex; justify-content:space-between; align-items:center; font-size:12.5px; padding:3px 0; }
.ondo-co-usage .rw .k { color:var(--ink-3); }
.ondo-co-usage .rw .v { color:var(--ink-2); font-weight:600; }
.ondo-co-usage .rw .v b { font-weight:800; color:var(--ink); }
.ondo-co-usage .nt { margin-top:8px; padding-top:8px; border-top:1px solid var(--line); font-size:11.5px; color:var(--ink-3); line-height:1.6; }

/* ───────── 티저 스티키 결제 바 ─────────
   인라인 CTA(스크롤 75% 지점)만으로는 콜드 트래픽이 2.7화면을 내려가야 결제 버튼을 처음 본다.
   히어로를 가리지 않도록 '온도 흐름' 진입 후 올라오고, 궁합 블록이 보이면 내려간다(render-teaser.js bindStickyBar).
   예시 모달의 .sx-foot와 같은 시각 언어를 쓰되 클래스는 분리 — 모달 레이아웃(flex 컬럼)에 영향 주지 않기 위해. */
.ondo-stickybar { position:fixed; left:50%; bottom:0; width:100%; max-width:430px; transform:translate(-50%, 110%);
  background:rgba(255,255,255,.96); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line); box-shadow:0 -6px 24px rgba(30,34,48,.10);
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:11px; z-index:60;
  transition:transform .28s cubic-bezier(.22,.61,.36,1); pointer-events:none; }
.ondo-stickybar.on { transform:translate(-50%, 0); pointer-events:auto; }
.ondo-stickybar .sb-price { font-size:12px; color:var(--ink-3); font-weight:600; line-height:1.35; flex:0 0 auto; }
.ondo-stickybar .sb-price b { font-size:16px; color:var(--ink); font-weight:800; }
.ondo-stickybar .sb-price span { display:block; font-size:10.5px; }
.ondo-stickybar .sb-cta { flex:1 1 auto; background:var(--cta-bg); color:#fff; border:0; border-radius:14px;
  height:48px; font-size:14.5px; font-weight:800; font-family:inherit; letter-spacing:-.02em; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease; box-shadow:0 4px 14px rgba(208,64,45,.28); }
.ondo-stickybar .sb-cta:hover { transform:translateY(-2px); box-shadow:0 7px 20px rgba(208,64,45,.34); }
.ondo-stickybar .sb-cta:active { transform:none; }
/* 스티키 바가 마지막 콘텐츠를 가리지 않도록 여유 */
.ondo-foot { padding-bottom:88px; }

/* ───────── 온도 흐름 차트 범례 ───────── */
.ondo-chart-legend { display:flex; flex-wrap:wrap; align-items:center; gap:5px 12px;
  margin-top:9px; font-size:10.5px; color:var(--ink-3); }
.ondo-chart-legend .lg-line { width:14px; height:2px; background:var(--coral); border-radius:2px; }
.ondo-chart-legend .lg-dash { width:14px; height:0; border-top:1px dashed #B9BCC7; }
.ondo-chart-legend .lg-dot { width:8px; height:8px; border-radius:50%; background:#fff; border:2px solid var(--coral); }
.ondo-chart-empty { padding:34px 0; text-align:center; font-size:12.5px; color:var(--ink-3); }

/* ───────── 다른 대화 다시 재보기 ───────── */
.ondo-reupload { text-align:center; margin:6px 0 18px; }
.ondo-reupload button { background:none; border:0; font-family:inherit; font-size:12.5px; font-weight:700;
  color:var(--ink-3); text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:8px 12px; }
.ondo-reupload button:hover { color:var(--ink); }

/* ───────── 파일 확인 줄 (누가 당신인가요? 화면) ───────── */
.ondo-parsed-note { display:flex; align-items:center; justify-content:center; gap:7px;
  margin:2px 0 18px; padding:10px 12px; background:var(--land-green-bg); border-radius:12px;
  font-size:12.5px; font-weight:600; color:var(--land-green); text-align:center; line-height:1.45; }
.ondo-textlink { display:block; width:100%; margin-top:16px; background:none; border:0; font-family:inherit;
  font-size:12.5px; font-weight:700; color:var(--ink-3); text-decoration:underline; text-underline-offset:3px;
  cursor:pointer; padding:10px; text-align:center; }
.ondo-textlink:hover { color:var(--ink); }

/* ============ CS 진입점 v1(2026-08-03, cs_entry_workorder_v1.md) ============
   화면 마크업과 분리된 고정 오버레이 2개. A=헤더 링크(전 화면 상시) / B=플로팅 버튼(결제·해석 대기·
   실패 3화면 한정 — app.js가 각 화면 고유 DOM id로 판정해 body.ondo-cs-float-on을 토글한다).
   카카오 옐로 직채용 금지 — 코럴 보조톤(--coral-text) 사용. 자동 팝업·뱃지·바운스 애니메이션 금지,
   등장 페이드 200ms만 허용. */
.ondo-cs-edge { right: max(16px, calc((100vw - 480px) / 2 + 16px)); }

/* A. 헤더 문의 링크 — .ondo-top(20px)·.ondo-co-nav(10px) 두 헤더 패턴 모두의 아래로 내려
   화면별 로고·뒤로가기·홈 버튼과 겹치지 않게 한다(결제 화면의 "홈 ⌂" 버튼이 같은 우측 모서리에 있음). */
.ondo-cs-header {
  position: fixed; top: 50px; z-index: 95;
  display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 13px;
  font-size: 12.5px; font-weight: 700; color: var(--ink-2); text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; line-height: 1;
}
.ondo-cs-header:hover { border-color: #D8D3CB; }
.ondo-cs-header .ic { font-size: 13px; }
.ondo-cs-header .lbl-short { display: none; }
@media (max-width: 380px) {
  .ondo-cs-header .lbl-full { display: none; }
  .ondo-cs-header .lbl-short { display: inline; }
}

/* B. 플로팅 문의 버튼 — 기본 숨김, body.ondo-cs-float-on일 때만 노출(결제·대기·실패 3화면). */
.ondo-cs-float {
  position: fixed; bottom: 16px; z-index: 95;
  display: none; align-items: center; justify-content: center; flex-direction: column;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--coral-text); color: #fff; text-decoration: none;
  box-shadow: 0 6px 16px rgba(201, 58, 44, .35);
  opacity: 0;
}
.ondo-cs-float .ic { font-size: 18px; line-height: 1; }
.ondo-cs-float .lbl { font-size: 8px; font-weight: 700; margin-top: 1px; line-height: 1; }
body.ondo-cs-float-on .ondo-cs-float { display: flex; animation: ondo-cs-float-in .2s ease forwards; }
@keyframes ondo-cs-float-in { from { opacity: 0; } to { opacity: 1; } }

/* ===== 결제 화면 이중결제 방지 고지 (2026-08-09 VOC) ===== */
.ondo-paid-note{margin-top:10px; padding:9px 12px; border-radius:10px; background:#F3F1ED;
  font-size:11.5px; color:#6B7080; line-height:1.55; text-align:left;}
.ondo-paid-note b{color:#D0402D;}

/* ── 2026-08-18 결제 화면 보강 ── */
/* 3열 옵션 "30일간 10회 무료" 컬러 강조 — 궁합의 숨은 가치(재계산)를 결제 전에 보이게 */
.ondo-plan2-perk { color: var(--coral-text); font-weight: 800; }
.ondo-plan2.sel .ondo-plan2-perk { color: var(--coral-text); }
/* 네 기둥 업그레이드 — 정가 취소선(닻) */
.ondo-plan2-was { color: var(--ink-3); font-weight: 600; font-size: 13px; margin-right: 6px; text-decoration: line-through; }
/* 네 기둥 포함 내역 — 정보량을 눈에 보이게(경험재의 불확실성 완화) */
.ondo-deep-incl { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--line); }
.ondo-deep-incl li { position: relative; padding: 3px 0 3px 16px; font-size: 12px; line-height: 1.6; color: var(--ink-2); }
.ondo-deep-incl li::before { content: "✓"; position: absolute; left: 0; top: 3px; color: var(--land-green); font-weight: 800; }
.ondo-deep-incl b { color: var(--ink); }