/* agrou 공통 스타일 — index.html 과 product.html 이 함께 사용합니다 */

:root { color-scheme: light; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  background:#FBFBF6; color:#16241A; -webkit-font-smoothing:antialiased;
  word-break: keep-all;          /* 한글 단어 중간 줄바꿈 방지 */
  overflow-wrap: break-word;
}

::selection { background: #BEE0B8; color: #17361A; }

/* ---------- 타이포그래피 정리 ---------- */
.font-display {
  letter-spacing: -0.032em;      /* 제목은 자간을 좁혀 또렷하게 */
  font-feature-settings: "ss01";
}
h1.font-display { letter-spacing: -0.042em; }
p, li, dd, dt, label, blockquote, figcaption { letter-spacing: -0.012em; }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- 버튼 상태 (기본 / hover / focus / active / disabled) ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:999px; font-weight:700; letter-spacing:-.01em; cursor:pointer;
  border:1px solid transparent; text-align:center;
  transition: transform 180ms cubic-bezier(.2,.7,.3,1),
              background-color 180ms ease,
              box-shadow 180ms ease,
              border-color 180ms ease,
              color 180ms ease;
}
.btn:focus-visible { outline:none; box-shadow:0 0 0 3px #FBFBF6, 0 0 0 6px rgba(76,168,63,.55); }
.btn:disabled, .btn[aria-disabled="true"] { opacity:.5; cursor:not-allowed; transform:none !important; box-shadow:none; }

.btn-primary { background:#3B8B31; color:#fff; box-shadow:0 10px 24px -8px rgba(59,139,49,.45); }
.btn-primary:hover { background:#2E6E27; transform:translateY(-2px); box-shadow:0 16px 30px -10px rgba(46,110,39,.5); }
.btn-primary:active { transform:translateY(0) scale(.985); background:#245420; }

.btn-secondary { background:#fff; color:#2E6E27; border-color:#BEE0B8; box-shadow:0 1px 2px rgba(23,54,26,.05); }
.btn-secondary:hover { background:#F1F8F0; border-color:#94CE8C; transform:translateY(-2px); }
.btn-secondary:active { transform:translateY(0) scale(.985); background:#DFF0DC; }

.btn-ghost { background:transparent; color:#2E6E27; }
.btn-ghost:hover { background:rgba(76,168,63,.10); }
.btn-ghost:active { background:rgba(76,168,63,.18); transform:scale(.985); }

.btn-sun { background:#F4A93C; color:#2A1B06; box-shadow:0 10px 24px -10px rgba(244,169,60,.6); }
.btn-sun:hover { background:#E89A25; transform:translateY(-2px); }
.btn-sun:active { transform:translateY(0) scale(.985); }

/* ---------- 폼 ---------- */
.field {
  width:100%; border:1px solid #D9E4D7; background:#fff; border-radius:14px;
  padding:.85rem 1rem; font-size:1rem; color:#16241A;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field::placeholder { color:#9BAA9C; }
.field:hover { border-color:#BEE0B8; }
.field:focus { outline:none; border-color:#4CA83F; box-shadow:0 0 0 4px rgba(76,168,63,.16); }
.field[aria-invalid="true"] { border-color:#C9603C; box-shadow:0 0 0 4px rgba(201,96,60,.14); }
.field-label { display:block; font-weight:700; font-size:.9rem; color:#2E6E27; margin-bottom:.5rem; }

.chip {
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  border:1px solid #D9E4D7; background:#fff; border-radius:999px;
  padding:.55rem 1rem; font-size:.9rem; font-weight:600; color:#5C6F5E;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.chip:hover { border-color:#94CE8C; background:#F1F8F0; }
.chip:active { transform:scale(.97); }
.chip input { position:absolute; opacity:0; width:0; height:0; }
.chip:has(input:checked) { background:#3B8B31; border-color:#3B8B31; color:#fff; }
.chip:has(input:focus-visible) { box-shadow:0 0 0 3px #FBFBF6, 0 0 0 6px rgba(76,168,63,.5); }

/* ---------- 검색 (헤더) ---------- */
.search { position:relative; }

/* 검색창에 글자를 칠 때 화면이 위로 올라가지 않게 합니다.
   ─────────────────────────────────────────────────────────
   맨 위 html 에 걸어 둔 scroll-padding-top:5rem 은 '#문의' 같은 링크로 이동할 때
   고정 헤더가 내용을 가리지 않도록 화면 위쪽 5rem 을 비워 두라는 뜻입니다.

   그런데 검색창은 그 고정 헤더 안에 있습니다. 그래서 브라우저는 글자를 칠 때마다
   "커서가 비워 둬야 할 5rem 안에 있으니 보이게 해 줘야겠다"고 판단해 페이지를
   위로 끌어올립니다. 헤더는 어차피 따라 붙어 다니므로 아무리 올려도 소용이 없어,
   결국 화면이 맨 위까지 올라가 버립니다.

   검색창을 쓰는 동안에만 이 여백을 꺼 둡니다. 본문 링크로 이동할 때는 그대로 적용됩니다. */
html:has(.search-input:focus) { scroll-padding-top: 0; }
.search-box { position:relative; display:flex; align-items:center; }
.search-icon {
  position:absolute; left:.85rem; width:1.05rem; height:1.05rem;
  color:#7C8F7E; pointer-events:none;
}
.search-input {
  width:100%; border:1px solid #D9E4D7; background:#fff; border-radius:999px;
  padding:.62rem 2.35rem .62rem 2.5rem; font-size:.92rem; color:#16241A;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.search-input::placeholder { color:#9BAA9C; }
.search-input:hover { border-color:#BEE0B8; }
.search-input:focus { outline:none; border-color:#4CA83F; box-shadow:0 0 0 4px rgba(76,168,63,.16); }
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-decoration { -webkit-appearance:none; appearance:none; }

.search-clear {
  position:absolute; right:.45rem; display:none;
  align-items:center; justify-content:center; width:1.75rem; height:1.75rem;
  border:0; border-radius:999px; background:transparent; color:#7C8F7E; cursor:pointer;
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.search[data-filled="true"] .search-clear { display:inline-flex; }
.search-clear:hover { background:#F1F8F0; color:#2E6E27; }
.search-clear:active { transform:scale(.92); }
.search-clear:focus-visible { outline:none; box-shadow:0 0 0 3px #FBFBF6, 0 0 0 5px rgba(76,168,63,.5); }

.search-panel {
  position:absolute; right:0; top:calc(100% + .6rem); z-index:60;
  width:min(24rem, calc(100vw - 2.5rem));
  border:1px solid #D9E4D7; background:#fff; border-radius:1.15rem; padding:.4rem;
  box-shadow:0 26px 50px -22px rgba(23,54,26,.38), 0 2px 6px rgba(23,54,26,.06);
  max-height:min(70vh, 26rem); overflow-y:auto; overscroll-behavior:contain;
}
.search-panel[hidden] { display:none; }

.search-item {
  display:flex; align-items:center; gap:.8rem;
  padding:.55rem .65rem; border-radius:.9rem; text-decoration:none;
  transition: background-color 150ms ease;
}
.search-item:hover,
.search-item[aria-selected="true"] { background:#F1F8F0; }
.search-item:active { background:#DFF0DC; }
.search-item:focus-visible { outline:none; box-shadow:0 0 0 3px #FBFBF6, 0 0 0 6px rgba(76,168,63,.5); }
.search-thumb {
  flex:none; width:2.85rem; height:2.85rem; border-radius:.75rem;
  object-fit:cover; background:#F1F8F0;
}
.search-text { min-width:0; }
.search-name { display:block; font-weight:700; font-size:.94rem; color:#16241A; }
/* 지역 · 농장명 · 농부 이름이 다 보이도록 좁은 화면에서는 두 줄까지 내려갑니다 */
.search-farm {
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  margin-top:.1rem; font-size:.8rem; line-height:1.45; color:#5C6F5E;
  overflow:hidden;
}
.search-item mark { background:#DFF0DC; color:#245420; border-radius:.25rem; padding:0 .12em; }

/* 결과 전체 보기 줄 */
.search-more {
  justify-content:space-between; gap:.6rem; margin-top:.2rem; padding:.75rem;
  border-top:1px solid #EDF3EC; border-radius:0 0 .9rem .9rem;
  font-weight:700; font-size:.88rem; color:#2E6E27;
}
.search-more svg { flex:none; width:1rem; height:1rem; transition: transform 200ms cubic-bezier(.2,.7,.3,1); }
.search-more:hover svg,
.search-more[aria-selected="true"] svg { transform:translateX(3px); }

.search-empty { padding:1rem .85rem; font-size:.9rem; line-height:1.7; color:#5C6F5E; }
.search-empty-link {
  display:inline-block; margin-top:.4rem; font-weight:700; color:#3B8B31;
  text-decoration:underline; text-underline-offset:4px; text-decoration-color:#BEE0B8;
}
.search-empty-link:hover { color:#245420; }

/* ---------- 탭 ---------- */
.tab {
  border-radius:999px; padding:.6rem 1.25rem; font-weight:700; font-size:.95rem;
  color:#5C6F5E; cursor:pointer; border:1px solid transparent; background:transparent;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.tab:hover { color:#2E6E27; background:rgba(76,168,63,.10); }
.tab:active { transform:scale(.97); }
.tab:focus-visible { outline:none; box-shadow:0 0 0 3px #FBFBF6, 0 0 0 6px rgba(76,168,63,.5); }
.tab[aria-selected="true"] { background:#17361A; color:#F1F8F0; }

/* ---------- 정렬 순서 선택 (농산물 목록) ---------- */
.sort-select {
  appearance:none; -webkit-appearance:none;
  border:1px solid #D9E4D7; background-color:#fff; border-radius:999px;
  padding:.6rem 2.4rem .6rem 1.1rem; font-size:.9rem; font-weight:700; color:#2E6E27;
  cursor:pointer;
  /* 오른쪽 화살표 (외부 이미지 없이 그립니다) */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6F5E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .85rem center; background-size:1.05rem 1.05rem;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.sort-select:hover { border-color:#94CE8C; background-color:#F1F8F0; }
.sort-select:active { transform:scale(.98); }
.sort-select:focus-visible { outline:none; border-color:#4CA83F; box-shadow:0 0 0 4px rgba(76,168,63,.16); }
.sort-select:disabled { opacity:.5; cursor:not-allowed; }
.sort-label { font-size:.86rem; font-weight:700; color:#7C8F7E; }

/* ---------- 카드 hover ---------- */
.card-hover { transition: transform 220ms cubic-bezier(.2,.7,.3,1), box-shadow 220ms ease; }
.card-hover:hover { transform:translateY(-6px); }

/* 상품 카드 링크 */
.card-link { display:flex; }
.card-link:focus-visible { outline:none; box-shadow:0 0 0 3px #FBFBF6, 0 0 0 6px rgba(76,168,63,.55); }
.card-link .card-thumb { transition: transform 420ms cubic-bezier(.2,.7,.3,1); }
.card-link:hover .card-thumb { transform:scale(1.045); }
.card-link .card-arrow { transition: transform 220ms cubic-bezier(.2,.7,.3,1); }
.card-link:hover .card-arrow { transform:translateX(3px); }

/* ---------- 상품 상세의 '이 농산물을 키운 농가' 카드 (product.html → farm.html) ---------- */
.farm-card:active { transform:translateY(-2px); }
.farm-card:focus-visible { outline:none; box-shadow:0 0 0 3px #FBFBF6, 0 0 0 6px rgba(76,168,63,.55); }
.farm-card .card-arrow { transition: transform 220ms cubic-bezier(.2,.7,.3,1); }
.farm-card:hover .card-arrow { transform:translateX(3px); }

/* ---------- 농가 카드 이름 링크 (farms.html → farm.html) ---------- */
.farm-link { transition: color 160ms ease; }
.farm-link:hover { color:#2E6E27; }
.farm-link:active { color:#245420; }
.farm-link:focus-visible { outline:none; border-radius:.6rem; box-shadow:0 0 0 3px #FBFBF6, 0 0 0 6px rgba(76,168,63,.5); }
.farm-link-arrow { transition: transform 200ms cubic-bezier(.2,.7,.3,1); }
.farm-link:hover .farm-link-arrow { transform:translateX(3px); }

/* ---------- FAQ ---------- */
.faq-panel { display:grid; grid-template-rows:0fr; transition: grid-template-rows 280ms cubic-bezier(.2,.7,.3,1); }
.faq-panel > div { overflow:hidden; }
.faq-item[data-open="true"] .faq-panel { grid-template-rows:1fr; }
.faq-item[data-open="true"] .faq-icon { transform:rotate(45deg); }
.faq-icon { transition: transform 260ms cubic-bezier(.2,.7,.3,1); }
.faq-q { transition: color 160ms ease, background-color 160ms ease; }
.faq-q:hover { color:#2E6E27; }
.faq-q:focus-visible { outline:none; box-shadow:0 0 0 3px #FBFBF6, 0 0 0 6px rgba(76,168,63,.5); border-radius:12px; }

/* ---------- 상세 페이지 갤러리 ---------- */
.thumb-btn {
  border:2px solid transparent; border-radius:1rem; overflow:hidden; cursor:pointer; background:#F1F8F0;
  transition: border-color 160ms ease, transform 160ms ease;
}
.thumb-btn:hover { transform:translateY(-2px); border-color:#94CE8C; }
.thumb-btn:active { transform:translateY(0) scale(.98); }
.thumb-btn:focus-visible { outline:none; box-shadow:0 0 0 3px #FBFBF6, 0 0 0 6px rgba(76,168,63,.5); }
.thumb-btn[aria-selected="true"] { border-color:#3B8B31; }

/* ---------- 스크롤 등장 ---------- */
.reveal { opacity:0; transform:translateY(22px); transition: opacity 620ms ease, transform 620ms cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity:1; transform:none; }

.grain {
  background-image:radial-gradient(rgba(76,168,63,.055) 1px, transparent 1.4px);
  background-size:26px 26px;
}

/* ══════════ 모바일 마감 ══════════
   좁은 화면·터치 기기에서만 적용됩니다. PC 화면은 그대로입니다. */

/* iOS 사파리는 입력창 글자가 16px 미만이면 누르는 순간 화면을 확대해 버립니다.
   (확대된 채로 페이지가 틀어져 보입니다.)
   그래서 좁은 화면에서만 16px 이상으로 맞춥니다. */
@media (max-width: 767px) {
  .search-input { font-size:1rem; padding-top:.7rem; padding-bottom:.7rem; }
  /* 관리자 페이지 입력창은 .92rem 등으로 작게 지정된 곳이 많아 함께 올립니다.
     (input.field 처럼 태그까지 붙여야 Tailwind 의 !text-[...] 를 이깁니다) */
  input.field, select.field, textarea.field { font-size:16px !important; }
}

/* 손가락으로 누르는 기기에서는 버튼이 40px 이라 살짝 빗나가기 쉽습니다.
   보이는 크기는 그대로 두고, "눌리는 영역"만 44px 로 넓힙니다. (권장 최소 크기)
   헤더의 검색·로그인·메뉴 버튼이 여기 해당합니다. */
@media (hover: none) and (pointer: coarse) {
  header .btn.h-10.w-10 { position:relative; }
  header .btn.h-10.w-10::after {
    content:""; position:absolute; top:50%; left:50%;
    width:44px; height:44px; transform:translate(-50%,-50%);
  }
  /* 필터 칩도 같은 이유로 위아래를 조금 키웁니다 */
  .chip { padding-top:.72rem; padding-bottom:.72rem; }
}

/* 가로로 넘치는 표(관리자 페이지)는 잘린 티가 안 나서
   옆으로 밀 수 있다는 걸 모르고 지나칩니다.
   양쪽 끝에 그림자를 띄워 "더 있다"는 걸 알려주고, 끝까지 밀면 사라집니다. */
@media (max-width: 767px) {
  .scroll-hint {
    background:
      linear-gradient(to right, #fff 40%, rgba(255,255,255,0)) left center,
      linear-gradient(to left,  #fff 40%, rgba(255,255,255,0)) right center,
      radial-gradient(farthest-side at 0 50%,   rgba(23,54,26,.14), rgba(23,54,26,0)) left center,
      radial-gradient(farthest-side at 100% 50%, rgba(23,54,26,.14), rgba(23,54,26,0)) right center;
    background-repeat:no-repeat;
    background-size:2.5rem 100%, 2.5rem 100%, .9rem 100%, .9rem 100%;
    background-attachment:local, local, scroll, scroll;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
  .btn, .card-hover, .faq-panel, .faq-icon, .card-link .card-thumb,
  .search-input, .search-item, .search-clear,
  .farm-link, .farm-link-arrow { transition:none !important; }
}