/* 소싱마켓 — 산지를 훑어보는 마켓플레이스.
   흰 바탕에 카드가 떠 있고, 괘선 대신 여백과 알약으로 나눈다.
   ★ 카드의 조건 다섯 칸만은 데이터답게 남긴다 — 이 사이트의 존재 이유라서,
     여기 하나에만 고정폭 숫자와 색을 쓴다. */
:root{
  /* ══════════════════════════════════════════════════════════════
     팔레트 — Teak 레퍼런스에서 실측한 값이다(눈대중 아님).
     ★ 바닥은 순백이 아니라 초록 기운 크림. 잉크는 검정이 아니라 자두빛 먹색.
     ★ 노랑은 화면에서 딱 두 곳에만 쓴다 — 헤드라인 하이라이트와 주 CTA.
       레퍼런스도 노랑이 전체 픽셀의 0.45% 뿐이라 "행동" 의 색으로 읽힌다.
       조건값·마감·단가에는 절대 쓰지 마라.
     ══════════════════════════════════════════════════════════════ */
  --canvas:#FFFFFF;   /* 바닥은 흰색. 히어로도 흰 바탕이다 — 연노랑은 면으로 깔지 않는다 */
  --g0:#FFFFFF;       /* 카드면 */
  --g1:#F3F6F3;       /* 띠 */
  --g2:#EDF0EC;       /* 알약·입력칸 채움 */
  --g3:#E2E6E1;       /* 선 */
  /* ★ 흐린 글자. 이 값은 마음대로 밝히지 마라 —
       이 토큰은 CSS 전체에서 오직 글자색으로만 쓰이고(테두리·장식 용도 없음),
       가장 불리한 바닥인 --g2(#EDF0EC) 위에서 4.5:1 을 넘겨야 한다.
       #9B9D99 였을 때 2.38:1 이라 조건 격자가 읽히지 않았다.
       이 값은 --g2 위 4.52:1, 흰색 위 5.19:1 이다. */
  --g4:#6F6C6E;       /* 흐린 글자 */
  --g5:#6E6668;       /* 보조 글자. 측정 추정값 */
  --g6:#280D13;       /* 본문·제목. 측정값 — 순흑을 쓰지 않는다 */

  /* ★ 컨셉은 연노랑 + 흰색이다.
     --yellow  하이라이트와 주 버튼. 글자는 언제나 잉크색으로 얹는다(흰 글자 금지 — 안 읽힌다).
     --yellow-soft  면으로 까는 아주 옅은 톤. 고른 분류·완료 표시 같은 작은 상태에만 쓴다.
     선택 상태(고른 분류·현재 단계·입력 포커스)만 잉크색이다 — 연노랑은 면이라
     "지금 여기" 를 가리키지 못한다.
     ★ 초록은 더 이상 어느 화면에서도 쓰지 않는다. 토큰만 남겨둔다. */
  /* ★ 파랑은 나르 배너 한 곳에만 쓴다. 소싱마켓의 색이 아니라
       "여기서부터는 다른 서비스" 를 알리는 면이다. */
  --blue:#5B82F5;
  --blue-line:rgba(255,255,255,.55);
  --yellow:#F7E06B;
  --yellow-press:#F0D544;
  --yellow-soft:#FEFAE4;
  --brand:#12664A;
  --brand-press:#0D4E38;

  /* 간격은 4의 배수만 쓴다 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px;
  --h-lg:48px; --h-md:40px; --h-sm:36px; --h-xs:24px;
  --r:12px; --r-sm:8px; --r-pill:999px;
  --sh:0 1px 2px rgba(40,13,19,.05);
  --sh-up:0 4px 14px rgba(40,13,19,.10);

  /* ── 기존 이름은 팔레트 별칭으로 남긴다. 다른 화면이 이 이름을 쓴다 ── */
  --paper:var(--g0); --sheet:var(--g1); --fill:var(--g2); --fill2:var(--g3);
  --bg:var(--g0); --bg2:var(--g2);
  --line:var(--g3); --line2:var(--g1);
  --ink:var(--g6); --ink2:var(--g5); --ink3:var(--g4); --ink4:var(--g4);
  /* ★ 면으로 쓰던 자리는 전부 연노랑으로 돌린다.
     글자색으로 쓰던 자리는 아래에서 따로 잉크로 바꿨다 — 연노랑 글자는 안 읽힌다. */
  --brand-hover:var(--brand-press); --brand-soft:var(--yellow-soft); --brand-line:#F0E5A8;
  --gold:var(--g5); --gold-soft:var(--g2); --gold-line:var(--g3);
  --red:var(--g5); --red-soft:var(--g2);
  --hot:var(--g5); --star:var(--g5);

  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--canvas); color:var(--g6);
  font-family:var(--sans);
  font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased}
/* 키보드 사용자에게 초점이 어디 있는지 항상 보인다 */
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:3px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:14px}
/* 숫자는 고정폭으로. 조건을 세로로 훑어 비교하는 화면이기 때문이다.
   단 한글이 섞인 곳에는 물리지 않는다 — 대체 글꼴로 넘어가 자간이 벌어진다 */
a{color:inherit;text-decoration:none}

/* 상단바 */
.gnb{height:68px;border-bottom:1px solid var(--g3);display:flex;align-items:center;gap:var(--s6);padding:0 var(--s6);background:var(--g0);position:sticky;top:0;z-index:30}
.logo{font-size:22px;font-weight:700;letter-spacing:-.035em;color:var(--g6);display:flex;align-items:center;gap:8px;cursor:pointer}
/* 로고 마크. 연노랑 판에 잉크색 S 를 꽉 채운다.
   글리프를 판보다 크게 잡고 넘치는 부분을 잘라내야 "꽉 찬" 느낌이 난다. */
.logomark{width:30px;height:30px;border-radius:9px;background:var(--yellow);color:var(--g6);
  display:inline-flex;align-items:center;justify-content:center;overflow:hidden;
  font-size:30px;font-weight:900;line-height:1;letter-spacing:-.06em;flex:0 0 30px}

.gnbmenu{display:flex;gap:4px}
.gnbmenu button{height:var(--h-sm);padding:0 12px;border:none;background:none;font-size:14px;color:var(--ink3);border-radius:8px;font-weight:500}
.gnbmenu button:hover{background:var(--line2);color:var(--ink2)}
.gnbmenu button.on{color:var(--g6);background:var(--g2)}
.gnbright{margin-left:auto;display:flex;gap:8px;align-items:center}
/* 좁은 화면에서 상단바가 넘쳐 페이지 전체가 가로로 밀리던 것을 막는다.
   메뉴는 아래 줄로 내리고 가로로만 넘긴다 — 항목을 지우지 않는다. */
@media(max-width:720px){
  /* 좁은 화면에서는 균등 분배를 풀고 가로로 넘긴다 — 억지로 나누면 글자가 눌린다 */
  .catbtn{flex:0 0 auto;min-width:72px}
  .gnb{height:auto;flex-wrap:wrap;gap:var(--s3);padding:var(--s3) var(--s5)}
  .gnbmenu{order:3;width:100%;overflow-x:auto;gap:var(--s1);scrollbar-width:none}
  .gnbmenu::-webkit-scrollbar{display:none}
  /* 글자가 줄바꿈되지 않게 고정하고 가로로만 넘긴다 */
  .gnbmenu>a{flex:0 0 auto;white-space:nowrap}
  .gnbright{margin-left:auto;flex:0 0 auto}
}

.btn{height:var(--h-md);padding:0 var(--s4);border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink2);font-size:14px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);white-space:nowrap;transition:background .12s,border-color .12s}
.btn:hover{background:var(--fill);border-color:var(--fill2)}
/* ★ 주 CTA. 화면에서 노랑을 쓰는 두 곳 중 하나다 */
/* ★ 주 버튼도 연노랑이다. 글자는 잉크색 */
.btn.pri{background:var(--yellow);border-color:var(--yellow);color:var(--g6);font-weight:700}
.btn.pri:hover{background:var(--yellow-press);border-color:var(--yellow-press)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#fff}
.btn.lg{height:var(--h-lg);padding:0 20px;font-size:15px}
.btn.sm{height:var(--h-sm);padding:0 12px;font-size:13px}
.btn.block{width:100%}
.btn:disabled{opacity:.4;cursor:not-allowed}


/* ── 분류 탭 ──────────────────────────────────────────────────── */
/* ★ 검색창은 헤드라인보다 작게 남긴다. 60px 글자 밑에 600px × 52px 알약을
     두면 둘이 같은 무게로 보이고, 읽는 순서(문장 → 검색)가 사라진다.
     폭은 헤드라인 두 줄보다 분명히 좀아야 한다. */
.searchbar{max-width:520px;margin:0 auto;display:flex;align-items:center;background:var(--paper);
  border:1.5px solid var(--line);border-radius:999px}
.searchbar input{flex:1;min-width:0;border:none;outline:none;padding:0 var(--s2) 0 var(--s5);
  font-size:14.5px;height:46px;background:none;color:var(--g6)}
.searchbar input::placeholder{color:var(--ink4)}
/* ★ 링은 잉크로 간다. --brand-soft 는 히어로 바탕과 같은 #FEFAE4 라
   그 위에서 대비 1.00:1 — 사이트 주 입력칸의 포커스가 사실상 안 보였다. */
.searchbar:focus-within{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
/* 돋보기 하나. 글자 버튼을 넣으면 알약 안에 알약이 또 생긴다 */
.searchbar .sbtn{width:34px;height:34px;margin-right:6px;padding:0;border:none;background:none;
  border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
.searchbar .sbtn:hover{background:var(--fill)}
.searchbar .sbtn svg{width:20px;height:20px}

/* 많이 찾는 품목. 알약으로 둔다 — 검색어 흉내가 아니라 품목 페이지로 가는 입구다. */
.searchtags{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:center;margin:var(--s3) 0 0}
.stag{padding:4px 10px;border-radius:999px;background:var(--paper);
  border:1px solid var(--line);font-size:12.5px;font-weight:500;color:var(--ink2);
  white-space:nowrap;transition:border-color .12s,color .12s}
.stag:hover{border-color:var(--ink);color:var(--ink)}

/* 분류 줄. 선 아이콘 하나로 통일한다 — 이모지는 기기마다 다르게 그려진다 */
.cats{background:var(--g0);border-bottom:1px solid var(--g3);overflow-x:auto;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
/* ★ 한 줄로 유지한다. 좁아지면 줄바꿈이 아니라 가로로 넘긴다 */
.cats>.shell{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:var(--s1);
  padding:var(--s2) var(--s6)}
/* 분류는 줄 전체를 고르게 나눠 쓴다 — 왼쪽에 몰려 있으면 오른쪽이 비어 보인다 */
.catbtn{flex:1 0 auto;min-width:96px;padding:var(--s2) var(--s1);display:inline-flex;flex-direction:column;
  align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--g5);
  white-space:nowrap;border-radius:var(--r);transition:color .12s,background .12s}
/* 판 없이 아이콘만. mask 라 색은 background-color 가 정한다 */
/* 3D 아이콘. ★ 원본 그대로 쓴다 — 필터·그림자·테두리를 씌우지 않는다.
   width/height 를 박아 로딩 중 줄이 튀지 않게 한다. */
.cimg{width:36px;height:36px;display:block}
/* 건수. 라벨 옆에 작게 붙는다 */
.clabel{display:inline-flex;align-items:baseline;gap:4px;line-height:1.2}
.cnum2{font-size:11.5px;font-weight:600;color:var(--g4)}
/* 0곳인 분류는 흐리게 두고 누를 수 없게 한다 */
/* ★ 클래스명을 nostock 으로 둔다 — .empty 는 "결과 없음" 상자가 이미 쓰는 이름이라
   그대로 쓰면 그 상자의 패딩과 배경이 딸려온다(실제로 그랬다). */
/* ★ pointer-events 를 끄지 않는다 — 끄면 hover 가 안 잡혀 아이콘이 못 움직인다.
   이 칸은 href 없는 <span> 이라 애초에 눌리지 않는다. 커서만 화살표로 둔다. */
.catbtn.nostock{cursor:default}
/* 다만 글자는 hover 에도 진해지지 않는다 — 진해지면 "누를 수 있다" 로 읽힌다 */
.catbtn.nostock:hover{color:var(--g5)}
.catbtn.nostock .clabel{opacity:.45}
/* 「전체」만 단색 라인 아이콘을 쓴다.
   ★ 칸은 3D 아이콘과 똑같이 36px 로 둔다 — 여기가 작으면 「전체」만 라벨 줄이 위로 떠서
     옆 칸과 어긋난다. 다만 이 svg 는 그림이 상자의 69%밖에 안 차서 contain 으로 두면
     눈에는 더 작아 보인다. 그래서 마스크를 115% 로 키워 3D 아이콘과 먹 크기를 맞춘다. */
.catbtn .ci{width:36px;height:36px;background-color:var(--g5);
  -webkit-mask:var(--icon) center/115% no-repeat;mask:var(--icon) center/115% no-repeat;
  transition:background-color .12s}
/* ── 분류 아이콘 hover 동작 ──────────────────────────────────────
   커서를 올리면 아이콘이 저마다 다르게 움직인다. 물고기는 헤엄치고,
   채소는 밭에서 솟고, 꿀단지는 따르듯 기운다.
   ★ 칸이 아니라 아이콘만 움직인다 — 칸째로 움직이면 라벨이 흔들려 줄 전체가 출렁인다.
   ★ 0곳 분류(.nostock)는 pointer-events:none 이라 저절로 이 동작에서 빠진다.
   ★ 모션을 끈 사람에게는 이 파일 위쪽 전역 규칙이 애니메이션을 막는다.
   ★ 회전·기울기를 쓰는 것들은 원점을 밑동에 둔다. 가운데를 축으로 돌면
     물건이 기우는 게 아니라 제자리에서 도는 것으로 보인다. */
.catbtn .cimg,.catbtn .ci{will-change:transform}

/* 「전체」 격자 — 실물이 아니라서 표정을 주지 않는다. 살짝 커졌다 만다 */
.catbtn:hover .ci{animation:cm-all .34s ease-out}
@keyframes cm-all{0%{transform:scale(1)}40%{transform:scale(1.16)}100%{transform:scale(1)}}

/* 과일 — 떨어졌다 튀어오른다. 바닥에 닿는 순간 납작해진다 */
.cm-fruit{transform-origin:50% 100%}
.catbtn:hover .cm-fruit{animation:cm-fruit .55s ease-out}
@keyframes cm-fruit{
  0%  {transform:translateY(0)    scale(1,1)}
  30% {transform:translateY(-9px) scale(.96,1.06)}
  55% {transform:translateY(0)    scale(1.10,.90)}
  78% {transform:translateY(-3px) scale(1,1)}
  100%{transform:translateY(0)    scale(1,1)}
}

/* 채소 — 밭에서 솟는다. 아래에서 올라와 살짝 넘겼다 자리를 잡는다 */
.cm-leaf{transform-origin:50% 100%}
.catbtn:hover .cm-leaf{animation:cm-leaf .6s cubic-bezier(.34,1.4,.5,1)}
@keyframes cm-leaf{
  0%  {transform:translateY(7px)  scale(.84)}
  45% {transform:translateY(-5px) scale(1.07)}
  72% {transform:translateY(1px)  scale(.98)}
  100%{transform:translateY(0)    scale(1)}
}

/* 곡물·견과 — 낱알이라 우수수 떨린다 */
.catbtn:hover .cm-grain{animation:cm-grain .5s ease-in-out}
@keyframes cm-grain{
  0%,100%{transform:translate(0,0)      rotate(0)}
  20%    {transform:translate(-2px,1px) rotate(-5deg)}
  40%    {transform:translate(2px,-1px) rotate(5deg)}
  60%    {transform:translate(-2px,0)   rotate(-3deg)}
  80%    {transform:translate(1px,1px)  rotate(2deg)}
}

/* 수산 — 헤엄친다. 앞으로 나아가며 꼬리 치듯 몸이 기운다.
   ★ 다른 것보다 길고 ease-in-out 이다. 물속 움직임은 급정거하지 않는다 */
.catbtn:hover .cm-fish{animation:cm-fish .95s ease-in-out}
@keyframes cm-fish{
  0%  {transform:translateX(0)    rotate(0)}
  25% {transform:translateX(-6px) rotate(-9deg)}
  50% {transform:translateX(5px)  rotate(8deg)}
  75% {transform:translateX(-3px) rotate(-5deg)}
  100%{transform:translateX(0)    rotate(0)}
}

/* 축산 — 도마에 내려놓는 무게. 짧게 들렸다 묵직하게 눌린다 */
.cm-meat{transform-origin:50% 100%}
.catbtn:hover .cm-meat{animation:cm-meat .48s ease-out}
@keyframes cm-meat{
  0%  {transform:translateY(0)    scale(1,1)}
  32% {transform:translateY(-6px) scale(.98,1.04)}
  58% {transform:translateY(0)    scale(1.12,.88)}
  80% {transform:translateY(0)    scale(.98,1.02)}
  100%{transform:translateY(0)    scale(1,1)}
}

/* 가공품 — 꿀단지라 따르듯 기운다. 축은 단지 밑 오른쪽 */
.cm-jar{transform-origin:75% 100%}
.catbtn:hover .cm-jar{animation:cm-jar .8s ease-in-out}
@keyframes cm-jar{
  0%  {transform:rotate(0)}
  35% {transform:rotate(-18deg)}
  62% {transform:rotate(-12deg)}
  100%{transform:rotate(0)}
}
.catbtn:hover{color:var(--g6)}
.catbtn:hover .ci{background-color:var(--g6)}
/* 고른 분류는 잉크색으로 표시한다 — 홈에서 초록을 쓰지 않기로 했다 */
/* ★ 고른 분류는 아이콘이 아니라 배경과 라벨 색으로 표시한다 —
   아이콘은 원본 그대로 두기로 했다 */
.catbtn.on{color:var(--g6);background:none}
.catbtn.on .ci{background-color:var(--g6)}
.catbtn.on .cnum2{color:var(--g5)}

.main{padding:var(--s10) var(--s6) var(--s12);background:var(--g0)}
/* 성격이 다른 묶음은 면으로 구분한다 — 선을 하나 더 긋지 않는다 */
.band{background:var(--g1);margin:0 calc(var(--s6) * -1);padding:var(--s10) var(--s6)}
.band .sec:last-child{margin-bottom:0}
.sec{margin-bottom:var(--s12)}
.sec:last-child{margin-bottom:0}
.sechead{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s5);flex-wrap:wrap}
.sechead h2{font-weight:700;font-size:23px;margin:0;letter-spacing:-.03em}
.sechead .d{font-size:13px;color:var(--ink3)}
.sechead .more{margin-left:auto;font-size:13px;color:var(--ink3);font-weight:600}

/* ── 필터 줄 ──────────────────────────────────────────────────
   토글형(칩)과 선택형(드롭다운)은 하는 일이 달라서 생김새를 나눈다.
   ★ 다만 높이·모서리·좌우 여백·글자 크기는 완전히 같게 맞춘다 —
     한 줄에 섞여 있을 때 어수선해 보이는 원인이 그 불일치였다.
       토글형: 흰 바탕 + 테두리       (켜면 잉크로 채움)
       선택형: 회색 채움 + 테두리 없음 (값이 걸리면 잉크 테두리) */
.filterbar{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;margin-bottom:var(--s5)}
/* 이 줄이 무엇인지 한 단어로 말해준다 */
.flabel{font-size:12.5px;font-weight:600;color:var(--g4);margin-right:var(--s1)}
/* 조건이 걸렸을 때만 나온다. 버튼이 아니라 링크 — 되돌리는 일은 강조할 필요가 없다 */
.fclear{font-size:12.5px;font-weight:600;color:var(--g5);text-decoration:underline;
  text-underline-offset:3px;margin-left:var(--s2)}
.fclear:hover{color:var(--g6)}
.chip,.filterbar .sel{
  height:var(--h-sm);padding:0 var(--s4);border-radius:var(--r-pill);
  font-size:13px;font-weight:500;line-height:1;
  display:inline-flex;align-items:center;gap:var(--s1);
  transition:border-color .12s,background .12s,color .12s}
.chip{border:1px solid var(--g3);background:var(--g0);color:var(--g5)}
.chip:hover{border-color:var(--g6);color:var(--g6)}
.chip.on{background:var(--g6);border-color:var(--g6);color:var(--g0)}

.filterbar .sel{
  border:1px solid transparent;background-color:var(--g2);color:var(--g5);
  /* 네이티브 화살표는 OS 마다 다르게 그려진다. 셰브론을 직접 깐다.
     ★ 아래 %239AA0A8 은 --g4 다. 팔레트를 바꾸면 여기도 같이 바꿀 것. */
  appearance:none;-webkit-appearance:none;
  padding-right:var(--s8);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239AA0A8' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--s3) center;background-size:14px}
.filterbar .sel:hover{color:var(--g6)}
.filterbar .sel.on{border-color:var(--g6);color:var(--g6);background-color:var(--g0)}
.filterbar .cnt{margin-left:auto;font-size:13px;color:var(--g4);font-weight:600}

/* ── 카드 ─────────────────────────────────────────────────────
   읽는 순서: 업체명 → 지역·품목 → ★핵심(단가대·최소·응답) → 나머지 조건.
   ★ 여백·모서리·그림자는 전부 토큰이다. 값을 바꾸려면 :root 만 고친다. */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:var(--s8) var(--s5)}
.gcard{background:var(--g0);border-radius:var(--r);display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease}
/* 모션은 여기까지다. 호버 2px + 옅은 그림자, 그리고 스크롤 진입 페이드인 하나.
   크몽에 없는 모션을 넣으면 크몽 스타일이 아니게 된다. */
.gcard:hover{transform:translateY(-2px);box-shadow:var(--sh-up)}
.gcard:active{transform:translateY(0)}

/* ★ 스크롤 진입 페이드인은 걷어냈다.
   CSS 스크롤 타임라인(animation-timeline:view())으로 넣었더니 화면 밖 카드가
   opacity 0 에 묶여, 목록 11장이 전부 반투명하거나 안 보이는 상태가 됐다.
   이 사이트에서 목록이 안 보이는 것은 가장 큰 사고다 — 장식을 위해 감수할 위험이 아니다.
   모션은 호버 하나로 끝낸다. */

/* ★ 비율 고정. 그리드가 흐트러져 보이는 원인이 제각각인 썸네일 높이였다 */
.gthumb{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--g2);
  position:relative}
/* ★ 커서를 올리면 그림이 틀 안에서만 살짝 커진다 — 돋보기를 갖다 댄 느낌.
     틀(.gthumb)은 그대로 두고 안쪽만 키운다. 틀까지 커지면 옆 카드를 밀어
     한 줄이 통째로 출렁인다. overflow:hidden 이 넘치는 만큼을 잘라낸다.
   ★ 딱지(.ribbon)는 틀에 붙어 있어 같이 커지지 않는다 — 글자가 흐려지지 않는다. */
.gthumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .38s cubic-bezier(.2,.6,.3,1)}
.gcard:hover .gthumb img{transform:scale(1.07)}

/* 딱지. ★ NEW 는 셀러의 판단 정보가 아니라 부가 정보다 — 회색으로 물린다.
   "자리 N곳" 만 진하게 남긴다. 남은 자리는 실제로 판단에 쓰이는 값이다. */
.ribbon{position:absolute;top:var(--s3);left:var(--s3);height:24px;padding:0 var(--s2);
  border-radius:var(--r-pill);font-size:11.5px;font-weight:600;
  display:inline-flex;align-items:center;background:var(--g6);color:var(--g0)}
.ribbon.new{background:var(--g0);color:var(--g5);box-shadow:inset 0 0 0 1px var(--g3);font-weight:500}

/* ★ 남은 시간 배지는 걷어냈다. 카운트다운은 셀러를 조급하게 만들 뿐이고,
   정작 필요한 마감 시각은 아래 조건 칸에 그대로 있다.
   (.gstate 는 히어로 미리보기에서도 쓰이지 않는다) */

.gbody{padding:var(--s3) var(--s1) 0;flex:1;display:flex;flex-direction:column}
.gname{font-size:15.5px;font-weight:700;letter-spacing:-.025em;line-height:1.4;
  color:var(--g6);margin-bottom:var(--s1);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.gmeta{font-size:12.5px;color:var(--g4);line-height:1.5;margin-bottom:var(--s3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ★ 단가 줄은 걷어냈다. 카드에서 가격이 가장 먼저 읽히면 셀러가 산지가 아니라
   숫자를 고른다. 단가는 산지 상세에 그대로 있다 — 들어가서 본다. */

/* 조건 다섯 칸. 확인에 드는 클릭 수를 0으로 유지하는 자리다.
   ★ margin-top:auto — 업체명이 한 줄이든 두 줄이든 조건 칸이 카드 바닥에 붙는다.
     단가 줄이 사라져 높이를 잡아주던 것이 없어졌다. 한 줄에 놓인 카드들의
     조건 칸이 가로로 나란히 맞아야 훑어 비교할 수 있다. */
.gspec{margin:var(--s3) 0 0;margin-top:auto;display:grid;grid-template-columns:.7fr .85fr .95fr 1.6fr .9fr;
  background:var(--g2);border-radius:var(--r-sm);padding:var(--s2) var(--s1);text-align:center}
.gspec>div{display:flex;flex-direction:column;align-items:center;gap:var(--s1);min-width:0;
  border-right:1px solid var(--g3)}
.gspec>div:last-child{border-right:none}
/* ★ 크기를 더 줄이지 마라. 10.5px/11.5px 였을 때 카드에서 가장 작고 가장 흐린 것이
   하필 이 사이트가 존재하는 이유였다. 이름표와 값은 크기가 아니라 굵기로 가른다. */
.gspec dt{font-size:11.5px;color:var(--g4);font-weight:500;letter-spacing:-.02em}
.gspec dd{margin:0;font-variant-numeric:tabular-nums;font-size:13px;font-weight:700;
  color:var(--g6);letter-spacing:-.02em;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ★ 되고/안 되고는 초록·빨강이 아니라 진하기로 가른다 */
.gspec dd.yes{color:var(--g6)}
.gspec dd.no{color:var(--g4);font-weight:500}
.gspec dd.off{color:var(--g4);font-weight:500}

/* ★ 빈 결과는 막다른 길이 아니라 갈림길이다. 상태를 말하고, 나갈 문 두 개를 준다.
   예전엔 안내 문구 한 줄뿐이라 셀러가 여기서 할 수 있는 일이 뒤로가기밖에 없었다. */
.empty{grid-column:1/-1;text-align:center;padding:56px 20px;
  background:var(--sheet);border-radius:var(--r)}
.empty .et{margin:0;font-size:16px;font-weight:600;color:var(--g6);line-height:1.6}
.empty .ed{margin:var(--s2) 0 0;font-size:13.5px;color:var(--ink3);line-height:1.7}
.empty .eact{margin:var(--s5) 0 0;display:flex;gap:var(--s2);justify-content:center;flex-wrap:wrap}

/* ── 나르 안내 배너 ──────────────────────────────────────────────
   ★ 광고판이 되지 않게 얇게 간다. 연한 면에 얇은 테두리, 높이 120px 이내.
   ★ 닫기 버튼도 고정도 팝업도 없다 — 문서 흐름 안의 정적인 한 칸이다. */
/* 나르 배너. 파란 면 위에 흰 글자, 테두리만 있는 알약 버튼, 오른쪽에 3D 이모지.
   ★ 파란 면 위에서는 잉크색 글자가 안 읽힌다 — 여기서만 흰 글자를 쓴다. */
.narad{margin-top:var(--s10);padding:var(--s6) var(--s8);border-radius:var(--r);
  background:var(--blue);border:none;overflow:hidden;
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--s3) var(--s6)}
/* ★ 세 줄이 이 배너의 전부다. 설명 줄을 붙이면 담백함이 깨진다 */
.naradtext .t{margin:0;font-size:30px;font-weight:700;letter-spacing:-.035em;
  line-height:1.34;color:#fff}
.naradcta{display:flex;align-items:center;gap:var(--s3);white-space:nowrap;margin-top:var(--s4)}
/* 테두리만 있는 알약. 파란 면 위에 노란 버튼을 얹으면 면이 두 개로 쪼개진다 */
.narbtn{height:var(--h-md);padding:0 var(--s5);border-radius:999px;
  border:1px solid var(--blue-line);color:#fff;font-size:14px;font-weight:600;
  display:inline-flex;align-items:center;gap:var(--s2);
  transition:background .12s,border-color .12s}
.narbtn:hover{background:rgba(255,255,255,.14);border-color:#fff}
.narrow{font-size:15px;line-height:1}
.naradfree{font-size:12.5px;font-weight:500;color:rgba(255,255,255,.72)}
.naradnote{grid-column:1/-1;margin:0;font-size:12px;color:rgba(255,255,255,.72);line-height:1.4}
/* 장식은 하나로 끝낸다. 여러 개를 흩뿌리면 글자보다 그림이 먼저 읽힌다 */
.naradart{flex:0 0 auto;padding-right:var(--s4)}
.narclock{display:block;width:124px;height:124px;
  filter:drop-shadow(0 8px 16px rgba(18,28,70,.26))}
.ncface{fill:#fff}
/* 테두리를 한 겹 얹어야 흰 원이 종이가 아니라 물건으로 읽힌다 */
.ncring{fill:none;stroke:rgba(24,40,110,.14);stroke-width:5}
.nctick line{stroke:rgba(30,50,120,.30);stroke-width:3.5;stroke-linecap:round}
.nchour,.ncmin,.ncsec{stroke-linecap:round;transform-box:view-box;transform-origin:60px 60px}
.nchour{stroke:#2E4794;stroke-width:6.5;transform:rotate(35deg);animation:nc-hour 300s linear infinite}
.ncmin{stroke:#3B5BC0;stroke-width:5;transform:rotate(140deg);animation:nc-min 60s linear infinite}
/* 초침만 가늘고 밝다 — 이게 있어야 "돌고 있다" 가 한눈에 읽힌다.
   ★ 속도는 눈에 거슬리지 않을 만큼 늦춘다. 배너 옆에서 빠르게 돌면 글자를 뺏는다 */
.ncsec{stroke:#7C9BEE;stroke-width:2.5;transform:rotate(255deg);animation:nc-sec 12s linear infinite}
.nccap{fill:#2E4794}
/* ★ 시작 각도는 서로 180° 를 피한다 — 두 바늘이 정반대면 한 줄로 보인다.
   ★ 각 바늘에 기본 회전을 박아두고 키프레임을 같은 각도에서 시작한다.
     애니메이션이 꺼지면(prefers-reduced-motion) 기본 회전만 남아
     세 바늘이 12시에 포개지지 않고 제 각도에 멈춘다. */
@keyframes nc-hour{from{transform:rotate(35deg)} to{transform:rotate(395deg)}}
@keyframes nc-min {from{transform:rotate(140deg)}to{transform:rotate(500deg)}}
@keyframes nc-sec {from{transform:rotate(255deg)}to{transform:rotate(615deg)}}
@media(max-width:640px){
  .narad{grid-template-columns:1fr;padding:var(--s5)}
  /* 좁은 화면에서는 그림을 버린다 — 글과 버튼이 먼저다 */
  .naradart{display:none}
  .naradcta{align-items:center;gap:var(--s3)}
}

/* 요청서 배너 — 목록을 다 훑고 나서 만나는 두 번째 길 */
.reqbanner{background:var(--g1);border-radius:var(--r);padding:var(--s6);
  display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.reqbanner .t{font-weight:700;font-size:19px;letter-spacing:-.03em;margin-bottom:var(--s1);color:var(--g6)}
.reqbanner .d{font-size:13px;color:var(--g5);line-height:1.7}
.reqbanner .btn{margin-left:auto}
@media(max-width:640px){.reqbanner .btn{margin-left:0;width:100%}}

/* 상세 */
.back{height:var(--h-sm);border:none;background:none;color:var(--ink3);font-size:13.5px;margin-bottom:12px;display:inline-flex;align-items:center;gap:5px;font-weight:500;padding:0}
.back:hover{color:var(--ink)}
.detail{display:grid;grid-template-columns:1fr 328px;gap:20px;align-items:start}
@media(max-width:900px){.detail{grid-template-columns:1fr}}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px}
.panel+.panel{margin-top:14px}
.panel h3{font-size:17px;font-weight:700;margin:0 0 16px;letter-spacing:-.025em}
/* 상품 아트가 옅은 초록 판이라 컨테이너도 같은 톤으로 둔다.
   회색으로 두면 contain 여백이 3단 띠로 보인다. */
.dhero{height:240px;border-radius:var(--r);background:var(--brand-soft);overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:72px;margin-bottom:14px}
.phead{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.pav{width:56px;height:56px;border-radius:14px;background:var(--brand-soft);display:flex;align-items:center;justify-content:center;font-size:26px;flex:0 0 56px}
.pinfo{flex:1;min-width:0}
.porigin{font-size:13px;color:var(--ink3);margin-bottom:2px}
.pname{font-size:26px;font-weight:700;letter-spacing:-.035em;margin:0 0 7px}
.pstats{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink3)}
.pstats b{color:var(--ink);font-weight:600}
.verify{height:var(--h-xs);padding:0 10px;border-radius:999px;background:var(--yellow);color:var(--g6);font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;gap:4px}
.spec{width:100%;border-collapse:collapse;font-size:13.5px}
.spec th{text-align:left;width:128px;padding:13px 0;color:var(--ink3);font-weight:500;vertical-align:top;border-bottom:1px solid var(--line2)}
.spec td{padding:13px 0;color:var(--ink);font-weight:600;border-bottom:1px solid var(--line2)}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:none}
/* 조건표 강조. 연노랑 글자는 흰 바탕에서 안 읽혀 잉크로 굵게 준다 */
.spec .hl{color:var(--g6);font-weight:700}
.aside{position:sticky;top:80px}
.pricebox{border:none;background:var(--brand-soft);border-radius:var(--r);padding:20px;margin-bottom:14px}
.pricebox .l{font-size:12px;color:#14503A;font-weight:700;margin-bottom:2px}
.pricebox .p{font-size:28px;font-weight:700;letter-spacing:-.035em;color:#0F3F2D;font-variant-numeric:tabular-nums}
.pricebox .u{font-size:12.5px;color:#14503A}
.note{font-size:12px;color:var(--ink4);line-height:1.55;margin:10px 0 0}
.lockbox{border:none;background:var(--gold-soft);border-radius:var(--r);padding:17px 18px}
.lockbox .t{font-size:13px;font-weight:700;color:var(--gold);margin-bottom:4px;display:flex;align-items:center;gap:5px}
.lockbox .d{font-size:12.5px;color:#7C4A0B;line-height:1.55}
.prodrow{display:flex;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid var(--line2);font-size:14px}
.prodrow:last-child{border-bottom:none}
.prodrow .n{font-weight:600}
.prodrow .s{color:var(--ink3);font-size:12.5px}
.prodrow .p{margin-left:auto;font-weight:700}
.review{padding:13px 0;border-bottom:1px solid var(--line2)}
.review:last-child{border-bottom:none}
.rtop{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.rtop .who{font-size:13px;font-weight:600}
.rtop .st{color:#F59E0B;font-size:12.5px;font-weight:600}
.rtop .when{margin-left:auto;font-size:12px;color:var(--ink4)}
.rtext{font-size:13px;color:var(--ink2);line-height:1.6}

/* 위저드 */
.wrapnarrow{max-width:620px;margin:0 auto}
.steps{display:flex;gap:6px;margin-bottom:22px}
.stp{flex:1;height:var(--h-sm);border-radius:999px;background:var(--fill);color:var(--ink4);font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.stp.on{background:var(--g6);color:var(--g0)}
.stp.done{background:var(--yellow-soft);color:var(--g5)}
/* 산지 등록 화면 머리말. 홈에서 옮겨온 두 줄이다 */
.qhero{margin:0 0 var(--s3);font-size:14.5px;line-height:1.7;color:var(--g5)}
.qhero b{color:var(--g6);font-weight:700;background:var(--yellow);padding:0 .2em}
.qtitle{font-size:24px;font-weight:700;letter-spacing:-.035em;margin:0 0 5px}
.qsub{font-size:13.5px;color:var(--ink3);margin:0 0 20px}
.field{margin-bottom:18px}
.field:last-child{margin-bottom:0}
.flabel{font-size:13px;font-weight:600;margin-bottom:7px;display:flex;align-items:center;gap:5px}
.flabel .r{color:var(--red);font-size:12px}
.fhint{font-size:12px;color:var(--ink4);font-weight:400;margin-left:auto}
.inp{width:100%;height:var(--h-lg);border:1px solid var(--line);border-radius:12px;padding:0 15px;color:var(--ink);background:var(--paper)}
.inp:focus{outline:none;border-color:var(--g6);box-shadow:0 0 0 3px var(--yellow-soft)}
textarea.inp{height:100px;padding:11px 13px;line-height:1.6}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{height:54px;border:1px solid var(--line);border-radius:12px;background:#fff;display:flex;align-items:center;gap:10px;padding:0 15px;font-size:14.5px;font-weight:500;color:var(--ink2);text-align:left}
.opt:hover{border-color:var(--brand-line);background:var(--yellow-soft)}
.opt.on{border-color:var(--g6);background:var(--yellow-soft);color:var(--g6)}
.opt .mk{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:0 0 20px}
.opt.on .mk{border-color:var(--g6);background:var(--g6);box-shadow:inset 0 0 0 3px var(--g0)}
.seg{display:flex;gap:6px}
.seg button{flex:1;height:var(--h-lg);border:1px solid var(--line);background:#fff;border-radius:12px;font-size:14px;font-weight:600;color:var(--ink3)}
.seg button.on{border-color:var(--g6);background:var(--yellow-soft);color:var(--g6)}
.drop{border:1.5px dashed var(--line);border-radius:var(--r);padding:30px;text-align:center;color:var(--ink3);background:var(--bg2)}
.drop .ic{font-size:30px;margin-bottom:6px}
.drop .t{font-size:14px;font-weight:600;color:var(--ink2)}
.drop .d{font-size:12.5px;margin-top:2px}
.formfoot{display:flex;gap:8px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.formfoot .btn{flex:1}
.hintbox{background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:9px;padding:12px 14px;font-size:12.5px;color:#7C4A0B;margin-bottom:18px;line-height:1.55}

/* 제안 목록 */
.tabbar{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px}
/* ★ 링크로도 쓴다 — 관리자 화면의 공급처/셀러 갈래는 서버 렌더 링크다(JS 없음) */
.tabbar button,.tabbar a{height:40px;padding:0 13px;border:none;background:none;font-size:14px;font-weight:600;color:var(--ink3);border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;align-items:center}
.tabbar button.on,.tabbar a.on{color:var(--g6);border-bottom-color:var(--g6)}
.reqcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-bottom:14px}
.reqcard .rt{display:flex;align-items:center;gap:9px;margin-bottom:6px;flex-wrap:wrap}
.reqcard .rq{font-size:16px;font-weight:700;letter-spacing:-.02em}
.reqcard .rd{font-size:13px;color:var(--ink3);margin-bottom:14px}
.offer{border:1px solid var(--line);border-radius:10px;padding:13px 15px;margin-bottom:8px;display:flex;gap:12px;align-items:flex-start}
.offer:last-of-type{margin-bottom:0}
.offer .oav{width:38px;height:38px;border-radius:10px;background:var(--brand-soft);display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 38px}
.offer .oc{flex:1;min-width:0}
.offer .on2{font-size:14px;font-weight:600;margin-bottom:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.offer .om{font-size:13px;color:var(--ink2);line-height:1.55;margin-bottom:7px}
.offer .ob{display:flex;gap:4px;flex-wrap:wrap}
.offer .or{text-align:right;flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.offer .op{font-size:16px;font-weight:700;letter-spacing:-.02em}
.state{height:23px;padding:0 8px;border-radius:6px;font-size:11.5px;font-weight:700;display:inline-flex;align-items:center}
.state.new{background:var(--red-soft);color:var(--red)}
.state.done{background:var(--yellow-soft);color:var(--g6)}
.state.wait{background:var(--line2);color:var(--ink3)}
.msgrow{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:15px 17px;margin-bottom:8px;display:flex;gap:12px;align-items:flex-start}
.msgrow .mav{width:38px;height:38px;border-radius:10px;background:var(--brand-soft);display:flex;align-items:center;justify-content:center;font-size:17px;flex:0 0 38px}
.msgrow .c{flex:1;min-width:0}
.msgrow .t{font-size:14px;font-weight:600;margin-bottom:2px}
.msgrow .m{font-size:13px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msgrow .r{text-align:right;flex:0 0 auto}
.msgrow .time{font-size:12px;color:var(--ink4);margin-bottom:6px}

/* ── 서버 렌더 보정 ── 목업의 기기 프레임/SPA 토글을 실제 페이지 구조로 옮긴 부분만 */
.shell{max-width:1200px;margin:0 auto;width:100%}
.gnbbar{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:30}
/* ★ 로그인이 필요한 메뉴에 붙는 작은 표. 누르기 전에 알려주는 것이 전부다. */
/* ── 상단 오른쪽 버튼 hover ─────────────────────────────────────
   [로그인]·[산지로 등록] 에 커서를 올리면 한 번 띵 하고 튄다.
   ★ 분류 아이콘보다 크게 튄다 — 아이콘은 그림이라 작게 흔들려도 눈에 들지만,
     알약 버튼은 같은 폭으로 움직이면 아무 일도 없는 것처럼 보인다.
   ★ 오르내림(translateY)을 같이 준다. 크기만 바뀌면 "띵" 이 아니라 "쑥" 이다. */
.gnbright .btn:hover{animation:btnding .44s cubic-bezier(.3,1.5,.5,1)}
@keyframes btnding{
  0%  {transform:translateY(0)    scale(1)}
  28% {transform:translateY(-4px) scale(1.13)}
  55% {transform:translateY(1px)  scale(.96)}
  78% {transform:translateY(-1px) scale(1.05)}
  100%{transform:translateY(0)    scale(1)}
}
.gnbmenu a{height:var(--h-sm);padding:0 12px;border:none;background:none;font-size:14px;color:var(--ink3);border-radius:8px;font-weight:500;display:inline-flex;align-items:center}
.gnbmenu a:hover{background:var(--line2);color:var(--ink2)}
.gnbmenu a.on{color:var(--ink);background:var(--line2)}
.main>.shell{padding:0}
a.gcard,a.catbtn,a.chip,a.stag,a.opt,a.msgrow{text-decoration:none}
a.catbtn{display:inline-flex;align-items:center}
a.chip,a.stag{text-decoration:none}
.filterbar form{display:contents}
.grid a.gcard{color:inherit}
.err{color:var(--red);font-size:12.5px;margin-top:6px;font-weight:500}
.field.bad .inp{border-color:var(--red)}
.flash{background:var(--yellow-soft);border:1px solid var(--brand-line);color:var(--g6);border-radius:9px;padding:11px 14px;font-size:13px;font-weight:500;margin-bottom:16px}
.flash.warn{background:var(--gold-soft);border-color:var(--gold-line);color:#7C4A0B}
.errbox{background:var(--red-soft);border:1px solid #F3C4C0;color:var(--red);border-radius:9px;padding:11px 14px;font-size:13px;font-weight:500;margin-bottom:16px}
.authwrap{max-width:420px;margin:0 auto;padding:44px 18px 80px}
/* 푸터 */
.foot{border-top:1px solid var(--line);background:var(--sheet);margin-top:24px}
.footin{display:flex;gap:56px;flex-wrap:wrap;padding:46px 22px 30px}
.fbrand{flex:1 1 280px;min-width:0}
.flogo{font-size:19px;font-weight:700;letter-spacing:-.035em;color:var(--ink);margin-bottom:10px}
.fline{margin:0;font-size:13px;line-height:1.8;color:var(--ink3)}
.fnav{display:flex;flex-direction:column;gap:9px;min-width:104px}
.fnav h3{margin:0 0 3px;font-size:13px;font-weight:700;color:var(--ink)}
.fnav a{font-size:13px;color:var(--ink3)}
.fnav a:hover{color:var(--ink)}
.fnote{padding:0 22px 40px;font-size:12.5px;line-height:1.9;color:var(--ink4);
  border-top:1px solid var(--line);padding-top:20px;margin-top:6px}
/* 푸터 왼쪽 칸 — 고객센터 버튼, 상담 시간, 굵은 고지, 약관 링크 */
.fbrand .btn{margin-top:var(--s4)}
.fhours{margin:var(--s2) 0 0;font-size:12.5px;color:var(--ink3)}
/* ★ 이 두 줄만 푸터에서 잉크색·굵게 간다. 나머지는 전부 흐리다.
     결제·정산을 대행한다고 오해한 채 거래가 시작되면 되돌릴 수 없다. */
.fclaim{margin:var(--s4) 0 0;font-size:13px;line-height:1.75;font-weight:600;color:var(--ink)}
.flinks{display:flex;gap:var(--s4);margin:var(--s5) 0 0;font-size:12.5px}
.flinks a{color:var(--ink3)}
.flinks a:hover{color:var(--ink)}
/* 개인정보처리방침만 굵다 — 찾는 사람이 가장 많이 찾는 줄이다 */
.flinks a.on{font-weight:700;color:var(--ink)}

/* 사업자 정보. 작게, 흐리게, 그러나 지우지 않는다 */
.fbiz{padding:20px 22px 40px;border-top:1px solid var(--line);margin-top:6px}
.bizrow{margin:0 0 var(--s3);font-size:12px;line-height:2;color:var(--ink4)}
/* ★ 칸 사이는 세로 막대로 나눈다. 줄이 접혀도 어디까지가 한 항목인지 보인다.
     막대는 가상요소라 복사·붙여넣기에 딸려가지 않는다. */
.bz{display:inline-block;white-space:nowrap}
.bz + .bz::before{content:"|";margin:0 8px;color:var(--line)}
.bz b{font-weight:600;color:var(--ink3);margin-right:3px}
/* ★ 아직 안 채운 칸. 값과 같은 색으로 둔다 —
     선 색(--line)으로 흐리게 칠했더니 대비가 1.2:1 이라 사실상 안 보였고,
     그러면 「비어 있다」는 사실 자체가 전달되지 않는다.
     기울임 없이, 대신 점선 밑줄로 「값이 아니라 자리」임을 표시한다. */
.bz i{font-style:normal;color:var(--ink4);border-bottom:1px dotted var(--fill2);}
.flegal{margin:0 0 3px;font-size:12px;line-height:1.85;color:var(--ink4);max-width:900px}
.fcopy{margin:var(--s4) 0 0;font-size:12px;color:var(--ink4)}

@media(max-width:640px){
  .bz{white-space:normal;display:block}
  .bz + .bz::before{content:none}
}

/* 산지 쪽에 거는 말. 셀러용 화면이지만 등록하는 쪽도 여기로 들어온다 */
.supplyside{border:1px solid var(--line);border-left:3px solid var(--yellow);border-radius:6px;
  background:var(--paper);padding:16px 17px}
.supplyside .t{font-size:14px;font-weight:600;margin-bottom:6px}
.supplyside .d{font-size:12.5px;color:var(--ink2);line-height:1.7;margin-bottom:13px}
.supplyside .d b{font-weight:600;color:var(--ink)}
.supplyside .btn{width:100%}

/* ── 히어로 ── 카피 한 덩어리와 검색창.
   ★ 크게 잡되 한 화면을 다 먹지는 않는다. 분류 줄이 접힘선 위에 걸쳐 있어야
     스크롤하기 전에 "여기가 산지 목록" 이라는 게 읽힌다.
   ★ 상단 로고 마크는 걷어냈다 — 상단바에 이미 같은 마크가 있어 두 번 나왔다. */
.hero{background:var(--g0);border-bottom:1px solid var(--g3)}
.heroin{padding:var(--s12) var(--s6) var(--s10)}

/* 히어로는 가운데 정렬이다. 안쪽 요소도 전부 가운데로 모은다 */
.hcopy{max-width:760px;margin:0 auto;text-align:center}
/* ★ line-height 로 두 줄 사이를 띄운다 — <br> 뒤에 여백을 주는 다른 방법이 없다.
   하이라이트 판은 font-size 가 정하므로 판 높이는 그대로고 사이만 벌어진다. */
/* ★ 커서를 올리면 돋보기 커서가 뜨고 글자가 살짝 커진다.
   ★ display:inline-block 이 핵심이다. 블록으로 두면 상자가 단(760px) 전체를
     차지해서, 글자에서 한참 떨어진 빈 자리에 커서를 올려도 확대가 걸린다.
     inline-block 이면 상자가 글자 폭에 붙는다. 부모가 text-align:center 라
     가운데 정렬은 그대로다.
   ★ 1.03 을 넘기지 않는다. 60px 짜리 글자는 조금만 키워도 아래 검색창을
     밀어내는 것처럼 보이고, 획이 흐려진다.
   ★ 모션을 끈 사람에게는 이 파일 위쪽 전역 규칙이 transition 을 막는다.
     그때도 돋보기 커서는 남는다 — 커서는 모션이 아니다. */
.hline{margin:0 0 var(--s8);font-weight:700;letter-spacing:-.045em;
  font-size:clamp(34px,4.6vw,60px);line-height:1.28;color:var(--g6);text-wrap:balance;
  display:inline-block;cursor:zoom-in;transform-origin:50% 50%;
  transition:transform .34s cubic-bezier(.2,.6,.3,1)}
.hline:hover{transform:scale(1.03)}
/* ★ 하이라이트. 각진 직사각형이다 — 둥글리면 즉시 "태그" 로 읽혀 힘이 빠진다. */
/* ★ 하이라이트. 각진 직사각형이다 — 둥글리면 즉시 "태그" 로 읽혀 힘이 빠진다.
   연노랑 위에는 잉크색 글자를 얹는다. 흰 글자는 대비가 안 나온다. */
.hline mark{background:var(--yellow);color:var(--g6);border-radius:0;
  padding:0 .08em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* 우측 미리보기는 걷어냈다 — 히어로가 높아진 만큼 첫 화면에서 목록이 밀렸다 */

@media(max-width:880px){
  .heroin{padding:var(--s8) var(--s5) var(--s6)}
  .hcopy{max-width:none}
}

/* 판매 채널 줄 — 종류를 먼저 고르고 주소를 넣는다. 셀렉트는 고정폭, 주소가 나머지를 먹는다. */
.chrow{display:grid;grid-template-columns:150px 1fr;gap:var(--s2);margin-bottom:var(--s2)}
.chrow:last-of-type{margin-bottom:0}
.chsel{min-width:0}
.chrow.bad .inp{border-color:var(--red)}

/* ── 약관·개인정보처리방침 ── 읽는 화면이다. 단을 좁게 잡는다 —
   한 줄이 길면 법 문장은 더 안 읽힌다. */
.legalwrap{max-width:720px;padding:44px 22px 72px}
.legaltitle{font-size:23px;margin:0 0 8px;letter-spacing:-.03em}
.legallead{margin:0 0 var(--s8);font-size:14px;line-height:1.8;color:var(--ink2)}
/* ★ 법 문장은 읽히려고 있는 것이다. 줄 간격을 넉넉히 준다. */
.legalbody{font-size:14px;line-height:1.95;color:var(--ink2)}
.legalbody h3{margin:32px 0 10px;font-size:15.5px;font-weight:700;color:var(--ink);
  letter-spacing:-.02em;padding-top:16px;border-top:1px solid var(--line)}
.legalbody h3:first-child{border-top:none;padding-top:0;margin-top:0}
.legalbody h4{margin:18px 0 6px;font-size:14px;font-weight:600;color:var(--ink)}
.legalbody p{margin:0 0 10px}
.legalbody ol,.legalbody ul{margin:0 0 12px;padding-left:20px}
.legalbody li{margin-bottom:5px}
.legalbody b{font-weight:600;color:var(--ink)}
/* 표 — 수집 항목처럼 대조해서 읽는 것에만 쓴다 */
.legaltable{width:100%;border-collapse:collapse;margin:0 0 14px;font-size:13px}
.legaltable th,.legaltable td{border:1px solid var(--line);padding:8px 10px;text-align:left;
  vertical-align:top;line-height:1.7}
.legaltable th{background:var(--sheet);font-weight:600;color:var(--ink);white-space:nowrap}
.legalwrap{overflow-x:auto}
/* 시행일·연락처 같은 꼬리말 */
.legalnote{margin:var(--s8) 0 0;padding-top:var(--s5);border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.9;color:var(--ink4)}
.legaldate{margin:0 0 var(--s8);font-size:12.5px;color:var(--ink4)}

/* ── 산지 이름 가림 안내 ──
   ★ 경고가 아니라 설명이다. 빨강·주황을 쓰지 않는다 — 셀러가 뭘 잘못한 게 아니다. */
.shieldnote{margin:0 0 var(--s4);padding:11px 14px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--sheet);
  font-size:12.5px;line-height:1.75;color:var(--ink2)}
.shieldnote b{font-weight:600;color:var(--ink)}
.shieldnote a{margin-left:6px;font-weight:600;color:var(--ink);text-decoration:underline}

/* ── 안내 팝업 ── ★ JS 없이 뜨고 닫힌다. 서버가 렌더할지 정하고,
   닫기는 폼 POST 다. 그래서 여기에는 열고 닫는 규칙이 없다 — 보이면 보이는 것이다.
   ★ 뒤를 덮되 완전히 가리지 않는다. 목록이 비쳐야 「뒤에 뭐가 있구나」 가 읽힌다. */
.modalwrap{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  padding:var(--s5);background:rgba(40,13,19,.42)}
.modal{width:100%;max-width:460px;background:var(--g0);border-radius:var(--r);
  box-shadow:var(--sh-up);padding:26px 24px 20px}
.modaltitle{margin:0 0 var(--s5);font-size:18px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.modalbody{margin:0 0 var(--s3);font-size:13.5px;line-height:1.8;color:var(--ink2)}
.modalbody b{font-weight:600;color:var(--ink)}
/* 두 덩어리. 사이를 선으로 끊는다 — 「얻는 것」과 「지키는 것」은 다른 이야기다 */
.modalsec + .modalsec{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line)}
.modalsec h3{margin:0 0 6px;font-size:12px;font-weight:700;color:var(--ink4);letter-spacing:.02em}
.modalsec p{margin:0 0 4px;font-size:13.5px;line-height:1.75;color:var(--ink2)}
.modalsec p:last-child{margin-bottom:0}
/* 조건 다섯 칸. 이 사이트의 존재 이유라 여기만 잉크색으로 세운다 */
.modalterms{margin-top:8px !important;font-weight:600;color:var(--ink) !important;
  font-size:13px !important;line-height:1.7 !important}
/* 「다시 안 뜨게 하기」는 세 번째 길이다. 버튼처럼 보이지 않게 둔다 */
.modalmute{margin-top:var(--s3);text-align:center}
.modalmute button{border:none;background:none;padding:4px 8px;cursor:pointer;
  font:inherit;font-size:12px;color:var(--ink4);text-decoration:underline}
.modalmute button:hover{color:var(--ink2)}
/* 버튼 줄. 좁아지면 아래로 쌓이되 각 버튼은 끝까지 눌리는 크기를 지킨다. */
.modalact{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5);
  padding-top:var(--s4);border-top:1px solid var(--line)}
.modalact form{display:contents}
.modalact .btn{flex:1 1 auto;min-width:104px}

@media(max-width:420px){
  .modalact{flex-direction:column}
  .modalact .btn{width:100%}
}

/* ── 관리자 화면 ── 꾸미는 자리가 아니다. 값을 눈으로 대조하는 자리다. */
.adminspec{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0 0 10px}
.adminspec div{display:flex;gap:6px;align-items:baseline}
.adminspec dt{font-size:12px;color:var(--ink4);margin:0}
/* 숫자를 대조하므로 고정폭이다 — 이 사이트에서 고정폭을 쓰는 몇 안 되는 자리 */
.adminspec dd{margin:0;font-size:13px;font-weight:600;color:var(--ink);
  font-family:"IBM Plex Mono",ui-monospace,monospace}
.adminwhy{margin:0 0 4px;padding-left:18px;font-size:12.5px;line-height:1.8;color:var(--ink2)}
.adminact{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;
  margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line)}
.adminact .inp{flex:1;min-width:200px}
.adminbtns{display:flex;gap:var(--s2)}
.adminlog{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;
  font-size:12.5px;line-height:2;color:var(--ink3);border-bottom:1px solid var(--line2);padding:2px 0}
.adminlog:last-child{border-bottom:none}
.adminlog .who{font-weight:600;color:var(--ink)}
.adminlog .why{color:var(--ink4)}
.adminlog .when{margin-left:auto;color:var(--ink4)}

/* 탈퇴 화면 — 사라지는 것의 목록. 겁주는 색을 쓰지 않는다. 목록이면 충분하다. */
.goeslist{margin:0 0 18px;padding:14px 16px 14px 34px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--sheet);
  font-size:13.5px;line-height:1.9;color:var(--ink2)}
.goeslist li{margin-bottom:2px}

/* 이미 끝난 칸 — 다시 묻지 않고 결과만 보여준다 */
.donefield{height:var(--h-lg);display:flex;align-items:center;padding:0 14px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--sheet);
  font-size:14px;font-weight:500;color:var(--ink2)}

/* 문의 상세 — 판매자 알아보기 */
.askbody{margin:14px 0 0;padding:12px 14px;border-radius:var(--r-sm);background:var(--sheet);
  font-size:13.5px;line-height:1.8;color:var(--ink2);white-space:pre-line}
.chanlist{margin:0;padding-left:18px;font-size:13px;line-height:1.9;color:var(--ink2)}
.chanlist b{font-weight:600;color:var(--ink);margin-right:6px}
.chanlist a{color:var(--ink3);text-decoration:underline;word-break:break-all}
.chanlist a:hover{color:var(--ink)}