/* /tradein/tradein.css */
/* core.css 기반, 필요한 것만 최소 추가 */

/* Layout */
.tradein-wrap{max-width:900px;margin:0 auto;padding:16px}
.tradein-card{border:1px solid #e5e7eb;border-radius:14px;padding:14px;background:#fff;margin:12px 0}
.tradein-row{display:flex;gap:10px;flex-wrap:wrap}
.tradein-row > div{flex:1;min-width:220px}
.tradein-hr{border:0;border-top:1px solid #e5e7eb;margin:12px 0}

/* =========================================================
   Typography (FINAL: 톤다운/가독성)
   ========================================================= */

.tradein-title{
  font-size:18px;
  font-weight:600;
  color:#1f2937;
  letter-spacing:-0.01em;
  margin:6px 0 10px;
}

.tradein-card > .tradein-label{
  font-size:14px;
  font-weight:600;
  color:#334155;
  margin:0 0 6px;
}

.tradein-label{
  font-size:13px;
  font-weight:500;
  color:#475569;
}

.tradein-strong{
  font-size:13px;
  font-weight:500;
  color:#1f2937;
}

.tradein-muted{
  font-size:12.5px;
  font-weight:400;
  color:#64748b;
}

/* =========================================================
   Inputs
   ========================================================= */
.tradein-input, .tradein-textarea, .tradein-select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#111827;
  font-size:13px;
  font-weight:400;
  outline:none;
}
.tradein-input::placeholder,
.tradein-textarea::placeholder{
  color:#9ca3af;
}
.tradein-textarea{min-height:90px;resize:vertical}

.tradein-select.is-empty{
  color:#9ca3af;
  font-weight:400;
}

/* =========================================================
   Radios / Checkboxes
   ========================================================= */
.tradein-radio{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tradein-radio label{
  font-size:13px;
  font-weight:400;
  color:#374151;
}
.tradein-radio input{
  accent-color:#60a5fa;
}

/* =========================================================
   Buttons
   ========================================================= */
.tradein-btn{
  display:inline-block;
  background:#111827;
  color:#fff;
  border:1px solid #111827;
  padding:12px 14px;
  border-radius:12px;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
}
.tradein-btn.secondary{
  background:#fff;
  color:#111827;
  border-color:#e5e7eb;
}

/* =========================================================
   Special UI blocks
   ========================================================= */
#visitFixedBox{
  background:#f8fafc;
  border:1px dashed #e5e7eb;
  border-radius:10px;
  padding:10px 12px;
  margin-top:8px;
}

/* =========================================================
   Landing (index.php) - 다크 테마
   ========================================================= */

.tradein-landing{
  background:
    radial-gradient(1100px 520px at 50% 0%, rgba(56,189,248,.10), rgba(2,6,23,0) 60%),
    linear-gradient(180deg, #0b1220 0%, #060b16 100%);

  /* ✅ header 아래 여백 확 줄임 */
  padding:12px 0 42px;
}

/* index에서만 폭 확장(폼 영향 없음) */
.tradein-landing .tradein-wrap{
  max-width:1100px;
}

/* Hero - ✅ 위아래 여백 축소 */
.tradein-hero{
  text-align:center;
  padding:12px 14px 6px;
}

.tradein-hero-title{
  font-size:28px;
  font-weight:800;
  letter-spacing:-0.02em;
  color:#ffffff;
  margin:6px 0 6px;
}

.tradein-hero-sub{
  font-size:14px;
  font-weight:400;
  color:#94a3b8;
  margin:0;
  line-height:1.55;
}

.tradein-reassure{
  margin-top:6px;
  font-size:12.5px;
  line-height:1.45;
  color:#94a3b8;
}
.tradein-reassure b{
  color:#e5e7eb;
  font-weight:700;
}

/* 선택 카드 2개 */
.tradein-choice-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;

  /* ✅ hero 다음 간격 축소 */
  margin-top:12px;
}

.tradein-choice{
  display:block;
  text-decoration:none;
  color:inherit;
  border:1px solid #1f2937;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  padding:16px 16px 14px;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.tradein-choice:hover{
  transform:translateY(-2px);
  border-color:#334155;
  box-shadow:0 10px 18px rgba(0,0,0,.25);
}

.tradein-choice-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:700;
  color:#86efac;
  background:rgba(34,197,94,.10);
  border:1px solid rgba(34,197,94,.35);
  padding:6px 10px;
  border-radius:999px;
}

.tradein-choice-title{
  margin:10px 0 8px;
  font-size:16px;
  font-weight:800;
  color:#ffffff;
  letter-spacing:-0.01em;
}

.tradein-choice-list{
  margin:0;
  padding-left:18px;
  color:#94a3b8;
  font-size:13px;
  line-height:1.65;
}

/* 프로세스(미사용이지만 유지) */
.tradein-steps{
  margin-top:14px;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  font-size:12.5px;
  color:#111827;
}
.tradein-steps-top{ margin-top:10px; }

.tradein-steps span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  color:#334155;
  font-weight:600;
  line-height:1.1;
}
.tradein-steps span::before{ content:none; }
.tradein-steps span.is-active{
  background:#111827;
  border-color:#111827;
  color:#ffffff;
}

/* =========================================================
   tradein.php 상품 리스트 전용 스타일
   (기존 유지)
   ========================================================= */

.tradein-list-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:20px;
}

/* 제목/설명 */
.tradein-page-title{
  margin:0 0 6px;
  font-size:22px;
  font-weight:700;
  letter-spacing:-0.02em;
  color:#ffffff;
}

.tradein-page-desc{
  margin:0 0 14px;
  font-size:13px;
  line-height:1.55;
  background:none !important;
  color:#cbd5e1;
}

/* 섹션 타이틀 */
.tradein-section-title{
  margin:22px 0 8px;
  font-size:16px;
  font-weight:800;
  letter-spacing:-0.01em;
  color:#ffffff;
}

/* 섹션 보조 문구 */
.tradein-section-sub{
  font-size:12.5px;
  color:#94a3b8;
  margin:-4px 0 12px;
}

/* 그리드 */
.tradein-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

/* 카드 */
.tradein-card-item{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:12px;
  text-decoration:none;
  color:inherit;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.tradein-card-item:hover{
  transform:translateY(-2px);
  border-color:#c7d2fe;
  box-shadow:0 10px 18px rgba(15,23,42,.06);
}

.tradein-card-img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#f1f5f9;
}

/* 2줄 제한 + 여백 */
.tradein-card-title{
  margin-top:12px;
  font-weight:700;
  line-height:1.35;
  color:#111827;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* 가격 가독성 강화 */
.tradein-card-price{
  margin-top:6px;
  font-size:14px;
  font-weight:800;
  color:#111827;
}

/* 반응형 */
@media (max-width: 960px){
  .tradein-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 480px){
  .tradein-list-wrap{padding:16px}
  .tradein-section-title{margin:18px 0 8px}
}

/* =========================================================
   제품 선정 기준 (index.php) - 다크 테마
   ========================================================= */

.tradein-reco-note{
  margin:10px 0 12px;
  padding:12px 14px;
  background:rgba(255,255,255,.04);
  border:1px solid #1f2937;
  border-radius:14px;
  text-align:left;
  box-shadow:none;
}

.tradein-reco-title{
  font-size:13px;
  font-weight:800;
  color:#e5e7eb;
  margin:0 0 6px;
  letter-spacing:-0.01em;
}

.tradein-reco-desc{
  font-size:12.5px;
  line-height:1.6;
  color:#94a3b8;
  margin:0;
}

.tradein-reco-desc b{
  color:#ffffff;
  font-weight:800;
}

/* =========================================================
   index.php 하단 "추천 4개 티저" (다크 테마)
   ========================================================= */

.tradein-teaser{
  margin-top:14px;   /* ✅ 위 간격 더 줄임 */
  padding-top:0;
}

.tradein-teaser-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin:0 0 10px;
}

.tradein-teaser-title{
  font-size:14px;
  font-weight:900;
  color:#e5e7eb;
  letter-spacing:-0.01em;
}

.tradein-teaser-more{
  font-size:12.5px;
  font-weight:800;
  color:#93c5fd;
  text-decoration:none;
}
.tradein-teaser-more:hover{
  text-decoration:underline;
}

.tradein-teaser-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
}

.tradein-teaser-card{
  display:block;
  text-decoration:none;
  color:inherit;
  background:rgba(255,255,255,.04);
  border:1px solid #1f2937;
  border-radius:14px;
  padding:10px;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.tradein-teaser-card:hover{
  transform:translateY(-2px);
  border-color:#334155;
  box-shadow:0 10px 18px rgba(0,0,0,.25);
}

.tradein-teaser-img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:12px;
  border:1px solid #1f2937;
  background:#0b1220;
}

.tradein-teaser-name{
  margin-top:10px;
  font-size:12.5px;
  font-weight:800;
  line-height:1.35;
  color:#e5e7eb;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.tradein-teaser-price{
  margin-top:6px;
  font-size:13px;
  font-weight:900;
  color:#ffffff;
}

.tradein-teaser-empty{
  margin-top:8px;
  font-size:12.5px;
  color:#94a3b8;
}

/* =========================================================
   ✅ 옵션 A: 모바일에서도 보상판매 카드 2열 유지
   - 기존(820px)에서 1열로 바꾸던 걸 520px로 늦춤
   - 폰에서도 세로 높이 줄어 티저 이미지가 첫 화면에 걸리기 쉬움
   ========================================================= */

/* 티저 그리드: 태블릿/폰에서는 2열 */
@media (max-width: 820px){
  .tradein-teaser-grid{ grid-template-columns:repeat(2, 1fr); }
}

/* ✅ 아주 작은 화면(<=520)만 보상판매 카드 1열 */
@media (max-width: 520px){
  .tradein-choice-grid{grid-template-columns:1fr;}
}

/* ✅ 600~520 사이/일반 모바일에서 컴팩트(높이 감소) */
@media (max-width: 600px){
  .tradein-landing{padding:10px 0 36px;}
  .tradein-hero{padding:10px 12px 4px;}
  .tradein-hero-title{font-size:22px;margin:4px 0 6px;}
  .tradein-hero-sub{font-size:13px;line-height:1.5;}

  .tradein-choice{padding:12px 12px 10px;}
  .tradein-choice-title{font-size:14.5px;margin:8px 0 6px;}
  .tradein-choice-list{font-size:12.5px;line-height:1.55;}

  .tradein-reco-note{padding:10px 12px;}
  .tradein-reco-desc{font-size:12.2px;}

  .tradein-teaser{margin-top:12px;}
}