/**
 * Front frame skin: hyetaek (혜택의 차이) — 시안 E
 *
 * basic 스킨 CSS(본문 레이아웃·폼·모바일 패널·메뉴 컴포넌트)를 그대로 가져오고
 * 헤더·푸터만 이 파일에서 새로 그린다. basic 이 고쳐지면 여기에도 따라온다.
 *
 * 색은 코어 semantic 토큰(--foreground, --muted-foreground, --border, --background)과
 * 브랜드색(--brand-primary, 관리자 사이트 설정의 대표 색 — 없으면 #C4001A)만 쓴다.
 * 반응형 기준: 768px 이하 = 모바일.
 */
@import url('/serve/front/basic/css/front.css');

:root {
    --hy-accent: var(--brand-primary, #C4001A);
    --hy-ink: var(--foreground);
    --hy-sub: var(--muted-foreground);
    --hy-line: var(--border);
    --hy-soft: var(--muted);
    /* 시안 기준 폭·거터 (관리자 레이아웃 최대 넓이가 설정되면 Head.php 의 값이 이긴다) */
    --site-max-width: 1280px;
    --content-gutter-x: 24px;
    /* 이 스킨의 헤더는 화면에 고정되지 않고 스크롤과 함께 올라간다(basic 은 sticky).
       --header-height 는 상세 탭·결제 요약 같은 sticky 요소가 "고정 헤더 아래" 에 붙는
       오프셋이라, basic 값(64px)을 그대로 두면 헤더가 사라진 자리에 빈 띠가 생긴다. */
    --header-height: 0px;
}

/* basic 모바일 패널의 헤더는 --header-height 를 높이로 쓴다 — 위에서 0 으로 둔 값과 떼어 낸다 */
.mublo-panel__header { height: 64px; }
@media (max-width: 768px) {
    .mublo-panel__header { height: 56px; }
}

body {
    font-family: 'Noto Sans KR', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ========================================
   Header
   ======================================== */
.hy-header {
    position: relative;
    z-index: 50;
    background: var(--background);
    color: var(--hy-ink);
}
.hy-header a { color: inherit; text-decoration: none; }
.hy-header a:hover { color: var(--hy-accent); }

/* 1. 유틸 바 */
.hy-util {
    border-bottom: 1px solid var(--hy-line);
    font-size: 12px;
    color: var(--hy-sub);
}
.hy-util__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    padding-bottom: 8px;
}
.hy-util .mublo-header__utility {
    display: flex;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.hy-util .mublo-header__utility a { color: var(--hy-sub); font-size: 12px; }
.hy-util .mublo-header__utility a:hover { color: var(--hy-ink); }

/* 2. 메인 행 */
.hy-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 36px;
    padding-top: 22px;
    padding-bottom: 12px;
}
.hy-icon-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--hy-ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hy-main__toggle { display: none; }

.hy-logo {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    flex: none;
}
.hy-logo__text { font-size: 26px; font-weight: 900; letter-spacing: -0.04em; }
.hy-logo__sub { margin-top: 3px; font-size: 10px; letter-spacing: 0.24em; color: var(--hy-sub); }
.hy-logo__img { display: block; max-height: 48px; width: auto; }
.hy-logo__img--mo { display: none; }

.hy-search {
    flex: 1 1 380px;
    min-width: 0;
    display: flex;
    align-items: center;
    height: 50px;
    border: 2px solid var(--hy-ink);
    border-radius: 999px;
    padding: 0 6px 0 22px;
    background: var(--background);
}
.hy-search__input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 15px;
    color: var(--hy-ink);
}
.hy-search__input::-webkit-search-cancel-button { display: none; }
.hy-search:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--hy-ink) 12%, transparent); }
.hy-search__btn {
    width: 40px;
    height: 40px;
    flex: none;
    border: 0;
    border-radius: 999px;
    background: var(--hy-ink);
    color: var(--background);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hy-icons { display: flex; gap: 4px; flex: none; }
.hy-icons__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 52px;
    padding: 6px 8px;
    font-size: 11px;
    color: var(--hy-sub) !important;
}
.hy-icons__item:hover { color: var(--hy-ink) !important; }
.hy-icons__ico { position: relative; display: inline-flex; color: var(--hy-ink); }
.hy-icons__badge {
    position: absolute;
    top: -4px;
    right: -8px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--hy-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

/* 3. 주 메뉴 */
.hy-gnb {
    position: relative;
    border-bottom: 1px solid var(--hy-line);
}
.hy-gnb__inner {
    display: flex;
    align-items: center;
    gap: 0 30px;
}
.hy-gnb__all {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 0;
    border: 0;
    background: transparent;
    color: var(--hy-ink);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.hy-gnb__all[aria-expanded="true"] { color: var(--hy-accent); }
.hy-gnb__list {
    display: flex;
    flex-wrap: nowrap;
    gap: 0 30px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
}
.hy-gnb__list::-webkit-scrollbar { display: none; }
.hy-gnb__link {
    position: relative;
    display: block;
    padding: 14px 0;
    font-size: 15px;
    font-weight: 700;
}
.hy-gnb__link.is-active { color: var(--hy-accent) !important; }
.hy-gnb__link.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--hy-accent);
}

/* 메가 메뉴 */
.hy-mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--background);
    border-bottom: 1px solid var(--hy-line);
    box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.25);
}
.hy-mega[hidden] { display: none; }
.hy-mega__inner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 24px 32px;
    padding-top: 28px;
    padding-bottom: 32px;
}
.hy-mega__title { display: block; font-size: 15px; font-weight: 900; margin-bottom: 10px; }
.hy-mega__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; }
.hy-mega__list a { color: var(--hy-sub) !important; }
.hy-mega__list a:hover { color: var(--hy-accent) !important; }

/* ========================================
   블록 공통 — 제목줄 (시안 C: 26px/900, 오른쪽 "전체 보기")
   관리자가 제목 색·크기를 지정하면 인라인 변수가 이긴다.
   ======================================== */
.block-title { margin-bottom: 20px; row-gap: 4px; }
.block-title__text {
    --title-size-pc: 26px;
    --title-size-mo: 21px;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.3;
}
.block-title__more { font-size: 13px; color: var(--hy-sub); }
.block-title__more:hover { color: var(--hy-ink); text-decoration: none; }
.block-title__copytext { --copytext-size-pc: 14px; --copytext-size-mo: 13px; color: var(--copytext-color, var(--hy-sub)); }

/* 모바일 패널은 하단 고정 상담바(z-index 8000) 위에 떠야 한다 — basic 은 2000 */
.mublo-panel__backdrop { z-index: 9499; }
.mublo-panel__dialog { z-index: 9500; }

/* ========================================
   Footer
   ======================================== */
.hy-footer {
    position: relative;
    z-index: 1;
    margin-top: 0;
    border-top: 1px solid var(--hy-line);
    background: var(--background);
    color: var(--hy-sub);
    font-size: 13px;
}
.hy-footer a { color: inherit; text-decoration: none; }
.hy-footer a:hover { color: var(--hy-ink); }
.hy-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 28px 40px;
    padding-top: 40px;
    padding-bottom: 28px;
}
.hy-footer__title {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--hy-ink);
}
.hy-footer__title a { color: inherit; text-decoration: none; }
.hy-footer__title a:hover { text-decoration: underline; }
.hy-footer__logo img { display: block; max-height: 36px; width: auto; }
.hy-footer__logo-text { font-size: 20px; font-weight: 900; letter-spacing: -0.04em; color: var(--hy-ink) !important; }
.hy-footer__branches { margin: 0; line-height: 1.7; }

/* 공용 컴포넌트(사업자 정보 · 고객센터 · 하단 메뉴 · SNS)를 시안 톤으로 */
.hy-footer .footer-info {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--hy-sub);
}
.hy-footer .footer-info em { font-style: normal; color: var(--hy-ink); margin-right: 2px; }
.hy-footer .footer-info span { white-space: normal; }
.hy-footer .footer-support,
.hy-footer .footer-cs-tel,
.hy-footer .footer-cs-time { display: block; text-align: left; }
.hy-footer .footer-cs-tel {
    font-size: 22px;
    font-weight: 900;
    color: var(--hy-ink) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.hy-footer .footer-cs-time { margin-top: 4px; line-height: 1.6; }
.hy-footer .footer-top { display: block; padding: 0; border: 0; margin: 0; }
.hy-footer .footer-nav { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; }
.hy-footer .footer-nav a { padding: 0; font-size: 13px; }
/* 개인정보처리방침은 굵게 (법적 고지 관행) */
.hy-footer .footer-nav a[href*="privacy"] { font-weight: 700; color: var(--hy-ink); }
.hy-footer .footer-sns { margin-top: 14px; justify-content: flex-start; }
.hy-footer__bar { padding-bottom: 28px; font-size: 12px; }
.hy-footer__bar::before {
    content: '';
    display: block;
    margin-bottom: 16px;
    border-top: 1px solid var(--hy-line);
}
.hy-footer,
.hy-footer .footer-company,
.hy-footer .footer-support { text-align: left; }

/* ========================================
   반응형
   ======================================== */
@media (max-width: 1024px) {
    .hy-main { gap: 12px 20px; }
    .hy-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    :root { --content-gutter-x: 16px; }

    .hy-util { display: none; }

    .hy-main {
        gap: 8px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .hy-main__toggle { display: inline-flex; margin-left: -8px; }
    .hy-logo__text { font-size: 21px; }
    .hy-logo__sub { display: none; }
    .hy-logo__img { max-height: 34px; }
    .hy-logo__img--pc { display: none; }
    .hy-logo__img--mo { display: block; }
    .hy-icons { margin-left: auto; gap: 0; }
    .hy-icons__item { min-width: 0; width: 40px; height: 40px; padding: 0; justify-content: center; }
    .hy-icons__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    /* 알림은 모바일 패널에도 있으므로 헤더에서는 뺀다 (아이콘 4개면 좁은 폭에서 로고와 겹침) */
    .hy-icons__item--bell { display: none; }
    .hy-search {
        order: 3;
        flex: 1 1 100%;
        height: 44px;
        padding-left: 18px;
    }
    .hy-search__btn { width: 34px; height: 34px; }

    .hy-gnb__all { display: none; }
    .hy-gnb__inner { gap: 0; }
    .hy-gnb__list { gap: 0 22px; }
    .hy-gnb__link { padding: 12px 0; font-size: 14px; }
    .hy-mega { display: none !important; }

    .hy-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 28px; }
}