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.
374 lines
7.8 KiB
CSS
374 lines
7.8 KiB
CSS
/* 한남자리 토큰 — 공개(landing)·관리자(admin) 두 표면이 같이 읽는 유일한 토큰 파일이다.
|
|
다른 CSS에서 --surface 같은 토큰을 다시 정의하지 않는다(05 Q-25). */
|
|
:root {
|
|
color-scheme: light;
|
|
|
|
/* 서체. 표제·본문 모두 IBM Plex Sans KR(OFL, Google Fonts) — 표제는 700, 본문은 400.
|
|
--font-sans 는 admin.css가 쓰는 옛 이름이라 본문 서체의 별칭으로 남긴다. */
|
|
--font-display: "IBM Plex Sans KR", "Noto Sans KR", "Apple SD Gothic Neo", system-ui, sans-serif;
|
|
--font-body: "IBM Plex Sans KR", "Noto Sans KR", "Apple SD Gothic Neo", system-ui, sans-serif;
|
|
--font-sans: var(--font-body);
|
|
/* 한글 글리프가 없는 모노 다음에 본문 한글 서체를 둔다 — 숫자·라틴만 모노로 남는다(레드팀 06 P1-3) */
|
|
--font-mono: "SFMono-Regular", Consolas, "Liberation Mono", "IBM Plex Sans KR", monospace;
|
|
--weight-body: 400;
|
|
--weight-strong: 700;
|
|
|
|
/* 바탕 — 밝음·쿨 회색. 페이지 바탕 / 칸·패널 / 가라앉은 띠 */
|
|
--surface: #eceff1;
|
|
--surface-raised: #f7f9fa;
|
|
--surface-sunken: #dfe4e8;
|
|
--white: #ffffff;
|
|
|
|
/* 글자 — 쿨 먹. ink-3 은 #eceff1 위에서 4.5:1 이상이어야 한다(게이트 실측) */
|
|
--ink: #15191c;
|
|
--ink-2: #353d44;
|
|
--ink-3: #566069;
|
|
--ink-inverse: #f1f4f6;
|
|
|
|
/* 강조 — 130° 녹. 선택 칸 테두리·주 버튼·현재 탭에만 쓴다 */
|
|
--accent: #2d7639;
|
|
--accent-deep: #1f5a2b;
|
|
--accent-soft: #dbeadf;
|
|
--accent-rgb: 45 118 57;
|
|
|
|
/* 상태 — 관리자 검수 배지와 매트릭스 노트가 쓴다 */
|
|
--green: var(--accent);
|
|
--green-pale: var(--accent-soft);
|
|
--amber: #7a5a12;
|
|
--amber-pale: #f3ead3;
|
|
--red: #9b3a2e;
|
|
--red-pale: #f5e4e1;
|
|
--blue: #2f5c8f;
|
|
--blue-pale: #e3ebf4;
|
|
|
|
--line: rgba(21, 25, 28, 0.16);
|
|
--line-strong: var(--ink);
|
|
--line-light: var(--line);
|
|
--line-dark: rgba(255, 255, 255, 0.2);
|
|
--focus: #1f5a2b;
|
|
|
|
--space-1: 0.25rem;
|
|
--space-2: 0.5rem;
|
|
--space-3: 0.75rem;
|
|
--space-4: 1rem;
|
|
--space-5: 1.25rem;
|
|
--space-6: 1.5rem;
|
|
--space-8: 2rem;
|
|
--space-10: 2.5rem;
|
|
--space-12: 3rem;
|
|
--space-16: 4rem;
|
|
--space-20: 5rem;
|
|
--space-24: 6rem;
|
|
|
|
--content: min(100% - 2rem, 88rem);
|
|
--measure: 36em;
|
|
--header-height: 4rem;
|
|
|
|
/* 모서리 — 4px 하나. 둥근 배지만 pill */
|
|
--radius: 4px;
|
|
--radius-sm: var(--radius);
|
|
--radius-pill: 999px;
|
|
|
|
--transition: 160ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
--shadow-dialog: 0 2rem 5rem rgba(0, 0, 0, 0.3);
|
|
|
|
/* 역할 토큰 — 공개 조건판·관리자 표면 */
|
|
--brief-label-size: 0.8125rem;
|
|
--brief-input-size: 1rem;
|
|
--brief-panel-radius: var(--radius);
|
|
--brief-rule: var(--line);
|
|
--admin-body-size: 0.8125rem;
|
|
--admin-meta-size: 0.75rem;
|
|
--review-fact-bg: #eef5f0;
|
|
--review-unknown-bg: #fbf4e3;
|
|
--review-edited-bg: #faeeeb;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
text-size-adjust: 100%;
|
|
font-synthesis-style: none;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: var(--font-body);
|
|
font-size: 1rem;
|
|
font-weight: var(--weight-body);
|
|
line-height: 1.6;
|
|
letter-spacing: -0.01em;
|
|
color: var(--ink);
|
|
background: var(--surface);
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
/* 한글 조판 정본(typography §6-5): 어절 줄바꿈 + 긴 토큰 예외, 이탤릭 금지, 밑줄은 받침 아래 */
|
|
:lang(ko) {
|
|
word-break: keep-all;
|
|
overflow-wrap: anywhere;
|
|
line-break: strict;
|
|
}
|
|
|
|
:lang(ko) :is(p, li, dd, figcaption) {
|
|
line-height: 1.7;
|
|
}
|
|
|
|
:lang(ko) :is(h1, h2, h3) {
|
|
line-height: 1.3;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
:lang(ko) :is(em, i, cite, dfn, var, address) {
|
|
font-style: normal;
|
|
}
|
|
|
|
:lang(ko) a {
|
|
text-underline-position: under;
|
|
}
|
|
|
|
body.is-locked {
|
|
overflow: hidden;
|
|
}
|
|
|
|
img,
|
|
svg {
|
|
display: block;
|
|
max-width: 100%;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font: inherit;
|
|
letter-spacing: inherit;
|
|
}
|
|
|
|
button,
|
|
select,
|
|
input[type="range"],
|
|
input[type="checkbox"],
|
|
input[type="radio"] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:disabled,
|
|
input:disabled,
|
|
select:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 3px solid var(--focus);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
.skip-link {
|
|
position: fixed;
|
|
z-index: 200;
|
|
top: 0.75rem;
|
|
left: 0.75rem;
|
|
padding: 0.75rem 1rem;
|
|
color: var(--ink-inverse);
|
|
background: var(--ink);
|
|
border-radius: var(--radius);
|
|
transform: translateY(-180%);
|
|
transition: transform var(--transition);
|
|
}
|
|
|
|
.skip-link:focus {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
/* 고지 띠 — 두 표면 공통. 가운뎃점 메타 문자열 대신 문장 하나를 둔다 */
|
|
.demo-strip {
|
|
min-height: 2rem;
|
|
padding: 0.4rem 1rem;
|
|
color: var(--ink-inverse);
|
|
background: var(--ink);
|
|
font-size: 0.8125rem;
|
|
font-weight: var(--weight-strong);
|
|
text-align: center;
|
|
}
|
|
|
|
.button {
|
|
display: inline-flex;
|
|
min-height: 2.875rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.7rem 1.1rem;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius);
|
|
font-weight: var(--weight-strong);
|
|
line-height: 1.2;
|
|
text-decoration: none;
|
|
transition: color var(--transition), background-color var(--transition), border-color var(--transition);
|
|
}
|
|
|
|
.button-primary {
|
|
color: var(--white);
|
|
background: var(--accent);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.button-primary:hover {
|
|
background: var(--accent-deep);
|
|
border-color: var(--accent-deep);
|
|
}
|
|
|
|
.button-light {
|
|
color: var(--ink);
|
|
background: var(--surface-raised);
|
|
border-color: var(--line);
|
|
}
|
|
|
|
.button-light:hover {
|
|
border-color: var(--ink);
|
|
}
|
|
|
|
.button-outline {
|
|
color: inherit;
|
|
background: transparent;
|
|
border-color: currentColor;
|
|
}
|
|
|
|
.button-ghost {
|
|
color: inherit;
|
|
background: transparent;
|
|
border-color: var(--line);
|
|
}
|
|
|
|
.button-small {
|
|
min-height: 2.25rem;
|
|
padding: 0.45rem 0.7rem;
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.status-badge {
|
|
display: inline-flex;
|
|
min-height: 1.6rem;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
width: max-content;
|
|
padding: 0.25rem 0.5rem;
|
|
border: 1px solid currentColor;
|
|
border-radius: var(--radius-pill);
|
|
font-size: 0.75rem;
|
|
font-weight: var(--weight-strong);
|
|
line-height: 1;
|
|
}
|
|
|
|
.status-badge::before {
|
|
width: 0.38rem;
|
|
height: 0.38rem;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
content: "";
|
|
}
|
|
|
|
.status-demo {
|
|
color: var(--amber);
|
|
background: var(--amber-pale);
|
|
}
|
|
|
|
.status-pass {
|
|
color: var(--green);
|
|
background: var(--green-pale);
|
|
}
|
|
|
|
.status-warn {
|
|
color: var(--amber);
|
|
background: var(--amber-pale);
|
|
}
|
|
|
|
.status-blocked {
|
|
color: var(--red);
|
|
background: var(--red-pale);
|
|
}
|
|
|
|
.field-label {
|
|
display: block;
|
|
margin-bottom: 0.45rem;
|
|
color: var(--ink-2);
|
|
font-size: 0.8125rem;
|
|
font-weight: var(--weight-strong);
|
|
}
|
|
|
|
.text-input,
|
|
.select-input {
|
|
width: 100%;
|
|
min-height: 2.75rem;
|
|
padding: 0.65rem 0.75rem;
|
|
color: var(--ink);
|
|
background: var(--white);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.live-region {
|
|
position: fixed;
|
|
z-index: 300;
|
|
right: 1rem;
|
|
bottom: 1rem;
|
|
max-width: min(24rem, calc(100% - 2rem));
|
|
padding: 0.85rem 1rem;
|
|
color: var(--ink-inverse);
|
|
background: var(--ink);
|
|
border-left: 3px solid var(--accent);
|
|
border-radius: var(--radius);
|
|
box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.22);
|
|
}
|
|
|
|
@media (min-width: 48rem) {
|
|
:root {
|
|
--content: min(100% - 4rem, 88rem);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
scroll-behavior: auto !important;
|
|
transition-duration: 0.01ms !important;
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
}
|
|
|
|
::view-transition-group(*),
|
|
::view-transition-old(*),
|
|
::view-transition-new(*) {
|
|
animation: none !important;
|
|
}
|
|
}
|