/* Home Hero */

.hero {
    position: relative;

    width: 100%;

    /*
     * 기존 420px보다 크게 설정
     * 서비스 안내 영역이 있던 자리까지 Hero 확장
     */
    height: clamp(620px, 72vh, 760px);

    display: flex;
    align-items: center;

    overflow: hidden;

    background-color: #eeeeee;
}


/* Hero Background Slider */

.hero-backgrounds {
    position: absolute;

    inset: 0;

    z-index: 0;
}


.hero-background {
    position: absolute;

    inset: 0;

    opacity: 0;

    transform: scale(1.04);

    transition:
            opacity 0.8s ease,
            transform 5s ease;
}


.hero-background.active {
    opacity: 1;

    transform: scale(1);
}


.hero-background img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* Hero Overlay

   왼쪽 글자는 잘 보이고,
   오른쪽으로 갈수록 사진이 보이게 함 */

.hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    /*
     * 사진은 선명하게 유지하면서
     * 글자가 있는 왼쪽만 살짝 어둡게
     */
    background:
            linear-gradient(
                    90deg,
                    rgba(0, 0, 0, 0.30) 0%,
                    rgba(0, 0, 0, 0.28) 42%,
                    rgba(0, 0, 0, 0.08) 72%,
                    rgba(0, 0, 0, 0.02) 100%
            );
}


/* Hero Content */

.hero-inner {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
    padding: 70px 24px;
}


.hero-content {
    width: 100%;
    max-width: 700px;
}


.hero-title {
    max-width: 700px;

    font-size: 48px;
    line-height: 1.25;

    margin-bottom: 20px;

    color: #ffffff;

    word-break: keep-all;

    text-shadow:
            0 2px 8px
            rgba(0, 0, 0, 0.45);
}


.hero-description {
    max-width: 600px;

    font-size: 18px;
    line-height: 1.7;

    color: rgba(255, 255, 255, 0.92);

    margin-bottom: 0;

    word-break: keep-all;

    text-shadow:
            0 1px 5px
            rgba(0, 0, 0, 0.4);
}


/* Hero Slider Arrow */

.hero-slider-button {
    position: absolute;

    top: 50%;

    z-index: 3;

    width: 44px;
    height: 44px;

    transform: translateY(-50%);

    border: none;
    border-radius: 50%;

    background-color:
            rgba(255, 255, 255, 0.82);

    color: #222222;

    font-size: 28px;
    line-height: 1;

    cursor: pointer;

    transition:
            background-color 0.2s ease;
}


.hero-slider-button:hover {
    background-color: #ffffff;
}


.hero-slider-prev {
    left: 24px;
}


.hero-slider-next {
    right: 24px;
}


/* Hero Slider Dots */

.hero-slider-dots {
    position: absolute;

    left: 50%;
    bottom: 28px;

    z-index: 3;

    transform: translateX(-50%);

    display: flex;

    gap: 8px;
}


.hero-dot {
    width: 9px;
    height: 9px;

    padding: 0;

    border: none;
    border-radius: 50%;

    background-color:
            rgba(255, 255, 255, 0.65);

    cursor: pointer;

    transition:
            width 0.2s ease,
            background-color 0.2s ease;
}


.hero-dot.active {
    width: 25px;

    border-radius: 10px;

    background-color: #ffffff;
}


/* =========================================
   Hairstyle Gallery
========================================= */

.style-gallery-section {
    padding: 60px 24px 100px;

    background-color: #ffffff;
}


.style-gallery-inner {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
}


/* =========================================
   Gallery Header
========================================= */

.style-gallery-header {
    margin-bottom: 48px;
    text-align: left;
}


.style-gallery-eyebrow {
    margin-bottom: 8px;

    color: #888888;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2px;
}


.style-gallery-header h2 {
    margin-bottom: 10px;

    color: #222222;

    font-size: 30px;
}


.style-gallery-header > p:last-child {
    color: #777777;

    font-size: 15px;
    line-height: 1.7;
}


/* =========================================
   Gallery Grid

   데스크톱에서는 최대 3열
========================================= */

.style-gallery-grid {
    display: grid;

    grid-template-columns:
            repeat(3, minmax(0, 1fr));

    column-gap: 26px;
    row-gap: 48px;

    align-items: start;
}


/* =========================================
   Card
========================================= */

.style-gallery-card {
    min-width: 0;

    display: block;

    color: inherit;
    text-decoration: none;

    cursor: pointer;
}

.style-gallery-card:focus-visible {
    outline: 2px solid #222222;
    outline-offset: 6px;

    border-radius: 14px;
}


/*
 * 세 개 중 가운데 사진만
 * 살짝 아래에서 시작
 *
 * 2, 5, 8, 11 ... 번째
 */
.style-gallery-card:nth-child(3n + 2) {
    margin-top: 48px;
}


/* =========================================
   Image
========================================= */

.style-gallery-image {
    width: 100%;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    border-radius: 14px;

    background-color: #eeeeee;
}


.style-gallery-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
            transform 0.45s ease;
}


/*
 * 마우스를 올리면
 * 사진만 살짝 확대
 */
@media (hover: hover) and (pointer: fine) {

    .style-gallery-card:hover .style-gallery-image img {
        transform: scale(1.06);
    }

}


/* =========================================
   Hairstyle Name
========================================= */

.style-gallery-name {
    margin-top: 14px;

    color: #222222;

    font-size: 16px;
    font-weight: 700;

    line-height: 1.5;
}


/* =========================================
   Scroll Reveal

   처음에는 안 보이게 한다.
========================================= */

.reveal-on-scroll {
    opacity: 0;

    transform:
            translateY(45px);

    transition:
            opacity 0.7s ease,
            transform 0.7s ease;
}


/*
 * JS에서 화면에 들어온 사진에
 * is-visible을 붙인다.
 */
.reveal-on-scroll.is-visible {
    opacity: 1;

    transform:
            translateY(0);
}


/*
 * 애니메이션을 줄이도록 설정한
 * 사용자를 위한 처리
 */
@media (prefers-reduced-motion: reduce) {

    .reveal-on-scroll {
        opacity: 1;

        transform: none;

        transition: none;
    }


    .style-gallery-image img {
        transition: none;
    }
}


/* Mobile */

@media (max-width: 768px) {

    .hero {
        height: 520px;
    }


    .hero-inner {
        padding: 55px 24px;
    }


    .hero-title {
        font-size: 36px;
    }


    .hero-description {
        font-size: 16px;
    }


    .hero-overlay {
        background:
                rgba(
                        0,
                        0,
                        0,
                        0.35
                );
    }


    .hero-slider-button {
        display: none;
    }


    .style-gallery-section {
        padding:
                40px
                20px
                70px;
    }


    .style-gallery-grid {
        grid-template-columns:
                repeat(
                        2,
                        minmax(0, 1fr)
                );

        gap: 24px 16px;
    }


    .style-gallery-card:nth-child(3n + 2) {
        margin-top: 0;
    }


    .style-gallery-header {
        margin-bottom: 32px;
    }
    .style-gallery-title-row {
        flex-wrap: wrap;
        gap: 10px;
    }


}

/* =========================================
   Hairstyle Refresh
========================================= */

.style-gallery-title-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
}


.style-refresh-button {
    padding: 8px 13px;

    border: 1px solid #d9c2b7;
    border-radius: 999px;

    background-color: #ffffff;
    color: #9b6a54;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition:
            background-color 0.2s ease,
            border-color 0.2s ease,
            transform 0.2s ease;
}


.style-refresh-button:hover {
    background-color: #f8f1ed;
    border-color: #c98f70;

    transform: translateY(-1px);
}


.style-refresh-button:disabled {
    opacity: 0.5;
    cursor: default;
}