8e3cdb0d3b
Some checks are pending
ci / build (push) Waiting to run
Measured convergence before: split hero 13/19, top-bar nav 19/19, one-line notice footer 14/19, body Pretendard 17/21, 10 similarity pairs above 0.78. Each showcase got a pre-assigned hero family, nav form, footer form, type pair, background, accent hue, radius, motion grammar and material from outputs/rework-2026-10-06/plan.md; direction cards and the chosen reason are recorded in every design.md. After: 0 similarity warnings, 19 distinct display faces, 7 hero families, 5 nav forms, 5 footer forms, no scroll reveals, 5 showcases with SVG filter materials. Example contact values replace bracket placeholders under the existing fictional-brand notices. Thumbnails, OG images, card copy and three e2e assertions updated; dead CSS in dure-enrollment and hannam-jari removed; similarity.mjs learns the new font families.
162 lines
3.1 KiB
CSS
162 lines
3.1 KiB
CSS
/* ==========================================================================
|
|
청온 케어 — 2차 페이지(작업 절차) 전용 스타일. 공통 셸과 토큰은 main.css·tokens.css 가 맡는다.
|
|
========================================================================== */
|
|
|
|
.proto-intro {
|
|
padding-block: var(--space-5) var(--space-7);
|
|
}
|
|
|
|
.crumb {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
font-size: var(--step--1);
|
|
color: var(--ink-muted);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.crumb a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: var(--control-block);
|
|
text-decoration: underline;
|
|
text-underline-offset: 0.25em;
|
|
}
|
|
|
|
.crumb a:hover {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.crumb-sep {
|
|
color: var(--ink-faint);
|
|
}
|
|
|
|
.crumb [aria-current="page"] {
|
|
color: var(--ink);
|
|
font-weight: var(--weight-strong);
|
|
}
|
|
|
|
.proto-facts {
|
|
max-width: 40em;
|
|
}
|
|
|
|
.proto-intro .demo-notice {
|
|
margin-top: var(--space-5);
|
|
}
|
|
|
|
.proto-record {
|
|
padding-block: var(--space-7);
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.proto-record-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
|
|
gap: var(--space-6);
|
|
align-items: center;
|
|
}
|
|
|
|
.proto-record-grid .gear-cutout img {
|
|
aspect-ratio: 16 / 10;
|
|
object-position: 55% 45%;
|
|
mask-image: radial-gradient(ellipse 58% 62% at 55% 50%, var(--ink) 55%, transparent 100%);
|
|
-webkit-mask-image: radial-gradient(ellipse 58% 62% at 55% 50%, var(--ink) 55%, transparent 100%);
|
|
}
|
|
|
|
.proto-lead {
|
|
margin-top: var(--space-3);
|
|
color: var(--ink-muted);
|
|
max-width: var(--measure);
|
|
}
|
|
|
|
.compare {
|
|
margin-top: var(--space-4);
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: var(--surface-raised);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.compare-cell {
|
|
padding: var(--space-4);
|
|
}
|
|
|
|
.compare-cell + .compare-cell {
|
|
border-left: 1px solid var(--line);
|
|
}
|
|
|
|
.compare dt {
|
|
font-size: var(--step--1);
|
|
font-weight: var(--weight-medium);
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.compare-val {
|
|
margin-top: var(--space-1);
|
|
font-size: var(--step-2);
|
|
font-weight: var(--weight-strong);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.compare-val.before {
|
|
color: var(--ink-muted);
|
|
text-decoration: line-through;
|
|
text-decoration-thickness: 2px;
|
|
}
|
|
|
|
.compare-val.after {
|
|
color: var(--accent-hover);
|
|
}
|
|
|
|
.compare-sub {
|
|
font-size: var(--step--1);
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.proto-cta {
|
|
padding-block: 0 var(--space-7);
|
|
}
|
|
|
|
.card {
|
|
padding: var(--space-5);
|
|
background: var(--surface-raised);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
display: grid;
|
|
gap: var(--space-2);
|
|
justify-items: start;
|
|
}
|
|
|
|
.card .btn-primary {
|
|
margin-top: var(--space-3);
|
|
}
|
|
|
|
.calc-submit-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
@media (max-width: 60em) {
|
|
.proto-record-grid {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: var(--space-5);
|
|
}
|
|
|
|
.proto-record-grid .gear-cutout {
|
|
order: 2;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 37.5em) {
|
|
.compare {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.compare-cell + .compare-cell {
|
|
border-left: 0;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
}
|