@import url("./header.css");

body {
  font-family:
    "Pretendard",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
}

#wrapper {
  width: 100%;
  min-height: 100vh;
  position: relative;
  background: #f7f8fa;
  padding-top: 64px;
}

/* ============================================================================== */

/* main */

/*
 * 넓은 화면에서는 폭을 더 쓴다.
 * 1440으로 묶어두면 1920 화면에서도 비교표가 좁아 가로로 넘쳤다 —
 * 양옆이 비어 있는데 표만 스크롤하는 상태였다.
 */
#main {
  max-width: 1680px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  padding: 22px 28px;
}

.notice-bar {
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 16px;
  box-shadow: rgba(18, 40, 28, 0.04) 0px 4px 14px;
}

.notice-bar__inner {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 18px;
}

.notice-bar__badge {
  flex-shrink: 0;
  background-color: #163d2c;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 7px;
}

.notice-bar__text {
  flex: 1;
  margin: 0;
  font-size: 14px;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notice-bar__more {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: #9aa89f;
  text-decoration: none;
}

.main-banner {
  background: linear-gradient(135deg, rgb(15, 43, 31), rgb(22, 61, 44))
    rgb(255, 255, 255);
  border-radius: 10px;
  padding: 18px 24px;
  color: #fff;
}

.main-banner__top {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: bold;
  color: #e8efe9;
  margin-bottom: 18px;
  vertical-align: middle;
}

.main-banner__top::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #9fd9b6;
}

.main-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.main-banner__title {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
}

.main-banner__desc {
  margin: 0;
  font-size: 14px;
  color: #c7d6cc;
}

.main-banner__right {
  display: flex;
  gap: 18px;
}

.main-banner__right li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 8px 16px;
}

.main-banner__right-label {
  font-size: 12px;
  color: #b8c2bc;
}

.main-banner__right-value {
  font-size: 20px;
  font-weight: 700;
}

.main-banner__stat-label {
  font-size: 10.5px;
  font-weight: 500;
  color: #c7d6cc;
}

.main-banner__stat-value {
  font-size: 17px;
  font-weight: 700;
}

.main-content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0 auto;
  padding: 20px 0;
}

.sidebar {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sidebar__block:not(.sidebar__block--promo) {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px 10px 18px;
}

.category-wrap {
  position: relative;
}

.sub-panel {
  display: none;
}

.sidebar__title {
  font-size: 12px;
  font-weight: 700;
  color: #9aa89f;
  padding: 0 8px;
  margin-bottom: 12px;
}

.category {
  margin-bottom: 4px;
}

.category__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 9px 11px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.category__toggle-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 카테고리 이모지 그림(main_cate_img0N.png). 원본은 13×13이고 시안대로 17px로 그린다.
   그림이라 색은 파일이 가진 것을 그대로 쓴다 — CSS로 물들일 수 있는 대상이 아니다. */
.category__icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.category__toggle-left span:last-child {
  font-size: 13.5px;
  font-weight: bold;
  color: #14241c;
  margin-top: 1px;
}

.category__toggle.is-open {
  background-color: #f0f2f7;
  border-radius: 9px;
}

.category__toggle.is-open .category__arrow {
  transform: rotate(0deg);
}

.category__toggle:not(.is-open) .category__arrow {
  transform: rotate(-90deg);
}

.category__count {
  font-size: 11px;
  color: #a6b3ab;
  margin-top: 3px;
}

.sub-list {
  margin: 4px 0;
  padding-left: 6px;
}

.sub-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px 8px 26px;
  font-size: 13px;
  color: #6b7280;
  border-radius: 8px;
  cursor: pointer;
}

.sub-list li.active {
  background-color: #eeefe9;
  color: #1c3b2e;
  font-weight: bold;
}

.sub-list__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sub-list__count {
  font-size: 12px;
  color: #9ca3af;
}

/* ===== 즐겨찾기 별표 =====
   품목 목록과 업체명 앞에 붙는다. 눌리는 영역 안에 있으므로 클릭이 겹치지 않도록
   컴포넌트에서 이벤트를 멈추고, 여기서는 크기와 색만 잡는다. */
.fav-star {
  flex: none;
  padding: 0 2px;
  font-size: 14px;
  line-height: 1;
  color: #c9d2cc;
  background: none;
  border: 0;
  cursor: pointer;
}

.fav-star:hover {
  color: #e8b93b;
}

.fav-star.is-on {
  color: #f0b429;
}

/* 품목은 아이콘 자리(들여쓰기)를 별표가 대신하므로 왼쪽 여백을 줄인다. */
.sub-list li {
  padding-left: 8px;
}

.fav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fav-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  font-size: 13px;
  color: #4b5563;
  border-radius: 8px;
  cursor: pointer;
}

.fav-list li.active {
  background-color: #eeefe9;
  color: #1c3b2e;
  font-weight: 700;
}

.fav-list__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fav-list__cat {
  flex: none;
  font-size: 11px;
  color: #9ca3af;
}

/* ===== 통합 검색 ===== */

/* ===== 규격 고르기 ===== */

.unit-picker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.unit-picker__label {
  font-size: 11.5px;
  font-weight: 700;
  color: #9aa89f;
  margin-right: 2px;
}

.unit-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 5px 10px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: #6b7785;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  cursor: pointer;
}

.unit-chip:hover {
  border-color: #cfe3d6;
}

.unit-chip.active {
  color: #fff;
  background-color: #1c3b2e;
  border-color: #1c3b2e;
}

.unit-chip__variety {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.75;
}

.unit-picker__reset {
  padding: 5px 10px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: #1c3b2e;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
}

.unit-filter-note {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #7a8896;
}

.board-search {
  position: relative;
}

.board-search__input {
  width: 100%;
  /* 오른쪽은 돋보기 자리를 비워둔다 — 긴 검색어가 아이콘 밑으로 들어가지 않게. */
  padding: 10px 34px 10px 12px;
  font-family: inherit;
  font-size: 13px;
  color: #14241c;
  background-color: #f7f8fc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  outline: none;
}

.board-search__input:focus {
  border-color: #1c3b2e;
  background-color: #fff;
}

.board-search__icon {
  position: absolute;
  top: 50%;
  right: 11px;
  /*
   * 입력칸 한가운데가 아니라 '글자'의 한가운데에 맞춘다.
   *
   * placeholder에는 내려쓰는 획이 없어 글자가 줄 안에서 위쪽에 놓인다.
   * 그래서 상자 기준으로 가운데를 잡으면 돋보기만 2px 내려가 보인다.
   */
  transform: translateY(calc(-50% - 2px));
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #9aa89f;
  stroke-width: 1.6;
  stroke-linecap: round;
  /* 아이콘을 눌러도 입력칸이 눌린 것으로 처리된다. */
  pointer-events: none;
}

.board-search__input:focus ~ .board-search__icon {
  stroke: #1c3b2e;
}

.board-search__panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(20, 36, 28, 0.12);
}

.board-search__group {
  padding: 6px 8px 4px;
  font-size: 11px;
  font-weight: 700;
  color: #9aa89f;
}

.board-search__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.board-search__row:hover {
  background-color: #f2f7f4;
}

.board-search__name {
  font-size: 13px;
  font-weight: 700;
  color: #14241c;
}

.board-search__sub {
  font-size: 11px;
  color: #7a8896;
}

.board-search__empty {
  padding: 12px 8px;
  font-size: 12px;
  color: #9aa89f;
  text-align: center;
}

.sub-list li.active .sub-list__count {
  font-size: 10px;
  color: #c2cec7;
}

.promo-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.promo-item {
  border-radius: 10px;
  overflow: hidden;
  font-size: 14px;
  color: #fff;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 29.5px 0;
  text-align: center;
}

/*
 * 올린 사진으로 채우는 배너.
 *
 * 배너 칸은 화면 폭에 따라 200×80에서 560×80까지 달라진다. 사진 비율이 그와 다르면
 * 여백을 남기기보다 잘라서 채운다 — 가운데를 기준으로 자르므로 중요한 것은 가운데에 둔다.
 * 사진이 있으면 tone 배경(기본 이미지)은 가려진다.
 */
.promo-item,
.banner-card {
  position: relative;
}

.banner-img {
  /*
   * 칸 안쪽 여백(제목 글자를 위한 padding)에 눌리지 않도록 칸 전체에 덮는다.
   * 흐름 안에 두면 높이가 여백만큼 깎여 사진이 납작한 띠로 보인다.
   */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.promo-item--tone0 {
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/main_event_banner01.jpg") no-repeat center / 100%;
}
.promo-item--tone1 {
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/main_event_banner02.jpg") no-repeat center / 100%;
}
.promo-item--tone2 {
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/main_event_banner03.jpg") no-repeat center / 100%;
}
.promo-item--tone3 {
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/main_event_banner04.jpg") no-repeat center / 100%;
}
.promo-item--tone4 {
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/main_event_banner05.jpg") no-repeat center / 100%;
}

.content {
  flex: 1;
  min-width: 0;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: rgba(18, 40, 28, 0.05) 0px 6px 20px;
}

.content__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.content__crumb {
  font-size: 12px;
  font-weight: 700;
  color: #5c6b7a;
  background-color: #edf0f5;
  padding: 4px 10px;
  border-radius: 8px;
}

.content__title {
  font-size: 24px;
  font-weight: 800;
  color: #14241c;
}

.content__meta {
  font-size: 12.5px;
  font-weight: 500;
  color: #9aa89f;
}

.variety-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  overflow-x: auto;
}

.variety-tabs button {
  border: 1px solid #e5e7eb;
  background-color: #fff;
  color: #5b6b62;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 15px;
  border-radius: 999px;
}

.variety-tabs button.active {
  border: none;
  background-color: #1c3b2e;
  color: #fff;
  font-weight: 600;
}

.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.table-toolbar__title {
  font-size: 15px;
  font-weight: 800;
  color: #14241c;
}

.sort-buttons {
  display: flex;
  gap: 12px;
}

.sort-buttons button {
  font-size: 12px;
  font-weight: 600;
  color: #9aa89f;
  padding: 0;
}

.sort-buttons button.active {
  color: #4a5a50;
  font-weight: 800;
}

/* 로그인 전에는 눌러도 정렬되지 않는다. 회색으로 두되 숨기지는 않는다 —
   기능이 있다는 것은 보이고, 누르면 로그인 안내가 뜬다. */
.sort-buttons button.is-locked {
  opacity: 0.55;
}

/* 단가 알림 버튼. 정렬(글자 버튼)과 하는 일이 달라 알약 모양으로 구분한다 —
   나란히 두면서 같은 모양이면 정렬 하나가 더 있는 줄 안다. */
.sort-buttons__alert {
  margin-left: 4px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #1c3b2e;
  background-color: #eef7f1;
  border: 1px solid #cfe3d6;
  border-radius: 999px;
  white-space: nowrap;
}

.sort-buttons__alert.is-locked {
  color: #9aa89f;
  background-color: #f3f5f4;
  border-color: #e2eae5;
}

@media (max-width: 540px) {
  .sort-buttons {
    flex-wrap: wrap;
  }
}

/* 표가 놓일 자리. 폭 계산의 기준이 되므로 항상 영역 전체를 차지한다. */
.table-area {
  width: 100%;
}

/* 표가 영역보다 좁으면 카드도 그만큼만 차지하고 가운데에 놓인다.
   칸을 억지로 늘려 채우면 빈 칸처럼 보이기 때문이다. */
.table-scroll {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  overflow-x: auto;
  border: 1px solid #e4eae5;
  border-radius: 14px;
  /* 표를 카드 위에 얹힌 판처럼 띄운다. 규격이 적어 표가 짧은 품목에서
     선 몇 개만 남은 것처럼 보이지 않게 하는 것이 이 그림자의 일이다. */
  box-shadow: 0 2px 14px rgba(28, 59, 46, 0.07);
  scrollbar-width: thin;
  scrollbar-color: #a3d9b1 #ffffff;
}

.table-scroll::-webkit-scrollbar {
  height: 10px;
}

.table-scroll::-webkit-scrollbar-track {
  background-color: #ffffff;
  border-radius: 999px;
}

.table-scroll::-webkit-scrollbar-thumb {
  background-color: #a3d9b1;
  border-radius: 999px;
  border: 2px solid #ffffff;
  background-clip: padding-box;
}

.table-scroll::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

/*
 * 표 폭 배분.
 *
 * fixed 레이아웃에서 min-width: 100%를 주면 남는 폭이 '모든' 칸에 똑같이 나뉜다.
 * 그래서 규격이 둘뿐인 품목(계란·멜론 등)에서는 업체 칸까지 300px 가까이 부풀어
 * 품목마다 표 생김새가 달라 보였다.
 *
 * auto 레이아웃 + 업체 칸 width:1% 로 바꾼다. 업체 칸은 이름 길이만큼만 차지하고,
 * 남는 폭은 규격 칸들이 나눠 갖는다. 규격이 많아 폭이 모자라면 표가 늘어나
 * 지금처럼 가로로 넘긴다.
 */
/* 칸 폭은 화면 폭에 맞춰 PriceBoard가 colgroup으로 직접 지정한다.
   fixed 여야 그 폭이 그대로 지켜진다(auto는 남는 폭을 임의로 비례 배분한다). */
.compare-table {
  border-collapse: collapse;
  table-layout: fixed;
  /* 바깥 테두리는 .table-scroll 이 그린다. 여기서 또 그리면 모서리 둥근 자리에
     직각 선이 한 겹 더 보인다. */
  border: 0;
  min-width: 100%;
}

/* 칸 폭과 좌우 여백을 조금 줄였다(66→60, 6→4).
   숫자 자릿수는 그대로 들어가면서 12칸짜리 품목에서 가로 스크롤이 사라진다. */
.compare-table th,
.compare-table td {
  box-sizing: border-box;
  /* 격자를 옅게 한 단계 낮춘다. 값이 아니라 선이 먼저 보이면 표가 촘촘해 보이고,
     촘촘한 표는 정보가 많아서가 아니라 그냥 빽빽해 보인다. */
  border: 1px solid #eef1ee;
  padding: 8px 4px;
  text-align: center;
  font-size: 11px;
  white-space: nowrap;
  /* 폭은 지정하지 않는다. colgroup이 정한 값이 그대로 쓰이도록 비워 둔다 —
     여기에 width를 두면 그 값이 colgroup을 덮어써 모든 칸이 같은 비율로 나뉜다. */
}

.compare-table thead tr {
  height: 54px;
}

/* 줄 높이를 64 → 72로 올린다. 칸 폭은 품목마다 같아야 하므로 손댈 수 없고,
   세로 여백은 어느 품목에서나 같은 값이라 늘려도 표가 달라 보이지 않는다.
   값 사이가 벌어지면 한 줄씩 읽기도 쉬워진다. */
.compare-table tbody tr {
  height: 72px;
}

/* 값을 훑는 동안 지금 보는 줄을 놓치지 않게. 업체 칸은 sticky라 배경이 따로 있어
   같이 칠해주지 않으면 그 칸만 하얗게 남는다. */
.compare-table tbody tr:hover td {
  background-color: #f7faf8;
}

.compare-table thead th {
  background-color: #f3f6f3;
  font-size: 11px;
  color: #374151;
  vertical-align: middle;
  padding: 6px;
  border-bottom: 2px solid #e2e8e3;
}

.compare-table .col-company {
  text-align: center;
}

.col-company {
  position: sticky;
  left: 0;
  z-index: 2;
  background-color: #fff;
  text-align: center;
  /* 폭은 colgroup이 정한다(업체 칸이 남는 폭을 흡수). */
  border-right: 1px solid #e6ebe7;
}

/* 다른 칸(8px 4px)과 달리 좌우 여백이 없다. 이 칸에서만 여백이 곧 폭이다 —
   안에 든 이름은 가운데 정렬이라 여백이 남아도 채우지 못하고, 줄인 만큼 규격 칸이 넓어진다.

   선택자에 .compare-table을 붙여야 한다. 위의 `.compare-table td { padding: 8px 4px }`가
   클래스 하나짜리 `.col-company`보다 우선순위가 높아, 그냥 두면 이 선언이 무시된다. */
.compare-table .col-company {
  padding-left: 0;
  padding-right: 0;
}

thead .col-company {
  z-index: 3;
  color: #5c6b7a;
  font-size: 12px;
  font-weight: 800;
  text-align: center !important;
}

.col-check {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.col-check input[type="checkbox"]:checked {
  accent-color: rgb(22, 61, 44);
}

/* 지금 정렬 기준이 된 규격. 어느 열이 정렬됐는지 표에서 바로 보여야 한다. */
.col-check.is-basis {
  color: #14241c;
}

/* 줄을 세운 기준이 된 열. 이 열만 순서대로 놓이고 나머지 열은 각자 업체를 따라오므로,
   어느 열을 보고 읽어야 하는지 배경으로 짚어준다. */
td.is-basis-col {
  background-color: #f4f8f5;
}

.col-check.is-basis .col-unit {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.col-label {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}

.col-variety {
  font-size: 10px;
  font-weight: 500;
  color: #7a8896;
}

.col-unit {
  font-size: 12px;
  font-weight: 800;
  color: #2a3b31;
}

.col-hidden {
  display: none;
}

/*
 * 업체명 줄.
 *
 * 별표와 이름이 함께 있는 줄이다. 이름은 '칸의 한가운데'에 놓는다 — 바로 아래
 * 방문하기 버튼(.order-btn)이 칸 가운데에 있으므로, 이름이 별표만큼 오른쪽으로
 * 밀리면 두 줄이 어긋나 보인다.
 * 그래서 별표는 흐름에서 빼내 왼쪽 끝에 띄우고, 이름만 칸 폭 기준으로 가운데 정렬한다.
 */
.company-name {
  position: relative;
  margin: 0 0 5px;
  text-align: center;
  /* 폭 계산(PriceBoard의 COMPANY_MIN)이 이 크기를 전제로 한다. 함께 바꿔야 한다. */
  font-size: 11px;
  font-weight: 800;
  color: #14241c;
}

/* 별표는 이름 줄 왼쪽 끝에 고정한다. 이름 길이와 무관하게 줄마다 같은 자리에서 눌린다.
   글자(11px)보다 조금 큰 12px — 여기서 더 키우면 이름이 그만큼 좁아진다
   (아래 max-width가 별표 폭의 두 배를 비워두기 때문).

   여백은 음수 위치로 상쇄해 누를 자리만 넓힌다: 별은 그대로 왼쪽 위 모서리에 찍히고
   손가락이 닿는 면적만 20×22가 된다. 자리를 띄워 놓았으므로(absolute) 이 여백은 칸 폭에
   더해지지 않는다 — 폭을 줄이면서 별표가 눌리기 어려워지는 것을 막는 유일한 방법이다. */
.company-name .fav-star {
  position: absolute;
  left: -4px;
  top: -3px;
  padding: 3px 4px;
  font-size: 12px;
  line-height: 1.35;
}

/*
 * 업체명은 칸 안에서 접힌다.
 *
 * 칸(데스크톱 120px / 모바일 128px)은 여덟 글자까지 한 줄로 받는다. 그보다 긴 이름은
 * 접어서 옆 칸을 파고들지 않게 한다. 한글 상호에는 띄어쓰기가 없는 경우가 많아,
 * 띄어쓰기가 있으면 그 자리에서(keep-all), 없으면 글자 사이에서(anywhere) 줄을 넘긴다.
 * 잘라내지 않으므로 이름은 그대로 다 보인다.
 *
 * max-width로 별표 폭의 두 배를 비워둔다. 이름은 가운데 정렬이라 양쪽으로 똑같이
 * 자라므로, 왼쪽 여백이 별표 폭 아래로 내려가지 않는다 = 아무리 길어도 별표를 덮지 않는다.
 * (별표만큼만 오른쪽 여백을 두는 방법으로는 이름이 칸 가운데에 오지 않는다.)
 *
 * 24px = 별표 글리프 11.6px을 12px로 올림한 값의 두 배. 딱 맞춰 두었으므로 별표를 키우면
 * 이름이 그만큼 좁아진다.
 */
.company-name__text {
  display: block;
  max-width: calc(100% - 24px);
  margin: 0 auto;
  line-height: 1.35;
  /* 표의 칸은 줄바꿈을 막아두었다(가격·마감은 한 줄이어야 한다). 이름만 예외로 푼다. */
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 업체 칸은 폭이 넓어(남는 폭을 흡수한다) 버튼이 왼쪽 끝에 붙으면 허전하다.
   글자 길이만큼만 차지하는 버튼을 칸 가운데에 둔다(이름과 같은 중심선). */
.order-btn {
  display: block;
  width: fit-content;
  margin: 0 auto;
  text-align: center;
  background-color: #1c3b2e;
  color: #fff;
  border: none;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 6px;
}

.cell-price {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.cell-status {
  font-size: 9px;
  font-weight: 700;
  color: #6b7785;
  margin-bottom: 2px;
}

.cell-status.status-today {
  color: #1c3b2e;
}

.cell-status.status-reserve {
  color: #8a7a52;
}

.cell-time {
  font-size: 8.5px;
  font-weight: 600;
  color: #9aa89f;
}

.cell-empty {
  font-size: 11px;
  font-weight: 600;
  color: #c4cbd4;
}

/*
 * 우측 배너는 표를 따라 내려가되, 표가 끝나면 놓아준다.
 *
 * 전광판은 품목이 많아 세로로 길다. 배너를 제자리에 두면 표를 조금만 내려도 화면 밖으로
 * 사라져, 정작 셀러가 가격을 들여다보는 동안에는 한 번도 보이지 않는다.
 *
 * 고정을 푸는 일은 따로 해줄 게 없다. sticky는 부모(.main-content) 밖으로 나가지 못하므로
 * 표의 아래끝에 닿는 순간 — 곧 푸터 직전 — 스스로 풀려서 페이지와 함께 내려간다.
 * .main-content가 align-items: flex-start라 이 칸이 늘어나지 않는 것이 그 전제다.
 * (늘어나면 부모와 높이가 같아져 움직일 여백이 없어지고 sticky가 아무 일도 하지 않는다.)
 *
 * top은 고정 헤더(64px) 아래로 12px 띄운 값.
 */
.side-banner {
  width: 200px;
  flex-shrink: 0;
  position: sticky;
  top: 76px;
  align-self: flex-start;
}

.side-banner-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/*
 * 화면이 좁아지면 우측 배너를 비교표 아래로 내린다.
 *
 * 배너가 옆에 있으면 200px을 가져가는데, 그 200px이 없으면 표가 가로로 넘친다.
 * 셀러가 이 화면에 온 이유는 가격을 비교하기 위해서이므로, 좁을 때 자리를 내주는 쪽은
 * 표가 아니라 배너다. 배너는 사라지지 않고 표 아래에서 가로로 눕는다.
 */
@media (max-width: 1400px) {
  .main-content {
    flex-wrap: wrap;
  }

  .content {
    flex: 1;
    min-width: 0;
  }

  .side-banner {
    width: 100%;
    order: 3;
    /* 표 아래로 내려와 가로로 눕는 배치에서는 따라다닐 이유가 없다. */
    position: static;
  }

  .side-banner-list {
    flex-direction: row;
  }

  .side-banner-list .banner-card {
    flex: 1;
    min-width: 0;
  }
}

.banner-card {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
  padding: 28px 0;
  text-align: center;
}

.banner-card__label {
  color: #fff;
  font-size: 14px;
}

.banner-card--tone0 {
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/main_event_banner01.jpg") no-repeat center / 100%;
}
.banner-card--tone1 {
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/main_event_banner02.jpg") no-repeat center / 100%;
}
.banner-card--tone2 {
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/main_event_banner03.jpg") no-repeat center / 100%;
}
.banner-card--tone3 {
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/main_event_banner04.jpg") no-repeat center / 100%;
}
/* tone4가 tone0과 같은 사진(banner01)을 쓰고 있어서, 좌측 '산지직송 제휴관'과
   우측 '신규입점 이벤트'가 같은 배 사진으로 나왔다. 전용 사진으로 갈라놓는다. */
.banner-card--tone4 {
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/main_event_banner05.jpg") no-repeat center / 100%;
}

.arrow_up {
  width: 12px;
  height: 14px;
  background: url(../images/common/arrow_up.svg) no-repeat center;
}

.arrow_down {
  width: 12px;
  height: 14px;
  background: url(../images/common/arrow_down.svg) no-repeat center;
}

/* 세로 배치 전환점.
   1024였을 때는 1100px 언저리에서 사이드바(200px)가 옆에 붙은 채라 표가 가로로 넘쳤다.
   그 폭에서는 표에 전체 폭을 주는 편이 낫다. PriceBoard의 isNarrow와 같은 값이어야 한다. */
@media (max-width: 1200px) {
  .main-content {
    flex-direction: column;
  }

  .sidebar,
  .content,
  .side-banner {
    width: 100%;
  }

  .sidebar__block--promo {
    order: -1;
  }

  .promo-swiper,
  .banner-swiper {
    overflow: hidden;
  }

  .promo-swiper .swiper-wrapper.promo-list,
  .banner-swiper .swiper-wrapper.side-banner-list {
    flex-direction: row !important;
    gap: 0 !important;
  }
}

@media (max-width: 768px) {
  .main-banner__title {
    font-size: 18px;
  }
}

@media (max-width: 600px) {
  #main {
    padding: 22px 10px;
  }
}

.promo-swiper,
.banner-swiper {
  overflow: visible;
}

@media (max-width: 540px) {
  .category-list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 6px;
    overflow-x: scroll;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }

  .category {
    flex-shrink: 0;
    margin-bottom: 0;
  }

  .category__toggle {
    width: auto;
    white-space: nowrap;
    gap: 5px;
  }

  .category .sub-list {
    display: none !important;
  }

  .sub-panel.is-open {
    display: block;
    width: 100%;
    margin-top: 0;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 4px;
    max-height: 260px;
    overflow-y: auto;
  }

  .sub-panel .sub-list {
    margin: 0;
    padding: 0;
  }

  .content {
    padding: 18px 10px;
  }

  .table-scroll {
    overflow: scroll;
    max-height: 500px;
  }

  .main-banner__desc__br {
    display: block;
  }

  .sort-buttons {
    gap: 3px;
  }

  .sort-buttons button {
    padding: 5px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
  }
}

/*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*/

/* ================================

업체 상세 페이지 style

================================ */

.detail-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 22px 28px 0;
}

.detail-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #6b7b72;
  margin-bottom: 12px;
}

.detail-back::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../images/common/arrow_left.svg) no-repeat center;
}

.detail-grid {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.detail-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.company-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 26px;
  box-shadow: rgba(18, 40, 28, 0.05) 0px 6px 20px;
}

.company-card__top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}

.company-card__head {
  flex: 1;
  min-width: 0;
}

.company-card__avatar {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  background: linear-gradient(140deg, rgb(28, 59, 46), rgb(62, 90, 71));
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.company-card__name-row {
  display: flex;
  align-items: center;
  gap: 23px;
  margin-top: 7px;
  margin-bottom: 5px;
}

.company-card__name {
  font-size: 25px;
  font-weight: 800;
  color: #16271e;
}

.company-card__badge {
  font-size: 11px;
  font-weight: 800;
  color: #1c3b2e;
  background-color: #eeefe9;
  padding: 7px 10px 5px;
  border-radius: 7px;
}

.company-card__location {
  font-size: 13px;
  color: #7a8a80;
  margin-bottom: 12px;
}

.company-card__desc {
  font-size: 14px;
  line-height: 1.6;
  color: #46574d;
}

.company-card__divider {
  border-top: 1px solid #eef3f0;
  margin-top: 22px;
  margin-bottom: 20px;
}

/* 담당자 · 등록 상품 두 항목만 둔다. 네 칸 격자에 두 개만 넣으면 왼쪽에 몰려
   오른쪽이 빈 것처럼 보이므로, 칸 수를 항목 수에 맞춰 절반씩 나눈다. */
.company-card__info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.info-label {
  font-size: 11px;
  font-weight: 700;
  color: #9aa89f;
  margin-bottom: 5px;
}

.info-value {
  font-size: 14px;
  font-weight: 700;
  color: #2a3b31;
}

.order-card {
  width: 320px;
  flex-shrink: 0;
  background-color: #fff;
  border-radius: 8px;
  padding: 22px;
  box-shadow: rgba(18, 40, 28, 0.05) 0px 6px 20px;
}

.order-card__title {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 5.3px;
  color: #16271e;
}

.order-card__desc {
  font-size: 12px;
  line-height: 1.6;
  color: #7a8a80;
  margin-bottom: 16px;
}

.detail-order-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 9px;
}

.detail-order-btn--kakao {
  background-color: #fae100;
  color: #3c1e1e;
}

.detail-order-btn--kakao::after {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url(../images/common/arrow_rightup_b.svg) no-repeat center;
}

.detail-order-btn--phone {
  background-color: #1c3b2e;
  color: #fff;
}

.detail-order-btn--phone::after {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url(../images/common/arrow_rightup_w.svg) no-repeat center;
}

.order-card__notice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #eef3f0;
}

.order-card__notice p {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.6;
  color: #8a968f;
}

.order-card__notice::before {
  content: "";
  display: inline-block;
  width: 42px;
  height: 26px;
  background: url(../images/common/icon_ref.svg) no-repeat center;
}

.product-list-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 18px 0 0;
  box-shadow: rgba(18, 40, 28, 0.05) 0px 6px 20px;
}

.product-list-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  padding: 0 22px;
}

.product-list-card__title {
  font-size: 16px;
  font-weight: 800;
  color: #16271e;
}

.product-list-card__meta {
  font-size: 12px;
  font-weight: 600;
  color: #7a8a80;
}

.product-table {
  width: 100%;
}

.product-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 22px;
  border-bottom: 1px solid #f1f5f2;
}

.product-row:last-child {
  border-bottom: none;
}

.product-row--head {
  padding: 11px 22px;
  border-top: 1px solid #f1f5f2;
  border-bottom: 1px solid #f1f5f2;
  background-color: #fafbfc;
}

.product-row--head .col-name,
.product-row--head .col-price,
.product-row--head .col-ship,
.product-row--head .col-status {
  font-size: 11.5px;
  font-weight: 700;
  color: #7a8a80;
}

.col-name {
  flex: 1;
  min-width: 0;
}

/*
 * 오른쪽 세 칸(공급가 · 출고 · 상태).
 *
 * 예전에는 공급가 칸에 폭이 없어 값 길이대로 늘었다 줄었다 했다. 그러면 이 묶음 전체가
 * 행마다 다른 자리에서 시작하고, 머리글의 ‘공급가 · 출고 · 상태’와도 어긋난다.
 * 세 칸 모두 폭을 고정해 머리글과 값이 같은 세로선 위에 놓이게 한다.
 */
.product-row__right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.product-name {
  font-size: 14px;
  font-weight: 700;
  color: #1b2a22;
  margin-bottom: 4px;
}

.product-spec {
  font-size: 11.5px;
  font-weight: 600;
  color: #9aa89f;
}

.col-price {
  flex: 0 0 96px;
  text-align: right;
  font-size: 15px;
  font-weight: 700;
  color: #1b2a22;
}

.col-ship {
  flex: 0 0 84px;
  text-align: center;
}

.col-status {
  flex: 0 0 76px;
  text-align: center;
}

.ship-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #6b7785;
  background-color: #edf0f5;
  padding: 3px 9px;
  border-radius: 7px;
}

.ship-badge--today {
  color: #1c3b2e;
  background-color: #eeefe9;
}

.status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #1c3b2e;
  background-color: #eeefe9;
  padding: 3px 9px;
  border-radius: 7px;
}

@media (max-width: 768px) {
  .detail-grid {
    flex-direction: column;
  }

  .order-card {
    width: 100%;
  }

}

@media (max-width: 500px) {
  .detail-wrap {
    padding: 22px 10px 0;
  }

  .product-list-card {
    padding: 18px 20px 0;
  }
}

@media (max-width: 480px) {
  .product-row--head {
    display: none;
  }

  .product-row {
    flex-wrap: wrap;
    padding: 12px 0;
    gap: 5px;
  }

  .col-name {
    width: 100%;
    flex: none;
    margin-bottom: 6px;
  }

  .product-row__right {
    width: 100%;
    justify-content: space-between;
  }

  .col-price {
    text-align: left;
  }
}

.order-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(20, 36, 28, 0.55);
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}

.order-modal-overlay.is-open {
  display: flex;
}

.order-modal {
  width: 100%;
  max-width: 380px;
  background-color: #fff;
  border-radius: 10px;
  padding: 30px;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 24px 60px;
}

.order-modal__icon {
  display: inline-block;
  padding: 14px;
  margin-bottom: 16px;
  border-radius: 10px;
  background-color: #eeefe9;
}

.order-modal__title {
  font-size: 18px;
  font-weight: 800;
  color: #16271e;
  margin-bottom: 10px;
}

.order-modal__desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: #6b7785;
  margin-bottom: 22px;
}

.order-modal__desc .omd_company {
  color: #1c3b2e;
  font-weight: 700;
}

.order-modal__desc .omd_channel {
  color: #6b7b72;
  font-weight: 700;
}

.order-modal__actions {
  display: flex;
  gap: 8px;
}

.order-modal__btn {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.order-modal__btn--cancel {
  background-color: #fff;
  border: 1px solid #e5e7eb;
  color: #4b5a51;
}

.order-modal__btn--confirm {
  background-color: #1c3b2e;
  color: #fff;
}

/*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*/

/* ================================

게시판 페이지 style

================================ */

.board-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

.board-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #6b7b72;
  margin-bottom: 12px;
}

.board-back::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../images/common/arrow_left.svg) no-repeat center;
}

.board-title {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 15px;
  color: #16271e;
}

.board-tabs {
  display: flex;
  border-bottom: 1px solid #e2eae5;
  margin-bottom: 12px;
}

.board-tabs__btn {
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #7a8a80;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.board-tabs__btn.active {
  color: #1c3b2e;
  font-weight: 800;
  border-bottom: 2px solid #1c3b2e;
}

/* ===== 페이지네이션 (게시판 가운데) ===== */
.board-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 18px 0 4px;
  flex-wrap: wrap;
}

.board-pager__num,
.board-pager__btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #7a8a80;
  background-color: #fff;
  border: 1px solid #e2eae5;
  border-radius: 8px;
}

.board-pager__num:hover,
.board-pager__btn:hover {
  border-color: #c7d6cd;
  color: #1c3b2e;
}

.board-pager__num.active {
  color: #fff;
  background-color: #1c3b2e;
  border-color: #1c3b2e;
}

/* ===== 게시판 검색 (분류 + 검색어 + 검색하기) ===== */
.board-find {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.board-find__select {
  height: 42px;
  padding: 0 34px 0 12px;
  font-size: 13.5px;
  font-weight: 700;
  color: #1c3b2e;
  background-color: #fff;
  border: 1px solid #d8e4dd;
  border-radius: 9px;
  /* 화살표는 직접 그린다 — 브라우저 기본 화살표는 OS마다 크기가 달라 높이가 흔들린다. */
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #7a8a80 50%),
    linear-gradient(135deg, #7a8a80 50%, transparent 50%);
  background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.board-find__input {
  flex: 1;
  min-width: 160px;
  height: 42px;
  padding: 0 14px;
  font-size: 13.5px;
  color: #1c3b2e;
  background-color: #fff;
  border: 1px solid #d8e4dd;
  border-radius: 9px;
}

.board-find__input::placeholder {
  color: #a8b5ae;
}

.board-find__select:focus,
.board-find__input:focus {
  outline: none;
  border-color: #1c3b2e;
}

.board-find__btn {
  height: 42px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background-color: #1c3b2e;
  border-radius: 9px;
}

.board-find__reset {
  height: 42px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  color: #7a8a80;
  background-color: #fff;
  border: 1px solid #d8e4dd;
  border-radius: 9px;
}

.board-find__result {
  font-size: 13.5px;
  color: #7a8a80;
  margin-bottom: 12px;
}

.board-find__result b {
  color: #1c3b2e;
  font-weight: 800;
}

/* 좁은 화면에서는 분류·검색어가 한 줄, 버튼이 그 아래로 내려간다.
   버튼까지 한 줄에 밀어 넣으면 검색어 칸이 글자 서너 개 폭이 된다. */
@media (max-width: 560px) {
  .board-find__input {
    flex: 1 1 100%;
    order: 3;
  }

  .board-find__btn {
    flex: 1;
  }
}

/* ===== 자유게시판 카테고리 거르기 ===== */
.board-cats {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.board-cats__btn {
  height: 32px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #7a8a80;
  background-color: #fff;
  border: 1px solid #e2eae5;
  border-radius: 999px;
}

.board-cats__btn:hover {
  border-color: #c7d6cd;
  color: #1c3b2e;
}

.board-cats__btn.active {
  color: #fff;
  background-color: #1c3b2e;
  border-color: #1c3b2e;
}

.board-panel {
  display: none;
}

.board-panel.active {
  display: block;
}

.board-panel__legend {
  font-size: 13.5px;
  font-weight: 500;
  color: #7a8a80;
  margin-bottom: 12px;
}

.board-panel__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-top: 11px;
}

.board-panel__desc {
  font-size: 13.5px;
  color: #7a8a80;
}

.board-write-btn {
  background-color: #1c3b2e;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 13px 16px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.board-write-btn::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url(../images/common/icon_plus.svg) no-repeat center;
}

.board-list {
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: rgba(18, 40, 28, 0.05) 0px 6px 20px;
}

.board-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  /* 한 화면에 20줄을 담기 위해 위아래를 줄인다. 좌우는 그대로 둔다 —
     좌우까지 좁히면 제목이 카드 모서리에 붙어 오히려 답답해 보인다. */
  padding: 8px 22px;
  border-bottom: 1px solid #f3f4f6;
}

.board-row:last-child {
  border-bottom: none;
}

.board-row:hover {
  background-color: #fafbfc;
}

.board-row__pin {
  flex-shrink: 0;
  font-size: 13px;
  width: 15px;
  height: 15px;
  background: url(../images/common/icon_fin.svg) no-repeat center;
}

.board-row__pin--empty {
  width: 13px;
}

.board-row__title {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: #1b2a22;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board-row__date {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: #9aa89f;
}

.board-row__meta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.board-row__author {
  font-size: 12.5px;
  font-weight: 600;
  color: #9aa89f;
}

.board-row__stat {
  font-size: 11.5px;
  font-weight: 600;
  color: #9aa89f;
}

.board-tag {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 9px 3px;
  border-radius: 6px;
  line-height: 1.35;
}

.board-tag--aqua {
  color: #6b7785;
  background-color: #edf0f5;
}

.board-tag--cara {
  color: #1c3b2e;
  background-color: #eeefe9;
}

.board-tag--blue {
  color: #2f6fe0;
  background-color: #eaf1fd;
}

/* 자유게시판 '자유수다' 카테고리. 나머지 셋(파랑·초록·회색)과 겹치지 않는 따뜻한 색이다 —
   카테고리는 목록에서 색으로 먼저 구분되므로 네 갈래가 서로 다른 색을 가져야 한다. */
.board-tag--sun {
  color: #a4680f;
  background-color: #fdf2df;
}

.board-row__top,
.board-row__bottom {
  display: flex;
  align-items: center;
  gap: 10px;
}

.board-row__bottom {
  flex: 1;
  min-width: 0;
  justify-content: space-between;
}

@media (max-width: 767px) {
  .board-row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
}

@media (max-width: 640px) {
  .board-row {
    flex-wrap: wrap;
  }

  .board-row__title {
    order: 1;
    width: 100%;
    white-space: normal;
  }

  .board-row__meta {
    order: 2;
    width: 100%;
  }

  .board-row__date {
    order: 2;
  }

  .board-row__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*/

/* ================================

공지사항 상세페이지 style

================================ */

.notice-detail-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

.notice-detail-card {
  background-color: #fff;
  box-shadow: rgba(18, 40, 28, 0.05) 0px 6px 20px;
  border-radius: 10px;
  border-radius: 16px;
  padding: 28px 30px;
}

.notice-detail-card__tags {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.notice-detail-card__pin {
  font-size: 11px;
  font-weight: 800;
  color: #1c3b2e;
}

.notice-detail-card__title {
  font-size: 22px;
  font-weight: 700;
  color: #14241c;
  line-height: 1.4;
  margin-bottom: 12px;
}

.notice-detail-card__date {
  font-size: 12.5px;
  font-weight: 700;
  color: #9aa89f;
}

.notice-detail-card__divider {
  border-top: 1px solid #eef1f6;
  margin: 18px 0 12px;
}

.notice-detail-card__body p {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.9;
  color: #333333;
}

@media (max-width: 640px) {
  .notice-detail-card {
    padding: 22px 20px 28px;
  }

  .notice-detail-card__title {
    font-size: 19px;
  }
}

/*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*/

/* ================================

자유게시판 상세페이지 style

================================ */

.post-detail-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.post-detail-card {
  background-color: #fff;
  box-shadow: rgba(18, 40, 28, 0.05) 0px 6px 20px;
  border-radius: 10px;
  padding: 28px 30px;
  margin-bottom: 16px;
}

.post-detail-card .board-tag {
  display: inline-block;
  margin-bottom: 12px;
}

.post-detail-card__title {
  font-size: 22px;
  font-weight: 800;
  color: #14241c;
  line-height: 1.4;
  margin-bottom: 12px;
}

.post-detail-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: #9aa89f;
}

.post-detail-card__author {
  font-weight: 600;
}

.post-detail-card__date,
.post-detail-card__stat {
  font-weight: 700;
}

.post-detail-card__divider {
  border-top: 1px solid #eef1f6;
  margin: 17px 0 12px;
}

.post-detail-card__body p {
  font-size: 14.5px;
  line-height: 1.85;
  color: #374151;
}

.comment-section {
  background-color: #fff;
  box-shadow: rgba(18, 40, 28, 0.05) 0px 6px 20px;
  border-radius: 10px;
  padding: 24px 30px;
}

.comment-section__title {
  font-size: 15px;
  font-weight: 800;
  color: #14241c;
  margin-bottom: 16px;
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 22px;
}

.comment-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f5f2;
}

.comment-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.comment-item__avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #eeefe9;
  color: #1c3b2e;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comment-item__body {
  flex: 1;
  min-width: 0;
}

.comment-item__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
}

.comment-item__author {
  font-size: 13px;
  font-weight: 700;
  color: #1b2a22;
}

.comment-item__date {
  font-size: 11.5px;
  color: #9aa89f;
}

.comment-item__text {
  font-size: 13.5px;
  line-height: 1.6;
  color: #333333;
}

.comment-form {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid #eef0f2;
}

.comment-form__input {
  flex: 1;
  min-width: 0;
  resize: none;
  border: 1px solid #dce6e0;
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 13.5px;
  font-family: inherit;
  color: #14241c;
  line-height: 1.5;
}

.comment-form__input::placeholder {
  color: #b7c2ba;
}

.comment-form__input:focus {
  outline: none;
  border-color: #1c3b2e;
}

.comment-form__submit {
  flex-shrink: 0;
  padding: 15px 20px 14px;
  background-color: #1c3b2e;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
}

@media (max-width: 640px) {
  .post-detail-card,
  .comment-section {
    padding: 20px;
  }

  .post-detail-card__title {
    font-size: 18px;
  }

  .comment-form {
    flex-direction: column;
    align-items: stretch;
  }

  .comment-form__submit {
    width: 100%;
  }
}

/*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*/

/* ================================

공급업체 페이지 style

================================ */

.supplier-wrap {
  max-width: 1380px;
  margin: 0 auto;
  padding: 36px 28px 0;
  display: flex;
  align-items: flex-start;
  gap: 22px;
}

.supplier-sidebar {
  width: 230px;
  flex-shrink: 0;
  background-color: #fff;
  box-shadow: rgba(18, 40, 28, 0.05) 0px 6px 20px;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.supplier-profile {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 6px 14px;
  margin-bottom: 10px;
  border-bottom: 1px solid #eef3f0;
}

.supplier-profile__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: linear-gradient(140deg, rgb(28, 59, 46), rgb(62, 90, 71));
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.supplier-profile__name {
  font-size: 14px;
  font-weight: 800;
  color: #16271e;
}

.supplier-profile__status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: #1c3b2e;
  margin-top: 3px;
}

.supplier-profile__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #1c3b2e;
  display: inline-block;
}

.supplier-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.supplier-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 11px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  color: #1c3b2e;
}

.supplier-nav__item.active {
  background-color: #eeefe9;
  color: #14241c;
  font-weight: 700;
}

.supplier-nav__icon {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  font-size: 13px;
}

.supplier-sidebar__logout {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #9aa89f;
  margin-top: 5px;
}

.supplier-main {
  flex: 1;
  min-width: 0;
  width: 100%;
}

.supplier-panel {
  display: none;
}

.supplier-panel.active {
  display: block;
}

.supplier-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.supplier-panel__title {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 8px;
  color: #16271e;
}

.supplier-panel__desc {
  font-size: 13px;
  color: #7a8a80;
}

.supplier-panel__actions {
  display: flex;
  gap: 9px;
  flex-shrink: 0;
}

.supplier-btn {
  padding: 12px 15px 10px;
  border-radius: 10px;
  font-size: 13px;
}

.supplier-btn--primary {
  font-size: 13px;
  font-weight: 800;
  background-color: #1c3b2e;
  color: #fff;
}

.supplier-panel__actions .supplier-btn--primary {
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: rgba(21, 146, 76, 0.25) 0px 3px 10px;
}

.supplier-panel__actions .supplier-btn--primary::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url(../images/common/icon_plus.svg) no-repeat center;
}

.supplier-btn--outline {
  font-size: 13px;
  font-weight: 700;
  background-color: #fff;
  border: 1px solid #d9dcd3;
  color: #1c3b2e;
}

.supplier-btn--danger-soft {
  background-color: #fff;
  border: 1px solid #e7c6c0;
  color: #c2503e;
}

/*
 * 통계 카드 줄. 화면마다 카드 수가 다르다(내 상품 관리는 셋, 유입 통계는 넷).
 * 셋으로 고정해 두어서 넷일 때 마지막 하나만 다음 줄에 홀로 남아 폭이 1/3로 보였다.
 * 남는 폭을 카드들이 나눠 갖게 하면 개수와 무관하게 한 줄로 고르게 찬다.
 */
.supplier-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 13px;
  margin-bottom: 16px;
}

.supplier-stat-card {
  background-color: #fff;
  border: 1px solid #e2eae5;
  border-radius: 10px;
  padding: 16px 18px;
}

.supplier-stat-card__label {
  font-size: 12px;
  font-weight: 700;
  color: #9aa89f;
  margin-bottom: 6px;
}

.supplier-stat-card__value {
  font-size: 26px;
  font-weight: 700;
  color: #16271e;
}

.supplier-stat-card__value--danger {
  color: #dc2626;
}

.supplier-table-card {
  background-color: #fff;
  box-shadow: rgba(18, 40, 28, 0.05) 0px 6px 20px;
  border-radius: 10px;
  overflow: hidden;
}

/*
 * 상품 한 줄. 다섯 칸 — 상품·규격 / 공급가 / 출고상태 / 발주마감 / 판매상태.
 *
 * 각 칸의 최소 폭은 그 안에 들어가는 것보다 넓어야 한다. 예전에는 발주마감 칸이
 * 57px인데 입력이 76px이라 시각이 잘려 보였고, 판매상태 칸은 80px인데 버튼이 둘이라
 * 옆 칸을 침범했다. 최소 폭을 내용에 맞춰 다시 잡는다.
 */
.supplier-row {
  display: grid;
  grid-template-columns:
    minmax(240px, 5fr)
    minmax(170px, 1.75fr)
    minmax(130px, 1.3fr)
    minmax(96px, 0.8fr)
    minmax(140px, 1.1fr);
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid #f3f4f6;
}

.supplier-row:not(.supplier-row--head) {
  padding: 8px 20px;
}

.supplier-row:last-child {
  border-bottom: none;
}

.supplier-row--head {
  padding: 13px 20px;
  background-color: #f6f8fc;
  font-size: 11.5px;
  font-weight: 700;
  color: #7a8a80;
}

.supplier-row--head > div:not(:first-child) {
  text-align: center;
  justify-content: center;
}

.supplier-row--soldout {
  background-color: #fef4f2;
}

.supplier-product-name {
  font-size: 14px;
  font-weight: 700;
  color: #1b2a22;
  margin-bottom: 2px;
}

.supplier-product-spec {
  font-size: 11.5px;
  color: #9aa89f;
}

.supplier-col-price,
.supplier-col-ship,
.supplier-col-status {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 판매중 · 삭제 두 버튼이 한 칸에 들어간다. 예전에는 세로 간격을 인라인 스타일로
   주면서도 가로 배치라 간격이 먹지 않았고, 칸이 좁아 옆으로 삐져나갔다. */
.supplier-col-status {
  gap: 6px;
}

.supplier-col-deadline {
  display: flex;
  align-items: center;
  justify-content: center;
}

.supplier-col-price {
  flex-direction: column;
  align-items: stretch;
}

.supplier-deadline-input {
  width: 100%;
  max-width: 84px;
  flex: none;
  text-align: center;
  border-radius: 999px;
  padding: 8px 10px;
  background-color: #fff;
}

/*
 * 한 줄 안의 조작 요소는 높이를 맞춘다.
 * 입력·선택·버튼이 제각각(29px · 34px · 37px)이라 줄마다 들쭉날쭉해 보였다.
 */
.supplier-row .supplier-input,
.supplier-row .supplier-select,
.supplier-row .supplier-status-btn,
.supplier-row .supplier-col-status .nf-btn {
  height: 36px;
  box-sizing: border-box;
}

.supplier-row .supplier-col-status .nf-btn {
  padding: 0 12px;
  font-size: 12px;
}

.supplier-row .supplier-schedule-btn {
  height: 36px;
  width: 36px;
  box-sizing: border-box;
}

.supplier-price-field {
  display: flex;
  align-items: center;
  gap: 6px;
}

.supplier-price-field .supplier-price-input {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: #1b2a22;
}

.supplier-schedule-btn {
  flex-shrink: 0;
  padding: 7px;
  border-radius: 8px;
  border: 1px solid #dce6e0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.supplier-schedule-btn:hover {
  background-color: #f3f4f6;
}

.supplier-schedule-btn__icon {
  width: 14px;
  height: 14px;
  background: url(../images/common/icon_clock.svg) no-repeat center;
}

.supplier-schedule-note {
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #8a7a52;
  text-align: right;
}

.supplier-schedule-note[hidden] {
  display: none;
}

.supplier-status-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}

/* 판매중 · 품절 두 버튼. 켜진 쪽만 색이 차고, 꺼진 쪽은 눌러서 바꾸는 자리로 보인다. */
.supplier-status-set {
  display: inline-flex;
  gap: 4px;
}

.supplier-status-btn {
  background-color: #fff;
  border: 1px solid #e5e7eb;
  color: #9aa89f;
  cursor: pointer;
}

.supplier-status-btn:hover {
  border-color: #cfe3d6;
}

.supplier-status-btn--ok {
  background-color: #eeefe9;
  color: #1c3b2e;
}

.supplier-status-btn--soldout {
  background-color: #fbe9e5;
  color: #c2503e;
}

/* 켜진 쪽은 테두리를 배경색과 맞춰 한 덩어리로 보이게 한다. */
.supplier-status-btn--ok.is-on {
  border-color: #dfe2d8;
}

.supplier-status-btn--soldout.is-on {
  border-color: #f3d6cf;
}

.supplier-input {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  color: #14241c;
  text-align: right;
}

.supplier-input:focus,
.supplier-select:focus {
  outline: none;
  border-color: #1c3b2e;
}

.supplier-select {
  width: 100%;
  border-radius: 8px;
  padding: 7px 26px 7px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: #1c3b2e;
  background-color: #fff;
  appearance: none;
  background-image: url("../images/common/icon_dropdown.svg");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}

.supplier-select--ship-today {
  background-color: #eeefe9;
  color: #1c3b2e;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%231C3B2E' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.supplier-select--ship-normal {
  background-color: #edf0f5;
  color: #6b7785;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%236B7785' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.supplier-select--ship-reserve {
  background-color: #f2eee2;
  color: #8a7a52;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%238A7A52' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.supplier-select--ship-soldout {
  background-color: #fbe9e5 !important;
  color: #c2503e !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%23C2503E' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.supplier-form-card {
  background-color: #fff;
  box-shadow: rgba(18, 40, 28, 0.05) 0px 6px 20px;
  border-radius: 10px;
  padding: 24px;
}

.supplier-panel[data-panel="company"],
.supplier-panel[data-panel="orderlink"] {
  max-width: 720px;
  width: 100%;
}

.supplier-panel[data-panel="company"] .supplier-label,
.supplier-panel[data-panel="orderlink"] .supplier-label {
  font-size: 12px;
  font-weight: 700;
  color: #5b6b62;
  margin-bottom: 10px;
}

.supplier-panel[data-panel="company"] .supplier-textarea {
  border: 1px solid #dce6e0;
  padding: 10px 11px;
  color: #2a3b31;
  font-size: 13.5px;
  height: 84px;
}

.supplier-panel[data-panel="company"] .supplier-field {
  margin-bottom: 6px;
}

.supplier-panel[data-panel="company"] .supplier-input--block,
.supplier-panel[data-panel="orderlink"] .supplier-input--block {
  font-size: 13.5px;
  font-weight: 400;
  color: #000000;
}

.supplier-panel[data-panel="company"] /* 고칠 수 없는 항목. 입력칸처럼 보이면 눌러보고 안 되는 이유를 알 수 없으므로 값만 보여준다. */
.supplier-fixed-value {
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 700;
  color: #2a3b31;
  background-color: #f4f6f4;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.supplier-form-card__actions {
  margin-top: 0px;
}

.supplier-panel[data-panel="company"] .supplier-btn--primary,
.supplier-panel[data-panel="orderlink"] .supplier-btn--primary {
  padding: 14px 22px 13px;
  background-color: #1c3b2e;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 800;
  color: #fff;
}

.supplier-panel[data-panel="company"] .supplier-field-row {
  margin-bottom: 6px;
}

.supplier-panel[data-panel="orderlink"] #kakaoLink {
  color: #2f6fe0;
}

.supplier-field {
  margin-bottom: 18px;
}

.supplier-field:last-child {
  margin-bottom: 0;
}

.supplier-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}

.supplier-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #5b6b62;
  margin-bottom: 8px;
}

.supplier-textarea {
  width: 100%;
  height: 63px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #14241c;
  resize: vertical;
  margin-bottom: 10px;
}

.supplier-textarea:focus {
  outline: none;
  border-color: #1c3b2e;
}

.supplier-input--block {
  text-align: left;
  padding: 12px 11px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
}

.supplier-input--link {
  color: #1d4ed8;
}

.supplier-select--block {
  padding: 11px 30px 11px 14px;
  border-radius: 10px;
  width: 100%;
}

#productRegisterModal .supplier-select--block,
#newRequestModal .supplier-select--block {
  background-color: #efefef;
  border: 1px solid #dce6e0;
  border-radius: 10px;
  padding: 11.5px 15px;
}

.supplier-form-card__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.supplier-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(20, 36, 28, 0.55);
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.supplier-modal-overlay.is-open {
  display: flex;
}

.supplier-modal {
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  background-color: #fff;
  border-radius: 10px;
  padding: 28px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 24px 60px;
}

.supplier-modal--sm {
  max-width: 400px;
}

.supplier-modal__row-label {
  font-size: 12.5px;
  color: #7a8a80;
}

.supplier-modal__note {
  font-size: 11px;
  color: #9aa89f;
  margin-top: 14px;
}

.supplier-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}

.supplier-modal__title {
  font-size: 17px;
  font-weight: 800;
  color: #16271e;
  margin-bottom: 8px;
}

.supplier-modal__desc {
  font-size: 12.5px;
  line-height: 1.6;
  color: #9aa89f;
}

.supplier-modal__close {
  flex-shrink: 0;
  width: 24px;
  height: 22px;
  border-radius: 50%;
  font-size: 14px;
  padding: 0;
}

.supplier-modal__close:hover {
  background-color: #f3f4f6;
}

.supplier-modal__actions {
  display: flex;
  gap: 8px;
  margin-top: 22px;
}

.supplier-modal__actions .supplier-btn {
  flex: 1;
  text-align: center;
}

.supplier-segment {
  display: flex;
  background-color: #f1f5f2;
  border-radius: 11px;
  padding: 4px;
  margin-bottom: 20px;
}

.supplier-segment__btn {
  flex: 1;
  padding: 9px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 700;
  color: #7a8a80;
}

.supplier-segment__btn.active {
  background-color: #fff;
  color: #1c3b2e;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.supplier-request-form {
  display: none;
}

.supplier-request-form.active {
  display: block;
}

.supplier-info-note {
  display: flex;
  align-items: center;
  gap: 7px;
  background-color: #eaf3ee;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 11.5px;
  color: #7a8a80;
}

.supplier-info-note__badge {
  flex-shrink: 0;
  background-color: #fbf1dc;
  color: #c98a1e;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 8px 4px;
  border-radius: 6px;
}

.supplier-sidebar__toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 700;
  color: #14241c;
}

.supplier-sidebar__toggle-arrow {
  font-size: 11px;
  color: #9aa89f;
  transition: transform 0.15s ease;
}

.supplier-sidebar__toggle.is-open .supplier-sidebar__toggle-arrow {
  transform: rotate(180deg);
}

@media (max-width: 1024px) {
  .supplier-wrap {
    flex-direction: column;
    padding: 20px;
  }

  .supplier-sidebar {
    width: 100%;
    flex-direction: column;
    flex-wrap: wrap;
  }

  .supplier-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .supplier-sidebar__logout {
    margin-top: 0;
  }

  .supplier-panel[data-panel="company"],
  .supplier-panel[data-panel="orderlink"] {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .supplier-sidebar__toggle {
    display: flex;
  }

  .supplier-nav.is-open {
    display: flex;
  }

  .supplier-nav {
    display: none;
  }
}

@media (max-width: 720px) {
  .supplier-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .supplier-row--head {
    display: none;
  }

  .supplier-field-row {
    grid-template-columns: 1fr;
  }

  .supplier-col-price,
  .supplier-col-ship,
  .supplier-col-status {
    margin-right: 0;
  }

  .supplier-col-status button {
    width: 100%;
  }

  .supplier-stat-card {
    padding: 10px;
  }
}

@media (max-width: 600px) {
  .supplier-panel__header {
    flex-direction: column;
    gap: 10px;
  }

  .supplier-modal {
    width: 90%;
    padding: 20px;
  }
}

/*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*/

/* ================================

관리자 페이지 style

================================ */

.admin-wrap {
  max-width: 1380px;
  margin: 0 auto;
  padding: 36px 28px;
  display: flex;
  align-items: flex-start;
  gap: 22px;
}

.admin-sidebar {
  width: 220px;
  flex-shrink: 0;
  background-color: #16271e;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  box-shadow: rgba(18, 40, 28, 0.12) 0px 6px 20px;
}

.admin-profile {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 6px 14px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-profile__avatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(140deg, rgb(28, 59, 46), rgb(62, 90, 71));
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-profile__name {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}

.admin-nav {
  display: flex;
  flex-direction: column;
}

.admin-nav__item {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 10px 11px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.66);
}

.admin-nav__item:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

.admin-nav__item.active {
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 700;
}

.admin-nav__badge {
  margin-left: auto;
  background-color: #c2503e;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  height: 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 18px;
}

.admin-sidebar__back {
  font-size: 13px;
  font-weight: 600;
  color: #8ea095;
  padding: 10px;
  margin-top: auto;
  padding-top: 16px;
}

.admin-main {
  flex: 1;
  min-width: 0;
}

.admin-panel {
  display: none;
}
.admin-panel.active {
  display: block;
}

.admin-panel__title {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 8px;
  color: #16271e;
}

.admin-panel__desc {
  font-size: 13px;
  color: #7a8a80;
  margin-bottom: 18px;
  line-height: 1.6;
}

.admin-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

/* ===== 사이트 설정 스위치 ===== */

.admin-switch {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid #eef0f2;
}

.admin-switch:last-child {
  border-bottom: 0;
}

.admin-switch__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: #14241c;
  margin-bottom: 4px;
}

/* 지금 켜져 있는지 한눈에 보이게. 스위치 모양만으로는 상태를 놓치기 쉽다. */
.admin-switch__state {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #7a8896;
  background-color: #f1f3f5;
  border-radius: 999px;
}

.admin-switch__state.is-on {
  color: #fff;
  background-color: #1c3b2e;
}

.admin-switch__desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: #6b7785;
  word-break: keep-all;
}

.admin-switch__note {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.55;
  color: #9aa89f;
  word-break: keep-all;
}

.admin-toggle {
  flex: none;
  position: relative;
  width: 52px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background-color: #d6dbe0;
  cursor: pointer;
  transition: background-color 0.15s;
}

.admin-toggle.is-on {
  background-color: #1c3b2e;
}

.admin-toggle:disabled {
  opacity: 0.6;
  cursor: default;
}

.admin-toggle__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: rgba(18, 40, 28, 0.2) 0 1px 3px;
  transition: transform 0.15s;
}

.admin-toggle.is-on .admin-toggle__knob {
  transform: translateX(22px);
}

.admin-panel__header .admin-panel__desc {
  margin-bottom: 0;
}

.admin-btn {
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.admin-btn--primary {
  background-color: #1c3b2e;
  color: #fff;
}
.admin-btn--outline {
  background-color: #fff;
  border: 1px solid #dce6e0;
  color: #5b6b62;
}
.admin-btn--danger {
  background-color: #fff;
  border: 1px solid #f3c6bd;
  color: #c2503e;
}
.admin-btn--sm {
  padding: 10px 11px 9px;
  font-size: 12px;
  font-weight: 800;
}

.admin-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.admin-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  padding: 5px 9px 4px;
  border-radius: 6px;
  white-space: nowrap;
}

.admin-badge--gray {
  color: #6b7785;
  background-color: #edf0f5;
}
.admin-badge--blue {
  color: #2f6fe0;
  background-color: #eaf1fd;
}
.admin-badge--green {
  color: #1c3b2e;
  background-color: #eeefe9;
}
.admin-badge--red {
  color: #dc2626;
  background-color: #fde8e5;
}
.admin-badge--amber {
  color: #c98a1e;
  background-color: #fbf1dc;
}
.admin-badge--dormant {
  color: #9aa89f;
  background-color: #edf0f5;
}

.admin-stats {
  display: grid;
  gap: 13px;
  margin-bottom: 20px;
}

.admin-stats--4 {
  grid-template-columns: repeat(4, 1fr);
}

.admin-stat-card {
  background-color: #fff;
  border: 1px solid #e2eae5;
  border-radius: 10px;
  padding: 15px 18px;
}

.admin-stat-card__label {
  font-size: 11.5px;
  color: #9aa89f;
  margin-bottom: 3px;
}
.admin-stat-card__value {
  font-size: 24px;
  font-weight: 700;
  color: #16271e;
}

.admin-stat--green {
  color: #4a5a50;
}
.admin-stat--blue {
  color: #2f6fe0;
}
.admin-stat--gray {
  color: #9aa89f;
}

.admin-dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

.admin-dash-grid .admin-card__title {
  padding: 19px 20px;
  border-bottom: 1px solid #eef3f0;
}

.admin-card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: rgba(18, 40, 28, 0.05) 0px 6px 20px;
}

.admin-card--wide {
  grid-column: 1 / -1;
  padding: 20px;
}

.admin-card__title {
  font-size: 15px;
  font-weight: 800;
  color: #16271e;
}

.admin-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}

.admin-card__head .admin-card__title {
  margin-bottom: 0;
  color: #16271e;
  font-size: 15px;
  font-weight: 800;
}

.admin-card__hint {
  font-size: 11.5px;
  font-weight: 600;
  color: #7a8a80;
}

.admin-mini-list {
  display: flex;
  flex-direction: column;
}

.admin-mini-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid #f3f4f6;
}

.admin-mini-row:last-child {
  border-bottom: none;
}

.admin-mini-row__info {
  flex: 1;
  min-width: 0;
}
.admin-mini-row__name {
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 3px;
}
.admin-mini-row__sub {
  font-size: 12px;
  color: #9aa89f;
}

.admin-rank-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-rank-item {
  display: flex;
  align-items: center;
  gap: 9px;
  background-color: #f3f4f6;
  border-radius: 10px;
  padding: 9px 14px;
  cursor: grab;
  box-sizing: border-box;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.admin-rank-item[data-rank="1"] .admin-rank-item__label span {
  color: #1c3b2e;
}

.admin-rank-item__label {
  font-size: 13px;
  font-weight: 700;
  color: #1c3b2e;
}

.admin-rank-item__label span {
  font-size: 12px;
  font-weight: 800;
  color: #9aa89f;
  margin-right: 9px;
}

/*
 * 품목 뒤에 붙는 '상품 N' 표시.
 *
 * .admin-rank-item__label span 규칙이 순위 번호(앞쪽 span)를 위해 오른쪽 여백을 주고 있어,
 * 클래스를 함께 걸어 그 값을 되돌린다.
 */
.admin-rank-item__label .admin-rank-item__count {
  margin-right: 0;
  margin-left: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: #1c7c4a;
}
.admin-rank-item__label .admin-rank-item__count--none {
  color: #b0bbb4;
}

.admin-rank-item__handle {
  color: #9aa89f;
  font-size: 12px;
  touch-action: none;
  user-select: none;
  cursor: grab;
  width: 13px;
  height: 13px;
  background: url(../images/common/icon_drag.svg) no-repeat center;
}

.admin-rank-item.is-dragging {
  outline: 1px solid #9fd9b6;
}

.admin-table-card {
  background-color: #fff;
  box-shadow: rgba(18, 40, 28, 0.05) 0px 6px 20px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}

.admin-row {
  display: grid;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border: 1px solid transparent;
  border-bottom: 1px solid #f1f5f2;
  font-size: 13px;
  box-sizing: border-box;
}

.admin-row > * {
  min-width: 0;
}

.admin-row:last-child {
  border-bottom: none;
}

.admin-row.is-dragging {
  opacity: 0.6;
  border-color: #16a34a;
}

.admin-row--catalog.is-dragging {
  background-color: #e6f4ea;
  border-color: transparent;
}

.admin-row--head {
  padding: 13px 20px;
  background-color: #f6f8fc;
  font-size: 11.5px;
  font-weight: 700;
  color: #7a8a80;
}

.admin-row--approval > div[data-label="상태"],
.admin-row--company > div[data-label="상태"] {
  text-align: center;
}

/* 업체·담당자 / 연락처 / 지역·취급품목 / 상태 / 처리 — 다섯 칸.
   판매채널은 온라인 판매자에게만 받는 값이라 B2B 표에서 뺐다. */
.admin-row--approval {
  grid-template-columns: 1.4fr 1.1fr 1.4fr 0.9fr 1.6fr;
}

/*
 * 입점 신청서 표.
 *
 * 예전 값(1fr 0.8fr 1fr 1.5fr 0.5fr 0.7fr)은 여섯 칸인데 내용은 일곱 칸을 그리고 있어
 * 마지막 칸이 다음 줄로 밀려 표가 어긋나 보였다. 칸 수를 맞추고, 넓은 값(문의 내용 ·
 * 주소 · 사업자등록증)은 표에서 빼 '신청서 보기' 창으로 옮겼다.
 */
.admin-row--inquiry {
  grid-template-columns: 1.4fr 1.3fr 0.9fr 0.8fr 0.6fr 1.6fr;
}

.admin-row--inquiry > div[data-label='상태'] {
  text-align: center;
}

/* 신청서·가입서를 양식 그대로 늘어놓는 목록(모달 안). */
.admin-form-view {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 8px 14px;
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--nf-text);
}
.admin-form-view dt {
  font-weight: 700;
  color: var(--nf-muted);
}
.admin-form-view dd {
  min-width: 0;
  word-break: break-word;
}

@media (max-width: 720px) {
  .admin-form-view {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }
  .admin-form-view dt {
    margin-top: 8px;
    font-size: 11.5px;
  }
}

.admin-row--company {
  grid-template-columns: 1.7fr 1.7fr 0.6fr 0.6fr 0.4fr 1.4fr;
}

/* 패널 안에서 표를 갈라 놓는 중간 제목(입점 신청서 / 입점 업체). */
.admin-section-title {
  margin: 26px 0 6px;
  font-size: 15px;
  font-weight: 800;
  color: #1c3b2e;
}
.admin-section-title:first-of-type {
  margin-top: 14px;
}

/*
 * 운영자 계정 표.
 *
 * 열 수는 업체 표와 같지만 '처리'에 버튼이 셋(권한 변경 · 비밀번호 · 활성)이라
 * 1.4fr 로는 줄바꿈이 잦다. 대신 날짜 두 칸을 조금 줄여 그쪽에 넘긴다.
 */
.admin-row--company.admin-row--acct {
  grid-template-columns: 1.4fr 1.6fr 0.55fr 0.55fr 0.4fr 2fr;
}

/* 업체 관리 표는 '취급 품목' 열을 쓰지 않아 5열이다. */
.admin-row--company.admin-row--company-mng {
  grid-template-columns: 2.4fr 0.7fr 0.7fr 0.5fr 1.4fr;
}

/*
 * 회원 관리 표는 '최근 접속'이 붙어 7열이다.
 * 첫 칸(구분·닉네임·연락처·메일·사업자)에 줄이 다섯까지 쌓이므로 그쪽을 넓게 두고,
 * 날짜 두 칸은 'YYYY.MM.DD'가 안 접히는 만큼만 준다.
 */
.admin-row--company.admin-row--member {
  grid-template-columns: 1.7fr 1.2fr 0.45fr 0.6fr 0.7fr 0.5fr 1.4fr;
}

/* '112일 전' 밑에 실제 날짜. 값이 아니라 곁들이는 정보라 작고 흐리게. */
.admin-row_company__accdate {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  color: #a5b3aa;
}

/* 정렬 선택은 검색칸에서 떨어뜨려 오른쪽 끝에 붙인다.
   .nf-select가 width:100%라 클래스 둘을 겹쳐 확실히 이긴다. */
.nf-select.admin-search__sort {
  margin-left: auto;
  width: auto;
  max-width: 240px;
  flex: none;
  padding: 9px 10px;
  font-size: 13px;
}

.admin-row--company .admin-row_company__item {
  font-size: 12.5px;
  font-weight: 600;
  color: #4a5a50;
}

.admin-row--company .admin-row_company__product {
  font-size: 14px;
  font-weight: 700;
  color: #2a3b31;
  text-align: center;
}

.admin-row--company .admin-row_company__acc {
  font-size: 12.5px;
  font-weight: 600;
  color: #7a8a80;
  text-align: center;
}

/* 맨 앞은 선택 체크박스. 글자가 들어가지 않는 칸이라 고정폭으로 둔다. */
.admin-row--request {
  grid-template-columns: 34px 0.5fr 1.5fr 0.8fr 1.7fr 0.5fr 0.8fr;
}

/* ===================== 가격 연동 =====================
 * 업체 / 연동 방식 / 상태 / 키 만료 / 설정 — 다섯 칸.
 * 상태 칸이 가장 넓다. 여기에는 '정상 65건'뿐 아니라 실패 사유 문장이 그대로 들어간다 —
 * 줄여서 말줄임표로 끊으면 무엇을 고쳐야 하는지가 잘려 나간다.
 */
.admin-row--feed {
  grid-template-columns: 1.1fr 0.8fr 2fr 0.9fr 0.7fr;
}

.admin-feed__state {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  line-height: 1.45;
}

/* 상태를 색 점으로도 표시한다. 문장만 있으면 목록을 훑을 때 눈에 안 걸린다. */
.admin-feed__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c8d2cc;
}
.admin-feed__dot--green {
  background: #2f9e63;
}
.admin-feed__dot--red {
  background: #d64f4f;
}
.admin-feed__dot--blue {
  background: #3d7fd6;
}

.admin-feed__expiry--warn {
  color: #d64f4f;
  font-weight: 700;
}

/*
 * 설정 폼. 표의 한 줄을 열면 그 아래로 펼쳐진다.
 *
 * 별도 창(모달)으로 띄우지 않는 이유: 키를 넣는 일은 어느 업체 줄에서 하는지가
 * 중요하고, 창이 뜨면 그 맥락이 가려진다.
 */
.admin-feed-form {
  padding: 16px 18px 18px;
  border-bottom: 1px solid #e8eee9;
  background: #f7faf8;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-feed-form__field {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.admin-feed-form__field > span {
  font-weight: 700;
  color: #4a5a50;
}

.admin-feed-form__field input,
.admin-feed-form__field select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d5dfd8;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
}

/* 접속 주소는 서브도메인만 받는다. 뒤에 붙는 도메인은 고정이라 글자로 붙여 보여준다. */
.admin-feed-form__host {
  display: flex;
  align-items: center;
  gap: 6px;
}
.admin-feed-form__host em {
  font-style: normal;
  font-size: 12.5px;
  color: #7a8a80;
  white-space: nowrap;
}

.admin-feed-form__guide {
  font-size: 12.5px;
  line-height: 1.6;
  color: #5c6b62;
  background: #fff;
  border: 1px solid #e2eae5;
  border-radius: 6px;
  padding: 10px 12px;
}
.admin-feed-form__guide a {
  color: #2f7d54;
  text-decoration: underline;
}

.admin-feed-form__err {
  font-size: 12.5px;
  line-height: 1.55;
  color: #b23b3b;
  background: #fdf1f1;
  border: 1px solid #f0d2d2;
  border-radius: 6px;
  padding: 10px 12px;
}

.admin-feed-form__ok {
  font-size: 12.5px;
  line-height: 1.6;
  color: #2b6b47;
  background: #f1f8f3;
  border: 1px solid #cfe6d8;
  border-radius: 6px;
  padding: 10px 12px;
}

/* 받아 온 앞 몇 건. 값이 정말 우리가 쓸 공급가인지는 사람이 눈으로 봐야 안다. */
.admin-feed-form__sample {
  margin-top: 6px;
  padding-left: 16px;
  list-style: disc;
  color: #4a5a50;
}
.admin-feed-form__sample li {
  margin-top: 2px;
}

.admin-feed-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* 표 위의 일괄 작업 줄(선택 삭제 등). */
.admin-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.admin-col-check {
  display: flex;
  align-items: center;
}

.admin-col-check input {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.admin-requests_state,
.admin-inquiry_state {
  text-align: center;
}

.admin-row--notice {
  grid-template-columns: 0.8fr 3fr 0.5fr 0.9fr 1.3fr;
}

.admin-row--catalog:not(.admin-row--head) {
  grid-template-columns: 1fr 1.6fr 1.6fr 1fr 0.8fr;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.admin-row--catalog.admin-row--head {
  grid-template-columns: 1fr 1.6fr 1.6fr 1fr 0.8fr;
  background: #fcfdfc;
}

.admin-row__name {
  font-size: 14px;
  font-weight: 700;
  color: #1b2a22;
  margin-bottom: 4px;
}
.admin-row__name--sm {
  font-size: 13px;
  margin-bottom: 3px;
}
.admin-row__sub {
  font-size: 11.5px;
  font-weight: 600;
  color: #9aa89f;
}

/* 회원 메모 미리보기. 다른 보조 줄과 섞이지 않게 색을 달리하고 한 줄로 자른다. */
.admin-row__memo {
  color: #6b7f72;
  background: #f3f7f4;
  border-radius: 4px;
  padding: 2px 6px;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-row__phone {
  font-size: 13px;
  font-weight: 700;
  color: #4a5a50;
}
.admin-row__channel {
  font-size: 12.5px;
  font-weight: 600;
  color: #5b6b62;
}
.admin-row__pin {
  display: inline-block;
  width: 13px;
  height: 13px;
  background: url(../images/common/icon_pin.svg) no-repeat center;
  margin-right: 4.5px;
  vertical-align: middle;
}
.admin-row__handle {
  color: #b7c2ba;
  margin-right: 6px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  display: inline-block;
}

.admin-row--catalog .admin-row__handle {
  width: 15px;
  height: 15px;
  background: url(../images/common/icon_drag2.svg) no-repeat center;
  vertical-align: sub;
}

.admin-row--catalog__item {
  font-size: 14px;
  font-weight: 700;
  color: #1b2a22;
}

.admin-row--catalog__product {
  font-size: 12.5px;
  font-weight: 600;
  color: #46574d;
}

.admin-row--catalog__size {
  font-size: 12px;
  font-weight: 700;
  color: #7a8a80;
}

.admin-row--catalog__lank {
  text-align: center;
}

.admin-col-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.admin-col-actions--icon {
  gap: 4px;
}

.admin-catalog-group .admin-catalog_btn_edit,
.admin-notice_btn_edit {
  border: 1px solid #dce6e0;
  border-radius: 8px;
  padding: 7.5px;
}

.admin-catalog-group .admin-catalog_btn_delete,
.admin-notice_btn_delete {
  border: 1px solid #f0d2cc;
  border-radius: 8px;
  padding: 7.5px;
}

.admin-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: #6b7785;
  font-size: 13px;
}

.admin-icon-btn:hover {
  background-color: #f3f4f6;
}

/* 맨 앞 상품의 ◀, 맨 뒤 상품의 ▶ 처럼 더 갈 곳이 없는 버튼. 자리는 그대로 두고 흐리게만 둔다 —
   버튼이 사라지면 줄마다 아이콘 개수가 달라져 목록이 들썩인다. */
.admin-icon-btn:disabled {
  color: #d3d8de;
  cursor: default;
}

.admin-icon-btn:disabled:hover {
  background-color: transparent;
}

.admin-icon-btn--danger {
  color: #dc2626;
}

.admin-filter-tabs {
  display: flex;
  gap: 7px;
  margin-bottom: 16px;
}

.admin-filter-tabs__btn {
  padding: 11px 14px 10px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: #5b6b62;
  border: 1px solid #e2eae5;
  background-color: #fff;
}

.admin-filter-tabs__btn.active {
  background-color: #1c3b2e;
  border-color: #1c3b2e;
  color: #fff;
}

/* 회원 관리 이름 찾기. 필터 탭 바로 아래에 붙는다. */
.admin-search {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.admin-search__input {
  flex: 1;
  min-width: 0;
  max-width: 420px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  color: #1c3b2e;
  background-color: #fff;
  border: 1px solid #e2eae5;
  border-radius: 7px;
  outline: none;
}
.admin-search__input:focus {
  border-color: #1c3b2e;
}

.admin-search__count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #5b6b62;
  white-space: nowrap;
}

.admin-notice_unfixed {
  background: #eeefe9;
  border: 1px solid #dce6e0;
  color: #1c3b2e;
}

.admin-row--notice .admin-btn--sm {
  padding: 10px 11px 8px;
}

.admin-row--notice .admin-icon-btn {
  width: auto;
  height: auto;
}

.admin-panel[data-panel="catalog"] .admin-panel__header button {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
}

.admin-catalog-group {
  margin-bottom: 22px;
}

.admin-catalog-group__head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 20px;
  background: #f7f8fa;
}

.admin-catalog-dot {
  width: 11px;
  height: 11px;
  border-radius: 3px;
}

/* 카테고리 아이콘(이모지). 색 점과 같은 자리에 서서 제목 시작점이 어긋나지 않게 한다. */
.admin-catalog-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  font-size: 17px;
  line-height: 1;
}

/* 카테고리 추가 줄. 이모지 칸은 좁게, 이름 칸이 남는 폭을 가져간다. */
.admin-cat-add {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-bottom: 1px solid #f1f5f2;
}
.admin-cat-add .nf-input {
  flex: 1;
  min-width: 0;
}
.admin-cat-add__icon {
  flex: 0 0 64px;
  width: 64px;
  text-align: center;
  font-size: 18px;
}
.admin-cat-add .nf-hint {
  flex: 1 0 100%;
  margin-top: 2px;
}

/* 카테고리 한 줄. 아이콘 · 이름 · 품목 수 · 버튼. */
.admin-row--cat {
  grid-template-columns: 48px 1.4fr 1fr 2fr;
}
.admin-cat-row__icon {
  font-size: 20px;
  line-height: 1;
}
.admin-cat-row__noicon {
  font-size: 11.5px;
  font-weight: 700;
  color: #b0bbb4;
}
.admin-cat-row__name {
  font-size: 14px;
  font-weight: 800;
  color: #1c3b2e;
}

.admin-catalog-dot--fruit {
  background-color: #ff8a5b;
}
.admin-catalog-dot--veg {
  background-color: #21a85b;
}
.admin-catalog-dot--sea {
  background-color: #2f8fe0;
}
.admin-catalog-dot--etc {
  background-color: #c98a1e;
}

.admin-catalog-group__title {
  font-size: 16px;
  font-weight: 800;
  color: #16271e;
}

.admin-catalog-group__title span {
  font-size: 11px;
  font-weight: 700;
  color: #7a8a80;
  margin-left: 11px;
  vertical-align: middle;
}

.admin-catalog-group__count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: #9aa89f;
}

.admin-active-count {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: #1c3b2e;
  background-color: #eeefe9;
  border-radius: 9px;
  padding: 10px 12px 9px;
  align-self: flex-start;
}

.admin-notice-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #fbf6e9;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: #8a7a52;
  margin: 16px 0 20px;
}

.admin-banner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.admin-banner-col {
  background-color: #fff;
  box-shadow: rgba(18, 40, 28, 0.05) 0px 6px 20px;
  border-radius: 10px;
}

.admin-banner-grid .admin-btn--sm {
  background: #eeefe9;
  border: 1px solid #bfe6cd;
  color: #1c3b2e;
}

.admin-banner-grid .admin-btn--sm img {
  display: inline-flex;
  margin-right: 5px;
  filter: brightness(0.2) saturate(50%) invert(20%) sepia(80%)
    hue-rotate(110deg);
}

.admin-banner-col__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  border-bottom: 1px solid #eef3f0;
}

.admin-banner-col__title {
  font-size: 14.5px;
  font-weight: 800;
}
.admin-banner-col__title span {
  font-size: 12px;
  font-weight: 600;
  color: #9aa89f;
  margin-left: 4px;
}

.admin-banner-list {
  display: flex;
  flex-direction: column;
}

.admin-banner-empty {
  text-align: center;
  font-size: 12.5px;
  color: #9aa89f;
  padding: 24px 12px;
  border: 1px dashed #e5e7eb;
  border-radius: 10px;
}

.admin-banner-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border-bottom: 1px solid #f4f7f5;
}

.admin-banner-item .admin-badge {
  background: #fff;
  border: 1px solid #1c3b2e;
  border-radius: 8px;
  color: #1c3b2e;
  padding: 4px 8px 3px;
}

.admin-banner_btn_view {
  border: 1px solid #bfdbcb;
  border-radius: 8px;
}

.admin-banner-item:last-child {
  border-bottom: none;
}

.admin-banner-item__slot {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: #9aa89f;
  width: 20px;
}

.admin-banner-item__thumb {
  flex-shrink: 0;
  width: 44px;
  height: 28px;
  border-radius: 6px;
  /* 사진 배너는 실제 사진을 줄여 보여준다(색 블록은 사진이 없을 때만). */
  object-fit: cover;
}

/* 등록 화면의 사진 미리보기. 배너 칸과 같은 7:1로 보여줘야 잘릴 자리가 미리 보인다. */
.admin-banner-preview {
  display: flex;
  align-items: center;
  gap: 14px;
}

.admin-banner-preview img {
  width: 280px;
  height: 40px;
  object-fit: cover;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.admin-banner-preview__name {
  font-size: 12.5px;
  font-weight: 600;
  color: #4a5a50;
  margin-bottom: 6px;
  word-break: break-all;
}

/* '선택' 표시. 필수 항목의 빨간 별표와 짝이 되는 표시다. */
.nf-optional {
  margin-left: 4px;
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: #7a8896;
  background-color: #f1f3f5;
  border-radius: 999px;
  vertical-align: middle;
}

.admin-banner-item__name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
}

.admin-panel[data-panel="notice"] .admin-panel__header button {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
}

.admin-notice_title {
  font-size: 14px;
  font-weight: 700;
  color: #1b2a22;
}

.admin-notice_inq,
.admin-notice_update {
  text-align: center;
}

.admin-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(20, 36, 28, 0.55);
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}

.admin-modal-overlay.is-open {
  display: flex;
}

.admin-modal {
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  background-color: #fff;
  border-radius: 18px;
  padding: 26px;
}

.admin-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.admin-modal__title {
  font-size: 18px;
  font-weight: 800;
}

.admin-modal__close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #9aa89f;
  font-size: 14px;
}

.admin-modal__close:hover {
  background-color: #f3f4f6;
}

.admin-modal__desc {
  font-size: 12.5px;
  line-height: 1.6;
  color: #9aa89f;
  margin-bottom: 20px;
}

.admin-field {
  margin-bottom: 16px;
}
.admin-field:last-child {
  margin-bottom: 0;
}

.admin-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #4b5a51;
  margin-bottom: 8px;
}

.admin-input,
.admin-select {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 13.5px;
  color: #14241c;
}

.admin-select {
  appearance: none;
  padding-right: 34px;
  background-color: #fff;
  background-image: url("images/common/icon_dropdown.svg");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
}

.admin-input:focus,
.admin-select:focus {
  outline: none;
  border-color: #1c3b2e;
}

.admin-dropzone {
  border: 1.5px dashed #d9dcd3;
  border-radius: 12px;
  padding: 26px 16px;
  text-align: center;
  color: #9aa89f;
  font-size: 12.5px;
}

.admin-dropzone__icon {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.admin-modal__actions {
  display: flex;
  gap: 8px;
  margin-top: 22px;
}

.admin-modal__actions .admin-btn {
  flex: 1;
  text-align: center;
}

@media (max-width: 1100px) {
  .admin-stats--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .admin-dash-grid {
    grid-template-columns: 1fr;
  }
  .admin-banner-grid {
    grid-template-columns: 1fr;
  }
}

.admin-sidebar__toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
}

.admin-sidebar__toggle-arrow {
  font-size: 11px;
  color: #b6c2ba;
  transition: transform 0.15s ease;
}

.admin-sidebar__toggle.is-open .admin-sidebar__toggle-arrow {
  transform: rotate(180deg);
}

@media (max-width: 1024px) {
  .admin-wrap {
    flex-direction: column;
  }
  .admin-sidebar {
    width: 100%;
  }
  .admin-main {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .admin-wrap {
    padding: 36px 20px;
  }

  .admin-sidebar {
    flex-direction: column;
  }
  .admin-sidebar__toggle {
    display: flex;
  }
  .admin-nav {
    flex-direction: column;
    display: none;
  }
  .admin-nav.is-open {
    display: flex;
  }
  .admin-sidebar__back {
    margin-top: 0;
  }

  .admin-row--approval,
  .admin-row--inquiry,
  .admin-row--company,
  .admin-row--company.admin-row--company-mng,
  .admin-row--company.admin-row--member,
  .admin-row--request,
  .admin-row--feed,
  .admin-row--notice,
  .admin-row--cat,
  .admin-row--catalog {
    grid-template-columns: 1fr;
  }

  /* 좁은 화면에서는 '항목 이름 120px + 입력칸'이 들어가지 않는다. 위아래로 쌓는다. */
  .admin-feed-form__field {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .admin-row--head {
    display: none;
  }
  .admin-col-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  /* 세로로 쌓일 때는 다른 칸처럼 라벨이 위, 값이 아래로 놓이게 한다. */
  .admin-col-check {
    display: block;
  }

  .admin-row--approval > [data-label],
  .admin-row--company > [data-label],
  .admin-row--request > [data-label],
  .admin-row--feed > [data-label],
  .admin-row--inquiry > [data-label],
  .admin-row--notice > [data-label] {
    padding-top: 4px;
  }

  .admin-row--approval > [data-label]::before,
  .admin-row--company > [data-label]::before,
  .admin-row--request > [data-label]::before,
  .admin-row--feed > [data-label]::before,
  .admin-row--inquiry > [data-label]::before,
  .admin-row--notice > [data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #9aa89f;
    margin-bottom: 4px;
  }

  .admin-rank-list {
    flex-direction: column;
  }

  .admin-rank-item {
    justify-content: space-between;
  }

  .admin-row--approval > div[data-label="상태"],
  .admin-row--company > div[data-label="상태"],
  .admin-row--company > div,
  .admin-requests_state,
  .admin-inquiry_state,
  .admin-notice_inq,
  .admin-notice_update {
    text-align: left !important;
  }
}

@media (max-width: 650px) {
  .admin-row--catalog:not(.admin-row--head) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  .admin-panel__header {
    flex-direction: column;
  }
}

/*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*/

/* ================================

로그인 페이지 style

================================ */

.login-page {
  width: 100%;
  height: 75vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.login-wrap {
  width: 100%;
  max-width: 520px;
}

.login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

.login-card {
  background-color: #ffffff;
  border: 1px solid #eef0f2;
  border-radius: 20px;
  padding: 48px 40px 40px;
  box-shadow: 0 10px 30px rgba(20, 36, 28, 0.05);
}

.login-field {
  margin-bottom: 30px;
}

.login-field:last-of-type {
  margin-bottom: 36px;
}

.login-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid #e5e7eb;
  padding: 4px 2px 12px;
  font-size: 15px;
  color: #14241c;
  background: transparent;
}

.login-input::placeholder {
  color: #a99b8a;
}

.login-input:focus {
  outline: none;
  border-bottom-color: #1c3b2e;
}

.login-submit {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 10px;
  background-color: #1c3b2e;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
}

.login-submit:hover {
  background-color: #1c3b2e;
}

.login-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  font-size: 13.5px;
  color: #6b7785;
}

.login-links a:hover {
  color: #14241c;
  text-decoration: underline;
}

.login-links__divider {
  color: #d9dcd3;
}

.login-banner {
  display: block;
  margin-top: 50px;
  overflow: hidden;
  width: 100%;
  height: 100px;
}

.login-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== 로그인 제목 · 회원 유형 ===== */

.login-title {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 800;
  color: #14241c;
  text-align: center;
}

.login-subtitle {
  margin: 0 0 28px;
  font-size: 14px;
  color: #6b7785;
  text-align: center;
}

/* 두 유형은 하는 일이 달라 나란히 놓고 고르게 한다.
   좁은 화면에서는 세로로 쌓인다 — 옆으로 붙이면 설명이 두 줄씩 접혀 읽기 어렵다. */
.login-types {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.login-type {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 14px;
  text-align: left;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  cursor: pointer;
}

.login-type.is-active {
  border-color: #1c3b2e;
  background-color: #f4f8f5;
  box-shadow: 0 4px 14px rgba(28, 59, 46, 0.08);
}

.login-type__name {
  font-size: 14px;
  font-weight: 800;
  color: #14241c;
}

.login-type__desc {
  font-size: 12px;
  line-height: 1.6;
  color: #6b7785;
  white-space: pre-line; /* 문구의 줄바꿈을 그대로 살린다 */
}

/* ===== 회원가입 두 갈래 ===== */

.login-signup {
  margin-top: 24px;
  text-align: center;
}

.login-signup__ask {
  margin: 0 0 10px;
  font-size: 13.5px;
  color: #6b7785;
}

.login-signup__paths {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.login-signup__link {
  font-size: 14px;
  font-weight: 700;
  color: #1c3b2e;
}

.login-signup__link:hover {
  text-decoration: underline;
}

/* ===== 입점 업체 배너 ===== */

.partner-rail {
  margin-top: 40px;
  padding: 16px 18px;
  background-color: #fff;
  border: 1px solid #eef0f2;
  border-radius: 14px;
}

.partner-rail__title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #9aa89f;
}

/* 한 칸만 보이고 다음 업체가 위로 올라온다. 높이를 고정해야 넘어갈 때 카드가 출렁이지 않는다. */
.partner-swiper {
  height: 40px;
}

.partner-item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  min-width: 0;
}

.partner-item__name {
  flex: none;
  font-size: 14px;
  font-weight: 800;
  color: #14241c;
}

.partner-item__region {
  flex: none;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #1c3b2e;
  background-color: #eef7f1;
  border-radius: 999px;
}

.partner-item__items {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: #7a8896;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .login-types {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .login-card {
    padding: 36px 24px 28px;
    border-radius: 16px;
  }
}

/* ===== 제휴목록 (게시판 세 번째 탭) =====
   위쪽은 입점 업체 목록, 아래쪽은 운영자가 쓰는 거래·상품 안내 글이다.
   업체도 글도 '한 줄에 하나'로 둔다 — 카드로 늘어놓으면 같은 탭 안에서 두 덩이가
   서로 다른 물건처럼 보이고, 업체가 늘어날수록 화면만 길어진다. */

.partner-list {
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: rgba(18, 40, 28, 0.05) 0px 6px 20px;
  margin-bottom: 26px;
}

.partner-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid #f1f4f2;
}

.partner-row:last-child {
  border-bottom: 0;
}

/* 업체 이름과 지역·취급품목이 한 줄에 선다. 좁아지면 품목부터 줄인다. */
.partner-row__main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.partner-row__name {
  flex: none;
  font-size: 14.5px;
  font-weight: 800;
  color: #14241c;
}

.partner-row__name:hover {
  text-decoration: underline;
}

.partner-row__badge {
  flex: none;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #1c3b2e;
  background-color: #eef7f1;
  border-radius: 999px;
}

.partner-row__meta {
  min-width: 0;
  font-size: 12.5px;
  color: #7a8896;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.partner-row__side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.partner-row__stat {
  font-size: 12.5px;
  font-weight: 600;
  color: #4d6357;
  white-space: nowrap;
}

.partner-row__btn {
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background-color: #1c3b2e;
  border-radius: 8px;
  white-space: nowrap;
}

/* 문의는 업체를 고르고 나서 하는 일이라, 상품 보기보다 한 걸음 뒤에 둔다. */
.partner-row__btn--ghost {
  color: #1c3b2e;
  background-color: #fff;
  border: 1px solid #cfdcd4;
}

/* 업체 목록과 글 목록 사이의 가름줄. 글이 업체 정보의 연장으로 읽히지 않게 한다. */
.partner-notice__title {
  padding-top: 4px;
  border-top: 1px solid #eef0f2;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 800;
  color: #14241c;
}

/* 좁은 화면에서는 이름 줄과 버튼 줄을 위아래로 나눈다 — 한 줄에 밀어 넣으면
   업체 이름이 두 글자만 남고 말줄임표가 된다. */
@media (max-width: 640px) {
  .partner-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .partner-row__main {
    flex-wrap: wrap;
  }

  .partner-row__side {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ===================== 상품 짝짓기 =====================
 * 어드민플러스 상품 수백 줄을 한 화면에서 훑는다. 기본 모달(460px)로는 좁아
 * 상품명과 고르는 칸이 한 줄에 들어가지 않는다.
 */
.admin-modal--wide {
  max-width: 1080px;
}

.admin-map__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 8px;
  flex-wrap: wrap;
}

.admin-map__search {
  flex: 1 1 200px;
  max-width: 280px;
  padding: 7px 10px;
  border: 1px solid #d5dfd8;
  border-radius: 6px;
  font-size: 13px;
}

/* 목록만 따로 구른다. 창 전체가 구르면 위의 필터가 화면 밖으로 나가 버린다. */
.admin-map__list {
  max-height: 58vh;
  overflow-y: auto;
  border: 1px solid #e8eee9;
  border-radius: 8px;
}

.admin-map__row {
  display: grid;
  grid-template-columns: 1.5fr 1.3fr 1.2fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #f0f4f1;
}
.admin-map__row:last-child {
  border-bottom: 0;
}

.admin-map__name {
  font-size: 13px;
  font-weight: 700;
  color: #33403a;
  line-height: 1.4;
}

.admin-map__meta {
  margin-top: 2px;
  font-size: 11.5px;
  color: #8b9a91;
}

.admin-map__tag {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #fdf1f1;
  color: #b23b3b;
  font-size: 11px;
  font-weight: 700;
}

.admin-map__pick {
  display: flex;
  gap: 6px;
  align-items: center;
}

.admin-map__pick select {
  flex: 1;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid #d5dfd8;
  border-radius: 6px;
  font-size: 12.5px;
  background: #fff;
}

.admin-map__state {
  font-size: 12px;
  line-height: 1.5;
}

/* 추천은 눌러서 그대로 받는 자리다. 글자만 두면 눌러도 되는지 알 수 없다. */
.admin-map__suggest {
  text-align: left;
  color: #2f7d54;
  background: #f1f8f3;
  border: 1px solid #cfe6d8;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  width: 100%;
}
.admin-map__suggest:hover {
  background: #e6f3ea;
}

.admin-map__todo {
  color: #9aa89f;
}

.admin-map__conflict {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 11.5px;
  color: #b06a1f;
}
.admin-map__conflict label {
  display: flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}

/* 규격 만들기 줄. 세 칸을 가로로 두어 한 번에 채우게 한다. */
.admin-map__new {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  background: #f7faf8;
  border: 1px solid #e2eae5;
  border-radius: 6px;
}
.admin-map__new input,
.admin-map__new select {
  flex: 1 1 120px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid #d5dfd8;
  border-radius: 6px;
  font-size: 12.5px;
  background: #fff;
}

.admin-map__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

@media (max-width: 900px) {
  .admin-map__row {
    grid-template-columns: 1fr;
  }
}

/* ===================== 가격 변동 =====================
 * 업체 / 품목·상품·규격 / 변동 / 확인 / 처리 — 다섯 칸.
 * '변동' 칸이 넓다. 이전값 → 새값 → 비율이 한 줄에 서야 훑으면서 판단할 수 있다.
 */
.admin-row--diff {
  grid-template-columns: 1fr 1.8fr 1.5fr 0.7fr 1fr;
}

.admin-diff__price {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 13px;
}

.admin-diff__old {
  color: #9aa89f;
  text-decoration: line-through;
}

.admin-diff__arrow {
  color: #b9c4bd;
}

/* 오름은 붉게, 내림은 푸르게. 전광판의 등락 표시와 같은 뜻으로 읽히게 둔다. */
.admin-diff__up {
  color: #d64f4f;
}
.admin-diff__down {
  color: #2f7d54;
}

.admin-diff__new {
  padding: 1px 6px;
  border-radius: 4px;
  background: #eef4ff;
  color: #3d7fd6;
  font-size: 11px;
  font-weight: 700;
}

.admin-diff__pct {
  font-size: 11.5px;
  color: #8b9a91;
}

/* 30%를 넘은 건. 목록에서 한눈에 걸려야 한다. */
.admin-diff__pct--warn {
  font-size: 11.5px;
  font-weight: 700;
  color: #b23b3b;
  background: #fdf1f1;
  border-radius: 4px;
  padding: 1px 6px;
}

@media (max-width: 900px) {
  .admin-row--diff {
    grid-template-columns: 1fr;
  }
  .admin-row--diff > [data-label] {
    padding-top: 4px;
  }
  .admin-row--diff > [data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #9aa89f;
    margin-bottom: 4px;
  }
}

/* 자동 반영 스위치. 켜고 끈 결과가 무엇인지 그 자리에서 읽히도록 설명을 붙인다. */
.admin-feed-form__toggle label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}
.admin-feed-form__toggle em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 11.5px;
  color: #8b9a91;
}