@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; }

.notes { margin-top:24px; }
.notes .solution-content{ display:grid; grid-template-columns:repeat(3, minmax(384px, 1fr)); column-gap:16px; row-gap:32px; }
.notes .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px } /* 모바일에서만 사용됨(아래 media에서 1열로 변경) */

.notes .tcard{
  position:relative; background:#fff; border:1px solid var(--note-line);
  border-radius:var(--note-radius); box-shadow:8px 8px 32px -10px #0000001A;
  padding:38px; min-height:220px; display:flex; flex-direction:column;
  transition:transform .18s ease;
}
.notes .tcard:hover{ transform:translateY(-2px); background-color:#1C64FF; color:#fff; }
.notes .tcard:hover .t-title{ color:#fff;}
.notes .tcard:hover .t-excerpt{ color:#BFD3FF;}
.notes .tcard:hover .badge{ background-color:#FFF;color:#1C64FF;}
.notes .tcard:hover .who{ color:#FFF;}
.notes .tcard:hover .when{ color:#FFF;}

.notes .badges{ display:flex; gap:8px; margin-bottom:16px }
.notes .badge{ display:inline-flex; align-items:center; height:32px; padding:0 20px; border-radius:3px; font-size:14px; background:#1C64FF; color:#fff; }
.notes .t-title{ font-size:20px; line-height:1.45; color:var(--note-title); font-weight:700; letter-spacing:-.2px;
  display: -webkit-box;
  -webkit-box-orient: vertical; /* 텍스트 방향 */
  -webkit-line-clamp: 2; /* 최대 표시할 줄 수 */
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
.notes .t-excerpt{
  margin-top:18px; color:var(--note-body); font-size:16px; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  max-width:85vw;
}
.notes .t-excerpt.no-tag{
  -webkit-line-clamp:5!important;
}
.notes .t-tags { margin-top:16px; display:block; white-space:nowrap; overflow:hidden; position:relative; flex-shrink:0;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 90%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.notes .t-tags .tag { background-color:#E4E4E4; color:#222; border-radius:8px; padding:5px 8px; display:inline-block; line-height:1.5; font-size:14px;}

/* 메타(2줄 레이아웃) */
.notes .meta{
  display:grid; grid-template-columns:1fr; grid-template-rows:auto auto;
  column-gap:10px; row-gap:4px; align-items:center; margin-top:auto; padding-top:24px;
}
.notes .who{ grid-row:1; font-size:14px; line-height:1.2; color:#0f172a; font-weight:700 }
.notes .when{ grid-row:2; font-size:14px; line-height:1.2; color:var(--note-meta) }

/* Swiper 컨테이너(데스크톱만 활성) */
.notes .swiper{ overflow:visible; position:relative }
.notes .swiper-wrapper{ align-items:stretch; padding:6px 0 32px 0 } /* 패딩 1회만 */
.notes .swiper-slide{ height:auto }                                  /* 카드 높이 자동 */
.notes .solution-content::before { width:0}
.notes .solution-content::before{ left:0 }
.notes .solution-content::after{ right:0; transform:scaleX(-1) }

/* 카드 전체 클릭 지원 */
.notes .tcard .card-link{ position:absolute; inset:0; z-index:10; text-indent:-9999px }

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

.content-container { padding-bottom:160px }
.content-container .download-item { background-color:#F3F5F9; padding:12px 24px; height:60px; border-bottom:1px solid #E8ECF8 }
.content-container .download-item a { display:inline-block; text-decoration:underline; }
.content-container .download-item img { display:inline-block; vertical-align:bottom }
.content-container .content { padding:72px 32px; border-bottom:1px solid #222 }
.content-container .bottom-btn { margin-top:40px; text-align:center }
.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: 24px }
  .tool-container .search-wrap input{ width: calc(100vw - 40px) }

  .notes .solution-content{ grid-template-columns:minmax(260px, 1fr); padding: 0 16px; }
  .notes .tcard {
    padding:24px 16px;
  }
  .notes .badges{ display:flex; gap:8px; margin:0 0 24px -16px; }
  .notes .badge { border-radius:24px; border-top-left-radius:0; border-bottom-left-radius:0;}
  .notes .t-tags { margin-top:16px; display:flex; column-gap:8px; overflow-x:hidden; position:relative;}
  .notes .t-tags .tag { background-color:#E4E4E4; color:#222; border-radius:8px; padding:5px 8px; flex-shrink:0; line-height:1.5; font-size:14px;}

  .pagination-container { margin-bottom:64px }

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

  .notes .solution-content::before,
  .notes .solution-content::after{
    background:none;
  }

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

  .content-container .content { padding:40px 16px; border-bottom:1px solid #222;}
  .content-container .press-link { margin-top:32px;}
  .content-container .bottom-btn { padding:0 16px; margin-top:24px;}
  .content-container .bottom-btn button  { width:100%;}
}