/* =============================================================
GuDoc.Customer — Design System v2.1 theme bridge
─────────────────────────────────────────────────────────────
Maps the legacy `.customer-*` palette onto GuDoC Design System
v2.1 semantic tokens (Coral + warm gray + Wanted Sans), so every
existing page inherits the new look WITHOUT markup/binding changes.
Load AFTER gudoc-design/{tokens,tokens-v2.1,components}.css and the
structural app.css. This file only restyles — it never changes DOM,
classes, or the data-ontology-* bindings the pages emit.
§10 guard: visual system = adopted; IA/markup/ontology = untouched.
============================================================= */
/* ── Wanted Sans variable webfont ──
이제 index.html 의 로 조기·병렬 로드한다(프로토타입과 동일). 여기서 @import 하면
customer-theme.css 다운로드·파싱 이후에야 폰트가 직렬 로드되어 FOUT(시스템폰트→Wanted Sans)이 생기므로 제거. */
/* -------------------------------------------------------------
1) ROOT — font + page surface from tokens
app.css sets these on :root with hardcoded values; we win via
later cascade + specificity-equal selectors declared afterwards.
------------------------------------------------------------- */
:root {
font-family: var(--gudoc-font-sans);
color: var(--color-text);
background: var(--color-bg-subtle);
}
body {
font-family: var(--gudoc-font-sans);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Accessible focus ring across all interactive controls */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--color-focus-ring);
outline-offset: 2px;
border-radius: var(--gudoc-radius-xs);
}
/* -------------------------------------------------------------
2) SHELL — page background, header, brand, nav
------------------------------------------------------------- */
.customer-shell {
background: var(--color-bg-subtle);
}
.customer-shell__header {
position: sticky;
top: 0;
z-index: var(--gudoc-z-sticky);
min-height: var(--gudoc-topbar-height);
padding: 0 var(--gudoc-space-6);
border-bottom: 1px solid var(--color-divider);
background: color-mix(in srgb, var(--color-bg) 92%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* Brand wordmark with the coral mark chip (matches design-system topbar) */
.customer-shell__brand {
display: inline-flex;
align-items: center;
gap: var(--gudoc-space-2);
color: var(--color-text-strong);
font-size: var(--gudoc-text-lg);
font-weight: var(--gudoc-weight-bold);
letter-spacing: -0.01em;
}
.customer-shell__brand::before {
content: "G";
display: grid;
place-items: center;
width: 1.75rem;
height: 1.75rem;
border-radius: var(--gudoc-radius-sm);
background: var(--color-brand);
color: var(--color-text-on-brand);
font-size: var(--gudoc-text-sm);
font-weight: var(--gudoc-weight-bold);
}
.customer-shell__nav {
gap: var(--gudoc-space-4);
font-size: var(--gudoc-text-sm);
color: var(--color-text-muted);
}
.customer-shell__nav a {
padding: var(--gudoc-space-2) var(--gudoc-space-3);
border-radius: var(--gudoc-radius-md);
color: var(--color-text-muted);
font-weight: var(--gudoc-weight-medium);
transition: background-color var(--gudoc-duration-2) var(--gudoc-ease-standard),
color var(--gudoc-duration-2) var(--gudoc-ease-standard);
}
.customer-shell__nav a:hover {
background: var(--color-hover-bg);
color: var(--color-text-strong);
}
.customer-shell__main {
max-width: var(--gudoc-container-max);
padding: var(--gudoc-space-8) var(--gudoc-space-6);
}
/* -------------------------------------------------------------
3) HEADINGS / TEXT recolor (legacy #202124 / #68707d → tokens)
------------------------------------------------------------- */
.customer-home h1,
.customer-auth h1,
.customer-not-found h1,
.customer-public-page h1,
.customer-storage__header h1,
.customer-product-detail__heading h1,
.customer-subscription-start__heading h1 {
color: var(--color-text-strong);
letter-spacing: -0.02em;
}
.customer-home p,
.customer-auth p,
.customer-public-page p {
color: var(--color-text-muted);
}
/* Eyebrow: warm brown → brand-text coral, pill chip like design system */
.customer-page-heading__eyebrow {
display: inline-flex;
align-items: center;
padding: 3px var(--gudoc-space-3);
border-radius: var(--gudoc-radius-pill);
background: var(--color-brand-subtle);
color: var(--color-brand-text);
font-size: var(--gudoc-text-xs);
font-weight: var(--gudoc-weight-semibold);
letter-spacing: 0.02em;
}
/* -------------------------------------------------------------
4) CARDS / PANELS / SURFACES (legacy #fff + #dce1e8 borders)
------------------------------------------------------------- */
.customer-segmented,
.customer-state,
.customer-auth-summary,
.customer-kpi-strip > div,
.customer-store-hero,
.customer-store-panel,
.customer-storage-panel,
.customer-notification-item,
.customer-category-card,
.customer-tag-chip,
.customer-product-detail__media,
.customer-product-detail__summary,
.customer-product-detail__description,
.customer-product-detail__recommendations,
.customer-product-detail__subscription,
.customer-product-detail__coupons,
.customer-product-detail__qna,
.customer-subscription-start__panel,
.customer-subscription-start__summary,
.customer-subscription-start__coupon,
.customer-subscription-start__usage,
.customer-subscription-start__terms,
.customer-subscription-start__seller-legal,
.customer-subscription-start__form {
border-color: var(--color-border);
background: var(--color-surface);
}
/* Sunken / nested tiles (legacy #fbfcfd / #eef1f4) */
.customer-store-list article,
.customer-storage-list article,
.customer-subscription-summary div,
.customer-coupon-list__item,
.customer-qna-list__item,
.customer-option-chip,
.customer-coupon-apply-list__item,
.customer-subscription-manage__command {
border-color: var(--color-divider);
background: var(--color-bg-subtle);
}
/* -------------------------------------------------------------
5) BRAND ACCENT remap — legacy teal #1f6f5c → coral
------------------------------------------------------------- */
.customer-product-card__decision strong,
.customer-store-hero__profile,
.customer-store-list__answer span,
.customer-category-card__children strong,
.customer-product-detail__price strong,
.customer-subscription-start__summary > div:first-child strong,
.customer-coupon-list__item p,
.customer-qna-list__answer span,
.customer-command-message {
color: var(--color-brand-text);
}
.customer-store-hero__profile {
border-color: var(--color-border);
background: var(--color-brand-subtle);
}
.customer-command-message {
border-color: var(--color-border);
background: var(--color-brand-subtle);
}
/* Primary buttons: legacy teal fill → coral */
.customer-segmented__button--active,
.customer-state button,
.customer-subscription-manage__command button,
.customer-subscription-start__summary .customer-subscription-start__primary,
.customer-subscription-summary__action,
.customer-coupon-list__action,
.customer-coupon-command button,
.customer-qna-form button {
background: var(--color-brand);
border-color: var(--color-brand);
color: var(--color-text-on-brand);
}
.customer-segmented__button--active:hover,
.customer-state button:hover,
.customer-subscription-summary__action:hover,
.customer-coupon-list__action:hover:not(:disabled),
.customer-coupon-command button:hover:not(:disabled),
.customer-qna-form button:hover:not(:disabled) {
background: var(--color-brand-hover);
border-color: var(--color-brand-hover);
}
/* Dark / near-black action buttons (notifications, usage code) keep
a strong-neutral fill from tokens rather than hardcoded #111827 */
.customer-notification-toolbar__button,
.customer-notification-item__actions button,
.customer-notification-filters__item--active,
.customer-usage-code button {
background: var(--color-text-strong);
border-color: var(--color-text-strong);
color: var(--color-bg);
}
/* Inline links that were hardcoded blue → brand-text */
.customer-storage-inline-link,
.customer-subscription-start__coupon-message a,
.customer-coupon-list__guard a,
.customer-qna-form__message a {
color: var(--color-brand-text);
}
/* -------------------------------------------------------------
6) STATE SURFACES (error / success) → functional tokens
------------------------------------------------------------- */
.customer-state--error,
.customer-command-message--error,
.customer-qna-form__message {
border-color: var(--color-danger);
background: var(--color-danger-bg);
color: var(--color-danger);
}
.customer-storage-alert--success,
.customer-qna-form__message--success {
border-color: var(--color-success);
background: var(--color-success-bg);
color: var(--color-success);
}
/* Usage progress fill → coral */
.customer-usage-progress__track span {
background: var(--color-brand);
}
/* -------------------------------------------------------------
7) SEGMENTED CONTROL polish (token radii + motion, no `all`)
------------------------------------------------------------- */
.customer-segmented {
border-radius: var(--gudoc-radius-md);
}
.customer-segmented__button {
border-radius: var(--gudoc-radius-sm);
color: var(--color-text-muted);
font-weight: var(--gudoc-weight-medium);
transition: background-color var(--gudoc-duration-2) var(--gudoc-ease-standard),
color var(--gudoc-duration-2) var(--gudoc-ease-standard);
}
.customer-segmented__button:hover:not(:disabled):not(.customer-segmented__button--active) {
background: var(--color-hover-bg);
color: var(--color-text-strong);
}
/* -------------------------------------------------------------
8) PRODUCT CARD — adopt canonical `.gd-pc` look on the shared
`.customer-product-card` class (used by ProductSummaryCard AND
the inline cards in ProductDetail / Store / Storages). Restyle
only; markup + data-ontology-* bindings are untouched.
Source anatomy: components.css `.gd-pc` (Stage 2 Standard card).
------------------------------------------------------------- */
.customer-product-grid {
/* YouTube-style responsive step-down (design system grid rule) */
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--gudoc-space-5);
}
.customer-product-card {
border: 1px solid var(--color-border);
border-radius: var(--gudoc-radius-lg);
background: var(--color-surface);
/* Specific properties only — never `transition: all` (anti-flicker) */
transition: transform var(--gudoc-duration-3) var(--gudoc-ease-standard),
box-shadow var(--gudoc-duration-3) var(--gudoc-ease-standard),
border-color var(--gudoc-duration-3) var(--gudoc-ease-standard);
}
.customer-product-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--color-border-strong);
}
/* Media wrapper anchors the cadence badge over the photo (gd-pc__media) */
.customer-product-card__media {
position: relative;
}
.customer-product-card__image {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background: var(--color-bg-subtle);
}
.customer-product-card__image--empty {
background: var(--gudoc-cover-warm);
}
/* Cadence badge (매월/매주/…) — gd-pc__badge: dark glass pill, top-left */
.customer-product-card__badge {
position: absolute;
top: var(--gudoc-space-2);
left: var(--gudoc-space-2);
padding: 3px var(--gudoc-space-2);
border-radius: var(--gudoc-radius-pill);
background: rgba(20, 20, 19, 0.7);
color: #fff;
font-size: var(--gudoc-text-2xs);
font-weight: var(--gudoc-weight-semibold);
letter-spacing: 0.02em;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.customer-product-card__body {
gap: var(--gudoc-space-2);
padding: var(--gudoc-space-3);
}
/* Meta = category eyebrow → muted brand text, uppercase micro-detail */
.customer-product-card__meta {
color: var(--color-brand-text);
font-size: var(--gudoc-text-2xs);
font-weight: var(--gudoc-weight-semibold);
letter-spacing: 0.02em;
text-transform: uppercase;
}
.customer-product-card h3 {
color: var(--color-text-strong);
font-size: var(--gudoc-text-base);
font-weight: var(--gudoc-weight-semibold);
line-height: var(--gudoc-leading-snug);
}
.customer-product-card__seller {
color: var(--color-text-muted);
font-size: var(--gudoc-text-xs);
}
/* Decision row: retention/price emphasis = brand coral (트러스트 시그널) */
.customer-product-card__decision {
color: var(--color-text-muted);
font-size: var(--gudoc-text-sm);
}
.customer-product-card__decision strong {
color: var(--color-brand-text);
font-weight: var(--gudoc-weight-bold);
font-variant-numeric: tabular-nums;
}
/* Benefit chips → token tag pills */
.customer-product-card__benefits span {
padding: 4px var(--gudoc-space-2);
border: none;
border-radius: var(--gudoc-radius-pill);
background: var(--color-bg-subtle);
color: var(--color-text-muted);
font-size: var(--gudoc-text-xs);
font-weight: var(--gudoc-weight-medium);
}
/* First benefit (best discount / coupon) reads as a brand tag */
.customer-product-card__benefits span:first-child {
background: var(--color-brand-subtle);
color: var(--color-brand-text);
font-weight: var(--gudoc-weight-semibold);
}
/* -------------------------------------------------------------
9) KPI strip → stat-card look (token surface + tabular nums)
------------------------------------------------------------- */
.customer-kpi-strip > div {
border-radius: var(--gudoc-radius-md);
background: var(--color-bg-subtle);
}
.customer-kpi-strip span {
color: var(--color-text-muted);
font-size: var(--gudoc-text-xs);
}
.customer-kpi-strip strong {
color: var(--color-brand-text);
font-size: var(--gudoc-text-2xl);
font-weight: var(--gudoc-weight-bold);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
/* -------------------------------------------------------------
10) Wider discovery grid: step columns down on smaller widths
(design system: 6→5→4→3→2→1; app.css already collapses ≤860px)
------------------------------------------------------------- */
@media (max-width: 1280px) {
.customer-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) and (min-width: 861px) {
.customer-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* -------------------------------------------------------------
11) WASM BOOT SPLASH — shown in #app until Blazor mounts.
Standalone WASM has no SSR prerender, so without this the page
is blank during download. Branded so the hand-off is seamless
(anti-flicker). Blazor replaces #app contents on mount, removing it.
------------------------------------------------------------- */
.app-boot {
position: fixed;
inset: 0;
display: grid;
place-content: center;
justify-items: center;
gap: var(--gudoc-space-4);
background: var(--color-bg-subtle);
color: var(--color-text-muted);
font-family: var(--gudoc-font-sans);
}
.app-boot__mark {
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
border-radius: var(--gudoc-radius-md);
background: var(--color-brand);
color: var(--color-text-on-brand);
font-size: var(--gudoc-text-xl);
font-weight: var(--gudoc-weight-bold);
}
.app-boot__brand {
color: var(--color-text-strong);
font-size: var(--gudoc-text-lg);
font-weight: var(--gudoc-weight-bold);
letter-spacing: -0.01em;
}
.app-boot__spinner {
width: 1.5rem;
height: 1.5rem;
border: 2px solid var(--color-border);
border-top-color: var(--color-brand);
border-radius: var(--gudoc-radius-pill);
animation: app-boot-spin var(--gudoc-duration-5) linear infinite;
}
.app-boot__text {
margin: 0;
font-size: var(--gudoc-text-sm);
color: var(--color-text-subtle);
}
@keyframes app-boot-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.app-boot__spinner { animation: none; }
}
/* =============================================================
12) DISCOVERY BATCH — extend the v2.1 look to the remaining
discovery surfaces (Explore / Categories / Tags / Store /
ProductDetail). Same approach as the first unit: restyle the
shared `.customer-*` classes onto canonical `.gd-*` anatomy
(gd-section-head, gd-tag, gd-btn--ghost, gd-pagination, card
hover-lift). CSS only — markup + data-ontology-* untouched.
Each rule overrides a confirmed legacy value still living in
app.css (teal #1f6f5c, hardcoded grays/borders).
============================================================= */
/* ── 12-1) Page heading: token type scale + tighter tracking ──
app.css sizes h1 at 32px; align to the v2.1 page-title step
and recolor eyebrow/description through tokens. */
.customer-public-page h1,
.customer-product-detail__heading h1 {
color: var(--color-text-strong);
font-size: var(--gudoc-text-2xl);
line-height: var(--gudoc-leading-tight);
letter-spacing: -0.02em;
}
.customer-public-page p,
.customer-product-detail__heading p,
.customer-product-detail__description p {
color: var(--color-text-muted);
}
/* The page-heading eyebrow already becomes a coral pill (section 3).
Reset the legacy block/margin so the pill sits inline-flush. */
.customer-page-heading__eyebrow {
display: inline-flex;
margin-bottom: var(--gudoc-space-2);
}
/* ── 12-2) Link buttons → ghost button look (gd-btn--ghost) ──
Was hardcoded white fill + #dce1e8 border + #4d5562 text. */
.customer-link-button,
.customer-state__actions a {
border-color: var(--color-border);
border-radius: var(--gudoc-radius-md);
background: var(--color-surface);
color: var(--color-text-strong);
font-weight: var(--gudoc-weight-semibold);
transition: background-color var(--gudoc-duration-2) var(--gudoc-ease-standard),
border-color var(--gudoc-duration-2) var(--gudoc-ease-standard);
}
.customer-link-button:hover,
.customer-state__actions a:hover {
background: var(--color-hover-bg);
border-color: var(--color-border-strong);
}
/* ── 12-3) Categories grid: card hover-lift + token type ──
Mirrors the product-card hover (translateY + shadow). */
.customer-category-card,
.customer-tag-chip {
border-radius: var(--gudoc-radius-lg);
}
.customer-category-card--link {
transition: transform var(--gudoc-duration-3) var(--gudoc-ease-standard),
box-shadow var(--gudoc-duration-3) var(--gudoc-ease-standard),
border-color var(--gudoc-duration-3) var(--gudoc-ease-standard);
}
.customer-category-card--link:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--color-border-strong);
}
.customer-category-card h2,
.customer-tag-chip h2 {
color: var(--color-text-strong);
font-size: var(--gudoc-text-lg);
font-weight: var(--gudoc-weight-semibold);
line-height: var(--gudoc-leading-snug);
letter-spacing: -0.01em;
}
.customer-category-card__header span,
.customer-tag-chip span {
color: var(--color-text-muted);
font-size: var(--gudoc-text-xs);
}
.customer-category-card__children li {
border-color: var(--color-divider);
color: var(--color-text-muted);
}
/* Child product counts read as the brand trust signal (was teal). */
.customer-category-card__children strong {
color: var(--color-brand-text);
font-variant-numeric: tabular-nums;
}
/* ── 12-4) Tags cloud: hashtag heading + count chip polish ──
Tag chips are info cards (not links); give them a subtle hover
and brand-text hashtag so the cloud reads as discovery entry. */
.customer-tag-chip {
transition: border-color var(--gudoc-duration-2) var(--gudoc-ease-standard),
box-shadow var(--gudoc-duration-2) var(--gudoc-ease-standard);
}
.customer-tag-chip:hover {
border-color: var(--color-border-strong);
box-shadow: var(--shadow-sm);
}
.customer-tag-chip h2 {
color: var(--color-brand-text);
}
/* Secondary meta (category name, the 2nd span) stays muted; the
product-count (1st span) keeps tabular alignment. */
.customer-tag-chip div span:first-child {
font-variant-numeric: tabular-nums;
font-weight: var(--gudoc-weight-medium);
}
/* ── 12-5) Store hero + sections: heading tokens, pagination ── */
.customer-store-hero__content h1 {
color: var(--color-text-strong);
font-size: var(--gudoc-text-3xl);
line-height: var(--gudoc-leading-tight);
letter-spacing: -0.02em;
}
.customer-store-section h2,
.customer-store-panel h2 {
color: var(--color-text-strong);
font-size: var(--gudoc-text-xl);
font-weight: var(--gudoc-weight-bold);
letter-spacing: -0.01em;
}
.customer-store-panel .customer-page-heading > span {
color: var(--color-text-muted);
}
/* FAQ / Q&A list tiles already get the sunken surface (section 4);
recolor their copy + answer accent through tokens. */
.customer-store-list p,
.customer-store-list span {
color: var(--color-text-muted);
}
.customer-store-list__answer {
border-color: var(--color-divider);
}
/* Pagination → gd-pagination control look (token surface + radius). */
.customer-store-pagination {
color: var(--color-text-muted);
}
.customer-store-pagination button {
border-color: var(--color-border);
border-radius: var(--gudoc-radius-md);
background: var(--color-surface);
color: var(--color-text-strong);
transition: background-color var(--gudoc-duration-2) var(--gudoc-ease-standard),
border-color var(--gudoc-duration-2) var(--gudoc-ease-standard);
}
.customer-store-pagination button:hover:not(:disabled) {
background: var(--color-hover-bg);
border-color: var(--color-border-strong);
}
/* ── 12-6) ProductDetail: section headings, price, tag pills ── */
.customer-product-detail__heading h1,
.customer-product-detail__description h2,
.customer-product-detail__section-heading h2,
.customer-product-detail__section-heading h3 {
color: var(--color-text-strong);
letter-spacing: -0.01em;
}
.customer-product-detail__section-heading > span {
color: var(--color-text-muted);
}
/* Original (struck-through) price → muted; sale price already coral
via section 5 (.customer-product-detail__price strong). */
.customer-product-detail__price span {
color: var(--color-text-subtle);
}
.customer-product-detail__price strong {
font-variant-numeric: tabular-nums;
}
.customer-definition-list dt {
color: var(--color-text-muted);
}
/* Detail tag pills → gd-tag look (was white fill + #dce1e8 border). */
.customer-product-detail__tags span {
border: none;
border-radius: var(--gudoc-radius-pill);
background: var(--color-bg-subtle);
color: var(--color-text-muted);
font-size: var(--gudoc-text-xs);
font-weight: var(--gudoc-weight-medium);
}
/* Recommendation cards reuse the shared .customer-product-card look
(section 8), so they inherit border/radius/hover automatically.
Keep their grid tiles from overflowing on the narrower column. */
.customer-product-detail__empty {
color: var(--color-text-muted);
}
/* =============================================================
13) NON-DISCOVERY SURFACES — 의미색 토큰 정렬
디스커버리 배치(섹션 12) 밖에 남은 표면(알림·약관/공지·보관함·
구독관리·결제결과)의 legacy 의미색(blue/amber/red/teal)을 디자인
시스템 의미색 토큰으로 정렬. app.css의 확인된 하드코딩만 override,
markup·data-ontology-* 바인딩은 불변(§10).
매핑 근거 = gudoc-design/components.css:
· 선택/활성 → --color-brand (.gd-addr--on / .gd-pay--on)
· 안읽음 강조 → --color-brand (.gd-notif--unread)
· 배송(ship) → --color-cycle-weekly (.gd-notif__icon--ship)
· 경고/안내 → --color-warning(-bg) (.gd-tag--warning / .gd-badge--warn)
· 위험/취소 → --color-danger(-bg) (.gd-tag--danger / .gd-badge--danger)
============================================================= */
/* ── 13-1) 선택/활성 강조: blue·teal → brand ──
terms/notice 현재항목 좌측 보더(was #2563eb), 쿠폰 선택 카드(was #1f6f5c). */
.customer-terms-item--selected,
.customer-notice-item--selected {
border-left-color: var(--color-brand);
}
.customer-coupon-apply-list__item:has(input:checked) {
border-color: var(--color-brand);
background: var(--color-brand-subtle);
}
/* ── 13-2) 알림 안읽음 surface: blue → brand subtle (.gd-notif--unread) ──
was bg #eff6ff + border #2563eb. */
.customer-notification-item--unread {
border-color: var(--color-brand);
background: var(--color-brand-subtle);
}
/* ── 13-3) 보관함 상품 혜택 텍스트: blue → brand-text (was #2563eb) ──
app.css의 0,2,0 셀렉터를 동일 specificity로 override. */
.customer-storage-product .customer-storage-product__benefit {
color: var(--color-brand-text);
}
/* ── 13-4) 배송 명령 버튼: blue → cycle-weekly (배송 의미축, .gd-notif__icon--ship) ──
was border #446b9e / bg #edf4ff / text #234c83. */
.customer-subscription-manage__command--delivery button {
border-color: var(--color-cycle-weekly);
background: color-mix(in srgb, var(--color-cycle-weekly) 10%, var(--color-surface));
color: var(--color-cycle-weekly);
}
/* ── 13-5) 경고/안내 surface: amber/orange → warning 토큰 ──
짧은 경고(storage-alert)는 warning 텍스트, 긴 안내 문단(payment/held)은
가독 위해 중립 본문 + 강조만 warning. --success 변형은 섹션 6 유지(제외). */
.customer-storage-alert:not(.customer-storage-alert--success),
.customer-storage-section-error {
border: 1px solid color-mix(in srgb, var(--color-warning) 40%, transparent);
background: var(--color-warning-bg);
color: var(--color-warning);
}
.customer-payment-result__notice,
.customer-subscription-start__held-boundary {
border-color: color-mix(in srgb, var(--color-warning) 40%, transparent);
background: var(--color-warning-bg);
color: var(--color-text);
}
.customer-payment-result__notice strong {
color: var(--color-warning);
}
.customer-subscription-start__held-boundary p {
color: var(--color-text-muted);
}
/* ── 13-6) 구독관리 명령 버튼 variant: amber/red → warning/danger ──
resume·secondary = warning(주의성 재개), cancel·order-cancel = danger.
:disabled(회색)은 app.css 0,3,0이 더 높아 그대로 유지된다. */
.customer-subscription-manage__command--resume button,
.customer-subscription-start__summary .customer-subscription-start__secondary {
border-color: var(--color-warning);
background: var(--color-warning-bg);
color: var(--color-warning);
}
.customer-subscription-manage__command--cancel button,
.customer-subscription-manage__command--order-cancel button {
border-color: var(--color-danger);
background: var(--color-danger-bg);
color: var(--color-danger);
}
/* =============================================================
14) THEME TOGGLE — proto 셸 TopBar 토글 아이콘
.proto-ico--theme 버튼 안의 moon/sun 아이콘을 [data-theme]로 전환.
Blazor는 상태를 들지 않고 theme.js의 toggle만 호출한다.
(구 .customer-shell 토글은 prototype 셸 도입으로 제거됨)
============================================================= */
.proto-ico--theme .proto-ico__sun {
display: none;
}
[data-theme="dark"] .proto-ico--theme .proto-ico__moon {
display: none;
}
[data-theme="dark"] .proto-ico--theme .proto-ico__sun {
display: inline;
}
/* 마이페이지 화면 테마 3선택 버튼의 활성 상태(prototype prof-theme__btn 선택).
proto.css 에 --on 모디파이어가 없어 여기 additive 로 추가(markup 불변). */
.prof-theme__btn--on {
border-color: var(--color-brand);
background: var(--color-brand-subtle);
color: var(--color-brand-text);
font-weight: 700;
}
/* =============================================================
15) DARK-MODE READINESS — 비-디스커버리 표면 잔여 하드코딩 정렬
디스커버리 배치(섹션 4~12) 밖 표면의 app.css 라이트 하드코딩을
디자인 토큰으로 정렬 → 다크 가독성 확보 + 라이트 warm-gray 일관화.
섹션 4가 이미 surface/sunken으로 덮은 컨테이너와, 디스커버리에서
brand로 의도한 강조(product-card/kpi/price/category 등)는 제외한다.
markup·data-ontology-* 바인딩 불변(§10).
============================================================= */
/* ── 15-1) 강조 텍스트(제목·dd·strong) → text-strong ──
was #202124 / #15181f / #252b33 — 다크에서 묻히던 텍스트. */
.customer-state strong,
.customer-auth-summary dd,
.customer-subscription-summary strong,
.customer-storage-list strong,
.customer-storage-product strong,
.customer-storage-product__decision strong,
.customer-detail-list dd,
.customer-history-list strong,
.customer-usage-progress strong,
.customer-usage-code__result strong,
.customer-usage-history h3 {
color: var(--color-text-strong);
}
/* ── 15-2) muted 보조 텍스트 → text-muted ──
was #68707d / #4d5562 / #3f4652 / #6b7280. */
.customer-auth-summary dt,
.customer-storage-empty,
.customer-storage__header p,
.customer-detail-list dt,
.customer-history-list span,
.customer-usage-progress span,
.customer-usage-progress small,
.customer-usage-code__result span,
.customer-usage-code__result small,
.customer-storage-product span,
.customer-storage-product p,
.customer-storage-list span,
.customer-storage-list p,
.customer-storage-list dd,
.customer-subscription-summary span,
.customer-subscription-summary__footer span,
.customer-notification-item__head span,
.customer-terms-detail__content,
.customer-notice-detail__content,
.customer-payment-result__panel > p {
color: var(--color-text-muted);
}
.customer-storage-list dt {
color: var(--color-text-subtle);
}
/* ── 15-3) 폼 입력(input·textarea·select) → surface/text/border ──
다크에서 흰 입력창 + 어두운 글자가 깨지던 부분. */
.customer-notice-search input,
.customer-subscription-manage__command textarea,
.customer-subscription-manage__command select,
.customer-subscription-manage__command input,
.customer-subscription-start__form-grid input,
.customer-subscription-start__form > label input,
.customer-quantity-control input,
.customer-coupon-command input,
.customer-qna-form input,
.customer-qna-form select,
.customer-qna-form textarea {
background: var(--color-surface);
border-color: var(--color-border);
color: var(--color-text-strong);
}
/* 컨테이너 본문/선택 텍스트(섹션 4가 배경만 덮은 sunken 타일) → text */
.customer-coupon-apply-list__item,
.customer-option-chip {
color: var(--color-text);
}
/* 폼 라벨·보조문 → muted */
.customer-subscription-manage__command label,
.customer-subscription-manage__command p,
.customer-subscription-start__form-grid label,
.customer-subscription-start__form > label,
.customer-subscription-start__control > label,
.customer-subscription-start__control > p,
.customer-coupon-command label,
.customer-qna-form label,
.customer-option-chip small {
color: var(--color-text-muted);
}
/* ── 15-4) 미커버 흰 배경 컨트롤 → surface ── */
.customer-notice-search button,
.customer-notice-search a,
.customer-quantity-control button {
background: var(--color-surface);
border-color: var(--color-border);
color: var(--color-text);
}
/* ── 15-5) sunken 보조 표면 → 토큰 (was #f7f9fb / #eef1f4) ── */
.customer-usage-code__result {
background: var(--color-bg-subtle);
border-color: var(--color-border);
}
.customer-usage-code__result img {
background: var(--color-surface);
border-color: var(--color-border);
}
.customer-usage-progress__track {
background: var(--color-surface-sunken);
}
/* ── 15-6) 미커버 구분선/보더 → border ── */
.customer-detail-list > div,
.customer-history-list article {
border-color: var(--color-border);
}
/* =============================================================
16) HOME 기획전 camp-promo 배경 (prototype 인라인 그라데이션 → cover 토큰)
prototype renderHome은 배경을 인라인 style로 지정했으나, 인라인 스타일
금지 원칙에 따라 변형 클래스 + 디자인 토큰(cover-*)으로 분리한다.
============================================================= */
.camp-promo--curation { background: var(--gudoc-cover-coral); }
.camp-promo--vegan { background: var(--gudoc-cover-green); }
.camp-promo--local { background: var(--gudoc-cover-violet); }
/* 반응형 보정: customer-home(section) grid item min-width 0 — reco-line/그리드 오버플로우 방지 */
.customer-home { grid-template-columns: minmax(0, 1fr); gap: 0; }
/* =============================================================
17) KebabMenu 상대위치 드롭다운 (proto.css .kebab-menu는 position:fixed
top/left 좌표 기반 — prototype은 JS getBoundingClientRect로 좌표를 계산.
Blazor 컴포넌트(KebabMenu.razor)는 좌표 계산 없이 버튼 기준 상대위치로
띄우므로, .kebab-anchor(상대 컨테이너) + .kebab-menu--anchored(절대위치)로 보정.
proto.css는 수정 금지 → 변형 클래스로만 오버라이드.
============================================================= */
/* kebab 트리거를 flex 부모(리뷰 헤더·Q&A 행)에서 오른쪽 끝으로 밀어낸다 */
.kebab-anchor { position: relative; display: inline-flex; flex-shrink: 0; margin-left: auto; }
/* proto.css .kebab-menu(position:fixed; z-index:89)를 버튼 기준 우측 하단 드롭다운으로 재배치.
.kebab-anchor 하위 셀렉터로 specificity(0,2,0 > 0,1,0)를 높여 proto.css의 position:fixed 를 확실히 덮는다.
(인라인 좌표가 없는 컴포넌트라 fixed로 남으면 화면 밖으로 렌더됨) */
.kebab-anchor .kebab-menu--anchored {
position: absolute;
top: calc(100% + 4px);
right: 0;
left: auto;
z-index: 90;
}
/* =============================================================
18) 리뷰 작성 사진 썸네일 제거 버튼 (prototype에는 사진 추가만 있고 제거 UI는 없음 —
mock 트랙에서 추가한 사진을 다시 뺄 수 있게 dc-review-item__photos 썸네일 위에 얹는 작은 버튼)
============================================================= */
.review-photo-remove {
position: absolute;
top: 4px;
right: 4px;
width: 20px;
height: 20px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 11px;
color: var(--color-text-on-brand);
background: var(--color-overlay-strong, rgba(0, 0, 0, 0.55));
cursor: pointer;
}
/* =============================================================
19) 마이페이지 중앙 정렬 (proto.css .prof 는 max-width:640 이지만 margin:auto 가 없어
.proto-body 안에서 좌측에 붙는다. page-head + .prof 를 .mypage 래퍼로 중앙 정렬.)
============================================================= */
.mypage { max-width: 640px; margin: 0 auto; }
.mypage .prof { max-width: none; }
/* =============================================================
20) 검색 결과 그리드 반응형 (Explore 가 인라인 repeat(3) 을 쓰면 proto.css 의
.home-grid @media(720→2col) 를 무력화해 모바일에서도 3열(카드 ~116px)로 좁아진다.
데스크톱 3열 유지 + 880/560 브레이크포인트로 2→1열. .home-grid.search-grid 로
specificity(0,2,0)를 높여 확실히 적용.)
============================================================= */
.home-grid.search-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 880px) { .home-grid.search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .home-grid.search-grid { grid-template-columns: 1fr; } }
/* =============================================================
21) rail flyout 겹침 수정 (proto.css 는 .rail-item-wrap:hover, :focus-within 둘 다 flyout 을 연다.
NavLink 로 네비 후 active 항목의 a 가 focus 를 유지 → :focus-within 으로 flyout 이 계속 떠 있어
다른 항목 hover flyout 과 겹친다. flyout 은 hover 로만 열도록 focus-within 표시를 무력화.
hover 룰을 뒤에 둬 hover+focus 동시 상황에선 hover 가 이긴다.)
============================================================= */
.rail .rail-item-wrap:focus-within .rail-fly { opacity: 0; visibility: hidden; transform: translateX(-6px); }
.rail .rail-item-wrap:hover .rail-fly { opacity: 1; visibility: visible; transform: translateX(0); }
/* =============================================================
22) 교환·환불 요청 첨부 사진 (proto.css 의 .ret-photos/.ret-photo/.ret-photo-add 는
프로토에 정의만 있고 화면엔 미배선이었다 — 실 배선하면서 필요한 배치만 보강.
proto.css 가 index.html 에서 마지막에 로드되므로 .ret-photos--form 수식자로
specificity(0,2,0)를 높여 확실히 적용. 미리보기는 ![]()
(object-fit) 로 그려
인라인 스타일 없이 스테이징 object URL 만 src 로 바인딩한다.)
============================================================= */
.ret-photos.ret-photos--form { flex-wrap: wrap; }
.ret-photos--form .ret-photo { position: relative; overflow: hidden; background: var(--color-bg-subtle); }
.ret-photos--form .ret-photo__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ret-photos--form .ret-photo-add { cursor: pointer; }
.ret-photos--form .ret-photo-add--disabled { opacity: 0.5; cursor: not-allowed; }
.ret-photos__hint { margin: 8px 0 0; font-size: 11px; color: var(--color-text-subtle); }