/* life-info-responsive.css — 반응형/모바일 최적화 (v2 이후 추가분) */
/* ========================================
   v2 additions (260303)
   - keep 1440 desktop within viewport (no horizontal overflow)
   - re-insert side ads as inline banners on tablet/mobile
======================================== */

/* 1440/1366: keep side ads but let main content shrink to fit */
/* NOTE:
 * - The 3-column layout uses fixed side ads (160px each) + gaps + paddings.
 *   On 1440/1366 widths this can overflow unless the main column is allowed
 *   to shrink (min-width:0) and container paddings/gaps are tightened.
 */

/* allow main column to shrink on smaller desktops (prevents horizontal overflow) */
@media (max-width: 1700px){
  .layout-container{ max-width: 100%; width: 100%; box-sizing: border-box; }
  .main-content{ min-width: 0; max-width: none; }
  .categories-wrapper{ width: 100%; box-sizing: border-box; }
}

@media (max-width: 1520px){
  .layout-container{
    padding-left: 16px;
    padding-right: 16px;
    gap: 16px;
  }
  /* keep side ads visible on 1440 (user request) */
  .left-ad, .right-ad{ width: 160px; }
  .main-content{
    min-width: 0;
    max-width: none; /* shrink via flex instead of calc to avoid edge overflows */
  }
  .categories-wrapper{ padding: 28px; }
}

/* Inline ads (used when side ads are hidden on <=1279px) */
.inline-ads{ display:none; margin: 18px 0; }
.inline-ads-row{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.inline-ads .ad-card{
  height: 120px;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 14px 16px;
  border-radius: 14px;
}

.inline-ads .ad-icon{ width: 36px; height: 36px; margin: 0 12px 0 0; }
.inline-ads .ad-title{ margin: 0; font-size: 16px; }
.inline-ads .ad-subtitle{ margin: 2px 0 0 0; font-size:13px; }
.inline-ads .ad-desc{ display:none; }
.inline-ads .ad-cta{
  margin-top: 0;
  margin-left: auto;
  white-space: nowrap;
}

@media (max-width: 1279px){
  .inline-ads{ display:block; }
  .inline-ads-row{ grid-template-columns: 1fr; }
  .inline-ads .ad-card{ height: 110px; }
}
/* life-info.slider.patch.css (v11.3)
 * Include after life-info.css
 */

.business-slider .business-cards{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  gap:16px;
  padding-bottom: 2px;
}

.business-slider .business-card{
  flex:0 0 auto;
  width: clamp(168px, 44vw, 240px);
  scroll-snap-align: start;
}

@media (min-width: 768px){
  .business-slider .business-card{ width: 220px; }
}
@media (min-width: 1200px){
  .business-slider .business-card{ width: 240px; }
}

.business-slider .slider-arrow.is-disabled,
.business-slider .slider-arrow:disabled{
  opacity: .35;
  cursor: not-allowed;
}

.business-slider .business-card img.is-placeholder{
  object-fit: cover;
  filter: grayscale(.05);
}
/* life-info.responsive.patch.css (v14.4)
 * - Mobile overflow fixes for hero category overlay & slider paddings
 * - Include after life-info.css + life-info.slider.patch.css
 */

/* Prevent accidental horizontal scroll */
/* body{overflow-x:hidden} 제거 — sticky 파괴. html{overflow-x:clip}이 대신 처리 */
/* body{ overflow-x:hidden; } */
/* Desktop~Tablet: prevent layout overflow by hiding side ads when the layout
 * can no longer fit reliably.
 * - Keep side ads visible on 1440px (user request)
 */
@media (max-width: 1399px){
  .left-ad, .right-ad{ display:none; }
  .layout-container{ justify-content:center; padding-left: 16px; padding-right: 16px; }
  .main-content{ width:100%; max-width: var(--layout-main-content); }
}


/* Desktop~Tablet: hide side ads earlier to prevent overflow on 1366/1440 widths *
 * (160 + 1200 + 160 + gaps + paddings > 1366)
 */
@media (max-width: 768px){
  
  
  .header-actions{ flex: 0 0 auto; margin-left: auto; }
  .search-container{
    order: 10;
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
  }
  

  .main-container{ padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
  .business-slider{ padding-left: 32px; padding-right: 32px; }
}

@media (max-width: 480px){
  /* Hero category overlay: allow horizontal scroll instead of overflow */
  
  
  .hero-categories-center::-webkit-scrollbar{ display:none; }
  
  
  

  /* Slider padding/arrow hit-area */
  .business-slider{ padding: 0 28px; }
  .slider-arrow{ width: 30px; height: 30px; }

  /* Section titles should not overflow */
  .group-title{ font-size: 18px; line-height: 1.2; }
}

@media (max-width: 360px){
  
  
}

/* ========================================
   v2 additions (260303)
   - keep 1440 desktop within viewport (no horizontal overflow)
   - re-insert side ads as inline banners on tablet/mobile
======================================== */

/* 1440/1366: keep side ads but let main content shrink to fit */
/* NOTE:
 * - The 3-column layout uses fixed side ads (160px each) + gaps + paddings.
 *   On 1440/1366 widths this can overflow unless the main column is allowed
 *   to shrink (min-width:0) and container paddings/gaps are tightened.
 */

/* allow main column to shrink on smaller desktops (prevents horizontal overflow) */
@media (max-width: 1700px){
  .layout-container{ max-width: 100%; width: 100%; box-sizing: border-box; }
  .main-content{ min-width: 0; max-width: none; }
  .categories-wrapper{ width: 100%; box-sizing: border-box; }
}

@media (max-width: 1520px){
  .layout-container{
    padding-left: 16px;
    padding-right: 16px;
    gap: 16px;
  }
  /* keep side ads visible on 1440 (user request) */
  .left-ad, .right-ad{ width: 160px; }
  .main-content{
    min-width: 0;
    max-width: none; /* shrink via flex instead of calc to avoid edge overflows */
  }
  .categories-wrapper{ padding: 28px; }
}

/* Inline ads (used when side ads are hidden on <=1279px) */
.inline-ads{ display:none; margin: 18px 0; }
.inline-ads-row{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.inline-ads .ad-card{
  height: 120px;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 14px 16px;
  border-radius: 14px;
}

.inline-ads .ad-icon{ width: 36px; height: 36px; margin: 0 12px 0 0; }
.inline-ads .ad-title{ margin: 0; font-size: 16px; }
.inline-ads .ad-subtitle{ margin: 2px 0 0 0; font-size:13px; }
.inline-ads .ad-desc{ display:none; }
.inline-ads .ad-cta{
  margin-top: 0;
  margin-left: auto;
  white-space: nowrap;
}

@media (max-width: 1279px){
  .inline-ads{ display:block; }
  .inline-ads-row{ grid-template-columns: 1fr; }
  .inline-ads .ad-card{ height: 110px; }
}
/* life-info.slider.patch.css (v11.3)
 * Include after life-info.css
 */

.business-slider .business-cards{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  gap:16px;
  padding-bottom: 2px;
}

.business-slider .business-card{
  flex:0 0 auto;
  width: clamp(168px, 44vw, 240px);
  scroll-snap-align: start;
}

@media (min-width: 768px){
  .business-slider .business-card{ width: 220px; }
}
@media (min-width: 1200px){
  .business-slider .business-card{ width: 240px; }
}

.business-slider .slider-arrow.is-disabled,
.business-slider .slider-arrow:disabled{
  opacity: .35;
  cursor: not-allowed;
}

.business-slider .business-card img.is-placeholder{
  object-fit: cover;
  filter: grayscale(.05);
}

/* ── 공용 ad-card 보정 ──────────────────────────────────────── */
.ad-icon-wrap { margin-bottom: 12px; }
.ad-icon-wrap svg { display: block; }

/* ════════════════════════════════════════════════════════════
   v16 — 생활정보 모바일 최적화 (꽉찬 레이아웃)
════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  /* 사이드 광고 완전 제거, 메인 전폭 */
  .left-ad, .right-ad { display: none !important; }
  .layout-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 0 !important;
    justify-content: stretch !important;
    max-width: 100% !important;
  }
  .main-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 768px) {
  /* 전체 래퍼 */
  .main-layout { padding: 0 0 16px !important; }
  .categories-wrapper {
    padding: 12px 14px !important;
    border-radius: 0 !important;
    background-color: #f9fafb !important;
  }

  /* 섹션 그룹 */
  .category-group { margin-bottom: 20px !important; }
  .group-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
  }
  .group-header { margin-bottom: 10px !important; }

  /* 카드 그리드: 2열 */
  .business-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* 카드 이미지 */
  .card-image { height: 110px !important; }

  /* 카드 텍스트 */
  .card-content { padding: 8px 10px !important; }
  .card-name {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
  .card-category {
    font-size:13px !important;
  }

  /* 슬라이더 모드일 때 카드 너비 */
  .business-slider .business-card { width: 160px !important; }

  /* 검색바 */
  .search-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 필터 탭 가로스크롤 */
  .category-filters,
  .filter-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
  }
  .category-filters::-webkit-scrollbar,
  .filter-tabs::-webkit-scrollbar { display: none !important; }

  .filter-btn, .tab-btn {
    flex-shrink: 0 !important;
    font-size:13px !important;
    padding: 7px 12px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 480px) {
  .categories-wrapper { padding: 10px 12px !important; }

  /* 카드 그리드: 2열 유지 (480px도 2열이 적합) */
  .business-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .card-image { height: 100px !important; }
  .card-name { font-size:13px !important; }

  .business-slider .business-card { width: 140px !important; }
}

@media (max-width: 360px) {
  .business-cards {
    grid-template-columns: 1fr !important;
  }
  .card-image { height: 160px !important; }
}

/* ════════════════════════════════════════════════════════════
   v16b — 생활정보 인라인 광고 배너 + 섹션 간격 정리
════════════════════════════════════════════════════════════ */

/* inline-ads.js가 삽입하는 .inline-ad-slot 스타일 */
.inline-ad-slot {
  margin: 0 0 20px;
  padding: 0;
}

.inline-ad-slot .inline-ad-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  border-radius: 14px;
  padding: 20px 16px;
  min-height: 140px;
  text-decoration: none;
  color: #fff;
}

/* 배너 카드 하단 → 다음 섹션 사이 구분선 역할 */
.inline-ad-slot + .category-group {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

/* 모바일 전용 표시 설정 */
@media (max-width: 991px) {
  .inline-ad-slot {
    display: block;
    margin: 4px 0 16px;    /* 배너 하단 여백 */
    position: relative;
  }

  /* 배너 하단에 구분선 */
  .inline-ad-slot::after {
    content: '';
    display: block;
    height: 6px;
    background: #f0f2f6;
    margin-top: 16px;
    border-radius: 3px;
  }

  .inline-ad-slot .inline-ad-card {
    border-radius: 12px;
    min-height: 130px;
    padding: 18px 14px;
  }

  /* 광고 슬롯 다음 섹션 상단 여백 */
  .inline-ad-slot + .category-group {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,.06);
  }
}

@media (max-width: 768px) {
  .inline-ad-slot {
    margin: 0 0 12px;
  }

  .inline-ad-slot::after {
    height: 5px;
    margin-top: 12px;
  }

  .inline-ad-slot + .category-group {
    margin-top: 6px;
  }

  /* 광고 텍스트 크기 */
  .inline-ad-slot .ad-title  { font-size: 15px !important; }
  .inline-ad-slot .ad-subtitle { font-size: 13px !important; }
  .inline-ad-slot .ad-desc { font-size:13px !important; line-height: 1.5 !important; }
  .inline-ad-slot .ad-cta {
    font-size:13px !important;
    padding: 7px 16px !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.22) !important;
    border: 1px solid rgba(255,255,255,.4) !important;
    margin-top: 10px !important;
    display: inline-block !important;
  }
}