/* ================= Review Page ================= */
/* 후기 css*/
.review-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:14px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  margin-bottom:18px;
}

.review-topbar__text{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.review-topbar__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
}

.review-intro{ margin:8px 0 14px; }
.review-intro__lead{ margin:0; font-size:18px; font-weight:900; }
.review-intro__sub{ margin:8px 0 0; }

.review-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:14px 0 6px;
}

.review-divider{
  border:0;
  border-top:1px solid var(--line);
  margin:18px 0;
}

.review-placeholder__box{
  border:1px dashed var(--line);
  border-radius:14px;
  padding:16px;
  background:#fff;
}

.review-bottombar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--line);
}

.review-bottombar__link{
  font-weight:900;
  text-decoration:none;
  white-space:nowrap;
}

/* 모바일 */
@media (max-width: 760px){
  .review-topbar{
    flex-direction:column;
    align-items:flex-start;
  }
  .review-topbar__btn{ width:100%; }
  .review-bottombar{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* ================= Review Form (작성폼 전용) ================= */
.review-form-note{
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px 16px;
  background:#fff;
  margin-bottom:14px;
}
.review-form-note ul{ margin:8px 0 0; padding-left:18px; }
.review-form-note li{ margin:6px 0; }

.review-alert{
  border-radius:14px;
  padding:12px 14px;
  margin:12px 0;
}
.review-alert--error{
  border:1px solid #fecaca;
  background:#fff1f2;
}

/* ✅ 폼 레이아웃은 .review-form 안에서만 적용 (목록 카드와 충돌 방지) */
.review-form .review-grid{
  display:grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap:16px 18px;
  border-top:1px solid var(--line);
  padding-top:14px;
  align-items:stretch; /* ⭐ 같은 row에서 label/field 높이 맞춤 */
}

/* ✅ label을 기준 높이로 */
.review-form .review-label{
  background:#f1f5f9;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  font-weight:900;
  display:flex;
  align-items:center;
  min-height:56px; /* ⭐ 기준 */
}

/* ✅ field도 label 기준으로 높이/정렬 맞춤 */
.review-form .review-field{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  background:#fff;
  min-height:56px;          /* ⭐ label과 동일 */
  display:flex;
  flex-direction:column;    /* textarea + helper 텍스트 대응 */
  justify-content:center;   /* 기본은 세로 중앙 */
  gap:8px;
  min-width:0;
}

/* 입력 공통 */
.review-form .review-field input[type="text"],
.review-form .review-field input[type="password"],
.review-form .review-field input[type="file"],
.review-form .review-field textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  font:inherit;
  min-width:0;
  box-sizing:border-box;
}

.review-form .review-field textarea{
  resize:vertical;
  min-height:160px;   /* 내용칸 가독성 */
}

/* 비번 2칸: 한 줄에 2개(PC), 모바일에서 1열 */
.review-form .review-field .row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.review-form .review-field .row > *{
  flex:1 1 260px;
  min-width:0;
}

/* textarea / file / captcha는 세로 중앙 정렬 해제(위에서부터) */
.review-form .review-field:has(textarea),
.review-form .review-field:has(input[type="file"]),
.review-form .review-field:has(.captcha-box){
  justify-content:flex-start;
  min-height:auto;
}

.small{ font-size:12px; }
.muted{ color: var(--muted); }

.captcha-box{
  border:1px dashed var(--line);
  border-radius:12px;
  padding:12px;
  background:#fff;
}

.review-form-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:16px;
  flex-wrap:wrap;
}

/* ✅ 모바일: 라벨/필드 세로 스택 */
@media (max-width: 760px){
  .review-form .review-grid{ grid-template-columns: 1fr; }
  .review-form .review-label{ justify-content:flex-start; min-height:auto; }
  .review-form .review-field{ min-height:auto; }
}

/* ================= 후기상세 ================= */
/* 후기 이미지 */
.review-photo{
  max-width: 100%;
  max-height: 300px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin-top: 16px;
  border-radius: 14px;
  background: #f3f4f6;
  cursor: zoom-in;
}

/* 삭제 비번 입력 */
.pw-input{
  height: 38px;
  padding: 0 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  min-width: 180px;
  outline: none;
}
.pw-input:focus{ border-color: #94a3b8; }

/* 에러 메시지 */
.err-msg{
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff1f2;
  color: #e11d48;
  border: 1px solid #fecdd3;
  font-size: 14px;
}

/* danger 버튼 */
.qbtn-danger{
  background: #ef4444;
  color: #fff;
  border-color: transparent;
}
.qbtn-danger:hover{ filter: brightness(0.95); }

/* 모달 배경 */
.image-modal{
  display:none;
  position:fixed;
  z-index:9999;
  inset:0;
  background:rgba(0,0,0,0.85);
  align-items:center;
  justify-content:center;
}

/* 모달 이미지 */
.image-modal-content{
  max-width:92%;
  max-height:92%;
  border-radius:14px;
  box-shadow:0 20px 40px rgba(0,0,0,.5);
  cursor:zoom-out;
}

/* 닫기 버튼 */
.image-modal-close{
  position:absolute;
  top:20px;
  right:28px;
  font-size:40px;
  color:#fff;
  cursor:pointer;
  font-weight:300;
}

/* =========================
   검색영역 (PC/모바일 안정화)
   ========================= */
.page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}
.page-head > div{ flex:0 0 auto; }
.page-head .h1{ white-space:nowrap; }

.review-search{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  flex:1 1 auto;
  justify-content:flex-end;
  width:auto;
  max-width:450px;
}

.review-search .review-type{
  height:40px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:0 10px;
  flex:0 0 auto;
}

.review-search .review-q{
  height:40px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:0 12px;
  flex:1 1 auto;
  min-width:220px;
  max-width:520px;
  box-sizing:border-box;
  width:auto;
  display:block;
}

.review-search .review-btn{
  height:40px;
  white-space:nowrap;
  flex:0 0 auto;
}

@media (max-width: 767.98px){
  .page-head{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  .page-head > div{ width:100%; }

  .review-search{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    max-width:none;
  }

  .review-search .review-type,
  .review-search .review-q,
  .review-search .review-btn{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }
  .review-search .review-q{ flex:0 0 auto; }
}

/* =========================
   카드형 그리드(갤러리 스타일) - 목록 전용
   ✅ 기존 .review-grid(카드용) 충돌 제거하고 .review-list-grid로 통일
   ========================= */
.review-list-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:18px;
  margin-top:14px;
}

.review-card{
  display:block;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  text-decoration:none;
  color:inherit;
  transition:transform .12s ease, box-shadow .12s ease;
}
.review-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

.review-thumb{
  width:100%;
  aspect-ratio: 16 / 10;
  background:#f1f5f9;
  overflow:hidden;
  position:relative;
}
.review-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.review-body{ padding:14px 14px 16px; }

.review-title{
  font-size:16px;
  font-weight:900;
  line-height:1.25;
  margin:0 0 10px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:40px;
  word-break:keep-all;
}

.review-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
  font-size:13px;
  color:var(--muted);
  align-items:center;
}

.review-meta .badge{
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--muted);
  background:#f8fafc;
}

/* 반응형 */
@media (max-width: 1100px){
  .review-list-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px){
  .review-list-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; }
  .review-body{ padding:12px; }
  .review-title{ font-size:15px; }
}
@media (max-width: 420px){
  .review-list-grid{ grid-template-columns: 1fr; }
}

/* =========================
   페이징(기존 유지)
   ========================= */
.pager{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-top:16px;
  flex-wrap:wrap;
}
.pager .pg{
  padding:6px 10px;
  border-radius:8px;
  text-decoration:none;
}
.pager .pg.active{ font-weight:800; }
.pager .pg.disabled{
  pointer-events:none;
  opacity:.45;
}

.review-actions{ margin-top:14px; }

/* 후기 작성하기 버튼을 우측으로 */
.review-actions .qbtn-primary{ margin-left:auto; }
@media (max-width: 767.98px){
  .review-actions .qbtn{
    width:100%;
    justify-content:center;
  }
}
/* =========================
   후기 페이지 footer 보정 (페이지 전용)
   layout.css 영향 없음
   ========================= */
.review-page{
  min-height: calc(100vh - 260px); 
  /* header + hero 대략 높이값 */
  display: flex;
  flex-direction: column;
}

.review-content{
  flex: 1;
}
/* 후기 페이지 전용 footer 보정 (폭 깨짐 방지 포함) */
.review-page{
  min-height: calc(100vh - 260px);
  display: flex;
  flex-direction: column;

  /* ✅ 핵심: 가운데 정렬 금지, 가로로 늘리기 */
  align-items: stretch;
}

.review-content{
  flex: 1;

  /* ✅ 혹시라도 shrink 되는 케이스 방지 */
  width: 100%;
  min-width: 0;
}


.captcha-box{
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 12px;
  background: #fff;

  width: 100%;
  box-sizing: border-box;
  overflow: hidden;

  display: flex;
  justify-content: center;
}



.captcha-scale{
  width:304px;              /* 기준 폭 */
  transform-origin: 0 0;    /* JS scale 기준 */
}
/* =========================
   ✅ CAPTCHA: 320/375 폭에서 비율 안정화
   - 캡차가 들어있는 review-field / captcha-box 패딩을 더 줄여서
     "실사용 폭"을 확보 -> scale이 과하게 줄어드는 것 방지
   ========================= */

/* 캡차가 들어있는 필드만 패딩 축소 (모바일에서 특히 중요) */
@media (max-width: 420px){
  .review-form .review-field:has(.captcha-box){
    padding: 10px;           /* 기존 12~14 보다 줄임 */
  }

  .captcha-box{
    padding: 8px;            /* 기존 12 -> 8 */
  }
}

/* 320급(초소형)에서는 더 타이트하게 */
@media (max-width: 360px){
  .review-form .review-field:has(.captcha-box){
    padding: 8px;
  }

  .captcha-box{
    padding: 6px;
  }
}
.captcha-scale{ margin: 0 auto; }

/* =========================
   ✅ 모바일에서 캡차 실사용 폭 확보 (320/375 차이 완화)
   - container/panel 패딩 누적으로 captcha-box 폭이 304 미만이 되어
     JS scale이 과하게 걸리는 문제 해결
   ========================= */

@media (max-width: 420px){
  /* review_new.html: <main class="container"> */
  main.container{
    padding-left: 12px;
    padding-right: 12px;
  }

  /* review_new.html: <section class="panel rules-panel"> */
  .panel.rules-panel{
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* 320급은 조금 더 줄여서 304폭 최대 확보 */
@media (max-width: 360px){
  main.container{
    padding-left: 10px;
    padding-right: 10px;
  }
  .panel.rules-panel{
    padding-left: 12px;
    padding-right: 12px;
  }
}
/* =========================
   ✅ 320px(초소형)에서만 캡차 폭 추가 확보
   - 375는 OK라서 건드리지 않음
   - 캡차가 들어있는 row만 패딩을 더 줄여 내부폭 304에 최대한 근접
   ========================= */

@media (max-width: 360px){

  /* 페이지 외곽 패딩도 아주 조금만 더 줄여서 304폭 확보 */
  main.container{
    padding-left: 8px;
    padding-right: 8px;
  }
  .panel.rules-panel{
    padding-left: 10px;
    padding-right: 10px;
  }

  /* ✅ 캡차 row만: review-field / captcha-box 패딩 최소화 */
  .review-form .review-field:has(.captcha-box){
    padding: 6px;          /* 기존 8~10보다 더 줄임 */
  }
  .captcha-box{
    padding: 4px;          /* 기존 6~8보다 더 줄임 */
  }

  /* 혹시 dashed border 때문에 더 좁아 보이면(체감) 테두리만 완화 */
  /* .captcha-box{ border-style: solid; }  <- 원하면 이 줄도 사용 */
}
/* =========================
   ✅ CAPTCHA 위치 조정
   - PC: 중앙 → 좌측 정렬
   - 320: 오른쪽으로 살짝 이동(미세 보정)
   ========================= */

/* 기본(PC 포함): 좌측 정렬로 */
.captcha-box{
  justify-content: flex-start;   /* center → left */
}

/* 캡차 래퍼도 좌측에 딱 붙게 */
.captcha-scale{
  margin: 0;                     /* auto 제거/무력화 */
}

/* 320급에서만: 오른쪽으로 아주 살짝 이동 */
@media (max-width: 360px){
  .captcha-scale{
    margin-left: 10px;           /* ✅ 여기 값만 6~14px 사이로 취향 조절 */
  }
}