/* ============================================================
 * expense.css — Expense day accordion, expense items, rate card, category colors
 * My Travel History v2.0 — Modular CSS
 * (Budget → budget.css, Checklist → checklist.css 로 분리됨)
 * ============================================================ */

/* ========== Expense Day Accordion ========== */
.exp-day-tl{padding:12px 14px 12px 38px;position:relative;margin-bottom:var(--sp-3);
  border-radius:var(--r-xl);background:color-mix(in srgb,var(--day-c,var(--g200)) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--day-c,var(--g200)) 25%,transparent)}
.exp-day-tl::before{content:'';position:absolute;left:18px;top:42px;bottom:12px;width:2px;background:var(--day-c,var(--g200));border-radius:1px;opacity:.45}
.exp-day-tl:last-child::before{bottom:12px}
.exp-day-marker{position:absolute;left:6px;top:14px;width:26px;height:26px;border-radius:var(--r-full);
  background:var(--day-c,var(--primary));color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-h);font-size:11px;font-weight:700;z-index:1;
  box-shadow:0 2px 6px color-mix(in srgb,var(--day-c,var(--primary)) 35%,transparent)}
.exp-day-hdr{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;padding-top:2px;
  cursor:pointer;user-select:none;font-size:16px;font-weight:600}
.exp-day-hdr::after{content:'\25BE';margin-left:auto;font-size:10px;color:var(--g300);
  transition:transform .2s}
.exp-day-tl.collapsed .exp-day-hdr::after{transform:rotate(-90deg)}
.exp-day-tl.collapsed .elist{display:none}
.exp-day-summary{display:none;font-size:15px;color:var(--g400);margin-bottom:4px}
.exp-day-tl.collapsed .exp-day-summary{display:block}
.elist{display:flex;flex-direction:column;gap:4px}

/* ========== Expense Items ========== */
.exp-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:var(--sp-3)}
.exp-card{padding:14px;border-radius:var(--r-lg);text-align:center}
.exp-card-val{font-size:20px;font-weight:800;letter-spacing:-.02em}.exp-card-label{font-size:11px;color:var(--g500);margin-top:3px;font-weight:500}
.exp-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--sp-4)}
.exp-cat{padding:5px 12px;border-radius:var(--r-full);font-size:11px;font-weight:600;display:flex;align-items:center;gap:5px}
.eitem{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:4px 0;border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--day-c,var(--g200)) 6%,#fff);
  border:1px solid color-mix(in srgb,var(--day-c,var(--g200)) 18%,transparent);
  min-height:52px;position:relative;transition:all .2s}
.eitem:hover{border-color:color-mix(in srgb,var(--day-c,var(--g300)) 30%,transparent);
  background:color-mix(in srgb,var(--day-c,var(--g200)) 12%,#fff)}
.eitem-ic{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.eitem-body{flex:1;min-width:0}
.eitem-name{font-size:14px;font-weight:600}.eitem-meta{font-size:12px;color:var(--g400);margin-top:1px}
.eitem-amt{font-size:15px;font-weight:800;color:var(--g800);white-space:nowrap;letter-spacing:-.02em}
.eitem-acts{display:flex;gap:0;flex-shrink:0}
.eitem-btn{width:32px;height:32px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:15px;
  opacity:0;transition:.2s}.eitem:hover .eitem-btn{opacity:1}
.eitem-btn:hover{background:var(--g100)}.eitem-btn.del:hover{background:var(--error-bg);color:var(--error)}

/* ========== Expense Category Colors ========== */
.cat-food{background:#fef2f2;color:#b91c1c}.cat-transport{background:#eff6ff;color:#1d4ed8}
.cat-lodging{background:#f5f3ff;color:#6d28d9}.cat-activity{background:#ecfdf5;color:#047857}
.cat-shopping{background:#fdf4ff;color:#a21caf}.cat-other{background:var(--g100);color:var(--g600)}

/* Expense icon background — category-based (used by JS via class) */
.eitem-ic.cat-food{background:#fef2f2}.eitem-ic.cat-transport{background:#eff6ff}
.eitem-ic.cat-lodging{background:#f5f3ff}.eitem-ic.cat-activity{background:#ecfdf5}
.eitem-ic.cat-shopping{background:#fdf4ff}.eitem-ic.cat-other{background:var(--g100)}

/* ========== Exchange Rate Card ========== */
.rate-card{margin-bottom:var(--sp-3)}
.rate-top-row{display:flex;align-items:stretch;gap:8px;margin-bottom:10px}
.rate-top-row .rate-dest-select{flex:1;min-width:0}
.rate-top-row .rate-dest-select .fi{height:100%;min-height:48px;margin:0}
.rate-date-badge{flex:1;padding:10px 14px;border-radius:var(--r-lg);
  background:var(--white);border:1px solid var(--g200);
  color:var(--g700);text-align:center;
  min-height:48px;display:flex;align-items:center;justify-content:center;gap:6px}
.rate-date-ic{font-size:16px;line-height:1}
.rate-date-text{font-size:14px;font-weight:600}

/* Rate Calculator */
.rate-calc-section{margin-bottom:6px;padding:12px 14px 12px 18px;border-radius:var(--r-lg);
  background:#fffbf5;border:1px solid #f5e6d3;border-left:4px solid var(--g300);position:relative}
.rate-calc-input{flex:1;display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--r);
  border:1.5px solid var(--g200);background:var(--white);transition:.2s}
.rate-calc-input:focus-within{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.rate-calc-input input{border:none;outline:none;background:transparent;width:100%;font-size:15px;font-weight:800;
  color:var(--g800);font-family:var(--font)}
.rate-calc-header{display:grid;grid-template-columns:1fr 36px 1fr;gap:8px;align-items:center;margin-bottom:8px;padding:0 4px}
.rate-calc-header span{font-size:14px;font-weight:600;color:var(--g700)}
.rate-flag{font-size:16px;vertical-align:middle;margin-right:2px;display:inline-block}
.rate-calc-bidir{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.rate-calc-eq{font-size:18px;color:var(--g400);flex-shrink:0;font-weight:700;
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  user-select:none}
.rate-info{font-size:12px;color:var(--g600);text-align:center;padding:4px 12px;line-height:1.5;font-weight:600;
  border-radius:var(--r-full);width:fit-content;margin:2px auto 0}
/* Fixed section accent bars: coral / amber / sage */
.rate-sec-1{border-left-color:#fb923c}
.rate-sec-2{border-left-color:#f59e0b}
.rate-sec-3{border-left-color:#4ade80}
.rate-sec-1 .rate-info{background:#fff7ed;color:#c2410c}
.rate-sec-2 .rate-info{background:#fef3c7;color:#92400e}
.rate-sec-3 .rate-info{background:#dcfce7;color:#166534}
.rate-offline{display:inline-block;background:#fef3c7;color:#92400e;font-size:11px;
  padding:2px 8px;border-radius:var(--r-full);margin-left:4px;font-weight:600}