/* Direct Payment 큐레이션 랜딩 — /insights/direct-payment/
 * 전용 스타일. 모든 규칙은 .fnc-dp 루트로 스코프한다 (page-id 셀렉터 금지).
 * 색·타이포·카드·버튼은 전역 style.css 의 .fnc-* / theme.json 토큰을 재사용하고,
 * 이 파일은 이 페이지의 레이아웃 배치와 agricultural-policy 블루 accent 바인딩만 담당한다.
 */

/* 이 페이지는 insights 하위라 body.has-l1-agricultural-policy 가 붙지 않는다.
   블루(정책) accent 4계층을 페이지 루트에 직접 바인딩해 컴포넌트가 상속받게 한다. */
.fnc-dp {
    --fnc-accent-fg:          #0f6b5e;
    --fnc-accent-emphasis:    #167a6b;
    --fnc-accent-subtle:      #ddf3ee;
    --fnc-accent-muted:       rgba(45, 150, 130, 0.45);
    --fnc-accent-on-emphasis: #ffffff;

    /* full-bleed 은 발행 스크립트가 wp:group.alignfull 로 감싸 처리 (내부는 .fnc-dp-wrap 으로 constrain). */
    background: var(--wp--preset--color--background);
}

.fnc-dp-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding-left: var(--wp--preset--spacing--50);
    padding-right: var(--wp--preset--spacing--50);
}
.fnc-dp-sec { padding: var(--wp--preset--spacing--70) 0; }
.fnc-dp-sec--alt { background: var(--wp--preset--color--surface); }

/* ── Hero ─────────────────────────────────────────────────────── */
.fnc-dp-hero {
    position: relative;
    isolation: isolate;
    color: #fff;
    overflow: hidden;
    background: #0a3d34;
}
.fnc-dp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url("/wp-content/uploads/2026/07/wto-boxes-direct-payment-hero.jpg") center 56% / cover no-repeat;
    transform: scale(1.01);
}
.fnc-dp-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(5, 35, 30, 0.96) 0%, rgba(7, 49, 42, 0.91) 45%, rgba(10, 61, 52, 0.68) 72%, rgba(10, 61, 52, 0.48) 100%),
        linear-gradient(180deg, rgba(6, 35, 30, 0.14) 0%, rgba(4, 30, 26, 0.42) 100%);
}
.fnc-dp-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--50);
}
.fnc-dp-hero__eyebrow {
    font-family: var(--wp--preset--font-family--label);
    font-size: 0.78rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
    color: #a9e5db; margin: 0 0 1rem;
}
.fnc-dp-hero h1 {
    font-family: var(--wp--preset--font-family--headline);
    font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; letter-spacing: -0.03em;
    line-height: 1.08; margin: 0 0 1.25rem; max-width: 20ch;
}
.fnc-dp-hero__lead {
    font-size: 1.2rem; line-height: 1.65; color: rgba(255, 255, 255, 0.9);
    max-width: 60ch; margin: 0 0 2.5rem;
}
.fnc-dp-kpis { display: flex; gap: 2.5rem; flex-wrap: wrap; }
.fnc-dp-kpi .num { font-family: var(--wp--preset--font-family--headline); font-size: 2.5rem; font-weight: 900; line-height: 1; }
.fnc-dp-kpi .lbl { font-family: var(--wp--preset--font-family--label); font-size: 0.8rem; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.75); margin-top: 0.4rem; }

/* ── Section heads ────────────────────────────────────────────── */
.fnc-dp-sechead { margin-bottom: 2.5rem; max-width: 62ch; }
.fnc-dp-sechead .eyebrow {
    font-family: var(--wp--preset--font-family--label);
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--fnc-accent-fg); margin: 0 0 0.6rem;
}
.fnc-dp-sechead h2 {
    font-family: var(--wp--preset--font-family--headline);
    font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.75rem;
}
.fnc-dp-sechead p { color: var(--wp--preset--color--on-surface-variant); font-size: 1.05rem; line-height: 1.6; margin: 0; }

/* ── News grids (reuse .fnc-news-card; set grid layout here) ───── */
.fnc-dp .fnc-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; }

/* ── Concept entry cards ──────────────────────────────────────── */
.fnc-dp-concept-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.fnc-dp-concept {
    display: block; text-decoration: none;
    background: var(--wp--preset--color--surface-container-lowest);
    border: 1px solid var(--wp--preset--color--outline-variant);
    border-radius: var(--fnc-radius-lg); padding: 1.75rem;
    transition: transform .2s, box-shadow .2s;
}
.fnc-dp-concept:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15, 107, 94, 0.10); }
.fnc-dp-concept .ic {
    width: 46px; height: 46px; border-radius: 12px;
    background: var(--fnc-accent-subtle); color: var(--fnc-accent-fg);
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem;
}
.fnc-dp-concept h3 { font-family: var(--wp--preset--font-family--headline); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 0.5rem; color: var(--wp--preset--color--on-surface); }
.fnc-dp-concept p { font-size: 0.9rem; line-height: 1.6; color: var(--wp--preset--color--on-surface-variant); margin: 0; }
.fnc-dp-concept .go { display: inline-block; margin-top: 1rem; font-family: var(--wp--preset--font-family--label); font-size: 0.8rem; font-weight: 700; color: var(--fnc-accent-fg); }

/* ── Region feature (JP) ──────────────────────────────────────── */
.fnc-dp-feature {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
    border-radius: var(--fnc-radius-lg); overflow: hidden;
    border: 1px solid var(--wp--preset--color--outline-variant);
    background: var(--wp--preset--color--surface-container-lowest);
}
.fnc-dp-feature__media {
    min-height: 300px;
    position: relative;
    color: #fff;
    display: flex;
    align-items: flex-end;
    padding: 2rem;
    background:
        linear-gradient(180deg, rgba(5, 35, 30, 0.02) 45%, rgba(5, 35, 30, 0.62) 100%),
        url("/wp-content/uploads/2026/07/japan-direct-payment-map-hero-v2.jpg") center 54% / cover no-repeat;
}
.fnc-dp-feature__media .flag { font-family: var(--wp--preset--font-family--label); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; background: rgba(255, 255, 255, 0.16); padding: 4px 10px; border-radius: 999px; }
.fnc-dp-feature__body { padding: 2.25rem; display: flex; flex-direction: column; justify-content: center; }
.fnc-dp-feature__body h3 { font-family: var(--wp--preset--font-family--headline); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; margin: 0 0 0.85rem; }
.fnc-dp-feature__body p { color: var(--wp--preset--color--on-surface-variant); line-height: 1.65; margin: 0 0 1.5rem; }
.fnc-dp-feature__body .meta { font-family: var(--wp--preset--font-family--label); font-size: 0.75rem; color: var(--wp--preset--color--outline); margin-bottom: 1rem; letter-spacing: 0.04em; }

/* ── Coming-soon cards ────────────────────────────────────────── */
.fnc-dp-soon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.fnc-dp-soon { border: 1.5px dashed var(--wp--preset--color--outline-variant); border-radius: var(--fnc-radius-lg); padding: 1.75rem; background: transparent; }
.fnc-dp-soon .badge { font-family: var(--wp--preset--font-family--label); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--outline); border: 1px solid var(--wp--preset--color--outline-variant); padding: 3px 9px; border-radius: 999px; }
.fnc-dp-soon h3 { font-family: var(--wp--preset--font-family--headline); font-size: 1.15rem; font-weight: 700; color: var(--wp--preset--color--on-surface-variant); margin: 1rem 0 0.4rem; }
.fnc-dp-soon p { font-size: 0.88rem; color: var(--wp--preset--color--outline); line-height: 1.55; margin: 0; }

/* ── Direction panel ──────────────────────────────────────────── */
.fnc-dp-direction { background: linear-gradient(135deg, #0a3d34 0%, #12564a 100%); color: #fff; border-radius: var(--fnc-radius-xl); padding: 3.5rem; }
.fnc-dp-direction .eyebrow { font-family: var(--wp--preset--font-family--label); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #a9e5db; margin: 0 0 0.8rem; }
.fnc-dp-direction h2 { font-family: var(--wp--preset--font-family--headline); font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 2rem; max-width: 24ch; }
.fnc-dp-principles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2.5rem; margin-bottom: 2.5rem; }
.fnc-dp-principle { display: flex; gap: 1rem; }
.fnc-dp-principle .n { font-family: var(--wp--preset--font-family--headline); font-weight: 900; font-size: 1.4rem; color: #7fcec0; flex: none; line-height: 1.2; }
.fnc-dp-principle h4 { font-family: var(--wp--preset--font-family--headline); font-size: 1.05rem; font-weight: 700; margin: 0 0 0.35rem; }
.fnc-dp-principle p { font-size: 0.9rem; line-height: 1.55; color: rgba(255, 255, 255, 0.8); margin: 0; }
.fnc-dp-cta-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.fnc-dp-btn-light { display: inline-block; background: #fff; color: #0a3d34; font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 0.9rem; padding: 0.8rem 1.5rem; border-radius: 0.75rem; text-decoration: none; }
.fnc-dp-btn-ghost { display: inline-block; background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.5); font-family: var(--wp--preset--font-family--label); font-weight: 700; font-size: 0.9rem; padding: 0.8rem 1.5rem; border-radius: 0.75rem; text-decoration: none; }

.fnc-dp-footnote { color: var(--wp--preset--color--outline); font-size: 0.8rem; line-height: 1.6; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 900px) {
    .fnc-dp-hero::before { background-position: 58% center; }
    .fnc-dp-hero::after {
        background:
            linear-gradient(90deg, rgba(5, 35, 30, 0.94) 0%, rgba(7, 49, 42, 0.86) 100%),
            linear-gradient(180deg, rgba(6, 35, 30, 0.18) 0%, rgba(4, 30, 26, 0.5) 100%);
    }
    .fnc-dp .fnc-news-grid,
    .fnc-dp-concept-grid,
    .fnc-dp-soon-grid,
    .fnc-dp-principles { grid-template-columns: 1fr; }
    .fnc-dp-feature { grid-template-columns: 1fr; }
    .fnc-dp-direction { padding: 2rem; }
}