/* 저장소 쪽 보탬 — 시안이 다루지 않은 경우만 (2026-09-01)
 *
 * fg-home.css 는 시안에서 만들어 낸 자동 산출물이라 고치지 않는다.
 * 여기 있는 것은 **시안에 없던 상황**이다: 시안은 상품 4개에 사진을 박아 뒀지만
 * 우리는 실제 상품을 받아 오고, 그 대부분은 사진이 없다.
 * 아이콘으로 바꾸지 않고 「품목 이름 + 사진 준비중」 판으로 두는 것은 이식가이드 C-2 의 결정이다.
 */

/* 상품 그리드의 빈 썸네일 — 시안의 `.sup .im.is-empty` 와 같은 모양을 그리드 칸에도 준다 */
.fg .pd-thumb .is-empty {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: var(--green-100);
}
.fg .pd-thumb .is-empty .ph { font-size: 20px; font-weight: 800; color: var(--green-800); opacity: .4; }
.fg .pd-thumb .is-empty .ph-s { font-size: 11px; font-weight: 700; color: var(--ink-mute); }

/* 관리자 배너(SP-8) — 시안에는 없는 자리다. 히어로와 4주체 사이에서 튀지 않게 폭·여백만 맞춘다 */
.fg .wrap > .banners { margin: 18px 0 0; }

/* override: 시안 HTML 은 줄바꿈이 공백 한 칸으로 렌더되는데 JSX 는 그 공백을 버린다 —
   공급사명과 가격이 붙어 버려서 여기서 간격을 준다 */
.fg .sup .who { margin-right: 6px; }

/* ── 목록 + 필터 화면 부품 (2026-09-02) ─────────────────────────────
 * 이 레이아웃은 시안이 없다(인계.md §5 「목록·필터 화면 시안 — 이번 범위 밖」).
 * 그래서 **새 버튼·새 배지·새 색을 만들지 않고** 이미 있는 토큰과 폼 부품(.fld .lbl .inp .sel .btn)을
 * 담을 그릇만 여기서 만든다. 카테고리·검색 / 부자재 마켓 / 기획전이 같은 그릇을 쓴다.
 */
.fg .filterbar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 12px; align-items: end;
  background: var(--ivory-050); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px; margin-bottom: 18px;
}
.fg .filterbar .fld { margin: 0; }
.fg .filterbar .btn { white-space: nowrap; }

/* 탭 줄 — 좁은 화면에서는 카테고리바처럼 가로로 끌린다(§I-1 과 같은 규칙) */
.fg .tabs {
  display: flex; gap: 8px; margin-bottom: 18px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.fg .tabs::-webkit-scrollbar { display: none; }
.fg .tabs .tab {
  flex: none; padding: 9px 16px; min-height: 40px; display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: #fff; color: var(--ink-sub); font-weight: 700; font-size: 14px; text-decoration: none;
}
.fg .tabs .tab:hover { border-color: var(--green-600); color: var(--green-800); }
.fg .tabs .tab.on { background: var(--green-800); border-color: var(--green-800); color: #fff; }

/* 목록 머리 — 「N건」과 정렬이 나란히 */
.fg .listhead {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
}
.fg .listhead .cnt { font-weight: 800; color: var(--green-800); }
.fg .listhead .sub { color: var(--ink-mute); font-size: 14px; }

/* 페이지 번호 — 링크 수는 데이터 양과 무관하다(_Paging.tsx) */
.fg .paging { display: flex; gap: 6px; justify-content: center; align-items: center; margin: 28px 0 8px; }
.fg .paging a, .fg .paging span {
  min-width: 40px; min-height: 40px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; color: var(--ink-sub); font-weight: 700; text-decoration: none;
}
.fg .paging span { border-color: transparent; background: none; }
.fg .paging a:hover { border-color: var(--green-600); color: var(--green-800); }
.fg .paging a.on { background: var(--green-800); border-color: var(--green-800); color: #fff; }

/* ── 상품 상세 (2026-09-02) ────────────────────────────────────────
 * 시안이 없는 화면이라 부품(.grid2 .card .dl .tbl .badge)으로 짜고,
 * 사진 자리와 값 표시만 여기서 준다. 새 버튼·배지·색은 만들지 않았다.
 */
.fg .pdview {
  aspect-ratio: 1/1; border-radius: var(--r-md); overflow: hidden;
  background: var(--green-100); display: flex; align-items: center; justify-content: center;
}
.fg .pdview img { width: 100%; height: 100%; object-fit: cover; }
.fg .pdview .is-empty {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(155deg, var(--green-100), var(--ivory));
}
.fg .pdview .is-empty .ph { font-size: 34px; font-weight: 800; color: var(--green-800); opacity: .4; }
.fg .pdview .is-empty .ph-s { font-size: 13px; font-weight: 700; color: var(--ink-mute); }

.fg .badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 4px; }
.fg .card .price { font-size: 26px; font-weight: 800; color: var(--green-900); margin: 8px 0 14px; }
.fg .card .price small { font-size: 14px; font-weight: 600; color: var(--ink-mute); }

/* 담기·찜 줄 — 버튼은 부품 그대로, 줄만 만든다 */
.fg .buybox { margin-top: 16px; }
.fg .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.fg .revphotos { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.fg .revphotos img {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: var(--r-xs); border: 1px solid var(--line);
}

@media (max-width: 720px) {
  .fg .card .price { font-size: 22px; }
}

/* override: ⚠ 시안 산출물의 `.dl` 이 `grid-template-columns: auto 1fr` 이다.
 *   1fr 칸의 min-width 가 auto 라 **내용만큼 늘어난다** — 이식가이드 §3 이 「하지 말 것」 첫 줄에
 *   적어 둔 바로 그 함정이고, 상품 상세 390px 에서 가로가 34px 넘쳤다.
 *   생성 산출물은 고치지 않는다(다음 생성에서 사라진다) — 여기서 칸만 바로잡는다. */
.fg .dl { grid-template-columns: auto minmax(0, 1fr); }

/* 기획전 목록 — 작목반 링크 줄(.coop-links)과 같은 문법을 쓰되 짙은 바탕이 아니다 */
.fg .evlist { background: none; }

/* 장바구니·주문서 — 표(넓은 쪽) + 합계(좁은 쪽) */
.fg .cartlayout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.fg .summary {
  background: var(--ivory-050); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 18px; position: sticky; top: 18px;
}
.fg .summary .srow { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14.5px; }
.fg .summary .srow.total {
  border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px;
  font-weight: 800; font-size: 16px;
}
.fg .summary .srow.total .v { color: var(--green-900); font-size: 20px; }
.fg .summary .btn { margin-top: 10px; }
@media (max-width: 1000px) {
  .fg .cartlayout { grid-template-columns: minmax(0, 1fr); }
  .fg .summary { position: static; }
}

/* 장바구니 개수 배지 — 아이콘 위에 겹친다.
   그냥 두면 아이콘과 「장바구니」 사이에 끼어 글자를 아래로 밀어낸다(세로 정렬 메뉴라서). */
.fg .head-util a.cartn { position: relative; }
.fg .head-util a.cartn em {
  position: absolute; top: -4px; left: 50%; margin-left: 4px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold-600); color: #fff;
  border-radius: var(--r-pill); font-size: 11px; font-weight: 800; font-style: normal;
}

/* 폼 두 칸 배치 — 주문서처럼 항목이 많은 화면 */
.fg .fldgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.fg .fldgrid .fld { margin: 0; }
.fg .radios { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 4px; }
.fg .radios label { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: 14.5px; }
.fg .req { color: var(--gold-600); }
.fg .sronly {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 주문 단계 — 가로 한 줄. 세로로 쌓이면 모바일에서 화면 하나를 통째로 먹는다(라운드 4에서 고친 자리) */
.fg .steps { display: flex; gap: 6px; margin: 0 0 18px; overflow-x: auto; scrollbar-width: none; }
.fg .steps::-webkit-scrollbar { display: none; }
.fg .steps .st {
  flex: none; padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--ivory-050); border: 1px solid var(--line);
  color: var(--ink-mute); font-size: 13.5px; font-weight: 700; white-space: nowrap;
}
.fg .steps .st.on { background: var(--green-800); border-color: var(--green-800); color: #fff; }
/* ⚠ 옛 common.css 의 `.steps .st::before` 가 번호 동그라미를, `::after` 가 연결선을 그린다.
     클래스 규칙만 덮으면 그 가짜 요소들이 위에 그대로 남는다 — 새 디자인 위에 옛 디자인이 겹친다. */
.fg .steps .st::before, .fg .steps .st::after { content: none; }

@media (max-width: 720px) {
  .fg .fldgrid { grid-template-columns: minmax(0, 1fr); }
}

/* override: ⚠ 시안은 좁은 화면에서 유틸바를 통째로 감춘다(`.fg .util {display:none}`).
 *   그러면 스토어에서 **회원가입으로 갈 길이 하나도 남지 않는다** —
 *   2026-08-10 검수에서 똑같이 겪고 고친 자리라, 그때 결론을 새 셸에도 그대로 적용한다:
 *   로그인·회원가입(로그인 상태면 마이·로그아웃)만 남기고 나머지는 감춘다.
 *   관리자 링크(.adm)는 계속 감춘다 — 일반 사용자에게 보일 이유가 없다. */
@media (max-width: 760px) {
  /* 남길 링크는 `.keep` 이 정한다 — 옛 규칙(.utilbar a:not(.keep))이 이미 그 일을 한다.
     여기서는 시안이 통째로 감춘 바를 **다시 보이게만** 한다. 표식을 새로 만들면 둘이 어긋난다. */
  .fg .util { display: block; }
  .fg .util .wrap { justify-content: center; gap: 14px; height: 34px; }
}

/* ── 옛 본문 클래스를 새 디자인으로 잇는다 (2026-09-03 · 5단계-B) ──────────────
 * `(front)` 63화면의 **셸**은 새 것으로 바꿨지만 본문 마크업은 그대로다.
 * 63개 파일을 다시 쓰는 대신, 옛 구조 클래스가 **부품 사전의 언어로 그려지게** 한다.
 * (.kpi/.card/.tbl/.note/.inp 처럼 이름이 같은 것들은 fg-parts 가 이미 이긴다 —
 *  여기 있는 것은 새 디자인에 짝이 없는 이름들이다.)
 * ⚠ 새 색·새 버튼을 만들지 않는다. 전부 기존 토큰과 부품 규칙을 가리킨다.
 */

/* 화면 제목 줄 — 시안의 .phead 와 같은 모양 */
.fg .pagehead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.fg .pagehead h1 { font-size: 25px; font-weight: 700; letter-spacing: -.5px; }
.fg .pagehead .act { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* 옛 그리드 — 칸이 내용만큼 늘어나지 않게 minmax(0,1fr). 좁은 칸에서 표가 잘리던 원인이다 */
.fg .grid.c2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.fg .grid.c3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.fg .grid.c4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }

/* 카드 목록 — .item 은 시안의 .kpi 와 같은 판 위에 제목·설명·꼬리표 */
.fg .cardlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fg .cardlist.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fg .cardlist.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fg .cardlist .item {
  display: block; min-width: 0; text-decoration: none; color: inherit;
  background: var(--ivory-050); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px 18px;
}
.fg a.item:hover { border-color: var(--green-600); box-shadow: var(--sh-1); }
.fg .item .t { font-size: 15.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fg .item .d { margin-top: 6px; font-size: 14px; color: var(--ink-sub); line-height: 1.6; }
.fg .item .meta { margin-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-mute); }

/* 옛 버튼·안내 변형 → 부품 사전의 것으로 */
.fg .btn.block { width: 100%; }
.fg .btn.sm { font-size: 13.5px; padding: 0 14px; min-height: 40px; }
.fg .note.green { background: var(--green-100); color: var(--green-800); border-color: #cfe0c7; }
.fg .note.gold { background: var(--gold-100); color: #7d6224; border-color: #ecdcb8; }
.fg .note.clay { background: #f7e7dc; color: #8f4520; border-color: #eed4c2; }
/* 안내 문구는 대개 한 덩어리 글이다 — 아이콘이 없으면 flex 가 줄을 쪼갠다 */
.fg .note:not(:has(> .ico)):not(:has(> svg)) { display: block; }

@media (max-width: 1000px) {
  .fg .grid.c3, .fg .grid.c4, .fg .cardlist.c3, .fg .cardlist.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .fg .grid.c2, .fg .grid.c3, .fg .grid.c4,
  .fg .cardlist, .fg .cardlist.c3, .fg .cardlist.c4 { grid-template-columns: minmax(0, 1fr); }
}

/* ⚠ 좁은 칸(2·3열 카드) 안의 표는 기본 `.tblwrap`(min-width 520px)이면 굴러서 열이 잘린다 —
 *   이식가이드 §3 이 「좁은 카드에는 .tblwrap.tight」라고 적어 둔 자리다.
 *   63개 화면의 마크업을 고치는 대신, **좁은 칸 안에 있을 때만** 좁은 규격을 적용한다. */
.fg .cardlist .tblwrap .tbl,
.fg .grid.c2 .tblwrap .tbl,
.fg .grid.c3 .tblwrap .tbl,
.fg .grid.c4 .tblwrap .tbl { min-width: 360px; }
.fg .cardlist .tblwrap .tbl th, .fg .cardlist .tblwrap .tbl td,
.fg .grid.c2 .tblwrap .tbl th, .fg .grid.c2 .tblwrap .tbl td,
.fg .grid.c3 .tblwrap .tbl th, .fg .grid.c3 .tblwrap .tbl td,
.fg .grid.c4 .tblwrap .tbl th, .fg .grid.c4 .tblwrap .tbl td { padding: 11px 10px; }

/* ⚠ `.cbody` 를 한 줄로 접어도 본문이 내용만큼 늘어난다 — 격자 **칸**을 좁히는 것과
 *   그 **안의 요소**가 줄어드는 것은 다른 일이다(칸의 min-width 기본값이 auto).
 *   이식가이드 §3 이 「하지 말 것」 첫 줄에 적어 둔 그 함정이고, 표가 든 화면에서 390px 가로가 넘쳤다. */
/* 격자 칸 안의 요소는 min-width 기본값이 auto 라 내용만큼 늘어난다(이식가이드 §3 첫 줄).
   칸을 좁히는 것과 그 안이 줄어드는 것은 다른 일이다 — 표가 든 화면에서 390px 가로가 넘쳤다. */
.fg .cbody > * { min-width: 0; }

/* override: ⚠ 시안 산출물이 헤더 검색칸에 `outline:0` 을 주고 **초점일 때를 되돌려 놓지 않았다**
 *   (`.fg .search input {outline:0}`). 키보드로 탭하면 지금 어디에 있는지 보이지 않는다.
 *   테두리를 안쪽으로 그려(offset 음수) 둥근 칸 밖으로 삐져나오지 않게 한다. */
.fg .search input:focus-visible { outline: 3px solid var(--gold-600); outline-offset: -3px; }

/* ── 관리자 콘솔 (2026-09-03 · 5단계-B②) ────────────────────────────
 * 시안에 관리자 화면은 없다. 인계.md §3 표대로 **부자재 콘솔 틀**(fg-console)을 쓰되,
 * 관리자만의 두 가지를 여기서 보탠다: 메뉴 64개를 접는 아코디언 · 좁은 화면 서랍.
 * (`.snav` 의 좁은 화면 기본 동작은 가로 스크롤 한 줄인데, 64개에는 쓸 수 없다.)
 */
/* 상단 바의 로그아웃은 링크가 아니라 버튼이다 — 옆 링크들과 같은 모양으로 */
.fg .ctop nav .lo {
  display: flex; align-items: center; gap: 6px; padding: 0 12px; min-height: 40px;
  border: 1px solid rgba(255,255,255,.3); border-radius: var(--r-sm);
  background: none; font-size: 13.5px; font-weight: 700; color: #dbe5d6; cursor: pointer;
}
.fg .ctop nav .lo:hover { background: rgba(255,255,255,.12); color: #fff; }
.fg .ctop nav .lo .ico { width: 17px; height: 17px; }

/* 서랍 여는 단추 — 넓은 화면에는 필요 없다(메뉴가 늘 보인다) */
.fg .cburger { display: none; }
.fg .snav .hd .adclose { display: none; }

/* 메뉴 접기 — 대분류 단추 + 그 아래 항목 */
.fg .snav .grpbtn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 16px; min-height: 44px; border: 0; background: none; cursor: pointer;
  font-size: 12px; font-weight: 800; color: var(--ink-mute); letter-spacing: .3px; text-align: left;
}
.fg .snav .grpbtn:hover { background: var(--green-050); color: var(--green-800); }
.fg .snav .grpbtn .chev { width: 14px; height: 14px; transform: rotate(90deg); transition: transform .15s; }
.fg .snav .grpwrap.open .grpbtn { color: var(--green-800); }
.fg .snav .grpwrap.open .grpbtn .chev { transform: rotate(-90deg); }
/* ★ 접힌 그룹도 DOM 에는 남긴다 — 조건부 렌더로 빼면 접근성 도구가 못 본다(게이트가 잡은 적 있다) */
.fg .snav .grpitems.collapsed { display: none; }
.fg .snav .grpwrap + .grpwrap { border-top: 1px solid var(--line); }

@media (max-width: 1000px) {
  /* 좁은 화면: 메뉴는 서랍으로. 64개를 가로 한 줄로 끌게 하면 못 찾는다 */
  .fg .cburger {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: none; margin-right: 4px;
    border: 1px solid rgba(255,255,255,.3); border-radius: var(--r-sm);
    background: none; color: #dbe5d6; cursor: pointer;
  }
  .fg .cburger .ico { width: 18px; height: 18px; }
  .fg.adminshell .snav {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60; width: 82%; max-width: 320px;
    display: block; overflow-y: auto; border-radius: 0; transform: translateX(-102%);
    transition: transform .2s; box-shadow: var(--sh-2);
  }
  .fg.adminshell.navopen .snav { transform: none; }
  /* override: 좁은 화면 서랍 머리 — 닫기 버튼 자리를 만든다(시안에 서랍이 없다) */
  .fg .snav .hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .fg .snav .hd .adclose {
    display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff;
    color: var(--ink-sub); cursor: pointer;
  }
  .fg .adback { position: fixed; inset: 0; z-index: 55; background: rgba(27,32,22,.42); }
  /* override: 좁은 화면에서 콘솔 머리말 글자를 접는다 */
  .fg .ctop .kind, .fg .ctop nav a span { display: none; }
}

/* 옛 필터바의 `.field` 는 `min-width:150px` 이라 좁은 화면에서 칸을 뚫는다.
   부품 사전에는 없는 이름이라 여기서 잇는다 — 폼 부품(.inp .sel)은 그대로 쓴다. */
.fg .filterbar .field { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fg .filterbar .field > label { font-size: 13px; font-weight: 700; color: var(--ink-sub); }
.fg .filterbar .field .inp, .fg .filterbar .field .sel { width: 100%; }
@media (max-width: 720px) {
  .fg .filterbar { grid-template-columns: minmax(0, 1fr); }
}

/* ── 셸 교체 때 정의가 함께 사라진 부품들 (2026-09-04) ────────────────────
 * 디자인 이식으로 `(front)`·store·vendor 셸을 갈아 끼우면서 옛 `front.css` 를 더 이상
 * 불러오지 않게 됐는데, 그 파일에만 정의가 있던 클래스를 쓰는 화면이 그대로 남아 있었다.
 * 화면은 200 이고 글자도 다 있어서 깨진 채로 넉 달을 갔다 — PC 로그인 화면이 시연에서 드러났다.
 * (게이트 css-guard 가 이 부류를 이제 정적으로 잡는다)
 *
 * 새 색·새 버튼을 만들지 않는다. 토큰과 부품 사전(.card .btn .fld .inp .badge)의 언어로 잇는다.
 */

/* 로그인·계정 찾기·비밀번호 재설정 — 메뉴가 없는 좁은 단일 카드 화면 */
.fg .authwrap, .fg .authbox { max-width: 460px; margin: 44px auto 72px; padding: 0 20px; }
.fg .authwrap > .card, .fg .authbox > .card { padding: 28px; background: #fff; }
.fg .authwrap > .note, .fg .authbox > .note { margin-top: 16px; }

.fg .authlogo { text-align: center; margin-bottom: 22px; }
.fg .authlogo img { height: 48px; width: auto; margin: 0 auto 10px; display: block; }
.fg .authlogo b {
  display: block; font-family: var(--font-head); font-size: 21px; color: var(--green-800);
}
.fg .authlogo span { display: block; font-size: 13px; color: var(--ink-mute); margin-top: 4px; }
/* 화면에서는 작은 라벨, 스크린리더에게는 h1 (P1 검수) */
.fg .authlogo .authtitle {
  font-size: 12.5px; font-weight: 800; color: var(--ink-mute);
  letter-spacing: .08em; margin: 0 0 6px; font-family: var(--font-body);
}

/* 유형 선택 — 분절 컨트롤. 탭 대상은 좁은 화면에서도 44px 이상이어야 한다 */
.fg .authtabs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line); border-radius: var(--r-sm);
  overflow: hidden; margin-bottom: 20px;
}
.fg .authtabs button {
  min-height: 46px; padding: 10px 6px; border: 0; border-right: 1px solid var(--line);
  background: var(--ivory-050); font: 700 13.5px var(--font-body); color: var(--ink-sub);
  cursor: pointer;
}
.fg .authtabs button:last-child { border-right: 0; }
.fg .authtabs button:hover { background: var(--green-050); color: var(--green-800); }
.fg .authtabs button.on { background: var(--green-800); color: #fff; }
.fg .authtabs button:focus-visible { outline: 3px solid var(--gold-600); outline-offset: -3px; }

/* SNS 로그인 — 브랜드 색은 카카오·네이버가 정한 것이라 토큰으로 바꾸지 않는다 */
.fg .snsrow { display: grid; gap: 8px; margin-top: 14px; }
.fg .snsbtn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: #fff;
  font: 700 14px var(--font-body); color: var(--ink); cursor: pointer;
}
.fg .snsbtn.kakao { background: #FEE500; border-color: #FEE500; color: #191600; }
.fg .snsbtn.naver { background: #03C75A; border-color: #03C75A; color: #fff; }
.fg .snsbtn:disabled { opacity: .55; cursor: not-allowed; }

.fg .authlinks {
  display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 18px; font-size: 13.5px; color: var(--ink-mute);
}
.fg .authlinks a { color: var(--ink-sub); font-weight: 700; padding: 6px 4px; }
.fg .authlinks a:hover { color: var(--green-800); text-decoration: underline; }

/* 회원가입 유형 선택 — 3장의 진입 카드 */
.fg .actors { display: grid; gap: 14px; margin: 22px 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fg .actorcard {
  display: block; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--green-800);
  border-radius: var(--r-md); box-shadow: var(--sh-1); padding: 22px; transition: .15s;
  text-decoration: none; color: inherit;
}
.fg .actorcard:hover { box-shadow: var(--sh-2); transform: translateY(-3px); }
.fg .actorcard.buyer { border-top-color: var(--gold-600); }
.fg .actorcard.vendor { border-top-color: var(--green-600); }
.fg .actorcard .ico { width: 26px; height: 26px; color: var(--green-600); }
.fg .actorcard b {
  display: block; font-family: var(--font-head); font-size: 17px;
  color: var(--green-800); margin: 10px 0 6px;
}
.fg .actorcard p { font-size: 13.5px; color: var(--ink-sub); line-height: 1.6; min-height: 62px; margin: 0; }
.fg .actorcard .go { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 800; color: var(--green-800); }
@media (max-width: 860px) { .fg .actors { grid-template-columns: minmax(0, 1fr); } }

/* 진행 단계 줄 — 주문·출금·심사가 같은 부품을 쓴다 */
.fg .flowline {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--ivory-050); border: 1px dashed var(--line); border-radius: var(--r-sm);
  padding: 12px 16px; margin-bottom: 16px; font-size: 13px; font-weight: 700; color: var(--ink-mute);
}
.fg .flowline .fstep {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 14px;
  color: var(--ink-sub);
}
.fg .flowline .fstep.on { background: var(--green-800); border-color: var(--green-800); color: #fff; }
.fg .flowline .arr { color: var(--green-600); }

/* 그린페이 지갑 카드 */
.fg .wallet {
  position: relative; overflow: hidden; margin-bottom: 18px; padding: 26px;
  border-radius: var(--r-md); box-shadow: var(--sh-2); color: #fff;
  background: linear-gradient(120deg, var(--green-900), var(--green-600));
}
.fg .wallet .wl { font-size: 12.5px; font-weight: 800; letter-spacing: .08em; color: var(--green-100); }
.fg .wallet .wv { font-family: var(--font-head); font-size: 38px; font-weight: 700; margin: 8px 0 2px; }
.fg .wallet .wm { font-size: 13px; opacity: .82; }
.fg .wallet .wact { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.fg .wallet .wact .btn { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.34); color: #fff; }
.fg .wallet .wact .btn:hover { background: rgba(255,255,255,.24); }

/* 상품 격자 — 스토어 카드와 같은 모양이지만 이 화면들은 옛 이름을 쓴다 */
.fg .prods { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.fg .prod {
  display: block; min-width: 0; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-1); padding: 14px;
  text-decoration: none; color: inherit; transition: .15s;
}
.fg .prod:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.fg .prod * { min-width: 0; }
.fg .prod .pn {
  font-size: 14.5px; font-weight: 700; color: var(--ink); margin-top: 6px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.fg .prod .po { font-size: 12.5px; color: var(--ink-mute); overflow-wrap: anywhere; }
.fg .prod .pp {
  font-family: var(--font-head); font-size: 18px; font-weight: 700;
  color: var(--green-800); margin-top: 4px;
}
.fg .prod .pp small { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--ink-mute); }
.fg .prod .ptag { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }

/* 공지·알림 목록 */
.fg .noticelist, .fg .notilist { display: grid; gap: 10px; }
.fg .noticelist .notice, .fg .notilist > li {
  display: block; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: var(--r-sm); padding: 14px 16px; text-decoration: none; color: inherit;
}
.fg .noticelist .notice:hover { border-color: var(--green-600); }
.fg .notilist > li.unread { border-left-color: var(--green-600); background: var(--green-050); }

/* 팝업 창 — 관리자가 등록한 팝업(라운드 2) */
.fg .modalhd {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--line); font-weight: 800;
}
.fg .modalbd { padding: 18px; }
.fg .modalft {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 12px 18px; border-top: 1px solid var(--line); background: var(--ivory-050);
}

/* ★ 작목반 홈의 .todo/.mk/.week/.mstat 은 여기서 손대지 않는다 —
   시안 산출물 fg-group.css 가 이미 갖고 있고, fg-local.css 가 그 뒤에 로드돼
   같은 특이도에서 이쪽이 이겨 **진짜 규칙을 덮는다**(2026-09-04 에 그렇게 레이아웃을 깼다).
   자동 생성물이 가진 클래스는 여기서 다시 정의하지 않는다 — css-guard CSS-4 가 지킨다. */

/* 부가 설명 글자 — 관리자 로그·업체 상세가 쓰는데 어느 시안에도 없다.
   `.fg .s`(0,2,0)라 fg-group 의 `.fg .todo .s`(0,3,0)를 덮지 않는다. */
.fg .s { font-size: 12.5px; color: var(--ink-mute); }

/* 자료실·사진첩의 인라인 폼 줄 */
.fg .frow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.fg .frow .flabel { flex: none; min-width: 92px; font-size: 13.5px; font-weight: 700; color: var(--ink-sub); }
.fg .frow .finput { flex: 1 1 220px; min-width: 0; }
.fg .frow .red { color: var(--up); }

/* 문의 답변 행 — 상품 문의 상세와 같은 모양(U1) */
.fg .answer-row > td { background: var(--green-050); white-space: pre-wrap; }

/* 통계 숫자 짝 */
.fg .kv { font-family: var(--font-head); font-size: 26px; font-weight: 700; color: var(--green-800); }
.fg .kl { font-size: 12.5px; font-weight: 700; color: var(--ink-mute); }
.fg .btnrow { display: flex; gap: 8px; flex-wrap: wrap; }

/* 푸터 브랜드 칸 · 전체 메뉴 보기 라벨 */
.fg .fbrand { display: grid; gap: 8px; }
.fg .lb { font-weight: 700; }

/* 화면에는 없고 스크린리더에게만 읽히는 글자 */
.fg .sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 인증 화면 모바일 보정 (2026-09-05) — 작은 폰에서 로그인 버튼이 첫 화면 밖이었다.
 * iPhone SE(375x667) 기준 로그인 버튼 top 686 > 667. 비밀번호를 치고 나서 **버튼을 찾으려면
 * 스크롤**해야 했다(실제 폰은 주소창이 더 먹으니 더 나쁘다).
 * 머리말 블록과 카드 여백을 좁혀 첫 화면 안으로 들인다 — 넓은 화면은 그대로 둔다.
 * 탭 대상은 36px 이상으로: 「아이디 찾기·비밀번호 찾기·회원가입」은 이 화면의 **복구 경로**다. */
@media (max-width: 760px) {
  .fg .authwrap, .fg .authbox { margin: 18px auto 48px; }
  .fg .authwrap > .card, .fg .authbox > .card { padding: 20px 18px; }
  .fg .authlogo { margin-bottom: 14px; }
  .fg .authlogo img { height: 40px; margin-bottom: 6px; }
  .fg .authlogo b { font-size: 19px; }
  .fg .authlogo .authtitle { margin-bottom: 4px; }
  .fg .authtabs { margin-bottom: 16px; }
  .fg .authlinks { margin-top: 14px; }
  /* 손가락 대상 — 선언이 아니라 실제 렌더 높이로 지킨다(2026-08-10 규칙) */
  .fg .authlinks a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 6px; }
  /* ⚠ 보이는 링크(.keep)에만 건다 — .fg .util a 로 걸면 좁은 화면에서 링크를 감추는
     규칙(.utilbar a:not(.keep){display:none})을 덮어 관리자 링크까지 되살아난다. */
  .fg .util a.keep { min-height: 40px; display: inline-flex; align-items: center; }
}

/* 로그인 화면 — 다른 회원 유형의 메뉴를 눌러 왔을 때의 안내 (2026-09-16 PO 육안 검수)
   구매자로 로그인한 채 「작목반」을 누르면 말없이 로그인 화면이 떴다. 여기가 누구의 메뉴이고
   지금 누구로 로그인돼 있고 무엇을 하면 되는지를 카드 위에서 먼저 말한다. */
.fg .loginnotice { margin: 0 0 16px; line-height: 1.6; }
.fg .loginnotice p { margin: 0 0 6px; }
.fg .loginnotice p:last-child { margin-bottom: 0; }
.fg .loginnotice-act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px !important; }
/* 안내 상자 안의 글 링크 — 본문과 같은 색이라 눌리는 줄 몰랐다(캡처로 확인) */
.fg .loginnotice a:not(.btn) { text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }