/* Hero — 사진 배경(knsu-coop 방식). 배경은 :before(스케일+드리프트 애니메이션),
   가독성용 그라디언트 스크림은 :after. 원본 이미지 피사체 위치에 따라
   background-position을 조정할 수 있다(모바일 breakpoint 참고). */
.hero{
  min-height:680px;
  display:flex; align-items:center; color:#fff; position:relative; overflow:hidden;
}
.hero:before{
  content:""; position:absolute; inset:-3%; z-index:0;
  background:url('/img/knou_bg_1.jpg') center/cover no-repeat;
  transform:scale(1.02); animation:hero-image-drift 11s ease-in-out infinite alternate; will-change:transform;
}
.hero-bg{
  position:absolute; inset:-3%; z-index:0;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  transform:scale(1.02); will-change:opacity,transform;
}
.hero-bg-secondary{
  background-image:url('/img/knou_bg_2.jpg');
  opacity:0;
  animation:
    hero-second-fade 12s ease-in-out infinite,
    hero-image-drift 11s ease-in-out infinite alternate-reverse;
}
.hero:after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to bottom,transparent calc(100% - 140px),var(--bg) 100%),
    linear-gradient(90deg,rgba(82,70,39,.86) 0%,rgba(190,175,128,.52) 46%,rgba(190,175,128,.08) 100%);
}
@keyframes hero-image-drift{
  from{transform:scale(1.02) translate3d(-.6%,0,0)}
  to{transform:scale(1.08) translate3d(.6%,-.5%,0)}
}
@keyframes hero-second-fade{
  0%,42%{opacity:0}
  50%,92%{opacity:1}
  100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .hero:before{animation:none}
  .hero-bg-secondary{display:none}
}
.hero-content{position:relative; z-index:2; padding:110px 0 80px; max-width:640px}
.hero .eyebrow{
  display:flex; align-items:center; gap:10px; font-weight:800;
  letter-spacing:.08em; font-size:14px; color:#fff;
}
.hero .eyebrow:before{content:""; width:32px; height:2px; background:var(--primary-soft)}
.hero h1{font-size:clamp(38px,5.6vw,64px); line-height:1.16; margin:22px 0; letter-spacing:-.045em; color:#fff}
.hero p{font-size:17px; max-width:520px; color:rgba(255,255,255,.85); margin:0}
.hero-buttons{display:flex; gap:12px; margin-top:30px; flex-wrap:wrap}
.hero-buttons .btn.secondary{background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.5)}
.buttons{display:flex; gap:12px; flex-wrap:wrap}

/* Content grid — 공지사항·조합원을 반반씩 한 줄에 (매장안내·퀵버튼은 뺐다) */
.section-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
  margin:32px auto 24px;
}
.panel{
  min-width:0;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:#fff; box-shadow:var(--shadow); padding:24px;
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:14px;
}
.panel-head h2{margin:0; font-size:24px; letter-spacing:-.03em}
.panel-head a{font-size:14px; color:var(--muted); font-weight:700}
.notice-list{list-style:none; padding:0; margin:0}
.notice-list li{
  border-bottom:1px solid #eef1f5; font-size:17px;
}
.notice-link{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:13px 12px; margin:0 -12px; border-radius:10px;
  transition:background-color .18s ease, color .18s ease;
}
.notice-link:hover{background:var(--primary-soft)}
.notice-link:hover .notice-text{color:var(--primary-dark)}
.notice-list li:last-child{border-bottom:0}
.notice-title{display:flex; align-items:center; gap:8px; min-width:0}
.notice-text{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.notice-empty{color:var(--muted); padding:13px 0; font-size:15px}

/* 조합원 패널 — 공지사항 패널과 짝을 맞추는 카드형(예전 전체폭 배너 대신) */
.panel-member{display:flex; flex-direction:column}
.panel-member p{margin:0 0 20px; color:#526078; font-size:16px; flex:1}
.member-actions{display:flex; gap:10px; flex-wrap:wrap}

/* Instagram */
.instagram{margin:0 auto 24px}
.instagram-box{
  border:1px solid var(--line); border-radius:22px; padding:24px;
  background:#fff; box-shadow:var(--shadow);
}
.insta-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  margin-bottom:16px;
}
.insta-head h2{margin:0; font-size:25px}
.insta-head p{margin:4px 0 0; color:var(--muted); font-size:16px}
.insta-link{color:var(--primary); font-weight:800; font-size:14px}
.insta-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.insta-card{
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:#fff;
}
.insta-placeholder{
  aspect-ratio:1.35; display:grid; place-items:center;
  background:linear-gradient(135deg,#eef4ff,#dde8f8);
  color:#65758c; font-weight:800;
}
.insta-card p{margin:0; padding:12px 14px; font-size:16px}

/* Stats */
.stats{margin:0 auto 24px}
.stats-box{
  border-radius:26px; padding:44px 48px;
  background:linear-gradient(135deg,#0054a7,#00428e);
  color:#fff;
}
.stats-head .eyebrow{font-size:13px; font-weight:800; letter-spacing:.08em; color:#bcd0ff}
.stats-head h2{margin:8px 0 28px; font-size:26px; letter-spacing:-.03em}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
/* tabular-nums가 없으면 카운트업 중 자릿수마다 폭이 달라져 숫자가 덜덜 떨린다 */
.stat-item strong{
  display:block; font-size:34px; font-weight:900; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}
.stat-item strong span{font-size:18px; font-weight:700; margin-left:2px}
.stat-item p{margin:6px 0 0; font-size:16px; color:rgba(255,255,255,.72)}

/* 섹션이 보이면 왼쪽부터 차례로 떠오른다 (히어로의 rise와 같은 어휘).
   숨기는 건 .will-animate가 붙었을 때뿐이고 이 클래스는 JS가 직접 단다 —
   JS가 안 돌거나 실패하면 아무것도 안 숨겨져서 숫자가 그냥 보인다. */
.stats-grid.will-animate .stat-item{opacity:0; transform:translateY(16px)}
.stats-grid.is-in .stat-item{
  animation:stat-rise .8s cubic-bezier(.22,.75,.25,1) forwards;
}
.stats-grid.is-in .stat-item:nth-child(2){animation-delay:.12s}
.stats-grid.is-in .stat-item:nth-child(3){animation-delay:.24s}
.stats-grid.is-in .stat-item:nth-child(4){animation-delay:.36s}
@keyframes stat-rise{to{opacity:1; transform:translateY(0)}}

@media (prefers-reduced-motion:reduce){
  .stats-grid.will-animate .stat-item{opacity:1; transform:none}
  .stats-grid.is-in .stat-item{animation:none}
}

@media (max-width:1000px){
  .hero{min-height:600px}
  .section-grid{grid-template-columns:1fr}
  .insta-grid{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:640px){
  .hero{min-height:520px}
  .hero-content{padding:80px 0 50px}
  .hero h1{margin:16px 0}
  .hero-buttons .btn.secondary{display:none}
  .insta-grid{grid-template-columns:1fr 1fr}
  .insta-head{align-items:flex-start; flex-direction:column}
  .stats-box{padding:32px 24px}
  .stats-grid{grid-template-columns:1fr 1fr; gap:22px 16px}
}

/* KNOU 공식 UI 팔레트 확인용 브랜드 스트립 */
.knou-colors{padding:24px 0 54px}
.knou-colors-inner{display:grid; grid-template-columns:repeat(6,1fr); overflow:hidden; border-radius:16px; box-shadow:var(--shadow)}
.knou-colors-inner span{min-height:64px; padding:12px; background:var(--swatch); color:#fff; display:flex; align-items:flex-end; font-size:11px; font-weight:800}
.knou-colors-inner span:last-child{color:#17233c}
@media (max-width:640px){.knou-colors-inner{grid-template-columns:repeat(3,1fr)}}