@charset "utf-8";
/* ==========================================================================
   FARMERS BRANDING — 지원사업 목록 · 상세 (SUP-LIST · SUP-DETAIL)
   메인 페이지와 같은 문법: HOME-02 머리줄(.works-bar)·사진 든 큰 제목, HOME-04 검은 면,
   HOME-06 둥근 카드, HOME-08 아코디언(.qna-*). 색은 home.css 의 --fb-* 토큰만 쓴다.
   클래스 접두어: sp-
   ========================================================================== */

.spm { padding-top: var(--header-offset); background: var(--fb-paper); color: var(--fb-ink); letter-spacing: -0.02em; word-break: keep-all; overflow-wrap: break-word; }
.spm h1, .spm h2, .spm h3, .spm p { margin: 0; }
.spm h1, .spm h2, .spm h3 { font-weight: 500; text-wrap: balance; }
.spm :focus-visible { outline: 2px solid var(--fb-point-text); outline-offset: 3px; }
.spm button { font: inherit; color: inherit; letter-spacing: inherit; }

/* 진입 모션 (메인 data-reveal 과 같은 값) */
.sp-rv { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--fb-ease), transform .7s var(--fb-ease), background-color .4s, border-color .4s; }
.sp-rv.is-in { opacity: 1; transform: none; }

/* ---------- 머리 (HOME-02 문법) ---------- */
.sp-hero { padding: 96px 0 104px; }
.sp-big { margin-top: 64px; font-size: clamp(44px, 6.2vw, 92px); font-weight: 500; line-height: 1.12; letter-spacing: -0.03em; }
.sp-pill { display: inline-block; width: 1.9em; height: .78em; margin: 0 .04em; border-radius: 999px; overflow: hidden; vertical-align: -0.04em; background: var(--fb-fog); }
.sp-pill img { display: block; width: 100%; height: 100%; object-fit: cover; }
.js .sp-pill { animation: sp-pill 1s .3s var(--fb-ease) both; }
@keyframes sp-pill { from { width: 0; margin: 0 -.12em; } to { width: 1.9em; margin: 0 .04em; } }
.sp-hero-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 64px; margin-top: 40px; }
.sp-lead { font-size: 18px; line-height: 1.75; letter-spacing: 0; color: var(--fb-ink-500); }
.sp-updated { font-size: 13px; line-height: 1.6; letter-spacing: .02em; color: var(--fb-ink-500); text-align: right; }
.sp-updated b { font-family: Poppins, sans-serif; font-size: 22px; font-weight: 500; letter-spacing: 0; color: var(--fb-ink); }

/* 섹션 머리 (HOME-05·06 과 같은 좌우 배치) */
.sp-sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 64px; }
.sp-sec-head .fb-h2 { margin-top: 14px; }
.sp-sec-note { font-size: 16px; letter-spacing: 0; color: var(--fb-ink-500); }

/* ---------- 마감 임박: 검은 면 + 큰 D-day (HOME-04 톤) ---------- */
.sp-soon { padding: var(--fb-sec-pad) 0; background: var(--fb-ink); color: var(--fb-paper); }
.sp-soon .fb-eyebrow { color: var(--fb-point); }
.sp-soon .sp-sec-note { color: var(--fb-ink-300); }
.sp-soon-list { margin-top: 56px; border-top: 1px solid rgba(255, 255, 255, .22); }
.sp-soon-card { display: grid; grid-template-columns: 260px minmax(0, 1fr) 56px; align-items: center; gap: 40px; padding: 40px 0; border-bottom: 1px solid rgba(255, 255, 255, .22); color: inherit; text-decoration: none; }
.sp-soon-dd { font-family: Poppins, sans-serif; font-size: clamp(56px, 7vw, 104px); font-weight: 500; line-height: 1; letter-spacing: -0.04em; color: var(--fb-point); font-variant-numeric: tabular-nums; }
.sp-soon-body h3 { margin-top: 14px; font-size: 28px; line-height: 1.35; letter-spacing: -0.02em; }
.sp-soon-body p { margin-top: 8px; font-size: 15px; letter-spacing: 0; color: var(--fb-ink-300); }
.sp-soon-card:hover h3 { text-decoration: underline; text-decoration-color: var(--fb-point); text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* 원형 화살표 (메인 .works-btn 과 같은 모양) */
.sp-go { display: flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--fb-line); color: var(--fb-ink); transition: border-color .3s, background-color .3s, color .3s, transform .3s; }
.sp-go svg { width: 20px; height: 20px; }
.sp-go.on-dark { width: 56px; height: 56px; border-color: rgba(255, 255, 255, .35); color: var(--fb-paper); }
.sp-soon-card:hover .sp-go { border-color: var(--fb-point); background: var(--fb-point); color: var(--fb-ink); transform: rotate(-45deg); }

/* ---------- 태그 ---------- */
.sp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: 0; white-space: nowrap; background: var(--fb-paper); color: var(--fb-ink-700); }
.sp-tag.lv3 { background: var(--fb-point); color: var(--fb-ink); }
.sp-tag.lv2 { background: var(--fb-point-100); color: var(--fb-point-text); }
.sp-tag.lv1 { background: var(--fb-support-bg); color: var(--fb-support); }
.sp-tag.kind-pack { background: var(--fb-point); color: var(--fb-ink); }
.sp-tag.kind-brand, .sp-tag.kind-promo { background: var(--fb-point-100); color: var(--fb-point-text); }
.sp-tag.new { background: transparent; box-shadow: inset 0 0 0 1px var(--fb-ink); color: var(--fb-ink); }
.sp-tag.on-dark { background: rgba(255, 255, 255, .12); color: var(--fb-paper); }
.sp-tag.new.on-dark { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }

/* ---------- 전체 목록: 탭·분야·검색 ---------- */
.sp-all { padding-bottom: var(--fb-sec-pad); }
.sp-bar { position: sticky; top: var(--header-offset); z-index: 30; background: var(--fb-paper); border-bottom: 1px solid var(--fb-line); }
.sp-bar-in { display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; padding-top: 22px; padding-bottom: 22px; }
.sp-tabs { display: flex; gap: 30px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.sp-tabs::-webkit-scrollbar { display: none; }
.sp-tab { flex: none; padding: 0; border: 0; background: none; cursor: pointer; font-size: clamp(22px, 2.2vw, 30px); font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; color: var(--fb-ink-300); white-space: nowrap; transition: color .2s; }
.sp-tab sup { margin-left: 4px; font-family: Poppins, sans-serif; font-size: .45em; font-weight: 500; letter-spacing: 0; vertical-align: 1em; }
.sp-tab:hover { color: var(--fb-ink-500); }
.sp-tab[aria-pressed="true"] { color: var(--fb-ink); }
.sp-tab[aria-pressed="true"]::before { content: "→"; margin-right: 10px; color: var(--fb-point-text); }
.sp-tools { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.sp-fields { display: flex; gap: 6px; flex-wrap: wrap; }
.sp-chip { height: 36px; padding: 0 16px; border: 1px solid var(--fb-line); border-radius: 999px; background: var(--fb-paper); cursor: pointer; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--fb-ink-700); transition: border-color .2s, background-color .2s, color .2s; }
.sp-chip:hover { border-color: var(--fb-ink); }
.sp-chip[aria-pressed="true"] { border-color: var(--fb-ink); background: var(--fb-ink); color: var(--fb-paper); }
.sp-chip-n { margin-left: 6px; font-family: Poppins, sans-serif; font-size: 12px; opacity: .55; }
/* 패키지·포장: 파머스가 가장 많이 돕는 분야라 초록 테두리로 먼저 보이게 */
.sp-chip.is-pack { border-color: var(--fb-point); }
.sp-chip.is-pack[aria-pressed="true"] { border-color: var(--fb-point); background: var(--fb-point); color: var(--fb-ink); }
/* 지역 고르기: 칩과 같은 알약 모양 */
.sp-region { position: relative; display: inline-flex; }
.sp-region select { height: 36px; padding: 0 36px 0 16px; border: 1px solid var(--fb-line); border-radius: 999px; background: var(--fb-paper); font: inherit; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--fb-ink-700); cursor: pointer; appearance: none; -webkit-appearance: none; transition: border-color .2s; }
.sp-region select:hover, .sp-region select:focus-visible { border-color: var(--fb-ink); outline: 0; }
.sp-region::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); pointer-events: none; color: var(--fb-ink-700); }
.sp-search { display: flex; align-items: center; width: 220px; height: 40px; border-bottom: 1.5px solid var(--fb-ink); }
.sp-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 15px; letter-spacing: 0; color: var(--fb-ink); }
.sp-search input::placeholder { color: var(--fb-ink-500); }
.sp-search button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; }
.sp-search svg { width: 18px; height: 18px; }

.sp-body { padding-top: 40px; }
.sp-count { margin-bottom: 20px; font-size: 14px; letter-spacing: 0; color: var(--fb-ink-500); }
.sp-count b { font-family: Poppins, sans-serif; font-weight: 600; color: var(--fb-ink); }

/* ---------- 카드 (HOME-06 둥근 카드 문법) ---------- */
.sp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.sp-card { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: 380px; padding: 32px 32px 30px; border-radius: 16px; background: var(--fb-fog); color: inherit; text-decoration: none; }
.sp-card:hover { background: var(--fb-point-50); }
.sp-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--fb-line); }
.sp-dd { font-family: Poppins, sans-serif; font-size: 48px; font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: var(--fb-point-text); font-variant-numeric: tabular-nums; }
.sp-dd.is-soon { color: var(--fb-alert); }
.sp-dd.is-always { font-family: inherit; font-size: 34px; letter-spacing: -0.02em; color: var(--fb-ink); }
.sp-dd.is-closed { font-family: inherit; font-size: 34px; letter-spacing: -0.02em; color: var(--fb-ink-300); }
.sp-card-date { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--fb-ink-500); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-card-mid { flex: 1; }
.sp-card-title { margin-top: 16px; font-size: 22px; line-height: 1.4; letter-spacing: -0.02em; }
.sp-card-org { margin-top: 8px; font-size: 14px; letter-spacing: 0; color: var(--fb-ink-500); }
.sp-card-foot { display: flex; align-items: flex-end; gap: 20px; }
.sp-card-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; flex: 1; font-size: 14px; line-height: 1.7; letter-spacing: 0; color: var(--fb-ink-700); }
.sp-card .sp-go { background: var(--fb-paper); border-color: var(--fb-paper); }
.sp-card:hover .sp-go { background: var(--fb-ink); border-color: var(--fb-ink); color: var(--fb-paper); transform: rotate(-45deg); }
.sp-card.is-closed { opacity: .6; }
.sp-empty { grid-column: 1 / -1; padding: 96px 0; text-align: center; letter-spacing: 0; color: var(--fb-ink-500); }
.sp-empty a { color: var(--fb-ink); border-bottom: 3px solid var(--fb-point); }
.sp-note { margin-top: 32px; font-size: 13px; line-height: 1.7; letter-spacing: 0; color: var(--fb-ink-500); }

/* ---------- 상세 ---------- */
.sp-d-hero { padding: 48px 0 88px; background: var(--fb-ink); color: var(--fb-paper); }
.sp-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--fb-ink-300); text-decoration: none; transition: color .2s, gap .3s; }
.sp-back:hover { color: var(--fb-paper); gap: 12px; }
.sp-back svg { width: 18px; height: 18px; }
.sp-d-hero-in { display: grid; grid-template-columns: 5fr 7fr; gap: 40px 80px; align-items: end; margin-top: 64px; }
.sp-d-dd span { display: block; font-family: Poppins, sans-serif; font-size: clamp(72px, 10vw, 152px); font-weight: 500; line-height: .9; letter-spacing: -0.05em; color: var(--fb-point); font-variant-numeric: tabular-nums; }
.is-soon .sp-d-dd span { color: var(--fb-point); }
.is-always .sp-d-dd span, .is-closed .sp-d-dd span { font-family: inherit; letter-spacing: -0.03em; }
.is-closed .sp-d-dd span { color: var(--fb-ink-500); }
.sp-d-dd small { display: block; margin-top: 18px; font-size: 15px; letter-spacing: 0; color: var(--fb-ink-300); }
.sp-d-title { margin-top: 18px; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.25; letter-spacing: -0.025em; }
.sp-d-org { margin-top: 14px; font-size: 16px; letter-spacing: 0; color: var(--fb-ink-300); }

.sp-d-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: start; padding-top: 72px; }
.sp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sp-fact { padding: 28px; border-radius: 16px; background: var(--fb-fog); }
.sp-fact span { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--fb-point-text); }
.sp-fact p { margin-top: 12px; font-size: 17px; line-height: 1.7; letter-spacing: 0; }
.sp-conds { margin-top: 96px; }
.sp-conds .qna-list { margin-top: 40px; }
.sp-conds .qna-q { padding: 30px 0; font-size: 20px; }
.sp-conds .qna-q .q-mark { width: 44px; font-family: Poppins, sans-serif; font-size: 14px; letter-spacing: .04em; }
.sp-conds .qna-q .q-text { white-space: normal; }
.sp-conds .qna-a p { padding: 0 42px 32px 44px; white-space: normal; }

.sp-d-side { position: sticky; top: calc(var(--header-offset) + 24px); display: flex; flex-direction: column; gap: 16px; }
.sp-side-card { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 16px; background: var(--fb-ink); color: var(--fb-paper); }
.sp-side-card .fb-eyebrow { color: var(--fb-point); }
.sp-side-card p { font-size: 14px; line-height: 1.7; letter-spacing: 0; color: var(--fb-ink-300); }
.sp-side-card b { font-size: 17px; font-weight: 600; line-height: 1.45; }
.sp-side-card.is-light { background: var(--fb-point-50); color: var(--fb-ink); }
.sp-side-card.is-light p { color: var(--fb-ink-700); }
.sp-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; margin-top: 6px; padding: 0 22px 0 24px; border-radius: 8px; background: var(--fb-ink); color: var(--fb-paper); font-size: 16px; font-weight: 500; text-decoration: none; transition: gap .3s, background-color .2s, color .2s; }
.sp-btn svg { width: 20px; height: 20px; transition: transform .3s; }
.sp-btn:hover svg { transform: translateX(4px); }
.sp-btn.point { background: var(--fb-point); color: var(--fb-ink); }
.sp-rel { padding: 120px 0 var(--fb-sec-pad); }
.sp-rel .sp-grid { margin-top: 48px; }
.sp-rel .column-all { color: var(--fb-ink); }

/* ---------- 반응형 ---------- */
@media (width <= 1100px) {
    .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp-soon-card { grid-template-columns: 200px minmax(0, 1fr) 56px; gap: 28px; }
    .sp-d-grid { grid-template-columns: 1fr; gap: 48px; }
    .sp-d-side { position: static; display: grid; grid-template-columns: 1fr 1fr; }
}
@media (width <= 900px) {
    .sp-bar-in { flex-direction: column; align-items: stretch; }
    .sp-tools { justify-content: space-between; }
    .sp-search { width: 100%; }
    .sp-d-hero-in { grid-template-columns: 1fr; }
    .sp-hero-foot { flex-direction: column; align-items: flex-start; }
    .sp-updated { text-align: left; }
    .sp-sec-head { flex-direction: column; align-items: flex-start; }
}
@media (width <= 767px) {
    .sp-hero { padding: 56px 0 64px; }
    .sp-big { margin-top: 40px; font-size: 34px; line-height: 1.3; }
    .sp-lead { font-size: 15px; }
    .sp-lead br { display: none; }
    .sp-soon-list { margin-top: 32px; }
    .sp-soon-card { grid-template-columns: 1fr; gap: 14px; padding: 28px 0; }
    .sp-soon-card .sp-go { display: none; }
    .sp-soon-dd { font-size: 56px; }
    .sp-soon-body h3 { font-size: 20px; }
    .sp-tabs { gap: 18px; margin: 0 calc(var(--fb-side) * -1); padding: 0 var(--fb-side); }
    .sp-tab { font-size: 20px; }
    .sp-bar-in { padding-top: 14px; padding-bottom: 14px; gap: 12px; }
    .sp-fields { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--fb-side) * -1); padding: 0 var(--fb-side); }
    .sp-fields::-webkit-scrollbar { display: none; }
    .sp-chip { flex: none; }
    /* 분야 칩은 한 줄(옆으로 밀어 보기), 그 아래 지역 · 검색을 나란히 */
    .sp-tools { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; }
    .sp-fields { grid-column: 1 / -1; min-width: 0; }
    .sp-grid { grid-template-columns: 1fr; gap: 12px; }
    .sp-card { min-height: 0; padding: 24px; gap: 22px; }
    .sp-dd { font-size: 38px; }
    .sp-card-title { font-size: 19px; }
    .sp-d-hero { padding: 32px 0 56px; }
    .sp-d-hero-in { margin-top: 40px; gap: 24px; }
    .sp-facts { grid-template-columns: 1fr; gap: 10px; }
    .sp-fact { padding: 22px; }
    .sp-fact p { font-size: 16px; }
    .sp-conds { margin-top: 64px; }
    .sp-conds .qna-q { padding: 22px 0; font-size: 17px; }
    .sp-conds .qna-a p { padding: 0 8px 24px 44px; }
    .sp-d-side { grid-template-columns: 1fr; }
    .sp-rel { padding-top: 80px; }
}
@media (prefers-reduced-motion: reduce) {
    .spm *, .sp-rv { transition: none !important; animation: none !important; }
    .sp-rv { opacity: 1; transform: none; }
}