release: 강조색 정리와 대시보드 숫자 확대

src/app/globals.css

@@ -54,6 +54,12 @@
   --sidebar-bg: #1b2532;
   --sidebar-border: #2c3848;
 
+  /* 주 버튼. 강조색 대신 배경을 뒤집어 눈에 띄게 한다.
+     파랑은 차트와 숫자가 독점해야 시선이 거기로 간다 */
+  --solid-bg: #1f2a37;
+  --solid-text: #ffffff;
+  --solid-bg-hover: #2c3948;
+
   /* 소프트 칩(뱃지/태그/스탯아이콘) */
   --info-soft-bg: #e3ecfb;
   --info-soft-text: #1f53b0;
@@ -131,6 +137,11 @@
   --sidebar-bg: #0f141c;
   --sidebar-border: #26313f;
 
+  /* 다크에서는 반대로 밝은 버튼이 눈에 띈다 */
+  --solid-bg: #e6ebf2;
+  --solid-text: #1b222c;
+  --solid-bg-hover: #f4f7fb;
+
   --info-soft-bg: rgba(79, 139, 240, 0.18);
   --info-soft-text: #bcd6fb;
   --success-soft-bg: rgba(95, 207, 151, 0.16);
@@ -206,9 +217,11 @@ a {
   --text-1: #eef2f8;
   --text-2: #b4c0d0;
   --text-3: #8492a5;
-  --accent: #7ea9f6;
-  --accent-soft: rgba(126, 169, 246, 0.16);
-  --accent-on-soft: #d6e4ff;
+  /* 네비 활성 표시에도 파랑을 안 쓴다. 본문의 차트·숫자만 파랑이어야
+     화면에서 파랑이 '여기 봐라' 로 읽힌다 */
+  --accent: #eef2f8;
+  --accent-soft: rgba(255, 255, 255, 0.10);
+  --accent-on-soft: #ffffff;
   --neutral-soft-bg: rgba(255, 255, 255, 0.08);
   --neutral-soft-text: #b4c0d0;
   --slate-100: rgba(255, 255, 255, 0.08);
@@ -624,7 +637,7 @@ a {
   width: 4px;
   height: 18px;
   border-radius: var(--radius-sm);
-  background: var(--indigo-600);
+  background: var(--slate-300);
 }
 
 /* ── 통계 카드 그리드 ── */
@@ -657,7 +670,7 @@ a {
 .stat-card-link:hover {
   transform: translateY(-2px);
   box-shadow: var(--shadow-md);
-  border-color: var(--accent);
+  border-color: var(--slate-400);
 }
 
 .stat-icon {
@@ -797,7 +810,7 @@ table.data-table {
 }
 
 .data-table .link:hover {
-  color: var(--indigo-600);
+  text-decoration-color: var(--text-1);
 }
 
 /* Animated List: 표 행이 아래에서 떠오르며 순차 등장 (행별 animation-delay는 인라인으로) */
@@ -845,23 +858,24 @@ table.data-table {
 }
 
 .btn-primary {
-  background: var(--indigo-600);
-  color: #fff;
-  border-color: var(--indigo-600);
+  background: var(--solid-bg);
+  color: var(--solid-text);
+  border-color: var(--solid-bg);
 }
 
 .btn-primary:hover {
-  background: var(--indigo-700);
+  background: var(--solid-bg-hover);
+  border-color: var(--solid-bg-hover);
 }
 
 .btn-ghost {
   border-color: transparent;
-  color: var(--indigo-600);
+  color: var(--text-2);
   background: transparent;
 }
 
 .btn-ghost:hover {
-  background: var(--indigo-50);
+  background: var(--slate-100);
 }
 
 .btn-danger {
@@ -955,14 +969,19 @@ table.data-table {
   border-radius: var(--radius-sm);
 }
 
+/* 링크는 색이 아니라 밑줄로 알린다. 파랑 링크가 목록마다 깔리면
+   정작 봐야 할 숫자보다 그쪽이 먼저 읽힌다 */
 .link {
-  color: var(--indigo-600);
+  color: var(--text-1);
   font-weight: 600;
+  text-decoration: underline;
+  text-decoration-color: var(--slate-300);
+  text-underline-offset: 3px;
   cursor: pointer;
 }
 
 .link:hover {
-  text-decoration: underline;
+  text-decoration-color: var(--text-1);
 }
 
 .text-link {
@@ -971,12 +990,16 @@ table.data-table {
   padding: 0;
   font-size: calc(13px * var(--fs, 1));
   font-weight: 600;
-  color: var(--indigo-600);
+  color: var(--text-2);
+  text-decoration: underline;
+  text-decoration-color: var(--slate-300);
+  text-underline-offset: 3px;
   cursor: pointer;
 }
 
 .text-link:hover {
-  text-decoration: underline;
+  color: var(--text-1);
+  text-decoration-color: var(--text-1);
 }
 
 .danger-text {
@@ -1118,7 +1141,7 @@ table.data-table {
 .collab-toggle input {
   width: 18px;
   height: 18px;
-  accent-color: var(--indigo-600);
+  accent-color: var(--solid-bg);
 }
 
 /* ── 모달 ── */
@@ -1223,7 +1246,7 @@ table.data-table {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  color: var(--indigo-600);
+  color: var(--text-2);
   font-weight: 600;
   cursor: pointer;
   margin-bottom: 20px;
@@ -1632,26 +1655,35 @@ table.data-table {
 /* 지표 하나. 한 카드에 여러 개를 가로로 나란히 둔다 */
 .dash-metrics {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  /* 150px 로 두면 1280 노트북에서 세 번째 지표가 다음 줄로 밀린다.
+     40px 숫자('18.4%')가 105px 쯤이라 130 이면 넉넉하다 */
+  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
   gap: 20px;
 }
-.dash-metric-label { font-size: calc(12px * var(--fs, 1)); color: var(--text-3); margin-bottom: 6px; }
+/* 숫자의 이름. 아래 설명글과 같은 크기, 같은 연한 색으로 두면 숫자만 크고
+   그게 무슨 값인지가 안 읽힌다. 라벨 > 설명 순으로 확실히 벌린다 */
+.dash-metric-label {
+  font-size: calc(13px * var(--fs, 1)); font-weight: 600; color: var(--text-2);
+  margin-bottom: 6px;
+}
+/* 이 화면에서 제일 커야 하는 글자. 24px 일 때는 밑에 붙은 설명 세 줄이 면적을
+   더 차지해서, 눈이 숫자에 머물지 않고 회색 글자로 흩어졌다 */
 .dash-metric-value {
-  font-size: calc(24px * var(--fs, 1)); font-weight: 500; line-height: 1.1; color: var(--text-1);
-  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
+  font-size: calc(40px * var(--fs, 1)); font-weight: 600; line-height: 1.05; color: var(--text-1);
+  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
 }
-.dash-metric-sub { font-size: calc(11px * var(--fs, 1)); color: var(--text-3); margin-top: 5px; line-height: 1.5; }
+.dash-metric-sub { font-size: calc(11px * var(--fs, 1)); color: var(--text-3); margin-top: 8px; line-height: 1.5; }
 .dash-metric-value.met { color: var(--green-600); }
 /* 큰 숫자 뒤 단위. 숫자와 같은 크기로 붙이면 24px 숫자끼리의 크기 비교가 흐려진다.
    확실히 작고 연해야 단위는 읽히면서 숫자가 주가 된다 */
 .dash-metric-value .unit {
-  font-size: calc(15px * var(--fs, 1)); font-weight: 400; color: var(--text-3);
-  letter-spacing: 0; margin-left: 2px;
+  font-size: calc(17px * var(--fs, 1)); font-weight: 400; color: var(--text-3);
+  letter-spacing: 0; margin-left: 3px;
 }
 
 /* 진행 막대. 숫자를 가리지 않도록 얇게 */
-.dash-track { height: 4px; background: var(--slate-100); border-radius: 2px; margin-top: 10px; overflow: hidden; }
-.dash-fill { height: 100%; border-radius: 2px; background: var(--accent); transition: width 0.5s ease; }
+.dash-track { height: 6px; background: var(--slate-100); border-radius: 3px; margin-top: 12px; overflow: hidden; }
+.dash-fill { height: 100%; border-radius: 3px; background: var(--accent); transition: width 0.5s ease; }
 .dash-fill.met { background: var(--green-600); }
 
 .dash-delta { font-size: calc(11px * var(--fs, 1)); font-weight: 500; font-variant-numeric: tabular-nums; }

src/components/dashboard/GoalCard.tsx

@@ -97,10 +97,10 @@ export default function GoalCard({ industry, internship, swcu, year, trend, goal
         <div>
           <div className="dash-metric-label">SW중심대학 지표</div>
           <div className="dash-metric-value">
-            {swcu.met}<span style={{ fontSize: 'calc(15px * var(--fs, 1))', color: 'var(--text-3)' }}> / {swcu.total}</span>
+            {swcu.met}<span className="unit">/ {swcu.total}</span>
           </div>
           {/* 지표 하나당 눈금 하나. 개수와 달성 여부만 읽히면 되므로 얇게 둔다 */}
-          <div style={{ display: 'flex', gap: 2, marginTop: 10, height: 4 }}>
+          <div style={{ display: 'flex', gap: 2, marginTop: 12, height: 6 }}>
             {swcu.cells.map((c, i) => (
               /* na 는 목표치가 없어 판정을 못 한 칸이다. 사선으로 둬야 미달과 구분된다 */
               <div