/* theme.css: 우리집 초이스 강조색과 제목 규칙 (3차 수정안, 디자인 담당 b)
   - 맨 마지막 CSS (shell.css 다음). 다른 파일은 고치지 않고 이 층에서 덮어쓴다.
   - 원칙(사용자 2026-10-18): 화면 틀은 지금처럼 흑백. 버튼, 선택 칩, 구간 고르기, 탭 밑줄, 사이드 선택, D-day 표시, 2px 구분선, 링크, 보통 막대는 검정 그대로.
     로고 색은 눈여겨볼 곳에만 쓴다. 코랄 = 주의, 파랑 = 좋음이나 지금(한 화면에 하나), 남색 = 그래프 색과 옅은 강조 바탕. */

/* ================= 1. 토큰 ================= */
:root,:root[data-theme="light"]{
  --c-navy:#2f265a;--c-navy-soft:#F1EFF7;
  --c-blue:#2f5bff;--c-blue-soft:#EEF2FF;
  --c-coral:#ff6b5a;--c-coral-ink:#d6402f;--c-coral-soft:#FFF1EF;--c-coral-line:#f2b8af;
  /* 그래프 색 순서 (도넛, 구성 막대): 남색, 파랑, 코랄, 옅은 남색, 옅은 파랑, 옅은 코랄 */
  --c-ch1:#2f265a;--c-ch2:#2f5bff;--c-ch3:#8e88b5;--c-ch4:#9fb3ff;--c-ch5:#c9c5dc;--c-ch6:#d3dcff;
  /* 쓰임새 이름: 새 화면은 이 이름을 쓴다 */
  --c-warn:var(--c-coral);--c-warn-t:var(--c-coral-ink);--c-warn-bg:var(--c-coral-soft);
  --c-ok:var(--c-blue);--c-ok-bg:var(--c-blue-soft);--c-now:var(--c-blue);
  --c-pick-bg:var(--c-navy-soft);
  /* 주의 면(초과 막대, 높은 위험 점)만 코랄. 글자용 --bad-t 등은 금액 글자에 쓰여 검정 그대로 */
  --bad:var(--c-coral);--bad-soft:var(--c-coral-soft);
  /* 제목 규칙 */
  --t-h1:30px;--t-h1-lh:36px;--t-row:40px;--t-logo-s:30px;--t-ctl:36px}
@media (max-width:767px){:root,:root[data-theme="light"]{--t-h1:24px;--t-h1-lh:30px;--t-row:36px;--t-ctl:34px}}

/* ================= 2. 화면 제목 규칙과 PC 제목 왼쪽 로고 =================
   제목 PC 30/900, 휴대폰 24/900. 제목 줄 PC 40, 휴대폰 36, 제목과 버튼은 가운데선. PC 제목 줄 버튼 36.
   로고는 theme.js가 붙이는 html[data-sec]의 섹션 로고, 768 이상에서만 (휴대폰은 맨 위 막대에 이미 있음). */
main.content :is(.phead,.bc-top) h1:not(.mt-head h1){font-size:var(--t-h1)!important;line-height:var(--t-h1-lh)!important;font-weight:900!important;letter-spacing:-.03em!important}
main.content :is(.phead,.bc-top):not(.mt-head){min-height:var(--t-row);align-items:center}
main.content .phead>.ttl:not(.row){min-height:var(--t-row);display:flex;flex-direction:column;justify-content:center}
main.content .phead>.ttl:not(.row)>small{order:2}
main.content .phead>.ttl>.ttl-row{min-height:var(--t-row);align-items:center}
@media (min-width:1100px){
  main.content .bc-top .btn.sm,main.content .phead>.acts>.btn.sm,main.content .phead>.acts>.acts-end>.btn.sm{height:var(--t-ctl);min-height:var(--t-ctl)}
  main.content .phead>.acts{align-self:center}
  main.content .phead>.acts .row.pp{min-height:var(--t-row)}
}
@media (min-width:768px){
  main.content :is(.phead,.bc-top) h1:not(.mt-head h1):not(:has(.ph-back,.ibtn)){display:flex;align-items:center;gap:12px}
  main.content :is(.phead,.bc-top) h1:not(.mt-head h1):not(:has(.ph-back,.ibtn))::before{content:"";flex:none;width:var(--t-logo-s);height:var(--t-logo-s);background:var(--t-logo,none) center/contain no-repeat}
}

/* ================= 3. 코랄: 주의 (지남, 초과, 확인할 것, 원칙 넘음, 스트레스 손실) ================= */
/* 3-1 지난 일정과 할 일 */
.bc-ev.late .t small,.bm-gh.late,.bm-l2 em.late,.home-due .t small.hd-late,.billrow .bd.neg{color:var(--c-warn-t)}
/* 3-2 예산 초과: 막대는 넘었을 때만 코랄, 글자는 진한 코랄 */
.bar.over i,.hbud-row .bar.over i{background:var(--c-warn)}
.hbud-row.st-over .v,.hbud-row.st-over .t small,.hbud-row.st-fast .t small{color:var(--c-warn-t)}
/* 3-4 그 밖의 오류 글자 */
/* 투자 홈의 원칙 넘음과 스트레스 손실은 invhome.css(a3)가 --c-coral-ink로 직접 칠한다 */
.bch-cf-err{color:var(--c-warn-t)}
.toast.err{background:var(--c-coral-ink)}

/* ================= 4. 파랑: 좋음이나 지금 (한 화면에 하나) ================= */
.bc-cell.today .bc-n{background:var(--c-now)}
/* 투자 원칙 지킴 칩(.ih-chip.ok)은 invhome.css(a3)가 --c-blue로 칠한다 */

/* ================= 5. 남색: 그래프 색과 옅은 강조 바탕 ================= */
/* 5-1 구성 막대 (choi.js MIX_INK 순서를 남색부터 바꿈) */
.mixb-bar>i:nth-child(8n+1),.mixb-lg>span:nth-child(8n+1)>i{background:var(--c-ch1)!important}
.mixb-bar>i:nth-child(8n+2),.mixb-lg>span:nth-child(8n+2)>i{background:var(--c-ch2)!important}
.mixb-bar>i:nth-child(8n+3),.mixb-lg>span:nth-child(8n+3)>i{background:var(--c-ch3)!important}
.mixb-bar>i:nth-child(8n+4),.mixb-lg>span:nth-child(8n+4)>i{background:var(--c-ch4)!important}
.mixb-bar>i:nth-child(8n+5),.mixb-lg>span:nth-child(8n+5)>i{background:var(--c-ch5)!important}
.mixb-bar>i:nth-child(8n+6),.mixb-lg>span:nth-child(8n+6)>i{background:var(--c-ch6)!important}
.mixb-bar>i:nth-child(8n+7),.mixb-lg>span:nth-child(8n+7)>i,.mixb-bar>i:nth-child(8n),.mixb-lg>span:nth-child(8n)>i{background:var(--ink-4)!important}
/* 5-2 캘린더에서 고른 날 칸 */
.bc-cell.sel{background:var(--c-pick-bg)}

/* ================= 6. 흑백으로 되돌림: 다른 화면이 먼저 넣은 로고 색 중 틀에 해당하는 것 ================= */
/* 점검 화면 탭 밑줄과 개수 배지는 검정과 회색 (ai2.css가 남색으로 넣어 둠) */
.bk-seg button[aria-selected="true"]{border-bottom-color:var(--ink)}
.bk-seg button[aria-selected="true"] b{background:var(--surface-3);color:var(--ink)}
/* 메신저 말풍선 안 보통 막대는 검정 (bchat.css가 파랑으로 넣어 둠) */
.bch-bub .aip-bar .bar i{background:var(--ink)}

/* ================= 7. 섹션 로고 (S/logos/x 확정본) ================= */
:root[data-sec="butler"]{--t-logo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='64'%3E%3Cdefs%3E%3CclipPath id='bt'%3E%3Cpath d='M6 20 Q6 14 12 16.5 L38 28 Q41 32 38 36 L12 47.5 Q6 50 6 44 Z' fill='%23000'/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath d='M6 20 Q6 14 12 16.5 L38 28 Q41 32 38 36 L12 47.5 Q6 50 6 44 Z' fill='%232f5bff'/%3E%3Cpath d='M58 20 Q58 14 52 16.5 L26 28 Q23 32 26 36 L52 47.5 Q58 50 58 44 Z' fill='%23ff6b5a'/%3E%3Cg clip-path='url(%23bt)'%3E%3Cpath d='M58 20 Q58 14 52 16.5 L26 28 Q23 32 26 36 L52 47.5 Q58 50 58 44 Z' fill='%232f265a'/%3E%3C/g%3E%3C/svg%3E")}
:root[data-sec="sched"]{--t-logo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='64'%3E%3Cdefs%3E%3CclipPath id='cal2'%3E%3Crect x='8' y='14' width='34' height='38' rx='10' fill='%23000'/%3E%3C/clipPath%3E%3C/defs%3E%3Crect x='8' y='14' width='34' height='38' rx='10' fill='%232f5bff'/%3E%3Crect x='22' y='22' width='34' height='34' rx='10' fill='%23ff6b5a'/%3E%3Cg clip-path='url(%23cal2)'%3E%3Crect x='22' y='22' width='34' height='34' rx='10' fill='%232f265a'/%3E%3C/g%3E%3Crect x='15' y='8' width='5' height='11' rx='2.5' fill='%232f265a'/%3E%3Crect x='30' y='8' width='5' height='11' rx='2.5' fill='%232f265a'/%3E%3Cpath d='M31 39 l5 5 l10 -11' stroke='%23fff' stroke-width='4.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
:root[data-sec="invest"]{--t-logo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='64'%3E%3Cdefs%3E%3CclipPath id='b1'%3E%3Crect x='4' y='34' width='22' height='22' rx='8' fill='%23000'/%3E%3C/clipPath%3E%3CclipPath id='b3'%3E%3Crect x='36' y='8' width='23' height='48' rx='8' fill='%23000'/%3E%3C/clipPath%3E%3C/defs%3E%3Crect x='4' y='34' width='22' height='22' rx='8' fill='%232f265a'/%3E%3Crect x='36' y='8' width='23' height='48' rx='8' fill='%23ff6b5a'/%3E%3Crect x='20' y='21' width='22' height='35' rx='8' fill='%232f5bff'/%3E%3Cg clip-path='url(%23b1)'%3E%3Crect x='20' y='21' width='22' height='35' rx='8' fill='%231c1838'/%3E%3C/g%3E%3Cg clip-path='url(%23b3)'%3E%3Crect x='20' y='21' width='22' height='35' rx='8' fill='%232f265a'/%3E%3C/g%3E%3Cpath d='M47.5 41 C43 41 40.5 38 40.5 34.3 C40.5 30.5 43.5 28.6 44.2 24.5 C46.5 26.3 47.5 28.4 47.5 30.2 C49 29.2 49.8 27.4 49.8 25.6 C53 28.2 55 31.2 55 34.7 C55 38.4 52.3 41 47.5 41 Z' fill='%23fff'/%3E%3C/svg%3E")}
:root[data-sec="ledger"]{--t-logo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='64'%3E%3Cdefs%3E%3CclipPath id='lc'%3E%3Crect x='8' y='17' width='30' height='38' rx='10'/%3E%3C/clipPath%3E%3C/defs%3E%3Crect x='8' y='17' width='30' height='38' rx='10' fill='%232f5bff'/%3E%3Crect x='26' y='9' width='30' height='38' rx='10' fill='%23ff6b5a'/%3E%3Crect x='26' y='9' width='30' height='38' rx='10' fill='%232f265a' clip-path='url(%23lc)'/%3E%3Cpath d='M41 25 L51 25 M41 31.5 L51 31.5' stroke='%23fff' fill='none' stroke-linecap='round' stroke-width='3'/%3E%3C/svg%3E")}
:root[data-sec="app"]{--t-logo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='64' fill='none'%3E%3Cpath d='M6 30L32 8l26 22' stroke='%2315171C' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='18' cy='45' r='10.5' fill='%232f5bff'/%3E%3Ccircle cx='14.22' cy='43.74' r='1.4700000000000002' fill='%23fff'/%3E%3Ccircle cx='21.78' cy='43.74' r='1.4700000000000002' fill='%23fff'/%3E%3Cpath d='M15.059999999999999 47.31q2.9400000000000004 2.9400000000000004 5.880000000000001 0' stroke='%23fff' stroke-width='1.4700000000000002' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='46' cy='45' r='10.5' fill='%23ff6b5a'/%3E%3Ccircle cx='42.22' cy='43.74' r='1.4700000000000002' fill='%2315171C'/%3E%3Ccircle cx='49.78' cy='43.74' r='1.4700000000000002' fill='%2315171C'/%3E%3Cpath d='M43.06 47.31q2.9400000000000004 2.9400000000000004 5.880000000000001 0' stroke='%2315171C' stroke-width='1.4700000000000002' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='32' cy='51' r='7.5' fill='%2315171C'/%3E%3Ccircle cx='29.3' cy='50.1' r='1.3' fill='%23fff'/%3E%3Ccircle cx='34.7' cy='50.1' r='1.3' fill='%23fff'/%3E%3Cpath d='M29.9 52.65q2.1 2.1 4.2 0' stroke='%23fff' stroke-width='1.3' stroke-linecap='round' fill='none'/%3E%3Cg transform='translate(22 29) rotate(-12) scale(.542) translate(-6 -5.2)'%3E%3Cpath d='M6 10.5S0 7.2 0 3.6C0 1.6 1.6 0 3.5 0 4.7 0 5.5.6 6 1.4 6.5.6 7.3 0 8.5 0 10.4 0 12 1.6 12 3.6 12 7.2 6 10.5 6 10.5z' fill='%232f5bff'/%3E%3C/g%3E%3Cg transform='translate(42 29) rotate(12) scale(.542) translate(-6 -5.2)'%3E%3Cpath d='M6 10.5S0 7.2 0 3.6C0 1.6 1.6 0 3.5 0 4.7 0 5.5.6 6 1.4 6.5.6 7.3 0 8.5 0 10.4 0 12 1.6 12 3.6 12 7.2 6 10.5 6 10.5z' fill='%23ff6b5a'/%3E%3C/g%3E%3C/svg%3E")}

/* 예산관리: 넘은 항목의 % 글자 (총괄 추가) */
.bd-ov{color:var(--c-warn-t)}
/* 예산관리: 이번 지출이 지난달과 작년 같은 시점보다 모두 많을 때 (총괄 추가) */
.bd-pace.hot .bdc-now{stroke:var(--c-warn)}
.bd-pace.hot .bdc-dot{fill:var(--c-warn)}
.bd-pace.hot .bd-lg.now i{border-top-color:var(--c-warn)}
.bd-pace.hot .bd-lg.now b{color:var(--c-warn-t)}

/* 휴대폰: 섹션 메뉴(탭 줄)도 위에 고정 (총괄 추가, 2026-10-18).
   맨 위 막대가 따라오는 화면은 그 밑에, 막대가 같이 올라가는 화면은 맨 위에 붙고, 작은 제목 막대(.ctop)가 나오면 그 밑으로 내려가요.
   그 아래에 붙는 줄들(화면 안 탭, 날짜 머리, 칩, 설정 검색)은 섹션 메뉴 높이만큼 더 내려가요. */
@media (max-width:1099px){
  /* v70: 맨 위 막대(54)는 항상 고정, 탭은 그 바로 아래 */
  .app:has(.sec-tabs){--sth:44px;--hdr0:calc(54px + env(safe-area-inset-top,0px))}
  .app:has(.sec-tabs) .sec-tabs{position:sticky;top:var(--hdr0);z-index:29}
  .app:has(.sec-tabs) .sticky-tabs,.app:has(.sec-tabs) .dayh,.app:has(.sec-tabs) .b8-chips,.app:has(.sec-tabs) .set-sub .set-stick{top:calc(var(--hdr0) + var(--sth))}
  .app:has(.sec-tabs) .rp-cats,.app:has(.sec-tabs) .rp-month,.app:has(.sec-tabs) .co-card{scroll-margin-top:170px}
}
/* 휴대폰: 내려서 나오는 작은 제목 줄(.ctop)에도 제목 왼쪽에 섹션 로고 (2026-10-19) */
@media (max-width:1099px){
  .ctop-t{display:flex;align-items:center;gap:8px}
  .ctop-t::before{content:"";flex:none;width:22px;height:22px;background:var(--t-logo,none) center/contain no-repeat}
}
/* 좌우로 넘길 때 화면이 옆으로 밀리며 가로 스크롤이 생기지 않게 (2026-10-19) */
@media (max-width:1099px){.main{overflow-x:clip}}
/* 휴대폰: 두 손가락 확대와 두 번 눌러 확대를 막고 스크롤만 남겨요 (2026-10-19) */
/* touch-action은 manipulation(두 번 눌러 확대만 막음): pan-x pan-y는 iOS에서 선택 칸, 체크 상자 반응을 막을 수 있어 바꿈 (v68). 두 손가락 확대는 theme.js가 막음 */
@media (max-width:1099px){html,body{touch-action:manipulation}}

/* QA F04: 일부를 못 불러왔을 때 한 줄 */
.part-err{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:0 0 12px;padding:10px 14px;border-radius:12px;background:var(--c-warn-bg);color:var(--c-warn-t);font-size:13.5px;word-break:keep-all}
.part-err .lnk{color:inherit;font-weight:700;text-decoration:underline}