@charset "utf-8";
/* 프레쉬랩 공통 헤더 — head.php 에서 모든 페이지에 불러온다. 색·폰트는 freshlab-brand.css 토큰만 사용. */

/* ---------------------------------------------------------------------
   공통 헤더 (#hd.fl-hd) — 메인·서브페이지 공용
   - 크림 화면 위에 떠 있는 딥그린 알약형 바. 1차 메뉴는 영문(Oswald) + 한글 두 줄(구분선 없음).
   - 1024px 이하는 화면 폭 전체의 딥그린 바 + 햄버거.
   - 메인은 고정(fixed, head.php 인라인), 서브페이지는 스크롤과 함께 올라간다(서브 분류 메뉴 바가 상단에 고정되므로).
--------------------------------------------------------------------- */
:root { --fl-hd-total: calc(var(--fl-header-h) + 16px); } /* 알약 헤더 높이 + 위 여백 — 히어로·전체메뉴 시작 위치 */
@media (max-width: 1024px) { :root { --fl-hd-total: var(--fl-header-h); } }

#hd.fl-hd, #hd.fl-hd:not(.black) { background: transparent !important; --fl-focus: var(--fl-white); }
/* head.css 의 width:100vw 는 세로 스크롤바 폭까지 포함해 헤더 오른쪽이 스크롤바 밑으로 들어간다 → 스크롤바를 뺀 폭(100%)으로 맞춰 좌우 여백이 정확히 같게 */
#hd.fl-hd { width: 100%; }
#hd.fl-hd::before { display: none; }
#hd.fl-hd #hd_wrapper {
    width: auto; max-width: none; margin: 16px 40px 0; padding: 0 28px 0 40px; box-sizing: border-box; /* 화면 양옆 40px 띄움 */
    background: var(--fl-dark); border-radius: 999px;
}
#hd.fl-hd .gnb-container { display: flex; align-items: center; height: var(--fl-header-h); }
/* 메인에서 스크롤하면(.is-scrolled) 그림자와 살짝 밝은 딥그린으로 바꿔, 같은 딥그린 섹션(문의 등) 위에서도 헤더 경계가 보이게 한다 */
#hd.fl-hd #hd_wrapper { transition: background .3s ease, box-shadow .3s ease; }
#hd.fl-hd.is-scrolled #hd_wrapper { background: color-mix(in srgb, var(--fl-dark) 86%, var(--fl-cream)); box-shadow: 0 10px 30px rgba(0, 0, 0, .28); }
@media (prefers-reduced-motion: reduce) { #hd.fl-hd #hd_wrapper { transition: none; } }

#hd.fl-hd #logo { position: relative; top: auto; transform: none; flex: none; width: auto; height: 40px; padding-right: 32px; }
#hd.fl-hd #logo, #hd.fl-hd #logo > a { display: flex; align-items: center; }
#hd.fl-hd #logo > a { width: auto; height: 100%; }
#hd.fl-hd #logo > a > img { position: static; transform: none; height: 40px; }
#hd.fl-hd #logo .light-mode-logo { display: none; }
#hd.fl-hd #logo .dark-mode-logo { opacity: 1 !important; }
/* 흰 로고 파일(tail_logo_img)이 없으면 기본 로고를 그대로 보여 준다 */
#hd.fl-hd #logo .light-mode-logo:only-child { display: block; opacity: 1 !important; }

/* 1차 메뉴: 영문 + 한글 두 줄 */
#hd.fl-hd #gnb { flex: 1; justify-content: flex-start; height: 100%; }
#hd.fl-hd #gnb .gnb_wrap { width: 100%; }
#hd.fl-hd #gnb .gnb_wrap > ul { place-content: stretch; }
#hd.fl-hd #gnb .gnb_1dli { flex: 1 1 0; padding: 0; height: 100%; justify-content: flex-start; text-align: left; }
#hd.fl-hd #gnb .gnb_1dli::before { display: none; }
#hd.fl-hd #gnb .gnb_1da {
    display: flex; flex-direction: column; justify-content: center; gap: 2px; width: 100%; height: 100%; padding: 0 24px !important;
    color: var(--fl-cream) !important; font-weight: 700;
}
#hd.fl-hd .gnb_1da_en { font-family: var(--fl-font-display); font-size: 21px; font-weight: 600; line-height: 1.05; text-transform: uppercase; letter-spacing: .01em; }
#hd.fl-hd .gnb_1da_ko { font-size: 13px; font-weight: 600; line-height: 1.3; color: color-mix(in srgb, var(--fl-cream) 82%, transparent); }
/* 현재 페이지 메뉴(.is-current, head.php)는 호버 때와 같은 글자 모양·포인트 색으로 항상 표시 */
#hd.fl-hd #gnb .gnb_1dli.is-current > .gnb_1da,
#hd.fl-hd #gnb .gnb_1dli.on > .gnb_1da,
#hd.fl-hd #gnb .gnb_1dli:hover > .gnb_1da { color: var(--fl-mango-on-dark) !important; }
#hd.fl-hd #gnb .gnb_1dli.is-current .gnb_1da_ko,
#hd.fl-hd #gnb .gnb_1dli.on .gnb_1da_ko,
#hd.fl-hd #gnb .gnb_1dli:hover .gnb_1da_ko { color: var(--fl-mango-on-dark); }
#hd.fl-hd #gnb .gnb_1da:focus-visible { outline-offset: -10px; }

/* 2차 메뉴: 알약 헤더 바로 아래에 간격 없이 붙어, 헤더와 같은 딥그린으로 위에서 아래로 펼쳐진다 */
#hd.fl-hd .gnb_2dul {
    top: 100%; left: 12px; width: max-content; min-width: 176px; padding: 0;
    background: var(--fl-dark); border-radius: 0 0 var(--fl-radius) var(--fl-radius);
    clip-path: inset(0 0 100% 0); transition: clip-path .35s cubic-bezier(.22, .8, .24, 1), opacity .2s ease, visibility .35s;
}
#hd.fl-hd.is-scrolled .gnb_2dul { background: color-mix(in srgb, var(--fl-dark) 86%, var(--fl-cream)); } /* 스크롤 시 헤더 톤과 같게 */
#hd.fl-hd .gnb_2dul::before { display: none; }
#hd.fl-hd .gnb_2dul.show { padding: 0; clip-path: inset(0); }
#hd.fl-hd .gnb_2dul .gnb_2dul_box { padding: 8px 0 14px; }
#hd.fl-hd .gnb_2da {
    padding: 0 22px; line-height: 44px; font-size: 16px; font-weight: 600; text-align: left;
    color: var(--fl-cream) !important; transform: none; transition: color .2s ease;
}
#hd.fl-hd .gnb_2da:hover,
#hd.fl-hd .gnb_2da:focus-visible { color: var(--fl-mango-on-dark) !important; text-decoration: none; } /* 호버·포커스도 밑줄 없이 포인트색만 */
/* 현재 페이지 하위메뉴: 밑줄 없이 포인트색만 */
#hd.fl-hd .gnb_2dli.is-current > .gnb_2da { color: var(--fl-mango-on-dark) !important; }
@media (prefers-reduced-motion: reduce) { #hd.fl-hd .gnb_2dul { transition: none; } }
#hd.fl-hd .gnb_2da:focus-visible { outline-offset: -4px; }

/* 전화 링크: 메뉴와 겹치지 않도록 흐름 배치 */
#hd.fl-hd .hd-tel-cta {
    position: static; transform: none; flex: none; margin-left: 8px; padding: 0 20px; min-height: 44px;
    border: 0; border-radius: 999px;
    font-family: var(--fl-font-en); font-size: 15px; font-weight: 600;
}
#hd.fl-hd a.hd-tel-cta:link, #hd.fl-hd a.hd-tel-cta:visited { color: var(--fl-cream); }
#hd.fl-hd .hd-tel-cta:hover, #hd.fl-hd a.hd-tel-cta:hover { background: var(--fl-cream); color: var(--fl-dark); }

/* 햄버거 버튼: 데스크톱에서는 숨기고(1차 메뉴가 모두 노출됨) 1280px 이하에서 44×44 로 노출 */
#hd.fl-hd #menu-btn { display: none; }
@media (max-width: 1280px) {
    #hd.fl-hd #hd_wrapper { margin: 16px 24px 0; padding: 0 20px 0 28px; }
    #hd.fl-hd #logo { padding-right: 0; }
    /* 전체 메뉴 버튼: 배경 없는 크림색 기본 햄버거, 열리면 닫기(X) 아이콘으로 바로 바뀐다(모양이 변하는 움직임 없음) */
    #hd.fl-hd #menu-btn {
        display: flex; align-items: center; justify-content: center; position: relative; top: auto; right: auto; transform: none;
        width: 44px; height: 44px; margin-left: auto; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--fl-cream);
    }
    #hd.fl-hd #menu-btn .fl-menu-ico { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
    #hd.fl-hd #menu-btn .is-close-ico, #hd.fl-hd #menu-btn.active .is-open-ico { display: none; }
    #hd.fl-hd #menu-btn.active .is-close-ico { display: block; }
    #hd.fl-hd #menu-btn.active { right: auto; }
    #hd.fl-hd #menu-btn:focus { outline: none; }
    #hd.fl-hd #menu-btn:focus-visible { outline: none; background: color-mix(in srgb, var(--fl-cream) 14%, transparent); } /* 키보드 포커스: 링 대신 옅은 바탕 */

    /* 메뉴가 열려도 헤더 바는 그대로, 그린 메뉴 패널은 헤더 바로 아래에서 시작 */
    #hd.fl-hd.on, #hd.fl-hd.on:not(.black) { background: transparent !important; }
    #hd.fl-hd #logo.on { display: block; }
    #hd.fl-hd #mob-gnb { top: var(--fl-hd-total); height: calc(100vh - var(--fl-hd-total)); height: calc(100dvh - var(--fl-hd-total)); }
    #hd.fl-hd #mob-gnb .menu-list { max-height: 100%; }
    #hd.fl-hd #mob-gnb .menu-list > ul > li > .dep01 { min-height: 48px; }
    #hd.fl-hd .hd_login { display: none !important; } /* 회원 링크(login)는 로고와 겹쳐 숨긴다 — 푸터에 있음 */
    body.on .ft-quick-container { display: none; } /* 메뉴가 열린 동안 오른쪽 빠른 메뉴가 목록을 가리지 않게 */

    /* ---- 전체 메뉴 패널: 크림 배경, 1차 = 영문·한글 두 줄 + 동그라미 아이콘, 2차 = 흰 둥근 카드 ---- */
    #hd.fl-hd #mob-gnb { background: var(--fl-cream); }
    #hd.fl-hd #mob-gnb > .gw-flex { height: 100%; }
    #hd.fl-hd #mob-gnb .menu-bg { display: none; }
    #hd.fl-hd #mob-gnb .menu-list {
        display: flex; flex-direction: column; width: 100%; max-width: 720px; height: 100%; margin: 0 auto;
        padding: 12px var(--fl-gutter, 20px) 32px; box-sizing: border-box; overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    #hd.fl-hd #mob-gnb .menu-list > ul > li { flex-direction: column; padding: 0; border-bottom: 1px solid var(--fl-line); }
    #hd.fl-hd #mob-gnb .menu-list > ul > li::before { display: none; }
    #hd.fl-hd #mob-gnb .menu-list > ul > li > .dep01 {
        display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; height: auto; min-height: 84px; padding: 0;
        line-height: 1.2; font-family: var(--fl-font); color: var(--fl-dark) !important; text-decoration: none;
    }
    #hd.fl-hd #mob-gnb .mob-1d-text { display: flex; flex-direction: column; gap: 4px; }
    #hd.fl-hd #mob-gnb .mob-1d-en { font-family: var(--fl-font-display); font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fl-mango); }
    #hd.fl-hd #mob-gnb .mob-1d-ko { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
    #hd.fl-hd #mob-gnb .mob-1d-ico {
        display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
        background: var(--fl-white); font-size: 16px; color: var(--fl-dark);
    }
    /* 펼치면 + → - 로만 바뀐다(색·회전 없음) */
    #hd.fl-hd #mob-gnb .mob-1d-ico .xi-minus, #hd.fl-hd #mob-gnb .menu-list > ul > li.open .mob-1d-ico .xi-plus { display: none; }
    #hd.fl-hd #mob-gnb .menu-list > ul > li.open .mob-1d-ico .xi-minus { display: block; }
    #hd.fl-hd #mob-gnb .menu-list > ul > li.is-current .mob-1d-ko { color: var(--fl-primary); }

    #hd.fl-hd #mob-gnb .dep02 { gap: 0; width: 100%; margin: 0 0 18px; padding: 6px; box-sizing: border-box; border-radius: 20px; background: var(--fl-white); overflow: hidden; }
    #hd.fl-hd #mob-gnb .dep02 > li { width: 100%; height: auto; padding: 0; line-height: 1.4; }
    #hd.fl-hd #mob-gnb .dep02 > li > a {
        display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 14px;
        font-family: var(--fl-font); font-size: 16px; font-weight: 600; color: var(--fl-ink-2) !important; transition: background .2s ease, color .2s ease;
    }
    #hd.fl-hd #mob-gnb .dep02 > li > a i { font-size: 14px; color: var(--fl-ink-3); }
    #hd.fl-hd #mob-gnb .dep02 > li > a:hover { background: var(--fl-cream); color: var(--fl-dark) !important; }
    /* 현재 페이지 하위메뉴: 옅은 크림 바탕 + 딥그린 굵은 글씨 */
    #hd.fl-hd #mob-gnb .dep02 > li.is-current > a { background: var(--fl-cream); color: var(--fl-dark) !important; font-weight: 800; }
    #hd.fl-hd #mob-gnb .dep02 > li.is-current > a i { color: var(--fl-dark); }

    /* 메뉴 아래 전화·문의 */
    #hd.fl-hd #mob-gnb .mob-gnb-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; padding-top: 28px; }
    #hd.fl-hd #mob-gnb .mob-gnb-foot a {
        display: flex; align-items: center; justify-content: center; gap: 8px; height: 54px; border-radius: 999px;
        font-size: 15px; font-weight: 800; text-decoration: none; transition: background .25s ease, color .25s ease;
    }
    #hd.fl-hd #mob-gnb a.mob-gnb-tel { background: var(--fl-dark); color: var(--fl-white) !important; font-family: var(--fl-font-en); }
    #hd.fl-hd #mob-gnb a.mob-gnb-tel:hover { background: var(--fl-primary); }
    #hd.fl-hd #mob-gnb a.mob-gnb-inquiry { border: 1.5px solid var(--fl-dark); color: var(--fl-dark) !important; }
    #hd.fl-hd #mob-gnb a.mob-gnb-inquiry:hover { background: var(--fl-dark); color: var(--fl-white) !important; }
}
@media (max-width: 360px) {
    #hd.fl-hd #mob-gnb .mob-gnb-foot { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
    #hd.fl-hd #hd_wrapper { margin: 0; padding: 0 var(--fl-gutter); border-radius: 0; }
}
@media (max-width: 576px) {
    #hd.fl-hd #logo, #hd.fl-hd #logo > a > img { height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
    #hd.fl-hd #menu-btn, #hd.fl-hd #mob-gnb .menu-list > ul > li { transition: none !important; }
    #hd.fl-hd #mob-gnb .menu-list > ul > li { transform: none; }
}

/* 본문 바로가기: 키보드 포커스 시 헤더 위에 딥그린 띠로 뚜렷하게 표시 */
#hd #skip_to_container a:focus { background: var(--fl-dark); color: var(--fl-white); font-size: 18px; height: 56px; line-height: 56px; outline: 3px solid var(--fl-mango-on-dark); outline-offset: -6px; }

/* ---------------------------------------------------------------------
   서브 헤더 (#container_title.fl-subhead, head.php) — 모든 서브페이지 공용
   - 화면 폭 가득 찬 비주얼(떠 있는 헤더 뒤까지): 대분류 영문(Oswald 대형) + 페이지 제목. 들어올 때 사진은 살짝 줌아웃, 글자는 떠오른다.
   - 비주얼 아래에 걸친 흰 상자 안에 같은 대분류의 페이지 탭. 기존 브레드크럼·드롭다운 분류 바를 대신한다.
--------------------------------------------------------------------- */
#container_title.fl-subhead { height: auto; padding: 0; background: transparent; }
.fl-subhead-visual {
    position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: center;
    height: calc(var(--fl-hd-total) + clamp(280px, 28vw, 420px)); padding-top: var(--fl-hd-total); box-sizing: border-box; background: var(--fl-dark);
}
.fl-subhead-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; animation: fl-subhead-zoom 1.8s cubic-bezier(.22, .8, .24, 1) both; }
.fl-subhead-visual::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(28, 17, 10, .45), rgba(28, 17, 10, .3) 40%, rgba(28, 17, 10, .62)); } /* 위쪽은 떠 있는 헤더와 겹쳐 조금 더 어둡게 */
.fl-subhead-text { padding: 0 20px; text-align: center; }
.fl-subhead-en {
    font-family: var(--fl-font-display); font-size: clamp(52px, 8vw, 128px); font-weight: 700; line-height: .95; letter-spacing: .005em;
    text-transform: uppercase; color: var(--fl-white); animation: fl-subhead-up .9s cubic-bezier(.22, .8, .24, 1) .1s both;
}
.fl-subhead-title { margin-top: 14px; font-size: clamp(17px, 1.5vw, 21px); font-weight: 700; color: var(--fl-cream); animation: fl-subhead-up .9s cubic-bezier(.22, .8, .24, 1) .25s both; }
@keyframes fl-subhead-zoom { from { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes fl-subhead-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* 페이지 탭: 비주얼 아래 모서리에 반쯤 걸친 흰 둥근 상자(딥그린 테두리), 현재 페이지는 포인트색 */
.fl-subtabs { position: relative; z-index: 2; display: flex; justify-content: center; margin-top: -32px; padding: 0 20px; }
.fl-subtabs ul {
    position: relative; /* 탭 offsetLeft 기준(tail.php 가 현재 탭을 가운데로 스크롤) */
    display: flex; align-items: center; gap: clamp(32px, 4vw, 72px); max-width: 100%; min-height: 64px; padding: 0 clamp(40px, 5vw, 96px);
    box-sizing: border-box; border: 1.5px solid var(--fl-dark); border-radius: 18px; background: var(--fl-white);
    overflow-x: auto; scrollbar-width: none;
}
.fl-subtabs ul::-webkit-scrollbar { display: none; }
.fl-subtabs a {
    display: inline-flex; align-items: center; min-height: 44px;
    font-size: 17px; font-weight: 700; white-space: nowrap; text-decoration: none; transition: color .2s ease;
}
.fl-subtabs a:link, .fl-subtabs a:visited { color: var(--fl-dark); }
.fl-subtabs a:hover, .fl-subtabs a.is-active { color: var(--fl-mango); }
.fl-subtabs a:focus-visible { outline-offset: -2px; } /* 가로 스크롤 상자 안에서 잘리지 않게 안쪽으로 */
/* 모바일 드롭다운용 상자 래퍼·버튼(head.php) — PC 에서는 래퍼가 레이아웃에 끼지 않고 버튼은 숨긴다 */
.fl-subtabs-box { display: contents; }
.fl-subtabs-toggle { display: none; }

@media (max-width: 576px) {
    .fl-subhead-visual { height: calc(var(--fl-hd-total) + 240px); }
    /* 큰 영문 제목: 최소 52px 고정이면 320px 에서 "ICE DESSER/T"처럼 단어 가운데서 끊긴다 → 화면 폭에 맞춰 40~52px */
    .fl-subhead-en { font-size: clamp(40px, 12vw, 52px); }
}
@media (max-width: 768px) {
    /* 768px 이하: 탭이 여섯 개인 묶음(소식·이야기·…)은 700px 가까이 필요해 가로 탭이면 잘리므로 여기서부터 드롭다운.
       탭을 가로로 밀지 않고 드롭다운 — 기존 탭 상자(흰 바탕·딥그린 테두리·둥근 모서리)가 그대로 아래로 길어지며 펼쳐진다.
       닫힌 상자 높이(52px)만 자리를 차지하고, 펼친 상자는 아래 콘텐츠를 밀지 않고 위에 덮는다 */
    .fl-subtabs { height: 52px; margin-top: -26px; padding: 0 12px; }
    /* 상자 안 내용은 처음부터 제자리에 놓여 있고 상자 높이(외곽)만 늘고 줄어 목록이 드러난다 → 글자는 움직이지 않는다.
       펼친 높이는 tail.php 스크립트가 내용 높이를 재서 넣는다 */
    .fl-subtabs-box {
        position: absolute; top: 0; left: 12px; right: 12px; display: block; height: 52px; overflow: hidden; box-sizing: border-box;
        border: 1.5px solid var(--fl-dark); border-radius: 14px; background: var(--fl-white);
        /* 닫힐 때(이 규칙): 스르륵 — 빠르게 출발해 부드럽게 감속하며 올라간다 */
        transition: height .32s cubic-bezier(0, 0, .2, 1), box-shadow .32s ease-out;
    }
    /* 열릴 때: 촤라락 — 떨어지듯 가속해 바닥에서 바로 멈춘다(되튐 없음) */
    .fl-subtabs.is-open .fl-subtabs-box { box-shadow: 0 14px 30px rgba(42, 26, 16, .16); transition: height .22s cubic-bezier(.4, 0, 1, 1), box-shadow .22s ease-in; }
    /* 맨 위: 현재 페이지 이름(포인트색) + 오른쪽 화살표. 높이 고정(49px = 52px - 위아래 테두리) */
    .fl-subtabs-toggle {
        position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 49px; padding: 0 48px;
        box-sizing: border-box; border: 0; border-radius: 12px; background: transparent;
        font-family: var(--fl-font); font-size: 15px; font-weight: 700; color: var(--fl-mango); cursor: pointer;
    }
    .fl-subtabs-caret { position: absolute; top: 50%; right: 18px; margin-top: -9px; color: var(--fl-dark); transition: transform .32s cubic-bezier(0, 0, .2, 1); }
    .fl-subtabs.is-open .fl-subtabs-caret { transform: rotate(180deg); transition: transform .22s cubic-bezier(.4, 0, 1, 1); }
    .fl-subtabs-toggle:focus-visible { outline-offset: -4px; }
    /* 펼친 목록: 같은 상자 안에서 이어지고, 구분선 없이 현재 페이지를 뺀 나머지 페이지만 */
    .fl-subtabs ul {
        position: static; display: block; min-height: 0; max-width: none; padding: 0 0 8px; overflow: visible;
        border: 0; border-radius: 0; background: none;
        visibility: hidden; transition: visibility 0s linear .32s; /* 닫힌 목록 링크는 키보드 포커스에서도 빠지게 */
    }
    .fl-subtabs.is-open ul { visibility: visible; transition-delay: 0s; }
    .fl-subtabs li:has(> a.is-active) { display: none; }
    .fl-subtabs a { display: flex; justify-content: center; min-height: 44px; padding: 0 20px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .fl-subhead-bg, .fl-subhead-en, .fl-subhead-title { animation: none; }
    .fl-subtabs-box, .fl-subtabs-caret, .fl-subtabs ul { transition: none !important; }
}