@charset "utf-8";
/* =====================================================================
   2025 두레생협 연차보고서 브랜드 띠배너 (.annualband) — A 밝은 그라디언트
   - 톤: 연녹→아이보리 밝은 그라디언트 + 우상단 햇살 + 새싹/태양 라인아트(SVG)
   - 밝은 배경 + 딥그린(#23422b) 글자로 WCAG AA 대비(시니어 가독), 딥그린 채움 CTA
   - PC=푸터 앞, 모바일=신규생활재 섹션 직후. 전 사이트 무영향(.annualband 스코프 한정).
   - 마크업 무변경(.ab__* 재사용): ab__bg=밝은그라디언트, ab__duo=SVG 라인아트(data-uri),
     ab__warm/ab__scrim=중립. 인라인 스타일 금지(색·아트 전부 이 파일).
   - 신설 2026-07-30 B(사진 시네마틱) → 2026-08-03 A(밝은 그라디언트)로 재설계
   ===================================================================== */

.annualband{
  --ab-green:#3d6041;        /* 두레 딥그린 포인트 */
  --ab-green-deep:#23422b;   /* 헤드라인(진한 딥그린) */
  --ab-green-mid:#4a7150;    /* 잎새 */
  --ab-em:#5a8a3e;           /* 강조(2025) 밝은 그린 */
  --ab-sub:#4a5a4d;          /* 서브카피 */
  --ab-serif:'Maru Buri','Nanum Myeongjo',serif;

  display:block;
  width:100%;
  margin:60px 0 0;           /* 위 섹션과 여백, 아래는 다음 블록이 붙음 */
  padding:0;
  background:#f1f7e6;        /* 밴드 밖 폴백(밝은 아이보리-연녹) */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* 밴드 본체 = 클릭 링크 전체 (밝은 그라디언트, 텍스트 세로 중앙) */
.annualband .ab__link{
  position:relative;
  display:block;
  min-height:clamp(170px,17vw,210px);
  max-width:1280px;          /* 메인 다른 섹션과 정렬 */
  margin:0 auto;
  overflow:hidden;
  text-decoration:none;
  color:var(--ab-green-deep);
  border-radius:14px;
  isolation:isolate;
}

/* 배경 = 연녹→아이보리 밝은 그라디언트 + 우상단 햇살(웜 라이트) */
.annualband .ab__bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 140% at 84% 8%, rgba(255,246,204,.75) 0%, rgba(255,246,204,0) 46%),
    linear-gradient(115deg, #e6f2d8 0%, #f1f7e6 40%, #fbfaf0 100%);
}

/* 새싹·태양 라인아트(SVG data-uri) — 우측, 마크업 무변경 위해 ab__duo 레이어 재사용 */
.annualband .ab__duo{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20200'%20fill='none'%3E%3Cg%20stroke='%235a8a3e'%20stroke-width='2.4'%20stroke-linecap='round'%20opacity='.55'%3E%3Cpath%20d='M840%20200%20V120'/%3E%3Cpath%20d='M840%20150%20C812%20150%20800%20128%20800%20108%20C826%20108%20840%20128%20840%20150%20Z'%20fill='%237cae57'%20fill-opacity='.2'/%3E%3Cpath%20d='M840%20132%20C868%20132%20880%20110%20880%2090%20C854%2090%20840%20112%20840%20132%20Z'%20fill='%237cae57'%20fill-opacity='.2'/%3E%3Cpath%20d='M905%20200%20V138'/%3E%3Cpath%20d='M905%20162%20C883%20162%20874%20145%20874%20129%20C895%20129%20905%20146%20905%20162%20Z'%20fill='%237cae57'%20fill-opacity='.16'/%3E%3Cpath%20d='M905%20148%20C927%20148%20936%20131%20936%20115%20C915%20115%20905%20132%20905%20148%20Z'%20fill='%237cae57'%20fill-opacity='.16'/%3E%3Cpath%20d='M770%20200%20V150'/%3E%3Cpath%20d='M770%20168%20C752%20168%20745%20154%20745%20141%20C762%20141%20770%20155%20770%20168%20Z'%20fill='%237cae57'%20fill-opacity='.15'/%3E%3C/g%3E%3Cg%20stroke='%23c99a35'%20stroke-width='2'%20opacity='.55'%20fill='none'%3E%3Ccircle%20cx='912'%20cy='46'%20r='20'/%3E%3Cpath%20d='M912%2012%20V2%20M912%2090%20V80%20M878%2046%20H868%20M956%2046%20H946%20M888%2022%20L881%2015%20M936%2070%20L943%2077%20M936%2022%20L943%2015%20M888%2070%20L881%2077'%20stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") right center / auto 100% no-repeat;
}

/* 밝은 재설계에서 어두운 오버레이 레이어는 중립화(마크업 스팬 유지) */
.annualband .ab__warm{ display:none; }
.annualband .ab__scrim{ display:none; }

/* 텍스트 블록 — 세로 중앙 정렬(밝은 배경) */
.annualband .ab__inner{
  position:relative; z-index:3;
  min-height:inherit;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(24px,3.4vw,42px) clamp(26px,4vw,60px);
}
.annualband .ab__eyebrow{
  font-size:12px; font-weight:800; letter-spacing:.2em;
  color:var(--ab-green);
  margin-bottom:12px;
}
.annualband .ab__head{
  font-family:var(--ab-serif); font-weight:800;
  font-size:clamp(26px,3.4vw,42px); line-height:1.16; letter-spacing:-.015em;
  color:var(--ab-green-deep);
  max-width:20ch;
}
.annualband .ab__head .ab__em{ color:var(--ab-em); }
.annualband .ab__row{
  margin-top:16px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.annualband .ab__sub{
  font-size:14.5px; font-weight:500;
  color:var(--ab-sub);
}

/* CTA — 딥그린 채움 알약(밝은 배경 대비 또렷) */
.annualband .ab__cta{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-size:14px; font-weight:700; color:#fff;
  background:var(--ab-green); border:0;
  padding:10px 22px; border-radius:999px;
  box-shadow:0 6px 16px rgba(61,96,65,.28);
  transition:transform .18s ease, box-shadow .2s ease;
}
.annualband .ab__cta .ab__arw{ transition:transform .2s ease; }
.annualband .ab__link:hover .ab__cta{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(61,96,65,.34);
}
.annualband .ab__link:hover .ab__cta .ab__arw{ transform:translateX(4px); }

/* 키보드 포커스 접근성 */
.annualband .ab__link:focus-visible{ outline:none; }
.annualband .ab__link:focus-visible .ab__cta{ outline:3px solid var(--ab-green-deep); outline-offset:3px; }

/* ---------- 태블릿 ---------- */
@media (max-width:900px){
  .annualband{ margin-top:52px; }
  .annualband .ab__head{ font-size:clamp(24px,4vw,34px); }
}

/* ---------- 모바일: 텍스트 하단 정렬, 아트는 우상단 유지 ---------- */
@media (max-width:640px){
  .annualband{ margin-top:40px; }
  .annualband .ab__link{ min-height:200px; }
  .annualband .ab__duo{
    background-position:right -10px top;
    background-size:auto 66%;
  }
  .annualband .ab__inner{ justify-content:flex-end; }
  .annualband .ab__head{ font-size:25px; }
  .annualband .ab__row{ gap:14px; }
}

/* 모션 최소화 선호 존중 */
@media (prefers-reduced-motion:reduce){
  .annualband .ab__cta,
  .annualband .ab__cta .ab__arw{ transition:none; }
}