/* ==========================================================================
   MIRACLE AD AI 리뉴얼 — 우리 판 덧칠(10-27 · 나래). 진우 판 CSS(style·pages·home·fx)는 그대로 두고 여기서만 고친다.
   ① 대비: 보조 글자 --text-3 #5e5e5e(검정 위 3.0:1) → #8c8c8c(6.0:1) · 바탕 #000 → #050505(OLED 번짐)
   ② 진우 판에 없던 우리 조각: 연출 표기 · 로그인 · 영상 액자 · 설치 단계 · 요금제 찾기 · 표 정렬 · 요금 안내 · 전화 줄
   ③ 브라우저 기본 표면(스크롤 막대 · 커서 깜빡이 · 링크 밑줄)도 판 색으로
   ========================================================================== */
:root { --bg: #050505; --text-3: #8c8c8c; }
html { scrollbar-color: #3a3a3a var(--bg); caret-color: var(--accent); }
/* 폰 가로 넘침 0 — 들어오는 연출(data-stagger 의 3D 기울임) 시작 상태가 화면 밖으로 삐져 폰 레이아웃 폭을 넓혔다(390 → 413 실측).
   clip 은 스크롤 상자를 만들지 않아 sticky(메인 하루 이야기)·고정 머리는 그대로 산다. */
main { overflow-x: clip; }
/* ⭐캐러셀 묶음 덮개 — 묶음(article · z-index -1)은 main(z-index 1 쌓임 맥락) 안에서 main 바탕보다 위에 칠해진다.
   움직임 끔·JS 없음에서는 무대가 sticky 가 아니라 바탕이 투명해 카드 묶음이 글 뒤로 비쳤다(10-27 자홍 재기: PC 최대 119만 px).
   ⇒ 무대에 늘 불투명 바탕 — 무대(position:relative)가 묶음보다 나중에 칠해져 덮는다. 움직임 모드(sticky)도 같은 값. */
.story__stage { background: var(--bg); }
@media (max-width: 760px) {
  html.js:not(.reduced) .story__stage::after { background: linear-gradient(to top, var(--bg) 0%, var(--bg) 72%, rgba(5, 5, 5, 0) 100%); }
}

/* ── 연출 표기(지금 운영 판 표기 꼴 «연출 화면 · 가상 데이터») ── */
.demo-note { margin-top: 14px; font-size: 12.5px; line-height: 1.5; letter-spacing: .01em; color: var(--text-3); word-break: keep-all; }
.widget .demo-note { margin: 12px 4px 0; }
figure .demo-note, .vframe figcaption { margin-top: 12px; }
.story__note { margin: 24px auto 0; width: min(100% - var(--gutter) * 2, var(--maxw)); font-size: 11px; color: var(--text-3); }
html.js:not(.reduced) .story__note {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 6px; width: auto; margin: 0;
  padding: 0 max(var(--gutter), (100vw - var(--maxw)) / 2); font-size: 10.5px; pointer-events: none;
}
@media (max-width: 760px) { html.js:not(.reduced) .story__note { font-size: 9.5px; letter-spacing: 0; } }

/* ── 머리: 로그인 ── */
.hd__login {
  display: inline-flex; align-items: center; height: 46px; padding: 0 14px; border-radius: 999px;
  font-size: 15px; font-weight: 600; color: var(--text-2); transition: color .3s, background-color .3s;
}
.hd__login:hover { color: var(--text); background: rgba(255, 255, 255, .07); }
@media (max-width: 1200px) { .hd__login { display: none; } }
.mnav__foot { display: grid; gap: 14px; justify-items: start; }
/* 진우 판 메뉴는 번호 칸(44px)이 앞에 있었다 — 쪽 번호 장식을 빼서 두 칸으로(안 그러면 글이 44px 칸에 갇혀 한 줄이 172px 로 늘었다 · 10-27 실측) */
.mnav__list a { grid-template-columns: minmax(0, 1fr) auto; }
.mnav__login { font-size: 16px; font-weight: 600; color: var(--text-2); text-decoration: underline; text-underline-offset: 4px; }
.mnav__foot a[href^="tel:"] { color: inherit; }

/* ── 바닥 열 제목(h4 → h2: 제목 차례) ── */
.ft__col .ft__h { font-size: 12px; font-weight: 500; color: var(--text-3); letter-spacing: .12em; margin-bottom: 20px; }

/* ── 쪽 끝 신청 띠: 전화 줄 ── */
.cta-band__tel { margin-top: 22px; font-size: 14px; color: var(--text-2); }
.cta-band__tel a, .leak__note a, .pnotes a, .contact__direct a, .form a { text-decoration: underline; text-underline-offset: 3px; }

/* ── 36초 소개 영상 액자 ── */
.vframe { margin: 0; }
.vframe video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--r-lg);
  background: #0b0b0b; border: 1px solid var(--line-2); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8);
}

/* ── 부정클릭: 설치(코드 상자 대신 세 단계 — 화면에 코드를 보이지 않는다) ── */
.install__steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.install__steps li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: baseline;
  padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line);
}
.install__steps .mono { grid-row: 1 / span 2; font-size: 13px; color: var(--text-3); }
.install__steps b { font-size: 16px; font-weight: 700; color: var(--text); }
.install__steps li > span:last-child { font-size: 14.5px; color: var(--text-2); }

/* ── 대행사: 스톡 사진을 뺀 카드 넷 ── */
.clientgrid--noimg { grid-template-columns: minmax(0, 1fr); }
.clientgrid--noimg .clientgrid__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .clientgrid--noimg .clientgrid__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .clientgrid--noimg .clientgrid__cards { grid-template-columns: minmax(0, 1fr); } }

/* ── 메인: 요금제 찾기(누수 계산기 자리) ── */
.leak__plan { display: block; font-size: clamp(24px, 2.2vw, 32px); font-weight: 800; letter-spacing: -.03em; color: var(--text); }
.leak__over { margin: 0; font-size: 14px; color: var(--warn); }
.leak__note { font-size: 13px; line-height: 1.7; color: var(--text-2); }
.pf-check { display: flex; align-items: center; gap: 12px; padding: 18px 0 4px; font-size: 15px; color: var(--text-2); cursor: pointer; }
.pf-check input { width: 20px; height: 20px; accent-color: #fff; flex: none; }
.pf-check b { color: var(--text); font-variant-numeric: tabular-nums; }

/* ── 요금제: 안내 문단 ── */
.pnotes { display: grid; gap: 10px; max-width: 64em; margin-top: clamp(24px, 3vw, 40px); font-size: 15px; line-height: 1.75; color: var(--text-2); }
.pnotes b { color: var(--text); font-weight: 600; }

/* ── 예시 표: 정렬 단추 · 머리 고정 · 거르기 ── */
.th-sort {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; letter-spacing: inherit; text-align: left; cursor: pointer;
}
.th-sort i::after { content: '↕'; font-style: normal; opacity: .45; }
[aria-sort="ascending"] .th-sort i::after { content: '↑'; opacity: 1; }
[aria-sort="descending"] .th-sort i::after { content: '↓'; opacity: 1; }
.th-sort:hover, .th-sort:focus-visible { color: var(--text); }
.logtable__scroll, .kwtable__scroll { max-height: 520px; overflow: auto; }
.logtable thead th, .kwtable thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.logtable__filters button { padding: 3px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; color: var(--text-2); transition: color .3s, border-color .3s, background-color .3s; }
.logtable__filters button.is-on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.logtable__filters button:hover { color: var(--text); border-color: var(--line-2); }
.logtable__filters button.is-on:hover { color: var(--accent-ink); }
.logtable .demo-note, .kwtable .demo-note { margin: 0; padding: 12px 20px 16px; }

/* ── 폼: 오류 칸 · 바쁜 단추 ── */
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--danger); }
.form__submit[aria-busy="true"] { pointer-events: none; opacity: .8; }

/* ── 대비 · 글자 크기 다듬기(impeccable detect 10-27: 카드 위 보조 글 4.0~4.4:1 · 기능 글 10~10.5px) ── */
.plan__en, .rankpill small { color: var(--text-2); }
.story__dots span { font-size: 11px; }
.lk-field__scale { font-size: 12px; }
.tick em { font-size: 11px; }
.rankpill small, .plan__badge, .addon__tag, .jn__t { font-size: 12px; }

/* ── 손대지 않으면 줄어드는 움직임(진우 판 규칙을 한 번 더 — 우리 조각까지) ── */
@media (prefers-reduced-motion: reduce) {
  .th-sort, .hd__login, .logtable__filters button { transition: none; }
}

/* ==========================================================================
   2차(10-27 20:3x · 대표 «로그인·온라인 계약·약관 쪽은 옛 디자인 — 지금맞춰») — 약관 4종 · 온라인 계약 껍데기
   ⛔본문은 legal.py·routers/contract.py 가 만든 글자 그대로다(지문 = 본문 SHA-256). 여기서는 겉(글꼴·폭·여백·색)만 입힌다.
   ========================================================================== */
/* ── 약관 4종 · 지난 판 — 진우 판 «정책 문서»(왼쪽 목록 + 오른쪽 본문) ── */
.legal-page { padding-top: clamp(120px, 14vw, 170px); }
.legal__head .eff { margin-top: 12px; font-size: 13.5px; line-height: 1.7; color: var(--text-2); word-break: keep-all; }
.legal__head .eff a, .legal__body a { color: var(--text); border-bottom: 1px solid var(--line-2); }
.legal__head .eff a:hover, .legal__body a:hover { border-bottom-color: var(--text); }
.legal__body { font-size: 16px; line-height: 1.85; color: var(--text-2); word-break: keep-all; overflow-wrap: anywhere; }
.legal__body h2 { margin: 40px 0 12px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.45; color: var(--text); }
.legal__body h2:first-child { margin-top: 8px; }
.legal__body h3 { margin: 26px 0 10px; font-size: 16.5px; font-weight: 700; color: var(--text); }
.legal__body p { margin: 0 0 10px; }
.legal__body strong, .legal__body b { color: var(--text); font-weight: 650; }
.legal__body ol { list-style: decimal; padding-left: 1.5em; margin: 0 0 12px; display: grid; gap: 8px; }
.legal__body ol > li { padding-left: .25em; }
.legal__body ol > li::before { content: none; }
.legal__body ol ol, .legal__body ul ol { margin-top: 8px; }
.legal__body ol li::marker { color: var(--text-3); font-variant-numeric: tabular-nums; }
.legal__body .lead { font-size: 16.5px; color: var(--text); }
.legal__body .note { margin-top: 12px; padding: 12px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 14.5px; }
.legal__body table { width: 100%; margin: 12px 0 18px; border-collapse: collapse; font-size: 14.5px; line-height: 1.65; }
.legal__body th, .legal__body td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal__body th { background: var(--surface); color: var(--text); font-weight: 600; }
.legal__body table.biz th { width: 34%; }
.legal__body .tw, .legal__body table { display: block; overflow-x: auto; }
.legal__body table > tbody, .legal__body table > thead { display: table; width: 100%; border-collapse: collapse; }
@media (max-width: 960px) { .legal-page { padding-top: 110px; } .legal__body { font-size: 15.5px; } }

/* ── 온라인 계약(신청 5단계 · 내 계약서) — 신청 화면 본문은 운영 판 그대로, 옛 판(chrono) 변수·단추 이름을 진우 판 색으로 잇는다 ── */
body.renew .kc {
  --fg: var(--text); --fg2: var(--text-2); --fg3: var(--text-3); --ours: #ffffff; --kept: #d8d8d8; --bad: var(--danger);
  padding: clamp(48px, 6vw, 96px) 0 var(--sec);
}
body.renew .kc-view { padding-top: clamp(120px, 14vw, 170px); }
body.renew .kc .in { width: min(100% - var(--gutter) * 2, 920px); margin-inline: auto; }
body.renew .kc .eb { display: none; }                         /* 제목 위 장식 라벨은 그리지 않는다(DESIGN.md) */
body.renew .kc h2 { font-size: clamp(28px, 3.4vw, 46px); line-height: 1.2; letter-spacing: -.04em; font-weight: 750; color: var(--text); }
body.renew .kc .sub { margin-top: 14px; max-width: 46em; font-size: 16px; line-height: 1.8; color: var(--text-2); }
body.renew .kc .sub b { color: var(--text); }
body.renew .kc .note { margin-top: 18px; font-size: 14px; color: var(--text-2); }
body.renew .kc .note a, body.renew .kc .kc-note a, body.renew .kc-list a, body.renew .kc-docbody a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
body.renew .kc .b {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 999px;
  border: 1px solid var(--line-2); background: transparent; color: var(--text); font: inherit; font-size: 15px; font-weight: 650;
  white-space: nowrap; cursor: pointer; transition: background-color .3s, color .3s, border-color .3s;
}
body.renew .kc .b:hover { border-color: var(--text); }
body.renew .kc .b.p { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
body.renew .kc .b.p:hover { background: #e9e9e9; }
body.renew .kc .b.lg { height: 56px; padding: 0 28px; font-size: 16px; }
body.renew .kc .b[disabled] { opacity: .5; cursor: progress; }
body.renew .kc .b[hidden] { display: none; }
body.renew .kc .msg { font-size: 14px; color: var(--text-2); }
body.renew .kc .msg.ok { color: var(--text); }
body.renew .kc .msg.no { color: #ff8b7c; }
body.renew .kc-fs { background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%); border-color: var(--line); border-radius: var(--r-lg); }
body.renew .kc-fs legend { color: var(--text); font-size: 16px; }
body.renew .kc input[type=text], body.renew .kc input:not([type]), body.renew .kc input[type=tel],
body.renew .kc input[type=email], body.renew .kc input[type=file] { background: rgba(0, 0, 0, .35); border-color: var(--line-2); border-radius: 14px; }
body.renew .kc input:focus { outline: 2px solid #fff; outline-offset: 1px; }
body.renew .kc-chip input:checked + span { background: rgba(255, 255, 255, .12); color: var(--text); border-color: #fff; }
body.renew .kc-plan { background: rgba(255, 255, 255, .03); }
body.renew .kc-plan:has(input:checked) { background: rgba(255, 255, 255, .08); border-color: #fff; }
body.renew .kc-pp { color: var(--text); font-family: var(--font-display); letter-spacing: -.02em; }
body.renew .kc-steps li.on span { color: #000; }
body.renew .kc-done { border-color: var(--line-2); background: rgba(255, 255, 255, .04); border-radius: var(--r-lg); }
body.renew .kc-list thead th { background: var(--surface); }
body.renew .kc-box, body.renew .kc-doc { background: rgba(255, 255, 255, .03); }
body.renew .kc fieldset[hidden], body.renew .kc [hidden] { display: none !important; }
@media (max-width: 760px) { body.renew .kc .b.lg { height: 52px; padding: 0 20px; } }
body.renew .kc input::placeholder { color: var(--text-3); opacity: 1; }   /* 브라우저 기본 #757575 는 4.3:1 — impeccable detect 10-27 */
.legal__title { text-wrap: balance; }