@charset "utf-8";
/* ============================================================
   KOBIGS – sub.css
   서브페이지 : LNB / 브레드크럼 / 게시판 목록 · 상세
   ============================================================ */

/* ------------------------------------------------------------
   1. 서브 레이아웃
   ------------------------------------------------------------ */
.sub-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--sp-11);
  padding-block: var(--sp-8) var(--sp-12);
  align-items: start;
}

/* ------------------------------------------------------------
   2. LNB (사이드 메뉴)
   ------------------------------------------------------------ */
.lnb { position: sticky; top: calc(var(--header-h) + 24px); }
.lnb_title {
  display: flex;
  align-items: flex-end;
  min-height: 118px;
  padding: var(--sp-5);
  border-radius: var(--krds-radius-lg);
  background: linear-gradient(135deg, #3B5BF0 0%, #0e33c1 100%);
  color: #fff;
  font-size: var(--fs-h4);
  font-weight: 700;
  position: relative;
  overflow: hidden;
}
.lnb_title::before {
  content: '';
  position: absolute;
  right: -35px;
  top: 50px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,.28), rgba(255,255,255,0) 70%);
  animation: circle_move 3.5s steps(20) infinite;
  transition:all 0.2s;
}
@keyframes circle_move {
  0% { transform:translateY(0);}
  50% { transform:translateY(-10%);}
  100% { transform:translateY(0);}
}
.lnb_title::after {
  content: '';
  position: absolute;
  left: -50px;
  top: -50px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-image: radial-gradient(rgba(255,255,255,.45) 1.2px, transparent 1.3px);
  background-size: 7px 7px;
}
.lnb_list { margin-top: var(--sp-4); border-top: 1px solid var(--krds-gray-20); }
.lnb_list > li { border-bottom: 1px solid var(--krds-gray-20); }
.lnb_link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-4) var(--sp-4);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--krds-gray-80);
  text-align: left;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.lnb_link .ico { font-size: 14px; color: var(--krds-gray-40); transition: transform var(--dur) var(--ease); }
.lnb_link:hover { background: var(--krds-gray-5); color: var(--krds-primary); text-decoration: none; }
.lnb_link[aria-current='page'],
.lnb_link.is-active {
  background: var(--krds-primary-bg);
  color: var(--krds-primary-hover);
  font-weight: 700;
}
.lnb_link[aria-current='page'] .ico,
.lnb_link.is-active .ico { color: var(--krds-primary-hover); }
.lnb_link[aria-expanded='true'] .ico { transform: rotate(90deg); }
.lnb_sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }
.lnb_sub > div { overflow: hidden; }
.lnb_sub.is-open { grid-template-rows: 1fr; }
.lnb_sub ul { padding: var(--sp-2) 0 var(--sp-3); background: var(--krds-gray-5); }
.lnb_sub a {
  display: block;
  padding: var(--sp-2) var(--sp-6);
  font-size: var(--fs-detail);
  color: var(--krds-gray-60);
}
.lnb_sub a:hover { color: var(--krds-primary); text-decoration: underline; }

/* ------------------------------------------------------------
   3. 콘텐츠 헤더
   ------------------------------------------------------------ */
.sub-content { min-width: 0; }
.sub-content_head { margin-bottom: var(--sp-7); }
.sub-content_title {
  margin-top: var(--sp-4);
  font-size: var(--fs-h2);
}
.sub-content_desc {
  margin-top: var(--sp-3);
  font-size: var(--fs-body);
  color: var(--krds-gray-60);
}

/* ------------------------------------------------------------
   4. 검색 · 필터 영역
   ------------------------------------------------------------ */
.board-filter {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}
.board-filter .krds-search { width: min(560px, 100%); }

/* ------------------------------------------------------------
   5. 게시판 목록
   ------------------------------------------------------------ */
.board-list .krds-table-wrap { max-width: 100%; overflow-x: auto; }
.board-list col.col-no    { width: 84px; }
.board-list col.col-file  { width: 120px; }
.board-list col.col-hit   { width: 110px; }
.board-list col.col-date  { width: 140px; }

.board-list .subject { display: flex; align-items: center; gap: var(--sp-2); }
.board-list .cate { color: var(--krds-primary); font-weight: 700; }
.board-list .file-cnt {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--krds-gray-60);
}
.board-list .file-cnt .ico { font-size: 16px; }

.board-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
  flex-wrap: wrap;
}
.board-total { font-size: var(--fs-detail); color: var(--krds-gray-60); }
.board-total b { color: var(--krds-primary); font-weight: 700; }
.board-foot .krds-pagination { margin-left: auto; }

/* 모바일 카드형 목록 */
.board-cards { display: none; }
.board-cards li + li { margin-top: var(--sp-3); }
.board-cards a {
  display: block;
  padding: var(--sp-4);
  border: 1px solid var(--krds-gray-20);
  border-radius: var(--krds-radius-md);
  background: #fff;
}
.board-cards a:hover { border-color: var(--krds-primary); text-decoration: none; }
.board-cards .tit {
  display: block;
  font-size: var(--fs-detail);
  font-weight: 600;
  color: var(--krds-gray-90);
  line-height: 1.5;
}
.board-cards .meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3);
  margin-top: var(--sp-2);
  font-size: var(--fs-caption);
  color: var(--krds-gray-60);
}

/* ------------------------------------------------------------
   6. 게시판 상세
   ------------------------------------------------------------ */
.board-view { border-top: 2px solid var(--krds-gray-80); }
.board-view_head { padding: var(--sp-6) var(--sp-4); border-bottom: 1px solid var(--krds-border); }
.board-view_title { font-size: var(--fs-h3); line-height: 1.4; }
.board-view_meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  margin-top: var(--sp-4);
  font-size: var(--fs-caption);
  color: var(--krds-gray-60);
}
.board-view_meta dl { display: flex; gap: var(--sp-2); }
.board-view_meta dt { font-weight: 600; color: var(--krds-gray-80); }

.board-view_file {
  padding: var(--sp-4);
  border-bottom: 1px solid var(--krds-border);
  background: var(--krds-gray-5);
}
.board-view_file h3 { font-size: var(--fs-detail); margin-bottom: var(--sp-2); }
.board-view_file li + li { margin-top: 6px; }
.board-view_file a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-detail);
  color: var(--krds-gray-70);
}
.board-view_file a:hover { color: var(--krds-primary); }
.board-view_file .size { color: var(--krds-gray-60); font-size: var(--fs-caption); }

.board-view_body {
  padding: var(--sp-8) var(--sp-4);
  border-bottom: 1px solid var(--krds-border);
  line-height: var(--lh-loose);
  color: var(--krds-gray-80);
}
.board-view_body > * + * { margin-top: var(--sp-5); }
.board-view_body h3 { font-size: var(--fs-h4); margin-top: var(--sp-8); }
.board-view_body ul { padding-left: var(--sp-5); list-style: disc; }
.board-view_body li { margin-top: var(--sp-2); }
.board-view_body figure { margin-top: var(--sp-6); }
.board-view_body figcaption {
  margin-top: var(--sp-2);
  font-size: var(--fs-caption);
  color: var(--krds-gray-60);
  text-align: center;
}

.board-nav { margin-top: var(--sp-6); border-top: 1px solid var(--krds-border); }
.board-nav > div {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--krds-border);
  font-size: var(--fs-detail);
}
.board-nav .dir {
  display: inline-flex; align-items: center; gap: 6px;
  flex: none; width: 100px;
  font-weight: 700; color: var(--krds-gray-80);
}
.board-nav a { color: var(--krds-gray-70); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-nav a:hover { color: var(--krds-primary); }

.board-btns {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}

/* ------------------------------------------------------------
   7. 빈 목록
   ------------------------------------------------------------ */
.board-empty {
  padding: var(--sp-11) var(--sp-4);
  text-align: center;
  color: var(--krds-gray-60);
  border-bottom: 1px solid var(--krds-border);
}

/* ------------------------------------------------------------
   8. 반응형
   ------------------------------------------------------------ */
@media (max-width: 1200px) {
  .sub-layout { grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-8); }
}

@media (max-width: 1024px) {
  /* 작은 화면에서는 사이드 메뉴 미표시 */
  .sub-layout { grid-template-columns: 1fr; gap: 0; padding-block: var(--sp-6) var(--sp-9); }
  .lnb { display: none; }
  .board-filter { grid-template-columns: 180px minmax(0, 1fr); }
  .board-filter .krds-search { width: 100%; }
}

@media (max-width: 720px) {
  .board-list .krds-table-wrap { display: none; }
  .board-cards { display: block; }
  .board-filter { grid-template-columns: 1fr; gap: var(--sp-3); }
  .board-foot { justify-content: center; }
  .board-foot .krds-pagination { margin-left: 0; width: 100%; }
  .board-total { width: 100%; text-align: center; }
}

@media (max-width: 600px) {
  .sub-content_head { margin-bottom: var(--sp-5); }
  .board-view_head { padding: var(--sp-4) 0; }
  .board-view_body { padding: var(--sp-6) 0; }
  .board-view_file { padding: var(--sp-3); }
  .board-nav > div { flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); padding: var(--sp-3) 0; }
  .board-nav .dir { width: auto; }
  .board-btns { flex-direction: column; }
  .board-btns .krds-btn { width: 100%; }
}

@media (max-width: 359px) {
  .krds-pagination_list { gap: 0; }
  .krds-pagination a, .krds-pagination button { min-width: 32px; height: 32px; font-size: var(--fs-caption); }
  .krds-pagination { gap: 4px; }
}