/* =========================
   LIGHT THEME (FINAL) - index/list 공통
   덮어쓰기 전용: 마지막에 로드
========================= */
:root{
  --bg1:#f8fafc;
  --bg2:#e2e8f0;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;

  --line: rgba(15,23,42,0.14);
  --line-strong: rgba(15,23,42,0.22);

  --shadow: 0 10px 22px rgba(2,6,23,0.08);
  --shadow-hover: 0 14px 28px rgba(2,6,23,0.12);
}

html, body{
  background: linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%) !important;
  color: var(--text) !important;
}

/* ✅ 가로 띠(톤 차이) 제거 - 단색 통일 */
html, body{
  background: #f8fafc !important;
}

.wrap,
.container,
.contents,
.layout,
.mid-banner{
  background: transparent !important;
}

/* 로고 보조색 */
.logo-sub{
  color: #7c3aed !important;
}

/* 헤더 */
.header{
  background: rgba(255,255,255,0.92) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 1px 0 rgba(15,23,42,0.04) !important;
}

.nav a{
  color: var(--text) !important;
  opacity: 0.75;
}
.nav a:hover{ opacity: 1; }
.nav a.active{
  color:#ea580c !important;
  font-weight: 700;
}

/* 검색/버튼 */
.search-box,
.admin-btn{
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.search-input{ color: var(--text) !important; }
.search-input::placeholder{ color:#64748b !important; }

/* CTA는 라이트테마에서도 컬러 유지 */
.admin-btn.cta{
  color: #ffffff !important;
  border-color: transparent !important;
}

/* 배너 컨테이너 — 카드 스타일 제거 */
.mainSlide,
.midSlide{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 카드 */
.manga-item{
  background: rgba(255,255,255,0.94) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow) !important;
}

.manga-item:hover{
  border-color: #ea580c !important;
  box-shadow: 0 12px 28px rgba(234,88,12,0.25) !important;
  transform: translateY(-3px);
}

.manga-title{ color: var(--text) !important; }
.meta-date{ color: var(--muted) !important; }

/* 푸터 */
.footer{
  background: rgba(241,245,249,0.95) !important;
  border-top: 1px solid var(--line) !important;
  color:#64748b !important;
}

/* 모바일 메뉴 토글 */
@media (max-width: 768px) {
  #mainNav {
    background: rgba(255,255,255,0.96) !important;
    border-bottom: 1px solid rgba(15,23,42,0.10) !important;
    box-shadow: 0 12px 30px rgba(2,6,23,0.10) !important;
  }
  #mainNav a {
    color: var(--text) !important;
    opacity: 0.9 !important;
  }
  #mainNav a.active {
    color: #ea580c !important;
    font-weight: 800 !important;
  }

  /* ✅ 모바일에서 PC 검색창 숨김 */
  .header-right .pc-search {
    display: none !important;
  }

  .header-right .mobile-search-inline .search-input {
    width: 120px;
  }
}
@media (max-width: 768px){
  #mainNav .mobile-search{ 
    display: block !important;
  }
  #mainNav .mobile-search .search-box{
    display: flex !important;
    width: 100% !important;
  }
  #mainNav .mobile-search .search-input{
    width: 100% !important;
  }
}

/* =========================
   MOBILE GRID FIX (ALBA APP)
   모바일 세로: 3열 + 좌우 꽉 채우기
========================= */
@media (max-width: 480px){

  /* 🔑 핵심: layout 좌우 여백 제거 */
  .layout{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* container / contents 여백 제거 */
  section.container,
  .contents{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 그리드 3열 */
  .manga-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;     /* 필요하면 4~6 */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 내부 요소 때문에 칸 깨지는 것 방지 */
  .manga-item,
  .manga-item *{
    min-width: 0;
  }

  /* 혹시 모를 가로 넘침 방지 */
  html, body{
    overflow-x: hidden;
  }
}

/* =========================
   MOBILE CARD SIZE TUNING (ALBA APP)
========================= */
@media (max-width: 480px){
  .manga-thumb-img{
    height: 120px;
  }

  .manga-item{
    min-height: 210px;
  }
}

/* =========================
   썸네일 없음 플레이스홀더
========================= */

/* 썸네일 영역 밝게 */
.manga-thumb-img{
  background: radial-gradient(circle at top, #f8fafc 0%, #eef2ff 45%, #ffffff 100%);
  border-radius: 0 !important;
  display: block;
}

/* 이미지가 없을 때 깨진 아이콘 느낌 줄이기 */
.manga-thumb-img[src=""],
.manga-thumb-img:not([src]){
  background: radial-gradient(circle at top, #f1f5f9 0%, #e2e8f0 100%);
}