/* ===== Hang's Life — 스타일 (슬레이트블루 톤, Pretendard + Noto Serif KR) ===== */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500;600;700&display=swap");

:root {
  --bg:        #eef1f6;   /* 옅은 쿨그레이 배경 */
  --paper:     #ffffff;   /* 카드/패널(순백으로 더 또렷하게) */
  --ink:       #2b2f38;   /* 본문 글자 */
  --ink-soft:  #646b7a;   /* 보조 글자 */
  --line:      #dde2ec;   /* 경계선 */
  --accent:    #5b6f9e;   /* 차분한 슬레이트 블루 포인트 */
  --accent-dk: #45577f;
  --gold:      #c89b3c;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(40, 50, 80, 0.08);
  --serif: "Noto Serif KR", "Apple SD Gothic Neo", Georgia, serif;
  --sans: "Pretendard", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

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

body {
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.7;
  background-color: var(--bg);
  /* 반복 패턴: 옅은 격자(그래프지/회로 느낌) — AI·컴퓨터 테마, 절제된 톤 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M32 0H0V32' fill='none' stroke='%23c9d2e2' stroke-width='1' stroke-opacity='0.45'/%3E%3Ccircle cx='0' cy='0' r='1.3' fill='%23b6c1d8' fill-opacity='0.6'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

/* ===== 상단 히어로 (스크롤해도 상단 고정, 아래 내용만 스크롤) ===== */
.hero {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.hero__art {
  width: 100%;                /* 전체 폭(가장자리까지) → 아래 콘텐츠와 자연스럽게 연결 */
  aspect-ratio: 1600 / 320;   /* 짧은 5:1 배너 → 세로 축소, 글자 포함 전체 표시(잘림 없음) */
  background: #e6eaf3 url("../img/hero.webp") center / 100% 100% no-repeat;
}
/* 타이틀은 이미지에 합성됨 — HTML 텍스트는 접근성/SEO용으로만 숨겨 유지 */
.hero__title {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.brand {
  font-family: "Dancing Script", cursive;
  font-size: clamp(2.8rem, 6.5vw, 4.2rem);
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--accent-dk);
  text-shadow: 0 2px 10px rgba(255,255,255,0.95), 0 1px 0 rgba(255,255,255,0.9);
}
.brand__sub {
  margin-top: 6px;
  font-size: 0.95rem;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 1px;
  text-shadow: 0 1px 8px rgba(238,241,246,0.95);
}

/* ===== 레이아웃: 좌 메뉴 / 우 콘텐츠 ===== */
.layout {
  max-width: 1080px;
  margin: 0 auto;
  padding: 36px 20px 60px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 36px;
  align-items: start;
}

/* ----- 사이드바 ----- */
.sidebar { position: sticky; top: 20px; }
.sidebar__toggle {
  display: none;
  width: 100%;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font: inherit;
  font-weight: 600;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.sidebar__toggle span {
  width: 16px; height: 2px; background: var(--ink); display: inline-block;
}
.sidebar__toggle span + span { margin-left: -16px; margin-top: 5px; }

.menu {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 18px;
  box-shadow: var(--shadow);
}
.menu__label {
  font-size: 0.72rem;
  letter-spacing: 2px;
  color: var(--accent-dk);
  font-weight: 700;
  margin: 14px 0 8px;
}
.menu__label:first-child { margin-top: 0; }
.menu ul { list-style: none; }
.menu li a {
  display: block;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--ink-soft);
  font-size: 0.95rem;
  transition: background .15s, color .15s;
}
.menu li a:hover { background: #efe6d4; color: var(--ink); }
.menu li a.is-active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* 전체보기: 살짝 크고 굵게 */
.menu li a.menu__all {
  font-size: 1.05rem;
  font-weight: 700;
}

/* 구분선 */
.menu__divider {
  list-style: none;
  height: 0;
  border-top: 1px solid var(--line);
  margin: 9px 8px;
}

/* GAME Talk: 펼침/접힘 표시 캐럿 */
.menu a[data-cat="game"] { position: relative; }
.menu a[data-cat="game"]::after {
  content: "▸";
  position: absolute;
  right: 12px;
  font-size: 0.75rem;
  color: var(--ink-soft);
  transition: transform .18s;
}
.menu a[data-cat="game"].is-active::after { color: #fff; }
.menu.game-open a[data-cat="game"]::after { transform: rotate(90deg); }

/* 하위 메뉴(들여쓰기 + 가지표시) — 기본 접힘, GAME Talk 누르면 펼침 */
.menu__sub { display: none; }
.menu.game-open .menu__sub { display: block; }
.menu__sub a {
  position: relative;
  padding-left: 28px;
  font-size: 0.88rem;
}
.menu__sub a::before {
  content: "└";
  position: absolute;
  left: 11px;
  color: var(--ink-soft);
  opacity: 0.55;
}
.menu__sub a.is-active::before { color: #fff; opacity: 0.85; }

/* ----- 내용 위 툴바 + 전체 목록 패널 ----- */
.toolbar { margin-bottom: 16px; }
.toolbar__btn {
  font: inherit;
  font-weight: 600;
  color: var(--accent-dk);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.toolbar__btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.toolbar__btn[aria-expanded="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }

.postlist {
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 20px;
}
.postlist li + li { border-top: 1px solid var(--line); }
.postlist button {
  width: 100%;
  display: flex; align-items: baseline; gap: 10px;
  text-align: left;
  font: inherit;
  background: none; border: none; cursor: pointer;
  padding: 13px 18px;
  transition: background .12s;
}
.postlist button:hover { background: #eef1f7; }
.postlist .pl__cat {
  flex: 0 0 auto;
  font-size: 0.7rem; font-weight: 700; letter-spacing: .5px;
  color: #fff; background: var(--accent);
  padding: 2px 8px; border-radius: 20px;
}
.postlist .pl__title { flex: 1 1 auto; font-weight: 600; color: var(--ink); }
.postlist .pl__date { flex: 0 0 auto; font-size: 0.78rem; color: #97a0b3; }

.menu__profile {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
  text-align: center;
}
.avatar {
  width: 56px; height: 56px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--serif);
  font-size: 1.6rem;
  display: flex; align-items: center; justify-content: center;
}
.menu__name { font-weight: 700; }
.menu__bio { font-size: 0.82rem; color: var(--ink-soft); margin-top: 4px; }

/* ----- 콘텐츠 ----- */
.content__head {
  display: flex; align-items: baseline; gap: 10px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 10px;
  margin-bottom: 22px;
}
.content__head h2 {
  font-family: var(--serif);
  font-size: 1.5rem;
}
.content__count { font-size: 0.85rem; color: var(--ink-soft); }
.admin-link {
  margin-left: auto;
  font-size: 0.8rem; font-weight: 600;
  color: var(--accent-dk);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 12px;
  transition: background .15s, color .15s, border-color .15s;
}
.admin-link:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ----- 단일 글(reader): 한 번에 1개만 표시 ----- */
.reader {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.reader__thumb {
  height: 180px;
  display: flex; align-items: center; justify-content: center;
  font-size: 3.2rem;
  color: rgba(255,255,255,0.95);
}
.reader__body { padding: 26px 30px 30px; }
.reader__cat {
  display: inline-block;
  font-size: 0.74rem;
  letter-spacing: 1px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  padding: 3px 10px;
  border-radius: 20px;
}
.reader__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.72rem;
  line-height: 1.4;
  margin: 14px 0 6px;
}
.reader__date { font-size: 0.82rem; color: #97a0b3; margin-bottom: 16px; }
.reader__text { font-size: 1rem; color: var(--ink); line-height: 1.9; }
.reader__text p { margin-bottom: 14px; }

/* 관리자 전용: 글 삭제 버튼 */
.reader__del {
  margin-top: 8px;
  font: inherit; font-size: 0.82rem; font-weight: 600;
  color: #b4453f; background: #fbeceb;
  border: 1px solid #f0cfcd; border-radius: 9px;
  padding: 7px 14px; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.reader__del:hover { background: #b4453f; color: #fff; border-color: #b4453f; }

/* ----- 페이저(이전/다음 글) ----- */
.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}
.pager__btn {
  font: inherit;
  font-weight: 600;
  color: var(--accent-dk);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.pager__btn:hover:not(:disabled) { background: var(--accent); color: #fff; border-color: var(--accent); }
.pager__btn:disabled { opacity: 0.4; cursor: default; }
.pager__info { font-size: 0.85rem; color: var(--ink-soft); }

.empty { text-align: center; padding: 50px 0; color: var(--ink-soft); }

/* ----- 방명록 ----- */
.gb-form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 18px 16px;
  margin-bottom: 22px;
}
.gb-form__row { margin-bottom: 10px; }
.gb-form input,
.gb-form textarea {
  width: 100%;
  font: inherit;
  font-size: 1.12rem;        /* 약 15% 확대 */
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 15px;        /* 약 15% 확대 */
  resize: vertical;
}
.gb-form input:focus,
.gb-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(91, 111, 158, 0.12);
}
.gb-form__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.gb-status { font-size: 0.85rem; color: var(--ink-soft); }
.gb-submit {
  font: inherit; font-weight: 600;
  font-size: 1.12rem;        /* 약 15% 확대 */
  color: #fff; background: var(--accent);
  border: none; border-radius: 10px;
  padding: 11px 26px; cursor: pointer;   /* 약 15% 확대 */
  transition: background .15s;
}
.gb-submit:hover:not(:disabled) { background: var(--accent-dk); }
.gb-submit:disabled { opacity: 0.5; cursor: default; }

.gb-list { list-style: none; display: grid; gap: 18px; }
.gb-item {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 18px;
}
/* 글 사이 구분선(카드 사이 가운데 짧은 점선) */
.gb-item + .gb-item::before {
  content: "";
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  width: 42%;
  border-top: 1px dashed var(--line);
}
.gb-item__head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 6px;
}
.gb-item__name { font-weight: 700; color: var(--accent-dk); }
.gb-item__date { font-size: 0.78rem; color: #97a0b3; }
.gb-item__msg { color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.gb-empty {
  text-align: center; padding: 36px 0;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

/* 관리자: 삭제 버튼 + 단일 칼럼 레이아웃 */
.layout--narrow { grid-template-columns: 1fr; max-width: 720px; }
.gb-item__head { position: relative; }
.gb-del {
  margin-left: auto;
  font: inherit; font-size: 0.78rem; font-weight: 600;
  color: #b4453f; background: #fbeceb;
  border: 1px solid #f0cfcd; border-radius: 8px;
  padding: 3px 10px; cursor: pointer;
  transition: background .15s, color .15s;
}
.gb-del:hover { background: #b4453f; color: #fff; border-color: #b4453f; }

.admin-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 16px;
}
.gb-delall {
  font: inherit; font-weight: 600;
  color: #fff; background: #b4453f;
  border: none; border-radius: 10px;
  padding: 9px 18px; cursor: pointer;
  transition: background .15s;
}
.gb-delall:hover:not(:disabled) { background: #97352f; }
.gb-delall:disabled { opacity: 0.45; cursor: default; }

/* ----- 소개 페이지 ----- */
.about {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 30px 30px;
  line-height: 1.9;
}
.about p { margin-bottom: 14px; color: var(--ink); }
.about em { color: var(--accent-dk); font-style: normal; font-weight: 600; }
.about__contact {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px dashed var(--line);
  text-align: center;
}
.about__contact-label { font-weight: 600; margin-bottom: 12px; }
.contact-btn {
  font: inherit; font-weight: 700; font-size: 1.05rem;
  color: #fff; background: var(--accent);
  border: none; border-radius: 12px;
  padding: 12px 28px; cursor: pointer;
  transition: background .15s, transform .15s;
}
.contact-btn:hover { background: var(--accent-dk); transform: translateY(-1px); }
.about__contact-hint { font-size: 0.82rem; color: var(--ink-soft); margin-top: 10px; }

/* ----- 푸터 ----- */
.foot {
  text-align: center;
  padding: 28px 20px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}

/* ===== 반응형 ===== */
@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; gap: 18px; }
  .sidebar { position: static; }
  .sidebar__toggle { display: flex; }
  .menu { display: none; margin-top: 10px; }
  .menu.is-open { display: block; }
  .posts { grid-template-columns: 1fr; }
  .hero__art { width: 100%; }   /* 모바일은 전체 폭 */
}