/* ===================================================
   VINAI STARS — 북두칠성 테마
   =================================================== */

/* ── Reset & Base ──────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --night-deep:  #05080f;
  --night-mid:   #0c1220;
  --night-light: #1a2540;
  --star-gold:   #ffe89a;
  --star-white:  #e8f4ff;
  --star-glow:   rgba(200,220,255,.85);
  --line-color:  rgba(180,210,255,.28);
  --text-main:   #d8e8ff;
  --text-dim:    #8aa0c0;
  --card-bg:     rgba(5,10,22,.82);
  --card-border: rgba(100,140,220,.18);
  --accent:      #6fa8dc;
  --font-kr:     'Noto Serif KR','Apple SD Gothic Neo','Malgun Gothic',serif;
}

/*
 * ★ overflow: hidden 을 html/body 에 전역으로 걸지 않음
 *   - 홈·아카이브는 모든 콘텐츠가 position:fixed → 페이지 스크롤 없어도 됨
 *   - single 포스트는 자연스럽게 페이지 스크롤 가능
 */
html { overflow-x: hidden; }
body {
  font-family: var(--font-kr);
  background: var(--night-deep);
  color: var(--text-main);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; transition: color .2s; }
a:hover { color: var(--star-gold); }
img { display: block; }

/* ═══════════════════════════════════════════════
   배경 이미지
   ═══════════════════════════════════════════════ */

/* 아카이브: fixed (항상 고정) */
.archive-bg {
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0; pointer-events: none;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}

/* 홈: absolute → 페이지와 함께 스크롤 */
.home-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0; pointer-events: none;
}

/* ═══════════════════════════════════════════════
   북두칠성 SVG — 전체화면 고정 (홈·아카이브 공용)
   ═══════════════════════════════════════════════ */
.constellation-svg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}
.constellation-svg .star-group { pointer-events: all; }

/* ── 별자리 공통 요소 ─────────────────────────── */
.star-line {
  stroke: var(--line-color);
  stroke-width: 1.2;
  stroke-dasharray: 4 6;
}
.star-group { cursor: pointer; }
.star-halo {
  fill: none;
  stroke: var(--star-glow);
  stroke-width: 1.2;
  opacity: 0;
  transition: opacity .3s;
}
.star-dot {
  fill: var(--star-white);
  /* 트윙클 애니메이션은 stars.js 가 Web Animations API 로 처리
     (각 별마다 독립적인 duration·delay·밝기 적용) */
}

.star-label-text {
  fill: var(--star-gold);
  font-family: var(--font-kr);
  font-size: 15px;
  letter-spacing: .07em;
  opacity: 0;
  transition: opacity .25s;
  paint-order: stroke fill;
  stroke: rgba(0,0,10,.9);
  stroke-width: 3.5px;
  pointer-events: none;
  dominant-baseline: middle;
}

/* ═══════════════════════════════════════════════
   홈페이지
   ═══════════════════════════════════════════════ */
.home-wrap {
  position: relative;
  width: 100vw;
  /* height 고정 없음 → bg 이미지(100vh)가 높이 결정 */
}
/* home-bg: 문서 흐름 안에 배치 (in-flow) → 페이지와 함께 스크롤 */
.home-wrap .home-bg {
  position: relative !important;   /* global absolute/fixed 모두 override */
  display: block;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
/* 별자리·타이틀·힌트: home-bg 위에 absolute로 겹침 */
.home-wrap .constellation-svg {
  position: absolute !important;   /* global fixed override */
  inset: 0;
  height: 100vh;
  width: 100%;
  z-index: 10;
}

.home-title {
  position: absolute;
  bottom: 2.5rem; right: 3rem;
  z-index: 20; text-align: right; pointer-events: none;
}
.home-title h1 {
  font-size: 1.8rem;           /* ★ 2배 (.9rem → 1.8rem) */
  font-weight: 300;
  color: rgba(220,230,255,.55);
  letter-spacing: .3em;
  text-transform: uppercase;
  line-height: 1.2;
}
.home-title p,
.home-subtitle {
  font-size: .72rem;
  color: rgba(180,200,240,.38);
  letter-spacing: .18em;
  margin-top: .55rem;
  font-weight: 300;
}
.home-hint {
  position: absolute;
  bottom: 2rem; left: 50%; transform: translateX(-50%);
  z-index: 20; color: rgba(255,255,255,.85); font-size: .72rem;
  letter-spacing: .28em; text-transform: uppercase;
  text-shadow: 0 0 12px rgba(0,0,0,.9), 0 1px 4px rgba(0,0,0,.8);
  animation: hint-pulse 3s ease-in-out infinite; pointer-events: none;
  white-space: nowrap;
}
@keyframes hint-pulse { 0%,100%{opacity:.45} 50%{opacity:1} }

.home-poem {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  text-align: center;
  pointer-events: none;
  color: rgba(255,255,255,.60);
  font-size: 1rem;
  font-weight: 300;
  line-height: 2;
  letter-spacing: .06em;
  text-shadow: 0 1px 12px rgba(0,0,0,.6);
}

/* ═══════════════════════════════════════════════
   아카이브 · 카테고리
   z=0  : jeonmyeon.png (fixed)
   z=10 : 북두칠성 SVG  (fixed)
   z=15 : 카테고리명    (fixed)
   z=20 : 글목록 패널   (fixed, 내부 스크롤)
   ═══════════════════════════════════════════════ */
.archive-wrap {
  position: relative;
  width: 100vw;
  min-height: 100vh;
}
/* 별자리 영역 공간 확보 — 패널이 33vh 아래부터 시작 */
.archive-wrap::before {
  content: '';
  display: block;
  height: 33vh;
}
/* 아카이브 별자리 SVG 고정 */
.archive-wrap .constellation-svg {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  width: 100%;
  height: 100vh;
  z-index: 10;
}

.archive-cat-label {
  position: absolute;
  top: 26vh; left: 50%; transform: translateX(-50%);
  z-index: 15;
  font-size: .75rem; letter-spacing: .42em; text-transform: uppercase;
  color: rgba(255,232,154,.58); pointer-events: none; white-space: nowrap;
}

/* 글목록 패널 — 페이지 스크롤 */
.archive-panel {
  position: relative;
  z-index: 20;
  background: linear-gradient(
    to bottom,
    rgba(5,8,15,0)    0%,
    rgba(5,8,15,.68)  5%,
    rgba(5,8,15,.76) 100%
  );
}

.archive-panel-inner {
  max-width: 1180px; margin: 0 auto;
  padding: 4.5rem 2rem 6rem;
  display: grid; grid-template-columns: 1fr 260px; gap: 3rem; align-items: start;
}

/* ── 글 목록 ────────────────────────────────── */
.post-list { display: flex; flex-direction: column; gap: 1.8rem; }

.post-item {
  display: flex; gap: 1.4rem; padding-bottom: 1.8rem;
  border-bottom: 1px solid var(--card-border); transition: border-color .3s;
}
.post-item:hover { border-color: rgba(100,140,220,.32); }
.post-item:last-of-type { border-bottom: none; }

.post-thumb {
  flex-shrink: 0; width: 110px; height: 82px;
  overflow: hidden; border-radius: 3px; background: var(--night-light);
}
.post-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.post-item:hover .post-thumb img { transform: scale(1.06); }

.post-info { flex: 1; }
.post-item-cat { font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: .28rem; }
.post-item-cat a { color: var(--accent); }
.post-item-title { font-size: .96rem; font-weight: 500; line-height: 1.45; color: var(--star-white); margin-bottom: .38rem; transition: color .2s; }
.post-item:hover .post-item-title { color: var(--star-gold); }
.post-item-excerpt { font-size: .82rem; color: var(--text-dim); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-item-date { font-size: .68rem; color: rgba(138,160,192,.4); margin-top: .4rem; }

.pagination { margin-top: 1.8rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.pagination a, .pagination span { display: inline-block; padding: .32rem .8rem; border: 1px solid var(--card-border); color: var(--text-dim); font-size: .78rem; border-radius: 2px; transition: all .2s; }
.pagination a:hover, .pagination .current { background: var(--night-light); color: var(--star-gold); border-color: rgba(100,140,220,.4); }

/* kboard 게시판 페이지 전용 내부 래퍼 */
.archive-panel-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 4rem 2rem 6rem;
}

/* ── 아카이브 사이드바 ───────────────────────── */
.archive-sidebar { position: sticky; top: 0; }

.sidebar-widget {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 3px;
  padding: 1.4rem; margin-bottom: 1.4rem;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.widget-title {
  font-size: .68rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .9rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--card-border); font-weight: 400;
}
.sidebar-widget ul { list-style: none; display: flex; flex-direction: column; gap: .42rem; }
.sidebar-widget ul li { font-size: .82rem; color: var(--text-dim); border-bottom: 1px solid rgba(100,140,220,.06); padding-bottom: .42rem; line-height: 1.4; }
.sidebar-widget ul li:last-child { border-bottom: none; padding-bottom: 0; }
.sidebar-widget ul li a { color: var(--text-dim); }
.sidebar-widget ul li a:hover { color: var(--star-gold); }
.sidebar-widget ul li.current a { color: var(--star-gold); font-weight: 500; }

/* ═══════════════════════════════════════════════
   단일 포스트 — post-bg.png 배경
   ★ overflow: hidden 없음 → 페이지 자연 스크롤
   ═══════════════════════════════════════════════ */
.single-wrap {
  position: relative;
  min-height: 100vh;
  /* overflow: auto 은 기본값이므로 별도 선언 불필요 */
}


.single-bg-img {
  position: fixed;              /* 배경 고정 */
  top: 0; left: 0; right: 0;
  width: 100%;
  height: 100vh;               /* 첫 화면만 덮음 */
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}

.single-overlay {
  position: fixed;             /* 오버레이 고정 */
  top: 0; left: 0; right: 0;
  width: 100%;
  height: 100vh;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    transparent        0%,
    transparent       21%,   /* ← 26%→21%: 별자리 마지막 별 바로 아래 */
    rgba(5,8,15,.22)  34%,
    rgba(5,8,15,.64)  48%,
    rgba(5,8,15,.76) 100%
  );
  pointer-events: none;
}

/* 포스트 별자리: 홈과 동일한 1536×1024 viewBox, xMidYMid slice */
.post-constellation-svg {
  position: fixed;             /* 별자리 고정 */
  top: 0; left: 0; right: 0;
  width: 100%;
  height: 100vh;
  z-index: 2; pointer-events: none;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}
.post-constellation-svg .star-group { pointer-events: all; }

/* 글 카드 래퍼 — 1400px, 본문+사이드바 그리드
   ★ pointer-events: none → 별자리 SVG(z=5) 클릭 차단 방지
      내부 실제 콘텐츠는 pointer-events: auto 로 복원 */
.post-content-wrap {
  position: relative; z-index: 10;
  max-width: 1400px; margin: 0 auto;
  padding: 50vh 2rem 6rem;
  pointer-events: none;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 3rem;
  align-items: start;
}

/* 본문 영역 */
.post-main { min-width: 0; pointer-events: auto; }

/* 사이드바 */
.post-sidebar {
  position: sticky;
  top: 2rem;
  pointer-events: auto;
}

/* 카드 자체는 클릭 가능 복원 */
.post-card { pointer-events: auto; }

.post-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 2.8rem 3.2rem;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.post-meta { font-size: .73rem; color: var(--text-dim); letter-spacing: .1em; margin-bottom: 1.4rem; display: flex; gap: 1rem; flex-wrap: wrap; pointer-events: auto; }
.post-meta .cat-link { color: var(--accent); text-transform: uppercase; letter-spacing: .15em; font-size: .68rem; }
.post-title-large { font-size: clamp(1.3rem,3vw,1.9rem); font-weight: 600; line-height: 1.4; color: var(--star-white); margin-bottom: 2rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--card-border); }
.post-body { font-size: .97rem; line-height: 2; color: rgba(216,232,255,.88); pointer-events: auto; }
.post-body p { margin-bottom: 1.4em; }
.post-body h2, .post-body h3 { color: var(--star-white); margin: 2em 0 .7em; font-weight: 500; }
.post-body img { max-width: 100%; border-radius: 3px; margin: 1.4em auto; }
.post-body blockquote { border-left: 3px solid var(--accent); padding-left: 1.1em; color: var(--text-dim); font-style: italic; margin: 1.4em 0; }
.post-body a { color: var(--accent); } .post-body a:hover { color: var(--star-gold); }
.post-nav { margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid var(--card-border); display: flex; justify-content: space-between; gap: 1rem; font-size: .83rem; pointer-events: auto; }
.post-nav a { color: var(--text-dim); max-width: 48%; } .post-nav a:hover { color: var(--star-gold); }

/* ═══════════════════════════════════════════════
   댓글 섹션
   ═══════════════════════════════════════════════ */
.comments-section {
  margin-top: 2.8rem;
  padding: 2rem 3.2rem 2.4rem;
  border-top: 1px solid var(--card-border);
  pointer-events: auto;
}

.comments-title {
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 400;
  margin-bottom: 1.6rem;
}
.comments-title span { color: var(--star-gold); }

/* 댓글 목록 */
.comment-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 2.2rem;
}

.comment-item {
  display: flex;
  gap: .9rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(100,140,220,.07);
}
.comment-item:last-child { border-bottom: none; }

/* 대댓글 들여쓰기 */
.comment-item .children {
  list-style: none;
  padding-left: 2.6rem;
  width: 100%;
}
.comment-item .children .comment-item {
  border-bottom: none;
  padding: .7rem 0;
}

/* 아바타 */
.comment-avatar { flex-shrink: 0; }
.avatar-img {
  width: 32px; height: 32px;
  border-radius: 50%;
  opacity: .7;
  filter: grayscale(30%);
}

/* 댓글 본문 */
.comment-body-wrap { flex: 1; min-width: 0; }

.comment-header {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  margin-bottom: .4rem;
  flex-wrap: wrap;
}
.comment-author-name {
  font-size: .82rem;
  color: var(--star-white);
  font-weight: 500;
}
.comment-date {
  font-size: .65rem;
  color: rgba(138,160,192,.4);
  letter-spacing: .05em;
}
.comment-awaiting {
  font-size: .62rem;
  color: rgba(255,232,154,.45);
  letter-spacing: .08em;
}

.comment-text {
  font-size: .88rem;
  color: rgba(216,232,255,.78);
  line-height: 1.75;
}
.comment-text p { margin: 0; }

.comment-actions { margin-top: .38rem; }
.comment-reply-link {
  font-size: .68rem;
  color: rgba(138,160,192,.45);
  letter-spacing: .06em;
  transition: color .2s;
}
.comment-reply-link:hover { color: var(--star-gold); }

/* 댓글 폼 */
#respond { margin-top: .6rem; }

#reply-title {
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 400;
  margin-bottom: 1.2rem;
}
#reply-title small { margin-left: .8rem; }
#reply-title small a {
  font-size: .65rem;
  color: rgba(138,160,192,.45);
  letter-spacing: .05em;
}
#reply-title small a:hover { color: var(--star-gold); }

.comment-form-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
  margin-bottom: .7rem;
}

.comment-form-field input,
.comment-form-row textarea {
  width: 100%;
  background: rgba(12,18,32,.65);
  border: 1px solid rgba(100,140,220,.18);
  border-radius: 2px;
  color: var(--text-main);
  font-family: var(--font-kr);
  font-size: .84rem;
  padding: .55rem .85rem;
  outline: none;
  transition: border-color .2s;
  -webkit-appearance: none;
}
.comment-form-field input::placeholder,
.comment-form-row textarea::placeholder {
  color: rgba(138,160,192,.38);
}
.comment-form-field input:focus,
.comment-form-row textarea:focus {
  border-color: rgba(100,140,220,.45);
}

.comment-form-row textarea { resize: vertical; min-height: 90px; }

.form-submit { margin-top: .7rem; }
.comment-submit-btn {
  background: transparent;
  border: 1px solid rgba(100,140,220,.28);
  color: var(--text-dim);
  font-family: var(--font-kr);
  font-size: .78rem;
  letter-spacing: .18em;
  padding: .5rem 1.6rem;
  cursor: pointer;
  transition: all .2s;
}
.comment-submit-btn:hover {
  background: rgba(100,140,220,.1);
  border-color: rgba(100,140,220,.5);
  color: var(--star-gold);
}

.comment-password-notice {
  font-size: .84rem;
  color: var(--text-dim);
  padding: 1rem 0;
}

@media (max-width: 600px) {
  .comments-section { padding: 1.6rem 1.4rem; }
  .comment-form-fields { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════
   kboard 페이지
   ═══════════════════════════════════════════════ */
.page-content-area { max-width: 1100px; margin: 0 auto; padding: 0 2rem 5rem; }
.page-content-area table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.page-content-area table th, .page-content-area table td { padding: .65rem .9rem; border-bottom: 1px solid var(--card-border); color: var(--text-main); text-align: left; }
.page-content-area table th { background: rgba(26,37,64,.6); color: var(--text-dim); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 400; }
.page-content-area table tr:hover td { background: rgba(26,37,64,.4); }
.page-content-area table a { color: var(--text-main); } .page-content-area table a:hover { color: var(--star-gold); }
.page-content-area input[type="submit"], .page-content-area button { background: transparent; border: 1px solid var(--card-border); color: var(--text-dim); padding: .4rem 1rem; font-size: .82rem; cursor: pointer; transition: all .2s; font-family: var(--font-kr); }
.page-content-area input[type="submit"]:hover, .page-content-area button:hover { background: var(--night-light); color: var(--star-gold); border-color: rgba(100,140,220,.4); }
.page-content-area input[type="text"], .page-content-area input[type="password"], .page-content-area textarea { background: rgba(12,18,32,.8); border: 1px solid var(--card-border); color: var(--text-main); padding: .5rem .8rem; font-size: .9rem; font-family: var(--font-kr); width: 100%; outline: none; }

/* ═══════════════════════════════════════════════
   kboard 게시판 — 20% 축소 + 배경 투명 + 글씨 흰색
   ═══════════════════════════════════════════════ */

/* 20% 전체 축소 */
.archive-panel-page {
  font-size: 0.8rem;
}

/* ── 핵심: .archive-panel-page 내부 모든 요소 강제 적용 ──
   kboard 클래스명과 무관하게 컨테이너 자식 전체를 덮음  */
.archive-panel-page,
.archive-panel-page *,
.archive-panel-page *::before,
.archive-panel-page *::after {
  background:       transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.15) !important;
}

/* 링크 */
.archive-panel-page a         { color: #ffffff !important; text-decoration: none; }
.archive-panel-page a:hover   { color: var(--star-gold) !important; text-decoration: underline; }

/* 입력창·textarea */
.archive-panel-page input:not([type="submit"]):not([type="button"]):not([type="reset"]),
.archive-panel-page textarea,
.archive-panel-page select {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  color: #ffffff !important;
}

/* 버튼 */
.archive-panel-page input[type="submit"],
.archive-panel-page input[type="button"],
.archive-panel-page input[type="reset"],
.archive-panel-page button {
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  color: #ffffff !important;
  cursor: pointer; transition: all .2s;
}
.archive-panel-page input[type="submit"]:hover,
.archive-panel-page button:hover {
  background: rgba(255,255,255,.2) !important;
  color: var(--star-gold) !important;
}

/* ═══════════════════════════════════════════════
   공통 푸터
   ═══════════════════════════════════════════════ */
.site-footer {
  position: relative; z-index: 25;
  text-align: center; padding: 1.5rem;
  font-size: .66rem; color: rgba(138,160,192,.2);
  letter-spacing: .15em; border-top: 1px solid var(--card-border);
  background: var(--night-deep);
}

/* ═══════════════════════════════════════════════
   반응형
   ═══════════════════════════════════════════════ */
@media (max-width: 960px) {
  .archive-panel-inner { grid-template-columns: 1fr; }
  .archive-sidebar { position: static; }
  .post-content-wrap { grid-template-columns: 1fr; }
  .post-sidebar { display: none; }
}
@media (max-width: 600px) {
  .archive-cat-label{ top: 22vh; font-size: .68rem; }
  .post-content-wrap{ padding-top: 42vh; }
  /* iOS Safari: 주소창 높이 변화 대응 */
  .archive-wrap::before { height: 30svh; }
  .archive-cat-label    { top: 20svh; }
  .post-item        { flex-direction: column; }
  .post-thumb       { width: 100%; max-width: 280px; height: 210px; }
  .post-card        { padding: 1.8rem 1.4rem; }
}

/* 모바일: 배경 이미지 왼쪽 정렬 (별자리 SVG xMinYMid 와 일치) */
@media (max-width: 768px) {
  .home-bg,
  .home-wrap .home-bg,
  .archive-bg { object-position: left center; }
}
  30%  { transform: scaleY(1); opacity: 1; }
  70%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0); opacity: 0; }
}