/* ==================================================================
   Simble Basic 테마 — 반응형, 디자인 토큰(--sb-*) 기반
   토큰 값은 Simble-builder 패널에서 실시간 변경 가능
   ================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { font-size: var(--sb-fs, 16px); }
body {
  margin: 0;
  font-family: var(--sb-font, 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
  color: var(--sb-text, #0f172a);
  background: var(--sb-bg, #ffffff);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; height: auto; }

#hd_pop, #hd_qs { max-width: var(--sb-container, 1280px); margin: 0 auto; }

.sb-container {
  width: 100%;
  max-width: var(--sb-container, 1280px);
  margin-inline: auto;
  padding-inline: 20px;
}

/* ---- 헤더 ---- */
.sb-header {
  position: sticky; top: 0; z-index: 1000;
  background: color-mix(in srgb, var(--sb-bg, #ffffff) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sb-border, #e2e8f0);
}
.sb-header__inner {
  display: flex; align-items: center; gap: 32px;
  height: var(--sb-header-h, 72px);
}
.sb-header__logo { margin: 0; font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; }
.sb-header__logo a { text-decoration: none; }
.sb-header__logo a:hover { color: var(--sb-primary, #4f46e5); }

.sb-gnb { flex: 1; }
.sb-gnb__list { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.sb-gnb__item { position: relative; }
.sb-gnb__item > a {
  display: block; padding: 10px 16px; text-decoration: none; font-weight: 600;
  border-radius: 10px; transition: background 0.15s, color 0.15s;
}
.sb-gnb__item > a:hover { background: var(--sb-surface, #f8fafc); color: var(--sb-primary, #4f46e5); }
.sb-gnb__sub {
  position: absolute; top: 100%; left: 0; min-width: 180px;
  list-style: none; margin: 6px 0 0; padding: 8px;
  background: var(--sb-bg, #fff); border: 1px solid var(--sb-border, #e2e8f0);
  border-radius: 12px; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}
.sb-gnb__item:hover .sb-gnb__sub, .sb-gnb__item:focus-within .sb-gnb__sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.sb-gnb__sub a {
  display: block; padding: 8px 12px; text-decoration: none; font-size: 0.9375rem;
  border-radius: 8px;
}
.sb-gnb__sub a:hover { background: var(--sb-surface, #f8fafc); color: var(--sb-primary, #4f46e5); }

.sb-header__util { display: flex; align-items: center; gap: 4px; }
.sb-util-link {
  padding: 8px 12px; font-size: 0.875rem; text-decoration: none;
  color: var(--sb-muted, #64748b); border-radius: 8px;
}
.sb-util-link:hover { background: var(--sb-surface, #f8fafc); color: var(--sb-text, #0f172a); }
.sb-util-link--admin { color: var(--sb-primary, #4f46e5); font-weight: 700; }

.sb-menu-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 10px;
  background: transparent; border: 0; cursor: pointer;
}
.sb-menu-toggle span {
  display: block; height: 2px; border-radius: 2px;
  background: var(--sb-text, #0f172a);
  transition: transform 0.2s, opacity 0.2s;
}

/* ---- 본문/서브페이지 ---- */
.sb-main { min-height: 60vh; }
.sb-subpage { padding-block: 48px; }

/* 그누보드 기본 요소 톤 맞춤 */
.sb-subpage h2#container_title, #container_title {
  font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em;
  margin: 0 0 24px; padding: 0;
}

/* ---- 푸터 ---- */
.sb-footer {
  margin-top: 96px;
  border-top: 1px solid var(--sb-border, #e2e8f0);
  background: var(--sb-surface, #f8fafc);
}
.sb-footer__inner {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding-block: 40px; flex-wrap: wrap;
}
.sb-footer__copy { margin: 8px 0 0; font-size: 0.8125rem; color: var(--sb-muted, #64748b); }
.sb-footer__links { display: flex; gap: 20px; }
.sb-footer__links a { font-size: 0.875rem; text-decoration: none; color: var(--sb-muted, #64748b); }
.sb-footer__links a:hover { color: var(--sb-primary, #4f46e5); }

/* ---- 반응형 ---- */
@media (max-width: 991px) {
  .sb-menu-toggle { display: flex; }
  .sb-gnb {
    position: fixed; inset: var(--sb-header-h, 72px) 0 0 0;
    background: var(--sb-bg, #fff);
    padding: 20px; overflow-y: auto;
    z-index: 999;
    /* v0.3.2a95: 닫힌 서랍을 화면 밖(translateX(100%))에 두면 390px 같은 좁은 화면에서 문서 폭이 2배(가로 스크롤)가 된다.
       닫힌 동안은 display:none, 열 때만 오른쪽에서 밀려 들어오는 애니메이션. */
    display: none;
  }
  body.sb-nav-open .sb-gnb { display: block; animation: sbNavIn 0.25s ease; }
  @keyframes sbNavIn { from { transform: translateX(100%); } to { transform: none; } }
  @media (prefers-reduced-motion: reduce) { body.sb-nav-open .sb-gnb { animation: none; } }
  body.sb-nav-open { overflow: hidden; }
  body.sb-nav-open .sb-menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.sb-nav-open .sb-menu-toggle span:nth-child(2) { opacity: 0; }
  body.sb-nav-open .sb-menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .sb-gnb__list { flex-direction: column; gap: 2px; }
  .sb-gnb__item > a { padding: 14px 16px; font-size: 1.0625rem; }
  .sb-gnb__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; background: var(--sb-surface, #f8fafc);
    margin: 2px 0 6px; display: none;
  }
  .sb-gnb__item.is-open .sb-gnb__sub { display: block; }
  .sb-util-link { display: none; }
  .sb-util-link--admin { display: inline-block; }
}

@media (max-width: 640px) {
  .sb-footer__inner { flex-direction: column; }
}

/* ---- 다크 모드 대응 (토큰 기반) ---- */
[data-sb-scheme="dark"] body { color-scheme: dark; }

/* ==================================================================
   Header 유틸메뉴 (v0.3.2a2) — 아이콘+문자 병기, 장평 100% / 자간 -10%
   ================================================================== */
.sb-util {
  display: flex; align-items: center; gap: 8px;
  font-stretch: 100%;          /* 장평 100% */
  letter-spacing: -0.1em;      /* 자간 -10% */
}
.sb-util__hello { font-size: 13px; color: var(--sb-muted, #6b7280); white-space: nowrap; }
.sb-util__hello b { color: var(--sb-text, #111827); font-weight: 700; }
.sb-util__sep { color: var(--sb-border, #d1d5db); font-size: 11px; user-select: none; letter-spacing: 0; }
.sb-util .sb-util-link { letter-spacing: -0.1em; }

/* 아이콘 + 문자 병기 링크 */
.sb-util-link--ico {
  display: inline-flex; align-items: center; gap: 5px;
}
.sb-util-link--ico svg { width: 15px; height: 15px; flex: none; }

/* 아이콘 전용 버튼 (로그아웃 · 관리자) */
.sb-util-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 7px; color: var(--sb-muted, #6b7280);
  transition: background 0.15s, color 0.15s;
}
.sb-util-ico:hover { background: rgba(59, 129, 58, 0.1); color: #3b813a; }
.sb-util-ico svg { width: 16px; height: 16px; }
.sb-util-ico--sb { color: #3b813a; }
.sb-util-ico--g5 img { width: 20px; height: auto; display: block; }

/* 그누보드 기본 상단 로그인 표시줄 숨김 — 유틸메뉴가 로그인 상태를 대신 표시 */
#hd_login_msg { display: none; }

@media (max-width: 640px) {
  .sb-util__hello { display: none; } /* 좁은 화면에서는 인삿말 생략 */
}

/* 접근성: 화면에는 숨기고 스크린리더에만 읽히는 텍스트 */
.sound_only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap;
}
/* 자간 -10%에서도 인삿말 어절 간격 유지 */
.sb-util__hello { word-spacing: 3px; }
.sb-util__hello b { margin-right: 2px; }

/* ==================================================================
   v0.3.2a3 — Paperlogy(Paperozi) 웹폰트 + 2단 헤더 + 유틸 아이콘 리파인
   ================================================================== */
@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2'); font-weight: 100; font-display: swap; }
@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2'); font-weight: 200; font-display: swap; }
@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2'); font-weight: 900; font-display: swap; }

:root { --sb-util-accent: #2f9e44; } /* 로고 그린보다 선명한 아이콘 색 */

/* ---- ③ 2단 헤더: 상부 1/3 유틸메뉴 · 하부 2/3 주메뉴 (로고는 좌측 세로 관통) ---- */
.sb-header__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr 2fr;           /* 1/3 : 2/3 */
  column-gap: 32px;
  height: max(var(--sb-header-h, 72px), 96px);
  align-items: stretch;
}
.sb-header__logo { grid-column: 1; grid-row: 1 / 3; align-self: center; }
.sb-header__util {
  grid-column: 2; grid-row: 1;
  justify-content: flex-end; align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--sb-border, #e2e8f0) 60%, transparent);
}
.sb-gnb {
  grid-column: 2; grid-row: 2;
  display: flex; align-items: center; justify-content: flex-end;
}
.sb-gnb .sb-gnb__list { justify-content: flex-end; }
.sb-header .sb-menu-toggle { grid-column: 2; grid-row: 1 / 3; justify-self: end; align-self: center; }

/* ---- ② 폰트: 주메뉴 Paperozi 700 · 유틸 Paperozi 300 ---- */
.sb-gnb__item > a {
  font-family: 'Paperozi', var(--sb-font, Pretendard, sans-serif);
  font-weight: 700;
}
.sb-util, .sb-util .sb-util-link, .sb-util__hello {
  font-family: 'Paperozi', var(--sb-font, Pretendard, sans-serif);
  font-weight: 300;
}
.sb-util__hello b { font-weight: 700; }

/* ---- ⑤ 색상: 텍스트 검정 · 아이콘 선명한 그린 ---- */
.sb-util .sb-util-link, .sb-util__hello, .sb-util__hello b { color: #000; }
.sb-util .sb-util-link:hover { color: #000; background: var(--sb-surface, #f4f6f4); }
.sb-util svg { color: var(--sb-util-accent); }
.sb-util-ico { color: var(--sb-util-accent); }

/* ---- ① 아이콘 크기 = 텍스트 크기, 아이콘·텍스트 사이 공백 제거 ---- */
.sb-util-link--ico { display: inline-flex; flex-direction: row; align-items: center; gap: 0; white-space: nowrap; }
.sb-util-link--ico svg { width: 1em; height: 1em; flex: none; }
.sb-util-ico { width: 24px; height: 24px; }
.sb-util-ico svg { width: 1em; height: 1em; }
.sb-util-ico--g5 img { width: 1.35em; height: auto; }

/* ---- ⑥ 관리자 아이콘: 둥근 모서리 사각 테두리 + 호버 색상 반전 ---- */
.sb-util-ico--sb, .sb-util-ico--g5 {
  border: 1.5px solid var(--sb-util-accent);
  border-radius: 7px;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.sb-util-ico--sb:hover { background: var(--sb-util-accent); color: #fff; }
.sb-util-ico--sb:hover svg { color: #fff; }
.sb-util-ico--g5:hover { background: #162032; border-color: #162032; }
.sb-util-ico--g5:hover img { filter: brightness(0) invert(1); }

/* ---- ⑦ 로그인·로그아웃·회원가입 아이콘 호버 애니메이션 ---- */
@keyframes sb-ico-nudge { from { transform: translateX(0); } to { transform: translateX(3px); } }
@keyframes sb-ico-pop { 0% { transform: scale(1); } 50% { transform: scale(1.28) rotate(-6deg); } 100% { transform: scale(1); } }
.sb-util-link--login:hover svg { animation: sb-ico-nudge 0.45s ease-in-out infinite alternate; }
.sb-util-link--join:hover svg { animation: sb-ico-pop 0.6s ease-in-out infinite; }
.sb-util-ico--out:hover svg { animation: sb-ico-nudge 0.45s ease-in-out infinite alternate; }
.sb-util-ico--out:hover { background: rgba(47, 158, 68, 0.12); }

/* ---- 반응형: 좁은 화면에서는 기존 1단 헤더로 복귀 ---- */
@media (max-width: 991px) {
  .sb-header__inner { display: flex; align-items: center; height: var(--sb-header-h, 72px); }
  .sb-header__util { border-bottom: 0; }
}

/* ==================================================================
   v0.3.2a4 — 유틸메뉴 장평 100% / 자간 0% 재조정, 아이콘-텍스트 한 칸 공백
   ================================================================== */
.sb-util, .sb-util .sb-util-link, .sb-util__hello { font-stretch: 100%; letter-spacing: 0; }
.sb-util__hello { word-spacing: normal; }
.sb-util__hello b { margin-right: 0; }
.sb-util-link--ico { gap: 0.25em; } /* 한 칸 공백 */

/* ==================================================================
   v0.3.2a71 — 헤더 주메뉴가 body 경계 아래로 넘치는 문제 수정
   원인 1(레이아웃): .sb-header__inner 높이를 96px로 고정한 채 행을
         1fr/2fr로 나눠, 유틸 줄 실제 높이(아이콘 버튼+구분선)가
         배정폭(⅓·32px)을 넘으면 그리드 전체가 고정 높이를 초과 →
         주메뉴 텍스트가 헤더 하단 보더 밖(body 영역)으로 밀려남.
   수정 1: 행 높이를 콘텐츠 기준(auto)으로 두고 헤더는 min-height로만
         하한을 잡아 내용만큼 자연 확장 — 넘침/겹침 원천 차단.
         (데스크톱 ≥992px에만 적용해 모바일 레이아웃은 그대로 유지)
   원인 2(배포·캐시): 실서버에는 이 수정이 담긴 default.css가 올라가지
         않아 a4 시점 CSS가 그대로 서비스되고 있었고, 링크도
         ?ver=G5_CSS_VER(고정값)라 브라우저가 옛 캐시를 계속 사용.
   수정 2: head.sub.php에서 ver 파라미터를 CSS 파일 수정시각으로 바꾸고,
         같은 규칙을 인라인 크리티컬 CSS로도 내장해 CSS 파일이
         미갱신·캐시되어도 헤더 수정이 항상 적용되게 함.
   ================================================================== */
.sb-header__inner { height: auto; min-height: var(--sb-header-h, 72px); }
@media (min-width: 992px) {
  .sb-header__inner {
    min-height: max(var(--sb-header-h, 72px), 96px);
    grid-template-rows: auto auto;
    row-gap: 0;
  }
  .sb-header__util { min-height: 40px; padding: 4px 0; }
  .sb-gnb { min-height: 52px; padding: 2px 0 6px; }
  .sb-gnb__item > a { padding: 8px 14px; }
}