This commit is contained in:
Yun Chan
parent
9529e3747c
commit
413486958c
13 changed files with 1410 additions and 88 deletions
|
|
@ -1,5 +1,3 @@
|
|||
@import "./tokens.css";
|
||||
|
||||
/* ==========================================================================
|
||||
새벽청과 — 메인 스타일시트
|
||||
|
||||
|
|
@ -42,6 +40,14 @@ img {
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
|
@ -305,6 +311,25 @@ h3 {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.board-select {
|
||||
min-height: 40px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.board tbody tr:has(.board-select[aria-pressed="true"]) {
|
||||
background: color-mix(in srgb, var(--band-accent-wash) 72%, transparent);
|
||||
box-shadow: inset 2px 0 var(--band-accent);
|
||||
}
|
||||
|
||||
.board-select[aria-pressed="true"] {
|
||||
color: var(--band-accent);
|
||||
}
|
||||
|
||||
.board td {
|
||||
color: var(--band-ink-muted);
|
||||
}
|
||||
|
|
@ -340,6 +365,67 @@ h3 {
|
|||
color: var(--band-ink-faint);
|
||||
}
|
||||
|
||||
.lot-inspector {
|
||||
margin-top: var(--space-4);
|
||||
border-block: 1px solid var(--band-line-strong);
|
||||
}
|
||||
|
||||
.lot-inspector-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
padding-block: var(--space-2);
|
||||
border-bottom: 1px solid var(--band-line);
|
||||
color: var(--band-ink-faint);
|
||||
font-size: var(--step--1);
|
||||
}
|
||||
|
||||
.lot-inspector-head p:last-child {
|
||||
color: var(--band-accent);
|
||||
}
|
||||
|
||||
.lot-inspector-body {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(13rem, 1.4fr) minmax(0, 3fr);
|
||||
gap: var(--space-5);
|
||||
padding-block: var(--space-4);
|
||||
}
|
||||
|
||||
.lot-title p:first-child {
|
||||
font-size: var(--step-2);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.lot-title p:last-child {
|
||||
margin-top: var(--space-1);
|
||||
color: var(--band-ink-muted);
|
||||
font-size: var(--step--1);
|
||||
}
|
||||
|
||||
.lot-spec {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.lot-spec > div {
|
||||
min-width: 0;
|
||||
padding-left: var(--space-3);
|
||||
border-left: 1px solid var(--band-line);
|
||||
}
|
||||
|
||||
.lot-spec dt {
|
||||
color: var(--band-ink-faint);
|
||||
font-size: var(--step--1);
|
||||
}
|
||||
|
||||
.lot-spec dd {
|
||||
margin-top: var(--space-2);
|
||||
color: var(--band-ink);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--step--1);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.board-notes {
|
||||
margin-top: var(--space-5);
|
||||
list-style: none;
|
||||
|
|
@ -497,10 +583,53 @@ h3 {
|
|||
|
||||
/* ── 제철 띠 ────────────────────────────────────────────────────── */
|
||||
.season-scroll {
|
||||
margin-top: var(--space-6);
|
||||
margin-top: var(--space-3);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.season-control {
|
||||
margin-top: var(--space-5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-4);
|
||||
padding-bottom: var(--space-2);
|
||||
border-bottom: 1px solid var(--band-line-strong);
|
||||
}
|
||||
|
||||
.season-buttons {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.season-buttons button {
|
||||
min-height: 40px;
|
||||
padding-inline: var(--space-3);
|
||||
border: 1px solid var(--band-line-strong);
|
||||
background: transparent;
|
||||
color: var(--band-ink-muted);
|
||||
cursor: pointer;
|
||||
font-size: var(--step--1);
|
||||
}
|
||||
|
||||
.season-buttons button + button {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.season-buttons button:hover {
|
||||
color: var(--band-ink);
|
||||
border-color: var(--band-accent);
|
||||
}
|
||||
|
||||
.season-status {
|
||||
color: var(--band-ink-muted);
|
||||
font-size: var(--step--1);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.season-status output {
|
||||
color: var(--band-accent);
|
||||
}
|
||||
|
||||
.season {
|
||||
width: 100%;
|
||||
min-width: 34rem;
|
||||
|
|
@ -541,11 +670,11 @@ h3 {
|
|||
|
||||
/* 이번 달 — 배경 대신 테두리로 표시한다. 칸이 찬 것과 이번 달이 겹쳐도
|
||||
둘 다 읽혀야 하기 때문이다 */
|
||||
.season .is-now {
|
||||
.season .is-focus {
|
||||
border-inline: 2px solid var(--band-accent);
|
||||
}
|
||||
|
||||
.season thead .is-now {
|
||||
.season thead .is-focus {
|
||||
color: var(--band-accent);
|
||||
border-top: 2px solid var(--band-accent);
|
||||
}
|
||||
|
|
@ -677,6 +806,99 @@ h3 {
|
|||
font-weight: 600;
|
||||
}
|
||||
|
||||
.order-draft {
|
||||
margin-top: var(--space-6);
|
||||
padding-block: var(--space-4);
|
||||
border-block: 1px solid var(--band-line-strong);
|
||||
}
|
||||
|
||||
.order-draft-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.order-draft-head h3 {
|
||||
font-size: var(--step-2);
|
||||
}
|
||||
|
||||
.order-draft-head p {
|
||||
color: var(--band-ink-faint);
|
||||
font-size: var(--step--1);
|
||||
}
|
||||
|
||||
.order-controls {
|
||||
margin-top: var(--space-4);
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 3fr) minmax(8rem, 1fr);
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.order-controls label {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
color: var(--band-ink-faint);
|
||||
font-size: var(--step--1);
|
||||
}
|
||||
|
||||
.order-controls select,
|
||||
.order-controls input {
|
||||
min-width: 0;
|
||||
min-height: 44px;
|
||||
padding-inline: var(--space-3);
|
||||
border: 1px solid var(--band-line-strong);
|
||||
background: var(--band-surface-2);
|
||||
color: var(--band-ink);
|
||||
}
|
||||
|
||||
.order-summary {
|
||||
margin-top: var(--space-4);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
border-top: 1px solid var(--band-line);
|
||||
}
|
||||
|
||||
.order-summary > div {
|
||||
padding-block: var(--space-3);
|
||||
border-bottom: 1px solid var(--band-line);
|
||||
}
|
||||
|
||||
.order-summary > div + div {
|
||||
padding-left: var(--space-3);
|
||||
border-left: 1px solid var(--band-line);
|
||||
}
|
||||
|
||||
.order-summary dt,
|
||||
.order-fine,
|
||||
.order-status {
|
||||
color: var(--band-ink-faint);
|
||||
font-size: var(--step--1);
|
||||
}
|
||||
|
||||
.order-summary dd {
|
||||
margin-top: var(--space-1);
|
||||
color: var(--band-ink);
|
||||
}
|
||||
|
||||
.order-fine {
|
||||
margin-top: var(--space-3);
|
||||
line-height: var(--leading-loose);
|
||||
}
|
||||
|
||||
.order-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.order-status {
|
||||
min-height: 1.7em;
|
||||
margin-top: var(--space-3);
|
||||
color: var(--band-ink-muted);
|
||||
}
|
||||
|
||||
.contact-fine {
|
||||
margin-top: var(--space-4);
|
||||
font-size: var(--step--1);
|
||||
|
|
@ -687,14 +909,16 @@ h3 {
|
|||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
min-height: 44px;
|
||||
margin-top: var(--space-5);
|
||||
padding: var(--space-3) var(--space-5);
|
||||
border: 0;
|
||||
background: var(--band-accent);
|
||||
color: var(--band-accent-ink);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
transition: background-color var(--dur-quick) var(--ease);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
|
|
@ -772,6 +996,10 @@ h3 {
|
|||
border: 0;
|
||||
}
|
||||
|
||||
.board-select {
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.board td {
|
||||
padding: var(--space-1) 0;
|
||||
border: 0;
|
||||
|
|
@ -787,6 +1015,37 @@ h3 {
|
|||
font-family: var(--font-body);
|
||||
}
|
||||
|
||||
.lot-inspector-body,
|
||||
.lot-spec,
|
||||
.order-controls,
|
||||
.order-summary {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.lot-spec > div {
|
||||
padding: var(--space-2) 0;
|
||||
border-left: 0;
|
||||
border-top: 1px solid var(--band-line);
|
||||
}
|
||||
|
||||
.season-control {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.season-buttons button {
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.season-status {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.order-summary > div + div {
|
||||
padding-left: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.today-card-wide {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -812,6 +1071,10 @@ h3 {
|
|||
.site-head,
|
||||
.skip-link,
|
||||
.btn,
|
||||
.season-control,
|
||||
.order-controls,
|
||||
.order-actions,
|
||||
.order-status,
|
||||
.hero-bg {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue