/* =============================================
   공통 스타일 — AX 강연 홈페이지
   색상: 따뜻한 베이지 모노톤 팔레트
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;700&family=Noto+Sans+KR:wght@300;400;500&display=swap');

/* ── 리셋 & 기본 ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg-main:       #FAF5EC;
  --bg-accent:     #F5EEE1;
  --text-title:    #3D2E1F;
  --text-body:     #5A4535;   /* #6B5842 → 대비 강화 */
  --text-point:    #7A5828;   /* #A37A42 → WCAG AA 통과 수준으로 어둡게 */
  --btn-primary:   #8C5E2A;
  --divider:       #E8DDC7;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-main);
  color: var(--text-body);
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 400;
  line-height: 1.85;
  font-size: 17px;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

/* ── 공통 컨테이너 ── */
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

/* =============================================
   네비게이션
   ============================================= */
.site-header {
  background-color: var(--bg-main);
  border-bottom: 1px solid var(--divider);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

/* 로고 */
.logo {
  font-family: 'Noto Serif KR', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-title);
  letter-spacing: 0.5px;
}

/* 메뉴 목록 */
.nav-menu {
  list-style: none;
  display: flex;
  gap: 32px;
}

.nav-menu a {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-body);
  transition: color 0.2s;
}

.nav-menu a:hover,
.nav-menu a.active {
  color: var(--text-title);
  font-weight: 500;
}

/* 햄버거 버튼 (모바일 전용) */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--text-title);
  transition: transform 0.25s, opacity 0.25s;
}

/* 햄버거 열림 상태 */
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =============================================
   공통 섹션 여백
   ============================================= */
section {
  padding: 72px 0;
}

/* =============================================
   히어로 섹션
   ============================================= */
.hero {
  text-align: center;
  padding: 96px 0 80px;
}

.hero-label {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--text-point);
  text-transform: lowercase;
  margin-bottom: 24px;
}

.hero-title {
  font-family: 'Noto Serif KR', serif;
  font-size: 38px;
  font-weight: 700;
  color: var(--text-title);
  line-height: 1.55;
  margin-bottom: 20px;
}

.hero-sub {
  font-size: 17px;
  color: var(--text-body);
  line-height: 1.9;
  margin-bottom: 40px;
}

/* 버튼 묶음 */
.btn-group {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* 버튼 공통 */
.btn {
  display: inline-block;
  padding: 12px 28px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 16px;
  font-weight: 400;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

/* 채운 버튼 */
.btn-solid {
  background-color: var(--btn-primary);
  color: var(--bg-main);
  border: 1px solid var(--btn-primary);
}

.btn-solid:hover {
  background-color: #7A5124;
  border-color: #7A5124;
}

/* 테두리 버튼 */
.btn-outline {
  background-color: transparent;
  color: var(--btn-primary);
  border: 1px solid var(--btn-primary);
}

.btn-outline:hover {
  background-color: var(--btn-primary);
  color: var(--bg-main);
}

/* =============================================
   다음 강연 카드 섹션
   ============================================= */
.next-lecture {
  background-color: var(--bg-accent);
  padding: 56px 0;
}

.section-label {
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--text-point);
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* 카드 */
.lecture-card {
  background-color: var(--bg-main);
  border: 1px solid var(--divider);
  border-radius: 6px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.lecture-card-info {
  flex: 1;
}

.lecture-card-title {
  font-family: 'Noto Serif KR', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-title);
  margin-bottom: 8px;
  line-height: 1.5;
}

.lecture-card-meta {
  font-size: 15px;
  color: var(--text-point);
  letter-spacing: 0.3px;
}

/* 신청 링크 */
.lecture-card-cta {
  white-space: nowrap;
  font-size: 16px;
  font-weight: 500;
  color: var(--btn-primary);
  border-bottom: 1px solid var(--btn-primary);
  padding-bottom: 2px;
  transition: opacity 0.2s;
}

.lecture-card-cta:hover {
  opacity: 0.7;
}

/* =============================================
   푸터
   ============================================= */
.site-footer {
  border-top: 1px solid var(--divider);
  padding: 40px 0;
  text-align: center;
}

.footer-nav {
  margin-bottom: 16px;
}

.footer-nav a {
  font-size: 13px;
  color: #6B5842;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-nav a:hover {
  color: #8C5E2A;
}

.footer-sep {
  font-size: 13px;
  color: #A37A42;
  margin: 0 8px;
}

.footer-contact {
  font-size: 13px;
  color: #8C5E2A;
  margin-bottom: 16px;
}

.footer-contact a {
  color: inherit;
  text-decoration: none;
}

.footer-contact a:hover {
  text-decoration: underline;
}

.footer-copy {
  font-size: 12px;
  color: #6B5842;
  margin-bottom: 4px;
}

.footer-credit {
  font-size: 12px;
  color: #6B5842;
  font-style: italic;
}

/* ── about — 경력 리드 문장 ── */
.timeline-lead {
  font-size: 14px;
  color: #6B5842;
  line-height: 1.8;
  margin-top: 16px;
  margin-bottom: 32px;
}

/* =============================================
   about 페이지 전용 스타일
   ============================================= */

/* 공통: about 섹션 내부 너비 제한 */
.about-section {
  padding: 80px 0;
  border-bottom: 1px solid var(--divider);
}

.about-section:last-of-type {
  border-bottom: none;
}

/* 섹션 헤더 — 라벨 + 본문 묶음 */
.about-label {
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--text-point);
  text-transform: uppercase;
  margin-bottom: 28px;
}

/* ── 1) 프로필 ── */
.profile-section {
  text-align: center;
  padding: 80px 0 72px;
  border-bottom: 1px solid var(--divider);
}

.profile-img {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #D4C4A8;
  margin: 0 auto 20px;
  background-color: var(--bg-accent);
  /* 사진 없을 때 자리 표시 */
  display: block;
}

/* 사진 없을 때 회색 원 placeholder */
.profile-img-placeholder {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 3px solid #D4C4A8;
  background-color: var(--bg-accent);
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-point);
  font-size: 13px;
  letter-spacing: 1px;
}

.profile-small-label {
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--text-point);
  text-transform: lowercase;
  margin-bottom: 12px;
}

.profile-name {
  font-family: 'Noto Serif KR', serif;
  font-size: 36px;
  font-weight: 700;
  color: var(--text-title);
  margin-bottom: 10px;
}

.profile-identity {
  font-family: 'Noto Serif KR', serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--text-body);
}

/* ── 2) 인사말 ── */
.greeting-body {
  font-size: 17px;
  line-height: 1.9;
  color: var(--text-body);
  max-width: 640px;
}

/* ── 3) 경력 타임라인 ── */
.timeline {
  display: flex;
  flex-direction: column;
}

.timeline-row {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 22px 0;
  border-bottom: 1px solid var(--divider);
}

.timeline-row:first-child {
  border-top: 1px solid var(--divider);
}

.timeline-period {
  width: 130px;
  flex-shrink: 0;
  font-size: 15px;
  color: var(--text-point);
  padding-top: 2px;
}

.timeline-content {
  flex: 1;
}

.timeline-org {
  font-size: 17px;
  font-weight: 500;
  color: var(--text-title);
  margin-bottom: 3px;
}

.timeline-role {
  font-size: 15px;
  color: var(--text-body);
}

/* ── 4) 이사회 활동 ── */
.board-list {
  display: flex;
  flex-direction: column;
}

.board-row {
  display: flex;
  align-items: baseline;
  gap: 32px;
  padding: 22px 0;
  border-bottom: 1px solid var(--divider);
}

.board-row:first-child {
  border-top: 1px solid var(--divider);
}

.board-label {
  width: 40px;
  flex-shrink: 0;
  font-size: 15px;
  color: var(--text-point);
}

.board-companies {
  font-size: 17px;
  color: var(--text-title);
  line-height: 1.8;
}

/* 가운뎃점 색상 */
.board-companies .sep {
  color: var(--text-point);
  margin: 0 4px;
}

/* ── 5) 학력 ── */
.edu-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.edu-row {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 20px 0;
  border-bottom: 1px solid var(--divider);
}

.edu-row:first-child {
  border-top: 1px solid var(--divider);
}

.edu-period {
  width: 130px;
  flex-shrink: 0;
  font-size: 15px;
  color: var(--text-point);
  padding-top: 2px;
}

.edu-content {
  font-size: 17px;
  color: var(--text-title);
}

/* ── 6) 강연 주제 ── */
.topic-list {
  display: flex;
  flex-direction: column;
}

.topic-item {
  font-family: 'Noto Serif KR', serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--text-title);
  padding: 24px 0;
  border-bottom: 1px solid var(--divider);
  display: flex;
  align-items: center;
  gap: 16px;
  line-height: 1.5;
}

.topic-item:first-child {
  border-top: 1px solid var(--divider);
}

.topic-num {
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--text-point);
  flex-shrink: 0;
  width: 20px;
}

/* ── 7) 외부 자료 ── */
.news-desc {
  font-size: 17px;
  color: var(--text-body);
  margin-bottom: 24px;
  line-height: 1.9;
}

.news-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── 8) 연락처 ── */
.contact-email {
  font-size: 20px;
  font-weight: 500;
  color: var(--btn-primary);
  display: inline-block;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--btn-primary);
  padding-bottom: 2px;
  transition: opacity 0.2s;
}

.contact-email:hover {
  opacity: 0.7;
}

.contact-desc {
  font-size: 16px;
  color: var(--text-body);
}

/* =============================================
   lectures 페이지 전용 스타일
   ============================================= */

/* ── 상단 헤더 ── */
.lec-header {
  padding: 80px 0 64px;
  border-bottom: 1px solid var(--divider);
}

.lec-page-label {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--text-point);
  text-transform: lowercase;
  margin-bottom: 20px;
}

.lec-page-title {
  font-family: 'Noto Serif KR', serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--text-title);
  line-height: 1.5;
  margin-bottom: 16px;
}

.lec-page-sub {
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.9;
}

/* ── 섹션 공통 ── */
.lec-section {
  padding: 64px 0;
  border-bottom: 1px solid var(--divider);
}

.lec-section--past {
  background-color: var(--bg-accent);
}

.lec-section-heading {
  font-family: 'Noto Serif KR', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-title);
  margin-bottom: 28px;
}

/* 빈 상태 메시지 */
.lec-empty {
  font-size: 15px;
  color: var(--text-body);
  padding: 24px 0;
}

/* ── 다가오는 강연 카드 (단일 컬럼) ── */
.lec-upcoming-card {
  background-color: var(--bg-main);
  border: 0.5px solid var(--divider);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 16px;
}

.lec-upcoming-card:last-child {
  margin-bottom: 0;
}

.lec-date-badge {
  display: inline-block;
  font-size: 13px;
  color: var(--text-point);
  margin-bottom: 10px;
}

.lec-upcoming-title {
  font-family: 'Noto Serif KR', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-title);
  line-height: 1.5;
  margin-bottom: 8px;
}

.lec-upcoming-desc {
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.8;
  margin-bottom: 16px;
}

/* 메타 정보 — 가로 나열 */
.lec-upcoming-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding-top: 16px;
  border-top: 1px solid var(--divider);
}

.lec-meta-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.lec-meta-label {
  font-size: 13px;
  color: var(--text-point);
}

.lec-meta-value {
  font-size: 15px;
  color: var(--text-title);
  line-height: 1.5;
}

/* ── 지난 강연 행 ── */
.lec-past-row {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 20px 0;
  border-bottom: 1px solid var(--divider);
}

.lec-past-row:first-child {
  border-top: 1px solid var(--divider);
}

.lec-past-date {
  width: 110px;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--text-point);
  padding-top: 2px;
}

.lec-past-content {
  flex: 1;
}

.lec-past-title {
  font-size: 17px;
  color: var(--text-title);
  margin-bottom: 4px;
  line-height: 1.5;
}

.lec-past-location {
  font-size: 14px;
  color: var(--text-body);
}

/* ── 반응형 ── */
@media (max-width: 768px) {
  .lec-page-title {
    font-size: 26px;
  }

  /* 지난 강연 행: 세로 배치 */
  .lec-past-row {
    flex-direction: column;
    gap: 6px;
    padding: 18px 0;
  }

  .lec-past-date {
    width: auto;
  }
}

/* =============================================
   lectures 통합 타임라인 스타일
   ============================================= */

/* ── 타임라인 섹션 ── */
.lec-body {
  padding: 56px 0 80px;
}

/* ── 카드 공통 ── */
.lec-card {
  border: 0.5px solid var(--divider);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 16px;
}

.lec-card:last-child {
  margin-bottom: 0;
}

/* ── 다가오는 강연 카드 ── */
.lec-card--upcoming {
  background-color: var(--bg-main);
  border-left: 3px solid var(--btn-primary);
  padding-left: 21px;
}

.lec-card-upcoming-label {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--text-point);
  text-transform: lowercase;
  margin-bottom: 10px;
}

/* ── 지난 강연 카드 ── */
.lec-card--past {
  background: transparent;
  opacity: 0.85;
}

.lec-card--past.lec-card--expandable {
  opacity: 1;
  cursor: pointer;
  transition: background-color 0.15s;
}

.lec-card--past.lec-card--expandable:hover {
  background-color: var(--bg-main);
}

/* ── 카드 헤더 (날짜 + 제목 + 토글) ── */
.lec-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.lec-card-main {
  flex: 1;
}

.lec-card-date {
  font-size: 13px;
  color: var(--text-point);
  margin-bottom: 6px;
}

.lec-card-title {
  font-family: 'Noto Serif KR', serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-title);
  line-height: 1.5;
  margin-bottom: 4px;
}

.lec-card-location {
  font-size: 14px;
  color: var(--text-body);
}

.lec-card-toggle {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--text-point);
  padding-top: 4px;
  user-select: none;
  line-height: 1;
}

/* ── 카드 하단 힌트 (expandable일 때만 렌더링) ── */
.lec-card-hint {
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-point);
  pointer-events: none;
}

/* ── 펼침 영역 ── */
.lec-expand {
  display: none;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--divider);
}

.lec-expand.open {
  display: block;
}

.lec-expand-label {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--text-point);
  text-transform: uppercase;
  margin-bottom: 12px;
  margin-top: 20px;
}

.lec-expand-label:first-child {
  margin-top: 0;
}

/* ── 강연 정보 섹션 ── */
.lec-info-section {
  margin-bottom: 24px;
}

.lec-info-desc {
  font-size: 14px;
  color: var(--text-title);
  line-height: 1.7;
  margin-bottom: 8px;
}

.lec-info-audience {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.lec-info-audience-label {
  font-size: 12px;
  color: var(--text-point);
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.lec-info-audience-value {
  font-size: 14px;
  color: var(--text-title);
  line-height: 1.6;
}

/* ── 언론 보도 항목 ── */
.lec-news-item {
  margin-bottom: 12px;
}

.lec-news-item:last-child {
  margin-bottom: 0;
}

.lec-news-meta {
  font-size: 13px;
  color: var(--text-point);
  margin-bottom: 3px;
}

.lec-news-link {
  font-size: 14px;
  color: var(--text-title);
  transition: color 0.2s;
}

.lec-news-link:hover {
  text-decoration: underline;
  color: var(--btn-primary);
}

/* ── 반응형 ── */
@media (max-width: 768px) {
  .lec-card {
    padding: 20px;
  }

  .lec-card--upcoming {
    padding-left: 17px;
  }
}

/* =============================================
   resources 페이지 전용 스타일
   ============================================= */

/* ── 상단 헤더 ── */
.res-header {
  padding: 80px 0 64px;
  border-bottom: 1px solid var(--divider);
}

.res-page-label {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--text-point);
  text-transform: lowercase;
  margin-bottom: 20px;
}

.res-page-title {
  font-family: 'Noto Serif KR', serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--text-title);
  line-height: 1.5;
  margin-bottom: 16px;
}

.res-page-sub {
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.9;
}

/* ── 섹션 공통 ── */
.res-section {
  padding: 64px 0;
  border-bottom: 1px solid var(--divider);
}

.res-section--tinted {
  background-color: var(--bg-accent);
}

.res-section-heading {
  font-family: 'Noto Serif KR', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-title);
  margin-bottom: 8px;
}

.res-section-desc {
  font-size: 15px;
  color: var(--text-body);
  margin-bottom: 28px;
  line-height: 1.8;
}

.res-empty {
  font-size: 15px;
  color: var(--text-body);
  padding: 24px 0;
}

/* ── 강연 아카이브 카드 ── */
.res-archive-card {
  background-color: var(--bg-main);
  border: 0.5px solid var(--divider);
  border-radius: 8px;
  padding: 28px;
}

/* 카드와 카드 사이에만 간격 */
.res-archive-card + .res-archive-card {
  margin-top: 40px;
}

.res-archive-meta {
  font-size: 13px;
  color: var(--text-point);
  margin-bottom: 8px;
}

.res-archive-title {
  font-family: 'Noto Serif KR', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-title);
  line-height: 1.5;
  margin-bottom: 24px;
}

/* 소제목 라벨 (목차, 핵심 메시지) */
.res-sub-label {
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--text-point);
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* 목차 번호 리스트 */
.res-outline-list {
  list-style: none;
  margin-bottom: 24px;
}

.res-outline-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 15px;
  color: var(--text-title);
  padding: 8px 0;
  border-bottom: 1px solid var(--divider);
  line-height: 1.65;
}

.res-outline-item:first-child {
  border-top: 1px solid var(--divider);
}

.res-outline-num {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-point);
  width: 16px;
}

/* 핵심 메시지 인용구 스타일 */
.res-keymsg-list {
  margin-bottom: 0;
}

.res-keymsg-item {
  font-size: 15px;
  color: var(--text-title);
  line-height: 1.8;
  padding-left: 14px;
  border-left: 2px solid var(--text-point);
  margin-bottom: 12px;
}

.res-keymsg-item:last-child {
  margin-bottom: 0;
}

/* ── 인사이트 empty state ── */
.res-insights-empty {
  background-color: var(--bg-accent);
  border-radius: 8px;
  padding: 32px;
  text-align: center;
  font-size: 13px;
  color: var(--text-body);
  line-height: 1.8;
}

/* ── 추천 자료 북 리스트 ── */
.res-book-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--divider);
}

.res-book-item:first-child {
  border-top: 1px solid var(--divider);
}

/* 책 항목과 항목 사이 추가 여백 */
.res-book-item + .res-book-item {
  padding-top: 28px;
}

.res-book-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 8px;
  margin-bottom: 6px;
}

.res-book-title {
  font-family: 'Noto Serif KR', serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-title);
}

.res-book-sep {
  font-size: 13px;
  color: var(--text-point);
}

.res-book-author {
  font-size: 13px;
  color: var(--text-point);
}

.res-book-note {
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.8;
}

/* ── 반응형 ── */
@media (max-width: 768px) {
  .res-page-title {
    font-size: 26px;
  }

  .res-archive-card {
    padding: 20px;
  }

  .res-book-header {
    flex-direction: column;
    gap: 4px;
  }

  .res-book-sep {
    display: none;
  }
}

/* =============================================
   insights 페이지 전용 스타일
   ============================================= */

/* ── 상단 헤더 ── */
.ins-header {
  padding: 80px 0 64px;
  border-bottom: 1px solid var(--divider);
}

.ins-page-label {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--text-point);
  text-transform: lowercase;
  margin-bottom: 20px;
}

.ins-page-title {
  font-family: 'Noto Serif KR', serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--text-title);
  line-height: 1.5;
  margin-bottom: 16px;
}

.ins-page-sub {
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.8;
}

/* ── 섹션 공통 ── */
.ins-section {
  padding: 64px 0;
  border-bottom: 1px solid var(--divider);
}

.ins-section:last-of-type {
  border-bottom: none;
}

.ins-section--tinted {
  background-color: var(--bg-accent);
}

.ins-section-heading {
  font-family: 'Noto Serif KR', serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-title);
  margin-bottom: 8px;
}

.ins-section-desc {
  font-size: 15px;
  color: var(--text-body);
  margin-bottom: 32px;
  line-height: 1.8;
}

/* ── 인터뷰 빈 상태 ── */
.ins-interview-empty {
  background-color: var(--bg-accent);
  border-radius: 8px;
  padding: 40px 32px;
  text-align: center;
}

.ins-interview-empty-main {
  font-size: 14px;
  color: var(--text-title);
  line-height: 1.8;
  margin-bottom: 8px;
}

.ins-interview-empty-sub {
  font-size: 13px;
  color: var(--text-body);
  line-height: 1.8;
}

/* ── 인터뷰 카드 ── */
.ins-interview-card {
  background-color: var(--bg-main);
  border: 0.5px solid var(--divider);
  border-radius: 8px;
  padding: 28px;
  margin-bottom: 20px;
}

.ins-interview-card:last-child {
  margin-bottom: 0;
}

.ins-interviewee-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.ins-interviewee-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.ins-interviewee-initial {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--divider);
  color: var(--btn-primary);
  font-family: 'Noto Serif KR', serif;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ins-interviewee-name {
  font-family: 'Noto Serif KR', serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-title);
  margin-bottom: 4px;
}

.ins-interviewee-title {
  font-size: 13px;
  color: var(--text-body);
}

.ins-interview-headline {
  font-family: 'Noto Serif KR', serif;
  font-size: 20px;
  color: var(--text-title);
  line-height: 1.5;
  margin-bottom: 16px;
}

.ins-interview-quote {
  border-left: 2px solid var(--text-point);
  padding-left: 14px;
  font-size: 15px;
  color: var(--text-title);
  line-height: 1.7;
  margin-bottom: 16px;
}

.ins-interview-summary {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.8;
  margin-bottom: 16px;
}

.ins-interview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.ins-interview-tag {
  background-color: var(--bg-accent);
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  color: var(--text-body);
}

.ins-interview-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--divider);
}

.ins-interview-date {
  font-size: 13px;
  color: var(--text-point);
}

.ins-interview-read-more {
  font-size: 14px;
  color: var(--btn-primary);
  transition: opacity 0.2s;
}

.ins-interview-read-more:hover {
  opacity: 0.7;
}

/* ── 반응형 ── */
@media (max-width: 768px) {
  .ins-page-title {
    font-size: 26px;
  }

  .ins-interview-card {
    padding: 20px;
  }

  .ins-interview-empty {
    padding: 28px 20px;
  }
}

/* =============================================
   community 페이지 전용 스타일
   ============================================= */

/* ── 상단 헤더 ── */
.comm-header {
  padding: 80px 0 64px;
  border-bottom: 1px solid var(--divider);
}

.comm-page-label {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--text-point);
  text-transform: lowercase;
  margin-bottom: 20px;
}

.comm-page-title {
  font-family: 'Noto Serif KR', serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--text-title);
  line-height: 1.5;
  margin-bottom: 16px;
}

.comm-page-sub {
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.8;
}

/* ── 본문 섹션 ── */
.comm-body {
  padding: 56px 0 80px;
}

/* ── 로그인 상태 영역 ── */
.comm-auth-section {
  background-color: var(--bg-accent);
  padding: 24px;
  border-radius: 8px;
  margin-bottom: 48px;
}

/* 로그아웃 상태 */
.comm-logged-out {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.comm-auth-guide {
  font-size: 15px;
  color: var(--text-body);
  flex: 1;
  min-width: 200px;
}

/* Google 로그인 버튼 */
.comm-google-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--btn-primary);
  color: var(--bg-main);
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s;
}

.comm-google-btn:hover {
  background-color: #7A5124;
}

/* 로그인 상태 */
.comm-logged-in {
  align-items: center;
  gap: 12px;
}

.comm-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.comm-user-name {
  font-size: 14px;
  color: var(--text-title);
  flex: 1;
}

.comm-logout-btn {
  background: transparent;
  border: 0.5px solid var(--text-point);
  color: var(--text-body);
  padding: 8px 16px;
  border-radius: 4px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.2s;
  white-space: nowrap;
}

.comm-logout-btn:hover {
  background-color: var(--bg-main);
}

/* ── 게시글 영역 ── */
.comm-posts-heading {
  font-family: 'Noto Serif KR', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-title);
  margin-bottom: 20px;
}

/* ── 글쓰기 버튼 (접힌 상태) ── */
.comm-write-collapsed {
  text-align: center;
  margin: 48px 0;
}

.comm-open-write-btn {
  background-color: var(--bg-main);
  border: 0.5px solid var(--text-point);
  color: var(--btn-primary);
  padding: 12px 24px;
  border-radius: 6px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.comm-open-write-btn:hover {
  background-color: var(--bg-accent);
}

/* ── 글쓰기 폼 ── */
.comm-write-form {
  background-color: var(--bg-main);
  border: 0.5px solid var(--divider);
  border-radius: 8px;
  padding: 28px;
  margin: 48px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comm-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comm-form-label {
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--text-point);
  text-transform: uppercase;
}

.comm-form-close {
  background: none;
  border: none;
  font-size: 13px;
  color: var(--text-body);
  cursor: pointer;
  transition: color 0.2s;
}

.comm-form-close:hover {
  color: var(--text-title);
}

/* 카테고리 pill 선택 */
.comm-category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.comm-cat-label {
  cursor: pointer;
}

.comm-cat-label span {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  border: 0.5px solid var(--text-point);
  color: var(--text-body);
  background-color: var(--bg-main);
  transition: background-color 0.15s, color 0.15s;
  user-select: none;
}

.comm-cat-label.selected span {
  background-color: var(--btn-primary);
  color: var(--bg-main);
  border-color: var(--btn-primary);
}

/* 입력 필드 공통 */
.comm-input,
.comm-textarea {
  width: 100%;
  background-color: #fff;
  border: 0.5px solid var(--divider);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 15px;
  font-family: 'Noto Sans KR', sans-serif;
  color: var(--text-title);
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.comm-input:focus,
.comm-textarea:focus {
  outline: none;
  border-color: var(--text-point);
}

.comm-textarea {
  line-height: 1.7;
  resize: vertical;
}

/* 폼 하단 버튼 */
.comm-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.comm-cancel-btn {
  background: transparent;
  border: 0.5px solid var(--text-point);
  color: var(--text-body);
  padding: 10px 20px;
  border-radius: 6px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.comm-cancel-btn:hover {
  background-color: var(--bg-accent);
}

.comm-submit-btn {
  background-color: var(--btn-primary);
  color: var(--bg-main);
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.comm-submit-btn:hover:not(:disabled) {
  background-color: #7A5124;
}

.comm-submit-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ── 필터 바 ── */
.comm-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 24px;
}

.comm-filter-btn {
  background: transparent;
  border: 0.5px solid var(--text-point);
  color: var(--text-point);
  padding: 5px 14px;
  border-radius: 16px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.comm-filter-btn.active {
  background-color: var(--text-title);
  border-color: var(--text-title);
  color: var(--bg-main);
}

/* ── 로딩 / 빈 상태 ── */
.comm-posts-loading {
  text-align: center;
  padding: 40px;
  font-size: 15px;
  color: var(--text-point);
}

.comm-posts-empty {
  background-color: var(--bg-main);
  border: 0.5px solid var(--divider);
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.85;
}

/* ── 글 카드 ── */
.comm-post-card {
  background-color: var(--bg-main);
  border: 0.5px solid var(--divider);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 12px;
  transition: box-shadow 0.2s;
}

.comm-post-card:last-child {
  margin-bottom: 0;
}

.comm-post-card--open {
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}

/* 헤더: 항상 표시, 클릭 가능 */
.comm-post-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
}

.comm-post-header-left {
  flex: 1;
  min-width: 0;
}

.comm-post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.comm-post-badge {
  background-color: var(--divider);
  color: var(--text-body);
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  letter-spacing: 0.3px;
}

.comm-post-author {
  font-size: 14px;
  color: var(--text-point);
}

.comm-post-title {
  font-family: 'Noto Serif KR', serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--text-title);
  margin: 0;
  line-height: 1.5;
}

.comm-post-header:hover .comm-post-title {
  color: var(--accent, #8C5E2A);
}

/* 본문 보기 / 접기 버튼 */
.comm-post-toggle-btn {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-point);
  background: var(--divider);
  border: none;
  border-radius: 20px;
  padding: 4px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.comm-post-toggle-btn:hover {
  background: var(--border, #ddd);
}

/* 본문 영역 */
.comm-post-body {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 0.5px solid var(--divider);
}

.comm-post-content {
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.85;
  white-space: pre-wrap;
}

.comm-inline-link {
  color: #8C5E2A;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.comm-inline-link:hover {
  color: #3D2E1F;
}

.comm-post-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}

.comm-delete-btn {
  background: none;
  border: none;
  font-size: 12px;
  color: var(--text-point);
  cursor: pointer;
  transition: color 0.2s;
  padding: 0;
}

.comm-delete-btn:hover {
  color: var(--text-title);
}

/* =============================================
   커뮤니티 3단계 — 댓글 스타일
   ============================================= */

/* ── 댓글 영역 전체 wrapper ── */
.comm-comment-area {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--divider);
}

/* ── 댓글 목록 ── */
.comm-comment-list {
  margin-bottom: 4px;
}

.comm-comment-loading {
  font-size: 13px;
  color: var(--text-point);
  padding: 4px 0;
}

.comm-comment-empty {
  font-size: 13px;
  color: var(--text-point);
  text-align: center;
  padding: 8px 0;
}

/* 개별 댓글 */
.comm-comment-item {
  padding-top: 12px;
}

.comm-comment-item:first-child {
  padding-top: 0;
}

.comm-comment-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.comm-comment-author {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-title);
}

.comm-comment-time {
  font-size: 13px;
  color: var(--text-point);
}

.comm-comment-content {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.8;
  white-space: pre-wrap;
}

/* 본인 댓글 삭제 버튼 */
.comm-comment-delete-btn {
  background: none;
  border: none;
  font-size: 12px;
  color: var(--text-point);
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  transition: color 0.2s;
}

.comm-comment-delete-btn:hover {
  color: var(--text-title);
}

/* ── 댓글 입력 영역 ── */
.comm-comment-input-wrap {
  margin-top: 12px;
}

/* "+ 댓글 달기" 버튼 */
.comm-comment-toggle-btn {
  background: none;
  border: none;
  font-size: 13px;
  color: var(--btn-primary);
  cursor: pointer;
  padding: 6px 0;
  transition: color 0.2s;
  font-family: 'Noto Sans KR', sans-serif;
}

.comm-comment-toggle-btn:hover {
  color: var(--text-title);
}

/* 댓글 폼 */
.comm-comment-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.comm-comment-textarea {
  width: 100%;
  background-color: var(--bg-main);
  border: 0.5px solid var(--divider);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: 'Noto Sans KR', sans-serif;
  line-height: 1.6;
  color: var(--text-title);
  resize: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.comm-comment-textarea:focus {
  outline: none;
  border-color: var(--text-point);
}

.comm-comment-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.comm-comment-cancel-btn {
  background: transparent;
  border: 0.5px solid var(--text-point);
  color: var(--text-body);
  padding: 7px 16px;
  border-radius: 4px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.comm-comment-cancel-btn:hover {
  background-color: var(--bg-accent);
}

.comm-comment-submit-btn {
  background-color: var(--btn-primary);
  color: var(--bg-main);
  border: none;
  padding: 7px 16px;
  border-radius: 4px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.comm-comment-submit-btn:hover:not(:disabled) {
  background-color: #7A5124;
}

.comm-comment-submit-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ── 게시글 수정 모드 ── */
.comm-edit-mode {
  display: none;
  margin-top: 8px;
}

.comm-edit-title {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-main);
  border: 1px solid var(--divider);
  border-radius: 6px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 15px;
  color: var(--text-title);
  margin-bottom: 10px;
  outline: none;
  transition: border-color 0.2s;
}

.comm-edit-title:focus {
  border-color: var(--text-point);
}

.comm-edit-content {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-main);
  border: 1px solid var(--divider);
  border-radius: 6px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.7;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
}

.comm-edit-content:focus {
  border-color: var(--text-point);
}

.comm-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}

.comm-edit-cancel-btn {
  background: none;
  border: 1px solid var(--divider);
  border-radius: 6px;
  padding: 6px 16px;
  font-size: 13px;
  color: var(--text-body);
  cursor: pointer;
  transition: background 0.2s;
}

.comm-edit-cancel-btn:hover {
  background: var(--bg-accent);
}

.comm-edit-save-btn {
  background: var(--btn-primary);
  border: none;
  border-radius: 6px;
  padding: 6px 18px;
  font-size: 13px;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

.comm-edit-save-btn:hover {
  background: var(--text-title);
}

.comm-edit-btn {
  background: none;
  border: none;
  font-size: 12px;
  color: var(--text-point);
  cursor: pointer;
  transition: color 0.2s;
  padding: 0;
}

.comm-edit-btn:hover {
  color: var(--text-title);
}

/* ── 반응형 ── */
@media (max-width: 768px) {
  .comm-page-title {
    font-size: 28px;
  }

  .comm-logged-out {
    flex-direction: column;
    align-items: flex-start;
  }

  .comm-posts-empty {
    padding: 28px 20px;
  }

  .comm-write-form {
    padding: 20px;
  }

  .comm-category-pills {
    gap: 6px;
  }
}

/* =============================================
   뼈대 페이지 — "준비 중" 영역
   ============================================= */
.coming-soon {
  text-align: center;
  padding: 120px 0;
}

.coming-soon-title {
  font-family: 'Noto Serif KR', serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--text-title);
  margin-bottom: 16px;
}

.coming-soon-desc {
  font-size: 17px;
  color: var(--text-body);
}

/* =============================================
   반응형 — 768px 이하
   ============================================= */
@media (max-width: 768px) {
  /* 햄버거 표시 */
  .hamburger {
    display: flex;
  }

  /* 메뉴 드롭다운 */
  .nav-menu {
    display: none;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background-color: var(--bg-main);
    border-bottom: 1px solid var(--divider);
    padding: 8px 0;
  }

  .nav-menu.open {
    display: flex;
  }

  .nav-menu li a {
    display: block;
    padding: 12px 24px;
    border-bottom: 1px solid var(--divider);
  }

  .nav-menu li:last-child a {
    border-bottom: none;
  }

  /* 히어로 */
  .hero {
    padding: 64px 0 56px;
  }

  .hero-title {
    font-size: 28px;
  }

  /* 강연 카드 세로 배치 */
  .lecture-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
  }

  /* about — 타임라인 모바일 */
  .timeline-row {
    flex-direction: column;
    gap: 4px;
    padding: 20px 0;
  }

  .timeline-period {
    width: auto;
  }

  /* about — 이사회 활동 모바일 */
  .board-row {
    flex-direction: column;
    gap: 6px;
    padding: 20px 0;
  }

  .board-label {
    width: auto;
  }

  /* about — 강연 주제 모바일 */
  .topic-item {
    font-size: 19px;
    padding: 20px 0;
  }

  /* 홈 — CTA 카드 모바일 */
  .cta-cards {
    flex-direction: column;
  }
}

/* ── about — 뉴스와 인터뷰 재설계 ── */
.news-block-primary {
  margin-bottom: 24px;
}

.news-desc-primary {
  font-size: 14px;
  color: #3D2E1F;
  line-height: 1.8;
  margin-bottom: 10px;
}

.news-lectures-link {
  font-size: 13px;
  color: #8C5E2A;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}

.news-lectures-link:hover {
  color: #3D2E1F;
}

.news-block-secondary {
  margin-top: 0;
}

.news-desc-secondary {
  font-size: 14px;
  color: #6B5842;
  line-height: 1.8;
  margin-bottom: 12px;
}

/* ── 홈 — CTA 카드 섹션 ── */
.cta-cards-section {
  padding: 64px 0 80px;
}

.cta-cards {
  display: flex;
  gap: 16px;
}

.cta-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #FAF5EC;
  border: 0.5px solid #E8DDC7;
  border-radius: 8px;
  padding: 24px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s;
}

.cta-card:hover {
  background-color: #F5EEE1;
}

.cta-label {
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #6B5842;
  text-transform: lowercase;
}

.cta-title {
  font-family: 'Noto Serif KR', serif;
  font-size: 18px;
  color: #3D2E1F;
  font-weight: 500;
  margin-top: 6px;
  line-height: 1.5;
}

.cta-desc {
  font-size: 14px;
  color: #6B5842;
  line-height: 1.7;
  margin-top: 8px;
  flex: 1;
}

.cta-more {
  display: block;
  font-size: 13px;
  color: #8C5E2A;
  margin-top: 16px;
}

/* ── 인사이트 아티클 카드 ── */
.ins-article-card {
  background: #FAF5EC;
  border: 0.5px solid #E8DDC7;
  border-radius: 8px;
  padding: 28px 40px;
  margin-bottom: 16px;
  transition: box-shadow 0.2s;
}

.ins-article-card--open {
  box-shadow: 0 4px 16px rgba(90, 60, 20, 0.08);
}

/* 헤더: 좌측(메타+제목) + 우측(버튼) */
.ins-article-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
}

.ins-article-header-left {
  flex: 1;
  min-width: 0;
}

.ins-article-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.ins-article-date {
  font-size: 13px;
  color: #A37A42;
  letter-spacing: 0.5px;
}

.ins-article-category {
  font-size: 12px;
  color: #8C5E2A;
  background: #F5EEE1;
  border: 0.5px solid #E8DDC7;
  border-radius: 20px;
  padding: 2px 10px;
}

.ins-article-title {
  font-family: 'Noto Serif KR', serif;
  font-size: 20px;
  font-weight: 500;
  color: #3D2E1F;
  margin: 0;
  line-height: 1.5;
}

.ins-article-header:hover .ins-article-title {
  color: #8C5E2A;
}

/* 본문 보기 / 접기 버튼 */
.ins-article-toggle {
  flex-shrink: 0;
  font-size: 13px;
  color: #8C5E2A;
  background: #F5EEE1;
  border: 0.5px solid #E8DDC7;
  border-radius: 20px;
  padding: 5px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.ins-article-toggle:hover {
  background: #EDE0CC;
}

/* 본문 영역 */
.ins-article-body {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 0.5px solid #E8DDC7;
}

.ins-article-paragraphs p {
  font-size: 16px;
  color: #5A4535;
  line-height: 1.95;
  margin-bottom: 16px;
}

.ins-article-paragraphs p:last-child {
  margin-bottom: 0;
}

.ins-article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 0.5px solid #E8DDC7;
}

.ins-article-tag {
  font-size: 12px;
  color: #6B5842;
  background: transparent;
  border: 0.5px solid #C8B99A;
  border-radius: 20px;
  padding: 3px 10px;
}

@media (max-width: 768px) {
  .ins-article-card {
    padding: 20px 20px;
  }
}