/* =========================================
   COLORGRAM | components.css
   Buttons / Badges / Cards / Color chip / Tab / Icon
   ========================================= */

/* -----------------------
   Buttons (Y2K Candy)
----------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    padding: 0 28px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--color-line);
    background: var(--color-white);
    border: 1.8px solid var(--color-line);
    border-radius: 999px;
    cursor: pointer;
    box-shadow: var(--shadow-pop-sm);
    transition: transform var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
    will-change: transform;
}

.btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--color-line);
}

.btn:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 var(--color-line);
}

.btn-arrow {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3e%3cpath fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 9h12M10 4l5 5-5 5'/%3e%3c/svg%3e");
    transition: transform var(--dur-fast) var(--ease-out);
}

.btn:hover .btn-arrow {
    transform: translateX(4px);
}

/* btn-primary (hot pink candy) */
.btn-primary {
    color: var(--color-white);
    background: var(--color-primary);
}

.btn-primary:hover {
    background: var(--color-primary-deep);
    color: var(--color-white);
    box-shadow: 6px 6px 0 var(--color-line);
}

/* btn-ghost (semi-transparent over dark) */
.btn-ghost {
    color: var(--color-white);
    background: transparent;
    border-color: var(--color-white);
    box-shadow: 4px 4px 0 var(--color-white);
}

.btn-ghost:hover {
    color: var(--color-line);
    background: var(--color-white);
    box-shadow: 6px 6px 0 var(--color-white);
}

/* btn-line (white candy with black border) */
.btn-line {
    height: 46px;
    padding: 0 22px;
    font-size: 14px;
    color: var(--color-line);
    background: var(--color-white);
    border-color: var(--color-line);
}

.btn-line:hover {
    color: var(--color-white);
    background: var(--color-line);
}

/* btn-light (used over dark sections) */
.btn-light {
    color: var(--color-line);
    background: var(--color-white);
    border-color: var(--color-line);
}

.btn-light:hover {
    color: var(--color-white);
    background: var(--color-primary);
}

/* btn-candy (sticker style) */
.btn-candy {
    color: var(--color-line);
    background: var(--color-yellow);
    border-color: var(--color-line);
    box-shadow: var(--shadow-pop-pink);
}

.btn-candy:hover {
    background: var(--color-lime);
    box-shadow: 6px 6px 0 var(--color-primary);
}

/* -----------------------
   Badges (Y2K sticker)
----------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    font-family: var(--font-pixel);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--color-line);
    background: var(--color-yellow);
    border: 1.5px solid var(--color-line);
    border-radius: 999px;
    box-shadow: 2px 2px 0 var(--color-line);
    text-transform: uppercase;
}

.badge-best {
    color: var(--color-white);
    background: var(--color-line);
}

.badge-new {
    color: var(--color-white);
    background: var(--color-primary);
}

.badge-event {
    color: var(--color-line);
    background: var(--color-lime);
}

.badge-soldout {
    color: var(--color-line);
    background: var(--color-blue);
}

/* -----------------------
   Color Chips
----------------------- */
.color-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.color-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--chip-color, var(--color-gray-300));
    border: 1.5px solid var(--color-line);
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}

.color-chip:hover,
.color-chip.is-active {
    transform: scale(1.18);
    box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--chip-color, var(--color-line));
}

.color-chip-sm {
    width: 18px;
    height: 18px;
}

.color-chip.has-more {
    background: var(--color-white);
    color: var(--color-line);
    font-family: var(--font-pixel);
    font-size: 11px;
    font-weight: 700;
    border: 1.5px solid var(--color-line);
}

.color-chip.has-more:hover {
    box-shadow: 2px 2px 0 var(--color-line);
    transform: translate(-1px, -1px) scale(1.05);
    background: var(--color-primary-light);
}

/* -----------------------
   Product Card
----------------------- */
.product-list {
    display: grid;
    gap: 40px 24px;
}

.product-card {
    position: relative;
    transition: transform var(--dur-base) var(--ease-out);
}

.product-card:hover {
    transform: translate(-2px, -4px);
}

.product-link {
    display: block;
}

.product-image-box {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-cool-white);
    border: 1.5px solid var(--color-line);
    border-radius: 14px;
    transition: box-shadow var(--dur-base) var(--ease-out);
}

.product-card:hover .product-image-box {
    box-shadow: 6px 6px 0 var(--color-primary);
}

.product-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform var(--dur-slow) var(--ease-out);
}

.product-image-box img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}

.product-card:hover .product-img,
.product-card:hover .product-image-box img {
    transform: scale(1.05);
}

/* dummy product backgrounds */
.product-img-01, .product-img-02, .product-img-03, .product-img-04,
.product-img-05, .product-img-06, .product-img-07, .product-img-08,
.product-img-09, .product-img-10, .product-img-11 { 
    background: var(--color-cool-white); 
}

.product-rank {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-pixel);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-line);
    background: var(--color-yellow);
    border: 1.5px solid var(--color-line);
    border-radius: 50%;
    box-shadow: 2px 2px 0 var(--color-line);
}

.product-badge-group {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.product-wish {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--color-line);
    background: var(--color-white);
    border: 1.5px solid var(--color-line);
    border-radius: 50%;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}

.product-wish:hover,
.product-wish.is-active {
    background: var(--color-primary);
    color: var(--color-white);
    transform: translate(-1px, -1px);
    box-shadow: 2px 2px 0 var(--color-line);
}

.product-text-box {
    padding: 20px 4px 0;
}

.product-name {
    margin-bottom: 6px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-black);
}

.product-desc {
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--color-gray-600);
}

.product-color-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 14px;
}

.product-price-group {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.product-discount {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--color-primary);
}

.product-price {
    font-size: 17px;
    font-weight: 800;
    color: var(--color-black);
}

.product-price .won {
    margin-left: 1px;
    font-size: 13px;
    font-weight: 500;
}

.product-price-origin {
    font-size: 13px;
    color: var(--color-gray-500);
    text-decoration: line-through;
}

.product-rating-group {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-gray-700);
}

/* Rating Stars */
.rating-stars {
    position: relative;
    display: inline-block;
    width: 78px;
    height: 14px;
    background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3e%3cpath fill='%23dddddd' d='M7 1.6l1.7 3.5 3.8.5-2.8 2.7.7 3.8L7 10.3l-3.4 1.8.7-3.8L1.5 5.6l3.8-.5z'/%3e%3c/svg%3e") repeat-x 0 0;
    background-size: auto 14px;
}

.rating-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--rating, 0%);
    background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3e%3cpath fill='%23ffdf6b' d='M7 1.6l1.7 3.5 3.8.5-2.8 2.7.7 3.8L7 10.3l-3.4 1.8.7-3.8L1.5 5.6l3.8-.5z'/%3e%3c/svg%3e") repeat-x 0 0;
    background-size: auto 14px;
}

.rating-num {
    font-weight: 700;
    color: var(--color-black);
}

.rating-count {
    color: var(--color-gray-500);
}

/* -----------------------
   Tab (Y2K window tab)
----------------------- */
.tab-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    border-bottom: 1.5px solid var(--color-line);
}

.tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    margin-bottom: -1.5px;
    padding: 0 22px;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-gray-700);
    background: var(--color-cool-white);
    border: 1.5px solid var(--color-line);
    border-bottom: 1.5px solid var(--color-line);
    border-radius: 12px 12px 0 0;
    transition: color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}

.tab-btn + .tab-btn {
    margin-left: -1.5px;
}

.tab-btn.is-active {
    color: var(--color-line);
    background: var(--color-white);
    border-bottom-color: var(--color-white);
    z-index: 1;
}

.tab-btn:hover:not(.is-active) {
    color: var(--color-line);
    background: var(--color-primary-light);
}

/* -----------------------
   Icon System
----------------------- */
.ico {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
}

.ico-search {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3e%3ccircle cx='10' cy='10' r='6.5' fill='none' stroke='currentColor' stroke-width='1.8'/%3e%3cpath stroke='currentColor' stroke-width='1.8' stroke-linecap='round' d='M15 15l4 4'/%3e%3c/svg%3e");
}

.ico-user {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3e%3ccircle cx='11' cy='8' r='3.8' fill='none' stroke='currentColor' stroke-width='1.8'/%3e%3cpath fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' d='M4 19c1.5-3.6 4.4-5.5 7-5.5s5.5 1.9 7 5.5'/%3e%3c/svg%3e");
}

.ico-heart {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3e%3cpath fill='none' stroke='currentColor' stroke-width='1.8' stroke-linejoin='round' d='M11 18.5c-3-2-7.5-5.2-7.5-9.2 0-2.4 1.9-4.3 4.2-4.3 1.4 0 2.6.7 3.3 1.7.7-1 1.9-1.7 3.3-1.7 2.3 0 4.2 1.9 4.2 4.3 0 4-4.5 7.2-7.5 9.2z'/%3e%3c/svg%3e");
}

.ico-bag {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3e%3cpath fill='none' stroke='currentColor' stroke-width='1.8' stroke-linejoin='round' d='M5 7h12l-1 11H6L5 7z'/%3e%3cpath fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' d='M8 7V5.5C8 4 9.3 3 11 3s3 1 3 2.5V7'/%3e%3c/svg%3e");
}

.ico-menu {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3e%3cpath fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' d='M4 7h14M4 11h14M4 15h14'/%3e%3c/svg%3e");
}

.ico-top {
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3e%3cpath fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M9 14V4M4 9l5-5 5 5'/%3e%3c/svg%3e");
}

.ico-instagram {
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3e%3crect x='3' y='3' width='14' height='14' rx='4' fill='none' stroke='%23ffffff' stroke-width='1.5'/%3e%3ccircle cx='10' cy='10' r='3.2' fill='none' stroke='%23ffffff' stroke-width='1.5'/%3e%3ccircle cx='14.4' cy='5.6' r='.9' fill='%23ffffff'/%3e%3c/svg%3e");
}

.ico-youtube {
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3e%3crect x='2' y='5' width='16' height='10' rx='3' fill='none' stroke='%23ffffff' stroke-width='1.5'/%3e%3cpath fill='%23ffffff' d='M8.5 7.5v5L13 10z'/%3e%3c/svg%3e");
}

.ico-tiktok {
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3e%3cpath fill='%23ffffff' d='M11.5 2v8.5a2.3 2.3 0 11-2.3-2.3v-2A4.3 4.3 0 1013.5 10.5V6.6a4.7 4.7 0 002.5.7v-2a2.7 2.7 0 01-2.5-2V2h-2z'/%3e%3c/svg%3e");
}

.ico-kakao {
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3e%3cpath fill='%23ffffff' d='M9 2.5c-3.87 0-7 2.46-7 5.5 0 1.96 1.32 3.7 3.31 4.69L4.5 15.5l3.2-1.85c.43.06.86.1 1.3.1 3.87 0 7-2.46 7-5.5s-3.13-5.75-7-5.75z'/%3e%3c/svg%3e");
}

/* -----------------------
   Swiper Override
----------------------- */
.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, .4);
    opacity: 1;
    transition: width var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}

.swiper-pagination-bullet-active {
    width: 28px;
    background: var(--color-white);
    border-radius: 4px;
}

/* hero pagination */
.hero-pagination .swiper-pagination-bullet {
    width: 36px;
    height: 3px;
    border-radius: 0;
    background: rgba(17, 17, 17, .15);
}

.hero-pagination .swiper-pagination-bullet-active {
    background: var(--color-black);
}

/* swiper button base */
.swiper-button-prev,
.swiper-button-next {
    width: 48px;
    height: 48px;
    margin-top: 0;
    color: var(--color-black);
    background: var(--color-white);
    border-radius: 50%;
    box-shadow: var(--shadow-soft);
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}

.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 16px;
    font-weight: 700;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    background: var(--color-black);
    color: var(--color-white);
    transform: scale(1.05);
}

/* product swiper navigation (overlay) */
.product-swiper {
    position: relative;
    overflow: visible;
}

.product-swiper .swiper-button-prev,
.product-swiper .swiper-button-next {
    top: 35%;
    transform: translateY(-50%);
}

.product-swiper .swiper-button-prev { left: -24px; }
.product-swiper .swiper-button-next { right: -24px; }

/* -----------------------
   Image fill — for <img> children inside gradient placeholder containers
----------------------- */
.product-img,
.sns-card-bg,
.thumbnail-img,
.detail-gallery-img,
.mypage-order-card-img,
.review-img,
.editorial-img,
.promotion-visual,
.detail-desc-visual,
.brand-mood-bg,
.brand-campaign-bg,
.event-card-image-bg,
.best-review-image-bg,
.before-after-image-bg,
.brand-philosophy-image-box {
    position: relative;
    overflow: hidden;
}

.product-img > img,
.sns-card-bg > img,
.thumbnail-img > img,
.detail-gallery-img > img,
.mypage-order-card-img > img,
.review-img > img,
.editorial-img > img,
.promotion-visual > img,
.detail-desc-visual > img,
.brand-mood-bg > img,
.brand-campaign-bg > img,
.event-card-image-bg > img,
.best-review-image-bg > img,
.before-after-image-bg > img,
.brand-philosophy-image-box > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}