/* index2.css - K·messe home */
:root{
  --max: 1200px;
  --ink: #1f2937;
  --muted: #6b7280;
  --line: #e5e7eb;
  --brand: #FF0000;
  --bg: #f7f8fb;
}

/* hero */
.kv{width: 100%;height: 600px;margin: 0 auto 80px;}
.kv-view{position:relative;height: 100%;overflow:hidden;background:#111}
.kv-slide{position:absolute;inset:0;background:var(--bg) center/cover no-repeat;opacity:0;transition:opacity .5s ease}
.kv-slide.on{opacity:1}
.kv-overlay{position:absolute;inset:0;background:linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.35))}
.kv-text{text-align: center;position:absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.35)}
.kv-text h2{font-size: 50px;font-weight: 700;margin: 0 0 30px;}
.kv-text p{font-size: 28px;font-weight: 300;}
.kv-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:8px}
.kv-dots button{transition: 0.5s;width:8px;height:8px;border-radius:50%;border:0;background:rgba(255,255,255,.6)}
.kv-dots button.on{background: var(--brand);width: 100px;border-radius: 33px;}

/* search */
.search-wrap{max-width:var(--max);margin: 0 auto 80px;padding: 35px 30px;background: #F0F6FA;border-radius: 16px;}
.search-wrap .se_ti{font-size: 32px;font-weight: 700;margin-bottom: 50px;}
.search-form{display:grid;grid-template-columns:repeat(5,1fr);gap: 20px;}
.search-form .field{display:flex;flex-direction:column;gap: 15px;}
.search-form label{font-size: 18px;color: #737373;font-weight: 600;}
.search-form select{background: #ffffff;border-radius:10px;padding: 0 15px;height: 60px;font-size: 20px;font-weight: 700;}
.search-form .btn-search{width: 100%;height: 60px;font-weight: 700;font-size: 24px;background:#444;color:#fff;border-radius:10px;align-self:end;display: flex;align-items: center;justify-content: center;}
.search-form .btn-search img{width: 25px;height: 25px;object-fit: cover;margin-left: 10px;}
.search-form .field.actions{
  justify-content: flex-end;
}
/* sections */
.section-products{max-width:var(--max);margin: 80px auto 0;}
.section-products .section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom: 35px;}
.section-products .title{font-size:22px;font-weight:800;color:var(--ink)}
.section-products .more{color:#7c7f86;font-size:14px}

.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.product-card{display:block;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 4px 18px rgba(17,24,39,.05);position:relative}
.product-card .badge{position:absolute;left:10px;top:10px;z-index:2;display:inline-block;font-size:12px;font-weight:700;color:#fff;background:#ef4444;border-radius:999px;padding:4px 10px;box-shadow:0 6px 14px -8px rgba(239,68,68,.8)}
.product-card .badge.soon{background:#ef4444}
.product-card .thumb{height: 150px;background:#eee}
.product-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.product-card .meta{padding:14px}
.product-card .name{font-size:16px;font-weight:700;color:var(--ink);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:44px}
.product-card .sub{margin-top:6px;color:#555;font-size:13px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.product-card .date{margin-top:8px;color:#7c7f86;font-size:12px}
.product-card .rating{margin-top:8px;display:flex;align-items:center;gap:4px;font-size:13px;color:var(--ink)}
.product-card .rating .star{color:#f59e0b;font-size:14px;line-height:1}
.product-card .rating .count{color:var(--muted);font-size:12px}
.product-card .rating.empty{color:var(--muted);font-size:12px}

/* banner slider */
.ad-banner{max-width:var(--max);margin: 80px auto 40px;}
.ad-slider{position:relative;height:195px;border-radius:16px;overflow:hidden;background:#0f0f12}
.ad-slide{position:absolute;inset:0;background:var(--bg) center/cover no-repeat;opacity:0;transition:opacity .5s ease}
.ad-slide.on{opacity:1}
.ad-overlay{position:absolute;left: 0;top: 0;width: 100%;height: 100%;background: #0000008f;}
.ad-slide .inner{position:relative;height:100%;padding: 28px 100px;display:flex;align-items:center;justify-content:space-between;cursor: grab;}
.ad-slide .txt{color:#fff;display:flex;flex-direction:column;gap:8px}
.ad-slide .txt strong{font-size: 20px;opacity:.9}
.ad-slide .txt span{font-size: 40px;font-weight:800}
.ad-slide .cta{background:#d52e2e;color:#fff;padding: 12px 25px;border-radius: 99px;}
.ad-arrow{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.8);box-shadow:0 2px 10px rgba(0,0,0,.15);cursor:pointer}
.ad-arrow.left{left:10px}
.ad-arrow.right{right:10px}
.ad-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:8px}
.ad-dots button{width:8px;height:8px;border-radius:50%;border:0;background:rgba(255,255,255,.6)}
.ad-dots button.on{background: var(--brand);width: 40px;border-radius: 33px;transition:width .3s ease}

/* contact cards */
.contact-cta{max-width:var(--max);margin:20px auto 64px;}
.contact-cta .inner{display: flex;justify-content: space-between;}
.contact-cta .box{display:flex;justify-content: center;gap: 10px;background:#fff;border-radius:14px;padding: 0 25px;align-items: center;width: 335px;height: 80px;font-size: 23px;border: 1px solid #ddd;}
.contact-cta .box.blue{background: #307CE5;width: 690px;color: #fff;justify-content: flex-start;border: none;gap: 20px;}
.contact-cta .box.yellow{background: #FEE500;align-items:center;justify-content:center;font-weight:700;width: 335px;border: none;}
.contact-cta .label{font-size: 23px;}
.contact-cta .value{font-size: 23px;font-weight:800;display: flex;align-items: center;gap: 5px;}
.contact-cta .sub{font-size: 14px;color: #ffffff7d;}

@media (max-width:1024px){
  .product-grid{grid-template-columns:repeat(3,1fr)}
  .kv-view{height:360px}
}
@media (max-width:720px){
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .search-form{grid-template-columns:1fr 1fr}
  .contact-cta .inner{grid-template-columns:1fr}
}
@media (max-width:420px){
  .kv-view{height:300px}
}

/* 키비주얼 슬라이더: 드래그 커서 */
.kv-view {
  cursor: grab;
  user-select: none; /* 드래그 중 텍스트 선택 방지 */
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}
.kv-view.dragging {
  cursor: grabbing;
}

/* (선택) 드래그 중 살짝 흔들림 방지용 */
.kv-view .kv-slide img {
  pointer-events: none;
}
.contact-cta .value img{width: 25px;height: 25px;object-fit: cover;}

.contact-cta .box > img{
    width: 30px;
    height: 30px;
    object-fit: cover;
}


/* =========================
   K·messe Home Responsive
   - Tablet ≤1400px
   - Mobile ≤500px
   ========================= */

/* 공통 유틸: 유연한 타이포/사이즈 */
.kv-text h2 { font-size: clamp(24px, 4vw, 50px); }
.kv-text p  { font-size: clamp(14px, 2.4vw, 28px); }
.search-wrap .se_ti { font-size: clamp(20px, 3vw, 32px); }
.product-card .name { font-size: clamp(14px, 1.4vw, 16px); }
.product-card .sub  { font-size: clamp(12px, 1.2vw, 13px); }
.product-card .date { font-size: clamp(11px, 1.1vw, 12px); }

/* ---------- Tablet (≤1400px) ---------- */
@media (max-width:1400px){
  /* 히어로(키비주얼) */
  .kv{ height: 520px; margin-bottom: 64px; }
  .kv-view{ height: 100%; }
  .kv-dots{ bottom: 10px; }
  .kv-dots button{ width:8px; height:8px; }
  .kv-dots button.on{ width:72px; }

  /* 검색 박스 */
  .search-wrap{
    margin: 0 20px 64px;
    padding: 28px 22px;
    border-radius: 14px;
  }
  /* 5열 → 4열 */
  .search-form{
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .search-form select{height: 40px;font-size: 16px;}
  .search-form .btn-search{
    height: 56px;
    font-size: 20px;
    width: 100%;
  }

  /* 섹션 헤더와 그리드 */
  .section-products{ margin: 64px 20px 0; }
  .section-products .section-head{
    gap: 12px; flex-wrap: wrap;
  }
  .section-products .title{ font-size: 20px; }
  .product-grid{
    grid-template-columns: repeat(3, 1fr); /* 4 → 3 */
    gap: 16px;
  }
  .product-card .thumb{ height: 160px; } /* 살짝 키움 */

  /* 배너 */
  .ad-banner{ margin: 64px 20px 32px; }
  .ad-slider{ height: 180px; border-radius: 14px; }
  .ad-slide .inner{padding: 22px 60px;}
  .ad-slide .txt span{ font-size: 20px; }

  /* CTA */
  .contact-cta{margin: 20px 20px 56px;}
  .contact-cta .inner{
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .contact-cta .box{
    width: 100% !important;
    height: 76px;
    font-size: 20px;
    padding: 0 18px;
  }
  .contact-cta .box.blue{
    grid-column: span 2; height: 82px; gap: 16px;
  }
  .contact-cta .label, .contact-cta .value{ font-size: 20px; }
}
@media (max-width:800px){
  .ad-slide .inner{
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 35px 0;
  }
  .ad-slide .cta{
    font-size: 14px;
    padding: 10px 20px;
  }
}
/* ---------- Mobile (≤500px) ---------- */
@media (max-width:500px){
  /* 히어로(키비주얼) */
  .kv{ height: 360px; margin-bottom: 40px; }
  .kv-text{ text-align:center; }
  .kv-text h2{ margin-bottom: 16px; }
  .kv-dots button.on{ width: 48px; }

  /* 검색 박스: 여백 축소 + 1열 스택 */
  .search-wrap{
    margin: 0 14px 80px;
    padding: 18px 14px;
    border-radius: 12px;
  }
  .search-wrap .se_ti{ margin-bottom: 20px; }
  .search-form{
    grid-template-columns: 1fr; /* 1열 */
    gap: 12px;
  }
  .search-form .field{ gap: 8px; }
  .search-form label{ font-size: 13px; }
  .search-form select{
    height: 38px;
    font-size: 16px;
    border-radius: 8px;
    padding: 0 12px;
  }
  .search-form .btn-search{
    height: 40px;
    font-size: 18px;
    border-radius: 8px;
  }
  .search-form .btn-search img{
    width: 20px; height: 20px; margin-left: 8px;
  }

  /* 상품 그리드: 2 → 1열 */
  .section-products{margin: 80px 14px 0;}
  .section-products .section-head{
    margin-bottom: 18px;
  }
  .section-products .title{ font-size: 18px; }
  .product-grid{
    grid-template-columns: 1fr; /* 한 칼럼 */
    gap: 12px;
  }
  .product-card{ border-radius: 12px; }
  .product-card .thumb{ height: 54vw; } /* 화면 폭 기준 유연 높이 */

  /* 배너 */
  .ad-banner{ margin: 40px 14px 24px; }
  .ad-slider{ height: auto; min-height: 140px; border-radius: 12px; }
  .ad-slide .inner{ padding: 16px; gap: 12px; flex-direction: column; align-items: flex-start; }
  .ad-slide .txt strong{ font-size: 12px; }
  .ad-slide .txt span{ font-size: 18px; }
  .ad-slide .cta{ padding: 10px 12px; border-radius: 8px; }

  /* CTA 카드: 세로 스택 */
  .contact-cta{margin: 12px 14px 80px;}
  .contact-cta .inner{
    gap: 10px;
  }
  .contact-cta .box{
    width: 100% !important;
    height: 64px;
    padding: 0 14px;
    font-size: 18px;
    border-radius: 10px;
  }
  .contact-cta .box.blue{
    height: auto;
    gap: 5px;
    flex-direction: column;
    padding: 10px 0;
  }
  .contact-cta .label, .contact-cta .value{ font-size: 18px; }
  .contact-cta .sub{ font-size: 12px; }

  /* 도트 터치 영역 살짝 확대(접근성) */
  .kv-dots button{ width:10px; height:10px; }
}

/* ---------- 매우 작은 화면 보정 (≤360px) ---------- */
@media (max-width:360px){
  .kv{ height: 320px; }
  .product-card .thumb{ height: 58vw; }
  .search-form .btn-search span{ transform: translateY(1px); }
}