@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════
   들녘상회 — 산지 직송
   조판 규칙 하나: **장부처럼 쓴다.**
   이 업종에서 사는 사람이 알고 싶은 것은 «분위기» 가 아니라 산지·중량·값·발송일이다.
   그래서 첫 화면이 «표» 이고, 숫자는 자리를 맞춘 모노로 찍는다.

   ☠ **사진 머리그림을 넣지 말 것.** 앞의 여섯 템플릿이 전부 그 형태라 서로 닮아 보였다.
      이 템플릿은 거기서 «일부러» 갈라놓은 것이다.
   ⚠ 한글 최소 12px · 입력칸 16px(iOS 확대 방지)
   ⚠ WooCommerce 자체 CSS 위에 얹는다 — Woo 표를 통째로 덮어쓰지 말 것.
   ══════════════════════════════════════════════════════════════ */

:root{
  --paper:#FCFBF7;      /* 누런 기 도는 종이 */
  --card:#FFFFFF;
  --ink:#16150F;        /* 먹 */
  --ink-2:#454236;
  --ink-3:#68644F;      /* 종이 위 4.5:1 을 넘긴 값 — 더 밝히지 말 것 */
  --line:#DCD8C8;       /* 헤어라인 */
  --line-2:#C6C1AC;
  --seal:#A63A24;       /* 도장 붉은빛 — 강조는 이것 하나뿐 */
  --seal-soft:#F5E7E2;
  --ok:#3F6B43;
  --wrap:1120px;
  --sans:'IBM Plex Sans KR',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --mono:'IBM Plex Mono','IBM Plex Sans KR',ui-monospace,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.8;word-break:keep-all;overflow-x:hidden;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.4;font-weight:700;text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--seal);outline-offset:2px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.sr{position:absolute;left:-9999px}

.fm-wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ── 머리 ─────────────────────────────────────────────────── */
.fm-top{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--ink)}
.fm-top .fm-wrap{display:flex;align-items:center;gap:22px;height:70px}
.fm-bi{display:flex;flex-direction:column;line-height:1.2;margin-right:auto}
.fm-bi b{font-size:21px;letter-spacing:-.02em}
.fm-bi small{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.fm-gnb{display:flex;gap:24px}
.fm-gnb a{font-size:15px;color:var(--ink-2);padding:4px 0;border-bottom:2px solid transparent}
.fm-gnb a:hover{color:var(--ink)}
.fm-gnb a.on{color:var(--seal);border-bottom-color:var(--seal);font-weight:500}
.fm-cart{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:500;
  padding:9px 14px;border:1px solid var(--ink)}
.fm-cart .n{font-family:var(--mono);font-size:12.5px;background:var(--ink);color:var(--paper);
  min-width:20px;height:20px;display:grid;place-items:center;padding:0 5px}
.fm-cart:hover{background:var(--ink);color:var(--paper)}
.fm-cart:hover .n{background:var(--paper);color:var(--ink)}
.fm-burger{display:none;width:44px;height:44px;background:none;border:0;padding:11px;cursor:pointer}
.fm-burger i{display:block;height:1.5px;background:var(--ink);margin:5px 0}

/* ── 드로어 ───────────────────────────────────────────────── */
.fm-drawer{position:fixed;inset:0;z-index:120}
.fm-drawer[hidden]{display:none}
.fm-dw-back{position:absolute;inset:0;background:rgba(22,21,15,.5)}
.fm-dw-panel{position:absolute;top:0;right:0;bottom:0;width:min(86vw,300px);background:var(--paper);
  padding:26px 22px;overflow-y:auto}
.fm-dw-x{position:absolute;top:12px;right:14px;background:none;border:0;font-size:28px;line-height:1;
  color:var(--ink);cursor:pointer;width:44px;height:44px}
.fm-dw-panel ul{margin-top:34px;border-top:1px solid var(--line)}
.fm-dw-panel li{border-bottom:1px solid var(--line)}
.fm-dw-panel a{display:block;padding:15px 0;font-size:17px}

/* ── 「오늘 나가는 것」 띠 — 머리그림 «대신» 이다 ──────────── */
.fm-bar{border-bottom:1px solid var(--ink);background:var(--card)}
.fm-bar .fm-wrap{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.fm-bar .d{font-family:var(--mono);font-size:14px;color:var(--ink-2);letter-spacing:.02em}
.fm-bar .d em{font-style:normal;color:var(--ink-3);margin-left:3px}
.fm-bar b{font-size:17px;letter-spacing:-.01em}
.fm-bar .s{font-size:14px;color:var(--ink-3)}
.fm-bar-today b{color:var(--ok)}
.fm-bar-today{background:#F3F7F2}
.fm-bar-tomorrow b{color:var(--seal)}
.fm-bar-rest{background:var(--seal-soft)}
.fm-bar-rest b{color:var(--seal)}

/* ── 마디 ─────────────────────────────────────────────────── */
.fm-sec{padding:52px 0}
.fm-sec + .fm-sec{border-top:1px solid var(--line)}
.fm-head{margin-bottom:26px}
.fm-head h1,.fm-head h2{font-size:clamp(23px,2.6vw,30px);letter-spacing:-.02em}
.fm-head p{margin-top:10px;font-size:15.5px;color:var(--ink-2);max-width:44em;line-height:1.85}
.fm-note{margin-top:16px;font-size:13.5px;color:var(--ink-3);line-height:1.8}

/* ── 장부 표 — 이 템플릿의 첫 화면 ────────────────────────── */
.fm-ledger{font-size:15px;border-top:2px solid var(--ink)}
.fm-ledger thead th{font-size:12.5px;font-weight:500;color:var(--ink-3);text-align:left;
  padding:10px 12px;border-bottom:1px solid var(--ink);white-space:nowrap;letter-spacing:.02em}
.fm-ledger td{padding:16px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.fm-ledger tr:hover td{background:var(--card)}
.fm-ledger .td-n a{display:flex;align-items:center;gap:14px}
.fm-ledger .ph{flex:0 0 62px}
.fm-ledger .ph img{width:62px;height:62px;object-fit:cover;border:1px solid var(--line)}
.fm-ledger .nm{display:block;font-weight:500}
.fm-ledger .nm em{display:block;font-style:normal;font-size:13.5px;color:var(--ink-3);
  font-weight:400;margin-top:3px;line-height:1.65}
.fm-ledger .td-o{color:var(--ink-2);white-space:nowrap}
.fm-ledger .td-w{color:var(--ink-2);white-space:nowrap;font-size:14px}
.fm-ledger .td-p{font-weight:600;white-space:nowrap}
.fm-ledger .th-p,.fm-ledger .td-p,.fm-ledger .th-w,.fm-ledger .td-w{text-align:right}
.fm-ledger .td-b{text-align:right;width:1%}
.fm-add{display:inline-block;padding:9px 16px;font-size:14px;font-weight:500;
  border:1px solid var(--ink);white-space:nowrap}
.fm-add:hover{background:var(--ink);color:var(--paper)}

/* ── 사진 카드 — «아래» 에 온다 ───────────────────────────── */
.fm-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fm-card .ph{aspect-ratio:4/3;overflow:hidden;background:var(--card);border:1px solid var(--line)}
.fm-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.fm-card:hover .ph img{transform:scale(1.03)}
.fm-card .bd{display:block;padding-top:12px;padding-bottom:6px}
.fm-card b{font-size:16px}
.fm-card .o{display:block;font-size:13.5px;color:var(--ink-3);margin-top:4px}

/* ── 규칙 세 칸 ───────────────────────────────────────────── */
/* ⚠ 앞 마디(사진 카드)와 «붙어» 한 덩어리로 읽혔다. 위쪽에 자리를 준다. */
.fm-rules{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--ink);margin-top:8px}
.fm-rules div{padding:22px;border-right:1px solid var(--line)}
.fm-rules div:last-child{border-right:0}
.fm-rules b{display:block;font-size:12.5px;color:var(--ink-3);font-weight:500;letter-spacing:.04em}
.fm-rules span{display:block;margin-top:8px;font-size:20px;font-weight:600;font-family:var(--mono)}
.fm-rules em{display:block;margin-top:6px;font-style:normal;font-size:13.5px;color:var(--ink-3)}

/* ── 안내 문서 ────────────────────────────────────────────── */
.fm-doc{max-width:44em}
.fm-doc .lead{font-size:17px;line-height:1.9;color:var(--ink-2);margin-bottom:30px}
.fm-doc h2{font-size:18px;margin:34px 0 12px;padding-top:16px;border-top:1px solid var(--line)}
.fm-doc h2:first-child{border-top:0;padding-top:0;margin-top:0}
.fm-doc p{font-size:15.5px;color:var(--ink-2);line-height:1.9}
.fm-list li{position:relative;padding-left:16px;margin-top:9px;font-size:15px;color:var(--ink-2);line-height:1.85}
.fm-list li::before{content:"·";position:absolute;left:4px;color:var(--seal);font-weight:700}
.fm-tbl{border-top:1px solid var(--ink);margin:14px 0}
.fm-tbl .r{display:grid;grid-template-columns:130px 1fr auto;gap:14px;
  padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
.fm-tbl .r b{font-weight:500}
.fm-tbl .r span{color:var(--ink-2)}
.fm-tbl .r em{font-style:normal;font-family:var(--mono);font-size:13px;color:var(--ink-3)}

/* ☠ WooCommerce 는 자기 «색 토큰» 으로 단추·값을 칠한다(기본이 보라색 #7f54b3).
   개별 선택자로 이기려 하면 계속 새는 곳이 생긴다 — **토큰 자체를 바꾼다.**
   실측: 상품 상세의 「장바구니」 단추만 보라색으로 남아 있었다. */
:root{
  --wc-primary:#16150F;        /* 단추 바탕 = 먹 */
  --wc-primary-text:#FCFBF7;
  --wc-secondary:#F0EEE4;
  --wc-secondary-text:#16150F;
  --wc-highlight:#A63A24;      /* 값·강조 = 도장 붉은빛 */
  --wc-highlight-text:#FFFFFF;
  --wc-content-bg:#FFFFFF;
  --wc-subtext:#68644F;
}

/* ── WooCommerce 위에 얹는 것 ─────────────────────────────
   ⚠ Woo 표를 통째로 덮지 않는다. 색·테두리·서체만 우리 것으로 맞춘다. */
.fm-woo{padding:44px 0 64px}
.fm-woo .woocommerce-products-header__title,
.fm-woo h1.product_title{font-size:clamp(23px,2.6vw,30px);letter-spacing:-.02em;margin-bottom:16px}
.fm-woo ul.products li.product .woocommerce-loop-product__title{font-size:16px;font-weight:500}
.fm-woo ul.products li.product .price{font-family:var(--mono);color:var(--ink);font-weight:600}
.fm-woo .button,.fm-woo button.button,.fm-woo input.button,.fm-woo a.button{
  background:var(--ink);color:var(--paper);border-radius:0;font-weight:500;
  font-family:var(--sans);padding:12px 20px}
.fm-woo .button:hover,.fm-woo a.button:hover{background:var(--seal);color:#fff}
/* ⚠ 상품 상세의 «담기» 단추는 Woo·테마가 따로 색을 준다(보라색이 그대로 나왔다).
   선택자를 한 칸 더 좁혀 우리 색으로 끌어온다. */
/* ⚠ `.woocommerce` 를 앞에 붙여 Woo 규칙과 «같은 무게 + 한 칸» 으로 만든다. */
.woocommerce .fm-woo button.single_add_to_cart_button,
.woocommerce .fm-woo a.button,
.woocommerce .fm-woo button.button,
.woocommerce .fm-woo input.button{background:var(--ink);color:var(--paper);
  border-radius:0;font-weight:600}
.woocommerce .fm-woo button.single_add_to_cart_button{padding:14px 26px}
.woocommerce .fm-woo button.single_add_to_cart_button:hover,
.woocommerce .fm-woo a.button:hover,
.woocommerce .fm-woo button.button:hover,
.woocommerce .fm-woo input.button:hover{background:var(--seal);color:#fff}
/* ☠ Woo 기본 값 색이 종이 위 3.30:1 이었다(올리브). 통화 기호까지 함께 끌어온다. */
.woocommerce .fm-woo .price,
.woocommerce .fm-woo p.price,
.woocommerce .fm-woo .summary .price,
.woocommerce .fm-woo .price .amount,
.woocommerce .fm-woo .price bdi,
.woocommerce .fm-woo .woocommerce-Price-currencySymbol{color:var(--ink)}
.fm-woo .quantity input.qty{padding:12px 8px;border:1px solid var(--line-2);border-radius:0;font-size:16px}
.fm-woo .woocommerce-message,.fm-woo .woocommerce-info{border-top-color:var(--seal);background:var(--card)}
.fm-woo .woocommerce-message::before,.fm-woo .woocommerce-info::before{color:var(--seal)}
.fm-woo table.shop_table{border:1px solid var(--line);border-radius:0}
.fm-woo table.shop_table th{background:var(--card);font-size:13px;color:var(--ink-3)}
.fm-woo .price,.fm-woo .amount{font-family:var(--mono);font-variant-numeric:tabular-nums}
.fm-woo input[type=text],.fm-woo input[type=email],.fm-woo input[type=tel],
.fm-woo textarea,.fm-woo select{font-size:16px}   /* iOS 확대 방지 */

/* 상품 상세의 «우리 표» — 산지·수확·중량·보관 */
.fm-spec{margin:20px 0;border-top:1px solid var(--ink)}
.fm-spec .r{display:grid;grid-template-columns:104px 1fr;gap:14px;padding:13px 0;
  border-bottom:1px solid var(--line);font-size:15px}
.fm-spec dt{font-size:12.5px;color:var(--ink-3);padding-top:3px;letter-spacing:.03em}
.fm-spec dd{margin:0;color:var(--ink-2);line-height:1.8}

/* ── 푸터 ─────────────────────────────────────────────────── */
.fm-foot{border-top:1px solid var(--ink);padding:44px 0 108px;background:var(--card)}
.fm-foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
.fm-foot .bi{font-size:18px;font-weight:700}
.fm-foot .tl{margin-top:6px;font-size:14px;color:var(--ink-3)}
/* ⚠ 칸 «이름» 이지 문서의 제목이 아니다. h4 로 두면 «본문보다 작은 제목» 이 되어
   위계가 깨진다(검사에서 8장 전부 걸렸다). 태그를 p 로 바꾸고 모양만 라벨로 둔다. */
.fm-foot .lbl{font-size:12.5px;color:var(--ink-3);font-weight:500;letter-spacing:.04em;margin-bottom:10px}
.fm-foot li a{display:block;padding:5px 0;font-size:14px;color:var(--ink-2)}
.fm-foot li a:hover{color:var(--seal)}
.fm-foot .pay{font-size:14px;color:var(--ink-2);line-height:1.9}
.fm-foot .muted{color:var(--ink-3)}
/* 공통 뼈대의 사업자 정보 상자 */
.fm-foot .sh-biz{margin-top:36px;padding-top:22px;border-top:1px solid var(--line)}
.sh-biz .t{font-size:12.5px;color:var(--ink-3);font-weight:500;letter-spacing:.04em;margin-bottom:10px}
.sh-biz li{display:flex;gap:10px;font-size:13px;color:var(--ink-2);line-height:1.95}
.sh-biz li b{flex:0 0 132px;font-weight:400;color:var(--ink-3)}
.sh-biz .miss{color:var(--seal);border-bottom:1px dashed var(--seal)}

/* ── 하단 독(모바일) ──────────────────────────────────────── */
.fm-dock{display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;
  border-top:1px solid var(--ink);background:var(--paper)}
.fm-dock a{flex:1;text-align:center;padding:15px 8px;font-size:15px;font-weight:600}
.fm-dock .c{background:var(--ink);color:var(--paper)}

/* ══ 태블릿 ══ */
@media (max-width:1023px){
  .fm-wrap{padding:0 18px}
  .fm-gnb{display:none}
  .fm-burger{display:block}
  .fm-cards{grid-template-columns:1fr 1fr}
  .fm-rules{grid-template-columns:1fr}
  .fm-rules div{border-right:0;border-bottom:1px solid var(--line)}
  .fm-rules div:last-child{border-bottom:0}
  .fm-dock{display:flex}
  .fm-foot .cols{grid-template-columns:1fr 1fr}
}

/* ══ 휴대전화 — 표를 «줄» 로 접는다 ══
   ⚠ 좁은 화면에서 5칸 표를 그대로 두면 가로로 넘친다. 칸 이름을 앞에 붙여 세로로 편다. */
@media (max-width:719px){
  .fm-top .fm-wrap{height:60px;gap:12px}
  .fm-bi b{font-size:18px}
  .fm-bi small{display:none}
  .fm-bar .fm-wrap{gap:8px}
  .fm-bar b{font-size:15.5px}
  .fm-bar .s{width:100%;font-size:13.5px}
  .fm-ledger thead{position:absolute;left:-9999px}
  .fm-ledger tr{display:block;border-bottom:1px solid var(--line);padding:14px 0}
  .fm-ledger td{display:block;border:0;padding:2px 0}
  .fm-ledger .td-o::before{content:"산지 ";color:var(--ink-3);font-size:13px}
  .fm-ledger .td-w::before{content:"중량 ";color:var(--ink-3);font-size:13px}
  .fm-ledger .td-o,.fm-ledger .td-w{text-align:left;font-size:14px}
  .fm-ledger .td-p{text-align:left;font-size:18px;margin-top:6px}
  .fm-ledger .td-b{text-align:left;margin-top:10px}
  .fm-add{display:block;text-align:center}
  .fm-cards{grid-template-columns:1fr}
  .fm-sec{padding:38px 0}
  .fm-foot{padding:34px 0 96px}
  .fm-foot .cols{grid-template-columns:1fr;gap:24px}
  .sh-biz li{flex-direction:column;gap:0;margin-bottom:8px}
  .sh-biz li b{flex:none}
}