/* 서브 공통 */

*{
    word-break: keep-all;
}


/* 헤더 대응 공통 시작*/

.sub__page {
    padding-top: 84px !important;
}

@media (max-width: 570px) {
    .sub__page {
        padding-top: 56px !important;
        --paz-header-h: 56px;
    }
}



/* 서브 컨텐츠 타이틀 시작 */

.sub__section__title__wr .row__wr {
    display: flex;
    justify-content: space-between;
    align-items: end;
    width: 100%;
    height: 100%;
}

.sub__section__title__wr .subtitle {
    color: #0EAC9E;
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 36px;
}

.sub__section__title__wr .title {
    color: #191919;
    font-family: "Montserrat", sans-serif;
    font-size: 56px;
    font-weight: 700;
    line-height: 1.3;
    word-break: keep-all;
}

.sub__section__title__wr .description {
    color: #505050;
    font-family: "Pretendard", sans-serif;
    font-size: clamp(12px, 1.071vw, 18px);
    font-weight: 400;
    line-height: 150%;
}

/* 서브 중제목 — 카드·본문 카테고리|제목 */
.sub__title-md,
.bo_v_atc_content {
    color: #191919;
    font-family: "Pretendard", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    word-break: keep-all;
}

@media screen and (min-width: 1024px) {
    .sub__section__title__wr .subtitle {
        font-size: clamp(12px, 1.071vw, 18px);
        margin-bottom: clamp(24px, 2.143vw, 36px);
    }

    .sub__section__title__wr .title {
        font-size: clamp(56px, 4.762vw, 80px);
    }

    .sub__title-md,
    .bo_v_atc_content {
        font-size: clamp(20px, 1.429vw, 24px);
        line-height: clamp(28px, 1.905vw, 32px);
    }
}

@media screen and (max-width: 768px) {
    .sub__section__title__wr .subtitle {
        font-size: 12px;
        line-height: 1.1;
    }

    .sub__section__title__wr .title {
        font-size: 24px;
        line-height: 1.3;
    }
}

@media screen and (max-width: 570px) {
    .sub__section__title__wr .subtitle {
        margin-bottom: 16px;
    }

    .sub__section__title__wr .title {
        font-family: "Pretendard", sans-serif;
        font-weight: 700;
    }
}

/* 서브 컨텐츠 타이틀 끝*/

.img_wr{
    position: relative;
}

.img_wr img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* 서브 공통 끝 */


/* ------------------------------------------------------------ */



/* sub_about.php 시작 — Figma about (1179:201) */

/* ── PC 히어로 배너 ── */
.about__hero{
    padding: 70px 0;
}

.about__hero__banner{
    overflow: hidden;
}

.about__hero__banner img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ── sec01 (consult__sec01 동일 패턴) ── */
.about__sec01{
    padding: 0 0 160px;
    overflow: visible;
}

.about__sec01 .inner__cen1680{
    overflow: visible;
}

.about__sec01 .sub__section__title__wr .row__wr{
    gap: 40px;
}

.about__sec01 .sub__section__title__wr .description{
    line-height: 160%;
}

.about__sec01 .sub__section__title__wr .title strong{
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
}

.about__sec01 .sub__section__title__wr .row__wr .img_wr{
    display: none;
}

.about__sec01 .sec01__content__wr{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    width: 100%;
    min-height: 525px;
    margin-top: 160px;
    overflow: visible;
}

.about__sec01 .sec01__content__left,
.about__sec01 .sec01__content__right{
    position: relative;
    z-index: 1;
}

.about__sec01 .sec01__content__left{
    flex: 1 0 0;
    min-width: 0;
    order: 2;
}

.about__sec01 .sec01__content__right{
    width: 830px;
    flex-shrink: 0;
    order: 3;
}

.about__sec01 .sec01__content__left .text__wr{
    display: flex;
    flex-direction: column;
    gap: 23px;
}

.about__sec01 .sec01__content__left .text__wr .content__title{
    color: #191919;
    font-family: "Pretendard", sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 130%;
}

.about__sec01 .sec01__content__left .text__wr .content__description{
    color: #505050;
    font-family: "Pretendard", sans-serif;
    font-size: clamp(12px, 1.071vw, 18px);
    font-weight: 400;
    line-height: 160%;
}

.about__sec01 .sec01__content__right .img_wr{
    aspect-ratio: 830 / 525;
    overflow: hidden;
}

.about__sec01 .sec01__content__marquee{
    --marquee-gap: 80px;
    position: absolute;
    top: 50%;
    left: calc(50% - 50vw);
    width: 100vw;
    transform: translateY(-50%);
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.about__sec01 .sec01__content__marquee .marquee__track{
    display: flex;
    width: max-content;
    animation: sec01-marquee linear infinite;
    will-change: transform;
}

.about__sec01 .sec01__content__marquee .marquee__item{
    flex: 0 0 auto;
    padding-right: var(--marquee-gap);
    color: rgba(225, 230, 238, 0.30);
    font-family: "Montserrat", sans-serif;
    font-size: clamp(82.3px, 14.101vw, 236.898px);
    font-weight: 700;
    line-height: 90%;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce){
    .about__sec01 .sec01__content__marquee .marquee__track{
        animation: none;
    }
}

@keyframes sec01-marquee{
    to{ transform: translate3d(-50%, 0, 0); }
}

/* ── sec02 레이어 스택 (GSAP pin) ── */
.about__sec02{
    padding: 0;
}

.about__sec02 .sec02__stack{
    position: relative;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
}

.about__sec02 .sec02__layers{
    position: absolute;
    inset: 0;
    padding-top: 160px;
}

.about__sec02 .sec02__layers.layer01{
    z-index: 1;
    background: #f5f5f5 url('/images/about_bg01.jpg') center / cover no-repeat;
}

.about__sec02 .sec02__layers.layer02{
    z-index: 2;
    background: #e8e8e8 url('/images/about_bg02.jpg') center / cover no-repeat;
}

.about__sec02 .sec02__layers.layer03{
    z-index: 3;
    background: #dcdcdc url('/images/about_bg03.jpg') center / cover no-repeat;
}

.about__sec02 .sec02__layers .inner__cen1680{
    position: relative;
    z-index: 2;
}

.about__sec02 .sec02__layers .content__subtitle{
    color: #191919;
    font-family: "Pretendard", sans-serif;
    font-size: clamp(14px, 1.429vw, 24px);
    font-weight: 600;
    line-height: 150%;
}

.about__sec02 .sec02__layers .content__title{
    color: #191919;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(24px, 4.762vw, 80px);
    font-weight: 700;
    line-height: 110%;
    margin: 40px 0 24px;
}

.about__sec02 .sec02__layers .content__description{
    color: #505050;
    font-family: "Pretendard", sans-serif;
    font-size: clamp(12px, 1.071vw, 18px);
    font-weight: 400;
    line-height: 160%;
    max-width: 560px;
}

.about__sec02 .sec02__layers .text__wr{
    position: relative;
    width: 100%;
    max-width: 560px;
}

.about__sec02 .sec02__layers .img__wr{
    position: absolute;
    right: 0;
    bottom: 40px;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: multiply;
}

.about__sec02 .sec02__layers.layer03 .img__wr{
    bottom: -50px;
}

.about__sec02 .sec02__layers .img__wr img{
    display: block;
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
}

/* PC 기준 1080px 뷰포트 높이 대비 비율 — 큰 화면은 px 상한, 작아지면 dvh로 축소 */
.about__sec02 .sec02__layers.layer01 .img__wr img{
    height: min(609px, 56.39dvh);
}

.about__sec02 .sec02__layers.layer02 .img__wr img{
    height: min(703px, 65.09dvh);
}

.about__sec02 .sec02__layers.layer03 .img__wr img{
    height: min(825px, 76.39dvh);
}




/* ── sec03 (Figma 1181:10440) ── */
.about__sec03{
    padding: 160px 0;
}

.about__sec03 .sec03__content__wr{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    margin-bottom: 100px;
}

.about__sec03 .sec03__content__left{
    flex: 1 0 0;
    min-width: 0;
    max-width: 719px;
}

.about__sec03 .sec03__content__left .text__wr .content__title{
    color: #191919;
    font-family: "Pretendard", sans-serif;
    font-size: clamp(24px, 3.571vw, 60px);
    font-weight: 700;
    line-height: 130%;
    margin-bottom: 40px;
}

.about__sec03 .sec03__content__left .text__wr .content__description{
    color: #505050;
    font-family: "Pretendard", sans-serif;
    font-size: clamp(12px, 1.071vw, 18px);
    font-weight: 400;
    line-height: 160%;
}

.about__sec03 .sec03__content__right{
    width: 830px;
    flex-shrink: 0;
}

.about__sec03 .sec03__map{
    position: relative;
    width: 100%;
    aspect-ratio: 830 / 528;
    overflow: hidden;
    background: #f5f5f5;
}

.about__sec03 .sec03__map iframe{
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.about__sec03 .sec03__info__wr{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    width: 100%;
    padding: 60px 0;
    border-top: 1px solid #eee;
}

.about__sec03 .sec03__info__col{
    flex: 1 0 0;
    min-width: 0;
}

.about__sec03 .sec03__info__label{
    margin-bottom: 16px;
    color: #999;
    font-family: "Pretendard", sans-serif;
    font-size: clamp(12px, 1.071vw, 18px);
    font-weight: 500;
    line-height: 160%;
}

.about__sec03 .sec03__info__value{
    color: #191919;
    font-family: "Pretendard", sans-serif;
    font-size: clamp(14px, 1.429vw, 24px);
    font-weight: 600;
    line-height: 150%;
}

.about__sec03 .sec03__info__value p + p{
    margin-top: 4px;
}

.about__sec03 .sec03__info__divider{
    width: 1px;
    height: 105px;
    background: #eee;
    flex-shrink: 0;
}

/* about 반응형 — product list 동일 브레이크포인트 + Figma 375 */

@media screen and (max-width: 1440px){
    .about__sec01 .sec01__content__right{
        width: min(830px, 48vw);
    }

    .about__sec03 .sec03__content__right{
        width: min(830px, 48vw);
    }
}

@media screen and (max-width: 1024px){
    .about__hero{
        padding: 50px 0;
    }

    .about__sec01{
        padding-bottom: 120px;
    }

    .about__sec01 .sub__section__title__wr .row__wr{
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .about__sec01 .sec01__content__wr{
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        margin-top: 80px;
        padding-top: 74px;
    }

    .about__sec01 .sec01__content__left,
    .about__sec01 .sec01__content__right{
        order: unset;
    }

    .about__sec01 .sec01__content__right{
        width: 100%;
    }

    .about__sec01 .sec01__content__marquee{
        top: 0;
        height: 74px;
        transform: none;
        display: flex;
        align-items: center;
    }

    .about__sec02 .sec02__layers{
        padding-top: 80px;
    }

    .about__sec02 .sec02__layers .content__title{
        margin: 24px 0 16px;
    }

    .about__sec02 .sec02__layers .content__description{
        max-width: 360px;
    }


    .about__sec02 .sec02__layers.layer01 .img__wr,
    .about__sec02 .sec02__layers.layer02 .img__wr,
    .about__sec02 .sec02__layers.layer03 .img__wr{
        height: auto;
    }

    .about__sec03{
        padding: 120px 0;
    }

    .about__sec03 .sec03__content__wr{
        flex-direction: column;
        margin-bottom: 60px;
    }

    .about__sec03 .sec03__content__left{
        max-width: none;
    }

    .about__sec03 .sec03__content__left .text__wr .content__title{
        margin-bottom: 24px;
    }

    .about__sec03 .sec03__content__right{
        width: 100%;
    }

    .about__sec03 .sec03__info__wr{
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        padding: 40px 0;
    }

    .about__sec03 .sec03__info__divider{
        display: none;
    }

    .about__sec03 .sec03__info__label{
        margin-bottom: 8px;
    }
}

@media screen and (max-width: 768px){
    .about__sec01 .sec01__content__left .text__wr .content__title{
        font-size: 20px;
    }
}

@media screen and (max-width: 570px){

    .about__sec02 .sec02__layers.layer03 .img__wr{
        bottom: 40px;
    }

    .about__hero{
        display: none;
    }

    .about__sec01{
        padding-bottom: 0;
    }

    .about__sec01 .sub__section__title__wr{
        padding-top: 59px;
        padding-bottom: 101px;
    }

    .about__sec01 .sub__section__title__wr .subtitle{
        text-align: center;
        text-transform: uppercase;
    }

    .about__sec01 .sub__section__title__wr .row__wr{
        flex-direction: column;
        align-items: center;
        gap: 26px;
    }

    .about__sec01 .sub__section__title__wr .title{
        text-align: center;
    }

    .about__sec01 .sub__section__title__wr .row__wr .img_wr{
        display: block;
        width: 100%;
        height: 286px;
        overflow: hidden;
    }

    .about__sec01 .sub__section__title__wr .description{
        text-align: center;
    }

    .about__sec01 .sec01__content__wr{
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        margin-top: 0;
        padding-top: 0;
        gap: 0;
        padding-bottom: 130px;
    }

    .about__sec01 .sec01__content__marquee{
        position: relative;
        left: calc(50% - 50vw);
        width: 100vw;
        height: 74px;
        margin-bottom: 56px;
        transform: none;
        top: auto;
        order: 1;
        --marquee-gap: 40px;
    }

    .about__sec01 .sec01__content__right{
        width: 100%;
        order: 2;
    }

    .about__sec01 .sec01__content__right .img_wr{
        width: 100%;
        height: 376px;
        aspect-ratio: auto;
    }

    .about__sec01 .sec01__content__left{
        width: 100%;
        margin-top: 32px;
        order: 3;
    }

    .about__sec01 .sec01__content__left .text__wr{
        gap: 16px;
    }

    /* sec02 — Figma 1179:898~ */
    .about__sec02 .sec02__layers{
        padding-top: 89px;
    }

    .about__sec02 .sec02__layers .text__wr{
        max-width: none;
    }

    .about__sec02 .sec02__layers .content__subtitle{
        font-weight: 700;
        margin-bottom: 8px;
    }

    .about__sec02 .sec02__layers .content__title{
        font-family: "Montserrat", sans-serif;
        margin: 0 0 24px;
    }

    .about__sec02 .sec02__layers .content__description{
        max-width: none;
    }

    .about__sec02 .sec02__layers.layer01 .img__wr img{
        height: 255px;
    }

    .about__sec02 .sec02__layers.layer02 .img__wr img{
        height: 300px;
    }

    .about__sec02 .sec02__layers.layer03 .img__wr img{
        height: 360px;
    }

    .about__sec02 .sec02__layers .img__wr img{
        object-fit: contain;
        object-position: center bottom;
    }

    /* sec03 — Figma 1181:10440 */
    .about__sec03{
        padding: 60px 0;
    }

    .about__sec03 .sec03__content__wr{
        flex-direction: column;
        gap: 0;
        margin-bottom: 32px;
    }

    .about__sec03 .sec03__content__left{
        max-width: none;
        padding: 0;
        margin-bottom: 32px;
    }

    .about__sec03 .sec03__content__left .text__wr{
        text-align: left;
    }

    .about__sec03 .sec03__content__left .text__wr .content__title{
        margin-bottom: 16px;
        text-align: left;
    }

    .about__sec03 .sec03__content__left .text__wr .content__description{
        text-align: left;
    }

    .about__sec03 .sec03__content__right{
        width: 100%;
    }

    .about__sec03 .sec03__map{
        width: 100%;
        height: 213px;
    }

    .about__sec03 .sec03__info__wr{
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding: 0;
        margin-top: 32px;
        border-top: 0;
    }

    .about__sec03 .sec03__info__col{
        width: 100%;
    }

    .about__sec03 .sec03__info__label{
        margin-bottom: 8px;
    }

    .about__sec03 .sec03__info__value p + p{
        margin-top: 4px;
    }
}

/* sec03 끝 */




/* sub_about.php 끝 */



/* ------------------------------------------------------------ */


/* sub_consult.php 시작 */

/* 컨설팅 공통 버튼 */

.consult__btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 318px;
    height: 72px;
    border-radius: 77px;
    color: #fff;
    font-family: "Pretendard", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    text-align: center;
    transition: opacity .2s ease;
}

.consult__btn:hover{ opacity: .85; }

.consult__btn--fill{ background: #0EAC9E; color: #fff; }

/* consult_hero 시작 */

.consult__hero{
    padding: 0;
}

.consult__hero__inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 60px;
    min-height: calc(100dvh - 84px);
    text-align: center;
}

.consult__hero .subtitle{
    color: #0EAC9E;
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 110%;
    text-transform: uppercase;
}

.consult__hero .title{
    color: #191919;
    font-family: "Pretendard", sans-serif;
    font-size: 80px;
    font-weight: 700;
    line-height: 130%;
    text-align: center;
}

/* consult_hero 끝 */

/* sec01 — Figma 1168:3413 (375) / PC 1680 유동 스케일 */

.consult__sec01{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(47px, 3.571vw, 60px);
    padding: clamp(0px, 4.762vw, 80px) 0 clamp(48px, 3.571vw, 80px);
}

.consult__sec01 .sec01__content__marquee{
    --marquee-gap: clamp(40px, 4.762vw, 80px);
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    height: clamp(74px, 12.679vw, 213px);
    overflow: hidden;
    pointer-events: none;
    flex-shrink: 0;
}

.consult__sec01 .sec01__content__marquee .marquee__track{
    display: flex;
    width: max-content;
    animation: sec01-marquee linear infinite;
    will-change: transform;
}

.consult__sec01 .sec01__content__marquee .marquee__item{
    flex: 0 0 auto;
    padding-left: clamp(60px, 11.905vw, 200px);
    padding-right: var(--marquee-gap);
    color: rgba(225, 230, 238, 0.30);
    font-family: "Montserrat", sans-serif;
    font-size: clamp(82.3px, 14.101vw, 236.898px);
    font-weight: 700;
    line-height: 90%;
    text-transform: uppercase;
    white-space: nowrap;
}

.consult__sec01 .sec01__content__wr{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: clamp(20px, 1.905vw, 32px);
    width: 100%;
    margin-top: 0;
}

.consult__sec01 .sec01__content__left{
    flex: 1 1 400px;
    min-width: 0;
    height: auto;
}

.consult__sec01 .sec01__content__left .text__wr{
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 3.571vw, 60px);
}

.consult__sec01 .sec01__content__left .text__wr .content__title{
    color: #191919;
    font-family: "Pretendard", sans-serif;
    font-size: clamp(20px, 3.571vw, 60px);
    font-weight: 700;
    line-height: 130%;
}

.consult__sec01 .sec01__content__left .text__wr .content__description{
    color: #505050;
    font-family: "Pretendard", sans-serif;
    font-size: clamp(12px, 1.071vw, 18px);
    font-weight: 400;
    line-height: 160%;
}

.consult__sec01 .sec01__content__right{
    flex: 1 1 520px;
    width: min(830px, 100%);
    max-width: 100%;
    height: auto;
    aspect-ratio: 830 / 525;
    overflow: hidden;
}

.consult__sec01 .sec01__content__right .img_wr,
.consult__sec01 .sec01__content__right .img_wr img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* sec01 끝 */

/* sec02 시작 — 3단계 원형 인트로 (GSAP pin) */

.consult__sec02{
    padding: 0;
}

.sec02__circles{
    position: relative;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    background: #fff;
    --step-gap: clamp(16px, 5.357vw, 90px);
    --step-size: min(500px, calc((min(100vw * 0.9, 1680px) - var(--step-gap) * 2) / 3));
    /* Figma 1338:1419 — texture 오버레이 (500px 기준 top -15%) */
    --step-texture-pos-y: calc(var(--step-size) * -0.15);
    --step-texture-size-x: 176.2%;
    --step-texture-size-y: 140.8%;
}

.consult__sec02 .sec02__circles .inner__cen1680{
    height: 100%;
    display: flex;
    align-items: center;
}

/* 점 + 링 인트로 */
.sec02__intro{
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.sec02__ring{
    position: absolute;
    width: var(--step-size);
    height: var(--step-size);
    border: max(1px, calc(var(--step-size) * 0.004)) solid #ffe942;
    border-radius: 50%;
    will-change: transform, opacity;
}

.sec02__dot{
    position: absolute;
    width: var(--step-size);
    height: var(--step-size);
    border-radius: 50%;
    transform: scale(0);
    transform-origin: center center;
    will-change: transform;
    overflow: hidden;
    background: #ffe942;
    isolation: isolate;
}

.sec02__dot::before,
.consult__sec02 .sec02__step__texture{
    opacity: 0.3;
    background: url('/images/texture.jpg') lightgray 0 var(--step-texture-pos-y) / var(--step-texture-size-x) var(--step-texture-size-y) no-repeat;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.sec02__dot::before{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.consult__sec02 .sec02__step__texture{
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 50%;
}

/* 3개 원 */
.sec02__steps{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--step-gap);
    width: 100%;
    height: 100dvh;
}

.sec02__step{
    position: relative;
    display: flex;
    flex: 0 0 var(--step-size);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--step-size) * 0.048);
    width: var(--step-size);
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    text-align: center;
    color: #191919;
    will-change: transform;
    overflow: hidden;
    isolation: isolate;
}

.sec02__step.step01,
.sec02__step.step03{
    z-index: 1;
}

.sec02__step.step02{
    z-index: 3;
}

.consult__sec02 .sec02__step.step01{ background-color: #febcc9; }
.consult__sec02 .sec02__step.step02{ background-color: #ffe942; }
.consult__sec02 .sec02__step.step03{ background-color: #e7ea3d; }

.sec02__step .num,
.sec02__step .en,
.sec02__step .ko{
    position: relative;
    z-index: 1;
}

.sec02__step .num{
    font-family: "Montserrat", sans-serif;
    font-size: calc(var(--step-size) * 0.048);
    font-weight: 400;
    line-height: 130%;
}

.sec02__step .en{
    font-family: "Montserrat", sans-serif;
    font-size: calc(var(--step-size) * 0.108);
    font-weight: 600;
    line-height: 130%;
    text-transform: capitalize;
}

.sec02__step .ko{
    font-family: "Pretendard", sans-serif;
    font-size: calc(var(--step-size) * 0.048);
    font-weight: 600;
    line-height: 130%;
}

.consult__sec02 .sec02__step [data-step-fill]{
    display: inline-block;
    color: #191919;
    opacity: 0;
    will-change: transform, opacity;
}

/* sec02 끝 */

/* sec03 시작 — 상세 3블록 (sticky 이미지 + 질문 채우기) */

.consult__sec03{
    position: relative;
    padding: 0;
}

/* step03 블록 pin 시 화면 전체를 덮는 knowhow (메인 equipment→knowhow) */
#consult__step03{
    position: relative;
}

#consult__step03 .consult__knowhow-cover-pin{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100dvh;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

/* pin 시 sticky 깨짐 → detail 구간(2번째 100dvh)에 맞춤 */
#consult__step03.is-knowhow-pinned .sec03__inner{
    position: relative;
}

#consult__step03.is-knowhow-pinned .sec03__right{
    position: absolute;
    top: 100dvh;
    right: 0;
    z-index: 2;
}

.sec03__block{
    position: relative;
}

.sec03__inner{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.sec03__left{
    flex: 1 0 0;
    min-width: 0;
}

.sec03__ask,
.sec03__detail{
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100dvh;
}


.sec03__ask .ask__title{
    font-family: "Pretendard", sans-serif;
    font-size: clamp(24px, 4.762vw, 80px);
    font-weight: 700;
    line-height: 130%;
    /* 스크롤 시 좌상 → 우하 사선으로 색이 차오르는 텍스트 채우기 */
    background-image: linear-gradient(135deg, #191919 50%, #DDD 50%);
    background-size: 220% 220%;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.sec03__detail{
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 4.762vw, 80px);
}

.sec03__detail .num__title__wr{
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 1.726vw, 29px);
    margin-bottom: 0;
}

.sec03__detail .num__title__wr .num{
    color: #191919;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(12px, 1.429vw, 24px);
    font-weight: 400;
    line-height: 130%;
}

.sec03__detail .num__title__wr .en{
    color: #191919;
    font-family: "Pretendard", sans-serif;
    font-size: clamp(24px, 3.571vw, 60px);
    font-weight: 700;
    line-height: 130%;
    text-transform: capitalize;
}

.sec03__detail .text__wr{
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 2.381vw, 40px);
}

.sec03__detail .text__wr .content__subtitle{
    color: #191919;
    font-family: "Pretendard", sans-serif;
    font-size: clamp(14px, 1.429vw, 24px);
    font-weight: 600;
    line-height: 150%;
}

.sec03__detail .text__wr .content__description{
    color: #505050;
    font-family: "Pretendard", sans-serif;
    font-size: clamp(12px, 1.071vw, 18px);
    font-weight: 400;
    line-height: 160%;
}

.sec03__detail .text__wr .content__description::first-line{
    font-weight: 600;
}

.sec03__right{
    position: sticky;
    top: 0;
    align-self: flex-start;
    width: min(734px, 46%);
    max-width: 100%;
    height: 100dvh;
    flex-shrink: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.sec03__right .img_wr{
    width: 100%;
    height: auto;
    aspect-ratio: 734 / 778;
}

/* sec03 끝 */

/* knowhow 노하우/통계 — sec03 step03 위 오버레이 (메인 #knowhow__section 동일) */

#consult__step03 .knowhow__overlay{
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

#consult__step03:has(.knowhow__overlay.is-active) .consult__knowhow-cover-pin{
    z-index: 20;
}

#consult__step03 .knowhow__overlay.is-active{
    pointer-events: auto;
}

#consult__step03 .knowhow__stage{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    will-change: transform;
}

#consult__step03 .effect_layers,
#consult__step03 .knowhow__layer__main{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    will-change: transform;
}

#consult__step03 .layer01{
    z-index: 1;
    background: url('/images/con_bg04.jpg') center/cover no-repeat;
}

#consult__step03 .layer02{
    z-index: 2;
    background: url('/images/con_bg03.jpg') center/cover no-repeat;
}

#consult__step03 .layer03{
    z-index: 3;
    background: url('/images/con_bg02.jpg') center/cover no-repeat;
}

#consult__step03 .knowhow__layer__main{
    z-index: 4;
    max-width: none;
    margin: 0;
    background: url('/images/con_bg01.jpg') center/cover no-repeat;
}

#consult__step03 .knowhow__layer__main .inner__cen1180{
    height: 100%;
    max-height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    /* 헤더·safe-area 제외 영역에서 시각적 중앙 정렬 (메인 knowhow와 동일) */
    padding: var(--paz-header-h, 84px) clamp(16px, 4vw, 40px) calc(24px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#consult__step03 .knowhow__title__wr{
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 581px;
}

#consult__step03 .knowhow__subtitle{
    margin: 0;
    font-size: 24px;
    line-height: 34px;
    font-weight: 600;
    color: #ffffff;
}

#consult__step03 .knowhow__title{
    margin: 24px 0 0;
    font-family: "Pretendard", sans-serif;
    font-size: 60px;
    font-weight: 600;
    letter-spacing: -1.5px;
    line-height: 72px;
    color: #ffffff;
}

#consult__step03 .knowhow__description{
    margin: 40px 0 0;
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
}

#consult__step03 .knowhow__specs__wr{
    width: 100%;
    max-width: 1178px;
    margin-top: 80px;
}

#consult__step03 .knowhow__specs__list{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

#consult__step03 .knowhow__specs__item{
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 30px;
}

#consult__step03 .knowhow__specs__item__number,
#consult__step03 .knowhow__specs__item__number .spec__digit,
#consult__step03 .knowhow__specs__item__number .spec__char,
#consult__step03 .knowhow__specs__item__number .spec__roll__track,
#consult__step03 .knowhow__specs__item__number .spec__roll__track > span{
    font-family: "Montserrat", sans-serif;
    font-size: 80px;
    font-weight: 600;
    line-height: 90px;
    color: #ffffff;
}

#consult__step03 .knowhow__specs__item__number{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 90px;
    font-variant-numeric: tabular-nums;
}

#consult__step03 .knowhow__specs__item__number.is-count-complete .spec__roll__track{
    will-change: auto;
}

#consult__step03 .spec__digit{
    display: inline-block;
    height: 90px;
    overflow: hidden;
}

#consult__step03 .spec__char{
    display: inline-block;
    height: 90px;
}

#consult__step03 .spec__roll__track{
    display: flex;
    flex-direction: column;
    will-change: transform;
}

#consult__step03 .spec__roll__track > span{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    box-sizing: border-box;
}

#consult__step03 .knowhow__specs__item__text{
    margin: 0;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    line-height: 38px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
}

#consult__step03 .knowhow__overview__btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 318px;
    min-height: 72px;
    margin: 40px 0 0;
    padding: 0 48px;
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    color: #000000;
    border-radius: 77px;
    background: #ffffff;
    text-decoration: none;
}

/* sec04 끝 */


/* ============================================================ */
/* consult 반응형 */
/* ============================================================ */

/* ── 태블릿 (≤1024) : 데스크톱 핀 애니메이션 유지, 크기만 축소 ── */
@media screen and (max-width: 1024px){

    .consult__hero .title{ font-size: 56px; }
}


/* ── 모바일 (≤768) : Figma 375 ── */
@media screen and (max-width: 768px){

    /* 공통 버튼 — Figma: 14px / padding 16·28 / radius 50 */
    .consult__btn{
        width: auto;
        height: auto;
        padding: 16px 28px;
        border-radius: 50px;
        font-size: 14px;
        line-height: 1.1;
    }

    /* ── hero ── */
    .consult__hero__inner{
        gap: 16px;
        min-height: calc(100dvh - 84px);
    }

    .consult__hero .subtitle{
        font-size: 12px;
        line-height: 1.1;
    }

    .consult__hero .title{
        font-size: 24px;
        line-height: 1.3;
    }

    /* subtitle↔타이틀 16 + 타이틀↔버튼 16 = 디자인 간격 */
    .consult__hero .consult__btn{
        margin-top: 16px;
    }

    /* ── sec01 — Figma 1168:3413 세로 스택 ── */
    .consult__sec01{
        gap: 47px;
        padding: 0 0 60px;
    }

    .consult__sec01 .inner__cen1680{
        width: 100%;
        max-width: none;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .consult__sec01 .sec01__content__wr{
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
    }

    .consult__sec01 .sec01__content__left,
    .consult__sec01 .sec01__content__right{
        flex: none;
        width: 100%;
    }

    .consult__sec01 .sec01__content__right{
        aspect-ratio: 335 / 213;
    }

    .consult__sec01 .sec01__content__right .img_wr img{
        object-position: 42% 38%;
    }

    /* ── sec02 — 3단계 원형 세로 스택 + 세로 인터랙션(JS axis=y) ── */
    .consult__sec02{
        padding: 0;
    }

    .sec02__circles{
        --step-gap: clamp(12px, 2.4vh, 16px);
        --step-size: clamp(160px, 24vh, 230px);
        height: 100dvh;
    }

    .sec02__steps{
        flex-direction: column;
        justify-content: center;
        gap: var(--step-gap);
    }

    .sec02__step{
        gap: calc(var(--step-size) * 0.035);
    }

    .sec02__step .num{
        font-size: calc(var(--step-size) * 0.052);
        line-height: 1.3;
    }

    .sec02__step .en{
        font-size: calc(var(--step-size) * 0.087);
        line-height: 1.3;
    }

    .sec02__step .ko{
        font-size: calc(var(--step-size) * 0.061);
        line-height: 1.1;
    }

    /* ── sec03 — Figma 1176:3664 (블록 100dvh, ask 16px 이미지 32px detail) ── */
    .consult__sec03 .sec03__block{
        display: flex;
        flex-direction: column;
        min-height: 100dvh;
        padding: 60px 0 0;
    }

    .consult__sec03 .inner__cen1680.sec03__inner{
        width: 100%;
        padding: 0 20px;
    }

    .sec03__inner{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
    }

    /* left 래퍼 해제 → ask·detail 사이에 이미지 삽입 (Figma 순서) */
    .sec03__left{
        display: contents;
    }

    .sec03__ask,
    .sec03__detail{
        flex: 0 0 auto;
        min-height: 0;
        justify-content: flex-start;
    }

    .sec03__ask{
        order: 0;
        margin-bottom: 16px;
    }

    .sec03__right{
        order: 1;
        margin-bottom: 32px;
        position: static;
        width: 100%;
        height: auto;
        flex: 0 0 auto;
        display: block;
    }

    .sec03__detail{ order: 2; }

    /* knowhow 핀 진입 시에도 이미지는 인라인 유지 */
    #consult__step03.is-knowhow-pinned .sec03__right{
        position: static;
        top: auto;
    }

    .sec03__right .img_wr{
        aspect-ratio: 734 / 778;
    }

    .sec03__ask .ask__title{
        line-height: 1.333333;
        letter-spacing: -0.05em;
    }

    #consult__step03{ padding-bottom: 0; }
}

/* ≤570 : 헤더 56px 대응 (히어로 높이 보정) */
@media screen and (max-width: 570px){
    .consult__hero__inner{
        min-height: calc(100dvh - 56px);
    }
}


/* ── knowhow(마지막 섹션) 반응형 : shop/index.php #knowhow__section 동일 ── */
@media (max-width: 1024px){
    #consult__step03 .knowhow__layer__main .inner__cen1180{
        padding-top: var(--paz-header-h, 84px);
        padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
        padding-left: 20px;
        padding-right: 20px;
        justify-content: center;
        gap: clamp(12px, 2.5dvh, 28px);
    }

    #consult__step03 .knowhow__title__wr {
        max-width: 100%;
        flex: 0 1 auto;
    }

    #consult__step03 .knowhow__specs__item {
        gap: 12px;
    }

    #consult__step03 .knowhow__specs__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #consult__step03 .knowhow__subtitle{
        font-size: 17px;
        line-height: 26px;
        font-weight: 500;
        color: #ffffff;
    }

    #consult__step03 .knowhow__title{
        margin-top: clamp(12px, 2dvh, 20px);
        font-size: clamp(22px, 3.2dvh, 28px);
        line-height: 1.3;
        letter-spacing: -1.5px;
        font-weight: 500;
        color: #ffffff;
    }

    #consult__step03 .knowhow__description{
        margin-top: clamp(12px, 2.5dvh, 32px);
        font-size: 16px;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.8);
    }

    #consult__step03 .knowhow__specs__wr {
        margin-top: clamp(20px, 4.5dvh, 64px);
        flex: 0 1 auto;
        width: 100%;
    }

    #consult__step03 .knowhow__specs__item__number,
    #consult__step03 .knowhow__specs__item__number .spec__digit,
    #consult__step03 .knowhow__specs__item__number .spec__char,
    #consult__step03 .knowhow__specs__item__number .spec__roll__track,
    #consult__step03 .knowhow__specs__item__number .spec__roll__track > span{
        font-size: clamp(36px, 6dvh, 48px);
        line-height: 1.15;
    }

    #consult__step03 .knowhow__specs__item__number,
    #consult__step03 .knowhow__specs__item__number .spec__digit,
    #consult__step03 .knowhow__specs__item__number .spec__char,
    #consult__step03 .knowhow__specs__item__number .spec__roll__track > span{
        height: clamp(42px, 6.5dvh, 54px);
    }

    #consult__step03 .knowhow__specs__item__text{
        font-size: 16px;
        line-height: 22px;
        color: rgba(255, 255, 255, 0.6);
    }

    #consult__step03 .knowhow__overview__btn{
        margin-top: clamp(12px, 2.5dvh, 32px);
        flex: 0 0 auto;
    }
}

@media (max-width: 768px){
    #consult__step03 .knowhow__overview__btn{
        min-width: 0;
        min-height: auto;
        width: auto;
        height: auto;
        padding: 16px 28px;
        border-radius: 50px;
        font-size: 14px;
        line-height: 1.1;
    }

    #consult__step03 .knowhow__layer__main .inner__cen1180{
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 570px){
    #consult__step03 .knowhow__layer__main .inner__cen1180{
        padding-top: var(--paz-header-h, 56px);
        padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
        gap: clamp(8px, 2dvh, 20px);
    }

    #consult__step03 .knowhow__specs__list{
        grid-template-columns: 1fr;
        gap: clamp(12px, 2.5dvh, 24px);
    }

    #consult__step03 .knowhow__subtitle{
        font-size: 14px;
        line-height: 22px;
        font-weight: 500;
        color: #ffffff;
    }

    #consult__step03 .knowhow__title{
        margin-top: clamp(8px, 1.5dvh, 16px);
        font-size: clamp(18px, 2.8dvh, 20px);
        font-weight: 500;
        letter-spacing: -1px;
        line-height: 1.4;
        color: #ffffff;
    }

    #consult__step03 .knowhow__description{
        margin-top: clamp(10px, 2dvh, 24px);
        font-size: 14px;
        line-height: 22px;
        color: rgba(255, 255, 255, 0.8);
    }

    #consult__step03 .knowhow__specs__wr {
        margin-top: clamp(16px, 3.5dvh, 48px);
    }

    #consult__step03 .knowhow__specs__item{ gap: 8px; }

    #consult__step03 .knowhow__specs__item__number,
    #consult__step03 .knowhow__specs__item__number .spec__digit,
    #consult__step03 .knowhow__specs__item__number .spec__char,
    #consult__step03 .knowhow__specs__item__number .spec__roll__track,
    #consult__step03 .knowhow__specs__item__number .spec__roll__track > span{
        font-size: clamp(28px, 5.5dvh, 36px);
        line-height: 1.2;
    }

    #consult__step03 .knowhow__specs__item__number,
    #consult__step03 .knowhow__specs__item__number .spec__digit,
    #consult__step03 .knowhow__specs__item__number .spec__char,
    #consult__step03 .knowhow__specs__item__number .spec__roll__track > span{
        height: clamp(34px, 5.5dvh, 46px);
    }

    #consult__step03 .knowhow__specs__item__text{
        font-size: 12px;
        line-height: 16px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.6);
    }

    #consult__step03 .knowhow__overview__btn{
        margin-top: clamp(10px, 2dvh, 28px);
    }
}

@media (max-width: 375px){
    #consult__step03 .knowhow__specs__wr {
        margin-top: clamp(12px, 3dvh, 36px);
    }

    #consult__step03 .knowhow__specs__list{
        gap: 16px;
    }
}

/* 짧은 뷰포트 — 스펙 1열·간격 축소로 중앙 유지 */
@media (max-width: 1024px) and (max-height: 720px) {
    #consult__step03 .knowhow__specs__list {
        grid-template-columns: 1fr;
        gap: clamp(8px, 2dvh, 16px);
    }

    #consult__step03 .knowhow__specs__wr {
        margin-top: clamp(12px, 2.5dvh, 32px);
    }

    #consult__step03 .knowhow__description br {
        display: none;
    }
}

/* sub_consult.php 끝 */

/* ============================================================
   PRODUCT LIST (shop/list.php)
   ============================================================ */

.product__list .sub__contents__wr{
    padding-left: 0;
    padding-right: 0;
}

/* --- 히어로 --- */
.product__hero{
    position: relative;
    min-height: 527px;
    overflow: hidden;
    padding: 0;
}

.product__hero__bg{
    position: absolute;
    inset: 0;
    z-index: 0;
}

.product__hero__bg picture{
    display: block;
    width: 100%;
    height: 100%;
}

.product__hero__bg img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}

.product__hero .inner__cen1680{
    position: relative;
    z-index: 2;
    min-height: 527px;
    display: flex;
    align-items: center;
}

.product__hero__inner{
    display: flex;
    flex-direction: column;
    gap: 29px;
    max-width: 664px;
    color: #fff;
}

.product__hero__title{
    font-family: "Pretendard", sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
}

.product__hero__desc{
    font-family: "Pretendard", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: #fff;
}

.product__hero__desc p{
    margin: 0;
}

/* --- 목록 본문 --- */
.product__list__wr{
    padding: 80px 0 160px;
}

.product__category__wr{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
    margin-bottom: 92px;
}

.product__section__head{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
    width: 100%;
}

.product__section__title{
    width: 100%;
    text-align: center;
    font-family: "Pretendard", sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.1;
    color: #191919;
}

/* 1차 탭 (pill) */
.product__tab--primary{
    display: flex;
    justify-content: center;
}

.product__tab--primary .product__tab__track{
    position: relative;
    display: inline-flex;
    max-width: 100%;
    padding: 8px;
    border-radius: 60px;
    background: rgba(255, 255, 255, 0.8);
}

.product__tab--primary .product__tab__pill{
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-radius: 30px;
    background: #0EAC9E;
    pointer-events: none;
    z-index: 1;
    transform: translateX(0);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1), height 0.35s cubic-bezier(0.4, 0, 0.2, 1), top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.product__tab--primary .product__tab__pill.is-instant{
    transition: none;
}

.product__tab--primary .product__tab__list{
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 29px;
    padding: 0;
    margin: 0;
    list-style: none;
    background: transparent;
}

.product__tab--primary .product__tab__btn{
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    border-radius: 30px;
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-transform: uppercase;
    color: #191919;
    text-decoration: none;
    background: transparent;
    transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.product__tab--primary .product__tab__btn.is-active{
    color: #fff;
    transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.35s;
}

.product__tab--primary .product__tab__btn.is-instant{
    transition: none !important;
}

/* 2차 탭 (underline) */
.product__tab--secondary{
    width: 100%;
    border-bottom: 2px solid #eee;
    position: sticky;
    top: 84px;
    z-index: 5;
    background: #fff;
    overflow: visible;
}

.product__tab--secondary .product__tab__list{
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 48px;
}

@media screen and (max-width: 1280px){
    .product__tab--secondary{
        overflow: hidden;
    }

    .product__tab--secondary .product__tab__list{
        flex-wrap: nowrap;
        gap: 0;
        transition-property: transform;
        box-sizing: content-box;
        touch-action: pan-y;
    }

    .product__tab--secondary .product__tab__item{
        flex: 0 0 auto;
    }
}

.product__tab--secondary .product__tab__indicator{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 0;
    background: #191919;
    pointer-events: none;
    z-index: 2;
    transform: translateX(0);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.product__tab--secondary .product__tab__indicator.is-instant{
    transition: none;
}

.product__tab--secondary .product__tab__link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-transform: uppercase;
    color: #999;
    text-decoration: none;
    border-bottom: none;
    transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.product__tab--secondary .product__tab__link.is-active{
    font-weight: 600;
    color: #191919;
    transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.35s,
                font-weight 0s linear 0.35s;
}

.product__tab--secondary .product__tab__link.is-instant{
    transition: none !important;
}

/* 상품 그리드 — Figma node 682:1062 (list 카드) */
.product__grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 60px 40px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.product__card{
    height: 100%;
}

.product__card__link{
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    width: 100%;
    height: 100%;
    padding: 24px 24px 40px;
    background: #F9F9F9;
    color: #191919;
    text-decoration: none;
    transition: color 0.4s ease, background-color 0.4s ease;
}

.product__card__link::before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-color: #5BC4BF;
    transform: translateY(100%);
    transition: transform 0.5s ease;
}

.product__card__img__wr,
.product__card__body{
    position: relative;
    z-index: 1;
}

.product__card__img{
    position: relative;
    width: 100%;
    aspect-ratio: 485 / 360;
    background: #fff;
    overflow: hidden;
}

.product__card__img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product__card__soldout{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.product__card__body{
    padding: 39px 0 0 16px;
}

.product__card__info{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product__card__name{
    margin: 0;
    font-family: "Pretendard", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 32px;
    color: #191919;
    transition: color 0.4s ease;
}

.product__card__desc{
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 26px;
    color: #191919;
    transition: color 0.4s ease;
}

.product__card__desc p{
    margin: 0;
    line-height: 26px;
    transition: color 0.4s ease;
}

.product__card__price{
    margin: 8px 0 0;
    padding: 0;
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 32px;
    color: #191919;
    transition: color 0.4s ease;
}

.product__card__tags{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.product__card__tag{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 16px;
    border-radius: 30px;
    background: #F1F1F1;
    font-family: "Pretendard", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 22px;
    color: #505050;
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* PC(호버 가능)만 민트 오버레이 — 터치/스크롤 :hover 고착 방지 */
@media (hover: hover) and (pointer: fine) {
    .product__card__link:hover{
        background-color: transparent;
        color: #fff;
    }

    .product__card__link:hover::before{
        transform: translateY(0);
    }

    .product__card__link:hover .product__card__name,
    .product__card__link:hover .product__card__desc,
    .product__card__link:hover .product__card__desc p,
    .product__card__link:hover .product__card__price{
        color: #fff;
    }

    .product__card__link:hover .product__card__tag{
        background: #fff;
        color: #505050;
    }
}

.product__empty{
    padding: 120px 0;
    text-align: center;
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    color: #999;
}

/* 페이지네이션 */
.product__pagination{
    margin-top: 80px;
}

.product__pagination .pg_wrap{
    float: none;
    display: block;
    width: 100%;
    margin: 0;
    text-align: center;
}

.product__pagination .pg{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.product__pagination .pg a,
.product__pagination .pg strong,
.product__pagination .pg span{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    color: #191919;
    text-decoration: none;
}

.product__pagination .pg strong{
    font-weight: 600;
}

.product__pagination .pg a:hover{
    opacity: 0.7;
}

.product__list .sct_admin{
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 100;
}

#product__list.is-loading{
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

@media screen and (max-width: 1440px){
    .product__grid{
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 48px 32px;
    }
}

@media screen and (max-width: 1024px){
    .product__hero{
        min-height: 420px;
    }

    .product__hero .inner__cen1680{
        min-height: 420px;
    }

    .product__hero__title{
        font-size: 38px;
    }

    .product__hero__desc{
        font-size: 16px;
    }

    .product__list__wr{
        padding: 60px 0 120px;
    }

    .product__category__wr{
        gap: 56px;
        margin-bottom: 64px;
    }

    .product__section__title{
        font-size: 38px;
    }

    .product__tab--secondary{
        top: 56px;
    }

    .product__grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 24px;
    }

    .product__tab--primary .product__tab__list{
        gap: 16px;
    }

    .product__tab--secondary .product__tab__list{
        gap: 0;
        justify-content: flex-start;
        overflow-x: visible;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .product__tab--secondary .product__tab__list::-webkit-scrollbar{
        display: none;
    }
}

@media screen and (max-width: 819px){
    .product__hero{
        height: 567px;
        min-height: 567px;
        max-height: 567px;
    }

    .product__hero .inner__cen1680{
        width: 100%;
        max-width: none;
        height: 567px;
        min-height: 567px;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 70px 24px 0;
        box-sizing: border-box;
    }

    .product__hero__bg picture{
        display: none;
    }

    .product__hero__bg{
        background-image: image-set(
            url("/images/product__mo__bg-hd.jpg") 1x,
            url("/images/product__mo__bg-hd@2x.jpg") 2x
        );
        background-image: url("/images/product__mo__bg-hd.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 78% bottom;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }


    .product__hero__inner{
        gap: 18px;
        max-width: 310px;
    }

    .product__hero__title{
        font-size: 24px;
        font-weight: 700;
        line-height: 1.3;
        max-width: 310px;
    }

    .product__hero__desc{
        font-size: 12px;
        line-height: 1.6;
        max-width: 290px;
    }

    .product__hero__desc p{
        margin: 0;
    }

    .product__section__title{
        font-size: 30px;
    }

    .product__section__head{
        gap: 40px;
    }

    .product__card__body{
        padding: 32px 0 0 12px;
    }

    .product__card__name{
        font-size: 18px;
        line-height: 28px;
    }

    .product__card__desc,
    .product__card__desc p{
        font-size: 13px;
        line-height: 24px;
    }

    .product__card__price{
        font-size: 15px;
        line-height: 28px;
    }

    .product__card__tags{
        margin-top: 20px;
        gap: 6px;
    }
}

@media screen and (max-width: 570px){
    .product__hero__inner{
        gap: 18px;
    }

    .product__list__wr{
        padding: 40px 0 80px;
    }

    .product__category__wr{
        gap: 40px;
        margin-bottom: 48px;
    }

    .product__section__title{
        font-size: 26px;
    }

    .product__tab--primary .product__tab__btn{
        font-size: 14px;
        padding: 6px 14px;
    }

    .product__tab--primary .product__tab__btn.is-active{
        color: #fff;
    }

    .product__tab--secondary .product__tab__link{
        font-size: 14px;
        padding: 16px 0;
    }

    .product__grid{
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .product__card__link{
        padding: 16px 16px 32px;
    }

    .product__card__body{
        padding: 28px 0 0 8px;
    }

    .product__card__name{
        font-size: 17px;
        line-height: 26px;
    }

    .product__card__desc,
    .product__card__desc p{
        font-size: 13px;
        line-height: 22px;
    }

    .product__card__price{
        font-size: 14px;
        line-height: 26px;
    }

    .product__card__tags{
        margin-top: 16px;
    }

    .product__card__tag{
        font-size: 11px;
        line-height: 20px;
        padding: 3px 12px;
    }

    .product__pagination{
        margin-top: 48px;
    }
}

/* ============================================================
   상품 상세 (Figma 682:1178)
   ============================================================ */

.page-product-detail #sit{
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

.page-product-detail #container,
.page-product-detail #wrapper{
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.page-product-detail #container .shop-content.is_item,
#container .shop-content.is_item{
    padding: 84px 0 0;
    box-sizing: border-box;
}

/* 영카트 기본 분류 네비(#sct_location) — 상세에서는 커스텀 breadcrumb만 사용 */
.page-product-detail #sct_location{
    display: none !important;
}

.page-product-detail .sit_admin{
    position: fixed;
    top: 100px;
    right: 24px;
    z-index: 50;
}

/* =========================================================
   상품상세 하단 — #sit_rel / #sit_info (.vv-item-bottom)
   아방 레이아웃 참고 + 비주얼봄 톤 / 우측 #sit_buy 없음
   ※ body class와 무관하게 섹션 클래스로 강제 적용
   ========================================================= */

#sit_rel.vv-item-bottom{
    display: block !important;
    float: none !important;
    clear: both;
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 100px 40px 0 !important;
    border: 0 !important;
    background: #fff !important;
    box-sizing: border-box;
}

#sit_rel.vv-item-bottom h2{
    margin: 0 0 40px !important;
    font-family: "Pretendard", sans-serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.48px;
    text-align: left !important;
    color: #191919 !important;
}

#sit_info.vv-item-bottom{
    display: block !important;
    float: none !important;
    clear: both;
    width: 100% !important;
    max-width: 1280px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 80px 40px 140px !important;
    border: 0 !important;
    background: #fff !important;
    box-sizing: border-box;
}

#sit_info.vv-item-bottom #sit_buy,
.page-item #sit_buy,
.page-product-detail #sit_buy{
    display: none !important;
}

#sit_info.vv-item-bottom #sit_tab{
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    box-sizing: border-box;
}

#sit_info.vv-item-bottom #sit_tab:after{
    display: none !important;
}

#sit_info.vv-item-bottom #sit_tab .tab_tit{
    display: flex !important;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: stretch;
    gap: 0;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
    border-bottom: 1px solid #f1f1f1 !important;
    background: #fff !important;
}

#sit_info.vv-item-bottom #sit_tab .tab_tit:after{
    display: none !important;
}

#sit_info.vv-item-bottom #sit_tab .tab_tit li{
    display: block !important;
    float: none !important;
    flex: 1 1 0 !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}

#sit_info.vv-item-bottom #sit_tab .tab_tit li button{
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 8px 18px !important;
    border: 0 !important;
    background: none !important;
    font-family: "Pretendard", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    letter-spacing: -0.4px;
    color: #999 !important;
    text-align: center !important;
    cursor: pointer;
    z-index: 1;
}

#sit_info.vv-item-bottom #sit_tab .tab_tit li button.selected{
    color: #191919 !important;
    font-weight: 600 !important;
    background: none !important;
    box-shadow: none !important;
}

#sit_info.vv-item-bottom #sit_tab .tab_tit li button.selected:after{
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    width: 100% !important;
    height: 2px !important;
    background: #191919 !important;
    display: block !important;
}

#sit_info.vv-item-bottom #sit_tab .item_use_count,
#sit_info.vv-item-bottom #sit_tab .item_qa_count{
    display: none !important;
}

#sit_info.vv-item-bottom #sit_tab .tab_con{
    margin: 0 !important;
    padding: 48px 0 0 !important;
    background: #fff !important;
    list-style: none !important;
}

#sit_info.vv-item-bottom #sit_tab .tab_con > li{
    margin: 0 !important;
    padding: 0 !important;
}

#sit_info.vv-item-bottom #sit_inf h2,
#sit_info.vv-item-bottom #sit_inf h3,
#sit_info.vv-item-bottom #sit_use h2,
#sit_info.vv-item-bottom #sit_use h3,
#sit_info.vv-item-bottom #sit_qa h2,
#sit_info.vv-item-bottom #sit_qa h3,
#sit_info.vv-item-bottom #sit_dex h2,
#sit_info.vv-item-bottom #sit_dvr h2,
#sit_info.vv-item-bottom #sit_dvr h3,
#sit_info.vv-item-bottom #sit_ex h2,
#sit_info.vv-item-bottom #sit_ex h3{
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
}

#sit_info.vv-item-bottom #sit_inf_explan{
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    overflow: hidden;
    font-family: "Pretendard", sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    letter-spacing: -0.35px;
    color: #191919 !important;
    word-break: keep-all;
}

#sit_info.vv-item-bottom #sit_inf_explan img{
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

#sit_info.vv-item-bottom #sit_inf_open{
    width: 100% !important;
    max-width: none !important;
    margin: 48px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid #191919 !important;
    border-collapse: collapse !important;
    color: #191919 !important;
}

#sit_info.vv-item-bottom #sit_inf_open th,
#sit_info.vv-item-bottom #sit_inf_open td{
    padding: 18px 24px !important;
    border-bottom: 1px solid #e5e5e5 !important;
    background: transparent !important;
    vertical-align: top !important;
    text-align: left !important;
    font-family: "Pretendard", sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.35px;
}

#sit_info.vv-item-bottom #sit_inf_open th{
    width: 240px !important;
    color: #191919 !important;
    font-weight: 600 !important;
}

#sit_info.vv-item-bottom #sit_inf_open td{
    color: #505050 !important;
    font-weight: 400 !important;
}

#sit_info.vv-item-bottom .sit_use_top{
    position: relative;
    margin: 0 0 28px !important;
    padding: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

#sit_info.vv-item-bottom .sit_use_top h4{
    margin: 0 0 12px !important;
    font-family: "Pretendard", sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #191919 !important;
}

#sit_info.vv-item-bottom .sit_use_top h4 span{
    color: #999 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

#sit_info.vv-item-bottom #sit_use_wbtn,
#sit_info.vv-item-bottom #sit_qa_wbtn{
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin: 0 0 28px !important;
    text-align: right !important;
}

#sit_info.vv-item-bottom #sit_use_wbtn a,
#sit_info.vv-item-bottom #sit_qa_wbtn a{
    display: inline-block !important;
    margin-left: 8px;
    padding: 0 22px !important;
    border: 1px solid #191919 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #191919 !important;
    font-family: "Pretendard", sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 38px !important;
    text-decoration: none !important;
}

#sit_info.vv-item-bottom #sit_use_ol,
#sit_info.vv-item-bottom #sit_qa_ol{
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border-top: 1px solid #e5e5e5 !important;
}

#sit_info.vv-item-bottom .sit_use_li,
#sit_info.vv-item-bottom .sit_qa_li{
    border-bottom: 1px solid #e5e5e5 !important;
    font-family: "Pretendard", sans-serif;
    color: #191919;
}

#sit_info.vv-item-bottom .sit_use_li_title,
#sit_info.vv-item-bottom .sit_qa_li_title{
    border: 1px solid #ddd !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #666 !important;
}

#sit_info.vv-item-bottom .sit_use_li_title:hover,
#sit_info.vv-item-bottom .sit_qa_li_title:hover{
    background: #191919 !important;
    border-color: #191919 !important;
    color: #fff !important;
}

#sit_info.vv-item-bottom #sit_dvr,
#sit_info.vv-item-bottom #sit_ex{
    margin: 0 0 40px !important;
    font-family: "Pretendard", sans-serif !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    letter-spacing: -0.35px;
    color: #505050 !important;
}

#sit_info.vv-item-bottom #sit_dvr:last-child,
#sit_info.vv-item-bottom #sit_ex:last-child{
    margin-bottom: 0 !important;
}

@media screen and (max-width: 1024px){
    #sit_rel.vv-item-bottom{
        padding: 64px 24px 0 !important;
    }
    #sit_info.vv-item-bottom{
        padding: 48px 24px 96px !important;
    }
    #sit_info.vv-item-bottom #sit_tab .tab_tit{
        gap: 0;
    }
    #sit_info.vv-item-bottom #sit_tab .tab_tit li button{
        font-size: 15px !important;
        padding: 0 4px 14px !important;
    }
}

@media screen and (max-width: 570px){
    #sit_rel.vv-item-bottom{
        padding: 48px 16px 0 !important;
    }
    #sit_info.vv-item-bottom{
        padding: 40px 16px 72px !important;
    }
    #sit_info.vv-item-bottom #sit_tab .tab_tit{
        gap: 0;
    }
    #sit_info.vv-item-bottom #sit_tab .tab_tit li button{
        font-size: 13px !important;
        padding: 0 2px 12px !important;
    }
    #sit_info.vv-item-bottom #sit_inf_open th{
        width: 34% !important;
        padding: 14px 12px !important;
    }
    #sit_info.vv-item-bottom #sit_inf_open td{
        padding: 14px 12px !important;
    }
}

.product__detail__wrap{
    width: 100%;
}

.product__detail{
    width: 100%;
}

/* 상품 상세 — 우측 min 100vh 확장 + 구매바 sticky, 좌측 갤러리 100vh 고정 sticky */
.product__detail__stage{
    min-height: calc(100vh - 84px);
    min-height: calc(100dvh - 84px);
}

.product__detail__inner{
    display: flex;
    align-items: flex-start;
    width: 100%;
    min-height: calc(100vh - 84px);
    min-height: calc(100dvh - 84px);
}

.product__detail__gallery{
    position: sticky;
    top: 84px;
    flex: 0 0 61.09375%;
    max-width: 61.09375%;
    height: calc(100vh - 84px);
    height: calc(100dvh - 84px);
    max-height: calc(100vh - 84px);
    max-height: calc(100dvh - 84px);
    align-self: flex-start;
    background: #f1f1f1;
}

.product__detail__gallery__viewport{
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
    overflow: hidden;
    cursor: grab;
}

.product__detail__gallery__viewport.swiper-initialized{
    overflow: hidden;
}

.product__detail__gallery__viewport:active{
    cursor: grabbing;
}

.product__detail__gallery__track{
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
}

.product__detail__gallery__slide{
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
}

.product__detail__gallery__img{
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    width: 100%;
    height: 100%;
    min-height: inherit;
    padding: 0;
    box-sizing: border-box;
}

.product__detail__gallery__img a{
    display: block;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: inherit;
}

.product__detail__gallery__img img{
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
    object-position: center;
}

.product__detail__gallery__nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 2px 10px rgba(25, 25, 25, 0.08);
    color: #191919;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.product__detail__gallery__nav:hover{
    background: #191919;
    color: #fff;
    box-shadow: 0 8px 22px rgba(25, 25, 25, 0.22);
    transform: translateY(-50%) scale(1.05);
}

.product__detail__gallery__nav:active{
    transform: translateY(-50%) scale(0.98);
}

.product__detail__gallery__nav--prev{
    left: 24px;
}

.product__detail__gallery__nav--next{
    right: 24px;
}

.product__detail__thumbs{
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 16px;
}

.product__detail__thumb{
    flex: 0 0 100px;
    width: 100px;
    height: 73px;
    padding: 0;
    border: 0;
    background: #d9d9d9;
    overflow: hidden;
    opacity: 0.4;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.product__detail__thumb.is-active{
    opacity: 1;
}

.product__detail__thumb img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product__detail__info{
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: calc(100vh - 84px);
    min-height: calc(100dvh - 84px);
    background: #fff;
}

.product__detail__info__body{
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    padding: 120px 80px 32px;
    box-sizing: border-box;
}

.product__detail__info__body--inquiry{
    flex: initial;
}

.product__detail__info__content{
    width: 100%;
    max-width: 507px;
}

.product__detail__meta{
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 56px;
}

.product__detail__breadcrumb{
    display: flex;
    align-items: center;
    gap: 3px;
    margin: 0;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    line-height: 1.1;
    color: #999;
}

.product__detail__breadcrumb a{
    color: #999;
    text-decoration: none;
}

.product__detail__breadcrumb a:hover{
    color: #191919;
}

.product__detail__breadcrumb__sep{
    display: inline-block;
    width: 12px;
    height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4.5 3L7.5 6L4.5 9' stroke='%23999' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.product__detail__heading{
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}

.product__detail__title{
    margin: 0;
    font-family: "Pretendard", sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 32px;
    color: #000;
}

.product__detail__desc p{
    margin: 0;
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #000;
}

.product__detail__tags{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.product__detail__tag{
    display: inline-flex;
    align-items: center;
    padding: 4px 16px;
    border-radius: 30px;
    background: #f1f1f1;
    font-family: "Pretendard", sans-serif;
    font-size: 12px;
    line-height: 22px;
    color: #505050;
}

.product__detail__options{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 0;
    border-top: 1px solid #191919;
}

.product__detail__options__note{
    margin: 0 0 4px;
    font-family: "Pretendard", sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #999;
}

.product__detail__option,
.product__detail__options__real .get_item_options{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product__detail__option__label,
.product__detail__options__real .label-title{
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    color: #191919;
}

.product__detail__option__field,
.product__detail__options__real .get_item_options > span{
    display: block;
}

.product__detail__option__select,
.product__detail__options__real .it_option,
.product__detail__options__real .it_supply{
    width: 100%;
    height: auto;
    padding: 12px 24px 12px 0;
    border: 0;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23191919' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center / 16px no-repeat;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.35px;
    color: #191919;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    outline: none;
}

.product__detail__options__demo .product__detail__option__select{
    cursor: pointer;
}

.product__detail__options__demo .product__detail__option__select:focus,
.product__detail__options__real .it_option:focus,
.product__detail__options__real .it_supply:focus{
    outline: none;
    border: 0;
    border-bottom: 1px solid #191919;
    box-shadow: none;
}

/* ========== 커스텀 주문옵션 껍데기 (사용자_주문화면.html) ========== */
.product__detail__options--custom{
    display:block;
    padding-top:8px;
    border-top:1px solid #191919;
    color:#1f2328;
    font-family:"Pretendard","Malgun Gothic",sans-serif;
    font-size:15px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
}
.product__detail__options--custom .product__orderform__card,
.product__detail__options--custom .product__orderform__checkrow,
.product__detail__options--custom .product__orderform__qrow,
.product__detail__options--custom .product__orderform__numbtn,
.product__detail__options--custom .product__orderform__select,
.product__detail__options--custom .product__orderform__select__option{
    cursor:pointer;
}
.product__detail__options--custom .product__orderform__card:hover{border-color:#cfd3d8}
.product__detail__options--custom .product__orderform__checkrow:hover{border-color:#cfd3d8}
.product__detail__options--custom .product__orderform__qrow:hover{background:#fafbff}
.product__detail__options--custom .product__orderform__numbtn:hover{border-color:#cfd3d8}
.product__orderform__lead{
    color:#6b7280;
    font-size:13.5px;
    margin:0 0 10px;
}
.product__orderform__lead b{color:#1f2328;font-weight:600}
.product__orderform__title{
    font-size:21px;
    font-weight:800;
    letter-spacing:-.02em;
    margin:28px 0 14px;
    color:#1f2328;
}
.product__orderform__req{color:#0EAC9E;font-size:15px;margin-left:2px}
.product__orderform__desc{color:#6b7280;font-size:13px;margin:-8px 0 14px}

.product__orderform__cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}
.product__orderform__cards--2{grid-template-columns:repeat(2,1fr)}
.product__orderform__card{
    border:1.5px solid #e5e7eb;
    border-radius:12px;
    background:#fff;
    overflow:hidden;
    position:relative;
}
.product__orderform__card.on{
    border-color:#0EAC9E;
    box-shadow:0 0 0 3px #e6f7f5;
}
.product__orderform__thumb{
    height:118px;
    background:#eef1f4;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.product__orderform__thumb__img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}
.product__orderform__cbody{padding:12px 14px 15px}
.product__orderform__cname{font-weight:700;font-size:15px}
.product__orderform__csub{color:#6b7280;font-size:12.5px;margin-top:3px}
.product__orderform__cadd{color:#0c968a;font-size:12px;font-weight:700;margin-top:5px}
.product__orderform__card--mini .product__orderform__cbody{
    display:flex;
    flex-direction:column;
    justify-content:center;
    flex:1;
    padding:16px;
}
.product__orderform__card--mini{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
.product__orderform__ic{width:34px;height:34px;flex:none;color:#5a6472;margin-right:14px}
.product__orderform__thumb .product__orderform__ic{
    width:48px;
    height:48px;
    margin:0;
    color:#5a6472;
}

.product__orderform__minicard{
    width:78%;
    height:74%;
    background:#fff;
    border-radius:5px;
    box-shadow:0 1px 4px rgba(0,0,0,.12);
    padding:12px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    box-sizing:border-box;
}
.product__orderform__minicard__top{
    font-family:Georgia,serif;
    font-size:11px;
    font-weight:700;
}
.product__orderform__minicard__top div{
    font-size:7px;
    color:#888;
    font-weight:400;
}
.product__orderform__minicard__bot{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
}
.product__orderform__minicard__bot span{font-size:8px;color:#555;line-height:1.2}
.product__orderform__minicard__bot i{
    width:9px;height:9px;border-radius:50%;
}
.product__orderform__minicard[data-dot="#3b82f6"] .product__orderform__minicard__bot i{background:#3b82f6}
.product__orderform__minicard[data-dot="#111"] .product__orderform__minicard__bot i{background:#111}
.product__orderform__minicard[data-dot="#f59e0b"] .product__orderform__minicard__bot i{background:#f59e0b}

.product__orderform__selbox{position:relative;z-index:1}
.product__orderform__selbox.is-open{z-index:2}
.product__orderform__select{
    appearance:none;
    -webkit-appearance:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
    height:50px;
    border:1.5px solid #e5e7eb;
    border-radius:10px;
    background:#fff;
    font-size:15px;
    font-weight:600;
    padding:0 14px;
    font-family:inherit;
    color:#1f2328;
    box-sizing:border-box;
    text-align:left;
    cursor:pointer;
}
.product__orderform__select__text{flex:1;min-width:0}
.product__orderform__select__arrow{
    flex:none;
    width:16px;
    height:16px;
    color:#191919;
    pointer-events:none;
    transition:transform .15s ease;
}
.product__orderform__selbox.is-open .product__orderform__select__arrow{
    transform:rotate(180deg);
}
.product__orderform__selbox.is-open .product__orderform__select,
.product__orderform__select:focus{
    outline:none;
    border-color:#0EAC9E;
    box-shadow:0 0 0 3px #e6f7f5;
}
.product__orderform__select__list{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + 6px);
    z-index:31;
    margin:0;
    padding:6px;
    list-style:none;
    border:1.5px solid #0EAC9E;
    border-radius:10px;
    background:#fff;
    box-shadow:0 8px 24px rgba(25,25,25,.08);
    box-sizing:border-box;
}
.product__orderform__selbox.is-open .product__orderform__select__list{
    display:block;
}
.product__orderform__select__option{
    padding:12px 14px;
    border-radius:8px;
    font-size:15px;
    font-weight:600;
    color:#1f2328;
    cursor:pointer;
}
.product__orderform__select__option:hover{
    background:#e6f7f5;
}
.product__orderform__select__option.on{
    background:#0EAC9E;
    color:#fff;
}
.product__orderform__select--img{
    height:auto;
    min-height:50px;
    padding:8px 14px;
}
.product__orderform__select--img .product__orderform__select__text{
    display:flex;
    align-items:center;
    gap:10px;
}
.product__orderform__select__thumb{
    width:34px;
    height:34px;
    border-radius:6px;
    object-fit:cover;
    flex:none;
    background:#eef1f4;
}
.product__orderform__select__option--img{
    display:flex;
    align-items:center;
    gap:10px;
}
.product__orderform__subpick{
    margin-top:12px;
    padding:14px;
    border:1px dashed #b8e5df;
    border-radius:10px;
    background:#f3fbfa;
}
.product__orderform__sublabel{
    font-size:12.5px;
    font-weight:700;
    color:#0c968a;
    margin-bottom:9px;
}

.product__orderform__checks{display:flex;flex-direction:column;gap:10px}
.product__orderform__checkrow{
    display:flex;
    align-items:flex-start;
    gap:12px;
    border:1.5px solid #e5e7eb;
    border-radius:10px;
    padding:14px;
    background:#fff;
}
.product__orderform__checkrow.on{
    border-color:#0EAC9E;
    background:#e6f7f5;
}
.product__orderform__box{
    width:20px;height:20px;
    border:2px solid #c3c8d0;
    border-radius:5px;
    flex:none;
    margin-top:1px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:13px;
    box-sizing:border-box;
}
.product__orderform__checkrow.on .product__orderform__box{
    background:#0EAC9E;
    border-color:#0EAC9E;
}
.product__orderform__ctxt{flex:1}
.product__orderform__cn{font-weight:700}
.product__orderform__cd{color:#6b7280;font-size:12.5px;margin-top:2px}
.product__orderform__checkrow > .product__orderform__cadd{
    color:#0c968a;
    font-size:12.5px;
    font-weight:700;
    white-space:nowrap;
    margin-top:0;
}
.product__orderform__checkrow--img .product__orderform__cthumb{
    width:48px;
    height:48px;
    border-radius:8px;
    object-fit:cover;
    flex:none;
    background:#eef1f4;
}

.product__orderform__numbox{display:flex;align-items:center;gap:10px}
.product__orderform__numbox button,
.product__orderform__numbtn{
    width:44px;height:46px;
    border:1.5px solid #e5e7eb;
    border-radius:9px;
    background:#fff;
    font-size:20px;
    color:#1f2328;
}
.product__orderform__numfield{position:relative;flex:1}
.product__orderform__numfield input{
    width:100%;
    height:46px;
    border:1.5px solid #e5e7eb;
    border-radius:9px;
    text-align:center;
    font-size:16px;
    font-weight:600;
    padding-right:54px;
    font-family:inherit;
    box-sizing:border-box;
    background:#fff;
}
.product__orderform__unit{
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    color:#6b7280;
    font-size:13.5px;
}
.product__orderform__numhint{font-size:12px;color:#9aa0aa;margin:8px 0 0}

.product__orderform__qtable{
    border:1px solid #e5e7eb;
    border-radius:12px;
    overflow:hidden;
    background:#fff;
}
.product__orderform__qhead,
.product__orderform__qrow{
    display:grid;
    grid-template-columns:1fr 1.1fr 1.3fr;
    align-items:center;
    padding:14px 18px;
}
.product__orderform__qhead{
    color:#6b7280;
    font-size:12.5px;
    font-weight:700;
    border-bottom:1px solid #e5e7eb;
    background:#fafbfc;
}
.product__orderform__qrow{border-bottom:1px solid #f1f2f4}
.product__orderform__qrow:last-child{border-bottom:none}
.product__orderform__qrow.on{
    box-shadow:inset 0 0 0 2px #0EAC9E;
    border-radius:10px;
}
.product__orderform__qv{font-weight:700}
.product__orderform__pkg{font-weight:700}
.product__orderform__pkg s{
    color:#b0b4ba;
    font-weight:400;
    font-size:12.5px;
    margin-left:5px;
}

@media (max-width:560px){
    .product__orderform__cards,
    .product__orderform__cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .product__orderform__title{font-size:18px;margin:24px 0 12px}
    .product__orderform__qhead,
    .product__orderform__qrow{padding:12px 14px;font-size:13px}
    .product__orderform__summary__row{
        grid-template-columns:56px 1fr;
        gap:6px 10px;
    }
    .product__orderform__summary__end{
        grid-column:1 / -1;
        justify-content:flex-start;
    }
}

/* 선택된 옵션 요약 (사용자_주문화면.html summary) */
.product__detail__selected--custom{
    margin-top:32px;
    padding-top:0;
    border-top:0;
}
.product__orderform__summary{
    border:1.5px solid #e5e7eb;
    border-radius:14px;
    background:#fff;
    overflow:hidden;
}
.product__orderform__summary__head{
    padding:15px 18px;
    border-bottom:1px solid #e5e7eb;
    background:#fafbfc;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.product__orderform__summary__title{
    font-size:16px;
    font-weight:800;
    letter-spacing:-.01em;
    color:#1f2328;
}
.product__orderform__summary__count{
    font-size:12px;
    color:#6b7280;
    font-weight:600;
}
.product__orderform__summary__body{padding:4px 0}
.product__orderform__summary__row{
    display:grid;
    grid-template-columns:64px 1fr auto;
    gap:10px;
    align-items:center;
    padding:12px 18px;
}
.product__orderform__summary__row + .product__orderform__summary__row{
    border-top:1px solid #f4f5f6;
}
.product__orderform__summary__opt{
    font-size:11.5px;
    color:#6b7280;
    font-weight:700;
}
.product__orderform__summary__val{
    font-size:14px;
    font-weight:600;
    letter-spacing:-.01em;
    color:#1f2328;
}
.product__orderform__summary__dim{
    color:#6b7280;
    font-weight:500;
    font-size:13px;
}
.product__orderform__summary__end{
    display:flex;
    align-items:center;
    gap:10px;
    justify-content:flex-end;
}
.product__orderform__summary__amt{
    font-size:13.5px;
    font-weight:700;
    white-space:nowrap;
    color:#1f2328;
}
.product__orderform__summary__amt.is-free{
    color:#9aa0aa;
    font-weight:600;
}
.product__orderform__summary__sx{
    border:none;
    background:#f1f2f4;
    color:#8b919b;
    width:22px;
    height:22px;
    border-radius:50%;
    font-size:11px;
    cursor:pointer;
    line-height:1;
    flex:none;
    padding:0;
}
.product__orderform__summary__sx:hover{
    background:#fdeaea;
    color:#dc2626;
}
.product__orderform__summary__foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:15px 18px;
    border-top:2px solid #e5e7eb;
    background:#e6f7f5;
}
.product__orderform__summary__fl{
    font-size:13px;
    color:#0c968a;
    font-weight:700;
}
.product__orderform__summary__fv{
    font-size:19px;
    font-weight:800;
    color:#0c968a;
}
.product__orderform__summary__empty{
    padding:28px 18px;
    text-align:center;
    color:#9aa0aa;
    font-size:13px;
}

.product__detail__selected{
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #eee;
}

.product__detail__selected__title{
    margin: 0 0 12px;
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    color: #191919;
}

.product__detail__selected__list,
.product__detail__selected #sit_opt_added{
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    box-sizing: border-box;
}

.product__detail__selected__item,
.product__detail__selected #sit_opt_added li{
    margin: 0;
    padding: 16px;
    width: 100%;
    box-sizing: border-box;
    border: 0;
    border-bottom: 0;
    background: #f9f9f9;
    float: none;
}

.product__detail__selected__item:last-child,
.product__detail__selected #sit_opt_added li:last-child{
    border-bottom: 0;
}

.product__detail__selected__name{
    margin: 0 0 12px;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #191919;
}

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

.product__detail__selected__row .opt_count{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.product__detail__selected #sit_opt_added:after,
.product__detail__selected #sit_opt_added li:after{
    display: none;
}

.product__detail__selected #sit_opt_added button,
.product__detail__selected #sit_opt_added .num_input,
.product__detail__selected #sit_opt_added .sit_opt_prc{
    float: none;
}

.product__detail__selected button.btn_frmline{
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    font-size: 0;
    line-height: 0;
    color: transparent;
    letter-spacing: 0;
    vertical-align: middle;
}

.product__detail__qty{
    display: inline-flex;
    align-items: center;
    border: 0;
}

.product__detail__qty__btn{
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: #fff;
    font-size: 0;
    line-height: 0;
    color: transparent;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.product__detail__qty__btn .fa{
    display: none;
}

.product__detail__selected .sit_qty_minus,
.product__detail__selected .sit_qty_plus{
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: #fff;
    font-size: 0;
    line-height: 0;
    color: transparent;
    position: relative;
    overflow: hidden;
}

.product__detail__selected .sit_qty_minus .fa,
.product__detail__selected .sit_qty_plus .fa{
    display: none;
}

.product__detail__selected .sit_opt_del{
    flex-shrink: 0;
    margin-left: 0;
    padding: 0;
    border: 1px solid #e2e3e5;
    background: #fff;
    font-size: 0;
    line-height: 0;
    color: transparent;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    min-width: 36px;
    width: 36px;
    height: 36px;
}

.product__detail__selected .sit_opt_del::after{
    content: "×";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    line-height: 1;
    color: #191919;
}

.product__detail__qty__btn::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 1px;
    background: #191919;
    transform: translate(-50%, -50%);
}

.product__detail__qty__btn.sit_qty_plus::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1px;
    height: 12px;
    background: #191919;
    transform: translate(-50%, -50%);
}

.product__detail__qty__input{
    width: 48px;
    height: 36px;
    padding: 0;
    border: 0;
    border-left: 1px solid #e2e3e5;
    border-right: 1px solid #e2e3e5;
    text-align: center;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    color: #191919;
}

.product__detail__selected__price{
    flex-shrink: 0;
    margin-left: auto;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    color: #505050;
    white-space: nowrap;
}

.product__detail__selected__item .sit_opt_del{
    margin-left: 0;
}

.product__detail__selected--hidden{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.product__detail__soldout,
.product__detail__unavailable{
    margin: 0;
    padding: 0 80px 16px;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    color: #e03e3e;
}

.product__detail__purchase{
    position: sticky;
    bottom: 0;
    z-index: 10;
    flex: 0 0 auto;
    padding: 40px 80px;
    background: #fff;
    box-sizing: border-box;
}

.product__detail__purchase.product__detail__purchase--inquiry{
    padding-top: 0;
    padding-bottom: 0;
}

.product__detail__purchase__inner{
    width: 100%;
    max-width: 507px;
    margin-left: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 36px;
}

.product__detail__purchase__summary{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

/* shop.js가 채우는 #sit_tot_price — DOM 유지, 화면만 숨김 (TOTAL 표시용) */
.page-product-detail #sit_tot_price,
.product__detail__purchase #sit_tot_price{
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    display: block !important;
}

.page-product-detail #sit_tot_price *,
.product__detail__purchase #sit_tot_price *{
    display: none !important;
}

.product__detail__total{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 32px;
}

.product__detail__total__label{
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.6px;
    text-transform: uppercase;
    color: #191919;
}

.product__detail__total__price{
    font-family: "Pretendard", sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    color: #000;
}

.product__detail__estimate{
    padding: 4px 0;
    border: 0;
    border-bottom: 1px solid #191919;
    background: none;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    line-height: 1.1;
    color: #505050;
    cursor: pointer;
}

.product__detail__actions{
    display: flex;
    gap: 8px;
    width: 100%;
}

/* 스킨 #sit_ov_btn 고정 너비(186px) 오버라이드 */
.product__detail__actions#sit_ov_btn::after{
    display: none;
}

.product__detail__actions#sit_ov_btn .product__detail__btn,
.product__detail__actions#sit_ov_btn button{
    width: auto;
    float: none;
    margin-right: 0;
    margin-bottom: 0;
    height: auto;
    font-size: 16px;
    font-weight: 600;
}

.product__detail__btn{
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    padding: 16px;
    border: 0;
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.4px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.product__detail__btn--cart{
    border: 1px solid #191919;
    background: #fff;
    color: #191919;
}

.product__detail__btn--cart:hover{
    background: #191919;
    color: #fff;
}

.product__detail__btn--buy{
    background: #0EAC9E;
    color: #fff;
}

.product__detail__btn--buy:hover{
    background: #0c968a;
}

@media screen and (max-width: 1024px){
    .product__detail__stage{
        min-height: 0;
    }

    .product__detail__inner{
        flex-direction: column;
        min-height: 0;
    }

    .product__detail__gallery{
        position: relative;
        top: auto;
        flex: none;
        max-width: none;
        width: 100%;
        height: auto;
        max-height: none;
        min-height: 56vw;
    }

    .product__detail__gallery__img{
        padding: 0;
        min-height: 56vw;
    }

    .product__detail__gallery__img a,
    .product__detail__gallery__img img{
        min-height: 56vw;
    }

    .product__detail__gallery__nav{
        width: 48px;
        height: 48px;
    }

    .product__detail__gallery__nav--prev{
        left: 16px;
    }

    .product__detail__gallery__nav--next{
        right: 16px;
    }

    .product__detail__thumbs{
        bottom: clamp(16px, 3.125vw, 32px);
        gap: 10px;
    }

    .product__detail__thumb{
        flex-basis: 72px;
        width: 72px;
        height: 52px;
    }

    .product__detail__info{
        flex: none;
        width: 100%;
        max-width: 100%;
        min-height: 0;
    }

    .product__detail__info__body{
        width: 100%;
        max-width: 100%;
        padding: clamp(40px, 9.524vw, 48px) clamp(16px, 2.381vw, 24px) clamp(20px, 2.381vw, 24px);
    }

    .product__detail__info__content{
        width: 100%;
        max-width: 100%;
    }

    .product__detail__meta{
        gap: clamp(16px, 2.381vw, 24px);
        margin-bottom: clamp(32px, 4.762vw, 56px);
    }

    .product__detail__breadcrumb{
        font-size: clamp(12px, 1.367vw, 14px);
    }

    .product__detail__heading{
        gap: clamp(8px, 1.172vw, 12px);
    }

    .product__detail__title{
        font-size: clamp(22px, 2.539vw, 26px);
        line-height: 1.3;
    }

    .product__detail__desc p{
        font-size: clamp(14px, 1.563vw, 16px);
        line-height: 1.5;
    }

    .product__detail__tag{
        font-size: clamp(11px, 1.172vw, 12px);
        line-height: 1.6;
        padding: 4px clamp(12px, 1.563vw, 16px);
    }

    .product__detail__options{
        gap: clamp(16px, 1.953vw, 20px);
    }

    .product__detail__options__note{
        font-size: clamp(12px, 1.27vw, 13px);
    }

    .product__detail__option__label,
    .product__detail__options__real .label-title{
        font-size: clamp(13px, 1.367vw, 14px);
    }

    .product__detail__option__select,
    .product__detail__options__real .it_option,
    .product__detail__options__real .it_supply{
        font-size: clamp(13px, 1.367vw, 14px);
        height: auto;
        padding: 12px 24px 12px 0;
    }

    .product__detail__selected{
        margin-top: clamp(16px, 2.344vw, 24px);
        padding-top: clamp(16px, 2.344vw, 24px);
    }

    .product__detail__selected__title{
        font-size: clamp(14px, 1.563vw, 16px);
        line-height: 1.5;
    }

    .product__detail__selected__name{
        font-size: clamp(13px, 1.367vw, 14px);
    }

    .product__detail__selected__price{
        font-size: clamp(14px, 1.563vw, 16px);
    }

    .product__detail__soldout,
    .product__detail__unavailable{
        width: 100%;
        padding: 0 clamp(16px, 2.381vw, 24px) 16px;
        box-sizing: border-box;
        font-size: clamp(13px, 1.367vw, 14px);
    }

    .product__detail__purchase{
        position: static;
        width: 100%;
        max-width: 100%;
        padding: clamp(20px, 2.381vw, 24px) clamp(16px, 2.381vw, 24px);
        box-shadow: none;
        border-top: 1px solid #eee;
        box-sizing: border-box;
    }

    .product__detail__purchase__inner{
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        gap: clamp(20px, 2.381vw, 24px);
    }

    .product__detail__purchase__summary{
        align-items: stretch;
    }

    .product__detail__estimate{
        align-self: center;
    }

    .product__detail__actions{
        flex-direction: column;
        gap: 10px;
    }

    .product__detail__actions#sit_ov_btn .product__detail__btn,
    .product__detail__actions#sit_ov_btn button{
        width: 100%;
        flex: none;
    }

    .product__detail__total__label,
    .product__detail__total__price{
        font-size: clamp(18px, 1.953vw, 20px);
    }

    .product__detail__estimate{
        font-size: clamp(13px, 1.367vw, 14px);
    }

    .product__detail__btn,
    .product__detail__actions#sit_ov_btn .product__detail__btn,
    .product__detail__actions#sit_ov_btn button{
        font-size: clamp(14px, 1.563vw, 16px);
        height: clamp(48px, 5.078vw, 52px);
    }
}

@media (max-width: 570px){
    .page-product-detail #container .shop-content.is_item,
    #container .shop-content.is_item{
        padding-top: 56px;
    }

    .product__detail__gallery{
        min-height: 72vw;
    }

    .product__detail__gallery__img,
    .product__detail__gallery__img a,
    .product__detail__gallery__img img{
        min-height: 72vw;
    }

    .product__detail__gallery__nav{
        width: 40px;
        height: 40px;
    }

    .product__detail__gallery__nav--prev{
        left: 12px;
    }

    .product__detail__gallery__nav--next{
        right: 12px;
    }

    .product__detail__thumb{
        flex-basis: 64px;
        width: 64px;
        height: 46px;
    }

    .product__detail__info__body{
        padding: 32px 16px 20px;
    }

    .product__detail__meta{
        gap: 16px;
        margin-bottom: 32px;
    }

    .product__detail__purchase{
        padding: 20px 16px 24px;
    }

    .product__detail__purchase__summary{
        align-items: stretch;
    }

    .product__detail__total{
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}


.page-shop-cart #container .shop-content{
    padding: 0;
}

.page-shop-cart #wrapper_title{
    display: none;
}

.page-shop-cart--empty{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.page-shop-cart--empty #wrapper{
    flex: 1 0 auto;
}

.cart__wr{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: 120px;
    padding-bottom: 160px;
    gap: 40px;
    box-sizing: border-box;
}

.cart__head{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    width: 100%;
}

.cart__content{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.cart__title{
    margin: 0;
    width: 100%;
    font-family: "Montserrat", sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -1.2px;
    text-transform: uppercase;
    text-align: center;
    color: #191919;
}

.cart__steps{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.cart__step{
    margin: 0;
    padding: 0;
    list-style: decimal inside;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    line-height: 24px;
    text-transform: uppercase;
    color: #707070;
}

.cart__step li{
    display: inline;
}

.cart__step--active{
    font-weight: 600;
    color: #191919;
}

.cart__step__arrow{
    display: block;
    width: 24px;
    height: 24px;
    background: url("../images/chevron-right.svg") center/18px 18px no-repeat;
    flex: 0 0 auto;
}

.cart__panel,
.cart__summary,
.cart__actions,
.cart__empty{
    width: 660px;
    max-width: 100%;
}

.cart__form{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
}

.cart__check{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    position: relative;
    cursor: pointer;
}

.cart__check__input{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cart__check__box{
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    background: #fff;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.cart__check__input:checked + .cart__check__box{
    background: #191919 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.5 7.2L5.7 10.4L11.5 3.8' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px 14px no-repeat;
    border-color: #191919;
}

.cart__check__label{
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.4px;
    color: #191919;
}

.cart__check__count{
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.4px;
    color: #505050;
}

.cart__toolbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #191919;
}

.cart__toolbar__delete{
    padding: 0;
    border: 0;
    background: transparent;
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.4px;
    color: #505050;
    cursor: pointer;
}

.cart__cate{
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}

.cart__item__main{
    display: grid;
    grid-template-columns: 16px 135px minmax(0, 1fr) 24px;
    column-gap: 8px;
    align-items: start;
    padding: 20px;
    min-height: 175px;
    box-sizing: border-box;
}

.cart__item__remove{
    justify-self: end;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent url("../images/icon_cart_remove.svg") center/contain no-repeat;
    cursor: pointer;
}

.cart__item__thumb{
    display: block;
    width: 135px;
    height: 135px;
    background: #fff;
    overflow: hidden;
}

.cart__item__thumb img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart__item__info{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    line-height: 1.1;
    letter-spacing: -0.35px;
}

.cart__item__name{
    margin: 0;
    color: #707070;
}

.cart__item__price,
.cart__item__ship{
    margin: 0;
    color: #191919;
}

.cart__item__opt{
    font-size: 12px;
    color: #707070;
}

.cart__qty{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    padding: 0 20px;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
}

.cart__qty__label{
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.35px;
    color: #707070;
}

.cart__qty__controls{
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart__qty__group{
    display: flex;
    align-items: center;
}

.cart__qty__btn{
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #eee;
    background: #fff center/24px 24px no-repeat;
    cursor: pointer;
    box-sizing: border-box;
}

.cart__qty__btn--minus{
    background-image: url("../images/icon_qty_minus.svg");
}

.cart__qty__btn--plus{
    background-image: url("../images/icon_qty_plus.svg");
}

.cart__qty__input{
    width: 54px;
    height: 40px;
    padding: 12px 18px;
    border: 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    background: #fff;
    box-sizing: border-box;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.35px;
    text-align: center;
    color: #191919;
}

.cart__qty__submit{
    height: 40px;
    padding: 13px 22px;
    border: 1px solid #eee;
    background: #fff;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.35px;
    color: #191919;
    cursor: pointer;
    box-sizing: border-box;
}

.cart__item__hidden{
    display: none;
}

.cart__summary{
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border: 1px solid #191919;
    box-sizing: border-box;
}

.cart__summary__row{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.cart__summary__label{
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.4px;
    color: #707070;
}

.cart__summary__value{
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.4px;
    color: #707070;
    text-align: right;
}

.cart__summary__value strong{
    font-weight: 500;
    color: #191919;
}

.cart__summary__divider{
    width: 100%;
    height: 1px;
    background: #eee;
}

.cart__summary__row--total .cart__summary__label,
.cart__summary__value--total strong{
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.6px;
    color: #191919;
}

.cart__summary__estimate{
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.cart__estimate{
    padding: 4px 0;
    border: 0;
    border-bottom: 1px solid #191919;
    background: none;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    line-height: 1.1;
    color: #505050;
    cursor: pointer;
}

.cart__actions{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cart__btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 326px;
    max-width: calc(50% - 4px);
    padding: 16px;
    box-sizing: border-box;
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.4px;
    text-decoration: none;
    cursor: pointer;
}

.cart__btn--ghost{
    border: 1px solid #191919;
    background: #fff;
    color: #191919;
}

.cart__btn--primary{
    border: 1px solid #191919;
    background: #191919;
    color: #fff;
}

.cart__empty{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 296px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
}

.cart__empty__icon{
    width: 80px;
    height: 80px;
    background: url("../images/icon_cart_empty.svg") center/contain no-repeat;
}

.cart__empty__text{
    margin: 0;
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-transform: uppercase;
    color: #707070;
}

.cart-naverpay{
    width: 660px;
    max-width: 100%;
}

@media screen and (max-width: 570px){
    .cart__wr{
        padding-top: 40px;
        padding-bottom: 64px;
        gap: 32px;
    }

    .cart__head{
        gap: 32px;
        padding: 0 16px;
        box-sizing: border-box;
    }

    .cart__title{
        font-size: 32px;
        letter-spacing: -0.8px;
    }

    .cart__steps{
        gap: 8px;
    }

    .cart__step{
        font-size: 12px;
        line-height: 20px;
    }

    .cart__step__arrow{
        width: 16px;
        height: 16px;
        background-size: 12px 12px;
    }

    .cart__content{
        padding: 0 16px;
        box-sizing: border-box;
    }

    .cart__form{
        gap: 32px;
    }

    .cart__panel,
    .cart__summary,
    .cart__actions,
    .cart__empty,
    .cart-naverpay{
        width: 100%;
    }

    .cart__check__label,
    .cart__check__count,
    .cart__toolbar__delete{
        font-size: 14px;
        letter-spacing: -0.35px;
    }

    .cart__toolbar,
    .cart__cate{
        padding: 14px 16px;
    }

    .cart__item__main{
        grid-template-columns: 16px 88px minmax(0, 1fr) 20px;
        padding: 16px;
        min-height: 0;
    }

    .cart__item__thumb{
        width: 88px;
        height: 88px;
    }

    .cart__item__info{
        font-size: 13px;
        line-height: 1.4;
        gap: 6px;
    }

    .cart__item__opt{
        font-size: 11px;
        line-height: 1.4;
    }

    .cart__item__remove{
        width: 20px;
        height: 20px;
    }

    .cart__qty{
        height: auto;
        min-height: 64px;
        padding: 12px 16px;
        gap: 12px;
    }

    .cart__qty__label{
        font-size: 13px;
    }

    .cart__qty__controls{
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .cart__qty__btn{
        width: 36px;
        height: 36px;
        background-size: 20px 20px;
    }

    .cart__qty__input{
        width: 44px;
        height: 36px;
        padding: 8px 10px;
        font-size: 13px;
    }

    .cart__qty__submit{
        height: 36px;
        padding: 10px 14px;
        font-size: 13px;
    }

    .cart__summary{
        padding: 16px;
        gap: 12px;
    }

    .cart__summary__label,
    .cart__summary__value{
        font-size: 14px;
        letter-spacing: -0.35px;
    }

    .cart__summary__row--total .cart__summary__label,
    .cart__summary__value--total strong{
        font-size: 20px;
        letter-spacing: -0.5px;
    }

    .cart__actions{
        flex-direction: column;
        width: 100%;
    }

    .cart__btn{
        width: 100%;
        max-width: 100%;
        font-size: 15px;
        padding: 14px 16px;
    }

    .cart__empty{
        height: auto;
        min-height: 200px;
        padding: 48px 16px;
    }

    .cart__empty__icon{
        width: 64px;
        height: 64px;
    }

    .cart__empty__text{
        font-size: 14px;
        line-height: 22px;
    }
}


/* ------------------------------------------------------------ */
/* orderform.php — 주문서 (cart 톤 + 아방 2컬럼 레이아웃) */

.page-shop-order #container .shop-content{
    padding: 0;
}

.page-shop-order #wrapper_title{
    display: none;
}

.order__page{
    width: 100%;
}

.order__wr{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: 120px;
    padding-bottom: 160px;
    gap: 40px;
    box-sizing: border-box;
}

.order__head{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    width: 100%;
}

.order__title{
    margin: 0;
    width: 100%;
    font-family: "Montserrat", sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -1.2px;
    text-transform: uppercase;
    text-align: center;
    color: #191919;
}

.order__content{
    display: block;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.order__hide{
    display: none !important;
}

.order__section__title{
    margin: 0 0 20px;
    padding: 0 0 16px;
    border-bottom: 1px solid #191919;
    font-family: "Pretendard", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.45px;
    color: #191919;
}

/* 레이아웃: 상품 풀폭 / 좌·우 2컬럼 (CSS Grid) */
.order__page #forderform{
    display: block;
    width: 100%;
}

.order__page #sod_frm.order__layout{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-areas:
        "items items"
        "main summary";
    column-gap: 48px;
    row-gap: 48px;
    align-items: start;
    width: 100%;
    max-width: 100%;
    margin: 0;
    color: #191919;
    font-family: "Pretendard", sans-serif;
}

.order__page #sod_frm.order__layout:after{
    display: none !important;
    content: none !important;
}

.order__page #sod_frm .order__items{
    grid-area: items;
    display: block;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    clear: none;
}

.order__page #sod_frm .order__main.sod_left{
    grid-area: main;
    display: block !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    vertical-align: top;
}

.order__page #sod_frm .order__summary.sod_right{
    grid-area: summary;
    display: block !important;
    float: none !important;
    width: 360px !important;
    max-width: 360px;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    vertical-align: top;
    position: static;
    align-self: start;
}

.order__panel{
    margin: 0 0 48px !important;
    border: 0 !important;
    background: transparent !important;
}

.order__page #sod_frm .order__main .order__panel:last-child{
    margin-bottom: 0 !important;
}

.order__page #sod_frm .order__panel > h2,
.order__page #sod_frm .order__summary > h2{
    position: static;
    font-size: 18px;
    line-height: 1.2;
    margin: 0 0 16px;
    padding: 0 0 16px;
    border-bottom: 1px solid #191919;
    font-weight: 600;
    color: #191919;
}

/* 상품 테이블 */
.order__page #sod_frm .od_prd_list.tbl_head03 table,
.order__page #sod_frm .od_prd_list table{
    width: 100%;
    border-collapse: collapse;
    border-top: 0 !important;
    border-bottom: 0;
}

.order__page #sod_frm .od_prd_list thead th,
.order__page #sod_frm .od_prd_list .th_line th{
    padding: 16px 0;
    border-top: 0 !important;
    border-bottom: 1px solid #eee !important;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.35px;
    color: #191919;
    text-align: left;
    background: transparent;
}

.order__page #sod_frm .od_prd_list thead th.order__th__price,
.order__page #sod_frm .od_prd_list .order__item__price{
    text-align: right;
    width: 160px;
    white-space: nowrap;
}

.order__page #sod_frm .od_prd_list tbody td{
    padding: 20px 0;
    border-top: 0;
    border-left: 0;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
    background: transparent;
    font-size: 14px;
    line-height: 1.4;
    color: #191919;
    word-break: keep-all;
}

.order__page #sod_frm .od_prd_list .td_prd{
    position: static !important;
    padding: 20px 16px 20px 0 !important;
    min-height: 0 !important;
    text-align: left;
}

.order__page #sod_frm .od_prd_list .order__item{
    display: flex;
    align-items: center;
    gap: 16px;
}

.order__page #sod_frm .od_prd_list .sod_img,
.order__page #sod_frm .od_prd_list .order__item__thumb{
    position: static !important;
    float: none !important;
    top: auto !important;
    left: auto !important;
    margin: 0;
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
}

.order__page #sod_frm .od_prd_list .sod_img img,
.order__page #sod_frm .od_prd_list .order__item__thumb img{
    width: 80px;
    height: 80px;
    object-fit: cover;
    display: block;
}

.order__page #sod_frm .od_prd_list .sod_name,
.order__page #sod_frm .od_prd_list .order__item__info{
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0 !important;
    overflow: visible;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.35px;
    color: #191919;
}

.order__page #sod_frm .od_prd_list .sod_name b,
.order__page #sod_frm .od_prd_list .order__item__info b{
    font-weight: 600;
}

.order__page #sod_frm .od_prd_list .sod_opt{
    margin-top: 8px;
    color: #707070;
    font-size: 13px;
    font-weight: 400;
}

.order__page #sod_frm .od_prd_list .total_price{
    font-weight: 600;
    font-size: 15px;
}

.order__page #sod_frm .od_prd_list .cp_btn,
.order__page #sod_frm .od_prd_list .cp_cancel{
    margin-top: 8px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid #191919;
    background: #fff;
    color: #191919;
    font-size: 12px;
    line-height: 26px;
    cursor: pointer;
}

.order__page #sod_frm .od_prd_list .cp_btn:hover,
.order__page #sod_frm .od_prd_list .cp_cancel:hover{
    border-color: #0EAC9E;
    color: #0EAC9E;
}

/* 주문자 / 배송지 폼 — register_form(sub__field) 톤 */
.order__page #sod_frm .order__fields{
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 !important;
    width: 100%;
}

.order__page #sod_frm .order__fields .sub__information__box{
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.order__page #sod_frm .order__fields .sub__field__label{
    display: flex;
    align-items: flex-start;
    gap: 2px;
    margin: 0;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.35px;
    color: #191919;
}

.order__page #sod_frm .order__fields .sub__field__req{
    color: #f00;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.1;
}

.order__page #sod_frm .order__fields .sub__field__hint{
    margin: 0;
    color: #505050;
    font-family: "Pretendard", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.3px;
}

.order__page #sod_frm .order__fields input.sub__field__input,
.order__page #sod_frm .order__fields input.frm_input,
.order__page #sod_frm .order__fields input.frm_address,
.order__page #sod_frm .order__fields textarea.sub__field__input,
.order__page #sod_frm .order__fields #od_memo{
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    min-height: 38px;
    margin: 0 !important;
    padding: 12px 0 !important;
    box-sizing: border-box;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: inset 0 -1px 0 #ddd !important;
    outline: none !important;
    -webkit-transition: none !important;
    transition: none !important;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.35px;
    color: #191919;
    vertical-align: baseline !important;
}

.order__page #sod_frm .order__fields input.sub__field__input:focus,
.order__page #sod_frm .order__fields input.sub__field__input:focus-visible,
.order__page #sod_frm .order__fields input.frm_input:focus,
.order__page #sod_frm .order__fields input.frm_input:focus-visible,
.order__page #sod_frm .order__fields input.frm_address:focus,
.order__page #sod_frm .order__fields input.frm_address:focus-visible,
.order__page #sod_frm .order__fields textarea.sub__field__input:focus,
.order__page #sod_frm .order__fields #od_memo:focus{
    border: 0 !important;
    outline: none !important;
    box-shadow: inset 0 -1px 0 #191919 !important;
}

.order__page #sod_frm .order__fields input::placeholder,
.order__page #sod_frm .order__fields textarea::placeholder{
    color: #999;
}

.order__page #sod_frm .order__fields .order__textarea,
.order__page #sod_frm .order__fields #od_memo{
    min-height: 96px !important;
    resize: vertical;
    line-height: 1.5 !important;
}

.order__page #sod_frm .order__fields .sub__information__box--addr{
    gap: 12px;
}

.order__page #sod_frm .order__fields .sub__information__button__box{
    display: flex;
    gap: 8px;
    align-items: flex-start;
    width: 100%;
}

.order__page #sod_frm .order__fields .sub__information__button__box .sub__field__input,
.order__page #sod_frm .order__fields .sub__information__button__box .frm_input{
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
}

.order__page #sod_frm .order__fields .sub__field__side-btn,
.order__page #sod_frm .order__fields .btn_address{
    flex: 0 0 128px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 128px !important;
    height: 39px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #191919 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #191919 !important;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.35px;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    vertical-align: top;
}

.order__page #sod_frm .order__fields .sub__field__side-btn:hover,
.order__page #sod_frm .order__fields .btn_address:hover{
    border-color: #0EAC9E !important;
    color: #0EAC9E !important;
}

.order__page #sod_frm #od_zip,
.order__page #sod_frm #od_b_zip,
.order__page #sod_frm #od_addr1,
.order__page #sod_frm #od_addr2,
.order__page #sod_frm #od_addr3,
.order__page #sod_frm #od_b_addr1,
.order__page #sod_frm #od_b_addr2,
.order__page #sod_frm #od_b_addr3{
    width: 100% !important;
    display: block;
    margin-top: 0 !important;
}

.order__page #sod_frm .order__fields .sub__information__button__box #od_zip,
.order__page #sod_frm .order__fields .sub__information__button__box #od_b_zip{
    width: auto !important;
    display: block;
}

.order__page #sod_frm_taker .order_choice_place,
.order__page #sod_frm .order__addr__choice{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin: 0;
    padding: 14px 16px;
    background: #f7f7f7;
    border: 1px solid #eee;
}

.order__page #sod_frm_taker .order_choice_place .btn_frmline,
.order__page #sod_frm .order__addr__choice .btn_frmline{
    position: static;
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 72px;
    height: 32px;
    margin-left: auto;
    padding: 0 12px;
    line-height: 30px;
    border: 1px solid #191919;
    background: #fff;
    color: #191919;
    font-size: 12px;
    font-weight: 600;
}

.order__page #sod_frm .order__check__row{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 14px;
    color: #191919;
}

.order__page #sod_frm_orderer #od_addr_jibeon,
.order__page #sod_frm_taker #od_b_addr_jibeon{
    display: block;
    margin: 4px 0 0;
    font-size: 13px;
    color: #707070;
}

/* 우측 결제 요약 */
.order__page #sod_frm .order__summary > .order__section__title{
    margin: 0 0 16px;
    padding: 0 0 16px;
}

.order__page #sod_frm .order__summary__tot{
    margin: 0 0 16px;
}

.order__page #forderform .sod_right #sod_bsk_tot,
.order__page #sod_frm #sod_bsk_tot{
    border: 1px solid #191919 !important;
    background: #fff;
    overflow: hidden;
}

.order__page #sod_frm #sod_bsk_tot:after{
    display: none !important;
    content: none !important;
}

.order__page #sod_frm #sod_bsk_tot ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

.order__page #sod_frm #sod_bsk_tot ul:after{
    display: none !important;
    content: none !important;
}

.order__page #sod_frm #sod_bsk_tot li,
.order__page #sod_frm #sod_bsk_tot .sod_bsk_sell,
.order__page #sod_frm #sod_bsk_tot .sod_bsk_coupon,
.order__page #sod_frm #sod_bsk_tot .sod_bsk_dvr,
.order__page #sod_frm #sod_bsk_tot .sod_bsk_point,
.order__page #sod_frm #sod_bsk_tot .sod_bsk_cnt{
    float: none !important;
    clear: none !important;
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 16px 20px !important;
    line-height: 1.2 !important;
    text-align: left !important;
    border: 0 !important;
    border-bottom: 1px solid #eee !important;
    border-right: 0 !important;
    background: #fff !important;
    box-sizing: border-box;
    font-size: 14px;
    color: #707070;
}

.order__page #sod_frm #sod_bsk_tot li:last-child{
    border-bottom: 0 !important;
}

.order__page #sod_frm #sod_bsk_tot .sod_bsk_coupon:before,
.order__page #sod_frm #sod_bsk_tot .sod_bsk_dvr:before{
    display: none !important;
    content: none !important;
}

.order__page #sod_frm #sod_bsk_tot .order__sum__label,
.order__page #sod_frm #sod_bsk_tot li span.order__sum__label{
    float: none !important;
    display: block !important;
    flex: 0 0 auto;
    margin: 0 !important;
    color: #707070;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
}

.order__page #sod_frm #sod_bsk_tot .order__sum__value,
.order__page #sod_frm #sod_bsk_tot li span.order__sum__value{
    float: none !important;
    display: inline-flex !important;
    align-items: baseline;
    justify-content: flex-end;
    gap: 2px;
    flex: 0 0 auto;
    margin: 0 !important;
    margin-left: auto !important;
    color: #191919;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    text-align: right;
    white-space: nowrap;
}

.order__page #sod_frm #sod_bsk_tot .order__sum__value strong,
.order__page #sod_frm #sod_bsk_tot li strong{
    float: none !important;
    display: inline !important;
    margin: 0 !important;
    color: #191919 !important;
    font-weight: 500;
    font-size: inherit;
}

.order__page #sod_frm #sod_bsk_tot .sod_bsk_cnt{
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    border-top: 1px solid #191919 !important;
}

.order__page #sod_frm #sod_bsk_tot .sod_bsk_cnt .order__sum__label,
.order__page #sod_frm #sod_bsk_tot .sod_bsk_cnt .order__sum__value,
.order__page #sod_frm #sod_bsk_tot .sod_bsk_cnt .order__sum__value strong{
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #191919 !important;
}

.order__pay{
    margin: 0 !important;
}

/* 결제정보 소제목은 최종 결제정보와 중복 → 숨김 */
.order__page #sod_frm #sod_frm_pay > h2.order__section__title{
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    font-size: 0;
    line-height: 0;
}

.order__page #sod_frm_pay .pay_tbl{
    margin: 0;
    border: 1px solid #191919;
    background: #fff;
}

.order__page #sod_frm_pay .pay_tbl table{
    width: 100%;
    border-collapse: collapse;
}

.order__page #sod_frm_pay .pay_tbl th,
.order__page #sod_frm_pay .pay_tbl td{
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    background: transparent !important;
    font-weight: 500;
    color: #707070;
    font-size: 14px;
    line-height: 1.4;
    vertical-align: middle;
}

.order__page #sod_frm_pay .pay_tbl tr:last-child th,
.order__page #sod_frm_pay .pay_tbl tr:last-child td{
    border-bottom: 0;
}

.order__page #sod_frm_pay .pay_tbl th{
    text-align: left;
    width: 96px;
    white-space: nowrap;
    color: #707070;
}

.order__page #sod_frm_pay .pay_tbl td{
    text-align: right;
}

.order__page #sod_frm_pay .pay_tbl td strong{
    color: #191919;
    font-weight: 500;
}

.order__page #sod_frm_pay .pay_tbl td .btn_frmline{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 10px;
    margin: 0 0 0 8px;
    border: 1px solid #191919 !important;
    background: #fff !important;
    color: #191919 !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
}

.order__page #sod_frm_pay .pay_tbl td .btn_frmline:hover{
    border-color: #0EAC9E !important;
    color: #0EAC9E !important;
}

.order__page #forderform .sod_right #od_tot_price,
.order__page #sod_frm #od_tot_price,
.order__page #od_tot_price,
.order__page .order__tot__price{
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 28px !important;
    padding: 18px 20px !important;
    border: 1px solid #191919 !important;
    border-top: 0 !important;
    background: #fff !important;
    line-height: 1.2 !important;
    text-align: left !important;
    box-sizing: border-box;
}

.order__page #od_tot_price span,
.order__page #od_tot_price strong,
.order__page #od_tot_price em{
    float: none !important;
}

.order__page #od_tot_price .order__sum__label{
    flex: 0 0 auto;
    margin: 0 !important;
    font-size: 16px;
    font-weight: 600;
    color: #191919;
    white-space: nowrap;
}

.order__page #od_tot_price .order__sum__value{
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: baseline;
    justify-content: flex-end;
    gap: 2px;
    width: auto !important;
    max-width: none;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    font-size: 16px;
    font-weight: 600;
    color: #191919;
    white-space: nowrap;
    text-align: right;
}

.order__page #od_tot_price .order__sum__value .print_price,
.order__page #od_tot_price .order__sum__value strong{
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #0EAC9E !important;
    white-space: nowrap;
}

.order__page #od_tot_price .order__sum__unit{
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    font-style: normal;
    font-size: 16px;
    font-weight: 600;
    color: #191919;
    white-space: nowrap;
}

.order__page #sod_frm #sod_frm_pt_alert,
.order__page #sod_frm_pt_alert{
    margin: 0 0 12px;
    padding: 0;
    color: #707070;
    font-size: 13px;
    line-height: 1.4;
    background: transparent !important;
}

.order__page #sod_frm_pay .sod_frm_point{
    margin: 0 0 20px;
    border: 1px solid #eee;
    background: #fff;
}

.order__page #sod_frm_pay .sod_frm_point div{
    padding: 14px 16px;
    background: #fff;
}

.order__page #sod_frm_pay .sod_frm_point #od_temp_point{
    height: 36px;
    padding: 0 10px;
    border: 1px solid #ddd;
    border-radius: 0;
}

/* 결제수단 */
.order__page #forderform .od_pay_buttons_el,
.order__page #od_pay_sl .od_pay_buttons_el{
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.order__page #od_pay_sl h3,
.order__page .od_pay_buttons_el h3{
    margin: 0 0 12px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid #191919 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #191919 !important;
}

.order__page #sod_frm_paysel{
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

.order__page #sod_frm_paysel:after{
    display: block;
    clear: both;
    content: "";
}

.order__page #od_pay_sl .lb_icon{
    float: none !important;
    display: flex !important;
    align-items: center;
    width: 100% !important;
    max-width: 100%;
    height: 56px !important;
    margin: 0 0 8px !important;
    padding: 0 16px 0 64px !important;
    box-sizing: border-box;
    border: 1px solid #eee !important;
    background-color: #fff !important;
    color: #191919;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
}

.order__page #od_pay_sl input[type="radio"]:checked + .lb_icon{
    border-color: #0EAC9E !important;
    z-index: 3;
}

.order__page #display_pay_button.btn_confirm{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 24px 0 0;
    padding: 0;
    text-align: left;
}

.order__page #display_pay_button .btn_submit{
    width: 100%;
    height: 52px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #0EAC9E;
    color: #fff;
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.4px;
    cursor: pointer;
}

.order__page #display_pay_button .btn_submit:hover{
    background: #0c968a;
}

.order__page #display_pay_button .btn01{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid #191919;
    border-radius: 0;
    background: #fff;
    color: #191919;
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.4px;
    text-decoration: none;
    text-align: center;
    line-height: 52px;
}

.order__page #display_pay_button .btn01:hover{
    border-color: #0EAC9E;
    color: #0EAC9E;
}

.order__page #display_pay_process{
    margin-top: 16px;
    font-size: 14px;
    color: #707070;
    text-align: center;
}

.order__design__desc{
    margin: 0 0 24px;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.35px;
    color: #707070;
}

.order__design__choice{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 0 0 24px;
}

.order__design__choice__item{
    display: block;
    margin: 0;
    cursor: pointer;
}

.order__design__choice__item input{
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.order__design__choice__box{
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 100%;
    padding: 16px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    background: #fff;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.order__design__choice__label{
    font-family: "Pretendard", sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.35px;
    color: #191919;
}

.order__design__choice__text{
    font-family: "Pretendard", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: -0.3px;
    color: #707070;
}

.order__design__choice__item:hover .order__design__choice__box{
    border-color: #999;
}

.order__design__choice__item input:focus-visible + .order__design__choice__box{
    outline: 2px solid #191919;
    outline-offset: 2px;
}

.order__design__choice__item input:checked + .order__design__choice__box{
    border-color: #191919;
    background: #f7f7f7;
}

.order__design__modes{
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.order__design__mode{
    padding: 24px;
    border: 1px solid #191919;
    background: #fff;
    box-sizing: border-box;
}

.order__design__mode--new,
.order__design__mode--load{
    border-color: #191919;
    background: #fff;
}

.order__design__mode[hidden]{
    display: none !important;
}

.order__design__mode__head{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 24px;
    padding: 0 0 16px;
    border-bottom: 1px solid #eee;
}

.order__design__mode--new .order__design__mode__head{
    border-bottom-color: #191919;
}

.order__design__mode__badge{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 24px;
    padding: 0 8px;
    box-sizing: border-box;
    background: #191919;
    font-family: "Pretendard", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.3px;
    color: #fff;
}

.order__design__mode__badge--load{
    background: #191919;
}

.order__design__mode__titles{
    min-width: 0;
}

.order__design__mode__title{
    margin: 0 0 6px;
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.4px;
    color: #191919;
}

.order__design__mode__text{
    margin: 0;
    font-family: "Pretendard", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.3px;
    color: #707070;
}

.order__design__fields{
    gap: 32px;
}

.order__design__file-head{
    flex-wrap: wrap;
    justify-content: flex-start;
}

.order__design__load-box{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.order__design__load-btn{
    min-width: 180px;
    background: #191919;
    border-color: #191919;
    color: #fff;
}

.order__design__load-btn:hover:not(:disabled){
    background: #0EAC9E;
    border-color: #0EAC9E;
    color: #fff;
}

.order__design__load-btn:disabled{
    opacity: 0.5;
    cursor: not-allowed;
}

.order__design__load-link{
    font-family: "Pretendard", sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #707070;
    text-decoration: underline;
}

.order__design__load-link:hover{
    color: #0EAC9E;
}

.order__design__loaded{
    margin-top: 24px;
}

.order__design__file-name{
    color: #707070;
    font-weight: 400;
}

.order__design__loaded .mypage__webhard__attached__name{
    flex-wrap: wrap;
    align-items: center;
}

.order__design__loaded-tip{
    position: relative;
}

.order__design__badge{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 6px;
    border: 1px solid #0EAC9E;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: #0EAC9E;
}

.order__design-modal[hidden]{
    display: none !important;
}

.order__design-modal{
    position: fixed;
    inset: 0;
    z-index: 10080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    box-sizing: border-box;
}

.order__design-modal__dim{
    position: absolute;
    inset: 0;
    background: rgba(25, 25, 25, 0.45);
}

.order__design-modal__panel{
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 960px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
}

.order__design-modal__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid #191919;
}

.order__design-modal__title{
    margin: 0;
    font-family: "Pretendard", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: #191919;
}

.order__design-modal__close{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.order__design-modal__desc{
    margin: 0;
    padding: 16px 24px 0;
    font-family: "Pretendard", sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #707070;
}

.order__design-modal__desc a{
    color: #0EAC9E;
    text-decoration: underline;
}

.order__design-modal__body{
    flex: 1 1 auto;
    overflow: auto;
    padding: 16px 24px;
}

.order__design-modal__board{
    margin: 0;
}

.order__design-modal__board .col-check{
    width: 44px;
    text-align: center;
    vertical-align: middle;
}

.order__design-modal__board .order__design-modal__input{
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #0EAC9E;
    cursor: pointer;
}

.order__design-modal__board .mypage__webhard__tip__box{
    z-index: 2;
}

.order__design-modal__foot{
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px 24px;
    border-top: 1px solid #eee;
}

.order__design-modal__btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid #191919;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
}

.order__design-modal__btn--ghost{
    background: #fff;
    color: #191919;
}

.order__design-modal__btn--solid{
    background: #191919;
    color: #fff;
}

.order__design-modal__btn--solid:hover{
    background: #0EAC9E;
    border-color: #0EAC9E;
}

body.is-order-design-modal{
    overflow: hidden;
}

@media screen and (max-width: 1024px){
    .order__page #sod_frm.order__layout{
        grid-template-columns: 1fr;
        grid-template-areas:
            "items"
            "main"
            "summary";
        column-gap: 0;
        row-gap: 40px;
    }

    .order__page #sod_frm .order__main.sod_left,
    .order__page #sod_frm .order__summary.sod_right{
        float: none !important;
        width: 100% !important;
        max-width: 100%;
        padding: 0 !important;
        position: static;
    }
}

@media screen and (max-width: 570px){
    .order__wr{
        padding-top: 40px;
        padding-bottom: 64px;
        gap: 32px;
    }

    .order__head{
        gap: 32px;
    }

    .order__title{
        font-size: 32px;
        letter-spacing: -0.8px;
    }

    .order__content{
        padding: 0 16px;
    }

    .order__page #sod_frm.order__layout{
        width: 100%;
    }

    .order__section__title,
    .order__page #sod_frm .order__panel > h2,
    .order__page #sod_frm .order__summary > h2{
        font-size: 16px;
        margin-bottom: 16px;
        padding-bottom: 12px;
    }

    .order__page #sod_frm .order__fields{
        gap: 20px;
    }

    .order__page #sod_frm .order__fields .sub__field__side-btn,
    .order__page #sod_frm .order__fields .btn_address{
        flex: 0 0 100px;
        width: 100px !important;
        font-size: 13px;
    }

    .order__design__desc{
        margin-bottom: 20px;
        font-size: 13px;
    }

    .order__design__choice{
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .order__design__modes{
        gap: 16px;
    }

    .order__design__mode{
        padding: 20px 16px;
    }

    .order__design__fields{
        gap: 28px;
    }

    .order__design__load-box{
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .order__design__load-btn{
        width: 100%;
        min-width: 0;
    }

    .order__design-modal__panel{
        max-width: 100%;
    }

    .order__design-modal__head,
    .order__design-modal__body,
    .order__design-modal__foot{
        padding-left: 16px;
        padding-right: 16px;
    }

    .order__design-modal__desc{
        padding-left: 16px;
        padding-right: 16px;
    }

    .order__design-modal__foot{
        flex-direction: column-reverse;
    }

    .order__design-modal__btn{
        width: 100%;
    }

    .order__design-modal__board .col-check{
        width: auto;
        text-align: left;
    }

    .order__page #sod_frm .od_prd_list .order__item{
        gap: 12px;
    }

    .order__page #sod_frm .od_prd_list .sod_img,
    .order__page #sod_frm .od_prd_list .order__item__thumb{
        flex-basis: 64px;
        width: 64px;
        height: 64px;
    }

    .order__page #sod_frm .od_prd_list .sod_img img,
    .order__page #sod_frm .od_prd_list .order__item__thumb img{
        width: 64px;
        height: 64px;
    }

    .order__page #sod_frm .od_prd_list thead th.order__th__price,
    .order__page #sod_frm .od_prd_list .order__item__price{
        width: 100px;
        font-size: 13px;
    }

    .order__page #sod_frm #sod_bsk_tot .sod_bsk_cnt span,
    .order__page #sod_frm #sod_bsk_tot .sod_bsk_cnt strong{
        font-size: 16px;
    }

    .order__page #od_tot_price strong{
        font-size: 18px;
    }

    .order__page #display_pay_button .btn_submit,
    .order__page #display_pay_button .btn01{
        height: 48px;
        font-size: 15px;
        line-height: 48px;
    }
}


/* ------------------------------------------------------------ */
/* ordercomplete.php — 주문완료 (Figma 1777:8122) */

.page-shop-ordercomplete #container .shop-content{
    padding: 0;
}

.page-shop-ordercomplete #wrapper_title{
    display: none;
}

.order-complete__page{
    width: 100%;
    background: #fff;
}

.order-complete__wr{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 70px;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 120px 20px 160px;
    box-sizing: border-box;
}

.order-complete__head{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    width: 100%;
}

.order-complete__title{
    margin: 0;
    width: 100%;
    font-family: "Montserrat", sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -1.2px;
    text-transform: uppercase;
    text-align: center;
    color: #191919;
}

.order-complete__content{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 70px;
    width: 100%;
}

.order-complete__message{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 660px;
    max-width: 100%;
    height: 296px;
    padding: 16px 0;
    border-top: 2px solid #191919;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
}

.order-complete__icon{
    width: 80px;
    height: 80px;
    background: url("../images/icon_order_complete.svg") center/contain no-repeat;
}

.order-complete__text{
    margin: 0;
    font-family: "Pretendard", sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    color: #191919;
}

.order-complete__text strong{
    font-weight: 700;
}

.order-complete__desc{
    margin: 0;
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    color: #707070;
}

.order-complete__actions{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.order-complete__btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 326px;
    max-width: calc(50% - 4px);
    padding: 16px 0;
    box-sizing: border-box;
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.4px;
    text-decoration: none;
    text-align: center;
}

.order-complete__btn--ghost{
    border: 1px solid #191919;
    background: #fff;
    color: #191919;
}

.order-complete__btn--ghost:hover{
    border-color: #0EAC9E;
    color: #0EAC9E;
}

.order-complete__btn--solid{
    border: 1px solid #191919;
    background: #191919;
    color: #fff;
}

.order-complete__btn--solid:hover{
    background: #0EAC9E;
    border-color: #0EAC9E;
    color: #fff;
}

@media screen and (max-width: 570px){
    .order-complete__wr{
        gap: 40px;
        padding: 40px 16px 64px;
    }

    .order-complete__head{
        gap: 32px;
    }

    .order-complete__title{
        font-size: 32px;
        letter-spacing: -0.8px;
    }

    .order-complete__content{
        gap: 40px;
    }

    .order-complete__message{
        height: auto;
        min-height: 240px;
        gap: 12px;
    }

    .order-complete__icon{
        width: 64px;
        height: 64px;
    }

    .order-complete__text{
        font-size: 20px;
        line-height: 1.3;
    }

    .order-complete__desc{
        font-size: 14px;
        line-height: 1.4;
    }

    .order-complete__actions{
        flex-direction: column;
        gap: 8px;
    }

    .order-complete__btn{
        width: 100%;
        max-width: 100%;
    }
}


/* ------------------------------------------------------------ */
/* register_result.php — 회원가입 완료 (Figma 1777:7977) */

.page-bbs-register-result #container .shop-content,
.page-register-result #container .shop-content{
    padding: 0;
}

.page-bbs-register-result #wrapper_title,
.page-register-result #wrapper_title{
    display: none;
}

.join-complete__page{
    width: 100%;
    background: #fff;
}

.join-complete__wr{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 660px;
    margin: 0 auto;
    padding: 120px 20px 160px;
    box-sizing: border-box;
}

.join-complete__head{
    width: 100%;
    margin: 0 0 0;
}

.join-complete__title{
    margin: 0;
    width: 100%;
    font-family: "Montserrat", sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 60px;
    letter-spacing: -1.2px;
    text-transform: uppercase;
    text-align: center;
    color: #191919;
}

.join-complete__content{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 70px;
    width: 100%;
}

.join-complete__message{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    height: 296px;
    margin-top: 60px;
    padding: 16px 0;
    border-top: 2px solid #191919;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
}

.join-complete__icon{
    width: 80px;
    height: 80px;
    background: url("../images/icon_order_complete.svg") center/contain no-repeat;
}

.join-complete__text{
    margin: 0;
    font-family: "Pretendard", sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    color: #191919;
}

.join-complete__text strong{
    font-weight: 700;
}

.join-complete__desc{
    margin: 0;
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    color: #707070;
}

.join-complete__cert{
    width: 100%;
}

.join-complete__cert__notice{
    margin: 0;
    padding: 20px;
    background: #f7f7f7;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: -0.3px;
    color: #666;
    text-align: center;
    word-break: keep-all;
}

.join-complete__cert__notice strong{
    color: #191919;
    font-weight: 600;
}

.join-complete__cert__info{
    margin: 14px 0 0;
    border-top: 1px solid #191919;
    text-align: left;
}

.join-complete__cert__info > div{
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 4px;
    border-bottom: 1px solid #eee;
}

.join-complete__cert__info dt{
    flex: 0 0 72px;
    margin: 0;
    font-family: "Pretendard", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #999;
}

.join-complete__cert__info dd{
    margin: 0;
    font-family: "Montserrat", "Pretendard", sans-serif;
    font-size: 15px;
    color: #191919;
    word-break: break-all;
}

.join-complete__actions{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.join-complete__btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 326px;
    max-width: calc(50% - 4px);
    padding: 16px 0;
    box-sizing: border-box;
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.4px;
    text-decoration: none;
    text-align: center;
}

.join-complete__btn--ghost{
    border: 1px solid #191919;
    background: #fff;
    color: #191919;
}

.join-complete__btn--ghost:hover{
    border-color: #0EAC9E;
    color: #0EAC9E;
}

.join-complete__btn--solid{
    border: 1px solid #191919;
    background: #191919;
    color: #fff;
}

.join-complete__btn--solid:hover{
    background: #0EAC9E;
    border-color: #0EAC9E;
    color: #fff;
}

@media screen and (max-width: 570px){
    .join-complete__wr{
        padding: 40px 16px 64px;
    }

    .join-complete__title{
        font-size: 32px;
        line-height: 1.2;
        letter-spacing: -0.8px;
    }

    .join-complete__content{
        gap: 40px;
    }

    .join-complete__message{
        height: auto;
        min-height: 240px;
        gap: 12px;
    }

    .join-complete__icon{
        width: 64px;
        height: 64px;
    }

    .join-complete__text{
        font-size: 20px;
        line-height: 1.3;
    }

    .join-complete__desc{
        font-size: 14px;
        line-height: 1.4;
    }

    .join-complete__actions{
        flex-direction: column;
        gap: 8px;
    }

    .join-complete__btn{
        width: 100%;
        max-width: 100%;
    }
}


/* ------------------------------------------------------------ */
/* orderinquiryview.php — 주문상세 (아방 레이아웃 + VisualVom 톤) */

.page-shop-orderinquiryview #container .shop-content{
    padding: 0;
}

.page-shop-orderinquiryview #wrapper_title{
    display: none;
}

.order-view__hide{
    display: none !important;
}

#sod_fin.order-view,
.order-view{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-areas:
        "no no"
        "items items"
        "design design"
        "main summary";
    column-gap: 48px;
    row-gap: 40px;
    align-items: start;
    width: 100%;
    color: #191919;
    font-family: "Pretendard", sans-serif;
}

#sod_fin.order-view:after,
.order-view:after{
    display: none !important;
    content: none !important;
}

.order-view__no,
.order-view #sod_fin_no{
    grid-area: no;
    margin: 0 !important;
    padding: 18px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #191919 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #191919 !important;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
}

.order-view__no strong,
.order-view #sod_fin_no strong{
    font-size: 18px;
    font-weight: 600;
    color: #191919;
    margin-left: 8px;
}

.order-view__subject{
    margin-left: 16px;
    font-size: 15px;
    font-weight: 500;
    color: #505050;
}

.order-view__items,
.order-view #sod_fin_list{
    grid-area: items;
    margin: 0;
}

.order-view__design,
#sod_fin.order-view .order-view__design{
    grid-area: design;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 24px;
    border: 1px solid #eee;
    border-radius: 0;
    background: #fff;
    box-sizing: border-box;
}

.order-view__design .fm-design-box__heading,
#sod_fin.order-view .order-view__design .fm-design-box__heading{
    margin: 0 0 20px;
    padding: 0;
    border: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.4px;
    color: #191919;
}

.order-view .fm-design-layout{
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(320px, 1.3fr);
    gap: 24px 40px;
    align-items: start;
}

.order-view .fm-design-meta{
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.order-view .fm-design-meta__row{
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
}

.order-view .fm-design-meta__label{
    flex: 0 0 64px;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 600;
    color: #707070;
    line-height: 1.4;
}

.order-view .fm-design-meta__value{
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    color: #191919;
    line-height: 1.5;
    word-break: break-word;
}

.order-view .fm-design-meta__content{
    font-weight: 400;
    white-space: pre-wrap;
}

.order-view .fm-design-files{
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.order-view .fm-files__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.order-view .fm-files__label{
    font-size: 14px;
    font-weight: 600;
    color: #191919;
}

.order-view .fm-files__actions{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.order-view .fm_btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 14px;
    border: 1px solid #191919;
    background: #fff;
    color: #191919;
    font-family: "Pretendard", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.3px;
    cursor: pointer;
    box-sizing: border-box;
}

.order-view .fm_btn--dl{
    background: #191919;
    color: #fff;
}

.order-view .fm_btn--sub{
    background: #fff;
    color: #191919;
}

.order-view .fm_btn:hover{
    opacity: 0.85;
}

.order-view .fm-files__list{
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #eee;
    background: #fafafa;
    overflow: hidden;
}

.order-view .fm-files__item{
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 10px 14px;
    box-sizing: border-box;
    border-top: 1px solid #eee;
}

.order-view .fm-files__item:first-child{
    border-top: 0;
}

.order-view .fm-files__check{
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1;
    cursor: pointer;
}

.order-view .fm-files__checkbox{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.order-view .fm-files__checkbox:after,
.order-view .fm-files__checkbox:before{
    content: none !important;
    display: none !important;
}

.order-view .fm-files__check-ui{
    display: block;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 1.5px solid #b0b0b0;
    border-radius: 2px;
    background: #fff;
    pointer-events: none;
}

.order-view .fm-files__checkbox:checked + .fm-files__check-ui{
    border-color: #191919;
    background: #191919;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' d='M2.5 6.2l2.4 2.3 4.6-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 10px;
}

.order-view .fm-files__name{
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    color: #191919;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-view .fm-files__size{
    margin-left: 8px;
    font-style: normal;
    font-size: 12px;
    color: #707070;
}

.order-view .fm-files__dl-one{
    flex: 0 0 auto;
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
}

.order-view .fm-files__empty{
    margin: 0;
    padding: 20px 14px;
    border: 1px solid #eee;
    background: #fafafa;
    font-size: 14px;
    color: #707070;
    text-align: center;
}

.order-view__main.sod_left,
#sod_fin.order-view .order-view__main.sod_left{
    grid-area: main;
    display: block !important;
    float: none !important;
    clear: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0;
    vertical-align: top;
}

.order-view__summary.sod_right,
#sod_fin.order-view .order-view__summary.sod_right{
    grid-area: summary;
    display: block !important;
    float: none !important;
    clear: none !important;
    width: 360px !important;
    max-width: 360px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    align-self: start;
    vertical-align: top;
}

.order-view__section__title,
.order-view h2.order-view__section__title,
.order-view h3.order-view__section__title,
#sod_fin.order-view .sod_left h3.order-view__section__title,
#sod_fin.order-view .sod_right h2.order-view__section__title,
#sod_fin.order-view .sod_right h3.order-view__section__title{
    position: static !important;
    margin: 0 0 16px !important;
    padding: 0 0 16px !important;
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid #191919 !important;
    background: transparent !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #191919 !important;
    overflow: visible !important;
}

.order-view__panel{
    margin: 0 0 40px !important;
    min-width: 0;
}

.order-view__main .order-view__panel:last-child,
.order-view__summary > .order-view__panel{
    margin-bottom: 24px !important;
}

/* 상품 테이블 */
.order-view #sod_fin_list .tbl_head03 table,
.order-view #sod_fin_list table{
    width: 100%;
    border-collapse: collapse;
    border-top: 0 !important;
    border-bottom: 0;
}

.order-view #sod_fin_list thead th,
.order-view #sod_fin_list .th_line th{
    padding: 16px 0;
    border-top: 0 !important;
    border-bottom: 1px solid #eee !important;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: #191919;
    text-align: left;
    letter-spacing: -0.35px;
}

.order-view #sod_fin_list tbody td{
    padding: 20px 12px 20px 0;
    border-top: 0;
    border-left: 0;
    border-bottom: 1px solid #eee;
    background: transparent;
    vertical-align: middle;
    font-size: 14px;
    color: #191919;
    text-align: left !important;
    word-break: keep-all;
}

.order-view #sod_fin_list .td_prd{
    position: static !important;
    padding-left: 0 !important;
    min-height: 0 !important;
}

.order-view__item{
    display: flex;
    align-items: center;
    gap: 16px;
}

.order-view__item__thumb{
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
}

.order-view__item__thumb img{
    width: 80px;
    height: 80px;
    object-fit: cover;
    display: block;
}

.order-view__item__thumb--empty{
    visibility: hidden;
}

.order-view__item__info{
    flex: 1 1 auto;
    min-width: 0;
}

.order-view__item__name{
    display: block;
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: #191919;
    text-decoration: none;
}

.order-view__item__name:hover{
    color: #0EAC9E;
}

.order-view__item__opt{
    font-size: 13px;
    color: #707070;
    line-height: 1.4;
}

.order-view__status{
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid #191919;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: #191919;
    white-space: nowrap;
}

.order-view #sod_sts_wrap,
.order-view__sts{
    margin-top: 16px;
    text-align: right;
}

.order-view__sts__btn,
.order-view #sod_sts_explan_open{
    height: 36px;
    padding: 0 14px;
    border: 1px solid #191919;
    background: #fff;
    color: #191919;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.order-view__sts__btn:hover,
.order-view #sod_sts_explan_open:hover{
    border-color: #0EAC9E;
    color: #0EAC9E;
}

.order-view__sts__panel,
.order-view #sod_sts_explan{
    margin-top: 12px;
    padding: 16px 20px;
    border: 1px solid #eee;
    background: #f7f7f7;
    text-align: left;
}

.order-view #sod_sts_explan[hidden]{
    display: none !important;
}

.order-view #sod_fin_legend{
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #707070;
    font-size: 13px;
    line-height: 1.5;
}

.order-view #sod_fin_legend:after{
    display: block;
    clear: both;
    content: "";
}

.order-view #sod_fin_legend dt{
    clear: both;
    float: left;
    width: 48px;
    margin: 0 0 8px;
    font-weight: 600;
    color: #191919;
}

.order-view #sod_fin_legend dd{
    float: left;
    width: calc(100% - 56px);
    margin: 0 0 8px;
}

/* 좌측 정보 테이블 */
#sod_fin.order-view .sod_left .tbl_head01,
#sod_fin.order-view .order-view__panel .tbl_head01{
    margin: 0 !important;
}

#sod_fin.order-view .sod_left .tbl_head01 table,
#sod_fin.order-view .order-view__panel table{
    width: 100% !important;
    border-collapse: collapse;
    table-layout: fixed;
}

#sod_fin.order-view .sod_left th,
#sod_fin.order-view .order-view__panel th{
    width: 100px !important;
    padding: 12px 16px 12px 0 !important;
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid #eee !important;
    background: transparent !important;
    text-align: left !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #707070 !important;
    vertical-align: top;
    white-space: nowrap;
}

#sod_fin.order-view .sod_left td,
#sod_fin.order-view .order-view__panel td{
    width: auto !important;
    padding: 12px 0 !important;
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid #eee !important;
    background: transparent !important;
    text-align: left !important;
    font-size: 14px !important;
    font-weight: 500;
    color: #191919 !important;
    line-height: 1.5;
    word-break: keep-all;
}

.order-view .order-view__panel .empty_table{
    text-align: left;
    color: #707070;
}

.order-view .btn_frmline,
.order-view a.btn_frmline{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #191919 !important;
    background: #fff !important;
    color: #191919 !important;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0;
}

.order-view .btn_frmline:hover,
.order-view a.btn_frmline:hover{
    border-color: #0EAC9E !important;
    color: #0EAC9E !important;
}

.order-view .dvr_link{
    color: #0EAC9E !important;
    text-decoration: underline;
}

/* 우측 결제 요약 (아방 sod_bsk_tot2 구조) */
#sod_fin.order-view #sod_bsk_tot,
#sod_fin.order-view .order-view__tot,
.order-view #sod_bsk_tot,
.order-view .order-view__tot{
    margin: 0 0 24px !important;
    padding: 0 !important;
    list-style: none;
    border: 1px solid #191919;
    background: #fff;
    overflow: hidden;
}

#sod_fin.order-view #sod_bsk_tot:after,
.order-view #sod_bsk_tot:after{
    display: none !important;
    content: none !important;
}

#sod_fin.order-view #sod_bsk_tot li,
#sod_fin.order-view .order-view__tot li,
.order-view #sod_bsk_tot li,
.order-view .order-view__tot li{
    position: relative !important;
    float: none !important;
    clear: none !important;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    line-height: 1.35 !important;
    border: 0 !important;
    border-bottom: 1px solid #eee !important;
    background: #fff !important;
    box-sizing: border-box;
    font-size: 14px;
    color: #707070;
    text-align: left !important;
}

#sod_fin.order-view #sod_bsk_tot li:last-child,
.order-view #sod_bsk_tot li:last-child{
    border-bottom: 0 !important;
}

#sod_fin.order-view #sod_bsk_tot li span,
.order-view #sod_bsk_tot li span{
    float: none !important;
    clear: none !important;
    display: inline !important;
}

.order-view .order-view__sum__label,
#sod_fin.order-view .order-view__sum__label{
    float: none !important;
    flex: 0 0 auto;
    margin: 0 !important;
    color: #707070 !important;
    font-weight: 500 !important;
    white-space: nowrap;
}

.order-view .order-view__sum__value,
#sod_fin.order-view .order-view__sum__value{
    display: inline-flex !important;
    align-items: baseline;
    justify-content: flex-end;
    gap: 2px;
    margin: 0 0 0 auto !important;
    float: none !important;
    color: #191919 !important;
    font-weight: 500;
    white-space: nowrap;
    text-align: right;
}

.order-view .order-view__sum__value strong,
.order-view #sod_bsk_tot li strong,
#sod_fin.order-view #sod_bsk_tot li strong{
    float: none !important;
    display: inline !important;
    margin: 0 !important;
    color: #191919 !important;
    font-weight: 500;
    font-size: inherit;
}

#sod_fin.order-view #sod_bsk_tot .sod_bsk_cnt,
.order-view #sod_bsk_tot .sod_bsk_cnt{
    border-top: 1px solid #191919 !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

#sod_fin.order-view #sod_bsk_tot .sod_bsk_cnt .order-view__sum__label,
#sod_fin.order-view #sod_bsk_tot .sod_bsk_cnt .order-view__sum__value,
#sod_fin.order-view #sod_bsk_tot .sod_bsk_cnt .order-view__sum__value strong,
.order-view #sod_bsk_tot .sod_bsk_cnt .order-view__sum__label,
.order-view #sod_bsk_tot .sod_bsk_cnt .order-view__sum__value,
.order-view #sod_bsk_tot .sod_bsk_cnt .order-view__sum__value strong{
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #191919 !important;
}

#sod_fin.order-view #sod_bsk_tot .sod_fin_tot,
.order-view #sod_bsk_tot .sod_fin_tot{
    background: #f7f7f7 !important;
    border-top: 1px solid #eee !important;
}

#sod_fin.order-view #sod_bsk_tot .sod_fin_tot .order-view__sum__label,
#sod_fin.order-view #sod_bsk_tot .sod_fin_tot .order-view__sum__value,
#sod_fin.order-view #sod_bsk_tot .sod_fin_tot .order-view__sum__value strong{
    font-weight: 600 !important;
    color: #191919 !important;
}

.order-view #sod_bsk_tot .order-view__tot__pay .right,
.order-view #sod_bsk_tot #alrdy .right{
    width: 100%;
    margin-top: 8px;
    color: #707070;
    font-size: 13px;
}

.order-view #sod_bsk_tot #alrdy .right p{
    display: flex;
    justify-content: space-between;
    margin: 4px 0 0;
    padding: 6px 10px;
    background: #eee;
    color: #707070 !important;
}

.order-view #sod_bsk_tot #alrdy .right .title{
    position: static;
    padding: 0;
}

/* 우측 결제정보 패널 */
.order-view__summary #sod_fin_pay{
    margin: 0 0 24px !important;
}

.order-view__summary #sod_fin_pay .tbl_head01 table{
    table-layout: auto;
}

.order-view__summary #sod_fin_pay th{
    width: 88px !important;
    padding-right: 12px !important;
}

/* 취소 */
.order-view #sod_fin_cancel,
.order-view .order-view__cancel{
    margin: 0;
    text-align: left;
}

.order-view #sod_fin_cancel p{
    margin: 0;
    padding: 16px;
    border: 1px solid #eee;
    background: #f7f7f7;
    color: #707070;
    font-size: 14px;
    text-align: center;
}

.order-view__cancel__btn,
.order-view #sod_fin_cancel > button{
    width: 100%;
    max-width: 100%;
    height: 48px;
    border: 1px solid #191919 !important;
    background: #fff !important;
    color: #191919 !important;
    font-family: "Pretendard", sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.order-view__cancel__btn:hover,
.order-view #sod_fin_cancel > button:hover{
    border-color: #0EAC9E !important;
    color: #0EAC9E !important;
}

.order-view #sod_fin_cancelfrm{
    display: none;
    margin-top: 12px;
    padding: 16px;
    border: 1px solid #eee;
    background: #fff;
    text-align: left;
}

.order-view__cancel__input,
.order-view #sod_fin_cancelfrm .frm_input{
    width: 100% !important;
    height: auto !important;
    margin: 0 0 8px !important;
    padding: 12px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: inset 0 -1px 0 #ddd !important;
    font-size: 14px;
    color: #191919;
}

.order-view__cancel__submit,
.order-view #sod_fin_cancelfrm .btn_frmline{
    position: static !important;
    width: 100% !important;
    height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    background: #0EAC9E !important;
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
}

.order-view__actions{
    display: flex;
    justify-content: center;
    margin-top: 48px;
}

.order-view__btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    height: 52px;
    padding: 0 24px;
    box-sizing: border-box;
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.4px;
    text-decoration: none;
}

.order-view__btn--ghost{
    border: 1px solid #191919;
    background: #fff;
    color: #191919;
}

.order-view__btn--ghost:hover{
    border-color: #0EAC9E;
    color: #0EAC9E;
}

@media screen and (max-width: 1024px){
    #sod_fin.order-view,
    .order-view{
        grid-template-columns: 1fr;
        grid-template-areas:
            "no"
            "items"
            "design"
            "main"
            "summary";
        row-gap: 32px;
    }

    .order-view .fm-design-layout{
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .order-view__summary.sod_right,
    #sod_fin.order-view .order-view__summary.sod_right{
        width: 100% !important;
        max-width: 400px !important;
    }
}

@media screen and (max-width: 570px){
    .order-view__section__title,
    .order-view h2.order-view__section__title,
    .order-view h3.order-view__section__title{
        font-size: 16px !important;
    }

    .order-view__design,
    #sod_fin.order-view .order-view__design{
        padding: 16px;
    }

    .order-view .fm-files__actions{
        width: 100%;
    }

    .order-view .fm-files__actions .fm_btn{
        flex: 1 1 auto;
    }

    .order-view .fm-files__item{
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    .order-view .fm-files__name{
        flex: 1 1 calc(100% - 40px);
        white-space: normal;
    }

    .order-view .fm-files__dl-one{
        width: 100%;
    }

    .order-view__item{
        gap: 12px;
    }

    .order-view__item__thumb{
        flex-basis: 64px;
        width: 64px;
        height: 64px;
    }

    .order-view__item__thumb img{
        width: 64px;
        height: 64px;
    }

    #sod_fin.order-view .sod_left th,
    #sod_fin.order-view .order-view__panel th,
    #sod_fin.order-view .sod_left td,
    #sod_fin.order-view .order-view__panel td{
        display: block;
        width: 100% !important;
        padding: 8px 0 !important;
    }

    #sod_fin.order-view .sod_left th,
    #sod_fin.order-view .order-view__panel th{
        padding-top: 16px !important;
        border-bottom: 0 !important;
    }

    .order-view__summary.sod_right,
    #sod_fin.order-view .order-view__summary.sod_right{
        max-width: 100% !important;
    }

    .order-view #sod_bsk_tot .sod_bsk_cnt .order-view__sum__label,
    .order-view #sod_bsk_tot .sod_bsk_cnt .order-view__sum__value,
    .order-view #sod_bsk_tot .sod_bsk_cnt .order-view__sum__value strong{
        font-size: 15px !important;
    }

    .order-view__btn{
        width: 100%;
        min-width: 0;
    }
}


/* mypage.php — Figma node 1816:1598 */

.mypage__page{
    padding-bottom: 160px;
}

.mypage__wr{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: 120px;
    box-sizing: border-box;
}

.mypage__head{
    width: 100%;
    margin-bottom: 60px;
}

.mypage__title{
    margin: 0;
    width: 100%;
    font-family: "Montserrat", sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -1.2px;
    text-transform: uppercase;
    text-align: center;
    color: #191919;
}

.mypage__title--order{
    text-transform: none;
    font-family: "Pretendard", sans-serif;
    font-weight: 600;
    letter-spacing: -0.48px;
}

.mypage__body{
    display: flex;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
}

.mypage__nav{
    flex: 0 0 200px;
    width: 200px;
    min-width: 0;
}

.mypage__nav__list{
    margin: 0;
    padding: 0;
    list-style: none;
}

.mypage__nav__item + .mypage__nav__item{
    margin-top: 20px;
}

.mypage__nav__item a{
    display: inline-flex;
    align-items: center;
    font-family: "Pretendard", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.1;
    color: #707070;
    text-decoration: none;
    transition: color 0.2s ease;
}

.mypage__nav__item.is-active a{
    font-weight: 600;
    color: #191919;
}

.mypage__nav__item a:hover{
    color: #191919;
}

.mypage__content{
    display: flex;
    flex-direction: column;
    gap: 60px;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 1060px;
}

.mypage__profile{
    margin-bottom: 0;
    position: relative;
    width: 100%;
}

.mypage__profile__inner{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-height: 148px;
    padding: 40px;
    background: #fff;
    border: 1px solid #eee;
    box-sizing: border-box;
}

.mypage__profile__row{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
}

.mypage__profile__user{
    display: flex;
    flex: 0 0 auto;
    flex-shrink: 0;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    min-width: 0;
}

.mypage__profile__name{
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 4px;
    margin: 0;
    white-space: nowrap;
    line-height: 1.1;
    color: #191919;
}

.mypage__profile__name strong{
    font-family: "Pretendard", sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    color: #191919;
}

.mypage__profile__name span{
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;
    color: #191919;
}

.mypage__profile__edit{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;
    color: #707070;
    text-decoration: none;
}

.mypage__profile__edit img{
    display: block;
    flex: 0 0 auto;
}

.mypage__profile__stats{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 571px;
    margin-left: auto;
}

.mypage__profile__stat{
    display: flex;
    flex: 0 0 auto;
    flex-shrink: 0;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    min-width: 0;
    padding: 0 32px;
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
    border-left: 1px solid #eee;
}

.mypage__profile__stat__label{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;
    color: #707070;
}

.mypage__profile__stat__label img{
    display: block;
    flex: 0 0 auto;
}

.mypage__profile__stat__value{
    display: inline-flex;
    align-items: flex-end;
    gap: 4px;
    font-family: "Pretendard", sans-serif;
    line-height: 1.1;
}

.mypage__profile__stat__value em{
    font-style: normal;
    font-size: 24px;
    font-weight: 700;
    color: #191919;
}

.mypage__profile__stat__value i{
    font-style: normal;
    font-size: 16px;
    font-weight: 400;
    color: #707070;
}

.mypage__status{
    margin-bottom: 0;
}

.mypage__status__head{
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 16px;
}

.mypage__status__title{
    margin: 0;
    font-family: "Pretendard", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.1;
    color: #191919;
}

.mypage__status__desc{
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;
    color: #707070;
}

.mypage__status__board{
    border-top: 1px solid #eee;
}

.mypage__status__main{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mypage__status__item{
    position: relative;
    min-width: 0;
}

.mypage__status__item a{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    padding: 35px 16px 40px;
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
}

.mypage__status__item strong{
    font-family: "Pretendard", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.1;
    color: #191919;
}

.mypage__status__item span{
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.28px;
    color: #707070;
}

.mypage__status__item.is-step:not(:last-child)::after{
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
    width: 24px;
    height: 24px;
    background: url("../images/chevron-right.svg") center / 18px 18px no-repeat;
    pointer-events: none;
}

.mypage__status__sub{
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
    height: 58px;
    border: 1px solid #eee;
    box-sizing: border-box;
}

.mypage__status__sub li{
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.1;
    color: #191919;
}

.mypage__status__sub li + li{
    border-left: 1px solid #eee;
}

.mypage__status__sub strong{
    font-weight: 700;
}

.mypage__orders{
    display: flex;
    flex-direction: column;
}

.mypage__orders__title{
    margin: 0 0 16px;
    font-family: "Pretendard", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    color: #191919;
}

.mypage__orders__panel{
    width: 100%;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
}

.mypage__orders__thead{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.mypage__orders__th{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px 11px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
    color: #191919;
    text-align: center;
}

.mypage__orders__tbody{
    width: 100%;
}

.mypage__orders__row{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-bottom: 1px solid #eee;
}

.mypage__orders__td{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    padding: 16px;
    box-sizing: border-box;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #505050;
    text-align: center;
}

.mypage__orders__td a{
    color: #191919;
    text-decoration: none;
}

.mypage__orders__td--price,
.order-view__item-price{
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}

.mypage__orders__td--price del,
.order-view__item-price del{
    color: #999;
    font-size: 13px;
    font-weight: 400;
}

.mypage__orders__td--price strong,
.order-view__item-price strong{
    color: #191919;
    font-weight: 600;
}

.mypage__orders__td a:hover{
    text-decoration: underline;
}

.mypage__orders__empty{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 88px 16px 89px;
    box-sizing: border-box;
}

.mypage__orders__empty__icon{
    width: 80px;
    height: 80px;
    background: url("../images/icon_cart_empty.svg") center/contain no-repeat;
}

.mypage__orders__empty__text{
    margin: 0;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-transform: uppercase;
    color: #707070;
}

.mypage__orders--coupon .mypage__orders__thead,
.mypage__orders--coupon .mypage__orders__row{
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr) minmax(0, 280px);
}


.mypage__pg{
    display: flex;
    justify-content: center;
    margin-top: 80px;
}

.mypage__pg__inner{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    height: 22px;
}

.mypage__pg__arrows{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    height: 22px;
}

.mypage__pg__btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 22px;
    padding: 0;
    border: 0;
    background: none;
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 0;
}

.mypage__pg__btn.is-disabled{
    cursor: default;
    pointer-events: none;
}

.mypage__pg__icon{
    display: block;
    flex-shrink: 0;
    border: 0;
    margin: 0; 
    padding: 0;
    object-fit: contain;
}

.mypage__pg__icon--single-left,
.mypage__pg__icon--single-right{
    width: 18px;
    height: 18px;
}

.mypage__pg__icon--double-left,
.mypage__pg__icon--double-right{
    width: 12px;
    height: 10px;
}

.mypage__pg__btn.is-disabled .mypage__pg__icon{
    opacity: 0.35;
}

.mypage__pg__btn:not(.is-disabled):hover .mypage__pg__icon{
    opacity: 1;
    filter: brightness(0);
}

.mypage__pg__nums{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    height: 22px;
}

.mypage__pg__num{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 10px;
    height: 22px;
    padding: 0;
    border: 0;
    background: none;
    color: #505050;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    text-decoration: none;
}

.mypage__pg__num.is-active{
    color: #191919;
    font-weight: 600;
}

.mypage__pg__num:hover{
    color: #191919;
}

/* point.php — Figma node 1816:2113 */

.mypage__point{
    display: flex;
    flex-direction: column;
}

.mypage__point__title{
    margin: 0 0 16px;
    font-family: "Pretendard", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    color: #191919;
}

.mypage__point__panel{
    width: 100%;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
}

.mypage__point__thead,
.mypage__point__row{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mypage__point__th{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px 11px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
    color: #191919;
    text-align: center;
}

.mypage__point__tbody{
    width: 100%;
}

.mypage__point__row{
    border-bottom: 1px solid #eee;
}

.mypage__point__row:last-child{
    border-bottom: 0;
}

.mypage__point__td{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    padding: 16px;
    box-sizing: border-box;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #505050;
    text-align: center;
}

.mypage__point__row--summary .mypage__point__td{
    min-height: 88px;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #191919;
}

.mypage__point__td--content{
    word-break: break-all;
}

.mypage__point__td--amount.is-plus{
    color: #191919;
}

.mypage__point__td--amount.is-minus{
    color: #191919;
}

.mypage__point__empty{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 88px 16px 89px;
    box-sizing: border-box;
}

.mypage__point__empty__text{
    margin: 0;
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #707070;
    text-align: center;
}

.mypage__point--history .mypage__pg{
    margin-top: 80px;
}

/* 회원 정보 수정 — Figma node 1816:1328 */

/* 콘텐츠가 짧아도 푸터가 화면 하단에 붙도록 (flex sticky footer) */
body.page-bbs-member-confirm{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}
body.page-bbs-member-confirm #wrapper,
body.page-bbs-member-confirm #container,
body.page-bbs-member-confirm #container .shop-content,
body.page-bbs-member-confirm .mypage__page{
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
body.page-bbs-member-confirm #footer{
    flex-shrink: 0;
}

.mypage__content--form{
    gap: 0;
}

.mypage__form{
    width: 100%;
}

.mypage__form__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.mypage__form__title{
    margin: 0;
    font-family: "Pretendard", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.1;
    color: #191919;
}

.mypage__form__req-note{
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;
    color: #707070;
}

.mypage__form__req{
    color: #f00;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.1;
}

.mypage__form__intro{
    margin: 0 0 24px;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #505050;
    word-break: keep-all;
}

.mypage__form__body{
    display: flex;
    flex-direction: column;
    gap: 70px;
    width: 100%;
}

.mypage__form__board{
    width: 100%;
    border-top: 1px solid #eee;
    box-sizing: border-box;
}

.mypage__form__row{
    display: flex;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
}

.mypage__form__label{
    display: flex;
    align-items: center;
    flex: 0 0 150px;
    width: 150px;
    min-height: 60px;
    padding: 22px 16px;
    box-sizing: border-box;
    gap: 2px;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.35px;
    color: #191919;
}

.mypage__form__field{
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 60px;
    padding: 10px 20px;
    box-sizing: border-box;
}

.mypage__form__field-stack{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 410px;
}

.mypage__form__static{
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 410px;
    min-height: 40px;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.35px;
    color: #191919;
}

.mypage__form__input{
    width: 100%;
    max-width: 410px;
    height: 40px;
    padding: 0 15px;
    margin: 0;
    box-sizing: border-box;
    border: 1px solid #d1d1d1 !important;
    border-radius: 0;
    background: #fff;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.35px;
    color: #191919;
    outline: none;
    transition: border-color 0.2s ease;
    box-shadow: none !important;
}

.mypage__form__input:focus,
.mypage__form__input:focus-visible{
    border-color: #191919 !important;
    outline: none;
    box-shadow: none !important;
}

.mypage__form__input::placeholder{
    color: #707070;
}

.mypage__form__input.is-readonly,
.mypage__form__input[readonly]{
    background: #fff;
    color: #191919;
    border-color: #d1d1d1;
}

.mypage__form__input--zip{
    flex: 0 0 160px;
    width: 160px;
    max-width: 160px;
}

.mypage__form__input--file-name{
    flex: 0 0 300px;
    width: 300px;
    max-width: 300px;
    background: #f9f9f9;
    border-color: #e0e0e0;
    color: #707070;
}

.mypage__form__hint{
    margin: 10px 0 0;
    font-family: "Pretendard", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.1;
    color: #949494;
}

.mypage__form__btn-row{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    max-width: 410px;
}

.mypage__form__btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 100px;
    width: 100px;
    min-width: 100px;
    height: 40px;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid #191919 !important;
    background: #fff;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.35px;
    color: #191919;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    box-shadow: none !important;
}

.mypage__form__btn--dark{
    background: #191919;
    border-color: #191919;
    color: #fff;
}

.mypage__form__btn--dark:hover{
    background: #333;
    border-color: #333;
}

.mypage__form__btn--outline:hover{
    background: #f5f5f5;
}

.mypage__form__file{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.mypage__form__captcha{
    width: 100%;
}

.mypage__form__captcha .mypage__form__row{
    border-top: 1px solid #eee;
}

.mypage__form #captcha{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    max-width: 410px;
    margin: 0;
    padding: 0;
    border: 0;
}

.mypage__form #captcha legend{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.mypage__form #captcha #captcha_img{
    width: 120px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid #d1d1d1;
    border-radius: 0;
    object-fit: cover;
}

.mypage__form #captcha #captcha_key{
    width: 120px;
    height: 40px;
    margin: 0;
    padding: 0 15px;
    border: 1px solid #d1d1d1;
    border-radius: 0;
    background: #fff;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.35px;
    text-align: left;
    box-sizing: border-box;
}

.mypage__form #captcha #captcha_mp3,
.mypage__form #captcha #captcha_reload{
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid #d1d1d1;
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
    text-indent: -999px;
    box-sizing: border-box;
}

.mypage__form #captcha #captcha_mp3{
    background: #fff url('../img/captcha2.png') no-repeat 0 0;
}

.mypage__form #captcha #captcha_reload{
    background: #fff url('../img/captcha2.png') no-repeat 0 -40px;
}

.mypage__form #captcha #captcha_info{
    flex: 0 0 100%;
    margin: 0;
    font-family: "Pretendard", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.1;
    color: #949494;
    letter-spacing: 0;
}

.mypage__form__actions{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 0;
}

.mypage__form__actions .mypage__form__btn{
    flex: 0 0 326px;
    width: 326px;
    max-width: 326px;
    height: auto;
    min-height: 48px;
    padding: 16px 0;
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.4px;
}

.mypage__form__btn--cancel{
    background: #fff;
    border-color: #191919;
    color: #191919;
}

.mypage__form__btn--cancel:hover{
    background: #f5f5f5;
}

.mypage__form__btn--submit{
    background: #191919;
    border-color: #191919;
    color: #fff;
}

.mypage__form__btn--submit:hover{
    background: #333;
    border-color: #333;
}

.mypage__form__btn--submit:disabled{
    opacity: 0.6;
    cursor: not-allowed;
}

/* MY 웹하드 — Figma 1920:7788 / 1920:8085 (드래그앤드롭 영역 제외) */

.mypage__webhard{
    width: 100%;
}

.mypage__webhard__head{
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #191919;
}

.mypage__webhard__title{
    margin: 0;
    font-family: "Pretendard", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.1;
    color: #191919;
}

.mypage__webhard__count{
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;
    color: #707070;
}

.mypage__webhard__desc{
    margin: 0 0 40px;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: -0.28px;
    color: #707070;
}

.mypage__webhard__fields{
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
}

.mypage__webhard__field{
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.mypage__webhard__label{
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.35px;
    color: #191919;
}

.mypage__webhard__control{
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
    background: transparent;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.35px;
    color: #191919;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.2s ease;
    box-shadow: none !important;
}

.mypage__webhard__control::placeholder{
    color: #999;
}

.mypage__webhard__control:focus,
.mypage__webhard__control:focus-visible{
    border: 0 !important;
    outline: none !important;
    -webkit-box-shadow: inset 0 -1px 0 #191919 !important;
    box-shadow: inset 0 -1px 0 #191919 !important;
}

.mypage__webhard__textarea{
    min-height: 160px;
    resize: vertical;
}

.mypage__webhard__file-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.mypage__webhard__file-btn{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    height: 40px;
    padding: 0 16px;
    box-sizing: border-box;
    border: 1px solid #191919;
    background: #fff;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.35px;
    color: #191919;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mypage__webhard__file-btn:hover{
    background: #191919;
    color: #fff;
}

.mypage__webhard__file-input{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.mypage__webhard__attached{
    margin-top: 24px;
}

.mypage__webhard__attached__count{
    margin: 0 0 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #191919;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.1;
    color: #191919;
}

.mypage__webhard__attached__count strong{
    font-weight: 600;
    color: #707070;
}

.mypage__webhard__attached__list{
    margin: 0;
    padding: 0;
    list-style: none;
}

.mypage__webhard__attached__item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 48px;
    padding: 12px 0;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
}

.mypage__webhard__attached__name{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.35px;
    color: #191919;
}

.mypage__webhard__attached__name img{
    display: block;
    flex: 0 0 auto;
}

.mypage__webhard__attached__name span{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mypage__webhard__attached__meta{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.mypage__webhard__attached__size{
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.1;
    color: #707070;
}

.mypage__webhard__attached__remove{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.mypage__webhard__attached__remove img{
    display: block;
}

.mypage__webhard__actions{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 70px;
}

.mypage__webhard__submit{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 326px;
    max-width: 100%;
    min-height: 48px;
    padding: 16px 0;
    box-sizing: border-box;
    border: 1px solid #191919;
    background: #191919;
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.4px;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.mypage__webhard__submit:hover{
    background: #333;
    border-color: #333;
}

.mypage__webhard__submit:disabled{
    opacity: 0.55;
    cursor: wait;
}

.mypage__webhard__loading{
    position: fixed;
    z-index: 10000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.55);
    font-family: "Pretendard", sans-serif;
    font-size: 15px;
    line-height: 22px;
    text-align: center;
    color: #fff;
    cursor: wait;
}

.mypage__webhard__loading[hidden]{
    display: none !important;
}

.mypage__webhard__loading__spinner{
    display: inline-block;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 2px solid #d9d9d9;
    border-top-color: #191919;
    border-radius: 50%;
    animation: mypageWebhardLoadingSpin 0.8s linear infinite;
}

@keyframes mypageWebhardLoadingSpin{
    to{ transform: rotate(360deg); }
}

.mypage__webhard__board{
    width: 100%;
    margin-top: 80px;
    border-collapse: collapse;
    table-layout: fixed;
    box-sizing: border-box;
}

.mypage__webhard__board th,
.mypage__webhard__board td{
    padding: 14px 10px;
    box-sizing: border-box;
    border: 1px solid #eee;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    vertical-align: middle;
    text-align: center;
    word-break: keep-all;
    color: #191919;
}

.mypage__webhard__board thead th{
    background: #f7f7f7;
    color: #707070;
    font-weight: 500;
}

.mypage__webhard__board .col-no{ width: 56px; }
.mypage__webhard__board .col-subject{
    width: auto;
    text-align: left;
    overflow: visible;
    position: relative;
    z-index: 1;
}
.mypage__webhard__board .col-files{ width: 110px; }
.mypage__webhard__board .col-size{ width: 100px; }
.mypage__webhard__board .col-date{ width: 110px; }
.mypage__webhard__board .col-status{ width: 80px; }
.mypage__webhard__board .col-mng{ width: 90px; }

.mypage__webhard__board tbody tr:has(.mypage__webhard__tip.is-open){
    position: relative;
    z-index: 5;
}

.mypage__webhard__subject{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    position: relative;
    text-align: left;
}

.mypage__webhard__subject__text{
    flex: 1 1 auto;
    min-width: 0;
    color: #191919;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mypage__webhard__tip{
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    margin-left: auto;
}

.mypage__webhard__tip__btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid #0EAC9E;
    border-radius: 4px;
    background: #fff;
    font-family: "Pretendard", sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.24px;
    color: #0EAC9E;
    cursor: pointer;
    white-space: nowrap;
}

.mypage__webhard__tip__btn:hover{
    background: rgba(14, 172, 158, 0.06);
}

.mypage__webhard__tip__box{
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    left: auto;
    z-index: 30;
    width: 280px;
    max-width: min(360px, 80vw);
    padding: 0;
    box-sizing: border-box;
    border: 1px solid #191919;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    overflow: visible;
}

.mypage__webhard__tip__box::before{
    content: "";
    position: absolute;
    top: -6px;
    right: 28px;
    left: auto;
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    border-top: 1px solid #191919;
    border-left: 1px solid #191919;
    background: #fff;
    transform: rotate(45deg);
}

.mypage__webhard__tip__scroll{
    max-height: 220px;
    padding: 16px 18px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.28px;
    color: #191919;
    text-align: left;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.mypage__webhard__fcount{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.mypage__webhard__fdl{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.mypage__webhard__fdl img{
    display: block;
}

.mypage__webhard__status{
    font-weight: 500;
    color: #191919;
}

.mypage__webhard__status.is-receipt{
    color: #f07a2a;
}

.mypage__webhard__status.is-done{
    color: #0EAC9E;
}

.mypage__webhard__board__del{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    height: 28px;
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid #d1d1d1;
    background: #fff;
    font-family: "Pretendard", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.24px;
    color: #707070;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.mypage__webhard__board__del:hover{
    border-color: #191919;
    color: #191919;
}

.mypage__webhard__board__empty{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 72px 16px;
    box-sizing: border-box;
}

.mypage__webhard__board__empty__text{
    margin: 0;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #707070;
}

.mypage__webhard__form{
    width: 100%;
}

/* ============================================================ */
/* mypage 반응형 — consult / cart 톤 맞춤 */
/* ============================================================ */

@media screen and (max-width: 1440px){
    .mypage__body{
        max-width: 100%;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 1024px){
    .mypage__page{
        padding-bottom: 100px;
    }

    .mypage__wr{
        padding-top: 80px;
    }

    .mypage__head{
        margin-bottom: 40px;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .mypage__title{
        font-size: 40px;
        letter-spacing: -1px;
    }

    .mypage__body{
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
    }

    .mypage__nav{
        display: flex;
        flex: none;
        width: 100%;
        justify-content: center;
    }

    .mypage__nav__list{
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .mypage__nav__list::-webkit-scrollbar{
        display: none;
    }

    .mypage__nav__item{
        flex: 0 0 auto;
    }

    .mypage__nav__item + .mypage__nav__item{
        margin-top: 0;
        margin-left: 24px;
    }

    .mypage__nav__item a{
        font-size: 16px;
        white-space: nowrap;
        padding: 4px 0;
    }

    .mypage__content{
        flex: none;
        width: 100%;
        max-width: none;
        gap: 48px;
    }

    .mypage__profile__row{
        flex-wrap: wrap;
        gap: 28px;
    }

    .mypage__profile__stats{
        flex: 1 1 100%;
        max-width: none;
        margin-left: 0;
        justify-content: flex-start;
    }

    .mypage__profile__stat{
        flex: 1 1 0;
        padding: 0 24px;
    }

    .mypage__profile__stat:first-child{
        padding-left: 0;
        border-left: 0;
    }

    .mypage__status__item a{
        padding: 28px 12px 32px;
    }

    .mypage__orders--coupon .mypage__orders__thead,
    .mypage__orders--coupon .mypage__orders__row{
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1fr);
    }

    .mypage__pg{
        margin-top: 48px;
    }

    .mypage__pg__inner{
        gap: 24px;
    }

    .mypage__pg__nums{
        gap: 18px;
    }

    .mypage__form__body{
        gap: 48px;
    }

    .mypage__form__actions .mypage__form__btn{
        flex: 1 1 0;
        width: auto;
        max-width: 280px;
    }
}

@media screen and (max-width: 768px){
    .mypage__page{
        padding-bottom: 80px;
    }

    .mypage__wr{
        padding-top: 56px;
    }

    .mypage__head{
        margin-bottom: 32px;
        padding: 0 16px;
    }

    .mypage__title{
        font-size: 28px;
        letter-spacing: -0.7px;
    }

    .mypage__body{
        gap: 28px;
    }

    .mypage__nav__item + .mypage__nav__item{
        margin-left: 20px;
    }

    .mypage__nav__item a{
        font-size: 15px;
    }

    .mypage__content{
        gap: 40px;
    }

    .mypage__profile__inner{
        min-height: 0;
        padding: 24px 20px;
    }

    .mypage__profile__row{
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    .mypage__profile__user{
        gap: 16px;
    }

    .mypage__profile__name{
        flex-wrap: wrap;
        white-space: normal;
    }

    .mypage__profile__name strong{
        font-size: 20px;
    }

    .mypage__profile__edit{
        font-size: 14px;
    }

    .mypage__profile__stats{
        width: 100%;
    }

    .mypage__profile__stat{
        gap: 12px;
        padding: 0 16px;
    }

    .mypage__profile__stat__label{
        font-size: 13px;
    }

    .mypage__profile__stat__value em{
        font-size: 20px;
    }

    .mypage__status__head{
        flex-wrap: wrap;
        gap: 6px 8px;
        margin-bottom: 12px;
    }

    .mypage__status__title,
    .mypage__orders__title,
    .mypage__point__title,
    .mypage__form__title,
    .mypage__webhard__title{
        font-size: 18px;
        line-height: 1.2;
    }

    .mypage__status__desc{
        font-size: 13px;
    }

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

    .mypage__status__item a{
        padding: 24px 12px;
        gap: 6px;
    }

    .mypage__status__item strong{
        font-size: 18px;
    }

    .mypage__status__item.is-step:not(:last-child)::after{
        display: none;
    }

    .mypage__status__sub{
        flex-direction: column;
        height: auto;
    }

    .mypage__status__sub li{
        justify-content: space-between;
        min-height: 48px;
        padding: 14px 16px;
        box-sizing: border-box;
    }

    .mypage__status__sub li + li{
        border-left: 0;
        border-top: 1px solid #eee;
    }

    .mypage__orders__thead,
    .mypage__point__thead{
        display: none;
    }

    .mypage__orders__row,
    .mypage__orders--coupon .mypage__orders__row,
    .mypage__point__row{
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 4px 0;
        grid-template-columns: none;
    }

    .mypage__orders__td,
    .mypage__point__td{
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
        min-height: 0;
        padding: 12px 4px;
        text-align: right;
        line-height: 1.4;
    }

    .mypage__orders__td::before,
    .mypage__point__td::before{
        content: attr(data-label);
        flex: 0 0 auto;
        max-width: 42%;
        font-weight: 600;
        color: #191919;
        text-align: left;
        line-height: 1.4;
    }

    .mypage__point__row--summary .mypage__point__td{
        min-height: 0;
        font-size: 15px;
        line-height: 1.4;
    }

    .mypage__orders__empty,
    .mypage__point__empty{
        padding: 56px 16px;
    }

    .mypage__orders__empty__icon{
        width: 64px;
        height: 64px;
    }

    .mypage__pg{
        margin-top: 40px;
    }

    .mypage__pg__inner{
        gap: 16px;
        width: 100%;
        max-width: 100%;
    }

    .mypage__pg__nums{
        gap: 14px;
        flex-wrap: wrap;
    }

    .mypage__pg__num{
        font-size: 14px;
    }

    .mypage__point--history .mypage__pg{
        margin-top: 40px;
    }

    .mypage__form__head{
        align-items: flex-start;
        gap: 8px;
    }

    .mypage__form__req-note{
        font-size: 13px;
    }

    .mypage__form__req{
        font-size: 13px;
    }

    .mypage__form__body{
        gap: 40px;
    }

    .mypage__form__row{
        flex-direction: column;
        align-items: stretch;
    }

    .mypage__form__label{
        flex: none;
        width: 100%;
        min-height: 0;
        padding: 20px 4px 0;
    }

    .mypage__form__field{
        min-height: 0;
        padding: 10px 4px 16px;
    }

    .mypage__form__field-stack,
    .mypage__form__static,
    .mypage__form__input,
    .mypage__form__btn-row,
    .mypage__form #captcha{
        max-width: none;
    }

    .mypage__form__input--zip,
    .mypage__form__input--file-name{
        flex: 1 1 auto;
        width: auto;
        max-width: none;
    }

    .mypage__form__btn-row{
        flex-wrap: wrap;
    }

    .mypage__form__actions{
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .mypage__form__actions .mypage__form__btn{
        flex: none;
        width: 100%;
        max-width: none;
    }

    .mypage__webhard__title{
        font-size: 18px;
    }

    .mypage__webhard__count{
        font-size: 14px;
    }

    .mypage__webhard__desc{
        margin-bottom: 32px;
        font-size: 13px;
        line-height: 20px;
    }

    .mypage__webhard__fields{
        gap: 32px;
    }

    .mypage__webhard__textarea{
        min-height: 140px;
    }

    .mypage__webhard__board{
        margin-top: 48px;
        margin-bottom: 0;
        display: block;
        border: 0;
    }

    .mypage__webhard__board thead{
        display: none;
    }

    .mypage__webhard__board tbody,
    .mypage__webhard__board tr,
    .mypage__webhard__board td{
        display: block;
        width: 100%;
    }

    .mypage__webhard__board tr{
        padding: 8px 0;
        border-bottom: 1px solid #eee;
        box-sizing: border-box;
    }

    .mypage__webhard__board tr:last-child{
        border-bottom: 0;
    }

    .mypage__webhard__board td{
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        min-height: 0;
        padding: 10px 4px;
        border: 0;
        text-align: right;
        line-height: 1.4;
    }

    .mypage__webhard__board td::before{
        content: attr(data-label);
        flex: 0 0 auto;
        max-width: 42%;
        font-weight: 600;
        color: #191919;
        text-align: left;
        line-height: 1.4;
    }

    .mypage__webhard__board .col-no,
    .mypage__webhard__board .col-subject,
    .mypage__webhard__board .col-files,
    .mypage__webhard__board .col-size,
    .mypage__webhard__board .col-date,
    .mypage__webhard__board .col-status,
    .mypage__webhard__board .col-mng{
        width: auto;
        text-align: right;
    }

    .mypage__webhard__subject{
        justify-content: space-between;
        max-width: 100%;
        width: 58%;
    }

    .mypage__webhard__tip__box{
        right: 0;
        left: auto;
        width: min(280px, 70vw);
        max-width: 280px;
    }

    .mypage__webhard__tip__box::before{
        right: 28px;
        left: auto;
    }

    .mypage__webhard__tip__scroll{
        max-height: 180px;
    }

    .mypage__webhard__board__empty-row td{
        display: block;
        padding: 0;
    }

    .mypage__webhard__board__empty-row td::before{
        display: none;
    }

    .mypage__webhard__board__empty{
        padding: 56px 16px;
    }

    .mypage__webhard__actions{
        margin-top: 48px;
    }

    .mypage__webhard__submit{
        width: 100%;
    }
}

@media screen and (max-width: 570px){
    .mypage__page{
        padding-bottom: 64px;
    }

    .mypage__wr{
        padding-top: 40px;
    }

    .mypage__head{
        margin-bottom: 24px;
    }

    .mypage__title{
        font-size: 24px;
        letter-spacing: -0.6px;
    }

    .mypage__body{
        gap: 24px;
    }

    .mypage__nav__item + .mypage__nav__item{
        margin-left: 16px;
    }

    .mypage__nav__item a{
        font-size: 14px;
    }

    .mypage__content{
        gap: 32px;
    }

    .mypage__profile__inner{
        padding: 20px 16px;
    }

    .mypage__profile__stats{
        flex-direction: column;
        align-items: stretch;
    }

    .mypage__profile__stat{
        flex: none;
        width: 100%;
        padding: 16px 0;
        border-left: 0;
        border-top: 1px solid #eee;
    }

    .mypage__profile__stat:first-child{
        padding-top: 0;
        border-top: 0;
    }

    .mypage__status__main{
        grid-template-columns: 1fr 1fr;
    }

    .mypage__status__item a{
        padding: 20px 8px;
    }

    .mypage__status__item strong{
        font-size: 16px;
    }

    .mypage__status__item span{
        font-size: 12px;
    }

    .mypage__orders__td,
    .mypage__point__td{
        font-size: 13px;
        padding: 10px 0;
    }

    .mypage__pg__inner{
        gap: 12px;
    }

    .mypage__pg__nums{
        gap: 10px;
    }

    .mypage__form__label{
        padding-top: 16px;
        font-size: 13px;
    }

    .mypage__form__field{
        padding-bottom: 12px;
    }

    .mypage__form__btn-row .mypage__form__btn{
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }
}


/* =========================================================
   컨설팅 문의 (sub_contact.php)
   ========================================================= */

.contact__section{
    background: #fff;
    padding: 120px 20px 160px;
    box-sizing: border-box;
}

.contact__inner{
    width: 660px;
    max-width: 100%;
    margin: 0 auto;
}

/* 타이틀 */
.contact__head{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 70px;
}

.contact__title{
    margin: 0;
    font-family: "Montserrat", sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 60px;
    letter-spacing: -1.2px;
    text-transform: uppercase;
    color: #191919;
    text-align: center;
}

.contact__rule{
    width: 100%;
    height: 60px;
    border-bottom: 2px solid #191919;
}

/* 필드 목록 */
.contact__fields{
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.contact__field{
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.contact__label{
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.35px;
    color: #191919;
}

/* 공통 컨트롤 (input / select / textarea) */
.contact__control{
    width: 100%;
    box-sizing: border-box;
    border: 0;
    border-bottom: 1px solid #ddd;
    background: transparent;
    padding: 12px 0;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.35px;
    color: #191919;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    transition: border-color 0.2s ease;
}

.contact__control::placeholder{
    color: #999;
}

.contact__control:focus,
.contact__control:focus-visible{
    border: 0 !important;
    outline: none !important;
    -webkit-box-shadow: inset 0 -1px 0 #191919 !important;
    box-shadow: inset 0 -1px 0 #191919 !important;
}

/* select */
.contact__select{
    padding-right: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23191919' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 16px 16px;
    cursor: pointer;
}

.contact__select.is-placeholder{
    color: #999;
}

.contact__select option{
    color: #191919;
}

/* 날짜 필드 (jQuery UI datepicker) */
.contact__date{
    cursor: pointer;
    background: transparent;
}

/* 첨부파일 */
.contact__file{
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.contact__file__name{
    flex: 1 1 auto;
    min-width: 0;
    border-bottom: 1px solid #ddd;
    padding: 12px 0;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    line-height: 1.1;
    letter-spacing: -0.35px;
    color: #191919;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact__file__name.is-placeholder{
    color: #999;
}

.contact__file__btn{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 128px;
    height: 39px;
    box-sizing: border-box;
    border: 1px solid #191919;
    background: #fff;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.35px;
    color: #191919;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.contact__file__btn:hover{
    background: #191919;
    color: #fff;
}

.contact__file__input{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* 안내 문구 */
.contact__help{
    margin: 0;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.35px;
    color: #505050;
}

/* 문의 내용 */
.contact__textarea{
    min-height: 180px;
    resize: vertical;
}

/* 버튼 */
.contact__actions{
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 70px;
}

.contact__btn{
    flex: 1 1 0;
    max-width: 326px;
    box-sizing: border-box;
    padding: 16px 0;
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.4px;
    line-height: 1.1;
    text-align: center;
    cursor: pointer;
    border: 1px solid #191919;
    transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.contact__btn--cancel{
    background: #fff;
    color: #191919;
}

.contact__btn--cancel:hover{
    background: #f3f3f3;
}

.contact__btn--submit{
    background: #191919;
    color: #fff;
}

.contact__btn--submit:hover{
    opacity: 0.85;
}

.contact__btn--submit:disabled{
    opacity: 0.5;
    cursor: default;
}

/* 결과 메시지 */
.contact__result{
    margin: 20px 0 0;
    text-align: center;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    letter-spacing: -0.35px;
    min-height: 20px;
}

.contact__result.is-sending{ color: #505050; }
.contact__result.is-ok{ color: #191919; font-weight: 600; }
.contact__result.is-fail{ color: #e53935; font-weight: 600; }

/* 반응형 */
@media (max-width: 768px){
    .contact__section{
        padding: 64px 20px 100px;
    }
    .contact__head{
        margin-bottom: 48px;
    }
    .contact__title{
        font-size: 34px;
        line-height: 44px;
        letter-spacing: -0.85px;
    }
    .contact__rule{
        height: 40px;
    }
    .contact__fields{
        gap: 36px;
    }
    .contact__actions{
        margin-top: 48px;
    }
}

@media (max-width: 570px){
    .contact__title{
        font-size: 28px;
        line-height: 36px;
    }
    .contact__file__btn{
        width: 100px;
    }
    .contact__btn{
        font-size: 15px;
        padding: 14px 0;
    }
}