/* ============================================================
   행복나눔 지원사업 – 통합 스타일시트
   (index.html fullPage + detail.html 상세페이지 공용)
   ============================================================ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. 테마 변수
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  /* ── 핑크 (행복나눔 지원사업) ── */
  --pink:         #e9196c;
  --pink-light:   #fff0f5;
  --pink-mid:     #ffd6e7;

  /* ── 보라 (기획사업) ── */
  --purple:       #8b44ac;
  --purple-light: #fdf5ff;
  --purple-mid:   #eedcf7;

  /* ── 오렌지 (네트워크) ── */
  --orange:       #e84524;
  --orange-light: #fff8f5;
  --orange-mid:   #fde8df;

  /* ── 파랑 (문화예술행사) ── */
  --blue:         #1e88e5;
  --blue-light:   #f5fbff;
  --blue-mid:     #ddeeff;

  /* ── 바이올렛 (문화예술 활동지원) ── */
  --violet:       #7b3fcf;
  --violet-light: #f8f0ff;
  --violet-mid:   #ead5f7;

  /* ── 시안 (문화예술 교육) ── */
  --cyan:         #0097c7;
  --cyan-light:   #e8fbff;
  --cyan-mid:     #c2eef7;

  /* ── 공통 ── */
  --dark:         #1a1a1a;
  --gray:         #666;
  --gray-light:   #f5f5f5;
  --white:        #ffffff;
  --border:       rgba(0,0,0,.1);
  --radius:       16px;
  --sidebar-w:    280px;
}



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. fullPage 섹션 레이아웃 (index.html)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ── 배너 (상단 ~40%) ── */
.page-banner {
  flex: 0 0 200px;
  display: flex;
  align-items: stretch;
  position: relative;
  overflow: hidden;
  padding: 180px 0 100px;
}

.banner-text {
  flex: 0 0 55%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(32px, 5vw, 80px);
  position: relative;
  z-index: 10;
}
.banner-text h1 {
  font-size: clamp(36px, 4.8vw, 56px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--dark);
  margin-bottom: 14px;
}
.banner-text h1 em { font-style: normal; }
.banner-sub {
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 700;
  color: var(--dark);
  line-height: 1.6;
}

/* ── 카드 영역 (하단 ~60%) ── */
.page-cards {
  flex: 1;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(32px, 5vw, 80px) 100px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. 카드 그리드 (섹션 1–4)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.card-grid {
  max-width: 1200px;
  width: 100%;
  display: grid;
  gap: 16px;
}
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

/* ── 공통 카드 ── */
.card {
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,.08);
  background: var(--white);
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 200px;
  padding: 20px 12px;
  transition: transform .2s, box-shadow .2s;
  text-decoration: none;
  color: inherit;
}
.card:not(.card-char-cell):hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

/* ── 아이콘: 컬러 원형 배경 ── */
.card-icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: currentColor;
  flex-shrink: 0;
  font-size: 32px;
}
.card-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: .12;
}
.card-icon i {
  position: relative;
  z-index: 1;
  font-size: clamp(22px, 2.2vw, 30px);
}

.card-name {
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 700;
  color: var(--dark);
  line-height: 1.5;
  word-break: keep-all;
}

/* ── 원형 카드 (문화예술행사) ── */
.card-circle {
  border-radius: 50%;
  width: 240px;
  height: 240px;
  margin: 0 auto;
}

/* ── 캐릭터 셀 (그리드 마지막 아이템) ── */
.card-char-cell {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.card-char-cell img {
  height: 190px;
  width: auto;
  object-fit: contain;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. 컬처 레이아웃 (섹션 5·6 – 원형 + 캐릭터)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.culture-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
}

.culture-circle {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 2.5px solid currentColor;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  gap: 14px;
  flex-shrink: 0;
}
.culture-circle-icon {
  font-size: 36px;
  color: currentColor;
  line-height: 1;
}
.culture-circle-text {
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 700;
  color: var(--dark);
  line-height: 1.7;
  word-break: keep-all;
}
.culture-chars {
  display: flex;
  align-items: flex-end;
}
.culture-chars img {
  height: clamp(160px, 20vw, 240px);
  width: auto;
  object-fit: contain;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. 섹션별 테마 (배너 배경 · 강조색)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 공통 배너 이미지 가상요소 */
.page-banner::after {
  content: '';
  position: absolute; right: 0; top: 0;
  width: 100%; height: 100%;
  background-repeat: no-repeat;
  background-position: right;
  background-size: cover;
  z-index: 9;
}

/* 1 – 핑크 */
.page--pink .page-banner {
  background: linear-gradient(120deg, var(--pink-light) 0%, var(--pink-mid) 50%, #ffc0d6 100%);
}
.page--pink .page-banner::after { background-image: url('/assets/common/images/contents/business_img_01.png'); background-size: cover; }
.page--pink .banner-text h1 em  { color: var(--pink); }
.page--pink .card                { color: var(--pink); }

/* 2 – 보라 */
.page--purple .page-banner {
  background: linear-gradient(120deg, var(--purple-light) 0%, var(--purple-mid) 50%, #dbbff0 100%);
}
.page--purple .page-banner::after { background-image: url('/assets/common/images/contents/business_img_02.png'); }
.page--purple .banner-text h1 em  { color: var(--purple); }
.page--purple .card                { color: var(--purple); }

/* 3 – 오렌지 */
.page--orange .page-banner {
  background: linear-gradient(120deg, var(--orange-light) 0%, var(--orange-mid) 50%, #fac8b2 100%);
}
.page--orange .page-banner::after { background-image: url('/assets/common/images/contents/business_img_03.png'); }
.page--orange .banner-text h1 em  { color: var(--orange); }
.page--orange .card                { color: var(--orange); }

/* 4 – 파랑 */
.page--blue .page-banner {
  background: linear-gradient(120deg, var(--blue-light) 0%, var(--blue-mid) 50%, #b8d9f8 100%);
}
.page--blue .page-banner::after { background-image: url('/assets/common/images/contents/culture_img_01.png'); }
.page--blue .banner-text h1 em  { color: var(--blue); }
.page--blue .card                { color: var(--blue); }

/* 5 – 바이올렛 */
.page--violet .page-banner {
  background: linear-gradient(120deg, var(--violet-light) 0%, var(--violet-mid) 50%, #d4a8ef 100%);
}
.page--violet .page-banner::after  { background-image: url('/assets/common/images/contents/culture_img_02.png'); }
.page--violet .banner-text h1 em   { color: var(--violet); }
.page--violet .culture-circle      { color: var(--violet); }
.page--violet .card                { color: var(--violet); }

/* 6 – 시안 */
.page--cyan .page-banner {
  background: linear-gradient(120deg, var(--cyan-light) 0%, var(--cyan-mid) 50%, #90d8ee 100%);
}
.page--cyan .page-banner::after  { background-image: url('/assets/common/images/contents/culture_img_03.png'); }
.page--cyan .banner-text h1 em   { color: var(--cyan); }
.page--cyan .culture-circle      { color: var(--cyan); }
.page--cyan .card                { color: var(--cyan); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. 상세 페이지 레이아웃 (detail.html)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 2컬럼 래퍼 + 테마 토큰 ── */
.biz-wrap {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  max-width: 1160px;
  margin: 160px auto 60px;
  padding: 0 24px;

  /* 기본: 핑크 (data-theme 미지정 시) */
  --accent:       var(--pink);
  --accent-light: var(--pink-light);
  --accent-mid:   var(--pink-mid);
}

/* 테마별 강조색 오버라이드 */
.biz-wrap[data-theme="purple"] { --accent: var(--purple); --accent-light: var(--purple-light); --accent-mid: var(--purple-mid); }
.biz-wrap[data-theme="orange"] { --accent: var(--orange); --accent-light: var(--orange-light); --accent-mid: var(--orange-mid); }
.biz-wrap[data-theme="blue"]   { --accent: var(--blue);   --accent-light: var(--blue-light);   --accent-mid: var(--blue-mid);   }
.biz-wrap[data-theme="violet"] { --accent: var(--violet); --accent-light: var(--violet-light); --accent-mid: var(--violet-mid); }
.biz-wrap[data-theme="cyan"]   { --accent: var(--cyan);   --accent-light: var(--cyan-light);   --accent-mid: var(--cyan-mid);   }

/* ── 사이드바 ── */
.biz-sidebar {
  flex: 0 0 var(--sidebar-w);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.sidebar-header {
  padding: 32px 24px 24px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.sidebar-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  position: relative;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 36px;
}
.sidebar-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  opacity: .1;
}
.sidebar-icon i {
  font-size: 28px;
  color: var(--accent);
  position: relative;
  z-index: 1;
}
.sidebar-title {
  display: block;
  font-size: 19px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 8px;
}
.sidebar-desc {
  font-size: 15px;
  color: var(--gray);
  line-height: 1.6;
}

/* ── 네비 목록 ── */
.sidebar-nav { padding: 20px 0; }
.nav-label {
  padding: 0 24px 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--dark);
}
.sidebar-nav ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  font-size: 15px;
  color: var(--gray);
  transition: background .15s, color .15s;
}
.sidebar-nav ul li a i { font-size: 12px; opacity: .5; }
.sidebar-nav ul li a:hover         { background: var(--accent-light); color: var(--accent); }
.sidebar-nav ul li.active a        { background: var(--accent-light); color: var(--accent); font-weight: 700; }
.sidebar-nav ul li.active a i      { opacity: 1; color: var(--accent); }

/* ── 기부 버튼 ── */
.sidebar-btns {
  display: flex;
  border-top: 1px solid var(--border);
}
.btn-donate {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 8px;
  background: none;
  border: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--gray);
  transition: background .15s, color .15s;
}
.btn-donate:last-child { border-right: none; }
.btn-donate i          { font-size: 20px; }
.btn-donate:hover      { background: var(--gray-light); }
.btn-donate.active     { background: var(--accent-light); color: var(--accent); }

/* ── 메인 콘텐츠 ── */
.biz-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* 인트로 */
.biz-intro {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.intro-icon {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--accent);
  font-size: 24px;
}
.intro-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  opacity: .1;
}
.intro-icon i   { font-size: 34px; color: var(--accent); position: relative; z-index: 1; }
.intro-body     { flex: 1; }
.intro-title {
  font-size: 28px;
  font-weight: 900;
  color: var(--dark);
  margin-bottom: 12px;
  letter-spacing: -.02em;
}
.intro-desc {
  font-size: 16px;
  color: var(--gray);
  line-height: 1.5;
  word-break: keep-all;
}

/* 지원대상 */
.biz-target {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 16px;
  padding: 20px 28px;
  display: flex;
  align-items: center;
}
.target-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  padding-right: 28px;
}
.target-label i { font-size: 20px; }
.target-pipe {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin-right: 28px;
  flex-shrink: 0;
}
.target-content { font-size: 16px; color: var(--dark); font-weight: 500; }

/* 지원내용 */
.biz-support {
  margin-top: 16px;
}
.support-heading {
  font-size: 20px;
  font-weight: 900;
  color: var(--accent);
  margin-bottom: 20px;
}
.support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 186px);
  justify-content: center;
  gap: 16px;
}
.support-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 16px 24px;
  text-align: center;
  transition: box-shadow .2s, transform .2s;
}
.support-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 15%, transparent);
}
.sc-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--white);
  border: solid 1px var(--accent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  position: relative;
  font-size: 24px;
}
.sc-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: .12;
}
.sc-icon i   { font-size: 24px; color: var(--accent); position: relative; z-index: 1; }
.sc-title    { font-size: 17px; font-weight: 700; color: var(--dark); margin-bottom: 10px; }
.sc-desc     { font-size: 15px; color: var(--gray); line-height: 1.65; word-break: keep-all; }

/* ── 설명 전용 카드 변형 (.support-grid--text) ── */
.support-grid--text {
  grid-template-columns: repeat(2, 1fr);
}
.support-card--text {
  text-align: left;
  padding: 24px 24px 24px 20px;
  border-left: 4px solid var(--accent);
  border-radius: 0 14px 14px 0;
}
.support-card--text .sc-title {
  font-size: 15px;
  color: var(--accent);
  margin-bottom: 8px;
}
.support-card--text .sc-desc {
  font-size: 14px;
  line-height: 1.7;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. 반응형
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 태블릿 (≤ 1024px) ── */
@media (max-width: 1024px) {
  /* fullPage 섹션 */
  .page-banner { flex: 0 0 200px; }
  .page-cards {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 32px clamp(24px, 4vw, 48px) 20px;
    gap: 24px;
  }
  .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .card-grid  { gap: 12px; max-width: 100%; }
  .card       { height: auto; padding: 10px 8px; }
  .card-circle { border-radius: 50%; width: 130px; height: 130px; }
  .card-icon  { width: 64px; height: 64px; margin-bottom: 8px; }
  .card-icon i { font-size: 18px; }
  .card-char-cell {  height: auto; align-items: center; }
  .card-char-cell img { height: 120px; }

  /* 컬처 레이아웃 */
  .culture-layout { gap: 32px; }
  .culture-circle { width: 160px; height: 160px; gap: 10px; }
  .culture-circle-icon { font-size: 26px; }
  .culture-circle-text { font-size: 16px; }
  .culture-chars img { height: 130px; }

  /* 상세 페이지 */
  .biz-wrap { flex-direction: column; gap: 20px; }
  .biz-sidebar { flex: none; width: 100%; }
  .sidebar-nav ul { display: grid; grid-template-columns: repeat(2, 1fr); }
  .support-grid { grid-template-columns: repeat(auto-fit, 200px); }
}

/* ── 모바일 (≤ 640px) ── */
@media (max-width: 640px) {
  /* fullPage 섹션 */
.page-banner::after { opacity: 0.6; }
.banner-text { flex: 0 0 auto; }
  .page-banner { flex: 0 0 120px;  padding: 100px 0 60px;}
  .banner-text h1 { font-size: 28px; margin-bottom: 8px; }
  .banner-sub     { font-size: 14px; }
  .page-cards     { padding: 16px; gap: 0; overflow: hidden; }
  .card-grid      { gap: 16px; grid-auto-rows: calc((100svh - 240px) / 4); }
  .card           { height: auto; padding: 10px 6px; }
  .card-char-cell { height: auto; }
  .card-char-cell img { height: 120px; }

  /* 상세 페이지 */
  .biz-wrap  { margin: 24px auto; padding: 0 16px; }
  .biz-intro { flex-direction: column; gap: 16px; padding: 24px; }
  .intro-title { font-size: 22px; }
  .biz-target  { flex-wrap: wrap; gap: 12px; }
  .target-pipe { display: none; }
  .sidebar-nav ul { grid-template-columns: 1fr; }
  .support-grid   { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}