/*
 * 혜택노트 — 헤더 + 홈 화면 + 푸터의 스타일.
 *
 * 토큰(--hn-*)과 기본 타이포·본문·표·목록카드 스타일은 테마의 style.css 에 있다.
 * 이 파일에는 우리가 직접 그리는 화면(헤더·히어로·홈 구역·푸터)만 둔다.
 *
 * 2026-09-09 개편
 *   사장님이 운영하는 incomglobal.co.kr 의 홈을 참고했다. 그쪽에서 가져온 것은
 *   색이 아니라 짜임새다 — 구역마다 머리카락 같은 가는 선 하나로 나누고, 구역
 *   제목을 크게 쓰고, 나머지는 비운다. 색은 혜택노트의 남색(#1e3a5f)을 그대로 쓴다.
 *   복지 정보를 읽으러 오는 분들에게 검정 일색 대행사 화면은 차갑다.
 */

.hn-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------- 헤더 ----------------
   좌 = 로고 / 우 = 검색창 + 3줄 메뉴. 가운데는 비운다.
   카테고리·계산기 링크는 3줄 메뉴 안으로 들어갔다(class-hn-header.php). */

.hn-header-wrap {
    position: sticky;
    top: 0;
    z-index: 999;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(150%) blur(8px);
    -webkit-backdrop-filter: saturate(150%) blur(8px);
    border-bottom: 1px solid var(--hn-line);
}

.hn-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: var(--hn-wide);
    min-height: var(--hn-header-h);
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 28px);
}

.hn-left {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

/* 로고는 워드프레스에 올린 이미지를 그대로 쓰되 헤더 높이에 맞춰 줄인다.
   (Astra 가 로고에 width:600px 을 강제해 모바일에서 화면 밖으로 넘치던 문제를
   여기서 함께 막는다.) */
.hn-left .custom-logo-link img,
.hn-left img.custom-logo {
    display: block;
    width: auto !important;
    max-width: 190px !important;
    height: auto !important;
    max-height: 44px;
}

.hn-logo-text {
    font-size: 20px;
    font-weight: 800;
    color: var(--hn-brand);
    text-decoration: none;
    letter-spacing: -0.02em;
}

.hn-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 검색창 */
.hn-search {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 38px;
    padding: 0 6px 0 14px;
    border: 1px solid var(--hn-line);
    border-radius: 999px;
    background: #f7f8fa;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.hn-search:focus-within {
    border-color: var(--hn-brand);
    background: #fff;
}

.hn-search-field {
    width: 190px;
    height: 34px;
    border: 0 !important;
    outline: none;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 14px;
    color: var(--hn-ink);
    padding: 0 !important;
}

.hn-search-field::placeholder {
    color: var(--hn-muted);
}

.hn-search-submit,
.hn-search-toggle,
.hn-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--hn-brand);
    cursor: pointer;
}

.hn-search-submit:hover,
.hn-search-toggle:hover,
.hn-menu-btn:hover {
    background: #eef1f6;
}

/* 검색 아이콘 버튼은 좁은 화면에서만 쓴다. */
.hn-search-toggle {
    display: none;
}

/* 3줄 메뉴 */
.hn-menu {
    position: relative;
}

.hn-menu-btn {
    flex-direction: column;
    gap: 4px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
}

.hn-menu-btn span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--hn-ink);
    border-radius: 2px;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.hn-menu-btn[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.hn-menu-btn[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.hn-menu-btn[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.hn-menu-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 210px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--hn-line);
    border-radius: 14px;
    box-shadow: 0 16px 34px rgba(20, 32, 50, 0.16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

/* 메뉴는 눌러서 연다.
   예전에는 마우스만 올려도 열렸는데, 그때는 메뉴 안에 안내 문서 4개뿐이었다.
   이제 카테고리·계산기까지 들어 있어 지나가다 열리면 화면을 가린다. */
.hn-menu.is-open .hn-menu-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.hn-menu-panel a {
    display: block;
    padding: 10px 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--hn-ink);
    text-decoration: none;
    border-radius: 9px;
    white-space: nowrap;
}

.hn-menu-panel a:hover,
.hn-menu-panel a:focus-visible {
    background: #f1f4f9;
    color: var(--hn-brand);
}

.hn-menu-group + .hn-menu-group {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--hn-line);
}

/* 안내 문서 묶음은 한 단계 낮춰 보이게 한다. */
.hn-menu-group:not(.hn-menu-group--main) a {
    font-weight: 500;
    font-size: 14px;
    color: var(--hn-muted);
}

/* ---------------- 좁은 화면 (헤더) ---------------- */

@media (max-width: 921px) {
    .hn-header-inner {
        gap: 8px;
        padding: 0 14px;
    }

    .hn-left {
        flex: 1 1 auto;
    }

    .hn-left .custom-logo-link img,
    .hn-left img.custom-logo {
        max-width: 150px !important;
        max-height: 38px;
    }

    /* 검색창은 아이콘으로 접어 두고, 누르면 헤더 아래로 펼친다. */
    .hn-search-toggle {
        display: flex;
    }

    .hn-search {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: auto;
        height: 0;
        padding: 0 14px;
        border: 0;
        border-radius: 0;
        background: #fff;
        overflow: hidden;
        box-shadow: 0 8px 18px rgba(20, 32, 50, 0.1);
    }

    .hn-header-wrap.hn-search-open .hn-search {
        height: 54px;
        padding: 8px 14px;
        border-bottom: 1px solid var(--hn-line);
    }

    .hn-search-field {
        width: 100%;
        flex: 1 1 auto;
    }
}


/* ================= 홈 ================= */

.hn-landing {
    display: block;
}

/* ---- 히어로: 왼쪽 글자 + 오른쪽 그림 ----
   배경색은 시안(theme/ls4t0.png) 왼쪽 면의 색 그대로다(#f6f8fc → #ecf2f8).
   그림 파일의 배경과 이어 붙는 것이 아니라 따로 떨어진 카드로 두므로,
   예전처럼 배경색을 그림 파일에 맞출 필요는 없다. */

.hn-hero {
    background: linear-gradient(180deg, #f6f8fc 0%, #ecf2f8 100%);
}

.hn-hero-inner {
    display: grid;
    /* 글자 쪽을 더 넓게. 제목 둘째 줄("놓치기 쉬운 혜택은 빠르게")이 한 줄에 들어가야
       시안과 같은 두 줄이 된다. 좁히면 세 줄로 접힌다. */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
    max-width: var(--hn-wide);
    margin: 0 auto;
    padding: clamp(36px, 5vw, 68px) clamp(16px, 3vw, 28px);
}

.hn-hero-copy {
    min-width: 0;
}

.hn-hero-logo {
    margin: 0 0 clamp(16px, 2.4vw, 26px);
}

.hn-hero-logo-img {
    display: block;
    width: auto;
    max-width: clamp(150px, 18vw, 210px);
    height: auto;
}

.hn-hero-art {
    min-width: 0;
}

.hn-hero-art img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
}

.hn-hero-title {
    margin: 0 0 18px;
    font-size: clamp(27px, 3.4vw, 44px);
    font-weight: 800;
    line-height: 1.26;
    letter-spacing: -0.035em;
    color: var(--hn-ink);
}

/* 강조 글자는 시안(theme/ls4t0.png)에서 쓴 파랑 그대로다 — 스포이드로 찍으면 #1d4ed8.
   본문 남색(--hn-brand #1e3a5f)으로 두면 검은 글자와 구분이 안 돼 강조가 죽는다. */
.hn-hero-title em {
    font-style: normal;
    color: #1d4ed8;
}

.hn-hero-lead {
    margin: 0 0 14px;
    max-width: 620px;
    font-size: clamp(17px, 2vw, 21px);
    font-weight: 700;
    line-height: 1.6;
    color: #33404f;
}

.hn-hero-about {
    margin: 0;
    max-width: 620px;
    font-size: clamp(15px, 1.6vw, 16px);
    line-height: 1.75;
    color: var(--hn-muted);
}

/* ---- 구역 공통 ----
   구역 사이는 가는 선 하나로만 나눈다. 배경색을 번갈아 깔면 화면이 시끄럽다. */

.hn-section {
    padding: clamp(56px, 8vw, 104px) 0;
    border-top: 1px solid var(--hn-line);
}

.hn-section-inner {
    max-width: var(--hn-wide);
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 28px);
}

.hn-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: clamp(28px, 4vw, 46px);
}

.hn-section-title {
    margin: 0 0 12px;
    font-size: clamp(25px, 3.6vw, 42px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.03em;
    color: var(--hn-ink);
}

.hn-section-sub {
    margin: 0;
    max-width: 620px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--hn-muted);
}

/* ---- 계산기 ----
   카드 자체는 계산기 플러그인이 그린다(.hnc-hub / .hnc-card).
   여기서는 홈에 맞게 칸을 다시 잡고 번호를 붙인다.
   플러그인 CSS 가 뒤에 실리므로 반드시 .hn-calc-hub 를 앞에 붙여 이긴다. */

.hn-calc-hub .hnc-hub {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px;
    margin: 0;
    counter-reset: hn-calc;
}

.hn-calc-hub .hnc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 26px 22px 24px;
    border: 1px solid var(--hn-line);
    border-radius: 16px;
    background: #fff;
    text-decoration: none;
    color: var(--hn-ink);
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.hn-calc-hub .hnc-card::before {
    counter-increment: hn-calc;
    content: counter(hn-calc, decimal-leading-zero);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    /* 이 번호는 장식이 아니라 계산기 순서를 알려 주는 글자다. #b8c3d2 는 흰 배경에서
       대비 1.78 로 거의 안 보였다(2026-09-12 라이트하우스 지적). 4.62 로 올린다. */
    color: #6b7683;
}

.hn-calc-hub .hnc-card:hover {
    border-color: var(--hn-brand);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(20, 32, 50, 0.08);
}

.hn-calc-hub .hnc-card-title {
    display: block;
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: var(--hn-brand);
}

.hn-calc-hub .hnc-card-desc {
    display: block;
    font-size: 14px;
    line-height: 1.65;
    color: var(--hn-muted);
}

/* ---- 최근 글 ----
   칸과 카드는 목록 화면과 같은 것을 쓴다(style.css 의 .hn-grid / .hn-card).
   같은 카드를 홈과 카테고리에서 두 번 그리지 않는다. */

.hn-section--posts .hn-pagination {
    margin-top: clamp(36px, 5vw, 56px);
}

/* ================= 글 아래 '많이 본 글' ================= */

/* 읽던 글이 끝났다는 것이 보여야 한다. 배경을 한 톤 깔고 본문 폭 밖으로 넓힌다. */
.hn-popular {
    margin-top: clamp(40px, 6vw, 72px);
    padding: clamp(36px, 5vw, 60px) 0;
    background: #f7f9fc;
    border-top: 1px solid var(--hn-line);
}

.hn-popular-inner {
    max-width: var(--hn-wide);
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 28px);
}

.hn-popular-title {
    margin: 0 0 clamp(18px, 2.6vw, 28px);
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--hn-ink);
}

/* 두 장뿐이라 화면이 넓어도 반씩 나눠 갖는다(카드가 과하게 커지지 않게). */
.hn-popular .hn-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* 글 아래에 바로 붙으므로 푸터 위 여백은 이 구역이 대신한다. */
.hn-popular + .hn-footer {
    border-top: 0;
}

/* ================= 푸터 ================= */

.hn-footer {
    margin-top: 0;
    border-top: 1px solid var(--hn-line);
    background: #fbfcfd;
}

.hn-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px 28px;
    max-width: var(--hn-wide);
    margin: 0 auto;
    padding: 34px clamp(16px, 3vw, 28px);
}

.hn-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.hn-footer-links a {
    font-size: 14px;
    font-weight: 600;
    color: #55606d;
    text-decoration: none;
}

.hn-footer-links a:hover {
    color: var(--hn-brand);
}

.hn-footer-copy {
    margin: 0;
    font-size: 13px;
    color: #8b95a1;
}

.hn-footer-social {
    display: flex;
    gap: 12px;
}

/* ================= 좁은 화면 (홈) ================= */

@media (max-width: 921px) {
    .hn-section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    /* 좁아지면 한 줄로 쌓는다. 글자가 먼저다 —
       무엇을 하는 곳인지 읽기 전에 그림부터 화면을 채우면 안 된다. */
    .hn-hero-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(22px, 5vw, 34px);
    }

    .hn-hero-art img {
        max-width: 460px;
        margin: 0 auto;
        border-radius: 18px;
    }
}

@media (max-width: 640px) {
    .hn-hero-title {
        letter-spacing: -0.02em;
    }


    /* 카드를 무조건 한 줄에 하나로 두면 8개가 세로로 길게 늘어져
       그 아래 글 목록까지 스크롤이 너무 멀어진다. 폭이 되는 만큼만 나눈다. */
    .hn-calc-hub .hnc-hub {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 12px;
    }

    .hn-footer-inner {
        justify-content: center;
        text-align: center;
    }

    .hn-footer-links {
        justify-content: center;
    }
}