@charset "utf-8";
/*
 * 프레쉬랩 서브페이지 공통 스타일 (story / store / bibida / muin / takoyaki 공용)
 * - 색·치수 토큰은 css/freshlab-brand.css 의 --fl-* 변수만 사용한다 (hex 직접 사용 금지).
 * - 히어로 + eyebrow/타이틀/리드 → 섹션(텍스트·이미지 그리드) → 포인트 리스트 → CTA 밴드 구조.
 * - 참고 구조: busanbcm-gnuboard/theme/busanbcm/page/css/bcm-sub.css (색은 가져오지 않음)
 */

#container > .fl-sub { padding-bottom: 0; background: var(--fl-white); }
.fl-sub { word-break: keep-all; }
/* gw.css 의 body { overflow-x: hidden } 은 body 를 스크롤 컨테이너로 만들어 position: sticky 가 동작하지 않는다.
   서브페이지에서는 가로 넘침만 잘라내는 clip 으로 바꿔 sticky 를 살린다 */
body:has(.fl-sub) { overflow-x: clip; overflow-y: visible; }
.fl-sub *, .fl-sub *::before, .fl-sub *::after { box-sizing: border-box; }
.fl-sub img { display: block; max-width: 100%; }

/* ---------- 히어로 ---------- */

.fl-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 480px;
    padding: 120px 0 64px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    overflow: hidden;
}
.fl-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(22, 32, 27, .32) 0%, rgba(16, 20, 17, .82) 100%);
}
.fl-hero .fl-container { position: relative; z-index: 1; }
.fl-hero .fl-eyebrow { color: var(--fl-mango-on-dark); } /* 어두운 사진 위 — 밝은 톤 */
.fl-hero .fl-title { color: #fff; }
.fl-hero .fl-lead { color: rgba(255, 255, 255, .86); max-width: 640px; }
.fl-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* 인용형 히어로(사진 없이 그라데이션) — 브랜드 스토리 헤드라인용 */
.fl-hero.is-quote {
    align-items: center;
    justify-content: center;
    min-height: 420px;
    padding: 110px 0;
    text-align: center;
    background-image: none;
    background: linear-gradient(135deg, var(--fl-primary-dark) 0%, var(--fl-primary) 55%, var(--fl-mango) 130%);
}
.fl-hero.is-quote::before { content: none; }
.fl-hero.is-quote .fl-container { max-width: 880px; }
.fl-hero.is-quote .fl-title { font-size: clamp(24px, 3.6vw, 42px); }
.fl-hero.is-quote .fl-lead { margin: 0 auto; }

/* ---------- 섹션 ---------- */

.fl-sec { padding: var(--fl-sec-pad) 0; }
.fl-sec.is-cream { background: var(--fl-cream); }
.fl-sec.is-ice { background: var(--fl-ice); }
.fl-sec.is-dark { background: var(--fl-dark); color: #fff; }
.fl-sec.is-dark .fl-title, .fl-sec.is-dark .fl-sec-head .fl-lead { color: #fff; }
.fl-sec.is-dark .fl-lead { color: rgba(255, 255, 255, .72); }
.fl-sec + .fl-sec { border-top: 0; }

/* ---------- 텍스트 + 이미지 2단 ---------- */

.fl-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.fl-split.is-reverse .fl-split-media { order: 2; }
.fl-split-media { border-radius: var(--fl-radius); overflow: hidden; box-shadow: var(--fl-shadow); aspect-ratio: 4 / 3; }
.fl-split-media img { width: 100%; height: 100%; object-fit: cover; }
.fl-split-media.is-tall { aspect-ratio: 3 / 4; }
.fl-split-media-pair { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.fl-split-media-pair .fl-split-media { aspect-ratio: auto; height: 100%; }
.fl-split-body h3 { margin-bottom: 18px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; line-height: 1.4; color: var(--fl-ink); }
.fl-split-body p { font-size: 16px; line-height: 1.85; color: var(--fl-ink-2); }
.fl-split-body p + p { margin-top: 14px; }
.fl-split-body .fl-btn { margin-top: 26px; }

/* ---------- 공통 그리드 ---------- */

.fl-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.fl-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fl-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* ---------- 해법·특징 번호 리스트 ---------- */

.fl-num-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.fl-num-item { display: flex; gap: 18px; padding: 28px; background: #fff; border-radius: var(--fl-radius-sm); box-shadow: var(--fl-shadow); }
.fl-num-badge {
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 50px; height: 50px; border-radius: 50%;
    background: var(--fl-primary-soft); color: var(--fl-primary-dark);
    font-family: var(--fl-font-en); font-weight: 800; font-size: 18px;
}
.fl-num-body h4 { margin-bottom: 6px; font-size: 17px; font-weight: 800; color: var(--fl-ink); }
.fl-num-body p { font-size: 14.5px; line-height: 1.7; color: var(--fl-ink-2); }

/* ---------- 추구 방향 3키워드 ---------- */

.fl-key-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fl-key-card { padding: 44px 26px; text-align: center; background: #fff; border-radius: var(--fl-radius); box-shadow: var(--fl-shadow); }
.fl-key-mark {
    display: flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%;
    background: var(--fl-primary); color: #fff;
    font-family: var(--fl-font-en); font-weight: 800; font-size: 22px;
}
.fl-key-card:nth-child(2) .fl-key-mark { background: var(--fl-mango); }
.fl-key-card:nth-child(3) .fl-key-mark { background: var(--fl-leaf); }
.fl-key-card h4 { margin-bottom: 10px; font-size: 19px; font-weight: 800; color: var(--fl-ink); }
.fl-key-card p { font-size: 14.5px; line-height: 1.75; color: var(--fl-ink-2); }

/* ---------- 사업 영역 5항목 ---------- */

.fl-area-list { display: grid; margin-top: 8px; border-top: 1px solid var(--fl-line); counter-reset: fl-area; }
.fl-area-row { display: flex; align-items: center; gap: 20px; padding: 22px 6px; border-bottom: 1px solid var(--fl-line); counter-increment: fl-area; }
.fl-area-row::before {
    content: counter(fl-area, decimal-leading-zero);
    flex: 0 0 auto; width: 40px;
    font-family: var(--fl-font-en); font-weight: 800; font-size: 15px; color: var(--fl-primary);
}
.fl-area-row span { font-size: 16px; font-weight: 600; color: var(--fl-ink); }

/* ---------- 브랜드 카드 3개 ---------- */

.fl-brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fl-brand-card {
    display: block; overflow: hidden; background: #fff; border-radius: var(--fl-radius);
    box-shadow: var(--fl-shadow); text-decoration: none; transition: transform .25s, box-shadow .25s;
}
.fl-brand-card:hover { box-shadow: var(--fl-shadow-lg); transform: translateY(-6px); }
.fl-brand-card-media { overflow: hidden; aspect-ratio: 4 / 3; }
.fl-brand-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.fl-brand-card:hover .fl-brand-card-media img { transform: scale(1.06); }
.fl-brand-card-body { padding: 24px 22px 26px; }
.fl-brand-card-body h4 { margin-bottom: 8px; font-size: 18px; font-weight: 800; color: var(--fl-ink); }
.fl-brand-card-body p { margin-bottom: 14px; font-size: 14px; line-height: 1.7; color: var(--fl-ink-2); min-height: 44px; }
.fl-brand-card-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--fl-primary); }
.fl-brand-card-link i { font-size: 12px; }

/* ---------- 메뉴 카테고리 카드 (bibida 4개) ---------- */

.fl-cat-card {
    display: block; position: relative; overflow: hidden; border-radius: var(--fl-radius);
    box-shadow: var(--fl-shadow); text-decoration: none; aspect-ratio: 3 / 4;
}
.fl-cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.fl-cat-card:hover img { transform: scale(1.08); }
.fl-cat-card::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(15,20,17,.78) 100%);
}
.fl-cat-card-label {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 20px 18px;
    color: #fff; font-size: 17px; font-weight: 800; text-align: center;
}
.fl-cat-card-label small { display: block; margin-top: 4px; font-family: var(--fl-font-en); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; color: rgba(255,255,255,.75); text-transform: uppercase; }

/* ---------- 이미지 갤러리 (시그니처 빙수 / 타코야끼 메뉴) ---------- */

.fl-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.fl-gallery.is-3col { grid-template-columns: repeat(3, 1fr); }
.fl-gallery-item { overflow: hidden; background: #fff; border-radius: var(--fl-radius-sm); box-shadow: var(--fl-shadow); }
.fl-gallery-media { aspect-ratio: 1 / 1; overflow: hidden; }
.fl-gallery-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.fl-gallery-item:hover .fl-gallery-media img { transform: scale(1.07); }
.fl-gallery-cap { padding: 14px 12px; font-size: 14.5px; font-weight: 700; text-align: center; color: var(--fl-ink); }

/* ---------- 이용 방법 단계 ---------- */

.fl-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: fl-step; }
.fl-step { position: relative; padding: 32px 20px; text-align: center; background: #fff; border-radius: var(--fl-radius-sm); box-shadow: var(--fl-shadow); counter-increment: fl-step; }
.fl-step::before {
    content: counter(fl-step);
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin: 0 auto 16px; border-radius: 50%;
    background: var(--fl-leaf); color: #fff; font-family: var(--fl-font-en); font-weight: 800; font-size: 17px;
}
.fl-step h4 { margin-bottom: 8px; font-size: 16px; font-weight: 800; color: var(--fl-ink); }
.fl-step p { font-size: 13.5px; line-height: 1.65; color: var(--fl-ink-2); }
.fl-step:not(:last-child)::after {
    content: ""; position: absolute; top: 54px; right: -14px; width: 20px; height: 2px; background: var(--fl-line);
}

/* ---------- 제철 과일 카드 ---------- */

.fl-season-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.fl-season-card { padding: 28px 24px; background: #fff; border-radius: var(--fl-radius-sm); box-shadow: var(--fl-shadow); }
.fl-season-label { display: block; margin-bottom: 12px; font-family: var(--fl-font-en); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fl-primary); }
.fl-season-card h4 { margin-bottom: 8px; font-size: 17px; font-weight: 800; color: var(--fl-ink); }
.fl-season-card p { font-size: 14px; line-height: 1.75; color: var(--fl-ink-2); }

/* ---------- 매장 두 공간 카드 (store.php) ---------- */

.fl-space-card { overflow: hidden; background: #fff; border-radius: var(--fl-radius); box-shadow: var(--fl-shadow); }
.fl-space-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.fl-space-media img { width: 100%; height: 100%; object-fit: cover; }
.fl-space-tag { position: absolute; top: 18px; left: 18px; }
.fl-space-body { padding: 26px 24px 28px; }
.fl-space-body h4 { margin-bottom: 10px; font-size: 20px; font-weight: 800; color: var(--fl-ink); }
.fl-space-body p { margin-bottom: 18px; font-size: 14.5px; line-height: 1.8; color: var(--fl-ink-2); }

/* ---------- 간판 이미지 2장 (store.php) ---------- */

.fl-sign-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; height: 380px; }
.fl-sign-grid .fl-media { height: 100%; border-radius: var(--fl-radius-sm); overflow: hidden; }
.fl-sign-grid .fl-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 정보 표 ---------- */

.fl-info-table { width: 100%; border-top: 2px solid var(--fl-ink); border-collapse: collapse; }
.fl-info-table th, .fl-info-table td { padding: 18px 22px; border-bottom: 1px solid var(--fl-line); font-size: 15.5px; line-height: 1.65; text-align: left; vertical-align: top; }
.fl-info-table th { width: 190px; font-weight: 700; color: var(--fl-ink); background: var(--fl-cream); }
.fl-info-table td { color: var(--fl-ink-2); background: #fff; }
.fl-info-table td a { color: var(--fl-primary-dark); font-weight: 700; }

/* ---------- 지도 ---------- */

.fl-map-wrap { overflow: hidden; border-radius: var(--fl-radius); box-shadow: var(--fl-shadow); }
.fl-map-wrap iframe { display: block; width: 100%; height: 420px; border: 0; }
.fl-map-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }

/* ---------- 공동구매·안내 박스 ---------- */

.fl-note-box { padding: 28px 30px; background: var(--fl-leaf-soft); border-radius: var(--fl-radius-sm); }
.fl-note-box h4 { margin-bottom: 10px; font-size: 17px; font-weight: 800; color: var(--fl-leaf); }
.fl-note-box p { font-size: 14.5px; line-height: 1.8; color: var(--fl-ink-2); }
.fl-note-box .fl-order-tel { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-family: var(--fl-font-en); font-size: 20px; font-weight: 800; color: var(--fl-leaf); text-decoration: none; }

/* ---------- 하단 CTA 밴드 ---------- */

.fl-cta-band { padding: 70px 0; background: var(--fl-dark); color: #fff; }
.fl-cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.fl-cta-band h3 { margin-bottom: 10px; font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; }
.fl-cta-band p { font-size: 15.5px; color: rgba(255, 255, 255, .74); }
.fl-cta-band-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- 반응형 ---------- */

@media screen and (max-width: 1280px) {
    .fl-grid-4 { grid-template-columns: repeat(3, 1fr); }
}

@media screen and (max-width: 1024px) {
    .fl-hero { min-height: 400px; padding: 96px 0 56px; }
    .fl-split { grid-template-columns: 1fr; gap: 32px; }
    .fl-split.is-reverse .fl-split-media { order: -1; }
    .fl-split-media-pair { height: 320px; }
    .fl-grid-3, .fl-grid-4, .fl-brand-grid, .fl-key-grid { grid-template-columns: repeat(2, 1fr); }
    .fl-num-list { grid-template-columns: 1fr; }
    .fl-gallery, .fl-gallery.is-3col { grid-template-columns: repeat(3, 1fr); }
    .fl-steps, .fl-season-grid { grid-template-columns: repeat(2, 1fr); }
    .fl-step:nth-child(2)::after { display: none; }
    .fl-cta-band-inner { text-align: center; justify-content: center; }
}

@media screen and (max-width: 768px) {
    .fl-hero { min-height: 360px; padding: 76px 0 48px; }
    .fl-hero-cta, .fl-cta-band-actions, .fl-map-actions { flex-direction: column; align-items: stretch; }
    .fl-hero-cta .fl-btn, .fl-cta-band-actions .fl-btn, .fl-map-actions .fl-btn { width: 100%; }
    .fl-grid-2, .fl-grid-3, .fl-grid-4, .fl-brand-grid, .fl-key-grid, .fl-season-grid { grid-template-columns: 1fr; }
    .fl-gallery, .fl-gallery.is-3col { grid-template-columns: repeat(2, 1fr); }
    .fl-steps { grid-template-columns: 1fr; }
    .fl-step::after { display: none; }
    .fl-sign-grid { grid-template-columns: 1fr; height: auto; }
    .fl-sign-grid .fl-media { height: 260px; }
    .fl-split-media-pair { grid-template-columns: 1fr; height: auto; }
    .fl-split-media-pair .fl-split-media { aspect-ratio: 4 / 3; }
    .fl-info-table th { width: 120px; padding: 14px 12px; font-size: 14px; }
    .fl-info-table td { padding: 14px 12px; font-size: 14px; }
    .fl-cta-band-inner { flex-direction: column; text-align: center; }
    .fl-note-box { padding: 24px 22px; }
}

@media screen and (max-width: 480px) {
    .fl-gallery, .fl-gallery.is-3col { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* 테마 #container 의 회색 배경·상단 여백 제거 (서브 탭바 바로 아래부터 페이지 섹션 시작) */
#container:has(> .fl-sub) { padding-top: 0; background: var(--fl-white); }

/* ---------------------------------------------------------------------
   심플 톤 보정 (크림 & 그린, 벤치마크 myeongbondang.co.kr 참고)
   서브 비주얼(사진)과 페이지 히어로(사진)가 연달아 나와 무거워지는 문제 →
   페이지 히어로는 사진 없이 크림 배경의 소개 밴드로 표시한다. (인용형 is-quote 는 그린 밴드 유지)
--------------------------------------------------------------------- */
.fl-hero:not(.is-quote) {
    background-image: none !important; background-color: var(--fl-cream);
    color: var(--fl-ink); min-height: 0; padding: 88px 0 80px; align-items: center; text-align: center;
}
.fl-hero:not(.is-quote)::before { content: none; }
.fl-hero:not(.is-quote) .fl-container { max-width: 880px; }
.fl-hero:not(.is-quote) .fl-eyebrow { color: var(--fl-primary); }
.fl-hero:not(.is-quote) .fl-title { color: var(--fl-ink); }
.fl-hero:not(.is-quote) .fl-lead { color: var(--fl-ink-2); margin: 16px auto 0; }
.fl-hero:not(.is-quote) .fl-hero-cta { justify-content: center; }
.fl-hero:not(.is-quote) .fl-btn--white { background: var(--fl-primary); color: #fff; }
.fl-hero:not(.is-quote) .fl-btn--white:link, .fl-hero:not(.is-quote) .fl-btn--white:visited { color: #fff; }
.fl-hero:not(.is-quote) .fl-btn--ghost-white { border-color: var(--fl-ink); }
.fl-hero:not(.is-quote) .fl-btn--ghost-white:link, .fl-hero:not(.is-quote) .fl-btn--ghost-white:visited { color: var(--fl-ink); }
.fl-hero:not(.is-quote) .fl-btn--ghost-white:hover { background: var(--fl-ink); color: #fff; }
@media (max-width: 576px) { .fl-hero:not(.is-quote) { padding: 60px 0 56px; } }

/* 브랜드 아이콘이 들어간 원형 마크 */
.fl-key-mark--ico .fl-ico { font-size: 32px; }
.fl-num-badge--ico .fl-ico { font-size: 26px; }
.fl-num-badge--ico { width: 56px; height: 56px; }
.fl-biz-body .fl-ico-badge, .fl-flow-card .fl-ico-badge { margin-bottom: 10px; }
.fl-step .fl-ico-badge { margin: 0 auto 10px; }
.fl-split-body > .fl-ico-badge { display: flex; }

/* ---------- 스크롤 등장 애니메이션 (page/js/fl-sub.js) — 메인 '추구하는 방향'과 같은 곡선·거리 ---------- */
.fl-reveal-on [data-fl-reveal] { transition: opacity .9s ease, transform .9s cubic-bezier(.22, .8, .24, 1); }
.fl-reveal-on [data-fl-reveal]:not(.is-in) { opacity: 0; transform: translateY(48px); }
.fl-reveal-on [data-fl-reveal="left"]:not(.is-in) { transform: translateX(-80px); }
.fl-reveal-on [data-fl-reveal="right"]:not(.is-in) { transform: translateX(80px); }
/* 목록 안에서는 차례로 */
.fl-reveal-on li[data-fl-reveal]:nth-child(2) { transition-delay: .12s; }
.fl-reveal-on li[data-fl-reveal]:nth-child(3) { transition-delay: .24s; }

/* PC 에서만 줄바꿈 */
.fl-br-pc { display: inline; }
@media (max-width: 768px) { .fl-br-pc { display: none; } }