:root {
  --navy: #16213e;
  --amber: #f0a030;
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: #f6f6f8;
}

body {
  font-family: -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  color: #1c1c1e;
}

.app-shell {
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  background: #f6f6f8;
  display: flex;
  flex-direction: column;
}

.appbar {
  background: var(--navy);
  padding: max(12px, env(safe-area-inset-top)) 16px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.appbar .back { background: none; border: none; font-size: 24px; color: var(--amber); cursor: pointer; padding: 0 4px; }
.appbar .title { font-size: 18px; font-weight: 700; color: #fff; flex: 1; }
.appbar .title small { font-size: 10px; font-weight: 600; letter-spacing: 2px; color: var(--amber); margin-left: 6px; }
.appbar .title .slogan { font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.6); }

.mascot-avatar {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
  background: #fdf3e3; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(255,255,255,.15);
}

/* 보니 마스코트 — 카드/빈 화면 등에 쓰이는 큰 사이즈 */
.mascot-figure { display: block; border-radius: 50%; object-fit: cover; background: #fdf3e3; flex-shrink: 0; }
.mascot-figure--md { width: 56px; height: 56px; margin: 0 auto 10px; }
.mascot-figure--lg { width: 88px; height: 88px; margin: 0 auto 12px; }

/* 보니 마스코트 — 이모지를 대신하는 인라인 소형 아이콘 (버튼/제목 앞) */
.mascot-inline { display: inline-block; vertical-align: middle; object-fit: contain; flex-shrink: 0; }
.mascot-inline--btn { width: 22px; height: 22px; margin: -3px 6px 0 0; }
.mascot-inline--pin { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; margin: -3px 6px 0 0; }

/* 권장 액션 배너 — 보니가 문구를 가리키는 포즈로 나올 때의 레이아웃 */
.action-with-mascot { display: flex; align-items: flex-start; gap: 10px; }
.action-with-mascot .mascot-point { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.action-with-mascot span { padding-top: 2px; }

.content { flex: 1; overflow-y: auto; padding: 14px 14px 90px; }

.bottomnav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  max-width: 480px;
  margin: 0 auto;
  background: #fff;
  border-top: 1px solid #e8e8ec;
  display: flex;
  padding: 8px 0 max(10px, env(safe-area-inset-bottom));
}
.bottomnav .tab {
  flex: 1; text-align: center; font-size: 11px; color: #8e8e93;
  background: none; border: none; cursor: pointer; min-height: 48px;
}
.bottomnav .tab .ic { display: flex; justify-content: center; margin-bottom: 2px; }
.bottomnav .tab .ic svg { width: 24px; height: 24px; }
.bottomnav .tab.on { color: var(--navy); font-weight: 700; }

.badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 20px; color: #fff; }
.b-scam { background: #e5484d; }
.b-important { background: #f59e0b; }
.b-ref { background: #8e8e93; }
.b-ad { background: #a8a8ad; }

.alert { background: #fdecec; border: 1px solid #f5c2c4; border-radius: 14px; padding: 12px 14px; font-size: 14px; font-weight: 600; color: #c81e1e; margin-bottom: 14px; }
.secttl { font-size: 14px; font-weight: 700; margin: 14px 2px 8px; color: #3a3a3c; }

.row { background: #fff; border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; display: flex; gap: 10px; align-items: center; box-shadow: 0 1px 3px rgba(0,0,0,.05); cursor: pointer; border: none; width: 100%; text-align: left; font: inherit; color: inherit; min-height: 48px; }
.row .tx { flex: 1; min-width: 0; }
.row .t1 { font-size: 15px; font-weight: 600; margin: 4px 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .t2 { font-size: 12px; color: #8e8e93; }
.row .chev { color: #c7c7cc; font-size: 20px; }

.card { background: #fff; border-radius: 14px; padding: 14px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.card h3 { font-size: 15px; margin-bottom: 8px; }
.card ul { padding-left: 18px; font-size: 15px; line-height: 1.7; }
.card p { font-size: 14px; line-height: 1.7; }

.action-blue { background: #e8f1fe; border: 1px solid #bcd7fb; color: #1456c8; border-radius: 14px; padding: 12px 14px; font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.action-red { background: #fdecec; border: 1px solid #f5c2c4; color: #c81e1e; border-radius: 14px; padding: 12px 14px; font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.action-neutral { background: #f2f2f5; border: 1px solid #d1d1d6; color: #3a3a3c; border-radius: 14px; padding: 12px 14px; font-size: 15px; font-weight: 700; margin-bottom: 10px; }

.toggle { background: #fff; border: 1px solid #d1d1d6; border-radius: 14px; padding: 13px 14px; font-size: 15px; color: var(--navy); font-weight: 600; margin-bottom: 10px; text-align: center; width: 100%; cursor: pointer; min-height: 48px; }
.orig { display: none; background: #f2f2f5; border-radius: 10px; padding: 10px 12px; font-size: 13px; color: #555; line-height: 1.7; margin-top: -4px; margin-bottom: 10px; white-space: pre-wrap; }
.orig.show { display: block; }

.btn { display: block; width: 100%; border: none; border-radius: 14px; padding: 16px; font-size: 17px; font-weight: 700; margin-top: 8px; cursor: pointer; min-height: 48px; }
.btn-primary { background: var(--amber); color: #3a2a00; }
.btn-secondary { background: #e9e9ee; color: #1c1c1e; }
.btn-danger-ghost { background: #fff; color: #8e8e93; border: 1px solid #d1d1d6; }
.btn:disabled { opacity: .5; cursor: default; }

.micro { font-size: 13px; color: #8e8e93; text-align: center; margin-top: 10px; line-height: 1.7; }

.confbar { height: 8px; background: #e9e9ee; border-radius: 6px; overflow: hidden; margin: 8px 0 4px; }
.confbar i { display: block; height: 100%; background: #e5484d; border-radius: 6px; }
.conflbl { font-size: 13px; color: #8e8e93; }

.draft { background: #f7f7fa; border: 1px dashed #c7c7cc; border-radius: 14px; padding: 14px; font-size: 15px; line-height: 1.8; margin-bottom: 10px; white-space: pre-wrap; }

.scanbtn { background: linear-gradient(135deg,#f0a030,#dd8a00); color: #3a2a00; border-radius: 16px; padding: 18px; text-align: center; font-size: 16px; font-weight: 700; margin: 4px 0 6px; box-shadow: 0 4px 14px rgba(240,160,48,.45); border: none; width: 100%; cursor: pointer; min-height: 48px; }

.empty { text-align: center; color: #8e8e93; font-size: 14px; padding: 40px 10px; }
.loading { text-align: center; color: #8e8e93; font-size: 14px; padding: 40px 10px; }
.empty .mascot-figure, .loading .mascot-figure { margin-left: auto; margin-right: auto; }
.error-box { background: #fdecec; border: 1px solid #f5c2c4; color: #c81e1e; border-radius: 14px; padding: 12px 14px; font-size: 14px; margin-bottom: 10px; }

.settings-item { background: #fff; border-radius: 14px; padding: 14px; margin-bottom: 8px; font-size: 15px; }
.settings-item .muted { color: #8e8e93; font-size: 13px; margin-top: 4px; }

/* 스캔 미리보기: 세로형 문서 사진이 화면을 다 차지해 안내문/버튼이 첫 화면 밖으로 밀리지 않도록
   높이를 뷰포트 기준으로 제한한다 (비율 유지, 잘림 없음). */
.scan-preview-img {
  display: block;
  max-width: 100%;
  max-height: 42vh;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto 10px;
  border-radius: 14px;
  background: #eceef2;
}
.scan-preview-notice { padding: 10px 12px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.scan-preview-notice .mascot-figure { width: 44px; height: 44px; margin: 0; }
.scan-preview-notice p { font-size: 13px; line-height: 1.5; }
.scan-preview-actions .btn { margin-top: 6px; }