/* BASIC css start */
/* ================================================================
   S'WELL 모바일 메인 (리뉴얼)
   - 기존 구조(#mainSpot / .cell / .mainTit / .subBox) 위에서 수정
   - 좁은 화면 1열 → 768px 이상에서 PC 와 같은 2열 모자이크
   ================================================================ */

:root{
    --mBanGap:12px;   /* 배너 사이 간격 */
    --mSidePad:20px;  /* 좌우 여백 */
}


/* ----------------------------------------------------------------
   상단 여백 제거
   스킨 공통 CSS 의 #container / #contents / .main 기본 여백 때문에
   헤더와 첫 배너 사이가 벌어집니다. 메인에서만 제거합니다.
---------------------------------------------------------------- */
#container,
#contents,
#contents > .main,
main.main{
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#mainSpot{
    margin-top: 0;
    padding-top: 0;
}

#mainSpot .cell:first-child{
    margin-top: 0;
}


/* ----------------------------------------------------------------
   메인 비쥬얼 배너
---------------------------------------------------------------- */
#mainSpot .cell{
    position: relative;
    margin-bottom: var(--mBanGap);
}

#mainSpot .cell > a{
    display: block;
    position: relative;
    overflow: hidden;
    /* 카드 폭을 기준으로 타이틀 크기를 계산하기 위한 설정 */
    container-type: inline-size;
}

#mainSpot .cell img{
    display: block;
    width: 100%;
    height: auto;
}

/* 우측 상단 : 라벨 + More Info
   모바일은 마우스 오버가 없으므로 스크롤 진입(.aniIn) 시 나타납니다 */
#mainSpot .cell .grid_txt{
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 3;
    color: #fff;
    text-align: right;
    font-family: 'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Noto Sans KR', sans-serif;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1);
}

#mainSpot .cell.aniIn .grid_txt{
    opacity: 1;
    transform: none;
    transition-delay: .35s;
}

/* 밝은 사진 위에서도 흰 글씨가 읽히도록 하는 옅은 그림자
   (필요 없으면 이 블록만 지우면 됩니다) */
#mainSpot .cell > a:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 34%;
    background: linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,0));
    z-index: 1;
    pointer-events: none;
}

#mainSpot .cell .grid_txt p{
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.4;
}

#mainSpot .cell .grid_txt span{
    display: inline-block;
    border-bottom: 1px solid #fff;
    font-size: .725rem;
    line-height: 24px;
}

#mainSpot .cell .grid_txt span i{
    display: inline-block;
    font-style: normal;
    margin-left: 3px;
}

/* 하단 컬러 띠 + 타이틀
   띠 색상은 HTML 각 .grid_ttl 의 style="--banColor:#______" */
/* 하단 타이틀 : 컬러 띠는 이미지에 이미 있으므로 배경 없이 글자만 올립니다.
   스크롤 진입 시 띠 위로 올라옵니다.

   위치 · 크기는 원본 이미지(740px 폭) 실측값 기준입니다.
     글자 캡높이 55px / 왼쪽 22px / 바닥에서 20px */
#mainSpot .cell .grid_ttl{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 0 2.97cqw 1.9cqw;    /* 좌 22px / 하 14px (740px 기준) */
    box-sizing: border-box;
    background: none;             /* 띠는 이미지에 포함 */
    transform: translateY(100%);
    transition: transform .6s cubic-bezier(.22,.61,.36,1);
}

#mainSpot .cell.aniIn .grid_ttl{
    transform: translateY(0);
    transition-delay: .3s;
}

#mainSpot .cell .grid_ttl strong{
    display: block;
    max-width: 100%;
    font-family: "Antonio", 'Noto Sans KR', sans-serif;
    font-size: 9.6vw;             /* cqw 미지원 브라우저용 기본값 */
    font-size: 9.8cqw;            /* 카드 폭의 9.8% */
    font-weight: 700;
    line-height: 1;
    color: #fff;

    /* Antonio 가 아직 로드되지 않아 대체 폰트(폭이 넓음)로 그려질 때도
       가로로 넘치지 않도록 눌러 줍니다. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    transform-origin: left bottom;
}

/* 그래도 넘치면 m_main.js 가 글자 크기를 자동으로 줄입니다 */

/* ----------------------------------------------------------------
   메인타이틀
---------------------------------------------------------------- */
.mainTit{
    margin: 60px var(--mSidePad);
}

.mainTit h3{
    color: #222;
    font-family: "Antonio", 'Noto Sans KR', sans-serif;
    font-size: 1.4rem;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1.2;
}

.mainTit .brandDesc{
    margin: 16px 0 0;
}

.mainTit .brandDesc p,
.mainTit p{
    margin: 0 0 10px;
    color: #525252;
    font-size: .875rem;
    font-weight: 300;
    line-height: 1.7;
    font-family: 'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Noto Sans KR', sans-serif;

    /* 한글이 단어 중간에서 끊기지 않도록 어절 단위로 줄바꿈 */
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-hyphens: none;
    hyphens: none;
}

.mainTit .brandDesc p:last-child{
    margin-bottom: 0;
}


/* ----------------------------------------------------------------
   서브배너
---------------------------------------------------------------- */
.subBox{
    padding: 0 var(--mSidePad);
    text-align: center;
}

.subBox > div{
    position: relative;
    margin: 0 0 var(--mBanGap);
}

.subBox > div:last-child{
    margin-bottom: 0;
}

.subBox > div a{
    display: block;
    position: relative;
    overflow: hidden;
}

.subBox > div a img{
    display: block;
    width: 100%;
    height: auto;
}

.subBox > div p{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48%;
    height: 21%;
    box-sizing: border-box;
    border: 1px solid #fff;
    color: #fff;
    font-size: 4vw;
    font-family: 'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Noto Sans KR', sans-serif;
}

.subBox > div p em{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    line-height: 1.3;
    font-style: normal;
}


/* ================================================================
   스크롤 등장 효과
   HTML 의 data-ani="효과명" 으로 지정
   wipeUp / wipeRight / slideLeft / slideRight / popUp / zoomIn / flipUp
   ================================================================ */
[data-ani]{
    opacity: 0;
    transition: opacity .8s cubic-bezier(.22,.61,.36,1),
                transform .8s cubic-bezier(.22,.61,.36,1),
                clip-path .9s cubic-bezier(.22,.61,.36,1);
}

[data-ani].aniIn{
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);
}

[data-ani=""]        { transform: translateY(30px); }
[data-ani="wipeUp"]   { clip-path: inset(100% 0 0 0); }
[data-ani="wipeRight"]{ clip-path: inset(0 100% 0 0); }
[data-ani="slideLeft"]{ transform: translateX(60px); }
[data-ani="slideRight"]{ transform: translateX(-60px); }
[data-ani="popUp"]    { transform: translateY(60px) scale(.95); transition-timing-function: cubic-bezier(.34, 1.42, .64, 1); }
[data-ani="zoomIn"]   { transform: scale(1.1); }
[data-ani="flipUp"]   { transform: perspective(700px) rotateX(20deg) translateY(40px); transform-origin: 50% 100%; }

@media (prefers-reduced-motion: reduce){
    [data-ani],
    #mainSpot .cell .grid_txt,
    #mainSpot .cell .grid_ttl{
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        transition: none !important;
    }
}


/* ================================================================
   태블릿 이상 : PC 와 같은 2열 모자이크
   ================================================================ */
@media (min-width: 768px){

    #mainSpot{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--mBanGap);
    }

    #mainSpot .cell{ margin: 0; }

    /* 대형 카드 3장이 2행을 차지 (PC 와 동일한 배치) */
    #mainSpot .cell:nth-child(1){ grid-column: 1; grid-row: 1 / span 2; }  /* PROMOTION & EVENT */
    #mainSpot .cell:nth-child(2){ grid-column: 2; grid-row: 1; }           /* FIND YOUR S'well */
    #mainSpot .cell:nth-child(3){ grid-column: 2; grid-row: 2; }           /* STYLISH BARWARE */
    #mainSpot .cell:nth-child(4){ grid-column: 1; grid-row: 3; }           /* ICONIC KITCHENWARE */
    #mainSpot .cell:nth-child(5){ grid-column: 1; grid-row: 4; }           /* CUSTOM YOUR S'well */
    #mainSpot .cell:nth-child(6){ grid-column: 2; grid-row: 3 / span 2; }  /* B2B & COLLABORATION */
    #mainSpot .cell:nth-child(7){ grid-column: 1; grid-row: 5 / span 2; }  /* EXPLORE S'well */
    #mainSpot .cell:nth-child(8){ grid-column: 2; grid-row: 5; }           /* CUTATED COLLECTION */
    #mainSpot .cell:nth-child(9){ grid-column: 2; grid-row: 6; }           /* CLUB S'well */

    /* 2행을 차지하는 대형 카드만 높이를 채웁니다.
       소형 카드까지 object-fit:cover 를 주면 이미지 아래 띠 · 글자가 잘립니다. */
    #mainSpot .cell:nth-child(1) > a,
    #mainSpot .cell:nth-child(6) > a,
    #mainSpot .cell:nth-child(7) > a{ height: 100%; }

    #mainSpot .cell:nth-child(1) img,
    #mainSpot .cell:nth-child(6) img,
    #mainSpot .cell:nth-child(7) img{ height: 100%; object-fit: cover; object-position: bottom; }

    .mainTit{ margin: 80px var(--mSidePad); }

    .subBox{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--mBanGap);
    }

    .subBox > div{ margin: 0; }
    .subBox > div p{ font-size: 1.6vw; }
}
/* BASIC css end */