@charset "utf-8";

@import url("https://fonts.googleapis.com/css2?family=Hahmlet:wght@100..900&display=swap");

/* =========================================================
   BOLD DINER
   FIGMA MAIN : 1920 × 6402
========================================================= */


html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
}

#boldDiner,
#boldDiner * {
    box-sizing: border-box;
}

#boldDiner {
    width: 100%;
    overflow: hidden;
    background: var(--bd-navy);
    color: #fff;
}

#boldDiner img {
    display: block;
}

#boldDiner button,
#boldDiner a {
    font: inherit;
}


/* =========================================================
   01. HERO

   - 원본 기준 1920×1080
   - 현재 브라우저 화면 높이에 맞춰 전체가 한 화면 안에 들어오도록 구성
========================================================= */

#boldDiner .bd-hero {
    position: relative;

    width: 100%;
    height: calc(100svh - var(--bold-brandbar-height, 0px));
    min-height: 700px;
    max-height: 1080px;

    overflow: hidden;

    background: var(--bd-cream);
}

/* 주소 */
#boldDiner .bd-address-row {
    position: absolute;

    top: 8.5%;
    left: 7.84%;

    display: flex;
    justify-content: space-between;

    width: 84.43%;

    font-family: var(--bd-serif);
    font-size: clamp(12px, 1.46vw, 28px);
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -.05em;

    color: var(--bd-orange);
}

#boldDiner .bd-address-row p {
    width: 297px;
    max-width: 18.35%;
    margin: 0;
}


/*
   FIGMA title = 1250 × 627
   화면이 낮으면 폭도 같이 줄어들게 해서
   DINER까지 화면 안에 모두 노출.
*/
#boldDiner .bd-logo-stage {
    position: absolute !important;

    left: 50% !important;
    top: 26.66% !important;

    width:
        min(
            65.104vw,
            calc(
                (
                    100svh -
                    var(--bold-brandbar-height, 0px) -
                    225px
                ) * 1.99362
            )
        ) !important;

    max-width: 1250px !important;

    aspect-ratio: 1250 / 627 !important;

    height: auto !important;

    transform: translateX(-50%) !important;

    overflow: visible !important;
}

/* BOLD row = 1250 × 323.76 */
#boldDiner .bd-bold-stage {
    position: absolute !important;
    inset: 0 auto auto 0 !important;

    display: block !important;

    width: 100% !important;
    height: 51.637% !important;
}

#boldDiner .bd-letter {
    position: absolute !important;
    top: 0 !important;

    display: block !important;

    height: 100% !important;

    object-fit: contain !important;
    object-position: center bottom !important;

    opacity: 0;

    transform: translate3d(0,-42%,0);

    will-change: transform, opacity;
}

/* FIGMA 실제 vector x / width */
#boldDiner .bd-letter-b {
    left: 0 !important;
    width: 22.865% !important;
}

#boldDiner .bd-letter-o {
    left: 25.209% !important;
    width: 24.373% !important;
}

#boldDiner .bd-letter-l {
    left: 51.925% !important;
    width: 22.865% !important;
}

#boldDiner .bd-letter-d {
    left: 77.134% !important;
    width: 22.866% !important;
}

#boldDiner .bd-letter.is-in {
    animation:
        bdLetterDrop
        .78s
        cubic-bezier(.18,.88,.24,1.12)
        forwards;
}

#boldDiner .bd-letter-o.is-in {
    animation-delay: .12s;
}

#boldDiner .bd-letter-l.is-in {
    animation-delay: .24s;
}

#boldDiner .bd-letter-d.is-in {
    animation-delay: .36s;
}

/* DINER = y343.77 / h283.25 */
#boldDiner .bd-diner-logo {
    position: absolute !important;

    left: 0 !important;
    top: 54.828% !important;

    display: block !important;

    width: 100% !important;
    height: 45.175% !important;

    object-fit: contain !important;
    object-position: center top !important;

    opacity: 0;

    transform:
        translate3d(0,12%,0)
        scale(.97);

    will-change: transform, opacity;
}

#boldDiner .bd-diner-logo.is-in {
    animation:
        bdDinerIn
        .72s
        .68s
        cubic-bezier(.2,.88,.25,1.08)
        forwards;
}

@keyframes bdLetterDrop {
    0% {
        opacity: 0;
        transform: translate3d(0,-42%,0);
    }

    74% {
        opacity: 1;
        transform: translate3d(0,3%,0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0,0,0);
    }
}

@keyframes bdDinerIn {
    to {
        opacity: 1;
        transform: translate3d(0,0,0) scale(1);
    }
}

#boldDiner .bd-hero-loop {
    position: absolute;
    left: 0;
    bottom: 0;

    height:
        min(
            6.72%,
            72.57px
        );
}


/* =========================================================
   02. ROLLING BANNER

   이미지 자체를 사용.
   위/아래 중심을 정확히 맞춤.
========================================================= */

#boldDiner .bd-banner-slider {
    position: relative;

    width: 100%;

    aspect-ratio: 1919.41 / 709.386;

    overflow: hidden;

    background: var(--bd-navy);
}

#boldDiner .bd-banner-track {
    display: flex;

    width: 100%;
    height: 100%;

    transform: translate3d(0,0,0);

    transition:
        transform
        .85s
        cubic-bezier(.22,1,.36,1);

    will-change: transform;
}

#boldDiner .bd-banner-slide {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 100%;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: var(--bd-navy);
}

#boldDiner .bd-banner-slide img {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0 auto;

    object-fit: cover;
    object-position: 50% 50%;
}


/* =========================================================
   03. EVERYDAY
========================================================= */

#boldDiner .bd-everyday {
    position: relative;

    width: 100%;

    aspect-ratio: 1920 / 2645.979;

    margin-top: -5.47vw;

    overflow: hidden;

    background: var(--bd-navy);
}

#boldDiner .bd-everyday-loop {
    position: absolute;

    top: 3.97%;
    left: 0;

    height: 2.743%;
}

/* FIGMA title 980.22 × 244.98 */
#boldDiner .bd-everyday-title {
    position: absolute;

    top: 13.668%;
    left: 24.808%;

    width: 51.053%;
    height: 9.259%;
}

#boldDiner .bd-everyday-copy {
    position: absolute;

    top: 0;
    left: 15.9%;

    width: 68.2%;

    text-align: center;
}

#boldDiner .bd-everyday-copy h2 {
    margin: 0;

    font-family: var(--bd-serif);
    font-size: clamp(46px, 5.208vw, 100px);
    line-height: 1.19;
    font-weight: 700;
    letter-spacing: -.05em;

    color: #fff;
}

#boldDiner .bd-everyday-copy p {
    margin: 3% 0 0;

    font-family: var(--bd-serif);
    font-size: clamp(18px, 2.083vw, 40px);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.05em;

    color: #fff;
}

#boldDiner .bd-everyday-icon {
    position: absolute;

    top: 16.77%;

    width: 11.061%;
    height: 66.082%;

    object-fit: contain;
}

#boldDiner .bd-everyday-icon-left {
    left: 0;
}

#boldDiner .bd-everyday-icon-right {
    right: 0;
}

/* PHOTO */
#boldDiner .bd-store-img {
    position: absolute;
    overflow: hidden;
}

#boldDiner .bd-store-img img {
    width: 100%;
    height: 100%;

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

#boldDiner .bd-store-main {
    top: 27.081%;
    left: 0;

    width: 100%;
    height: 40.835%;
}

#boldDiner .bd-store-left {
    top: 67.915%;
    left: -3.192%;

    width: 53.527%;
    height: 21.858%;
}

#boldDiner .bd-store-right {
    top: 67.915%;
    left: 50%;

    width: 53.527%;
    height: 21.858%;
}

/* RESERVATION */
#boldDiner .bd-reservation {
    position: absolute;

    top: 93.562%;
    left: 50%;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    width: 246px;
    height: 70px;

    transform: translateX(-50%);

    border-radius: 333px;

    background: var(--bd-orange);
    color: #fff;

    font-family: var(--bd-serif);
    font-size: 32px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.05em;

    text-decoration: none;
}

#boldDiner .bd-reservation b {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    border: 1px solid currentColor;
    border-radius: 50%;

    font-size: 18px;
    font-weight: 400;
}


/* =========================================================
   TABS LOOP
========================================================= */

#boldDiner .bd-tabs-loop {
    position: relative;

    width: 100%;
    height: min(3.78vw,72.57px);

    background-color: var(--bd-orange);
}


/* =========================================================
   04. TABS CLOSED
========================================================= */

#boldDiner .bd-tabs {
    width: 100%;
}

#boldDiner .bd-tab {
    width: 100%;
    color: #fff;
}

#boldDiner .bd-tab-orange {
    background: var(--bd-orange);
}

#boldDiner .bd-tab-navy {
    background: var(--bd-navy);
}

/* FIGMA 각 탭 = 1920×500 */
#boldDiner .bd-tab-head {
    position: relative;

    display: block;

    width: 100%;
    height: min(26.042vw,500px);
    min-height: 270px;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;
    color: inherit;

    cursor: pointer;
}

/* title */
#boldDiner .bd-tab-title {
    position: absolute;

    top: 22.48%;
    left: 50%;

    display: block;

    width: 700px;
    max-width: 44%;

    transform: translateX(-50%);

    font-family: var(--bd-serif);
    font-size: clamp(48px,5.208vw,100px);
    line-height: 1.19;
    font-weight: 700;
    letter-spacing: -.05em;

    text-align: center;
}

/*
   line + more 영역을 별도 구조로 분리.
   LINE은 more 직전까지만.
*/
#boldDiner .bd-tab-bottom {
    position: absolute;

    top: 72.5%;
    left: 20.788%;

    display: flex;
    align-items: center;

    width: 58.7%;
    height: 63px;
}

#boldDiner .bd-tab-line {
    flex: 1 1 auto;

    height: 1px;

    margin-right: 42px;

    background: currentColor;

    opacity: .9;
}

#boldDiner .bd-tab-more {
    position: relative;

    display: inline-flex;
    align-items: center;

    flex: 0 0 auto;

    gap: 12px;

    padding: 0 0 0 4px;

    font-family: var(--bd-serif);
    font-size: clamp(14px,1.563vw,30px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.05em;

    white-space: nowrap;
}

#boldDiner .bd-tab-more b {
    display: inline-block;

    font-size: 1.35em;
    line-height: .8;

    font-weight: 400;
}

/* 닫혀 있을 때 내부 완전 제거 */
#boldDiner .bd-tab-panel {
    display: none !important;
}

#boldDiner .bd-tab.is-open > .bd-tab-head {
    display: none !important;
}

#boldDiner .bd-tab.is-open > .bd-tab-panel {
    display: block !important;
}


/* =========================================================
   OPEN PANEL
========================================================= */

#boldDiner .bd-panel {
    position: relative;

    min-height: 1800px;

    padding: 220px 7.15% 130px;

    overflow: hidden;
}

#boldDiner .bd-panel-heading {
    position: relative;

    width: 58.5%;

    margin: 0 auto 105px;

    text-align: center;
}

#boldDiner .bd-panel-heading h2 {
    margin: 0;

    font-family: var(--bd-serif);
    font-size: clamp(48px,5.208vw,100px);
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -.05em;
}

/* SUB COPY = Sandoll Nunsol */
#boldDiner .bd-panel-heading p {
    margin: 52px auto 0;

    max-width: 1080px;

    font-family: var(--bd-serif);
    font-size: clamp(17px,1.563vw,30px);
    line-height: 1.65;
    font-weight: 700;
    letter-spacing: -.05em;
}

#boldDiner .bd-panel-heading::after {
    content: "";

    display: block;

    width: 100%;
    height: 1px;

    margin-top: 52px;

    background: currentColor;
}

#boldDiner .bd-panel-close {
    position: absolute;

    right: 0;
    bottom: -5px;

    padding: 8px 0;

    border: 0;

    background: inherit;
    color: currentColor;

    font-family: var(--bd-serif);
    font-size: 18px;
    font-weight: 700;

    cursor: pointer;
}


/* =========================================================
   VISIT
========================================================= */

#boldDiner .bd-visit-panel {
    min-height: 1700px;
}

#boldDiner .bd-visit-layout {
    display: grid;

    grid-template-columns: .8fr 1.2fr;

    gap: 70px;

    width: 86%;

    margin: 0 auto;
}

#boldDiner .bd-visit-info > div {
    display: grid;

    grid-template-columns: 145px 1fr;

    gap: 24px;

    padding: 24px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.45);
}

#boldDiner .bd-visit-info strong,
#boldDiner .bd-visit-info span {
    font-family: var(--bd-serif);
}

#boldDiner .bd-visit-info strong {
    font-size: 13px;
}

#boldDiner .bd-visit-info span {
    font-size: 16px;
    line-height: 1.55;
}



/* =========================================================
   BOLD DINER — FINAL CLEAN
   2026-08-19
   누적 patch 정리본
========================================================= */

:root {
    --bd-orange: #f16c00;
    --bd-navy: #12284b;
    --bd-cream: #fff0e5;
    --bd-white: #fff;

    --bd-checker-cell: clamp(10px, 1.55vw, 30px);
    --bd-checker-band: calc(var(--bd-checker-cell) * 2);

    --bd-serif:
        "Hahmlet",
        "Noto Serif KR",
        serif;
}


/* =========================================================
   01. CHECKER BAND
   이미지 제거 / seamless SVG tile
========================================================= */

#boldDiner .bd-loop {
    position: relative;

    width: 100%;
    height: var(--bd-checker-band) !important;

    overflow: hidden;

    background-image: none !important;

    animation: none !important;

    isolation: isolate;
}

#boldDiner .bd-loop-orange {
    background-color: var(--bd-cream) !important;
}

#boldDiner .bd-loop-white {
    background-color: var(--bd-navy) !important;
}

#boldDiner .bd-tabs-loop,
#boldDiner .bd-loop::before {
    content: "";

    position: absolute;

    inset:
        0
        auto
        0
        calc(var(--bd-checker-band) * -2);

    width:
        calc(
            100%
            +
            var(--bd-checker-band) * 4
        );

    pointer-events: none;

    background-repeat: repeat;
    background-position: 0 0;

    background-size:
        var(--bd-checker-band)
        var(--bd-checker-band);

    will-change: transform;

    animation:
        bdCheckerFlow
        2.15s
        linear
        infinite;
}

#boldDiner .bd-loop-orange::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='32' height='32' fill='%23F16C00'/%3E%3Crect x='32' y='32' width='32' height='32' fill='%23F16C00'/%3E%3C/svg%3E");
}

#boldDiner .bd-loop-white::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='32' height='32' fill='%23FFFFFF'/%3E%3Crect x='32' y='32' width='32' height='32' fill='%23FFFFFF'/%3E%3C/svg%3E");
}

@keyframes bdCheckerFlow {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform:
            translate3d(
                calc(var(--bd-checker-band) * -1),
                0,
                0
            );
    }
}


/* Hero checker는 반드시 맨 아래 */
#boldDiner .bd-hero-loop {
    position: absolute !important;

    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    z-index: 8;

    margin: 0 !important;
}


/* =========================================================
   02. HERO
========================================================= */

#boldDiner .bd-hero {
    position: relative;

    min-height: 700px;

    overflow: hidden;
}


/* 주소 작게 */
#boldDiner .bd-address-row {
    top: 10.6% !important;
    left: 6.5% !important;

    width: 87% !important;

    color: var(--bd-orange);

    font-family: var(--bd-serif) !important;
    font-size: clamp(11px, 1.02vw, 19px) !important;
    line-height: 1.16 !important;
    font-weight: 700 !important;
    letter-spacing: -.04em !important;

    --bd-pointer-x: 0px;
    --bd-pointer-y: 0px;

    transform:
        translate3d(
            var(--bd-pointer-x),
            var(--bd-pointer-y),
            0
        );
}

#boldDiner .bd-address-row p {
    width: 235px !important;
    max-width: 18% !important;

    opacity: 0;

    transform: translate3d(0, -13px, 0);

    animation:
        bdAddressIn
        .62s
        cubic-bezier(.22, 1, .36, 1)
        forwards;
}

#boldDiner .bd-address-row p:nth-child(1) {
    animation-delay: .08s;
}

#boldDiner .bd-address-row p:nth-child(2) {
    animation-delay: .16s;
}

#boldDiner .bd-address-row p:nth-child(3) {
    animation-delay: .24s;
}

@keyframes bdAddressIn {
    to {
        opacity: 1;

        transform: translate3d(0, 0, 0);
    }
}


/* Logo / checker 간 안전거리 */
#boldDiner .bd-logo-stage {
    top: 25.7% !important;
    left: 50% !important;

    width:
        min(
            58vw,
            1110px,
            calc(
                (
                    100svh
                    -
                    var(--bold-brandbar-height, 49px)
                    -
                    300px
                ) * 1.99362
            )
        ) !important;

    max-width: 1110px !important;
    height: auto !important;

    aspect-ratio: 1250 / 627 !important;

    color: var(--bd-orange);

    --bd-pointer-x: 0px;
    --bd-pointer-y: 0px;

    transform:
        translateX(-50%)
        translate3d(
            var(--bd-pointer-x),
            var(--bd-pointer-y),
            0
        ) !important;

    overflow: visible !important;
}

#boldDiner .bd-letter,
#boldDiner .bd-diner-logo {
    overflow: visible !important;

    shape-rendering: geometricPrecision;
    text-rendering: geometricPrecision;
}


/* =========================================================
   03. ROLLING BANNER
========================================================= */

#boldDiner .bd-banner-slider {
    position: relative;

    width: 100%;

    aspect-ratio: 1919.41 / 709.386;

    margin: 0;

    overflow: hidden;

    background: var(--bd-navy);
}

#boldDiner .bd-banner-track {
    display: flex;

    width: 100%;
    height: 100%;

    transition:
        transform
        .56s
        cubic-bezier(.22, 1, .36, 1) !important;

    will-change: transform;
}

#boldDiner .bd-banner-slide {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 100%;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;
}

#boldDiner .bd-banner-slide img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: 50% 50%;

    transform: scale(1.025);

    transition:
        transform
        3s
        linear;
}

#boldDiner .bd-banner-slide.is-active img {
    transform: scale(1);
}


/* =========================================================
   04. EVERYDAY WINE
========================================================= */

#boldDiner .bd-everyday {
    position: relative !important;

    display: grid !important;
    grid-template-columns: 1fr 1fr !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    /* 기존 Figma 고정 비율 때문에 1905px 화면에서
       섹션이 약 2625px까지 늘어나던 문제 제거 */
    aspect-ratio: auto !important;

    margin: 0 !important;

    padding:
        0
        0
        clamp(70px, 5.31vw, 102px) !important;

    overflow: hidden !important;

    background: var(--bd-navy) !important;

    isolation: isolate;
}


#boldDiner .bd-everyday-loop {
    position: relative !important;

    top: auto !important;
    left: auto !important;

    grid-column: 1 / -1;

    z-index: 4;

    width: 100%;

    margin: 0;
}


/* Figma title group */
#boldDiner .bd-everyday-title {
    position: relative !important;

    top: auto !important;
    left: auto !important;

    grid-column: 1 / -1;

    display: block !important;

    z-index: 2;

    width:
        min(
            980.22px,
            78vw
        ) !important;

    height: auto !important;

    aspect-ratio: auto !important;

    height:
        clamp(
            260px,
            14.6vw,
            288px
        ) !important;

    margin:
        clamp(78px, 4.6vw, 96px)
        auto
        0 !important;

    padding: 0 !important;
}

#boldDiner .bd-everyday-icon {
    position: absolute !important;

    top: 16.766% !important;

    width: 11.061% !important;
    height: 66.082% !important;

    overflow: visible !important;

    shape-rendering: crispEdges;
}

#boldDiner .bd-everyday-icon-left {
    left: 0 !important;
    right: auto !important;
}

#boldDiner .bd-everyday-icon-right {
    left: 88.939% !important;
    right: auto !important;
}

#boldDiner .bd-everyday-copy {
    position: absolute !important;

    top: 0 !important;
    left: 15.903% !important;

    display: block !important;

    width: 67.536% !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;
}

#boldDiner .bd-everyday-copy h2 {
    width: 100% !important;

    margin: 0 !important;

    font-family: var(--bd-serif) !important;
    font-size: clamp(56px, 4.85vw, 93px) !important;
    line-height: 1.08 !important;
    font-weight: 700 !important;
    letter-spacing: -.045em !important;

    white-space: nowrap !important;
}

#boldDiner .bd-everyday-copy p {
    width: 100% !important;

    margin:
        clamp(22px, 1.35vw, 26px)
        0
        0 !important;

    font-family: var(--bd-serif) !important;
    font-size: clamp(20px, 1.8vw, 34px) !important;
    line-height: 1.24 !important;
    font-weight: 700 !important;
    letter-spacing: -.04em !important;

    word-break: keep-all !important;
    white-space: nowrap !important;
}


/* Main store image */
#boldDiner .bd-store-main {
    position: relative !important;

    top: auto !important;
    left: auto !important;

    grid-column: 1 / -1;

    z-index: 2;

    width: 100% !important;
    height: auto !important;

    aspect-ratio:
        1920 / 1080.481 !important;

    margin-top:
        clamp(70px, 5.72vw, 110px) !important;

    overflow: hidden !important;
}


/* Bottom images */
#boldDiner .bd-store-left,
#boldDiner .bd-store-right {
    position: relative !important;

    top: auto !important;
    left: auto !important;

    z-index: 2;

    width: 107.054% !important;
    height: auto !important;

    aspect-ratio:
        1027.72 / 578.35 !important;

    overflow: hidden !important;

    background: var(--bd-navy);
}

#boldDiner .bd-store-left {
    justify-self: start;

    transform:
        translateX(-5.963%) !important;
}

#boldDiner .bd-store-right {
    justify-self: start;

    transform: none !important;
}

#boldDiner .bd-store-main img,
#boldDiner .bd-store-left img,
#boldDiner .bd-store-right img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    color: transparent !important;

    font-size: 0 !important;

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


/* Reservation */
#boldDiner .bd-reservation {
    position: relative !important;

    top: auto !important;
    left: auto !important;

    grid-column: 1 / -1;
    justify-self: center;

    z-index: 2;

    width: 246px;
    height: 70px;

    margin:
        clamp(65px, 5.208vw, 100px)
        auto
        0 !important;

    transform: none !important;

    font-family: var(--bd-serif) !important;
}


/* =========================================================
   05. CLOSED TABS
========================================================= */

#boldDiner .bd-tabs {
    position: relative;
}

#boldDiner .bd-tabs-loop {
    position: relative !important;

    z-index: 6;
}

#boldDiner .bd-tab-head {
    position: relative;

    height:
        min(
            26.042vw,
            500px
        ) !important;

    min-height: 320px !important;

    overflow: hidden;
}


/* title */
#boldDiner .bd-tab-title {
    position: absolute !important;

    top: 47% !important;
    left: 50% !important;

    z-index: 2;

    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width:
        min(
            820px,
            62%
        ) !important;

    min-height: 180px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform:
        translate(
            -50%,
            -50%
        ) !important;

    font-family: var(--bd-serif) !important;
    font-size: clamp(50px, 4.7vw, 90px) !important;
    line-height: 1.08 !important;
    font-weight: 700 !important;
    letter-spacing: -.045em !important;

    text-align: center;

    white-space: normal !important;

    word-break: keep-all !important;
}

#boldDiner .bd-tab-title-line {
    display: block;

    width: 100%;

    white-space: nowrap !important;
}


/* line / more */
#boldDiner .bd-tab-bottom {
    position: absolute !important;

    top: auto !important;
    bottom: 52px !important;
    left: 20.788% !important;

    z-index: 2;

    display: block !important;

    width: 58.485% !important;
    height: 64px !important;
}

#boldDiner .bd-tab-line {
    position: absolute !important;

    top: 20px !important;
    left: 0 !important;
    right: 170px !important;

    width: auto !important;
    height: 1px !important;

    margin: 0 !important;

    background: currentColor !important;

    opacity: .95;
}

#boldDiner .bd-tab-more {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;

    display: flex !important;
    align-items: center;
    justify-content: flex-end;

    width: 140px !important;
    height: 54px !important;

    gap: 10px;

    padding: 0 !important;

    font-family: var(--bd-serif) !important;
    font-size: clamp(16px, 1.45vw, 28px) !important;
    line-height: 1 !important;
    font-weight: 700 !important;

    white-space: nowrap;
}

#boldDiner .bd-tab-panel {
    display: none !important;
}

#boldDiner .bd-tab.is-open > .bd-tab-head {
    display: none !important;
}

#boldDiner .bd-tab.is-open > .bd-tab-panel {
    display: block !important;
}


/* =========================================================
   06. OPEN PANEL TYPOGRAPHY
========================================================= */

#boldDiner .bd-panel-heading h2,
#boldDiner .bd-panel-heading p,
#boldDiner .bd-panel-close,
#boldDiner .bd-wine-heading h2,
#boldDiner .bd-wine-heading p,
#boldDiner .bd-visit-panel,
#boldDiner .bd-visit-panel *,
#boldDiner .bd-visit-info strong,
#boldDiner .bd-visit-info span {
    font-family: var(--bd-serif) !important;
}


/* =========================================================
   07. INTERACTION
   JS가 작동할 때만 hidden 상태 사용
========================================================= */

#boldDiner.bd-motion-ready .bd-banner-slider,
#boldDiner.bd-motion-ready .bd-everyday-title,
#boldDiner.bd-motion-ready .bd-store-main,
#boldDiner.bd-motion-ready .bd-store-left,
#boldDiner.bd-motion-ready .bd-store-right,
#boldDiner.bd-motion-ready .bd-reservation,
#boldDiner.bd-motion-ready .bd-tab {
    opacity: 0;
}


/* banner */
#boldDiner.bd-motion-ready .bd-banner-slider {
    transform:
        translate3d(
            0,
            36px,
            0
        )
        scale(.994);

    transition:
        opacity .58s ease,
        transform .72s
            cubic-bezier(.22, 1, .36, 1);
}

#boldDiner.bd-motion-ready .bd-banner-slider.is-visible {
    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        )
        scale(1);
}


/* Everyday title */
#boldDiner.bd-motion-ready .bd-everyday-title {
    transform:
        translate3d(
            0,
            50px,
            0
        )
        scale(.97);

    filter: blur(3px);

    transition:
        opacity .62s ease,
        transform .78s
            cubic-bezier(.22, 1, .36, 1),
        filter .6s ease;
}

#boldDiner.bd-motion-ready .bd-everyday-title.is-visible {
    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        )
        scale(1);

    filter: blur(0);
}

#boldDiner.bd-motion-ready .bd-everyday-title .bd-everyday-icon {
    opacity: 0;

    transform: scale(.8);

    transition:
        opacity .36s ease,
        transform .5s
            cubic-bezier(.18, 1.25, .3, 1);
}

#boldDiner.bd-motion-ready .bd-everyday-title.is-visible .bd-everyday-icon {
    opacity: 1;

    transform: scale(1);
}

#boldDiner.bd-motion-ready .bd-everyday-title.is-visible .bd-everyday-icon-left {
    transition-delay: .1s;
}

#boldDiner.bd-motion-ready .bd-everyday-title.is-visible .bd-everyday-icon-right {
    transition-delay: .18s;
}


/* Main photo */
#boldDiner.bd-motion-ready .bd-store-main {
    clip-path:
        inset(
            0
            6%
            0
            6%
        );

    transform:
        translate3d(
            0,
            45px,
            0
        )
        scale(1.025);

    transition:
        opacity .55s ease,
        clip-path .8s
            cubic-bezier(.22, 1, .36, 1),
        transform .82s
            cubic-bezier(.22, 1, .36, 1);
}

#boldDiner.bd-motion-ready .bd-store-main.is-visible {
    opacity: 1;

    clip-path:
        inset(
            0
            0
            0
            0
        );

    transform:
        translate3d(
            0,
            0,
            0
        )
        scale(1);
}


/* Bottom images */
#boldDiner.bd-motion-ready .bd-store-left {
    transform:
        translate3d(
            -55px,
            22px,
            0
        )
        scale(.985) !important;

    transition:
        opacity .55s ease,
        transform .72s
            cubic-bezier(.22, 1, .36, 1);
}

#boldDiner.bd-motion-ready .bd-store-left.is-visible {
    opacity: 1;

    transform:
        translate3d(
            -5.963%,
            0,
            0
        )
        scale(1) !important;
}

#boldDiner.bd-motion-ready .bd-store-right {
    transform:
        translate3d(
            55px,
            22px,
            0
        )
        scale(.985) !important;

    transition:
        opacity .55s ease,
        transform .72s
            cubic-bezier(.22, 1, .36, 1);
}

#boldDiner.bd-motion-ready .bd-store-right.is-visible {
    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        )
        scale(1) !important;
}


/* Reservation */
#boldDiner.bd-motion-ready .bd-reservation {
    transform:
        translate3d(
            0,
            20px,
            0
        )
        scale(.92) !important;

    transition:
        opacity .42s ease,
        transform .55s
            cubic-bezier(.18, 1.35, .3, 1);
}

#boldDiner.bd-motion-ready .bd-reservation.is-visible {
    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        )
        scale(1) !important;
}

#boldDiner .bd-reservation b {
    transition: transform .22s ease;
}

#boldDiner .bd-reservation:hover b {
    transform: translateX(4px);
}


/* tabs */
#boldDiner.bd-motion-ready .bd-tab {
    transform:
        translate3d(
            0,
            38px,
            0
        );

    transition:
        opacity .5s ease,
        transform .68s
            cubic-bezier(.22, 1, .36, 1);
}

#boldDiner.bd-motion-ready .bd-tab.is-visible,
#boldDiner.bd-motion-ready .bd-tab.is-open {
    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );
}


/* line reveal */
#boldDiner .bd-tab-line {
    transform: scaleX(0);

    transform-origin: left center;

    transition:
        transform
        .65s
        .08s
        cubic-bezier(.22, 1, .36, 1);
}

#boldDiner .bd-tab.is-visible .bd-tab-line,
#boldDiner .bd-tab-head:hover .bd-tab-line {
    transform: scaleX(1);
}


/* tab hover */
#boldDiner .bd-tab-title {
    transition:
        transform .25s ease;
}

#boldDiner .bd-tab-head:hover .bd-tab-title {
    transform:
        translate(
            -50%,
            calc(-50% - 4px)
        ) !important;
}

#boldDiner .bd-tab-more b {
    transition: transform .22s ease;
}

#boldDiner .bd-tab-head:hover .bd-tab-more b {
    transform: translateY(3px);
}


/* open content */
#boldDiner .bd-tab.is-open .bd-panel-heading,
#boldDiner .bd-tab.is-open .bd-wine-heading {
    animation:
        bdPanelHeadingIn
        .55s
        cubic-bezier(.22, 1, .36, 1)
        both;
}

#boldDiner .bd-tab.is-open .bd-concept-collage,
#boldDiner .bd-tab.is-open .bd-vibe-collage,
#boldDiner .bd-tab.is-open .bd-poster-collage,
#boldDiner .bd-tab.is-open .bd-visit-layout {
    animation:
        bdPanelContentIn
        .68s
        .06s
        cubic-bezier(.22, 1, .36, 1)
        both;
}

#boldDiner .bd-tab.is-open .bd-concept-collage img,
#boldDiner .bd-tab.is-open .bd-vibe-collage img,
#boldDiner .bd-tab.is-open .bd-poster-collage img,
#boldDiner .bd-tab.is-open .bd-visit-images img {
    opacity: 0;

    transform:
        translate3d(
            0,
            28px,
            0
        )
        scale(.985);

    animation:
        bdPanelImageIn
        .55s
        cubic-bezier(.22, 1, .36, 1)
        forwards;
}

#boldDiner .bd-tab.is-open img:nth-child(1) {
    animation-delay: .04s;
}

#boldDiner .bd-tab.is-open img:nth-child(2) {
    animation-delay: .09s;
}

#boldDiner .bd-tab.is-open img:nth-child(3) {
    animation-delay: .14s;
}

#boldDiner .bd-tab.is-open img:nth-child(4) {
    animation-delay: .19s;
}

#boldDiner .bd-tab.is-open img:nth-child(5) {
    animation-delay: .24s;
}

#boldDiner .bd-tab.is-open img:nth-child(6) {
    animation-delay: .29s;
}

@keyframes bdPanelHeadingIn {
    from {
        opacity: 0;

        transform: translate3d(0, 25px, 0);
    }

    to {
        opacity: 1;

        transform: translate3d(0, 0, 0);
    }
}

@keyframes bdPanelContentIn {
    from {
        opacity: 0;

        transform:
            translate3d(
                0,
                42px,
                0
            )
            scale(.99);
    }

    to {
        opacity: 1;

        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1);
    }
}

@keyframes bdPanelImageIn {
    to {
        opacity: 1;

        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1);
    }
}


/* image hover */
@media (hover: hover) and (pointer: fine) {

    #boldDiner .bd-store-main img,
    #boldDiner .bd-store-left img,
    #boldDiner .bd-store-right img {
        transition:
            transform
            .55s
            cubic-bezier(.22, 1, .36, 1),
            filter .4s ease;
    }

    #boldDiner .bd-store-main:hover img,
    #boldDiner .bd-store-left:hover img,
    #boldDiner .bd-store-right:hover img {
        transform: scale(1.025);

        filter:
            saturate(1.04)
            contrast(1.015);
    }

}


/* =========================================================
   09. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    #boldDiner .bd-loop::before,
    #boldDiner .bd-address-row p,
    #boldDiner .bd-tab.is-open .bd-panel-heading,
    #boldDiner .bd-tab.is-open .bd-wine-heading,
    #boldDiner .bd-tab.is-open .bd-concept-collage,
    #boldDiner .bd-tab.is-open .bd-vibe-collage,
    #boldDiner .bd-tab.is-open .bd-poster-collage,
    #boldDiner .bd-tab.is-open .bd-visit-layout,
    #boldDiner .bd-tab.is-open img {
        animation: none !important;
    }

    #boldDiner .bd-address-row p,
    #boldDiner.bd-motion-ready .bd-banner-slider,
    #boldDiner.bd-motion-ready .bd-everyday-title,
    #boldDiner.bd-motion-ready .bd-everyday-title .bd-everyday-icon,
    #boldDiner.bd-motion-ready .bd-store-main,
    #boldDiner.bd-motion-ready .bd-store-left,
    #boldDiner.bd-motion-ready .bd-store-right,
    #boldDiner.bd-motion-ready .bd-reservation,
    #boldDiner.bd-motion-ready .bd-tab,
    #boldDiner .bd-tab.is-open img {
        opacity: 1 !important;

        clip-path: none !important;

        transform: none !important;

        transition: none !important;
    }

    #boldDiner .bd-logo-stage {
        transform:
            translateX(-50%) !important;
    }

}

/* =========================================================
   CLEAN V2 FINAL DETAIL
========================================================= */


/* 01~04 숫자 / 대형 background word 완전 제거 */
#boldDiner .bd-tab-head::before,
#boldDiner .bd-everyday::before,
#boldDiner .bd-everyday::after {
    content: none !important;

    display: none !important;
}


/* =========================================================
   STORE PHOTO
   메인 → 하단 2장 사이 완전 밀착
========================================================= */

#boldDiner .bd-store-main,
#boldDiner .bd-store-left,
#boldDiner .bd-store-right {
    line-height: 0 !important;

    margin-bottom: 0 !important;

    border: 0 !important;
}

#boldDiner .bd-store-main {
    margin-bottom: -2px !important;
}

#boldDiner .bd-store-left,
#boldDiner .bd-store-right {
    margin-top:
        clamp(
            -20px,
            -1.05vw,
            -8px
        ) !important;
}

#boldDiner .bd-store-main img,
#boldDiner .bd-store-left img,
#boldDiner .bd-store-right img {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
}


/* =========================================================
   RESERVATION CTA
   큰 PPT식 pill 제거 / editorial link style
========================================================= */

#boldDiner .bd-reservation {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 16px !important;

    width: auto !important;
    height: auto !important;

    min-width: 0 !important;

    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    color: #fff !important;

    font-family: var(--bd-serif) !important;
    font-size: clamp(18px, 1.35vw, 26px) !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: -.04em !important;

    text-decoration: none !important;
}

#boldDiner .bd-reservation span {
    position: relative;

    display: inline-block;

    padding: 0 0 8px;
}

#boldDiner .bd-reservation span::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 1px;

    background:
        rgba(
            255,
            255,
            255,
            .72
        );

    transform-origin: left center;

    transition:
        transform .32s
        cubic-bezier(.22, 1, .36, 1);
}

#boldDiner .bd-reservation b {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 44px !important;
    height: 44px !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: var(--bd-orange) !important;
    color: #fff !important;

    font-family:
        Arial,
        sans-serif !important;

    font-size: 17px !important;
    line-height: 1 !important;
    font-weight: 400 !important;

    transition:
        transform .3s
        cubic-bezier(.22, 1, .36, 1),
        background-color .25s ease;
}

#boldDiner .bd-reservation:hover span::after {
    transform: scaleX(.45);
}

#boldDiner .bd-reservation:hover b {
    transform:
        translateX(5px)
        rotate(-12deg);
}


/* =========================================================
   WINE POSTER OPEN MOTION
   12개 포스터 순차 등장
========================================================= */

#boldDiner .bd-tab.is-open .bd-poster:nth-child(1) {
    animation-delay: .04s !important;
}

#boldDiner .bd-tab.is-open .bd-poster:nth-child(2) {
    animation-delay: .08s !important;
}

#boldDiner .bd-tab.is-open .bd-poster:nth-child(3) {
    animation-delay: .12s !important;
}

#boldDiner .bd-tab.is-open .bd-poster:nth-child(4) {
    animation-delay: .16s !important;
}

#boldDiner .bd-tab.is-open .bd-poster:nth-child(5) {
    animation-delay: .20s !important;
}

#boldDiner .bd-tab.is-open .bd-poster:nth-child(6) {
    animation-delay: .24s !important;
}

#boldDiner .bd-tab.is-open .bd-poster:nth-child(7) {
    animation-delay: .28s !important;
}

#boldDiner .bd-tab.is-open .bd-poster:nth-child(8) {
    animation-delay: .32s !important;
}

#boldDiner .bd-tab.is-open .bd-poster:nth-child(9) {
    animation-delay: .36s !important;
}

#boldDiner .bd-tab.is-open .bd-poster:nth-child(10) {
    animation-delay: .40s !important;
}

#boldDiner .bd-tab.is-open .bd-poster:nth-child(11) {
    animation-delay: .44s !important;
}

#boldDiner .bd-tab.is-open .bd-poster:nth-child(12) {
    animation-delay: .48s !important;
}


/* =========================================================
   TYPOGRAPHY CLEAN V3
   Google Fonts — Hahmlet
   Sandoll Nunsol 대체
========================================================= */

/*
   Hahmlet:
   100–900 Variable Weight
   한글 + 영문 공통 적용
*/
#boldDiner {
    font-family: var(--bd-serif) !important;
    font-optical-sizing: auto;
}

#boldDiner button,
#boldDiner a,
#boldDiner input,
#boldDiner textarea,
#boldDiner select {
    font-family: var(--bd-serif) !important;
}


/* ---------------------------------------------------------
   HERO ADDRESS
--------------------------------------------------------- */

#boldDiner .bd-address-row {
    font-family: var(--bd-serif) !important;

    font-weight: 500 !important;
    letter-spacing: -.045em !important;
}


/* ---------------------------------------------------------
   EVERYDAY WINE
--------------------------------------------------------- */

/* 큰 영문 타이틀 */
#boldDiner .bd-everyday-copy h2 {
    font-family: var(--bd-serif) !important;

    font-weight: 500 !important;
    letter-spacing: -.055em !important;
}

/* 한글 서브카피 */
#boldDiner .bd-everyday-copy p {
    font-family: var(--bd-serif) !important;

    font-weight: 450 !important;
    letter-spacing: -.04em !important;
}


/* ---------------------------------------------------------
   CLOSED TAB TITLE
--------------------------------------------------------- */

#boldDiner .bd-tab-title {
    font-family: var(--bd-serif) !important;

    font-weight: 500 !important;
    letter-spacing: -.055em !important;
}


/* more */
#boldDiner .bd-tab-more {
    font-family: var(--bd-serif) !important;

    font-weight: 600 !important;
    letter-spacing: -.035em !important;
}


/* ---------------------------------------------------------
   OPEN PANEL
--------------------------------------------------------- */

/* Not an ordinary / Screen Sound / Visit Us */
#boldDiner .bd-panel-heading h2 {
    font-family: var(--bd-serif) !important;

    font-weight: 500 !important;
    letter-spacing: -.055em !important;
}

/* 설명 문장 */
#boldDiner .bd-panel-heading p {
    font-family: var(--bd-serif) !important;

    font-weight: 400 !important;
    letter-spacing: -.035em !important;
}


/* close */
#boldDiner .bd-panel-close {
    font-family: var(--bd-serif) !important;

    font-weight: 600 !important;
    letter-spacing: -.035em !important;
}


/* ---------------------------------------------------------
   WINE & FOOD OPEN
--------------------------------------------------------- */

/* ---------------------------------------------------------
   VISIT US
   캡처에서 가장 티 나던 부분
--------------------------------------------------------- */

#boldDiner .bd-visit-panel,
#boldDiner .bd-visit-layout,
#boldDiner .bd-visit-info {
    font-family: var(--bd-serif) !important;
}


/* ADDRESS / PARKING / TAKE OUT / ... */
#boldDiner .bd-visit-info strong {
    font-family: var(--bd-serif) !important;

    font-weight: 700 !important;

    letter-spacing: -.025em !important;
}


/* 오른쪽 한글 설명 */
#boldDiner .bd-visit-info span {
    font-family: var(--bd-serif) !important;

    font-weight: 400 !important;

    line-height: 1.62 !important;
    letter-spacing: -.035em !important;
}


/* ---------------------------------------------------------
   RESERVATION CTA
--------------------------------------------------------- */

#boldDiner .bd-reservation {
    font-family: var(--bd-serif) !important;

    font-weight: 600 !important;
    letter-spacing: -.04em !important;
}

#boldDiner .bd-reservation span {
    font-family: var(--bd-serif) !important;

    font-weight: 600 !important;
}


/* =========================================================
   NOT AN ORDINARY WINE BAR
   DENSE IMAGE MOSAIC — NO EMPTY SPACE
========================================================= */

/*
   12 column / 10 row mosaic

   MAIN        : col 1–7  / row 1–6
   RIGHT TOP   : col 8–12 / row 1–3
   RIGHT BOTTOM: col 8–12 / row 4–6
   BOTTOM A    : col 1–4  / row 7–10
   BOTTOM B    : col 5–8  / row 7–10
   BOTTOM C    : col 9–12 / row 7–10

   모든 셀이 이미지로 채워지므로
   오렌지색 빈칸이 생기지 않는다.
*/

#boldDiner .bd-concept-collage {
    display: grid !important;

    grid-template-columns:
        repeat(
            12,
            minmax(0, 1fr)
        ) !important;

    grid-template-rows:
        repeat(
            10,
            minmax(0, 1fr)
        ) !important;

    gap: 0 !important;

    width: 100% !important;

    height:
        clamp(
            860px,
            74vw,
            1420px
        ) !important;

    margin:
        clamp(
            55px,
            5vw,
            96px
        )
        0
        0 !important;

    padding: 0 !important;

    overflow: hidden !important;

    background: var(--bd-orange) !important;
}


/* RESET */
#boldDiner .bd-concept-item {
    position: relative !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #0d203e;
}


/* MAIN */
#boldDiner .bd-concept-item--main {
    grid-column: 1 / 8 !important;
    grid-row: 1 / 7 !important;
}


/* RIGHT TOP */
#boldDiner .bd-concept-item--right-top {
    grid-column: 8 / 13 !important;
    grid-row: 1 / 4 !important;
}


/* RIGHT BOTTOM */
#boldDiner .bd-concept-item--right-bottom {
    grid-column: 8 / 13 !important;
    grid-row: 4 / 7 !important;
}


/* BOTTOM */
#boldDiner .bd-concept-item--bottom-a {
    grid-column: 1 / 5 !important;
    grid-row: 7 / 11 !important;
}

#boldDiner .bd-concept-item--bottom-b {
    grid-column: 5 / 9 !important;
    grid-row: 7 / 11 !important;
}

#boldDiner .bd-concept-item--bottom-c {
    grid-column: 9 / 13 !important;
    grid-row: 7 / 11 !important;
}


/* IMG */
#boldDiner .bd-concept-item img,
#boldDiner .bd-concept-collage img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    object-fit: cover !important;
    object-position: center !important;

    transform: scale(1.003);

    transition:
        transform .58s
        cubic-bezier(.22,1,.36,1),
        filter .4s ease;
}


/* Main image crop */
#boldDiner .bd-concept-item--main img {
    object-position: 50% 50% !important;
}

#boldDiner .bd-concept-item--right-top img {
    object-position: 50% 48% !important;
}

#boldDiner .bd-concept-item--right-bottom img {
    object-position: 50% 52% !important;
}


/* 기존 nth-child grid 배치 완전 무효화 */
#boldDiner .bd-concept-collage img:nth-child(1),
#boldDiner .bd-concept-collage img:nth-child(4),
#boldDiner .bd-concept-collage img:nth-child(5) {
    grid-column: auto !important;
    grid-row: auto !important;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    #boldDiner .bd-tab.is-open .bd-concept-item {
        opacity: 1 !important;

        transform: none !important;

        animation: none !important;
    }

}

/* =========================================================
   SCREEN, SOUND & GOOD VIBE
   DENSE MOSAIC — MATCH CONCEPT SECTION
========================================================= */

/*
   NOT AN ORDINARY 섹션과 동일한 밀도/구조로 통일.

   MAIN        : col 1–7  / row 1–6
   RIGHT TOP   : col 8–12 / row 1–3
   RIGHT BOTTOM: col 8–12 / row 4–6
   BOTTOM A    : col 1–4  / row 7–10
   BOTTOM B    : col 5–8  / row 7–10
   BOTTOM C    : col 9–12 / row 7–10

   gap = 0
*/

#boldDiner .bd-vibe-collage {
    display: grid !important;

    grid-template-columns:
        repeat(
            12,
            minmax(0, 1fr)
        ) !important;

    grid-template-rows:
        repeat(
            10,
            minmax(0, 1fr)
        ) !important;

    gap: 0 !important;

    width: 100% !important;

    height:
        clamp(
            860px,
            74vw,
            1420px
        ) !important;

    margin:
        clamp(
            55px,
            5vw,
            96px
        )
        0
        0 !important;

    padding: 0 !important;

    overflow: hidden !important;

    background: var(--bd-navy) !important;
}


/* ---------------------------------------------------------
   RESET
--------------------------------------------------------- */

#boldDiner .bd-vibe-item {
    position: relative !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #0d203e !important;

    outline: 1px solid transparent;
}


/* ---------------------------------------------------------
   MAIN SCREEN
--------------------------------------------------------- */

#boldDiner .bd-vibe-item--screen {
    grid-column: 1 / 8 !important;
    grid-row: 1 / 7 !important;
}


/* ---------------------------------------------------------
   RIGHT TOP
--------------------------------------------------------- */

#boldDiner .bd-vibe-item--media {
    grid-column: 8 / 13 !important;
    grid-row: 1 / 4 !important;
}


/* ---------------------------------------------------------
   RIGHT BOTTOM
--------------------------------------------------------- */

#boldDiner .bd-vibe-item--art {
    grid-column: 8 / 13 !important;
    grid-row: 4 / 7 !important;
}


/* ---------------------------------------------------------
   BOTTOM THREE
--------------------------------------------------------- */

#boldDiner .bd-vibe-item--mood-a {
    grid-column: 1 / 5 !important;
    grid-row: 7 / 11 !important;
}

#boldDiner .bd-vibe-item--mood-b {
    grid-column: 5 / 9 !important;
    grid-row: 7 / 11 !important;
}

#boldDiner .bd-vibe-item--mood-c {
    grid-column: 9 / 13 !important;
    grid-row: 7 / 11 !important;
}


/* ---------------------------------------------------------
   IMAGE
--------------------------------------------------------- */

#boldDiner .bd-vibe-item img,
#boldDiner .bd-vibe-collage img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    object-fit: cover !important;
    object-position: center !important;

    transform: scale(1.003);

    transition:
        transform .58s
        cubic-bezier(.22,1,.36,1),
        filter .4s ease;
}


/* 메인 스크린은 화면이 최대한 잘 보이게 */
#boldDiner .bd-vibe-item--screen img {
    object-position: 50% 50% !important;
}

#boldDiner .bd-vibe-item--media img {
    object-position: 50% 48% !important;
}

#boldDiner .bd-vibe-item--art img {
    object-position: 50% 52% !important;
}


/* 기존 grid 규칙 완전 무효화 */
#boldDiner .bd-vibe-collage img:first-child {
    grid-column: auto !important;
    grid-row: auto !important;
}


/* =========================================================
   VISIT US — STORE + MAP
   기존 하단 사진 2장 제거 / 지도 등록
========================================================= */

#boldDiner .bd-visit-panel {
    min-height: 0 !important;

    padding-bottom:
        clamp(
            90px,
            8vw,
            155px
        ) !important;
}


#boldDiner .bd-visit-layout {
    display: grid !important;

    grid-template-columns:
        minmax(320px, .78fr)
        minmax(0, 1.22fr) !important;

    align-items: start !important;

    gap:
        clamp(
            48px,
            5vw,
            96px
        ) !important;

    width: 86% !important;

    margin:
        0
        auto !important;
}


/* =========================================================
   RIGHT MEDIA
========================================================= */

#boldDiner .bd-visit-media {
    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 0 !important;

    width: 100% !important;

    overflow: hidden !important;

    background: #0d203e;
}


/* STORE */
#boldDiner .bd-visit-store {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 8.8;

    overflow: hidden;

    background: var(--bd-navy);
}

#boldDiner .bd-visit-store img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

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


/* MAP */
#boldDiner .bd-visit-map {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 8.2;

    overflow: hidden;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .3
        );

    background: #ece8df;
}

#boldDiner .bd-visit-map iframe {
    display: block;

    width: 100% !important;
    height: 100% !important;

    margin: 0;
    padding: 0;

    border: 0;
}


/* =========================================================
   VISIT US — NAVER RESERVATION CTA
========================================================= */

#boldDiner .bd-visit-booking {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;

    margin:
        clamp(
            42px,
            4vw,
            76px
        )
        0
        0 !important;

    padding:
        clamp(
            18px,
            1.45vw,
            28px
        )
        2px !important;

    border-top:
        1px solid
        rgba(255, 255, 255, .52) !important;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .52) !important;

    color: #fff !important;
    background: transparent !important;

    text-decoration: none !important;

    transition:
        border-color .28s ease,
        padding-left .32s cubic-bezier(.22,1,.36,1),
        padding-right .32s cubic-bezier(.22,1,.36,1);
}


#boldDiner .bd-visit-booking-copy {
    display: flex;
    flex-direction: column;

    gap: 8px;

    min-width: 0;
}


#boldDiner .bd-visit-booking-copy small {
    display: block;

    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            .58
        );

    font-family: var(--bd-serif) !important;
    font-size: clamp(10px, .68vw, 13px);
    line-height: 1;
    font-weight: 600;
    letter-spacing: .08em;
}


#boldDiner .bd-visit-booking-copy strong {
    display: block;

    margin: 0;

    color: #fff;

    font-family: var(--bd-serif) !important;
    font-size: clamp(22px, 1.65vw, 32px);
    line-height: 1.15;
    font-weight: 600 !important;
    letter-spacing: -.045em;
}


/* arrow */
#boldDiner .bd-visit-booking > b {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: clamp(42px, 2.7vw, 52px);
    height: clamp(42px, 2.7vw, 52px);

    margin-left: 20px;

    border-radius: 50%;

    background: var(--bd-orange);
    color: #fff;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: clamp(17px, 1.1vw, 21px);
    line-height: 1;
    font-weight: 400;

    transition:
        transform .34s
        cubic-bezier(.22,1,.36,1),
        background-color .25s ease;
}


@media (hover:hover) and (pointer:fine) {

    #boldDiner .bd-visit-booking:hover {
        padding-left: 10px !important;
        padding-right: 8px !important;

        border-color: #fff !important;
    }

    #boldDiner .bd-visit-booking:hover > b {
        transform:
            translateX(5px)
            rotate(-10deg);
    }

}


/* =========================================================
   WINE & FOOD — FINAL SINGLE SOURCE
   Screen, Sound & Good Vibe 헤더와 구조/간격 통일
========================================================= */

/*
   오래된 HTML에 장식 SVG / loop가 남아 있어도
   화면에서는 무조건 제거.
*/
#boldDiner .bd-wine-panel > .bd-loop,
#boldDiner .bd-wine-loop,
#boldDiner .bd-wine-heading svg,
#boldDiner .bd-wine-deco,
#boldDiner .bd-wine-deco-left,
#boldDiner .bd-wine-deco-right {
    display: none !important;
}


/* ---------------------------------------------------------
   PANEL
   .bd-panel 상단/하단 간격과 동일
--------------------------------------------------------- */

#boldDiner .bd-wine-panel {
    position: relative;

    width: 100%;
    min-height: 0;

    padding:
        220px
        0
        130px;

    overflow: hidden;

    background: var(--bd-orange);
    color: #fff;

    font-feature-settings: "kern" 1;
}


/* ---------------------------------------------------------
   HEADER
   .bd-panel-heading의 최종 computed 값과 동일
--------------------------------------------------------- */

#boldDiner .bd-wine-heading {
    position: relative;

    z-index: 12;

    width: 58.5%;

    margin:
        0
        auto
        105px;

    text-align: center;
}

#boldDiner .bd-wine-heading-copy {
    display: contents;
}

#boldDiner .bd-wine-heading h2 {
    margin: 0;

    font-family: var(--bd-serif);
    font-size: clamp(48px, 5.208vw, 100px);
    line-height: 1.18;
    font-weight: 500;
    letter-spacing: -.055em;

    color: inherit;
}

#boldDiner .bd-wine-heading p {
    max-width: 1080px;

    margin:
        52px
        auto
        0;

    font-family: var(--bd-serif);
    font-size: clamp(17px, 1.563vw, 30px);
    line-height: 1.65;
    font-weight: 400;
    letter-spacing: -.035em;

    color: inherit;

    word-break: keep-all;
}

#boldDiner .bd-wine-heading::after {
    content: "";

    display: block;

    width: 100%;
    height: 1px;

    margin-top: 52px;

    background: currentColor;
}

#boldDiner .bd-wine-close {
    position: absolute;

    right: 0;
    bottom: -5px;

    z-index: 5;

    padding: 8px 0;

    border: 0;

    background: transparent;
    color: currentColor;

    font-family: var(--bd-serif);
    font-size: 18px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -.035em;

    cursor: pointer;
}


/* ---------------------------------------------------------
   POSTER GRID
   - 겹침 없는 2열 배열
   - 원본 비율 유지
   - 12개 포스터를 위에서 아래로 자연스럽게 나열
--------------------------------------------------------- */

#boldDiner .bd-poster-collage {
    position: relative;

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

    align-items: start;

    column-gap:
        clamp(
            24px,
            2.1vw,
            40px
        );

    row-gap:
        clamp(
            34px,
            2.8vw,
            54px
        );

    width:
        min(
            1500px,
            calc(100% - 96px)
        );

    height: auto;
    aspect-ratio: auto;

    margin:
        0
        auto;

    padding: 0;

    overflow: visible;

    pointer-events: auto;
}


#boldDiner .bd-poster {
    position: relative;

    top: auto;
    right: auto;
    bottom: auto;
    left: auto;

    z-index: 1;

    display: block;

    width: 100%;
    max-width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    align-self: start;

    border: 0;

    object-fit: contain;
    object-position: center top;

    background: transparent;

    pointer-events: auto;

    box-shadow: none;

    animation-fill-mode: both;
}


/*
   서로 다른 세로 비율의 포스터라도
   각 이미지 원본 비율 그대로 표시.
*/
#boldDiner .bd-poster-collage > .bd-poster {
    min-width: 0;
}


/* ---------------------------------------------------------
   POSTER HOVER
--------------------------------------------------------- */


@media (hover: hover) and (pointer: fine) {

    #boldDiner .bd-poster {
        transition:
            transform .42s
            cubic-bezier(.22, 1, .36, 1),
            filter .35s ease;
    }

    #boldDiner .bd-poster:hover {
        transform:
            translate3d(0, -5px, 0)
            scale(1.008);

        filter:
            saturate(1.025)
            contrast(1.01);
    }

}


/* =========================================================
   BOLD DINER — POLISH & INTERACTION V14
   레이아웃/컬러 유지, 기존 요소 자체에 깊이와 움직임만 추가
========================================================= */

#boldDiner {
    --bd-ease-out:
        cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   01. CLOSED TAB — AMBIENT DEPTH
========================================================= */

#boldDiner .bd-tab-head {
    --bd-hover-x: 50%;
    --bd-hover-y: 50%;
    --bd-title-x: 0px;
    --bd-title-y: 0px;
    --bd-title-scale: 1;

    isolation: isolate;

    transition:
        background-color .45s ease;
}


/*
   예전에 숫자 오브제로 사용했던 ::before는 제거된 상태.
   이제 숫자가 아니라 pointer spotlight 전용으로 재사용.
*/
#boldDiner .bd-tab-head::before {
    content: "" !important;

    position: absolute !important;

    inset: 0 !important;

    z-index: 0 !important;

    display: block !important;

    pointer-events: none !important;

    background:
        radial-gradient(
            circle 420px
            at var(--bd-hover-x) var(--bd-hover-y),
            rgba(255,255,255,.085) 0%,
            rgba(255,255,255,.035) 28%,
            rgba(255,255,255,0) 72%
        ) !important;

    opacity: .35 !important;

    transition:
        opacity .4s ease !important;
}


/*
   화면에 들어와 있을 때 아주 느린 light sweep.
   별도 사각형/숫자/그래픽을 추가하지 않음.
*/
#boldDiner .bd-tab-head::after {
    content: "";

    position: absolute;

    top: -20%;
    bottom: -20%;
    left: -42%;

    z-index: 0;

    width: 36%;

    pointer-events: none;

    background:
        linear-gradient(
            104deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,.018) 28%,
            rgba(255,255,255,.075) 50%,
            rgba(255,255,255,.018) 72%,
            rgba(255,255,255,0) 100%
        );

    transform:
        translate3d(-110%,0,0)
        skewX(-12deg);

    opacity: 0;
}

#boldDiner .bd-tab.is-visible:not(.is-open) .bd-tab-head::after {
    opacity: 1;

    animation:
        bdTabAmbientSweep
        8.5s
        1.1s
        ease-in-out
        infinite;
}

@keyframes bdTabAmbientSweep {

    0%,
    38% {
        transform:
            translate3d(-115%,0,0)
            skewX(-12deg);
    }

    62%,
    100% {
        transform:
            translate3d(455%,0,0)
            skewX(-12deg);
    }

}


/* tab contents always above light layers */
#boldDiner .bd-tab-title,
#boldDiner .bd-tab-bottom {
    z-index: 2 !important;
}


/* pointer-follow depth */
#boldDiner .bd-tab-title {
    transform:
        translate(
            calc(-50% + var(--bd-title-x)),
            calc(-50% + var(--bd-title-y))
        )
        scale(var(--bd-title-scale)) !important;

    transition:
        transform
        .32s
        var(--bd-ease-out) !important;

    will-change: transform;
}

#boldDiner .bd-tab-head:hover {
    --bd-title-scale: 1.012;
}

#boldDiner .bd-tab-title-line {
    transition:
        transform
        .38s
        var(--bd-ease-out),
        letter-spacing .38s ease;
}

#boldDiner .bd-tab-head:hover .bd-tab-title-line:first-child {
    transform: translate3d(-4px,0,0);
}

#boldDiner .bd-tab-head:hover .bd-tab-title-line:last-child:not(:first-child) {
    transform: translate3d(4px,0,0);
}


/* title enters line-by-line when section reaches viewport */
#boldDiner.bd-enhanced-motion
.bd-tab:not(.is-open)
.bd-tab-title-line {
    opacity: 0;

    transform:
        translate3d(
            0,
            26px,
            0
        );

    clip-path:
        inset(
            0
            0
            100%
            0
        );
}

#boldDiner.bd-enhanced-motion
.bd-tab.is-visible:not(.is-open)
.bd-tab-title-line {
    animation:
        bdClosedTitleIn
        .76s
        var(--bd-ease-out)
        both;
}

#boldDiner.bd-enhanced-motion
.bd-tab.is-visible:not(.is-open)
.bd-tab-title-line:nth-child(2) {
    animation-delay: .08s;
}

@keyframes bdClosedTitleIn {

    to {
        opacity: 1;

        transform:
            translate3d(
                0,
                0,
                0
            );

        clip-path:
            inset(
                0
                0
                0
                0
            );
    }

}


/* line glint */
#boldDiner .bd-tab-line {
    overflow: visible;
}

#boldDiner .bd-tab-line::after {
    content: "";

    position: absolute;

    top: -1px;
    left: 0;

    width: 76px;
    height: 3px;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            currentColor,
            transparent
        );

    opacity: 0;

    transform:
        translate3d(
            -100%,
            0,
            0
        );
}

#boldDiner
.bd-tab.is-visible:not(.is-open)
.bd-tab-line::after {
    animation:
        bdLineGlint
        3.8s
        1.15s
        ease-in-out
        infinite;
}

@keyframes bdLineGlint {

    0%,
    54% {
        left: 0;
        opacity: 0;
    }

    60% {
        opacity: .72;
    }

    84% {
        left: calc(100% - 76px);
        opacity: .72;
    }

    92%,
    100% {
        left: calc(100% - 76px);
        opacity: 0;
    }

}


/* more / arrow micro interaction */
#boldDiner .bd-tab-more {
    transition:
        transform .3s var(--bd-ease-out),
        opacity .3s ease;
}

#boldDiner .bd-tab-more b {
    transform-origin: 50% 45%;

    animation:
        bdMoreIdle
        2.7s
        ease-in-out
        infinite;
}

#boldDiner .bd-tab-head:hover .bd-tab-more {
    transform: translate3d(-7px,0,0);
}

#boldDiner .bd-tab-head:hover .bd-tab-more b {
    animation: none;

    transform:
        translate3d(0,4px,0)
        scale(1.08);
}

@keyframes bdMoreIdle {

    0%,
    100% {
        transform: translate3d(0,0,0);
    }

    50% {
        transform: translate3d(0,3px,0);
    }

}


/* =========================================================
   02. OPEN PANEL — TRANSIENT OPEN SEQUENCE
   is-opening은 JS에서 약 1초만 유지.
   애니메이션 종료 후 transform을 잡아두지 않아 hover와 충돌 없음.
========================================================= */

/* 기존 is-open 기반 이미지 animation이 pointer interaction을 막지 않도록 해제 */
#boldDiner .bd-tab.is-open .bd-concept-collage img,
#boldDiner .bd-tab.is-open .bd-vibe-collage img,
#boldDiner .bd-tab.is-open .bd-poster-collage img,
#boldDiner .bd-tab.is-open .bd-visit-images img,
#boldDiner .bd-tab.is-open .bd-concept-item,
#boldDiner .bd-tab.is-open .bd-vibe-item {
    animation: none !important;
}


/* heading */
#boldDiner .bd-tab.is-open .bd-panel-heading,
#boldDiner .bd-tab.is-open .bd-wine-heading {
    animation: none !important;
}

#boldDiner .bd-tab.is-opening .bd-panel-heading h2,
#boldDiner .bd-tab.is-opening .bd-wine-heading h2 {
    animation:
        bdOpenTitleIn
        .68s
        var(--bd-ease-out)
        both;
}

#boldDiner .bd-tab.is-opening .bd-panel-heading p,
#boldDiner .bd-tab.is-opening .bd-wine-heading p {
    animation:
        bdOpenCopyIn
        .62s
        .09s
        var(--bd-ease-out)
        both;
}

#boldDiner .bd-tab.is-opening .bd-panel-heading::after,
#boldDiner .bd-tab.is-opening .bd-wine-heading::after {
    transform-origin: center;

    animation:
        bdOpenLineIn
        .72s
        .15s
        var(--bd-ease-out)
        both;
}

#boldDiner .bd-tab.is-opening .bd-panel-close,
#boldDiner .bd-tab.is-opening .bd-wine-close {
    animation:
        bdOpenCloseIn
        .48s
        .26s
        var(--bd-ease-out)
        both;
}

@keyframes bdOpenTitleIn {

    from {
        opacity: 0;

        clip-path:
            inset(
                100%
                0
                0
                0
            );

        transform:
            translate3d(
                0,
                36px,
                0
            );
    }

    to {
        opacity: 1;

        clip-path:
            inset(
                0
                0
                0
                0
            );

        transform:
            translate3d(
                0,
                0,
                0
            );
    }

}

@keyframes bdOpenCopyIn {

    from {
        opacity: 0;

        transform:
            translate3d(
                0,
                20px,
                0
            );
    }

    to {
        opacity: 1;

        transform:
            translate3d(
                0,
                0,
                0
            );
    }

}

@keyframes bdOpenLineIn {

    from {
        opacity: 0;

        transform:
            scaleX(.08);
    }

    to {
        opacity: 1;

        transform:
            scaleX(1);
    }

}

@keyframes bdOpenCloseIn {

    from {
        opacity: 0;

        transform:
            translate3d(
                18px,
                0,
                0
            );
    }

    to {
        opacity: 1;

        transform:
            translate3d(
                0,
                0,
                0
            );
    }

}


/* =========================================================
   03. IMAGE SCROLL REVEAL
   이미지가 실제 viewport에 들어올 때 하나씩 등장
========================================================= */

#boldDiner.bd-enhanced-motion .bd-media-reveal {
    --bd-reveal-delay: 0ms;

    /*
       FAIL-SAFE:
       JS/IntersectionObserver가 늦거나 캐시된 JS가 남아도
       사진 자체가 사라지지 않도록 기본값을 항상 보이게 둔다.
    */
    opacity: 1;

    transition:
        opacity
        .68s
        var(--bd-reveal-delay)
        ease,
        transform
        .82s
        var(--bd-reveal-delay)
        var(--bd-ease-out),
        clip-path
        .82s
        var(--bd-reveal-delay)
        var(--bd-ease-out),
        filter .55s ease;

    will-change:
        transform,
        opacity,
        clip-path;
}


/* mosaic / store cards */
#boldDiner.bd-enhanced-motion
.bd-concept-item.bd-media-reveal,
#boldDiner.bd-enhanced-motion
.bd-vibe-item.bd-media-reveal,
#boldDiner.bd-enhanced-motion
.bd-visit-store.bd-media-reveal,
#boldDiner.bd-enhanced-motion
.bd-visit-map.bd-media-reveal {
    opacity: .985;

    filter: saturate(.96) brightness(.985);

    transform:
        translate3d(
            0,
            42px,
            0
        )
        scale(.975);

    clip-path:
        inset(
            8%
            0
            0
            0
        );
}

#boldDiner.bd-enhanced-motion
.bd-media-reveal.is-media-visible {
    opacity: 1;

    filter: none;

    transform:
        translate3d(
            0,
            0,
            0
        )
        scale(1);

    clip-path:
        inset(
            0
            0
            0
            0
        );
}


/* Posters: absolute position은 그대로, transform만 reveal */
#boldDiner.bd-enhanced-motion
.bd-poster.bd-media-reveal {
    --bd-card-x: 0px;
    --bd-card-y: 0px;
    --bd-card-r: 0deg;
    --bd-card-scale: .965;

    transform:
        translate3d(
            var(--bd-card-x),
            calc(
                var(--bd-card-y)
                +
                34px
            ),
            0
        )
        rotate(var(--bd-card-r))
        scale(var(--bd-card-scale));

    filter:
        saturate(.88)
        contrast(.98);

    clip-path:
        inset(
            6%
            0
            0
            0
        );
}

#boldDiner.bd-enhanced-motion
.bd-poster.bd-media-reveal.is-media-visible {
    --bd-card-scale: 1;

    opacity: 1;

    transform:
        translate3d(
            var(--bd-card-x),
            var(--bd-card-y),
            0
        )
        rotate(var(--bd-card-r))
        scale(var(--bd-card-scale));

    filter:
        saturate(1)
        contrast(1);

    clip-path:
        inset(
            0
            0
            0
            0
        );
}


/* =========================================================
   04. IMAGE DEPTH / POINTER PARALLAX
========================================================= */

#boldDiner .bd-concept-item,
#boldDiner .bd-vibe-item,
#boldDiner .bd-visit-store {
    --bd-img-x: 0px;
    --bd-img-y: 0px;
    --bd-img-scale: 1.018;
    --bd-glow-x: 50%;
    --bd-glow-y: 50%;

    isolation: isolate;
}


/* fine border gives mosaic a more finished edge without adding gaps */
#boldDiner .bd-concept-item::before,
#boldDiner .bd-vibe-item::before,
#boldDiner .bd-visit-store::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    border:
        1px solid
        rgba(255,255,255,.10);

    mix-blend-mode: soft-light;

    opacity: .55;
}


/* cursor light on photo */
#boldDiner .bd-concept-item::after,
#boldDiner .bd-vibe-item::after,
#boldDiner .bd-visit-store::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        radial-gradient(
            circle 280px
            at var(--bd-glow-x) var(--bd-glow-y),
            rgba(255,255,255,.16),
            rgba(255,255,255,.045) 30%,
            rgba(255,255,255,0) 68%
        );

    opacity: 0;

    transition:
        opacity .35s ease;
}

#boldDiner .bd-concept-item:hover::after,
#boldDiner .bd-vibe-item:hover::after,
#boldDiner .bd-visit-store:hover::after {
    opacity: .65;
}


/* pointer movement is on image, reveal is on parent => no transform collision */
#boldDiner .bd-concept-item img,
#boldDiner .bd-vibe-item img,
#boldDiner .bd-visit-store img {
    transform:
        translate3d(
            var(--bd-img-x),
            var(--bd-img-y),
            0
        )
        scale(var(--bd-img-scale)) !important;

    transition:
        transform
        .52s
        var(--bd-ease-out),
        filter .45s ease !important;

    will-change: transform;
}

#boldDiner .bd-concept-item:hover,
#boldDiner .bd-vibe-item:hover,
#boldDiner .bd-visit-store:hover {
    --bd-img-scale: 1.055;
}

#boldDiner .bd-concept-item:hover img,
#boldDiner .bd-vibe-item:hover img,
#boldDiner .bd-visit-store:hover img {
    filter:
        saturate(1.055)
        contrast(1.02);
}


/* poster pointer tilt */
#boldDiner .bd-poster {
    --bd-card-x: 0px;
    --bd-card-y: 0px;
    --bd-card-r: 0deg;
    --bd-card-scale: 1;

    transform:
        translate3d(
            var(--bd-card-x),
            var(--bd-card-y),
            0
        )
        rotate(var(--bd-card-r))
        scale(var(--bd-card-scale));

    transform-origin: 50% 50%;

    transition:
        transform
        .44s
        var(--bd-ease-out),
        filter .4s ease !important;

    will-change: transform;
}

#boldDiner .bd-poster:hover {
    --bd-card-scale: 1.022;

    z-index: 12 !important;

    filter:
        saturate(1.04)
        contrast(1.015)
        drop-shadow(
            0
            16px
            28px
            rgba(18,40,75,.14)
        ) !important;
}


/* =========================================================
   05. VISIT DETAILS — SUBTLE STAGGER
========================================================= */

#boldDiner.bd-enhanced-motion
.bd-detail-reveal {
    opacity: 0;

    transform:
        translate3d(
            -18px,
            0,
            0
        );

    transition:
        opacity .58s ease,
        transform .72s var(--bd-ease-out);
}

#boldDiner.bd-enhanced-motion
.bd-detail-reveal.is-media-visible {
    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );
}

#boldDiner .bd-visit-info > div {
    transition:
        padding-left .35s var(--bd-ease-out),
        border-color .35s ease;
}

#boldDiner .bd-visit-info > div:hover {
    padding-left: 10px;

    border-color:
        rgba(255,255,255,.78);
}


/* =========================================================
   07. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    #boldDiner .bd-tab-head::after,
    #boldDiner .bd-tab-line::after,
    #boldDiner .bd-tab-more b,
    #boldDiner .bd-tab-title-line,
    #boldDiner .bd-tab.is-opening *,
    #boldDiner .bd-media-reveal,
    #boldDiner .bd-detail-reveal {
        animation: none !important;

        transition: none !important;
    }

    #boldDiner .bd-media-reveal,
    #boldDiner .bd-detail-reveal,
    #boldDiner .bd-tab-title-line {
        opacity: 1 !important;

        clip-path: none !important;

        transform: none !important;
    }

    #boldDiner .bd-poster {
        --bd-card-x: 0px !important;
        --bd-card-y: 0px !important;
        --bd-card-r: 0deg !important;
        --bd-card-scale: 1 !important;
    }

    #boldDiner .bd-concept-item img,
    #boldDiner .bd-vibe-item img,
    #boldDiner .bd-visit-store img {
        --bd-img-x: 0px !important;
        --bd-img-y: 0px !important;
        --bd-img-scale: 1 !important;
    }

}

/* =========================================================
   IMAGE VISIBILITY FAIL-SAFE V15
   어떤 JS 버전이 캐시되어 있어도 열린 패널 이미지는 항상 표시
========================================================= */

#boldDiner .bd-tab.is-open .bd-concept-item,
#boldDiner .bd-tab.is-open .bd-vibe-item,
#boldDiner .bd-tab.is-open .bd-poster,
#boldDiner .bd-tab.is-open .bd-visit-store,
#boldDiner .bd-tab.is-open .bd-visit-map {
    opacity: 1 !important;
}

#boldDiner .bd-tab.is-open .bd-concept-item img,
#boldDiner .bd-tab.is-open .bd-vibe-item img,
#boldDiner .bd-tab.is-open .bd-poster,
#boldDiner .bd-tab.is-open .bd-visit-store img {
    visibility: visible !important;
}

/* 이미지 태그 자체에 예전 opacity 값이 남아 있는 경우까지 방어 */
#boldDiner .bd-tab.is-open .bd-photo-collage img,
#boldDiner .bd-tab.is-open .bd-poster-collage img {
    opacity: 1 !important;
}
/* =========================================================
   HERO POLISH V16
   - 메인 인터랙션 재진입 시 재실행
   - 기존 내부 이미지 저채도/저투명 배경 사용
   - 상단 3개 주소 타이포/인터랙션 개선
========================================================= */

#boldDiner .bd-hero {
    --bd-hero-bg-x: 0px;
    --bd-hero-bg-y: 0px;

    isolation: isolate;
}

/* 기존에 사용한 내부 이미지를 아주 옅게 배경으로 사용 */
#boldDiner .bd-hero::before {
    content: "";

    position: absolute;
    inset: -2.5%;

    z-index: 0;

    pointer-events: none;

    background-image:
        url("https://ecimg.cafe24img.com/pg3079b28441081036/dahyangmall02/boldgray_detail_img/bolddiner/%E1%84%8F%E1%85%A2%E1%84%8E%E1%85%B5%E1%84%90%E1%85%A6%E1%84%8B%E1%85%B5%E1%84%87%E1%85%B3%E1%86%AF/%EB%82%B4%EB%B6%806.png");

    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;

    opacity: .035;

    filter:
        grayscale(.18)
        saturate(.72)
        contrast(.94);

    mix-blend-mode: multiply;

    transform:
        translate3d(
            var(--bd-hero-bg-x),
            var(--bd-hero-bg-y),
            0
        )
        scale(1.055);

    transition:
        opacity .55s ease,
        transform .18s linear;

    will-change:
        opacity,
        transform;
}

/* 사진이 로고를 방해하지 않게 크림 레이어로 정리 */
#boldDiner .bd-hero::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(255,240,229,.78) 0%,
            rgba(255,240,229,.86) 42%,
            rgba(255,240,229,.91) 100%
        );
}

#boldDiner .bd-hero.is-hero-active::before {
    animation:
        bdHeroBackdropIn
        1.7s
        cubic-bezier(.22,1,.36,1)
        both;
}

@keyframes bdHeroBackdropIn {
    0% {
        opacity: .015;

        transform:
            translate3d(
                var(--bd-hero-bg-x),
                calc(var(--bd-hero-bg-y) + 12px),
                0
            )
            scale(1.085);
    }

    100% {
        opacity: .075;

        transform:
            translate3d(
                var(--bd-hero-bg-x),
                var(--bd-hero-bg-y),
                0
            )
            scale(1.055);
    }
}


/* logo/address/checker layer order */
#boldDiner .bd-logo-stage {
    z-index: 4 !important;
}

#boldDiner .bd-address-row {
    z-index: 5 !important;

    align-items: flex-start !important;
}

#boldDiner .bd-hero-loop {
    z-index: 8 !important;
}


/* =========================================================
   HERO ADDRESS — TYPOGRAPHIC DESIGN
========================================================= */

#boldDiner .bd-address-row p {
    position: relative;

    width: 245px !important;
    max-width: 19% !important;

    margin: 0 !important;
    padding: 0 0 14px !important;

    color: var(--bd-orange);

    font-family: var(--bd-serif) !important;
    font-size: clamp(10px, .93vw, 17px) !important;
    line-height: 1.28 !important;
    font-weight: 610 !important;
    letter-spacing: -.045em !important;

    opacity: 0;

    animation: none !important;

    transform:
        translate3d(
            0,
            -16px,
            0
        );

    transition:
        transform .32s cubic-bezier(.22,1,.36,1),
        opacity .32s ease;
}

/* 하단 얇은 룰로 글이 허공에 떠 보이지 않게 */
#boldDiner .bd-address-row p::after {
    content: "";

    position: absolute;

    bottom: 0;
    left: 0;

    width: 34px;
    height: 1px;

    background: currentColor;

    opacity: .52;

    transform:
        scaleX(.68);

    transform-origin:
        left center;

    transition:
        width .34s cubic-bezier(.22,1,.36,1),
        opacity .3s ease,
        transform .34s cubic-bezier(.22,1,.36,1);
}


/* hero가 화면에 들어올 때마다 다시 실행 */
#boldDiner .bd-hero.is-hero-active .bd-address-row p {
    animation:
        bdHeroAddressIn
        .68s
        cubic-bezier(.22,1,.36,1)
        forwards !important;
}

#boldDiner .bd-hero.is-hero-active .bd-address-row p:nth-child(1) {
    animation-delay: .08s !important;
}

#boldDiner .bd-hero.is-hero-active .bd-address-row p:nth-child(2) {
    animation-delay: .17s !important;
}

#boldDiner .bd-hero.is-hero-active .bd-address-row p:nth-child(3) {
    animation-delay: .26s !important;
}

@keyframes bdHeroAddressIn {
    0% {
        opacity: 0;

        transform:
            translate3d(
                0,
                -16px,
                0
            );
    }

    100% {
        opacity: 1;

        transform:
            translate3d(
                0,
                0,
                0
            );
    }
}


@media (hover:hover) and (pointer:fine) {

    #boldDiner .bd-address-row p:hover {
        transform:
            translate3d(
                4px,
                -2px,
                0
            ) !important;
    }

    #boldDiner .bd-address-row p:hover::after {
        width: 58px;

        opacity: .9;

        transform:
            scaleX(1);
    }

    #boldDiner .bd-address-row p:hover::before {
        color: var(--bd-orange);
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    #boldDiner .bd-hero::before {
        animation: none !important;

        opacity: .065 !important;

        transform:
            scale(1.055) !important;
    }

    #boldDiner .bd-address-row p {
        opacity: 1 !important;

        animation: none !important;

        transform: none !important;
    }

}

/* =========================================================
   HERO FULLSCREEN / OVERLAY POLISH V19
   - 메인 히어로를 1920×1080 감성으로 한 화면 꽉 차게 사용
   - 매장 이미지를 낮은 오퍼시티 배경으로 깔아 심심함 보완
   - 로고 전체 스케일 축소
   - 상단 3개 주소 블록 가독성/여백 보정
   - 기존 JS 재진입 인터랙션과 그대로 연동
========================================================= */

/* ---------------------------------------------------------
   01. HERO CANVAS
--------------------------------------------------------- */
#boldDiner .bd-hero {
    min-height: min(1080px, max(860px, calc(100svh - var(--bold-brandbar-height, 0px)))) !important;
    height: calc(100svh - var(--bold-brandbar-height, 0px)) !important;
    max-height: 1080px !important;

    display: block;
    background:
        linear-gradient(
            180deg,
            rgba(255, 243, 234, 0.98) 0%,
            rgba(255, 243, 234, 0.95) 38%,
            rgba(255, 243, 234, 0.92) 100%
        ) !important;
}

/* ---------------------------------------------------------
   02. BACKDROP IMAGE
   - 기존 매장 사진을 아주 옅은 배경 질감으로 사용
--------------------------------------------------------- */
#boldDiner .bd-hero::before {
    inset: 0 !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(255,243,234,.88) 0%,
            rgba(255,243,234,.70) 18%,
            rgba(255,243,234,.58) 48%,
            rgba(255,243,234,.72) 74%,
            rgba(255,243,234,.90) 100%
        ),
        url("https://ecimg.cafe24img.com/pg3079b28441081036/dahyangmall02/boldgray_detail_img/bolddiner/%E1%84%8F%E1%85%A2%E1%84%8E%E1%85%B5%E1%84%90%E1%85%A6%E1%84%8B%E1%85%B5%E1%84%87%E1%85%B3%E1%86%AF/%EB%A7%A4%EC%9E%A51.png") !important;

    background-repeat: no-repeat, no-repeat !important;
    background-position: center center, center center !important;
    background-size: cover, cover !important;

    opacity: 1 !important;

    filter:
        grayscale(.08)
        saturate(.78)
        contrast(.96)
        blur(.4px) !important;

    mix-blend-mode: normal !important;

    transform:
        translate3d(
            var(--bd-hero-bg-x),
            var(--bd-hero-bg-y),
            0
        )
        scale(1.03) !important;
}

#boldDiner .bd-hero::after {
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(255,243,234,.12) 0%,
            rgba(255,243,234,.42) 42%,
            rgba(255,243,234,.76) 72%,
            rgba(255,243,234,.92) 100%
        ),
        linear-gradient(
            180deg,
            rgba(255,243,234,.46) 0%,
            rgba(255,243,234,.26) 28%,
            rgba(255,243,234,.46) 100%
        ) !important;
}

/* 조금 더 배경 이미지가 묻어나게 */
#boldDiner .bd-hero.is-hero-active::before {
    animation:
        bdHeroBackdropInV19
        1.55s
        cubic-bezier(.22,1,.36,1)
        both !important;
}

@keyframes bdHeroBackdropInV19 {
    0% {
        transform:
            translate3d(
                var(--bd-hero-bg-x),
                calc(var(--bd-hero-bg-y) + 20px),
                0
            )
            scale(1.06);

        filter:
            grayscale(.18)
            saturate(.72)
            contrast(.94)
            blur(1px);
    }

    100% {
        transform:
            translate3d(
                var(--bd-hero-bg-x),
                var(--bd-hero-bg-y),
                0
            )
            scale(1.03);

        filter:
            grayscale(.08)
            saturate(.78)
            contrast(.96)
            blur(.4px);
    }
}

/* ---------------------------------------------------------
   03. ADDRESS STRIP
--------------------------------------------------------- */
#boldDiner .bd-address-row {
    top: 13.4% !important;
    left: 5.6% !important;
    width: 88.8% !important;

    align-items: flex-start !important;
    justify-content: space-between !important;
}

#boldDiner .bd-address-row p {
    width: 275px !important;
    max-width: 19% !important;
    padding-bottom: 16px !important;

    font-size: clamp(16px, .95vw, 19px) !important;
    line-height: 1.23 !important;
    font-weight: 690 !important;
    letter-spacing: -.055em !important;

    color: rgba(241,108,0,.96) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.45);
}

#boldDiner .bd-address-row p::after {
    width: 42px !important;
    opacity: .64 !important;
}

#boldDiner .bd-hero.is-hero-active .bd-address-row p:nth-child(1) {
    animation-delay: .08s !important;
}
#boldDiner .bd-hero.is-hero-active .bd-address-row p:nth-child(2) {
    animation-delay: .18s !important;
}
#boldDiner .bd-hero.is-hero-active .bd-address-row p:nth-child(3) {
    animation-delay: .28s !important;
}

/* ---------------------------------------------------------
   04. LOGO SCALE / POSITION
--------------------------------------------------------- */
#boldDiner .bd-logo-stage {
    top: 25.2% !important;

    width:
        min(
            56.8vw,
            calc(
                (
                    100svh -
                    var(--bold-brandbar-height, 0px) -
                    310px
                ) * 1.88
            )
        ) !important;

    max-width: 1080px !important;
}

#boldDiner .bd-bold-stage {
    height: 51.637% !important;
}

#boldDiner .bd-diner-logo {
    top: 53.6% !important;
}

/* 기존 오렌지 로고의 존재감은 유지하되 과하게 커 보이지 않게 */
#boldDiner .bd-letter,
#boldDiner .bd-diner-logo {
    filter:
        drop-shadow(0 16px 34px rgba(241,108,0,.08))
        drop-shadow(0 2px 0 rgba(255,255,255,.12));
}

/* ---------------------------------------------------------
   05. CHECKER BAR
--------------------------------------------------------- */
#boldDiner .bd-hero-loop {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
}

/* ---------------------------------------------------------
   06. RESPONSIVE
--------------------------------------------------------- */








/* =========================================================
   HERO CLEANUP V20
   - 메인 배경 매장 사진 제거
   - 브랜드 스위처 ↔ 주소 3개 간격 재조정
   - 주소 ↔ 로고 간격도 함께 균형 조정
   - V19에서 줄인 로고 크기는 유지
========================================================= */

/* ---------------------------------------------------------
   01. BACKGROUND IMAGE REMOVE
--------------------------------------------------------- */
#boldDiner .bd-hero {
    background:
        linear-gradient(
            180deg,
            #fff4ec 0%,
            #fff1e8 52%,
            #fff0e5 100%
        ) !important;
}

/*
   V19에서 넣은 매장 사진은 완전히 제거.
   ::before는 아주 미세한 명암만 담당.
*/
#boldDiner .bd-hero::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    z-index: 0 !important;

    pointer-events: none !important;

    background:
        radial-gradient(
            ellipse at 50% 42%,
            rgba(255,255,255,.42) 0%,
            rgba(255,255,255,.16) 34%,
            rgba(255,255,255,0) 68%
        ) !important;

    opacity: 1 !important;

    filter: none !important;
    mix-blend-mode: normal !important;

    transform: none !important;

    animation: none !important;
}

/* 별도 사진 오버레이도 제거하고 아주 옅은 depth만 유지 */
#boldDiner .bd-hero::after {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    z-index: 1 !important;

    pointer-events: none !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.14) 0%,
            rgba(255,255,255,0) 25%,
            rgba(241,108,0,.018) 100%
        ) !important;
}


/* ---------------------------------------------------------
   02. BRAND SWITCHER → ADDRESS SPACING
--------------------------------------------------------- */

/*
   PC 1920×1080 기준:
   브랜드 스위처 하단에서 주소까지 약 60px 전후로 보이게 조정.
*/
#boldDiner .bd-address-row {
    top: 10.7% !important;

    left: 5.6% !important;
    width: 88.8% !important;
}


/* 주소는 조금 더 작고 정돈되게 */
#boldDiner .bd-address-row p {
    width: 265px !important;
    max-width: 18.5% !important;

    font-size:
        clamp(
            15px,
            .90vw,
            18px
        ) !important;

    line-height: 1.22 !important;
    font-weight: 680 !important;
}


/* ---------------------------------------------------------
   03. ADDRESS → LOGO SPACING
--------------------------------------------------------- */

/*
   주소를 위로 올린 만큼 로고도 아주 조금 위로 조정.
   단, V19에서 줄인 전체 크기는 그대로 유지.
*/
#boldDiner .bd-logo-stage {
    top: 23.9% !important;
}


/* ---------------------------------------------------------
   04. LARGE DESKTOP
--------------------------------------------------------- */



/* =========================================================
   EVERYDAY STORE COLLAGE — FINAL SEAM FIX
   - 3장 모두 서로 다른 이미지 사용
   - 메인 / 하단 2장 사이 navy 여백 제거
   - 하단 중앙 seam 제거
   - 기존 reveal / hover 인터랙션 유지
========================================================= */

#boldDiner .bd-everyday {
    column-gap: 0 !important;
    row-gap: 0 !important;
    gap: 0 !important;
}


/* MAIN */
#boldDiner .bd-store-main {
    margin-bottom: -2px !important;

    border: 0 !important;

    background: transparent !important;
}


/* BOTTOM TWO */
#boldDiner .bd-store-left,
#boldDiner .bd-store-right {
    width: calc(100% + 1px) !important;

    margin-top: -2px !important;
    margin-bottom: 0 !important;

    border: 0 !important;

    background: transparent !important;
}


/* 예전 Figma overflow 보정 제거:
   지금은 정확히 2등분해서 빈 navy 영역 없이 붙인다. */
#boldDiner .bd-store-left {
    justify-self: stretch !important;

    transform: none !important;
}

#boldDiner .bd-store-right {
    justify-self: stretch !important;

    margin-left: -1px !important;

    transform: none !important;
}


/* IMG 자체도 1px 빈틈 없이 채움 */
#boldDiner .bd-store-main img,
#boldDiner .bd-store-left img,
#boldDiner .bd-store-right img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    object-fit: cover !important;

    vertical-align: top !important;
}


/* ---------------------------------------------------------
   기존 scroll reveal은 유지하되
   최종 위치를 0으로 통일
--------------------------------------------------------- */

#boldDiner.bd-motion-ready .bd-store-left {
    transform:
        translate3d(
            -45px,
            18px,
            0
        )
        scale(.985) !important;
}

#boldDiner.bd-motion-ready .bd-store-left.is-visible {
    transform:
        translate3d(
            0,
            0,
            0
        )
        scale(1) !important;
}

#boldDiner.bd-motion-ready .bd-store-right {
    transform:
        translate3d(
            45px,
            18px,
            0
        )
        scale(.985) !important;
}

#boldDiner.bd-motion-ready .bd-store-right.is-visible {
    transform:
        translate3d(
            0,
            0,
            0
        )
        scale(1) !important;
}


/* hover 확대 때도 seam이 드러나지 않도록 */
@media (hover: hover) and (pointer: fine) {

    #boldDiner .bd-store-left,
    #boldDiner .bd-store-right,
    #boldDiner .bd-store-main {
        overflow: hidden !important;
    }

}

/* =========================================================
   EVERYDAY STORE COLLAGE — HORIZONTAL NAVY GAP REMOVE V2

   위 메인 이미지와 하단 2장 사이에 보이던
   navy background strip을 완전히 덮도록
   하단 두 이미지를 위쪽으로 겹친다.
========================================================= */

#boldDiner .bd-store-main {
    margin-bottom: 0 !important;
}


/*
   기존 final patch의 -2px를 덮어씀.
   PC에서 보이던 약 10~14px navy strip까지
   확실하게 덮도록 -16px overlap.
*/
#boldDiner .bd-store-left,
#boldDiner .bd-store-right {
    margin-top: -16px !important;

    position: relative !important;
    z-index: 3 !important;
}


/*
   reveal이 동작 중이어도 Y축 아래 이동 때문에
   navy gap이 다시 보이지 않도록 Y 이동 제거.
   좌우에서 들어오는 효과만 유지.
*/
#boldDiner.bd-motion-ready .bd-store-left {
    transform:
        translate3d(
            -45px,
            0,
            0
        )
        scale(.985) !important;
}

#boldDiner.bd-motion-ready .bd-store-right {
    transform:
        translate3d(
            45px,
            0,
            0
        )
        scale(.985) !important;
}


#boldDiner.bd-motion-ready .bd-store-left.is-visible,
#boldDiner.bd-motion-ready .bd-store-right.is-visible {
    transform:
        translate3d(
            0,
            0,
            0
        )
        scale(1) !important;
}


/* 이미지 주변 line-height / inline gap까지 차단 */
#boldDiner .bd-store-main,
#boldDiner .bd-store-left,
#boldDiner .bd-store-right {
    line-height: 0 !important;
    font-size: 0 !important;
}

#boldDiner .bd-store-main img,
#boldDiner .bd-store-left img,
#boldDiner .bd-store-right img {
    display: block !important;

    vertical-align: top !important;
}

/* =========================================================
   EVERYDAY STORE GALLERY — STRUCTURAL GAP FIX V3

   메인/하단 사진을 하나의 gallery grid 안으로 묶어서
   부모 .bd-everyday의 navy background가 사진 사이에
   노출될 수 없도록 구조 자체를 수정.
========================================================= */

#boldDiner .bd-store-gallery {
    grid-column: 1 / -1 !important;

    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    column-gap: 0 !important;
    row-gap: 0 !important;
    gap: 0 !important;

    width: 100% !important;

    margin:
        clamp(54px, 3.4vw, 70px)
        0
        0 !important;

    padding: 0 !important;

    overflow: hidden !important;

    line-height: 0 !important;
    font-size: 0 !important;

    background: transparent !important;
}


/* ---------------------------------------------------------
   MAIN — full width
--------------------------------------------------------- */

#boldDiner .bd-store-gallery > .bd-store-main {
    grid-column: 1 / -1 !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    line-height: 0 !important;
}


/* 기존 direct-grid용 margin 제거 */
#boldDiner .bd-store-gallery > .bd-store-main {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* ---------------------------------------------------------
   BOTTOM TWO — exact 50 / 50
--------------------------------------------------------- */

#boldDiner .bd-store-gallery > .bd-store-left,
#boldDiner .bd-store-gallery > .bd-store-right {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    justify-self: stretch !important;
    align-self: stretch !important;

    background: transparent !important;

    line-height: 0 !important;
}


/*
   브라우저 subpixel rasterization으로 1px seam이 생기는 경우까지
   막기 위해 오른쪽 이미지만 1px 겹침.
*/
#boldDiner .bd-store-gallery > .bd-store-right {
    margin-left: -1px !important;
    width: calc(100% + 1px) !important;
}


/* ---------------------------------------------------------
   IMAGES — no inline/baseline gap
--------------------------------------------------------- */

#boldDiner .bd-store-gallery img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    object-fit: cover !important;
    object-position: center !important;

    vertical-align: top !important;
}


/* ---------------------------------------------------------
   REVEAL MOTION
   Y축 이동 없이 좌우 등장만 유지해서
   애니메이션 중에도 navy strip이 보이지 않음.
--------------------------------------------------------- */

#boldDiner.bd-motion-ready
.bd-store-gallery > .bd-store-main {
    transform:
        scale(1.025) !important;
}

#boldDiner.bd-motion-ready
.bd-store-gallery > .bd-store-main.is-visible {
    transform:
        scale(1) !important;
}


#boldDiner.bd-motion-ready
.bd-store-gallery > .bd-store-left {
    transform:
        translate3d(
            -45px,
            0,
            0
        )
        scale(.985) !important;
}

#boldDiner.bd-motion-ready
.bd-store-gallery > .bd-store-right {
    transform:
        translate3d(
            45px,
            0,
            0
        )
        scale(.985) !important;
}


#boldDiner.bd-motion-ready
.bd-store-gallery > .bd-store-left.is-visible,
#boldDiner.bd-motion-ready
.bd-store-gallery > .bd-store-right.is-visible {
    transform:
        translate3d(
            0,
            0,
            0
        )
        scale(1) !important;
}


/* ---------------------------------------------------------
   RESERVATION
   gallery 다음 줄 전체 폭 기준 유지
--------------------------------------------------------- */

#boldDiner .bd-reservation {
    grid-column: 1 / -1;
}

/* =========================================================
   POSTER 2-COLUMN GRID — FINAL INTERACTION
   포스터가 이웃 영역을 침범하지 않도록 확대를 최소화.
========================================================= */

#boldDiner .bd-poster-collage {
    isolation: isolate;
}

#boldDiner .bd-poster {
    transform-origin: 50% 50%;

    border-radius: 0 !important;
}

@media (hover: hover) and (pointer: fine) {

    #boldDiner .bd-poster:hover {
        --bd-card-scale: 1.008 !important;

        z-index: 3 !important;

        filter:
            saturate(1.025)
            contrast(1.01)
            drop-shadow(
                0
                14px
                24px
                rgba(18,40,75,.10)
            ) !important;
    }

}

/* =========================================================
   WINE & FOOD POSTER GRID — FINAL 2 COLUMN FIX V2
   - 총 15장
   - 무조건 2열
   - 기존 absolute / transform / width 충돌 전부 초기화
   - 겹침 없음
========================================================= */

#boldDiner .bd-poster-collage {
    position: relative !important;

    display: grid !important;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        ) !important;

    grid-auto-flow: row !important;
    grid-auto-rows: auto !important;

    align-items: start !important;
    justify-items: stretch !important;

    column-gap:
        clamp(
            28px,
            2vw,
            42px
        ) !important;

    row-gap:
        clamp(
            38px,
            2.6vw,
            56px
        ) !important;

    width:
        min(
            1520px,
            calc(100% - 120px)
        ) !important;

    max-width: 1520px !important;

    height: auto !important;
    min-height: 0 !important;

    margin:
        0
        auto !important;

    padding:
        0
        0
        clamp(
            70px,
            5vw,
            100px
        ) !important;

    overflow: visible !important;

    isolation: isolate !important;
}


/* ---------------------------------------------------------
   GRID ITEM WRAPPER
--------------------------------------------------------- */

#boldDiner .bd-poster-collage > .bd-poster-item {
    position: relative !important;

    display: block !important;

    grid-column: auto !important;
    grid-row: auto !important;

    align-self: start !important;
    justify-self: stretch !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: none !important;

    overflow: hidden !important;

    background: transparent !important;
}


/* ---------------------------------------------------------
   IMAGE
--------------------------------------------------------- */

#boldDiner .bd-poster-collage > .bd-poster-item > .bd-poster {
    position: static !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    display: block !important;

    grid-column: auto !important;
    grid-row: auto !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: none !important;

    border: 0 !important;
    border-radius: 0 !important;

    object-fit: contain !important;
    object-position: center top !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform:
        translate3d(
            var(--bd-card-x, 0px),
            var(--bd-card-y, 0px),
            0
        )
        rotate(
            var(--bd-card-r, 0deg)
        )
        scale(
            var(--bd-card-scale, 1)
        ) !important;

    transform-origin: 50% 50% !important;
}


/* ---------------------------------------------------------
   OPEN MOTION
   2열 자체는 절대 흔들지 않고 이미지만 가볍게 등장
--------------------------------------------------------- */

#boldDiner .bd-tab.is-open
.bd-poster-collage > .bd-poster-item {
    animation:
        bdPosterGridItemIn
        .72s
        cubic-bezier(.22, 1, .36, 1)
        both;
}

@keyframes bdPosterGridItemIn {
    from {
        opacity: 0;
        transform: translate3d(0, 22px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

#boldDiner .bd-tab.is-open .bd-poster-item:nth-child(1)  { animation-delay: .03s; }
#boldDiner .bd-tab.is-open .bd-poster-item:nth-child(2)  { animation-delay: .06s; }
#boldDiner .bd-tab.is-open .bd-poster-item:nth-child(3)  { animation-delay: .09s; }
#boldDiner .bd-tab.is-open .bd-poster-item:nth-child(4)  { animation-delay: .12s; }
#boldDiner .bd-tab.is-open .bd-poster-item:nth-child(5)  { animation-delay: .15s; }
#boldDiner .bd-tab.is-open .bd-poster-item:nth-child(6)  { animation-delay: .18s; }
#boldDiner .bd-tab.is-open .bd-poster-item:nth-child(7)  { animation-delay: .21s; }
#boldDiner .bd-tab.is-open .bd-poster-item:nth-child(8)  { animation-delay: .24s; }
#boldDiner .bd-tab.is-open .bd-poster-item:nth-child(9)  { animation-delay: .27s; }
#boldDiner .bd-tab.is-open .bd-poster-item:nth-child(10) { animation-delay: .30s; }
#boldDiner .bd-tab.is-open .bd-poster-item:nth-child(11) { animation-delay: .33s; }
#boldDiner .bd-tab.is-open .bd-poster-item:nth-child(12) { animation-delay: .36s; }
#boldDiner .bd-tab.is-open .bd-poster-item:nth-child(13) { animation-delay: .39s; }
#boldDiner .bd-tab.is-open .bd-poster-item:nth-child(14) { animation-delay: .42s; }
#boldDiner .bd-tab.is-open .bd-poster-item:nth-child(15) { animation-delay: .45s; }


/* ---------------------------------------------------------
   HOVER
--------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

    #boldDiner
    .bd-poster-collage
    > .bd-poster-item {
        transition:
            transform .38s cubic-bezier(.22, 1, .36, 1),
            filter .35s ease !important;
    }

    #boldDiner
    .bd-poster-collage
    > .bd-poster-item:hover {
        z-index: 3 !important;

        transform:
            translate3d(
                0,
                -5px,
                0
            ) !important;

        filter:
            drop-shadow(
                0
                16px
                28px
                rgba(18,40,75,.12)
            ) !important;
    }

    #boldDiner
    .bd-poster-collage
    > .bd-poster-item:hover
    > .bd-poster {
        --bd-card-scale: 1.008 !important;
    }

}

/* =========================================================
   EVERYDAY WINE — FRIDGE PANORAMA V1
   이미지 원본 비율에 맞춰 중앙에서 시작해 좌우로 탐색
   기존 하단 2장 / 전체 레이아웃은 그대로 유지
========================================================= */

#boldDiner .bd-store-gallery > .bd-fridge-panorama {
    position: relative !important;

    grid-column: 1 / -1 !important;

    width: 100% !important;

    /*
       긴 198.png를 가로 파노라마로 crop.
       고정 min-height를 없애 좁은 화면에서도
       이미지 아래 navy 빈 영역이 생기지 않게 한다.
    */
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1920 / 560 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #0d203e !important;

    line-height: 0 !important;
    font-size: 0 !important;

    isolation: isolate;
}


#boldDiner .bd-fridge-panorama__viewport {
    position: absolute;
    inset: 0;

    z-index: 1;

    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: transparent;

    cursor: grab;
    user-select: none;
    -webkit-user-select: none;

    touch-action: pan-y;
}

#boldDiner .bd-fridge-panorama.is-dragging
.bd-fridge-panorama__viewport {
    cursor: grabbing;
}


#boldDiner .bd-fridge-panorama__track {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    display: block;

    /*
       JS 실행 전에도 절대 빈 공간이 보이지 않도록
       viewport보다 약간 넓게 기본값 지정.
       실제 폭은 JS가 원본 이미지 비율을 읽어 px로 재설정.
    */
    width: 118% !important;
    min-width: 100% !important;
    height: 100% !important;

    margin: 0;
    padding: 0;

    overflow: hidden;

    transform: translate3d(0,0,0);

    will-change: transform;

    transition:
        transform
        .62s
        cubic-bezier(.22,1,.36,1);
}

#boldDiner .bd-fridge-panorama.is-dragging
.bd-fridge-panorama__track {
    transition: none !important;
}


/* 기존 .bd-store-gallery img / .bd-store-main img 강제값 해제 */
#boldDiner .bd-store-gallery
.bd-fridge-panorama__img,
#boldDiner .bd-store-main
.bd-fridge-panorama__img {
    display: block !important;

    /*
       새 이미지가 기존 파노라마보다 짧아도
       track 전체를 빈틈 없이 채운다.
       비율은 object-fit:cover로 보존.
    */
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;

    height: 100% !important;
    min-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    object-fit: cover !important;
    object-position: center center !important;

    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;

    transform: none !important;
    filter: none !important;

    transition: none !important;
}


/* 기존 store hover 확대가 파노라마 이미지에 적용되지 않게 방어 */
@media (hover:hover) and (pointer:fine) {

    #boldDiner .bd-store-main:hover
    .bd-fridge-panorama__img {
        transform: none !important;
        filter: none !important;
    }

}


/* 좌우 컨트롤 */
#boldDiner .bd-fridge-panorama__btn {
    position: absolute;
    top: 50%;

    z-index: 20;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    opacity: 1 !important;
    visibility: visible !important;

    width: clamp(48px, 3.25vw, 62px);
    height: clamp(48px, 3.25vw, 62px);

    padding: 0;

    border:
        1px solid
        rgba(255,255,255,.62);
    border-radius: 50%;

    background:
        rgba(18,40,75,.68);
    color: #fff;

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);

    transform: translateY(-50%);

    cursor: pointer;

    transition:
        opacity .28s ease,
        background-color .28s ease,
        border-color .28s ease,
        transform .32s cubic-bezier(.22,1,.36,1);
}

#boldDiner .bd-fridge-panorama__btn span {
    display: block;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: clamp(18px, 1.2vw, 23px);
    line-height: 1;
    font-weight: 400;
}

#boldDiner .bd-fridge-panorama__btn.is-prev {
    left: clamp(18px, 2vw, 38px);
}

#boldDiner .bd-fridge-panorama__btn.is-next {
    right: clamp(18px, 2vw, 38px);
}

#boldDiner .bd-fridge-panorama__btn.is-disabled {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

@media (hover:hover) and (pointer:fine) {

    #boldDiner .bd-fridge-panorama__btn:hover {
        background: var(--bd-orange);
        border-color: var(--bd-orange);

        transform:
            translateY(-50%)
            scale(1.08);
    }

}


/* 현재 위치를 보여주는 얇은 progress */
#boldDiner .bd-fridge-panorama__progress {
    position: absolute;

    right: clamp(24px, 2.4vw, 46px);
    bottom: clamp(18px, 1.55vw, 30px);
    left: clamp(24px, 2.4vw, 46px);

    z-index: 4;

    height: 2px;

    overflow: hidden;

    background:
        rgba(255,255,255,.28);

    pointer-events: none;
}

#boldDiner .bd-fridge-panorama__progress span {
    position: relative;
    left: 0;

    display: block;

    width: 22%;
    height: 100%;

    background: #fff;

    will-change: left;

    transition:
        left
        .62s
        cubic-bezier(.22,1,.36,1);
}

#boldDiner .bd-fridge-panorama.is-dragging
.bd-fridge-panorama__progress span {
    transition: none !important;
}


/* 기존 main reveal은 컨테이너에만 적용하고 내부 track 이동과 충돌하지 않음 */
#boldDiner.bd-motion-ready
.bd-store-gallery > .bd-fridge-panorama {
    transform: scale(1.018) !important;
}

#boldDiner.bd-motion-ready
.bd-store-gallery > .bd-fridge-panorama.is-visible {
    transform: scale(1) !important;
}


@media (prefers-reduced-motion: reduce) {

    #boldDiner .bd-fridge-panorama__track,
    #boldDiner .bd-fridge-panorama__progress span,
    #boldDiner .bd-fridge-panorama__btn {
        transition: none !important;
    }

}

/* =========================================================
   FRIDGE PANORAMA GAP / CONTROL FIX V2
   - 파노라마 아래 navy 여백 완전 제거
   - 좌우 버튼 항상 노출
========================================================= */

#boldDiner .bd-store-gallery {
    grid-auto-flow: row !important;
    grid-auto-rows: auto !important;
    row-gap: 0 !important;
    gap: 0 !important;
}

#boldDiner .bd-store-gallery > .bd-fridge-panorama {
    align-self: stretch !important;
    margin-bottom: 0 !important;
}

#boldDiner .bd-store-gallery > .bd-store-left,
#boldDiner .bd-store-gallery > .bd-store-right {
    margin-top: 0 !important;
    top: auto !important;
}

#boldDiner .bd-fridge-panorama__viewport,
#boldDiner .bd-fridge-panorama__track,
#boldDiner .bd-fridge-panorama__img {
    bottom: auto;
    vertical-align: top !important;
}

#boldDiner .bd-fridge-panorama__btn,
#boldDiner .bd-fridge-panorama__btn.is-disabled {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* =========================================================
   HERO ADDRESS HIDE V21
   메인 상단 주소 3개는 구조는 유지하고 화면에서만 숨김
========================================================= */

#boldDiner .bd-address-row {
    display: none !important;
}

/* =========================================================
   HERO ADDRESS
   현재 사용하지 않음
========================================================= */
#boldDiner .bd-address-row {
    display: none !important;
}