/* =========================================
   GomsaeShop – Home  (Korean Open-Market)
   Benchmark: Auction · 11st · Gmarket · Coupang
   ========================================= */

/* ---------- Page wrapper ---------- */
.home-main { background:#f5f6f8; padding-bottom:0; }
.hm-intro { padding:28px 0 6px; }

/* ===================================================
   1. HERO  (배너 캐러셀 + 우측 사이드)
   =================================================== */
.hm-hero { padding:16px 0 0; }

.hm-hero__layout {
    display:grid;
    grid-template-columns:1fr 300px;
    gap:10px;
    align-items:stretch;
}

/* --- Carousel --- */
.hm-hero__carousel { position:relative; border-radius:16px; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,.10); }
.hm-hero__viewport { position:relative; height:400px; overflow:hidden; }

.hm-hero__slide {
    display:none;
    position:absolute; inset:0;
    padding:56px 52px;
    align-items:center;
}
.hm-hero__slide.is-active { display:flex; animation:heroFadeIn .5s ease; }
@keyframes heroFadeIn { from{opacity:0;transform:scale(1.02)} to{opacity:1;transform:scale(1)} }

.hm-hero__slide--1 {
    background:linear-gradient(135deg,#2D6A4F 0%,#40916C 50%,#52B788 100%);
}
.hm-hero__slide--2 {
    background:linear-gradient(135deg,#1B4332 0%,#2D6A4F 40%,#40916C 100%);
}
.hm-hero__slide--3 {
    background:linear-gradient(135deg,#2D4A22 0%,#3D6B35 40%,#52A855 100%);
}

.hm-hero__slide::before {
    content:""; position:absolute; top:-120px; right:-80px;
    width:400px; height:400px; border-radius:50%;
    background:rgba(255,255,255,.04); pointer-events:none;
}
.hm-hero__slide::after {
    content:""; position:absolute; bottom:-60px; left:30%;
    width:200px; height:200px; border-radius:50%;
    background:rgba(255,255,255,.03); pointer-events:none;
}

.hm-hero__slide-body { position:relative; z-index:1; max-width:500px; }

.hm-hero__badge {
    display:inline-flex; align-items:center; gap:5px;
    padding:6px 14px; border-radius:999px;
    background:rgba(255,255,255,.18); color:#fff;
    font-size:11px; font-weight:800; letter-spacing:.1em;
    backdrop-filter:blur(4px);
}

.hm-hero__slide-body h2 {
    margin:18px 0 14px; font-size:36px; font-weight:900;
    line-height:1.2; letter-spacing:-.04em; color:#fff;
    text-shadow:0 2px 12px rgba(0,0,0,.15);
}
.hm-hero__slide-body h2 strong { color:#ffd700; }

.hm-hero__slide-body p {
    margin:0 0 24px; font-size:15px;
    color:rgba(255,255,255,.8); line-height:1.6;
}

.hm-hero__cta {
    display:inline-flex; align-items:center; gap:8px;
    padding:13px 28px; border-radius:999px;
    background:#fff; color:var(--primary-color);
    font-size:15px; font-weight:700;
    transition:all .25s ease;
    box-shadow:0 4px 14px rgba(0,0,0,.12);
}
.hm-hero__cta:hover {
    background:var(--primary-color); color:#fff;
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(45,106,79,.35);
}

/* --- Controls --- */
.hm-hero__controls {
    position:absolute; bottom:20px; left:52px; right:52px;
    z-index:5; display:flex; align-items:center; gap:12px;
}

.hm-hero__arrow {
    width:36px; height:36px; display:flex; align-items:center; justify-content:center;
    border:none; border-radius:50%;
    background:rgba(255,255,255,.2); color:#fff;
    font-size:14px; cursor:pointer; backdrop-filter:blur(4px);
    transition:all .2s ease; flex-shrink:0;
}
.hm-hero__arrow:hover { background:rgba(255,255,255,.45); transform:scale(1.1); }

.hm-hero__dots { display:flex; align-items:center; gap:6px; }

.hm-hero__dot {
    width:24px; height:4px; border:none; border-radius:999px;
    background:rgba(255,255,255,.3); cursor:pointer;
    transition:all .25s ease; padding:0;
}
.hm-hero__dot.is-active { width:40px; background:#fff; }

.hm-hero__counter {
    margin-left:auto; font-size:12px; font-weight:700;
    color:rgba(255,255,255,.5);
}
.hm-hero__counter span:first-child { color:#fff; font-size:15px; }

/* --- Side cards --- */
.hm-hero__side { display:grid; gap:10px; }

.hm-hero__side-card {
    display:flex; flex-direction:column; justify-content:center;
    padding:22px 20px; border-radius:16px;
    text-decoration:none; position:relative; overflow:hidden;
    transition:transform .25s ease,box-shadow .25s ease;
}
.hm-hero__side-card::before {
    content:""; position:absolute; inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,.12) 0%,transparent 100%);
    pointer-events:none;
}
.hm-hero__side-card:hover {
    transform:translateY(-4px);
    box-shadow:0 8px 24px rgba(0,0,0,.15);
}
.hm-hero__side-card--deal {
    background:linear-gradient(135deg,#D08068 0%,#D89575 100%); color:#fff; flex:1;
}
.hm-hero__side-card--coupon {
    background:linear-gradient(135deg,#1A1918 0%,#333333 100%); color:#fff; flex:1;
}
.hm-hero__side-tag {
    display:inline-flex; align-self:flex-start; align-items:center;
    gap:5px; padding:4px 10px; border-radius:999px;
    background:rgba(255,255,255,.22);
    font-size:10px; font-weight:800; letter-spacing:.05em; margin-bottom:12px;
    backdrop-filter:blur(4px);
}
.hm-hero__side-card strong {
    display:block; font-size:17px; font-weight:800; line-height:1.35;
}
.hm-hero__side-card p {
    margin-top:8px; font-size:12px; opacity:.85; line-height:1.4;
}

/* ===================================================
   2. CATEGORY SHORTCUTS  (원형 아이콘)
   =================================================== */
.hm-categories { padding:26px 0 10px; }

.hm-categories__grid {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:18px;
}

.hm-cat-item {
    display:flex;
    flex-direction:column;
    gap:16px;
    padding:24px;
    border-radius:18px;
    text-decoration:none;
    color:var(--text-color);
    background:#fff;
    border:1px solid var(--border-color);
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hm-cat-item:hover {
    transform:translateY(-4px);
    box-shadow:0 10px 26px rgba(0,0,0,.08);
    border-color:#d1d7de;
}

.hm-cat-item--panel {
    min-height:240px;
    justify-content:space-between;
}

.hm-cat-visual {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.hm-cat-icon {
    width:56px; height:56px; display:flex;
    align-items:center; justify-content:center;
    border-radius:50%; font-size:22px; color:#fff;
    box-shadow:0 4px 12px rgba(0,0,0,.10);
    transition:transform .2s ease;
}
.hm-cat-item:hover .hm-cat-icon { transform:scale(1.1); }

.hm-cat-kicker {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    padding:0 12px;
    border-radius:999px;
    background:var(--bg-soft);
    color:var(--text-muted);
    font-size:10px;
    font-weight:800;
    letter-spacing:.12em;
}

.hm-cat-icon--0{background:linear-gradient(135deg,#e61754,#ff6b81)}
.hm-cat-icon--1{background:linear-gradient(135deg,#6c5ce7,#a29bfe)}
.hm-cat-icon--2{background:linear-gradient(135deg,#00b894,#55efc4)}
.hm-cat-icon--3{background:linear-gradient(135deg,#0984e3,#74b9ff)}
.hm-cat-icon--4{background:linear-gradient(135deg,#fdcb6e,#e17055)}
.hm-cat-icon--5{background:linear-gradient(135deg,#e84393,#fd79a8)}
.hm-cat-icon--6{background:linear-gradient(135deg,#00cec9,#81ecec)}
.hm-cat-icon--7{background:linear-gradient(135deg,#636e72,#b2bec3)}

.hm-cat-copy {
    display:flex;
    flex-direction:column;
    gap:10px;
}

.hm-cat-item__name {
    font-size:24px;
    font-weight:800;
    letter-spacing:-.03em;
}

.hm-cat-item__desc {
    margin:0;
    font-size:14px;
    line-height:1.6;
    color:var(--text-muted);
}

.hm-cat-tags {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.hm-cat-tag {
    display:inline-flex;
    align-items:center;
    min-height:32px;
    padding:0 12px;
    border-radius:999px;
    background:var(--bg-soft);
    color:var(--text-color);
    font-size:12px;
    font-weight:700;
}

/* ===================================================
   3. BENEFITS STRIP
   =================================================== */
.hm-benefits { padding:16px 0 6px; }

.hm-benefits__strip {
    display:grid; grid-template-columns:repeat(4,1fr);
    border-radius:14px; overflow:hidden;
    background:#fff; border:1px solid var(--border-color);
    box-shadow:0 2px 12px rgba(0,0,0,.04);
}

.hm-benefits__item {
    display:flex; align-items:center; gap:14px;
    padding:18px 22px;
    border-right:1px solid var(--border-color);
    transition:background .2s ease;
}
.hm-benefits__item:last-child { border-right:none; }
.hm-benefits__item:hover { background:var(--bg-soft); }

.hm-benefits__icon {
    width:44px; height:44px; display:flex;
    align-items:center; justify-content:center;
    border-radius:50%; flex-shrink:0;
    background:var(--primary-soft); color:var(--primary-color);
    font-size:17px;
}
.hm-benefits__item strong {
    display:block; font-size:14px; font-weight:600;
    color:var(--text-color); margin-bottom:2px;
}
.hm-benefits__copy span {
    font-size:12px; color:var(--text-muted);
}

/* ===================================================
   4. SECTION HEADER  (공통 – 오픈마켓 스타일)
   =================================================== */
.hm-section { padding:36px 0; }
.hm-section--best { background:linear-gradient(180deg,#fff8f0 0%,#f5f6f8 100%); }

.hm-section__header {
    display:flex; align-items:center; flex-wrap:wrap;
    gap:8px 16px; margin-bottom:22px; padding-bottom:16px;
    border-bottom:3px solid var(--text-color);
    position:relative;
}
.hm-section__header--compact {
    margin-bottom:20px;
}
.hm-section__header::after {
    content:""; position:absolute; bottom:-3px; left:0;
    width:120px; height:3px; background:var(--primary-color);
}

.hm-section__title-group {
    display:flex; align-items:center; gap:10px;
}

.hm-section__icon {
    width:34px; height:34px; display:flex;
    align-items:center; justify-content:center;
    border-radius:10px;
    background:var(--primary-soft); color:var(--primary-color);
    font-size:15px;
}
.hm-section__icon--fire { background:#fff3cd; color:#f59e0b; }
.hm-section__icon--new  { background:#d1fae5; color:#059669; }
.hm-section__icon--best { background:#fef3c7; color:#d97706; }

.hm-section__header h2 {
    font-size:24px; font-weight:900;
    letter-spacing:-.03em; color:var(--text-color);
}
.hm-section__desc {
    margin:0; font-size:13px; color:var(--text-muted);
}
.hm-section__more {
    margin-left:auto; display:inline-flex; align-items:center;
    gap:4px; padding:7px 16px; border-radius:999px;
    border:1px solid var(--border-color); background:#fff;
    font-size:13px; font-weight:600;
    color:var(--text-muted);
    transition:all .2s ease;
}
.hm-section__more:hover {
    color:var(--primary-color); border-color:var(--primary-color);
    background:var(--primary-soft);
}

/* ===================================================
   5. PRODUCT GRID  –  compact cards for HOME
   =================================================== */
.hm-product-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
}

.hm-product-grid .product-card { min-width:0; width:100%; }

.hm-product-grid .product-card__link {
    padding: 0;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    box-shadow: none;
    background:#fff;
    overflow:hidden;
    transition:all .2s ease;
}
.hm-product-grid .product-card__link:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.10);
    border-color: #c5cad2;
    transform:translateY(-3px);
}

.hm-product-grid .product-card .img-box {
    aspect-ratio: 1 / 1;
    padding: 0;
    border-radius: 0;
    border: none;
    border-bottom:1px solid #f0f0f0;
    background: #fafbfc;
}

.hm-product-grid .product-card__badge {
    top: 8px; left: 8px;
    min-height: 22px; padding: 0 8px;
    font-size: 10px;
}

.hm-product-grid .product-card__meta {
    padding: 12px;
}

.hm-product-grid .product-card__category {
    margin-bottom: 2px; font-size: 11px;
}

.hm-product-grid .product-card__brand {
    margin-bottom: 4px; font-size: 11px;
}

.hm-product-grid .product-card__title {
    min-height: unset;
    margin: 0 0 6px;
    font-size: 13px;
    line-height: 1.45;
    -webkit-line-clamp: 2;
    height: calc(13px * 1.45 * 2);
}

.hm-product-grid .product-card__summary {
    display: none;
}

.hm-product-grid .product-card__price-wrap {
    gap: 2px;
}

.hm-product-grid .product-card__price-top {
    gap: 5px; min-height: 16px;
}

.hm-product-grid .product-card__discount {
    font-size: 15px;
}

.hm-product-grid .product-card__original {
    font-size: 11px;
}

.hm-product-grid .product-card__price {
    font-size: 18px;
}

.hm-product-grid .product-card__price::after {
    font-size: 12px;
}

.hm-product-grid .product-card__meta-text {
    font-size: 11px;
}

/* ===================================================
   6. FLASH DEAL BOARD
   =================================================== */
.hm-flash {
    padding:18px 0 14px;
}

.hm-flash__layout {
    display:grid;
    grid-template-columns:320px 1fr;
    gap:18px;
    align-items:stretch;
}

.hm-flash__lead,
.hm-flash__rail {
    border-radius:18px;
    border:1px solid var(--border-color);
    background:#fff;
    box-shadow:0 2px 12px rgba(0,0,0,.04);
}

.hm-flash__lead {
    display:flex;
    flex-direction:column;
    gap:18px;
    padding:26px;
}

.hm-flash__eyebrow {
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--primary-color);
    font-size:12px;
    font-weight:800;
    letter-spacing:.12em;
}

.hm-flash__lead h2 {
    margin:0;
    font-size:28px;
    font-weight:900;
    line-height:1.28;
    letter-spacing:-.04em;
}

.hm-flash__lead p {
    margin:0;
    font-size:14px;
    line-height:1.7;
    color:var(--text-muted);
}

.hm-flash__countdown {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
}

.hm-flash__countdown-label {
    color:var(--text-muted);
    font-size:13px;
}

.hm-flash__countdown-box {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:42px;
    padding:8px 10px;
    border-radius:10px;
    background:var(--primary-color);
    color:#fff;
    font-size:16px;
    font-weight:800;
    font-family:"Outfit", "Noto Sans KR", sans-serif;
}

.hm-flash__countdown-sep {
    color:var(--primary-color);
    font-size:18px;
    font-weight:800;
}

.hm-flash__stats {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
}

.hm-flash__stat {
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:14px 12px;
    border-radius:14px;
    background:var(--bg-soft);
    text-align:center;
}

.hm-flash__stat strong {
    font-size:18px;
    font-weight:800;
    color:var(--text-color);
}

.hm-flash__stat span {
    font-size:11px;
    color:var(--text-muted);
}

.hm-flash__rail {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:14px;
    padding:16px;
}

.hm-flash-card {
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border-radius:16px;
    border:1px solid var(--border-color);
    background:#fff;
    color:var(--text-color);
    text-decoration:none;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.hm-flash-card:hover {
    transform:translateY(-4px);
    box-shadow:0 12px 24px rgba(0,0,0,.08);
    border-color:#d1d7de;
}

.hm-flash-card__image {
    aspect-ratio:1 / 1;
    padding:18px;
    background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%);
    border-bottom:1px solid var(--border-color);
}

.hm-flash-card__image img {
    width:100%;
    height:100%;
    object-fit:contain;
}

.hm-flash-card__body {
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:16px;
}

.hm-flash-card__badge {
    display:inline-flex;
    align-items:center;
    gap:6px;
    align-self:flex-start;
    min-height:26px;
    padding:0 10px;
    border-radius:999px;
    background:var(--primary-soft);
    color:var(--primary-color);
    font-size:11px;
    font-weight:800;
}

.hm-flash-card__category {
    font-size:11px;
    font-weight:700;
    color:var(--text-subtle);
}

.hm-flash-card__name {
    display:-webkit-box;
    min-height:44px;
    font-size:15px;
    font-weight:700;
    line-height:1.45;
    overflow:hidden;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

.hm-flash-card__price {
    display:flex;
    flex-direction:column;
    gap:2px;
}

.hm-flash-card__price strong {
    font-size:22px;
    font-weight:900;
}

.hm-flash-card__price span {
    font-size:12px;
    color:var(--text-muted);
}

.hm-flash-card--skeleton {
    pointer-events:none;
}

.hm-flash-card--skeleton .hm-flash-card__image,
.hm-flash-card--skeleton .hm-flash-card__badge,
.hm-flash-card--skeleton .hm-flash-card__category,
.hm-flash-card--skeleton .hm-flash-card__name,
.hm-flash-card--skeleton .hm-flash-card__price {
    background:linear-gradient(90deg, #eef2f6 20%, #f7f9fb 40%, #eef2f6 60%);
    background-size:200% 100%;
    animation:shimmer 1.5s infinite;
    color:transparent;
}

.hm-flash-card--skeleton .hm-flash-card__badge {
    width:92px;
    min-height:24px;
}

.hm-flash-card--skeleton .hm-flash-card__category {
    width:72px;
    min-height:12px;
}

.hm-flash-card--skeleton .hm-flash-card__name {
    width:100%;
    min-height:44px;
    border-radius:10px;
}

.hm-flash-card--skeleton .hm-flash-card__price {
    width:110px;
    min-height:22px;
    border-radius:10px;
}

/* ===================================================
   7. TIME SALE  (어두운 배경 – 펜슬 디자인 #1A1918)
   =================================================== */
.hm-timesale {
    background:#1A1918;
    color:#fff; padding:48px 0 80px;
    position:relative; overflow:hidden;
}
.hm-timesale::before {
    content:""; position:absolute; inset:0;
    background:radial-gradient(ellipse at 20% 50%, rgba(208,128,104,.06) 0%, transparent 60%),
               radial-gradient(ellipse at 80% 20%, rgba(208,128,104,.04) 0%, transparent 50%);
    pointer-events:none;
}

/* --- 타임세일 헤더 --- */
.hm-timesale__header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:20px; padding-bottom:20px;
    border-bottom:1px solid rgba(255,255,255,.1);
    position:relative; z-index:1;
}
.hm-timesale__title-group {
    display:flex; align-items:center; gap:12px;
}
.hm-timesale__icon-box {
    width:32px; height:32px; display:flex;
    align-items:center; justify-content:center;
    border-radius:8px; background:#D08068;
    font-size:16px; flex-shrink:0;
}
.hm-timesale__header h2 {
    margin:0; font-size:22px; font-weight:700;
    color:#fff; letter-spacing:-0.3px;
}

/* --- 통계 바 --- */
.hm-timesale__stats-bar {
    display:flex; align-items:center; justify-content:center;
    gap:24px; padding:16px 24px;
    background:#2A2A2A; border-radius:12px;
    margin-bottom:24px; position:relative; z-index:1;
}
.hm-timesale__stat-item {
    display:flex; flex-direction:column;
    align-items:center; gap:4px;
}
.hm-timesale__stat-item strong {
    font-size:20px; font-weight:700;
    color:#D89575; font-family:'Outfit','Noto Sans KR',sans-serif;
}
.hm-timesale__stat-item span {
    font-size:11px; color:#6D6C6A;
}

.hm-timesale__live {
    display:inline-flex; align-items:center; gap:4px;
    padding:4px 12px; border-radius:999px;
    background:#ef4444; color:#fff;
    font-size:10px; font-weight:800; letter-spacing:.1em;
    animation:livePulse 2s ease-in-out infinite;
    box-shadow:0 0 12px rgba(239,68,68,.4);
}
.hm-timesale__live::before {
    content:""; width:6px; height:6px; border-radius:50%;
    background:#fff; animation:liveDot 1.5s ease-in-out infinite;
}
@keyframes livePulse { 0%,100%{opacity:1} 50%{opacity:.7} }
@keyframes liveDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.6)} }

.hm-timesale__grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
    position:relative; z-index:1;
}

/* --- Time-sale card --- */
.hm-ts-card {
    display:block; padding:0; border-radius:14px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    text-decoration:none; color:#fff;
    transition:all .25s ease;
    overflow:hidden; backdrop-filter:blur(8px);
}
.hm-ts-card:hover {
    background:rgba(255,255,255,.12);
    transform:translateY(-4px);
    box-shadow:0 12px 32px rgba(0,0,0,.35);
    border-color:rgba(255,255,255,.15);
}

.hm-ts-card__img {
    aspect-ratio:1; overflow:hidden;
    background:rgba(255,255,255,.04);
    display:flex; align-items:center; justify-content:center;
    padding:16px; border-bottom:1px solid rgba(255,255,255,.06);
}
.hm-ts-card__img img {
    width:100%; height:100%; object-fit:contain;
    filter:drop-shadow(0 4px 12px rgba(0,0,0,.35));
    transition:transform .3s ease;
}
.hm-ts-card:hover .hm-ts-card__img img { transform:scale(1.05); }

.hm-ts-card__body { padding:14px 16px 16px; }

.hm-ts-card__timer {
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 10px; border-radius:999px;
    background:rgba(239,68,68,.25); color:#fca5a5;
    font-size:10px; font-weight:800; margin-bottom:8px;
    border:1px solid rgba(239,68,68,.2);
}
.hm-ts-card__name {
    display:-webkit-box; font-size:13px; font-weight:500;
    line-height:1.45; margin-bottom:10px;
    overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    color:rgba(255,255,255,.9);
}
.hm-ts-card__price {
    display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
}
.hm-ts-card__discount { font-size:18px; font-weight:900; color:#fbbf24; }
.hm-ts-card__current  { font-size:17px; font-weight:800; }
.hm-ts-card__original {
    font-size:11px; color:rgba(255,255,255,.3);
    text-decoration:line-through;
}

/* TS skeleton */
.hm-ts-card--skeleton .hm-ts-card__img { background:rgba(255,255,255,.04); }
.hm-ts-card--skeleton .hm-ts-card__timer,
.hm-ts-card--skeleton .hm-ts-card__name,
.hm-ts-card--skeleton .hm-ts-card__price {
    background:rgba(255,255,255,.06); border-radius:4px;
    color:transparent; min-height:14px;
    animation:shimmer 1.5s infinite;
}
.hm-ts-card--skeleton .hm-ts-card__timer { width:70px; height:20px; }
.hm-ts-card--skeleton .hm-ts-card__name  { height:34px; }
.hm-ts-card--skeleton .hm-ts-card__price { height:20px; width:100px; }
@keyframes shimmer { 0%{opacity:.4} 50%{opacity:.8} 100%{opacity:.4} }

/* ===================================================
   7. PROMO BANNER  (중간 – 풀폭 그래디언트)
   =================================================== */
.hm-promo-banner { padding:48px 0 0; }

.hm-promo-banner__inner {
    display:flex; align-items:center; justify-content:space-between;
    gap:32px; padding:40px 48px; border-radius:16px;
    background:linear-gradient(135deg,#f0f4ff 0%,#e8ecff 40%,#dde3ff 100%);
    border:1px solid #cdd5ff;
    position:relative; overflow:hidden;
    box-shadow:0 4px 20px rgba(99,102,241,.08);
}
.hm-promo-banner__inner::before {
    content:""; position:absolute; top:-40px; right:-40px;
    width:200px; height:200px; border-radius:50%;
    background:rgba(99,102,241,.06); pointer-events:none;
}
.hm-promo-banner__eyebrow {
    display:inline-block; margin-bottom:8px;
    font-size:11px; font-weight:800; letter-spacing:.12em; color:#6366f1;
    text-transform:uppercase;
}
.hm-promo-banner__content h3 {
    margin:0 0 10px; font-size:26px; font-weight:900;
    letter-spacing:-.03em; color:var(--text-color);
}
.hm-promo-banner__content p {
    margin:0 0 18px; font-size:15px;
    color:var(--text-muted); line-height:1.6;
}
.hm-promo-banner__content p strong {
    color:var(--primary-color); font-weight:800;
}
.hm-promo-banner__cta {
    display:inline-flex; align-items:center; gap:8px;
    padding:12px 24px; border-radius:999px;
    background:#6366f1; color:#fff;
    font-size:14px; font-weight:700;
    transition:all .25s ease;
    box-shadow:0 4px 14px rgba(99,102,241,.25);
}
.hm-promo-banner__cta:hover {
    background:#4f46e5; transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(99,102,241,.35);
}
.hm-promo-banner__emoji {
    font-size:64px; flex-shrink:0;
    animation:promoFloat 3s ease-in-out infinite;
}
@keyframes promoFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

/* ===================================================
   8. TRUST SECTION
   =================================================== */
.hm-trust {
    padding:48px 0 64px; background:#fff;
    border-top:1px solid var(--border-color);
}

.hm-trust__grid {
    display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.hm-trust__item {
    text-align:center; padding:28px 18px;
    border-radius:14px; background:#fff;
    border:1px solid var(--border-color);
    transition:all .25s ease;
}
.hm-trust__item:hover {
    transform:translateY(-4px);
    box-shadow:0 8px 28px rgba(0,0,0,.07);
    border-color:#d0d5dc;
}
.hm-trust__icon {
    width:56px; height:56px; display:flex;
    align-items:center; justify-content:center;
    margin:0 auto 14px; border-radius:50%;
    background:var(--primary-soft); color:var(--primary-color);
    font-size:22px; transition:transform .25s ease;
}
.hm-trust__item:hover .hm-trust__icon { transform:scale(1.1); }
.hm-trust__item strong {
    display:block; font-size:15px; font-weight:700;
    margin-bottom:8px; color:var(--text-color);
}
.hm-trust__item p {
    margin:0; font-size:12px; color:var(--text-muted); line-height:1.6;
}

/* ===================================================
   9. FOOTER DARK (home only)
   =================================================== */
body[data-page="home"] .footer {
    margin-top:0; background:#1a1d23;
    color:rgba(255,255,255,.7); border-top:none; padding:36px 0;
}
body[data-page="home"] .footer-links {
    padding-bottom:18px; margin-bottom:18px;
    border-bottom:1px solid rgba(255,255,255,.08);
}
body[data-page="home"] .footer-links a       { font-size:12px; color:rgba(255,255,255,.65); }
body[data-page="home"] .footer-links a:hover  { color:#fff; }
body[data-page="home"] .footer-links a strong { color:rgba(255,255,255,.9); }
body[data-page="home"] .footer-company-info   { font-size:11px; color:rgba(255,255,255,.35); }
body[data-page="home"] .footer-company-info p strong { color:rgba(255,255,255,.6); }
body[data-page="home"] .footer-copyright      { margin-top:14px; color:rgba(255,255,255,.2); }

/* ===================================================
   10. STATE PANEL override in dark ctx
   =================================================== */
.hm-timesale .state-panel {
    background:rgba(255,255,255,.05);
    border-color:rgba(255,255,255,.1);
    color:rgba(255,255,255,.7);
}
.hm-timesale .state-panel h3 { color:#fff; }
.hm-timesale .state-panel p  { color:rgba(255,255,255,.5); }
.hm-timesale .state-panel__icon { color:rgba(255,255,255,.3); }

/* ===================================================
   COUNTDOWN TIMER
   =================================================== */
.hm-timesale__countdown {
    display:flex; align-items:center; gap:8px;
}
.hm-timesale__countdown-label {
    color:#9C9B99; font-size:13px;
}
.hm-timesale__countdown-box {
    display:inline-flex; align-items:center; justify-content:center;
    padding:6px 10px; border-radius:6px;
    background:var(--primary-color,#D08068); color:#fff;
    font-family:'Outfit','Noto Sans KR',sans-serif;
    font-size:16px; font-weight:700; min-width:38px;
    text-align:center;
}
.hm-timesale__countdown-sep {
    color:var(--primary-color,#D08068);
    font-family:'Outfit','Noto Sans KR',sans-serif;
    font-size:18px; font-weight:700;
}

/* --- Stats info bar divider --- */
.hm-timesale__stat-divider {
    width:1px; height:36px; background:#3A3A3A; flex-shrink:0;
}

/* ===================================================
   SCROLL REVEAL & STAGGER ANIMATIONS
   =================================================== */
[data-reveal] {
    opacity:0; transform:translateY(32px);
    transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
[data-reveal].is-visible,
[data-reveal].is-revealed {
    opacity:1; transform:translateY(0);
}

[data-stagger] {
    opacity:0; transform:translateY(20px);
    transition:opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
}
[data-stagger].is-visible,
[data-stagger].is-revealed {
    opacity:1; transform:translateY(0);
}

/* ===================================================
   RESPONSIVE
   =================================================== */
@media (max-width:1200px) {
    .hm-product-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    .hm-flash__layout {
        grid-template-columns:280px 1fr;
    }
}

@media (max-width:1024px) {
    .hm-hero__layout { grid-template-columns:1fr 260px; }
    .hm-hero__viewport { height:340px; }
    .hm-hero__slide-body h2 { font-size:30px; }
    .hm-product-grid { grid-template-columns:repeat(4,1fr) !important; }
    .hm-categories__grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
    .hm-flash__layout { grid-template-columns:1fr; }
    .hm-flash__rail { grid-template-columns:repeat(3, minmax(0, 1fr)); }
    .hm-timesale__grid { grid-template-columns:repeat(3,1fr) !important; }
    .hm-trust__grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:820px) {
    .hm-hero__layout { grid-template-columns:1fr; }
    .hm-hero__side { grid-template-columns:1fr 1fr; }
    .hm-hero__viewport { height:300px; }
    .hm-hero__slide { padding:32px 28px; }
    .hm-hero__slide-body h2 { font-size:26px; }
    .hm-hero__controls { left:28px; right:28px; }

    .hm-benefits__strip { grid-template-columns:repeat(2,1fr); }
    .hm-benefits__item:nth-child(2) { border-right:none; }
    .hm-benefits__item:nth-child(3),
    .hm-benefits__item:nth-child(4) { border-top:1px solid var(--border-color); }

    .hm-product-grid { grid-template-columns:repeat(3,1fr) !important; gap:10px !important; }
    .hm-categories__grid { grid-template-columns:1fr; }
    .hm-flash__stats { grid-template-columns:1fr 1fr 1fr; }
    .hm-flash__rail { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .hm-timesale__grid { grid-template-columns:repeat(2,1fr) !important; }

    .hm-promo-banner__inner {
        flex-direction:column; text-align:center; padding:28px 20px;
    }
    .hm-promo-banner__visual { width:80px; height:80px; font-size:32px; }
    .hm-section__header { flex-direction:column; align-items:flex-start; }
    .hm-section__more { margin-left:0; }
}

@media (max-width:640px) {
    .hm-hero__side { grid-template-columns:1fr; }
    .hm-hero__slide-body h2 { font-size:22px; }
    .hm-hero__viewport { height:260px; }
    .hm-hero__slide { padding:24px 20px; }

    .hm-benefits__strip { grid-template-columns:1fr; }
    .hm-benefits__item { border-right:none; border-bottom:1px solid var(--border-color); }
    .hm-benefits__item:last-child { border-bottom:none; }
    .hm-benefits__item:nth-child(3),
    .hm-benefits__item:nth-child(4) { border-top:none; }

    .hm-categories__grid { gap:4px; padding:14px 10px; }
    .hm-cat-item { min-width:70px; padding:18px; }
    .hm-cat-icon { width:46px; height:46px; font-size:18px; }
    .hm-cat-item__name { font-size:20px; }
    .hm-flash__stats { grid-template-columns:1fr; }
    .hm-flash__rail { grid-template-columns:1fr; padding:12px; }

    .hm-product-grid { grid-template-columns:repeat(2,1fr) !important; gap:8px !important; }
    .hm-timesale__grid { grid-template-columns:repeat(2,1fr) !important; gap:8px !important; }
    .hm-trust__grid { grid-template-columns:repeat(2,1fr); gap:10px; }

    .hm-section { padding:24px 0; }
    .hm-section__header h2 { font-size:19px; }
    .hm-promo-banner__content h3 { font-size:20px; }

    .hm-categories__grid { border-radius:10px; }
}