/* lhome2.css (v76, 2026-10-20): 장부 홈 v2 (lhome2.js). 맨 마지막에 읽는다.
   색과 크기는 시안 보드의 토큰과 같다: 바탕 #F4F5F7, 카드 흰 면(모서리 20, 안쪽 20, 사이 12), 글자 11 12 13 14 15 17 20 24 32,
   단추 화면 단위 36, 카드 안 32. 코랄은 주의, 파랑은 좋음, 남색과 연파랑은 예산 지출과 예산 외 지출.
   .v2를 품은 화면만 회색 바탕이 된다. 다른 화면을 v2로 옮길 때도 이 토큰(--v-*)과 카드(.l2-card)를 쓴다. */

:root,:root[data-theme="light"]{
  --v-ground:#F4F5F7;--v-card:#FFFFFF;--v-ink:#15171C;--v-ink2:#4E5561;--v-ink3:#6B7280;--v-line:#EBEDF0;--v-track:#EEF0F3;--v-track2:#E2E5EA;
  --v-navy:#2F265A;--v-blue:#2F5BFF;--v-blue-bg:#EAEFFF;--v-coral:#FF6B5A;--v-coral-t:#C2402F;--v-coral-bg:#FFF0EE;--v-peri:#8EA2FF;--v-mute:#AEB4BE;--v-icon3:#9AA1AD;
  --v-inc1:#4E5561;--v-inc2:#AEB4BE;--v-inc3:#E2E5EA;--v-g0:#D5D9DF;--v-green:#12B886;--v-amber:#B7791F;--v-amber-bg:#FFF6E5}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --v-ground:#0F1013;--v-card:#1A1C21;--v-ink:#F2F4F7;--v-ink2:#B5BDC9;--v-ink3:#8B93A1;--v-line:#2C3038;--v-track:#2A2D34;--v-track2:#353942;
  --v-navy:#B3AAF2;--v-blue:#7D98FF;--v-blue-bg:#1C2340;--v-coral:#FF8B78;--v-coral-t:#FF9D8C;--v-coral-bg:#3A201C;--v-peri:#5B6BC4;--v-mute:#5D6573;--v-icon3:#7F8897;
  --v-inc1:#B5BDC9;--v-inc2:#6A717D;--v-inc3:#3D424B;--v-g0:#454A54;--v-green:#3CCF94;--v-amber:#F2B44A;--v-amber-bg:#2F2412}}
:root[data-theme="dark"]{
  --v-ground:#0F1013;--v-card:#1A1C21;--v-ink:#F2F4F7;--v-ink2:#B5BDC9;--v-ink3:#8B93A1;--v-line:#2C3038;--v-track:#2A2D34;--v-track2:#353942;
  --v-navy:#B3AAF2;--v-blue:#7D98FF;--v-blue-bg:#1C2340;--v-coral:#FF8B78;--v-coral-t:#FF9D8C;--v-coral-bg:#3A201C;--v-peri:#5B6BC4;--v-mute:#5D6573;--v-icon3:#7F8897;
  --v-inc1:#B5BDC9;--v-inc2:#6A717D;--v-inc3:#3D424B;--v-g0:#454A54;--v-green:#3CCF94;--v-amber:#F2B44A;--v-amber-bg:#2F2412}

/* ---------- 바탕과 배치 ---------- */
body:has(.v2){background:var(--v-ground)}
/* 화면 바탕(--bg)만 회색으로. 휴대폰 맨 위 막대는 흰 면 그대로 */
.app:has(.v2){--bg:var(--v-ground);--bg-fade:var(--v-ground)}
.app:has(.v2) .mtop{background:color-mix(in srgb,var(--v-card) 86%,transparent)}
.v2{display:flex;flex-direction:column;gap:12px;min-width:0;color:var(--v-ink)}
.v2 .tnum,.v2 .l2-card{font-variant-numeric:tabular-nums}
.content:has(>.v2){gap:0}
@media (max-width:767px){
  .main:has(.sec-tabs) .content:has(>.v2),.content:has(>.v2){padding-top:12px}
  /* 휴대폰: 제목 줄은 화면에서 감춘다 (맨 위 막대가 섹션 이름을 보여 주고, 스크롤하면 작은 제목 막대가 이 제목을 읽는다) */
  .v2>.phead{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
}
.l2-dash,.l2-cols,.l2-col{display:flex;flex-direction:column;gap:12px;min-width:0}
@media (min-width:900px){
  .l2-dash,.l2-col{gap:16px}
  .l2-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:16px}
  /* 왼쪽과 오른쪽 단의 아래 끝을 맞춘다: 단마다 마지막 카드가 남는 높이를 채우고, 예상 입출금액의 합계 줄은 맨 아래 */
  .l2-cols{align-items:stretch}
  .l2-col>:last-child{flex:1 1 auto}
  .l2-due .l2-tot{margin-top:auto}
  /* 요약: 줄마다 칸 하나, 칸 머리에 종류 (가로 전체에서 빈 곳 없이) */
  .l2-tori .l2-tl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .l2-tori .l2-tl li{display:flex;flex-direction:column;gap:8px;padding:16px 18px;border-radius:14px;background:var(--v-ground)}
  .l2-tori .l2-tl .l2-tt{display:block}
  .l2-tori .l2-tl li::before{display:none}
  .l2-tori .l2-tl .l2-tg{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--v-ink2)}
  .l2-tori .l2-tl .l2-tg::before{content:"";flex:none;width:8px;height:8px;border-radius:999px;background:var(--v-mute)}
  .l2-tori .l2-tl li.t-warn .l2-tg{color:var(--v-coral-t)}.l2-tori .l2-tl li.t-warn .l2-tg::before{background:var(--v-coral)}
  .l2-tori .l2-tl li.t-ok .l2-tg{color:var(--v-blue)}.l2-tori .l2-tl li.t-ok .l2-tg::before{background:var(--v-blue)}
  .l2-tori .l2-tl li.t-info .l2-tg{color:var(--v-navy)}.l2-tori .l2-tl li.t-info .l2-tg::before{background:var(--v-navy)}
}
@media (min-width:1100px){.l2-tori .l2-tl{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
.l2-tl .l2-tg{display:none}
@media (min-width:1100px){.v2{gap:16px}}

/* ---------- 기간 줄 ---------- */
.lpb{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;position:relative}
.lpb-nav{display:flex;align-items:center;margin-left:-6px;min-width:0}
.lpb-arw{flex:none;width:32px;height:36px;display:flex;align-items:center;justify-content:center;border:0;background:none;padding:0;color:var(--v-ink2);cursor:pointer;border-radius:10px}
.lpb-lab{height:36px;padding:0 2px;border:0;background:none;display:flex;align-items:center;gap:2px;font:inherit;font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--v-ink);cursor:pointer;white-space:nowrap;border-radius:10px}
.lpb-lab .ico{color:var(--v-ink3)}
/* 작은 고르기 단추 (기간 단위, 거래 정렬) */
.l2-dd{position:relative;flex:none}
.l2-ddb{height:36px;padding:0 10px 0 14px;border-radius:999px;border:1px solid var(--v-line);background:var(--v-card);display:flex;align-items:center;gap:4px;font:inherit;font-size:14px;font-weight:600;color:var(--v-ink);white-space:nowrap;cursor:pointer}
.l2-ddb[aria-expanded="true"]{border-color:var(--v-ink)}
.l2-dd.sm .l2-ddb{height:32px;padding:0 8px 0 12px;font-size:13px}
.l2-ddm{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:150px;padding:6px;background:var(--v-card);border-radius:14px;box-shadow:0 12px 32px rgba(21,23,28,.16),0 0 0 1px rgba(21,23,28,.06);display:flex;flex-direction:column}
.l2-ddm button{height:40px;padding:0 10px 0 12px;border:0;background:none;border-radius:10px;display:flex;align-items:center;justify-content:space-between;gap:12px;font:inherit;font-size:14px;font-weight:500;color:var(--v-ink);cursor:pointer;white-space:nowrap;text-align:left}
.l2-ddm button[aria-checked="true"]{font-weight:700}
@media (hover:hover){.l2-ddm button:hover{background:var(--v-ground)}}
@media (hover:hover){.lpb-arw:hover,.lpb-lab:hover{background:color-mix(in srgb,var(--v-ink) 6%,transparent)}}
.lpb .pp-cust{margin:0 2px}
.lpb .pp-box{height:36px;border:0;background:none;padding:0 4px;font-size:16px;font-weight:700;color:var(--v-ink)}
.lpb .pp-pop{left:0;right:auto}
@media (min-width:768px){
  /* 태블릿에서도 제목 옆에 기간 줄 (m26.css의 display:contents를 되돌림) */
  .v2>.phead>.ttl:has(>.ttl-row){display:flex!important}
  .v2>.phead>.ttl>.ttl-row{display:flex!important;flex-wrap:nowrap;align-items:center;gap:20px}
  .v2>.phead>.ttl>.ttl-row>h1{flex:none}
  .v2 .phead .lpb.pp{display:flex!important;justify-content:flex-start;gap:12px;min-height:40px}
  .v2 .phead .lpb .l2-ddm{left:0;right:auto}
}

/* ---------- 장부 점검 한 줄 (lhome.js LhFlag) ---------- */
.v2 .lh-flag{display:flex!important;align-items:center;gap:10px;flex-wrap:nowrap;width:100%;max-width:none;height:48px;min-height:48px;padding:0 12px 0 14px!important;border:0!important;border-radius:16px!important;background:var(--v-coral-bg)!important;color:var(--v-ink)}
.v2 .lh-flag::before{content:"";flex:none;width:8px;height:8px;border-radius:999px;background:var(--v-coral)}
.v2 .lh-flag b{flex:none;font-size:14px;font-weight:700;color:var(--v-coral-t);white-space:nowrap}
.v2 .lh-flag .dx-s{flex:1 1 auto;min-width:0;font-size:14px;color:var(--v-ink2);white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis;grid-column:auto;grid-row:auto}
.v2 .lh-flag .ico{flex:none;width:18px;height:18px;margin-left:0;color:var(--v-coral-t)}
@media (hover:hover){.v2 .lh-flag:hover b{text-decoration:underline;text-underline-offset:3px}}
@media (min-width:1100px){.v2 .phead .acts .lh-flag{width:auto;max-width:440px;height:40px;min-height:40px;border-radius:12px!important}}

/* ---------- 한 줄 입력 (screens1.js QuickLine) ---------- */
.v2 .qline-in{height:52px;border:0;border-radius:16px;padding:0 6px 0 16px;gap:10px;background:var(--v-card)}
.v2 .qline-in:focus-within{box-shadow:0 0 0 2px var(--v-ink)}
.v2 .qline-in>.ico{color:var(--v-ink2);width:20px;height:20px}
.v2 .qline-in input{font-size:15px;color:var(--v-ink)}
.v2 .qline-in .btn.pri{height:40px;min-height:40px;padding:0 14px;border-radius:12px;border:0;background:var(--v-ink);color:var(--v-card);font-size:14px;font-weight:600;box-shadow:none}
.v2 .qline-fq .chip{background:var(--v-card)}
.v2 .mk-home{border-radius:20px;border:0}

/* ---------- 카드 ---------- */
.l2-card{background:var(--v-card);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:16px;min-width:0;color:var(--v-ink);position:relative}
.l2-h{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px}
.l2-h h2{margin:0;font-size:17px;line-height:24px;font-weight:700;letter-spacing:-.02em;display:flex;align-items:baseline;white-space:nowrap;color:var(--v-ink);min-width:0;text-wrap:nowrap}
.l2-h h2 small{font-size:13px;font-weight:500;color:var(--v-ink3);margin-left:6px;letter-spacing:0;overflow:hidden;text-overflow:ellipsis}
.l2-h .dx-info{margin-left:2px}
.v2 .dx-ib{margin:0;width:24px;height:24px}
.v2 .dx-ib>i{width:16px;height:16px;background:var(--v-icon3)}
.v2 .dx-info.open .dx-ib>i{background:var(--v-ink2)}
.v2 .dx-pop{background:var(--v-card);border-color:var(--v-line);color:var(--v-ink2);font-size:13px}
.v2 .dx-pop b{color:var(--v-ink);font-weight:700}
.l2-more{display:flex;align-items:center;gap:2px;flex:none;height:32px;margin:-4px -6px -4px 0;padding:0 6px;border:0;background:none;font:inherit;font-size:14px;font-weight:500;color:var(--v-ink3);white-space:nowrap;cursor:pointer;border-radius:8px}
.l2-more .ico{color:var(--v-ink3)}
@media (hover:hover){.l2-more:hover{color:var(--v-ink)}.l2-more:hover .ico{color:var(--v-ink)}}
.l2-empty{margin:0;font-size:14px;line-height:1.5;color:var(--v-ink2);word-break:keep-all}
.l2-btn{align-self:flex-start;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--v-line);background:var(--v-card);font:inherit;font-size:13px;font-weight:600;color:var(--v-ink);cursor:pointer}

/* 토리의 요약 */
.l2-tori{gap:14px}
.l2-th{display:flex;align-items:center;gap:8px}
.l2-th h2{margin:0;font-size:17px;line-height:24px;font-weight:700;letter-spacing:-.02em}
.l2-th .logo{flex:none}
.l2-tl{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.l2-tl li{position:relative;padding-left:15px;font-size:15px;line-height:1.55;word-break:keep-all;overflow-wrap:anywhere;color:var(--v-ink)}
.l2-tl li::before{content:"";position:absolute;left:0;top:10px;width:5px;height:5px;border-radius:999px;background:var(--v-ink)}
.l2-tl b{font-weight:700}.l2-tl b.hot{color:var(--v-coral-t)!important}

/* 지출 */
.l2-money{display:flex;align-items:baseline;gap:2px;margin-top:-4px;color:var(--v-ink)}
.l2-money b{font-size:32px;font-weight:700;letter-spacing:-.03em;line-height:1.15}
.l2-money span{font-size:19px;font-weight:600}
.l2-split{display:flex;height:10px;border-radius:999px;overflow:hidden;gap:2px;background:var(--v-track)}
.l2-split i{display:block;min-width:0;background:var(--v-navy)}.l2-split i.o{background:var(--v-peri)}
.l2-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.l2-tile{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:14px;border-radius:14px;background:var(--v-ground);min-width:0;border:0;font:inherit;color:var(--v-ink);text-align:left;cursor:pointer}
.l2-tile>span{display:block}
.l2-tile>.l2-tk{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--v-ink2)}
.l2-tk i{flex:none;width:8px;height:8px;border-radius:999px;background:var(--v-navy)}.l2-tk i.o{background:var(--v-peri)}
.l2-tv{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.l2-tile>.l2-tm{display:flex;align-items:baseline;gap:4px;font-size:15px;font-weight:700;line-height:1.3}
.l2-tm>span{font-size:13px;font-weight:500;color:var(--v-ink2)}
.l2-tm>span.na{color:var(--v-ink3)}
.l2-tm .hot{color:var(--v-coral-t)}.l2-tm .dn{color:var(--v-blue)}
.l2-tile>.l2-mini{position:relative;height:6px;border-radius:999px;background:var(--v-track2)}
.l2-tile>.l2-mini.sp{background:none}
.l2-mini i{display:block;height:100%;border-radius:999px;background:var(--v-navy)}.l2-mini i.over{background:var(--v-coral)}
.l2-mini em{position:absolute;top:-3px;width:2px;height:12px;margin-left:-1px;background:var(--v-ink);border-radius:1px}
.l2-tf{font-size:12px;line-height:1.45;color:var(--v-ink2);word-break:keep-all}
.l2-tf .hot{color:var(--v-coral-t)}
@media (hover:hover){.l2-tile:hover{background:color-mix(in srgb,var(--v-ink) 5%,var(--v-ground))}}

/* 예산 항목 */
.l2-bud{gap:18px}
.l2-bg{display:flex;flex-direction:column;gap:18px}
.l2-sh{font-size:13px;font-weight:600;color:var(--v-ink3);margin-bottom:-6px}
.l2-br{display:flex;flex-direction:column;gap:8px;width:100%;padding:0;border:0;background:none;font:inherit;color:var(--v-ink);text-align:left;cursor:pointer}
.l2-br1{display:flex;align-items:center;gap:8px;min-width:0;width:100%}
.l2-br1 .nm{font-size:15px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.l2-br1 .v{margin-left:auto;font-size:14px;color:var(--v-ink3);white-space:nowrap}
.l2-br1 .v b{color:var(--v-ink);font-weight:600}
.l2-br.over .l2-br1 .v b{color:var(--v-coral-t)}
.l2-br1 .p{flex:none;min-width:32px;text-align:right;font-size:13px;font-weight:600;color:var(--v-ink2);white-space:nowrap}
.l2-br1 .p.warn{color:var(--v-coral-t)}
.l2-pill{flex:none;display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;background:var(--v-coral);color:#fff;font-size:12px;font-weight:700;white-space:nowrap}
.l2-bar{position:relative;display:block;width:100%;height:6px;border-radius:999px;background:var(--v-track)}
.l2-bar i{display:block;height:100%;border-radius:999px;background:var(--v-navy)}
.l2-br.over .l2-bar i{background:var(--v-coral)}
.l2-bar em{position:absolute;top:-4px;width:2px;height:14px;margin-left:-1px;background:var(--v-ink);border-radius:1px}
.l2-agg{display:flex;align-items:center;gap:8px;width:100%;padding:14px 16px;border-radius:12px;background:var(--v-ground);border:0;font:inherit;color:var(--v-ink);cursor:pointer;text-align:left}
.l2-agg .t{font-size:14px;font-weight:600;color:var(--v-ink2);white-space:nowrap}
.l2-agg .v{margin-left:auto;font-size:14px;white-space:nowrap;color:var(--v-ink2)}.l2-agg .v b{font-weight:600;color:var(--v-ink)}
.l2-agg .ico{flex:none;color:var(--v-icon3)}

/* 예산 외 항목 */
.l2-once{gap:8px}
.l2-ol{display:flex;flex-direction:column}
.l2-or{display:flex;align-items:center;gap:12px;min-height:56px;width:100%;padding:0;border:0;background:none;font:inherit;color:var(--v-ink);text-align:left;cursor:pointer}
div.l2-or{cursor:default}
.l2-or .l{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.l2-or .nm{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.l2-or.etc .nm{color:var(--v-ink2)}
.l2-or .s{font-size:13px;color:var(--v-ink2)}
.l2-or .r{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px;white-space:nowrap}
.l2-or .v{font-size:15px;font-weight:600}.l2-or .v small{font-size:12px;font-weight:400;color:var(--v-ink3);margin-left:4px}
.l2-or .d{font-size:13px;font-weight:600;color:var(--v-ink2)}.l2-or .d.hot{color:var(--v-coral-t)}.l2-or .d.dn{color:var(--v-blue)}.l2-or .d.z{color:var(--v-ink3);font-weight:500}

/* 수입과 지출 */
.l2-flow{gap:14px}
.l2-lg{display:flex;flex-direction:column;gap:6px}
.l2-lg .r{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.l2-lg .h{flex:none;width:28px;font-size:12px;font-weight:700;color:var(--v-ink2)}
.l2-chip{height:30px;padding:0 10px;border-radius:999px;background:var(--v-card);box-shadow:inset 0 0 0 1px var(--v-line);border:0;display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12px;font-weight:600;color:var(--v-ink);white-space:nowrap;cursor:pointer}
.l2-chip i{flex:none;width:10px;height:10px;border-radius:3px}
.l2-chip[aria-pressed="false"]{color:var(--v-ink3)}
.l2-chip[aria-pressed="false"] i{opacity:.25}
.l2-reset{height:30px;padding:0 6px;border:0;background:none;font:inherit;font-size:12px;font-weight:600;color:var(--v-ink3);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.l2-chart{position:relative}
.l2-cs{margin-right:40px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.l2-cs::-webkit-scrollbar{display:none}
.l2-cs svg{display:block}
.l2-ax{position:absolute;right:0;top:0;pointer-events:none;overflow:visible}
.l2-ax text{font-size:11px;fill:var(--v-ink3)}
.l2-fade{position:absolute;left:0;top:0;bottom:44px;width:10px;background:linear-gradient(90deg,var(--v-card),color-mix(in srgb,var(--v-card) 0%,transparent));pointer-events:none;transition:opacity .15s}
.l2-g{stroke:var(--v-line)}.l2-g0{stroke:var(--v-g0)}
.l2-xl{font-size:12px;font-weight:500;fill:var(--v-ink2)}.l2-xl.on{font-weight:700;fill:var(--v-ink)}
.l2-rl{font-size:11px;fill:var(--v-ink2)}.l2-rl.neg{fill:var(--v-coral-t)}.l2-rl.run{fill:var(--v-ink3)}
.l2-hov{fill:var(--v-ground)}
.v2 .l2-tip{background:var(--v-card);border-color:var(--v-line)}
.v2 .l2-tip .off{opacity:.4}

/* 예상 입출금액 */
.l2-due{gap:8px}
.l2-dl{display:flex;flex-direction:column}
.l2-dr{display:flex;align-items:center;gap:12px;min-height:60px;width:100%;padding:0;border:0;background:none;font:inherit;color:var(--v-ink);text-align:left;cursor:pointer}
div.l2-dr{cursor:default}
.l2-ic{flex:none;width:40px;height:40px;border-radius:12px;background:var(--v-ground);display:flex;align-items:center;justify-content:center;color:var(--v-ink2)}
.l2-ic.in{background:var(--v-blue-bg);color:var(--v-blue)}
.l2-ic .ico{width:21px;height:21px;stroke-width:1.9}
.l2-dr .l{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.l2-dr .nm{font-size:15px;font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.l2-dr.etc .nm{font-size:14px;color:var(--v-ink2);padding-left:52px}
.l2-dr .s{font-size:13px;color:var(--v-ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.l2-dr .s em{font-style:normal;color:var(--v-coral-t);font-weight:600}
.l2-dr .v{flex:none;font-size:15px;font-weight:600;white-space:nowrap}
.l2-dr .v.in{color:var(--v-blue)}
.l2-tot{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:52px;padding:0 16px;border-radius:12px;background:var(--v-ground);margin-top:4px}
.l2-tot .k{display:flex;align-items:center;gap:2px;font-size:14px;font-weight:600;color:var(--v-ink2);white-space:nowrap}
.l2-tot .v{font-size:17px;font-weight:700;color:var(--v-ink);white-space:nowrap}
.l2-tot .dx-pop{top:auto;bottom:calc(100% + 6px)}

/* 누르면 살짝 눌린 느낌 (휴대폰) */
.l2-tile:active,.l2-br:active,.l2-or:active,.l2-dr:active,.l2-agg:active{opacity:.72}

/* ---------- 날짜로 이동 시트 ---------- */
.sheet.gosh{max-width:420px;background:var(--v-card)}
.gosh .sh-b{gap:0;padding-top:6px}
.gosh-h{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px}
.gosh-h h2{margin:0;font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--v-ink)}
.gosh-now{height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--v-line);background:var(--v-card);font:inherit;font-size:13px;font-weight:600;color:var(--v-ink);cursor:pointer;white-space:nowrap}
.gosh-y{display:flex;align-items:center;justify-content:center;gap:16px;height:56px;margin:12px 0 10px}
.gosh-y b{font-size:20px;font-weight:700;min-width:84px;text-align:center;color:var(--v-ink)}
.gosh-y .ibtn{color:var(--v-ink2)}
.gosh-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.gosh-g.yr{margin-top:16px}
.gosh-t{height:46px;border:0;border-radius:12px;background:var(--v-ground);font:inherit;font-size:15px;font-weight:500;color:var(--v-ink);cursor:pointer;white-space:nowrap}
.gosh-t.now{font-weight:700}
.gosh-t.on{background:var(--v-ink);color:var(--v-card);font-weight:700}
.gosh-t:disabled{color:var(--v-mute);cursor:default}
.gosh .sh-f{padding:16px 24px 24px;border:0;background:none}
.gosh-go{width:100%;height:52px;border:0;border-radius:16px;background:var(--v-ink);color:var(--v-card);font:inherit;font-size:16px;font-weight:700;cursor:pointer}
@media (max-width:767px){.gosh .sh-f{padding:12px 16px calc(16px + env(safe-area-inset-bottom,0px))}}

/* 일별 지출 지도 */
.l2-heat{gap:14px}
.l2-hm{position:relative;container-type:inline-size;--hc:clamp(14px,calc((100cqw - 26px) / var(--cols,53) - 3px),18px)}
@media (min-width:900px){.l2-hm{--hc:clamp(11px,calc((100cqw - 26px) / var(--cols,53) - 3px),18px)}}
.l2-hw{display:flex;gap:6px}
.l2-hd{flex:none;display:grid;grid-template-rows:18px repeat(7,var(--hc));gap:3px;font-size:11px;color:var(--v-ink3)}
.l2-hd span{line-height:var(--hc)}
.l2-hs{flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.l2-hs::-webkit-scrollbar{display:none}
.l2-hmo{display:grid;gap:3px;height:18px;margin-bottom:3px;font-size:11px;line-height:18px;color:var(--v-ink3)}
.l2-hmo span{white-space:nowrap}.l2-hmo span.on{color:var(--v-ink);font-weight:700}
.l2-hg{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,var(--hc));grid-auto-columns:var(--hc);gap:3px;width:max-content}
.l2-hg i,.l2-hl i{display:block;width:var(--hc);height:var(--hc);border-radius:3px;background:var(--v-track)}
.l2-hg i.x{visibility:hidden}
.l2-hg i.fut{background:none;box-shadow:inset 0 0 0 1px var(--v-line)}
.l2-hg i.l1,.l2-hl i.l1{background:color-mix(in srgb,var(--v-navy) 22%,var(--v-track))}
.l2-hg i.l2,.l2-hl i.l2{background:color-mix(in srgb,var(--v-navy) 45%,var(--v-track))}
.l2-hg i.l3,.l2-hl i.l3{background:color-mix(in srgb,var(--v-navy) 72%,var(--v-track))}
.l2-hg i.l4,.l2-hl i.l4{background:var(--v-navy)}
.l2-hg i[data-d]{cursor:pointer}
.l2-hg i.on{outline:2px solid var(--v-coral);outline-offset:1px}
.l2-hl{display:flex;align-items:center;justify-content:flex-end;gap:3px;margin-top:10px;font-size:11px;color:var(--v-ink3)}
.l2-hl i{width:12px;height:12px}
.l2-hl span{margin:0 4px}
.l2-htip{position:absolute;z-index:8;pointer-events:none;transform:translate(-50%,calc(-100% - 8px));display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 10px;border-radius:10px;background:var(--v-ink);color:var(--v-card);font-size:12px;line-height:1.35;white-space:nowrap;box-shadow:0 6px 18px rgba(21,23,28,.18)}
.l2-htip b{font-weight:600;opacity:.8}
.l2-htip span{font-size:14px;font-weight:700}

/* 거래 */
.l2-tx{gap:12px}
.l2-fl{position:relative}
.l2-fc{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.l2-fchip{height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--v-line);background:var(--v-card);display:inline-flex;align-items:center;gap:4px;font:inherit;font-size:13px;font-weight:600;color:var(--v-ink2);white-space:nowrap;cursor:pointer}
.l2-fchip.on{background:var(--v-ink);border-color:var(--v-ink);color:var(--v-card)}
.l2-fchip.cond{background:var(--v-ground);border-color:transparent;color:var(--v-ink)}
.l2-fchip.add{border-style:dashed;color:var(--v-ink3)}
.l2-fchip.add[aria-expanded="true"]{border-color:var(--v-ink);color:var(--v-ink)}
.l2-pop{padding-top:12px}
.l2-pop.float{background:var(--v-card)}
.l2-fsr{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:32px}
.l2-fsum{min-width:0;font-size:13px;color:var(--v-ink3)}
.l2-fsum b{color:var(--v-ink);font-weight:700}
.l2-fsum .nw{white-space:nowrap}
.l2-fsr-r{flex:none;display:flex;align-items:center;gap:6px}
/* 휴대폰: 묶어 보기와 정렬을 위 줄에, 건수와 합계는 그 아래 한 줄 */
@media (max-width:899px){.l2-fsr{flex-wrap:wrap;justify-content:flex-start;row-gap:8px}.l2-fsr-r{order:1}.l2-fsum{order:2;flex:1 1 100%}}
.l2-tog{height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--v-line);background:var(--v-card);display:inline-flex;align-items:center;gap:4px;font:inherit;font-size:13px;font-weight:600;color:var(--v-ink3);white-space:nowrap;cursor:pointer}
.l2-tog[aria-pressed="true"]{border-color:var(--v-ink);color:var(--v-ink)}
/* 묶음 줄과 펼친 거래 */
.l2-xg{display:flex;flex-direction:column;border-top:1px solid var(--v-line)}
.l2-xl>.l2-xg:first-child,.l2-xl>.l2-xr.th+.l2-xg{border-top:0}
.l2-xg>.l2-xr{border-top:0}
.l2-xr .it{display:flex;align-items:baseline;gap:6px;min-width:0}
.l2-xr .it .nm{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.l2-xr .it .mm{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:500;color:var(--v-ink3)}
.l2-xr.grp .it{align-items:center}
.l2-xr.grp .it .cnt{flex:none;height:20px;padding:0 7px;border-radius:999px;background:var(--v-ground);font-size:12px;font-weight:600;line-height:20px;color:var(--v-ink2)}
.l2-xr.grp .it .ico{flex:none;color:var(--v-icon3)}
.l2-xg.open>.l2-xr.grp .it .cnt{background:var(--v-ink);color:var(--v-card)}
.l2-xsub{display:flex;flex-direction:column;margin:0 0 10px;padding:2px 14px;border-radius:12px;background:var(--v-ground)}
.l2-xr.sub{min-height:52px;border-top:1px solid var(--v-line)}
.l2-xsub>.l2-xr.sub:first-child{border-top:0}
.l2-xr.sub .it .nm{font-weight:500;color:var(--v-ink2)}
.l2-xall{display:flex;align-items:center;justify-content:center;gap:2px;height:44px;border:0;border-top:1px solid var(--v-line);background:none;font:inherit;font-size:13px;font-weight:600;color:var(--v-ink2);cursor:pointer}
.l2-xl{display:flex;flex-direction:column}
.l2-xr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"it it v" "d ac ac";gap:2px 10px;align-items:center;width:100%;min-height:60px;padding:10px 0;border:0;border-top:1px solid var(--v-line);background:none;font:inherit;color:var(--v-ink);text-align:left;cursor:pointer}
.l2-xl>.l2-xr:first-child,.l2-xl>.l2-xr.th+.l2-xr{border-top:0}
.l2-xr:disabled{cursor:default;opacity:1}
.l2-xr .it{grid-area:it;font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.l2-xr .v{grid-area:v;font-size:15px;font-weight:600;text-align:right;white-space:nowrap}
.l2-xr .d{grid-area:d;font-size:13px;color:var(--v-ink2);white-space:nowrap}
.l2-xr .ac{grid-area:ac;font-size:13px;color:var(--v-ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.l2-xr .v.k-inc,.l2-xr .v.k-refund{color:var(--v-blue)}
.l2-xr.th{min-height:36px;padding:0 0 8px;cursor:default;font-size:12px;font-weight:600;color:var(--v-ink3)}
.l2-xr.th span{font-size:12px;font-weight:600;color:var(--v-ink3)}
@media (min-width:900px){
  .l2-xr{grid-template-columns:150px minmax(0,1fr) minmax(0,1.3fr) 140px;grid-template-areas:"d it ac v";gap:16px;min-height:52px;padding:0}
  .l2-xr .it,.l2-xr .v{font-size:14px}
  .l2-xr .d,.l2-xr .ac{font-size:14px}
}
@media (hover:hover){button.l2-xr:not(:disabled):hover .it{text-decoration:underline;text-underline-offset:3px}}
.l2-mbtn{align-self:stretch;height:44px;border:0;border-radius:12px;background:var(--v-ground);display:flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:14px;font-weight:600;color:var(--v-ink);cursor:pointer}
.l2-mbtn small{font-size:12px;font-weight:500;color:var(--v-ink3)}

/* ================= 공용 v2 부품 (invhome2.js): 지표 칸, 구분선, 그래프, 도넛 ================= */
.l2-kpi2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:-4px}
.l2-kpi{display:flex;flex-direction:column;gap:4px;min-width:0}
.l2-kpi .k{display:flex;align-items:center;gap:2px;font-size:13px;font-weight:500;color:var(--v-ink3)}
.l2-kpi .v{display:flex;align-items:baseline;gap:2px;color:var(--v-ink);white-space:nowrap}
.l2-kpi .v b{font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1.15}
.l2-kpi .v>span{font-size:17px;font-weight:600}
.l2-kpi .v.hot{color:var(--v-coral-t)}.l2-kpi .v.dn{color:var(--v-blue)}
.l2-kpi .v.na{font-size:20px;font-weight:700;color:var(--v-ink3)}
.l2-kpi .s{font-size:13px;line-height:1.4;color:var(--v-ink2);word-break:keep-all}
.l2-kpi2.sm .l2-kpi .v b{font-size:20px;letter-spacing:-.02em;line-height:1.2}
.l2-kpi2.sm .l2-kpi .v>span{font-size:13px}
.l2-kpi .l2-btn{margin-top:2px}
.l2-div{height:1px;background:var(--v-line)}
.l2-chw{position:relative}
.l2-axl{font-size:11px;fill:var(--v-ink3)}
.l2-gd{stroke:var(--v-ink3);stroke-width:1;stroke-dasharray:2 3}
.l2-donut{flex:none;display:block}

/* ================= 투자 홈 v2 ================= */
.ih2-rf{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;font-size:13px;color:var(--v-ink2)}
.ih2-rfb{gap:6px;padding:0 14px 0 12px}
.ih2-rfb:disabled{opacity:.5;cursor:default}
.ih2 .phead .ih2-rfb{height:36px}
.ih2-note{margin:0;font-size:12px;line-height:1.5;color:var(--v-ink3);word-break:keep-all}
/* 투자 성과 */
.ih2-perf{gap:18px}
.ih2-cus{display:flex;align-items:center;gap:8px;margin-top:-6px}
.ih2-cus select{height:36px;min-width:0;flex:1;border-radius:10px}
.ih2-cus span{color:var(--v-ink3)}
.ih2-rt{display:flex;flex-direction:column;gap:10px}
.ih2-rth{display:flex;justify-content:space-between;gap:8px;font-size:13px;font-weight:500;color:var(--v-ink3)}
.ih2-rr{display:grid;grid-template-columns:76px minmax(0,1fr) 64px 64px;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.ih2-rr .nm{font-size:13px;font-weight:500;color:var(--v-ink2);white-space:nowrap}
.ih2-rr .bar{height:10px;border-radius:999px;background:var(--v-track);overflow:hidden}
.ih2-rr .bar i{display:block;height:100%;border-radius:999px;background:var(--v-mute)}
.ih2-rr .v{font-size:14px;font-weight:600;text-align:right;white-space:nowrap}
.ih2-rr .d{font-size:13px;font-weight:600;text-align:right;white-space:nowrap;color:var(--v-ink2)}
.ih2-rr .d.dn{color:var(--v-blue)}.ih2-rr .d.hot{color:var(--v-coral-t)}
.ih2-rr.me{grid-template-columns:76px minmax(0,1fr) 136px;padding:10px;margin:0 -10px;border-radius:12px;background:var(--v-blue-bg)}
.ih2-rr.me .nm{font-weight:700;color:var(--v-ink)}
.ih2-rr.me .bar{background:color-mix(in srgb,var(--v-blue) 16%,var(--v-card))}
.ih2-rr.me .bar i{background:var(--v-blue)}
.ih2-rr.me b{font-size:20px;font-weight:700;letter-spacing:-.02em;text-align:right;color:var(--v-blue);white-space:nowrap}
.ih2-rr.me b.hot{color:var(--v-coral-t)}
/* 현금과 위험 */
.ih2-cover{gap:14px}
.ih2-st{display:flex;flex-direction:column;padding:4px 14px 8px;border-radius:12px;background:var(--v-ground)}
.ih2-str{display:grid;grid-template-columns:minmax(0,1fr) 72px 88px 72px;gap:8px;align-items:center;min-height:44px;border-top:1px solid var(--v-line);font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
.ih2-str:first-child{border-top:0}
.ih2-str>span:first-child{text-align:left}
.ih2-str.th{min-height:36px;font-size:12px;font-weight:600;color:var(--v-ink3)}
.ih2-str .nm{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-weight:600;color:var(--v-ink)}
.ih2-str .nm i{flex:none;width:8px;height:8px;border-radius:999px}
.ih2-str .nm small{flex-basis:100%;padding-left:14px;font-size:11px;font-weight:500;color:var(--v-ink3)}
.ih2-str .hot{color:var(--v-coral-t)}
.ih2-ed{align-self:flex-end;margin:6px -6px 0 0}
/* 리밸런싱 */
.ih2-rebal{gap:18px}
.ih2-pill{display:inline-flex;align-items:center;height:22px;margin-left:8px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:700;align-self:center;letter-spacing:0}
.ih2-pill.act{background:var(--v-coral);color:#fff}.ih2-pill.warn{background:var(--v-amber-bg);color:var(--v-amber)}.ih2-pill.ok{background:var(--v-blue-bg);color:var(--v-blue)}
.ih2-rbh{margin-top:-4px;font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.3;word-break:keep-all}
.ih2-rbh .hot{color:var(--v-coral-t)}
.ih2-rg{display:flex;flex-direction:column;gap:8px}
.ih2-rg .r1{display:flex;align-items:baseline;gap:8px}
.ih2-rg .nm{font-size:15px;font-weight:600}
.ih2-rg .tg{font-size:13px;color:var(--v-ink3)}
.ih2-rg .r1 b{margin-left:auto;font-size:15px;font-weight:700}
.ih2-rg .gp{width:64px;text-align:right;font-size:13px;font-weight:600;color:var(--v-ink3)}
.ih2-rg.bad .r1 b,.ih2-rg.bad .gp{color:var(--v-coral-t)}
.ih2-rg .l2-bar{height:8px}
.ih2-rg.bad .l2-bar i{background:var(--v-coral)}
.ih2-rg .l2-bar em{height:16px}
.ih2-act{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:12px;background:var(--v-ground)}
.ih2-act .h{margin-bottom:2px;font-size:13px;font-weight:600;color:var(--v-ink2)}
.ih2-act .r{display:flex;align-items:center;gap:10px;min-height:28px;font-size:14px;color:var(--v-ink2)}
.ih2-act .r>span:first-child{width:52px}
.ih2-act .r b{font-size:15px;font-weight:700;color:var(--v-ink)}
.ih2-act .r.nt{font-size:12px;color:var(--v-ink3);min-height:0;margin-top:2px}
/* 총자산 */
.ih2-total{gap:18px}
.ih2-big{display:flex;flex-direction:column;gap:4px;margin-top:-4px}
.ih2-big .s{display:flex;align-items:center;gap:2px;font-size:14px;color:var(--v-ink2)}
.ih2-big .s b{font-weight:600}.ih2-big .s b.hot{color:var(--v-coral-t)}
.ih2-comp{display:flex;align-items:center;gap:18px}
.ih2-lg{flex:1;min-width:0;display:flex;flex-direction:column}
.ih2-li{display:flex;align-items:center;gap:8px;min-height:30px;width:100%;padding:0;border:0;background:none;font:inherit;color:var(--v-ink);text-align:left;cursor:pointer}
.ih2-li i{flex:none;width:8px;height:8px;border-radius:999px}
.ih2-li .nm{font-size:14px;color:var(--v-ink2);white-space:nowrap}
.ih2-li b{margin-left:auto;font-size:14px;font-weight:600;white-space:nowrap}
.ih2-li .ico{flex:none;color:var(--v-icon3)}
.ih2-li.on .nm{color:var(--v-ink);font-weight:600}
.ih2-det{display:flex;flex-direction:column;gap:2px;padding:8px 14px;border-radius:12px;background:var(--v-ground)}
.ih2-dg{display:flex;flex-direction:column}
.ih2-dg+.ih2-dg{margin-top:6px}
.ih2-dg .gh{display:flex;align-items:center;gap:8px;min-height:34px;font-size:13px;border-bottom:1px solid var(--v-line)}
.ih2-dg .gh i{flex:none;width:8px;height:8px;border-radius:999px}
.ih2-dg .gh span{margin-left:auto;color:var(--v-ink2)}
.ih2-dg .gh b:last-child{width:48px;text-align:right}
.ih2-dl{display:flex;align-items:center;gap:8px;min-height:40px;font-size:13px;border-top:1px solid var(--v-line)}
.ih2-dg .gh+.ih2-dl,.ih2-det>.ih2-dl:first-child{border-top:0}
.ih2-dl .l{flex:1;min-width:0;display:flex;flex-direction:column}
.ih2-dl .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.ih2-dl small{font-size:11px;color:var(--v-ink3)}
.ih2-dl .v{white-space:nowrap;color:var(--v-ink2)}
.ih2-dl b{width:48px;text-align:right;font-weight:600}
.ih2-total .l2-agg small{font-size:13px;color:var(--v-ink3)}
/* 추이 */
.ih2-trend{gap:14px}
.ih2-tabs{display:flex;gap:2px;padding:3px;border-radius:12px;background:var(--v-track)}
.ih2-tabs button{flex:1;height:32px;border:0;border-radius:9px;background:none;font:inherit;font-size:13px;font-weight:500;color:var(--v-ink2);white-space:nowrap;cursor:pointer;padding:0 4px}
.ih2-tabs button[aria-selected="true"]{background:var(--v-card);box-shadow:0 1px 3px rgba(21,23,28,.12);font-weight:700;color:var(--v-ink)}
.ih2-tvs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ih2-tv{display:flex;flex-direction:column;gap:2px;min-width:0}
.ih2-tv span{font-size:12px;color:var(--v-ink3);white-space:nowrap}
.ih2-tv b{font-size:15px;font-weight:700;white-space:nowrap}
.ih2-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ih2-chip{height:32px;padding:0 8px;border-radius:999px;border:1px solid var(--v-line);background:var(--v-card);display:flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-size:12px;font-weight:600;color:var(--v-ink3);white-space:nowrap;cursor:pointer}
.ih2-chip i{flex:none;width:12px;height:3px;border-radius:2px}
.ih2-chip[aria-pressed="true"]{border-color:transparent;background:var(--v-ground);color:var(--v-ink)}
.ih2-chip.nd{border-style:dashed;cursor:default;opacity:.7}
@media (min-width:900px){.ih2-chips{display:flex;flex-wrap:wrap}.ih2-chip{padding:0 12px}}
/* FIRE */
.ih2-fire{gap:16px}
.ih2-fl{font-size:11px;font-weight:700}
.ih2-fl.lean{fill:color-mix(in srgb,var(--v-peri) 70%,var(--v-ink))}.ih2-fl.fat{fill:var(--v-coral-t)}
.ih2-flg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--v-ink2)}
.ih2-flg span{display:flex;align-items:center;gap:6px}
.ih2-flg i.ln{width:14px;height:3px;border-radius:2px}
.ih2-flg i.dl{width:14px;border-top:2px dashed}
.ih2-lv{display:flex;flex-direction:column}
.ih2-lv .r{display:flex;align-items:center;gap:10px;min-height:42px;border-top:1px solid var(--v-line);font-variant-numeric:tabular-nums}
.ih2-lv .r i{flex:none;width:8px;height:8px;border-radius:999px}
.ih2-lv .nm{flex:none;width:64px;font-size:14px;font-weight:600}
.ih2-lv b{flex:1;font-size:14px;font-weight:700}
.ih2-lv .s{font-size:13px;color:var(--v-ink2)}

/* ================= 캘린더 v2 (butler.js BCalScr, v78 시안) =================
   휴대폰: 기간 줄과 오늘, 사람 칩, 가장자리까지 닿는 흰 달력, 아래 카드(고른 날, 이번 주 남은 일정).
   900px부터: 왼쪽 달력 카드, 오른쪽 고른 날, 이번 주 남은 일정, 다가오는 알림, D-day 카드 */
.bc2{gap:12px}
.bc2 .bc-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;row-gap:10px}
.bc2 .bc2-nav{display:flex;align-items:center;margin-left:-6px;min-width:0}
.bc2 .bc2-today{margin-left:auto}
.bc2 .bcx-ctl{flex-basis:100%;margin:0;display:flex;align-items:center;gap:8px}
.bc2 .bcx-who{gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.bc2 .bw-c{height:36px;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--v-line);background:var(--v-card);font-size:14px;font-weight:600;color:var(--v-ink);gap:6px;white-space:nowrap}
.bc2 .bw-c[aria-pressed="true"]{background:var(--v-ink);border-color:var(--v-ink);color:var(--v-card)}
@media (max-width:767px){
  .bc2 .bc-title{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:0}
  .content:has(>.bc2){padding-top:12px}
}
@media (min-width:768px){
  .bc2 .bc-top{flex-wrap:nowrap;gap:16px}
  .bc2 .bc2-today{margin-left:0}
  .bc2 .bcx-ctl{flex-basis:auto;margin-left:auto}
}
/* 달력 */
.bc2 .bcx-body{gap:12px}
.bc2 .bcx-side{gap:12px}
.bc2 .bcx-cal{background:var(--v-card)}
.bc2 .bc-grid{--bn:30px;--bnh:46px;--bh:20px;--bpad:8px}
.bc2 .bc-wds{border-bottom:1px solid var(--v-line)}
.bc2 .bc-wd{padding:10px 0;text-align:center;font-size:13px;font-weight:600;color:var(--v-ink2)}
.bc2 .bc-wd.sun{color:var(--v-coral-t)}.bc2 .bc-wd.sat{color:var(--v-blue)}
.bc2 .bc-wk{min-height:104px;border-bottom:1px solid var(--v-line)}
.bc2 .bc-cell{align-items:center;padding:6px 0 0;border-right:0}
.bc2 .bc-cell.sel{background:var(--v-blue-bg)}
.bc2 .bc-n{min-width:26px;height:26px;font-size:15px;font-weight:600;line-height:26px;color:var(--v-ink)}
.bc2 .bc-n.red{color:var(--v-coral-t)}.bc2 .bc-n.blue{color:var(--v-blue)}
.bc2 .bc-cell.past .bc-n{color:var(--v-ink)}
.bc2 .bc-cell.past .bc-n.red{color:var(--v-coral-t)}.bc2 .bc-cell.past .bc-n.blue{color:var(--v-blue)}
.bc2 .bc-cell.out .bc-n{color:var(--v-mute);font-weight:500}
.bc2 .bc-cell.today .bc-n{background:var(--v-ink);color:var(--v-card)}
.bc2 .bc-wk>.bc-hl{justify-self:center;padding:0 2px;font-size:11px;font-weight:600;color:var(--v-coral-t)}
.bc2 .bc-bar{margin:0 2px;padding:0 5px;border-radius:4px;box-shadow:none;font-size:12px;font-weight:600;letter-spacing:-.02em;color:var(--v-ink)}
.bc2 .bc-bar.cl,.bc2 .bc-bar.cr{box-shadow:none}
/* 시안: 지난 일정도 흐리게 하지 않고, 글자는 막대 끝에서 깔끔하게 자름 */
.bc2 .bc-bar{opacity:1!important}
.bc2 .bc-tx{text-overflow:clip;-webkit-mask-image:none;mask-image:none}
@media (max-width:767px){.bc2 .bc-bar{margin:0 1px;padding:0 4px;font-size:11.5px;letter-spacing:-.04em}}
.bc2 .bc-bar.dd{background:var(--v-coral)!important;color:#fff;box-shadow:none;font-weight:700}
.bc2 .bc-bar.dd .bc-tm{color:#fff}
.bc2 .bc-more{font-size:11px;color:var(--v-ink3)}
@media (max-width:899px){
  /* 휴대폰과 좁은 태블릿: 달력은 화면 가장자리까지 */
  .bc2 .bcx-cal{margin:0 calc(-1 * var(--gut,16px));border-top:1px solid var(--v-line)}
  .bc2 .bc-wk:last-child{border-bottom:0}
}
@media (min-width:900px){
  .bc2 .bcx-body{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px}
  .bc2 .bcx-side{gap:16px}
  .bc2 .bcx-cal{border-radius:20px;padding:8px 12px 12px;overflow:hidden}
  .bc2 .bc-wk{min-height:120px}
  .bc2 .bc-wk:last-child{border-bottom:0}
}
/* 고른 날 */
.bc2-day{gap:12px}
.bc2-evs{display:flex;flex-direction:column}
.bc2-ev{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:8px 0;border:0;background:none;font:inherit;color:var(--v-ink);text-align:left;cursor:pointer}
.bc2-ev:disabled{cursor:default;color:var(--v-ink)}
.bc2-ev .tm{flex:none;width:40px;font-size:13px;font-weight:600;color:var(--v-ink2)}
.bc2-ev .b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding-left:14px;box-shadow:inset 3px 0 0 var(--pc,var(--v-mute))}
.bc2-ev .b b{font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere}
.bc2-ev .b small{font-size:13px;color:var(--v-ink2);word-break:keep-all}
.bc2-ev .b small.memo{color:var(--v-ink3)}
.bc2-ev.done .b b{color:var(--v-ink3);text-decoration:line-through}
.bc2-dd{flex:none;height:26px;padding:0 10px;border-radius:999px;background:var(--v-coral-bg);color:var(--v-coral-t);font-size:13px;font-weight:700;line-height:26px;white-space:nowrap}
.bc2-dd.on{background:var(--v-coral);color:#fff}
.bc2-tag{flex:none;height:24px;padding:0 9px;border-radius:999px;background:var(--v-ground);font-size:12px;font-weight:600;line-height:24px;color:var(--v-ink2);white-space:nowrap}
.bc2-tag.warn{background:var(--v-coral-bg);color:var(--v-coral-t)}
.bc2-hab{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:0 14px 0 16px;border:0;border-radius:14px;background:var(--v-ground);font:inherit;color:var(--v-ink);text-align:left;cursor:pointer}
.bc2-hab .ck{flex:none;width:22px;height:22px;border-radius:999px;box-shadow:inset 0 0 0 2px var(--v-mute);display:flex;align-items:center;justify-content:center;color:#fff}
.bc2-hab.full .ck{background:var(--v-blue);box-shadow:none}
.bc2-hab .t{flex:1;font-size:15px;font-weight:600}
.bc2-hab .w{font-size:13px;color:var(--v-ink2)}
.bc2-hab .ico{flex:none;color:var(--v-icon3)}
/* 이번 주 남은 일정, 알림, D-day */
.bc2-wk{gap:8px}
.bc2-ups{display:flex;flex-direction:column}
.bc2-up{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:6px 0;border:0;background:none;font:inherit;color:var(--v-ink);text-align:left;cursor:pointer}
.bc2-up .d{flex:none;width:52px;font-size:14px;font-weight:600;color:var(--v-ink2);white-space:nowrap}
.bc2-up>i{flex:none;width:8px;height:8px;border-radius:999px}
.bc2-up .b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bc2-up .b b{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bc2-up .b small{font-size:13px;color:var(--v-ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bc2-ddr{display:flex;align-items:center;gap:14px;width:100%;min-height:60px;padding:8px 0;border:0;background:none;font:inherit;color:var(--v-ink);text-align:left;cursor:pointer}
.bc2-ddr .n{flex:none;width:64px;font-size:17px;font-weight:700;color:var(--v-ink)}
.bc2-ddr .n.soon{color:var(--v-coral-t)}
.bc2-ddr .b{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.bc2-ddr .b b{font-size:15px;font-weight:600}
.bc2-ddr .b small{font-size:13px;color:var(--v-ink2)}
.bc2-ddr .l2-bar{height:4px;margin-top:4px}
.bc2-ddr .l2-bar i.hot{background:var(--v-coral)}
@media (hover:hover){.bc2-ev:not(:disabled):hover .b b,.bc2-up:hover .b b,.bc2-ddr:hover .b b{text-decoration:underline;text-underline-offset:3px}}