@charset "UTF-8";

.md-hide {
    display: none
}

.hidden-h3 h3 {
    display: none
}

.md-show,
#wrap .xl-show {
    display: block
}

#wrap .xl-show.ib {
    display: inline-block
}

#wrap .xl-hide,
.my-search-close-btn,
.my-search-show-btn {
    display: none
}

@media (max-width: 1440px) {
    #wrap {
        min-width: auto
    }

    .header-wrap,
    #contents,
    .footerSection {
        padding: 0 30px
    }

    #wrap .xl-show {
        display: none
    }

    #wrap .xl-show.ib {
        display: inline-block
    }

    #wrap .xl-hide {
        display: block
    }

    #wrap .xl-hide.ib {
        display: inline-block
    }

    .mypage_grid {
        gap: 30px
    }

    .mypage_grid .mypage_grid_left {
        margin-right: 0
    }
}

@media (max-width: 1366px) {
    .date_check_box {
        flex-direction: column;
        gap: 20px
    }

    .header-wrap .in-header .logo-wrap img {
        max-width: 160px
    }

    .header-wrap .in-header .nav-wrap li .header-cate {
        font-size: 14px;
        padding: 7px
    }

    .header-wrap .in-header .nav-wrap>li {
        height: 64px;
        line-height: 64px
    }

    .header-wrap .in-header .nav-wrap>li:first-child {
        margin-right: 15px;
        padding: 0
    }

    .header-wrap .in-header .nav-wrap>li .list-wrap ul>li a {
        font-size: 14px
    }

    .sticky {
        top: 63px
    }
}

@media (max-width: 1200px) {
    .my-contents-wrap .my-search-wrap {
        position: static
    }

    .my-contents-wrap .my-search-wrap #frmSearchTop {
        display: none;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 1
    }

    .my-contents-wrap .my-search-wrap .my-search-close-btn {
        display: block;
        position: absolute;
        top: 10px;
        right: 10px;
        width: 20px;
        height: 20px;
        background: url(/btn_layer_close.png) 50% 50%/12px no-repeat;
        text-indent: -9999em;
        cursor: pointer
    }

    .my-contents-wrap .my-search-wrap .my-search-show-btn {
        display: block
    }

    .my-contents-wrap .my-search-wrap .my-search-show-btn i {
        display: inline-block;
        color: #848484;
        font-size: 18px;
        position: relative;
        transition: .2s ease;
        padding: 8px;
        border-radius: 5px;
        cursor: pointer
    }

    .my-contents-wrap .my-search-wrap .my-search-show-btn i:hover {
        color: #191f28;
        background-color: #eee
    }

    .my-contents-wrap .my-cart-wrap>a>i,
    .my-contents-wrap .my-noti-wrap>a>i {
        font-size: 18px
    }

    .pushCount {
        top: 0
    }

    .my-contents-wrap .my-contents-mr {
        margin: 0 5px
    }

    .mypage_grid {
        flex-direction: column-reverse;
        align-items: initial
    }
}

@media (max-width: 992px) {
    .md-hide {
        display: block
    }

    .md-show {
        display: none
    }
}

.skip-to-content {
    position: absolute;
    transform: translate(-1000%)
}

.skip-to-content:focus {
    transform: translate(0)
}

#header.fixed-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 10;
    padding: 0 48px;
    background-color: #fff;
    box-sizing: border-box
}

#header.fixed-header.is-scroll {
    position: fixed
}

@media (max-width: 1440px) {
    #header.fixed-header {
        padding: 0 20px
    }
}

#header.fixed-header * {
    box-sizing: border-box
}

.logo-wrap .logo {
    display: block;
    width: 210px
}

.logo-wrap .logo img {
    max-width: 100%;
    vertical-align: top
}

.top-nav {
    display: grid;
    height: 100%;
    grid-template-columns: repeat(12, 1fr)
}

.top-nav .logo-wrap,
.top-nav .nav-right {
    grid-column: span 3
}

.top-nav .logo-wrap {
    padding-top: 21px
}

.top-nav .nav-menu {
    grid-column: span 6;
    height: 100%
}

.top-nav .nav-menu__cate {
    width: 640px;
    margin: 0 auto;
    display: flex;
    height: 100%
}

.top-nav .nav-menu__cate-depth1 {
    display: flex;
    align-items: center;
    padding: 0 12px;
    height: 100%
}

.top-nav .nav-menu__cate-depth1>a {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #111;
    position: relative
}

.top-nav .nav-menu__cate-depth1>a:after {
    content: "";
    display: none;
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 2px;
    background-color: #111
}

.top-nav .nav-menu__cate-depth1:hover .nav-menu__dropdown {
    visibility: visible
}

.top-nav .nav-menu__cate-depth1:hover>a:after {
    display: block
}

.top-nav .nav-menu__cate-depth2 {
    display: flex;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    color: #111
}

.top-nav .nav-menu__cate-depth2>li>a {
    display: inline-block;
    padding: 4px 0;
    color: inherit;
    margin-bottom: 6px
}

.top-nav .nav-menu__cate-depth3 {
    width: 180px;
    font-size: 14px;
    font-weight: 500;
    color: #707072
}

.top-nav .nav-menu__cate-depth3.nav-menu__cate-brand {
    width: 100px
}

.top-nav .nav-menu__cate-depth3.nav-menu__cate-brand>li {
    color: #707072
}

.top-nav .nav-menu__cate-depth3.nav-menu__cate-partner {
    width: 540px;
    height: 232px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin-left: 30px
}

.top-nav .nav-menu__cate-depth3.nav-menu__cate-partner>li {
    width: 135px
}

.top-nav .nav-menu__cate-depth3>li>a {
    display: inline-block;
    padding: 4px 0;
    color: inherit
}

.top-nav .nav-menu__dropdown {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    height: 350px;
    padding: 0 48px;
    background-color: #fff;
    overflow: hidden;
    z-index: 3;
    visibility: hidden
}

.top-nav .nav-menu__dropdown>ul {
    padding: 24px 0 48px;
    font-size: 14px;
    font-weight: 500
}

.top-nav .nav-right {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px
}

.top-nav .nav-user {
    display: flex
}

.top-nav .nav-user__item {
    position: relative;
    width: 40px;
    height: 40px;
    padding: 5px;
    text-align: center
}

.top-nav .nav-user__item.user-search {
    cursor: pointer
}

.top-nav .nav-user__item.user-insta {
    display: flex;
    justify-content: center;
    align-items: center
}

.top-nav .nav-user__item.user-insta a {
    width: 75%;
    display: block
}

.top-nav .nav-user__item.user-insta img {
    max-width: 100%;
    /* 원본 svg가 검정이라, 장바구니 등 다른 아이콘(#848484)과 같은 회색으로 맞춤 —
       brightness(0)로 검정 실루엣을 만든 뒤 invert(52%)로 132/255 = #848484 밝기까지 올림 */
    filter: brightness(0) invert(52%)
}

.top-nav .nav-user__item .list-wrap {
    position: absolute;
    top: 40px;
    right: -75px;
    background-color: #fff;
    box-shadow: 0 1px 3px #dbdbdb;
    border-radius: 5px;
    min-width: 200px;
    overflow: hidden;
    text-align: left
}

.top-nav .nav-user__item.user-noti .list-wrap {
    display: none;
    z-index: 2
}

.top-nav .nav-user__item.user-noti .list-wrap ul {
    padding-top: 15px
}

.top-nav .nav-user__item.user-noti .list-wrap ul>li {
    border-bottom: 1px solid #eee;
    box-sizing: border-box
}

.top-nav .nav-user__item.user-noti .list-wrap ul>li:last-child {
    text-align: center;
    border-bottom: none;
    background-color: #f8f8f8
}

.top-nav .nav-user__item.user-noti .list-wrap ul>li>a {
    position: relative;
    display: inline-block;
    max-width: 230px;
    padding: 10px 25px;
    border-radius: 5px;
    font-family: Noto Sans KR, sans-serif;
    font-size: 14px;
    color: #8b95a1;
    letter-spacing: -1px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: top;
    transition: .2s ease
}

.top-nav .nav-user__item.user-noti .list-wrap ul>li span {
    display: block;
    font-family: Noto Sans KR, sans-serif;
    font-size: 12px;
    text-align: left
}

.top-nav .nav-user__item.user-mypage .nav-user__btn {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 20px;
    overflow: hidden
}

.top-nav .nav-user__item.user-mypage .list-wrap {
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
    z-index: 2
}

.top-nav .nav-user__item.user-mypage .list-wrap ul {
    padding: 10px 0;
    border-bottom: 1px solid #eee
}

.top-nav .nav-user__item.user-mypage .list-wrap ul:last-child {
    border-bottom: none
}

.top-nav .nav-user__item.user-mypage .list-wrap ul>li {
    line-height: normal;
    padding-left: 10px
}

.top-nav .nav-user__item.user-mypage .list-wrap ul>li>a {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    font-family: Noto Sans KR, sans-serif;
    font-size: 15px;
    color: #8b95a1;
    letter-spacing: -1px;
    transition: .2s ease
}

.top-nav .nav-user__item.user-mypage .list-wrap ul>li>a:hover {
    color: #191f28;
    background-color: #eee
}

.top-nav .nav-user__item.user-mypage .list-wrap ul>li>a>i {
    margin-right: 10px
}

.top-nav .nav-user__item.user-mypage:hover .list-wrap {
    opacity: 1;
    visibility: visible
}

.top-nav .nav-user__btn {
    font-size: 20px;
    color: #848484
}

.search-modal {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 1;
    display: none;
    padding: 20px;
    background-color: #fff
}

.search-modal.search-modal--open {
    display: block
}

.search-modal__container {
    max-width: 1440px;
    margin: 0 auto;
    min-width: 370px
}

.search-modal__form-wrap {
    position: relative;
    border-radius: 10px;
    background-color: #eee;
    padding: 4px 9px 6px 51px;
    height: 40px
}

.search-modal__form-wrap .search {
    position: absolute;
    left: 20px;
    top: 9px;
    width: 22px;
    height: 23px;
    background: url(//cdn-pro-web-153-231.cdn-nhncommerce.com/tennistr9007_godomall_com/data/skin/mobile/tennismetro/img/icon/icon_search.png) 0 0/100% no-repeat
}

.search-modal__form-wrap input[name=keyword] {
    width: 100%;
    border: 0;
    font-size: 16px;
    color: #191f28;
    background-color: transparent
}

.sd2024-count-down.cds-row-md {
    padding: 16px 0;
    margin: 80px auto 20px;
    border-radius: var(--radius-m)
}

.grb-item-box.slide-pc .grb-box-inner {
    padding-left: 0
}

.grb-item-box .grb-thum {
    border: 1px solid #eee;
    overflow: hidden;
    border-radius: 10px
}

.main-swiper-container {
    position: relative;
    width: 100%;
    height: 100%
}

@media (max-width: 1440px) {
    .main-swiper-container {
        width: auto;
        margin-left: -30px;
        margin-right: -30px
    }
}

.main-swiper-container .swiper-slide {
    position: relative;
    width: 1200px;
    -webkit-filter: grayscale(.7);
    -moz-filter: grayscale(.7);
    filter: grayscale(.7)
}

.main-swiper-container .swiper-slide img {
    border-radius: var(--radius-m);
    width: 100%;
    height: 100%
}

.main-swiper-container .swiper-slide-active {
    filter: grayscale(0)
}

.main-swiper-container .swiper-slide-prev .slide-overlay:after,
.main-swiper-container .swiper-slide-next .slide-overlay:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffffb3;
    display: block
}

.notice_slider {
    height: 64px
}

.notice_slider2 {
    height: 76px
}

.notice_slider-item {
    background-color: var(--tintBlue);
    border-radius: var(--radius-m)
}

.notice_slider-item2 {
    background-color: var(--tmgr700);
    border-radius: var(--radius-m)
}


.notice_slider-link {
    color: var(--blue200);
    display: block
}

.notice_slider-link2 {
    color: var(--mono50);
    display: block
}



.notice_slider-link>span {
    font-weight: 400
}

.cds-videos {
    position: relative
}

.cds-videos video {
    width: 100%;
    overflow: hidden;
    border-radius: 20px
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: end;
    justify-content: left;
    opacity: 1;
    transition: opacity 1s ease
}

.link-button {
    text-align: center;

}

.link-button a {
    text-decoration: none;
    color: #000;
    font-size: 18px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
}

.link-button .highlight {
    color: var(--tmgr700);
    /* 주황색 강조 */
    font-weight: 600;
}

.link-button .arrow-btn {
    display: inline-block;
    background-color: #000;
    color: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 20px;
    font-size: 23px;
    margin-left: 6px;
    transition: background 0.3s ease;
    line-height: 1;
}

.link-button a:hover .arrow-btn {
    background-color: var(--tmgr700);
    /* hover 시 색상 변화 */
}

#playButton {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -1px;
    padding: 12px 28px;
    background-color: #fff;
    color: #000;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    margin: 50px;
    transition: .3s ease;
    -webkit-transition: .3s ease;
    -moz-transition: .3s ease;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1)
}

#playButton:hover {
    background-color: #bebebe;
    -webkit-transform: scale(1.03);
    -moz-transform: scale(1.03);
    transform: scale(1.03)
}

#playButton:active {
    background-color: #bebebe;
    -webkit-transform: scale(.95);
    -moz-transform: scale(.95);
    transform: scale(.95)
}

.hiddenBtn {
    opacity: 0
}

.cds-row-md.pd-20.mb-100 {
    display: none
}

.flex {
    display: flex;
    justify-content: space-between
}

.cart_coupon_download {
    margin: 0 60px 0 20px
}

.cart_coupon_download>span:first-child {
    font-size: 16px;
    color: #8b95a1
}

.service-slider .swiper-wrapper {
    padding-bottom: 20px
}

.service-slider .swiper-slide a {
    display: block;
    width: 100%;
    aspect-ratio: 1.548;
    border-radius: 12px;
    color: #fff;
    padding: 64px 0 0 24px;
    box-sizing: border-box
}

.event-coupon-slider .swiper-slide a {
    display: block;
    width: 100%;
    aspect-ratio: 1.548;
    border-radius: 12px;
    color: #fff;
    padding: 0 0 0 0;
    box-sizing: border-box
}

.event-coupon img {
    width: 100%;
}



@media (max-width: 1200px) {
    .service-slider .swiper-slide a {
        padding-left: 2vw;
        padding-top: 5.3333333333vw
    }
}

.service-slider .swiper-slide a .service-slider__sm-title {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0
}

.service-slider .swiper-slide a .service-slider__sm-title.color-bk {
    color: #191f28
}

@media (max-width: 1200px) {
    .service-slider .swiper-slide a .service-slider__sm-title {
        font-size: 1vw
    }
}

.service-slider .swiper-slide a .service-slider__lg-title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.025em
}

.service-slider .swiper-slide a .service-slider__lg-title.color-bk {
    color: #191f28
}

@media (max-width: 1200px) {
    .service-slider .swiper-slide a .service-slider__lg-title {
        font-size: 1.6666666667vw
    }
}

.service-slider__new-badge {
    position: relative
}

.service-slider__new-badge:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 66px;
    height: 66px;
    background: url(https://tennismetro.s3.ap-northeast-2.amazonaws.com/commerce/board/upload/service_icon/new-badge.png) 0 0/100% no-repeat;
    z-index: 1
}

@media (max-width: 1200px) {
    .service-slider__new-badge:after {
        width: 5.5vw;
        height: 5.5vw
    }
}

.service-slider__rfinder {
    background: #ff9800 url(https://tennismetro.s3.ap-northeast-2.amazonaws.com/commerce/board/upload/service_icon/service_bg_rfinder.png) 93% 50%/138px no-repeat
}

@media (max-width: 1200px) {
    .service-slider__rfinder {
        background-size: 11.5vw
    }
}

.service-slider__strGuide {
    background: #5888ff url(https://tennismetro.s3.ap-northeast-2.amazonaws.com/commerce/board/upload/service_icon/service_bg_strGuide.png) 93% 100%/139px no-repeat
}

@media (max-width: 1200px) {
    .service-slider__strGuide {
        background-size: 11.5833333333vw
    }
}

.service-slider__onStr {
    background: #444 url(https://tennismetro.s3.ap-northeast-2.amazonaws.com/commerce/board/upload/service_icon/service_bg_onStr.png) 85% 100%/90px no-repeat
}

@media (max-width: 1200px) {
    .service-slider__onStr {
        background-size: 7.5vw
    }
}

.service-slider__offStr {
    background: #00cc41 url(https://tennismetro.s3.ap-northeast-2.amazonaws.com/commerce/board/upload/service_icon/service_bg_offStr.png) 95% 80%/128px no-repeat
}

@media (max-width: 1200px) {
    .service-slider__offStr {
        background-size: 10.6666666667vw
    }
}

.service-slider__lesson {
    background: #f3f3f3 url(https://tennismetro.s3.ap-northeast-2.amazonaws.com/commerce/board/upload/service_icon/service_bg_lesson.png) 90% 100%/158px no-repeat;
    color: #333
}

@media (max-width: 1200px) {
    .service-slider__lesson {
        background-size: 13.1666666667vw
    }
}

.service-slider__tryout {
    background: #f291b0 url(https://tennismetro.s3.ap-northeast-2.amazonaws.com/commerce/board/upload/service_icon/service_bg_tryout.png) 85% 50%/128px no-repeat
}

@media (max-width: 1200px) {
    .service-slider__tryout {
        background-size: 10.6666666667vw
    }
}




.event-coupon {
    background: #ffffff 93% 50%/138px no-repeat
}

@media (max-width: 1200px) {
    .service-slider__rfinder {
        background-size: 11.5vw
    }
}











.service-slider .swiper-scrollbar-drag {
    background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, .5)) !important
}

.brand-cate .brand-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);
    column-gap: 18px;
    row-gap: 50px;
    margin-bottom: 50px
}

@media (max-width: 1200px) {
    .brand-cate .brand-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, 1fr)
    }
}

.brand-cate .brand-box {
    aspect-ratio: 2.643;
    border-radius: 10px;
    text-align: center;
    background: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center
}

.brand-cate .brand-box img {
    width: 85px;
    transition: .2s
}

.brand-cate .brand-box img.sizing {
    width: 130px;
    transition: .2s
}

.brand-cate .brand-box.new-brand {
    overflow: hidden
}

.brand-cate .brand-box.new-brand img {
    width: auto
}

.brand-cate a {
    text-align: center
}

.brand-cate a:hover img {
    transform: scale(1.1)
}

.brand-cate .brand-name {
    margin-top: 10px;
    font-weight: 600;
    font-size: 16px;
    color: #444
}

.brand-cate .pagination-container {
    width: 130px;
    margin: 0 auto
}

.brand-cate .brand-button-prev,
.brand-cate .brand-button-next {
    width: 30px;
    font-size: 25px;
    font-weight: 300;
    color: #333;
    text-align: center;
    z-index: 99;
    cursor: pointer
}

.brand-cate .swiper-pagination.swiper-pagination-fraction.swiper-pagination-horizontal {
    font-size: 17px
}

.relative {
    position: relative
}

.service .new-badge {
    width: 65px;
    position: absolute;
    top: 0;
    right: 0
}

.rounded-md {
    border-radius: var(--radius-m)
}

.lesson-box {
    gap: 20px
}

.over-hidden {
    overflow: hidden
}

.journal.swiper .swiper-slide {
    width: 360px;
    height: 360px
}

.journal.swiper .journal-info {
    color: #fff
}




/* 기본 버튼 스타일 */
.badge-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    /* 동그란 캡슐 */
    border: 1px solid #ddd;
    background-color: #ffffff;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    transition: background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

/* 아이콘 동그라미 */
.badge-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    /* 안에 아이콘 이미지 넣을 거면
     background-image / background-size 로 교체하면 됨 */

    /*background: url("https://www.tennismetro.co.kr/data/editor/promotion/251104_smashing_2025/images/Timer.gif") center/70% no-repeat #ffffff; /* 예시 */
}

/* 호버 시 색 채워지는 효과 */
.badge-btn:hover {
    background-color: #29c52b;
    /* 지정 컬러 */
    border-color: #29c52b;
    color: #ffffff;
}

/* 버튼이 초록색이 되면 아이콘도 같이 반전 */
.badge-btn:hover .badge-icon {
    border-color: #ffffff;
    background-color: #ffffff;
}

.badge-icon img {
    width: 100%;
    height: auto;
}

  /* 2026 NEW 하이라이트 스타일 */
  .nav-new {
    color: #fff !important;
    background: #29c52b !important; /* 원하는 색으로 변경 */
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  /* hover */
  .nav-new:hover {
    filter: brightness(0.92);
  }

/* ================================================================
   메인 페이지 리뉴얼 — re-pc에서 이관한 규칙 (2026-10-22)
   라이브 CSS 기준에 "리뉴얼에서 새로 만든 규칙"만 규칙 단위로 추가함. 가격 관련 규칙은 라이브 것을 유지.
   ================================================================ */

.hidden-text h3 {
    display: none
}

.hidden-text h2 {
    display: none
}

#header.fixed-header {
  transition: background 0.3s ease,box-shadow 0.3s ease;
}

/* 헤더 검색창(.nav-user 안) — 왼쪽 돋보기 이미지를 빼고 검색 버튼(돋보기)을 검색창 안 오른쪽에 둠.
   원래 검색창 옆 별도 칸(.user-search)에 있던 버튼을 옮긴 것(outline/header/standard.html).
   드롭다운 검색창(#search-modal)은 기존 왼쪽 아이콘 그대로라 .nav-user 안으로만 한정 */
.top-nav .nav-user .search-modal__form-wrap {
    padding: 4px 44px 6px 20px;
}

.top-nav .nav-user .search-modal__form-wrap form {
    height: 100%;
    display: flex;
    align-items: center;
}

.search-modal__submit {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    padding: 4px;
    border: 0;
    background: none;
    font-size: 16px;
    line-height: 1;
    color: #848484;
    cursor: pointer;
}

.main-font-h2 {
    font-size: 32px;
    line-height: 32px;
    margin-bottom: 16px;
    font-weight: 800;
}

.flex_left {
    display: flex;
    align-content: center;
    align-items: center;
}

.service-slider-sub-title {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.4;

    padding-top: 10px;

}

.racket-slider .swiper-slide a {
    display: list-item;
    width: 100%;
    aspect-ratio: 0.8;
    border-radius: 12px;
    padding: 64px 0 50px 24px;
    box-sizing: border-box;
    align-content: end;

}

.list-slider .swiper-slide .service-slider__bg2 {
    display: list-item;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;

    box-sizing: border-box;
    align-content: end;

}

.racket-slider .swiper-slide a .racket-slider-title {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
}

.racket-slider .swiper-slide a .racket-slider-main {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.025em;
}

.racket-slider .swiper-slide a .racket-slider-sub {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.4;
    padding-top: 10px;
}

.color-bk {
    color: #191f28
}

.color-wh {
    color: #ffffff
}

.gr-bg {
    background-color: #04A04D;

}

.service-card {
    position: relative;
    overflow: hidden;
}

.service-card-img {
    position: absolute;

    top: 50%;
    /* 93% 50% 느낌 */
    transform: translateX(-5%) translateY(-50%);
    pointer-events: none;
}

.service-card-button {

    position: absolute;
    transform: translateX(10%) translateY(430%);
    width: 13%;
    height: auto;
}

.service-card-button img {


    width: 100%;
    height: auto;
}

.newarrival-card-img {
    position: absolute;

    top: 50%;
    /* 93% 50% 느낌 */
    transform: translateX(-0%) translateY(-50%);
    pointer-events: none;
}

.service-card-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* 슬롯 안에 ‘딱’ 맞게, 잘리지 않음 */
    display: block;
    border-radius: 12px;
    /* 필요하면 카드 라운드와 맞춤 */
}

.newarrival-card-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* 슬롯 안에 ‘딱’ 맞게, 잘리지 않음 */
    display: block;

    /* 필요하면 카드 라운드와 맞춤 */
}

.collection-card-img {
    width: 100%;
    height: 540px;
    /* 원하는 높이 */
    overflow: hidden;
    /* 영역 밖 숨기기 */
    position: relative;
    background-color: #f3f3f3;
}

.collection-card-img img {
    width: 100%;
    /* 좌우 꽉 차게 */
    height: auto;
    /* 비율 유지 */
    position: absolute;
    top: 50%;
    /* 세로 중앙 기준 */
    left: 50%;
    transform: translate(-50%, -50%);
    /* 정확히 중앙 정렬 */
}

/*checkbox general*/
.collection-display {
    display: block;
    position: relative;
    overflow: hidden;
    overflow-y: auto;
    max-height: 860px;
}

.collection-display::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
}

.collection-display .flex_left {
    display: none;
    overflow-y: auto;

}

.collection-slider .swiper-slide .service-slider__bg {
    display: list-item;
    width: 100%;
    aspect-ratio: 2;
    border-radius: 12px;
    padding: 64px 0 80px 24px;
    box-sizing: border-box;
    align-content: end;

}

.collection-slider .swiper-slide .newarrival-slider__bg {
    display: list-item;
    width: 100%;
    aspect-ratio: 2;
    border-radius: 12px;
    box-sizing: border-box;
    align-content: end;

}

.collection-slider .swiper-slide .service-slider__bg2 {
    display: list-item;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;

    box-sizing: border-box;
    align-content: end;

}

.edition-card-img {
    width: 100%;
    height: 540px;
    /* 원하는 높이 */
    overflow: hidden;
    /* 영역 밖 숨기기 */
    background-color: #f3f3f3;
}

.edition-card-img img {
    width: 100%;
    /* 좌우 꽉 차게 */
    height: auto;
    /* 비율 유지 */
    position: absolute;
    top: 50%;
    /* 세로 중앙 기준 */
    left: 50%;
    transform: translate(-50%, -50%);
    /* 정확히 중앙 정렬 */
}

.edition-display {
    display: block;
    position: relative;
    overflow: hidden;

}

.service-slider__bg {
    background: #f3f3f3
}

.service-slider__rfinder-green {
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.00) 29.34%, rgba(215, 226, 244, 0.20) 90.28%), #04A04D url(https://tm.ajlabs.co.kr/common/img/game.png) 83% 90% / 120px no-repeat;
}

.service-slider__offStr-green {
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.00) 29.34%, rgba(215, 226, 244, 0.20) 90.28%), #04A04D url(https://tm.ajlabs.co.kr/common/img/store.png) 83% 90% / 120px no-repeat;
}

.service-slider__lesson-green {
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.00) 29.34%, rgba(215, 226, 244, 0.20) 90.28%), #f3f3f3 url(https://tm.ajlabs.co.kr/common/img/lesson.png) 83% 90% / 120px no-repeat;

}

.circle-btn-wrap {
    margin-top: 28px;
}

.circle-btn {
    width: 48px;
    height: 48px;
    background: #31a673;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease;
}

.circle-btn span {
    color: #fff;
    font-size: 22px;
    line-height: 1;
}

/* 호버 효과 */
.circle-btn:hover {
    transform: scale(1.1);
    background: #28a267;
    /* 살짝 진한 초록으로 변화 */
}

/* 메인 슬라이드 배너(main/index.html, proc/_slider_banner.html heroFull=y) — 모바일 tm-main.css와 동일.
   Slick이 초기화되며 옆 슬라이드가 잠깐 화면 밖으로 삐져나와 가로 스크롤이 생기는 것을 막음 */
.main-slider-banner {
    overflow: hidden;
}

/* 메인 페이지 헤더(main/index.html 스크립트가 붙이는 .header-main) — 헤더 배경은 화면 전체 폭 그대로 두고,
   안쪽 내용(.top-nav)만 아래 본문 섹션(.cds-row-md)·메인 배너 히어로 프레임과 같은 라인(최대 86vw, 가운데)으로 맞춤.
   그래서 기본 좌우 padding(48px, 1440px 이하 20px)은 메인에서만 0으로 */
#header.fixed-header.header-main {
    padding-left: 0;
    padding-right: 0;
}

#header.fixed-header.header-main .top-nav {
    width: 100%;
    max-width: 86vw;
    margin: 0 auto;
}

#header.fixed-header.header-transparent:not(:hover):not(:focus-within):not(:has(.search-modal--open)) {
    background: linear-gradient(to bottom, rgb(0 0 0 / 83%) 0%, rgba(0, 0, 0, 0) 100%);
    box-shadow: none;
}

/* 로고 · 아이콘 흰색 (모바일과 같은 filter 기법 — 원본 이미지 색과 무관하게 흰 실루엣) */
#header.fixed-header.header-transparent:not(:hover):not(:focus-within):not(:has(.search-modal--open)) .logo-wrap .logo img,
#header.fixed-header.header-transparent:not(:hover):not(:focus-within):not(:has(.search-modal--open)) .nav-user__item.user-insta img {
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease;
}

/* 1뎁스 메뉴 + 호버 밑줄 흰색 */
#header.fixed-header.header-transparent:not(:hover):not(:focus-within):not(:has(.search-modal--open)) .nav-menu__cate-depth1 > a {
    color: #fff;
}

#header.fixed-header.header-transparent:not(:hover):not(:focus-within):not(:has(.search-modal--open)) .nav-menu__cate-depth1 > a:after {
    background-color: #fff;
}

/* 검색/알림/마이페이지 아이콘 + 장바구니(마크업에 color가 인라인으로 박혀 있어서 !important) */
#header.fixed-header.header-transparent:not(:hover):not(:focus-within):not(:has(.search-modal--open)) .nav-user__btn,
#header.fixed-header.header-transparent:not(:hover):not(:focus-within):not(:has(.search-modal--open)) .nav-user__item.user-cart > a {
    color: #fff !important;
}

/* 메인 헤더 검색창 — 모바일처럼 알약형(pill) 라운딩. 흰 헤더일 때는 기존 회색 배경 그대로 */
#header.fixed-header.header-main .search-modal__form-wrap {
    border-radius: 999px;
    border: 1px solid transparent;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* 투명 헤더일 때 검색창 — 흰 스트로크 + 살짝 비치는 흰 배경 + 흰 텍스트/아이콘 */
#header.fixed-header.header-transparent:not(:hover):not(:focus-within):not(:has(.search-modal--open)) .search-modal__form-wrap {
    border-color: rgba(255, 255, 255, 0.6);
    background-color: rgba(255, 255, 255, 0.12);
}

#header.fixed-header.header-transparent:not(:hover):not(:focus-within):not(:has(.search-modal--open)) .search-modal__form-wrap input[name=keyword] {
    color: #fff;
}

#header.fixed-header.header-transparent:not(:hover):not(:focus-within):not(:has(.search-modal--open)) .search-modal__form-wrap input[name=keyword]::placeholder {
    color: rgba(255, 255, 255, 0.75);
}

/* 돋보기는 배경 이미지(어두운 png)라 색 대신 filter로 흰색 처리 */
#header.fixed-header.header-transparent:not(:hover):not(:focus-within):not(:has(.search-modal--open)) .search-modal__form-wrap .search {
    filter: brightness(0) invert(1);
}

/* 투명 헤더일 때 검색창 안 검색 버튼(돋보기)도 흰색 */
#header.fixed-header.header-transparent:not(:hover):not(:focus-within):not(:has(.search-modal--open)) .search-modal__submit {
    color: #fff;
}

/* ========================
   라켓 라인업 — main/index.html의 .tm-brand-lineup
   전체 높이 최대 560px. 정사각 로고 2×2와 CTA가 차지할 폭을 먼저 정하고 나머지는 슬라이드에 배분.
======================== */
.tm-brand-lineup__grid {
    --lineup-height: 560px;
    --lineup-cta-height: 52px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(40%, calc(var(--lineup-height) - 24px - var(--lineup-cta-height)));
    gap: 24px;
}

.tm-brand-lineup__right {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.tm-brand-lineup__more.tm-theme-desc-more-btn {
    display: block;
    max-width: none;
    margin: 0;
}

.tm-brand-lineup__more .cta-btn-outline {
    box-sizing: border-box;
    height: var(--lineup-cta-height);
    padding: 0;
}

.tm-brand-lineup__logos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
    gap: 6px;
    min-width: 0;
    min-height: 0;
}

.tm-brand-lineup__card {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: 0px;
}

.tm-brand-lineup__card--wilson {
    position: relative;
}

.tm-brand-lineup__banner {
    position: absolute;
    inset: 0;
}

.tm-brand-lineup__banner .tm-banner-outer-wrap-2936993642,
.tm-brand-lineup__banner .slider-wrap,
.tm-brand-lineup__banner .slick-track,
.tm-brand-lineup__banner .slick-slide,
.tm-brand-lineup__banner .tm-banner-hero-slide,
.tm-brand-lineup__banner .tm-banner-hero-img {
    height: 100%;
}

.tm-brand-lineup__banner .slick-list {
    height: 100% !important; /* Slick의 adaptiveHeight 인라인 높이보다 오른쪽 전체 높이를 우선 */
}

.tm-brand-lineup__banner .tm-banner-hero-img {
    aspect-ratio: auto;
}

.tm-brand-lineup__empty {
    position: absolute;
    inset: 0;
}

.tm-brand-lineup__banner[hidden],
.tm-brand-lineup__empty[hidden] {
    display: none;
}

.tm-brand-lineup__logos button {
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 0;
    font: inherit;
    cursor: pointer;
}

.tm-brand-lineup__logos button:focus-visible {
    outline: 2px solid #8b95a1;
    outline-offset: 2px;
}

.tm-brand-lineup__card--placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #000;
    color: #fff;
}

.tm-brand-lineup__placeholder-logo {
    display: block;
    width: auto;
    height: 30px;
    max-width: 80%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.tm-brand-lineup__placeholder-label {
    display: block;
    color: #fff;
    font-size: 16px;
}

/* 모바일 브랜드 탭과 같은 활성/비활성 색상. 왼쪽 준비 중 화면에는 적용하지 않음. */
.tm-brand-lineup__logos .tm-brand-lineup__placeholder-logo {
    opacity: .35;
    transition: opacity .2s ease;
}

.tm-brand-lineup__logos .tm-brand-lineup__placeholder-label {
    color: rgba(255, 255, 255, .45);
    font-weight: 500;
    transition: color .2s ease;
}

.tm-brand-lineup__logos [aria-pressed="true"] .tm-brand-lineup__placeholder-logo {
    opacity: 1;
}

.tm-brand-lineup__logos [aria-pressed="true"] .tm-brand-lineup__placeholder-label {
    color: #fff;
    font-weight: 700;
}

/* 로고 버튼 배경(PC) — main/index.html 스크립트가 각 브랜드 배너의 첫 이미지를 .tm-brand-lineup__logo-bg로 넣음.
   영상+상품 오른쪽 패널(.vg-panel-bg)처럼 블러 + 반투명 검정. 배너 이미지가 2:1이라 정사각 버튼에 cover로 깔면 가운데만 보이므로
   왼쪽(글씨 자리)이 아니라 상품이 있는 오른쪽이 보이게 background-position을 오른쪽으로 옮김. 버튼 위 로고/글씨는 그대로 위에 보임 */
.tm-brand-lineup__logos button {
    position: relative;
    isolation: isolate;
}

.tm-brand-lineup__logo-bg {
    position: absolute;
    /* 블러 가장자리가 투명하게 번지지 않게 버튼보다 크게 깔고(바깥은 overflow:hidden으로 잘림) */
    inset: -20px;
    z-index: -1;
    background-position: 88% center;
    background-size: cover;
    filter: blur(16px);
}

.tm-brand-lineup__logo-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .72);
    transition: background .2s ease;
}

/* 선택된(왼쪽에 지금 보이는) 브랜드는 덜 어둡게 */
.tm-brand-lineup__logos [aria-pressed="true"] .tm-brand-lineup__logo-bg::after {
    background: rgba(0, 0, 0, .55);
}

.tm-brand-lineup__card--wilson .slider-wrap .tm-banner-hero-text {
    /* 텍스트 박스는 배너 왼쪽에서 25% 지점·세로 가운데에 두고, 글자는 박스 안에서 가운데 정렬 */
    left: 25%;
    right: auto;
    top: 50%;
    bottom: auto;
    width: fit-content;
    max-width: calc(100% - 96px);
    transform: translate(-50%, -50%);
    text-align: center;
}

/* 글씨 가독성용 어두운 그라데이션을 아래→위가 아니라 왼쪽→오른쪽으로(왼쪽이 진하고 오른쪽은 투명).
   검정 반투명만 얹으면 밝은 사진이 회색빛으로 탁해져서(채도가 빠짐) 두 겹으로 나눔:
   1) 이 레이어 — 순수 검정 대신 채도 있는 어두운 남색을 multiply로 곱해서 색을 살린 채 어둡게
   2) 아래 .tm-banner-hero-img::after — 검정을 overlay로 얹어 밝은 부분은 어둡게/어두운 부분은 그대로 두는 대비 보정 */
.tm-brand-lineup__card--wilson .slider-wrap .tm-banner-hero-layer {
    top: 0;
    height: auto;
    background: linear-gradient(to right, rgba(14, 24, 48, .7) 0%, rgba(14, 24, 48, 0) 100%);
    mix-blend-mode: multiply;
}

.tm-brand-lineup__card--wilson .slider-wrap .tm-banner-hero-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 75%);
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* 브랜드가 바뀔 때(hidden 해제) 새 배너/준비 중 카드가 확 나타나지 않고 서서히 나타나게 */
.tm-brand-lineup__banner:not([hidden]),
.tm-brand-lineup__empty:not([hidden]) {
    animation: tmBrandLineupFadeIn .6s ease;
}

@keyframes tmBrandLineupFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.tm-brand-lineup__card--wilson .slider-wrap .tm-banner-hero-text h2 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 34px;
}

.tm-brand-lineup__card--wilson .slider-wrap .tm-banner-hero-text p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-top: 10px;
    font-size: 18px;
}

/* ========================
   영상 + 상품 — main/index.html의 .video-goods-wrap (sno 141)
   2026-10-13 영상 전체 배경 위 제목+상품 → 2026-10-14 3분할로 재설계(이름도 banner-goods-wrap에서 변경):
   왼쪽: 분류 이미지(배경) 위 왼쪽 아래에 분류 설명(뱃지/제목/설명) | 가운데: 영상
   | 오른쪽: 패널(왼쪽 이미지를 확대+블러한 배경 위 반투명 검정) — 머리줄(왼쪽 브랜드명[분류 설명의 [ ] 안 글자] / 오른쪽 + 버튼, 아래 구분선)
     → 상품 리스트(가로 카드를 위아래로 쌓음, 넘치면 패널 안에서 휠 스크롤) → 구분선 → 자세히보기 버튼(맨 아래 고정).
   머리줄(.vg-list-head)과 이를 감싸는 패널(.vg-panel)은 main/index.html 스크립트가 만들어서 넣음(브랜드명 복사 + + 버튼 이동).
   세 칸이 간격 없이 붙은 같은 크기의 정사각이고, 섹션은 화면 전체 폭(2026-10-15, 86vw에서 변경 — 화면 끝에 닿아서 둥근 모서리 없음).
   영상/분류 이미지/제목/리스트/버튼이 전부 위젯(goods/_goods_display_main.html) 안 같은 래퍼(.goods_list)의 형제라
   그 래퍼를 3칸 격자로 나눔. 모든 규칙을 .video-goods-wrap 안으로 한정 — 다른 list_01 위젯에는 영향 없음.
   모바일 banner-goods-wrap(이미지/영상 배경 공용 틀)과 이름을 분리해서, 나중에 PC로 이미지 배경 섹션을 옮겨와도 섞이지 않음
======================== */
.video-goods-wrap {
    /* 오른쪽 패널 좌우 안쪽 여백(썸네일 크기는 리스트 칸 높이로 자동 — 카드 2장 기준) */
    --vg-pad: 32px;
}

.video-goods-wrap ._goods_display_main > .goods_list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    /* 오른쪽 칸 안: 머리줄(자기 높이) / 상품 리스트(남는 높이 전부, 넘치면 스크롤) / 자세히보기 버튼(자기 높이).
       이미지·영상은 세 행을 다 차지 */
    grid-template-rows: auto minmax(0, 1fr) auto;
    column-gap: 0;
    /* 섹션 높이 = 한 칸 폭(전체 폭의 1/3) — 가로:세로 3:1이라 세 칸 모두 정사각. 폭을 vw로 계산하지 않아서
       세로 스크롤바 폭 때문에 정사각이 살짝 어긋나는 일이 없음 */
    aspect-ratio: 3 / 1;
}

/* 템플릿이 영상과 분류 이미지가 둘 다 있을 때 따로 출력(.tm-theme-desc-img, 기본은 숨김). 바깥쪽(왼쪽 위/아래) 모서리만 둥글게 */
.video-goods-wrap .tm-theme-desc-img {
    grid-area: 1 / 1 / 4 / 2;
    position: relative;
    display: block;
    height: 100%;
    overflow: hidden;
    border-radius: 0;
    background: #000;
}

/* 칸 폭이 소수점(86vw의 1/3)이라 브라우저가 이미지/영상을 픽셀 단위로 반올림하면서 옆 칸과의 경계에 1px 흰 틈이
   생겼음 — 칸보다 위아래좌우 1px씩 크게 그려서 틈을 덮음(넘치는 1px은 칸의 overflow:hidden으로 잘림) */
.video-goods-wrap .tm-theme-desc-img img {
    position: absolute;
    top: -1px;
    left: -1px;
    display: block;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    object-fit: cover;
}

/* 흰 글씨 가독성용 아래쪽 어두운 그라데이션 — proc/_slider_banner.html .tm-banner-hero-layer와 같은 값 */
.video-goods-wrap .tm-theme-desc-img::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 78%, rgba(0,0,0,.38) 0%, rgba(0,0,0,.20) 30%, rgba(0,0,0,0) 58%),
        linear-gradient(to top, rgba(0,0,0,.56) 0%, rgba(0,0,0,.30) 26%, rgba(0,0,0,.12) 48%, rgba(0,0,0,0) 74%);
}

/* 분류 설명 — 이미지 위 왼쪽 아래, 흰 글씨, 제목 아래 설명을 세로로 쌓음 */
.video-goods-wrap ._goods_display_main > .goods_list > .contents {
    grid-area: 1 / 1 / 4 / 2;
    align-self: end;
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0 32px 36px;
}

.video-goods-wrap ._goods_display_main .tm-theme-desc-body {
    display: block;
}

.video-goods-wrap ._goods_display_main .contents h2 {
    margin: 0 0 10px;
    color: #fff;
    text-shadow: var(--hero-shadow-desc);
}

.video-goods-wrap ._goods_display_main .contents p {
    color: var(--hero-desc-color);
    text-shadow: var(--hero-shadow-desc);
}

/* 위젯이 영상을 제자리(.tm-theme-desc-bg)에 보여줌(_goods_display_main.html JS). 양옆과 붙어 있어서 모서리 없음 */
.video-goods-wrap ._goods_display_main > .goods_list > .tm-theme-desc-bg {
    grid-area: 1 / 2 / 4 / 3;
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: 0;
    background: #000;
}

/* 이미지와 같은 이유로 1px씩 크게 */
.video-goods-wrap .tm-theme-desc-bg video,
.video-goods-wrap .tm-theme-desc-bg img {
    position: absolute;
    top: -1px;
    left: -1px;
    display: block;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    object-fit: cover;
    pointer-events: none;
}

/* ---- 오른쪽: 패널 ----
   main/index.html 스크립트가 .vg-panel 하나를 만들어 오른쪽 칸 전체(세 행)에 두고, 그 안에 배경(.vg-panel-bg) → 머리줄 →
   상품 리스트 → 자세히보기 버튼을 위에서부터 차례로 넣음(2026-10-15). 전에는 넷이 격자의 따로 떨어진 칸이라, 리스트가 굴러갈 때마다
   블러 배경 위 세 칸이 각각 다시 그려지면서 일렁거렸음 — 한 덩어리로 묶고 배경은 따로 고정된 층으로 둠 */
.video-goods-wrap .vg-panel {
    grid-area: 1 / 3 / 4 / 4;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #000;
}

/* 패널 배경 — 가운데 영상의 한 장면(섹션 div의 data-vg-bg-sec초 지점 정지 화면)을 확대 + 블러, 위에 반투명 검정.
   캔버스(canvas.vg-panel-bg-img)에 영상 화면을 한 번 그려 넣음. 영상이 없으면 분류 이미지(div.vg-panel-bg-img 배경), 둘 다 없으면 단색 검정.
   자기만의 층(will-change)으로 떼어 둬서 리스트가 굴러가도 다시 그려지지 않게 함 */
.video-goods-wrap .vg-panel-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    will-change: transform;
}

.video-goods-wrap .vg-panel-bg-img {
    position: absolute;
    /* 블러 가장자리가 투명하게 번져 보이지 않게 칸보다 크게 깔고(바깥은 overflow:hidden으로 잘림) 살짝 확대 */
    inset: -60px;
    background-position: center;
    background-size: cover;
    filter: blur(28px);
    transform: scale(1.15);
    will-change: transform;
}

/* 영상 장면을 그린 캔버스 — 캔버스는 영상 원본 크기로 그려지므로, 칸 크기에 맞춰 꽉 채우고(잘림 허용) 위 블러/확대는 그대로 */
.video-goods-wrap canvas.vg-panel-bg-img {
    width: calc(100% + 120px);
    height: calc(100% + 120px);
    object-fit: cover;
}

.video-goods-wrap .vg-panel-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .62);
}

/* 머리줄 — main/index.html 스크립트가 만들어 넣는 요소. 왼쪽 브랜드명(설명 글씨 크기), 오른쪽 + 버튼, 아래 구분선 */
.video-goods-wrap .vg-list-head {
    flex: none;
    position: relative;
    z-index: 1;
    padding: 28px var(--vg-pad) 0;
}

.video-goods-wrap .vg-list-head-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.video-goods-wrap .vg-list-head-label {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.3px;
}

/* + 버튼 — 공용 규칙(분류 설명 블록 기준 오른쪽 아래 절대위치, 회색 테두리)을 머리줄 오른쪽 끝 + 검정 바탕용 흰 선으로 */
.video-goods-wrap .vg-list-head .contents_more_top {
    position: relative;
    bottom: auto;
    right: auto;
    flex: none;
    border-color: rgba(255, 255, 255, .5);
}

.video-goods-wrap .vg-list-head .contents_more_top::before,
.video-goods-wrap .vg-list-head .contents_more_top::after {
    background: #fff;
}

/* 상품 리스트 — 리스트 히어로(sno 139/140)와 같은 가로 카드(썸네일 왼쪽 + 브랜드/상품명/가격 오른쪽)를 위에서 아래로
   한 줄에 하나씩. 남는 높이에 카드가 딱 2장 보이게 카드 높이를 맞추고(썸네일도 그 높이의 정사각),
   나머지 상품은 main/index.html 스크립트가 3초마다 한 장씩 위로 굴려 올림(2026-10-14). 마우스를 올리면 멈추고 휠로 한 장씩 넘김.
   2026-10-15: 칸 자체를 스크롤하던 방식이 블러 배경 위에서 일렁거려서, 칸은 넘치는 부분만 가리고(overflow:hidden)
   목록(ul)을 transform으로 위로 밀어 올리는 방식으로 바꿈(카드 높이는 스크립트가 정수 px로 맞춤) */
.video-goods-wrap .vg-panel > .goods_list_cont {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    margin: 0;
    position: relative;
    z-index: 1;
    padding: 20px var(--vg-pad);
    overflow: hidden;
    box-sizing: border-box;
}

.video-goods-wrap .vg-panel > .goods_list_cont::-webkit-scrollbar {
    display: none;
}

/* 리스트 칸 높이(남는 높이) 안에 카드 2장 + 사이 간격 1개가 딱 들어가게 — ul 높이를 리스트 칸에 맞추고 카드 높이를 그 반으로.
   3장째부터는 ul 아래로 넘쳐서 리스트 칸(.goods_list_cont) 안에서 스크롤로 보임 */
.video-goods-wrap .item_gallery_type,
.video-goods-wrap .item_gallery_type > ul {
    height: 100%;
}

.video-goods-wrap .item_gallery_type > ul {
    --vg-card-gap: 20px;
    transition: transform .5s ease;
    will-change: transform;
    float: none;
    display: flex;
    flex-direction: column;
    gap: var(--vg-card-gap);
    width: 100%;
    margin: 0;
    padding: 0;
}

/* 맨 끝에서 맨 위로 되돌릴 때(같은 화면이라 눈에 안 보이는 순간이동)는 애니메이션 없이 */
.video-goods-wrap .item_gallery_type > ul.vg-no-anim {
    transition: none;
}

/* 템플릿이 열 개수로 나눈 폭(width:25% 등)을 인라인으로 넣어서 !important로 해제 */
.video-goods-wrap .item_gallery_type > ul > li {
    display: block;
    flex: none;
    width: 100% !important;
    height: calc((100% - var(--vg-card-gap)) / 2);
    margin: 0;
}

.video-goods-wrap .item_gallery_type .item_cont {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    height: 100%;
    padding: 0;
}

/* 썸네일 — 카드 높이에 맞춘 정사각(카드가 2장 들어가는 높이라 화면 폭에 따라 커지고 작아짐) */
.video-goods-wrap .item_gallery_type .item_photo_box {
    flex: none;
    height: 100%;
    width: auto;
    aspect-ratio: 1 / 1;
    background: #f2f2f2;
}

.video-goods-wrap .item_gallery_type .item_photo_box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-goods-wrap .item_gallery_type .item_info_cont {
    flex: 1;
    min-width: 0;
    padding-top: 0;
}

/* 상품 아이콘(New 등) — 공용 규칙은 li 기준 %라 썸네일 밖에 떠 보여서, 카드(.item_cont) 기준 썸네일 왼쪽 위 모서리로 */
.video-goods-wrap .item_gallery_type .item_icon_box {
    top: 10px;
    left: 10px;
    z-index: 3;
}

/* 검정 패널 위 상품 글씨 — 브랜드/상품명/가격은 흰색, 정가(취소선)는 반투명 흰색, 할인율은 빨강 그대로 */
.video-goods-wrap .item_gallery_type .item_tit_box .item_brand,
.video-goods-wrap .item_gallery_type .item_tit_box .item_name,
.video-goods-wrap .item_gallery_type .item_money_box .item_price {
    color: #fff;
}

.video-goods-wrap .item_gallery_type .item_money_box .item_fixed_price,
.video-goods-wrap .item_gallery_type .item_money_box .item_price.fixed_price {
    color: rgba(255, 255, 255, .5);
}

/* 상품 태그 — 검정 바탕용 반전 배색(custom.css의 .dark-bg-goods 태그와 같은 값) */
.video-goods-wrap .goods_list_cont .tm-goods-tag,
.video-goods-wrap .goods_list_cont .tm-goods-tag-bag,
.video-goods-wrap .goods_list_cont .tm-goods-tag-racket {
    background: rgba(255, 255, 255, .55) !important;
    color: #000 !important;
}

/* 자세히보기 버튼(분류 설명에 링크가 있을 때만) — 패널 맨 아래 고정, 위에 구분선. 흰 테두리/글씨(검정 바탕용) */
.video-goods-wrap .vg-panel > .tm-theme-desc-more-btn {
    flex: none;
    width: auto;
    max-width: none;
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0 var(--vg-pad) 28px;
}

.video-goods-wrap .vg-panel > .tm-theme-desc-more-btn::before {
    content: '';
    display: block;
    height: 1px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, .2);
}

.video-goods-wrap .tm-theme-desc-more-btn .cta-btn-outline {
    color: #fff;
    border-color: rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .08);
}

/* 썸네일만 보이는 상품 리스트 토글 클래스(2026-10-13) — 상품 위젯을 감싸는 div에 붙이면 그 안의 상품 카드에서
   썸네일 아래 글씨(브랜드/상품명/가격/상품 태그 — PC 리스트의 .item_info_cont)를 숨김.
   main/index.html "영상 + 상품"(sno 141, .video-goods-wrap)에서 쓰던 클래스 — 지금은 미사용. 다른 섹션에도 클래스만 붙이면 같은 동작 */
.tm-goods-thumb-only .item_info_cont {
    display: none;
}

/* 소개 — 왼쪽: 제목(h2) + 설명(p) / 오른쪽 끝: OFFLINE STORE 뱃지(로고 60px 정사각이 오른쪽, 글씨가 왼쪽).
   아래 여백 없이 뱃지 아랫변이 바로 밑 굵은 선(.tm-store-guide__layout의 border-top)에 딱 붙음. 마크업(뱃지가 h2/p보다 먼저)은 그대로 두고 격자로 자리만 정함 */
.tm-store-guide--pc .tm-store-guide__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    /* 뱃지(100px)가 두 행에 걸쳐 있어서 행이 남는 높이를 나눠 갖고 제목과 설명이 벌어졌음 — 위 행(제목)이 남는 높이를 다 가지고
       제목은 그 행의 아래(align-self:end)에, 설명 행은 자기 높이만큼만 → 둘 사이는 설명의 위쪽 여백(8px)만 남음 */
    grid-template-rows: 1fr auto;
    column-gap: 32px;
    align-items: end;
    margin-bottom: 0;
}

.tm-store-guide--pc .tm-store-guide__badge-row {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.tm-store-guide--pc .tm-store-guide__title {
    grid-column: 1;
    grid-row: 1;
    margin: 0 0 16px;
    align-self: end;
}

.tm-store-guide--pc .tm-store-guide__desc {
    grid-column: 1;
    grid-row: 2;
    /* 제목과 설명 사이 8px, 아래는 굵은 선까지 8px — OFFLINE STORE 글씨칸(아래 badge-text)도 같은 8px */
    margin: 4px 0 8px;
}

.tm-store-guide--pc .tm-store-guide__badge {
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: stretch;
}

/* 로고칸 — 테두리/배경 없이 80 × 100px 칸을 로고가 여백 없이 100%로 채움(검정 로고 원본 그대로) */
.tm-store-guide--pc .tm-store-guide__badge-icon-box {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 100px;
    padding: 0;
    border: none;
    background: none;
}

.tm-store-guide--pc .tm-store-guide__badge-icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 글씨칸 — 테두리 없음. 위에 메인 로고(TENNIS METRO), 그 아래 OFFLINE STORE 글씨를 세로로 쌓고 로고칸과 같은 높이(100px)의
   아래쪽에 맞춤(둘 다 아랫변이 굵은 선에 닿음) */
.tm-store-guide--pc .tm-store-guide__badge-text {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 10px;
    height: 100px;
    padding: 0 16px 8px 0;
    border: none;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    color: #000;
}

.tm-store-guide--pc .tm-store-guide__badge-logo {
    display: block;
    width: auto;
    height: 14px;
}

/* OFFLINE STORE 글자 — 글자마다 따로 감싸서(마크업의 <b>) 로고 폭에 맞춰 글자 사이 간격이 벌어져 꽉 차게.
   폭 0 + min-width 100%로 이 줄이 칸 폭(= 로고 폭)을 키우지 않고 로고 폭만큼만 차지, 단어 사이(<i>)는 글자 하나만큼 더 벌어짐 */
.tm-store-guide--pc .tm-store-guide__badge-letters {
    display: flex;
    justify-content: space-between;
    width: 0;
    min-width: 100%;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
}

.tm-store-guide--pc .tm-store-guide__badge-letters b {
    font-weight: 800;
}

.tm-store-guide--pc .tm-store-guide__badge-letters i {
    width: 0.5em;
}

.tm-store-guide--pc .tm-store-guide__title {
    font-size: 32px;
    font-weight: var(--hero-title-weight);
    line-height: 1.2;
    word-break: keep-all;
}

.tm-store-guide--pc .tm-store-guide__desc {
    font-size: 17px;
    font-weight: 400;
    color: var(--neutral600, #8b95a1);
}

/* 좌우 배치 — 왼쪽 탭 목록 3 : 오른쪽 매장 정보 7 (사진 4장이 한 줄로 들어가도록 목록 칸을 줄임) */
.tm-store-guide--pc .tm-store-guide__intro p,
.tm-store-guide--pc .tm-store-guide__desc {
    display: none;
}

.tm-store-guide--pc .tm-store-guide__layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
    column-gap: 48px;
    /* 오른쪽 매장 정보(.tm-store-guide__stage)는 왼쪽 탭 목록 높이에 맞춰짐 — stretch 후 stage 안 패널은 absolute */
    align-items: stretch;
    /* 맨 위 굵은 선 — 왼쪽 목록 위가 아니라 섹션 전체 폭(왼쪽+오른쪽)에 걸쳐 */
    border-top: 1px solid #e5e7eb;
}

.tm-store-guide--pc .tm-store-guide__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tm-store-guide--pc .tm-store-guide__tab {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: baseline;
    gap: 14px;
    /* 높이 88px 고정(아래 선 1px 포함) — 매장마다 탭 높이가 같게 */
    height: 88px;
    padding: 28px 8px 0 0;
    transition: color .2s ease;
    border-bottom: 1px solid #e5e7eb;
    color: #b0b8c1;
    text-decoration: none;
    transition: color .2s ease;
}

.tm-store-guide--pc .tm-store-guide__tab-label {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.tm-store-guide--pc .tm-store-guide__store-name {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
}

.tm-store-guide--pc .tm-store-guide__tab-arrow {
    align-self: center;
    font-size: 22px;
    opacity: 0;
    transition: opacity .2s ease;
}

.tm-store-guide--pc .tm-store-guide__row:hover .tm-store-guide__tab {
    color: #6b7684;
}

.tm-store-guide--pc .tm-store-guide__row.is-active .tm-store-guide__tab {
    color: #000;
}

.tm-store-guide--pc .tm-store-guide__row.is-active .tm-store-guide__tab-arrow {
    opacity: 1;
}

/* 패널은 stage(왼쪽 탭 목록 높이로 늘어난 칸) 안에 absolute로 꽉 채움 — 매장마다 내용 길이가 달라도 stage 높이는 목록이 정함.
   사진은 남는 높이를 채우고, 영업 안내 카드는 자기 높이만큼 */
.tm-store-guide--pc .tm-store-guide__stage {
    position: relative;
    min-height: 0;
}

.tm-store-guide--pc .tm-store-guide__panel {
    display: none;
}

.tm-store-guide--pc .tm-store-guide__panel.is-active {
    position: absolute;
    /* 위쪽 여백 24px — 굵은 선과 사진 사이를 띄움 */
    inset: 24px 0 0;
    display: flex;
    flex-direction: column;
    animation: tmStoreFade .3s ease;
}

@keyframes tmStoreFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 사진 4장 — 가로 한 줄로 나란히, 해시태그는 사진 위 왼쪽 아래 */
.tm-store-guide--pc .tm-store-guide__media {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.tm-store-guide--pc .tm-store-guide__img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    border-radius: 0;
}

.tm-store-guide--pc .tm-store-guide__tags {
    position: absolute;
    left: 16px;
    bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tm-store-guide--pc .tm-store-guide__tags span {
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .85);
    font-size: 13px;
    font-weight: 600;
    color: #191f28;
}

/* 이미지 위 태그 알약(#라켓시타 등)은 잠시 숨김(다시 쓰려면 이 규칙만 삭제) */
.tm-store-guide--pc .tm-store-guide__tags { display: none; }


/* 카드 — 왼쪽 정보(상점 종류, 영업 상태, 시간, 주소, 전화) | 오른쪽 신청 버튼(.tm-store-guide__cta, 위아래로 쌓아 카드 아래쪽에 맞춤) */
.tm-store-guide--pc .tm-store-guide__card {
    flex: none;
    display: grid;
    /* 1열: 상점 종류 | 2열: 영업 상태 뱃지(상점 종류 바로 옆) | 3열: 신청 버튼. 시간/주소/전화는 1~2열을 가로질러 */
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 14px;
    margin-top: 20px;
}

.tm-store-guide--pc .tm-store-guide__card > * {
    grid-column: 1 / 3;
}

.tm-store-guide--pc .tm-store-guide__card > .tm-store-guide__card-top {
    grid-column: 1;
    align-self: center;
    margin-bottom: 12px;
}

.tm-store-guide--pc .tm-store-guide__card > .tm-store-guide__badges {
    grid-column: 2;
    align-self: center;
    margin: 0 0 12px;
}

.tm-store-guide--pc .tm-store-guide__card > .tm-store-guide__cta {
    grid-column: 3;
    margin-left: 18px;
    grid-row: 1 / span 6;
    align-self: end;
}

.tm-store-guide--pc .tm-store-guide__store-sub {
    font-size: 20px;
    font-weight: 600;
    color: #191f28;
}

.tm-store-guide--pc .tm-store-guide__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 14px 0 20px; /* 카드 안에서는 위 .card > .badges 규칙의 여백이 이김(상점 종류 옆으로 붙임) */
}

.tm-store-guide--pc .tm-store-guide__pill {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.tm-store-guide--pc .tm-store-guide__pill--open { background: #00cc41; }

.tm-store-guide--pc .tm-store-guide__pill--event { background: #ffb400; }

.tm-store-guide--pc .tm-store-guide__pill--gift { background: #ff6200; }

/* 이벤트 진행중·사은품 알약은 지금 쓰지 않아 숨김(다시 쓰려면 이 규칙만 삭제) */
.tm-store-guide--pc .tm-store-guide__pill--event,
.tm-store-guide--pc .tm-store-guide__pill--gift { display: none; }

/* 영업 시간이 아니면(종료 시간이 지났거나 시작 전) 영업중 알약이 회색 — 위젯 스크립트(proc/_main_store_info_v2.html)가 is-closed를 붙임 */
.tm-store-guide--pc .tm-store-guide__pill--open.is-closed { background: #8b95a1; }

.tm-store-guide--pc .tm-store-guide__closing {
    margin-left: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #191f28;
}

.tm-store-guide--pc .tm-store-guide__hours,
.tm-store-guide--pc .tm-store-guide__addr {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.6;
    color: #4e5968;
}

/* 주소 + 영업시간을 한 줄로(주소 뒤에 구분선을 두고 영업시간이 이어짐, 길면 자연스럽게 줄바꿈) */
.tm-store-guide--pc .tm-store-guide__addr .tm-store-guide__hours::before {
    content: "|";
    margin: 0 10px;
    color: #d1d6db;
}

/* 매장 특징 태그(시타 가능 / 테니스 레슨 등) — 예전 영업시간 자리. 사진 위 해시태그와 달리 카드 안에 보이는 연한 테두리 알약 */
.tm-store-guide--pc .tm-store-guide__features {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.tm-store-guide--pc .tm-store-guide__features li {
    padding: 4px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #4e5968;
}

/* 전화번호 — 영업 종료 시간(.tm-store-guide__closing)과 같은 크기로 그 바로 옆에, 앞에 전화 아이콘 */
.tm-store-guide--pc .tm-store-guide__tel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #191f28;
}

/* 전화 아이콘 — 구글 Material Symbols(사이트 전역에서 이미 불러옴, FontAwesome 5.6의 phone-alt는 안 나와서 교체) */
.tm-store-guide--pc .tm-store-guide__tel .material-symbols-outlined {
    font-size: 17px;
    color: #8b95a1;
}

.tm-store-guide--pc .tm-store-guide__cta {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    /* 아래 8px — 사진 칸 바닥(= 왼쪽 탭 목록 끝)과 버튼 사이를 띄움 */
    margin: 0 0 8px;
}

.tm-store-guide--pc .tm-store-guide__btn {
    white-space: nowrap;
}

.tm-store-guide--pc .tm-store-guide__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    /* 테두리는 공용 .cta-btn-outline(custom.css)과 같게 — 두께 1.5px, 연한 회색, 각진 모서리 */
    border: 1.5px solid #e2e3e3;
    border-radius: 0;
    font-size: 15px;
    font-weight: 600;
    color: #191f28;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.tm-store-guide--pc .tm-store-guide__btn:hover {
    background: #191f28;
    border-color: #191f28;
    color: #fff;
}

/* ========================
   메인 아웃트로 (main/index.html 맨 아래, 푸터 앞, 2026-10-16)
   모바일 css/tm-main.css의 .tm-outro(2×2)를 PC에서는 4개가 가로로 나란히 — 위아래 옅은 선, 칸 사이 세로 구분선.
   굵은 제목 + 작은 설명(모바일과 같은 구성), 크기만 PC로 키움
======================== */
.tm-outro {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

.tm-outro__item + .tm-outro__item {
    border-left: 1px solid #e5e7eb;
}

.tm-outro__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 16px 44px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: background .2s ease;
}

.tm-outro__link:hover {
    background: #f9fafb;
}

.tm-outro__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 60px;
    margin-bottom: 20px;
}

.tm-outro__icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tm-outro__title {
    font-size: 20px;
    font-weight: var(--hero-title-weight);
    line-height: 1.25;
    color: #000;
}

.tm-outro__desc {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--neutral600, #8b95a1);
    word-break: keep-all;
}

/* ========================
   찜 리스트 플로팅 버튼 (PC, 2026-10-21) — 모바일 css/tm-main.css의 .tm-wish-fab과 같은 모양(흰 원 + 하트 + "좋아요").
   채널톡 상담하기 버튼(.ch-shadow-root-wrapper, 고도몰 플러그인이 넣어서 우리 파일에는 없음)의 바로 위에 오도록
   오른쪽 끝을 맞추고 아래에서 띄움. 채널톡 버튼 크기/위치가 달라 보이면 아래 두 값만 고치면 됨.
   --tm-wish-fab-right: 화면 오른쪽 끝에서 간격(채널톡 버튼의 오른쪽 간격과 맞춤)
   --tm-wish-fab-bottom: 화면 아래에서 간격(채널톡 버튼 높이 + 간격만큼 위로)
======================== */
:root {
  --tm-wish-fab-right: 37px;
  --tm-wish-fab-bottom: 104px;
}

@keyframes tm-wish-fab-in {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}

.tm-wish-fab {
  position: fixed;
  right: var(--tm-wish-fab-right);
  bottom: var(--tm-wish-fab-bottom);
  width: 56px;
  height: 56px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  z-index: 100;
  animation: tm-wish-fab-in 400ms cubic-bezier(0.36, 0, 0, 1) 1s both;
}

.tm-wish-fab svg {
  fill: var(--tmpoint, #00cc41);
}

.tm-wish-fab span {
  font-size: 10px;
  color: var(--color-black, #111111);
  font-weight: 600;
  line-height: 1;
}

@media (max-width: 1440px) {
  .main-slider-banner {
          margin-left: -30px;
          margin-right: -30px;
      }

  .video-goods-wrap {
          margin-left: -30px;
          margin-right: -30px;
      }
}

/* ================================================================
   병합 후 보정 (2026-10-23) — tm_test_view 확인에서 나온 항목
   ================================================================ */

/* 폰트: 헤더(전 페이지 공통)와 메인 본문만 Spoqa Han Sans Neo. 다른 페이지 본문은 기존 Noto Sans KR 그대로.
   cds.css 의 * { font-family: var(--tm-font-base, ...) } 가 아래 변수를 상속받아 적용됨.
   (아이콘 폰트는 클래스 규칙이라 영향 없음). 사이트 전체로 넓힐 땐 :root 에 같은 값을 넣으면 됨 */
:root {
  --tm-font-spoqa: 'Spoqa Han Sans Neo', 'Noto Sans KR', sans-serif;
}

#header,
.body-main #contents {
  --tm-font-base: var(--tm-font-spoqa);
}

/* list_02(.item_list_type): 기존 찜하기/장바구니 버튼은 숨김 — 리뉴얼은 사진 위 찜 하트(.wish-heart-btn)를 사용 */
.item_list_type .item_btn_box {
  display: none;
}

/* list_02: 가격 줄 수평 정렬 — [할인율·판매가] [정가(취소선)] 를 한 줄에 기준선 맞춤 */
.item_list_type .item_money_box {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
}

.item_list_type .item_money_box .item_price,
.item_list_type .item_money_box .item_sale,
.item_list_type .item_money_box .fixed_price {
  display: inline-flex;
  align-items: baseline;
  padding: 0;
  margin: 0;
}

.item_list_type .item_money_box .fixed_price {
  order: 2;
}

.item_list_type .item_money_box br {
  display: none;
}
/* list_02: 가격 줄의 할인율(.item_number_box)에 list.css의 .item_list_type .item_number_box { padding: 10px 0 0 0 }가 같이 걸려서
   기준선이 아래로 밀렸음 → 가격 줄 안에서만 padding 제거. (모델번호/상품코드 줄의 div.item_number_box는 이 위쪽 여백이 필요해서 그대로 둠) */
.item_list_type .item_money_box .item_number_box {
  padding: 0;
}

/* 갤러리형(list_01)·슬라이드형(list_04)·탭형(list_07) 가격 줄 — list_02와 같이 한 줄로 (CSS만 사용, 템플릿 조건은 그대로).
   [할인율·할인적용가] [쿠폰가] 가 앞에, 정가(취소선, .fixed_price)가 맨 뒤(order:2). 폭이 모자라면 아래 줄로 자연스럽게 넘어감.
   쿠폰가(.item_sale)·상품할인가(.item_price)·마일리지는 노출 조건(어드민 노출항목) 그대로라 있을 때만 나타남 */
.item_gallery_type .item_money_box,
.item_slide_horizontal .item_money_box,
.tm-list07-tab .item_money_box {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 4px;
}

.item_gallery_type .item_money_box .item_price,
.item_gallery_type .item_money_box .item_sale,
.item_gallery_type .item_money_box .fixed_price,
.item_slide_horizontal .item_money_box .item_price,
.item_slide_horizontal .item_money_box .item_sale,
.item_slide_horizontal .item_money_box .fixed_price,
.tm-list07-tab .item_money_box .item_price,
.tm-list07-tab .item_money_box .item_sale,
.tm-list07-tab .item_money_box .fixed_price {
  display: inline-flex;
  align-items: baseline;
  padding: 0;
  margin: 0;
}

.item_gallery_type .item_money_box .fixed_price,
.item_slide_horizontal .item_money_box .fixed_price,
.tm-list07-tab .item_money_box .fixed_price {
  order: 2;
}

/* 가격 순서: 할인율 · 할인적용가(·쿠폰가) → 판매가(취소선) → 마일리지.
   판매가(goodsPrice)는 템플릿에서 할인 블록보다 먼저 나와서 [취소선 판매가] [할인율 할인가]로 보였음 → CSS order로 뒤로 보냄(템플릿 조건은 그대로).
   할인 블록(.item_price[style*="flex"])과 쿠폰가(.item_sale)는 order 0이라 앞에, 스타일 속성이 없는 판매가 .item_price는 2로 */
.item_gallery_type .item_money_box > .item_price:not([style*="flex"]),
.item_slide_horizontal .item_money_box > .item_price:not([style*="flex"]),
.tm-list07-tab .item_money_box > .item_price:not([style*="flex"]),
.item_list_type .item_money_box > .item_price:not([style*="flex"]) {
  order: 2;
}

.item_gallery_type .item_money_box > .mileage,
.item_gallery_type .item_money_box > .item_mileage,
.item_slide_horizontal .item_money_box > .mileage,
.item_slide_horizontal .item_money_box > .item_mileage,
.tm-list07-tab .item_money_box > .mileage,
.tm-list07-tab .item_money_box > .item_mileage,
.item_list_type .item_money_box > .mileage,
.item_list_type .item_money_box > .item_mileage {
  order: 3;
}

.item_gallery_type .item_money_box .item_number_box,
.item_slide_horizontal .item_money_box .item_number_box,
.tm-list07-tab .item_money_box .item_number_box {
  padding: 0;
}

.item_gallery_type .item_money_box br,
.item_slide_horizontal .item_money_box br,
.tm-list07-tab .item_money_box br {
  display: none;
}

/* 영상 패널(.vg-panel, 어두운 배경): 라이브 가격 규칙(.item_money_box .item_price span … color:#191f28)이 글씨를 검게 만들어서 흰색으로 */
.video-goods-wrap .vg-panel .item_money_box .item_price span:not(.item_number_box):not(.fixed_price) {
  color: #fff;
}