/* 클러킹 공통 스타일: 모든 화면이 이 파일 하나를 쓴다 */

:root {
  color-scheme: light;
  --bg: #f2f4f6; --card: #ffffff; --text: #191f28; --muted: #8b95a1;
  --line: #e5e8eb; --chip: #f2f4f6; --accent: #3182f6; --accent-soft: #e8f1fe;
  --disabled: #d1d6db; --disabled-fg: #58616b;
  --warn-bg: #fff8dd; --warn-fg: #8a6d00;
  --err-bg: #ffeeee; --err-fg: #f04452;
  --ok-fg: #12b76a;
  --rev-bg: #fff1e3; --rev-fg: #e08600;
  --tab-bg: rgba(255, 255, 255, 0.92);
  --skeleton: #e7ebef; --skeleton-hi: #f4f6f8;
  --maxw: 430px;
  --wide: 1080px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101013; --card: #1b1b21; --text: #f2f4f6; --muted: #8b95a1;
  --line: #2c2c35; --chip: #26262e; --accent: #4593fc; --accent-soft: #1b2c47;
  --disabled: #3c3c46; --disabled-fg: #f2f4f6;
  --warn-bg: #2e2a17; --warn-fg: #ffd158;
  --err-bg: #331d20; --err-fg: #ff7b83;
  --ok-fg: #30d158;
  --rev-bg: #33270f; --rev-fg: #ffa14a;
  --tab-bg: rgba(19, 19, 24, 0.92);
  --skeleton: #23232b; --skeleton-hi: #2c2c35;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
button, input, select { font-family: inherit; }
body {
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 20px calc(92px + env(safe-area-inset-bottom));
}

/* 상단: 브랜드 + 테마 버튼 */
.topbar {
  width: 100%; max-width: var(--maxw);
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
}
.brand {
  display: flex; align-items: center; gap: 8px;
  font-size: 18px; font-weight: 700; letter-spacing: -0.3px;
  color: var(--text); text-decoration: none;
}
.brand svg { display: block; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--text);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.icon-btn svg { width: 19px; height: 19px; }

h1.page-title {
  width: 100%; max-width: var(--maxw);
  font-size: 24px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 4px;
}
.subtitle {
  width: 100%; max-width: var(--maxw);
  font-size: 14px; color: var(--muted); margin-bottom: 20px;
}

/* 카드 */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px;
  width: 100%; max-width: var(--maxw);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  margin-bottom: 12px;
}

/* 버튼 */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 15px;
  border: none; border-radius: 14px;
  font-size: 16px; font-weight: 700; cursor: pointer;
  transition: transform 0.1s, opacity 0.15s;
  text-decoration: none;
}
.btn svg { width: 20px; height: 20px; }
.btn:active { transform: scale(0.98); opacity: 0.85; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-secondary { background: var(--chip); color: var(--accent); margin-top: 10px; }
.btn:disabled { background: var(--disabled); color: var(--disabled-fg); cursor: not-allowed; opacity: 1; }

/* 하단 탭 */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--tab-bg);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  display: flex; justify-content: center;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
}
.tabbar-inner { display: flex; width: 100%; max-width: var(--maxw); }
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 5px 0 3px; border-radius: 12px;
  color: var(--muted); text-decoration: none;
  font-size: 11px; font-weight: 600;
}
.tab svg { width: 24px; height: 24px; }
.tab.active { color: var(--accent); }

/* 분류 표식(chip) */
.chip {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600; line-height: 1;
  padding: 4px 8px; border-radius: 999px;
  background: var(--chip); color: var(--muted);
  white-space: nowrap;
}
.cat-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 6px; flex: none; background: var(--muted);
}

/* 목록 요소 */
.month-head {
  width: 100%; max-width: var(--maxw);
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 14px 2px 8px;
  color: var(--muted); font-size: 14px; font-weight: 700;
}
.month-head .sum { font-size: 13px; font-weight: 600; }
.shop { font-size: 17px; font-weight: 700; }
.date { font-size: 13px; color: var(--muted); margin-top: 2px; margin-bottom: 10px; }
.item-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 5px 0; font-size: 14px;
}
.item-row .name {
  display: flex; align-items: center; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.item-row .minus { color: var(--err-fg); }
.total-row {
  display: flex; justify-content: space-between;
  padding: 10px 0 0; font-size: 16px; font-weight: 700;
  border-top: 1px solid var(--line); margin-top: 8px;
}
.result-row {
  display: flex; justify-content: space-between; padding: 8px 0;
  border-bottom: 1px solid var(--line); font-size: 15px;
}
.result-row:last-child { border-bottom: none; }
.result-label { color: var(--muted); }
.result-value { font-weight: 500; text-align: right; }
.items-title {
  font-size: 12px; color: var(--muted); margin: 12px 0 6px;
  font-weight: 700; letter-spacing: 0.4px;
}
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
/* 버튼과 그 버튼을 눌렀을 때의 조건(남은 횟수)은 붙어 있어야 짝으로 읽힌다 */
.report-actions {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-top: 16px;
}

/* 상태 배지, 안내문 */
.badge {
  display: inline-block; font-size: 11px; font-weight: 700; line-height: 1;
  padding: 4px 7px; border-radius: 7px; flex: none;
}
.badge-ok { background: var(--accent-soft); color: var(--accent); }
.badge-skip { background: var(--chip); color: var(--muted); }
.badge-rev { background: var(--rev-bg); color: var(--rev-fg); }
.badge-err { background: var(--err-bg); color: var(--err-fg); }
.saved-badge {
  display: flex; align-items: center; gap: 6px;
  color: var(--ok-fg); font-weight: 700; font-size: 14px; margin-bottom: 8px;
}
.saved-badge svg { width: 17px; height: 17px; }
.status-msg {
  text-align: center; padding: 12px; border-radius: 12px;
  font-size: 14px; margin-bottom: 12px; display: none;
  width: 100%; max-width: var(--maxw);
}
.status-loading { background: var(--warn-bg); color: var(--warn-fg); }
.status-error { background: var(--err-bg); color: var(--err-fg); }
.status-review { background: var(--rev-bg); color: var(--rev-fg); }

.spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: spin 0.7s linear infinite; vertical-align: middle; margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 뼈대(skeleton) 로딩 */
.skeleton {
  width: 100%; max-width: var(--maxw); border-radius: 20px;
  background: linear-gradient(100deg, var(--skeleton) 40%, var(--skeleton-hi) 50%, var(--skeleton) 60%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  margin-bottom: 12px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* 기다림 그림: 영수증을 훑어 읽는 모습 (그리는 곳은 app.js의 scanArt) */
.scan { text-align: center; padding: 2px 0; }
.scan-art { display: block; width: 100%; max-width: 176px; height: auto; margin: 0 auto 12px; }
.sc-paper { fill: var(--chip); stroke: var(--line); stroke-width: 1; }
.sc-ln { fill: var(--muted); }
.sc-rule { fill: var(--line); }
.sc-fade { stop-color: var(--accent); stop-opacity: 0; }
.sc-lit { stop-color: var(--accent); stop-opacity: 0.5; }
.sc-edge { fill: var(--accent); opacity: 0.9; }
.scan-msg { font-size: 14px; font-weight: 600; }
.scan-sub {
  font-size: 12.5px; color: var(--muted); margin-top: 5px;
  line-height: 1.6; overflow-wrap: anywhere;
}

/* 빛줄기가 종이를 쓸고, 지나간 자리에서 글자 줄이 나타난다.
   줄마다 늦추는 시간은 빛줄기가 그 높이에 닿는 때에 맞췄다. */
.sc-beam { animation: scanBeam 2.6s linear infinite; }
.sc-g { animation: scanReveal 2.6s ease-out infinite backwards; }
.sc-s1 { animation-delay: 0.40s; }
.sc-s2 { animation-delay: 0.92s; }
.sc-s3 { animation-delay: 1.10s; }
.sc-s4 { animation-delay: 1.29s; }
.sc-s5 { animation-delay: 1.48s; }
.sc-s6 { animation-delay: 1.77s; }
@keyframes scanBeam { from { transform: translateY(0); } to { transform: translateY(110px); } }
@keyframes scanReveal { 0%, 3% { opacity: 0.16; } 14%, 100% { opacity: 1; } }

/* 움직임을 줄여 달라고 설정한 기기에서는 멈춘 그림으로 보여준다 */
@media (prefers-reduced-motion: reduce) {
  .sc-beam { display: none; }
  .sc-g { animation: none; opacity: 1; }
}

/* 빈 상태 */
.empty { text-align: center; padding: 34px 20px; color: var(--muted); }
.empty svg { width: 44px; height: 44px; margin-bottom: 10px; opacity: 0.6; }
.empty .empty-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.empty .empty-sub { font-size: 13px; }

/* 수정 폼 */
.edit-field {
  width: 100%; padding: 10px; margin: 3px 0 10px; font-size: 15px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--text);
}
.edit-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.edit-item { border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin-bottom: 8px; }
.edit-item-top { display: flex; gap: 6px; margin-bottom: 6px; }
.edit-item-top input { flex: 1; min-width: 0; }
.edit-item-bottom { display: flex; gap: 6px; }
.edit-item input, .edit-item select {
  padding: 9px; font-size: 14px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--bg); color: var(--text); margin: 0;
}
.edit-qty { flex: 1; min-width: 0; }
.edit-amt { flex: 1.6; min-width: 0; }
.edit-cat { flex: 1.6; min-width: 0; }
.btn-row-del {
  border: none; background: var(--chip); color: var(--err-fg); border-radius: 9px;
  padding: 0 12px; font-size: 15px; font-weight: 700; cursor: pointer; flex: none;
}
.btn-edit {
  border: 1px solid var(--line); background: var(--card); color: var(--accent);
  border-radius: 9px; padding: 5px 11px; font-size: 13px; font-weight: 600; cursor: pointer;
  flex: none;
  display: inline-block; text-decoration: none;   /* 링크로 쓸 때도 같은 모양 */
}
.edit-btns { display: flex; gap: 8px; margin-top: 12px; }
.edit-btns button {
  flex: 1; padding: 12px; border: none; border-radius: 11px;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.btn-add-row {
  width: 100%; padding: 10px; margin-top: 2px; border: 1px dashed var(--line);
  background: var(--card); color: var(--accent); border-radius: 11px;
  font-size: 14px; cursor: pointer;
}
.btn-save { background: var(--accent); color: #fff; }
.btn-cancel { background: var(--chip); color: var(--text); }
.btn-del-receipt { background: var(--err-bg); color: var(--err-fg); }
.btn-discard { background: var(--chip); color: var(--err-fg); }

/* 검토대기 */
.card-pending { border: 2px solid var(--rev-fg); }
.pending-tag { font-size: 12px; font-weight: 700; color: var(--rev-fg); margin-bottom: 6px; }
.pending-btns { display: flex; gap: 8px; margin-top: 14px; }
.pending-btns button {
  flex: 1; padding: 12px; border: none; border-radius: 11px;
  font-size: 15px; font-weight: 600; cursor: pointer;
}

/* 분석 카드 */
.dash {
  width: 100%; max-width: var(--maxw);
  display: flex; flex-direction: column; align-items: center;
}
.insight-title { font-size: 15px; font-weight: 700; }
.insight-sub { font-size: 13px; color: var(--muted); margin-top: 3px; }
.insight-body { margin-top: 14px; }
.rank-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; }
.rank-num {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--chip); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.rank-row:first-child .rank-num { background: var(--accent-soft); color: var(--accent); }
.rank-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-side { color: var(--muted); font-size: 13px; flex: none; }
.rank-amt { font-weight: 600; font-size: 14px; flex: none; }
.hbar-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; }
.hbar-label { width: 76px; flex: none; display: flex; align-items: center; overflow: hidden; white-space: nowrap; }
.hbar-track { flex: 1; height: 8px; border-radius: 99px; background: var(--chip); overflow: hidden; }
.hbar-fill { height: 100%; border-radius: 99px; }
.hbar-amt { flex: none; width: 84px; text-align: right; font-weight: 600; }
.delta-badge {
  display: inline-block; font-size: 12px; font-weight: 700;
  padding: 3px 7px; border-radius: 7px; flex: none;
}
.delta-up { background: var(--err-bg); color: var(--err-fg); }
.delta-down { background: var(--accent-soft); color: var(--accent); }
.big-num { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; }
.split-bar { display: flex; height: 14px; border-radius: 99px; overflow: hidden; margin: 10px 0 8px; }
.split-a { background: var(--accent); }
.split-b { background: var(--chip); }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }

.account-line {
  text-align: center; font-size: 12px; color: var(--muted); margin-top: 10px;
  width: 100%; max-width: var(--maxw);
}
.account-line a { color: var(--accent); text-decoration: none; }

/* 로그인 화면 */
.login-wrap {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  width: 100%; max-width: var(--maxw); padding-bottom: 40px;
}
.login-logo { margin-bottom: 18px; }
.login-name { font-size: 30px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 8px; }
.login-tag { font-size: 14px; color: var(--muted); margin-bottom: 36px; }
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px;
  border: 1px solid var(--line); border-radius: 14px;
  background: #fff; color: #191f28;
  font-size: 15px; font-weight: 600; text-decoration: none;
  transition: transform 0.1s;
}
.btn-google:active { transform: scale(0.98); }
.login-foot { margin-top: 22px; font-size: 12px; color: var(--muted); }

/* 넓은 화면(PC). 폰은 900px를 넘지 않으므로 여기 규칙이 적용되지 않는다.
   body.wide 를 붙인 화면에만 적용한다 - 아직 분석 화면뿐이다. 안 붙은 화면까지
   넓히면 상단 줄만 넓어지고 아래 카드는 430px에 머물러 머리만 커진 꼴이 된다.
   하단 탭은 넓히지 않는다 - 넓히면 탭 세 개가 화면 양끝으로 벌어진다. */
@media (min-width: 900px) {
  body.wide .topbar,
  body.wide h1.page-title,
  body.wide .subtitle,
  body.wide .account-line,
  body.wide .report-section { max-width: var(--wide); }

  /* 분석 화면: 세로 한 줄 -> 두 단으로 벽돌 쌓기.
     격자로 놓으면 카드 높이가 제각각이라 아래가 들쭉날쭉하고 빈 칸이 남는다.
     단으로 흘리면 위에서부터 빈 데 없이 채워진다. 세 단은 카드가 좁아져
     막대그래프와 금액이 눌리므로 두 단으로 둔다. */
  body.wide .dash {
    max-width: var(--wide);
    display: block;
    columns: 2;
    column-gap: 12px;
  }
  body.wide .dash > .card,
  body.wide .dash > .skeleton {
    max-width: none;
    margin-bottom: 12px;
    break-inside: avoid;          /* 카드가 단 경계에서 잘리지 않게 */
    -webkit-column-break-inside: avoid;
  }
  /* 빈 상태 안내와 맨 아래 집계 줄은 한 단이 아니라 전체 폭을 쓴다 */
  body.wide .dash > .card.empty,
  body.wide .dash > .account-line { column-span: all; }

  /* 제목은 왼쪽 끝, 버튼은 오른쪽 끝에 있으면 넓은 화면에서 둘이 남처럼 보인다.
     좁은 화면에서는 어차피 가까우므로 넓을 때만 붙인다. */
  body.wide .report-section .card-head { justify-content: flex-start; gap: 14px; }

  /* 카드는 넓게 두되 안의 내용은 읽기 좋은 폭으로 묶는다. 안 묶으면 글줄이
     너무 길어 읽다가 줄을 놓치고, 목록은 이름과 오른쪽 값이 남처럼 벌어진다. */
  body.wide .report-section .insight-sub,
  body.wide .report-section .items-title,
  body.wide .report-section .rank-row,
  body.wide .report-section p { max-width: 640px; }
}