/* ========================================
   Board — public board.css
   뉴스룸·공지·FAQ 목록/상세 + CMS page-content (HEADER · NAV · TITLE · FOOTER)
   ======================================== */

/* ── Design tokens (page-content · hero · list 공통) */
.board-page {
    --board-accent: #1a56d6;
    --board-hero-bg: #1c1c1c;
    --board-surface: #f8fafb;
    --board-radius: 14px;
    --layout-ref-width: 1920;
    /* company.css · header.css · footer.css 와 동일 기준선 */
    --board-content-max: 1320px;
    --board-card-ref-width: 424;
    --board-card-ref-height: 438;
    --board-inline-gutter: clamp(20px, 4vw, 40px);
    --board-detail-block-padding: clamp(60px, calc(100vw * 100 / var(--layout-ref-width)), 100px);
    --board-content-inset: max(var(--board-inline-gutter), calc((100vw - var(--board-content-max)) / 2));
    --board-narrow-inline: clamp(20px, 4vw, 24px);
    --board-narrow-inline-tight: clamp(16px, 4vw, 24px);
    /* section[class*='-list-section'].NAV 탭 높이 (PC, public-list-item-text a height 와 동일) */
    --board-section-nav-height: 76px;
    --board-detail-aside-sticky-gap: 24px;
}

/* CMS page-content sections (newsroom · notice · faq) */
.board-page .page-content {
    margin: 0 auto;
    background: #f8fafb;
    font-family: 'Pretendard';
    font-style: normal;

    .loading-placeholder {
        text-align: center;
        padding: clamp(3rem, 8vw, 5rem) var(--board-inline-gutter);
        color: #64748b;
        font-size: 0.95rem;
    }


    /* ── TITLE */
    section.TITLE[class*='-hero'] {
        text-align: center;
        padding: clamp(40px, 4vw, 98px) var(--board-narrow-inline) clamp(40px, 4vw, 40px);
        box-sizing: border-box;

        [class*='-hero-inner'] {
            max-width: min(1000px, 100%);
            margin-left: auto;
            margin-right: auto;

            >div {
                font-weight: 700;
                font-size: clamp(24px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
                line-height: 160%;
                text-align: center;
                color: #000000;
                letter-spacing: -0.02em;
                margin: 0;

                @media (max-width: 768px) {
                    font-weight: 600;
                }
            }
        }
    }

    /**
     * FOOTER 
     */
    section.FOOTER {
        position: relative;
        width: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        color: #f8fafc;

        [class*='-media-text-wrap'].media-text-wrap {
            position: relative;
            box-sizing: border-box;
            width: 100%;
            min-height: clamp(220px, 28vh, 380px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: clamp(48px, 7vw, 88px) clamp(20px, 5vw, 48px);
        }

        .media-text-media {
            position: absolute;
            inset: 0;
            z-index: 0;
            background-color: #071525;
            background-image:
                radial-gradient(ellipse 90% 65% at 15% 20%, rgba(59, 130, 246, 0.22) 0%, transparent 55%),
                radial-gradient(ellipse 70% 50% at 85% 75%, rgba(37, 99, 235, 0.18) 0%, transparent 50%),
                linear-gradient(165deg, #050d18 0%, #0c1c33 42%, #071220 100%);

            &::before {
                content: '';
                position: absolute;
                inset: 0;
                z-index: 0;
                pointer-events: none;
                opacity: 0.55;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%233b82f6' stroke-opacity='0.22' stroke-width='1.2' d='M0 220 Q200 180 400 210 T800 200 T1200 230'/%3E%3Cpath fill='none' stroke='%2360a5fa' stroke-opacity='0.18' stroke-width='0.9' d='M0 260 Q250 300 500 250 T1000 270 T1200 240'/%3E%3Cpath fill='none' stroke='%233b82f6' stroke-opacity='0.14' stroke-width='0.8' d='M0 140 Q300 100 600 150 T1200 120'/%3E%3Cpath fill='none' stroke='%2393c5fd' stroke-opacity='0.12' stroke-width='0.7' d='M0 320 Q400 360 800 300 T1200 340'/%3E%3C/svg%3E");
                background-size: cover;
                background-position: center;
            }

            &::after {
                content: '';
                position: absolute;
                inset: 0;
                z-index: 1;
                pointer-events: none;
                background: linear-gradient(180deg,
                        rgba(5, 13, 24, 0.25) 0%,
                        transparent 35%,
                        transparent 65%,
                        rgba(5, 13, 24, 0.35) 100%);
            }

            img,
            .media-text-video {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
                display: block;
                z-index: 0;
            }

            &:has(img)::before,
            &:has(.media-text-video)::before {
                opacity: 0.35;
            }

            &:has(img)::after,
            &:has(.media-text-video)::after {
                background: linear-gradient(105deg,
                        rgba(7, 18, 35, 0.82) 0%,
                        rgba(7, 18, 35, 0.45) 50%,
                        rgba(7, 18, 35, 0.55) 100%);
            }
        }

        .media-text-copy {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: min(1320px, 100%);
            margin: 0 auto;
            text-align: center;
            text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
        }

        .media-text-body-block {
            /* PC/BoldyL — 18px, line-height 160%, weight 400 (.FOOTER 에서 Pretendard 상속) */
            font-size: clamp(15px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            font-weight: 400;
            line-height: 1.6;
            letter-spacing: normal;
            text-align: center;
            color: #fff;
            word-break: keep-all;

            br {
                display: block;
                margin-top: 0.65em;
            }
        }

        .media-text-key-headline,
        .media-text-body-block[data-field-key='headline'] {
            margin: 0 auto;
            max-width: 100%;
            word-break: normal;
            overflow-wrap: break-word;
            font-weight: 700;
            font-size: clamp(24px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            line-height: 1.6;
            letter-spacing: normal;
            text-align: center;
            color: #fff;
            margin-bottom: 12px;
        }

        .media-text-key-body,
        .media-text-body-block[data-field-key='body'] {
            margin: 0;
        }

        .media-text-key-body+.media-text-key-body,
        .media-text-body-block[data-field-key='body']+.media-text-body-block[data-field-key='body'] {
            margin-top: 0.65em;
        }

        .media-text-action-wrap {
            margin: clamp(1.5rem, 3.2vw, 2.25rem) 0 0;
            padding: 0;
            display: flex;
            justify-content: center;
        }

        .media-text-primary-action {
            box-sizing: border-box;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: clamp(6px, calc(100vw * 8 / var(--layout-ref-width)), 8px);
            min-width: clamp(112px, calc(100vw * 128 / var(--layout-ref-width)), 128px);
            width: fit-content;
            height: clamp(40px, calc(100vw * 44 / var(--layout-ref-width)), 44px);
            padding: 0 clamp(20px, calc(100vw * 36 / var(--layout-ref-width)), 36px);
            white-space: nowrap;
            font-weight: 600;
            font-size: clamp(14px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            line-height: 1.2;
            color: #1c1b20;
            text-decoration: none;
            background: #ffffff;
            border: none;
            border-radius: clamp(8px, calc(100vw * 10 / var(--layout-ref-width)), 10px);
            box-shadow: 0 clamp(3px, calc(100vw * 4 / var(--layout-ref-width)), 4px) clamp(14px, calc(100vw * 20 / var(--layout-ref-width)), 20px) rgba(0, 0, 0, 0.18);
            text-shadow: none;
            transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease,
                box-shadow 0.18s ease;

            &:hover {
                background: #0f64c0;
                color: #ffffff;
                transform: translateY(-1px);
                box-shadow: 0 clamp(6px, calc(100vw * 8 / var(--layout-ref-width)), 8px) clamp(22px, calc(100vw * 28 / var(--layout-ref-width)), 28px) rgba(15, 100, 192, 0.35);
            }
        }

        .media-text-action-arrow {
            display: none;
        }

        @media (max-width: 768px) {
            text-align: center;
            color: #ffffff;

            [class*='-media-text-wrap'].media-text-wrap {
                min-height: min(52vh, 184px);
                padding: clamp(40px, 10vw, 56px) clamp(20px, 5vw, 24px);
            }

            .media-text-key-headline,
            .media-text-body-block[data-field-key='headline'] {
                font-size: clamp(18px, calc(100vw * 40 / var(--layout-ref-width)), 32px);
                font-weight: 600;
                line-height: 140%;
            }

            .media-text-body-block:not([data-field-key='headline']) {
                font-size: clamp(12px, 3.35vw, 18px);
                line-height: 160%;
                font-weight: 400;
            }
        }
    }

    /* ── HEADER 히어로 (MEDIA_TEXT + .HEADER, about·history 공통) */
    section.HEADER[class*='-media-text-section'] {
        --about-hero-h: min(600px, 100dvh, 100vh);
        position: relative;
        overflow: hidden;
        width: 100%;
        min-height: var(--about-hero-h);
        height: var(--about-hero-h);
        color: #ffffff;
        box-sizing: border-box;

        @media (max-width: 768px) {
            --about-hero-h: min(560px, 100dvh, 100vh);
            max-height: none;
        }

        [class*='-media-text-wrap'].media-text-wrap {
            position: relative;
            z-index: 1;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            min-height: var(--about-hero-h);
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: center;
            padding: clamp(80px, 14vh, 120px) var(--board-content-inset) clamp(48px, 8vh, 80px) var(--board-content-inset);

            @media (max-width: 768px) {
                align-items: flex-start;
                justify-content: center;
                padding: clamp(88px, 22vw, 140px) var(--board-content-inset) clamp(40px, 8vw, 56px);
                min-height: var(--about-hero-h);
            }
        }

        .media-text-media {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            min-height: 100%;
            z-index: 0;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;

            img,
            .media-text-video {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
                display: block;
            }

            &::after {
                content: '';
                position: absolute;
                inset: 0;
                pointer-events: none;
                z-index: 1;
                background: linear-gradient(100deg,
                        rgba(15, 23, 42, 0.9) 0%,
                        rgba(15, 23, 42, 0.55) 48%,
                        rgba(15, 23, 42, 0.25) 100%);
            }
        }

        .media-text-copy {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: min(75rem, 100%);
            min-width: 0;
            flex: 0 1 auto;
            align-self: flex-start;
            text-align: left;
            font-weight: 400;
            word-break: keep-all;
            text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);

            @media (max-width: 768px) {
                max-width: 100%;
                text-align: left;
            }
        }

        .media-text-body-block[data-field-key='eyebrow'],
        .media-text-key-eyebrow {
            width: 100%;
            font-weight: 500;
            font-size: clamp(1.125rem, 0.9vw + 0.95rem, 1.5rem);
            line-height: 160%;
            margin: 0 0 0.5rem;

            @media (max-width: 768px) {
                font-weight: 600;
                font-size: clamp(16px, calc(100vw * 16 / 390), 18px);
                line-height: 140%;
            }

            >p {
                margin: 0;
                font: inherit;
            }
        }

        .media-text-body-block[data-field-key='headline'],
        .media-text-key-headline {
            width: 100%;
            font-weight: 500;
            font-size: clamp(1.75rem, 2.46vw + 1.05rem, 4rem);
            line-height: 150%;
            margin: 0 0 1.25rem;
            letter-spacing: -0.03em;

            @media (max-width: 768px) {
                font-size: clamp(32px, calc(100vw * 32 / 390), 36px);
                line-height: 140%;
            }

            >p {
                margin: 0;
                font: inherit;
                letter-spacing: inherit;
            }
        }

        .media-text-body-block[data-field-key='summary'],
        .media-text-key-summary {
            width: 100%;
            font-weight: 500;
            font-size: clamp(16px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 140%;
            letter-spacing: -0.01em;

            @media (max-width: 768px) {
                font-weight: 400;
                font-size: clamp(12px, calc(100vw * 12 / 390), 16px);
                line-height: 160%;
            }

            >p {
                margin: 0;
                font: inherit;
                letter-spacing: inherit;
            }
        }

        /* 피그마 arrow-button: 192×48 · 1px solid #74757E · radius 30 — 다크 HEADER 히어로용 변형.
           - `.media-text-copy` 가 `text-align: left` 이므로 action-wrap 도 좌측 정렬
           - 다크 배경 + 흰 텍스트 컨텍스트 → 그레이 outline + 흰 텍스트, hover 시 흰 fill + 네이비 텍스트
           - 부모의 `text-shadow` 상속 끄기(`text-shadow: none`) — 버튼 텍스트는 또렷하게
           - 사이즈 clamp 로 모바일 축소(192→160, 48→44, padding 36→20)
           - 화살표는 main.css 와 동일한 mask SVG 기법(currentColor 추종) */
        .media-text-action-wrap {
            margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
            padding: 0;
            display: flex;
            justify-content: flex-start;
        }

        .media-text-primary-action {
            box-sizing: border-box;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            min-width: clamp(160px, 14vw, 192px);
            height: clamp(44px, 4vw, 48px);
            padding: 0 clamp(20px, 2vw, 36px);
            font-weight: 500;
            font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;
            color: #ffffff;
            text-decoration: none;
            text-shadow: none;
            background: transparent;
            border: 1px solid #74757E;
            border-radius: 30px;
            transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;

            &:hover {
                background: #ffffff;
                color: #162d55;
                border-color: #ffffff;
            }
        }

        .media-text-action-arrow {
            display: none;
            /*   display: inline-block;
            width: 12px;
            height: 12px;
            flex-shrink: 0;
            background-color: currentColor;
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M6.83333%2011L11%206L6.83333%201M11%206H1%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M6.83333%2011L11%206L6.83333%201M11%206H1%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center; */
        }
    }

    /* ── NAV 탭 (DEVELOPER sectionData.nav)
       PC 한정으로 sticky 적용 — hero 통과 후 헤더 바로 아래에 붙어 고정.
       - top: --public-header-height (header.css :root 에서 정의) → 헤더 하단에 정확히 정렬
       - z-index 997: 헤더(1000) 아래 + PC 메가메뉴(.gnb-dropdown, 998) 아래로 두어
         메가메뉴 열렸을 때 nav 가 메가메뉴를 가리지 않도록 한다
       - background: #fff → sticky 후 본문이 비치지 않도록 불투명 처리
       - 모바일(≤430) 에서는 sticky 해제 → 원래 자연 흐름 위치 유지 */
    section[class*='-list-section'].NAV {
        @media (min-width: 769px) {
            position: sticky;
            top: var(--public-header-height);
            z-index: 997;
            background: #F8FAFB;
        }

        width: 100%;
        box-sizing: border-box;
        padding: 0;
        margin: 0;

        >[class*='-list-content'] {
            max-width: calc(var(--board-content-max) + (var(--board-inline-gutter) * 2));
            margin: 0 auto;
            padding: 0 var(--board-inline-gutter);
            box-sizing: border-box;

            @media (max-width: 430px) {
                padding-inline: var(--board-inline-gutter);
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior-x: contain;
                scroll-padding-inline: var(--board-inline-gutter);
                scrollbar-width: none;

                &::-webkit-scrollbar {
                    display: none;
                }
            }
        }

        .public-list-tree {
            display: flex;
            flex-wrap: nowrap;
            justify-content: flex-start;
            list-style: none;
            margin: 0;
            padding: 0;
            box-sizing: border-box;

            @media (max-width: 430px) {
                justify-content: flex-start;
                gap: 0;
                width: max-content;
                min-width: 100%;
                padding: 0;
                margin: 0;
            }
        }

        li.public-list-item {
            flex: 0 0 auto;
            min-width: 0;
            margin: 0 !important;
            margin-left: 0 !important;
            margin-bottom: 0 !important;
            list-style: none;

            @media (max-width: 430px) {
                min-width: max-content;
            }
        }

        .public-list-item-content {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: stretch;

            @media (max-width: 430px) {
                width: max-content;
                padding: 0px 18px 0px;
                height: 51px;
            }
        }

        .public-list-item-text {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            min-height: 76px;

            @media (max-width: 430px) {
                flex: 0 0 auto;
                align-items: center;
                width: max-content;
                height: 51px;
                min-height: 51px;
                max-height: 51px;
            }

            a {
                position: relative;
                flex: 0 0 auto;
                align-self: flex-start;
                min-width: 152px;
                height: 76px;
                display: inline-flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 0 24px;
                font-size: clamp(0.875rem, 0.35vw + 0.8rem, 0.9375rem);
                font-weight: 500;
                color: #6b7280;
                text-decoration: none;
                transition: color 0.15s ease, background-color 0.15s ease;
                box-sizing: border-box;

                @media (max-width: 430px) {
                    align-self: center;
                    flex-shrink: 0;
                    flex-direction: row;
                    width: max-content;
                    min-width: max-content;
                    height: 51px;
                    min-height: 51px;
                    max-height: 51px;
                    padding: 0 12px;
                    font-size: 12px;
                    font-weight: 600;
                    line-height: 160%;
                    color: #47454f;
                    white-space: nowrap;
                    word-break: keep-all;
                }
            }
        }

        li.public-list-item:not(.public-list-item--active) .public-list-item-text a:hover {
            color: #162d55;
            background-color: #DCEBF9;
        }

        li.public-list-item--active .public-list-item-text a,
        .public-list-item-text a[aria-current='page'] {
            color: #162d55;
            font-weight: 600;
            background-color: transparent;

            /* 밑줄 = 링크(패딩 포함) 가로 전체 — width 고정 시 긴 라벨에서 짧아 보임 */
            &::after {
                content: '';
                position: absolute;
                left: 24px;
                right: 24px;
                bottom: 0;
                width: auto;
                height: 6px;
                background: #0F64C0;
                border-radius: 10px;

                @media (max-width: 430px) {
                    /* 링크 패딩(12px) 포함 — 탭 전체보다 살짝 짧게 */
                    left: 0;
                    right: 0;
                    height: 4px;
                    border-radius: 10px;

                }
            }

            &:hover {
                color: #0f2347;
                background-color: #DCEBF9;
            }
        }
    }
}

.board-page {
    overflow-x: clip;

    .board-main {
        min-width: 0;
    }

    /* ── 히어로·탭·컨테이너 — company NAV · solutions 와 동일 (1320 + gutter×2) */
    .board-hero__inner,
    .board-tab-bar__inner,
    .board-container {
        box-sizing: border-box;
        width: 100%;
        max-width: calc(var(--board-content-max) + (var(--board-inline-gutter) * 2));
        margin-left: auto;
        margin-right: auto;
        padding-inline: var(--board-inline-gutter);
    }

    /* ── 페이지별 배경·컨테이너 패딩 */
    &.board-page--news,
    &.board-page--faq,
    &.board-page--archive {
        .board-main {
            background: var(--board-surface);
        }

        .board-container {
            padding-top: clamp(0.5rem, 2vw, 1rem);
            padding-bottom: var(--board-inline-gutter);
            background: transparent;
            border-radius: 0;
            box-shadow: none;
        }
    }

    &.board-page--notice {
        .page-content section.TITLE[class*='-hero'] {
            @media (max-width: 768px) {
                padding-top: 100px;
            }
        }

        .board-main {
            background: var(--board-surface);
        }

        .board-container {
            padding-top: clamp(0.75rem, 2vw, 1rem);
            padding-bottom: var(--board-inline-gutter);
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            background: transparent;
            box-shadow: none;
            border-radius: 0;
        }
    }

    /* 상세 페이지 — 공지사항·자료실 (단일 컬럼 · 1000 본문) */
    &.board-page--notice,
    &.board-page--archive {
        .board-main--notice-detail {
            background: transparent;
        }

        .board-container--detail {
            box-sizing: border-box;
            width: 100%;
            max-width: calc(var(--board-content-max) + (var(--board-inline-gutter) * 2));
            margin-inline: auto;
            padding-block: var(--board-detail-block-padding);
            padding-inline: var(--board-inline-gutter);
            overflow-x: visible;
            background: transparent;
            box-shadow: none;
            border-radius: 0;
        }

        .notice-detail-main {
            width: 100%;
            min-width: 0;
        }

        .notice-detail-head {
            display: flex;
            flex-direction: column;
            gap: 24px;

            @media (max-width: 768px) {
                gap: clamp(12px, calc(100vw * 12 / 390), 16px);
            }
        }

        .notice-detail-badge {
            align-self: flex-start;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 4px 16px;
            gap: 10px;
            background: #0f64c0;
            border-radius: 20px;
            font-weight: 400;
            font-size: 14px;
            line-height: 160%;
            color: #ffffff;
            text-align: center;
            margin: 0;

            @media (max-width: 768px) {
                padding: 4px clamp(12px, calc(100vw * 12 / 390), 16px);
                font-size: clamp(10px, calc(100vw * 10 / 390), 12px);
            }
        }

        .notice-detail-date {
            display: block;
            margin: 0;
            font-weight: 600;
            font-size: clamp(18px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #2c4777;

            @media (max-width: 768px) {
                font-size: clamp(18px, calc(100vw * 18 / 390), 24px);
            }
        }

        .notice-detail-title {
            margin: 0;
            font-weight: 700;
            font-size: clamp(28px, calc(100vw * 48 / var(--layout-ref-width)), 48px);
            line-height: 160%;
            color: #1c1b20;
            word-break: keep-all;

            @media (max-width: 768px) {
                font-weight: 600;
                font-size: clamp(24px, calc(100vw * 24 / 390), 32px);
            }
        }

        .notice-detail-content {
            padding-bottom: clamp(40px, calc(100vw * 60 / var(--layout-ref-width)), 60px);
            min-height: 200px;
            font-size: clamp(14px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            word-break: keep-all;
            border-bottom: 1px solid #c4c7d0;

            img {
                max-width: 100%;
                height: auto;
            }
        }

        .notice-detail-post-nav {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: clamp(12px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            margin-top: clamp(40px, calc(100vw * 60 / var(--layout-ref-width)), 60px);

            @media (max-width: 640px) {
                grid-template-columns: 1fr;
            }
        }

        .notice-detail-post-nav-item {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-height: 0;
            padding: clamp(16px, calc(100vw * 20 / var(--layout-ref-width)), 20px)
                clamp(24px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            border: 1px solid #e8ecf2;
            border-radius: 12px;
            background: #ffffff;
            color: inherit;
            text-decoration: none;
            transition:
                border-color 0.15s ease,
                box-shadow 0.15s ease;

            &:hover:not(.is-empty) {
                box-shadow: 0 8px 40px rgba(22, 45, 85, 0.12);
                text-decoration: none;
            }

            &.is-empty {
                cursor: default;
                background: #eff2f6;

                .notice-detail-post-nav-label,
                .notice-detail-post-nav-label-text,
                .notice-detail-post-nav-chevron {
                    color: #74757e;
                }

                .notice-detail-post-nav-empty {
                    color: #74757e;
                }
            }
        }

        .notice-detail-post-nav-item--next {
            text-align: right;

            .notice-detail-post-nav-label {
                justify-content: flex-end;
            }
        }

        .notice-detail-post-nav-label {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin: 0 0 clamp(12px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            font-weight: 600;
            font-size: 12px;
            line-height: 160%;
            color: #0f64c0;

            @media (max-width: 768px) {
                font-weight: 400;
                font-size: clamp(10px, calc(100vw * 10 / 390), 12px);
            }
        }

        .notice-detail-post-nav-chevron {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 6px;
            height: 10px;
            color: #0f64c0;
        }

        .notice-detail-post-nav-chevron-icon {
            display: block;
            width: 6px;
            height: 10px;
        }

        .notice-detail-post-nav-label-text {
            min-width: 0;
        }

        .notice-detail-post-nav-date {
            font-weight: 400;
            font-size: 14px;
            line-height: 160%;
            color: #74757e;

            @media (max-width: 768px) {
                font-size: clamp(10px, calc(100vw * 10 / 390), 14px);
            }
        }

        .notice-detail-post-nav-title {
            font-weight: 600;
            font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;
            color: #1c1b20;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;

            @media (max-width: 768px) {
                font-size: clamp(12px, calc(100vw * 12 / 390), 18px);
            }
        }

        .notice-detail-post-nav-empty {
            font-size: 14px;
            color: #9ca3af;
        }

        .notice-detail-list-action {
            display: flex;
            width: 100%;
            margin-top: 40px;
        }

        .notice-detail-list-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: 12px 0;
            border: 1px solid #e6ebf0;
            border-radius: 40px;
            background: #ffffff;
            font-weight: 600;
            font-size: 16px;
            line-height: 140%;
            color: #47454f;
            text-decoration: none;
            transition:
                background-color 0.15s ease,
                border-color 0.15s ease,
                color 0.15s ease;

            @media (max-width: 768px) {
                border: 1px solid #c4c7d0;
                font-size: clamp(12px, calc(100vw * 12 / 390), 16px);
                line-height: 160%;
                color: #2c4777;
            }

            &:hover {
                background: #162d55;
                color: #ffffff;
                text-decoration: none;
            }
        }

        .archive-detail-category {
            margin: 8px 0 0;
            font-size: 16px;
            line-height: 160%;
            color: #47454f;
        }

        .archive-detail-empty {
            margin: 0;
            color: #888;
        }

        .archive-detail-download {
            margin-top: 28px;
        }

        .archive-detail-download-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 48px;
            padding: 0 24px;
            border-radius: 8px;
            background: #e8f2fc;
            color: #0f64c0;
            text-decoration: none;
            font-weight: 600;
            font-size: 16px;
            transition: background 0.15s ease, color 0.15s ease;

            &:hover {
                background: #0f64c0;
                color: #fff;
            }
        }
    }

    /* 상세 페이지 — 뉴스룸 (좌 784 · 우 sticky 사이드) */
    &.board-page--newsroom {
        .board-main {
            background: transparent;
        }

        .board-container--detail {
            box-sizing: border-box;
            width: 100%;
            max-width: calc(var(--board-content-max) + (var(--board-inline-gutter) * 2));
            margin-inline: auto;
            padding-block: var(--board-detail-block-padding);
            padding-inline: var(--board-inline-gutter);
            background: transparent;
        }

        .newsroom-detail-layout {
            display: flex;
            align-items: flex-start;
            gap: clamp(56px, calc(100vw * 88 / var(--layout-ref-width)), 88px);
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;

            @media (max-width: 1100px) {
                flex-direction: column;
                max-width: 100%;
            }
        }

        .newsroom-detail-main {
            flex: 0 0 clamp(620px, calc(100vw * 784 / var(--layout-ref-width)), 784px);
            width: clamp(620px, calc(100vw * 784 / var(--layout-ref-width)), 784px);
            min-width: 0;

            @media (max-width: 1100px) {
                flex: 1 1 auto;
                width: 100%;
            }
        }

        .newsroom-detail-aside {
            flex: 1 1 0;
            min-width: 0;
            position: sticky;
            top: calc(var(--public-header-height, 72px) + var(--board-detail-aside-sticky-gap, 24px));
            align-self: flex-start;
            display: flex;
            flex-direction: column;
            gap: clamp(32px, calc(100vw * 48 / var(--layout-ref-width)), 48px);

            @media (max-width: 1100px) {
                display: none;
            }
        }

        /* CMS NAV(sticky) 아래에 aside 가 붙도록 — 상세에 NAV 섹션이 있을 때만 */
        @media (min-width: 1100px) {
            .page-content:has(section[class*='-list-section'].NAV) .newsroom-detail-aside {
                top: calc(
                    var(--public-header-height, 72px) +
                    var(--board-section-nav-height, 76px) +
                    var(--board-detail-aside-sticky-gap, 24px)
                );
            }
        }

        .newsroom-detail-head {
            display: flex;
            flex-direction: column;
            gap: 24px;

            @media (max-width: 768px) {
                gap: clamp(12px, calc(100vw * 12 / 390), 16px);
            }
        }

        .newsroom-detail-date {
            display: block;
            margin: 0;
            font-weight: 600;
            font-size: clamp(18px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #47454f;

            @media (max-width: 768px) {
                font-weight: 600;
                font-size: clamp(18px, calc(100vw * 18 / 390), 24px);
                line-height: 160%;
                color: #47454f;
            }
        }

        .newsroom-detail-title {
            margin: 0;
            font-weight: 700;
            font-size: clamp(28px, calc(100vw * 48 / var(--layout-ref-width)), 48px);
            line-height: 160%;
            color: #1c1b20;
            word-break: keep-all;

            @media (max-width: 768px) {
                font-weight: 600;
                font-size: clamp(24px, calc(100vw * 24 / 390), 32px);
                line-height: 160%;
                color: #1c1b20;
                word-break: break-all;
            }
        }

        .newsroom-detail-category {
            align-self: flex-start;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 4px 16px;
            gap: 10px;
            background: #0f64c0;
            border-radius: 20px;
            font-weight: 400;
            font-size: 14px;
            line-height: 160%;
            color: #ffffff;
            text-align: center;
            margin: 0;

            @media (max-width: 768px) {
                padding: 4px clamp(12px, calc(100vw * 12 / 390), 16px);
                font-size: clamp(10px, calc(100vw * 10 / 390), 12px);
            }
        }

        .newsroom-detail-content {
            min-height: 200px;
            font-size: clamp(14px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            word-break: keep-all;
            border-bottom: 1px solid #c4c7d0;

            img {
                max-width: 100%;
                height: auto;
            }
        }

        .newsroom-detail-post-nav {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: clamp(12px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            margin-top: clamp(60px, calc(100vw * 80 / var(--layout-ref-width)), 80px);

            @media (max-width: 640px) {
                grid-template-columns: 1fr;
            }
        }

        .newsroom-detail-post-nav-item {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            gap: clamp(4px, calc(100vw * 4 / var(--layout-ref-width)), 4px);
            min-height: 0;
            padding: clamp(16px, calc(100vw * 20 / var(--layout-ref-width)), 20px)
                clamp(24px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
            border: 1px solid #e8ecf2;
            border-radius: 12px;
            background: #ffffff;
            color: inherit;
            text-decoration: none;
            transition:
                border-color 0.15s ease,
                box-shadow 0.15s ease;

            &:hover:not(.is-empty) {
                box-shadow: 0 8px 40px rgba(22, 45, 85, 0.12);
                text-decoration: none;
            }

            &.is-empty {
                cursor: default;
                background: #eff2f6;

                .newsroom-detail-post-nav-label,
                .newsroom-detail-post-nav-label-text,
                .newsroom-detail-post-nav-chevron {
                    color: #74757e;
                }

                .newsroom-detail-post-nav-empty {
                    color: #74757e;
                }
            }
        }

        .newsroom-detail-post-nav-label {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin: 0 0 clamp(12px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            font-weight: 600;
            font-size: 12px;
            line-height: 160%;
            color: #0f64c0;

            @media (max-width: 768px) {
                font-weight: 400;
                font-size: clamp(10px, calc(100vw * 10 / 390), 12px);
                line-height: 160%;
                color: #0f64c0;
            }
        }

        .newsroom-detail-post-nav-chevron {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 6px;
            height: 10px;
            color: #0f64c0;

            @media (max-width: 768px) {
                width: clamp(3.94px, calc(100vw * 3.94 / 390), 6px);
                height: clamp(7px, calc(100vw * 7 / 390), 10px);
            }
        }

        .newsroom-detail-post-nav-chevron-icon {
            display: block;
            width: 6px;
            height: 10px;

            @media (max-width: 768px) {
                width: clamp(3.94px, calc(100vw * 3.94 / 390), 6px);
                height: clamp(7px, calc(100vw * 7 / 390), 10px);
            }
        }

        .newsroom-detail-post-nav-label-text {
            min-width: 0;
        }

        .newsroom-detail-post-nav-date {
            font-weight: 400;
            font-size: 14px;
            line-height: 160%;
            color: #74757e;

            @media (max-width: 768px) {
                font-weight: 400;
                font-size: clamp(10px, calc(100vw * 10 / 390), 14px);
                line-height: 160%;
                color: #74757e;
            }
        }

        .newsroom-detail-post-nav-title {
            font-weight: 600;
            font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;
            color: #1c1b20;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;

            @media (max-width: 768px) {
                font-weight: 600;
                font-size: clamp(12px, calc(100vw * 12 / 390), 18px);
                line-height: 160%;
                color: #1c1b20;
            }
        }

        .newsroom-detail-post-nav-empty {
            font-size: 14px;
            color: #9ca3af;
        }

        .newsroom-detail-list-action {
            display: flex;
            width: 100%;
            margin-top: 40px;
        }

        .newsroom-detail-list-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: 12px 0;
            border: 1px solid #e6ebf0;
            border-radius: 40px;
            background: #ffffff;
            font-weight: 600;
            font-size: 16px;
            line-height: 140%;
            color: #47454f;
            text-decoration: none;
            transition:
                background-color 0.15s ease,
                border-color 0.15s ease,
                color 0.15s ease;

            @media (max-width: 768px) {
                border: 1px solid #c4c7d0;
                font-weight: 600;
                font-size: clamp(12px, calc(100vw * 12 / 390), 16px);
                line-height: 160%;
                color: #2c4777;
            }

            &:hover {
                background: #162d55;
                color: #ffffff;
                text-decoration: none;
            }
        }

        .newsroom-detail-aside-block {
            width: 100%;
        }

        .newsroom-detail-aside-title {
            margin: 0 0 clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            padding-bottom: 12px;
            border-bottom: 1px solid #C4C7D0;
            font-weight: 600;
            font-size: clamp(20px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #000000;
        }

        .newsroom-detail-latest-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: clamp(16px, calc(100vw * 20 / var(--layout-ref-width)), 20px);
        }

        .newsroom-detail-latest-link {
            display: flex;
            align-items: flex-start;
            gap: clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
            color: inherit;
            text-decoration: none;
            padding: 16px 8px;
            &:hover {
                text-decoration: none;
                background: #EFF2F6;
            }
        }

        .newsroom-detail-latest-thumb {
            flex-shrink: 0;
            width: clamp(100px, calc(100vw * 195 / var(--layout-ref-width)), 195px);
            height: clamp(62px, calc(100vw * 121 / var(--layout-ref-width)), 121px);
            border-radius: 8px;
            overflow: hidden;
            background: #eff2f6;

            img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            &--empty {
                display: block;
            }
        }

        .newsroom-detail-latest-copy {
            display: flex;
            flex-direction: column;
            gap: clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
            min-width: 0;
        }

        .newsroom-detail-latest-date {
            font-weight: 400;
            font-size: 14px;
            line-height: 160%;
            color: #74757e;
        }

        .newsroom-detail-latest-title {
            font-weight: 600;
            font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;
            color: #1c1b20;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            transition: color 0.15s ease;
        }

        .newsroom-detail-tags {
            display: flex;
            flex-wrap: wrap;
            gap: clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
        }

        .newsroom-detail-tags--mobile {
            display: none;
        }

        @media (max-width: 1100px) {
            .newsroom-detail-tags--mobile {
                display: flex;
                margin-top: clamp(24px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            }
        }

        .newsroom-detail-tag {
            box-sizing: border-box;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: clamp(8px, calc(100vw * 10 / var(--layout-ref-width)), 10px);
            padding: clamp(4px, calc(100vw * 4 / var(--layout-ref-width)), 4px)
                clamp(12px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            border-radius: 20px;
            background: #dcebf9;
            font-weight: 400;
            font-size: 14px;
            line-height: 160%;
            color: #18317c;
            text-decoration: none;
            transition: background 0.15s ease, color 0.15s ease;

            &:hover {
                background: #0f64c0;
                color: #ffffff;
                text-decoration: none;
            }
        }
    }


    &.board-page--faq {
        .support-faq {
            min-width: 0;
            max-width: 100%;
        }
    }

    &.board-page--archive {
        .archive-list {
            min-width: 0;
            max-width: 100%;
        }

        @media (max-width: 768px) {
            .board-main--archive {
                .archive-list {
                    margin-top: 1rem;
                }

                .archive-list__item {
                    gap: 10px;
                    padding: 12px 0;
                    align-items: center;
                    flex-wrap: nowrap;
                }

                .archive-list__thumb {
                    width: 56px;
                    height: 56px;
                    margin: 0;
                }

                .archive-list__body {
                    gap: 4px;
                }

                .archive-list__title {
                    font-size: 16px;
                    line-height: 150%;
                }

                .archive-list__category {
                    font-size: 13px;
                    line-height: 150%;
                }

                .archive-list__date {
                    font-size: 14px;
                    line-height: 150%;
                    order: unset;
                    margin-left: 0;
                }

                .archive-list__download {
                    width: 40px;
                    height: 40px;
                    order: unset;
                    margin-left: 0;

                    svg {
                        width: 18px;
                        height: 18px;
                    }
                }
            }
        }
    }

    /* ── 히어로 */
    .board-hero {
        padding: clamp(6rem, 5vw, 3rem) 0 clamp(6rem, 4vw, 2.5rem);

        .board-hero__title {
            font-size: clamp(1.5rem, 4.5vw, 2.1rem);
            font-weight: 700;
            margin: 0 0 1.65rem;
            letter-spacing: -0.02em;
            line-height: 1.2;
        }

        .board-hero__lead {
            font-size: clamp(0.875rem, 2.8vw, 0.98rem);
            line-height: 1.55;
            opacity: 0.88;
            max-width: 34rem;

            p {
                margin: 0;
            }

            p+p {
                margin-top: 0.35rem;
            }
        }
    }

    /* ── 탭 바 */
    .board-tab-bar {
        background: var(--board-surface);
        border-bottom: 1px solid #e5eaeb;

        .board-tab-bar__inner {
            display: flex;
            align-items: stretch;
            min-height: 48px;
        }
    }

    .board-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 1.25rem 1.75rem;
        align-items: center;

        @media (max-width: 380px) {
            gap: 0.75rem 1.1rem;
        }
    }

    .board-tab {
        display: inline-flex;
        align-items: center;
        padding: 0.7rem 0;
        font-size: clamp(0.9rem, 2.6vw, 1rem);
        color: #555;
        text-decoration: none;
        border-bottom: 3px solid transparent;
        font-weight: 500;
        transition: color 0.15s ease;
        white-space: nowrap;

        &:hover {
            color: #222;
        }

        &[aria-current="page"] {
            color: #111;
            font-weight: 700;
            border-bottom-color: var(--board-accent);
            border-bottom-width: 3px;
        }
    }

    /* ── 카드 그리드 */
    .board-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(0.85rem, 2vw, 1.25rem);
        margin: 0 0 1.5rem;
        list-style: none;
        padding: 0;
        width: 100%;
        align-items: stretch;

        @media (max-width: 1100px) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        @media (max-width: 768px) {
            grid-template-columns: 1fr;
            gap: 12px;
            margin-bottom: 1.25rem;
        }

        >li {
            margin: 0;
            min-width: 0;
        }

        &.board-grid--empty {
            grid-template-columns: 1fr;
        }
    }

    .board-grid__empty,
    .board-grid__loading {
        grid-column: 1 / -1;
        text-align: center;
        padding: 3rem 1rem;
        color: #666;
    }

    /* ── 카드 (뉴스룸 — PC --board-card-ref-width × --board-card-ref-height 기준) */
    .board-card {
        display: flex;
        flex-direction: column;
        width: 100%;
        aspect-ratio: var(--board-card-ref-width) / var(--board-card-ref-height);
        height: auto;
        background: #fff;
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid #e8ecf2;
        box-shadow: none;
        text-decoration: none;
        color: inherit;
        transition: border-color 0.2s ease, transform 0.2s ease;
        -webkit-tap-highlight-color: transparent;

        @media (hover: hover) {
            &:hover {
                border-color: #d4dae3;
                transform: translateY(-2px);

                .board-card__body .board-card__title {
                    color: #0f64c0;
                }
            }
        }

        .board-card__figure {
            position: relative;
            margin: 0;
            flex: 0 0 58%;
            min-height: 0;
            background: linear-gradient(145deg, #e0e0e0, #f0f0f0);
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }

            .board-card__category {
                position: absolute;
                top: 20px;
                right: 20px;
                z-index: 1;
                display: inline-flex;
                align-items: center;
                gap: clamp(6px, calc(100vw * 10 / var(--layout-ref-width)), 10px);
                box-sizing: border-box;
                padding:
                    clamp(3px, calc(100vw * 4 / var(--layout-ref-width)), 4px) clamp(12px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
                background: #0f64c0;
                border-radius: clamp(14px, calc(100vw * 20 / var(--layout-ref-width)), 20px);
                font-weight: 400;
                font-size: clamp(12px, calc(100vw * 14 / var(--layout-ref-width)), 14px);
                line-height: 160%;
                color: #ffffff;
                white-space: nowrap;
            }
        }

        .board-card__important {
            position: absolute;
            top: 12px;
            left: 12px;
            background: rgba(220, 53, 69, 0.95);
            color: #fff;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.72rem;
            font-weight: 700;
            z-index: 1;
        }

        .board-card__body {
            flex: 1 1 42%;
            min-height: 0;
            min-width: 0;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            padding: clamp(22px, calc(100vw * 28 / var(--layout-ref-width)), 28px);
            gap: 12px;

            .board-card__date {
                font-weight: 400;
                font-size: clamp(14px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
                line-height: 170%;
                color: #47454f;
            }

            .board-card__title {
                font-weight: 600;
                font-size: clamp(18px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
                line-height: 160%;
                color: #1c1b20;
                transition: color 0.2s ease;
                overflow: hidden;
                max-height: calc(1.6em * 2);
            }
        }

        /* 모바일 — 가로 카드 (390: figure 126 · body 224 @350 = 126+224) */
        @media (max-width: 768px) {
            flex-direction: row;
            align-items: stretch;
            aspect-ratio: auto;
            border-radius: 16px;

            @media (hover: hover) {
                &:hover {
                    transform: none;
                }
            }

            .board-card__figure {
                flex: 0 0 36%;
                width: 36%;
                aspect-ratio: 126 / 121;
                height: auto;
                min-height: 0;

                .board-card__category {
                    top: 8px;
                    right: 8px;
                    padding: 2px 10px;
                    border-radius: 12px;
                    font-size: clamp(11px, calc(100vw * 12 / 390), 12px);
                }
            }

            .board-card__important {
                top: 8px;
                left: 8px;
            }

            .board-card__body {
                flex: 1 1 64%;
                min-width: 0;
                justify-content: center;
                padding: 12px 14px;
                gap: 6px;

                .board-card__date {
                    font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
                    line-height: 160%;
                }

                .board-card__title {
                    font-size: clamp(14px, calc(100vw * 16 / 390), 16px);
                    line-height: 160%;
                    max-height: calc(1.6em * 2);
                }
            }
        }
    }

    /* ── 페이지네이션 (배경 없음 · active 네이비 · hover 연한 블루) */
    .board-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: clamp(10px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
        margin-block: clamp(56px, 5vw, 80px);
        flex-wrap: wrap;
        background: transparent;

        .board-page-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            min-width: 36px;
            height: 36px;
            padding: 0 8px;
            border: none;
            border-radius: 8px;
            background: transparent;
            color: #47454f;
            font-family: inherit;
            font-size: 0.875rem;
            font-weight: 500;
            line-height: 1;
            cursor: pointer;
            transition: background 0.15s ease, color 0.15s ease;

            &:hover:not(:disabled):not(.board-page-btn--active) {
                background: #dcebf9;
                color: #2c4777;
            }

            &.board-page-btn--active {
                background: #162d55;
                color: #ffffff;
                cursor: default;
                pointer-events: none;
            }

            &.board-page-btn--nav {
                min-width: 28px;
                padding: 0 6px;
                color: #74757e;

                .board-page-btn__chevron {
                    display: block;
                    width: 8px;
                    height: 14px;
                    flex-shrink: 0;
                }

                .board-page-btn__chevron--next {
                    transform: scaleX(-1);
                }

                &:hover:not(:disabled) {
                    background: transparent;
                    color: #162d55;
                }
            }

            &.board-page-btn--disabled,
            &:disabled {
                opacity: 0.35;
                cursor: not-allowed;
                pointer-events: none;
            }
        }

        .board-page-dots {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 28px;
            height: 36px;
            font-size: 0.875rem;
            color: #9ca3af;
        }


        /* 모바일 — 더 보기 (인증서·특허 .cert-load-more-btn 동일) */
        &.board-pagination--load-more {
            width: 100%;
        }

        .board-load-more-btn {
            display: none;
            box-sizing: border-box;
            width: 100%;
            min-height: 48px;
            padding: 12px 24px;
            border: none;
            border-radius: 999px;
            background: #e8eef5;
            color: #2c4777;
            font-family: inherit;
            font-weight: 600;
            font-size: clamp(12px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
            line-height: 160%;
            text-align: center;
            cursor: pointer;
            transition: background 0.15s ease, color 0.15s ease;

            &:hover:not(:disabled) {
                background: #dcebf9;
                color: #2c4777;
            }

            &:focus-visible {
                outline: 2px solid #2563eb;
                outline-offset: 2px;
            }

            &:disabled {
                opacity: 0.7;
                cursor: wait;
            }
        }

        &.board-pagination--load-more .board-load-more-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
    }

    /* ── 컨트롤 (검색·카테고리) */
    .board-controls {
        display: flex;
        flex-direction: column;
        gap: 80px;
        margin-top: 1.25rem;
        margin-bottom: 1.25rem;
        min-width: 0;
        max-width: 100%;

        @media (max-width: 768px) {
            gap: 40px;
        }
    }

    /* ── 주요 공지 (중요 · 최신 1건) */
    .board-featured {

        .board-featured__inner {
            width: 100%;
        }

        .board-featured__link {
            position: relative;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            gap: 40px;
            width: 100%;
            padding: 60px;
            border: 1px solid #c4c7d0;
            border-radius: 12px;
            background: #eff2f6;
            color: inherit;
            text-decoration: none;
        }

        .board-featured__date-block {
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-width: clamp(48px, calc(100vw * 56 / var(--layout-ref-width)), 56px);
            color: #47454f;
            text-align: center;
        }

        .board-featured__date-ym {
            font-weight: 600;
            font-size: 24px;
            line-height: 160%;
            color: #47454f;
        }

        .board-featured__date-day {
            font-weight: 700;
            font-size: 40px;
            line-height: 150%;
            color: #47454f;
        }

        .board-featured__body {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
        }

        .board-featured__head {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: clamp(8px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
            width: 100%;
        }

        .board-featured__date-mobile {
            display: none;
        }

        .board-featured__badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 4px 16px;
            border-radius: 20px;
            background: #0f64c0;
            font-weight: 600;
            font-size: 12px;
            line-height: 160%;
            color: #ffffff;
        }

        .board-featured__title {
            margin: 0;
            font-weight: 600;
            font-size: 32px;
            line-height: 140%;
            color: #1c1b20;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        .board-featured__summary {
            margin: 0;
            font-weight: 400;
            font-size: 18px;
            line-height: 160%;
            color: #47454f;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        .board-featured__chevron {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #c4c7d0;
        }

        .board-featured__chevron-icon {
            display: block;
            width: 14px;
            height: 24px;
        }

        .board-featured__link:hover .board-featured__title {
            color: #0f64c0;
        }

        .board-featured__link:hover .board-featured__chevron-icon {
            color: #0f64c0;
        }

        .board-featured__link:hover .board-featured__chevron-icon path {
            fill: #0f64c0;
        }

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

        @media (max-width: 768px) {
            .board-featured__link {
                flex-direction: column;
                align-items: stretch;
                gap: clamp(12px, calc(100vw * 16 / 390), 16px);
                padding: clamp(24px, calc(100vw * 24 / 390), 32px);
            }

            .board-featured__date-mobile {
                display: block;
                margin: 0;
                font-weight: 600;
                font-size: clamp(12px, calc(100vw * 12 / 390), calc(768px * 12 / 390));
                line-height: 160%;
                color: #47454f;
            }

            .board-featured__date-block {
                display: none;
            }

            .board-featured__chevron {
                display: none;
            }

            .board-featured__body {
                gap: clamp(10px, calc(100vw * 12 / 390), 12px);
            }

            .board-featured__head {
                flex-direction: row;
                flex-wrap: wrap;
                align-items: center;
                gap: 12px;
            }

            .board-featured__title,
            #notice-featured-heading {
                order: 1;
                font-weight: 600;
                font-size: clamp(18px, calc(100vw * 18 / 390), calc(768px * 18 / 390));
                line-height: 160%;
                color: #1c1b20;
            }

            .board-featured__badge {
                order: 2;
                font-weight: 400;
                font-size: clamp(12px, calc(100vw * 12 / 390), calc(768px * 12 / 390));
                line-height: 160%;
                color: #ffffff;
            }

            .board-featured__summary {
                font-weight: 400;
                font-size: clamp(12px, calc(100vw * 12 / 390), calc(768px * 12 / 390));
                line-height: 160%;
                color: #47454f;
                -webkit-line-clamp: unset;
                display: block;
                overflow: visible;
            }
        }
    }

    /* ── 검색 바 */
    &.board-page--news {
        .board-keyword-search-row {
            width: 100%;
        }

        .board-keyword-search {
            display: flex;
            align-items: center;
            gap: 24px;
            width: 100%;
            box-sizing: border-box;
            padding: 12px 16px;
            border-radius: 30px;
            border: 1px solid #e8ecf2;
            background: #ffffff;
            transition: border-color 0.15s ease;

            &.board-keyword-search--active {
                border: 1px solid #0f64c0;

                .board-keyword-search__icon {
                    color: #0f64c0;
                }
            }

            .board-keyword-search__icon {
                flex-shrink: 0;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 32px;
                height: 32px;
                color: #74757e;
                pointer-events: none;
                transition: color 0.15s ease;
            }

            .board-keyword-search__input {
                flex: 1;
                min-width: 0;
                border: none;
                padding: 0;
                font-weight: 400;
                font-size: 18px;
                line-height: 160%;
                outline: none;
                background: transparent;
                color: #74757e;

                &::placeholder {
                    color: #74757e;
                }

                &::-webkit-search-cancel-button {
                    -webkit-appearance: none;
                }
            }
        }

        .board-keyword-search-result {
            margin: 20px 0 0;
            padding: 0;
            font-weight: 400;
            font-size: 18px;
            line-height: 160%;
            color: #74757e;
            text-align: right;
        }

        .board-controls--newsroom-search {
            margin-bottom: 40px;
        }
    }

    .board-pill-search-row {
        display: flex;
        justify-content: flex-end;
        width: 100%;

        @media (max-width: 640px) {
            justify-content: stretch;
        }
    }

    .board-pill-search {
        display: flex;
        align-items: stretch;
        gap: 0;
        width: 38%;
        min-width: 11.5rem;
        max-width: 22rem;
        border-radius: 999px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        background: #fff;
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);

        @media (max-width: 640px) {
            width: 100%;
            min-width: 0;
            max-width: none;
        }

        .board-pill-search__input {
            flex: 1;
            min-width: 0;
            border: none;
            padding: 0.72rem 1rem 0.72rem 1.15rem;
            font-size: 0.95rem;
            outline: none;
            background: transparent;
            color: #222;

            &::placeholder {
                color: #9ca3af;
            }
        }

        .board-pill-search__submit {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 3rem;
            border: none;
            background: transparent;
            color: #555;
            cursor: pointer;
            transition: color 0.15s ease, background 0.15s ease;

            &:hover {
                color: #222;
                background: rgba(0, 0, 0, 0.04);
            }
        }
    }

    /* ── 카테고리 칩 (FAQ · 자료실 공통) */
    .board-category-bar {
        background: #eff2f6;
        border: 1px solid #d8dce1;
        border-radius: 30px;
        padding: 8px 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;

        &::-webkit-scrollbar {
            display: none;
        }

        .board-category-bar__track {
            display: flex;
            flex-wrap: nowrap;
            gap: 12px;
            width: 100%;
            min-width: min(100%, 20rem);
        }
    }

    .board-category-chip {
        flex: 1 1 0;
        min-width: 0;
        border: none;
        cursor: pointer;
        padding: 14px 12px;
        border-radius: 999px;
        font-size: 18px;
        font-weight: 600;
        line-height: 160%;
        color: #74757e;
        background: transparent;
        text-align: center;
        white-space: nowrap;
        font-family: inherit;

        &.board-category-chip--active {
            background: #1a2d50;
            color: #fff;
        }

        @media (max-width: 768px) {
            padding: 10px 8px;
            font-size: 14px;
            line-height: 160%;
        }
    }

    @media (max-width: 768px) {
        .board-category-bar {
            padding: 6px 10px;
            border-radius: 24px;

            .board-category-bar__track {
                gap: 8px;
            }
        }
    }

    /* ── 공지 목록 */
    .board-notice-list {
        list-style: none;
        margin: 0;
        padding: 0;
        border-radius: 0;
        border: none;
        box-shadow: none;

        .board-notice-list__item {
            border-bottom: 1px solid #C4C7D0;
        }

        .board-notice-list__link {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            padding: 24px 40px;
            gap: 60px;
            text-decoration: none;
            color: inherit;
        }

        .board-notice-list__main {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: clamp(8px, calc(100vw * 10 / var(--layout-ref-width)), 10px);
        }

        .board-notice-list__title {
            margin: 0;
            font-weight: 600;
            font-size: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #1c1b20;
            transition: color 0.15s ease;
        }

        .board-notice-list__summary {
            margin: 0;
            font-weight: 400;
            font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;
            color: #47454f;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
        }

        .board-notice-list__date {
            flex-shrink: 0;
            font-weight: 400;
            font-size: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            line-height: 160%;
            color: #47454f;
            white-space: nowrap;
        }

        @media (max-width: 768px) {
            .board-notice-list__link {
                box-sizing: border-box;
                flex-direction: column;
                align-items: stretch;
                gap: clamp(4px, calc(100vw * 4 / 390), calc(768px * 4 / 390));
                padding:
                    clamp(24px, calc(100vw * 24 / 390), calc(768px * 24 / 390))
                    clamp(12px, calc(100vw * 12 / 390), calc(768px * 12 / 390));
            }

            .board-notice-list__main {
                order: 2;
                gap: clamp(12px, calc(100vw * 12 / 390), calc(768px * 12 / 390));
            }

            .board-notice-list__date {
                order: 1;
                font-weight: 400;
                font-size: clamp(10px, calc(100vw * 10 / 390), calc(768px * 10 / 390));
                line-height: 160%;
                color: #47454f;
            }

            .board-notice-list__title {
                font-weight: 600;
                font-size: clamp(18px, calc(100vw * 18 / 390), calc(768px * 18 / 390));
                line-height: 160%;
                color: #1c1b20;
            }

            .board-notice-list__summary {
                font-weight: 400;
                font-size: clamp(12px, calc(100vw * 12 / 390), calc(768px * 12 / 390));
                line-height: 160%;
                color: #47454f;
            }
        }

        .board-notice-list__state {
            margin: 0;
            padding: 2rem 1.1rem;
            text-align: center;
            color: #666;
            font-size: 0.95rem;

            &.board-notice-list__state--error {
                color: #b91c1c;
            }
        }
    }

    /* ── 하단 CTA */
    .board-cta {
        background: #e8e8e8;
        padding: clamp(2.25rem, 6vw, 3rem) var(--board-inline-gutter);
        text-align: center;

        .board-cta__inner {
            max-width: 28rem;
            margin: 0 auto;
        }

        .board-cta__title {
            font-size: clamp(1.35rem, 4vw, 1.55rem);
            font-weight: 700;
            margin: 0 0 0.5rem;
            color: #222;
            line-height: 1.25;
        }

        .board-cta__lead {
            color: #555;
            margin: 0 0 1.15rem;
            line-height: 1.55;
            font-size: clamp(0.88rem, 2.6vw, 0.95rem);
        }

        .board-cta__btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.72rem 1.85rem;
            min-height: 44px;
            background: #252542;
            color: #fff;
            font-weight: 600;
            font-size: 0.95rem;
            border-radius: 6px;
            text-decoration: none;
            transition: background 0.2s ease;

            &:hover {
                background: #34345a;
                color: #fff;
            }
        }
    }

    /* ── 공지 하단 2열 (related_solutions 레이아웃 · 배경 없음) */
    .board-notice-dual {
        background: transparent;
        box-sizing: border-box;
        padding:
            0
            0
            clamp(60px, calc(100vw * 100 / var(--layout-ref-width)), 100px);

        .board-container {
            padding-top: 0;
            padding-bottom: 0;
            overflow-x: visible;
        }

        .board-notice-dual__grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            width: 100%;

            @media (max-width: 900px) {
                grid-template-columns: 1fr;
            }
        }

        .board-notice-dual__card {
            box-sizing: border-box;
            display: flex;
            align-items: flex-start;
            gap: 24px;
            padding:
                clamp(24px, calc(100vw * 60 / var(--layout-ref-width)), 60px)
                clamp(24px, calc(100vw * 44 / var(--layout-ref-width)), 44px);
            background: #ffffff;
            border: 1px solid #e6ebf0;
            border-radius: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            color: inherit;
            text-decoration: none;
            transition: border-color 0.18s ease;

            &:hover {
                border-color: #0f64c0;
                text-decoration: none;

                .board-notice-dual__title {
                    color: #0f64c0;
                }

                .board-notice-dual__arrow {
                    color: #0f64c0;
                }
            }

            &:focus-visible {
                outline: 2px solid #0f64c0;
                outline-offset: 2px;
            }
        }

        .board-notice-dual__icon {
            flex-shrink: 0;
            align-self: flex-start;
            display: inline-flex;
        }

        .board-notice-dual__icon--company .board-notice-dual__icon-svg {
            display: block;
            width: clamp(40px, calc(100vw * 52 / var(--layout-ref-width)), 52px);
            height: clamp(34px, calc(100vw * 44 / var(--layout-ref-width)), 44px);
        }

        .board-notice-dual__icon--support .board-notice-dual__icon-svg {
            display: block;
            width: clamp(38px, calc(100vw * 49 / var(--layout-ref-width)), 49px);
            height: clamp(36px, calc(100vw * 47 / var(--layout-ref-width)), 47px);
        }

        .board-notice-dual__content {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .board-notice-dual__head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            width: 100%;
        }

        .board-notice-dual__title {
            margin: 0;
            flex: 1;
            min-width: 0;
            font-weight: 600;
            font-size: clamp(20px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
            line-height: 140%;
            color: #0f64c0;
            transition: color 0.18s ease;
        }

        .board-notice-dual__lead {
            margin: 0;
            font-weight: 400;
            font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
            line-height: 160%;
            color: #47454f;
        }

        .board-notice-dual__arrow {
            flex-shrink: 0;
            width: clamp(20px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            height: clamp(20px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
            background-color: currentColor;
            color: #c4c7d0;
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 5l8 7-8 7' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 5l8 7-8 7' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
            transition: color 0.18s ease;
        }

        @media (max-width: 768px) {
            display: none;
        }
    }

    /* ── FAQ */
    .support-faq {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;

        .support-faq__loading,
        .support-faq__empty {
            text-align: center;
            padding: 2rem 1rem;
            color: #666;
        }

        .support-faq__item {
            background: #fff;
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: var(--board-radius);
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
            overflow: hidden;

            &[open] {
                .support-faq__summary::after {
                    content: "\2212";
                }

                .support-faq__panel {
                    padding-top: 0.85rem;
                }
            }
        }

        .support-faq__summary {
            list-style: none;
            cursor: pointer;
            padding: 1rem 2.75rem 1rem 1.15rem;
            font-size: clamp(0.95rem, 2.6vw, 1.05rem);
            color: #222;
            position: relative;
            display: flex;
            align-items: flex-start;
            gap: 0.65rem;

            &::-webkit-details-marker {
                display: none;
            }

            &::after {
                content: "+";
                position: absolute;
                right: 1.1rem;
                top: 50%;
                transform: translateY(-50%);
                font-size: 1.25rem;
                font-weight: 400;
                line-height: 1;
                color: #555;
                transition: color 0.15s ease;
            }
        }

        .support-faq__summary-inner {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.5rem 0.65rem;
            flex: 1;
            min-width: 0;
        }

        .support-faq__badge {
            display: inline-flex;
            align-items: center;
            padding: 0.2rem 0.55rem;
            border-radius: 999px;
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: -0.01em;
            background: rgba(26, 86, 214, 0.12);
            color: var(--board-accent);
            flex-shrink: 0;
        }

        .support-faq__q {
            display: inline;
            font-weight: 700;
            line-height: 1.45;
            word-break: break-word;
        }

        .support-faq__q-mark {
            margin-right: 0.25rem;
            color: #444;
        }

        .support-faq__panel {
            padding: 0 1.15rem 1.15rem;
            border-top: 1px solid #eee;
            color: #333;
            line-height: 1.65;
        }

        .support-faq__answer {
            display: flex;
            align-items: flex-start;
            gap: 0.35rem;
        }

        .support-faq__answer-content {
            flex: 1;
            min-width: 0;
        }

        .support-faq__a-mark {
            font-weight: 700;
            color: #444;
            flex-shrink: 0;
            line-height: inherit;
            padding-top: 0.05em;
        }
    }

    /* ── 자료실 목록 */
    .archive-list {
        list-style: none;
        margin: 1.25rem 0 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0;

        .archive-list__message {
            text-align: center;
            padding: 2rem 1rem;
            color: #666;
            border-bottom: 1px solid #e8eaee;
        }

        .archive-list__item {
            display: flex;
            align-items: center;
            gap: clamp(12px, 2vw, 24px);
            padding: clamp(16px, 2.5vw, 24px) 0;
            border-bottom: 1px solid #e8eaee;
            min-width: 0;
        }

        .archive-list__link {
            flex: 1;
            min-width: 0;
            display: flex;
            align-items: center;
            gap: clamp(12px, 2vw, 24px);
            text-decoration: none;
            color: inherit;
        }

        .archive-list__thumb {
            flex-shrink: 0;
            margin: 0 auto;
            padding: 0;
            gap: 10px;
            width: 76px;
            height: 76px;
            background: #e8ecf2;
            border-radius: 4px;
        }

        .archive-list__body {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .archive-list__title {
            margin: 0;
            font-weight: 600;
            font-size: 24px;
            line-height: 160%;
            color: #1c1b20;
            word-break: break-word;
        }

        .archive-list__category {
            margin: 0;
            font-weight: 400;
            font-size: 18px;
            line-height: 160%;
            color: #47454f;
        }

        .archive-list__date {
            flex-shrink: 0;
            font-weight: 400;
            font-size: 24px;
            line-height: 160%;
            color: #47454f;
            white-space: nowrap;
        }

        .archive-list__download {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 52px;
            height: 52px;
            border-radius: 8px;
            color: #0f64c0;
            background: #e8f2fc;
            text-decoration: none;
            transition: background 0.15s ease, color 0.15s ease;

            &:hover {
                background: #0f64c0;
                color: #fff;
            }

            &--disabled {
                opacity: 0.35;
                pointer-events: none;
            }
        }
    }

    /* ── 비밀글 비밀번호 모달 */
    .password-modal {
        position: fixed;
        inset: 0;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;

        .password-modal-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
        }

        .password-modal-content {
            position: relative;
            background: #ffffff;
            border-radius: 8px;
            padding: 30px;
            min-width: 400px;
            max-width: 90%;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            z-index: 1001;

            h3 {
                margin: 0 0 20px;
                font-size: 1.2rem;
                color: #333;
            }
        }

        .password-modal-body {
            margin-bottom: 20px;
        }

        .password-input {
            width: 100%;
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 6px;
            font-size: 1rem;
            box-sizing: border-box;

            &:focus {
                outline: none;
                border-color: #2196f3;
                box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
            }
        }

        .password-modal-error {
            margin-top: 10px;
            padding: 10px;
            background: #f8d7da;
            color: #721c24;
            border-radius: 4px;
            font-size: 0.9rem;
        }

        .password-modal-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }
    }
}

/* ========================================
   문의하기 (/inquiry/index) — 폼
   ======================================== */
.board-page--inquiry .board-main--inquiry {
    background: #eff2f6;
}

.board-page--inquiry .board-container--detail {
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--board-content-max) + (var(--board-inline-gutter) * 2));
    margin-inline: auto;
    padding-block: var(--board-detail-block-padding);
    padding-inline: var(--board-inline-gutter);
    overflow-x: visible;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.board-page--inquiry .board-inquiry__layout {
    display: grid;
    grid-template-columns: minmax(0, 536px) minmax(0, 1fr);
    gap: clamp(48px, calc(100vw * 112 / var(--layout-ref-width)), 112px);
    align-items: start;
}

.board-inquiry__intro {
    min-width: 0;
    padding-top: clamp(40px, calc(100vw * 60 / var(--layout-ref-width)), 60px);
}

.board-inquiry__heading {
    margin: 0;
    font-weight: 700;
    font-size: clamp(32px, calc(100vw * 48 / var(--layout-ref-width)), 48px);
    line-height: 160%;
    color: #1c1b20;
}

.board-inquiry__lead {
    margin: clamp(14px, calc(100vw * 20 / var(--layout-ref-width)), 20px) 0 0;
    font-weight: 600;
    font-size: clamp(18px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
    line-height: 160%;
    color: #0f64c0;
}

.board-inquiry__desc {
    margin: clamp(14px, calc(100vw * 20 / var(--layout-ref-width)), 20px) 0 0;
    font-weight: 400;
    font-size: clamp(16px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
    line-height: 160%;
    color: #1c1b20;
}

.board-inquiry__contact {
    margin-top: clamp(24px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
    display: grid;
    grid-template-columns: 32px auto minmax(0, 1fr);
    align-items: start;
    column-gap: 20px;
    row-gap: clamp(18px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
    padding: clamp(28px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
    background: #f8fafb;
    border-radius: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
}

/* 각 행을 부모 그리드에 펼쳐 라벨 컬럼 너비를 전 행에서 공유 → 바디 시작점 정렬 */
.board-inquiry__contact-row {
    display: contents;
}

.board-inquiry__contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 20%;
    background: #dcebf9;
    color: #18317c;
}

.board-inquiry__contact-icon svg {
    width: 20px;
    height: 20px;
}

.board-inquiry__contact-label {
    font-weight: 600;
    font-size: clamp(14px, calc(100vw * 15 / var(--layout-ref-width)), 15px);
    line-height: 150%;
    color: #1c1b20;
    white-space: nowrap;
}

.board-inquiry__contact-body {
    /* column-gap(12) + margin-left(48) = 라벨↔바디 약 60px */
    margin-left: clamp(60px, calc(100vw * 80 / var(--layout-ref-width)), 80px);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.board-inquiry__contact-line {
    font-weight: 400;
    font-size: clamp(13px, calc(100vw * 15 / var(--layout-ref-width)), 15px);
    line-height: 160%;
    color: #47454f;
    word-break: break-word;
}

.board-inquiry__form-col {
    min-width: 0;
}

.board-inquiry-form {
    width: 100%;
    min-width: 0;
}

.board-inquiry-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 28px)
        clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
}

.board-inquiry-form__field {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.board-inquiry-form__field--full {
    grid-column: 1 / -1;
}

.board-inquiry-form__label {
    font-weight: 600;
    font-size: clamp(12px, calc(100vw * 12 / var(--layout-ref-width)), 12px);
    line-height: 160%;
    color: #47454f;
    transition: color 0.18s ease;
}

.board-inquiry-form__field:hover .board-inquiry-form__label,
.board-inquiry-form__field:focus-within .board-inquiry-form__label {
    color: #0f64c0;
}

.board-inquiry-form__req {
    margin-left: 4px;
    color: #d23b3b;
}

.board-inquiry-form__input,
.board-inquiry-form__textarea,
.board-inquiry-form__select {
    box-sizing: border-box;
    width: 100%;
    font-family: inherit;
    font-weight: 400;
    font-size: clamp(13px, calc(100vw * 14 / var(--layout-ref-width)), 14px);
    line-height: 160%;
    color: #1c1b20;
    background: #f8fafb;
    border: 1px solid #d8dce1;
    border-radius: 8px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.board-inquiry-form__input {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 16px;
}

.board-inquiry-form__input::placeholder,
.board-inquiry-form__textarea::placeholder {
    color: #9a9aa3;
}

.board-inquiry-form__input:hover,
.board-inquiry-form__textarea:hover,
.board-inquiry-form__select:hover {
    border-color: #0f64c0;
}

.board-inquiry-form__input:focus,
.board-inquiry-form__textarea:focus,
.board-inquiry-form__select:focus {
    outline: none;
    border-color: #0f64c0;
    box-shadow: 0 0 0 3px rgba(15, 100, 192, 0.12);
}

.board-inquiry-form__textarea {
    padding: 16px;
    height: 160px;
    min-height: 160px;
    resize: vertical;
}

.board-inquiry-form__select-wrap {
    position: relative;
}

.board-inquiry-form__select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 56px;
    padding: 0 44px 0 16px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6.5 8 10.5l4-4' stroke='%2374757E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px 16px;
}

.board-inquiry-form__agree {
    margin-top: clamp(16px, calc(100vw * 24 / var(--layout-ref-width)), 24px);
}

.board-inquiry-form__check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(13px, calc(100vw * 15 / var(--layout-ref-width)), 15px);
    line-height: 160%;
    color: #47454f;
    cursor: pointer;
}

.board-inquiry-form__policy {
    color: #0f64c0;
}

.board-inquiry-form__check input {
    width: 18px;
    height: 18px;
    accent-color: #0f64c0;
    cursor: pointer;
}

.board-inquiry-form__status {
    margin: 16px 0 0;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 160%;
}

.board-inquiry-form__status--success {
    background: #e8f3ec;
    color: #1d7a45;
}

.board-inquiry-form__status--error {
    background: #fdeaea;
    color: #b3261e;
}

.board-inquiry-form__status--info {
    background: #eef3fb;
    color: #2c4777;
}

.board-inquiry-form__actions {
    margin-top: clamp(24px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
    display: flex;
    justify-content: center;
}

.board-inquiry-form__submit {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 48px;
    padding: 0 36px;
    font-family: inherit;
    font-weight: 600;
    font-size: clamp(15px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
    line-height: 100%;
    color: #ffffff;
    background: #c4c7d0;
    border: none;
    border-radius: 10px;
    cursor: not-allowed;
    transition: background-color 0.18s ease;
}

/* 필수 항목 충족 → 활성화 */
.board-inquiry-form__submit:not(:disabled) {
    background: #0f64c0;
    cursor: pointer;
}

.board-inquiry-form__submit:not(:disabled):hover {
    background: #18317c;
}

@media (max-width: 960px) {
    .board-page--inquiry .board-inquiry__layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    @media (max-width: 500px) {
        .board-inquiry__layout{
            gap: 112px;
        }
    }
    /* 담당자명+직함 / 문의유형+관심솔루션만 2열 유지, 나머지는 전체폭 */
    .board-inquiry-form__grid {
        grid-template-columns: 1fr 1fr;
    }

    .board-inquiry-form__field:nth-child(1),
    .board-inquiry-form__field:nth-child(2),
    .board-inquiry-form__field:nth-child(5),
    .board-inquiry-form__field:nth-child(6) {
        grid-column: 1 / -1;
    }

    .board-inquiry-form__submit {
        width: 100%;
    }

    /* 인트로 — 390 기준값을 최소로, 768까지 비례 확대 */
    .board-inquiry__heading {
        font-weight: 600;
        font-size: clamp(24px, calc(100vw * 24 / 390), 32px);
    }

    .board-inquiry__lead {
        margin: 12px 0 0;
        font-size: clamp(18px, calc(100vw * 18 / 390), 22px);
    }

    .board-inquiry__desc {
        margin: 12px 0 0;
        font-size: clamp(12px, calc(100vw * 12 / 390), 16px);
    }

    .board-inquiry__contact {
        padding: clamp(40px, calc(100vw * 40 / 390), 48px) clamp(28px, calc(100vw * 28 / 390), 40px);
    }

    .board-inquiry__contact-label {
        font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
        color: #47454f;
    }

    /* 라벨이 길 때만 JS가 .board-inquiry__contact--wide-label 부여 */
    .board-inquiry__contact--wide-label .board-inquiry__contact-label {
        white-space: normal;
    }

    .board-inquiry__contact--wide-label .board-inquiry__contact-body {
        margin-left: 0;
    }

    .board-inquiry__contact-line {
        font-size: clamp(12px, calc(100vw * 12 / 390), 14px);
    }

    .board-inquiry-form__select {
        padding-right: 34px;
        background-position: right 12px center;
        background-size: 12px 12px;
    }

    .board-inquiry-form__actions{
        margin-bottom: 40px;
    }

}

/* 문의 하단 CTA — 상/하 동일 패딩 */
.board-page--inquiry #inquiryDualSection {
    padding-top: clamp(60px, calc(100vw * 100 / var(--layout-ref-width)), 100px);
}

.board-inquiry-form__policy {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: #0f64c0;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    line-height: 160%;
}

/* ── 문의 완료 화면 (폼 영역 대체) */
.board-inquiry-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-block: clamp(100px, calc(100vw * 150 / var(--layout-ref-width)), 150px);
}

.board-inquiry-success__icon {
    display: inline-flex;
    margin-bottom: clamp(28px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
}

.board-inquiry-success__icon svg {
    width: clamp(64px, calc(100vw * 80 / var(--layout-ref-width)), 80px);
    height: auto;
}

.board-inquiry-success__title {
    font-weight: 600;
    font-size: clamp(22px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
    line-height: 140%;
    color: #47454f;
}

.board-inquiry-success__desc {
    margin: clamp(12px, calc(100vw * 16 / var(--layout-ref-width)), 16px) 0 0;
    font-weight: 400;
    font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
    line-height: 160%;
    color: #47454f;
}

.board-inquiry-success__note {
    box-sizing: border-box;
    width: 100%;
    margin-top: clamp(28px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    background: #dcebf9;
    border-radius: 8px;
    font-weight: 400;
    font-size: clamp(13px, calc(100vw * 14 / var(--layout-ref-width)), 14px);
    line-height: 160%;
    color: #18317c;
    text-align: left;
}

.board-inquiry-success__note-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: #18317c;
}

.board-inquiry-success__actions {
    width: 100%;
    margin-top: clamp(28px, calc(100vw * 40 / var(--layout-ref-width)), 40px);
    display: flex;
    gap: 12px;
}

.board-inquiry-success__btn {
    box-sizing: border-box;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 24px;
    font-family: inherit;
    font-weight: 600;
    font-size: clamp(15px, calc(100vw * 16 / var(--layout-ref-width)), 16px);
    line-height: 120%;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.board-inquiry-success__btn--primary {
    color: #0f64c0;
    background: #ffffff;
    border: 1px solid #0f64c0;
    
}

.board-inquiry-success__btn--primary:hover {
    background: #DCEBF9;
    color: #18317C;
    border: 1px solid #DCEBF9;
}

.board-inquiry-success__btn--ghost {
    color: #ffffff;
    background: #0f64c0;
    border: none;
}

.board-inquiry-success__btn--ghost:hover {
    background: #162D55;
    color: #FFFFFF;
}

/* ── 개인정보취급방침 팝업 */
.board-inquiry-policy-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.board-inquiry-policy-modal[hidden] {
    display: none;
}

.board-inquiry-policy-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(28, 27, 32, 0.7);
}

.board-inquiry-policy-modal__dialog {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: min(1320px, 94vw);
    max-height: min(861px, calc(100dvh - 100px));
    background: #f8fafb;
    border-radius: 24px;
    padding-block: clamp(40px, calc(100vw * 80 / var(--layout-ref-width)), 80px);
    padding-inline: clamp(24px, calc(100vw * 100 / var(--layout-ref-width)), 100px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.board-inquiry-policy-modal__x {
    position: absolute;
    top: clamp(32px, 2vw, 40px);
    right: clamp(32px, 2vw, 40px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    color: #47454f;
    cursor: pointer;
}

.board-inquiry-policy-modal__title {
    margin: 0;
    text-align: center;
    font-weight: 600;
    font-size: clamp(22px, calc(100vw * 32 / var(--layout-ref-width)), 32px);
    line-height: 140%;
    color: #47454f;
}

.board-inquiry-policy-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
        display: none;
    }
}

.board-inquiry-policy-modal__sub {
    margin: 0 0 20px;
    font-weight: 600;
    font-size: clamp(15px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
    line-height: 160%;
    color: #0f64c0;
}

.board-inquiry-policy-modal__text {
    margin: 0;
    font-weight: 400;
    font-size: clamp(13px, 1vw, 15px);
    line-height: 170%;
    color: #47454f;
    word-break: keep-all;
}

.board-inquiry-policy-modal__section:first-of-type .board-inquiry-policy-modal__text:first-of-type {
    margin-bottom: clamp(20px, calc(100vw * 30 / var(--layout-ref-width)), 30px);
}

.board-inquiry-policy-modal__divider {
    margin: 0;
    border: none;
    border-top: 1px solid #e6ebf0;
}

.board-inquiry-policy-modal__actions {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: clamp(28px, 3vw, 40px);
}

.board-inquiry-policy-modal__btn {
    box-sizing: border-box;
    min-width: 96px;
    height: 44px;
    padding: 0 24px;
    font-family: inherit;
    font-weight: 600;
    font-size: 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.board-inquiry-policy-modal__btn--ghost {
    color: #0f64c0;
    background: #ffffff;
    border: 1px solid #0f64c0;
}

.board-inquiry-policy-modal__btn--ghost:hover {
    color: #18317c;
    background: #dcebf9;
    border-color: #dcebf9;
}

.board-inquiry-policy-modal__btn--primary {
    color: #ffffff;
    background: #0f64c0;
    border: 1px solid #0f64c0;
}

.board-inquiry-policy-modal__btn--primary:hover {
    color: #ffffff;
    background: #162d55;
    border-color: #162d55;
}