@charset "utf-8";

:root {

    /* ===========================
        POINT COLOR
    =========================== */
    --static-1: #5B1A34;            /* 주요 버튼, 활성 탭, 공구 뱃지, 포커스 링 */
    --static-1-hover: #3D1023;      /* 호버·눌림 상태 */
    --static-1-rgb: 91,26,52;
    --static-2: #C0281C;            /* 할인율, 마감 임박, 에러, 삭제 */
    --static-2-hover: #A12016;
    --static-3: #1B6B46;            /* 성공, 완료 */
    --static-disabled: #EDEDED;     /* 비활성 요소 배경·라인 */

    /* ===========================
        BACKGROUND
    =========================== */
    --bg-body: #FFFFFF;             /* 기본 배경, 카드 배경 */
    --bg-1: #F7F7F5;                /* 섹션 구분, 인풋 배경, 스켈레톤, 비활성 버튼 */
    --bg-2: #F6EEF1;                /* 공동구매 진행 영역, 선택된 칩, 파트너 헤더 */
    --bg-3: #222222;                /* 푸터, 솔리드 뱃지, 토스트 */
    --bg-g: #F6F6F6;
    --bg-dim: rgba(0,0,0,.45);      /* 모달·바텀시트 딤 */

    /* ===========================
        TEXT
    =========================== */
    --text-1: #222222;              /* 제목, 가격, 지표 숫자 */
    --text-2: #4A4A4A;              /* 본문 */
    --text-3: #6E6E6E;              /* 보조 정보, 산지 라벨, placeholder */
    --text-4: #A6A6A6;              /* 비활성 텍스트 (읽어야 하는 글자에 사용 금지) */
    --text-on-dark-2: #EEEEEE;      /* 어두운 배경 위 보조 텍스트 */
    --text-on-dark-1: #FFFFFF;      /* 어두운 배경 위 텍스트 */

    --color-white: #FFFFFF;
    --color-white-rgb: 255,255,255;
    --color-black: #000000;
    --color-black-rgb: 0,0,0;

    /* ===========================
        BORDER
    =========================== */
    --border-1: #F0F0F0;            /* 표 내부 행 구분, 약한 구분선 */
    --border-2: #E8E8E8;            /* 기본 인풋·박스 테두리, 섹션 구분선 */
    --border-3: #222222;            /* 보조 버튼, 인풋 포커스, 선택된 옵션 */
    --border-point: #5B1A34;        /* 선택 상태, 라인 뱃지 */
    --border-error: #C0281C;        /* 유효성 실패 인풋 */

    /* ===========================
        SHADOW
    =========================== */
    --shadow-1: 0 2px 10px rgba(0,0,0,.05);      /* 상단바 하단, 스티키 헤더 */
    --shadow-2: 0 8px 24px rgba(0,0,0,.10);      /* 드롭다운, 셀렉트 옵션, 토스트 */
    --shadow-3: 0 -4px 20px rgba(0,0,0,.06);     /* 하단 고정 바 (구매 바, GNB) */
    --shadow-4: 0 16px 40px rgba(0,0,0,.16);     /* 모달, 플로팅 버튼 */

    /* ===========================
        RADIUS
    =========================== */
    --radius-4: 4px;
    --radius-6: 6px;
    --radius-8: 8px;
    --radius-12: 12px;
    --radius-16: 16px;
    --radius-20: 20px;
    --radius-24: 24px;
    --radius-full: 9999px;

    /* transition */
    --transition: .3s ease;

    /* ===========================
        FONT SIZE
    =========================== */
    --fs-10: clamp(10px, 0.69vw, 10px);
    --fs-11: clamp(10px, 0.76vw, 11px);
    --fs-12: clamp(11px, 0.83vw, 12px);
    --fs-13: clamp(12px, 0.90vw, 13px);
    --fs-14: clamp(12px, 0.97vw, 14px);
    --fs-15: clamp(13px, 1.04vw, 15px);
    --fs-16: clamp(14px, 1.11vw, 16px);
    --fs-18: clamp(16px, 1.25vw, 18px);
    --fs-20: clamp(17px, 1.39vw, 20px);
    --fs-22: clamp(18px, 1.53vw, 22px);
    --fs-24: clamp(19px, 1.67vw, 24px);
    --fs-26: clamp(20px, 1.81vw, 26px);
    --fs-28: clamp(21px, 1.94vw, 28px);
    --fs-32: clamp(23px, 2.22vw, 32px);
    --fs-36: clamp(26px, 2.5vw, 36px);
    --fs-40: clamp(28px, 2.78vw, 40px);
    --fs-48: clamp(32px, 3.33vw, 48px);
    --fs-56: clamp(34px, 3.89vw, 56px);

    /* ===========================
        SPACE
    =========================== */
    --space-2: clamp(2px, 0.14vw, 2px);
    --space-4: clamp(3px, 0.28vw, 4px);
    --space-6: clamp(4px, 0.42vw, 6px);
    --space-8: clamp(6px, 0.56vw, 8px);
    --space-10: clamp(8px, 0.69vw, 10px);
    --space-12: clamp(10px, 0.83vw, 12px);
    --space-14: clamp(11px, 0.97vw, 14px);
    --space-16: clamp(12px, 1.11vw, 16px);
    --space-18: clamp(14px, 1.25vw, 18px);
    --space-20: clamp(16px, 1.39vw, 20px);
    --space-24: clamp(18px, 1.67vw, 24px);
    --space-28: clamp(20px, 1.94vw, 28px);
    --space-30: clamp(22px, 2.08vw, 30px);
    --space-32: clamp(24px, 2.22vw, 32px);
    --space-36: clamp(26px, 2.5vw, 36px);
    --space-40: clamp(28px, 2.78vw, 40px);
    --space-48: clamp(32px, 3.33vw, 48px);
    --space-50: clamp(34px, 3.47vw, 50px);
    --space-56: clamp(36px, 3.89vw, 56px);
    --space-60: clamp(40px, 4.17vw, 60px);
    --space-64: clamp(40px, 4.44vw, 64px);
    --space-80: clamp(48px, 5.56vw, 80px);
    --space-100: clamp(60px, 6.94vw, 100px);
    --space-120: clamp(72px, 8.33vw, 120px);

    /* ===========================
        LAYOUT
    =========================== */
    --inner-width: 1520px;
    --header-h: 0px;                /* common.js 에서 실제 높이로 갱신 */
}

/*==========================================================
    TEXT COLOR
==========================================================*/
.text-1{color:var(--text-1)!important;}
.text-2{color:var(--text-2)!important;}
.text-3{color:var(--text-3)!important;}
.text-4{color:var(--text-4)!important;}
.static-1{color:var(--static-1)!important;}
.static-2{color:var(--static-2)!important;}
.static-3{color:var(--static-3)!important;}
.color-white{color:var(--color-white)!important;}
.text-red{color:var(--static-2)!important;}

/*==========================================================
    BACKGROUND / BORDER / SHADOW
==========================================================*/
.bg-body{background:var(--bg-body)!important;}
.bg-1{background:var(--bg-1)!important;}
.bg-2{background:var(--bg-2)!important;}
.bg-3{background:var(--bg-3)!important;}
.bg-white{background:var(--color-white)!important;}

.border-1{border-color:var(--border-1)!important;}
.border-2{border-color:var(--border-2)!important;}
.border-3{border-color:var(--border-3)!important;}

.shadow-1{box-shadow:var(--shadow-1)!important;}
.shadow-2{box-shadow:var(--shadow-2)!important;}
.shadow-3{box-shadow:var(--shadow-3)!important;}
.shadow-4{box-shadow:var(--shadow-4)!important;}

/* =========================================================
    LAYOUT
========================================================= */
.inner{width:calc(100% - var(--space-40));max-width:var(--inner-width);margin:0 auto;}
.inner-s{width:calc(100% - var(--space-40));max-width:720px;margin:0 auto;}

.pd-120{padding:var(--space-120) 0;}
.pd-100{padding:var(--space-100) 0;}
.pd-80{padding:var(--space-80) 0;}
.pd-60{padding:var(--space-60) 0;}
.mb-0{margin-bottom:0!important;}

.fw-400{font-weight:400;}
.fw-500{font-weight:500;}
.fw-600{font-weight:600;}
.fw-700{font-weight:700;}

.img-wrap{overflow:hidden;background:var(--bg-1);}
.img-wrap img{width:100%;height:100%;object-fit:cover;}

.common-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-24);row-gap:var(--space-24);}
.common-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--space-24);row-gap:var(--space-24);}
.common-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--space-24);row-gap:var(--space-24);}

.common-flex-0{display:flex;flex-direction:column;}
.common-flex{display:flex;flex-direction:column;row-gap:10px;}
.common-flex-16{display:flex;flex-direction:column;row-gap:var(--space-16);}
.common-flex-20{display:flex;flex-direction:column;row-gap:var(--space-20);}
.common-flex-30{display:flex;flex-direction:column;row-gap:var(--space-30);}
.common-flex-60{display:flex;flex-direction:column;row-gap:var(--space-60);}
.common-flex-r{display:flex;align-items:center;column-gap:10px;flex-wrap:wrap;row-gap:8px;}

/* =========================================================
    TYPOGRAPHY
========================================================= */
.section-tit{word-break:keep-all;font-size:var(--fs-32);font-weight:700;line-height:1.3;letter-spacing:-.02em;}
.card-tit{word-break:keep-all;font-size:var(--fs-22);font-weight:500;line-height:1.35;}
.body-lg{word-break:keep-all;font-size:var(--fs-18);font-weight:400;line-height:1.6;}
.body-md{word-break:keep-all;font-size:var(--fs-16);font-weight:500;line-height:1.4;}
.body-sm{word-break:keep-all;font-size:var(--fs-14);font-weight:500;line-height:1.5;}
.eyebrow{display:block;font-size:var(--fs-12);font-weight:600;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;;}
.input-desc{font-size:var(--fs-13);font-weight:400;line-height:1.5;}

.price-lg{font-size:var(--fs-24);font-weight:700;line-height:1.2;}
.price-md{font-size:var(--fs-16);font-weight:700;line-height:1.2;}
.price-sm{font-size:var(--fs-12);font-weight:400;line-height:1.55;}
.sale-rate{font-weight:700;color:var(--static-2);}

/* 공통 섹션 타이틀 */
.common-tit-wrapper{display:flex;justify-content:space-between;align-items:flex-start;column-gap:var(--space-20);row-gap:var(--space-12);margin-bottom:var(--space-40);}
.common-tit{display:flex;flex-direction:column;row-gap:var(--space-8);}

/* =========================================================
    BUTTON
    size    : .xl(56) / 기본(48) / .sm(40) / .xs(32)
    variant : 기본(white line) / .tint / .point / .solid / .round
========================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;column-gap:var(--space-8);width:fit-content;height:48px;padding:0 var(--space-24);border:1px solid var(--border-2);border-radius:var(--radius-8);background:var(--color-white);font-size:var(--fs-16);font-weight:500;line-height:1.5;color:var(--text-1);white-space:nowrap;transition:var(--transition);cursor:pointer;}
.btn:hover{border-color:var(--border-3);}
.btn svg{flex-shrink:0;}
.btn.w-100{width:100%;}

.btn.xl{height:56px;padding:0 var(--space-32);font-size:var(--fs-18);border-radius:var(--radius-12);}
.btn.sm{height:40px;padding:0 var(--space-16);font-size:var(--fs-14);}
.btn.xs{height:32px;padding:0 var(--space-12);font-size:var(--fs-12);border-radius:var(--radius-6);}

.btn.tint{background:var(--bg-2);border-color:var(--bg-2);color:var(--text-2);}
.btn.tint:hover{border-color:var(--border-point);color:var(--static-1);}
.btn.point{background:var(--static-1);border-color:var(--static-1);color:var(--color-white);}
.btn.point:hover{background:var(--static-1-hover);border-color:var(--static-1-hover);}
.btn.solid{background:var(--bg-3);border-color:var(--bg-3);color:var(--color-white);}
.btn.solid:hover{background:#000;border-color:#000;}
.btn.round{border-radius:var(--radius-full);}

.btn:disabled,
.btn.disabled{background:var(--bg-1)!important;border-color:var(--bg-1)!important;color:var(--text-4)!important;cursor:not-allowed;pointer-events:none;}

.btn-wrap{display:flex;align-items:center;column-gap:var(--space-12);row-gap:var(--space-8);flex-wrap:wrap;}
.btn-wrap.center{justify-content:center;}

/* 더보기 */
.btn-more{display:inline-flex;align-items:center;column-gap:2px;padding-bottom:1px;border-bottom:1px solid currentColor;font-size:var(--fs-14);font-weight:500;line-height:1.4;color:var(--text-2);white-space:nowrap;transition:var(--transition);}
.btn-more:hover{color:var(--static-1);}

/* 텍스트 버튼 */
.btn-text{display:inline-flex;align-items:center;height:40px;padding:0 var(--space-12);font-size:var(--fs-14);font-weight:500;color:var(--text-1);transition:var(--transition);}
.btn-text:hover{color:var(--static-1);}

/* 아이콘 버튼 */
.btn-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;border-radius:var(--radius-full);color:var(--text-1);transition:var(--transition);}
.btn-icon:hover{color:var(--static-1);}
.btn-icon.circle{width:48px;height:48px;}
.btn-icon.circle.sm{width:40px;height:40px;}
.btn-icon.circle.line{background:var(--color-white);border:1px solid var(--border-2);}
.btn-icon.circle.line:hover{border-color:var(--border-3);color:var(--text-1);}
.btn-icon.circle.white{background:var(--color-white);box-shadow:var(--shadow-2);}
.btn-icon.circle.gray{background:rgba(0,0,0,.45);color:var(--color-white);backdrop-filter:blur(4px);}
.btn-icon.circle.gray:hover{background:rgba(0,0,0,.65);color:var(--color-white);}
.btn-icon:disabled,
.btn-icon.swiper-button-disabled{opacity:.35;cursor:default;pointer-events:none;}

/* 찜 토글 */
.btn-like .ico-on{display:none;}
.btn-like.active{color:var(--text-1);}
.btn-like.active .ico-on{display:block;}
.btn-like.active .ico-off{display:none;}

/* 카운트 뱃지 (장바구니 수량 등) */
.count-badge{position:absolute;top:-2px;right:-6px;display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border:2px solid var(--color-white);border-radius:var(--radius-full);background:var(--static-1);font-size:var(--fs-11);font-weight:600;line-height:1;color:var(--color-white);}

/* =========================================================
    BADGE
========================================================= */
.badge{display:inline-flex;align-items:center;width:fit-content;height:24px;padding:0 var(--space-8);border:1px solid var(--border-2);border-radius:var(--radius-4);background:var(--color-white);font-size:var(--fs-13);font-weight:500;line-height:1;color:var(--text-1);white-space:nowrap;}
.badge.sm{height:20px;padding:0 6px;font-size:var(--fs-11);}
.badge.solid{background:var(--bg-3);border-color:var(--bg-3);color:var(--color-white);}
.badge.tint{background:var(--bg-2);border-color:var(--bg-2);color:var(--static-1);}
.badge.point{background:var(--static-1);border-color:var(--static-1);color:var(--color-white);}
.badge.normal{background:var(--bg-1);border-color:var(--bg-1);color:var(--text-3);}
.badge.line-point{border-color:var(--border-point);color:var(--static-1);}

/* =========================================================
    CHIP (필터 / 해시태그)
========================================================= */
.chip-list{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-10);}
.chip{display:inline-flex;align-items:center;column-gap:var(--space-8);height:44px;padding:0 var(--space-20);border:1px solid var(--border-2);border-radius:var(--radius-full);background:var(--color-white);font-size:var(--fs-14);font-weight:500;color:var(--text-2);white-space:nowrap;transition:var(--transition);cursor:pointer;}
.chip:hover{border-color:var(--border-3);}
.chip.active{border-color:var(--border-point);color:var(--text-1);box-shadow:inset 0 0 0 1px var(--border-point);}
.chip .ico{font-size:1.05em;line-height:1;}
.chip .hash{font-weight:600;color:var(--text-1);}

/* =========================================================
    CHECKBOX / RADIO
========================================================= */
.form-check{position:relative;display:inline-flex;align-items:center;column-gap:var(--space-10);font-size:var(--fs-16);color:var(--text-2);cursor:pointer;}
.form-check input{position:absolute;opacity:0;width:1px;height:1px;}
.form-check .mark{position:relative;display:block;flex-shrink:0;width:22px;height:22px;border:1px solid var(--border-2);border-radius:var(--radius-4);background:var(--color-white);transition:var(--transition);}
.form-check input:checked+.mark{background:var(--static-1);border-color:var(--static-1);}
.form-check input[type=checkbox]:checked+.mark::after{position:absolute;top:4px;left:7px;width:6px;height:10px;border:solid var(--color-white);border-width:0 2px 2px 0;transform:rotate(45deg);content:'';}
.form-check input[type=radio]+.mark{border-radius:50%;}
.form-check input[type=radio]:checked+.mark{background:var(--color-white);border-color:var(--static-1);}
.form-check input[type=radio]:checked+.mark::after{position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:50%;background:var(--static-1);transform:translate(-50%,-50%);content:'';}
.form-check input:focus-visible+.mark{outline:2px solid var(--static-1);outline-offset:2px;}
.form-check input:disabled+.mark{background:var(--bg-1);border-color:var(--border-2);}
.form-check:has(input:disabled){color:var(--text-4);cursor:not-allowed;}

/* =========================================================
    FORM
========================================================= */
.common-form{display:flex;flex-direction:column;row-gap:var(--space-24);}
.form-field{display:flex;flex-direction:column;row-gap:var(--space-8);}
.form-field>label,
.form-field>.label{font-size:var(--fs-15);font-weight:500;line-height:1.5;color:var(--text-1);}
.form-field>label .req{color:var(--static-2);margin-left:2px;}

.textbox{width:100%;height:52px;padding:0 var(--space-20);border:1px solid var(--border-2);border-radius:var(--radius-8);background:var(--color-white);font-size:var(--fs-16);line-height:1.5;color:var(--text-1);outline:none;transition:border-color var(--transition);}
.textbox::placeholder{color:var(--text-3);}
.textbox:focus{border-color:var(--border-3);}
.textbox:disabled,
.textbox[readonly]{background:var(--bg-1);color:var(--text-3);}
textarea.textbox{height:140px;padding:var(--space-16) var(--space-20);resize:vertical;}
.is-error .textbox,
.textbox.is-error{border-color:var(--border-error);}
.error-msg{display:none;font-size:var(--fs-13);color:var(--static-2);}
.is-error .error-msg{display:block;}

/* 셀렉트 */
.select-box{position:relative;width:100%;}
.select-box::after{position:absolute;top:50%;right:var(--space-20);width:8px;height:8px;border-right:1.5px solid var(--text-2);border-bottom:1.5px solid var(--text-2);transform:translateY(-70%) rotate(45deg);transition:var(--transition);pointer-events:none;content:'';}
.select-box:focus-within::after{transform:translateY(-30%) rotate(225deg);}
.select{appearance:none;-webkit-appearance:none;width:100%;height:52px;padding:0 calc(var(--space-20) + 24px) 0 var(--space-20);border:1px solid var(--border-2);border-radius:var(--radius-8);background:var(--color-white);font-size:var(--fs-16);color:var(--text-1);outline:none;cursor:pointer;transition:border-color var(--transition);}
.select:focus{border-color:var(--border-3);}
.select:invalid{color:var(--text-3);}

/* 인풋 + 아이콘 (비밀번호 보기 등) */
.input-icon{position:relative;}
.input-icon .textbox{padding-right:56px;}
.input-icon .btn-icon{position:absolute;top:50%;right:6px;transform:translateY(-50%);color:var(--text-3);}

/* 이메일 */
.input-email{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;height:52px;border:1px solid var(--border-2);border-radius:var(--radius-8);background:var(--color-white);transition:border-color var(--transition);}
.input-email:focus-within{border-color:var(--border-3);}
.input-email .textbox,
.input-email .select{height:100%;border:0;background:transparent;}
.input-email .at{display:flex;color:var(--text-1);}
.input-email .select-box{height:100%;}

/* 날짜 (YYYY / MM / DD) */
.input-date{display:flex;align-items:center;height:52px;padding-right:var(--space-16);border:1px solid var(--border-2);border-radius:var(--radius-8);background:var(--color-white);transition:border-color var(--transition);}
.input-date:focus-within{border-color:var(--border-3);}
.input-date input{flex:1;min-width:0;height:100%;border:0;background:transparent;font-size:var(--fs-16);text-align:center;color:var(--text-1);outline:none;}
.input-date input::placeholder{color:var(--text-3);}
.input-date .divider{width:1px;height:14px;background:var(--border-2);}
.input-date .btn-icon{color:var(--text-1);}

/* 인풋 + 버튼 */
.input-btn{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--space-10);}
.input-btn .btn{height:52px;}

/* 수량 */
.qty{display:inline-flex;align-items:center;height:40px;border:1px solid var(--border-2);border-radius:var(--radius-8);}
.qty button{width:38px;height:100%;font-size:18px;color:var(--text-2);}
.qty button:disabled{color:var(--text-4);cursor:default;}
.qty input{width:40px;height:100%;border:0;text-align:center;font-size:var(--fs-15);font-weight:600;outline:none;}

/* =========================================================
    PRODUCT CARD
========================================================= */
.prd-card{position:relative;display:flex;flex-direction:column;}
.prd-card .prd-thumb{position:relative;display:block;aspect-ratio:1/1;border-radius:var(--radius-16);}
.prd-card .prd-thumb img{transition:transform .5s ease;}
.prd-card:hover .prd-thumb img{transform:scale(1.04);}
.prd-card .prd-thumb .btn-like{position:absolute;top:var(--space-12);right:var(--space-12);color:var(--color-white);filter:drop-shadow(0 1px 3px rgba(0,0,0,.25));}
.prd-card .prd-thumb .btn-like.active{color:var(--static-2);}
.prd-card .prd-info{display:flex;flex-direction:column;align-items:flex-start;row-gap:var(--space-8);padding-top:var(--space-20);}
.prd-card .prd-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--fs-15);font-weight:400;line-height:1.5;color:var(--text-1);}
.prd-card .prd-price{display:flex;flex-direction:column;row-gap:2px;margin-top:var(--space-4);}
.prd-card .prd-price .now{display:flex;align-items:center;column-gap:var(--space-8);}
.prd-card .prd-price .sale-rate{font-size:var(--fs-16);}
.prd-card .prd-btn{margin-top:var(--space-16);}

/* 공동구매 카드 */
.group-card .prd-thumb::before{position:absolute;inset:0 0 auto;height:45%;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0));z-index:1;pointer-events:none;content:'';}
.group-card .influencer{position:absolute;top:var(--space-20);left:var(--space-20);right:var(--space-20);display:flex;align-items:center;column-gap:var(--space-16);z-index:2;color:var(--color-white);}
.group-card .influencer .avatar{width:56px;height:56px;border:2px solid var(--color-white);border-radius:50%;flex-shrink:0;}
.group-card .influencer .name{display:block;font-size:var(--fs-16);font-weight:600;}
.group-card .influencer .meta{display:flex;align-items:center;column-gap:var(--space-10);margin-top:2px;font-size:var(--fs-13);color:var(--text-on-dark-2);opacity:.9;}
.group-card .influencer .meta i{width:1px;height:10px;background:currentColor;opacity:.7;}
.group-card .timer{position:absolute;left:var(--space-12);right:var(--space-12);bottom:var(--space-12);z-index:2;display:flex;align-items:center;justify-content:center;column-gap:var(--space-8);height:36px;border-radius:var(--radius-8);background:rgba(34,34,34,.72);backdrop-filter:blur(6px);font-size:var(--fs-14);font-weight:500;font-variant-numeric:tabular-nums;color:var(--color-white);}
.group-card .timer.urgent{background:rgba(192,40,28,.88);}
.group-card .timer.end{background:rgba(34,34,34,.5);}

/* =========================================================
    PAGINATION
========================================================= */
.pagination{display:flex;align-items:center;justify-content:center;gap:var(--space-6);margin-top:var(--space-48);}
.pagination a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-8);font-size:var(--fs-14);font-weight:500;color:var(--text-3);transition:var(--transition);}
.pagination a:hover{background:var(--bg-1);color:var(--text-1);}
.pagination a.active{background:var(--static-1);color:var(--color-white);}
.pagination a.arrow{border:1px solid var(--border-2);color:var(--text-1);}
.pagination a.arrow.disable{color:var(--text-4);pointer-events:none;}

/* =========================================================
    TAB
========================================================= */
.common-tab{display:flex;border-bottom:1px solid var(--border-2);}
.common-tab button{position:relative;flex:1;height:52px;font-size:var(--fs-16);font-weight:500;color:var(--text-3);transition:var(--transition);}
.common-tab button::after{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--static-1);transform:scaleX(0);transition:var(--transition);content:'';}
.common-tab button.active{color:var(--text-1);font-weight:600;}
.common-tab button.active::after{transform:scaleX(1);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* =========================================================
    MODAL
========================================================= */
html:has(.modal.open),
body:has(.modal.open){overflow:hidden;}
.modal{position:fixed;top:50%;left:50%;display:none;width:90%;max-width:480px;max-height:90vh;overflow-y:auto;border-radius:var(--radius-16);background:var(--color-white);box-shadow:var(--shadow-4);transform:translate(-50%,-50%);z-index:9999;scrollbar-width:none;}
.modal::-webkit-scrollbar{display:none;}
.modal-bg{position:fixed;inset:0;display:none;background:var(--bg-dim);z-index:9998;}
.modal.open,
.modal-bg.open{display:block;}
.modal-head{position:sticky;top:0;display:flex;align-items:flex-start;justify-content:space-between;column-gap:var(--space-20);padding:var(--space-24) var(--space-28) var(--space-12);background:var(--color-white);}
.modal-cont{padding:var(--space-12) var(--space-28) var(--space-24);}
.modal-bottom{position:sticky;bottom:0;display:flex;column-gap:var(--space-8);padding:var(--space-16) var(--space-28) var(--space-24);background:var(--color-white);}
.modal-bottom .btn{flex:1;}

/* =========================================================
    TOAST
========================================================= */
.toast{position:fixed;left:50%;bottom:var(--space-40);display:flex;align-items:center;column-gap:var(--space-10);max-width:calc(100% - 32px);padding:var(--space-14) var(--space-24);border-radius:var(--radius-full);background:var(--bg-3);box-shadow:var(--shadow-2);font-size:var(--fs-14);color:var(--color-white);opacity:0;visibility:hidden;transform:translate(-50%,12px);transition:var(--transition);z-index:10000;}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0);}

/* =========================================================
    TOP BUTTON
========================================================= */
.btn-top{position:fixed;right:var(--space-24);bottom:var(--space-24);opacity:0;visibility:hidden;transform:translateY(10px);z-index:800;}
.btn-top.show{opacity:1;visibility:visible;transform:translateY(0);}


@media screen and (max-width: 1024px) {
    .common-grid4{grid-template-columns:repeat(2,minmax(0,1fr));}
    .common-grid3{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media screen and (max-width: 500px) {
    .inner{width:calc(100% - 32px);}
    .common-tit-wrapper{margin-bottom:24px;align-items:flex-end;}
    .section-tit{font-size:22px;}
    .card-tit{font-size:19px;}
    .price-lg{font-size:26px;}
    .common-grid2,
    .common-grid3{grid-template-columns:repeat(1,minmax(0,1fr));}
    .common-grid4{column-gap:12px;row-gap:28px;}

    .btn{padding:0 16px;}
    .btn.xl{height:52px;}
    .chip{height:38px;padding:0 14px;}

    .prd-card .prd-thumb{border-radius:var(--radius-12);}
    .prd-card .prd-info{padding-top:12px;row-gap:6px;}
    .prd-card .prd-btn{height:40px;font-size:13px;margin-top:10px;}

    .group-card .influencer{top:14px;left:14px;column-gap:10px;}
    .group-card .influencer .avatar{width:42px;height:42px;}

    .input-email{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);}
    .input-email .textbox,
    .input-email .select{padding-left:12px;}

    .toast{bottom:84px;}
    .btn-top{right:16px;bottom:16px;}
}