@charset "utf-8";
/* 해든네이처 브랜드 토큰 — 색·폰트·공통 컴포넌트의 단일 기준.
   페이지·섹션 CSS는 이 변수만 참조하고 색상 hex를 직접 쓰지 않는다. */

:root {
    /* 색 — 크림 & 초콜릿 브라운 & 캐러멜 (해든네이처 땅콩오일 톤, 벤치: 크림 배경·딥 브라운 밴드·캐러멜 강조) */
    --fl-primary: #a55f2a;        /* 캐러멜: 주 버튼·강조 — 흰 글자 4.9:1 */
    --fl-primary-dark: #7e4520;
    --fl-primary-soft: #f3e3cf;
    --fl-mango: #c9722f;          /* 포인트(밝은 캐러멜): 별점·보조 강조 — 토큰 이름은 기존 호환을 위해 유지 */
    --fl-mango-soft: #f6e4d2;
    --fl-mango-on-dark: #f2a15e;  /* 딥 브라운 배경 위 포인트 — #1c110a 대비 8.6:1 */
    --fl-leaf: #8a6a3e;           /* 보조 브라운(땅콩 껍질) */
    --fl-leaf-soft: #efe6d6;
    --fl-ice: #f3ebdf;            /* 연한 베이지: 교차 배경 */
    --fl-ink: #2a1a10;            /* 본문·제목 */
    --fl-ink-2: #5e4a3a;          /* 보조 본문 */
    --fl-ink-3: #978574;          /* 캡션·비활성 */
    --fl-line: #e6dacb;
    --fl-cream: #f8f2eb;          /* 크림: 기본·교차 배경 */
    --fl-sand: #ede3d2;           /* 샌드 베이지: 비교표·강조 밴드 */
    --fl-white: #ffffff;
    --fl-dark: #1c110a;           /* 딥 초콜릿 브라운: 푸터·다크 밴드 */

    /* 타이포 */
    --fl-font: "Pretendard Variable", "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    --fl-font-en: "Outfit", "Pretendard Variable", sans-serif;
    --fl-font-display: "Oswald", var(--fl-font-en); /* 메인 대형 영문 타이포(컨덴스드) — index.php 에서만 불러온다 */

    /* 치수 */
    --fl-container: 1280px;
    --fl-gutter: 20px;
    --fl-radius: 14px;
    --fl-radius-sm: 10px;
    --fl-shadow: 0 6px 20px rgba(42, 26, 16, .06);
    --fl-shadow-lg: 0 14px 34px rgba(42, 26, 16, .10);
    --fl-sec-pad: 120px;
    --fl-header-h: 88px;

    /* 키보드 포커스 링 — 밝은 배경 기본값. 어두운·그린 배경 영역에서는 --fl-focus 를 흰색으로 재정의한다 */
    --fl-focus: var(--fl-dark);

    /* 반응형 최소 폭 — 이 폭 아래로는 레이아웃을 더 줄이지 않는다 */
    --fl-min-width: 320px;
    /* 루트 가로 스크롤 위치(음수) — js/fl-global.js 가 갱신, fixed 헤더 내용을 문서와 함께 움직이는 데 쓴다 */
    --fl-root-scroll-x: 0px;
}

/* 320px 아래에서는 더 이상 레이아웃을 줄이지 않고 html이 가로 스크롤을 맡는다(gw.css 의 html overflow-x:hidden 재정의) */
html { overflow-x: auto; }
body { overflow-x: hidden; }

@media (max-width: 319px) {
    html, body { min-width: var(--fl-min-width); }

    /* vw 기준 폭을 쓰는 푸터도 문서의 320px 바닥값을 유지한다 */
    .gw-footer-container, #ft, #ft_wr { min-width: var(--fl-min-width); }

    /* 뷰포트에 고정되는 전체 폭 요소는 body 의 최소 폭을 상속하지 않는다 */
    #loading-screen, #hd, #mob-gnb, .fixed-side-menu { min-width: var(--fl-min-width); }
}

/* fixed 헤더 내용을 루트 가로 스크롤 위치에 맞춘다(320px 미만에서 가로 스크롤할 때만 값이 생긴다) */
#hd #hd_wrapper { left: var(--fl-root-scroll-x); }

@media (max-width: 1280px) {
    :root { --fl-header-h: 72px; }
}
@media (max-width: 1024px) {
    :root { --fl-sec-pad: 80px; }
}
@media (max-width: 576px) {
    :root { --fl-sec-pad: 60px; --fl-gutter: 16px; --fl-radius: 16px; --fl-header-h: 64px; }
}

/* 키보드 포커스 표시 (WCAG 2.4.7) — reset.css 의 *:focus{outline:none} 보다 구체적인 선택자로 되살린다.
   마우스 클릭에는 나타나지 않고 키보드 탐색 시에만 3px 링을 보여준다. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible { outline: 3px solid var(--fl-focus); outline-offset: 3px; }
#ft, #mob-gnb { --fl-focus: var(--fl-white); }

/* 공통 컴포넌트 (fl- 접두어) */
/* --fl-container 는 콘텐츠 폭. 좌우 여백(--fl-gutter)은 바깥에 더해 실제 콘텐츠가 1280px 가 되게 한다 */
.fl-container { max-width: calc(var(--fl-container) + 2 * var(--fl-gutter)); margin: 0 auto; padding: 0 var(--fl-gutter); box-sizing: border-box; }
.fl-eyebrow { display: inline-block; font-family: var(--fl-font-en); font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fl-primary); margin-bottom: 14px; }
.fl-title { font-family: var(--fl-font); font-size: clamp(26px, 3.4vw, 44px); font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; color: var(--fl-ink); word-break: keep-all; }
.fl-lead { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.75; color: var(--fl-ink-2); word-break: keep-all; }
.fl-sec-head { text-align: center; margin-bottom: 56px; }
.fl-sec-head .fl-lead { margin-top: 16px; }
@media (max-width: 576px) { .fl-sec-head { margin-bottom: 36px; } }

.fl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 28px; border-radius: 999px; font-family: var(--fl-font); font-size: 16px; font-weight: 700; text-decoration: none; transition: background .2s, color .2s, border-color .2s, transform .2s; cursor: pointer; border: 1.5px solid transparent; box-sizing: border-box; }
.fl-btn:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
    .fl-btn, .fl-btn:hover { transition: none; transform: none; }
}
.fl-btn--primary { background: var(--fl-primary); color: #fff; }
.fl-btn--primary:hover { background: var(--fl-primary-dark); color: #fff; }
.fl-btn--line { background: transparent; color: var(--fl-ink); border-color: var(--fl-ink); }
.fl-btn--line:hover { background: var(--fl-ink); color: #fff; }
.fl-btn--white { background: #fff; color: var(--fl-ink); }
.fl-btn--white:hover { background: var(--fl-ink); color: #fff; }
.fl-btn--ghost-white { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.fl-btn--ghost-white:hover { background: #fff; color: var(--fl-ink); }

.fl-chip { display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--fl-primary-soft); color: var(--fl-primary-dark); }
.fl-chip--mango { background: var(--fl-mango-soft); color: #8a3a24; }
.fl-chip--leaf { background: var(--fl-leaf-soft); color: var(--fl-leaf); }

.fl-card { background: #fff; border-radius: var(--fl-radius); box-shadow: var(--fl-shadow); overflow: hidden; }
.fl-img-cover { width: 100%; height: 100%; object-fit: cover; display: block; }

/* reset.css 의 a:link / a:visited(0,1,1)가 버튼 글자색을 덮지 않도록 링크 상태까지 지정 */
.fl-btn--primary:link, .fl-btn--primary:visited { color: #fff; }
.fl-btn--line:link, .fl-btn--line:visited { color: var(--fl-ink); }
.fl-btn--line:hover { color: #fff; }
.fl-btn--white:link, .fl-btn--white:visited { color: var(--fl-ink); }
.fl-btn--white:hover { color: #fff; }
.fl-btn--ghost-white:link, .fl-btn--ghost-white:visited { color: #fff; }
.fl-btn--ghost-white:hover { color: var(--fl-ink); }

/* 브랜드 아이콘 (lib/fl_icon.php 인라인 SVG) — 감싸는 요소 색을 따른다 */
.fl-ico { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; flex-shrink: 0; }
.fl-ico-badge { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--fl-primary-soft); color: var(--fl-primary); font-size: 34px; margin-bottom: 16px; }
.fl-ico-badge.is-sm { width: 52px; height: 52px; font-size: 28px; margin-bottom: 12px; }
.fl-ico-badge.is-mango { background: var(--fl-mango-soft); color: #8a3a24; }
.fl-ico-badge.is-leaf { background: var(--fl-leaf-soft); color: var(--fl-leaf); }
@media (max-width: 576px) { .fl-ico-badge { width: 54px; height: 54px; font-size: 28px; } }

/* 외곽선 알약 링크 (View more·소식 전체보기·더보기) — 메인·서브 공용 */
.fl-pill-link {
    display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 26px; box-sizing: border-box;
    border: 1.5px solid var(--fl-dark); border-radius: 999px;
    font-size: 16px; font-weight: 700; text-decoration: none; transition: background .2s ease, color .2s ease;
}
.fl-pill-link:link, .fl-pill-link:visited { color: var(--fl-dark); }
.fl-pill-link:hover { background: var(--fl-dark); color: var(--fl-cream); }
@media (prefers-reduced-motion: reduce) { .fl-pill-link { transition: none; } }

/* 오늘의 과일·타코야끼 메뉴 카드(skin/latest/fl_fruit 등) — 메인·서브 공용.
   라운드 카드: 위 사진, 아래 흰 영역에 제목(한 줄, 넘치면 …)·날짜. 호버·키보드 포커스 시 사진 확대 */
.fl-fruit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
/* 라운드 카드: 위 사진, 아래 흰 영역에 제목(한 줄, 넘치면 …)·날짜. 호버·키보드 포커스 시 사진 확대 */
.fl-fruit-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 24px; background: var(--fl-white); border: 1px solid var(--fl-line); text-decoration: none; }
.fl-fruit-card-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--fl-ice); }
.fl-fruit-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.fl-fruit-card:hover .fl-fruit-card-img img, .fl-fruit-card:focus-visible .fl-fruit-card-img img { transform: scale(1.08); }
.fl-fruit-card:focus-visible { outline-offset: 3px; }
.fl-fruit-card-body { padding: 16px 20px 20px; }
.fl-fruit-card-title { font-size: 16px; font-weight: 700; color: var(--fl-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-fruit-card-date { display: block; margin-top: 6px; font-family: var(--fl-font-en); font-size: 14px; color: var(--fl-ink-2); }
@media (prefers-reduced-motion: reduce) {
    .fl-fruit-card-img img { transition: none; }
    .fl-fruit-card:hover .fl-fruit-card-img img, .fl-fruit-card:focus-visible .fl-fruit-card-img img { transform: none; }
}
@media (max-width: 1024px) { .fl-fruit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .fl-fruit-card { border-radius: 18px; } }