/* Cost detail is confined to the amount area; only its table scrolls. */
      #profit-screen .jh-detail-drawer #jh-cost-modal {
        overflow: hidden;
        min-width: 0;
        container-type: inline-size;
        container-name: cost-popup;
        background: #fff;
      }
      #jh-cost-modal .jh-cost-dialog-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 34px;
        align-items: start;
        flex: 0 0 auto;
        min-width: 0;
        position: relative;
        background: #dbe9ef;
        border-bottom: 1px solid #cadce6;
      }
      #jh-cost-modal .jh-cost-dialog-toolbar .jh-cost-item-summary {
        height: auto;
        min-width: 0;
        gap: 4px;
        padding: 4px 6px;
        box-sizing: border-box;
        border: 0;
        border-radius: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      #jh-cost-modal .jh-cost-item-summary > div {
        flex-wrap: wrap;
        align-content: center;
        gap: 2px 5px;
        white-space: normal;
      }
      #jh-cost-modal .jh-cost-item-summary strong {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
      }
      #jh-cost-modal .jh-cost-modal-close {
        position: static;
        inset: auto;
        justify-self: center;
        width: 28px;
        height: 28px;
        margin: 3px 0;
        padding: 0;
        box-sizing: border-box;
        border: 1px solid transparent;
        border-radius: 4px;
        background: transparent;
        box-shadow: none;
        font-size: 21px;
        line-height: 24px;
        z-index: 1;
      }
      #jh-cost-modal .jh-cost-modal-close:hover {
        background: #e4edf2;
        border-color: #9eb8c9;
      }
      #jh-cost-modal .jh-cost-modal-close:focus-visible {
        outline: 2px solid #5d92b8;
        outline-offset: -2px;
      }
      #jh-cost-modal .jh-cost-modal-scroll,
      #jh-cost-modal:not(.is-group) .jh-cost-modal-scroll {
        min-width: 0;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        flex: 1 1 auto;
      }
      #jh-cost-modal table,
      #jh-cost-modal:not(.is-group) table {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
      }
      #jh-cost-modal .jh-cost-modal-scroll:has(.jh-cost-empty) table {
        min-width: 0;
      }

      /* A dedicated last column keeps the month action at the far right. */
      #jh-cost-modal:not(.is-group) table tr > *:first-child {
        width: 52px;
        min-width: 0;
      }
      #jh-cost-modal table tr > .jh-cost-toggle-cell {
        width: 18px;
        min-width: 0;
        padding-left: 2px;
        padding-right: 2px;
        text-align: center;
      }
      #jh-cost-modal .jh-cost-month-toggle {
        justify-content: center;
        width: 100%;
        min-width: 0;
        min-height: 24px;
      }
      #jh-cost-modal .jh-cost-month-label {
        font-size: 13px;
        white-space: nowrap;
      }
      #jh-cost-modal table tbody tr[data-month] > td:nth-child(2) {
        font-weight: 700;
      }
      #jh-cost-modal table tbody tr[data-month] > td:nth-child(3) {
        font-weight: 400;
        color: #315a77;
      }
      #jh-cost-modal .jh-cost-ledger-columns,
      #jh-cost-modal .jh-cost-ledger-row-toggle {
        grid-template-columns: 34px minmax(0, 1fr) minmax(64px, 28%);
        column-gap: 5px;
      }
      #jh-cost-modal .jh-cost-ledger-summary-line {
        flex-wrap: wrap;
      }
      #jh-cost-modal .jh-cost-ledger-summary-line span {
        min-width: 0;
        overflow-wrap: anywhere;
      }
      #jh-cost-modal .jh-cost-ledger-extra {
        padding-left: 4px;
      }
      #jh-cost-modal .jh-cost-ledger-extra > div {
        grid-template-columns: minmax(0, 64px) minmax(0, 1fr);
      }
      #jh-cost-modal .jh-cost-ledger-amount {
        font-size: clamp(10px, 3.4cqw, 11px);
      }
      #jh-cost-modal .jh-cost-month-items,
      #jh-cost-modal .jh-cost-ledger-entries,
      #jh-cost-modal .jh-cost-ledger-entry {
        min-width: 0;
      }
      /* Stack the two amounts only when the real amount area cannot fit three columns. */
      @container cost-popup (max-width:270px) {
        #jh-cost-modal table thead {
          display: none;
        }
        #jh-cost-modal table,
        #jh-cost-modal table tbody {
          display: block;
          width: 100%;
        }
        #jh-cost-modal table tbody tr[data-month] {
          display: grid;
          grid-template-columns: minmax(0, 1fr) 18px;
          height: auto !important;
          min-height: 0;
          padding: 5px 6px;
          border-bottom: 1px solid #dce7ef;
        }
        #jh-cost-modal table tr[data-month] > * {
          height: auto !important;
          min-height: 0;
          border: 0;
          padding: 2px 0 !important;
          box-sizing: border-box;
          background: transparent !important;
        }
        #jh-cost-modal:not(.is-group) table tr[data-month] > th:first-child {
          grid-row: 1;
          grid-column: 1;
          width: auto;
          min-width: 0;
          text-align: left;
        }
        #jh-cost-modal table tr[data-month] > .jh-cost-toggle-cell {
          grid-row: 1;
          grid-column: 2;
          width: 18px;
        }
        #jh-cost-modal table tr[data-month] > td[data-caption] {
          grid-column: 1 / -1;
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          gap: 4px;
          font-size: 12px !important;
          white-space: nowrap;
        }
        #jh-cost-modal table tr[data-month] > td[data-caption]::before {
          content: attr(data-caption);
          color: #7c91a1;
          font-size: 9px;
          font-weight: 400;
        }
        #jh-cost-modal table tr[data-month]:nth-of-type(4n + 3) {
          background: #fafcfd;
        }
        #jh-cost-modal table tr[data-month].is-expanded {
          background: #eaf3f8;
        }
        #jh-cost-modal table tr.jh-cost-month-breakdown {
          display: block;
          width: 100%;
        }
        #jh-cost-modal:not(.is-group) table tbody tr.jh-cost-month-breakdown > td:first-child {
          display: block;
          width: 100%;
          min-width: 0;
          padding: 8px 6px;
          box-sizing: border-box;
          white-space: normal;
        }
        #jh-cost-modal .jh-cost-ledger-columns {
          display: none;
        }
        #jh-cost-modal .jh-cost-ledger-row-toggle {
          grid-template-columns: minmax(0, 1fr) auto;
          gap: 3px 6px;
        }
        #jh-cost-modal .jh-cost-ledger-main {
          grid-column: 1 / -1;
          grid-row: 2;
        }
        #jh-cost-modal .jh-cost-ledger-amount {
          grid-column: 2;
          grid-row: 1;
          font-size: 11px;
        }
        #jh-cost-modal .jh-cost-month-item {
          grid-template-columns: minmax(0, 1fr);
          gap: 2px;
        }
        #jh-cost-modal .jh-cost-month-item strong {
          font-size: 12px;
        }
        #jh-cost-modal .jh-cost-expand-hint::after {
          content: " · 금액 단위: 원";
        }
      }

      /* Expanded month: one framed, read-only list matching the month typography. */
      #jh-cost-modal table tbody tr[data-month].is-expanded > * {
        background: #eaf3f8;
      }
      #jh-cost-modal table tbody tr[data-month].is-expanded > *:first-child {
        border-left: 2px solid #315f7e;
        border-top-left-radius: 4px;
      }
      #jh-cost-modal table tbody tr[data-month].is-expanded > *:last-child {
        border-right: 2px solid #315f7e;
        border-top-right-radius: 4px;
      }
      #jh-cost-modal:not(.is-group) table tbody tr.jh-cost-month-breakdown > td:first-child {
        padding: 0;
        border-radius: 0 0 4px 4px;
        background: #fff !important;
      }
      #jh-cost-modal .jh-cost-month-items:has(.jh-cost-ledger-grid) {
        gap: 0;
      }
      #jh-cost-modal .jh-cost-ledger-grid {
        min-width: 0;
        background: #fff;
        color: #356380;
      }
      #jh-cost-modal .jh-cost-ledger-columns,
      #jh-cost-modal .jh-cost-ledger-row {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) minmax(86px, 27%);
        column-gap: 10px;
        align-items: start;
      }
      #jh-cost-modal .jh-cost-ledger-columns {
        height: auto;
        min-height: 0;
        padding: 6px 10px;
        background: #d0e0e8;
        color: #42657e;
        font-size: 9px;
        font-weight: 700;
        line-height: 14px;
      }
      #jh-cost-modal .jh-cost-ledger-entries {
        padding: 0;
      }
      #jh-cost-modal .jh-cost-ledger-row {
        padding: 6px 10px;
        border-bottom: 1px solid #c7d7e1;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        white-space: normal;
        cursor: default;
      }
      #jh-cost-modal .jh-cost-ledger-row:last-child {
        border-bottom: 0;
      }
      #jh-cost-modal .jh-cost-ledger-row time {
        font: inherit;
        color: inherit;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }
      #jh-cost-modal .jh-cost-ledger-row .jh-cost-ledger-main {
        display: flex;
        flex-direction: column;
        gap: 0;
        min-width: 0;
        margin: 0;
        padding: 0;
        grid-column: auto;
        grid-row: auto;
        overflow-wrap: anywhere;
      }
      #jh-cost-modal .jh-cost-ledger-row .jh-cost-ledger-vendor {
        display: block;
        margin: 0;
        padding: 0;
        font: inherit;
        font-weight: 700;
        color: inherit;
        overflow-wrap: anywhere;
      }
      #jh-cost-modal .jh-cost-ledger-row .jh-cost-ledger-description {
        display: block;
        margin: 0;
        padding: 0;
        font-size: 13px;
        font-weight: 400;
        line-height: 19px;
        color: #456d87;
        overflow-wrap: anywhere;
      }
      #jh-cost-modal .jh-cost-ledger-row .jh-cost-ledger-amount {
        grid-column: auto;
        grid-row: auto;
        font: inherit;
        font-weight: 700;
        color: inherit;
        text-align: right;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }
      #jh-cost-modal .jh-cost-ledger-row .jh-cost-ledger-amount.is-negative {
        color: #b64e59;
      }
      @container cost-popup (max-width:300px) {
        #jh-cost-modal .jh-cost-ledger-columns {
          grid-template-columns: 35px minmax(0, 1fr) 86px;
          column-gap: 6px;
          padding: 6px;
          font-size: 9px;
        }
        #jh-cost-modal .jh-cost-ledger-entries {
          padding: 0;
        }
        #jh-cost-modal .jh-cost-ledger-row {
          grid-template-columns: 35px minmax(0, 1fr) 86px;
          column-gap: 6px;
          font-size: 12px;
          line-height: 18px;
          padding: 6px;
        }
        #jh-cost-modal .jh-cost-ledger-row .jh-cost-ledger-description {
          font-size: 11px;
          line-height: 13px;
        }
      }
      @container cost-popup (max-width:220px) {
        #jh-cost-modal .jh-cost-ledger-columns {
          grid-template-columns: 35px minmax(0, 1fr);
        }
        #jh-cost-modal .jh-cost-ledger-columns > span:nth-child(2) {
          display: none;
        }
        #jh-cost-modal .jh-cost-ledger-row {
          grid-template-columns: 35px minmax(0, 1fr);
          gap: 5px 6px;
        }
        #jh-cost-modal .jh-cost-ledger-row .jh-cost-ledger-main {
          grid-column: 1 / -1;
          grid-row: 2;
        }
        #jh-cost-modal .jh-cost-ledger-row .jh-cost-ledger-amount {
          grid-column: 2;
          grid-row: 1;
        }
      }
      @container cost-popup (max-width:270px) {
        #jh-cost-modal table tbody tr[data-month].is-expanded {
          border-radius: 4px 4px 0 0;
        }
        #jh-cost-modal table tbody tr[data-month].is-expanded > * {
          border-radius: 0;
        }
      }
      /* Transactions take their natural height; the popup body is the only scroller. */
      #jh-cost-modal .jh-cost-month-content {
        min-width: 0;
        background: #fff;
      }

      #jh-cost-modal .jh-cost-ledger-columns {
        position: static;
      }

      #jh-cost-modal .jh-cost-month-items:has(.jh-cost-ledger-grid),
      #jh-cost-modal .jh-cost-ledger-grid,
      #jh-cost-modal .jh-cost-ledger-columns,
      #jh-cost-modal .jh-cost-ledger-entries,
      #jh-cost-modal .jh-cost-ledger-row {
        width: 100%;
        box-sizing: border-box;
      }

      /* Reveal clips animation only; scrolling stays in the existing stable white gutters. */
      #jh-cost-modal .jh-cost-month-reveal {
        overflow: clip;
        display: flow-root;
        min-height: 0;
      }
      #jh-cost-modal .jh-cost-modal-scroll {
        overflow-anchor: none;
        scroll-behavior: auto;
      }
      #jh-cost-modal .jh-cost-expand-icon {
        transform: rotate(0deg);
        transform-origin: 50% 50%;
      }
      #jh-cost-modal
        .jh-cost-month-toggle:not(.is-unavailable)[aria-expanded="true"]
        .jh-cost-expand-icon {
        transform: rotate(180deg);
      }
      @media (prefers-reduced-motion: reduce) {
        #jh-cost-modal .jh-cost-expand-icon {
          transition: none;
        }
      }

      /* A single 2px frame, with no doubled border at the adjoining rows. */
      #jh-cost-modal table tbody tr[data-month].is-expanded > * {
        border-top: 2px solid #315f7e;
        border-bottom: 0;
        box-shadow: none;
      }
      #jh-cost-modal
        table
        tbody
        tr[data-month]:has(+ tr.jh-cost-month-breakdown[hidden] + tr[data-month].is-expanded)
        > * {
        border-bottom: 0;
      }
      #jh-cost-modal:not(.is-group) table tbody tr.jh-cost-month-breakdown > td:first-child {
        border-top: 0;
        border-left: 2px solid #315f7e;
        border-right: 2px solid #315f7e;
        border-bottom: 2px solid #315f7e;
      }
      @container cost-popup (max-width:270px) {
        #jh-cost-modal table tbody tr[data-month].is-expanded {
          border: 2px solid #315f7e;
          border-bottom: 0;
        }
        #jh-cost-modal table tbody tr[data-month].is-expanded > * {
          border: 0;
        }
      }

      /* White body also paints the reserved gutter when no scrollbar is needed. */
      #jh-cost-modal .jh-cost-modal-scroll {
        background: #fff;
        scrollbar-gutter: stable;
      }

      /* Main titles scroll normally; the active month and ledger titles share a scoped sticky stack. */
      #jh-cost-modal table thead th {
        position: static;
        top: auto;
        z-index: auto;
        background: #edf4f9;
      }
      #jh-cost-modal table tbody tr[data-month].is-sticky-month {
        position: sticky;
        top: 0;
        z-index: 3;
        background: #eaf3f8;
      }
      #jh-cost-modal table tbody tr[data-month].is-sticky-month > * {
        background: #eaf3f8 !important;
      }
      #jh-cost-modal .jh-cost-month-breakdown.is-sticky-detail .jh-cost-ledger-columns {
        position: sticky;
        top: var(--jh-cost-sticky-month-height, 0px);
        z-index: 2;
        background: #d0e0e8;
      }