/* 내 문의 모바일 조회 버튼과 작성 리뷰 아코디언 — 애플리케이션 동작 보정. */
.page-inquiry .option-select {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-inquiry .inquiry-period-submit {
  display: none;
  height: 40px;
  flex-shrink: 0;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  color: #222;
}

.page-inquiry .review-box {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page-inquiry .review-box > li {
  /* 목업 원본의 깊은 중첩 선택자를 안정적으로 초기화한다. */
  background: #fff !important;
  box-shadow: none !important;
}

.page-inquiry .review-box .pd_zone {
  position: relative;
}

.page-inquiry .review-card-toggle {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.page-inquiry .review-box .pd_zone > div,
.page-inquiry .review-box .pd_zone > p {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.page-inquiry .review-box .pd_zone a {
  pointer-events: auto;
}

.page-inquiry .review-box .review-zone {
  display: none;
}

.page-inquiry .review-box > li.on .review-zone {
  display: block;
}

.page-inquiry .review-content {
  position: relative;
  padding: 16px 0;
  border-bottom: 1px solid #ddd;
}

.page-inquiry .review-content .review {
  display: -webkit-box;
  overflow: hidden;
  /* 목업 원본 `.review`의 패딩·구분선이 바깥 컨테이너와 중복되지 않게 초기화한다. */
  padding: 0 !important;
  border: 0 !important;
  line-height: 24px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.page-inquiry .review-content .review.expanded {
  display: block;
}

.page-inquiry .review-more {
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-action-blue-text);
  font-size: 14px;
  line-height: 24px;
}

@media (max-width: 768px) {
  .page-inquiry .inquiry-period-submit {
    display: block;
  }

  .page-inquiry .inquiry-date-submit {
    display: none;
  }

  /*
   * 기간 날짜 입력(시작/종료)이 모바일에서 가로로 넘치던 문제 보정.
   * 목업(inquiry.css)은 `.date-wrap input` 에 고정 `width:201px` 를 줘, 좁은 폰 폭에서는
   * 두 입력(각 201px)이 한 줄에 안 들어가 가로 스크롤이 생겼다. `.date-wrap` 의 flex 자식은
   * input 이 아니라 이를 감싼 `label` 이므로, label 을 균등 분배(flex)하고 input 은 label 폭에
   * 맞춘다(고정 201px 해제). 구분선 span 은 그대로 둔다.
   */
  .page-inquiry .date-wrap > label {
    flex: 1 1 0;
    min-width: 0;
  }

  .page-inquiry .date-wrap input {
    /* 목업의 고정 width:201px 는 `.date-wrap` 이 여러 부모 아래 깊게 중첩돼 특정도가 높다 —
       !important 로 확실히 눌러 label 폭에 맞춘다(그러지 않으면 폰에서 가로 오버플로우). */
    width: 100% !important;
    min-width: 0;
    /* iOS(WKWebView/Safari)는 date 입력을 네이티브 인트린식 폭으로 렌더해 width:100% 를 무시,
       종료일 칸이 화면 밖으로 넘친다(안드로이드는 정상). appearance 를 꺼 일반 상자로 만들어
       width 가 먹게 한다 — 주문화면 `.shopping-dates input` 이 이미 쓰는 방식과 동일. */
    -webkit-appearance: none;
    appearance: none;
  }
}