.kbdetail {
  box-sizing: border-box;
  position: relative;
  background: #fff;
  border-radius: 1rem;
  padding: 19rem 0 10rem 0;
  font-family: pretendard-300, sans-serif;
  color: #111;
}
.kbdetail *, .kbdetail *::before, .kbdetail *::after { box-sizing: border-box; }

/* 본문 중앙 정렬 (grid 아님) */
.kbdetail__body { position: relative; }
.kbdetail__inner {
  max-width: 88rem;
  margin: 0 auto;
  padding: 0 4rem;
  width: 100%;
}
/* 좌/우 플로팅 : 중앙 88rem 본문 바깥에 absolute 배치, 내부 콘텐츠만 sticky */
.kbdetail__aside {
  position: absolute;
  top: 0;
  bottom: 0;              /* 본문(body) 높이만큼 차지 → 내부 sticky가 스크롤 따라옴 */
}
.kbdetail__aside--left  { right: calc(50% + 44rem + 3rem); width: 7.4rem; }  /* 본문 왼쪽 */
.kbdetail__aside--right {
    left: calc(50% + 44rem + 3rem);
    width: 26rem;
}   /* 본문 오른쪽 */
.kbdetail__aside--left  .kbdetail__fbtns,
.kbdetail__aside--right .kbdetail__tocnav {
  position: sticky;
  top: 12rem;             /* 요청 11 : 스크롤 따라 고정 */
}

/* 좌측 플로팅 버튼 */
.kbdetail__fbtns { display: flex; flex-direction: column; gap: 1rem; }
.kbdetail__fbtn {
	position:relative;
  width: 7.4rem; height: 7.4rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  background: #f8f6f2; border: 0; border-radius: 2rem; cursor: pointer;
}
.kbdetail__fbtn img { width: 2.4rem; height: 2.4rem; display: block; }
.kbdetail__fbtn span { font-size: 1.4rem; line-height: 1.6rem; color: #888; font-weight: 500; }
.kbdetail__fbtn.view{cursor: initial;}
.kbdetail__fbtn.view::before{content:none!important}
.kbdetail__fbtn::before {
	border-radius: 2rem;
	content: "";
	position: absolute;
	inset: 0;
	background: #000;
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}
.kbdetail__fbtn:hover::before {
	opacity: 0.05;
}  

/* 우측 목차요약 nav */
.kbdetail__tocnav { display: flex; flex-direction: column; gap: 1rem; }
.kbdetail__tocnav-item { display: flex; align-items: center; gap: 1.4rem; cursor: pointer; text-decoration: none; }
.kbdetail__tocnav-bar { width: .1rem; height: 2.2rem; background: transparent; flex-shrink: 0; }
.kbdetail__tocnav-txt {
  font-family: "KBFGText", "KBFGText-fb", sans-serif; font-weight: 500;
  font-size: 1.5rem; line-height: 2.2rem; color: #aaa;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kbdetail__tocnav-txt:hover{text-decoration: underline;}
.kbdetail__tocnav-item.is-active .kbdetail__tocnav-bar { background: #ffbc00; }
.kbdetail__tocnav-item.is-active .kbdetail__tocnav-txt { font-family: "KBFGDisplay", "KBFGDisplay-fb", sans-serif; font-weight: 700; color: #111; }


/* ===== 헤더 ===== */
.kbdetail__head { display: flex; flex-direction: column; align-items: center; gap: 2rem; margin-bottom: 6rem; }
.kbdetail__cate {
  padding: .5rem 1.2rem; background: #ffbc00; border-radius: .6rem;
  font-family: pretendard-600;font-weight: 600; font-size: 1.8rem; line-height: 2.6rem; color: #111;
}
.kbdetail__title { margin: 0; font-family: "KBFGText", "KBFGText-fb", sans-serif; font-weight: 500; font-size: 5rem; line-height: 7.2rem; text-align: center; color: #111; }
.kbdetail__subtitle { margin: 0; font-weight: 500; font-size: 2rem; line-height: 2.6rem; color: #888; text-align: center; }
.kbdetail__meta { display: flex; align-items: center; gap: 2rem; }
.kbdetail__meta-item { display: inline-flex; align-items: center; gap: .9rem; font-weight: 500; font-size: 1.6rem; line-height: 2.2rem; color: #aaa; }
.kbdetail__meta-item img { width: 1.8rem; height: 1.8rem; display: block; }
.kbdetail__meta-div { width: .1rem; height: 1.2rem; background: #d9d9d9; }

/* 공유하기 pill (모든 공유버튼 공통) */
.kbdetail__share {
	position:relative;
  display: inline-flex; align-items: center; gap: .8rem; align-self: center;
  padding: 1.2rem 2.4rem; border: 0; border-radius: 9.9rem; cursor: pointer;
  font-weight: 500; font-size: 1.7rem; line-height: 2.6rem; color: #111;
}
.kbdetail__share img { width: 1.4rem; height: 1.4rem; display: block; }
.kbdetail__share::before {
	border-radius: 9.9rem;
	content: "";
	position: absolute;
	inset: 0;
	background: #000;
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}
.kbdetail__share:hover::before {
	opacity: 0.05;
} 

/* ===== 히어로 ===== */
.kbdetail__hero {
  width: 100%; aspect-ratio: 800 / 440; margin-bottom: 6rem;
  border: .1rem solid rgba(0,0,0,.04); border-radius: 2.6rem; overflow: hidden;
}
.kbdetail__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== 목차 카드 ===== */
.kbdetail__tocbox { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 5rem; }
.kbdetail__toc-label {
    margin: 0;
    font-family: "KBFGDisplay", "KBFGDisplay-fb", sans-serif;
    font-weight: 700!important;
    font-size: 1.8rem!important;
    line-height: 2.6rem!important;
    text-align: left;
}
.kbdetail__toc {
  list-style: none; margin: 0; padding: 2rem 1.8rem;
  border: .1rem solid #eee; border-radius: 1.6rem; background: #fff;
  box-shadow: 0 .2rem 1rem rgba(0,0,0,.05);
  display: flex; flex-direction: column; gap: 1.4rem;
}
.kbdetail__toc li:not(:last-child) { border-bottom: .1rem solid #eee; padding-bottom: 1.4rem; }
.kbdetail__toc a { display: flex; align-items: center; gap: 1.4rem; cursor: pointer; text-decoration: none; color: #111; }
.kbdetail__toc-num {text-decoration: none !important; width: 2.6rem; text-align: center; font-family: "KBFGDisplay", "KBFGDisplay-fb", sans-serif; font-weight: 700; font-size: 1.6rem; line-height: 2.6rem; flex-shrink: 0; }
.kbdetail__toc a > span:last-child { font-family: "KBFGText", "KBFGText-fb", sans-serif; font-weight: 500; font-size: 1.6rem; line-height: 2.6rem; }
.kbdetail__toc a:hover span{text-decoration: underline;}

/* 태그 */
.kbdetail__tags { display: flex; flex-wrap: wrap; gap: .8rem; margin: 5rem 0 0 0; }
.kbdetail__tag { display: inline-flex; align-items: center; padding: 1.4rem 2rem; background: #fff; border: .1rem solid #ededed; border-radius: 9.9rem; font-weight: 400; font-size: 1.6rem; line-height: 1.8rem; color: #111; text-decoration: none; cursor: pointer; }
.kbdetail__tag:hover{border: .1rem solid #111;}
/* 하단 공유하기 여백 */
.kbdetail__shareInner {
    display: flex;
    margin: 5rem 0 10rem 0;
    justify-content: center;
}

/* M-able 배너 */
.kbdetail__mable { display: flex; align-items: center; gap: 2.4rem; background: #ffbc00; border-radius: 1.6rem; padding: 2.6rem 3rem; }
.kbdetail__mable-app { width: 7rem; height: 7rem; box-shadow: 1rem 2rem 2rem rgba(0,0,0,.1); flex-shrink: 0; object-fit: cover; }
.kbdetail__mable-txt { flex: 1 1 0; margin: 0; font-family: "KBFGDisplay", "KBFGDisplay-fb", sans-serif; font-weight: 700; font-size: 2.6rem; line-height: 3.4rem; color: #111; }
.kbdetail__mable-arrow { display: inline-flex; padding: 2rem; background: rgba(255,255,255,.25); border-radius: 9.9rem; flex-shrink: 0; }
.kbdetail__mable-arrow img { width: 2rem; height: 2rem; display: block; }

/* ===== 모바일 하단바 / 토스트 ===== */
.kbdetail__mobilebar {display: none; }
.kbdetail__toast {
  position: fixed; left: 50%; bottom: 4rem; transform: translate(-50%, 1rem);
  padding: 1.4rem 2.4rem; background: rgba(17,17,17,.9); color: #fff;
  font-size: 1.5rem; line-height: 1; border-radius: 9.9rem; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 100;
}
.kbdetail__toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* ===== 상단 sticky / 목차 ===== */
.kbdMocupInner{display:none;}

/* 3개 컨텐츠: 기본 숨김 (display는 기존 미디어쿼리가 담당, 여기선 opacity만) */
.kbdetail__aside{
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
/* 조건 충족 시 노출 */
.kbdetail__aside.is-toc-visible{
  opacity: 1;
  pointer-events: auto;
}


/* ===== 반응형 ===== */
@media (max-width: 1600px) {
	.kbdetail__aside--left {
		right: calc(50% + 40rem + 4rem);
		width: 7.4rem;
	}
	.kbdetail__aside--right {
		left: calc(50% + 40rem + 4rem);
		width: 24rem;
	}
	
	
	.kbdetail__head {
		gap: 1.6rem;
	}
	.kbdetail__title {
		font-size: 4rem;
		line-height: 6.2rem;
	}
}
@media (max-width: 1440px) {
  .kbdetail__body { display: block; max-width: none; }
  .kbdetail__aside { display: none; }
}
@media (max-width: 1300px) {
	.kbdetail {
		padding: 16rem 0 10rem 0;
	}
  .kbdetail__inner { padding: 0 3rem; }
}
@media (max-width: 768px) {
  .kbdetail { padding: 9.4rem 0 4rem 0; }
  .kbdetail__inner { padding: 0 2rem; }

  .kbdetail__head { gap: 1.8rem; margin-bottom: 4rem; }
  .kbdetail__cate { padding: .5rem .8rem; border-radius: .4rem; font-size: 1.4rem; line-height: 1.8rem; }
  .kbdetail__title { font-size: 2.2rem; line-height: 3.6rem; }
  .kbdetail__subtitle { font-size: 1.5rem; line-height: 2.4rem; }
  .kbdetail__meta { gap: 1.4rem; }
  .kbdetail__meta-item { font-size: 1.2rem; gap: .7rem; }
  .kbdetail__meta-item img { width: 1.4rem; height: 1.4rem; }
  .kbdetail__meta-div { height: 1rem; }
  .kbdetail__share { padding: 1.2rem 1.8rem; font-size: 1.4rem; gap: .72rem; }
  .kbdetail__share img { width: 1rem; height: 1rem; }

  .kbdetail__hero { aspect-ratio: 335 / 174; border-radius: 1.6rem; margin-bottom: 4rem; }

  .kbdetail__tocbox { margin-bottom: 3rem; }
  .kbdetail__toc-label { font-size: 1.4rem!important; line-height: 1.8rem!important; }
  .kbdetail__toc { padding: 1.4rem 1.6rem; border-radius: .8rem; gap: 1rem; }
  .kbdetail__toc li:not(:last-child) { padding-bottom: 1rem; }
  .kbdetail__toc-num { width: 1.2rem; font-family: "KBFGText", "KBFGText-fb", sans-serif; font-weight: 500; font-size: 1.3rem; line-height: 2rem; }
  .kbdetail__toc a > span:last-child { font-size: 1.3rem; line-height: 2rem; }

  .kbdetail__tags { gap: .5rem; margin:4rem 0 0 0; }
  .kbdetail__tag { padding: 1.2rem 1.6rem; font-size: 1.3rem; line-height: 1.4rem; }
  .kbdetail__shareInner { margin: 4rem 0 5rem 0; }

  .kbdetail__mable { padding: 1.6rem 2rem; border-radius: 1rem; gap: 2rem; }
  .kbdetail__mable-app { width: 4.4rem; height: 4.4rem; }
  .kbdetail__mable-txt { font-size: 1.5rem; line-height: 2.2rem; }
  .kbdetail__mable-arrow { padding: 0; background: none; }
  .kbdetail__mable-arrow img { width: 2rem; height: 2rem; }

  .kbdetail__card { flex-basis: 33.5rem; gap: 1rem; }
  .kbdetail__card-thumb { aspect-ratio: 335 / 174; border-radius: .8rem; }

  /* 모바일 하단 고정 바 */
  .kbdetail__mobilebar.is-visible .kbdetail__mobilebar-stat{
	   /* z-index:5; */
	  opacity: 1;
	  display: flex;
    /* pointer-events: auto; */
  }
	 .kbdetail__mobilebar {
		  z-index:5;
	  opacity: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 1.2rem;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 2rem 1.6rem;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
		flex-direction: column;
	}
  .kbdetail__mobilebar-stat { 
  opacity: 0;
  display:none;
  /* display: flex;  */
  gap: 1.8rem; padding: 1rem 1.8rem; background: rgba(248,246,242,.85); backdrop-filter: blur(2.5px); border-radius: 2rem; }
  .kbdetail__mobilebar-stat span.kbdetail__share::before{content:none!important;}
  .kbdetail__mobilebar-stat span { display: inline-flex; align-items: center; gap: .7rem; padding: 0; font-weight: 500; font-size: 1.3rem; color: #888; }
  .kbdetail__mobilebar-stat img { width: 1.8rem; height: 1.8rem; }
  .kbdetail__mobilebar-dl { min-width: 30rem;flex: 1 1 0; display: flex; align-items: center; justify-content: space-between; padding: 1rem 2.6rem; background: #ffbc00; border-radius: 9.9rem; text-decoration: none; font-family: "KBFGDisplay", "KBFGDisplay-fb", sans-serif; font-weight: 700; font-size: 1.5rem; line-height: 2.4rem; color: #111; }
  .kbdetail__mobilebar-dl img { width: 3.2rem; height: 3.2rem; box-shadow: .75rem 1.5rem 1.5rem rgba(0,0,0,.1); }

  .kbdetail__toast { bottom: 10rem; }
	
	
	
	/* ===== 상단 sticky / 목차 ===== */
	.kbdMocupInner{
		z-index: 2;
		top: 6.4rem;
		position: fixed; 
		left: 0; right: 0;
		display: none;  
		padding: 1rem 1rem 0 1rem;
	}
	.kbdMocupInner.down_mocup{
		top:0rem;
	}
	.kbdMocupInner.is-toc-visible{
		display: block;
		position: fixed;
		opacity: 1;
		pointer-events: auto;
	}

	.kbdMocupBox {
		gap: 0.6rem;
		display: flex;
		width: 100%;
		flex-direction: column;
		position: relative;
	}
	.kbdMocupBox.show .kbdMocupList {
		top: 6rem;
		left: 0;
		width: 100%;
		position: absolute;
		display: block;
	}
	.kbdMocupBtn {
		display: block;
		cursor: pointer;
		padding: 1.6rem 3rem 1.6rem 1.6rem;
		width: 100%;
		border-radius: 0.8rem;
		border: 1px solid rgba(0, 0, 0, 0.10);
		background: rgba(255, 255, 255, 0.95);
		box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.05);
		backdrop-filter: blur(2.5px);
	}
	.kbdMocupBtn p{
		display: block;
		display: -webkit-box;
		overflow: hidden;
		white-space: normal;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-align: left;
		color: #111;
		font-family: "KBFGDisplay", "KBFGDisplay-fb";
		font-size: 1.4rem;
		font-style: normal;
		font-weight: 700;
		line-height: 2rem;
	}
	.kbdMocupBtn span {
		transform: translateY(-50%);
		top: 50%;
		right: 1.6rem;
		position: absolute;
		display: inline-block;
		width: 1rem;
		height: 1rem;
		background-image: url(/public/img/kb/sub/mocup_arrow.webp);
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 100%;
	}
	.kbdMocupList{
		display:none;
		padding: 1.6rem;
		border-radius: 0.8rem;
		border: 1px solid rgba(0, 0, 0, 0.10);
		background: rgba(255, 255, 255, 0.95);
		box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.15);
		backdrop-filter: blur(2.5px);
	}
	.kbdMocupList ul {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	.kbdMocupList ul li:nth-child(1){
		padding:0 0 1.6rem 0;
		border-top:none;
	}
	.kbdMocupList ul li:last-child{
		padding:1.6rem 0 0 0;
	}
	.kbdMocupList ul li {
		padding:1.6rem 0;
		border-top:1px solid #eee;
		text-align: left;
		position: relative;
		width: 100%;
		display: block;
		display: -webkit-box;
		overflow: hidden;
		white-space: normal;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		color: #999;
		font-family: "KBFGText", "KBFGText-fb";
		font-size: 1.4rem;
		font-style: normal;
		font-weight: 500;
		line-height: 2rem;
	}
	.kbdMocupList ul li.is-active{
		color: #111;
		font-family: "KBFGDisplay", "KBFGDisplay-fb";
		font-weight: 700;
	}
	
}
@media (max-width: 450px) {
	.kbdetail__mobilebar-dl {
		min-width: 100%;
	}
}


/*-----------------------------------------
# 관련글 추천
-------------------------------------------*/
.kbdetail__rel { display: flex; flex-direction: column; gap: 3rem;margin: 10rem 0 0 0; }
.kbdetail__rel-head { display: flex; align-items: center; gap: 2rem; }
.kbdetail__rel-title { flex: 1 1 0; margin: 0; font-family: "KBFGDisplay", "KBFGDisplay-fb", sans-serif; font-weight: 700; font-size: 2.4rem; line-height: 4.2rem; }
.kbdetail__rel-nav { display: flex; gap: .8rem; }
.kbdetail__arw { display: inline-flex; align-items: center; justify-content: center; padding: 1.5rem 1.7rem 1.5rem 1.8rem; background: #f8f6f2; border: 0; border-radius: 9.9rem; cursor: pointer; transition: background .15s, opacity .15s; }
.kbdetail__arw img { width: .7rem; height: 1.2rem; display: block; }
.kbdetail__arw--next img { transform: rotate(180deg); }
.kbdetail__arw:hover:not(:disabled) { background: #efeae2; }
.kbdetail__arw:disabled { opacity: .35; cursor: default; }

.nxtrelslidebox {width: 100%;position: relative;}
.nxtrelslidebox .swiper {overflow: inherit;}

.kbdetail__card.news{padding: 2.6rem;border-radius: 1.2rem;border: 1px solid #EEE;background: linear-gradient(0deg, #FFF 0%, #FFF 100%), #F8F6F2;}
.kbdetail__card { flex: 0 0 38.4rem; scroll-snap-align: start; display: flex; flex-direction: column; gap: 1.4rem; text-decoration: none; color: #111; }
.kbdetail__card-thumb { position: relative; display: block; width: 100%; aspect-ratio: 384 / 229; border: .1rem solid rgba(0,0,0,.04); border-radius: 1.2rem; overflow: hidden; background: #f6f6f6; }
.kbdetail__card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kbdetail__new { position: absolute; top: 1.3rem; left: 1.3rem; padding: .8rem 1.1rem; background: #df1e1e; border-radius: 9.9rem; font-family: "Pretendard", sans-serif; font-weight: 900; font-size: 1.4rem; line-height: 1.2rem; color: #fff; font-style: normal; }
.kbdetail__card-label { align-self: flex-start; padding: .3rem .8rem; background: #ffbc00; border-radius: .5rem; font-weight: 600; font-size: 1.3rem; line-height: 1.8rem; }
.kbdetail__card-title {
	overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;font-family: "KBFGText", "KBFGText-fb", sans-serif; font-weight: 500; font-size: 1.8rem; line-height: 2.6rem; }
.kbdetail__card-subtitle {
    margin: -0.8rem 0 0 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;color: #888;font-size: 1.6rem;font-style: normal;font-weight: 500;line-height: 2.4rem;
}
.kbdetail__card-date { font-weight: 600; font-size: 1.4rem; line-height: 1.7rem; color: #aaa; }

.sBtnGroup {width: 9.2rem;position: absolute;z-index: 10;right: 0px;top: -5rem;transform: inherit;}
.sBtnGroup .swiper-button-prev{left: 0px;width: 4.2rem;height: 4.2rem;border-radius:50%;background: #F8F6F2;}
.sBtnGroup .swiper-button-prev:after {content: '';display:inline-block;width: 7px;height: 12px;background-image: url(../img/kb/sub/rel_prev.webp);background-size: 7px;background-repeat: no-repeat;background-position: center center;}
.sBtnGroup .swiper-button-prev.swiper-button-disabled{opacity:1;}
.sBtnGroup .swiper-button-prev.swiper-button-disabled:after{opacity: .35;}
.sBtnGroup .swiper-button-next{right: 0rem;width: 4.2rem;height: 4.2rem;border-radius:50%;background: #F8F6F2;}
.sBtnGroup .swiper-button-next:after {content: '';display:inline-block;width: 7px;height: 12px;background-image: url(../img/kb/sub/rel_next.webp);background-size: 7px;background-repeat: no-repeat;background-position: center center;}
.sBtnGroup .swiper-button-next.swiper-button-disabled{opacity:1;}
.sBtnGroup .swiper-button-next.swiper-button-disabled:after{opacity: .35;}
@media (max-width: 768px) {
	.kbdetail__rel-title {font-size: 1.8rem;line-height: 4.2rem;}
	.sBtnGroup {top: -3.4rem;width: 9rem;}
	.kbdetail__rel {gap: 1.4rem;margin: 4rem 0 0 0; }
	.kbdetail__card {gap: 1rem;}
	.kbdetail__card-thumb {position: relative;border-radius: 0.8rem;}
	.kbdetail__card-label {padding: .2rem .6rem;border-radius: .4rem;font-size: 1.2rem;line-height: 1.6rem;}
	.kbdetail__card-title {font-size: 1.6rem;line-height: 2.6rem;}
	.kbdetail__card-date {font-size: 1.2rem;line-height: 1.4rem;}

	.kbdetail__card.news {padding: 2rem 1.6rem;border-radius: 0.8rem;}
	.kbdetail__card-subtitle {margin: -0.4rem 0 0 0;font-size: 1.4rem;line-height: 2rem;}
}