/* app.css 이후에 로드되어 넘침과 레이아웃을 잡습니다. */
.ibx-sheet, .ib-shell, .ib-content, .card, .section-card { max-width: 100%; }
.ibx-sheet { overflow: hidden; }

/* 인바디 상세: 두 칸이 겹치던 문제 방지 */
.ibx-columns { display: grid !important; gap: 18px; align-items: start; }
@media (min-width: 981px) { .ibx-columns { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); } }
@media (max-width: 980px) { .ibx-columns { grid-template-columns: 1fr; } }
.ibx-columns > main, .ibx-columns > aside { position: static !important; float: none !important; width: auto !important; min-width: 0; display: block; }
.ibx-columns > aside > * , .ibx-columns > main > * { position: static !important; float: none !important; }
.ibx-section { margin: 0 0 16px; min-width: 0; }
.ibx-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.ibx-metrics.two { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.ibx-control { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.ibx-analysis-row { display: grid; grid-template-columns: minmax(120px, 1.1fr) minmax(90px, .7fr) minmax(0, 1.6fr); gap: 12px; align-items: center; }
@media (max-width: 680px) { .ibx-analysis-row { grid-template-columns: 1fr 1fr; } .ibx-analysis-row .ibx-range { grid-column: 1 / -1; } }
.ibx-range, .ibx-track { max-width: 100%; }
.ibx-table-scroll, .ib-history-scroll, .ibx-chart-fit { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.ibx-cal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }

/* 차트 */
.ibx-trend-svg { display: block; width: 100%; height: auto; }
.ibx-area { fill: color-mix(in srgb, var(--ac) 14%, transparent); stroke: none; }
.ibx-line { stroke: var(--ac); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ibx-point { fill: var(--ac); stroke: var(--surface); stroke-width: 2.5; }
.ibx-point.latest { fill: var(--lime); }
.ibx-grid-line { stroke: var(--line); stroke-dasharray: 3 5; }
.ibx-y-label, .ibx-x-date { fill: var(--dim); font-size: 19px; font-weight: 800; }
.ibx-unit-label { fill: var(--dim); font-size: 17px; font-weight: 800; }
.ibx-point-value { fill: var(--soft); font-size: 21px; font-weight: 800; }
.ibx-point-value.latest { fill: var(--tx); font-size: 23px; font-weight: 900; }
.ib-trend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 14px; }
@media (max-width: 900px) { .ib-trend-grid { grid-template-columns: 1fr; } }
.ib-trend-card { min-width: 0; overflow: hidden; }
.ibx-body-map { max-width: 100%; overflow: hidden; }