@charset "utf-8";
/* 눈꽃을비비다 브랜드 소개 페이지 전용 스타일 (공통은 fl-sub.css).
   소개 페이지들과 같은 톤(크림·딥그린·라운드·Oswald)이되 배치는 다르게 —
   가운데 제목 + 부채꼴로 펼쳐지는 사진 3장 → 마우스를 올린 칸이 넓어지는 메뉴 아코디언 → 인스타 피드처럼 3열로 붙은 시그니처 타일 → 매장 카드. */

#container > #sub-bibida { background: var(--fl-cream); }
#sub-bibida { --fl-bibida-gap: clamp(100px, 10vw, 160px); color: var(--fl-ink); }
#sub-bibida p, #sub-bibida h3, #sub-bibida span, #sub-bibida strong { word-break: keep-all; overflow-wrap: break-word; }
body:has(#sub-bibida) { background: var(--fl-cream) !important; } /* gw.css 의 body #f8f8f8 !important 를 이 페이지에서만 덮는다 */
body:has(#sub-bibida) #container_wr, body:has(#sub-bibida) .gw-footer-container { background: var(--fl-cream); }

#sub-bibida .fl-bibida-head { margin-bottom: clamp(40px, 4vw, 56px); text-align: center; }
#sub-bibida .fl-bibida-display { font-family: var(--fl-font-display); font-size: clamp(44px, 5.2vw, 80px); font-weight: 700; line-height: .92; text-transform: uppercase; color: var(--fl-primary); }
#sub-bibida .fl-bibida-head-title { margin-top: 14px; font-size: clamp(20px, 1.8vw, 24px); font-weight: 800; color: var(--fl-dark); }

/* 사진 톤: 원본이 쨍해서 채도·대비를 살짝 낮춰 크림 톤 페이지와 어울리게 한다 */
#sub-bibida img { filter: saturate(.8) contrast(.94) brightness(1.03); }

/* ---------- 소개 ---------- */
#sub-bibida .fl-bibida-intro { padding: clamp(72px, 7vw, 112px) 0 var(--fl-bibida-gap); }
#sub-bibida .fl-bibida-intro-head { text-align: center; }
#sub-bibida .fl-bibida-kicker { font-family: var(--fl-font-display); font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--fl-mango); }
#sub-bibida .fl-bibida-intro-title { margin-top: 16px; font-size: clamp(32px, 4vw, 56px); font-weight: 800; line-height: 1.25; letter-spacing: -0.04em; color: var(--fl-dark); }
#sub-bibida .fl-bibida-intro-desc { margin-top: 24px; font-size: 17px; line-height: 1.85; color: var(--fl-ink-2); }
/* 사진 3장: 가운데는 크게, 양옆은 뒤에서 기울어진 채 겹쳐 있다가 화면에 들어오면 부채꼴로 펼쳐진다 */
#sub-bibida .fl-bibida-fan { position: relative; display: flex; justify-content: center; height: clamp(300px, 32vw, 460px); margin-top: clamp(48px, 5vw, 72px); }
#sub-bibida .fl-bibida-fan-item {
    position: absolute; top: 0; width: clamp(240px, 30vw, 440px); aspect-ratio: 4 / 3; overflow: hidden; border-radius: 28px;
    box-shadow: 0 24px 48px rgba(30, 53, 39, .18); transition: transform 1.2s cubic-bezier(.22, .8, .24, 1);
}
#sub-bibida .fl-bibida-fan-item img { width: 100%; height: 100%; object-fit: cover; }
#sub-bibida .fl-bibida-fan-item.is-c { z-index: 2; width: clamp(280px, 36vw, 520px); }
#sub-bibida .fl-bibida-fan-item.is-l { transform: translate(-72%, 12%) rotate(-8deg); }
#sub-bibida .fl-bibida-fan-item.is-r { transform: translate(72%, 12%) rotate(8deg); }
.fl-reveal-on #sub-bibida .fl-bibida-fan[data-fl-reveal]:not(.is-in) { opacity: 1; transform: none; } /* 상자는 제자리, 사진만 펼쳐진다 */
.fl-reveal-on #sub-bibida .fl-bibida-fan:not(.is-in) .fl-bibida-fan-item.is-l,
.fl-reveal-on #sub-bibida .fl-bibida-fan:not(.is-in) .fl-bibida-fan-item.is-r { transform: translate(0, 8%) rotate(0); }

/* ---------- 메뉴 아코디언 ---------- */
#sub-bibida .fl-bibida-menu { padding-bottom: var(--fl-bibida-gap); }
#sub-bibida .fl-bibida-cats { display: flex; gap: 12px; height: clamp(420px, 38vw, 540px); }
#sub-bibida .fl-bibida-cat { flex: 1 1 0; min-width: 0; transition: flex-grow .7s cubic-bezier(.22, .8, .24, 1); }
#sub-bibida .fl-bibida-cat.is-open { flex-grow: 3.2; }
#sub-bibida .fl-bibida-cat-link { position: relative; isolation: isolate; display: block; height: 100%; overflow: hidden; border-radius: 28px; background: var(--fl-dark); text-decoration: none; }
#sub-bibida .fl-bibida-cat-link img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
#sub-bibida .fl-bibida-cat-link::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(30, 53, 39, .1) 30%, rgba(30, 53, 39, .88) 100%); }
#sub-bibida .fl-bibida-cat.is-open img { transform: scale(1.04); }
#sub-bibida .fl-bibida-cat-no { position: absolute; top: 24px; left: 24px; font-family: var(--fl-font-display); font-size: 20px; font-weight: 700; color: var(--fl-white); }
#sub-bibida .fl-bibida-cat-body { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 8px; padding: 0 28px 30px; }
#sub-bibida .fl-bibida-cat-en { font-family: var(--fl-font-display); font-size: 16px; font-weight: 600; text-transform: uppercase; color: var(--fl-mango-on-dark); white-space: nowrap; }
#sub-bibida .fl-bibida-cat-name { font-size: clamp(22px, 2vw, 30px); font-weight: 800; color: var(--fl-white); white-space: nowrap; }
/* 설명·링크는 열린 칸에서만 보인다 */
#sub-bibida .fl-bibida-cat-desc, #sub-bibida .fl-bibida-cat-more { opacity: 0; transform: translateY(12px); transition: opacity .4s ease, transform .5s cubic-bezier(.22, .8, .24, 1); }
#sub-bibida .fl-bibida-cat-desc { font-size: 16px; line-height: 1.6; color: var(--fl-cream); white-space: nowrap; }
#sub-bibida .fl-bibida-cat-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 15px; font-weight: 700; color: var(--fl-white); }
#sub-bibida .fl-bibida-cat.is-open .fl-bibida-cat-desc, #sub-bibida .fl-bibida-cat.is-open .fl-bibida-cat-more { opacity: 1; transform: none; transition-delay: .25s; }
#sub-bibida .fl-bibida-menu-all { margin-top: 32px; text-align: center; }

/* ---------- 시그니처 피드 (레퍼런스: 동방푸드 인스타 피드) ----------
   위 제목 아래 간격 없는 3열 정사각형 타일. 사진 타일은 은은한 단색 바탕 위 흰 테두리 폴라로이드(사진 + 흰 띠에 Oswald 이름) */
#sub-bibida .fl-bibida-sig { padding-bottom: var(--fl-bibida-gap); }
#sub-bibida .fl-bibida-feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
#sub-bibida .fl-bibida-tile { position: relative; aspect-ratio: 1; overflow: hidden; }
#sub-bibida .fl-bibida-tile.is-all { background: var(--fl-primary); }
#sub-bibida .fl-bibida-tile.is-t1 { background: var(--fl-mango-soft); }
#sub-bibida .fl-bibida-tile.is-t2 { background: color-mix(in srgb, var(--fl-cream) 80%, var(--fl-mango) 20%); }
#sub-bibida .fl-bibida-tile.is-t3 { background: var(--fl-primary-soft); }
#sub-bibida .fl-bibida-tile.is-t4 { background: color-mix(in srgb, var(--fl-cream) 70%, var(--fl-leaf) 30%); }
#sub-bibida .fl-bibida-tile-inner { display: flex; flex-direction: column; align-items: center; height: 100%; padding: 6% 14% 0; box-sizing: border-box; }
/* 전체 메뉴 타일: 테마 그린 바탕 큰 영문 + 화살표 */
#sub-bibida .fl-bibida-tile-all { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; height: 100%; padding: 0 14%; box-sizing: border-box; text-decoration: none; }
#sub-bibida .fl-bibida-tile-all-en { font-family: var(--fl-font-display); font-size: clamp(48px, 5.6vw, 88px); font-weight: 700; line-height: .95; text-transform: uppercase; color: var(--fl-white); }
#sub-bibida .fl-bibida-tile-all-ko { font-size: 17px; font-weight: 700; color: var(--fl-cream); }
#sub-bibida .fl-bibida-tile-all-arrow {
    display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-top: 8px;
    border: 1.5px solid var(--fl-cream); border-radius: 50%; font-size: 22px; color: var(--fl-cream); transition: background .3s ease, color .3s ease, transform .3s ease;
}
#sub-bibida .fl-bibida-tile-all:hover .fl-bibida-tile-all-arrow { background: var(--fl-cream); color: var(--fl-primary); transform: translateX(6px); }
#sub-bibida .fl-bibida-tile-all:focus-visible { outline-offset: -8px; }
/* 사진 타일 */
#sub-bibida .fl-bibida-tile-brand { margin-bottom: 5%; font-family: var(--fl-font-display); font-size: clamp(13px, 1.2vw, 18px); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--fl-dark) 55%, transparent); }
#sub-bibida .fl-bibida-tile-frame {
    display: flex; flex-direction: column; width: 100%; padding: 6px; box-sizing: border-box; background: var(--fl-white);
    box-shadow: 0 16px 32px rgba(30, 53, 39, .12); transition: transform .6s cubic-bezier(.22, .8, .24, 1);
}
#sub-bibida .fl-bibida-tile-img { display: block; overflow: hidden; aspect-ratio: 4 / 3; }
#sub-bibida .fl-bibida-tile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
#sub-bibida .fl-bibida-tile-label { display: flex; flex-direction: column; gap: 4px; padding: 12px 10px 14px; }
#sub-bibida .fl-bibida-tile-en { font-family: var(--fl-font-display); font-size: clamp(20px, 2vw, 30px); font-weight: 700; line-height: 1; text-transform: uppercase; color: var(--fl-dark); }
#sub-bibida .fl-bibida-tile-name { font-size: 15px; font-weight: 800; color: var(--fl-ink); }
#sub-bibida .fl-bibida-tile:hover .fl-bibida-tile-frame { transform: translateY(-10px); }
#sub-bibida .fl-bibida-tile:hover .fl-bibida-tile-img img { transform: scale(1.06); }
.fl-reveal-on #sub-bibida .fl-bibida-tile:nth-child(3n+2) { transition-delay: .1s; }
.fl-reveal-on #sub-bibida .fl-bibida-tile:nth-child(3n) { transition-delay: .2s; }

/* ---------- 창원본점 카드 ---------- */
#sub-bibida .fl-bibida-cta { padding-bottom: var(--fl-bibida-gap); }
#sub-bibida .fl-bibida-cta-card { --fl-focus: var(--fl-white); position: relative; isolation: isolate; overflow: hidden; padding: clamp(64px, 8vw, 112px) 24px; border-radius: 40px; text-align: center; background: var(--fl-dark); }
#sub-bibida .fl-bibida-cta-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
#sub-bibida .fl-bibida-cta-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(30, 53, 39, .72); }
#sub-bibida .fl-bibida-cta-en { font-family: var(--fl-font-display); font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--fl-mango-on-dark); }
#sub-bibida .fl-bibida-cta-title { margin-top: 10px; font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -0.03em; color: var(--fl-white); }
#sub-bibida .fl-bibida-cta-desc { margin-top: 16px; font-size: 17px; line-height: 1.75; color: var(--fl-cream); }
#sub-bibida .fl-bibida-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 32px; }

@media (max-width: 1024px) {
    /* 아코디언 대신 2열 카드, 설명은 항상 보임 */
    #sub-bibida .fl-bibida-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }
    #sub-bibida .fl-bibida-cat-link { height: 320px; }
    #sub-bibida .fl-bibida-cat-link::after { background: linear-gradient(180deg, rgba(30, 53, 39, .2) 0%, rgba(30, 53, 39, .9) 75%); } /* 설명이 항상 보이므로 덮개를 위쪽부터 짙게 */
    #sub-bibida .fl-bibida-cat-desc, #sub-bibida .fl-bibida-cat-more { opacity: 1; transform: none; white-space: normal; }
    #sub-bibida .fl-bibida-cat-desc { white-space: normal; }
    #sub-bibida .fl-bibida-cta-card { border-radius: 28px; }
    #sub-bibida .fl-bibida-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #sub-bibida .fl-bibida-tile.is-all { grid-column: 1 / -1; aspect-ratio: auto; min-height: 200px; } /* 2열에서 9칸이 남지 않게 전체 메뉴 칸을 한 줄로 */
}
@media (max-width: 576px) {
    #sub-bibida .fl-bibida-intro-desc, #sub-bibida .fl-bibida-cta-desc { font-size: 16px; }
    #sub-bibida .fl-bibida-fan { height: 220px; }
    #sub-bibida .fl-bibida-fan-item { width: 46vw; border-radius: 20px; }
    #sub-bibida .fl-bibida-fan-item.is-c { width: 58vw; }
    #sub-bibida .fl-bibida-fan-item.is-l { transform: translate(-58%, 14%) rotate(-8deg); }
    #sub-bibida .fl-bibida-fan-item.is-r { transform: translate(58%, 14%) rotate(8deg); }
    #sub-bibida .fl-bibida-cats { grid-template-columns: 1fr; }
    #sub-bibida .fl-bibida-cat-link { height: 260px; border-radius: 24px; }
    #sub-bibida .fl-bibida-cat-body { padding: 0 22px 24px; }
    /* 좁은 2열: 정사각형을 풀고 내용 높이에 맞춘다 */
    #sub-bibida .fl-bibida-tile { aspect-ratio: auto; min-height: 220px; }
    #sub-bibida .fl-bibida-tile-inner { padding: 14px 12px 16px; }
    #sub-bibida .fl-bibida-tile-brand { margin-bottom: 10px; font-size: 12px; }
    #sub-bibida .fl-bibida-tile-frame { padding: 4px; }
    #sub-bibida .fl-bibida-tile-label { padding: 8px 6px 10px; }
    #sub-bibida .fl-bibida-tile-en { font-size: 17px; }
    #sub-bibida .fl-bibida-tile-name { font-size: 13px; }
    #sub-bibida .fl-bibida-tile-all { padding: 28px 24px; gap: 10px; }
    #sub-bibida .fl-bibida-tile-all-en { font-size: 40px; }
    #sub-bibida .fl-bibida-tile-all-arrow { width: 44px; height: 44px; font-size: 18px; }
    #sub-bibida .fl-bibida-cta-card { border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    #sub-bibida .fl-bibida-fan-item, #sub-bibida .fl-bibida-cat, #sub-bibida .fl-bibida-cat-link img, #sub-bibida .fl-bibida-tile-frame, #sub-bibida .fl-bibida-tile-img img { transition: none; }
}