/* 자동 생성 — 고치지 마라. 원본은 시안이다.
 * 만든 명령: node scripts/fg-css.mjs C:/project/design_work/farmersgroup/screens/home.html app/public/css/fg-home.css
 * 모든 선택자가 .fg 아래로 내려가 있다(이유는 scripts/fg-css.mjs 머리말).
 */

/* ══════════════════════════════════════════════════════════════════
   작목반 유통지원센터 — 공개 메인 목업

   · 토큰은 DESIGN.md 에서 새로 만든 것이다. 운영 코드에는 토큰 체계가 없어서
     색이 인라인 1,052곳 + Tailwind 6,147곳에 흩어져 있다.
     여기 :root 를 globals.css 로 옮기는 것이 이식의 첫 단계다.
   · 메뉴·콘텐츠 구성은 현행 그대로. 새로 만든 항목이 없다.
   · 핵심 변화는 **섹션마다 다른 문법**이다 — 지금은 4열 카드가 5번 반복된다.
   ══════════════════════════════════════════════════════════════════ */

.fg {
  --green-900:#1b2016; --green-800:#1f4a36; --green-600:#2f6b4f;
  --green-100:#e6efe1; --green-050:#f2f7f0;
  --gold-600:#b8923f;  --gold-100:#f6ecd4;
  --ivory:#f3efe4; --ivory-050:#fffefa;
  --line:#e2ddd0; --line-soft:#eee9dd;
  --ink:#1b2016; --ink-sub:#4a5443; --ink-mute:#6b7363;
  --up:#c0392b; --down:#1f5fa8; --warn:#bd6336; --ok:#2f6b4f;

  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:20px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(27,32,22,.05), 0 1px 3px rgba(27,32,22,.06);
  --sh-2:0 8px 24px rgba(27,32,22,.10), 0 2px 6px rgba(27,32,22,.05);

  --font-body:'Pretendard',system-ui,-apple-system,'Malgun Gothic',sans-serif;
  --font-head:'Gowun Batang',serif;
  --maxw:1200px;
}

.fg *, .fg *::before, .fg *::after {box-sizing:border-box}
.fg, .fg {margin:0;padding:0}
.fg {
  background:var(--ivory);color:var(--ink);font-family:var(--font-body);
  /* 본문 14.5px 이 지금 가장 큰 가독성 문제였다. 16px 로 올린다. */
  font-size:16px;line-height:1.62;
  word-break:keep-all;overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
.fg a {color:inherit;text-decoration:none}
.fg button {font-family:inherit;cursor:pointer}
.fg img {max-width:100%;display:block}
.fg .wrap {max-width:var(--maxw);margin:0 auto;padding:0 20px}
.fg .num {font-variant-numeric:tabular-nums}
.fg h1, .fg h2, .fg h3 {font-family:var(--font-head);margin:0}
.fg :where(a,button,input):focus-visible {outline:3px solid var(--gold-600);outline-offset:2px;border-radius:var(--r-xs)}
.fg .ico {width:24px;height:24px;flex:none}

/* ── 맨 위로 ───────────────────────────────────────────────────── */
.fg .totop {
  position:fixed;right:18px;bottom:18px;z-index:80;
  width:46px;height:46px;border-radius:50%;border:0;
  background:var(--green-800);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(27,32,22,.28);
  /* 안 보일 때는 초점도 받지 않아야 한다 — visibility 로 끈다 */
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);
  transition:opacity .18s,transform .18s,visibility .18s;
}
.fg .totop.on {opacity:1;visibility:visible;pointer-events:auto;transform:none}
.fg .totop:hover {background:var(--green-600)}
.fg .totop:focus-visible {outline:2px solid var(--gold-600);outline-offset:3px}
.fg .totop .ico {width:20px;height:20px;transform:rotate(-90deg)}
.fg {
  /* 이 변수는 홈에만 있다 - 파셜에 두면 다른 화면도 이 사진을 참조하게 된다. */
  --hero-photo:url('/images/fg/hero-field.jpg');
}
/* ── 상단 유틸 ─────────────────────────────────────────────────── */
.fg .util {background:var(--green-900);color:#c5cabd;font-size:13px}
.fg .util .wrap {display:flex;justify-content:flex-end;gap:18px;height:38px;align-items:center}
.fg .util a:hover {color:#fff}
.fg .util .sep {width:1px;height:11px;background:rgba(255,255,255,.2)}

/* ── 헤더 ──────────────────────────────────────────────────────── */
.fg .head {background:var(--ivory-050);border-bottom:1px solid var(--line)}
.fg .head .wrap {display:flex;align-items:center;gap:28px;padding:18px 20px}
.fg .logo {display:flex;align-items:center;gap:10px;flex:none}
.fg .logo .mark {width:38px;height:38px;border-radius:9px;background:var(--green-800);
  display:flex;align-items:center;justify-content:center;color:var(--gold-600)}
.fg .logo .mark .ico {width:22px;height:22px}
.fg .logo .tx b {display:block;font-family:var(--font-head);font-size:19px;font-weight:700;letter-spacing:-.3px;line-height:1.2}
.fg .logo .tx span {display:block;font-size:10.5px;letter-spacing:1.4px;color:var(--ink-mute);font-weight:600}

.fg .search {flex:1;max-width:430px;display:flex;align-items:center;background:#fff;
  border:1.5px solid var(--line);border-radius:var(--r-pill);overflow:hidden}
.fg .search input {flex:1;border:0;outline:0;padding:11px 18px;font-size:14.5px;font-family:inherit;background:transparent}
.fg .search input::placeholder {color:#9aa596}
.fg .search button {border:0;background:var(--green-800);color:#fff;width:40px;height:40px;
  border-radius:50%;margin-right:4px;display:flex;align-items:center;justify-content:center}
.fg .search .ico {width:19px;height:19px}

.fg .head-util {margin-left:auto;display:flex;gap:20px}
.fg .head-util a {display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:11.5px;font-weight:600;color:var(--ink-sub);position:relative}
.fg .head-util a:hover {color:var(--green-800)}
.fg .head-util .ico {width:22px;height:22px;color:var(--green-800)}
.fg .badge-n {position:absolute;top:-4px;right:2px;background:var(--gold-600);color:#fff;
  font-size:10px;font-weight:800;min-width:16px;height:16px;border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;padding:0 4px}

/* ── 카테고리바 ───────────────────────────────────────────────── */
.fg .gnb {background:var(--ivory-050);border-bottom:2px solid var(--green-800);position:relative}
.fg .gnb .wrap {display:flex;gap:2px;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;    /* FF · 구 Edge */
  overscroll-behavior-x:contain;                    /* 끝에서 뒤로가기 제스처로 새지 않게 */
  -webkit-overflow-scrolling:touch}
.fg .gnb .wrap::-webkit-scrollbar {display:none}         /* Chrome · Safari */
/* 잘린 쪽에 페이드를 깐다. 이게 없으면 「메뉴가 사라졌다」로 읽힌다 */
.fg .gnb::before, .fg .gnb::after {content:"";position:absolute;top:0;bottom:0;width:40px;z-index:1;
  pointer-events:none;opacity:0;transition:opacity .18s}
.fg .gnb::before {left:0;background:linear-gradient(90deg,var(--ivory-050) 20%,rgba(255,254,250,0))}
.fg .gnb::after {right:0;background:linear-gradient(270deg,var(--ivory-050) 20%,rgba(255,254,250,0))}
.fg .gnb.can-l::before {opacity:1}
.fg .gnb.can-r::after {opacity:1}
/* 마우스로 끌 때만. 터치는 브라우저 기본 스크롤을 그대로 쓴다 */
.fg .gnb .wrap.dragging {cursor:grabbing;user-select:none}
/* 링크의 「끌어서 옮기기」를 끈다. 이게 켜져 있으면 마우스 끌기가 시작되자마자 가로챈다 */
.fg .gnb a {-webkit-user-drag:none}
.fg .gnb a {padding:13px 16px;font-size:15px;font-weight:700;white-space:nowrap;
  border-bottom:3px solid transparent;margin-bottom:-2px}
.fg .gnb a:hover, .fg .gnb a.on {color:var(--green-800);border-bottom-color:var(--gold-600)}
/* ── 히어로 ────────────────────────────────────────────────────── */
.fg .hero {position:relative;overflow:hidden;background:var(--green-800)}
.fg .hero-media {position:absolute;inset:0;background-image:var(--hero-photo);
  background-size:cover;background-position:center 62%}
/* 사진 위 글자의 대비를 사진에 맡기지 않는다 */
.fg .hero-scrim {position:absolute;inset:0;background:linear-gradient(100deg,
  rgba(27,32,22,.93) 0%, rgba(31,74,54,.86) 36%, rgba(31,74,54,.45) 68%, rgba(31,74,54,.2) 100%)}
.fg .hero .wrap {position:relative;padding:62px 20px 56px}
.fg .hero-in {max-width:560px;color:#fff}
.fg .hero .eyebrow {font-size:12.5px;font-weight:700;letter-spacing:1.6px;color:var(--gold-600);margin-bottom:14px}
.fg .hero h1 {font-size:40px;font-weight:700;line-height:1.34;letter-spacing:-.8px}
.fg .hero h1 em {font-style:normal;color:var(--gold-600)}
.fg .hero p {margin:16px 0 0;font-size:16.5px;color:#d6e0d2;max-width:27em;line-height:1.7}
.fg .hero-cta {display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.fg .hero-cta .ico, .fg .hero-cta .t-min {display:none}   /* 데스크톱은 글자만 - 확정본 그대로 */

/* ── 버튼 ──────────────────────────────────────────────────────── */
.fg .btn {display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;
  border-radius:var(--r-sm);font-weight:700;font-size:15.5px;padding:0 24px;min-height:48px;
  transition:background .15s,border-color .15s;white-space:nowrap}
.fg .btn-gold {background:var(--gold-600);color:var(--green-900)}
.fg .btn-gold:hover {background:#c8a24d}
.fg .btn-line {background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.35)}
.fg .btn-line:hover {background:rgba(255,255,255,.2)}
.fg .btn-green {background:var(--green-800);color:#fff}
.fg .btn-green:hover {background:var(--green-600)}
.fg .btn-ghost {background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.fg .btn-ghost:hover {border-color:var(--green-800);color:var(--green-800)}
/* ── 4주체 — 여기는 4열이 맞다. 주체가 넷이니까 ─────────────────── */
.fg .roles {background:var(--ivory-050);border-bottom:1px solid var(--line)}
.fg .roles .wrap {display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.fg .role {padding:24px 22px;border-right:1px solid var(--line-soft);transition:background .15s}
.fg .role:last-child {border-right:0}
.fg .role:hover {background:var(--green-050)}
.fg .role .top {display:flex;align-items:center;gap:9px;margin-bottom:9px}
.fg .role .ico {width:21px;height:21px;color:var(--green-800)}
.fg .role b {font-size:15.5px;font-weight:700}
.fg .role p {margin:0;font-size:13.5px;color:var(--ink-sub);line-height:1.6}
.fg .role .go {display:inline-flex;align-items:center;gap:4px;margin-top:11px;
  font-size:13px;font-weight:700;color:var(--green-800)}
.fg .role .go .ico {width:13px;height:13px}

/* ── 시세 — 카드가 아니라 가로 스트립 ──────────────────────────── */
.fg .rates {background:var(--green-900);color:#fff}
.fg .rates .wrap {display:flex;align-items:center;height:60px}
/* 스크롤은 시세 목록만 한다.
   wrap 전체를 overflow-x:auto 로 두면 margin-left:auto 인 '전체 보기'가
   스크롤 영역 밖으로 밀려 잘린다 — 실제로 그렇게 만들었다가 잡았다. */
.fg .rates .list {flex:1;min-width:0;display:flex;align-items:center;overflow-x:auto;scrollbar-width:none}
.fg .rates .list::-webkit-scrollbar {display:none}
.fg .rates .label {display:flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;
  white-space:nowrap;padding-right:20px;margin-right:20px;border-right:1px solid rgba(255,255,255,.18);flex:none}
.fg .rates .label .ico {width:18px;height:18px;color:var(--gold-600)}
.fg .rate {display:flex;align-items:baseline;gap:8px;white-space:nowrap;padding:0 18px;font-size:14.5px}
.fg .rate .nm {color:#c5cabd}
.fg .rate .v {font-weight:700}
.fg .rate .up {color:#ff8f7a;font-size:12.5px;font-weight:700}
.fg .rate .dn {color:#8fc0f5;font-size:12.5px;font-weight:700}
.fg .rate .same {color:#8d968a;font-size:12.5px}
.fg .rates .more {margin-left:auto;padding-left:20px;font-size:13.5px;font-weight:700;
  color:var(--gold-600);white-space:nowrap;flex:none}

/* ── 섹션 공통 ────────────────────────────────────────────────── */
.fg .sec {padding:52px 0}
.fg .sec.alt {background:var(--green-050)}
.fg .sec-hd {display:flex;align-items:flex-end;gap:12px;margin-bottom:22px}
.fg .sec-hd h2 {font-size:22px;font-weight:700;letter-spacing:-.4px}
.fg .sec-hd .sub {font-size:14px;color:var(--ink-mute)}
.fg .sec-hd .more {margin-left:auto;font-size:13.5px;font-weight:700;color:var(--ink-sub);
  display:flex;align-items:center;gap:4px}
.fg .sec-hd .more:hover {color:var(--green-800)}
.fg .sec-hd .more .ico {width:14px;height:14px}

/* ── 인기 농산물 — 4열 상품 그리드 ─────────────────────────────── */
.fg .grid {display:grid;grid-template-columns:repeat(4,1fr);gap:22px 20px}
.fg .pd-thumb {aspect-ratio:1/1;border-radius:var(--r-md);overflow:hidden;background:var(--green-100);margin-bottom:12px}
.fg .pd-thumb img {width:100%;height:100%;object-fit:cover;transition:transform .35s}
.fg .pd:hover .pd-thumb img {transform:scale(1.04)}
.fg .pd-name {font-size:15.5px;font-weight:700;line-height:1.45}
.fg .pd-from {font-size:13px;color:var(--ink-mute);margin-top:4px;display:flex;align-items:center;gap:4px}
.fg .pd-from .ico {width:13px;height:13px;color:var(--green-600)}
.fg .pd-price {margin-top:9px;font-size:19px;font-weight:700}
.fg .pd-price small {font-size:13px;font-weight:600;color:var(--ink-mute)}
.fg .tags {display:flex;gap:5px;margin-top:9px;flex-wrap:wrap}
.fg .tag {font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:var(--r-xs)}
.fg .tag.free {background:var(--green-100);color:var(--green-800)}
.fg .tag.tax {background:var(--gold-100);color:#8a6d12}
.fg .tag.event {background:#fdeae4;color:var(--warn)}

/* ── 부자재 — 2열 큰 카드. 상품 그리드와 구분한다 ───────────────── */
.fg .supply {display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.fg .sup {display:grid;grid-template-columns:132px 1fr;gap:16px;background:var(--ivory-050);
  border:1px solid var(--line);border-radius:var(--r-md);padding:14px;align-items:center}
.fg .sup .im {aspect-ratio:1/1;border-radius:var(--r-sm);overflow:hidden;background:var(--green-100)}
.fg .sup .im img {width:100%;height:100%;object-fit:cover}
.fg .sup .im.is-empty {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:linear-gradient(155deg,var(--green-100),var(--ivory))}
.fg .sup .im .ph {font-size:20px;font-weight:800;color:var(--green-800);opacity:.4}
.fg .sup .im .ph-s {font-size:11px;font-weight:700;color:var(--ink-mute)}
.fg .sup b {font-size:15.5px;font-weight:700;line-height:1.45;display:block}
.fg .sup .who {font-size:12.5px;color:var(--ink-mute);margin-top:3px}
.fg .sup .pr {font-size:18px;font-weight:700;margin-top:8px}
.fg .sup .pr small {font-size:12.5px;font-weight:600;color:var(--ink-mute)}

/* ── 지원사업·교육·라이브 — 3분할 목록 패널. 카드 아님 ──────────── */
.fg .panels {display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  background:var(--ivory-050);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.fg .panel {padding:22px 24px;border-right:1px solid var(--line-soft)}
.fg .panel:last-child {border-right:0}
.fg .panel .ph {display:flex;align-items:center;gap:8px;margin-bottom:14px}
.fg .panel .ph .ico {width:18px;height:18px;color:var(--green-800)}
.fg .panel .ph b {font-size:15.5px;font-weight:700}
.fg .panel .ph .go {margin-left:auto;font-size:12.5px;font-weight:700;color:var(--ink-mute)}
.fg .row {display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--line-soft);align-items:flex-start}
.fg .row:first-of-type {border-top:0;padding-top:0}
.fg .row .st {font-size:11px;font-weight:800;padding:3px 8px;border-radius:var(--r-xs);flex:none;margin-top:2px}
.fg .st.d {background:#fdeae4;color:var(--warn)}
.fg .st.open {background:var(--green-100);color:var(--green-800)}
.fg .st.live {background:#fdeae4;color:var(--up)}
.fg .row .tx {flex:1;min-width:0}
.fg .row .tx b {display:block;font-size:14px;font-weight:700;line-height:1.45}
.fg .row .tx span {display:block;font-size:12.5px;color:var(--ink-mute);margin-top:2px}

/* ── 작목반 기능 — 텍스트 링크 줄. 카드로 만들지 않는다 ─────────── */
.fg .coop {background:var(--green-800);color:#fff;border-radius:var(--r-lg);padding:30px 34px}
.fg .coop-hd {display:flex;align-items:center;gap:10px;margin-bottom:6px}
.fg .coop-hd .ico {width:20px;height:20px;color:var(--gold-600)}
.fg .coop-hd h2 {font-size:21px;font-weight:700;color:#fff}
.fg .coop p.lede {margin:0 0 20px;font-size:14.5px;color:#c5cabd}
.fg .coop-links {display:flex;flex-wrap:wrap;gap:10px 34px}
.fg .coop-links a {display:flex;align-items:baseline;gap:8px;padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.16);flex:1 1 240px}
.fg .coop-links a:hover {border-bottom-color:var(--gold-600)}
.fg .coop-links b {font-size:15.5px;font-weight:700}
.fg .coop-links span {font-size:12.5px;color:#a8b2a3}
.fg .coop-links .ar {margin-left:auto;color:var(--gold-600)}

/* ── 푸터 ──────────────────────────────────────────────────────── */
.fg .foot {background:var(--green-900);color:#a8b2a3;font-size:14px;margin-top:52px}
.fg .foot .wrap {display:grid;grid-template-columns:2fr 3fr;gap:30px;padding:36px 20px 30px}
.fg .fcols {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.fg .foot h4 {color:#fff;font-size:14.5px;margin:0 0 12px;font-weight:700;font-family:var(--font-body)}
.fg .foot a {display:block;padding:3px 0;font-size:13.5px}
.fg .foot a:hover {color:#fff}
.fg .foot .biz {font-size:12.5px;line-height:1.85}
.fg .foot .flogo {display:flex;align-items:center;gap:9px;margin-bottom:12px}
.fg .foot .flogo .mark {width:30px;height:30px;border-radius:7px;background:var(--green-800);
  display:flex;align-items:center;justify-content:center;color:var(--gold-600)}
.fg .foot .flogo .mark .ico {width:18px;height:18px}
.fg .foot .flogo b {color:#fff;font-family:var(--font-head);font-size:16px}
.fg .foot .tel {font-size:20px;font-weight:700;color:#fff;white-space:nowrap;margin-top:4px}

/* 「전체 메뉴 보기」 — 모바일에서만 나온다 */
.fg .foot-toggle {display:none;padding:0 20px 18px}
.fg .foot-more {width:100%;min-height:46px;display:flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid rgba(255,255,255,.22);border-radius:var(--r-md);background:none;
  color:#e6ece2;font-size:14px;font-weight:700;font-family:inherit}
.fg .foot-more .ico {width:16px;height:16px;transform:rotate(90deg);transition:transform .18s}
.fg .foot.open .foot-more .ico {transform:rotate(-90deg)}

/* 법적 고지 — 접지 않는다 */
.fg .foot-legal {border-top:1px solid rgba(255,255,255,.12)}
.fg .foot-legal .wrap {display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 20px;font-size:12.5px}
.fg .foot-legal a {display:inline-flex;align-items:center;min-height:40px;padding:0;font-size:12.5px}
.fg .foot-legal b {color:#e6ece2}
.fg .foot-legal span {margin-left:auto;color:#8a9486}
/* ── 공통 크롬의 반응형 ───────────────────────────────────────────
   유틸바·헤더·카테고리바·푸터의 좁은 화면 규칙은 여기 한 곳에만 둔다.
   화면마다 각자의 media query 에 적어 두면 반드시 어긋난다 —
   구매자 마이페이지에서 .head-util 이 안 줄어 가로가 88px 넘쳤다.
   ───────────────────────────────────────────────────────────────── */
@media (max-width:1000px) {
  .fg .foot .wrap {grid-template-columns:1fr;gap:24px}
}
@media (max-width:720px) {
  .fg .util, .fg .search {display:none}
  .fg .head .wrap {padding:14px 20px;gap:10px}
  /* 로고 이름이 길어(작목반 유통지원센터) 우측 유틸 4개와 함께 390px 를 넘겼다.
     부제를 감추고 유틸은 아이콘만 남긴다 - 글자 크기는 건드리지 않는다. */
  .fg .logo .tx span {display:none}
  .fg .logo .tx b {font-size:16.5px}
  .fg .logo .mark {width:32px;height:32px}
  .fg .logo {flex:none}
  .fg .head-util {gap:14px}
  .fg .head-util a {font-size:0;gap:0;min-width:44px;justify-content:center}
  .fg .head-util .ico {width:23px;height:23px}
  .fg .badge-n {top:-5px;right:-4px}
  .fg .gnb a {padding:12px 13px;font-size:14px}
  /* 푸터가 모바일 세로 길이의 대부분을 먹고 있었다.
     링크 12개를 접고, 회사 정보와 법적 고지만 남긴다. */
  .fg .foot {margin-top:36px}
  .fg .foot .wrap {grid-template-columns:1fr;gap:14px;padding:24px 20px 6px}
  .fg .foot .biz {font-size:12px;line-height:1.7}
  .fg .foot h4 {font-size:13px;margin-bottom:4px}
  .fg .fcols {display:none;grid-template-columns:1fr 1fr;gap:12px 14px}
  .fg .foot.open .fcols {display:grid}
  .fg .foot-toggle {display:block}
  .fg .foot-legal .wrap {gap:14px;padding:10px 20px 14px}
  .fg .foot-legal span {margin-left:0;width:100%}

  /* 손가락 타깃 40px. 글자 크기는 그대로 두고 여백으로만 넓힌다.
     농업인 사용자층이라 여기서 아끼면 곧바로 오탭이 된다. */
  .fg .head-util a {min-height:44px;align-items:center}
  .fg .logo {min-height:44px}
  .fg .foot .wrap a {min-height:40px;display:flex;align-items:center;font-size:13px}
  .fg .foot-legal .wrap a {min-height:44px}
  /* 「시세 전체 →」 같은 섹션 머리 링크도 40px 을 지킨다 */
  .fg .sec-hd .more, .fg .panel .go, .fg .sec-hd a.more {min-height:40px;display:inline-flex;align-items:center}
  .fg .sec-hd .more, .fg .panel .go {min-height:40px;display:inline-flex;align-items:center}
}
@media (prefers-reduced-motion:reduce) {.fg * {animation:none!important;transition:none!important}}

/* 폰 폭(≤460px)에서는 로고 이름을 뺀다.
   "작목반 유통지원센터"(140px) + 유틸 4개를 44px 타깃으로 두면 408px 이라
   375px 화면의 본문 폭 320px 에 들어가지 않는다. 실제로 88px 넘쳤다.
   **타깃 크기를 줄이지 않는다** - 농업인 사용자층이라 손가락이 먼저다.
   심볼(녹색 벼 이삭)은 남으므로 브랜드는 유지된다. */
@media (max-width:460px) {
  .fg .logo .tx {display:none}
  .fg .head-util {gap:6px}
}

/* ── 반응형 ────────────────────────────────────────────────────── */
@media (max-width:1000px) {
  .fg .roles .wrap {grid-template-columns:1fr 1fr}
  .fg .role:nth-child(2n) {border-right:0}
  .fg .role {border-bottom:1px solid var(--line-soft)}
  .fg .grid {grid-template-columns:repeat(3,1fr)}
  .fg .panels {grid-template-columns:1fr}
  .fg .panel {border-right:0;border-bottom:1px solid var(--line-soft)}
  .fg .panel:last-child {border-bottom:0}
}
@media (max-width:720px) {

  /* 좁은 화면에서 사진과 글자를 겹치지 않는다 */
  .fg .hero-media {position:relative;inset:auto;width:100%;aspect-ratio:16/10;background-position:center 60%}
  .fg .hero-scrim {inset:auto;top:0;left:0;right:0;height:100%;
    background:linear-gradient(180deg,rgba(27,32,22,.3) 0%,rgba(27,32,22,.1) 45%,rgba(31,74,54,.55) 100%)}
  .fg .hero .wrap {padding:26px 20px 30px}
  .fg .hero-in {max-width:none}
  .fg .hero h1 {font-size:26px;letter-spacing:-.4px}
  .fg .hero p {font-size:15px;margin-top:12px}
  /* 전폭 버튼 3줄이 히어로 아래를 다 먹었다. 아이콘 박스 3칸 한 줄로 바꾼다. */
  .fg .hero-cta {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:20px}
  .fg .hero-cta .btn {flex:none;flex-direction:column;justify-content:center;gap:6px;
    min-height:76px;padding:12px 6px;font-size:12.5px;line-height:1.25;text-align:center;
    border-radius:var(--r-md)}
  .fg .hero-cta .ico {display:block;width:22px;height:22px}
  .fg .hero-cta .t-full {display:none}
  .fg .hero-cta .t-min {display:block}
  /* 시세 스트립의 「시세 전체 →」도 손가락 타깃 40px 을 지킨다 */
  .fg .rates .more {min-height:40px;display:inline-flex;align-items:center}

  .fg .roles .wrap {grid-template-columns:1fr}
  .fg .role {border-right:0}
  .fg .sec {padding:34px 0}
  .fg .sec-hd h2 {font-size:19px}
  .fg .grid {grid-template-columns:repeat(2,1fr);gap:20px 12px}
  .fg .pd-name {font-size:14.5px}
  .fg .supply {grid-template-columns:1fr}
  .fg .sup {grid-template-columns:96px 1fr;gap:12px}
  .fg .coop {padding:24px 22px;border-radius:var(--r-md)}
  .fg .coop-hd h2 {font-size:18px}
  .fg .coop-links a {flex:1 1 100%}
  .fg .foot .wrap {grid-template-columns:1fr;gap:22px;padding:26px 20px}
}
@media (prefers-reduced-motion:reduce) {.fg * {animation:none!important;transition:none!important}}