/* ==========================================================
components.css
KADO Components — BEM 컴포넌트 (버튼/GNB/카드/Pack/Inv/Service/Footer 등). 컴포넌트 모양을 바꾸려면 여기서.
Last sync: 2026-05-02 · Source: KADO-Showcase.html
========================================================== */
:root {
--kado-card-image-filter: brightness(1.1) contrast(1.05) saturate(1.05);
}
/* ==========================================================
====== Button System ======
Spec:
- Sizes (height fixed): xs 28 / sm 32 / md 40 / lg 48 / xl 56
- Width modes: hug (default, content size) / fill (100%) / icon-only (square)
- Icon (.mi) — size auto-scaled per button size
- flex-shrink: 0 — flex container 안에서 squeeze 방지
- white-space: nowrap — 텍스트 줄바꿈 방지
- line-height: 1 — height 정확히 유지
========================================================== */
.ds-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
font-family: inherit; font-weight: var(--fw-bd);
white-space: nowrap;
line-height: 1;
border-radius: var(--r-pill); border: 1px solid transparent;
transition: background var(--t-fast) ease-out, color var(--t-fast) ease-out, border-color var(--t-fast) ease-out;
user-select: none;
cursor: pointer;
flex-shrink: 0; /* 부모 flex에서 squeeze 방지 */
vertical-align: middle;
text-decoration: none; /* a.ds-btn 대비 */
box-sizing: border-box;
/* v0.8: 안전한 default size (md). size 모디파이어(--xs/--sm/--md/--lg/--xl) 누락 시 height collapse 방지.
모디파이어는 동일 specificity로 override 가능 (선언 순서 우선). */
height: 40px;
padding: 0 18px;
font-size: var(--fs-body-sm);
min-width: 40px;
}
.ds-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ds-btn:focus-visible { outline: 2px solid var(--mystic-300); outline-offset: 2px; }
/* === Sizes (height fixed, padding hug) === */
.ds-btn--xs { height: 28px; padding: 0 12px; font-size: var(--fs-caption-sm); gap: 4px; min-width: 28px; }
.ds-btn--sm { height: 32px; padding: 0 14px; font-size: var(--fs-caption); gap: 4px; min-width: 32px; }
.ds-btn--md { height: 40px; padding: 0 18px; font-size: var(--fs-body-sm); gap: 6px; min-width: 40px; }
.ds-btn--lg { height: 48px; padding: 0 24px; font-size: var(--fs-body); gap: 8px; min-width: 48px; }
.ds-btn--xl { height: 56px; padding: 0 28px; font-size: var(--fs-h4); gap: 8px; min-width: 56px; }
/* === Icon (.mi) auto-scaling per size === */
.ds-btn .mi { font-size: 18px; line-height: 1; }
.ds-btn--xs .mi { font-size: 14px; }
.ds-btn--sm .mi { font-size: 16px; }
.ds-btn--md .mi { font-size: 18px; }
.ds-btn--lg .mi { font-size: 20px; }
.ds-btn--xl .mi { font-size: 22px; }
/* === Width modes === */
.ds-btn--hug { width: auto; } /* default — content size */
.ds-btn--fill { width: 100%; } /* 100% of container */
.ds-btn--block { display: flex; width: 100%; } /* alias for fill + block */
/* === Icon-only — square (height = width, padding 0) === */
.ds-btn--icon-only { padding: 0; gap: 0; }
.ds-btn--icon-only.ds-btn--xs { width: 28px; }
.ds-btn--icon-only.ds-btn--sm { width: 32px; }
.ds-btn--icon-only.ds-btn--md { width: 40px; }
.ds-btn--icon-only.ds-btn--lg { width: 48px; }
.ds-btn--icon-only.ds-btn--xl { width: 56px; }
.ds-btn--primary { background: var(--action-primary-bg); color: var(--action-primary-fg); }
.ds-btn--primary:hover:not(:disabled) { background: var(--action-primary-bg-hover); }
.ds-btn--brand { background: var(--action-brand-bg); color: var(--action-brand-fg); }
.ds-btn--brand:hover:not(:disabled) { background: var(--action-brand-bg-hover); }
.ds-btn--secondary { background: var(--action-secondary-bg); color: var(--action-secondary-fg); border-color: var(--action-secondary-border); }
.ds-btn--secondary:hover:not(:disabled) { background: var(--action-secondary-bg-hover); border-color: var(--action-secondary-border-hover); }
.ds-btn--tertiary { color: var(--action-tertiary-fg); }
.ds-btn--tertiary:hover:not(:disabled) { background: var(--action-tertiary-bg-hover); color: var(--action-tertiary-fg-hover); }
/* Ghost — secondary 보다 한 단계 더 subtle (tone-down). 모달 취소·오퍼 거절 등에 사용 */
.ds-btn--ghost { background: var(--bg-subtle); color: var(--fg-subtle); border-color: transparent; }
.ds-btn--ghost:hover:not(:disabled) { background: var(--bg-muted); color: var(--fg-base); }
/* Pack-type 분기 — Brand (무한공급) / Limited (한정수량) 노출 토글 (ABS-03)
- data-pack-show="brand" : 카도 브랜드 팩에서만 보임
- data-pack-show="limited" : 리미티드 팩에서만 보임 */
.ds-pack-stock-box[data-pack-type="limited"] [data-pack-show="brand"],
.ds-pack-stock-box[data-pack-type="limited"] [data-pack-show="unlimited"] { display: none !important; }
.ds-pack-stock-box[data-pack-type="brand"] [data-pack-show="limited"],
.ds-pack-stock-box[data-pack-type="unlimited"] [data-pack-show="limited"] { display: none !important; }
body[data-pack-type="brand"] [data-pack-show="limited"],
body[data-pack-type="unlimited"] [data-pack-show="limited"] { display: none !important; }
body[data-pack-type="limited"] [data-pack-show="brand"],
body[data-pack-type="limited"] [data-pack-show="unlimited"] { display: none !important; }
/* Inline toggle — 섹션 헤더 우측에 작은 토글 */
.ds-toggle-inline {
display: inline-flex; align-items: center; gap: 8px;
cursor: pointer; user-select: none;
}
.ds-toggle-inline input { position: absolute; opacity: 0; pointer-events: none; }
.ds-toggle-inline__slider {
width: 36px; height: 20px;
background: var(--border-strong);
border-radius: 10px; position: relative;
transition: background var(--t-fast) ease-out;
}
.ds-toggle-inline__slider::after {
content: ''; position: absolute; top: 2px; left: 2px;
width: 16px; height: 16px;
background: white; border-radius: 50%;
transition: transform var(--t-fast) ease-out;
}
.ds-toggle-inline input:checked + .ds-toggle-inline__slider { background: var(--gray-950); }
.ds-toggle-inline input:checked + .ds-toggle-inline__slider::after { transform: translateX(16px); }
.ds-toggle-inline__label {
font-size: var(--fs-caption-md); color: var(--fg-subtle); font-weight: var(--fw-bd);
}
/* Pack terms — 한정판 약관 박스 */
.ds-pack-terms {
margin-top: 32px; padding: 24px;
background: var(--bg-subtle);
border: 1px solid var(--border-base);
border-radius: 12px;
}
.ds-pack-terms__title {
font-size: var(--fs-h4); font-weight: var(--fw-bk);
letter-spacing: -0.012em;
margin: 0 0 14px;
display: flex; align-items: center; gap: 8px;
}
.ds-pack-terms__title::before {
content: '⚖️'; font-size: 18px;
}
.ds-pack-terms__list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 10px;
}
.ds-pack-terms__list li {
font-size: var(--fs-caption-md); line-height: 1.6;
color: var(--fg-subtle);
padding-left: 18px; position: relative;
}
.ds-pack-terms__list li::before {
content: '·'; position: absolute; left: 6px; top: -2px;
font-weight: var(--fw-bk); color: var(--fg-base);
}
.ds-pack-terms__list strong {
font-weight: var(--fw-bk); color: var(--fg-base);
margin-right: 6px;
}
.ds-pack-terms__disclaimer {
margin: 14px 0 0; padding-top: 12px;
border-top: 1px dashed var(--border-base);
font-size: var(--fs-caption-sm); color: var(--fg-muted);
line-height: 1.5;
}
/* Ship modal — 배송지 + 옵션 */
.ds-ship-address {
padding: 12px 14px;
background: var(--bg-subtle);
border-radius: 8px;
border: 1px solid var(--border-base);
}
.ds-ship-address__name {
font-size: var(--fs-body-sm); font-weight: var(--fw-bk);
margin: 0 0 4px;
}
.ds-ship-address__line {
font-size: var(--fs-caption-md); color: var(--fg-subtle);
margin: 0 0 2px;
}
.ds-ship-address__phone {
font-size: var(--fs-caption-md); color: var(--fg-muted);
margin: 0;
}
.ds-ship-options { display: grid; gap: 8px; }
.ds-ship-option {
display: flex; gap: 12px; align-items: flex-start;
padding: 12px 14px;
border: 1px solid var(--border-base);
border-radius: 10px;
cursor: pointer;
transition: all var(--t-fast) ease-out;
}
.ds-ship-option:hover { border-color: var(--mystic-500); }
.ds-ship-option:has(input:checked) {
border-color: var(--mystic-500);
background: color-mix(in srgb, var(--mystic-500) 6%, transparent);
}
.ds-ship-option input { width: 18px; height: 18px; accent-color: var(--mystic-500); margin-top: 2px; flex-shrink: 0; }
.ds-ship-option__name {
font-size: var(--fs-body-sm); font-weight: var(--fw-bd);
margin: 0 0 4px;
display: flex; justify-content: space-between; gap: 8px;
}
.ds-ship-option__fee { font-weight: var(--fw-bk); font-variant-numeric: tabular-nums; }
.ds-ship-option__sub {
font-size: var(--fs-caption-md); color: var(--fg-muted);
margin: 0; line-height: 1.4;
}
/* User profile (타 유저) — 심플 hero. v0.7: 폰트/사이즈 축소 (mypage 대비 컴팩트) */
.ds-user-profile {
display: flex; gap: 18px; align-items: center;
padding: 20px 22px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 14px;
}
.ds-user-profile__avatar {
width: 56px; height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--mystic-500), color-mix(in srgb, var(--mystic-500) 60%, black));
color: white; display: grid; place-items: center;
font-size: 22px; font-weight: var(--fw-bk);
flex-shrink: 0;
}
.ds-user-profile__body { flex: 1; min-width: 0; }
.ds-user-profile__handle {
font-size: var(--fs-caption); color: var(--fg-muted);
margin: 0 0 2px;
}
.ds-user-profile__name {
font-size: var(--fs-h4); font-weight: var(--fw-bk);
letter-spacing: -0.012em; margin: 0 0 4px;
}
.ds-user-profile__meta {
font-size: var(--fs-caption); color: var(--fg-subtle);
margin: 0;
}
.ds-user-profile__stats { display: flex; gap: 22px; }
.ds-user-profile__stat { text-align: right; }
.ds-user-profile__stat-label {
display: block; font-size: var(--fs-caption-sm); color: var(--fg-muted);
margin-bottom: 2px;
}
.ds-user-profile__stat-value {
font-size: var(--fs-body-md); font-weight: var(--fw-bd);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.ds-user-profile__stat-value small { font-size: var(--fs-caption); margin-left: 2px; opacity: 0.7; }
/* v0.7 B1: user-profile 섹션 — 컴팩트 head + 그리드 gap 축소 */
.ds-user-profile-section { padding-block: 8px 32px; }
.ds-user-profile-section__head { margin-bottom: 12px; }
.ds-user-profile-section__title {
font-size: var(--fs-h5);
font-weight: var(--fw-bk);
letter-spacing: -0.012em;
margin: 0 0 4px;
}
.ds-user-profile-section__sub {
font-size: var(--fs-caption);
color: var(--fg-muted);
margin: 0;
}
@media (max-width: 768px) {
.ds-user-profile { flex-wrap: wrap; }
.ds-user-profile__stats { width: 100%; justify-content: flex-start; }
.ds-user-profile__stat { text-align: left; }
}
/* ==========================================================
Filter Rail — 좌측 240px sticky (마켓플레이스 / 컬렉션)
========================================================== */
.ds-market-body, .ds-coll-body {
display: grid;
grid-template-columns: 240px 1fr;
gap: 24px;
align-items: start;
}
.ds-filter-rail {
--filter-rail-bottom-gap: 24px;
--filter-rail-sticky-top: calc(var(--gnb-h) + env(safe-area-inset-top, 0px) + 24px);
--filter-rail-height-offset: var(--filter-rail-sticky-top);
position: sticky; top: var(--filter-rail-sticky-top);
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 12px;
padding: 20px 18px;
max-height: min(
calc(100vh - var(--filter-rail-height-offset) - var(--filter-rail-bottom-gap)),
calc(100dvh - var(--filter-rail-height-offset) - var(--filter-rail-bottom-gap))
);
overflow-y: auto;
overflow-x: hidden;
scrollbar-gutter: stable;
scrollbar-width: thin;
scrollbar-color: transparent transparent;
margin-top: 8px;
}
.ds-market-body .ds-filter-rail {
--filter-rail-height-offset: calc(var(--gnb-h) + env(safe-area-inset-top, 0px) + 118px);
}
.ds-filter-rail:hover,
.ds-filter-rail:focus-within {
scrollbar-color: color-mix(in srgb, var(--gray-400) 48%, transparent) transparent;
}
.ds-filter-rail::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.ds-filter-rail::-webkit-scrollbar-track {
background: transparent;
margin: 2px 0 12px;
}
.ds-filter-rail::-webkit-scrollbar-thumb {
background: transparent;
border-radius: var(--r-pill);
border-right: 2px solid transparent;
background-clip: content-box;
}
.ds-filter-rail:hover::-webkit-scrollbar-thumb,
.ds-filter-rail:focus-within::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--gray-400) 48%, transparent);
}
.ds-filter-rail__scroll {
display: contents;
}
.ds-filter-rail__head {
display: flex; justify-content: space-between; align-items: center;
padding-bottom: 12px;
border-bottom: 1px solid var(--border-subtle);
margin-bottom: 16px;
}
.ds-filter-rail__head h2 {
font-size: var(--fs-body-md); font-weight: var(--fw-bk);
margin: 0;
}
.ds-filter-rail__reset {
background: none; border: none; padding: 4px 8px;
font-size: var(--fs-caption-sm); color: var(--fg-muted);
cursor: pointer; font: inherit; border-radius: 6px;
}
.ds-filter-rail__reset:hover { background: var(--bg-subtle); color: var(--fg-base); }
.ds-filter-mode {
display: grid; grid-template-columns: 1fr 1fr;
gap: 4px; padding: 4px;
background: var(--bg-subtle); border-radius: 8px;
margin-bottom: 16px;
}
.ds-filter-mode__btn {
background: transparent; border: none; padding: 8px 10px;
font: inherit; font-size: var(--fs-caption-md, 12px); font-weight: var(--fw-bd, 600);
color: var(--fg-muted); cursor: pointer; border-radius: 6px;
transition: background 0.15s ease, color 0.15s ease;
}
.ds-filter-mode__btn:hover { color: var(--fg-base); }
.ds-filter-mode__btn.is-active {
background: var(--bg-base); color: var(--fg-base);
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
/* 비매물 카드 (전체 보기 모드의 unlisted) — 가격/구매만 없이 시각적으로 동일.
상세보기는 가능해야 하므로 클릭 활성(재고 상세 읽기전용으로 이동). */
.ds-listing[data-unlisted="true"] { cursor: pointer; }
/* 그리드가 로딩(aria-busy) 중일 때 빈 상태 메시지를 강제로 숨김.
리스트가 비어 보이는 짧은 순간에도 검색 결과 메시지가 깜빡이지 않도록. */
.listing-grid[aria-busy="true"] ~ .ds-empty.ds-market-empty,
.ds-market-body__main .listing-grid[aria-busy="true"] ~ .ds-market-empty {
display: none !important;
}
.ds-filter-group { margin-bottom: 20px; }
.ds-filter-group h3 {
font-size: var(--fs-caption-md); font-weight: var(--fw-bk);
text-transform: uppercase; letter-spacing: 0.04em;
color: var(--fg-muted); margin: 0 0 8px;
}
.ds-filter-group__content {
display: block;
}
/* 필터 섹션 접기/펴기 — 데스크탑 포함 모든 폭에서 동작 (기본 접힘) */
.ds-filter-group h3.ds-filter-group__toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
cursor: pointer;
user-select: none;
}
.ds-filter-group h3.ds-filter-group__toggle::after {
content: 'expand_less';
font-family: 'Material Symbols Outlined';
font-size: 18px;
line-height: 1;
color: var(--fg-faint);
font-weight: 400;
transition: transform var(--t-fast) ease-out, color var(--t-fast) ease-out;
}
.ds-filter-group h3.ds-filter-group__toggle:hover,
.ds-filter-group h3.ds-filter-group__toggle:focus-visible { color: var(--fg-base); }
.ds-filter-group h3.ds-filter-group__toggle:focus-visible {
outline: 2px solid var(--mystic-300);
outline-offset: 4px;
border-radius: 6px;
}
.ds-filter-group.is-collapsed .ds-filter-group__content { display: none; }
.ds-filter-group.is-collapsed h3.ds-filter-group__toggle::after {
transform: rotate(180deg);
color: var(--fg-muted);
}
.ds-filter-opt {
display: flex; align-items: center; gap: 8px;
padding: 6px 4px;
font-size: var(--fs-caption-md); color: var(--fg-base);
cursor: pointer; user-select: none;
flex-wrap: wrap;
}
.ds-filter-opt:hover { color: var(--fg-base); }
.ds-filter-opt input { width: 16px; height: 16px; accent-color: var(--mystic-500); flex-shrink: 0; }
.ds-filter-opt span:nth-of-type(1) { flex: 1; }
.ds-filter-opt .count { color: var(--fg-muted); font-size: var(--fs-caption-sm); }
.ds-filter-options--scroll {
max-height: 240px;
overflow-y: auto;
scrollbar-gutter: stable;
scrollbar-width: thin;
scrollbar-color: var(--gray-200) transparent;
padding-right: 4px;
}
.ds-filter-options--scroll::-webkit-scrollbar { width: 6px; }
.ds-filter-options--scroll::-webkit-scrollbar-track { background: transparent; }
.ds-filter-options--scroll::-webkit-scrollbar-thumb {
background: var(--gray-200);
border-radius: 999px;
}
.ds-filter-options--scroll:hover::-webkit-scrollbar-thumb { background: var(--gray-300); }
.ds-filter-subhead {
margin: 10px 4px 4px;
font-size: 10px;
font-weight: var(--fw-bd);
letter-spacing: 0.04em;
color: var(--fg-faint);
}
.ds-filter-subhead[hidden],
.ds-filter-opt[hidden] {
display: none !important;
}
.ds-filter-opt.is-dim {
opacity: 0.42;
}
.ds-filter-opt__sub {
flex-basis: 100%;
margin-left: 24px;
margin-top: -2px;
font-size: 11px;
color: var(--fg-faint);
line-height: 1.4;
letter-spacing: -0.005em;
}
.ds-filter-grade-grid {
display: grid;
grid-template-columns: repeat(4, 1fr); /* v0.7: 19 grades fit in 5 rows */
gap: 6px;
margin-top: 4px;
}
.ds-filter-grade {
position: relative;
display: flex; align-items: center; justify-content: center;
height: 32px;
border: 1px solid var(--border-base);
border-radius: 8px;
cursor: pointer; user-select: none;
font-size: var(--fs-caption-md); font-weight: var(--fw-bd);
background: var(--bg-card); color: var(--fg-base);
transition: all var(--t-fast) ease-out;
font-variant-numeric: tabular-nums;
}
.ds-filter-grade input { position: absolute; opacity: 0; pointer-events: none; }
.ds-filter-grade:hover { border-color: var(--mystic-500); }
.ds-filter-grade:has(input:checked) {
background: color-mix(in srgb, var(--mystic-500) 12%, var(--bg-card));
border-color: var(--mystic-500); color: var(--mystic-500);
}
.ds-filter-group[data-filter-field="grade"] .ds-filter-grade-grid {
grid-template-columns: 1fr;
}
.ds-filter-group[data-filter-field="grade"] .ds-filter-grade {
justify-content: flex-start;
padding: 0 10px;
text-align: left;
white-space: normal;
line-height: 1.2;
}
@media (max-width: 1023px) {
.ds-market-body, .ds-coll-body { grid-template-columns: 1fr; }
.ds-filter-rail { position: static; max-height: none; }
}
/* Notification full page (mypage-notifications.html) */
.ds-notif-page {
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 12px;
overflow: hidden;
}
.ds-notif-page__list {
list-style: none; padding: 0; margin: 0;
}
.ds-notif-page__item {
display: flex; gap: 16px; align-items: center;
padding: 16px 20px;
text-decoration: none; color: inherit;
border-bottom: 1px solid var(--border-subtle);
transition: background var(--t-fast) ease-out;
}
.ds-notif-page__item:hover { background: var(--bg-subtle); }
.ds-notif-page__item:last-child { border-bottom: none; }
.ds-notif-page__item.is-unread {
background: color-mix(in srgb, var(--mystic-500) 4%, transparent);
border-left: 3px solid var(--mystic-500);
}
.ds-notif-page__icon {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--bg-subtle);
display: grid; place-items: center;
flex-shrink: 0; color: var(--fg-base);
}
.ds-notif-page__icon .mi { font-size: 20px; }
.ds-notif-page__body { flex: 1; min-width: 0; }
.ds-notif-page__title {
font-size: var(--fs-body-sm); font-weight: var(--fw-bd);
margin: 0 0 4px; line-height: 1.4; color: var(--fg-base);
}
.ds-notif-page__sub {
font-size: var(--fs-caption-md); color: var(--fg-subtle);
margin: 0; line-height: 1.5;
}
.ds-notif-page__time {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
flex-shrink: 0;
}
.ds-notif-page__empty {
padding: 60px 20px; text-align: center;
color: var(--fg-muted); font-size: var(--fs-body-sm);
min-height: 320px;
display: flex; align-items: center; justify-content: center;
}
.ds-notif-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.ds-chip__count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 18px; padding: 0 6px;
background: var(--bg-subtle); color: var(--fg-muted);
border-radius: var(--r-pill);
font-size: var(--fs-caption-xs);
margin-left: 6px;
}
.ds-chip--md.is-active { background: var(--fg-base); color: var(--bg-base); }
.ds-chip--md.is-active .ds-chip__count { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.85); }
/* v0.7: GNB Currency picker — segmented dropdown (₩/$/¥) */
.ds-currency-picker {
position: relative;
margin-right: -20px; /* user 클러스터에 tight하게 */
}
.ds-currency-picker__trigger {
display: inline-flex; align-items: center; gap: 4px;
height: 32px; padding: 0 10px;
background: transparent;
border: 1px solid var(--border-base);
border-radius: var(--r-pill);
color: var(--fg-base);
cursor: pointer;
font: inherit;
transition: var(--t-fast) ease-out;
}
.ds-currency-picker__trigger:hover { background: var(--bg-subtle); border-color: var(--gray-700); }
.ds-currency-picker__symbol {
font-size: 13px; font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.ds-currency-picker__code {
font-size: 11px; font-weight: var(--fw-bd);
letter-spacing: 0.04em;
color: var(--fg-muted);
}
.ds-currency-picker__chev {
font-size: 14px;
color: var(--fg-muted);
transition: transform var(--t-fast) ease-out;
}
.ds-currency-picker.is-open .ds-currency-picker__chev { transform: rotate(180deg); }
.ds-currency-picker.is-open .ds-currency-picker__trigger { background: var(--bg-subtle); border-color: var(--gray-950); }
.ds-currency-picker__menu {
position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
list-style: none; padding: 6px; margin: 0;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: var(--r-12);
box-shadow: var(--shadow-3);
min-width: 140px;
opacity: 0; pointer-events: none;
transform: translateY(-4px);
transition: opacity var(--t-fast) ease-out, transform var(--t-fast) ease-out;
}
.ds-currency-picker.is-open .ds-currency-picker__menu {
opacity: 1; pointer-events: auto;
transform: translateY(0);
}
.ds-currency-picker__option {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
border-radius: var(--r-8);
cursor: pointer;
font-size: var(--fs-body-sm);
color: var(--fg-base);
transition: background var(--t-fast) ease-out;
}
.ds-currency-picker__option:hover { background: var(--bg-subtle); }
.ds-currency-picker__option-label {
flex: 1;
font-weight: var(--fw-bd);
letter-spacing: 0.04em;
}
.ds-currency-picker__option .ds-currency-picker__symbol {
width: 18px; text-align: center;
}
.ds-currency-picker__check {
font-size: 16px;
color: var(--fg-base);
opacity: 0;
}
.ds-currency-picker__option.is-selected .ds-currency-picker__check { opacity: 1; }
.ds-currency-picker__option.is-selected { background: var(--bg-subtle); }
@media (max-width: 767px) {
.ds-currency-picker { margin-right: -12px; }
.ds-currency-picker__trigger { height: 30px; padding: 0 8px; }
.ds-currency-picker__code { display: none; } /* 모바일에선 symbol만 (₩/$/¥) */
}
/* GNB Notification — bell icon + dropdown panel
v0.7: bell이 user-action 클러스터(잔액/아바타)에 시각적으로 묶이도록 gap 압축 */
.ds-notif {
margin-right: 0;
position: relative;
}
.ds-notif-trigger {
position: relative;
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--r-pill);
background: transparent; border: none;
cursor: pointer;
color: var(--fg-base);
transition: background var(--t-fast) ease-out;
}
.ds-notif-trigger:hover { background: var(--bg-subtle); }
.ds-notif-trigger .mi { font-size: 22px; } /* 24 → 22 (avatar 크기와 정합) */
.ds-notif-trigger[data-unread="true"]::after {
content: ''; position: absolute; top: 7px; right: 8px;
width: 7px; height: 7px;
background: var(--danger-500, #dc2626);
border-radius: 50%;
border: 2px solid var(--bg-base);
}
.ds-notif-panel {
position: absolute; top: calc(100% + 8px); right: 0;
width: 360px; max-width: calc(100vw - 32px);
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 14px;
box-shadow: 0 16px 48px rgba(0,0,0,0.16);
z-index: 100;
opacity: 0; pointer-events: none;
transform: translateY(-4px);
transition: opacity var(--t-base) ease-out, transform var(--t-base) ease-out;
}
.ds-notif-panel.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.ds-notif-panel__head {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 16px;
border-bottom: 1px solid var(--border-subtle);
}
.ds-notif-panel__head h3 { font-size: var(--fs-body-md); font-weight: var(--fw-bk); margin: 0; }
.ds-notif-panel__actions {
display: inline-flex;
align-items: center;
gap: 4px;
}
.ds-notif-panel__mark {
background: none; border: none; padding: 4px 8px;
font-size: var(--fs-caption-md); color: var(--fg-muted);
cursor: pointer; font: inherit; border-radius: 6px;
}
.ds-notif-panel__mark:hover { background: var(--bg-subtle); color: var(--fg-base); }
.ds-notif-panel__close {
display: none;
width: 40px;
height: 40px;
border: 1px solid var(--border-subtle);
border-radius: var(--r-pill);
background: var(--bg-base);
color: var(--fg-base);
cursor: pointer;
align-items: center;
justify-content: center;
}
.ds-notif-panel__close .mi { font-size: 22px; }
.ds-notif-panel__close:hover { background: var(--bg-subtle); }
.ds-notif-panel__list {
list-style: none; padding: 0; margin: 0;
max-height: 400px; overflow-y: auto;
}
.ds-notif-item {
display: flex; gap: 12px;
padding: 12px 16px;
text-decoration: none; color: inherit;
border-bottom: 1px solid var(--border-subtle);
transition: background var(--t-fast) ease-out;
}
.ds-notif-item:hover { background: var(--bg-subtle); }
.ds-notif-item:last-child { border-bottom: none; }
.ds-notif-item.is-unread { background: color-mix(in srgb, var(--mystic-500) 5%, transparent); }
.ds-notif-item__icon {
width: 36px; height: 36px;
border-radius: 50%;
background: var(--bg-subtle);
display: grid; place-items: center;
flex-shrink: 0;
color: var(--fg-base);
}
.ds-notif-item__icon .mi { font-size: 18px; }
.ds-notif-item__body { flex: 1; min-width: 0; }
.ds-notif-item__title {
font-size: var(--fs-body-xs); font-weight: var(--fw-bd);
margin: 0 0 2px; line-height: 1.4;
color: var(--fg-base);
}
.ds-notif-item__sub {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
margin: 0; line-height: 1.4;
}
.ds-notif-item__time {
font-size: var(--fs-caption-xs); color: var(--fg-faint);
margin-top: 4px;
}
.ds-notif-panel__foot {
padding: 12px 16px;
border-top: 1px solid var(--border-subtle);
text-align: center;
}
.ds-notif-panel__foot a {
font-size: var(--fs-caption-md); font-weight: var(--fw-bd);
color: var(--fg-base); text-decoration: none;
}
.ds-notif-panel__foot a:hover { text-decoration: underline; }
.ds-notif-empty {
padding: 32px 16px; text-align: center;
color: var(--fg-muted); font-size: var(--fs-caption-md);
}
/* Wrapper for bell + panel — relative positioning anchor */
.ds-notif {
position: relative;
display: inline-flex; align-items: center;
}
/* Exchange mode — collection 다중 선택 모드 + 하단 sticky bar */
body.is-exchange-mode .ds-coll-card { position: relative; }
body.is-exchange-mode .ds-coll-card::after {
content: ''; position: absolute; top: 8px; left: 8px;
width: 22px; height: 22px;
border: 2px solid var(--border-strong);
border-radius: 50%;
background: var(--bg-card);
z-index: 5;
transition: all var(--t-fast) ease-out;
}
body.is-exchange-mode .ds-coll-card.is-selected {
outline: 3px solid var(--mystic-500);
outline-offset: -1px;
}
body.is-exchange-mode .ds-coll-card.is-selected::after {
background: var(--mystic-500);
border-color: var(--mystic-500);
content: '✓'; color: var(--fg-onbrand);
display: grid; place-items: center;
font-size: 14px; font-weight: var(--fw-bk);
}
.ds-exchange-bar {
position: fixed; left: 0; right: 0; bottom: 0;
z-index: 90;
display: flex; gap: 16px; align-items: center;
padding: 16px 24px;
background: var(--bg-card);
border-top: 1px solid var(--border-base);
box-shadow: 0 -8px 24px rgba(0,0,0,0.08);
}
.ds-exchange-bar__count { flex: 1; }
.ds-exchange-bar__count strong {
font-size: var(--fs-h4); font-weight: var(--fw-bk); color: var(--fg-base);
}
.ds-exchange-bar__hint {
display: block; font-size: var(--fs-caption-sm); color: var(--fg-muted);
margin-top: 2px;
}
.ds-exchange-bar__amount { text-align: right; }
.ds-exchange-bar__amount-label {
display: block; font-size: var(--fs-caption-sm); color: var(--fg-muted);
}
.ds-exchange-bar__amount-value {
font-size: var(--fs-h3); font-weight: var(--fw-bk);
color: var(--mystic-500);
font-variant-numeric: tabular-nums;
}
body.is-exchange-mode { padding-bottom: 96px; }
/* Profile stats — 마이페이지 프로필 하단 (컬렉션 통계 이전 + 포인트 교환 CTA) */
.ds-profile-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 14px;
}
.ds-profile-stat {
display: flex; flex-direction: column; gap: 4px;
padding: 16px 18px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 12px;
text-decoration: none;
color: var(--fg-base);
transition: all var(--t-fast) ease-out;
}
.ds-profile-stat:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.ds-profile-stat__label {
font-size: var(--fs-caption-md); color: var(--fg-muted);
font-weight: var(--fw-bd);
text-transform: uppercase; letter-spacing: 0.04em;
}
.ds-profile-stat__value {
font-size: var(--fs-h3); font-weight: var(--fw-bk);
letter-spacing: -0.012em;
font-variant-numeric: tabular-nums;
}
.ds-profile-stat__value small { font-size: var(--fs-body-sm); font-weight: var(--fw-bd); margin-left: 2px; opacity: 0.7; }
.ds-profile-stat__delta {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
}
.ds-profile-stat__delta--up { color: var(--success-500, #059669); }
.ds-profile-stat--cta {
background: linear-gradient(135deg, color-mix(in srgb, var(--mystic-500) 90%, black), var(--mystic-500));
border-color: transparent; color: white;
}
.ds-profile-stat--cta .ds-profile-stat__label,
.ds-profile-stat--cta .ds-profile-stat__delta { color: rgba(255,255,255,0.85); }
.ds-profile-stat--cta:hover { transform: translateY(-2px); box-shadow: 0 12px 24px color-mix(in srgb, var(--mystic-500) 40%, transparent); }
/* Mypage offers split — 받은 / 보낸 2 column */
.ds-offers-split {
display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.ds-offers-col {
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 12px;
padding: 18px;
}
.ds-offers-col__head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 12px;
}
.ds-offers-col__head h3 {
font-size: var(--fs-body-md); font-weight: var(--fw-bk);
margin: 0; display: flex; gap: 8px; align-items: center;
}
.ds-offers-col__count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 22px; height: 22px;
padding: 0 8px;
background: var(--mystic-500); color: var(--fg-onbrand);
font-size: var(--fs-caption-md); font-weight: var(--fw-bk);
border-radius: var(--r-pill);
}
@media (max-width: 768px) {
.ds-profile-stats { grid-template-columns: 1fr; }
.ds-offers-split { grid-template-columns: 1fr; }
}
/* Pool grid — top-only 50개 제한 */
.ds-pool-grid[data-top-only="true"] .ds-pool-card:nth-child(n+51) { display: none; }
.section-head__aside { display: flex; align-items: center; gap: 12px; }
.pack-detail-pool .section-head {
align-items: center;
}
.pack-detail-pool .section-head__title {
min-width: 0;
}
.pack-detail-pool .section-head__aside {
align-self: center;
justify-content: flex-end;
margin-left: auto;
flex: 0 0 auto;
}
/* 페이지 레벨 타이틀 (h1) — ds-page-header h1과 사이즈 통일 (--fs-h2: 26px) */
.section-head__title h1 {
font-size: var(--fs-h2);
line-height: 1.2;
letter-spacing: -0.015em;
font-weight: var(--fw-bk);
}
/* ==========================================================
Gacha Brand Picker — 좌측 썸네일 2개 + 우측 hero 30 + 하단 CTA
========================================================== */
/* v0.7: gacha brand panel layout — 좌(intro+packs) | 우(grid) */
.ds-gacha-brand {
display: grid;
grid-template-columns: minmax(360px, 0.8fr) 1.2fr;
gap: 32px;
margin-top: 24px;
align-items: start;
}
/* === Stage B: 좌측 intro — chip + heading + tilted floating packs === */
.ds-gacha-brand__intro {
display: flex; flex-direction: column;
position: sticky; top: 80px;
padding: 8px 4px 0;
}
.ds-gacha-brand__chip {
align-self: flex-start;
display: inline-flex; align-items: center;
height: 26px; padding: 0 12px;
background: var(--mystic-300);
color: var(--mystic-950);
border-radius: var(--r-pill);
font-size: var(--fs-caption-sm); font-weight: var(--fw-bk);
letter-spacing: -0.005em;
margin-bottom: 16px;
}
/* v0.7 S5: 모바일에선 chip 작게 (heading 임팩트 살리기 위해) */
@media (max-width: 767px) {
.ds-gacha-brand__chip { height: 22px; padding: 0 10px; font-size: 10px; margin-bottom: 12px; }
}
.ds-gacha-brand__heading {
font-size: clamp(28px, 2.6vw, 36px);
font-weight: var(--fw-bk);
letter-spacing: -0.02em;
line-height: 1.18;
margin-bottom: 28px;
color: var(--fg-base);
}
/* v0.7 M4: segmented toggle (브랜드 picker) — desktop hidden, tablet/mobile visible */
.ds-gacha-toggle {
display: none; /* desktop hidden — tilted packs alone enough */
align-items: center;
background: var(--bg-subtle);
border: 1px solid var(--border-subtle);
border-radius: var(--r-pill);
padding: 4px;
margin-bottom: 16px;
position: relative;
font: inherit;
}
.ds-gacha-toggle__option {
flex: 1;
height: 36px;
padding: 0 16px;
background: transparent;
border: 0;
border-radius: var(--r-pill);
font: inherit;
font-size: var(--fs-body-sm);
font-weight: var(--fw-bd);
color: var(--fg-muted);
cursor: pointer;
transition: var(--t-fast) ease-out;
white-space: nowrap;
}
.ds-gacha-toggle__option:hover { color: var(--fg-base); }
.ds-gacha-toggle__option.is-active {
background: var(--gray-950);
color: var(--gray-0);
box-shadow: var(--shadow-1);
}
:root[data-theme="dark"] .ds-gacha-toggle { background: var(--gray-900); border-color: var(--white-a100); }
:root[data-theme="dark"] .ds-gacha-toggle__option.is-active {
background: var(--gray-50); color: var(--gray-950);
}
@media (max-width: 1023px) {
.ds-gacha-toggle { display: inline-flex; align-self: center; min-width: 280px; }
}
/* tilted floating packs — overlap layout */
.ds-gacha-brand__packs {
position: relative;
height: clamp(360px, 32vw, 460px);
margin-top: 8px;
/* 시선 가이드 라인 (subtle ground shadow) */
}
.ds-gacha-pack {
position: absolute;
background: transparent;
border: 0; padding: 0;
cursor: pointer;
transition:
transform 320ms var(--ease-emp),
opacity 220ms ease-out,
filter 220ms ease-out;
/* 둥둥 떠있는 느낌 */
filter: drop-shadow(-12px 24px 36px rgba(15,17,22,0.28));
}
.ds-gacha-pack__img {
width: 100%; height: 100%;
object-fit: contain;
display: block;
pointer-events: none;
}
/* 좌측 — Pokemon 팩 (홀로그램) — 탭 순서 (포켓몬·원피스) 와 일치하도록 좌측 배치 */
.ds-gacha-pack--pokemon {
width: 56%;
aspect-ratio: 1 / 1.45;
left: 0; top: 4%;
transform: rotate(-12deg);
z-index: 1;
}
/* 우측 — One Piece 팩 (검정) */
.ds-gacha-pack--onepiece {
width: 56%;
aspect-ratio: 1 / 1.45;
right: 0; bottom: 0;
transform: rotate(12deg);
z-index: 2;
}
/* 비활성 팩: 약간 lift만 줄임 (saturate 강하게 X — 팩 디자인 자체가 식별돼야)
"selectable" feel 유지 */
.ds-gacha-pack:not(.is-active) {
opacity: 0.78;
filter: drop-shadow(-8px 16px 24px rgba(15,17,22,0.18));
}
.ds-gacha-pack:not(.is-active):hover {
opacity: 0.95;
filter: drop-shadow(-10px 20px 30px rgba(15,17,22,0.24));
}
/* active 팩: 또렷 + 살짝 lift (rotate 약하게 + scale 1.02) */
.ds-gacha-pack--pokemon.is-active {
transform: rotate(-10deg) scale(1.04) translateY(-4px);
z-index: 3;
}
.ds-gacha-pack--onepiece.is-active {
transform: rotate(10deg) scale(1.04) translateY(-4px);
z-index: 3;
}
/* hover 시 active 팩도 살짝 추가 lift */
.ds-gacha-pack--pokemon.is-active:hover {
transform: rotate(-8deg) scale(1.06) translateY(-6px);
}
.ds-gacha-pack--onepiece.is-active:hover {
transform: rotate(8deg) scale(1.06) translateY(-6px);
}
/* focus ring (kbd 접근성) */
.ds-gacha-pack:focus-visible {
outline: none;
filter: drop-shadow(-12px 24px 36px rgba(15,17,22,0.3)) drop-shadow(0 0 0 3px var(--mystic-500));
}
/* legacy thumbs (다른 페이지 호환용) */
.ds-gacha-brand__thumbs {
display: none; /* v0.7: 새 intro로 대체. 다른 페이지 임포트 가능성 위해 남겨둠 */
flex-direction: column; gap: 12px;
position: sticky; top: 80px;
}
.ds-gacha-thumb {
display: flex; flex-direction: column; gap: 8px;
padding: 0;
border: 2px solid transparent;
border-radius: 16px;
background: var(--bg-card);
cursor: pointer; font: inherit;
overflow: hidden;
transition: all var(--t-base) ease-out;
text-align: left;
}
.ds-gacha-thumb:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.ds-gacha-thumb.is-active { border-color: var(--mystic-500); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mystic-500) 14%, transparent); }
.ds-gacha-thumb__visual {
display: flex; flex-direction: column; justify-content: flex-end;
aspect-ratio: 5/4; padding: 18px;
color: white;
position: relative; overflow: hidden;
/* 실제 pack 이미지 fit */
background-color: var(--gray-950);
background-size: contain;
background-position: center 60%;
background-repeat: no-repeat;
}
.ds-gacha-thumb__visual[data-brand-bg="pokemon"] {
background-image: url('/kado-design/assets/packs/pokemon-epic.webp');
}
.ds-gacha-thumb__visual[data-brand-bg="onepiece"] {
background-image: url('/kado-design/assets/packs/onepiece-epic.webp');
}
.ds-gacha-thumb__visual::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.6) 100%);
z-index: 0;
}
.ds-gacha-thumb__visual > * { position: relative; z-index: 1; }
.ds-gacha-thumb__title {
font-size: var(--fs-h3); font-weight: var(--fw-bk);
letter-spacing: -0.02em;
position: relative; z-index: 1;
}
.ds-gacha-thumb__sub {
font-size: var(--fs-caption-md); opacity: 0.85;
letter-spacing: 0.04em; text-transform: uppercase;
font-weight: var(--fw-md);
position: relative; z-index: 1;
margin-top: 2px;
}
.ds-gacha-thumb__count {
padding: 8px 14px;
font-size: var(--fs-caption-md); color: var(--fg-muted);
background: var(--bg-subtle);
border-top: 1px solid var(--border-subtle);
}
/* 우측 main — v0.7: 카드 컴포넌트 thumb (이미지 + 이름 + 등급 + 가격) */
.ds-gacha-brand__main {
display: flex; flex-direction: column; gap: 16px;
position: relative;
}
/* 우측 list panel — rounded container with count header + grid */
.ds-gacha-list-panel {
background: var(--bg-subtle);
border: 1px solid var(--border-subtle);
border-radius: 20px;
padding: 28px 24px 32px;
position: relative;
}
:root[data-theme="dark"] .ds-gacha-list-panel { background: var(--gray-900); border-color: var(--white-a100); }
.ds-gacha-list-panel__head {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 20px;
padding: 0 4px;
}
.ds-gacha-list-panel__title {
font-size: var(--fs-body-md);
font-weight: var(--fw-bd);
letter-spacing: -0.008em;
color: var(--fg-muted);
margin: 0;
text-transform: none;
}
.ds-gacha-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
/* legacy: 일부 페이지에서 standalone 사용 시 background 보존 */
}
.ds-gacha-list-panel .ds-gacha-grid {
background: transparent;
border: 0; padding: 0;
}
/* standalone 사용 (panel wrapper 없이) — 기존 호환 */
.ds-gacha-grid:not(.ds-gacha-list-panel *) {
background: var(--bg-subtle);
border: 1px solid var(--border-subtle);
border-radius: 20px;
padding: 24px;
}
:root[data-theme="dark"] .ds-gacha-grid:not(.ds-gacha-list-panel *) { background: var(--gray-900); border-color: var(--white-a100); }
/* card thumb (legacy .ds-gacha-card 대체 — listing 패턴 정합) */
.ds-gacha-card-thumb {
display: flex; flex-direction: column;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 10px;
text-decoration: none; color: inherit;
overflow: hidden;
transition: transform var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out, border-color var(--t-fast) ease-out;
}
.ds-gacha-card-thumb:hover {
/* v0.7: position 변경 제거 — 위치 흔들림 없이 box-shadow + border만 변화 */
box-shadow: var(--shadow-2);
border-color: var(--gray-400);
}
:root[data-theme="dark"] .ds-gacha-card-thumb { background: var(--gray-950); border-color: var(--white-a200); }
:root[data-theme="dark"] .ds-gacha-card-thumb:hover { border-color: var(--white-a300); }
.ds-gacha-card-thumb__art {
position: relative;
aspect-ratio: 1 / 1;
background-color: var(--gray-100);
background-image: none;
background-size: auto 88%;
background-repeat: no-repeat;
background-position: center;
border-bottom: 1px solid var(--border-subtle);
}
/* art 영역 우상단에 PSA 10 같은 등급 chip 오버레이. body 의 price-row 안에
있던 chip 을 art 위로 옮겨 카드 정보가 더 컴팩트하게. */
.ds-gacha-card-thumb__art > .ds-gacha-card-thumb__grade {
position: absolute;
top: 6px;
right: 6px;
z-index: 2;
background: rgba(255, 255, 255, 0.92);
color: var(--fg-base);
border-color: rgba(0, 0, 0, 0.08);
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
}
:root[data-theme="dark"] .ds-gacha-card-thumb__art > .ds-gacha-card-thumb__grade {
background: rgba(15, 15, 18, 0.78);
color: var(--fg-base);
border-color: rgba(255, 255, 255, 0.12);
}
:root[data-theme="dark"] .ds-gacha-card-thumb__art { background-color: var(--gray-800); border-bottom-color: var(--white-a100); }
/* v0.7: 감정 등급 chip — spec card-thumbnail-spec.md §3.4 정합:
"감정 등급 (PSA 10 / BGS 9.5) → info footer, 가격 옆 (가격 좌, 감정 chip 우)"
art top-right (절대 위치) 였던 룰 위반 — footer row 우측으로 이동 */
.ds-gacha-card-thumb__grade {
display: inline-flex; align-items: center;
height: 20px; padding: 0 7px;
background: transparent; color: var(--fg-muted);
border: 1px solid var(--border-base);
border-radius: 4px;
font-size: 10px; font-weight: var(--fw-bd);
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
white-space: nowrap;
flex-shrink: 0;
}
:root[data-theme="dark"] .ds-gacha-card-thumb__grade {
color: var(--fg-faint); border-color: var(--white-a200);
}
.ds-gacha-card-thumb__body {
padding: 8px 10px 10px;
display: flex; flex-direction: column; gap: 4px;
min-width: 0;
}
.ds-gacha-card-thumb__name {
font-size: 12px; font-weight: var(--fw-bd);
letter-spacing: -0.005em;
line-height: 1.3;
white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
/* 가격 row — 좌측 가격, 우측 grade chip */
.ds-gacha-card-thumb__price-row {
display: flex; align-items: center; justify-content: space-between;
gap: 6px;
}
.ds-gacha-card-thumb__price {
display: inline-flex; align-items: baseline; gap: 2px;
font-size: 12px; font-weight: var(--fw-bd);
font-variant-numeric: tabular-nums;
color: var(--fg-base);
line-height: 1.2;
min-width: 0;
}
.ds-gacha-card-thumb__price small {
font-size: 10px; font-weight: var(--fw-rg); color: var(--fg-muted);
margin-left: 1px;
}
/* legacy .ds-gacha-card 호환 (다른 페이지에서 사용 시) */
.ds-gacha-card {
aspect-ratio: 5/7;
border-radius: 8px;
position: relative; overflow: hidden;
background: var(--bg-muted);
display: flex; align-items: flex-end;
padding: 8px;
font-size: var(--fs-caption-sm);
color: white; font-weight: var(--fw-bd);
transition: transform var(--t-fast) ease-out;
cursor: pointer;
}
.ds-gacha-card:hover { transform: scale(1.04); z-index: 1; }
.ds-gacha-card::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7) 100%);
z-index: 1;
}
.ds-gacha-card__name { position: relative; z-index: 2; line-height: 1.3; word-break: keep-all; }
/* Floating CTA — v0.7: 우하단 sticky pill (스크롤 따라 viewport 하단에 stay) */
.ds-gacha-brand__cta {
position: sticky;
bottom: 24px;
margin-top: -80px; /* panel 위로 띄워 floating 느낌 */
z-index: 10;
display: flex; justify-content: flex-end;
padding-right: 24px;
pointer-events: none;
}
.ds-gacha-brand__cta .ds-btn,
.ds-gacha-brand__cta .ds-btn--floating {
pointer-events: auto;
min-width: 280px;
height: 52px;
padding: 0 24px;
background: var(--fg-base);
color: var(--bg-base);
border-radius: 999px;
box-shadow: 0 16px 36px rgba(0,0,0,0.32), 0 4px 12px rgba(0,0,0,0.16);
font-size: var(--fs-body-md); font-weight: var(--fw-bd);
letter-spacing: -0.005em;
display: inline-flex; align-items: center; justify-content: space-between;
gap: 12px;
transition: transform var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
}
.ds-gacha-brand__cta .ds-btn:hover {
transform: translateY(-2px);
box-shadow: 0 20px 44px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.16);
}
.ds-gacha-brand__cta .ds-btn .mi { font-size: 20px; }
.ds-gacha-brand__cta.is-loading .ds-btn {
visibility: hidden;
pointer-events: none;
}
/* Tablet/Mobile fallback — v0.7: 태블릿에서 packs가 viewport 잠식하는 버그 수정
container 가로 폭이 grid 1-col로 되며 packs(width 56%)가 너무 커지는 이슈
→ packs 컨테이너 max-width 캡 + pack width 비율 축소 */
@media (max-width: 1023px) {
.ds-gacha-brand {
/* minmax(0, 1fr) — 컨텐츠 (특히 카드 그리드 안의 가격 텍스트) 가 min-content
로 grid item 을 부풀려 viewport 를 넘기던 회귀 차단. */
grid-template-columns: minmax(0, 1fr) !important;
gap: 20px;
}
.ds-gacha-brand__main { min-width: 0; }
.ds-gacha-brand__intro { position: static !important; min-width: 0; }
.ds-gacha-brand__packs {
width: 100%;
height: 320px;
max-width: 480px;
margin-inline: auto;
align-self: center;
}
/* v0.8: 모바일/태블릿도 데스크톱처럼 절반 가까이 overlap (42% → 70%) */
.ds-gacha-pack--onepiece,
.ds-gacha-pack--pokemon { width: 70%; }
.ds-gacha-brand__heading { text-align: center; }
.ds-gacha-brand__chip { align-self: center; }
.ds-gacha-brand__cta {
position: sticky;
right: auto; bottom: 16px;
justify-content: center;
pointer-events: none;
/* 데스크톱은 floating 느낌으로 padding-right: 24px 만 있는데, 모바일에선
width: 100% pill 이라 pill 좌우 여백 불균형이 됨. 모바일에선 양쪽 균형. */
padding-left: 16px;
padding-right: 16px;
}
/* mobile/tablet 기본: CTA 100% width — mobile-only 룰에서 유지 */
.ds-gacha-brand__cta .ds-btn {
width: 100%;
min-width: 0;
/* viewport 좁아져도 텍스트가 pill 밖으로 안 나가도록 font-size 자동 축소
+ 좌우 padding 도 약간 축소. clamp 최소 13px / 최대 16px / 사이 vw-based. */
font-size: clamp(13px, 3.4vw, 16px);
padding: 0 18px;
gap: 8px;
}
/* 라벨 자체도 min-width: 0 + ellipsis — clamp 만으로 부족할 정도로 텍스트가
길면 끝부분 잘림 처리해 화살표가 pill 밖으로 새는 회귀 방지. */
.ds-gacha-brand__cta .ds-btn > span:not(.mi) {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* 태블릿 전용 (768-1023) */
@media (min-width: 768px) and (max-width: 1023px) {
/* 팩 사이즈 — 모바일(46%) 기준 살짝 키운 정도 (42%) */
.ds-gacha-pack--onepiece,
.ds-gacha-pack--pokemon { width: 42% !important; }
/* 두 팩 간격 좁히기 — 모바일과 동일하게 좌/우 14% 안쪽으로 당겨 가운데 overlap 강조 */
.ds-gacha-pack--pokemon { left: 14% !important; right: auto !important; }
.ds-gacha-pack--onepiece { right: 14% !important; left: auto !important; }
/* 팩 컨테이너 — 폭과 비례한 적당한 높이 */
.ds-gacha-brand__packs { height: 280px !important; max-width: 380px; }
/* CTA: 풀폭 X — 고정 min-width pill (가운데 floating) */
.ds-gacha-brand__cta .ds-btn { width: auto !important; min-width: 320px !important; }
}
/* v0.7 B1: 모바일 (≤767) — tabbar (60px + safe-area) 위로 CTA 띄움 */
@media (max-width: 767px) {
.ds-gacha-brand__cta {
bottom: calc(76px + env(safe-area-inset-bottom)) !important;
/* margin-top 음수 (-80px) 가 CTA 를 panel 위로 끌어올려 카드를 가렸음.
모바일에선 floating 강조보다 가독성이 우선이라 음수 마진 제거. */
margin-top: 0 !important;
}
/* 라인업 panel 끝과 CTA 사이에 충분한 여백 — CTA 높이 ~52px + 여유 20px. */
.ds-gacha-list-panel { padding-bottom: 84px !important; }
}
@media (min-width: 1024px) {
/* desktop placeholder — closing media bracket pattern */
.ds-gacha-brand__cta-noop { display: none; }
}
@media (max-width: 768px) {
.ds-gacha-brand__heading { font-size: 24px; margin-bottom: 12px; }
/* v1: 모바일 — 팩 사이즈 scale-down + 컨테이너 높이 충분히 확보해 위/아래 섹션과 겹침 방지 */
.ds-gacha-brand__packs {
height: 260px;
max-width: 320px;
margin-block: 8px 32px;
overflow: visible;
}
.ds-gacha-pack--onepiece,
.ds-gacha-pack--pokemon { width: 46% !important; }
/* 두 팩이 가까이 겹쳐 보이도록 — 좌/우 16% 안쪽으로 당김 (중앙 overlap 강조) */
.ds-gacha-pack--pokemon { left: 14% !important; right: auto !important; }
.ds-gacha-pack--onepiece { right: 14% !important; left: auto !important; }
/* 카드 라인업 grid — 모바일에서 3컬럼 (이전 2컬럼) */
.ds-gacha-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
min-width: 0;
max-width: 100%;
}
/* 카드 thumb 자식이 min-content (가격 / 이름 등) 로 grid 를 넘기지 않도록. */
.ds-gacha-grid > .ds-gacha-card-thumb { min-width: 0; }
.ds-gacha-list-panel { padding: 20px 16px 24px; border-radius: 16px; min-width: 0; max-width: 100%; overflow: hidden; }
.ds-gacha-list-panel__head { margin-bottom: 14px; }
.ds-gacha-list-panel__count { font-size: 20px; }
.ds-gacha-card-thumb__body {
/* grade chip 이 art 위로 옮겨가서 한 줄 줄어들었으니 body min-height 도 같이 축소.
이름 2 line clamp + price 한 줄만 들어가면 됨. */
min-height: 60px;
padding: 8px 8px 10px;
gap: 4px;
}
.ds-gacha-card-thumb__name {
display: -webkit-box;
min-height: 30px;
overflow: hidden;
white-space: normal;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 12px;
line-height: 1.25;
}
.ds-gacha-card-thumb__price-row {
/* grade chip 이 art 로 빠져 price 만 남았으니 column-reverse 도 불필요. */
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 4px;
}
.ds-gacha-card-thumb__price {
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
}
.ds-gacha-card-thumb__grade {
max-width: 100%;
height: 18px;
padding-inline: 6px;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0;
font-size: 9px;
}
/* legacy thumb compat */
.ds-gacha-brand__thumbs { flex-direction: row; position: static; }
.ds-gacha-thumb { flex: 1; }
.ds-gacha-thumb__visual { aspect-ratio: 16/10; padding: 14px; }
.ds-gacha-thumb__title { font-size: var(--fs-h4); }
}
/* v0.7 T5: 지원 등급사 row — 헤드라인과 분리, 본문 위계 명확화
왜: 기존 h2 안에 chip을 in-line으로 넣어 viewport마다 wrap 위치가 어색.
sub 텍스트와 정보 중복.
How: eyebrow 아래, 본문 위 별도 row로 분리. label + chip + coming 한 줄.
*/
.ds-grader-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin: 12px 0 10px;
}
.ds-grader-row__label {
font-size: var(--fs-caption); font-weight: var(--fw-bd);
letter-spacing: 0.04em;
color: var(--fg-muted);
text-transform: uppercase;
}
.ds-grader-marks {
display: inline-flex; align-items: center; gap: 6px;
}
.ds-grader-mark {
display: inline-flex; align-items: center;
padding: 4px 9px;
font-size: var(--fs-caption-md); font-weight: var(--fw-bk);
letter-spacing: 0.06em;
color: var(--fg-base);
border: 1px solid var(--border-strong);
border-radius: 6px;
background: var(--bg-card);
}
.ds-grader-row__coming {
font-size: var(--fs-caption); color: var(--fg-muted);
font-weight: var(--fw-md);
}
@media (max-width: 480px) {
.ds-grader-row { gap: 6px 8px; }
.ds-grader-row__coming { width: 100%; margin-top: 2px; }
}
/* legacy alias — used elsewhere */
.ds-grader-coming {
display: inline-block; font-size: var(--fs-caption); color: var(--fg-muted);
font-weight: var(--fw-md);
}
/* Coming Soon — 섹션 단위 임시 비활성 + 라벨 표기 */
.ds-coming-soon { position: relative; cursor: default; }
.ds-coming-soon > * { filter: blur(2px) grayscale(0.4); opacity: 0.55; pointer-events: none; user-select: none; transition: filter var(--t-base) ease-out, opacity var(--t-base) ease-out; }
.ds-coming-soon::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, color-mix(in srgb, var(--bg-base) 70%, transparent) 0%, color-mix(in srgb, var(--bg-base) 50%, transparent) 100%);
z-index: 1; pointer-events: none; border-radius: inherit;
}
.ds-coming-soon::after {
content: attr(data-coming-soon);
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
padding: 10px 20px;
background: var(--bg-card); color: var(--fg-base);
border: 1px solid var(--border-base);
border-radius: var(--r-pill);
font-size: var(--fs-body-sm); font-weight: var(--fw-bk);
letter-spacing: -0.005em;
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
z-index: 2; white-space: nowrap;
}
a.is-coming-soon,
.ds-gnb__link.is-coming-soon,
.ds-footer__link.is-coming-soon,
.ds-mobile-tabs__item.is-coming-soon,
.ds-service-card.is-coming-soon,
.ds-promo__slide.is-coming-soon {
cursor: not-allowed;
opacity: 0.42;
filter: grayscale(1);
pointer-events: none;
}
.ds-gnb__link.is-coming-soon {
color: var(--fg-faint);
}
.ds-gnb__link.is-coming-soon::after {
content: '준비 중';
position: static;
display: inline-flex;
align-items: center;
height: 20px;
margin-left: 8px;
padding: 0 8px;
border: 1px solid var(--border-base);
border-radius: var(--r-pill);
background: var(--bg-card);
color: var(--fg-muted);
font-size: 10px;
font-weight: var(--fw-bd);
line-height: 1;
text-transform: none;
}
.ds-mobile-tabs__item.is-coming-soon::after {
content: '준비 중';
display: block;
margin-top: 1px;
font-size: 8px;
font-weight: var(--fw-bd);
color: var(--fg-muted);
}
.ds-btn--glass {
background: rgba(255,255,255,0.10); color: #FFF;
border-color: rgba(255,255,255,0.18); backdrop-filter: blur(8px);
}
.ds-btn--glass:hover:not(:disabled) { background: rgba(255,255,255,0.18); }
/* ====== GNB ====== */
.ds-gnb {
position: sticky; top: 0; z-index: 50;
height: var(--gnb-h);
background: color-mix(in srgb, var(--bg-base) 90%, transparent);
backdrop-filter: saturate(140%) blur(16px);
-webkit-backdrop-filter: saturate(140%) blur(16px);
border-bottom: 1px solid var(--border-subtle);
}
.ds-gnb[data-kado-shared-shell="true"] {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
}
.ds-shell-content {
min-width: 0;
padding-top: calc(var(--gnb-h) + env(safe-area-inset-top, 0px));
}
.ds-gnb__inner {
display: flex; align-items: center; height: 100%;
max-width: var(--content-max); margin-inline: auto; padding-inline: var(--edge-margin);
gap: var(--stack-lg);
}
.ds-gnb__logo { display: flex; align-items: center; flex: 0 0 auto; }
.ds-gnb__logo svg { width: 72px; height: auto; }
.ds-gnb__logo svg path { fill: var(--fg-base); }
/* 우측 영역: 메뉴 + 로그인/아이콘 (좌측정렬로 묶임, GNB 우측 끝에 부착) */
.ds-gnb__right {
display: flex; align-items: center; gap: 20px;
margin-left: auto; height: 100%;
}
.ds-gnb__menu { display: flex; gap: 0; align-items: stretch; height: 100%; }
.ds-gnb__link {
font-size: 18px; font-weight: var(--fw-bk);
color: var(--fg-faint);
letter-spacing: 0.01em;
text-transform: uppercase;
position: relative; transition: color var(--t-fast) ease-out;
display: inline-flex; align-items: center;
height: 100%;
padding: 0 24px;
}
.ds-gnb__link:hover { color: var(--fg-base); }
.ds-gnb__link[aria-current="page"] { color: var(--fg-base); }
.ds-gnb__link[aria-current="page"]::after {
content: '';
position: absolute; left: 0; right: 0; bottom: -1px; /* GNB border-bottom 1px 위로 얹기 */
height: 2px; background: var(--fg-base);
z-index: 1;
}
/* GNB 우측 영역 — 로그인/내정보 버튼이 같은 슬롯에서 상태 전환 (시프트 방지) */
.ds-gnb__actions {
display: grid;
grid-template-columns: 36px max-content;
align-items: center;
gap: 8px;
}
.ds-gnb__notif-slot {
display: grid;
width: 36px;
height: 36px;
place-items: center;
}
.ds-gnb__icons {
display: grid;
grid-template-columns: max-content;
align-items: center;
justify-items: end;
color: var(--fg-base);
}
.ds-gnb__icons > * {
grid-area: 1 / 1;
transition: opacity var(--t-fast) ease-out;
}
.ds-gnb[data-auth="guest"] [data-kado-shell-user],
.ds-gnb[data-auth="user"] [data-kado-shell-guest] {
visibility: hidden;
opacity: 0;
pointer-events: none;
}
.ds-gnb__icon-btn { width: 36px; height: 36px; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; transition: background var(--t-fast) ease-out; }
.ds-gnb__icon-btn:hover { background: var(--bg-subtle); }
.ds-gnb__icon-btn .mi { font-size: var(--icon-lg); }
/* v0.7: 태블릿(768~1023)에선 GNB menu 유지 — 모바일 tabbar (<=767) 와 겹치지 않도록 BP 정합 */
@media (max-width: 1023px) {
.ds-gnb__inner { gap: var(--stack-md); }
.ds-gnb__right { gap: 20px; }
.ds-gnb__menu { gap: 22px; }
.ds-gnb__link {
padding: 0;
font-size: var(--fs-body-md);
}
.ds-notif { margin-right: 0; }
.ds-currency-picker { margin-right: 0; }
}
@media (max-width: 767px) {
.ds-gnb__menu { display: none; }
.ds-gnb__inner { gap: var(--stack-md); }
.ds-gnb__actions { grid-template-columns: 36px max-content; gap: 8px; }
.ds-gnb__icons { gap: var(--stack-xs); }
body.is-notif-open { overflow: hidden; }
.ds-notif-panel {
position: fixed;
inset: 0;
width: auto;
max-width: none;
height: 100dvh;
display: flex;
flex-direction: column;
border: 0;
border-radius: 0;
box-shadow: none;
z-index: 200;
transform: translateY(10px);
background: var(--bg-base);
}
.ds-notif-panel.is-open { transform: translateY(0); }
.ds-notif-panel__head {
min-height: 64px;
padding: calc(12px + env(safe-area-inset-top)) 20px 12px;
background: color-mix(in srgb, var(--bg-base) 96%, transparent);
backdrop-filter: saturate(140%) blur(16px);
-webkit-backdrop-filter: saturate(140%) blur(16px);
}
.ds-notif-panel__head h3 {
font-size: var(--fs-title-sm);
font-weight: var(--fw-bk);
}
.ds-notif-panel__close { display: inline-flex; }
.ds-notif-panel__mark {
min-height: 40px;
padding-inline: 12px;
font-size: var(--fs-caption-md);
}
.ds-notif-panel__list {
flex: 1;
max-height: none;
overflow-y: auto;
padding-bottom: 8px;
}
.ds-notif-item {
gap: 14px;
padding: 16px 20px;
}
.ds-notif-item__icon {
width: 40px;
height: 40px;
}
.ds-notif-item__title { font-size: var(--fs-body-sm); }
.ds-notif-item__sub { font-size: var(--fs-caption-md); }
.ds-notif-panel__foot {
padding: 12px 20px calc(16px + env(safe-area-inset-bottom));
background: var(--bg-base);
}
.ds-notif-panel__foot a {
display: flex;
min-height: 52px;
align-items: center;
justify-content: center;
border-radius: var(--r-pill);
background: var(--fg-base);
color: var(--bg-base);
text-decoration: none;
}
.ds-notif-panel__foot a:hover { text-decoration: none; }
}
/* Mobile bottom tab bar */
.ds-mobile-tabs {
display: none;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
/* 네이티브 앱 (viewport-fit=cover) 에서 home indicator 영역에 흰 배경
깔리도록 불투명 처리 + 최소 8px 여유 확보 (safe-area-inset 이 0 이어도). */
background: var(--bg-base);
border-top: 1px solid var(--border-subtle);
padding-bottom: max(env(safe-area-inset-bottom), 8px);
}
.ds-mobile-tabs__inner { display: grid; grid-template-columns: repeat(5,1fr); }
.ds-mobile-tabs__item {
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 10px 0; color: var(--fg-faint);
font-size: var(--fs-caption-xs); font-weight: var(--fw-bd); letter-spacing: 0.04em;
}
.ds-mobile-tabs__item .mi { font-size: 22px; }
.ds-mobile-tabs__item[aria-current="page"] { color: var(--fg-base); }
.ds-mobile-tabs__item[aria-current="page"] .mi { font-variation-settings: 'FILL' 1, 'wght' 500; }
@media (max-width: 767px) {
.ds-mobile-tabs { display: block; }
/* 모바일 탭바와 main 콘텐츠가 겹치지 않도록 main에 padding-bottom 보장 */
main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
/* footer가 main 안에 있는 페이지 — footer__bottom 마진 조정 */
main > .ds-footer:last-child { margin-bottom: 0; }
}
/* ====== Hero (cinematic — 절제) ====== */
.ds-hero {
position: relative;
min-height: 360px;
border-radius: var(--r-12);
overflow: hidden; isolation: isolate;
background: var(--gray-900);
cursor: pointer;
}
.ds-hero__bg {
position: absolute; inset: 0; z-index: 0;
background: var(--gray-900);
}
.ds-hero__overlay {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 60%, transparent 100%);
}
.ds-hero__content {
position: relative; z-index: 2;
display: flex; flex-direction: column; justify-content: center;
min-height: 360px; padding: 40px;
color: #FFF; max-width: 600px;
}
.ds-hero__eyebrow { color: var(--gray-400); margin-bottom: 12px; }
.ds-hero__title { color: #FFF; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.2; margin-bottom: 12px; font-weight: var(--fw-bk); letter-spacing: -0.015em; }
.ds-hero__title em { color: #FFF; font-style: normal; }
.ds-hero__sub { color: var(--gray-300); font-size: var(--fs-body); margin-bottom: 20px; max-width: 480px; }
.ds-hero__cta { display: flex; gap: var(--stack-sm); }
@media (max-width: 767px) {
.ds-hero { min-height: 280px; }
.ds-hero__content { min-height: 280px; padding: 24px; }
}
/* ====== Chip (filter) ====== */
.ds-chip {
display: inline-flex; align-items: center; gap: 4px;
height: 32px; padding: 0 14px;
background: var(--bg-card); color: var(--fg-subtle);
border: 1px solid var(--border-strong); border-radius: var(--r-pill);
font-size: var(--fs-body-sm); font-weight: var(--fw-md);
transition: var(--t-fast) ease-out; white-space: nowrap;
}
.ds-chip:hover { border-color: var(--gray-950); color: var(--fg-base); }
.ds-chip[aria-pressed="true"] { background: var(--gray-950); color: var(--gray-0); border-color: var(--gray-950); }
:root[data-theme="dark"] .ds-chip[aria-pressed="true"] { background: var(--gray-50); color: var(--gray-950); }
.ds-chip-row { display: flex; gap: var(--stack-sm); flex-wrap: wrap; }
/* ====== Grade badge (PSA/BGS — 가챠 페이지 결과 등에서 재사용) ====== */
.ds-grade {
display: inline-flex; align-items: center;
height: 22px; padding: 0 8px;
background: var(--bg-muted); color: var(--fg-base);
border-radius: var(--r-4);
font-size: var(--fs-caption-xs); font-weight: var(--fw-bk); letter-spacing: 0.04em;
}
.ds-grade--psa { background: var(--gray-950); color: var(--gray-0); }
:root[data-theme="dark"] .ds-grade--psa { background: var(--gray-50); color: var(--gray-950); }
/* ====== Service cards (글로벌 서비스 — 첨부 정합) ====== */
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
@media (max-width: 1023px) { .service-grid { grid-template-columns: 1fr; } }
.ds-service-card {
position: relative; overflow: hidden;
display: flex; flex-direction: column; justify-content: space-between;
padding: var(--card-pad-xl);
border-radius: var(--r-12);
aspect-ratio: 4 / 3;
background: var(--bg-card); border: 1px solid var(--border-base);
color: inherit;
text-decoration: none;
transition: transform var(--t-base) ease-out, box-shadow var(--t-base) ease-out;
cursor: pointer;
}
.ds-service-card:hover { box-shadow: var(--shadow-1); }
.ds-service-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.ds-service-card__title { font-size: var(--fs-headline); font-weight: var(--fw-bk); margin-bottom: var(--stack-sm); letter-spacing: var(--ls-headline); }
.ds-service-card__desc { font-size: var(--fs-body-sm); color: var(--fg-muted); max-width: 280px; }
.ds-service-card__cta { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-body-sm); font-weight: var(--fw-bd); color: var(--fg-base); }
.ds-service-card__cta .mi { font-size: var(--icon-sm); }
.ds-service-card__decor {
position: absolute; right: -20px; bottom: -20px;
font-size: 160px; opacity: 0.06;
transition: transform var(--t-slow) ease-out, opacity var(--t-slow) ease-out;
pointer-events: none;
}
.ds-service-card--dark {
background: var(--gray-950); color: var(--gray-0); border-color: var(--gray-950);
}
.ds-service-card--dark .ds-service-card__title { color: var(--gray-0); }
.ds-service-card--dark .ds-service-card__desc { color: var(--gray-400); }
.ds-service-card--dark .ds-service-card__cta { color: var(--gray-0); }
.ds-service-card--dark .ds-service-card__decor {
/* 초록 mystic 그래픽 → white α4% (시각적 피로도 감소) */
color: rgba(255, 255, 255, 0.04);
opacity: 1;
}
/* 다크모드 invert — 키스크린 대비 유지 */
:root[data-theme="dark"] .ds-service-card--dark {
background: var(--gray-0); color: var(--gray-950); border-color: var(--gray-100);
}
:root[data-theme="dark"] .ds-service-card--dark .ds-service-card__title { color: var(--gray-950); }
:root[data-theme="dark"] .ds-service-card--dark .ds-service-card__desc { color: var(--gray-600); }
:root[data-theme="dark"] .ds-service-card--dark .ds-service-card__cta { color: var(--gray-950); }
:root[data-theme="dark"] .ds-service-card--dark .ds-service-card__decor {
color: rgba(0, 0, 0, 0.04);
}
/* ====== Pack card (가챠 페이지) ====== */
.pack-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
@media (max-width: 1023px) { .pack-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .pack-grid { grid-template-columns: repeat(2, 1fr); } }
/* DS spec P-01/P-02 정합 — radius lg(8) for container, sm(4) for image, hover=shadow only */
.ds-pack {
display: flex; flex-direction: column; gap: var(--stack-sm);
background: var(--bg-card); border: 1px solid var(--border-base);
border-radius: 8px; padding: var(--card-pad);
box-shadow: var(--shadow-1);
transition: box-shadow var(--t-fast) ease-out, border-color var(--t-fast) ease-out;
}
.ds-pack:hover { box-shadow: var(--shadow-2); border-color: var(--gray-300); }
.ds-pack__art {
aspect-ratio: 5 / 7;
border-radius: 4px; overflow: hidden;
background: var(--gray-100);
position: relative;
border: 1px solid var(--border-subtle);
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.02);
}
:root[data-theme="dark"] .ds-pack__art { background: var(--gray-800); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04); }
/* DS P-01 DON'T: 카드 내부 레어도 표시 박지 X → 우상단 뱃지로만 */
.ds-pack__art-badge {
position: absolute; top: 8px; right: 8px; z-index: 2;
display: inline-flex; align-items: center;
height: 20px; padding: 0 6px;
background: var(--gray-a700); color: var(--gray-0);
border-radius: 4px;
font-size: 10px; font-weight: var(--fw-bk); letter-spacing: 0.04em; text-transform: uppercase;
}
.ds-pack__art-badge--legend { background: var(--legendary-500); color: var(--legendary-900); }
.ds-pack__art-badge--brand { background: var(--gray-950); color: var(--gray-0); }
/* Type — DS title-sm(16/600) for name, body-sm for sub, P-02 md(16/mono/600) for price */
.ds-pack__name { font-size: 14px; font-weight: var(--fw-bd); line-height: 1.4; letter-spacing: -0.008em; }
.ds-pack__sub { font-size: 12px; color: var(--fg-muted); font-weight: var(--fw-rg); line-height: 1.4; }
.ds-pack__price-row { display: flex; align-items: baseline; gap: 4px; margin-top: 6px; }
/* 가격 폰트 = Pretendard (단일 패밀리). DS P-02 mono 규칙은 사용 안 함 — README 참조 */
.ds-pack__price { font-size: 16px; font-weight: var(--fw-bd); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; letter-spacing: -0.01em; }
.ds-pack__price-unit { font-size: 11px; color: var(--fg-muted); font-weight: var(--fw-rg); }
.ds-pack__meta { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--fg-muted); font-weight: var(--fw-md); }
.ds-pack__meta-item { display: inline-flex; align-items: center; gap: 3px; }
.ds-pack__meta-item .mi { font-size: 12px; }
/* ====== Inventory grid (방금 뽑힌 카드) ====== */
/* v0.7: 6 items 기준 — 줄바꿈 orphan 방어 (홀수 row 비어보이는 현상 X)
desktop 6-col(1) · tablet 3-col(2) · small 3-col(2) · mobile snap rail */
.inv-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gutter); }
@media (max-width: 1023px) { .inv-grid { grid-template-columns: repeat(3, 1fr); } } /* 4→3 (6/3=clean) */
@media (max-width: 639px) { .inv-grid { grid-template-columns: repeat(3, 1fr); } }
.inv-grid > .ds-home-recent-empty {
box-sizing: border-box;
min-height: 258px;
justify-content: center;
}
/* === ds-inv (방금 뽑힌 카드) — spec 준수: art 4:3 + status chip 우상단 + 가격 외부 footer === */
.ds-inv {
display: flex; flex-direction: column;
background: var(--bg-card); border: 1px solid var(--border-base);
border-radius: 10px;
overflow: hidden;
cursor: pointer;
transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ds-inv:hover {
/* unified hover — .ds-listing 기준 */
box-shadow: var(--shadow-2);
border-color: var(--gray-300);
}
:root[data-theme="dark"] .ds-inv { background: var(--gray-900); border-color: var(--gray-800); }
.ds-inv__art {
aspect-ratio: 1 / 1; /* spec 2.1: grid thumbnail 1:1 */
background-color: var(--gray-100);
background-image: none;
background-size: 78% auto; /* spec: 4면 padding ~11% (이미지 안 닿음) */
background-repeat: no-repeat;
background-position: center;
position: relative;
overflow: hidden;
}
:root[data-theme="dark"] .ds-inv__art { background-color: var(--gray-800); }
/* art 우상단 status chip */
.ds-inv__art .ds-inv__status-chip {
position: absolute;
top: 8px; right: 8px;
z-index: 2;
}
/* v0.5 spec — Title 600 / Eyebrow(meta) 500 / Price 600 */
.ds-inv__name {
font-size: 14px; font-weight: var(--fw-bd); /* 600 */
line-height: 1.2;
letter-spacing: -0.005em;
margin: 0;
padding: 0 12px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
color: var(--fg-base);
}
.ds-inv__meta {
font-size: 11px;
color: var(--fg-faint);
font-weight: var(--fw-md); /* 500 */
margin: 8px 12px 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* v0.5: footer 정렬 수정 — price+unit 묶고 offer만 우측 push (강아지 귀 방지) */
.ds-inv__footer {
display: flex; align-items: baseline;
gap: 4px;
padding: 8px 12px 10px;
margin-top: auto;
}
.ds-inv__price {
font-size: 16px;
font-weight: var(--fw-bd); /* 600 */
color: var(--fg-base);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.ds-inv__price-unit {
font-size: 12px; font-weight: var(--fw-rg); color: var(--fg-muted);
}
.ds-inv__price--empty {
color: var(--fg-faint);
font-weight: var(--fw-rg);
}
.ds-inv__offer {
margin-left: auto; /* price/unit 옆에 묶이지 않고 우측 끝 */
}
/* limited progress */
.ds-progress { height: 4px; background: var(--gray-a200); border-radius: var(--r-pill); overflow: hidden; margin-top: var(--stack-sm); }
.ds-progress__fill { height: 100%; background: var(--gray-700); border-radius: inherit; transition: width var(--t-slow) var(--ease-emp); }
.ds-progress__fill--low { background: var(--danger-500); }
.ds-progress__label { display: flex; justify-content: space-between; font-size: var(--fs-caption-xs); color: var(--fg-faint); margin-top: 6px; font-weight: var(--fw-md); letter-spacing: 0.04em; text-transform: uppercase; }
.ds-progress__label .danger { color: var(--danger-600); font-weight: var(--fw-bk); }
/* ====== Tabs ====== */
.ds-tabs { border-bottom: 1px solid var(--border-base); }
.ds-tabs__list { display: flex; gap: 8px; }
.ds-tabs__trigger {
position: relative; padding: 12px 0; margin-right: 24px;
font-size: var(--fs-body); font-weight: var(--fw-bd);
color: var(--fg-faint); transition: color var(--t-fast) ease-out;
}
.ds-tabs__trigger:hover { color: var(--fg-subtle); }
.ds-tabs__trigger[aria-selected="true"] { color: var(--fg-base); }
.ds-tabs__trigger[aria-selected="true"]::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
height: 2px; background: var(--fg-base);
}
/* ====== Footer ====== */
.ds-footer {
background: var(--bg-base);
border-top: 1px solid var(--border-base);
margin-top: var(--stack-xl);
}
/* Footer 12단 그리드 — brand 1-4 / cols 6-12 (가운데 1열 시각 호흡) */
.ds-footer__top {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--stack-lg);
padding-block: 56px 40px;
}
.ds-footer__brand {
grid-column: 1 / span 4;
display: flex; flex-direction: column; gap: 14px;
max-width: 360px;
}
.ds-footer__brand h4 {
font-size: 22px; font-weight: var(--fw-bk);
letter-spacing: -0.012em;
margin: 0;
}
.ds-footer__logo {
width: 96px; height: auto; display: block;
color: var(--fg-base);
}
.ds-footer__brand p {
font-size: var(--fs-caption);
color: var(--fg-muted);
line-height: 1.6;
margin: 0;
}
.ds-footer__cols {
grid-column: 5 / -1;
display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--stack-md);
}
.ds-footer__col-title {
font-size: var(--fs-caption-sm);
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--fg-base);
margin: 0 0 16px;
font-weight: var(--fw-bk);
}
.ds-footer__link {
display: block;
font-size: var(--fs-caption);
color: var(--fg-muted);
padding-block: 6px;
transition: color var(--t-fast) ease-out;
}
.ds-footer__link:hover { color: var(--fg-base); }
/* 회사 법적 정보 영역 — 사업자등록·통신판매업·주소 등 */
.ds-footer__legal {
border-top: 1px solid var(--border-subtle);
padding-top: 24px;
display: flex; flex-direction: column; gap: 6px;
}
.ds-footer__legal-line {
font-size: var(--fs-caption-sm);
color: var(--fg-muted);
letter-spacing: -0.005em;
line-height: 1.7;
margin: 0;
}
.ds-footer__legal-line strong {
color: var(--fg-base);
font-weight: var(--fw-bd);
margin-right: 6px;
}
.ds-footer__legal-line a {
color: inherit;
text-decoration: underline;
text-decoration-color: var(--border-base);
text-underline-offset: 2px;
}
.ds-footer__legal-line a:hover { text-decoration-color: var(--fg-base); }
.ds-footer__disclaimer {
font-size: var(--fs-caption-sm);
color: var(--fg-faint);
margin-top: 12px;
letter-spacing: -0.005em;
line-height: 1.6;
}
/* 푸터 하단 row — 카피 + SNS */
.ds-footer__bottom {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 20px;
padding-top: 24px;
padding-bottom: 32px;
margin-top: 24px;
border-top: 1px solid var(--border-subtle);
font-size: var(--fs-caption-sm); color: var(--fg-faint);
}
.ds-footer__bottom > span:first-child { flex: 1 1 auto; min-width: 0; }
@media (max-width: 599px) {
.ds-footer__bottom { padding-bottom: 8px; }
}
.ds-footer__social { display: flex; gap: 8px; flex-shrink: 0; }
.ds-footer__social a {
flex-shrink: 0;
width: 36px; height: 36px;
border-radius: 8px;
background: var(--bg-subtle);
border: 1px solid var(--border-base);
display: inline-flex; align-items: center; justify-content: center;
color: var(--fg-subtle);
transition: background var(--t-fast) ease-out, color var(--t-fast) ease-out, border-color var(--t-fast) ease-out;
}
.ds-footer__social a:hover {
background: var(--gray-950); color: var(--gray-0); border-color: var(--gray-950);
}
:root[data-theme="dark"] .ds-footer__social a:hover { background: var(--gray-50); color: var(--gray-950); border-color: var(--gray-50); }
.ds-footer__social svg { width: 18px; height: 18px; display: block; flex-shrink: 0; }
/* ==========================================================
Breadcrumb — 페이지 위계 표시
========================================================== */
.ds-breadcrumb {
display: flex; align-items: center; gap: 6px;
font-size: var(--fs-caption); font-weight: var(--fw-md);
color: var(--fg-muted);
padding-block: 16px 4px;
min-width: 0;
overflow: hidden;
white-space: nowrap;
}
.ds-breadcrumb a {
color: inherit;
text-decoration: none;
flex: 0 0 auto;
}
.ds-breadcrumb a:hover { color: var(--fg-base); text-decoration: underline; text-underline-offset: 2px; }
.ds-breadcrumb__sep {
color: var(--fg-faint);
flex: 0 0 auto;
}
.ds-breadcrumb__current {
color: var(--fg-base);
font-weight: var(--fw-bd);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 767px) {
.ds-breadcrumb__current {
flex: 1 1 auto;
}
}
/* ==========================================================
Pack Detail — 좌 (hero + pool) / 우 (info card sticky)
컨테이너 비율 3:2 — 우측 슬림하게, pool grid는 좌측 hero 아래로 흐름
========================================================== */
.pack-detail-grid {
display: grid;
grid-template-columns: 3fr 2fr;
grid-template-areas:
"hero info"
"pool info";
gap: 32px 48px;
padding-block: 16px 48px;
align-items: start;
min-width: 0;
}
.ds-pack-hero,
.pack-detail-pool {
min-width: 0;
}
@media (max-width: 1023px) {
/* 태블릿/모바일: 1-단 stacked (card-detail과 동일 패턴) — hero는 wide container, 팩 이미지 contain */
.pack-detail-grid {
grid-template-columns: 1fr;
grid-template-areas: "hero" "info" "pool";
gap: 24px;
width: 100%;
max-width: 100%;
overflow: hidden;
}
/* hero — 1:1 square 해제, 50vh wide stage (card-detail 정합) */
.ds-pack-hero__art {
aspect-ratio: auto;
width: 100%;
height: 50vh;
min-height: 320px;
max-height: 50vh;
padding: 16px;
overflow: hidden;
}
/* 팩 이미지: 5:7 portrait container 안에서 풀 노출 (contain) */
.ds-pack-hero__art .ds-pack-hero__img,
.ds-pack-hero__art img {
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
object-position: center !important;
margin: 0 auto !important;
display: block !important;
}
}
@media (max-width: 480px) {
.ds-pack-hero__art {
min-height: 280px;
max-height: 42vh;
}
}
/* 좌측 hero — sticky 해제, pool과 함께 자연 스크롤 */
.ds-pack-hero {
grid-area: hero;
position: relative;
container-type: inline-size;
}
.pack-detail-pool { grid-area: pool; padding-bottom: 32px; }
.ds-pack-hero__art {
aspect-ratio: 1 / 1;
background:
radial-gradient(120% 80% at 50% 0%, var(--gray-50) 0%, var(--gray-100) 60%, var(--gray-200) 100%);
border: 1px solid var(--border-base);
border-radius: 16px;
position: relative; overflow: hidden;
box-shadow: var(--shadow-2);
display: grid; place-items: center;
}
/* LIMITED hero — 관리자가 업로드한 팩 썸네일 이미지를 그대로 사용 */
.ds-pack-hero__art--limited {
background: var(--gray-100) !important;
display: grid !important;
place-items: center;
padding: 0;
position: relative;
}
.ds-pack-hero__art--limited::before,
.ds-pack-hero__art--limited::after { display: none !important; }
/* hero badge variants */
.ds-pack-hero__badge--brand {
background: var(--bg-card) !important;
color: var(--fg-base) !important;
border: 1px solid var(--border-base) !important;
}
.ds-pack-hero__badge--limited {
background: var(--gray-900) !important;
color: var(--gray-0) !important;
}
:root[data-theme="dark"] .ds-pack-hero__art {
background:
radial-gradient(120% 80% at 50% 0%, var(--gray-800) 0%, var(--gray-900) 60%, var(--gray-950) 100%);
}
/* Hero placeholder indicator (실제 이미지가 들어갈 자리) */
.ds-pack-hero__art::before {
content: '';
width: 56px; height: 56px;
border-radius: 14px;
background:
linear-gradient(180deg, var(--gray-0) 0%, var(--gray-50) 100%);
border: 1px solid var(--border-base);
box-shadow: var(--shadow-1);
opacity: 0.6;
}
:root[data-theme="dark"] .ds-pack-hero__art::before {
background: linear-gradient(180deg, var(--gray-800), var(--gray-900));
}
.ds-pack-hero__art::after {
content: '팩 이미지';
position: absolute;
bottom: 24px; left: 50%; transform: translateX(-50%);
font-size: var(--fs-caption-sm);
color: var(--fg-faint);
letter-spacing: 0.04em;
font-weight: var(--fw-md);
}
/* 실제 팩 이미지 들어간 경우 — placeholder 숨김 + 은은 도트 배경 */
.ds-pack-hero__art--has-image::before,
.ds-pack-hero__art--has-image::after { display: none; }
.ds-pack-hero__art--has-image {
background-color: var(--gray-50);
background-image: radial-gradient(circle, var(--gray-200) 1px, transparent 1.5px);
background-size: 14px 14px;
background-position: 0 0;
border: 1px solid var(--border-base);
}
.ds-pack-hero__art.is-live-loading {
background: linear-gradient(90deg, var(--bg-subtle) 0%, var(--bg-muted, var(--gray-100)) 48%, var(--bg-subtle) 100%) !important;
background-size: 200% 100% !important;
animation: ds-skeleton-shimmer 1.4s ease-in-out infinite;
}
.ds-pack-hero__art.is-live-loading::before,
.ds-pack-hero__art.is-live-loading::after,
.ds-pack-hero__art.is-live-loading .ds-pack-hero__badge {
display: none !important;
}
.ds-pack-hero__art.is-live-loading .ds-pack-hero__img {
opacity: 0 !important;
}
:root[data-theme="dark"] .ds-pack-hero__art--has-image {
background-color: var(--gray-900);
background-image: radial-gradient(circle, var(--gray-700) 1px, transparent 1.5px);
}
/* 팩 이미지 — 양옆 여백 두고 contain (꽉 끼지 않게) */
.ds-pack-hero__img {
width: 78%; height: 78%;
margin: auto;
position: absolute; inset: 0;
object-fit: contain;
display: block;
filter: drop-shadow(0 8px 24px rgba(0,0,0,0.18));
}
.ds-pack-hero__img[hidden],
.ds-pack-hero__img[data-live-image-pending="true"] {
display: none !important;
}
.ds-pack-hero__art--limited.ds-pack-hero__art--has-image .ds-pack-hero__img {
/* contain — admin 이 업로드한 이미지의 종횡비를 유지하고 hero 박스 안에
resize-to-fit. 이전엔 cover 라서 세로로 긴 팩 이미지가 위/아래로
잘려 보기 안 좋았음. 박스 자체의 dot 패턴 배경이 빈 영역으로 보임. */
width: 92% !important;
height: 92% !important;
margin: auto !important;
inset: 0 !important;
object-fit: contain !important;
object-position: center !important;
filter: drop-shadow(0 8px 24px rgba(0,0,0,0.18)) !important;
}
.ds-pack-hero__badge {
position: absolute; top: 20px; left: 20px;
height: 30px; padding: 0 14px;
border-radius: var(--r-pill);
display: inline-flex; align-items: center;
font-size: var(--fs-caption-sm); font-weight: var(--fw-bk);
letter-spacing: 0.02em;
background: var(--gray-950); color: var(--gray-0);
z-index: 1;
}
:root[data-theme="dark"] .ds-pack-hero__badge { background: var(--gray-50); color: var(--gray-950); }
.ds-pack-hero__badge--legend { background: var(--legendary-500); color: var(--legendary-900); }
/* 우측 상단 보조 메타 */
.ds-pack-hero__meta {
position: absolute; top: 22px; right: 20px;
display: inline-flex; align-items: center; gap: 6px;
font-size: var(--fs-caption-sm); color: var(--fg-muted);
font-variant-numeric: tabular-nums;
font-weight: var(--fw-md);
z-index: 1;
}
.ds-pack-hero__meta strong { color: var(--fg-base); font-weight: var(--fw-bk); }
/* SOLD OUT overlay — shared by brand and limited packs */
.ds-pack-hero__soldout {
position: absolute;
inset: 0;
display: none;
align-items: center;
justify-content: center;
border-radius: 16px;
background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
z-index: 5;
pointer-events: none;
text-align: center;
}
.ds-pack-hero.is-soldout .ds-pack-hero__soldout { display: flex; }
.ds-pack-hero__soldout-title {
display: inline-flex;
align-items: center;
justify-content: center;
background: #010101;
color: #fff;
font-size: clamp(34px, 6.5cqi, 64px);
font-weight: 900;
letter-spacing: -0.02em;
line-height: 1;
text-transform: uppercase;
padding: 0.14em 0.22em;
border-radius: 4px;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
box-sizing: border-box;
}
.ds-pack-hero__soldout-sub { display: none; }
/* 우측 info card — 3 ZONE 구조 (identity / action / trust)
v0.7: sticky-after-threshold (양방향)
fixed: 항상 sticky로 동작해 스크롤 중 끊김을 줄인다. */
.ds-info-card {
grid-area: info;
position: sticky;
top: calc(var(--gnb-h) + env(safe-area-inset-top, 0px) + 24px);
align-self: start;
min-width: 0;
max-width: 100%;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 16px;
padding: 28px;
display: flex; flex-direction: column; gap: 0;
box-shadow: var(--shadow-2);
}
.ds-info-card.is-sticky-engaged {
position: sticky;
top: calc(var(--gnb-h) + env(safe-area-inset-top, 0px) + 24px);
}
@media (max-width: 1023px) {
.ds-info-card,
.ds-info-card.is-sticky-engaged { position: static; }
}
/* Zone wrapper — 내부 spacing 통제 */
.ds-info-card__zone {
display: flex; flex-direction: column;
}
.ds-info-card__zone--identity { gap: 14px; }
.ds-info-card__zone--trust { gap: 0; padding-top: 28px; margin-top: 28px; border-top: 1px solid var(--border-subtle); }
.ds-info-card__zone--action { gap: 14px; padding-top: 28px; margin-top: 28px; border-top: 1px solid var(--border-base); }
/* Title block (Identity zone) — eyebrow+stock chip / progress / name / sub */
.ds-pack-headline {
display: flex; flex-direction: column; gap: 6px;
}
.ds-pack-headline__top {
display: flex; justify-content: space-between; align-items: baseline;
gap: 12px;
}
.ds-pack-headline__eyebrow {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
font-weight: var(--fw-md); letter-spacing: 0.05em;
text-transform: uppercase;
margin: 0;
}
/* Stock chip — eyebrow 우측에 부차 urgency */
.ds-pack-headline__stock {
display: inline-flex; align-items: baseline;
font-size: var(--fs-caption-sm); color: var(--fg-muted);
font-weight: var(--fw-md); letter-spacing: 0.02em;
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
white-space: nowrap;
}
.ds-pack-headline__stock strong {
color: var(--fg-base);
font-weight: var(--fw-bk);
margin-right: 2px;
}
/* 잔여 progress — 3px 얇게, 부차 시그널 */
.ds-pack-headline__progress {
height: 3px;
background: var(--gray-a200);
border-radius: var(--r-pill);
overflow: hidden;
margin: 4px 0 6px;
}
:root[data-theme="dark"] .ds-pack-headline__progress { background: var(--white-a200); }
.ds-pack-headline__progress-fill {
height: 100%; background: var(--gray-700);
border-radius: inherit;
transition: width var(--t-base) var(--ease-std);
}
.ds-pack-headline__name {
font-size: 28px; font-weight: var(--fw-bk);
letter-spacing: -0.02em; line-height: 1.15;
margin: 0;
}
.ds-pack-headline__sub {
font-size: var(--fs-body-sm); color: var(--fg-muted);
line-height: 1.55;
margin-top: 4px;
}
.ds-pack-headline__name.is-live-loading,
.ds-pack-headline__sub.is-live-loading,
.section-head__sub.is-live-loading,
.ds-breadcrumb__current.is-live-loading {
color: transparent !important;
position: relative;
}
.ds-pack-headline__name.is-live-loading::after,
.ds-pack-headline__sub.is-live-loading::after,
.section-head__sub.is-live-loading::after,
.ds-breadcrumb__current.is-live-loading::after {
content: "";
display: block;
border-radius: var(--r-pill);
background: linear-gradient(90deg, var(--bg-subtle) 0%, var(--bg-muted, var(--gray-100)) 48%, var(--bg-subtle) 100%);
background-size: 200% 100%;
animation: ds-skeleton-shimmer 1.4s ease-in-out infinite;
}
.ds-pack-headline__name.is-live-loading::after { width: min(320px, 80%); height: 30px; }
.ds-pack-headline__sub.is-live-loading::after { width: min(440px, 92%); height: 16px; }
.section-head__sub.is-live-loading::after { width: min(380px, 90%); height: 14px; }
.ds-breadcrumb__current.is-live-loading::after { width: 96px; height: 12px; }
/* 잔여 팩 — Identity zone 일부 (bg 박스 X, 인라인 strip) */
.ds-pack-meta__stock {
display: flex; flex-direction: column; gap: 8px;
}
.ds-pack-meta__stock-row {
display: flex; justify-content: space-between; align-items: baseline;
}
.ds-pack-meta__stock-label {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
font-weight: var(--fw-md); letter-spacing: 0.05em;
text-transform: uppercase;
}
.ds-pack-meta__stock-count {
font-size: var(--fs-body-md); font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
letter-spacing: -0.008em;
color: var(--fg-base);
}
.ds-pack-meta__stock-count small {
font-size: var(--fs-caption); font-weight: var(--fw-md);
color: var(--fg-muted); margin-left: 1px;
}
.ds-pack-meta__stock-bar {
height: 6px;
background: var(--gray-a200);
border-radius: var(--r-pill);
overflow: hidden;
}
:root[data-theme="dark"] .ds-pack-meta__stock-bar { background: var(--white-a200); }
.ds-pack-meta__stock-fill {
height: 100%;
background: var(--gray-700);
border-radius: inherit;
transition: width var(--t-base) var(--ease-std);
}
.ds-pack-meta__stock-fill--low { background: var(--danger-500); }
/* Trust zone — 등급별 잔여/총량 (숫자 우선, 시각화 X)
사용자 핵심 질문 "좋은 거 뽑을 수 있나?" → 잔여 카운트 PRIMARY, % SECONDARY */
.ds-pack-prob { display: flex; flex-direction: column; gap: 6px; }
.ds-pack-prob__head {
display: flex; justify-content: space-between; align-items: baseline;
font-size: var(--fs-caption-sm); color: var(--fg-muted);
font-weight: var(--fw-md); letter-spacing: 0.05em;
text-transform: uppercase;
margin: 0 0 4px;
}
.ds-pack-prob__total {
color: var(--fg-faint);
font-weight: var(--fw-rg); letter-spacing: 0;
text-transform: none;
}
.ds-pack-odds-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 0 14px;
border: 1px solid var(--border-base);
border-radius: var(--r-pill);
background: var(--bg-card);
color: var(--fg-base);
font: inherit;
font-size: var(--fs-caption-sm);
font-weight: var(--fw-bd);
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
cursor: pointer;
transition: border-color var(--t-fast) ease-out, background var(--t-fast) ease-out;
}
.ds-pack-odds-trigger:hover {
border-color: var(--gray-950);
background: var(--bg-subtle);
}
.ds-pack-odds-trigger:disabled {
color: var(--fg-faint);
border-color: var(--border-subtle);
cursor: not-allowed;
}
.ds-pack-prob__list {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column;
}
.ds-pack-prob__item {
display: grid;
grid-template-columns: 8px 1fr 56px 56px;
gap: 12px; align-items: center;
padding: 6px 0;
border-top: 1px solid var(--border-subtle);
}
.ds-pack-prob__item:first-child { border-top: none; }
/* brand 모드: count 칸 숨김 → 3-col grid로 단축 (pct 칼럼 위치 일관 유지) */
body[data-pack-type="brand"] .ds-pack-prob__item {
grid-template-columns: 8px 1fr 56px;
}
.ds-pack-prob__dot {
width: 8px; height: 8px; border-radius: 50%;
flex-shrink: 0;
}
.ds-pack-prob__dot--mystic { background: var(--gray-700); }
.ds-pack-prob__dot--legend { background: var(--legendary-700); }
.ds-pack-prob__dot--epic { background: var(--epic-500); }
.ds-pack-prob__dot--rare { background: var(--rare-500); }
.ds-pack-prob__dot--common { background: var(--common-500); }
.ds-pack-prob__name {
font-size: var(--fs-body-sm); font-weight: var(--fw-md);
letter-spacing: -0.005em;
color: var(--fg-subtle);
}
/* 잔여 / 총량 — 통일 사이즈 (14px), weight·color로만 미세 위계 */
.ds-pack-prob__count {
display: inline-flex; align-items: baseline;
font-size: var(--fs-body-sm);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.ds-pack-prob__count strong {
font-weight: var(--fw-bk);
color: var(--fg-base);
letter-spacing: -0.005em;
}
.ds-pack-prob__slash {
color: var(--fg-faint);
font-weight: var(--fw-rg);
margin: 0 4px;
}
.ds-pack-prob__of {
color: var(--fg-muted);
font-weight: var(--fw-md);
}
/* % — vertical line 구분자로 위계 정돈 */
.ds-pack-prob__pct {
font-size: var(--fs-body-sm); color: var(--fg-muted);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
font-weight: var(--fw-md);
letter-spacing: -0.005em;
text-align: right;
border-left: 1px solid var(--border-base);
padding-left: 12px;
}
.ds-pack-prob.is-live-loading .ds-pack-prob__count,
.ds-pack-prob.is-live-loading .ds-pack-prob__pct,
.ds-pool-filter.is-live-loading .ds-pool-filter__count {
color: transparent !important;
border-color: transparent !important;
border-radius: var(--r-pill);
background: linear-gradient(90deg, var(--bg-subtle) 0%, var(--bg-muted, var(--gray-100)) 48%, var(--bg-subtle) 100%);
background-size: 200% 100%;
animation: ds-skeleton-shimmer 1.4s ease-in-out infinite;
}
.ds-pack-prob.is-live-loading .ds-pack-prob__count *,
.ds-pack-prob.is-live-loading .ds-pack-prob__pct *,
.ds-pool-filter.is-live-loading .ds-pool-filter__count * {
color: transparent !important;
}
.ds-pack-prob.is-live-loading .ds-pack-prob__count { min-width: 52px; min-height: 14px; }
.ds-pack-prob.is-live-loading .ds-pack-prob__pct { min-width: 42px; min-height: 14px; }
.ds-pool-filter.is-live-loading .ds-pool-filter__count {
display: inline-block;
min-width: 18px;
min-height: 12px;
}
@media (max-width: 599px) {
.ds-pack-prob__head {
align-items: baseline;
gap: 8px;
}
.ds-pack-odds-trigger {
min-height: 32px;
padding-inline: 12px;
}
}
/* ==========================================================
=== PACK ODDS === 카드 풀 odds 카드 (시세 X · 확률 + 잔여 + 게이지 + 마감 임박)
초기 프로덕트용 — 시세 데이터 형성 후 sparkline·평균시세 추가 예정
========================================================== */
.ds-pack-odds { display: flex; flex-direction: column; gap: 4px; }
.ds-pack-odds__head {
display: flex; justify-content: space-between; align-items: baseline;
font-size: var(--fs-caption-sm); color: var(--fg-muted);
font-weight: var(--fw-md); letter-spacing: 0.05em;
text-transform: uppercase;
margin: 0 0 6px;
}
.ds-pack-odds__head-sub {
color: var(--fg-faint);
font-weight: var(--fw-rg); letter-spacing: 0;
text-transform: none;
}
.ds-pack-odds__list {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column;
gap: 8px;
}
.ds-pack-odds__item {
display: flex; flex-direction: column; gap: 6px;
padding: 10px 12px;
background: var(--bg-subtle);
border: 1px solid var(--border-subtle);
border-radius: 8px;
}
:root[data-theme="dark"] .ds-pack-odds__item {
background: var(--gray-900);
border-color: var(--gray-800);
}
/* 잔여율 < 30% 강조 — 살짝 빨강 틴트 (subtle) */
.ds-pack-odds__item.is-low {
background: rgba(232,90,71,0.04);
border-color: rgba(232,90,71,0.18);
}
.ds-pack-odds__row {
display: flex; justify-content: space-between; align-items: center;
gap: 8px;
}
.ds-pack-odds__row--meta {
font-size: var(--fs-caption);
color: var(--fg-muted);
}
/* Rarity chip — 카도 등급 색 그대로 (DS 토큰) */
.ds-pack-odds__chip {
display: inline-flex; align-items: center;
font-size: 10px; font-weight: var(--fw-bk);
letter-spacing: 0.06em;
padding: 3px 7px;
border-radius: 4px;
text-transform: uppercase;
font-feature-settings: 'tnum' 1;
}
.ds-pack-odds__chip--mystic { background: var(--gray-950); color: var(--gray-0); }
.ds-pack-odds__chip--legend { background: var(--legendary-500); color: var(--legendary-900); }
.ds-pack-odds__chip--epic { background: var(--epic-500); color: #FFF; }
.ds-pack-odds__chip--rare { background: var(--rare-500); color: #FFF; }
.ds-pack-odds__chip--common { background: var(--common-500); color: #FFF; }
:root[data-theme="dark"] .ds-pack-odds__chip--mystic { background: var(--gray-50); color: var(--gray-950); }
/* 큰 % 숫자 — 결제 매력도 핵심 신호 */
.ds-pack-odds__pct {
font-size: 18px; font-weight: var(--fw-bk);
color: var(--fg-base);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
letter-spacing: -0.02em;
line-height: 1;
}
.ds-pack-odds__pct-unit {
font-size: 12px; font-weight: var(--fw-md);
color: var(--fg-muted);
margin-left: 1px;
}
/* 잔여 카운트 */
.ds-pack-odds__count {
display: inline-flex; align-items: baseline;
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.ds-pack-odds__count strong {
font-weight: var(--fw-bk);
color: var(--fg-base);
}
.ds-pack-odds__slash {
color: var(--fg-faint);
font-weight: var(--fw-rg);
margin: 0 2px;
}
/* 마감 임박 — 잔여율 < 30%일 때만 노출 */
.ds-pack-odds__warn {
display: inline-flex; align-items: center;
font-size: 10px; font-weight: var(--fw-bk);
letter-spacing: 0.04em;
padding: 2px 6px;
border-radius: 3px;
background: var(--danger-500);
color: #FFF;
text-transform: uppercase;
}
/* 잔여 게이지 — 시세 sparkline 대체재 */
.ds-pack-odds__gauge {
width: 100%; height: 4px;
background: var(--gray-200);
border-radius: 2px;
overflow: hidden;
}
:root[data-theme="dark"] .ds-pack-odds__gauge { background: var(--gray-800); }
.ds-pack-odds__gauge-fill {
height: 100%;
background: var(--fg-base);
border-radius: 2px;
transition: width 0.4s ease;
}
.ds-pack-odds__item.is-low .ds-pack-odds__gauge-fill {
background: var(--danger-500);
}
/* 가격 옵션 — 2 cards toggleable */
.ds-pack-pricing {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
@media (max-width: 599px) { .ds-pack-pricing { grid-template-columns: 1fr; } }
.ds-pack-pricing__card {
position: relative;
display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
padding: 16px 18px;
background: var(--bg-card);
border: 1.5px solid var(--border-base);
border-radius: 12px;
cursor: pointer;
text-align: left;
transition: var(--t-fast) ease-out;
}
.ds-pack-pricing__card:hover { border-color: var(--gray-500); }
.ds-pack-pricing__card[aria-checked="true"] {
border-color: var(--gray-950);
background: var(--bg-subtle);
box-shadow: 0 0 0 1px var(--gray-950) inset;
}
:root[data-theme="dark"] .ds-pack-pricing__card[aria-checked="true"] {
border-color: var(--gray-50);
box-shadow: 0 0 0 1px var(--gray-50) inset;
}
/* 선택 indicator dot */
.ds-pack-pricing__card::before {
content: '';
position: absolute; top: 14px; right: 14px;
width: 16px; height: 16px;
border-radius: 50%;
border: 1.5px solid var(--border-strong);
background: var(--bg-card);
transition: var(--t-fast) ease-out;
}
.ds-pack-pricing__card[aria-checked="true"]::before {
border-color: var(--gray-950);
background: var(--gray-950);
box-shadow: inset 0 0 0 3px var(--bg-card);
}
:root[data-theme="dark"] .ds-pack-pricing__card[aria-checked="true"]::before {
border-color: var(--gray-50); background: var(--gray-50);
box-shadow: inset 0 0 0 3px var(--bg-card);
}
.ds-pack-pricing__badge {
display: inline-flex; align-items: center;
height: 20px; padding: 0 8px;
border-radius: var(--r-pill);
font-size: 10px; font-weight: var(--fw-bk);
letter-spacing: 0.04em;
background: var(--gray-950); color: var(--gray-0);
margin-bottom: 2px;
}
.ds-pack-pricing__label {
font-size: var(--fs-caption); color: var(--fg-muted);
font-weight: var(--fw-md); letter-spacing: -0.005em;
}
.ds-pack-pricing__amount {
font-size: 22px; font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
letter-spacing: -0.016em; line-height: 1;
color: var(--fg-base);
}
.ds-pack-pricing__amount small {
font-size: var(--fs-caption); font-weight: var(--fw-rg);
color: var(--fg-muted); margin-left: 2px;
}
.ds-pack-pricing__hint {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
margin-top: 2px;
font-variant-numeric: tabular-nums;
}
/* Identity — 단가 (1팩 가격, BIG) */
.ds-pack-unit-price {
display: flex; align-items: baseline; gap: 6px;
margin-top: 4px;
}
.ds-pack-unit-price__amount {
font-size: 38px; font-weight: var(--fw-bd); /* v0.5: bk 700 → bd 600 */
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
letter-spacing: -0.024em; line-height: 1;
color: var(--fg-base);
}
.ds-pack-unit-price__suffix {
font-size: var(--fs-body-sm); color: var(--fg-muted);
font-weight: var(--fw-rg); /* v0.5: md 500 → rg 400 (unit rule) */
}
/* Identity — 발매 한정 수량 박스 (filled) */
.ds-pack-stock-box {
background: var(--bg-subtle);
border-radius: 12px;
padding: 18px 20px;
display: flex; flex-direction: column; gap: 14px;
}
/* limited/brand 분기 wrapper도 flex column gap 상속하도록 */
.ds-pack-stock-box > [data-pack-show="limited"],
.ds-pack-stock-box > [data-pack-show="brand"] {
display: flex;
flex-direction: column;
gap: 14px;
}
.ds-pack-stock-box > [data-pack-show="limited"][style*="display: none"],
.ds-pack-stock-box > [data-pack-show="brand"][style*="display: none"] {
display: none;
}
/* brand pack 전용 — 무한공급 안내 */
.ds-pack-stock-box__brand-note {
margin: 8px 0 0;
font-size: var(--fs-caption);
color: var(--fg-muted);
line-height: 1.5;
letter-spacing: -0.005em;
}
.ds-pack-stock-box__brand-note strong {
color: var(--fg-base);
font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums;
}
.ds-pack-stock-box__row {
display: flex; justify-content: space-between; align-items: baseline;
gap: 12px;
}
.ds-pack-stock-box__label,
.ds-pack-stock-box__sublabel {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
font-weight: var(--fw-md); letter-spacing: 0.02em;
}
.ds-pack-stock-box__count {
font-size: var(--fs-body-sm); color: var(--fg-base);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
font-weight: var(--fw-md);
}
.ds-pack-stock-box__count strong {
font-size: var(--fs-body-md); font-weight: var(--fw-bk);
letter-spacing: -0.008em;
margin-right: 2px;
}
.ds-pack-stock-box__bar {
height: 8px;
background: var(--gray-a200);
border-radius: var(--r-pill);
overflow: hidden;
margin: 2px 0;
}
:root[data-theme="dark"] .ds-pack-stock-box__bar { background: var(--white-a200); }
.ds-pack-stock-box__fill {
height: 100%;
background: var(--gray-700);
border-radius: inherit;
transition: width var(--t-base) var(--ease-std);
}
.ds-pack-stock-box__fill--low { background: var(--danger-500); }
.ds-pack-stock-box__substate {
font-size: var(--fs-caption); color: var(--fg-subtle);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
font-weight: var(--fw-md);
}
.ds-pack-stock-box__substate strong {
color: var(--fg-base); font-weight: var(--fw-bk);
}
.ds-pack-stock-box__substate em {
color: var(--danger-600); font-weight: var(--fw-bk); font-style: normal;
margin-left: 2px;
}
.ds-pack-stock-box.is-live-loading .ds-pack-stock-box__count,
.ds-pack-stock-box.is-live-loading .ds-pack-stock-box__substate,
.ds-pack-stock-box.is-live-loading .ds-pack-stock-box__brand-note {
color: transparent !important;
border-radius: var(--r-pill);
background: linear-gradient(90deg, var(--bg-subtle) 0%, var(--bg-muted, var(--gray-100)) 48%, var(--bg-subtle) 100%);
background-size: 200% 100%;
animation: ds-skeleton-shimmer 1.4s ease-in-out infinite;
}
.ds-pack-stock-box.is-live-loading .ds-pack-stock-box__count *,
.ds-pack-stock-box.is-live-loading .ds-pack-stock-box__substate *,
.ds-pack-stock-box.is-live-loading .ds-pack-stock-box__brand-note * {
color: transparent !important;
}
.ds-pack-stock-box.is-live-loading .ds-pack-stock-box__count { min-width: 132px; min-height: 18px; }
.ds-pack-stock-box.is-live-loading .ds-pack-stock-box__substate { min-width: 96px; min-height: 14px; }
.ds-pack-stock-box.is-live-loading .ds-pack-stock-box__brand-note {
display: block;
width: min(420px, 100%);
min-height: 18px;
}
.ds-pack-stock-box.is-live-loading .ds-pack-stock-box__bar {
background: linear-gradient(90deg, var(--bg-subtle) 0%, var(--bg-muted, var(--gray-100)) 48%, var(--bg-subtle) 100%);
background-size: 200% 100%;
animation: ds-skeleton-shimmer 1.4s ease-in-out infinite;
}
.ds-pack-stock-box.is-live-loading .ds-pack-stock-box__fill { opacity: 0; }
/* Action — info row (수량 + stepper) */
.ds-pack-row {
display: flex; justify-content: space-between; align-items: center;
gap: 16px;
}
.ds-pack-row__label {
font-size: var(--fs-body-sm); color: var(--fg-subtle);
font-weight: var(--fw-md);
}
/* Action — 결제 금액 (일반 row, 배경 없음) */
.ds-pack-total {
display: flex; justify-content: space-between; align-items: baseline;
padding-top: 12px;
border-top: 1px solid var(--border-base);
}
.ds-pack-total__label {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
font-weight: var(--fw-md); letter-spacing: 0.05em;
text-transform: uppercase;
}
.ds-pack-total__amount {
font-size: 28px; font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
letter-spacing: -0.018em; line-height: 1;
color: var(--fg-base);
}
.ds-pack-total__amount small {
font-size: var(--fs-body-sm); color: var(--fg-muted);
font-weight: var(--fw-md); margin-left: 2px;
}
/* Action — ♥ + Share + CTA row */
/* ds-pack-actions — 폐기 (CTA stack으로 교체) */
.ds-pack-actions { display: none; }
/* ============ Pack config row (category) ============ */
.ds-pack-config-row {
display: none; align-items: center; justify-content: space-between;
gap: 12px;
padding: 10px 0;
}
body[data-pack-type="brand"] .ds-pack-config-row { display: flex; }
.ds-pack-config-row__label {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
font-weight: var(--fw-bd);
text-transform: uppercase; letter-spacing: 0.06em;
}
.ds-pack-category { position: relative; }
.ds-pack-category__btn {
display: inline-flex; align-items: center; gap: 6px;
height: 36px; padding: 0 14px;
background: var(--bg-card); color: var(--fg-base);
border: 1px solid var(--border-base);
border-radius: 8px;
font-size: var(--fs-body-sm); font-weight: var(--fw-md);
cursor: pointer; font: inherit;
transition: var(--t-fast) ease-out;
}
.ds-pack-category__btn:hover { border-color: var(--gray-700); }
.ds-pack-category__btn[aria-expanded="true"] { border-color: var(--gray-950); }
.ds-pack-category__btn .mi { font-size: 18px; }
.ds-pack-category__menu {
position: absolute; right: 0; top: calc(100% + 4px);
min-width: 180px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 8px;
box-shadow: var(--shadow-3);
list-style: none; margin: 0; padding: 4px;
z-index: 30;
display: none;
}
.ds-pack-category__menu.is-open { display: block; }
.ds-pack-category__menu li {
padding: 8px 12px;
font-size: var(--fs-body-sm);
border-radius: 6px;
cursor: pointer;
transition: background var(--t-fast);
}
.ds-pack-category__menu li:hover { background: var(--bg-subtle); }
.ds-pack-category__menu li[aria-selected="true"] {
background: var(--gray-950); color: var(--gray-0);
}
.ds-pack-category__menu-disabled,
.ds-pack-category__menu li[aria-disabled="true"] {
color: var(--fg-faint); cursor: not-allowed;
}
.ds-pack-category__menu-disabled small,
.ds-pack-category__menu li[aria-disabled="true"] small {
font-size: var(--fs-caption-sm); color: var(--fg-faint);
font-weight: var(--fw-rg);
}
.ds-pack-category__menu li[aria-disabled="true"]:hover { background: transparent; }
/* ============ Pack tier selector (5 cards) ============ */
.ds-pack-tier { display: none; flex-direction: column; gap: 8px; }
body[data-pack-type="brand"] .ds-pack-tier { display: flex; }
.ds-pack-tier__title {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
font-weight: var(--fw-bd);
text-transform: uppercase; letter-spacing: 0.06em;
}
.ds-pack-tier__grid {
display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px;
min-width: 0;
}
.ds-pack-tier__card {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 10px 6px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 10px;
cursor: pointer; font: inherit;
transition: var(--t-fast) ease-out;
text-align: center;
min-width: 0;
}
.ds-pack-tier__card:hover { border-color: var(--gray-700); }
.ds-pack-tier__card[aria-checked="true"] {
border-color: var(--gray-950); background: var(--bg-subtle);
}
.ds-pack-tier__card[aria-checked="true"] .ds-pack-tier__name { color: var(--fg-base); font-weight: var(--fw-bk); }
.ds-pack-tier__card[data-soldout="true"] {
opacity: 0.55;
position: relative;
}
.ds-pack-tier__card[data-soldout="true"][aria-checked="true"] { opacity: 0.85; }
.ds-pack-tier__card[data-soldout="true"]:hover { opacity: 0.7; }
.ds-pack-tier__soldout-pill {
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);
font-size: 9px;
font-weight: var(--fw-bk);
letter-spacing: 0.04em;
padding: 2px 4px;
background: var(--gray-950);
color: var(--gray-0);
border-radius: 3px;
text-transform: uppercase;
line-height: 1.3;
white-space: nowrap;
z-index: 2;
}
/* v0.8: 등급 dot — 단색 원 → 실제 팩 이미지 (등급별 + 브랜드별 dynamic via JS) */
.ds-pack-tier__dot {
width: 56px; aspect-ratio: 5 / 7;
margin-bottom: 4px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
border-radius: 4px;
}
/* 기본 = pokemon (data-active-brand가 변경되면 JS가 background-image 갱신) */
.ds-pack-tier__dot[data-kado-grade="common"] { background-image: url('/kado-design/assets/packs/pokemon-common.webp'); }
.ds-pack-tier__dot[data-kado-grade="rare"] { background-image: url('/kado-design/assets/packs/pokemon-rare.webp'); }
.ds-pack-tier__dot[data-kado-grade="epic"] { background-image: url('/kado-design/assets/packs/pokemon-epic.webp'); }
.ds-pack-tier__dot[data-kado-grade="legend"] { background-image: url('/kado-design/assets/packs/pokemon-legendary.webp'); }
.ds-pack-tier__dot[data-kado-grade="mystic"] { background-image: url('/kado-design/assets/packs/pokemon-mystic.webp'); }
/* onepiece 브랜드 활성 시 */
[data-pack-brand="onepiece"] .ds-pack-tier__dot[data-kado-grade="common"] { background-image: url('/kado-design/assets/packs/onepiece-common.webp'); }
[data-pack-brand="onepiece"] .ds-pack-tier__dot[data-kado-grade="rare"] { background-image: url('/kado-design/assets/packs/onepiece-rare.webp'); }
[data-pack-brand="onepiece"] .ds-pack-tier__dot[data-kado-grade="epic"] { background-image: url('/kado-design/assets/packs/onepiece-epic.webp'); }
[data-pack-brand="onepiece"] .ds-pack-tier__dot[data-kado-grade="legend"] { background-image: url('/kado-design/assets/packs/onepiece-legendary.webp'); }
[data-pack-brand="onepiece"] .ds-pack-tier__dot[data-kado-grade="mystic"] { background-image: url('/kado-design/assets/packs/onepiece-mystic.webp'); }
/* ABS-03: limited 팩은 비닐봉다리 컨셉이 아니므로 tier dot 비주얼 숨김 (이름 + 가격만 노출) */
body[data-pack-type="limited"] .ds-pack-tier__dot { display: none !important; }
.ds-pack-tier__name {
font-size: var(--fs-caption-md); font-weight: var(--fw-bd);
color: var(--fg-subtle);
letter-spacing: -0.005em;
}
.ds-pack-tier__price {
font-size: var(--fs-caption-sm); font-weight: var(--fw-bd);
color: var(--fg-base);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
letter-spacing: -0.005em;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.ds-pack-tier__price small { font-size: 10px; color: var(--fg-muted); font-weight: var(--fw-rg); margin-left: 1px; }
.ds-pack-tier.is-live-loading .ds-pack-tier__price,
.ds-pack-tier.is-live-loading .ds-pack-tier__price small {
visibility: hidden;
}
.ds-pack-cta:disabled,
.ds-pack-cta[disabled] {
background: var(--gray-200);
color: var(--fg-muted);
cursor: not-allowed;
box-shadow: none;
opacity: 1;
}
.ds-pack-cta:disabled:hover,
.ds-pack-cta[disabled]:hover {
background: var(--gray-200);
}
/* ============ Buy confirm — 결제수단 변경 ============ */
.ds-buy-confirm__pay-row {
display: flex; justify-content: space-between; align-items: center;
padding: 8px 0;
}
.ds-buy-confirm__pay-row dt {
font-size: var(--fs-caption); color: var(--fg-muted);
font-weight: var(--fw-md);
}
.ds-buy-confirm__pay-row dd {
display: inline-flex; align-items: center; gap: 8px;
font-size: var(--fs-body-sm); font-weight: var(--fw-bd);
color: var(--fg-base);
margin: 0;
}
.ds-buy-confirm__pay-change {
background: transparent;
border: 1px solid var(--border-base);
border-radius: var(--r-pill);
padding: 3px 10px;
font-size: var(--fs-caption-sm); font-weight: var(--fw-md);
color: var(--fg-subtle); font: inherit;
cursor: pointer;
transition: var(--t-fast) ease-out;
}
.ds-buy-confirm__pay-change:hover { border-color: var(--gray-950); color: var(--fg-base); }
.ds-buy-confirm__pay-change[aria-expanded="true"] {
background: var(--gray-950); color: var(--gray-0); border-color: var(--gray-950);
}
.ds-buy-confirm__pay-options {
display: flex; flex-direction: column; gap: 6px;
padding: 10px;
margin: 4px 0 12px;
background: var(--bg-subtle);
border-radius: 10px;
border: 1px solid var(--border-subtle);
}
.ds-buy-confirm__pay-options[hidden] { display: none; }
.ds-buy-confirm__pay-opt {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 8px;
cursor: pointer;
transition: border-color var(--t-fast) ease-out;
text-align: left;
}
.ds-buy-confirm__pay-opt:hover { border-color: var(--gray-700); }
.ds-buy-confirm__pay-opt:has(input:checked) {
border-color: var(--gray-950); background: var(--bg-base);
}
.ds-buy-confirm__pay-opt input[type="radio"] { accent-color: var(--gray-950); flex-shrink: 0; }
.ds-buy-confirm__pay-opt-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ds-buy-confirm__pay-opt-name {
font-size: var(--fs-body-sm); font-weight: var(--fw-bd);
color: var(--fg-base);
}
.ds-buy-confirm__pay-opt-meta {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
font-variant-numeric: tabular-nums;
}
@media (max-width: 599px) {
.ds-pack-tier__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.ds-pack-tier__card { padding: 8px 4px; }
.ds-pack-tier__dot { width: 42px; }
.ds-pack-tier__name { font-size: 11px; }
.ds-pack-tier__price { font-size: 10px; }
}
/* 헤드라인 row — 좌측 이름/서브, 우측 아이콘 액션 */
.ds-pack-headline__row {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px;
min-width: 0;
}
.ds-pack-headline__row > div:first-child { min-width: 0; }
.ds-pack-headline__icons {
display: flex; gap: 8px; flex-shrink: 0;
}
/* Icon button — 헤더 영역에 작게 */
.ds-pack-icon-btn {
width: 40px; height: 40px;
display: grid; place-items: center;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 50%;
cursor: pointer;
transition: border-color var(--t-fast) ease-out, background var(--t-fast) ease-out;
}
.ds-pack-icon-btn:hover { border-color: var(--gray-950); background: var(--bg-subtle); }
.ds-pack-icon-btn .mi {
font-size: 18px; color: var(--fg-base);
font-variation-settings: 'FILL' 0, 'wght' 400;
}
.ds-pack-icon-btn[aria-pressed="true"] .mi {
color: var(--danger-500);
font-variation-settings: 'FILL' 1, 'wght' 600;
}
/* v0.7 W4: like 버튼에 카운트 chip 보조 표시 */
.ds-pack-icon-btn { position: relative; }
.ds-pack-icon-btn__count {
display: inline-block;
margin-left: 4px;
font-size: var(--fs-caption);
font-weight: var(--fw-bd);
color: var(--fg-muted);
font-variant-numeric: tabular-nums;
}
.ds-pack-icon-btn:has(.ds-pack-icon-btn__count) {
width: auto;
min-width: 40px;
border-radius: var(--r-pill);
padding: 0 12px;
gap: 4px;
display: inline-flex; align-items: center; justify-content: center;
}
.ds-pack-icon-btn.is-liked .ds-pack-icon-btn__count { color: var(--danger-500); }
/* Buy confirm modal — 잔액 충분 시 1-tap 가챠 */
.ds-modal__panel--confirm {
width: 100%; max-width: 420px;
padding: 28px 24px 20px;
text-align: center;
}
.ds-buy-confirm {
margin: 20px 0 0;
padding: 16px 18px;
background: var(--bg-subtle);
border-radius: 12px;
text-align: left;
}
.ds-buy-confirm > div {
display: flex; justify-content: space-between; align-items: baseline;
padding: 6px 0;
font-size: var(--fs-body-sm);
}
.ds-buy-confirm dt { margin: 0; color: var(--fg-muted); font-weight: var(--fw-md); }
.ds-buy-confirm dd { margin: 0; font-weight: var(--fw-bd); font-variant-numeric: tabular-nums; color: var(--fg-base); }
.ds-buy-confirm dd.is-emp {
font-size: 18px; font-weight: var(--fw-bk); letter-spacing: -0.005em;
}
.ds-buy-confirm__divider {
height: 1px; padding: 0 !important;
background: var(--border-base);
margin: 6px 0;
}
/* CTA stack — 메인 버튼 + 우회 링크 (세로 배치) */
.ds-pack-cta-stack {
display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.ds-pack-cta-stack .ds-pack-cta { width: 100%; }
.ds-pack-cta__alt {
display: inline-flex; align-items: center; gap: 4px;
font-size: var(--fs-caption);
color: var(--fg-muted);
font-weight: var(--fw-md);
text-decoration: none;
transition: color var(--t-fast) ease-out;
}
.ds-pack-cta__alt:hover { color: var(--fg-base); }
.ds-pack-cta__alt .mi { font-size: 14px; }
.ds-pack-cta {
width: 100%;
height: 52px !important;
font-size: var(--fs-body-md) !important;
font-weight: var(--fw-bk) !important;
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
}
/* Note */
.ds-info-card__cta-note {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
text-align: center; line-height: 1.5;
margin: 0;
}
.ds-pack-pool-more {
display: flex;
justify-content: center;
margin-top: 18px;
}
/* ==========================================================
Modal — 즐겨찾기 / 공유
========================================================== */
.ds-modal {
position: fixed; inset: 0;
background: rgba(0,0,0,0.5);
display: none;
align-items: center; justify-content: center;
z-index: 1000;
padding: 24px;
animation: ds-modal-fade var(--t-base) var(--ease-std);
}
.ds-modal.is-open { display: flex; }
body.is-modal-open { overflow: hidden; }
@keyframes ds-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.ds-modal__panel {
background: var(--bg-card);
border-radius: 16px;
padding: 24px;
max-width: 420px; width: 100%;
max-height: 90vh; overflow-y: auto;
box-shadow: 0 16px 48px rgba(15,17,22,0.24);
position: relative;
}
.ds-modal__head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 20px;
}
.ds-modal__title {
font-size: var(--fs-h4); font-weight: var(--fw-bk);
letter-spacing: -0.012em;
margin: 0;
}
.ds-modal__sub {
font-size: var(--fs-body-sm); color: var(--fg-subtle);
margin: 8px 0 20px;
line-height: 1.55;
}
.ds-modal__sub strong { color: var(--fg-base); font-weight: var(--fw-bd); }
/* v0.7: 충전 모달 — 1 P = 1 원 환율 명시 (정보 위계: 가장 중요) */
.ds-modal__rate {
display: flex; align-items: center; gap: 8px;
margin: 12px 0 6px;
padding: 10px 14px;
background: var(--mystic-50, #eef9f1);
border: 1px solid var(--mystic-200, #b9e6c9);
border-radius: 10px;
font-size: var(--fs-body-sm);
color: var(--fg-base);
line-height: 1.4;
}
.ds-modal__rate strong {
font-weight: var(--fw-bk);
color: var(--mystic-700, #2c7a4b);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
:root[data-theme="dark"] .ds-modal__rate {
background: rgba(56, 161, 105, 0.12);
border-color: rgba(56, 161, 105, 0.3);
}
:root[data-theme="dark"] .ds-modal__rate strong { color: var(--mystic-300, #6cd49a); }
.ds-modal__close {
width: 32px; height: 32px;
display: grid; place-items: center;
background: transparent; border: none;
border-radius: 50%;
cursor: pointer;
color: var(--fg-muted);
transition: var(--t-fast) ease-out;
position: absolute; top: 14px; right: 14px;
}
.ds-modal__close:hover { background: var(--bg-subtle); color: var(--fg-base); }
.ds-modal__close .mi { font-size: 20px; }
.ds-modal__icon {
width: 56px; height: 56px;
display: grid; place-items: center;
border-radius: 50%;
margin-bottom: 16px;
}
.ds-modal__icon--fav { background: rgba(232,90,71,0.1); }
.ds-modal__icon--fav .mi {
font-size: 28px; color: var(--danger-500);
font-variation-settings: 'FILL' 1;
}
.ds-modal__actions {
display: flex; gap: 8px;
margin-top: 16px;
/* 모달 콘텐츠가 max-height(90vh) 넘으면 panel이 스크롤되더라도 CTA는 항상 보이도록 sticky */
position: sticky;
bottom: -24px;
margin-left: -24px;
margin-right: -24px;
margin-bottom: -24px;
padding: 16px 24px;
background: var(--bg-card);
border-top: 1px solid var(--border-base);
}
.ds-modal__actions .ds-btn {
flex: 1; text-align: center;
min-height: 44px; /* 사이즈 modifier 미지정 시에도 찌부 방지 */
padding: 0 16px; /* 사이즈 modifier 없을 때 좌우 패딩 보장 */
font-size: var(--fs-body-sm);
}
.ds-modal__panel--pack-odds {
max-width: 720px;
max-height: calc(100dvh - 88px);
display: flex;
flex-direction: column;
overflow: hidden;
padding: 24px;
}
.ds-pack-odds-modal__head {
flex: 0 0 auto;
align-items: flex-start;
margin-bottom: 14px;
padding-right: 36px;
}
.ds-pack-odds-modal__sub {
margin: 6px 0 0;
color: var(--fg-muted);
font-size: var(--fs-body-sm);
line-height: 1.5;
letter-spacing: 0;
}
.ds-pack-odds-modal__summary {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
padding: 12px 14px;
border: 1px solid var(--border-base);
border-radius: 10px;
background: var(--bg-subtle);
color: var(--fg-subtle);
font-size: var(--fs-body-sm);
font-weight: var(--fw-bd);
font-variant-numeric: tabular-nums;
line-height: 1.4;
}
.ds-pack-odds-modal__list {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
gap: 12px;
overflow-y: auto;
padding-right: 6px;
margin-right: -6px;
overscroll-behavior: contain;
scrollbar-width: none;
scrollbar-color: transparent transparent;
}
.ds-pack-odds-modal__list::-webkit-scrollbar {
width: 0;
height: 0;
}
.ds-pack-odds-modal__list.is-scrolling {
scrollbar-width: thin;
scrollbar-color: var(--gray-300) transparent;
}
.ds-pack-odds-modal__list.is-scrolling::-webkit-scrollbar {
width: 6px;
}
.ds-pack-odds-modal__list.is-scrolling::-webkit-scrollbar-track {
background: transparent;
}
.ds-pack-odds-modal__list.is-scrolling::-webkit-scrollbar-thumb {
background: var(--gray-300);
border-radius: var(--r-pill);
}
.ds-pack-odds-grade {
flex: 0 0 auto;
border: 1px solid var(--border-base);
border-radius: 12px;
overflow: hidden;
background: var(--bg-card);
}
.ds-pack-odds-grade__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
border-bottom: 1px solid var(--border-base);
background: var(--bg-subtle);
}
.ds-pack-odds-grade__label {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
color: var(--fg-base);
}
.ds-pack-odds-grade__label strong {
font-size: var(--fs-body-sm);
font-weight: var(--fw-bk);
letter-spacing: -0.005em;
}
.ds-pack-odds-grade__label span:last-child {
color: var(--fg-muted);
font-size: var(--fs-caption);
font-weight: var(--fw-md);
font-variant-numeric: tabular-nums;
}
.ds-pack-odds-grade__prob {
color: var(--fg-base);
font-size: var(--fs-body-sm);
font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.ds-pack-odds-grade__cards {
list-style: none;
margin: 0;
padding: 0;
}
.ds-pack-odds-card {
display: grid;
grid-template-columns: 52px minmax(0, 1fr) minmax(64px, auto);
align-items: center;
gap: 12px;
padding: 10px 14px;
border-top: 1px solid var(--border-subtle);
}
.ds-pack-odds-card:first-child { border-top: none; }
.ds-pack-odds-card__thumb {
width: 52px;
height: 52px;
border-radius: 8px;
background-color: var(--gray-100);
background-size: auto 88%;
background-repeat: no-repeat;
background-position: center;
overflow: hidden;
position: relative;
flex-shrink: 0;
}
.ds-pack-odds-card__body {
display: flex;
min-width: 0;
flex-direction: column;
gap: 3px;
}
.ds-pack-odds-card__meta {
color: var(--fg-muted);
font-size: var(--fs-caption);
line-height: 1.35;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ds-pack-odds-card__name {
color: var(--fg-base);
font-size: var(--fs-body-sm);
font-weight: var(--fw-bd);
line-height: 1.35;
letter-spacing: -0.005em;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.ds-pack-odds-card__chance {
justify-self: end;
color: var(--fg-base);
font-size: var(--fs-body-sm);
font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.ds-pack-odds-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 44px 20px;
border: 1px dashed var(--border-base);
border-radius: 12px;
background: var(--bg-subtle);
text-align: center;
}
.ds-pack-odds-empty .mi {
color: var(--fg-muted);
font-size: 28px;
}
.ds-pack-odds-empty strong {
color: var(--fg-base);
font-size: var(--fs-body-md);
}
.ds-pack-odds-empty p {
margin: 0;
color: var(--fg-muted);
font-size: var(--fs-caption);
line-height: 1.5;
}
@media (max-width: 599px) {
.ds-modal__panel--pack-odds {
max-width: none;
max-height: calc(100dvh - 72px);
width: 100%;
padding: 20px 16px;
border-radius: 18px 18px 0 0;
}
#packOddsModal {
align-items: flex-end;
padding: 0;
}
.ds-pack-odds-card {
grid-template-columns: 46px minmax(0, 1fr) minmax(44px, auto);
gap: 10px;
padding: 10px 12px;
}
.ds-pack-odds-card__thumb {
width: 46px;
height: 46px;
}
.ds-pack-odds-card__chance {
grid-column: auto;
justify-self: end;
font-size: var(--fs-caption);
}
}
.ds-dialog-modal {
background: rgba(17, 19, 24, 0.46);
backdrop-filter: blur(2px);
z-index: 1300;
}
.ds-dialog-modal__panel {
max-width: 430px;
border: 1px solid var(--border-base);
box-shadow: 0 18px 54px rgba(15, 17, 22, 0.22);
}
.ds-dialog-modal__head {
margin-bottom: 12px;
padding-right: 28px;
}
.ds-dialog-modal__title {
letter-spacing: 0;
}
.ds-dialog-modal__message {
margin: 0 0 16px;
white-space: pre-line;
}
.ds-dialog-modal__field {
margin: 0 0 16px;
}
.ds-dialog-modal__input {
width: 100%;
min-height: 44px;
padding: 10px 12px;
border: 1px solid var(--border-base);
border-radius: 8px;
background: var(--bg-base);
color: var(--fg-base);
font: inherit;
font-size: var(--fs-body-sm);
line-height: 1.5;
letter-spacing: 0;
}
textarea.ds-dialog-modal__input {
min-height: 112px;
resize: vertical;
}
.ds-dialog-modal__input:focus {
outline: 2px solid rgba(30, 115, 190, 0.22);
border-color: var(--mystic-500, #2f8f62);
}
.ds-dialog-modal__actions .ds-btn--danger {
background: var(--danger-500, #e85a47);
border-color: var(--danger-500, #e85a47);
color: #fff;
}
.ds-dialog-modal__actions .ds-btn--danger:hover {
background: var(--danger-600, #cf4938);
border-color: var(--danger-600, #cf4938);
}
@media (max-width: 599px) {
.ds-dialog-modal {
align-items: flex-end;
padding: 12px;
}
.ds-dialog-modal__panel {
max-width: none;
max-height: min(86dvh, 720px);
border-radius: 18px 18px 12px 12px;
}
}
/* Share grid — 채널 카드 */
.ds-share-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.ds-share-channel {
display: flex; flex-direction: column; align-items: center;
gap: 8px;
padding: 14px 8px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 12px;
cursor: pointer;
transition: var(--t-fast) ease-out;
}
.ds-share-channel:hover {
border-color: var(--gray-950);
transform: translateY(-1px);
}
.ds-share-channel__icon {
width: 40px; height: 40px;
border-radius: 50%;
display: grid; place-items: center;
color: white;
}
.ds-share-channel__icon .mi { font-size: 18px; color: inherit; }
.ds-share-channel__icon[data-bg="x"] { background: #000; color: #fff; }
.ds-share-channel__icon[data-bg="instagram"] {
background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
color: #fff;
}
.ds-share-channel__icon[data-bg="kakao"] { background: #FEE500; color: #181600; }
.ds-share-channel__icon[data-bg="sms"] { background: #34C759; color: #fff; }
.ds-share-channel__icon[data-bg="copy"] { background: var(--gray-200); color: var(--gray-800); }
.ds-share-channel__label {
font-size: var(--fs-caption-sm); color: var(--fg-base);
font-weight: var(--fw-md);
letter-spacing: -0.005em;
}
/* Share URL row */
.ds-share-url {
display: flex;
align-items: center;
gap: 8px;
margin-top: 16px;
padding: 10px 12px;
background: var(--bg-subtle);
border-radius: 10px;
}
.ds-share-url__text {
flex: 1;
font-size: var(--fs-caption); color: var(--fg-subtle);
font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-share-url__copy {
font-size: var(--fs-caption-sm); color: var(--fg-base);
font-weight: var(--fw-bd);
padding: 5px 12px;
background: var(--bg-card);
border: 1px solid var(--border-strong);
border-radius: var(--r-pill);
cursor: pointer;
transition: var(--t-fast) ease-out;
}
.ds-share-url__copy:hover { border-color: var(--gray-950); }
.ds-share-url__copy.is-copied { background: var(--gray-50); border-color: var(--gray-700); color: var(--gray-400); }
/* ==========================================================
Offer Modal — 가격 제안 (확장: .ds-modal 위에 얹는 내부 요소)
v3.1: 메시지 X, 만료 1/3/7/30, 카운터 X, 수수료 X
========================================================== */
.ds-offer-notice[hidden],
.ds-offer-cancel-link[hidden] { display: none !important; }
.ds-offer-notice {
display: flex; gap: 8px; align-items: flex-start;
padding: 10px 12px;
background: var(--bg-subtle);
border: 1px solid var(--border-base);
border-radius: 10px;
font-size: var(--fs-body-xs);
color: var(--fg-subtle);
line-height: 1.5;
margin-bottom: 16px;
}
.ds-offer-notice .mi { font-size: 16px; color: var(--fg-muted); flex-shrink: 0; }
.ds-offer-notice strong { color: var(--fg-base); font-weight: var(--fw-bd); }
.ds-offer-notice--info { background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.25); color: var(--common-700, #1d4ed8); }
.ds-offer-notice--info .mi { color: var(--common-500, #3B82F6); }
.ds-offer-notice--info strong { color: var(--common-700, #1d4ed8); }
.ds-offer-notice--login {
background: color-mix(in srgb, var(--fg-base) 5%, var(--bg-card));
border-color: var(--border-base);
color: var(--fg-base);
}
.ds-offer-notice--login .mi { color: var(--fg-base); }
.ds-modal[data-login-required="true"] .ds-offer-field {
opacity: 0.48;
}
.ds-modal[data-login-required="true"] .ds-offer-preset,
.ds-modal[data-login-required="true"] .ds-offer-expiry__pill {
cursor: not-allowed;
}
#offerModal .ds-modal__panel {
padding-bottom: 0;
}
.ds-offer-modal__footer {
position: sticky;
bottom: 0;
z-index: 2;
margin: 16px -24px 0;
padding: 16px 24px max(18px, env(safe-area-inset-bottom));
background: var(--bg-card);
border-top: 1px solid var(--border-base);
border-radius: 0 0 16px 16px;
}
.ds-offer-modal__footer .ds-modal__actions {
position: static;
bottom: auto;
margin: 0;
padding: 0;
background: transparent;
border-top: 0;
}
/* Merged card preview + price (이미지 + 메타 + 가격을 한 카드뷰로) */
.ds-offer-cardview {
display: flex; gap: 14px;
padding: 14px;
background: var(--bg-subtle);
border: 1px solid var(--border-subtle);
border-radius: 12px;
margin-bottom: 16px;
}
.ds-offer-cardview__image {
width: 84px; aspect-ratio: 5 / 7;
flex-shrink: 0;
border-radius: 8px; overflow: hidden;
background: var(--bg-muted);
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.ds-offer-cardview__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-offer-cardview__info {
flex: 1; min-width: 0;
display: flex; flex-direction: column;
gap: 4px;
}
.ds-offer-cardview__name {
font-size: var(--fs-body-xs); font-weight: var(--fw-bd);
line-height: 1.35; margin: 0; color: var(--fg-base);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ds-offer-cardview__meta {
display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
font-size: var(--fs-caption-sm); color: var(--fg-muted);
}
.ds-offer-cardview__divider {
height: 1px; background: var(--border-base);
margin: 8px 0 6px;
}
.ds-offer-cardview__price-row {
display: flex; align-items: baseline; gap: 8px;
}
.ds-offer-cardview__price-label {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
font-weight: var(--fw-bd);
}
.ds-offer-cardview__price-amount {
font-size: var(--fs-h3); font-weight: var(--fw-bk);
letter-spacing: -0.012em; color: var(--fg-base);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.ds-offer-cardview__price-sub {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
margin: 2px 0 0; line-height: 1.4;
}
.ds-offer-cardview--empty .ds-offer-cardview__price-amount {
font-size: var(--fs-body-sm); color: var(--fg-muted); font-weight: var(--fw-md);
}
/* Compact: 가격 섹션 없는 케이스 (시세 데이터 없을 때) */
.ds-offer-cardview--compact .ds-offer-cardview__info {
justify-content: center;
}
.ds-offer-field { margin-bottom: 14px; }
.ds-offer-field__label {
display: block;
font-size: var(--fs-caption-md); font-weight: var(--fw-bd);
margin-bottom: 6px; color: var(--fg-base);
}
.ds-offer-field__input {
width: 100%; height: 48px;
padding: 0 16px;
border: 1px solid var(--border-base);
border-radius: 10px;
font-size: var(--fs-body-lg); font-weight: var(--fw-bd);
font-family: inherit;
background: var(--bg-card); color: var(--fg-base);
outline: none;
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.ds-offer-field__input:focus {
border-color: var(--border-focus);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--mystic-500) 18%, transparent);
}
.ds-offer-field__hint {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
margin-top: 6px; line-height: 1.5;
}
.ds-offer-field__hint--warn { color: var(--warning-700, #b45309); }
.ds-offer-presets {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 8px; margin-top: 8px;
}
.ds-offer-preset {
display: flex; flex-direction: column; gap: 2px; align-items: center; justify-content: center;
padding: 10px 8px;
border: 1px solid var(--border-base);
border-radius: 10px;
background: var(--bg-card); color: var(--fg-base);
cursor: pointer; font: inherit;
font-size: var(--fs-caption-md); font-weight: var(--fw-bd); line-height: 1.3;
transition: var(--t-fast) ease-out;
min-height: 56px;
}
.ds-offer-preset:hover { border-color: var(--mystic-500); }
.ds-offer-preset b {
display: block; font-size: var(--fs-body-sm);
color: var(--fg-base); font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
letter-spacing: -0.005em;
}
.ds-offer-preset > span:first-child {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
font-weight: var(--fw-md);
}
.ds-offer-expiry {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.ds-offer-expiry__pill {
padding: 10px;
border: 1px solid var(--border-base);
border-radius: 8px;
background: var(--bg-card); color: var(--fg-base);
cursor: pointer; font: inherit;
font-size: var(--fs-caption-md); font-weight: var(--fw-md);
text-align: center;
transition: var(--t-fast) ease-out;
}
.ds-offer-expiry__pill:hover { border-color: var(--mystic-500); }
.ds-offer-expiry__pill.is-active {
border-color: var(--mystic-500);
background: color-mix(in srgb, var(--mystic-500) 8%, var(--bg-card));
color: var(--mystic-500);
font-weight: var(--fw-bd);
}
.ds-offer-compare {
margin-bottom: 16px;
padding: 12px;
border: 1px solid var(--border-subtle);
border-radius: 10px;
}
.ds-offer-compare__title {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
text-transform: uppercase; letter-spacing: 0.04em;
margin-bottom: 8px; font-weight: var(--fw-bd);
}
.ds-offer-compare__row {
display: flex; justify-content: space-between;
padding: 6px 0;
font-size: var(--fs-caption-md);
color: var(--fg-subtle);
}
.ds-offer-compare__row + .ds-offer-compare__row { border-top: 1px dashed var(--border-subtle); }
.ds-offer-compare__row span:last-child {
font-weight: var(--fw-bd); color: var(--fg-base);
font-variant-numeric: tabular-nums;
}
.ds-offer-compare__empty {
text-align: center; color: var(--fg-muted);
font-size: var(--fs-caption-md);
padding: 12px 0;
}
/* "오퍼 취소" 보조 링크 (수정 모드에서) */
.ds-offer-cancel-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 44px;
margin: 12px 0 0;
padding: 10px 16px;
background: color-mix(in srgb, var(--danger-500, #dc2626) 6%, var(--bg-card));
border: 1px solid color-mix(in srgb, var(--danger-500, #dc2626) 22%, var(--border-base));
border-radius: var(--r-pill);
color: var(--danger-500, #dc2626);
font: inherit;
font-size: var(--fs-body-sm);
font-weight: var(--fw-bd);
line-height: 1.2;
text-decoration: none;
cursor: pointer;
text-align: center;
transition: background var(--t-fast) ease-out, border-color var(--t-fast) ease-out, color var(--t-fast) ease-out;
}
.ds-offer-cancel-link:hover {
background: color-mix(in srgb, var(--danger-500, #dc2626) 10%, var(--bg-card));
border-color: color-mix(in srgb, var(--danger-500, #dc2626) 36%, var(--border-base));
}
.ds-offer-cancel-link:disabled {
cursor: not-allowed;
opacity: 0.55;
}
/* ==========================================================
Offer cards — 받은 오퍼 섹션 (card-detail 보유자 zone)
========================================================== */
.ds-card-offers {
margin-top: 24px;
padding: 24px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 16px;
}
.ds-card-offers__head {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.ds-card-offers__title {
font-size: var(--fs-h4); font-weight: var(--fw-bk);
letter-spacing: -0.012em; margin: 0 0 4px;
color: var(--fg-base);
display: flex; align-items: center; gap: 8px;
}
.ds-card-offers__count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 22px; height: 22px;
padding: 0 8px;
background: var(--mystic-500); color: var(--fg-onbrand);
font-size: var(--fs-caption-md); font-weight: var(--fw-bk);
border-radius: var(--r-pill);
}
.ds-card-offers__desc {
font-size: var(--fs-body-sm); color: var(--fg-muted);
margin: 0; line-height: 1.5;
}
.ds-card-offers__notify-link {
display: inline-flex; align-items: center; gap: 4px;
padding: 8px 12px;
font-size: var(--fs-caption-md); font-weight: var(--fw-md);
color: var(--fg-subtle); text-decoration: none;
border: 1px solid var(--border-base); border-radius: var(--r-pill);
transition: var(--t-fast) ease-out;
}
.ds-card-offers__notify-link:hover { border-color: var(--fg-subtle); color: var(--fg-base); }
.ds-card-offers__notify-link .mi { font-size: 16px; }
.ds-card-offers__list {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 12px;
}
/* Compact 1.5-line layout: avatar + meta + amount/delta — actions as right-aligned pills */
.ds-offer-card {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px; align-items: center;
padding: 12px 16px;
border: 1px solid var(--border-base);
border-radius: 12px;
background: var(--bg-card);
transition: var(--t-fast) ease-out;
}
.ds-offer-card:hover { border-color: var(--border-strong); }
.ds-offer-card[data-state="accepted"] { border-color: var(--success-500, #059669); background: color-mix(in srgb, var(--success-500, #059669) 4%, var(--bg-card)); opacity: 0.85; }
.ds-offer-card[data-state="declined"] { opacity: 0.5; }
.ds-offer-card__avatar {
width: 36px; height: 36px;
display: grid; place-items: center;
background: var(--bg-subtle);
color: var(--fg-base);
font-weight: var(--fw-bk); font-size: var(--fs-body-sm);
border-radius: 50%;
flex-shrink: 0;
}
.ds-offer-card__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ds-offer-card__line1 {
display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.ds-offer-card__user-name {
font-size: var(--fs-body-sm); font-weight: var(--fw-bd);
color: var(--fg-base);
}
.ds-offer-card__amount {
font-size: var(--fs-body-md); font-weight: var(--fw-bk);
letter-spacing: -0.005em; color: var(--fg-base);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.ds-offer-card__delta-chip {
display: inline-block;
padding: 1px 6px; border-radius: 4px;
font-size: var(--fs-caption-sm); font-weight: var(--fw-bd);
font-variant-numeric: tabular-nums;
background: color-mix(in srgb, var(--danger-500, #dc2626) 10%, transparent);
color: var(--danger-500, #dc2626);
}
.ds-offer-card__delta-chip--up {
background: color-mix(in srgb, var(--success-500, #059669) 10%, transparent);
color: var(--success-500, #059669);
}
.ds-offer-card__line2 {
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
font-size: var(--fs-caption-sm); color: var(--fg-muted);
}
.ds-offer-card__expiry { color: var(--warning-700, #b45309); font-weight: var(--fw-md); }
.ds-offer-card__actions { display: flex; gap: 6px; flex-shrink: 0; }
.ds-offer-card__actions .ds-btn { height: 36px; padding: 0 16px; font-size: var(--fs-caption); border-radius: var(--r-pill); }
.ds-offer-card__actions .ds-btn--decline {
background: transparent; color: var(--fg-muted); border-color: transparent;
padding: 0 10px;
}
.ds-offer-card__actions .ds-btn--decline:hover { background: var(--bg-subtle); color: var(--fg-base); }
.ds-offer-card__tag {
display: inline-flex; align-items: center;
padding: 4px 10px;
border-radius: var(--r-pill);
background: var(--bg-subtle);
color: var(--fg-muted);
font-size: var(--fs-caption);
font-weight: var(--fw-md);
white-space: nowrap;
}
/* ============ Offers Page (offers.html) ============ */
.ds-offers-page__head { padding-block: 24px 20px; }
.ds-offers-page__title { font-size: var(--fs-h2); font-weight: var(--fw-bk); letter-spacing: -0.014em; margin: 0; }
.ds-offers-page__sub { font-size: var(--fs-body-sm); color: var(--fg-muted); margin-top: 6px; }
.ds-offers-stats {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
margin-bottom: 24px;
}
.ds-offers-stat {
display: flex; flex-direction: column; gap: 4px;
padding: 16px 18px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 12px;
text-align: left;
cursor: pointer;
transition: var(--t-fast) ease-out;
}
.ds-offers-stat:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.ds-offers-stat__label { font-size: var(--fs-caption); color: var(--fg-muted); font-weight: var(--fw-md); }
.ds-offers-stat__value {
font-size: 24px; font-weight: var(--fw-bk); letter-spacing: -0.01em;
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
color: var(--fg-base);
}
.ds-offers-page__tabs {
display: flex; gap: 6px; flex-wrap: wrap;
padding-block: 4px 16px;
border-bottom: 1px solid var(--border-base);
margin-bottom: 16px;
}
/* v0.7 S5: 모바일에선 horizontal scroll로 (1행 wrap → 1행 scroll, 줄바꿈 정합) */
@media (max-width: 767px) {
.ds-offers-page__tabs {
flex-wrap: nowrap;
overflow-x: auto;
margin-inline: -16px;
padding-inline: 16px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.ds-offers-page__tabs::-webkit-scrollbar { display: none; }
.ds-offers-tab { flex-shrink: 0; }
}
.ds-offers-tab {
display: inline-flex; align-items: center; gap: 6px;
height: 34px; padding: 0 14px;
background: transparent; border: 1px solid var(--border-base);
border-radius: var(--r-pill);
font-size: var(--fs-caption-lg); font-weight: var(--fw-md);
color: var(--fg-subtle);
cursor: pointer;
transition: var(--t-fast) ease-out;
}
.ds-offers-tab:hover { border-color: var(--gray-700); color: var(--fg-base); }
.ds-offers-tab[aria-selected="true"] {
background: var(--gray-950); color: var(--gray-0); border-color: var(--gray-950);
}
.ds-offers-tab__count {
font-size: var(--fs-caption-sm); font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums;
opacity: 0.7;
}
.ds-offers-tab[aria-selected="true"] .ds-offers-tab__count { opacity: 1; }
.ds-offers-page__list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 8px;
padding-bottom: 64px;
}
.ds-offer-row {
display: grid; grid-template-columns: auto 1fr auto;
gap: 14px; align-items: center;
padding: 14px 18px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 12px;
transition: var(--t-fast) ease-out;
}
.ds-offer-row:hover { border-color: var(--border-strong); }
.ds-offer-row--past { opacity: 0.85; }
.ds-offer-row--past:hover { opacity: 1; }
.ds-offer-row__avatar {
width: 40px; height: 40px;
display: grid; place-items: center;
background: var(--bg-subtle); color: var(--fg-base);
font-weight: var(--fw-bk); font-size: var(--fs-body-sm);
border-radius: 50%;
flex-shrink: 0;
}
/* v0.7: card thumbnail 우선 — 어떤 카드인지가 1차 인지 (user는 body에 텍스트로) */
.ds-offer-row__thumb {
width: 44px; aspect-ratio: 5 / 7; height: auto;
border-radius: 4px;
background: var(--bg-muted);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
flex-shrink: 0;
border: 1px solid var(--border-subtle);
position: relative;
overflow: hidden;
display: block;
text-decoration: none;
transition: transform var(--t-fast) ease-out;
}
.ds-offer-row__thumb:hover { transform: scale(1.04); }
:root[data-theme="dark"] .ds-offer-row__thumb { background-color: var(--gray-800); border-color: var(--white-a100); }
.ds-offer-row__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ds-offer-row__line1 {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ds-offer-row__direction {
font-size: var(--fs-caption-sm); font-weight: var(--fw-bk);
text-transform: uppercase; letter-spacing: 0.04em;
color: var(--fg-muted);
}
.ds-offer-row__user {
font-size: var(--fs-body-sm); font-weight: var(--fw-bd);
color: var(--fg-base);
}
.ds-offer-row__chip {
display: inline-flex; align-items: center; gap: 3px;
height: 20px; padding: 0 8px 0 6px;
font-size: var(--fs-caption-sm); font-weight: var(--fw-bd);
border-radius: var(--r-pill);
letter-spacing: -0.005em;
}
.ds-offer-row__chip .mi {
font-size: 13px;
font-variation-settings: 'FILL' 1, 'wght' 500;
}
/* v0.7: chip 색상 + 주체 구별 — 내가 한 액션 vs 상대가 한 액션 시각 차이 */
.ds-offer-row__chip--active {
/* 진행중 — 그린 (action 가능) */
background: var(--mystic-100, #d2ffdd);
color: var(--mystic-800, #0a6128);
}
.ds-offer-row__chip--pending {
/* 응답 대기 — 앰버/옐로 (대기 상태) */
background: #fff3cd;
color: #92400e;
}
/* 내가 수락 — 진한 그린 fill (능동 긍정) */
.ds-offer-row__chip--accepted-by-me {
background: var(--mystic-600, #14b441);
color: #ffffff;
}
/* 상대가 수락 — 라이트 그린 outlined (수동 긍정 — 나에게 들어온 결과) */
.ds-offer-row__chip--accepted-by-other {
background: var(--mystic-50, #ecfff1);
color: var(--mystic-800, #0a6128);
box-shadow: inset 0 0 0 1px var(--mystic-300, #6bff86);
}
/* 내가 거절 — 레드 fill (능동 부정) */
.ds-offer-row__chip--declined-by-me {
background: #fecaca;
color: #991b1b;
}
/* 상대가 거절 — 그레이 톤 (수동 부정 — 나에게 들어온 결과) */
.ds-offer-row__chip--declined-by-other {
background: var(--gray-100);
color: var(--gray-700);
box-shadow: inset 0 0 0 1px var(--gray-300);
}
.ds-offer-row__chip--expired {
/* 만료 — 차콜 (비활성) */
background: var(--gray-200);
color: var(--gray-600);
}
/* legacy alias (JS dynamic toggle 호환) */
.ds-offer-row__chip--accepted {
background: var(--mystic-600); color: #fff;
}
.ds-offer-row__chip--declined {
background: #fecaca; color: #991b1b;
}
:root[data-theme="dark"] .ds-offer-row__chip--active {
background: rgba(31,217,80,0.18); color: var(--mystic-300);
}
:root[data-theme="dark"] .ds-offer-row__chip--pending {
background: rgba(255,180,30,0.16); color: #fbbf24;
}
:root[data-theme="dark"] .ds-offer-row__chip--accepted-by-me,
:root[data-theme="dark"] .ds-offer-row__chip--accepted {
background: var(--mystic-700); color: #fff;
}
:root[data-theme="dark"] .ds-offer-row__chip--accepted-by-other {
background: rgba(31,217,80,0.10); color: var(--mystic-300);
box-shadow: inset 0 0 0 1px rgba(31,217,80,0.4);
}
:root[data-theme="dark"] .ds-offer-row__chip--declined-by-me,
:root[data-theme="dark"] .ds-offer-row__chip--declined {
background: rgba(239,68,68,0.18); color: #fca5a5;
}
:root[data-theme="dark"] .ds-offer-row__chip--declined-by-other {
background: var(--gray-800); color: var(--gray-400);
box-shadow: inset 0 0 0 1px var(--gray-700);
}
:root[data-theme="dark"] .ds-offer-row__chip--expired {
background: var(--gray-800); color: var(--gray-400);
}
.ds-offer-row__card {
font-size: var(--fs-body-sm); color: var(--fg-subtle);
margin: 0;
/* v0.7: 실제 상품명은 길음 — 2줄까지 wrap, 그 이상은 ellipsis */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.35;
word-break: keep-all;
}
.ds-offer-row__line2 {
display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.ds-offer-row__amount {
font-size: 16px; font-weight: var(--fw-bk);
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
color: var(--fg-base);
}
.ds-offer-row__delta {
/* v0.7: 메인 list에서 숨김 — 수락 심리적 허들 ↓ + chip 시각 집중 ↑ */
display: none !important;
}
.ds-offer-row__date {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
margin-left: auto;
white-space: nowrap;
}
.ds-offer-row__actions { display: flex; gap: 6px; flex-shrink: 0; }
/* v0.7: chip + date + actions 우측 column으로 묶음 (date 위치 fix, button 유무 무관) */
.ds-offer-row__right {
display: grid;
grid-template-rows: auto 1fr auto;
align-items: end;
justify-items: end;
gap: 8px;
min-width: 110px;
}
.ds-offer-row__right .ds-offer-row__chip { grid-row: 1; }
.ds-offer-row__right .ds-offer-row__actions { grid-row: 2; align-self: center; }
.ds-offer-row__right .ds-offer-row__date { grid-row: 3; margin-left: 0; }
/* v0.7: 버튼 없는 past row의 투명 placeholder — 진행중 row의 버튼과 동일한 공간 확보 */
.ds-offer-row__actions--placeholder {
visibility: hidden;
pointer-events: none;
/* 실제 버튼 2개(거절+수락 sm)와 동일 크기 */
height: 32px;
width: 100px;
}
.ds-offers-page__empty {
text-align: center;
padding: 64px 24px;
background: var(--bg-subtle);
border-radius: 12px;
}
.ds-offers-page__empty-icon {
font-size: 40px; color: var(--fg-faint);
display: block; margin-bottom: 12px;
}
.ds-offers-page__empty-title {
font-size: var(--fs-body-md); font-weight: var(--fw-bd);
color: var(--fg-base); margin: 0 0 4px;
}
.ds-offers-page__empty-sub {
font-size: var(--fs-body-sm); color: var(--fg-muted); margin: 0;
}
/* v0.7 S1.2: 5 items orphan 방어 — desktop 5-col(clean) · tablet 5-col(stays) · mobile snap rail */
@media (max-width: 1023px) {
.ds-offers-stats { grid-template-columns: repeat(5, 1fr); gap: 6px; } /* 3→5 (5/5 clean) */
}
@media (max-width: 767px) {
/* mobile horizontal snap rail */
.ds-offers-stats {
display: flex !important;
grid-template-columns: none !important;
gap: 8px !important;
overflow-x: auto;
scroll-snap-type: x mandatory;
margin-inline: -16px;
padding: 0 16px 4px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.ds-offers-stats::-webkit-scrollbar { display: none; }
.ds-offers-stats > .ds-offers-stat {
flex: 0 0 36%; /* peek 패턴 */
scroll-snap-align: start;
}
/* v0.8: mobile offer row — 2-section stack (top: thumb+body, footer: chip/actions/date) */
.ds-offer-row {
grid-template-columns: 84px 1fr;
grid-template-areas:
"thumb body"
"footer footer";
column-gap: 12px;
row-gap: 10px;
align-items: start;
padding: 12px 14px;
}
.ds-offer-row__thumb {
grid-area: thumb;
width: 84px;
background-size: contain;
}
.ds-offer-row__body {
grid-area: body;
gap: 6px;
align-self: start;
padding-top: 2px;
}
.ds-offer-row__line1 {
flex-wrap: nowrap;
gap: 6px;
min-width: 0;
}
.ds-offer-row__direction {
flex-shrink: 0;
display: inline-flex;
align-items: center;
height: 18px;
padding: 0 7px;
background: var(--bg-subtle);
color: var(--fg-subtle);
border-radius: var(--r-pill);
font-size: 11px;
font-weight: var(--fw-bd);
text-transform: none;
letter-spacing: 0;
}
.ds-offer-row__user {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
font-size: var(--fs-body-sm);
}
.ds-offer-row__card {
-webkit-line-clamp: 2;
font-size: 13px;
line-height: 1.35;
overflow-wrap: anywhere;
}
.ds-offer-row__line2 {
margin-top: 2px;
}
.ds-offer-row__amount {
font-size: 18px;
line-height: 1.15;
}
/* footer: 좌측 (chip 위 · 날짜 아래) + 우측 액션 버튼 */
.ds-offer-row__right {
grid-area: footer;
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"chip actions"
"date actions";
align-items: center;
justify-items: stretch;
column-gap: 10px;
row-gap: 4px;
min-width: 0;
padding-top: 10px;
border-top: 1px solid var(--border-base);
}
.ds-offer-row__right .ds-offer-row__chip {
grid-area: chip;
justify-self: start;
margin-right: 0;
}
.ds-offer-row__right .ds-offer-row__actions {
grid-area: actions;
align-self: center;
justify-self: end;
flex-wrap: wrap;
justify-content: flex-end;
max-width: 150px;
}
.ds-offer-row__right .ds-offer-row__actions .ds-btn {
min-width: 56px;
padding-inline: 10px;
}
.ds-offer-row__right .ds-offer-row__date {
grid-area: date;
justify-self: start;
margin-left: 0;
font-size: 11px;
color: var(--fg-muted);
line-height: 1.2;
white-space: normal;
overflow-wrap: anywhere;
}
/* placeholder: 액션 컬럼 폭만 0으로 — past row는 chip/date가 전체 폭 사용 */
.ds-offer-row__actions--placeholder { display: none; }
}
/* ============ Profile Avatar Edit Modal (v0.7 S7) ============ */
.ds-avatar-modal { width: min(420px, 92vw); }
.ds-avatar-modal__preview {
display: flex; justify-content: center;
padding: 12px 0 20px;
}
.ds-avatar-modal__circle {
width: 112px; height: 112px;
border-radius: 50%;
background: var(--gray-950);
background-size: cover; background-position: center;
color: var(--gray-0);
display: grid; place-items: center;
font-size: 44px; font-weight: var(--fw-bk);
letter-spacing: -0.02em;
border: 3px solid var(--bg-card);
box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
:root[data-theme="dark"] .ds-avatar-modal__circle {
background: var(--gray-50); color: var(--gray-950);
}
.ds-avatar-modal__circle[data-has-image] .ds-avatar-modal__letter { display: none; }
.ds-avatar-modal__actions {
display: flex; flex-direction: column; gap: 8px;
margin-bottom: 16px;
}
.ds-avatar-modal__btn[hidden] { display: none !important; }
.ds-avatar-modal__btn {
display: flex; align-items: center; gap: 14px;
padding: 14px 16px;
background: var(--bg-subtle);
border: 1px solid var(--border-base);
border-radius: 12px;
color: var(--fg-base);
cursor: pointer;
font-family: inherit;
text-align: left;
transition: var(--t-fast) ease-out;
}
.ds-avatar-modal__btn:hover { background: var(--bg-muted); border-color: var(--border-strong); }
.ds-avatar-modal__btn .mi { font-size: 22px; color: var(--fg-subtle); flex-shrink: 0; }
.ds-avatar-modal__btn-label {
display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.ds-avatar-modal__btn-label strong {
font-size: var(--fs-body); font-weight: var(--fw-bd); color: var(--fg-base);
}
.ds-avatar-modal__btn-label small {
font-size: var(--fs-caption); color: var(--fg-muted);
}
.ds-avatar-modal__btn--danger:hover {
border-color: var(--color-danger, #d33);
}
.ds-avatar-modal__btn--danger:hover .mi,
.ds-avatar-modal__btn--danger:hover strong {
color: var(--color-danger, #d33);
}
/* ============ Offer Confirm/Success Modal ============ */
.ds-offer-modal { width: min(440px, 92vw); }
.ds-offer-modal__detail {
display: flex; flex-direction: column; gap: 16px;
padding: 16px;
background: var(--bg-subtle);
border-radius: 12px;
margin: 8px 0 4px;
}
.ds-offer-modal__card {
display: flex; align-items: center; gap: 14px;
}
.ds-offer-modal__thumb {
width: 56px; height: 56px;
border-radius: 8px;
overflow: hidden; flex-shrink: 0;
background: var(--bg-muted);
display: grid; place-items: center;
}
.ds-offer-modal__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ds-offer-modal__card-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-offer-modal__card-name {
font-size: var(--fs-body-md); font-weight: var(--fw-bd);
color: var(--fg-base); margin: 0;
}
.ds-offer-modal__card-grade {
font-size: var(--fs-caption); color: var(--fg-muted); margin: 0;
}
.ds-offer-modal__rows {
margin: 0;
display: flex; flex-direction: column;
border-top: 1px solid var(--border-base);
padding-top: 12px; gap: 8px;
}
.ds-offer-modal__row {
display: flex; justify-content: space-between; align-items: baseline;
font-size: var(--fs-body-sm);
}
.ds-offer-modal__row dt { color: var(--fg-muted); margin: 0; }
.ds-offer-modal__row dd {
margin: 0; color: var(--fg-base); font-weight: var(--fw-md);
display: flex; align-items: baseline; gap: 6px;
}
.ds-offer-modal__row dd strong {
font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.ds-offer-modal__delta {
font-size: var(--fs-caption-sm); font-weight: var(--fw-bd);
font-variant-numeric: tabular-nums;
color: var(--danger-500, #dc2626);
padding: 1px 6px; border-radius: 4px;
background: color-mix(in srgb, var(--danger-500, #dc2626) 10%, transparent);
}
/* Success modal */
.ds-offer-modal-success {
width: min(420px, 92vw);
text-align: center;
padding: 32px 28px 24px;
}
.ds-offer-modal-success .ds-modal__title { text-align: center; margin-top: 16px; }
.ds-offer-modal-success .ds-modal__sub { text-align: center; margin-top: 8px; }
.ds-offer-modal-success__icon {
width: 64px; height: 64px;
margin: 0 auto;
display: grid; place-items: center;
border-radius: 50%;
background: var(--bg-subtle);
color: var(--fg-base);
}
.ds-offer-modal-success__icon .mi { font-size: 40px; }
#offerSuccessModal[data-mode="accept"] .ds-offer-modal-success__icon { background: color-mix(in srgb, var(--success-500, #2DB36F) 14%, var(--bg-subtle)); color: var(--success-700, #15803D); }
#offerSuccessModal[data-mode="decline"] .ds-offer-modal-success__icon { background: var(--bg-muted); color: var(--fg-muted); }
.ds-offer-modal-success .ds-modal__actions { margin-top: 20px; }
/* 작은 등급 칩 (모달 item-preview 안에서) */
.ds-offer-grade-chip {
display: inline-flex; align-items: center;
background: var(--gray-900);
color: var(--gray-50);
font-size: var(--fs-caption-xxs);
padding: 2px 6px;
border-radius: 3px;
font-weight: var(--fw-bk);
letter-spacing: 0.02em;
}
/* CTA — 결제 액션 (label + amount + arrow) */
.ds-pack-cta {
width: 100%;
display: inline-flex;
justify-content: center;
align-items: center;
gap: 0;
padding-inline: 20px !important;
height: 56px !important;
font-size: var(--fs-body-md) !important;
letter-spacing: -0.005em;
text-align: center;
}
.ds-pack-cta__label {
text-align: left;
font-weight: var(--fw-bk);
}
.ds-pack-cta__amount {
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
font-weight: var(--fw-bk); letter-spacing: -0.012em;
padding-left: 14px; margin-left: 2px;
border-left: 1px solid rgba(255,255,255,0.18);
}
:root[data-theme="dark"] .ds-pack-cta__amount { border-left-color: rgba(0,0,0,0.18); }
.ds-pack-cta__arrow { font-size: 20px !important; opacity: 0.9; }
/* Pack info (우측) */
.ds-pack-info { display: flex; flex-direction: column; gap: 18px; }
.ds-pack-info__category {
display: inline-flex; align-items: center; gap: 6px;
font-size: var(--fs-caption); color: var(--fg-muted);
font-weight: var(--fw-md); letter-spacing: -0.005em;
}
.ds-pack-info__name {
font-size: var(--fs-h2); font-weight: var(--fw-bk);
letter-spacing: -0.012em; line-height: 1.2;
margin-top: 6px;
}
.ds-pack-info__sub {
font-size: var(--fs-body); color: var(--fg-muted);
margin-top: 6px;
}
.ds-pack-info__price-row {
display: flex; align-items: baseline; gap: 6px;
padding-top: 4px;
}
.ds-pack-info__price {
font-size: 32px; font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
letter-spacing: -0.018em; line-height: 1;
}
.ds-pack-info__price-unit { font-size: var(--fs-body); color: var(--fg-muted); font-weight: var(--fw-rg); }
/* 한정 수량 progress */
.ds-pack-info__limited {
padding: 14px 16px;
background: var(--bg-subtle);
border: 1px solid var(--border-base);
border-radius: 10px;
display: flex; flex-direction: column; gap: 8px;
}
.ds-pack-info__limited-row {
display: flex; justify-content: space-between; align-items: center;
font-size: var(--fs-caption); color: var(--fg-muted); font-weight: var(--fw-md);
}
.ds-pack-info__limited-row strong { color: var(--fg-base); font-variant-numeric: tabular-nums; }
.ds-pack-info__limited-row .danger { color: var(--danger-600); font-weight: var(--fw-bk); }
/* Stepper */
.ds-stepper {
display: inline-flex; align-items: center;
height: 40px;
background: var(--bg-card);
border: 1px solid var(--border-strong);
border-radius: var(--r-pill);
overflow: hidden;
}
.ds-stepper button {
width: 36px; height: 100%;
display: grid; place-items: center;
color: var(--fg-base);
transition: background var(--t-fast) ease-out;
}
.ds-stepper button:hover:not(:disabled) { background: var(--bg-subtle); }
.ds-stepper button:disabled { opacity: 0.3; cursor: not-allowed; }
.ds-stepper button .mi { font-size: 18px; }
.ds-stepper input {
width: 44px; text-align: center;
background: transparent; border: none; outline: none;
font-size: var(--fs-body-sm); font-weight: var(--fw-bd);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
color: var(--fg-base);
}
/* Pack info form rows */
.ds-pack-info__rows {
border-top: 1px solid var(--border-base);
border-bottom: 1px solid var(--border-base);
padding-block: 4px;
}
.ds-pack-info__row {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 0;
border-top: 1px solid var(--border-subtle);
}
.ds-pack-info__row:first-child { border-top: none; }
.ds-pack-info__row-label {
font-size: var(--fs-caption); color: var(--fg-subtle);
font-weight: var(--fw-md);
}
.ds-pack-info__row-value {
font-size: var(--fs-body-sm); font-weight: var(--fw-bd);
font-variant-numeric: tabular-nums;
}
/* Total + CTA */
.ds-pack-info__total {
display: flex; justify-content: space-between; align-items: baseline;
padding: 16px 18px;
background: var(--gray-950); color: var(--gray-0);
border-radius: 10px;
}
:root[data-theme="dark"] .ds-pack-info__total { background: var(--gray-50); color: var(--gray-950); }
.ds-pack-info__total-label {
font-size: var(--fs-caption); color: var(--gray-400); font-weight: var(--fw-md);
}
:root[data-theme="dark"] .ds-pack-info__total-label { color: var(--gray-600); }
.ds-pack-info__total-amount {
font-size: 24px; font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
letter-spacing: -0.012em;
}
.ds-pack-info__total-amount small { font-size: var(--fs-caption); color: var(--gray-400); margin-left: 4px; font-weight: var(--fw-rg); }
:root[data-theme="dark"] .ds-pack-info__total-amount small { color: var(--gray-600); }
.ds-pack-info__cta-row { display: flex; gap: 8px; }
.ds-pack-info__cta-row .ds-btn { flex: 1; }
/* ==========================================================
Probability Table — 등급별 확률
========================================================== */
.ds-prob-table {
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 10px;
overflow: hidden;
}
.ds-prob-table__head,
.ds-prob-table__row {
display: grid;
grid-template-columns: 88px 1fr 100px 80px;
align-items: center;
padding: 12px 16px;
gap: 12px;
}
.ds-prob-table__head {
background: var(--bg-subtle);
border-bottom: 1px solid var(--border-base);
font-size: var(--fs-caption-xs); font-weight: var(--fw-bk);
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--fg-muted);
}
.ds-prob-table__row {
border-top: 1px solid var(--border-subtle);
font-size: var(--fs-body-sm);
}
.ds-prob-table__row:first-of-type { border-top: none; }
.ds-prob-table__name { font-weight: var(--fw-bd); color: var(--fg-base); }
.ds-prob-table__pct {
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
font-weight: var(--fw-bd); text-align: right;
}
.ds-prob-table__pool {
font-variant-numeric: tabular-nums;
color: var(--fg-muted); text-align: right;
font-size: var(--fs-caption);
}
.ds-prob-table .text-right { text-align: right; }
@media (max-width: 599px) {
.ds-prob-table__head, .ds-prob-table__row { grid-template-columns: 60px 1fr 70px; gap: 8px; }
.ds-prob-table__pool { display: none; }
}
/* Grade pill (확률표·결과 공용) */
.ds-grade-pill {
display: inline-flex; align-items: center;
height: 22px; padding: 0 8px;
background: var(--gray-200); color: var(--gray-950);
border-radius: 4px;
font-size: var(--fs-caption-xs); font-weight: var(--fw-bk);
letter-spacing: 0.04em;
}
.ds-grade-pill--legend { background: var(--legendary-500); color: var(--legendary-900); }
.ds-grade-pill--epic { background: var(--epic-500); color: #FFF; }
.ds-grade-pill--rare { background: var(--rare-500); color: #FFF; }
.ds-grade-pill--mystic { background: var(--gray-700); color: var(--gray-0); }
.ds-grade-pill--common { background: var(--gray-300); color: var(--gray-950); }
/* ==========================================================
Pool Preview — 풀에 들어있는 카드 미리보기 (등급별)
========================================================== */
.ds-pool-section { display: flex; flex-direction: column; gap: 14px; }
.ds-pool-section__head {
display: flex; align-items: center; gap: 10px;
}
.ds-pool-section__title {
font-size: var(--fs-body); font-weight: var(--fw-bd);
}
.ds-pool-section__count {
font-size: var(--fs-caption); color: var(--fg-muted);
font-variant-numeric: tabular-nums;
}
.ds-pool-grid {
display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px;
}
@media (max-width: 1023px) { .ds-pool-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 599px) { .ds-pool-grid { grid-template-columns: repeat(4, 1fr); } }
/* ==========================================================
=== POOL CARD === 정보-rich 카드 (year #번호 종류 / 이름 / 보험가액 / 감정 등급 + KADO 등급 chip)
직전 단순 art+name placeholder에서 격상 — 카드별 메타데이터 모두 노출
========================================================== */
.ds-pool-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 10px;
overflow: hidden;
cursor: pointer;
transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ds-pool-card:hover {
/* unified hover — .ds-listing 기준 */
box-shadow: var(--shadow-2);
border-color: var(--gray-300);
}
:root[data-theme="dark"] .ds-pool-card { background: var(--gray-900); border-color: var(--gray-800); }
:root[data-theme="dark"] .ds-pool-card:hover { border-color: var(--gray-600); }
/* Art 영역 — 1:1 정사각 (spec 2.1). 카드 이미지는 88% 사이즈로 가운데정렬 */
.ds-pool-card__art {
aspect-ratio: 1 / 1;
background-color: var(--gray-100);
background-image: none;
background-size: auto 88%;
background-repeat: no-repeat;
background-position: center center;
position: relative;
overflow: hidden;
}
:root[data-theme="dark"] .ds-pool-card__art { background-color: var(--gray-900); }
:root[data-theme="dark"] .ds-pool-card__art { background-color: var(--gray-800); }
/* KADO 등급(rarity) chip — art 우상단. v0.5 메트릭 통일 + mystic mesh + legendary gold */
.ds-pool-card__label {
position: absolute;
top: 8px; right: 8px;
z-index: 3;
display: inline-flex; align-items: center; justify-content: center;
height: 20px; padding: 0 8px;
box-sizing: border-box;
border: 1px solid transparent;
border-radius: 999px;
font-size: 10px; font-weight: var(--fw-bd); /* 600 */
letter-spacing: 0.04em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
}
/* Mystic — Aurora mesh (4 radial layers) */
.ds-pool-card__label--mystic {
background-color: #2A1845;
background-image:
radial-gradient(ellipse 80% 120% at 0% 0%, #C5A0FF 0%, transparent 65%),
radial-gradient(ellipse 80% 120% at 100% 0%, #FF8FCD 0%, transparent 55%),
radial-gradient(ellipse 80% 120% at 0% 100%, #5DECFF 0%, transparent 55%),
radial-gradient(ellipse 80% 120% at 100% 100%, #6F8DFF 0%, transparent 55%);
color: #FFF;
border-color: rgba(255,255,255,0.22);
text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
:root[data-theme="dark"] .ds-pool-card__label--mystic {
/* 다크 모드도 동일 mesh 유지 (오로라 효과는 dark에서도 빛남) */
}
/* Legendary — Subtle gold gradient */
.ds-pool-card__label--legend {
background: linear-gradient(180deg,
#FBD550 0%, #F5C518 35%, #DDB10E 70%, #C99A0F 100%);
color: var(--legendary-700);
border-color: color-mix(in srgb, var(--legendary-700) 35%, transparent);
text-shadow: 0 1px 0 rgba(255,255,255,0.18);
}
.ds-pool-card__label--epic {
background: var(--epic-500); color: #FFF;
border-color: color-mix(in srgb, #FFF 25%, transparent);
}
.ds-pool-card__label--rare {
background: var(--rare-500); color: #FFF;
border-color: color-mix(in srgb, #FFF 25%, transparent);
}
.ds-pool-card__label--common {
background: var(--common-500); color: #FFF;
border-color: color-mix(in srgb, #FFF 25%, transparent);
}
/* Info section — art 아래 메타 stack (very compact, 세로 minimize) */
.ds-pool-card__info {
display: flex; flex-direction: column;
padding: 8px 10px 10px;
gap: 1px;
flex: 1;
}
.ds-pool-card__meta {
font-size: 11px;
color: var(--fg-muted);
letter-spacing: 0;
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1;
margin: 0;
line-height: 1.3;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-pool-card__name {
font-size: var(--fs-body-sm);
font-weight: var(--fw-bd); /* 600 */
color: var(--fg-base);
line-height: 1.2;
letter-spacing: -0.005em;
margin: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 시세 + 감정 등급 — 한 줄 footer로 통합 (가격 + chip) */
.ds-pool-card__footer {
margin-top: 4px;
display: flex; align-items: baseline; justify-content: space-between;
gap: 6px;
}
.ds-pool-card__value-amount {
font-size: var(--fs-body-sm);
font-weight: var(--fw-bd); /* v0.5: bk 700 → bd 600 */
color: var(--fg-base);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.ds-pool-card__value-unit {
font-size: 11px; font-weight: var(--fw-rg); color: var(--fg-muted);
margin-left: 3px;
}
/* 감정 등급 chip — 한 줄 footer 우측 */
.ds-pool-card__cert {
display: inline-flex; align-items: center; gap: 3px;
font-size: 10px;
font-weight: var(--fw-bd);
padding: 2px 6px;
border-radius: 4px;
background: var(--bg-subtle);
border: 1px solid var(--border-base);
color: var(--fg-base);
letter-spacing: 0;
flex-shrink: 0;
}
:root[data-theme="dark"] .ds-pool-card__cert {
background: var(--gray-900);
border-color: var(--gray-700);
}
.ds-pool-card__cert-issuer {
font-weight: var(--fw-md);
color: var(--fg-muted);
}
/* Browse grid 안의 카드는 더 compact하게 */
.ds-pool-grid--browse .ds-pool-card__info { padding: 6px 8px; gap: 1px; }
.ds-pool-grid--browse .ds-pool-card__meta { font-size: 10px; }
.ds-pool-grid--browse .ds-pool-card__name { font-size: 11px; }
.ds-pool-grid--browse .ds-pool-card__value-amount { font-size: var(--fs-caption); }
.ds-pool-grid--browse .ds-pool-card__cert { font-size: 9px; padding: 1px 4px; }
.ds-pool-grid--browse .ds-pool-card__label { font-size: 8px; padding: 2px 5px; }
.ds-pool-grid--browse .ds-pool-card__footer { margin-top: 4px; }
/* ==========================================================
=== CARD DETAIL MODAL === 카드 클릭 시 상세 정보 표시
========================================================== */
.ds-modal__panel--card {
max-width: 460px;
padding: 20px;
}
.ds-card-detail {
display: flex; flex-direction: column;
gap: 16px;
margin: 8px 0 12px;
}
.ds-card-detail__art {
aspect-ratio: 5 / 7;
width: 200px;
margin: 0 auto;
background-color: var(--bg-subtle);
background-image: none;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border-radius: 10px;
border: 1px solid var(--border-base);
}
.ds-card-detail__info {
display: flex; flex-direction: column;
margin: 0;
padding: 0;
}
.ds-card-detail__info > div {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 0;
border-top: 1px solid var(--border-subtle);
}
.ds-card-detail__info > div:first-child { border-top: none; }
.ds-card-detail__info dt {
color: var(--fg-muted);
font-size: var(--fs-body-sm);
font-weight: var(--fw-md);
margin: 0;
}
.ds-card-detail__info dd {
margin: 0;
font-weight: var(--fw-bd);
color: var(--fg-base);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.ds-card-detail__info dd.is-amount {
font-size: var(--fs-body);
font-weight: var(--fw-bk);
}
/* ==========================================================
=== PAY CONFIRM === 결제 전 잔액 확인 모달 (충전 → 잔액 인지 → 진행)
========================================================== */
.ds-pay-confirm {
max-width: 440px;
width: 100%;
padding: 22px 22px 18px;
}
.ds-pay-confirm .ds-modal__head {
align-items: flex-start;
margin-bottom: 4px;
}
.ds-pay-confirm__list {
display: flex; flex-direction: column;
margin: 14px 0 18px;
padding: 0;
}
.ds-pay-confirm__list > div {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--border-subtle);
}
.ds-pay-confirm__list > div[hidden] { display: none; }
/* v0.7: total 직전 row의 bottom border 제거 (이중 보더 방지) */
.ds-pay-confirm__list > div:has(+ .is-total) { border-bottom: none; }
.ds-pay-confirm__list > div.is-total {
border-top: 2px solid var(--fg-base);
border-bottom: none;
padding-top: 14px;
margin-top: 4px;
}
/* 마지막 row (currency-eq 등 — total 다음) — 보더 가볍게 */
.ds-pay-confirm__list > div:last-child { border-bottom: none; }
.ds-pay-confirm__currency-eq {
margin-top: 4px;
font-size: var(--fs-caption-md) !important;
color: var(--fg-muted) !important;
}
.ds-pay-confirm__currency-eq dt,
.ds-pay-confirm__currency-eq dd {
font-size: var(--fs-caption-md) !important;
color: var(--fg-muted) !important;
font-weight: var(--fw-md) !important;
}
.ds-pay-confirm__list dt {
color: var(--fg-muted);
font-size: var(--fs-body-sm);
font-weight: var(--fw-md);
margin: 0;
}
.ds-pay-confirm__list dd {
margin: 0;
font-weight: var(--fw-bd);
color: var(--fg-base);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.ds-pay-confirm__list dd.is-positive { color: var(--mystic-700); }
.ds-pay-confirm__list dd.is-negative { color: var(--fg-muted); }
.ds-pay-confirm__list > div.is-total dt,
.ds-pay-confirm__list > div.is-total dd {
font-size: var(--fs-body);
font-weight: var(--fw-bk);
color: var(--fg-base);
}
/* ==========================================================
=== GRADING WIZARD === 사진 업로드 → 카드 정보 → 등급사 → 견적 (4-step)
모달 height 고정 — step 변경 시 사이즈 변동 X. body만 내부 scroll
========================================================== */
.ds-modal__panel--wizard {
max-width: 600px;
width: 100%;
height: 720px; /* fixed height — step 변경 시 사이즈 동일. 가장 긴 step에 맞춤 */
max-height: 92vh;
padding: 24px 28px; /* v0.5: 20/22 → 24/28 (브리딩 룸 +) */
display: flex; flex-direction: column;
gap: 16px; /* v0.5: 14 → 16 */
overflow: hidden;
}
.ds-modal__panel--wizard .ds-modal__head {
display: flex; flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 12px;
padding: 0 0 14px 0; /* close 버튼은 absolute 라 우측 padding 불필요 */
margin: 0;
border-bottom: 1px solid var(--border-subtle);
flex-shrink: 0;
}
/* topline은 close 버튼 자리(우측 32px + 여백)만 비워두면 됨 */
.ds-modal__panel--wizard .ds-wizard__topline { padding-right: 40px; }
/* Wizard topline — 모달 정체성 (좌측 정렬) */
.ds-wizard__topline {
display: flex; align-items: baseline; flex-wrap: wrap;
gap: 4px 12px;
}
.ds-wizard__modal-title {
font-size: 18px;
font-weight: var(--fw-bk);
letter-spacing: -0.012em;
color: var(--fg-base);
margin: 0;
}
.ds-wizard__topline-meta {
font-size: var(--fs-caption);
color: var(--fg-muted);
font-variant-numeric: tabular-nums;
}
/* v0.7 T3: Step compact indicator + progress bar */
.ds-wizard__step-indicator {
font-size: 13px;
color: var(--fg-subtle);
font-weight: var(--fw-md);
font-variant-numeric: tabular-nums;
}
.ds-wizard__step-indicator strong {
color: var(--fg-base);
font-weight: var(--fw-bk);
}
.ds-wizard__progress-bar {
position: relative;
height: 3px;
background: var(--bg-muted);
border-radius: 2px;
margin: 8px 0 14px;
overflow: hidden;
}
.ds-wizard__progress-fill {
position: absolute; top: 0; left: 0;
height: 100%;
background: var(--mystic-500, #38a169);
border-radius: 2px;
transition: width 0.3s cubic-bezier(.2, .8, .2, 1);
}
.ds-wizard__progress {
display: flex; align-items: flex-start; gap: 4px;
width: 100%;
}
/* v0.7 T3: 모바일 — dot stepper 압축 (현재 step만 강조, 나머지는 미니멀) */
@media (max-width: 480px) {
.ds-wizard__progress {
gap: 2px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.ds-wizard__progress::-webkit-scrollbar { display: none; }
.ds-wizard__step-cell .ds-wizard__step-label { display: none; }
.ds-wizard__step-cell.is-active .ds-wizard__step-label { display: inline; font-size: 11px; }
.ds-wizard__step { width: 22px; height: 22px; font-size: 11px; }
.ds-modal__panel--wizard .ds-wizard__step-line { margin-top: 10px; }
}
/* Step cell — number + label */
.ds-wizard__step-cell {
display: flex; flex-direction: column; align-items: center;
gap: 5px;
flex-shrink: 0;
}
.ds-wizard__step-label {
font-size: 10px;
font-weight: var(--fw-md);
color: var(--fg-faint);
letter-spacing: -0.005em;
white-space: nowrap;
transition: color 0.2s ease;
}
.ds-wizard__step-cell.is-active .ds-wizard__step-label {
color: var(--fg-base);
font-weight: var(--fw-bk);
}
.ds-wizard__step-cell.is-done .ds-wizard__step-label {
color: var(--fg-subtle);
}
/* step cell의 .ds-wizard__step에 active/done 클래스 적용 (cell이 부모) */
.ds-wizard__step-cell.is-active .ds-wizard__step {
background: var(--mystic-300);
color: var(--mystic-950);
border-color: var(--mystic-300);
transform: scale(1.08);
}
.ds-wizard__step-cell.is-done .ds-wizard__step {
background: var(--gray-950);
color: var(--gray-0);
border-color: var(--gray-950);
}
:root[data-theme="dark"] .ds-wizard__step-cell.is-done .ds-wizard__step {
background: var(--gray-50); color: var(--gray-950); border-color: var(--gray-50);
}
/* line — cell 사이에 위치 (cell의 dot 높이 26px의 절반에 맞춰 margin) */
.ds-modal__panel--wizard .ds-wizard__step-line {
margin-top: 12px; /* 26px dot의 중앙 */
}
/* Progress 컬러 시스템 — active만 mystic 그린(brand 강조), done은 검정(흐름), pending은 회색 */
.ds-wizard__step {
width: 26px; height: 26px;
border-radius: 50%;
display: grid; place-items: center;
font-size: 12px;
font-weight: var(--fw-bk);
background: var(--bg-card);
color: var(--fg-muted);
border: 1.5px solid var(--border-base);
transition: all 0.2s ease;
flex-shrink: 0;
}
/* active = 현재 단계 (brand 그린) — 시선 1순위 */
.ds-wizard__step.is-active {
background: var(--mystic-300);
color: var(--mystic-950);
border-color: var(--mystic-300);
transform: scale(1.08);
}
/* done = 완료 (검정, KREAM 톤) — 흐름 자취 */
.ds-wizard__step.is-done {
background: var(--gray-950);
color: var(--gray-0);
border-color: var(--gray-950);
}
:root[data-theme="dark"] .ds-wizard__step.is-done {
background: var(--gray-50); color: var(--gray-950); border-color: var(--gray-50);
}
.ds-wizard__step-line {
flex: 1;
height: 1.5px;
background: var(--border-subtle);
border-radius: 1px;
transition: background 0.2s ease;
}
.ds-wizard__step-line.is-done { background: var(--gray-950); }
:root[data-theme="dark"] .ds-wizard__step-line.is-done { background: var(--gray-50); }
/* Wizard body — flex: 1 + 자체 overflow scroll. footer는 별도 요소로 항상 바닥 */
.ds-wizard__step-panel {
display: flex; flex-direction: column;
gap: 14px;
flex: 1;
min-height: 0;
overflow-y: auto; /* 본문 길면 step-panel만 자체 scroll */
overscroll-behavior: contain;
scrollbar-gutter: stable;
padding: 4px; /* 대칭 — focus ring 잘림 방지 */
}
.ds-wizard__step-panel[hidden] { display: none; }
/* Footer — 모달 panel 바닥 고정. content 짧든 길든 항상 보임 */
.ds-wizard__footer {
display: flex; align-items: center; gap: 8px;
flex-shrink: 0;
margin: 0;
padding-top: 14px;
border-top: 1px solid var(--border-subtle);
}
.ds-wizard__footer > button[hidden] { display: none; }
/* 좌측 cancel/prev | 우측 next/submit (margin-left: auto) */
#wizardNextBtn,
#gradingSubmitBtn {
margin-left: auto;
}
#wizardNextBtn .mi,
#gradingSubmitBtn .mi { font-size: 16px; margin-right: 4px; }
.ds-wizard__head { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; margin-bottom: 8px; }
.ds-wizard__title {
font-size: 18px;
font-weight: var(--fw-bd); /* v0.5: bk → bd */
letter-spacing: -0.012em;
margin: 0;
}
.ds-wizard__sub {
font-size: var(--fs-body-sm);
color: var(--fg-muted);
margin: 0;
line-height: 1.5;
}
.ds-wizard__step-error {
display: flex;
align-items: flex-start;
gap: 6px;
padding: 9px 11px;
border: 1px solid rgba(239, 68, 68, 0.28);
border-radius: 8px;
background: rgba(239, 68, 68, 0.08);
color: var(--danger-600, #b91c1c);
font-size: var(--fs-caption);
font-weight: var(--fw-md);
line-height: 1.45;
}
.ds-wizard__step-error[hidden] {
display: none;
}
.ds-wizard__step-error .mi {
flex: 0 0 auto;
font-size: 16px;
line-height: 1.2;
}
.ds-wizard__actions {
display: flex; justify-content: space-between;
gap: 12px;
margin: 0;
padding-top: 14px;
border-top: 1px solid var(--border-subtle);
flex-shrink: 0;
}
.ds-wizard__actions .ds-btn--primary { margin-left: auto; }
.ds-wizard__actions .ds-btn--primary .mi { font-size: 16px; margin-right: 4px; }
/* === Step 1: Uploader === */
.ds-uploader {
display: grid; grid-template-columns: 1fr 1fr;
gap: 10px;
}
/* v0.7 T3: 모바일 stacked — cramped 50/50 → 큰 hit area + 카드 비율 */
@media (max-width: 480px) {
.ds-uploader { grid-template-columns: 1fr; gap: 12px; }
.ds-uploader__slot {
aspect-ratio: 5 / 3 !important;
max-height: none !important;
}
}
.ds-uploader__slot {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px;
aspect-ratio: 1 / 1; /* 카드 portrait 힌트 — 모달 fit 한도 안에서 가장 세로 */
border: 2px dashed var(--border-base);
border-radius: 12px;
cursor: pointer;
transition: border-color .15s, background .15s;
background-color: var(--bg-subtle);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
overflow: hidden;
text-align: center;
}
.ds-uploader__slot:hover {
border-color: var(--gray-700);
background-color: var(--bg-card);
}
.ds-uploader__slot.is-invalid {
border-color: var(--danger-500, #ef4444);
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}
.ds-uploader__slot.has-image {
border-style: solid;
border-color: var(--mystic-300);
background-color: var(--gray-950);
}
.ds-uploader__slot.has-image .mi,
.ds-uploader__slot.has-image .ds-uploader__hint { display: none; }
.ds-uploader__slot.has-image .ds-uploader__label {
position: absolute;
bottom: 8px; left: 8px;
background: var(--mystic-300); color: var(--mystic-950);
padding: 2px 8px;
border-radius: 4px;
font-size: 11px; font-weight: var(--fw-bk);
}
.ds-uploader__slot { position: relative; }
.ds-uploader__slot .mi { font-size: 32px; color: var(--fg-faint); }
.ds-uploader__label {
font-size: var(--fs-body-sm); font-weight: var(--fw-bd);
color: var(--fg-base);
}
.ds-uploader__hint {
font-size: 10px; color: var(--fg-faint);
letter-spacing: 0;
}
.ds-wizard__tips {
list-style: none; margin: 0; padding: 12px 14px;
background: var(--bg-subtle);
border-radius: 8px;
display: flex; flex-direction: column; gap: 6px;
}
:root[data-theme="dark"] .ds-wizard__tips { background: var(--gray-900); }
.ds-wizard__tips li {
display: flex; align-items: center; gap: 8px;
font-size: var(--fs-caption);
color: var(--fg-subtle);
}
.ds-wizard__tips .mi { font-size: 14px; color: var(--mystic-300); }
/* === Step 2: Form === */
.ds-wizard__form { display: flex; flex-direction: column; gap: 12px; }
.ds-wizard__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ds-wizard__field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ds-wizard__field label {
font-size: var(--fs-caption);
color: var(--fg-muted);
font-weight: var(--fw-md);
}
.ds-wizard__field input {
width: 100%;
box-sizing: border-box;
padding: 10px 12px;
border: 1px solid var(--border-base);
border-radius: 8px;
font-size: var(--fs-body-sm);
font-family: inherit;
background: var(--bg-card);
color: var(--fg-base);
transition: border-color .15s;
}
.ds-wizard__field input:focus {
outline: none;
border-color: var(--gray-950);
}
.ds-wizard__field input[aria-invalid="true"] {
border-color: var(--danger-500, #ef4444);
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}
/* === Step 3: Grader Grid === */
.ds-grader-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.ds-grader-grid.is-invalid,
.ds-tier-stack.is-invalid {
border-radius: 10px;
outline: 2px solid var(--danger-500, #ef4444);
outline-offset: 3px;
}
@media (max-width: 599px) { .ds-grader-grid { grid-template-columns: 1fr 1fr; } }
.ds-grader-option { display: block; cursor: pointer; position: relative; }
/* v0.7: Coming Soon — 비활성 grader (PSA Japan / ARS / TAG) */
.ds-grader-option.is-coming-soon { cursor: not-allowed; }
.ds-grader-option.is-coming-soon .ds-grader-option__inner {
opacity: 0.5;
pointer-events: none;
}
.ds-grader-option__coming-tag {
position: absolute; top: 8px; right: 8px;
display: inline-flex; align-items: center;
height: 18px; padding: 0 7px;
font-size: 9px; font-weight: var(--fw-bk);
letter-spacing: 0.08em;
background: var(--gray-950); color: var(--gray-0);
border-radius: var(--r-pill);
z-index: 2;
}
:root[data-theme="dark"] .ds-grader-option__coming-tag { background: var(--gray-50); color: var(--gray-950); }
.ds-grader-option input { position: absolute; opacity: 0; pointer-events: none; }
/* 추천 배지 — 제목 옆 inline (시안 C) */
.ds-grader-option__rec-inline {
display: inline-flex; align-items: center;
margin-left: 6px;
padding: 1px 6px;
background: var(--mystic-100);
color: var(--mystic-800);
border-radius: 4px;
font-size: 9px; font-weight: 800;
letter-spacing: 0.04em; line-height: 1.3;
vertical-align: middle;
}
:root[data-theme="dark"] .ds-grader-option__rec-inline {
background: var(--mystic-800); color: var(--mystic-100);
}
/* DEPRECATED — 외부 ribbon 추천 뱃지 (시안 C 도입으로 폐기) */
.ds-grader-option__badge { display: none; }
.ds-grader-option__inner {
padding: 12px;
border: 1.5px solid var(--border-base);
border-radius: 10px;
display: flex; flex-direction: column;
gap: 4px;
transition: border-color .15s, background .15s;
background: var(--bg-card);
}
.ds-grader-option:hover .ds-grader-option__inner {
border-color: var(--gray-700);
}
.ds-grader-option input:checked + .ds-grader-option__inner {
border-color: var(--gray-950);
background: var(--bg-subtle);
}
:root[data-theme="dark"] .ds-grader-option input:checked + .ds-grader-option__inner {
border-color: var(--gray-50);
background: var(--gray-800);
}
.ds-grader-option__top {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 4px;
}
.ds-grader-option__brand {
font-size: var(--fs-body); font-weight: var(--fw-bk);
letter-spacing: -0.01em;
color: var(--fg-base);
display: inline-flex; align-items: center; gap: 8px;
}
/* 시안 C — brand color dot (10px) before brand text */
.ds-grader-option__brand::before {
content: '';
width: 10px; height: 10px;
border-radius: 50%;
background: var(--brand-color, var(--gray-300));
flex-shrink: 0;
}
.ds-grader-option--psa { --brand-color: #1f4cb6; } /* PSA 파랑 */
.ds-grader-option--psa-japan { --brand-color: #0e3787; } /* PSA Japan 진파랑 */
.ds-grader-option--bgs { --brand-color: #f0a93b; } /* BGS 오렌지 */
.ds-grader-option--cgc { --brand-color: #1f7a5e; } /* CGC 그린 */
.ds-grader-option--ars { --brand-color: #6d34d6; } /* ARS 보라 */
.ds-grader-option--tag { --brand-color: #d23a2c; } /* TAG 빨강 */
.ds-grader-option__country {
font-size: 10px; color: var(--fg-muted);
text-transform: uppercase; letter-spacing: 0.06em;
font-weight: var(--fw-md);
}
.ds-grader-option__price {
font-size: 15px; font-weight: var(--fw-bd);
color: var(--fg-base);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.ds-grader-option__price small {
font-size: 11px; font-weight: var(--fw-md);
color: var(--fg-muted);
margin-left: 2px;
}
.ds-grader-option__time {
font-size: var(--fs-caption);
color: var(--fg-muted);
}
/* === Step 4: Summary === */
.ds-wizard__summary {
display: flex; flex-direction: column;
margin: 0;
padding: 0;
}
.ds-wizard__summary > div {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--border-subtle);
}
.ds-wizard__summary > div:first-child { padding-top: 0; }
.ds-wizard__summary-divider {
display: block !important;
height: 8px;
border: none !important;
padding: 0 !important;
}
.ds-wizard__summary > div.is-total {
border-top: 2px solid var(--fg-base);
border-bottom: none;
padding-top: 14px;
margin-top: 4px;
}
/* 왕복 배송(마지막 일반 row) 아래 얇은 라인 제거 — 총 결제의 굵은 라인만 노출 */
.ds-wizard__summary > div:nth-last-child(2) { border-bottom: none; }
.ds-wizard__summary dt {
color: var(--fg-muted);
font-size: var(--fs-body-sm);
font-weight: var(--fw-md);
margin: 0;
}
.ds-wizard__summary dd {
margin: 0;
font-weight: var(--fw-bd);
color: var(--fg-base);
font-variant-numeric: tabular-nums;
}
.ds-wizard__summary dd small {
font-size: 11px; font-weight: var(--fw-md);
color: var(--fg-muted);
margin-left: 2px;
}
.ds-wizard__summary > div.is-total dt,
.ds-wizard__summary > div.is-total dd {
font-size: 16px;
font-weight: var(--fw-bk);
color: var(--fg-base);
}
.ds-wizard__summary > div.is-total dd small { font-size: 12px; }
.ds-wizard__summary dd.is-truncate {
max-width: 60%;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* === Step 4: Tier Stack === */
.ds-tier-stack {
display: flex; flex-direction: column;
gap: 10px;
}
.ds-tier-option { display: block; cursor: pointer; position: relative; }
.ds-tier-option input { position: absolute; opacity: 0; pointer-events: none; }
.ds-tier-option__inner {
padding: 16px 18px;
border: 1.5px solid var(--border-base);
border-radius: 12px;
background: var(--bg-card);
display: flex; align-items: flex-start; gap: 14px;
transition: border-color .15s, background .15s;
}
.ds-tier-option:hover .ds-tier-option__inner { border-color: var(--gray-700); }
.ds-tier-option input:checked + .ds-tier-option__inner {
border-color: var(--gray-950);
background: var(--bg-subtle);
}
:root[data-theme="dark"] .ds-tier-option input:checked + .ds-tier-option__inner {
border-color: var(--gray-50); background: var(--gray-800);
}
.ds-tier-option__icon {
flex-shrink: 0;
width: 40px; height: 40px;
border-radius: 50%;
background: var(--bg-subtle);
border: 1px solid var(--border-base);
color: var(--fg-base);
display: grid; place-items: center;
}
.ds-tier-option__icon .mi { font-size: 20px; }
/* 빠른 처리 — 아이콘 강조 (mystic 그린) */
.ds-tier-option__icon--accent {
background: var(--mystic-100);
border-color: var(--mystic-300);
color: var(--mystic-800);
}
:root[data-theme="dark"] .ds-tier-option__icon--accent {
background: var(--mystic-900); border-color: var(--mystic-700); color: var(--mystic-100);
}
.ds-tier-option__body {
display: flex; flex-direction: column;
gap: 2px;
flex: 1; min-width: 0;
}
.ds-tier-option__name {
font-size: var(--fs-body); font-weight: var(--fw-bk);
letter-spacing: 0;
color: var(--fg-base);
}
.ds-tier-option__desc {
font-size: var(--fs-caption);
color: var(--fg-muted);
}
.ds-tier-option__meta {
font-size: 12px;
line-height: 1.4;
color: var(--fg-subtle);
}
.ds-tier-option__price {
flex-shrink: 0;
margin-left: auto;
font-size: var(--fs-body); font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums;
color: var(--fg-base);
letter-spacing: 0;
white-space: nowrap;
}
.ds-tier-option__price small { font-size: 12px; font-weight: var(--fw-md); color: var(--fg-muted); margin-left: 2px; }
.ds-tier-note {
margin-top: 12px;
font-size: var(--fs-caption);
line-height: 1.5;
color: var(--fg-muted);
}
@media (max-width: 560px) {
.ds-tier-option__inner {
padding: 14px;
gap: 12px;
}
.ds-tier-option__icon {
width: 36px;
height: 36px;
}
.ds-tier-option__price {
font-size: var(--fs-body-sm);
}
}
/* === Step 5: Address — 우편번호 + 검색 버튼 한 라인 === */
.ds-wizard__field-zip {
display: flex; gap: 8px;
}
.ds-wizard__field-zip input {
flex: 1;
padding: 10px 12px;
border: 1px solid var(--border-base);
border-radius: 8px;
font-size: var(--fs-body-sm);
font-family: inherit;
background: var(--bg-card);
color: var(--fg-base);
}
.ds-wizard__field-zip input:focus {
outline: none; border-color: var(--gray-950);
}
.ds-wizard__field-zip .ds-btn { flex-shrink: 0; }
.ds-address-form {
gap: 14px;
}
.ds-address-search-row {
align-items: stretch;
}
.ds-address-search-module {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border: 1px solid var(--border-base);
border-radius: 14px;
background: var(--bg-subtle);
}
.ds-address-search-module .ds-btn {
flex-shrink: 0;
}
.ds-address-search-module__hint {
margin: 0;
color: var(--fg-muted);
font-size: 13px;
line-height: 1.45;
}
.ds-address-search-layer {
width: 100%;
height: min(54vh, 460px);
min-height: 360px;
margin-top: 12px;
overflow: hidden;
border: 1px solid var(--border-base);
border-radius: 8px;
background: var(--bg-base);
}
.ds-address-search-layer[hidden] {
display: none !important;
}
.ds-address-search-layer.is-loading {
display: grid;
place-items: center;
}
.ds-address-search-layer.is-loading::before {
content: "주소 검색을 불러오는 중...";
color: var(--fg-muted);
font-size: 14px;
}
.ds-address-result-fields {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 10px;
}
.ds-address-result-fields[hidden] {
display: none !important;
}
.ds-address-form__hint {
margin: -4px 0 0;
color: var(--fg-muted);
font-size: 13px;
line-height: 1.5;
}
@media (max-width: 640px) {
.ds-address-search-module {
align-items: stretch;
flex-direction: column;
}
.ds-address-search-module .ds-btn {
width: 100%;
}
}
.ds-address-list {
margin-top: 14px;
padding: 14px;
border: 1px solid var(--border-base);
border-radius: 12px;
background: var(--bg-card);
}
.ds-address-list[hidden] {
display: none !important;
}
.ds-address-list__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
color: var(--fg-muted);
font-size: 13px;
}
.ds-address-list__head strong {
color: var(--fg-base);
font-size: 15px;
}
.ds-address-card {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 14px 0;
border-top: 1px solid var(--border-subtle);
}
.ds-address-card:first-of-type {
border-top: 0;
}
.ds-address-card__body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 5px;
}
.ds-address-card__body p {
margin: 0;
color: var(--fg-muted);
font-size: 14px;
line-height: 1.5;
}
.ds-address-card__title {
display: flex;
align-items: center;
gap: 8px;
color: var(--fg-base);
}
.ds-address-card__badge {
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 8px;
border-radius: 999px;
background: var(--fg-base);
color: var(--bg-base);
font-size: 12px;
font-weight: var(--fw-bd);
}
.ds-address-card__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex-wrap: wrap;
flex-shrink: 0;
}
.ds-grading-address {
display: flex;
flex-direction: column;
gap: 12px;
}
.ds-grading-address__status {
padding: 14px 16px;
border: 1px solid var(--border-base);
border-radius: 12px;
background: var(--bg-subtle);
color: var(--fg-muted);
font-size: 14px;
line-height: 1.5;
}
.ds-grading-address__list {
display: flex;
flex-direction: column;
gap: 10px;
}
.ds-grading-address__list[hidden] {
display: none !important;
}
.ds-grading-address__option {
position: relative;
display: flex;
align-items: flex-start;
gap: 12px;
width: 100%;
padding: 16px;
border: 1px solid var(--border-base);
border-radius: 14px;
background: var(--bg-card);
text-align: left;
cursor: pointer;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.ds-grading-address__option:hover {
border-color: var(--gray-500);
}
.ds-grading-address__option.is-selected {
border-color: var(--fg-base);
box-shadow: inset 0 0 0 1px var(--fg-base);
}
.ds-grading-address__radio {
display: grid;
place-items: center;
width: 22px;
height: 22px;
margin-top: 2px;
border: 2px solid var(--gray-400);
border-radius: 999px;
flex: 0 0 auto;
}
.ds-grading-address__option.is-selected .ds-grading-address__radio {
border-color: var(--fg-base);
}
.ds-grading-address__option.is-selected .ds-grading-address__radio::after {
content: "";
width: 10px;
height: 10px;
border-radius: inherit;
background: var(--fg-base);
}
.ds-grading-address__body {
min-width: 0;
flex: 1;
}
.ds-grading-address__title {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 6px;
color: var(--fg-base);
font-weight: var(--fw-bd);
}
.ds-grading-address__line,
.ds-grading-address__phone {
margin: 0;
color: var(--fg-muted);
font-size: 14px;
line-height: 1.45;
}
.ds-grading-address__badge {
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 8px;
border-radius: 999px;
background: var(--success-bg, #dcfce7);
color: var(--success-fg, #15803d);
font-size: 12px;
font-weight: var(--fw-bd);
}
#gradingAddressForm[hidden] {
display: none !important;
}
#gradingSaveAddressBtn {
align-self: flex-start;
}
@media (max-width: 720px) {
.ds-address-card {
flex-direction: column;
}
.ds-address-card__actions {
justify-content: flex-start;
width: 100%;
}
}
/* === Step 6: Review (카드 사진 + 메타) === */
.ds-wizard__review {
display: flex; align-items: center; gap: 14px;
padding: 12px;
border: 1px solid var(--border-base);
border-radius: 10px;
background: var(--bg-subtle);
}
:root[data-theme="dark"] .ds-wizard__review { background: var(--gray-900); }
.ds-wizard__review-thumb {
width: 56px; height: 70px;
background-color: var(--gray-100);
background-image: none;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border-radius: 6px;
border: 1px solid var(--border-base);
flex-shrink: 0;
}
.ds-wizard__review-thumb.has-image {
background-color: var(--gray-950);
}
.ds-wizard__review-meta {
display: flex; flex-direction: column;
gap: 2px;
min-width: 0;
}
.ds-wizard__review-meta-line {
font-size: var(--fs-caption);
color: var(--fg-muted);
font-variant-numeric: tabular-nums;
}
.ds-wizard__review-meta-name {
font-size: var(--fs-body);
font-weight: var(--fw-bk);
color: var(--fg-base);
letter-spacing: -0.005em;
}
/* ==========================================================
=== GRADING DONE === 신청 완료 + 다음 단계 안내 모달
========================================================== */
.ds-modal__panel--done {
max-width: 460px;
width: 100%;
padding: 24px;
}
.ds-modal__panel--done .ds-modal__icon--success {
width: 56px; height: 56px;
margin: 0 auto 12px;
border-radius: 50%;
background: var(--mystic-100);
color: var(--mystic-700);
display: grid; place-items: center;
}
.ds-modal__panel--done .ds-modal__icon--success .mi { font-size: 32px; }
.ds-modal__panel--done .ds-modal__title { text-align: center; }
.ds-modal__panel--done .ds-modal__sub { text-align: center; margin-bottom: 16px; }
/* 신청번호 — 완료 모달의 핵심 정보 (저장 필수) */
.ds-app-number {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding: 14px 16px;
margin: 0 0 16px;
background: var(--bg-subtle);
border: 1.5px solid var(--gray-950);
border-radius: 10px;
}
:root[data-theme="dark"] .ds-app-number { background: var(--gray-900); border-color: var(--gray-50); }
.ds-app-number__main {
display: flex; flex-direction: column;
gap: 2px;
min-width: 0;
}
.ds-app-number__label {
font-size: var(--fs-caption);
color: var(--fg-muted);
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: var(--fw-bd);
}
.ds-app-number__value {
font-family: "SF Mono", Menlo, Consolas, monospace;
font-size: 16px;
font-weight: var(--fw-bk);
color: var(--fg-base);
letter-spacing: 0.02em;
font-variant-numeric: tabular-nums;
}
.ds-grading-next-title {
font-size: var(--fs-caption);
font-weight: var(--fw-bk);
color: var(--fg-muted);
letter-spacing: 0.04em;
text-transform: uppercase;
margin: 0 0 8px;
text-align: left;
}
.ds-grading-next {
list-style: none; margin: 0 0 20px; padding: 0;
display: flex; flex-direction: column;
border: 1px solid var(--border-base);
border-radius: 10px;
overflow: hidden;
}
.ds-grading-next li {
display: flex; align-items: center; gap: 14px;
padding: 14px 16px;
border-top: 1px solid var(--border-subtle);
}
.ds-grading-next li:first-child { border-top: none; }
/* v0.5.1: 단계 숫자 — 어두운 강조 → 부드러운 light tone (gray-100 bg + dark text) */
.ds-grading-next__num {
width: 24px; height: 24px;
flex-shrink: 0;
border-radius: 50%;
background: var(--gray-100);
color: var(--gray-700);
display: grid; place-items: center;
font-size: 12px; font-weight: var(--fw-bd);
border: 1px solid var(--gray-200);
}
:root[data-theme="dark"] .ds-grading-next__num {
background: var(--gray-800);
color: var(--gray-200);
border-color: var(--gray-700);
}
.ds-grading-next li > div {
display: flex; flex-direction: column;
gap: 1px;
}
.ds-grading-next strong {
font-size: var(--fs-body-sm);
font-weight: var(--fw-bd); /* v0.5: bk → bd (max 600) */
color: var(--fg-base);
}
.ds-grading-next span {
font-size: var(--fs-caption);
color: var(--fg-muted);
}
/* ==========================================================
Pool Filter — 필터 칩 (전체/미스틱/레전더리/...)
========================================================== */
.ds-pool-filter {
display: flex; gap: 6px; flex-wrap: wrap;
padding-block: 12px 16px;
}
.ds-pool-filter__chip {
display: inline-flex; align-items: center;
height: 30px; padding: 0 12px;
border-radius: var(--r-pill);
background: var(--bg-card);
border: 1px solid var(--border-strong);
font-size: var(--fs-caption); font-weight: var(--fw-bd);
color: var(--fg-subtle);
letter-spacing: -0.005em;
cursor: pointer;
transition: var(--t-fast) ease-out;
}
.ds-pool-filter__chip:hover { border-color: var(--gray-950); color: var(--fg-base); }
.ds-pool-filter__chip[aria-pressed="true"] {
background: var(--gray-950); color: var(--gray-0); border-color: var(--gray-950);
}
:root[data-theme="dark"] .ds-pool-filter__chip[aria-pressed="true"] {
background: var(--gray-50); color: var(--gray-950); border-color: var(--gray-50);
}
.ds-pool-filter__count {
margin-left: 4px;
font-size: var(--fs-caption-sm); font-weight: var(--fw-md);
opacity: 0.7;
font-variant-numeric: tabular-nums;
}
/* 통합 풀 그리드 — 좌측 컬럼(좁아짐)에 들어가므로 3컬럼 */
.ds-pool-grid--unified { grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 1023px) { .ds-pool-grid--unified { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 599px) { .ds-pool-grid--unified { grid-template-columns: repeat(2, 1fr); } }
/* Pool toolbar — 필터 chip 줄 + 정렬 버튼 한 줄에 */
.ds-pool-toolbar {
display: flex; justify-content: space-between; align-items: center;
gap: 16px; flex-wrap: wrap;
margin-bottom: 16px;
}
.ds-pool-toolbar .ds-pool-filter { margin: 0; }
.ds-pool-sort {
display: inline-flex; gap: 4px;
padding: 3px;
background: var(--bg-subtle);
border-radius: 999px;
}
.ds-pool-sort__btn {
display: inline-flex; align-items: center;
height: 28px; padding: 0 14px;
font-size: var(--fs-caption);
font-weight: var(--fw-md);
color: var(--fg-muted);
background: transparent;
border: none;
border-radius: 999px;
cursor: pointer;
white-space: nowrap;
transition: all 0.15s ease;
}
.ds-pool-sort__btn:hover { color: var(--fg-base); }
.ds-pool-sort__btn[aria-pressed="true"] {
background: var(--bg-base);
color: var(--fg-base);
font-weight: var(--fw-bd);
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
:root[data-theme="dark"] .ds-pool-sort__btn[aria-pressed="true"] {
background: var(--gray-900);
}
/* ==========================================================
=== POOL SECTIONS === Tier 분리 (chase / browse)
결제 결정용 chase 카드(Mystic+Legend)는 큰 카드, browse는 compact
========================================================== */
.ds-pool-section { margin-bottom: 28px; }
.ds-pool-section:last-child { margin-bottom: 0; }
.ds-pool-section[hidden] { display: none; }
.ds-pool-section__head {
display: flex; justify-content: space-between; align-items: baseline;
gap: 12px; margin: 0 0 12px;
}
.ds-pool-section__title {
font-size: var(--fs-body); font-weight: var(--fw-bd);
color: var(--fg-base);
letter-spacing: -0.01em;
margin: 0;
}
.ds-pool-section__meta {
font-size: var(--fs-caption);
color: var(--fg-muted);
letter-spacing: 0;
}
/* Chase grid — 결정용. 카드 크게 (3 col desktop) */
.ds-pool-grid--chase {
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
@media (max-width: 1023px) { .ds-pool-grid--chase { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 599px) { .ds-pool-grid--chase { grid-template-columns: repeat(2, 1fr); } }
/* Browse grid — audit용. compact (5 col desktop) */
.ds-pool-grid--browse {
grid-template-columns: repeat(5, 1fr);
gap: 8px;
}
@media (max-width: 1023px) { .ds-pool-grid--browse { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 599px) { .ds-pool-grid--browse { grid-template-columns: repeat(3, 1fr); } }
.ds-pool-grid--browse .ds-pool-card__label {
font-size: 9px;
padding: 2px 6px;
}
.ds-pool-grid--browse .ds-pool-card__name {
font-size: 11px;
padding: 4px 6px;
}
@media (max-width: 1023px) {
.ds-footer__top {
grid-template-columns: 1fr;
gap: var(--stack-lg);
padding-block: 40px 32px;
}
.ds-footer__brand { grid-column: 1 / -1; max-width: 100%; }
.ds-footer__cols { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); gap: var(--stack-md); }
}
@media (max-width: 599px) {
.ds-footer__cols { grid-template-columns: repeat(2, 1fr); gap: var(--stack-lg); }
.ds-footer__bottom { padding-bottom: 24px; }
}
/* ==========================================================
Auth state — 로그인 전/후 표시 토글
로 제어
========================================================== */
[data-auth="guest"] .user-only { display: none !important; }
[data-auth="user"] .guest-only { display: none !important; }
/* GNB 우측 슬롯 안에서는 display:none 대신 opacity+pointer-events 토글 — 슬롯 폭 유지 */
[data-auth="guest"] .ds-gnb__icons .user-only,
[data-auth="user"] .ds-gnb__icons .guest-only {
display: inline-flex !important;
visibility: hidden;
opacity: 0;
pointer-events: none;
}
/* === Dev tools production hide ===
showcase 시연용 floating UI (auth toggle / state toggle / qty toggle)는 production에서 hidden.
localStorage.kado_dev = '1' (또는 body[data-dev="1"]) 일 때만 표시. */
.auth-toggle,
.ds-state-toggle,
.ds-open-qty {
display: none !important;
}
body[data-dev="1"] .auth-toggle { display: inline-flex !important; }
body[data-dev="1"] .ds-state-toggle,
body[data-dev="1"] .ds-open-qty { display: flex !important; }
/* 시범용 auth 토글 버튼 (theme-toggle 옆) */
.auth-toggle {
position: fixed; top: 12px; right: 56px; z-index: 101;
display: inline-flex; align-items: center; gap: 6px;
height: 36px; padding: 0 14px;
border-radius: var(--r-pill);
background: var(--bg-card); border: 1px solid var(--border-base);
box-shadow: var(--shadow-1);
font-size: var(--fs-caption-sm); font-weight: var(--fw-bd);
color: var(--fg-base);
}
.auth-toggle .mi { font-size: 14px; color: var(--fg-muted); }
/* GNB 사용자 영역 (로그인 후) */
.ds-gnb__user {
display: inline-flex; align-items: center; gap: 10px;
min-width: 0;
width: auto;
flex: 0 0 auto;
padding: 4px 4px 4px 12px;
border-radius: var(--r-pill);
background: var(--bg-subtle);
text-decoration: none;
transition: background var(--t-fast) ease-out;
}
.ds-gnb__user:hover { background: var(--bg-muted); }
.ds-gnb__balance {
display: inline-block;
min-width: 0;
text-align: right;
font-size: 14px; font-weight: var(--fw-bd, 600);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
color: var(--fg-base, #030712); letter-spacing: -0.005em;
white-space: nowrap;
}
.ds-gnb__balance small,
.ds-gnb__balance-unit { color: var(--fg-muted, #6b7280); font-size: 12px; font-weight: var(--fw-rg, 400); margin-left: 2px; }
.ds-gnb__avatar {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--gray-950); color: var(--gray-0);
display: grid; place-items: center;
font-size: 11px; font-weight: var(--fw-bk);
letter-spacing: -0.005em;
}
:root[data-theme="dark"] .ds-gnb__avatar { background: var(--gray-50); color: var(--gray-950); }
/* ==========================================================
MyPage — 프로필 + 진행 활동 + 빠른 메뉴 + 최근 활동
========================================================== */
/* v0.7: 컴팩트 hero — padding 28 → 22, single row 정보 위계 */
.ds-profile {
display: flex; align-items: center; gap: 20px;
padding: 22px 24px;
background: var(--gray-950); color: var(--gray-0);
border-radius: 14px;
position: relative; overflow: hidden;
isolation: isolate;
}
.ds-profile__bg {
position: absolute; inset: 0; z-index: 0;
background:
radial-gradient(ellipse at 90% 20%, rgba(255,255,255,0.18) 0%, transparent 60%);
}
.ds-profile__avatar {
width: 64px; height: 64px; /* v0.7: 72 → 64 (compact hero) */
border-radius: 50%;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.20);
display: grid; place-items: center;
font-size: 22px; font-weight: var(--fw-bk);
flex-shrink: 0;
position: relative; z-index: 1;
background-size: cover;
background-position: center;
}
/* v0.7: editable avatar — 프로필 사진 변경 모듈 */
button.ds-profile__avatar--editable {
cursor: pointer;
padding: 0;
color: inherit;
font-family: inherit;
overflow: hidden;
transition: transform var(--t-fast) ease-out;
}
button.ds-profile__avatar--editable:hover {
transform: scale(1.03);
}
.ds-profile__avatar-letter {
position: relative; z-index: 1;
}
.ds-profile__avatar-edit {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,0.55);
color: var(--gray-0);
opacity: 0;
transition: opacity var(--t-fast) ease-out;
border-radius: inherit;
z-index: 2;
}
.ds-profile__avatar-edit .mi { font-size: 22px; }
button.ds-profile__avatar--editable:hover .ds-profile__avatar-edit,
button.ds-profile__avatar--editable:focus-visible .ds-profile__avatar-edit {
opacity: 1;
}
/* 이미지 업로드 후 — letter 숨김 */
button.ds-profile__avatar--editable[data-has-image="true"] .ds-profile__avatar-letter { display: none; }
.ds-profile__body { flex: 1; min-width: 0; position: relative; z-index: 1; }
/* v0.7: name top, sub inline (handle · 등급 · 가입일) → 1줄로 압축 */
.ds-profile__name { font-size: var(--fs-h3); font-weight: var(--fw-bk); letter-spacing: -0.012em; line-height: 1.15; margin: 0 0 6px; }
.ds-profile__sub {
display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
font-size: var(--fs-caption); color: var(--gray-400);
font-weight: var(--fw-md);
margin: 0;
}
.ds-profile__handle { color: var(--gray-300); font-weight: var(--fw-bd); }
.ds-profile__sep { color: var(--gray-600); }
/* legacy 호환 (다른 페이지) */
.ds-profile__meta { font-size: var(--fs-caption); color: var(--gray-400); margin-top: 6px; }
.ds-profile__settings {
position: absolute; top: 16px; right: 16px;
z-index: 2;
width: 36px; height: 36px;
border-radius: 50%;
display: grid; place-items: center;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.14);
color: var(--gray-0);
text-decoration: none;
transition: var(--t-fast) ease-out;
}
.ds-profile__settings:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.28); }
.ds-profile__settings .mi { font-size: 20px; }
/* v0.7: balance — 라벨 제거, amount + 충전 버튼만 우측에 정렬 */
.ds-profile__balance {
display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
position: relative; z-index: 1;
padding: 0 0 0 20px;
border-left: 1px solid rgba(255,255,255,0.14);
flex-shrink: 0;
}
.ds-profile__balance-amount {
font-size: 26px; font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
letter-spacing: -0.012em;
line-height: 1;
}
.ds-profile__balance-amount small { font-size: 13px; color: var(--gray-400); font-weight: var(--fw-rg); margin-left: 2px; }
.ds-profile__balance .ds-btn { margin: 0; }
@media (max-width: 767px) {
/* v0.7 M6: hero 슬림 — 한 row 유지 (column stack 안 함), 컴팩트 spacing */
.ds-profile {
flex-direction: row !important;
align-items: center !important;
gap: 14px !important;
padding: 16px 18px !important;
}
.ds-profile__avatar { width: 52px; height: 52px; font-size: 18px; }
.ds-profile__name { font-size: 18px; margin-bottom: 2px; }
.ds-profile__sub { font-size: 11px; gap: 4px; }
.ds-profile__sub > span:nth-child(n+5) { display: none; } /* 가입일 hide on tight viewport */
.ds-profile__balance {
padding-left: 14px !important;
border-left: 1px solid rgba(255,255,255,0.14);
align-items: flex-end;
flex-shrink: 0;
gap: 6px !important;
}
.ds-profile__balance-amount { font-size: 18px; }
.ds-profile__balance-amount small { font-size: 11px; }
.ds-profile__balance .ds-btn { padding: 0 10px !important; height: 28px !important; font-size: 11px !important; }
}
/* v0.7 M6: 통계 카드 horizontal snap rail (모바일 전용) */
@media (max-width: 767px) {
.ds-profile-stats {
display: flex !important;
grid-template-columns: none !important;
gap: 10px !important;
overflow-x: auto;
scroll-snap-type: x mandatory;
margin-inline: -16px;
padding: 0 16px 4px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.ds-profile-stats::-webkit-scrollbar { display: none; }
.ds-profile-stats > .ds-profile-stat {
flex: 0 0 60%; /* 3개 카드 + peek */
scroll-snap-align: start;
}
}
/* 진행 중 활동 4분할 */
.ds-activity-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1023px) { .ds-activity-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .ds-activity-grid { grid-template-columns: 1fr; } }
/* ==========================================================
v0.7: 컬렉션 통계 헤더 재설계 (.ds-coll-summary)
"내 카드 + 가치 + 다음 행동" 1차 목표 정합
4 cards: 총 가치 / 등급 분포 / Top Mover / 진행 중 활동
========================================================== */
.ds-coll-summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
@media (max-width: 1023px) { .ds-coll-summary { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .ds-coll-summary { grid-template-columns: 1fr; } }
.ds-coll-summary__card {
display: flex; flex-direction: column;
padding: 18px 20px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 10px;
text-decoration: none; color: inherit;
transition: var(--t-fast) ease-out;
min-height: 140px; /* 모든 카드 동일 height — visual weight 균형 */
gap: 6px;
}
a.ds-coll-summary__card:hover {
border-color: var(--gray-300);
transform: translateY(-1px);
}
.ds-coll-summary__label {
font-size: var(--fs-caption); color: var(--fg-muted);
font-weight: var(--fw-md);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.ds-coll-summary__value {
font-size: 24px; font-weight: var(--fw-bk);
letter-spacing: -0.012em;
font-variant-numeric: tabular-nums;
color: var(--fg-base);
line-height: 1.1;
}
.ds-coll-summary__value small {
font-size: 14px; font-weight: var(--fw-rg);
color: var(--fg-muted);
margin-left: 2px;
}
.ds-coll-summary__delta {
font-size: var(--fs-caption); font-weight: var(--fw-bd);
font-variant-numeric: tabular-nums;
}
.ds-coll-summary__delta--up { color: var(--success-700); }
.ds-coll-summary__delta--down { color: var(--danger-600); }
/* card--value: 강조 (검정 배경) */
.ds-coll-summary__card--value {
background: var(--gray-950);
border-color: var(--gray-950);
color: var(--gray-0);
}
:root[data-theme="dark"] .ds-coll-summary__card--value {
background: var(--gray-50); color: var(--gray-950); border-color: var(--gray-50);
}
.ds-coll-summary__card--value .ds-coll-summary__label { color: var(--gray-400); }
.ds-coll-summary__card--value .ds-coll-summary__value { color: var(--gray-0); }
:root[data-theme="dark"] .ds-coll-summary__card--value .ds-coll-summary__label { color: var(--gray-600); }
:root[data-theme="dark"] .ds-coll-summary__card--value .ds-coll-summary__value { color: var(--gray-950); }
.ds-coll-summary__card--value .ds-coll-summary__delta--up { color: var(--mystic-300); }
/* card--dist: stacked bar 시각화 */
.ds-coll-summary__bar {
display: flex;
height: 6px;
border-radius: 3px;
overflow: hidden;
background: var(--bg-muted);
margin-top: auto;
}
.ds-coll-summary__bar > span {
height: 100%;
width: var(--seg);
flex-shrink: 0;
}
/* v0.7 T1: legend — color dot + label + count chip list */
.ds-coll-summary__legend {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap;
gap: 6px 14px;
font-size: 11px; color: var(--fg-subtle);
letter-spacing: 0.02em;
font-variant-numeric: tabular-nums;
line-height: 1.4;
}
.ds-coll-summary__legend li {
display: inline-flex; align-items: center; gap: 5px;
white-space: nowrap;
}
.ds-coll-summary__legend i {
width: 8px; height: 8px;
border-radius: 2px;
display: inline-block;
flex-shrink: 0;
}
.ds-coll-summary__legend strong {
color: var(--fg-base); font-weight: var(--fw-bd);
}
/* card--mover: Top mover — 좌측 card thumb + 우측 정보 (수직 중앙 정렬) */
.ds-coll-summary__card--mover {
flex-direction: row !important;
gap: 14px;
align-items: center;
}
.ds-coll-summary__mover-thumb {
width: 56px; aspect-ratio: 5 / 7;
background-color: var(--gray-100);
background-image: none;
background-size: auto 88%;
background-repeat: no-repeat;
background-position: center;
border-radius: 4px;
flex-shrink: 0;
}
:root[data-theme="dark"] .ds-coll-summary__mover-thumb { background-color: var(--gray-800); }
.ds-coll-summary__mover-body {
display: flex; flex-direction: column;
flex: 1; min-width: 0;
gap: 4px;
}
.ds-coll-summary__mover-name {
font-size: var(--fs-body-sm); font-weight: var(--fw-bd);
color: var(--fg-base);
letter-spacing: -0.005em;
white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
.ds-coll-summary__mover-delta {
font-size: 18px; font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums;
margin-top: 2px; /* tight underneath name (이전 auto는 카드 하단으로 push해서 어색 spacing 발생) */
}
.ds-coll-summary__mover-delta small {
font-size: var(--fs-caption); color: var(--fg-muted);
font-weight: var(--fw-rg);
margin-left: 4px;
}
/* card--actions: 진행 중 활동 list — vertical row 균등 + center 정렬 */
.ds-coll-summary__card--actions {
justify-content: space-between; /* 라벨 top, list 중간/아래 균등 */
}
.ds-coll-summary__action-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 8px;
flex: 1;
justify-content: center;
}
.ds-coll-summary__action-list li a {
display: flex; align-items: center; gap: 10px;
padding: 4px 0;
font-size: var(--fs-body-sm);
color: var(--fg-base);
text-decoration: none;
}
.ds-coll-summary__action-list li a:hover { color: var(--mystic-700); }
:root[data-theme="dark"] .ds-coll-summary__action-list li a:hover { color: var(--mystic-400); }
.ds-coll-summary__action-list .mi { font-size: 18px; color: var(--fg-muted); flex-shrink: 0; }
.ds-coll-summary__action-list strong {
font-size: 16px; font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums;
}
.ds-coll-summary__action-list span {
color: var(--fg-muted);
font-size: var(--fs-caption);
}
.ds-coll-summary__action-text {
display: inline-flex; align-items: baseline; gap: 4px;
}
/* ==========================================================
v0.7 B2: my-collection 모바일 전용 재설계 — "이건 모바일 앱이구나" feel
========================================================== */
@media (max-width: 767px) {
/* 1. 헤더 슬림 — 제목 + 공개 토글 한 줄, 긴 sub 제거 */
.ds-coll-stats {
padding-block: 16px 12px !important;
}
.ds-coll-stats__head {
flex-direction: row !important;
align-items: center !important;
margin-bottom: 14px;
gap: 12px;
}
.ds-coll-stats__title { font-size: 22px !important; line-height: 1.2; margin: 0 !important; }
.ds-coll-stats__sub { display: none !important; } /* 긴 안내문 제거 (스크롤 절약) */
.ds-coll-visibility {
flex-direction: row !important;
gap: 8px;
align-items: center !important;
flex-shrink: 0;
}
.ds-coll-visibility__row { gap: 6px; }
.ds-coll-visibility__label { font-size: 11px; color: var(--fg-muted); }
.ds-coll-visibility__hint { display: none !important; } /* hint는 모바일 생략 */
/* 2. 통계 4-card → 컴팩트 stack (불필요 padding 제거) */
.ds-coll-summary {
grid-template-columns: 1fr !important;
gap: 8px;
}
/* card--value: hero 유지 (검정 강조) — 압축 */
.ds-coll-summary__card {
min-height: 0 !important;
padding: 14px 16px !important;
flex-direction: row;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.ds-coll-summary__card--value {
flex-direction: column;
align-items: flex-start;
padding: 16px 18px !important;
}
.ds-coll-summary__card--value .ds-coll-summary__value { font-size: 28px; }
/* card--dist: 한 줄 inline 표기 — 바 + legend 컴팩트 */
.ds-coll-summary__card--dist {
display: grid !important;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
grid-template-areas:
"label value"
"bar bar";
gap: 4px 12px;
column-gap: 12px;
}
.ds-coll-summary__card--dist .ds-coll-summary__label { grid-area: label; align-self: center; }
.ds-coll-summary__card--dist .ds-coll-summary__value { grid-area: value; text-align: right; font-size: 18px; }
.ds-coll-summary__card--dist .ds-coll-summary__bar { grid-area: bar; margin-top: 2px; }
/* v0.7 T1: 모바일에서도 legend 노출 — bar 색만 봐선 어떤 그레이더가 몇 장인지 모름 */
.ds-coll-summary__card--dist {
grid-template-areas:
"label value"
"bar bar"
"legend legend" !important;
}
.ds-coll-summary__card--dist .ds-coll-summary__legend {
display: flex !important;
grid-area: legend;
flex-wrap: wrap;
gap: 4px 10px;
font-size: 11px;
color: var(--fg-muted);
line-height: 1.3;
}
/* card--mover: 한 줄 inline */
.ds-coll-summary__card--mover {
display: grid !important;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto auto;
grid-template-areas:
"label . delta"
"name name name";
gap: 2px 8px;
}
.ds-coll-summary__card--mover .ds-coll-summary__label { grid-area: label; }
.ds-coll-summary__card--mover .ds-coll-summary__mover-delta { grid-area: delta; font-size: 14px; margin: 0; }
.ds-coll-summary__card--mover .ds-coll-summary__mover-delta small { display: none; }
.ds-coll-summary__card--mover .ds-coll-summary__mover-name { grid-area: name; font-size: 13px; color: var(--fg-muted); }
/* card--actions: 모바일에선 column layout — 라벨 + 2 chip pair (라벨 살림) */
.ds-coll-summary__card--actions {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
}
.ds-coll-summary__card--actions .ds-coll-summary__action-list {
flex-direction: row;
gap: 6px;
}
.ds-coll-summary__card--actions .ds-coll-summary__action-list li {
flex: 1;
}
.ds-coll-summary__card--actions .ds-coll-summary__action-list li a {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px;
background: var(--bg-subtle);
border-radius: 8px;
font-size: 12px;
line-height: 1.2;
}
:root[data-theme="dark"] .ds-coll-summary__card--actions .ds-coll-summary__action-list li a {
background: var(--gray-900);
}
.ds-coll-summary__card--actions .ds-coll-summary__action-list .mi {
font-size: 16px;
flex-shrink: 0;
}
/* v0.7 T1: count "3건" + label "등급 심사 중" 명확히 2줄 */
.ds-coll-summary__action-text {
display: flex; flex-direction: column;
gap: 1px;
line-height: 1.2;
flex: 1; min-width: 0;
}
.ds-coll-summary__action-count {
font-size: 15px; font-weight: var(--fw-bd);
color: var(--fg-base); line-height: 1.1;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.ds-coll-summary__action-label {
font-size: 11px; font-weight: var(--fw-md);
color: var(--fg-muted);
line-height: 1.2;
}
/* card--mover 모바일 — thumb visible, 정보 컴팩트 */
.ds-coll-summary__card--mover {
grid-template-areas: none !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
}
.ds-coll-summary__mover-thumb { width: 40px; }
.ds-coll-summary__card--mover .ds-coll-summary__mover-body {
display: grid !important;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
grid-template-areas:
"label delta"
"name name";
gap: 2px 8px;
}
.ds-coll-summary__card--mover .ds-coll-summary__label { grid-area: label; align-self: center; }
.ds-coll-summary__card--mover .ds-coll-summary__mover-delta {
grid-area: delta;
font-size: 14px;
margin: 0;
align-self: center;
}
.ds-coll-summary__card--mover .ds-coll-summary__mover-delta small { display: none; }
.ds-coll-summary__card--mover .ds-coll-summary__mover-name {
grid-area: name;
font-size: 13px;
color: var(--fg-base);
font-weight: var(--fw-bd);
}
/* 3. body padding-bottom — tabbar 위까지 카드 그리드 보이도록 (이미 v0.6에 있음) */
.ds-coll-stats { state-hide: false; }
}
.ds-activity-card {
display: flex; flex-direction: column; gap: 6px;
padding: 18px;
background: var(--bg-card); border: 1px solid var(--border-base);
border-radius: 10px;
text-decoration: none; color: inherit;
transition: var(--t-fast) ease-out;
}
.ds-activity-card:hover { border-color: var(--gray-300); }
.ds-activity-card__icon {
width: 32px; height: 32px;
border-radius: 8px;
background: var(--bg-muted);
display: grid; place-items: center;
margin-bottom: 4px;
}
.ds-activity-card__icon .mi { font-size: 18px; }
.ds-activity-card__label { font-size: var(--fs-caption); color: var(--fg-muted); font-weight: var(--fw-md); }
.ds-activity-card__count {
display: flex; align-items: baseline; gap: 4px;
font-size: 22px; font-weight: var(--fw-bk); letter-spacing: -0.01em;
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.ds-activity-card__count small { font-size: var(--fs-caption); color: var(--fg-muted); font-weight: var(--fw-rg); }
.ds-activity-card__hint { font-size: var(--fs-caption-sm); color: var(--fg-faint); }
/* 빠른 메뉴 */
/* v0.7: 로그아웃 제거로 6 items — 6-col로 정합, 각 button width 13.3% → 16.6%로 commerce-grade */
.ds-quick-menu { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
@media (max-width: 1023px) { .ds-quick-menu { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 599px) { .ds-quick-menu { grid-template-columns: repeat(2, 1fr); } }
.ds-quick-item {
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 18px 12px;
background: var(--bg-card); border: 1px solid var(--border-base);
border-radius: 10px;
text-decoration: none; color: inherit;
transition: var(--t-fast) ease-out;
text-align: center;
}
.ds-quick-item:hover { border-color: var(--gray-300); }
.ds-quick-item .mi { font-size: 22px; color: var(--fg-base); }
.ds-quick-item__label { font-size: var(--fs-caption); font-weight: var(--fw-bd); }
button.ds-quick-item { font: inherit; cursor: pointer; }
.ds-quick-item--logout { color: var(--danger-500, #dc2626); }
.ds-quick-item--logout .mi { color: var(--danger-500, #dc2626); }
.ds-quick-item--logout:hover { border-color: var(--danger-500, #dc2626); background: color-mix(in srgb, var(--danger-500, #dc2626) 4%, transparent); }
/* 최근 활동 list */
.ds-recent {
background: var(--bg-card); border: 1px solid var(--border-base);
border-radius: 10px;
overflow: hidden;
}
.ds-recent__row {
display: flex; align-items: center; gap: 14px;
padding: 14px 18px;
border-top: 1px solid var(--border-subtle);
text-decoration: none; color: inherit;
transition: background var(--t-fast) ease-out;
}
.ds-recent__row:first-child { border-top: none; }
.ds-recent__row:hover { background: var(--bg-subtle); }
.ds-recent__icon {
width: 32px; height: 32px;
border-radius: 8px;
background: var(--bg-muted);
display: grid; place-items: center;
flex-shrink: 0;
}
.ds-recent__icon .mi { font-size: 16px; }
.ds-recent__body { flex: 1; min-width: 0; }
.ds-recent__title { font-size: var(--fs-body-sm); font-weight: var(--fw-bd); }
.ds-recent__sub { font-size: var(--fs-caption-sm); color: var(--fg-muted); margin-top: 2px; }
.ds-recent__amount { font-size: var(--fs-body-sm); font-weight: var(--fw-bd); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; flex-shrink: 0; }
.ds-recent__amount--in { color: var(--success-700); }
.ds-recent__amount--out { color: var(--fg-base); }
.ds-recent__time { font-size: var(--fs-caption-sm); color: var(--fg-faint); flex-shrink: 0; min-width: 60px; text-align: right; }
@media (max-width: 599px) { .ds-recent__time { display: none; } }
.ds-recent--empty {
border-style: dashed;
background: var(--bg-subtle);
overflow: visible;
}
.ds-recent-empty {
min-height: 188px;
padding: 38px 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
text-align: center;
}
.ds-recent-empty__icon {
width: 48px;
height: 48px;
display: inline-grid;
place-items: center;
border-radius: 50%;
background: var(--bg-card);
color: var(--fg-muted);
box-shadow: var(--shadow-1);
}
.ds-recent-empty__icon .mi {
font-size: 24px;
}
.ds-recent-empty__title {
margin: 4px 0 0;
font-size: var(--fs-body-lg);
font-weight: var(--fw-bk);
color: var(--fg-base);
letter-spacing: 0;
}
.ds-recent-empty__sub {
margin: 0;
font-size: var(--fs-body-sm);
color: var(--fg-muted);
line-height: 1.5;
}
.ds-recent-empty__actions {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.ds-recent-empty__link {
min-height: 38px;
padding: 0 14px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: var(--r-pill);
border: 1px solid var(--border-base);
background: var(--bg-card);
color: var(--fg-base);
text-decoration: none;
font-size: var(--fs-caption);
font-weight: var(--fw-bd);
}
.ds-recent-empty__link--primary {
border-color: var(--gray-950);
background: var(--gray-950);
color: var(--gray-0);
}
:root[data-theme="dark"] .ds-recent-empty__link--primary {
border-color: var(--gray-50);
background: var(--gray-50);
color: var(--gray-950);
}
.ds-recent-empty__link .mi {
font-size: 16px;
}
@media (max-width: 599px) {
.ds-recent-empty {
min-height: 220px;
padding: 36px 18px;
}
.ds-recent-empty__actions {
width: 100%;
}
.ds-recent-empty__link {
flex: 1 1 140px;
}
}
/* 공지사항 카드 (Safe Vault 대신) — 글로벌 서비스 카드와 같은 .ds-service-card 사용
다만 안에 list 형태로 보여줄 수도. 일단 같은 형태 + 다른 카피로 처리됨 */
/* ====== FAB — Material Extended FAB 패턴 ====== */
.ds-fab {
position: fixed; right: var(--fab-bottom); bottom: var(--fab-bottom); z-index: 40;
height: 56px;
padding: 0 22px; /* icon-only는 width 56로 override */
border-radius: var(--r-pill);
background: var(--gray-950); color: var(--gray-0);
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
box-shadow: var(--shadow-4);
transition: transform var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
font-size: var(--fs-body);
font-weight: var(--fw-bk);
text-decoration: none;
}
:root[data-theme="dark"] .ds-fab { background: var(--gray-50); color: var(--gray-950); }
.ds-fab .mi { font-size: 22px; font-variation-settings: 'FILL' 1, 'wght' 500; }
.ds-fab:hover { box-shadow: var(--shadow-3); transform: translateY(-1px); }
.ds-fab__label { letter-spacing: -0.01em; }
/* icon-only variant — extended가 아닐 때 (default circular) */
.ds-fab:not(.ds-fab--extended) {
width: 56px; padding: 0;
}
.ds-fab:not(.ds-fab--extended) .ds-fab__label { display: none; }
@media (max-width: 767px) { .ds-fab { bottom: 84px; } }
/* ====== Page switcher ====== */
.page { display: none; }
.page[data-active="true"] { display: block; }
/* ====== Tab panel switcher (가챠 페이지: 브랜드/리미티드 전환) ====== */
.ds-tabpanel { display: none; }
.ds-tabpanel[data-active="true"] { display: block; }
/* ==========================================================
Section Hero — 탭 컨텐츠 위에 큰 타이틀 + 라벨 chip을 두는 헤더
========================================================== */
.ds-section-hero {
text-align: center;
padding-block: 48px 32px;
}
.ds-section-hero--left { text-align: left; padding-block: 32px 24px; }
.ds-section-hero__chip {
display: inline-flex; align-items: center;
height: 28px; padding: 0 12px;
border-radius: var(--r-pill);
font-size: var(--fs-caption-sm); font-weight: var(--fw-bk);
letter-spacing: -0.005em;
}
.ds-section-hero__chip--brand { background: var(--gray-950); color: var(--gray-0); }
.ds-section-hero__chip--dark { background: var(--gray-950); color: var(--gray-0); }
:root[data-theme="dark"] .ds-section-hero__chip--dark { background: var(--gray-50); color: var(--gray-950); }
.ds-section-hero__title {
margin-top: 16px;
font-size: clamp(28px, 3.4vw, 36px);
line-height: 1.2; letter-spacing: -0.02em;
font-weight: var(--fw-bk);
}
/* ==========================================================
Pouch — 브랜드 팩 (봉지형). 흩뿌려진 배치 + 봉지스러운 비율
========================================================== */
.pouch-scatter {
position: relative;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 24px;
padding-block: 32px;
align-items: end;
}
/* 흩뿌림 효과 — 짝수/홀수 인덱스로 미세한 회전과 vertical offset */
.pouch-scatter > .ds-pouch:nth-child(1) { transform: translateY(-12px) rotate(-3deg); }
.pouch-scatter > .ds-pouch:nth-child(2) { transform: translateY(8px) rotate(2deg); }
.pouch-scatter > .ds-pouch:nth-child(3) { transform: translateY(-20px) rotate(0deg); z-index: 2; }
.pouch-scatter > .ds-pouch:nth-child(4) { transform: translateY(12px) rotate(-2deg); }
.pouch-scatter > .ds-pouch:nth-child(5) { transform: translateY(0) rotate(3deg); }
.ds-pouch {
display: flex; flex-direction: column; align-items: stretch;
text-decoration: none; color: inherit;
transition: transform 200ms var(--ease-emp);
}
.ds-pouch:hover { transform: rotate(0deg) !important; }
.ds-pouch__bag {
aspect-ratio: 4 / 5;
border-radius: 6px;
background: var(--gray-100);
border: 1px solid var(--border-base);
position: relative; overflow: hidden;
display: flex; align-items: center; justify-content: center;
/* 봉지 톱니 (top notch) */
clip-path: polygon(0 6%, 8% 0, 16% 6%, 24% 0, 32% 6%, 40% 0, 48% 6%, 56% 0, 64% 6%, 72% 0, 80% 6%, 88% 0, 96% 6%, 100% 0, 100% 100%, 0 100%);
}
:root[data-theme="dark"] .ds-pouch__bag { background: var(--gray-800); }
.ds-pouch__label {
font-size: var(--fs-caption-xs);
font-weight: var(--fw-bd); /* v0.5: bk 700 → bd 600 */
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--fg-faint);
writing-mode: vertical-rl; text-orientation: mixed;
}
.ds-pouch__name {
margin-top: 12px;
text-align: center;
font-size: var(--fs-caption); font-weight: var(--fw-bd);
color: var(--fg-base);
}
.ds-pouch__price {
text-align: center;
font-size: var(--fs-caption-sm);
color: var(--fg-base);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
margin-top: 4px;
}
/* v0.5: 팩 가격 통일 룰 — amount + unit 분리 */
.ds-pouch__price-amount { font-weight: var(--fw-bd); }
.ds-pouch__price-unit { font-weight: var(--fw-rg); color: var(--fg-muted); margin-left: 4px; }
/* 배경 사선 데코 — 페이지 하단 (브랜드 탭 전용) */
.pouch-bg-decor {
position: absolute; left: 0; right: 0; bottom: -40px; height: 200px;
background: linear-gradient(135deg, transparent 0%, transparent 40%, var(--gray-50) 40%, var(--gray-100) 100%);
z-index: -1; pointer-events: none;
}
@media (max-width: 1023px) {
.pouch-scatter { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pouch-scatter > .ds-pouch { transform: none !important; }
}
@media (max-width: 599px) {
.pouch-scatter { grid-template-columns: repeat(2, 1fr); }
}
/* ==========================================================
Limited Card — 큰 검정 카드 (리미티드 팩 전용)
========================================================== */
/* v0.8: limited-grid — 데스크톱은 1-col(full-width banner), 태블릿/모바일은 단순 stack */
.limited-grid {
display: flex; flex-direction: column; gap: 16px;
padding-block: 24px 32px;
}
@media (max-width: 1023px) {
.limited-grid { max-width: 480px; margin-inline: auto; gap: 14px; }
}
.ds-limited {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas:
"visual body"
"visual stock";
grid-template-rows: 1fr auto;
/* v0.8: 라이트 톤 — 카드형 배경 + base 텍스트 */
background: var(--bg-card);
color: var(--fg-base);
border: 1px solid var(--border-base);
border-radius: 16px; overflow: hidden;
text-decoration: none;
transition: transform 200ms var(--ease-emp), box-shadow 200ms var(--ease-emp), border-color 200ms var(--ease-emp);
min-height: 320px;
}
.ds-limited:hover {
/* M-06: 위치 변동 금지 — shadow + border만 */
box-shadow: 0 12px 28px rgba(15,20,30,0.10);
border-color: var(--border-strong, #d1d5db);
}
.ds-limited > .ds-limited__visual { grid-area: visual; }
.ds-limited > .ds-limited__body { grid-area: body; }
.ds-limited > .ds-limited__stock { grid-area: stock; }
@media (max-width: 1023px) {
/* 태블릿/모바일 — 원래의 vertical layout 복원 */
.ds-limited {
display: flex; flex-direction: column;
min-height: 380px;
grid-template-areas: none;
}
}
.ds-limited__badge {
position: absolute; top: 16px; right: 16px; z-index: 3;
display: inline-flex; align-items: center;
height: 26px; padding: 0 10px;
border-radius: var(--r-pill);
font-size: var(--fs-caption-sm); font-weight: var(--fw-bk);
letter-spacing: -0.005em;
}
/* 라이트 톤 — badge는 mystic 그린 또는 강조 컬러로 */
.ds-limited__badge--brand { background: var(--mystic-100, #d2ffdd); color: var(--mystic-800, #0a6128); }
.ds-limited__badge--rare { background: var(--rare-500); color: var(--gray-0); }
/* v0.7: gacha limited 셀 visual — 3x3 카드 그리드 (mockup → real card components) */
/* v0.8: 좌측 visual은 다크 유지 (카드 art가 빛나도록) */
.ds-limited__visual {
position: relative;
display: grid !important;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
gap: 8px;
padding: 24px 20px;
flex: 1;
background: var(--gray-950);
aspect-ratio: 1 / 0.85;
}
.ds-limited__visual--image {
display: block !important;
padding: 0 !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-color: var(--gray-100) !important;
}
/* v0.8 데스크톱 horizontal banner — visual이 grid cell 전체 채우도록 aspect-ratio 해제 */
@media (min-width: 1024px) {
.ds-limited__visual { aspect-ratio: auto; }
}
.ds-limited__hero-card {
width: auto !important;
aspect-ratio: auto !important;
background: var(--gray-800);
background-image: url('/kado-design/assets/cards/espeon-vmax-front.jpeg');
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat;
border-radius: 4px;
position: relative;
box-shadow: 0 4px 12px rgba(0,0,0,0.45);
}
.ds-limited__deck {
display: contents !important;
position: static !important;
transform: none !important;
opacity: 1 !important;
width: auto !important;
}
.ds-limited__deck > span {
display: block;
aspect-ratio: auto !important;
border-radius: 4px;
background: var(--gray-800);
background-image: url('/kado-design/assets/cards/espeon-vmax-front.jpeg');
background-size: cover !important;
background-position: center !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.45);
opacity: 0.95;
}
/* 3x3 = 1 hero + 8 spans visible (9th hidden) */
.ds-limited__deck > span:nth-child(n+9) { display: none; }
.ds-limited__body {
padding: 20px 24px 12px;
background: var(--bg-card);
display: flex; flex-direction: column; gap: 4px;
}
.ds-limited__title { font-size: var(--fs-h4); font-weight: var(--fw-bk); letter-spacing: -0.01em; color: var(--fg-base); }
.ds-limited__sub { font-size: var(--fs-caption); color: var(--fg-muted); }
/* v0.8: 가격 — stock 영역 상단 (가격 + 게이지 + 재고가 하나의 액션 블록) */
.ds-limited__price {
display: flex; align-items: baseline; gap: 2px;
margin: 0 0 4px;
font-size: 24px; font-weight: var(--fw-bk);
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
color: var(--fg-base);
}
.ds-limited__price small { font-size: 13px; opacity: 0.55; font-weight: var(--fw-md); margin-left: 2px; }
.ds-limited__bar-fill--low { background: var(--danger-500, #ef4444); }
.ds-limited__stock-label--low { color: var(--danger-500, #ef4444) !important; font-weight: var(--fw-bk) !important; }
.ds-limited__stock {
padding: 0 24px 20px; background: var(--bg-card);
display: flex; flex-direction: column; gap: 8px;
}
.ds-limited__stock-row {
display: flex; justify-content: space-between; align-items: center;
font-size: var(--fs-caption); color: var(--fg-muted); font-weight: var(--fw-bd);
}
.ds-limited__stock-row strong { color: var(--fg-base); font-weight: var(--fw-bk); font-variant-numeric: tabular-nums; }
/* v0.8: 게이지 두꺼워짐 (3px → 8px) + 라이트 톤 */
.ds-limited__bar { height: 8px; background: var(--gray-200); border-radius: var(--r-pill); overflow: hidden; }
.ds-limited__bar-fill { height: 100%; background: var(--gray-950); border-radius: inherit; }
.ds-limited__bar-fill--low { background: var(--danger-500); }
/* ==========================================================
Hero Mosaic — 좌측 큰 배너 + 우측 3×2 진열 (홈 진입 영역)
레이아웃: 1.4fr | 1fr 1fr 1fr × 2 row
========================================================== */
/* Hero mosaic — featured 1 (rowspan 2) + 6 cells (상시 3 top + 리미티드 3 bottom) */
.hero-mosaic {
display: grid;
grid-template-columns: 1.45fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 12px;
}
.hero-mosaic > .ds-feature { grid-row: 1 / span 2; grid-column: 1; }
@media (max-width: 1199px) {
.hero-mosaic { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
}
@media (max-width: 1023px) {
/* v2: 태블릿 — vertical featured (col 1, span 2 rows) + 6 cells (3-col × 2-row) clean fit */
.hero-mosaic {
grid-template-columns: 1.2fr 1fr 1fr 1fr;
grid-template-rows: auto;
}
.hero-mosaic > .ds-feature {
grid-column: 1;
grid-row: 1 / span 2;
height: auto;
min-height: 0;
aspect-ratio: auto;
}
}
@media (max-width: 599px) {
.hero-mosaic { grid-template-columns: 1fr 1fr; }
}
/* ===== Featured 큰 배너 — chevron bg + 3팩 cluster (v0.8) ===== */
.ds-feature {
position: relative;
background-color: var(--gray-950);
background-image: url('/kado-design/assets/banners/banner_vertical-1.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: var(--gray-0);
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.32);
overflow: hidden; isolation: isolate;
display: block;
padding: 0;
text-decoration: none;
transition: box-shadow var(--t-fast) ease-out;
min-height: 380px;
}
.ds-feature:hover { box-shadow: var(--shadow-3); }
/* 모바일/태블릿: 데스크탑과 동일한 vertical poster 사용 (통일감)
- 데스크탑/태블릿/모바일 전부 banner_vertical-1.webp
- featured 셀이 모든 viewport에서 vertical 형태로 (mosaic 그리드가 vertical span)
- mobile-specific 가벼운 자산 필요 시 별도 vertical 모바일 자산 추가 가능 */
/* Pack visual — banner_vertical-1 적용 후 비활성화 (배너 자체에 kado 팩 포함) */
.ds-feature__visual {
display: none;
}
.ds-feature__pack {
position: absolute;
width: 60%;
aspect-ratio: 5 / 7;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
transform: translate(-50%, -50%);
}
/* MYSTIC — center (52%, 51%), Y 가장 높음 */
.ds-feature__pack--front {
left: 52%; top: 51%;
z-index: 3;
filter: drop-shadow(0 20px 40px rgba(0,0,0,0.75));
}
/* EPIC — center (19%, 64%), 좌측 절반 frame 밖 */
.ds-feature__pack--left {
left: 19%; top: 64%;
z-index: 1;
filter: drop-shadow(0 14px 28px rgba(0,0,0,0.55));
}
/* LEGENDARY — center (84%, 76%), 우측 절반 frame 밖, Y 가장 아래 */
.ds-feature__pack--right {
left: 84%; top: 76%;
z-index: 2;
filter: drop-shadow(0 14px 28px rgba(0,0,0,0.55));
}
@media (max-width: 767px) {
.ds-feature__pack { width: 55%; }
}
.ds-feature__top, .ds-feature__bottom { position: relative; z-index: 2; }
/* Title — 큰 타이포 좌측 상단. v0.5: bk 700 → bd 600 */
.ds-feature__name {
margin: 0;
font-size: clamp(22px, 2.4vw, 28px);
font-weight: var(--fw-bd);
line-height: 1.25;
letter-spacing: -0.018em;
max-width: 240px;
color: var(--gray-0);
}
/* Bottom — 가격 + 화살표 link (CTA 버튼 X, 미니멀) */
.ds-feature__bottom {
display: flex; flex-direction: column; gap: 14px;
align-items: flex-start;
}
.ds-feature__price-row {
display: flex; align-items: baseline; gap: 6px;
margin: 0;
}
.ds-feature__price {
font-size: 26px; font-weight: var(--fw-bd); /* v0.5: bk 700 → bd 600 */
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
letter-spacing: -0.014em;
color: var(--gray-0);
}
.ds-feature__price-unit {
font-size: var(--fs-caption);
color: rgba(255,255,255,0.55);
font-weight: var(--fw-rg); /* v0.5: md 500 → rg 400 (unit 룰) */
}
.ds-feature__cta {
display: inline-flex; align-items: center; gap: 4px;
font-size: var(--fs-caption-sm);
font-weight: var(--fw-bd);
color: rgba(255,255,255,0.7);
letter-spacing: -0.005em;
transition: color var(--t-fast) ease-out, transform var(--t-fast) ease-out;
}
.ds-feature__cta .mi { font-size: 14px; transition: transform var(--t-fast) ease-out; }
.ds-feature:hover .ds-feature__cta { color: var(--gray-0); }
.ds-feature:hover .ds-feature__cta .mi { transform: translateX(3px); }
/* 다크모드 invert — 라이트 위에 검정 */
:root[data-theme="dark"] .ds-feature {
background: var(--gray-0);
color: var(--gray-950);
}
:root[data-theme="dark"] .ds-feature__pack {
filter: drop-shadow(-12px 24px 30px rgba(0,0,0,0.18));
}
:root[data-theme="dark"] .ds-feature__name { color: var(--gray-950); }
:root[data-theme="dark"] .ds-feature__price { color: var(--gray-950); }
:root[data-theme="dark"] .ds-feature__price-unit { color: var(--fg-muted); }
:root[data-theme="dark"] .ds-feature__cta { color: var(--fg-muted); }
:root[data-theme="dark"] .ds-feature:hover .ds-feature__cta { color: var(--fg-base); }
/* ===== Mosaic cell (6칸용 작은 셀) ===== */
/* v0.7: 모바일에서 일부 cell 숨김 (브랜드 2 + 리미티드 2만 노출) */
@media (max-width: 767px) {
.ds-mosaic-cell--hide-mobile { display: none !important; }
}
.ds-mosaic-cell {
position: relative; overflow: hidden;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 10px;
display: flex; flex-direction: column;
text-decoration: none; color: inherit;
transition: transform 150ms ease-out, box-shadow 150ms ease-out, border-color 150ms ease-out;
}
.ds-mosaic-cell:hover {
/* unified hover — .ds-listing 기준 */
box-shadow: var(--shadow-2);
border-color: var(--gray-300);
}
.ds-mosaic-cell--dark {
background: var(--gray-950); color: var(--gray-0); border-color: var(--gray-950);
}
.ds-mosaic-cell--dark:hover { border-color: var(--gray-800); }
/* 다크모드 invert */
:root[data-theme="dark"] .ds-mosaic-cell--dark {
background: var(--gray-0); color: var(--gray-950); border-color: var(--gray-100);
}
:root[data-theme="dark"] .ds-mosaic-cell--dark:hover { border-color: var(--gray-300); }
.ds-mosaic-cell__visual {
aspect-ratio: 1 / 1; /* 이미지 자리 정사각 고정 */
width: 100%;
background: var(--gray-100);
border-bottom: 1px solid var(--border-subtle);
position: relative; overflow: hidden;
/* 셀 컨테이너 radius와 정합: top만 둥글게 */
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
.ds-mosaic-cell--dark .ds-mosaic-cell__visual {
background: var(--gray-800);
border-bottom-color: rgba(255,255,255,0.06);
}
:root[data-theme="dark"] .ds-mosaic-cell__visual { background: var(--gray-800); border-bottom-color: rgba(255,255,255,0.04); }
/* visual--pack: 단일 팩 이미지 (top row) — v0.7: 실제 brand pack designs 적용
- default(purple/blue): pokemon.png (Epic Pack — 홀로그래픽)
- pink: onepiece.png (Limited Pack — 검정 베이스 원피스 디자인)
tone classes 유지 (hue-rotate filter는 onepiece에선 의미 없으므로 제거) */
.ds-mosaic-cell__visual--pack {
background-image: url('/kado-design/assets/packs/pokemon-epic.webp') !important;
background-size: auto 88% !important;
background-repeat: no-repeat !important;
background-position: center 50% !important;
background-color: var(--gray-950) !important; /* 팩 자체가 검정 배경 친화 */
}
:root[data-theme="dark"] .ds-mosaic-cell__visual--pack { background-color: var(--gray-900) !important; }
.ds-mosaic-cell[data-pack-tone="purple"] .ds-mosaic-cell__visual--pack { /* default — pokemon */ }
.ds-mosaic-cell[data-pack-tone="blue"] .ds-mosaic-cell__visual--pack {
/* same pokemon pack — 컬러 톤만 살짝 cool shift */
filter: hue-rotate(-15deg) saturate(1.05);
}
.ds-mosaic-cell[data-pack-tone="pink"] .ds-mosaic-cell__visual--pack {
/* one piece — 다른 디자인 entirely */
background-image: url('/kado-design/assets/packs/onepiece-epic.webp') !important;
filter: none !important;
}
.ds-mosaic-cell[data-pack-tone="onepiece-legendary"] .ds-mosaic-cell__visual--pack {
background-image: url('/kado-design/assets/packs/onepiece-legendary.webp') !important;
filter: none !important;
}
/* visual--card-grid: home 리미티드 셀 기존 레이아웃 (1 hero + 3x3 + 2 bottom-left) */
.ds-mosaic-cell__visual--card-grid {
aspect-ratio: 1 / 1 !important;
background: #000 !important;
background-image: none !important;
position: relative;
overflow: hidden;
}
.ds-card-tile {
position: absolute;
background-color: var(--gray-300);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 2px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.ds-card-tile--hero {
left: 7.43%; top: 7.56%;
width: 37.02%; height: 53.69%;
border-radius: 4px;
box-shadow: 0 6px 18px rgba(0,0,0,0.55);
}
.ds-card-tile--r1c1 { left: 48.31%; top: 14.03%; width: 14.63%; height: 24.65%; }
.ds-card-tile--r1c2 { left: 64.14%; top: 14.03%; width: 14.63%; height: 24.65%; }
.ds-card-tile--r1c3 { left: 79.95%; top: 14.03%; width: 14.63%; height: 24.65%; }
.ds-card-tile--r2c1 { left: 48.31%; top: 40.21%; width: 14.63%; height: 24.65%; }
.ds-card-tile--r2c2 { left: 64.14%; top: 40.21%; width: 14.63%; height: 24.65%; }
.ds-card-tile--r2c3 { left: 79.95%; top: 40.21%; width: 14.63%; height: 24.65%; }
.ds-card-tile--r3c1 { left: 48.31%; top: 66.39%; width: 14.63%; height: 24.65%; }
.ds-card-tile--r3c2 { left: 64.14%; top: 66.39%; width: 14.63%; height: 24.65%; }
.ds-card-tile--r3c3 { left: 79.95%; top: 66.39%; width: 14.63%; height: 24.65%; }
.ds-card-tile--bl1 { left: 16.71%; top: 66.39%; width: 14.63%; height: 24.65%; }
.ds-card-tile--bl2 { left: 32.51%; top: 66.39%; width: 14.63%; height: 24.65%; }
/* hover 강조는 .ds-mosaic-cell의 기본 box-shadow만 유지 (ABS-02 — layout-shift 금지) */
/* ============================================================
ds-card-layout (.ds-card-layout--1/2/3) — gacha 페이지 limited 카드용
2662x1340 SVG 캔버스 비율 (2:1) — 카드 위치는 SVG 좌표 % 매핑
============================================================ */
.ds-card-layout {
position: relative;
width: 100%;
aspect-ratio: 2662 / 1340;
}
.ds-card-layout .ds-card-tile {
background-image: url('/kado-design/assets/cards/espeon-vmax-front.jpeg');
}
/* gacha .ds-limited__visual--card-layout — 기존 3-col grid 룰 무력화 + 깔끔히 layout 컨테이너 중앙 배치 */
.ds-limited__visual--card-layout {
display: grid !important;
place-items: center !important;
grid-template-columns: 1fr !important;
grid-auto-rows: auto !important;
padding: 16px !important;
gap: 0 !important;
overflow: hidden;
}
/* mobile/tablet (visual이 ~정사각): home 1:1 레이아웃 활성, 2:1 SVG layouts 비활성 */
.ds-card-layout-mobile { display: none; }
@media (max-width: 1023px) {
.ds-limited__visual--card-layout {
aspect-ratio: 1 / 1 !important;
padding: 0 !important;
}
.ds-limited__visual--card-layout .ds-card-layout { display: none !important; }
.ds-limited__visual--card-layout .ds-card-layout-mobile {
display: block;
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
background: #000;
}
/* 모바일 1:1 layout 안의 카드 tile은 background image 적용 (espeon-vmax-front 통일) */
.ds-card-layout-mobile .ds-card-tile {
background-image: url('/kado-design/assets/cards/espeon-vmax-front.jpeg');
}
}
/* ==== Layout 1 ==== 4 big cards top + 11 small cards bottom */
.ds-card-tile--l1-big1 { left: 8.04%; top: 8.60%; width: 18.66%; height: 53.78%; }
.ds-card-tile--l1-big2 { left: 29.55%; top: 8.60%; width: 18.66%; height: 53.78%; }
.ds-card-tile--l1-big3 { left: 51.06%; top: 8.60%; width: 18.66%; height: 53.78%; }
.ds-card-tile--l1-big4 { left: 72.57%; top: 8.60%; width: 18.66%; height: 53.78%; }
.ds-card-tile--l1-s1 { left: 4.55%; top: 68.32%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l1-s2 { left: 12.90%; top: 68.32%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l1-s3 { left: 21.25%; top: 68.32%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l1-s4 { left: 29.60%; top: 68.32%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l1-s5 { left: 37.95%; top: 68.32%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l1-s6 { left: 46.30%; top: 68.32%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l1-s7 { left: 54.65%; top: 68.32%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l1-s8 { left: 63.00%; top: 68.32%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l1-s9 { left: 71.35%; top: 68.32%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l1-s10 { left: 79.71%; top: 68.32%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l1-s11 { left: 88.06%; top: 68.32%; width: 7.37%; height: 24.70%; }
/* ==== Layout 2 ==== 6 medium left grid + 9 small right offset */
.ds-card-tile--l2-m1 { left: 7.74%; top: 11.33%; width: 12.72%; height: 36.65%; }
.ds-card-tile--l2-m2 { left: 22.40%; top: 11.33%; width: 12.72%; height: 36.65%; }
.ds-card-tile--l2-m3 { left: 37.07%; top: 11.33%; width: 12.72%; height: 36.65%; }
.ds-card-tile--l2-m4 { left: 7.74%; top: 52.01%; width: 12.72%; height: 36.65%; }
.ds-card-tile--l2-m5 { left: 22.38%; top: 52.01%; width: 12.72%; height: 36.65%; }
.ds-card-tile--l2-m6 { left: 37.07%; top: 52.01%; width: 12.72%; height: 36.65%; }
.ds-card-tile--l2-s1 { left: 55.64%; top: 37.65%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l2-s2 { left: 64.00%; top: 37.65%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l2-s3 { left: 72.34%; top: 37.65%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l2-s4 { left: 80.69%; top: 37.65%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l2-s5 { left: 51.46%; top: 63.96%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l2-s6 { left: 59.82%; top: 63.96%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l2-s7 { left: 68.16%; top: 63.96%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l2-s8 { left: 76.51%; top: 63.96%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l2-s9 { left: 84.86%; top: 63.96%; width: 7.37%; height: 24.70%; }
/* ==== Layout 3 ==== 5 medium overlapping + 5 small right */
.ds-card-tile--l3-m1 { left: 18.11%; top: 8.60%; width: 18.66%; height: 53.78%; }
.ds-card-tile--l3-m2 { left: 39.62%; top: 8.60%; width: 18.66%; height: 53.78%; }
.ds-card-tile--l3-m3 { left: 61.13%; top: 8.60%; width: 18.66%; height: 53.78%; }
.ds-card-tile--l3-m4 { left: 8.81%; top: 39.23%; width: 18.66%; height: 53.78%; }
.ds-card-tile--l3-m5 { left: 30.29%; top: 39.23%; width: 18.66%; height: 53.78%; }
.ds-card-tile--l3-s1 { left: 52.54%; top: 68.32%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l3-s2 { left: 60.89%; top: 68.32%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l3-s3 { left: 69.24%; top: 68.32%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l3-s4 { left: 77.59%; top: 68.32%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l3-s5 { left: 85.95%; top: 68.32%; width: 7.37%; height: 24.70%; }
/* hover에 layout-shift / 강한 shadow 금지 (ABS-02) — .ds-limited 자체의 미세 border-color shadow만 유지 */
/* ==== Layout 1 (1.svg) ==== 4 big cards top + 11 small cards bottom */
/* big cards: y=115/1340=8.58%, h=720/1340=53.73%, w=496/2662=18.64% */
.ds-card-tile--l1-big1 { left: 8.04%; top: 8.60%; width: 18.66%; height: 53.78%; }
.ds-card-tile--l1-big2 { left: 29.55%; top: 8.60%; width: 18.66%; height: 53.78%; }
.ds-card-tile--l1-big3 { left: 51.06%; top: 8.60%; width: 18.66%; height: 53.78%; }
.ds-card-tile--l1-big4 { left: 72.57%; top: 8.60%; width: 18.66%; height: 53.78%; }
/* small cards: y=915/1340=68.28%, h=331/1340=24.70%, w=196/2662=7.37% */
.ds-card-tile--l1-s1 { left: 4.55%; top: 68.32%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l1-s2 { left: 12.90%; top: 68.32%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l1-s3 { left: 21.25%; top: 68.32%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l1-s4 { left: 29.60%; top: 68.32%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l1-s5 { left: 37.95%; top: 68.32%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l1-s6 { left: 46.30%; top: 68.32%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l1-s7 { left: 54.65%; top: 68.32%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l1-s8 { left: 63.00%; top: 68.32%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l1-s9 { left: 71.35%; top: 68.32%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l1-s10 { left: 79.71%; top: 68.32%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l1-s11 { left: 88.06%; top: 68.32%; width: 7.37%; height: 24.70%; }
/* ==== Layout 2 (2.svg) ==== 6 medium left (3x2 grid) + 9 small right (offset) */
/* medium: w=338/2662=12.72%, h=491/1340=36.65% */
.ds-card-tile--l2-m1 { left: 7.74%; top: 11.33%; width: 12.72%; height: 36.65%; }
.ds-card-tile--l2-m2 { left: 22.40%; top: 11.33%; width: 12.72%; height: 36.65%; }
.ds-card-tile--l2-m3 { left: 37.07%; top: 11.33%; width: 12.72%; height: 36.65%; }
.ds-card-tile--l2-m4 { left: 7.74%; top: 52.01%; width: 12.72%; height: 36.65%; }
.ds-card-tile--l2-m5 { left: 22.38%; top: 52.01%; width: 12.72%; height: 36.65%; }
.ds-card-tile--l2-m6 { left: 37.07%; top: 52.01%; width: 12.72%; height: 36.65%; }
/* small: w=196/2662=7.37%, h=331/1340=24.70% */
/* upper row (y=504/1340=37.61%) — 4 cards offset */
.ds-card-tile--l2-s1 { left: 55.64%; top: 37.65%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l2-s2 { left: 64.00%; top: 37.65%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l2-s3 { left: 72.34%; top: 37.65%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l2-s4 { left: 80.69%; top: 37.65%; width: 7.37%; height: 24.70%; }
/* lower row (y=857/1340=63.96%) — 5 cards */
.ds-card-tile--l2-s5 { left: 51.46%; top: 63.96%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l2-s6 { left: 59.82%; top: 63.96%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l2-s7 { left: 68.16%; top: 63.96%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l2-s8 { left: 76.51%; top: 63.96%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l2-s9 { left: 84.86%; top: 63.96%; width: 7.37%; height: 24.70%; }
/* ==== Layout 3 (3.svg) ==== 5 medium overlapping + 5 small right */
/* medium: w=496/2662=18.64%, h=720/1340=53.73% */
/* top row 3 cards (y=115/1340=8.58%) */
.ds-card-tile--l3-m1 { left: 18.11%; top: 8.60%; width: 18.66%; height: 53.78%; }
.ds-card-tile--l3-m2 { left: 39.62%; top: 8.60%; width: 18.66%; height: 53.78%; }
.ds-card-tile--l3-m3 { left: 61.13%; top: 8.60%; width: 18.66%; height: 53.78%; }
/* offset middle 2 cards (y=525/1340=39.20%) */
.ds-card-tile--l3-m4 { left: 8.81%; top: 39.23%; width: 18.66%; height: 53.78%; }
.ds-card-tile--l3-m5 { left: 30.29%; top: 39.23%; width: 18.66%; height: 53.78%; }
/* right small cards (y=915/1340=68.28%) — 5 cards */
.ds-card-tile--l3-s1 { left: 52.54%; top: 68.32%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l3-s2 { left: 60.89%; top: 68.32%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l3-s3 { left: 69.24%; top: 68.32%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l3-s4 { left: 77.59%; top: 68.32%; width: 7.37%; height: 24.70%; }
.ds-card-tile--l3-s5 { left: 85.95%; top: 68.32%; width: 7.37%; height: 24.70%; }
/* hover layout-shift 금지 (ABS-02) — 시각 강조는 .ds-mosaic-cell의 box-shadow로만 */
/* visual--deck — v0.7: 깔끔한 카드 그리드 (real card components, mockup 제거)
- hero-card 골드 프레임 제거 → 1st card slot
- 1:1 square container에 5:7 카드 fit 위해 2x3 grid (6 cards)
- reference: gacha 30개 grid pattern (gacha 페이지에선 3x3 = 9 cards) */
.ds-mosaic-cell__visual--deck {
background: var(--gray-950) !important;
background-image: none !important;
display: grid !important;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
gap: 6px;
padding: 14px;
align-items: stretch;
justify-items: stretch;
/* container의 1:1 aspect 안에서 cards가 fit되게 */
aspect-ratio: 1 / 1;
}
:root[data-theme="dark"] .ds-mosaic-cell__visual--deck { background: var(--gray-900) !important; }
/* hero-card → 1st card slot in grid (no gold frame) */
.ds-mosaic-cell__hero-card {
background: var(--gray-800);
background-image: url('/kado-design/assets/cards/espeon-vmax-front.jpeg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 3px;
box-shadow: 0 2px 6px rgba(0,0,0,0.45);
width: auto !important;
aspect-ratio: auto !important; /* 그리드 row가 size 결정 */
position: relative;
overflow: hidden;
}
.ds-mosaic-cell__hero-card::after { display: none; }
/* deck spans become grid children via display: contents */
.ds-mosaic-cell__deck {
display: contents;
}
.ds-mosaic-cell__deck > span {
display: block;
background-image: url('/kado-design/assets/cards/espeon-vmax-front.jpeg');
background-size: cover;
background-position: center;
background-color: var(--gray-800);
border-radius: 3px;
box-shadow: 0 2px 6px rgba(0,0,0,0.45);
opacity: 0.95;
}
/* 1 hero + 5 spans = 6 cards (2 rows × 3 cols) */
.ds-mosaic-cell__deck > span:nth-child(n+6) { display: none; }
/* limited 우상단 그린 chip */
.ds-mosaic-cell__limited-chip {
position: absolute;
top: 10px; left: 10px;
z-index: 2;
display: inline-flex; align-items: center;
height: 22px; padding: 0 10px;
background: var(--mystic-300);
color: var(--mystic-900);
border-radius: 4px;
font-size: 10px; font-weight: 800;
letter-spacing: 0.04em;
}
/* 멀티라인 이름 — 한정팩 2줄 */
.ds-mosaic-cell__name--multiline {
white-space: normal;
line-height: 1.3;
overflow: visible;
text-overflow: clip;
}
.ds-mosaic-cell__body {
padding: 10px 12px 12px;
display: flex; flex-direction: column; gap: 2px;
}
.ds-mosaic-cell__label {
font-size: 9px; font-weight: var(--fw-md); /* v0.5: bk 700 → md 500 (eyebrow rule) */
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--fg-faint);
margin-bottom: 2px;
}
.ds-mosaic-cell--dark .ds-mosaic-cell__label { color: var(--gray-700); }
.ds-mosaic-cell__name {
font-size: var(--fs-body-xs); font-weight: var(--fw-bd); /* 600 */
letter-spacing: -0.005em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 썸네일 카드 가격 통일 룰 — amount 16px / unit 12px (ds-inv·ds-listing과 정합) */
.ds-mosaic-cell__price {
display: inline-flex; align-items: baseline; gap: 4px;
margin-top: 2px;
color: var(--fg-base);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.ds-mosaic-cell__price-amount {
font-size: 16px; font-weight: var(--fw-bd); /* 600 */
letter-spacing: -0.01em;
}
.ds-mosaic-cell__price-unit {
font-size: 12px; font-weight: var(--fw-rg);
color: var(--fg-muted);
}
.ds-mosaic-cell--dark .ds-mosaic-cell__price { color: var(--gray-200); }
.ds-mosaic-cell--dark .ds-mosaic-cell__price-unit { color: var(--gray-400); }
/* ===== Limited 응용형 — 같은 mosaic cell이지만 한정 visual hint ===== */
.ds-mosaic-cell--limited { /* 기본 hover 통일 — 별도 override 없음 */ }
.ds-mosaic-cell--limited .ds-mosaic-cell__stock {
display: flex; align-items: center; gap: 6px;
margin-top: 4px;
font-size: 10px; color: var(--fg-muted);
font-variant-numeric: tabular-nums;
}
.ds-mosaic-cell--limited .ds-mosaic-cell__stock-bar {
flex: 1; height: 3px;
background: var(--gray-200);
border-radius: 2px;
overflow: hidden;
}
.ds-mosaic-cell--limited .ds-mosaic-cell__stock-bar > span {
display: block; height: 100%;
background: var(--gray-950);
border-radius: 2px;
}
:root[data-theme="dark"] .ds-mosaic-cell--limited .ds-mosaic-cell__stock-bar { background: var(--gray-700); }
:root[data-theme="dark"] .ds-mosaic-cell--limited .ds-mosaic-cell__stock-bar > span { background: var(--mystic-300); }
/* ==========================================================
Promo Banner — 캠페인/홍보 배너 슬롯 (홈 진입부)
실제 콘텐츠는 운영팀이 채우는 광고 placeholder
========================================================== */
.ds-promo {
position: relative;
border-radius: 12px;
overflow: hidden;
}
.ds-promo__slot {
aspect-ratio: 1280 / 280; /* 5:1 한도 비율, 와이드 캠페인 */
background: var(--gray-100);
border: 1px solid var(--border-base);
border-radius: 12px;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 6px;
}
:root[data-theme="dark"] .ds-promo__slot { background: var(--gray-800); border-color: var(--white-a200); }
.ds-promo__hint {
font-size: var(--fs-caption-sm);
font-weight: var(--fw-md);
color: var(--fg-faint);
letter-spacing: 0.04em;
}
.ds-promo__hint-sub {
font-size: var(--fs-caption-xs);
color: var(--fg-faint);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.ds-promo__dots {
position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
display: flex; gap: 6px; z-index: 2;
}
.ds-promo__dot {
width: 6px; height: 6px;
background: var(--gray-a300);
border-radius: var(--r-pill);
transition: all var(--t-fast) ease-out;
}
.ds-promo__dot.is-active {
width: 20px; background: var(--gray-a700);
}
:root[data-theme="dark"] .ds-promo__dot { background: rgba(255,255,255,0.18); }
:root[data-theme="dark"] .ds-promo__dot.is-active { background: rgba(255,255,255,0.7); }
@media (max-width: 767px) {
.ds-promo__slot { aspect-ratio: 4 / 3; }
}
/* === Promo slider (사용자 배너 이미지 1280×320 = 4:1 원본 비율) === */
.ds-promo__track {
position: relative;
aspect-ratio: 1280 / 320;
background: var(--gray-100);
border-radius: 12px;
overflow: hidden;
}
:root[data-theme="dark"] .ds-promo__track { background: var(--gray-800); }
@media (max-width: 767px) {
/* v1: 모바일 promo — 박스 스타일 (margin 유지, 라운드 유지). 이미지 비율 그대로 (1440×640 ≈ 2.25:1) */
.ds-promo {
margin-inline: 0;
border-radius: 12px;
}
.ds-promo__track {
aspect-ratio: 1440 / 640;
height: auto;
border-radius: 12px;
}
/* GNB 바로 밑에 딱 붙도록 — promo를 감싸는 첫 section의 top padding 제거 */
main > .container > section:first-of-type:has(.ds-promo) {
padding-top: 0 !important;
}
}
.ds-promo__slide {
position: absolute; inset: 0;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 6px;
opacity: 0;
transition: opacity 0.5s ease-out;
}
.ds-promo__slide.is-active { opacity: 1 !important; z-index: 1; }
/* v0.7: themed promo slide — 실 콘텐츠 (placeholder 대체) */
.ds-promo__slide--themed {
text-decoration: none;
align-items: stretch; justify-content: stretch;
padding: 0;
cursor: pointer;
}
.ds-promo__slide--themed[data-tone="violet"] { background: linear-gradient(135deg, #2c1d5a 0%, #4a2d8c 60%, #6b3fa8 100%); }
.ds-promo__slide--themed[data-tone="emerald"] { background: linear-gradient(135deg, #0f3a2c 0%, #1a6b4d 60%, #2c8f6f 100%); }
.ds-promo__slide--themed[data-tone="amber"] { background: linear-gradient(135deg, #5a3d0f 0%, #8c5a1a 60%, #b8782c 100%); }
.ds-promo__copy {
display: flex; flex-direction: column;
justify-content: center; align-items: flex-start;
gap: 14px;
padding: 0 8% 0 6%;
height: 100%;
color: rgba(255,255,255,0.96);
max-width: 60%;
}
.ds-promo__eyebrow {
font-size: 11px; font-weight: var(--fw-bk);
letter-spacing: 0.18em;
color: rgba(255,255,255,0.7);
text-transform: uppercase;
}
.ds-promo__heading {
font-size: clamp(22px, 3.6vw, 38px);
font-weight: var(--fw-bk);
line-height: 1.2;
letter-spacing: -0.02em;
margin: 0;
color: #fff;
}
.ds-promo__cta {
display: inline-flex; align-items: center; gap: 4px;
padding: 8px 14px;
background: rgba(255,255,255,0.95);
color: #1a1a1a;
border-radius: var(--r-pill);
font-size: 13px; font-weight: var(--fw-bd);
transition: transform var(--t-fast) ease-out;
}
.ds-promo__slide--themed:hover .ds-promo__cta { transform: translateX(2px); background: #fff; }
@media (max-width: 480px) {
.ds-promo__copy { padding: 0 6% 0 5%; max-width: 80%; }
.ds-promo__heading { font-size: 18px; line-height: 1.25; }
.ds-promo__eyebrow { font-size: 9px; letter-spacing: 0.14em; }
.ds-promo__cta { padding: 6px 11px; font-size: 11px; }
}
/* light commerce style — minimal shadow, solid fill, no scale on hover (ABS-02) */
.ds-promo__nav {
position: absolute;
top: 50%; transform: translateY(-50%);
width: 32px; height: 32px;
border-radius: 50%;
background: #fff;
border: 1px solid rgba(0,0,0,0.06);
display: grid; place-items: center;
cursor: pointer;
z-index: 4;
transition: opacity var(--t-fast) ease-out, background var(--t-fast) ease-out, border-color var(--t-fast) ease-out;
box-shadow: none;
opacity: 0;
pointer-events: none;
}
.ds-promo:hover .ds-promo__nav,
.ds-promo__nav:focus-visible {
opacity: 1;
pointer-events: auto;
}
.ds-promo__nav:hover {
background: #fff;
border-color: rgba(0,0,0,0.18);
}
:root[data-theme="dark"] .ds-promo__nav {
background: rgba(20,22,26,0.92); border-color: rgba(255,255,255,0.12); color: var(--gray-0);
}
:root[data-theme="dark"] .ds-promo__nav:hover {
background: rgba(20,22,26,1); border-color: rgba(255,255,255,0.28);
}
.ds-promo__nav .mi { font-size: 20px; color: var(--fg-base); }
:root[data-theme="dark"] .ds-promo__nav .mi { color: var(--gray-0); }
.ds-promo__nav--prev { left: 12px; }
.ds-promo__nav--next { right: 12px; }
@media (max-width: 599px) {
/* 모바일은 화살표 숨김 — dots만 사용 (touch swipe 자연스럽게) */
.ds-promo__nav { display: none; }
}
.ds-promo__dot { cursor: pointer; border: 0; padding: 0; }
/* ==========================================================
=== Promo Banner — 사용자 디자인 이미지 (2x retina)
========================================================== */
.ds-promo-banner {
position: absolute; inset: 0;
display: block;
text-decoration: none;
overflow: hidden;
}
.ds-promo-banner img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
display: block;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
.ds-promo-banner__legacy-grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
align-items: center;
gap: 32px;
padding: 36px 48px;
isolation: isolate;
}
@media (max-width: 1023px) { .ds-promo-banner { padding: 28px 32px; gap: 20px; } }
@media (max-width: 599px) {
.ds-promo-banner { grid-template-columns: 1fr; padding: 24px 20px; gap: 12px; }
.ds-promo-banner__visual { display: none; }
}
/* 슬랜트 배경 패턴 — 8° 우상향 평행사변형 (subtle, brand 시그니처) */
.ds-promo-banner__pattern {
position: absolute; inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.ds-promo-banner__pattern::before,
.ds-promo-banner__pattern::after {
content: '';
position: absolute;
background: currentColor;
opacity: 0.04;
transform: skewX(-8deg);
}
.ds-promo-banner__pattern::before {
top: -10%; right: 30%;
width: 28%; height: 140%;
}
.ds-promo-banner__pattern::after {
top: -10%; right: 5%;
width: 18%; height: 140%;
opacity: 0.06;
}
/* 콘텐츠 zone — pattern 위에 */
.ds-promo-banner__copy,
.ds-promo-banner__visual {
position: relative; z-index: 1;
}
.ds-promo-banner__copy {
display: flex; flex-direction: column; gap: 10px;
min-width: 0;
align-self: center;
}
/* Eyebrow chip — 평행사변형 변형 + dot */
.ds-promo-banner__eyebrow {
display: inline-flex; align-items: center; gap: 6px;
align-self: flex-start;
padding: 5px 12px;
background: var(--eyebrow-bg, rgba(255,255,255,0.08));
border: 1px solid var(--eyebrow-border, rgba(255,255,255,0.16));
border-radius: 4px;
font-size: 11px; font-weight: 800;
letter-spacing: 0.06em;
color: var(--eyebrow-fg, var(--gray-0));
position: relative;
}
.ds-promo-banner__eyebrow .mi { font-size: 14px; }
.ds-promo-banner__eyebrow-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--eyebrow-accent, var(--mystic-300));
animation: ds-banner-pulse 1.6s ease-in-out infinite;
}
@keyframes ds-banner-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.3); }
}
/* Title — 큰 타이포 */
.ds-promo-banner__title {
margin: 0;
font-size: clamp(22px, 2.8vw, 34px);
font-weight: 900;
line-height: 1.18;
letter-spacing: -0.018em;
color: var(--banner-fg, var(--gray-0));
display: flex; flex-direction: column;
}
.ds-promo-banner__title-accent { color: var(--banner-accent, var(--mystic-300)); }
.ds-promo-banner__sub {
margin: 0;
font-size: var(--fs-body-sm);
color: var(--banner-sub, rgba(255,255,255,0.65));
font-weight: var(--fw-md);
}
/* Feature chips (PSA banner) */
.ds-promo-banner__chips {
display: flex; gap: 8px; flex-wrap: wrap;
margin-top: 4px;
}
.ds-promo-banner__chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px 6px 10px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 4px;
font-size: 12px; font-weight: 700;
color: var(--gray-0);
letter-spacing: -0.005em;
}
.ds-promo-banner__chip .mi { font-size: 16px; color: var(--mystic-300); }
/* Brand logos row (SNKRDUNK banner) */
.ds-promo-banner__brands {
display: inline-flex; align-items: center; gap: 14px;
margin-top: 6px;
align-self: flex-start;
}
.ds-promo-banner__logo-kado {
font-size: 20px; font-weight: 900;
color: var(--gray-950);
letter-spacing: -0.02em;
}
.ds-promo-banner__logo-divider {
width: 1px; height: 18px;
background: var(--border-base);
}
.ds-promo-banner__logo-snkr {
display: inline-flex; align-items: center;
height: 26px; padding: 0 12px;
background: var(--gray-950); color: var(--gray-0);
border-radius: 4px;
font-size: 11px; font-weight: 900;
letter-spacing: 0.05em;
}
/* Visual zone — 우측 시각 요소 영역 */
.ds-promo-banner__visual {
display: flex; align-items: center; justify-content: flex-end;
gap: 16px;
height: 100%;
}
/* ============ Theme: PSA 등급대행 ============ */
.ds-promo-banner--psa {
background: linear-gradient(135deg, #0a0b0e 0%, #14181d 60%, #1a2026 100%);
color: var(--gray-0);
--banner-fg: var(--gray-0);
--banner-accent: var(--mystic-300);
--banner-sub: rgba(255,255,255,0.65);
--eyebrow-accent: var(--mystic-300);
}
.ds-promo-banner--psa .ds-promo-banner__pattern { color: var(--mystic-300); }
/* PSA card mockup — CSS only */
.ds-banner-psa-card {
position: relative;
width: 200px; aspect-ratio: 5 / 7;
background: linear-gradient(180deg, #fafafa 0%, #e8e8e8 100%);
border-radius: 6px;
border: 1px solid rgba(255,255,255,0.18);
padding: 5px;
box-shadow: -16px 24px 50px rgba(0,0,0,0.5),
0 0 0 1px rgba(255,255,255,0.04);
transform: rotate(2deg);
flex-shrink: 0;
display: flex; flex-direction: column;
gap: 4px;
}
.ds-banner-psa-card__label {
background: var(--gray-0);
border: 1.5px solid #c41e3a;
border-radius: 2px;
padding: 4px 7px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 6px;
align-items: center;
}
.ds-banner-psa-card__grade {
font-size: 7px;
font-weight: 800;
color: var(--gray-950);
line-height: 1;
text-align: left;
}
.ds-banner-psa-card__grade strong {
font-size: 16px;
display: block;
letter-spacing: -0.02em;
margin-top: 1px;
}
.ds-banner-psa-card__logo {
font-size: 18px; font-weight: 900;
color: #1f4cb6;
letter-spacing: -0.04em;
font-style: italic;
}
.ds-banner-psa-card__id {
font-size: 6px;
color: var(--gray-700);
font-variant-numeric: tabular-nums;
letter-spacing: 0.05em;
}
.ds-banner-psa-card__art {
flex: 1;
background: linear-gradient(135deg, #f8e4b3 0%, #e6c577 50%, #b8842e 100%);
background-image: url('/kado-design/assets/cards/espeon-vmax-front.jpeg'), linear-gradient(135deg, #f8e4b3 0%, #b8842e 100%);
background-size: 90% auto, cover;
background-repeat: no-repeat;
background-position: center;
border-radius: 3px;
}
/* ============ Theme: 오리파 한정 ============ */
.ds-promo-banner--oripa {
background: linear-gradient(135deg, #0a0b0e 0%, #0f1816 50%, #0d2e1a 100%);
color: var(--gray-0);
--banner-fg: var(--gray-0);
--banner-accent: var(--mystic-300);
--banner-sub: rgba(255,255,255,0.65);
--eyebrow-bg: rgba(63, 230, 144, 0.12);
--eyebrow-border: rgba(63, 230, 144, 0.3);
--eyebrow-fg: var(--mystic-300);
--eyebrow-accent: var(--mystic-300);
}
.ds-promo-banner--oripa .ds-promo-banner__pattern { color: var(--mystic-300); }
.ds-promo-banner--oripa .ds-promo-banner__pattern::before { opacity: 0.06; }
.ds-promo-banner--oripa .ds-promo-banner__pattern::after { opacity: 0.10; }
/* Oripa visual: KADO box + PSA card composition */
.ds-banner-oripa-stack {
position: relative;
display: flex; align-items: center;
gap: 12px;
height: 100%;
}
.ds-banner-oripa-box {
width: 100px; height: 150px;
flex-shrink: 0;
background: linear-gradient(180deg, #16181c 0%, #0a0b0e 100%);
border-radius: 4px;
border: 1px solid rgba(255,255,255,0.16);
padding: 14px 12px 10px;
display: flex; flex-direction: column;
gap: 4px;
box-shadow: -8px 16px 30px rgba(0,0,0,0.5);
transform: rotate(-1.5deg);
position: relative;
overflow: hidden;
}
.ds-banner-oripa-box::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: var(--mystic-300);
box-shadow: 0 0 8px rgba(63, 230, 144, 0.4);
}
.ds-banner-oripa-box__brand {
font-size: 10px; font-weight: 900;
color: var(--gray-0);
letter-spacing: 0.06em;
}
.ds-banner-oripa-box__divider {
width: 14px; height: 1px;
background: rgba(255,255,255,0.4);
margin: 1px 0;
}
.ds-banner-oripa-box__name {
font-size: 11px; font-weight: 900;
color: var(--gray-0);
letter-spacing: 0.04em;
line-height: 1.1;
}
.ds-banner-oripa-box__edition {
align-self: flex-start;
margin-top: 2px;
padding: 2px 6px;
background: var(--mystic-300);
color: var(--gray-950);
font-size: 9px; font-weight: 900;
letter-spacing: 0.06em;
border-radius: 2px;
}
.ds-banner-oripa-box__tag {
position: absolute;
bottom: 8px; left: 14px; right: 8px;
font-size: 6px;
font-weight: 800;
color: var(--mystic-300);
letter-spacing: 0.05em;
line-height: 1.4;
}
.ds-banner-oripa-card {
width: 150px; aspect-ratio: 5 / 7;
background: var(--gray-0);
border-radius: 4px;
padding: 5px;
border: 1px solid rgba(0,0,0,0.1);
box-shadow: 0 12px 32px rgba(0,0,0,0.45);
transform: rotate(2deg);
flex-shrink: 0;
display: flex; flex-direction: column;
gap: 3px;
}
.ds-banner-oripa-card__label {
background: var(--gray-0);
border: 1.5px solid #c41e3a;
border-radius: 2px;
padding: 3px 5px;
display: flex;
justify-content: space-between;
gap: 4px;
}
.ds-banner-oripa-card__meta {
font-size: 5.5px;
color: var(--gray-700);
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.02em;
}
.ds-banner-oripa-card__grade {
font-size: 5.5px;
color: var(--gray-700);
text-align: right;
line-height: 1.3;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.ds-banner-oripa-card__grade strong {
font-size: 9px; font-weight: 900;
color: var(--gray-950);
display: block;
}
.ds-banner-oripa-card__art {
flex: 1;
background: linear-gradient(135deg, #f8e4b3 0%, #e6c577 100%);
background-image: url('/kado-design/assets/cards/espeon-vmax-front.jpeg');
background-size: 92% auto;
background-repeat: no-repeat;
background-position: center 30%;
background-color: #f8e4b3;
border-radius: 2px;
}
/* ============ Theme: SNKRDUNK 파트너십 ============ */
.ds-promo-banner--snkrdunk {
background: linear-gradient(135deg, #ffffff 0%, #f5f6f8 50%, #ffffff 100%);
color: var(--gray-950);
--banner-fg: var(--gray-950);
--banner-accent: var(--gray-950);
--banner-sub: var(--fg-muted);
--eyebrow-bg: var(--bg-card);
--eyebrow-border: var(--border-base);
--eyebrow-fg: var(--fg-base);
--eyebrow-accent: var(--mystic-700);
}
:root[data-theme="dark"] .ds-promo-banner--snkrdunk {
background: linear-gradient(135deg, var(--gray-900) 0%, var(--gray-800) 50%, var(--gray-900) 100%);
color: var(--gray-50);
--banner-fg: var(--gray-50);
--banner-sub: rgba(255,255,255,0.6);
}
.ds-promo-banner--snkrdunk .ds-promo-banner__pattern { color: var(--gray-950); }
.ds-promo-banner--snkrdunk .ds-promo-banner__pattern::before { opacity: 0.05; }
.ds-promo-banner--snkrdunk .ds-promo-banner__pattern::after { opacity: 0.07; }
/* SNKRDUNK visual */
.ds-banner-snkr-stack {
position: relative;
display: flex; align-items: center;
gap: 0;
height: 100%;
}
.ds-banner-snkr-box {
width: 130px; aspect-ratio: 1 / 1;
background: var(--gray-950);
border-radius: 6px;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
position: relative;
box-shadow: -8px 16px 30px rgba(0,0,0,0.18);
flex-shrink: 0;
z-index: 1;
}
.ds-banner-snkr-box::before {
content: 'kado';
font-size: 22px; font-weight: 900;
color: var(--gray-0);
letter-spacing: -0.03em;
}
.ds-banner-snkr-box::after {
content: 'FROM SNKRDUNK';
position: absolute;
bottom: 10px; left: 12px;
font-size: 7px; font-weight: 800;
color: rgba(255,255,255,0.5);
letter-spacing: 0.08em;
}
.ds-banner-snkr-cards {
position: relative;
display: flex; align-items: center;
margin-left: -16px;
z-index: 2;
}
.ds-banner-snkr-card1,
.ds-banner-snkr-card2 {
aspect-ratio: 5 / 7;
background-image: url('/kado-design/assets/cards/espeon-vmax-front.jpeg');
background-size: 92% auto;
background-repeat: no-repeat;
background-position: center;
background-color: var(--gray-100);
border-radius: 4px;
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.ds-banner-snkr-card1 {
width: 80px;
transform: rotate(-6deg);
z-index: 1;
}
.ds-banner-snkr-card2 {
width: 90px;
transform: rotate(6deg) translateX(-12px);
z-index: 2;
background: var(--gray-0);
background-image: linear-gradient(180deg, transparent 70%, rgba(0,0,0,0.06) 100%);
}
.ds-banner-snkr-card2::before {
content: 'PSA';
position: absolute;
inset: 4px;
display: flex; align-items: center; justify-content: center;
font-size: 24px; font-weight: 900;
color: #1f4cb6;
font-style: italic;
letter-spacing: -0.04em;
}
.ds-banner-snkr-seal {
position: absolute;
right: -14px; top: 60%;
width: 50px; height: 50px;
background: var(--gray-950);
color: var(--gray-0);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 8px; font-weight: 900;
text-align: center;
letter-spacing: 0.05em;
line-height: 1.1;
z-index: 3;
box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}
/* ==========================================================
KADO 슬랜트 시그니처 — 평행사변형 시각보정 토큰
로고가 약 8° 우상향 슬랜트라 이를 시그니처로 차용.
시각보정 체크리스트 (chip/step 양쪽에서 공통 적용):
1) container: skewX(-8deg) → 모양만 평행사변형으로
2) inner __label: skewX(8deg) → 글자 역보정으로 똑바로
3) padding-x: 일반 chip보다 +6px (슬랜트로 잘려나간 시각 폭 보상)
4) 인접 element gap: +4px (slope 끝점이 시각적으로 가까이 보임)
5) border-radius: 0 (슬랜트의 직선 끝이 시그니처)
6) font-weight: 동일하나 letter-spacing 약 -0.005em (슬랜트로 글자가 가늘어 보임 보강)
7) 8°는 sweet spot — 12°↑은 만화체, 4°↓은 의도 흐림
========================================================== */
:root {
--slant-deg: -8deg;
--slant-deg-counter: 8deg;
}
/* ===== Slant Chip (기존 .ds-chip의 평행사변형 변형) ===== */
.ds-chip--slant {
/* 슬랜트는 radius와 충돌하므로 r:0 + clip via skew */
border-radius: 0 !important;
padding: 0 !important; /* 컨테이너 padding은 0, inner에서 처리 */
height: 32px;
background: transparent !important;
border: none !important;
display: inline-flex;
/* 시각 위계상 약간의 letter-spacing 보강 */
letter-spacing: -0.005em;
}
.ds-chip--slant .ds-chip__shape {
/* container 모양만 슬랜트 */
display: inline-flex; align-items: center;
height: 100%;
padding: 0 18px; /* 14px 일반 + 4px 슬랜트 보정 */
background: var(--bg-card);
color: var(--fg-subtle);
border: 1px solid var(--border-strong);
transform: skewX(var(--slant-deg));
transition: var(--t-fast) ease-out;
}
.ds-chip--slant .ds-chip__label {
/* 글자는 역보정으로 똑바로 */
display: inline-block;
transform: skewX(var(--slant-deg-counter));
font-size: var(--fs-body-sm);
font-weight: var(--fw-md);
white-space: nowrap;
}
.ds-chip--slant:hover .ds-chip__shape { border-color: var(--gray-950); color: var(--fg-base); }
.ds-chip--slant[aria-pressed="true"] .ds-chip__shape {
background: var(--gray-950); color: var(--gray-0); border-color: var(--gray-950);
}
:root[data-theme="dark"] .ds-chip--slant[aria-pressed="true"] .ds-chip__shape {
background: var(--gray-50); color: var(--gray-950); border-color: var(--gray-50);
}
/* ===== Step Chain — 평행사변형 step indicator (그레이딩 등) =====
여러 step이 연결되어 흐름을 보여줄 때. 시각보정:
- 각 step이 skewX(-8deg)
- inner 텍스트는 skewX(+8deg)
- 인접 step 간 gap: 8px (slope 끝점이 시각적으로 답답하지 않게)
- active step은 검정, 완료된 step은 mystic, 다음 step은 회색 — 명도로 구분
*/
.ds-step-chain {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.ds-step {
display: inline-flex; align-items: center;
height: 44px;
padding: 0 22px; /* 슬랜트 보정 +6px */
background: var(--bg-subtle);
color: var(--fg-muted);
border: 1px solid var(--border-base);
transform: skewX(var(--slant-deg));
transition: var(--t-base) ease-out;
}
.ds-step__inner {
/* 글자는 역보정 */
transform: skewX(var(--slant-deg-counter));
display: inline-flex; align-items: center; gap: 8px;
letter-spacing: -0.005em;
}
.ds-step__num {
font-size: var(--fs-caption);
font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums;
opacity: 0.8;
}
.ds-step__label {
font-size: var(--fs-body-sm);
font-weight: var(--fw-bd);
}
.ds-step--done {
background: var(--gray-950);
color: var(--gray-0);
border-color: var(--gray-950);
}
.ds-step--active {
background: var(--gray-950);
color: var(--gray-0);
border-color: var(--gray-950);
}
:root[data-theme="dark"] .ds-step--active { background: var(--gray-50); color: var(--gray-950); border-color: var(--gray-50); }
@media (max-width: 599px) {
.ds-step-chain { gap: 6px; }
.ds-step { height: 40px; padding: 0 18px; }
}
/* ==========================================================
Page Header — 큰 페이지 진입 (마켓·그레이딩 공통)
하단 6° 슬랜트 stripe로 KADO 시그니처
========================================================== */
.ds-page-header {
position: relative;
padding-block: 32px 40px;
}
.ds-page-header:has(+ .ds-filter-backdrop + .ds-market-body) {
padding-block: 32px 24px;
}
.ds-page-header__row {
display: flex; align-items: end; justify-content: space-between;
gap: var(--stack-md); flex-wrap: wrap;
}
.ds-page-header__title { display: flex; flex-direction: column; gap: 6px; }
.ds-page-header__title h1 { font-size: var(--fs-h2); line-height: 1.2; }
.ds-page-header__sub { font-size: var(--fs-caption); color: var(--fg-muted); }
/* v0.7: 우상단 actions slot (mypage 설정 버튼 등) */
.ds-page-header__actions {
display: flex; align-items: center; gap: 8px;
}
.ds-page-header__settings {
width: 40px; height: 40px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--r-pill);
background: transparent;
border: 1px solid var(--border-base);
color: var(--fg-subtle);
text-decoration: none;
transition: background var(--t-fast) ease-out, color var(--t-fast) ease-out, border-color var(--t-fast) ease-out;
}
.ds-page-header__settings:hover {
background: var(--bg-subtle);
color: var(--fg-base);
border-color: var(--border-strong);
}
.ds-page-header__settings .mi { font-size: 20px; }
/* 슬랜트 액센트 stripe — 사용자 요청으로 비표시 */
.ds-page-header__stripe {
display: none;
}
.ds-page-header__divider {
position: absolute;
left: 0; right: 0; bottom: 0; height: 1px;
background: var(--border-base);
}
/* 마켓 전용 검색바 (큰) */
.ds-page-search {
display: flex; align-items: center; gap: 10px;
height: 44px; padding: 0 16px;
min-width: 320px;
background: var(--bg-subtle);
border: 1px solid transparent;
border-radius: var(--r-pill);
transition: background var(--t-fast) ease-out, border-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
}
.ds-page-search:focus-within { background: var(--bg-card); border-color: var(--gray-950); box-shadow: var(--focus-ring-input); }
.ds-page-search .mi { font-size: 20px; color: var(--fg-muted); }
.ds-page-search input {
flex: 1; background: transparent; border: none; outline: none;
font-size: var(--fs-body-sm); font-family: inherit;
color: var(--fg-base);
}
.ds-page-search input::placeholder { color: var(--fg-muted); }
/* 검색 input은 컨테이너의 :focus-within으로 강조하므로 input 자체 ring 제거 */
.ds-page-search input:focus,
.ds-page-search input:focus-visible { box-shadow: none; outline: none; }
/* ==========================================================
Listing Card — 마켓플레이스 매물 카드
========================================================== */
/* v0.7: orphan row 방어 (홀수 비어보이는 현상 X)
desktop 5-col · 1024-1199 5-col(stays) · 768-1023 2-col · ≤767 snap rail */
.listing-grid {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
}
.ds-market-load-more-row {
display: flex;
justify-content: center;
width: 100%;
margin-top: 22px;
}
.ds-market-load-more {
display: flex;
width: fit-content;
min-width: 180px;
height: 42px;
margin: 0;
padding-inline: 22px;
background: var(--bg-card);
border-color: var(--border-base);
box-shadow: 0 8px 22px rgba(15, 17, 22, 0.06);
transition:
background var(--t-fast) ease-out,
border-color var(--t-fast) ease-out,
box-shadow var(--t-fast) ease-out,
transform var(--t-fast) ease-out;
}
.ds-market-load-more:hover:not(:disabled) {
transform: translateY(-1px);
border-color: var(--border-strong);
box-shadow: 0 12px 28px rgba(15, 17, 22, 0.09);
}
/* tablet(768-1023): 4-col — 카드 ~170px, 적당한 정보 밀도 */
@media (max-width: 1023px) {
.listing-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
.listing-grid[data-mobile-cap="3"] > .ds-listing:nth-child(n+5) { display: none; } /* 4 items 1 row */
.listing-grid[data-mobile-cap="6"] > .ds-listing:nth-child(n+9) { display: none; } /* 8 items 2 rows */
}
@media (max-width: 767px) {
.listing-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.listing-grid[data-mobile-cap="3"] > .ds-listing:nth-child(n+4) { display: none; }
.listing-grid[data-mobile-cap="6"] > .ds-listing:nth-child(n+7) { display: none; }
/* mosaic grid는 line 15310의 모바일 전용 룰에서 vertical featured + 2-col로 재정의됨 */
.inv-grid { gap: 8px; }
.ds-market-load-more-row {
margin-top: 18px;
}
.ds-market-load-more {
width: 100%;
height: 44px;
}
}
.ds-listing {
display: flex; flex-direction: column;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 8px;
text-decoration: none; color: inherit;
box-shadow: var(--shadow-1);
transition: box-shadow var(--t-fast) ease-out, border-color var(--t-fast) ease-out;
overflow: hidden;
position: relative;
}
.ds-listing:hover { box-shadow: var(--shadow-2); border-color: var(--gray-300); }
.ds-listing:hover .ds-listing__slant { opacity: 1; }
.ds-listing__art {
aspect-ratio: 1 / 1; /* spec rule 2.1 — 정사각, TCG 카드 5:7 contain */
background: var(--gray-100);
border-bottom: 1px solid var(--border-subtle);
position: relative; overflow: hidden;
}
:root[data-theme="dark"] .ds-listing__art { background: var(--gray-800); border-bottom-color: var(--white-a200); }
/* ===== 감정 등급 정보 시스템 (v0.7 final) =====
spec: card-thumbnail-spec.md §3.4
- 감정 등급은 chip이 아닌 *정보 텍스트*. footer 가격 row 우측에 inline.
- chip 형태 (.ds-grade-chip)는 detail 페이지 / hero에서만 사용 (sm/md/lg modifier). */
/* base chip — 페이지 hero / detail 등에서만 사용 */
.ds-grade-chip {
display: inline-flex; align-items: center; justify-content: center;
box-sizing: border-box;
background: var(--gray-950); color: var(--gray-0);
border: 1px solid var(--gray-800);
font-weight: 600; letter-spacing: 0.04em;
line-height: 1;
font-variant-numeric: tabular-nums;
flex-shrink: 0; white-space: nowrap;
}
:root[data-theme="dark"] .ds-grade-chip {
background: var(--gray-50); color: var(--gray-950);
border-color: var(--gray-200);
}
.ds-grade-chip--sm { height: 20px; padding: 0 8px; font-size: 10px; border-radius: 4px; }
/* v0.7 S2: 카드 thumbnail의 grade는 footer 가격 옆 정보 텍스트.
chip 모양 (border / 배경) 제거. minimal text style. */
.ds-listing__grade {
display: inline-flex; align-items: baseline;
font-size: 11px;
font-weight: var(--fw-bd);
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
color: var(--fg-muted);
white-space: nowrap;
flex-shrink: 0;
/* no background, no border, no padding (inline text) */
}
:root[data-theme="dark"] .ds-listing__grade { color: var(--fg-muted); }
/* v0.7 S2: rarity (KADO 등급 — 개념 삭제) 모든 위치에서 숨김 */
.ds-listing__rarity,
.ds-listing__chip-stack { display: none !important; }
/* v0.7 S2: sub-text (set + language 한글) 모든 위치에서 숨김 — 영문 풀네임으로 충분 */
.ds-listing__sub { display: none !important; }
/* md — 중간 사이즈 (modal/listing detail row 등) */
.ds-grade-chip--md {
height: 28px; padding: 0 12px;
font-size: 13px;
letter-spacing: 0.05em;
border-radius: 5px;
}
/* lg — 카드 상세 페이지 hero */
.ds-grade-chip--lg {
height: 32px; padding: 0 12px;
font-size: var(--fs-body-sm);
font-weight: var(--fw-bd);
letter-spacing: 0;
border-radius: 6px;
}
.ds-grade-chip[aria-busy="true"] {
height: auto;
padding: 0;
background: transparent;
border-color: transparent;
}
.ds-grade-chip[aria-busy="true"] .ds-card-detail-skeleton-line {
background-color: transparent;
}
/* === Chip stack (grade + rarity) — TR 그룹 — v0.5 ===
.ds-listing__chip-stack 안에 들어가면 grade는 static (flex 자식)으로 전환. 세로 stack 픽스. */
.ds-listing__chip-stack {
position: absolute; top: 8px; right: 8px; z-index: 3;
display: flex; flex-direction: column; align-items: flex-end;
gap: 4px;
}
.ds-listing__chip-stack .ds-listing__grade {
position: static; top: auto; right: auto;
}
/* === Rarity chip (KADO 내부 등급) — v0.4 ===
메트릭 통일 (h20 / font 10 / fw 700 / ls 0.04 / pad 0 8). Pill (radius 999). */
.ds-listing__rarity {
display: inline-flex; align-items: center; justify-content: center;
height: 20px; padding: 0 8px;
box-sizing: border-box;
border: 1px solid transparent;
border-radius: 999px;
font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
line-height: 1;
flex-shrink: 0; white-space: nowrap;
}
.ds-listing__rarity[data-rarity="mystic"] {
background-color: #2A1845;
background-image:
radial-gradient(ellipse 80% 120% at 0% 0%, #C5A0FF 0%, transparent 65%),
radial-gradient(ellipse 80% 120% at 100% 0%, #FF8FCD 0%, transparent 55%),
radial-gradient(ellipse 80% 120% at 0% 100%, #5DECFF 0%, transparent 55%),
radial-gradient(ellipse 80% 120% at 100% 100%, #6F8DFF 0%, transparent 55%);
color: #FFFFFF;
border-color: rgba(255, 255, 255, 0.22);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.ds-listing__rarity[data-rarity="legendary"] {
background: linear-gradient(180deg,
#FBD550 0%, #F5C518 35%, #DDB10E 70%, #C99A0F 100%);
color: var(--legendary-700);
border-color: color-mix(in srgb, var(--legendary-700) 35%, transparent);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
}
.ds-listing__rarity[data-rarity="epic"] {
background: var(--epic-500); color: #FFF;
border-color: color-mix(in srgb, #FFF 25%, transparent);
}
.ds-listing__rarity[data-rarity="rare"] {
background: var(--rare-500); color: #FFF;
border-color: color-mix(in srgb, #FFF 25%, transparent);
}
.ds-listing__rarity[data-rarity="common"] {
background: var(--common-500); color: #FFF;
border-color: color-mix(in srgb, #FFF 25%, transparent);
}
/* hover slant/cert-mark 모두 폐기 (2026-05-03) — 카드 이미지만 노출 */
.ds-listing__slant,
.ds-listing__cert-mark { display: none !important; }
/* 카드 이미지는 art container의 88% 크기로 가운데정렬 (height 기준) */
.ds-listing__art {
background-size: auto 88%;
background-position: center center;
background-repeat: no-repeat;
}
.ds-listing__body {
display: flex; flex-direction: column; gap: 2px;
padding: 10px 12px 12px;
}
/* v0.5 spec — Title 600 / Sub 400 / Price 600 / Unit 400 (4px gap, baseline align) */
.ds-listing__name {
font-size: var(--fs-body-sm); font-weight: var(--fw-bd); /* 600 */
letter-spacing: -0.008em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-listing__sub {
font-size: var(--fs-caption-sm); font-weight: var(--fw-rg); color: var(--fg-muted); /* 400 */
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-listing__price-row { display: flex; align-items: baseline; gap: 4px; margin-top: 6px; }
.ds-listing__price {
font-size: 16px; font-weight: var(--fw-bd); /* 600 */
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
letter-spacing: -0.01em;
}
.ds-listing__currency { font-size: 12px; font-weight: var(--fw-rg); color: var(--fg-muted); } /* 400 */
/* ==========================================================
Sticky Bar — 정렬·결과 수 (마켓·검색 결과 등)
========================================================== */
.ds-sticky-bar {
position: sticky; top: calc(var(--gnb-h) + env(safe-area-inset-top, 0px)); z-index: 20;
display: flex; align-items: center; justify-content: space-between;
height: 56px; gap: var(--stack-md);
background: color-mix(in srgb, var(--bg-base) 92%, transparent);
backdrop-filter: saturate(140%) blur(12px);
-webkit-backdrop-filter: saturate(140%) blur(12px);
margin-bottom: 16px;
}
.ds-sticky-bar__left { display: flex; align-items: center; gap: 14px; }
.ds-sticky-bar__count { font-size: var(--fs-body-sm); color: var(--fg-subtle); }
.ds-sticky-bar__count strong { color: var(--fg-base); font-variant-numeric: tabular-nums; }
.ds-sticky-bar__right { display: flex; align-items: center; gap: 12px; }
.ds-active-filter-chips {
display: flex;
align-items: center;
gap: 6px;
max-width: min(48vw, 560px);
overflow-x: auto;
overscroll-behavior-inline: contain;
padding: 2px 0;
scrollbar-width: none;
}
.ds-active-filter-chips::-webkit-scrollbar { display: none; }
.ds-active-filter-chips[hidden] { display: none; }
.ds-active-filter-chip {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
flex: 0 0 auto;
height: 24px;
padding: 0 8px 0 10px;
border: 0;
border-radius: var(--r-pill);
background: var(--gray-950);
color: var(--gray-0);
font: inherit;
font-size: 11px;
font-weight: var(--fw-bd);
line-height: 1;
cursor: pointer;
transition: background var(--t-fast) ease-out;
}
.ds-active-filter-chip:hover { background: var(--gray-800); }
.ds-active-filter-chip .mi {
font-size: 14px;
line-height: 1;
}
/* Filter toggle button */
.ds-filter-toggle {
display: inline-flex; align-items: center; gap: 6px;
height: 34px; padding: 0 14px;
background: transparent; border: 1px solid var(--border-base);
border-radius: var(--r-pill);
font-size: var(--fs-caption-lg); font-weight: var(--fw-md);
color: var(--fg-base);
cursor: pointer;
transition: var(--t-fast) ease-out;
font: inherit; line-height: 1;
}
.ds-filter-toggle:hover { border-color: var(--gray-700); background: var(--bg-subtle); }
.ds-filter-toggle .mi { font-size: 18px; }
.ds-filter-toggle__label { font-size: var(--fs-body-sm); font-weight: var(--fw-md); }
.ds-filter-toggle[aria-expanded="true"] {
background: var(--gray-950); color: var(--gray-0); border-color: var(--gray-950);
padding: 0 10px;
}
/* 활성 상태 — 아이콘만 (rail head에 "필터" 라벨 이미 있음) */
.ds-filter-toggle[aria-expanded="true"] .ds-filter-toggle__label { display: none; }
/* Count chip — 선택된 필터 수 (비활성 상태에서만 노출) */
.ds-filter-toggle__count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; padding: 0 5px;
background: var(--mystic-300); color: var(--mystic-950);
font-size: 10px; font-weight: var(--fw-bk);
border-radius: 9px;
font-variant-numeric: tabular-nums;
margin-left: 2px;
}
.ds-filter-toggle__count[hidden] { display: none; }
.ds-filter-toggle[aria-expanded="true"] .ds-filter-toggle__count {
background: var(--gray-0); color: var(--gray-950);
}
/* 슬라이드 애니메이션 — 필터 rail 좌측에서 in/out (desktop) */
.ds-market-body, .ds-coll-body {
transition: grid-template-columns 0.32s var(--ease-emp), gap 0.32s var(--ease-emp);
}
.ds-filter-rail {
transform: translateX(0);
opacity: 1;
transition:
transform 0.32s var(--ease-emp),
opacity 0.2s ease 0.06s;
will-change: transform, opacity;
}
.ds-market-body.is-filter-hidden,
.ds-coll-body.is-filter-hidden {
grid-template-columns: 0 1fr !important;
gap: 0 !important;
}
.ds-market-body.is-filter-hidden .ds-filter-rail,
.ds-coll-body.is-filter-hidden .ds-filter-rail {
transform: translateX(calc(-100% - 32px));
opacity: 0;
pointer-events: none;
transition:
transform 0.32s var(--ease-emp),
opacity 0.18s ease;
}
/* Filter rail close button (모바일 전용 — desktop에선 숨김) */
.ds-filter-rail__close {
display: none;
width: 32px; height: 32px;
background: transparent; border: none;
cursor: pointer; padding: 0;
border-radius: 50%;
color: var(--fg-muted);
transition: background var(--t-fast);
}
.ds-filter-rail__close:hover { background: var(--bg-subtle); color: var(--fg-base); }
.ds-filter-rail__close .mi { font-size: 20px; }
/* Filter rail apply CTA (모바일 전용 — sticky bottom) */
.ds-filter-rail__apply {
display: none;
position: sticky; bottom: 0;
margin: 16px -18px -20px;
padding: 12px 18px max(12px, env(safe-area-inset-bottom));
background: var(--bg-card);
border-top: 1px solid var(--border-base);
}
.ds-filter-rail__apply .ds-btn { width: 100%; }
.ds-filter-rail__apply-count { display: inline-flex; align-items: baseline; gap: 0; }
@media (max-width: 1023px) {
.ds-filter-rail {
display: flex;
flex-direction: column;
overflow: hidden;
}
.ds-filter-rail__head,
.ds-filter-mode,
.ds-filter-rail__apply {
flex: 0 0 auto;
}
.ds-filter-rail__scroll {
display: block;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
padding-right: 2px;
scrollbar-width: none;
}
.ds-filter-rail__scroll::-webkit-scrollbar {
width: 0;
height: 0;
}
.ds-filter-rail__apply {
position: relative;
z-index: 1;
margin: 12px -18px 0;
padding: 12px 18px calc(12px + max(env(safe-area-inset-bottom, 0px), var(--kado-visual-bottom-inset, 0px)));
background: var(--bg-card);
box-shadow: 0 -12px 24px rgba(255, 255, 255, 0.94);
}
.ds-filter-options--scroll {
max-height: none;
overflow: visible;
padding-right: 0;
scrollbar-width: auto;
}
.ds-filter-options--scroll::-webkit-scrollbar {
display: none;
}
.ds-filter-group {
margin-bottom: 0;
border-bottom: 1px solid var(--border-subtle);
padding: 14px 0;
}
.ds-filter-group:first-child {
padding-top: 0;
}
.ds-filter-group h3.ds-filter-group__toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 28px;
margin: 0;
cursor: pointer;
user-select: none;
}
.ds-filter-group h3.ds-filter-group__toggle::after {
content: 'expand_less';
font-family: 'Material Symbols Outlined';
font-size: 18px;
line-height: 1;
color: var(--fg-faint);
font-weight: 400;
transition: transform var(--t-fast) ease-out, color var(--t-fast) ease-out;
}
.ds-filter-group h3.ds-filter-group__toggle:hover,
.ds-filter-group h3.ds-filter-group__toggle:focus-visible {
color: var(--fg-base);
}
.ds-filter-group h3.ds-filter-group__toggle:focus-visible {
outline: 2px solid var(--mystic-300);
outline-offset: 4px;
border-radius: 6px;
}
.ds-filter-group__content {
padding-top: 10px;
}
.ds-filter-group.is-collapsed .ds-filter-group__content {
display: none;
}
.ds-filter-group.is-collapsed h3.ds-filter-group__toggle::after {
transform: rotate(180deg);
color: var(--fg-muted);
}
}
/* Backdrop (모바일 bottom sheet) */
.ds-filter-backdrop {
display: none;
position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 90;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
/* Sticky-bar 검색 (모바일 row 2) */
.ds-sticky-bar__search {
display: none;
align-items: center; gap: 8px;
width: 100%;
height: 38px; padding: 0 12px;
background: var(--bg-subtle);
border: 1px solid var(--border-base);
border-radius: var(--r-pill);
transition: background var(--t-fast) ease-out, border-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
}
.ds-sticky-bar__search:focus-within { border-color: var(--gray-950); background: var(--bg-card); box-shadow: var(--focus-ring-input); }
.ds-sticky-bar__search .mi { font-size: 18px; color: var(--fg-muted); flex-shrink: 0; }
.ds-sticky-bar__search input {
flex: 1; min-width: 0;
background: transparent; border: none; outline: none;
font: inherit; font-size: var(--fs-body-sm);
color: var(--fg-base);
}
.ds-sticky-bar__search input:focus,
.ds-sticky-bar__search input:focus-visible { box-shadow: none; outline: none; }
/* v0.7 S3: 검색 trigger button (sticky bar 안) */
.ds-sticky-bar__search-trigger {
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: 1px solid var(--border-base);
border-radius: var(--r-pill);
color: var(--fg-base);
cursor: pointer;
transition: var(--t-fast) ease-out;
font: inherit;
}
.ds-sticky-bar__search-trigger:hover {
background: var(--bg-subtle);
border-color: var(--gray-700);
}
.ds-sticky-bar__search-trigger .mi { font-size: 18px; }
/* v0.7: PC + 태블릿(≥768px)에는 page-header 검색 input이 이미 노출됨 → 중복 제거 */
@media (min-width: 768px) {
.ds-sticky-bar__search-trigger { display: none !important; }
}
/* v0.7 S3: 검색 overlay (full-screen) */
.ds-search-overlay {
position: fixed; inset: 0; z-index: 200;
background: var(--bg-base);
opacity: 0;
pointer-events: none;
transition: opacity 180ms ease-out;
display: flex; flex-direction: column;
}
.ds-search-overlay.is-open {
opacity: 1;
pointer-events: auto;
}
.ds-search-overlay__sr {
position: absolute; width: 1px; height: 1px;
overflow: hidden; clip: rect(0 0 0 0);
}
.ds-search-overlay__bar {
display: flex; align-items: center; gap: 8px;
padding: 12px 16px;
border-bottom: 1px solid var(--border-base);
background: var(--bg-base);
}
.ds-search-overlay__back {
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: 0;
border-radius: var(--r-pill);
color: var(--fg-base);
cursor: pointer;
flex-shrink: 0;
}
.ds-search-overlay__back:hover { background: var(--bg-subtle); }
.ds-search-overlay__back .mi { font-size: 22px; }
.ds-search-overlay__input-wrap {
flex: 1;
display: flex; align-items: center; gap: 8px;
height: 40px; padding: 0 14px;
background: var(--bg-subtle);
border: 1px solid var(--border-subtle);
border-radius: var(--r-pill);
transition: background var(--t-fast) ease-out, border-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
}
.ds-search-overlay__input-wrap:focus-within {
background: var(--bg-card);
border-color: var(--gray-950);
box-shadow: var(--focus-ring-input);
}
.ds-search-overlay__input-wrap > .mi { font-size: 18px; color: var(--fg-muted); flex-shrink: 0; }
.ds-search-overlay__input-wrap input {
flex: 1;
background: transparent;
border: 0; outline: 0;
font: inherit;
font-size: var(--fs-body-md);
color: var(--fg-base);
}
.ds-search-overlay__input-wrap input:focus,
.ds-search-overlay__input-wrap input:focus-visible { box-shadow: none; outline: none; }
.ds-search-overlay__input-wrap input::placeholder { color: var(--fg-muted); }
.ds-search-overlay__clear {
width: 24px; height: 24px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--gray-300); color: var(--gray-700);
border: 0;
border-radius: 50%;
cursor: pointer;
flex-shrink: 0;
}
.ds-search-overlay__clear .mi { font-size: 14px; }
:root[data-theme="dark"] .ds-search-overlay__clear { background: var(--gray-700); color: var(--gray-200); }
.ds-search-overlay__body {
flex: 1;
overflow-y: auto;
padding: 20px 16px 32px;
-webkit-overflow-scrolling: touch;
}
.ds-search-overlay__section { margin-bottom: 24px; }
.ds-search-overlay__section-title {
font-size: var(--fs-caption);
font-weight: var(--fw-bd);
color: var(--fg-muted);
letter-spacing: 0.04em;
text-transform: uppercase;
margin: 0 0 12px;
}
.ds-search-overlay__chips {
display: flex; flex-wrap: wrap; gap: 8px;
}
.ds-search-overlay__chip {
height: 32px; padding: 0 14px;
background: var(--bg-subtle);
border: 1px solid var(--border-subtle);
border-radius: var(--r-pill);
font: inherit;
font-size: var(--fs-body-sm);
font-weight: var(--fw-md);
color: var(--fg-base);
cursor: pointer;
transition: var(--t-fast) ease-out;
}
.ds-search-overlay__chip:hover {
background: var(--bg-muted);
border-color: var(--border-base);
}
.ds-search-overlay__list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 4px;
}
.ds-search-overlay__result {
display: grid;
grid-template-columns: 44px 1fr auto;
gap: 14px; align-items: center;
padding: 10px 4px;
border-bottom: 1px solid var(--border-subtle);
cursor: pointer;
transition: background var(--t-fast) ease-out;
}
.ds-search-overlay__result:hover { background: var(--bg-subtle); }
.ds-search-overlay__result:last-child { border-bottom: none; }
.ds-search-overlay__result-art {
width: 44px; aspect-ratio: 1 / 1.4;
background-color: var(--gray-100);
background-image: none;
background-size: auto 88%;
background-repeat: no-repeat;
background-position: center;
border-radius: 4px;
}
:root[data-theme="dark"] .ds-search-overlay__result-art { background-color: var(--gray-800); }
.ds-search-overlay__result-body { min-width: 0; }
.ds-search-overlay__result-name {
font-size: var(--fs-body-sm); font-weight: var(--fw-bd);
letter-spacing: -0.005em;
margin: 0 0 2px;
white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
.ds-search-overlay__result-meta {
font-size: var(--fs-caption); color: var(--fg-muted);
margin: 0;
font-variant-numeric: tabular-nums;
}
.ds-search-overlay__result .mi {
font-size: 18px; color: var(--fg-muted);
}
.ds-search-overlay__empty {
text-align: center;
padding: 40px 16px;
color: var(--fg-muted);
font-size: var(--fs-body-sm);
}
/* ============ TABLET: Filter rail = side drawer overlay (768–1023px)
왜: tablet에서 grid-template-columns: 1fr + position:static로 인해
filter rail이 inline 전체 폭을 차지해 화면을 꽉 채움.
How: 우측 side drawer로 슬라이드. (page-header 검색은 그대로 유지)
z-index: theme toggle(101)보다 위 — close 버튼 클릭 충돌 방지 */
@media (min-width: 768px) and (max-width: 1023px) {
.ds-market-body, .ds-coll-body {
display: block !important;
grid-template-columns: none !important;
gap: 0 !important;
transition: none !important;
}
.ds-filter-rail {
position: fixed !important;
left: auto; right: 0; bottom: 0; top: 0;
width: min(420px, 92vw);
z-index: 110; /* theme toggle(101) 위 */
margin: 0;
border-radius: 16px 0 0 16px;
border-left: 1px solid var(--border-base);
box-shadow: -8px 0 32px rgba(0, 0, 0, 0.16);
height: 100vh;
max-height: none;
padding: 20px 20px 0;
transform: translateX(0);
opacity: 1;
transition: transform 0.32s var(--ease-emp);
}
.ds-filter-backdrop { z-index: 109; }
.ds-market-body.is-filter-hidden .ds-filter-rail,
.ds-coll-body.is-filter-hidden .ds-filter-rail {
transform: translateX(100%) !important;
opacity: 1 !important;
pointer-events: none;
}
/* close: 좌측 inline (theme toggle 충돌 방지) — 우측은 초기화 버튼 */
.ds-filter-rail__close { display: grid; place-items: center; position: static !important; }
.ds-filter-rail__apply { display: block; }
.ds-filter-rail__head {
position: relative;
flex-direction: row !important;
align-items: center !important;
gap: 8px;
padding-right: 0;
}
.ds-filter-rail__head h2 { order: 2; flex: 1; }
.ds-filter-rail__close { order: 1; }
.ds-filter-rail__reset { order: 3; }
.ds-filter-backdrop { display: block; }
body:has(.ds-market-body:not(.is-filter-hidden)) .ds-filter-backdrop,
body:has(.ds-coll-body:not(.is-filter-hidden)) .ds-filter-backdrop {
opacity: 1; pointer-events: auto;
}
body:has(.ds-market-body:not(.is-filter-hidden)),
body:has(.ds-coll-body:not(.is-filter-hidden)) {
overflow: hidden;
}
}
/* ============ MOBILE: Bottom sheet pattern (필터) + 1-row sticky bar (v0.7 M3) ============ */
@media (max-width: 767px) {
/* v0.7 M3 + S3: 1-row sticky bar (56px) — filter + count + search icon + sort */
.ds-sticky-bar {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
height: auto;
min-height: 56px;
padding: 0;
gap: 8px;
row-gap: 8px;
margin-top: 4px;
margin-bottom: 12px;
}
.ds-sticky-bar > .ds-sticky-bar__left { display: contents; }
.ds-filter-toggle {
flex: 0 0 auto;
white-space: nowrap;
}
.ds-filter-toggle__label { white-space: nowrap; }
.ds-sticky-bar > .ds-sticky-bar__right {
width: auto;
margin-left: auto;
gap: 6px;
flex: 0 0 auto;
}
.ds-sticky-bar__search { display: none !important; }
.ds-active-filter-chips {
flex: 0 0 100%;
order: 10;
width: 100%;
max-width: 100%;
gap: 4px;
padding: 0 0 2px;
}
.ds-active-filter-chip { height: 22px; padding: 0 7px 0 9px; font-size: 10px; }
/* count 짧게 (10개의 매물 → 10건) */
.ds-sticky-bar__count { font-size: var(--fs-caption); white-space: nowrap; }
/* sort dropdown 컴팩트 */
.ds-sticky-bar__right .ds-dropdown__trigger { padding: 0 10px; height: 34px; font-size: var(--fs-body-sm); }
.ds-sticky-bar__right .ds-dropdown__value { white-space: nowrap; }
/* page-header 검색은 모바일에서 숨김 */
.ds-page-search { display: none !important; }
/* market-body — grid 레이아웃 해제 */
.ds-market-body, .ds-coll-body {
display: block !important;
grid-template-columns: none !important;
gap: 0 !important;
transition: none !important;
}
/* filter rail = bottom sheet */
.ds-filter-rail {
position: fixed !important;
left: 0; right: 0; bottom: 0;
top: auto;
z-index: 100;
margin: 0;
border-radius: 16px 16px 0 0;
border: none;
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.16);
height: min(85dvh, 720px);
max-height: 85vh;
max-height: min(85dvh, 720px);
padding: 32px 18px 0;
transform: translateY(0);
opacity: 1;
transition: transform 0.32s var(--ease-emp);
}
/* drag handle */
.ds-filter-rail::before {
content: '';
position: absolute; top: 10px; left: 50%;
transform: translateX(-50%);
width: 40px; height: 4px;
background: var(--gray-300);
border-radius: 2px;
}
/* 모바일에선 is-filter-hidden = 닫힌 상태 = bottom 으로 내려감 */
.ds-market-body.is-filter-hidden .ds-filter-rail,
.ds-coll-body.is-filter-hidden .ds-filter-rail {
transform: translateY(100%) !important;
opacity: 1 !important;
pointer-events: none;
}
/* 모바일에선 grid-template-columns trick 무력화 */
.ds-market-body.is-filter-hidden,
.ds-coll-body.is-filter-hidden {
grid-template-columns: none !important;
gap: 0 !important;
}
/* close 버튼 + apply CTA 모바일 노출 */
.ds-filter-rail__close {
display: grid;
place-items: center;
width: 32px;
height: 32px;
flex: 0 0 32px;
}
.ds-filter-rail__apply { display: block; }
/* head 위계 정합 — 모바일에선 close 버튼이 우측 */
.ds-filter-rail__head {
position: relative;
display: flex;
align-items: center;
gap: 4px;
min-height: 32px;
padding-right: 0;
}
.ds-filter-rail__head h2 { flex: 1; }
.ds-filter-rail__reset {
display: inline-flex;
align-items: center;
justify-content: center;
height: 32px;
}
.ds-filter-rail__close { position: static; }
/* backdrop */
.ds-filter-backdrop { display: block; }
/* 모바일 + 필터 열림 = backdrop visible */
body:has(.ds-market-body:not(.is-filter-hidden)) .ds-filter-backdrop,
body:has(.ds-coll-body:not(.is-filter-hidden)) .ds-filter-backdrop {
opacity: 1;
pointer-events: auto;
}
/* 스크롤 잠금 */
body:has(.ds-market-body:not(.is-filter-hidden)),
body:has(.ds-coll-body:not(.is-filter-hidden)) {
overflow: hidden;
}
/* 토글 버튼 active 상태도 아이콘 only (label hidden 위에서 처리됨) */
}
.ds-sort {
display: inline-flex; align-items: center; gap: 6px;
height: 34px; padding: 0 12px;
background: var(--bg-subtle); border-radius: var(--r-pill);
font-size: var(--fs-caption); font-weight: var(--fw-bd);
cursor: pointer;
}
.ds-sort .mi { font-size: 16px; color: var(--fg-muted); }
/* ==========================================================
Grading Page — 가격표·서비스 카드
========================================================== */
.grading-pricing {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
@media (max-width: 767px) { .grading-pricing { grid-template-columns: 1fr; } }
.ds-pricing {
position: relative;
display: flex; flex-direction: column;
padding: 24px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 12px;
}
.ds-pricing--featured { border-color: var(--gray-950); border-width: 2px; }
:root[data-theme="dark"] .ds-pricing--featured { border-color: var(--gray-50); }
.ds-pricing__tier {
font-size: var(--fs-caption-sm); font-weight: var(--fw-bk);
text-transform: uppercase; letter-spacing: 0.04em;
color: var(--fg-muted);
}
.ds-pricing__price {
margin-top: 8px;
font-size: 28px; font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
letter-spacing: -0.012em;
}
.ds-pricing__price small { font-size: 14px; color: var(--fg-muted); margin-left: 2px; font-weight: var(--fw-rg); }
.ds-pricing__sub { font-size: var(--fs-caption); color: var(--fg-muted); margin-top: 4px; }
.ds-pricing__features {
list-style: none; padding: 0; margin: 16px 0 0;
display: flex; flex-direction: column; gap: 8px;
font-size: var(--fs-body-sm); color: var(--fg-subtle);
}
.ds-pricing__features li { display: flex; align-items: start; gap: 6px; }
.ds-pricing__features .mi { font-size: 16px; color: var(--gray-600); flex-shrink: 0; margin-top: 1px; }
.ds-pricing__cta { margin-top: 16px; }
/* ==========================================================
Service Block — 등급대행 페이지의 큰 서비스 단위 (PSA / eBay)
섹션을 hairline으로 분리 + 일관 패턴 (header / process / 메타 / CTA)
========================================================== */
.ds-service-block {
border-top: 1px solid var(--border-base);
padding-block: 56px;
}
.ds-service-block:first-of-type { border-top: none; padding-top: 32px; }
.ds-service-block__header {
display: flex; align-items: start; gap: 16px;
margin-bottom: 32px;
}
.ds-service-block__logo {
width: 56px; height: 56px;
border-radius: 8px;
display: grid; place-items: center;
font-size: 14px; font-weight: var(--fw-bk);
letter-spacing: -0.01em;
flex-shrink: 0;
color: #FFF;
}
.ds-service-block__logo--psa { background: #C8102E; }
.ds-service-block__logo--ebay { background: var(--gray-950); }
:root[data-theme="dark"] .ds-service-block__logo--ebay { background: var(--gray-50); color: var(--gray-950); }
.ds-service-block__head { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.ds-service-block__eyebrow {
font-size: var(--fs-caption-xs); font-weight: var(--fw-bk);
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--fg-muted);
}
.ds-service-block__title {
font-size: var(--fs-h3); font-weight: var(--fw-bk);
letter-spacing: -0.01em; line-height: 1.3;
}
.ds-service-block__sub {
font-size: var(--fs-body-sm); color: var(--fg-muted);
margin-top: 4px;
}
/* 서비스 내부 sub-section 라벨 */
.ds-sub-label {
font-size: var(--fs-caption-xs);
font-weight: var(--fw-bk);
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--fg-muted);
margin-bottom: 14px;
}
/* ==========================================================
Tracking Timeline — 점-선 가로 타임라인 (PSA 트래킹용 7단계)
========================================================== */
.ds-tracking {
position: relative;
padding: 12px 0 4px;
}
.ds-tracking__nodes {
position: relative;
display: grid;
grid-template-columns: repeat(var(--track-cols, 7), 1fr);
}
.ds-tracking__nodes::before {
content: '';
position: absolute;
top: 14px; left: 4%; right: 4%;
height: 1px;
background: var(--border-strong);
}
.ds-tracking__node {
position: relative;
display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.ds-tracking__dot {
width: 10px; height: 10px;
border-radius: 50%;
background: var(--gray-950);
border: 2px solid var(--bg-base);
position: relative; z-index: 1;
}
:root[data-theme="dark"] .ds-tracking__dot { background: var(--gray-50); border-color: var(--bg-base); }
.ds-tracking__node--idle .ds-tracking__dot { background: var(--gray-300); }
.ds-tracking__label {
font-size: var(--fs-caption-sm); color: var(--fg-subtle);
font-weight: var(--fw-md);
white-space: nowrap;
letter-spacing: -0.005em;
}
@media (max-width: 767px) {
.ds-tracking { overflow-x: auto; }
.ds-tracking__nodes { min-width: 600px; }
}
/* ==========================================================
Grader Wall — 공인 그레이딩사 라인업 (히어로틱 6 wall)
각 회사 워드마크는 텍스트, 회사 컬러는 우상단 액센트 라인.
.ds-grader__logo는 실제 로고 PNG를 끼울 자리 (운영팀 교체).
========================================================== */
.ds-grader-wall {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
margin-top: 16px;
}
@media (max-width: 1023px) { .ds-grader-wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 599px) { .ds-grader-wall { grid-template-columns: repeat(2, 1fr); } }
.ds-grader {
position: relative;
aspect-ratio: 4 / 5;
border-radius: 10px;
background: var(--gray-950);
color: #FFF;
overflow: hidden;
display: flex; flex-direction: column;
padding: 16px 14px 14px;
text-decoration: none;
cursor: pointer;
transition: transform 200ms var(--ease-emp), box-shadow 200ms var(--ease-emp);
}
.ds-grader:hover { box-shadow: var(--shadow-1); }
/* 우상단 회사 컬러 액센트 — 평행사변형 슬랜트로 KADO 시그니처 정합 */
.ds-grader__accent {
position: absolute; top: 0; right: 0;
width: 64px; height: 4px;
background: var(--accent, #FFF);
transform: skewX(-30deg);
transform-origin: top right;
}
/* 로고 영역 — logos/ 폴더에 PNG 있으면 자동 표시, 없으면 워드마크 fallback
회사별 background-image는 .ds-grader--{slug}에서 정의 */
.ds-grader__logo {
flex: 1;
display: grid; place-items: center;
margin-bottom: 12px;
position: relative;
background-position: center;
background-repeat: no-repeat;
background-size: 60% auto;
}
/* PNG가 들어 있으면 워드마크 숨김 */
.ds-grader--has-img .ds-grader__wordmark { display: none; }
.ds-grader--psa.ds-grader--has-img .ds-grader__logo { background-image: url('logos/psa.png'); }
.ds-grader--psa-japan.ds-grader--has-img .ds-grader__logo { background-image: url('logos/psa-japan.png'); }
.ds-grader--bgs.ds-grader--has-img .ds-grader__logo { background-image: url('logos/bgs.png'); }
.ds-grader--cgc.ds-grader--has-img .ds-grader__logo { background-image: url('logos/cgc.png'); }
.ds-grader--ars.ds-grader--has-img .ds-grader__logo { background-image: url('logos/ars.png'); }
.ds-grader--tag.ds-grader--has-img .ds-grader__logo { background-image: url('logos/tag.png'); }
.ds-grader__wordmark {
font-size: 22px;
font-weight: 900;
letter-spacing: -0.02em;
text-align: center;
line-height: 1;
}
.ds-grader__wordmark--small { font-size: 16px; letter-spacing: -0.005em; }
.ds-grader__country {
font-size: 9px; font-weight: var(--fw-bk);
text-transform: uppercase; letter-spacing: 0.08em;
color: rgba(255,255,255,0.55);
margin-bottom: 4px;
}
.ds-grader__name {
font-size: var(--fs-caption);
font-weight: var(--fw-bd);
color: rgba(255,255,255,0.85);
letter-spacing: -0.005em;
line-height: 1.3;
}
/* 회사별 액센트 컬러 — 워드마크는 흰색 통일, 액센트만 회사 색 */
.ds-grader--psa { --accent: #FF3B3B; }
.ds-grader--psa-japan { --accent: #B91C1C; }
.ds-grader--bgs { --accent: #1F6FEB; }
.ds-grader--cgc { --accent: #00C2C9; }
.ds-grader--ars { --accent: #FFD500; }
.ds-grader--tag { --accent: #0A0B0E; }
/* (구) 작은 grade-badges — 호환 유지하되 신규 페이지엔 wall 사용 */
.ds-grade-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-grade-badge {
display: inline-flex; align-items: center; gap: 6px;
height: 28px; padding: 0 12px;
background: var(--gray-950); color: var(--gray-0);
border-radius: 4px;
font-size: var(--fs-caption-sm); font-weight: var(--fw-bk);
letter-spacing: -0.005em;
}
.ds-grade-badge::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
display: inline-block;
}
.ds-grade-badge--psa::before { background: #FF3B3B; }
.ds-grade-badge--psa-japan::before { background: #B91C1C; }
.ds-grade-badge--bgs::before { background: #1F6FEB; }
.ds-grade-badge--cgc::before { background: #00A1A7; }
.ds-grade-badge--ars::before { background: #FFD500; }
.ds-grade-badge--tag::before { background: #0A0B0E; }
:root[data-theme="dark"] .ds-grade-badge { background: var(--gray-50); color: var(--gray-950); }
/* ==========================================================
Fee Bar — eBay 수수료 구조 (82% / 13% / 5%) 가로 stacked
========================================================== */
.ds-fee-bar {
display: flex; align-items: stretch;
height: 56px;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--border-base);
}
.ds-fee-bar__seg {
display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
padding: 0 16px;
gap: 2px;
flex: var(--seg-flex, 1);
min-width: 0;
}
.ds-fee-bar__seg strong {
font-size: var(--fs-body); font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
letter-spacing: -0.01em;
}
.ds-fee-bar__seg span {
font-size: var(--fs-caption-sm);
font-weight: var(--fw-md);
letter-spacing: 0.04em;
text-transform: uppercase;
opacity: 0.7;
}
.ds-fee-bar__seg--main {
background: var(--gray-950); color: var(--gray-0);
}
.ds-fee-bar__seg--ebay {
background: var(--bg-subtle); color: var(--fg-base);
border-left: 1px solid var(--border-base);
}
/* KADO 수수료 — 시그니처 mystic 그린으로 부활. "이게 KADO 차별점" 강조 */
.ds-fee-bar__seg--kado {
background: var(--mystic-300); color: var(--mystic-950);
border-left: 1px solid var(--border-base);
}
.ds-fee-bar__seg--kado strong { color: var(--mystic-950); }
.ds-fee-bar__seg--kado span { opacity: 0.85; }
.ds-fee-bar__caption {
margin-top: 8px;
font-size: var(--fs-caption);
color: var(--fg-muted);
}
/* ==========================================================
Feature Chips — 작은 보조 특징 (글로벌 판매·안전 배송·정산 보장)
========================================================== */
.ds-feature-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ds-feature-chip {
display: inline-flex; align-items: center; gap: 4px;
height: 26px; padding: 0 10px;
background: var(--bg-subtle);
border: 1px solid var(--border-base);
border-radius: var(--r-pill);
font-size: var(--fs-caption);
font-weight: var(--fw-bd);
color: var(--fg-subtle);
letter-spacing: -0.005em;
}
.ds-feature-chip .mi { font-size: 14px; color: var(--fg-muted); }
/* Service block CTA 영역 */
.ds-service-block__cta-row {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--border-subtle);
}
/* ==========================================================
Grading Hero — 등급사 먼저 + 즉시 신청 CTA + 한 줄 카피
"여기서 바로 액션 가능한 진입부"
========================================================== */
.ds-grading-hero { padding-block: 8px 40px; }
.ds-grading-hero__head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 24px; flex-wrap: wrap;
margin-bottom: 28px;
}
.ds-grading-hero__copy { display: flex; flex-direction: column; gap: 6px; max-width: 540px; }
.ds-grading-hero__eyebrow {
font-size: var(--fs-caption-xs); font-weight: var(--fw-bk);
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--fg-muted);
}
.ds-grading-hero__title {
font-size: clamp(26px, 3vw, 34px);
font-weight: var(--fw-bk);
line-height: 1.2; letter-spacing: -0.018em;
}
/* 형광펜 — KADO 시그니처 mystic 그린. 검정에서 부활. 진짜 형광펜 association */
.ds-grading-hero__title em {
font-style: normal;
background: linear-gradient(180deg, transparent 60%, var(--mystic-300) 60%, var(--mystic-300) 92%, transparent 92%);
padding-inline: 2px;
color: var(--fg-base);
}
:root[data-theme="dark"] .ds-grading-hero__title em {
background: linear-gradient(180deg, transparent 60%, var(--mystic-300) 60%, var(--mystic-300) 92%, transparent 92%);
color: var(--gray-950);
}
.ds-grading-hero__sub {
margin-top: 4px;
font-size: var(--fs-body-sm); color: var(--fg-muted);
}
.ds-grading-hero__cta {
display: flex; flex-direction: column; gap: 8px; align-items: end;
flex-shrink: 0;
}
.ds-grading-hero__cta-note {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
letter-spacing: -0.005em;
display: inline-flex; align-items: center; gap: 6px;
}
.ds-grading-hero__cta-note::before {
content: 'schedule';
font-family: 'Material Symbols Outlined';
font-size: 14px;
color: var(--fg-faint);
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
@media (max-width: 767px) {
.ds-service-block {
padding-block: 32px;
}
.ds-service-block:first-of-type {
padding-top: 24px;
}
.ds-grading-hero {
padding-block: 0 32px;
}
.ds-grading-hero__head {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin-bottom: 18px;
}
.ds-grading-hero__copy {
max-width: none;
width: 100%;
gap: 8px;
}
.ds-grading-hero__title {
font-size: 26px;
line-height: 1.18;
}
.ds-grading-hero__sub {
margin-top: 8px;
line-height: 1.5;
}
.ds-grading-hero__cta {
width: 100%;
align-items: stretch;
gap: 8px;
margin-top: 0;
}
.ds-grading-hero__cta .ds-btn {
width: 100%;
justify-content: center;
}
.ds-grading-hero__cta-note {
width: 100%;
justify-content: center;
}
}
/* ==========================================================
How-it-works — 서브 인포 래퍼 (Process + Tracking 압축)
========================================================== */
.ds-howto {
background: var(--bg-subtle);
border: 1px solid var(--border-base);
border-radius: 12px;
padding: 28px;
}
:root[data-theme="dark"] .ds-howto { background: var(--gray-900); }
.ds-howto__head {
display: flex; align-items: end; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
margin-bottom: 18px;
}
.ds-howto__title {
font-size: var(--fs-h4); font-weight: var(--fw-bk);
letter-spacing: -0.005em;
margin: 0 0 22px;
}
.ds-howto__sub {
font-size: var(--fs-caption); color: var(--fg-muted);
}
/* v0.7 T6: 두 phase 명확히 분리 (내가 할 일 vs 자동 진행) */
.ds-howto__phase + .ds-howto__phase { margin-top: 24px; padding-top: 24px; border-top: 1px dashed var(--border-base); }
.ds-howto__phase-head {
display: flex; align-items: center; flex-wrap: wrap;
gap: 8px 12px;
margin-bottom: 6px;
}
.ds-howto__phase-num {
display: inline-flex; align-items: center;
height: 22px; padding: 0 9px;
font-size: 11px; font-weight: var(--fw-bk);
letter-spacing: 0.06em;
background: var(--gray-950); color: var(--gray-0);
border-radius: 4px;
}
:root[data-theme="dark"] .ds-howto__phase-num { background: var(--gray-50); color: var(--gray-950); }
.ds-howto__phase--auto .ds-howto__phase-num {
background: transparent;
color: var(--fg-base);
border: 1px solid var(--border-strong);
}
.ds-howto__phase-title {
font-size: var(--fs-body); font-weight: var(--fw-bd);
color: var(--fg-base);
letter-spacing: -0.012em;
}
.ds-howto__phase-time {
font-size: var(--fs-caption); font-weight: var(--fw-md);
color: var(--fg-muted);
font-variant-numeric: tabular-nums;
}
.ds-howto__phase-alert {
display: inline-flex; align-items: center; gap: 4px;
margin-left: auto;
height: 22px; padding: 0 9px;
font-size: 11px; font-weight: var(--fw-bd);
background: var(--mystic-50, #eef9f1);
color: var(--mystic-700, #2c7a4b);
border-radius: var(--r-pill);
}
:root[data-theme="dark"] .ds-howto__phase-alert {
background: rgba(56, 161, 105, 0.15); color: var(--mystic-300, #6cd49a);
}
.ds-howto__phase-alert .mi { font-size: 13px; }
.ds-howto__phase-sub {
font-size: var(--fs-caption); color: var(--fg-subtle);
margin: 0 0 14px;
line-height: 1.5;
}
/* Process grid — 3x2 아이콘 카드 (기존 step-chain 가로 chain 대체) */
.ds-process-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
/* v0.7 M5: 모바일에선 inline horizontal stepper (6 dots + 짧은 라벨, 캐러셀 X)
~110px 높이 (이전 ~600px+ 2x3 grid 대비 1/5) */
@media (max-width: 767px) {
.ds-process-grid {
display: flex !important;
grid-template-columns: none !important;
gap: 0 !important;
align-items: flex-start;
justify-content: space-between;
padding: 12px 4px 4px;
}
.ds-process-grid > .ds-process-step {
flex: 1 1 0;
flex-direction: column !important;
align-items: center !important;
gap: 6px !important;
padding: 0 2px !important;
background: transparent !important;
border: 0 !important;
position: relative;
min-width: 0;
}
.ds-process-grid > .ds-process-step:not(:last-child)::after {
content: '';
position: absolute;
top: 13px; /* 28px num circle 중앙선 */
left: calc(50% + 16px);
right: calc(-50% + 16px);
height: 1px;
background: var(--border-base);
z-index: 0;
}
/* icon 자리를 num circle로 swap — icon mi 숨기고 num을 그 자리로 absolute */
.ds-process-grid > .ds-process-step .ds-process-step__icon {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--bg-card);
border: 1px solid var(--border-strong);
position: relative; z-index: 1;
display: grid; place-items: center;
margin-bottom: 0;
}
.ds-process-grid > .ds-process-step .ds-process-step__icon .mi { display: none; }
.ds-process-grid > .ds-process-step .ds-process-step__body {
align-items: center;
text-align: center;
gap: 0;
flex-direction: column;
}
/* num을 icon circle 안에 absolute로 옮기기 */
.ds-process-grid > .ds-process-step .ds-process-step__num {
position: absolute;
top: 6px; /* circle 중앙 */
left: 50%;
transform: translateX(-50%);
font-size: 11px;
font-weight: var(--fw-bk);
color: var(--fg-base);
font-variant-numeric: tabular-nums;
letter-spacing: 0;
z-index: 2;
pointer-events: none;
}
.ds-process-grid > .ds-process-step .ds-process-step__label {
font-size: 10px;
font-weight: var(--fw-bd);
line-height: 1.2;
word-break: keep-all;
color: var(--fg-base);
}
}
.ds-process-step {
display: flex; gap: 12px; align-items: start;
padding: 14px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 8px;
transition: var(--t-fast) ease-out;
}
.ds-process-step:hover { border-color: var(--gray-300); }
.ds-process-step__icon {
width: 36px; height: 36px;
border-radius: 8px;
background: var(--bg-muted);
display: grid; place-items: center;
flex-shrink: 0;
}
.ds-process-step__icon .mi { font-size: 20px; color: var(--fg-base); }
.ds-process-step__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-process-step__num {
font-size: 10px; font-weight: var(--fw-bk);
letter-spacing: 0.06em; color: var(--fg-muted);
font-variant-numeric: tabular-nums;
}
.ds-process-step__label {
font-size: var(--fs-body-sm); font-weight: var(--fw-bd);
letter-spacing: -0.005em;
}
/* Compact tracking — Process 아래 한 줄 안내 + 작은 dot row */
.ds-tracking-compact {
margin-top: 20px;
padding-top: 18px;
border-top: 1px dashed var(--border-base);
}
.ds-tracking-compact__row {
display: flex; align-items: end; justify-content: space-between;
gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
}
.ds-tracking-compact__intro {
font-size: var(--fs-caption); color: var(--fg-muted);
}
.ds-tracking-compact__intro strong { color: var(--fg-base); }
.ds-tracking-compact__hint {
display: inline-flex; align-items: center; gap: 4px;
font-size: var(--fs-caption-xs); color: var(--fg-muted);
font-weight: var(--fw-bd); letter-spacing: 0.04em; text-transform: uppercase;
}
.ds-tracking-compact__hint .mi { font-size: 14px; color: var(--gray-600); }
/* ==========================================================
Empty State — 신청 내역 없음
========================================================== */
.ds-empty {
padding: 64px 24px;
text-align: center;
background: var(--bg-subtle);
border-radius: 12px;
border: 1px dashed var(--border-base);
display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.ds-empty .mi { font-size: 28px; color: var(--fg-faint); }
.ds-empty__msg { font-size: var(--fs-body-sm); color: var(--fg-muted); }
/* ==========================================================
=== GACHA-PAY === (Chunk 1 · Round 1-2 · gacha-pay.html)
롤백: 이 섹션 통째로 삭제 + gacha-pay.html 파일 삭제
========================================================== */
.pay-h1 {
font-size: 28px; font-weight: var(--fw-bk);
letter-spacing: -0.018em; line-height: 1.2;
margin: 24px 0 28px;
}
.pay-grid {
display: grid;
grid-template-columns: 1fr 380px;
gap: 32px;
padding-bottom: 64px;
align-items: start;
}
@media (max-width: 1023px) {
.pay-grid { grid-template-columns: 1fr; gap: 24px; }
}
.pay-grid__main { display: flex; flex-direction: column; gap: 24px; }
.ds-pay-section-title {
font-size: var(--fs-h4); font-weight: var(--fw-bk);
letter-spacing: -0.012em;
margin: 0 0 12px;
}
/* === Order Summary === */
.ds-pay-order {
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 16px;
padding: 20px;
}
.ds-pay-order__pack {
display: flex; gap: 14px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-subtle);
margin-bottom: 14px;
}
.ds-pay-order__pack-thumb {
width: 64px; height: 64px;
background: var(--gray-100);
border-radius: 8px;
flex-shrink: 0;
border: 1px solid var(--border-base);
}
:root[data-theme="dark"] .ds-pay-order__pack-thumb { background: var(--gray-800); }
.ds-pay-order__pack-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-pay-order__eyebrow {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
font-weight: var(--fw-md); letter-spacing: 0.05em;
text-transform: uppercase;
margin: 0;
}
.ds-pay-order__name {
font-size: var(--fs-h4); font-weight: var(--fw-bk);
letter-spacing: -0.01em;
margin: 2px 0 0;
}
.ds-pay-order__sub {
font-size: var(--fs-caption); color: var(--fg-muted);
margin: 0;
}
.ds-pay-order__rows { display: flex; flex-direction: column; gap: 8px; }
.ds-pay-order__row {
display: flex; justify-content: space-between; align-items: baseline;
font-size: var(--fs-body-sm);
}
.ds-pay-order__row-label { color: var(--fg-muted); font-weight: var(--fw-md); }
.ds-pay-order__row-value {
color: var(--fg-base); font-weight: var(--fw-bd);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.ds-pay-order__row-value small {
color: var(--fg-muted); font-weight: var(--fw-md); font-size: var(--fs-caption);
margin-left: 1px;
}
.ds-pay-order.is-live-loading .ds-pay-order__pack-thumb,
.ds-pay-order.is-live-loading .ds-pay-order__eyebrow,
.ds-pay-order.is-live-loading .ds-pay-order__name,
.ds-pay-order.is-live-loading .ds-pay-order__sub,
.ds-pay-order.is-live-loading .ds-pay-order__row-value,
.ds-pay-summary.is-live-loading .ds-pay-summary__breakdown .ds-pay-summary__row:first-child span:last-child,
.ds-pay-summary.is-live-loading #payTotal,
.ds-pay-summary.is-live-loading #payTotalFiat,
.ds-pay-summary.is-live-loading #payCtaAmount {
color: transparent !important;
border-radius: var(--r-pill);
background: linear-gradient(90deg, var(--bg-subtle) 0%, var(--bg-muted, var(--gray-100)) 48%, var(--bg-subtle) 100%);
background-size: 200% 100%;
animation: ds-skeleton-shimmer 1.4s ease-in-out infinite;
}
.ds-pay-order.is-live-loading .ds-pay-order__pack-thumb {
border-radius: 8px;
background-image: none !important;
}
.ds-pay-order.is-live-loading .ds-pay-order__eyebrow,
.ds-pay-order.is-live-loading .ds-pay-order__name,
.ds-pay-order.is-live-loading .ds-pay-order__sub,
.ds-pay-order.is-live-loading .ds-pay-order__row-value,
.ds-pay-summary.is-live-loading .ds-pay-summary__breakdown .ds-pay-summary__row:first-child span:last-child,
.ds-pay-summary.is-live-loading #payTotal,
.ds-pay-summary.is-live-loading #payTotalFiat,
.ds-pay-summary.is-live-loading #payCtaAmount {
display: inline-block;
}
.ds-pay-order.is-live-loading .ds-pay-order__eyebrow { width: 92px; min-height: 13px; }
.ds-pay-order.is-live-loading .ds-pay-order__name { width: min(220px, 100%); min-height: 24px; }
.ds-pay-order.is-live-loading .ds-pay-order__sub { width: min(320px, 100%); min-height: 15px; }
.ds-pay-order.is-live-loading .ds-pay-order__row-value { width: 96px; min-height: 18px; }
.ds-pay-order.is-live-loading .ds-pay-order__row-value small { color: transparent !important; }
.ds-pay-summary.is-live-loading .ds-pay-summary__breakdown .ds-pay-summary__row:first-child span:last-child { width: 92px; min-height: 18px; }
.ds-pay-summary.is-live-loading #payTotal { width: 136px; min-height: 28px; vertical-align: middle; }
.ds-pay-summary.is-live-loading #payTotal small { color: transparent !important; }
.ds-pay-summary.is-live-loading #payTotalFiat { width: 100px; min-height: 16px; vertical-align: -3px; }
.ds-pay-summary.is-live-loading #payCtaAmount { width: 76px; min-height: 18px; vertical-align: -3px; }
/* === Payment Method === */
.ds-grading-payment {
display: flex;
flex-direction: column;
gap: 12px;
padding-top: 12px;
}
.ds-pay-method__grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
/* '결제 수단' 제목과 결제수단 카드가 바짝 붙던 것 → 간격 추가.
마켓/팩 결제 + 충전 모달이 모두 이 grid 를 사용해 공통 적용됨. */
margin-top: 14px;
}
@media (max-width: 599px) { .ds-pay-method__grid { grid-template-columns: 1fr; } }
.ds-pay-method__card {
position: relative;
display: grid;
grid-template-columns: 40px 1fr 16px;
gap: 12px; align-items: center;
padding: 14px 16px;
background: var(--bg-card);
border: 1.5px solid var(--border-base);
border-radius: 12px;
cursor: pointer;
text-align: left;
transition: var(--t-fast) ease-out;
}
.ds-pay-method__card:hover { border-color: var(--gray-500); }
.ds-pay-method__card[aria-checked="true"] {
border-color: var(--gray-950);
background: var(--bg-subtle);
box-shadow: 0 0 0 1px var(--gray-950) inset;
}
:root[data-theme="dark"] .ds-pay-method__card[aria-checked="true"] {
border-color: var(--gray-50);
box-shadow: 0 0 0 1px var(--gray-50) inset;
}
.ds-pay-method__icon {
width: 40px; height: 40px;
display: grid; place-items: center;
border-radius: 10px;
font-weight: var(--fw-bk); font-size: 14px;
letter-spacing: -0.02em;
}
.ds-pay-method__icon[data-bg="point"] { background: var(--gray-950); color: var(--gray-0); }
.ds-pay-method__icon[data-bg="card"] { background: var(--gray-200); color: var(--gray-800); }
.ds-pay-method__icon[data-bg="kakao"] { background: #FEE500; color: #181600; }
.ds-pay-method__icon[data-bg="naver"] { background: #03C75A; color: #FFFFFF; }
.ds-pay-method__icon[data-bg="toss"] { background: #0064FF; color: #FFFFFF; }
.ds-pay-method__icon[data-bg="payco"] { background: #ED1C24; color: #FFFFFF; }
.ds-pay-method__icon[data-bg="samsung"]{ background: #1428A0; color: #FFFFFF; }
.ds-pay-method__icon .mi { font-size: 18px; color: inherit; }
.ds-pay-method__icon.ds-pay-method__icon--appicon {
background: transparent;
border: 0;
padding: 0;
overflow: hidden;
}
.ds-pay-method__icon--appicon .ds-pay-method__appicon {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: inherit;
}
.ds-pay-method__icon.ds-pay-method__icon--kado {
background: #0a0b0e;
}
.ds-pay-method__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-pay-method__name {
font-size: var(--fs-body-sm); font-weight: var(--fw-bd);
letter-spacing: -0.005em;
color: var(--fg-base);
}
.ds-pay-method__sub {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
}
.ds-pay-method__sub strong {
color: var(--fg-base); font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.ds-pay-method__sub em {
color: var(--danger-600); font-style: normal; font-weight: var(--fw-bk);
}
.ds-pay-method__check {
width: 16px; height: 16px;
border-radius: 50%;
border: 1.5px solid var(--border-strong);
background: var(--bg-card);
transition: var(--t-fast) ease-out;
}
.ds-pay-method__card[aria-checked="true"] .ds-pay-method__check {
border-color: var(--gray-950);
background: var(--gray-950);
box-shadow: inset 0 0 0 3px var(--bg-card);
}
:root[data-theme="dark"] .ds-pay-method__card[aria-checked="true"] .ds-pay-method__check {
border-color: var(--gray-50); background: var(--gray-50);
}
/* === Charge Panel === */
.ds-pay-charge {
background: var(--bg-subtle);
border: 1px solid var(--border-base);
border-radius: 12px;
padding: 18px 20px;
}
.ds-pay-charge[hidden] { display: none; }
.ds-pay-charge__head { margin-bottom: 14px; }
.ds-pay-charge__head .ds-pay-section-title { margin-bottom: 6px; }
.ds-pay-charge__note {
font-size: var(--fs-caption); color: var(--fg-subtle);
line-height: 1.5; margin: 0;
}
.ds-pay-charge__note strong {
color: var(--danger-600); font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums;
}
.ds-pay-charge__presets {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
@media (max-width: 599px) {
.ds-pay-charge__presets { grid-template-columns: repeat(2, 1fr); }
}
.ds-pay-charge__preset {
padding: 12px 8px;
background: var(--bg-card);
border: 1.5px solid var(--border-base);
border-radius: 10px;
font-size: var(--fs-caption); font-weight: var(--fw-bd);
color: var(--fg-base);
cursor: pointer;
font-variant-numeric: tabular-nums;
transition: var(--t-fast) ease-out;
}
.ds-pay-charge__preset:hover { border-color: var(--gray-500); }
.ds-pay-charge__preset[aria-checked="true"] {
border-color: var(--gray-950);
background: var(--gray-950);
color: var(--gray-0);
}
:root[data-theme="dark"] .ds-pay-charge__preset[aria-checked="true"] {
background: var(--gray-50); color: var(--gray-950); border-color: var(--gray-50);
}
/* === Terms === */
.ds-pay-terms { display: flex; flex-direction: column; }
.ds-pay-terms--grading { margin-top: 4px; }
.ds-pay-terms__all {
display: flex; align-items: center; gap: 10px;
padding: 12px 0;
border-bottom: 1px solid var(--border-base);
cursor: pointer;
}
.ds-pay-terms__all-label {
font-size: var(--fs-body-sm); font-weight: var(--fw-bd);
color: var(--fg-base);
}
.ds-pay-terms__list {
list-style: none; padding: 0; margin: 0;
}
.ds-pay-terms__item {
display: flex; align-items: center; gap: 10px;
padding: 10px 0;
cursor: pointer;
}
.ds-pay-terms__item-text {
font-size: var(--fs-caption); color: var(--fg-subtle);
flex: 1;
}
.ds-pay-terms__req { color: var(--danger-600); font-weight: var(--fw-bk); margin-right: 4px; }
.ds-pay-terms__opt { color: var(--fg-muted); font-weight: var(--fw-bk); margin-right: 4px; }
.ds-pay-terms__view {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
text-decoration: underline;
}
.ds-checkbox {
display: inline-flex;
align-items: center;
gap: 8px;
width: fit-content;
color: var(--fg-base);
font-size: var(--fs-body-sm);
font-weight: var(--fw-md);
line-height: 1.4;
cursor: pointer;
}
.ds-checkbox input[type="checkbox"],
.ds-pay-terms input[type="checkbox"],
.ds-pay-terms__all input[type="checkbox"] {
appearance: none; -webkit-appearance: none;
width: 18px; height: 18px;
border: 1.5px solid var(--border-strong);
border-radius: 4px;
background: var(--bg-card);
cursor: pointer;
position: relative;
flex-shrink: 0;
}
.ds-checkbox input[type="checkbox"]:checked,
.ds-pay-terms input[type="checkbox"]:checked,
.ds-pay-terms__all input[type="checkbox"]:checked {
background: var(--gray-950);
border-color: var(--gray-950);
}
.ds-checkbox input[type="checkbox"]:checked::after,
.ds-pay-terms input[type="checkbox"]:checked::after,
.ds-pay-terms__all input[type="checkbox"]:checked::after {
content: '';
position: absolute;
inset: 3px;
background: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.ds-checkbox input[type="checkbox"]:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.ds-checkbox:has(input[type="checkbox"]:disabled) {
cursor: not-allowed;
color: var(--fg-muted);
}
/* === Right Summary (sticky) === */
.ds-pay-summary {
position: sticky; top: calc(var(--gnb-h) + env(safe-area-inset-top, 0px) + 24px);
align-self: start;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 16px;
padding: 22px;
display: flex; flex-direction: column; gap: 16px;
box-shadow: var(--shadow-2);
}
@media (max-width: 1023px) { .ds-pay-summary { position: static; } }
.ds-pay-summary__head {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
font-weight: var(--fw-md); letter-spacing: 0.05em;
text-transform: uppercase;
margin: 0;
}
.ds-pay-summary__breakdown {
display: flex; flex-direction: column; gap: 6px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border-subtle);
}
.ds-pay-summary__row {
display: flex; justify-content: space-between;
font-size: var(--fs-body-sm);
}
.ds-pay-summary__row span:first-child { color: var(--fg-muted); font-weight: var(--fw-md); }
.ds-pay-summary__row span:last-child {
color: var(--fg-base); font-weight: var(--fw-bd);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.ds-pay-summary__total {
display: flex; justify-content: space-between; align-items: baseline;
}
.ds-pay-summary__total-label {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
font-weight: var(--fw-md); letter-spacing: 0.05em;
text-transform: uppercase;
}
.ds-pay-summary__total-amount {
font-size: 30px; font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
letter-spacing: -0.022em; line-height: 1;
color: var(--fg-base);
}
.ds-pay-summary__total-amount small {
font-size: var(--fs-body-sm); color: var(--fg-muted);
font-weight: var(--fw-md); margin-left: 2px;
}
/* v0.7: 페이지 레벨 결제 통화 picker (sticky summary) — 콤팩트 row */
.ds-pay-summary .ds-charge-currency {
margin: 12px 0 6px;
}
.ds-pay-summary__currency-eq {
font-size: var(--fs-caption-md);
color: var(--fg-subtle);
margin: 0 0 14px;
font-variant-numeric: tabular-nums;
}
.ds-pay-summary__currency-eq strong {
font-weight: var(--fw-bd);
color: var(--fg-base);
}
.ds-pay-summary__cta {
width: 100%;
height: 52px !important;
font-size: var(--fs-body-md) !important;
font-weight: var(--fw-bk) !important;
letter-spacing: -0.005em;
}
.ds-pay-summary__cta:disabled { opacity: 0.4; cursor: not-allowed; }
.ds-pay-summary__notes {
display: flex; flex-direction: column; gap: 6px;
padding-top: 10px;
border-top: 1px solid var(--border-subtle);
}
.ds-pay-summary__notes p {
display: flex; align-items: center; gap: 6px;
font-size: var(--fs-caption-sm); color: var(--fg-muted);
margin: 0;
}
.ds-pay-summary__notes .mi {
font-size: 14px;
color: var(--fg-faint);
}
/* ==========================================================
=== GACHA-OPEN === (Chunk 2 · Round 1-3 · gacha-open.html)
드라마 모먼트 페이지 — 5s 시퀀스 (anticipation → reveal)
롤백: 이 섹션 + gacha-open.html 삭제
========================================================== */
/* Body — full viewport, no scroll */
.ds-open-body {
margin: 0; padding: 0;
overflow: hidden;
background: var(--gray-950);
font-family: var(--font-sans);
color: var(--gray-0);
}
/* Stage */
.ds-open-stage {
position: fixed; inset: 0;
background: radial-gradient(ellipse at center, #1a1d22 0%, #0a0b0e 70%);
display: grid;
place-items: center;
overflow: hidden;
isolation: isolate;
}
/* === Aura — 배경 burst (카드 reveal 시점) — 흰 빛 전용 (Mystic 네온 제거) === */
.ds-open-aura {
position: absolute; inset: 0;
background:
radial-gradient(circle at center, rgba(255,255,255,0.18) 0%, transparent 50%),
radial-gradient(circle at 30% 30%, rgba(255,255,255,0.10) 0%, transparent 30%),
radial-gradient(circle at 70% 70%, rgba(255,255,255,0.08) 0%, transparent 35%);
opacity: 0;
transform: scale(0.6);
filter: blur(40px);
animation: ds-open-aura 2s ease-out 2.4s forwards;
}
@keyframes ds-open-aura {
0% { opacity: 0; transform: scale(0.6); }
20% { opacity: 0.5; transform: scale(1.2); }
60% { opacity: 0.25; transform: scale(1.6); }
100% { opacity: 0.15; transform: scale(1.8); }
}
/* === Pack — 등장 → 흔들림 → 사라짐 === */
.ds-open-pack {
position: relative;
z-index: 2;
width: 220px; height: 304px;
border-radius: 16px;
background:
linear-gradient(135deg, var(--gray-800) 0%, var(--gray-900) 100%);
border: 1px solid var(--white-a200);
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px;
box-shadow:
0 0 0 1px rgba(255,255,255,0.04),
inset 0 1px 0 rgba(255,255,255,0.08),
0 24px 60px rgba(0,0,0,0.6);
opacity: 0;
transform: scale(0.5) translateY(40px);
animation:
ds-open-pack-in 0.7s var(--ease-emp) 0.1s forwards,
ds-open-pack-shake 0.6s ease-in-out 1.0s 1,
ds-open-pack-out 0.5s ease-in 2.2s forwards;
}
@keyframes ds-open-pack-in {
0% { opacity: 0; transform: scale(0.5) translateY(40px); }
60% { opacity: 1; transform: scale(1.06) translateY(-6px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes ds-open-pack-shake {
0%, 100% { transform: scale(1) rotate(0); }
20% { transform: scale(1.02) rotate(-2deg); }
40% { transform: scale(1.02) rotate(2deg); }
60% { transform: scale(1.04) rotate(-1.5deg); }
80% { transform: scale(1.04) rotate(1.5deg); }
}
@keyframes ds-open-pack-out {
0% { opacity: 1; transform: scale(1); filter: blur(0); }
60% { opacity: 0.4; transform: scale(1.4); filter: blur(8px); }
100% { opacity: 0; transform: scale(2); filter: blur(20px); }
}
.ds-open-pack__limited {
font-size: 10px; font-weight: var(--fw-bk);
letter-spacing: 0.08em;
color: var(--gray-950);
padding: 4px 10px;
border-radius: var(--r-pill);
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.3);
}
.ds-open-pack__name {
font-size: var(--fs-body-md); font-weight: var(--fw-bk);
color: var(--gray-50);
letter-spacing: -0.012em;
}
.ds-open-pack__sub {
font-size: 10px; font-weight: var(--fw-md);
color: var(--gray-500);
letter-spacing: 0.16em;
}
/* === Burst — 팩 사라질 때 빛 (흰 빛, mystic 제거) === */
.ds-open-burst {
position: absolute;
width: 4px; height: 4px;
border-radius: 50%;
background: rgba(255,255,255,0.95);
opacity: 0;
box-shadow:
0 0 60px 30px rgba(255,255,255,0.6),
0 0 120px 60px rgba(255,255,255,0.3);
animation: ds-open-burst 0.8s ease-out 2.3s forwards;
}
@keyframes ds-open-burst {
0% { opacity: 0; transform: scale(0.2); }
30% { opacity: 1; transform: scale(1.5); }
100% { opacity: 0; transform: scale(3); }
}
/* === Cards container (1~10 qty grid) === */
.ds-open-cards {
position: relative;
display: grid;
gap: 14px;
place-items: center;
z-index: 3;
max-width: min(1100px, calc(100vw - 64px));
}
/* qty=1 (single, full size) */
.ds-open-cards[data-qty="1"] {
--card-w: 280px; --card-h: 392px;
grid-template-columns: var(--card-w);
}
/* qty=2~4: 가운데 정렬 가로 1줄 */
.ds-open-cards[data-qty="2"] {
--card-w: 220px; --card-h: 308px;
grid-template-columns: repeat(2, var(--card-w));
}
.ds-open-cards[data-qty="3"] {
--card-w: 200px; --card-h: 280px;
grid-template-columns: repeat(3, var(--card-w));
}
.ds-open-cards[data-qty="4"] {
--card-w: 180px; --card-h: 252px;
grid-template-columns: repeat(4, var(--card-w));
}
/* qty=5~6: 5열 (or 3+3) */
.ds-open-cards[data-qty="5"] {
--card-w: 150px; --card-h: 210px;
grid-template-columns: repeat(5, var(--card-w));
}
.ds-open-cards[data-qty="6"] {
--card-w: 150px; --card-h: 210px;
grid-template-columns: repeat(3, var(--card-w));
}
/* qty=7~8: 4 + 3·4 */
.ds-open-cards[data-qty="7"] {
--card-w: 140px; --card-h: 196px;
grid-template-columns: repeat(4, var(--card-w));
}
.ds-open-cards[data-qty="8"] {
--card-w: 140px; --card-h: 196px;
grid-template-columns: repeat(4, var(--card-w));
}
/* qty=9~10: 5x2 */
.ds-open-cards[data-qty="9"],
.ds-open-cards[data-qty="10"] {
--card-w: 130px; --card-h: 182px;
grid-template-columns: repeat(5, var(--card-w));
}
@media (max-width: 767px) {
.ds-open-cards { gap: 10px; max-width: calc(100vw - 24px); }
.ds-open-cards[data-qty="1"] { --card-w: 240px; --card-h: 336px; }
.ds-open-cards[data-qty="2"],
.ds-open-cards[data-qty="3"],
.ds-open-cards[data-qty="4"] {
--card-w: 130px; --card-h: 182px;
grid-template-columns: repeat(2, var(--card-w));
}
.ds-open-cards[data-qty="5"],
.ds-open-cards[data-qty="6"],
.ds-open-cards[data-qty="7"],
.ds-open-cards[data-qty="8"],
.ds-open-cards[data-qty="9"],
.ds-open-cards[data-qty="10"] {
--card-w: 100px; --card-h: 140px;
grid-template-columns: repeat(3, var(--card-w));
}
}
/* === Card — reveal (재세팅: 카드 = 이미지, caption 외부) === */
.ds-open-card {
position: relative;
width: var(--card-w, 280px);
display: flex; flex-direction: column;
align-items: center;
gap: 14px;
margin: 0; padding: 0;
background: transparent;
border: 0;
opacity: 0;
transform: translateY(40px) scale(0.92);
animation: ds-open-card-emerge 0.7s var(--ease-emp) calc(2.6s + var(--card-i, 0) * 0.10s) forwards;
}
@keyframes ds-open-card-emerge {
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* media — 카드 이미지 자체 (5:7 비율) — glow 없음, drop shadow만 */
.ds-open-card__media {
width: 100%;
aspect-ratio: 5 / 7;
margin: 0;
border-radius: 10px;
overflow: hidden;
background: var(--gray-900);
box-shadow:
0 0 0 1px rgba(255,255,255,0.06),
0 18px 40px rgba(0,0,0,0.6);
transition: transform var(--t-base) ease-out;
}
.ds-open-card__media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
/* caption — 카드 아래 메타 (chip + 이름 + 가격) */
.ds-open-card__caption {
display: flex; flex-direction: column;
align-items: center; gap: 4px;
text-align: center;
width: 100%;
padding: 0 4px;
}
.ds-open-card__grade-chip {
display: inline-flex; align-items: center;
height: 18px; padding: 0 8px;
border-radius: var(--r-pill);
font-size: 9px; font-weight: var(--fw-bk);
letter-spacing: 0.10em;
background: rgba(255,255,255,0.18);
color: #C8FFD7;
}
.ds-open-card__grade-chip[data-kado-grade="legend"] { background: rgba(255,200,100,0.18); color: #FFE6B5; }
.ds-open-card__grade-chip[data-kado-grade="epic"] { background: rgba(155,120,255,0.20); color: #DDC9FF; }
.ds-open-card__grade-chip[data-kado-grade="rare"] { background: rgba(232,90,71,0.18); color: #FFC8BD; }
.ds-open-card__grade-chip[data-kado-grade="common"] { background: rgba(180,185,195,0.14); color: var(--gray-200); }
.ds-open-card__caption .ds-open-card__name {
font-size: var(--fs-caption); font-weight: var(--fw-bk);
color: var(--gray-0);
letter-spacing: -0.005em;
line-height: 1.2;
}
.ds-open-card__price {
font-size: var(--fs-caption-sm);
color: var(--gray-400);
font-variant-numeric: tabular-nums;
font-weight: var(--fw-md);
}
/* qty 작은 카드일 때 caption 사이즈 자동 축소 */
.ds-open-cards[data-qty="5"] .ds-open-card__caption,
.ds-open-cards[data-qty="6"] .ds-open-card__caption,
.ds-open-cards[data-qty="7"] .ds-open-card__caption,
.ds-open-cards[data-qty="8"] .ds-open-card__caption,
.ds-open-cards[data-qty="9"] .ds-open-card__caption,
.ds-open-cards[data-qty="10"] .ds-open-card__caption { gap: 2px; }
.ds-open-cards[data-qty="5"] .ds-open-card__grade-chip,
.ds-open-cards[data-qty="6"] .ds-open-card__grade-chip,
.ds-open-cards[data-qty="7"] .ds-open-card__grade-chip,
.ds-open-cards[data-qty="8"] .ds-open-card__grade-chip,
.ds-open-cards[data-qty="9"] .ds-open-card__grade-chip,
.ds-open-cards[data-qty="10"] .ds-open-card__grade-chip { font-size: 8px; height: 16px; padding: 0 6px; }
.ds-open-cards[data-qty="5"] .ds-open-card__caption .ds-open-card__name,
.ds-open-cards[data-qty="6"] .ds-open-card__caption .ds-open-card__name,
.ds-open-cards[data-qty="7"] .ds-open-card__caption .ds-open-card__name,
.ds-open-cards[data-qty="8"] .ds-open-card__caption .ds-open-card__name,
.ds-open-cards[data-qty="9"] .ds-open-card__caption .ds-open-card__name,
.ds-open-cards[data-qty="10"] .ds-open-card__caption .ds-open-card__name { font-size: 10px; }
.ds-open-cards[data-qty="5"] .ds-open-card__price,
.ds-open-cards[data-qty="6"] .ds-open-card__price,
.ds-open-cards[data-qty="7"] .ds-open-card__price,
.ds-open-cards[data-qty="8"] .ds-open-card__price,
.ds-open-cards[data-qty="9"] .ds-open-card__price,
.ds-open-cards[data-qty="10"] .ds-open-card__price { font-size: 9px; }
/* === Grade-별 카드 색상 (border + glow) — inset highlight 항상 유지 === */
.ds-open-card[data-kado-grade="mystic"] {
border-color: rgba(255,255,255,0.5);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
inset 0 -1px 0 rgba(0,0,0,0.4),
0 0 0 1px rgba(255,255,255,0.3),
0 0 50px rgba(255,255,255,0.32),
0 24px 60px rgba(0,0,0,0.7);
}
.ds-open-card[data-kado-grade="legend"] {
border-color: rgba(255,200,100,0.55);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
inset 0 -1px 0 rgba(0,0,0,0.4),
0 0 0 1px rgba(255,200,100,0.32),
0 0 50px rgba(255,200,100,0.30),
0 24px 60px rgba(0,0,0,0.7);
}
.ds-open-card[data-kado-grade="epic"] {
border-color: rgba(155,120,255,0.55);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
inset 0 -1px 0 rgba(0,0,0,0.4),
0 0 0 1px rgba(155,120,255,0.3),
0 0 50px rgba(155,120,255,0.28),
0 24px 60px rgba(0,0,0,0.7);
}
.ds-open-card[data-kado-grade="rare"] {
border-color: rgba(232,90,71,0.5);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
inset 0 -1px 0 rgba(0,0,0,0.4),
0 0 0 1px rgba(232,90,71,0.22),
0 0 36px rgba(232,90,71,0.22),
0 24px 60px rgba(0,0,0,0.7);
}
.ds-open-card[data-kado-grade="common"] {
border-color: rgba(180,185,195,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
inset 0 -1px 0 rgba(0,0,0,0.35),
0 0 0 1px rgba(180,185,195,0.16),
0 0 26px rgba(180,185,195,0.16),
0 24px 60px rgba(0,0,0,0.7);
}
/* === 카드 내부 사이즈 변형 (qty별 padding/font 비례) === */
.ds-open-cards[data-qty="1"] .ds-open-card,
.ds-open-cards[data-qty="2"] .ds-open-card { padding: 14px; gap: 10px; }
.ds-open-cards[data-qty="3"] .ds-open-card,
.ds-open-cards[data-qty="4"] .ds-open-card { padding: 12px; gap: 8px; }
.ds-open-cards[data-qty="5"] .ds-open-card,
.ds-open-cards[data-qty="6"] .ds-open-card,
.ds-open-cards[data-qty="7"] .ds-open-card,
.ds-open-cards[data-qty="8"] .ds-open-card,
.ds-open-cards[data-qty="9"] .ds-open-card,
.ds-open-cards[data-qty="10"] .ds-open-card { padding: 8px; gap: 4px; border-radius: 8px; }
/* === Card __value (시세) === */
.ds-open-card__value {
margin: 0;
font-size: var(--fs-caption);
font-weight: var(--fw-bk);
color: var(--gray-100);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.ds-open-cards[data-qty="5"] .ds-open-card__value,
.ds-open-cards[data-qty="6"] .ds-open-card__value,
.ds-open-cards[data-qty="7"] .ds-open-card__value,
.ds-open-cards[data-qty="8"] .ds-open-card__value,
.ds-open-cards[data-qty="9"] .ds-open-card__value,
.ds-open-cards[data-qty="10"] .ds-open-card__value { font-size: 10px; }
/* qty 작은 카드일 때 name/set 사이즈 줄임 */
.ds-open-cards[data-qty="5"] .ds-open-card__name,
.ds-open-cards[data-qty="6"] .ds-open-card__name,
.ds-open-cards[data-qty="7"] .ds-open-card__name,
.ds-open-cards[data-qty="8"] .ds-open-card__name,
.ds-open-cards[data-qty="9"] .ds-open-card__name,
.ds-open-cards[data-qty="10"] .ds-open-card__name { font-size: 11px; }
.ds-open-cards[data-qty="5"] .ds-open-card__set,
.ds-open-cards[data-qty="6"] .ds-open-card__set,
.ds-open-cards[data-qty="7"] .ds-open-card__set,
.ds-open-cards[data-qty="8"] .ds-open-card__set,
.ds-open-cards[data-qty="9"] .ds-open-card__set,
.ds-open-cards[data-qty="10"] .ds-open-card__set { font-size: 9px; }
.ds-open-cards[data-qty="5"] .ds-open-card__grade-label,
.ds-open-cards[data-qty="6"] .ds-open-card__grade-label,
.ds-open-cards[data-qty="7"] .ds-open-card__grade-label,
.ds-open-cards[data-qty="8"] .ds-open-card__grade-label,
.ds-open-cards[data-qty="9"] .ds-open-card__grade-label,
.ds-open-cards[data-qty="10"] .ds-open-card__grade-label { font-size: 8px; padding: 2px 5px; }
/* Card grade label — top */
.ds-open-card__grade-label {
display: inline-flex; align-items: center; justify-content: center;
height: 22px;
font-size: 10px; font-weight: var(--fw-bk);
letter-spacing: 0.08em;
color: var(--gray-0);
background: var(--gray-950);
border-radius: var(--r-pill);
padding: 0 12px;
align-self: flex-start;
}
/* Card art (placeholder) */
.ds-open-card__art {
flex: 1;
/* Solid block — 등급 색은 [data-kado-grade] 룰에서 정의 */
background: var(--gray-800);
border-radius: 8px;
position: relative;
overflow: hidden;
/* 입체감: 상단 1px highlight, 하단 1px shadow */
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
inset 0 -1px 0 rgba(0,0,0,0.5);
display: grid; place-items: center;
}
/* art 안 카드 이미지 — 모든 카드 동일 mock (espeon-vmax-front) */
.ds-open-card__art img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
position: relative;
z-index: 1;
}
/* Card info */
.ds-open-card__info {
display: flex; flex-direction: column; gap: 2px;
padding-top: 4px;
}
.ds-open-card__name {
margin: 0;
font-size: var(--fs-body-md); font-weight: var(--fw-bk);
color: var(--gray-0);
letter-spacing: -0.012em;
}
.ds-open-card__name-sub {
font-size: var(--fs-caption); color: var(--gray-950);
font-weight: var(--fw-bd);
margin-left: 6px;
letter-spacing: 0;
}
.ds-open-card__set {
margin: 0;
font-size: var(--fs-caption-sm); color: var(--gray-400);
letter-spacing: 0.02em;
}
/* === Grade-별 art solid 색 (그라데이션 X — 솔리드 입체) === */
.ds-open-card[data-kado-grade="mystic"] .ds-open-card__art { background: #1a3d28; }
.ds-open-card[data-kado-grade="legend"] .ds-open-card__art { background: #3d2f14; }
.ds-open-card[data-kado-grade="epic"] .ds-open-card__art { background: #2a1f4a; }
.ds-open-card[data-kado-grade="rare"] .ds-open-card__art { background: #3a1f1c; }
.ds-open-card[data-kado-grade="common"] .ds-open-card__art { background: var(--gray-800); }
.ds-open-card[data-kado-grade="legend"] .ds-open-card__name-sub { color: rgb(255, 215, 130); }
.ds-open-card[data-kado-grade="epic"] .ds-open-card__name-sub { color: rgb(180, 145, 255); }
.ds-open-card[data-kado-grade="rare"] .ds-open-card__name-sub { color: rgb(255, 130, 110); }
.ds-open-card[data-kado-grade="common"] .ds-open-card__name-sub { color: var(--gray-400); }
/* Grade-별 grade-label 색 (배지 색) */
.ds-open-card[data-kado-grade="legend"] .ds-open-card__grade-label { color: rgb(255, 215, 130); border-color: rgba(255,215,130,0.3); background: rgba(255,215,130,0.08); }
.ds-open-card[data-kado-grade="epic"] .ds-open-card__grade-label { color: rgb(180, 145, 255); border-color: rgba(180,145,255,0.3); background: rgba(180,145,255,0.08); }
.ds-open-card[data-kado-grade="rare"] .ds-open-card__grade-label { color: rgb(255, 130, 110); border-color: rgba(255,130,110,0.3); background: rgba(255,130,110,0.08); }
.ds-open-card[data-kado-grade="common"] .ds-open-card__grade-label { color: var(--gray-300); border-color: rgba(180,185,195,0.25); background: rgba(180,185,195,0.06); }
/* === Aura — 등급별 색 모두 제거 (흰빛 단일 통일) ===
사용자 결정: Mystic 네온/등급 색 aura 사용 안 함. 등급 차별은 카드 chip 색으로만.
default .ds-open-aura(흰빛 radial)이 모든 grade에 동일 적용. */
/* === Qty toggle (showcase prototype용 우하단) === */
.ds-open-qty {
position: fixed;
bottom: 24px; left: 24px;
z-index: 11;
display: inline-flex; align-items: center; gap: 4px;
padding: 6px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--r-pill);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
font-size: 11px;
}
.ds-open-qty__label {
font-size: 10px;
color: rgba(255,255,255,0.5);
font-weight: var(--fw-bd);
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0 6px 0 8px;
}
.ds-open-qty a {
width: 26px; height: 26px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
color: var(--gray-300);
font-weight: var(--fw-bd);
font-variant-numeric: tabular-nums;
text-decoration: none;
transition: var(--t-fast) ease-out;
}
.ds-open-qty a:hover { color: var(--gray-0); background: rgba(255,255,255,0.08); }
.ds-open-qty a.is-active { background: var(--gray-0); color: var(--gray-950); }
@media (max-width: 599px) {
.ds-open-qty { left: 8px; bottom: 16px; padding: 4px; }
.ds-open-qty a { width: 22px; height: 22px; font-size: 10px; }
}
/* === 시세 callout — card 등장 후 fade-in === */
.ds-open-value {
position: absolute;
bottom: 220px;
left: 50%;
transform: translateX(-50%) translateY(20px);
display: flex; flex-direction: column; align-items: center; gap: 4px;
opacity: 0;
animation: ds-open-value-in 0.6s var(--ease-emp) 3.6s forwards;
z-index: 4;
}
@keyframes ds-open-value-in {
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.ds-open-value__label {
font-size: var(--fs-caption-sm); color: var(--gray-500);
font-weight: var(--fw-md); letter-spacing: 0.08em;
text-transform: uppercase;
}
.ds-open-value__amount {
font-size: 22px; font-weight: var(--fw-bk);
color: var(--gray-0);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
letter-spacing: -0.014em;
}
.ds-open-value__range {
font-size: var(--fs-body-sm); color: var(--gray-500);
font-weight: var(--fw-md);
}
/* === CTA — 시퀀스 끝 === */
.ds-open-cta {
position: fixed;
bottom: 56px;
left: 50%;
transform: translateX(-50%) translateY(20px);
display: flex; flex-direction: column; align-items: center; gap: 14px;
opacity: 0;
animation: ds-open-cta-in 0.5s var(--ease-emp) 4.4s forwards;
z-index: 5;
}
@keyframes ds-open-cta-in {
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.ds-open-cta__hint {
font-size: var(--fs-caption); color: var(--gray-500);
margin: 0;
letter-spacing: 0.02em;
}
.ds-open-cta__btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 28px;
height: 52px;
background: var(--gray-0);
color: var(--gray-950);
border-radius: var(--r-pill);
font-size: var(--fs-body-md); font-weight: var(--fw-bk);
letter-spacing: -0.005em;
text-decoration: none;
transition: var(--t-fast) ease-out;
}
.ds-open-cta__btn:hover {
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(255,255,255,0.2);
}
.ds-open-cta__btn .mi { font-size: 18px; }
/* === Skip (top right) === */
.ds-open-skip {
position: fixed;
top: 24px; right: 24px;
display: inline-flex; align-items: center; gap: 4px;
padding: 8px 14px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--r-pill);
color: var(--gray-300);
font-size: var(--fs-caption); font-weight: var(--fw-md);
cursor: pointer;
z-index: 10;
transition: var(--t-fast) ease-out;
}
.ds-open-skip:hover {
background: rgba(255,255,255,0.12);
color: var(--gray-0);
}
.ds-open-skip .mi { font-size: 14px; }
/* === Logo (top left, 미니멀) === */
.ds-open-logo {
position: fixed;
top: 28px; left: 24px;
width: 64px;
color: var(--gray-300);
z-index: 10;
}
.ds-open-logo:hover { color: var(--gray-0); }
.ds-open-logo svg { width: 100%; height: auto; }
/* Mobile adjustments */
@media (max-width: 599px) {
.ds-open-pack { width: 180px; height: 252px; }
.ds-open-card { width: 240px; height: 336px; }
.ds-open-value { bottom: 180px; }
.ds-open-cta { bottom: 32px; }
}
/* ==========================================================
=== GACHA-RESULT === (Chunk 3 · Round 1-4 · gacha-result.html)
롤백: 이 섹션 + gacha-result.html 삭제
========================================================== */
/* === Result Hero === */
.ds-result-hero {
display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
padding: 32px 0 24px;
}
.ds-result-hero__eyebrow {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
font-weight: var(--fw-md); letter-spacing: 0.05em;
text-transform: uppercase;
margin: 0;
}
.ds-result-hero__title {
font-size: 32px; font-weight: var(--fw-bk);
letter-spacing: -0.022em; line-height: 1.15;
margin: 0;
color: var(--fg-base);
}
.ds-result-hero__title strong {
color: var(--gray-600);
font-weight: var(--fw-bk);
}
.ds-result-hero__value {
display: flex; align-items: baseline; gap: 10px;
margin-top: 6px;
}
.ds-result-hero__value-label {
font-size: var(--fs-caption); color: var(--fg-muted);
font-weight: var(--fw-md); letter-spacing: 0.04em;
text-transform: uppercase;
}
.ds-result-hero__value-amount {
font-size: var(--fs-body-md); font-weight: var(--fw-bk);
color: var(--fg-base);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
letter-spacing: -0.008em;
}
.ds-result-hero__value-range {
color: var(--fg-muted); font-weight: var(--fw-md);
}
/* === Card Showcase (L1 climax) === */
/* ==========================================================
=== GACHA RESULT MODAL === 가챠 결과를 모달 layout으로 (페이지 자체가 dim + centered modal)
========================================================== */
.ds-result-overlay {
position: fixed;
inset: 0; /* full viewport 덮음 — footer/main 내용 안 보이게 */
z-index: 200;
background: rgba(15, 17, 22, 0.55);
backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
padding: 24px;
overflow-y: auto; /* 모달이 viewport보다 길면 스크롤 */
}
.ds-result-modal {
max-width: 480px;
width: 100%;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 16px;
padding: 22px;
display: flex; flex-direction: column;
gap: 16px;
box-shadow: 0 24px 64px rgba(15,17,22,0.32);
}
.ds-result-modal__head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
}
.ds-result-modal__title {
font-size: 18px; font-weight: var(--fw-bk);
letter-spacing: -0.012em;
margin: 0;
color: var(--fg-base);
}
.ds-result-modal__close {
width: 32px; height: 32px;
display: grid; place-items: center;
border-radius: 50%;
color: var(--fg-muted);
transition: var(--t-fast) ease-out;
}
.ds-result-modal__close:hover { background: var(--bg-subtle); color: var(--fg-base); }
.ds-result-modal__close .mi { font-size: 20px; }
/* 카드 hero — 5:7 비율, centered */
.ds-result-modal__card {
display: flex; justify-content: center;
padding: 4px 0;
}
.ds-result-modal__card .ds-result-card__art {
width: 220px;
margin: 0;
}
/* Meta stack (compact) */
.ds-result-modal__meta {
display: flex; flex-direction: column; gap: 6px;
text-align: center;
}
.ds-result-modal__name {
font-size: 22px; font-weight: var(--fw-bk);
letter-spacing: -0.018em;
margin: 0;
color: var(--fg-base);
line-height: 1.15;
display: inline-flex; align-items: center; gap: 8px;
justify-content: center;
flex-wrap: wrap;
}
.ds-result-modal__grade {
display: inline-flex; align-items: center;
height: 22px; padding: 0 10px;
border-radius: var(--r-pill);
background: var(--gray-950); color: var(--gray-0);
font-size: 11px; font-weight: var(--fw-bk);
letter-spacing: 0.04em;
}
:root[data-theme="dark"] .ds-result-modal__grade { background: var(--gray-50); color: var(--gray-950); }
.ds-result-modal__set {
font-size: var(--fs-caption);
color: var(--fg-muted);
margin: 0;
}
.ds-result-modal__price {
margin: 4px 0 0;
display: flex; align-items: baseline; justify-content: center;
gap: 8px; flex-wrap: wrap;
}
.ds-result-modal__price strong {
font-size: 16px; font-weight: var(--fw-bk);
color: var(--fg-base);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.ds-result-modal__trend {
font-size: var(--fs-caption);
font-weight: var(--fw-bd);
font-variant-numeric: tabular-nums;
color: var(--fg-muted);
}
.ds-result-modal__trend--up { color: var(--success-700); }
/* 처분 옵션 — compact 3 chip row */
.ds-result-modal__actions {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding-top: 4px;
border-top: 1px solid var(--border-subtle);
}
.ds-result-chip {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4px;
padding: 14px 8px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 10px;
font-size: var(--fs-caption);
font-weight: var(--fw-bd);
color: var(--fg-base);
cursor: pointer;
transition: var(--t-fast) ease-out;
}
.ds-result-chip:hover { border-color: var(--gray-700); transform: translateY(-1px); }
.ds-result-chip .mi { font-size: 22px; color: var(--fg-base); }
/* Footer CTA — 두 버튼 동일 사이즈 보장 */
.ds-result-modal__footer {
display: flex; gap: 8px;
padding-top: 4px;
}
.ds-result-modal__footer .ds-btn {
flex: 1 1 0;
min-height: 44px;
display: inline-flex; align-items: center; justify-content: center;
}
.ds-result-modal__footer .ds-btn .mi { font-size: 16px; margin-right: 4px; }
/* Result card — vertical centered hero (카드가 진짜 주인공) */
.ds-result-card {
display: flex; flex-direction: column; align-items: center;
gap: 24px;
padding: 32px 24px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 16px;
box-shadow: var(--shadow-2);
margin-bottom: 32px;
text-align: center;
}
.ds-result-card__art {
position: relative;
aspect-ratio: 5 / 7;
width: 280px; /* 큰 hero 카드 사이즈 */
background: linear-gradient(180deg, #1f2226 0%, #0e1014 100%);
border-radius: 12px;
border: 1.5px solid rgba(255,255,255,0.4);
box-shadow:
0 0 0 1px rgba(255,255,255,0.2),
0 0 40px rgba(255,255,255,0.25),
0 16px 40px rgba(15,17,22,0.4);
padding: 12px;
display: flex; flex-direction: column; gap: 10px;
overflow: hidden;
flex-shrink: 0;
}
.ds-result-card__grade-label {
display: inline-flex; align-items: center; justify-content: center;
height: 22px;
font-size: 10px; font-weight: var(--fw-bk);
letter-spacing: 0.08em;
color: var(--gray-0);
background: var(--gray-950);
border-radius: var(--r-pill);
padding: 0 12px;
align-self: flex-start;
z-index: 1;
}
.ds-result-card__grade-label[data-kado-grade="legend"] { background: var(--legendary-500); color: var(--legendary-900); }
.ds-result-card__grade-label[data-kado-grade="epic"] { background: var(--epic-500); color: white; }
.ds-result-card__grade-label[data-kado-grade="rare"] { background: var(--rare-500); color: white; }
.ds-result-card__grade-label[data-kado-grade="common"] { background: var(--common-500); color: white; }
.ds-result-card__art-inner {
flex: 1;
background:
url('/kado-design/assets/cards/espeon-vmax-front.jpeg') center/cover no-repeat,
var(--gray-800);
border-radius: 8px;
border: 1px solid var(--white-a200);
position: relative;
}
.ds-result-card__sparkle {
position: absolute; inset: 0;
background:
radial-gradient(circle at 22% 28%, white 0%, transparent 1.5%),
radial-gradient(circle at 78% 72%, white 0%, transparent 1%),
radial-gradient(circle at 60% 22%, white 0%, transparent 1.2%),
radial-gradient(circle at 30% 78%, white 0%, transparent 1%);
opacity: 0.5;
}
/* Card info — 카드 아래 centered stack */
.ds-result-card__info {
display: flex; flex-direction: column; gap: 14px;
align-items: center;
width: 100%;
max-width: 480px; /* info 영역 너무 넓어지지 않게 */
padding-top: 4px;
}
.ds-result-card__name-row {
display: flex; align-items: center; gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
.ds-result-card__name {
font-size: 30px; font-weight: var(--fw-bk);
letter-spacing: -0.02em; line-height: 1.15;
margin: 0;
color: var(--fg-base);
}
.ds-result-card__grade {
display: inline-flex; align-items: center;
height: 24px; padding: 0 10px;
border-radius: var(--r-pill);
background: var(--gray-950);
color: var(--gray-0);
font-size: var(--fs-caption-sm); font-weight: var(--fw-bk);
letter-spacing: 0.04em;
}
:root[data-theme="dark"] .ds-result-card__grade { background: var(--gray-50); color: var(--gray-950); }
.ds-result-card__set {
margin: 0;
font-size: var(--fs-body-sm); color: var(--fg-muted);
line-height: 1.5;
}
.ds-result-card__stats {
display: flex; flex-direction: column;
margin-top: 8px;
border-top: 1px solid var(--border-base);
width: 100%; /* centered hero info의 stats는 full width row */
text-align: left;
}
.ds-result-card__stat {
display: flex; justify-content: space-between; align-items: baseline;
padding: 12px 0;
border-bottom: 1px solid var(--border-subtle);
}
.ds-result-card__stat:last-child { border-bottom: none; }
.ds-result-card__stat-label {
font-size: var(--fs-caption); color: var(--fg-muted);
font-weight: var(--fw-md); letter-spacing: 0.02em;
}
.ds-result-card__stat-value {
font-size: var(--fs-body-sm); font-weight: var(--fw-bd);
color: var(--fg-base);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
text-align: right;
}
.ds-result-card__stat-value small {
color: var(--fg-muted); font-weight: var(--fw-md);
font-size: var(--fs-caption-sm); margin-left: 4px;
}
.ds-result-card__stat-value--up { color: var(--success-700); }
/* === 처분 옵션 (L2 primary) === */
.ds-result-actions {
margin-bottom: 32px;
}
.ds-result-actions__head { margin-bottom: 16px; }
.ds-result-actions__title {
font-size: var(--fs-h3); font-weight: var(--fw-bk);
letter-spacing: -0.014em;
margin: 0;
}
.ds-result-actions__sub {
font-size: var(--fs-caption); color: var(--fg-muted);
margin: 4px 0 0;
}
.ds-result-actions__grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 4 → 3 (등급 대행 옵션 제거 — 가챠 카드는 이미 grading됨) */
gap: 12px;
}
@media (max-width: 1023px) { .ds-result-actions__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 599px) { .ds-result-actions__grid { grid-template-columns: 1fr; } }
.ds-result-action {
display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
padding: 18px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 12px;
cursor: pointer;
text-align: left;
transition: var(--t-fast) ease-out;
}
.ds-result-action:hover {
border-color: var(--gray-950);
transform: translateY(-2px);
box-shadow: var(--shadow-3);
}
:root[data-theme="dark"] .ds-result-action:hover { border-color: var(--gray-50); }
.ds-result-action__icon {
width: 40px; height: 40px;
display: grid; place-items: center;
border-radius: 10px;
margin-bottom: 4px;
}
.ds-result-action__icon[data-bg="keep"] { background: var(--gray-100); color: var(--gray-800); }
.ds-result-action__icon[data-bg="sell"] { background: var(--gray-50); color: var(--gray-400); }
.ds-result-action__icon[data-bg="grading"] { background: rgba(245,197,24,0.12); color: var(--legendary-700); }
.ds-result-action__icon[data-bg="ship"] { background: rgba(59,130,246,0.1); color: var(--common-500); }
.ds-result-action__icon .mi { font-size: 20px; color: inherit; }
.ds-result-action__label {
font-size: var(--fs-body-md); font-weight: var(--fw-bk);
color: var(--fg-base);
letter-spacing: -0.008em;
}
.ds-result-action__sub {
font-size: var(--fs-caption); color: var(--fg-subtle);
line-height: 1.5;
}
.ds-result-action__hint {
font-size: var(--fs-caption-sm); color: var(--gray-600);
font-weight: var(--fw-bd);
margin-top: auto;
padding-top: 8px;
}
/* === Bottom Footer Action === */
.ds-result-footer {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 12px;
padding: 24px 0;
border-top: 1px solid var(--border-base);
margin-top: 8px;
}
@media (max-width: 599px) { .ds-result-footer { grid-template-columns: 1fr; } }
.ds-result-footer__btn {
height: 52px !important;
font-size: var(--fs-body-md) !important;
font-weight: var(--fw-bk) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
}
.ds-result-footer__btn .mi { font-size: 18px; }
/* === Receipt (L4 helper) === */
.ds-result-receipt {
margin: 24px 0 64px;
background: var(--bg-subtle);
border-radius: 12px;
overflow: hidden;
}
.ds-result-receipt__head {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 20px;
cursor: pointer;
font-size: var(--fs-body-sm); font-weight: var(--fw-bd);
color: var(--fg-base);
list-style: none;
}
.ds-result-receipt__head::-webkit-details-marker { display: none; }
.ds-result-receipt__head .mi {
font-size: 18px; color: var(--fg-muted);
transition: transform var(--t-fast) ease-out;
}
.ds-result-receipt[open] .ds-result-receipt__head .mi { transform: rotate(180deg); }
.ds-result-receipt__list {
margin: 0;
padding: 0 20px 16px;
display: flex; flex-direction: column; gap: 8px;
border-top: 1px solid var(--border-base);
padding-top: 14px;
}
.ds-result-receipt__row {
display: flex; justify-content: space-between; align-items: baseline;
font-size: var(--fs-caption);
}
.ds-result-receipt__row dt { color: var(--fg-muted); margin: 0; font-weight: var(--fw-md); }
.ds-result-receipt__row dd {
margin: 0; color: var(--fg-base); font-weight: var(--fw-bd);
font-variant-numeric: tabular-nums;
}
.ds-result-receipt__row dd strong {
font-size: var(--fs-body-md); font-weight: var(--fw-bk);
letter-spacing: -0.008em;
}
/* ==========================================================
=== MY-COLLECTION === (Chunk 4 · Round 1-5 · my-collection.html)
롤백: 이 섹션 + my-collection.html 삭제
========================================================== */
/* === Stats Header (L2) === */
.ds-coll-stats {
display: flex; flex-direction: column; gap: 20px;
padding: 32px 0 24px;
}
.ds-coll-stats__head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 24px; flex-wrap: wrap;
margin-bottom: 4px;
}
.ds-coll-stats__head-text { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; max-width: 100%; }
/* v0.7: 컬렉션 공개/비공개 토글 */
.ds-coll-visibility {
display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
padding-top: 4px;
}
.ds-coll-visibility__row {
display: inline-flex; align-items: center; gap: 10px;
}
.ds-coll-visibility__label {
font-size: var(--fs-body-sm); font-weight: var(--fw-bd);
color: var(--fg-base);
letter-spacing: -0.005em;
}
.ds-coll-visibility__hint {
font-size: var(--fs-caption-md); color: var(--fg-muted);
text-align: right;
}
@media (max-width: 767px) {
.ds-coll-stats__head { flex-direction: column; align-items: flex-start; }
.ds-coll-visibility { align-items: flex-start; }
.ds-coll-visibility__hint { text-align: left; }
}
.ds-coll-stats__title {
font-size: 30px; font-weight: var(--fw-bk);
letter-spacing: -0.02em; line-height: 1.15;
margin: 0;
}
.ds-coll-stats__sub {
font-size: var(--fs-body-sm); color: var(--fg-muted);
margin: 0;
}
.ds-coll-stats__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
@media (max-width: 1023px) { .ds-coll-stats__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .ds-coll-stats__grid { grid-template-columns: 1fr; } }
.ds-coll-stat {
display: flex; flex-direction: column; gap: 4px;
padding: 18px 20px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 12px;
}
.ds-coll-stat__label {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
font-weight: var(--fw-md); letter-spacing: 0.04em;
text-transform: uppercase;
}
.ds-coll-stat__value {
font-size: 24px; font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
letter-spacing: -0.018em; line-height: 1.1;
color: var(--fg-base);
margin: 2px 0;
}
.ds-coll-stat__value small {
font-size: var(--fs-body-sm); color: var(--fg-muted);
font-weight: var(--fw-md); margin-left: 2px;
}
.ds-coll-stat__value--mystic { color: var(--gray-600); }
.ds-coll-stat__delta {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
font-weight: var(--fw-md);
}
.ds-coll-stat__delta--up { color: var(--success-700); }
/* === Controls (filter + sort) === */
.ds-coll-controls {
display: flex; align-items: center; justify-content: space-between;
gap: 16px;
padding: 8px 0 16px;
border-bottom: 1px solid var(--border-base);
flex-wrap: wrap;
}
.ds-coll-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.ds-coll-filter__chip {
display: inline-flex; align-items: center; gap: 4px;
height: 32px; padding: 0 14px;
border-radius: var(--r-pill);
background: var(--bg-card);
border: 1px solid var(--border-strong);
font-size: var(--fs-caption); font-weight: var(--fw-bd);
color: var(--fg-subtle);
letter-spacing: -0.005em;
cursor: pointer;
transition: var(--t-fast) ease-out;
}
.ds-coll-filter__chip:hover { border-color: var(--gray-950); color: var(--fg-base); }
.ds-coll-filter__chip[aria-pressed="true"] {
background: var(--gray-950); color: var(--gray-0); border-color: var(--gray-950);
}
:root[data-theme="dark"] .ds-coll-filter__chip[aria-pressed="true"] {
background: var(--gray-50); color: var(--gray-950); border-color: var(--gray-50);
}
.ds-coll-filter__count {
font-size: var(--fs-caption-sm); font-weight: var(--fw-md);
opacity: 0.7;
font-variant-numeric: tabular-nums;
}
.ds-coll-sort { display: flex; align-items: center; gap: 8px; }
.ds-coll-sort__label {
font-size: var(--fs-caption); color: var(--fg-muted);
font-weight: var(--fw-md);
}
.ds-coll-sort__select {
height: 32px; padding: 0 28px 0 12px;
border: 1px solid var(--border-strong);
border-radius: var(--r-pill);
background: var(--bg-card);
font-size: var(--fs-caption); font-weight: var(--fw-bd);
color: var(--fg-base);
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
}
/* === Card Grid (L1 climax) === */
.ds-coll-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
padding: 24px 0 32px;
}
@media (max-width: 1023px) { .ds-coll-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .ds-coll-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
/* 좁은 폭에서도 최소 2 컬럼 유지 (이전엔 ≤449px 에서 1열로 떨어졌음). */
.ds-coll-card {
display: flex; flex-direction: column;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: var(--t-fast) ease-out;
}
.ds-coll-card:hover {
/* unified hover — .ds-listing 기준 */
border-color: var(--gray-300);
box-shadow: var(--shadow-2);
}
/* 7일 buyback 윈도우 칩 — 카드 art 우상단 오버레이 */
.ds-coll-card__buyback {
position: absolute;
top: 8px; right: 8px;
padding: 3px 8px;
background: color-mix(in srgb, var(--gray-950) 80%, transparent);
color: #fff;
font-size: 10px; font-weight: 700;
border-radius: 999px;
letter-spacing: 0.04em;
pointer-events: none;
z-index: 2;
}
.ds-coll-card__art { position: relative; }
/* 환전 불가 카드는 흐릿하게 (exchange 모드에서 더 강조) */
body[data-mode="exchange"] .ds-coll-card[data-exchangeable="false"] {
opacity: 0.5;
}
/* === Collection card art — 솔리드 + ring + 등급 unicode mark (light + dark + mobile) === */
.ds-coll-card__art {
position: relative;
aspect-ratio: 1 / 1; /* spec rule 2.1 — 정사각 */
background: var(--gray-50);
border-bottom: 1px solid var(--border-base);
overflow: hidden;
display: grid; place-items: center;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
:root[data-theme="dark"] .ds-coll-card__art {
background: var(--gray-800);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
/* Ring 배경 */
.ds-coll-card__art::before {
content: '';
width: 38%; aspect-ratio: 1 / 1;
border-radius: 50%;
background: rgba(0,0,0,0.03);
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
:root[data-theme="dark"] .ds-coll-card__art::before {
background: rgba(255,255,255,0.04);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
/* 등급 unicode mark — 폰트 의존성 없음 */
.ds-coll-card__art::after {
position: absolute;
font-size: 24%;
font-weight: 900;
line-height: 1;
letter-spacing: -0.02em;
z-index: 1;
}
.ds-coll-card__art[data-kado-grade="mystic"] {
background: linear-gradient(180deg, #ECFDF3 0%, #D9FBE6 100%);
}
.ds-coll-card__art[data-kado-grade="legend"] {
background: linear-gradient(180deg, #FFF7DA 0%, #FCEFB1 100%);
}
.ds-coll-card__art[data-kado-grade="epic"] {
background: linear-gradient(180deg, #F2EBFF 0%, #E2D5FE 100%);
}
.ds-coll-card__art[data-kado-grade="rare"] {
background: linear-gradient(180deg, #FFEFEF 0%, #FBDADA 100%);
}
.ds-coll-card__art[data-kado-grade="common"] {
background: linear-gradient(180deg, #F5F6F8 0%, #E5E7EB 100%);
}
:root[data-theme="dark"] .ds-coll-card__art[data-kado-grade="mystic"] {
background: linear-gradient(180deg, #16331f 0%, #0d1f12 100%);
}
:root[data-theme="dark"] .ds-coll-card__art[data-kado-grade="legend"] {
background: linear-gradient(180deg, #2e2310 0%, #1a1408 100%);
}
:root[data-theme="dark"] .ds-coll-card__art[data-kado-grade="epic"] {
background: linear-gradient(180deg, #211941 0%, #150f29 100%);
}
:root[data-theme="dark"] .ds-coll-card__art[data-kado-grade="rare"] {
background: linear-gradient(180deg, #2e1614 0%, #1a0c0b 100%);
}
:root[data-theme="dark"] .ds-coll-card__art[data-kado-grade="common"] {
background: linear-gradient(180deg, var(--gray-800) 0%, var(--gray-900) 100%);
}
.ds-coll-card__art[data-kado-grade="mystic"]::after { content: '✦'; color: #137a3a; }
.ds-coll-card__art[data-kado-grade="legend"]::after { content: '⬢'; color: #b8842e; }
.ds-coll-card__art[data-kado-grade="epic"]::after { content: '◆'; color: #6d34d6; }
.ds-coll-card__art[data-kado-grade="rare"]::after { content: '▲'; color: #d23a2c; }
.ds-coll-card__art[data-kado-grade="common"]::after { content: '●'; color: var(--gray-500); }
:root[data-theme="dark"] .ds-coll-card__art[data-kado-grade="mystic"]::after { color: #0A0B0E; }
:root[data-theme="dark"] .ds-coll-card__art[data-kado-grade="legend"]::after { color: #FFD782; }
:root[data-theme="dark"] .ds-coll-card__art[data-kado-grade="epic"]::after { color: #B491FF; }
:root[data-theme="dark"] .ds-coll-card__art[data-kado-grade="rare"]::after { color: #FF826E; }
:root[data-theme="dark"] .ds-coll-card__art[data-kado-grade="common"]::after { color: var(--gray-400); }
.ds-coll-card__grade {
/* v0.5 — KADO 등급(rarity) chip art 우상단. 메트릭 통일: h20/10px/600/ls 0.04 */
position: absolute;
top: 8px; right: 8px;
display: inline-flex; align-items: center; justify-content: center;
height: 20px; padding: 0 8px;
box-sizing: border-box;
border: 1px solid transparent;
border-radius: var(--r-pill);
font-size: 10px; font-weight: var(--fw-bd);
letter-spacing: 0.04em;
line-height: 1;
z-index: 3;
}
/* v0.5: mystic = aurora mesh, legendary = subtle gold */
.ds-coll-card__grade[data-kado-grade="mystic"] {
background-color: #2A1845;
background-image:
radial-gradient(ellipse 80% 120% at 0% 0%, #C5A0FF 0%, transparent 65%),
radial-gradient(ellipse 80% 120% at 100% 0%, #FF8FCD 0%, transparent 55%),
radial-gradient(ellipse 80% 120% at 0% 100%, #5DECFF 0%, transparent 55%),
radial-gradient(ellipse 80% 120% at 100% 100%, #6F8DFF 0%, transparent 55%);
color: #FFF;
border-color: rgba(255,255,255,0.22);
text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.ds-coll-card__grade[data-kado-grade="legend"] {
background: linear-gradient(180deg,
#FBD550 0%, #F5C518 35%, #DDB10E 70%, #C99A0F 100%);
color: var(--legendary-700);
border-color: color-mix(in srgb, var(--legendary-700) 35%, transparent);
text-shadow: 0 1px 0 rgba(255,255,255,0.18);
}
.ds-coll-card__grade[data-kado-grade="epic"] {
background: var(--epic-500); color: white;
border-color: color-mix(in srgb, #FFF 25%, transparent);
}
.ds-coll-card__grade[data-kado-grade="rare"] {
background: var(--rare-500); color: white;
border-color: color-mix(in srgb, #FFF 25%, transparent);
}
.ds-coll-card__grade[data-kado-grade="common"] {
background: var(--common-500); color: white;
border-color: color-mix(in srgb, #FFF 25%, transparent);
}
.ds-coll-card__new {
/* spec rule 3.4 — NEW/hot은 art 좌상단 */
position: absolute;
top: 8px; left: 8px;
display: inline-flex; align-items: center;
height: 18px; padding: 0 6px;
border-radius: var(--r-pill);
font-size: 9px; font-weight: var(--fw-bk);
letter-spacing: 0.06em;
background: var(--gray-950);
color: var(--gray-0);
z-index: 2;
}
.ds-coll-card__info {
padding: 12px 14px 8px;
display: flex; flex-direction: column; gap: 3px;
}
.ds-coll-card__name {
margin: 0;
font-size: var(--fs-body-sm); font-weight: var(--fw-bd); /* v0.5: bk → bd */
color: var(--fg-base);
letter-spacing: -0.005em;
}
.ds-coll-card__name span {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
font-weight: var(--fw-rg); /* v0.5: md → rg (sub line) */
margin-left: 4px;
}
.ds-coll-card__set {
margin: 0;
font-size: var(--fs-caption-sm); color: var(--fg-muted);
font-weight: var(--fw-rg);
letter-spacing: 0.01em;
}
/* v0.5.1: justify-between 폐기 (unit 부양 fix). amount+unit 묶고 trend만 우측 push.
가격 사이즈 16px 통일 (다른 카드 thumbnail와 동일) */
.ds-coll-card__value {
margin: 4px 0 0;
color: var(--fg-base);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
display: flex; align-items: baseline; gap: 4px;
letter-spacing: -0.005em;
}
.ds-coll-card__amount {
font-size: 16px; /* 카드 thumbnail price 통일 (.ds-listing__price와 동일) */
font-weight: var(--fw-bd);
font-variant-numeric: tabular-nums;
}
.ds-coll-card__value-unit {
font-size: 12px; font-weight: var(--fw-rg); color: var(--fg-muted);
}
.ds-coll-card__value-trend {
font-size: var(--fs-caption-sm);
font-weight: var(--fw-md);
color: var(--fg-faint);
margin-left: auto; /* trend만 우측 끝 push */
}
.ds-coll-card__value-trend--up { color: var(--success-700); }
.ds-coll-card__value-trend--down { color: var(--danger-600); }
.ds-coll-card__status {
display: flex; align-items: center; gap: 6px;
padding: 8px 14px 12px;
font-size: var(--fs-caption-sm); color: var(--fg-muted);
font-weight: var(--fw-md);
border-top: 1px solid var(--border-subtle);
margin-top: 4px;
}
.ds-coll-card__status-dot {
width: 6px; height: 6px; border-radius: 50%;
flex-shrink: 0;
}
.ds-coll-card__status-dot[data-status="keep"] { background: var(--gray-400); }
.ds-coll-card__status-dot[data-status="sell"] { background: var(--gray-700); }
.ds-coll-card__status-dot[data-status="grading"] { background: var(--legendary-500); }
.ds-coll-card__status-dot[data-status="ship"] { background: var(--common-500); }
/* === Bottom CTA === */
.ds-coll-cta {
display: flex; flex-direction: column; align-items: center;
gap: 16px;
padding: 48px 0;
background: transparent;
border-radius: 0;
margin: 16px 0 64px;
text-align: center;
}
.ds-coll-cta__head { display: flex; flex-direction: column; gap: 4px; }
.ds-coll-cta__title {
font-size: var(--fs-h3); font-weight: var(--fw-bk);
letter-spacing: -0.014em;
margin: 0;
}
.ds-coll-cta__sub {
font-size: var(--fs-body-sm); color: var(--fg-muted);
margin: 0;
}
.ds-coll-cta__btn {
height: 44px !important;
padding: 0 24px !important;
font-size: var(--fs-body-sm) !important;
font-weight: var(--fw-bd) !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
}
.ds-coll-cta__btn .mi { font-size: 18px; }
/* ==========================================================
=== MARKETPLACE-DETAIL === (Chunk 5 · Round 2-1)
롤백: 이 섹션 + marketplace-detail.html 삭제
========================================================== */
.market-detail-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* v0.7: 좌우 1:1 (min-content 제거) */
/* v0.8: info를 좌측 컬럼 2-row 전체 area로 span — main 아래에 list가 row-gap만큼만 띄워서 바로 붙음
v0.9: 받은 오퍼 / 카드 상세는 양 컬럼 전체 폭으로 아래에 배치. */
grid-template-areas:
"main info"
"list info"
"offers offers";
gap: 32px 48px;
padding-block: 16px 48px;
align-items: start;
}
.market-detail-grid > .market-detail-grid__main { grid-area: main; }
.market-detail-grid > .ds-market-info { grid-area: info; }
.market-detail-grid > .ds-market-listings--bottom { grid-area: list; }
.market-detail-grid > .ds-card-offers { grid-area: offers; }
@media (max-width: 1023px) {
/* v0.8: minmax(0, 1fr) — grid item의 min-content가 track을 늘리는 문제 방어 (긴 텍스트/이미지 overflow) */
.market-detail-grid {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: none; /* desktop의 named area 해제 — order로 stacking 제어 */
gap: 24px;
/* v0.8: 모바일 리듬 — 위 16, 아래 12로 footer margin-top과 합쳐 ~24px */
padding-block: 16px 12px;
}
.market-detail-grid > * { min-width: 0; }
/* desktop named area override — specificity 맞추기 위해 동일 셀렉터 형식으로 풀어줌 */
.market-detail-grid > .market-detail-grid__main,
.market-detail-grid > .ds-market-info,
.market-detail-grid > .ds-market-listings--bottom,
.market-detail-grid > .ds-card-offers { grid-area: auto; }
/* v0.9 모바일 stacking 순서:
1) 카드 이미지 (main) — above-fold 최우선
2) CTA / 가격 / 판매자 (info)
3) 받은 오퍼 (보유자만 노출)
4) 동일 카드 다른 listing (맨 아래) */
.market-detail-grid > .market-detail-grid__main { order: 1; }
.market-detail-grid > .ds-market-info { order: 2; }
.market-detail-grid > .ds-card-offers { order: 3; }
.market-detail-grid > .ds-market-listings--bottom { order: 4; }
}
.market-detail-grid__main {
display: flex; flex-direction: column; gap: 24px;
}
/* v0.7: 모바일/태블릿 — 카드 art를 먼저 보여주고 (above-fold) info는 아래
art container는 viewport width fill (양옆 16px 마진), 안에서 카드 이미지는 5:7 비율로 중앙 fit
(order는 위 블록에서 BP별로 분기 — tablet: main/listings/info, mobile: main/info/listings) */
@media (max-width: 1023px) {
.market-detail-grid__main .ds-market-art {
align-items: stretch; /* container가 vw fill 하도록 */
}
.market-detail-grid__main .ds-market-art__inner {
aspect-ratio: auto;
width: 100%;
height: 50vh; /* 명시적 height — IMG max-height 계산 가능 */
min-height: 320px;
max-height: 50vh;
margin-inline: 0;
padding: 16px;
background: var(--gray-100);
overflow: hidden; /* IMG가 절대 container 밖으로 나가지 않도록 */
}
/* 카드 이미지: container 안에서 5:7 비율 유지, 풀 노출 (NO-CROP) */
.market-detail-grid__main .ds-market-art__inner img {
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
object-position: center !important;
margin: 0 auto !important;
display: block !important;
}
.market-detail-grid__main .ds-market-art__thumbs {
display: none;
}
.ds-market-info__name {
font-size: var(--fs-h4) !important;
line-height: 1.3 !important;
letter-spacing: -0.012em !important;
}
.ds-market-info__price-amount {
font-size: 28px !important;
}
}
@media (max-width: 480px) {
.market-detail-grid__main .ds-market-art__inner {
min-height: 280px;
max-height: 42vh;
}
}
/* === Card art (큰) === */
.ds-market-art {
display: flex; flex-direction: column; gap: 12px;
}
.ds-market-art__inner {
aspect-ratio: 1 / 1; /* desktop default — 1:1 stage */
background: var(--gray-100);
border: 1px solid var(--border-base);
border-radius: 16px;
/* overflow hidden — container 자체는 깔끔하게 자르되, IMG는 max 제한으로 contain */
overflow: hidden;
display: flex; align-items: center; justify-content: center;
padding: clamp(20px, 4%, 48px);
box-sizing: border-box;
position: relative;
box-shadow: var(--shadow-2);
min-width: 0;
min-height: 0;
}
:root[data-theme="dark"] .ds-market-art__inner {
background: var(--gray-800);
}
/* === NO-CROP RULE: 카드 thumbnail은 어떤 breakpoint에서든 풀 이미지가 보여야 함 === */
.ds-market-art__inner img {
max-width: 100%; max-height: 100%;
width: auto; height: auto;
object-fit: contain !important; /* 절대 crop 금지 */
object-position: center !important; /* 항상 중앙 */
display: block;
cursor: zoom-in;
}
.ds-market-art__sparkle {
position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 30%, rgba(255,255,255,0.6) 0%, transparent 1.5%),
radial-gradient(circle at 78% 72%, rgba(255,255,255,0.6) 0%, transparent 1%),
radial-gradient(circle at 60% 22%, rgba(255,255,255,0.6) 0%, transparent 1.2%),
radial-gradient(circle at 30% 80%, rgba(255,255,255,0.6) 0%, transparent 1%);
}
.ds-market-art__thumbs {
display: flex; gap: 8px;
}
.ds-market-art__thumbs[hidden],
.ds-market-art__thumb[hidden],
.ds-market-art__nav[hidden],
.ds-market-art__zoom-btn[hidden] {
display: none !important;
}
.ds-market-art__thumb {
width: 56px; aspect-ratio: 1;
background: var(--gray-100);
border: 1px solid var(--border-base);
border-radius: 6px;
cursor: pointer;
overflow: hidden;
padding: 4px; /* v0.7: contain 시 카드가 모서리에 붙지 않도록 */
display: flex; align-items: center; justify-content: center;
}
:root[data-theme="dark"] .ds-market-art__thumb { background: var(--gray-800); }
.ds-market-art__thumb img {
max-width: 100%; max-height: 100%;
width: auto; height: auto;
object-fit: contain; /* v0.7: cover → contain (풀실루엣 노출) */
display: block;
}
.ds-market-art__thumb.is-active {
border-color: var(--gray-950); border-width: 2px;
}
:root[data-theme="dark"] .ds-market-art__thumb.is-active { border-color: var(--gray-50); }
/* Prev/Next nav (오버레이 — 앞↔뒤 순환) */
.ds-market-art__nav {
position: absolute;
top: 50%; transform: translateY(-50%);
width: 40px; height: 40px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 50%;
color: var(--fg-base);
cursor: pointer;
box-shadow: var(--shadow-2);
opacity: 0;
transition: opacity var(--t-fast) ease-out, background var(--t-fast) ease-out;
z-index: 2;
}
.ds-market-art__inner:hover .ds-market-art__nav,
.ds-market-art__nav:focus-visible { opacity: 1; }
.ds-market-art__nav:hover { background: var(--gray-950); color: var(--gray-0); border-color: var(--gray-950); }
:root[data-theme="dark"] .ds-market-art__nav:hover { background: var(--gray-50); color: var(--gray-950); border-color: var(--gray-50); }
.ds-market-art__nav--prev { left: 12px; }
.ds-market-art__nav--next { right: 12px; }
.ds-market-art__nav .mi { font-size: 22px; }
/* Zoom button — v0.7: 항상 visible (이전 hover-only로 발견성 ↓) */
.ds-market-art__zoom-btn {
position: absolute;
top: 12px; right: 12px;
width: 40px; height: 40px;
display: inline-flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--bg-card) 90%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--border-base);
border-radius: 50%;
color: var(--fg-base);
cursor: pointer;
box-shadow: var(--shadow-2);
opacity: 0.92;
transition: opacity var(--t-fast) ease-out, transform var(--t-fast) ease-out;
z-index: 2;
}
.ds-market-art__inner:hover .ds-market-art__zoom-btn,
.ds-market-art__zoom-btn:focus-visible { opacity: 1; transform: scale(1.05); }
.ds-market-art__zoom-btn:hover { background: var(--gray-950); color: var(--gray-0); border-color: var(--gray-950); }
:root[data-theme="dark"] .ds-market-art__zoom-btn:hover { background: var(--gray-50); color: var(--gray-950); }
.ds-market-art__zoom-btn .mi { font-size: 18px; }
/* Zoom lightbox */
.ds-zoom-lightbox {
position: fixed; inset: 0; z-index: 2000;
background: rgba(0,0,0,0.85);
display: none;
align-items: center; justify-content: center;
padding: 24px;
cursor: zoom-out;
}
.ds-zoom-lightbox.is-open { display: flex; }
.ds-zoom-lightbox__img {
max-width: 92vw; max-height: 92vh;
object-fit: contain;
display: block;
border-radius: 8px;
box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.ds-zoom-lightbox__close {
position: absolute;
top: 20px; right: 20px;
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 50%;
color: white;
cursor: pointer;
transition: background var(--t-fast) ease-out;
}
.ds-zoom-lightbox__close:hover { background: rgba(255,255,255,0.2); }
.ds-zoom-lightbox__close .mi { font-size: 22px; }
.ds-zoom-lightbox__nav {
position: absolute;
top: 50%; transform: translateY(-50%);
width: 48px; height: 48px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 50%;
color: white;
cursor: pointer;
transition: background var(--t-fast) ease-out;
}
.ds-zoom-lightbox__nav:hover { background: rgba(255,255,255,0.2); }
.ds-zoom-lightbox__nav .mi { font-size: 26px; }
.ds-zoom-lightbox__nav--prev { left: 20px; }
.ds-zoom-lightbox__nav--next { right: 20px; }
.ds-zoom-lightbox__caption {
position: absolute;
bottom: 24px; left: 50%; transform: translateX(-50%);
padding: 6px 14px;
background: rgba(255,255,255,0.1);
border-radius: 20px;
color: white;
font-size: var(--fs-caption);
font-weight: var(--fw-bd);
letter-spacing: 0.04em;
}
/* === 시세 trend === */
.ds-market-trend {
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 12px;
padding: 20px;
}
.ds-market-trend__head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 16px;
flex-wrap: wrap; gap: 12px;
}
.ds-market-trend__title {
font-size: var(--fs-h4); font-weight: var(--fw-bk);
letter-spacing: -0.012em;
margin: 0;
}
.ds-market-trend__range {
display: inline-flex;
background: var(--bg-subtle);
border-radius: var(--r-pill);
padding: 3px;
}
.ds-market-trend__range-btn {
padding: 6px 12px;
background: transparent;
border: none;
border-radius: var(--r-pill);
font-size: var(--fs-caption); font-weight: var(--fw-bd);
color: var(--fg-muted);
cursor: pointer;
transition: var(--t-fast) ease-out;
}
.ds-market-trend__range-btn[aria-pressed="true"] {
background: var(--gray-950); color: var(--gray-0);
}
:root[data-theme="dark"] .ds-market-trend__range-btn[aria-pressed="true"] {
background: var(--gray-50); color: var(--gray-950);
}
.ds-market-trend__stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
padding: 16px 0;
border-top: 1px solid var(--border-subtle);
}
@media (max-width: 599px) { .ds-market-trend__stats { grid-template-columns: repeat(2, 1fr); } }
.ds-market-trend__stat { display: flex; flex-direction: column; gap: 2px; }
.ds-market-trend__stat-label {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
font-weight: var(--fw-md); letter-spacing: 0.02em;
}
.ds-market-trend__stat-value {
font-size: var(--fs-body-md); font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums;
letter-spacing: -0.008em;
color: var(--fg-base);
}
.ds-market-trend__stat-value small {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
font-weight: var(--fw-md); margin-left: 2px;
}
.ds-market-trend__stat-value--up { color: var(--success-700); }
.ds-market-trend__stat-value--down { color: var(--danger-600); }
.ds-market-trend__chart {
width: 100%;
height: 140px;
background: var(--bg-subtle);
border-radius: 8px;
margin-top: 8px;
overflow: hidden;
}
.ds-market-trend__chart svg { width: 100%; height: 100%; }
/* === 카드 컨디션 === */
.ds-market-condition {
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 12px;
padding: 20px;
}
.ds-market-condition__title {
font-size: var(--fs-h4); font-weight: var(--fw-bk);
letter-spacing: -0.012em;
margin: 0 0 12px;
}
.ds-market-condition__rows {
display: flex; flex-direction: column;
}
.ds-market-condition__row {
display: flex; justify-content: space-between; align-items: center;
padding: 11px 0;
border-top: 1px solid var(--border-subtle);
font-size: var(--fs-body-sm);
}
.ds-market-condition__row:first-child { border-top: none; }
.ds-market-condition__label { color: var(--fg-muted); font-weight: var(--fw-md); }
.ds-market-condition__value {
color: var(--fg-base); font-weight: var(--fw-bd);
text-align: right;
}
.ds-market-condition__value strong {
font-weight: var(--fw-bk);
}
.ds-market-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px;
background: var(--gray-50);
color: var(--gray-400);
border-radius: var(--r-pill);
font-size: var(--fs-caption-sm); font-weight: var(--fw-bd);
}
.ds-market-badge .mi { font-size: 14px; }
/* === v0.7: 이 카드가 등장하는 카드 팩 (gacha retention loop) === */
.ds-card-in-packs {
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 12px;
padding: 20px;
margin-bottom: 16px;
}
.ds-card-in-packs__head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
}
.ds-card-in-packs__title {
font-size: var(--fs-h3); font-weight: var(--fw-bk);
letter-spacing: -0.012em;
margin: 0 0 4px;
}
.ds-card-in-packs__sub {
font-size: var(--fs-caption-md); color: var(--fg-muted);
margin: 0;
}
.ds-card-in-packs__more {
font-size: var(--fs-caption-md); color: var(--fg-muted);
white-space: nowrap;
flex-shrink: 0;
}
.ds-card-in-packs__more:hover { color: var(--fg-base); }
.ds-card-in-packs__list { display: flex; flex-direction: column; gap: 10px; }
.ds-card-in-pack {
display: grid;
grid-template-columns: 96px 1fr auto;
gap: 16px; align-items: center;
padding: 14px 16px;
background: var(--bg-subtle);
border: 1px solid var(--border-subtle);
border-radius: 12px;
text-decoration: none; color: inherit;
transition: var(--t-fast) ease-out;
}
.ds-card-in-pack:hover {
background: var(--bg-muted);
border-color: var(--border-base);
}
:root[data-theme="dark"] .ds-card-in-pack {
background: var(--gray-900); border-color: var(--white-a100);
}
:root[data-theme="dark"] .ds-card-in-pack:hover {
background: var(--gray-800); border-color: var(--white-a200);
}
.ds-card-in-pack__visual {
width: 96px; aspect-ratio: 1 / 1.45;
background: var(--gray-950);
border-radius: 8px;
overflow: hidden;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.ds-card-in-pack__visual img {
width: 100%; height: 100%; object-fit: contain;
display: block;
}
.ds-card-in-pack__body { min-width: 0; }
.ds-card-in-pack__brand {
font-size: var(--fs-caption-sm);
color: var(--fg-muted);
letter-spacing: 0.04em;
font-weight: var(--fw-md);
text-transform: uppercase;
margin-bottom: 4px;
}
.ds-card-in-pack__name {
font-size: var(--fs-body-md); font-weight: var(--fw-bk);
letter-spacing: -0.005em;
margin: 0 0 4px;
}
.ds-card-in-pack__pool {
font-size: var(--fs-caption-md); color: var(--fg-subtle);
margin: 0;
}
.ds-card-in-pack__action {
display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
flex-shrink: 0;
}
.ds-card-in-pack__price {
display: inline-flex; align-items: baseline; gap: 2px;
font-variant-numeric: tabular-nums;
}
.ds-card-in-pack__price strong {
font-size: var(--fs-h4); font-weight: var(--fw-bk);
letter-spacing: -0.005em;
}
.ds-card-in-pack__price small {
font-size: var(--fs-caption-md); color: var(--fg-muted);
font-weight: var(--fw-rg);
}
.ds-card-in-pack__cta {
display: inline-flex; align-items: center; gap: 4px;
font-size: var(--fs-caption-md); font-weight: var(--fw-bd);
color: var(--fg-base);
transition: gap var(--t-fast) ease-out;
}
.ds-card-in-pack__cta .mi { font-size: 14px; }
.ds-card-in-pack:hover .ds-card-in-pack__cta { gap: 6px; }
@media (max-width: 767px) {
.ds-card-in-pack {
grid-template-columns: 72px 1fr;
grid-template-rows: auto auto;
gap: 12px 14px;
}
.ds-card-in-pack__visual { width: 72px; }
.ds-card-in-pack__action {
grid-column: 1 / -1;
flex-direction: row; justify-content: space-between; align-items: center;
padding-top: 10px; border-top: 1px solid var(--border-subtle);
}
}
/* === 동일 카드 listing === */
.ds-market-listings {
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 12px;
padding: 20px;
}
.ds-market-listings__head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 12px;
}
.ds-market-listings__title {
font-size: var(--fs-h4); font-weight: var(--fw-bk);
letter-spacing: -0.012em;
margin: 0;
}
.ds-market-listings__more {
font-size: var(--fs-caption); color: var(--fg-subtle);
font-weight: var(--fw-bd);
text-decoration: none;
}
.ds-market-listings__more:hover { color: var(--fg-base); }
.ds-market-listings__list {
display: flex; flex-direction: column;
}
.ds-market-listing {
display: grid;
grid-template-columns: 48px 1fr auto;
gap: 14px; align-items: center;
padding: 12px 0;
text-decoration: none;
color: inherit;
border-top: 1px solid var(--border-subtle);
cursor: pointer;
transition: var(--t-fast) ease-out;
}
.ds-market-listing:first-child { border-top: none; }
.ds-market-listing:hover { background: var(--bg-subtle); border-radius: 8px; padding-inline: 8px; margin-inline: -8px; }
.ds-market-listing__thumb {
width: 48px; aspect-ratio: 5 / 7;
background: var(--gray-100);
border-radius: 4px;
border: 1px solid var(--border-base);
overflow: hidden;
}
.ds-market-listing__thumb img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.ds-market-listing__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-market-listing__name {
font-size: var(--fs-body-sm); font-weight: var(--fw-bd);
margin: 0;
color: var(--fg-base);
}
.ds-market-listing__name span {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
font-weight: var(--fw-md); margin-left: 4px;
}
.ds-market-listing__seller {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
margin: 0;
}
.ds-market-listing__price {
display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.ds-market-listing__price .amount {
font-size: var(--fs-body-sm); font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.ds-market-listing__price .diff {
font-size: var(--fs-caption-sm); font-weight: var(--fw-md);
font-variant-numeric: tabular-nums;
}
.ds-market-listing__price .diff--up { color: var(--success-700); }
.ds-market-listing__price .diff--down { color: var(--danger-600); }
/* === Right Info Card ===
v1.0: position: sticky 제거 — 받은 오퍼 / 카드 상세 섹션을 grid 아래에
추가한 뒤, 스크롤 시 sticky info 가 그 섹션들 위에 덮이는 회귀가 있었음
(사장 요구 정정). 정상 흐름으로 스크롤하도록 static 만 유지. */
.ds-market-info {
position: static;
align-self: start;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 16px;
padding: 28px;
display: flex; flex-direction: column; gap: 20px;
box-shadow: var(--shadow-2);
}
/* v0.6: title 좌측 + 좋아요/공유 우상단 가로 배치 */
.ds-market-info__head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px;
}
.ds-market-info__head-actions {
display: flex; gap: 6px;
flex-shrink: 0;
}
.ds-market-info__eyebrow {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
font-weight: var(--fw-md); letter-spacing: 0.02em;
margin: 0;
}
.ds-market-info__name {
font-size: 30px; font-weight: var(--fw-bk);
letter-spacing: -0.02em; line-height: 1.1;
margin: 0;
}
/* v0.5: 통합 chip 시스템 적용 — h20 / 10px / 600 / 1px border / mystic mesh / legendary gold */
.ds-market-info__chips { display: flex; gap: 6px; margin-top: 4px; }
.ds-market-info__chip {
display: inline-flex; align-items: center; justify-content: center;
height: 20px; padding: 0 8px;
box-sizing: border-box;
border: 1px solid transparent;
border-radius: var(--r-pill);
font-size: 10px; font-weight: var(--fw-bd); /* 600 */
letter-spacing: 0.04em;
line-height: 1;
white-space: nowrap;
}
/* Grade — 사각 chip (carry over from card thumb spec) */
.ds-market-info__chip--grade {
background: var(--gray-950); color: var(--gray-0);
border-radius: 4px;
border-color: var(--gray-800);
}
:root[data-theme="dark"] .ds-market-info__chip--grade {
background: var(--gray-50); color: var(--gray-950);
border-color: var(--gray-200);
}
/* Rarity — pill */
.ds-market-info__chip--rarity[data-kado-grade="mystic"] {
background-color: #2A1845;
background-image:
radial-gradient(ellipse 80% 120% at 0% 0%, #C5A0FF 0%, transparent 65%),
radial-gradient(ellipse 80% 120% at 100% 0%, #FF8FCD 0%, transparent 55%),
radial-gradient(ellipse 80% 120% at 0% 100%, #5DECFF 0%, transparent 55%),
radial-gradient(ellipse 80% 120% at 100% 100%, #6F8DFF 0%, transparent 55%);
color: #FFF;
border-color: rgba(255,255,255,0.22);
text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.ds-market-info__chip--rarity[data-kado-grade="legend"] {
background: linear-gradient(180deg,
#FBD550 0%, #F5C518 35%, #DDB10E 70%, #C99A0F 100%);
color: var(--legendary-700);
border-color: color-mix(in srgb, var(--legendary-700) 35%, transparent);
text-shadow: 0 1px 0 rgba(255,255,255,0.18);
}
.ds-market-info__chip--rarity[data-kado-grade="epic"] {
background: var(--epic-500); color: white;
border-color: color-mix(in srgb, #FFF 25%, transparent);
}
.ds-market-info__chip--rarity[data-kado-grade="rare"] {
background: var(--rare-500); color: white;
border-color: color-mix(in srgb, #FFF 25%, transparent);
}
.ds-market-info__chip--rarity[data-kado-grade="common"] {
background: var(--common-500); color: white;
border-color: color-mix(in srgb, #FFF 25%, transparent);
}
/* Price */
.ds-market-info__price {
display: flex; align-items: baseline; gap: 6px;
padding-top: 8px;
border-top: 1px solid var(--border-subtle);
}
.ds-market-info__price-amount {
font-size: 36px; font-weight: var(--fw-bd); /* v0.6: bk → bd (max 600) */
font-variant-numeric: tabular-nums;
letter-spacing: -0.024em; line-height: 1;
display: inline-flex; align-items: baseline; gap: 8px;
}
/* v0.7 T2: dual mode — P main 옆 작은 통화 환산 */
.ds-kado-fiat-sub {
font-size: 13px; font-weight: var(--fw-md);
color: var(--fg-muted); letter-spacing: 0;
font-variant-numeric: tabular-nums;
}
.ds-market-info__price-suffix {
font-size: var(--fs-body-sm); color: var(--fg-muted);
font-weight: var(--fw-rg); /* v0.6: md → rg (unit rule) */
}
/* v0.6 Style E: PSA grade inline at right of price */
.ds-market-info__price-grade {
margin-left: auto;
font-size: 13px; font-weight: var(--fw-bd);
letter-spacing: 0.04em;
color: var(--fg-muted);
font-variant-numeric: tabular-nums;
align-self: center;
}
.ds-market-info__price-context {
font-size: var(--fs-caption); color: var(--fg-subtle);
margin: -8px 0 0;
line-height: 1.5;
}
.ds-market-info__price-context strong { color: var(--fg-base); font-weight: var(--fw-bk); }
.ds-market-info__price-context em.up { color: var(--success-700); font-style: normal; font-weight: var(--fw-bk); }
.ds-market-info__price-context em.down { color: var(--danger-600); font-style: normal; font-weight: var(--fw-bk); }
.ds-market-info__market-state {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-top: -8px;
}
.ds-market-info__listing-status,
.ds-market-info__fmv {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 6px 10px;
border: 1px solid var(--border-base);
border-radius: 8px;
background: var(--bg-card);
color: var(--fg-subtle);
font-size: var(--fs-caption);
font-weight: var(--fw-bd);
line-height: 1.2;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.ds-market-info__listing-status {
gap: 5px;
}
.ds-market-info__listing-status .mi {
font-size: 15px;
}
.ds-market-info__listing-status[data-listing-status="unlisted"] {
border-color: color-mix(in srgb, var(--gray-400) 28%, var(--border-base));
background: var(--bg-subtle);
}
.ds-market-info__listing-status[data-listing-status="listed"] {
border-color: color-mix(in srgb, var(--success-700) 28%, var(--border-base));
background: color-mix(in srgb, var(--success-700) 7%, var(--bg-card));
color: var(--success-700);
}
.ds-market-info__fmv {
gap: 8px;
color: var(--fg-base);
}
.ds-market-info__fmv-label {
color: var(--fg-muted);
font-size: var(--fs-caption-sm);
font-weight: var(--fw-bd);
}
.ds-market-info__fmv-value {
color: var(--fg-base);
font-weight: var(--fw-bk);
}
/* v0.7: 이 카드가 등장하는 팩 — 1~5+개 지원
1개 = 단일 row, 2+개 = horizontal scroll rail (snap)
제 1 목표: pack 이미지로 강한 motivation + 가챠 진입 마찰 0 */
.ds-pack-sources {
margin-top: 8px;
padding: 14px;
background: var(--bg-subtle);
border: 1px solid var(--border-subtle);
border-radius: 12px;
}
:root[data-theme="dark"] .ds-pack-sources {
background: var(--gray-900); border-color: var(--white-a100);
}
.ds-pack-sources__head {
display: flex; align-items: center; gap: 8px;
margin-bottom: 10px;
}
.ds-pack-sources__title {
font-size: var(--fs-caption-md);
font-weight: var(--fw-bd);
color: var(--fg-base);
letter-spacing: -0.005em;
margin: 0;
}
.ds-pack-sources__count {
display: inline-flex; align-items: center; justify-content: center;
height: 18px; padding: 0 6px;
font-size: 10px; font-weight: var(--fw-bk);
color: var(--gray-0);
background: var(--gray-950);
border-radius: var(--r-pill);
font-variant-numeric: tabular-nums;
letter-spacing: 0;
}
:root[data-theme="dark"] .ds-pack-sources__count { background: var(--gray-50); color: var(--gray-950); }
.ds-pack-sources__list {
list-style: none; padding: 0; margin: 0;
display: flex; gap: 8px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
/* edge fade hint when scrollable */
scroll-padding: 0 14px;
}
.ds-pack-sources__list::-webkit-scrollbar { display: none; }
.ds-pack-sources__list > li {
flex: 0 0 auto;
scroll-snap-align: start;
/* 단일 카드일 땐 가로 100% (rail 효과 X), 여러 개일 땐 고정 폭 */
width: 240px;
max-width: calc(100% - 8px);
}
/* 1개일 때 — full-width inline row (썸네일 + 본문 inline) */
.ds-pack-sources__list:has(> li:only-child) > li { width: 100%; max-width: 100%; }
.ds-pack-source-card {
display: grid;
grid-template-columns: 44px 1fr auto;
gap: 12px; align-items: center;
padding: 10px 12px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 10px;
text-decoration: none; color: inherit;
transition: background var(--t-fast) ease-out, border-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
height: 100%;
}
.ds-pack-source-card:hover {
background: var(--bg-card);
border-color: var(--border-strong);
transform: none;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
:root[data-theme="dark"] .ds-pack-source-card {
background: var(--gray-800); border-color: var(--white-a100);
}
:root[data-theme="dark"] .ds-pack-source-card:hover {
background: var(--gray-800); border-color: var(--white-a300);
}
.ds-pack-source-card__thumb {
width: 44px; aspect-ratio: 1 / 1.45;
background: var(--gray-950);
border-radius: 4px;
overflow: hidden;
display: flex; align-items: center; justify-content: center;
position: relative;
}
.ds-pack-source-card__thumb img {
width: 100%; height: 100%; object-fit: contain; display: block;
}
.ds-pack-source-card__thumb--limited {
background: linear-gradient(135deg, #2a1a3f 0%, #1a0f2a 100%);
}
.ds-pack-source-card__limited-tag {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-size: 8px; font-weight: var(--fw-bk);
letter-spacing: 0.08em;
color: rgba(255,255,255,0.85);
text-align: center;
line-height: 1;
}
.ds-pack-source-card__body {
display: flex; flex-direction: column; gap: 2px;
min-width: 0;
}
.ds-pack-source-card__name {
font-size: var(--fs-body-sm); font-weight: var(--fw-bd);
letter-spacing: -0.005em;
line-height: 1.3;
color: var(--fg-base);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-pack-source-card__meta {
font-size: var(--fs-caption);
color: var(--fg-muted);
line-height: 1.3;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-pack-source-card__price {
font-size: var(--fs-caption-md);
font-weight: var(--fw-bd);
color: var(--fg-base);
font-variant-numeric: tabular-nums;
display: inline-flex; align-items: baseline; gap: 3px;
margin-top: 2px;
}
.ds-pack-source-card__price-suffix {
font-size: 10px; color: var(--fg-muted); font-weight: var(--fw-md);
}
.ds-pack-source-card__arrow {
font-size: 18px;
color: var(--fg-muted);
flex-shrink: 0;
transition: transform var(--t-fast) ease-out;
}
.ds-pack-source-card:hover .ds-pack-source-card__arrow {
transform: translateX(2px);
color: var(--fg-base);
}
@media (max-width: 480px) {
.ds-pack-sources__list > li { width: 220px; }
}
/* Seller */
.ds-market-info__seller {
background: var(--bg-subtle);
border: 1px solid var(--border-base);
border-radius: 12px;
padding: 14px;
display: flex; flex-direction: column; gap: 8px;
}
.ds-market-info__seller-row {
display: flex;
align-items: center;
gap: 10px;
}
.ds-market-info__seller-avatar {
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--gray-950);
color: var(--gray-0);
font-size: var(--fs-body-md);
font-weight: var(--fw-bk);
line-height: 1;
}
:root[data-theme="dark"] .ds-market-info__seller-avatar {
background: var(--gray-50);
color: var(--gray-950);
}
.ds-market-info__seller-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ds-market-info__seller-main {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.ds-market-info__seller-label {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
font-weight: var(--fw-md); letter-spacing: 0.04em;
text-transform: uppercase;
}
.ds-market-info__seller-name {
font-size: var(--fs-body-sm); font-weight: var(--fw-bk);
color: var(--fg-base);
text-decoration: none;
overflow-wrap: anywhere;
}
.ds-market-info__seller-name:hover { text-decoration: underline; }
.ds-market-info__seller-stats {
display: flex;
gap: 8px 12px;
flex-wrap: wrap;
padding-top: 8px;
border-top: 1px solid var(--border-subtle);
font-size: var(--fs-caption); color: var(--fg-subtle);
}
.ds-market-info__seller-stats strong {
color: var(--fg-base); font-weight: var(--fw-bk);
}
.ds-market-info__seller-verified {
display: inline-flex; align-items: center; gap: 4px;
color: var(--gray-600); font-weight: var(--fw-bd);
margin-left: auto;
}
.ds-market-info__seller-verified .mi { font-size: 14px; }
/* v0.6.1: 오퍼(좌) + 구매(우) 가로 배치, 1:1.4 비율
두 버튼 메트릭 완전 통일 — height/font/weight/padding/display 모두 동일 */
.ds-market-info__actions {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 8px;
}
.ds-market-info__actions.is-owner-listing {
grid-template-columns: 1fr;
}
.ds-market-info__actions.is-offer-only {
grid-template-columns: 1fr;
}
.ds-market-info__actions .ds-btn[hidden] {
display: none !important;
}
.ds-market-info__actions .ds-btn {
/* size 통일 (.ds-pack-cta 등 다른 컴포넌트 override 무력화) */
width: 100% !important;
height: 52px !important;
padding: 0 16px !important;
font-size: var(--fs-body-sm) !important; /* 14px — 양 버튼 동일 */
font-weight: var(--fw-bd) !important; /* 600 (max 600 룰) */
letter-spacing: -0.005em !important;
/* center 정렬 보장 */
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
line-height: 1 !important;
min-width: 0 !important;
text-align: center !important;
}
.ds-market-info__actions .ds-btn .mi { font-size: 16px; }
.ds-market-info__offer-btn { width: 100%; }
.ds-market-info__cancel-btn[hidden] { display: none !important; }
.ds-market-info__cancel-btn {
border-color: color-mix(in srgb, var(--danger-500, #ef4444) 42%, var(--border-base)) !important;
color: var(--danger-500, #ef4444) !important;
background: var(--bg-card) !important;
}
.ds-market-info__cancel-btn:hover {
background: color-mix(in srgb, var(--danger-500, #ef4444) 7%, var(--bg-card)) !important;
}
/* Trust notes */
.ds-market-info__notes {
display: flex; flex-direction: column; gap: 6px;
padding-top: 12px;
border-top: 1px solid var(--border-subtle);
}
.ds-market-info__notes p {
display: flex; align-items: center; gap: 6px;
font-size: var(--fs-caption-sm); color: var(--fg-muted);
margin: 0;
}
.ds-market-info__notes .mi {
font-size: 14px; color: var(--fg-faint);
}
/* ==========================================================
=== MARKETPLACE-PAY === (Chunk 6 · Round 2-2)
gacha-pay 패턴 재활용 + 판매자 신뢰 박스 + 배송지 패널
롤백: 이 섹션 + marketplace-pay.html 삭제
========================================================== */
/* 카드 art thumbnail (단일 카드 스타일) */
.ds-pay-order__pack-thumb[data-kado-grade="mystic"] {
background:
radial-gradient(ellipse at center, rgba(255,255,255,0.2), transparent 70%),
linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
}
/* === 판매자 신뢰 박스 === */
.ds-market-pay-seller__box {
display: grid;
grid-template-columns: 56px 1fr;
gap: 14px;
padding: 18px 20px;
background: var(--bg-subtle);
border-radius: 12px;
}
.ds-market-pay-seller__avatar {
width: 56px; height: 56px;
border-radius: 50%;
background: var(--gray-950);
color: var(--gray-0);
display: grid; place-items: center;
font-size: 22px; font-weight: var(--fw-bk);
}
.ds-market-pay-seller__info {
display: flex; flex-direction: column; gap: 4px;
align-self: center;
grid-column: 2;
}
.ds-market-pay-seller__name {
font-size: var(--fs-body-md); font-weight: var(--fw-bk);
color: var(--fg-base);
margin: 0;
display: flex; align-items: center; gap: 8px;
flex-wrap: wrap;
}
.ds-market-pay-seller__badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px;
background: var(--gray-50);
color: var(--gray-400);
border-radius: var(--r-pill);
font-size: var(--fs-caption-sm); font-weight: var(--fw-bd);
}
.ds-market-pay-seller__badge .mi { font-size: 13px; }
.ds-market-pay-seller__stats {
font-size: var(--fs-caption); color: var(--fg-muted);
margin: 0;
}
.ds-market-pay-seller__stats strong {
color: var(--fg-base); font-weight: var(--fw-bk);
}
.ds-market-pay-seller__check {
grid-column: 1 / -1;
display: flex; flex-direction: column; gap: 4px;
padding-top: 12px;
margin-top: 4px;
border-top: 1px solid var(--border-subtle);
}
.ds-market-pay-seller__check-row {
display: flex; align-items: center; gap: 6px;
font-size: var(--fs-caption); color: var(--fg-subtle);
}
.ds-market-pay-seller__check-row .mi {
font-size: 16px;
color: var(--gray-600);
font-variation-settings: 'FILL' 1;
}
/* === 배송지 패널 === */
.ds-market-pay-address[hidden] { display: none; }
.ds-market-pay-address__box {
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 12px;
padding: 18px 20px;
display: flex; flex-direction: column; gap: 8px;
}
.ds-market-pay-address__row {
display: flex; align-items: baseline; gap: 14px;
font-size: var(--fs-body-sm);
}
.ds-market-pay-address__label {
width: 60px; flex-shrink: 0;
color: var(--fg-muted); font-weight: var(--fw-md);
font-size: var(--fs-caption);
}
.ds-market-pay-address__value {
color: var(--fg-base); font-weight: var(--fw-bd);
flex: 1;
}
.ds-market-pay-address__box .ds-btn {
align-self: flex-start;
margin-top: 4px;
}
/* hidden attr fix — flex display가 hidden을 override하지 않게 */
.ds-pay-summary__row[hidden] { display: none !important; }
/* ==========================================================
=== WALLET === (Chunk 7 · Round 3-1)
롤백: 이 섹션 + wallet.html 삭제
========================================================== */
/* === Hero (잔액 BIG) === */
.ds-wallet-hero {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px; align-items: center;
padding: 32px 0 20px;
}
@media (max-width: 767px) { .ds-wallet-hero { grid-template-columns: 1fr; } }
.ds-wallet-hero__main { display: flex; flex-direction: column; gap: 4px; }
.ds-wallet-hero__eyebrow {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
font-weight: var(--fw-md); letter-spacing: 0.05em;
text-transform: uppercase;
margin: 0;
}
.ds-wallet-hero__amount {
font-size: 44px; font-weight: var(--fw-bk);
letter-spacing: -0.026em; line-height: 1;
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
margin: 4px 0;
color: var(--fg-base);
}
.ds-wallet-hero__amount small {
font-size: var(--fs-h4); color: var(--fg-muted);
font-weight: var(--fw-md); margin-left: 4px;
}
.ds-wallet-hero__sub {
font-size: var(--fs-body-sm); color: var(--fg-muted);
margin: 0;
}
.ds-wallet-hero__actions {
display: flex; gap: 8px;
}
.ds-wallet-hero__btn {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 0 22px !important;
height: 48px !important;
}
.ds-wallet-hero__btn .mi { font-size: 18px; }
/* === Flow (월별 흐름 stat) === */
.ds-wallet-flow {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding-bottom: 24px;
border-bottom: 1px solid var(--border-base);
}
@media (max-width: 767px) { .ds-wallet-flow { grid-template-columns: 1fr; } }
.ds-wallet-flow__item {
display: flex; flex-direction: column; gap: 4px;
padding: 14px 16px;
background: var(--bg-subtle);
border-radius: 10px;
}
.ds-wallet-flow__label {
display: flex; align-items: center; gap: 4px;
font-size: var(--fs-caption); color: var(--fg-muted);
font-weight: var(--fw-md);
}
.ds-wallet-flow__label .mi { font-size: 14px; }
.ds-wallet-flow__value {
font-size: var(--fs-body-md); font-weight: var(--fw-bk);
color: var(--fg-base);
font-variant-numeric: tabular-nums;
letter-spacing: -0.008em;
}
.ds-wallet-flow__value small {
font-size: var(--fs-caption); color: var(--fg-muted);
font-weight: var(--fw-md);
}
.ds-wallet-flow__value--up { color: var(--success-700); }
/* === 거래 내역 === */
.ds-wallet-tx {
padding: 32px 0 64px;
}
.ds-wallet-tx__head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 16px;
flex-wrap: wrap; gap: 12px;
}
.ds-wallet-tx__title {
font-size: var(--fs-h3); font-weight: var(--fw-bk);
letter-spacing: -0.014em;
margin: 0;
}
.ds-wallet-tx__download {
display: inline-flex; align-items: center; gap: 4px;
padding: 6px 12px;
background: var(--bg-card);
border: 1px solid var(--border-strong);
border-radius: var(--r-pill);
font-size: var(--fs-caption); font-weight: var(--fw-bd);
color: var(--fg-base);
cursor: pointer;
}
.ds-wallet-tx__download .mi { font-size: 14px; }
.ds-wallet-tx__download:hover { border-color: var(--gray-950); }
/* v0.7 S5: 모바일에선 텍스트 숨기고 icon만 (data export는 desktop 친화 액션) */
@media (max-width: 767px) {
.ds-wallet-tx__download {
width: 36px; height: 36px;
padding: 0;
justify-content: center;
font-size: 0; /* 텍스트 숨김 */
gap: 0;
}
.ds-wallet-tx__download .mi { font-size: 18px; }
}
/* Filter chips */
.ds-wallet-tx__filter {
display: flex; gap: 6px; flex-wrap: wrap;
padding-bottom: 16px;
margin-bottom: 16px;
border-bottom: 1px solid var(--border-base);
}
.ds-wallet-tx__chip {
display: inline-flex; align-items: center; gap: 4px;
height: 32px; padding: 0 14px;
border-radius: var(--r-pill);
background: var(--bg-card);
border: 1px solid var(--border-strong);
font-size: var(--fs-caption); font-weight: var(--fw-bd);
color: var(--fg-subtle);
cursor: pointer;
}
.ds-wallet-tx__chip[aria-pressed="true"] {
background: var(--gray-950); color: var(--gray-0); border-color: var(--gray-950);
}
.ds-wallet-tx__chip-count {
font-size: var(--fs-caption-sm); font-weight: var(--fw-md);
opacity: 0.7;
font-variant-numeric: tabular-nums;
}
/* List */
.ds-wallet-tx__list {
list-style: none; padding: 0; margin: 0;
}
.ds-wallet-tx__date {
font-size: var(--fs-caption); color: var(--fg-muted);
font-weight: var(--fw-bd); letter-spacing: 0.02em;
padding: 16px 0 8px;
border-bottom: 1px solid var(--border-subtle);
margin-bottom: 0;
}
.ds-wallet-tx__date:first-child { padding-top: 8px; }
.ds-wallet-tx__row {
display: grid;
grid-template-columns: 40px 1fr auto;
gap: 14px; align-items: center;
padding: 14px 0;
border-bottom: 1px solid var(--border-subtle);
transition: var(--t-fast) ease-out;
}
.ds-wallet-tx__row:hover {
background: var(--bg-subtle);
margin-inline: -12px; padding-inline: 12px;
border-radius: 8px;
border-color: transparent;
}
.ds-wallet-tx__icon {
width: 40px; height: 40px;
display: grid; place-items: center;
border-radius: 10px;
flex-shrink: 0;
}
.ds-wallet-tx__icon[data-bg="charge"] { background: var(--gray-50); color: var(--gray-400); }
.ds-wallet-tx__icon[data-bg="gacha"] { background: rgba(15,17,22,0.06); color: var(--gray-950); }
.ds-wallet-tx__icon[data-bg="market"] { background: rgba(59,130,246,0.1); color: var(--common-500); }
.ds-wallet-tx__icon[data-bg="withdraw"] { background: rgba(232,90,71,0.1); color: var(--danger-600); }
.ds-wallet-tx__icon .mi { font-size: 18px; color: inherit; }
.ds-wallet-tx__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-wallet-tx__title-row {
font-size: var(--fs-body-sm); font-weight: var(--fw-bd);
color: var(--fg-base);
margin: 0;
}
.ds-wallet-tx__meta {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
margin: 0;
}
.ds-wallet-tx__amount {
font-size: var(--fs-body-md); font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
letter-spacing: -0.008em;
color: var(--fg-base);
text-align: right;
}
.ds-wallet-tx__amount small {
font-size: var(--fs-caption); color: var(--fg-muted);
font-weight: var(--fw-md); margin-left: 1px;
}
.ds-wallet-tx__amount--in { color: var(--success-700); }
.ds-wallet-tx__amount--out { color: var(--fg-base); }
.ds-wallet-tx__sign { margin-right: 1px; }
.ds-wallet-tx__more {
display: flex; align-items: center; justify-content: center; gap: 4px;
width: 100%;
padding: 12px;
margin-top: 16px;
background: var(--bg-card);
border: 1px solid var(--border-strong);
border-radius: 12px;
font-size: var(--fs-body-sm); font-weight: var(--fw-bd);
color: var(--fg-base);
cursor: pointer;
}
.ds-wallet-tx__more:hover { border-color: var(--gray-950); }
.ds-wallet-tx__more .mi { font-size: 18px; }
/* === Charge Modal === */
.ds-charge-presets {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 16px;
}
@media (max-width: 449px) { .ds-charge-presets { grid-template-columns: repeat(2, 1fr); } }
.ds-charge-preset {
padding: 14px 8px;
background: var(--bg-card);
border: 1.5px solid var(--border-base);
border-radius: 10px;
font-size: var(--fs-caption); font-weight: var(--fw-bd);
color: var(--fg-base);
cursor: pointer;
font-variant-numeric: tabular-nums;
transition: var(--t-fast) ease-out;
}
.ds-charge-preset:hover { border-color: var(--gray-500); }
.ds-charge-preset[aria-checked="true"] {
background: var(--gray-950);
color: var(--gray-0);
border-color: var(--gray-950);
}
.ds-charge-custom { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.ds-charge-custom__label {
font-size: var(--fs-caption); color: var(--fg-muted);
font-weight: var(--fw-md); letter-spacing: 0.04em;
text-transform: uppercase;
}
.ds-charge-custom__input {
display: flex; align-items: center; gap: 8px;
padding: 12px 14px;
background: var(--bg-subtle);
border-radius: 10px;
border: 1.5px solid transparent;
}
.ds-charge-custom__input:focus-within { border-color: var(--gray-950); background: var(--bg-card); }
.ds-charge-custom__input input {
flex: 1; border: none; background: transparent;
font-size: var(--fs-body-md); font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums;
outline: none;
color: var(--fg-base);
}
.ds-charge-custom__input span {
font-size: var(--fs-body-sm); color: var(--fg-muted);
font-weight: var(--fw-md);
}
/* v0.7 T2 보너스: 결제 통화 선택 (segmented) */
.ds-charge-currency {
display: flex; align-items: center; flex-wrap: wrap;
gap: 10px 14px;
margin: 14px 0 12px;
}
.ds-charge-currency__label {
font-size: var(--fs-caption); font-weight: var(--fw-bd);
letter-spacing: 0.04em;
color: var(--fg-muted);
text-transform: uppercase;
}
.ds-charge-currency__options {
display: flex; gap: 6px;
flex: 1; min-width: 0;
}
.ds-charge-currency__option {
flex: 1; min-width: 0;
display: inline-flex; align-items: center; justify-content: center;
gap: 4px;
padding: 8px 10px;
font-size: 13px; font-weight: var(--fw-md);
color: var(--fg-subtle);
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 8px;
cursor: pointer;
font-family: inherit;
font-variant-numeric: tabular-nums;
transition: all 0.12s ease-out;
}
.ds-charge-currency__option strong {
font-size: 15px; font-weight: var(--fw-bk);
color: var(--fg-base);
}
.ds-charge-currency__option:hover { border-color: var(--border-strong); }
.ds-charge-currency__option[aria-checked="true"] {
background: var(--gray-950); color: var(--gray-0);
border-color: var(--gray-950);
}
.ds-charge-currency__option[aria-checked="true"] strong { color: var(--gray-0); }
:root[data-theme="dark"] .ds-charge-currency__option[aria-checked="true"] {
background: var(--gray-50); color: var(--gray-950); border-color: var(--gray-50);
}
:root[data-theme="dark"] .ds-charge-currency__option[aria-checked="true"] strong { color: var(--gray-950); }
.ds-charge-summary {
background: var(--bg-subtle);
border-radius: 10px;
padding: 14px 16px;
display: flex; flex-direction: column; gap: 6px;
margin-bottom: 4px;
}
.ds-charge-summary .row {
display: flex; justify-content: space-between;
font-size: var(--fs-caption);
}
.ds-charge-summary .row:not(.total) span:first-child { color: var(--fg-muted); }
.ds-charge-summary .row:not(.total) span:last-child {
color: var(--fg-base); font-weight: var(--fw-bd);
font-variant-numeric: tabular-nums;
}
.ds-charge-summary .row.total {
padding-top: 8px;
border-top: 1px solid var(--border-base);
margin-top: 4px;
}
.ds-charge-summary .row.total span:first-child {
color: var(--fg-base); font-weight: var(--fw-bd);
}
.ds-charge-summary .row.total span:last-child {
color: var(--fg-base); font-weight: var(--fw-bk);
font-size: var(--fs-body-sm);
font-variant-numeric: tabular-nums;
}
.ds-charge-payment {
width: min(760px, calc(100vw - 32px));
max-width: 760px;
max-height: min(88vh, 900px);
display: flex;
flex-direction: column;
overflow: hidden;
padding: 0;
}
.ds-charge-payment .ds-modal__head {
align-items: flex-start;
flex-shrink: 0;
margin: 0;
padding: 48px 48px 18px;
position: relative;
}
.ds-charge-payment .ds-modal__close {
top: 40px;
right: 40px;
}
.ds-charge-payment__intro {
margin-top: 8px;
margin-bottom: 0;
line-height: 1.55;
}
.ds-charge-payment__body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
margin-right: 8px;
padding: 0 40px 18px 48px;
scrollbar-gutter: stable;
-webkit-overflow-scrolling: touch;
mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 22px), transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 22px), transparent 100%);
}
.ds-charge-payment__body::-webkit-scrollbar {
width: 8px;
}
.ds-charge-payment__body::-webkit-scrollbar-track {
background: transparent;
}
.ds-charge-payment__body::-webkit-scrollbar-thumb {
background: var(--gray-300);
border-radius: var(--r-pill);
}
.ds-charge-payment__section {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 18px;
}
.ds-charge-payment__body > .ds-charge-payment__section:first-child {
margin-top: 0;
}
.ds-charge-payment__label {
margin: 0;
font-size: var(--fs-body-sm);
font-weight: var(--fw-bk);
letter-spacing: -0.006em;
color: var(--fg-base);
}
.ds-charge-payment__methods {
gap: 10px;
grid-template-columns: 1fr !important;
}
.ds-charge-payment__method {
min-height: 72px;
grid-template-columns: 48px minmax(0, 1fr) 20px;
padding: 14px 18px;
}
.ds-charge-payment__method .ds-pay-method__icon {
width: 48px;
height: 48px;
border-radius: 12px;
}
.ds-charge-payment__method .ds-pay-method__body {
gap: 4px;
}
.ds-charge-payment__method .ds-pay-method__name {
white-space: normal;
}
.ds-charge-payment__method .ds-pay-method__sub {
line-height: 1.45;
white-space: normal;
}
.ds-charge-payment__summary {
margin: 18px 0 4px;
gap: 8px;
}
.ds-charge-payment__summary .row.total span:last-child {
font-size: var(--fs-h4);
}
.ds-charge-payment__terms {
margin-top: 12px;
}
.ds-charge-payment__actions {
display: grid;
grid-template-columns: minmax(160px, 1fr) minmax(180px, 1.2fr);
gap: 12px;
flex-shrink: 0;
position: static;
bottom: auto;
margin: 0;
padding: 18px 48px 32px;
border-top: 1px solid var(--border-base);
background: var(--bg-card);
}
.ds-charge-payment__actions .ds-btn {
height: 52px;
}
@media (max-width: 599px) {
.ds-charge-payment {
width: min(100vw - 20px, 520px);
max-height: 92vh;
padding: 0;
}
.ds-charge-payment .ds-modal__head {
padding: 28px 18px 14px;
}
.ds-charge-payment .ds-modal__close {
top: 16px;
right: 14px;
}
.ds-charge-payment__body {
margin-right: 6px;
padding: 0 12px 14px 18px;
}
.ds-charge-payment__method {
grid-template-columns: 48px minmax(0, 1fr) 20px;
min-height: 72px;
padding: 14px;
}
.ds-charge-payment__actions {
grid-template-columns: 1fr;
padding: 16px 18px max(18px, env(safe-area-inset-bottom));
}
}
/* ==========================================================
=== GRADING-HISTORY === (Chunk 8 · Round 3-2)
롤백: 이 섹션 + grading-history.html 삭제
========================================================== */
/* Header */
.ds-grading-header {
display: grid;
grid-template-columns: 1fr auto;
gap: 16px; align-items: center;
padding: 32px 0 20px;
}
@media (max-width: 599px) { .ds-grading-header { grid-template-columns: 1fr; } }
.ds-grading-header__main { display: flex; flex-direction: column; gap: 4px; }
.ds-grading-header__title {
font-size: 28px; font-weight: var(--fw-bk);
letter-spacing: -0.018em; line-height: 1.2;
margin: 0;
}
.ds-grading-header__sub {
font-size: var(--fs-body-sm); color: var(--fg-muted);
margin: 0;
}
.ds-grading-header .ds-btn {
display: inline-flex !important;
align-items: center !important; gap: 6px !important;
height: 48px !important; padding: 0 22px !important;
}
.ds-grading-header .ds-btn .mi { font-size: 18px; }
/* Stats */
.ds-grading-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
padding-bottom: 24px;
border-bottom: 1px solid var(--border-base);
}
@media (max-width: 1023px) { .ds-grading-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .ds-grading-stats { grid-template-columns: 1fr; } }
.ds-grading-stat {
display: flex; flex-direction: column; gap: 4px;
padding: 16px 18px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 12px;
}
.ds-grading-stat__label {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
font-weight: var(--fw-md); letter-spacing: 0.04em;
text-transform: uppercase;
}
.ds-grading-stat__value {
font-size: 22px; font-weight: var(--fw-bk);
letter-spacing: -0.014em; line-height: 1.1;
color: var(--fg-base);
font-variant-numeric: tabular-nums;
}
.ds-grading-stat__value small {
font-size: var(--fs-body-sm); color: var(--fg-muted);
font-weight: var(--fw-md);
}
.ds-grading-stat__value--up { color: var(--success-700); }
.ds-grading-stat__delta {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
}
/* v0.7: 신청 종류 카테고리 — 등급 대행 / eBay 대행 (준비중) */
.ds-grading-categories {
display: grid; grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 24px;
}
.ds-grading-category {
display: flex; align-items: center; gap: 12px;
padding: 16px 20px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 12px;
text-align: left;
font: inherit; cursor: pointer;
transition: var(--t-fast) ease-out;
position: relative;
}
.ds-grading-category:hover { border-color: var(--border-strong); }
.ds-grading-category.is-active {
background: var(--gray-950); color: var(--gray-0);
border-color: var(--gray-950);
}
:root[data-theme="dark"] .ds-grading-category.is-active { background: var(--gray-50); color: var(--gray-950); border-color: var(--gray-50); }
.ds-grading-category--soon { cursor: not-allowed; opacity: 0.78; }
.ds-grading-category--soon:hover { border-color: var(--border-base); }
.ds-grading-category__icon {
width: 36px; height: 36px;
display: grid; place-items: center;
background: var(--bg-subtle); border-radius: 8px;
font-size: 20px;
flex-shrink: 0;
}
.ds-grading-category.is-active .ds-grading-category__icon {
background: rgba(255,255,255,0.12);
}
:root[data-theme="dark"] .ds-grading-category.is-active .ds-grading-category__icon {
background: rgba(0,0,0,0.10);
}
.ds-grading-category__label {
flex: 1;
font-weight: var(--fw-bd);
font-size: var(--fs-body-md);
letter-spacing: -0.005em;
}
.ds-grading-category__count {
font-size: var(--fs-caption-md);
color: var(--fg-muted);
font-variant-numeric: tabular-nums;
}
.ds-grading-category.is-active .ds-grading-category__count { color: rgba(255,255,255,0.7); }
:root[data-theme="dark"] .ds-grading-category.is-active .ds-grading-category__count { color: rgba(0,0,0,0.55); }
.ds-grading-category__chip {
display: inline-flex; align-items: center;
height: 22px; padding: 0 10px;
background: var(--bg-muted);
color: var(--fg-muted);
border-radius: var(--r-pill);
font-size: var(--fs-caption-sm);
font-weight: var(--fw-bd);
}
@media (max-width: 767px) {
.ds-grading-categories { grid-template-columns: 1fr; gap: 8px; }
}
/* Tabs */
.ds-grading-tabs {
display: flex; gap: 4px;
padding: 16px 0 12px;
border-bottom: 1px solid var(--border-base);
}
.ds-grading-tab {
display: inline-flex; align-items: center; gap: 6px;
padding: 10px 16px;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
font-size: var(--fs-body-sm); font-weight: var(--fw-bd);
color: var(--fg-muted);
cursor: pointer;
transition: var(--t-fast) ease-out;
}
.ds-grading-tab:hover { color: var(--fg-base); }
.ds-grading-tab[aria-selected="true"] {
color: var(--fg-base);
border-bottom-color: var(--gray-950);
}
:root[data-theme="dark"] .ds-grading-tab[aria-selected="true"] { border-bottom-color: var(--gray-50); }
.ds-grading-tab__count {
display: inline-flex; align-items: center;
height: 18px; padding: 0 6px;
border-radius: var(--r-pill);
background: var(--bg-subtle);
font-size: var(--fs-caption-sm); font-weight: var(--fw-md);
font-variant-numeric: tabular-nums;
}
/* List item */
.ds-grading-list {
display: flex; flex-direction: column; gap: 16px;
padding: 24px 0 16px;
}
.ds-grading-item {
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 12px;
padding: 20px;
display: flex; flex-direction: column; gap: 16px;
}
.ds-grading-item__head {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 12px; flex-wrap: wrap;
}
.ds-grading-item__card {
display: flex; gap: 12px; align-items: center;
}
.ds-grading-item__thumb {
width: 48px; aspect-ratio: 5/7;
border-radius: 6px;
border: 1px solid var(--border-base);
}
.ds-grading-item__thumb[data-kado-grade="mystic"] {
background: radial-gradient(ellipse at center, rgba(255,255,255,0.2), transparent 70%), linear-gradient(180deg, var(--gray-100), var(--gray-200));
}
.ds-grading-item__thumb[data-kado-grade="legend"] {
background: radial-gradient(ellipse at center, rgba(245,197,24,0.2), transparent 70%), linear-gradient(180deg, var(--gray-100), var(--gray-200));
}
.ds-grading-item__thumb[data-kado-grade="epic"] {
background: radial-gradient(ellipse at center, rgba(139,92,246,0.18), transparent 70%), linear-gradient(180deg, var(--gray-100), var(--gray-200));
}
.ds-grading-item__thumb[data-kado-grade="rare"] {
background: radial-gradient(ellipse at center, rgba(239,68,68,0.16), transparent 70%), linear-gradient(180deg, var(--gray-100), var(--gray-200));
}
.ds-grading-item__thumb[data-kado-grade="common"] {
background: radial-gradient(ellipse at center, rgba(59,130,246,0.14), transparent 70%), linear-gradient(180deg, var(--gray-100), var(--gray-200));
}
.ds-grading-item__info { display: flex; flex-direction: column; gap: 2px; }
.ds-grading-item__name {
font-size: var(--fs-body-md); font-weight: var(--fw-bk);
color: var(--fg-base);
margin: 0;
}
.ds-grading-item__name span {
font-size: var(--fs-caption); color: var(--fg-muted);
font-weight: var(--fw-md); margin-left: 6px;
}
.ds-grading-item__meta {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
margin: 0;
}
.ds-grading-item__meta strong { color: var(--fg-base); font-weight: var(--fw-bd); }
.ds-grading-item__chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 6px 12px;
border-radius: var(--r-pill);
font-size: var(--fs-caption); font-weight: var(--fw-bk);
letter-spacing: 0.02em;
flex-shrink: 0;
}
.ds-grading-item__chip[data-status="receipt"] { background: var(--bg-subtle); color: var(--fg-base); }
.ds-grading-item__chip[data-status="check"] { background: rgba(245,197,24,0.15); color: var(--legendary-700); }
.ds-grading-item__chip[data-status="grading"] { background: var(--gray-50); color: var(--gray-400); }
.ds-grading-item__chip[data-status="done"] { background: rgba(45,179,111,0.12); color: var(--success-700); }
.ds-grading-item__chip .mi { font-size: 14px; }
.ds-grading-item__chip[data-status="done"] .mi { font-variation-settings: 'FILL' 1; }
/* Timeline */
.ds-grading-timeline {
list-style: none; padding: 16px 0; margin: 0;
display: flex; gap: 0;
background: var(--bg-subtle);
border-radius: 10px;
padding: 18px 16px;
position: relative;
}
.ds-grading-timeline__step {
flex: 1;
display: flex; flex-direction: column; align-items: center; gap: 6px;
position: relative;
text-align: center;
}
.ds-grading-timeline__step:not(:last-child)::after {
content: '';
position: absolute;
top: 11px;
left: calc(50% + 12px);
right: calc(-50% + 12px);
height: 2px;
background: var(--gray-200);
z-index: 0;
}
/* 모바일 (768px 이하) — 테이블형 깔끔한 row 디자인 (3-column grid) */
@media (max-width: 768px) {
.ds-grading-timeline {
flex-direction: column;
gap: 0;
padding: 4px 16px;
background: var(--bg-subtle);
border-radius: 12px;
}
.ds-grading-timeline__step {
display: grid;
grid-template-columns: 28px 1fr auto;
column-gap: 14px;
align-items: center;
min-height: 44px;
padding: 0;
text-align: left;
border-bottom: 1px solid var(--border-subtle);
flex: 0 0 auto;
}
.ds-grading-timeline__step:last-child {
border-bottom: none;
}
/* connector 제거 — border-bottom으로 row 분리 */
.ds-grading-timeline__step:not(:last-child)::after {
display: none;
}
.ds-grading-timeline__num {
width: 24px; height: 24px;
border-radius: 50%;
background: var(--gray-200);
color: var(--fg-muted);
display: grid; place-items: center;
font-size: 11px; font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums;
}
.ds-grading-timeline__step.is-done .ds-grading-timeline__num,
.ds-grading-timeline__step.is-current .ds-grading-timeline__num {
background: var(--gray-900);
color: var(--gray-0);
}
.ds-grading-timeline__label {
font-size: var(--fs-body-sm);
font-weight: var(--fw-bd);
color: var(--fg-base);
margin: 0;
}
.ds-grading-timeline__date {
margin-left: 0;
font-size: var(--fs-caption-sm);
color: var(--fg-muted);
font-variant-numeric: tabular-nums;
}
}
.ds-grading-timeline__step.is-done::after { background: var(--gray-700); }
.ds-grading-timeline__dot {
width: 22px; height: 22px;
border-radius: 50%;
background: var(--gray-200);
border: 2px solid var(--gray-200);
display: grid; place-items: center;
position: relative; z-index: 1;
flex-shrink: 0;
}
.ds-grading-timeline__step.is-done .ds-grading-timeline__dot {
background: var(--gray-700);
border-color: var(--gray-700);
}
.ds-grading-timeline__step.is-done .ds-grading-timeline__dot .mi {
color: white; font-size: 14px;
}
.ds-grading-timeline__step.is-current .ds-grading-timeline__dot {
background: var(--gray-950);
border-color: var(--gray-950);
box-shadow: 0 0 0 4px rgba(15,17,22,0.1);
}
.ds-grading-timeline__step.is-current .ds-grading-timeline__dot::after {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: white;
}
.ds-grading-timeline__label {
font-size: var(--fs-caption); font-weight: var(--fw-bd);
color: var(--fg-muted);
}
.ds-grading-timeline__step.is-done .ds-grading-timeline__label,
.ds-grading-timeline__step.is-current .ds-grading-timeline__label {
color: var(--fg-base);
}
.ds-grading-timeline__date {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
font-variant-numeric: tabular-nums;
}
/* === Timeline GUIDE variant (grading.html 안내 페이지에서 재사용) === */
.ds-grading-guide {
margin-top: 28px;
padding-top: 22px;
border-top: 1px solid var(--border-base);
}
.ds-grading-guide__head {
display: flex; justify-content: space-between; align-items: center;
gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.ds-grading-guide__intro {
font-size: var(--fs-body-sm); color: var(--fg-muted);
margin: 0;
}
.ds-grading-guide__intro strong { color: var(--fg-base); font-weight: var(--fw-bd); }
.ds-grading-guide__hint {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px;
background: var(--mystic-100, rgba(255,255,255,0.12));
color: var(--gray-600);
border-radius: var(--r-pill);
font-size: var(--fs-caption-xs); font-weight: var(--fw-bk);
letter-spacing: 0.04em; text-transform: uppercase;
}
.ds-grading-guide__hint .mi { font-size: 14px; }
/* Timeline guide variant — 검정 배경 + 숫자 dot */
/* surface T2 — 검정 → 옅은 회색으로 톤 다운 (페이지 climax는 hero 1곳만 검정) */
.ds-grading-timeline--guide {
background: var(--bg-subtle);
padding: 24px 20px;
gap: 0;
border: 1px solid var(--border-subtle);
}
.ds-grading-timeline--guide .ds-grading-timeline__step { gap: 8px; }
.ds-grading-timeline--guide .ds-grading-timeline__num {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--gray-950);
color: var(--gray-0);
display: grid; place-items: center;
font-size: var(--fs-caption); font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums;
position: relative; z-index: 1;
flex-shrink: 0;
}
:root[data-theme="dark"] .ds-grading-timeline--guide .ds-grading-timeline__num {
background: var(--gray-50); color: var(--gray-950);
}
.ds-grading-timeline--guide .ds-grading-timeline__step:not(:last-child)::after {
top: 14px;
left: calc(50% + 14px);
right: calc(-50% + 14px);
background: var(--border-base);
}
.ds-grading-timeline--guide .ds-grading-timeline__label {
color: var(--fg-base);
font-size: var(--fs-caption); font-weight: var(--fw-bd);
}
.ds-grading-timeline--guide .ds-grading-timeline__date {
color: var(--fg-muted);
font-size: var(--fs-caption-xs);
}
:root[data-theme="dark"] .ds-grading-timeline--guide .ds-grading-timeline__step:not(:last-child)::after {
background: rgba(0,0,0,0.16);
}
@media (max-width: 599px) {
.ds-grading-timeline--guide {
overflow-x: auto;
flex-wrap: nowrap;
}
.ds-grading-timeline--guide .ds-grading-timeline__step {
min-width: 88px;
}
}
/* Item notes */
.ds-grading-item__notes { padding: 0; }
.ds-grading-item__note {
display: flex; align-items: center; gap: 8px;
font-size: var(--fs-caption); color: var(--fg-subtle);
margin: 0;
padding: 10px 14px;
background: var(--bg-subtle);
border-radius: 8px;
}
.ds-grading-item__note .mi { font-size: 16px; color: var(--fg-muted); }
/* Result diff (완료 카드) */
.ds-grading-result {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 16px; align-items: stretch;
padding: 20px 24px;
background: var(--bg-subtle);
border-radius: 10px;
}
.ds-grading-result__col {
display: flex; flex-direction: column; gap: 4px;
}
.ds-grading-result__label {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
font-weight: var(--fw-md); letter-spacing: 0.04em;
text-transform: uppercase;
}
.ds-grading-result__value {
font-size: 22px; font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums;
letter-spacing: -0.014em;
color: var(--fg-base);
}
.ds-grading-result__sub {
font-size: var(--fs-caption); color: var(--fg-muted);
}
.ds-grading-result__sub--up { color: var(--success-700); font-weight: var(--fw-bk); }
.ds-grading-result__col--after .ds-grading-result__value { color: var(--success-700); }
.ds-grading-result__arrow {
display: grid; place-items: center;
color: var(--fg-faint);
}
.ds-grading-result__arrow .mi { font-size: 24px; }
/* Help */
.ds-grading-help {
background: var(--bg-subtle);
border-radius: 12px;
padding: 18px 24px;
margin: 24px 0 64px;
}
.ds-grading-help__title {
display: flex; align-items: center; gap: 6px;
font-size: var(--fs-body-sm); font-weight: var(--fw-bk);
color: var(--fg-base);
margin: 0 0 8px;
}
.ds-grading-help__title .mi {
font-size: 16px; color: var(--fg-muted);
font-variation-settings: 'FILL' 1;
}
.ds-grading-help__steps {
margin: 0; padding: 0 0 0 24px;
display: flex; flex-direction: column; gap: 4px;
font-size: var(--fs-caption); color: var(--fg-subtle);
line-height: 1.6;
}
.ds-grading-help__steps li strong { color: var(--fg-base); font-weight: var(--fw-bd); margin-right: 4px; }
/* ==========================================================
=== SETTINGS === (Chunk 9 · Round 4-2)
롤백: 이 섹션 + settings.html 삭제
========================================================== */
.ds-settings-title {
font-size: 28px; font-weight: var(--fw-bk);
letter-spacing: -0.018em; line-height: 1.2;
margin: 24px 0 28px;
}
.ds-settings-grid {
display: grid;
grid-template-columns: 220px 1fr;
gap: 32px;
padding-bottom: 64px;
align-items: start;
}
@media (max-width: 1023px) {
.ds-settings-grid { grid-template-columns: 1fr; }
}
/* Sidebar nav */
.ds-settings-nav {
position: sticky; top: calc(var(--gnb-h) + env(safe-area-inset-top, 0px) + 24px);
align-self: start;
}
.ds-settings-nav ul {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 2px;
}
.ds-settings-nav a {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
font-size: var(--fs-body-sm); font-weight: var(--fw-md);
color: var(--fg-subtle);
text-decoration: none;
border-radius: 8px;
transition: var(--t-fast) ease-out;
}
.ds-settings-nav a:hover { background: var(--bg-subtle); color: var(--fg-base); }
.ds-settings-nav a.is-active {
background: var(--gray-950); color: var(--gray-0);
}
:root[data-theme="dark"] .ds-settings-nav a.is-active {
background: var(--gray-50); color: var(--gray-950);
}
.ds-settings-nav a .mi { font-size: 18px; }
/* v0.8 (사장 요청): 모바일/태블릿 — 탭 navigation 숨기고 모든 section 을
수직으로 죽 펼침. 이전 단일-section view 는 오히려 불편하다는 피드백.
섹션 타이틀은 각 카드 위에 그대로 노출되어 탐색 가능. */
@media (max-width: 1023px) {
.ds-settings-nav { display: none; }
.ds-settings-grid { grid-template-columns: minmax(0, 1fr); }
.ds-settings-content { min-width: 0; }
.ds-settings-section { min-width: 0; }
.ds-settings-row { min-width: 0; }
.ds-settings-row__main { min-width: 0; }
/* 모든 section 항상 노출 — data-active-section 속성 무시. */
.ds-settings-grid[data-active-section] .ds-settings-section { display: block; }
}
/* Content */
.ds-settings-content {
display: flex; flex-direction: column; gap: 32px;
}
.ds-settings-section {
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 12px;
/* dropdown 같은 floating UI가 잘리지 않도록 overflow visible */
overflow: visible;
}
.ds-settings-section__title {
font-size: var(--fs-h4); font-weight: var(--fw-bk);
letter-spacing: -0.012em;
padding: 18px 24px;
border-bottom: 1px solid var(--border-base);
margin: 0;
background: var(--bg-subtle);
}
.ds-settings-section__rows { display: flex; flex-direction: column; }
.ds-settings-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 16px; align-items: center;
padding: 18px 24px;
border-bottom: 1px solid var(--border-subtle);
}
.ds-settings-row:last-child { border-bottom: none; }
.ds-settings-row__main {
display: flex; flex-direction: column; gap: 2px;
min-width: 0;
}
.ds-settings-row__label {
font-size: var(--fs-body-sm); font-weight: var(--fw-bd);
color: var(--fg-base);
}
/* v0.7 S4: alias chip (집 / 회사 등) */
.ds-settings-row__alias {
display: inline-flex; align-items: center;
height: 18px; padding: 0 7px;
margin-left: 6px;
background: var(--bg-muted); color: var(--fg-subtle);
border-radius: var(--r-pill);
font-size: 10px; font-weight: var(--fw-bd);
letter-spacing: 0.04em;
vertical-align: middle;
}
:root[data-theme="dark"] .ds-settings-row__alias { background: var(--gray-800); color: var(--gray-300); }
/* empty state row */
.ds-settings-row--empty .ds-settings-row__label { color: var(--fg-muted); font-weight: var(--fw-md); }
.ds-settings-row__sub {
font-size: var(--fs-caption); color: var(--fg-muted);
}
.ds-settings-row__action {
display: flex; align-items: center; gap: 12px;
}
/* Notification channel chips (per-category email / push / SMS) */
.ds-settings-section__hint {
padding: 14px 24px 2px;
margin: 0;
font-size: var(--fs-caption);
color: var(--fg-muted);
line-height: 1.55;
}
.ds-settings-row--notif { align-items: center; }
.ds-notif-channels {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-end;
}
.ds-notif-channel {
display: inline-flex;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.ds-notif-channel input {
position: absolute;
width: 1px; height: 1px;
opacity: 0;
pointer-events: none;
}
.ds-notif-channel span {
display: inline-flex;
align-items: center;
gap: 5px;
height: 32px;
padding: 0 14px;
border: 1px solid var(--border-base);
border-radius: var(--r-pill);
background: var(--bg-base, #fff);
color: var(--fg-muted);
font-size: var(--fs-caption);
font-weight: var(--fw-bd);
white-space: nowrap;
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ds-notif-channel input:checked + span {
border-color: var(--gray-950);
background: var(--gray-950);
color: #fff;
}
.ds-notif-channel input:focus-visible + span {
outline: 2px solid var(--gray-950);
outline-offset: 2px;
}
.ds-notif-channel--soon { cursor: not-allowed; }
.ds-notif-channel--soon span { opacity: .45; }
:root[data-theme="dark"] .ds-notif-channel input:checked + span {
border-color: var(--white-a200, #fff);
background: #fff;
color: var(--gray-950);
}
@media (max-width: 767px) {
.ds-settings-row--notif {
grid-template-columns: 1fr;
align-items: stretch;
}
.ds-notif-channels { justify-content: flex-start; }
}
.ds-settings-row__value {
font-size: var(--fs-body-sm); color: var(--fg-base);
font-weight: var(--fw-md);
}
/* Avatar */
.ds-settings-avatar {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--gray-950);
color: var(--gray-0);
display: grid; place-items: center;
font-size: 16px; font-weight: var(--fw-bk);
}
.ds-profile-edit {
gap: 16px;
}
.ds-profile-edit__preview {
width: 88px;
height: 88px;
border-radius: 50%;
background: var(--gray-950);
color: var(--gray-0);
display: grid;
place-items: center;
font-size: 32px;
font-weight: var(--fw-bk);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
box-shadow: inset 0 0 0 1px var(--white-a300), 0 14px 28px rgba(10, 12, 16, 0.16);
}
.ds-profile-edit__hint {
margin: -4px 0 0;
font-size: var(--fs-caption);
color: var(--fg-muted);
}
.ds-profile-edit__clear {
align-self: flex-start;
}
/* Toggle switch */
.ds-toggle {
position: relative;
display: inline-block;
width: 44px; height: 26px;
flex-shrink: 0;
}
.ds-toggle input {
appearance: none; -webkit-appearance: none;
width: 100%; height: 100%;
margin: 0; padding: 0;
cursor: pointer;
opacity: 0;
position: absolute; inset: 0;
z-index: 1;
}
.ds-toggle__slider {
position: absolute; inset: 0;
background: var(--gray-300);
border-radius: var(--r-pill);
transition: var(--t-fast) ease-out;
pointer-events: none;
}
.ds-toggle__slider::before {
content: '';
position: absolute;
top: 3px; left: 3px;
width: 20px; height: 20px;
border-radius: 50%;
background: white;
box-shadow: 0 1px 3px rgba(15,17,22,0.2);
transition: var(--t-fast) ease-out;
}
.ds-toggle input:checked + .ds-toggle__slider {
background: var(--gray-950);
}
:root[data-theme="dark"] .ds-toggle input:checked + .ds-toggle__slider {
background: var(--gray-50);
}
.ds-toggle input:checked + .ds-toggle__slider::before {
transform: translateX(18px);
}
/* Select */
.ds-settings-select {
height: 36px;
padding: 0 32px 0 14px;
border: 1px solid var(--border-strong);
border-radius: 8px;
background: var(--bg-card);
font-size: var(--fs-body-sm); font-weight: var(--fw-md);
color: var(--fg-base);
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 12px;
min-width: 160px;
}
/* Danger section — title은 중립, 실제 destructive action(row/button)만 red */
.ds-settings-row--danger {
background: rgba(232,90,71,0.04);
}
.ds-settings-row__danger-btn {
background: transparent !important;
color: var(--danger-600) !important;
border: 1px solid var(--danger-300) !important;
padding: 6px 14px !important;
height: 32px !important;
font-size: var(--fs-caption) !important;
font-weight: var(--fw-bd) !important;
border-radius: var(--r-pill) !important;
cursor: pointer;
}
.ds-settings-row__danger-btn:hover {
background: var(--danger-500) !important;
color: white !important;
border-color: var(--danger-500) !important;
}
/* ==========================================================
=== DROPDOWN === Custom select (시스템 select 대체 — 디자인 일관성)
사용:
JS: trigger 클릭 시 .is-open 토글, option 클릭 시 selection 변경
========================================================== */
.ds-dropdown {
position: relative;
display: inline-block;
}
.ds-dropdown__trigger {
display: inline-flex; align-items: center; gap: 6px;
height: 36px;
padding: 0 10px 0 14px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: var(--r-pill);
font-size: var(--fs-caption); font-weight: var(--fw-bd);
color: var(--fg-base);
cursor: pointer;
transition: border-color var(--t-fast) ease-out, background var(--t-fast) ease-out;
}
.ds-dropdown__trigger:hover { border-color: var(--gray-500); }
.ds-dropdown__trigger[aria-expanded="true"] {
border-color: var(--gray-950);
background: var(--bg-subtle);
}
:root[data-theme="dark"] .ds-dropdown__trigger[aria-expanded="true"] {
border-color: var(--gray-50);
}
.ds-dropdown__chev {
font-size: 18px;
transition: transform var(--t-fast) ease-out;
}
.ds-dropdown.is-open .ds-dropdown__chev { transform: rotate(180deg); }
.ds-dropdown__menu {
position: absolute;
top: calc(100% + 6px); right: 0;
min-width: 180px;
list-style: none; margin: 0; padding: 6px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 10px;
box-shadow: var(--shadow-3);
/* tooltip 수준으로 — 어떤 stacking context 안에서도 위에 떠야 함 */
z-index: 9999;
display: none;
}
/* dropdown이 열리면 부모 stacking context도 위로 끌어올림 */
.ds-dropdown.is-open { z-index: 9999; position: relative; }
.ds-dropdown.is-open .ds-dropdown__menu { display: block; }
.ds-dropdown__option {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding: 8px 12px;
border-radius: 6px;
font-size: var(--fs-caption);
font-weight: var(--fw-md);
color: var(--fg-base);
cursor: pointer;
transition: background var(--t-fast) ease-out;
white-space: nowrap;
}
.ds-dropdown__option:hover { background: var(--bg-subtle); }
.ds-dropdown__option.is-selected {
background: var(--bg-subtle);
font-weight: var(--fw-bk);
}
.ds-dropdown__option.is-selected::after {
content: '';
width: 6px; height: 10px;
border-right: 2px solid var(--fg-base);
border-bottom: 2px solid var(--fg-base);
transform: rotate(45deg);
margin-bottom: 2px;
}
/* ==========================================================
=== STATES === Empty / Loading / Error
사용:
?state=empty 같은 URL param으로 토글 (각 페이지 JS에서 처리)
일반 상태는 data-state 없음 (default)
========================================================== */
/* 기본 .ds-empty는 위 2641 line에 정의돼 있음 — 확장 사용 */
.ds-empty__icon-ball {
width: 56px; height: 56px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--bg-card);
border-radius: 50%;
color: var(--fg-muted);
margin-bottom: 4px;
}
.ds-empty__icon-ball .mi { font-size: 28px; }
.ds-empty__title {
font-size: 18px; font-weight: var(--fw-bk);
color: var(--fg-base);
letter-spacing: -0.012em;
margin: 0;
}
.ds-empty__sub {
font-size: var(--fs-body-sm);
color: var(--fg-muted);
margin: 0;
max-width: 360px;
line-height: 1.5;
}
.ds-empty__cta { margin-top: 12px; }
/* === Error block === */
.ds-error-block {
padding: 64px 24px;
text-align: center;
background: var(--bg-subtle);
border-radius: 12px;
border: 1px dashed var(--danger-300);
display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.ds-error-block__icon {
width: 56px; height: 56px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(232,90,71,0.08);
border-radius: 50%;
color: var(--danger-600);
margin-bottom: 4px;
}
.ds-error-block__icon .mi { font-size: 28px; }
.ds-error-block__title {
font-size: 18px; font-weight: var(--fw-bk);
color: var(--fg-base);
letter-spacing: -0.012em;
margin: 0;
}
.ds-error-block__sub {
font-size: var(--fs-body-sm);
color: var(--fg-muted);
margin: 0; max-width: 360px;
line-height: 1.5;
}
.ds-error-block__retry { margin-top: 12px; }
/* === Skeleton (loading shimmer) ===
Light-mode tokens (--bg-subtle = gray-50, --bg-muted = gray-100) sit too
close to white on .ds-mypage-hero's white card surface, making the
skeleton bars effectively invisible. Use gray-200/gray-100 so the bars
are tangible without becoming heavy. Dark mode keeps the token-driven
gradient since gray-900/800 already contrast their surface. */
.ds-skeleton {
background: linear-gradient(
90deg,
var(--gray-200) 0%,
var(--gray-100) 50%,
var(--gray-200) 100%
);
background-size: 200% 100%;
animation: ds-skeleton-shimmer 1.4s ease-in-out infinite;
border-radius: 8px;
display: block;
}
:root[data-theme="dark"] .ds-skeleton {
background: linear-gradient(
90deg,
var(--bg-subtle) 0%,
var(--bg-muted, var(--bg-card)) 50%,
var(--bg-subtle) 100%
);
background-size: 200% 100%;
}
@keyframes ds-skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.ds-skeleton--text { height: 14px; }
.ds-skeleton--text-lg { height: 20px; }
.ds-skeleton--card { height: 200px; border-radius: 12px; }
.ds-skeleton--row { height: 64px; border-radius: 10px; }
.ds-card-detail-skeleton-line {
display: block;
max-width: 100%;
flex-shrink: 0;
}
.ds-card-detail-skeleton-line--title {
width: min(520px, 92%);
height: 32px;
margin-bottom: 10px;
}
.ds-card-detail-skeleton-line--title-short {
width: min(360px, 64%);
height: 32px;
}
.ds-card-detail-skeleton-line--price {
width: min(240px, 72vw);
height: 42px;
}
.ds-card-detail-skeleton-line--grade,
.ds-card-detail-skeleton-line--chip {
width: 72px;
height: 22px;
border-radius: 6px;
}
.ds-card-detail-skeleton-line--seller {
width: 128px;
height: 18px;
}
.ds-card-detail-skeleton-line--meta {
width: 116px;
height: 14px;
}
.ds-card-detail-skeleton-line--meta-short {
width: 88px;
height: 14px;
}
.ds-card-detail-skeleton-line--offer-title {
width: 92%;
height: 20px;
margin-bottom: 8px;
}
.ds-card-detail-skeleton-line--offer-short {
width: 62%;
height: 20px;
}
.ds-card-detail-skeleton-line--offer-price {
width: 152px;
height: 30px;
}
.ds-card-detail-skeleton-line--quality {
width: 96px;
height: 18px;
}
.ds-card-detail-skeleton-line--cert {
width: 104px;
height: 14px;
}
.ds-card-detail-skeleton-line--breadcrumb {
display: inline-block;
width: 132px;
height: 14px;
vertical-align: middle;
}
.ds-market-info__price-amount .ds-card-detail-skeleton-line,
.ds-card-value__amount .ds-card-detail-skeleton-line,
.ds-offer-cardview__price-amount .ds-card-detail-skeleton-line {
display: inline-block;
}
.ds-market-info__seller-stats[aria-busy="true"] {
align-items: center;
}
@media (max-width: 599px) {
.ds-card-detail-skeleton-line--title,
.ds-card-detail-skeleton-line--title-short {
height: 26px;
}
.ds-card-detail-skeleton-line--price {
height: 34px;
width: min(200px, 68vw);
}
}
/* Live data skeletons: home / market / gacha never expose stale mock rows while APIs settle. */
.ds-live-skeleton-card {
display: flex;
flex-direction: column;
min-width: 0;
gap: 10px;
padding: 12px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 10px;
overflow: hidden;
pointer-events: none;
}
.ds-live-skeleton-card--listing,
.ds-live-skeleton-card--inv,
.ds-live-skeleton-card--gacha-thumb {
min-height: 220px;
}
.ds-live-skeleton-card--limited {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: stretch;
min-height: 320px;
padding: 0;
border-radius: 16px;
}
.ds-live-skeleton-art,
.ds-live-skeleton-line,
.ds-live-skeleton-limited-visual {
display: block;
border-radius: 8px;
background: linear-gradient(90deg, var(--bg-subtle) 0%, var(--bg-muted, var(--gray-100)) 48%, var(--bg-subtle) 100%);
background-size: 200% 100%;
animation: ds-skeleton-shimmer 1.4s ease-in-out infinite;
}
.ds-live-skeleton-art {
aspect-ratio: 1 / 1;
width: 100%;
}
.ds-live-skeleton-line {
height: 12px;
}
.ds-live-skeleton-line--wide { width: 82%; }
.ds-live-skeleton-line--medium { width: 58%; }
.ds-live-skeleton-line--short { width: 36%; }
.ds-app-row--skeleton {
pointer-events: none;
}
.ds-app-row--skeleton:hover {
border-color: var(--border-base);
box-shadow: none;
}
.ds-app-row--skeleton .ds-app-row__art {
background-image: linear-gradient(90deg, var(--bg-subtle) 0%, var(--bg-muted, var(--gray-100)) 48%, var(--bg-subtle) 100%);
background-size: 200% 100%;
animation: ds-skeleton-shimmer 1.4s ease-in-out infinite;
}
.ds-app-row--skeleton .ds-app-row__main {
gap: 10px;
}
.ds-app-row--skeleton .ds-app-row__id {
min-width: 112px;
min-height: 28px;
padding: 8px;
}
.ds-app-row__skeleton-chip {
width: 78px;
height: 20px;
border-radius: 999px;
}
.ds-app-row__skeleton-id {
width: 92px;
}
.ds-live-skeleton-limited-visual {
width: 100%;
height: 100%;
min-height: 260px;
border-radius: 0;
}
.ds-live-skeleton-limited-body {
display: flex;
flex-direction: column;
justify-content: center;
gap: 14px;
padding: 28px;
}
.ds-mypage-skeleton__since {
width: 128px;
height: 13px;
}
.ds-mypage-skeleton__name {
width: 160px;
height: 30px;
}
.ds-mypage-skeleton__handle {
width: 92px;
height: 14px;
}
.ds-mypage-skeleton__tier {
width: 56px;
height: 14px;
}
.ds-mypage-skeleton__balance {
width: 136px;
height: 28px;
}
.ds-mypage-skeleton__card-since {
width: 84px;
height: 32px;
}
.ds-mypage-skeleton__greet {
width: min(240px, 70vw);
height: 30px;
}
.ds-mypage-hero__avatar--skeleton {
color: transparent;
pointer-events: none;
box-shadow: none;
}
.ds-mypage-skeleton__metric {
width: 72px;
height: 22px;
}
.ds-mypage-skeleton__metric--wide {
width: 132px;
}
.ds-mypage-skeleton__delta {
width: 112px;
height: 11px;
}
.ds-coll-overview-skeleton__value {
width: 64px;
height: 25px;
}
.ds-coll-overview-skeleton__value--wide {
width: 150px;
}
.ds-coll-card--skeleton {
cursor: default;
pointer-events: none;
}
.ds-coll-card--skeleton:hover {
border-color: var(--border-base);
box-shadow: none;
}
.ds-coll-card--skeleton .ds-coll-card__art {
background: var(--bg-subtle);
box-shadow: none;
}
.ds-coll-card--skeleton .ds-coll-card__art::before,
.ds-coll-card--skeleton .ds-coll-card__art::after {
display: none;
}
.ds-coll-card-skeleton__art {
width: 48%;
max-width: 112px;
aspect-ratio: 5 / 7;
border-radius: 8px;
}
.ds-coll-card-skeleton__line {
height: 13px;
}
.ds-coll-card-skeleton__line--wide { width: 82%; }
.ds-coll-card-skeleton__line--medium { width: 58%; }
.ds-coll-card-skeleton__line--short { width: 44%; height: 18px; margin-top: 6px; }
.ds-coll-card-skeleton__dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.ds-coll-card-skeleton__status {
width: 72px;
height: 11px;
}
.ds-recent__row--skeleton {
pointer-events: none;
}
.ds-recent__row--skeleton .ds-recent__icon {
border-radius: 8px;
background-size: 200% 100%;
}
.ds-recent-skeleton__body {
display: flex;
flex: 1;
min-width: 0;
flex-direction: column;
gap: 7px;
}
.ds-recent-skeleton__line {
height: 12px;
}
.ds-recent-skeleton__line--wide { width: min(320px, 70%); }
.ds-recent-skeleton__line--medium { width: min(220px, 50%); }
.ds-recent-skeleton__amount {
width: 96px;
height: 14px;
flex-shrink: 0;
}
.ds-recent-skeleton__time {
width: 56px;
height: 12px;
flex-shrink: 0;
}
.ds-wallet-skeleton__amount {
width: 180px;
height: 42px;
}
.ds-wallet-skeleton__sub {
width: min(320px, 70vw);
height: 14px;
}
.ds-wallet-tx__row--skeleton {
pointer-events: none;
}
.ds-wallet-tx__row--skeleton:hover {
margin-inline: 0;
padding-inline: 0;
background: transparent;
border-radius: 0;
border-color: var(--border-subtle);
}
.ds-wallet-tx__row--skeleton .ds-wallet-tx__icon {
background-size: 200% 100%;
}
.ds-wallet-tx-skeleton__body {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.ds-wallet-tx-skeleton__line {
height: 12px;
}
.ds-wallet-tx-skeleton__line--wide { width: min(320px, 72%); }
.ds-wallet-tx-skeleton__line--medium { width: min(220px, 48%); }
.ds-wallet-tx-skeleton__amount {
width: 96px;
height: 18px;
}
.ds-offer-row--skeleton {
pointer-events: none;
}
.ds-offer-row--skeleton:hover {
border-color: var(--border-base);
}
.ds-offer-row--skeleton .ds-offer-row__thumb:hover {
transform: none;
}
.ds-offer-skeleton__body {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.ds-offer-skeleton__line {
height: 12px;
}
.ds-offer-skeleton__line--wide { width: min(520px, 82%); }
.ds-offer-skeleton__line--medium { width: min(300px, 54%); }
.ds-offer-skeleton__line--short { width: 160px; }
.ds-offer-skeleton__right {
display: grid;
justify-items: end;
gap: 8px;
min-width: 110px;
}
.ds-offer-skeleton__chip {
width: 76px;
height: 20px;
border-radius: var(--r-pill);
}
.ds-offer-skeleton__button {
width: 104px;
height: 32px;
border-radius: 8px;
}
.ds-offer-skeleton__date {
width: 72px;
height: 12px;
}
.ds-grading-item--skeleton {
pointer-events: none;
}
.ds-grading-item--skeleton .ds-grading-item__thumb {
border: 0;
background-size: 200% 100%;
}
.ds-grading-skeleton__info {
display: flex;
flex-direction: column;
gap: 8px;
min-width: min(420px, 58vw);
}
.ds-grading-skeleton__line {
height: 13px;
}
.ds-grading-skeleton__line--wide { width: min(360px, 82%); }
.ds-grading-skeleton__line--medium { width: min(260px, 58%); }
.ds-grading-skeleton__chip {
width: 92px;
height: 28px;
border-radius: var(--r-pill);
}
.ds-grading-timeline--skeleton {
align-items: center;
justify-content: space-between;
gap: 14px;
}
.ds-grading-timeline--skeleton::before {
display: none;
}
.ds-grading-skeleton__step {
flex: 1;
height: 34px;
min-width: 0;
}
.ds-grading-skeleton__stat {
width: 72px;
height: 25px;
}
.ds-grading-skeleton__stat--wide {
width: 128px;
}
.ds-settings-avatar--skeleton {
color: transparent;
pointer-events: none;
}
.ds-settings-skeleton__value {
width: 112px;
height: 18px;
}
.ds-settings-skeleton__value--email {
width: 176px;
}
.ds-settings-skeleton__sub {
width: 160px;
height: 13px;
}
.ds-settings-skeleton__sub--wide {
width: min(360px, 58vw);
}
@media (max-width: 599px) {
.ds-recent-skeleton__amount { width: 74px; }
.ds-recent-skeleton__time { display: none; }
.ds-offer-skeleton__right {
align-items: start;
justify-items: start;
min-width: 0;
}
.ds-wallet-tx-skeleton__amount {
width: 72px;
}
}
.ds-card-art__face.is-loading,
.ds-market-art__inner.is-loading,
.ds-market-art__thumb.is-loading,
.ds-offer-cardview__image.is-loading,
.ds-card-zoom__viewport.is-loading,
.ds-market-listing__thumb.is-loading {
position: relative;
}
.ds-card-art__face.is-loading::before,
.ds-market-art__inner.is-loading::before,
.ds-market-art__thumb.is-loading::before,
.ds-offer-cardview__image.is-loading::before,
.ds-card-zoom__viewport.is-loading::before,
.ds-market-listing__thumb.is-loading::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(90deg, var(--bg-subtle) 0%, var(--bg-muted, var(--gray-100)) 48%, var(--bg-subtle) 100%);
background-size: 200% 100%;
animation: ds-skeleton-shimmer 1.4s ease-in-out infinite;
z-index: 2;
}
.ds-card-art__face.is-loading img,
.ds-market-art__inner.is-loading img,
.ds-market-art__thumb.is-loading img,
.ds-offer-cardview__image.is-loading img,
.ds-card-zoom__viewport.is-loading img,
.ds-market-listing__thumb.is-loading img,
img[data-live-image-pending="true"] {
opacity: 0 !important;
}
.ds-market-art__inner.is-loading .ds-market-art__nav,
.ds-market-art__inner.is-loading .ds-market-art__zoom-btn,
.ds-card-art__face.is-loading .ds-card-art__fallback {
display: none !important;
}
.is-live-skeleton {
pointer-events: none;
}
.is-live-skeleton .ds-mosaic-cell__visual {
background-image: linear-gradient(90deg, var(--bg-subtle) 0%, var(--bg-muted, var(--gray-100)) 48%, var(--bg-subtle) 100%) !important;
background-size: 200% 100% !important;
background-position: 0 0 !important;
animation: ds-skeleton-shimmer 1.4s ease-in-out infinite;
}
.is-live-skeleton .ds-card-tile {
display: none !important;
background-image: none !important;
}
.is-live-skeleton .ds-mosaic-cell__name,
.is-live-skeleton .ds-mosaic-cell__price {
color: transparent !important;
position: relative;
}
.is-live-skeleton .ds-mosaic-cell__name::after,
.is-live-skeleton .ds-mosaic-cell__price::after {
content: "";
display: block;
height: 12px;
border-radius: 999px;
background: linear-gradient(90deg, var(--bg-subtle) 0%, var(--bg-muted, var(--gray-100)) 48%, var(--bg-subtle) 100%);
background-size: 200% 100%;
animation: ds-skeleton-shimmer 1.4s ease-in-out infinite;
}
.is-live-skeleton .ds-mosaic-cell__name::after { width: 82%; height: 16px; }
.is-live-skeleton .ds-mosaic-cell__price::after { width: 44%; }
/* Hide all decorative chrome during skeleton so the cell renders as a clean
image-area shimmer + two text bars. The chip/label show colored chrome
(green --mystic-300 background) that distracts from the loading state. */
.is-live-skeleton .ds-mosaic-cell__label,
.is-live-skeleton .ds-mosaic-cell__limited-chip,
.is-live-skeleton .ds-mosaic-cell__price-unit,
.is-live-skeleton .ds-mosaic-cell__stock {
display: none !important;
}
@media (max-width: 1023px) {
.ds-live-skeleton-card--limited {
display: flex;
flex-direction: column;
min-height: 380px;
}
.ds-live-skeleton-limited-visual {
min-height: 210px;
}
}
/* Skeleton wrappers (페이지별 layout) */
.ds-coll-skel-stats { padding: 24px 0 16px; }
.ds-coll-skel-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
margin-top: 20px;
}
.ds-wallet-skel-hero {
padding: 24px;
background: var(--bg-card);
border-radius: 12px;
border: 1px solid var(--border-base);
margin-bottom: 16px;
display: flex; flex-direction: column;
}
.ds-wallet-skel-rows {
display: flex; flex-direction: column; gap: 12px;
}
.ds-grading-skel-stats { padding: 24px 0 16px; }
.ds-grading-skel-rows { margin-top: 20px; }
/* === State toggle rules ===
- 기본(.ds-empty / .ds-error-block / [data-skeleton])는 hidden
- body[data-state="..."] 시 해당 블록만 visible + 일반 콘텐츠는 .state-hide로 hide */
.ds-empty,
.ds-error-block,
[data-skeleton] { display: none; }
body[data-state="empty"] .ds-empty { display: flex; }
body[data-state="error"] .ds-error-block { display: flex; }
body[data-state="loading"] [data-skeleton] { display: block; }
body[data-state="empty"] .state-hide,
body[data-state="loading"] .state-hide,
body[data-state="error"] .state-hide { display: none !important; }
/* 마켓 검색 빈 상태 — body[data-state] 없이 hidden attr 토글로 작동 */
.ds-market-empty:not([hidden]) {
display: flex !important;
margin: 24px 0;
}
/* showcase: state link 버튼 (개발자 토글) */
.ds-state-toggle {
position: fixed;
bottom: 80px; right: 16px;
z-index: 80;
display: flex; gap: 4px;
padding: 6px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: var(--r-pill);
box-shadow: var(--shadow-1);
font-size: var(--fs-caption-sm);
}
.ds-state-toggle a {
padding: 4px 10px;
border-radius: var(--r-pill);
color: var(--fg-muted);
text-decoration: none;
font-weight: var(--fw-md);
transition: var(--t-fast) ease-out;
}
.ds-state-toggle a:hover { color: var(--fg-base); background: var(--bg-subtle); }
.ds-state-toggle a.is-active {
background: var(--gray-950); color: var(--gray-0);
}
@media (max-width: 767px) {
.ds-state-toggle { bottom: 92px; } /* 모바일 탭바 위 */
}
/* ==========================================================
=== CARD-DETAIL === (Phase B · card-detail.html)
롤백: 이 섹션 통째로 삭제 + card-detail.html 삭제
========================================================== */
.ds-card-detail {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 48px;
margin: 24px 0 48px;
align-items: start;
}
@media (max-width: 1023px) {
.ds-card-detail { grid-template-columns: 1fr; gap: 24px; }
}
/* === Card art (좌측) === */
.ds-card-art {
position: sticky;
top: 80px;
display: flex; flex-direction: column; gap: 16px;
}
@media (max-width: 1023px) {
.ds-card-art { position: relative; top: auto; }
}
.ds-card-art__sides {
display: inline-flex;
position: absolute;
left: 12px;
bottom: 12px;
z-index: 4;
align-self: flex-start;
background: transparent;
border-radius: 0;
padding: 0;
gap: 8px;
}
.ds-card-art__side-btn {
width: 56px;
aspect-ratio: 1;
padding: 4px;
font-size: 0;
font-weight: var(--fw-bd);
color: var(--fg-muted);
border-radius: 6px;
border: 1px solid var(--border-base);
background: var(--gray-100);
cursor: pointer;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
transition: border-color var(--t-fast) ease-out, background var(--t-fast) ease-out;
}
.ds-card-art__side-btn.is-active {
background: var(--gray-100);
color: var(--fg-base);
border-color: var(--gray-950);
border-width: 2px;
}
:root[data-theme="dark"] .ds-card-art__side-btn.is-active {
background: var(--gray-800);
color: var(--gray-950);
border-color: var(--gray-50);
}
.ds-card-art__side-btn[hidden] {
display: none !important;
}
.ds-card-art__side-btn img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
.ds-card-art__side-btn-label {
display: none;
}
.ds-card-art__zoom {
position: absolute;
top: 12px; right: 12px;
z-index: 3;
width: 40px; height: 40px;
display: inline-flex; align-items: center; justify-content: center;
gap: 0;
padding: 0;
background: color-mix(in srgb, var(--bg-card) 90%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--border-base);
border-radius: 50%;
font-size: var(--fs-caption-sm); font-weight: var(--fw-bd);
color: var(--fg-base);
cursor: pointer;
box-shadow: var(--shadow-2);
transition: background var(--t-fast) ease-out, color var(--t-fast) ease-out, border-color var(--t-fast) ease-out;
}
.ds-card-art__zoom:hover { background: var(--gray-950); color: var(--gray-0); border-color: var(--gray-950); }
:root[data-theme="dark"] .ds-card-art__zoom:hover { background: var(--gray-50); color: var(--gray-950); border-color: var(--gray-50); }
.ds-card-art__zoom .mi { font-size: 18px; }
.ds-card-art__zoom-label { display: none; }
/* Stage — 카드 이미지 영역 (1:1 썸네일 + 안쪽 padding) */
.ds-card-art__stage {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
background: var(--bg-subtle);
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--border-base);
--art-pad: clamp(32px, 7%, 72px);
}
.ds-card-art__face {
position: absolute; inset: 0;
padding: var(--art-pad);
box-sizing: border-box;
display: flex; align-items: center; justify-content: center;
margin: 0;
opacity: 0;
transition: opacity var(--t-base) ease-out;
pointer-events: none;
}
.ds-card-art__face.is-active {
opacity: 1;
pointer-events: auto;
}
.ds-card-art__face img {
width: 100%; height: 100%;
object-fit: contain;
display: block;
}
.ds-card-art__face.is-fallback img { display: none; }
.ds-card-art__face.is-fallback .ds-card-art__fallback {
display: flex;
flex-direction: column; align-items: center; justify-content: center;
gap: 8px;
padding: 32px;
text-align: center;
}
.ds-card-art__fallback { display: none; }
.ds-card-art__fallback .mi { font-size: 48px; color: var(--fg-faint); }
.ds-card-art__fallback-title {
font-size: var(--fs-body); font-weight: var(--fw-bk);
color: var(--fg-muted); margin: 0;
}
.ds-card-art__fallback-path {
font-size: var(--fs-caption-xs);
color: var(--fg-faint);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
margin: 0;
padding: 6px 10px;
background: var(--bg-card);
border-radius: 4px;
word-break: break-all;
}
/* Condition pins */
.ds-card-art__pins {
position: absolute; inset: 0;
pointer-events: none;
}
.ds-card-art__pin {
position: absolute;
left: var(--pin-x); top: var(--pin-y);
transform: translate(-50%, -50%);
width: 24px; height: 24px;
border-radius: 50%;
background: rgba(15,17,22,0.85);
color: var(--gray-0);
font-size: 11px; font-weight: var(--fw-bk);
display: grid; place-items: center;
border: 2px solid var(--gray-0);
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
cursor: pointer;
pointer-events: auto;
transition: var(--t-fast) ease-out;
font-variant-numeric: tabular-nums;
}
.ds-card-art__pin:hover,
.ds-card-art__pin.is-active {
background: var(--gray-700);
border-color: var(--gray-0);
box-shadow: 0 0 0 4px rgba(255,255,255,0.25), 0 2px 8px rgba(0,0,0,0.3);
}
.ds-card-art__pin-note {
margin: 0;
padding: 12px 16px;
background: var(--gray-950);
color: var(--gray-100);
border-radius: 8px;
font-size: var(--fs-caption);
line-height: 1.5;
display: flex; align-items: flex-start; gap: 8px;
}
.ds-card-art__pin-note[hidden] { display: none !important; }
/* Magnifier — 마우스 호버 시 원형 확대경 (PC only). v0.7: card-detail + my-card-detail 양쪽 */
.ds-card-art[data-magnify="true"] .ds-card-art__face,
.ds-market-art[data-magnify="true"] img {
cursor: zoom-in;
}
.ds-magnifier {
position: absolute;
width: 220px; height: 220px;
border-radius: 50%;
border: 3px solid white;
box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(0,0,0,0.1);
pointer-events: none;
background-repeat: no-repeat;
z-index: 30;
opacity: 0;
transition: opacity 0.15s ease-out;
display: none;
/* 비율 깨짐 방지 — 카드 이미지 비율 유지 */
background-position: center;
}
.ds-magnifier.is-visible { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
.ds-card-art[data-magnify="true"] .ds-magnifier,
.ds-market-art[data-magnify="true"] .ds-magnifier { display: block; }
}
:root[data-theme="dark"] .ds-card-art__pin-note {
background: var(--gray-0); color: var(--gray-900);
}
/* === Meta + CTA (우측) === */
.ds-card-meta {
display: flex; flex-direction: column;
gap: 20px;
}
.ds-card-meta__head {
display: flex; flex-direction: row; gap: 12px; align-items: flex-start;
padding-bottom: 4px;
justify-content: space-between;
}
.ds-card-meta__head .ds-card-meta__title { flex: 1; min-width: 0; }
.ds-card-meta__head-actions { display: flex; gap: 6px; flex-shrink: 0; }
.ds-card-meta__eyebrow {
font-size: var(--fs-caption-xs); font-weight: var(--fw-bd);
color: var(--fg-muted);
letter-spacing: 0.04em; text-transform: uppercase;
margin: 0;
}
.ds-card-meta__title {
font-size: clamp(28px, 3vw, 36px);
font-weight: var(--fw-bk);
letter-spacing: -0.018em; line-height: 1.15;
color: var(--fg-base);
margin: 0;
}
.ds-card-meta__sub {
font-size: var(--fs-body-sm);
color: var(--fg-muted);
margin: 0;
}
/* Grade card — chip + quality label + cert ID link */
.ds-card-grade {
display: flex; align-items: stretch; justify-content: space-between;
background: var(--bg-card);
color: var(--fg-base);
border: 1px solid var(--border-base);
border-radius: 12px;
overflow: hidden;
gap: 0;
}
.ds-card-grade__main {
display: flex; align-items: center; gap: 14px;
padding: 16px 20px;
flex: 1;
}
.ds-card-grade__quality {
font-size: var(--fs-caption); font-weight: var(--fw-bk);
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--fg-muted);
}
.ds-card-grade__quality:empty {
display: none;
}
.ds-card-grade__cert {
display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
gap: 2px;
padding: 14px 20px;
background: var(--bg-subtle);
border-left: 1px solid var(--border-base);
text-decoration: none;
color: inherit;
position: relative;
transition: background var(--t-fast) ease-out;
}
.ds-card-grade__cert:hover { background: var(--gray-100); }
:root[data-theme="dark"] .ds-card-grade__cert:hover { background: var(--gray-800); }
.ds-card-grade__cert-label {
font-size: var(--fs-caption-xs); font-weight: var(--fw-bd);
color: var(--fg-muted);
letter-spacing: 0.04em; text-transform: uppercase;
}
.ds-card-grade__cert-id {
font-size: var(--fs-caption); font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
letter-spacing: 0.02em;
color: var(--fg-base);
}
.ds-card-grade__cert .mi {
position: absolute; top: 10px; right: 10px;
font-size: 14px; color: var(--fg-muted);
}
/* Subgrades row */
.ds-card-subgrades {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.ds-card-subgrades li {
display: flex; flex-direction: column; align-items: center;
gap: 2px;
padding: 12px 8px;
background: var(--bg-subtle);
border-radius: 8px;
text-align: center;
}
.ds-card-subgrades li span {
font-size: var(--fs-caption-xs);
color: var(--fg-muted);
font-weight: var(--fw-bd);
letter-spacing: 0.04em; text-transform: uppercase;
}
.ds-card-subgrades li strong {
font-size: 18px; font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums;
color: var(--fg-base);
}
/* Value block */
.ds-card-value {
display: flex; flex-direction: column;
gap: 4px;
padding: 18px 0;
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
}
.ds-card-value__label {
font-size: var(--fs-caption); color: var(--fg-muted);
font-weight: var(--fw-md); /* v0.5: bd → md (eyebrow 룰) */
}
.ds-card-value__amount {
font-size: clamp(26px, 2.6vw, 30px); /* v0.5: 살짝 줄이고 max 30px (h2 align) */
font-weight: var(--fw-bd); /* v0.5: bk(700) → bd(600) max 룰 */
letter-spacing: -0.012em;
font-variant-numeric: tabular-nums;
margin: 0; line-height: 1.1;
color: var(--fg-base);
}
.ds-card-value__delta {
display: inline-flex; align-items: center; gap: 4px;
font-size: var(--fs-caption); font-weight: var(--fw-bd);
font-variant-numeric: tabular-nums;
color: var(--fg-muted);
}
.ds-card-value__delta--up { color: var(--gray-600); }
.ds-card-value__delta--down { color: var(--danger-600); }
.ds-card-value__delta .mi { font-size: 16px; }
/* CTA stack */
.ds-card-cta {
display: flex; flex-direction: column; gap: 12px;
}
.ds-card-cta[hidden] {
display: none !important;
}
.ds-card-cta__primary {
width: 100%;
height: 52px;
font-size: var(--fs-body-md); font-weight: var(--fw-bk);
}
.ds-card-cta__primary .mi { font-size: 20px; }
.ds-card-cta__primary.is-action-disabled,
.ds-card-cta__primary:disabled {
opacity: 0.48;
cursor: not-allowed;
filter: grayscale(1);
}
.ds-card-cta__primary--cancel {
background: var(--bg-card) !important;
border: 1px solid var(--danger-500, #ef4444) !important;
color: var(--danger-600, #dc2626) !important;
}
.ds-card-cta__primary--cancel:hover:not(:disabled) {
background: rgba(239, 68, 68, 0.08) !important;
}
.ds-card-cta__secondary-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.ds-card-cta__secondary {
display: flex; flex-direction: column; align-items: center;
gap: 4px;
padding: 14px 8px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 10px;
cursor: pointer;
transition: var(--t-fast) ease-out;
text-align: center;
}
.ds-card-cta__secondary:hover {
border-color: var(--gray-500);
background: var(--bg-subtle);
}
.ds-card-cta__secondary[aria-disabled="true"],
.ds-card-cta__secondary.is-action-disabled {
opacity: 0.58;
cursor: not-allowed;
}
.ds-card-cta__secondary[aria-disabled="true"]:hover,
.ds-card-cta__secondary.is-action-disabled:hover {
border-color: var(--border-base);
background: var(--bg-card);
}
.ds-card-cta__secondary .mi {
font-size: 22px;
color: var(--fg-base);
}
.ds-card-cta__secondary span {
font-size: var(--fs-caption); font-weight: var(--fw-bd);
color: var(--fg-base);
}
.ds-card-cta__secondary small {
font-size: var(--fs-caption-xs);
color: var(--fg-muted);
font-weight: var(--fw-rg);
}
@media (max-width: 599px) {
.ds-card-cta__secondary-row { grid-template-columns: 1fr 1fr 1fr; }
.ds-card-cta__secondary { padding: 10px 4px; }
.ds-card-cta__secondary small { display: none; }
}
/* === Card info (L4 — details list) === */
.ds-card-info {
margin: 24px 0 48px;
padding: 28px;
background: var(--bg-subtle);
border-radius: 12px;
}
.ds-market-info .ds-card-info {
margin: 0;
padding: 16px 0 0;
background: transparent;
border-top: 1px solid var(--border-subtle);
border-radius: 0;
}
.ds-card-info__title {
font-size: var(--fs-headline); font-weight: var(--fw-bk);
letter-spacing: -0.012em;
margin: 0 0 18px;
color: var(--fg-base);
}
.ds-market-info .ds-card-info__title {
font-size: var(--fs-body-sm);
letter-spacing: 0;
margin-bottom: 10px;
}
.ds-card-info__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px 32px;
margin: 0;
}
.ds-market-info .ds-card-info__grid {
grid-template-columns: 1fr;
gap: 0;
}
@media (max-width: 599px) {
.ds-card-info__grid { grid-template-columns: 1fr; }
}
.ds-card-info__row {
display: grid;
grid-template-columns: 110px 1fr;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--border-subtle);
align-items: baseline;
}
.ds-market-info .ds-card-info__row {
grid-template-columns: minmax(72px, 0.42fr) minmax(0, 1fr);
padding: 9px 0;
}
.ds-market-info .ds-card-info__row:first-child {
padding-top: 0;
}
.ds-market-info .ds-card-info__row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.ds-card-info__row dt {
font-size: var(--fs-caption); color: var(--fg-muted);
font-weight: var(--fw-bd);
}
.ds-card-info__row dd {
font-size: var(--fs-body-sm);
color: var(--fg-base);
font-weight: var(--fw-md);
margin: 0;
}
.ds-market-info .ds-card-info__row dd {
text-align: right;
overflow-wrap: anywhere;
}
.ds-card-info__row dd small {
color: var(--fg-muted); font-weight: var(--fw-rg);
}
.ds-card-info__row dd a {
color: var(--fg-base);
text-decoration: underline;
text-decoration-color: var(--border-base);
text-underline-offset: 3px;
display: inline-flex; align-items: center; gap: 3px;
}
.ds-card-info__row dd a .mi { font-size: 14px; opacity: 0.6; }
.ds-card-info__row dd a:hover { text-decoration-color: var(--fg-base); }
/* ==========================================================
=== CARD-ZOOM === (모달 + pan/zoom 인터랙션)
롤백: 이 섹션 통째로 삭제 + card-detail.html 안 #cardZoom 마크업 삭제
========================================================== */
.ds-card-zoom {
position: fixed; inset: 0;
z-index: 200;
background: rgba(8, 9, 12, 0.94);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: none;
flex-direction: column;
color: var(--gray-0);
}
.ds-card-zoom.is-open { display: flex; }
.ds-card-zoom__close {
position: absolute;
top: 20px; right: 20px;
z-index: 3;
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(255,255,255,0.08);
color: var(--gray-0);
display: grid; place-items: center;
cursor: pointer;
transition: var(--t-fast) ease-out;
}
.ds-card-zoom__close:hover { background: rgba(255,255,255,0.18); }
.ds-card-zoom__close .mi { font-size: 22px; }
.ds-card-zoom__head {
position: absolute; top: 24px; left: 24px;
z-index: 2;
display: flex; flex-direction: column; gap: 8px;
max-width: calc(100% - 96px);
}
.ds-card-zoom__title {
font-size: var(--fs-body); font-weight: var(--fw-bk);
margin: 0;
color: var(--gray-0);
letter-spacing: -0.012em;
}
.ds-card-zoom__hint {
display: flex; gap: 16px; flex-wrap: wrap;
font-size: var(--fs-caption-sm);
color: var(--gray-400);
}
.ds-card-zoom__hint span {
display: inline-flex; align-items: center; gap: 4px;
}
.ds-card-zoom__hint .mi { font-size: 16px; }
.ds-card-zoom__hint kbd {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px;
padding: 2px 6px;
background: rgba(255,255,255,0.1);
border-radius: 3px;
border: 1px solid rgba(255,255,255,0.2);
}
.ds-card-zoom__viewport {
flex: 1;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
cursor: grab;
touch-action: none;
}
.ds-card-zoom__viewport img {
max-width: 90%;
max-height: 90%;
user-select: none;
-webkit-user-drag: none;
transition: transform 0.15s ease-out;
will-change: transform;
}
.ds-card-zoom__controls {
position: absolute;
bottom: 24px; left: 50%;
transform: translateX(-50%);
display: inline-flex; align-items: center; gap: 4px;
padding: 8px;
background: rgba(255,255,255,0.08);
backdrop-filter: blur(12px);
border-radius: var(--r-pill);
border: 1px solid rgba(255,255,255,0.12);
}
.ds-card-zoom__ctrl {
width: 36px; height: 36px;
border-radius: 50%;
background: transparent;
color: var(--gray-0);
display: grid; place-items: center;
cursor: pointer;
transition: var(--t-fast) ease-out;
font-size: var(--fs-caption); font-weight: var(--fw-bd);
}
.ds-card-zoom__ctrl:hover { background: rgba(255,255,255,0.12); }
.ds-card-zoom__ctrl .mi { font-size: 20px; }
.ds-card-zoom__ctrl--reset {
width: auto;
padding: 0 14px;
border-radius: var(--r-pill);
}
.ds-card-zoom__scale {
font-size: var(--fs-caption); font-weight: var(--fw-bd);
font-variant-numeric: tabular-nums;
padding: 0 12px;
min-width: 56px; text-align: center;
color: var(--gray-100);
}
@media (max-width: 599px) {
.ds-card-zoom__head { top: 16px; left: 16px; }
.ds-card-zoom__close { top: 12px; right: 12px; }
.ds-card-zoom__title { font-size: var(--fs-body-sm); }
.ds-card-zoom__hint { display: none; }
.ds-card-zoom__controls { bottom: 16px; }
}
/* ==========================================================
=== AUTH === (Phase D-3 · login.html / signup.html)
롤백: 이 섹션 통째로 삭제 + login.html / signup.html 삭제
========================================================== */
.ds-auth-body {
background: var(--bg-subtle);
min-height: 100vh;
display: flex; flex-direction: column;
}
:root[data-theme="dark"] .ds-auth-body { background: var(--bg-base); }
/* 로그인/회원가입 등 인증 화면의 뒤로가기 버튼 (상태바 안전영역 아래에 고정) */
.ds-auth-back {
position: fixed;
/* 상태바/노치 아래로 확실히 내림(env 가 작게/0 으로 잡혀도 최소 54px 보장 → 탭 가능) */
top: max(54px, calc(env(safe-area-inset-top, 0px) + 8px));
left: 14px;
z-index: 30;
-webkit-appearance: none; appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
padding: 0; margin: 0;
border: 1px solid rgba(17,24,39,.14);
border-radius: 999px;
background: #fff;
color: #0a0b0e;
box-shadow: 0 2px 8px rgba(17,24,39,.10);
cursor: pointer;
}
.ds-auth-back:hover { background: #f5f5f6; }
.ds-auth-back .mi {
font-family: 'Material Symbols Outlined';
font-size: 26px;
line-height: 1;
font-weight: 400;
}
.ds-auth-stage {
flex: 1;
display: flex; flex-direction: column; align-items: center;
/* env 가 0 으로 보고되는 WebView 환경에서도 상단(상태바/노치) 을 확실히 비우도록 최소값 보장 */
padding: max(56px, calc(32px + env(safe-area-inset-top, 0px))) 16px calc(64px + env(safe-area-inset-bottom, 0px));
gap: 28px;
max-width: 480px;
margin: 0 auto;
width: 100%;
}
@media (max-width: 599px) {
.ds-auth-stage {
padding: max(60px, calc(24px + env(safe-area-inset-top, 0px))) 16px calc(48px + env(safe-area-inset-bottom, 0px));
gap: 20px;
}
}
.ds-auth-logo {
display: inline-flex;
width: 80px;
color: var(--fg-base);
margin-top: 16px;
}
.ds-auth-logo svg { width: 100%; height: auto; }
.ds-auth-card {
width: 100%;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 16px;
padding: 32px 28px;
box-shadow: var(--shadow-1);
}
@media (max-width: 599px) {
.ds-auth-card { padding: 28px 20px; border-radius: 14px; }
}
.ds-auth-card__head {
margin-bottom: 24px;
display: flex; flex-direction: column; gap: 6px;
}
.ds-auth-card__title {
font-size: 24px; font-weight: var(--fw-bk);
letter-spacing: -0.018em;
margin: 0;
color: var(--fg-base);
}
.ds-auth-card__sub {
font-size: var(--fs-body-sm);
color: var(--fg-muted);
margin: 0;
line-height: 1.5;
}
.ds-auth-card__foot {
margin: 20px 0 0;
text-align: center;
font-size: var(--fs-caption);
color: var(--fg-muted);
}
.ds-auth-card__foot a {
color: var(--fg-base);
margin-left: 4px;
}
.ds-auth-card__foot a strong { font-weight: var(--fw-bk); }
/* OAuth button */
.ds-auth-oauth-group {
display: flex;
flex-direction: column;
gap: 12px;
}
.ds-auth-oauth {
width: 100%;
height: 52px;
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
background: var(--bg-card);
border: 1px solid var(--border-strong);
border-radius: 10px;
font-size: var(--fs-body-sm); font-weight: var(--fw-bd);
color: var(--fg-base);
cursor: pointer;
transition: var(--t-fast) ease-out;
}
.ds-auth-oauth:hover {
background: var(--bg-subtle);
border-color: var(--gray-500);
}
.ds-auth-oauth svg,
.ds-auth-oauth__brand-icon {
flex: 0 0 auto;
}
.ds-auth-oauth__brand-icon {
display: block;
width: auto;
object-fit: contain;
}
.ds-auth-oauth__brand-icon--kakao {
width: 24px;
height: 24px;
}
.ds-auth-oauth__brand-icon--naver {
width: 28px;
height: 28px;
border-radius: 999px;
}
.ds-auth-oauth--apple {
background: var(--gray-950);
border-color: var(--gray-950);
color: var(--gray-0);
}
.ds-auth-oauth--apple:hover {
background: var(--gray-800);
border-color: var(--gray-800);
}
.ds-auth-oauth--kakao {
background: #FEE500;
border-color: #F1D800;
color: #181600;
gap: 4px;
}
.ds-auth-oauth--kakao:hover {
background: #F8DC00;
border-color: #E7CE00;
}
.ds-auth-oauth--naver {
background: #03A94D;
border-color: #03A94D;
color: #FFFFFF;
gap: 8px;
}
.ds-auth-oauth--naver:hover {
background: #029244;
border-color: #029244;
}
:root[data-theme="dark"] .ds-auth-oauth--google {
border-color: var(--gray-500);
}
:root[data-theme="dark"] .ds-auth-oauth--apple {
background: var(--gray-50);
border-color: var(--gray-50);
color: var(--gray-950);
}
:root[data-theme="dark"] .ds-auth-oauth--apple:hover {
background: var(--gray-200);
border-color: var(--gray-200);
}
/* Divider */
.ds-auth-divider {
display: flex; align-items: center;
margin: 20px 0;
color: var(--fg-faint);
font-size: var(--fs-caption);
gap: 12px;
}
.ds-auth-divider::before,
.ds-auth-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--border-base);
}
/* Form */
.ds-auth-form {
display: flex; flex-direction: column; gap: 14px;
}
.ds-auth-field {
display: flex; flex-direction: column; gap: 6px;
}
.ds-auth-field__label {
font-size: var(--fs-caption); font-weight: var(--fw-bd);
color: var(--fg-base);
display: flex; justify-content: space-between; align-items: baseline;
}
.ds-auth-field__hint {
font-size: var(--fs-caption-sm);
color: var(--fg-muted);
font-weight: var(--fw-md);
text-decoration: underline;
text-decoration-color: var(--border-base);
text-underline-offset: 3px;
}
.ds-auth-field__hint:hover { text-decoration-color: var(--fg-base); }
/* 모든 text-like input 공통 (tel/number/url 등 type 누락 방지) */
.ds-auth-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
height: 44px;
padding: 0 14px;
background: var(--bg-base);
border: 1px solid var(--border-base);
border-radius: 8px;
font-size: var(--fs-body-sm);
color: var(--fg-base);
transition: border-color var(--t-fast) ease-out;
font-family: inherit;
width: 100%;
box-sizing: border-box;
}
.ds-auth-field input:focus {
outline: none;
border-color: var(--gray-950);
}
:root[data-theme="dark"] .ds-auth-field input:focus { border-color: var(--gray-50); }
.ds-auth-field.is-error input {
border-color: var(--danger-500);
}
.ds-password-field {
position: relative;
display: block;
width: 100%;
}
.ds-auth-field .ds-password-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
padding-right: 48px;
}
.ds-password-field__toggle {
position: absolute;
top: 50%;
right: 6px;
width: 36px;
height: 36px;
border: 0;
border-radius: var(--r-pill);
background: transparent;
color: var(--fg-muted);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transform: translateY(-50%);
transition: background var(--t-fast) ease-out, color var(--t-fast) ease-out;
}
.ds-password-field__toggle:hover {
background: var(--bg-subtle);
color: var(--fg-base);
}
.ds-password-field__toggle:focus-visible {
outline: 2px solid var(--gray-950);
outline-offset: 2px;
}
.ds-password-field__toggle .mi {
font-size: 20px;
line-height: 1;
}
.ds-auth-field__error {
font-size: var(--fs-caption-sm);
color: var(--danger-600);
min-height: 0;
line-height: 1.4;
display: none;
}
.ds-auth-field.is-error .ds-auth-field__error { display: block; }
/* Checkbox */
.ds-auth-checkbox {
display: inline-flex; align-items: center; gap: 8px;
cursor: pointer;
font-size: var(--fs-caption);
color: var(--fg-base);
}
.ds-auth-checkbox input[type="checkbox"] {
width: 18px; height: 18px;
accent-color: var(--gray-950);
cursor: pointer;
}
:root[data-theme="dark"] .ds-auth-checkbox input[type="checkbox"] { accent-color: var(--gray-50); }
.ds-auth-checkbox a {
color: inherit;
text-decoration: underline;
text-decoration-color: var(--border-base);
text-underline-offset: 2px;
}
/* Terms group (signup) */
.ds-auth-terms {
display: flex; flex-direction: column; gap: 8px;
padding: 14px;
background: var(--bg-subtle);
border: 1px solid var(--border-subtle);
border-radius: 10px;
}
.ds-auth-terms__divider {
height: 1px;
background: var(--border-subtle);
margin: 4px 0 2px;
}
.ds-auth-checkbox--all { font-weight: var(--fw-bk); }
.ds-auth-checkbox--all span strong { color: var(--fg-base); }
/* Submit */
.ds-auth-submit {
width: 100%;
height: 48px;
margin-top: 8px;
font-size: var(--fs-body); font-weight: var(--fw-bk);
}
/* === Toast === 짧은 confirm 알림. 자동 dismiss 3.5s. position: fixed bottom-right.
사용:
showToast('관심 카드에 추가됐어요', { action: { label: '보기', href: 'my-collection.html' } });
마크업은 JS가 .ds-toast 동적 생성. */
.ds-toast {
position: fixed;
/* 모달 위에 떠야 함 — overlay(200), dropdown(9999) 위 */
z-index: 99999;
right: 24px; bottom: 24px;
min-width: 260px; max-width: 360px;
background: var(--gray-950);
color: var(--gray-0);
border-radius: 10px;
padding: 14px 18px;
display: flex; align-items: center; gap: 12px;
font-size: var(--fs-body-sm); font-weight: var(--fw-md);
box-shadow: var(--shadow-3);
transform: translateY(20px);
opacity: 0;
transition: transform 0.22s var(--ease-emp), opacity 0.22s ease-out;
}
.ds-toast.is-visible { transform: translateY(0); opacity: 1; }
:root[data-theme="dark"] .ds-toast {
background: var(--gray-50); color: var(--gray-950);
}
.ds-toast__icon {
width: 20px; height: 20px;
flex-shrink: 0;
display: grid; place-items: center;
}
.ds-toast__msg { flex: 1; line-height: 1.4; }
.ds-toast__action {
flex-shrink: 0;
font-size: var(--fs-caption); font-weight: var(--fw-bk);
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
padding: 4px 6px;
border-radius: 4px;
transition: background var(--t-fast) ease-out;
}
.ds-toast__action:hover { background: rgba(255,255,255,0.1); }
:root[data-theme="dark"] .ds-toast__action:hover { background: rgba(0,0,0,0.06); }
@media (max-width: 599px) {
.ds-toast { right: 12px; left: 12px; bottom: 88px; min-width: 0; max-width: none; }
}
/* Spinner — auth submit / OAuth loading */
.ds-auth-spinner {
width: 14px; height: 14px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
display: inline-block;
animation: ds-auth-spin 0.7s linear infinite;
vertical-align: middle;
margin-right: 6px;
}
@keyframes ds-auth-spin {
to { transform: rotate(360deg); }
}
.ds-auth-oauth:disabled,
.ds-auth-submit:disabled { opacity: 0.7; cursor: not-allowed; }
/* Legal foot */
.ds-auth-legal {
font-size: var(--fs-caption-sm);
color: var(--fg-faint);
text-align: center;
max-width: 360px;
line-height: 1.6;
margin: 0;
}
.ds-auth-legal a {
color: inherit;
text-decoration: underline;
text-decoration-color: var(--border-subtle);
text-underline-offset: 2px;
}
/* ==========================================================
=== CARD IMAGE FALLBACK ===
라이브 데이터에서 이미지가 없거나 아직 확정되지 않은 경우 더미 카드를
보여주지 않고 중립 배경만 유지한다.
========================================================== */
.ds-listing__art:not([style]),
.ds-coll-card__art:not([style]),
.ds-inv__art:not([style]),
.ds-gacha-card-thumb__art:not([style]),
.ds-pool-card__art:not([style]),
.ds-card-thumb__art:not([style]),
.ds-mosaic-cell__visual:not([style]):not(.ds-mosaic-cell__visual--pack):not(.ds-mosaic-cell__visual--deck):not(.ds-mosaic-cell__visual--pack-hero):not(.ds-mosaic-cell__visual--card-grid),
.ds-grading-item__thumb:not([style]),
.ds-pay-order__pack-thumb:not([style]),
.ds-limited__hero-card:not([style]),
.ds-limited__deck > span:not([style]) {
background-image: none !important;
background-size: auto 88% !important; /* spec: 카드 height 88% — 5:7 카드가 1:1 컨테이너에 fit + 12% 상하 여백 */
background-position: center center !important;
background-repeat: no-repeat !important;
background-color: var(--gray-100) !important;
}
.ds-listing__art[style],
.ds-coll-card__art[style],
.ds-inv__art[style],
.ds-card-thumb__art[style],
.ds-mosaic-cell__visual[style]:not(.ds-mosaic-cell__visual--pack):not(.ds-mosaic-cell__visual--deck):not(.ds-mosaic-cell__visual--pack-hero):not(.ds-mosaic-cell__visual--card-grid),
.ds-grading-item__thumb[style],
.ds-pay-order__pack-thumb[style],
.ds-limited__hero-card[style],
.ds-limited__deck > span[style] {
background-size: auto 88%;
background-position: center center;
background-repeat: no-repeat;
background-color: var(--gray-100);
}
/* Card image vibrance experiment: image layer only, so neutral art backgrounds stay gray. */
.kado-card-image-vibrance-layer {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: var(--kado-card-image-url);
background-size: auto 88%;
background-position: center center;
background-repeat: no-repeat;
filter: var(--kado-card-image-filter);
}
.ds-inv__art > .kado-card-image-vibrance-layer { background-size: auto 88%; }
.ds-offer-row__thumb > .kado-card-image-vibrance-layer { background-size: cover; }
.ds-card-tile > .kado-card-image-vibrance-layer { background-size: 100% 100%; }
.ds-listing__art > :not(.kado-card-image-vibrance-layer),
.ds-coll-card__art > :not(.kado-card-image-vibrance-layer),
.ds-inv__art > :not(.kado-card-image-vibrance-layer):not(.ds-inv__status-chip),
.ds-gacha-card-thumb__art > :not(.kado-card-image-vibrance-layer):not(.ds-gacha-card-thumb__grade),
.ds-pool-card__art > :not(.kado-card-image-vibrance-layer),
.ds-offer-row__thumb > :not(.kado-card-image-vibrance-layer) {
position: relative;
z-index: 1;
}
body:not([data-kado-market-item-type="card_pack"]):not([data-kado-market-item-type="card_box"]):not([data-kado-market-item-type="pack_box"]) .ds-market-art__inner img,
body:not([data-kado-market-item-type="card_pack"]):not([data-kado-market-item-type="card_box"]):not([data-kado-market-item-type="pack_box"]) .ds-market-art__thumb img,
body:not([data-kado-market-item-type="card_pack"]):not([data-kado-market-item-type="card_box"]):not([data-kado-market-item-type="pack_box"]) .ds-card-art__face img,
body:not([data-kado-market-item-type="card_pack"]):not([data-kado-market-item-type="card_box"]):not([data-kado-market-item-type="pack_box"]) .ds-offer-cardview__image img,
body:not([data-kado-market-item-type="card_pack"]):not([data-kado-market-item-type="card_box"]):not([data-kado-market-item-type="pack_box"]) .ds-market-listing__thumb img,
body:not([data-kado-market-item-type="card_pack"]):not([data-kado-market-item-type="card_box"]):not([data-kado-market-item-type="pack_box"]) .ds-zoom-lightbox__img,
body:not([data-kado-market-item-type="card_pack"]):not([data-kado-market-item-type="card_box"]):not([data-kado-market-item-type="pack_box"]) .ds-card-zoom__viewport img {
filter: var(--kado-card-image-filter);
}
/* Mosaic visual--pack/--deck 변형 — 카드 이미지 override (위 글로벌 규칙 제외) */
.ds-mosaic-cell .ds-mosaic-cell__visual--pack {
background-image: url('/kado-design/assets/packs/pokemon-epic.webp') !important;
background-size: auto 78% !important;
background-position: center 56% !important;
background-color: var(--gray-50) !important;
}
.ds-mosaic-cell .ds-mosaic-cell__visual--deck {
background-image: none !important;
background-color: var(--gray-950) !important;
}
.is-live-skeleton .ds-mosaic-cell__visual,
.is-live-loading .ds-mosaic-cell__visual {
background-image: linear-gradient(90deg, var(--bg-subtle) 0%, var(--bg-muted, var(--gray-100)) 48%, var(--bg-subtle) 100%) !important;
background-size: 200% 100% !important;
background-position: 0 0 !important;
background-repeat: no-repeat !important;
background-color: var(--bg-subtle) !important;
animation: ds-skeleton-shimmer 1.4s ease-in-out infinite;
filter: none !important;
}
.is-live-skeleton .ds-mosaic-cell__visual > *,
.is-live-loading .ds-mosaic-cell__visual > * {
display: none !important;
}
/* deck 미니 카드들은 cover (좁은 면적이라 contain은 너무 작음) */
.ds-limited__deck > span {
background-size: cover !important;
}
:root[data-theme="dark"] .ds-listing__art:not([style]),
:root[data-theme="dark"] .ds-coll-card__art:not([style]),
:root[data-theme="dark"] .ds-inv__art:not([style]),
:root[data-theme="dark"] .ds-gacha-card-thumb__art:not([style]),
:root[data-theme="dark"] .ds-pool-card__art:not([style]),
:root[data-theme="dark"] .ds-card-thumb__art:not([style]),
:root[data-theme="dark"] .ds-mosaic-cell__visual:not([style]),
:root[data-theme="dark"] .ds-grading-item__thumb:not([style]),
:root[data-theme="dark"] .ds-pay-order__pack-thumb:not([style]),
:root[data-theme="dark"] .ds-limited__hero-card:not([style]),
:root[data-theme="dark"] .ds-limited__deck > span:not([style]) {
background-color: var(--gray-800) !important;
}
/* 팩 자리(ds-pack-hero__art, ds-pouch__bag)는 placeholder image 사용 안 함
— 사용자가 팩 디자인을 별도 자산으로 제공할 예정 */
.ds-pack-hero__art,
.ds-pouch__bag {
background-image: none !important;
}
/* ds-pool-card는 새 정보-rich 디자인 — 카드 자체엔 background X, 안의 .ds-pool-card__art만 이미지 */
/* 일부 placeholder는 ::before/::after pseudo (등급 mark)가 있어 이미지 위에 가려짐 — 제거 */
.ds-coll-card__art::before,
.ds-coll-card__art::after,
.ds-inv__art::before,
.ds-inv__art::after,
.ds-listing__art::before,
.ds-listing__art::after { display: none !important; }
/* v0.4: chip은 box-shadow 대신 1px border로 정의. 각 chip 룰 자체에서 border 처리. */
/* ==========================================================
=== SELLER PROFILE === (seller-profile.html)
========================================================== */
.ds-seller-hero {
display: grid;
grid-template-columns: 88px 1fr auto;
gap: 24px;
align-items: center;
padding: 32px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 16px;
margin: 24px 0;
position: relative;
}
.ds-seller-hero__avatar {
width: 88px; height: 88px;
border-radius: 50%;
background: var(--gray-950);
color: var(--gray-0);
display: grid; place-items: center;
font-size: 36px; font-weight: var(--fw-bk);
}
.ds-seller-hero__handle {
font-size: var(--fs-caption);
color: var(--fg-muted);
margin: 0 0 4px;
}
.ds-seller-hero__name {
font-size: 24px; font-weight: var(--fw-bk);
letter-spacing: -0.012em;
margin: 0 0 6px;
display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ds-seller-hero__badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 10px;
background: var(--bg-subtle);
border-radius: var(--r-pill);
font-size: var(--fs-caption-xs);
font-weight: var(--fw-bd);
color: var(--fg-base);
letter-spacing: 0;
}
.ds-seller-hero__badge .mi { font-size: 14px; }
.ds-seller-hero__since {
font-size: var(--fs-caption);
color: var(--fg-muted);
margin: 0;
}
.ds-seller-hero__stats {
display: flex; gap: 28px;
padding-left: 28px;
border-left: 1px solid var(--border-subtle);
}
.ds-seller-stat {
display: flex; flex-direction: column; gap: 2px;
}
.ds-seller-stat__label {
font-size: var(--fs-caption-xs);
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--fg-muted);
font-weight: var(--fw-bd);
}
.ds-seller-stat__value {
font-size: 22px; font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums;
letter-spacing: -0.012em;
}
.ds-seller-stat__value small {
font-size: 13px; color: var(--fg-muted); margin-left: 2px;
}
.ds-seller-stat__sub {
font-size: var(--fs-caption-sm);
color: var(--fg-muted);
}
.ds-seller-stat__sub--up { color: var(--success-700, #137a3a); font-weight: var(--fw-bd); }
.ds-seller-stat__sub--down { color: var(--danger-600); font-weight: var(--fw-bd); }
/* ==========================================================
=== Networth section (seller-profile) === 컬렉션 가치 추이
"이 사람 개쩐다" trust signal
========================================================== */
.ds-networth {
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 16px;
padding: 24px 28px;
margin-bottom: 32px;
color: var(--success-700, #137a3a); /* SVG currentColor */
}
:root[data-theme="dark"] .ds-networth { color: var(--mystic-300); }
.ds-networth__head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
margin-bottom: 12px;
color: var(--fg-base);
}
.ds-networth__label {
margin: 0 0 6px;
font-size: var(--fs-caption-xs);
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--fg-muted);
font-weight: var(--fw-bd);
}
.ds-networth__hero {
margin: 0;
display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.ds-networth__amount {
font-size: clamp(28px, 3vw, 36px);
font-weight: var(--fw-bk);
letter-spacing: -0.018em;
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.ds-networth__delta {
font-size: var(--fs-body-sm);
font-weight: var(--fw-bd);
font-variant-numeric: tabular-nums;
}
.ds-networth__delta--up { color: var(--success-700, #137a3a); }
.ds-networth__delta--down { color: var(--danger-600); }
:root[data-theme="dark"] .ds-networth__delta--up { color: var(--mystic-300); }
.ds-networth__range {
display: inline-flex; gap: 2px;
background: var(--bg-subtle);
border-radius: var(--r-pill);
padding: 4px;
flex-shrink: 0;
}
.ds-networth__range-btn {
height: 28px;
padding: 0 12px;
background: transparent;
border: 0;
border-radius: var(--r-pill);
font-size: var(--fs-caption-sm);
font-weight: var(--fw-bd);
color: var(--fg-muted);
cursor: pointer;
transition: background var(--t-fast) ease-out, color var(--t-fast) ease-out;
letter-spacing: 0.02em;
}
.ds-networth__range-btn:hover { color: var(--fg-base); }
.ds-networth__range-btn.is-active {
background: var(--bg-card);
color: var(--fg-base);
box-shadow: var(--shadow-1);
}
.ds-networth__chart {
margin: 4px 0 16px;
}
.ds-networth__milestones {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 16px;
padding-top: 16px;
border-top: 1px solid var(--border-subtle);
color: var(--fg-base);
}
.ds-networth__milestone {
display: flex; flex-direction: column; gap: 4px;
}
.ds-networth__milestone-label {
font-size: var(--fs-caption-xs);
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--fg-muted);
font-weight: var(--fw-bd);
}
.ds-networth__milestone-value {
font-size: var(--fs-body-sm);
font-weight: var(--fw-bk);
letter-spacing: -0.005em;
font-variant-numeric: tabular-nums;
}
.ds-networth__milestone-value small {
font-weight: var(--fw-rg);
color: var(--fg-muted);
margin-left: 2px;
font-size: var(--fs-caption-sm);
}
@media (max-width: 720px) {
.ds-networth { padding: 20px; }
.ds-networth__milestones { grid-template-columns: 1fr; gap: 12px; }
}
.ds-seller-hero__actions {
position: absolute;
top: 24px; right: 24px;
display: flex; gap: 8px;
}
@media (max-width: 1023px) {
.ds-seller-hero {
grid-template-columns: 72px 1fr;
gap: 16px;
padding: 24px;
}
.ds-seller-hero__avatar { width: 72px; height: 72px; font-size: 30px; }
.ds-seller-hero__stats {
grid-column: 1 / -1;
padding: 18px 0 0;
border-left: 0;
border-top: 1px solid var(--border-subtle);
margin-top: 6px;
justify-content: space-between;
width: 100%;
}
.ds-seller-hero__actions {
position: static;
margin-top: 12px;
grid-column: 1 / -1;
}
}
/* Bio */
.ds-seller-bio {
margin: 24px 0 32px;
padding: 20px 24px;
background: var(--bg-subtle);
border-radius: 12px;
}
.ds-seller-bio__title {
font-size: var(--fs-caption);
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--fg-muted);
font-weight: var(--fw-bk);
margin: 0 0 8px;
}
.ds-seller-bio__text {
font-size: var(--fs-body-sm);
color: var(--fg-base);
line-height: 1.6;
margin: 0;
}
/* Reviews */
.ds-seller-reviews {
padding: 32px 0 64px;
}
.ds-seller-review-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 14px;
}
.ds-seller-review {
padding: 18px 20px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 12px;
}
.ds-seller-review__head {
display: flex; justify-content: space-between; align-items: baseline;
gap: 12px;
margin-bottom: 8px;
}
.ds-seller-review__rating {
font-size: var(--fs-caption);
font-weight: var(--fw-bk);
color: var(--fg-base);
letter-spacing: 0.06em;
}
.ds-seller-review__user {
font-size: var(--fs-caption-sm);
color: var(--fg-muted);
}
.ds-seller-review__text {
font-size: var(--fs-body-sm);
color: var(--fg-base);
line-height: 1.5;
margin: 0 0 6px;
}
.ds-seller-review__item {
font-size: var(--fs-caption-sm);
color: var(--fg-muted);
margin: 0;
}
/* === Wizard modal (다단계 인증/입력) === */
.ds-wizard__step-indicator {
font-size: var(--fs-caption-xs);
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--fg-muted);
font-weight: var(--fw-bd);
margin: 0 0 4px;
}
.ds-wizard__info {
display: flex; flex-direction: column; align-items: center;
gap: 12px;
padding: 24px 12px;
background: var(--bg-subtle);
border-radius: 10px;
text-align: center;
}
.ds-wizard__info-icon {
font-size: 40px;
color: var(--fg-base);
background: var(--bg-card);
width: 64px; height: 64px;
border-radius: 50%;
display: grid; place-items: center;
}
.ds-wizard__info-text {
font-size: var(--fs-body-sm);
color: var(--fg-base);
line-height: 1.5;
margin: 0;
max-width: 300px;
}
/* 인증코드 재전송 — 라인 그래픽 (text-decoration underline 끊김 fix) */
.ds-wizard__resend {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 12px;
padding: 6px 0 5px;
font-size: var(--fs-caption);
font-weight: var(--fw-bd);
color: var(--fg-muted);
background: none;
border: 0;
border-bottom: 1px solid var(--border-base);
cursor: pointer;
transition: var(--t-fast) ease-out;
}
.ds-wizard__resend:hover {
color: var(--fg-base);
border-bottom-color: var(--fg-base);
}
.ds-wizard__resend .mi { font-size: 14px; }
.ds-wizard__select {
height: 44px;
padding: 0 14px;
background: var(--bg-base);
border: 1px solid var(--border-base);
border-radius: 8px;
font-size: var(--fs-body-sm);
color: var(--fg-base);
font-family: inherit;
width: 100%;
}
/* === ds-inv status chip — v0.4: 메트릭 통일 + 시스템 컬러 only ===
보관중=gray, 판매중=success, 리딤=info, 등급중=warning */
.ds-inv__status-chip {
display: inline-flex; align-items: center; justify-content: center;
height: 20px; padding: 0 8px;
box-sizing: border-box;
border: 1px solid transparent;
border-radius: 999px;
font-size: 10px; font-weight: 700;
letter-spacing: 0.04em;
line-height: 1;
white-space: nowrap;
}
.ds-inv__status-chip--vault {
background: var(--gray-100);
border-color: var(--gray-300);
color: var(--gray-700);
}
:root[data-theme="dark"] .ds-inv__status-chip--vault {
background: var(--gray-800); border-color: var(--gray-700); color: var(--gray-200);
}
.ds-inv__status-chip--listed {
background: color-mix(in srgb, var(--success-500) 10%, var(--bg-base));
border-color: color-mix(in srgb, var(--success-500) 38%, transparent);
color: var(--success-700);
}
:root[data-theme="dark"] .ds-inv__status-chip--listed {
background: color-mix(in srgb, var(--success-500) 18%, var(--gray-900));
border-color: color-mix(in srgb, var(--success-500) 50%, transparent);
color: var(--success-500);
}
.ds-inv__status-chip--redeemed {
background: var(--gray-700); color: var(--gray-0); border-color: var(--gray-600);
}
.ds-inv__status-chip--redeem {
background: color-mix(in srgb, var(--info-500) 10%, var(--bg-base));
border-color: color-mix(in srgb, var(--info-500) 38%, transparent);
color: color-mix(in srgb, var(--info-500) 70%, var(--gray-950));
}
:root[data-theme="dark"] .ds-inv__status-chip--redeem {
background: color-mix(in srgb, var(--info-500) 18%, var(--gray-900));
border-color: color-mix(in srgb, var(--info-500) 50%, transparent);
color: var(--info-500);
}
.ds-inv__status-chip--grading {
background: color-mix(in srgb, var(--warning-500) 12%, var(--bg-base));
border-color: color-mix(in srgb, var(--warning-500) 45%, transparent);
color: color-mix(in srgb, var(--warning-500) 65%, var(--gray-950));
}
:root[data-theme="dark"] .ds-inv__status-chip--grading {
background: color-mix(in srgb, var(--warning-500) 18%, var(--gray-900));
border-color: color-mix(in srgb, var(--warning-500) 50%, transparent);
color: var(--warning-500);
}
/* offer — footer 우측 inline 버튼 */
.ds-inv__offer {
flex-shrink: 0;
padding: 4px 10px;
background: transparent;
border: 1px solid var(--border-base);
border-radius: var(--r-pill);
font-size: 11px; font-weight: var(--fw-bd);
color: var(--fg-base);
cursor: pointer;
transition: var(--t-fast) ease-out;
}
.ds-inv__offer:hover { background: var(--gray-950); color: var(--gray-0); border-color: var(--gray-950); }
:root[data-theme="dark"] .ds-inv__offer:hover { background: var(--gray-50); color: var(--gray-950); border-color: var(--gray-50); }
/* === wallet __head-actions + 날짜 input === */
.ds-wallet-tx__head-actions {
display: inline-flex; align-items: center; gap: 8px;
}
.ds-wallet-tx__date-input {
height: 36px;
padding: 0 10px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: var(--r-pill);
font-size: var(--fs-caption);
color: var(--fg-base);
font-family: inherit;
}
.ds-wallet-tx__date-input:focus { outline: none; border-color: var(--gray-950); }
/* === wallet 에러 라인 === */
.ds-charge-custom__error {
margin: 8px 0 0;
font-size: var(--fs-caption-sm);
color: var(--danger-600);
line-height: 1.4;
}
/* ==========================================================
=== eBay 대행 wizard === 카드 선택 / 사진 / 가격 / 수수료 / 정산
gradingWizard와 동일 ds-wizard__* 스켈레톤 재사용. 여기엔 추가 컴포넌트만
========================================================== */
/* Step 1 — 카드 선택 (radiogroup) */
.ds-ebay-cards {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
@media (max-width: 720px) {
.ds-ebay-cards { grid-template-columns: 1fr; }
}
.ds-ebay-card { cursor: pointer; }
.ds-ebay-card input { position: absolute; opacity: 0; pointer-events: none; }
.ds-ebay-card__inner {
display: flex; flex-direction: column;
background: var(--bg-card);
border: 1.5px solid var(--border-base);
border-radius: 12px;
overflow: hidden;
transition: border-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
}
.ds-ebay-card:hover .ds-ebay-card__inner { border-color: var(--gray-500); }
.ds-ebay-card input:checked ~ .ds-ebay-card__inner {
border-color: var(--gray-950);
box-shadow: 0 0 0 3px var(--bg-subtle);
}
:root[data-theme="dark"] .ds-ebay-card input:checked ~ .ds-ebay-card__inner { border-color: var(--gray-50); }
.ds-ebay-card__art {
aspect-ratio: 1 / 1;
background: var(--gray-50);
position: relative;
display: grid; place-items: center;
}
.ds-ebay-card__art::after {
content: '✦'; font-size: 64px; font-weight: 900;
color: rgba(0,0,0,0.06);
}
.ds-ebay-card__art[data-kado-grade="mystic"] {
background: linear-gradient(180deg, #ECFDF3 0%, #D9FBE6 100%);
}
.ds-ebay-card__art[data-kado-grade="legend"] {
background: linear-gradient(180deg, #FFF7DA 0%, #FCEFB1 100%);
}
.ds-ebay-card__art[data-kado-grade="mystic"]::after { color: rgba(19,122,58,0.4); }
.ds-ebay-card__art[data-kado-grade="legend"]::after { color: rgba(184,132,46,0.5); }
.ds-ebay-card__body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.ds-ebay-card__name {
font-size: var(--fs-body-sm); font-weight: var(--fw-bk);
letter-spacing: -0.005em;
display: flex; align-items: baseline; gap: 6px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-ebay-card__name span {
font-size: 10px; font-weight: var(--fw-bk);
padding: 2px 6px;
background: var(--gray-950); color: var(--gray-0);
border-radius: 3px;
}
.ds-ebay-card__set {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-ebay-card__price {
margin-top: 4px;
font-size: var(--fs-caption); color: var(--fg-base);
font-weight: var(--fw-bd);
font-variant-numeric: tabular-nums;
}
.ds-ebay-card__price small { color: var(--fg-muted); font-weight: var(--fw-rg); margin-left: 2px; }
/* Step 1 — 6면 사진 슬롯 */
.ds-ebay-photos {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.ds-ebay-photo {
aspect-ratio: 1 / 1;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4px;
background: var(--bg-subtle);
border: 1.5px dashed var(--border-base);
border-radius: 10px;
cursor: pointer;
transition: border-color var(--t-fast) ease-out, background var(--t-fast) ease-out;
}
.ds-ebay-photo:hover { border-color: var(--gray-700); background: var(--gray-100); }
:root[data-theme="dark"] .ds-ebay-photo:hover { background: var(--gray-800); }
.ds-ebay-photo .mi { font-size: 24px; color: var(--fg-muted); }
.ds-ebay-photo__label {
font-size: var(--fs-caption-sm); color: var(--fg-base); font-weight: var(--fw-bd);
display: inline-flex; align-items: center; gap: 4px;
}
.ds-ebay-photo__label em {
font-style: normal; font-weight: 800; font-size: 9px;
padding: 1px 5px;
background: var(--gray-950); color: var(--gray-0);
border-radius: 3px; letter-spacing: 0.04em;
}
:root[data-theme="dark"] .ds-ebay-photo__label em { background: var(--gray-50); color: var(--gray-950); }
.ds-ebay-photo[data-uploaded="true"] {
border-style: solid; background: var(--bg-card);
border-color: var(--gray-950);
}
/* Step 2 — Detected card preview */
.ds-detected-card {
display: flex; align-items: center; gap: 12px;
padding: 14px;
background: var(--bg-subtle);
border-radius: 10px;
margin-bottom: 16px;
}
.ds-detected-card__art {
width: 72px; height: 72px; flex-shrink: 0;
background: var(--gray-100) center / 88% auto no-repeat;
background-image: none;
border-radius: 6px;
border: 1px solid var(--border-base);
}
:root[data-theme="dark"] .ds-detected-card__art { background-color: var(--gray-800); }
.ds-detected-card__hint {
display: inline-flex; align-items: center; gap: 6px;
font-size: var(--fs-caption); color: var(--fg-muted);
font-weight: var(--fw-md);
line-height: 1.4;
}
.ds-detected-card__hint .mi { font-size: 16px; color: var(--mystic-500, var(--fg-base)); }
/* Step 3 — 가격 hero + tier */
.ds-price-hero {
display: flex; align-items: baseline; justify-content: space-between;
padding: 16px 20px;
background: var(--bg-subtle);
border-radius: 12px;
margin-bottom: 16px;
}
.ds-price-hero__label {
font-size: var(--fs-caption); color: var(--fg-muted); font-weight: var(--fw-md);
}
.ds-price-hero__value {
font-size: 22px; font-weight: var(--fw-bd); /* v0.5: bk → bd (max 600) */
letter-spacing: -0.012em;
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.ds-price-hero__value small { font-size: 14px; font-weight: var(--fw-rg); color: var(--fg-muted); margin-left: 2px; }
.ds-price-tier {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
margin-bottom: 16px;
}
@media (max-width: 720px) { .ds-price-tier { grid-template-columns: 1fr; } }
.ds-price-tier__option { cursor: pointer; }
.ds-price-tier__option input { position: absolute; opacity: 0; pointer-events: none; }
.ds-price-tier__inner {
position: relative;
display: flex; flex-direction: column; gap: 4px;
padding: 14px 14px 16px;
background: var(--bg-card);
border: 1.5px solid var(--border-base);
border-radius: 12px;
transition: border-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
}
.ds-price-tier__option:hover .ds-price-tier__inner { border-color: var(--gray-500); }
.ds-price-tier__option input:checked ~ .ds-price-tier__inner {
border-color: var(--gray-950);
box-shadow: 0 0 0 3px var(--bg-subtle);
}
:root[data-theme="dark"] .ds-price-tier__option input:checked ~ .ds-price-tier__inner { border-color: var(--gray-50); }
.ds-price-tier__badge {
/* deprecated — use __rec-inline instead */
display: none;
}
.ds-price-tier__head {
font-size: var(--fs-caption); color: var(--fg-muted); font-weight: var(--fw-bd);
display: inline-flex; align-items: center; gap: 6px;
}
.ds-price-tier__rec-inline {
display: inline-flex; align-items: center;
padding: 1px 6px;
background: var(--mystic-100);
color: var(--mystic-800);
border-radius: 4px;
font-size: 9px; font-weight: 800;
letter-spacing: 0.04em; line-height: 1.3;
}
:root[data-theme="dark"] .ds-price-tier__rec-inline {
background: var(--mystic-800); color: var(--mystic-100);
}
.ds-price-tier__price {
font-size: 20px; font-weight: var(--fw-bk);
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
.ds-price-tier__price small { font-size: 12px; font-weight: var(--fw-rg); color: var(--fg-muted); }
.ds-price-tier__rate {
margin-top: 6px;
font-size: var(--fs-caption-sm); color: var(--fg-muted);
}
.ds-price-tier__rate strong {
font-size: 14px; color: var(--fg-base);
font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums;
margin-right: 4px;
}
.ds-price-tier__time { font-size: var(--fs-caption-xs); color: var(--fg-faint); }
.ds-price-custom .ds-wizard__field { margin-bottom: 0; }
/* Step 4 + 5 — fee table (영수증 패턴) */
.ds-fee-table {
margin: 0;
border: 1px solid var(--border-base);
border-radius: 12px;
overflow: hidden;
}
.ds-fee-table > div {
display: flex; justify-content: space-between; align-items: baseline;
padding: 12px 16px;
border-bottom: 1px solid var(--border-subtle);
font-size: var(--fs-body-sm);
}
.ds-fee-table > div:last-child { border-bottom: 0; }
.ds-fee-table dt {
margin: 0;
color: var(--fg-base);
font-weight: var(--fw-md);
}
.ds-fee-table dt small {
color: var(--fg-muted); font-weight: var(--fw-rg); margin-left: 4px;
}
.ds-fee-table dd {
margin: 0;
font-weight: var(--fw-bd);
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.ds-fee-table dd small { font-size: 11px; color: var(--fg-muted); font-weight: var(--fw-rg); margin-left: 1px; }
.ds-fee-table > div.is-deduct dd { color: var(--danger-600); }
.ds-fee-table > div.is-total {
background: var(--bg-subtle);
padding: 16px 20px;
}
.ds-fee-table > div.is-total dt { font-weight: var(--fw-bk); font-size: var(--fs-body-md); }
.ds-fee-table > div.is-total dd { font-weight: var(--fw-bk); font-size: 22px; letter-spacing: -0.012em; }
.ds-fee-table.is-collapsed > div { padding: 10px 16px; }
.ds-fee-note {
display: flex; align-items: flex-start; gap: 6px;
margin: 12px 0 0;
padding: 10px 12px;
background: var(--bg-subtle);
border-radius: 8px;
font-size: var(--fs-caption-sm); color: var(--fg-muted);
line-height: 1.45;
}
.ds-fee-note .mi { font-size: 16px; color: var(--fg-muted); flex-shrink: 0; margin-top: 1px; }
/* Step 4 — 수익 hero. v0.5: 그라디언트 bg 제거 / 글자 h2 사이즈로 / weight 600 */
.ds-payout-hero {
display: flex; flex-direction: column; align-items: center;
text-align: center;
gap: 6px;
padding: 24px 20px;
background: var(--bg-subtle);
border: 1px solid var(--border-base);
border-radius: 14px;
margin-bottom: 16px;
}
:root[data-theme="dark"] .ds-payout-hero {
background: var(--gray-900);
}
.ds-payout-hero__label {
font-size: var(--fs-caption); color: var(--fg-muted);
font-weight: var(--fw-md); /* v0.5: bd → md (eyebrow 룰) */
letter-spacing: 0.04em; text-transform: uppercase;
}
.ds-payout-hero__value {
font-size: var(--fs-h2); /* v0.5: clamp(32-44) → h2 (26px) */
font-weight: var(--fw-bd); /* v0.5: 900 → 600 */
letter-spacing: -0.014em;
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
color: var(--fg-base);
line-height: 1.15;
}
.ds-payout-hero__value small {
font-size: 14px; font-weight: var(--fw-rg);
color: var(--fg-muted); margin-left: 4px;
}
.ds-payout-hero__schedule {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
margin-top: 4px;
}
/* 수수료 상세 — collapsible, 소극적 톤 */
.ds-fee-breakdown {
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 12px;
overflow: hidden;
}
.ds-fee-breakdown[open] { box-shadow: var(--shadow-1); }
.ds-fee-breakdown summary {
list-style: none;
cursor: pointer;
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px;
font-size: var(--fs-caption); color: var(--fg-muted);
font-weight: var(--fw-bd);
user-select: none;
}
.ds-fee-breakdown summary::-webkit-details-marker { display: none; }
.ds-fee-breakdown summary:hover { background: var(--bg-subtle); }
.ds-fee-breakdown__summary-label { display: inline-flex; align-items: center; gap: 6px; }
.ds-fee-breakdown__chev {
font-size: 18px;
transition: transform var(--t-fast) ease-out;
}
.ds-fee-breakdown[open] .ds-fee-breakdown__chev { transform: rotate(180deg); }
.ds-fee-breakdown__list {
list-style: none; margin: 0;
padding: 4px 16px 12px;
border-top: 1px solid var(--border-subtle);
}
.ds-fee-breakdown__list li {
display: flex; justify-content: space-between; align-items: baseline;
padding: 6px 0;
font-size: var(--fs-caption-sm);
color: var(--fg-muted); /* 소극적 톤 — 빨간색 X */
}
.ds-fee-breakdown__list li > strong,
.ds-fee-breakdown__list li > span:last-child {
font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
font-weight: var(--fw-md);
color: var(--fg-muted);
}
.ds-fee-breakdown__list li:first-child > strong {
color: var(--fg-base); /* 판매가만 검정 톤 (수수료는 muted) */
font-weight: var(--fw-bd);
}
.ds-fee-breakdown__note {
margin: 8px 16px 14px;
font-size: var(--fs-caption-xs);
color: var(--fg-faint);
line-height: 1.45;
}
/* Footer split — 좌우 양 끝 배치 */
.ds-wizard__footer--split {
justify-content: space-between !important;
}
.ds-wizard__footer-left,
.ds-wizard__footer-right {
display: flex; gap: 8px;
}
/* hidden attribute가 display:flex보다 우선되도록 */
.ds-btn[hidden] { display: none !important; }
/* Step 5 — 정산 영수증 */
.ds-ebay-receipt { display: flex; flex-direction: column; gap: 16px; }
.ds-ebay-receipt__card {
display: flex; gap: 12px;
padding: 12px;
border: 1px solid var(--border-base);
border-radius: 12px;
background: var(--bg-card);
align-items: center;
}
.ds-ebay-receipt__art {
width: 56px; height: 56px;
border-radius: 8px;
background: var(--gray-100);
flex-shrink: 0;
}
:root[data-theme="dark"] .ds-ebay-receipt__art { background: var(--gray-800); }
.ds-ebay-receipt__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ds-ebay-receipt__set { font-size: var(--fs-caption-sm); color: var(--fg-muted); }
.ds-ebay-receipt__name { font-size: var(--fs-body-sm); font-weight: var(--fw-bk); }
.ds-ebay-receipt__cert {
display: inline-block; align-self: flex-start;
margin-top: 4px;
padding: 2px 6px;
background: var(--gray-950); color: var(--gray-0);
border-radius: 3px;
font-size: 10px; font-weight: var(--fw-bk);
}
.ds-ebay-receipt__schedule {
display: flex; align-items: center; gap: 6px;
margin: 0;
padding: 12px 14px;
background: var(--bg-subtle);
border-radius: 8px;
font-size: var(--fs-caption); color: var(--fg-base);
}
.ds-ebay-receipt__schedule .mi { font-size: 18px; color: var(--fg-muted); }
.ds-ebay-receipt__schedule strong { font-weight: var(--fw-bk); }
/* ==========================================================
=== CALENDAR === 시스템 달력 대체 커스텀 컴포넌트
사용처: wallet 거래 내역 날짜 필터 등
========================================================== */
.ds-calendar { position: relative; display: inline-block; }
.ds-calendar__trigger {
display: inline-flex; align-items: center; gap: 6px;
height: 36px;
padding: 0 10px 0 12px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: var(--r-pill);
font-size: var(--fs-caption); font-weight: var(--fw-bd);
color: var(--fg-base);
cursor: pointer;
transition: border-color var(--t-fast) ease-out, background var(--t-fast) ease-out;
font-variant-numeric: tabular-nums;
}
.ds-calendar__trigger:hover { border-color: var(--gray-500); }
.ds-calendar__trigger[aria-expanded="true"] {
border-color: var(--gray-950);
background: var(--bg-subtle);
}
:root[data-theme="dark"] .ds-calendar__trigger[aria-expanded="true"] {
border-color: var(--gray-50);
}
.ds-calendar__trigger > .mi:first-child { font-size: 18px; color: var(--fg-muted); }
.ds-calendar__chev {
font-size: 18px;
transition: transform var(--t-fast) ease-out;
color: var(--fg-muted);
}
.ds-calendar.is-open .ds-calendar__chev { transform: rotate(180deg); }
.ds-calendar__value { letter-spacing: -0.005em; }
.ds-calendar__value[data-empty="true"] { color: var(--fg-muted); font-weight: var(--fw-md); }
/* Reset button — clear inside trigger */
.ds-calendar__clear {
display: none;
background: none; border: 0; padding: 0; margin: 0 0 0 2px;
width: 18px; height: 18px;
border-radius: 50%;
color: var(--fg-muted);
cursor: pointer;
align-items: center; justify-content: center;
transition: background var(--t-fast) ease-out, color var(--t-fast) ease-out;
}
.ds-calendar__clear:hover { background: var(--gray-200); color: var(--fg-base); }
.ds-calendar__clear .mi { font-size: 14px; }
.ds-calendar[data-has-value="true"] .ds-calendar__clear { display: inline-flex; }
/* Popup */
.ds-calendar__popup {
position: absolute;
top: calc(100% + 6px); right: 0;
width: 308px;
padding: 12px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 14px;
box-shadow: var(--shadow-3);
z-index: 9999;
display: none;
}
.ds-calendar.is-open { z-index: 9999; }
.ds-calendar.is-open .ds-calendar__popup { display: block; }
/* Head */
.ds-calendar__head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 8px;
}
.ds-calendar__title {
font-size: var(--fs-body-sm);
font-weight: var(--fw-bk);
letter-spacing: -0.005em;
color: var(--fg-base);
font-variant-numeric: tabular-nums;
}
.ds-calendar__nav {
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: 0;
border-radius: 6px;
color: var(--fg-base);
cursor: pointer;
transition: background var(--t-fast) ease-out;
}
.ds-calendar__nav:hover { background: var(--bg-subtle); }
.ds-calendar__nav .mi { font-size: 18px; }
/* Weekdays row */
.ds-calendar__weekdays {
display: grid; grid-template-columns: repeat(7, 1fr);
margin: 0 0 4px;
}
.ds-calendar__weekdays > span {
height: 28px;
display: inline-flex; align-items: center; justify-content: center;
font-size: var(--fs-caption-sm);
font-weight: var(--fw-bd);
color: var(--fg-muted);
}
.ds-calendar__weekdays > span:first-child { color: var(--danger-600); }
.ds-calendar__weekdays > span:last-child { color: var(--rare-700, #b73828); }
/* Day grid */
.ds-calendar__grid {
display: grid; grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.ds-calendar__day {
height: 36px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: 0;
border-radius: 8px;
font-size: var(--fs-caption);
font-weight: var(--fw-md);
color: var(--fg-base);
cursor: pointer;
transition: background var(--t-fast) ease-out, color var(--t-fast) ease-out;
font-variant-numeric: tabular-nums;
position: relative;
}
.ds-calendar__day:hover:not(:disabled):not(.is-selected) { background: var(--bg-subtle); }
.ds-calendar__day[data-out="true"] { color: var(--fg-faint); opacity: 0.5; }
.ds-calendar__day[data-weekday="0"]:not(.is-selected):not([data-out="true"]) { color: var(--danger-600); }
.ds-calendar__day[data-weekday="6"]:not(.is-selected):not([data-out="true"]) { color: var(--rare-700, #b73828); }
.ds-calendar__day.is-today:not(.is-selected) {
font-weight: var(--fw-bk);
box-shadow: inset 0 0 0 1.5px var(--gray-950);
}
:root[data-theme="dark"] .ds-calendar__day.is-today:not(.is-selected) {
box-shadow: inset 0 0 0 1.5px var(--gray-50);
}
.ds-calendar__day.is-selected {
background: var(--gray-950);
color: var(--gray-0);
font-weight: var(--fw-bk);
}
:root[data-theme="dark"] .ds-calendar__day.is-selected {
background: var(--mystic-300);
color: var(--gray-950);
}
.ds-calendar__day:disabled { color: var(--fg-faint); cursor: not-allowed; opacity: 0.4; }
/* Presets row */
.ds-calendar__presets {
display: flex; flex-wrap: wrap; gap: 6px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--border-subtle);
}
.ds-calendar__preset {
height: 28px;
padding: 0 10px;
background: var(--bg-subtle);
border: 0;
border-radius: var(--r-pill);
font-size: var(--fs-caption-sm);
font-weight: var(--fw-bd);
color: var(--fg-base);
cursor: pointer;
transition: background var(--t-fast) ease-out, color var(--t-fast) ease-out;
}
.ds-calendar__preset:hover { background: var(--gray-200); }
:root[data-theme="dark"] .ds-calendar__preset:hover { background: var(--gray-700); }
.ds-calendar__preset[data-preset="clear"] { color: var(--fg-muted); margin-left: auto; }
/* Mobile fit */
@media (max-width: 480px) {
.ds-calendar__popup {
position: fixed;
top: auto; bottom: 8px; right: 8px; left: 8px;
width: auto;
}
}
/* ==========================================================
=== .ds-app-list / .ds-app-row — 신청 내역 리스트 (grading 페이지) ===
PSA / eBay 대행 신청 내역. art thumb + 카드명 + 진행 상태 + 신청번호.
========================================================== */
.ds-app-list {
display: flex; flex-direction: column;
gap: 8px;
list-style: none; padding: 0; margin: 0;
}
.ds-app-row {
display: grid;
grid-template-columns: 56px 1fr auto auto;
gap: 16px;
align-items: center;
padding: 12px 16px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 12px;
transition: border-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
}
.ds-app-row:hover {
border-color: var(--gray-300);
box-shadow: var(--shadow-1);
}
.ds-app-row__art {
width: 56px; height: 56px;
background-color: var(--gray-100);
background-image: none;
background-size: auto 88%;
background-position: center;
background-repeat: no-repeat;
border-radius: 6px;
flex-shrink: 0;
}
:root[data-theme="dark"] .ds-app-row__art { background-color: var(--gray-800); }
.ds-app-row__main {
min-width: 0;
display: flex; flex-direction: column;
gap: 4px;
}
.ds-app-row__title {
font-size: var(--fs-body-sm); font-weight: var(--fw-bd);
color: var(--fg-base);
margin: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-app-row__meta {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
margin: 0;
}
.ds-app-row__progress {
display: flex; flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.ds-app-row__chip {
display: inline-flex; align-items: center; justify-content: center;
height: 20px; padding: 0 8px;
box-sizing: border-box;
border: 1px solid transparent;
border-radius: 999px;
font-size: 10px; font-weight: var(--fw-bd);
letter-spacing: 0.04em;
line-height: 1;
white-space: nowrap;
}
.ds-app-row__chip--grading {
background: color-mix(in srgb, var(--warning-500) 12%, var(--bg-base));
border-color: color-mix(in srgb, var(--warning-500) 45%, transparent);
color: color-mix(in srgb, var(--warning-500) 65%, var(--gray-950));
}
.ds-app-row__chip--listed {
background: color-mix(in srgb, var(--info-500) 10%, var(--bg-base));
border-color: color-mix(in srgb, var(--info-500) 38%, transparent);
color: color-mix(in srgb, var(--info-500) 70%, var(--gray-950));
}
.ds-app-row__chip--done,
.ds-app-row__chip--settled {
background: color-mix(in srgb, var(--success-500) 10%, var(--bg-base));
border-color: color-mix(in srgb, var(--success-500) 38%, transparent);
color: var(--success-700);
}
.ds-app-row__step {
font-size: var(--fs-caption-sm); color: var(--fg-muted);
font-variant-numeric: tabular-nums;
}
.ds-app-row__id {
display: flex; align-items: center; gap: 4px;
font-size: var(--fs-caption-sm); color: var(--fg-faint);
font-variant-numeric: tabular-nums;
padding: 4px 8px;
background: var(--bg-subtle);
border-radius: 6px;
}
.ds-app-row__copy {
background: transparent; border: 0;
padding: 2px;
color: var(--fg-faint);
cursor: pointer;
transition: color var(--t-fast) ease-out;
display: inline-flex; align-items: center; justify-content: center;
}
.ds-app-row__copy:hover { color: var(--fg-base); }
.ds-app-row__copy .mi { font-size: 14px; }
.ds-app-empty {
display: flex;
align-items: center;
gap: 16px;
padding: 22px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 16px;
}
.ds-app-empty__icon {
width: 48px;
height: 48px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--bg-muted);
color: var(--fg-muted);
flex-shrink: 0;
}
.ds-app-empty__icon .mi { font-size: 24px; }
.ds-app-empty__body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.ds-app-empty__title {
margin: 0;
font-size: var(--fs-body-sm);
font-weight: var(--fw-bd);
color: var(--fg-base);
}
.ds-app-empty__sub {
margin: 0;
font-size: var(--fs-caption);
color: var(--fg-muted);
}
.ds-live-loading .ds-empty__icon-ball,
.is-live-loading .ds-mosaic-cell__visual {
animation: ds-live-loading-pulse 1.3s ease-in-out infinite;
}
@keyframes ds-live-loading-pulse {
0%, 100% { opacity: 0.58; }
50% { opacity: 1; }
}
@media (max-width: 720px) {
.ds-app-row {
grid-template-columns: 48px 1fr auto;
grid-template-areas:
"art main progress"
"art id id";
gap: 12px;
}
.ds-app-row__art { width: 48px; height: 48px; grid-area: art; }
.ds-app-row__main { grid-area: main; }
.ds-app-row__progress { grid-area: progress; align-items: flex-end; }
.ds-app-row__id { grid-area: id; align-self: flex-start; font-size: 10px; }
.ds-app-empty {
align-items: flex-start;
padding: 18px;
}
}
/* ==========================================================
=== v0.6 STYLE E (FINAL) — 카드 썸네일 통합 룰 ===
- 가챠 등급(MYSTIC/LEGENDARY/EPIC/RARE/COMMON) chip 제거
- PSA/BGS chip도 art TR에서 제거 → 가격 옆 inline 텍스트로 노출
- Sub line 제거
- Title 2줄 허용 (대소문자 mixed)
- 단위: P (마켓 포인트 거래)
========================================================== */
.ds-listing__rarity,
.ds-coll-card__grade,
.ds-pool-card__label,
.ds-card-thumb__chip--grade,
.ds-card-thumb__chip--rarity {
display: none !important;
}
.ds-listing__price-row .ds-listing__grade { margin-left: auto; }
.ds-listing__sub,
.ds-coll-card__set {
display: none !important;
}
.ds-listing__name,
.ds-coll-card__name,
.ds-inv__name {
white-space: normal !important;
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.35 !important;
/* em-based 로 폰트 사이즈와 무관하게 정확히 2 줄. 기존엔 14px 고정값
기준이라 모바일 13px 폰트에선 calc(14*1.35*2) > 실제 2 줄 높이가 되어
3 번째 줄 윗부분이 미세하게 새어 나오던 회귀. */
min-height: calc(1.35em * 2);
max-height: calc(1.35em * 2);
}
.ds-listing__body,
.ds-coll-card__info {
gap: 8px;
}
.ds-listing__price-row,
.ds-coll-card__value {
margin-top: 0;
}
/* PSA/BGS/CGC 등급 라벨은 HTML 내 .ds-listing__grade 인라인 span 으로 렌더링.
data-cert-grade 기반 ::after pseudo 매핑은 grade 마다 일일이 CSS 추가가
필요해 모든 케이스를 못 잡았기에 제거 — JS 가 listing.gradeLabel 을 직접
span 으로 출력하면 PSA 8 / CGC 10 등 모든 grade 가 자연스럽게 노출됨. */
/* ==========================================================
=== .ds-card-thumb — 통합 카드 썸네일 컴포넌트 (v0.4) ===
Source of truth: docs/card-thumb-model.md
대체 대상: .ds-listing / .ds-coll-card / .ds-inv / .ds-pool-card / .ds-pack__item
마이그레이션은 page-by-page 단계적 swap (PR-2 ~ PR-6 참조)
========================================================== */
.ds-card-thumb {
display: flex; flex-direction: column;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 8px;
text-decoration: none; color: inherit;
box-shadow: var(--shadow-1);
transition: box-shadow var(--t-fast) ease-out, border-color var(--t-fast) ease-out;
overflow: hidden;
position: relative;
}
.ds-card-thumb:hover { box-shadow: var(--shadow-2); border-color: var(--gray-300); }
.ds-card-thumb__art {
aspect-ratio: 1 / 1;
background-color: var(--gray-100);
border-bottom: 1px solid var(--border-subtle);
position: relative;
overflow: hidden;
}
:root[data-theme="dark"] .ds-card-thumb__art {
background-color: var(--gray-800);
border-bottom-color: var(--white-a200);
}
/* Body */
.ds-card-thumb__body {
display: flex; flex-direction: column; gap: 2px;
padding: 10px 12px 12px;
}
/* v0.5: weight 일괄 −1 (max 600) */
.ds-card-thumb__eyebrow {
font-size: 11px; font-weight: 500;
color: var(--fg-faint);
letter-spacing: 0.02em;
margin-bottom: 4px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-card-thumb__title {
font-size: 14px; font-weight: 600;
letter-spacing: -0.008em;
color: var(--fg-base);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-card-thumb__sub {
font-size: 11px; font-weight: 400;
color: var(--fg-muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-card-thumb__price-row {
display: flex; align-items: baseline; gap: 4px;
margin-top: 6px;
min-height: 20px;
}
.ds-card-thumb__price {
font-size: 16px; font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
color: var(--fg-base);
}
.ds-card-thumb__price--empty { color: var(--fg-faint); font-weight: 400; }
.ds-card-thumb__unit {
font-size: 12px; color: var(--fg-muted);
font-weight: 400;
}
/* Status chip은 price-row 우측 끝으로 (margin-left: auto) */
.ds-card-thumb__price-row > .ds-card-thumb__chip--status { margin-left: auto; }
/* Chip stack TR — grade(위) + rarity(아래) vertical stack */
.ds-card-thumb__chip-stack {
position: absolute;
top: 8px; right: 8px;
z-index: 3;
display: flex; flex-direction: column;
align-items: flex-end;
gap: 4px;
}
/* === Base chip — 모든 chip 메트릭 통일 (h20 / font 10 / fw 600 / ls 0.04 / pad 0 8) ===
v0.5: weight 700 → 600 (max 600 룰 준수) */
.ds-card-thumb__chip {
display: inline-flex; align-items: center; justify-content: center;
height: 20px;
padding: 0 8px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
line-height: 1;
flex-shrink: 0;
white-space: nowrap;
box-sizing: border-box;
border: 1px solid transparent;
}
/* Grade — 사각 chip (radius 4px) · solid 검정 (production fix) */
.ds-card-thumb__chip--grade {
border-radius: 4px;
background: var(--gray-950); color: var(--gray-0);
border-color: var(--gray-800);
font-variant-numeric: tabular-nums;
}
:root[data-theme="dark"] .ds-card-thumb__chip--grade {
background: var(--gray-50); color: var(--gray-950);
border-color: var(--gray-200);
}
/* Rarity — pill */
.ds-card-thumb__chip--rarity { border-radius: 999px; }
/* Mystic — Aurora mesh gradient (4 radial layers) */
.ds-card-thumb__chip--rarity[data-rarity="mystic"] {
background-color: #2A1845;
background-image:
radial-gradient(ellipse 80% 120% at 0% 0%, #C5A0FF 0%, transparent 65%),
radial-gradient(ellipse 80% 120% at 100% 0%, #FF8FCD 0%, transparent 55%),
radial-gradient(ellipse 80% 120% at 0% 100%, #5DECFF 0%, transparent 55%),
radial-gradient(ellipse 80% 120% at 100% 100%, #6F8DFF 0%, transparent 55%);
color: #FFFFFF;
border-color: rgba(255, 255, 255, 0.22);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
/* Legendary — Subtle gold (MYSTIC mesh보다 한 단계 덜 화려) */
.ds-card-thumb__chip--rarity[data-rarity="legendary"] {
background: linear-gradient(180deg,
#FBD550 0%,
#F5C518 35%,
#DDB10E 70%,
#C99A0F 100%);
color: var(--legendary-700);
border-color: color-mix(in srgb, var(--legendary-700) 35%, transparent);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
}
.ds-card-thumb__chip--rarity[data-rarity="epic"] {
background: var(--epic-500); color: #FFF;
border-color: color-mix(in srgb, #FFF 25%, transparent);
}
.ds-card-thumb__chip--rarity[data-rarity="rare"] {
background: var(--rare-500); color: #FFF;
border-color: color-mix(in srgb, #FFF 25%, transparent);
}
.ds-card-thumb__chip--rarity[data-rarity="common"] {
background: var(--common-500); color: #FFF;
border-color: color-mix(in srgb, #FFF 25%, transparent);
}
/* Status — pill, 시스템 컬러 only (rarity 토큰과 분리)
보관중=gray, 판매중=success, 리딤=info, 등급중=warning */
.ds-card-thumb__chip--status { border-radius: 999px; }
.ds-card-thumb__chip--status[data-status="vault"] {
background: var(--gray-100);
border-color: var(--gray-300);
color: var(--gray-700);
}
:root[data-theme="dark"] .ds-card-thumb__chip--status[data-status="vault"] {
background: var(--gray-800);
border-color: var(--gray-700);
color: var(--gray-200);
}
.ds-card-thumb__chip--status[data-status="listed"] {
background: color-mix(in srgb, var(--success-500) 10%, var(--bg-base));
border-color: color-mix(in srgb, var(--success-500) 38%, transparent);
color: var(--success-700);
}
.ds-card-thumb__chip--status[data-status="redeem"] {
background: color-mix(in srgb, var(--info-500) 10%, var(--bg-base));
border-color: color-mix(in srgb, var(--info-500) 38%, transparent);
color: color-mix(in srgb, var(--info-500) 70%, var(--gray-950));
}
.ds-card-thumb__chip--status[data-status="grading"] {
background: color-mix(in srgb, var(--warning-500) 12%, var(--bg-base));
border-color: color-mix(in srgb, var(--warning-500) 45%, transparent);
color: color-mix(in srgb, var(--warning-500) 65%, var(--gray-950));
}
/* Hover slant signature — .ds-listing__slant 패턴 답습 (선택적 마크업) */
.ds-card-thumb__slant {
position: absolute; top: 0; right: 0;
width: 44px; height: 44px;
pointer-events: none;
opacity: 0;
transition: opacity var(--t-fast) ease-out;
background: linear-gradient(135deg, transparent 50%, var(--gray-950) 50%);
z-index: 2;
}
.ds-card-thumb:hover .ds-card-thumb__slant { opacity: 1; }
/* ==================================================================
📱 MOBILE APP SHELL — v0.6 (2026-05-04)
----------------------------------------
'데스크톱 grid 압축' 느낌을 제거하고 실제 모바일 앱 GUI 패턴 적용:
· slim chrome (GNB 52px, FAB 제거, footer 미니멀)
· horizontal snap rails (inv / listing / mosaic)
· vertical featured hero (4:5 비례, mobile impact)
· section title 20px / chevron-only link
· safe-area-inset 지원
----------------------------------------
적용 BP: <= 767px 단일.
- 기존 모바일 룰들과 일부 충돌하므로 specificity 높여 cascade override.
================================================================== */
@media (max-width: 767px) {
/* ────────────── A. App shell ────────────── */
/* GNB slim — 56px → 52px, 콤팩트 inner */
:root { --gnb-h: 52px; }
/* iOS 네이티브 앱 (viewport-fit=cover) 에서 status bar 영역이 투명해
뒤 컨텐츠가 비쳤음. GNB 의 배경을 불투명 + safe-area-inset-top 만큼
padding 위로 확장해 상태바 뒷쪽도 흰색으로 덮음. height 도 동일 폭만큼
증가 → 컨텐츠는 자동으로 한 칸 더 아래로 시작. */
.ds-gnb {
background: var(--bg-base);
padding-top: env(safe-area-inset-top);
height: calc(var(--gnb-h) + env(safe-area-inset-top));
/* 일부 WKWebView 에서 padding 영역에 backdrop-filter 가 적용되어 반투명으로
보이던 회귀 차단. */
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* GNB padding 으로도 안 가려지는 환경 fallback — body 가장 위쪽 safe-area-inset-top
높이만큼을 흰 fixed 띠로 덮음. GNB sticky 가 viewport 끝까지 안 닿는
iOS WKWebView 케이스 대응. */
body::before {
content: '';
position: fixed;
top: 0; left: 0; right: 0;
height: env(safe-area-inset-top);
background: var(--bg-base);
z-index: 60;
pointer-events: none;
}
.ds-gnb__logo svg { width: 72px; }
.ds-gnb__inner { padding-inline: 16px; gap: 12px; }
.ds-gnb__right { gap: 16px; }
.ds-gnb__actions { grid-template-columns: 36px max-content; gap: 8px; }
.ds-gnb__icons { grid-template-columns: max-content; }
/* 로그인 버튼/잔액 chip 콤팩트 */
.ds-gnb__user {
min-width: 0;
padding: 4px 6px 4px 12px !important;
gap: 6px !important;
height: 36px !important;
}
.ds-gnb__balance { min-width: 0; font-size: 14px; }
.ds-gnb__balance small,
.ds-gnb__balance-unit { font-size: 12px; margin-left: 1px; }
.ds-gnb__avatar { width: 28px; height: 28px; font-size: 12px; }
.ds-gnb__icon-btn { width: 32px; height: 32px; }
.ds-gnb__icon-btn .mi { font-size: 18px; }
/* FAB '충전' 모바일에서 제거 — 탭바 + 헤더 잔액 chip으로 대체.
wallet은 my페이지/잔액 chip 탭으로 진입. */
.ds-fab { display: none !important; }
/* main 하단 padding — tabbar(60px + safe-area) 위로 콘텐츠 안 가리도록 */
main { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
/* container 좌우 패딩 16px 강제 */
.container { padding-inline: 16px; }
/* ────────────── B. Section rhythm — 20px / 600 / chevron link ────────────── */
.section { padding-block: 20px; }
.section--xl { padding-block: 28px; }
.section-head {
margin-bottom: 14px;
align-items: center;
}
.section-head__title h2 {
font-size: 20px;
line-height: 1.25;
letter-spacing: -0.01em;
font-weight: var(--fw-bk);
}
/* link-more (전체 가챠 →) → chevron-only icon */
.link-more {
font-size: 0 !important;
border: none !important;
padding: 0 !important;
background: transparent !important;
color: var(--fg-muted) !important;
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--r-pill);
flex-shrink: 0;
}
.link-more::after {
content: 'chevron_right';
font-family: 'Material Symbols Outlined';
font-size: 24px;
font-weight: 400;
font-variation-settings: 'FILL' 0, 'wght' 400;
line-height: 1;
}
.link-more:hover { color: var(--fg-base) !important; }
/* ────────────── C. Promo carousel — 모바일 박스 (이미지 비율 그대로) ────────────── */
/* v1: 박스 스타일 — margin 유지, 라운드 12px, 이미지 비율 그대로 (1440×640 ≈ 2.25:1) */
.ds-promo {
margin-inline: 0 !important;
border-radius: 12px !important;
aspect-ratio: auto !important;
height: auto !important;
min-height: 0 !important;
}
.ds-promo__track {
border-radius: 12px !important;
aspect-ratio: 1440 / 640 !important;
height: auto !important;
}
.ds-promo__dots {
bottom: 10px !important;
z-index: 4;
}
/* v0.7: 모바일에서도 좌우 화살표 항상 표시 (작게) */
.ds-promo__nav {
display: grid !important;
width: 28px !important; height: 28px !important;
opacity: 1 !important;
background: rgba(255,255,255,0.92) !important;
}
.ds-promo__nav .mi { font-size: 16px !important; }
.ds-promo__nav--prev { left: 8px !important; }
.ds-promo__nav--next { right: 8px !important; }
/* hint text 사이즈 다운 */
.ds-promo__hint { font-size: 14px !important; }
.ds-promo__hint-sub { font-size: 10px !important; letter-spacing: 0.06em; }
/* ────────────── D. Hero mosaic → 모바일 재구성 ────────────── */
/* 레이아웃:
Row 1: [Featured (vertical, col 1, span 2 rows)] [Thumb 1 (col 2)]
Row 2: [Featured continues] [Thumb 2 (col 2)]
Row 3: [Limited 1 (col 1)] [Limited 2 (col 2)]
hide-mobile 셀 (Brand 3, Limited 3) 숨김 */
.hero-mosaic {
grid-template-columns: 1fr 1fr !important;
grid-auto-rows: auto !important;
gap: 10px !important;
}
/* v2: Featured 모바일 — vertical poster (좌측 col 1, 2-row span) */
.hero-mosaic > .ds-feature {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
aspect-ratio: auto !important;
height: auto !important;
min-height: 0 !important;
padding: 0 !important;
background-image: url('/kado-design/assets/banners/banner_vertical-1.webp') !important;
}
/* Featured 내부 타이포 모바일 사이즈 — 컴팩트 hero 정합 */
.ds-feature__name {
font-size: 18px !important; /* 26 → 18 (slim hero) */
max-width: 60% !important;
letter-spacing: -0.018em;
line-height: 1.2;
}
.ds-feature__price { font-size: 18px !important; }
.ds-feature__price-unit { font-size: 11px !important; }
.ds-feature__cta { font-size: 12px !important; }
/* visual: 2:1에 맞게 우측에 정사각 비례 영역 */
.ds-feature__visual {
width: 50% !important;
right: -5% !important;
bottom: -10% !important;
aspect-ratio: 1 / 1 !important;
}
.ds-feature__bottom { gap: 6px !important; }
/* mosaic-cell — 2-col grid, square pack visual + 짧은 정보 */
.ds-mosaic-cell { border-radius: 12px; }
.ds-mosaic-cell__body { padding: 10px 12px 12px !important; gap: 4px !important; }
.ds-mosaic-cell__name { font-size: 13px !important; }
.ds-mosaic-cell__price-amount { font-size: 13px !important; }
.ds-mosaic-cell__price-unit { font-size: 11px !important; }
.ds-mosaic-cell__label { font-size: 9px !important; letter-spacing: 0.05em; }
/* limited cell: deck visual 좀 작게 */
.ds-mosaic-cell__visual--deck { padding: 10px !important; gap: 8px !important; }
.ds-mosaic-cell__hero-card { width: 42% !important; }
.ds-mosaic-cell__deck > span { width: 100% !important; }
.ds-mosaic-cell__limited-chip {
font-size: 9px !important;
padding: 3px 7px !important;
top: 8px !important; left: 8px !important;
right: auto !important; /* hug content (PC base의 right override) */
width: auto !important;
display: inline-flex !important;
}
.ds-mosaic-cell__stock { font-size: 10px !important; }
/* ────────────── E. inv-grid (방금 뽑힌 카드) → horizontal snap rail ────────────── */
.inv-grid {
display: flex !important;
grid-template-columns: none !important;
gap: 10px !important;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding-inline: 16px;
/* edge-to-edge */
margin-inline: -16px;
padding: 0 16px 4px;
/* smooth touch scrolling */
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.inv-grid::-webkit-scrollbar { display: none; }
.inv-grid > .ds-inv {
flex: 0 0 156px !important;
scroll-snap-align: start;
width: auto !important;
}
.inv-grid > .ds-home-recent-empty {
flex: 0 0 100% !important;
width: 100% !important;
max-width: none !important;
min-width: 0;
scroll-snap-align: start;
padding: 56px 20px;
}
/* ────────────── F. listing-grid (지금 거래되는 카드) → horizontal snap rail ────────────── */
/* Scope: data-mobile-cap이 있는 grid (홈 teaser)에만 rail.
marketplace · seller-profile 같은 dedicated browse는 2-col grid 유지. */
.listing-grid[data-mobile-cap] {
display: flex !important;
grid-template-columns: none !important;
gap: 10px !important;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding-inline: 16px;
margin-inline: -16px;
padding: 0 16px 4px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.listing-grid[data-mobile-cap]::-webkit-scrollbar { display: none; }
.listing-grid[data-mobile-cap] > .ds-listing {
flex: 0 0 156px !important;
scroll-snap-align: start;
width: auto !important;
}
/* mobile-cap으로 숨겨놓던 4번째+ 항목 다시 보이게 — snap rail로 모두 표시 */
.listing-grid[data-mobile-cap="3"] > .ds-listing:nth-child(n+4) { display: flex !important; }
.listing-grid[data-mobile-cap="6"] > .ds-listing:nth-child(n+7) { display: flex !important; }
/* dedicated browse: 2-col grid (765-> 기존 3-col 룰을 override) */
.listing-grid:not([data-mobile-cap]) {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
/* ────────────── G. service-grid (더 알아보기) → 컴팩트 list cell ────────────── */
.service-grid { gap: 10px !important; }
.ds-service-card {
aspect-ratio: auto !important;
min-height: 96px !important;
padding: 16px 18px !important;
flex-direction: row !important;
align-items: center !important;
gap: 14px;
border-radius: 12px;
}
.ds-service-card > div:first-child {
flex: 1 1 auto;
min-width: 0;
}
.ds-service-card__title { font-size: 15px !important; margin-bottom: 4px !important; }
.ds-service-card__desc {
font-size: 12px !important; line-height: 1.45;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 0 !important;
}
.ds-service-card__cta {
margin-top: 0 !important;
padding: 0 !important;
font-size: 0 !important;
border: none !important;
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--fg-muted) !important;
flex-shrink: 0;
}
.ds-service-card__cta .mi { font-size: 22px !important; }
/* decor 큰 아이콘 (verified/language/campaign) — 모바일은 숨김 (서비스 카드 row가 콤팩트해서 공간 없음) */
.ds-service-card__decor { display: none !important; }
/* ────────────── H. Footer minimal — brand + legal essentials only ────────────── */
.ds-footer { padding: 24px 0 16px !important; margin-top: 12px; }
.ds-footer__top {
flex-direction: column !important;
gap: 16px !important;
padding-bottom: 16px !important;
}
.ds-footer__brand p {
font-size: 12px !important;
line-height: 1.55;
}
.ds-footer__logo { width: 56px !important; }
/* 다중 col 링크 (SERVICE/SUPPORT/LEGAL) 모바일 숨김 — 탭바와 중복 */
.ds-footer__cols { display: none !important; }
/* legal 작게 */
.ds-footer__legal-line {
font-size: 10px !important;
line-height: 1.55;
margin-bottom: 4px !important;
}
.ds-footer__disclaimer {
font-size: 10px !important;
line-height: 1.5;
}
.ds-footer__bottom {
padding-top: 12px !important;
flex-direction: row !important;
align-items: center !important;
gap: 12px !important;
}
.ds-footer__bottom > span:first-child { font-size: 10px !important; }
/* ────────────── I. Cap mobile-cap removal for inv (display all 6) ────────────── */
.inv-grid > .ds-inv:nth-child(n+7) { display: flex !important; }
/* ────────────── J. ds-inv card 내부 모바일 polish ────────────── */
/* 156px 너비 카드 안에서 정보 잘 보이도록 */
.ds-inv__name { font-size: 13px !important; }
.ds-inv__meta { font-size: 10px !important; }
.ds-inv__price { font-size: 13px !important; }
.ds-inv__price-unit { font-size: 11px !important; }
.ds-inv__offer { font-size: 11px !important; padding: 4px 8px !important; }
/* ────────────── K. ds-listing card 내부 모바일 polish ────────────── */
.ds-listing__name { font-size: 13px !important; }
.ds-listing__sub { font-size: 10px !important; }
.ds-listing__price { font-size: 13px !important; }
.ds-listing__currency { font-size: 11px !important; }
/* ────────────── L. Section padding 일괄 — 페이지 분기 ────────────── */
/* 기본: 모든 페이지의 첫 섹션은 GNB와 적당한 간격 유지 (제목/본문 가독성) */
main > .container > section.section:first-of-type {
padding-top: 16px !important;
}
/* HOME 예외: promo 캐러셀이 있는 첫 섹션은 GNB 바로 밑 풀블리드 (배너 디자인 의도) */
main > .container > section.section:first-of-type:has(.ds-promo) {
padding-top: 0 !important;
}
/* ────────────── M. Tabbar 폴리시 — safe-area & active state ────────────── */
.ds-mobile-tabs {
padding-bottom: env(safe-area-inset-bottom);
height: calc(60px + env(safe-area-inset-bottom));
}
/* 사장 요청 정정 — 탭바 자체는 원래 크기 유지, 밑의 home indicator 여백만 보강.
padding-bottom 은 base 의 .ds-mobile-tabs 에 max(safe-area, 8px) 로 이미
걸려 있고, 추가로 inner content 높이도 60px 유지. */
.ds-mobile-tabs__inner { height: 60px; }
.ds-mobile-tabs__item { padding: 8px 0 !important; gap: 3px !important; }
.ds-mobile-tabs__item .mi { font-size: 22px; }
.ds-mobile-tabs__item { font-size: 9px !important; letter-spacing: 0.04em; }
/* ────────────── N. Theme toggle button 모바일 — GNB 영역 안에 정합 ────────────── */
/* GNB 안의 theme toggle 36→32 */
.ds-gnb .theme-toggle,
.ds-gnb__icon-btn[id="themeToggle"] {
width: 32px; height: 32px;
}
}
/* ==================================================================
END Mobile App Shell v0.6
================================================================== */
/* ==========================================================
404 Page (v0.7) — 카드 stack visual + actions
========================================================== */
.ds-404 {
display: flex; flex-direction: column;
align-items: center;
text-align: center;
padding: 80px 24px 100px;
max-width: 640px; margin: 0 auto;
}
.ds-404__visual {
position: relative;
width: 240px; height: 200px;
margin-bottom: 32px;
}
.ds-404__card-stack {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
}
.ds-404__card {
position: absolute;
width: 90px; aspect-ratio: 5/7;
background: linear-gradient(135deg, var(--gray-800) 0%, var(--gray-950) 100%);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.16);
transform-origin: bottom center;
animation: ds-404-card-enter 0.6s cubic-bezier(0.34, 1.4, 0.4, 1) both;
}
.ds-404__card--a {
animation-delay: 0.05s;
--target-rotate: -10deg;
--target-x: -30px;
--target-opacity: 0.4;
transform: rotate(-10deg) translateX(-30px);
opacity: 0.4;
}
.ds-404__card--b {
animation-delay: 0.18s;
z-index: 1;
--target-rotate: 0deg;
--target-x: 0px;
--target-opacity: 1;
}
.ds-404__card--c {
animation-delay: 0.32s;
--target-rotate: 10deg;
--target-x: 30px;
--target-opacity: 0.4;
transform: rotate(10deg) translateX(30px);
opacity: 0.4;
}
@keyframes ds-404-card-enter {
0% {
transform: rotate(0deg) translateX(0) translateY(8px) scale(0.92);
opacity: 0;
}
100% {
transform: rotate(var(--target-rotate)) translateX(var(--target-x));
opacity: var(--target-opacity);
}
}
@media (prefers-reduced-motion: reduce) {
.ds-404__card { animation: none; opacity: var(--target-opacity); transform: rotate(var(--target-rotate)) translateX(var(--target-x)); }
}
.ds-404__code {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-size: 80px; font-weight: var(--fw-bk);
color: rgba(255,255,255,0.95);
letter-spacing: -0.04em;
z-index: 2;
text-shadow: 0 2px 8px rgba(0,0,0,0.25);
animation: ds-404-code-pop 0.5s cubic-bezier(0.34, 1.4, 0.4, 1) 0.55s backwards;
}
@keyframes ds-404-code-pop {
0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.ds-404__title {
font-size: clamp(28px, 4vw, 40px); font-weight: var(--fw-bk);
letter-spacing: -0.02em; margin: 0 0 12px; line-height: 1.2;
}
.ds-404__sub {
font-size: var(--fs-body); color: var(--fg-subtle); margin: 0 0 32px;
}
.ds-404__actions {
display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
margin-bottom: 48px;
}
.ds-404__suggest {
width: 100%; max-width: 360px;
padding: 20px 24px;
background: var(--bg-subtle);
border: 1px solid var(--border-base);
border-radius: 12px;
text-align: left;
}
:root[data-theme="dark"] .ds-404__suggest { background: var(--gray-900); }
.ds-404__suggest-label {
font-size: var(--fs-caption); font-weight: var(--fw-bd);
color: var(--fg-muted); letter-spacing: 0.04em; text-transform: uppercase;
margin: 0 0 8px;
}
.ds-404__suggest-list {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 4px;
}
.ds-404__suggest-list a {
display: block; padding: 6px 0;
font-size: var(--fs-body-sm); font-weight: var(--fw-md);
color: var(--fg-base); text-decoration: none;
}
.ds-404__suggest-list a:hover { color: var(--mystic-700, #2c7a4b); }
/* ==========================================================
Avatar Presets (v0.7) — KADO 팔레트 (gray + mystic) + 평행사변형 패턴
비주얼만 (size는 부모 element에서 상속/유지)
========================================================== */
.ds-avatar-preset {
position: relative;
border-radius: 50%;
display: grid; place-items: center;
overflow: hidden;
color: rgba(255,255,255,0.95);
font-weight: var(--fw-bk);
}
/* KADO 팔레트 단색 — 6 variant */
.ds-avatar-preset--p1 { background: var(--mystic-500); } /* signature green */
.ds-avatar-preset--p2 { background: var(--mystic-700); } /* deep green */
.ds-avatar-preset--p3 { background: var(--mystic-900); } /* darkest green */
.ds-avatar-preset--p4 { background: var(--gray-950); } /* black */
.ds-avatar-preset--p5 { background: var(--gray-700); } /* charcoal */
.ds-avatar-preset--p6 { background: var(--gray-500); } /* mid gray */
/* 평행사변형 패턴 — 두 sets of skewed lines crossing for rhomboid feel */
.ds-avatar-preset::before {
content: '';
position: absolute; inset: 0;
background-image:
repeating-linear-gradient(120deg,
transparent 0 14px,
rgba(255,255,255,0.10) 14px 16px,
transparent 16px 28px),
repeating-linear-gradient(60deg,
transparent 0 18px,
rgba(255,255,255,0.06) 18px 19px);
pointer-events: none;
mix-blend-mode: overlay;
}
.ds-avatar-preset__letter {
position: relative; z-index: 1;
font-size: 0.5em;
letter-spacing: -0.02em;
}
/* avatar modal presets */
.ds-avatar-modal__presets { margin: 0 0 16px; }
.ds-avatar-modal__presets-label {
display: block; font-size: var(--fs-caption); font-weight: var(--fw-bd);
letter-spacing: 0.04em; color: var(--fg-muted); text-transform: uppercase;
margin-bottom: 8px;
}
.ds-avatar-modal__presets-grid {
display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
}
.ds-avatar-modal__presets-grid .ds-avatar-preset {
aspect-ratio: 1; border: none; cursor: pointer; padding: 0;
font-family: inherit;
transition: transform var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
}
.ds-avatar-modal__presets-grid .ds-avatar-preset:hover {
transform: scale(1.06);
box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
.ds-avatar-modal__presets-grid .ds-avatar-preset[aria-pressed="true"] {
outline: 3px solid var(--mystic-500, #38a169);
outline-offset: 2px;
}
/* ============================================================
Doc Page (placeholder — 약관/정책/안내/가이드 페이지 공용)
v0.8: 클라이언트 콘텐츠 들어오기 전 base layout 확보
============================================================ */
.ds-doc-page {
max-width: 720px;
margin: 0 auto;
padding-block: 32px 96px;
}
.ds-doc-page__head {
border-bottom: 1px solid var(--border-base);
padding-bottom: 24px;
margin-bottom: 32px;
}
.ds-doc-page__eyebrow {
display: inline-block;
font-size: var(--fs-caption-sm);
font-weight: var(--fw-bd);
color: var(--fg-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 10px;
}
.ds-doc-page__title {
font-size: var(--fs-h2);
font-weight: var(--fw-bk);
letter-spacing: -0.02em;
margin: 0 0 8px;
color: var(--fg-base);
}
.ds-doc-page__sub {
font-size: var(--fs-body-md);
color: var(--fg-muted);
margin: 0;
line-height: 1.5;
}
.ds-doc-page__updated {
font-size: var(--fs-caption-sm);
color: var(--fg-faint);
margin-top: 14px;
}
.ds-doc-page__body {
display: flex;
flex-direction: column;
gap: 36px;
}
.ds-doc-section { display: flex; flex-direction: column; gap: 12px; }
.ds-doc-section__title {
font-size: var(--fs-h5);
font-weight: var(--fw-bk);
color: var(--fg-base);
margin: 0;
}
.ds-doc-section__text {
font-size: var(--fs-body-md);
line-height: 1.65;
color: var(--fg-subtle);
margin: 0;
}
.ds-doc-section__list {
margin: 4px 0 0; padding-left: 20px;
display: flex; flex-direction: column; gap: 6px;
}
.ds-doc-section__list li {
font-size: var(--fs-body-md);
line-height: 1.6;
color: var(--fg-subtle);
}
.ds-doc-empty {
background: var(--bg-subtle);
border: 1px solid var(--border-base);
border-radius: 12px;
padding: 48px 24px;
text-align: center;
color: var(--fg-muted);
font-size: var(--fs-body-sm);
line-height: 1.6;
}
.ds-doc-empty .mi { font-size: 32px; color: var(--fg-faint); display: block; margin-bottom: 8px; }
/* FAQ accordion (간이) */
.ds-doc-faq { display: flex; flex-direction: column; gap: 8px; }
.ds-doc-faq__item {
border: 1px solid var(--border-base);
border-radius: 10px;
background: var(--bg-card);
}
.ds-doc-faq__item summary {
cursor: pointer;
list-style: none;
padding: 16px 20px;
font-size: var(--fs-body-md);
font-weight: var(--fw-bd);
color: var(--fg-base);
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
}
.ds-doc-faq__item summary::-webkit-details-marker { display: none; }
.ds-doc-faq__item summary::after {
content: 'expand_more';
font-family: 'Material Symbols Outlined';
font-size: 20px;
color: var(--fg-muted);
transition: transform var(--t-fast) ease-out;
}
.ds-doc-faq__item[open] summary::after { transform: rotate(180deg); }
.ds-doc-faq__answer {
padding: 0 20px 18px;
font-size: var(--fs-body-sm);
line-height: 1.65;
color: var(--fg-subtle);
margin: 0;
}
/* Notice/article list */
.ds-doc-notices {
display: flex;
flex-direction: column;
gap: 10px;
}
.ds-doc-notice[open] {
border-color: var(--fg-base);
}
.ds-doc-notice__summary-row {
align-items: flex-start !important;
}
.ds-doc-notice__main {
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.ds-doc-notice__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
font-size: var(--fs-caption-sm);
color: var(--fg-muted);
}
.ds-doc-notice__type,
.ds-doc-notice__pin {
display: inline-flex;
align-items: center;
gap: 3px;
min-height: 22px;
padding: 0 8px;
border: 1px solid var(--border-base);
border-radius: 999px;
background: var(--bg-subtle);
color: var(--fg-base);
font-weight: var(--fw-bd);
}
.ds-doc-notice__type--article {
background: rgba(56, 161, 105, 0.08);
border-color: rgba(56, 161, 105, 0.22);
color: var(--mystic-700, #2f855a);
}
.ds-doc-notice__pin .mi {
font-size: 14px;
}
.ds-doc-notice__title {
font-size: var(--fs-body-lg);
font-weight: var(--fw-bd);
color: var(--fg-base);
line-height: 1.35;
}
.ds-doc-notice__summary {
margin: 0;
color: var(--fg-muted);
font-size: var(--fs-body-sm);
line-height: 1.55;
}
.ds-doc-notice__content {
padding: 0 20px 20px;
display: flex;
flex-direction: column;
gap: 20px;
}
/* Inquiry form (1:1 문의 / 제휴) */
.ds-doc-form { display: flex; flex-direction: column; gap: 18px; }
.ds-doc-form__field { display: flex; flex-direction: column; gap: 6px; }
.ds-doc-form__label {
font-size: var(--fs-body-sm);
font-weight: var(--fw-bd);
color: var(--fg-base);
}
.ds-doc-form__input,
.ds-doc-form__textarea,
.ds-doc-form__select {
width: 100%;
font: inherit;
font-size: var(--fs-body-md);
color: var(--fg-base);
padding: 12px 14px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 10px;
transition: var(--t-fast) ease-out;
}
.ds-doc-form__textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.ds-doc-form__input:focus,
.ds-doc-form__textarea:focus,
.ds-doc-form__select:focus {
outline: none;
border-color: var(--gray-950);
}
:root[data-theme="dark"] .ds-doc-form__input:focus,
:root[data-theme="dark"] .ds-doc-form__textarea:focus,
:root[data-theme="dark"] .ds-doc-form__select:focus { border-color: var(--gray-50); }
.ds-doc-form__hint {
font-size: var(--fs-caption-sm);
color: var(--fg-muted);
}
.ds-doc-form__actions {
display: flex; gap: 10px; margin-top: 8px;
}
@media (max-width: 767px) {
.ds-doc-page { padding-block: 24px 64px; }
.ds-doc-page__title { font-size: var(--fs-h3); }
.ds-doc-page__head { padding-bottom: 20px; margin-bottom: 24px; }
.ds-doc-page__body { gap: 28px; }
}
/* ============================================================
v0.8 사용자 아바타 — 전역 동기화 (avatar.js + placeholder)
============================================================ */
/* 이미지 또는 placeholder 적용 시 letter/text 숨김 */
.ds-gnb__avatar[data-has-image],
.ds-gnb__avatar[data-placeholder] { color: transparent; font-size: 0; background-size: cover; background-position: center; background-repeat: no-repeat; }
.ds-profile__avatar[data-has-image] .ds-profile__avatar-letter,
.ds-profile__avatar[data-placeholder] .ds-profile__avatar-letter { display: none; }
.ds-profile__avatar[data-placeholder] { background-size: cover; background-position: center; background-repeat: no-repeat; }
.ds-avatar-modal__circle[data-placeholder] .ds-avatar-modal__letter { display: none; }
.ds-avatar-modal__circle[data-placeholder] { background-size: cover; background-position: center; background-repeat: no-repeat; }
.ds-settings-avatar[data-has-image],
.ds-settings-avatar[data-placeholder] { color: transparent; font-size: 0; background-size: cover; background-position: center; background-repeat: no-repeat; }
/* 모달 footer — 적용하기 CTA + 닫기 */
.ds-avatar-modal__footer {
display: flex; gap: 10px;
margin-top: 8px;
padding-top: 16px;
border-top: 1px solid var(--border-base);
}
.ds-avatar-modal__footer .ds-btn { flex: 1; }
.ds-avatar-modal__footer .ds-btn--primary[disabled],
.ds-avatar-modal__footer .ds-btn--primary[aria-disabled="true"] {
opacity: 0.4;
pointer-events: none;
cursor: not-allowed;
}
/* ============================================================
v0.8 컬렉션 교환 모드 — body[data-mode="exchange"]
============================================================ */
.ds-exchange-banner {
display: none;
margin: 16px 0 20px;
padding: 14px 18px;
background: var(--mystic-50, #ecfff1);
border: 1px solid var(--mystic-300, #6bff86);
border-radius: 12px;
align-items: center;
gap: 14px;
color: var(--mystic-900, #04391a);
}
body[data-mode="exchange"] .ds-exchange-banner,
body.is-exchange-mode .ds-exchange-banner { display: flex; }
.ds-exchange-banner__icon {
width: 36px; height: 36px; border-radius: 10px;
background: var(--mystic-600, #14b441); color: #fff;
display: grid; place-items: center; flex-shrink: 0;
}
.ds-exchange-banner__icon .mi { font-size: 22px; }
.ds-exchange-banner__body { flex: 1; min-width: 0; }
.ds-exchange-banner__title { margin: 0 0 2px; font-size: var(--fs-body-md); font-weight: var(--fw-bk); }
.ds-exchange-banner__sub { margin: 0; font-size: var(--fs-caption); color: var(--mystic-800, #0a6128); }
.ds-exchange-banner__close { background: transparent; border: none; cursor: pointer; padding: 6px; border-radius: 8px; color: var(--mystic-800, #0a6128); }
.ds-exchange-banner__close:hover { background: rgba(10,97,40,.1); }
.ds-exchange-banner__close .mi { font-size: 22px; }
/* 체크박스 오버레이 — 교환 모드 활성화 시 카드 좌상단에 표시 */
.ds-coll-card__select {
display: none;
position: absolute;
top: 10px; left: 10px;
width: 28px; height: 28px;
border-radius: 50%;
background: rgba(255,255,255,0.92);
border: 2px solid var(--gray-700);
z-index: 3;
align-items: center; justify-content: center;
transition: all var(--t-fast) ease-out;
pointer-events: none;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.ds-coll-card__select .mi { font-size: 18px; color: #fff; opacity: 0; }
body[data-mode="exchange"] .ds-coll-card,
body.is-exchange-mode .ds-coll-card { cursor: pointer; user-select: none; position: relative; }
body[data-mode="exchange"] .ds-coll-card__select,
body.is-exchange-mode .ds-coll-card__select { display: inline-flex; }
body[data-mode="exchange"] .ds-coll-card.is-selected .ds-coll-card__select,
body.is-exchange-mode .ds-coll-card.is-selected .ds-coll-card__select {
background: var(--mystic-600, #14b441);
border-color: var(--mystic-600, #14b441);
}
body[data-mode="exchange"] .ds-coll-card.is-selected .ds-coll-card__select .mi,
body.is-exchange-mode .ds-coll-card.is-selected .ds-coll-card__select .mi { opacity: 1; }
body[data-mode="exchange"] .ds-coll-card.is-selected,
body.is-exchange-mode .ds-coll-card.is-selected {
outline: 3px solid var(--mystic-500);
outline-offset: -1px;
border-radius: 12px;
}
body[data-mode="exchange"] .ds-coll-card:hover,
body.is-exchange-mode .ds-coll-card:hover { transform: translateY(-2px); }
/* 비활성화: 리스팅 중인 카드는 선택 불가 */
body[data-mode="exchange"] .ds-coll-card[data-exchangeable="false"],
body.is-exchange-mode .ds-coll-card[data-exchangeable="false"] {
opacity: 0.4;
pointer-events: none;
}
/* 하단 sticky bar — 선택 요약 + 교환하기 */
.ds-exchange-bar {
display: none;
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 100;
padding: 12px var(--edge-margin) calc(12px + env(safe-area-inset-bottom));
background: var(--bg-card);
border-top: 1px solid var(--border-base);
box-shadow: 0 -8px 24px rgba(0,0,0,0.08);
}
body[data-mode="exchange"] .ds-exchange-bar,
body.is-exchange-mode .ds-exchange-bar { display: block; }
.ds-exchange-bar__inner {
max-width: var(--content-max);
margin: 0 auto;
display: flex; align-items: center; gap: 14px;
}
/* filter rail이 열린 상태(=상단 카드 grid가 우측 inset)면 하단 바 컨텐츠도 카드 영역과 정렬 */
body[data-mode="exchange"]:has(.ds-coll-body:not(.is-filter-hidden)) .ds-exchange-bar__inner,
body.is-exchange-mode:has(.ds-coll-body:not(.is-filter-hidden)) .ds-exchange-bar__inner {
padding-left: calc(240px + 32px); /* rail width + gap */
}
@media (max-width: 1023px) {
/* 태블릿/모바일은 rail이 inline grid가 아니라 overlay라 정렬 보정 불필요 */
body[data-mode="exchange"]:has(.ds-coll-body:not(.is-filter-hidden)) .ds-exchange-bar__inner,
body.is-exchange-mode:has(.ds-coll-body:not(.is-filter-hidden)) .ds-exchange-bar__inner {
padding-left: 0;
}
}
.ds-exchange-bar__summary { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ds-exchange-bar__count { font-size: var(--fs-caption); color: var(--fg-muted); font-weight: var(--fw-bd); }
.ds-exchange-bar__count strong { color: var(--fg-base); font-weight: var(--fw-bk); font-variant-numeric: tabular-nums; }
.ds-exchange-bar__total { font-size: 22px; font-weight: var(--fw-bk); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.ds-exchange-bar__total small { font-size: 14px; opacity: 0.5; font-weight: var(--fw-md); }
.ds-exchange-bar__cta { flex-shrink: 0; display: flex; gap: 8px; }
@media (max-width: 767px) {
.ds-exchange-bar__total { font-size: 18px; }
.ds-exchange-bar__cta .ds-btn { padding-inline: 14px; }
}
/* 모바일 탭바와 겹치지 않도록 mode=exchange 시 mobile-tabs hide */
body[data-mode="exchange"] .ds-mobile-tabs,
body.is-exchange-mode .ds-mobile-tabs { display: none !important; }
body[data-mode="exchange"] main,
body.is-exchange-mode main { padding-bottom: 120px !important; }
/* 상단 overview CTA — 모드에 따라 enter/exit 토글 */
.ds-coll-overview__cta-exit { display: none; }
body[data-mode="exchange"] .ds-coll-overview__cta-enter,
body.is-exchange-mode .ds-coll-overview__cta-enter { display: none; }
body[data-mode="exchange"] .ds-coll-overview__cta-exit,
body.is-exchange-mode .ds-coll-overview__cta-exit { display: inline-flex; }
/* 교환 확인 모달 — 선택 카드 리스트 */
.ds-exchange-confirm__list {
max-height: min(380px, 48vh);
overflow-y: auto;
border: 1px solid var(--border-base);
border-radius: 10px;
padding: 6px;
margin: 16px 0;
}
.ds-exchange-confirm__row {
display: flex; align-items: center; gap: 12px;
min-height: 92px;
padding: 12px;
border-bottom: 1px solid var(--border-base);
font-size: var(--fs-body-sm);
}
.ds-exchange-confirm__row:last-child { border-bottom: none; }
.ds-exchange-confirm__thumb {
position: relative;
flex: 0 0 auto;
width: 56px;
height: 74px;
border-radius: 8px;
border: 1px solid var(--border-subtle);
background-color: var(--gray-100);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
overflow: hidden;
}
.ds-exchange-confirm__thumb:not([style])::before {
content: '';
position: absolute;
inset: 13px 8px;
border-radius: 999px;
background: rgba(0,0,0,0.04);
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.ds-exchange-confirm__thumb:not([style])::after {
content: '●';
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-size: 18px;
font-weight: var(--fw-bk);
color: var(--gray-500);
}
.ds-exchange-confirm__thumb[data-kado-grade="mystic"]:not([style]) {
background: linear-gradient(180deg, #ECFDF3 0%, #D9FBE6 100%);
}
.ds-exchange-confirm__thumb[data-kado-grade="legend"]:not([style]) {
background: linear-gradient(180deg, #FFF7DA 0%, #FCEFB1 100%);
}
.ds-exchange-confirm__thumb[data-kado-grade="epic"]:not([style]) {
background: linear-gradient(180deg, #F2EBFF 0%, #E2D5FE 100%);
}
.ds-exchange-confirm__thumb[data-kado-grade="rare"]:not([style]) {
background: linear-gradient(180deg, #FFEFEF 0%, #FBDADA 100%);
}
.ds-exchange-confirm__thumb[data-kado-grade="mystic"]:not([style])::after { content: '✦'; color: #137a3a; }
.ds-exchange-confirm__thumb[data-kado-grade="legend"]:not([style])::after { content: '⬢'; color: #b8842e; }
.ds-exchange-confirm__thumb[data-kado-grade="epic"]:not([style])::after { content: '◆'; color: #6d34d6; }
.ds-exchange-confirm__thumb[data-kado-grade="rare"]:not([style])::after { content: '▲'; color: #d23a2c; }
.ds-exchange-confirm__row-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.ds-exchange-confirm__row-name {
min-width: 0;
color: var(--fg-base);
font-weight: var(--fw-bd);
line-height: 1.35;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.ds-exchange-confirm__row-meta {
color: var(--fg-muted);
font-size: var(--fs-caption);
line-height: 1.35;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ds-exchange-confirm__row-amount {
font-weight: var(--fw-bk);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
text-align: right;
}
@media (max-width: 480px) {
.ds-exchange-confirm__row {
align-items: flex-start;
}
.ds-exchange-confirm__thumb {
width: 48px;
height: 64px;
}
.ds-exchange-confirm__row-amount {
font-size: var(--fs-body-sm);
}
}
.ds-exchange-confirm__total {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 0;
border-top: 1px solid var(--border-base);
margin-top: 4px;
}
.ds-exchange-confirm__total-label { font-size: var(--fs-body-sm); color: var(--fg-muted); }
.ds-exchange-confirm__total-amount { font-size: 24px; font-weight: var(--fw-bk); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
/* ============================================================
v0.8 my-collection 상단 재설계 — clean overview hero + 활동 strip
============================================================ */
/* 타이틀 행 — 좌측 텍스트 + 우측 secondary actions (공유/공개) */
.ds-coll-headline {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding-block: 12px 18px;
}
.ds-coll-headline__text h1 {
font-size: var(--fs-h2);
margin: 0 0 6px;
letter-spacing: -0.02em;
color: var(--fg-base);
}
.ds-coll-headline__text p {
color: var(--fg-muted);
margin: 0;
font-size: var(--fs-body-sm);
line-height: 1.5;
}
.ds-coll-headline__actions {
display: flex; align-items: center; gap: 8px;
flex-shrink: 0;
}
.ds-coll-headline__vis {
display: inline-flex; align-items: center; gap: 8px;
font-size: var(--fs-caption);
font-weight: var(--fw-bd);
color: var(--fg-muted);
cursor: pointer;
}
.ds-coll-headline__vis .mi { font-size: 16px; color: var(--fg-muted); }
/* 더 얇고 작은 토글 — 36x18 */
.ds-coll-headline__vis .ds-toggle { width: 32px; height: 18px; }
.ds-coll-headline__vis .ds-toggle__slider::before { width: 14px; height: 14px; top: 2px; left: 2px; }
.ds-coll-headline__vis .ds-toggle input:checked + .ds-toggle__slider::before { transform: translateX(14px); }
.ds-coll-headline__vis input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.ds-coll-headline__vis .ds-toggle__slider { /* reuse existing toggle slider */ }
/* Hero overview — 좌(가치+CTA) | 우(카드수+분포) */
/* v0.8 my-collection 상단 — 활동 위주 재기획
1) Stat strip (slim 1행): 가치 · 카드 수 · CTA
2) Activity 3-card grid (메인 포커스): Top Mover / 등급 심사 / 받은 오퍼 */
/* Stat strip — 1줄, 적당한 높이 */
.ds-coll-overview {
display: flex;
align-items: center;
gap: 28px;
flex-wrap: wrap;
padding: 24px 24px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 14px;
margin-bottom: 14px;
}
.ds-coll-overview__metric { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.ds-coll-overview__secondary {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 28px;
margin-left: auto;
}
.ds-coll-overview__secondary .ds-coll-overview__metric {
align-items: flex-end;
text-align: right;
}
.ds-coll-overview__secondary .ds-coll-overview__value {
justify-content: flex-end;
}
.ds-coll-overview__metric--link { transition: opacity var(--t-fast) ease-out; cursor: pointer; }
.ds-coll-overview__metric--link:hover { opacity: 0.7; }
.ds-coll-overview__arrow { font-size: 16px; color: var(--fg-muted); margin-left: 2px; vertical-align: middle; transition: transform var(--t-fast) ease-out; }
.ds-coll-overview__metric--link:hover .ds-coll-overview__arrow { transform: translateX(2px); }
.ds-coll-overview__label {
font-size: 11px; font-weight: 700;
color: var(--fg-muted);
letter-spacing: 0.06em; text-transform: uppercase;
}
.ds-coll-overview__value {
display: flex; align-items: baseline; gap: 10px;
font-size: 24px; font-weight: 700;
letter-spacing: -0.015em;
font-variant-numeric: tabular-nums;
line-height: 1.1;
color: var(--fg-base);
}
.ds-coll-overview__value small {
font-size: 13px; opacity: 0.5; font-weight: 500;
}
.ds-coll-overview__delta {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px;
background: rgba(31,217,80,0.12);
color: var(--mystic-800, #0a6128);
border-radius: 6px;
font-size: 11px; font-weight: 700;
font-variant-numeric: tabular-nums;
}
.ds-coll-overview__delta .mi { font-size: 13px; }
.ds-coll-overview__divider {
width: 1px; height: 48px; background: var(--border-base); align-self: center;
}
.ds-coll-overview__cta {
margin-left: auto;
display: flex;
align-items: center;
gap: 10px;
}
.ds-coll-overview__cta-enter,
.ds-coll-overview__cta-exit {
height: 44px !important;
min-height: 44px;
}
/* Activity 3-card grid — 메인 포커스 (Top Mover / 등급 / 오퍼) */
.ds-coll-activity-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 22px;
}
.ds-coll-activity-card {
display: flex; flex-direction: column; gap: 8px;
padding: 18px 20px;
background: var(--bg-card);
border: 1px solid var(--border-base);
border-radius: 14px;
text-decoration: none;
color: var(--fg-base);
transition: transform var(--t-fast) ease-out, border-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
position: relative;
}
.ds-coll-activity-card:hover {
transform: translateY(-2px);
border-color: var(--gray-700);
box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}
.ds-coll-activity-card__header {
display: flex; align-items: center; gap: 8px;
}
.ds-coll-activity-card__icon {
width: 32px; height: 32px;
border-radius: 10px;
background: var(--bg-subtle);
display: grid; place-items: center;
flex-shrink: 0;
}
.ds-coll-activity-card__icon .mi { font-size: 18px; color: var(--fg-base); }
.ds-coll-activity-card__label {
font-size: 12px; font-weight: 700;
color: var(--fg-muted);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.ds-coll-activity-card__main {
font-size: 22px; font-weight: 800;
letter-spacing: -0.01em;
line-height: 1.2;
color: var(--fg-base);
}
.ds-coll-activity-card__main small {
font-size: 14px; opacity: 0.55; font-weight: 600;
}
.ds-coll-activity-card__sub {
font-size: 13px; color: var(--fg-muted); line-height: 1.4;
margin-top: -2px;
}
.ds-coll-activity-card__cta {
display: inline-flex; align-items: center; gap: 4px;
margin-top: 6px;
font-size: 13px; font-weight: 700;
color: var(--fg-base);
}
.ds-coll-activity-card__cta .mi { font-size: 16px; transition: transform var(--t-fast); }
.ds-coll-activity-card:hover .ds-coll-activity-card__cta .mi { transform: translateX(3px); }
/* Top Mover 강조 — mystic accent */
.ds-coll-activity-card--mover {
background: linear-gradient(135deg, var(--mystic-50, #ecfff1), var(--bg-card) 70%);
border-color: var(--mystic-300, #6bff86);
}
.ds-coll-activity-card--mover .ds-coll-activity-card__icon {
background: var(--mystic-100, #d2ffdd);
}
.ds-coll-activity-card--mover .ds-coll-activity-card__icon .mi { color: var(--mystic-700); }
.ds-coll-activity-card__delta {
display: inline-flex; align-items: center; gap: 4px;
font-size: 14px; font-weight: 800;
color: var(--mystic-800);
font-variant-numeric: tabular-nums;
}
.ds-coll-activity-card__delta .mi { font-size: 16px; }
@media (max-width: 1023px) {
.ds-coll-activity-grid { grid-template-columns: 1fr 1fr; }
.ds-coll-activity-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
/* 모바일: title은 좌측, 프로필 공개 토글은 우측 (한 줄) */
.ds-coll-headline { flex-direction: row; align-items: flex-end; gap: 12px; }
.ds-coll-headline__text { flex: 1; min-width: 0; }
.ds-coll-headline__actions {
flex-shrink: 0;
align-self: flex-end;
padding-bottom: 2px;
}
/* 모바일: vis 토글은 라벨 숨기고 아이콘 + 토글만 (compact) */
.ds-coll-headline__vis #collVisLabel { display: none; }
.ds-coll-overview { padding: 32px; gap: 24px; }
.ds-coll-overview > .ds-coll-overview__metric:first-child {
flex: 0 0 100%;
width: 100%;
}
.ds-coll-overview__secondary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
justify-content: start;
align-items: start;
gap: 0;
flex: 0 0 100%;
width: 100%;
margin-left: 0;
min-width: 0;
}
.ds-coll-overview__secondary .ds-coll-overview__metric {
min-width: 0;
align-items: flex-start;
text-align: left;
}
.ds-coll-overview__secondary .ds-coll-overview__value {
justify-content: flex-start;
}
.ds-coll-overview__divider { display: none; }
.ds-coll-overview__cta {
flex: 0 0 100%;
margin-left: 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.ds-coll-overview__cta .ds-btn {
width: 100%;
justify-content: center;
}
.ds-coll-overview__value { font-size: 22px; }
.ds-coll-activity-grid { grid-template-columns: 1fr; gap: 10px; }
.ds-coll-activity-grid > :first-child { grid-column: auto; }
/* 모바일: ds-coll-controls — 중앙 status filter chips 숨김, 필터 좌측 / 정렬 우측 한 줄 정렬 */
.ds-coll-controls {
flex-wrap: nowrap;
gap: 8px;
}
.ds-coll-controls .ds-coll-filter { display: none !important; }
.ds-coll-controls .ds-filter-toggle { margin-right: auto !important; }
.ds-coll-controls .ds-coll-sort-dropdown { margin-left: auto; }
}
/* ============================================================
v0.8 마이페이지 hero — V9 통합 (블랙 멤버십 카드 + 인사 + 메트릭 + CTA)
============================================================ */
.ds-mypage-hero {
display: grid;
grid-template-columns: 3fr 5fr;
gap: 0;
align-items: stretch;
background: var(--bg-subtle);
border-radius: 16px;
padding: 22px;
margin-block: 24px;
}
/* 가입 직후 로딩 상태 — 멤버십 카드 내부 스켈레톤은 어두운 배경에서 너무
강하게 보여서 10% 투명도로 톤다운 */
.ds-mypage-hero__card .ds-skeleton {
opacity: 0.1;
}
.ds-mypage-hero__card-wrap {
display: flex; align-items: center; justify-content: center;
padding-right: 20px;
border-right: 1px solid var(--border-base);
margin-right: 20px;
}
.ds-mypage-hero__card {
aspect-ratio: 1.586 / 1;
width: 100%; max-width: 360px;
border-radius: 18px; padding: 22px;
color: #fff;
position: relative; overflow: hidden;
box-shadow: 0 18px 36px rgba(0,0,0,.32), 0 4px 12px rgba(0,0,0,.18);
background: linear-gradient(135deg, #050505 0%, #1a1a1a 45%, #262626 80%, #333 100%);
transform: perspective(1000px) rotateY(-2deg) rotateX(2deg);
transition: transform 0.4s ease;
}
.ds-mypage-hero__card:hover { transform: perspective(1000px) rotateY(0) rotateX(0); }
.ds-mypage-hero__card::before { content:''; position:absolute; inset:0; background: radial-gradient(circle at 20% 0%, rgba(255,255,255,0.15), transparent 50%); }
.ds-mypage-hero__card::after { content:''; position:absolute; right:-50px; bottom:-50px; width:200px; height:200px; border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,0.08), transparent); }
.ds-mypage-hero__brand { display: flex; align-items: center; justify-content: space-between; }
.ds-mypage-hero__brand-mark { font-family: ui-monospace, monospace; font-size: 11px; font-weight: 800; letter-spacing: 0.18em; opacity: 0.85; }
.ds-mypage-hero__brand-tier { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,0.18); backdrop-filter: blur(8px); }
.ds-mypage-hero__chip {
width: 40px; height: 30px; border-radius: 6px;
background: linear-gradient(135deg, #d4af37, #f4e4ba 40%, #d4af37 60%, #b8860b);
margin-top: 18px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}
.ds-mypage-hero__name { font-size: 20px; font-weight: 800; letter-spacing: 0.02em; margin: 22px 0 4px; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.ds-mypage-hero__handle { font-size: 12px; opacity: 0.85; font-family: ui-monospace, monospace; }
.ds-mypage-hero__balance-row {
display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
position: absolute; bottom: 22px; left: 22px; right: 22px;
}
.ds-mypage-hero__balance-label { font-size: 9px; opacity: 0.7; letter-spacing: 0.12em; text-transform: uppercase; }
.ds-mypage-hero__balance-value { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1; }
.ds-mypage-hero__balance-value small { font-size: 13px; opacity: 0.7; }
.ds-mypage-hero__since { font-size: 10px; opacity: 0.7; font-family: ui-monospace, monospace; text-align: right; line-height: 1.4; letter-spacing: 0.04em; }
.ds-mypage-hero__info { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ds-mypage-hero__greet {
display: flex; align-items: center; gap: 14px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border-base);
}
.ds-mypage-hero__avatar {
width: 56px; height: 56px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--mystic-700);
background-size: cover; background-position: center;
color: #fff;
font-size: 24px;
font-weight: 900;
line-height: 1;
flex-shrink: 0;
}
.ds-mypage-hero__greet-text h2 { font-size: 22px; font-weight: 800; margin: 0; letter-spacing: -0.01em; }
.ds-mypage-hero__greet-text p { margin: 4px 0 0; color: var(--fg-muted); font-size: 13px; }
.ds-mypage-hero__metric-row {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
padding: 4px 0;
}
.ds-mypage-hero__metric {
padding: 0 18px;
border-right: 1px solid var(--border-base);
display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
min-width: 0;
}
.ds-mypage-hero__metric:last-child { border-right: none; }
.ds-mypage-hero__metric-label {
font-size: 11px;
color: var(--fg-muted);
font-weight: 700;
letter-spacing: 0;
text-transform: uppercase;
white-space: nowrap;
}
.ds-mypage-hero__metric-value {
display: inline-flex;
align-items: baseline;
gap: 4px;
max-width: 100%;
font-size: 20px;
font-weight: 800;
line-height: 1.15;
margin-top: 2px;
letter-spacing: 0;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.ds-mypage-hero__metric-value small { flex: 0 0 auto; font-size: 12px; opacity: 0.55; }
.ds-mypage-hero__metric-delta {
font-size: 11px;
line-height: 1.35;
color: var(--mystic-700);
font-weight: 700;
word-break: keep-all;
overflow-wrap: normal;
}
.ds-mypage-hero__cta { display: flex; gap: 10px; }
@media (max-width: 1023px) {
.ds-mypage-hero { grid-template-columns: 1fr; gap: 20px; }
.ds-mypage-hero__card-wrap {
padding-right: 0; margin-right: 0; border-right: none;
padding-bottom: 20px; border-bottom: 1px solid var(--border-base);
}
.ds-mypage-hero__card { max-width: 420px; margin: 0 auto; transform: none; }
}
@media (max-width: 767px) {
.ds-mypage-hero { padding: 16px; }
.ds-mypage-hero__card { padding: 18px; max-width: 360px; }
.ds-mypage-hero__name { font-size: 18px; margin-top: 18px; }
.ds-mypage-hero__balance-row { left: 18px; right: 18px; bottom: 18px; }
.ds-mypage-hero__balance-value { font-size: 20px; }
.ds-mypage-hero__avatar { width: 48px; height: 48px; }
.ds-mypage-hero__greet-text h2 { font-size: 19px; }
.ds-mypage-hero__metric { min-height: 88px; padding: 0 10px; }
.ds-mypage-hero__metric-label { font-size: 10px; letter-spacing: 0; }
.ds-mypage-hero__metric-value { gap: 3px; font-size: 14px; }
.ds-mypage-hero__metric-value small { font-size: 10px; }
.ds-mypage-hero__metric-delta { font-size: 10px; }
}
/* ============================================================
v0.8 등급사 선택 — coming soon 별도 섹션
============================================================ */
.ds-grader-coming {
margin-top: 8px;
padding: 14px 16px;
background: var(--bg-subtle);
border: 1px dashed var(--border-base);
border-radius: 12px;
}
.ds-grader-coming__label {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 800;
color: var(--fg-muted);
letter-spacing: 0.06em; text-transform: uppercase;
margin-bottom: 8px;
}
.ds-grader-coming__label .mi { font-size: 14px; }
.ds-grader-coming__list {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.ds-grader-coming__list li {
display: flex; flex-direction: column; gap: 2px;
padding: 8px 10px;
background: var(--bg-card);
border-radius: 8px;
font-size: var(--fs-caption);
color: var(--fg-faint);
}
.ds-grader-coming__list strong {
color: var(--fg-subtle);
font-weight: 700;
font-size: var(--fs-body-sm);
}
.ds-grader-coming__list span { font-size: 11px; color: var(--fg-faint); }
@media (max-width: 480px) {
.ds-grader-coming__list { grid-template-columns: 1fr; }
}
/* ============================================================
v0.8 리미티드 팩 banner — 좌(visual) | 우(정보) 가로형 쇼케이스
============================================================ */
.ds-limited-stack {
display: flex; flex-direction: column;
gap: 14px;
}
.ds-limited-banner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
height: 280px;
border-radius: 16px;
overflow: hidden;
text-decoration: none;
color: var(--fg-base);
background: var(--bg-card);
border: 1px solid var(--border-base);
transition: transform var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out, border-color var(--t-fast) ease-out;
position: relative;
}
.ds-limited-banner:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0,0,0,0.10);
border-color: var(--gray-700);
}
/* 좌측 visual — 다크 배경 + hero 카드 + deck 패턴 */
.ds-limited-banner__visual {
position: relative;
background: linear-gradient(135deg, #050505 0%, #1a1a1a 60%, #2a2a2a 100%);
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: 1fr;
align-items: center;
padding: 24px 28px;
gap: 4px;
overflow: hidden;
}
.ds-limited-banner__visual::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.08), transparent 60%);
pointer-events: none;
}
/* hero card — 중앙 prominent */
.ds-limited-banner__hero-card {
grid-column: 4 / span 2;
aspect-ratio: 5 / 7;
background-image: url('/kado-design/assets/cards/espeon-vmax-front.jpeg');
background-size: cover;
background-position: center;
border-radius: 6px;
box-shadow: 0 12px 28px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08);
z-index: 2;
transform: scale(1.08);
position: relative;
}
/* 좌우 deck cards (faded) */
.ds-limited-banner__deck {
display: contents;
}
.ds-limited-banner__deck > span {
display: block;
background-image: url('/kado-design/assets/cards/espeon-vmax-front.jpeg');
background-size: cover;
background-position: center;
aspect-ratio: 5 / 7;
border-radius: 4px;
opacity: 0.35;
filter: blur(0.5px);
border: 1px solid rgba(255,255,255,0.06);
}
.ds-limited-banner__deck > span:nth-child(1) { grid-column: 1; transform: rotate(-8deg) translateY(8px); opacity: 0.18; }
.ds-limited-banner__deck > span:nth-child(2) { grid-column: 2; transform: rotate(-4deg) translateY(2px); opacity: 0.28; }
.ds-limited-banner__deck > span:nth-child(3) { grid-column: 3; transform: translateY(-4px); opacity: 0.4; }
.ds-limited-banner__deck > span:nth-child(4) { grid-column: 6; transform: translateY(-4px); opacity: 0.4; }
.ds-limited-banner__deck > span:nth-child(5) { grid-column: 7; transform: rotate(4deg) translateY(2px); opacity: 0.28; }
.ds-limited-banner__deck > span:nth-child(6) { grid-column: 8; transform: rotate(8deg) translateY(8px); opacity: 0.18; }
.ds-limited-banner__deck > span:nth-child(n+7) { display: none; }
/* 우측 정보 영역 */
.ds-limited-banner__body {
display: flex; flex-direction: column;
justify-content: space-between;
padding: 24px 28px;
gap: 14px;
min-width: 0;
}
.ds-limited-banner__chip {
display: inline-flex; align-items: center;
align-self: flex-start;
padding: 5px 12px;
background: var(--mystic-100);
color: var(--mystic-800);
border-radius: 999px;
font-size: 12px; font-weight: 800;
letter-spacing: 0;
}
.ds-limited-banner__title {
font-size: 22px; font-weight: 800;
line-height: 1.3;
letter-spacing: -0.012em;
margin: 4px 0 0;
color: var(--fg-base);
}
.ds-limited-banner__bottom {
display: flex; flex-direction: column; gap: 8px;
margin-top: auto;
}
.ds-limited-banner__price {
display: flex; align-items: baseline; gap: 2px;
font-size: 22px; font-weight: 800;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
.ds-limited-banner__price strong { font-weight: 800; }
.ds-limited-banner__price small {
font-size: 14px; opacity: 0.55; font-weight: 600;
margin-left: 2px;
}
.ds-limited-banner__bar {
height: 6px;
background: var(--bg-subtle);
border-radius: 3px;
overflow: hidden;
margin-top: 4px;
}
.ds-limited-banner__bar > span {
display: block; height: 100%;
background: var(--mystic-500);
border-radius: 3px;
transition: width 0.4s ease-out;
}
.ds-limited-banner__bar--low > span { background: var(--danger-600, #dc2626); }
.ds-limited-banner__stock-row {
display: flex; justify-content: space-between; align-items: center;
font-size: 12px; color: var(--fg-muted);
font-weight: 600;
}
.ds-limited-banner__stock-row em {
font-style: normal; opacity: 0.55;
font-variant-numeric: tabular-nums;
}
.ds-limited-banner__stock-label--low { color: var(--danger-600, #dc2626); font-weight: 700; }
/* 모바일/태블릿 — vertical fallback (가로형 유지 어색해서 stack) */
@media (max-width: 767px) {
.ds-limited-banner {
grid-template-columns: 1fr;
height: auto;
}
.ds-limited-banner__visual {
height: 180px;
padding: 16px 20px;
}
.ds-limited-banner__hero-card { grid-column: 4 / span 2; transform: scale(1.0); }
.ds-limited-banner__body { padding: 20px; gap: 12px; }
.ds-limited-banner__title { font-size: 18px; }
.ds-limited-banner__price { font-size: 20px; }
}
/* v0.8 toast 안 inline link 스타일 */
.ds-toast a { color: inherit; text-decoration: underline; font-weight: var(--fw-bk); }
.ds-toast a:hover { opacity: 0.85; }
.ds-toast .mi { font-size: 18px; flex-shrink: 0; }
/* v0.8 promo carousel — 이미지 기반 슬라이드 (banner-{1,2,3}-{pc,mobile}.png, picture로 분기) */
.ds-promo__slide--image {
display: block;
padding: 0;
}
.ds-promo__slide--image picture {
display: block;
width: 100%; height: 100%;
}
.ds-promo__img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
[data-live-image-missing="true"] {
background-image: none !important;
background-color: var(--gray-100) !important;
}
:root[data-theme="dark"] [data-live-image-missing="true"] {
background-color: var(--gray-800) !important;
}
.ds-pack-hero__art--limited .ds-card-tile[data-live-image-missing="true"] {
background-color: rgba(255, 255, 255, 0.16) !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.is-live-skeleton .ds-mosaic-cell__visual,
.is-live-loading .ds-mosaic-cell__visual,
.is-live-skeleton .ds-card-tile,
.is-live-loading .ds-card-tile {
background-image: linear-gradient(90deg, var(--bg-subtle) 0%, var(--bg-muted, var(--gray-100)) 48%, var(--bg-subtle) 100%) !important;
background-color: var(--bg-subtle) !important;
background-size: 200% 100% !important;
background-position: 0 0 !important;
background-repeat: no-repeat !important;
animation: ds-skeleton-shimmer 1.4s ease-in-out infinite;
}
/* ==========================================================
Fixed layer guard
- 디자이너 HTML이 앱 래퍼 안에 주입되면서 일부 모바일/인앱 브라우저에서
fixed 레이어가 스크롤 컨테이너에 갇히는 현상을 방지한다.
========================================================== */
body > [data-kado-fixed-layer="true"].ds-modal,
body > [data-kado-fixed-layer="true"].ds-search-overlay,
body > [data-kado-fixed-layer="true"].ds-card-zoom {
position: fixed !important;
inset: 0 !important;
z-index: 1300;
}
body > [data-kado-fixed-layer="true"].ds-zoom-lightbox {
position: fixed !important;
inset: 0 !important;
z-index: 2000;
}
body > [data-kado-fixed-layer="true"].ds-toast {
position: fixed !important;
}
body > [data-kado-fixed-layer="true"].ds-exchange-bar {
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 1200;
}
@media (max-width: 767px) {
body > [data-kado-fixed-layer="true"].ds-mobile-tabs {
display: block;
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100%;
z-index: 1100;
transform: none !important;
/* 스크롤 위로 컨텐츠가 비치지 않도록 hoist 본체에도 명시. */
background: var(--bg-base) !important;
}
body.ds-filter-open > [data-kado-fixed-layer="true"].ds-mobile-tabs,
body:has(.ds-modal.is-open) > [data-kado-fixed-layer="true"].ds-mobile-tabs,
body:has(.ds-search-overlay.is-open) > [data-kado-fixed-layer="true"].ds-mobile-tabs,
body:has(.ds-zoom-lightbox.is-open) > [data-kado-fixed-layer="true"].ds-mobile-tabs,
body:has(.ds-card-zoom.is-open) > [data-kado-fixed-layer="true"].ds-mobile-tabs {
pointer-events: none;
}
/* 알림 패널이 열린 동안엔 하단 탭바 자체를 숨김. (탭바 z-index 1100 이
notif-panel z-index 200 보다 높아서 footer 의 "전체 알림 보기" 버튼이
탭바 뒤로 가려졌었음.) */
body.is-notif-open > [data-kado-fixed-layer="true"].ds-mobile-tabs {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
body > [data-kado-fixed-layer="true"].ds-filter-rail {
position: fixed !important;
left: auto !important;
right: 0 !important;
top: 0 !important;
bottom: 0 !important;
width: min(420px, 92vw);
height: 100vh;
height: 100dvh;
max-height: none;
z-index: 1210;
transform: translateX(100%) !important;
opacity: 1 !important;
visibility: hidden;
pointer-events: none;
}
body.ds-filter-open > [data-kado-fixed-layer="true"].ds-filter-rail {
transform: translateX(0) !important;
visibility: visible;
pointer-events: auto;
}
}
@media (max-width: 767px) {
body > [data-kado-fixed-layer="true"].ds-filter-rail {
position: fixed !important;
left: 0 !important;
right: 0 !important;
top: auto !important;
bottom: 0 !important;
width: 100%;
height: min(85dvh, 720px);
max-height: 85vh;
max-height: min(85dvh, 720px);
z-index: 1210;
transform: translateY(100%) !important;
opacity: 1 !important;
visibility: hidden;
pointer-events: none;
}
body.ds-filter-open > [data-kado-fixed-layer="true"].ds-filter-rail {
transform: translateY(0) !important;
visibility: visible;
pointer-events: auto;
}
}
@media (max-width: 1023px) {
body > [data-kado-fixed-layer="true"].ds-filter-backdrop {
display: block;
position: fixed !important;
inset: 0 !important;
z-index: 1200;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
body.ds-filter-open > [data-kado-fixed-layer="true"].ds-filter-backdrop {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
body.ds-filter-open {
overflow: hidden;
}
}
/* Shared Next shell hardening.
These rules intentionally target only the React-owned shell so late-loading
page CSS cannot pull persistent app chrome into stale mobile/desktop states
during soft navigation inside the Capacitor WebView. */
:root {
--kado-safe-top: env(safe-area-inset-top, 0px);
--kado-safe-bottom: env(safe-area-inset-bottom, 0px);
--kado-shell-safe-top: max(var(--kado-safe-top, 0px), env(safe-area-inset-top, 0px));
--kado-shell-safe-bottom: max(var(--kado-safe-bottom, 0px), env(safe-area-inset-bottom, 0px));
}
.ds-gnb[data-kado-shared-shell="true"] {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 1000 !important;
box-sizing: border-box !important;
transform: none !important;
}
.ds-shell-content {
padding-top: calc(var(--gnb-h, 56px) + var(--kado-shell-safe-top, env(safe-area-inset-top, 0px))) !important;
}
html[data-kado-native-app="true"] body[data-kado-native-fullscreen-route="true"] [data-kado-shared-shell="true"] {
display: none !important;
}
html[data-kado-native-app="true"] body[data-kado-native-fullscreen-route="true"] .ds-shell-content {
padding-top: 0 !important;
}
@media (max-width: 767px) {
.ds-gnb[data-kado-shared-shell="true"] {
height: calc(var(--gnb-h, 52px) + var(--kado-shell-safe-top, env(safe-area-inset-top, 0px))) !important;
min-height: calc(var(--gnb-h, 52px) + var(--kado-shell-safe-top, env(safe-area-inset-top, 0px))) !important;
padding-top: var(--kado-shell-safe-top, env(safe-area-inset-top, 0px)) !important;
padding-bottom: 0 !important;
background: var(--bg-base) !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
.ds-gnb[data-kado-shared-shell="true"] .ds-gnb__inner {
height: var(--gnb-h, 52px) !important;
max-height: var(--gnb-h, 52px) !important;
gap: 8px !important;
padding-inline: 16px !important;
}
.ds-gnb[data-kado-shared-shell="true"] .ds-gnb__right {
min-width: 0;
gap: 8px !important;
}
.ds-gnb[data-kado-shared-shell="true"] .ds-gnb__menu {
display: none !important;
}
.ds-gnb[data-kado-shared-shell="true"] .ds-gnb__actions {
grid-template-columns: 32px minmax(0, max-content) !important;
min-width: 0;
gap: 6px !important;
}
.ds-gnb[data-kado-shared-shell="true"] .ds-gnb__notif-slot {
width: 32px !important;
height: 32px !important;
}
.ds-gnb[data-kado-shared-shell="true"] .ds-gnb__icons {
grid-template-columns: minmax(0, max-content) !important;
min-width: 0;
}
.ds-gnb[data-kado-shared-shell="true"] .ds-gnb__user {
min-width: 0;
max-width: min(156px, 40vw);
height: 36px !important;
min-height: 36px;
}
.ds-gnb[data-kado-shared-shell="true"] .ds-gnb__balance {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.ds-mobile-tabs[data-kado-shared-shell="true"] {
display: block;
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 1100 !important;
height: calc(60px + max(var(--kado-shell-safe-bottom, env(safe-area-inset-bottom, 0px)), 8px)) !important;
padding-bottom: max(var(--kado-shell-safe-bottom, env(safe-area-inset-bottom, 0px)), 8px) !important;
box-sizing: border-box !important;
transform: none !important;
background: var(--bg-base) !important;
}
.ds-mobile-tabs[data-kado-shared-shell="true"] .ds-mobile-tabs__inner {
height: 60px !important;
}
}
/* ==========================================================
MyPage Redeem
========================================================== */
.ds-redeem-page {
padding-block: 24px 72px;
}
.ds-redeem-back {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 16px;
color: var(--fg-subtle);
font-size: var(--fs-body-sm);
font-weight: var(--fw-bd);
text-decoration: none;
}
.ds-redeem-back:hover {
color: var(--fg-base);
}
.ds-redeem-header {
padding-block: 24px 28px;
}
.ds-redeem-summary {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 36px;
padding: 0 14px;
border: 1px solid var(--border-base);
border-radius: var(--r-pill);
background: var(--bg-card);
color: var(--fg-muted);
font-size: var(--fs-caption);
}
.ds-redeem-summary strong {
color: var(--fg-base);
font-size: var(--fs-body-sm);
font-variant-numeric: tabular-nums;
}
.ds-redeem-alert {
margin: 18px 0;
padding: 12px 14px;
border: 1px solid var(--border-base);
border-radius: var(--r-8);
font-size: var(--fs-body-sm);
font-weight: var(--fw-bd);
}
.ds-redeem-alert--success {
border-color: color-mix(in srgb, var(--success-500) 34%, var(--border-base));
background: color-mix(in srgb, var(--success-500) 8%, var(--bg-card));
color: var(--success-700);
}
.ds-redeem-alert--error {
border-color: color-mix(in srgb, var(--danger-500) 34%, var(--border-base));
background: color-mix(in srgb, var(--danger-500) 7%, var(--bg-card));
color: var(--danger-700);
}
.ds-redeem-alert--info {
background: var(--bg-subtle);
color: var(--fg-subtle);
}
.ds-redeem-panel,
.ds-redeem-section {
margin-top: 24px;
}
.ds-redeem-panel {
padding: 20px;
border: 1px solid var(--border-base);
border-radius: var(--r-12);
background: var(--bg-card);
}
.ds-redeem-section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin-bottom: 14px;
}
.ds-redeem-section-head h2 {
margin: 0;
font-size: var(--fs-h3);
line-height: var(--lh-tight);
letter-spacing: -0.012em;
}
.ds-redeem-section-head p {
margin: 5px 0 0;
color: var(--fg-muted);
font-size: var(--fs-caption);
line-height: 1.45;
}
.ds-redeem-price-chip,
.ds-redeem-count {
display: inline-flex;
align-items: center;
justify-content: center;
height: 28px;
padding: 0 10px;
border: 1px solid var(--border-base);
border-radius: var(--r-6);
background: var(--bg-subtle);
color: var(--fg-base);
font-size: var(--fs-caption);
font-weight: var(--fw-bd);
white-space: nowrap;
}
.ds-redeem-option-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.ds-redeem-option {
min-height: 128px;
padding: 16px;
border: 1px solid var(--border-base);
border-radius: var(--r-10);
background: var(--bg-card);
color: var(--fg-base);
text-align: left;
cursor: pointer;
transition: border-color var(--t-fast) ease, background var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.ds-redeem-option:hover {
border-color: var(--border-strong);
background: var(--bg-subtle);
}
.ds-redeem-option[aria-pressed="true"] {
border-color: var(--gray-950);
background: var(--bg-subtle);
box-shadow: inset 0 0 0 1px var(--gray-950);
}
.ds-redeem-option__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.ds-redeem-option__top strong {
font-size: var(--fs-body-sm);
font-variant-numeric: tabular-nums;
}
.ds-redeem-option__title {
display: block;
margin-top: 16px;
font-size: var(--fs-body-sm);
font-weight: var(--fw-bk);
}
.ds-redeem-option__desc {
display: block;
margin-top: 4px;
color: var(--fg-muted);
font-size: var(--fs-caption);
line-height: 1.45;
}
.ds-redeem-address {
display: flex;
align-items: flex-start;
gap: 12px;
margin-top: 12px;
padding: 14px;
border: 1px solid var(--border-base);
border-radius: var(--r-10);
background: var(--bg-subtle);
}
.ds-redeem-address svg {
flex: 0 0 auto;
margin-top: 1px;
}
.ds-redeem-address strong {
display: block;
font-size: var(--fs-body-sm);
}
.ds-redeem-address p {
margin: 3px 0 0;
color: var(--fg-muted);
font-size: var(--fs-caption);
line-height: 1.45;
}
.ds-redeem-address__link {
margin-left: auto;
color: var(--fg-base);
font-size: var(--fs-caption);
font-weight: var(--fw-bd);
text-decoration: underline;
text-underline-offset: 3px;
white-space: nowrap;
}
.ds-redeem-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex-wrap: wrap;
}
.ds-redeem-selection-note {
display: flex;
gap: 8px;
margin-bottom: 10px;
color: var(--fg-muted);
font-size: var(--fs-caption);
font-weight: var(--fw-md);
}
.ds-redeem-title-field {
display: grid;
gap: 8px;
margin-bottom: 12px;
}
.ds-redeem-title-field span {
color: var(--fg-muted);
font-size: var(--fs-caption-sm);
font-weight: var(--fw-bd);
}
.ds-redeem-title-field input {
width: 100%;
min-height: 44px;
padding: 0 14px;
border: 1px solid var(--border-base);
border-radius: var(--r-10);
background: var(--bg-card);
color: var(--fg-base);
font-size: var(--fs-body-sm);
font-weight: var(--fw-md);
outline: none;
}
.ds-redeem-title-field input:focus {
border-color: var(--gray-950);
box-shadow: inset 0 0 0 1px var(--gray-950);
}
.ds-redeem-title-field input:disabled {
background: var(--bg-subtle);
color: var(--fg-muted);
cursor: not-allowed;
}
.ds-redeem-item-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
padding: 0;
}
.ds-redeem-item {
position: relative;
min-width: 0;
}
.ds-redeem-item[data-selected="true"] {
border-color: var(--mystic-500, var(--success-500));
box-shadow: inset 0 0 0 1px var(--mystic-500, var(--success-500));
}
.ds-redeem-check {
position: absolute;
top: 14px;
left: 14px;
z-index: 3;
display: block;
width: 30px;
height: 30px;
cursor: pointer;
}
.ds-redeem-check input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.ds-redeem-check > span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 2px solid var(--gray-700);
border-radius: 50%;
background: rgba(255,255,255,0.96);
box-shadow: 0 2px 8px rgba(0,0,0,0.16);
transition: background var(--t-fast) ease, border-color var(--t-fast) ease, opacity var(--t-fast) ease;
}
.ds-redeem-check > span .mi {
display: none;
}
.ds-redeem-check > span::before {
content: "";
width: 8px;
height: 13px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
opacity: 0;
transform: rotate(45deg) translate(-1px, -2px);
transition: opacity var(--t-fast) ease;
}
.ds-redeem-check input:checked + span {
border-color: var(--mystic-600, #14b441);
background: var(--mystic-600, #14b441);
}
.ds-redeem-check input:checked + span::before {
opacity: 1;
}
.ds-redeem-check input:disabled + span {
opacity: 0.45;
}
.ds-redeem-item__body {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
min-width: 0;
padding: 0;
border: 0;
background: transparent;
color: inherit;
text-align: left;
cursor: pointer;
}
.ds-redeem-item__body:disabled {
cursor: wait;
}
.ds-redeem-item__thumb {
width: 100%;
padding: 0;
color: var(--fg-faint);
}
.ds-redeem-item__thumb img {
display: block;
width: 100% !important;
height: 100% !important;
max-width: 100%;
max-height: 100%;
object-fit: contain !important;
}
.ds-redeem-item__text {
min-width: 0;
min-height: 104px;
}
.ds-redeem-item .ds-coll-card__value {
margin-top: 2px;
}
.ds-redeem-item__status {
margin-top: auto;
}
.ds-redeem-loading,
.ds-redeem-empty {
display: grid;
place-items: center;
gap: 8px;
min-height: 180px;
padding: 28px;
border: 1px dashed var(--border-base);
border-radius: var(--r-12);
background: var(--bg-subtle);
color: var(--fg-muted);
text-align: center;
}
.ds-redeem-empty h1,
.ds-redeem-empty h3 {
margin: 0;
color: var(--fg-base);
font-size: var(--fs-h4);
}
.ds-redeem-empty p {
margin: 0;
font-size: var(--fs-caption);
}
.ds-redeem-spin {
animation: ds-redeem-spin 900ms linear infinite;
}
@keyframes ds-redeem-spin {
to { transform: rotate(360deg); }
}
.ds-redeem-history-list {
overflow: hidden;
border: 1px solid var(--border-base);
border-radius: var(--r-12);
background: var(--bg-card);
}
.ds-redeem-history {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px 14px;
padding: 16px;
border-bottom: 1px solid var(--border-base);
scroll-margin-top: calc(var(--kado-shell-header-height, 80px) + 16px);
transition: background var(--t-base) var(--ease-std), box-shadow var(--t-base) var(--ease-std);
}
.ds-redeem-history:last-child {
border-bottom: 0;
}
.ds-redeem-history.is-highlighted {
background: color-mix(in srgb, var(--mystic-500, #2f8f62) 8%, var(--bg-card));
box-shadow: inset 3px 0 0 var(--mystic-500, #2f8f62);
}
.ds-redeem-history__main {
min-width: 0;
}
.ds-redeem-history__title-row {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.ds-redeem-history__title-row strong {
display: inline-block;
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--fs-body-sm);
}
.ds-redeem-history__main p,
.ds-redeem-history__detail {
margin: 4px 0 0;
color: var(--fg-muted);
font-size: var(--fs-caption);
line-height: 1.45;
}
.ds-redeem-history__badges {
display: flex;
align-items: flex-start;
justify-content: flex-end;
gap: 6px;
flex-wrap: wrap;
}
.ds-redeem-history__detail {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
gap: 2px;
padding-top: 10px;
border-top: 1px solid var(--border-subtle);
}
.ds-redeem-status {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 8px;
border: 1px solid var(--border-base);
border-radius: var(--r-4);
background: var(--bg-subtle);
font-size: var(--fs-caption-sm);
font-weight: var(--fw-bd);
white-space: nowrap;
}
.ds-redeem-cancel {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 58px;
height: 32px;
padding: 0 12px;
border: 1px solid color-mix(in srgb, var(--danger-500) 34%, var(--border-base));
border-radius: var(--r-8);
background: color-mix(in srgb, var(--danger-500) 7%, var(--bg-card));
color: var(--danger-700);
font-size: var(--fs-caption);
font-weight: var(--fw-bd);
cursor: pointer;
pointer-events: auto;
position: relative;
z-index: 2;
white-space: nowrap;
}
.ds-redeem-cancel:hover {
border-color: var(--danger-500);
background: color-mix(in srgb, var(--danger-500) 12%, var(--bg-card));
}
.ds-redeem-cancel:disabled {
opacity: 0.55;
cursor: wait;
}
.ds-redeem-address-change {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 86px;
height: 32px;
padding: 0 12px;
border: 1px solid var(--border-base);
border-radius: var(--r-8);
background: var(--bg-card);
color: var(--fg-base);
font-size: var(--fs-caption);
font-weight: var(--fw-bd);
cursor: pointer;
position: relative;
z-index: 2;
white-space: nowrap;
}
.ds-redeem-address-change:hover {
border-color: var(--border-strong);
background: var(--bg-subtle);
}
.ds-redeem-address-change:disabled {
opacity: 0.55;
cursor: wait;
}
.ds-modal--redeem-address {
z-index: 1300;
}
.ds-modal__panel--redeem-address {
max-width: 640px;
padding: 24px;
}
.ds-modal__panel--redeem-address .ds-modal__head {
align-items: flex-start;
margin-bottom: 14px;
}
.ds-modal__panel--redeem-address .ds-modal__sub {
margin-bottom: 0;
}
.ds-redeem-address-modal__current {
display: grid;
gap: 4px;
padding: 14px;
border: 1px solid var(--border-base);
border-radius: var(--r-10);
background: var(--bg-subtle);
}
.ds-redeem-address-modal__current span {
color: var(--fg-muted);
font-size: var(--fs-caption-sm);
font-weight: var(--fw-bd);
}
.ds-redeem-address-modal__current strong {
color: var(--fg-base);
font-size: var(--fs-body-sm);
}
.ds-redeem-address-modal__current p {
margin: 0;
color: var(--fg-muted);
font-size: var(--fs-caption);
line-height: 1.45;
}
.ds-redeem-address-modal__tabs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-top: 14px;
}
.ds-redeem-address-modal__tabs button {
min-height: 42px;
border: 1px solid var(--border-base);
border-radius: var(--r-8);
background: var(--bg-card);
color: var(--fg-muted);
font-size: var(--fs-body-sm);
font-weight: var(--fw-bd);
cursor: pointer;
}
.ds-redeem-address-modal__tabs button[aria-selected="true"] {
border-color: var(--gray-950);
background: var(--gray-950);
color: #fff;
}
.ds-redeem-address-modal__tabs button:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.ds-redeem-address-modal__list {
display: grid;
gap: 8px;
margin-top: 14px;
}
.ds-redeem-address-card {
display: grid;
gap: 5px;
width: 100%;
padding: 14px;
border: 1px solid var(--border-base);
border-radius: var(--r-10);
background: var(--bg-card);
color: var(--fg-muted);
font-size: var(--fs-caption);
line-height: 1.45;
text-align: left;
cursor: pointer;
}
.ds-redeem-address-card:hover {
border-color: var(--border-strong);
background: var(--bg-subtle);
}
.ds-redeem-address-card[aria-pressed="true"] {
border-color: var(--gray-950);
box-shadow: inset 0 0 0 1px var(--gray-950);
}
.ds-redeem-address-card:disabled {
opacity: 0.6;
cursor: wait;
}
.ds-redeem-address-card__top {
display: flex;
align-items: center;
gap: 8px;
color: var(--fg-base);
}
.ds-redeem-address-card__top strong {
font-size: var(--fs-body-sm);
}
.ds-redeem-address-card__top em {
display: inline-flex;
align-items: center;
height: 20px;
padding: 0 7px;
border-radius: var(--r-pill);
background: var(--gray-950);
color: #fff;
font-size: var(--fs-caption-sm);
font-style: normal;
font-weight: var(--fw-bd);
}
.ds-redeem-address-modal__empty {
margin-top: 14px;
padding: 18px;
border: 1px dashed var(--border-base);
border-radius: var(--r-10);
background: var(--bg-subtle);
color: var(--fg-muted);
font-size: var(--fs-caption);
text-align: center;
}
.ds-redeem-address-form {
display: grid;
gap: 12px;
margin-top: 14px;
}
.ds-redeem-address-form__row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.ds-redeem-address-form label {
display: grid;
gap: 6px;
min-width: 0;
color: var(--fg-muted);
font-size: var(--fs-caption);
font-weight: var(--fw-bd);
}
.ds-redeem-address-form input[type="text"],
.ds-redeem-address-form input[type="tel"] {
width: 100%;
min-height: 44px;
padding: 0 12px;
border: 1px solid var(--border-base);
border-radius: var(--r-8);
background: var(--bg-card);
color: var(--fg-base);
font: inherit;
font-weight: var(--fw-md);
}
.ds-redeem-address-form input:focus {
outline: none;
border-color: var(--gray-950);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--gray-950) 10%, transparent);
}
.ds-redeem-address-form__check {
display: flex !important;
grid-template-columns: none !important;
align-items: center;
gap: 8px !important;
}
.ds-redeem-address-form__check input {
width: 18px;
height: 18px;
}
.ds-redeem-status--success {
color: var(--success-700);
background: color-mix(in srgb, var(--success-500) 9%, var(--bg-card));
border-color: color-mix(in srgb, var(--success-500) 32%, var(--border-base));
}
.ds-redeem-status--danger {
color: var(--danger-700);
background: color-mix(in srgb, var(--danger-500) 8%, var(--bg-card));
border-color: color-mix(in srgb, var(--danger-500) 30%, var(--border-base));
}
.ds-redeem-status--warn {
color: var(--legendary-700);
background: color-mix(in srgb, var(--legendary-500) 12%, var(--bg-card));
border-color: color-mix(in srgb, var(--legendary-500) 36%, var(--border-base));
}
@media (max-width: 767px) {
.ds-redeem-page {
padding-block: 16px calc(92px + var(--kado-shell-safe-bottom, 0px));
}
.ds-redeem-back {
margin-top: 10px;
}
.ds-redeem-header {
padding-block: 18px 22px;
}
.ds-redeem-summary {
width: 100%;
justify-content: space-between;
}
.ds-redeem-panel {
padding: 14px;
border-radius: var(--r-10);
}
.ds-redeem-section {
margin-top: 22px;
}
.ds-redeem-section-head {
align-items: flex-start;
flex-direction: column;
gap: 10px;
margin-bottom: 12px;
}
.ds-redeem-section-head h2 {
font-size: 22px;
}
.ds-redeem-actions {
width: 100%;
justify-content: stretch;
}
.ds-redeem-actions .ds-btn {
flex: 1 1 0;
min-width: 0;
}
.ds-redeem-option-grid {
grid-template-columns: 1fr;
}
.ds-redeem-option {
min-height: auto;
padding: 14px;
}
.ds-redeem-address {
align-items: flex-start;
}
.ds-redeem-address__link {
margin-left: 0;
}
.ds-redeem-item-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.ds-redeem-check {
top: 12px;
left: 12px;
}
.ds-redeem-check,
.ds-redeem-check > span {
width: 28px;
height: 28px;
}
.ds-redeem-item__text {
min-height: 98px;
}
.ds-redeem-item__thumb {
padding: 0;
}
.ds-redeem-history {
grid-template-columns: 1fr;
}
.ds-redeem-history__badges {
justify-content: flex-start;
}
.ds-modal--redeem-address {
align-items: flex-end;
padding: 12px;
}
.ds-modal__panel--redeem-address {
max-height: min(86vh, 720px);
border-radius: 18px 18px 12px 12px;
padding: 20px;
}
.ds-redeem-address-modal__tabs,
.ds-redeem-address-form__row {
grid-template-columns: 1fr;
}
.ds-redeem-address-card {
padding: 12px;
}
}