.page-hero {
  /* 하위 페이지 상단의 큰 제목 영역입니다. 상품 목록, 문의, 공지에서 함께 사용합니다. */
  display: grid;
  gap: 14px;
  padding: 76px 0 34px;
}

.page-hero h1 {
  max-width: 820px;
  /*
    상품 목록/문의 게시판 제목은 메인 페이지의 핵심 문구와 같은 크기감으로 맞춥니다.
    이전 최대값(4.6rem)은 하위 페이지 제목으로는 과하게 크게 보일 수 있었습니다.
  */
  font-size: 3.8rem;
  line-height: 1.16;
}

.page-hero p:not(.eyebrow) {
  max-width: 760px;
  color: var(--color-muted);
  font-size: 1.05rem;
}

.compact-hero {
  padding-bottom: 22px;
}

.catalog-layout {
  /*
    상품 목록 페이지는 데스크톱에서 왼쪽 필터 + 오른쪽 상품 목록 2열 구조입니다.
    모바일에서는 아래 @media에서 1열로 바뀝니다.
  */
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 24px 0 56px;
}

.filter-panel,
.info-card,
.lookup-panel {
  display: grid;
  gap: 16px;
  padding: 22px;
  background: #ffffff;
  border: 1px solid var(--color-line);
  border-radius: 8px;
}

.filter-panel {
  /* 데스크톱에서는 스크롤해도 필터가 화면 위쪽에 남아 있도록 sticky를 사용합니다. */
  position: sticky;
  top: 96px;
}

.filter-panel h2,
.info-card h2 {
  font-size: 1.25rem;
}

.filter-panel label,
.inquiry-form label,
.lookup-form label,
.owner-review-form label {
  display: grid;
  gap: 8px;
  color: var(--color-ink);
  font-weight: 800;
}

.filter-panel input,
.filter-panel select,
.inquiry-form input,
.inquiry-form select,
.inquiry-form textarea,
.lookup-form input,
.owner-review-form select,
.owner-review-form textarea {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  color: var(--color-ink);
  background: #ffffff;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  outline: 0;
}

.inquiry-form textarea,
.owner-review-form textarea {
  min-height: 150px;
  padding: 12px;
  resize: vertical;
}

.filter-help,
.field-help,
.form-note,
.info-card p {
  color: var(--color-muted);
  font-size: 0.94rem;
}

.field-help {
  font-weight: 600;
  line-height: 1.45;
}

.catalog-results {
  display: grid;
  gap: 18px;
}

.catalog-results .product-grid {
  /* 상품 목록 페이지의 카드 그리드입니다. 데스크톱에서는 3열로 보여 줍니다. */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.result-topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.result-topline span {
  color: var(--color-muted);
  font-weight: 800;
}

.board-layout {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 24px 0 58px;
}

.inquiry-side {
  /*
    HTML에서는 문의글 목록이 먼저 오지만, 화면에서는 글쓰기/찾기 영역을 왼쪽에 둡니다.
    order만 바꾸면 모바일 1열에서도 aside가 자연스럽게 먼저 표시됩니다.
  */
  order: -1;
}

.board-list {
  display: grid;
  gap: 14px;
}

.board-items {
  display: grid;
  gap: 14px;
}

.pagination,
.board-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding-top: 4px;
}

.catalog-pagination {
  margin-top: 2px;
}

.page-button {
  min-width: 42px;
  min-height: 40px;
  padding: 0 12px;
  color: var(--color-primary-dark);
  background: #ffffff;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  font-weight: 900;
}

.page-button:not(:disabled) {
  cursor: pointer;
}

.page-button.is-active {
  color: #ffffff;
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.page-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.page-ellipsis {
  display: inline-flex;
  min-width: 24px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-weight: 900;
}

.board-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 22px;
  background: #ffffff;
  border: 1px solid var(--color-line);
  border-radius: 8px;
}

.board-row h3 {
  margin-bottom: 6px;
  font-size: 1.1rem;
}

.board-row p {
  color: var(--color-muted);
  font-size: 0.94rem;
}

.board-row.is-closed {
  background: #f0f2f1;
  opacity: 0.66;
}

.board-row.is-closed h3,
.board-row.is-closed p {
  color: var(--color-muted);
}

.board-date {
  margin-top: 10px;
  font-size: 0.84rem;
}

.question-box,
.answer-box {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--color-line);
  border-radius: 8px;
}

.question-box {
  background: #ffffff;
}

.question-box strong,
.answer-box strong {
  color: var(--color-ink);
}

.answer-box {
  background: #f6faf8;
}

.field-hint {
  color: var(--color-muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.form-status {
  min-height: 22px;
  color: var(--color-primary-dark);
  font-weight: 800;
}

.inquiry-side,
.lookup-fields,
.lookup-form,
.lookup-results,
.inquiry-form {
  display: grid;
  gap: 18px;
}

.lookup-panel {
  /*
    내 문의글 찾기는 모든 방문자가 쓰는 기능이 아니므로 기본 화면에서는 버튼만 보여 줍니다.
    버튼을 누른 사용자에게만 입력 폼을 펼쳐, 견적/납기 문의 폼이 더 먼저 보이게 합니다.
  */
  padding: 18px;
}

.lookup-toggle {
  justify-content: center;
  width: 100%;
}

.lookup-form {
  /*
    내 문의글 찾기는 짧은 정보 3개만 입력하므로 2열로 압축합니다.
    1행은 성함/연락처, 2행은 비밀번호/찾기 버튼으로 배치합니다.
  */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 14px;
}

.lookup-form .button {
  min-height: 46px;
}

.lookup-form .form-status {
  grid-column: 1 / -1;
}

.lookup-form .form-status:empty {
  display: none;
}

.lookup-results:empty {
  display: none;
}

.inquiry-form {
  padding: 26px;
  background: #ffffff;
  border: 1px solid var(--color-line);
  border-radius: 8px;
}

.owner-inquiry-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  background: #f8faf9;
  border: 1px solid var(--color-line);
  border-radius: 8px;
}

.owner-inquiry-card h3 {
  font-size: 1.08rem;
}

.owner-inquiry-meta {
  color: var(--color-muted);
  font-size: 0.92rem;
}

.owner-review-form {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--color-line);
  border-radius: 8px;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.admin-layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 24px 0 58px;
}

.admin-panel,
.admin-inquiry-card,
.admin-review-card {
  display: grid;
  gap: 16px;
  padding: 22px;
  background: #ffffff;
  border: 1px solid var(--color-line);
  border-radius: 8px;
}

.admin-inquiry-card {
  /*
    관리자 화면에서는 카드 자체에도 상태 색을 입혀 빠르게 훑어볼 수 있게 합니다.
    배지보다 진한 왼쪽 테두리를 주되, 본문 가독성을 해치지 않도록 배경은 아주 약하게만 둡니다.
  */
  border-left-width: 8px;
}

.admin-card-status-inquiry {
  border-color: #d5e4e8;
  border-left-color: #1783a8;
  background: linear-gradient(90deg, rgba(223, 243, 251, 0.72), #ffffff 44%);
}

.admin-card-status-answered {
  border-color: #c7e7d9;
  border-left-color: #168564;
  background: linear-gradient(90deg, rgba(223, 245, 236, 0.78), #ffffff 44%);
}

.admin-card-status-order {
  border-color: #ead28e;
  border-left-color: #b87500;
  background: linear-gradient(90deg, rgba(255, 241, 199, 0.82), #ffffff 44%);
}

.admin-card-status-paid {
  border-color: #d7cef8;
  border-left-color: #6c58b7;
  background: linear-gradient(90deg, rgba(236, 231, 255, 0.8), #ffffff 44%);
}

.admin-card-status-done {
  border-color: #b8d9ce;
  border-left-color: var(--color-primary);
  background: linear-gradient(90deg, rgba(210, 237, 228, 0.82), #ffffff 44%);
}

.admin-card-status-closed {
  border-color: #d6dce0;
  border-left-color: #7d8790;
  background: linear-gradient(90deg, rgba(237, 240, 242, 0.92), #ffffff 44%);
}

.admin-panel {
  position: sticky;
  top: 96px;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-profile {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--color-line);
}

.admin-profile div {
  display: grid;
  gap: 4px;
}

.admin-profile dt {
  color: var(--color-muted);
  font-weight: 800;
}

.admin-profile dd {
  overflow-wrap: anywhere;
  margin: 0;
  font-weight: 800;
}

.admin-main,
.admin-board,
.admin-list {
  display: grid;
  gap: 14px;
}

.admin-view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-view-tab {
  min-height: 48px;
  padding: 0 22px;
  color: var(--color-primary-dark);
  background: #ffffff;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  font-weight: 900;
}

.admin-view-tab.is-active {
  color: #ffffff;
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 10px 24px rgba(0, 92, 75, 0.18);
}

.admin-section-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
}

.admin-filter-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 220px;
  gap: 8px 10px;
  color: var(--color-ink);
  font-weight: 800;
}

.admin-filter-control select {
  width: 160px;
  min-height: 46px;
  padding: 0 12px;
  color: var(--color-ink);
  background: #ffffff;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  outline: 0;
}

.admin-inquiry-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--color-muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.private-contact {
  padding: 12px;
  color: var(--color-ink);
  background: #f8f5ee;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  font-weight: 800;
}

.badge-answer-done {
  color: #ffffff;
  background: var(--color-primary);
}

.admin-inquiry-card label {
  display: grid;
  gap: 8px;
  font-weight: 800;
}

.admin-manage-actions {
  display: flex;
  flex-wrap: wrap;
  /*
    진행 상태 라벨은 위에 텍스트가 한 줄 더 있어서 버튼보다 높습니다.
    버튼을 가운데에 맞추면 선택창과 기준선이 어긋나므로 아래쪽 기준선에 맞춥니다.
  */
  align-items: flex-end;
  gap: 10px 14px;
}

.status-control {
  min-width: 150px;
}

.admin-manage-actions .button {
  min-height: 46px;
}

.admin-manage-actions .answer-save-status {
  flex-basis: 100%;
  margin: 0;
}

.admin-edit-box {
  display: grid;
  gap: 14px;
  padding: 16px;
  background: #f8faf9;
  border: 1px solid var(--color-line);
  border-radius: 8px;
}

.admin-edit-box h4 {
  font-size: 1rem;
}

.admin-edit-grid {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 0.8fr;
  gap: 12px;
}

.admin-edit-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.admin-inquiry-card input,
.admin-inquiry-card select,
.admin-inquiry-card textarea {
  width: 100%;
  padding: 12px;
  color: var(--color-ink);
  background: #ffffff;
  border: 1px solid var(--color-line);
  border-radius: 8px;
}

.admin-inquiry-card input,
.admin-inquiry-card select {
  min-height: 44px;
}

.admin-inquiry-card textarea {
  min-height: 120px;
  resize: vertical;
}

.answer-editor {
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--color-line);
  border-left-width: 7px;
  border-radius: 8px;
}

.answer-editor textarea {
  border-color: transparent;
}

.answer-editor-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.answer-state {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 900;
}

.answer-state::before {
  width: 7px;
  height: 7px;
  background: currentColor;
  border-radius: 50%;
  content: "";
}

.answer-editor.is-empty {
  background: #fff7f7;
  border-color: #e8b6b3;
  border-left-color: #b42318;
  border-style: dashed;
  border-left-style: solid;
}

.answer-editor.is-empty .answer-state {
  color: #ffffff;
  background: #b42318;
}

.answer-editor.is-empty textarea {
  background: #fffdfd;
}

.answer-editor.has-answer {
  background: #f4f7ff;
  border-color: #b8c7ee;
  border-left-color: #1d4ed8;
}

.answer-editor.has-answer .answer-state {
  color: #ffffff;
  background: #1d4ed8;
}

.answer-editor.has-answer textarea {
  background: #fbfcff;
}

.answer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.answer-save-status {
  min-height: 22px;
  color: var(--color-primary-dark);
  font-size: 0.92rem;
  font-weight: 800;
}

.answer-save-status.is-error {
  color: #a03d2c;
}

.admin-review-card h3 {
  font-size: 1.1rem;
}

.admin-review-card {
  border-left-width: 8px;
}

.review-card-pending {
  border-color: #ead28e;
  border-left-color: #b87500;
  background: linear-gradient(90deg, rgba(255, 248, 228, 0.9), #ffffff 44%);
}

.review-card-published {
  border-color: #c7e7d9;
  border-left-color: #168564;
  background: linear-gradient(90deg, rgba(223, 245, 236, 0.78), #ffffff 44%);
}

.review-card-hidden {
  border-color: #d6dce0;
  border-left-color: #7d8790;
  background: linear-gradient(90deg, rgba(237, 240, 242, 0.92), #ffffff 44%);
}

.badge-review-pending {
  color: #7a4a08;
  background: #fff1c7;
}

.badge-review-published {
  color: #ffffff;
  background: var(--color-primary);
}

.badge-review-hidden {
  color: #5f6870;
  background: #edf0f2;
}

.review-contact {
  background: #f5fbf8;
}

.review-stars {
  color: var(--color-accent);
  font-size: 1.08rem;
  font-weight: 900;
  letter-spacing: 0;
}

.admin-review-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
}

.admin-review-actions .button.is-current {
  cursor: default;
}

@media (max-width: 940px) {
  /*
    하위 페이지의 공통 모바일 규칙입니다.
    2열 구조를 모두 1열로 바꾸어 화면이 좁아도 내용이 잘리지 않게 합니다.
  */
  .page-hero h1 {
    font-size: 3rem;
  }

  .catalog-layout,
  .board-layout,
  .admin-layout {
    grid-template-columns: 1fr;
  }

  .admin-edit-grid {
    grid-template-columns: 1fr;
  }

  .filter-panel,
  .admin-panel {
    /* 모바일에서는 sticky 필터가 오히려 불편할 수 있어 일반 위치로 돌립니다. */
    position: static;
  }

  .catalog-results .product-grid {
    /* 상품 카드는 3열에서 2열로 줄입니다. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  /* 휴대폰 폭에서는 폼 입력칸과 문의 글 행을 모두 1열로 바꿉니다. */
  .field-row,
  .lookup-form,
  .board-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .page-hero {
    padding-top: 48px;
  }

  .page-hero h1 {
    font-size: 2.25rem;
  }

  .catalog-results .product-grid {
    /* 가장 좁은 화면에서는 상품 카드도 1열이 가장 읽기 쉽습니다. */
    grid-template-columns: 1fr;
  }

  .admin-filter-control {
    min-width: 0;
    width: 100%;
  }

  .admin-filter-control select {
    flex: 1 1 150px;
    width: auto;
  }

  .admin-view-tab {
    flex: 1 1 140px;
  }
}