/* ════════════════════════════════════════════════════════════════
   산지직송폰 브랜드 — 공통 토큰 · 컴포넌트 단일 소스
   2026-09-26 쇼핑몰형 리디자인: 흰 바탕 · 1px 연한 테두리 · 여백으로 구분.
   "온라인 최저가를 먼저 보여 주고, 더 싼 매장 특가는 카톡 알림으로" — 장식(종이색·크라프트 점선·나무 액자·
   기울어진 장식 도장·분필 동그라미·폴라로이드)은 쓰지 않는다. 도장은 로고(헤더·푸터)에만.

   모든 페이지가 <head> 맨 끝에서 읽는다 → 페이지 자체 <style>보다 나중이라 같은 우선순위면 이 파일이 이긴다.
   ⚠ 색은 여기 :root 한 곳에서만 정의한다. 페이지·모듈은 var(--…)만 쓴다.
   옛 이름(--paper·--kraft·--stamp-red…)은 새 값으로 다시 가리킨다 — 복제 원본 페이지·모듈이 그대로 새 색을 쓰게.
   대비(WCAG AA): 흰 바탕 위 본문 #16130F 18.6 · 보조 #6B6258 6.0 · 레드 #D2352B 4.9 · 흐린 #9A9086 3.1(큰 글씨·보조 정보만)
   서체: Pretendard 한 가지
   ════════════════════════════════════════════════════════════════ */

:root{
  /* ── 새 토큰 ── */
  --bg:#FFFFFF;            --bg-2:#F7F5F2;                    /* 페이지 / 카드 안쪽 강조 영역 */
  --text:#16130F;          --text-2:#6B6258;   --text-3:#9A9086;
  --line:#F0ECE6;          --line-2:#E7E2DA;                  /* 카드 테두리 / 버튼·칩 테두리 */
  --red:#D2352B;           --red-d:#B42B22;    --red-t:#FDEEEC;
  --table-green:#18402D;   --table-green-d:#12331F;
  --low-yellow:#FFD84D;                                        /* 시세표 안 최저가 */
  --ink-band:#16130F;
  --kakao:#FEE500;         --kakao-h:#F2DA00;  --kakao-ink:#191600;
  --white:#FFFFFF;
  --r-card:14px; --r-card-l:16px; --r-btn:10px; --r-chip:16px;

  /* ── 옛 이름 → 새 값 (새 코드는 위 이름을 쓸 것) ── */
  --stamp-red:var(--red);  --stamp-red-d:var(--red-d);  --stamp-red-t:var(--red-t);
  --ink:var(--text);       --ink-2:#3A342D;             --ink-3:var(--text-2);
  --kraft:var(--line-2);   --kraft-l:var(--line);       --kraft-ink:var(--text-2);  --kraft-ink-2:var(--text-2);
  --paper:var(--bg);       --paper-d:var(--bg-2);
  --board-green:var(--table-green); --board-green-d:var(--table-green-d); --wood:transparent; --wood-d:transparent;
  --chalk:rgba(255,255,255,.86); --chalk-yellow:var(--low-yellow);

  /* ── 타이포 — Pretendard 하나(자체 호스팅 /assets/fonts). 제목 800 · 가격 숫자 800~900 · 본문 400~500 ── */
  --font-display:var(--font-body);
  --font-label:var(--font-body);
  --font-body:'Pretendard Variable',Pretendard,'SJ Fallback Malgun','SJ Fallback Noto',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',system-ui,sans-serif;

  /* ── 형태 — 그림자 없음(구분 = 여백 + 1px 연한 테두리) ── */
  --box-edge:none;
  --dash:1px solid var(--line);

  /* ── 복제 원본 모듈이 쓰던 이름 ── */
  --ink2:var(--ink-2); --ink3:var(--ink-3); --ink4:var(--text-3);
  --line-s:var(--line-2);
  --blue:var(--red); --deep:var(--red-d); --cta:var(--red); --cta-h:var(--red-d); --pale:var(--red-t);
  --seal:var(--red); --ivory:var(--white); --ivory-line:var(--line); --ivory-line-s:var(--line-2);
  --kk:var(--kakao); --kk-h:var(--kakao-h); --kk-ink:var(--kakao-ink);
  --sh1:none; --sh2:0 8px 24px -16px rgba(22,19,15,.18);
  --r1:10px; --r2:10px; --r3:14px;
  --pr:var(--red); --pd:var(--red-d); --pl:var(--red-t); --rd:var(--red);
  --g1:var(--bg-2); --g2:var(--bg-2); --g3:var(--line-2); --g4:var(--text-3); --g5:var(--text-2); --g6:var(--text-2); --g7:var(--ink-2); --g8:var(--text);
  --panel:var(--bg-2);
}

/* ── 기본 ── */
html{background:var(--bg)}
body{background:var(--bg);color:var(--text);font-family:var(--font-body)}
::selection{background:var(--red);color:#fff}
a{color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ── 공통 컴포넌트 ─────────────────────────────────────────────── */

/* 장식 도장 — 쓰지 않는다(도장은 로고에만). 옛 마크업·모듈(stamp.js)이 만든 것도 화면에 나오지 않게 */
.sj-stamp{display:none!important}

/* 버튼 — 주 = 먹색 채움, 보조 = 테두리, 레드·카카오 */
.sj-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;
  border-radius:var(--r-btn);border:1px solid var(--text);background:var(--text);color:#fff;
  font-family:var(--font-body,Pretendard,sans-serif);font-size:16px;letter-spacing:-.01em;text-decoration:none;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;font-weight:700}
.sj-btn:hover{background:#2C2621;border-color:#2C2621}
.sj-btn--2nd{background:#fff;color:var(--text);border-color:var(--line-2)}
.sj-btn--2nd:hover{background:var(--bg-2);color:var(--text);border-color:var(--line-2)}
.sj-btn--red{background:var(--red);border-color:var(--red)}
.sj-btn--red:hover{background:var(--red-d);border-color:var(--red-d)}
.sj-btn--kakao{background:var(--kakao);border-color:var(--kakao);color:var(--kakao-ink)}
.sj-btn--kakao:hover{background:var(--kakao-h);border-color:var(--kakao-h)}
.sj-btn--block{display:flex;width:100%}

/* 카드 — 흰 판 + 1px 연한 테두리 */
.sj-box{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:none}

/* 섹션 구분 — 여백만 */
.sj-dash{border:0;border-top:1px solid var(--line);margin:0}
.sj-sec{padding:44px 0;border-top:0}
/* ── 사이트 공통 폭 — 헤더·본문·푸터가 같은 값을 쓴다(로고 왼쪽 = 본문 왼쪽).
   콘텐츠 최대 1120px 가운데 정렬 + 좌우 여백 PC 24px · 모바일(~767) 16px. 바깥 상자 = --sj-outer(여백 포함, border-box) ── */
body{margin:0}   /* 브라우저 기본 8px 여백 제거 — 모든 페이지 헤더·본문 왼쪽이 같게 */
:root{--sj-max:1120px;--sj-gut:24px;--sj-outer:calc(var(--sj-max) + var(--sj-gut) * 2)}
@media(max-width:767px){:root{--sj-gut:16px}}
.sj-wrap{box-sizing:border-box;max-width:var(--sj-outer);margin:0 auto;padding:0 var(--sj-gut)}
@media(max-width:767px){.sj-sec{padding:32px 0}}

/* 제목·라벨 */
.sj-h2{font-family:var(--font-body,Pretendard,sans-serif);font-size:clamp(22px,3vw,30px);letter-spacing:-.03em;line-height:1.25;color:var(--text);margin:0;font-weight:800}
.sj-h2 em{font-style:normal;color:var(--red)}
.sj-sub{margin:8px 0 0;font-size:15px;color:var(--text-2);line-height:1.55}
.sj-kicker{font-family:var(--font-body,Pretendard,sans-serif);font-size:14px;color:var(--red);letter-spacing:-.01em;font-weight:700}
.sj-num{font-family:var(--font-body,Pretendard,sans-serif);font-variant-numeric:tabular-nums;font-weight:900;letter-spacing:-.02em}
/* 칩 */
.sj-chip{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r-chip);background:#fff;color:var(--text);
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.sj-chip[aria-pressed="true"],.sj-chip.on{background:var(--text);border-color:var(--text);color:#fff}
/* 할인율 뱃지 */
.sj-off{display:inline-flex;align-items:center;height:22px;padding:0 7px;border-radius:6px;background:var(--red);color:#fff;font-size:12.5px;font-weight:800;letter-spacing:-.01em;line-height:1}

/* 라벨 카드 (가격 카드) — 흰 카드 + 연한 테두리 */
.sj-label{position:relative;display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:none;padding:14px 16px 16px;color:var(--text);text-decoration:none;overflow:hidden}
.sj-label::before{content:none}
.sj-label-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  font-family:var(--font-body,Pretendard,sans-serif);font-size:13px;color:var(--text-2);border-bottom:1px solid var(--line);padding-bottom:8px;font-weight:500}
.sj-label-top .sj-asof{flex:0 0 auto;font-size:12px;font-weight:500;color:var(--text-3);white-space:nowrap}
.sj-label-model{margin:10px 0 2px;font-family:var(--font-body,Pretendard,sans-serif);font-size:19px;line-height:1.3;color:var(--text);font-weight:700}
.sj-label-model small{font-family:var(--font-body,Pretendard,sans-serif);font-size:13px;color:var(--text-2);margin-left:4px;font-weight:500}
.sj-label-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.sj-label-price s{font-size:13px;color:var(--text-3)}
.sj-label-price b{font-family:var(--font-body,Pretendard,sans-serif);font-size:28px;line-height:1.1;color:var(--text);font-weight:900;letter-spacing:-.02em}
.sj-label.is-best .sj-label-price b{color:var(--red)}
.sj-label-price b small{font-size:.55em;margin-left:2px}
.sj-label-cap{font-family:var(--font-body,Pretendard,sans-serif);font-size:12px;color:var(--text-2);font-weight:500}

/* 시세표 — 그린 판(나무 액자·점 무늬 없음) */
.sj-board{position:relative;background:var(--table-green);color:#fff;border:0;border-radius:var(--r-card-l);box-shadow:none;padding:24px 24px 20px;background-image:none}
.sj-board-date{font-family:var(--font-body,Pretendard,sans-serif);font-size:14px;color:rgba(255,255,255,.72);display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-weight:500}
.sj-board-date .in{color:var(--low-yellow)}
.sj-board-title{margin:6px 0 0;font-family:var(--font-body,Pretendard,sans-serif);font-size:clamp(26px,4vw,40px);line-height:1.15;color:#fff;letter-spacing:-.03em;font-weight:800}
.sj-board-sub{margin:6px 0 0;font-family:var(--font-body,Pretendard,sans-serif);font-size:clamp(15px,2vw,18px);color:rgba(255,255,255,.72);font-weight:500}
@media(max-width:767px){.sj-board{padding:18px 14px 16px}}

/* ── 헤더 (index.html <style id="tc-header">에도 같은 규칙 — 여기 값이 최종) ── */
/* ── 푸터 — 먹색 바탕 + 흰 반전 로고 ── */
footer.sj-ft{background:var(--ink-band);color:#EDEAE5;padding:44px 0 34px;margin-top:0;font-family:var(--font-body)}
footer.sj-ft .sj-ft-in{box-sizing:border-box;max-width:var(--sj-outer);margin:0 auto;padding:0 var(--sj-gut);display:grid;grid-template-columns:1.2fr 1fr;gap:28px 40px}
footer.sj-ft .sj-ft-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
footer.sj-ft .sj-ft-logo img{height:40px;width:auto;display:block}
footer.sj-ft .sj-ft-slogan{margin:12px 0 0;font-family:var(--font-body,Pretendard,sans-serif);font-size:16px;color:rgba(255,255,255,.72);font-weight:500}
footer.sj-ft .sj-ft-info{font-size:12.5px;line-height:1.85;color:#B8B0A6}
footer.sj-ft .sj-ft-plat{margin:0 0 12px;font-size:12px;line-height:1.7;color:rgba(255,255,255,.55);word-break:keep-all}   /* 플랫폼 안내(사업자 정보 바로 위) */
footer.sj-ft .sj-ft-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px;font-size:13px}
footer.sj-ft .sj-ft-links a{color:#fff;text-decoration:none;border-bottom:0}
footer.sj-ft .sj-ft-links a:hover{text-decoration:underline}
footer.sj-ft .sj-ft-cert{display:inline-flex;align-items:center;gap:10px;margin-top:16px;color:#EDEAE5;text-decoration:none;font-size:12.5px}
footer.sj-ft .sj-ft-cert img{width:44px;height:44px;border-radius:50%;background:#fff;padding:3px}
footer.sj-ft .sj-ft-copy{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:14px;font-size:12px;color:#9A9086}
@media(max-width:767px){footer.sj-ft .sj-ft-in{grid-template-columns:1fr}}

/* ── 모듈 공통 덮어쓰기(카카오 노랑 통일) ── */
.tc-kk,.tcs-kk,.tcq-cta{background:var(--kakao)!important;color:var(--kakao-ink)!important}

/* ── 페이지별 옛 장식 걷어내기(2026-09-26) — 복제 원본 페이지·모듈 CSS에 남은 종이 무늬·왼쪽 굵은 띠·형광펜 밑줄·나무 무늬를
      구조는 두고 모양만 끈다. 모듈이 나중에 넣는 <style>(후기·신청 모달)은 !important로 이긴다 ── */
.u-hero,#view-internet .nv section.n2-hero,#view-phone-list .ph-hero{background-image:none!important}
.u-hero,#view-internet .nv section.n2-hero{background-color:var(--bg);border-bottom:0}
.u-h1 em::after,.u-eyebrow::before{content:none}
#view-internet .nv-form .fh::before,.st-label::before,.rv-empty::before{content:none!important}
.u-card.sj-label:hover{transform:none;box-shadow:none;border-color:var(--line-2)}
.st-label{padding-left:18px}
@media(min-width:768px){.st-label{padding-left:24px}}
.a-body strong{background:none}
.warn{border-left-width:1px!important;background:var(--red-t)!important}
.ph-rv .rv-item,.apm-card2,.af-sum{border-left-width:1px!important;border-radius:var(--r-card)!important;box-shadow:none!important}
.rv-item{border-radius:var(--r-card)!important;box-shadow:none!important}
.rv-item.is-best{border-left-width:1px!important;padding-right:18px!important}
.rv-empty{background:var(--bg-2)!important;box-shadow:none!important;border-radius:var(--r-card)!important}

/* ═══ 사이트 공용 헤더 — 스타일은 여기(brand.css)에만 둔다. 페이지에서 덮어쓰지 말 것. 마크업은 index.html 원본 → node scripts/sync-header.js 로 복사
   흰 바탕 + 아래 1px 연한 테두리. 좌: 도장 마크 + 워드마크 "산지직송폰", 가운데: 메뉴 4개(휴대폰 / 유심 / 인터넷·TV / 매장),
   우: 카카오 노랑 '카톡 특가 알림'(채널 추가, content_name: header). 현재 메뉴 = 레드 밑줄.  모바일(~767): 1줄 = 로고 + 작은 [카톡], 2줄 = 메뉴 4칸 */
header.tc-hd,header.tc-hd *{box-sizing:border-box}
header.tc-hd{position:sticky;top:0;z-index:50;background:#FFFFFF;
  border-bottom:1px solid #F0ECE6;box-shadow:none;height:auto;line-height:normal;
  font-family:'Pretendard Variable',Pretendard,'SJ Fallback Malgun','SJ Fallback Noto',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',system-ui,sans-serif}
.tc-hd-in{max-width:var(--sj-outer);margin:0 auto;padding:0 var(--sj-gut);height:66px;display:flex;align-items:center;gap:28px}
.tc-logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;flex:0 0 auto;color:#16130F}
.tc-logo-mark{width:40px;height:40px;display:block;flex:0 0 auto}
.tc-logo-word{font-family:var(--font-body,Pretendard,sans-serif);
  font-size:23px;letter-spacing:-.04em;color:#16130F;line-height:1;white-space:nowrap;font-weight:900}
.tc-gnb{display:flex;align-items:center;gap:4px;min-width:0}
.tc-gnb a{font-family:var(--font-body,Pretendard,sans-serif);font-size:16px;color:#16130F;
  text-decoration:none;padding:8px 12px 6px;white-space:nowrap;border-bottom:2px solid transparent;transition:border-color .14s,color .14s;font-weight:500}
.tc-gnb a:hover{color:#D2352B}
.tc-gnb a.on{color:#16130F;border-bottom-color:#D2352B}
.tc-kk{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 16px;border-radius:10px;
  background:#FEE500;color:#191600;font-family:var(--font-body,Pretendard,sans-serif);font-size:15px;white-space:nowrap;text-decoration:none;
  box-shadow:none;transition:background .14s;font-weight:700}
.tc-kk:hover{background:#F2DA00}
.tc-kk .s{display:none}
.tc-kk .kk-ic{width:18px;height:18px;flex:0 0 auto}
@media(max-width:1023px){.tc-hd-in{gap:14px}.tc-gnb a{padding:8px 8px 6px;font-size:15px}}
@media(max-width:767px){
  .tc-hd-in{flex-wrap:wrap;height:auto;gap:0}
  .tc-logo{height:54px}
  .tc-logo-mark{width:34px;height:34px}
  .tc-logo-word{font-size:20px}
  .tc-kk{height:36px;padding:0 12px;font-size:14px;gap:5px}
  .tc-kk .kk-ic{width:16px;height:16px}
  .tc-kk .l{display:none}
  .tc-kk .s{display:inline}
  .tc-gnb{order:3;flex:0 0 calc(100% + var(--sj-gut) * 2);margin:0 calc(var(--sj-gut) * -1);border-top:1px solid #F0ECE6;gap:0}
  .tc-gnb>a{flex:1 1 0;min-width:0;display:block;text-align:center;padding:11px 2px 9px;font-size:15px}
}