/* ============================================================
   Buy Invest - 투자정보 게시판 (invest-economy.html 전용)
   피그마 fileKey gM7jxD18kXjbYSW0K2ap8m / nodeId 1:2675 "Buy Invest - 경제/전략"
   ============================================================ */

/* ===== 페이지 타이틀 ===== */
.board-title-wrap{
  padding-top:40px;
  border-bottom:1px solid #212E4E;
}
.board-title{
  text-align:center;
  font-size:35px;
  font-weight:700;
  color:var(--text);
  padding-bottom:40px;
}

/* ===== 소개 문구 + 일러스트 ===== */
.board-intro{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  padding:50px 0 40px;
}
.board-intro-text h2{
  font-size:clamp(24px,3.2vw,38px);
  font-weight:400;
  line-height:1.35;
  color:var(--text);
}
.board-intro-text h2 b{
  font-weight:700;
  color:var(--blue);
}
.board-intro-text p{
  margin-top:24px;
  font-size:17px;
  line-height:1.7;
  color:var(--text);
}
.board-intro-image{
  flex:none;
  width:510px;
  max-width:44%;
}
.board-intro-image img{
  width:100%;
  height:auto;
  border-radius:8px;
}

/* ===== 서브 탭 (이 게시판 전용 boxed 스타일) =====
   common.css의 .sub-tabs는 다른 서브페이지(언더라인 탭)용 공통 스타일이라 건드리지 않고,
   이 페이지에서만 라이브 사이트(투자정보 게시판)의 boxed 탭 형태로 재정의한다. */
.sub-tabs{
  border-bottom:none;
  margin-bottom:40px;
  background:transparent;
}
.sub-tabs ul{
  display:flex;
  justify-content:flex-start;
  gap:0;
  flex-wrap:nowrap;
  position:relative;
}
.sub-tabs ul::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:var(--blue);
}
.sub-tabs li{
  position:relative;
  flex:1;
  margin-right:-1px;
  border:2px solid #FAFAFA;
  border-bottom:none;
  background:#FAFAFA;
}
.sub-tabs li.selected{
  border-color:var(--blue);
  background:#fff;
  z-index:1;
}
.sub-tabs a{
  display:block;
  padding:0;
  height:50px;
  line-height:50px;
  text-align:center;
  font-size:16px;
  font-weight:500;
  color:var(--text-sub);
  border-bottom:none;
}
.sub-tabs li.selected a{
  font-weight:700;
  color:var(--blue);
}
.sub-tabs li.disabled{
  cursor:not-allowed;
}
.sub-tabs li.disabled span{
  display:block;
  height:50px;
  line-height:50px;
  text-align:center;
  font-size:16px;
  font-weight:500;
  color:#BBBBBB;
}

/* ===== 게시판 테이블 ===== */
.board-table{
  margin-top:40px;
  font-size:15px;
}
.board-table thead th{
  background:#F0F1F2;
  color:var(--text);
  font-weight:400;
  text-align:center;
  padding:16px;
  border-top:1px solid var(--text-sub);
  border-bottom:1px solid var(--text-sub);
}
.board-table tbody td{
  padding:20px 16px;
  border-bottom:1px solid var(--border-light);
  vertical-align:middle;
}
.board-table tbody td.num{
  width:95px;
  text-align:center;
  color:var(--text);
}
.board-table tbody td.title a{
  display:block;
  font-size:15px;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.board-table tbody td.title a:hover{
  color:var(--blue);
  text-decoration:underline;
}
.board-table tbody tr:hover{
  background:#FAFAFA;
}

/* ===== 페이지네이션 ===== */
.board-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:30px;
  flex-wrap:wrap;
}
.board-pagination a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:45px;
  height:40px;
  padding:0 12px;
  border-radius:3px;
  background:#EEEEEE;
  color:var(--text);
  font-size:15px;
}
.board-pagination a:hover:not(.active){
  background:#E5E5E5;
}
.board-pagination a.active{
  background:var(--blue);
  color:#fff;
  font-weight:700;
}

/* ===== Tablet ===== */
@media (max-width:1024px){
  .board-intro-image{width:400px;}
}

/* ===== Mobile ===== */
@media (max-width:768px){
  .board-title{font-size:26px;padding-bottom:24px;}
  .board-title-wrap{padding-top:24px;}

  /* 탭 4개가 flex:1로 폭을 나눠 가지는데, "디지털 리서치"가 16px로는 탭 폭(~84px)
     안에 안 들어가 "디지털 리..."로 잘렸다 — 모바일에서만 글자 크기를 줄인다. */
  .sub-tabs a{font-size:12px;height:44px;line-height:44px;}
  .sub-tabs li.disabled span{font-size:12px;height:44px;line-height:44px;}

  .board-intro{
    flex-direction:column-reverse;
    align-items:stretch;
    gap:24px;
    padding:32px 0 24px;
  }
  .board-intro-image{width:100%;max-width:100%;}
  .board-intro-text p{margin-top:16px;font-size:14px;}

  .board-table{font-size:13px;}
  .board-table thead th.num,
  .board-table tbody td.num{
    width:44px;
    padding-left:6px;
    padding-right:6px;
    font-size:12px;
  }
  .board-table tbody td{padding:14px 8px;}
  .board-table tbody td.title a{white-space:normal;word-break:keep-all;}

  .board-pagination a{min-width:36px;height:36px;font-size:13px;padding:0 8px;}
}

/* ===== 게시물 상세보기 (invest-post.html) ===== */
.board-view{border-top:2px solid var(--text);margin-top:24px;}
.board-view-title{
  font-size:21px;font-weight:700;color:var(--text);
  padding:22px 4px;border-bottom:1px solid var(--border-light);
  word-break:keep-all;
}
.board-view-body{padding:30px 4px;font-size:15px;line-height:1.9;color:var(--text);}
.board-view-body p{margin-bottom:18px;}
.board-view-body p:last-child{margin-bottom:0;}
.board-view-body .post-heading{
  display:block;
  margin-bottom:6px;
  font-size:16px;
  font-weight:700;
  color:var(--blue);
}
.board-view-nav{border-top:1px solid var(--border-light);}
.board-view-nav-row{
  display:flex;align-items:center;gap:14px;
  padding:14px 4px;font-size:14px;
  border-bottom:1px solid var(--border-light);
}
.board-view-nav-row a{color:var(--text-sub);}
.board-view-nav-row a:hover{color:var(--blue);}
.board-view-nav-row .nav-label{flex:0 0 auto;width:64px;font-weight:700;color:var(--text);}
.board-view-list{margin:28px 4px 0;}

@media (max-width:768px){
  .board-view-title{font-size:17px;padding:18px 0;}
  .board-view-body{font-size:14px;padding:22px 0;}
  .board-view-nav-row .nav-label{width:56px;font-size:13px;}
  .board-view-nav-row a{font-size:13px;}
}