:root {
  --bg:#0b0f14;
  --panel:#121821;
  --fg:#e6edf3;
  --muted:#a8b3c7;
  --border:#1e2733;
  --blue:#4da3ff;
  --green:#7ed988;
  --red:#ff8c8c;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.login-body { display:grid;place-items:center;height:100vh; }
.login-card {
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:24px;
  width:min(420px,92vw);
}
.login-card h1 { margin:0 0 12px; font-size:18px; }
label { display:block; color:var(--muted); font-size:12px; margin:12px 0 6px; }
input[type=text], input[type=password], input[type=date], textarea, select {
  width:100%; padding:10px; border-radius:10px; border:1px solid #223044;
  background:#0e131b; color:var(--fg); font-size:14px;
}
textarea { resize: vertical; }
.modal input,
.modal select,
.modal textarea { font-family: inherit; }
.modal textarea[name="memo"] { resize: none; }
.modal input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.modal input[type=number]::-webkit-inner-spin-button,
.modal input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.btn {
  padding:10px 14px; border-radius:10px; border:1px solid #2a3b54;
  background:#152033; color:#dbe7ff; cursor:pointer; font-size:14px;
}
.btn:hover { background:#1a2a44; }
.btn-small { padding:8px 12px; font-size:12px; }
.btn-primary { background:#2b6bff; border-color:#2b6bff; color:white; }
.btn-primary:hover { background:#255bdb; }
.login-card .btn-submit { margin-top:14px; width:100%; }
.pill { padding:4px 10px; border-radius:999px; border:1px solid var(--border); font-size:12px; }
.pill-muted { color:var(--muted); }
.fixed-actions { display:flex; gap:8px; align-items:center; }
.fixed-actions .btn { display:inline-flex; align-items:center; justify-content:center; min-width:36px; }
.err { color:#ffb3b3; margin-top:8px; font-size:13px; }
.hint { color:var(--muted); font-size:12px; margin-top:10px; }
.muted { color:var(--muted); }
.small { font-size:12px; }
.mt-12 { margin-top:12px; }

.topbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  padding:16px; background:var(--panel); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:10;
}
.topbar-left { display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; }
.topbar h1 { margin:0; font-size:20px; }
.user-area { display:flex; align-items:center; gap:10px; flex-shrink:0; white-space:nowrap; margin-left:auto; }

.container { padding:20px; display:flex; flex-direction:column; gap:20px; }
.panel {
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
}
.panel-head { display:flex; align-items:center; gap:12px; }
.panel-head.between { justify-content:space-between; align-items:flex-start; flex-wrap:wrap; }
.panel-head h2 { margin:0; }
.btn-row { display:flex; gap:8px; flex-wrap:wrap; }

.stat-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap:12px;
  margin-top:12px;
}
.stat-card {
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:6px;
  background:rgba(45,118,255,0.08);
  align-items:center;
  text-align:center;
}
.stat-card .label { color:var(--muted); font-size:12px; }
.stat-card .value { font-size:18px; font-weight:700; }
.stat-card.stat-income { background:rgba(126,217,136,0.08); border-color:rgba(126,217,136,0.4); color:var(--green); }
.stat-card.stat-expense { background:rgba(255,140,140,0.08); border-color:rgba(255,140,140,0.4); color:var(--red); }
.stat-card.stat-fixed { background:rgba(77,163,255,0.08); border-color:rgba(77,163,255,0.4); color:#9dc9ff; }
.stat-card.stat-balance { background:rgba(255,200,120,0.1); border-color:rgba(255,200,120,0.45); color:#ffd27f; }
.stats-switch .btn { background:#152033; border-color:#2a3b54; color:#dbe7ff; }
.stats-switch .btn.active { background:#2b6bff; border-color:#2b6bff; color:white; box-shadow:0 0 0 1px rgba(43,107,255,0.35); }

.filters { display:flex; gap:10px; flex-wrap:nowrap; margin:10px 0; overflow-x:auto; padding-bottom:4px; }
.filters label { margin:0; font-size:12px; color:var(--muted); display:flex; flex-direction:row; align-items:center; gap:6px; white-space:nowrap; }
.filters select { min-width:110px; padding-right:34px; }

.icon-only { width:36px; padding:8px 0; text-align:center; }

.table-wrap { overflow:auto; }
.table { width:100%; border-collapse:collapse; margin-top:10px; min-width:1100px; table-layout:fixed; }
.table th, .table td { padding:10px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; vertical-align:middle; }
.table th:nth-child(1), .table td:nth-child(1) { width:90px; }
.table th:nth-child(2), .table td:nth-child(2) { width:90px; }
.table th:nth-child(3), .table td:nth-child(3) { width:80px; }
.table th:nth-child(4), .table td:nth-child(4) { width:130px; }
.table th:nth-child(5), .table td:nth-child(5) { width:120px; }
.table th:nth-child(6), .table td:nth-child(6) { width:120px; }
.table th:nth-child(7), .table td:nth-child(7) { width:260px; white-space:normal; }
.table th:nth-child(8), .table td:nth-child(8) { width:90px; }
.table th:nth-child(9), .table td:nth-child(9) { width:90px; white-space:normal; }
.tx-highlight { background: rgba(102, 170, 255, 0.15) !important; }
.row-highlight { background: rgba(102, 170, 255, 0.18) !important; }
.row-highlight td { background: rgba(102, 170, 255, 0.18) !important; }
.table tbody tr { cursor: pointer; }
.fixed-table tbody tr { cursor: pointer; }
.asset-table tbody tr { cursor: pointer; }
.account-table tbody tr { cursor: pointer; }
.row-anchor { display:none !important; }
.fixed-table { min-width: 900px; table-layout:fixed; }
.fixed-table th:nth-child(1), .fixed-table td:nth-child(1) { width:70px !important; }
.fixed-table th:nth-child(2), .fixed-table td:nth-child(2) { width:72px !important; }
.fixed-table th:nth-child(3), .fixed-table td:nth-child(3) { width:170px !important; }
.fixed-table th:nth-child(4), .fixed-table td:nth-child(4) { width:150px !important; white-space:nowrap; text-align:right !important; }
.fixed-table th:nth-child(5), .fixed-table td:nth-child(5) { width:48px !important; text-align:center !important; white-space:nowrap; }
.fixed-table th:nth-child(6), .fixed-table td:nth-child(6) { width:360px !important; white-space:nowrap; overflow:visible; }
.fixed-table .memo-cell {
  display: table-cell !important;
  vertical-align: middle !important; /* 가장 중요: 옆 칸과 높이 맞춤 */
  padding: 10px !important;
  line-height: 1.45 !important;
}
.fixed-table th:nth-child(7), .fixed-table td:nth-child(7) { width:82px !important; white-space:nowrap; }
.fixed-table .memo-text {
  display:block;
  flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
  max-width:100%;
  line-height:1.4;
}

/* asset/loan table tweaks */
.asset-table { min-width: 1100px; table-layout:fixed; }
.asset-table th:nth-child(1), .asset-table td:nth-child(1) { width:10%; min-width:90px; }
.asset-table th:nth-child(2), .asset-table td:nth-child(2) { width:30%; min-width:240px; } /* 항목 넓힘 */
.asset-table th:nth-child(3), .asset-table td:nth-child(3) { width:14%; min-width:140px; }
.asset-table th:nth-child(4), .asset-table td:nth-child(4) { width:36%; min-width:380px; } /* 메모 폭 확보 */
.asset-table th:nth-child(5), .asset-table td:nth-child(5) { width:10%; min-width:100px; white-space:nowrap; }
.asset-table th.action-col { text-align:center; }
.asset-table td.action-col { text-align:center; }
.asset-table td.action-col .btn-row { justify-content:center !important; gap:4px; width:100%; visibility:hidden; }
.show-asset-actions .asset-table td.action-col .btn-row { visibility:visible; }
/* asset summary highlight */
.asset-summary-row td { background:#162030; font-weight:600; }
/* 2. 메모 셀(TD)의 Flex 속성 제거 (수직 정렬 어긋남 해결의 핵심) */
.asset-table td.memo-cell {
    display: table-cell !important; /* Flex -> Table-cell 복구 */
    vertical-align: middle !important; /* 옆 칸과 높이 맞춤 */
    padding: 10px 8px !important; /* 패딩 재조정 */
}
/* 3. 내부 텍스트: 너비 제한 풀고 말줄임표 처리 */
.asset-table .memo-text {
  display: block;        
  width: 100%;           
  max-width: 100%;       /* 기존 320px 제한 해제 */
  white-space: nowrap;   /* 한 줄로 표시 */
  overflow: hidden;      
  text-overflow: ellipsis; /* 넘치면 ... 처리 */
}

/* account table */
.table.account-table {
  table-layout:fixed;
  width:100% !important;
  min-width: 480px !important;
  max-width:100%;
  display:table;
  border-collapse:collapse !important;
  border-spacing:0 !important;
}
.table.account-table th,
.table.account-table td {
  padding:9px 12px !important;
  text-align:center;
  width:auto !important;
}
.table.account-table th:nth-child(1),
.table.account-table td:nth-child(1) { width:54% !important; min-width:180px !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.table.account-table th:nth-child(2),
.table.account-table td:nth-child(2) { width:18% !important; min-width:80px !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.table.account-table th:nth-child(3),
.table.account-table td:nth-child(3) { width:28% !important; min-width:140px !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.table.account-table th.action-col,
.table.account-table td.action-col { text-align:center; white-space:nowrap; }
.account-table td.action-col { display:flex; align-items:center; justify-content:center; }
.account-table td.action-col .btn-row { justify-content:center !important; align-items:center; gap:4px; width:100%; visibility:hidden; }
.show-account-actions .account-table td.action-col .btn-row { visibility:visible; }
.account-actions { display:flex; gap:8px; align-items:center; }
.account-actions .btn { display:inline-flex; align-items:center; justify-content:center; min-width:36px; padding:8px 10px; }
.asset-table .memo-cell { max-width:100%; overflow:hidden; }
.asset-table .memo-text { display:block; max-width:320px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.asset-actions { display:flex; gap:8px; align-items:center; }
.asset-actions .btn { display:inline-flex; align-items:center; justify-content:center; min-width:36px; }
.fixed-user-summary { background:#111a28; color:#9dc9ff; font-weight:700; }
.fixed-user-summary td { padding:10px; }
.fixed-table td.action-col {
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
}
.fixed-table td.action-col .btn-row { justify-content:center !important; width:100%; }
.fixed-title-wrap { display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.fixed-title-summary { display:block; }
.sum-grid {
  display:flex;
  flex-direction:column;
  gap:2px;
  white-space:nowrap;
}
.sum-grid.col-vertical .sum-total,
.sum-grid.col-vertical .sum-j,
.sum-grid.col-vertical .sum-s { align-self:flex-start; }
.memo-cell { display:flex; align-items:center; gap:6px; }
.memo-text { display:inline-block; max-width:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.memo-text[title] { cursor:pointer; }
.fixed-table td.memo-cell {
  display: table-cell !important; /* flex 제거 -> 높이 어긋남 해결 */
  vertical-align: middle !important;
  padding: 10px !important;
  text-align: left; /* 메모니까 왼쪽 정렬 */
  
  /* 너비를 넘어가는 내용을 자르기 위한 필수 설정 */
  max-width: 0; 
  /* 또는 width: 120px; 처럼 고정폭을 줘도 됩니다 */
}
.fixed-table td.memo-cell .memo-text {
  display: block; 
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-cell { text-align:center; }
.account-icon { border:none; background:transparent; cursor:pointer; padding:4px 6px; }
.icon-link { border:none; background:transparent; padding:2px 4px; cursor:pointer; color:inherit; }
.action-col .btn-row { flex-wrap:nowrap; gap:4px; justify-content:center; }
.action-col .btn { width:36px; min-width:36px; padding:6px; white-space:nowrap; }
.tooltip-pop {
  position:fixed;
  background:#1e2733;
  color:var(--fg);
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  z-index:3200;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
  max-width:240px;
  word-break:break-word;
  transition:opacity 0.2s ease;
}
.table th { color:var(--muted); font-weight:600; }
.table td.money, .table th.money { text-align:right; font-variant-numeric: tabular-nums; }
.action-col { white-space:nowrap; }
.tx-summary-row {
  background:#0e1520;
  border-top:3px solid var(--blue);
  border-bottom:2px solid var(--blue);
  font-weight:700;
}
.tx-summary-row td { padding:12px; }
.asset-summary-row {
  background:#0e1520;
  border-top:3px solid var(--blue);
  border-bottom:2px solid var(--blue);
}
.type-income { color: var(--green); font-weight:600; }
.type-expense { color: var(--red); font-weight:600; }
.status-pill {
  display:inline-block; padding:4px 8px; border-radius:12px; font-size:12px;
  background:#182131; color:var(--muted); cursor:pointer;
}
.status-pill.on { color:var(--green); }
.status-pill.off { color:var(--red); }

.modal {
  position:fixed; inset:0; background:rgba(0,0,0,0.6);
  display:flex; align-items:center; justify-content:center; z-index:1000;
}
[hidden] { display:none !important; }
.modal-content {
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  width:min(720px, 94vw);
  max-height:90vh;
  overflow:auto;
  box-shadow:0 20px 50px rgba(0,0,0,0.45);
}
.modal-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.modal-head h3 { margin:0; }
.icon-btn {
  border:none; background:none; color:var(--muted); cursor:pointer;
  font-size:16px; padding:6px;
}
.grid-2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:10px; }
.grid-3 { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:10px; }
.inline { display:flex; align-items:center; gap:8px; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }

.table .badge { display:inline-block; padding:2px 6px; border-radius:8px; font-size:11px; background:#182131; color:var(--muted); }

.toast {
  position:fixed; bottom:20px; right:20px; background:#1e2733; color:var(--fg);
  padding:12px 16px; border-radius:10px; border:1px solid var(--border); box-shadow:0 6px 18px rgba(0,0,0,0.35);
  z-index:3000; min-width:200px;
}
.toast.error { border-color:#ff8c8c; color:#ffcccc; }
.loading-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center; z-index:2500;
}
.spinner {
  width:44px; height:44px; border:4px solid #2a3b54; border-top-color:#4da3ff; border-radius:50%; animation:spin 1s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

.blur-demo .table tbody td:not(.action-col),
.blur-demo .table tbody td .memo-text,
.blur-demo .table tbody td.money,
.blur-demo .table tbody td .status-pill,
.blur-demo .stat-card .value,
.blur-demo .asset-summary-row td,
.blur-demo .fixed-user-summary,
.blur-demo .fixed-title-summary {
  filter: blur(6px);
}
.blur-demo .table tbody td:not(.action-col),
.blur-demo .table tbody td .memo-text,
.blur-demo .table tbody td.money,
.blur-demo .table tbody td .status-pill,
.blur-demo .stat-card,
.blur-demo .asset-summary-row,
.blur-demo .fixed-user-summary,
.blur-demo .fixed-title-summary {
  pointer-events: none;
}
.blur-demo .table .action-col,
.blur-demo .table .action-col .btn-row,
.blur-demo .table .action-col .btn,
.blur-demo .panel .btn-row .btn.icon-only,
.blur-demo .fixed-actions .btn.icon-only,
.blur-demo .asset-actions .btn.icon-only,
.blur-demo .account-actions .btn.icon-only {
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 840px) {
  .topbar { flex-wrap:nowrap; gap:8px; }
  .topbar-left { flex:1; flex-wrap:nowrap; gap:8px; }
  .topbar h1 { font-size:18px; }
  .user-area { gap:8px; }
  .filters { gap:12px; padding:6px 0; }
  .filters label { gap:8px; }
  .filters select { padding:8px 10px; min-height:34px; padding-right:34px; }
  .table { min-width: 780px; table-layout:auto; }
  .fixed-table { table-layout:fixed; min-width: 760px; }
  .fixed-table th:nth-child(1), .fixed-table td:nth-child(1) { width:70px !important; }
  .fixed-table th:nth-child(2), .fixed-table td:nth-child(2) { width:80px !important; }
  .fixed-table th:nth-child(3), .fixed-table td:nth-child(3) { width:160px !important; }
  .fixed-table th:nth-child(4), .fixed-table td:nth-child(4) { width:136px !important; text-align:right !important; }
  .fixed-table th:nth-child(5), .fixed-table td:nth-child(5) { width:46px !important; text-align:center !important; }
  .fixed-table th:nth-child(6), .fixed-table td:nth-child(6) { width:300px !important; }
  .fixed-table th:nth-child(7), .fixed-table td:nth-child(7) { width:74px !important; }
  .table th, .table td { padding:8px; }
  .table th:nth-child(1), .table td:nth-child(1) { width:46px; }
  .table th:nth-child(2), .table td:nth-child(2) { width:86px; }
  .table th:nth-child(3), .table td:nth-child(3) { width:86px; }
  .table th:nth-child(4), .table td:nth-child(4) { width:76px; }
  .table th:nth-child(5), .table td:nth-child(5) { width:120px; }
  .table th:nth-child(6), .table td:nth-child(6) { width:110px; }
  .table th:nth-child(7), .table td:nth-child(7) { width:110px; }
  .table th:nth-child(9), .table td:nth-child(9) { width:80px; }
  .table th:nth-child(10), .table td:nth-child(10) { width:90px; }
  .memo-text { max-width:none; }
  .action-col .btn { width:30px; min-width:30px; padding:5px; }
  #fixedTable { min-width: 660px; }
}

@media (max-width: 640px) {
  /* 1. 기본 레이아웃 및 필터 패딩 (기존 유지) */
  .container { padding:12px; }
  .panel { padding:12px; }
  .filters { gap:12px; padding:6px 0; }
  .filters label { gap:8px; }
  .filters select { padding:8px 10px; min-height:34px; padding-right:34px; }
  .topbar h1 { font-size:17px; }
  .btn, .btn-small { font-size:12px; padding:8px 10px; }

  /* 2. 일반 테이블(내역 목록 등) 최소 너비 (기존 유지) */
  .table { min-width: 760px; }

  /* =========================================
     3. 고정비 테이블 (수정된 부분)
     ========================================= */
  .fixed-table {
    /* 강제 너비(fixed)를 풀고, 내용물에 따라 늘어나게(auto) 설정 */
    table-layout: auto !important;
    
    /* 테이블이 화면보다 넓어져도 찌그러지지 않고 옆으로 길어지게 함 */
    width: max-content !important; 
    min-width: 100%; 
  }

  /* 모든 칸(th, td)의 강제 픽셀 너비를 해제 */
  .fixed-table th, 
  .fixed-table td {
    width: auto !important; 
    white-space: nowrap; /* 줄바꿈 방지 */
    padding: 8px 10px !important; /* 터치하기 좋게 패딩 살짝 확보 */
  }

  /* 메모 텍스트: 길이 제한을 완전히 해제 */
  .fixed-table .memo-text {
    display: inline-block;
    max-width: none !important; /* 320px 제한 해제 */
    overflow: visible !important;
    text-overflow: clip !important; /* 말줄임표(...) 제거 */
    white-space: nowrap;
  }
  
  /* (선택) 수정/삭제 버튼 칸은 내용물 크기만큼만 차지하게 최소화 */
  .fixed-table th:last-child,
  .fixed-table td:last-child {
    width: 1% !important;
  }
}

/* 1. 달력 아이콘 하얗게 만들기 (다크모드 대응) */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1); /* 검은색 아이콘을 흰색으로 반전 */
  cursor: pointer;
  opacity: 0.8;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* 2. 비활성화(정산 미체크)된 입력창 회색 처리 */
input:disabled, 
select:disabled, 
textarea:disabled {
  background-color: #1a202a !important; /* 배경을 더 어둡게 */
  color: #4a5568 !important;            /* 글자를 흐리게 */
  border-color: #2d3748 !important;      /* 테두리도 어둡게 */
  cursor: not-allowed;
  opacity: 0.6;                          /* 전체적인 투명도 조절 */
}

tr[id] {
  scroll-margin-top: 100px;
}