/* Premium corporate style — inspired by clean beauty/corporate sites */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;800&display=swap');

:root {
  --bg: #faf9f7;
  --bg-dark: #0d0d0d;
  --card: #ffffff;
  --text: #1a1a1a;
  --text-light: #f5f5f3;
  --muted: #6b6b6b;
  --accent: #2c2c2c;
  --border: #e6e1da;
  --gold: #c8a96a;
  --radius: 12px;
  --radius-sm: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(20, 30, 50, 0.05);
  --shadow-md: 0 10px 30px -12px rgba(20, 30, 50, 0.18);
  --font-serif: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
  --font-sans: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
  --header-h: 72px;
  --wrap: 1800px;
  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* 스크롤 등장 애니메이션 (JS 있을 때만 숨김, 모션 줄이기 설정 존중) */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); will-change: opacity, transform; }
  .js .reveal.is-visible { opacity: 1; transform: none; }
}

/* 키보드 포커스 접근성 */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .btn:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 본문 영역의 일반 링크는 버튼이 아닌 텍스트 형태로 표시 */
.main-content a:not(.btn):not(.hero-cta) {
  color: inherit;
  text-decoration: none;
}
.main-content a:not(.btn):not(.hero-cta):hover {
  color: inherit;
  text-decoration: none;
}
/* 홈 카드(story-card)는 텍스트 대비 유지 */
.main-content a.story-card,
.main-content a.story-card:hover,
.main-content a.story-card:visited {
  color: var(--text-light);
}
.main-content a.story-card .story-card__label,
.main-content a.story-card .story-card__title,
.main-content a.story-card .story-card__desc,
.main-content a.story-card .story-card__link {
  color: var(--text-light);
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 720px; margin: 0 auto; padding: 0 24px; }

/* —— Header —— */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-h);
  background: transparent;
  transition: background var(--transition), box-shadow var(--transition);
}
.site-header.is-scrolled,
.site-header.header-solid {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 1px 0 var(--border);
  backdrop-filter: blur(12px);
}
.site-header.header-dark {
  background: rgba(13, 13, 13, 0.07);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}
.site-header.header-dark.is-scrolled {
  background: rgba(13, 13, 13, 0.88);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-inner {
  display: flex;
  align-items: center;
  height: var(--header-h);
  gap: 24px;
}

.logo {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
  text-decoration: none;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
}
.logo-img { height: 42px; width: auto; display: block; }
/* 기본(밝은 헤더): 블랙 로고 / 어두운 헤더(메인 상단·스크롤 시): 화이트 로고 */
.logo-img--white { display: none; }
.header-dark .logo-img--black { display: none; }
.header-dark .logo-img--white { display: block; }
@media (max-width: 900px) {
  .logo-img { height: 32px; }
}
@media (min-width: 900px) {
  .logo {
    font-size: 0.85rem;
    flex-shrink: 0;
  }
}
.header-dark .logo,
.header-dark .main-nav a,
.header-dark .main-nav .nav-dropdown__btn,
.header-dark .auth-links a,
.header-dark .user-badge {
  color: var(--text-light);
}
.header-dark.is-scrolled .logo,
.header-dark.is-scrolled .main-nav a,
.header-dark.is-scrolled .main-nav .nav-dropdown__btn,
.header-dark.is-scrolled .auth-links a,
.header-dark.is-scrolled .user-badge {
  color: var(--text-light);
}
.header-solid .logo { color: var(--text); }
.header-solid .main-nav a,
.header-solid .main-nav .nav-dropdown__btn { color: var(--text); }

.main-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px 28px;
  flex: 1;
  justify-content: center;
  overflow: visible;
}
.main-nav a {
  text-decoration: none;
  color: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
  transition: opacity var(--transition);
  white-space: nowrap;
  flex: 0 0 auto;
}
.main-nav a:hover { opacity: 1; }

/* 관리자 드롭다운 (2차 메뉴) */
.nav-dropdown { position: relative; flex: 0 0 auto; }
.nav-dropdown__btn {
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  opacity: 0.85;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: opacity var(--transition);
}
.nav-dropdown__btn .caret { font-size: 0.7em; }
.nav-dropdown:hover .nav-dropdown__btn,
.nav-dropdown:focus-within .nav-dropdown__btn { opacity: 1; }
.nav-dropdown__menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 18px 40px -16px rgba(20,30,50,0.28);
  padding: 8px 0;
  margin-top: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 200;
}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* 버튼과 메뉴 사이 간격에서도 hover 유지되도록 다리 역할 */
.nav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
}
.nav-dropdown__menu a {
  display: block !important;
  padding: 10px 18px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text) !important;
  white-space: nowrap;
  opacity: 1;
}
.nav-dropdown__menu a:hover { background: #f5f4f1; }

/* 사용자 배지 드롭다운 (우측 상단, 메뉴 우측 정렬) */
.user-dropdown { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; }
.user-dropdown .user-badge { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; opacity: 0.9; }
.user-dropdown:hover .user-badge, .user-dropdown:focus-within .user-badge { opacity: 1; }
.user-dropdown .caret { font-size: 0.7em; }
.user-dropdown .nav-dropdown__menu { left: auto; right: 0; transform: translateX(0) translateY(6px); }
.user-dropdown:hover .nav-dropdown__menu,
.user-dropdown:focus-within .nav-dropdown__menu { transform: translateX(0) translateY(0); }

/* —— 리치 텍스트 에디터 —— */
.rte { border: 1px solid #cbd5e1; border-radius: 10px; overflow: hidden; background: #fff; }
.rte-toolbar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 8px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
.rte-toolbar .rte-btn, .rte-toolbar .rte-ctl { height: 32px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; cursor: pointer; font-size: 0.85rem; color: #0f172a; padding: 0 9px; line-height: 1; }
.rte-toolbar .rte-btn { min-width: 32px; display: inline-flex; align-items: center; justify-content: center; }
.rte-toolbar .rte-btn:hover, .rte-toolbar .rte-ctl:hover { background: #eef2f7; }
.rte-toolbar .rte-color { display: inline-flex; align-items: center; gap: 4px; height: 32px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; padding: 0 6px 0 9px; font-size: 0.85rem; color: #0f172a; }
.rte-toolbar .rte-color input[type=color] { width: 26px; height: 24px; border: 0; background: none; padding: 0; cursor: pointer; }
/* 주요 색상 스와치 (색선택 아래 고정) */
.rte-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 7px 8px; border-bottom: 1px solid #e2e8f0; background: #fcfdfe; }
.rte-swatches-label { font-size: 0.72rem; color: #94a3b8; margin-right: 4px; }
.rte-swatch { width: 20px; height: 20px; padding: 0; border: 1px solid rgba(15,23,42,0.18); border-radius: 5px; cursor: pointer; box-shadow: 0 1px 1px rgba(0,0,0,0.05); }
.rte-swatch:hover { transform: scale(1.12); border-color: rgba(15,23,42,0.45); }
.rte-area { min-height: 180px; padding: 14px 16px; outline: none; font-size: 0.97rem; line-height: 1.8; color: #0f172a; }
.rte-area:focus { box-shadow: inset 0 0 0 2px rgba(15,23,42,0.08); }
.rte-area:empty::before { content: '내용을 입력하세요'; color: #94a3b8; }
.rte-area ul, .prose-board ul { list-style: disc; padding-left: 1.5em; margin: 0.5em 0; }
.rte-area ol, .prose-board ol { list-style: decimal; padding-left: 1.5em; margin: 0.5em 0; }
.rte-area blockquote, .prose-board blockquote { border-left: 3px solid #cbd5e1; padding-left: 12px; color: #475569; margin: 0.6em 0; }
.prose-board a { color: #1d4ed8 !important; text-decoration: underline; }
.prose-board img { max-width: 100%; height: auto; }
.rte-area img { max-width: 100%; height: auto; }
/* 툴바 구분선 + 본문 삽입 버튼 */
.rte-toolbar .rte-sep { width: 1px; height: 22px; background: #cbd5e1; margin: 0 4px; display: inline-block; }
.rte-toolbar .rte-btn--ins { width: auto; font-size: 0.8rem; font-weight: 600; gap: 3px; padding: 0 10px; }
/* 임시저장(초안) 복구 바 */
.rte-draft-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; padding: 9px 12px; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px; font-size: 0.85rem; color: #92400e; }
.rte-draft-btn { padding: 5px 12px; border: 1px solid #f59e0b; border-radius: 6px; background: #fff; color: #b45309; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.rte-draft-btn:hover { background: #fff7e0; }
.rte-draft-btn--off { border-color: #cbd5e1; color: #64748b; }
.rte-draft-btn--off:hover { background: #f1f5f9; }

/* —— 모바일 햄버거 메뉴 —— */
.nav-toggle { display: none; }
.nav-toggle span {
  display: block; width: 22px; height: 2px; margin: 0 auto;
  background: var(--text); border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}
.header-dark .nav-toggle span,
.header-dark.is-scrolled .nav-toggle span { background: #fff; }
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav {
  position: fixed; top: 0; right: 0;
  height: 100vh; height: 100dvh;
  width: min(82vw, 300px);
  background: #fff;
  box-shadow: -12px 0 44px rgba(0, 0, 0, 0.18);
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
  z-index: 1200; overflow-y: auto;
  padding: 80px 0 32px;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav__inner { display: flex; flex-direction: column; }
.mobile-nav a {
  padding: 15px 28px; color: var(--text); text-decoration: none;
  font-size: 0.95rem; font-weight: 500;
  border-bottom: 1px solid var(--border);
}
.mobile-nav a:hover { background: #f7f5f2; }
.mobile-nav__group {
  padding: 18px 28px 8px; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.mobile-nav__divider {
  height: 8px; background: #faf9f7;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  margin-top: 8px;
}
.mobile-nav-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
  z-index: 1100;
}
.mobile-nav-overlay.is-open { opacity: 1; visibility: visible; }
/* 769~1080px 구간은 메뉴+계정영역이 물리적으로 안 들어가므로 햄버거로 전환 (1080px 기준) */
@media (max-width: 1080px) {
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center;
    gap: 5px; width: 42px; height: 42px; padding: 0; border: 0;
    background: none; cursor: pointer; flex-shrink: 0;
  }
  .auth-links { display: none; }
}
@media (min-width: 1081px) {
  .mobile-nav, .mobile-nav-overlay { display: none; }
}
/* 중간 폭: 헤더 간격 축소로 여유 확보 */
@media (max-width: 1380px) {
  .header-inner { gap: 16px; }
  .main-nav { gap: 4px 18px; }
}

.auth-links {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  flex-shrink: 0; /* 폭 부족 시 짓눌려 글자가 세로로 꺾이는 것 방지 */
}
.auth-links a {
  color: inherit;
  text-decoration: none;
  opacity: 0.9;
  transition: opacity var(--transition);
  white-space: nowrap;
}
.auth-links a:hover { opacity: 1; }
.user-badge { font-size: 0.75rem; opacity: 0.75; white-space: nowrap; }
.user-badge em { font-style: normal; }

/* —— Main —— */
.main-content {
  padding-bottom: 80px;
  min-height: 60vh;
}
.main-content.has-header-offset {
  padding-top: var(--header-h);
}
.page-hero-mini {
  /* main-content.has-header-offset 가 이미 header 만큼 내려주므로, 위·아래 패딩을 대칭으로 → h1 세로 중앙정렬 */
  padding: 48px 0;
  background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.7)),
    url('images/hero-1.webp') center/cover;
  color: var(--text-light);
  text-align: center;
}
.page-hero-mini h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  margin: 0;
}
@media (max-width: 600px) {
  /* 모바일: 서브 히어로 높이 약 30% 축소 */
  .page-hero-mini { padding: 28px 0; }
  .page-hero-mini h1 { font-size: 1.7rem; letter-spacing: 0.05em; }
  /* 모바일: 본문 상단의 중복 제목(eyebrow + h2)은 숨김 (히어로 h1 과 중복) */
  .sub-page-title { display: none; }
}

/* —— Home hero —— */
.home-page { padding-top: 0; }
.hero-full {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-light);
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 1.2s ease;
  background-size: cover;
  background-position: center;
}
.hero-slide.is-active { opacity: 1; z-index: 1; }
.hero-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.35) 100%);
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* 첫 슬라이드(영상) 위 문구는 로딩 2.5초 후 등장 (영상 인트로와 겹침 방지) */
.hero-slide--1 .hero-inner {
  opacity: 0;
  animation: heroTextReveal 0.9s ease 2.5s forwards;
}
@keyframes heroTextReveal {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-slide--1 {
  background-color: #5a524c;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.28) 100%),
    url('images/hero-1.webp');
}
.hero-slide--2 {
  background-color: #4a5a64;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.28) 100%),
    url('images/hero-2.webp');
}
.hero-slide--3 {
  background-color: #5a524c;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.28) 100%),
    url('images/hero-1.webp');
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 0 24px;
}
.hero-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  opacity: 1;
  margin-bottom: 24px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}
.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.04em;
  margin: 0 0 20px;
  color: #ffffff;
  text-transform: none;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.85);
}
/* 긴 문장형 히어로 타이틀: 글씨를 적절히 줄이고 한글 어절이 잘리지 않게 */
.hero-title--statement {
  font-size: clamp(1.55rem, 3.4vw, 2.5rem);
  line-height: 1.45;
  letter-spacing: 0.005em;
  word-break: keep-all;
  max-width: 18em;
  margin-left: auto;
  margin-right: auto;
}
.hero-sub {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.96);
  opacity: 1;
  max-width: 520px;
  margin: 0 auto 36px;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}
.hero-cta {
  display: inline-block;
  padding: 14px 40px;
  border: 1px solid rgba(255,255,255,0.6);
  color: #fff;
  text-decoration: none;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background var(--transition), border-color var(--transition);
}
.hero-cta:hover {
  background: #fff;
  color: var(--text);
  border-color: #fff;
}
.hero-dots {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 10px;
}
.hero-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition);
}
.hero-dots button.is-active { background: #fff; }

/* —— Home sections —— */
.section-block {
  padding: 100px 0;
  background: var(--bg);
}
.section-block--alt {
  background: #fff url('images/hero-2.webp') center/cover fixed;
  position: relative;
}
.section-block--alt::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
}
.section-block--alt > .wrap {
  position: relative;
  z-index: 1;
}
.section-head {
  text-align: center;
  margin-bottom: 56px;
}
.section-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  margin: 0;
}
.section-desc {
  max-width: 560px;
  margin: 20px auto 0;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.9;
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2px;
}
.story-card {
  position: relative;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  text-decoration: none;
  color: var(--text-light);
  background: var(--bg-dark);
  overflow: hidden;
  transition: transform var(--transition);
}
.story-card:hover { transform: scale(1.02); }
.story-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, transparent 60%);
}
.story-card--1 { background: linear-gradient(135deg, #5c534c, #3a3530); }
.story-card--2 { background: linear-gradient(135deg, #4a5560, #2d3640); }
.story-card--3 { background: linear-gradient(135deg, #554a42, #352e28); }
.story-card--4 { background: linear-gradient(135deg, #454035, #2a2620); }
.story-card__label {
  position: relative;
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 8px;
}
.story-card__title {
  position: relative;
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 400;
  margin: 0 0 12px;
}
.story-card__desc {
  position: relative;
  font-size: 0.85rem;
  line-height: 1.6;
  opacity: 0.92;
  margin: 0 0 14px;
  max-width: 23em;
}
.story-card__link {
  position: relative;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* —— 우리의 이야기 리디자인 (A안 · 정돈된 3×2 그리드) —— */
.story-redesign { background: #f5f2ec; padding: 84px 0 92px; }
.story-redesign .sr-inner { max-width: 1760px; margin: 0 auto; padding: 0 24px; }
.story-redesign .sr-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.42em; color: #b08d4f; text-align: center; text-transform: uppercase; margin: 0 0 18px; }
.story-redesign .sr-eyebrow::after { content: ''; display: block; width: 28px; height: 2px; background: #c8a96a; margin: 14px auto 0; }
.story-redesign .sr-headline { font-family: var(--font-sans); font-size: 44px; font-weight: 700; letter-spacing: -0.01em; text-align: center; margin: 0 0 16px; color: #1d2733; }
.story-redesign .sr-sub { font-size: 16px; color: #7c7468; text-align: center; margin: 0 auto 52px; max-width: 520px; line-height: 1.7; }
.story-redesign .sr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.story-redesign .sr-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e6e0d6; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(28,39,51,0.03); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; text-decoration: none; color: inherit; }
.story-redesign .sr-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px -22px rgba(21,39,61,0.32); border-color: #ddd3c2; }
.story-redesign .sr-art { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; flex: none; }
.story-redesign .sr-art-svg { display: block; width: 100%; height: 100%; }
.story-redesign .sr-en { position: absolute; left: 22px; top: 18px; font-size: 11px; font-weight: 700; letter-spacing: 0.26em; color: rgba(244,242,236,0.78); text-transform: uppercase; }
.story-redesign .sr-num { position: absolute; right: 20px; bottom: 14px; font-size: 13px; font-weight: 700; color: #c8a96a; letter-spacing: 0.08em; }
.story-redesign .sr-body { padding: 24px 26px 22px; display: flex; flex-direction: column; flex: 1; }
.story-redesign .sr-title { font-family: var(--font-sans); font-size: 21px; font-weight: 700; margin: 0 0 9px; letter-spacing: -0.01em; color: #1d2733; }
.story-redesign .sr-desc { font-size: 14.5px; line-height: 1.65; color: #7c7468; margin: 0 0 20px; flex: 1; }
.story-redesign .sr-more { font-size: 13px; font-weight: 600; color: #1d2733; display: inline-flex; align-items: center; gap: 7px; letter-spacing: 0.02em; }
.story-redesign .sr-arrow { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #e6e0d6; display: grid; place-items: center; color: #b08d4f; transition: background .3s, color .3s, border-color .3s, transform .3s; font-size: 12px; }
.story-redesign .sr-card:hover .sr-arrow { background: #c8a96a; color: #fff; border-color: #c8a96a; transform: translateX(2px); }
@media (max-width: 900px) {
  .story-redesign { padding: 60px 0; }
  .story-redesign .sr-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .story-redesign .sr-headline { font-size: 32px; }
}
@media (max-width: 600px) { .story-redesign .sr-grid { grid-template-columns: 1fr; } }

.hero-disclaimer {
  background: #f3efe8;
  border-bottom: 1px solid var(--border);
  text-align: center;
  padding: 11px 20px;
}
.hero-disclaimer p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
  letter-spacing: 0.01em;
}

/* —— 메인 공지 팝업 (시안 C: 다크 사이드패널) —— */
.npopup-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(10,18,35,0.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.npopup-overlay[hidden] { display: none; }
.npopup { width: 940px; max-width: 100%; height: 540px; max-height: 90vh; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 80px rgba(10,20,40,.5); display: flex; }
.npopup-side { width: 332px; flex-shrink: 0; background: linear-gradient(165deg, #1f3258 0%, #16243f 60%, #101a30 100%); color: #fff; display: flex; flex-direction: column; min-height: 0; }
.npopup-brand { display: flex; align-items: center; gap: 10px; padding: 24px 24px 16px; }
.npopup-logo { width: 30px; height: 30px; border-radius: 6px; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #7eaaff; }
.npopup-logo svg { width: 15px; height: 17px; display: block; }
.npopup-bt { font-size: 17px; font-weight: 700; line-height: 1.15; }
.npopup-bt small { display: block; font-size: 9px; letter-spacing: 0.3em; color: rgba(255,255,255,.5); margin-top: 3px; font-weight: 600; }
.npopup-list { flex: 1; overflow-y: auto; padding: 6px 12px; border-top: 1px solid rgba(255,255,255,.1); }
.npopup-item { display: block; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 7px; padding: 12px 13px; margin-bottom: 2px; cursor: pointer; position: relative; }
.npopup-item.is-active { background: rgba(255,255,255,.1); }
.npopup-item.is-active::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; background: #7eaaff; border-radius: 2px; }
.npopup-item-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.npopup-date { font-size: 11px; color: rgba(255,255,255,.55); }
.npopup-item-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; line-height: 1.42; color: rgba(255,255,255,.72); }
.npopup-item.is-active .npopup-item-title { color: #fff; font-weight: 700; }
.npopup-badge { font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 3px; white-space: nowrap; flex-shrink: 0; }
.npopup-badge--imp { color: #fff; background: #d0492f; }
.npopup-badge--new { color: #fff; background: rgba(120,170,255,.22); border: 1px solid rgba(150,190,255,.4); }
.npopup-dont { display: flex; align-items: center; gap: 8px; padding: 15px 24px; border-top: 1px solid rgba(255,255,255,.1); cursor: pointer; font-size: 12.5px; color: rgba(255,255,255,.75); flex-shrink: 0; }
.npopup-dont input { width: auto; margin: 0; }
.npopup-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.npopup-close { position: absolute; top: 16px; right: 20px; background: transparent; border: 0; cursor: pointer; font-size: 18px; color: #8a93a3; z-index: 3; line-height: 1; }
.npopup-detail { display: none; }
.npopup-detail.is-active { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; padding: 30px 36px 10px; }
.npopup-cat-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.npopup-cat { font-size: 11.5px; font-weight: 700; color: #2a5db0; background: rgba(42,93,176,.08); padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.npopup-ddate { font-size: 12.5px; color: #9aa3b2; }
.npopup-dtitle { margin: 0; font-size: 22px; line-height: 1.36; font-weight: 700; color: #16243f; padding-right: 30px; letter-spacing: -0.02em; }
.npopup-divider { height: 1px; background: #eceef2; margin: 18px 0; }
.npopup-body p { margin: 0 0 13px; font-size: 14px; line-height: 1.78; color: #46505f; white-space: pre-line; }
.npopup-atts { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.npopup-att { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: #f7f8fa; border-radius: 7px; text-decoration: none; }
.npopup-att-ic { flex-shrink: 0; }
.npopup-att-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; color: #3b4456; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.npopup-att-size { font-size: 11.5px; color: #9aa3b2; flex-shrink: 0; margin-right: 2px; }
.npopup-att-actions { display: flex; gap: 8px; flex-shrink: 0; }
.npopup-att-act { font-size: 12px; font-weight: 600; border-radius: 5px; padding: 6px 11px; white-space: nowrap; flex-shrink: 0; text-decoration: none; border: 1px solid #c8ced8; }
.npopup-atts a.npopup-att-act { color: #16243f !important; background: #fff; }
.npopup-atts a.npopup-att-act--dl { color: #fff !important; background: #16243f; border-color: #16243f; }
.npopup-foot { padding: 14px 36px; border-top: 1px solid #eceef2; display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-shrink: 0; background: #fff; flex-wrap: wrap; }
.npopup-ghost { font-size: 13.5px; font-weight: 600; color: #16243f; background: #fff; border: 1px solid #c8ced8; border-radius: 6px; padding: 9px 16px; text-decoration: none; display: inline-flex; align-items: center; }
.npopup-solid { font-size: 13.5px; font-weight: 600; color: #fff; background: #16243f; border: 0; border-radius: 6px; padding: 9px 22px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.npopup-go { margin-right: auto; }
.npopup-foot a.npopup-go, .npopup-foot a.npopup-go:link, .npopup-foot a.npopup-go:visited, .npopup-foot a.npopup-go:hover { color: #fff !important; }
@media (max-width: 680px) {
  /* 모바일: 사이드 목록 숨기고 최신(1번) 공지 1건만 화면에 맞게 표시 */
  .npopup { flex-direction: column; height: auto; max-height: 88vh; width: 100%; }
  .npopup-side { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
  .npopup-brand { padding: 13px 16px; }
  .npopup-list { display: none; }
  .npopup-dont { border-top: 0; padding: 13px 16px; flex-shrink: 0; }
  /* 활성 1건만 노출 (목록 전환 비활성) */
  .npopup-detail { display: none; }
  .npopup-detail.is-active { display: flex; padding: 20px 18px 8px; }
  .npopup-dtitle { font-size: 18px; }
  .npopup-close { top: 14px; right: 16px; }
  .npopup-foot { padding: 12px 16px; }
  /* 첨부: 파일명 전체 노출, 보기/다운로드는 아래 줄로 (세로로 길어져도 OK) */
  .npopup-att { flex-wrap: wrap; }
  .npopup-att-name { white-space: normal; overflow: visible; text-overflow: clip; word-break: break-all; }
  .npopup-att-actions { flex-basis: 100%; justify-content: flex-end; }
}

/* —— 카카오톡 조합모임 참여 안내 —— */
.kakao-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 9px; background: #FEE500; color: #3C1E1E; cursor: pointer; padding: 0; flex-shrink: 0; }
.kakao-icon-btn svg { width: 19px; height: 19px; display: block; }
.kakao-icon-btn:hover { filter: brightness(0.96); }
.kakao-overlay { position: fixed; inset: 0; z-index: 2100; background: rgba(10,18,35,0.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.kakao-overlay[hidden] { display: none; }
.kakao-box { position: relative; width: 380px; max-width: 100%; background: #fff; border-radius: 16px; padding: 36px 28px 28px; text-align: center; box-shadow: 0 30px 80px rgba(10,20,40,.5); }
.kakao-close { position: absolute; top: 14px; right: 16px; background: transparent; border: 0; font-size: 18px; color: #9aa3b2; cursor: pointer; line-height: 1; }
.kakao-emblem { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #FEE500; color: #3C1E1E; margin-bottom: 16px; }
.kakao-emblem svg { width: 34px; height: 34px; display: block; }
.kakao-msg { margin: 0 0 22px; font-size: 1rem; line-height: 1.65; color: #1f2937; font-weight: 600; }
.kakao-join-btn { width: 100%; border: 0; border-radius: 10px; background: #FEE500; color: #3C1E1E; font-size: 0.98rem; font-weight: 800; padding: 14px; cursor: pointer; }
.kakao-join-btn:hover { filter: brightness(0.97); }
.kakao-reveal { margin-top: 18px; padding-top: 18px; border-top: 1px solid #eceef2; }
.kakao-reveal-label { margin: 0 0 10px; font-size: 0.8rem; font-weight: 700; color: #8b8170; letter-spacing: 0.02em; }
.kakao-reveal-link { display: block; background: #FEE500; color: #3C1E1E !important; text-decoration: none; font-weight: 800; border-radius: 10px; padding: 13px; font-size: 0.95rem; }
.kakao-reveal-link:hover { filter: brightness(0.97); }
.kakao-reveal-pw { margin-top: 12px; font-size: 0.92rem; color: #374151; }
.kakao-reveal-pw strong { display: inline-block; margin-left: 6px; font-size: 1.05rem; letter-spacing: 0.04em; color: #16243f; background: #f3f4f6; border-radius: 6px; padding: 3px 12px; }
.kakao-reveal-help { margin: 12px 0 0; font-size: 0.8rem; color: #9aa3b2; }
.mobile-nav__kakao { display: flex; align-items: center; gap: 8px; }
.mobile-nav__kakao-ic { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 6px; background: #FEE500; color: #3C1E1E; flex-shrink: 0; }
.mobile-nav__kakao-ic svg { width: 13px; height: 13px; display: block; }

/* —— 초대하기 버튼 / 모달 —— */
.invite-btn { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 14px; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; opacity: 0.9; white-space: nowrap; flex-shrink: 0; transition: opacity var(--transition); }
.invite-btn:hover { opacity: 1; }
/* 초대 버튼: PC는 '초대하기', 모바일은 '초대'(로고와 겹침 방지) */
.invite-btn__sm { display: none; }
@media (max-width: 768px) {
  .invite-btn__lg { display: none; }
  .invite-btn__sm { display: inline; }
  .invite-btn { padding: 0 11px; }
}
.invite-overlay { position: fixed; inset: 0; z-index: 2100; background: rgba(10,18,35,0.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.invite-overlay[hidden] { display: none; }
.invite-box { position: relative; width: 460px; max-width: 100%; background: #fff; border-radius: 16px; padding: 32px 28px 26px; box-shadow: 0 30px 80px rgba(10,20,40,.5); }
.invite-close { position: absolute; top: 14px; right: 16px; background: transparent; border: 0; font-size: 18px; color: #9aa3b2; cursor: pointer; line-height: 1; }
.invite-title { margin: 0 0 10px; font-size: 1.15rem; font-weight: 800; color: #16243f; }
.invite-desc { margin: 0 0 18px; font-size: 0.9rem; line-height: 1.65; color: #475569; }
.invite-link-row { display: flex; gap: 8px; }
.invite-link-input { flex: 1; min-width: 0; height: 44px; border: 1px solid #cbd5e1; border-radius: 10px; padding: 0 12px; font-size: 0.88rem; color: #1f2937; background: #f8fafc; }
.invite-copy-btn { height: 44px; padding: 0 18px; border: 0; border-radius: 10px; background: #0f172a; color: #fff; font-size: 0.9rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.invite-copy-btn:hover { background: #1e293b; }
.invite-copied { margin: 12px 0 0; font-size: 0.85rem; color: #16a34a; font-weight: 600; }
.invite-regen { margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed #e2e8f0; }
.invite-regen-btn { height: 40px; padding: 0 16px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: #334155; font-size: 0.86rem; font-weight: 700; cursor: pointer; }
.invite-regen-btn:hover { background: #f1f5f9; border-color: #94a3b8; }
.invite-regen-btn:disabled { opacity: .55; cursor: default; }
.invite-regen-note { margin: 8px 0 0; font-size: 0.8rem; line-height: 1.55; color: #94a3b8; }
.invite-regen-done { margin: 8px 0 0; font-size: 0.85rem; color: #d97706; font-weight: 600; }
.mobile-nav__invite { display: flex; align-items: center; gap: 8px; }

/* —— 소유자 게시판 안내문 —— */
.board-intro { display: flex; gap: 14px; align-items: flex-start; background: linear-gradient(180deg, #fdfbf6, #fbf6ec); border: 1px solid #ece0c4; border-left: 4px solid var(--gold); border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 24px; }
.board-intro__icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: rgba(200, 169, 106, 0.16); color: var(--gold); display: flex; align-items: center; justify-content: center; }
.board-intro__icon svg { width: 18px; height: 18px; display: block; }
.board-intro__body { font-size: 0.93rem; line-height: 1.78; color: #4b5563; }
.board-intro__body p { margin: 0; }
.board-intro__body p + p { margin-top: 10px; }
@media (max-width: 600px) {
  /* 모바일: 아이콘을 좌측 float → 본문이 아이콘 아래까지 흘러들어가 높이 절감 */
  .board-intro { display: flow-root; padding: 14px 16px; }
  .board-intro__icon { float: left; width: 28px; height: 28px; margin: 2px 10px 4px 0; }
  .board-intro__icon svg { width: 15px; height: 15px; }
  .board-intro__body { font-size: 0.875rem; line-height: 1.68; }
}

/* —— 공지 노출 컨트롤 (글 작성/수정, 총관리자) —— */
.fn-control { margin-top: 4px; border: 1px solid #e3d4ac; background: #fcf9f1; border-radius: var(--radius-sm); padding: 16px 18px; }
.fn-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.fn-title { font-weight: 700; font-size: 0.92rem; color: #1f2937; }
.fn-sub { font-weight: 500; font-size: 0.76rem; color: #9a8a63; }
.fn-count { font-size: 0.82rem; color: #7c6f50; }
.fn-board { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px; margin-bottom: 12px; max-height: 190px; overflow-y: auto; }
.fn-empty { font-size: 0.85rem; color: var(--muted); padding: 10px; text-align: center; }
.fn-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; font-size: 0.86rem; }
.fn-row--self { background: #eef4ff; outline: 1px solid #c7dcff; }
.fn-pos { width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #16243f; color: #fff; border-radius: 50%; font-size: 0.72rem; font-weight: 700; }
.fn-row-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #1f2937; }
.fn-row-src { font-size: 0.74rem; color: var(--muted); background: #f1efe9; padding: 2px 8px; border-radius: 10px; white-space: nowrap; flex-shrink: 0; }
.fn-badge { font-size: 0.68rem; font-weight: 700; padding: 1px 6px; border-radius: 3px; flex-shrink: 0; }
.fn-badge--imp { background: #c0392b; color: #fff; }
.fn-badge--new { background: #2a5db0; color: #fff; }
.fn-toggle { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; color: #1f2937; cursor: pointer; }
.fn-toggle input { width: auto; margin: 0; }
.fn-opts { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.fn-opt { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.fn-opt-label { font-size: 0.8rem; font-weight: 600; color: #5b6473; }
.fn-radio { display: inline-flex; align-items: center; gap: 5px; font-size: 0.84rem; color: #374151; cursor: pointer; }
.fn-radio input { width: auto; margin: 0; }
.fn-radio em { color: var(--muted); font-style: normal; font-size: 0.76rem; }
.fn-select { width: auto !important; min-width: 92px; margin: 0 !important; height: 36px; padding: 4px 10px !important; }
.fn-hint { margin: 2px 0 0; font-size: 0.82rem; color: #8b5a00; background: #fff7e6; border: 1px solid #f0dca8; border-radius: 6px; padding: 8px 10px; }

.news-strip {
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 48px 0;
}
.news-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.news-col { min-width: 0; }
.news-col__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px;
  padding-bottom: 12px;
  border-bottom: 2px solid #0f172a;
  letter-spacing: -0.01em;
}
.news-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}
.news-row__board {
  flex: 0 0 96px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #8b3a32;
  white-space: nowrap;
}
.news-row__title {
  flex: 1 1 auto;
  min-width: 0;
  color: #1f2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.news-row:hover .news-row__title { color: #000; text-decoration: underline; }
@media (max-width: 768px) {
  .news-cols { grid-template-columns: 1fr; gap: 28px; }
}
.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.news-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.news-list li:last-child { border-bottom: none; }
.news-list a {
  color: var(--text);
  text-decoration: none;
  font-weight: 400;
  flex: 1;
  transition: color var(--transition);
}
.news-list a:hover { color: var(--gold); }
.news-list time {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}

.cta-band {
  text-align: center;
  padding: 80px 24px;
  background: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.75)),
    url('images/hero-3.webp') center/cover;
  color: var(--text-light);
}
.cta-band h2 {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  margin: 0 0 16px;
  color: #ffffff;
  text-transform: none;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
}
.cta-band p {
  color: rgba(255, 255, 255, 0.95);
  opacity: 1;
  margin: 0 0 28px;
  font-weight: 400;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

/* —— 인사말(greeting) —— */
.greeting {
  max-width: 880px;
  margin: 0 auto;
}
.greeting-hero {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 44px;
  box-shadow: 0 24px 60px rgba(20, 30, 50, 0.18);
}
.greeting-hero img {
  display: block;
  width: 100%;
  height: 360px;
  object-fit: cover;
}
.greeting-hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px 44px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.12) 55%, rgba(0, 0, 0, 0.30) 100%);
  color: #fff;
}
.greeting-hero__eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin: 0 0 10px;
  opacity: 0.85;
}
.greeting-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  font-weight: 400;
  color: #fff;
  margin: 0;
  letter-spacing: 0.02em;
}
.greeting-hero__sub {
  margin: 12px 0 0;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.88);
}
.greeting-body {
  font-size: 1.05rem;
  line-height: 2.05;
  color: #2b3340;
  word-break: keep-all;
}
.greeting-body p {
  margin: 0 0 1.55em;
}
.greeting-lead {
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.95;
  color: #161c26;
  padding-left: 18px;
  border-left: 3px solid var(--accent, #8b3a32);
}
.greeting-sign {
  margin-top: 2.6em !important;
  margin-bottom: 0 !important;
  text-align: right;
  font-family: var(--font-serif);
  font-size: 1.12rem;
  color: #3f4a5a;
}
@media (max-width: 768px) {
  .greeting-hero img { height: 230px; }
  .greeting-hero__overlay { padding: 24px 22px; }
  .greeting-body { font-size: 1rem; line-height: 1.95; }
  .greeting-lead { font-size: 1.1rem; }
}

/* —— Cards / forms (inner pages) —— */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 36px;
  margin-bottom: 24px;
}
.card--flat { box-shadow: none; }
h1 { font-family: var(--font-serif); font-size: 1.75rem; font-weight: 400; letter-spacing: 0.04em; margin: 0 0 20px; }
.card h2,
.perm-matrix h2 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: var(--accent);
}
.perm-matrix .menu-action-grid {
  border-collapse: separate;
  border-spacing: 0;
}
.perm-matrix .menu-action-grid th,
.perm-matrix .menu-action-grid td {
  border-bottom: 1px solid #eef1f5;
  vertical-align: top;
}
.perm-matrix .menu-action-grid th.audience-col {
  text-align: center;
  vertical-align: middle;
  font-weight: 700;
  font-size: 0.74rem;
  color: #1e293b;
  padding: 6px;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
/* 등급 그룹 시작 지점 세로 구분선 */
.perm-matrix .menu-action-grid .audience-group-start {
  border-left: 2px solid #cbd5e1;
}
.perm-matrix .menu-action-grid td.audience-cell { padding: 4px 6px; }
/* 메뉴명 첫 열 고정 */
.perm-matrix .menu-action-grid th.menu-col,
.perm-matrix .menu-action-grid td.menu-col {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #fff;
  text-align: left;
  white-space: nowrap;
  font-weight: 600;
  box-shadow: 2px 0 0 #e2e8f0;
  min-width: 128px;
  vertical-align: middle;
}
.perm-matrix .menu-action-grid th.menu-col { background: #f8fafc; z-index: 4; }
.perm-matrix .menu-action-grid tr:hover td.menu-col { background: #eef2f7; }
.perm-matrix .menu-action-grid th.audience-sub { padding: 2px 6px 5px; border-bottom: 1px solid var(--border); }
/* 한 칸에 노출/읽기/권한 체크박스 3개 나란히 (ㅁㅁㅁ), 헤더 라벨과 3등분 정렬 */
.perm-matrix .permrow { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; justify-items: center; gap: 4px; }
.perm-matrix .permrow .pc { width: 15px; height: 15px; margin: 0; cursor: pointer; }
.perm-matrix .permrow .pc--view { accent-color: #475569; }
.perm-matrix .permrow .pc--read { accent-color: #2563eb; }
.perm-matrix .permrow .pc--perm { accent-color: #b45309; }
.perm-matrix .permrow .pc--off { accent-color: #cbd5e1; cursor: not-allowed; }
.perm-matrix .permrow--head span { font-size: 0.66rem; font-weight: 700; white-space: nowrap; }
.perm-matrix .permrow--head span:nth-child(1) { color: #475569; }
.perm-matrix .permrow--head span:nth-child(2) { color: #2563eb; }
.perm-matrix .permrow--head span:nth-child(3) { color: #b45309; }
.perm-matrix .menu-action-grid tr:hover td { background: #f6f8fb; }
/* 범례 */
.perm-legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 10px 0 14px; font-size: 0.82rem; }
.perm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.perm-sw { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }
.perm-sw--view { background: #475569; }
.perm-sw--read { background: #2563eb; }
.perm-sw--perm { background: #b45309; }
.home-page .section-title {
  color: var(--text);
  text-transform: none;
  font-weight: 400;
}

/* 플래시 메시지 — 고정 헤더 바로 아래 */
.site-flash-bar {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 999;
  padding: 10px 0;
  background: rgba(250, 249, 247, 0.97);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.site-flash-bar__inner .alert {
  margin-bottom: 0;
}
.site-flash-bar__inner .alert + .alert {
  margin-top: 8px;
}

.alert {
  padding: 16px 20px;
  margin-bottom: 24px;
  font-size: 0.9rem;
  border-left: 3px solid;
}
.alert-error { background: #faf5f4; color: #8b3a32; border-color: #c0392b; }
.alert-info { background: #f5f8fa; color: #2c4a5c; border-color: var(--gold); }

.list-search-bar {
  margin-top: 20px;
  padding: 20px 22px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
}
.list-search-bar__title {
  margin: 0 0 14px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #334155;
}
.list-search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.list-search-field {
  display: flex;
  flex-direction: column;
  flex: 1 1 160px;
  min-width: 0;
}
.list-search-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
}
.list-search-field input {
  width: 100%;
  min-width: 0;
  margin: 0;
  height: 42px;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  font-size: 0.9rem;
  font-family: inherit;
}
.list-search-field input:focus {
  outline: none;
  border-color: #0f172a;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.list-search-field--no {
  flex: 0 0 120px;
}
.list-search-field--no input {
  min-width: 0;
  max-width: none;
}
.list-search-actions {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.list-search-actions .btn-sm {
  height: 42px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.col-no {
  width: 48px;
  text-align: center;
  white-space: nowrap;
}
.perm-bulk { cursor: pointer; user-select: none; white-space: nowrap; }
.perm-bulk:hover { color: var(--gold); }
.perm-bulk:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.board-post-image img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: 16px;
}
.board-youtube {
  position: relative;
  margin-top: 16px;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 720px;
  background: #000;
}
.board-youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel],
input[type=datetime-local], input[type=file], textarea, select {
  width: 100%;
  max-width: 100%;
  padding: 11px 14px;
  border: 1px solid #d4cec6;
  border-radius: var(--radius-sm);
  margin-bottom: 24px;
  font: inherit;
  background: #ffffff;
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--text);
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08);
}

/* 값이 들어간 입력칸 표시 */
input.has-value, textarea.has-value, select.has-value {
  background: #ffffff;
  border-color: #b9b1a6;
}

.input-with-suffix.has-value {
  background: #efeae4;
}
textarea { min-height: 140px; resize: vertical; }

.btn {
  display: inline-block;
  padding: 12px 26px;
  background: var(--text);
  color: #fff;
  border: 1px solid var(--text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  transition: background var(--transition), color var(--transition), opacity var(--transition);
}
.btn:hover { background: transparent; color: var(--text); }
.btn-outline {
  background: transparent;
  color: var(--text);
}
.btn-outline:hover { background: var(--text); color: #fff; }
.btn-secondary { background: transparent; color: var(--muted); border-color: var(--border); }
.btn-secondary:hover { background: var(--text); color: #fff; border-color: var(--text); }
.btn-danger { background: #8b3a32; border-color: #8b3a32; }
.btn-danger:hover { background: transparent; color: #8b3a32; }
.btn-sm { padding: 8px 16px; font-size: 0.7rem; }

/* 인라인 액션 행: 셀렉트박스 + 버튼 높이/세로정렬 통일 (전역 재사용) */
.inline-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.inline-actions > select,
.inline-actions > input,
.inline-actions > button,
.inline-actions > .btn,
.inline-actions > .btn-sm,
.inline-actions > a.btn {
  margin: 0;
  height: 38px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1.2;
}
.inline-actions > select {
  padding: 4px 12px;
  font-size: 0.85rem;
}
.inline-actions > .btn,
.inline-actions > .btn-sm,
.inline-actions > button {
  padding-top: 0;
  padding-bottom: 0;
}
.inline-actions > label {
  margin: 0;
  white-space: nowrap;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  font-size: 0.9rem;
}
th, td {
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 14px 12px;
  text-align: left;
}
th {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
}
.muted { color: var(--muted); font-size: 0.9rem; }
.unit-fieldset {
  border: 1px solid var(--border);
  padding: 20px 20px 8px;
  margin: 0 0 24px;
}
.unit-fieldset legend {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 0 6px;
}
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.input-with-suffix {
  display: flex;
  align-items: center;
  border: 1px solid #ddd8d3;
  background: #f7f4f1;
  margin-bottom: 24px;
}
.input-with-suffix input {
  flex: 1;
  margin-bottom: 0;
  border: none;
  background: transparent;
}
.input-with-suffix .suffix {
  padding: 12px 0 12px 8px;
  color: var(--muted);
  font-size: 0.95rem;
}
.unit-preview { margin: -8px 0 16px; min-height: 1.2em; }
.checkbox-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  cursor: pointer;
}
.checkbox-line input { width: auto; margin: 4px 0 0; }
.grid-media {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}
.media-item {
  border: 1px solid var(--border);
  padding: 16px;
  background: #fff;
}
.media-item img, .media-item video { width: 100%; display: block; }
.media-thumb {
  border: none;
  padding: 0;
  margin: 0 0 8px 0;
  background: transparent;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.business-embed-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.business-embed-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.business-embed-thumb__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 24px;
  line-height: 56px;
  text-align: center;
}
.business-embed-inline {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.business-embed-inline iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.business-embed-thumb iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.business-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
}
.business-modal.is-active { display: block; }
.business-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}
.business-modal__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 920px;
  width: 92%;
  max-height: 90vh;
  background: #fff;
  padding: 24px;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.business-modal__media img,
.business-modal__media video,
.business-modal__media iframe {
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border: 0;
  display: block;
}
.business-modal__embed-wrap {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.business-modal__embed-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.business-modal__close {
  position: absolute;
  top: 8px;
  right: 12px;
  border: none;
  background: transparent;
  font-size: 1.2rem;
  cursor: pointer;
}
.perm-matrix { overflow-x: auto; }
.perm-matrix table { font-size: 0.8rem; }
.perm-matrix input[type=checkbox] { margin: 0; }

/* —— Footer —— */
.site-footer {
  background: var(--bg-dark);
  color: rgba(255,255,255,0.6);
  padding: 64px 0 32px;
  font-size: 0.8rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
@media (max-width: 1080px) {
  .site-header {
    height: var(--header-h);
  }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .main-nav { display: none; }
  .site-header .wrap.header-inner {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-inner {
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    height: var(--header-h);
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  .logo {
    font-size: clamp(0.58rem, 2.75vw, 0.72rem);
    letter-spacing: -0.04em;
    flex: 1 1 auto;
  }
  .auth-links {
    flex-shrink: 0;
    gap: 8px;
    font-size: 0.65rem;
    white-space: nowrap;
  }
}
.footer-brand {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
  color: #fff;
  margin-bottom: 16px;
  line-height: 1.45;
  max-width: 280px;
}
.footer-col h4 {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin: 0 0 16px;
  font-weight: 500;
}
.footer-col a {
  display: block;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  margin-bottom: 10px;
  transition: color var(--transition);
}
.footer-col a:hover { color: #fff; }
.footer-col-menu {
  display: block;
}
.footer-col-menu h4 {
  margin-bottom: 16px;
}
.footer-col-menu a {
  margin-bottom: 10px;
  white-space: nowrap;
}
.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.footer-contacts {
  margin-top: 12px;
  text-align: center;
  color: rgba(255,255,255,0.7);
  font-size: 0.85rem;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .footer-col-menu {
    display: block;
  }
  .footer-col-menu a {
    margin-bottom: 10px;
  }
}

/* ───────── 게시판 다중 첨부 + 상단고정 ───────── */
/* 상단고정 배지 */
.pin-badge {
  display: inline-block;
  vertical-align: middle;
  background: #b91c1c;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
/* 상단고정 체크박스 라벨 (글쓰기/수정 폼) */
label.pin-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: #334155;
  cursor: pointer;
}
label.pin-check input[type=checkbox] { width: auto; margin: 0; }

/* 상단고정 컨트롤 (눈에 띄는 박스) */
label.pin-control {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0;
  padding: 14px 16px;
  border: 1.5px solid #fcd34d;
  border-radius: 12px;
  background: linear-gradient(180deg, #fffdf5 0%, #fffbeb 100%);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
label.pin-control:hover { border-color: #f59e0b; }
label.pin-control.is-on { border-color: #f59e0b; background: #fff5d6; box-shadow: 0 0 0 3px rgba(245,158,11,0.18); }
.pin-control-cb { width: 18px !important; height: 18px; margin: 1px 0 0; flex: 0 0 auto; accent-color: #d97706; cursor: pointer; }
.pin-control-icon { font-size: 1.1rem; line-height: 1.25; flex: 0 0 auto; }
.pin-control-body { display: flex; flex-direction: column; gap: 3px; }
.pin-control-title { font-size: 0.95rem; font-weight: 800; color: #92400e; letter-spacing: 0; }
label.pin-control.is-on .pin-control-title::after { content: ' · 고정됨'; color: #b45309; font-weight: 700; }
.pin-control-desc { font-size: 0.8rem; color: #78716c; line-height: 1.55; font-weight: 400; }

/* 다중 첨부 입력 */
.attach-inputs { display: block; }
.attach-rows { display: flex; flex-direction: column; gap: 8px; }
.attach-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.attach-row input[type=file].attach-file {
  flex: 1 1 auto;
  margin: 0;
  padding: 8px 10px;
  font-size: 0.85rem;
}
.attach-chosen { flex: 1 0 100%; font-size: 0.78rem; color: #475569; margin-top: 2px; word-break: break-all; }
.attach-remove {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #64748b;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}
.attach-remove:hover { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }
.attach-add {
  margin-top: 10px;
  padding: 7px 14px;
  border: 1px dashed #94a3b8;
  border-radius: 8px;
  background: #f8fafc;
  color: #334155;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.attach-add:hover { background: #f1f5f9; border-color: #64748b; }
.attach-hint { margin: 8px 0 0; font-size: 0.75rem; color: #94a3b8; }

/* 수정 화면: 기존 첨부 삭제 목록 */
.attach-existing {
  margin-bottom: 12px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.attach-existing-title { margin: 0 0 8px; font-size: 0.8rem; font-weight: 600; color: #475569; }
.attach-existing-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.attach-existing-list label {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0; font-size: 0.85rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: #334155;
  cursor: pointer; word-break: break-all;
}
.attach-existing-list input[type=checkbox] { width: auto; margin: 0; }

/* 상세 화면: 첨부 보기 */
.attach-view-item { margin-bottom: 18px; }
.attach-view-item:last-child { margin-bottom: 0; }
.attach-view-meta {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.attach-view-name { font-size: 0.88rem; color: #475569; word-break: break-all; }
.attach-doc { display: flex; align-items: center; gap: 10px; padding: 16px 18px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; }
.attach-doc-ico { font-size: 1.5rem; line-height: 1; }
.attach-doc-label { font-size: 0.85rem; font-weight: 600; color: #475569; }
.attach-view-actions { display: inline-flex; gap: 8px; flex: 0 0 auto; }
.attach-btn {
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  border: 1px solid #cbd5e1; border-radius: 8px;
  background: #fff; color: #334155;
  font-size: 0.82rem; font-weight: 600; text-decoration: none;
}
.attach-btn:hover { background: #f8fafc; }
.attach-btn--dl { background: #0f172a; border-color: #0f172a; color: #fff; }
.attach-btn--dl:hover { background: #1e293b; color: #fff; }

/* 상단고정 순서변경 */
.pin-reorder-toggle {
  padding: 7px 14px;
  border: 1px solid #cbd5e1; border-radius: 8px;
  background: #fff; color: #334155;
  font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
.pin-reorder-toggle:hover, .pin-reorder-toggle.is-open { background: #f1f5f9; }
.pin-reorder {
  margin-top: 10px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e2e8f0; border-radius: 12px;
}
.pin-reorder-title { margin: 0 0 10px; font-size: 0.85rem; font-weight: 700; color: #334155; }
.pin-reorder-hint { font-weight: 400; color: #94a3b8; font-size: 0.78rem; }
.pin-reorder-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pin-reorder-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
}
.pin-reorder-name { font-size: 0.88rem; color: #334155; word-break: break-all; }
.pin-reorder-btns { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.pin-reorder-btns form { margin: 0; }
.pin-btn {
  padding: 5px 9px;
  border: 1px solid #cbd5e1; border-radius: 6px;
  background: #fff; color: #334155;
  font-size: 0.8rem; font-weight: 600; cursor: pointer; line-height: 1;
}
.pin-btn:hover:not(:disabled) { background: #eef2f7; }
.pin-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.pin-btn--off { color: #b91c1c; border-color: #fca5a5; }
.pin-btn--off:hover { background: #fef2f2; }

/* 일반 게시물 전체순서변경 ▲▼ (목록 등록일 옆) */
.reorder-date { vertical-align: middle; }
.reorder-cell { display: inline-flex; vertical-align: middle; margin-left: 8px; }
.reorder-form { display: inline-flex; gap: 2px; margin: 0; }
.reorder-btn {
  width: 22px; height: 20px; padding: 0;
  border: 1px solid #cbd5e1; border-radius: 5px;
  background: #fff; color: #475569;
  font-size: 0.62rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.reorder-btn:hover { background: #eef2f7; border-color: #94a3b8; color: #0f172a; }

/* ============================================================
   v22 신규 UI (조회수·방문통계·투표·건의사항·승인배너·초대·모바일)
   ============================================================ */

/* 열람전용 안내 */
.readonly-note {
  margin: 0 0 16px; padding: 11px 14px;
  background: #fff8e1; border: 1px solid #ffe082; border-radius: 10px;
  color: #7c5c05; font-size: 0.88rem; line-height: 1.5;
}
.readonly-note strong { color: #6b4e00; }

/* 맨 위로 버튼 */
.reorder-btn--top { font-size: 0.72rem; }

/* 승인 대기 알림 배너 */
.approval-banner { background: linear-gradient(90deg,#fef3c7,#fde68a); border-bottom: 1px solid #f59e0b; }
.approval-banner__inner {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 20px; text-decoration: none; color: #78350f;
}
.approval-banner__icon { font-size: 1.1rem; }
.approval-banner__text { flex: 1; font-size: 0.92rem; }
.approval-banner__text strong { color: #7c2d12; }
.approval-banner__special { color: #b91c1c; font-style: normal; font-weight: 600; margin-left: 4px; }
.approval-banner__go { font-weight: 700; font-size: 0.88rem; white-space: nowrap; }
.approval-banner__inner:hover { background: rgba(255,255,255,0.25); }

/* 추천회원 명단 박스 (소유자 게시판 상세) */
.referred-box {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
  margin: 0 0 16px; padding: 10px 14px;
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px;
  font-size: 0.88rem; color: #1e40af;
}
.referred-box__label { font-weight: 700; }
.referred-box__list strong { color: #1e3a8a; }

/* 방문통계 (관리자 전용) */
.vstat-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 900;
  background: #0f172a; color: #fff; padding: 10px 16px; border-radius: 999px;
  font-size: 0.85rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 20px rgba(15,23,42,0.3);
}
.vstat-fab:hover { background: #1e293b; }
.vstat-modal {
  position: fixed; inset: 0; z-index: 1000; display: flex;
  align-items: center; justify-content: center;
  background: rgba(15,23,42,0.55); padding: 16px;
}
.vstat-modal[hidden] { display: none; }
.vstat-box {
  position: relative; background: #fff; border-radius: 16px;
  width: 100%; max-width: 560px; max-height: 85vh; overflow-y: auto;
  padding: 26px 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.vstat-close {
  position: absolute; top: 14px; right: 14px; border: none; background: none;
  font-size: 1.2rem; cursor: pointer; color: #94a3b8;
}
.vstat-title { margin: 0 0 4px; font-size: 1.1rem; font-weight: 700; color: #0f172a; }
.vstat-sub { font-size: 0.75rem; color: #94a3b8; font-weight: 500; }
.vstat-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 16px 0; }
.vstat-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px 8px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px;
}
.vstat-num { font-size: 1.6rem; font-weight: 800; color: #0f172a; }
.vstat-lbl { font-size: 0.78rem; color: #64748b; }
.vstat-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vstat-btn {
  background: #0f172a; color: #fff; border: none; border-radius: 8px;
  padding: 8px 16px; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.vstat-hint { font-size: 0.78rem; color: #94a3b8; }
.vstat-records { margin-top: 16px; border-top: 1px solid #e2e8f0; padding-top: 14px; }
.vstat-records-head { font-size: 0.85rem; font-weight: 700; color: #334155; margin-bottom: 10px; }
.vstat-mut { color: #94a3b8; font-size: 0.82rem; }
.vstat-list { display: flex; flex-direction: column; gap: 6px; }
.vstat-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; background: #f8fafc; border-radius: 8px; font-size: 0.82rem;
}
.vstat-time { color: #475569; font-variant-numeric: tabular-nums; }
.vstat-who { padding: 1px 8px; border-radius: 999px; font-weight: 600; font-size: 0.75rem; }
.vstat-who.is-mem { background: #dcfce7; color: #166534; }
.vstat-who.is-guest { background: #f1f5f9; color: #64748b; }
.vstat-pagebtn { margin-left: auto; border: 1px solid #cbd5e1; background: #fff; border-radius: 6px; padding: 3px 9px; font-size: 0.75rem; cursor: pointer; color: #475569; }
.vstat-pages { flex-basis: 100%; margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.vstat-page { display: flex; justify-content: space-between; padding: 4px 8px; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 0.78rem; }
.vstat-ppage { font-weight: 600; color: #334155; }
.vstat-pat { color: #94a3b8; font-variant-numeric: tabular-nums; }

/* 투표 결과 바 */
.vote-result { }
.vote-result-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; font-size: 0.9rem; }
.vote-result-label { color: #334155; font-weight: 500; }
.vote-result-label.is-mine { color: #0f172a; font-weight: 700; }
.vote-result-num { color: #64748b; font-size: 0.82rem; }
.vote-bar { height: 10px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.vote-bar-fill { display: block; height: 100%; background: #0f172a; border-radius: 999px; transition: width .3s; }

/* 협의회 답변 */
.council-reply { padding: 12px 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; }
.council-reply-head { margin-bottom: 6px; color: #0f172a; }
.council-reply-body { color: #334155; font-size: 0.92rem; line-height: 1.6; }

/* ── 모바일: 글 리스트 깨짐 방지 ── */
@media (max-width: 640px) {
  /* 기존 게시판/자료실 목록: 가로 스크롤 허용 (칼럼 뭉개짐 방지) */
  .js-board-list, .js-resource-list { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .js-board-list > table, .js-resource-list > table { min-width: 0; }
  .js-board-list th, .js-board-list td,
  .js-resource-list th, .js-resource-list td { padding-left: 10px; padding-right: 10px; }

  /* 게시판·자료실·공지·투표·건의 목록: 모바일에서 카드형으로 전환 (data-label 사용) */
  table.board-list-table thead { display: none; }
  table.board-list-table, table.board-list-table tbody { display: block; width: 100%; }
  table.board-list-table tr {
    display: block; padding: 13px 15px; border-bottom: 1px solid #e2e8f0;
  }
  table.board-list-table td {
    display: inline; padding: 0 !important; text-align: left !important;
    border: none; vertical-align: baseline;
  }
  /* 제목: 한 줄 크게 강조 */
  table.board-list-table td[data-label="제목"] {
    display: block; font-size: 1rem; font-weight: 600; line-height: 1.45;
    margin-bottom: 6px; white-space: normal;
  }
  table.board-list-table td[data-label="제목"]::before { content: ""; }
  /* No 는 모바일에서 숨김 (순번은 불필요) */
  table.board-list-table td[data-label="No"] { display: none; }
  /* 메타(작성자·댓글·조회·일시 등): 한 줄에 흐르듯 라벨 + 값, 가운뎃점 구분 */
  table.board-list-table td[data-label]:not([data-label="제목"]):not([data-label="No"]) {
    color: #64748b; font-size: 0.78rem; white-space: nowrap;
  }
  table.board-list-table td[data-label]:not([data-label="제목"]):not([data-label="No"])::before {
    content: attr(data-label) " "; color: #94a3b8; font-weight: 600;
  }
  table.board-list-table td[data-label]:not([data-label="제목"]):not([data-label="No"]):not(:last-child)::after {
    content: " · "; color: #cbd5e1; font-weight: 400;
  }

  .vstat-cards { grid-template-columns: repeat(3,1fr); }
  .vstat-num { font-size: 1.3rem; }
}

/* 공지 팝업 2개 사선 스택 — 제1공지(앞) · 제2공지(뒤)가 겹쳐 보이게 */
.npopup-overlay--slot1 { z-index: 2002; }
.npopup-overlay--slot2 { z-index: 2001; background: rgba(10,18,35,0.30); }
.npopup-overlay--slot1 .npopup { transform: translate(30px, 26px); }
.npopup-overlay--slot2 .npopup { transform: translate(-30px, -26px); outline: 1px solid rgba(255,255,255,0.18); }
/* 뒤 팝업임을 알리는 작은 라벨 */
.npopup-overlay--slot2 .npopup-bt small::after { content: ' · 뒤 팝업'; }
@media (max-width: 820px) {
  .npopup-overlay--slot1 .npopup { transform: translate(14px, 14px); }
  .npopup-overlay--slot2 .npopup { transform: translate(-14px, -14px); }
}
@media (max-width: 560px) {
  .npopup-overlay--slot1 .npopup { transform: translate(8px, 10px); }
  .npopup-overlay--slot2 .npopup { transform: translate(-8px, -10px); }
  .npopup-overlay--slot2 { background: rgba(10,18,35,0.5); }
}

/* 방문통계 IP 칩 */
.vstat-ip { font-size: 0.72rem; color: #64748b; background: #eef2f7; border-radius: 6px; padding: 1px 7px; font-variant-numeric: tabular-nums; }

/* 운영진 전용 비밀글 배지 */
.staff-badge { display: inline-block; background: #b45309; color: #fff; font-size: 0.68rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; vertical-align: middle; }

/* 운영진 전용: 목록 작성자에 마우스 올리면 초대한 추천회원 표시 */
.author-ref { border-bottom: 1px dotted #94a3b8; cursor: help; }
.author-ref-mark { font-size: 0.72rem; color: #2563eb; background: #eff6ff; border-radius: 6px; padding: 0 5px; margin-left: 2px; }

/* 주민투표 개설: 선택지 목록 간격 + 세련된 '선택지 추가' 버튼 */
.vote-optlist { display: flex; flex-direction: column; gap: 10px; }
.vote-addopt {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border: 1.5px dashed #cbd5e1; border-radius: 10px;
  background: #f8fafc; color: #475569; font-size: 0.85rem; font-weight: 600;
  cursor: pointer; transition: border-color .15s, color .15s, background .15s, box-shadow .15s;
}
.vote-addopt:hover { border-color: #0f172a; color: #0f172a; background: #fff; box-shadow: 0 2px 10px rgba(15,23,42,.1); }
.vote-addopt:active { transform: translateY(1px); }

/* ── 후원금 현황 (장부형 리스트) ── */
.donation-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.donation-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
  padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 6px;
}
.donation-card-lbl { font-size: 0.78rem; font-weight: 600; color: #64748b; }
.donation-card-num {
  font-size: 1.4rem; font-weight: 800; color: #0f172a;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1.2;
}
.donation-card-num small { font-size: 0.8rem; font-weight: 600; color: inherit; margin-left: 2px; opacity: 0.65; }
.donation-card--balance { background: #0f172a; border-color: #0f172a; }
.donation-card--balance .donation-card-lbl { color: #94a3b8; }
.donation-card--balance .donation-card-num { color: #fff; }
.donation-card--balance .donation-card-num.is-minus { color: #fca5a5; }
.donation-plus { color: #2563eb; }
.donation-minus { color: #dc2626; }

/* 표가 카드(overflow-hidden)보다 넓어지면 내부에서 가로 스크롤 */
.donation-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.donation-table { width: 100%; font-size: 0.92rem; border-collapse: collapse; table-layout: fixed; }
/* 열 폭 고정(px, 화면 크기와 무관하게 일정): 날짜 / 사유(나머지) / 후원금액 / 잔액 / (관리) */
.donation-table th:nth-child(1) { width: 110px; }
.donation-table th:nth-child(3) { width: 190px; }
.donation-table th:nth-child(4) { width: 190px; }
.donation-table--manage th:nth-child(5) { width: 140px; }
.donation-table th {
  padding: 12px 16px; background: #f8fafc; color: #64748b;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  text-align: right; white-space: nowrap;
}
.donation-table th:first-child { text-align: left; }
.donation-table th.donation-th-memo { text-align: left; }
.donation-table th.donation-th-manage { text-align: center; }
.donation-table td {
  padding: 12px 16px; border-top: 1px solid #f1f5f9; text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: top;
}
.donation-table tbody tr:hover { background: #f8fafc; }
.donation-table td.donation-date { text-align: left; color: #475569; }
.donation-table td.donation-balance { font-weight: 700; color: #0f172a; }
.donation-table td.donation-balance.donation-minus { color: #dc2626; }
.donation-table td.donation-memo-cell {
  text-align: left; white-space: normal; color: #64748b;
  font-variant-numeric: normal; word-break: keep-all; overflow-wrap: anywhere;
}
.donation-table td.donation-manage { text-align: center; }
.donation-rowbtn {
  border: 1px solid #cbd5e1; background: #fff; border-radius: 6px;
  padding: 3px 10px; font-size: 0.75rem; font-weight: 600; color: #475569; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.donation-rowbtn:hover { border-color: #0f172a; color: #0f172a; }
.donation-rowbtn.is-danger { color: #dc2626; }
.donation-rowbtn.is-danger:hover { border-color: #dc2626; }

/* 로그 버튼 (헤더 우측, 아웃라인) */
.donation-logbtn {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid #cbd5e1; background: #fff; border-radius: 10px;
  padding: 9px 16px; font-size: 0.85rem; font-weight: 600; color: #475569;
  text-decoration: none; transition: border-color .15s, color .15s, background .15s;
}
.donation-logbtn:hover { border-color: #0f172a; color: #0f172a; background: #f8fafc; }

/* 등록 폼: 날짜·구분·금액 3칸 그리드 — 컨트롤 높이 46px 통일로 라벨·입력칸 정렬 */
.donation-formgrid { display: grid; grid-template-columns: 170px auto 1fr; gap: 14px; align-items: start; }
.donation-input { height: 46px; box-sizing: border-box; }
.donation-typetoggle { display: inline-flex; gap: 6px; }
.donation-typetoggle input { position: absolute; opacity: 0; pointer-events: none; }
.donation-typetoggle span {
  height: 46px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 18px; border: 1.5px solid #cbd5e1; border-radius: 10px;
  background: #fff; color: #64748b; font-size: 0.85rem; font-weight: 700; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s; white-space: nowrap;
}
.donation-typetoggle label.don-in input:checked + span { background: #2563eb; border-color: #2563eb; color: #fff; }
.donation-typetoggle label.don-out input:checked + span { background: #dc2626; border-color: #dc2626; color: #fff; }

/* 로그 테이블: 작업 배지 + 전/후 표기 */
.donation-logtable td { vertical-align: top; }
.donation-logtable tbody tr:hover { background: #f8fafc; }
.donation-logtable .dlog-nowrap, td.dlog-nowrap { white-space: nowrap; }
.dlog-badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; white-space: nowrap;
}
.dlog-badge.is-create { background: #dcfce7; color: #166534; }
.dlog-badge.is-update { background: #fef3c7; color: #92400e; }
.dlog-badge.is-delete { background: #fee2e2; color: #991b1b; }
.dlog-old { color: #94a3b8; font-variant-numeric: tabular-nums; }
.dlog-old.is-strike { text-decoration: line-through; }
.dlog-new { color: #0f172a; font-weight: 600; font-variant-numeric: tabular-nums; }
.dlog-arrow { color: #94a3b8; margin: 0 4px; }

/* 페이지네이션 */
.donation-pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 18px; }
.donation-pager a, .donation-pager .is-cur {
  min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 0.85rem; font-weight: 600; text-decoration: none;
  border: 1px solid #e2e8f0; background: #fff; color: #475569; padding: 0 6px;
}
.donation-pager a:hover { border-color: #0f172a; color: #0f172a; }
.donation-pager .is-cur { background: #0f172a; border-color: #0f172a; color: #fff; }

@media (max-width: 640px) {
  .donation-cards { grid-template-columns: 1fr 1fr; gap: 8px; }
  .donation-card--balance { grid-column: 1 / -1; }
  .donation-card { padding: 14px 14px 12px; border-radius: 12px; }
  .donation-card-num { font-size: 1.2rem; }
  .donation-table { font-size: 0.84rem; }
  .donation-table th, .donation-table td { padding: 10px 10px; }
  /* 사유 열 추가로 좁은 화면에선 최소폭 확보 → 잘림 없이 가로 스크롤 */
  .donation-table { min-width: 480px; }
  .donation-table--manage { min-width: 580px; }
  /* 좁은 폭 고정 px: 날짜 92 / 사유 나머지 / 금액·잔액 104 / 관리 104 */
  .donation-table th:nth-child(1) { width: 92px; }
  .donation-table th:nth-child(3), .donation-table th:nth-child(4) { width: 104px; }
  .donation-table--manage th:nth-child(5) { width: 104px; }
  .donation-rowbtn { padding: 3px 7px; }
  .donation-formgrid { grid-template-columns: 1fr; align-items: stretch; }
  .donation-typetoggle { display: flex; }
  .donation-typetoggle label { flex: 1; }
  .donation-typetoggle span { display: block; text-align: center; }
}

/* ── PWA 앱 설치 배너 ── */
.pwa-install-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #16243f;
  color: #fff;
  padding: 9px 12px;
  box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.28);
  font-size: 15px;
}
.pwa-install-bar[hidden] { display: none !important; }
.pwa-install-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: transparent;
  border: 0;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 4px;
  min-height: 40px;
}
.pwa-install-ico { font-size: 20px; line-height: 1; }
.pwa-install-txt { letter-spacing: -0.01em; }
.pwa-txt-short { display: none; }
.pwa-install-cta {
  background: #38bdf8;
  color: #082f49;
  font-weight: 800;
  border-radius: 999px;
  padding: 5px 16px;
  font-size: 14px;
  white-space: nowrap;
}
.pwa-install-close {
  background: transparent;
  border: 0;
  color: #b7c2d6;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0 8px;
  flex-shrink: 0;
}
.pwa-guide-overlay {
  position: fixed;
  inset: 0;
  z-index: 1600;
  background: rgba(15, 23, 42, 0.62);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
}
.pwa-guide-overlay[hidden] { display: none !important; }
.pwa-guide {
  background: #fff;
  color: #1e293b;
  border-radius: 16px;
  max-width: 420px;
  width: 100%;
  padding: 22px 20px;
  box-shadow: 0 10px 44px rgba(0, 0, 0, 0.32);
}
.pwa-guide h3 { margin: 0 0 10px; font-size: 18px; color: #16243f; }
.pwa-guide p { margin: 8px 0; font-size: 15px; line-height: 1.62; }
.pwa-guide b { color: #0369a1; }
.pwa-guide-close {
  margin-top: 16px;
  width: 100%;
  background: #16243f;
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
@media (max-width: 640px) {
  .pwa-txt-full { display: none; }
  .pwa-txt-short { display: inline; }
}
@media (min-width: 640px) {
  .pwa-guide-overlay { align-items: center; }
  .pwa-install-txt { letter-spacing: 0; }
}

/* ── 댓글 삭제 버튼 (슈퍼관리자) ── */
.cmt-delform { margin-left: auto; }
.cmt-del { background: none; border: 0; cursor: pointer; padding: 2px 6px; font-size: 12px; color: #dc2626; }
.cmt-del:hover { text-decoration: underline; }