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

.page-hero h1 {
  max-width: 820px;
  font-size: clamp(2.25rem, 5vw, 4.6rem);
  line-height: 1.04;
}

.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 {
  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 {
  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 {
  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 {
  min-height: 150px;
  padding: 12px;
  resize: vertical;
}

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

.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;
  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: minmax(0, 1fr) 420px;
  gap: 24px;
  align-items: start;
  padding: 24px 0 58px;
}

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

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

.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-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-form {
  display: grid;
  gap: 18px;
  padding: 26px;
  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 {
  display: grid;
  gap: 16px;
  padding: 22px;
  background: #ffffff;
  border: 1px solid var(--color-line);
  border-radius: 8px;
}

.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-board,
.admin-list {
  display: grid;
  gap: 14px;
}

.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: center;
  gap: 10px 14px;
}

.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 textarea {
  width: 100%;
  padding: 12px;
  color: var(--color-ink);
  background: #ffffff;
  border: 1px solid var(--color-line);
  border-radius: 8px;
}

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

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

.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;
}

@media (max-width: 940px) {
  /*
    하위 페이지의 공통 모바일 규칙입니다.
    2열 구조를 모두 1열로 바꾸어 화면이 좁아도 내용이 잘리지 않게 합니다.
  */
  .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,
  .board-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

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

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