/* 노콜 앱 — 시안 v3 tokens.css · 노콜.css(=nocall.css) 위에 «진짜 입력칸 · 오류 · 개발 상자»만 더한다. 색·글꼴·간격은 tokens 값만 쓴다 */
html, body { min-height: 100%; background: var(--bg); }
.phone { width: 100%; max-width: 430px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; }
.phone > .body { padding-bottom: var(--s2); }
/* 단추는 늘 내용 아래(시안 r20 «글이 단추 밑에 가리지 않게») — 떠 있게 하지 않는다 */
.symbol { top: 8px !important; }
.appbar .icon-btn[hidden] { visibility: hidden; display: inline-flex; }

/* 진짜 입력칸 — 시안 .field 꼴 그대로 */
input.field, textarea.field { width: 100%; border: 0; outline: 0; font: inherit; color: var(--ink-900); }
input.field::placeholder, textarea.field::placeholder { color: var(--ink-500); }
textarea.field { height: auto; min-height: 96px; padding: var(--s2); resize: vertical; line-height: var(--lh-body); display: block; }
input.field:focus, textarea.field:focus { box-shadow: inset 0 0 0 1.5px var(--ink-900); background: var(--surface); }
.bad input.field, .bad textarea.field, input.field.bad { box-shadow: inset 0 0 0 1.5px var(--danger); background: var(--surface); }
input.code { letter-spacing: .5em; font-weight: var(--w-semibold); font-feature-settings: "tnum"; font-size: var(--t-title); text-align: center; }
.err { color: var(--danger); font-size: var(--t-small); line-height: var(--lh-small); margin-top: 6px; font-weight: var(--w-semibold); }
.err:empty { display: none; }
.hint { font-size: var(--t-caption); line-height: var(--lh-caption); color: var(--ink-500); margin-top: 6px; }
.choice[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--accent); background: var(--accent-tint); color: var(--accent); }
.chip[aria-pressed="true"] { background: var(--ink-900); color: #fff; box-shadow: none; }   /* 시안 B6 · B1 칩: 고른 것은 먹색 */
input.range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--accent) var(--p, 33%), var(--line) var(--p, 33%)); outline: 0; margin: var(--s3) 0 var(--s2); }
input.range::-webkit-slider-thumb { -webkit-appearance: none; width: 36px; height: 36px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2.5px var(--accent), 0 2px 6px rgba(0,0,0,.12); }
input.range::-moz-range-thumb { width: 36px; height: 36px; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--accent); }
.memo { display: flex; gap: 12px; align-items: flex-start; border-radius: var(--r-m); box-shadow: inset 0 0 0 1.5px var(--accent-line); background: var(--surface); padding: var(--s2); }
.memo textarea { flex: 1; border: 0; outline: 0; background: none; font: inherit; font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-900); resize: none; min-height: 40px; }
.choice .d { display: block; font-size: var(--t-caption); line-height: var(--lh-caption); font-weight: var(--w-regular); color: var(--ink-500); }
.choice.col { flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; padding: 10px var(--s2); }
.chip .pill { height: 20px; }
.btn[aria-busy="true"] { opacity: .7; pointer-events: none; }
.btn.line { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink-900); color: var(--ink-900); }

/* 개발 전용 상자 — 운영에서는 그려지지 않는다(서버가 dev:false) */
.devbox { margin-top: var(--s3); border: 1.5px dashed var(--ink-300); border-radius: var(--r-m); padding: 12px var(--s2); background: var(--surface); }
.devbox b { color: var(--ink-900); }
.devbox pre { white-space: pre-wrap; font: inherit; font-size: var(--t-small); line-height: var(--lh-small); margin-top: 4px; color: var(--ink-700); }

/* 담보 줄 */
.item { display: flex; align-items: center; gap: var(--s1); padding: 10px var(--s2); }
.item + .item { border-top: 1px solid var(--line); }
.item .nm { flex: 1; min-width: 0; text-align: left; }
.item .nm b { display: block; font-size: var(--t-small); line-height: var(--lh-small); font-weight: var(--w-semibold); }
.item .won { font-feature-settings: "tnum"; font-size: var(--t-small); font-weight: var(--w-semibold); white-space: nowrap; }
.sumbar { display: flex; justify-content: space-between; align-items: baseline; }
.won-big { font-size: var(--t-stat); line-height: 40px; font-weight: var(--w-bold); font-feature-settings: "tnum"; letter-spacing: -0.02em; }
.cmp { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--s2); font-size: var(--t-small); line-height: var(--lh-small); }
.cmp .w { text-align: right; font-feature-settings: "tnum"; font-weight: var(--w-semibold); }

/* 바텀시트 */
.nc-scrim { position: fixed; inset: 0; background: rgba(22,23,26,.6); z-index: 20; display: flex; align-items: flex-end; justify-content: center; }
.nc-sheet { width: 100%; max-width: 430px; background: var(--surface); border-radius: 24px 24px 0 0; box-shadow: var(--shadow-sheet); padding: var(--s1) var(--gutter) max(var(--s4), env(safe-area-inset-bottom)); max-height: 85vh; overflow: auto; }
.nc-sheet .x { float: right; width: var(--tap); height: var(--tap); margin-right: -12px; display: inline-flex; align-items: center; justify-content: center; }
.examplebar { margin: var(--s1) var(--gutter) 0; }
.trackmini { display: flex; gap: 4px; margin-top: 8px; }
.trackmini i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.trackmini i.on { background: var(--accent); }
.skip-link { position: absolute; left: -999px; }
/* 링크로 만든 단추 · 줄은 밑줄 없이 단추 꼴 그대로 */
a.btn, a.icon-btn, a.row, a.chip { text-decoration: none; }
a.icon-btn, a.row { color: inherit; }
a.btn.secondary, a.btn.line { color: var(--ink-900); }
a.btn.text { color: var(--ink-500); }
a.btn.primary { color: #fff; }
/* 앱 글자까지 든 부분 글꼴(글꼴_앱.py) — 시안 부분 글꼴에 없는 글자(담보 이름 등)가 다른 글꼴로 튀지 않게 */
@font-face { font-family: "PretendardApp"; src: url("/font/Pretendard-app.woff2") format("woff2-variations"), url("/font/Pretendard-app.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
:root { --font: "PretendardApp", "Pretendard", -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; }
[hidden] { display: none !important; }
/* 시안 r22 꼴 — 탭 막대는 화면 맨 아래에 붙어 있다 · 오른쪽 위 건너뛰기 */
.tabbar { position: sticky; bottom: 0; z-index: 5; }
.appbar .right .skip { text-decoration: none; }
.hometile, .healthcard, .chip, a.choice { text-decoration: none; color: inherit; }
.dots { display: flex; gap: 6px; margin-top: var(--s3); }
.dots i { width: 6px; height: 6px; border-radius: var(--r-xs); background: var(--line); }
.dots i.on { width: 20px; background: var(--ink-900); }
.barrow { height: 32px; border-radius: var(--r-xs); background: var(--fill); overflow: hidden; margin-top: 8px; }
.barrow i { display: block; height: 100%; }
html { scroll-padding-bottom: 200px; scroll-padding-top: 16px; }   /* 늘 떠 있는 아래 단추가 칸을 가리지 않게 */
/* B1 생년월일 — 칸 안에 «보험나이 N세» */
.field.fwrap { padding-right: var(--s2); }
.field.fwrap input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; color: var(--ink-900); letter-spacing: inherit; height: 100%; }
.field.fwrap:focus-within { box-shadow: inset 0 0 0 1.5px var(--ink-900); background: var(--surface); }
.bad .field.fwrap { box-shadow: inset 0 0 0 1.5px var(--danger); background: var(--surface); }
h1:focus { outline: none; }
.steps span { color: var(--ink-500); }

/* 오른쪽 위 «물어보기» 알약 — 44px · 흰 글자/먹색 */
.symbol.askpill { position: absolute; z-index: 6; height: 44px; min-width: 44px; padding: 0 14px 0 12px; border: 0; border-radius: 22px; background: var(--ink-900); color: #fff; display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font: 600 15px/1 inherit; font-family: inherit; box-shadow: 0 2px 8px rgba(26,13,19,.18); cursor: pointer; }
/* 출처 없는 사진 자리 — 아이콘 */
.iconband { margin: var(--s1) var(--gutter) 0; display: flex; }
.iconband span { width: 56px; height: 56px; border-radius: 16px; background: var(--accent-50, #F7E9EC); color: var(--accent); display: flex; align-items: center; justify-content: center; }
/* A0 첫 화면 */
.phone.a0 { background: #fff; color: var(--ink-900); padding: 0; }
.a0photo { height: 52vh; min-height: 300px; max-height: 470px; overflow: hidden; flex: none; }
.a0photo .photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.a0body { flex: 1; display: flex; flex-direction: column; padding: var(--s3) var(--gutter) var(--s3); }
.a0logo { display: flex; align-items: center; gap: 10px; }
.a0logo img { height: 44px; width: auto; display: block; }
.a0logo span { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; color: var(--ink-900); }
.a0pills { display: flex; gap: var(--s1); margin-top: var(--s2); flex-wrap: wrap; }
.a0pills .pill { height: 36px; padding: 0 14px; gap: 6px; font-size: var(--t-small); }

/* 예시 스위치 — 위 한 줄 · 숫자 카드 딱지 */
.exbar { margin: 4px var(--gutter) 0; padding: 6px 10px; border-radius: 8px; background: #FFF4D6; color: #5A4300; font-size: 13px; line-height: 18px; text-align: center; }
.extag { position: static; transform: none; z-index: auto; display: inline-block; margin: 4px 0 0 6px; padding: 1px 6px; border-radius: 6px; border: 1px solid #C9A227; color: #5A4300; background: #FFF9E6; font-size: 11px; line-height: 16px; font-weight: 600; white-space: nowrap; }
.row > .extag { margin-left: 6px; align-self: center; }

/* 담보 켜고 끌 때 합계 · 20년 합계가 같이 움직이는 것 */
@keyframes ncflash { 0% { background: #FFE9A8; } 100% { background: transparent; } }
.flash { animation: ncflash .9s ease-out; border-radius: 6px; }
/* 담보를 끄고 켜는 동안 합계가 늘 보이게 — 아래 떠 있는 띠 */
.sumfloat { position: fixed; left: 50%; transform: translateX(-50%); bottom: 150px; z-index: 30; max-width: 358px; width: calc(100% - 32px); padding: 10px 14px; border-radius: 14px; background: var(--ink-900); color: #fff; font-size: 15px; line-height: 22px; box-shadow: 0 6px 18px rgba(26,13,19,.25); text-align: center; }
.sumfloat.flash { animation: ncflash2 .9s ease-out; }
@keyframes ncflash2 { 0% { background: var(--accent); } 100% { background: var(--ink-900); } }
.sumfloat .extag { display: block; width: max-content; margin: 4px auto 0; position: static; }
.card > .extag { margin-left: 0; }
/* 와우 이야기 띠 — 화면 위 «와우 N/8 · 다음 ›» */
.wowbar { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--s2); padding: 8px 6px 8px 12px; border-radius: 12px; background: var(--accent-tint, #F7E9EC); }
.wowbar .wowstep { flex: none; font-size: 12px; font-weight: 700; color: #fff; background: var(--accent); border-radius: 10px; padding: 2px 8px; }
.wowbar .grow { flex: 1; min-width: 0; }
.wowbar a { text-decoration: none; white-space: nowrap; }
.wowbar .wowx { flex: none; width: 32px; height: 32px; border: 0; background: none; font-size: 18px; color: var(--ink-500); cursor: pointer; }