/**
 * 기획기사 시스템 — 슬롯/아카이브/시리즈 내비 공용 스타일
 *
 * 디자인 원칙:
 *  - intra-v2 디자인 토큰(_tokens.css) 만 사용. 하드 코드 색·사이즈 없음.
 *  - 카테고리/태그/저자 페이지(.cat-*, .author-*)와 동일한 시각 리듬 — 헤더 좌측 액센트 바, 카드 호버 등.
 *  - --ipa-accent 만 큐레이션 전용 톤(브랜드 burgundy)으로 유지. 그 외는 사이트 primary 와 공유.
 */

/* =============== 공통 토큰 — ipa 전용 fallback (큐레이션 색만 별도) =============== */
:root {
    --ipa-accent:        #a02334;          /* 큐레이션 전용 burgundy — 사이트 primary 와 의도적으로 구분 */
    --ipa-accent-soft:   rgba(160, 35, 52, 0.08);
    --ipa-accent-strong: #88182b;
}

/* =============== 슬롯 헤더(메인/카테고리 페이지에서 호출) =============== */
/* .intra-featured__head 베이스는 custom.css 에 정의 — 여기서 재정의하지 않음 */
.intra-featured__more {
    margin-left: auto;
    font-size: var(--fs-base);
    color: var(--ipa-accent);
    text-decoration: none;
    font-weight: var(--fw-semibold);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color var(--dur-fast) var(--ease-out);
}
.intra-featured__more::after {
    content: '→';
    transition: transform var(--dur-base) var(--ease-out);
}
.intra-featured__more:hover { color: var(--ipa-accent-strong); }
.intra-featured__more:hover::after { transform: translateX(3px); }

.intra-featured__sub-line {
    display: block;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin-top: 2px;
}
.intra-featured__foot {
    margin-top: var(--space-2);
    text-align: right;
    font-size: var(--fs-base);
}
.intra-featured__foot a {
    color: var(--ipa-accent);
    text-decoration: none;
    font-weight: var(--fw-semibold);
}
.intra-featured__foot a:hover { color: var(--ipa-accent-strong); text-decoration: underline; }

/* =====================================================================
 * /featured/ 아카이브 — .ipa-page (= .cat-page 위에 얹힘)
 * ===================================================================== */

.ipa-page {
    /* .cat-page 가 max-width / padding 처리 — 여기선 ipa 컨텍스트에 한해 미세 조정 */
    color: var(--color-gray-700);
}

/* =============== 헤더 — 좌측 액센트 바 + 브레드크럼 + 카운트 칩 =============== */
.ipa-page .ipa-header {
    position: relative;
    margin-bottom: var(--space-6);
    padding: 4px 0 var(--space-6) 18px;
    border-bottom: 1px solid var(--color-border-subtle);
}
.ipa-page .ipa-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: var(--space-6);
    width: 4px;
    border-radius: var(--radius-full);
    background: linear-gradient(180deg, var(--ipa-accent) 0%, var(--ipa-accent-strong) 100%);
}

/* breadcrumb (intra_render_breadcrumb 가 출력) — 카테고리 페이지의 cat-header__meta 톤과 동일 */
.ipa-page .ipa-header .intra-breadcrumb {
    margin: 0 0 12px;
    font-size: var(--fs-sm);
    color: var(--color-text-subtle);
}
.ipa-page .ipa-header .intra-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.ipa-page .ipa-header .intra-breadcrumb__item { display: inline-flex; align-items: center; }
.ipa-page .ipa-header .intra-breadcrumb a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}
.ipa-page .ipa-header .intra-breadcrumb a:hover { color: var(--ipa-accent); }
.ipa-page .ipa-header .intra-breadcrumb__item.is-current span { color: var(--color-gray-600); font-weight: var(--fw-medium); }
.ipa-page .ipa-header .intra-breadcrumb__sep { color: var(--color-gray-300); }

.ipa-eyebrow {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-xs);
    letter-spacing: .14em;
    color: var(--ipa-accent);
    text-transform: uppercase;
    font-weight: var(--fw-bold);
}
.ipa-eyebrow a { color: inherit; text-decoration: none; }
.ipa-eyebrow a:hover { color: var(--ipa-accent-strong); }
.ipa-eyebrow .ipa-track-name { color: var(--color-gray-700); font-weight: var(--fw-semibold); }

.ipa-title-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: 0 0 var(--space-2);
}
.ipa-title {
    margin: 0;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: var(--fw-extrabold);
    color: var(--color-gray-800);
    letter-spacing: -.018em;
    line-height: 1.15;
}
.ipa-count-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    padding: 4px 12px;
    background: var(--ipa-accent-soft);
    color: var(--color-gray-600);
    border-radius: var(--radius-full);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    line-height: 1.1;
}
.ipa-count-chip strong {
    color: var(--ipa-accent);
    font-weight: var(--fw-extrabold);
    font-size: var(--fs-md);
}
.ipa-lede {
    margin: 0;
    color: var(--color-gray-500);
    font-size: var(--fs-lg);
    line-height: 1.65;
    max-width: 720px;
}

/* =============== 필터 영역 =============== */
.ipa-filters {
    margin-bottom: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.ipa-chips {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.ipa-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    background: var(--color-gray-100);
    color: var(--color-gray-600);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    text-decoration: none;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    line-height: 1.2;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.ipa-chip:hover {
    background: var(--color-gray-200);
    color: var(--color-gray-800);
}
.ipa-chip:focus-visible {
    outline: 2px solid var(--ipa-accent);
    outline-offset: 2px;
}
.ipa-chip.is-active {
    background: var(--ipa-accent);
    color: var(--color-white);
    border-color: var(--ipa-accent);
}
.ipa-chip.is-active:hover {
    background: var(--ipa-accent-strong);
    color: var(--color-white);
}

.ipa-controls {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.ipa-tabs {
    display: inline-flex;
    list-style: none;
    margin: 0;
    padding: 4px;
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
}
.ipa-tabs li { margin: 0; }
.ipa-tab {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    color: var(--color-gray-500);
    text-decoration: none;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    border-radius: calc(var(--radius-md) - 2px);
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ipa-tab:hover { color: var(--color-gray-800); }
.ipa-tab.is-active {
    background: var(--color-white);
    color: var(--ipa-accent);
    font-weight: var(--fw-bold);
    box-shadow: var(--shadow-sm);
}

.ipa-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 8px 36px 8px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white)
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")
        no-repeat right 12px center;
    color: var(--color-gray-700);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out);
}
.ipa-select:hover { border-color: var(--color-border-strong); }
.ipa-select:focus-visible {
    outline: none;
    border-color: var(--ipa-accent);
    box-shadow: 0 0 0 3px var(--ipa-accent-soft);
}

/* =============== 그리드 =============== */
.ipa-grid {
    list-style: none;
    margin: 0 0 var(--space-8);
    padding: 0;
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* =============== 카드 =============== */
.ipa-card {
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out);
}
.ipa-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}
.ipa-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}
.ipa-card__thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-gray-100);
}
.ipa-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}
.ipa-card:hover .ipa-card__thumb img { transform: scale(1.05); }

/* 썸네일 상단·하단 그라디언트 — 배지/D-day 가 항상 잘 보이도록 */
.ipa-card__thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(var(--rgb-black), 0.18) 0%, rgba(var(--rgb-black), 0) 30%);
    pointer-events: none;
    z-index: 1;
}

/* 인젝션/큐레이션 배지 — cat-card 와 동급 톤 */
.intra-feat-badge {
    position: absolute;
    left: var(--space-3);
    top: var(--space-3);
    padding: 4px 10px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--color-white);
    border-radius: var(--radius-full);
    z-index: 2;
    letter-spacing: .03em;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(var(--rgb-black), 0.18);
}

.ipa-card__dday {
    position: absolute;
    right: var(--space-3);
    top: var(--space-3);
    padding: 4px 10px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--color-white);
    background: rgba(214, 54, 56, 0.94);
    border-radius: var(--radius-full);
    z-index: 2;
    letter-spacing: .02em;
    box-shadow: 0 2px 8px rgba(var(--rgb-black), 0.18);
}

.ipa-card__body {
    padding: var(--space-4) 18px var(--space-5);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ipa-card__cat {
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-xs);
    letter-spacing: .06em;
    color: var(--ipa-accent);
    text-transform: uppercase;
    font-weight: var(--fw-bold);
    margin-bottom: 2px;
}
.ipa-card__cat::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 1px;
    background: var(--ipa-accent);
    margin-right: 8px;
    vertical-align: middle;
}
.ipa-card__h {
    font-size: var(--fs-2xl);
    line-height: 1.4;
    font-weight: var(--fw-bold);
    color: var(--color-gray-800);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
    transition: color var(--dur-fast) var(--ease-out);
}
.ipa-card:hover .ipa-card__h { color: var(--ipa-accent); }
.ipa-card__sub {
    font-size: var(--fs-base);
    color: var(--color-gray-600);
    font-weight: var(--fw-medium);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ipa-card__lede {
    font-size: var(--fs-base);
    color: var(--color-gray-500);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ipa-card__meta {
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px dashed var(--color-border-subtle);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    font-size: var(--fs-xs);
    color: var(--color-gray-400);
}
.ipa-card__date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-variant-numeric: tabular-nums;
}
.ipa-card__date::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--color-gray-300);
}
.ipa-card__series {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    background: var(--ipa-accent-soft);
    color: var(--ipa-accent);
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: .02em;
}

/* =============== 페이지네이션 — cat-pagination 과 시각 리듬 통일 =============== */
.ipa-pagination {
    margin-top: var(--space-8);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ipa-pagination .page-numbers {
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    color: var(--color-gray-600);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    transition:
        background var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out);
}
.ipa-pagination .page-numbers:hover {
    background: var(--color-gray-50);
    border-color: var(--color-gray-300);
    color: var(--color-gray-800);
}
.ipa-pagination .page-numbers.current {
    background: var(--ipa-accent);
    color: var(--color-white);
    border-color: var(--ipa-accent);
}
.ipa-pagination .page-numbers.dots { border: none; background: transparent; padding: 0 4px; }

/* =============== 빈 상태 — cat-empty 톤 통일 =============== */
.ipa-empty {
    padding: 64px var(--space-5);
    text-align: center;
    background: var(--color-gray-50);
    border-radius: var(--radius-xl);
    color: var(--color-gray-500);
    margin: var(--space-4) 0 var(--space-6);
}
.ipa-empty p {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-lg);
}
.ipa-empty p:last-child { margin-bottom: 0; }
.ipa-empty .ipa-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    background: var(--ipa-accent);
    color: var(--color-white);
    border-radius: var(--radius-full);
    text-decoration: none;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-base);
    transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.ipa-empty .ipa-link:hover {
    background: var(--ipa-accent-strong);
    transform: translateY(-1px);
}

/* =====================================================================
 *  단일 기사 시리즈 내비 — 본문 상단 칩
 * ===================================================================== */
.intra-planned-seriesnav {
    position: relative;
    margin: var(--space-3) 0 var(--space-6);
    padding: var(--space-4) 18px var(--space-4) calc(18px + 4px);
    background: var(--color-gray-50);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}
.intra-planned-seriesnav::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 4px;
    border-radius: var(--radius-full);
    background: var(--ipa-accent);
}
.intra-planned-seriesnav__label {
    font-size: var(--fs-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ipa-accent);
    font-weight: var(--fw-bold);
}
.intra-planned-seriesnav__title {
    font-weight: var(--fw-bold);
    color: var(--color-gray-800);
    font-size: var(--fs-md);
    line-height: 1.4;
}
.intra-planned-seriesnav__progress {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    background: var(--color-white);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-full);
    color: var(--color-gray-500);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
}
.intra-planned-seriesnav__nav {
    margin-left: auto;
    display: flex;
    gap: 6px;
}
.intra-planned-seriesnav__nav a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    color: var(--color-gray-700);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.intra-planned-seriesnav__nav a:hover {
    background: var(--ipa-accent);
    border-color: var(--ipa-accent);
    color: var(--color-white);
}
.intra-planned-seriesnav__nav a[aria-disabled="true"] {
    opacity: .4;
    pointer-events: none;
}

/* =====================================================================
 *  반응형
 * ===================================================================== */
@media (max-width: 1024px) {
    .ipa-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-5); }
}
@media (max-width: 768px) {
    .ipa-page .ipa-header { padding-left: 14px; padding-bottom: var(--space-5); margin-bottom: var(--space-5); }
    .ipa-page .ipa-header::before { width: 3px; }
    .ipa-title { font-size: clamp(22px, 6vw, 30px); }
    .ipa-title-row { gap: var(--space-2); }
    .ipa-count-chip { padding: 3px 10px; font-size: var(--fs-sm); }
    .ipa-count-chip strong { font-size: var(--fs-base); }
    .ipa-lede { font-size: var(--fs-md); }

    .ipa-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
    .ipa-card__body { padding: var(--space-3) var(--space-3) var(--space-4); gap: 4px; }
    .ipa-card__h { font-size: var(--fs-lg); }
    .ipa-card__cat { font-size: 10px; }
    .ipa-card__cat::before { width: 10px; margin-right: 6px; }
    .ipa-card__lede { -webkit-line-clamp: 2; line-clamp: 2; }
    .ipa-card__sub { -webkit-line-clamp: 1; line-clamp: 1; }
    .ipa-card__meta { padding-top: var(--space-2); gap: var(--space-2); }

    .ipa-controls { flex-direction: column; align-items: stretch; gap: var(--space-2); }
    .ipa-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 3px; }
    .ipa-tab { white-space: nowrap; padding: 6px 14px; }
    .ipa-select { width: 100%; }

    .ipa-pagination { flex-wrap: wrap; gap: 4px; margin-top: var(--space-6); }
    .ipa-pagination .page-numbers { min-width: 34px; height: 34px; padding: 0 10px; font-size: var(--fs-sm); }

    /* 시리즈 내비 — 좁은 화면에서 자연스럽게 정렬 */
    .intra-planned-seriesnav { padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 4px); gap: var(--space-2); }
    .intra-planned-seriesnav__nav { margin-left: 0; width: 100%; justify-content: space-between; }
    .intra-planned-seriesnav__nav a { flex: 1; text-align: center; justify-content: center; }
}
@media (max-width: 480px) {
    .ipa-grid { grid-template-columns: 1fr; gap: var(--space-3); }
    .ipa-card__h { font-size: var(--fs-xl); -webkit-line-clamp: 3; line-clamp: 3; }
    .ipa-card__lede { display: none; }
    .ipa-chips { gap: 6px; }
    .ipa-chip { padding: 6px 12px; font-size: var(--fs-sm); }
    .ipa-card__meta { gap: var(--space-2); font-size: 10px; }

    .ipa-empty { padding: 48px var(--space-4); }
    .ipa-empty p { font-size: var(--fs-md); }
}

/* =====================================================================
 *  접근성 — reduced motion 사용자엔 호버 효과만 남기고 transform 끔
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .ipa-card,
    .ipa-card__thumb img,
    .ipa-card__h,
    .intra-featured__more,
    .intra-featured__more::after,
    .ipa-empty .ipa-link {
        transition: none;
    }
    .ipa-card:hover { transform: none; }
    .ipa-card:hover .ipa-card__thumb img { transform: none; }
}