/* 웹 무료분석 — ★새 값을 만들지 않는다★ (#53 디자인 지시).
   여기 있는 것은 폼 요소(button · input · select)가 브라우저 기본 모양 대신 style.css 의 글자·색을 따르게 하는 것뿐이다.
   ★숫자와 색은 전부 style.css 에 이미 있는 값이다★ — 0.8px 선 · rgba(78,74,69,0.28) · 13px 26px · 4px · 9px · 0.72 · var(--…).
   ★그림자 · 전환 · 애니메이션 0.★ 디자인은 디자이너와 새로 짠다. */

[hidden] { display: none !important; }

/* ★화면 제목의 포커스 테두리를 그리지 않는다 (2026-09-15 · 창업자 iPhone Safari "첫 문구에 파란 박스")★
   app.js show() 가 화면을 바꿀 때 제목(h1 tabindex=-1)에 focus() 를 준다 — 화면 낭독기가 새 화면을 읽게 하려는 것이라 포커스는 남긴다.
   Chrome 은 스크립트로 준 포커스에 테두리를 안 그리지만 ★Safari 는 그린다★. 제목은 누르는 곳이 아니다 */
h1[tabindex="-1"]:focus { outline: none; }

button, input, select { font: inherit; color: inherit; }

/* 버튼은 .soon(첫 화면의 "COMING TO THE APP STORE" 칸) 모양을 그대로 빌린다 */
button { background: none; border: 0; padding: 0; cursor: pointer; }
button.soon { border: 0.8px solid rgba(78,74,69,0.28); padding: 13px 26px; }
button:disabled { opacity: 0.72; cursor: default; }
button.mono { color: var(--bronze); }

/* 글자 링크처럼 보이는 버튼 — style.css 의 a 와 같은 값 */
button.link { color: var(--bronze); border-bottom: 0.7px solid var(--bronze); }

/* 고른 것 — 선을 bronze 로 (style.css 의 강조색) */
button.choice[aria-checked="true"] { border-color: var(--bronze); color: var(--charcoal); }

input { width: 100%; background: var(--card); border: 0.8px solid rgba(78,74,69,0.28); padding: 13px 26px; }

.results { list-style: none; padding-left: 0; }

/* 날짜·시각 선택칸 — 입력칸과 같은 선 · 바탕 · 옆 여백은 좁게(한 줄에 셋) */
select { background: var(--card); border: 0.8px solid rgba(78,74,69,0.28); padding: 13px 4px; }
.picker { display: flex; gap: 9px; flex-wrap: wrap; }

pre.card { white-space: pre-wrap; overflow-wrap: anywhere; }

/* 로딩 — 지난 박자는 흐리게. ★새 색이 아니다★ — style.css 의 --muted (꼬리말 글자색) */
.past, .past .mono { color: var(--muted); }

/* 로그인 실패 한 줄 — 앱은 bronze 글자 (signup.tsx) · ★새 색이 아니다★ */
.error { color: var(--bronze); }

/* 분석 시작 화면의 엔진 한 줄 — 본문(17px)보다 작고 흐리게 · 가운데 · ★새 값이 아니다★ (13px 은 style.css 의 값 · --muted 는 footer 색)
   ★13px 인 이유★ — Cormorant 실측 13px 318.7px · 14px 343px. SE(375) 글자 칸은 335px(375 − 20×2) 라 14px 은 두 줄이 된다 */
.engine { font-size: 13px; color: var(--muted); text-align: center; }

/* 카드 일곱 (W4) — ★구조만★ · 점 · 눈금 · 띠 · 노몬은 SVG 요소라 한 줄로 세운다 · ★새 값 0★ */
[data-card-dots] svg, .card-ticks, .card-rail, .card-gnomon, .card-band { display: block; }
/* 공유 카드 미리보기 — 1080×1920 을 칸 폭에 맞춘다 */
.share-preview svg { display: block; width: 100%; height: auto; }