/* ============================================================ PCF Mobile Shop — 지그재그/에이블리 스타일 모바일 쇼핑몰 템플릿 ============================================================ */ /* Pretendard 웹폰트는 각 HTML 에서 preconnect + 로 로드 */ :root { --color-point: #fa2a6b; /* 메인 포인트 (핑크) */ --color-point-dark: #e01f5c; --color-sale: #fa2a6b; /* 세일/할인율 */ --color-text: #1a1a1a; --color-sub: #888; --color-line: #f0f0f0; --color-bg: #fff; --color-bg-soft: #f7f7f8; --color-badge: #f2f2f4; --safe-bottom: env(safe-area-inset-bottom, 0px); --app-max: 600px; --header-h: 52px; --nav-h: 58px; } * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { font-family: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; color: var(--color-text); background: #e9e9ec; font-size: 14px; line-height: 1.4; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } img { display: block; max-width: 100%; } ul, li { list-style: none; } /* Lucide SVG 아이콘: 부모 font-size에 맞춰 크기 조절, 색은 currentColor */ .ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex: 0 0 auto; } /* 앱 컨테이너 (데스크탑에서 중앙 정렬, 폰 프레임 느낌) */ .app { max-width: var(--app-max); margin: 0 auto; min-height: 100vh; background: var(--color-bg); position: relative; box-shadow: 0 0 40px rgba(0, 0, 0, 0.08); padding-bottom: calc(var(--nav-h) + var(--safe-bottom)); } /* ===================== 헤더 ===================== */ .header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--color-line); } .header__top { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 8px; } .logo { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; color: var(--color-point); } .header__icons { display: flex; align-items: center; gap: 16px; } .icon-btn { position: relative; font-size: 22px; line-height: 1; color: var(--color-text); } .icon-btn .badge { position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--color-point); color: #fff; font-size: 10px; font-weight: 700; border-radius: 8px; display: flex; align-items: center; justify-content: center; } /* 검색바 */ .searchbar { margin: 0 8px 10px; height: 40px; background: var(--color-bg-soft); border-radius: 20px; display: flex; align-items: center; padding: 0 14px; gap: 8px; color: var(--color-sub); font-size: 13px; } .searchbar .ico { font-size: 16px; } /* 카테고리 탭 */ .tabs { display: flex; gap: 20px; padding: 0 8px; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--color-line); } .tabs::-webkit-scrollbar { display: none; } .tab { flex: 0 0 auto; padding: 12px 0; font-size: 15px; color: var(--color-sub); font-weight: 500; position: relative; white-space: nowrap; } .tab.is-active { color: var(--color-text); font-weight: 700; } .tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--color-text); } /* ===================== 메인 배너 ===================== */ .hero { position: relative; overflow: hidden; } .hero__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .hero__track::-webkit-scrollbar { display: none; } .hero__slide { flex: 0 0 100%; scroll-snap-align: start; position: relative; aspect-ratio: 5 / 6; } .hero__slide img { width: 100%; height: 100%; object-fit: cover; } .hero__caption { position: absolute; left: 20px; bottom: 28px; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4); } .hero__caption .small { font-size: 13px; opacity: 0.9; margin-bottom: 6px; } .hero__caption .big { font-size: 26px; font-weight: 800; line-height: 1.25; } .hero__count { position: absolute; right: 14px; bottom: 14px; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 11px; padding: 3px 10px; border-radius: 12px; } /* ===================== 퀵 카테고리 아이콘 ===================== */ .quick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px 8px; padding: 18px 8px; } .quick__item { text-align: center; } .quick__circle { width: 52px; height: 52px; margin: 0 auto 6px; border-radius: 50%; background: var(--color-bg-soft); display: flex; align-items: center; justify-content: center; font-size: 24px; } .quick__label { font-size: 11px; color: #444; } /* ===================== 섹션 공통 ===================== */ .section { padding: 8px 0 18px; } .section__head { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 8px 12px; } .section__title { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; } .section__more { font-size: 12px; color: var(--color-sub); } .divider { height: 8px; background: var(--color-bg-soft); } /* 가로 스크롤 랭킹 */ .hscroll { display: flex; gap: 6px; padding: 0 8px; overflow-x: auto; scrollbar-width: none; } .hscroll::-webkit-scrollbar { display: none; } .hcard { flex: 0 0 130px; position: relative; } .hcard__thumb { position: relative; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: var(--color-bg-soft); } .hcard__thumb img { width: 100%; height: 100%; object-fit: cover; } .rank-badge { position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); color: #fff; font-size: 13px; font-weight: 700; padding: 4px 9px; border-bottom-right-radius: 8px; } /* ===================== 상품 그리드 ===================== */ .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 6px; padding: 4px 8px 16px; } .product { position: relative; } .product__thumb { position: relative; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: var(--color-bg-soft); margin-bottom: 8px; } .product__thumb img { width: 100%; height: 100%; object-fit: cover; } .like-btn { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); display: flex; align-items: center; justify-content: center; font-size: 16px; color: #888; } .like-btn.is-on { color: var(--color-point); } .tag { position: absolute; top: 8px; left: 8px; display: inline-block; padding: 3px 7px; font-size: 10px; font-weight: 700; border-radius: 4px; background: #1a1a1a; color: #fff; } .tag--coupon { background: var(--color-point); } .tag--new { background: #4b7bec; } .product__brand { font-size: 12px; font-weight: 700; color: #333; margin-bottom: 3px; } .product__name { font-size: 12px; color: #555; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 5px; } .product__price { display: flex; align-items: baseline; gap: 6px; } .product__sale { font-size: 15px; font-weight: 800; color: var(--color-sale); } .product__amount { font-size: 15px; font-weight: 800; } .product__origin { font-size: 11px; color: #bbb; text-decoration: line-through; } .product__meta { margin-top: 5px; font-size: 11px; color: var(--color-sub); display: flex; align-items: center; gap: 3px; } .star { color: #ffb800; font-size: 13px; display: inline-flex; } /* ===================== 하단 네비게이션 ===================== */ .tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--app-max); height: calc(var(--nav-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom); background: #fff; border-top: 1px solid var(--color-line); display: flex; z-index: 200; } .tabbar__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10px; color: #999; } .tabbar__item .ico { font-size: 21px; line-height: 1; } .tabbar__item.is-active { color: var(--color-text); font-weight: 700; } /* ===================== 프로모 배너 ===================== */ .promo { display: block; margin: 4px 8px 8px; border-radius: 12px; overflow: hidden; position: relative; aspect-ratio: 16 / 6; background: linear-gradient(135deg, #ffd1e0, #ffe9b0); } .promo img { width: 100%; height: 100%; object-fit: cover; } .promo__text { position: absolute; inset: 0; padding: 18px; display: flex; flex-direction: column; justify-content: center; } .promo__text b { font-size: 17px; } .promo__text span { font-size: 12px; color: #555; margin-top: 4px; } /* ===================== 상품 상세 ===================== */ .detail-header { position: sticky; top: 0; z-index: 100; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 8px; background: #fff; border-bottom: 1px solid var(--color-line); } .detail-header .nav-ico { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 6px; font-size: 26px; line-height: 1; } .detail-gallery { position: relative; aspect-ratio: 1 / 1; background: var(--color-bg-soft); } .detail-gallery img { width: 100%; height: 100%; object-fit: cover; } .detail-info { padding: 18px 8px; } .detail-brand { font-size: 13px; font-weight: 700; color: #333; } .detail-name { font-size: 16px; margin: 6px 0 12px; line-height: 1.4; } .detail-price { display: flex; align-items: baseline; gap: 8px; } .detail-price .pct { font-size: 22px; font-weight: 800; color: var(--color-sale); } .detail-price .now { font-size: 22px; font-weight: 800; } .detail-price .was { font-size: 14px; color: #bbb; text-decoration: line-through; } .detail-section { padding: 16px 8px; border-top: 8px solid var(--color-bg-soft); } .detail-row { display: flex; justify-content: space-between; padding: 9px 0; font-size: 13px; } .detail-row .k { color: var(--color-sub); } .buybar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--app-max); padding: 10px 8px calc(10px + var(--safe-bottom)); background: #fff; border-top: 1px solid var(--color-line); display: flex; gap: 10px; align-items: center; z-index: 200; } .buybar__like { width: 50px; height: 50px; border: 1px solid var(--color-line); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #888; } .buybar__like.is-on { color: var(--color-point); border-color: var(--color-point); } .buybar__btn { flex: 1; height: 50px; border-radius: 8px; background: var(--color-point); color: #fff; font-size: 16px; font-weight: 700; } /* ===================== 인증(로그인/회원가입) ===================== */ .auth-header { position: sticky; top: 0; z-index: 100; height: var(--header-h); display: flex; align-items: center; padding: 0 8px; background: #fff; border-bottom: 1px solid var(--color-line); } .auth-header .nav-ico { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 6px; font-size: 26px; line-height: 1; } .auth-header .auth-header__title { font-size: 16px; font-weight: 700; } .auth { padding: 32px 20px 40px; } .auth__logo { font-size: 34px; font-weight: 800; color: var(--color-point); text-align: center; letter-spacing: -1px; margin-bottom: 6px; } .auth__lead { text-align: center; color: var(--color-sub); font-size: 13px; margin-bottom: 30px; } .field { margin-bottom: 14px; } .field__label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; } .field__input { width: 100%; height: 50px; border: 1px solid #e3e3e6; border-radius: 10px; padding: 0 14px; font-size: 15px; background: #fff; transition: border-color .15s; } .field__input::placeholder { color: #bbb; } .field__input:focus { outline: none; border-color: var(--color-point); } .field__row { display: flex; gap: 8px; } .field__row .field__input { flex: 1; } .field__btn { flex: 0 0 auto; padding: 0 16px; height: 50px; border-radius: 10px; background: #f2f2f4; color: #555; font-size: 13px; font-weight: 600; white-space: nowrap; } .field__hint { margin-top: 6px; font-size: 12px; color: var(--color-sub); } .field__hint.is-error { color: var(--color-point); } .field__hint.is-ok { color: #2bae66; } .auth__btn { width: 100%; height: 52px; border-radius: 10px; background: var(--color-point); color: #fff; font-size: 16px; font-weight: 700; margin-top: 8px; } .auth__btn:disabled { background: #f0c2d3; cursor: default; } .auth__btn--ghost { background: #fff; color: var(--color-text); border: 1px solid #e3e3e6; } .auth__options { display: flex; align-items: center; justify-content: space-between; margin: 14px 2px 0; font-size: 13px; color: var(--color-sub); } .auth__check { display: flex; align-items: center; gap: 6px; } .auth__check input { width: 16px; height: 16px; accent-color: var(--color-point); } .auth__links { display: flex; gap: 12px; } .auth__links a { color: var(--color-sub); } .auth__divider { display: flex; align-items: center; gap: 12px; margin: 28px 0; color: #bbb; font-size: 12px; } .auth__divider::before, .auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--color-line); } .sns { display: flex; flex-direction: column; gap: 10px; } .sns__btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border-radius: 10px; font-size: 14px; font-weight: 600; } .sns__btn--kakao { background: #fee500; color: #3c1e1e; } .sns__btn--naver { background: #03c75a; color: #fff; } .sns__btn--apple { background: #1a1a1a; color: #fff; } .auth__foot { text-align: center; margin-top: 26px; font-size: 13px; color: var(--color-sub); } .auth__foot a { color: var(--color-point); font-weight: 700; } /* 약관 동의 */ .terms { margin: 4px 0 18px; border: 1px solid var(--color-line); border-radius: 10px; padding: 6px 14px; } .terms__all { display: flex; align-items: center; gap: 10px; padding: 12px 0; font-weight: 700; font-size: 14px; border-bottom: 1px solid var(--color-line); } .terms__item { display: flex; align-items: center; gap: 10px; padding: 11px 0; font-size: 13px; color: #555; } .terms__item .req { color: var(--color-point); } .terms__item .opt { color: var(--color-sub); } .terms__item .view { margin-left: auto; font-size: 12px; color: #bbb; text-decoration: underline; } .terms input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-point); flex: 0 0 auto; } /* 아이디/비밀번호 찾기 세그먼트 토글 */ .seg { display: flex; margin: 0 20px 24px; border-bottom: 1px solid var(--color-line); } .seg__btn { flex: 1; padding: 14px 0; font-size: 15px; color: var(--color-sub); font-weight: 600; position: relative; } .seg__btn.is-active { color: var(--color-text); font-weight: 800; } .seg__btn.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--color-text); } .seg-panel { display: none; } .seg-panel.is-active { display: block; } .result-box { margin: 4px 0 8px; padding: 22px 16px; border-radius: 12px; background: var(--color-bg-soft); text-align: center; } .result-box .em { color: var(--color-point); font-weight: 800; } /* ===================== 마이페이지 ===================== */ .my-profile { display: flex; align-items: center; gap: 14px; padding: 22px 16px 18px; } .my-avatar { width: 54px; height: 54px; border-radius: 50%; background: var(--color-bg-soft); display: flex; align-items: center; justify-content: center; font-size: 26px; } .my-profile__info { flex: 1; } .my-profile__name { font-size: 18px; font-weight: 800; } .my-profile__name b { color: var(--color-point); } .my-profile__grade { font-size: 12px; color: var(--color-sub); margin-top: 3px; } .my-profile__edit { font-size: 12px; color: #888; border: 1px solid var(--color-line); border-radius: 20px; padding: 6px 12px; } /* 적립금/쿠폰 요약 */ .my-wallet { display: flex; margin: 0 16px 8px; border: 1px solid var(--color-line); border-radius: 12px; overflow: hidden; } .my-wallet__cell { flex: 1; text-align: center; padding: 16px 0; } .my-wallet__cell + .my-wallet__cell { border-left: 1px solid var(--color-line); } .my-wallet__label { font-size: 12px; color: var(--color-sub); margin-bottom: 5px; } .my-wallet__value { font-size: 17px; font-weight: 800; } .my-wallet__value .unit { font-size: 12px; font-weight: 600; color: #888; } /* 주문 상태 */ .my-order { padding: 18px 16px; } .my-order__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; } .my-order__head h3 { font-size: 15px; font-weight: 800; } .my-order__head a { font-size: 12px; color: var(--color-sub); } .my-order__steps { display: flex; } .my-order__step { flex: 1; text-align: center; position: relative; } .my-order__step .num { font-size: 20px; font-weight: 800; } .my-order__step .lbl { font-size: 11px; color: var(--color-sub); margin-top: 4px; display: block; } .my-order__step + .my-order__step::before { content: "›"; position: absolute; left: -4px; top: 2px; color: #ccc; font-size: 16px; } /* 메뉴 리스트 */ .my-menu { padding: 4px 0 8px; } .my-menu__item { display: flex; align-items: center; gap: 12px; padding: 15px 16px; font-size: 14px; cursor: pointer; } .my-menu__item .ico { font-size: 19px; width: 22px; text-align: center; } .my-menu__item .arrow { margin-left: auto; color: #ccc; font-size: 18px; } .my-menu__item .count { margin-left: auto; color: var(--color-point); font-weight: 700; font-size: 13px; } .my-logout { display: block; text-align: center; color: var(--color-sub); font-size: 13px; padding: 20px 0 8px; text-decoration: underline; } /* ===================== 장바구니 ===================== */ .cart-allbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--color-line); } .cart-allbar__left { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; } .cart-allbar input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--color-point); } .cart-allbar__del { font-size: 13px; color: var(--color-sub); text-decoration: underline; } .cart-item { display: flex; gap: 10px; padding: 16px; border-bottom: 1px solid var(--color-line); } .cart-item__check { padding-top: 2px; } .cart-item__check input { width: 20px; height: 20px; accent-color: var(--color-point); } .cart-item__thumb { width: 84px; height: 104px; flex: 0 0 auto; border-radius: 8px; overflow: hidden; background: var(--color-bg-soft); } .cart-item__thumb img { width: 100%; height: 100%; object-fit: cover; } .cart-item__body { flex: 1; min-width: 0; position: relative; } .cart-item__brand { font-size: 12px; font-weight: 700; color: #333; } .cart-item__name { font-size: 13px; color: #444; margin: 3px 0 5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cart-item__opt { font-size: 12px; color: var(--color-sub); background: var(--color-bg-soft); border-radius: 6px; padding: 5px 9px; display: inline-block; margin-bottom: 10px; } .cart-item__remove { position: absolute; top: -2px; right: 0; font-size: 18px; color: #ccc; line-height: 1; padding: 2px; } .cart-item__bottom { display: flex; align-items: center; justify-content: space-between; } .stepper { display: flex; align-items: center; border: 1px solid var(--color-line); border-radius: 8px; overflow: hidden; } .stepper button { width: 30px; height: 30px; font-size: 17px; color: #555; background: #fafafa; } .stepper button:disabled { color: #ddd; } .stepper .qty { width: 36px; text-align: center; font-size: 14px; font-weight: 600; } .cart-item__price { font-size: 15px; font-weight: 800; } .cart-item__price .origin { display: block; font-size: 11px; font-weight: 400; color: #bbb; text-decoration: line-through; text-align: right; } .cart-empty { text-align: center; padding: 90px 20px; color: var(--color-sub); } .cart-empty .em { font-size: 40px; display: block; margin-bottom: 14px; } .cart-empty a { display: inline-block; margin-top: 18px; color: var(--color-point); font-weight: 700; } .cart-summary { padding: 18px 16px; } .cart-summary__row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 14px; color: #555; } .cart-summary__row.total { border-top: 1px solid var(--color-line); margin-top: 8px; padding-top: 14px; } .cart-summary__row.total .k { font-size: 15px; font-weight: 800; color: #1a1a1a; } .cart-summary__row.total .v { font-size: 20px; font-weight: 800; color: var(--color-point); } .cart-summary__row .v.minus { color: var(--color-point); } .cart-notice { font-size: 12px; color: var(--color-sub); padding: 0 16px 16px; line-height: 1.6; } .buybar__btn:disabled { background: #f0c2d3; } /* ===================== 주문서 / 결제 ===================== */ .co-section { border-top: 8px solid var(--color-bg-soft); padding: 18px 16px; } .co-section:first-of-type { border-top: none; } .co-section__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .co-section__title { font-size: 16px; font-weight: 800; } .co-section__edit { font-size: 12px; color: #888; border: 1px solid var(--color-line); border-radius: 20px; padding: 6px 12px; } /* 배송지 */ .co-addr__name { font-size: 14px; font-weight: 700; margin-bottom: 4px; } .co-addr__name .tag-default { font-size: 10px; color: var(--color-point); border: 1px solid var(--color-point); border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: 1px; } .co-addr__line { font-size: 13px; color: #555; line-height: 1.5; } .co-addr__phone { font-size: 13px; color: #888; margin-top: 2px; } .co-memo { width: 100%; height: 44px; margin-top: 12px; padding: 0 12px; border: 1px solid #e3e3e6; border-radius: 8px; font-size: 13px; background: #fff; } /* 주문 상품 */ .co-item { display: flex; gap: 10px; padding: 10px 0; } .co-item:not(:last-child) { border-bottom: 1px solid var(--color-line); } .co-item__thumb { width: 64px; height: 80px; flex: 0 0 auto; border-radius: 8px; overflow: hidden; background: var(--color-bg-soft); } .co-item__thumb img { width: 100%; height: 100%; object-fit: cover; } .co-item__body { flex: 1; min-width: 0; } .co-item__brand { font-size: 12px; font-weight: 700; } .co-item__name { font-size: 13px; color: #444; margin: 3px 0; display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .co-item__opt { font-size: 12px; color: var(--color-sub); } .co-item__price { font-size: 14px; font-weight: 800; margin-top: 5px; } /* 쿠폰/적립금 적용 행 */ .co-apply { display: flex; gap: 8px; align-items: center; } .co-apply select, .co-apply input { flex: 1; height: 46px; border: 1px solid #e3e3e6; border-radius: 8px; padding: 0 12px; font-size: 13px; background: #fff; color: #333; } .co-apply .field__btn { height: 46px; } .co-point-info { font-size: 12px; color: var(--color-sub); margin-top: 8px; display: flex; justify-content: space-between; } .co-point-info a { color: var(--color-point); font-weight: 700; } /* 결제수단 */ .pay-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .pay-method { border: 1px solid #e3e3e6; border-radius: 8px; padding: 14px 6px; text-align: center; font-size: 13px; color: #555; cursor: pointer; transition: all .12s; } .pay-method.is-active { border-color: var(--color-point); color: var(--color-point); font-weight: 700; background: #fff5f8; } .pay-sub { margin-top: 10px; } .pay-sub select { width: 100%; height: 46px; border: 1px solid #e3e3e6; border-radius: 8px; padding: 0 12px; font-size: 13px; background: #fff; } /* 최종 결제 금액 */ .co-total__row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 14px; color: #555; } .co-total__row .minus { color: var(--color-point); } .co-total__row.grand { border-top: 1px solid var(--color-line); margin-top: 8px; padding-top: 14px; } .co-total__row.grand .k { font-size: 15px; font-weight: 800; color: #1a1a1a; } .co-total__row.grand .v { font-size: 20px; font-weight: 800; color: var(--color-point); } .co-save { font-size: 12px; color: var(--color-sub); text-align: right; margin-top: 6px; } /* 약관 동의 (결제) */ .co-agree { padding: 16px; border-top: 8px solid var(--color-bg-soft); } .co-agree__all { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; margin-bottom: 10px; } .co-agree__item { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #666; padding: 5px 0; } .co-agree__item .view { margin-left: auto; font-size: 12px; color: #bbb; text-decoration: underline; } .co-agree input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-point); flex: 0 0 auto; } /* ===================== 모달 (약관 보기 등) ===================== */ .modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: flex-end; justify-content: center; } .modal.is-open { display: flex; } .modal__dim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); animation: fade .2s ease; } .modal__sheet { position: relative; width: 100%; max-width: var(--app-max); max-height: 80vh; background: #fff; border-radius: 16px 16px 0 0; display: flex; flex-direction: column; animation: slideup .25s ease; padding-bottom: var(--safe-bottom); } .modal__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px 14px; border-bottom: 1px solid var(--color-line); } .modal__title { font-size: 16px; font-weight: 800; } .modal__close { font-size: 24px; color: #888; line-height: 1; padding: 2px 4px; } .modal__body { padding: 18px 16px 24px; overflow-y: auto; font-size: 13px; color: #555; line-height: 1.7; } .modal__body h4 { font-size: 13px; font-weight: 800; color: #333; margin: 16px 0 6px; } .modal__body h4:first-child { margin-top: 0; } .modal__foot { padding: 12px 16px calc(12px + var(--safe-bottom)); border-top: 1px solid var(--color-line); } .modal__foot .auth__btn { margin-top: 0; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes slideup { from { transform: translateY(100%); } to { transform: translateY(0); } } /* 다이얼로그 (jAlert 스타일 · 중앙 모달) */ .dialog-wrap { position: fixed; inset: 0; z-index: 1500; display: none; align-items: center; justify-content: center; padding: 40px 28px; } .dialog-wrap.is-open { display: flex; } .dialog-wrap .modal__dim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); } .dialog { position: relative; width: 100%; max-width: 320px; background: #fff; border-radius: 16px; overflow: hidden; animation: pop .2s ease; } .dialog__body { padding: 28px 22px; text-align: center; } .dialog__title { display: block; font-size: 16px; font-weight: 800; margin-bottom: 8px; } .dialog__msg { font-size: 14px; color: #444; line-height: 1.6; } .dialog__btns { display: flex; border-top: 1px solid var(--color-line); } .dialog__btn { flex: 1; height: 52px; font-size: 15px; font-weight: 700; } .dialog__btn + .dialog__btn { border-left: 1px solid var(--color-line); } .dialog__btn--cancel { color: #888; } .dialog__btn--ok { color: var(--color-point); } @keyframes pop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* 시트 내부 공통 행 (쿠폰/배송지 선택) */ .coupon-row, .addr-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--color-line); } .coupon-row:last-child, .addr-row:last-child { border-bottom: none; } .coupon-row input[type="radio"], .addr-row input[type="radio"] { width: 20px; height: 20px; accent-color: var(--color-point); flex: 0 0 auto; margin-top: 1px; } .coupon-row__name { font-size: 14px; font-weight: 700; } .coupon-row__desc { font-size: 12px; color: var(--color-sub); margin-top: 3px; } .coupon-row__btn { margin-left: auto; padding: 8px 16px; border: 1px solid var(--color-point); color: var(--color-point); border-radius: 8px; font-size: 13px; font-weight: 700; white-space: nowrap; } .coupon-row__btn.is-done { border-color: var(--color-line); color: #bbb; } .addr-row__name { font-size: 14px; font-weight: 700; } .addr-row__line { font-size: 13px; color: #555; margin-top: 4px; line-height: 1.45; } .addr-row__phone { font-size: 12px; color: #888; margin-top: 3px; } /* 쿠폰 선택(셀렉트형 버튼) */ .co-coupon-select { width: 100%; height: 46px; border: 1px solid #e3e3e6; border-radius: 8px; padding: 0 12px; font-size: 13px; color: #333; background: #fff; display: flex; align-items: center; justify-content: space-between; text-align: left; } .co-coupon-select::after { content: "▾"; color: #bbb; font-size: 12px; } /* 결과 페이지 (회원가입 완료 / 주문 완료) */ .result-page { text-align: center; padding: 56px 24px 36px; } .result-page__icon { width: 72px; height: 72px; border-radius: 50%; background: var(--color-point); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; } .result-page__icon .ic { width: 38px; height: 38px; stroke-width: 2.5; } .result-page__title { font-size: 22px; font-weight: 800; margin-bottom: 12px; } .result-page__desc { font-size: 14px; color: var(--color-sub); line-height: 1.65; } .result-card { margin: 28px 16px 0; border: 1px solid var(--color-line); border-radius: 12px; padding: 18px; text-align: left; } .result-card__row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 13px; } .result-card__row .k { color: var(--color-sub); } .result-card__row .v { font-weight: 600; text-align: right; } .result-card__row.total .v { color: var(--color-point); font-weight: 800; font-size: 15px; } .result-btns { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--app-max); display: flex; gap: 10px; padding: 12px 16px calc(12px + var(--safe-bottom)); background: #fff; border-top: 1px solid var(--color-line); z-index: 200; } .result-btns .auth__btn { margin-top: 0; } /* ===================== 주문 상세 / 배송조회 ===================== */ .invoice { display: flex; justify-content: space-between; align-items: center; background: var(--color-bg-soft); border-radius: 10px; padding: 14px; margin-bottom: 18px; } .invoice__co { font-size: 12px; color: var(--color-sub); } .invoice__no { font-size: 15px; font-weight: 800; margin-top: 2px; } .invoice__btn { font-size: 12px; border: 1px solid var(--color-line); border-radius: 20px; padding: 8px 13px; background: #fff; white-space: nowrap; } .track { padding: 4px 0 0; } .track__step { display: flex; gap: 14px; position: relative; padding-bottom: 24px; } .track__step:last-child { padding-bottom: 0; } .track__dot { width: 14px; height: 14px; border-radius: 50%; background: #ddd; flex: 0 0 auto; margin-top: 2px; z-index: 1; } .track__step.done .track__dot { background: var(--color-point); } .track__step.current .track__dot { background: var(--color-point); box-shadow: 0 0 0 4px #fde1ec; } .track__step:not(:last-child)::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; width: 2px; background: #eee; } .track__step.done:not(:last-child)::before { background: var(--color-point); } .track__label { font-size: 14px; font-weight: 600; color: #aaa; } .track__step.done .track__label, .track__step.current .track__label { color: #1a1a1a; } .track__time { font-size: 12px; color: var(--color-sub); margin-top: 3px; } /* ===================== 검색 ===================== */ .search-bar2 { display: flex; align-items: center; gap: 8px; padding: 8px 8px; border-bottom: 1px solid var(--color-line); position: sticky; top: 0; background: #fff; z-index: 100; } .search-bar2 .nav-ico { font-size: 26px; padding: 0 4px; display: flex; align-items: center; } .search-input { flex: 1; height: 40px; background: var(--color-bg-soft); border-radius: 20px; display: flex; align-items: center; padding: 0 14px; gap: 8px; color: var(--color-sub); } .search-input input { border: none; background: none; flex: 1; font-size: 14px; outline: none; color: #1a1a1a; } .search-keys { padding: 18px 16px; } .search-keys__title { font-size: 14px; font-weight: 800; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: baseline; } .search-keys__title a { font-size: 12px; color: var(--color-sub); font-weight: 400; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { border: 1px solid var(--color-line); border-radius: 18px; padding: 8px 14px; font-size: 13px; color: #555; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .chip .x { color: #bbb; font-size: 14px; } .rank-list li { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 14px; cursor: pointer; } .rank-list .rk { width: 18px; font-weight: 800; color: var(--color-point); flex: 0 0 auto; } .rank-list .up { margin-left: auto; font-size: 11px; color: #aaa; } /* ===================== 리뷰 ===================== */ .rv-summary { display: flex; gap: 22px; padding: 22px 16px; align-items: center; border-bottom: 8px solid var(--color-bg-soft); } .rv-score { text-align: center; flex: 0 0 auto; } .rv-score__num { font-size: 38px; font-weight: 800; line-height: 1; } .rv-score__stars { color: #ffb800; font-size: 14px; margin-top: 8px; display: inline-flex; gap: 1px; } .rv-score__cnt { font-size: 12px; color: var(--color-sub); margin-top: 6px; } .rv-bars { flex: 1; } .rv-bar { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #999; margin-bottom: 5px; } .rv-bar__k { width: 24px; flex: 0 0 auto; } .rv-bar__track { flex: 1; height: 6px; background: #eee; border-radius: 3px; overflow: hidden; } .rv-bar__fill { height: 100%; background: var(--color-point); } .rv-filter { display: flex; gap: 8px; padding: 14px 16px; overflow-x: auto; border-bottom: 1px solid var(--color-line); } .rv-filter::-webkit-scrollbar { display: none; } .rv-chip { flex: 0 0 auto; border: 1px solid var(--color-line); border-radius: 18px; padding: 7px 14px; font-size: 13px; color: #555; cursor: pointer; } .rv-chip.is-active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; } .review { padding: 16px; border-bottom: 1px solid var(--color-line); } .review__top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .review__user { font-size: 13px; font-weight: 700; } .review__stars { color: #ffb800; font-size: 12px; display: inline-flex; } .review__date { margin-left: auto; font-size: 12px; color: #bbb; } .review__opt { font-size: 12px; color: var(--color-sub); background: var(--color-bg-soft); border-radius: 6px; padding: 5px 9px; display: inline-block; margin-bottom: 8px; } .review__text { font-size: 14px; color: #333; line-height: 1.6; } .review__photos { display: flex; gap: 6px; margin-top: 10px; } .review__photos img { width: 74px; height: 74px; border-radius: 8px; object-fit: cover; } .review__help { margin-top: 12px; font-size: 12px; color: #888; border: 1px solid var(--color-line); border-radius: 18px; padding: 7px 12px; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; } /* ===================== Q&A / FAQ 아코디언 ===================== */ .acc-item { border-bottom: 1px solid var(--color-line); } .acc-q { display: flex; gap: 10px; align-items: flex-start; padding: 16px; cursor: pointer; } .acc-q__title { flex: 1; font-size: 14px; line-height: 1.45; } .acc-q__arrow { color: #bbb; transition: transform .2s; flex: 0 0 auto; } .acc-item.open .acc-q__arrow { transform: rotate(180deg); } .acc-a { display: none; padding: 0 16px 16px 40px; font-size: 13px; color: #555; line-height: 1.65; } .acc-item.open .acc-a { display: block; } .badge-q { font-size: 12px; font-weight: 800; color: var(--color-point); flex: 0 0 auto; } .badge-status { margin-left: auto; font-size: 11px; font-weight: 700; flex: 0 0 auto; } .badge-status.done { color: var(--color-point); } .badge-status.wait { color: #aaa; } .faq-cat { display: flex; gap: 8px; padding: 14px 16px; overflow-x: auto; border-bottom: 1px solid var(--color-line); } .faq-cat::-webkit-scrollbar { display: none; } /* ===================== 이벤트 / 기획전 ===================== */ .event-card { display: block; margin: 14px 16px; border-radius: 12px; overflow: hidden; border: 1px solid var(--color-line); } .event-card img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; } .event-card__body { padding: 14px; } .event-card__title { font-size: 15px; font-weight: 800; } .event-card__desc { font-size: 13px; color: var(--color-sub); margin-top: 4px; line-height: 1.45; } .event-card__date { font-size: 12px; color: #aaa; margin-top: 8px; } /* ===================== 브랜드관 ===================== */ .brand-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--color-line); } .brand-logo { width: 50px; height: 50px; border-radius: 50%; background: var(--color-bg-soft); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; color: #888; flex: 0 0 auto; } .brand-info { flex: 1; min-width: 0; } .brand-name { font-size: 15px; font-weight: 700; } .brand-desc { font-size: 12px; color: var(--color-sub); margin-top: 2px; } .brand-follow { font-size: 12px; font-weight: 700; color: var(--color-point); border: 1px solid var(--color-point); border-radius: 20px; padding: 7px 14px; white-space: nowrap; } .brand-follow.is-on { color: #aaa; border-color: var(--color-line); } /* ===================== 알림함 ===================== */ .noti { display: flex; gap: 12px; padding: 16px; border-bottom: 1px solid var(--color-line); } .noti.unread { background: #fff5f8; } .noti__ic { width: 40px; height: 40px; border-radius: 50%; background: var(--color-bg-soft); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--color-point); font-size: 19px; } .noti__body { flex: 1; } .noti__title { font-size: 14px; font-weight: 700; } .noti__desc { font-size: 13px; color: #666; margin-top: 3px; line-height: 1.45; } .noti__time { font-size: 11px; color: #aaa; margin-top: 5px; } /* ===================== 설정(토글 스위치) ===================== */ .switch { position: relative; width: 46px; height: 26px; flex: 0 0 auto; display: inline-block; } .switch input { opacity: 0; width: 0; height: 0; } .switch__slider { position: absolute; inset: 0; background: #ddd; border-radius: 26px; transition: .2s; cursor: pointer; } .switch__slider::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; } .switch input:checked + .switch__slider { background: var(--color-point); } .switch input:checked + .switch__slider::before { transform: translateX(20px); } .set-group__title { font-size: 12px; font-weight: 700; color: var(--color-sub); padding: 18px 16px 8px; } .set-row { display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-bottom: 1px solid var(--color-line); } .set-row__label { flex: 1; font-size: 14px; } .set-row__sub { font-size: 12px; color: var(--color-sub); margin-top: 3px; } .set-row .arrow { color: #ccc; font-size: 18px; } /* ===================== 리뷰 작성 ===================== */ .rvw-stars { display: flex; gap: 8px; justify-content: center; padding: 10px 0 6px; } .rvw-stars button { font-size: 36px; line-height: 1; color: #ddd; } .photo-add { display: flex; gap: 8px; flex-wrap: wrap; } .photo-add__btn { width: 74px; height: 74px; border: 1px dashed #ccc; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #aaa; font-size: 11px; } .photo-add__btn .ic { width: 22px; height: 22px; } /* ===================== 쿠폰함 ===================== */ .cpn-reg { display: flex; gap: 8px; padding: 16px; border-bottom: 8px solid var(--color-bg-soft); } .cpn-reg input { flex: 1; height: 46px; border: 1px solid #e3e3e6; border-radius: 8px; padding: 0 12px; font-size: 13px; } .cpn-reg .field__btn { height: 46px; } .cpn-card { display: flex; border: 1px solid var(--color-line); border-radius: 12px; overflow: hidden; margin-bottom: 12px; } .cpn-card.expired { opacity: .55; } .cpn-card__left { width: 108px; flex: 0 0 auto; background: #fff5f8; padding: 16px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-right: 1px dashed var(--color-line); } .cpn-card.expired .cpn-card__left { background: var(--color-bg-soft); } .cpn-card__amt { font-size: 22px; font-weight: 800; color: var(--color-point); line-height: 1.1; } .cpn-card.expired .cpn-card__amt { color: #999; } .cpn-card__amt .unit { font-size: 14px; } .cpn-card__right { flex: 1; padding: 14px; min-width: 0; } .cpn-card__name { font-size: 14px; font-weight: 700; } .cpn-card__cond { font-size: 12px; color: var(--color-sub); margin-top: 5px; line-height: 1.5; } .cpn-card__exp { font-size: 11px; color: #aaa; margin-top: 8px; } .cpn-empty { text-align: center; color: var(--color-sub); padding: 60px 0; font-size: 13px; } /* ===================== 배송지 관리 ===================== */ .addr-card { padding: 16px; border-bottom: 1px solid var(--color-line); } .addr-card__head { display: flex; justify-content: space-between; align-items: center; } .addr-card__name { font-size: 14px; font-weight: 700; } .addr-card__act { display: flex; gap: 6px; flex: 0 0 auto; } .addr-card__act button { font-size: 12px; color: #888; border: 1px solid var(--color-line); border-radius: 6px; padding: 5px 10px; } .addr-card__line { font-size: 13px; color: #555; margin-top: 8px; line-height: 1.45; } .addr-card__phone { font-size: 12px; color: #888; margin-top: 3px; } .addr-card__default { margin-top: 12px; font-size: 12px; color: var(--color-point); border: 1px solid var(--color-point); border-radius: 6px; padding: 6px 12px; } /* ===================== 적립금 내역 ===================== */ .pt-summary { padding: 26px 16px; text-align: center; border-bottom: 8px solid var(--color-bg-soft); } .pt-summary__label { font-size: 13px; color: var(--color-sub); } .pt-summary__value { font-size: 32px; font-weight: 800; color: var(--color-point); margin-top: 6px; } .pt-summary__expire { font-size: 12px; color: var(--color-sub); margin-top: 10px; } .pt-row { display: flex; justify-content: space-between; align-items: center; padding: 15px 16px; border-bottom: 1px solid var(--color-line); } .pt-row__title { font-size: 14px; } .pt-row__date { font-size: 12px; color: var(--color-sub); margin-top: 4px; } .pt-row__amt { font-size: 15px; font-weight: 800; flex: 0 0 auto; } .pt-row__amt.plus { color: var(--color-point); } .pt-row__amt.minus { color: #888; } /* ===================== 나의 리뷰 (작성 가능) ===================== */ .rvw-item { display: flex; gap: 10px; padding: 16px; border-bottom: 1px solid var(--color-line); align-items: center; } .rvw-item__thumb { width: 60px; height: 74px; border-radius: 8px; overflow: hidden; background: var(--color-bg-soft); flex: 0 0 auto; } .rvw-item__thumb img { width: 100%; height: 100%; object-fit: cover; } .rvw-item__body { flex: 1; min-width: 0; } .rvw-item__brand { font-size: 12px; font-weight: 700; } .rvw-item__name { font-size: 13px; color: #444; margin-top: 2px; } .rvw-item__date { font-size: 12px; color: var(--color-sub); margin-top: 4px; } .rvw-item__btn { font-size: 12px; font-weight: 700; color: var(--color-point); border: 1px solid var(--color-point); border-radius: 8px; padding: 9px 13px; white-space: nowrap; flex: 0 0 auto; } /* ===================== 결제수단 관리 ===================== */ .pm-card { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--color-line); } .pm-card__ic { width: 42px; height: 42px; border-radius: 8px; background: #fff5f8; display: flex; align-items: center; justify-content: center; color: var(--color-point); flex: 0 0 auto; } .pm-card__info { flex: 1; min-width: 0; } .pm-card__name { font-size: 14px; font-weight: 700; } .pm-card__no { font-size: 12px; color: var(--color-sub); margin-top: 3px; } .pm-card__del { font-size: 12px; color: #aaa; border: 1px solid var(--color-line); border-radius: 6px; padding: 6px 10px; flex: 0 0 auto; } /* ===================== 취소/교환/반품 (클레임) ===================== */ .claim-badge { font-size: 11px; font-weight: 700; border-radius: 4px; padding: 3px 8px; flex: 0 0 auto; } .claim-badge.cancel { background: #eee; color: #666; } .claim-badge.exchange { background: #e7f0ff; color: #4b7bec; } .claim-badge.return { background: #fff0f5; color: var(--color-point); } .claim-row { display: block; padding: 16px; border-bottom: 1px solid var(--color-line); } .claim-row__top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .claim-row__status { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--color-point); } .claim-row__status.gray { color: #999; } .claim-row__date { font-size: 12px; color: var(--color-sub); } .reason-select { width: 100%; height: 48px; border: 1px solid #e3e3e6; border-radius: 8px; padding: 0 12px; font-size: 13px; background: #fff; } /* ===================== 추천인 코드 / 친구초대 ===================== */ .referral-box { margin: 16px; border: 1px solid var(--color-point); border-radius: 14px; padding: 22px 20px; text-align: center; background: #fff5f8; } .referral-box__label { font-size: 13px; color: var(--color-sub); } .referral-box__code { font-size: 30px; font-weight: 800; letter-spacing: 3px; color: var(--color-point); margin: 8px 0 16px; } .referral-box__btns { display: flex; gap: 10px; } .referral-box__btns button { flex: 1; height: 46px; border-radius: 10px; font-size: 14px; font-weight: 700; } .ref-copy { background: #fff; border: 1px solid var(--color-point); color: var(--color-point); } .ref-share { background: var(--color-point); color: #fff; } .ref-stat { display: flex; border: 1px solid var(--color-line); border-radius: 12px; margin: 0 16px; } .ref-stat__cell { flex: 1; text-align: center; padding: 18px 0; } .ref-stat__cell + .ref-stat__cell { border-left: 1px solid var(--color-line); } .ref-stat__num { font-size: 22px; font-weight: 800; } .ref-stat__num.point { color: var(--color-point); } .ref-stat__lbl { font-size: 12px; color: var(--color-sub); margin-top: 4px; } .ref-how { padding: 18px 20px; } .ref-how li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; font-size: 13px; color: #555; line-height: 1.5; } .ref-how .step { width: 24px; height: 24px; border-radius: 50%; background: var(--color-point); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } /* 마이페이지 추천 미니카드 */ .my-ref { margin: 0 16px 8px; border: 1px solid var(--color-line); border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; } .my-ref__ic { width: 40px; height: 40px; border-radius: 10px; background: #fff5f8; color: var(--color-point); display: flex; align-items: center; justify-content: center; font-size: 19px; flex: 0 0 auto; } .my-ref__body { flex: 1; min-width: 0; } .my-ref__t { font-size: 13px; font-weight: 700; } .my-ref__code { font-size: 12px; color: var(--color-point); font-weight: 700; letter-spacing: 1px; } .my-ref__go { font-size: 12px; color: #fff; background: var(--color-point); border-radius: 8px; padding: 8px 12px; font-weight: 700; white-space: nowrap; } /* 토스트 */ .toast { position: fixed; left: 50%; bottom: calc(90px + var(--safe-bottom)); transform: translateX(-50%) translateY(10px); max-width: calc(var(--app-max) - 40px); background: rgba(0, 0, 0, 0.85); color: #fff; font-size: 13px; padding: 12px 18px; border-radius: 24px; z-index: 2000; opacity: 0; pointer-events: none; transition: all .25s; white-space: nowrap; } .toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); } /* 유틸 */ .spacer-lg { height: 24px; }