우종완

TBHSHOP

마인드브릿지, 가을 잡화

<div id="mb-autumn-accessories-mo-wrap">
    <div class="mba-mo-hero">
        <div class="mba-mo-text">
            <p class="mba-mo-brand">MIND BRIDGE</p>
            <h2 class="mba-mo-title">가을의 소품</h2>
            <p class="mba-mo-description">가을의 분위기를 더하는 소품</p>
        </div>

        <img class="mba-mo-main-img" src="https://tbhimg.com/images/gw/01/260914_mb/mo_main_img.jpg" alt="마인드브릿지 가을 소품 악세서리 컬렉션">
    </div>
</div>

<style>
    #mb-autumn-accessories-mo-wrap {
        /* =========================================
           ★★★★★ 여기만 수정하세요 ★★★★★
           크기·간격 숫자는 720px 시안 기준입니다.
           실제 모바일 너비에 맞춰 자동 축소됩니다.
        ========================================= */

        --mba-mo-top: 50;             /* 텍스트 위 여백 */
        --mba-mo-side: 20;            /* 텍스트 좌우 안전 여백 */
        --mba-mo-text-bottom: 40;     /* 설명 문구 아래 여백 */
        --mba-mo-gap: 14;             /* 텍스트 사이 간격 */
        --mba-mo-bottom: 50;          /* 이미지 아래 여백 */

        --mba-mo-brand-size: 24;      /* 브랜드명 크기 */
        --mba-mo-brand-weight: 400;   /* 브랜드명 굵기 */
        --mba-mo-brand-line: 29;      /* 브랜드명 줄 높이 */
        --mba-mo-brand-spacing: -0.02em; /* 브랜드명 자간 */
        --mba-mo-brand-color: #000000;   /* 브랜드명 색상 */

        --mba-mo-title-size: 64;      /* 타이틀 크기 */
        --mba-mo-title-weight: 600;   /* 타이틀 굵기 */
        --mba-mo-title-line: 76;      /* 타이틀 줄 높이 */
        --mba-mo-title-spacing: -0.04em; /* 타이틀 자간 */
        --mba-mo-title-color: #370b02;   /* 타이틀 색상 */

        --mba-mo-desc-size: 26;       /* 설명 문구 크기 */
        --mba-mo-desc-weight: 400;    /* 설명 문구 굵기 */
        --mba-mo-desc-line: 30;       /* 설명 문구 줄 높이 */
        --mba-mo-desc-spacing: -0.04em; /* 설명 문구 자간 */
        --mba-mo-desc-color: #000000;   /* 설명 문구 색상 */

        --mba-mo-enter-distance: 12;  /* 타이틀 등장 이동 거리 */
        --mba-mo-enter-duration: 0.85s; /* 타이틀 등장 시간 */
        --mba-mo-background: #ffffff;  /* 배경색 */

        width: 100%;
        max-width: 720px;
        margin: 0 auto;
        background: var(--mba-mo-background);
        font-family: 'Pretendard', sans-serif;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* 초기화는 기획전 내부에만 적용 */
    #mb-autumn-accessories-mo-wrap,
    #mb-autumn-accessories-mo-wrap * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    #mb-autumn-accessories-mo-wrap {
        margin: 0 auto;
    }

    #mb-autumn-accessories-mo-wrap .mba-mo-hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding-bottom: min(
            calc(var(--mba-mo-bottom) * 1px),
            calc(var(--mba-mo-bottom) / 7.2 * 1vw)
        );
    }

    #mb-autumn-accessories-mo-wrap .mba-mo-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        gap: min(
            calc(var(--mba-mo-gap) * 1px),
            calc(var(--mba-mo-gap) / 7.2 * 1vw)
        );
        padding:
            min(
                calc(var(--mba-mo-top) * 1px),
                calc(var(--mba-mo-top) / 7.2 * 1vw)
            )
            min(
                calc(var(--mba-mo-side) * 1px),
                calc(var(--mba-mo-side) / 7.2 * 1vw)
            )
            min(
                calc(var(--mba-mo-text-bottom) * 1px),
                calc(var(--mba-mo-text-bottom) / 7.2 * 1vw)
            );
        text-align: center;
    }

    #mb-autumn-accessories-mo-wrap .mba-mo-brand {
        width: 100%;
        font-size: min(
            calc(var(--mba-mo-brand-size) * 1px),
            calc(var(--mba-mo-brand-size) / 7.2 * 1vw)
        );
        font-weight: var(--mba-mo-brand-weight);
        line-height: min(
            calc(var(--mba-mo-brand-line) * 1px),
            calc(var(--mba-mo-brand-line) / 7.2 * 1vw)
        );
        letter-spacing: var(--mba-mo-brand-spacing);
        color: var(--mba-mo-brand-color);
        overflow-wrap: anywhere;
    }

    #mb-autumn-accessories-mo-wrap .mba-mo-title {
        width: 100%;
        font-size: min(
            calc(var(--mba-mo-title-size) * 1px),
            calc(var(--mba-mo-title-size) / 7.2 * 1vw)
        );
        font-weight: var(--mba-mo-title-weight);
        line-height: min(
            calc(var(--mba-mo-title-line) * 1px),
            calc(var(--mba-mo-title-line) / 7.2 * 1vw)
        );
        letter-spacing: var(--mba-mo-title-spacing);
        color: var(--mba-mo-title-color);
        overflow-wrap: anywhere;

        /* 애니메이션이 실행되지 않아도 타이틀 노출 */
        opacity: 1;
        transform: none;
        animation: mba-mo-title-enter
            var(--mba-mo-enter-duration)
            cubic-bezier(0.22, 1, 0.36, 1) 1;
    }

    #mb-autumn-accessories-mo-wrap .mba-mo-description {
        width: 100%;
        font-size: min(
            calc(var(--mba-mo-desc-size) * 1px),
            calc(var(--mba-mo-desc-size) / 7.2 * 1vw)
        );
        font-weight: var(--mba-mo-desc-weight);
        line-height: min(
            calc(var(--mba-mo-desc-line) * 1px),
            calc(var(--mba-mo-desc-line) / 7.2 * 1vw)
        );
        letter-spacing: var(--mba-mo-desc-spacing);
        color: var(--mba-mo-desc-color);
        overflow-wrap: anywhere;
    }

    #mb-autumn-accessories-mo-wrap .mba-mo-main-img {
        display: block;
        width: 100%;
        height: auto;
        border: 0;
    }

    @keyframes mba-mo-title-enter {
        from {
            opacity: 0.35;
            transform: translateY(
                min(
                    calc(var(--mba-mo-enter-distance) * 1px),
                    calc(var(--mba-mo-enter-distance) / 7.2 * 1vw)
                )
            );
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* 움직임 줄이기 설정 시 등장 효과 해제 */
    @media (prefers-reduced-motion: reduce) {
        #mb-autumn-accessories-mo-wrap .mba-mo-title {
            animation: none;
            opacity: 1;
            transform: none;
        }
    }
</style>

가을의 소품

<div id="mb-autumn-accessories-pc-wrap">
    <div class="mba-pc-hero">
        <div class="mba-pc-text">
            <p class="mba-pc-brand">MIND BRIDGE</p>
            <h2 class="mba-pc-title">가을의 소품</h2>
            <p class="mba-pc-description">가을의 분위기를 더하는 소품</p>
        </div>

        <div class="mba-pc-image">
            
            <img class="mba-pc-main-img" src="https://tbhimg.com/images/gw/01/260914_mb/pc_main_img.jpg" alt="마인드브릿지 가을 소품 악세서리 컬렉션">
        </div>
    </div>
</div>

<style>
    /* 이 기획전 내부에만 초기화 적용 */
    #mb-autumn-accessories-pc-wrap,
    #mb-autumn-accessories-pc-wrap * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    #mb-autumn-accessories-pc-wrap {
        width: 100%;
        max-width: 1400px; /* PC 디자인 기준 최대 너비 */
        margin: 0 auto;
        background: #ffffff;
        font-family: 'Pretendard', sans-serif;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    #mb-autumn-accessories-pc-wrap .mba-pc-hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding-bottom: 50px; /* 이미지 아래 여백 */
    }

    #mb-autumn-accessories-pc-wrap .mba-pc-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px; /* 텍스트 사이 간격 */
        width: 100%;
        padding: 20px 20px 40px; /* 위 / 좌우 / 아래 여백 */
        background: #ffffff;
        text-align: center;
    }

    #mb-autumn-accessories-pc-wrap .mba-pc-brand {
        width: 100%;
        font-size: 24px; /* 브랜드명 크기 */
        font-weight: 400; /* 글자 굵기 */
        line-height: 29px; /* 줄 간격 */
        letter-spacing: -0.02em; /* 자간 */
        color: #000000; /* 브랜드명 색상 */
    }

    #mb-autumn-accessories-pc-wrap .mba-pc-title {
        width: 100%;
        font-size: 64px; /* 타이틀 크기 */
        font-weight: 600; /* 글자 굵기 */
        line-height: 76px; /* 줄 간격 */
        letter-spacing: -0.04em; /* 자간 */
        color: #370b02; /* 타이틀 색상 */

        /* 효과가 꺼져도 타이틀은 정상 노출 */
        opacity: 1;
        transform: none;
        animation: mba-pc-title-enter 0.85s cubic-bezier(0.22, 1, 0.36, 1) 1;
        /* 0.85s: 등장 속도 / 1: 한 번만 실행 */
    }

    #mb-autumn-accessories-pc-wrap .mba-pc-description {
        width: 100%;
        font-size: 26px; /* 설명 문구 크기 */
        font-weight: 400; /* 글자 굵기 */
        line-height: 30px; /* 줄 간격 */
        letter-spacing: -0.04em; /* 자간 */
        color: #000000; /* 설명 문구 색상 */
    }

    #mb-autumn-accessories-pc-wrap .mba-pc-image {
        width: 100%;
        overflow: hidden; /* 확대된 이미지 부분만 프레임 안으로 제한 */
    }

    #mb-autumn-accessories-pc-wrap .mba-pc-main-img {
        display: block;
        width: 100%;
        height: auto;
        border: 0;
        transform: scale(1);
        transform-origin: center center; /* 이미지 확대 기준점 */
        transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
        /* 1.2s: 이미지 확대·복귀 속도 */
    }

    /* 마우스 사용 환경에서만 이미지 확대 */
    @media (hover: hover) and (pointer: fine) {
        #mb-autumn-accessories-pc-wrap .mba-pc-image:hover .mba-pc-main-img {
            transform: scale(1.025); /* 확대 배율: 1.025 = 2.5% 확대 */
        }
    }

    @keyframes mba-pc-title-enter {
        from {
            opacity: 0.35;
            transform: translateY(12px); /* 타이틀 등장 이동 거리 */
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* 기기에서 움직임 줄이기를 설정한 경우 효과 해제 */
    @media (prefers-reduced-motion: reduce) {
        #mb-autumn-accessories-pc-wrap .mba-pc-title {
            animation: none;
        }

        #mb-autumn-accessories-pc-wrap .mba-pc-main-img {
            transition: none;
            transform: none;
        }

        #mb-autumn-accessories-pc-wrap .mba-pc-image:hover .mba-pc-main-img {
            transform: none;
        }
    }
</style>