전 저장소 리팩터링과 SSOT 정비
This commit is contained in:
Yun Chan
parent
14ecbd4e7d
commit
3dfddcac6f
173 changed files with 19679 additions and 6952 deletions
|
|
@ -9,19 +9,35 @@
|
|||
|
||||
:root {
|
||||
/* ── Primitive: Neutral (따뜻한 종이 + 쿨 슬레이트) §3.1 ── */
|
||||
--paper: #fbfaf8; /* 본문 배경: 따뜻한 종이색 (순백 아님) */
|
||||
--paper-1: #fbfaf8; /* 구형 페이지 alias */
|
||||
--paper-2: #f4f2ee; /* 카드/패널 미세 단차 (테두리 대신 톤차) */
|
||||
--surface: #ffffff; /* 카드 표면 */
|
||||
--neutral-100: #eceff1; /* 표면 hover / subtle fill */
|
||||
--neutral-150: #e5e1da; /* 카드 보더 baseline = hairline */
|
||||
--neutral-200: #d5dbde; /* divider 진함 */
|
||||
--neutral-400: #98a4a9; /* placeholder / disabled */
|
||||
--paper: #fdfcf9; /* 시안에서 피킹한 따뜻한 아이보리 캔버스 */
|
||||
--paper-1: #fbf9f5; /* 구형 페이지 alias */
|
||||
--paper-2: #f4f1eb; /* 카드/패널 미세 단차 */
|
||||
--surface: rgba(255, 254, 251, 0.7); /* 보태니컬 배경이 비치는 유리 표면 */
|
||||
--neutral-100: #f0ede6; /* 표면 hover / subtle fill */
|
||||
--neutral-150: #e4dccf; /* 금빛이 아주 옅게 섞인 hairline */
|
||||
--neutral-200: #d7cdbd; /* divider 진함 */
|
||||
--neutral-400: #9b9a92; /* placeholder / disabled */
|
||||
|
||||
--ink: #1c2a2a; /* 본문 텍스트: 잉크 네이비-그린 (순흑 아님) */
|
||||
--ink-2: #5a6663; /* 보조 텍스트: 슬레이트 */
|
||||
--ink-3: #93a09c; /* 캡션/메타 */
|
||||
--hair: #e5e1da; /* 1px 헤어라인 (구역 분리는 이걸로) */
|
||||
--ink: #17231f; /* 시안의 거의 검정인 웜 포레스트 잉크 */
|
||||
--ink-2: #5f635d; /* 보조 텍스트 */
|
||||
--ink-3: #8f928a; /* 캡션/메타 */
|
||||
--hair: #e4dccf; /* 1px 헤어라인 */
|
||||
--botanical-gold: #b49a67;
|
||||
--botanical-hair: rgba(180, 154, 103, 0.28);
|
||||
--botanical-glow: rgba(218, 190, 132, 0.1);
|
||||
--glass-canvas: #f2eee5;
|
||||
--surface-gradient: linear-gradient(145deg, rgba(255, 254, 251, 0.98), rgba(248, 245, 238, 0.94));
|
||||
--glass-specular: linear-gradient(125deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.16) 38%, rgba(218, 190, 132, 0.075) 100%);
|
||||
--glass-specular-inset: linear-gradient(125deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.08) 46%, rgba(218, 190, 132, 0.055) 100%);
|
||||
--glass-surface: linear-gradient(145deg, rgba(255, 254, 251, 0.58), rgba(248, 245, 238, 0.32));
|
||||
--glass-surface-strong: linear-gradient(145deg, rgba(255, 254, 251, 0.72), rgba(248, 245, 238, 0.46));
|
||||
--glass-surface-inset: linear-gradient(145deg, rgba(255, 254, 251, 0.4), rgba(248, 245, 238, 0.18));
|
||||
--glass-border: rgba(169, 139, 82, 0.38);
|
||||
--glass-inset-border: rgba(169, 139, 82, 0.26);
|
||||
--glass-edge-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), inset 1px 0 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(148, 114, 57, 0.08);
|
||||
--glass-shadow: 0 18px 46px rgba(75, 58, 31, 0.095), 0 2px 8px rgba(75, 58, 31, 0.045);
|
||||
--glass-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), inset 0 -1px 0 rgba(148, 114, 57, 0.055), 0 9px 24px rgba(75, 58, 31, 0.05);
|
||||
--glass-blur: blur(24px) saturate(126%);
|
||||
|
||||
/* ── Sage-Teal (주 악센트 = 상담/신뢰), 화면당 1곳 배급 §3.2 ── */
|
||||
--accent: #3e7a6e; /* ★ 메인 악센트. 흰 배경 대비 5.0:1 AA */
|
||||
|
|
@ -117,6 +133,9 @@
|
|||
/* ── 래스터 디자인 요소 ── */
|
||||
--asset-warm-elements: url("/design-elements/clinical-paper-ambient.png");
|
||||
--asset-login-room: url("/design-elements/login-counseling-room.png");
|
||||
--asset-botanical-sidebar: url("/design-elements/learner-dashboard/background-light-sidebar.png");
|
||||
--asset-botanical-corner: url("/design-elements/learner-dashboard/background-light-corner.png");
|
||||
--asset-botanical-leaf: url("/design-elements/learner-dashboard/card-leaf-sprig-light.png");
|
||||
|
||||
/* ── 모션 §3.9 ── */
|
||||
--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
|
||||
|
|
@ -129,44 +148,61 @@
|
|||
|
||||
/* ── 다크 모드 (gloom 회피 — 충분한 밝은 면 + 절제된 악센트) §3.5 ── */
|
||||
[data-theme="dark"] {
|
||||
--paper: #0f1715;
|
||||
--paper-1: #111b18;
|
||||
--paper-2: #17211f;
|
||||
--surface: #1b2724;
|
||||
--neutral-100: #24322e;
|
||||
--neutral-150: #2c3b36;
|
||||
--neutral-200: #3a4b45;
|
||||
--neutral-400: #7c8d88;
|
||||
--paper: #0a1416;
|
||||
--paper-1: #0c1617;
|
||||
--paper-2: #111c1c;
|
||||
--surface: rgba(22, 32, 31, 0.68);
|
||||
--neutral-100: #1b2725;
|
||||
--neutral-150: #2b332f;
|
||||
--neutral-200: #3b4039;
|
||||
--neutral-400: #747970;
|
||||
|
||||
--ink: #eef6f3;
|
||||
--ink-2: #c6d3cf;
|
||||
--ink-3: #8a9b96;
|
||||
--hair: #2c3b36;
|
||||
--ink: #eee7d9;
|
||||
--ink-2: #c4bfb3;
|
||||
--ink-3: #8d9086;
|
||||
--hair: #30372f;
|
||||
--botanical-gold: #b9a275;
|
||||
--botanical-hair: rgba(185, 162, 117, 0.26);
|
||||
--botanical-glow: rgba(186, 156, 97, 0.065);
|
||||
--glass-canvas: #081416;
|
||||
--surface-gradient: linear-gradient(145deg, rgba(22, 32, 31, 0.98), rgba(14, 24, 25, 0.96));
|
||||
--glass-specular: linear-gradient(125deg, rgba(255, 247, 224, 0.055) 0%, rgba(255, 255, 255, 0.018) 42%, rgba(185, 162, 117, 0.035) 100%);
|
||||
--glass-specular-inset: linear-gradient(125deg, rgba(255, 247, 224, 0.032) 0%, rgba(255, 255, 255, 0.008) 46%, rgba(185, 162, 117, 0.022) 100%);
|
||||
--glass-surface: linear-gradient(145deg, rgba(22, 32, 31, 0.68), rgba(14, 24, 25, 0.5));
|
||||
--glass-surface-strong: linear-gradient(145deg, rgba(22, 32, 31, 0.82), rgba(14, 24, 25, 0.68));
|
||||
--glass-surface-inset: linear-gradient(145deg, rgba(28, 39, 37, 0.52), rgba(10, 22, 22, 0.32));
|
||||
--glass-border: rgba(185, 162, 117, 0.24);
|
||||
--glass-inset-border: rgba(185, 162, 117, 0.16);
|
||||
--glass-edge-shadow: inset 0 1px 0 rgba(255, 247, 224, 0.055), inset 1px 0 0 rgba(255, 255, 255, 0.018), inset 0 -1px 0 rgba(0, 0, 0, 0.12);
|
||||
--glass-shadow: 0 16px 42px rgba(0, 0, 0, 0.2);
|
||||
--glass-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 10px 26px rgba(0, 0, 0, 0.11);
|
||||
--glass-blur: blur(20px) saturate(112%);
|
||||
|
||||
--bg-app: #0e1714;
|
||||
--bg-surface: #17231f;
|
||||
--bg-surface-2: #22302c;
|
||||
--bg-tint: #1d302b;
|
||||
--bg-stage: #0e1614;
|
||||
--text-strong: #eaf0f1;
|
||||
--text-body: #c4cfd3;
|
||||
--text-muted: #88969c;
|
||||
--bg-app: #0a1416;
|
||||
--bg-surface: #16201f;
|
||||
--bg-surface-2: #111c1c;
|
||||
--bg-tint: #192522;
|
||||
--bg-stage: #091315;
|
||||
--text-strong: #eee7d9;
|
||||
--text-body: #c4bfb3;
|
||||
--text-muted: #8d9086;
|
||||
--text-on-accent: #0f1a17;
|
||||
--border-subtle: #2a363c;
|
||||
--border-strong: #38454c;
|
||||
--border-focus: #6fb3a4;
|
||||
--accent: #6fb3a4;
|
||||
--accent-deep: #84c2b4;
|
||||
--accent-tint: #1e2e2a;
|
||||
--accent-bright: #6fb3a4;
|
||||
--border-subtle: #30372f;
|
||||
--border-strong: #45483e;
|
||||
/* 2026-07-14 한신대 피드백: 다크 녹색 채도 완화 — 쨍한 민트 대신 마른 세이지 톤 */
|
||||
--border-focus: #7da294;
|
||||
--accent: #7da294;
|
||||
--accent-deep: #92b3a6;
|
||||
--accent-tint: #1c2622;
|
||||
--accent-bright: #8db1a4;
|
||||
--clay: #cc8f77;
|
||||
--clay-deep: #e0aa92;
|
||||
--clay-tint: #2b211e;
|
||||
--focus-ring: rgba(111, 179, 164, 0.45);
|
||||
--focus-ring: rgba(125, 162, 148, 0.42);
|
||||
|
||||
--pos-text: #7fd0a0;
|
||||
--pos-solid: #5fb682;
|
||||
--pos-tint: #16271d;
|
||||
--pos-text: #9cbfa4;
|
||||
--pos-solid: #6f9a7e;
|
||||
--pos-tint: #17211a;
|
||||
--warn-text: #e2b566;
|
||||
--warn-solid: #d4a24a;
|
||||
--warn-tint: #2a2415;
|
||||
|
|
@ -176,6 +212,10 @@
|
|||
--info-text: #79b0d4;
|
||||
--info-solid: #5c97be;
|
||||
--info-tint: #15222c;
|
||||
|
||||
--asset-botanical-sidebar: url("/design-elements/learner-dashboard/background-dark-sidebar.png");
|
||||
--asset-botanical-corner: url("/design-elements/learner-dashboard/background-dark-corner.png");
|
||||
--asset-botanical-leaf: url("/design-elements/learner-dashboard/card-leaf-sprig.png");
|
||||
}
|
||||
|
||||
/* ── 역할별 accent 오버라이드 §6.2 ──
|
||||
|
|
@ -203,27 +243,27 @@
|
|||
--focus-ring: rgba(62, 122, 110, 0.45);
|
||||
}
|
||||
|
||||
/* 다크 + 역할 동시 적용 시 accent 명도 보정 (가독) */
|
||||
/* 다크 + 역할 동시 적용 시 accent 명도 보정 (가독) — 저채도 세이지로 통일 */
|
||||
[data-theme="dark"] body[data-role="learner"] {
|
||||
--accent: #6fb3a4;
|
||||
--accent-deep: #84c2b4;
|
||||
--accent-bright: #6fb3a4;
|
||||
--accent-tint: #1e2e2a;
|
||||
--focus-ring: rgba(111, 179, 164, 0.45);
|
||||
--accent: #7da294;
|
||||
--accent-deep: #92b3a6;
|
||||
--accent-bright: #8db1a4;
|
||||
--accent-tint: #1c2622;
|
||||
--focus-ring: rgba(125, 162, 148, 0.42);
|
||||
}
|
||||
[data-theme="dark"] body[data-role="instructor"],
|
||||
[data-theme="dark"][data-role="instructor"] {
|
||||
--accent: #6fb3a4;
|
||||
--accent-deep: #84c2b4;
|
||||
--accent-bright: #6fb3a4;
|
||||
--accent-tint: #1e2e2a;
|
||||
--focus-ring: rgba(111, 179, 164, 0.45);
|
||||
--accent: #7da294;
|
||||
--accent-deep: #92b3a6;
|
||||
--accent-bright: #8db1a4;
|
||||
--accent-tint: #1c2622;
|
||||
--focus-ring: rgba(125, 162, 148, 0.42);
|
||||
}
|
||||
[data-theme="dark"] body[data-role="admin"],
|
||||
[data-theme="dark"][data-role="admin"] {
|
||||
--accent: #6fb3a4;
|
||||
--accent-deep: #84c2b4;
|
||||
--accent-bright: #6fb3a4;
|
||||
--accent-tint: #1e2e2a;
|
||||
--focus-ring: rgba(111, 179, 164, 0.45);
|
||||
--accent: #7da294;
|
||||
--accent-deep: #92b3a6;
|
||||
--accent-bright: #8db1a4;
|
||||
--accent-tint: #1c2622;
|
||||
--focus-ring: rgba(125, 162, 148, 0.42);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue