/* ===== 변수 & 기본 ===== */
.makb{
  --beige:#f8f6f2; --white:#fff; --yellow:#ffbc00;
  --ink:#111; --gray:#888; --gray2:#aaa; --red:#df1e1e;
  --line:rgba(0,0,0,.04); --line2:rgba(0,0,0,.05);
  /* --f-disp:"KBFGDisplayB","KBFGDisplay", "KBFGDisplay-fb","Pretendard",sans-serif; */
  /* --f-text:"KBFGTextM","KBFGText", "KBFGText-fb","Pretendard",sans-serif; */
  /* --f-pre:"Pretendard","Apple SD Gothic Neo",sans-serif; */
  
    --f-disp:"KBFGDisplay", "KBFGDisplay-fb","Pretendard","Apple SD Gothic Neo",sans-serif;
  --f-text:"KBFGText", "KBFGText-fb","Pretendard","Apple SD Gothic Neo",sans-serif;
  --f-pre:"Pretendard","Apple SD Gothic Neo",sans-serif;
  color:var(--ink); font-family:var(--f-pre);
  -webkit-text-size-adjust:100%;
}
.makb *{ box-sizing:border-box; margin:0; }
.makb a{ text-decoration:none; color:inherit; }
.makb img{ display:block; max-width:100%; }
.makb button{ border:0;}
/* .makb button{ border:0; background:none; cursor:pointer; font:inherit; } */

/* ===== 공통 inner (요청사양) ===== */
.makb .__inner{ margin:0 auto; max-width:138rem; padding:0 4rem; }
@media (max-width:1800px){ .makb .__inner{ max-width:138rem; padding:0 4rem; } }
@media (max-width:1300px){ .makb .__inner{ padding:0 3rem; } }
@media (max-width:768px){  .makb .__inner{ padding:0 2rem; } }

/* ===== 섹션 배경/여백 ===== */
.makb-latest { background:var(--beige); padding:15rem 0 6rem 0;}
.makb-keyword{ background:var(--white); padding:6rem 0 0; }
.makb-popular{ background:var(--white); padding:6rem 0; }

/* ===== 공통 요소 ===== */
.makb-head{ font-family:var(--f-disp); font-weight:700; font-size:2.4rem; line-height:3.4rem; }
.makb-head--sm{ font-size:2.2rem; line-height:2.8rem; }
.makb-tag{ display:inline-block; align-items:center; background:var(--yellow); color:var(--ink);
      font-family: pretendard-600; font-weight:600; font-size:1.5rem; line-height:1.8rem;
  padding:.3rem .7rem; border-radius:.5rem; }
.makb-tag--sm{ font-size:1.3rem; padding:.3rem .8rem; }
.makb-date{ font-family:var(--f-pre); font-weight:500; font-size:1.6rem; line-height:2.4rem; color:var(--gray2); }
.makb-date--sm{ font-size:1.4rem; line-height:1.7rem; }
.makb-divider{ display:block; width:100%; height:1px; background:var(--ink); opacity:.05; }
.makb-divider--news{ background:var(--line2); opacity:1; }

/* ===== 1. 최신 콘텐츠 ===== */
.makb-latest .makb-head{ margin-bottom:2rem; }
.makb-latest__row{ display:flex; gap:5rem; align-items:stretch; }
.makb-feature{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:3rem; }
.makb-feature:hover .makb-feature__title{text-decoration: underline;}
.makb-feature__thumb{ width:100%; aspect-ratio:700/364; border:1px solid var(--line);
  border-radius:1.6rem; overflow:hidden; }
.makb-feature__thumb img{ width:100%; height:100%; object-fit:cover; }
.makb-feature__body{ display:flex; flex-direction:column; gap:1.3rem; }
.makb-feature__meta{ display:flex; align-items:center; justify-content:space-between; }
.makb-feature__title{ overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1; -webkit-box-orient: vertical; font-family:var(--f-text); font-weight:500; font-size:2.8rem; line-height:4rem; }
.makb-feature__desc{ overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical;font-family: pretendard-500; font-weight:500; font-size:1.8rem; line-height:2.3rem; color:var(--gray); }

.makb-sidelist{ width:45rem; flex-shrink:0; background:var(--white); border-radius:1.6rem;
  padding:3rem; display:flex; flex-direction:column; gap:2.4rem; }
.makb-sidelist__item{ display:flex; flex-direction:column; gap:1.2rem; }
.makb-sidelist__item:hover .makb-sidelist__title{text-decoration: underline;}
.makb-sidelist__title{ font-family:var(--f-text); font-weight:500; font-size:1.8rem; line-height:2.4rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.makb-sidelist__desc{     overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;font-family: pretendard-500; font-weight:500; font-size:1.6rem; line-height:2.2rem; color:var(--gray); }

/* ===== 2. 키워드 + M-able ===== */
.makb-keyword__box{ display:flex; gap:5rem; align-items:center; background:var(--beige); border-radius:1.6rem; }
.makb-keyword__cats{ flex:1 1 0; min-width:0; padding:3rem; display:flex; flex-direction:column; gap:1.2rem; }
.makb-keyword__cats .makb-head--sm{ margin-bottom:.8rem; }
.makb-chips{ position:relative; display:flex; gap:.8rem; overflow-x:auto; scrollbar-width:none; cursor:grab; user-select:none;
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 88%,transparent 100%); }
.makb-chips.is-grabbing{ cursor:grabbing; }
.makb-chips::-webkit-scrollbar{ display:none; }
.makb-chip{ flex:0 0 auto; white-space:nowrap; background:var(--white); color:var(--ink); text-decoration:none; cursor:pointer;
  font-family:var(--f-pre); font-weight:500; font-size:1.6rem; line-height:1.8rem;
  padding:1.4rem 1.8rem; border-radius:9.9rem; transition:background .15s; }
.makb-chip:hover{ background:var(--yellow); }

.makb-mable{ width:45rem; flex-shrink:0; align-self:stretch; background:var(--yellow);
  border-radius:1.6rem; padding:2.8rem 3rem; display:flex; align-items:center; gap:2.4rem; }
.makb-mable__txt{ flex:1 1 0; min-width:0; font-family:var(--f-disp); font-weight:700; font-size:2.4rem; line-height:3.4rem; }
.makb-mable__icon{ width:8rem; height:8rem; flex-shrink:0; border-radius:1.2rem;
  box-shadow:1rem 2rem 2rem 0 rgba(0,0,0,.1); object-fit:cover; }

/* ===== 3. 인기 콘텐츠 + 뉴스 ===== */
.makb-popular__row{ display:flex; gap:5rem; align-items:stretch; }
.makb-popular__main{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:2rem; }
.makb-grid{ display:grid; grid-template-columns:repeat(3,1fr); column-gap:2.5rem; row-gap:4rem; }
.makb-card{ display:flex; flex-direction:column; gap:.8rem; }
.makb-card:hover .makb-card__title{text-decoration: underline;}
.makb-card__thumb{ position:relative; width:100%; aspect-ratio:250/149; border:1px solid var(--line);
  border-radius:1.2rem; overflow:hidden; margin-bottom:.4rem; }
.makb-card__thumb img{ width:100%; height:100%; object-fit:cover; }
.makb-badge-n{ position:absolute; top:.9rem; left:.9rem; z-index:1; width:2.3rem; height:2.3rem;
  display:flex; align-items:center; justify-content:center; background:var(--red); color:#fff;
  font-family:var(--f-pre); font-weight:900; font-size:1.2rem; border-radius:9.9rem; }
.makb-card__title{ font-family:var(--f-text); font-weight:500; font-size:1.8rem; line-height:2.6rem;
  height:5.2rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.makb-more{ position:relative;display:flex; align-items:center; justify-content:center; gap:.9rem; width:100%;
  background:var(--beige); border-radius:.8rem; padding:1.5rem;
  font-family:var(--f-text); font-weight:500; font-size:1.6rem; line-height:2.6rem; }
.makb-more::before {
	border-radius:.8rem;
	content: "";
	position: absolute;
	inset: 0;
	background: #000;
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}
.makb-more:hover::before {
	opacity: 0.01;
}  
.makb-more--white{ background:var(--white); gap:.8rem; }
.makb-arrow{ width:.6rem; height:1rem; }

.makb-news{ width:45rem; flex-shrink:0; display:flex; flex-direction:column; gap:2rem; }
.makb-news__box{ flex:1 1 auto; background:var(--beige); border-radius:1.6rem; padding:3rem;
  display:flex; flex-direction:column; justify-content:space-between; gap:2.5rem; }
.makb-news__list{ display:flex; flex-direction:column; gap:2.5rem; }
.makb-news__item{ display:flex; flex-direction:column; gap:.8rem; }
.makb-news__item:hover .makb-news__title{text-decoration: underline;}
.makb-news__title{ font-family:var(--f-text); font-weight:500; font-size:1.7rem; line-height:2.6rem;
  height:5.2rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.makb-news__box .makb-date--sm{ line-height:2.2rem; }

/* 모바일 하단 고정 다운로드 바 (기본 숨김) */
.makb-mdownload{ display:none; }

/* ============================================================
   반응형 (max-width 기준) — PC → MO 자연스러운 축소
   ============================================================ */

/* 넓은 태블릿: 간격/사이드폭 축소 */
@media (max-width:1300px){
	.makb-latest {
		padding: 12rem 0 6rem 0;
	}
  .makb-latest__row,
  .makb-popular__row{ gap:4rem; }
  .makb-keyword__box{ gap:0; }
  .makb-sidelist,
  .makb-news,
  .makb-mable{ width:40rem; }
}

/* 태블릿: 2단 → 세로 스택 */
@media (max-width:1024px){
  .makb-latest__row,
  .makb-popular__row{ flex-direction:column; gap:4rem; }
  .makb-sidelist,
  .makb-news{ width:100%; }
  .makb-keyword__box{ flex-direction:column; align-items:stretch; gap:2.4rem; padding:3rem; }
  .makb-keyword__cats{ padding:0; }
  .makb-mable{ width:100%; }
  .makb-grid{ column-gap:2rem; }
  
  .makb-feature__title {
		-webkit-line-clamp: 2;
	}
	.makb-sidelist__title{
		overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1; -webkit-box-orient: vertical; 
	}
		.makb-news__title{height:auto;}
}

/* 모바일 */
@media (max-width:768px){
	.makb-latest{ padding:9.4rem 0 0 0; }
  .makb-popular{ padding:4rem 0 0 0; }
  .makb-keyword{ background:var(--beige); padding:4rem 0; }

  /* 헤딩/폰트 축소 */
  .makb-head{ font-size:1.8rem; line-height:2.4rem; }
  .makb-head--sm{ font-size:1.8rem; line-height:2.4rem; }
  .makb-tag,.makb-tag--sm{ font-size:1.2rem; line-height:1.6rem; padding:.2rem .6rem; border-radius:.4rem; }
  .makb-date{ font-size:1.2rem; line-height:1.4rem; }
  .makb-date--sm{ font-size:1.2rem; }

  /* 최신 */
  .makb-latest__row{ gap:3rem; }
  .makb-feature{ gap:1rem; }
  .makb-feature__thumb{ border-radius:.8rem; }
  .makb-feature__title{ font-size:1.8rem; line-height:2.6rem; }
  .makb-feature__desc{ font-size:1.4rem; line-height:2rem; }
  .makb-sidelist{ padding:2.6rem 2rem; gap:1.6rem; border-radius:1.6rem; }
  .makb-sidelist__item{ gap:.8rem; }
  .makb-sidelist__title{ font-size:1.5rem; line-height:2.2rem; white-space:normal; }
  .makb-sidelist__desc{ font-size:1.4rem; line-height:2rem; }

  /* 키워드 (풀블리드 베이지) */
  .makb-keyword__box{ background:transparent; border-radius:0; padding:0; gap:2.4rem; }
  .makb-chip{ font-weight:400; font-size:1.5rem; line-height:1.5rem; padding:1.2rem 1.4rem; }
  .makb-mable{ padding:2rem; border-radius:.8rem; }
  .makb-mable__txt{ font-size:1.8rem; line-height:2.6rem; }
  .makb-mable__icon{ width:5.2rem; height:5.2rem; box-shadow:.75rem 1.5rem 1.5rem 0 rgba(0,0,0,.1); }

  /* 인기 2단 그리드 */
  .makb-popular__row{ gap:4rem; }
  .makb-grid{ grid-template-columns:repeat(2,1fr); column-gap:1.5rem; row-gap:2rem; }
  .makb-card__thumb{ aspect-ratio:160/83; border-radius:.8rem; }
  .makb-card__title{ font-size:1.5rem; line-height:2.2rem; height:4.4rem; }
  .makb-badge-n{ display:none; }               /* 모바일은 N 배지 없음 */
  .makb-more{ border-radius:.6rem; font-size:1.4rem; line-height:2.2rem; }
  .makb-more::before {
	border-radius:.6rem;
	}

  /* 뉴스 (풀블리드 베이지 섹션처럼) */
  .makb-news{ width:calc(100% + 4rem); margin:0 -2rem; background:var(--beige); padding:4rem 2rem 5.6rem 2rem; gap:2rem; }
  .makb-news__box{ background:transparent; border-radius:0; padding:0; gap:2rem; }
  .makb-news__list{ gap:2rem; }
  .makb-news__title{ font-size:1.5rem; line-height:2.2rem; }
  .makb-more--white{ border-radius:.6rem; }

  /* 하단 고정 다운로드 바 */
  .makb-mdownload{ display:block; position:fixed; left:0; right:0; bottom:0; z-index:50;
    padding:2rem 1.6rem; background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 60%); }
  .makb-mdownload__pill{ display:flex; align-items:center; justify-content:space-between;
    background:var(--yellow); border-radius:9.9rem; padding:1rem 2.6rem;
    font-family:var(--f-disp); font-weight:700; font-size:1.5rem; line-height:2.4rem; }
  .makb-mdownload__pill img{ width:3.2rem; height:3.2rem; border-radius:0rem;
    box-shadow:.75rem 1.5rem 1.5rem 0 rgba(0,0,0,.1); }
}

/* 아주 좁은 화면: 인기 1단 */
@media (max-width:400px){
  /* .makb-grid{ grid-template-columns:1fr; } */
  /* .makb-card__thumb{ aspect-ratio:250/149; } */
}