/* cert.issuehub.co.kr — 자격증 정보 포털 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&display=swap');

:root {
    /* 헤더/푸터 기존 색 — 변경하지 않음 */
    --gov-main: #005EA8;
    --gov-header: #003B70;
    --gov-accent: #0076D6;
    --gov-bg: #F7F9FC;
    --gov-text: #1F2937;
    --gov-line: #D6E2EF;
    --gov-muted: #5B6B7C;
    --gov-max: 1120px;

    --cert-primary: #183B66;
    --cert-secondary: #2F6FB2;
    --cert-hero-bg: #EEF4FA;
    --cert-bg: #FFFFFF;
    --cert-section: #F6F8FB;
    --cert-card: #FFFFFF;
    --cert-heading: #172033;
    --cert-text: #4A5568;
    --cert-muted: #7A8494;
    --cert-border: #E5EAF0;
    --cert-hover-border: #B9CEE4;
    --cert-input-border: #DCE3EA;
    --cert-pill-border: #D8E1EA;
    --cert-icon-bg: #EDF4FB;
    --cert-max: 1120px;
    --cert-radius: 12px;
    --cert-font: 'Noto Sans KR', sans-serif;
}

body.gov-body,
body.cert-body {
    background: var(--cert-bg);
    color: var(--cert-text);
    font-family: var(--cert-font);
    font-size: 16px;
    line-height: 1.6;
}

.gov-main.site-main {
    padding: 0;
    max-width: none;
    width: 100%;
    overflow-x: clip;
}

.cert-home,
.cert-page {
    overflow-x: clip;
}

.cert-home .container,
.cert-page .container,
.cert-hero .container,
.cert-section .container,
.cert-notice .container,
.cert-category .container {
    width: min(var(--cert-max), calc(100% - 32px));
    margin: 0 auto;
    box-sizing: border-box;
}

.cert-page {
    padding: 2.5rem 0 3rem;
}

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

.cert-empty {
    margin: 0;
    padding: 1.5rem;
    text-align: center;
    color: var(--cert-muted);
    background: var(--cert-card);
    border: 1px dashed var(--cert-border);
    border-radius: var(--cert-radius);
}

/* 카테고리 목록 */
.cert-category {
    padding: 2.5rem 0 3.5rem;
    overflow-x: clip;
}

.cert-category__head {
    margin-bottom: 1.75rem;
    max-width: 40rem;
}

.cert-category__eyebrow {
    margin: 0 0 .4rem;
    font-size: .78rem;
    font-weight: 700;
    color: var(--cert-secondary);
}

.cert-category__title {
    margin: 0 0 .55rem;
    font-size: clamp(1.6rem, 2.8vw, 2rem);
    font-weight: 700;
    color: var(--cert-heading);
    line-height: 1.3;
}

.cert-category__desc {
    margin: 0 0 .65rem;
    color: var(--cert-text);
    font-size: .98rem;
    line-height: 1.6;
}

.cert-category__count {
    margin: 0;
    color: var(--cert-muted);
    font-size: .85rem;
    font-weight: 600;
}

.cert-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .75rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.cert-list__item a {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 1rem;
    align-items: center;
    padding: .85rem 1rem;
    background: var(--cert-card);
    border: 1px solid var(--cert-border);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}

.cert-list__item a:hover,
.cert-list__item a:focus {
    border-color: var(--cert-hover-border);
}

.cert-list__item a:focus {
    outline: 2px solid rgba(47, 111, 178, .35);
    outline-offset: 2px;
}

.cert-list__thumb {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 8px;
    background: #e8eef5;
}

.cert-list__thumb--empty {
    background:
        linear-gradient(145deg, rgba(47, 111, 178, .12), rgba(47, 111, 178, .04)),
        #e8eef5;
}

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

.cert-list__body {
    display: grid;
    gap: .35rem;
    min-width: 0;
}

.cert-list__item strong {
    color: var(--cert-heading);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.4;
}

.cert-list__item span {
    color: var(--cert-muted);
    font-size: .9rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cert-list__item time {
    color: var(--cert-muted);
    font-size: .8rem;
}


.cert-tag {
    display: inline-block;
    margin-bottom: .35rem;
    color: var(--cert-secondary);
    font-size: .75rem;
    font-weight: 600;
}

.cert-section {
    padding: 4.5rem 0;
}

.cert-section--muted {
    background: var(--cert-section);
}

.cert-section__head {
    margin-bottom: 1.75rem;
    max-width: 40rem;
}

.cert-section__head h2 {
    margin: 0 0 .5rem;
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
    font-weight: 700;
    color: var(--cert-heading);
    line-height: 1.3;
}

.cert-section__head p {
    margin: 0;
    color: var(--cert-muted);
    font-size: .98rem;
}

/* Hero — 좌측 정렬, 검색 중심 */
.cert-hero {
    background: var(--cert-hero-bg);
    border-bottom: 1px solid var(--cert-border);
    padding: 2.75rem 0;
}

.cert-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 2rem;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.cert-hero__main {
    text-align: left;
    max-width: 100%;
    min-width: 0;
}

.cert-hero__eyebrow {
    margin: 0 0 .75rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--cert-secondary);
}

.cert-hero h1 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 2.85rem);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -.02em;
    color: var(--cert-heading);
}

.cert-hero__lead {
    margin: 1rem 0 0;
    max-width: 32rem;
    color: var(--cert-text);
    font-size: 1.02rem;
    line-height: 1.65;
}

.cert-hero-search {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 560px;
    height: 58px;
    margin: 1.5rem 0 0;
    padding: 0 .45rem 0 1.1rem;
    background: #fff;
    border: 1.5px solid var(--cert-primary);
    border-radius: 12px;
}

.cert-hero-search--compact {
    margin: 1rem 0 1.25rem;
    max-width: none;
    border-color: var(--cert-input-border);
}

.cert-hero-search input[type="search"] {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 1rem;
    color: var(--cert-heading);
}

.cert-hero-search input[type="search"]:focus {
    outline: none;
}

.cert-hero-search:focus-within {
    border-color: var(--cert-secondary);
    box-shadow: 0 0 0 3px rgba(47, 111, 178, .12);
}

.cert-hero-search button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 10px;
    background: var(--cert-primary);
    color: #fff;
    cursor: pointer;
}

.cert-hero-search button svg {
    width: 20px;
    height: 20px;
}

.cert-hero-search button:hover,
.cert-hero-search button:focus {
    background: var(--cert-secondary);
}

.cert-hero-search button:focus {
    outline: 2px solid rgba(47, 111, 178, .35);
    outline-offset: 2px;
}

.cert-hero-pills-wrap {
    margin-top: 1.15rem;
}

.cert-hero-pills__label {
    margin: 0 0 .5rem;
    font-size: .75rem;
    font-weight: 700;
    color: var(--cert-muted);
}

.cert-hero-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: .45rem;
}

.cert-hero-pills a {
    display: inline-flex;
    align-items: center;
    min-height: 2.1rem;
    padding: 0 .8rem;
    border: 1px solid var(--cert-pill-border);
    border-radius: 999px;
    background: #fff;
    color: #344054;
    text-decoration: none;
    font-size: .84rem;
    font-weight: 600;
}

.cert-hero-pills a:hover,
.cert-hero-pills a:focus {
    border-color: var(--cert-secondary);
    color: var(--cert-secondary);
}

.cert-hero-pills a:focus {
    outline: 2px solid rgba(47, 111, 178, .3);
    outline-offset: 1px;
}

.cert-hero__side {
    background: var(--cert-primary);
    color: #fff;
    border-radius: 16px;
    padding: 1.4rem 1.25rem 1.15rem;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.cert-hero__side-title {
    margin: 0 0 1rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}

.cert-hero__side-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .15rem;
}

.cert-hero__side-list a {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: .65rem;
    align-items: start;
    padding: .7rem .35rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    text-decoration: none;
    color: inherit;
}

.cert-hero__side-list li:first-child a {
    border-top: 0;
    padding-top: .2rem;
}

.cert-hero__side-list a:hover,
.cert-hero__side-list a:focus {
    color: #fff;
}

.cert-hero__side-list a:focus {
    outline: 2px solid rgba(255, 255, 255, .35);
    outline-offset: 2px;
}

.cert-hero__side-no {
    font-size: .8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .55);
    padding-top: .15rem;
}

.cert-hero__side-body {
    display: grid;
    gap: .2rem;
    min-width: 0;
}

.cert-hero__side-body strong {
    font-size: .98rem;
    font-weight: 700;
}

.cert-hero__side-body span {
    font-size: .78rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .72);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Category cards — unified */
.cert-cat-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.cert-cat-grid > li {
    min-width: 0;
}

.cert-cat-card {
    display: grid;
    gap: .65rem;
    height: 100%;
    padding: 1.25rem 1.05rem 1.3rem;
    background: var(--cert-card);
    border: 1px solid var(--cert-border);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, transform .15s ease;
    box-sizing: border-box;
    overflow: hidden;
}

.cert-cat-card:hover,
.cert-cat-card:focus {
    border-color: var(--cert-hover-border);
    transform: translateY(-2px);
}

.cert-cat-card:focus {
    outline: 2px solid rgba(47, 111, 178, .35);
    outline-offset: 2px;
}

.cert-cat-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--cert-icon-bg);
    color: var(--cert-secondary);
}

.cert-cat-card__icon svg {
    width: 22px;
    height: 22px;
}

.cert-cat-card strong {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cert-heading);
}

.cert-cat-card span:last-child {
    color: var(--cert-muted);
    font-size: .88rem;
    line-height: 1.5;
}

/* Popular */
.cert-popular-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    width: 100%;
}

.cert-popular-card {
    position: relative;
    display: grid;
    gap: .4rem;
    align-content: start;
    min-height: 128px;
    padding: 1.2rem 1.15rem 1.25rem;
    background: var(--cert-card);
    border: 1px solid var(--cert-border);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, transform .15s ease;
}

.cert-popular-card:hover,
.cert-popular-card:focus {
    border-color: var(--cert-hover-border);
    transform: translateY(-2px);
}

.cert-popular-card:focus {
    outline: 2px solid rgba(47, 111, 178, .35);
    outline-offset: 2px;
}

.cert-popular-card strong {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--cert-heading);
    line-height: 1.35;
    padding-right: 1.25rem;
}

.cert-popular-card__meta {
    color: var(--cert-muted);
    font-size: .84rem;
}

.cert-popular-card__arrow {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    color: var(--cert-secondary);
    font-weight: 600;
}

/* Guide topics */
.cert-topic-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.cert-topic-card {
    display: grid;
    gap: .45rem;
    padding: 1.35rem 1.3rem;
    background: var(--cert-card);
    border: 1px solid var(--cert-border);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, transform .15s ease;
}

.cert-topic-card:hover,
.cert-topic-card:focus {
    border-color: var(--cert-hover-border);
    transform: translateY(-2px);
}

.cert-topic-card:focus {
    outline: 2px solid rgba(47, 111, 178, .35);
    outline-offset: 2px;
}

.cert-topic-card strong {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cert-heading);
    line-height: 1.4;
}

.cert-topic-card span {
    color: var(--cert-secondary);
    font-size: .88rem;
    font-weight: 600;
}

/* Steps */
.cert-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.cert-steps li {
    display: grid;
    gap: .45rem;
    padding: 1.25rem 1.15rem;
    background: var(--cert-card);
    border: 1px solid var(--cert-border);
    border-radius: 14px;
}

.cert-steps__no {
    color: var(--cert-secondary);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.cert-steps strong {
    color: var(--cert-heading);
    font-size: 1.02rem;
    font-weight: 700;
}

.cert-steps span:last-child {
    color: var(--cert-muted);
    font-size: .9rem;
    line-height: 1.5;
}

/* Latest */
.cert-latest-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.cert-latest-card {
    display: grid;
    gap: .4rem;
    align-content: start;
    min-height: 170px;
    padding: 1.25rem 1.2rem;
    background: var(--cert-card);
    border: 1px solid var(--cert-border);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, transform .15s ease;
}

.cert-latest-card:hover,
.cert-latest-card:focus {
    border-color: var(--cert-hover-border);
    transform: translateY(-2px);
}

.cert-latest-card:focus {
    outline: 2px solid rgba(47, 111, 178, .35);
    outline-offset: 2px;
}

.cert-latest-card strong {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--cert-heading);
    line-height: 1.4;
}

.cert-latest-card__summary {
    color: var(--cert-muted);
    font-size: .9rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cert-latest-card time {
    margin-top: .25rem;
    color: var(--cert-muted);
    font-size: .8rem;
}

/* Official notice */
.cert-notice {
    background: var(--cert-section);
    padding: 2.5rem 0;
    border-top: 1px solid var(--cert-border);
}

.cert-notice__title {
    margin: 0 0 .55rem;
    color: var(--cert-heading);
    font-size: 1rem;
    font-weight: 700;
}

.cert-notice__body {
    margin: 0;
    max-width: 48rem;
    color: var(--cert-muted);
    font-size: .92rem;
    line-height: 1.6;
}

/* Search results */
.cert-search-result__title {
    margin: 0 0 .25rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--cert-heading);
}

.cert-search-result__count {
    margin-left: .35rem;
    color: var(--cert-muted);
    font-size: .95rem;
    font-weight: 600;
}

.cert-search-result__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .75rem;
}

.cert-search-result__list a {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 1rem;
    align-items: center;
    padding: .85rem 1rem;
    background: var(--cert-card);
    border: 1px solid var(--cert-border);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
}

.cert-search-result__list a:hover,
.cert-search-result__list a:focus {
    border-color: var(--cert-hover-border);
}

.cert-search-result__list a:focus {
    outline: 2px solid rgba(47, 111, 178, .35);
    outline-offset: 2px;
}

.cert-search-result__thumb {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 8px;
    background: #e8eef5;
}

.cert-search-result__thumb--empty {
    background:
        linear-gradient(145deg, rgba(47, 111, 178, .12), rgba(47, 111, 178, .04)),
        #e8eef5;
}

.cert-search-result__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cert-search-result__body {
    display: grid;
    gap: .3rem;
    min-width: 0;
}

.cert-search-result__list strong {
    color: var(--cert-heading);
    font-weight: 700;
}

.cert-search-result__list .cert-search-result__body span:last-child {
    color: var(--cert-muted);
    font-size: .9rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cert-search-empty {
    margin-top: .5rem;
    padding: 1.35rem 1.25rem;
    background: var(--cert-section);
    border: 1px solid var(--cert-border);
    border-radius: 12px;
}

.cert-search-empty p {
    margin: 0 0 1rem;
    color: var(--cert-text);
}

.cert-search-empty .cert-hero-pills {
    justify-content: flex-start;
    margin-top: 0;
}

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

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

    .cert-cat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .cert-hero__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

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

@media (max-width: 640px) {
    .cert-list__item a {
        grid-template-columns: 112px 1fr;
        gap: .75rem;
        padding: .75rem;
    }

    .cert-search-result__list a {
        grid-template-columns: 112px 1fr;
        gap: .75rem;
        padding: .75rem;
    }

    .cert-hero {
        padding: 2rem 0 1.75rem;
    }

    .cert-hero h1 br {
        display: none;
    }

    .cert-hero-search {
        width: 100%;
        max-width: none;
        height: 52px;
    }

    .cert-section {
        padding: 3rem 0;
    }

    .cert-cat-grid,
    .cert-popular-grid,
    .cert-topic-grid,
    .cert-steps,
    .cert-latest-grid {
        grid-template-columns: 1fr;
    }
}

/* ── header — 기존 유지 (손대지 않음) ── */
body.gov-body {
    --site-nav-indicator-bg: var(--site-nav-active-bg, rgba(255, 255, 255, .16));
}

body.gov-body .site-header {
    background: var(--site-header-bg, var(--gov-header));
    border-bottom: 1px solid #cccccc;
}

body.gov-body .site-header__logo {
    color: #fff;
}

body.gov-body .site-header__nav-link {
    color: var(--site-nav-font, rgba(255, 255, 255, .88));
    background: transparent;
}

body.gov-body .site-header__nav-link:hover,
body.gov-body .site-header__nav-link.is-active,
body.gov-body .site-header__nav-link.is-active:hover {
    color: var(--site-nav-active-font, #fff);
    background: var(--site-nav-active-bg, rgba(255, 255, 255, .16));
}

body.gov-body .site-header__nav-link.is-active {
    font-weight: 600;
}

body.gov-body .site-header__menu-toggle {
    border-color: rgba(15, 23, 42, .14);
    background: rgba(255, 255, 255, .94);
    color: #111827;
}

body.gov-body .site-header__menu-toggle span {
    background: #111827;
}

body.gov-body .site-header__search-toggle {
    border-color: rgba(15, 23, 42, .14);
    background: rgba(255, 255, 255, .94);
    color: #111827;
}

body.gov-body .site-header.is-menu-open .site-header__nav {
    background: var(--gov-header);
    border-bottom-color: rgba(255, 255, 255, .12);
}

body.gov-body .site-header__search-panel {
    background: var(--gov-main);
    border-top-color: rgba(255, 255, 255, .12);
}

body.gov-body .site-header__search-form input[type="search"] {
    background: #fff;
    color: var(--gov-text);
    border-color: transparent;
}

body.gov-body .site-header__search-submit {
    background: var(--gov-accent);
    border-color: var(--gov-accent);
    color: #fff;
}

body.gov-body .site-header__search-submit:hover {
    background: #0068be;
}

/* ── footer — 기존 유지 (손대지 않음) ── */
.gov-footer {
    background: var(--gov-header);
    color: rgba(255, 255, 255, .78);
    margin-top: 2.5rem;
    font-size: .875rem;
}

.gov-footer__inner {
    width: min(var(--gov-max), calc(100% - 32px));
    margin: 0 auto;
    padding: 2rem 0 1.5rem;
    display: grid;
    gap: 1.25rem;
}

.gov-footer__logo {
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    font-size: 1.05rem;
}

.gov-footer__desc {
    margin: .4rem 0 0;
    color: rgba(255, 255, 255, .7);
    line-height: 1.5;
}

.gov-footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem 1rem;
}

.gov-footer__nav a {
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
}

.gov-footer__nav a:hover {
    color: #fff;
}

.gov-footer__meta {
    border-top: 1px solid rgba(255, 255, 255, .14);
    padding-top: 1rem;
}

.gov-footer__meta p {
    margin: 0;
}