600 lines
17 KiB
CSS
600 lines
17 KiB
CSS
/*
|
|
* CENTER Information Display — Reference Implementation styles.
|
|
*
|
|
* Every length is expressed in design units (u) via calc(N * var(--cid-u)), where the
|
|
* numbers N are the normalised values measured from the Source SVGs and recorded in
|
|
* verification/center-information-display/SOURCE-ANALYSIS.md.
|
|
*
|
|
* Setting --cid-u is how a consumer chooses a rendering scale. The Source itself does
|
|
* not declare an absolute size for 1 u (Inventory FU-2).
|
|
*/
|
|
|
|
.cid-scope {
|
|
--cid-u: 1px;
|
|
--cid-font: var(--center-font-family, 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif);
|
|
}
|
|
|
|
/* ── Shared card ──────────────────────────────────────────────────────── */
|
|
|
|
.cid-card {
|
|
min-width: 0;
|
|
box-sizing: border-box;
|
|
width: var(--cid-card-width, fit-content);
|
|
padding: calc(2 * var(--cid-u));
|
|
border-radius: calc(8 * var(--cid-u));
|
|
background: #ffffff;
|
|
box-shadow:
|
|
calc(4 * var(--cid-u)) calc(4 * var(--cid-u)) calc(4 * var(--cid-u)) rgba(0, 0, 0, 0.25);
|
|
font-family: var(--cid-font);
|
|
font-feature-settings: normal;
|
|
text-rendering: geometricPrecision;
|
|
}
|
|
|
|
.cid-card__header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: var(--cid-header-height, calc(40.654 * var(--cid-u)));
|
|
padding: 0 calc(10 * var(--cid-u));
|
|
overflow: hidden;
|
|
/* The band's top radius is the one card value that does NOT scale with the family:
|
|
both export scales carry the same raw 8.133 px, so it is 5.7921 u in the box family
|
|
and 5.5894 u in the table family. Both are Source-measured, neither is derived. */
|
|
border-radius: var(--cid-header-radius, calc(5.7921 * var(--cid-u)))
|
|
var(--cid-header-radius, calc(5.7921 * var(--cid-u))) 0 0;
|
|
background: linear-gradient(90deg, var(--cid-header-from), var(--cid-header-to));
|
|
}
|
|
|
|
.cid-card__header > span {
|
|
min-width: 0;
|
|
text-overflow: ellipsis;
|
|
color: #ffffff;
|
|
font-size: var(--cid-header-size, calc(27.4 * var(--cid-u)));
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
-webkit-text-stroke: calc(2 * var(--cid-u)) rgba(0, 0, 0, 0.5);
|
|
paint-order: stroke fill;
|
|
}
|
|
|
|
.cid-card__body {
|
|
box-sizing: border-box;
|
|
margin-top: calc(2 * var(--cid-u));
|
|
background: #ffffff;
|
|
}
|
|
|
|
/*
|
|
* The body frame is NOT a CSS border: Chrome snaps used border-width to a coarse
|
|
* grid (calc(4 * 1.4041px) resolves to 5.333px, not 5.6164px), which breaks
|
|
* sub-pixel parity with the Source. Padding + a layered inner surface is exact.
|
|
*/
|
|
.cid-card__body--list,
|
|
.cid-card__body--emphasis {
|
|
position: relative;
|
|
border-radius: 0 0 calc(6 * var(--cid-u)) calc(6 * var(--cid-u));
|
|
background: var(--cid-border);
|
|
}
|
|
|
|
/* The Source paints the inner content surface as a plain, UNROUNDED <rect> inside the
|
|
rounded frame — its square corners clear the 6 u curve, so no rounding is applied. */
|
|
.cid-card__body--list::before,
|
|
.cid-card__body--emphasis::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: calc(4 * var(--cid-u));
|
|
z-index: 0;
|
|
border-radius: 0;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.cid-card__body--list > *,
|
|
.cid-card__body--emphasis > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.cid-card__body--table {
|
|
padding: calc(2 * var(--cid-u));
|
|
border-radius: 0 0 calc(6 * var(--cid-u)) calc(6 * var(--cid-u));
|
|
background: var(--cid-border);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── Bullet badge ─────────────────────────────────────────────────────── */
|
|
|
|
.cid-badge {
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
/* Confines the sheen's plus-lighter blending to the badge's own surface. */
|
|
isolation: isolate;
|
|
flex: 0 0 auto;
|
|
width: calc(20 * var(--cid-u));
|
|
height: calc(20 * var(--cid-u));
|
|
border-radius: 50%;
|
|
background: var(--cid-badge);
|
|
/* The white ring is an inset shadow, not a border: border-width is snapped by the
|
|
engine and a bordered background also fails to paint inside foreignObject. */
|
|
box-shadow:
|
|
inset 0 0 0 calc(1.093 * var(--cid-u)) #ffffff,
|
|
calc(1.093 * var(--cid-u)) calc(1.093 * var(--cid-u))
|
|
calc(2.186 * var(--cid-u)) rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
/*
|
|
* The Source overlays a 25% white diagonal sheen on the badge.
|
|
*
|
|
* The Source gradient is userSpaceOnUse from (29.2028, 94.3404) to (43.7721, 114.161)
|
|
* on a badge of centre (36.5078, 104.822) and diameter 28.082 raw. Re-solved for CSS,
|
|
* whose gradient line is sized to the box, that vector is 143.682deg and its four Source
|
|
* stops (0 / 0.35 / 0.65 / 1) land at 17.467 / 39.398 / 58.196 / 80.126 percent.
|
|
*
|
|
* The Source composites it with `mix-blend-mode: plus-lighter`, which on a non-zero
|
|
* channel is materially brighter than normal alpha compositing (badge blue 0x41:
|
|
* 128.75 additive vs 112.5 normal), so the blend mode is reproduced rather than
|
|
* approximated. It is painted BEFORE the chevron, as in the Source, so the sheen
|
|
* passes under the white glyph instead of tinting it.
|
|
*/
|
|
.cid-badge::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 0;
|
|
border-radius: 50%;
|
|
background: linear-gradient(
|
|
143.682deg,
|
|
rgba(255, 255, 255, 0.25) 17.467%,
|
|
rgba(255, 255, 255, 0) 39.398%,
|
|
rgba(255, 255, 255, 0) 58.196%,
|
|
rgba(255, 255, 255, 0.25) 80.126%
|
|
);
|
|
mix-blend-mode: plus-lighter;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.cid-badge__chevron {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 1;
|
|
width: calc(20 * var(--cid-u));
|
|
height: calc(20 * var(--cid-u));
|
|
filter: drop-shadow(
|
|
calc(1.093 * var(--cid-u)) calc(1.093 * var(--cid-u))
|
|
calc(3.278 * var(--cid-u)) rgba(0, 37, 89, 0.65)
|
|
);
|
|
}
|
|
|
|
/* ── Form 1a — list body ──────────────────────────────────────────────── */
|
|
|
|
.cid-card__body--list,
|
|
.cid-card__body--emphasis {
|
|
padding: calc(15.756 * var(--cid-u)) calc(14 * var(--cid-u))
|
|
calc(13.56 * var(--cid-u)) calc(14 * var(--cid-u));
|
|
}
|
|
|
|
/*
|
|
* 강조형 1's content area measures 80 u tall against the list form's own rule predicting
|
|
* 78.834 u. The stack above the remainder is fully constrained and font-independent —
|
|
* 11.756 u lead-in (confirmed by the badge, which centres on line 1), 28.488 u primary
|
|
* line, 0.542 u secondary offset, 28.488 u secondary line — so the 1.166 u difference
|
|
* lands entirely in the trailing pad: 10.726 u of content pad plus the 4 u frame.
|
|
* One Source sample, so REFERENCE_OBSERVATION, not a derived rule.
|
|
*/
|
|
.cid-card__body--emphasis {
|
|
padding-bottom: calc(14.726 * var(--cid-u));
|
|
}
|
|
|
|
.cid-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.cid-item + .cid-item {
|
|
margin-top: calc(7.512 * var(--cid-u));
|
|
}
|
|
|
|
.cid-item > .cid-badge {
|
|
margin-top: calc(4.244 * var(--cid-u));
|
|
}
|
|
|
|
.cid-item__text {
|
|
flex: 1 1 0;
|
|
margin-left: calc(10 * var(--cid-u));
|
|
min-width: 0;
|
|
}
|
|
|
|
.cid-item__primary {
|
|
margin: 0;
|
|
color: var(--cid-text);
|
|
font-size: calc(23.7 * var(--cid-u));
|
|
letter-spacing: calc(-0.90642333984375 * var(--cid-u));
|
|
font-weight: 700;
|
|
line-height: calc(28.488 * var(--cid-u));
|
|
}
|
|
|
|
/* 강조형 1 measures a 29.03 u advance from the primary line to the secondary one,
|
|
0.542 u more than the primary line-height. */
|
|
.cid-item__secondary {
|
|
margin: calc(0.542 * var(--cid-u)) 0 0;
|
|
color: var(--cid-text);
|
|
font-size: calc(21.49 * var(--cid-u));
|
|
letter-spacing: calc(-0.8260262229225852 * var(--cid-u));
|
|
font-weight: 700;
|
|
line-height: calc(28.488 * var(--cid-u));
|
|
}
|
|
|
|
.cid-item__line {
|
|
display: block;
|
|
}
|
|
|
|
/* ── Form 1b — definition body ────────────────────────────────────────── */
|
|
|
|
.cid-card__body--definition {
|
|
padding: calc(10 * var(--cid-u)) 0 0 0;
|
|
}
|
|
|
|
.cid-def {
|
|
margin-bottom: calc(12.21 * var(--cid-u));
|
|
}
|
|
|
|
.cid-def__chip {
|
|
box-sizing: border-box;
|
|
max-width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
width: fit-content;
|
|
height: calc(28 * var(--cid-u));
|
|
margin-left: calc(8 * var(--cid-u));
|
|
padding-left: calc(4 * var(--cid-u));
|
|
padding-right: calc(81.8 * var(--cid-u));
|
|
/* information-box.md §5.3/§5.5: pill relation, radius = height / 2 = 14 u
|
|
(Confirmed across five chip widths). */
|
|
border-radius: calc(14 * var(--cid-u));
|
|
background: linear-gradient(
|
|
to right,
|
|
#dce7f6 29.54%,
|
|
rgba(245, 249, 255, 0) 100%
|
|
);
|
|
}
|
|
|
|
.cid-def__label {
|
|
margin-left: calc(4.44 * var(--cid-u));
|
|
color: #000000;
|
|
font-size: calc(20 * var(--cid-u));
|
|
font-weight: 700;
|
|
line-height: calc(19.12 * var(--cid-u));
|
|
white-space: nowrap;
|
|
-webkit-text-stroke: calc(2 * var(--cid-u)) #ffffff;
|
|
paint-order: stroke fill;
|
|
}
|
|
|
|
.cid-def__value {
|
|
margin: calc(2.12 * var(--cid-u)) 0 0 calc(36.5 * var(--cid-u));
|
|
color: #000000;
|
|
font-size: calc(21.79 * var(--cid-u));
|
|
font-weight: 500;
|
|
line-height: calc(32.049 * var(--cid-u));
|
|
}
|
|
|
|
.cid-def__line {
|
|
display: block;
|
|
}
|
|
|
|
.cid-def__bullets {
|
|
margin: calc(2.12 * var(--cid-u)) 0 0 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.cid-def__bullets > li {
|
|
position: relative;
|
|
margin-left: calc(36.5 * var(--cid-u));
|
|
color: #000000;
|
|
font-size: calc(21.79 * var(--cid-u));
|
|
font-weight: 500;
|
|
line-height: calc(32.049 * var(--cid-u));
|
|
}
|
|
|
|
.cid-def__bullets > li + li {
|
|
margin-top: calc(7.834 * var(--cid-u));
|
|
}
|
|
|
|
.cid-def__bullets > li::before {
|
|
content: '\2022';
|
|
position: absolute;
|
|
left: calc(-18.5 * var(--cid-u));
|
|
}
|
|
|
|
/* ── Form 2 — table body ──────────────────────────────────────────────── */
|
|
|
|
.cid-card--table {
|
|
--cid-header-size: calc(26.66 * var(--cid-u));
|
|
--cid-header-height: calc(39.231 * var(--cid-u));
|
|
--cid-header-radius: calc(5.5894 * var(--cid-u));
|
|
}
|
|
|
|
.cid-table {
|
|
display: grid;
|
|
grid-template-columns: calc(133.299 * var(--cid-u)) minmax(0, 1fr);
|
|
gap: calc(2 * var(--cid-u));
|
|
background: var(--cid-border);
|
|
}
|
|
|
|
.cid-table__row {
|
|
display: contents;
|
|
}
|
|
|
|
.cid-table__label {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 calc(4 * var(--cid-u));
|
|
background: #dce7f6;
|
|
color: #001a41;
|
|
font-size: calc(20 * var(--cid-u));
|
|
font-weight: 700;
|
|
line-height: calc(26.116 * var(--cid-u));
|
|
text-align: center;
|
|
}
|
|
|
|
/* Source 테이블형 rounds ONLY the last row's value cell, by 4 u, so the frame's own
|
|
6 u bottom-right curve stays visible through it. The bottom-left label cell is a
|
|
square rect in the Source and is left square here. */
|
|
.cid-table__row:last-child .cid-table__value {
|
|
border-bottom-right-radius: calc(4 * var(--cid-u));
|
|
}
|
|
|
|
.cid-table__value {
|
|
min-width: 0;
|
|
box-sizing: border-box;
|
|
padding: calc(8.5 * var(--cid-u)) calc(10 * var(--cid-u))
|
|
calc(9.19 * var(--cid-u)) calc(33.89 * var(--cid-u));
|
|
background: #ffffff;
|
|
}
|
|
|
|
.cid-table__item {
|
|
position: relative;
|
|
margin: 0;
|
|
color: #000000;
|
|
font-size: calc(21.79 * var(--cid-u));
|
|
font-weight: 500;
|
|
line-height: calc(26.116 * var(--cid-u));
|
|
}
|
|
|
|
.cid-table__item + .cid-table__item {
|
|
margin-top: calc(8.248 * var(--cid-u));
|
|
}
|
|
|
|
.cid-table__item::before {
|
|
content: '\2022';
|
|
position: absolute;
|
|
left: calc(-20.32 * var(--cid-u));
|
|
}
|
|
|
|
.cid-table__line {
|
|
display: block;
|
|
}
|
|
|
|
/* ── Form 3 — emphasis ────────────────────────────────────────────────── */
|
|
|
|
.cid-emphasis {
|
|
display: flex;
|
|
align-items: stretch;
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.cid-card--emphasis {
|
|
position: relative;
|
|
z-index: 1;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.cid-panel {
|
|
position: relative;
|
|
z-index: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
flex: 0 0 auto;
|
|
width: var(--cid-panel-width, calc(447.5 * var(--cid-u)));
|
|
min-width: 0;
|
|
margin: calc(0.178 * var(--cid-u)) 0 calc(0.178 * var(--cid-u)) calc(-4 * var(--cid-u));
|
|
padding-left: calc(20 * var(--cid-u));
|
|
font-family: var(--cid-font);
|
|
}
|
|
|
|
.cid-panel::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: -1;
|
|
border-radius: calc(8.688 * var(--cid-u));
|
|
background: linear-gradient(90deg, #0054cc 0%, rgba(0, 27, 66, 0) 100%);
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.cid-panel__arrow {
|
|
flex: 0 0 auto;
|
|
width: calc(53.676 * var(--cid-u));
|
|
height: calc(40.583 * var(--cid-u));
|
|
margin-right: calc(14.41 * var(--cid-u));
|
|
overflow: visible;
|
|
fill: #0044a4;
|
|
stroke: #ffffff;
|
|
stroke-width: calc(4 * var(--cid-u));
|
|
stroke-linejoin: miter;
|
|
paint-order: stroke fill;
|
|
filter: drop-shadow(0 calc(4 * var(--cid-u)) calc(4 * var(--cid-u)) rgba(0, 0, 0, 0.25));
|
|
}
|
|
|
|
/* With no arrow the text sits 21.23 u from the panel's left edge (강조형2). */
|
|
.cid-panel:not(:has(.cid-panel__arrow)) {
|
|
padding-left: calc(21.23 * var(--cid-u));
|
|
}
|
|
|
|
.cid-panel__text {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
margin: 0;
|
|
color: #ffffff;
|
|
font-size: var(--cid-emphasis-size, calc(33.742 * var(--cid-u)));
|
|
font-weight: 700;
|
|
line-height: calc(36.322 * var(--cid-u));
|
|
white-space: nowrap;
|
|
-webkit-text-stroke: calc(2.896 * var(--cid-u)) #0054cc;
|
|
paint-order: stroke fill;
|
|
}
|
|
|
|
.cid-panel__line {
|
|
display: block;
|
|
}
|
|
|
|
/* ── Mini table (강조형2 left card) ───────────────────────────────────── */
|
|
|
|
.cid-card__body--emphasis:has(.cid-metrics) {
|
|
padding: calc(4 * var(--cid-u));
|
|
}
|
|
|
|
.cid-metrics {
|
|
display: grid;
|
|
grid-template-columns: calc(91.22 * var(--cid-u)) minmax(0, 1fr);
|
|
gap: calc(2 * var(--cid-u));
|
|
background: var(--cid-border);
|
|
}
|
|
|
|
.cid-metrics__row {
|
|
display: contents;
|
|
}
|
|
|
|
.cid-metrics__label {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: calc(37.093 * var(--cid-u));
|
|
background: #dce7f6;
|
|
color: #001a41;
|
|
font-size: calc(20 * var(--cid-u));
|
|
font-weight: 700;
|
|
line-height: calc(19.12 * var(--cid-u));
|
|
}
|
|
|
|
/* Information-only renderer calibration, not Canonical size/weight/tracking tokens.
|
|
* Source-supported Hangul ink: term/table label 18.52 u, metric label 18.58 u,
|
|
* primary 22.22 u, secondary 20.19 u (existing ±3% height / ±2% width gates).
|
|
* Controlled probes under the resolved Noto face established the sizes above.
|
|
* Term/label tracking preserves the previous Hangul advance; word spacing preserves
|
|
* the previous space advance. Primary/secondary tracking preserves the complete
|
|
* representative Source-string advance, including spaces and mixed-script content.
|
|
* Fixed line boxes and all existing component geometry remain unchanged.
|
|
* Evidence: verification/center-information-typography-remediation/.
|
|
* Font binary approval and complete role mappings remain TBD.
|
|
*/
|
|
.cid-def__label,
|
|
.cid-table__label,
|
|
.cid-metrics__label {
|
|
letter-spacing: calc(-0.809600830078125 * var(--cid-u));
|
|
word-spacing: calc(0.563201904296875 * var(--cid-u));
|
|
}
|
|
|
|
.cid-metrics__value {
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
height: calc(37.093 * var(--cid-u));
|
|
padding-left: calc(10.667 * var(--cid-u));
|
|
background: #ffffff;
|
|
color: #001a41;
|
|
font-size: calc(21.05 * var(--cid-u));
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
white-space: pre;
|
|
}
|
|
|
|
/* Source-confirmed weight split: only the result value and the delta are bold. */
|
|
.cid-metrics__from {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.cid-metrics__to {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.cid-metrics__delta {
|
|
color: #ff0000;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* User-confirmed overflow policy. Each authored line stays a separate line;
|
|
long dynamic strings do not create extra rows or expand an owned region. */
|
|
.cid-item__line,
|
|
.cid-def__line,
|
|
.cid-def__label,
|
|
.cid-def__bullet-line,
|
|
.cid-table__line,
|
|
.cid-table__label > span,
|
|
.cid-metrics__label > span,
|
|
.cid-metrics__run,
|
|
.cid-panel__line {
|
|
display: block;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.cid-def__value,
|
|
.cid-table__label,
|
|
.cid-metrics__label { min-width: 0; }
|
|
|
|
/* ── Reference page demo chrome (not part of the Component contract) ───── */
|
|
|
|
.cid-demo {
|
|
display: grid;
|
|
gap: 24px;
|
|
}
|
|
|
|
.cid-demo__block > header {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.cid-demo__block > header strong {
|
|
color: var(--color-action-primary);
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.cid-demo__block > header span {
|
|
color: var(--color-fg-secondary);
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.cid-demo__stage {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 28px;
|
|
align-items: flex-start;
|
|
padding: 20px 20px 24px;
|
|
border: 1px solid var(--color-stroke-subtle);
|
|
border-radius: 4px;
|
|
background: #eceff3;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.cid-demo__state {
|
|
display: grid;
|
|
gap: 8px;
|
|
justify-items: start;
|
|
}
|
|
|
|
.cid-demo__tag {
|
|
color: var(--color-fg-secondary);
|
|
font-size: 11px;
|
|
letter-spacing: 0.08em;
|
|
}
|