@charset "utf-8";
/* 브랜드 스토리 페이지 전용 스타일 (공통은 fl-sub.css).
   가게 소개와 같은 톤(크림·딥그린·라운드·Oswald·등장 애니메이션)을 쓰되 배치는 다르게 —
   가운데 인용 → 왼쪽 고정 사진 + 장별 이야기 → 딥그린 둥근 패널 4가지 → 가로 사진 링크 카드 2개. */

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

#sub-story .fl-story-display {
    font-family: var(--fl-font-display); font-size: clamp(56px, 7vw, 112px); font-weight: 700; line-height: .92;
    text-transform: uppercase; color: var(--fl-primary);
}
#sub-story .fl-story-display.is-sm { font-size: clamp(44px, 5.6vw, 84px); }
#sub-story .fl-story-head-title { margin-top: 14px; font-size: clamp(20px, 1.8vw, 24px); font-weight: 800; color: var(--fl-dark); }

/* ---------- 가운데 인용 ---------- */
#sub-story .fl-story-quote { padding: clamp(72px, 7vw, 112px) 0 var(--fl-story-gap); text-align: center; }
#sub-story .fl-story-since { font-family: var(--fl-font-display); font-size: 17px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fl-mango); }
#sub-story .fl-story-quote-text { margin-top: 20px; font-size: clamp(28px, 3.6vw, 52px); font-weight: 800; line-height: 1.35; letter-spacing: -0.035em; color: var(--fl-dark); }
#sub-story .fl-story-quote-sub { margin-top: 28px; font-size: 17px; line-height: 1.75; color: var(--fl-ink-2); }
#sub-story .fl-br-mo { display: none; }

/* ---------- 걸어온 길 ---------- */
#sub-story .fl-story-journey { padding-bottom: var(--fl-story-gap); }
#sub-story .fl-story-journey-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
#sub-story .fl-story-journey-aside { position: sticky; top: calc(var(--fl-hd-total) + 24px); }
#sub-story .fl-story-journey-photo { position: relative; overflow: hidden; aspect-ratio: 4 / 3; margin-top: 36px; border-radius: 28px; background: var(--fl-primary-soft); }
#sub-story .fl-story-journey-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .6s ease, transform 1.2s cubic-bezier(.22, .8, .24, 1); }
#sub-story .fl-story-journey-photo img.is-on { opacity: 1; transform: none; }

/* 장 목록 — 왼쪽 세로선 위에 점, 지금 읽는 장은 진하게 */
#sub-story .fl-story-chapters { position: relative; padding-left: 36px; }
#sub-story .fl-story-chapters::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 7px; width: 2px; background: var(--fl-line); }
#sub-story .fl-story-chapter { position: relative; padding: clamp(80px, 10vw, 150px) 0; opacity: .35; transition: opacity .5s ease; }
#sub-story .fl-story-chapter:first-child { padding-top: clamp(24px, 3vw, 40px); }
#sub-story .fl-story-chapter.is-on { opacity: 1; }
#sub-story .fl-story-chapter::before {
    content: ""; position: absolute; left: -36px; width: 16px; height: 16px; margin-top: 4px; box-sizing: border-box;
    border: 2px solid var(--fl-primary); border-radius: 50%; background: var(--fl-cream); transition: background .3s ease;
}
#sub-story .fl-story-chapter.is-on::before { background: var(--fl-primary); }
#sub-story .fl-story-chapter-photo { display: none; }
#sub-story .fl-story-chapter-meta { display: flex; align-items: baseline; gap: 12px; font-family: var(--fl-font-display); font-size: 17px; font-weight: 600; text-transform: uppercase; color: var(--fl-mango); }
#sub-story .fl-story-chapter-no { font-size: 15px; color: var(--fl-primary); }
#sub-story .fl-story-chapter-title { margin-top: 12px; font-size: clamp(26px, 2.8vw, 40px); font-weight: 800; line-height: 1.3; letter-spacing: -0.035em; color: var(--fl-dark); }
#sub-story .fl-story-chapter-desc { margin-top: 18px; max-width: 480px; font-size: 17px; line-height: 1.85; color: var(--fl-ink-2); }

/* ---------- 그래서 지키는 것 (헤더·서브 비주얼과 같은 좌우 여백의 딥그린 둥근 패널) ---------- */
#sub-story .fl-story-values { padding: 0 40px; }
#sub-story .fl-story-values-panel { padding: clamp(80px, 8vw, 128px) 0; border-radius: 40px; background: var(--fl-dark); --fl-focus: var(--fl-white); }
#sub-story .fl-story-values .fl-story-display { color: var(--fl-mango-on-dark); }
#sub-story .fl-story-values .fl-story-head-title { color: var(--fl-white); }
#sub-story .fl-story-values-head { margin-bottom: 56px; text-align: center; }
/* 한 줄에 하나씩: 번호 | 제목 | 설명. 줄마다 왼쪽에서 차례로 밀려 들어온다 */
#sub-story .fl-story-values-list { max-width: 1080px; margin: 0 auto; border-top: 1px solid color-mix(in srgb, var(--fl-cream) 28%, transparent); }
#sub-story .fl-story-values-list li { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.5fr); gap: 32px; align-items: center; padding: 36px 8px; border-bottom: 1px solid color-mix(in srgb, var(--fl-cream) 28%, transparent); }
#sub-story .fl-story-value-no { font-family: var(--fl-font-display); font-size: clamp(44px, 4vw, 64px); font-weight: 700; line-height: 1; color: var(--fl-mango-on-dark); }
#sub-story .fl-story-values-list h4 { font-size: clamp(20px, 1.8vw, 24px); font-weight: 800; color: var(--fl-white); }
#sub-story .fl-story-values-list p { font-size: 16px; line-height: 1.75; color: color-mix(in srgb, var(--fl-cream) 85%, transparent); }
.fl-reveal-on #sub-story .fl-story-values-list li:nth-child(2) { transition-delay: .15s; }
.fl-reveal-on #sub-story .fl-story-values-list li:nth-child(3) { transition-delay: .3s; }
.fl-reveal-on #sub-story .fl-story-values-list li:nth-child(4) { transition-delay: .45s; }

/* ---------- 더 알아보기: 가로 사진 링크 카드 ---------- */
#sub-story .fl-story-more { padding: var(--fl-story-gap) 0; }
#sub-story .fl-story-more-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#sub-story .fl-story-more-card { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; min-height: clamp(260px, 22vw, 340px); padding: 32px; border-radius: 28px; background: var(--fl-dark); text-decoration: none; }
#sub-story .fl-story-more-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
#sub-story .fl-story-more-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(30, 53, 39, .1) 20%, rgba(30, 53, 39, .85) 100%); }
#sub-story .fl-story-more-card:hover img, #sub-story .fl-story-more-card:focus-visible img { transform: scale(1.06); }
#sub-story .fl-story-more-body { display: flex; flex-direction: column; gap: 6px; }
#sub-story .fl-story-more-en { font-family: var(--fl-font-display); font-size: 17px; font-weight: 600; text-transform: uppercase; color: var(--fl-mango-on-dark); }
#sub-story .fl-story-more-title { font-size: clamp(22px, 2vw, 28px); font-weight: 800; color: var(--fl-white); }
#sub-story .fl-story-more-arrow {
    display: flex; flex: none; align-items: center; justify-content: center; width: 56px; height: 56px;
    border: 1.5px solid var(--fl-cream); border-radius: 50%; color: var(--fl-cream); font-size: 22px; transition: background .25s ease, color .25s ease;
}
#sub-story .fl-story-more-card:hover .fl-story-more-arrow { background: var(--fl-cream); color: var(--fl-dark); }

@media (max-width: 1024px) {
    #sub-story .fl-story-journey-inner { grid-template-columns: 1fr; gap: 12px; }
    #sub-story .fl-story-journey-aside { position: static; }
    #sub-story .fl-story-journey-photo { display: none; }
    /* 모바일·태블릿: 고정 사진 대신 각 장 위에 사진 */
    #sub-story .fl-story-chapter { opacity: 1; padding: 40px 0; }
    #sub-story .fl-story-chapter::before { background: var(--fl-primary); }
    #sub-story .fl-story-chapter-photo { display: block; overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: 24px; border-radius: 24px; }
    #sub-story .fl-story-chapter-photo img { width: 100%; height: 100%; object-fit: cover; }
    #sub-story .fl-story-chapter::before { margin-top: calc(28px + 75%); } /* 사진(폭의 3/4 높이) 아래 제목 줄에 점을 맞춘다 */
    #sub-story .fl-story-values { padding: 0 20px; }
    #sub-story .fl-story-values-panel { border-radius: 28px; }
    #sub-story .fl-story-values-list li { grid-template-columns: 88px minmax(0, 1fr); gap: 8px 24px; }
    #sub-story .fl-story-value-no { grid-row: span 2; }
}
@media (max-width: 768px) {
    #sub-story .fl-br-mo { display: inline; }
    #sub-story .fl-story-more-list { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
    #sub-story .fl-story-values { padding: 0 16px; }
    #sub-story .fl-story-values-panel { border-radius: 24px; }
    #sub-story .fl-story-values-list li { grid-template-columns: 1fr; padding: 28px 4px; }
    #sub-story .fl-story-value-no { grid-row: auto; margin-bottom: 8px; }
    #sub-story .fl-story-quote-sub, #sub-story .fl-story-chapter-desc { font-size: 16px; }
    #sub-story .fl-story-more-card { min-height: 220px; padding: 24px; border-radius: 24px; }
    #sub-story .fl-story-more-arrow { width: 48px; height: 48px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    #sub-story .fl-story-journey-photo img, #sub-story .fl-story-chapter, #sub-story .fl-story-more-card img { transition: none; }
}