feat(site): rework 19 marketing showcases for composition diversity
Some checks are pending
ci / build (push) Waiting to run
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.
This commit is contained in:
Yun Chan
parent
88c11682b1
commit
8e3cdb0d3b
296 changed files with 19131 additions and 17538 deletions
|
|
@ -1,7 +1,7 @@
|
|||
.admin-body {
|
||||
min-width: 0;
|
||||
color: #1c1c1a;
|
||||
background: #f3f4f3;
|
||||
color: var(--ink);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.admin-body h1,
|
||||
|
|
@ -53,9 +53,9 @@
|
|||
height: 2rem;
|
||||
flex: 0 0 auto;
|
||||
place-items: center;
|
||||
color: #121210;
|
||||
background: var(--gold-light);
|
||||
border-radius: 50%;
|
||||
color: #ffffff;
|
||||
background: var(--accent);
|
||||
border-radius: var(--radius);
|
||||
font-size: 0.58rem;
|
||||
font-weight: 850;
|
||||
letter-spacing: 0.08em;
|
||||
|
|
@ -129,7 +129,7 @@
|
|||
.sidebar-nav a.is-current {
|
||||
color: #fff;
|
||||
background: #2c2b27;
|
||||
box-shadow: inset 2px 0 0 var(--gold-light);
|
||||
box-shadow: inset 2px 0 0 var(--accent-soft);
|
||||
}
|
||||
|
||||
.sidebar-nav a > span {
|
||||
|
|
@ -436,17 +436,6 @@
|
|||
font-weight: 650;
|
||||
}
|
||||
|
||||
.state-simulator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
padding-left: 0.55rem;
|
||||
border-left: 1px solid #e1e2e0;
|
||||
color: #777973;
|
||||
font-size: 0.61rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.admin-workbench {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
|
|
@ -598,7 +587,7 @@
|
|||
|
||||
.queue-table tbody tr.is-selected {
|
||||
background: #f2f5f3;
|
||||
box-shadow: inset 3px 0 0 var(--gold-dark);
|
||||
box-shadow: inset 3px 0 0 var(--accent);
|
||||
}
|
||||
|
||||
.queue-table tbody tr.is-hidden {
|
||||
|
|
@ -943,7 +932,7 @@
|
|||
padding: 0.3rem 0.45rem;
|
||||
color: #fff;
|
||||
background: rgba(18, 18, 16, 0.82);
|
||||
border-left: 2px solid var(--gold-light);
|
||||
border-left: 2px solid var(--accent-soft);
|
||||
font-size: 0.54rem;
|
||||
}
|
||||
|
||||
|
|
@ -1106,7 +1095,7 @@
|
|||
min-width: 2.75rem;
|
||||
min-height: 2.75rem;
|
||||
padding: 0.5rem;
|
||||
color: #6f5420;
|
||||
color: var(--accent-deep);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
font-size: 0.58rem;
|
||||
|
|
@ -1376,7 +1365,7 @@
|
|||
}
|
||||
|
||||
.check-row button {
|
||||
color: #6f5420;
|
||||
color: var(--accent-deep);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
font-size: 0.52rem;
|
||||
|
|
@ -1497,7 +1486,7 @@
|
|||
}
|
||||
|
||||
.ai-summary > span {
|
||||
color: #c6a15b;
|
||||
color: var(--accent-soft);
|
||||
font-size: 0.51rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
|
@ -1590,7 +1579,7 @@
|
|||
}
|
||||
|
||||
.claim-review footer button {
|
||||
color: #6f5420;
|
||||
color: var(--accent-deep);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
font-size: 0.49rem;
|
||||
|
|
@ -1651,7 +1640,7 @@
|
|||
}
|
||||
|
||||
.appointment-card > button {
|
||||
color: #6f5420;
|
||||
color: var(--accent-deep);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
font-size: 0.49rem;
|
||||
|
|
@ -1945,7 +1934,7 @@ html:has(.admin-dialog[open]) {
|
|||
padding: 0.85rem;
|
||||
color: #fff;
|
||||
background: #20211f;
|
||||
border-left: 3px solid var(--gold-light);
|
||||
border-left: 3px solid var(--accent-soft);
|
||||
}
|
||||
|
||||
.admin-noscript p {
|
||||
|
|
@ -2050,14 +2039,6 @@ html:has(.admin-dialog[open]) {
|
|||
.queue-toolbar {
|
||||
grid-template-columns: minmax(13rem, 1fr) auto auto;
|
||||
}
|
||||
|
||||
.state-simulator {
|
||||
grid-column: 1 / -1;
|
||||
justify-content: flex-end;
|
||||
padding: 0.55rem 0 0;
|
||||
border-top: 1px solid #e1e2df;
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 50rem) {
|
||||
|
|
@ -2151,15 +2132,6 @@ html:has(.admin-dialog[open]) {
|
|||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.state-simulator {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.state-simulator select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.role-proof > header,
|
||||
.settings-proof {
|
||||
align-items: flex-start;
|
||||
|
|
@ -2271,7 +2243,6 @@ html:has(.admin-dialog[open]) {
|
|||
color: rgba(248, 247, 243, 0.82);
|
||||
}
|
||||
|
||||
.admin-main .state-simulator > span,
|
||||
.admin-main .icon-button kbd,
|
||||
.admin-main .role-proof > header span {
|
||||
color: #4f514b;
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,34 +1,51 @@
|
|||
/* 한남자리 토큰 — 공개(landing)·관리자(admin) 두 표면이 같이 읽는 유일한 토큰 파일이다.
|
||||
다른 CSS에서 --surface 같은 토큰을 다시 정의하지 않는다(05 Q-25). */
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--font-sans: "Pretendard Variable", Pretendard, SUIT, "Noto Sans KR", "Apple SD Gothic Neo", system-ui, sans-serif;
|
||||
--font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
|
||||
|
||||
--ink-950: #0a0a09;
|
||||
--ink-900: #121210;
|
||||
--ink-800: #24231f;
|
||||
--ink-700: #3e3c35;
|
||||
--ink-600: #5d5a50;
|
||||
--ink-500: #69655d;
|
||||
--paper-50: #f8f7f3;
|
||||
--paper-100: #f2f0e9;
|
||||
--paper-200: #e8e4da;
|
||||
--paper-300: #d8d2c5;
|
||||
--gold-dark: #6f5420;
|
||||
--gold: #9b762d;
|
||||
--gold-light: #c6a15b;
|
||||
--blue: #345d8c;
|
||||
--blue-pale: #e7eef6;
|
||||
--green: #2e684d;
|
||||
--green-pale: #e5f0e9;
|
||||
--red: #9d3f34;
|
||||
--red-pale: #f6e8e5;
|
||||
--amber: #7f5d18;
|
||||
--amber-pale: #f4ecd8;
|
||||
/* 서체. 표제·본문 모두 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;
|
||||
|
||||
--line-light: rgba(10, 10, 9, 0.14);
|
||||
--line-dark: rgba(255, 255, 255, 0.18);
|
||||
--focus: #2e6ba8;
|
||||
/* 글자 — 쿨 먹. 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;
|
||||
|
|
@ -42,24 +59,29 @@
|
|||
--space-16: 4rem;
|
||||
--space-20: 5rem;
|
||||
--space-24: 6rem;
|
||||
--space-32: 8rem;
|
||||
|
||||
--content: min(100% - 2rem, 88rem);
|
||||
--reading: 44rem;
|
||||
--header-height: 4.5rem;
|
||||
--radius-sm: 0.25rem;
|
||||
--radius-md: 0.75rem;
|
||||
--radius-lg: 1.25rem;
|
||||
--transition: 180ms cubic-bezier(0.22, 1, 0.36, 1);
|
||||
--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: 0.5rem;
|
||||
--brief-rule: var(--line-light);
|
||||
--brief-panel-radius: var(--radius);
|
||||
--brief-rule: var(--line);
|
||||
--admin-body-size: 0.8125rem;
|
||||
--admin-meta-size: 0.75rem;
|
||||
--review-fact-bg: #f2f8f4;
|
||||
--review-unknown-bg: #fff8e8;
|
||||
--review-edited-bg: #fdf0ed;
|
||||
--review-fact-bg: #eef5f0;
|
||||
--review-unknown-bg: #fbf4e3;
|
||||
--review-edited-bg: #faeeeb;
|
||||
}
|
||||
|
||||
*,
|
||||
|
|
@ -71,19 +93,45 @@
|
|||
html {
|
||||
scroll-behavior: smooth;
|
||||
text-size-adjust: 100%;
|
||||
font-synthesis-style: none;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--font-sans);
|
||||
font-family: var(--font-body);
|
||||
font-size: 1rem;
|
||||
font-weight: var(--weight-body);
|
||||
line-height: 1.6;
|
||||
letter-spacing: -0.015em;
|
||||
color: var(--ink-950);
|
||||
background: var(--paper-50);
|
||||
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;
|
||||
}
|
||||
|
|
@ -99,6 +147,7 @@ input,
|
|||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
letter-spacing: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
|
|
@ -134,8 +183,9 @@ a {
|
|||
top: 0.75rem;
|
||||
left: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
color: var(--white);
|
||||
background: var(--ink-950);
|
||||
color: var(--ink-inverse);
|
||||
background: var(--ink);
|
||||
border-radius: var(--radius);
|
||||
transform: translateY(-180%);
|
||||
transition: transform var(--transition);
|
||||
}
|
||||
|
|
@ -156,15 +206,14 @@ a {
|
|||
border: 0;
|
||||
}
|
||||
|
||||
/* 고지 띠 — 두 표면 공통. 가운뎃점 메타 문자열 대신 문장 하나를 둔다 */
|
||||
.demo-strip {
|
||||
min-height: 2rem;
|
||||
padding: 0.35rem 1rem;
|
||||
color: #f5ead5;
|
||||
background: var(--ink-950);
|
||||
border-bottom: 1px solid rgba(198, 161, 91, 0.4);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
padding: 0.4rem 1rem;
|
||||
color: var(--ink-inverse);
|
||||
background: var(--ink);
|
||||
font-size: 0.8125rem;
|
||||
font-weight: var(--weight-strong);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -174,35 +223,34 @@ a {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.7rem 1.05rem;
|
||||
padding: 0.7rem 1.1rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-sm);
|
||||
font-weight: 720;
|
||||
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), transform var(--transition);
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
transform: translateY(-1px);
|
||||
transition: color var(--transition), background-color var(--transition), border-color var(--transition);
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
color: var(--paper-50);
|
||||
background: var(--ink-950);
|
||||
border-color: var(--ink-950);
|
||||
color: var(--white);
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.button-primary:hover {
|
||||
color: var(--ink-950);
|
||||
background: var(--gold-light);
|
||||
border-color: var(--gold-light);
|
||||
background: var(--accent-deep);
|
||||
border-color: var(--accent-deep);
|
||||
}
|
||||
|
||||
.button-light {
|
||||
color: var(--ink-950);
|
||||
background: var(--paper-50);
|
||||
border-color: var(--paper-50);
|
||||
color: var(--ink);
|
||||
background: var(--surface-raised);
|
||||
border-color: var(--line);
|
||||
}
|
||||
|
||||
.button-light:hover {
|
||||
border-color: var(--ink);
|
||||
}
|
||||
|
||||
.button-outline {
|
||||
|
|
@ -214,7 +262,7 @@ a {
|
|||
.button-ghost {
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
border-color: var(--line-light);
|
||||
border-color: var(--line);
|
||||
}
|
||||
|
||||
.button-small {
|
||||
|
|
@ -231,11 +279,10 @@ a {
|
|||
width: max-content;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border: 1px solid currentColor;
|
||||
border-radius: 999px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 760;
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: 0.75rem;
|
||||
font-weight: var(--weight-strong);
|
||||
line-height: 1;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.status-badge::before {
|
||||
|
|
@ -247,8 +294,8 @@ a {
|
|||
}
|
||||
|
||||
.status-demo {
|
||||
color: var(--gold-dark);
|
||||
background: #f7efdc;
|
||||
color: var(--amber);
|
||||
background: var(--amber-pale);
|
||||
}
|
||||
|
||||
.status-pass {
|
||||
|
|
@ -269,9 +316,9 @@ a {
|
|||
.field-label {
|
||||
display: block;
|
||||
margin-bottom: 0.45rem;
|
||||
color: var(--ink-700);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 760;
|
||||
color: var(--ink-2);
|
||||
font-size: 0.8125rem;
|
||||
font-weight: var(--weight-strong);
|
||||
}
|
||||
|
||||
.text-input,
|
||||
|
|
@ -279,10 +326,10 @@ a {
|
|||
width: 100%;
|
||||
min-height: 2.75rem;
|
||||
padding: 0.65rem 0.75rem;
|
||||
color: var(--ink-950);
|
||||
color: var(--ink);
|
||||
background: var(--white);
|
||||
border: 1px solid var(--line-light);
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.live-region {
|
||||
|
|
@ -292,10 +339,10 @@ a {
|
|||
bottom: 1rem;
|
||||
max-width: min(24rem, calc(100% - 2rem));
|
||||
padding: 0.85rem 1rem;
|
||||
color: var(--white);
|
||||
background: var(--ink-950);
|
||||
border-left: 3px solid var(--gold-light);
|
||||
border-radius: var(--radius-sm);
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
@ -318,4 +365,10 @@ a {
|
|||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
}
|
||||
|
||||
::view-transition-group(*),
|
||||
::view-transition-old(*),
|
||||
::view-transition-new(*) {
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue