/* mockup.css(시안 원본, 수정 금지) 위에 얹는 보조 스타일 — 시안 토큰(--primary 등)만 사용.
   시안에 없는 요소: 로고 이미지, 자동로그인, 나만보기/집계제외 배지, 거래 상세 모달, 키워드 칩, 토스트 */

/* 시안 🌱 자리 → 새싹 감자 도트(사용자 지정) */
.sb-logo img{width:34px;height:34px;image-rendering:pixelated}
.login-logo img{width:72px;height:72px;image-rendering:pixelated;display:block}

/* 로그인 보조: 자동 로그인, 앱 받기, 버전 */
.login-opts{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--sub);margin:2px 0 12px}
.login-opts input{width:16px;height:16px;accent-color:var(--primary)}
.login-err{color:var(--expense);font-size:12px;min-height:16px;margin-bottom:6px}
.login-foot{font-size:12px;color:var(--sub);text-align:center;margin-top:10px}
.login-foot a{color:var(--primary);font-weight:700;text-decoration:none}

/* 거래 목록 보조 배지 */
.tx-flag{font-size:9px;padding:2px 5px;border-radius:5px;margin-left:2px}
.tx-flag.priv{background:#F0E8FF;color:#7B4FD6}
.tx-flag.excl{background:#FFF3CD;color:#856404}
.tx-empty{padding:40px 0;text-align:center;color:var(--sub);font-size:13px}
.tx-more{display:block;margin:14px auto;padding:9px 22px;border-radius:20px;border:1.5px solid var(--border);background:#fff;color:var(--sub);font-weight:700;font-size:12px;cursor:pointer}

/* 모달 안 토글 줄(나만 보기·집계 제외) */
.tog-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border)}
.tog-row:last-child{border-bottom:none}
.tog-row b{font-size:14px}
.tog-row small{display:block;font-size:11px;color:var(--sub);margin-top:2px}
.switch{position:relative;width:44px;height:26px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:var(--border);border-radius:13px;transition:.2s;cursor:pointer}
.switch span:before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked+span{background:var(--primary)}
.switch input:checked+span:before{transform:translateX(18px)}
.switch input:disabled+span{opacity:.45;cursor:not-allowed}
.modal .sub-note{font-size:12px;color:var(--sub);margin:-8px 0 12px}
.modal img.receipt-img{width:100%;border-radius:12px;margin-bottom:12px;background:var(--bg)}
.btn-danger-line{background:#fff;color:var(--expense);border:1.5px solid var(--expense)}

/* 차단 키워드 칩 */
.kw-wrap{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;min-height:20px}
.kw-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px 6px 12px;border-radius:20px;background:var(--primary-l);color:var(--primary);font-size:12px;font-weight:700}
.kw-chip button{border:none;background:none;color:var(--primary);font-size:14px;cursor:pointer;line-height:1}
.kw-add{display:flex;gap:8px}
.kw-add input{flex:1;padding:11px 14px;border:1.5px solid var(--border);border-radius:12px;font-size:14px;outline:none;background:#FAFAFF}
.kw-add button{padding:0 16px;border:none;border-radius:12px;background:var(--primary);color:#fff;font-weight:700;cursor:pointer}

/* 계좌 목록(은행 연동 모달) */
.acct-item{padding:12px 0;border-bottom:1px solid var(--border)}
.acct-item .acct-name{font-size:14px;font-weight:700}
.acct-item .acct-meta{font-size:11px;color:var(--sub);margin-top:2px}

/* 모바일: 시안 탭바에 설정이 없어 대시보드 상단에 설정 버튼(데스크톱은 사이드바) */
.hero-gear{display:none}
@media(max-width:767px){.hero-gear{display:inline-flex}}

/* 토스트 */
#toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:rgba(26,26,46,.92);color:#fff;padding:11px 18px;border-radius:12px;font-size:13px;font-weight:600;z-index:900;display:none;max-width:88vw;text-align:center}
#toast.show{display:block}
.upload-progress{margin:0 16px 12px;font-size:12px;color:var(--primary);font-weight:700;min-height:16px}
@media(min-width:768px){.upload-progress{margin:0 24px 12px}}

/* 시안 의도 반영: 탭바는 모바일 전용(시안 JS가 인라인 display로 데스크톱에도 띄우던 것 차단),
   로그인 전에는 사이드바 없이 전체 화면(#login margin-left:0 의도) */
@media(min-width:768px){#tab-bar{display:none!important}}
body.logged-out #sidebar{display:none}
body.logged-out #main{margin-left:0}

/* 프로필 캐릭터(시안 👤/👩 이모지 자리) — 도트 선명하게 */
img.av{image-rendering:pixelated;vertical-align:-3px;width:18px;height:18px}
.profile-avatar img.av{width:60px;height:60px;vertical-align:middle}
.sb-avatar img.av{width:30px;height:30px;vertical-align:middle}
.setting-icon img.av{width:22px;height:22px;vertical-align:-5px}
.who-btn img.av{width:20px;height:20px;vertical-align:-5px;margin-right:2px}

/* 모아보자 · 혜택 (시안 카드/칩/목록 토큰 재사용) */
.save-rates{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 16px 8px}
@media(min-width:768px){.save-rates{padding:0 24px 8px}}
.rate-card{background:var(--card);border-radius:14px;padding:12px;box-shadow:var(--shadow);text-align:center;border:1.5px solid transparent}
.rate-card.best{border-color:var(--primary)}
.rate-card .rc-rate{font-size:11px;font-weight:700;color:var(--sub)}
.rate-card .rc-amt{font-size:16px;font-weight:900;margin:4px 0}
.rate-card .rc-ok{font-size:10px;font-weight:700}
.goal-actions{display:flex;gap:6px;justify-content:flex-end;margin-top:10px}
.goal-note{font-size:11px;color:var(--sub);margin-top:6px}
.goal-note b{color:var(--text)}
.bf-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.bf-tags span{background:rgba(255,255,255,.22);padding:3px 10px;border-radius:12px;font-size:11px;font-weight:700}
.bf-people{font-size:11px;opacity:.85;margin-top:8px}
.bf-card{margin:0 16px 12px;background:var(--card);border-radius:16px;padding:16px;box-shadow:var(--shadow);font-size:13px;line-height:1.6}
@media(min-width:768px){.bf-card{margin:0 24px 12px}}
.bf-card h4{font-size:14px;margin-bottom:6px}
.bf-card ol{padding-left:18px;color:var(--sub)}
.bf-card a{color:var(--primary);font-weight:700}
.bf-reasons{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.bf-reasons span{font-size:10px;font-weight:700;padding:2px 7px;border-radius:8px;background:#E8FFF5;color:var(--income)}
.bf-scope{font-size:10px;font-weight:700;padding:2px 7px;border-radius:8px;background:var(--primary-l);color:var(--primary);white-space:nowrap}
.bf-foot{font-size:11px;color:var(--sub);padding:16px;line-height:1.5}
@media(min-width:768px){.bf-foot{padding:16px 24px}}
.bfd-body{font-size:13px;line-height:1.6;color:var(--text);white-space:pre-line}
.bfd-body b{display:block;margin-top:10px;color:var(--sub);font-size:11px}
.bfd-link{text-align:center;text-decoration:none;display:flex;align-items:center;justify-content:center}
.who-toggle input{flex:1;min-width:0}