@font-face{font-family:'KakaoSmall';src:url('../../fonts/KakaoSmallSans-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'KakaoSmall';src:url('../../fonts/KakaoSmallSans-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'KakaoSmall';src:url('../../fonts/KakaoSmallSans-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'KakaoBig';src:url('../../fonts/KakaoBigSans-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'KakaoBig';src:url('../../fonts/KakaoBigSans-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'KakaoBig';src:url('../../fonts/KakaoBigSans-ExtraBold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

/* ── 리셋 ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'KakaoSmall',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button{cursor:pointer;font-family:inherit}

/* ── 레이아웃 ── */
.wrap{width:100%;max-width:1400px;margin:0 auto;padding:0 var(--g,22px);box-sizing:border-box}
.page-wrap{width:100%;max-width:1400px;margin:0 auto;padding:0 var(--g,22px);box-sizing:border-box}
.section-block{margin-bottom:52px}

/* ── 섹션 헤더 ── */
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.section-head h1,.section-head h2{font-family:'KakaoBig',sans-serif;font-weight:700;font-size:clamp(16px,1.6vw,20px);letter-spacing:-.3px}
.more-btn{font-size:12px;font-weight:700;color:var(--acc);opacity:.85;transition:opacity .2s;display:flex;align-items:center;gap:4px}
.more-btn:hover{opacity:1}

/* ── 카드 그리드 ── */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(var(--card-w,155px),1fr));
  gap:var(--card-gap,16px);
  width:100%;
}

/* ── 카드 공통 ── */
.title-card{
  display:block;
  position:relative;
  border-radius:var(--r,10px);
  overflow:hidden;
  background:var(--card);
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  min-width:0;
}

/* ── 포스터 (항상 2:3 비율) ── */
.poster-wrap{
  position:relative;
  width:100%;
  aspect-ratio:2/3;
  overflow:hidden;
  display:block;
}
.poster-wrap img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}

/* ── 포스터 위 제목 오버레이 (항상 표시) ── */
.card-overlay{
  position:absolute;
  bottom:0;left:0;right:0;
  padding:32px 10px 10px;
  background:linear-gradient(transparent,rgba(0,0,0,.82));
  pointer-events:none;
}
.card-overlay-title{
  font-family:'KakaoBig',sans-serif;
  font-size:13px;
  font-weight:700;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:0 1px 4px rgba(0,0,0,.8);
  display:block;
  transform:translateY(4px);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.card-overlay-year{
  font-size:11px;
  color:rgba(255,255,255,.65);
  margin-top:2px;
  display:block;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .3s .05s, transform .3s .05s;
}

/* ── 평점 뱃지 ── */
.score-badge{
  position:absolute;
  top:8px;right:8px;
  display:flex;align-items:center;gap:3px;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(4px);
  color:#fff;
  font-size:11px;font-weight:700;
  padding:3px 7px;
  border-radius:20px;
  z-index:2;
  transition:transform .3s;
}
.score-badge::before{content:'★';color:var(--acc);font-size:10px}

/* ── 호버 애니메이션 ── */
.title-card:hover .poster-wrap img{transform:scale(1.07)}
.title-card:hover .card-overlay-title{transform:translateY(0)}
.title-card:hover .card-overlay-year{opacity:1;transform:translateY(0)}
.title-card:hover .score-badge{transform:scale(1.05)}

/* ── 카드 하단 메타 (선택적) ── */
.card-meta{padding:10px 10px 12px;min-width:0}
.card-title{font-family:'KakaoBig',sans-serif;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);display:block}
.card-year{font-size:11px;color:var(--muted);margin-top:2px;display:block}

/* ── 홈 히어로 ── */
.home-hero{
  position:relative;
  background-size:cover;
  background-position:center 25%;
  min-height:520px;
  display:flex;align-items:flex-end;
}
.home-hero::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.05) 0%,
    rgba(0,0,0,.3) 50%,
    rgba(0,0,0,.88) 100%
  );
  pointer-events:none;
}
.home-hero-inner{
  position:relative;z-index:1;
  width:100%;max-width:1400px;margin:0 auto;
  padding:0 var(--g,22px) 48px;
  display:flex;align-items:flex-end;gap:28px;
}
.home-hero-poster{
  flex-shrink:0;width:150px;
  border-radius:var(--r,10px);
  box-shadow:0 12px 40px rgba(0,0,0,.7);
  display:block;
}
.home-hero-info{flex:1;min-width:0}
.hero-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--acc);color:var(--atx,#fff);
  font-size:11px;font-weight:700;
  padding:4px 12px;border-radius:20px;
  margin-bottom:12px;letter-spacing:.3px;
}
.hero-title{
  font-family:'KakaoBig',sans-serif;
  font-size:clamp(24px,4vw,46px);font-weight:800;
  color:#fff;line-height:1.1;margin-bottom:10px;
  letter-spacing:-.5px;
  text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.hero-meta{
  display:flex;align-items:center;gap:12px;
  font-size:14px;color:rgba(255,255,255,.75);
  margin-bottom:14px;
}
.hero-score{color:var(--acc);font-weight:700}
.hero-desc{
  font-size:14px;line-height:1.7;
  color:rgba(255,255,255,.72);
  max-width:520px;
  margin-bottom:20px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hero-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--acc);color:var(--atx,#fff);
  padding:12px 28px;border-radius:var(--r,10px);
  font-size:14px;font-weight:700;
  transition:transform .2s,filter .2s;
  box-shadow:0 4px 20px rgba(0,0,0,.3);
}
.hero-btn:hover{transform:translateY(-2px);filter:brightness(1.1)}

/* ── 헤더 공통 ── */
.site-header{position:sticky;top:0;z-index:100;transition:background .3s,box-shadow .3s}
.hd-inner{
  display:flex;align-items:center;gap:16px;
  height:var(--hh,60px);
  max-width:1400px;margin:0 auto;
  padding:0 var(--g,22px);
}
.logo{
  flex-shrink:0;
  font-family:'KakaoBig',sans-serif;font-weight:800;font-size:20px;
  color:var(--acc);letter-spacing:-.5px;
  transition:opacity .2s;
}
.logo:hover{opacity:.85}
.gnb{display:flex;align-items:center;gap:2px;flex:1;overflow:hidden}
.gnb a{
  font-size:13px;color:var(--sub);
  padding:6px 10px;border-radius:6px;
  white-space:nowrap;transition:color .2s,background .2s;
}
.gnb a:hover,.gnb a.active{color:var(--acc)}
.gnb-sep{font-size:11px;font-weight:700;color:var(--muted);padding:6px 6px;opacity:.6}
.hd-right{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.s-form{display:flex;align-items:center}
.s-input{
  background:var(--search-bg,var(--card));
  border:1.5px solid var(--bdr);border-right:none;
  border-radius:8px 0 0 8px;
  color:var(--text);padding:7px 12px;
  font-size:13px;width:160px;
  font-family:'KakaoSmall',sans-serif;
  outline:none;transition:border-color .2s,width .3s;
}
.s-input:focus{border-color:var(--acc);width:200px}
.s-input::placeholder{color:var(--muted)}
.s-btn{
  background:var(--acc);color:var(--atx,#fff);
  border:none;border-radius:0 8px 8px 0;
  padding:7px 12px;font-size:15px;
  transition:opacity .2s;
}
.s-btn:hover{opacity:.85}

/* ── 햄버거 ── */
.nav-tog{display:none;background:none;border:none;padding:6px;color:var(--text);flex-shrink:0}
.hbg,.hbg::before,.hbg::after{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;transition:.25s}
.hbg{position:relative}
.hbg::before,.hbg::after{content:'';position:absolute;left:0}
.hbg::before{top:-6px}.hbg::after{top:6px}

/* ── 드로어 ── */
.drawer{
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;bottom:0;
  width:min(280px,80vw);z-index:300;
  background:var(--drawer-bg,var(--bg));
  border-right:1px solid var(--bdr);
  transform:translateX(-100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
}
body.nav-open .drawer{transform:translateX(0)}
.dw-overlay{display:none;position:fixed;inset:0;z-index:299;background:rgba(0,0,0,.55)}
body.nav-open .dw-overlay{display:block}
.dw-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--bdr);flex-shrink:0}
.dw-logo{font-family:'KakaoBig',sans-serif;font-weight:800;font-size:18px;color:var(--acc)}
.dw-close{background:none;border:none;font-size:22px;line-height:1;color:var(--text);padding:4px 8px}
.dw-nav{display:flex;flex-direction:column;padding:10px 0;flex:1}
.dw-nav a{
  padding:12px 18px;font-size:14px;color:var(--sub);
  border-left:3px solid transparent;
  transition:all .15s;
}
.dw-nav a:hover,.dw-nav a.active{color:var(--acc);background:var(--card);border-left-color:var(--acc)}
.dw-sec{padding:14px 18px 4px;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.dw-search{padding:12px 14px;border-top:1px solid var(--bdr)}
.dw-search .s-input{width:100%;border-radius:8px;border-right:1.5px solid var(--bdr)}
.dw-search .s-btn{width:100%;border-radius:8px;padding:9px;margin-top:6px;font-size:13px;font-weight:700;display:block;text-align:center;background:var(--acc);color:var(--atx,#fff);border:none}

/* ── 상세 히어로 ── */
.detail-hero{background-size:cover;background-position:center 20%;position:relative}
.detail-hero::after{content:'';position:absolute;inset:0;pointer-events:none}
.detail-hero-body{position:relative;z-index:1;max-width:1400px;margin:0 auto;padding:60px var(--g,22px);display:flex;gap:36px;align-items:flex-start}
.detail-poster-wrap{flex-shrink:0;width:195px}
.detail-poster-wrap img{width:100%;border-radius:var(--r,10px);box-shadow:0 16px 48px rgba(0,0,0,.55);display:block}
.detail-info{flex:1;min-width:0}
.detail-title{font-family:'KakaoBig',sans-serif;font-size:clamp(22px,3vw,38px);font-weight:800;line-height:1.15;margin-bottom:12px;letter-spacing:-.5px}
.detail-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.chip{
  display:inline-block;padding:3px 11px;
  border-radius:20px;font-size:12px;
  border:1px solid var(--bdr);color:var(--sub);
  background:var(--chip-bg,transparent);
}
.detail-score-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.detail-score-num{font-family:'KakaoBig',sans-serif;font-size:32px;font-weight:800;color:var(--acc)}
.detail-score-lbl{font-size:12px;color:var(--muted);line-height:1.4}
.detail-overview{font-size:14px;line-height:1.85;color:var(--sub);max-width:640px}
.vod-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.vod-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:11px 24px;border-radius:var(--r,10px);
  font-size:14px;font-weight:700;
  transition:transform .2s,filter .2s;white-space:nowrap;
}
.vod-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.vod-btn-primary{background:var(--acc);color:var(--atx,#fff)}
.vod-btn-secondary{background:var(--card);color:var(--text);border:1.5px solid var(--bdr)}
.vod-btn-coupang{background:#ff6100;color:#fff}

/* ── 상세 레이아웃 ── */
.detail-layout{display:grid;grid-template-columns:1fr 272px;gap:32px;margin-top:32px}
.detail-main-col{}
.detail-side-col{}
.detail-sec-title{font-family:'KakaoBig',sans-serif;font-size:17px;font-weight:700;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--bdr)}

/* ── 사이드 박스 ── */
.side-box{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r,10px);padding:16px;margin-bottom:14px}
.side-box-title{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px}
.cast-list{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--sub)}
.info-table{width:100%;border-collapse:collapse;font-size:12px}
.info-table tr+tr td{border-top:1px solid var(--bdr)}
.info-table td{padding:6px 0;vertical-align:top}
.info-table td:first-child{color:var(--muted);width:58px;padding-right:10px}

/* ── 예고편 ── */
.trailer-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-bottom:24px}
.trailer-item{border-radius:var(--r,10px);overflow:hidden}
.trailer-item iframe{width:100%;aspect-ratio:16/9;border:none;display:block}

/* ── 이미지 그리드 ── */
.image-strip{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr))!important;
  gap:8px;margin-bottom:20px;
}
.image-thumb{border-radius:var(--r,10px);overflow:hidden}
.image-thumb img{width:100%;height:128px;object-fit:cover;display:block;transition:transform .3s}
.image-thumb:hover img{transform:scale(1.04)}

/* ── 페이지네이션 ── */
.pagination{display:flex;align-items:center;justify-content:center;gap:10px;padding:36px 0 0}
.page-btn{
  padding:8px 22px;border-radius:8px;
  font-size:13px;font-weight:600;
  border:1.5px solid var(--bdr);
  background:var(--card);color:var(--text);
  transition:all .2s;
}
.page-btn:hover{background:var(--acc);color:var(--atx,#fff);border-color:var(--acc)}
.page-info{font-size:13px;color:var(--muted)}

/* ── 푸터 ── */
.site-footer{border-top:1px solid var(--bdr);margin-top:80px}
.ft-inner{max-width:1400px;margin:0 auto;padding:24px var(--g,22px);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.ft-copy{font-size:14px;color:#ffffff}
.ft-links{display:flex;gap:16px}
.ft-links a{font-size:12px;color:var(--muted);transition:color .2s}
.ft-links a:hover{color:var(--acc)}

/* ── FAB ── */
.fab{position:fixed;bottom:22px;right:22px;width:44px;height:44px;background:var(--acc);color:var(--atx,#fff);border:none;border-radius:50%;font-size:18px;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transform:translateY(8px);transition:.28s;z-index:50;box-shadow:0 4px 20px rgba(0,0,0,.25)}
.fab.on{opacity:1;pointer-events:auto;transform:translateY(0)}

/* ── 홈 히어로 배너 ── */
.home-content{padding-top:36px}

/* ── 모바일 ── */
@media(max-width:900px){
  :root{--g:16px}
  .nav-tog{display:flex;align-items:center}
  .gnb,.hd-right{display:none}
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))!important;gap:10px!important}
  .home-hero{min-height:360px}
  .home-hero-poster{width:110px}
  .hero-title{font-size:22px}
  .hero-desc{display:none}
  .detail-hero-body{flex-direction:column;padding:36px var(--g,16px)}
  .detail-poster-wrap{width:145px}
  .detail-layout{grid-template-columns:1fr}
  .detail-side-col{order:2}
  .trailer-wrap{grid-template-columns:1fr}
  .image-strip{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important}
  .image-thumb img{height:100px}
  .ft-inner{flex-direction:column;text-align:center}
}
@media(max-width:480px){
  :root{--g:12px}
  .card-grid{grid-template-columns:repeat(3,1fr)!important;gap:7px!important}
  .home-hero{min-height:260px}
  .home-hero-poster{display:none}
  .hero-title{font-size:20px}
  .home-hero-inner{padding-bottom:28px}
  .image-strip{grid-template-columns:repeat(3,1fr)!important}
  .image-thumb img{height:80px}
}


:root{
  --bg:#0a0a0a;--card:#161616;--card2:#1e1e1e;
  --text:#f0f0f0;--sub:#999;--muted:#555;
  --bdr:#232323;--acc:#e50914;--atx:#fff;
  --r:8px;--g:24px;--hh:60px;
  --drawer-bg:#111;--search-bg:#1a1a1a;
}


/* 헤더: 투명 → 스크롤시 다크 블러 */
.site-header{position:fixed!important;top:0;left:0;right:0;background:transparent;border-bottom:none}
.site-header.scrolled{background:rgba(10,10,10,.96);backdrop-filter:blur(16px);border-bottom:1px solid #1e1e1e}
.logo{font-size:22px}
.gnb a:hover,.gnb a.active{background:rgba(255,255,255,.06)}
.s-input{background:#1a1a1a;border-color:#2a2a2a;border-radius:8px 0 0 8px}
.s-btn{border-radius:0 8px 8px 0}


/* 카드 강조 효과 */
.title-card{border:1px solid #1e1e1e;transition:border-color .3s,transform .3s,box-shadow .3s}
.title-card:hover{border-color:#e50914;box-shadow:0 8px 32px rgba(229,9,20,.18);transform:translateY(-4px)}
/* 히어로 */
.detail-hero::after{background:linear-gradient(90deg,rgba(10,10,10,.97) 40%,rgba(10,10,10,.15))}
/* 섹션 타이틀 강조 */
.section-head h1,.section-head h2{position:relative;padding-left:14px}
.section-head h1::before,.section-head h2::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:70%;background:#e50914;border-radius:2px}

/* ── 카드 하단 제목 항상 표시 ── */
.card-meta{
  padding:9px 10px 11px;
  min-width:0;
  overflow:hidden;
  display:block!important;
}
.card-title{
  font-family:'KakaoBig',sans-serif;
  font-size:13px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--text);display:block!important;
  margin-bottom:2px;
}
.card-year{
  font-size:11px;color:var(--muted);
  display:block!important;
}

/* 히어로 inner: 포스터+텍스트 가로 정렬, 왼쪽 정렬 */
.home-hero-inner{
  width:100%!important;
  max-width:1400px!important;
  margin:0 auto!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:flex-end!important;
}

/* 포스터: 세로 정렬 맞추기 */
.home-hero-poster{
  flex-shrink:0!important;
  align-self:flex-end!important;
}

/* 히어로 텍스트: 잘림 방지 */
.home-hero-info{
  flex:1!important;
  min-width:0!important;
  overflow:hidden!important;
}
.hero-title{
  white-space:normal!important;
  overflow:hidden!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  word-break:keep-all!important;
}
.hero-desc{
  overflow:hidden!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
}

/* 카드 그리드: 왼쪽 정렬 */
.home-content{
  padding-top:40px!important;
}
.home-content .section-head,
.home-content .card-grid{
  max-width:100%!important;
  width:100%!important;
}

/* ── 카드그리드 왼쪽 정렬 보장 ── */
.card-grid{
  justify-content:start!important;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important;
}

/* ── 히어로 텍스트 잘림 완전 수정 ── */
.home-hero{overflow:hidden!important;width:100%!important}
.home-hero-inner{
  width:100%!important;
  max-width:1400px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  padding-left:var(--g,22px)!important;
  padding-right:var(--g,22px)!important;
}
.home-hero-info{
  flex:1!important;
  min-width:0!important;
  max-width:calc(100% - 190px)!important;
  overflow:hidden!important;
}
.hero-title{
  font-size:clamp(20px,3.5vw,44px)!important;
  white-space:normal!important;
  word-break:keep-all!important;
  overflow-wrap:break-word!important;
  overflow:hidden!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  max-width:100%!important;
}
.hero-desc{
  max-width:100%!important;
  overflow:hidden!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  word-break:keep-all!important;
}

/* ── 히어로 배너 컨테이너 제한 ── */
.home-hero{
  max-width:1400px!important;
  margin:0 auto!important;
  border-radius:var(--r,10px)!important;
  overflow:hidden!important;
}
/* 텍스트 정렬 원래대로 */
.home-hero-info{text-align:left!important;align-items:flex-start!important}
.hero-title{text-align:left!important}
.hero-meta{justify-content:flex-start!important}
.hero-desc{text-align:left!important}

/* ── 메뉴 폰트 KakaoBig ── */
.gnb a,.gnb-sep,.dw-nav a,.dw-sec{font-family:'KakaoBig',sans-serif!important}

/* 마지막 행 빈 칸 채우기 - 가상 요소로 공간 차지 않게 */
.title-card{
  height:auto!important;
  align-self:start!important;
}
/* 빈 영역 배경 투명하게 */
.card-grid::after{
  content:none!important;
}
@media(max-width:900px){
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))!important;gap:10px!important}
}
@media(max-width:480px){
  .card-grid{grid-template-columns:repeat(3,1fr)!important;gap:7px!important}
}

/* 마지막 행 카드들 왼쪽 정렬 유지 */
.title-card{
  width:100%!important;
  max-width:100%!important;
}
@media(max-width:900px){
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))!important;gap:10px!important}
}
@media(max-width:480px){
  .card-grid{grid-template-columns:repeat(3,1fr)!important;gap:7px!important}
}

/* ── 카드 그리드 열 수 고정 ── */
.card-grid{
  display:grid!important;
  grid-template-columns:repeat(6,1fr)!important;
  gap:14px!important;
}
@media(max-width:1100px){
  .card-grid{grid-template-columns:repeat(5,1fr)!important}
}
@media(max-width:900px){
  .card-grid{grid-template-columns:repeat(4,1fr)!important;gap:10px!important}
}
@media(max-width:600px){
  .card-grid{grid-template-columns:repeat(3,1fr)!important;gap:7px!important}
}

/* ── API 페이지: 5열로 20개 딱 맞게 ── */
body.grid-5 .card-grid{
  grid-template-columns:repeat(5,1fr)!important;
}
@media(max-width:900px){
  body.grid-5 .card-grid{grid-template-columns:repeat(4,1fr)!important}
}
@media(max-width:600px){
  body.grid-5 .card-grid{grid-template-columns:repeat(2,1fr)!important}
}

/* ── API 페이지 모바일 2열 ── */
@media(max-width:600px){
  body.grid-5 .card-grid{grid-template-columns:repeat(2,1fr)!important}
}

/* ── fixed 헤더 콘텐츠 겹침 방지 ── */
.page-wrap{
  padding-top:calc(var(--hh,62px) + 16px)!important;
}

/* ── 메인 홈 카드 5열 ── */
.home-content .card-grid{
  grid-template-columns:repeat(5,1fr)!important;
}
@media(max-width:900px){
  .home-content .card-grid{grid-template-columns:repeat(4,1fr)!important}
}
@media(max-width:600px){
  .home-content .card-grid{grid-template-columns:repeat(2,1fr)!important}
}