/* ═══════════════════════════════════════════════════════════════
   PAGES/LANDINGS.CSS — /landings/ 전용
   조건부 로드: functions.php $page_styles['landings'] 분기

   목적: 사이트가 운영하는 모든 랜딩페이지를 한 화면에서 훑는
   내부 참고용 인덱스. 카드 그리드 대신 고밀도 리스트(행) 구조.

   디자인 근거 (ui-ux-pro-max):
   - Pattern: Directory / Index — 스캔 속도가 최우선, 이미지 제거
   - Density 8/10: 8px 리듬의 조밀 스케일 (--fncl-s1..s5)
   - Motion 3/10: 진입 stagger 30ms, prefers-reduced-motion 준수
   - 행 최소 높이 44px (터치 타깃), tabular-nums 인덱스
   - muted #5b6b5e = 흰 배경 대비 5.5:1 (AA), primary 7.4:1 (AAA)
   - hover 단독 의존 금지 — 경로·배지는 항상 노출, focus ring 유지

   포함 클래스:
   - .fnc-landings (페이지 래퍼)
   - .fnc-landings-hero / -eyebrow / -sub / -meta
   - .fnc-landings-group / -group-head / -group-title / -group-count
   - .fnc-landings-list / .fnc-landings-row (+ __num __main __title
     __path __excerpt __tag)
   ═══════════════════════════════════════════════════════════════ */

/* WP 기본 제목·constrained 래퍼 해제 (insights 페이지와 동일 패턴) */
body:has(.fnc-landings) .wp-block-post-title,
body:has(.fnc-landings) .entry-title { display: none !important; }
/* :not(.fnc-landings) 필수 — 래퍼 자신을 제외하지 않으면 아래에서 지정한
   max-width 가 이 !important 에 덮여 페이지가 뷰포트 전체 폭으로 퍼진다. */
body:has(.fnc-landings) .wp-block-post-content > *:not(.fnc-landings) {
    max-width: none !important;
}

.fnc-landings {
    /* Density 8/10 — 8px 리듬 조밀 스케일 */
    --fncl-s1: 0.25rem;
    --fncl-s2: 0.5rem;
    --fncl-s3: 0.75rem;
    --fncl-s4: 1.25rem;
    --fncl-s5: 2rem;

    --fncl-primary: var(--wp--preset--color--primary, #0d631b);
    --fncl-muted: #5b6b5e;   /* on #fff → 5.5:1 (WCAG AA) */
    --fncl-line: rgba(13, 99, 27, 0.13);
    --fncl-tint: rgba(13, 99, 27, 0.05);

    /* 고정 폭 1140px (border-box — 좌우 패딩 포함한 외곽 폭).
       본문 15px 기준으로 제목·설명·배지가 한 행에 들어가는 폭이다.
       더 좁히면 설명이 전부 2줄로 접힌다. */
    box-sizing: border-box;
    max-width: 1140px;
    margin: 0 auto;
    padding: var(--fncl-s5) 1rem 4rem;
}
@media (min-width: 768px) {
    .fnc-landings { padding: 3.5rem 2.5rem 5rem; }
}

/* ── Hero — 에디토리얼 헤더 (얇은 룰 + 타이트 트래킹) ──── */
.fnc-landings-hero {
    padding-bottom: var(--fncl-s4);
    border-bottom: 2px solid var(--fncl-primary);
    margin-bottom: var(--fncl-s5);
}
.fnc-landings-eyebrow {
    margin: 0 0 var(--fncl-s2);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fncl-primary);
}
.fnc-landings-hero h1 {
    margin: 0 0 var(--fncl-s3);
    font-size: clamp(2rem, 5vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
}
.fnc-landings-sub {
    margin: 0;
    max-width: 60ch;   /* 60–75자 측정 폭 */
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--fncl-muted);
}
.fnc-landings-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fncl-s2) var(--fncl-s4);
    margin: var(--fncl-s4) 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
    color: var(--fncl-muted);
}
.fnc-landings-meta strong {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--fncl-primary);
}

/* ── Group ─────────────────────────────────────────────── */
.fnc-landings-group { margin-bottom: var(--fncl-s5); }
.fnc-landings-group:last-child { margin-bottom: 0; }

.fnc-landings-group-head {
    display: flex;
    align-items: baseline;
    gap: var(--fncl-s2);
    padding-bottom: var(--fncl-s2);
    border-bottom: 1px solid var(--fncl-line);
}
.fnc-landings-group-title {
    margin: 0;
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}
.fnc-landings-group-count {
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--fncl-muted);
}

/* ── List ──────────────────────────────────────────────── */
.fnc-landings-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.fnc-landings-list > li { border-bottom: 1px solid var(--fncl-line); }

.fnc-landings-row {
    display: grid;
    grid-template-columns: 1.5rem 1fr auto;
    grid-template-areas:
        "num  main tag"
        ".    exc  exc";
    align-items: baseline;
    column-gap: var(--fncl-s3);
    row-gap: var(--fncl-s1);
    min-height: 44px;   /* 터치 타깃 최소 높이 */
    padding: var(--fncl-s3) var(--fncl-s2);
    color: inherit;
    text-decoration: none;
    /* 레이아웃을 흔들지 않는 상태 전환 (배경·박스섀도만) */
    box-shadow: inset 0 0 0 0 var(--fncl-primary);
    transition:
        background-color 0.18s ease-out,
        box-shadow 0.18s ease-out;
}
.fnc-landings-row:hover,
.fnc-landings-row:focus-visible {
    background-color: var(--fncl-tint);
    box-shadow: inset 3px 0 0 0 var(--fncl-primary);
}
.fnc-landings-row:focus-visible {
    outline: 2px solid var(--fncl-primary);
    outline-offset: -2px;
}

.fnc-landings-row__num {
    grid-area: num;
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--fncl-muted);
}
.fnc-landings-row__main {
    grid-area: main;
    min-width: 0;
}
.fnc-landings-row__title {
    display: block;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.015em;
    text-wrap: pretty;
}
.fnc-landings-row:hover .fnc-landings-row__title,
.fnc-landings-row:focus-visible .fnc-landings-row__title {
    color: var(--fncl-primary);
}
.fnc-landings-row__path {
    display: block;
    margin-top: var(--fncl-s1);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--fncl-muted);
    /* 좁은 화면에서 경로가 2~3줄로 접히며 행 높이를 키우는 것을 막는다 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fnc-landings-row__excerpt {
    grid-area: exc;
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--fncl-muted);
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fnc-landings-row__tag {
    grid-area: tag;
    align-self: start;   /* 제목 첫 줄에 맞춤 (좁은 화면) */
    margin-top: 0.1rem;
    padding: 0.15rem var(--fncl-s2);
    border: 1px solid var(--fncl-line);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--fncl-primary);   /* on tint → 7.4:1 (AAA) */
    background-color: var(--fncl-tint);
}

/* 1000px 이상 — 발췌를 같은 행으로 옮겨 1행 = 1페이지 밀도 확보.
   배지 컬럼은 max-content 로 고정해 좁아져도 줄바꿈되지 않게 한다. */
@media (min-width: 1000px) {
    .fnc-landings-row {
        grid-template-columns: 1.75rem minmax(16rem, 1.05fr) minmax(0, 1fr) max-content;
        grid-template-areas: "num main exc tag";
        column-gap: var(--fncl-s4);
        padding-top: var(--fncl-s2);
        padding-bottom: var(--fncl-s2);
        align-items: center;
    }
    .fnc-landings-row__tag {
        align-self: center;
        margin-top: 0;
    }
}

/* ── Archive directory — 랜딩 목록과 구분되는 최하단 탐색 컨테이너 ── */
.fnc-landings-archive {
    margin-top: calc(var(--fncl-s5) * 1.75);
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--fncl-primary);
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--fncl-tint), #fff 62%);
}
.fnc-landings-archive__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--fncl-s4);
    padding-bottom: var(--fncl-s4);
    border-bottom: 1px solid var(--fncl-line);
}
.fnc-landings-archive__eyebrow {
    margin: 0 0 var(--fncl-s2);
    color: var(--fncl-primary);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.fnc-landings-archive h2 { margin: 0 0 var(--fncl-s2); font-size: clamp(1.4rem, 3vw, 1.85rem); letter-spacing: -.025em; }
.fnc-landings-archive__head p { max-width: 52ch; margin: 0; color: var(--fncl-muted); font-size: .9375rem; line-height: 1.6; }
.fnc-landings-archive__count { flex: none; color: var(--fncl-primary); font-size: .8125rem; font-weight: 800; white-space: nowrap; }
.fnc-landings-archive__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: var(--fncl-s4); }
.fnc-landings-archive__card {
    display: flex;
    min-height: 10rem;
    flex-direction: column;
    padding: 1.1rem;
    border: 1px solid var(--fncl-line);
    border-radius: .75rem;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: background-color .18s ease-out, box-shadow .18s ease-out, border-color .18s ease-out;
}
.fnc-landings-archive__card:hover, .fnc-landings-archive__card:focus-visible { border-color: var(--fncl-primary); background: #fcfffc; box-shadow: 0 .5rem 1.5rem rgba(13, 99, 27, .1); }
.fnc-landings-archive__card:focus-visible { outline: 2px solid var(--fncl-primary); outline-offset: 2px; }
.fnc-landings-archive__tag { align-self: start; padding: .15rem .5rem; border-radius: 999px; background: var(--fncl-tint); color: var(--fncl-primary); font-size: .7rem; font-weight: 800; }
.fnc-landings-archive__card strong { margin-top: .75rem; font-size: 1rem; letter-spacing: -.015em; line-height: 1.4; }
.fnc-landings-archive__card p { margin: .4rem 0 .75rem; color: var(--fncl-muted); font-size: .8125rem; line-height: 1.55; }
.fnc-landings-archive__go { margin-top: auto; color: var(--fncl-primary); font-size: .8125rem; font-weight: 800; }
@media (max-width: 640px) {
    .fnc-landings-archive__head { align-items: start; flex-direction: column; }
    .fnc-landings-archive__grid { grid-template-columns: 1fr; }
}

/* ── 진입 stagger (Motion 3/10 — subtle, 30ms 간격) ────── */
@media (prefers-reduced-motion: no-preference) {
    .fnc-landings-list > li {
        animation: fncl-row-in 0.3s ease-out both;
    }
    .fnc-landings-list > li:nth-child(1) { animation-delay: 0.00s; }
    .fnc-landings-list > li:nth-child(2) { animation-delay: 0.03s; }
    .fnc-landings-list > li:nth-child(3) { animation-delay: 0.06s; }
    .fnc-landings-list > li:nth-child(4) { animation-delay: 0.09s; }
    .fnc-landings-list > li:nth-child(5) { animation-delay: 0.12s; }
    .fnc-landings-list > li:nth-child(n + 6) { animation-delay: 0.15s; }
}
@keyframes fncl-row-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}