/**
 * SNIPIT Type system (Type/*) + CMS Blog typography mapping
 * Scale: Mobile → Tablet (768+) → Desktop (1024+)
 * Guide sizes are in px; applied directly to avoid 62.5% rem drift.
 */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css");

:root {
    --font-heading: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-body: Pretendard, "Pretendard Variable", "Apple SD Gothic Neo", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-sans: var(--font-body);
    --font-brand: var(--font-heading);

    /* Type/Heading — mobile defaults */
    --type-hero-size: 24px;
    --type-hero-weight: 700;
    --type-h1-size: 18px;
    --type-h1-weight: 700;
    --type-h2-size: 20px;
    --type-h2-weight: 700;
    --type-h3-size: 14px;
    --type-h3-weight: 500;
    --type-h4-size: 14px;
    --type-h4-weight: 700;
    --type-h5-size: 12px;
    --type-h5-weight: 600;
    --type-h6-size: 12px;
    --type-h6-weight: 600;

    /* Type/Body — mobile defaults */
    --type-body-xl-size: 14px;
    --type-body-l-size: 14px;
    --type-body-m-size: 12px;
    --type-body-s-size: 12px;
    --type-body-xs-size: 12px;
    --type-body-compact-size: 12px;
    --type-body-weight: 400;

    /* Type/Caption · Action · Utility */
    --type-caption-size: 12px;
    --type-caption-weight: 400;
    --type-action-size: 16px;
    --type-action-weight: 800;
    --type-label-size: 12px;
    --type-label-weight: 600;

    /* CMS date treatment */
    --type-date-size: 14px;
    --type-date-weight: 600;

    --type-heading-lh: 1.25;
    --type-body-lh: 1.6;
    --type-body-tight-lh: 1.45;
    --type-caption-lh: 1.4;
    --type-heading-tracking: -0.02em;
}

@media (min-width: 768px) {
    :root {
        --type-hero-size: 36px;
        --type-h1-size: 28px;
        --type-h2-size: 20px;
        --type-h3-size: 20px;
        --type-h4-size: 14px;
        --type-h5-size: 14px;
        --type-h6-size: 13px;

        --type-body-xl-size: 18px;
        --type-body-l-size: 16px;
        --type-body-m-size: 14px;
        --type-body-s-size: 13px;
        --type-body-xs-size: 13px;
        --type-caption-size: 13px;
    }
}

@media (min-width: 1024px) {
    :root {
        --type-hero-size: 52px;
        --type-h1-size: 44px;
        --type-h2-size: 32px;
        --type-h3-size: 24px;
        --type-h4-size: 18px;
        --type-h5-size: 16px;
        --type-h6-size: 14px;

        --type-body-xl-size: 20px;
        --type-body-l-size: 18px;
        --type-body-m-size: 16px;
        --type-body-s-size: 14px;
        --type-body-xs-size: 14px;
        --type-caption-size: 14px;
    }
}

/* -------------------------------------------------------------------------- */
/* Utility classes (Type/*)                                                    */
/* -------------------------------------------------------------------------- */

.type-heading-hero,
.type-heading-h1,
.type-heading-h2,
.type-heading-h3,
.type-heading-h4,
.type-heading-h5,
.type-heading-h6 {
    font-family: var(--font-heading);
    line-height: var(--type-heading-lh);
    letter-spacing: var(--type-heading-tracking);
}

.type-heading-hero {
    font-size: var(--type-hero-size);
    font-weight: var(--type-hero-weight);
}

.type-heading-h1 {
    font-size: var(--type-h1-size);
    font-weight: var(--type-h1-weight);
}

.type-heading-h2 {
    font-size: var(--type-h2-size);
    font-weight: var(--type-h2-weight);
}

.type-heading-h3 {
    font-size: var(--type-h3-size);
    font-weight: var(--type-h3-weight);
}

.type-heading-h4 {
    font-size: var(--type-h4-size);
    font-weight: var(--type-h4-weight);
}

.type-heading-h5 {
    font-size: var(--type-h5-size);
    font-weight: var(--type-h5-weight);
}

.type-heading-h6 {
    font-size: var(--type-h6-size);
    font-weight: var(--type-h6-weight);
}

.type-body-xl,
.type-body-l,
.type-body-m,
.type-body-s,
.type-body-xs,
.type-body-compact,
.type-body-m-center,
.type-body-s-center {
    font-family: var(--font-body);
    font-weight: var(--type-body-weight);
    line-height: var(--type-body-lh);
}

.type-body-xl { font-size: var(--type-body-xl-size); }
.type-body-l { font-size: var(--type-body-l-size); }
.type-body-m,
.type-body-m-center { font-size: var(--type-body-m-size); }
.type-body-s,
.type-body-s-center { font-size: var(--type-body-s-size); }
.type-body-xs {
    font-size: var(--type-body-xs-size);
    line-height: var(--type-body-tight-lh);
}
.type-body-compact {
    font-size: var(--type-body-compact-size);
    line-height: var(--type-body-tight-lh);
}
.type-body-m-center,
.type-body-s-center { text-align: center; }

.type-caption {
    font-family: var(--font-body);
    font-size: var(--type-caption-size);
    font-weight: var(--type-caption-weight);
    line-height: var(--type-caption-lh);
}

.type-action-button {
    font-family: var(--font-heading);
    font-size: var(--type-action-size);
    font-weight: var(--type-action-weight);
    line-height: 1.25;
}

.type-utility-label {
    font-family: var(--font-heading);
    font-size: var(--type-label-size);
    font-weight: var(--type-label-weight);
    line-height: 1.3;
}

.type-brand-snipit {
    font-family: var(--font-brand);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

/* -------------------------------------------------------------------------- */
/* Global application                                                          */
/* -------------------------------------------------------------------------- */

body {
    font-family: var(--gh-font-body, var(--font-body));
    font-size: var(--type-body-m-size);
    font-weight: var(--type-body-weight);
    line-height: var(--type-body-lh);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--gh-font-heading, var(--font-heading));
    line-height: var(--type-heading-lh);
    letter-spacing: var(--type-heading-tracking);
}

h1 { font-size: var(--type-h1-size); font-weight: var(--type-h1-weight); }
h2 { font-size: var(--type-h2-size); font-weight: var(--type-h2-weight); }
h3 { font-size: var(--type-h3-size); font-weight: var(--type-h3-weight); }
h4 { font-size: var(--type-h4-size); font-weight: var(--type-h4-weight); }
h5 { font-size: var(--type-h5-size); font-weight: var(--type-h5-weight); }
h6 { font-size: var(--type-h6-size); font-weight: var(--type-h6-weight); }

/* Cover lead — custom banner size owned by cover.css; keep family/weight tokens */
.cover-description {
    font-family: var(--font-heading);
    font-weight: var(--type-hero-weight);
    line-height: var(--type-heading-lh);
    letter-spacing: var(--type-heading-tracking);
}

/* -------------------------------------------------------------------------- */
/* CMS Blog detail mapping                                                     */
/* -------------------------------------------------------------------------- */

/* Post Title → Type/Heading/H2 (page already owns the title; body should start at H2) */
.gh-article-title {
    font-family: var(--font-heading);
    font-size: var(--type-h2-size);
    font-weight: var(--type-h2-weight);
    line-height: var(--type-heading-lh);
    letter-spacing: var(--type-heading-tracking);
}

/* Excerpt → Type/Body/M */
.gh-article-excerpt {
    margin: 12px 0 0;
    font-family: var(--font-body);
    font-size: var(--type-body-m-size);
    font-weight: var(--type-body-weight);
    line-height: var(--type-body-lh);
}

/* Publication date → 14px / 600 / uppercase */
.gh-article-date,
.gh-article-header .post-meta,
.gh-article-header .post-meta time {
    font-family: var(--font-body);
    font-size: var(--type-date-size);
    font-weight: var(--type-date-weight);
    line-height: var(--type-caption-lh);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Breadcrumb / secondary labels → Type/Body/S */
.gh-article-breadcrumb,
.breadcrumb,
.gh-breadcrumb {
    font-family: var(--font-body);
    font-size: var(--type-body-s-size);
    font-weight: var(--type-body-weight);
    line-height: var(--type-body-lh);
}

/* Rich text: do not apply one preset on .gh-content — map per tag */
.gh-content {
    font-family: var(--font-body);
    font-size: var(--type-body-m-size);
    font-weight: var(--type-body-weight);
    line-height: var(--type-body-lh);
    letter-spacing: normal;
}

.gh-content > h1,
.gh-content h1 {
    font-family: var(--font-heading);
    font-size: var(--type-h1-size);
    font-weight: var(--type-h1-weight);
    line-height: var(--type-heading-lh);
    letter-spacing: var(--type-heading-tracking);
}

.gh-content > h2,
.gh-content h2 {
    font-family: var(--font-heading);
    font-size: var(--type-h2-size);
    font-weight: var(--type-h2-weight);
    line-height: var(--type-heading-lh);
    letter-spacing: var(--type-heading-tracking);
}

.gh-content > h3,
.gh-content h3 {
    font-family: var(--font-heading);
    font-size: var(--type-h3-size);
    font-weight: var(--type-h3-weight);
    line-height: var(--type-heading-lh);
    letter-spacing: var(--type-heading-tracking);
}

.gh-content > h4,
.gh-content h4 {
    font-family: var(--font-heading);
    font-size: var(--type-h4-size);
    font-weight: var(--type-h4-weight);
    line-height: var(--type-heading-lh);
    letter-spacing: var(--type-heading-tracking);
}

.gh-content > h5,
.gh-content h5 {
    font-family: var(--font-heading);
    font-size: var(--type-h5-size);
    font-weight: var(--type-h5-weight);
    line-height: var(--type-heading-lh);
    letter-spacing: var(--type-heading-tracking);
}

.gh-content > h6,
.gh-content h6 {
    font-family: var(--font-heading);
    font-size: var(--type-h6-size);
    font-weight: var(--type-h6-weight);
    line-height: var(--type-heading-lh);
    letter-spacing: var(--type-heading-tracking);
}

.gh-content > p,
.gh-content p,
.gh-content > ul,
.gh-content > ol,
.gh-content li {
    font-family: var(--font-body);
    font-size: var(--type-body-m-size);
    font-weight: var(--type-body-weight);
    line-height: var(--type-body-lh);
}

.gh-content a {
    font: inherit;
}

.gh-content figcaption,
.gh-content .kg-card figcaption {
    font-family: var(--font-body);
    font-size: var(--type-caption-size);
    font-weight: var(--type-caption-weight);
    line-height: var(--type-caption-lh);
}

.gh-content blockquote {
    font-family: var(--font-body);
    font-size: var(--type-body-l-size);
    font-weight: var(--type-body-weight);
    line-height: var(--type-body-lh);
}

.gh-content .kg-btn,
.gh-content .kg-product-card-button,
.gh-button,
.gh-button-share {
    font-family: var(--font-heading);
    font-size: var(--type-action-size);
    font-weight: var(--type-action-weight);
    line-height: 1.25;
}

/* Sidebar / related headings → Type/Heading/H4 */
.gh-comments h2,
.pagination-label,
.related-title,
.gh-sidebar-title {
    font-family: var(--font-heading);
    font-size: var(--type-h4-size);
    font-weight: var(--type-h4-weight);
    line-height: var(--type-heading-lh);
    letter-spacing: var(--type-heading-tracking);
}

.pagination .newer-posts,
.pagination .older-posts {
    font-family: var(--font-heading);
    font-size: var(--type-h4-size);
    font-weight: var(--type-h4-weight);
    line-height: var(--type-heading-lh);
}

/* -------------------------------------------------------------------------- */
/* Home / feed / cards                                                         */
/* -------------------------------------------------------------------------- */

/* Section title → Type/Heading/H2 */
.snipit-topic__name.topic-name,
.topic-name,
.term-name,
.featured-header .topic-name,
.snipit-featured__title {
    font-family: var(--font-heading);
    font-size: var(--type-h2-size);
    font-weight: var(--type-h2-weight);
    line-height: var(--type-heading-lh);
    letter-spacing: var(--type-heading-tracking);
}

/* Newsletter title — slightly smaller than section H2 */
.snipit-newsletter__title {
    font-family: var(--font-heading);
    font-weight: var(--type-h2-weight);
    letter-spacing: var(--type-heading-tracking);
}

/* Card title → Type/Heading/H4 */
.snipit-topic-card__title,
.post-title,
.topic-article-title,
.gh-card-title,
.featured-wrapper .post-title,
.snipit-featured-card__title {
    font-family: var(--font-heading);
    font-size: var(--type-h4-size);
    font-weight: var(--type-h4-weight);
    line-height: var(--type-heading-lh);
    letter-spacing: var(--type-heading-tracking);
}

/* Featured card title can step up to H3 for hierarchy */
.snipit-topic-card--featured .snipit-topic-card__title,
.snipit-featured-hero__title {
    font-size: var(--type-h3-size);
    font-weight: var(--type-h3-weight);
    line-height: var(--type-heading-lh);
    letter-spacing: var(--type-heading-tracking);
}

/* Supporting copy → Type/Body/S */
.snipit-topic-card__excerpt,
.post-excerpt,
.topic-article-excerpt,
.gh-card-excerpt,
.snipit-featured-hero__excerpt,
.snipit-featured-card__excerpt {
    font-family: var(--font-body);
    font-size: var(--type-body-s-size);
    font-weight: var(--type-body-weight);
    line-height: var(--type-body-lh);
}

/* Metadata → Type/Caption/Default */
.snipit-topic-card__meta,
.post-meta,
.post-date,
.post-tag {
    font-family: var(--font-body);
    font-size: var(--type-caption-size);
    font-weight: var(--type-caption-weight);
    line-height: var(--type-caption-lh);
}

/* CTA — lighter than Action/Button */
.snipit-topic__cta,
.topic-more {
    font-family: var(--font-heading);
    font-weight: 500;
    line-height: 1.25;
}

/* -------------------------------------------------------------------------- */
/* Navigation — Pretendard within Type/Action + Body                           */
/* -------------------------------------------------------------------------- */

.snipit-site-nav,
.snipit-nav {
    font-family: var(--font-heading);
}

.snipit-nav__wordmark {
    font-family: var(--font-brand);
    font-weight: 700;
}

/* snipit-site-nav typography는 snipit-site-nav.css(랜딩 실측) 우선 */

/* shared-theme-assets `a:hover{opacity:.8}` 가 이미지 카드를 하얗게 만드는 것 방지 */
a:hover:has(img),
.snipit-topic-card:hover,
.snipit-featured-hero:hover,
.snipit-featured-card:hover,
.snipit-featured-hero__media:hover,
.snipit-featured-card__media:hover,
a.snipit-featured-hero__media:hover,
a.snipit-featured-card__media:hover,
.post-image-link:hover {
    opacity: 1 !important;
}