/* ============================================================
   농민.com — 구매자 화면 공통 스타일
   sample.html 톤 적용 · 컴팩트 히어로 · 모바일 대응
   ============================================================ */
:root{
  --pink-50:#FFF0F5; --pink-100:#FFE0EB; --pink-200:#FFC2D9;
  --pink-400:#F06292; --pink-500:#E91E63; --pink-600:#D81557; --pink-700:#B30E49;
  --grad:linear-gradient(95deg,#E91E63 0%,#D81B7A 35%,#B83A9C 70%,#8E44AD 100%);
  --cream:#FBF8F4; --cream-2:#F4EEE4;
  --ink:#1F1418; --ink-2:#3D2A33; --muted:#7A6770; --line:#EADFD3;
  --green:#5C7A4A; --green-soft:#E7EDD8; --gold:#C99B3D; --gold-soft:#F6EBD0;
  --blue:#1971C2;
  /* 레거시 호환 (search/product/order/account 페이지용) */
  --pink:#E91E63; --pink-d:#B30E49; --pink-soft:#FFF0F5; --pink-line:#F3C9D9;
  --blue-d:#155FA0; --blue-soft:#EAF3FB;
  --yellow:#F1B500; --yellow-d:#A07700; --yellow-soft:#FFF8E1;
  --gray:#7A6770; --gray-d:#3D2A33;
  --line-2:#EADFD3; --bg:#FBF8F4; --bg-soft:#F4EEE4;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,system-ui,'Malgun Gothic',sans-serif;
  background:var(--cream); color:var(--ink); line-height:1.55;
  font-size:15px; -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
img{display:block;}
input::placeholder,textarea::placeholder{color:#C8A8B6;font-weight:400;}
input:focus,textarea:focus,select:focus{outline:none;}
.serif{font-family:'Noto Serif KR',serif;letter-spacing:-.01em;}
.mono{font-family:'JetBrains Mono',monospace;}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}

/* ===================== 상단 띠 ===================== */
.topstrip{background:#1F1418;color:#FFE0EB;font-size:12px;padding:7px 0;}
.topstrip .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;}
.ts-left{display:flex;gap:12px;align-items:center;min-width:0;}
.ts-pulse{display:inline-flex;align-items:center;gap:6px;color:#FFC2D9;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  /* 펄스 링(box-shadow 8px)이 왼쪽·위아래로 잘리지 않도록 패딩으로 여유를 주고
     같은 크기 음수 마진으로 시각 위치는 그대로 유지 */
  padding:9px 0 9px 9px;margin:-9px 0 -9px -9px;}
.ts-pulse::before{content:'';width:6px;height:6px;border-radius:50%;background:#FF4081;flex-shrink:0;
  animation:pulse 1.8s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,64,129,.7)}70%{box-shadow:0 0 0 8px rgba(255,64,129,0)}100%{box-shadow:0 0 0 0 rgba(255,64,129,0)}}
.ts-sep{color:#6E545E;}
.ts-dim{color:#B59DA9;white-space:nowrap;}
.ts-right{display:flex;gap:16px;color:#B59DA9;flex-shrink:0;}
.ts-right a:hover{color:#fff;}
.ts-seller{display:inline-flex;align-items:center;gap:5px;background:#E91E63;
  color:#fff;font-weight:700;padding:4px 12px;border-radius:999px;}
.ts-seller:hover{background:#C81A56;}

/* ===================== 헤더 ===================== */
.nmhd{background:#fff;padding:14px 0 0;
  position:sticky;top:0;z-index:50;}
.nmhd-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
/* 로고 — 천천히 커지고(0.55s), 호버하면 빛이 한 번 훑고 지나간다 */
.logo{display:flex;align-items:center;flex-shrink:0;position:relative;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);transform-origin:left center;}
.nmhd .logo:hover{transform:scale(1.06);}
/* 쉬머 — 로고 위를 지나가는 흰 빛줄기 (마스크로 로고 영역만 밝힘) */
.nmhd .logo::after{
  content:'';position:absolute;inset:-6% -10%;pointer-events:none;border-radius:8px;
  background:linear-gradient(105deg,
    transparent 38%, rgba(255,255,255,.16) 46%,
    rgba(255,255,255,.72) 50%, rgba(255,255,255,.16) 54%, transparent 62%);
  background-size:260% 100%;background-position:150% 0;
  mix-blend-mode:overlay;opacity:0;}
.nmhd .logo:hover::after{opacity:1;animation:logoShimmer 1.15s cubic-bezier(.35,0,.25,1);}
@keyframes logoShimmer{
  0%{background-position:150% 0;}
  100%{background-position:-60% 0;}
}
@media (prefers-reduced-motion:reduce){
  .logo{transition:none;}
  .nmhd .logo:hover{transform:none;}
  .nmhd .logo:hover::after{animation:none;opacity:0;}
}

/* ===== 브랜드 로고 (텍스트 ↔ 이미지 자동 전환) =====
   static/img/nongmin-logo-dark.png / -light.png 를 넣으면 자동으로 이미지 전환 */
.nm-logo{display:inline-flex;align-items:center;line-height:1;}
.nm-logo-img{height:var(--nmlogo-h,27px);width:auto;display:none;}
.nm-logo--hasimg .nm-logo-img{display:block;}
.nm-logo--hasimg .nm-logo-text{display:none;}
.nm-logo-text{display:inline-flex;align-items:baseline;font-weight:900;
  letter-spacing:-.04em;font-size:var(--nmlogo-h,27px);}
.nm-logo-dot{color:var(--pink-500);}
.nm-logo-com{font-weight:700;font-size:.62em;color:var(--muted);margin-left:.04em;}
.nm-logo--light .nm-logo-text{color:#fff;}
.nm-logo--light .nm-logo-dot{color:#FFC2D9;}
.nm-logo--light .nm-logo-com{color:rgba(255,255,255,.72);}

.searchbar{flex:1;display:flex;align-items:stretch;background:#fff;
  border:2px solid var(--pink-500);border-radius:999px;overflow:hidden;height:46px;
  max-width:600px;min-width:0;}
.search-cat{border:none;background:var(--pink-50);color:var(--pink-700);font-weight:700;
  font-size:13px;padding:0 12px;font-family:inherit;cursor:pointer;}
.search-input{flex:1;border:none;padding:0 16px;font-size:12.5px;color:var(--ink);
  background:transparent;min-width:0;text-overflow:ellipsis;}
.search-btn{width:54px;background:var(--pink-500);display:flex;align-items:center;
  justify-content:center;color:#fff;flex-shrink:0;}
.search-btn:hover{background:var(--pink-600);}

.hd-actions{display:flex;align-items:center;gap:16px;flex-shrink:0;}
.icon-btn{display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--ink-2);font-size:11.5px;font-weight:600;position:relative;}
.icon-btn:hover{color:var(--pink-500);}
.icon-btn i{font-size:18px;}
.badge-dot{position:absolute;top:-5px;right:-7px;background:var(--pink-500);color:#fff;
  font-size:9px;font-weight:700;min-width:15px;height:15px;border-radius:8px;
  display:none;align-items:center;justify-content:center;padding:0 3px;}
/* 장바구니·내정보 헤더 아이콘은 데스크탑 전용 — 모바일(≤820px)은 하단 앱 네비 담당 */
@media (max-width:820px){ .hd-desk{display:none;} }
.seller-btn{background:var(--ink);color:#fff;padding:11px 16px;border-radius:8px;
  font-weight:700;font-size:13px;display:flex;align-items:center;gap:6px;white-space:nowrap;}
.seller-btn:hover{background:var(--pink-700);}

.cats{display:flex;gap:7px;padding:14px 0 3px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.cats::-webkit-scrollbar{display:none;}
.cat{padding:7px 13px;border-radius:999px;background:#fff;border:1px solid var(--line);
  color:var(--ink-2);font-weight:600;font-size:12.5px;white-space:nowrap;flex-shrink:0;}
.cat:hover{border-color:var(--pink-400);color:var(--pink-500);}
.cat.on{background:var(--pink-500);border-color:var(--pink-500);color:#fff;}

/* ===================== 페이지 컨테이너 ===================== */
.page{max-width:1180px;margin:0 auto;padding:0 24px;}

/* ===================== 상품 카드 (전역) ===================== */
/* 상품 그리드 — 카드 최소 폭(190px)을 보장해 '농민 이구순님' 같은 한 줄 정보가
   좁은 칸에서 두 줄로 접히지 않게 한다. 폭이 모자라면 열 수가 자동으로 줄어든다.
   (422px 기준 2열 · 태블릿 3열 · 데스크탑 4열) */
.grid{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(190px,1fr));
  padding-bottom:6px;}
/* 품절 카드 — 이미지 흐림 + 채도 낮춤 (품절 뱃지는 카드태그로 표시) */
.pcard.is-soldout .thumb{filter:grayscale(.55) brightness(.92);opacity:.75;}
.pcard.is-soldout .card-body{opacity:.6;}
.pcard{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  position:relative;display:block;transition:transform .14s,box-shadow .14s;}
.pcard:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(80,20,40,.10);}
.pcard .thumb{aspect-ratio:1;position:relative;overflow:hidden;display:flex;
  align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--pink-50),#F6E2EC);}
.pcard .thumb img{width:100%;height:100%;object-fit:cover;}
.pcard .thumb .emoji{font-size:54px;}
.pcard.blue   .thumb{background:linear-gradient(135deg,#E7EDD8,#C5D5A0);}
.pcard.yellow .thumb{background:linear-gradient(135deg,#F6EBD0,#E8D49E);}
.pcard .stripes{position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent 0 12px,rgba(255,255,255,.45) 12px 13px);}
.pcard .card-tags{position:absolute;top:10px;left:10px;display:flex;gap:5px;flex-wrap:wrap;}
.pcard .card-tag{background:rgba(255,255,255,.95);padding:4px 8px;border-radius:6px;
  font-size:10.5px;font-weight:700;color:var(--pink-700);}
.pcard .card-fave{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;
  color:var(--muted);}
.pcard .card-fave:hover{color:var(--pink-500);}
.pcard .pbody{padding:13px 14px 9px;display:flex;flex-direction:column;}
/* 농민 정보는 항상 한 줄. 아바타를 뺀 만큼 폭이 남아 '농민 이정호님 · 구수한 예산농원'
   정도는 잘리지 않는다. (이름 6자·농장명 10자 제한과 함께 맞춘 값) */
.pcard .card-farmer{flex-wrap:nowrap;white-space:nowrap;overflow:hidden;}
.pcard .card-farmer b{flex-shrink:0;}
.pcard .card-farmer span:not(.dot){
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
/* 신선도·품절임박 배지 */
.pcard .card-tag-hv{background:rgba(47,107,51,.92);color:#fff;}
.pcard .card-tag-low{background:rgba(233,30,99,.92);color:#fff;}
.pcard .card-farmer{display:flex;align-items:center;gap:7px;margin-bottom:7px;
  font-size:11.5px;color:var(--muted);}
.pcard .card-farmer .av{width:21px;height:21px;border-radius:50%;background:var(--pink-500);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:10.5px;
  font-weight:800;flex-shrink:0;overflow:hidden;}
.pcard .card-farmer .av img{width:100%;height:100%;object-fit:cover;}
.pcard .card-farmer b{color:var(--ink-2);font-weight:700;}
.pcard .card-farmer .dot{color:var(--line);}
/* 상품명은 최대 2줄까지, 짧으면 그만큼만 차지 (min-height 로 빈칸을 만들지 않는다 →
   상품명 바로 아래에 산지가 붙어 카드가 촘촘해짐) */
.pcard .card-name{font-size:13.5px;font-weight:700;line-height:1.4;margin-bottom:3px;
  letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;}
.pcard .card-region{font-size:11.5px;color:var(--muted);margin-bottom:7px;}
/* 할인율(card-disc-row)이 있는 카드만 지역→할인율 간격을 좁힌다 — 할인이 없는
   카드는 지역 바로 아래가 가격이라 기존 여백(7px)이 그대로 맞다 */
.pcard:has(.card-disc-row) .card-region{margin-bottom:2px;}
/* 가격/단위 한 줄 고정 — 가격(card-now)과 단위(card-unit) 사이 간격을 좁히고
   폭이 부족해도 줄바꿈 대신 그대로 붙어 있게 한다 (단위는 OPTION_NAME_MAX로
   입력 단계에서부터 길이를 제한해 두었다). */
.pcard .card-price{display:flex;align-items:baseline;gap:3px;flex-wrap:nowrap;min-width:0;}
.pcard .card-disc{color:var(--pink-500);font-weight:800;font-size:13px;}
.pcard .card-old{color:var(--muted);font-size:11.5px;text-decoration:line-through;}
.pcard .card-now{font-size:19px;font-weight:900;color:var(--ink);letter-spacing:-.02em;white-space:nowrap;}
.pcard .card-unit{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pcard .card-foot{margin-top:9px;display:flex;justify-content:space-between;
  font-size:11px;color:var(--muted);}
.pcard .card-foot{justify-content:flex-start;gap:6px;align-items:center;}
.pcard .card-foot .stars{color:var(--gold);letter-spacing:-1px;font-size:12.5px;}
.pcard .card-rate{font-size:11px;color:var(--muted);}
.pcard .card-rate b{color:var(--ink-2);font-weight:700;}
.pcard .card-foot b{color:var(--ink-2);font-weight:700;}

/* ===================== 섹션 헤더 (레거시 — search 등) ===================== */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin:24px 0 14px;}
.sec-head h2{font-size:19px;font-weight:800;letter-spacing:-.3px;}
.sec-head h2 .bar{display:inline-block;width:4px;height:17px;background:var(--pink-500);
  border-radius:2px;margin-right:8px;vertical-align:-2px;}
.sec-head .more{font-size:13px;color:var(--muted);font-weight:600;}

/* ===================== 안내 박스 ===================== */
.notice{background:var(--gold-soft);border:1px solid #E8D49E;border-radius:12px;
  padding:11px 15px;font-size:13px;color:#8E6A1F;margin:14px 0;}

/* ===================== 빈 상태 ===================== */
.empty{text-align:center;padding:54px 20px;color:var(--muted);}
.empty .ei{font-size:44px;margin-bottom:12px;}
.empty .et{font-size:15px;font-weight:700;color:var(--ink-2);margin-bottom:6px;}
.empty .es{font-size:13px;}

/* ===================== 버튼 ===================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:12px 20px;border-radius:10px;font-size:14px;font-weight:700;}
.btn-pink{background:var(--pink-500);color:#fff;}
.btn-pink:hover{background:var(--pink-600);}
.btn-blue{background:var(--blue);color:#fff;}
.btn-blue:hover{background:var(--blue-d);}
.btn-line{background:#fff;color:var(--ink-2);border:1px solid var(--line);}
.btn-line:hover{border-color:var(--muted);}

/* ===================== 폼 공통 ===================== */
.field{margin-bottom:15px;}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:7px;}
.field label .req{color:var(--pink-500);}
.field input,.field textarea,.field select{width:100%;padding:12px 14px;
  border:1px solid var(--line);border-radius:10px;font-size:14.5px;font-family:inherit;
  background:#FCFCFD;}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--pink-500);background:#fff;}
.field textarea{resize:vertical;min-height:90px;line-height:1.6;}

/* ===================== 푸터 ===================== */
.nmfoot{margin-top:36px;background:#1A0E13;color:#A89098;padding:28px 0 22px;}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px;margin-bottom:18px;}
.foot-logo{color:#fff;font-weight:900;font-size:21px;margin-bottom:2px;line-height:1;}
.foot-logo .dot{color:var(--pink-500);}
.foot-desc{font-size:12px;line-height:1.7;color:#7A6770;}
.foot-h{color:#fff;font-weight:700;font-size:13px;margin-bottom:8px;}
.foot-list{display:flex;flex-direction:column;gap:5px;font-size:12px;}
.foot-list a:hover{color:#fff;}
.foot-biz{padding-top:14px;border-top:1px solid #2D1A22;display:flex;
  flex-wrap:wrap;justify-content:center;gap:4px 10px;align-items:center;font-size:11.5px;color:#8A737E;
  line-height:1.4;}
.foot-biz b{color:#C7B2BC;font-weight:600;}
.foot-biz .sep{color:#3E2A33;}
.foot-bot{padding-top:10px;display:flex;
  justify-content:center;text-align:center;gap:14px;flex-wrap:wrap;font-size:11px;color:#5C4651;}
.foot-bot b{color:#8A737E;font-weight:700;}

/* ============================================================
   메인 페이지 전용 (.nm-home 스코프)
   ============================================================ */
.nm-home section{margin-top:28px;}
/* '오늘의 농수산물' 바로 다음 섹션인 '제철 달력' — 요청대로 섹션 간격을 절반으로 */
.nm-home #calendar{margin-top:14px;}
.nm-home .sec-head{display:flex;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;margin:0 0 10px;gap:8px 18px;}
.nm-home .sec-title{display:flex;align-items:center;gap:11px;flex-wrap:wrap;}
.nm-home .sec-title .bar{width:5px;height:24px;background:var(--pink-500);border-radius:3px;}
.nm-home .sec-title h2{font-size:22px;font-weight:800;letter-spacing:-.02em;}
.nm-home .sec-title .sub{color:var(--muted);font-size:12.5px;font-weight:500;}
.nm-home .sec-more{color:var(--ink-2);font-size:12.5px;font-weight:600;white-space:nowrap;}
.nm-home .sec-more:hover{color:var(--pink-500);}

/* ----- 히어로 (컴팩트: 기존 대비 약 1/2 높이) ----- */
.nm-home .hero{margin-top:20px;background:var(--grad);border-radius:18px;
  padding:24px 28px;color:#fff;position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.55fr 1fr;gap:24px;}
.nm-home .hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 88% 18%,rgba(255,255,255,.18),transparent 42%),
             radial-gradient(circle at 8% 112%,rgba(255,255,255,.12),transparent 52%);}
.nm-home .hero-main{position:relative;z-index:2;}
.nm-home .hero-tag{display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25);
  padding:6px 12px;border-radius:999px;font-size:11.5px;font-weight:600;margin-bottom:12px;}
.nm-home .hero-tag .live{width:6px;height:6px;border-radius:50%;background:#E91E63;
  animation:heroLiveBlink 1.5s ease-in-out infinite;}
@keyframes heroLiveBlink{
  0%,100%{opacity:.4;background:#F8BBD0;box-shadow:0 0 2px rgba(233,30,99,.25);}
  50%{opacity:1;background:#E91E63;box-shadow:0 0 9px 2px rgba(233,30,99,.9);}
}
.nm-home .hero h1{font-size:28px;line-height:1.26;font-weight:900;letter-spacing:-.02em;
  margin-bottom:9px;}
/* 히어로 하이라이트 — 손칠한 듯 연한 노란 형광이 왼쪽부터 칠해졌다가(발생)
   쉬머가 한 번 스치고 오른쪽으로 지워지는(소멸) 사이클 */
.nm-home .hero h1 .hl{
  color:#fff; font-weight:900; padding:.04em .16em;
  border-radius:7px 10px 8px 11px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  background-image:
    linear-gradient(112deg, transparent 40%,
      rgba(255,255,255,.55) 47%, rgba(255,244,176,.78) 52%,
      transparent 61%),
    linear-gradient(178deg, transparent 12%,
      rgba(255,216,86,.28) 22%, rgba(255,206,64,.50) 42%,
      rgba(255,206,64,.50) 70%, rgba(255,216,86,.28) 82%,
      transparent 92%);
  background-size:220% 100%, 0% 100%;
  background-position:135% 0, 0 0;
  background-repeat:no-repeat;
  animation:hlShimmer 5.6s ease-in-out infinite;
}
@keyframes hlShimmer{
  /* 노랑 형광 왼→오로 칠해짐 (발생) */
  0%       { background-size:220% 100%, 0% 100%;   background-position:135% 0, 0 0; }
  16%,24%  { background-size:220% 100%, 100% 100%; background-position:135% 0, 0 0; }
  /* 쉬머 빛줄기 한 번 스침 */
  60%      { background-size:220% 100%, 100% 100%; background-position:-45% 0, 100% 0; }
  72%      { background-size:220% 100%, 100% 100%; background-position:-45% 0, 100% 0; }
  /* 오른쪽으로 지워짐 (소멸) 후 잠시 쉼 */
  90%,100% { background-size:220% 100%, 0% 100%;   background-position:-45% 0, 100% 0; }
}
@media (prefers-reduced-motion:reduce){
  .nm-home .hero h1 .hl{animation:none;
    background-size:220% 100%, 100% 100%; background-position:135% 0, 0 0;}
}
.nm-home .hero p{font-size:13px;opacity:.93;margin-bottom:14px;max-width:520px;}
.nm-home .hero-chips{display:flex;flex-wrap:wrap;gap:7px;}
.nm-home .hero-chip{display:inline-flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);
  padding:6px 11px;border-radius:999px;font-size:11.5px;font-weight:600;}
.nm-home .hero-stats{position:relative;z-index:2;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:16px 18px;
  display:flex;flex-direction:column;gap:11px;}
.nm-home .hero-stats-title{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.7);font-weight:700;}
.nm-home .stat-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.nm-home .stat-num{font-weight:900;font-size:24px;line-height:1;color:#FFF176;}
.nm-home .stat-num small{font-size:12px;color:#fff;margin-left:3px;font-weight:600;}
.nm-home .stat-cap{font-size:11px;color:rgba(255,255,255,.72);margin-top:2px;}
.nm-home .stat-label{font-size:11px;color:rgba(255,255,255,.85);text-align:right;}
.nm-home .stat-label b{color:#FFF176;}
.nm-home .stat-divider{height:1px;background:rgba(255,255,255,.18);}

/* ----- 오늘의 농수산물 — 가로 캐러셀 (카드는 제철상품 페이지와 완전히 동일) -----
   '농어민 이야기 영상'과 같은 방식: 좌우 화살표로 넘기고 스크롤바는 숨긴다.
   카드 크기·내용을 손대지 않으므로 페이지마다 상품이 달라 보이지 않는다. */
.nm-home .prod-scroller{position:relative;}
.nm-home .prod-row{display:flex;gap:16px;margin-top:6px;overflow-x:auto;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;scrollbar-width:none;padding:2px 2px 6px;cursor:grab;}
.nm-home .prod-row::-webkit-scrollbar{display:none;}
/* 드래그 중엔 scroll-snap을 잠깐 끈다 — snap이 매 프레임 보정을 시도하며
   드래그가 슬라이드가 아니라 뚝뚝 끊기는(컷) 것처럼 보이던 문제 수정.
   손을 떼면(위 end()) 클래스가 빠지며 snap이 다시 걸려 카드에 자연스럽게 안착한다 */
.nm-home .prod-row.dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none;}
.nm-home .prod-row.dragging .pcard{pointer-events:none;}
/* 메인은 '훑어보는' 자리라 카드를 작게 — 대신 카드 구성(정보·배지)은 제철상품과 동일 */
.nm-home .prod-row{gap:8px;}
.nm-home .prod-row .pcard{flex:0 0 182px;scroll-snap-align:start;}
.nm-home .prod-row .pcard .pbody{padding:10px 11px 7px;}
.nm-home .prod-row .pcard .card-farmer{font-size:10px;margin-bottom:5px;}
.nm-home .prod-row .pcard .card-farmer b{font-size:10.5px;}
.nm-home .prod-row .pcard .card-name{font-size:12.5px;margin-bottom:3px;}
.nm-home .prod-row .pcard .card-region{font-size:10.5px;margin-bottom:6px;}
.nm-home .prod-row .pcard .card-now{font-size:16px;}
.nm-home .prod-row .pcard .card-unit{font-size:10.5px;}
.nm-home .prod-row .pcard .card-disc{font-size:11.5px;}
.nm-home .prod-row .pcard .card-old{font-size:10.5px;}
.nm-home .prod-row .pcard .card-tag{font-size:10px;padding:3px 7px;}
.nm-home .prod-row .pcard .thumb .emoji{font-size:42px;}
@media (max-width:560px){
  .nm-home .prod-row .pcard{flex:0 0 158px;}
}
.nm-home .prod-rail .pcard .card-now{font-size:15px;}
.nm-home .prod-rail .pcard .card-unit{font-size:10.5px;}
.nm-home .prod-rail .pcard .card-foot{font-size:10px;margin-top:7px;}
.nm-home .prod-rail .pcard .thumb .emoji{font-size:40px;}

/* ----- 실시간 티커 ----- */
.nm-home .ticker{margin-top:4px;background:transparent;border:none;
  border-radius:0;padding:2px 2px;display:flex;align-items:center;gap:14px;overflow:hidden;}
.nm-home .ticker-label{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;
  color:var(--pink-700);font-weight:700;font-size:12.5px;padding-right:16px;
  border-right:1px solid var(--line);}
.nm-home .ticker-label::before{content:'';width:7px;height:7px;border-radius:50%;
  background:var(--pink-500);animation:pulse 1.6s infinite;}
.nm-home .ticker-track{flex:1;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.nm-home .ticker-rail{display:flex;gap:34px;white-space:nowrap;animation:slide 36s linear infinite;}
@keyframes slide{to{transform:translateX(-50%)}}
.nm-home .ticker-item{font-size:10.5px;color:var(--ink-2);}
.nm-home .ticker-item b{color:var(--pink-600);font-weight:700;}
.nm-home .ticker-item .time{color:var(--muted);margin-right:7px;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;}

/* ----- 오늘의 농부 ----- */
.nm-home .spotlight{background:#fff;border:1px solid var(--line);border-radius:18px;
  overflow:hidden;display:grid;grid-template-columns:1.05fr 1fr 1fr;}
.nm-home .spot-photo{position:relative;background:linear-gradient(135deg,#E7EDD8,#D9C9A8);
  min-height:290px;}
/* '예시' 상태 — 사진 안에 판매중 상품(더미)과 이름·지역을 '농어민 이야기' 카드와 동일하게 */
.nm-home .spot-demo-products{position:absolute;left:14px;right:14px;bottom:42px;
  display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.nm-home .spot-demo-products::-webkit-scrollbar{display:none;}
.nm-home .spot-demo-item{flex:0 0 auto;display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.92);border-radius:999px;padding:6px 12px;
  font-size:11px;font-weight:700;color:var(--ink-2);box-shadow:0 3px 10px rgba(0,0,0,.14);}
.nm-home .spot-demo-item .sdp-price{color:var(--pink-600);font-weight:800;}
.nm-home .spot-demo-meta{position:absolute;left:0;right:0;bottom:0;
  padding:24px 14px 10px;font-size:12.5px;color:#fff;font-weight:700;
  background:linear-gradient(to top,rgba(0,0,0,.58),transparent);}
.nm-home .spot-photo .stripes{position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent 0 14px,rgba(255,255,255,.25) 14px 15px);}
.nm-home .spot-photo-label{position:absolute;left:16px;top:16px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-2);
  background:rgba(255,255,255,.85);padding:5px 9px;border-radius:6px;}
.nm-home .spot-tag{position:absolute;left:16px;bottom:16px;background:#fff;border-radius:999px;
  padding:7px 13px;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
  font-weight:700;color:var(--pink-700);box-shadow:0 4px 14px rgba(80,20,40,.12);}
.nm-home .spot-tag .num{background:var(--pink-500);color:#fff;font-size:10.5px;
  padding:2px 7px;border-radius:6px;}
.nm-home .spot-body{padding:16px 14px 12px 22px;display:flex;flex-direction:column;gap:8px;
  border-right:1px dashed var(--line);}
.nm-home .spot-eyebrow{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pink-600);font-weight:700;}
.nm-home .spot-name{font-family:'Noto Serif KR',serif;font-weight:900;font-size:21px;
  line-height:1.3;letter-spacing:-.01em;}
@media (max-width:480px){
  /* 좁은 화면에서 '매일 한분의 농어민을 직접 소개해요🍎' 가 두 줄로 밀리지 않게 */
  .nm-home .spot-name{font-size:17px;letter-spacing:-.02em;}
}
.nm-home .spot-meta{display:flex;flex-wrap:wrap;gap:6px;}
.nm-home .spot-meta .pill{background:var(--cream-2);padding:4px 8px;border-radius:999px;
  font-size:11.5px;color:var(--ink-2);font-weight:600;}
.nm-home .spot-quote{font-family:'Noto Serif KR',serif;font-weight:500;color:var(--ink-2);
  font-size:13.5px;line-height:1.7;}
/* 우측하단에 붙도록 — spot-body가 flex-column이라 margin-top:auto로 아래로, align-self로 오른쪽으로 */
.nm-home .spot-apply-btn{display:inline-flex;align-items:center;gap:4px;
  align-self:flex-end;margin-top:auto;
  background:var(--pink-500);color:#fff;font-family:'Pretendard Variable','Pretendard',sans-serif;
  font-size:11.5px;font-weight:700;line-height:1;padding:7px 13px;border-radius:999px;
  white-space:nowrap;transition:background .14s;flex-shrink:0;}
.nm-home .spot-apply-btn:hover{background:var(--pink-600);}
/* 오늘의 농부 '예시' 상태 — 사진+소개 2단, 중앙 경계를 살짝 왼쪽으로(사진 칸이 45% 정도) */
.nm-home .spotlight.intro{grid-template-columns:0.9fr 1.1fr;}
.nm-home .spotlight.intro .spot-body{border-right:none;}
.nm-home .spot-stats{display:flex;gap:16px;margin-top:auto;}
.nm-home .ss{flex:1;}
.nm-home .ss-num{font-weight:800;font-size:18px;color:var(--ink);}
.nm-home .ss-num.pink{color:var(--pink-600);}
.nm-home .ss-lab{font-size:11px;color:var(--muted);}
.nm-home .spot-products{padding:24px;display:flex;flex-direction:column;gap:9px;}
.nm-home .spot-products-head{font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:3px;}
.nm-home .sp-item{display:flex;gap:11px;align-items:center;padding:9px;border-radius:10px;
  border:1px solid transparent;}
.nm-home .sp-item:hover{border-color:var(--pink-100);background:var(--pink-50);}
.nm-home .sp-thumb{width:50px;height:50px;border-radius:9px;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;
  font-size:9px;color:#B83A6C;text-align:center;
  background:repeating-linear-gradient(45deg,#FFE0EB 0 8px,#FFD2DD 8px 9px);}
.nm-home .sp-name{font-weight:700;font-size:12.5px;margin-bottom:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nm-home .sp-price{font-size:12.5px;color:var(--pink-600);font-weight:800;}
.nm-home .sp-price s{color:var(--muted);font-weight:500;margin-right:5px;font-size:11px;}
/* 오늘의 농부 — 농부 대표사진 + 상품 드래그 스크롤 */
.nm-home .spot-photo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.nm-home .sp-scroll{display:flex;flex-direction:column;gap:8px;max-height:296px;
  overflow-y:auto;scrollbar-width:thin;cursor:grab;
  -webkit-overflow-scrolling:touch;}
.nm-home .sp-scroll.dragging{cursor:grabbing;user-select:none;}
.nm-home .sp-scroll::-webkit-scrollbar{width:5px;}
.nm-home .sp-scroll::-webkit-scrollbar-thumb{background:var(--pink-200);border-radius:3px;}
.nm-home .sp-scroll-hint{font-size:10.5px;color:var(--muted);text-align:center;
  margin-top:7px;font-weight:600;}

/* ----- 수확 신선도 미터 ----- */
.nm-home .freshness{display:flex;align-items:center;gap:6px;margin-top:9px;padding:5px 9px;
  background:var(--green-soft);border-radius:8px;font-size:10.5px;color:var(--green);font-weight:700;}
.nm-home .freshness .fbar{flex:1;height:4px;background:#fff;border-radius:2px;overflow:hidden;}
.nm-home .freshness .ffill{height:100%;background:var(--green);border-radius:2px;}

/* ----- 카테고리 타일 ----- */
.nm-home .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;}
.nm-home .tile{background:#fff;border:1px solid var(--line);border-radius:15px;
  padding:20px 14px;text-align:center;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease;}
.nm-home .tile:hover{border-color:var(--pink-400);background:var(--pink-50);
  transform:translateY(-4px);box-shadow:0 10px 22px rgba(214,51,108,.16);}
.nm-home .tile-img{width:58px;height:58px;border-radius:50%;margin:0 auto 10px;display:flex;
  align-items:center;justify-content:center;font-size:27px;
  transition:transform .18s ease;box-shadow:0 3px 9px rgba(0,0,0,.07);}
.nm-home .tile:hover .tile-img{transform:scale(1.12) rotate(-4deg);}
.nm-home .tile-name{font-weight:800;font-size:13.5px;margin-bottom:2px;}
.nm-home .tile:hover .tile-name{color:var(--pink-600);}
.nm-home .tile-count{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;}

/* ----- 카테고리 숫자 뱃지 (헤더 .cats) ----- */
.cat-count{display:inline-flex;align-items:center;justify-content:center;margin-left:5px;
  background:rgba(0,0,0,.07);color:var(--muted);font-size:10.5px;font-weight:700;
  padding:1px 6px;border-radius:999px;}
.cat.on .cat-count{background:rgba(255,255,255,.25);color:#fff;}
.cat-filter{margin-left:auto;border-color:var(--pink-200);color:var(--pink-600);
  font-weight:700;flex-shrink:0;}
.cat-filter:hover{background:var(--pink-50);border-color:var(--pink-400);}
.cat-filter i{font-size:11px;margin-right:2px;}

/* ----- 상품카드 할인 표기 ----- */
.pcard .card-disc-row{display:flex;align-items:center;gap:6px;margin-bottom:0;}

/* ----- 제철 달력 (컴팩트) ----- */
.nm-home .seasons{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 22px;}
.nm-home .season-now{display:inline-flex;align-items:center;gap:7px;background:var(--pink-50);
  padding:7px 13px;border-radius:999px;font-size:12px;font-weight:700;color:var(--pink-700);
  margin-bottom:10px;line-height:1.5;flex-wrap:wrap;border:1px solid var(--pink-100);}
/* '제철 달력' 제목 옆 칩일 때(펄스 강조)는 아래 여백 불필요 — sec-title 이 이미 gap 관리 */
.nm-home .sec-title .season-now{margin-bottom:0;}
/* 실제 품목 이름 줄 — 제목 옆 칩과 달리 강조(펄스·핑크필) 없이 담백한 텍스트 한 줄로,
   달력 그리드와의 간격도 타이트하게 */
/* 전체 품목을 한 줄로 — 다 안 들어가면 가로 스크롤(모바일 스와이프)로 전부 노출 */
.nm-home .season-items{font-size:12.5px;color:var(--muted);margin-bottom:10px;line-height:1.6;
  white-space:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.nm-home .season-items::-webkit-scrollbar{display:none;}
/* 제철 절정 추천 — 펄스(맥박) 애니메이션으로 시선을 끈다 */
@keyframes nmSeasonGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(233,30,99,.28); transform:scale(1);}
  50%{box-shadow:0 0 0 6px rgba(233,30,99,0); transform:scale(1.025);}
}
.nm-home .season-now.glow{animation:nmSeasonGlow 2s ease-in-out infinite;}
/* 제목 옆 칩은 박스 없이 글자만 — 좁은 화면에서 우측 범례와 한 줄에 들어가도록 폭을 줄인다 */
.nm-home .sec-title .season-now.glow{background:none;border:none;padding:0;
  border-radius:0;box-shadow:none;animation:none;}
.nm-home .season-pick-link{color:var(--pink-700);font-weight:800;text-decoration:none;
  transition:color .15s;}
.nm-home .season-pick-link:hover{color:var(--pink-500);}
.nm-home .cal-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.nm-home .cal-grid{display:grid;grid-template-columns:138px repeat(12,1fr);gap:2px 2px;
  align-items:center;min-width:660px;}
.nm-home .cal-month{text-align:center;font-size:10px;font-weight:700;color:var(--muted);
  padding:3px 0;font-family:'JetBrains Mono',monospace;}
/* 현재 월 헤더 — 링 확산 + 살짝 확대(강조 펄스) */
@keyframes nmMonthPulse{
  0%{box-shadow:0 0 0 0 rgba(233,30,99,.5);transform:scale(1);}
  70%{box-shadow:0 0 0 7px rgba(233,30,99,0);transform:scale(1.14);}
  100%{box-shadow:0 0 0 0 rgba(233,30,99,0);transform:scale(1);}
}
.nm-home .cal-month.curr{color:#fff;background:var(--pink-500);border-radius:5px;
  font-weight:800;position:relative;z-index:1;
  animation:nmMonthPulse 1.9s ease-out infinite;}
/* 이번 달 열 셀 — 은은하게 숨쉬는 강조(제철 절정 셀이 반짝) */
@keyframes nmCellNowPulse{
  0%,100%{box-shadow:inset 0 0 0 1.5px var(--pink-400),0 0 0 0 rgba(233,30,99,0);}
  50%{box-shadow:inset 0 0 0 1.5px var(--pink-500),0 0 7px 1px rgba(233,30,99,.55);}
}
@keyframes nmCellNowPulseSea{
  0%,100%{box-shadow:inset 0 0 0 1.5px #2C9CCB,0 0 0 0 rgba(44,156,203,0);}
  50%{box-shadow:inset 0 0 0 1.5px #1E7AA8,0 0 7px 1px rgba(44,156,203,.55);}
}
.nm-home .cal-row{display:contents;}
.nm-home .cal-row .label{padding:2px 6px 2px 4px;font-weight:700;font-size:11.5px;color:var(--ink-2);
  display:flex;align-items:center;gap:5px;white-space:nowrap;border-radius:7px;
  transition:background .14s;}
.nm-home .cal-row .label .em{font-size:14px;}
.nm-home .cal-row .label .nm{flex:1;overflow:hidden;text-overflow:ellipsis;}
.nm-home .cal-row .label .ktag{font-size:9px;font-weight:800;padding:1px 5px;border-radius:6px;
  background:#EDE6E0;color:#8A7B72;flex-shrink:0;}
.nm-home .cal-row.kind-수 .label .ktag{background:#DCEFF8;color:#1E7AA8;}
.nm-home .cal-row.kind-축 .label .ktag{background:#F6E0DC;color:#B85C50;}
/* 실제 판매상품 있는 품목 — DB 반영 뱃지 */
.nm-home .cal-row .label .ktag.sale{background:#E3F4E5;color:#2F9E44;}
/* 이번 달 제철 절정 품목 — 라벨에 은은한 배경 + 빛이 스치는 쉬머 + 숨쉬는 펄스 */
@keyframes nmLabelShimmer{
  0%{background-position:-140% 0,0 0;}
  60%,100%{background-position:240% 0,0 0;}
}
@keyframes nmLabelPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(233,30,99,0);}
  50%{box-shadow:0 0 9px 0 rgba(233,30,99,.28);}
}
.nm-home .cal-row.hl .label{color:var(--pink-600);border-radius:7px;
  background-image:
    linear-gradient(100deg, transparent 34%, rgba(255,255,255,.6) 50%, transparent 66%),
    linear-gradient(90deg, rgba(233,30,99,.13), rgba(233,30,99,.03));
  background-size:200% 100%, 100% 100%;background-repeat:no-repeat;
  animation:nmLabelShimmer 3.4s ease-in-out infinite,
            nmLabelPulse 2.4s ease-in-out infinite;}
@keyframes nmLabelPulseSea{
  0%,100%{box-shadow:0 0 0 0 rgba(44,156,203,0);}
  50%{box-shadow:0 0 9px 0 rgba(44,156,203,.3);}
}
.nm-home .cal-row.kind-수.hl .label{color:#1E7AA8;
  background-image:
    linear-gradient(100deg, transparent 34%, rgba(255,255,255,.6) 50%, transparent 66%),
    linear-gradient(90deg, rgba(44,156,203,.14), rgba(44,156,203,.03));
  animation:nmLabelShimmer 3.4s ease-in-out infinite,
            nmLabelPulseSea 2.4s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){
  .nm-home .cal-row.hl .label{animation:none;background-position:0 0,0 0;}
}
/* 이번 달 제철 절정 품목 — 이모지가 살랑이며 제철임을 알림 (행마다 시차) */
@keyframes nmSeasonSway{
  0%,100%{transform:rotate(0) scale(1);}
  30%{transform:rotate(-10deg) scale(1.18);}
  62%{transform:rotate(8deg) scale(1.1);}
}
.nm-home .cal-row.hl .label .em{display:inline-block;transform-origin:50% 80%;
  animation:nmSeasonSway 2.8s ease-in-out infinite;
  animation-delay:var(--wd,0s);}
@media (prefers-reduced-motion:reduce){
  .nm-home .cal-row.hl .label .em{animation:none;}
  .nm-home .cal-row.hl .label{animation:none;}
}
/* 행 전체 호버 강조 */
.nm-home .cal-row .label:hover{background:var(--pink-50);}
/* 월 접미사 '월' — 넓게 표시되는 해당 월 ±1 에만 노출 */
.nm-home .cal-month .mw{display:none;}
/* 라벨 축약명 — 기본은 전체명, 좁은 화면에서 축약명으로 교체 */
.nm-home .cal-row .label .nm-short{display:none;}
/* 펼쳐보기 — 기본 20줄 외(more) 행은 숨김, expanded 시 순차 페이드로 전개 */
.nm-home .cal-grid:not(.expanded) .cal-row.more > *{display:none;}
@keyframes nmRowIn{from{opacity:0;transform:translateY(-7px);}to{opacity:1;transform:translateY(0);}}
.nm-home .cal-grid.expanded .cal-row.more > *{animation:nmRowIn .42s ease both;
  animation-delay:var(--rd,0s);}
.nm-home .cal-more-btn{display:block;width:100%;margin-top:12px;padding:10px;
  background:var(--pink-50);border:1px solid var(--pink-100);border-radius:10px;
  color:var(--ink-2);font-size:12.5px;font-weight:800;font-family:inherit;cursor:pointer;
  transition:background .14s;}
.nm-home .cal-more-btn:hover{background:var(--pink-100);}
.nm-home .cal-more-btn i{font-size:10px;margin-left:3px;}
.nm-home .cal-cell{height:13px;background:var(--cream-2);border-radius:2px;transition:transform .12s;}
.nm-home .cal-cell.bar{background:var(--pink-100);}
.nm-home .cal-cell.peak{background:var(--pink-500);}
/* 수산물은 제철 셀을 바다색으로 구분 */
.nm-home .cal-row.kind-수 .cal-cell.bar{background:#BFE3F2;}
.nm-home .cal-row.kind-수 .cal-cell.peak{background:#2C9CCB;}
.nm-home .cal-cell.now{box-shadow:inset 0 0 0 1.5px var(--pink-400);position:relative;z-index:1;}
.nm-home .cal-row.kind-수 .cal-cell.now{box-shadow:inset 0 0 0 1.5px #2C9CCB;}
/* 이번 달인데 '제철 절정(peak)'인 셀만 숨쉬듯 반짝여 강조 */
.nm-home .cal-cell.now.peak{animation:nmCellNowPulse 1.9s ease-in-out infinite;}
.nm-home .cal-row.kind-수 .cal-cell.now.peak{animation:nmCellNowPulseSea 1.9s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){
  .nm-home .cal-month.curr,.nm-home .cal-cell.now.peak{animation:none;}
}
.nm-home .cal-legend{display:flex;gap:12px;font-size:11px;color:var(--muted);
  justify-content:flex-end;flex-wrap:wrap;flex-shrink:0;}
.nm-home .cal-legend i{display:inline-block;width:12px;height:8px;border-radius:2px;
  vertical-align:middle;margin-right:3px;}
.nm-home .cal-legend .lg-short{display:none;}

/* ----- 산지에서 바로 (한반도 지도) ----- */
/* 지도 열을 좁혀 섹션 높이를 낮추고, 리스트는 지도 높이에 맞춰 여백 없이 채움.
   min-width:0 — 좁은 폭(사파리)에서 내용 최소폭 때문에 두 칼럼이 겹치는 것 방지 */
/* 제목줄과 지도+리스트 박스 사이 간격을 더 좁힌다(요청: 계속 멀어 보임) */
.nm-home #regions .sec-head{margin-bottom:4px;}
.nm-home .regions{display:grid;grid-template-columns:0.82fr 1.18fr;gap:16px;background:#fff;
  border:1px solid var(--line);border-radius:18px;padding:16px;}
.nm-home .regions > *{min-width:0;}
.nm-home .region-side{display:flex;flex-direction:column;min-height:100%;}
.nm-home .region-list{min-width:0;}
.nm-home .map-wrap{position:relative;aspect-ratio:.82;background:#BFE3F2;
  border-radius:13px;overflow:visible;max-width:380px;max-height:460px;margin:0 auto;}
/* 바다 물결이 둥근 모서리 밖으로 새지 않도록 SVG만 클립 */
.nm-home .map-svg{border-radius:13px;overflow:hidden;}
.nm-home .map-svg{width:100%;height:100%;display:block;border-radius:13px;}
/* 육지 — 녹색 지형 / 바다 — 파란 배경 + 흐르는 물결 */
.nm-home .korea-land{fill:url(#landGrad);stroke:#7BA24E;stroke-width:1.4;stroke-linejoin:round;}
.nm-home .korea-shadow{fill:#5E7A46;}
.nm-home .korea-island{fill:url(#landGrad);stroke:#7BA24E;stroke-width:1.3;}
.nm-home .korea-label{font-size:9px;fill:#41632E;font-weight:700;}
/* 유선형 물결 — 파장 120px 곡선이 같은 방향으로 서로 다른 속도로 흘러감 */
.nm-home .sea-flow .flow{opacity:var(--fo,.18);
  animation:nmSeaFlow var(--fs,20s) linear infinite;will-change:transform;}
@keyframes nmSeaFlow{from{transform:translateX(0);}to{transform:translateX(120px);}}
@media (prefers-reduced-motion:reduce){
  .nm-home .sea-flow .flow{animation:none;}
}
.nm-home .map-pin{position:absolute;transform:translate(-50%,-50%);cursor:pointer;z-index:2;}
.nm-home .map-pin:hover,.nm-home .map-pin.active{z-index:9;}
.nm-home .map-pin .dot{display:block;width:12px;height:12px;border-radius:50%;
  background:var(--pink-500);border:2.5px solid #fff;box-shadow:0 2px 6px rgba(80,20,40,.28);
  transition:transform .18s;}
.nm-home .map-pin.big .dot{width:16px;height:16px;background:var(--pink-600);}
.nm-home .map-pin .dot-ring{position:absolute;left:50%;top:50%;width:34px;height:34px;
  border-radius:50%;background:radial-gradient(circle,rgba(233,30,99,.18),rgba(233,30,99,0) 70%);
  transform:translate(-50%,-50%) scale(.4);opacity:0;transition:all .22s;pointer-events:none;}
.nm-home .map-pin:hover .dot,.nm-home .map-pin.active .dot{transform:scale(1.3);}
.nm-home .map-pin:hover .dot-ring,.nm-home .map-pin.active .dot-ring{opacity:1;
  transform:translate(-50%,-50%) scale(1);}
.nm-home .map-pin .lab-mini{position:absolute;left:50%;top:calc(100% + 5px);
  transform:translateX(-50%);background:#fff;padding:2px 7px;border-radius:5px;font-size:10px;
  font-weight:700;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.12);white-space:nowrap;
  pointer-events:none;transition:opacity .15s;}
.nm-home .map-pin:hover .lab-mini,.nm-home .map-pin.active .lab-mini{opacity:0;}
.nm-home .map-tip{position:absolute;left:50%;bottom:calc(100% + 12px);
  transform:translateX(-50%) translateY(6px);width:204px;background:#fff;border-radius:13px;
  box-shadow:0 14px 36px rgba(80,20,40,.18);padding:13px 14px;opacity:0;visibility:hidden;
  transition:opacity .18s,transform .18s,visibility .18s;z-index:10;pointer-events:none;text-align:left;}
/* 툴팁은 핀에 직접 호버했을 때만 — 리스트 호버(.active)는 핀 강조만 (한 지역에
   핀이 여러 개일 때 툴팁이 겹쳐 뜨는 것 방지) */
.nm-home .map-pin:hover .map-tip{opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0);pointer-events:auto;}
.nm-home .map-tip::after{content:'';position:absolute;left:50%;top:100%;
  transform:translateX(-50%);border:7px solid transparent;border-top-color:#fff;}
.nm-home .map-pin.below .map-tip{bottom:auto;top:calc(100% + 12px);}
.nm-home .map-pin.below .map-tip::after{top:auto;bottom:100%;
  border-top-color:transparent;border-bottom-color:#fff;}
.nm-home .map-pin.left .map-tip{left:auto;right:calc(100% + 12px);bottom:50%;
  transform:translateY(50%) translateX(-6px);}
.nm-home .map-pin.left:hover .map-tip{
  transform:translateY(50%) translateX(0);}
.nm-home .map-pin.left .map-tip::after{left:100%;top:50%;transform:translateY(-50%);
  border:7px solid transparent;border-left-color:#fff;}
.nm-home .map-pin.right .map-tip{right:auto;left:calc(100% + 12px);bottom:50%;
  transform:translateY(50%) translateX(6px);}
.nm-home .map-pin.right:hover .map-tip{
  transform:translateY(50%) translateX(0);}
.nm-home .map-pin.right .map-tip::after{right:100%;left:auto;top:50%;
  transform:translateY(-50%);border:7px solid transparent;border-right-color:#fff;}
.nm-home .tip-region{font-size:14px;font-weight:800;color:var(--ink);}
.nm-home .tip-tagline{font-size:11px;color:var(--muted);margin:2px 0 8px;}
.nm-home .tip-specs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px;}
.nm-home .tip-spec{background:var(--pink-50);color:var(--pink-700);font-size:10.5px;
  font-weight:700;padding:3px 8px;border-radius:6px;}
.nm-home .tip-cta{display:flex;align-items:center;justify-content:space-between;
  padding-top:9px;border-top:1px solid var(--line);font-size:11.5px;font-weight:800;
  color:var(--pink-600);}
/* 범례 — 좌측 하단은 제주도를 가려서 좌측 상단으로 */
.nm-home .map-legend{position:absolute;left:10px;top:10px;display:flex;align-items:center;
  gap:6px;background:rgba(255,252,248,.92);padding:6px 10px;border-radius:8px;font-size:10.5px;
  color:var(--muted);font-weight:600;border:1px solid var(--line);}
.nm-home .map-legend .swatch{width:9px;height:9px;border-radius:50%;background:var(--pink-500);}
.nm-home .region-side-h{font-weight:800;font-size:15px;margin-bottom:3px;}
.nm-home .region-side-s{color:var(--muted);font-size:12px;margin-bottom:14px;line-height:1.5;}
/* 전국 제철 산지 — 2열, 세로(열) 흐름으로 채워 좌측이 1~5위·우측이 6~10위 */
.nm-home .region-list{display:grid;grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(5,1fr);grid-auto-flow:column;
  gap:7px 9px;flex:1;}
.nm-home .region-row{display:flex;align-items:center;gap:9px;padding:8px 10px;
  border:1px solid var(--line);border-radius:10px;transition:all .14s;min-width:0;}
.nm-home .region-row:hover,.nm-home .region-row.active{border-color:var(--pink-500);
  background:var(--pink-50);transform:translateY(-1px);}
.nm-home .region-rank{width:20px;height:20px;border-radius:6px;background:var(--cream-2);
  color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.nm-home .region-rank.top{background:var(--pink-500);color:#fff;}
.nm-home .region-row.active .region-rank{background:var(--pink-600);color:#fff;}
.nm-home .region-name{font-weight:700;flex:1;font-size:12.5px;min-width:0;
  overflow:hidden;}
/* 한 지역의 여러 제철 품목 — 칩으로 나란히 (각각 검색 링크) */
.nm-home .region-items{display:flex;flex-wrap:wrap;gap:2px 8px;margin-top:2px;}
.nm-home .region-item{font-size:10.5px;color:var(--muted);font-weight:600;
  white-space:nowrap;}
.nm-home .region-item:hover{color:var(--pink-600);text-decoration:underline;}
.nm-home .region-item b{color:#2F9E44;font-weight:800;}
/* 2열에선 '바로가기 →'는 공간 절약 위해 숨김(품목 칩이 링크) */
.nm-home .region-go{display:none;}

/* ----- 산지에서 바로: 월별 제철 품목 핀 (물결 리플 + 순차 등장) ----- */
.nm-home .map-pin.season{opacity:0;
  animation:nmPinIn .55s cubic-bezier(.2,.9,.3,1.35) forwards;
  animation-delay:var(--d,0s);}
@keyframes nmPinIn{
  from{opacity:0;transform:translate(-50%,-50%) scale(.2);}
  to{opacity:1;transform:translate(-50%,-50%) scale(1);}}
.nm-home .map-pin.season .pin-emoji{display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:#fff;font-size:15px;
  border:2px solid var(--pink-200);box-shadow:0 3px 9px rgba(80,20,40,.18);
  transition:transform .16s;}
.nm-home .map-pin.season.big .pin-emoji{width:35px;height:35px;font-size:18px;
  border-color:var(--pink-400);}
.nm-home .map-pin.season.sea .pin-emoji{border-color:#8FCBE3;}
.nm-home .map-pin.season:hover .pin-emoji,
.nm-home .map-pin.season.active .pin-emoji{transform:scale(1.18);}
/* 상단띠 펄스점과 같은 결의 물결 링 — 두 겹이 시차를 두고 퍼짐 */
.nm-home .map-pin.season .ripple{position:absolute;left:50%;top:50%;
  width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;
  border:2px solid rgba(233,30,99,.5);opacity:0;pointer-events:none;
  animation:nmRipple 3s ease-out infinite;
  animation-delay:calc(var(--d,0s) + .3s);}
.nm-home .map-pin.season .ripple.r2{animation-delay:calc(var(--d,0s) + 1.8s);}
.nm-home .map-pin.season.sea .ripple{border-color:rgba(44,156,203,.55);}
@keyframes nmRipple{
  0%{transform:scale(.55);opacity:.8;}
  70%{opacity:.2;}
  100%{transform:scale(2.7);opacity:0;}}
/* 지도가 컴팩트해 항상표시 라벨이 서로 겹치므로 숨기고, 이름은 우측 리스트 +
   핀 호버 툴팁으로 안내(레퍼런스 지도처럼 이모지 핀만 깔끔하게 노출) */
.nm-home .map-pin.season .lab-mini{display:none;}
@media (prefers-reduced-motion:reduce){
  .nm-home .map-pin.season{animation:none;opacity:1;}
  .nm-home .map-pin.season .ripple{animation:none;}}
/* 핀 호버 — 추천상품 3~4개 미니 카드 */
.nm-home .map-tip{width:200px;}
.nm-home .tip-prods{display:flex;flex-direction:column;gap:4px;margin-bottom:9px;}
.nm-home .tip-prod{display:flex;align-items:center;gap:7px;padding:5px 6px;
  border-radius:8px;border:1px solid var(--line);}
.nm-home .tip-prod:hover{background:var(--pink-50);border-color:var(--pink-200);}
.nm-home .tip-prod img,.nm-home .tip-prod .tp-emo{width:26px;height:26px;
  border-radius:6px;object-fit:cover;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;background:var(--cream-2);font-size:14px;}
.nm-home .tip-prod .tp-t{flex:1;min-width:0;font-size:11px;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nm-home .tip-prod .tp-p{font-size:11px;color:var(--pink-600);flex-shrink:0;}
.nm-home .tip-none{font-size:11px;color:var(--muted);margin-bottom:9px;}

/* ----- 농어민 이야기 ----- */
.nm-home .stories{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
/* 추천 사연 2개 — 사진(좌)+글(우) 가로형 카드 */
.nm-home .stories.two{grid-template-columns:repeat(2,1fr);}
/* 좌측 40% 사진(이름·지역 오버레이) · 우측 60% 태그·제목·본문 — 모바일에서도 유지 */
.nm-home .stories.two .story{display:grid;grid-template-columns:2fr 3fr;}
.nm-home .stories.two .story-img{aspect-ratio:auto;min-height:196px;height:100%;}
.nm-home .stories.two .story-body{padding:16px 16px;}
/* 전체보기(/stories) — 사연은 한 줄에 하나씩 (사진 좌 + 글 우) */
.nm-home .stories.one{grid-template-columns:1fr;}
.nm-home .stories.one .story{display:grid;grid-template-columns:0.7fr 1.8fr;}
.nm-home .stories.one .story-img{aspect-ratio:auto;min-height:168px;height:100%;}
.nm-home .stories.one .story-body{padding:17px 20px;}
/* 전체보기 영상 — 한 줄 레일이 아니라 줄바꿈 그리드로 전부 나열 */
.nm-home .story-vids.vids-wrap{flex-wrap:wrap;overflow:visible;cursor:default;}
/* 영상 사연 (유튜브) — 한 줄 가로 레일. 카드는 모든 화면에서 데스크톱 크기(178px)
   고정, 넘치면 좌우 스와이프 + 반투명 화살표로 넘겨보기 */
.nm-home .vid-scroller{position:relative;}
.nm-home .story-vids{display:flex;gap:12px;margin-top:14px;overflow-x:auto;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding-bottom:4px;}
.nm-home .story-vids::-webkit-scrollbar{display:none;}
.nm-home .vid-arrow{position:absolute;top:42%;transform:translateY(-50%);z-index:6;
  width:27px;height:27px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(127,183,126,.52);color:#fff;display:none;align-items:center;
  justify-content:center;font-size:11px;
  box-shadow:0 2px 8px rgba(127,183,126,.22);transition:background .16s;}
.nm-home .vid-arrow.left{left:6px;}
.nm-home .vid-arrow.right{right:6px;}
.nm-home .vid-arrow:hover{background:rgba(127,183,126,.88);}
.nm-home .story-vids{cursor:grab;}
.nm-home .story-vids.dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none;}
.nm-home .story-vids.dragging .svid{pointer-events:none;}
.nm-home .svid{flex:0 0 178px;scroll-snap-align:start;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;padding-bottom:9px;display:block;
  transition:transform .14s,box-shadow .14s;}
.nm-home .svid:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(80,20,40,.10);}
.nm-home .svid-th{aspect-ratio:16/9;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#F4EEE4,#E7DDC9);}
.nm-home .svid-th.alt{background:linear-gradient(135deg,#E7EDD8,#C5D2A8);}
.nm-home .svid-th.alt2{background:linear-gradient(135deg,#F6EBD0,#E8D49E);}
.nm-home .svid-th .stripes{position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent 0 14px,rgba(255,255,255,.25) 14px 15px);}
.nm-home .svid-th img{width:100%;height:100%;object-fit:cover;transition:transform .3s;}
.nm-home .svid:hover .svid-th img{transform:scale(1.06);}
.nm-home .svid-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:38px;height:38px;border-radius:50%;background:rgba(233,30,99,.92);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;
  padding-left:2px;box-shadow:0 4px 14px rgba(0,0,0,.25);transition:transform .16s;}
.nm-home .svid:hover .svid-play{transform:translate(-50%,-50%) scale(1.14);}
.nm-home .svid.playing .svid-play{display:none;}
.nm-home .svid-play{width:32px;height:32px;font-size:10px;}
.nm-home .svid-soon{position:absolute;left:50%;top:calc(50% + 26px);
  transform:translateX(-50%);font-size:10px;font-weight:700;color:var(--muted);
  background:rgba(255,255,255,.88);padding:2px 8px;border-radius:6px;white-space:nowrap;}
.nm-home .svid-t{font-size:11.5px;font-weight:700;padding:7px 9px 1px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.nm-home .svid-m{font-size:10.5px;color:var(--muted);padding:0 9px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nm-home .story{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;}
.nm-home .story-img{aspect-ratio:5/3;position:relative;
  background:linear-gradient(135deg,#F4EEE4,#E7DDC9);}
.nm-home .story-img.alt{background:linear-gradient(135deg,#E7EDD8,#C5D2A8);}
.nm-home .story-img.alt2{background:linear-gradient(135deg,#F6EBD0,#E8D49E);}
.nm-home .story-img .stripes{position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent 0 14px,rgba(255,255,255,.25) 14px 15px);}
/* 이미지 없는 예시 상태의 placeholder 라벨 — 하단은 이름·지역 오버레이 자리라 상단으로 */
.nm-home .ph-lab{position:absolute;left:13px;top:13px;font-family:'JetBrains Mono',monospace;
  font-size:10px;color:var(--ink-2);background:rgba(255,255,255,.85);padding:4px 8px;border-radius:5px;}
/* 이름·지역을 본문이 아니라 사진 하단에 오버레이 — 어두운 그라디언트로 흰 글자 가독성 확보 */
.nm-home .story-img-meta{position:absolute;left:0;right:0;bottom:0;
  padding:22px 13px 10px;font-size:11.5px;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.6),transparent);}
.nm-home .story-img-meta b{font-weight:700;}
.nm-home .story-body{padding:20px;}
.nm-home .story-tag{display:inline-flex;align-items:center;gap:5px;background:var(--pink-50);
  color:var(--pink-700);padding:4px 10px;border-radius:999px;font-size:10.5px;font-weight:700;
  margin-bottom:6px;}
.nm-home .story-tag.g{background:var(--green-soft);color:var(--green);}
.nm-home .story-tag.y{background:var(--gold-soft);color:var(--gold);}
.nm-home .story-title{font-family:'Noto Serif KR',serif;font-weight:700;font-size:16px;
  line-height:1.4;margin-bottom:9px;}
.nm-home .story-excerpt{color:var(--muted);font-size:12.5px;line-height:1.65;margin-bottom:13px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.nm-home .story-meta{display:flex;align-items:center;gap:9px;padding-top:11px;
  border-top:1px solid var(--line);font-size:11.5px;color:var(--muted);}
.nm-home .story-meta .av{width:24px;height:24px;border-radius:50%;background:var(--pink-200);
  color:var(--pink-700);display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:800;}
.nm-home .story-meta b{color:var(--ink-2);font-weight:700;}

/* ----- 왜 농민.com ----- */
/* 제목-박스 간격을 더 좁힌다 */
.nm-home #why-section .sec-head{margin-bottom:4px;}
.nm-home .why{background:linear-gradient(135deg,#FFF6FA,#FFEEF3);border:1px solid var(--pink-100);
  border-radius:18px;padding:16px 22px;display:grid;grid-template-columns:repeat(4,1fr);
  row-gap:14px;column-gap:22px;}
.nm-home .why-item{display:flex;flex-direction:column;gap:6px;}
.nm-home .why-num{font-family:'Noto Serif KR',serif;font-weight:900;font-size:32px;
  color:var(--pink-500);line-height:1;letter-spacing:-.03em;}
.nm-home .why-num .unit{font-size:15px;color:var(--pink-700);margin-left:2px;
  font-family:'Pretendard Variable','Pretendard',sans-serif;font-weight:700;}
.nm-home .why-title{font-weight:800;font-size:15px;}
.nm-home .why-desc{color:var(--muted);font-size:12.5px;line-height:1.6;}
/* 차별점 — 외부 박스 없이(내용 자체가 이미 칩 형태) 화면에 들어오면(.why.seen)
   옛 방식에 빗금이 그어진 뒤, 농민.com 칩이 살짝 커지며 톡 튀어나오고 이후
   은은한 펄스로 계속 시선을 끈다 (항목별 시차 --vd) */
/* 옛 방식(취소선)은 왼쪽, 농민.com 값은 오른쪽 끝(space-between)에 붙인다.
   아랫줄로 안 넘어가게 nowrap 고정 */
.nm-home .why-vs{margin-top:0;font-size:11.5px;color:var(--ink-2);
  font-family:'JetBrains Mono',monospace;
  display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:7px;}
.nm-home .why-vs s{color:var(--muted);text-decoration:none;position:relative;
  white-space:nowrap;flex-shrink:0;}
/* 왼쪽 취소선 위 두 대각선(::after=↗, ::before=↘)이 함께 반복 애니메이션.
   한 사이클(9초) 동안: 두 획이 순서대로 슬라이드로 그어져 X자를 만들고 →
   잠시 유지 → 둘 다 페이드아웃으로 사라졌다가 → 다시 그려지기를 무한 반복.
   두 획 모두 사라지므로 '사라졌다 X로 다시 칠하는' 강조 효과가 난다.
   항목별로 시차(--vd2)를 둬 각 카드가 서로 다른 타이밍에 반짝인다 */
.nm-home .why-vs s::after,.nm-home .why-vs s::before{
  content:'';position:absolute;left:-2px;top:50%;height:1.7px;width:0;
  background:var(--pink-400);border-radius:1px;transform-origin:center center;opacity:0;}
.nm-home .why-vs s::after{transform:translateY(-50%) rotate(-8deg);}   /* ↗ 왼쪽아래→오른쪽위 */
.nm-home .why-vs s::before{transform:translateY(-50%) rotate(8deg);}   /* ↘ 왼쪽위→오른쪽아래 */
@keyframes nmVsXLoop{
  0%{width:0;opacity:1;}
  10%{width:calc(100% + 4px);opacity:1;}   /* 슬라이드로 그어짐 */
  80%{width:calc(100% + 4px);opacity:1;}   /* X 유지 */
  92%{width:calc(100% + 4px);opacity:0;}   /* 페이드아웃 */
  100%{width:0;opacity:0;}                 /* 리셋(다음 사이클 대비) */
}
.nm-home .why.seen .why-vs s::after{animation:nmVsXLoop 9s ease-in-out infinite;
  animation-delay:var(--vd2,3s);}
/* ::before 는 ::after 보다 .5s 늦게 — 한 획씩 순서대로 그어져 X가 완성되는 느낌 */
.nm-home .why.seen .why-vs s::before{animation:nmVsXLoop 9s ease-in-out infinite;
  animation-delay:calc(var(--vd2,3s) + .5s);}
/* 농민.com 강조 칩 — 오른쪽 끝, 읽을 수 있는 크기 유지 */
.nm-home .why-vs .win{display:inline-flex;align-items:center;flex-shrink:0;margin-left:auto;
  background:var(--pink-50);color:var(--pink-600);font-weight:800;font-size:12.5px;
  padding:3px 8px;border-radius:6px;border:1px solid var(--pink-100);
  white-space:nowrap;opacity:.35;}
/* 등장 — 톡 튀어나오지만 글자 크기는 그대로, 테두리 링만 확산 */
@keyframes nmVsWinIn{
  0%{opacity:.35;box-shadow:0 0 0 0 rgba(233,30,99,0);}
  55%{opacity:1;box-shadow:0 0 0 5px rgba(233,30,99,.16);}
  100%{opacity:1;box-shadow:0 0 0 0 rgba(233,30,99,0);border-color:var(--pink-100);}
}
/* 정착 이후 — 테두리·그림자만 은은하게 펄스(텍스트는 고정) */
@keyframes nmVsWinPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(233,30,99,.22);border-color:var(--pink-100);}
  50%{box-shadow:0 0 0 4px rgba(233,30,99,0);border-color:var(--pink-300);}
}
.nm-home .why.seen .why-vs .win{
  animation:nmVsWinIn .55s ease-out forwards,
            nmVsWinPulse 2.4s ease-in-out infinite;
  animation-delay:calc(var(--vd,0s) + .45s), calc(var(--vd,0s) + 1s);
}
/* 항목별 시차 — 왼쪽부터 차례로 빗금·강조 */
.nm-home .why-item:nth-child(1) .why-vs{--vd:.15s;--vd2:5s;}
.nm-home .why-item:nth-child(2) .why-vs{--vd:.45s;--vd2:7s;}
.nm-home .why-item:nth-child(3) .why-vs{--vd:.75s;--vd2:6s;}
.nm-home .why-item:nth-child(4) .why-vs{--vd:1.05s;--vd2:9s;}
@media (prefers-reduced-motion:reduce){
  .nm-home .why-vs s::after,.nm-home .why-vs s::before{width:calc(100% + 4px);opacity:1;animation:none;}
  .nm-home .why-vs .win{opacity:1;animation:none;}
}

/* ----- 판매자 CTA ----- */
/* 좌우 대칭 2칼럼 — 박스 가운데 중앙선을 기준으로 왼쪽엔 안내문구+'판매자 등록하기',
   오른쪽엔 혜택칩+1·2·3 카드+'수수료 안내'. 각 칼럼은 세로 flex(space-between)라
   콘텐츠 길이가 달라도 두 버튼이 항상 같은 하단 라인에서 만난다. */
.nm-home .cta{margin-top:20px;background:var(--ink);color:#fff;border-radius:20px;padding:14px 28px;
  display:grid;grid-template-columns:1fr 1fr;column-gap:32px;
  position:relative;overflow:hidden;}
.nm-home .cta-left,.nm-home .cta-right{position:relative;z-index:2;min-width:0;
  display:flex;flex-direction:column;justify-content:space-between;height:100%;}
.nm-home .cta-left{grid-column:1;grid-row:1;}
.nm-home .cta-right{grid-column:2;grid-row:1;}
.nm-home .cta::before{content:'';position:absolute;right:-80px;top:-80px;width:360px;height:360px;
  border-radius:50%;background:radial-gradient(circle,var(--pink-500),transparent 70%);opacity:.4;}
.nm-home .cta-eyebrow{color:var(--pink-200);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:8px;}
.nm-home .cta h2{font-family:'Noto Serif KR',serif;font-weight:900;font-size:26px;line-height:1.25;
  margin-bottom:8px;letter-spacing:-.02em;}
.nm-home .cta p{color:rgba(255,255,255,.72);font-size:13.5px;margin-bottom:0;}
/* 버튼 — 각자 칼럼 하단, 칼럼 폭만큼 꽉 채워 좌우가 중앙선 기준 대칭으로 보이게 */
.nm-home .btn-prim{margin-top:10px;background:var(--pink-500);color:#fff;padding:10px 16px;
  border-radius:10px;font-weight:700;font-size:13.5px;display:inline-flex;align-items:center;
  justify-content:center;gap:7px;white-space:nowrap;}
.nm-home .btn-prim:hover{background:var(--pink-600);}
.nm-home .btn-sec{margin-top:10px;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3);
  padding:10px 16px;border-radius:10px;font-weight:700;font-size:13.5px;
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;}
.nm-home .btn-sec:hover{background:rgba(255,255,255,.08);}
/* 혜택 줄 — 1·2·3 카드 위, 우측 칼럼 폭에 맞춰 왼쪽 정렬. 절대 2줄로 안 넘어가게
   nowrap 고정 — 폭이 부족하면(아주 좁은 화면) 줄바꿈 대신 가로 스크롤로 처리 */
.nm-home .cta-perks{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:5px 12px;
  margin-bottom:6px;font-size:11px;color:rgba(255,255,255,.6);white-space:nowrap;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.nm-home .cta-perks::-webkit-scrollbar{display:none;}
.nm-home .cta-perks span{flex-shrink:0;}
/* '수수료 1%' 칩 — 모바일 포함 항상 노출(3개 다 보이게) */
/* 단계 카드 — 세로로 담백하게 쌓는다(위아래 여백 최소화) */
.nm-home .cta-steps{position:relative;z-index:2;display:flex;flex-direction:column;
  gap:6px;}
/* 단계 박스 — 위아래 패딩을 좁혀 섹션 전체 높이를 줄인다 */
.nm-home .cta-step{display:flex;gap:11px;align-items:center;padding:6px 13px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:11px;}
.nm-home .cta-step-num{width:30px;height:30px;border-radius:8px;flex-shrink:0;
  background:var(--pink-500);color:#fff;font-weight:800;display:flex;align-items:center;
  justify-content:center;font-size:13px;}
.nm-home .cta-step h4{font-size:13.5px;font-weight:800;margin-bottom:1px;line-height:1.3;}
.nm-home .cta-step p{color:rgba(255,255,255,.6);font-size:11.5px;line-height:1.4;}

/* ============================================================
   반응형
   ★ 모바일 기준 폭: 422px (대표 실기기 아이폰 실측 뷰포트 — 2026-07 확인).
     모바일 레이아웃을 새로 만들거나 고칠 때는 422px 에서 우선 검증하고,
     390px(아이폰 15)·360px 까지 가로 넘침 0 을 유지할 것.
   ============================================================ */
@media (max-width:980px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));}
  .nm-home .spotlight{grid-template-columns:1fr 1fr;}
  .nm-home .spot-photo{grid-column:1/-1;min-height:200px;}
  /* '예시' 상태는 좁은 화면에서도 좌(사진)·우(소개) 2단을 유지한다 */
  .nm-home .spotlight.intro .spot-photo{grid-column:1;min-height:170px;}
  .nm-home .tiles{grid-template-columns:repeat(3,1fr);}
  .nm-home .why{grid-template-columns:repeat(2,1fr);}
  .nm-home .stories{grid-template-columns:1fr;}
  .nm-home .stories.two{grid-template-columns:1fr;}
  /* 히어로 — '오늘의 농민.COM' 스탯 박스는 모바일에서 미노출 */
  .nm-home .hero{grid-template-columns:1fr;}
  .nm-home .hero-stats{display:none;}
  /* 산지에서 바로 — 지도(좌) + 10곳 리스트(우, 1~5위/6~10위 2열).
     지도는 유지하고 리스트 폭을 줄여 지도와 조화롭게 (어느 모바일 폭이든 비율 일정) */
  /* 지도(디자인)가 주인공 — 지도를 크게, 내용이 적은 리스트는 좁게 */
  .nm-home .regions{grid-template-columns:1.15fr 0.85fr;gap:9px;padding:10px;}
  /* max-width:100% — 지도 폭이 리스트 높이에 끌려 트랙보다 커지며 겹치는 것 방지 */
  .nm-home .map-wrap{max-width:100%;overflow:hidden;}
  .nm-home .map-pin.season .map-tip{display:none;}
  /* 지도가 절반 폭이라 핀·범례도 축소 */
  .nm-home .map-pin.season .pin-emoji{width:19px;height:19px;font-size:9.5px;border-width:1.5px;}
  .nm-home .map-pin.season.big .pin-emoji{width:22px;height:22px;font-size:11px;}
  .nm-home .map-pin.season .ripple{width:19px;height:19px;margin:-9.5px 0 0 -9.5px;border-width:1.5px;}
  .nm-home .map-legend{font-size:8.5px;padding:3px 6px;left:6px;top:6px;gap:4px;}
  .nm-home .map-legend .swatch{width:7px;height:7px;}
  .nm-home .region-list{gap:5px 6px;}
  .nm-home .region-side-h{font-size:13.5px;}
  .nm-home .region-side-s{font-size:10.5px;margin-bottom:9px;}
  .nm-home .region-row{padding:6px 7px;gap:6px;}
  .nm-home .region-rank{width:17px;height:17px;font-size:9.5px;}
  .nm-home .region-name{font-size:11px;}
  .nm-home .region-item{font-size:9.5px;}
  /* 판매자 CTA — 좁은 화면에서도 좌우 대칭 2칼럼 유지, 여백·글자만 축소 */
  .nm-home .cta{padding:10px 14px;margin-top:16px;column-gap:14px;}
  .nm-home .cta h2{font-size:16px;margin-bottom:6px;}
  .nm-home .cta p{font-size:10.5px;}
  .nm-home .btn-prim,.nm-home .btn-sec{margin-top:10px;padding:8px 8px;font-size:11px;}
  .nm-home .cta-perks{gap:6px;margin-top:6px;margin-bottom:3px;font-size:8.5px;}
  .nm-home .cta-steps{gap:4px;}
  .nm-home .cta-step{padding:4px 8px;gap:6px;}
  .nm-home .cta-step p{display:block;font-size:8.5px;margin-top:1px;line-height:1.3;}
  .nm-home .cta-step h4{font-size:10px;margin-bottom:0;line-height:1.25;}
  .nm-home .cta-step-num{width:18px;height:18px;border-radius:6px;font-size:9.5px;}
}
@media (max-width:780px){
  .wrap,.page{padding:0 16px;}
  .topstrip{font-size:11px;}
  /* 좁은 화면: '판매자 센터/등록' 박스(.ts-right)는 유지, '모든 상품 택배비 포함가'만 숨김 */
  .ts-left{overflow:hidden;}
  .ts-left .ts-dim,.ts-left .ts-sep{display:none;}
  .nmhd{padding:11px 0 0;}
  .nmhd-row{gap:12px;}
  .logo{font-size:23px;order:1;}
  .logo .dot{font-size:26px;}
  .logo .com{font-size:14px;}
  .hd-actions{order:2;margin-left:auto;gap:13px;}
  .icon-btn span:not(.badge-dot){display:none;}
  .icon-btn i{font-size:20px;}
  .seller-btn{padding:9px 12px;font-size:12px;}
  .searchbar{order:3;flex:1 0 100%;max-width:none;height:44px;}
  /* 모바일: 카테고리 칩 한 줄 유지 — 칩을 줄여 390px에도 전부 들어가게 */
  .cats{padding:11px 0 4px;flex-wrap:nowrap;overflow-x:auto;gap:5px;}
  .cat{padding:5px 9px;font-size:11px;}
  .cat-count{display:none;}
  .nm-home .hero{padding:20px;gap:15px;}
  .nm-home .hero h1{font-size:21px;}
  .nm-home .hero p{font-size:12.5px;}
  .nm-home section{margin-top:22px;}
  .nm-home #calendar{margin-top:11px;}
  .nm-home .sec-title h2{font-size:18px;}
  .nm-home .sec-title .sub{display:none;}
  .nm-home .spotlight{grid-template-columns:1fr;}
  .nm-home .spot-body{border-right:none;border-bottom:1px dashed var(--line);}
  /* 왜 농민.com — 기존 2칼럼 그리드 유지 */
  .nm-home .why{grid-template-columns:repeat(2,1fr);padding:12px;gap:12px 10px;}
  .nm-home .why-num{font-size:23px;}
  .nm-home .why-num .unit{font-size:12px;}
  .nm-home .why-title{font-size:12.5px;}
  .nm-home .why-desc{font-size:11px;line-height:1.55;}
  .nm-home .why-vs{font-size:10px;margin-top:0;gap:3px;}
  .nm-home .why-vs .win{font-size:10.5px;padding:2px 6px;}
  .nm-home .tiles{grid-template-columns:repeat(3,1fr);}
  .nm-home .ticker-label{font-size:11.5px;padding-right:12px;}
  .nmfoot{padding:22px 0 18px;margin-top:26px;}
  .foot-grid{grid-template-columns:1fr 1fr;gap:22px;}
  /* 제철 달력 — 좌우 스크롤 금지: 해당 월 ±1만 넓게, 나머지 달은 좁게 압축 */
  .nm-home .cal-scroll{overflow-x:visible;}
  .nm-home .cal-grid{min-width:0;grid-template-columns:var(--cal-cols,84px repeat(12,1fr));}
  .nm-home .cal-row .label{font-size:10px;padding:2px 2px;gap:3px;}
  .nm-home .cal-row .label .em{font-size:12px;}
  .nm-home .cal-row .label .ktag{display:none;}
  /* 좁은 화면 — 축약명으로 교체 (포도류/해초/감귤류 등) */
  .nm-home .cal-row .label .nm-full{display:none;}
  .nm-home .cal-row .label .nm-short{display:inline;}
  /* 범례도 좁은 화면에선 축약해 '7월 제철 절정'과 같은 줄에 계속 들어가게 */
  .nm-home .cal-legend{gap:7px;font-size:9.5px;}
  .nm-home .cal-legend i{width:9px;height:7px;margin-right:2px;}
  .nm-home .cal-legend .lg-full{display:none;}
  .nm-home .cal-legend .lg-short{display:inline;}
  .nm-home .cal-month{font-size:8.5px;padding:2px 0;}
  /* 넓게 표시되는 해당 월 ±1(예: 6월·7월·8월)에는 '월' 함께 표기 */
  .nm-home .cal-month.near .mw{display:inline;font-size:.85em;}
  .nm-home .cal-cell{height:11px;}
  .nm-home .seasons{padding:15px 13px;}
}
@media (max-width:560px){
  /* 좁은 폰은 2열 고정 — 3열로 쪼개면 카드가 좁아져 글자가 줄바꿈된다 */
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  /* 좁은 2열에서도 '농민 ○○○님 · 농장명'을 모두 보여준다.
     글자를 약간 줄이고 이름·농장명 제한(6자·10자)에 맞춰 한 줄에 들어가게 한다. */
  .pcard .card-farmer{font-size:10.5px; gap:4px;}
  .pcard .card-farmer b{font-size:11px;}
  .nm-home .tiles{grid-template-columns:repeat(2,1fr);}
  /* 좁은 폰: 산지 리스트 2열은 글자가 깨지므로 1열 + 상위 5곳만 (지도 옆에) */
  /* 1열 5행 — 지도 높이에 맞춰 행이 늘어나 여백 없이 채움 */
  .nm-home .region-list{grid-template-columns:1fr;grid-template-rows:repeat(5,1fr);}
  .nm-home .region-row:nth-child(n+6){display:none;}
  .nm-home .region-name{font-size:11.5px;}
  .nm-home .region-item{font-size:10px;}
  /* 지도가 주인공 — 지도 열을 크게(약 62%), 리스트는 우측에 좁게 */
  .nm-home .regions{grid-template-columns:1.6fr 1fr;gap:7px;padding:9px;}
  .nm-home .region-row{padding:5px 6px;gap:5px;}
  .nm-home .region-rank{width:15px;height:15px;font-size:8.5px;border-radius:5px;}
  .nm-home .region-name{font-size:10.5px;}
  .nm-home .region-item{font-size:9px;}
  .nm-home .region-side-h{font-size:12px;margin-bottom:6px;}
  /* 사연 카드 — 좁은 화면에서도 좌(사진)·우(태그·제목·본문) 2단 유지, 사진만 살짝 낮게 */
  .nm-home .stories.two .story-img{min-height:150px;}
  .nm-home .story-img-meta{padding:16px 9px 8px;font-size:10px;}
  .nm-home .stories.two .story-body{padding:12px 11px;}
  .nm-home .story-tag{font-size:9.5px;padding:3px 8px;margin-bottom:4px;}
  .nm-home .story-title{font-size:13.5px;margin-bottom:5px;}
  .nm-home .story-excerpt{font-size:11px;margin-bottom:0;-webkit-line-clamp:3;}
  .nm-home .svid-t{font-size:11.5px;}
  /* 카테고리 칩 — 기준 폭 422px에서 9개가 한 줄에 전부 들어가게 최종 축소.
     (422px 미만 극좁은 폰은 한 줄 유지 + 내부 가로 스와이프) */
  .cats{gap:3px;}
  .cat{padding:3px 6px;font-size:9.5px;}
  .ts-left .ts-dim,.ts-left .ts-sep{display:none;}
  .nm-home .hero h1{font-size:19px;}
  /* 푸터: 세로로 길어지지 않게 — 로고 블록은 전체 폭, 링크 3분류는 가로 배열 */
  .foot-grid{grid-template-columns:repeat(3,1fr);gap:14px 12px;}
  .foot-grid>div:first-child{grid-column:1 / -1;}
  .foot-h{font-size:12px;margin-bottom:6px;}
  .foot-list{font-size:11.5px;gap:4px;}
  /* 사업자정보 줄 — 글자·간격을 줄여 2줄 안에 들어가도록 */
  .foot-biz{font-size:9.5px;gap:2px 6px;padding-top:10px;}
  /* 하단 고지문 — 모바일에서도 작게 한 줄로 */
  .foot-bot{flex-direction:column;gap:6px;}
  .foot-bot div{font-size:9px;white-space:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;}
  .foot-bot div::-webkit-scrollbar{display:none;}
}
@media (max-width:435px){
  /* 산지 리스트 — 카드 내부 여백·글자를 더 줄여 행 높이를 낮춤.
     (지도 높이=행 높이라 리스트가 컴팩트해지면 지도 폭 고정 문제도 함께 해소) */
  .nm-home .regions{gap:6px;padding:8px;}
  .nm-home .region-list{gap:4px;}
  .nm-home .region-row{padding:4px 5px;gap:4px;}
  .nm-home .region-rank{width:13px;height:13px;font-size:8px;border-radius:4px;}
  .nm-home .region-name{font-size:9.5px;}
  .nm-home .region-items{gap:1px 5px;margin-top:1px;}
  .nm-home .region-item{font-size:8.5px;}
  .nm-home .region-side-h{font-size:11px;margin-bottom:5px;}
}

/* ============================================================
   약관 / 정책 / 수수료 안내 문서 페이지 (.doc)
   ============================================================ */
.doc{max-width:880px;margin:24px auto 0;padding:0 24px;}
.doc-hd{background:var(--grad);color:#fff;border-radius:18px;padding:26px 28px;
  position:relative;overflow:hidden;}
.doc-hd::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 90% 15%,rgba(255,255,255,.16),transparent 45%);}
.doc-hd .eye{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.8);margin-bottom:8px;}
.doc-hd h1{font-size:24px;font-weight:900;letter-spacing:-.02em;}
.doc-hd p{font-size:13px;opacity:.93;margin-top:8px;line-height:1.6;}
.doc-tabs{display:flex;gap:7px;margin:14px 0;flex-wrap:wrap;}
.doc-tab{padding:8px 15px;border-radius:999px;background:#fff;border:1px solid var(--line);
  font-size:12.5px;font-weight:700;color:var(--ink-2);}
.doc-tab:hover{border-color:var(--pink-400);color:var(--pink-500);}
.doc-tab.on{background:var(--ink);color:#fff;border-color:var(--ink);}
.doc-body{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px;}
.doc-body section{margin-bottom:8px;}
.doc-body h2{font-size:16px;font-weight:800;margin:26px 0 11px;padding-left:11px;
  border-left:4px solid var(--pink-500);letter-spacing:-.01em;}
.doc-body h2:first-child{margin-top:0;}
.doc-body h3{font-size:13.5px;font-weight:800;margin:15px 0 6px;color:var(--ink);}
.doc-body p,.doc-body li{font-size:13px;color:var(--ink-2);line-height:1.78;}
.doc-body p{margin-bottom:7px;}
.doc-body ul,.doc-body ol{padding-left:20px;margin:6px 0 10px;}
.doc-body li{margin-bottom:4px;}
.doc-body strong{font-weight:800;color:var(--ink);}
.doc-body .muted{color:var(--muted);font-size:12px;}
.doc-note{background:var(--gold-soft);border:1px solid #E8D49E;border-radius:11px;
  padding:13px 16px;font-size:12.5px;color:#8E6A1F;margin:12px 0;line-height:1.75;}
.doc-key{background:var(--pink-50);border:1px solid var(--pink-100);border-radius:11px;
  padding:14px 16px;margin:12px 0;}
.doc-key b{color:var(--pink-700);}
.doc-table{width:100%;border-collapse:collapse;margin:12px 0;font-size:12.5px;}
.doc-table th,.doc-table td{border:1px solid var(--line);padding:9px 11px;
  text-align:left;vertical-align:top;}
.doc-table th{background:var(--pink-50);color:var(--pink-700);font-weight:700;}
.doc-table td.c{text-align:center;}
.doc-table tr.hl td{background:var(--green-soft);font-weight:700;}
.fee-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:14px 0;}
.fee-card{border:1px solid var(--line);border-radius:13px;padding:16px;position:relative;}
.fee-card.rec{border-color:var(--pink-400);background:var(--pink-50);}
.fee-card .rec-badge{position:absolute;top:-9px;left:14px;background:var(--pink-500);
  color:#fff;font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:999px;}
.fee-card .fc-name{font-size:14px;font-weight:800;display:flex;align-items:center;gap:7px;}
.fee-card .fc-total{font-size:22px;font-weight:900;color:var(--pink-600);margin:8px 0 2px;}
.fee-card .fc-total small{font-size:12px;color:var(--muted);font-weight:600;}
.fee-card .fc-row{font-size:12px;color:var(--muted);margin-top:5px;}
.fee-card .fc-desc{font-size:12px;color:var(--ink-2);line-height:1.6;margin-top:9px;
  padding-top:9px;border-top:1px dashed var(--line);}
@media (max-width:760px){
  .doc{padding:0 16px;}
  .doc-body{padding:20px;}
  .doc-hd h1{font-size:20px;}
  .fee-cards{grid-template-columns:1fr;}
  .doc-table{font-size:11.5px;}
  .doc-table th,.doc-table td{padding:7px 8px;}
}

/* ============================================================
   AI 상담 위젯 — 농경팀 상담원 초록
   ============================================================ */
.nm-consult{position:fixed;right:20px;bottom:20px;z-index:90;}
.nc-fab{display:flex;align-items:center;gap:8px;background:var(--pink-500);color:#fff;
  border-radius:999px;padding:13px 19px;box-shadow:0 6px 20px rgba(233,30,99,.4);
  font-weight:800;font-size:14px;}
.nc-fab i{font-size:17px;}
.nc-fab:hover{background:var(--pink-600);}
.nc-fab.on{display:none;}
.nc-panel{position:absolute;right:0;bottom:0;width:362px;max-width:calc(100vw - 32px);
  height:448px;max-height:calc(100vh - 96px);background:#fff;border:1px solid var(--line);
  border-radius:18px;box-shadow:0 16px 48px rgba(80,20,40,.26);
  display:none;flex-direction:column;overflow:hidden;}
.nc-panel.on{display:flex;}
.nc-head{background:var(--grad);color:#fff;padding:13px 15px;display:flex;
  align-items:center;justify-content:space-between;}
.nc-head-l{display:flex;align-items:center;gap:10px;}
.nc-ava{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.2);
  border:1.5px solid rgba(255,255,255,.55);display:flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:800;flex-shrink:0;}
.nc-name{font-size:14px;font-weight:800;}
.nc-stat{font-size:11px;opacity:.88;margin-top:1px;display:flex;align-items:center;gap:5px;}
.nc-stat::before{content:'';width:6px;height:6px;border-radius:50%;background:#7CFC9B;}
.nc-x{color:#fff;font-size:18px;width:28px;height:28px;}
.nc-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;
  background:var(--cream);}
.nc-msg{display:flex;}
.nc-msg.me{justify-content:flex-end;}
.nc-bubble{max-width:82%;padding:10px 13px;border-radius:13px;font-size:13px;
  line-height:1.62;white-space:pre-wrap;word-break:break-word;}
.nc-msg.bot .nc-bubble{background:#fff;border:1px solid var(--line);
  border-bottom-left-radius:4px;color:var(--ink-2);}
.nc-msg.me .nc-bubble{background:var(--pink-500);color:#fff;border-bottom-right-radius:4px;}
.nc-typing{display:flex;gap:4px;align-items:center;}
.nc-typing span{width:6px;height:6px;border-radius:50%;background:var(--pink-200);
  animation:ncblink 1s infinite;}
.nc-typing span:nth-child(2){animation-delay:.15s;}
.nc-typing span:nth-child(3){animation-delay:.3s;}
@keyframes ncblink{0%,80%,100%{opacity:.3}40%{opacity:1}}
.nc-quick{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px 4px;background:#fff;}
.nc-quick button{font-size:11.5px;font-weight:600;border:1px solid var(--line);
  background:var(--pink-50);color:var(--pink-700);padding:6px 11px;border-radius:999px;}
.nc-quick button:hover{border-color:var(--pink-400);}
.nc-input{display:flex;gap:8px;padding:10px 12px 6px;background:#fff;}
.nc-input input{flex:1;border:1px solid var(--line);border-radius:999px;padding:10px 14px;
  font-size:13px;font-family:inherit;}
.nc-input input:focus{border-color:var(--pink-400);}
.nc-input button{width:40px;height:40px;border-radius:50%;background:var(--pink-500);
  color:#fff;flex-shrink:0;font-size:14px;}
.nc-input button:hover{background:var(--pink-600);}
.nc-foot{font-size:10.5px;color:var(--muted);text-align:center;padding:4px 12px 10px;
  background:#fff;line-height:1.5;}
@media (max-width:560px){
  .nm-consult{right:14px;bottom:14px;}
  .nc-panel{width:calc(100vw - 28px);height:calc(100vh - 120px);}
  .nc-fab-txt{display:none;}
}

/* ===== 소셜 로그인 (카카오·구글·애플) ===== */
.sns-wrap{margin-top:16px;}
.sns-sep{display:flex;align-items:center;gap:12px;margin:2px 0 14px;
  color:var(--muted);font-size:12px;font-weight:600;}
.sns-sep::before,.sns-sep::after{content:"";flex:1;height:1px;background:var(--line);}
.sns-btn{display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;padding:13px;border-radius:11px;font-size:14.5px;font-weight:700;
  margin-bottom:9px;border:1px solid transparent;}
.sns-btn .sns-ic{width:19px;height:19px;flex-shrink:0;}
.sns-kakao{background:#FEE500;color:#191600;}
.sns-kakao:hover{background:#F5DD00;}
.sns-google{background:#fff;color:#1F1F1F;border-color:var(--line);}
.sns-google:hover{background:#F7F7F8;}
.sns-apple{background:#000;color:#fff;}
.sns-apple:hover{background:#1A1A1A;}