.admin-layout { display: grid; grid-template-columns: minmax(160px, 220px) minmax(0, 1fr); gap: 2rem; width: 100%; max-width: 1180px; margin: 0 auto; } /* The grid owns width, including empty, loading and error states. */ .admin-layout > .admin-shell { width: 100%; max-width: none; min-width: 0; margin: 0; } .admin-sidebar { padding: 2rem 0 0 1rem; } .admin-sidebar nav { display: grid; gap: .65rem; position: sticky; top: 1rem; } .admin-sidebar a { color: inherit; text-decoration: none; padding: .55rem .7rem; border-left: 2px solid transparent; } .admin-sidebar a:hover, .admin-sidebar a:focus, .admin-sidebar a.is-active { border-color: currentColor; background: color-mix(in srgb, currentColor 8%, transparent); } .admin-panel { margin-top: 1.5rem; } /* --------------------------------------------------------------------------- Overview loading skeleton. The dashboard needs a session round-trip and then a dashboard round-trip before it can render a single card, and #admin-summary used to be an empty div for that whole window: measured live at 1440 KO, the summary stayed 0px for ~2.0s and then became 1277px in one frame, moving the document from 957px to 1687px. The first skeleton only reserved a heading, a parallel card grid and four 12px bars, which left the two analytics sections unreserved. Measured live on production at 1440 EN with an authenticated admin session, #admin-summary is 1361px made of H2 26 + .dashboard-grid 480 + .admin-analytics 401 + .admin-analytics.admin-d1-usage 397, so 798px of the collapse survived. The reservation is therefore structural: the skeleton reuses the real .dashboard-grid / .dashboard-card / .admin-analytics selectors and fills them with line-box placeholders sized in `lh`, so each placeholder occupies exactly the line the real text will occupy. Nothing here is an arbitrary min-height, and the reservation tracks font size, column count and viewport automatically because it is the production layout with the text removed. The markup carries no operational value, so it is safe in the pre-authorization document. --------------------------------------------------------------------------- */ .admin-skeleton { display: block; } .admin-skeleton { width: 100%; max-width: 100%; } .admin-skeleton-table { display: grid; gap: .55rem; max-width: 46rem; } .admin-skeleton-block, .admin-skeleton-card { display: block; overflow: hidden; border-radius: var(--panel-radius); background: var(--row-hover); } .admin-skeleton-block { height: 12px; border-radius: 4px; } .admin-skeleton-heading { width: min(18rem, 42%); height: 18px; } /* Line placeholders: the px value is the fallback for engines without `lh`. */ .admin-skeleton-line, .admin-skeleton-lines-2, .admin-skeleton-lines-3 { display: block; overflow: hidden; border-radius: 4px; background: var(--row-hover); } .admin-skeleton-line { height: 16px; height: 1lh; } .admin-skeleton-lines-2 { height: 32px; height: 2lh; } .admin-skeleton-lines-3 { height: 48px; height: 3lh; } /* Placeholder text nodes keep their own line box but must not paint glyphs. */ .admin-skeleton :is(h2, h3, p, small, li, th, td) > .admin-skeleton-line, .admin-skeleton :is(h2, h3, p, small, li, th, td) > .admin-skeleton-lines-2, .admin-skeleton :is(h2, h3, p, small, li, th, td) > .admin-skeleton-lines-3 { width: 100%; } .admin-skeleton .admin-skeleton-line-short { width: min(18rem, 42%); } .admin-skeleton ul { margin: 0; padding-left: 1.2rem; } .admin-skeleton-card { min-height: 8.5rem; border: var(--panel-border); } /* Reserved cards keep the REAL label and detail glyphs so the browser counts their line boxes exactly as it will in the settled state (that is what makes the reservation locale-correct without a per-language number). The glyphs must not be visible before authorization, so they are painted transparent — this is a colour, not a clip: nothing is truncated or hidden. */ .admin-skeleton-text { color: transparent; background: var(--row-hover); border-radius: 4px; } /* The value is live data, so its placeholder is a bar whose height comes from the same custom property that sizes the real value slot. */ .admin-skeleton-value { display: block; overflow: hidden; border-radius: 4px; background: var(--row-hover); height: calc(var(--dashboard-card-value-lines) * 1lh); } .admin-skeleton-block::after, .admin-skeleton-line::after, .admin-skeleton-lines-2::after, .admin-skeleton-lines-3::after, .admin-skeleton-value::after { content: ""; display: block; width: 100%; height: 100%; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--skeleton-highlight), transparent); animation: admin-skeleton-shimmer 1.4s ease-in-out infinite; } /* The card is now a real container of placeholders, so shimmering the card itself would paint over its children. Only the leaf placeholders shimmer. */ .admin-skeleton-card::after { content: none; } /* The analytics prose sits in a 276px column on mobile instead of 644px, so the same sentences wrap to one more line than on desktop. Measured live at 360 in BOTH languages, so this is column width, not translation length: .admin-analytics-meta 17px reserved vs 34px real, and the D1 lead paragraph 38px vs 57px. Reserving one extra line each is the structural answer; it is not a per-language nudge. */ @media (max-width: 700px) { .admin-skeleton .admin-analytics-meta > .admin-skeleton-line { height: 32px; height: 2lh; } .admin-skeleton .admin-d1-usage p > .admin-skeleton-lines-2 { height: 48px; height: 3lh; } .admin-skeleton .admin-d1-usage p > .admin-skeleton-lines-3 { height: 95px; height: 5lh; } } @keyframes admin-skeleton-shimmer { to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .admin-skeleton-block::after, .admin-skeleton-card::after, .admin-skeleton-line::after, .admin-skeleton-lines-2::after, .admin-skeleton-lines-3::after, .admin-skeleton-value::after { animation: none; transform: none; background: none; } } #admin-retry { margin-top: .75rem; } .admin-operational-shortcuts { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); } .admin-operational-shortcuts h2 { margin: 0 0 .75rem; } .admin-operational-shortcuts ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; } .admin-operational-shortcuts li { border: var(--panel-border); border-radius: var(--panel-radius); padding: var(--panel-padding-compact); } .admin-operational-shortcuts a { color: inherit; font-weight: 700; } .admin-operational-shortcuts small { display: block; margin-top: .35rem; color: var(--muted); line-height: 1.4; } .dashboard-card { border: var(--panel-border); border-radius: var(--panel-radius); padding: var(--panel-padding); min-height: 8.5rem; } /* --------------------------------------------------------------------------- Card narrative line-count contract — declared once, consumed twice. The previous reservation was an anonymous placeholder bar per card slot, so the loading state and the settled state laid out different text. Measured live on 43541f0 with the real dashboard GET held at Fetch requestStage=Request, the card grid's bottom moved loading -> settled by +7.2px at en-1440 but -56.7px at ko-1440: opposite directions, so no single reserved pixel height fixes both. The cause is that the two states laid out *different text*. The skeleton had anonymous placeholder bars while renderOverview supplied the real label and detail strings, so the browser counted a different number of line boxes in each state. The fix removes the divergence rather than tuning the numbers: admin.html declares each card's static label/detail copy and the reserved line count of its live-data value slot, and admin.js renders from that same declaration. Label and detail therefore wrap identically in both states because they are the same glyphs at the same width, and the value reservation resolves from this one custom property in both states. Defaults are 1 line. In practice every card declares 2, because a value is a count, an ISO timestamp, or an operational-reason sentence depending on the response, and .dashboard-grid rows equalize to their tallest card — so one wrapped value moved the whole row. Detail sentences are static copy and need no declaration — the same glyphs wrap the same in both states — except `lastCollection`, whose detail interpolates a live collector id: measured at en-1440 that pushes its real detail to 34.3px against 14px reserved, so it declares 2 lines. --------------------------------------------------------------------------- */ .dashboard-card { --dashboard-card-value-lines: 1; --dashboard-card-detail-lines: 1; } .dashboard-card[data-card-value-lines="2"] { --dashboard-card-value-lines: 2; } .dashboard-card[data-card-detail-lines="2"] { --dashboard-card-detail-lines: 2; } .dashboard-card > p { min-height: calc(var(--dashboard-card-value-lines) * 1lh); } .dashboard-card > small { display: block; min-height: calc(var(--dashboard-card-detail-lines) * 1lh); } .dashboard-card h3 { margin: 0; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; } .dashboard-card p { margin: .65rem 0 .35rem; font-size: 1.35rem; font-weight: 700; overflow-wrap: anywhere; } .dashboard-card small, .admin-analytics-note { color: var(--muted); line-height: 1.45; } #admin-overview .dashboard-card { min-height: 7.25rem; padding: var(--panel-padding-compact); } #admin-overview .dashboard-card p { margin: var(--space-sm) 0 var(--space-xs); } .admin-analytics-note { margin: 1rem 0 0; max-width: 70ch; } .admin-analytics { margin-top: 1.5rem; max-width: 46rem; overflow-x: auto; } .admin-analytics h2 { margin-bottom: .4rem; } .admin-analytics table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .admin-analytics th, .admin-analytics td { border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); padding: .45rem .25rem; text-align: left; white-space: nowrap; } .admin-analytics-meta { color: var(--muted); font-size: .9rem; line-height: 1.45; min-height: 17px; min-height: 1lh; } /* --------------------------------------------------------------------------- Live-status line-count contract — the same "declare once, consume twice" shape as the card contract above, applied to the two blocks that were still moving at 360 after b73c3f3. #admin-status is a single element whose *text* changes: while loading it says `운영 데이터를 불러오는 중…` / `Loading operational data…`, and on settle the renderer replaces it with `업데이트됨: ` / `Updated `. Measured live on 761e9fa with the real dashboard GET held at Fetch requestStage=Request: at 1440 both sentences are one 20.3px line box, but in the 360 column (1lh = 18.84px) the loading sentence is one line while the settled one is two — 18.84 -> 37.69, and every anchor below it (grid bottom, analytics h2, table top) moved by that same +18.8px. There is no room to shorten the sentence and no reason to delay the update, so the element declares the line count of its own worst case and both states are laid out against that floor. This is a measured maximum, not padding: two lines is exactly what the settled sentence occupies at 360. --------------------------------------------------------------------------- */ #admin-status { --admin-status-lines: 1; min-height: calc(var(--admin-status-lines) * 1lh); } .admin-d1-lede { min-height: 38px; min-height: 2lh; } .admin-d1-note { min-height: 57px; min-height: 3lh; } /* The D1 account list is the `ul` the previous epic left unreserved because its overrun looked language-dependent. It is not the list that wraps — it is each item, whose text is `