:root{
  --paper:#FAFAF9;
  --surface:#FFFFFF;
  --ink:#16181C;
  --muted:#6E7178;
  --line:#E6E6E2;
  --accent:#315CFF;
  --accent-tint:#EEF1FF;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Manrope',sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
.wrap{max-width:1120px; margin:0 auto; padding:0 28px;}

/* ===== Header ===== */
header{border-bottom:1px solid var(--line); background:var(--paper); position:relative;}
.header-inner{
  display:flex; align-items:center; gap:36px; padding:14px 0;
}
.logo{
  font-weight:800; font-size:17px; letter-spacing:-0.01em;
  display:flex; align-items:center; gap:10px; white-space:nowrap;
}
.logo img{width:34px; height:34px; border-radius:9px; display:block; flex-shrink:0;}
nav{display:flex; gap:26px; margin-left:8px; font-size:14.5px; font-weight:600; color:var(--muted);}
nav a{display:flex; align-items:center; gap:4px; white-space:nowrap;}
nav a:hover{color:var(--ink);}
nav a.active{color:var(--ink);}
nav .ext-icon{font-size:11px; opacity:.7;}
nav .nav-github{display:none;} /* 데스크톱에서는 별도 GitHub 버튼(.gh-btn)이 있으므로 nav 안에서는 숨김 */
.gh-btn{
  margin-left:auto; display:flex; align-items:center; gap:7px; flex-shrink:0;
  background:var(--ink); color:var(--paper); padding:9px 16px;
  border-radius:8px; font-size:13.5px; font-weight:700; white-space:nowrap;
}
.gh-btn:hover{background:var(--accent);}

/* 햄버거 버튼 (기본값: 데스크톱에서는 숨김) */
.menu-toggle{
  display:none; flex-direction:column; justify-content:center; gap:4px;
  width:34px; height:34px; margin-left:auto;
  background:none; border:none; padding:0; cursor:pointer; flex-shrink:0;
}
.menu-toggle span{
  display:block; width:100%; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.menu-toggle.is-active span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.menu-toggle.is-active span:nth-child(2){opacity:0;}
.menu-toggle.is-active span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* 화면이 좁아지면(모바일) 가로 메뉴 대신 햄버거 메뉴로 전환 */
/* → 메뉴 항목이 앞으로 더 늘어나도 이 구조는 그대로 확장됩니다 */
@media (max-width:680px){
  .header-inner{gap:12px;}
  .logo{font-size:15px;}
  .gh-btn{display:none;}
  .menu-toggle{display:flex;}

  nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; margin-left:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    box-shadow:0 8px 16px rgba(0,0,0,.06); padding:8px 0;
  }
  nav.nav-open{display:flex;}
  nav a{padding:12px 28px; white-space:normal;}
  nav a.active{background:var(--accent-tint);}
  nav .nav-github{
    display:flex; border-top:1px solid var(--line); margin-top:4px; padding-top:14px;
  }
}

/* ===== Footer ===== */
footer{border-top:1px solid var(--line);}
.footer-inner{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding:22px 0; font-size:13px; color:var(--muted);
}
.footer-inner a{margin-right:18px;}
.footer-inner a:hover{color:var(--ink);}

/* ===== Shared page content ===== */
.page-hero{padding:58px 0 34px;}
.page-hero h1{
  font-size:clamp(30px,4.2vw,44px);
  font-weight:800;
  letter-spacing:-0.025em;
  line-height:1.2;
  margin:0 0 14px;
}
.page-hero p{
  font-size:16px;
  color:var(--muted);
  max-width:620px;
  margin:0;
}
.search-section{padding:0 0 26px;}
.search-section--spacious{padding-bottom:28px;}
.search-panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:8px;
  display:flex;
  gap:8px;
  align-items:center;
  max-width:760px;
}
.search-panel:focus-within{border-color:#B9C2F3;}
.search-panel input{
  flex:1;
  min-width:0;
  border:none;
  outline:none;
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-size:15px;
  padding:10px 12px;
}
.search-panel input::placeholder{color:var(--muted);}
.search-button{
  border:none;
  background:var(--accent);
  color:#fff;
  border-radius:9px;
  padding:11px 18px;
  font:inherit;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  flex-shrink:0;
  white-space:nowrap;
}
.search-button:hover{background:#2748D6;}
.search-clear{
  border:none;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  padding:8px 4px;
  flex-shrink:0;
}
.search-clear:hover{color:var(--ink);}
.search-hint{
  margin:9px 0 0 4px;
  font-size:12.5px;
  color:var(--muted);
}
.filter-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:0 0 18px;
}
.chip{
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--muted);
  border-radius:999px;
  padding:7px 15px;
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
}
.chip:hover{color:var(--ink); border-color:#CFCFCB;}
.chip[data-active="true"]{background:var(--ink); color:#fff; border-color:var(--ink);}
.filter-count,
.result-summary{font-size:13px; color:var(--muted);}
.filter-count{margin-left:auto;}
.result-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 0 14px;
}
.filter-count b,
.result-summary b{color:var(--ink);}
.empty-state{
  padding:34px 4px 38px;
  color:var(--muted);
  font-size:14px;
  text-align:center;
}
.pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:24px 0 58px;
}
.pagination--spacious{padding-bottom:60px;}
.pagination button{
  min-width:34px;
  height:34px;
  padding:0 8px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--muted);
  border-radius:8px;
  font:inherit;
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
}
.pagination button:hover:not(:disabled){border-color:var(--ink); color:var(--ink);}
.pagination button[data-active="true"]{background:var(--ink); color:#fff; border-color:var(--ink);}
.pagination button:disabled{opacity:.4; cursor:default;}
.pagination .page-ellipsis{color:var(--muted); font-size:13px; padding:0 4px; user-select:none;}
.about{
  border-top:1px solid var(--line);
  padding:52px 0 64px;
}
.about h2{
  font-size:21px;
  font-weight:800;
  margin:0 0 14px;
  letter-spacing:-0.01em;
}
.about p{font-size:14.5px; color:var(--muted); max-width:650px; margin:0;}

@media (max-width:700px){
  .page-hero{padding-top:42px;}
  .search-panel{max-width:none;}
  .search-button{padding:11px 14px;}
  .filter-count{width:100%; margin-left:0; margin-top:2px;}
}

@media (max-width:460px){
  .wrap{padding:0 16px;}
  .search-panel{gap:4px; padding:6px;}
  .search-panel input{padding:10px 8px;}
  .search-clear{font-size:12px;}
  .search-button{padding:10px 12px;}
}

@media (max-width:500px){
  .search-section--spacious .search-panel{gap:4px; padding:6px;}
  .search-section--spacious .search-panel input{padding:10px 8px;}
  .search-section--spacious .search-clear{font-size:12px;}
  .search-section--spacious .search-button{padding:10px 12px;}
  .result-summary{font-size:12.5px;}
}

/* =============================================================
   게시판형 표 → 모바일 카드 뷰 (자동 전환)
   - 헤더(th)가 4개 이상인 표(:has로 자동 감지)만 카드형으로 바뀝니다.
     3열 이하 표는 이 규칙의 영향을 받지 않고 그대로 표로 표시됩니다.
   - 사용법: <table class="board-table">을 쓰고, 각 <td>에
     data-label="열이름"을 넣으세요. 가장 중요한 열(제목 등)에는
     data-full="true"를 추가하면 값이 아래로 풀어져 표시됩니다.
   - notice.html의 공지사항 표가 첫 적용 사례이며, 앞으로 4열 이상인
     다른 게시판형 표에도 클래스/속성만 붙이면 그대로 재사용됩니다.
   ============================================================= */
@media (max-width:500px){
  .board-table:has(thead tr th:nth-child(4)) thead{
    display:none !important;
  }
  .board-table:has(thead tr th:nth-child(4)),
  .board-table:has(thead tr th:nth-child(4)) tbody,
  .board-table:has(thead tr th:nth-child(4)) tr{
    display:block !important;
    width:auto !important;
  }
  .board-table:has(thead tr th:nth-child(4)) tr{
    border:1px solid var(--line);
    border-radius:12px;
    padding:4px 14px;
    margin:0 0 10px;
  }
  .board-table:has(thead tr th:nth-child(4)) tbody tr:last-child{
    margin-bottom:0;
  }
  .board-table:has(thead tr th:nth-child(4)) td{
    display:flex !important;
    width:auto !important;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:9px 0;
    text-align:right !important;
  }
  .board-table:has(thead tr th:nth-child(4)) td[data-label]::before{
    content:attr(data-label);
    color:var(--muted);
    font-size:11.5px;
    font-weight:700;
    text-align:left;
    flex-shrink:0;
  }
  .board-table:has(thead tr th:nth-child(4)) td[data-full="true"]{
    flex-direction:column;
    align-items:flex-start;
    text-align:left !important;
    gap:4px;
  }
  .board-table:has(thead tr th:nth-child(4)) td:last-child{
    border-bottom:none;
  }
  /* 라벨과 값이 같은 단어로 중복될 때(예: '보기' 열), 값 쪽 텍스트에
     class="hide-in-card"를 붙이면 카드 뷰에서만 숨겨집니다 */
  .board-table:has(thead tr th:nth-child(4)) .hide-in-card{
    display:none;
  }
}