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

:root {
    /* 색 — 크림 & 그린 (클라이언트 지정 테마 컬러), 벤치마크: 여백 넓은 심플·고가독 톤 */
    --fl-primary: #2f6b45;        /* 그린: 주 버튼·강조 (테마 컬러) */
    --fl-primary-dark: #22523a;
    --fl-primary-soft: #e4ede2;
    --fl-mango: #b85235;          /* 포인트(러스트 오렌지): 별점·보조 강조 — 토큰 이름은 기존 호환을 위해 유지 */
    --fl-mango-soft: #f5e2da;
    --fl-mango-on-dark: #eeac93;  /* 딥그린 배경 위 포인트(같은 계열 밝은 톤) — 딥그린 6.9:1, 스크롤 헤더 4.6:1 */
    --fl-leaf: #5c8a4f;           /* 연한 그린: 신선·무인과일 */
    --fl-leaf-soft: #eaf0e2;
    --fl-ice: #f1f0e4;            /* 연한 크림그린: 교차 배경 */
    --fl-ink: #1f2a22;            /* 본문·제목 */
    --fl-ink-2: #4d5a50;          /* 보조 본문 */
    --fl-ink-3: #8b948c;          /* 캡션·비활성 */
    --fl-line: #e3dfd0;
    --fl-cream: #f5efe6;          /* 크림: 섹션 교차 배경 (테마 컬러) */
    --fl-white: #ffffff;
    --fl-dark: #1e3527;           /* 딥 그린: 푸터·다크 밴드 */

    /* 타이포 */
    --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(31, 42, 34, .06);
    --fl-shadow-lg: 0 14px 34px rgba(31, 42, 34, .10);
    --fl-sec-pad: 120px;
    --fl-header-h: 88px;

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

@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; } }