/* ===================================================================
   기본 폰트 & 공통
   ------------------------------------------------------------------- */
:root{
  --bg:#0b0b0b;
  --text:#111;
  --muted:#6b7280;
  --primary:#2a83ff;
  --primary-dark:#0067e2;
  --surface:#ffffff;
  --ring: rgba(42,131,255,.15);
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.15);
}

html,body{margin:0;padding:0}
body{font-family:'Noto Sans KR',sans-serif;color:var(--text);background:#fff}
main{margin-top:64px}

/* 버튼 공통 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;padding:.85rem 1.2rem;border-radius:999px;
  font-weight:700;text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:transform .08s ease, background .2s ease, border-color .2s ease;
  user-select:none; -webkit-tap-highlight-color:transparent;
}
:root{
  --secondary-dark: #a3a3a3; /* hover */
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--primary);color:#fff;font-weight: 500;}
.btn--secondary{font-weight: 500; scale: 1; font-size: medium;}
.btn--primary:hover{background:var(--primary-dark)}
.btn--secondary:hover{background: var(--secondary-dark);}
.btn--ghost{background:transparent;border-color:rgba(0,0,0,.12);color:#111}
.btn--ghost:hover{background:#a3a3a3}
.btn--dark{background:#1f2937;color:#fff}
.btn--dark:hover{background:#111}

/* 링크(섹션 우상단 '모두 보기') */
.link-more{font-weight:700;text-decoration:none;color:#111;opacity:.7}
.link-more:hover{opacity:1}

/* ===================================================================
   HEADER (기존 규칙 유지, 필요부분만 발췌)
   ------------------------------------------------------------------- */
header{
  width:100%;background:#fff;box-sizing:border-box;position:fixed;top:0;left:0;z-index:10000;
  display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:64px;
}
.hamburger-menu{display:none;background:none;border:none;cursor:pointer}
.hamburger-bar{display:block;width:25px;height:3px;margin:4px 0;background:#000}

/* ===================================================================
   HERO
   ------------------------------------------------------------------- */
/* 배경 이미지는 인라인 style="--hero-bg:url('...')" 로 주입 */
.hero{
  position:relative;min-height:78vh;display:grid;place-items:center;overflow:hidden;
  background:#000;
  background-image:var(--hero-bg, none);
  background-size:cover;background-position:center;
}
.hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.35) 100%);
}
.hero__inner{
  position:relative;z-index:1;max-width:1100px;width:100%;
  padding:4rem 1.25rem;color:#fff;
}
.hero__eyebrow{
  display:inline-block;font-weight:700;letter-spacing:.08em;opacity:.85;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);
  padding:.35rem .7rem;border-radius:999px;margin-bottom:1rem;
}
.hero__title{margin:0 0 .75rem 0;font-size:clamp(28px,4.8vw,64px);line-height:1.1}
.hero__title .line{display:block;opacity:0;transform:translateY(16px);filter:blur(2px)}
.hero__title .brand{font-weight:800;letter-spacing:.02em}
.hero__subtitle{margin:.25rem 0 1.25rem 0;font-size:clamp(14px,1.8vw,18px);opacity:.9}
.hero__cta{display:flex;gap:.75rem;flex-wrap:wrap}
.hero__cta .btn{ font-weight:600; }  /* 기존 700 → 600 */

/* 공연정보 바로가기 버튼 살짝 빛나는 효과 */
.hero__cta .btn--primary {
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 0 rgba(38, 147, 255, 0.6);
  animation: glowPulse 2.4s ease-in-out infinite;
}
@keyframes glowPulse {
  0% { box-shadow: 0 0 0 0 rgba(38, 147, 255, 0.6); }
  50% { box-shadow: 0 0 15px 5px rgba(38, 147, 255, 0.5); }
  100% { box-shadow: 0 0 0 0 rgba(38, 147, 255, 0.6); }
}

/* index.html (히어로 있는 페이지) → 흰색 로고 */
body:has(.hero) header .logo-img {
  content: url("/frontend/images/MOABA JEONJU.svg");
}
/* 나머지 페이지 → 검정색 로고 */
body:not(:has(.hero)) header .logo-img {
  content: url("/frontend/images/moabajeonju.svg");
}

/* 첫 로드시 등장 애니메이션(더 역동적 버전은 필요 시 교체) */
@keyframes fadeUp{to{opacity:1;transform:none;filter:none}}
.hero.is-ready .line-1{animation:fadeUp .7s .1s both ease-out}
.hero.is-ready .line-2{animation:fadeUp .7s .35s both ease-out}

/* ===================================================================
   HOME CAROUSEL (전주 공연 5개)
   ------------------------------------------------------------------- */
.carousel-section{max-width:1100px;margin:48px auto 16px;padding:0 20px}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.section-header h2{margin:0;font-size:clamp(20px,2.6vw,28px)}

.carousel{position:relative}
.carousel__viewport{overflow:hidden}
.carousel__track{
  display:flex;gap:16px;transition:transform .35s ease;will-change:transform;
  padding:4px 2px;
}
.carousel__btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:999px;border:1px solid rgba(0,0,0,.12);
  background:#fff;box-shadow:var(--shadow);cursor:pointer;font-size:28px;line-height:1;
  display:grid;place-items:center;color:#111;opacity:.9;z-index:5;
}
.carousel__btn:hover{opacity:1}
.carousel__btn.prev{left:-10px}
.carousel__btn.next{right:-10px}

.carousel-card{
  flex:0 0 calc(25% - 12px);
  max-width:calc(25% - 12px);
  background:#fff;border-radius:var(--radius);box-shadow:0 6px 20px rgba(0,0,0,.08);
  overflow:hidden;border:1px solid rgba(0,0,0,.06)
}
.card__inner{display:block;color:inherit;text-decoration:none;height:100%}
.thumb{aspect-ratio:4/3;background:#f3f4f6;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.carousel-card:hover .thumb img{transform:scale(1.04)}
.meta{padding:12px 14px}
.title{
  margin:0 0 6px 0;font-size:15px;line-height:1.35;font-weight:800;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.sub{margin:0 0 6px 0;color:var(--muted);font-size:13px}
.sub .dot{margin:0 6px}
.date{margin:0;color:#111;font-size:13px;font-weight:600}

/* ===================================================================
   CTA BAND
   ------------------------------------------------------------------- */
.cta-band{padding:44px 0;background:#0f172a;color:#fff;margin-top:40px}
.cta-band__inner{max-width:1100px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.cta-band__text h3{margin:0 0 6px 0;font-size:clamp(20px,2.6vw,28px)}
.cta-band__text p{margin:0;opacity:.9}
.cta-band__actions{display:flex;gap:10px;flex-wrap:wrap}

/* ===================================================================
   관리자 의견(기능 유지)
   ------------------------------------------------------------------- */
#admin-feedback{
  max-width:1100px;margin:36px auto;padding:22px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:16px;
  box-shadow:0 6px 24px rgba(0,0,0,.06)
}
#admin-feedback h3{margin:0 0 10px 0;font-size:20px}
#admin-feedback textarea{
  width:100%;box-sizing:border-box;padding:12px 14px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;
  outline:none;transition:border-color .2s ease
}
#admin-feedback textarea:focus{border-color:var(--primary)}
#admin-feedback button{
  margin-top:10px;padding:10px 16px;border:none;border-radius:999px;background:var(--primary);color:#fff;font-weight:800;cursor:pointer;font-size: medium;
}
#admin-feedback button:hover{background:var(--primary-dark)}

/* ===================================================================
   FOOTER
   ------------------------------------------------------------------- */
.site-footer{background:#fff;border-top:1px solid #eee;margin-top:24px}
.site-footer__inner{
  max-width:1100px;margin:0 auto;padding:28px 20px;display:grid;grid-template-columns:1.2fr .9fr .9fr;gap:24px
}
.site-footer h4,.site-footer h5{margin:0 0 10px 0}
.site-footer p{margin:0;color:#4b5563}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin:6px 0;color:#4b5563}
.site-footer a{text-decoration:none;color:#111}
.site-footer a:hover{text-decoration:underline}

/* ===================================================================
   소개 섹션 (Feature)
   ------------------------------------------------------------------- */
.feature{
  max-width:1100px; margin:64px auto 24px; padding:0 20px;
  display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:32px;
}
.feature--survey{ grid-template-columns:1fr 1.05fr; }
.feature__title{ margin:0 0 10px 0; font-size:clamp(20px,2.6vw,28px); }
.feature__desc{ margin:0 0 16px 0; color:#4b5563; line-height:1.75; }
.feature__cta{ position:relative; margin-top: 20px; }
.feature__cta::after{ content:"→"; display:inline-block; margin-left:8px; transform:translateY(1px); }

.stack__img{scale: 0.8;}

/* 2×2 타일 */

.tile{
  width:60%; height: 100%;  object-fit:cover; display:block; border-radius:18px; margin-left: 50px;
  box-shadow:0 18px 44px rgba(0,0,0,.16); background:#f3f4f6;
  transition:transform .25s ease;
}
.tile:hover{ transform:translateY(-2px); }

/* ===================================================================
   헤더 내부 레이아웃 & 메뉴
   ------------------------------------------------------------------- */
   
header .header-container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.header-container nav{
  position:absolute; left:50%; transform:translateX(-50%);
  white-space:nowrap;
  /* nav가 클릭 막히지 않게 z-index 부여 */
  z-index: 2;
}
header .logo-container{ display:flex; align-items:center; gap:12px; }
header .logo-text{ font-weight:800; letter-spacing:.5px; color:inherit; }
header .logo-img{ margin-left:100px }  
nav, .auth-container {
  display: flex;
  align-items: center;
}
/* nav 가로 정렬 & 불릿 제거 */
header nav ul{
  display:flex; gap:28px;
  list-style:none; margin:0; padding:0;
}
header nav ul li a{
  text-decoration:none; color:inherit; margin-left:auto;
  font-weight:600;
  line-height:1; padding:.25rem 0; white-space: nowrap;
}
/* 기본적으로 햄버거 메뉴는 숨김 (데스크톱에서는 기존 nav가 보일 수 있음) */
.hamburger-menu {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
}

/* 햄버거 아이콘 바 스타일 */
.hamburger-bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 4px 0;
  background-color: #000;
}
/* 우측 로그인/회원가입(기본 — 데스크탑) */
header .auth-container{ display:flex; align-items:center; gap:10px; }

.login-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem .9rem; border-radius:999px; white-space:nowrap; margin-right: 40px;
  text-decoration:none;}
/* =========================
   [헤더 오버레이] — 홈(히어로 존재)에서만 적용
   ========================= */
body:has(.hero) header{
  position: absolute;
  top: 0; left: 0; right: 0;
  background: transparent;
  border-bottom: none;
  color: #fff;
  z-index: 10000;
}

body:has(.hero) .hamburger-bar{ background:#fff; }

/* 히어로 위에서도 로그인/회원가입은 흰 버튼 유지(기본값) */
body:has(.hero) header .auth-container .login-btn,
body:has(.hero) header .auth-container .register-btn{
  background:#fff !important; color:#111 !important; border-color:#fff !important;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}

/* (요청) 인덱스용 로그인 버튼 컬러 */
body:has(.hero) header .auth-container .login-btn{
  background:#007bff !important; color:#fff !important;
  border:0; font-weight:500;
  transition:background .2s, box-shadow .2s, transform .06s;
}
body:has(.hero) header .auth-container .login-btn:hover{
  background:#0056b3 !important; border-color:#78440c !important;
}

/* (요청) 그 외 페이지 로그인 버튼 톤 */
body:not(:has(.hero)) header .auth-container .login-btn{
  background:#007bff; color: #fff !important;; border:0; font-weight:500;
  transition:background .2s, box-shadow .2s, transform .06s;
}
body:not(:has(.hero)) header .auth-container .login-btn:hover{
  background:#0056b3; border-color:#0056b3;
}

/* 기본 레이아웃 유지 */
body:has(.hero) main{ margin-top: 0; }

/* ===================================================================
   =======  반응형 한 곳에서 정리 (여기부터 교체)  =======
   ------------------------------------------------------------------- */




/* 980px 이하(모바일 전환)
   - 햄버거 아이콘 우측 상단 고정
   - 로그인/회원가입 버튼 숨김
   - 히어로 텍스트 여백 보강 + 배경 사진 위쪽 기준으로 덜 답답하게
   - 메인 섹션 단일열 정렬
*/
@media (max-width:980px){
  /* 헤더 높이/여백 */
  header{height:56px;padding:0 12px;}
  main{margin-top:56px}

  /* 햄버거 오른쪽 상단 고정 */
  header .logo-container{ width:100%; position:relative; }
    .logo-link { display: flex; align-items: center; } /* 정렬 안정화 */
  .logo-link img {
    height: 28px;   /* 28이나 30처럼 '정수' 픽셀 추천 */
    width: auto;
    display: block; /* 베이스라인 간격 제거로 소수점 정렬 방지 */
  }
  .hamburger-menu{
    display:block !important;
    margin-left: auto;
  }
    .auth-container{
    display:none;
  }
  .section-image{ display:none !important; }
  /* 네비 & 인증 숨김 (로그인 버튼 포함) */
  header nav,
  header .auth-container{ display:none !important; }

  /* 모바일 메뉴(열렸을 때) – 흰 배경 + 검은 글씨 */
  header .mobile-menu{
    background:#fff !important; color:#111 !important;
    border-top:1px solid #eee; 
  }
  header .mobile-menu nav ul{ gap:18px; }
  header .mobile-menu nav ul li a{ color:#111 !important; }
  .mobile-menu-logo{color: #000; font-family: 'Noto Sans KR', sans-serif;}
  /* 로고 크기 살짝 축소 */
  header .logo-img{ margin-left:0; max-height:28px; height:auto; }

  /* 히어로: 텍스트 여백 보강 + 사진 덜 확대된 느낌으로 (상단 기준) */
  .hero{ min-height:68vh; background-position:center top; }
  .hero__inner{ padding:3.4rem 1.25rem 2.6rem; margin-left: 50px;}
  .hero__eyebrow{ margin-bottom:.9rem; transform:scale(.96); }
  .hero__title{ margin:0 20px 1rem 0; }
  .hero__subtitle{ margin:.2rem 0 1.3rem 0; font-size:clamp(13px,3.8vw,16px); line-height:1.6; }
  .hero__cta .btn{ padding:.78rem 1.08rem; }

  /* Feature 단일열 + 순서 보정 */
  .feature,
  .feature--survey{ grid-template-columns:1fr; gap:22px; }
  .feature__body{ order:2; }
  .feature__media{ order:1; }
  .feature--survey .feature__body{ order:1; }
  .feature--survey .feature__media{ order:2; }

  /* 캐러셀 카드 2장 느낌 */
  .carousel-card{ flex:0 0 calc(50% - 10px); max-width:calc(50% - 10px); }
  .carousel__btn.prev{ left:-6px } .carousel__btn.next{ right:-6px }

  /* 공통 섹션 (기능, 수요조사, 트렌드) */
  .feature-section,
  .survey-section,
  .trend-section {
    max-width: 840px;
    margin: 40px auto;
    padding: 0 10px;
  }
  .section-container {
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }
  .section-text h2 {
    font-size: 1.5rem;
    text-align: center;
  }
  .section-desc {
    font-size: 0.95rem;
    text-align: center;
  }
  .section-image {
    transform: scale(0.75);
  }

}

/* 900px 이하: info 섹션 단일열 */
@media (max-width:900px){
  .info-grid{ grid-template-columns:1fr; }
  .info-card{ grid-template-columns:1fr; }
  .info-media{ aspect-ratio:16/9; }
}

/* 720px 이하: 푸터 단일열, 헤더 여백 보정 */
@media (max-width:720px){
  .site-footer__inner{ grid-template-columns:1fr; }
  header nav{ margin-left:0; margin-right:0; }
    .hamburger-menu{
    display:block !important;
    margin-left: auto;
  }
}

/* 640px 이하: 캐러셀 1.5장 느낌, 히어로 여백/사진 더 정교화, 스택 오프셋 축소 */
@media (max-width:640px){
  .carousel-card{ flex:0 0 78%; max-width:78%; }
  .carousel-section{ padding:0 14px; }

  .hero{ min-height:64vh; background-position:50% 18%; }
  .hero__inner{ padding:3rem 14px 2.4rem; margin-left: 50px;}  /* 모바일에서 텍스트 좌우 여백 확보 */
  .hero__title{ scale: 0.9; transform-origin: left; }
  .hero .btn--primary{scale: 0.8; margin-left: -15px;}
  .stack::before{ left:20px; top:-14px; }
  .stack::after{ left:10px; top:10px; }
    .hamburger-menu{
    display:block !important;
    margin-left: auto;
  }
}
.feature-section,
.survey-section {
  max-width: 1000px;
  margin: 80px auto;
  padding: 0 20px;
}
.section-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  
}
/* 텍스트 영역 */
.section-text {
  flex: 1;
  min-width: 300px;
}
.section-text h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #333;
  font-weight: 700;
}
.section-desc {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
  margin: 0;
}
.section-container.reverse {
  flex-direction: reverse;
}
/* 이미지 영역 */
.section-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.feature-section .section-image{scale: 1.3;}

.section-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  transform: scale(0.8);
  transform-origin: center; /* 중심을 기준으로 축소 */
  
}
#user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  position: absolute;
  top: 20px;   /* 원래 로그인/회원가입 위치에 맞게 조정 */
  right: 100px; /* 원래 로그인/회원가입 영역과 맞추기 위한 값 */
  font-size: 16px;
  font-weight: 500;
}

/* 환영 메시지 스타일 */
#welcome-message {
  margin-right: 10px;
}

/* 버튼 기본 스타일 */
#user-info button {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background-color: #F98F32;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* 버튼 호버 효과 */
#user-info button:hover {
  background-color: #d87d1d;
}
@media screen and (max-width: 1100px) {
  /* 데스크탑 전용 사용자 정보나 네비게이션 숨김 */
  #user-info,
  nav,
  .auth-container {
    display: none !important;
  }
}
/* 오른쪽 박스 공통 */
.right-actions { display:flex; align-items:center; gap:10px; }
/* 절대배치 제거 */
#user-info { position:static; display:flex; align-items:center; gap:10px; }
/* nav a 오른쪽 밀림 제거 */
header nav ul li a { margin-left:0; }
/* 모바일 전용 */
@media (max-width: 840px) {
  /* line-2 텍스트 렌더링 안정화 */
  .hero .line-2{
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
  }

  /* fadeUp: 마지막 프레임을 정수 좌표로 '정리' */
  @keyframes fadeUp{
    from { opacity:0; transform: translateY(18px) scale(.98); }
    99.9% { transform: translateY(0) scale(1); } /* 소수점 제거 */
    to   { opacity:1; transform:none; filter:none; } /* 레이어 해제 */
  }

  /* 애니 중에만 레이어 힌트, 끝나면 JS로 해제 */
  .hero.is-ready .line-2{ will-change: transform, opacity; }
}
@media screen and (max-width: 840px) {
  .section-text {
    text-align: center;
  }
  .btn--primary {
    display: inline-block; /* 크기 그대로 유지 */
  }
}
/* ==== 홈 캐러셀 카드 ==== */
.carousel-section { max-width: 1200px; margin: 60px auto 0; padding: 0 20px; }
.carousel { position: relative; }
.carousel__viewport { overflow: hidden; }
.carousel__track { display: flex; gap: 16px; transition: transform .3s ease; }

/* 카드 크기: 과하게 크지 않게 '조금' 키움 */
.carousel-card {
  flex: 0 0 260px;           /* 카드 너비 */
  height: 300px;             /* 기존보다 소폭 ↑ (270~320px 내에서 취향 조정 가능) */
  border: 1px solid #eee;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.carousel-card .card__inner {
  display: flex; flex-direction: column; height: 100%;
  text-decoration: none; color: inherit;
}

/* 썸네일: 이미지 '전체 보이게' + 살짝 축소 */
.carousel-card .thumb {
  height: 180px;             /* 이미지 영역도 소폭 ↑ */
  background: #f7f9fb;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.carousel-card .thumb img {
  width: 100%; height: 100%;
  object-fit: contain;       /* 잘리지 않게 전체 표시 */
  transform: scale(0.94);    /* '조금' 축소 요청 반영 */
  transform-origin: center;
  image-rendering: auto;
}

/* 텍스트 */
.carousel-card .meta { padding: 12px; display: grid; gap: 6px; }
.carousel-card .title { font-size: 1rem; line-height: 1.35; font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.carousel-card .sub, .carousel-card .date { font-size: .9rem; color: #6b7280; }

/* 모바일 미세조정 */
@media (max-width: 480px) {
  .carousel-card { height: 290px; }
  .carousel-card .thumb { height: 170px; }
}