/* =====================================================================
   Sharelook storefront
   치수·타이포·컬러 토큰은 레퍼런스(1280 viewport) 실측값 기준
   ===================================================================== */
:root {
    --text-strong: oklch(0.12786 0.025832 253.799 / 0.851);
    --text-normal: oklch(0.143993 0.042542 258.756 / 0.7216);
    --text-subtle: oklch(0.169589 0.059905 261.062 / 0.6);
    --text-sub-neutral: oklch(0.183595 0.073718 259.908 / 0.5098);
    --text-faded: oklch(0.203625 0.080226 260.804 / 0.451);
    --gray1000: oklch(0.293463 0.016665 266.434);
    --gray800: oklch(0.424839 0.022533 268.437);
    --gray700: oklch(0.616213 0.028191 263.726);
    --gray650: oklch(0.670173 0.027089 266.645);
    --gray500: oklch(0.753546 0.023369 264.289);
    --gray300: oklch(0.866348 0.01456 263.714);
    --gray150: oklch(0.952217 0.004582 269.074);
    --gray100: oklch(0.966927 0.003202 261.347);
    --gray50: oklch(0.982425 0.00145 286.373);
    --outline: oklch(0.228318 0.097639 260.661 / 0.1882);
    --fill-secondary: oklch(0.239933 0.089905 261.268 / 0.0706);
    --primary: oklch(0.551898 0.214659 289.15);
    --primary-strong: oklch(0.485854 0.204969 289.234);
    --primary-light: oklch(0.741657 0.155654 289.383);
    --primary-bg: oklch(0.983984 0.008704 286.239);
    --accent: oklch(0.637282 0.204285 42.232);
    --like: oklch(0.63 0.24 15);
    --shadow: oklch(0.242997 0.022695 260.518);
    --white: oklch(1 0 0);
    --gnb-h: 92px;
    --side: 64px;
    --font: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
            "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 16px; color: #000; background: var(--white); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; }
[hidden] { display: none !important; }
.ic { display: block; flex-shrink: 0; }

.wrap { padding: 0 var(--side); }
.main { min-height: 60vh; }

/* ---------------------------------------------------------------------
   GNB (height 92 / padding 26 64 / sticky)
   --------------------------------------------------------------------- */
.gnb {
    position: sticky; top: 0; z-index: 300;
    display: flex; justify-content: space-between; align-items: center;
    height: var(--gnb-h); padding: 26px var(--side);
    background: var(--white);
}
.gnb__left { display: flex; align-items: center; gap: 40px; }
.gnb__logo {
    display: flex; align-items: center; min-width: 100px; height: 36px;
    font-size: 22px; font-weight: 800; letter-spacing: -0.7px; color: #000; white-space: nowrap;
}
.gnb__nav { display: flex; gap: 40px; padding: 0 40px; }
.gnb__tab { font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.054px; color: var(--text-strong); white-space: nowrap; }
.gnb__tab.is-active, .gnb__tab:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.gnb__right { display: flex; align-items: center; gap: 32px; }
.gnb__icons { display: flex; gap: 16px; }
.gnb__icon { position: relative; display: flex; flex-direction: column; align-items: center; width: 48px; height: 40px; color: var(--gray1000); }
.gnb__icon span { font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; }
.gnb__dot { position: absolute; top: 2px; right: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--like); }

/* 검색 */
.search { position: relative; width: 280px; }
.search__box {
    display: flex; align-items: center; gap: 6px; height: 40px; padding: 11px 14px;
    background: var(--white); border: 1px solid var(--outline); border-radius: 6px;
}
.search.is-open .search__box { border-color: var(--primary-light); }
.search__icon { color: var(--text-strong); }
.search__input {
    flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent;
    font-size: 14px; line-height: 18px; font-weight: 500; color: var(--gray1000);
}
.search__input::placeholder { color: var(--gray700); }
.search__clear { display: none; color: var(--gray500); }
.search.has-value .search__clear { display: block; }
.search__drop { display: none; position: absolute; top: 48px; left: 0; width: 432px; z-index: 10; }
.search.is-open .search__drop { display: block; }
.sdrop {
    padding: 12px 0 16px; background: var(--white); border-radius: 16px;
    box-shadow: 0 4px 24px -2px oklch(0.242997 0.022695 260.518 / 0.1608), 0 0 1px oklch(0.242997 0.022695 260.518 / 0.2);
}
.sdrop__date { padding: 3px 5px; border: 1px solid var(--outline); border-radius: 6px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-sub-neutral); }
.sdrop__rank { display: grid; grid-template-columns: 1fr 1fr; padding-bottom: 0; }
.sdrop__rank li { display: flex; align-items: center; padding: 10px 8px; }
.sdrop__no { width: 32px; text-align: center; font-size: 16px; line-height: 20px; font-weight: 600; color: var(--gray1000); }
.sdrop__no.is-top { color: var(--accent); }
.sdrop__rank a { font-size: 16px; line-height: 20px; font-weight: 500; color: var(--gray1000); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sdrop__rank a:hover { text-decoration: underline; }
.sdrop__recent { padding-bottom: 8px; }
.sdrop__clear-all { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-sub-neutral); }
.sdrop__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 16px 4px; }
.sdrop__chip {
    display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 8px 0 12px; border-radius: 999px;
    background: var(--gray100); font-size: 13px; font-weight: 500; color: var(--text-normal);
}
.sdrop__chip button { color: var(--gray500); }
.sdrop__suggest li a { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--gray1000); }
.sdrop__suggest li a .ic { color: var(--gray500); }
.sdrop__suggest li a:hover, .sdrop__suggest li a.is-focus { background: var(--gray50); }
.sdrop__suggest mark { background: none; color: var(--primary); }

/* ---------------------------------------------------------------------
   공통 섹션 헤더 (padding 20 16 6 / title 18px 600)
   --------------------------------------------------------------------- */
.sec-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 20px 16px 6px; }
.sec-head--sm { padding: 16px 16px 6px; }
.sec-head--lg { padding: 24px 16px 8px; }
.sec-head--search { padding: 20px 16px 8px; }
.sec-head__title { font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.054px; color: var(--text-strong); }
.sec-head--sm .sec-head__title { font-size: 16px; line-height: 20px; letter-spacing: 0; }
.sec-head--lg .sec-head__title { font-size: 20px; line-height: 28px; }
.sec-head__count { margin-left: 2px; color: var(--primary); }
.sec-head__sub { margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--text-subtle); }
.sec-head__ad { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-subtle); }
.sec-head__info { color: var(--gray700); cursor: pointer; }
.sec-head__more { color: var(--text-strong); }
.sec-head__link { display: flex; align-items: center; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text-strong); }

/* ---------------------------------------------------------------------
   가로 스크롤 + 좌우 화살표 (42px 원형 버튼)
   --------------------------------------------------------------------- */
.hscroll { position: relative; }
.hscroll__track { display: flex; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.hscroll__track::-webkit-scrollbar { display: none; }
.hscroll__btn {
    position: absolute; top: 50%; z-index: 100; display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; padding: 8px; margin-top: -21px; border-radius: 50%;
    background: var(--white); border: 1px solid var(--gray50); color: var(--gray1000);
    box-shadow: 0 4px 8px -2px oklch(0.242997 0.022695 260.518 / 0.0784);
    opacity: 0; visibility: hidden; transition: opacity .15s;
}
.hscroll__btn--prev { left: 16px; }
.hscroll__btn--next { right: 16px; }
.hscroll:hover .hscroll__btn.is-show { opacity: 1; visibility: visible; }

/* ---------------------------------------------------------------------
   탭 (height 44 / text 15px)
   --------------------------------------------------------------------- */
.tabs-sticky { position: sticky; top: var(--gnb-h); z-index: 200; background: var(--white); }
.tabs-sticky--line { border-bottom: 1px solid var(--gray150); }
.tabs { position: relative; gap: 16px; height: 44px; padding: 0 16px; background: var(--white); }
.tabs__item {
    position: relative; flex-shrink: 0; display: flex; align-items: center; padding: 14px 2px 12px;
    font-size: 15px; line-height: 18px; font-weight: 500; color: var(--text-sub-neutral); white-space: nowrap;
}
.tabs__item.is-active { font-weight: 600; color: var(--text-strong); }
.tabs__item.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gray1000); }
.tabs--fill { display: flex; }
.tabs--fill .tabs__item { flex: 1; justify-content: center; }

/* ---------------------------------------------------------------------
   히어로 배너 (활성 410px, 양옆 scale .84)
   --------------------------------------------------------------------- */
.hero { position: relative; margin: 8px 0 48px; }
.hero__viewport { overflow: hidden; height: 410px; }
.hero__track { display: flex; height: 100%; will-change: transform; }
.hero__track.is-anim { transition: transform .45s ease; }
.hero__slide { flex: 0 0 410px; width: 410px; height: 410px; margin-right: -20px; transform: scale(.84); transition: transform .45s ease; }
.hero__slide.is-active { transform: scale(1); }
.hero__card {
    position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 16px;
    background: var(--gray150);
}
.hero__card::after {
    content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none;
    box-shadow: inset 0 0 0 .5px oklch(0.164 0.03 268 / 0.1);
}
.hero__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__shade {
    position: absolute; left: 0; right: 0; bottom: 0; height: 61%;
    background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0) 8%, rgba(0,0,0,.02) 16%, rgba(0,0,0,.06) 28%, rgba(0,0,0,.14) 42%, rgba(0,0,0,.26) 60%, rgba(0,0,0,.38) 80%, rgba(0,0,0,.45) 100%);
}
.hero__text { position: absolute; z-index: 3; left: 0; right: 0; bottom: 32px; display: flex; flex-direction: column; gap: 6px; padding-left: 36px; }
.hero__title { font-size: 24px; line-height: 31px; font-weight: 600; letter-spacing: -0.12px; color: var(--white); }
.hero__sub { font-size: 14px; line-height: 18px; font-weight: 600; color: oklch(1 0 0 / 0.851); }
.hero__btn { opacity: 1; visibility: visible; display: none; }
.hero:hover .hero__btn { display: flex; }

/* ---------------------------------------------------------------------
   바로가기 아이콘 (60px, gap 8)
   --------------------------------------------------------------------- */
.shortcuts { display: flex; justify-content: center; padding: 6px 0; background: var(--white); }
.shortcuts__grid { display: grid; grid-auto-flow: column; grid-auto-columns: 60px; gap: 8px; padding: 14px 10px; }
.sc-item { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 60px; }
.sc-item__img {
    display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; overflow: hidden;
    border-radius: 12px; background: var(--gray100); color: var(--gray1000);
}
.sc-item__img--r16 { border-radius: 16px; background: var(--gray150); }
.sc-item__img img { width: 100%; height: 100%; object-fit: cover; }
.sc-item__new { font-size: 16px; font-weight: 800; letter-spacing: -0.3px; color: var(--gray1000); }
.sc-item__label { max-width: 60px; text-align: center; font-size: 13px; line-height: 16.7px; font-weight: 600; color: var(--text-normal); word-break: keep-all; }

/* ---------------------------------------------------------------------
   라이브 방송 (9:16 카드 가로 캐러셀)
   --------------------------------------------------------------------- */
.lives { margin-bottom: 24px; }
.lives__onair { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: oklch(0.96 0.03 25); font-size: 12px; line-height: 18px; font-weight: 700; color: oklch(0.58 0.22 25); vertical-align: 2px; }
.lives__onair i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: live-pulse 1.4s ease-in-out infinite; }
@keyframes live-pulse { 50% { opacity: .3; } }
.lives__list .hscroll__track { gap: 8px; padding: 6px 16px; }
.lives__list .hscroll__btn { top: 184px; }
.lcard { position: relative; flex: 0 0 200px; width: 200px; }
.lcard__media { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 12px; background: var(--gray1000); }
.lcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.lcard__media:hover img { transform: scale(1.03); }
.lcard__shade { position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 48%, rgba(0,0,0,.62) 100%); }
.lcard--ended .lcard__media img { filter: saturate(.85); }
.lcard__badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 4px; }
.lbadge { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 7px; border-radius: 4px; font-size: 11px; font-weight: 700; color: var(--white); white-space: nowrap; }
.lbadge--live { background: oklch(0.62 0.24 25); letter-spacing: .04em; }
.lbadge--dim { background: rgba(0, 0, 0, .5); font-weight: 600; backdrop-filter: blur(4px); }
.lcard__text { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 3px; color: var(--white); }
.lcard__brand { font-size: 12px; line-height: 16px; font-weight: 600; opacity: .85; }
.lcard__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; line-height: 21px; font-weight: 700; letter-spacing: -0.2px; }
.lcard__benefit { font-size: 12px; line-height: 16px; font-weight: 700; color: oklch(0.9 0.13 95); }
.lcard__alarm {
    position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 3px; height: 26px; padding: 0 9px;
    border-radius: 999px; background: rgba(255,255,255,.92); font-size: 11px; font-weight: 700; color: var(--gray1000);
}
.lcard__alarm[aria-pressed="true"] { background: var(--primary); color: var(--white); }
.lcard__product { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 0 2px; }
.lcard__product img { flex-shrink: 0; width: 40px; height: 40px; border-radius: 6px; object-fit: cover; background: var(--gray150); }
.lcard__pinfo { display: flex; flex-direction: column; min-width: 0; }
.lcard__pname { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; line-height: 17px; color: var(--text-subtle); }
.lcard__price { font-size: 14px; line-height: 19px; font-weight: 700; color: var(--gray1000); }
.lcard__price b { color: var(--primary); }

/* 라이브커머스 상세: 세로 플레이어 + 오버레이(채팅·좋아요·상품) */
.lc { display: flex; align-items: flex-start; justify-content: center; gap: 40px; padding: 20px 16px 40px; }
.lc__stage { position: sticky; top: calc(var(--gnb-h) + 12px); flex-shrink: 0; }
.lc__player {
    position: relative; height: min(820px, calc(100vh - var(--gnb-h) - 40px)); min-height: 560px; aspect-ratio: 9 / 16;
    overflow: hidden; border-radius: 16px; background: #000; color: var(--white);
}
.lc__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lc__media--kenburns { animation: kenburns 24s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.12) translate(-2%, -2%); } }
.lc__shade { position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 45%, rgba(0,0,0,.7) 100%); pointer-events: none; }
.lc__top { position: absolute; top: 14px; left: 14px; right: 10px; display: flex; justify-content: space-between; align-items: flex-start; }
.lc__host { display: flex; align-items: center; gap: 8px; }
.lc__host img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(255,255,255,.8); object-fit: cover; }
.lc__host b { display: block; font-size: 14px; line-height: 18px; font-weight: 700; }
.lc__badges { display: flex; gap: 4px; margin-top: 3px; }
.lc__close { display: flex; padding: 4px; color: var(--white); }
.lc__notice { position: absolute; top: 70px; left: 14px; right: 60px; display: flex; gap: 8px; padding: 8px 12px; border-radius: 10px; background: rgba(0,0,0,.42); backdrop-filter: blur(6px); font-size: 13px; line-height: 18px; }
.lc__notice b { flex-shrink: 0; color: oklch(0.9 0.13 95); }
.lc__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.lc__center > span { font-size: 14px; opacity: .9; }
.lc__center b { font-size: 40px; line-height: 48px; font-weight: 800; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.lc__center em { font-style: normal; font-size: 14px; opacity: .85; }
.lc__alarm { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--white); font-size: 14px; font-weight: 700; color: var(--gray1000); }
.lc__alarm[aria-pressed="true"] { background: var(--primary); color: var(--white); }

.lc__chat {
    position: absolute; left: 12px; right: 72px; bottom: 132px; max-height: 38%; overflow-y: auto; display: flex; flex-direction: column; gap: 6px;
    scrollbar-width: none; -webkit-mask-image: linear-gradient(transparent 0, #000 40px); mask-image: linear-gradient(transparent 0, #000 40px);
}
.lc__chat::-webkit-scrollbar { display: none; }
.lc__msg { align-self: flex-start; max-width: 100%; padding: 6px 10px; border-radius: 12px; background: rgba(0,0,0,.32); font-size: 13px; line-height: 18px; word-break: break-all; animation: msg-in .25s ease; }
.lc__msg b { margin-right: 6px; font-weight: 700; color: rgba(255,255,255,.75); }
.lc__msg--host { background: color-mix(in oklch, var(--primary) 82%, transparent); }
.lc__msg--host b { color: var(--white); }
.lc__msg--host b::before { content: "진행자 "; }
.lc__msg--system { background: rgba(255,255,255,.18); color: rgba(255,255,255,.9); }
.lc__msg--mine { background: rgba(255,255,255,.88); color: var(--gray1000); }
.lc__msg--mine b { color: var(--primary-strong); }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } }

.lc__actions { position: absolute; right: 10px; bottom: 140px; display: flex; flex-direction: column; gap: 14px; }
.lc__act { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 48px; color: var(--white); font-size: 11px; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.lc__act .ic { width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: rgba(0,0,0,.32); }
.lc__act--like .ic { color: oklch(0.7 0.22 15); }
.lc__act--like:active .ic { transform: scale(.9); }
.lc__hearts { position: absolute; right: 14px; bottom: 200px; width: 40px; height: 300px; pointer-events: none; }
.lc__heart { position: absolute; bottom: 0; left: 8px; width: 24px; height: 24px; animation: heart-up 1.6s ease-out forwards; }
@keyframes heart-up {
    0% { opacity: 0; transform: translate(0, 0) scale(.6); }
    15% { opacity: 1; transform: translate(-4px, -30px) scale(1); }
    100% { opacity: 0; transform: translate(var(--dx, -10px), -280px) scale(1.1); }
}

.lc__bottom { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.lc__pin { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.95); color: var(--gray1000); text-align: left; transition: opacity .3s; }
.lc__pin.is-swap { opacity: 0; }
.lc__pin img { flex-shrink: 0; width: 52px; height: 52px; border-radius: 8px; object-fit: cover; }
.lc__pininfo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lc__pinlabel { font-size: 11px; font-weight: 700; color: oklch(0.58 0.22 25); }
.lc__pinname { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; line-height: 18px; color: var(--text-normal); }
.lc__pinprice { font-size: 15px; font-weight: 700; }
.lc__pinprice b { color: var(--primary); }
.lc__pinbtn { flex-shrink: 0; padding: 8px 12px; border-radius: 8px; background: var(--primary); font-size: 13px; font-weight: 700; color: var(--white); }
.lc__input { display: flex; gap: 6px; }
.lc__input input { flex: 1; min-width: 0; height: 40px; padding: 0 14px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(0,0,0,.35); font-size: 14px; color: var(--white); outline: 0; }
.lc__input input::placeholder { color: rgba(255,255,255,.75); }
.lc__input input:focus { border-color: rgba(255,255,255,.8); }
.lc__input button { flex-shrink: 0; height: 40px; padding: 0 14px; border-radius: 999px; background: var(--white); font-size: 13px; font-weight: 700; color: var(--gray1000); }
.lc__input :disabled { opacity: .55; cursor: not-allowed; }

.lc__side { flex: 1; min-width: 0; max-width: 520px; display: flex; flex-direction: column; gap: 12px; }
.lprod__buy { flex-shrink: 0; }

/* 옵션 선택 시트 */
.lsheet { position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center; }
.lsheet__dim { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.lsheet__box { position: relative; width: 420px; max-width: calc(100vw - 32px); max-height: calc(100vh - 48px); overflow-y: auto; padding: 20px; border-radius: 16px; background: var(--white); animation: cpanel-in .18s ease; }
.lsheet__head { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--gray150); }
.lsheet__head img { flex-shrink: 0; width: 72px; height: 72px; border-radius: 8px; object-fit: cover; }
.lsheet__head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lsheet__close { color: var(--gray700); }
.lsheet__label { margin: 16px 0 8px; font-size: 14px; font-weight: 600; color: var(--text-strong); }
.lsheet__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.lsheet__opt { min-width: 64px; height: 40px; padding: 0 14px; border: 1px solid var(--outline); border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--text-strong); }
.lsheet__opt.is-on { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--primary-bg); color: var(--primary-strong); font-weight: 700; }
.lsheet__opt:disabled { color: var(--gray300); text-decoration: line-through; cursor: default; }
.lsheet__qty { display: flex; justify-content: space-between; align-items: center; margin: 16px 0 8px; font-size: 14px; font-weight: 600; color: var(--text-strong); }
.lsheet .picked__total { margin-bottom: 14px; padding: 12px 0 0; border-top: 1px solid var(--gray150); }

/* 라이브 상세 (공통 텍스트) */
.lview { display: flex; align-items: flex-start; gap: 32px; padding: 24px 16px 40px; }
.lview__stage { position: sticky; top: calc(var(--gnb-h) + 16px); flex: 0 0 400px; width: 400px; }
.lview__player { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 16px; background: #000; }
.lview__player img, .lview__player video { width: 100%; height: 100%; object-fit: cover; }
.lview__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: var(--white); }
.lview__center b { font-size: 22px; font-weight: 700; }
.lview__center span { font-size: 14px; opacity: .85; }
.lview__center .ic { opacity: .9; }
.lview__info { flex: 1; min-width: 0; max-width: 560px; display: flex; flex-direction: column; gap: 12px; }
.lview__info .pinfo__brand { padding: 0; }
.lview__title { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.3px; color: var(--text-strong); }
.lview__time { font-size: 14px; color: var(--text-subtle); }
.lview__status { font-weight: 700; color: var(--gray1000); }
.lview__status--live { color: oklch(0.58 0.22 25); }
.lview__status--scheduled { color: var(--primary); }
.lview__benefit { display: flex; gap: 10px; padding: 14px 16px; border-radius: 10px; background: var(--primary-bg); font-size: 14px; line-height: 20px; color: var(--primary-strong); }
.lview__benefit b { flex-shrink: 0; }
.lview__info .btn .ic { margin-right: 6px; }
.lview__subtitle { margin-top: 16px; font-size: 17px; font-weight: 700; color: var(--text-strong); }
.lprod { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--gray150); color: var(--gray700); }
.lprod img { flex-shrink: 0; width: 80px; height: 80px; border-radius: 8px; object-fit: cover; background: var(--gray150); }
.lprod__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lprod__brand { font-size: 13px; font-weight: 600; color: var(--gray1000); }
.lprod__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; color: var(--text-normal); }
.lprod__price { font-size: 16px; font-weight: 700; color: var(--gray1000); }
.lprod__price s { margin-right: 6px; font-size: 12px; font-weight: 500; color: var(--gray500); }
.lprod__price b { margin-right: 4px; color: var(--primary); }
.lprod:hover .lprod__name { text-decoration: underline; }

/* ---------------------------------------------------------------------
   상품 그리드 (6열, gap 16 4) / 카드
   --------------------------------------------------------------------- */
.pgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 4px; padding: 0 16px; }
.pgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pgrid .pcard { padding: 6px 0; }
.pgrid-sentinel { height: 1px; }
.pgrid.is-loading + .pgrid-sentinel { height: 80px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 50 50'%3E%3Ccircle cx='25' cy='25' r='20' fill='none' stroke='%23a6a9b3' stroke-width='4' stroke-dasharray='90 40'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") center/28px no-repeat; }
.feed__grid { padding-top: 0; }

.pcard { min-width: 0; }
.pcard__link { display: flex; flex-direction: column; gap: 10px; }
.pcard__thumb { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: var(--gray150); }
.pcard__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.pcard__link:hover .pcard__thumb img { transform: scale(1.03); }
.pcard__dim { position: absolute; inset: 0; background: oklch(0 0 0 / 0.0196); }
.pcard__rank {
    position: absolute; top: 0; left: 0; min-width: 24px; height: 24px; padding: 3px;
    background: oklch(0 0 0 / 0.851); text-align: center; font-size: 14px; line-height: 18px; font-weight: 600; color: var(--white);
}
.pcard__badge {
    position: absolute; top: 8px; right: 8px; display: flex; align-items: center; justify-content: center;
    width: 37px; height: 37px; border-radius: 50%; background: oklch(0.25 0 0 / 0.85);
    text-align: center; font-size: 12px; line-height: 13px; font-weight: 700; color: var(--white);
}
.pcard__badge--exclusive { background: var(--primary); font-size: 10px; line-height: 11px; }
.pcard__info { display: flex; flex-direction: column; gap: 6px; padding: 0 4px; }
.pcard__body { display: flex; flex-direction: column; gap: 4px; }
.pcard__top { display: flex; flex-direction: column; gap: 1px; }
.pcard__head { display: flex; justify-content: space-between; align-items: center; height: 18px; }
.pcard__brand { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; line-height: 17.9px; font-weight: 600; color: var(--gray1000); }
.pcard__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; line-height: 18px; color: var(--text-subtle); }
.pcard__prices { display: flex; flex-direction: column; }
.pcard__orig { display: flex; align-items: center; gap: 4px; height: 16px; padding-top: 2px; font-size: 11px; line-height: 14px; }
.pcard__label { font-weight: 600; color: var(--primary); }
.pcard__label--wholesale { padding: 0 3px; border-radius: 3px; background: var(--primary); color: var(--white); }
.pinfo__wholesale { margin: -4px 16px 16px; padding: 10px 12px; border-radius: 8px; background: var(--primary-bg); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--primary-strong); }
.pinfo__wholesale a { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.pcard__orig s { font-weight: 500; letter-spacing: -0.033px; color: var(--gray500); }
.pcard__price { display: flex; gap: 4px; font-size: 16px; line-height: 20px; font-weight: 600; letter-spacing: -0.192px; color: var(--gray1000); }
.pcard__rate { color: var(--primary); }
.pcard__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 24px; }
.pcard__rating { display: flex; align-items: center; gap: 1px; height: 16px; font-size: 11px; line-height: 16px; font-weight: 500; color: var(--text-faded); }
.pcard__rating span + span { margin-left: 2px; }
.pcard__tag { padding: 2px 4px; border-radius: 4px; background: var(--gray100); font-size: 10px; line-height: 13px; font-weight: 600; color: var(--text-normal); }

.like { position: relative; width: 18px; height: 18px; color: var(--gray500); }
.like .ic { position: absolute; inset: 0; width: 100%; height: 100%; }
.like__on { color: var(--like); opacity: 0; transform: scale(.6); transition: opacity .15s, transform .2s; }
.like.is-on .like__on { opacity: 1; transform: scale(1); }
.like.is-on .like__off { opacity: 0; }
.like--lg { width: 24px; height: 24px; color: var(--gray1000); }

.empty { padding: 120px 16px; text-align: center; }
.empty__title { font-size: 18px; font-weight: 600; color: var(--text-strong); }
.empty__desc { margin-top: 8px; font-size: 14px; color: var(--text-subtle); }

/* ---------------------------------------------------------------------
   카테고리 페이지
   --------------------------------------------------------------------- */
.crumb { display: flex; align-items: center; height: 40px; margin: 10px 0; padding: 0 16px; }
.crumb__home { display: flex; align-items: center; gap: 6px; padding-left: 2px; font-size: 16px; line-height: 20px; font-weight: 600; color: var(--gray1000); }
.crumb__sep { color: var(--gray500); }
.crumb__current { padding-left: 2px; font-size: 16px; line-height: 20px; font-weight: 600; color: var(--gray1000); }
.best { margin-bottom: 40px; }
.best__list .hscroll__track, .prow__list .hscroll__track { gap: 6px; padding: 6px 16px; }
.best__list .pcard { flex: 0 0 210px; width: 210px; }
.best__list .hscroll__btn, .prow__list .hscroll__btn { top: 112px; }
.fbar-sticky { position: sticky; top: var(--gnb-h); z-index: 150; background: var(--white); }
.fbar-sticky--under-tabs { top: calc(var(--gnb-h) + 44px); }
.fbar { display: flex; align-items: center; height: 54px; }
.fbar__sort { padding: 10px 0 10px 16px; }
.fbar__chips { display: flex; align-items: center; gap: 6px; padding: 10px 16px 10px 6px; }
.fchip-wrap { position: relative; }
.fchip {
    display: flex; align-items: center; gap: 2px; height: 34px; padding: 8px 8px 8px 12px; border-radius: 999px;
    background: var(--gray100); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text-normal); white-space: nowrap;
}
.fchip .ic { color: var(--text-normal); transition: transform .15s; }
.fchip--sort { padding-left: 11px; background: var(--white); box-shadow: inset 0 0 0 1px var(--gray1000); font-weight: 600; color: var(--gray1000); }
.fchip.is-on { background: var(--gray1000); color: var(--white); font-weight: 600; }
.fchip.is-on .ic { color: var(--white); }
.fchip-wrap.is-open .fchip .ic { transform: rotate(180deg); }
.fdrop {
    display: none; position: absolute; top: 42px; left: 0; z-index: 20; min-width: 160px; max-height: 320px; overflow-y: auto;
    padding: 8px 0; background: var(--white); border-radius: 12px;
    box-shadow: 0 4px 24px -2px oklch(0.242997 0.022695 260.518 / 0.1608), 0 0 1px oklch(0.242997 0.022695 260.518 / 0.3);
}
.fchip-wrap.is-open .fdrop { display: block; }
.fdrop__item { display: block; padding: 10px 16px; font-size: 14px; line-height: 18px; font-weight: 500; color: var(--gray1000); white-space: nowrap; }
.fdrop__item:hover { background: var(--gray50); }
.fdrop__item.is-active { font-weight: 700; color: var(--primary); }
.fbar__reset { margin-left: 4px; font-size: 13px; font-weight: 500; color: var(--text-sub-neutral); text-decoration: underline; }

/* ---------------------------------------------------------------------
   검색 결과
   --------------------------------------------------------------------- */
.related { display: flex; align-items: flex-start; padding: 10px 0; }
.related__label { flex-shrink: 0; display: flex; align-items: center; height: 34px; padding: 4px 14px 4px 16px; font-size: 13px; font-weight: 600; color: var(--text-normal); }
.related__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.related__chip {
    display: flex; align-items: center; height: 34px; padding: 8px 12px 8px 8px; border-radius: 6px; background: var(--white);
    box-shadow: 0 0 0 .5px var(--outline); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text-normal);
}
.related__chip .ic { margin-right: 4px; }
.related__chip:hover { background: var(--gray50); }
.divider-6 { height: 6px; background: var(--gray150); }
.divider-8 { height: 8px; background: var(--gray150); }
.divider-1 { height: 1px; background: var(--gray150); }
.spacer-8 { height: 8px; }

/* ---------------------------------------------------------------------
   카테고리 패널 (668 x 744, radius 16)
   --------------------------------------------------------------------- */
.cpanel { position: fixed; inset: 0; z-index: 500; }
.cpanel__dim { position: absolute; inset: 0; background: oklch(0 0 0 / 0.1); }
.cpanel__box {
    position: absolute; top: 84px; right: var(--side); display: flex; flex-direction: column;
    width: 668px; height: min(744px, calc(100vh - 100px)); padding-top: 8px; overflow: hidden;
    background: var(--white); border-radius: 16px;
    box-shadow: 0 16px 36px -10px oklch(0.242997 0.022695 260.518 / 0.3216), 0 0 1px oklch(0.242997 0.022695 260.518 / 0.2);
    animation: cpanel-in .18s ease;
}
@keyframes cpanel-in { from { opacity: 0; transform: translateY(-6px); } }
.cpanel__close { color: var(--gray1000); }
.cpanel__shortcuts { flex-shrink: 0; }
.cpanel__shortcuts .hscroll__track { display: grid; grid-auto-flow: column; grid-auto-columns: 60px; gap: 8px; padding: 6px 16px; }
.cpanel__body { display: flex; flex: 1; min-height: 0; }
.cpanel__nav { flex: 0 0 160px; overflow-y: auto; background: var(--gray100); }
.cpanel__navitem {
    display: block; width: 100%; padding: 14.5px 20px; text-align: left;
    font-size: 14px; line-height: 18px; font-weight: 500; color: var(--text-faded);
}
.cpanel__navitem.is-active { font-weight: 600; color: var(--text-normal); }
.cpanel__nav, .cpanel__content { overscroll-behavior: contain; }
.cpanel__content { flex: 1; overflow-y: auto; scroll-behavior: smooth; }
.cpanel__sec + .cpanel__sec { border-top: 1px solid var(--gray150); margin: 0 16px; }
.cpanel__sec + .cpanel__sec .sec-head { padding-left: 0; padding-right: 0; }
.cpanel__sec + .cpanel__sec .cpanel__grid { padding-left: 4px; padding-right: 4px; }
.cpanel__grid { display: grid; grid-template-columns: repeat(7, 56px); justify-content: space-between; gap: 12px 10px; padding: 12px 20px; }
.cicon { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 56px; }
.cicon__img { width: 56px; height: 56px; overflow: hidden; border-radius: 32px; background: var(--gray150); margin-bottom: 2px; }
.cicon__img img { width: 100%; height: 100%; object-fit: cover; }
.cicon__group, .cicon__name { max-width: 56px; text-align: center; font-size: 12px; line-height: 16px; font-weight: 500; word-break: keep-all; }
.cicon__group { color: var(--text-faded); margin-bottom: -4px; }
.cicon__name { color: var(--gray800); }
.cicon:hover .cicon__name { color: var(--primary); }

/* ---------------------------------------------------------------------
   상품 상세 (좌 747 / 우 374)
   --------------------------------------------------------------------- */
.pdp { display: flex; gap: 16px; }
.pdp__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pinfo { flex: 0 0 374px; width: 374px; display: flex; flex-direction: column; }

.gallery { width: 640px; max-width: 100%; margin: 0 auto; }
.gallery__viewport { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--gray150); }
.gallery__track { display: flex; height: 100%; transition: transform .35s ease; }
.gallery__track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.gallery__viewport .hscroll__btn { opacity: 0; visibility: visible; }
.gallery__viewport:hover .hscroll__btn { opacity: 1; }
.gallery__badge {
    position: absolute; right: 16px; bottom: 16px; display: flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 50%; background: oklch(0.25 0 0 / 0.85); font-size: 18px; font-weight: 700; color: var(--white);
}
.gallery__thumbs { display: flex; gap: 5px; padding: 10px 0 12px; overflow-x: auto; scrollbar-width: none; }
.gallery__thumb { flex: 0 0 66px; width: 66px; height: 66px; overflow: hidden; border-radius: 6px; border: 2px solid transparent; }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb.is-active { border-color: var(--gray1000); }

.ptabs .tabs { padding: 0 16px; }
.pdesc { padding: 0 0 40px; }
.pdesc__body { position: relative; max-height: 1400px; overflow: hidden; }
.pdesc.is-open .pdesc__body { max-height: none; }
.pdesc__body img { width: 100%; }
.pdesc__text { padding: 40px 16px; text-align: center; }
.pdesc__text h3 { font-size: 20px; font-weight: 700; color: var(--gray1000); }
.pdesc__text p { margin-top: 10px; font-size: 15px; line-height: 24px; color: var(--text-normal); }
.pdesc__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(rgba(255,255,255,0), #fff); }
.pdesc.is-open .pdesc__fade { display: none; }
.pdesc__more {
    display: flex; align-items: center; justify-content: center; gap: 4px; width: calc(100% - 32px); height: 48px; margin: 0 16px;
    border: 1px solid var(--primary); border-radius: 6px; font-size: 15px; line-height: 18px; font-weight: 600; color: var(--primary-strong);
}
.pdesc.is-open .pdesc__more .ic { transform: rotate(180deg); }

.previews { padding-bottom: 24px; scroll-margin-top: calc(var(--gnb-h) + 44px); }
.previews__summary { display: flex; align-items: baseline; gap: 6px; padding: 12px 16px 16px; color: var(--gray1000); }
.previews__summary .ic { align-self: center; color: var(--gray1000); }
.previews__summary b { font-size: 28px; font-weight: 700; }
.previews__summary span { font-size: 14px; color: var(--gray700); }
.previews__empty { padding: 32px 16px; font-size: 14px; color: var(--text-subtle); }
.review { margin: 0 16px; padding: 16px 0; border-top: 1px solid var(--gray150); }
.review__head { display: flex; align-items: center; gap: 8px; }
.review__stars { display: flex; color: var(--gray300); }
.review__stars .on { color: var(--gray1000); }
.review__who { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--gray700); }
.review__opt { margin-top: 6px; font-size: 12px; line-height: 16px; color: var(--text-sub-neutral); }
.review__text { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--gray1000); }
.review__img { width: 88px; height: 88px; margin-top: 10px; border-radius: 6px; object-fit: cover; }
#desc { scroll-margin-top: calc(var(--gnb-h) + 44px); }

/* 리뷰: 요약 · 포토 · 필터 · 목록 */
.rsum { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin: 8px 16px 16px; padding: 20px; border-radius: 12px; background: var(--gray50); }
.rsum__score { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.rsum__score > b { font-size: 40px; line-height: 44px; font-weight: 800; color: var(--gray1000); }
.rsum__score em { font-style: normal; font-size: 12px; color: var(--gray700); }
.rsum__dist, .rsum__fit { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.rsum__dist li, .rsum__fit li { display: grid; grid-template-columns: 76px minmax(0, 1fr) 36px; align-items: center; gap: 8px; font-size: 12px; color: var(--text-normal); }
.rsum__dist li { grid-template-columns: 30px minmax(0, 1fr) 30px; }
.rsum__dist i, .rsum__fit i { height: 6px; border-radius: 3px; background: var(--gray150); overflow: hidden; }
.rsum__dist b, .rsum__fit b { display: block; height: 100%; border-radius: 3px; background: var(--gray1000); }
.rsum__fit b { background: var(--primary); }
.rsum__dist em, .rsum__fit em { font-style: normal; text-align: right; color: var(--gray700); font-variant-numeric: tabular-nums; }
li.rsum__fittitle { display: block; font-size: 13px; font-weight: 700; color: var(--text-strong); }
li.rsum__fittitle em { margin-left: 4px; font-weight: 500; }
.rphotos { padding: 0 16px 8px; }
.rphotos__title { margin-bottom: 8px; font-size: 14px; font-weight: 700; color: var(--text-strong); }
.rphotos__title em { font-style: normal; color: var(--primary); }
.rphotos__list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.rphotos__item { flex: 0 0 88px; width: 88px; height: 88px; overflow: hidden; border-radius: 8px; background: var(--gray150); }
.rphotos__item img, .review__photo img { width: 100%; height: 100%; object-fit: cover; }
.rfilter { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 16px 4px; }
.rfilter .chip { cursor: pointer; }
.rfilter__sort { height: 34px; padding: 0 28px 0 10px; border: 1px solid var(--outline); border-radius: 8px; appearance: none; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23282c35' stroke-width='2' d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") right 8px center no-repeat; font: inherit; font-size: 13px; color: var(--text-normal); }
.rlist.is-loading { opacity: .4; }
.rmore { width: calc(100% - 32px); margin: 8px 16px 0; height: 44px; }
.review__verified { padding: 1px 6px; border-radius: 4px; background: var(--primary-bg); font-size: 11px; font-weight: 700; color: var(--primary-strong); }
.review__fit { margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--gray300); }
.review__text { white-space: pre-line; }
.review__photos { display: flex; gap: 6px; margin-top: 10px; }
.review__photo { width: 88px; height: 88px; overflow: hidden; border-radius: 6px; background: var(--gray150); }
.review__reply { margin-top: 10px; padding: 12px 14px; border-radius: 8px; background: var(--gray50); font-size: 13px; line-height: 19px; }
.review__reply b { color: var(--gray1000); }
.review__reply span { margin-left: 4px; font-size: 12px; color: var(--gray700); }
.review__reply p { margin-top: 4px; color: var(--text-normal); white-space: pre-line; }
.lightbox { position: fixed; inset: 0; z-index: 700; display: flex; align-items: center; justify-content: center; padding: 40px; background: rgba(0,0,0,.85); }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; object-fit: contain; }
.lightbox__close { position: absolute; top: 16px; right: 16px; color: var(--white); }

/* 리뷰 작성 */
.rform { display: flex; flex-direction: column; gap: 22px; margin: 18px 0 8px; }
.rform__row { display: flex; flex-direction: column; gap: 10px; }
.rform__row .field__label small { margin-left: 4px; font-weight: 500; color: var(--gray700); }
.rform__count { float: right; }
textarea.rform__text { height: 160px; padding: 12px 14px; font-family: inherit; line-height: 22px; resize: vertical; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rstars { display: flex; align-items: center; gap: 2px; }
.rstars__item { position: relative; cursor: pointer; color: var(--gray300); transition: color .1s, transform .1s; }
.rstars__item input { position: absolute; opacity: 0; }
.rstars__item.is-on { color: oklch(0.82 0.16 85); }
.rstars__item:hover { transform: scale(1.08); }
.rstars__item:has(input:focus-visible) { outline: 2px solid var(--primary-light); border-radius: 6px; }
.rstars__label { margin-left: 10px; font-size: 14px; font-weight: 600; color: var(--text-normal); }
.paymethods--3 { grid-template-columns: repeat(3, 1fr); }
.rupload { display: flex; flex-wrap: wrap; gap: 8px; }
.rupload__item, .rupload__add { position: relative; width: 96px; height: 96px; overflow: hidden; border-radius: 8px; }
.rupload__item img { width: 100%; height: 100%; object-fit: cover; }
.rupload__item--kept input { position: absolute; opacity: 0; }
.rupload__del { position: absolute; right: 4px; bottom: 4px; padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,.6); font-size: 11px; color: var(--white); cursor: pointer; }
.rupload__item--kept:has(input:not(:checked)) img { opacity: .3; }
.rupload__item--kept:has(input:not(:checked)) .rupload__del::after { content: " 취소"; }
.rupload__add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px dashed var(--gray300); font-size: 12px; color: var(--gray700); cursor: pointer; }
.rupload__add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.rupload__add.is-full { display: none; }
.ocard--row { display: flex; align-items: center; gap: 16px; }
.ocard--row .oitems { flex: 1; min-width: 0; }
.ocard__side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ocard + .ocard--row, .ocard--row + .ocard { margin-top: 12px; }
.myreview__product { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 13px; color: var(--text-normal); }
.myreview__product img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; }
.myreview__product b { display: block; color: var(--gray1000); }
.ocard .review { margin: 0; border-top: 0; }

.pmeta { padding-bottom: 8px; }
.acc { margin: 0 16px; }
.acc + .acc { border-top: 1px solid var(--gray150); }
.acc__head { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 16px 0; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--gray1000); }
.acc__head .ic { color: var(--gray700); transition: transform .15s; }
.acc.is-open .acc__head .ic { transform: rotate(90deg); }
.ptable { width: 100%; margin-bottom: 16px; border-collapse: collapse; font-size: 13px; line-height: 18px; }
.ptable th, .ptable td { padding: 10px 12px; border: 1px solid var(--gray150); text-align: left; }
.ptable th { width: 30%; background: var(--gray50); font-weight: 500; color: var(--text-sub-neutral); }
.ptable td { color: var(--gray1000); }
.pnotice { padding: 0 0 16px 18px; list-style: disc; font-size: 13px; line-height: 20px; color: var(--text-normal); }
.prow { padding-bottom: 16px; }
.prow__list .pcard { flex: 0 0 223px; width: 223px; }
.prec { padding-bottom: 24px; }
.pdp__disclaimer { padding: 16px 16px 0; font-size: 12px; line-height: 17px; color: var(--gray650); }

/* 우측 정보 */
.pinfo__crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; padding: 9px 16px; border-top: 1px solid var(--gray150); border-bottom: 1px solid var(--gray150); }
.pinfo__crumb a { font-size: 14px; line-height: 18px; font-weight: 500; color: var(--text-subtle); }
.pinfo__crumb a:hover { color: var(--gray1000); }
.pinfo__sep { color: var(--gray300); width: 8px; }
.pinfo__brand { display: flex; align-items: center; gap: 6px; align-self: flex-start; padding: 14px 16px 8px; font-size: 14px; line-height: 18px; font-weight: 500; color: var(--gray1000); }
.pinfo__brand img { width: 24px; height: 24px; border-radius: 12px; object-fit: cover; }
.pinfo__summary { display: flex; flex-direction: column; gap: 6px; padding: 0 16px 12px; }
.pinfo__name { font-size: 18px; line-height: 24px; font-weight: 500; color: var(--gray1000); }
.pinfo__rating { display: flex; align-items: center; gap: 4px; color: var(--gray800); }
.pinfo__rating b { font-size: 14px; line-height: 18px; font-weight: 600; color: var(--gray1000); }
.pinfo__rating a { margin-left: 2px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--gray700); }
.pinfo__pricerow { display: flex; justify-content: space-between; align-items: flex-start; }
.pinfo__prices { display: flex; flex-direction: column; gap: 2px; }
.pinfo__prices s { font-size: 14px; line-height: 18px; font-weight: 500; color: var(--gray500); }
.pinfo__prices div { font-size: 16px; line-height: 20px; font-weight: 600; }
.pinfo__rate { color: var(--text-faded); }
.pinfo__prices b { color: var(--text-normal); font-weight: 600; }
.btn-coupon {
    display: flex; align-items: center; gap: 4px; height: 34px; padding: 8px 12px; border: 1px solid var(--outline); border-radius: 6px;
    background: var(--white); font-size: 13px; line-height: 16px; font-weight: 600; color: var(--text-strong);
}
.pbox { margin: 0 16px 16px; padding: 12px 16px 0; background: var(--gray50); border-radius: 8px; }
.pbox__head { display: flex; align-items: center; gap: 0; width: 100%; padding-bottom: 12px; border-bottom: 1px solid var(--gray150); text-align: left; }
.pbox__rate { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--primary); margin-right: 8px; }
.pbox__price { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--text-strong); margin-right: 6px; }
.pbox__label { flex: 1; font-size: 14px; line-height: 18px; font-weight: 600; color: var(--text-sub-neutral); }
.pbox__chev { color: var(--gray1000); transition: transform .15s; }
.pbox.is-open .pbox__chev { transform: rotate(180deg); }
.pbox__detail { display: none; padding: 12px 0 4px; border-bottom: 1px solid var(--gray150); }
.pbox.is-open .pbox__detail { display: block; }
.pbox.is-open .pbox__row--sum { display: none; }
.pbox__row { display: flex; justify-content: space-between; gap: 8px; padding: 16px 0; font-size: 14px; line-height: 18px; font-weight: 500; color: var(--gray1000); }
.pbox__detail .pbox__row { padding: 4px 0 12px; color: var(--text-strong); }
.pbox__row b { font-weight: 600; white-space: nowrap; }
.pbox__row--sub { color: var(--gray1000) !important; }
.pbox__cap { padding-top: 4px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--gray700); }

.benefit { border-top: 1px solid var(--gray150); padding: 0 16px; }
.benefit__title { padding: 16px 0 12px; font-size: 16px; line-height: 20px; font-weight: 600; color: var(--text-strong); }
.benefit__row { display: flex; padding-bottom: 16px; }
.benefit__row--line { padding: 14px 0; border-top: 1px solid var(--gray150); }
.benefit__label { flex: 0 0 64px; font-size: 14px; line-height: 18px; font-weight: 500; color: var(--text-sub-neutral); }
.benefit__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.benefit__cards { display: flex; flex-direction: column; gap: 8px; }
.paycard {
    display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 8px 10px 10px;
    border: 1px solid var(--outline); border-radius: 8px; color: var(--gray700);
}
.paycard span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.paycard small { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-subtle); }
.paycard b { font-size: 14px; line-height: 18px; font-weight: 600; color: var(--gray1000); }
.paycard__ic { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 12px; background: oklch(0.88 0.17 95); font-style: normal; font-size: 12px; font-weight: 800; color: #111; }
.paycard__ic--blue { background: oklch(0.55 0.17 255); color: #fff; }
.benefit__link { display: flex; align-items: center; gap: 2px; font-size: 14px; line-height: 18px; font-weight: 500; color: var(--gray1000); }
.benefit__value { font-size: 14px; line-height: 18px; font-weight: 500; color: var(--gray1000); }

.buybox { position: sticky; top: var(--gnb-h); display: flex; flex-direction: column; padding-top: 8px; background: var(--white); }
.buybox__opts { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 8px; }
.select { border: 1px solid var(--outline); border-radius: 8px; overflow: hidden; }
.select.is-open { border-color: var(--primary); }
.select__head { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 50px; padding: 0 16px; font-size: 16px; line-height: 20px; font-weight: 600; color: var(--text-strong); }
.select__head .ic { color: var(--gray1000); transition: transform .15s; }
.select.is-open .select__head .ic { transform: rotate(180deg); }
.select__list { display: none; max-height: 300px; overflow-y: auto; }
.select.is-open .select__list { display: block; }
.select__opt { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 49px; padding: 0 16px; border-top: 1px solid var(--outline); font-size: 16px; line-height: 20px; font-weight: 500; color: var(--text-strong); text-align: left; }
.select__opt:hover:not(:disabled) { background: var(--gray50); }
.select__opt em { font-style: normal; font-size: 14px; line-height: 18px; font-weight: 500; color: var(--accent); }
.select__opt:disabled { color: var(--gray500); cursor: default; }
.select__opt em.is-soldout { color: var(--gray500); }
.picked { display: flex; flex-direction: column; gap: 8px; }
.picked__item { padding: 14px 16px; border-radius: 8px; background: var(--gray50); }
.picked__top { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 500; color: var(--gray1000); }
.picked__del { color: var(--gray700); }
.picked__bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.picked__price { font-size: 15px; font-weight: 600; color: var(--gray1000); }
.qty { display: flex; align-items: center; height: 32px; border: 1px solid var(--outline); border-radius: 6px; background: var(--white); }
.qty button { display: flex; align-items: center; justify-content: center; width: 32px; height: 100%; color: var(--gray1000); }
.qty__n { min-width: 28px; text-align: center; font-size: 14px; font-weight: 600; }
.picked__total { display: flex; justify-content: space-between; align-items: center; padding: 4px 2px; font-size: 14px; font-weight: 500; color: var(--text-normal); }
.picked__total b { font-size: 20px; font-weight: 700; color: var(--gray1000); }
.buybar { display: flex; align-items: center; padding: 8px 16px; }
.buybar__icons { display: flex; align-items: center; gap: 24px; width: 104px; padding-left: 12px; color: var(--gray1000); }
.buybar__icon { color: var(--gray1000); }
.buybar__btns { flex: 1; display: flex; gap: 8px; }
.btn { flex: 1; height: 48px; padding: 13px 17px; border: 1px solid transparent; border-radius: 8px; font-size: 16px; line-height: 20px; font-weight: 600; }
.btn--sub { background: var(--fill-secondary); color: var(--text-strong); }
.btn--sub:hover { background: oklch(0.239933 0.089905 261.268 / 0.11); }
.btn--primary { background: var(--primary); color: var(--white); }
.btn--primary:hover { background: var(--primary-strong); }

/* ---------------------------------------------------------------------
   푸터 / 플로팅
   --------------------------------------------------------------------- */
.footer { padding: 160px 48px 48px; }
.footer__inner { padding: 0 16px; }
.footer__biz { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--gray700); }
.footer__biz.is-open .ic { transform: rotate(180deg); }
.footer__info { display: grid; gap: 4px; margin-top: 12px; font-size: 12px; line-height: 18px; color: var(--gray650); }
.footer__info div { display: flex; gap: 8px; }
.footer__info dt { font-weight: 600; }
.footer__copy { margin-top: 16px; font-size: 12px; line-height: 18px; color: var(--gray650); }
.footer__links { display: flex; flex-wrap: wrap; margin-top: 8px; }
.footer__links li { display: flex; align-items: center; font-size: 12px; line-height: 18px; color: var(--gray700); }
.footer__links li + li::before { content: ""; width: 1px; height: 12px; margin: 0 12px; background: var(--outline); }

.to-top {
    position: fixed; right: 16px; bottom: 80px; z-index: 250; display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 24px; background: rgba(255,255,255,.7); border: 1px solid rgb(226,226,232);
    color: var(--gray1000); backdrop-filter: blur(4px);
    opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s;
}
.to-top.is-show { opacity: 1; visibility: visible; transform: none; }
.toast {
    position: fixed; left: 50%; bottom: 48px; z-index: 900; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 10px;
    background: oklch(0 0 0 / 0.851); color: var(--white); font-size: 14px; line-height: 20px; font-weight: 500;
    transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* =====================================================================
   회원 · 장바구니 · 주문 · 마이페이지
   ===================================================================== */
.gnb__badge {
    position: absolute; top: -4px; left: 30px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: var(--primary); font-style: normal; font-size: 10px; line-height: 16px; font-weight: 700; color: var(--white); text-align: center;
}

.page-title { padding: 24px 16px 16px; font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.3px; color: var(--text-strong); }
.page-title--flush { padding: 0 0 16px; }
.page-title__count { margin-left: 4px; color: var(--primary); }

/* 좌 본문 / 우 요약 (상세페이지와 같은 374px) */
.two-col { display: flex; align-items: flex-start; gap: 24px; padding: 0 16px; }
.two-col__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.two-col__side { position: sticky; top: calc(var(--gnb-h) + 8px); flex: 0 0 374px; width: 374px; }

.summary { padding: 24px; border-radius: 12px; background: var(--gray50); }
.summary__title { margin-bottom: 16px; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--text-strong); }
.summary__rows { display: flex; flex-direction: column; gap: 12px; }
.summary__rows div { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; line-height: 20px; }
.summary__rows dt { flex-shrink: 0; font-weight: 500; color: var(--text-sub-neutral); }
.summary__rows dd { font-weight: 600; color: var(--gray1000); text-align: right; }
.summary__rows--left dd { text-align: left; flex: 1; }
.summary__rows--left dt { width: 72px; }
.summary__rows .is-discount { color: var(--primary); }
.summary__total { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--outline); }
.summary__total > span { font-size: 15px; font-weight: 600; color: var(--text-strong); }
.summary__total b { font-size: 22px; line-height: 28px; font-weight: 700; color: var(--gray1000); }
.summary__hint { margin: 8px 0 16px; font-size: 12px; line-height: 16px; color: var(--gray700); text-align: right; }
.summary__agree { margin: 16px 0; font-size: 13px; }

.box { padding: 20px; border: 1px solid var(--gray150); border-radius: 12px; background: var(--white); }
.box__title { margin-bottom: 16px; font-size: 17px; line-height: 22px; font-weight: 600; color: var(--text-strong); }
.box__title--sub { margin: 28px 0 16px; padding-top: 24px; border-top: 1px solid var(--gray150); }
.box__title em, .field__label em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--gray700); }
.box__count { color: var(--primary); }
.box__note { margin-top: 12px; font-size: 12px; line-height: 18px; color: var(--gray700); }
.alert { padding: 12px 16px; border-radius: 8px; background: oklch(0.96 0.03 20); font-size: 14px; font-weight: 500; color: oklch(0.5 0.19 22); }

/* 폼 */
.form { display: flex; flex-direction: column; gap: 16px; }
.form--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; margin-bottom: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--wide { grid-column: 1 / -1; }
.field__label { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text-normal); }
.field__error { font-size: 12px; line-height: 16px; font-weight: 500; color: oklch(0.58 0.2 22); }
.input {
    width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--outline); border-radius: 8px; outline: 0;
    background: var(--white); font-size: 15px; font-weight: 500; color: var(--gray1000); transition: border-color .15s;
}
select.input { appearance: none; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23282c35' stroke-width='1.8' d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") right 14px center no-repeat; }
.input::placeholder { color: var(--gray500); }
.input:focus { border-color: var(--primary-light); }
.input.is-invalid { border-color: oklch(0.65 0.2 22); }
.check { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-normal); cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box { flex-shrink: 0; width: 20px; height: 20px; border: 1.5px solid var(--gray300); border-radius: 6px; background: var(--white) center/14px no-repeat; transition: background-color .15s, border-color .15s; }
.check input:checked + .check__box { border-color: var(--primary); background-color: var(--primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.check input:disabled + .check__box { background-color: var(--gray100); }
.check input:focus-visible + .check__box { outline: 2px solid var(--primary-light); outline-offset: 2px; }

.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.btn--block { display: flex; width: 100%; }
.btn--lg { height: 52px; font-size: 16px; }
.btn--sm { flex: none; height: 34px; padding: 0 12px; border-radius: 6px; font-size: 13px; }
.btn--inline { flex: none; padding: 0 28px; }
.btn--line { flex: none; background: var(--white); border-color: var(--outline); color: var(--text-strong); }
.btn--line:hover { background: var(--gray50); }
.btn:disabled { opacity: .45; cursor: default; }

/* 로그인 / 회원가입 */
.auth { width: 400px; max-width: 100%; margin: 40px auto 0; }
.auth__title { font-size: 26px; line-height: 34px; font-weight: 700; color: var(--text-strong); }
.auth__sub { margin: 6px 0 28px; font-size: 14px; line-height: 20px; color: var(--text-subtle); }
.auth .btn { margin-top: 8px; }
.auth__links { margin-top: 20px; text-align: center; font-size: 14px; color: var(--text-subtle); }
.auth__links a { margin-left: 6px; font-weight: 600; color: var(--primary-strong); text-decoration: underline; text-underline-offset: 3px; }
.auth__demo { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 28px; padding: 14px 16px; border-radius: 10px; background: var(--primary-bg); font-size: 13px; color: var(--text-normal); }
.auth__demo b { color: var(--primary-strong); }
.auth__demo-fill { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--primary-strong); text-decoration: underline; }

/* 회원가입: 회원 구분 · 사업자 정보 · 약관 (mangoshop 구조) */
.auth--wide { width: 560px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.req { font-style: normal; color: var(--primary); }
.field__help { font-size: 12px; line-height: 17px; color: var(--gray700); }
.form--grid-flush { margin-bottom: 0; }
.input--file { height: auto; padding: 10px 12px; font-size: 13px; }
.mtype { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mtype__card {
    position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--outline); border-radius: 12px;
    cursor: pointer; transition: border-color .15s, background-color .15s;
}
.mtype__card input { position: absolute; opacity: 0; }
.mtype__card b { font-size: 16px; line-height: 22px; font-weight: 700; color: var(--text-strong); }
.mtype__card span { font-size: 13px; line-height: 18px; color: var(--text-subtle); }
.mtype__card:has(input:checked) { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--primary-bg); }
.mtype__card:has(input:checked) b { color: var(--primary-strong); }
.mtype__card:has(input:focus-visible) { outline: 2px solid var(--primary-light); outline-offset: 2px; }
.bizbox { margin: 0; padding: 18px 16px 16px; border: 0; border-radius: 12px; background: var(--gray50); }
.bizbox__title { float: left; width: 100%; margin-bottom: 14px; padding: 0; font-size: 15px; font-weight: 700; color: var(--text-strong); }
.bizbox__title span { font-size: 12px; font-weight: 500; color: var(--gray700); }
.bizbox__title + * { clear: both; }
.bizbox__note { margin-top: 12px; font-size: 12px; line-height: 17px; color: var(--primary-strong); }
.agree { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--outline); border-radius: 12px; }
.agree__all { padding-bottom: 12px; border-bottom: 1px solid var(--gray150); font-weight: 700; color: var(--text-strong); }
.agree__all small { font-size: 12px; font-weight: 500; color: var(--gray700); }
.agree__item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; }
.agree__item details { display: contents; }
.agree__item summary { margin-left: auto; font-size: 12px; color: var(--gray700); text-decoration: underline; cursor: pointer; list-style: none; }
.agree__item summary::-webkit-details-marker { display: none; }
.agree__item details > :not(summary) { flex-basis: 100%; margin: 2px 0 4px 28px; padding: 10px 12px; border-radius: 8px; background: var(--gray50); font-size: 12px; line-height: 18px; color: var(--text-normal); }
.agree__dl div { display: flex; gap: 8px; }
.agree__dl dt { flex: 0 0 84px; font-weight: 600; }
.agree__req { font-style: normal; font-weight: 700; color: var(--primary); }
.agree__opt { font-style: normal; font-weight: 600; color: var(--gray700); }
.member-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: var(--gray100); font-size: 11px; font-weight: 700; color: var(--text-normal); vertical-align: 2px; }
.member-badge--wholesale { background: var(--primary); color: var(--white); }
.member-badge--pending { background: oklch(0.97 0.035 70); color: oklch(0.55 0.14 60); }
.member-badge--rejected { background: oklch(0.96 0.03 20); color: oklch(0.55 0.19 22); }

/* 쿠폰 · 적립금 */
.tickets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ticket { position: relative; display: flex; min-height: 112px; border: 1px solid var(--outline); border-radius: 12px; background: var(--white); overflow: hidden; }
.ticket__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; }
.ticket__benefit { font-size: 24px; line-height: 30px; font-weight: 800; color: var(--primary); letter-spacing: -0.4px; }
.ticket__name { font-size: 14px; font-weight: 600; color: var(--text-strong); }
.ticket__cond, .ticket__exp { font-size: 12px; line-height: 17px; color: var(--gray700); }
.ticket__exp em { font-style: normal; }
.ticket__dday { margin-left: 4px; padding: 1px 6px; border-radius: 4px; background: oklch(0.96 0.03 25); font-weight: 700; color: oklch(0.58 0.2 25); }
.ticket__side { position: relative; flex: 0 0 92px; display: flex; align-items: center; justify-content: center; border-left: 1px dashed var(--outline); background: var(--gray50); font-size: 12px; font-weight: 600; color: var(--text-sub-neutral); text-align: center; }
.ticket__side::before, .ticket__side::after { content: ""; position: absolute; left: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); border: 1px solid var(--outline); }
.ticket__side::before { top: -9px; }
.ticket__side::after { bottom: -9px; }
.ticket--used, .ticket--expired { opacity: .55; }
.ticket--used .ticket__benefit, .ticket--expired .ticket__benefit { color: var(--gray700); }
.ticket--new .ticket__side { background: var(--primary-bg); }
.coupon-code { display: flex; align-items: flex-end; gap: 8px; }
.coupon-code .btn { height: 48px; }
.pointcard { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px; border-radius: 14px; background: var(--primary); color: var(--white); }
.pointcard > div > span { font-size: 14px; opacity: .85; }
.pointcard > div > b { display: block; margin-top: 2px; font-size: 32px; line-height: 40px; font-weight: 800; }
.pointcard small { margin-left: 2px; font-size: 18px; }
.pointcard dl { display: flex; gap: 24px; }
.pointcard dl div { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.pointcard dt { font-size: 12px; opacity: .8; }
.pointcard dd { font-size: 16px; font-weight: 700; }
.ptx li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--gray150); }
.ptx li:first-child { border-top: 0; }
.ptx li > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ptx__type { font-size: 12px; font-weight: 600; color: var(--primary-strong); }
.ptx b { font-size: 14px; font-weight: 500; color: var(--gray1000); }
.ptx time { font-size: 12px; color: var(--gray700); }
.ptx__amt { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; font-size: 16px; font-weight: 700; }
.ptx__amt.is-plus { color: var(--primary); }
.ptx__amt.is-minus { color: var(--gray1000); }
.ptx__amt span { font-size: 12px; font-weight: 500; color: var(--gray700); }
.my__pts { float: right; font-style: normal; font-size: 13px; font-weight: 700; color: var(--primary); }
.my-quick { grid-template-columns: repeat(4, 1fr); }
.benefit-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.benefit-row__label { flex: 0 0 56px; font-size: 14px; font-weight: 600; color: var(--text-normal); }
.benefit-row__body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.benefit-row__body select { flex: 1; min-width: 0; }
.benefit-row__link { flex-shrink: 0; font-size: 13px; color: var(--gray700); text-decoration: underline; }
.benefit-row .btn--sm { height: 48px; padding: 0 14px; }
.point-input { position: relative; flex: 1; }
.point-input .input { padding-right: 36px; text-align: right; }
.point-input span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 600; color: var(--gray700); }
.summary__earn { margin-top: 8px; font-size: 12px; color: var(--gray700); text-align: right; }
.summary__earn b { color: var(--primary); }

/* 장바구니 */
.cart-bar { display: flex; justify-content: space-between; align-items: center; padding: 4px 0 12px; border-bottom: 2px solid var(--gray1000); }
.cart-bar__del { height: 32px; padding: 0 12px; border: 1px solid var(--outline); border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--text-normal); }
.citems { margin-top: -16px; }
.citem { display: grid; grid-template-columns: 20px 96px minmax(0, 1fr) auto 110px 24px; align-items: center; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--gray150); }
.citem.is-soldout .citem__thumb, .citem.is-soldout .citem__info { opacity: .45; }
.citem__thumb { width: 96px; height: 96px; overflow: hidden; border-radius: 6px; background: var(--gray150); }
.citem__thumb img { width: 100%; height: 100%; object-fit: cover; }
.citem__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.citem__brand { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--gray1000); }
.citem__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; line-height: 20px; color: var(--text-normal); }
.citem__name:hover { text-decoration: underline; }
.citem__opt { font-size: 13px; line-height: 18px; color: var(--text-sub-neutral); }
.citem__opt b { color: oklch(0.58 0.2 22); }
.citem__unit { margin-top: 2px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--gray1000); }
.citem__unit s { margin-right: 4px; font-weight: 500; color: var(--gray500); }
.citem__unit em { font-style: normal; color: var(--primary); }
.citem__total { text-align: right; font-size: 16px; line-height: 20px; font-weight: 700; color: var(--gray1000); }
.citem__del { color: var(--gray500); }
.citem__del:hover { color: var(--gray1000); }
.qty button:disabled { color: var(--gray300); cursor: default; }

/* 주문 상품 줄 */
.oitems { display: flex; flex-direction: column; }
.oitem { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 0; }
.oitem + .oitem { border-top: 1px solid var(--gray150); }
.oitem__thumb { width: 72px; height: 72px; overflow: hidden; border-radius: 6px; background: var(--gray150); }
.oitem__thumb img { width: 100%; height: 100%; object-fit: cover; }
.oitem__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.oitem__brand { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--gray1000); }
.oitem__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; line-height: 20px; color: var(--text-normal); }
.oitem__opt { font-size: 13px; line-height: 18px; color: var(--text-sub-neutral); }
.oitem__price { font-size: 15px; font-weight: 700; color: var(--gray1000); }

.paymethods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.paymethod { position: relative; cursor: pointer; }
.paymethod input { position: absolute; opacity: 0; }
.paymethod span {
    display: flex; align-items: center; justify-content: center; height: 52px; padding: 0 8px; border: 1px solid var(--outline); border-radius: 8px;
    font-size: 14px; font-weight: 500; color: var(--text-normal); text-align: center; transition: all .15s;
}
.paymethod input:checked + span { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--primary-bg); font-weight: 600; color: var(--primary-strong); }
.paymethod input:focus-visible + span { outline: 2px solid var(--primary-light); outline-offset: 2px; }

/* 주문 완료 */
.done { width: 480px; max-width: 100%; margin: 48px auto 0; text-align: center; }
.done__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--primary); color: var(--white); }
.done__title { margin-top: 20px; font-size: 24px; line-height: 32px; font-weight: 700; color: var(--text-strong); }
.done__desc { margin-top: 6px; font-size: 14px; color: var(--text-subtle); }
.done__desc b { color: var(--gray1000); }
.done__box { margin-top: 28px; text-align: left; }
.done__btns { display: flex; gap: 8px; margin-top: 20px; }
.done__btns--left .btn { flex: none; padding: 0 24px; }

/* 마이페이지 */
.my { display: flex; align-items: flex-start; gap: 32px; padding: 24px 16px 0; }
.my__nav { position: sticky; top: calc(var(--gnb-h) + 8px); flex: 0 0 200px; }
.my__hello { padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--gray150); font-size: 18px; line-height: 26px; color: var(--text-strong); }
.my__hello b { font-weight: 700; }
.my__hello .member-badge { display: inline-flex; margin-bottom: 4px; }
.my__hello span:not(.member-badge) { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; line-height: 16px; color: var(--gray700); }
.my__nav nav a { display: block; padding: 11px 0; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--text-sub-neutral); }
.my__nav nav a:hover { color: var(--gray1000); }
.my__nav nav a.is-active { font-weight: 700; color: var(--gray1000); }
.my__logout { margin-top: 12px; font-size: 13px; color: var(--gray700); text-decoration: underline; text-underline-offset: 3px; }
.my__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.pipeline { display: grid; grid-template-columns: repeat(4, 1fr); }
.pipeline li + li { position: relative; }
.pipeline li + li::before { content: ""; position: absolute; left: 0; top: 14px; width: 7px; height: 7px; border-top: 1.5px solid var(--gray300); border-right: 1.5px solid var(--gray300); transform: translateX(-50%) rotate(45deg); }
.pipeline a { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pipeline b { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--gray300); }
.pipeline b.is-on { color: var(--primary); }
.pipeline span { font-size: 13px; font-weight: 500; color: var(--text-normal); }
.my-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.my-quick__item { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-radius: 12px; background: var(--gray50); font-size: 14px; font-weight: 500; color: var(--text-normal); }
.my-quick__item b { font-size: 18px; font-weight: 700; color: var(--gray1000); }
.my-quick__item:hover { background: var(--gray100); }
.sec-head--flush { padding: 8px 0 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--gray100); font-size: 13px; font-weight: 500; color: var(--text-normal); }
.chip.is-on { background: var(--gray1000); color: var(--white); font-weight: 600; }
.ocard { padding: 16px 20px; border: 1px solid var(--gray150); border-radius: 12px; }
.ocard + .ocard { margin-top: 12px; }
.ocard__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--gray150); }
.ocard__head--plain { margin-bottom: 4px; }
.ocard__date { font-size: 15px; font-weight: 700; color: var(--gray1000); }
.ocard__code { margin-left: 8px; font-size: 12px; color: var(--gray700); }
.ocard__foot { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--gray150); font-size: 14px; color: var(--text-sub-neutral); }
.ocard__foot b { margin-left: 4px; font-size: 16px; color: var(--gray1000); }
.ocard__btns { display: flex; gap: 6px; }
.status { padding: 4px 8px; border-radius: 6px; background: var(--primary-bg); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--primary-strong); }
.status--shipping { background: oklch(0.95 0.03 250); color: oklch(0.5 0.17 255); }
.status--delivered { background: var(--gray100); color: var(--gray1000); }
.status--cancelled { background: var(--gray100); color: var(--gray700); }
.pgrid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pgrid--flush { padding: 0; }
.empty--sm { padding: 64px 16px; }
.empty .btn { margin-top: 20px; }
.pager { display: flex; justify-content: center; gap: 4px; margin-top: 24px; }
.pager__num, .pager__btn { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--text-normal); }
.pager__num.is-active { background: var(--gray1000); color: var(--white); font-weight: 700; }
.pager__btn.is-disabled { color: var(--gray300); }

/* ---------------------------------------------------------------------
   반응형 (레퍼런스는 데스크톱 기준, 좁은 화면은 단계적으로 축소)
   --------------------------------------------------------------------- */
@media (max-width: 1180px) {
    :root { --side: 32px; }
    .gnb__nav { gap: 24px; padding: 0 24px; }
    .search { width: 220px; }
    .pgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .pgrid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
    :root { --side: 16px; }
    .gnb__nav { display: none; }
    .gnb__right { gap: 16px; }
    .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pdp { flex-direction: column; }
    .pinfo { flex-basis: auto; width: 100%; }
    .cpanel__box { right: 16px; left: 16px; width: auto; }
    .two-col, .my, .lview, .lc { flex-direction: column; align-items: stretch; }
    .lc__stage { position: static; align-self: center; }
    .lc__side { max-width: none; }
    .lview__stage { position: static; flex-basis: auto; width: min(400px, 100%); margin: 0 auto; }
    .lview__info { max-width: none; }
    .two-col__side, .my__nav { position: static; flex-basis: auto; width: 100%; }
    .pgrid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .search__drop { width: min(432px, calc(100vw - 32px)); }
}
@media (max-width: 640px) {
    /* 헤더 2줄: 로고 + 아이콘 / 검색창 전체 폭 */
    :root { --gnb-h: 112px; }
    .gnb { flex-wrap: wrap; height: var(--gnb-h); padding: 10px var(--side); row-gap: 8px; }
    .gnb__logo { min-width: 0; font-size: 20px; }
    .gnb__right { display: contents; }
    .gnb__icons { order: 2; gap: 4px; }
    .gnb__icons .gnb__icon span { display: none; }
    .gnb__icon { width: 36px; justify-content: center; }
    .gnb__badge { left: 20px; }
    .search { order: 3; flex: 0 0 100%; width: 100%; }
    .search__drop { width: 100%; }
    .cpanel__box { top: calc(var(--gnb-h) - 8px); }
    .pgrid, .pgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 8px; }
    .hero__viewport { height: 300px; }
    .hero__slide { flex-basis: 300px; width: 300px; height: 300px; }
    .shortcuts { justify-content: flex-start; overflow-x: auto; }
    .cpanel__nav { flex-basis: 110px; }
    .cpanel__grid { grid-template-columns: repeat(4, 56px); }
    .fbar { overflow-x: auto; }
    .lc { padding: 0 0 32px; }
    .lc__player { height: auto; min-height: 0; width: calc(100vw - 32px); border-radius: 12px; }
    .form--grid, .paymethods, .my-quick { grid-template-columns: 1fr 1fr; }
    .rsum { grid-template-columns: 1fr; }
    .tickets { grid-template-columns: 1fr; }
    .pointcard { flex-direction: column; align-items: flex-start; }
    .pointcard dl div { text-align: left; }
    .ocard--row { flex-direction: column; align-items: stretch; }
    .ocard__side { flex-direction: row; justify-content: space-between; align-items: center; }
    .citem { grid-template-columns: 20px 72px minmax(0, 1fr) 24px; }
    .citem__thumb { width: 72px; height: 72px; }
    .citem .qty, .citem__total { grid-column: 3; }
    .citem__del { grid-row: 1; grid-column: 4; }
}

/* ---------- 토스페이먼츠 결제 ---------- */
.status--waiting { background: oklch(0.96 0.05 85); color: oklch(0.5 0.12 70); }
.summary__pg { margin-top: 10px; font-size: 12px; color: var(--gray700); text-align: center; }
.pay-widget { padding: 8px 0; min-height: 240px; }
.pay-widget__loading { padding: 80px 20px; font-size: 14px; color: var(--gray700); text-align: center; }
.pay-back { display: block; margin-top: 12px; font-size: 13px; color: var(--gray700); text-align: center; text-decoration: underline; }
.vbank { margin-bottom: 16px; padding: 16px; border-radius: 10px; background: var(--primary-bg); }
.vbank__title { margin-bottom: 8px; font-size: 15px; font-weight: 700; color: var(--primary-strong); }
.receipt-link { margin-left: 6px; font-size: 12px; color: var(--gray700); text-decoration: underline; }

/* ---------- 배송지 · 주소 검색 ---------- */
.box__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.box__head .box__title { margin-bottom: 0; }
.box__head .box__count { margin-left: 2px; color: var(--primary); }
.zip-row { display: flex; gap: 8px; }
.zip-row__zip { width: 140px; flex: none; }
.zip-row__btn { flex: none; height: 48px; padding: 0 16px; }
.field .input + .input { margin-top: 2px; }
.input[readonly][data-postcode] { background: var(--gray50); cursor: pointer; }
.checks-row { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 16px; }
.page-head .page-title { padding: 0; }
.empty-box { padding: 48px 20px; text-align: center; color: var(--gray700); }
.empty-box .btn { margin-top: 16px; }
.addr-list { display: flex; flex-direction: column; gap: 10px; }
.addr { display: block; width: 100%; padding: 16px 18px; border: 1px solid var(--gray150); border-radius: 12px; background: var(--white); text-align: left; }
.addr.is-default { border-color: var(--primary); }
.addr__head { display: flex; align-items: center; gap: 8px; }
.addr__label { font-size: 15px; font-weight: 700; color: var(--text-strong); }
.addr__badge { padding: 2px 8px; border-radius: 999px; background: var(--primary-bg); font-size: 11px; font-weight: 700; color: var(--primary-strong); }
.addr__who { display: block; margin-top: 6px; font-size: 14px; color: var(--text-normal); }
.addr__line { display: block; margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--gray700); }
.addr__btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.addr--pick { cursor: pointer; transition: border-color .15s, background .15s; }
.addr--pick:hover { border-color: var(--primary); background: var(--primary-bg); }
.addr-inline { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 8px 8px 14px; border: 1px solid var(--gray150); border-radius: 8px; font-size: 14px; color: var(--text-normal); }
.field__opt { font-style: normal; font-weight: 400; color: var(--gray700); }

/* 하단 시트형 다이얼로그 (모바일 바텀시트 · PC 가운데) */
.sheet { width: min(480px, calc(100% - 32px)); max-height: min(720px, calc(100dvh - 48px)); margin: auto; padding: 0; border: 0; border-radius: 16px; background: var(--white); color: inherit; overflow: hidden; }
.sheet[open] { display: flex; flex-direction: column; }
.sheet::backdrop { background: rgba(0, 0, 0, .45); }
.sheet__head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--gray150); }
.sheet__title { font-size: 17px; font-weight: 700; color: var(--text-strong); }
.sheet__close { display: inline-flex; padding: 4px; border: 0; background: none; color: var(--gray700); cursor: pointer; }
.sheet__body { flex: 1; min-height: 0; padding: 20px; overflow-y: auto; }
.sheet__body .alert { margin-bottom: 14px; }
.sheet__submit { margin-top: 20px; }
.sheet__link { display: block; margin-top: 16px; font-size: 13px; color: var(--gray700); text-align: center; text-decoration: underline; }
.sheet--postcode { height: min(560px, calc(100dvh - 48px)); }
.postcode__body { padding: 0; overflow: hidden; }
@media (max-width: 640px) {
    .sheet { width: 100%; max-width: 100%; max-height: 90dvh; margin: auto 0 0; border-radius: 16px 16px 0 0; }
    .sheet--postcode { height: 90dvh; }
    .zip-row__zip { width: 110px; }
}

/* ---------- 품절 · 반품/교환 ---------- */
.pcard__soldout { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .55); font-size: 15px; font-weight: 700; color: var(--gray1000); letter-spacing: 1px; }
.status--returned { background: var(--gray100); color: var(--gray1000); }
.claim { padding: 16px 0; border-top: 1px solid var(--gray150); }
.claim:first-of-type { border-top: 0; padding-top: 0; }
.claim__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.claim__head b { font-size: 15px; color: var(--text-strong); }
.claim__meta { margin-top: 4px; font-size: 13px; line-height: 19px; color: var(--gray700); }
.claim__items { margin-top: 8px; font-size: 14px; color: var(--text-normal); }
.claim__items li + li { margin-top: 2px; }
.claim__btns { display: flex; gap: 6px; margin-top: 10px; }
.status--requested { background: oklch(0.96 0.05 85); color: oklch(0.5 0.12 70); }
.status--approved { background: oklch(0.95 0.03 250); color: oklch(0.5 0.17 255); }
.status--completed { background: var(--primary-bg); color: var(--primary-strong); }
.status--rejected, .status--withdrawn { background: var(--gray100); color: var(--gray700); }
.citem { display: grid; grid-template-columns: auto 64px 1fr; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--gray150); }
.citem:first-child { border-top: 0; }
.citem img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; }
.citem__name { font-size: 14px; color: var(--text-strong); }
.citem__opt { margin-top: 2px; font-size: 13px; color: var(--gray700); }
.citem__ctrl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.citem__ctrl .input { height: 40px; width: auto; min-width: 96px; font-size: 14px; }
.claim-types { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.claim-quote { margin-top: 12px; }

/* ---------- 소셜 로그인 ---------- */
.social { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.social__divider { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; font-size: 13px; color: var(--gray700); }
.social__divider::before, .social__divider::after { content: ''; flex: 1; height: 1px; background: var(--gray150); }
.social__btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 8px; font-size: 15px; font-weight: 600; }
.social__btn--kakao { background: #fee500; color: rgba(0, 0, 0, .85); }
.social__btn--naver { background: #03c75a; color: #fff; }
.social-links__row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--gray150); }
.social-links__row:first-child { border-top: 0; padding-top: 0; }
.social-links__name { min-width: 56px; font-size: 14px; font-weight: 700; }
.social-links__name--kakao { color: #3c1e1e; }
.social-links__name--naver { color: #03a94d; }
.social-links__state { flex: 1; font-size: 13px; color: var(--gray700); }