/* =========================
css/style.css
========================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:'Pretendard', sans-serif;
  background:#f3f4f6;
  color:#222;
  line-height:1.8;
}

/* 배너 */
.top-banner,
.bottom-banner{
  width:100%;
  padding:15px;
  background:#ddd;
}

.banner-box{
  max-width:1400px;
  margin:auto;
  height:90px;
  background:white;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:bold;
}

/* 제목 */
.site-title{
  text-align:center;
  padding:30px 20px;
}

.site-title h1{
  font-size:50px;
}

.site-title h1 a{
  text-decoration:none;
  color:#222;
}

.site-title p{
  color:#666;
}

/* 레이아웃 */
.layout{
  max-width:1400px;
  margin:auto;
  display:grid;
  grid-template-columns:260px 1fr 260px;
  gap:25px;
  padding:20px;
  align-items:start;
}

/* ============================================================
   왼쪽 요약
============================================================ */
.left-summary{
  position:sticky;
  top:20px;
  align-self:flex-start;
}

.summary-box{
  background:white;
  padding:20px;
  border-radius:14px;
  box-shadow:0 0 10px rgba(0,0,0,0.06);
}

.summary-box h3{
  margin-bottom:15px;
}

/* 기본: 아직 안 읽은 섹션 (거의 안 보임) */
.summary-item{
  padding:12px;
  margin-bottom:12px;
  border-left:4px solid #ddd;
  opacity:0.08;
  transition:opacity 0.4s, border-color 0.4s, background 0.4s;
  cursor:pointer;
}

/* 현재 화면에 보이는 섹션 (활성) */
.summary-item.active{
  opacity:1;
  border-color:#2563eb;
  background:#eff6ff;
}

/* 이미 지나친 섹션 (흐리게) */
.summary-item.summary-past{
  opacity:0.25;
  border-color:#bbb;
  background:transparent;
}

/* 아직 안 나온 섹션 (거의 투명) */
.summary-item.summary-hidden{
  opacity:0.08;
  border-color:#ddd;
  background:transparent;
}

/* ============================================================
   중앙 본문
============================================================ */
.content{
  min-width:0;
}

.post{
  background:white;
  padding:40px;
  border-radius:18px;
  box-shadow:0 0 10px rgba(0,0,0,0.05);
}

.post-title{
  font-size:38px;
  margin-bottom:25px;
}

.title-image{
  width:100%;
  border-radius:15px;
  margin-bottom:35px;
}

.content-section{
  margin-bottom:120px;
}

.content-section h3{
  font-size:28px;
  margin-bottom:20px;
}

.content-section p{
  margin-bottom:20px;
  font-size:18px;
}

/* 표 */
.info-table{
  width:100%;
  border-collapse:collapse;
  margin:30px 0;
}

.info-table th,
.info-table td{
  border:1px solid #ddd;
  padding:14px;
  text-align:center;
}

.info-table th{
  background:#f5f5f5;
}

/* 그래프 */
.fake-chart{
  margin-top:40px;
}

.bar{
  height:45px;
  margin-bottom:18px;
  color:white;
  display:flex;
  align-items:center;
  padding-left:15px;
  border-radius:8px;
}

.bar1{ width:90%; background:#2563eb; }
.bar2{ width:70%; background:#10b981; }
.bar3{ width:60%; background:#f59e0b; }

/* ============================================================
   오른쪽 사이드바
============================================================ */
.right-sidebar{
  position:sticky;
  top:20px;
  align-self:flex-start;
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:20px;
  /* 스크롤바 숨김 */
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.right-sidebar::-webkit-scrollbar{
  display:none;
}

.side-box{
  background:white;
  padding:20px;
  border-radius:14px;
  box-shadow:0 0 10px rgba(0,0,0,0.05);
}

.side-box h3{
  margin-bottom:15px;
  font-size:16px;
}

.side-box ul{
  list-style:none;
}

.side-box li{
  margin-bottom:10px;
  font-size:14px;
  line-height:1.5;
}

.side-box a{
  text-decoration:none;
  color:#333;
  transition:color 0.2s;
}

.side-box a:hover{
  color:#2563eb;
}

/* ============================================================
   카테고리
============================================================ */
.cat-list{
  list-style:none;
}

.cat-item{
  margin-bottom:8px;
}

.cat-title{
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  font-weight:600;
  font-size:14px;
  padding:6px 0;
  color:#333;
  transition:color 0.2s;
}

.cat-title:hover{
  color:#2563eb;
}

.cat-count{
  background:#e5e7eb;
  color:#555;
  border-radius:10px;
  padding:1px 7px;
  font-size:12px;
  font-weight:400;
}

.cat-arrow{
  margin-left:auto;
  font-size:11px;
  color:#999;
  transition:transform 0.2s;
}

.cat-posts{
  list-style:none;
  margin-top:6px;
  padding-left:10px;
  border-left:2px solid #e5e7eb;
}

.cat-posts li{
  margin-bottom:8px;
}

.cat-posts a{
  font-size:13px;
  color:#555;
  text-decoration:none;
  line-height:1.5;
}

.cat-posts a:hover{
  color:#2563eb;
}

/* ============================================================
   반응형
============================================================ */
@media(max-width:1100px){

  .layout{
    grid-template-columns:1fr;
  }

  .left-summary{
    display:none;
  }

  .right-sidebar{
    position:static;
    max-height:none;
    overflow-y:visible;
  }

}

/* ============================================================
   모바일 본문요약 플로팅 버튼 (1100px 이하에서만 표시)
============================================================ */
#mobile-summary-btn,
#mobile-summary-overlay,
#mobile-summary-panel{
  display:none;
}

@media(max-width:1100px){

  /* 플로팅 버튼 */
  #mobile-summary-btn{
    display:flex;
    align-items:center;
    gap:6px;
    position:fixed;
    top:16px;
    right:16px;
    z-index:1000;
    background:#2563eb;
    color:white;
    border:none;
    border-radius:22px;
    padding:9px 16px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    box-shadow:0 4px 14px rgba(37,99,235,0.35);
    transition:background 0.2s, transform 0.15s;
    font-family:'Pretendard', sans-serif;
  }

  #mobile-summary-btn:active{
    transform:scale(0.95);
    background:#1d4ed8;
  }

  /* 오버레이 배경 */
  #mobile-summary-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.35);
    z-index:1100;
    transition:opacity 0.25s;
  }

  #mobile-summary-overlay.open{
    display:block;
  }

  /* 슬라이드 패널 */
  #mobile-summary-panel{
    display:block;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:82%;
    max-width:320px;
    background:white;
    z-index:1200;
    overflow-y:auto;
    padding:24px 20px;
    box-shadow:-4px 0 20px rgba(0,0,0,0.15);
    transform:translateX(100%);
    transition:transform 0.28s cubic-bezier(0.4,0,0.2,1);
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  #mobile-summary-panel::-webkit-scrollbar{
    display:none;
  }

  #mobile-summary-panel.open{
    transform:translateX(0);
  }

  /* 패널 헤더 */
  #mobile-summary-panel .panel-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
    padding-bottom:14px;
    border-bottom:2px solid #e5e7eb;
  }

  #mobile-summary-panel .panel-header h3{
    font-size:17px;
    font-weight:700;
    color:#222;
  }

  #mobile-summary-panel .panel-close{
    background:none;
    border:none;
    font-size:22px;
    color:#888;
    cursor:pointer;
    line-height:1;
    padding:2px 4px;
  }

  /* 패널 내 요약 아이템 */
  #mobile-summary-panel .summary-item{
    opacity:1 !important;
    border-left:4px solid #ddd;
    background:transparent;
    padding:12px;
    margin-bottom:10px;
    border-radius:6px;
    cursor:pointer;
    font-size:14px;
    line-height:1.6;
    color:#333;
    transition:border-color 0.2s, background 0.2s;
  }

  #mobile-summary-panel .summary-item:active{
    background:#eff6ff;
    border-color:#2563eb;
  }

  #mobile-summary-panel .summary-item.active{
    border-color:#2563eb;
    background:#eff6ff;
    color:#1d4ed8;
  }

  #mobile-summary-panel .summary-item.summary-past{
    border-color:#bbb;
    color:#999;
  }

}