/* home-onepick: 원픽체험단 홈 전용 오버라이드
   views/index.ejs 에서만 로드 (홈페이지 전용).
   전역 스타일은 /css/site-onepick.css 로 분리됨.

   컨셉: 아싸뷰 스타일 — 5카드 hero (브랜드카드+4신규) + 4 파스텔 미드배너 + 5-cols 그리드
*/

/* ============================================================
   1. 홈 컨테이너 폭 — 거의 풀폭 1600px
   ============================================================ */
.site-onepick .home-wrap {
  max-width:1600px !important;
  padding:20px 40px 80px !important;
  background:transparent !important;
}

/* ============================================================
   2. 5-카드 Hero (브랜드 1 + 캠페인 4)
   ============================================================ */
.site-onepick .op-hero5-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:4px 4px 14px;
}
.site-onepick .op-hero5-head h2 {
  margin:0;
  font-size:1.12rem;
  font-weight:700;
  color:#0f172a;
  letter-spacing:-0.03em;
}
.site-onepick .op-hero5-head .op-h5-sub {
  font-size:0.76rem;
  color:#64748b;
  font-weight:700;
}
.site-onepick .op-hero5 {
  display:grid;
  grid-template-columns:1.25fr repeat(4,1fr);
  gap:14px;
  margin-bottom:22px;
}

/* 브랜드 카드 (좌측 1번) */
.site-onepick .op-brand-card {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:linear-gradient(160deg,#fff2ec 0%,#ffe1d4 70%,#ffd4c4 100%);
  border-radius:18px;
  padding:24px 24px 20px;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  min-height:260px;
  box-shadow:
    rgba(225,70,36,0.12) 0px 0px 0px 1px,
    rgba(0,0,0,0.03) 0px 2px 4px -1px,
    rgba(255,90,54,0.08) 0px 10px 24px -8px;
}
.site-onepick .op-brand-card::before {
  content:"";
  position:absolute;
  right:-30px;
  bottom:-40px;
  width:180px;
  height:180px;
  background:radial-gradient(circle,rgba(255,255,255,0.35) 0%,transparent 70%);
  pointer-events:none;
}
.site-onepick .op-brand-logo {
  font-size:1.7rem;
  font-weight:700;
  color:#9a3412;
  letter-spacing:-0.05em;
  line-height:1;
  position:relative;
  z-index:2;
}
.site-onepick .op-brand-logo small {
  display:block;
  font-size:0.74rem;
  font-weight:600;
  color:#9a3412;
  margin-top:6px;
  letter-spacing:-0.015em;
}
.site-onepick .op-brand-img {
  width:110px;
  height:110px;
  object-fit:contain;
  align-self:center;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,0.08));
  position:relative;
  z-index:2;
}
.site-onepick .op-brand-btns {
  display:flex;
  flex-direction:column;
  gap:6px;
  position:relative;
  z-index:2;
}
.site-onepick .op-brand-btns span {
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#fff;
  padding:9px 14px;
  border-radius:999px;
  font-size:0.74rem;
  font-weight:800;
  color:#0f172a;
  box-shadow:0 2px 6px rgba(0,0,0,0.06);
}
.site-onepick .op-brand-btns span::after {
  content:"→";
  color:#ff5a36;
  font-weight:900;
}

/* 신규 캠페인 카드 (2~5번) */
.site-onepick .op-hero5-card {
  display:block;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  text-decoration:none;
  border:1px solid #eef1f6;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position:relative;
}
.site-onepick .op-hero5-card:hover {
  transform:translateY(-2px);
  border-color:transparent;
  box-shadow:
    rgba(255,90,54,0.22) 0px 0px 0px 1px,
    rgba(255,90,54,0.1) 0px 12px 24px -8px,
    rgba(0,0,0,0.04) 0px 4px 8px -2px;
}
.site-onepick .op-hero5-card .op-h5-thumb {
  aspect-ratio:1/1;
  overflow:hidden;
  background:#f1f5f9;
  position:relative;
}
.site-onepick .op-hero5-card .op-h5-thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.site-onepick .op-hero5-card .op-h5-badge {
  position:absolute;
  top:10px;
  left:10px;
  height:22px;
  padding:0 10px;
  border-radius:999px;
  font-size:0.68rem;
  font-weight:900;
  background:#22c55e;
  color:#fff;
  display:inline-flex;
  align-items:center;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
}
.site-onepick .op-hero5-card .op-h5-body {
  padding:12px 14px 14px;
}
.site-onepick .op-hero5-card .op-h5-title {
  font-size:0.84rem;
  font-weight:800;
  color:#0f172a;
  line-height:1.45;
  margin:0 0 6px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.5em;
}
.site-onepick .op-hero5-card .op-h5-promo {
  font-size:0.72rem;
  color:#9a3412;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ============================================================
   3. 4-카드 미드 배너 (파스텔 정보/앱)
   ============================================================ */
.site-onepick .op-midban {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:22px;
}
.site-onepick .op-midban-card {
  display:flex;
  align-items:center;
  padding:20px 22px;
  border-radius:14px;
  text-decoration:none;
  min-height:110px;
  gap:14px;
  overflow:hidden;
  position:relative;
  background:#fff;
  border-left:3px solid #ff5a36;
  box-shadow:
    rgba(0,0,0,0.05) 0px 0px 0px 1px,
    rgba(0,0,0,0.02) 0px 2px 4px -2px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.site-onepick .op-midban-card:hover {
  transform:translateY(-2px);
  box-shadow:
    rgba(255,90,54,0.2) 0px 0px 0px 1px,
    rgba(255,90,54,0.08) 0px 12px 24px -8px,
    rgba(255,90,54,0.04) 0px 4px 8px -2px;
}
/* 4개 카드의 좌측 액센트만 톤 차이 — 파스텔 바탕은 제거 */
.site-onepick .op-midban-card.pink   { border-left-color:#ff5a36; }
.site-onepick .op-midban-card.blue   { border-left-color:#9a3412; }
.site-onepick .op-midban-card.yellow { border-left-color:#ff8567; }
.site-onepick .op-midban-card.sky    { border-left-color:#fb7185; }

.site-onepick .op-midban-body {
  flex:1;
  min-width:0;
}
.site-onepick .op-midban-body strong {
  display:block;
  font-size:0.92rem;
  font-weight:700;
  color:#0f172a;
  letter-spacing:-0.03em;
  line-height:1.35;
  margin-bottom:4px;
}
.site-onepick .op-midban-body p {
  margin:0;
  font-size:0.72rem;
  color:#475569;
  line-height:1.5;
}
.site-onepick .op-midban-img {
  width:72px;
  height:72px;
  flex-shrink:0;
  object-fit:contain;
}

/* ============================================================
   4. 섹션 카드 — 깔끔한 흰 카드
   ============================================================ */
.site-onepick .section {
  background:#fff !important;
  border-radius:18px !important;
  padding:22px 24px !important;
  margin-bottom:18px !important;
  border:1px solid #f1f5f9;
  box-shadow:0 1px 3px rgba(15,23,42,0.03);
}
.site-onepick .section-head { margin-bottom:18px !important; align-items:center !important; }
.site-onepick .section h2 {
  font-size:1.14rem !important;
  font-weight:700 !important;
  color:#0f172a !important;
  letter-spacing:-0.035em;
}
.site-onepick .section-head a {
  color:#ff5a36 !important;
  font-size:0.82rem !important;
  font-weight:800 !important;
  padding:6px 12px;
  border-radius:999px;
  background:#fff2ec;
  transition:background .15s;
}
.site-onepick .section-head a:hover { background:#ffe1d4; }

/* ============================================================
   5. 캠페인 카드 — 5 cols 그리드 (홈페이지용)
   ============================================================ */
.site-onepick .cols-5 {
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:14px !important;
}
.site-onepick .cols-3 {
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:14px !important;
}
.site-onepick .cols-4 {
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:14px !important;
}

.site-onepick .campaign-card {
  border:1px solid #eef1f6 !important;
  border-radius:14px !important;
  background:#fff !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
.site-onepick .campaign-card:hover {
  transform:translateY(-4px) !important;
  box-shadow:0 12px 28px rgba(255,90,54,0.16) !important;
  border-color:#ffd4c4 !important;
}
.site-onepick .campaign-card .thumb { aspect-ratio:1/1 !important; }
.site-onepick .campaign-card .body { padding:11px 12px 13px !important; }
.site-onepick .campaign-card .body h3 {
  font-size:0.84rem !important;
  font-weight:700 !important;
  color:#0f172a !important;
  line-height:1.4 !important;
  margin:0 0 5px !important;
}
.site-onepick .campaign-card .promo {
  font-size:0.74rem !important;
  color:#9a3412 !important;
  font-weight:700 !important;
}
.site-onepick .campaign-card .meta { font-size:0.68rem !important; color:#94a3b8 !important; }
.site-onepick .campaign-card .badge.primary {
  background:#ff5a36 !important;
  color:#fff !important;
}

/* ============================================================
   6. 카테고리 아이콘 섹션 (기존 .cat-icons 개선)
   ============================================================ */
.site-onepick .cat-icons {
  grid-template-columns:repeat(9,1fr) !important;
  gap:12px !important;
}
.site-onepick .cat-icon {
  background:#fff !important;
  border:1px solid #eef1f6 !important;
  border-radius:14px !important;
  padding:16px 8px !important;
  transition:transform .15s ease, border-color .15s ease;
}
.site-onepick .cat-icon:hover {
  transform:translateY(-2px);
  border-color:#ffd4c4;
}
.site-onepick .cat-icon b { font-size:1.6rem !important; }
.site-onepick .cat-icon span { color:#334155 !important; font-size:0.74rem !important; font-weight:800; }

/* ============================================================
   7. 반응형
   ============================================================ */
@media(max-width:1400px) {
  .site-onepick .home-wrap { padding:18px 28px 60px !important; }
  .site-onepick .op-hero5 { grid-template-columns:1fr repeat(3,1fr); }
  .site-onepick .op-hero5-card:nth-child(5) { display:none; }
  .site-onepick .op-midban { grid-template-columns:repeat(4,1fr); }
  .site-onepick .cols-5,
  .site-onepick .cols-3,
  .site-onepick .cols-4 {
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}
@media(max-width:1100px) {
  .site-onepick .op-hero5 { grid-template-columns:1fr repeat(2,1fr); }
  .site-onepick .op-hero5-card:nth-child(4),
  .site-onepick .op-hero5-card:nth-child(5) { display:none; }
  .site-onepick .op-midban { grid-template-columns:repeat(2,1fr); }
  .site-onepick .cols-5,
  .site-onepick .cols-3,
  .site-onepick .cols-4 {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  .site-onepick .cat-icons { grid-template-columns:repeat(6,1fr) !important; }
}
@media(max-width:900px) {
  .site-onepick .home-wrap { padding:14px 16px 56px !important; }
  .site-onepick .op-hero5 { grid-template-columns:1fr; gap:12px; }
  .site-onepick .op-brand-card { min-height:auto; padding:20px; }
  .site-onepick .op-hero5-card:nth-child(3),
  .site-onepick .op-hero5-card:nth-child(4),
  .site-onepick .op-hero5-card:nth-child(5) { display:none; }
  .site-onepick .op-midban { grid-template-columns:repeat(2,1fr); gap:10px; }
  .site-onepick .op-midban-card { min-height:90px; padding:14px 16px; }
  .site-onepick .op-midban-img { width:56px; height:56px; }
  .site-onepick .section { padding:18px 14px !important; }
  .site-onepick .cols-5,
  .site-onepick .cols-3,
  .site-onepick .cols-4 {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  .site-onepick .cat-icons { grid-template-columns:repeat(5,1fr) !important; }
}
@media(max-width:640px) {
  .site-onepick .home-wrap { padding:12px 10px 50px !important; }
  .site-onepick .cols-5,
  .site-onepick .cols-3,
  .site-onepick .cols-4 {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  .site-onepick .cat-icons { grid-template-columns:repeat(4,1fr) !important; }
  .site-onepick .section h2 { font-size:1rem !important; }
  .site-onepick .campaign-card .body h3 { font-size:0.78rem !important; }
}