/*
 * 혜택노트 홈 화면 — 헤더 + 홈 랜딩 + 푸터.
 *
 * 증상: Astra 기본 헤더는 로고가 위층 가운데, 메뉴 7개가 아래층 가운데에 있어
 *       원하는 배치(좌 로고 / 중앙 카테고리 2 / 우 검색+3줄메뉴)가 안 나온다.
 *       특히 Astra 무료판은 데스크탑 햄버거(마우스 오버 드롭다운)를 못 만든다.
 * 원인: Astra 헤더빌더가 지원하는 배치의 한계.
 * 해결: Astra 헤더(.site-header)를 감추고 플러그인이 그린 .hn-header 를 쓴다.
 * 적용: 이 파일은 플러그인에 들어 있어 따로 붙여넣을 것이 없다.
 *
 * 브랜드색 #1e3a5f (sites.json 의 site1 branding.brand_color 와 같다).
 * 글 목록 3열·한 페이지 9개는 ALL 페이지에서 Astra 가 그대로 그린다 — 건드리지 않는다.
 */

:root {
    --hn-brand: #1e3a5f;
    --hn-ink: #1b2430;
    --hn-muted: #6b7683;
    --hn-line: #e6e9ee;
    --hn-bg: #ffffff;
    --hn-header-h: 68px;
}

/* Astra 원래 헤더는 감춘다. 우리 헤더가 그 자리를 대신한다. */
.site-header {
    display: none !important;
}

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

/* ---------------- 헤더 ---------------- */

.hn-header-wrap {
    position: sticky;
    top: 0;
    z-index: 999;
    background: var(--hn-bg);
    border-bottom: 1px solid var(--hn-line);
}

.hn-header-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 1200px;
    min-height: var(--hn-header-h);
    margin: 0 auto;
    padding: 0 20px;
}

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

/* 로고는 워드프레스에 올린 이미지를 그대로 쓰되 헤더 높이에 맞춰 줄인다.
   (Astra 가 로고에 width:600px 을 강제해 모바일에서 화면 밖으로 넘치던 문제를
   여기서 함께 막는다 — wordpress/custom-css/mobile-logo-fix.css 와 같은 취지.) */
.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-center {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
    min-width: 0;
}

.hn-cat-link {
    position: relative;
    font-size: 16px;
    font-weight: 700;
    color: var(--hn-ink);
    text-decoration: none;
    white-space: nowrap;
    padding: 6px 2px;
}

.hn-cat-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--hn-brand);
    transform: scaleX(0);
    transition: transform 0.18s ease;
}

.hn-cat-link:hover,
.hn-cat-link:focus-visible {
    color: var(--hn-brand);
}

.hn-cat-link:hover::after,
.hn-cat-link:focus-visible::after {
    transform: scaleX(1);
}

.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 12px;
    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: 170px;
    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: 8px;
}

.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: 180px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--hn-line);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(20, 32, 50, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

/* 마우스 오버로 열린다. 키보드 사용자는 focus-within 으로,
   손가락(터치)은 아래 .is-open 으로 열린다. */
.hn-menu:hover .hn-menu-panel,
.hn-menu:focus-within .hn-menu-panel,
.hn-menu.is-open .hn-menu-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

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

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

/* 카테고리는 넓은 화면에선 중앙에 있으므로 메뉴 안에서는 감춘다. */
.hn-menu-group--mobile {
    display: none;
}

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

/* ---------------- 좁은 화면 ---------------- */

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

    /* 중앙 카테고리는 3줄 메뉴 안으로 들어간다. */
    .hn-center {
        display: none;
    }

    .hn-menu-group--mobile {
        display: block;
    }

    .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 {
    --hn-hero-bg: #f2f6ff;
    display: block;
}

/* ---- 히어로 ---- */

/* 배경은 반드시 단색 — 일러스트 파일의 배경색(#F2F6FF)과 같아야 한다.
   그라데이션을 쓰면 아래쪽에서 색이 어긋나 그림의 네모난 경계가 드러난다. */
.hn-hero {
    background: var(--hn-hero-bg);
}

.hn-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    align-items: center;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 20px 60px;
}

.hn-hero-title {
    margin: 0 0 18px;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.32;
    letter-spacing: -0.03em;
    color: var(--hn-ink);
    text-wrap: balance;
}

.hn-hero-title em {
    font-style: normal;
    color: #2563eb;
}

.hn-hero-sub {
    margin: 0 0 26px;
    font-size: 16px;
    line-height: 1.75;
    color: #55606d;
}

.hn-hero-search {
    display: flex;
    align-items: center;
    max-width: 560px;
    height: 56px;
    padding: 0 8px 0 20px;
    background: #fff;
    border: 1px solid #d8e0ef;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(24, 44, 84, 0.06);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.hn-hero-search:focus-within {
    border-color: #2563eb;
    box-shadow: 0 4px 18px rgba(37, 99, 235, 0.16);
}

.hn-hero-field {
    flex: 1 1 auto;
    min-width: 0;
    height: 52px;
    border: 0 !important;
    outline: none;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 15px;
    color: var(--hn-ink);
}

.hn-hero-field::placeholder {
    color: #96a0ad;
}

.hn-hero-submit {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #2563eb;
    cursor: pointer;
}

.hn-hero-submit:hover {
    background: #eff4ff;
}

.hn-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0 26px;
}

.hn-chip {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 700;
    color: #33404f;
    text-decoration: none;
    background: #fff;
    border: 1px solid #dde4f0;
    border-radius: 999px;
    transition: border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.hn-chip:hover {
    color: #2563eb;
    border-color: #2563eb;
    transform: translateY(-1px);
}

.hn-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hn-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 26px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 10px;
    text-decoration: none;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.hn-cta--solid {
    color: #fff;
    background: #1e3a8a;
    box-shadow: 0 6px 16px rgba(30, 58, 138, 0.22);
}

.hn-cta--solid:hover {
    background: #17306f;
    color: #fff;
    transform: translateY(-1px);
}

.hn-cta--ghost {
    color: #1e3a8a;
    background: #fff;
    border: 1px solid #c7d4ee;
}

.hn-cta--ghost:hover {
    border-color: #1e3a8a;
    transform: translateY(-1px);
}

.hn-hero-art {
    display: flex;
    justify-content: center;
}

/* 일러스트 배경(#F2F6FF)과 히어로 배경을 자연스럽게 섞는다. */
.hn-hero-art img {
    display: block;
    width: 100%;
    max-width: 460px;
    height: auto;
    mix-blend-mode: multiply;
}

/* ---- 기능 카드 4개 ---- */

.hn-features {
    max-width: 1200px;
    margin: -28px auto 0;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.hn-features-inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: #fff;
    border: 1px solid var(--hn-line);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(24, 44, 84, 0.07);
    overflow: hidden;
}

.hn-feature {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 26px 22px;
    text-decoration: none;
    border-right: 1px solid var(--hn-line);
    transition: background 0.16s ease;
}

.hn-feature:last-child {
    border-right: 0;
}

.hn-feature:hover {
    background: #f7faff;
}

.hn-feature-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #eef4ff;
    color: #2563eb;
}

.hn-feature-title {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: 800;
    color: var(--hn-ink);
}

.hn-feature-desc {
    display: block;
    font-size: 13.5px;
    line-height: 1.6;
    color: #6b7683;
}

/* ---- 공통 섹션 ---- */

.hn-section-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 52px 20px 0;
}

.hn-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.hn-section-head h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--hn-ink);
}

.hn-more {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 700;
    color: #6b7683;
    text-decoration: none;
}

.hn-more:hover {
    color: #2563eb;
}

/* ---- 글 카드 3개 ---- */

.hn-post-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.hn-post-card {
    display: block;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--hn-line);
    border-radius: 14px;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hn-post-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(20, 32, 50, 0.12);
}

.hn-post-thumb {
    display: block;
    aspect-ratio: 16 / 9;
    background: #eef1f6;
}

.hn-post-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hn-post-body {
    display: block;
    padding: 16px 18px 20px;
}

.hn-post-cat {
    display: block;
    margin-bottom: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: #2563eb;
}

.hn-post-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--hn-ink);
}

.hn-post-date {
    display: block;
    font-size: 13px;
    color: #8b95a1;
}

/* ---- 가이드 목록 ---- */

.hn-guide-list {
    border: 1px solid var(--hn-line);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.hn-guide-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    text-decoration: none;
    border-bottom: 1px solid var(--hn-line);
    transition: background 0.16s ease;
}

.hn-guide-row:last-child {
    border-bottom: 0;
}

.hn-guide-row:hover {
    background: #f7faff;
}

.hn-guide-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #eef4ff;
    color: #2563eb;
}

.hn-guide-text {
    flex: 1 1 auto;
    min-width: 0;
}

.hn-guide-title {
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: 700;
    color: var(--hn-ink);
}

.hn-guide-desc {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.6;
    color: #6b7683;
}

.hn-guide-arrow {
    flex: 0 0 auto;
    font-size: 22px;
    color: #b6bfcb;
}

.hn-guide-row:hover .hn-guide-arrow {
    color: #2563eb;
}

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

/* Astra 기본 푸터는 감춘다. 우리 푸터가 대신한다. */
.site-footer {
    display: none !important;
}

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

.hn-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 26px 20px;
}

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

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

.hn-footer-links a:hover {
    color: #2563eb;
}

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

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

/* ================= 좁은 화면 (랜딩) ================= */

@media (max-width: 1024px) {
    .hn-features-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hn-feature:nth-child(2) {
        border-right: 0;
    }

    .hn-feature:nth-child(1),
    .hn-feature:nth-child(2) {
        border-bottom: 1px solid var(--hn-line);
    }
}

@media (max-width: 921px) {
    .hn-hero-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        padding: 38px 20px 44px;
    }

    /* 좁은 화면에서는 그림보다 문구와 검색이 먼저 보이게 한다. */
    .hn-hero-art {
        order: -1;
    }

    .hn-hero-art img {
        max-width: 300px;
    }

    .hn-hero-title {
        font-size: 30px;
    }

    .hn-post-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .hn-hero-title {
        font-size: 25px;
    }

    .hn-hero-search {
        height: 52px;
        padding-left: 16px;
    }

    .hn-cta {
        flex: 1 1 100%;
        justify-content: center;
    }

    .hn-features-inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .hn-feature {
        border-right: 0;
        border-bottom: 1px solid var(--hn-line);
    }

    .hn-feature:last-child {
        border-bottom: 0;
    }

    .hn-post-grid {
        grid-template-columns: minmax(0, 1fr);
    }

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