/* culture (문화재단) — v0.1.0
   레이아웃 참조: 양평문화재단(ypcf.or.kr) — teal 톤, 신뢰감 있는 공공기관 스타일
   원칙: 반응형 · 접근성 · 넉넉한 여백 · 카드형 콘텐츠 · 공공 사이트 특유 절제 */

:root{
  --brand:#1B1C1D;
  --primary:#4A9E8F;
  --primary-d:#2F7B6E;
  --primary-l:#E9F5F2;
  --accent:#E76F51;
  --muted:#6b7280;
  --muted-2:#4b5563;
  --line:#E5E7EB;
  --line-soft:#F1F3F4;
  --bg:#fff;
  --bg-soft:#F7F9F8;
  --radius:16px;
  --radius-sm:10px;
  --wrap:1280px;
  --shadow:0 8px 24px rgba(0,0,0,.06);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
body{ font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--brand); background:var(--bg); font-size:15px; line-height:1.6; letter-spacing:-.01em; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:0; padding:0; }
h1,h2,h3{ margin:0; letter-spacing:-.03em; }

.cu-wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.cu-skip{ position:absolute; left:-9999px; top:0; }
.cu-skip:focus{ left:8px; top:8px; padding:8px 12px; background:#000; color:#fff; z-index:9999; }
.cu-eyebrow{ margin:0 0 8px; font-size:12px; letter-spacing:.24em; color:var(--primary); font-weight:700; }
.cu-more{ font-size:13px; color:var(--muted); font-weight:500; }
.cu-more:hover{ color:var(--primary-d); }
.cu-empty{ padding:40px; text-align:center; color:var(--muted); background:var(--bg-soft); border-radius:12px; }

/* 데모 배너 */
.cu-demo{ display:flex; justify-content:center; gap:16px; align-items:center; padding:8px 16px;
  background:linear-gradient(90deg,#0B1B34,#1e3a8a); color:#fff; font-size:12px; }
.cu-demo b{ background:#B4E56E; color:#0B1B34; padding:2px 8px; border-radius:4px; font-weight:800; }
.cu-demo a{ padding:4px 10px; border:1px solid rgba(255,255,255,.4); border-radius:999px; }

/* 상단 유틸 */
.cu-topbar{ background:#F5F7F6; border-bottom:1px solid var(--line); font-size:12px; }
.cu-topbar__in{ display:flex; justify-content:flex-end; padding:8px 24px; max-width:var(--wrap); margin:0 auto; }
.cu-topbar nav ul{ display:flex; gap:20px; margin:0; padding:0; list-style:none; }
.cu-topbar a{ color:var(--muted-2); }
.cu-topbar a:hover{ color:var(--primary-d); }

/* 헤더 */
.cu-header{ background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:80; }
.cu-header__in{ display:flex; align-items:center; gap:32px; padding:16px 24px; max-width:var(--wrap); margin:0 auto; }
.cu-brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.cu-brand__mark{ width:38px; height:38px; border-radius:8px; background:linear-gradient(135deg,var(--primary),var(--primary-d)); position:relative; }
.cu-brand__mark::before{ content:''; position:absolute; inset:9px; border-radius:4px; border:2px solid #fff; }
.cu-brand__name b{ display:block; font-size:18px; font-weight:800; letter-spacing:-.03em; line-height:1.15; }
.cu-brand__name small{ display:block; font-size:9.5px; color:var(--muted); letter-spacing:.18em; margin-top:2px; }
.cu-gnb{ flex:1; }
.cu-gnb > ul{ display:flex; gap:8px; margin:0; padding:0; list-style:none; }
.cu-gnb > ul > li{ position:relative; }
.cu-gnb > ul > li > a{ display:block; padding:14px 16px; font-size:15px; font-weight:600; }
.cu-gnb > ul > li:hover > a{ color:var(--primary-d); }
.cu-gnb > ul > li:hover > .cu-gnb__sub{ display:block; }
.cu-gnb__sub{ display:none; position:absolute; top:100%; left:0; min-width:180px; padding:8px 0;
  background:#fff; border:1px solid var(--line); border-radius:10px; list-style:none; margin:0;
  box-shadow:var(--shadow); }
.cu-gnb__sub li a{ display:block; padding:8px 16px; font-size:13.5px; }
.cu-gnb__sub li a:hover{ background:var(--primary-l); color:var(--primary-d); }
.cu-header__act{ display:flex; align-items:center; gap:8px; }
.cu-btn{ padding:10px 16px; border-radius:8px; font-size:13px; font-weight:700; letter-spacing:-.02em; }
.cu-btn--ghost{ background:transparent; color:var(--brand); border:1px solid var(--line); }
.cu-btn--ghost:hover{ border-color:var(--primary); color:var(--primary-d); }
.cu-btn--pri{ background:var(--primary); color:#fff; }
.cu-btn--pri:hover{ background:var(--primary-d); }
.cu-burger{ display:none; width:40px; height:40px; flex-direction:column; justify-content:center; align-items:center; gap:5px; }
.cu-burger span{ display:block; width:20px; height:2px; background:#111; }

/* 히어로 */
.cu-hero{ position:relative; overflow:hidden; background:#0e2925; }
.cu-hero .swiper-slide{ position:relative; }
.cu-hero .swiper-slide img{ width:100%; aspect-ratio:2.2/1; object-fit:cover; opacity:.85; }
.cu-hero__copy{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  padding:0 max(24px, calc((100vw - var(--wrap))/2 + 24px)); color:#fff; z-index:2; }
.cu-hero__copy .cu-eyebrow{ color:#B4E56E; }
.cu-hero__copy h1{ font-size:clamp(28px,4vw,52px); font-weight:800; letter-spacing:-.03em; line-height:1.15; max-width:720px; }
.cu-hero .swiper-pagination-bullet{ background:#fff; opacity:.5; }
.cu-hero .swiper-pagination-bullet-active{ opacity:1; width:24px; border-radius:4px; }
.cu-hero .swiper-button-next, .cu-hero .swiper-button-prev{ color:#fff; }

/* 신뢰 밴드 */
.cu-trust{ background:var(--primary); color:#fff; }
.cu-trust__in{ display:flex; justify-content:space-around; gap:24px; padding:28px 24px; text-align:center; }
.cu-trust__i strong{ display:block; font-size:34px; font-weight:800; letter-spacing:-.04em; line-height:1.1; }
.cu-trust__i span{ display:block; font-size:12.5px; margin-top:4px; opacity:.85; letter-spacing:.05em; }

/* 섹션 공통 */
.cu-sec{ padding:88px 0; }
.cu-sec--soft{ background:var(--bg-soft); }
.cu-sec--cta{ padding-bottom:120px; }
.cu-sechd{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:32px; flex-wrap:wrap; gap:8px; }
.cu-sechd--center{ flex-direction:column; align-items:center; text-align:center; }
.cu-sechd h2{ font-size:32px; font-weight:800; }

/* 진행 사업 그리드 */
.cu-prog{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.cu-prog li{ margin:0; padding:0; }
.cu-prog a{ display:block; }
.cu-prog__thumb{ position:relative; aspect-ratio:16/10; border-radius:var(--radius-sm); overflow:hidden; background:linear-gradient(135deg,var(--primary),var(--primary-d)); margin-bottom:14px; }
.cu-prog__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.cu-prog a:hover .cu-prog__thumb img{ transform:scale(1.05); }
.cu-prog__ph{ position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:20px; font-weight:800; letter-spacing:-.02em; }
.cu-prog__body small{ font-size:11px; color:var(--primary-d); font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.cu-prog__body h3{ margin:4px 0 6px; font-size:16px; font-weight:700; letter-spacing:-.02em; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cu-prog__meta{ margin:0; font-size:12.5px; color:var(--muted); }

/* 공연·전시 카드 (캐러셀) */
.cu-carousel{ overflow:hidden; }
.cu-carousel .swiper-slide{ width:340px; }
.cu-carousel .swiper-button-next, .cu-carousel .swiper-button-prev{
  width:44px; height:44px; background:#fff; border-radius:50%; box-shadow:var(--shadow); color:var(--brand); top:40%; }
.cu-carousel .swiper-button-next::after, .cu-carousel .swiper-button-prev::after{ font-size:16px; font-weight:900; }
.cu-event{ display:block; background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.cu-event__thumb{ position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--bg-soft); }
.cu-event__thumb img{ width:100%; height:100%; object-fit:cover; }
.cu-event__ph{ position:absolute; inset:0; display:grid; place-items:center; color:var(--primary-d); font-size:22px; font-weight:800; background:var(--primary-l); }
.cu-event__tag{ position:absolute; left:14px; top:14px; padding:5px 10px; background:rgba(0,0,0,.75); color:#fff; font-size:11px; border-radius:999px; letter-spacing:-.01em; }
.cu-event__body{ padding:18px 20px 22px; }
.cu-event__body h3{ margin:0 0 12px; font-size:17px; font-weight:700; letter-spacing:-.02em; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cu-event__body dl{ margin:0; }
.cu-event__body dl > div{ display:flex; gap:12px; padding:5px 0; font-size:13px; border-top:1px solid var(--line-soft); }
.cu-event__body dl > div:first-child{ border-top:0; padding-top:8px; }
.cu-event__body dt{ width:52px; color:var(--muted); font-weight:500; flex-shrink:0; }
.cu-event__body dd{ margin:0; color:var(--brand); font-weight:500; }

/* 재단 소식 탭 */
.cu-tabs{ display:flex; gap:6px; margin-bottom:24px; border-bottom:2px solid var(--line-soft); }
.cu-tabs button{ padding:12px 22px; font-size:15px; font-weight:600; color:var(--muted-2); border-bottom:2px solid transparent; margin-bottom:-2px; }
.cu-tabs button.is-on{ color:var(--primary-d); border-bottom-color:var(--primary); font-weight:800; }
.cu-newslist{ display:none; list-style:none; margin:0; padding:0; }
.cu-newslist.is-on{ display:block; }
.cu-newslist li{ border-bottom:1px solid var(--line-soft); }
.cu-newslist li a{ display:flex; justify-content:space-between; align-items:center; padding:16px 4px; gap:16px; }
.cu-newslist li a:hover{ background:var(--primary-l); padding-left:12px; padding-right:12px; }
.cu-newslist__t{ font-size:15px; font-weight:500; flex:1;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.cu-newslist__d{ font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; flex-shrink:0; }
.cu-newslist__empty{ padding:40px !important; text-align:center; color:var(--muted); border:0 !important; }

/* 아카이브 */
.cu-arc-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.cu-arc{ position:relative; aspect-ratio:4/3; border-radius:var(--radius-sm); overflow:hidden; background:var(--primary-l); display:block; }
.cu-arc img{ width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.cu-arc:hover img{ transform:scale(1.05); }
.cu-arc__ph{ position:absolute; inset:0; display:grid; place-items:center; color:var(--primary-d); font-size:20px; font-weight:800; }
.cu-arc__t{ position:absolute; left:14px; bottom:14px; right:14px; color:#fff; font-size:13.5px; font-weight:700; letter-spacing:-.02em;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cu-arc::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.6)); pointer-events:none; }

/* 이용 안내 CTA */
.cu-ctas{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.cu-ctacard{ display:block; padding:32px 28px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); transition:all .25s; }
.cu-ctacard:hover{ border-color:var(--primary); transform:translateY(-4px); box-shadow:var(--shadow); }
.cu-ctacard__ico{ display:inline-block; font-size:36px; margin-bottom:16px; }
.cu-ctacard h3{ margin:0 0 8px; font-size:20px; font-weight:800; letter-spacing:-.03em; }
.cu-ctacard p{ margin:0 0 16px; font-size:13.5px; color:var(--muted-2); line-height:1.6; }
.cu-ctacard__go{ font-size:13px; font-weight:700; color:var(--primary-d); }

/* 오시는 길 */
.cu-visit{ display:grid; grid-template-columns:1fr 1.4fr; gap:40px; align-items:start; }
.cu-visit__info h2{ font-size:32px; font-weight:800; margin-bottom:20px; }
.cu-visit__addr{ font-size:17px; font-weight:600; margin:0 0 20px; letter-spacing:-.02em; }
.cu-visit__dl{ margin:0 0 20px; padding:0; }
.cu-visit__dl > div{ display:flex; gap:14px; padding:8px 0; border-top:1px solid var(--line-soft); font-size:14px; }
.cu-visit__dl > div:first-child{ border-top:0; }
.cu-visit__dl dt{ width:64px; color:var(--muted); font-weight:500; }
.cu-visit__dl dd{ margin:0; font-weight:500; }
.cu-visit__note{ font-size:13px; color:var(--muted); padding:14px 18px; background:var(--primary-l); border-radius:8px; }
.cu-visit__map{ aspect-ratio:16/10; background:linear-gradient(135deg,#dee5e3,#c9d3d0); border-radius:var(--radius); display:grid; place-items:center; color:var(--muted); font-size:13px; }

/* 푸터 */
.cu-footer{ background:#1f2528; color:#c7cdd1; padding:60px 0 0; margin-top:0; }
.cu-brand--dark .cu-brand__mark--dark{ background:linear-gradient(135deg,#5ac8b7,#4A9E8F); }
.cu-brand--dark b{ color:#fff; }
.cu-footer__in{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.4fr; gap:32px; padding-bottom:40px; }
.cu-footer__slogan{ margin:14px 0 0; font-size:13px; }
.cu-footer__slogan strong{ display:block; color:#fff; margin-bottom:4px; font-weight:700; }
.cu-footer__t{ margin:0 0 12px; font-size:13.5px; font-weight:700; color:#fff; }
.cu-footer__ul{ list-style:none; margin:0; padding:0; }
.cu-footer__ul li{ margin-bottom:6px; }
.cu-footer__ul a{ font-size:13px; }
.cu-footer__ul a:hover{ color:#fff; }
.cu-footer__info{ font-size:12.5px; color:#8b9298; line-height:1.7; }
.cu-footer__info b{ color:#c7cdd1; font-weight:600; }
.cu-footer__bot{ padding:16px 0; border-top:1px solid #2b3437; font-size:11.5px; color:#7a8286; }
.cu-footer__bot .cu-wrap{ display:flex; justify-content:space-between; }
.cu-footer__bot a:hover{ color:#fff; }

/* Top */
.cu-top-btn{ position:fixed; right:24px; bottom:24px; z-index:70; width:44px; height:44px; border-radius:50%;
  background:var(--primary); color:#fff; box-shadow:var(--shadow); font-size:18px; font-weight:700; }
.cu-top-btn:hover{ background:var(--primary-d); }

/* -------- 반응형 -------- */
@media (max-width: 1024px){
  .cu-prog{ grid-template-columns:repeat(3, 1fr); }
  .cu-arc-grid{ grid-template-columns:repeat(3, 1fr); }
  .cu-ctas{ grid-template-columns:1fr; }
  .cu-visit{ grid-template-columns:1fr; }
  .cu-footer__in{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 768px){
  .cu-gnb, .cu-header__act .cu-btn{ display:none; }
  .cu-burger{ display:flex; }
  .cu-topbar{ display:none; }
  .cu-header__in{ padding:12px 16px; gap:16px; }
  .cu-wrap{ padding:0 16px; }
  .cu-sec{ padding:56px 0; }
  .cu-sec--cta{ padding-bottom:80px; }
  .cu-sechd h2{ font-size:24px; }
  .cu-prog{ grid-template-columns:repeat(2, 1fr); gap:14px; }
  .cu-prog__body h3{ font-size:14px; }
  .cu-arc-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
  .cu-trust__in{ flex-wrap:wrap; padding:20px; }
  .cu-trust__i strong{ font-size:26px; }
  .cu-carousel .swiper-slide{ width:260px; }
  .cu-hero__copy h1{ font-size:24px; }
  .cu-tabs button{ padding:10px 14px; font-size:13.5px; }
  .cu-footer__in{ grid-template-columns:1fr; gap:24px; padding:0 4px 32px; }
}