/*
 * css/consult.css
 * 온라인 상담 (작성, 목록, 상세보기)
 * - Mobile: 100%
 * - Tablet (>=768px): 720px 컨테이너, 카드 2열
 * - Desktop (>=1024px): 960px 컨테이너
*/

/* ============== 0) 공통 컨테이너(960 그리드) ============== */
.wrap_btn,
.page-header,
.consult-list-container,
.consulting-form,
.view-wrapper{
  width:100%;
  padding:0;
  margin:30px auto;
  max-width:100%;
}

/* ============== 1) 상담 작성 (consult.php) ============== */
.consulting-form{
  background:#fff;
  border-radius:12px;
  padding:30px;
  box-shadow:0 6px 20px rgba(0,0,0,.07);
}
.consulting-form .form-group{margin-bottom:25px;}
.consulting-form .form-group label{
  display:block;font-size:1rem;font-weight:600;margin-bottom:8px;color:#4CAF50;
}
.consulting-form .form-group label .required{color:#e53e3e;margin-left:4px;}
.consulting-form .form-group input[type="text"],
.consulting-form .form-group input[type="tel"],
.consulting-form .form-group input[type="password"],
.consulting-form .form-group textarea{
  width:100%;padding:12px;border:1px solid #ddd;border-radius:6px;font-size:1rem;transition:border-color .3s;
}
.consulting-form .form-group input:focus,
.consulting-form .form-group textarea:focus{
  outline:none;border-color:#4CAF50;box-shadow:0 0 0 2px rgba(76,175,80,.2);
}
/* 연락처 */
.consulting-form .contact-group{display:flex;align-items:center;gap:10px;}
.consulting-form .contact-group input{text-align:center;}
.consulting-form .contact-group span{color:#888;}
/* 파일 */
.consulting-form .file-input-wrapper{padding:10px;border:1px solid #ddd;border-radius:6px;margin-bottom:10px;}
.consulting-form .file-input-wrapper:last-child{margin-bottom:0;}
.consulting-form .file-upload-group input[type="file"]{width:100%;font-size:.95rem;}
/* 라디오 */
.consulting-form .radio-group{
  display:flex;flex-wrap:wrap;align-items:center;gap:20px;
  padding:10px;border:1px solid #ddd;border-radius:6px;
}
.consulting-form .radio-group label{margin:0;font-weight:500;color:#333;}
.consulting-form .radio-group input[type="radio"]{margin-right:6px;}
.consulting-form .etc-input{
  width:100%;padding:12px;border:1px solid #ddd;border-radius:6px;
  font-size:1rem;margin-top:10px;display:none;
}
/* 캡차 */
.consulting-form .captcha-group{display:flex;align-items:center;gap:10px;}
.consulting-form .captcha-image{
  padding:10px 15px;background:#f0f0f0;border:1px solid #ddd;border-radius:6px;
  font-weight:bold;letter-spacing:2px;user-select:none;font-size:1.1rem;
}
/* 제출 */
.consulting-form .submit-button{
  width:100%;padding:15px;border:none;border-radius:6px;background:#4CAF50;color:#fff;
  font-size:1.2rem;font-weight:600;cursor:pointer;transition:background-color .3s;margin-top:20px;
}
.consulting-form .submit-button:hover{background:#45a049;}

/* ============== 2) 상담 목록 (consult_list.php) ============== */
/* Header */
.page-header{display:flex;justify-content:space-between;align-items:center;padding:0;}
.page-header-text h2{margin:0;font-size:1.8rem;}
.page-header-text p{margin:5px 0 0;color:#666;}
.btn-new-consult{
  display:inline-block;padding:12px 24px;background:#F97316;color:#fff;text-decoration:none;border-radius:8px;
  font-weight:700;white-space:nowrap;border:none;box-shadow:0 4px 15px rgba(249,115,22,.4);
  animation:pulse-glow 2s infinite ease-in-out;transform:scale(1);transition:transform .2s,background-color .2s;
}
.btn-new-consult:hover{background:#EA580C;animation-play-state:paused;transform:scale(1.05);}

/* 리스트 그리드 */
.consult-list-container{
  display:grid;
  grid-template-columns:1fr;   /* ✅ 767px 이하: 1열 유지 */
  gap:20px;
}
.page-header{padding:0px 5px} /* 기본 모바일 맞춤 */

/* Card */
.consult-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid #e9e9e9;border-radius:12px;overflow:hidden;
  position:relative;box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.status-badge{
  position:absolute;top:20px;right:20px;padding:8px 15px;border-radius:99px;font-size:.9rem;font-weight:700;color:#fff;z-index:10;
}
.status-badge.pending{background:#ffc107;color:#333;}
.status-badge.answered{background:#28a745;}
.image-scroller{position:relative;overflow:hidden;border-bottom:1px solid #f0f0f0;cursor:grab;}
.image-scroller.dragging{cursor:grabbing;}
.rb-track{display:flex;will-change:transform;touch-action:pan-y;}
.rb-slide{flex:0 0 100%;display:flex;align-items:center;justify-content:center;padding:15px;box-sizing:border-box;}
.rb-slide img,.rb-slide .no-image{
  width:100%;aspect-ratio:3/3.5;object-fit:cover;border-radius:8px;-webkit-user-drag:none;user-select:none;
}
.no-image{display:flex;align-items:center;justify-content:center;background:#f8f9fa;color:#adb5bd;font-size:1.2rem;font-weight:500;}
.card-content{padding:20px;display:flex;flex-direction:column;flex-grow:1;}
.card-content h3{font-size:1.2rem;margin:0 0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.card-content ul{list-style:none;padding:0;margin:0;font-size:.9rem;color:#555;}
.card-content li{margin-bottom:6px;}
.card-content li strong{font-weight:600;color:#333;}
.card-summary{font-size:1.1rem;color:#000066;margin-top:0px;line-height:1.5;font-weight:bold;}
.card-footer{margin-top:auto;padding-top:15px;text-align:center;}
.details-button{
  display:inline-block;width:100%;padding:12px;background:#2c5e3f;color:#fff;text-decoration:none;border-radius:8px;font-weight:600;transition:background-color .2s;
}
.details-button:hover{background:#1a3a26;}
.no-results{text-align:center;padding:50px;color:#666;grid-column:1/-1;}
.pager{margin-top:40px!important;margin-bottom:30px!important;}

/* 이미지 팝업 */
.gallery-overlay{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:1000;display:none;justify-content:center;align-items:center;}
.gallery-popup{position:relative;width:100vw;max-width:100vw;}
.close-gallery{position:absolute;top:12px;right:16px;font-size:2.2rem;color:#fff;background:none;border:none;cursor:pointer;z-index:10;}
.gallery-scroller{position:relative;width:100vw;height:auto;overflow:hidden;}
.gallery-track{display:flex;will-change:transform;touch-action:pan-y;}
.gallery-slide{flex:0 0 100vw;display:flex;align-items:center;justify-content:center;padding:0;margin:0;box-sizing:border-box;}
.gallery-slide img,.gallery-slide .no-image{
  width:100vw;height:auto;max-height:90vh;object-fit:contain;display:block;-webkit-user-drag:none;user-select:none;border-radius:0;
}

/* 모션 최소화 */
@keyframes pulse-glow{
  0%,100%{transform:scale(1);box-shadow:0 4px 15px rgba(249,115,22,.4);}
  50%{transform:scale(1.03);box-shadow:0 6px 25px rgba(249,115,22,.7);}
}
@media (prefers-reduced-motion:reduce){
  .rb-track,.gallery-track,.btn-new-consult{transition:none!important;animation:none!important;}
}

/* ============== 3) 상담 상세 (consult_view.php) ============== */
.view-wrapper{
  background:#fff;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.07);padding:20px;
}
.image-slider{position:relative;overflow:hidden;border-radius:8px;margin-bottom:30px;}
.slider-container{display:flex;transition:transform .4s ease-in-out;}
.slider-item{flex-shrink:0;width:100%;aspect-ratio:4/3;}
.slider-item img{width:100%;height:100%;object-fit:cover;}
.slider-item.no-image{display:flex;justify-content:center;align-items:center;background:#f0f2f5;color:#adb5bd;font-size:1.5rem;}
.slider-nav{
  position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.4);color:#fff;border:none;border-radius:50%;
  width:40px;height:40px;font-size:1.5rem;cursor:pointer;transition:background-color .2s;
}
.slider-nav:hover{background:rgba(0,0,0,.6);}
.slider-nav.prev{left:10px;}
.slider-nav.next{right:10px;}
.consult-details h2{font-size:1.8rem;margin-bottom:20px;padding-bottom:15px;border-bottom:2px solid #4CAF50;}
.info-grid{display:grid;grid-template-columns:1fr;gap:15px;margin-bottom:25px;}
.info-item{display:flex;flex-direction:column;}
.info-item .label{font-size:.9rem;color:#888;margin-bottom:5px;}
.info-item .value{font-size:1rem;font-weight:500;}
.content-box{margin-top:20px;padding:20px;background:#f9f9f9;border-radius:8px;line-height:1.7;min-height:100px;white-space:pre-wrap;word-break:break-all;}
.answer-section{margin-top:30px;padding-top:30px;border-top:1px solid #eee;}
.answer-section h3{font-size:1.5rem;color:#2c5e3f;margin-bottom:15px;}
.answer-box{padding:20px;background:#f0fff0;border-left:5px solid #4CAF50;border-radius:0 8px 8px 0;line-height:1.7;white-space:pre-wrap;word-break:break-all;}
.no-answer{color:#555;font-style:italic;}
.action-buttons{margin-top:40px;display:flex;justify-content:center;gap:15px;flex-wrap:wrap;}
.action-buttons .btn{text-decoration:none;padding:12px 25px;border-radius:8px;font-weight:600;border:none;cursor:pointer;transition:all .3s ease;}
.action-buttons .btn-primary{background:#2c5e3f;color:#fff;}
.action-buttons .btn-primary:hover{background:#1a3a26;}
.action-buttons .btn-secondary{background:#f0f0f0;color:#555;border:1px solid #ddd;}
.action-buttons .btn-secondary:hover{background:#e0e0e0;}
.no-data{text-align:center;padding:50px;font-size:1.1rem;color:#666;}

/* ================== 공통 반응형(한곳에 정리) ================== */

/* Tablet (>=768px) */
@media (min-width:768px){
  /* 컨테이너 폭 */
  .consult-list-container,
  .consulting-form,
  .view-wrapper{max-width:720px;}

  /* 목록 2열로 전환 */
  .consult-list-container{grid-template-columns:repeat(2,1fr);}



  /* 상세 여백 업 */
  .view-wrapper{padding:40px;}

  /* 상세 정보 그리드 2컬럼 */
  .info-grid{grid-template-columns:1fr 1fr;}
}

/* Desktop (>=1024px) */
@media (min-width:1024px){
  .page-header,
  .consult-list-container,
  .consulting-form,
  .view-wrapper{max-width:960px;}
}