feat: 한국어 우선 쇼케이스 정리
This commit is contained in:
Yun Chan
parent
e4087c29f5
commit
2b7fa32b5b
109 changed files with 437 additions and 279 deletions
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
/* ==========================================================================
|
||||
두레대학 수강신청 — 프로덕션 콘솔 (shadcn/ui new-york 문법의 바닐라 이식)
|
||||
액센트는 벽돌(申) 하나. 나머지는 무채상 완성도로 말한다.
|
||||
액센트는 벽돌색 하나. 나머지는 무채상 완성도로 말한다.
|
||||
========================================================================== */
|
||||
|
||||
*,
|
||||
|
|
@ -92,15 +92,13 @@ h3 { font-size: var(--step-0); font-weight: 500; }
|
|||
font-family: var(--font-display);
|
||||
display: inline-flex; align-items: center; gap: var(--space-2);
|
||||
color: var(--foreground); text-decoration: none;
|
||||
font-weight: 600; font-size: var(--step-1);
|
||||
font-weight: 600; font-size: var(--step-1); white-space: nowrap;
|
||||
}
|
||||
.brand-seal {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
width: 26px; height: 26px;
|
||||
.brand-mark {
|
||||
display: inline-block;
|
||||
width: 10px; height: 10px;
|
||||
background: var(--accent);
|
||||
color: var(--on-accent);
|
||||
border-radius: var(--radius);
|
||||
font-size: var(--step-0); font-weight: 600;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.credits {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
|
|
@ -251,12 +249,15 @@ h3 { font-size: var(--step-0); font-weight: 500; }
|
|||
.c-seats { color: var(--muted-foreground); }
|
||||
.c-seats.is-low { color: var(--danger); font-weight: 600; }
|
||||
.c-star { color: var(--accent); font-weight: 600; }
|
||||
.c-seal {
|
||||
display: inline-grid; place-items: center;
|
||||
width: 22px; height: 22px;
|
||||
background: var(--accent); color: var(--on-accent);
|
||||
.c-enrolled {
|
||||
display: inline-flex; align-items: center;
|
||||
color: var(--accent-ink);
|
||||
background: var(--accent-soft);
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: var(--radius-xs);
|
||||
font-size: var(--step--1);
|
||||
padding: 1px 5px;
|
||||
font-size: var(--step--2);
|
||||
font-weight: 600;
|
||||
}
|
||||
.empty { padding: var(--space-4) 0; color: var(--muted-foreground); }
|
||||
|
||||
|
|
@ -378,10 +379,10 @@ tbody tr:hover { background: var(--muted); }
|
|||
.key i { width: 10px; height: 10px; display: inline-block; border-radius: var(--radius-xs); }
|
||||
.k-major { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
|
||||
.k-gen { background: var(--muted-2); box-shadow: inset 2px 0 0 var(--border-strong); }
|
||||
.k-seal { background: var(--accent); }
|
||||
.k-state { background: var(--accent); }
|
||||
|
||||
/* ── 버튼 ── */
|
||||
.btn-seal, .btn-line, .btn-star {
|
||||
.btn-primary, .btn-line, .btn-star {
|
||||
appearance: none; cursor: pointer; font: inherit;
|
||||
font-size: var(--step-0); font-weight: 500;
|
||||
height: 36px; padding: 0 var(--space-4);
|
||||
|
|
@ -390,17 +391,17 @@ tbody tr:hover { background: var(--muted); }
|
|||
transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), scale var(--dur-1) var(--ease-out);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn-seal { background: var(--accent); border: 1px solid var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sm); }
|
||||
.btn-seal:hover:not(:disabled) { background: var(--accent-ink); border-color: var(--accent-ink); }
|
||||
.btn-seal:disabled { opacity: 0.45; cursor: not-allowed; }
|
||||
.btn-primary { background: var(--accent); border: 1px solid var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sm); }
|
||||
.btn-primary:hover:not(:disabled) { background: var(--accent-ink); border-color: var(--accent-ink); }
|
||||
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
|
||||
.btn-line { background: var(--card); border: 1px solid var(--border-strong); color: var(--foreground); box-shadow: var(--shadow-sm); }
|
||||
.btn-line:hover { background: var(--muted); }
|
||||
.btn-star { background: none; border: 1px solid var(--border-strong); color: var(--muted-foreground); }
|
||||
.btn-star:hover { color: var(--accent-ink); border-color: var(--accent); }
|
||||
.btn-star[aria-pressed="true"] { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
|
||||
.btn-seal:active, .btn-line:active, .btn-star:active { scale: 0.98; }
|
||||
.btn-primary:active, .btn-line:active, .btn-star:active { scale: 0.98; }
|
||||
|
||||
/* ── 모달: 스플릿. 표지 = 잉크판, 액센트 도장. ── */
|
||||
/* ── 모달: 스플릿. 정보 패널과 핵심 동작을 분리한다. ── */
|
||||
.modal {
|
||||
margin: auto;
|
||||
width: min(94vw, 860px);
|
||||
|
|
@ -427,19 +428,16 @@ tbody tr:hover { background: var(--muted); }
|
|||
display: flex; flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.mcover-mark {
|
||||
position: absolute; right: -18px; bottom: -24px;
|
||||
font-size: 8rem; font-weight: 600; line-height: 1;
|
||||
color: var(--panel-mark);
|
||||
pointer-events: none; user-select: none;
|
||||
}
|
||||
.mcover-seal {
|
||||
width: 44px; height: 44px;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
font-size: var(--step-2); font-weight: 600;
|
||||
color: var(--on-accent);
|
||||
background: var(--accent);
|
||||
border-radius: var(--radius);
|
||||
.mcover-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
color: var(--panel-muted);
|
||||
border: 1px solid var(--panel-line);
|
||||
padding: 3px 6px;
|
||||
font-size: var(--step--2);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.12em;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.mcover-name { font-size: var(--step-3); line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; word-break: keep-all; }
|
||||
|
|
@ -532,11 +530,10 @@ tbody tr:hover { background: var(--muted); }
|
|||
@media (max-width: 680px) {
|
||||
.mspread { grid-template-columns: minmax(0, 1fr); }
|
||||
.mcover { padding: var(--space-4); flex-direction: row; align-items: center; gap: var(--space-3); }
|
||||
.mcover-seal { width: 40px; height: 40px; margin-bottom: 0; font-size: var(--step-0); }
|
||||
.mcover-label { margin-bottom: 0; }
|
||||
.mcover-name { font-size: var(--step-2); }
|
||||
.mcover-meta { margin-top: 2px; }
|
||||
.mcover-stats, .mcover-foot { display: none; }
|
||||
.mcover-mark { font-size: 5rem; }
|
||||
.msheet { padding: var(--space-4); min-height: 0; }
|
||||
.course-row { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
|
||||
.c-side { text-align: left; display: flex; gap: var(--space-3); align-items: center; }
|
||||
|
|
@ -644,7 +641,7 @@ kbd {
|
|||
thead th, tbody tr { break-inside: avoid; }
|
||||
tbody tr:hover { background: none; }
|
||||
.tt { min-width: 0; }
|
||||
.tt-block, .cd-slot, .eval-seg, .c-seal, .c-dept, .no-kind {
|
||||
.tt-block, .cd-slot, .eval-seg, .c-enrolled, .c-dept, .no-kind {
|
||||
print-color-adjust: exact; -webkit-print-color-adjust: exact;
|
||||
}
|
||||
|
||||
|
|
@ -739,7 +736,7 @@ kbd {
|
|||
@media (pointer: coarse) {
|
||||
.chip, .give-btn, .btn-line { min-height: 44px; }
|
||||
.icon-btn, .bell, .modal-close { width: 44px; height: 44px; }
|
||||
.btn-seal, .btn-star { min-height: 44px; }
|
||||
.btn-primary, .btn-star { min-height: 44px; }
|
||||
#q { min-height: 44px; }
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
/* ==========================================================================
|
||||
두레대학 수강신청 — 디자인 토큰 (v3: 프로덕션 콘솔)
|
||||
프리셋: production-console — shadcn/ui (new-york) zinc 스키마 + 벽돌 액센트 1.
|
||||
컨셉 한 문장: 실제 대학이 쓰는 것 같은 수강신청 — 도장은 액센트 하나로 남고
|
||||
나머지는 완성도로 말한다.
|
||||
컨셉 한 문장: 실제 대학이 쓰는 것 같은 수강신청 — 상태 표식은 하나로,
|
||||
나머지는 정보 밀도와 반응으로 말한다.
|
||||
레퍼런스: shadcn/ui 디자인 시스템. 종이/배판 컨셉은 철회(사용자 판정).
|
||||
하지 않은 것: 신문 배판 마스트헤드, 세리프 마스트, 전공별 색, 진행바 게이지.
|
||||
========================================================================== */
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
--primary: #18181b;
|
||||
--primary-foreground: #fafafa;
|
||||
--ring: #a1a1aa;
|
||||
--accent: #c2410c; /* 벽돌 — 申 도장과 신청 액션만 */
|
||||
--accent: #c2410c; /* 벽돌색 — 신청 상태와 핵심 동작만 */
|
||||
--accent-soft: #fff7ed;
|
||||
--accent-ink: #9a3412;
|
||||
--on-accent: #ffffff; /* 벽돌·남색 배경 위 잉크 */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue