/* ============================================================
   TURNING POINT KOREA · 수익 가계부 공통 스타일
   mypage.html(가계부 탭) · ledger.html(장부 4개) 가 함께 씀
   모든 클래스는 lg- / tp- 로 시작 (기존 마이페이지 클래스와 안 겹치게)
   ============================================================ */

/* ---------- 마이페이지 탭 ---------- */
.tp-tabs { display:flex; background:#fff; border:1px solid var(--line); border-radius:999px; padding:4px; margin:12px 0 22px; }
.tp-tabs button { flex:1; padding:11px 0; border-radius:999px; font-size:14px; font-weight:700; color:var(--muted); background:none; border:0; cursor:pointer; font-family:inherit; }
.tp-tabs button.on { background:var(--ink); color:#fff; }
.tp-pane { display:none; }
.tp-pane.on { display:block; }

/* ---------- 가계부 첫 화면 ---------- */
.lg-top { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:20px; }
.lg-top .page-h { margin:0; }
.lg-mnav { display:flex; align-items:center; gap:2px; font-size:13px; font-weight:600; color:var(--muted); white-space:nowrap; }
.lg-mnav button { background:none; border:0; color:var(--muted); font-size:16px; padding:4px 6px; cursor:pointer; font-family:inherit; line-height:1; }
.lg-hero { background:var(--ink); color:#fff; border-radius:24px; padding:28px 24px 24px; margin-bottom:12px; }
.lg-hero .l { display:flex; justify-content:space-between; align-items:center; font-size:13px; color:#B4B4B8; font-weight:600; min-height:24px; }
.lg-chip { background:var(--yellow); color:var(--ink); font-size:12px; font-weight:800; padding:4px 10px; border-radius:999px; }
.lg-chip.down { background:#2E2E31; color:#fff; }
.lg-amt { font-size:38px; font-weight:800; letter-spacing:-.04em; line-height:1; margin:12px 0 20px; word-break:break-all; }
.lg-amt span { font-size:18px; font-weight:600; opacity:.7; margin-left:3px; }
.lg-bar { height:8px; border-radius:9px; background:#2E2E31; overflow:hidden; }
.lg-bar i { display:block; height:100%; border-radius:9px; background:var(--yellow); }
.lg-goal { display:flex; justify-content:space-between; margin-top:8px; font-size:12px; color:#B4B4B8; font-weight:600; }
.lg-goal button { background:none; border:0; color:inherit; font:inherit; cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:3px; }
.lg-box { background:#fff; border:1px solid #EEEEEE; border-radius:20px; padding:6px 20px; margin-bottom:12px; }
.lg-row { display:block; padding:15px 0; border-top:1px solid var(--line-soft); color:inherit; text-decoration:none; }
.lg-row:first-child { border-top:0; }
.lg-row .t { display:flex; justify-content:space-between; gap:8px; font-size:14px; font-weight:700; }
.lg-row .t em { font-style:normal; color:var(--muted); font-weight:500; margin-left:4px; font-size:12px; }
.lg-row .t span:last-child { white-space:nowrap; }
.lg-row .b { height:5px; border-radius:9px; background:var(--line-soft); margin-top:9px; overflow:hidden; }
.lg-row .b i { display:block; height:100%; border-radius:9px; background:var(--ink); }
.lg-pad { padding:18px 20px; }
.lg-h { font-size:14px; font-weight:800; display:flex; justify-content:space-between; align-items:center; }
.lg-h a { font-size:12px; color:var(--muted); font-weight:600; text-decoration:none; }
.lg-chart { display:flex; align-items:flex-end; gap:10px; height:80px; margin-top:14px; }
.lg-chart i { flex:1; background:var(--line); border-radius:8px; min-height:4px; }
.lg-chart i.on { background:var(--ink); }
.lg-ax { display:flex; justify-content:space-between; gap:10px; font-size:11px; color:var(--muted); margin-top:6px; }
.lg-ax span { flex:1; text-align:center; }
.lg-rec { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 0; border-top:1px solid var(--line-soft); font-size:14px; color:inherit; text-decoration:none; }
.lg-rec small { display:block; font-size:12px; color:var(--muted); margin-top:2px; }
.lg-rec b { font-weight:700; white-space:nowrap; }
.lg-empty { text-align:center; color:var(--muted); font-size:13px; padding:22px 0; line-height:1.6; }
.lg-loading { text-align:center; color:var(--muted); font-size:13px; padding:40px 0; }

/* 장부 네 칸 카드 */
.lg-cards { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.lg-kcard { display:block; min-width:0; background:#fff; border:1px solid #EEEEEE; border-radius:20px; padding:16px; color:inherit; text-decoration:none; }
.lg-kcard img { width:34px; height:34px; display:block; }
.lg-kcard .n { font-size:16px; font-weight:800; letter-spacing:-.01em; margin-top:12px; }
.lg-kcard .d { font-size:11px; color:var(--muted); margin-top:1px; }
.lg-kcard .v { font-size:20px; font-weight:800; letter-spacing:-.03em; margin-top:8px; overflow-wrap:anywhere; }
.lg-kcard .v.z { color:#C4C4C8; }
.lg-kcard .s { font-size:12px; color:var(--muted); margin-top:1px; }
@media (min-width: 768px) { .lg-cards { grid-template-columns:repeat(4, 1fr); } }

/* ---------- 장부 상세 (ledger.html) ---------- */
.lg-mon { display:flex; justify-content:space-between; align-items:center; min-height:40px; margin-bottom:16px; }
.lg-mon .m { display:flex; align-items:center; gap:4px; font-size:15px; font-weight:700; }
.lg-mon .m button { background:none; border:0; color:var(--muted); font-size:18px; padding:4px 8px; cursor:pointer; font-family:inherit; line-height:1; }
.lg-icb { width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.lg-icb img { width:22px; height:22px; }
.lg-icb.on { background:var(--ink); border-color:var(--ink); }
.lg-g2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.lg-sm { background:#F0F0F2; border-radius:18px; padding:16px; min-width:0; }
.lg-sm small { display:block; font-size:12px; color:var(--muted); font-weight:600; margin-bottom:6px; }
.lg-sm b { display:block; font-size:22px; font-weight:800; letter-spacing:-.04em; overflow-wrap:anywhere; }
.lg-sm.blk { background:var(--ink); }
.lg-sm.blk small { color:#B4B4B8; }
.lg-sm.blk b { color:var(--yellow); }
.lg-sm.out { background:#fff; box-shadow:inset 0 0 0 1.5px var(--ink); }
.lg-btn { display:block; width:100%; background:var(--ink); color:#fff; border:0; border-radius:999px; padding:15px; font-size:15px; font-weight:700; text-align:center; margin:14px 0 22px; cursor:pointer; font-family:inherit; }
.lg-sec { display:flex; justify-content:space-between; align-items:center; font-size:15px; font-weight:800; margin:0 0 10px; }
.lg-sec em { font-style:normal; font-size:12px; color:var(--muted); font-weight:600; }
.lg-card { display:block; width:100%; text-align:left; background:#fff; border:1px solid #EEEEEE; border-radius:20px; padding:16px 18px; margin-bottom:8px; cursor:pointer; font-family:inherit; color:inherit; }
.lg-card.hot { border:1.5px solid var(--ink); }
.lg-r { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.lg-nm { font-size:15px; font-weight:700; overflow-wrap:anywhere; }
.lg-am { font-size:15px; font-weight:700; white-space:nowrap; }
.lg-sub { font-size:12px; color:var(--muted); margin-top:3px; overflow-wrap:anywhere; }
.lg-pbar { height:5px; border-radius:9px; background:var(--line-soft); margin:12px 0 8px; overflow:hidden; }
.lg-pbar i { display:block; height:100%; border-radius:9px; background:var(--ink); }
.lg-pill { display:inline-block; border-radius:999px; padding:5px 11px; font-size:12px; font-weight:700; white-space:nowrap; border:0; font-family:inherit; }
.lg-pill.bl { background:var(--ink); color:var(--yellow); }
.lg-pill.li { background:var(--yellow); color:var(--ink); }
.lg-pill.ol { box-shadow:inset 0 0 0 1.5px var(--ink); background:#fff; color:var(--ink); }
.lg-pill.act { background:var(--ink); color:#fff; padding:7px 14px; cursor:pointer; }
.lg-more { display:block; width:100%; background:none; border:0; text-align:center; font-size:13px; color:var(--muted); font-weight:600; margin-top:12px; padding:6px; cursor:pointer; font-family:inherit; }
.lg-day { font-size:13px; color:var(--muted); font-weight:600; margin:16px 0 8px; }
.lg-day:first-child { margin-top:0; }
.lg-list { background:#fff; border:1px solid #EEEEEE; border-radius:20px; padding:2px 18px; }
.lg-li { display:flex; width:100%; justify-content:space-between; align-items:center; gap:10px; padding:14px 0; border:0; border-top:1px solid var(--line-soft); background:none; text-align:left; cursor:pointer; font-family:inherit; color:inherit; }
.lg-li:first-child { border-top:0; }
.lg-li .lg-nm, .lg-li .lg-am { font-size:14px; }
.lg-cal { display:grid; grid-template-columns:repeat(7,1fr); row-gap:4px; background:#fff; border:1px solid #EEEEEE; border-radius:20px; padding:16px 10px 10px; margin-top:12px; text-align:center; }
.lg-cal .w { font-size:12px; color:var(--muted); padding-bottom:8px; }
.lg-kc { height:50px; display:flex; flex-direction:column; align-items:center; background:none; border:0; padding:0; cursor:pointer; font-family:inherit; color:inherit; }
.lg-kn { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:500; color:var(--ink); }
.lg-kn.x { color:#C4C4C8; font-weight:400; }
.lg-kn.td { background:var(--yellow); color:var(--ink); }
.lg-kn.sel { background:var(--ink); color:#fff; }
.lg-ka { font-size:11px; color:var(--muted); margin-top:1px; white-space:nowrap; }
.lg-hint { text-align:center; font-size:12px; color:var(--muted); margin:10px 0 22px; }
.lg-note { text-align:center; font-size:13px; color:var(--muted); padding:28px 10px; background:#fff; border:1px solid #EEEEEE; border-radius:20px; }

/* ---------- 입력 창 · 확인 창 ---------- */
.lg-dim { position:fixed; inset:0; background:rgba(14,14,16,.45); z-index:1100; display:flex; align-items:flex-end; justify-content:center; }
.lg-dim.center { align-items:center; padding:24px; }
.lg-sheet { background:#fff; width:100%; max-width:540px; border-radius:26px 26px 0 0; padding:12px 20px calc(24px + env(safe-area-inset-bottom)); max-height:92vh; overflow-y:auto; color:var(--ink); }
.lg-modal { background:#fff; width:100%; max-width:360px; border-radius:24px; padding:24px 22px 20px; color:var(--ink); }
.lg-hdl { width:40px; height:5px; border-radius:9px; background:var(--line); margin:0 auto 16px; }
.lg-st { font-size:19px; font-weight:800; letter-spacing:-.03em; }
.lg-sd { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); margin-top:4px; }
.lg-date { border:0; border-bottom:1px solid var(--ink); background:none; font:inherit; font-size:13px; color:var(--ink); padding:1px 0; border-radius:0; }
.lg-k { font-size:12px; color:var(--muted); font-weight:600; margin:16px 0 7px; }
.lg-in { width:100%; border:1.5px solid var(--line); border-radius:14px; padding:13px 14px; font-size:15px; font-family:inherit; color:var(--ink); background:#fff; }
.lg-in:focus { outline:none; border-color:var(--ink); }
.lg-amtw { display:flex; align-items:baseline; gap:4px; border-bottom:2px solid var(--ink); padding-bottom:4px; }
.lg-amtin { flex:1; min-width:0; width:100%; border:0; border-radius:0; font-size:28px; font-weight:800; letter-spacing:-.03em; padding:2px 0 0; font-family:inherit; color:var(--ink); background:none; }
.lg-amtw span { font-size:22px; font-weight:800; }
.lg-amtw.big .lg-amtin { font-size:32px; }
.lg-amtw.big span { font-size:24px; }
.lg-amtin:focus { outline:none; }
.lg-chs { display:flex; gap:6px; flex-wrap:wrap; }
.lg-ch { border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:8px 15px; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; color:var(--ink); }
.lg-ch.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.lg-inline { display:flex; align-items:center; gap:8px; margin-top:8px; }
.lg-inline .lg-in { width:110px; padding:10px 12px; }
.lg-ac { border:1px solid var(--line); border-radius:14px; margin-top:6px; overflow:hidden; }
.lg-ac button { display:flex; width:100%; justify-content:space-between; gap:10px; padding:11px 14px; font-size:14px; background:#fff; border:0; border-top:1px solid var(--line-soft); cursor:pointer; font-family:inherit; color:var(--ink); text-align:left; }
.lg-ac button:first-child { border-top:0; }
.lg-ac button:hover, .lg-ac button:focus { background:#F7F7F8; }
.lg-ac span { color:var(--muted); font-size:13px; white-space:nowrap; }
.lg-info { display:flex; justify-content:space-between; align-items:center; background:#F4F4F6; border-radius:14px; padding:12px 14px; margin-top:10px; font-size:14px; }
.lg-info span { color:var(--muted); font-size:13px; }
.lg-auto { display:flex; justify-content:space-between; align-items:center; background:var(--yellow); border-radius:14px; padding:13px 16px; margin-top:12px; font-weight:600; }
.lg-auto b { font-size:20px; font-weight:800; }
.lg-tg { display:flex; background:#F0F0F2; border-radius:999px; padding:4px; }
.lg-tg button { flex:1; padding:10px; border-radius:999px; font-size:14px; font-weight:700; color:var(--muted); background:none; border:0; cursor:pointer; font-family:inherit; }
.lg-tg button.on { background:var(--ink); color:#fff; }
.lg-err { font-size:13px; color:#D93A3A; min-height:18px; margin-top:10px; }
.lg-save { display:block; width:100%; background:var(--ink); color:#fff; border:0; border-radius:999px; padding:16px; font-size:16px; font-weight:700; margin-top:8px; cursor:pointer; font-family:inherit; }
.lg-save:disabled { opacity:.5; cursor:default; }
.lg-del { display:block; margin:14px auto 0; background:none; border:0; font-size:14px; color:var(--muted); text-decoration:underline; cursor:pointer; font-family:inherit; }
.lg-2btn { display:flex; gap:8px; margin-top:20px; }
.lg-2btn button { flex:1; border-radius:999px; padding:14px; font-weight:700; font-size:15px; cursor:pointer; font-family:inherit; }
.lg-2btn .no { background:#fff; border:1.5px solid var(--line); color:var(--ink); }
.lg-2btn .yes { background:var(--ink); border:0; color:#fff; }
.lg-toast { position:fixed; left:50%; bottom:32px; transform:translateX(-50%); background:var(--ink); color:#fff; padding:11px 18px; border-radius:999px; font-size:14px; font-weight:600; z-index:1200; white-space:nowrap; }