/* =====================================================================
   CampusDown 메인 하단 리디자인 (indexlower, 2026-10-03)
   - 카테고리 / 최근등록 문서 / 출석대체 시험 / 캠퍼스 다운소식 / 인기문서 TOP 10 / 하단 링크
   - 모든 규칙은 .cdl (main.main .area.cdl) 과 .cdl-footnav 아래로 스코프됨
   - 광고 영역(.adv)은 의도적으로 건드리지 않음
   ===================================================================== */
main.main .area.cdl{
  --cdl-brand:#4f6bed; --cdl-brand-d:#3d57d6; --cdl-brand-l:#eef1fe; --cdl-brand-ll:#f5f7ff;
  --cdl-violet:#7c5cff; --cdl-pink:#ec4899; --cdl-cyan:#1aa0d8;
  --cdl-ink:#0f172a; --cdl-ink-2:#475569; --cdl-ink-3:#64748b; --cdl-ink-4:#94a3b8;
  --cdl-line:#e6eaf5; --cdl-line-2:#eef1f8;
  --cdl-shadow:0 1px 2px rgba(15,23,42,.04),0 14px 36px -20px rgba(30,41,90,.22);
  --cdl-shadow-h:0 0 0 4px rgba(79,107,237,.06),0 22px 48px -22px rgba(79,107,237,.45);
  --cdl-ease:cubic-bezier(.2,.7,.2,1);
  width:75rem; max-width:100%; margin:0 auto; padding:72px 20px 8px;
  font-family:"Pretendard Variable",Pretendard,"Noto Sans KR",NanumGothic,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  color:var(--cdl-ink); letter-spacing:-.01em; word-break:keep-all; -webkit-font-smoothing:antialiased;
}
main.main .area.cdl *,main.main .area.cdl *::before,main.main .area.cdl *::after{box-sizing:border-box}
main.main .area.cdl a{color:inherit; text-decoration:none}
main.main .area.cdl a:focus-visible{outline:3px solid rgba(79,107,237,.38); outline-offset:2px; border-radius:12px}

/* ---------- 섹션 헤더 ---------- */
main.main .area.cdl .cdl-sec{position:relative; padding:0; margin:0}
main.main .area.cdl .cdl-sec + .cdl-sec,main.main .area.cdl .adv + .cdl-sec{margin-top:72px}
.cdl .cdl-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:0 0 20px}
.cdl .cdl-eyebrow{display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px 0 9px; border-radius:999px; background:#fff; border:1px solid var(--cdl-line); box-shadow:0 1px 2px rgba(15,23,42,.04),0 6px 16px -10px rgba(79,107,237,.4); color:var(--cdl-brand); font-size:12px; font-weight:700; letter-spacing:.04em; line-height:1}
.cdl .cdl-eyebrow i{font-size:12px; line-height:1}
main.main .area.cdl .cdl-title{margin:10px 0 0; padding:0; border:0; font-size:26px; line-height:1.3; font-weight:800; letter-spacing:-.035em; color:var(--cdl-ink); text-transform:none}
main.main .area.cdl .cdl-title::before,main.main .area.cdl .cdl-title::after{content:none; display:none}
.cdl .cdl-sub{margin:6px 0 0; font-size:14.5px; line-height:1.55; color:var(--cdl-ink-3)}
main.main .area.cdl .cdl-more{flex:0 0 auto; display:inline-flex; align-items:center; gap:4px; height:36px; padding:0 14px; border-radius:999px; border:1px solid var(--cdl-line); background:#fff; color:var(--cdl-ink-2); font-size:13.5px; font-weight:600; transition:color .2s,border-color .2s,box-shadow .2s}
main.main .area.cdl .cdl-more:hover{color:var(--cdl-brand); border-color:rgba(79,107,237,.35); box-shadow:0 6px 18px -10px rgba(79,107,237,.5)}
main.main .area.cdl .cdl-more i{font-size:12px; transition:transform .2s var(--cdl-ease)}
main.main .area.cdl .cdl-more:hover i{transform:translateX(2px)}

/* 공통 카드 */
main.main .area.cdl .cdl-card{position:relative; background:#fff; border:1px solid var(--cdl-line); border-radius:22px; box-shadow:var(--cdl-shadow); overflow:hidden}
main.main .area.cdl .cdl-card::before{content:""; position:absolute; left:24px; right:24px; top:0; height:1px; background:linear-gradient(90deg,transparent,rgba(79,107,237,.4),transparent); pointer-events:none}
main.main .area.cdl .card-body{padding:0}

/* ---------- 1. 카테고리 타일 ---------- */
main.main .area.cdl .link{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin:0; padding:0; background:none; border:0; border-radius:0; overflow:visible; min-height:286px; text-decoration:none}
main.main .area.cdl .link .cdl-cat{--c:#4f6bed; --cb:#eef1fe; position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:14px; min-height:136px; padding:20px 20px 18px; background:#fff; border:1px solid var(--cdl-line); border-radius:20px; box-shadow:var(--cdl-shadow); text-align:left; transition:transform .35s var(--cdl-ease),box-shadow .35s ease,border-color .35s ease}
main.main .area.cdl .link .cdl-cat:hover{transform:translateY(-4px); border-color:rgba(79,107,237,.32); box-shadow:var(--cdl-shadow-h)}
main.main .area.cdl .link .cdl-cat i{display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; line-height:1; border-radius:14px; border:0; background:var(--cb); color:var(--c); font-size:21px; transition:transform .35s var(--cdl-ease),background .25s,color .25s}
main.main .area.cdl .link .cdl-cat:hover i{background:var(--c); color:#fff; transform:scale(1.05)}
main.main .area.cdl .link .cdl-cat i + span{display:block; padding:0; font-size:15px; font-weight:700; line-height:1.35; color:var(--cdl-ink); letter-spacing:-.02em}
main.main .area.cdl .link .cdl-cat:hover span{text-decoration:none}
main.main .area.cdl .link .cdl-cat small{display:block; margin-top:3px; font-size:12px; font-weight:500; color:var(--cdl-ink-4)}
main.main .area.cdl .link .cdl-cat .cdl-cat-go{position:absolute; right:18px; top:22px; font-size:14px; color:var(--cdl-ink-4); opacity:0; transform:translateX(-4px); transition:opacity .25s,transform .25s var(--cdl-ease)}
main.main .area.cdl .link .cdl-cat:hover .cdl-cat-go{opacity:1; transform:none; color:var(--c)}
main.main .area.cdl .link .cdl-cat:nth-child(6n+2){--c:#7c5cff; --cb:#f2eeff}
main.main .area.cdl .link .cdl-cat:nth-child(6n+3){--c:#0e9fcf; --cb:#e8f7fd}
main.main .area.cdl .link .cdl-cat:nth-child(6n+4){--c:#16a34a; --cb:#eaf8ef}
main.main .area.cdl .link .cdl-cat:nth-child(6n+5){--c:#e8890c; --cb:#fff4e5}
main.main .area.cdl .link .cdl-cat:nth-child(6n+6){--c:#e0457b; --cb:#fdeef4}

/* ---------- 2. 최근등록 문서 ---------- */
main.main .area.cdl #list2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:0}
main.main .area.cdl #list2 > .cdl-col{min-width:0}
main.main .area.cdl .main_board .card-body{height:auto; min-height:600px; overflow:visible; padding:8px 10px}
main.main .area.cdl .main_board .card-body > div{width:auto; display:block; padding:0; border:0}
main.main .area.cdl .main_board .card-body > div + div{border-top:1px solid var(--cdl-line-2)}
main.main .area.cdl .cdl-doc a{display:flex; align-items:center; gap:14px; width:100%; padding:11px 12px; border-radius:14px; transition:background .2s}
main.main .area.cdl .cdl-doc a:hover{background:var(--cdl-brand-ll)}
main.main .area.cdl .cdl-doc-ico{flex:0 0 40px; width:40px; height:40px; border-radius:12px; background:#f4f6fb; display:flex; align-items:center; justify-content:center}
main.main .area.cdl .main_board .cdl-doc-ico img{width:22px; height:22px; margin:0; object-fit:contain}
main.main .area.cdl .main_board .cdl-doc-body{flex:1 1 auto; min-width:0; width:auto; float:none; display:flex; flex-direction:column; gap:4px; overflow:hidden; white-space:normal}
main.main .area.cdl .cdl-doc-tit{display:block; font-size:14.5px; font-weight:600; line-height:1.45; color:var(--cdl-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .2s}
main.main .area.cdl .cdl-doc a:hover .cdl-doc-tit{color:var(--cdl-brand); text-decoration:none}
main.main .area.cdl .main_board a:hover div{text-decoration:none}
main.main .area.cdl .cdl-meta{display:flex; align-items:center; gap:8px; min-width:0; font-size:12.5px; line-height:1.3; color:var(--cdl-ink-3); white-space:nowrap; overflow:hidden}
main.main .area.cdl .cdl-meta > *{flex:0 0 auto}
main.main .area.cdl .cdl-meta .cdl-leaf{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis}
main.main .area.cdl .cdl-meta time{color:var(--cdl-ink-4); font-variant-numeric:tabular-nums}
main.main .area.cdl .cdl-meta .cdl-dot{width:3px; height:3px; border-radius:50%; background:#cbd2e1}
main.main .area.cdl .cdl-chip{display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:7px; background:var(--cdl-brand-l); color:var(--cdl-brand-d); font-size:11.5px; font-weight:700; letter-spacing:-.01em; white-space:nowrap}
main.main .area.cdl .cdl-chip--2{background:#f2eeff; color:#5b3fd6}
main.main .area.cdl .cdl-chip--3{background:#e8f7fd; color:#0b7fa6}
main.main .area.cdl .cdl-chip--4{background:#eaf8ef; color:#15803d}

/* ---------- 3. 출석대체 시험 (학과 칩) ---------- */
main.main .area.cdl .link2{text-decoration:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; width:auto; margin:0; padding:22px; background:#fff; border:1px solid var(--cdl-line); border-radius:22px; box-shadow:var(--cdl-shadow); min-height:262px}
main.main .area.cdl .link2 a{display:flex; align-items:center; justify-content:center; gap:6px; float:none; width:auto; height:44px; padding:0 12px; border:1px solid var(--cdl-line); border-radius:999px; background:#fbfcff; color:var(--cdl-ink-2); font-size:14px; font-weight:600; text-align:center; white-space:nowrap; transition:color .2s,background .2s,border-color .2s,transform .25s var(--cdl-ease),box-shadow .25s}
main.main .area.cdl .link2 a::before{content:""; width:6px; height:6px; border-radius:50%; background:#c7cff5; flex:0 0 6px; transition:background .2s}
main.main .area.cdl .link2 a:hover{color:var(--cdl-brand); background:var(--cdl-brand-l); border-color:rgba(79,107,237,.35); transform:translateY(-2px); box-shadow:0 10px 20px -14px rgba(79,107,237,.6); text-decoration:none}
main.main .area.cdl .link2 a:hover::before{background:var(--cdl-brand)}

/* ---------- 4. 캠퍼스 다운소식 + 프로모 ---------- */
main.main .area.cdl .cdl-news-grid{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:16px; align-items:stretch}
main.main .area.cdl .cdl-news-card{display:flex; flex-direction:column; min-height:228px}
main.main .area.cdl .down .down_list{flex:1 1 auto; height:auto; overflow:visible; padding:10px 10px 0}
main.main .area.cdl .down .card-body > div{padding:0; border:0}
main.main .area.cdl .down .card-body > div + div{border-top:1px solid var(--cdl-line-2)}
main.main .area.cdl .down a{width:auto}
main.main .area.cdl .down a:hover *{text-decoration:none}
main.main .area.cdl .cdl-news a{display:flex; align-items:center; gap:14px; padding:14px 12px; border-radius:14px; transition:background .2s}
main.main .area.cdl .cdl-news a:hover{background:var(--cdl-brand-ll)}
main.main .area.cdl .cdl-news-ico{flex:0 0 42px; width:42px; height:42px; border-radius:13px; background:linear-gradient(135deg,#eef1fe,#f4efff); color:var(--cdl-brand); display:flex; align-items:center; justify-content:center; font-size:19px}
main.main .area.cdl .cdl-news-body{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px}
main.main .area.cdl .cdl-news-sub{display:block; font-size:15px; font-weight:700; color:var(--cdl-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .2s}
main.main .area.cdl .cdl-news a:hover .cdl-news-sub{color:var(--cdl-brand)}
main.main .area.cdl .down .cdl-news .date{width:auto; display:block; font-size:12.5px; color:var(--cdl-ink-4); font-variant-numeric:tabular-nums}
main.main .area.cdl .cdl-news-go{flex:0 0 auto; color:var(--cdl-ink-4); font-size:14px; transition:transform .2s var(--cdl-ease),color .2s}
main.main .area.cdl .cdl-news a:hover .cdl-news-go{color:var(--cdl-brand); transform:translateX(3px)}
main.main .area.cdl .cdl-empty{padding:28px 12px; text-align:center; font-size:14px; color:var(--cdl-ink-3)}
main.main .area.cdl .down a.cdl-news-all{display:flex; align-items:center; justify-content:center; gap:6px; margin:6px 16px 16px; height:44px; border-radius:12px; background:#f6f8fd; color:var(--cdl-ink-2); font-size:13.5px; font-weight:600; transition:background .2s,color .2s}
main.main .area.cdl .down a.cdl-news-all:hover{background:var(--cdl-brand-l); color:var(--cdl-brand)}
main.main .area.cdl .cdl-promos{display:grid; grid-template-rows:1fr 1fr; gap:16px}
main.main .area.cdl .down a.cdl-promo{position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; gap:14px; width:auto; min-height:106px; padding:20px 20px; border-radius:22px; border:1px solid var(--cdl-line); box-shadow:var(--cdl-shadow); transition:transform .35s var(--cdl-ease),box-shadow .35s,border-color .35s}
main.main .area.cdl .down a.cdl-promo:hover{transform:translateY(-3px); border-color:rgba(79,107,237,.32); box-shadow:var(--cdl-shadow-h)}
main.main .area.cdl .cdl-promo::after{content:""; position:absolute; z-index:-1; right:-40px; bottom:-60px; width:160px; height:160px; border-radius:50%; filter:blur(10px); opacity:.55}
main.main .area.cdl .cdl-promo--join{background:linear-gradient(135deg,#f3f5ff 0%,#eef1fe 55%,#f6f0ff 100%)}
main.main .area.cdl .cdl-promo--join::after{background:radial-gradient(circle,rgba(124,92,255,.35),rgba(124,92,255,0) 70%)}
main.main .area.cdl .cdl-promo--cs{background:linear-gradient(135deg,#f2fbff 0%,#ecf6ff 55%,#f1f5ff 100%)}
main.main .area.cdl .cdl-promo--cs::after{background:radial-gradient(circle,rgba(26,160,216,.32),rgba(26,160,216,0) 70%)}
main.main .area.cdl .cdl-promo-ico{flex:0 0 50px; width:50px; height:50px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; box-shadow:0 10px 22px -10px rgba(79,107,237,.8)}
main.main .area.cdl .cdl-promo--join .cdl-promo-ico{background:linear-gradient(135deg,#4f6bed,#7c5cff)}
main.main .area.cdl .cdl-promo--cs .cdl-promo-ico{background:linear-gradient(135deg,#1aa0d8,#4f6bed); box-shadow:0 10px 22px -10px rgba(26,160,216,.8)}
main.main .area.cdl .cdl-promo-txt{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px}
main.main .area.cdl .cdl-promo-txt strong{font-size:17px; font-weight:800; letter-spacing:-.03em; color:var(--cdl-ink)}
main.main .area.cdl .cdl-promo-txt span{font-size:13px; font-weight:500; color:var(--cdl-ink-3)}
main.main .area.cdl .down a.cdl-promo:hover *{text-decoration:none}
main.main .area.cdl .cdl-promo-go{flex:0 0 34px; width:34px; height:34px; border-radius:50%; background:#fff; color:var(--cdl-brand); display:flex; align-items:center; justify-content:center; font-size:15px; box-shadow:0 4px 12px -6px rgba(15,23,42,.25); transition:transform .25s var(--cdl-ease)}
main.main .area.cdl .cdl-promo:hover .cdl-promo-go{transform:translateX(3px)}

/* ---------- 5. 인기문서 TOP 10 ---------- */
main.main .area.cdl .cdl-sec--top{margin-bottom:8px}
main.main .area.cdl .swiper_banner{position:relative; padding:6px 4px 26px; margin:-6px -4px 0; overflow:hidden}
main.main .area.cdl .swiper_banner .swiper-wrapper{align-items:stretch}
main.main .area.cdl .swiper_banner:not(.swiper-initialized) .swiper-slide{width:calc((100% - 72px) / 5); margin-right:18px}
main.main .area.cdl .swiper_banner .swiper-slide{height:auto}
main.main .area.cdl .swiper_banner .card{height:100%; min-height:236px; border:1px solid var(--cdl-line); border-radius:20px; background:#fff; box-shadow:var(--cdl-shadow); transition:transform .35s var(--cdl-ease),box-shadow .35s,border-color .35s}
main.main .area.cdl .swiper_banner .card:hover{transform:translateY(-4px); border-color:rgba(79,107,237,.32); box-shadow:var(--cdl-shadow-h)}
main.main .area.cdl .swiper_banner .card-body{height:100%; padding:0}
main.main .area.cdl .swiper_banner .card-body > a{display:flex; flex-direction:column; height:100%; padding:18px 18px 16px}
main.main .area.cdl .cdl-top-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
main.main .area.cdl .cdl-rank{display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 8px; border-radius:11px; background:#f1f4fa; color:var(--cdl-ink-2); font-size:15px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
main.main .area.cdl .cdl-rank--1{background:linear-gradient(135deg,#4f6bed,#7c5cff); color:#fff; box-shadow:0 8px 18px -8px rgba(79,107,237,.8)}
main.main .area.cdl .cdl-rank--2{background:linear-gradient(135deg,#6d84f3,#9a86ff); color:#fff}
main.main .area.cdl .cdl-rank--3{background:linear-gradient(135deg,#8fa1f6,#b6a8ff); color:#fff}
main.main .area.cdl .swiper_banner .img{width:30px; height:30px; object-fit:contain}
main.main .area.cdl .swiper_banner .cdl-top-ico{width:42px; height:42px; border-radius:12px; background:#f4f6fb; display:flex; align-items:center; justify-content:center}
main.main .area.cdl .swiper_banner .cdl-chip{align-self:flex-start; margin-bottom:8px; max-width:100%; overflow:hidden; text-overflow:ellipsis}
main.main .area.cdl .swiper_banner .tit{width:100%; height:auto; min-height:4.35em; margin:0; padding:0; font-size:14.5px; font-weight:600; line-height:1.45; color:var(--cdl-ink); word-break:keep-all; overflow-wrap:anywhere; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; transition:color .2s}
main.main .area.cdl .swiper_banner a:hover .tit{color:var(--cdl-brand)}
main.main .area.cdl .cdl-top-foot{margin-top:auto; padding-top:14px; display:flex; align-items:center; justify-content:space-between; gap:8px; border-top:1px dashed var(--cdl-line)}
main.main .area.cdl .cdl-top-foot .cdl-pages{font-size:12.5px; color:var(--cdl-ink-4); white-space:nowrap}
main.main .area.cdl .cdl-top-foot .cdl-pages i{margin-right:3px}
main.main .area.cdl .swiper_banner .price{display:inline-block; position:relative; padding-right:15px; text-align:right; font-size:16px; font-weight:800; color:var(--cdl-ink); letter-spacing:-.02em; white-space:nowrap}
main.main .area.cdl .swiper_banner .price:after{content:'원'; position:absolute; right:0; bottom:1px; font-size:13px; font-weight:600; color:var(--cdl-ink-2)}
main.main .area.cdl .cdl-sec--top .cdl-head{padding-right:112px}
main.main .area.cdl .swiper_banner{margin-top:-68px; padding-top:68px}
main.main .area.cdl .swiper_banner .swiper-button-prev,main.main .area.cdl .swiper_banner .swiper-button-next{top:14px; margin-top:0; width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid var(--cdl-line); box-shadow:0 6px 18px -10px rgba(30,41,90,.4); color:var(--cdl-ink); transition:opacity .2s,color .2s,box-shadow .2s,border-color .2s}
main.main .area.cdl .swiper_banner .swiper-button-prev{left:auto; right:58px}
main.main .area.cdl .swiper_banner .swiper-button-next{right:6px}
main.main .area.cdl .swiper_banner .swiper-button-prev:hover,main.main .area.cdl .swiper_banner .swiper-button-next:hover{color:var(--cdl-brand); box-shadow:0 10px 26px -10px rgba(79,107,237,.6)}
main.main .area.cdl .swiper_banner .swiper-button-prev::after,main.main .area.cdl .swiper_banner .swiper-button-next::after{font-size:14px; font-weight:900}
main.main .area.cdl .swiper_banner .swiper-button-disabled{opacity:.4; pointer-events:none}
main.main .area.cdl .swiper_banner:not(.swiper-initialized) .swiper-button-prev,main.main .area.cdl .swiper_banner:not(.swiper-initialized) .swiper-button-next{display:none}
/* 스켈레톤 (데이터 도착 전) */
main.main .area.cdl .cdl-skel{background:linear-gradient(90deg,#f1f4fa 25%,#f8f9fd 50%,#f1f4fa 75%) 0 0/200% 100%; animation:cdlShimmer 1.4s linear infinite}
main.main .area.cdl .swiper_banner .card.cdl-skel{box-shadow:none}
@keyframes cdlShimmer{to{background-position:-200% 0}}

/* ---------- 6. 하단 링크 행 (main 바깥) ---------- */
.cdl-footnav{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; max-width:75rem; margin:56px auto 0 !important; padding:0 20px 36px; font-family:"Pretendard Variable",Pretendard,"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; letter-spacing:-.01em}
.cdl-footnav a{display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 16px; border-radius:999px; border:1px solid #e6eaf5; background:#fff; color:#475569; font-size:14px; font-weight:600; line-height:1; text-decoration:none; box-shadow:0 1px 2px rgba(15,23,42,.04); transition:color .2s,border-color .2s,box-shadow .2s,transform .25s cubic-bezier(.2,.7,.2,1)}
.cdl-footnav a i{font-size:14px; color:#94a3b8; transition:color .2s}
.cdl-footnav a:hover{color:#4f6bed; border-color:rgba(79,107,237,.35); box-shadow:0 8px 20px -12px rgba(79,107,237,.55); transform:translateY(-1px)}
.cdl-footnav a:hover i{color:#4f6bed}
.cdl-footnav a:focus-visible{outline:3px solid rgba(79,107,237,.38); outline-offset:2px}

/* ---------- 태블릿 ---------- */
@media (max-width:1024px){
  main.main .area.cdl{padding:64px 20px 8px}
  main.main .area.cdl .link{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------- 모바일 ---------- */
@media (max-width:640px){
  main.main .area.cdl{width:100%; padding:40px 16px 4px}
  main.main .area.cdl .cdl-sec + .cdl-sec,main.main .area.cdl .adv + .cdl-sec{margin-top:48px}
  .cdl .cdl-head{margin-bottom:14px; align-items:flex-end}
  main.main .area.cdl .cdl-title{font-size:21px; margin-top:8px}
  .cdl .cdl-sub{font-size:13px}
  main.main .area.cdl .cdl-more{height:32px; padding:0 11px; font-size:12.5px}
  main.main .area.cdl .cdl-card,main.main .area.cdl .link2{border-radius:18px}

  main.main .area.cdl .link{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; min-height:340px}
  main.main .area.cdl .link .cdl-cat{flex-direction:row; align-items:center; gap:11px; min-height:62px; padding:10px 12px; border-radius:16px}
  main.main .area.cdl .link .cdl-cat i{flex:0 0 38px; width:38px; height:38px; border-radius:12px; font-size:17px}
  main.main .area.cdl .link .cdl-cat i + span{font-size:13.5px; min-width:0}
  main.main .area.cdl .link .cdl-cat small{display:none}
  main.main .area.cdl .link .cdl-cat .cdl-cat-go{display:none}
  main.main .area.cdl .link .cdl-cat:hover{transform:none}

  main.main .area.cdl #list2{grid-template-columns:minmax(0,1fr); gap:0}
  main.main .area.cdl #list2 > .cdl-col + .cdl-col{margin-top:0}
  main.main .area.cdl #list2 .board1 .cdl-card{border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom:0; box-shadow:none}
  main.main .area.cdl #list2 .board2 .cdl-card{border-top-left-radius:0; border-top-right-radius:0; border-top:1px solid var(--cdl-line-2)}
  main.main .area.cdl #list2 .board2 .cdl-card::before{content:none}
  main.main .area.cdl .main_board .card-body{min-height:0; padding:4px 6px}
  main.main .area.cdl #list2 .board1 .card-body,main.main .area.cdl #list2 .board2 .card-body{min-height:560px}
  main.main .area.cdl .cdl-doc a{gap:12px; padding:10px 8px}
  main.main .area.cdl .cdl-doc-ico{flex-basis:36px; width:36px; height:36px; border-radius:11px}
  main.main .area.cdl .main_board .cdl-doc-ico img{width:20px; height:20px}
  main.main .area.cdl .cdl-doc-tit{font-size:14px}
  main.main .area.cdl .cdl-meta{font-size:12px; gap:6px}

  main.main .area.cdl .link2{display:flex; flex-wrap:wrap; gap:8px; padding:14px; min-height:0}
  main.main .area.cdl .link2 a{display:inline-flex; height:38px; padding:0 13px; font-size:13px}
  main.main .area.cdl .link2 a:hover{transform:none}

  main.main .area.cdl .cdl-news-grid{grid-template-columns:minmax(0,1fr); gap:12px}
  main.main .area.cdl .cdl-news-card{min-height:0}
  main.main .area.cdl .cdl-promos{grid-template-rows:none; grid-template-columns:minmax(0,1fr); gap:10px}
  main.main .area.cdl .down a.cdl-promo{min-height:84px; padding:16px; border-radius:18px; margin-top:0 !important}
  main.main .area.cdl .cdl-promo-ico{flex-basis:44px; width:44px; height:44px; border-radius:14px; font-size:19px}
  main.main .area.cdl .cdl-promo-txt strong{font-size:15.5px}
  main.main .area.cdl .down a.cdl-promo:hover{transform:none}

  main.main .area.cdl .cdl-sec--top .cdl-head{padding-right:0}
  main.main .area.cdl .swiper_banner{margin:-6px -16px 0; padding:6px 16px 22px}
  main.main .area.cdl .swiper_banner:not(.swiper-initialized) .swiper-slide{width:calc((100% - 12px) / 1.6); margin-right:12px}
  main.main .area.cdl .swiper_banner .card{min-height:222px; border-radius:18px}
  main.main .area.cdl .swiper_banner .card:hover{transform:none}
  main.main .area.cdl .swiper_banner .card-body > a{padding:16px 16px 14px}
  main.main .area.cdl .swiper_banner .swiper-button-prev,main.main .area.cdl .swiper_banner .swiper-button-next{display:none}

  .cdl-footnav{margin-top:40px !important; gap:6px; padding:0 16px calc(28px + env(safe-area-inset-bottom))}
  .cdl-footnav a{height:36px; padding:0 13px; font-size:13px}
}
@media (hover:none){
  main.main .area.cdl .link .cdl-cat:hover,main.main .area.cdl .swiper_banner .card:hover,main.main .area.cdl .down a.cdl-promo:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  main.main .area.cdl *,.cdl-footnav a{transition:none !important; animation:none !important}
}
main.main .area.cdl .link .cdl-cat .cdl-cat-go,main.main .area.cdl .link .cdl-cat:hover .cdl-cat-go{width:auto; height:auto; border-radius:0; background:none; font-size:14px}