@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); }
#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); }
#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.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: underline; text-underline-offset: 4px; }
@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; }
    #hd.fl-hd #menu-btn {
        display: block; position: relative; top: auto; right: auto; transform: none;
        width: 44px; height: 44px; margin-left: auto;
    }
    #hd.fl-hd #menu-btn span { left: 10px; width: 24px; height: 2px; background: var(--fl-cream) !important; border-radius: 1px; }
    #hd.fl-hd #menu-btn span:nth-child(1) { top: 14px; }
    #hd.fl-hd #menu-btn span:nth-child(2) { top: 21px; }
    #hd.fl-hd #menu-btn span:nth-child(3) { top: 28px; }
    #hd.fl-hd #menu-btn.active { right: auto; }
    #hd.fl-hd #menu-btn.active span { height: 2px; }
    #hd.fl-hd #menu-btn.active span:nth-child(1) { top: 21px; transform: rotate(45deg); }
    #hd.fl-hd #menu-btn.active span:nth-child(2) { top: 21px; transform: rotate(-45deg); }
    #hd.fl-hd #menu-btn.active span:nth-child(3) { opacity: 0; transform: none; }

    /* 메뉴가 열려도 헤더 바는 그대로, 그린 메뉴 패널은 헤더 바로 아래에서 시작 */
    #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; }
}
@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 span, #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(30, 53, 39, .45), rgba(30, 53, 39, .3) 40%, rgba(30, 53, 39, .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; } /* 가로 스크롤 상자 안에서 잘리지 않게 안쪽으로 */

@media (max-width: 576px) {
    .fl-subhead-visual { height: calc(var(--fl-hd-total) + 240px); }
    /* 탭이 많으면 상자 안에서 가로로 밀어서 본다 */
    .fl-subtabs { margin-top: -26px; padding: 0 12px; }
    .fl-subtabs ul { justify-content: flex-start; min-height: 52px; padding: 0 20px; gap: 24px; border-radius: 14px; }
    .fl-subtabs a { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .fl-subhead-bg, .fl-subhead-en, .fl-subhead-title { animation: none; }
}