@charset "UTF-8";

/* 타이틀 */
.title-container .page-title { font-size:64px; font-weight:700; text-align:center; line-height:1; margin-top:175px; }
.title-container .page-desc { font-size:18px; text-align:center; line-height:1; margin-top:42px }
.title-container .page-desc br { display:none }

/* tool */
.tool-container { margin-top:116px }
.tool-container .wrap { display:flex; align-items:center }
.tool-container .category-wrap{
  flex: 1 1 0;
  min-width: 0;
  padding-right: 16px;
  overflow: hidden;
}
.tool-container .category-wrap .btn { border-radius:15px; border:1px solid #222; background-color:#fff; color:#222; padding:4px 15px; height:unset; font-size:14px; cursor: pointer }
.tool-container .category-wrap .btn.selected { background-color:#222; color:#fff }
.tool-container .search-wrap{
  position:relative;
  flex: 0 0 auto;
}
.tool-container .search-wrap input { border-radius: 30px; height:46px; border:none; font-size:16px; padding:0 56px 0 24px; background-color:#EEF0F4; }
.tool-container .search-wrap button {
  position:absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border: none;
  cursor:pointer;
  background:url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10.5968" cy="10.5968" r="8.09676" stroke="%232C2E2F" stroke-width="3"/><rect x="17.2852" y="15.8497" width="7.08148" height="2.03055" rx="1.01528" transform="rotate(45 17.2852 15.8497)" fill="%232C2E2F" stroke="%232C2E2F"/></svg>') no-repeat center;
}
.tool-container .search-wrap input::placeholder { color:#AAB3C5 }
.tool-container .search-wrap input:focus { outline:none }

/* [ADD] 카테고리 스와이퍼 */
/* cate-swiper는 부모폭 안에서만 동작 */
.cate-swiper{
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;        /* 이미 있으나 명시 재확인 */
  padding-inline: 24px;    /* 오른쪽 페이드 공간 */
  padding-left: 0;
  position: relative;
  isolation: isolate;
}
.cate-swiper .swiper-wrapper{ align-items: center; }
.cate-swiper .swiper-slide{
  width: auto !important;
  flex: 0 0 auto;
  margin-right: 8px;
}
.cate-swiper .btn{ white-space: nowrap; }

/* [MOD] 오른쪽 페이드만 */
.cate-fade{
  position:absolute; top:0; bottom:0; width:36px; pointer-events:none;
  opacity:0; transition:opacity .2s ease;
  background:linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
  right:0;
}
.cate-swiper .swiper-wrapper{ position: relative; z-index: 1; }
.cate-fade{ z-index: 2; }     /* 페이드는 슬라이드 위 */
body.sub .cate-fade{ background:linear-gradient(to right, rgba(255,255,255,0), #fff); }

/* 스크롤 가능할 때만 표시, 맨 끝일 때는 숨김 */
.cate-swiper.has-overflow .cate-fade{ opacity:.95; }
.cate-swiper.is-end .cate-fade{ opacity:0; }

/* list */
.list-container .wrap { margin-top:24px; border-top:3px solid #222222;}
.list-container .list-item { display:flex; position:relative; align-items:center; border-bottom:1px solid #E8ECF8;}
.list-container .list-item a { display:contents;}
.list-container .list-item .thumbnail { flex-basis:10%; min-width:210px; padding:16px 24px;}
.list-container .list-item .info { flex:1;display:flex;width:100%;position:relative;}
.list-container .list-item .category { flex-basis:10%; min-width: 120px; text-align:center;}
.list-container .list-item .category .chip { border-radius: 15px; border: none; background-color: #C8D1E0; color: #fff; padding: 6px 15px; height: unset; font-size: 14px; font-weight: 400 }
.list-container .list-item .title { flex:1;width:100px;white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.list-container .list-item .title img { display:inline-block }
.list-container .list-item .date { flex-basis:10%; min-width:160px; text-align:center }
.list-container .list-item .mobile-btn { display:none }
.list-container .list-item.pinned { background-color:#EFF4FF; font-weight:700 }
.list-container .list-item.pinned .category .chip { background-color: #1C64FF; color: #fff }

.read .content-container .wrap { margin-top:124px; border-top:3px solid #222222 }
.read .list-item { display:flex; position:relative; height:61px; align-items:center; border-bottom:1px solid #E8ECF8 }
.read .list-item a { display:contents; }
.read .list-item .category { flex-basis:10%; min-width: 180px; text-align:center }
.read .list-item .category .chip { border-radius: 15px; border: none; background-color: #C8D1E0; color: #fff; padding: 6px 15px; height: unset; font-size: 14px; font-weight: 400 }
.read .list-item .title { flex-basis:80%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.read .list-item .title img { display:inline-block }
.read .list-item .date { flex-basis:10%; min-width:160px; text-align:center; margin-top:8px }
.read .list-item .mobile-btn { display:none }
.read .list-item.pinned { background-color:#EFF4FF; font-weight:700 }

.read .content-container { padding-bottom:160px }
.read .content-container .content { padding:72px 32px; border-bottom:1px solid #222; width:100%;overflow-x:auto;}
.read .content-container .bottom-btn { margin-top:40px; text-align:center }
.read .content-container .bottom-btn button { border-radius:999px; padding:24px 72px; border:none; background-color:#222; color:#fff; font-size:16px; font-weight:700; cursor:pointer }

/* ========== 모바일(<=768px) ========== */
@media (max-width:768px){
  .header { display:none }
  .sub-header { display:block }

  .content-section .hero { display:none }
  .content-section .mds-submenu { display:none }
  .content-section .wrap, .content-section .caption {
    width: 100%;
  }
  .title-container .page-title { display:none }
  .title-container .page-desc { font-size:16px; line-height: 1.55;padding:0 16px;}
  .title-container .page-desc br { display:block }

  .tool-container { margin-top: 22px }
  .tool-container .wrap { width:min(1184px,92vw); flex-direction:column; align-items: stretch; }
  .tool-container .search-wrap{
    width: 100%;
  }
  /* 카테고리는 내용으로 세로 확장만, 가로는 부모폭 고정 */
  .tool-container .category-wrap{
    flex: 0 0 auto;              /* column 레이아웃에서 높이만 갖고, 폭은 100% */
    min-width: 0;                 /* 안전장치 유지 */
    overflow: hidden;             /* swiper 내부에서만 스크롤 */
  }
  .tool-container .category-wrap .btn { border-radius:999px; padding:10px 15px; }
  /* 스와이퍼가 최소 높이를 가진 상태로 렌더(버튼 높이에 맞춤) */
  .cate-swiper{
    padding-inline: 16px;
    padding-left: 0;
    min-height: 46px;             /* 버튼과 동일 높이로 보장 */
    max-width: 100%;
  }
  .tool-container .search-wrap{ margin-top: 12px }
  .tool-container .search-wrap input{ width: calc(100vw - 40px) }

  .list-container .wrap { margin-top:32px; width: 100% }
  .list-container .list-item { height:auto; min-height: 162px; flex-direction:column; padding: 22px 16px }
  .list-container .list-item .thumbnail { margin-top:0; overflow:hidden; padding:0;width:100%;}
  .list-container .list-item .thumbnail img {width:100%;}
  .list-container .list-item .info { flex-direction: column;}
  .list-container .list-item .category { min-width:unset; align-self:flex-start; margin-top:24px; }
  .list-container .list-item .title { flex-basis:unset; align-self:flex-start; margin-top:16px; font-size:16px; line-height:1.55; white-space: unset; padding-right:56px; position:relative;width:unset; }
  .list-container .list-item .date { min-width:unset; align-self:flex-start; color: #999999; margin-top:8px }
  .list-container .list-item .mobile-btn { display:block; position:absolute; top: calc(50% - 16px); right: 16px }

  /* .cate-swiper{ padding-inline: 16px; } */
  .cate-nav{ display:none; } /* 모바일은 드래그/스와이프 중심 */

  .read .content-container .wrap {
    margin-top: 28px;
  }
  .read .content-container { padding-bottom:80px; }
  .read .list-item { height:auto; flex-direction:column; padding: 22px 16px }
  .read .list-item .category { min-width:unset; align-self:flex-start }
  .read .list-item .title { flex-basis:unset; align-self:flex-start; margin-top:16px; font-size:16px; line-height:1.55; white-space: unset; }
  .read .list-item .date { min-width:unset; align-self:flex-start; color: #999999 }

  .read .content-container .content { padding:40px 16px;}
  .read .content-container .bottom-btn { padding:0 16px; margin-top:24px  }
  .read .content-container .bottom-btn button  { width:100%; }
}