/* 반응형 규칙 (Mobile First)
 *
 * Mobile  : ~ 767px          → base/layout/components.css의 기본 스타일이 담당
 * Tablet  : 768px ~ 1023px   → 그리드 컬럼 확장, 여백·타이포 스케일업
 * Desktop : 1024px ~         → 최대 폭 제한 + 중앙 정렬, 데스크톱 전용 GNB
 *
 * 브랜드 소개 페이지 전용 반응형은 css/brand.css 하단에 있다.
 */

/* ========== Tablet: 768px ~ ========== */

@media (min-width: 768px) {
    :root {
        --section_space: 96px;
    }

    :root {
        --page_padding: 40px;
        --header_height: 68px;
    }

    /* 헤더 + 가로형 GNB ---------------------------------------- */

    .header {
        display: flex;
        align-items: center;
        padding: 0 var(--page_padding);
    }

    /*
     * [좌] 로고 · [중앙] 전체 메뉴 · [우] 로그인/회원가입
     * 양쪽을 1fr로 잡아 가운데 열이 화면 정중앙에 오게 하고,
     * 그리드라 세 영역이 서로 겹칠 수 없다.
     */
    .header_inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: var(--space_4);
        width: 100%;
        height: auto;
    }

    .header_logo {
        justify-self: start;
    }

    .header_logo_symbol {
        height: 26px;
    }

    /*
     * 768~1023px는 로고 글자 + 메뉴 6개 + 로그인/회원가입이 한 줄에 다 들어가지 않는다.
     * 로고 글자를 살리는 대신 로그인/회원가입은 계정 아이콘 하나로 접는다.
     * (실측 768px 기준 필요 폭 672px / 사용 가능 688px)
     */
    .header_logo_text {
        display: block;
        font-size: 16px;
    }

    /*
     * 로고 칸은 1fr이라 남는 폭만 받는데, 그러면 글자가 메뉴 위로 넘친다.
     * 내용 폭을 최소값으로 잡아 칸이 먼저 자리를 확보하게 한다.
     */
    .header_logo {
        min-width: max-content;
    }

    .header_actions {
        justify-self: end;
    }

    /* 모바일 드롭다운을 헤더 안 가로 메뉴로 전환 */
    .global_nav,
    .global_nav[hidden] {
        display: block;
        position: static;
        justify-self: center;
        z-index: auto;
        padding: 0;
        background: none;
        backdrop-filter: none;
        opacity: 1;
        transform: none;
        transition: none;
    }

    .global_nav_list {
        display: flex;
        align-items: center;
        justify-content: center;
        /* 로고 글자가 들어온 만큼 메뉴 사이를 좁혀 한 줄을 유지한다. */
        gap: 12px;
    }

    .global_nav_list > li {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .global_nav_link {
        position: relative;
        padding: 8px 2px;
        border-bottom: 0;
        color: rgba(255, 255, 255, 0.82);
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
        transition: color 0.22s ease;
    }

    /* 밑줄이 왼쪽에서 오른쪽으로 차오르는 hover 피드백 */
    .global_nav_link::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        border-radius: 2px;
        background-color: var(--color_brand_light);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.28s var(--ease_out_soft);
    }

    .global_nav_link:focus-visible,
    .global_nav_link[aria-current="page"] {
        color: #ffffff;
    }

    .global_nav_link:focus-visible::after,
    .global_nav_link[aria-current="page"]::after {
        transform: scaleX(1);
    }

    .header_menu_button {
        display: none;
    }

    /* 768~1023px는 로고 글자 자리를 확보하려고 계정 아이콘만 남긴다. */
    .header_account {
        display: inline-flex;
    }

    .auth_list {
        display: none;
    }

    .auth_link {
        font-size: 13px;
        padding: 6px 13px;
    }

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

    .hero {
        min-height: 620px;
        padding-bottom: 86px;
    }

    .hero_title {
        font-size: 46px;
    }

    /* 인트로 ------------------------------------------------- */

    .intro_eyebrow {
        font-size: 18px;
    }

    .intro_title {
        font-size: 38px;
    }

    /* 메뉴 카드 ---------------------------------------------- */

    .menu_grid {
        gap: var(--space_4);
    }

    .menu_card {
        aspect-ratio: 4 / 3;
        padding: 28px 26px;
    }

    .menu_card_title {
        font-size: 24px;
    }

    .menu_card_arrow {
        left: 26px;
        bottom: 24px;
        width: 30px;
        height: 30px;
    }

    /* 기관 소개 / 최신 연구보고서 (풀블리드 밴드) ---------------- */

    .about,
    .report {
        padding-block: 76px;
    }

    .about_text {
        font-size: 21px;
        text-align: center;
    }

    /* 연구 성과 / 최신 연구보고서 ------------------------------ */

    .stat_list {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space_4);
    }

    .stat_card {
        min-height: 132px;
    }

    .stat_value {
        font-size: 30px;
    }

    .result_title {
        font-size: 42px;
    }

    .result_lead {
        font-size: 16px;
    }

    /* 카드 3장을 나란히 놓는다. */
    .result .stat_list {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space_4);
    }

    .result .stat_card {
        padding: 30px 24px 32px;
    }

    .stat_icon {
        width: 68px;
        height: 68px;
    }

    .report_title {
        font-size: 38px;
    }

    .report_eyebrow {
        font-size: 18px;
    }

    .report_note {
        margin-top: var(--space_8);
        font-size: 13px;
    }

    /* 태블릿부터는 표지 3장이 한 줄에 들어가며 남는 폭을 나눠 갖는다. */
    .report_list {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space_5);
    }

    .report_card {
        max-width: none;
    }

    /* 연구 성과 ---------------------------------------------- */

    .result_title {
        font-size: 48px;
    }

    .result_lead {
        font-size: 17px;
    }

    .result .stat_list {
        gap: var(--space_5);
    }

    .result .stat_card {
        padding: 32px 26px 34px;
    }

    .result .stat_label {
        font-size: 21px;
    }

    .result .stat_value {
        font-size: 38px;
    }

    .stat_icon {
        width: 76px;
        height: 76px;
    }

    /* 최신 연구보고서 ------------------------------------------ */

    .report_list {
        gap: var(--space_6);
    }

    /* 연구 분야 ---------------------------------------------- */

    .field_title {
        font-size: 38px;
    }

    .field_list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space_5);
        margin-top: var(--space_8);
    }

    .field_card {
        align-content: start;
    }

    /* 관련 시스템 링크 ---------------------------------------- */

    .link_list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: var(--space_10);
    }

    .link_item:nth-child(2) {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .link_title {
        font-size: 26px;
    }

    /* 푸터 --------------------------------------------------- */

    .footer {
        padding: 48px var(--page_padding);
    }

    /*
     * 로고 · 이메일 · 약관 링크를 한 줄에 놓고 저작권만 아래에 깐다.
     * 2열이던 시절에는 약관 링크가 1열 안에서 오른쪽 정렬돼 가운데 떠 있었다.
     */
    .footer_inner {
        display: grid;
        grid-template-columns: auto 1fr auto;
        column-gap: var(--space_10);
        row-gap: 26px;
        align-items: center;
    }

    .footer_policy {
        justify-self: end;
        margin-top: 0;
        gap: var(--space_8);
    }

    .footer_copyright {
        grid-column: 1 / -1;
        padding-top: var(--space_5);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

    /* 맨 위로 버튼 -------------------------------------------- */

    .to_top {
        right: 28px;
        bottom: 28px;
        width: 52px;
        height: 52px;
    }

    .to_top svg {
        width: 23px;
        height: 23px;
    }
}

/* ========== Desktop: 1024px ~ ========== */

@media (min-width: 1024px) {
    :root {
        --section_space: 128px;
    }

    :root {
        --page_padding: 48px;
        --header_height: 76px;
    }

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

    .header_inner {
        max-width: var(--content_max);
        margin-inline: auto;
    }

    .header_logo_symbol {
        height: 28px;
    }

    /* 폭에 여유가 생기므로 로고 글자를 키우고 로그인/회원가입도 글자로 되돌린다. */
    .header_logo_text {
        display: block;
        font-size: 21px;
    }

    .header_account {
        display: none;
    }

    .auth_list {
        display: flex;
    }

    .global_nav_list {
        gap: 30px;
    }

    .global_nav_link {
        font-size: 15px;
    }

    .auth_link {
        font-size: 14px;
        padding: 7px 16px;
    }

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

    .hero {
        min-height: 760px;
        padding-bottom: 110px;
    }

    .hero_title {
        width: 100%;
        max-width: var(--content_max);
        margin-inline: auto;
        font-size: 60px;
    }

    /* 최대 폭 제한 + 중앙 정렬 ---------------------------------- */

    .intro,
    .menu_section,
    .result,
    .field,
    .link_section {
        max-width: calc(var(--content_max) + var(--page_padding) * 2);
        margin-inline: auto;
    }

    .report_inner,
    .about_text,
    .footer_inner {
        max-width: var(--content_max);
        margin-inline: auto;
    }

    /* 인트로 ------------------------------------------------- */

    .intro_eyebrow {
        font-size: 20px;
    }

    .intro_title {
        font-size: 46px;
    }

    /* 메뉴 카드 ---------------------------------------------- */

    .menu_grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space_5);
    }

    .menu_card {
        aspect-ratio: 173 / 176;
        padding: 26px 24px;
    }

    /* 기관 소개 / 최신 연구보고서 (풀블리드 밴드) ---------------- */

    .about,
    .report {
        padding-block: 104px;
    }

    .about_text {
        font-size: 26px;
        line-height: 1.6;
    }

    .field_title {
        font-size: 44px;
    }

    .field_list {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space_5);
        margin-top: var(--space_10);
    }

    .field_card {
        padding: 34px 26px 32px;
    }

    .field_card_lead {
        font-size: 17px;
    }

    .link_list {
        column-gap: 80px;
    }

    .link_anchor {
        padding: var(--space_6) 0;
    }

    .link_title {
        font-size: 30px;
    }

    /* 푸터 --------------------------------------------------- */

    .footer {
        padding: 60px var(--page_padding);
    }

    .footer_logo_symbol {
        height: 30px;
    }

    .footer_logo_text {
        font-size: 22px;
    }

    .footer_address,
    .footer_policy,
    .footer_copyright {
        font-size: 13px;
    }
}

/* ==========================================================
 * 마우스 hover 피드백 (768px 이상 + 실제 포인터가 있는 환경)
 *
 * 터치 기기에서 hover 상태가 눌린 채로 남는 것을 막기 위해
 * (hover: hover)로 분리한다. 키보드 대응은 위쪽 :focus-visible이 담당한다.
 * ========================================================== */

@media (min-width: 768px) and (hover: hover) {
    .global_nav_link:hover {
        color: #ffffff;
    }

    .global_nav_link:hover::after {
        transform: scaleX(1);
    }

    .auth_link_login:hover {
        background-color: rgba(255, 255, 255, 0.16);
        color: #ffffff;
    }

    .auth_link_signup:hover {
        border-color: transparent;
        background: linear-gradient(135deg, var(--color_brand) 0%, var(--color_brand_light) 100%);
        color: #ffffff;
        box-shadow: 0 6px 16px rgba(43, 161, 255, 0.42);
        transform: translateY(-1px);
    }

    .header_logo:hover .header_logo_symbol {
        transform: scale(1.06);
    }
}

@media (hover: hover) {
    /*
     * 연구 분야 카드 — 마우스를 올리면 하늘색 테두리로 지금 보고 있는 카드를 알려준다.
     * 카드가 링크는 아니라 이동 없이 시각 피드백만 준다.
     */
    .field_card:hover {
        transform: translateY(-6px);
        box-shadow:
            inset 0 0 0 2px var(--color_brand_light),
            0 20px 40px rgba(43, 161, 255, 0.32);
    }

    .field_card:hover::before {
        height: 5px;
        background: linear-gradient(90deg, var(--color_brand_light) 0%, var(--color_brand) 100%);
    }

    .field_card:hover .field_card_icon {
        border-color: var(--color_brand_light);
        background-color: rgba(74, 212, 255, 0.22);
    }

    .field_card:hover .field_card_tag {
        border-color: var(--color_brand_light);
        color: var(--color_brand_light);
    }

    .result .stat_card:hover {
        transform: translateY(-4px);
        box-shadow:
            0 26px 52px rgba(43, 161, 255, 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.95);
    }

    .header_account:hover {
        color: var(--color_brand_light);
    }
}

.header_logo_symbol {
    transition: transform 0.28s var(--ease_out_soft);
}

.auth_link:active {
    transform: translateY(0) scale(0.97);
}

/* ========== 와이드 데스크톱: 1280px ~ ========== */

@media (min-width: 1280px) {
    /* 폭에 여유가 생기면 제목을 왼쪽으로 빼고 카드가 오른쪽을 차지한다. */
    .result_inner {
        display: grid;
        grid-template-columns: minmax(240px, 300px) 1fr;
        gap: 64px;
        align-items: start;
    }

    .result .stat_list {
        margin-top: 0;
    }

    .result_title {
        font-size: 52px;
    }
}

/* ========== 큰 데스크톱: 1440px ~ ========== */

@media (min-width: 1440px) {
    :root {
        --page_padding: 60px;
    }

    .hero {
        min-height: 820px;
    }
}