/* 홈: 배너 */
.banner {
height: 160px;
border-radius: var(--radius-lg);
padding: var(--space-5);
background: linear-gradient(135deg, #6C6CFF 0%, #9b5bff 60%, #ff6b6b 100%);
color: #fff;
display: flex; flex-direction: column; justify-content: space-between;
box-shadow: var(--shadow-md);
}
.banner-title { font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: 1.2; }
.banner-sub { font-size: var(--text-sm); opacity: .92; }
/* 박스 카드 (가로 스크롤용 소형) */
.box-card-sm {
width: 140px;
background: var(--color-bg);
border: 2px solid transparent;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
color: inherit;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: border-color .15s ease, box-shadow .18s ease, transform .1s ease;
}
.box-card-sm,
.box-card-sm:hover,
.box-card-sm:focus,
.box-card-sm:active,
.box-card-sm:visited { color: inherit; text-decoration: none; }
/* hover: 보라 테두리 + 글로우 (명예의 전당과 동일) */
.box-card-sm:hover {
border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(91,91,255,.18), 0 6px 16px rgba(91,91,255,.22);
}
.box-card-sm:active { transform: scale(.98); }
.box-card-sm:focus-visible {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(91,91,255,.25), 0 6px 16px rgba(91,91,255,.22);
}
.box-card-sm .thumb {
aspect-ratio: 1 / 1;
background: var(--color-surface);
display: flex; align-items: center; justify-content: center;
font-size: 36px;
}
.box-card-sm .body { padding: var(--space-3); }
.box-card-sm .name { font-weight: var(--weight-medium); font-size: var(--text-sm); margin-bottom: var(--space-1); }
.box-card-sm .price { font-size: var(--text-sm); color: var(--color-primary); font-weight: var(--weight-bold); }
/* 박스 그리드 카드 */
.box-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3);
}
.box-card {
background: var(--color-bg);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
text-align: left;
display: block;
transition: transform .1s ease;
}
.box-card:active { transform: scale(0.98); }
.box-card .thumb {
aspect-ratio: 1 / 1;
background: var(--color-surface);
display: flex; align-items: center; justify-content: center;
font-size: 48px;
}
.box-card .body { padding: var(--space-3) var(--space-3) var(--space-4); }
.box-card .name {
font-weight: var(--weight-medium);
font-size: var(--text-base);
margin-bottom: var(--space-1);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.box-card .price { font-size: var(--text-base); color: var(--color-primary); font-weight: var(--weight-bold); }
/* 당첨 피드 */
.feed-list { display: flex; flex-direction: column; gap: var(--space-2); }
.feed-item {
padding: var(--space-3);
background: var(--color-surface);
border-radius: var(--radius-md);
font-size: var(--text-sm);
display: flex; align-items: center; gap: var(--space-3);
}
.feed-item .emoji { font-size: 20px; }
.feed-item .meta { color: var(--color-text-muted); font-size: var(--text-xs); }
/* 검색바 + 칩 */
.search-bar {
display: flex; align-items: center; gap: var(--space-2);
padding: var(--space-3) var(--space-4);
background: var(--color-surface);
border-radius: var(--radius-full);
margin-bottom: var(--space-3);
}
.search-bar input {
flex: 1;
border: none;
background: transparent;
outline: none;
font-size: var(--text-base);
}
.chips {
display: flex; gap: var(--space-2);
overflow-x: auto;
padding-bottom: var(--space-2);
margin-bottom: var(--space-4);
-ms-overflow-style: none; scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-full);
background: var(--color-surface);
color: var(--color-text-sub);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
white-space: nowrap;
transition: background .15s ease, color .15s ease;
}
.chip.active { background: var(--color-primary); color: #fff; }
/* 소식 탭 (세그먼트) */
.segmented {
display: grid;
grid-template-columns: repeat(3, 1fr);
background: var(--color-surface);
border-radius: var(--radius-full);
padding: 4px;
margin-bottom: var(--space-4);
}
.segmented button {
padding: var(--space-2) 0;
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text-sub);
transition: background .15s ease, color .15s ease;
}
.segmented button.active {
background: var(--color-bg);
color: var(--color-text);
box-shadow: var(--shadow-sm);
}
/* 소식 카드 */
.news-list { display: flex; flex-direction: column; gap: var(--space-3); }
.news-card {
display: grid;
grid-template-columns: 88px 1fr;
gap: var(--space-3);
background: var(--color-bg);
border-radius: var(--radius-md);
padding: var(--space-3);
box-shadow: var(--shadow-sm);
}
.news-card .thumb {
aspect-ratio: 1 / 1;
background: var(--color-surface);
border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: center;
font-size: 28px;
}
.news-card .title { font-weight: var(--weight-medium); margin-bottom: var(--space-1); }
.news-card .summary { font-size: var(--text-sm); color: var(--color-text-sub); margin-bottom: var(--space-2);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.news-card .date { font-size: var(--text-xs); color: var(--color-text-muted); }
/* 빈 상태 */
.empty-state {
padding: var(--space-8) var(--space-4);
text-align: center;
display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
}
.empty-state .icon { font-size: 48px; }
.empty-state .title { font-size: var(--text-lg); font-weight: var(--weight-bold); }
.empty-state .desc { color: var(--color-text-sub); font-size: var(--text-sm); }
/* 당첨(상자 오픈) 카드 — 소식 탭 메인 */
.draw-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.draw-card {
display: grid;
grid-template-columns: 72px 1fr;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
background: var(--color-bg);
border: 2px solid transparent;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
align-items: center;
color: inherit;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: background .15s ease, transform .08s ease, box-shadow .15s ease, border-color .15s ease;
}
/* 실시간 당첨 — 카드 전체 테두리도 등급 색으로 */
.draw-card.tier-common { border-color: var(--color-border); }
.draw-card.tier-rare { border-color: #ffd54a; }
.draw-card.tier-epic { border-color: #c89bff; }
.draw-card.tier-legendary { border-color: #6ec8ff; }
.draw-card.tier-mythic { position: relative; border-color: transparent; }
.draw-card.tier-mythic::before {
content: '';
position: absolute;
inset: 0;
border-radius: var(--radius-lg);
padding: 2px;
background: linear-gradient(120deg,#ff5b8a,#ffd54a,#6ed37a,#5b9bff,#b65bff);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: 1;
}
.draw-card,
.draw-card:hover,
.draw-card:focus,
.draw-card:active,
.draw-card:visited { text-decoration: none; color: inherit; }
/* 박스구매 리스트(.box-row) 와 동일한 hover — 은은한 보라 배경 */
.draw-card:hover { background: #F5F4FF; }
.draw-card:active { background: #EEE9FF; transform: scale(.997); }
.draw-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.draw-card .thumb {
aspect-ratio: 1 / 1;
border-radius: var(--radius-md);
background: var(--color-surface);
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
border: 2px solid transparent;
box-sizing: border-box;
}
/* 실시간 당첨 카드 — 등급별 썸네일 테두리 */
.draw-card.tier-common .thumb { border-color: var(--color-border); }
.draw-card.tier-rare .thumb { border-color: #ffd54a; }
.draw-card.tier-epic .thumb { border-color: #c89bff; }
.draw-card.tier-legendary .thumb { border-color: #6ec8ff; }
/* mythic 은 인라인 background 가 덮어 쓰므로 pseudo-ring 으로 무지개 표시 */
.draw-card.tier-mythic .thumb { position: relative; border-color: transparent; }
.draw-card.tier-mythic .thumb::before {
content: '';
position: absolute;
inset: 0;
border-radius: var(--radius-md);
padding: 2px;
background: linear-gradient(120deg,#ff5b8a,#ffd54a,#6ed37a,#5b9bff,#b65bff);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.draw-card .body { min-width: 0; }
.draw-card .nickname {
font-size: var(--text-xs);
color: var(--color-text-sub);
margin-bottom: 2px;
}
.draw-card .nickname b {
color: var(--color-text);
font-weight: var(--weight-bold);
}
.draw-card .prize-name {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
margin-bottom: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.draw-card .prize-price {
font-size: var(--text-base);
font-weight: var(--weight-bold);
color: var(--color-primary);
}
.draw-card .meta {
display: flex;
gap: var(--space-2);
align-items: center;
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-top: var(--space-1);
}
.draw-card .box-tag {
padding: 2px 8px;
border-radius: var(--radius-full);
background: var(--color-primary-soft);
color: var(--color-primary);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
}
/* 이벤트 배너 (홈 - 광고 이미지형, 가로 스크롤) */
.event-scroll {
display: flex;
gap: var(--space-3);
overflow-x: auto;
padding-bottom: var(--space-2);
scroll-snap-type: x mandatory;
-ms-overflow-style: none;
scrollbar-width: none;
}
.event-scroll::-webkit-scrollbar { display: none; }
.event-banner {
flex-shrink: 0;
width: 86%;
max-width: 480px;
aspect-ratio: 16 / 7;
border-radius: var(--radius-lg);
overflow: hidden;
position: relative;
box-shadow: var(--shadow-sm);
display: block;
scroll-snap-align: start;
color: inherit;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: transform .1s ease;
}
/* hover 효과 없음 — 밑줄/색상 변화 차단(글로벌 a:hover 무시) */
.event-banner,
.event-banner:hover,
.event-banner:focus,
.event-banner:active,
.event-banner:visited { color: inherit; text-decoration: none; }
.event-banner:active { transform: scale(0.99); }
.event-banner img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
/* 이미지가 없을 때 fallback: 그라데이션 + 텍스트 */
.event-banner.placeholder {
color: #fff;
padding: var(--space-4) var(--space-5);
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
}
.event-banner.placeholder .event-emoji {
font-size: 40px;
margin-bottom: var(--space-2);
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
.event-banner.placeholder .event-title {
font-size: var(--text-lg);
font-weight: var(--weight-bold);
line-height: 1.25;
}
.event-banner.placeholder .event-sub {
font-size: var(--text-sm);
opacity: 0.95;
}
.event-banner .event-badge {
position: absolute;
top: var(--space-3);
right: var(--space-3);
padding: 3px 10px;
border-radius: var(--radius-full);
background: rgba(255,255,255,0.25);
color: #fff;
font-size: 10px;
font-weight: var(--weight-bold);
letter-spacing: 0.4px;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
/* ===== 이벤트 목록 페이지 ===== */
.event-list-full {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.event-list-card {
display: block;
background: var(--color-bg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: box-shadow .15s;
}
.event-list-card:hover { box-shadow: var(--shadow-md); text-decoration: none; color: inherit; }
.event-list-card:active { color: inherit; text-decoration: none; }
.event-list-banner {
width: 100%;
aspect-ratio: 16 / 7;
overflow: hidden;
position: relative;
}
.event-list-banner img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.event-list-banner.placeholder {
color: #fff;
padding: var(--space-4) var(--space-5);
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
}
.event-list-banner.placeholder .event-emoji {
font-size: 40px;
margin-bottom: var(--space-2);
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
.event-list-banner.placeholder .event-title {
font-size: var(--text-lg);
font-weight: var(--weight-bold);
line-height: 1.25;
}
.event-list-banner.placeholder .event-sub {
font-size: var(--text-sm);
opacity: 0.95;
}
.event-list-banner .event-badge {
position: absolute;
top: var(--space-3);
right: var(--space-3);
padding: 3px 10px;
border-radius: var(--radius-full);
background: rgba(255,255,255,0.25);
color: #fff;
font-size: 10px;
font-weight: var(--weight-bold);
letter-spacing: 0.4px;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.event-list-body {
padding: var(--space-3) var(--space-4);
}
.event-list-title {
font-size: var(--text-base);
font-weight: var(--weight-bold);
margin-bottom: 2px;
}
.event-list-date {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
/* ===== 이벤트 상세 페이지 ===== */
.event-detail {
padding-bottom: var(--bottom-bar-clear, 100px);
}
.event-detail-head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
margin-bottom: var(--space-4);
}
.event-detail-badge {
display: inline-block;
padding: 3px 10px;
border-radius: var(--radius-full);
background: var(--color-primary);
color: #fff;
font-size: 10px;
font-weight: var(--weight-bold);
letter-spacing: 0.4px;
margin-bottom: 4px;
}
.event-detail-title {
font-size: var(--text-xl);
font-weight: var(--weight-bold);
line-height: 1.3;
margin: 0;
word-break: keep-all;
}
.event-detail-sub {
font-size: var(--text-sm);
color: var(--color-text-sub);
}
.event-detail-date {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.event-detail-banner {
width: 100%;
aspect-ratio: 16 / 7;
border-radius: var(--radius-lg);
overflow: hidden;
margin-bottom: var(--space-4);
}
.event-detail-banner img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.event-detail-banner.placeholder {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.event-detail-images {
display: flex;
flex-direction: column;
gap: 0;
}
.event-detail-img {
width: 100%;
display: block;
}
.event-detail-placeholder {
text-align: center;
padding: var(--space-6) var(--space-4);
color: var(--color-text-muted);
font-size: var(--text-sm);
}
/* 공지 단일 카드 (홈) */
.notice-single {
display: grid;
grid-template-columns: 40px 1fr auto;
gap: var(--space-3);
align-items: center;
padding: var(--space-4);
background: var(--color-bg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
text-decoration: none;
color: inherit;
}
.notice-single:hover { text-decoration: none; background: var(--color-surface); }
.notice-single .emoji {
width: 40px; height: 40px;
border-radius: var(--radius-full);
background: var(--color-primary-soft);
display: grid; place-content: center;
font-size: 20px;
}
.notice-single .body { min-width: 0; }
.notice-single .title {
font-weight: var(--weight-medium);
font-size: var(--text-base);
margin-bottom: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.notice-single .summary {
font-size: var(--text-sm);
color: var(--color-text-sub);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.notice-single .chev {
color: var(--color-text-muted);
font-size: 18px;
}
/* 공지 롤링 (홈) — 최신 3개를 위로 흐르듯 노출 */
.notice-rolling {
position: relative;
overflow: hidden;
background: var(--color-bg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.notice-track {
display: flex;
flex-direction: column;
will-change: transform;
}
.notice-row {
display: grid;
grid-template-columns: 40px 1fr auto;
gap: var(--space-3);
align-items: center;
padding: var(--space-4);
text-decoration: none;
color: inherit;
flex: 0 0 auto;
}
.notice-row + .notice-row { border-top: 1px solid var(--color-border); }
.notice-row:hover { background: var(--color-surface); text-decoration: none; }
.notice-row .emoji {
width: 40px; height: 40px;
border-radius: var(--radius-full);
background: var(--color-primary-soft);
display: grid; place-content: center;
font-size: 20px;
}
.notice-row .body { min-width: 0; }
.notice-row .title {
font-weight: var(--weight-medium);
font-size: var(--text-base);
margin-bottom: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.notice-row .summary {
font-size: var(--text-sm);
color: var(--color-text-sub);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.notice-row .chev {
color: var(--color-text-muted);
font-size: 18px;
}
/* 전체보기 링크 — 회색 밑줄 */
.section-more.notices-more {
color: var(--color-text-muted);
text-decoration: underline;
text-underline-offset: 2px;
font-size: var(--text-sm);
}
.section-more.notices-more:hover { color: var(--color-text-sub); }
/* 공지사항 목록 페이지 */
.notice-list-full {
display: flex;
flex-direction: column;
background: var(--color-bg);
}
.notice-list-row {
display: grid;
grid-template-columns: 40px 1fr 18px;
gap: var(--space-3);
align-items: center;
padding: var(--space-4);
text-decoration: none;
color: inherit;
border-bottom: 1px solid var(--color-border);
}
.notice-list-row:last-child { border-bottom: 0; }
.notice-list-row:hover { background: #F5F4FF; text-decoration: none; }
.notice-list-row:active { background: #EEE9FF; }
.notice-list-row .emoji {
width: 40px; height: 40px;
border-radius: var(--radius-full);
background: var(--color-primary-soft);
display: grid; place-content: center;
font-size: 20px;
}
.notice-list-row .body { min-width: 0; }
.notice-list-row .title {
font-weight: var(--weight-medium);
font-size: var(--text-base);
margin-bottom: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.notice-list-row .summary {
font-size: var(--text-sm);
color: var(--color-text-sub);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 4px;
}
.notice-list-row .date {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.notice-list-row .chev {
color: var(--color-text-muted);
font-size: 18px;
justify-self: end;
}
/* 공지 상세 */
.notice-detail {
padding: var(--space-4);
padding-bottom: var(--bottom-bar-clear, 100px);
}
.notice-detail-head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.notice-detail-head .emoji-wrap .emoji {
width: 48px; height: 48px;
border-radius: var(--radius-full);
background: var(--color-primary-soft);
display: grid; place-content: center;
font-size: 24px;
}
.notice-detail-title {
font-size: var(--text-xl);
font-weight: var(--weight-bold);
line-height: 1.3;
margin: 0;
word-break: keep-all;
}
.notice-detail-date {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.notice-detail-body {
background: var(--color-bg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.notice-detail-para {
margin: 0;
font-size: var(--text-base);
line-height: 1.6;
color: var(--color-text);
word-break: keep-all;
}
/* 당첨 상품 미리보기 grid (3열) */
.prize-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-3);
}
.prize-cell {
display: block;
background: var(--color-bg);
border: 2px solid transparent;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
color: inherit;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: border-color .15s ease, box-shadow .18s ease, transform .1s ease;
}
.prize-cell,
.prize-cell:hover,
.prize-cell:focus,
.prize-cell:active,
.prize-cell:visited { color: inherit; text-decoration: none; }
/* hover: 보라 테두리 + 글로우 */
.prize-cell:hover {
border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(91,91,255,.18), 0 6px 16px rgba(91,91,255,.22);
}
.prize-cell:active { transform: scale(0.97); }
.prize-cell:focus-visible {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(91,91,255,.25), 0 6px 16px rgba(91,91,255,.22);
}
.prize-cell .thumb {
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
}
.prize-cell .body {
padding: 6px var(--space-2) var(--space-2);
}
.prize-cell .name {
font-size: 11px;
font-weight: var(--weight-medium);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 2px;
}
.prize-cell .price {
font-size: 11px;
font-weight: var(--weight-bold);
color: var(--color-primary);
}
.prize-cell .added {
margin-top: 2px;
font-size: 10px;
color: var(--color-text-muted);
}
/* 공지 카드 (홈 — 간결한 리스트) */
.notice-list {
display: flex;
flex-direction: column;
background: var(--color-bg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.notice-item {
display: grid;
grid-template-columns: 28px 1fr auto;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
align-items: center;
border-bottom: 1px solid var(--color-border);
text-decoration: none;
color: inherit;
}
.notice-item:last-child { border-bottom: none; }
.notice-item:hover { text-decoration: none; background: var(--color-surface); }
.notice-item .emoji { font-size: 18px; }
.notice-item .title {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.notice-item .date {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
/* 보관함 서브 세그먼트 (2개 버전) */
.segmented.sub {
grid-template-columns: repeat(2, 1fr);
margin-top: var(--space-3);
margin-bottom: var(--space-3);
}
.segmented.tabs-2 {
grid-template-columns: repeat(2, 1fr);
}
/* 선택 툴바 (보관함 > 상품) */
.select-toolbar {
position: sticky;
top: var(--header-height);
z-index: 5;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-3) var(--space-3);
margin: 0 calc(-1 * var(--space-4)) var(--space-3);
background: rgba(255,255,255,0.95);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid var(--color-border);
}
.select-toolbar .left {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--color-text-sub);
}
.select-toolbar .summary {
font-weight: var(--weight-medium);
color: var(--color-text);
}
.select-toolbar .summary .amount { color: var(--color-primary); font-weight: var(--weight-bold); }
.select-toolbar .refund-btn {
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-full);
background: var(--color-primary);
color: #fff;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
transition: background .15s ease, opacity .15s ease;
}
.select-toolbar .refund-btn:disabled {
background: var(--color-border);
color: var(--color-text-muted);
cursor: not-allowed;
}
.select-toolbar .select-summary-right {
font-size: var(--text-sm);
color: var(--color-text-sub);
}
.select-toolbar .select-summary-right .amount {
color: var(--color-primary);
font-weight: var(--weight-bold);
}
/* =====================================================================
배송신청 상세 (shipping-request.html)
===================================================================== */
.ship-main { padding-bottom: calc(var(--bottom-bar-clear) + 200px); }
.ship-sec {
background: #fff;
padding: var(--space-4) 0;
border-bottom: 8px solid var(--color-surface);
}
.ship-sec:last-of-type { border-bottom: 0; }
.ship-sec-title {
font-size: var(--text-base);
font-weight: var(--weight-bold);
color: var(--color-text);
margin: 0 0 var(--space-3);
}
.ship-sec-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-3);
}
.ship-sec-head .ship-sec-title { margin: 0; }
.ship-addr-manage {
padding: 6px 14px;
font-size: var(--text-xs);
color: var(--color-text);
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
cursor: pointer;
}
.ship-addr-manage:hover { background: var(--color-surface); }
/* 배송 제품 */
.ship-item-list { display: flex; flex-direction: column; }
.ship-item-row {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) 0;
border-top: 1px solid var(--color-border);
}
.ship-item-row:first-child { border-top: 0; }
.ship-item-thumb {
width: 64px; height: 64px;
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
font-size: 28px;
flex: 0 0 64px;
}
.ship-item-body { flex: 1; min-width: 0; }
.ship-item-name {
font-size: var(--text-sm);
color: var(--color-text);
margin-bottom: 6px;
overflow-wrap: anywhere;
}
.ship-item-price {
font-size: var(--text-base);
font-weight: var(--weight-bold);
color: var(--color-text);
}
.ship-item-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
flex: 0 0 auto;
}
.ship-item-remove {
background: transparent;
border: 0;
padding: 6px;
cursor: pointer;
color: var(--color-text-sub);
}
.ship-item-remove:hover { color: var(--color-accent); }
.trash-ico svg { width: 20px; height: 20px; display: block; }
.ship-gauge-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: var(--radius-full);
background: #fff;
border: 1px solid var(--color-border);
font-size: var(--text-xs);
color: var(--color-text);
font-weight: var(--weight-medium);
white-space: nowrap;
}
.ship-gauge-chip b { color: var(--color-accent); font-weight: var(--weight-bold); margin-left: 2px; }
/* 총 배송게이지 */
.ship-gauge-sec { padding-top: 0; border-top: 0; }
.ship-gauge-top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-2);
margin-bottom: 8px;
}
.ship-gauge-label { font-size: var(--text-base); font-weight: var(--weight-medium); }
.ship-gauge-label b { color: var(--color-accent); font-weight: var(--weight-bold); margin-left: 2px; }
.ship-gauge-hint { font-size: var(--text-xs); color: var(--color-text-sub); }
.ship-gauge-bar {
height: 6px;
background: var(--color-surface);
border-radius: var(--radius-full);
overflow: hidden;
}
.ship-gauge-bar-fill {
height: 100%;
background: var(--color-accent);
border-radius: var(--radius-full);
transition: width .25s ease;
}
/* 배송지 탭 + 상세 */
.ship-addr-tabs {
display: flex;
gap: 8px;
margin-bottom: var(--space-3);
flex-wrap: wrap;
}
.ship-addr-tab {
padding: 8px 16px;
border-radius: var(--radius-md);
background: #fff;
border: 1px solid var(--color-border);
font-size: var(--text-sm);
color: var(--color-text-sub);
cursor: pointer;
font-weight: var(--weight-medium);
transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.ship-addr-tab.is-on {
background: var(--color-accent);
color: #fff;
border-color: var(--color-accent);
}
.ship-addr-detail { display: flex; flex-direction: column; }
.ship-kv-row {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: 6px 0;
font-size: var(--text-sm);
}
.ship-kv-row .k {
flex: 0 0 64px;
color: var(--color-text-sub);
}
.ship-kv-row .v {
flex: 1;
color: var(--color-text);
overflow-wrap: anywhere;
}
/* 배송메세지 */
.ship-msg-sec { padding-top: 0; }
.ship-msg-select {
width: 100%;
appearance: none;
-webkit-appearance: none;
background: #fff url("data:image/svg+xml;utf8,") no-repeat right 12px center;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 12px 34px 12px 14px;
font-size: var(--text-sm);
color: var(--color-text);
cursor: pointer;
}
/* 포인트 사용 */
.ship-point-row {
display: flex;
gap: 8px;
margin-bottom: 8px;
}
.ship-point-input {
flex: 1;
padding: 14px 16px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-size: var(--text-base);
background: #fff;
outline: none;
}
.ship-point-input:focus { border-color: var(--color-primary); }
.ship-point-all {
flex: 0 0 auto;
padding: 0 20px;
border-radius: var(--radius-md);
background: #222;
color: #fff;
border: 0;
font-size: var(--text-sm);
font-weight: var(--weight-bold);
cursor: pointer;
}
.ship-point-hint {
font-size: var(--text-xs);
color: var(--color-text-sub);
}
.ship-point-hint .hl { color: var(--color-accent); font-weight: var(--weight-bold); margin-left: 2px; }
/* 금액 요약 */
.ship-summary-card {
background: var(--color-surface);
border-radius: var(--radius-md);
padding: var(--space-4);
}
.ship-summary-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 0;
font-size: var(--text-sm);
}
.ship-summary-row .k { color: var(--color-text-sub); }
.ship-summary-row .v { color: var(--color-text); }
.ship-summary-row.dim .v { color: var(--color-primary); }
.ship-summary-row.is-total {
margin-top: 6px;
padding-top: 10px;
border-top: 1px solid var(--color-border);
font-size: var(--text-base);
}
.ship-summary-row.is-total .k { color: var(--color-text); font-weight: var(--weight-medium); }
.ship-summary-row.is-total .v { color: var(--color-accent); font-weight: var(--weight-bold); }
/* 결제수단 */
.ship-pay-list { display: flex; flex-direction: column; gap: var(--space-2); }
.ship-pay-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 4px;
cursor: pointer;
}
.ship-pay-row.disabled { opacity: .5; cursor: not-allowed; }
.ship-pay-row input[type="radio"] { display: none; }
.ship-pay-row .ship-pay-radio {
width: 22px; height: 22px;
border-radius: 50%;
background: #fff;
border: 6px solid var(--color-border);
box-sizing: border-box;
flex: 0 0 22px;
transition: border-color .12s ease;
}
.ship-pay-row input[type="radio"]:checked + .ship-pay-radio {
border-color: #FFD93D;
}
.ship-pay-row .ship-pay-label {
font-size: var(--text-base);
color: var(--color-text);
}
/* 결제안내 아코디언 */
.ship-acc-list { display: flex; flex-direction: column; gap: 8px; }
.ship-acc {
background: var(--color-surface);
border-radius: var(--radius-md);
overflow: hidden;
}
.ship-acc-summary {
list-style: none;
padding: 14px 16px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text);
cursor: pointer;
}
.ship-acc-summary::-webkit-details-marker { display: none; }
.ship-acc-chev {
font-size: 12px;
color: var(--color-text-sub);
transition: transform .15s ease;
}
.ship-acc[open] .ship-acc-chev { transform: rotate(180deg); }
.ship-acc-content {
padding: 0 16px 14px;
font-size: var(--text-xs);
color: var(--color-text-sub);
line-height: 1.6;
}
.ship-acc-content p { margin: 0 0 4px; }
/* 하단 고정 결제 바 */
.ship-bottom-bar {
position: fixed;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: var(--container-max);
/* 박스구매 돌출 아이콘을 침범하지 않도록 protrude 만큼 더 위로 */
bottom: var(--bottom-bar-clear);
z-index: 40;
background: #fff;
border-top: 1px solid var(--color-border);
padding: 10px var(--space-4) 12px;
box-shadow: 0 -6px 20px rgba(0,0,0,0.05);
}
/* 하단 탭 사이 투명 공백을 흰 배경으로 채움 */
.ship-bottom-bar::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
height: var(--bottom-bar-clear);
background: #fff;
pointer-events: none;
}
.ship-agree-row {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
margin-bottom: 6px;
}
.ship-agree-row input[type="checkbox"] { display: none; }
.ship-agree-check {
width: 20px; height: 20px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--color-border);
position: relative;
flex: 0 0 20px;
}
.ship-agree-check::after {
content: '';
position: absolute;
left: 50%; top: 50%;
width: 5px; height: 9px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: translate(-50%, -65%) rotate(45deg);
opacity: 0;
}
.ship-agree-row input[type="checkbox"]:checked + .ship-agree-check {
background: var(--color-primary);
border-color: var(--color-primary);
}
.ship-agree-row input[type="checkbox"]:checked + .ship-agree-check::after { opacity: 1; }
.ship-agree-text {
font-size: var(--text-sm);
color: var(--color-text);
}
.ship-total-row {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 4px 0 8px;
}
.ship-total-row .k { font-size: var(--text-sm); color: var(--color-text-sub); }
.ship-total-row .v { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-accent); }
.ship-pay-btn {
width: 100%;
padding: 14px;
background: var(--gradient-point);
color: #fff;
border: 0;
border-radius: var(--radius-md);
font-size: var(--text-base);
font-weight: var(--weight-bold);
cursor: pointer;
box-shadow: 0 6px 16px rgba(91,91,255,.28);
transition: filter .12s ease, transform .08s ease, box-shadow .12s ease;
}
.ship-pay-btn:hover { filter: brightness(1.05); }
.ship-pay-btn:active { transform: scale(.99); }
.ship-pay-btn:disabled {
background: var(--color-border);
color: var(--color-text-muted);
cursor: not-allowed;
box-shadow: none;
filter: none;
}
/* 선물함 리스트 카드 */
.gift-list {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-2) 0;
}
.gift-card {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3);
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
}
.gift-card.gift-status-canceled { opacity: .6; }
.gift-card.gift-status-received { background: rgba(42,157,79,0.04); }
.gift-card-thumb {
flex: 0 0 56px;
width: 56px; height: 56px;
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
font-size: 26px;
}
.gift-card-body { flex: 1; min-width: 0; }
.gift-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
margin-bottom: 2px;
}
.gift-card-who {
font-size: var(--text-xs);
color: var(--color-text-sub);
font-weight: var(--weight-medium);
}
.gift-card-status {
font-size: 11px;
font-weight: var(--weight-bold);
padding: 2px 8px;
border-radius: var(--radius-full);
white-space: nowrap;
}
.gift-card-status.is-ok { background: rgba(42,157,79,0.12); color: #2A9D4F; }
.gift-card-status.is-err { background: rgba(255,91,91,0.1); color: var(--color-accent); }
.gift-card-status.is-wait { background: var(--color-surface); color: var(--color-text-sub); }
.gift-card-name {
font-size: var(--text-sm);
font-weight: var(--weight-bold);
color: var(--color-text);
margin-bottom: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gift-card-meta {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--text-xs);
color: var(--color-text-sub);
flex-wrap: wrap;
}
.gift-card-msg {
color: var(--color-text);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-style: italic;
}
.gift-card-actions {
flex: 0 0 auto;
display: flex;
gap: 6px;
}
.gift-action {
border: 0;
border-radius: var(--radius-md);
padding: 8px 14px;
font-size: var(--text-sm);
font-weight: var(--weight-bold);
cursor: pointer;
}
.gift-action.receive {
background: var(--color-primary);
color: #fff;
}
.gift-action.cancel {
background: var(--color-surface);
color: var(--color-text-sub);
border: 1px solid var(--color-border);
}
/* 선물하기 모달 */
.gift-overlay {
position: fixed; inset: 0;
z-index: 1060;
background: rgba(20, 20, 30, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: flex-end;
justify-content: center;
animation: giftFade .18s ease;
}
@keyframes giftFade { from { opacity: 0 } to { opacity: 1 } }
.gift-sheet {
width: 100%;
max-width: var(--container-max);
max-height: 92vh;
background: #fff;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
display: flex;
flex-direction: column;
animation: giftSlide .22s cubic-bezier(.2,.9,.3,1);
}
@keyframes giftSlide { from { transform: translateY(20%); } to { transform: translateY(0); } }
.gift-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4) var(--space-4) var(--space-2);
border-bottom: 1px solid var(--color-border);
}
.gift-head-title {
font-size: var(--text-lg);
font-weight: var(--weight-bold);
}
.gift-close {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--color-surface);
border: 0;
font-size: 14px;
color: var(--color-text-sub);
cursor: pointer;
}
.gift-close:hover { background: var(--color-border); }
.gift-body {
padding: var(--space-3) var(--space-4);
overflow-y: auto;
flex: 1;
}
.gift-body > section + section { margin-top: var(--space-4); }
.gift-items-summary { }
.gift-items-label {
font-size: var(--text-sm);
color: var(--color-text-sub);
margin-bottom: var(--space-2);
}
.gift-items-list {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.gift-thumb-mini {
width: 48px; height: 48px;
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
font-size: 22px;
background: var(--color-surface);
}
.gift-thumb-mini.gift-thumb-more {
background: var(--color-text);
color: #fff;
font-size: 13px;
font-weight: var(--weight-bold);
}
.gift-label {
display: block;
font-size: var(--text-sm);
color: var(--color-text-sub);
font-weight: var(--weight-medium);
margin-bottom: var(--space-2);
}
.gift-input-row {
display: flex;
gap: 8px;
}
.gift-input {
flex: 1;
min-width: 0;
padding: 12px 14px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-size: var(--text-base);
background: #fff;
outline: none;
transition: border-color .15s ease;
}
.gift-input:focus { border-color: var(--color-primary); }
.gift-check-btn {
flex: 0 0 auto;
padding: 0 16px;
border-radius: var(--radius-md);
background: var(--color-text);
color: #fff;
border: 0;
font-size: var(--text-sm);
font-weight: var(--weight-bold);
cursor: pointer;
}
.gift-check-btn:hover { opacity: .88; }
.gift-status {
font-size: var(--text-xs);
color: var(--color-text-sub);
margin-top: 6px;
min-height: 16px;
}
.gift-status.is-ok { color: #2A9D4F; }
.gift-status.is-err { color: var(--color-accent); }
.gift-quick-title {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text-sub);
margin-bottom: var(--space-2);
}
.gift-quick-list {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.gift-empty {
font-size: var(--text-xs);
color: var(--color-text-muted);
padding: 6px 0;
}
.gift-chip {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
padding: 4px 10px 4px 6px;
transition: border-color .12s ease, background .12s ease;
}
.gift-chip.is-fav { border-color: #FFC34A; background: #FFF9E6; }
.gift-chip-star {
border: 0;
background: transparent;
font-size: 14px;
color: #cbcbcb;
padding: 0 2px;
cursor: pointer;
line-height: 1;
}
.gift-chip-star.on { color: #FFB800; }
.gift-chip-name {
border: 0;
background: transparent;
font-size: var(--text-sm);
color: var(--color-text);
font-weight: var(--weight-medium);
cursor: pointer;
padding: 2px 2px;
}
.gift-chip-name:hover { color: var(--color-primary); }
.gift-chip-remove {
border: 0;
background: transparent;
font-size: 11px;
color: var(--color-text-muted);
padding: 0 4px 0 2px;
cursor: pointer;
line-height: 1;
border-radius: 50%;
width: 18px; height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .12s ease, color .12s ease;
}
.gift-chip-remove:hover {
background: var(--color-border);
color: var(--color-accent);
}
.gift-textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-family: inherit;
resize: none;
outline: none;
}
.gift-textarea:focus { border-color: var(--color-primary); }
.gift-foot {
padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
background: #fff;
}
.gift-summary {
font-size: var(--text-xs);
color: var(--color-text-sub);
}
.gift-send-btn {
flex: 0 0 auto;
padding: 12px 20px;
background: var(--gradient-point);
color: #fff;
border: 0;
border-radius: var(--radius-md);
font-size: var(--text-base);
font-weight: var(--weight-bold);
cursor: pointer;
box-shadow: 0 4px 12px rgba(91,91,255,.25);
transition: filter .12s ease, box-shadow .12s ease;
}
.gift-send-btn:hover { filter: brightness(1.05); }
.gift-send-btn:disabled {
background: var(--color-border);
color: var(--color-text-muted);
cursor: not-allowed;
box-shadow: none;
filter: none;
}
/* 선물 발송 확인 팝업 */
.gift-confirm-overlay {
position: fixed; inset: 0;
z-index: 1110;
background: rgba(20, 20, 30, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
animation: giftConfirmFade .18s ease;
}
@keyframes giftConfirmFade { from { opacity: 0 } to { opacity: 1 } }
.gift-confirm-sheet {
width: 100%;
max-width: 360px;
background: #fff;
border-radius: 20px;
padding: var(--space-5) var(--space-4) var(--space-4);
text-align: center;
animation: giftConfirmPop .22s cubic-bezier(.2,.9,.3,1);
}
@keyframes giftConfirmPop {
from { transform: scale(.92); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.gift-confirm-icon { font-size: 38px; margin-bottom: var(--space-2); }
.gift-confirm-title {
font-size: var(--text-base);
font-weight: var(--weight-bold);
color: var(--color-text);
margin-bottom: var(--space-3);
line-height: 1.5;
}
.gift-confirm-title b { color: var(--color-primary); }
.gift-confirm-summary {
background: var(--color-surface);
border-radius: var(--radius-md);
padding: var(--space-3);
margin-bottom: var(--space-3);
}
.gift-confirm-items {
display: flex;
gap: 6px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 8px;
}
.gift-confirm-thumb {
width: 40px; height: 40px;
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
font-size: 20px;
background: #fff;
}
.gift-confirm-thumb.more {
background: var(--color-text);
color: #fff;
font-size: 12px;
font-weight: var(--weight-bold);
}
.gift-confirm-meta {
display: inline-flex;
gap: 6px;
font-size: var(--text-xs);
color: var(--color-text-sub);
}
.gift-confirm-msg {
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed var(--color-border);
font-size: var(--text-xs);
color: var(--color-text);
font-style: italic;
line-height: 1.5;
word-break: keep-all;
}
.gift-confirm-warn {
font-size: var(--text-xs);
color: var(--color-text-sub);
margin-bottom: var(--space-4);
line-height: 1.5;
word-break: keep-all;
}
.gift-confirm-warn b { color: var(--color-text); }
.gift-confirm-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.gift-confirm-actions button {
padding: 13px;
border: 0;
border-radius: var(--radius-md);
font-size: var(--text-base);
font-weight: var(--weight-bold);
cursor: pointer;
transition: background .12s ease, opacity .12s ease;
}
.gift-confirm-cancel {
background: var(--color-surface);
color: var(--color-text-sub);
border: 1px solid var(--color-border) !important;
}
.gift-confirm-ok {
background: var(--gradient-point);
color: #fff;
box-shadow: 0 4px 12px rgba(91,91,255,.25);
}
.gift-confirm-ok:hover { filter: brightness(1.05); }
/* 환급 확인 팝업 */
.refund-confirm-overlay {
position: fixed; inset: 0;
z-index: 1100;
background: rgba(20, 20, 30, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
animation: refundFade .18s ease;
}
@keyframes refundFade { from { opacity: 0 } to { opacity: 1 } }
.refund-confirm-sheet {
width: 100%;
max-width: 360px;
background: #fff;
border-radius: 20px;
padding: var(--space-5) var(--space-4) var(--space-4);
text-align: center;
animation: refundPop .22s cubic-bezier(.2,.9,.3,1);
}
@keyframes refundPop {
from { transform: scale(.92); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.refund-confirm-icon {
font-size: 38px;
margin-bottom: var(--space-2);
}
.refund-confirm-title {
font-size: var(--text-base);
font-weight: var(--weight-bold);
color: var(--color-text);
margin-bottom: var(--space-3);
}
.refund-confirm-amount {
display: inline-flex;
align-items: baseline;
gap: 2px;
margin-bottom: var(--space-3);
color: var(--color-primary);
font-weight: var(--weight-bold);
}
.refund-confirm-amount .plus { font-size: var(--text-lg); }
.refund-confirm-amount .num { font-size: 32px; line-height: 1; }
.refund-confirm-amount .unit { font-size: var(--text-lg); margin-left: 2px; }
.refund-confirm-breakdown {
list-style: none;
padding: var(--space-3);
margin: 0 0 var(--space-3);
background: var(--color-surface);
border-radius: var(--radius-md);
font-size: var(--text-xs);
color: var(--color-text);
text-align: left;
}
.refund-confirm-breakdown li { padding: 3px 0; }
.refund-confirm-breakdown li.dim { color: var(--color-text-muted); }
.refund-confirm-warn {
font-size: var(--text-xs);
color: var(--color-text-sub);
margin-bottom: var(--space-4);
}
.refund-confirm-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.refund-confirm-actions button {
padding: 13px;
border: 0;
border-radius: var(--radius-md);
font-size: var(--text-base);
font-weight: var(--weight-bold);
cursor: pointer;
transition: background .12s ease, opacity .12s ease;
}
.refund-cancel {
background: var(--color-surface);
color: var(--color-text-sub);
border: 1px solid var(--color-border) !important;
}
.refund-ok {
background: var(--gradient-point);
color: #fff;
box-shadow: 0 4px 12px rgba(91,91,255,.25);
}
.refund-ok:hover { filter: brightness(1.05); }
/* 상품 상세 팝업 */
.item-detail-overlay {
position: fixed; inset: 0;
z-index: 1050;
background: rgba(20, 20, 30, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: flex-end;
justify-content: center;
animation: itemDetailFade .18s ease;
}
@keyframes itemDetailFade {
from { opacity: 0; }
to { opacity: 1; }
}
.item-detail-sheet {
position: relative;
width: 100%;
max-width: var(--container-max);
background: #fff;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
padding: var(--space-5) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
animation: itemDetailSlideUp .22s cubic-bezier(.2,.9,.3,1);
max-height: 85vh;
overflow-y: auto;
}
@keyframes itemDetailSlideUp {
from { transform: translateY(20%); }
to { transform: translateY(0); }
}
.item-detail-close {
position: absolute;
top: 10px; right: 10px;
width: 36px; height: 36px;
border-radius: 50%;
background: var(--color-surface);
border: 0;
font-size: 16px;
cursor: pointer;
color: var(--color-text-sub);
}
.item-detail-close:hover { background: var(--color-border); }
.item-detail-hero {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) 0 var(--space-4);
border-bottom: 1px solid var(--color-border);
}
.item-detail-thumb {
position: relative;
width: 84px; height: 84px;
flex: 0 0 84px;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
}
.item-detail-lock-badge {
position: absolute;
bottom: -6px; left: 50%;
transform: translateX(-50%);
font-size: 10px;
background: var(--color-text);
color: #fff;
padding: 2px 8px;
border-radius: var(--radius-full);
white-space: nowrap;
}
/* 잠금 토글 버튼 — 썸네일 하단 중앙. 잠겨있으면 어두운 배경, 풀려있으면 옅은 회색 */
.item-detail-lock-toggle {
position: absolute;
bottom: -6px; left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
line-height: 1;
padding: 4px 10px;
border-radius: var(--radius-full);
border: 0;
cursor: pointer;
white-space: nowrap;
background: #F0F0F5;
color: var(--color-text-sub);
box-shadow: 0 1px 3px rgba(0,0,0,.15);
transition: background .15s ease, color .15s ease, transform .08s ease;
-webkit-tap-highlight-color: transparent;
}
.item-detail-lock-toggle:active { transform: translateX(-50%) scale(.96); }
.item-detail-lock-toggle.is-locked {
background: var(--color-text);
color: #fff;
}
.item-detail-lock-toggle:hover { filter: brightness(.95); }
.item-detail-lock-toggle:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.item-detail-info { flex: 1; min-width: 0; }
.item-detail-name {
font-size: var(--text-base);
font-weight: var(--weight-bold);
color: var(--color-text);
margin-bottom: 4px;
overflow-wrap: anywhere;
}
.item-detail-price {
font-size: var(--text-lg);
font-weight: var(--weight-bold);
color: var(--color-primary);
margin-bottom: 6px;
}
.item-detail-meta { display: flex; }
.item-detail-body {
padding: var(--space-3) 0;
border-bottom: 1px solid var(--color-border);
}
.item-detail-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-3);
padding: 8px 0;
font-size: var(--text-sm);
}
.item-detail-row .k { color: var(--color-text-sub); flex: 0 0 auto; }
.item-detail-row .v { color: var(--color-text); text-align: right; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.item-detail-row .v.primary { color: var(--color-primary); font-weight: var(--weight-bold); }
.item-detail-row .v.muted { color: var(--color-text-muted); }
.item-detail-actions {
padding-top: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.item-detail-actions .btn-detail-link {
width: 100%;
padding: 12px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-size: var(--text-sm);
color: var(--color-text);
cursor: pointer;
font-weight: var(--weight-medium);
}
.item-detail-actions .btn-detail-link:hover { background: var(--color-border); }
.item-detail-action-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-2);
}
.item-detail-action-row button {
padding: 14px 10px;
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: var(--weight-bold);
cursor: pointer;
border: 0;
transition: opacity .12s ease, background .12s ease;
white-space: nowrap;
}
.btn-detail-secondary {
background: var(--color-surface);
color: var(--color-text);
border: 1px solid var(--color-border) !important;
}
.btn-detail-primary {
background: var(--gradient-point);
color: #fff;
box-shadow: 0 4px 12px rgba(91,91,255,.25);
}
.btn-detail-primary:hover { filter: brightness(1.05); }
.btn-detail-primary:disabled,
.btn-detail-secondary:disabled {
opacity: .45;
cursor: not-allowed;
}
/* 내상품 필터 + 정렬 바 */
.inv-filter-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
padding: var(--space-2) 0 var(--space-3);
flex-wrap: wrap;
}
.inv-sort {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--text-sm);
color: var(--color-text-sub);
}
.inv-sort-label { font-weight: var(--weight-medium); }
.inv-sort-select {
appearance: none;
-webkit-appearance: none;
background: #fff url("data:image/svg+xml;utf8,") no-repeat right 10px center;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 6px 28px 6px 12px;
font-size: var(--text-sm);
color: var(--color-text);
cursor: pointer;
}
.inv-sort-select:focus { outline: none; border-color: var(--color-primary); }
.inv-lock-filter {
display: inline-flex;
align-items: center;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
padding: 2px;
gap: 2px;
}
.inv-lock-chip {
appearance: none;
border: 0;
background: transparent;
padding: 6px 12px;
border-radius: var(--radius-full);
font-size: var(--text-xs);
color: var(--color-text-sub);
cursor: pointer;
font-weight: var(--weight-medium);
transition: background .15s ease, color .15s ease;
}
.inv-lock-chip.is-on {
background: var(--color-primary);
color: #fff;
}
.inv-filter-empty {
padding: var(--space-6) var(--space-4);
text-align: center;
color: var(--color-text-muted);
font-size: var(--text-sm);
}
/* 벌크 액션 바 — 하단 네비 바로 위에 떠있는 카드 (박스구매 아이콘은 쏙 들어감) */
.bulk-actions {
position: fixed;
left: 50%;
transform: translate(-50%, 20px);
width: calc(100% - 16px);
max-width: calc(var(--container-max) - 16px);
/* 박스구매 돌출 아이콘 위에 + 살짝 여유 */
bottom: calc(var(--bottom-bar-clear) + 8px);
z-index: 60;
display: flex;
align-items: stretch;
gap: 0;
padding: 6px 4px;
background: rgba(255,255,255,0.98);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid var(--color-border);
border-radius: 16px;
box-shadow: 0 12px 28px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.06);
opacity: 0;
transition: transform .22s cubic-bezier(.2,.9,.3,1),
opacity .18s ease;
pointer-events: none;
}
.bulk-actions[hidden] {
display: flex;
transform: translate(-50%, 20px);
opacity: 0;
pointer-events: none;
}
.bulk-actions:not([hidden]) {
transform: translate(-50%, 0);
opacity: 1;
pointer-events: auto;
}
.bulk-actions .bulk-btn {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 8px 4px;
background: transparent;
border: 0;
border-radius: var(--radius-md);
font-size: var(--text-xs);
color: var(--color-text);
font-weight: var(--weight-medium);
cursor: pointer;
transition: background .12s ease, opacity .12s ease;
}
.bulk-actions .bulk-btn .ico { font-size: 18px; line-height: 1; }
.bulk-actions .bulk-btn .lbl {
font-size: 11px;
line-height: 1.2;
color: var(--color-text-sub);
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bulk-actions .bulk-btn:active:not(:disabled) { background: rgba(0,0,0,0.04); }
.bulk-actions .bulk-btn:disabled {
opacity: .35;
cursor: not-allowed;
}
.bulk-actions .bulk-btn.primary .ico {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark, #4040d6) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.bulk-actions .bulk-btn.primary .lbl {
color: var(--color-primary);
font-weight: var(--weight-bold);
}
/* 벌크 바 활성 시, 네비 + 벌크바 아래 겹치지 않도록 리스트 하단 여유 확보 */
body:has(#bulk-actions:not([hidden])) .app-main {
padding-bottom: calc(var(--bottom-bar-clear) + 96px);
}
/* 커스텀 체크박스 */
.check {
appearance: none;
-webkit-appearance: none;
width: 22px; height: 22px;
border: 2px solid var(--color-border);
border-radius: var(--radius-sm);
background: #fff;
display: inline-grid;
place-content: center;
cursor: pointer;
transition: border-color .15s ease, background .15s ease;
flex-shrink: 0;
}
.check:checked {
background: var(--color-primary);
border-color: var(--color-primary);
}
.check:checked::after {
content: "";
width: 12px; height: 6px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg) translate(1px, -1px);
}
.check:disabled { background: #F3F4F6; cursor: not-allowed; }
/* 보관함 상품 카드 */
.inv-item-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.inv-item-card {
display: grid;
grid-template-columns: 22px 72px 1fr 36px;
gap: var(--space-3);
align-items: center;
padding: var(--space-3);
background: var(--color-bg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: box-shadow .15s ease, background .15s ease;
}
.inv-item-card.locked {
background: #FAFAFD;
}
.inv-item-card.locked .inv-item-name,
.inv-item-card.locked .inv-item-price {
opacity: 0.7;
}
.inv-item-card .inv-thumb {
aspect-ratio: 1 / 1;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
}
.inv-item-card .inv-body { min-width: 0; }
.inv-item-card .inv-item-name {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
margin-bottom: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inv-item-card .inv-item-price {
font-size: var(--text-base);
font-weight: var(--weight-bold);
color: var(--color-primary);
margin-bottom: 4px;
}
.inv-item-card .inv-item-meta {
font-size: var(--text-xs);
color: var(--color-text-muted);
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
row-gap: 4px;
}
.inv-item-card .inv-item-meta .box-tag {
padding: 1px 6px;
background: var(--color-primary-soft);
color: var(--color-primary);
border-radius: var(--radius-sm);
font-weight: var(--weight-medium);
}
.inv-item-card .inv-item-meta .refund-hint {
color: var(--color-primary);
font-weight: var(--weight-medium);
}
.inv-item-card .inv-item-meta .inv-gauge-chip {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 1px 6px;
border-radius: var(--radius-sm);
background: #FFF7D6;
color: #8B6B00;
font-size: var(--text-xs);
font-weight: var(--weight-medium);
white-space: nowrap;
}
.inv-item-card .inv-item-meta .inv-gauge-chip b {
color: var(--color-accent, #FFB020);
font-weight: var(--weight-bold);
margin-left: 2px;
}
/* 잠금 토글 버튼 */
.lock-btn {
width: 36px; height: 36px;
border-radius: var(--radius-full);
display: grid;
place-content: center;
background: var(--color-surface);
color: var(--color-text-sub);
transition: background .15s ease, color .15s ease;
}
.lock-btn:hover { background: var(--color-border); }
.lock-btn.locked {
background: var(--color-primary-soft);
color: var(--color-primary);
}
.lock-btn svg { width: 18px; height: 18px; }
/* ===== 포인트마켓 ===== */
.market-hero {
background: linear-gradient(135deg, #5B5BFF 0%, #9B5BFF 100%);
border-radius: var(--radius-lg);
padding: var(--space-4) var(--space-5);
margin-bottom: var(--space-4);
color: #fff;
box-shadow: var(--shadow-md);
}
.market-hero-title {
font-size: var(--text-xl);
font-weight: var(--weight-bold);
margin-bottom: 2px;
}
.market-hero-sub {
font-size: var(--text-sm);
opacity: 0.9;
}
.market-card {
background: var(--color-bg);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
display: block;
transition: transform .1s ease;
}
.market-card:active { transform: scale(0.98); }
.market-card .thumb {
aspect-ratio: 1 / 1;
position: relative;
display: flex; align-items: center; justify-content: center;
font-size: 48px;
}
.market-card .body { padding: var(--space-3); }
.market-card .name {
font-weight: var(--weight-medium);
font-size: var(--text-sm);
margin-bottom: var(--space-2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.market-price-row {
display: flex;
align-items: baseline;
gap: 6px;
flex-wrap: wrap;
}
.market-price-row .list-price {
font-size: var(--text-xs);
color: var(--color-text-muted);
text-decoration: line-through;
}
.market-price-row .sale-price {
font-size: var(--text-base);
font-weight: var(--weight-bold);
color: var(--color-primary);
}
.market-stock {
margin-top: 4px;
font-size: var(--text-xs);
color: #E85656;
font-weight: var(--weight-medium);
}
.market-badge {
position: absolute;
top: var(--space-2);
left: var(--space-2);
padding: 2px 8px;
border-radius: var(--radius-full);
background: rgba(0,0,0,0.65);
color: #fff;
font-size: 10px;
font-weight: var(--weight-bold);
letter-spacing: 0.3px;
}
.market-sale-badge {
position: absolute;
top: var(--space-2);
right: var(--space-2);
padding: 2px 8px;
border-radius: var(--radius-full);
background: #E85656;
color: #fff;
font-size: 10px;
font-weight: var(--weight-bold);
}
/* ===== 모달 (포인트마켓 구매 확인) ===== */
.modal {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: flex-end;
justify-content: center;
}
.modal[hidden] { display: none; }
.modal-backdrop {
position: absolute; inset: 0;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(2px);
}
.modal-sheet {
position: relative;
width: 100%;
max-width: 600px;
background: var(--color-bg);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
padding: var(--space-5) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
box-shadow: 0 -8px 24px rgba(0,0,0,0.15);
animation: modal-slide-up .25s ease;
}
@keyframes modal-slide-up {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
@media (min-width: 601px) {
.modal { align-items: center; }
.modal-sheet {
border-radius: var(--radius-lg);
max-width: 420px;
animation: modal-fade-in .2s ease;
}
@keyframes modal-fade-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-4);
}
.modal-title {
font-size: var(--text-lg);
font-weight: var(--weight-bold);
}
.modal-close {
width: 32px; height: 32px;
border-radius: var(--radius-full);
color: var(--color-text-muted);
font-size: 16px;
}
.modal-close:hover { background: var(--color-surface); }
.modal-body { margin-bottom: var(--space-4); }
.modal-footer {
display: grid;
grid-template-columns: 1fr 2fr;
gap: var(--space-3);
}
.modal-footer .btn { width: 100%; }
.modal-product {
display: grid;
grid-template-columns: 72px 1fr;
gap: var(--space-3);
padding: var(--space-3);
background: var(--color-surface);
border-radius: var(--radius-md);
margin-bottom: var(--space-3);
align-items: center;
}
.modal-product .modal-thumb {
aspect-ratio: 1 / 1;
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
font-size: 36px;
}
.modal-product .modal-info .name {
font-weight: var(--weight-medium);
margin-bottom: 4px;
}
.modal-product .price-row {
display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap;
}
.modal-product .price-row .list {
font-size: var(--text-xs);
color: var(--color-text-muted);
text-decoration: line-through;
}
.modal-product .price-row .sale {
font-size: var(--text-base);
font-weight: var(--weight-bold);
color: var(--color-primary);
}
.modal-notice {
padding: var(--space-3);
background: var(--color-primary-soft);
border-radius: var(--radius-sm);
font-size: var(--text-xs);
color: var(--color-text-sub);
line-height: 1.6;
}
/* ===== 명예의 전당 (소식 탭 상단, 3칸 보이는 가로 스크롤) ===== */
/* 명예의 전당 — 무한 좌우 자동 스크롤 (.hof-track 이 translateX 애니메이션, 원본+복제 2벌) */
.hof-scroll {
overflow: hidden;
padding-bottom: var(--space-2);
}
.hof-track {
display: flex;
width: max-content;
animation-name: hofLoop;
animation-duration: 30s; /* JS 에서 items.length * 3s 로 덮어씀 */
animation-timing-function: linear;
animation-iteration-count: infinite;
will-change: transform;
}
.hof-track:hover,
.hof-track:focus-within { animation-play-state: paused; }
@keyframes hofLoop {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* 트랙 내에서는 JS 가 계산한 카드 폭(--hof-card-w)을 쓰고 균일한 margin 으로 translateX(-50%) 이 정확히 한 copy 만큼 이동하게 한다 */
.hof-track > .hof-card {
flex: 0 0 var(--hof-card-w, 120px);
margin-right: 8px;
}
.hof-card {
flex: 0 0 calc((100% - var(--space-2) * 2) / 3);
display: flex;
flex-direction: column;
background: var(--color-bg);
border: 2px solid transparent;
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
overflow: hidden;
scroll-snap-align: start;
transition: border-color .15s ease, box-shadow .18s ease, transform .1s ease;
color: inherit;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.hof-card,
.hof-card:hover,
.hof-card:focus,
.hof-card:active,
.hof-card:visited { text-decoration: none; color: inherit; }
/* hover: 테두리가 보라로 빛남 */
.hof-card:hover {
border-color: var(--color-primary);
box-shadow:
0 0 0 2px rgba(91,91,255,.18),
0 6px 16px rgba(91,91,255,.22);
}
.hof-card:active { transform: scale(0.98); }
.hof-card:focus-visible {
outline: none;
border-color: var(--color-primary);
box-shadow:
0 0 0 2px rgba(91,91,255,.25),
0 6px 16px rgba(91,91,255,.22);
}
.hof-thumb {
position: relative;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
border-top-left-radius: var(--radius-md);
border-top-right-radius: var(--radius-md);
}
/* 명예의 전당 — 카드 전체 테두리로 등급 표시 (hover 는 보라로 덮기) */
.hof-card.tier-common { border-color: var(--color-border); }
.hof-card.tier-rare { border-color: #ffd54a; }
.hof-card.tier-epic { border-color: #c89bff; }
.hof-card.tier-legendary { border-color: #6ec8ff; }
/* mythic 은 카드 자체에 무지개 링 (배경 덮어쓰기 위해 position:relative + pseudo) */
.hof-card.tier-mythic { position: relative; border-color: transparent; }
.hof-card.tier-mythic::before {
content: '';
position: absolute;
inset: 0;
border-radius: var(--radius-md);
padding: 2px;
background: linear-gradient(120deg,#ff5b8a,#ffd54a,#6ed37a,#5b9bff,#b65bff);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: 1;
}
.hof-thumb .hof-emoji {
font-size: 52px;
filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1));
}
.hof-thumb .hof-box-tag {
position: absolute;
left: 5px; bottom: 5px; right: 5px;
padding: 3px 7px;
border-radius: var(--radius-sm);
background: rgba(0,0,0,0.65);
color: #fff;
font-size: 12px;
font-weight: var(--weight-medium);
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
backdrop-filter: blur(4px);
}
.hof-body {
padding: 10px;
display: flex;
flex-direction: column;
gap: 3px;
}
.hof-price {
font-size: var(--text-base);
font-weight: var(--weight-bold);
color: #E85656;
letter-spacing: -0.3px;
}
.hof-name {
font-size: var(--text-sm);
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hof-nickname {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.hof-nickname b {
color: var(--color-text-sub);
font-weight: var(--weight-bold);
}
/* ===== 마켓 쇼케이스 (하단 예시 섹션) ===== */
/* 박스에도 들어있는 상품 - 가로 스크롤 */
.showcase-cross {
flex-shrink: 0;
width: 144px;
display: block;
scroll-snap-align: start;
border: 2px solid transparent;
border-radius: var(--radius-md);
padding: 4px;
margin: -4px;
background: transparent;
color: inherit;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: border-color .15s ease, box-shadow .18s ease, transform .1s ease;
}
.showcase-cross,
.showcase-cross:hover,
.showcase-cross:focus,
.showcase-cross:active,
.showcase-cross:visited { color: inherit; text-decoration: none; }
/* hover: 보라 테두리 + 글로우 (명예의 전당과 동일) */
.showcase-cross:hover {
border-color: var(--color-primary);
box-shadow:
0 0 0 2px rgba(91,91,255,.18),
0 6px 16px rgba(91,91,255,.22);
}
.showcase-cross:active { transform: scale(.98); }
.showcase-cross:focus-visible {
outline: none;
border-color: var(--color-primary);
box-shadow:
0 0 0 2px rgba(91,91,255,.25),
0 6px 16px rgba(91,91,255,.22);
}
.showcase-cross .thumb {
position: relative;
aspect-ratio: 1 / 1;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
margin-bottom: var(--space-2);
box-shadow: var(--shadow-sm);
}
.showcase-cross .thumb .cross-box-tag {
position: absolute;
bottom: 6px; left: 6px; right: 6px;
padding: 3px 8px;
border-radius: var(--radius-full);
background: rgba(91, 91, 255, 0.92);
color: #fff;
font-size: 10px;
font-weight: var(--weight-bold);
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
backdrop-filter: blur(4px);
}
.showcase-cross .name {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
margin-bottom: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.showcase-cross .price {
display: flex;
align-items: baseline;
gap: 4px;
flex-wrap: wrap;
}
.showcase-cross .price .list {
font-size: 11px;
color: var(--color-text-muted);
text-decoration: line-through;
}
.showcase-cross .price .sale {
font-size: var(--text-sm);
font-weight: var(--weight-bold);
color: var(--color-primary);
}
/* 베스트 셀러 - 2열 그리드 */
.market-showcase-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3);
}
.showcase-best {
display: grid;
grid-template-columns: 72px 1fr;
gap: var(--space-3);
padding: var(--space-3);
background: var(--color-bg);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
align-items: center;
transition: transform .1s ease;
}
.showcase-best:active { transform: scale(0.98); }
.showcase-best .thumb {
position: relative;
aspect-ratio: 1 / 1;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
}
.showcase-best .thumb .rank {
position: absolute;
top: 4px; left: 4px;
width: 20px; height: 20px;
border-radius: var(--radius-full);
background: var(--color-primary);
color: #fff;
font-size: 11px;
font-weight: var(--weight-bold);
display: grid;
place-content: center;
}
.showcase-best .thumb .emoji { font-size: 32px; }
.showcase-best .body { min-width: 0; }
.showcase-best .name {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
margin-bottom: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.showcase-best .price {
display: flex;
align-items: baseline;
gap: 4px;
flex-wrap: wrap;
}
.showcase-best .price .list {
font-size: 11px;
color: var(--color-text-muted);
text-decoration: line-through;
}
.showcase-best .price .sale {
font-size: var(--text-sm);
font-weight: var(--weight-bold);
color: var(--color-primary);
}
/* ===== 마이페이지 ===== */
.my-profile {
display: grid;
grid-template-columns: 56px 1fr 40px;
gap: var(--space-3);
align-items: center;
padding: var(--space-4);
background: var(--color-bg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
margin-bottom: var(--space-3);
text-decoration: none;
color: inherit;
transition: transform .1s ease, box-shadow .15s ease;
}
.my-profile:hover { text-decoration: none; box-shadow: var(--shadow-md); }
.my-profile:hover .my-profile-chev {
border-color: var(--color-primary);
color: var(--color-primary);
background: var(--color-primary-soft);
}
.my-profile:active { transform: scale(0.995); }
.my-profile .my-profile-chev {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
border: 1.5px solid var(--color-border);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-text-sub);
font-size: 24px;
font-weight: var(--weight-bold);
line-height: 1;
padding-bottom: 3px; /* 쉐브론 문자가 시각적으로 위로 뜨는 보정 */
background: var(--color-bg);
transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.my-profile .my-avatar {
width: 56px; height: 56px;
border-radius: var(--radius-full);
background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
color: #fff;
font-size: 24px;
font-weight: var(--weight-bold);
display: grid; place-content: center;
text-transform: uppercase;
overflow: hidden;
}
.my-profile .my-avatar.avatar-preset {
background: var(--color-surface);
font-size: 32px;
}
.my-profile .my-avatar.avatar-image {
background: var(--color-surface);
}
.my-profile .my-avatar img {
width: 100%; height: 100%; object-fit: cover;
}
.my-profile .my-meta { min-width: 0; }
.my-profile .my-name {
font-size: var(--text-lg);
font-weight: var(--weight-bold);
margin-bottom: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.my-profile .my-sub {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.my-profile .my-settings {
width: 32px; height: 32px;
border-radius: var(--radius-full);
display: grid; place-content: center;
color: var(--color-text-sub);
background: var(--color-surface);
}
.my-profile .my-settings:hover { text-decoration: none; background: var(--color-primary-soft); color: var(--color-primary); }
.my-profile .my-settings svg { width: 18px; height: 18px; }
.my-point-card {
padding: var(--space-5);
background: linear-gradient(135deg, #5B5BFF 0%, #9B5BFF 100%);
border-radius: var(--radius-lg);
color: #fff;
margin-bottom: var(--space-4);
box-shadow: var(--shadow-md);
}
.my-point-card .my-point-label {
font-size: var(--text-sm);
opacity: 0.88;
margin-bottom: 4px;
}
.my-point-card .my-point-amount {
display: flex;
align-items: baseline;
gap: 6px;
margin-bottom: var(--space-4);
}
.my-point-card .my-point-amount .value {
font-size: 32px;
font-weight: var(--weight-bold);
letter-spacing: -0.5px;
}
.my-point-card .my-point-amount .unit {
font-size: var(--text-lg);
font-weight: var(--weight-bold);
opacity: 0.88;
}
.my-point-card .my-point-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2);
}
.my-point-card .my-point-cta {
padding: var(--space-3);
text-align: center;
border-radius: var(--radius-full);
background: rgba(255,255,255,0.2);
color: #fff;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
backdrop-filter: blur(4px);
}
.my-point-card .my-point-cta.primary {
background: #fff;
color: var(--color-primary);
}
.my-point-card .my-point-cta:hover { text-decoration: none; }
.my-quick {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-2);
margin-bottom: var(--space-5);
}
.my-quick-link {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: var(--space-4) var(--space-2);
background: var(--color-bg);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
color: var(--color-text);
transition: transform .1s ease;
}
.my-quick-link:active { transform: scale(0.97); }
.my-quick-link:hover { text-decoration: none; }
.my-quick-link .emoji { font-size: 24px; }
.my-quick-link .label {
font-size: var(--text-xs);
font-weight: var(--weight-medium);
}
.my-menu-group { margin-bottom: var(--space-5); }
.my-menu-title {
font-size: var(--text-sm);
font-weight: var(--weight-bold);
color: var(--color-text-sub);
margin-bottom: var(--space-2);
padding: 0 var(--space-1);
}
.my-menu-list {
background: var(--color-bg);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.my-menu-item {
display: grid;
grid-template-columns: 32px 1fr 16px;
gap: var(--space-3);
align-items: center;
width: 100%;
padding: var(--space-3) var(--space-4);
background: transparent;
text-align: left;
border-bottom: 1px solid var(--color-border);
transition: background .1s ease;
}
.my-menu-item:last-child { border-bottom: none; }
.my-menu-item:hover { background: var(--color-surface); }
.my-menu-item .my-menu-emoji { font-size: 20px; text-align: center; }
.my-menu-item .my-menu-label {
font-size: var(--text-base);
color: var(--color-text);
}
.my-menu-item .my-menu-chev {
font-size: 18px;
color: var(--color-text-muted);
}
.my-logout-wrap {
padding: var(--space-3) 0;
text-align: center;
}
.my-logout {
font-size: var(--text-sm);
color: var(--color-text-muted);
padding: var(--space-2) var(--space-4);
text-decoration: underline;
text-underline-offset: 3px;
}
.my-logout:hover { color: #E85656; }
.my-footer {
text-align: center;
padding: var(--space-4) 0;
font-size: var(--text-xs);
color: var(--color-text-muted);
}
/* ===== 보관함 상품 카드: 획득 출처 뱃지 ===== */
.inv-source-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 6px 2px 3px;
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
background: var(--color-primary-soft);
color: var(--color-primary);
max-width: 100%;
overflow: hidden;
}
.inv-source-badge.market {
background: #FFE9E0;
color: #E85656;
}
.inv-source-badge .src-icon {
width: 18px; height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background: var(--color-bg);
font-size: 11px;
flex-shrink: 0;
}
.inv-source-badge .src-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 포인트 배지 */
.point-badge {
display: inline-flex; align-items: center; gap: var(--space-1);
padding: var(--space-2) var(--space-3);
background: var(--color-primary-soft);
color: var(--color-primary);
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: var(--weight-bold);
text-decoration: none;
transition: background .15s ease;
}
.point-badge:hover { background: #DCDCFF; text-decoration: none; color: var(--color-primary); }
.point-badge::before {
content: "P";
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px;
border-radius: var(--radius-full);
background: var(--color-primary);
color: #fff;
font-size: 10px;
font-weight: var(--weight-bold);
}
/* ========== 보관함: 박스 개봉 ========== */
/* 상단 툴바 */
.box-toolbar {
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-3);
padding: var(--space-3) var(--space-1);
margin-bottom: var(--space-3);
}
.box-toolbar .summary { font-size: var(--text-sm); color: var(--color-text-muted); }
.box-toolbar .summary b { color: var(--color-text); font-weight: var(--weight-bold); }
.open-all-btn {
background: linear-gradient(135deg, #7b5bff 0%, #5b5bff 60%, #3d7bff 100%);
color: #fff;
font-weight: var(--weight-bold);
}
.open-all-btn:disabled { opacity: .5; cursor: not-allowed; }
/* 박스 리스트 카드 */
.box-inv-list { display: flex; flex-direction: column; gap: var(--space-3); }
.box-inv-card {
display: grid;
grid-template-columns: 72px 1fr;
gap: var(--space-3);
align-items: center;
padding: var(--space-3);
background: var(--color-bg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background-color .15s ease, transform .08s ease;
}
.box-inv-card:hover { background: var(--color-surface); }
.box-inv-card:active { transform: scale(.997); }
.box-inv-card:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.box-inv-card .thumb {
width: 72px; height: 72px;
border-radius: var(--radius-md);
background: var(--color-surface);
display: flex; align-items: center; justify-content: center;
font-size: 32px;
}
.box-inv-card .body {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.box-inv-card .name {
font-weight: var(--weight-bold);
font-size: var(--text-base);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 하단 라인: 좌측 보유 수량, 우측 개봉 버튼 2개 */
.box-inv-card .row-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
}
.box-inv-card .qty {
font-size: var(--text-sm);
color: var(--color-text-muted);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.box-inv-card .actions {
display: flex;
gap: 6px;
margin-left: auto;
flex-wrap: nowrap;
flex-shrink: 0;
}
.box-inv-card .actions .btn.sm {
padding: 6px 10px;
font-size: 12px;
line-height: 1;
min-height: 28px;
white-space: nowrap;
}
/* ========== 풀스크린 오버레이 공통 ========== */
.open-overlay {
position: fixed; inset: 0; z-index: 9999;
background: radial-gradient(ellipse at center, #1a1036 0%, #0a0620 100%);
color: #fff;
display: flex; flex-direction: column;
animation: overlayFadeIn .2s ease;
overflow: hidden;
overscroll-behavior: contain;
}
.open-overlay.anim-out { animation: overlayFadeOut .22s ease forwards; }
@keyframes overlayFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes overlayFadeOut { to { opacity: 0; } }
/* Skip 버튼 */
.open-skip {
position: fixed;
top: calc(env(safe-area-inset-top, 0px) + 28px);
right: 20px;
z-index: 10;
padding: 10px 18px;
border-radius: var(--radius-full);
background: rgba(255,255,255,.15);
color: #fff; font-weight: var(--weight-medium); font-size: 14px;
border: 1px solid rgba(255,255,255,.25);
backdrop-filter: blur(8px);
cursor: pointer;
}
.open-skip:hover { background: rgba(255,255,255,.25); }
/* ========== 애니메이션 페이즈 ========== */
.open-overlay.anim-phase {
justify-content: center; align-items: center;
}
.open-stage {
position: relative;
width: 100%; max-width: 420px;
aspect-ratio: 1 / 1;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
}
.open-title {
margin-top: 16px;
font-size: 22px; font-weight: var(--weight-bold);
text-shadow: 0 2px 16px rgba(0,0,0,.5);
opacity: 0;
animation: titleIn .6s ease .4s forwards;
}
.open-sub {
margin-top: 6px;
font-size: 13px; opacity: 0;
color: rgba(255,255,255,.75);
animation: titleIn .6s ease .55s forwards;
}
@keyframes titleIn { to { opacity: 1; transform: translateY(-4px); } }
/* 박스 (엠버식) */
.open-box {
position: relative;
width: 140px; height: 140px;
display: flex; align-items: center; justify-content: center;
animation: boxWobble 1s ease-in-out infinite;
}
.open-box-lid {
font-size: 88px;
filter: drop-shadow(0 8px 24px rgba(0,0,0,.5));
animation: lidPop 1.6s ease-in-out infinite;
}
.open-box-base {
position: absolute; inset: auto 0 0 0;
height: 20px;
background: radial-gradient(ellipse at center, rgba(0,0,0,.5), transparent 70%);
filter: blur(4px);
}
@keyframes boxWobble {
0%, 100% { transform: rotate(-3deg); }
50% { transform: rotate(3deg); }
}
@keyframes lidPop {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-8px) scale(1.05); }
}
/* Shine (방사형 빛) */
/* Shine (방사형 빛) — stage 2배 크기 + 원형 클립으로 회전 시 모서리 노출 방지 */
/* 120도 간격으로 3줄기의 빛을 배치 (0°/120°/240° 근처에 부드러운 arc) */
.open-shine {
position: absolute;
inset: -50%;
border-radius: 50%;
background: conic-gradient(from 0deg,
transparent 0deg,
rgba(255,255,255,.22) 20deg,
transparent 40deg,
transparent 100deg,
rgba(255,255,255,.22) 120deg,
transparent 140deg,
transparent 220deg,
rgba(255,255,255,.22) 240deg,
transparent 260deg,
transparent 360deg);
animation: shineSpin 3s linear infinite;
opacity: 0;
pointer-events: none;
}
@keyframes shineSpin { to { transform: rotate(360deg); } }
/* 링 */
.open-rings { position: absolute; inset: 0; pointer-events: none; }
.open-rings span {
position: absolute; left: 50%; top: 50%;
width: 100px; height: 100px;
margin: -50px 0 0 -50px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,.5);
opacity: 0;
animation: ringPulse 2s ease-out infinite;
}
.open-rings span:nth-child(2) { animation-delay: .5s; }
.open-rings span:nth-child(3) { animation-delay: 1s; }
.open-rings span:nth-child(4) { animation-delay: 1.5s; }
@keyframes ringPulse {
0% { transform: scale(.3); opacity: .8; border-width: 4px; }
100% { transform: scale(3); opacity: 0; border-width: 1px; }
}
/* Sparks */
.open-sparks { position: absolute; inset: 0; pointer-events: none; }
.open-sparks span {
position: absolute; left: 50%; top: 50%;
width: 6px; height: 6px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 12px #fff, 0 0 24px rgba(255,255,255,.6);
opacity: 0;
--angle: calc(var(--i) * 20deg);
animation: sparkFly 1.4s ease-out infinite;
animation-delay: calc(var(--i) * 60ms);
}
@keyframes sparkFly {
0% { transform: rotate(var(--angle)) translateY(0) scale(.4); opacity: 1; }
100% { transform: rotate(var(--angle)) translateY(-180px) scale(.2); opacity: 0; }
}
/* ---- Mystery 단계 (첫 1.4s — 등급 숨김) ---- */
.open-overlay.tier-mystery {
background: radial-gradient(ellipse at center, #1a1036 0%, #0a0620 100%);
}
.tier-mystery .open-shine { opacity: .25; filter: none; animation-duration: 5s; }
.tier-mystery .open-sparks span {
background: rgba(255,255,255,.55);
box-shadow: 0 0 6px rgba(255,255,255,.35);
width: 4px; height: 4px;
}
.tier-mystery .open-rings span {
border-color: rgba(255,255,255,.3);
border-width: 1px;
animation-duration: 2.4s;
}
.tier-mystery .open-title {
color: rgba(255,255,255,.85);
letter-spacing: 2px;
animation: mysteryPulse 1.2s ease-in-out infinite;
}
@keyframes mysteryPulse {
0%, 100% { opacity: .7; transform: translateY(-4px) scale(1); }
50% { opacity: 1; transform: translateY(-4px) scale(1.04); }
}
.tier-mystery .open-box-lid {
filter: drop-shadow(0 8px 24px rgba(0,0,0,.6)) brightness(.85);
}
/* ---- Reveal 버스트 (등급 전환 순간의 "펑!") ---- */
.open-reveal-burst {
position: absolute;
left: 50%; top: 50%;
width: 4px; height: 4px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,.9) 25%, rgba(255,255,255,.4) 55%, transparent 75%);
transform: translate(-50%, -50%) scale(0);
opacity: 0;
pointer-events: none;
z-index: 2;
}
.tier-revealed .open-reveal-burst {
animation: revealBurst 1.1s cubic-bezier(.15,.9,.2,1) forwards;
}
@keyframes revealBurst {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
8% { transform: translate(-50%, -50%) scale(60); opacity: 1; }
25% { transform: translate(-50%, -50%) scale(110); opacity: .7; }
100% { transform: translate(-50%, -50%) scale(220); opacity: 0; }
}
/* 전체 화면 플래시 */
.tier-revealed::after {
content: "";
position: absolute; inset: 0;
background: rgba(255,255,255,0);
pointer-events: none;
z-index: 1;
animation: screenFlash .7s ease-out forwards;
}
@keyframes screenFlash {
0% { background: rgba(255,255,255,0); }
10% { background: rgba(255,255,255,.75); }
50% { background: rgba(255,255,255,.15); }
100% { background: rgba(255,255,255,0); }
}
.tier-revealed .open-box {
animation: boxWobble 1s ease-in-out infinite, revealBoxPop .7s cubic-bezier(.34,1.56,.64,1);
}
@keyframes revealBoxPop {
0% { transform: scale(.75) rotate(-10deg); }
40% { transform: scale(1.25) rotate(6deg); }
70% { transform: scale(.95) rotate(-2deg); }
100% { transform: scale(1) rotate(0); }
}
.tier-revealed .open-title {
animation: revealTitleFade .5s ease;
}
@keyframes revealTitleFade {
0% { opacity: 0; transform: translateY(4px); }
100% { opacity: 1; transform: translateY(-4px); }
}
/* ---- 라벨 단계 (등급 이름 공개) ---- */
.tier-labeled .open-title {
animation: labelPop .6s cubic-bezier(.34,1.56,.64,1);
letter-spacing: 0;
}
@keyframes labelPop {
0% { opacity: 0; transform: translateY(-4px) scale(.7); filter: blur(6px); }
60% { opacity: 1; transform: translateY(-6px) scale(1.12); filter: blur(0); }
100% { opacity: 1; transform: translateY(-4px) scale(1); }
}
.tier-labeled .open-box {
animation: boxWobble 1s ease-in-out infinite, labelBoxJump .5s ease;
}
@keyframes labelBoxJump {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15) translateY(-6px); }
}
/* ---- Tier별 연출 ---- */
/* common: 기본 (sparks 약함) */
.tier-common .open-shine { opacity: .3; }
.tier-common .open-sparks span { background: rgba(255,255,255,.7); box-shadow: 0 0 6px rgba(255,255,255,.5); }
/* rare: 노랑 */
.tier-rare .open-shine { opacity: .55; filter: hue-rotate(40deg); }
.tier-rare .open-sparks span { background: #ffd54a; box-shadow: 0 0 14px #ffd54a, 0 0 28px rgba(255,213,74,.6); }
.tier-rare .open-rings span { border-color: rgba(255,213,74,.8); }
.tier-rare .open-title { color: #ffd54a; }
/* epic: 보라 */
.tier-epic .open-shine { opacity: .65; filter: hue-rotate(260deg); }
.tier-epic .open-sparks span { background: #c89bff; box-shadow: 0 0 16px #c89bff, 0 0 32px rgba(200,155,255,.7); }
.tier-epic .open-rings span { border-color: rgba(200,155,255,.9); animation-duration: 1.5s; }
.tier-epic .open-title { color: #c89bff; text-shadow: 0 0 20px rgba(200,155,255,.8); }
.tier-epic .open-box { animation-duration: .7s; }
/* legendary: 파랑 + 번개 (박스 개봉 오버레이 전용 — 편성 모달의 .prize-item.tier-legendary 에 누출되지 않도록 .open-overlay 로 스코프) */
.open-overlay.tier-legendary { background: radial-gradient(ellipse at center, #102660 0%, #030a24 100%); }
.tier-legendary .open-shine { opacity: .8; filter: hue-rotate(200deg); animation-duration: 2s; }
.tier-legendary .open-sparks span {
background: #6ec8ff; box-shadow: 0 0 20px #6ec8ff, 0 0 40px rgba(110,200,255,.8);
width: 8px; height: 8px;
}
.tier-legendary .open-rings span { border-color: rgba(110,200,255,1); border-width: 3px; animation-duration: 1.2s; }
.tier-legendary .open-title { color: #6ec8ff; text-shadow: 0 0 24px rgba(110,200,255,.9); font-size: 26px; }
.tier-legendary .open-box { animation: boxShake .12s ease-in-out infinite; }
@keyframes boxShake {
0%,100% { transform: translate(0,0) rotate(0); }
25% { transform: translate(-2px,1px) rotate(-4deg); }
75% { transform: translate(2px,-1px) rotate(4deg); }
}
.open-overlay.tier-legendary::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, transparent 0%, rgba(110,200,255,.25) 50%, transparent 100%);
animation: lightningFlash 1.4s ease-in-out infinite;
}
@keyframes lightningFlash {
0%, 20%, 100% { opacity: 0; }
10%, 12% { opacity: 1; }
}
/* mythic: 무지개 + 슬로우 (박스 개봉 오버레이 전용) */
.open-overlay.tier-mythic {
background:
radial-gradient(ellipse at center, rgba(40,10,70,.4), transparent 60%),
linear-gradient(120deg,#ff5b8a 0%,#ff9a3d 20%,#ffd54a 40%,#6ed37a 60%,#5b9bff 80%,#b65bff 100%);
background-size: 400% 400%;
animation: overlayFadeIn .2s ease, rainbowShift 6s ease infinite;
}
@keyframes rainbowShift {
0%,100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.tier-mythic .open-shine { opacity: 1; animation-duration: 1.5s; mix-blend-mode: overlay; }
.tier-mythic .open-sparks span {
width: 10px; height: 10px;
background: #fff;
box-shadow: 0 0 28px #fff, 0 0 60px rgba(255,255,255,.9);
}
.tier-mythic .open-rings span {
border: 3px solid rgba(255,255,255,.95);
animation-duration: 1.4s;
box-shadow: 0 0 24px rgba(255,255,255,.8);
}
.tier-mythic .open-title {
font-size: 30px;
background: linear-gradient(90deg,#fff, #fffbe0, #fff);
-webkit-background-clip: text; background-clip: text; color: transparent;
text-shadow: 0 0 30px rgba(255,255,255,.9);
animation: titleIn .6s ease .4s forwards, mythicPulse 1.2s ease-in-out infinite;
}
@keyframes mythicPulse {
0%,100% { filter: brightness(1); transform: scale(1); }
50% { filter: brightness(1.3); transform: scale(1.05); }
}
.tier-mythic .open-box-lid { font-size: 104px; filter: drop-shadow(0 0 40px rgba(255,255,255,.9)); }
.tier-mythic .open-box { animation: boxFloat 1.6s ease-in-out infinite; }
@keyframes boxFloat {
0%,100% { transform: translateY(0) rotate(-4deg); }
50% { transform: translateY(-14px) rotate(4deg); }
}
/* ========== 결과 페이즈 ========== */
.open-overlay.results-phase {
padding: calc(env(safe-area-inset-top, 12px) + 16px) 16px 0;
background: radial-gradient(ellipse at top, #1a1740 0%, #0a0620 65%);
align-items: center; /* PC 에서 컨테이너 중앙 정렬 */
}
.open-overlay.results-phase .open-results-header,
.open-overlay.results-phase .open-results-grid,
.open-overlay.results-phase .open-results-footer {
width: 100%;
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
}
.open-overlay.results-phase .open-results-header {
flex: 0 0 auto;
}
.open-overlay.results-phase .open-results-grid {
flex: 1 1 0;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
-ms-overflow-style: none;
scrollbar-width: none;
/* 1줄만 있어도 카드가 세로로 늘어나지 않도록 상단 정렬 고정 */
align-content: start;
align-items: start;
grid-auto-rows: min-content;
}
.open-overlay.results-phase .open-results-grid::-webkit-scrollbar { display: none; }
.open-results-header {
text-align: center;
padding: 8px 0 16px;
}
.open-results-header .title {
font-size: 22px; font-weight: var(--weight-bold);
margin-bottom: 6px;
}
.open-results-header .sub {
font-size: 13px; color: rgba(255,255,255,.78);
margin-bottom: 10px;
}
.open-results-header .sub b { color: #ffd54a; font-weight: var(--weight-bold); }
.tier-tally {
display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
}
.tally-chip {
padding: 4px 10px;
border-radius: var(--radius-full);
font-size: 12px; font-weight: var(--weight-bold);
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.2);
}
.tally-chip.tier-rare { color: #ffd54a; border-color: rgba(255,213,74,.6); }
.tally-chip.tier-epic { color: #c89bff; border-color: rgba(200,155,255,.7); }
.tally-chip.tier-legendary { color: #6ec8ff; border-color: rgba(110,200,255,.8); }
.tally-chip.tier-mythic {
color: #fff;
background: linear-gradient(90deg,#ff5b8a,#ffd54a,#6ed37a,#5b9bff,#b65bff);
border-color: transparent;
}
/* 결과 그리드 — 3열 */
.open-results-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
padding: 8px 0;
}
.result-card {
position: relative;
min-width: 0;
background: rgba(255,255,255,.08);
border: 2px solid rgba(255,255,255,.15);
border-radius: var(--radius-md);
padding: 8px 8px 10px;
text-align: center;
opacity: 0;
transform: translateY(12px) scale(.92);
animation: resultIn .5s cubic-bezier(.2,.8,.2,1) forwards;
animation-delay: var(--delay, 0ms);
}
@keyframes resultIn {
to { opacity: 1; transform: translateY(0) scale(1); }
}
.result-card .thumb {
aspect-ratio: 1 / 1;
border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: center;
font-size: 34px;
margin-bottom: 6px;
}
.result-card .name {
font-size: 12px; font-weight: var(--weight-medium);
color: #fff;
max-width: 100%;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
margin-bottom: 2px;
}
.result-card .price {
font-size: 13px; font-weight: var(--weight-bold);
color: #ffd54a;
max-width: 100%;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.result-card .tier-tag {
position: absolute; top: 6px; left: 6px;
padding: 2px 7px;
border-radius: var(--radius-full);
font-size: 10px; font-weight: var(--weight-bold);
background: rgba(0,0,0,.45);
color: #fff;
backdrop-filter: blur(4px);
}
.result-card .tier-tag.tier-common { display: none; }
/* tier별 테두리 색 */
.result-card.tier-rare {
border-color: #ffd54a;
box-shadow: 0 0 0 1px rgba(255,213,74,.4), 0 0 22px rgba(255,213,74,.35);
}
.result-card.tier-rare .tier-tag { background: rgba(255,213,74,.85); color: #4a3a00; }
.result-card.tier-epic {
border-color: #c89bff;
box-shadow: 0 0 0 1px rgba(200,155,255,.45), 0 0 26px rgba(200,155,255,.4);
}
.result-card.tier-epic .tier-tag { background: rgba(200,155,255,.9); color: #2a0a5e; }
.result-card.tier-legendary {
border-color: #6ec8ff;
box-shadow: 0 0 0 1px rgba(110,200,255,.5), 0 0 30px rgba(110,200,255,.5);
animation: resultIn .5s cubic-bezier(.2,.8,.2,1) forwards, legendaryGlow 2s ease-in-out infinite;
}
@keyframes legendaryGlow {
0%,100% { box-shadow: 0 0 0 1px rgba(110,200,255,.5), 0 0 24px rgba(110,200,255,.4); }
50% { box-shadow: 0 0 0 2px rgba(110,200,255,.8), 0 0 40px rgba(110,200,255,.7); }
}
.result-card.tier-legendary .tier-tag { background: rgba(110,200,255,.9); color: #05264d; }
.result-card.tier-mythic {
border: 2px solid transparent;
background:
linear-gradient(rgba(20,10,40,.85), rgba(20,10,40,.85)) padding-box,
linear-gradient(120deg,#ff5b8a,#ffd54a,#6ed37a,#5b9bff,#b65bff,#ff5b8a) border-box;
background-size: auto, 300% 100%;
animation:
resultIn .5s cubic-bezier(.2,.8,.2,1) forwards,
mythicBorder 3s linear infinite;
box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 0 36px rgba(200,120,255,.55);
}
@keyframes mythicBorder {
0% { background-position: 0% 50%, 0% 50%; }
100% { background-position: 0% 50%, 300% 50%; }
}
.result-card.tier-mythic .tier-tag {
background: linear-gradient(90deg,#ff5b8a,#ffd54a,#6ed37a,#5b9bff,#b65bff);
color: #fff;
}
/* 결과 페이즈 footer */
.open-results-footer {
flex: 0 0 auto;
padding: 12px 0 calc(env(safe-area-inset-bottom, 0) + 12px);
display: flex; gap: 8px;
background: linear-gradient(180deg, transparent 0%, rgba(10,6,32,.92) 30%);
backdrop-filter: blur(6px);
}
.open-results-footer .btn { flex: 1; padding: 12px; font-size: 15px; font-weight: var(--weight-bold); }
/* PC: 결과 4열 */
@media (min-width: 768px) {
.open-results-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* 마켓 — 라인 구분 리스트 (박스탭과 같은 폼팩터, 차별점: 대박칩 대신 가격/재고 강조) */
.market-list {
display: flex; flex-direction: column;
margin: 0 calc(var(--space-4) * -1);
border-top: 1px solid var(--color-border);
}
.market-row {
display: grid;
grid-template-columns: 96px 1fr;
gap: var(--space-3);
align-items: center;
padding: 12px var(--space-4);
border-bottom: 1px solid var(--color-border);
background: var(--color-bg);
color: var(--color-text);
text-decoration: none;
transition: background .12s ease;
}
/* hover: 연한 보라 배경 (소식 실시간 당첨 카드와 동일 톤) */
.market-row:hover { background: #F5F4FF; color: var(--color-text); text-decoration: none; }
.market-row:active { background: #EEE9FF; }
.market-row .thumb {
position: relative;
width: 96px; height: 96px;
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
font-size: 52px;
overflow: hidden;
}
.market-row .body {
display: flex; flex-direction: column; gap: 4px;
min-width: 0;
}
.market-row .body .top {
display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0;
}
.market-row .name {
font-weight: var(--weight-bold); font-size: var(--text-base);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
flex: 1;
}
.market-row .link-tag {
flex-shrink: 0;
padding: 2px 8px;
font-size: 10px; font-weight: var(--weight-medium);
color: var(--color-primary);
background: var(--color-primary-soft);
border-radius: var(--radius-full);
}
.market-row .market-stock {
margin: 0;
font-size: 11px;
color: #E85656;
font-weight: var(--weight-medium);
}
.market-row .market-price-row { margin-top: 2px; }
.market-row .market-price-row .sale-price { font-size: var(--text-lg); }
.market-row .market-badge {
left: 6px; top: 6px;
font-size: 10px;
padding: 2px 6px;
}
.market-row .market-sale-badge {
right: 6px; top: 6px;
font-size: 11px;
padding: 2px 7px;
}
/* 더보기 버튼 (소식 탭) */
.more-wrap {
display: flex; justify-content: center;
padding: var(--space-4) 0 var(--space-2);
}
.more-btn {
min-width: 180px;
padding: 12px 24px;
font-weight: var(--weight-bold);
}
.more-btn:disabled { opacity: .6; cursor: not-allowed; }
/* 박스구매 — 라인 구분 리스트 (큰 썸네일 + 우측 요약) */
.box-list {
display: flex; flex-direction: column;
/* 컨테이너 좌우 패딩을 상쇄해 라인이 화면 끝까지 닿도록 */
margin: 0 calc(var(--space-4) * -1);
border-top: 1px solid var(--color-border);
}
.box-row {
display: grid;
grid-template-columns: 96px 1fr;
gap: var(--space-3);
align-items: center;
padding: 12px var(--space-4);
border-bottom: 1px solid var(--color-border);
background: var(--color-bg);
text-decoration: none;
color: var(--color-text);
transition: background .12s ease;
}
/* hover: 연한 보라 배경 */
.box-row:hover { background: #F5F4FF; text-decoration: none; color: var(--color-text); }
.box-row:active { background: #EEE9FF; }
.box-row .thumb {
width: 96px; height: 96px;
border-radius: var(--radius-md);
background: linear-gradient(135deg, #f6f6ff 0%, #ececff 100%);
display: flex; align-items: center; justify-content: center;
font-size: 52px;
box-shadow: inset 0 0 0 1px rgba(91,91,255,.08);
}
.box-row .body {
display: flex; flex-direction: column;
gap: 4px; min-width: 0;
padding: 2px 0;
}
.box-row .top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.box-row .name {
font-weight: var(--weight-bold); font-size: var(--text-base);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.box-row .pop-tag {
padding: 2px 8px;
font-size: 11px; font-weight: var(--weight-bold);
background: linear-gradient(135deg,#ff6b6b,#ff9a3d);
color: #fff;
border-radius: var(--radius-full);
}
.box-row .desc {
font-size: 12px; color: var(--color-text-muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.box-row .meta-row {
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-2);
margin-top: 6px;
}
.box-row .price {
color: var(--color-primary);
font-weight: var(--weight-bold);
font-size: var(--text-lg);
}
/* 확률 칩 */
.odds-chip {
display: inline-flex; align-items: baseline; gap: 5px;
padding: 5px 11px;
background: linear-gradient(135deg, rgba(255,107,107,.1), rgba(155,91,255,.1));
border: 1px solid rgba(155,91,255,.25);
border-radius: var(--radius-full);
font-size: 11px;
white-space: nowrap;
}
.odds-chip .odds-label { color: var(--color-text-muted); font-weight: var(--weight-medium); }
.odds-chip .odds-value {
color: #b65bff;
font-weight: var(--weight-bold);
font-size: 13px;
font-variant-numeric: tabular-nums;
}
/* =====================================================================
박스 구매 상세 페이지 (box-detail.html)
===================================================================== */
/* 디테일 헤더 변형 (좌: 뒤로가기 / 중앙: 타이틀) — nav.js에서 주입 */
.app-header.app-header-detail {
display: grid;
grid-template-columns: 44px 1fr 44px;
align-items: center;
padding: 0 var(--space-2);
}
.app-header.app-header-detail .header-back {
width: 40px; height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-text);
border-radius: var(--radius-full);
background: none;
}
.app-header.app-header-detail .header-back:hover { background: var(--color-surface); }
.app-header.app-header-detail .header-back svg { width: 22px; height: 22px; }
.app-header.app-header-detail .header-title {
text-align: center;
font-size: var(--text-lg);
font-weight: var(--weight-bold);
color: var(--color-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.app-header.app-header-detail .header-spacer { width: 40px; }
/* 섹션 레이아웃 */
.detail-section {
padding: var(--space-4) 0;
border-bottom: 1px solid var(--color-border);
}
.detail-section:last-of-type { border-bottom: none; }
.detail-row {
display: grid;
grid-template-columns: 84px 1fr;
gap: var(--space-3);
align-items: start;
}
.detail-row .detail-label {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text);
padding-top: 10px;
}
.detail-row .detail-ctrl { min-width: 0; }
/* 선택된 박스 카드 */
.selected-box-card {
position: relative;
display: grid;
grid-template-columns: 48px 1fr auto;
gap: var(--space-3);
align-items: center;
padding: var(--space-3);
background: var(--color-primary-soft);
border: 2px solid var(--color-primary);
border-radius: var(--radius-md);
}
.selected-box-card .sel-thumb {
width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
font-size: 28px;
background: #fff;
border-radius: var(--radius-sm);
}
.selected-box-card .sel-name {
font-size: var(--text-sm);
font-weight: var(--weight-bold);
color: var(--color-text);
}
.selected-box-card .sel-price {
font-size: var(--text-xs);
color: var(--color-text-sub);
margin-top: 2px;
}
.selected-box-card .sel-active-pill {
font-size: var(--text-xs);
font-weight: var(--weight-bold);
color: #fff;
background: var(--color-primary);
padding: 4px 10px;
border-radius: var(--radius-full);
}
/* 수량 선택 */
.qty-preset {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.qty-chip {
padding: 12px 0;
background: var(--color-surface);
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: var(--weight-bold);
color: var(--color-text);
transition: background .15s, color .15s;
}
.qty-chip:hover { background: #ECECF5; }
.qty-chip.active {
background: var(--color-primary);
color: #fff;
}
/* 수량 직접 입력 (+/- 제거, 입력만 남김) */
.qty-direct-row {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--space-2);
background: var(--color-surface);
border-radius: var(--radius-md);
padding: 8px 12px;
}
.qty-direct-label {
font-size: var(--text-xs);
color: var(--color-text-sub);
font-weight: var(--weight-medium);
}
.qty-input-big {
text-align: right;
background: transparent;
border: none;
outline: none;
font-size: var(--text-lg);
font-weight: var(--weight-bold);
color: var(--color-text);
min-width: 0;
-moz-appearance: textfield;
}
.qty-input-big:focus { outline: none; border-color: var(--color-point); box-shadow: 0 0 0 2px rgba(91,91,255,.25); }
.qty-input-big::-webkit-outer-spin-button,
.qty-input-big::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-direct-unit {
font-size: var(--text-sm);
color: var(--color-text-sub);
font-weight: var(--weight-medium);
}
.qty-max-hint {
margin-top: var(--space-2);
font-size: var(--text-xs);
color: var(--color-text-sub);
padding: 0 2px;
}
/* 편성 상품 보기 링크 버튼 — 보라 톤 페이지에서 노란 포인트로 강조 */
.prize-list-link {
margin-top: var(--space-2);
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
background: #FFF4B8;
color: #7A5A00;
border: 1px solid #FFD93D;
border-radius: var(--radius-md);
padding: 12px 14px;
font-size: var(--text-sm);
font-weight: var(--weight-bold);
box-shadow: 0 2px 8px rgba(255,217,61,.28);
transition: background .15s, box-shadow .15s;
}
.prize-list-link:hover {
background: #FFE97A;
box-shadow: 0 4px 12px rgba(255,217,61,.4);
}
.prize-list-link .chev-right {
font-size: 18px;
font-weight: var(--weight-bold);
color: #7A5A00;
}
/* 포인트 최대구매 토글 활성 */
.btn-point-max.active {
background: var(--color-primary);
color: #fff;
box-shadow: 0 0 0 2px rgba(91,91,255,.35);
}
.btn-point-max.active:hover { background: var(--color-primary-hover); }
/* 포인트 부족으로 1개도 못 사는 경우 — 비활성 */
.btn-point-max.is-disabled,
.btn-point-max:disabled {
background: var(--color-border);
color: var(--color-text-muted);
cursor: not-allowed;
box-shadow: none;
}
.btn-point-max:disabled:hover { background: var(--color-border); }
/* 편성 상품 모달 */
.prize-sheet {
max-width: 480px;
display: flex;
flex-direction: column;
/* 정보량이 많아 전체화면 팝업으로 고정 — 상단 비는 여백 제거.
desktop(≥768) 에서는 상단 모달 규칙이 center 정렬이더라도 height 100dvh
로 시트가 뷰포트 전체를 채우므로 영향 없음. */
height: 100dvh;
max-height: 100dvh;
border-radius: 0;
}
/* 상단 고정 영역(헤더/박스정보/인트로/탭/푸터)은 shrink 금지 —
세로 공간 부족 시 prize-list 만 스크롤로 흡수. 이렇게 하지 않으면
flex 기본 shrink 로 인해 등급 필터 탭 높이가 잘리는 문제가 생긴다. */
.prize-sheet > .modal-header,
.prize-sheet > .box-stats-block,
.prize-sheet > .prize-intro,
.prize-sheet > .prize-tier-tabs,
.prize-sheet > .prize-footer {
flex-shrink: 0;
}
.prize-sheet > .prize-list {
flex: 1 1 0;
min-height: 0;
}
.prize-intro {
font-size: var(--text-xs);
color: var(--color-text-sub);
padding: 0 var(--space-1) var(--space-3);
line-height: 1.6;
}
.prize-intro strong { color: var(--color-text); font-weight: var(--weight-bold); }
.prize-list {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 10px;
padding: 2px 0;
-ms-overflow-style: none;
scrollbar-width: thin;
}
.prize-item {
display: grid;
grid-template-columns: 52px 1fr;
gap: var(--space-3);
align-items: center;
padding: 10px;
background: var(--color-surface);
border-radius: var(--radius-md);
}
.prize-item {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
user-select: none;
}
/* 편성 상품 카드가 로 바뀌면서 iOS/Chrome 의 파란 탭 하이라이트/포커스 깜빡임 제거 */
.prize-item,
.prize-item:visited,
.prize-item:active,
.prize-item:focus,
.prize-item:focus-visible {
color: inherit;
text-decoration: none;
outline: none;
background-color: var(--color-surface);
}
.prize-item:hover { background-color: var(--color-surface); }
.prize-item:active { transform: scale(.995); transition: transform .08s ease; }
.prize-item .prize-thumb {
width: 52px; height: 52px;
display: flex; align-items: center; justify-content: center;
font-size: 28px;
background: var(--color-bg);
border-radius: var(--radius-sm);
border: 2px solid transparent;
box-sizing: border-box;
}
/* 티어별 썸네일 테두리 — 정적 컬러 테두리만 유지 (글로우/애니메이션 제거) */
.prize-item.tier-common .prize-thumb {
border-color: var(--color-border);
}
.prize-item.tier-rare .prize-thumb {
border-color: #ffd54a;
}
.prize-item.tier-epic .prize-thumb {
border-color: #c89bff;
}
.prize-item.tier-legendary .prize-thumb {
border-color: #6ec8ff;
}
.prize-item.tier-mythic .prize-thumb {
border: 2px solid transparent;
background:
linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
linear-gradient(120deg,#ff5b8a,#ffd54a,#6ed37a,#5b9bff,#b65bff) border-box;
}
/* 모달 내 포커스 파란 outline 제거 (iOS 깜빡임 방지) */
.prize-sheet button:focus-visible,
.prize-sheet .prize-item:focus-visible,
.prize-list .prize-item:focus-visible {
outline: none;
}
.prize-sheet .modal-close {
-webkit-tap-highlight-color: transparent;
width: 40px;
height: 40px;
font-size: 22px;
color: var(--color-text);
}
.prize-item .prize-info { min-width: 0; }
.prize-item .prize-top {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.prize-item .prize-tier {
font-size: 10px;
font-weight: var(--weight-bold);
padding: 2px 8px;
border-radius: var(--radius-full);
color: #fff;
background: var(--tier-color, var(--color-text-muted));
white-space: nowrap;
flex-shrink: 0;
}
.prize-item .prize-name {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.prize-item .prize-bottom {
display: flex;
justify-content: space-between;
align-items: center;
gap: 6px;
}
.prize-item .prize-price {
font-size: var(--text-xs);
color: var(--color-text-sub);
}
.prize-item .prize-odds {
font-size: var(--text-sm);
font-weight: var(--weight-bold);
color: var(--color-primary);
font-variant-numeric: tabular-nums;
}
.prize-footer {
margin-top: var(--space-3);
padding-top: var(--space-2);
border-top: 1px dashed var(--color-border);
font-size: var(--text-xs);
color: var(--color-text-muted);
text-align: center;
}
/* 편성 상품 모달 — 등급 필터 탭 (전체/미스틱/레전더리/…/일반)
긴 라벨 + 수가 들어가 가로 스크롤 허용. 활성 탭은 point 컬러 강조. */
.prize-tier-tabs {
display: flex;
/* 화면이 좁으면 가로 스크롤 대신 다음 줄로 줄바꿈 — 모든 등급이 한눈에
보이도록. 줄 사이 간격은 row-gap 으로, 탭 사이는 column-gap 으로. */
flex-wrap: wrap;
row-gap: 6px;
column-gap: 6px;
padding: 3px 2px 10px;
margin: 0 calc(var(--space-1) * -1) var(--space-2);
}
/* 탭 크기가 선택 상태에서 달라지지 않도록 font-weight 는 항상 동일하게
유지하고, 활성 탭의 도트도 숨기지 않고 흰색으로 전환해 폭을 보존한다. */
.prize-tier-tab {
display: inline-flex;
align-items: center;
gap: 5px;
flex-shrink: 0;
border: 1px solid var(--color-border);
background: var(--color-bg);
color: var(--color-text-sub);
font-size: var(--text-xs);
/* 기준 weight = 600(semi-bold). 활성/비활성 모두 동일 → 탭 폭이 고정된다. */
font-weight: 600;
padding: 6px 10px;
border-radius: var(--radius-full);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background .15s, color .15s, border-color .15s;
}
.prize-tier-tab:hover {
background: var(--color-surface);
color: var(--color-text);
}
.prize-tier-tab.is-on {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
/* font-weight 는 변경하지 않음 (폭 고정) */
}
.prize-tier-tab-dot {
width: 6px; height: 6px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
/* 활성 탭은 도트를 숨기지 않고 흰색으로 바꿔 자리를 유지 */
.prize-tier-tab.is-on .prize-tier-tab-dot {
background: #fff !important;
}
.prize-tier-tab-count {
font-variant-numeric: tabular-nums;
font-size: 10px;
opacity: .7;
}
.prize-tier-tab.is-on .prize-tier-tab-count { opacity: .9; }
/* 해당 등급 편성이 0 개일 때 */
.prize-empty {
padding: var(--space-4);
text-align: center;
color: var(--color-text-muted);
font-size: var(--text-sm);
}
/* ========================================================
편성 모달 상단 — 박스 정보 + 3 메트릭 + 등급별 확률 비교
(opening-history 의 .op-box-* 와 동일 데이터 모델, 가로 넓게 표시)
======================================================== */
.box-stats-block {
display: flex;
flex-direction: column;
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
margin-bottom: var(--space-3);
transition: gap .2s ease, padding .2s ease;
}
/* 박스 정보 접힘: 메트릭·확률표 숨기고 헤더만 — 리스트가 위로 올라옴. */
.box-stats-block.is-collapsed {
gap: 0;
padding-top: 8px;
padding-bottom: 8px;
}
.box-stats-block.is-collapsed .box-stats-metrics,
.box-stats-block.is-collapsed .box-stats-probs {
display: none;
}
.box-stats-head {
display: flex;
align-items: center;
gap: var(--space-2);
}
/* 접기/펼치기 토글 (▴/▾) — 우측 상단 */
.box-stats-toggle {
flex-shrink: 0;
width: 28px; height: 28px;
margin-left: auto;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-bg);
color: var(--color-text-sub);
font-size: 13px;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
-webkit-tap-highlight-color: transparent;
transition: background .15s, color .15s, border-color .15s;
}
.box-stats-toggle:hover {
background: var(--color-surface);
color: var(--color-text);
border-color: var(--color-primary);
}
.box-stats-toggle:active { transform: scale(.95); }
.box-stats-emoji {
width: 42px; height: 42px;
border-radius: var(--radius-sm);
background: var(--color-bg);
display: grid; place-content: center;
font-size: 24px;
flex-shrink: 0;
}
.box-stats-title { min-width: 0; flex: 1; }
.box-stats-name {
font-size: var(--text-sm);
font-weight: var(--weight-bold);
color: var(--color-text);
}
.box-stats-price {
margin-top: 2px;
font-size: 11px;
color: var(--color-text-sub);
}
.box-stats-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
padding: 8px 0;
border-top: 1px dashed var(--color-border);
border-bottom: 1px dashed var(--color-border);
}
.box-stats-metric { text-align: center; min-width: 0; }
.box-stats-metric-v {
font-size: var(--text-sm);
font-weight: var(--weight-bold);
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.box-stats-metric-k {
margin-top: 2px;
font-size: 10px;
color: var(--color-text-sub);
}
.box-stats-probs {
display: flex;
flex-direction: column;
gap: 6px;
}
.box-stats-probs-head {
display: grid;
grid-template-columns: 64px 1fr 1fr;
column-gap: 10px;
font-size: 10px;
color: var(--color-text-muted);
letter-spacing: 0.2px;
padding: 0 2px;
}
.box-stats-probs-head .set,
.box-stats-probs-head .act { text-align: center; }
.box-stats-prob-row {
display: grid;
grid-template-columns: 64px 1fr 1fr;
column-gap: 10px;
align-items: center;
}
.box-stats-prob-label {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--color-text);
white-space: nowrap;
min-width: 0;
}
.box-stats-prob-label .dot {
width: 7px; height: 7px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
.box-stats-prob-col {
display: grid;
grid-template-columns: 1fr auto;
column-gap: 6px;
align-items: center;
}
.box-stats-prob-track {
height: 6px;
border-radius: 3px;
background: var(--color-bg);
overflow: hidden;
}
.box-stats-prob-fill {
height: 100%;
border-radius: 3px;
transition: width .3s ease;
}
.box-stats-prob-val {
font-size: 11px;
font-variant-numeric: tabular-nums;
color: var(--color-text-sub);
min-width: 42px;
text-align: right;
}
/* 포인트 사용 */
.point-input-row {
display: grid;
grid-template-columns: 1fr auto auto;
gap: var(--space-2);
}
/* 마켓 상세 — 포인트 사용 row가 2칸(input + 전액사용)일 때 */
.point-input-row.point-input-row-2 {
grid-template-columns: 1fr auto;
}
.point-input {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 0 12px;
font-size: var(--text-base);
background: var(--color-bg);
min-width: 0;
-moz-appearance: textfield;
height: 56px;
}
.point-input::-webkit-outer-spin-button,
.point-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.btn-dark {
padding: 0 14px;
background: #111827;
color: #fff;
border-radius: var(--radius-md);
font-size: var(--text-xs);
font-weight: var(--weight-bold);
line-height: 1.25;
min-width: 64px;
height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
transition: background .15s;
}
.btn-dark:hover { background: #1F2937; }
.point-available {
margin-top: var(--space-2);
font-size: var(--text-xs);
color: var(--color-text-sub);
}
.point-available strong {
color: var(--color-accent);
font-weight: var(--weight-bold);
margin-left: 4px;
}
/* 결제수단 라디오 */
.pay-radio {
display: flex;
align-items: center;
gap: var(--space-3);
padding: 10px 0;
cursor: pointer;
}
.pay-radio input[type="radio"] { display: none; }
.pay-radio .radio-dot {
width: 22px; height: 22px;
border-radius: 50%;
border: 2px solid var(--color-border);
background: var(--color-bg);
position: relative;
flex-shrink: 0;
transition: border-color .15s;
}
.pay-radio input[type="radio"]:checked + .radio-dot {
border-color: var(--color-primary);
border-width: 4px;
}
.pay-radio input[type="radio"]:disabled ~ .radio-label { color: var(--color-text-muted); }
.pay-radio .radio-label {
font-size: var(--text-base);
font-weight: var(--weight-medium);
}
.pay-disabled-note {
margin-top: var(--space-2);
padding: var(--space-2) var(--space-3);
background: var(--color-primary-soft);
color: var(--color-primary);
border-radius: var(--radius-sm);
font-size: var(--text-xs);
}
/* ================================================
박스구매 화면 컴팩트 리비전 — 세로 높이 축소
================================================ */
/* 섹션 세로 패딩 축소 */
.detail-section { padding: var(--space-3) 0; }
/* (1) 박스 선택 — 세로 스택 유지하되 최대한 컴팩트 */
.box-select-row {
display: flex;
flex-direction: column;
gap: 6px;
}
.box-select-row .selected-box-card {
padding: 8px 10px;
grid-template-columns: 36px 1fr auto;
gap: var(--space-2);
}
.box-select-row .selected-box-card .sel-thumb {
width: 36px; height: 36px; font-size: 20px;
}
.box-select-row .selected-box-card .sel-name { font-size: var(--text-sm); }
.box-select-row .selected-box-card .sel-price { font-size: 11px; margin-top: 1px; }
.box-select-row .selected-box-card .sel-active-pill {
padding: 2px 8px;
font-size: 10px;
}
.box-select-row .prize-list-link {
margin-top: 0;
width: 100%;
padding: 8px 12px;
font-size: var(--text-xs);
white-space: nowrap;
gap: 4px;
}
.box-select-row .prize-list-link .chev-right { font-size: 15px; }
/* (2) 수량 선택 컴팩트 — 컨트롤 높이 36px 기준 */
.qty-preset { gap: 6px; margin-bottom: 8px; }
.qty-chip { padding: 8px 0; font-size: 13px; }
.qty-direct-row { padding: 6px 10px; }
.qty-direct-label { font-size: 13px; }
.qty-input-big { font-size: var(--text-base); }
.qty-max-hint { margin-top: 4px; font-size: 11px; }
/* (3) 포인트 사용 — 수량선택과 동일한 높이(36px)로 통일 */
.point-input-row { gap: 6px; }
.point-input {
height: 36px;
padding: 0 10px;
font-size: 13px;
}
.btn-dark {
height: 36px;
padding: 0 10px;
font-size: 11px;
min-width: 56px;
}
.point-available { margin-top: 4px; font-size: 11px; }
/* (4) 결제수단 인라인 + 우측 정렬 + 라디오 dot 살짝 축소 */
.detail-ctrl.pay-ctrl {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
justify-content: flex-end;
align-items: center;
padding-top: 4px;
}
.detail-ctrl.pay-ctrl .pay-radio { padding: 0; gap: var(--space-2); }
.detail-ctrl.pay-ctrl .pay-radio .radio-dot { width: 20px; height: 20px; }
.detail-ctrl.pay-ctrl .pay-radio input[type="radio"]:checked + .radio-dot { border-width: 5px; }
.detail-ctrl.pay-ctrl .pay-radio .radio-label { font-size: var(--text-sm); }
.detail-ctrl.pay-ctrl .pay-disabled-note {
flex-basis: 100%;
margin-top: 4px;
}
/* (5) 결제안내 아코디언 컴팩트 */
.detail-section .accordion { margin-bottom: 6px; }
.detail-section .accordion > summary {
padding: 10px var(--space-3);
font-size: var(--text-xs);
}
.detail-section .accordion .chev { width: 16px; height: 16px; }
.detail-section .accordion-body {
padding: 0 var(--space-3) 10px;
font-size: 11px;
line-height: 1.55;
}
/* 아코디언 */
.accordion {
background: var(--color-surface);
border-radius: var(--radius-md);
margin-bottom: var(--space-2);
}
.accordion > summary {
list-style: none;
padding: 14px var(--space-3);
display: flex;
align-items: center;
justify-content: space-between;
font-size: var(--text-sm);
color: var(--color-text-sub);
cursor: pointer;
}
.accordion > summary::-webkit-details-marker { display: none; }
.accordion .chev {
width: 18px; height: 18px;
color: var(--color-text-muted);
transition: transform .2s;
}
.accordion[open] .chev { transform: rotate(180deg); }
.accordion-body {
padding: 0 var(--space-3) var(--space-3);
font-size: var(--text-xs);
color: var(--color-text-sub);
line-height: 1.7;
}
/* 하단 결제 바 (고정) */
.pay-bar {
position: fixed;
left: 50%;
transform: translateX(-50%);
/* 박스구매 돌출 아이콘을 침범하지 않도록 protrude 만큼 더 위로 */
bottom: var(--bottom-bar-clear);
width: 100%;
max-width: var(--container-max);
background: var(--color-bg);
border-top: 1px solid var(--color-border);
padding: var(--space-3) var(--space-4) 0;
z-index: calc(var(--z-nav) - 1);
}
/* 결제바와 하단 탭 사이 투명 공백을 흰 배경으로 채움 — 뒤 콘텐츠가 비치지 않도록 */
.pay-bar::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
height: var(--bottom-bar-clear);
background: rgba(255,255,255,0.95);
pointer-events: none;
}
.pay-bar .agree-row {
display: flex;
align-items: center;
gap: var(--space-2);
padding-bottom: var(--space-2);
cursor: pointer;
}
.pay-bar .agree-row input[type="checkbox"] { display: none; }
.pay-bar .agree-check {
width: 20px; height: 20px;
border-radius: 50%;
background: var(--color-border);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background .15s;
position: relative;
}
.pay-bar .agree-check::after {
content: '';
width: 10px; height: 6px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg) translate(1px, -1px);
opacity: 0;
}
.pay-bar input[type="checkbox"]:checked + .agree-check {
background: var(--color-primary);
}
.pay-bar input[type="checkbox"]:checked + .agree-check::after {
opacity: 1;
border-color: #fff;
}
.pay-bar .agree-text {
font-size: var(--text-sm);
color: var(--color-text);
}
.pay-bar .total-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-2) 0;
border-top: 1px solid var(--color-border);
margin-bottom: var(--space-2);
}
.pay-bar .total-label {
font-size: var(--text-sm);
font-weight: var(--weight-bold);
}
.pay-bar .total-amount {
font-size: var(--text-lg);
font-weight: var(--weight-bold);
color: var(--color-accent);
}
.pay-bar .pay-btn {
width: 100%;
background: var(--gradient-point);
color: #fff;
border-radius: var(--radius-md);
padding: 16px;
font-size: var(--text-base);
font-weight: var(--weight-bold);
box-shadow: 0 6px 16px rgba(91,91,255,.28);
transition: filter .15s, transform .05s, box-shadow .15s;
}
.pay-bar .pay-btn:hover { filter: brightness(1.05); }
.pay-bar .pay-btn:active { transform: scale(0.99); }
/* 본문 하단에 결제바 높이만큼 여유 확보 */
body:has(.pay-bar) .app-main {
padding-bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 200px);
}
/* 성공 팝업 */
.success-sheet {
text-align: center;
padding: var(--space-6) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom));
max-width: 360px;
border-radius: var(--radius-lg);
}
@media (max-width: 600px) {
.success-sheet { max-width: 90%; margin: 0 auto; border-radius: var(--radius-lg); }
}
.success-sheet .success-icon {
font-size: 48px;
margin-bottom: var(--space-3);
}
.success-sheet .success-title {
font-size: var(--text-xl);
font-weight: var(--weight-bold);
margin-bottom: var(--space-3);
color: var(--color-text);
}
.success-sheet .success-desc {
font-size: var(--text-sm);
color: var(--color-text-sub);
margin-bottom: var(--space-5);
white-space: pre-line;
line-height: 1.6;
}
#success-modal .modal-sheet { align-self: center; }
#success-modal { align-items: center; }
/* =====================================================================
로그인 페이지 (login.html)
===================================================================== */
.auth-hero {
text-align: center;
padding: var(--space-6) var(--space-4) var(--space-5);
}
.auth-logo-mark {
font-size: 48px;
margin-bottom: var(--space-3);
filter: drop-shadow(0 6px 16px rgba(91,91,255,.25));
}
.auth-hero-title {
font-size: var(--text-xl);
font-weight: var(--weight-bold);
color: var(--color-text);
margin-bottom: 6px;
}
.auth-hero-sub {
font-size: var(--text-sm);
color: var(--color-text-sub);
}
.auth-form {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: 0 var(--space-2);
}
.auth-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.auth-field-label {
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--color-text-sub);
padding-left: 2px;
}
.auth-input {
width: 100%;
height: 54px;
padding: 0 16px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg);
font-size: var(--text-base);
font-weight: var(--weight-medium);
color: var(--color-text);
transition: border-color .15s, box-shadow .15s;
}
.auth-input::placeholder { color: var(--color-text-muted); font-weight: var(--weight-normal); }
.auth-input:focus {
outline: none;
border-color: #FFD93D;
box-shadow: 0 0 0 3px rgba(255,217,61,.25);
}
.auth-error {
margin-top: -4px;
padding: var(--space-2) var(--space-3);
background: #FFECEC;
color: var(--color-danger);
border-radius: var(--radius-sm);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
}
.auth-error[hidden] { display: none; }
.auth-submit {
width: 100%;
height: 54px;
margin-top: var(--space-2);
background: #FFD93D;
color: var(--color-text);
border-radius: var(--radius-md);
font-size: var(--text-base);
font-weight: var(--weight-bold);
transition: background .15s, transform .05s;
}
.auth-submit:hover { background: #FFCC00; }
.auth-submit:active { transform: scale(0.99); }
.auth-links {
margin-top: var(--space-4);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
font-size: var(--text-sm);
}
.auth-links a {
color: var(--color-text-sub);
text-decoration: none;
padding: 6px 4px;
transition: color .15s;
}
.auth-links a:hover {
color: var(--color-text);
text-decoration: underline;
}
.auth-links a.auth-link-back {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 2px;
font-weight: var(--weight-medium);
}
.auth-links a.auth-link-back:hover { color: var(--color-primary-hover); }
.auth-links-sep { color: var(--color-text-muted); }
.auth-mock-hint {
margin-top: var(--space-5);
padding: var(--space-3);
background: var(--color-primary-soft);
border-radius: var(--radius-md);
text-align: center;
font-size: var(--text-xs);
color: var(--color-text-sub);
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
}
.auth-mock-hint code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: var(--text-xs);
color: var(--color-primary);
font-weight: var(--weight-bold);
background: var(--color-bg);
padding: 2px 8px;
border-radius: var(--radius-sm);
}
/* =====================================================================
Auth 전체화면 레이아웃 (data-fullscreen: 하단 네비 숨김)
===================================================================== */
body[data-fullscreen="true"] .app-main {
/* 큰 화면에서는 스크롤 없이 한 화면에 맞도록. 정말 작은 뷰포트일 때만 자동 스크롤. */
/* iOS Safari 하단 URL 바가 보일 때도 링크가 가려지지 않도록 여유있게 확보 */
padding-bottom: calc(var(--space-8) + var(--safe-area-bottom));
min-height: calc(100dvh - var(--header-height));
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.auth-main {
display: flex;
flex-direction: column;
}
.auth-step {
display: flex;
flex-direction: column;
flex: 1;
min-height: auto;
animation: authStepIn .25s ease;
}
@keyframes authStepIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.auth-step-indicator {
display: inline-block;
margin: 0 auto var(--space-2);
padding: 3px 10px;
background: var(--color-primary-soft);
color: var(--color-primary);
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: var(--weight-bold);
letter-spacing: 1px;
}
.auth-step-actions {
margin-top: auto;
padding-top: var(--space-5);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
}
/* 핀패드 스텝: 키패드 블록을 하단에 정렬하고, 뷰포트 높이에 따라 유동적인 여백 */
.auth-step:has(#pin-root) {
padding-bottom: clamp(12px, 4vh, 32px);
}
.auth-step:has(#pin-root) .auth-hero {
/* 히어로 텍스트 아래 여백 */
padding-bottom: clamp(8px, 3vh, 28px);
}
.auth-step:has(#pin-root) #pin-root {
margin-top: auto;
width: 100%;
/* 히어로와 닷 사이 최소 간격 보장 */
padding-top: clamp(8px, 2vh, 20px);
}
.auth-step:has(#pin-root) .auth-step-actions {
margin-top: var(--space-3);
padding-top: 0;
}
.auth-ghost-link {
color: var(--color-text-sub);
font-size: var(--text-sm);
text-decoration: none;
padding: 8px 12px;
}
.auth-ghost-link:hover { color: var(--color-text); text-decoration: underline; }
/* 상단 보조 링크 (예: ← 번호 다시 입력) */
.auth-top-link {
text-align: center;
margin: var(--space-1) 0 var(--space-2);
}
.auth-top-link a {
display: inline-block;
color: var(--color-text-sub);
font-size: var(--text-sm);
text-decoration: none;
padding: 8px 14px;
border-radius: var(--radius-full);
transition: background .15s, color .15s;
}
.auth-top-link a:hover {
color: var(--color-primary);
background: var(--color-primary-soft);
text-decoration: none;
}
/* =====================================================================
PIN 패드 (6자리 숫자) — 온스크린 키패드 포함
===================================================================== */
.pin-pad-wrap {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.pin-pad {
position: relative;
width: 100%;
max-width: 320px;
/* 히어로-닷-키패드 간 여백을 뷰포트 높이에 따라 유동 조절 */
margin: clamp(12px, 3.5vh, 32px) auto clamp(4px, 1.5vh, 16px);
padding: 0;
}
.pin-pad .pin-dots {
display: flex;
gap: 18px;
justify-content: center;
align-items: center;
height: 40px;
}
.pin-pad .pin-dot {
width: 18px;
height: 18px;
border-radius: 50%;
background: transparent;
border: 2px solid var(--color-border);
transition: border-color .15s, background .15s;
}
.pin-pad .pin-dot.filled {
border-color: var(--color-primary);
background: var(--color-primary);
animation: pinFill .28s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pinFill {
0% { transform: scale(.4); opacity: 0; }
60% { transform: scale(1.35); }
100% { transform: scale(1); opacity: 1; }
}
.pin-pad.shake { animation: pinShake .4s ease; }
.pin-pad.shake .pin-dot.filled {
border-color: var(--color-danger);
background: var(--color-danger);
}
@keyframes pinShake {
0%,100% { transform: translateX(0); }
20% { transform: translateX(-10px); }
40% { transform: translateX(10px); }
60% { transform: translateX(-7px); }
80% { transform: translateX(7px); }
}
/* 온스크린 숫자 키패드 */
.pin-keypad {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(8px, 1.5vh, 12px);
width: 100%;
max-width: 340px;
margin: clamp(12px, 3vh, 28px) auto 0;
}
.pin-keypad .kp-btn {
aspect-ratio: 16 / 9;
min-height: 52px;
max-height: 72px;
font-size: 26px;
font-weight: var(--weight-medium);
background: var(--color-surface);
border-radius: var(--radius-md);
color: var(--color-text);
transition: background .1s, transform .05s;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.pin-keypad .kp-btn:hover { background: #ECECF5; }
.pin-keypad .kp-btn:active { transform: scale(0.96); background: #DEDEEA; }
.pin-keypad .kp-blank {
background: transparent;
cursor: default;
pointer-events: none;
}
.pin-keypad .kp-back {
font-size: 22px;
color: var(--color-text-sub);
}
.pin-keypad .kp-brand {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 26px;
color: var(--color-text-muted);
background: transparent;
cursor: default;
pointer-events: none;
user-select: none;
}
.auth-pin-hint {
text-align: center;
font-size: var(--text-sm);
color: var(--color-text-sub);
margin-top: var(--space-2);
min-height: 20px;
transition: color .15s;
}
.auth-pin-hint.error { color: var(--color-danger); font-weight: var(--weight-medium); }
/* =====================================================================
가입 완료 화면
===================================================================== */
.auth-complete {
align-items: center;
text-align: center;
padding-top: var(--space-7);
}
.auth-complete-icon {
font-size: 72px;
margin-bottom: var(--space-4);
animation: giftBounce 1.2s ease infinite;
}
@keyframes giftBounce {
0%,100% { transform: translateY(0) rotate(-3deg); }
50% { transform: translateY(-8px) rotate(3deg); }
}
.auth-complete-title {
font-size: 26px;
font-weight: var(--weight-bold);
margin-bottom: var(--space-3);
background: linear-gradient(120deg, #5b5bff 0%, #b65bff 50%, #ff6b6b 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.auth-complete-sub {
font-size: var(--text-base);
color: var(--color-text-sub);
line-height: 1.6;
margin-bottom: var(--space-6);
}
.auth-complete-gift {
display: flex;
align-items: center;
gap: var(--space-2);
background: var(--color-primary-soft);
color: var(--color-primary);
padding: 12px 18px;
border-radius: var(--radius-full);
font-size: var(--text-sm);
margin-bottom: var(--space-6);
}
.auth-complete-gift .gift-emoji { font-size: 20px; }
.auth-complete-gift .gift-text b { font-weight: var(--weight-bold); color: var(--color-accent); margin: 0 2px; }
/* 혜택 아래 박스 구경하러 가기 (밑줄 텍스트 링크) */
.auth-complete-browse {
display: inline-block;
margin-top: var(--space-2);
color: var(--color-primary);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
text-decoration: underline;
text-underline-offset: 3px;
padding: 6px 4px;
}
.auth-complete-browse:hover {
color: var(--color-primary-hover);
text-decoration: underline;
}
/* complete 화면에서 완료 버튼은 화면 너비를 꽉 채우되 좌우 여백 유지 */
.auth-complete .auth-step-actions {
width: 100%;
padding-left: var(--space-2);
padding-right: var(--space-2);
}
.auth-complete .auth-submit-link {
width: 100%;
max-width: 420px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* =====================================================================
회원가입 / 프로필 수정 공통
===================================================================== */
.auth-hero-compact {
padding: clamp(12px, 3vh, 24px) var(--space-4) clamp(8px, 2vh, 16px);
}
.auth-submit-link {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
width: 100%;
margin: var(--space-3) auto 0;
}
.auth-submit-link:hover { text-decoration: none; }
.auth-form-section-label {
margin-top: var(--space-3);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text-sub);
padding: 0 2px;
}
/* 안내 카드 (signup 인트로) */
.signup-notice {
margin: var(--space-4) var(--space-2) var(--space-5);
padding: var(--space-4);
background: var(--color-surface);
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
}
.signup-notice-title {
font-size: var(--text-sm);
font-weight: var(--weight-bold);
color: var(--color-text);
margin-bottom: var(--space-2);
}
.signup-notice-list {
list-style: disc;
padding-left: 18px;
font-size: var(--text-xs);
color: var(--color-text-sub);
line-height: 1.7;
}
.signup-notice-list li { margin-bottom: 2px; }
/* 본인인증 결과 카드 (공통 — signup, profile-edit) */
.verified-card {
margin: 0 var(--space-2);
padding: var(--space-4);
background: #F0FAF3;
border: 1px solid #A7E3BC;
border-radius: var(--radius-md);
}
.verified-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: #10B981;
color: #fff;
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: var(--weight-bold);
margin-bottom: var(--space-3);
}
.verified-grid {
display: flex;
flex-direction: column;
gap: 0;
}
.verified-row {
display: grid;
grid-template-columns: 72px 1fr;
align-items: center;
padding: 8px 0;
border-bottom: 1px dashed rgba(16, 185, 129, .25);
font-size: var(--text-sm);
}
.verified-row:last-child { border-bottom: none; }
.verified-row .k { color: var(--color-text-sub); font-size: var(--text-xs); }
.verified-row .v {
color: var(--color-text);
font-weight: var(--weight-medium);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.verified-row .ci-value {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: var(--text-xs);
color: var(--color-text-sub);
letter-spacing: 0.5px;
}
/* =====================================================================
프로필 수정 전용
===================================================================== */
.profile-section {
padding: var(--space-4) var(--space-2);
border-bottom: 1px solid var(--color-border);
}
.profile-section:last-of-type { border-bottom: none; }
.profile-section-title {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--text-base);
font-weight: var(--weight-bold);
color: var(--color-text);
margin-bottom: 4px;
}
.profile-section-desc {
font-size: var(--text-xs);
color: var(--color-text-sub);
margin-bottom: var(--space-3);
}
.profile-locked-tag {
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--color-text-muted);
background: var(--color-surface);
padding: 2px 8px;
border-radius: var(--radius-full);
}
.profile-nick-row {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-2);
align-items: center;
}
.profile-nick-row .btn { height: 54px; padding: 0 14px; }
.profile-ci-code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: var(--text-xs);
color: var(--color-primary);
background: var(--color-primary-soft);
padding: 3px 8px;
border-radius: var(--radius-sm);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
max-width: 100%;
}
/* =====================================================================
이용약관 / 개인정보처리방침 공통 레이아웃
===================================================================== */
.legal-main {
padding: 0;
}
.legal-doc {
padding: var(--space-4) var(--space-4) var(--space-6);
max-width: 680px;
margin: 0 auto;
color: var(--color-text);
}
.legal-doc .legal-head {
padding: var(--space-3) 0 var(--space-4);
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--space-4);
}
.legal-doc .legal-title {
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
margin-bottom: var(--space-1);
}
.legal-doc .legal-meta {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.legal-doc .legal-section {
margin-bottom: var(--space-5);
}
.legal-doc h2 {
font-size: var(--text-base);
font-weight: var(--weight-bold);
color: var(--color-text);
margin: 0 0 var(--space-2);
}
.legal-doc p {
font-size: var(--text-sm);
line-height: 1.7;
color: var(--color-text-sub);
margin-bottom: var(--space-2);
}
.legal-doc ul, .legal-doc ol {
padding-left: 20px;
font-size: var(--text-sm);
line-height: 1.7;
color: var(--color-text-sub);
}
.legal-doc ul { list-style: disc; }
.legal-doc ol { list-style: decimal; }
.legal-doc li { margin-bottom: 4px; }
.legal-doc strong { color: var(--color-text); font-weight: var(--weight-bold); }
.legal-doc .legal-foot {
margin-top: var(--space-6);
padding-top: var(--space-4);
border-top: 1px dashed var(--color-border);
}
.legal-doc .legal-foot p {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
/* =====================================================================
회원가입 약관 동의 체크박스
===================================================================== */
.agree-list {
margin: var(--space-3) var(--space-2);
display: flex;
flex-direction: column;
gap: 8px;
}
/* 회원가입 intro 하단 묶음: 약관 동의 + 본인인증 시작 + 로그인 링크 */
.auth-step-actions.signup-bottom {
align-items: stretch;
padding-top: var(--space-4);
}
.auth-step-actions.signup-bottom .agree-list {
margin: 0 0 var(--space-2);
width: 100%;
align-self: stretch;
align-items: flex-start;
}
.auth-step-actions.signup-bottom .agree-list .agree-line {
align-self: flex-start;
justify-content: flex-start;
width: 100%;
padding-left: 0;
}
.auth-step-actions.signup-bottom .agree-list .agree-text {
text-align: left;
}
.auth-step-actions.signup-bottom .auth-links {
justify-content: center;
}
.agree-line {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 4px;
cursor: pointer;
user-select: none;
}
.agree-line input[type="checkbox"] { display: none; }
.agree-line .agree-check {
width: 22px; height: 22px;
border-radius: 50%;
background: var(--color-surface);
border: 1.5px solid var(--color-border);
flex-shrink: 0;
position: relative;
transition: background .15s, border-color .15s;
}
.agree-line .agree-check::after {
content: '';
position: absolute;
left: 50%; top: 50%;
width: 11px; height: 6px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: translate(-50%, -65%) rotate(-45deg);
opacity: 0;
}
.agree-line input[type="checkbox"]:checked + .agree-check {
background: var(--color-primary);
border-color: var(--color-primary);
}
.agree-line input[type="checkbox"]:checked + .agree-check::after { opacity: 1; }
.agree-line .agree-text {
font-size: var(--text-sm);
color: var(--color-text);
display: inline-flex;
gap: 4px;
flex-wrap: wrap;
align-items: baseline;
}
.agree-line .agree-doc-link {
color: var(--color-text-sub);
text-decoration: underline;
text-underline-offset: 2px;
font-weight: var(--weight-medium);
}
.agree-line .agree-doc-link:hover { color: var(--color-primary); }
.agree-line .agree-required {
font-size: var(--text-xs);
color: var(--color-accent);
font-weight: var(--weight-medium);
}
/* 비활성 상태 CTA (동의 전) */
.auth-submit-link.is-disabled {
background: var(--color-surface);
color: var(--color-text-muted);
cursor: not-allowed;
box-shadow: none;
}
.auth-submit-link.is-disabled:hover { background: var(--color-surface); }
/* =====================================================================
비밀번호 재설정 — 휴대폰 번호 변경 안내 카드
===================================================================== */
.phone-change-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-4);
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-2);
max-width: 420px;
margin: 0 auto;
width: 100%;
}
.phone-change-card .pc-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
border-radius: var(--radius-sm);
background: var(--color-bg);
}
.phone-change-card .pc-old { opacity: .7; }
.phone-change-card .pc-old .pc-value { text-decoration: line-through; color: var(--color-text-muted); }
.phone-change-card .pc-new { box-shadow: 0 0 0 2px var(--color-primary); }
.phone-change-card .pc-new .pc-value { color: var(--color-primary); font-weight: var(--weight-bold); }
.phone-change-card .pc-label { font-size: var(--text-xs); color: var(--color-text-sub); }
.phone-change-card .pc-value { font-size: var(--text-base); font-weight: var(--weight-medium); }
.phone-change-card .pc-arrow {
text-align: center;
font-size: 20px;
color: var(--color-text-muted);
margin: -2px 0;
}
/* =====================================================================
프로필 수정 — 인라인 편집 / 핸드폰 변경 링크
===================================================================== */
/* 닉네임 보기 상태 */
.nick-view-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: 12px 14px;
background: var(--color-surface);
border-radius: var(--radius-md);
}
.nick-view-row .nick-current {
font-size: var(--text-base);
font-weight: var(--weight-bold);
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.nick-change-link {
color: var(--color-primary);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
text-decoration: underline;
text-underline-offset: 2px;
padding: 4px 8px;
background: transparent;
flex-shrink: 0;
}
.nick-change-link:hover { color: var(--color-primary-hover); }
/* 닉네임 편집 상태 */
.nick-edit-row {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
gap: var(--space-2);
align-items: center;
}
.nick-input {
grid-column: 1;
grid-row: 1;
height: 48px;
}
.btn-inline-random {
grid-column: 2;
grid-row: 1;
width: 48px;
height: 48px;
border-radius: var(--radius-md);
background: var(--color-surface);
font-size: 20px;
flex-shrink: 0;
}
.btn-inline-random:hover { background: #ECECF5; }
.nick-edit-actions {
grid-column: 1 / -1;
grid-row: 2;
display: grid;
grid-template-columns: 1fr 2fr;
gap: var(--space-2);
}
.nick-edit-actions .btn { height: 44px; padding: 0 16px; }
.nick-edit-actions .nick-cancel { background: var(--color-surface); color: var(--color-text-sub); }
.nick-edit-actions .nick-cancel:hover { background: #ECECF5; color: var(--color-text); }
/* 휴대폰 번호 변경 링크 */
.phone-value-wrap {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.phone-change-link {
color: var(--color-primary);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
text-decoration: underline;
text-underline-offset: 2px;
padding: 2px 6px;
}
.phone-change-link:hover { color: var(--color-primary-hover); }
/* 프로필 이미지 편집 */
.avatar-editor {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-2) 0;
}
.avatar-preview {
width: 96px; height: 96px;
border-radius: var(--radius-full);
background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
color: #fff;
font-size: 40px;
font-weight: var(--weight-bold);
display: grid; place-content: center;
text-transform: uppercase;
overflow: hidden;
flex-shrink: 0;
box-shadow: var(--shadow-md);
}
.avatar-preview.avatar-preset {
background: var(--color-surface);
font-size: 54px;
}
.avatar-preview.avatar-image { background: var(--color-surface); }
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-editor-actions {
display: flex;
flex-direction: column;
gap: var(--space-2);
min-width: 0;
flex: 1;
}
.avatar-upload-btn,
.avatar-default-btn {
text-align: center;
font-size: var(--text-sm);
padding: 10px 14px;
cursor: pointer;
justify-content: center;
}
.avatar-default-btn {
color: var(--color-text-sub);
font-weight: var(--weight-medium);
background: transparent;
}
.avatar-default-btn:hover { color: var(--color-text); background: var(--color-surface); }
.avatar-preset-label {
margin-top: var(--space-3);
margin-bottom: var(--space-2);
font-size: var(--text-xs);
color: var(--color-text-sub);
font-weight: var(--weight-medium);
}
.avatar-preset-row {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: var(--space-2);
}
.avatar-preset-chip {
aspect-ratio: 1 / 1;
border-radius: var(--radius-full);
background: var(--color-surface);
font-size: 26px;
display: flex;
align-items: center;
justify-content: center;
transition: transform .1s ease, box-shadow .15s ease, background .15s ease;
border: 2px solid transparent;
}
.avatar-preset-chip:hover {
background: var(--color-primary-soft);
transform: translateY(-1px);
}
.avatar-preset-chip.active {
border-color: var(--color-primary);
background: var(--color-primary-soft);
box-shadow: 0 0 0 3px rgba(91,91,255,.15);
}
.profile-actions {
padding: var(--space-4) var(--space-2) var(--space-6);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
}
.profile-actions .auth-submit { margin-top: 0; }
.profile-cancel {
color: var(--color-text-sub);
font-size: var(--text-sm);
text-decoration: none;
padding: 8px 16px;
}
.profile-cancel:hover { color: var(--color-text); text-decoration: underline; }
/* ========== 배송내역 리스트 (inventory.html, tab=shipping) ========== */
.ship-order-root {
padding: var(--space-3) var(--space-4) var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.ship-order-count {
font-size: var(--text-sm);
color: var(--color-text-sub);
padding: 0 var(--space-1);
}
.ship-order-count b { color: #E53935; font-weight: var(--weight-bold); margin-left: 2px; }
.ship-order-list {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.ship-order-card {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.ship-order-head { display: flex; align-items: center; }
.ship-status-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 12px;
border-radius: 6px;
font-size: var(--text-xs);
font-weight: var(--weight-bold);
line-height: 1;
color: #fff;
}
.ship-status-badge.tone-ok { background: #22C55E; }
.ship-status-badge.tone-wait { background: #1F2937; }
.ship-status-badge.tone-done { background: #6366F1; }
.ship-status-badge.tone-err { background: #9CA3AF; }
.ship-order-top {
display: flex;
gap: var(--space-3);
align-items: flex-start;
}
.ship-order-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ship-order-desc {
font-size: var(--text-sm);
color: var(--color-text-sub);
line-height: 1.5;
word-break: keep-all;
}
.ship-order-no {
font-size: var(--text-xs);
color: var(--color-text-sub);
word-break: break-all;
}
.ship-order-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
flex-shrink: 0;
}
.ship-order-date {
font-size: var(--text-xs);
color: var(--color-text-sub);
}
.ship-order-detail-btn {
display: inline-block;
padding: 6px 12px;
border: 1px solid var(--color-border);
border-radius: 6px;
background: var(--color-bg);
color: var(--color-text);
font-size: var(--text-xs);
text-decoration: none;
font-weight: var(--weight-medium);
}
.ship-order-items {
display: flex;
flex-direction: column;
border-top: 1px solid var(--color-border);
padding-top: var(--space-3);
gap: var(--space-3);
}
.ship-order-item {
display: flex;
gap: var(--space-3);
align-items: flex-start;
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--color-border);
}
.ship-order-item:last-child { border-bottom: 0; padding-bottom: 0; }
.ship-order-thumb {
width: 64px;
height: 64px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
flex-shrink: 0;
}
.ship-order-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ship-order-item-brand {
font-size: var(--text-xs);
color: var(--color-text-sub);
}
.ship-order-item-name {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text);
line-height: 1.4;
word-break: keep-all;
}
.ship-order-item-price {
font-size: var(--text-sm);
color: var(--color-text-sub);
margin-top: 2px;
}
.ship-order-tracking {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 8px;
font-size: var(--text-sm);
color: var(--color-text);
}
.ship-order-tracking .courier { color: var(--color-text-sub); }
.ship-order-tracking .divider { color: var(--color-border); }
.ship-order-tracking .tracking { font-variant-numeric: tabular-nums; color: var(--color-text); }
.ship-order-copy-btn {
padding: 4px 10px;
border: 1px solid var(--color-border);
border-radius: 6px;
background: var(--color-bg);
font-size: var(--text-xs);
color: var(--color-text);
cursor: pointer;
margin-left: auto;
}
/* ========== 배송 상세 페이지 (shipping-detail.html) ========== */
.ship-detail-main {
background: var(--color-surface);
/* 좌우 16px 통일 + 하단 nav/protrude 까지 여유 */
padding: var(--space-3) var(--space-4) calc(var(--bottom-bar-clear) + var(--space-6));
display: flex;
flex-direction: column;
gap: var(--space-3);
}
/* 모든 분할 영역(상태/주문상품/게이지/결제정보/배송정보)이 동일한 카드 스타일.
좌우 패딩은 카드 안쪽에서 var(--space-4) 로 통일 → 화면 가장자리에서 같은 인셋. */
.ship-detail-sec,
.ship-detail-status {
background: var(--color-bg);
border-radius: var(--radius-md);
padding: var(--space-4);
display: flex;
flex-direction: column;
gap: 10px;
}
.ship-detail-status-top {
display: flex;
justify-content: space-between;
align-items: center;
}
.ship-detail-status-date {
font-size: var(--text-xs);
color: var(--color-text-sub);
}
.ship-detail-status-desc {
font-size: var(--text-sm);
color: var(--color-text);
line-height: 1.5;
word-break: keep-all;
}
.ship-detail-status-no {
font-size: var(--text-xs);
color: var(--color-text-sub);
word-break: break-all;
}
.ship-detail-cancel-btn {
margin-top: 6px;
padding: 12px;
border: 1px solid #E53935;
background: var(--color-bg);
color: #E53935;
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: var(--weight-bold);
cursor: pointer;
}
.ship-detail-cancel-btn:hover { background: rgba(229,57,53,.06); }
.ship-detail-items {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.ship-detail-item {
display: flex;
gap: var(--space-3);
align-items: flex-start;
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--color-border);
}
.ship-detail-item:last-child { border-bottom: 0; padding-bottom: 0; }
.ship-detail-thumb {
width: 72px;
height: 72px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 34px;
flex-shrink: 0;
}
.ship-detail-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ship-detail-item-brand { font-size: var(--text-xs); color: var(--color-text-sub); }
.ship-detail-item-name { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); line-height: 1.4; word-break: keep-all; }
.ship-detail-item-price { font-size: var(--text-sm); color: var(--color-text-sub); margin-top: 2px; }
.ship-detail-gauge-sec { padding-top: var(--space-2); }
.ship-detail-gauge-top {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 10px;
}
.ship-detail-gauge-title {
font-size: var(--text-base);
font-weight: var(--weight-bold);
color: var(--color-text);
}
.ship-detail-gauge-num { color: #E53935; font-weight: var(--weight-bold); margin-left: 6px; }
.ship-detail-gauge-bar {
height: 6px;
background: var(--color-surface);
border-radius: 999px;
overflow: hidden;
}
.ship-detail-gauge-fill {
height: 100%;
background: #E53935;
transition: width .4s ease;
}
.ship-detail-kv-card {
/* 외곽 .ship-detail-sec 가 이미 카드이므로 내부는 단순 그리드 */
display: flex;
flex-direction: column;
gap: 10px;
}
.ship-detail-kv {
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--text-sm);
}
.ship-detail-kv .k { color: var(--color-text-sub); }
.ship-detail-kv .v { color: var(--color-text); font-weight: var(--weight-medium); }
.ship-detail-kv .v.is-strong { font-weight: var(--weight-bold); }
.ship-detail-addr-card {
display: flex;
flex-direction: column;
gap: 8px;
}
.ship-detail-addr-line {
font-size: var(--text-sm);
color: var(--color-text);
line-height: 1.5;
word-break: keep-all;
}
.ship-detail-addr-note { color: var(--color-text-sub); }
.ship-detail-tracking {
margin-top: var(--space-3);
display: flex;
align-items: center;
gap: 12px;
padding: var(--space-3);
background: var(--color-surface);
border-radius: var(--radius-md);
}
.ship-detail-tracking .k { font-size: var(--text-sm); color: var(--color-text-sub); }
.ship-detail-tracking .v { font-size: var(--text-sm); color: var(--color-text); font-variant-numeric: tabular-nums; word-break: break-all; flex: 1; min-width: 0; }
.ship-detail-copy {
padding: 6px 12px;
border: 1px solid var(--color-border);
border-radius: 6px;
background: var(--color-bg);
font-size: var(--text-xs);
color: var(--color-text);
cursor: pointer;
flex-shrink: 0;
}
/* 배송 취소 확인 모달 */
.ship-cancel-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.5);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
z-index: 200;
opacity: 0;
transition: opacity .2s ease;
}
.ship-cancel-overlay.is-on { opacity: 1; }
.ship-cancel-sheet {
background: var(--color-bg);
border-radius: var(--radius-lg);
padding: var(--space-5) var(--space-4) var(--space-4);
width: 100%;
max-width: 380px;
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
text-align: center;
transform: scale(.9);
transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.ship-cancel-overlay.is-on .ship-cancel-sheet { transform: scale(1); }
.ship-cancel-icon { font-size: 44px; line-height: 1; }
.ship-cancel-title { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-text); }
.ship-cancel-desc {
font-size: var(--text-sm);
color: var(--color-text-sub);
line-height: 1.5;
word-break: keep-all;
}
.ship-cancel-meta {
font-size: var(--text-xs);
color: var(--color-text-sub);
padding: 8px 12px;
background: var(--color-surface);
border-radius: var(--radius-sm);
word-break: break-all;
}
.ship-cancel-actions {
display: flex;
gap: var(--space-2);
width: 100%;
margin-top: var(--space-2);
}
.ship-cancel-actions .btn { flex: 1; }
/* ========== 상품 상세 페이지 (product-detail.html) ========== */
.pd-main {
/* 하단 고정 구매바(약 76px) 위로 충분히 여백 — bottom-bar-clear + bar + buffer */
padding: 0 0 calc(var(--bottom-bar-clear) + 96px);
}
.pd-hero {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
max-height: 420px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.pd-hero-emoji {
font-size: 160px;
line-height: 1;
filter: drop-shadow(0 6px 18px rgba(0,0,0,.12));
}
.pd-hero-badge {
position: absolute;
top: 16px;
left: 16px;
padding: 6px 12px;
background: #1F2937;
color: #fff;
font-size: var(--text-xs);
font-weight: var(--weight-bold);
border-radius: 6px;
}
.pd-title-sec {
padding: var(--space-4);
border-bottom: 8px solid var(--color-surface);
display: flex;
flex-direction: column;
gap: 6px;
}
.pd-brand {
display: inline-block;
padding: 4px 10px;
margin-bottom: 2px;
font-size: var(--text-xs);
font-weight: var(--weight-bold);
color: var(--color-text-sub);
background: var(--color-surface);
border-radius: 999px;
line-height: 1.2;
align-self: flex-start;
}
/* '쿠팡 독점' / '컬리 독점' 같은 독점 브랜드는 살짝 강조 */
.pd-brand[data-exclusive="true"] {
background: #FFF3E0;
color: #E65100;
border: 1px solid #FFB74D;
}
.pd-name {
font-size: var(--text-lg);
font-weight: var(--weight-bold);
color: var(--color-text);
line-height: 1.4;
word-break: keep-all;
margin: 0;
}
.pd-price-block {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 8px;
}
.pd-price-row {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
}
.pd-list-price {
font-size: var(--text-sm);
color: var(--color-text-sub);
text-decoration: line-through;
}
.pd-price-main { align-items: center; }
.pd-discount {
font-size: var(--text-xl);
font-weight: var(--weight-bold);
color: #E53935;
}
.pd-sale-price {
font-size: var(--text-xl);
font-weight: var(--weight-bold);
color: var(--color-text);
}
.pd-price-hint {
font-size: var(--text-xs);
color: var(--color-text-sub);
}
/* 상품 상세 — 배송게이지 표시줄 */
.pd-gauge-line {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
flex-wrap: wrap;
}
.pd-gauge-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: var(--radius-full);
background: #FFF7D6;
border: 1px solid #F4D98A;
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: #8B6B00;
white-space: nowrap;
}
.pd-gauge-chip b {
color: #B77800;
font-weight: var(--weight-bold);
margin-left: 2px;
}
.pd-sec {
padding: var(--space-4);
border-bottom: 8px solid var(--color-surface);
}
.pd-sec:last-of-type { border-bottom: 0; }
.pd-sec-title {
font-size: var(--text-base);
font-weight: var(--weight-bold);
color: var(--color-text);
margin: 0 0 var(--space-3);
}
.pd-boxes-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.pd-box-chip {
display: inline-flex;
align-items: center;
padding: 6px 12px;
border: 1px solid var(--color-border);
border-radius: 8px;
background: var(--color-bg);
font-size: var(--text-sm);
color: var(--color-text);
text-decoration: none;
}
.pd-box-chip:hover { background: var(--color-surface); }
.pd-desc-sec { padding-bottom: var(--space-6); }
.pd-desc-text { margin-bottom: var(--space-4); }
.pd-desc-heading {
font-size: var(--text-base);
font-weight: var(--weight-bold);
color: var(--color-text);
margin: 0 0 6px;
}
.pd-desc-body {
font-size: var(--text-sm);
line-height: 1.6;
color: var(--color-text);
word-break: keep-all;
margin: 0;
}
.pd-desc-figure {
margin: 0 0 var(--space-4);
display: flex;
flex-direction: column;
gap: 6px;
}
.pd-desc-img {
aspect-ratio: 4 / 3;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.pd-desc-img-emoji {
font-size: 88px;
line-height: 1;
filter: drop-shadow(0 4px 12px rgba(0,0,0,.08));
}
.pd-desc-caption {
font-size: var(--text-xs);
color: var(--color-text-sub);
text-align: center;
}
/* 하단 고정 구매 바 */
.pd-bottom-bar {
position: fixed;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: var(--container-max);
/* 박스구매 돌출 아이콘을 침범하지 않도록 nav + protrude 만큼 위로 */
bottom: var(--bottom-bar-clear);
background: var(--color-bg);
border-top: 1px solid var(--color-border);
padding: 10px var(--space-4);
display: flex;
align-items: center;
gap: var(--space-3);
z-index: 50;
box-shadow: 0 -2px 12px rgba(0,0,0,.04);
}
/* 구매바와 하단 탭 사이 투명 공백을 흰 배경으로 채움 — 뒤 콘텐츠가 비치지 않도록 */
.pd-bottom-bar::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
height: var(--bottom-bar-clear);
background: var(--color-bg);
pointer-events: none;
}
.pd-bottom-price { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.pd-bottom-price-label { font-size: var(--text-xs); color: var(--color-text-sub); }
.pd-bottom-price-v { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-text); }
.pd-buy-btn {
flex: 1;
padding: 14px;
font-size: var(--text-base);
font-weight: var(--weight-bold);
}
.pd-buy-btn:disabled { opacity: .4; cursor: not-allowed; }
/* 상품 상세 — 듀얼 CTA 하단바 (박스로 뽑기 / 마켓 구매) */
.pd-bottom-bar-cta {
gap: var(--space-2);
}
.pd-cta {
flex: 1;
padding: 14px;
font-size: var(--text-base);
font-weight: var(--weight-bold);
border-radius: var(--radius-md);
border: 0;
cursor: pointer;
transition: filter .15s, background .15s, color .15s;
line-height: 1.1;
}
.pd-cta-primary {
background: var(--gradient-point);
color: #fff;
box-shadow: 0 6px 16px rgba(91,91,255,.28);
}
.pd-cta-primary:hover { filter: brightness(1.05); }
.pd-cta-primary:disabled {
background: var(--color-border);
color: var(--color-text-muted);
cursor: not-allowed;
box-shadow: none;
}
.pd-cta-secondary {
background: var(--color-surface);
color: var(--color-text);
border: 1px solid var(--color-border);
}
.pd-cta-secondary:hover { background: #ECECF5; }
/* 구매 확인 모달 */
.pd-buy-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.5);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
z-index: 200;
opacity: 0;
transition: opacity .2s ease;
}
.pd-buy-overlay.is-on { opacity: 1; }
.pd-buy-sheet {
background: var(--color-bg);
border-radius: var(--radius-lg);
padding: var(--space-5) var(--space-4) var(--space-4);
width: 100%;
max-width: 380px;
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
text-align: center;
transform: scale(.9);
transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.pd-buy-overlay.is-on .pd-buy-sheet { transform: scale(1); }
.pd-buy-thumb {
width: 88px; height: 88px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 44px;
}
.pd-buy-title {
font-size: var(--text-base);
font-weight: var(--weight-bold);
word-break: keep-all;
}
.pd-buy-price {
font-size: var(--text-xl);
font-weight: var(--weight-bold);
color: var(--color-accent);
}
.pd-buy-desc {
font-size: var(--text-xs);
color: var(--color-text-sub);
line-height: 1.5;
}
.pd-buy-actions {
display: flex;
gap: var(--space-2);
width: 100%;
margin-top: var(--space-2);
}
.pd-buy-actions .btn { flex: 1; }
/* ========================================================================== */
/* 마이페이지 > 포인트 내역 (point-history.html) */
/* ========================================================================== */
.ph-main {
background: var(--color-surface);
/* 하단 탭(박스구매 돌출 포함)에 가려지지 않도록 여유 확보 */
padding: var(--space-4) var(--space-4) calc(var(--bottom-bar-clear) + var(--space-4));
display: flex;
flex-direction: column;
gap: var(--space-4);
}
/* 상단 포인트 카드 */
.ph-balance-card {
background: var(--color-bg);
border-radius: var(--radius-lg);
padding: var(--space-4);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: 4px;
}
.ph-balance-label {
font-size: var(--text-sm);
color: var(--color-text-sub);
}
.ph-balance-value {
font-size: 28px;
font-weight: var(--weight-bold);
color: var(--color-primary);
}
.ph-balance-hint {
margin-top: 6px;
font-size: var(--text-xs);
color: var(--color-text-sub);
line-height: 1.5;
}
.ph-balance-used {
margin-top: 4px;
font-size: var(--text-xs);
color: var(--color-text-muted);
font-weight: var(--weight-medium);
font-variant-numeric: tabular-nums;
}
.ph-balance-used.is-max { color: #E53935; }
/* 리스트 컨테이너 */
.ph-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.ph-date-header {
font-size: var(--text-sm);
font-weight: var(--weight-bold);
color: var(--color-text-sub);
padding: 4px 4px 0;
}
.ph-date-body {
display: flex;
flex-direction: column;
gap: 8px;
background: var(--color-bg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 4px;
}
/* 엔트리 — 좌(아이콘) / 본문 / 우(시간·금액·버튼 스택) 3열 그리드. 우측 열은 본문과 평행하게 정렬. */
.ph-entry {
display: grid;
grid-template-columns: 40px 1fr auto;
column-gap: 12px;
align-items: start;
padding: 14px 12px;
background: transparent;
border-radius: var(--radius-md);
}
.ph-entry + .ph-entry {
border-top: 1px solid var(--color-border);
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.ph-entry.is-canceled .ph-entry-title,
.ph-entry.is-canceled .ph-entry-detail,
.ph-entry.is-canceled .ph-entry-amount {
text-decoration: line-through;
color: var(--color-text-muted);
}
.ph-entry-icon {
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
font-size: 22px;
background: var(--color-surface);
border-radius: 50%;
}
/* 좌측 본문: 타이틀 / 상세 / 잔여시간 — 행 간격을 우측 열과 동일하게 */
.ph-entry-body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 2px;
}
.ph-entry-title {
font-size: var(--text-sm);
font-weight: var(--weight-bold);
color: var(--color-text);
line-height: 1.3;
}
.ph-entry-detail {
font-size: var(--text-xs);
color: var(--color-text-sub);
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ph-entry-remain {
font-size: var(--text-xs);
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
line-height: 1;
}
/* 우측 열: 시간 / 금액 / 환급취소 버튼. 행 높이를 본문과 시각적으로 정렬. */
.ph-entry-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
padding-top: 2px;
}
.ph-entry-time {
font-size: var(--text-xs);
color: var(--color-text-muted);
line-height: 1.3;
}
.ph-entry-amount {
font-size: var(--text-base);
font-weight: var(--weight-bold);
font-variant-numeric: tabular-nums;
white-space: nowrap;
line-height: 1.2;
}
.ph-entry.type-earn .ph-entry-amount { color: #2E7D32; }
.ph-entry.type-spend .ph-entry-amount { color: var(--color-text); }
.ph-entry.is-canceled .ph-entry-amount { color: var(--color-text-muted); }
.ph-cancel-btn {
padding: 6px 12px;
font-size: 12px;
line-height: 1;
min-height: 28px;
white-space: nowrap;
}
/* 더 보기 */
.ph-more-wrap {
display: flex;
justify-content: center;
padding: var(--space-3) 0;
}
.ph-more-btn { min-width: 160px; padding: 12px 20px; }
.ph-more-loading,
.ph-more-end {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
/* 빈 상태 */
.ph-empty {
padding: var(--space-8) var(--space-4);
text-align: center;
background: var(--color-bg);
border-radius: var(--radius-lg);
}
.ph-empty-emoji { font-size: 48px; margin-bottom: 12px; }
.ph-empty-title { font-size: var(--text-base); font-weight: var(--weight-bold); margin-bottom: 6px; }
.ph-empty-sub { font-size: var(--text-sm); color: var(--color-text-sub); }
/* 환급 취소 확인 모달 */
.ph-confirm-sheet { max-width: 420px; }
.ph-confirm-body {
padding: 0 2px var(--space-3);
}
.ph-confirm-item {
background: var(--color-surface);
border-radius: var(--radius-md);
padding: 12px;
margin-bottom: 12px;
}
.ph-confirm-row { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; }
.ph-confirm-thumb {
width: 48px; height: 48px;
background: var(--color-bg);
border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: center;
font-size: 26px;
}
.ph-confirm-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ph-confirm-name {
font-size: var(--text-sm);
font-weight: var(--weight-bold);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ph-confirm-amt { font-size: var(--text-xs); color: var(--color-text-sub); }
.ph-confirm-guide {
margin: 0; padding-left: 18px;
font-size: var(--text-sm);
color: var(--color-text-sub);
line-height: 1.65;
}
.ph-confirm-guide b { color: var(--color-text); font-weight: var(--weight-bold); }
.ph-confirm-actions {
display: flex; gap: 8px;
padding-top: var(--space-2);
}
.ph-confirm-actions .btn { flex: 1; padding: 12px; font-weight: var(--weight-bold); }
/* 홈 하단 회사 정보 푸터 — 좌우 여백 없이 화면 끝까지 회색 배경
홈 페이지는 body[data-page="home"] 에서 body/html 배경을 동일한 #F5F5F7 로
맞춰, 스크롤을 최하단을 지나도록 내려도 (iOS 바운스 포함) 배경이 끊기지
않고 회색으로 연결되어 보이도록 한다. */
.site-footer {
margin: var(--space-6) calc(var(--space-4) * -1) 0;
padding: var(--space-5) var(--space-4) calc(var(--bottom-bar-clear, 96px) + var(--space-4));
background: #F5F5F7;
color: var(--color-text-sub);
font-size: var(--text-xs);
line-height: 1.6;
}
/* 콘텐츠 영역(.app) 은 자체 배경(white)을 유지하므로 body/html 만 회색이어도
상단·중간 콘텐츠는 그대로 하얗게 보인다. overscroll 바운스 영역에서만 회색 노출. */
body[data-page="home"] { background: #F5F5F7; }
html:has(body[data-page="home"]) { background-color: #F5F5F7; }
.site-footer-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
flex-wrap: wrap;
}
.site-footer-brand {
font-size: var(--text-sm);
font-weight: var(--weight-bold);
color: var(--color-text);
}
.site-footer-links {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--color-text-sub);
}
.site-footer-links a {
color: var(--color-text-sub);
text-decoration: none;
}
.site-footer-links a:hover { color: var(--color-text); text-decoration: underline; }
.site-footer-links .dot { color: var(--color-text-muted); }
.site-footer-divider {
height: 1px;
background: var(--color-border);
margin: var(--space-4) 0;
}
.site-footer-info .company-name {
color: var(--color-text);
font-weight: var(--weight-medium);
margin-bottom: 6px;
font-size: var(--text-sm);
}
.company-meta {
list-style: none;
margin: 0; padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.company-meta li {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.company-meta .k { color: var(--color-text-muted); }
.company-meta .k::after { content: ' :'; }
.company-meta .v { color: var(--color-text-sub); }
.site-footer-copy {
margin-top: var(--space-4);
color: var(--color-text-muted);
font-size: var(--text-xs);
}
/* ================================================
FAQ (자주 묻는 질문) 페이지
================================================ */
.faq-list {
display: flex;
flex-direction: column;
background: var(--color-bg);
}
.faq-item {
border-bottom: 1px solid var(--color-border);
}
.faq-item:last-child { border-bottom: 0; }
.faq-summary {
list-style: none;
display: grid;
grid-template-columns: 40px 1fr 20px;
gap: var(--space-3);
align-items: center;
padding: 14px var(--space-3);
cursor: pointer;
background: var(--color-bg);
transition: background .15s;
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary::marker { display: none; }
.faq-summary:hover { background: #FAFAFC; }
.faq-badge {
width: 36px; height: 36px;
border-radius: 8px;
background: #1F2937;
color: #fff;
display: grid; place-content: center;
font-size: var(--text-base);
font-weight: var(--weight-bold);
transition: background .15s;
}
.faq-item[open] .faq-badge {
background: #D92C2C;
}
.faq-q {
font-size: var(--text-sm);
color: var(--color-text);
line-height: 1.45;
word-break: keep-all;
}
.faq-chev {
color: var(--color-text-muted);
font-size: 20px;
justify-self: end;
transition: transform .2s;
line-height: 1;
}
.faq-item[open] .faq-chev { transform: rotate(180deg); }
/* 답변 영역 — 밝은 회색 패널 */
.faq-answer {
padding: var(--space-4) var(--space-4) calc(var(--space-4) + 4px);
background: #F3F4F6;
margin: 0 var(--space-3) var(--space-3);
border-radius: var(--radius-md);
}
.faq-p {
margin: 0;
font-size: var(--text-sm);
line-height: 1.65;
color: var(--color-text);
word-break: keep-all;
}
.faq-p + .faq-p { margin-top: var(--space-3); }
.faq-note {
margin: var(--space-3) 0 0;
font-size: 11px;
color: var(--color-text-sub);
line-height: 1.55;
}
/* 확률표 전용 */
.faq-table-title {
text-align: center;
font-size: var(--text-lg);
font-weight: var(--weight-bold);
color: var(--color-text);
margin-bottom: var(--space-3);
}
.faq-table-wrap {
background: var(--color-bg);
border-radius: var(--radius-sm);
overflow: hidden;
border: 1px solid var(--color-border);
}
.faq-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
color: var(--color-text);
}
.faq-table th,
.faq-table td {
padding: 10px 6px;
text-align: center;
border-bottom: 1px solid var(--color-border);
}
.faq-table th {
background: #F9FAFB;
font-weight: var(--weight-bold);
color: var(--color-text);
font-size: 12px;
}
.faq-table tbody tr:last-child td { border-bottom: 0; }
.faq-table td:nth-child(2) { text-align: left; padding-left: 10px; }
/* ================================================
문의하기 — 목록 / 작성 / 상세
================================================ */
.inq-hours {
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border);
background: var(--color-bg);
}
.inq-hours-title {
font-size: var(--text-base);
font-weight: var(--weight-bold);
color: var(--color-text);
margin-bottom: 4px;
}
.inq-hours-desc {
font-size: 11px;
color: var(--color-text-sub);
line-height: 1.5;
}
.inq-hours-label { color: var(--color-text-muted); margin-right: 2px; }
/* 빈 상태 */
.inq-empty {
min-height: 50vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-3);
}
.inq-empty-icon {
width: 72px; height: 72px;
border-radius: var(--radius-full);
background: #D92C2C;
color: #fff;
font-size: 36px;
display: grid; place-content: center;
}
.inq-empty-text {
font-size: var(--text-base);
color: var(--color-text);
}
/* 목록 */
.inq-list {
display: flex;
flex-direction: column;
background: var(--color-bg);
}
.inq-row {
display: block;
padding: var(--space-4);
border-bottom: 1px solid var(--color-border);
text-decoration: none;
color: inherit;
}
.inq-row:hover { background: #FAFAFC; text-decoration: none; }
.inq-row:last-child { border-bottom: 0; }
.inq-row-head {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: 6px;
}
.inq-type-tag {
font-size: 11px;
font-weight: var(--weight-bold);
color: var(--color-primary);
background: var(--color-primary-soft);
padding: 3px 8px;
border-radius: var(--radius-full);
}
.inq-status-chip {
font-size: 11px;
font-weight: var(--weight-bold);
padding: 3px 10px;
border-radius: var(--radius-full);
margin-left: auto;
}
.inq-status-chip.tone-neutral { background: #E5E7EF; color: #4B5563; }
.inq-status-chip.tone-warn { background: #FEF3C7; color: #B45309; }
.inq-status-chip.tone-ok { background: #D1FAE5; color: #047857; }
.inq-row-title {
font-size: var(--text-base);
font-weight: var(--weight-medium);
color: var(--color-text);
margin-bottom: 4px;
line-height: 1.4;
word-break: keep-all;
}
.inq-row-meta {
font-size: 11px;
color: var(--color-text-muted);
}
/* 하단 고정 CTA */
.inq-bottom-bar {
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: var(--bottom-bar-clear);
width: 100%;
max-width: var(--container-max);
padding: var(--space-3) var(--space-4);
background: var(--color-bg);
border-top: 1px solid var(--color-border);
z-index: calc(var(--z-nav) - 1);
}
body:has(.inq-bottom-bar) .app-main {
padding-bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 120px);
}
.inq-cta {
display: block;
width: 100%;
padding: 14px;
background: var(--gradient-point);
color: #fff;
text-align: center;
font-weight: var(--weight-bold);
font-size: var(--text-base);
border-radius: var(--radius-md);
box-shadow: 0 6px 16px rgba(91,91,255,.28);
text-decoration: none;
transition: filter .15s;
}
.inq-cta:hover { filter: brightness(1.05); text-decoration: none; color: #fff; }
.inq-cta-full { border: 0; cursor: pointer; }
/* 작성 폼 */
.inq-form {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-4);
}
.inq-field {
display: flex;
flex-direction: column;
gap: 6px;
position: relative;
}
.inq-label {
font-size: var(--text-sm);
font-weight: var(--weight-bold);
color: var(--color-text);
}
.inq-input,
.inq-select,
.inq-textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg);
font-size: var(--text-sm);
color: var(--color-text);
outline: none;
transition: border-color .15s, box-shadow .15s;
}
.inq-select { appearance: auto; }
.inq-textarea { resize: vertical; min-height: 160px; line-height: 1.55; }
.inq-input:focus,
.inq-select:focus,
.inq-textarea:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(91,91,255,.15);
}
.inq-count {
position: absolute;
right: 4px;
bottom: -22px;
font-size: 11px;
color: var(--color-text-muted);
}
/* 상세 — 헤더 */
.inq-detail-head {
padding: var(--space-4);
border-bottom: 1px solid var(--color-border);
background: var(--color-bg);
}
.inq-detail-head-top {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-2);
}
.inq-detail-head-top .inq-status-chip { margin-left: auto; }
.inq-detail-title {
margin: 0 0 4px;
font-size: var(--text-lg);
font-weight: var(--weight-bold);
color: var(--color-text);
line-height: 1.35;
word-break: keep-all;
}
.inq-detail-date {
font-size: 11px;
color: var(--color-text-muted);
}
/* 상세 — 채팅 스레드 */
.inq-thread {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-4);
}
.inq-bubble-row {
display: flex;
flex-direction: column;
max-width: 80%;
}
.inq-bubble-row.role-user {
align-self: flex-end;
align-items: flex-end;
}
.inq-bubble-row.role-admin {
align-self: flex-start;
align-items: flex-start;
}
.inq-bubble {
padding: 12px 14px;
border-radius: 16px;
font-size: var(--text-sm);
line-height: 1.55;
word-break: keep-all;
white-space: pre-wrap;
}
.inq-bubble-row.role-user .inq-bubble {
background: var(--color-primary);
color: #fff;
border-bottom-right-radius: 4px;
}
.inq-bubble-row.role-admin .inq-bubble {
background: #F3F4F6;
color: var(--color-text);
border-bottom-left-radius: 4px;
}
.inq-bubble-ts {
margin-top: 4px;
font-size: 10px;
color: var(--color-text-muted);
}
/* 상세 — 하단 입력 영역 */
.inq-compose {
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: var(--bottom-bar-clear);
width: 100%;
max-width: var(--container-max);
padding: var(--space-2) var(--space-3);
background: var(--color-bg);
border-top: 1px solid var(--color-border);
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-2);
align-items: end;
z-index: calc(var(--z-nav) - 1);
}
body:has(.inq-compose) .app-main {
padding-bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 150px);
}
.inq-compose-input {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--color-border);
border-radius: 20px;
background: var(--color-surface);
font-size: var(--text-sm);
color: var(--color-text);
resize: none;
line-height: 1.45;
outline: none;
font-family: inherit;
}
.inq-compose-input:focus {
border-color: var(--color-primary);
background: var(--color-bg);
}
.inq-send-btn {
padding: 10px 16px;
background: var(--gradient-point);
color: #fff;
font-weight: var(--weight-bold);
font-size: var(--text-sm);
border-radius: 20px;
box-shadow: 0 4px 10px rgba(91,91,255,.24);
cursor: pointer;
}
.inq-send-btn:hover { filter: brightness(1.05); }
/* ================================================
배송지 주소록
================================================ */
.addr-list {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-4);
}
.addr-card {
position: relative;
padding: var(--space-4);
border-radius: var(--radius-lg);
border: 2px solid var(--color-border);
background: var(--color-bg);
display: flex;
flex-direction: column;
gap: 6px;
}
.addr-card.is-default {
border-color: var(--color-primary);
box-shadow: 0 0 0 1px rgba(91,91,255,.25);
}
.addr-card-top {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 4px;
}
.addr-default-chip {
display: inline-block;
padding: 4px 12px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
background: var(--color-bg);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--color-text);
}
.addr-card-actions { display: flex; gap: 8px; }
.addr-ico-btn {
width: 32px; height: 32px;
display: grid; place-content: center;
color: var(--color-text-muted);
background: transparent;
border-radius: var(--radius-sm);
cursor: pointer;
}
.addr-ico-btn svg { width: 20px; height: 20px; }
.addr-ico-btn:hover { background: var(--color-surface); color: var(--color-text); }
.addr-kv {
display: flex;
gap: 6px;
font-size: var(--text-sm);
line-height: 1.5;
word-break: keep-all;
}
.addr-kv .k { color: var(--color-text-sub); flex-shrink: 0; }
.addr-kv .v { color: var(--color-text); font-weight: var(--weight-medium); }
/* 하단 고정 CTA */
.addr-bottom-bar {
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: var(--bottom-bar-clear);
width: 100%;
max-width: var(--container-max);
padding: var(--space-3) var(--space-4);
background: var(--color-bg);
border-top: 1px solid var(--color-border);
z-index: calc(var(--z-nav) - 1);
}
body:has(.addr-bottom-bar) .app-main {
padding-bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 120px);
}
.addr-add-cta {
width: 100%;
padding: 14px;
background: var(--gradient-point);
color: #fff;
font-size: var(--text-base);
font-weight: var(--weight-bold);
border-radius: var(--radius-md);
cursor: pointer;
border: 0;
box-shadow: 0 6px 16px rgba(91,91,255,.28);
transition: filter .15s;
}
.addr-add-cta:hover { filter: brightness(1.05); }
/* ───────────── 추가/편집 모달 ───────────── */
.addr-modal-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.5);
display: flex;
align-items: flex-end;
justify-content: center;
z-index: 300;
}
@media (min-width: 640px) {
.addr-modal-overlay { align-items: center; }
}
.addr-modal-sheet {
width: 100%;
max-width: var(--container-max);
max-height: 92dvh;
background: var(--color-bg);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
display: flex;
flex-direction: column;
overflow: hidden; /* 헤더는 고정, 본문만 스크롤 */
}
@media (min-width: 640px) {
.addr-modal-sheet { border-radius: var(--radius-lg); max-width: 480px; }
}
.addr-modal-head {
flex-shrink: 0;
display: flex; align-items: center; justify-content: space-between;
padding: var(--space-4) var(--space-4) var(--space-3);
background: var(--color-bg);
border-bottom: 1px solid var(--color-border);
z-index: 1;
}
.addr-modal-body {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.addr-modal-foot {
flex-shrink: 0;
padding: var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
background: var(--color-bg);
border-top: 1px solid var(--color-border);
display: flex;
flex-direction: column;
gap: var(--space-3);
z-index: 1;
}
.addr-modal-title {
font-size: var(--text-lg);
font-weight: var(--weight-bold);
color: var(--color-text);
}
.addr-modal-close {
width: 36px; height: 36px;
display: grid; place-content: center;
background: transparent;
border: 0;
cursor: pointer;
color: var(--color-text);
font-size: 22px;
}
.addr-field {
display: flex; flex-direction: column; gap: 6px;
}
.addr-label {
font-size: var(--text-sm);
font-weight: var(--weight-bold);
color: var(--color-text);
}
.addr-input {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg);
font-size: var(--text-sm);
color: var(--color-text);
outline: none;
transition: border-color .15s, box-shadow .15s;
font-family: inherit;
}
.addr-input:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(91,91,255,.15);
}
.addr-input[readonly] { background: #FAFAFC; color: var(--color-text); }
.addr-with-btn {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-2);
align-items: stretch;
}
.addr-lookup-btn {
padding: 0 16px;
background: #1F2937;
color: #fff;
font-size: var(--text-sm);
font-weight: var(--weight-bold);
border-radius: var(--radius-md);
border: 0;
cursor: pointer;
white-space: nowrap;
}
.addr-lookup-btn:hover { background: #111827; }
/* 공동현관 출입방법 */
.entry-radios {
display: flex; flex-direction: column;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
}
.entry-row {
display: flex; flex-direction: column;
padding: var(--space-3);
border-bottom: 1px solid var(--color-border);
gap: 6px;
}
.entry-row:last-child { border-bottom: 0; }
.entry-radio {
display: flex; align-items: center; gap: 10px;
cursor: pointer;
}
.entry-radio input[type="radio"] { display: none; }
.entry-dot {
width: 20px; height: 20px;
border-radius: 50%;
border: 2px solid var(--color-border);
background: var(--color-bg);
flex-shrink: 0;
transition: border-color .15s, background .15s;
}
.entry-radio input[type="radio"]:checked + .entry-dot {
border-color: var(--color-primary);
background: var(--color-primary);
box-shadow: inset 0 0 0 4px var(--color-primary);
}
.entry-label { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-text); }
.entry-detail {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
font-size: var(--text-xs);
color: var(--color-text);
resize: vertical;
min-height: 44px;
outline: none;
font-family: inherit;
}
.entry-detail:focus {
border-color: var(--color-primary);
background: var(--color-bg);
}
.addr-check-row {
display: flex; align-items: center; gap: 8px;
margin-top: var(--space-2);
cursor: pointer;
}
.addr-check-row input[type="checkbox"] { display: none; }
.addr-check-box {
width: 24px; height: 24px;
border-radius: 50%;
background: var(--color-border);
display: grid; place-content: center;
position: relative;
transition: background .15s;
flex-shrink: 0;
}
.addr-check-box::after {
content: '';
width: 10px; height: 6px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg) translate(1px, -1px);
opacity: 0;
}
.addr-check-row input[type="checkbox"]:checked + .addr-check-box {
background: var(--color-primary);
}
.addr-check-row input[type="checkbox"]:checked + .addr-check-box::after {
opacity: 1;
border-color: #fff;
}
.addr-check-label { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-text); }
.addr-save-cta {
width: 100%;
padding: 14px;
background: var(--gradient-point);
color: #fff;
font-size: var(--text-base);
font-weight: var(--weight-bold);
border-radius: var(--radius-md);
border: 0;
cursor: pointer;
box-shadow: 0 6px 16px rgba(91,91,255,.28);
}
.addr-save-cta:hover { filter: brightness(1.05); }
/* 주소찾기 Sub-modal — Daum(Kakao) Postcode embed */
.addr-modal-overlay.addr-sub { z-index: 310; }
.lookup-sheet { max-height: 85dvh; }
.lookup-sheet .daum-embed {
flex: 1;
min-height: 420px;
height: 70vh;
width: 100%;
border-top: 1px solid var(--color-border);
overflow: hidden;
}
.lookup-loading {
padding: 40px 16px;
text-align: center;
color: var(--color-text-sub);
font-size: var(--text-sm);
}
/* ================================================
구매 내역 (purchase-history)
================================================ */
.pur-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-4);
}
.pur-row {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-3) var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.pur-row.is-cancelled {
opacity: 0.65;
}
.pur-row.is-cancelled .pur-info .pur-name,
.pur-row.is-cancelled .pur-info .pur-sub,
.pur-row.is-cancelled .pur-pay .v { text-decoration: line-through; }
.pur-row-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.pur-date { font-size: 11px; color: var(--color-text-muted); }
.pur-order-no {
font-size: 11px;
color: var(--color-text-sub);
font-variant-numeric: tabular-nums;
letter-spacing: 0.1px;
}
.pur-status-chip {
font-size: 11px;
font-weight: var(--weight-bold);
padding: 3px 10px;
border-radius: var(--radius-full);
}
.pur-status-chip.tone-ok { background: #D1FAE5; color: #047857; }
.pur-status-chip.tone-cancelled { background: #FEE2E2; color: #B91C1C; }
.pur-body {
display: grid;
grid-template-columns: 48px 1fr;
gap: var(--space-3);
align-items: center;
}
.pur-thumb {
width: 48px; height: 48px;
border-radius: var(--radius-sm);
background: var(--color-surface);
display: grid; place-content: center;
font-size: 26px;
}
.pur-info { min-width: 0; }
.pur-name {
font-size: var(--text-sm);
font-weight: var(--weight-bold);
color: var(--color-text);
line-height: 1.35;
overflow: hidden;
text-overflow: ellipsis;
}
.pur-sub {
font-size: var(--text-xs);
color: var(--color-text-sub);
margin-top: 2px;
}
.pur-pay {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: var(--space-2);
border-top: 1px dashed var(--color-border);
}
.pur-pay-row {
display: flex;
justify-content: space-between;
font-size: var(--text-sm);
}
.pur-pay-row .k { color: var(--color-text-sub); }
.pur-pay-row .v { color: var(--color-text); font-weight: var(--weight-medium); }
.pur-pay-row .v.is-point { color: var(--color-primary); }
.pur-pay-row.is-total .k { font-weight: var(--weight-bold); color: var(--color-text); }
.pur-pay-row.is-total .v { font-weight: var(--weight-bold); color: var(--color-text); font-size: var(--text-base); }
/* ================================================
개봉 기록 (opening-history)
================================================ */
/* 개봉기록 페이지의 op-card — 기존 margin/padding 을 절반(16 → 8)으로 줄여
좌우 여백을 타이트하게. 대신 내부 gap 과 여백은 적절히 유지. */
.op-card {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 10px;
margin: 8px;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.op-card-title {
font-size: var(--text-sm);
font-weight: var(--weight-bold);
color: var(--color-text);
}
.op-card-sub {
font-size: 11px;
color: var(--color-text-sub);
margin-top: -4px;
}
/* 상자별 통계 — 가로 스크롤 카드
모바일 375px 기준 2 + 1/3 개 카드가 보이도록 카드 폭을 135px 로.
스크롤 트랙은 우측 패딩 안쪽까지 bleed 시켜 "더 있어요" 힌트 제공. */
.op-boxstats { padding-bottom: 0; }
.op-box-scroll {
display: flex;
gap: 8px;
overflow-x: auto;
padding: 6px 10px 10px 0;
margin: 0 -10px 0 0;
scrollbar-width: none;
scroll-snap-type: x proximity;
}
.op-box-scroll::-webkit-scrollbar { display: none; }
.op-box-card {
/* 130px 카드 + 8px gap + op-card padding 10 / margin 8 설정에서
375px 모바일 기준 ≈ 2 + 1/3 개 카드가 보여 좌우 스크롤 가능함이
자연스럽게 드러난다. */
flex: 0 0 130px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 10px;
display: flex;
flex-direction: column;
gap: 8px;
position: relative; /* 🎁 버튼 absolute 기준 */
scroll-snap-align: start;
}
/* 🎁 버튼은 좁은 head 에서 자리 차지 안 하도록 카드 우상단 absolute 로 이동 */
.op-box-head {
display: flex;
align-items: center;
gap: 6px;
padding-right: 26px; /* 🎁 버튼 자리 확보 */
}
.op-box-emoji {
width: 30px; height: 30px;
border-radius: var(--radius-sm);
background: var(--color-bg);
display: grid; place-content: center;
font-size: 18px;
flex-shrink: 0;
}
.op-box-title { min-width: 0; flex: 1; }
.op-box-name {
font-size: 11px;
font-weight: var(--weight-bold);
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
letter-spacing: -0.2px;
}
.op-box-price {
margin-top: 1px;
font-size: 10px;
color: var(--color-text-sub);
}
/* 3 메트릭을 3 행 수직 스택으로 — 좁은 카드에서 숫자가 잘리지 않도록 */
.op-box-metrics {
display: flex;
flex-direction: column;
gap: 2px;
padding: 6px 0;
border-top: 1px dashed var(--color-border);
border-bottom: 1px dashed var(--color-border);
}
.op-box-metric {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 6px;
min-width: 0;
}
.op-box-metric-v {
font-size: 11px;
font-weight: var(--weight-bold);
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.op-box-metric-k {
font-size: 10px;
color: var(--color-text-sub);
flex-shrink: 0;
}
/* [deprecated] 최고 당첨 영역 — 등급별 확률 비교로 대체됨. 스타일 보존용. */
.op-box-top {
display: flex;
flex-direction: column;
gap: 2px;
}
.op-box-top-label {
font-size: 10px;
color: var(--color-text-sub);
font-weight: var(--weight-bold);
}
.op-box-top-prize {
font-size: 12px;
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.op-box-top-price {
font-size: var(--text-sm);
font-weight: var(--weight-bold);
color: var(--color-primary);
}
/* 상자 카드 우측 상단 편성 보기 버튼 — 카드 기준 absolute */
.op-box-prizebtn {
position: absolute;
top: 8px;
right: 8px;
border: 1px solid var(--color-border);
background: var(--color-bg);
color: var(--color-text);
width: 22px; height: 22px;
border-radius: var(--radius-sm);
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px;
padding: 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background .15s, border-color .15s;
z-index: 1;
}
.op-box-prizebtn:hover { background: var(--color-surface); border-color: var(--color-primary); }
.op-box-prizebtn:active { transform: scale(.96); }
/* 등급별 박스확률 vs 누적확률 — 좁은 카드에 맞춰 레이블/바/수치 모두 compact */
.op-box-probs {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 6px;
border-top: 1px dashed var(--color-border);
}
.op-box-probs-head {
display: grid;
grid-template-columns: 36px 1fr 1fr;
column-gap: 4px;
font-size: 8px;
color: var(--color-text-muted);
letter-spacing: 0.1px;
padding: 0 1px;
}
.op-box-probs-head .set,
.op-box-probs-head .act { text-align: right; }
.op-box-prob-row {
display: grid;
grid-template-columns: 36px 1fr 1fr;
column-gap: 4px;
align-items: center;
}
.op-box-prob-label {
display: flex;
align-items: center;
gap: 3px;
font-size: 9px;
color: var(--color-text);
white-space: nowrap;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.op-box-prob-label .dot {
width: 5px; height: 5px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
.op-box-prob-col {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 3px;
min-width: 0;
}
.op-box-prob-track {
flex: 1;
min-width: 10px;
height: 4px;
border-radius: 2px;
background: var(--color-bg);
overflow: hidden;
}
.op-box-prob-fill {
height: 100%;
border-radius: 2px;
transition: width .3s ease;
}
.op-box-prob-val {
font-size: 9px;
font-variant-numeric: tabular-nums;
color: var(--color-text-sub);
white-space: nowrap;
flex-shrink: 0;
}
/* 미스틱 등급의 작은 바(2~4%)에서도 무지개 톤이 확실히 드러나도록,
그라데이션을 300% 폭으로 펼쳐 position 을 애니메이션 이동시킨다.
JS 가 inline `background: linear-gradient(...)` 로 색만 지정하므로,
background-size / position / animation 은 CSS 에서 덮어쓴다. */
@keyframes mythicRainbowShift {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
.op-box-prob-row.tier-mythic .op-box-prob-fill,
.op-tier-bar.tier-mythic .op-tier-fill,
.box-stats-prob-row.tier-mythic .box-stats-prob-fill {
background-size: 300% 100% !important;
background-repeat: no-repeat !important;
animation: mythicRainbowShift 3.2s linear infinite;
}
/* 내 개봉 통계 헤더 — 좌: 타이틀, 우: 누적/당월 탭 */
.op-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
}
.op-scope-tabs {
display: inline-flex;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
padding: 2px;
gap: 0;
}
.op-scope-tab {
border: 0;
background: transparent;
color: var(--color-text-sub);
font-size: 11px;
font-weight: var(--weight-medium);
padding: 5px 12px;
border-radius: var(--radius-full);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background .15s, color .15s;
}
.op-scope-tab.is-on {
background: var(--color-bg);
color: var(--color-text);
font-weight: var(--weight-bold);
box-shadow: 0 1px 2px rgba(0,0,0,.06);
background: #fff;
}
.op-stat-grid { display: grid; gap: var(--space-2); }
.op-stat-grid-2 { grid-template-columns: 1fr 1fr; }
.op-stat-grid-3 { grid-template-columns: repeat(3, 1fr); }
.op-stat-cell {
background: var(--color-surface);
border-radius: var(--radius-md);
padding: 12px 14px;
min-width: 0;
}
.op-stat-big {
font-size: var(--text-lg);
font-weight: var(--weight-bold);
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.op-stat-cell.compact .op-stat-big { font-size: var(--text-base); }
.op-stat-small {
margin-top: 2px;
font-size: 11px;
color: var(--color-text-sub);
}
/* tier bars (내 통계) */
.op-tier-bars {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: var(--space-2);
border-top: 1px dashed var(--color-border);
}
.op-tier-bar {
display: grid;
grid-template-columns: 80px 1fr 48px;
gap: 10px;
align-items: center;
}
.op-tier-label {
display: flex; align-items: center; gap: 6px;
font-size: var(--text-xs);
color: var(--color-text-sub);
}
.op-tier-dot {
width: 8px; height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.op-tier-track {
height: 8px;
background: var(--color-surface);
border-radius: 999px;
overflow: hidden;
}
.op-tier-fill {
height: 100%;
border-radius: 999px;
transition: width .3s ease;
}
.op-tier-count {
font-size: 11px;
color: var(--color-text);
font-weight: var(--weight-bold);
text-align: right;
}
/* 필터 칩 */
.op-filter {
display: flex;
gap: 6px;
overflow-x: auto;
/* op-card 좌우 여백(8) 과 통일 */
padding: 0 8px var(--space-2);
scrollbar-width: none;
}
.op-filter::-webkit-scrollbar { display: none; }
.op-chip {
flex-shrink: 0;
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 12px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 999px;
font-size: var(--text-xs);
color: var(--color-text-sub);
cursor: pointer;
transition: background .15s, border-color .15s, color .15s;
}
.op-chip:hover { background: var(--color-surface); }
.op-chip.is-on {
background: var(--color-primary-soft);
border-color: var(--color-primary);
color: var(--color-primary);
}
.op-chip-dot {
width: 8px; height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
/* 개봉 리스트 */
.op-list-sec { padding: 0 8px var(--space-4); }
.op-list-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: var(--space-2);
}
.op-list-title { font-size: var(--text-sm); font-weight: var(--weight-bold); }
.op-list-count { font-size: 11px; color: var(--color-text-muted); }
.op-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.op-row {
display: grid;
grid-template-columns: 48px 1fr auto;
gap: var(--space-3);
align-items: center;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 10px var(--space-3);
text-decoration: none;
color: inherit;
-webkit-tap-highlight-color: transparent;
transition: background .15s, border-color .15s;
}
.op-row:hover { background: #FAFAFC; text-decoration: none; color: inherit; }
.op-row:active { background: #F2F2F7; }
.op-row:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.op-row.tier-rare { border-color: #FFE17A; }
.op-row.tier-epic { border-color: #E1C6FF; }
.op-row.tier-legendary { border-color: #9DD1FF; }
.op-row.tier-mythic { border-color: #FFA8D1; }
.op-row-thumb {
width: 48px; height: 48px;
border-radius: var(--radius-sm);
display: grid; place-content: center;
font-size: 24px;
}
.op-row-body { min-width: 0; }
.op-row-line1 {
display: flex; align-items: center; gap: 6px;
margin-bottom: 2px;
min-width: 0;
}
.op-row-name {
font-size: var(--text-sm);
font-weight: var(--weight-bold);
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.op-row-line2 {
display: flex; align-items: center; gap: 6px;
font-size: 11px;
color: var(--color-text-sub);
}
.op-row-box { font-weight: var(--weight-medium); color: var(--color-text-sub); }
.op-tier-chip {
flex-shrink: 0;
font-size: 10px;
font-weight: var(--weight-bold);
padding: 2px 6px;
border-radius: 4px;
color: #fff;
background: #9CA3AF;
}
.op-tier-chip.tier-rare { background: #F5B400; }
.op-tier-chip.tier-epic { background: #A375FF; }
.op-tier-chip.tier-legendary { background: #3D8BFF; }
.op-tier-chip.tier-mythic { background: linear-gradient(120deg,#ff5b8a,#ffd54a,#6ed37a,#5b9bff,#b65bff); }
.op-row-right {
text-align: right;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.op-row-price {
font-size: var(--text-sm);
font-weight: var(--weight-bold);
color: var(--color-text);
}
.op-row-status {
font-size: 10px;
font-weight: var(--weight-bold);
padding: 2px 8px;
border-radius: 999px;
background: var(--color-surface);
color: var(--color-text-sub);
}
.op-row-status.status-inventory { background: var(--color-primary-soft); color: var(--color-primary); }
.op-row-status.status-refunded { background: #FEF3C7; color: #B45309; }
.op-row-status.status-shipped { background: #D1FAE5; color: #047857; }
/* 페이지네이션 */
.op-pager {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
margin-top: var(--space-4);
}
.op-pager-btn {
flex: 1;
padding: 10px 12px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-size: var(--text-sm);
color: var(--color-text);
font-weight: var(--weight-bold);
cursor: pointer;
transition: background .15s;
}
.op-pager-btn:hover:not(:disabled) { background: var(--color-surface); }
.op-pager-btn:disabled {
color: var(--color-text-muted);
cursor: not-allowed;
opacity: 0.5;
}
.op-pager-info {
font-size: var(--text-sm);
color: var(--color-text-sub);
font-weight: var(--weight-bold);
min-width: 64px;
text-align: center;
}
.lookup-body { display: flex; flex-direction: column; gap: var(--space-3); }
.addr-lookup-input {
width: 100%;
padding: 12px 14px;
border: 0;
border-bottom: 2px solid #111827;
background: transparent;
font-size: var(--text-sm);
outline: none;
color: var(--color-text);
}
.lookup-hint {
font-size: 11px;
color: var(--color-text-muted);
}
.lookup-list {
display: flex; flex-direction: column;
border-top: 1px solid var(--color-border);
}
.lookup-row {
display: grid;
grid-template-columns: 60px 1fr;
gap: var(--space-3);
align-items: center;
padding: 12px 4px;
border-bottom: 1px solid var(--color-border);
background: transparent;
cursor: pointer;
text-align: left;
}
.lookup-row:hover { background: #FAFAFC; }
.lookup-row .zip {
font-size: var(--text-xs);
font-weight: var(--weight-bold);
color: var(--color-primary);
}
.lookup-row .addr {
font-size: var(--text-sm);
color: var(--color-text);
word-break: keep-all;
}
.lookup-empty {
padding: 24px 12px;
text-align: center;
color: var(--color-text-muted);
font-size: var(--text-sm);
}