/* The 비용 group of AI 사용 인사이트 and 내 사용량 (insights foundation). Every colour and size is a design-system
   token (style.css), so the dark theme follows without rules of its own. */
.insights-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ds-space-3); margin: var(--ds-space-2) 0 var(--ds-space-1); }
/* A tile is as tall as what it says (the page's old `article` floor of 235px left its lower half empty); the
   tiles of one row end together. */
.insights-kind { min-height: 0; border: 1px solid var(--ds-line); border-radius: var(--ds-radius); padding: 14px 16px; background: var(--ds-surface); }
.insights-kind h4 { margin: 0 0 var(--ds-space-1); font-size: var(--ds-fs-sm); font-weight: 600; color: var(--ds-text-2); display: flex; gap: 6px; align-items: center; }
.insights-amount { margin: 0; font-family: var(--ds-font-num); font-size: var(--ds-fs-2xl); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* No record, and an amount not known, are said quietly: neither is an amount. */
.insights-kind:not([data-amount="known"]) .insights-amount { font-size: var(--ds-fs-lg); font-weight: 600; line-height: 1.8; letter-spacing: 0; color: var(--ds-text-2); }
/* A tile's lines and a tab's sentence are body text, 14px (user review 10-06, P2 12). */
.insights-sub { margin: var(--ds-space-1) 0; font-size: var(--ds-fs-sm); }
.insights-kind small { display: block; color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.insights-whole { white-space: nowrap; }
/* A wide tile: the count, then the window before on its own line, so every tile of a row has the same lines. */
@media (min-width: 601px) { .insights-sub .insights-delta { display: block; } .insights-sub .insights-dot { display: none; } }
/* A change is said by its sign and an arrow in the surrounding text colour: a rise in cost is not always bad, and
   colour alone would add a red and a green to the screen (review floor M5). */
.insights-delta[data-delta="up"]::before { content: "▲ "; content: "▲ " / ""; }
.insights-delta[data-delta="down"]::before { content: "▼ "; content: "▼ " / ""; }
.insights-groupby { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; max-width: 100%; margin: var(--ds-space-2) 0; }
/* The choice is never wider than its card, whatever an option's words are (a stale page's, a hand-made one's). */
.insights-groupby select { width: auto; min-width: 140px; max-width: 100%; }
/* A phone: the kind and its amount share the tile's first line, so three or four amounts are on the first screen. */
@media (max-width: 600px) {
  .insights-kind { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--ds-space-3); align-items: baseline; padding: 12px 14px; }
  .insights-kind h4 { margin: 0; flex-wrap: wrap; }
  .insights-amount { grid-column: 2; grid-row: 1; text-align: right; }
  .insights-kind:not([data-amount="known"]) .insights-amount { line-height: 1.2; }
  .insights-sub, .insights-kind small { grid-column: 1 / -1; }
}
/* A wide screen (a booth's 1080p wall) reads the amounts from a distance: one size step up, as the lists do. */
@media (min-width: 1700px) {
  .insights-kind h4 { font-size: var(--ds-fs-md); }
  .insights-amount { font-size: var(--ds-fs-figure); }
  .insights-kind:not([data-amount="known"]) .insights-amount { font-size: var(--ds-fs-xl); line-height: 2.1; }
  .insights-sub { font-size: var(--ds-fs-md); }
  .insights-kind small { font-size: var(--ds-fs-md); }
  /* ... and what kind of number it is, with the line that says so, a step up with the amounts. */
  .insights-kind .insights-badge, .insights-labels, .insights-labels .insights-badge { font-size: var(--ds-fs-sm); }
  .insights-kinds + .insights-hint { font-size: var(--ds-fs-sm); }
}
.insights-notice { background: var(--ds-accent-soft, #eef4ff); border-left: 3px solid var(--ds-accent, #3538cd); padding: 8px 12px; }
/* The other cost views and 보존·목적 (insights-retention.js). */
.insights-section { margin: 16px 0; }
.insights-section h4 { margin: 0 0 6px; font-size: 14px; }
/* 토큰 추정 and 외부 출처 as the setting lines of one card (audit G1-57): each line its name, then what it says or the
   press; the lines one step apart, the card's own padding around them. */
.insights-cost-more > .insights-section { margin: 0; }
.insights-cost-more > .insights-section + .insights-section { margin-top: var(--ds-space-3); }
.insights-cost-more .insights-section > .lx-row > h4 { margin: 0; }
.insights-kinds + .insights-hint[data-cost-kinds-none] { margin: 0 0 var(--ds-space-2); }
.insights-upload, .insights-retention-form { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; margin: 8px 0 12px; }
/* The invoice form's file input is as tall as its select and text inputs (a 28px button + 3px above and below + the
   border = 36px), so the row's tops meet (6.4). */
.insights-upload input[type="file"] { box-sizing: border-box; height: 36px; padding-block: 3px; }
.insights-zero { color: var(--ds-text-3); }
/* An amount under a cent is one line, whatever the column's width (it was 1센트 / 미만 in a narrow 소진 cell). */
.insights-table [data-money-subcent] { white-space: nowrap; }
/* 예산 소진 on a phone or beside a panel: the cells after the first three leave the row and the first cell carries their grey
   line (.lx-dropsum), which squeezed 범위's 72px column to one character a line. A rule is a row of its own: 범위, 대상 and
   소진 on one line, the grey line under them, the head row kept for a screen reader only (insights-beside does the same). */
/* The state mark kept in the name cell for a phone: shown only where the 상태 column has left the row. */
[data-budget-table] .insights-state-line { display: none; }
@media (max-width: 1100px) {
  [data-budget-table] .insights-state-line { display: block; margin-top: 2px; }
  [data-budget-table] .insights-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  [data-budget-table] .insights-table, [data-budget-table] .insights-table tbody { display: block; }
  [data-budget-table] .insights-table tbody tr { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: var(--ds-space-3); padding: var(--ds-space-2) 0; border-bottom: 1px solid var(--ds-line); }
  /* The shared cells (rm10's :is(.insights-panel, #my-usage-root) table.insights-table td, rf1's table.lx-t td { height: 46px }) outrank
     these selectors and held the cell to two lines, so a long customer hash ran over the grey line under it: !important here. */
  [data-budget-table] .insights-table tbody td { height: auto !important; padding: 0 !important; border: 0 !important; }
  [data-budget-table] .insights-table tbody td:first-child { display: contents; }
  [data-budget-table] .insights-table tbody td:nth-child(2) { flex: 1 1 0; min-width: 0; word-break: break-all; font-weight: 600; }
  [data-budget-table] .insights-table tbody td:nth-child(3) { text-align: right; white-space: nowrap; }
  [data-budget-table] .insights-table .lx-dropsum { order: 1; flex: 0 0 100%; margin-top: 2px; white-space: normal; }
}

/* Gateway cost: long translated headings wrap within their own columns. Keep the
   same tracks for the heading and every row; only the table scrolls when the
   two navigation rails leave less room. The existing mobile cards stay below 901px. */
@media (min-width: 901px) {
  #cost-root [data-gwc-cost-table] { overflow-x: auto; }
  #cost-root [data-gwc-cost-table] > .rm9-cost-cols {
    box-sizing: border-box;
    min-width: 836px;
    grid-template-columns: minmax(136px, 1.6fr) repeat(4, minmax(88px, 1fr)) minmax(104px, 1fr) minmax(136px, auto);
  }
  #cost-root [data-gwc-cost-table] [role="columnheader"] { min-width: 0; justify-self: stretch; }
  #cost-root [data-gwc-cost-table] .rm9-sort {
    width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.4;
    text-align: inherit;
  }
}