/* ==========================================================================
   2026 노인일자리 주간 — 메인 전용 (히어로·슬라이더·프로그램·공지·SNS·영상)
   ========================================================================== */
:root{
  /* 메인 슬라이더 — 2025 행사 공식 사진 (주관기관 제공) */
  --kv1:url("../img/kv-festival.webp");   /* 노익짱 페스티벌 사인물 */
  --kv2:url("../img/kv-ceremony.webp");   /* 기념식 유공자 포상     */
  --kv3:url("../img/kv-booth.webp");      /* 참여기관 부스          */

  /* 어르신 일러스트 — 배경 투명 WEBP. 파일명이 용도를 나타냅니다. */
  --il-cheer:url("../img/il-cheer.webp");     /* 응원하는 노부부   — 히어로 */
  --il-heart:url("../img/il-heart.webp");     /* 마음을 전하는 분  — 히어로 */
  --il-vital:url("../img/il-vital.webp");     /* 활기찬 어르신     — 히어로 */
  --il-welcome:url("../img/il-welcome.webp"); /* 인사하는 노부부   */
  --il-online:url("../img/il-online.webp");   /* 컴퓨터 사용       */

  /* 프로그램 카드 배경 — 코비가 각 프로그램을 안내하는 장면 */
  --sc1:url("../img/kv/sc-ceremony.webp");    /* 01 기념식   · 그랜드볼룸 */
  --sc2:url("../img/kv/sc-symposium.webp");   /* 02 심포지엄 · 컨퍼런스홀 */
  --sc3:url("../img/kv/sc-festival.webp");    /* 03 페스티벌 · 부스 현장 */
  --sc4:url("../img/kv/sc-online.webp");      /* 04 온라인   · 참여관   */
}
/* ══════════════════════════════════════════════════════════════════════════
   히어로 — 공식 포스터 키비주얼
   하늘(그라데이션) · 구름 · 꽃 → 제호/행사명/일자 → 캐릭터 → 하단 풍경 순으로
   레이어를 쌓습니다. 모든 그림은 포스터 원본 벡터(assets/img/kv/)입니다.
   ══════════════════════════════════════════════════════════════════════════ */
/* 히어로는 헤더를 뺀 화면 높이에 맞춥니다.
   키비주얼·버튼 크기는 가로(vw)와 세로(vh) 중 '작은 쪽'을 따르게 해서(min(vw,vh))
   화면이 낮아도 아래가 잘리지 않고 통째로 들어옵니다. */
.hero{position:relative;overflow:hidden;color:var(--kv-ink);text-align:center;
  background:linear-gradient(180deg,var(--kv-sky-t) 0%,#E9F6F1 46%,var(--kv-sky-b) 100%);
  min-height:calc(100svh - var(--hd));
  display:flex;align-items:center;
  padding:clamp(20px,3.4vh,54px) 0 clamp(104px,17vh,220px)}
.hero > .inner{width:100%}
.hero__sky{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
/* 구름 — 화면을 가로질러 아주 천천히 흐릅니다 */
.hero .kvcl{width:clamp(150px,20vw,268px);height:clamp(76px,10vw,137px)}
.hero .c1{top:9%;animation-duration:88s}
.hero .c2{top:27%;animation-duration:124s;animation-delay:-58s;opacity:.7;
  width:clamp(120px,15vw,206px);height:clamp(76px,9.5vw,130px)}
.hero .c3{top:52%;animation-duration:150s;animation-delay:-104s;opacity:.55}
/* 꽃 — 포스터처럼 여백에 흩뿌립니다 */
.hero .kvfl{width:clamp(20px,2.5vw,34px);height:clamp(20px,2.5vw,34px)}
.hero .f1{top:12%;left:5.5%;animation-delay:0s}
.hero .f2{top:31%;left:12%;animation-delay:2.1s;width:clamp(14px,1.6vw,22px);height:clamp(14px,1.6vw,22px)}
.hero .f3{top:57%;left:7%;animation-delay:3.4s}
.hero .f4{top:9%;right:14%;animation-delay:1.2s;width:clamp(16px,1.9vw,26px);height:clamp(16px,1.9vw,26px)}
.hero .f5{top:34%;right:5.5%;animation-delay:4.2s}
.hero .f6{top:63%;right:11%;animation-delay:2.7s;width:clamp(14px,1.6vw,22px);height:clamp(14px,1.6vw,22px)}
.hero .f7{top:74%;left:9%;animation-delay:5.1s;width:clamp(13px,1.5vw,20px);height:clamp(13px,1.5vw,20px)}
.hero .f8{top:20%;right:26%;animation-delay:6s;width:clamp(13px,1.5vw,20px);height:clamp(13px,1.5vw,20px)}
/* 하단 풍경 — 포스터 원본(가운데)에 좌우 언덕을 이어 붙인 그림 */
.hero__land{position:absolute;left:0;right:0;bottom:-1px;z-index:1;pointer-events:none;
  height:clamp(96px,min(16vw,20vh),220px);
  background:var(--kv-land) center bottom/cover no-repeat}
/* 캐릭터 — 풀밭 위에서 위아래로 살랑입니다 */
.hero__bee{right:clamp(6px,5vw,110px);bottom:clamp(34px,5vh,74px);
  width:clamp(74px,min(11vw,15vh),158px);z-index:2}
.hero .inner{position:relative;z-index:3;
  display:grid;grid-template-columns:minmax(0,1fr) clamp(330px,34vw,520px);
  gap:clamp(14px,2vw,34px);align-items:center}

/* ── 제호 · 행사명 · 일자 (가운데 정렬) ─────────────────────────────── */
.kv{max-width:760px;margin:0 auto;justify-self:center}
.hero .eyeb{color:var(--kv-green-d);animation:kvRise .8s .05s both cubic-bezier(.2,.7,.2,1)}
.hero .eyeb::before{background:var(--kv-green-d)}
.kv__slogan{margin:clamp(12px,1.8vh,26px) 0 0;line-height:0;
  animation:kvRise .9s .12s both cubic-bezier(.2,.7,.2,1)}
.kv__slogan img{width:clamp(210px,min(42vw,44vh),480px);height:auto;margin:0 auto}
.kv__name{margin:clamp(12px,2vh,28px) 0 0;line-height:0;
  animation:kvRise .9s .24s both cubic-bezier(.2,.7,.2,1)}
.kv__name img{width:clamp(160px,min(27vw,28vh),316px);height:auto;margin:0 auto}
.kv__date{margin:clamp(10px,1.5vh,20px) 0 0;animation:kvPop .8s .38s both cubic-bezier(.2,.7,.2,1)}
.kv__date span{display:inline-block;padding:clamp(6px,.9vh,10px) clamp(22px,3vw,40px);
  background:var(--kv-green);color:#fff;
  font-size:clamp(13px,min(1.4vw,1.9vh),18px);font-weight:700;letter-spacing:-.02em;
  clip-path:polygon(0 0,100% 0,calc(100% - 16px) 50%,100% 100%,0 100%,16px 50%)}
/* 주최·주관 — 실제 기관 로고 */
.kv__org{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(12px,2.2vw,34px);margin:clamp(12px,2vh,26px) 0 0;
  animation:kvRise .8s .48s both cubic-bezier(.2,.7,.2,1)}
.kv__org>span{display:inline-flex;align-items:center;gap:clamp(8px,.9vw,12px)}
.kv__org b{flex-shrink:0;padding:4px 11px;border-radius:999px;background:rgba(255,255,255,.72);
  font-size:clamp(10.5px,min(.9vw,1.3vh),12.5px);font-weight:700;letter-spacing:.06em;color:#5C7784}
.kv__org img{width:auto;height:clamp(19px,min(2.4vw,3vh),32px)}

/* ── 바로가기 4종 — 제호 아래 한 줄 ─────────────────────────────────── */
/* 바로가기 — 히어로 오른쪽에 2×2 로 세웁니다 */
.qmenu{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vh,16px);
  width:100%;margin:0;
  animation:kvRise .9s .58s both cubic-bezier(.2,.7,.2,1)}
/* 칸은 링크(<a>)일 수도, 아직 열리지 않은 안내(<span>)일 수도 있습니다.
   생김새는 같아야 하므로 상자 스타일은 둘 다에 겁니다. */
.qmenu>a,.qmenu>span{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(11px,1.6vh,17px);padding:clamp(21px,3.5vh,36px) 12px;text-align:center;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.9);border-radius:16px;box-shadow:0 10px 26px rgba(44,89,116,.13);transition:.24s cubic-bezier(.2,.7,.2,1)}
.qmenu a:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(31,93,150,.28)}
.qmenu .ic{width:clamp(50px,min(4.9vw,7.4vh),72px);height:clamp(50px,min(4.9vw,7.4vh),72px);border-radius:50%;display:grid;place-items:center;background:var(--brand);transition:.24s;flex:0 0 auto}
.qmenu .ic svg{width:46%;height:46%;fill:#fff}
/* 문구가 “2050 나의 시니어 부캐 찾기” 처럼 길어져 두 줄이 됩니다.
   낱말 중간에서 끊기지 않도록 keep-all 을 두고 줄간격을 좁게 잡습니다. */
.qmenu b{font-size:clamp(15px,min(1.27vw,1.94vh),19px);font-weight:700;letter-spacing:-.045em;line-height:1.34;word-break:keep-all;color:var(--ink);transition:.24s}
.qmenu>*:nth-child(1) .ic{background:#2E7DC4}
.qmenu>*:nth-child(2) .ic{background:#274F8C}
.qmenu>*:nth-child(3) .ic{background:#12657F}
.qmenu>*:nth-child(4) .ic{background:#B0521C}
.qmenu a:nth-child(1):hover{background:#1F5D96;border-color:#1F5D96}
.qmenu a:nth-child(2):hover{background:#274F8C;border-color:#274F8C}
.qmenu a:nth-child(3):hover{background:#12657F;border-color:#12657F}
.qmenu a:nth-child(4):hover{background:#9C4718;border-color:#9C4718}
.qmenu a:hover .ic{background:rgba(255,255,255,.22)}
.qmenu a:hover b{color:#fff}
/* ── 행사 정보 바 — 히어로 바로 아래 흰 띠 ──────────────────────────── */
.hbarwrap{background:#fff;border-bottom:1px solid var(--line)}
.hbar{display:grid;grid-template-columns:1fr 1fr auto;gap:1px}
.hbar>div{padding:30px 0}
.hbar>div+div{padding-left:36px;border-left:1px solid var(--line)}
.hbar dt{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--brand);margin-bottom:10px}
.hbar dd{font-size:19px;font-weight:600;letter-spacing:-.02em}
.hbar dd small{display:block;font-size:14.5px;font-weight:400;color:#5A6673;margin-top:3px}
.hbar .dday{text-align:right;min-width:230px}
.hbar .dday dd{font-size:64px;font-weight:700;line-height:.9;color:var(--brand-d);letter-spacing:-.05em}
.hbar .dday dd u{text-decoration:none;font-size:17px;font-weight:600;color:#5A6673;margin-left:10px;letter-spacing:0}
.about{display:grid;grid-template-columns:1.02fr .98fr;gap:80px;align-items:center}
/* “2026 노인일자리주간” 은 한 줄로 굵게 — 담당자 요청.
   줄바꿈 태그를 없앴고, 굵기를 700→800 으로 올렸습니다. */
.about .h2{font-weight:800}
.slider{position:relative;overflow:hidden;border-radius:20px;background:#EDEFF1}
.track{display:flex;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.slide{min-width:100%;aspect-ratio:5/4;position:relative}
.slide span.ph{position:absolute;inset:0;background-size:cover;background-position:center 46%}
.slide .p1{background-image:var(--kv1)}
.slide .p2{background-image:var(--kv2)}
.slide .p3{background-image:var(--kv3)}
.slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:70px 26px 44px;color:#fff;font-size:15.5px;font-weight:600;background:linear-gradient(transparent,rgba(14,16,19,.86))}
.snav{position:absolute;right:18px;bottom:18px;display:flex;gap:7px;z-index:2}
.snav button{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.94);font-size:19px;color:var(--ink);transition:.2s}
.snav button:hover{background:var(--brand);color:#fff}
.dots{position:absolute;left:26px;bottom:20px;display:flex;gap:6px;z-index:2}
.dots i{width:22px;height:3px;border-radius:2px;background:rgba(255,255,255,.5);transition:.3s}
.dots i.on{background:#fff;width:40px}
.lead2{margin:16px 0 0;font-size:clamp(15.5px,1.25vw,17px);line-height:1.85;color:var(--body)}
.lead2+.lead2{margin-top:14px}
/* 슬로건은 한 줄로 놓습니다. 줄바꿈 대신 '칸 너비에 맞는 글자 크기'로 맞춥니다.
   실측: 이 문장은 글자크기의 16.6배 폭을 차지합니다(=16.6em).
   ABOUT 오른쪽 칸 폭 ≈ 0.4925×화면폭 − 73px (1320px 이상에서 576px 고정)이므로,
   칸의 93% 를 채우는 크기 = 0.056 × 칸폭 → 아래 식이 나옵니다. */
.quote{margin:26px 0 22px;font-size:min(calc(2.76vw - 4.1px),32px);font-weight:600;
  letter-spacing:-.045em;line-height:1.45;white-space:nowrap;color:var(--ink)}
.quote mark{background:none;color:var(--brand)}
/* 이 규칙이 .quote·.lead2 보다 구체적이라(0-1-1 > 0-1-0) 위에서 정한 크기를
   전부 덮어쓰고 있었습니다 — 인용문이 16.5px 로 작게 나오던 원인입니다.
   본문 문단에만 걸리도록 두 클래스를 제외합니다. */
.about p:not(.quote):not(.lead2){font-size:16.5px;color:#4E5A67}
.about p+p{margin-top:15px}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:32px}
.tags li{padding:8px 16px;background:var(--soft);border-radius:999px;font-size:14.5px;font-weight:600;color:var(--brand-d)}
/* 프로그램 카드 — 2×2. 행 높이를 고정하지 않고 이미지 비율이 카드 크기를 정합니다 */
/* ══════════════════════════════════════════════════════════════════════════
   프로그램 슬라이더 — 3D 입체 배치
   --------------------------------------------------------------------------
   · 좌표는 전부 CSS 가 갖고 JS 는 각 카드의 data-pos(0/1/-1/2)만 바꿉니다.
     JS 가 없거나 실패해도 카드는 격자로 그대로 보입니다(점진적 향상).
   · 카드 비율은 3:2 그대로라 배경 그림이 잘리지 않습니다.
   · 옆 카드가 무대 밖으로 나가 잘리지 않도록 폭·이동량을 계산해 뒀습니다
     (카드 폭 46%, 좌우 이동 56% → 바깥쪽 끝이 무대의 0.5%~99.5% 안에 들어옵니다).
   ══════════════════════════════════════════════════════════════════════════ */
/* overflow:hidden 은 안전망입니다 — 어떤 계산 실수가 있어도 페이지에 가로 스크롤이 생기지 않게.
   원근(perspective)은 .cf__stage 에 있으므로 3D 는 그대로 유지됩니다. */
.cf{position:relative;width:100%;max-width:clamp(700px,118vh,1320px);margin:0 auto;overflow:hidden}
/* 무대 높이는 가장 높은 카드가 정합니다 — 카드를 모두 같은 격자 칸(1/1)에 겹쳐 둡니다.
   절대위치를 쓰지 않으므로 '그림 + 글자칸' 높이가 그대로 반영됩니다. */
.cf__stage{position:relative;width:100%;perspective:1500px;perspective-origin:50% 46%}
.sec--tint .hdr{margin-bottom:30px}

/* JS 가 붙기 전(또는 미동작 시) — 평범한 2×2 격자 */
.cf__stage{display:grid;grid-template-columns:1fr 1fr;gap:16px;aspect-ratio:auto}
.cf.is-on .cf__stage{display:grid;grid-template-columns:1fr;gap:0}

.cf.is-on .cf__c{grid-area:1/1;justify-self:center;align-self:start;width:52%;
  transform-origin:50% 50%;will-change:transform;
  transition:transform .62s cubic-bezier(.22,.7,.2,1), opacity .62s ease, filter .62s ease}
/* 앞 · 오른쪽 · 왼쪽 · 뒤 네 자리 */
.cf.is-on .cf__c[data-pos="0"] {transform:translateZ(0) rotateY(0) scale(1);   opacity:1;   z-index:4;filter:none}
.cf.is-on .cf__c[data-pos="1"] {transform:translateX(46%)  translateZ(-230px) rotateY(-24deg) scale(.98);opacity:.72;z-index:3;filter:saturate(.85) brightness(.82)}
.cf.is-on .cf__c[data-pos="-1"]{transform:translateX(-46%) translateZ(-230px) rotateY(24deg)  scale(.98);opacity:.72;z-index:3;filter:saturate(.85) brightness(.82)}
.cf.is-on .cf__c[data-pos="2"] {transform:translateZ(-520px) rotateY(0) scale(1);opacity:.3; z-index:2;filter:saturate(.7) brightness(.66)}
.cf.is-on .cf__c[data-pos="0"]:hover{transform:translateZ(28px) scale(1.01)}
.cf.is-on .cf__c:not([data-pos="0"]){cursor:pointer}

/* 조작부 — 고령 이용자 기준으로 크게 */
.cf__ui{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:26px}
.cf__nav{width:52px;height:52px;border-radius:50%;background:#fff;color:var(--ink);
  font-size:26px;line-height:1;border:1.5px solid var(--line);
  box-shadow:0 4px 14px rgba(30,39,51,.10);transition:.2s}
.cf__nav:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.cf__dots{display:flex;gap:9px;margin:0;padding:0;list-style:none}
.cf__dots button{width:12px;height:12px;padding:0;border-radius:50%;
  background:#C6D2DE;transition:.2s}
.cf__dots button[aria-current="true"]{background:var(--brand);width:30px;border-radius:999px}
.cf__dots button:hover{background:var(--brand-d)}

/* 옆 카드가 무대 밖으로 나가지 않는 조건 :  50 + 이동량×카드폭 + 카드폭/2 ≤ 100 (%)
   그래서 좁은 화면에서는 카드 폭을 줄여야 옆 카드가 온전히 들어옵니다.
   무대 비율도 카드 높이(= 무대폭 × 카드폭 ÷ 1.5)에 맞춰 다시 잡습니다. */
@media (max-width:900px){
  .cf{max-width:none}
  /* 카드 56% · 이동 36% → 바깥 끝 98.2%  |  무대 비율 상한 1.5/0.56 = 2.68 */
    .cf.is-on .cf__c{width:56%}
  .cf.is-on .cf__c[data-pos="1"] {transform:translateX(36%)  translateZ(-150px) rotateY(-16deg) scale(.97)}
  .cf.is-on .cf__c[data-pos="-1"]{transform:translateX(-36%) translateZ(-150px) rotateY(16deg)  scale(.97)}
  .cf.is-on .cf__c[data-pos="2"] {transform:translateZ(-330px) scale(1)}
}
/* ── 720px 미만 : 3D 슬라이더를 끄고 세로 목록으로 ─────────────────────────
   3:2 카드 위에 글자를 얹는 구성은 카드가 좁아지면 성립하지 않습니다.
   390px 에서 카드 폭이 300px 남짓이면 높이가 200px 인데 글자 칸만 130px 이라
   그림이 거의 남지 않습니다. 그래서 이 구간은 '그림(3:2) 위 · 글자 아래'로 쌓습니다.
   그림은 여전히 잘리지 않고, 글자는 단색 위에 놓여 가장 잘 읽힙니다.            */
@media (max-width:719px){
  .cf{max-width:none;overflow:visible}
  .cf.is-on .cf__stage{display:grid;grid-template-columns:1fr;gap:14px;
    aspect-ratio:auto;perspective:none}
  /* justify-self:center 가 남아 있으면 폭이 내용만큼 줄어듭니다 — stretch 로 되돌립니다 */
  .cf.is-on .cf__c{grid-area:auto;justify-self:stretch;width:auto;transform:none!important;opacity:1!important;
    filter:none!important;transition:none}
  .cf__ui{display:none}
  .cf.is-on .cf__c .cap{padding:20px 22px 22px}
}

/* 동작 줄이기 — 3D·전환을 끄고 격자로 되돌립니다 */
@media (prefers-reduced-motion:reduce){
  .cf.is-on .cf__stage{display:grid;grid-template-columns:1fr 1fr;gap:16px;aspect-ratio:auto;perspective:none}
  /* justify-self:center 가 남아 있으면 폭이 내용만큼 줄어듭니다 — stretch 로 되돌립니다 */
  .cf.is-on .cf__c{grid-area:auto;justify-self:stretch;width:auto;transform:none!important;opacity:1!important;
    filter:none!important;transition:none}
  .cf__ui{display:none}
}
.bt{position:relative;overflow:hidden;border-radius:20px;display:flex;flex-direction:column;justify-content:flex-end;padding:32px;transition:.3s cubic-bezier(.2,.7,.2,1)}
.bt:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(30,39,51,.1)}
.bt .k{font-size:12.5px;font-weight:700;letter-spacing:.12em}
.bt h3{font-size:25px;font-weight:700;letter-spacing:-.045em;line-height:1.3;margin-top:12px}
.bt p{margin-top:12px;font-size:15.5px;line-height:1.6;max-width:340px}
.bt .w{margin-top:20px;font-size:14.5px;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.bt .w::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
/* ── 프로그램 카드 — 장면이 카드 전체 배경 ────────────────────────────────
   [한 화면에 4장]
   카드 높이를 화면 높이에 연동(clamp)해 2×2 가 한 화면에 들어옵니다.
   [이미지는 글자 뒤까지]
   장면을 카드 전면(inset:0)에 깔고 글자는 그 위에 얹습니다.
   [그래도 글자는 항상 읽혀야 합니다]
   스크림을 카드가 아니라 '글자 칸' 자체에 겁니다. 글자가 놓이는 자리는 언제나
   그라데이션의 가장 진한 구간(.94~.97)이라 배경 그림이 밝든 어둡든 대비가 고정됩니다.
   위쪽 56px 은 페이드 구간이라 장면이 자연스럽게 이어집니다.
   ※ .scb 는 scene background. .bg 는 모바일 햄버거 버튼이 쓰는 이름이라 피했습니다. */
.bt--scene{position:relative;overflow:hidden;padding:0;background:var(--ink);color:#fff;
  /* 그림 위 · 글자 아래로 쌓습니다. 카드 높이는 내용이 정합니다.
     글자 칸이 반투명으로 그림을 덮지 않으므로 3:2 그림이 전부 보입니다. */
  flex-direction:column;justify-content:flex-start}
/* 그림 — 원본과 같은 3:2. 비율이 같아 cover 가 잘라낼 것이 없습니다. */
.bt--scene .scb{position:relative;flex:0 0 auto;width:100%;aspect-ratio:3/2;z-index:0;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.bt--scene:hover .scb{transform:scale(1.05)}
/* 스크림은 '글자 칸'이 아니라 '카드 전체' 기준으로 겁니다.
   글자 칸에 걸면 제목 줄 수에 따라 칸 높이가 달라져 같은 위치의 농도가 흔들립니다
   (실측: 2줄 제목 카드가 4.2:1 로 떨어졌습니다). 카드 높이는 고정이라 농도가 일정합니다.
   흰 글자 4.5:1 을 만족하려면 배경 상대휘도 ≤0.183 이 필요하고,
   가장 밝은 장면(페스티벌 잔디 L≈0.55) 기준 알파 0.67 이상이 있어야 합니다 → 0.84 로 잡았습니다. */
/* 글자 칸 — 반투명·그라데이션 없이 단색입니다.
   그림 위를 덮지 않고 아래에 놓이므로 그림이 가려지지 않고, 대비도 15:1 로 고정입니다. */
.bt--scene .cap{position:relative;z-index:2;flex:1 0 auto;display:flex;flex-direction:column;
  justify-content:center;padding:22px 26px 24px;background:var(--ink)}
.bt--scene .k{align-self:flex-start;color:#DCEBFA;letter-spacing:.1em}
.bt--scene h3{color:#fff;margin-top:8px;font-size:clamp(20px,1.7vw,24px);
  text-shadow:0 2px 6px rgba(0,0,0,.5)}
.bt--scene .w{color:#fff;margin-top:10px;text-shadow:0 1px 3px rgba(0,0,0,.55)}

/* 장면 배정 */
.bt--scene .sc1{background-image:var(--sc1)}
.bt--scene .sc2{background-image:var(--sc2)}
.bt--scene .sc3{background-image:var(--sc3);background-position:center 58%}
.bt--scene .sc4{background-image:var(--sc4)}
.cols{display:grid;grid-template-columns:1.55fr 1fr;gap:80px}
.news li a{display:flex;align-items:center;gap:22px;padding:24px 8px 24px 0;border-top:1px solid var(--line);transition:.24s}
.news li:last-child a{border-bottom:1px solid var(--line)}
.news li a:hover{padding-left:16px;background:linear-gradient(90deg,var(--tint),transparent 70%)}
.news .n{font-size:13px;font-weight:700;color:var(--brand);flex-shrink:0}
.news .t{flex:1;font-size:17px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.news .d{font-size:14px;color:#5F6B78;font-variant-numeric:tabular-nums;flex-shrink:0}
.sns .box{border:1px solid var(--line);border-radius:20px;padding:34px 30px;background:var(--soft)}
.sns .box p{font-size:16.5px;font-weight:600;line-height:1.6}
.sns .box small{display:block;margin-top:8px;font-size:14.5px;font-weight:400;color:#4E5A67}
.sns ul{display:flex;flex-direction:column;gap:8px;margin-top:24px}
.sns ul a{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:15.5px;font-weight:600;transition:.2s}
.sns ul a:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.sns ul a::after{content:"→";margin-left:auto;opacity:.4}
.sns svg{width:19px;height:19px;flex-shrink:0}
.vd{position:relative;aspect-ratio:16/9;background:#0D131A;border-radius:20px;overflow:hidden}
.vd iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vd__fa{position:absolute;inset:0;width:100%;height:100%;padding:0;display:block;cursor:pointer;background:#0D131A center/cover no-repeat;border:0}
.vd__fa::after{content:"";position:absolute;inset:0;background:rgba(13,19,26,.24);transition:.25s}
.vd__fa:hover::after{background:rgba(13,19,26,.06)}
.vd__pl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:88px;height:62px;border-radius:16px;background:#E62117;display:grid;place-items:center;box-shadow:0 8px 26px rgba(0,0,0,.4);transition:.25s}
.vd__fa:hover .vd__pl{transform:translate(-50%,-50%) scale(1.08);background:#FF0000}
.vd__pl svg{width:26px;height:26px;fill:#fff;margin-left:3px}
.vd__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:52px 24px 20px;text-align:left;color:#fff;font-size:15.5px;font-weight:600;background:linear-gradient(transparent,rgba(13,19,26,.85))}
.vd__out{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:14.5px;color:var(--body)}
.vd__out a{color:var(--brand-d);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:1080px){
  /* 키비주얼 아래로 내려오면 세로가 빠듯해집니다.
     2×2 로 두면 버튼 블록만 190px 이라 700px 화면에서 아래가 잘립니다 → 1행 4열로. */
  .hero .inner{grid-template-columns:1fr;gap:0}
  .kv{max-width:none}
  .qmenu{grid-template-columns:repeat(4,1fr);max-width:760px;margin:clamp(18px,3vh,34px) auto 0}
  .qmenu>a,.qmenu>span{padding:clamp(13px,2vh,22px) 8px;gap:clamp(7px,1.1vh,11px)}
  .qmenu .ic{width:clamp(41px,min(6vw,5.5vh),53px);height:clamp(41px,min(6vw,5.5vh),53px)}
  .qmenu b{font-size:clamp(13px,min(1.7vw,1.63vh),16px)}
  /* 세로로 쌓이면 키비주얼과 버튼이 높이를 나눠 써야 합니다 — 제호를 한 단 더 줄입니다 */
  .kv__slogan img{width:clamp(200px,min(46vw,36vh),430px)}
  .kv__name img{width:clamp(150px,min(30vw,23vh),290px)}
  .hero{padding:clamp(16px,2.6vh,44px) 0 clamp(88px,15vh,200px)}
  .hbar{grid-template-columns:1fr}
  .hbar>div{padding:22px 0}
  .hbar>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .hbar .dday{text-align:left;min-width:0}
  .hbar .dday dd{font-size:56px}
  .about{grid-template-columns:1fr;gap:44px}
  /* 세로로 쌓이면 칸이 전폭(화면폭 − 44px)이라 93% 규칙만 쓰면 글자가 너무 커져
     인용문이 제목보다 커지는 역전이 생깁니다(768px 에서 34px vs 28px).
     그래서 '제목 크기의 0.82배' 를 함께 상한으로 겁니다.
     제목은 clamp(28px,3.6vw,46px) 이므로 0.82배는 max(23px, 2.95vw) 입니다. */
  .quote{font-size:min(calc(5.6vw - 2.5px),max(23px,2.95vw),34px)}
  .cols{grid-template-columns:1fr;gap:56px}
}
@media (max-width:640px){
  /* 폭 390px 에서 4열은 버튼 하나가 80px 밖에 안 됩니다 — 어르신 기준으로 너무 좁아 2×2 로.
     대신 2행이라 세로를 더 먹으므로 크기를 화면 높이(vh)에 묶어
     짧은 폰(667px)에서는 알아서 작아지고 큰 폰(844px)에서는 커지게 했습니다. */
  .qmenu{grid-template-columns:1fr 1fr;gap:clamp(8px,1.3vh,13px);max-width:none}
  .qmenu>a,.qmenu>span{padding:clamp(12px,2.6vh,31px) 10px;gap:clamp(7px,1.3vh,12px)}
  .qmenu .ic{width:clamp(43px,7.2vh,67px);height:clamp(43px,7.2vh,67px)}
  .qmenu b{font-size:clamp(14px,2.14vh,18px)}
  .kv__slogan img{width:clamp(190px,min(46vw,30vh),400px)}
  .kv__name img{width:clamp(146px,min(30vw,20vh),280px)}
  .qmenu .ic{width:46px;height:46px}
  .qmenu b{font-size:16px}
  /* 좁은 화면에서는 캐릭터가 카드를 가리지 않도록 풍경 쪽으로 내립니다 */
  .hero__bee{right:2px;bottom:34px;width:88px}
  .hero .f2,.hero .f6,.hero .f7,.hero .f8{display:none}
  .cf:not(.is-on) .cf__stage{grid-template-columns:1fr;gap:14px}
  .bt{min-height:0;padding:0}
  /* 한 열이 되면 4장이 한 화면에 다 들어올 수 없으므로 높이를 다시 넉넉히 */
  .bt--scene .cap{padding:20px 22px 22px}
  .bt h3{font-size:25px}
  .news .t{white-space:normal}
}


/* ══════════════════════════════════════════════════════════════════════════
   메인 페이지를 날아다니는 작은 꿀벌 (.bfl / bee-fly)
   --------------------------------------------------------------------------
   [설계 원칙 — 이 4가지를 어기면 안 됩니다]
   1) 벌은 "마크업상 글자가 놓일 수 없는 세로 여백 밴드"에만 존재합니다.
        .sec  상·하 패딩 밴드  124px(≥1081) / 76px(≤1080) / 60px(≤640)
        .end  상단 패딩 밴드   104px(≥1081) / 68px(≤1080)
        .hero 하단 언덕 대역   .hero__land 안쪽
      좌우 거터·.about gap·.cols gap 은 쓰지 않습니다 (그리드 값이 바뀌면 벌이 글자 위로 올라감).
   2) 벌 1마리 = DOM 1노드 = 합성 레이어 1장.
      개별 transform 속성 4채널로 중첩 래퍼 없이 4겹 모션을 만듭니다.
        translate → 경로 / transform → 상하흔들+스쿼시 / rotate → 뱅킹 / scale → 원근 호흡
      미지원 구형 엔진에서는 translate/rotate/scale 만 무시되고 제자리 살랑임이 남습니다(안전한 열화).
   3) 모든 키프레임은 앵커 중심 ±대칭 → animation:none 이 되어도 정지 지점이 곧 안전 좌표입니다.
   4) 클리핑은 .beefld 에만. .sec/.inner 에 overflow 를 주면 .bt:hover 그림자가 잘리고
      .sec 는 전역 클래스라 서브페이지 .poster{position:sticky} 까지 죽습니다.

   [세로 점유 검산식] 새 위치를 추가할 때 반드시 계산할 것
      점유 = top(또는 bottom) + 높이×1.09(scale 최대) + fy + bh + 4px(회전 스윕) < 밴드 높이
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --kv-bee-fly:url("../img/kv/mascot-sm.webp");   /* 기존 자산 재사용 (247×300 · 15.8KB) */
  /* 크기는 3티어 고정 — 마리마다 다른 clamp() 를 쓰면 스케일 디코드 캐시가 그만큼 늘어납니다 */
  --bfl-s:clamp(26px,2.6vw,36px);
  --bfl-m:clamp(30px,3.2vw,44px);
}

/* ── 1) 장식 레이어 ────────────────────────────────────────────────────────
   .sec--bee>.inner{z-index:1} 은 생략 금지.
   common.css 의 .rv 는 등장 전 opacity:0+transform 으로 스태킹 컨텍스트를 만들었다가
   .in 이 붙으면 사라집니다 → 이 한 줄이 없으면 스크롤 등장 순간 앞뒤가 뒤집힙니다. */
.sec--bee{position:relative}
.sec--bee>.inner{position:relative;z-index:1}
.beefld{position:absolute;inset:0;z-index:0;pointer-events:none;
        overflow:hidden;      /* 폴백 */
        overflow:clip;        /* 스크롤 컨테이너를 만들지 않음 */
        contain:paint}        /* overflow:clip 미지원 브라우저에서도 확실히 클립 */

/* ── 2) 벌 본체 : 1노드 / 1레이어 / 4채널 ──────────────────────────────────
   will-change 를 쓰지 않습니다 — 실행 중인 합성 애니메이션은 자동 승격되며,
   무한 애니메이션에 걸면 레이어를 영구 고정해 GPU 메모리만 먹습니다.
   drop-shadow 도 쓰지 않습니다 — 이 크기에서는 보이지 않으면서 필터 패스를 유발하고
   contain:paint 경계에서 그림자만 사각으로 잘립니다.
   그림자를 가진 건 풀밭에 선 기존 .hero__bee 뿐 → "선 벌 / 뜬 벌" 대비가 생깁니다. */
.bfl{position:absolute;display:block;
     width:var(--bw,var(--bfl-m));
     aspect-ratio:247/300;
     background:var(--kv-bee-fly) center/contain no-repeat;
     opacity:var(--bo,.88);
     pointer-events:none;-webkit-user-select:none;user-select:none;
     --fx:26px;   /* 경로 가로 진폭 */
     --fy:11px;   /* 경로 세로 진폭 */
     --bh:8px;    /* 상하흔들 진폭 */
     --rt:5deg;   /* 뱅킹 각도     */
     --sn:.95;    /* 원근 호흡 최소 */
     --sf:1.05;   /* 원근 호흡 최대 */
     animation:
       var(--pn,bflDrift) var(--dt,31s)  var(--dd,-9s)   var(--pe,ease-in-out) infinite var(--dr,alternate),
       bflBob             var(--bt,4.3s) var(--bd,-1.1s) ease-in-out infinite,
       bflTilt            var(--tt,7.3s) var(--td,-2.9s) ease-in-out infinite alternate,
       bflNear            var(--nt,13s)  var(--nd,-4.4s) ease-in-out infinite alternate}

/* 채널 A — 경로(상주 드리프트). 되짚어 오는 게 보이지 않는 건 나머지 3채널의 주기가 모두 달라서입니다 */
@keyframes bflDrift{
  0%  {translate:calc(var(--fx) * -1)   calc(var(--fy) *  .55)}
  28% {translate:calc(var(--fx) * -.35) calc(var(--fy) * -1)}
  55% {translate:calc(var(--fx) *  .3)  calc(var(--fy) *  .8)}
  78% {translate:calc(var(--fx) *  .8)  calc(var(--fy) * -.5)}
  100%{translate:var(--fx)              calc(var(--fy) *  .2)}
}
/* 채널 A' — 횡단. 페이지에서 딱 1마리만. 47~55% 구간은 거의 제자리 = "두리번거리는" 비트 */
@keyframes bflCross{
  0%  {translate:0 calc(var(--fy) * -.2);                        opacity:0}
  3%  {                                                          opacity:var(--bo,.88)}
  14% {translate:calc(var(--run) * .16)  calc(var(--fy) * -1)}
  27% {translate:calc(var(--run) * .30)  calc(var(--fy) *  .5)}
  40% {translate:calc(var(--run) * .44)  calc(var(--fy) *  1)}
  47% {translate:calc(var(--run) * .485) calc(var(--fy) *  .35)}
  55% {translate:calc(var(--run) * .505) calc(var(--fy) *  .55)}
  68% {translate:calc(var(--run) * .64)  calc(var(--fy) * -.9)}
  80% {translate:calc(var(--run) * .78)  calc(var(--fy) *  .15); opacity:var(--bo,.88)}
  84% {translate:calc(var(--run) * .84)  calc(var(--fy) * -.5);  opacity:0}
  100%{translate:var(--run)              calc(var(--fy) * -.2);  opacity:0}
}
/* 채널 A'' — 착지형(히어로 언덕). 43초 중 약 8.6초는 앉아 있습니다. 정지 지점 = 착지 자세 */
@keyframes bflPerch{
  0%,7%   {translate:0 0}
  17%     {translate:calc(var(--fx) * .16) calc(var(--fy) * -1)}
  31%     {translate:calc(var(--fx) * .58) calc(var(--fy) * -1.55)}
  44%     {translate:var(--fx)             calc(var(--fy) * -.9)}
  57%     {translate:calc(var(--fx) * .7)  calc(var(--fy) * -1.75)}
  70%     {translate:calc(var(--fx) * .28) calc(var(--fy) * -1.3)}
  80%     {translate:calc(var(--fx) * .05) calc(var(--fy) * -.35)}
  87%,100%{translate:0 0}
}
/* 채널 B — 상하흔들 + 스쿼시&스트레치. 통통한 캐릭터라 이 한 겹으로 "날개로 뜬다"가 살아납니다.
   scaleX 를 크게 흔들면 콧수염·얼굴이 눌려 캐릭터가 훼손되므로 3% 이내로 묶었습니다. */
@keyframes bflBob{
  0%,100%{transform:translateY(calc(var(--bh) *  .18)) scale(1.03,.97)}
  32%    {transform:translateY(calc(var(--bh) * -.85)) scale(.98,1.025)}
  54%    {transform:translateY(calc(var(--bh) * -1))   scale(1,1)}
  76%    {transform:translateY(calc(var(--bh) * -.32)) scale(1.015,.985)}
}
/* 채널 C — 뱅킹 */
@keyframes bflTilt{ from{rotate:calc(var(--rt) * -1)} to{rotate:var(--rt)} }
/* 채널 D — 원근 호흡. scale 은 이 채널이 점유하므로 좌우반전(scale:-1 1)은 쓸 수 없습니다.
   애초에 마스코트 가슴의 초록 이름표가 한글 인쇄라 반전은 금지입니다. */
@keyframes bflNear{ from{scale:var(--sn)} to{scale:var(--sf)} }

/* ── 3) 배치 (≥1081px) — 검산은 1440px 기준 ──────────────────────────────── */

/* [1] 히어로 왼쪽 언덕 — 앉았다 이륙 → 선회 → 착지.
   z-index 2 = .hero__land(1) 위, .hero .inner(3) 아래. 오른쪽 큰 벌과 좌우 짝을 이룹니다. */
.hero .bfl--perch{
  left:clamp(12px,7vw,140px); bottom:clamp(92px,10vw,158px); z-index:2;
  --bw:clamp(30px,3.4vw,46px);
  --fx:clamp(56px,7vw,116px); --fy:clamp(14px,1.8vw,26px); --bh:6px; --rt:6deg;
  --pn:bflPerch; --dr:normal; --pe:ease-in-out; --dt:43s; --dd:-6s;
  --bt:3.9s; --bd:-1.3s;  --tt:6.7s; --td:-2.1s;  --nt:11s; --nd:-3s}

/* [2] ABOUT 상단 밴드 오른쪽 — 상주형.  검산 22+58.2+11+8+4 = 103.2 < 124 */
.sec--bee .bfl--about{
  top:clamp(14px,1.7vw,24px); right:clamp(10px,6vw,150px);
  --bw:var(--bfl-m);
  --fx:30px; --fy:11px; --bh:8px; --rt:5deg;
  --dt:31s; --dd:-9s;  --bt:4.3s; --bd:-1.1s;  --tt:7.3s; --td:-2.9s;  --nt:13s; --nd:-4.4s}

/* [3] PROGRAM 상단 밴드 — 페이지 유일의 횡단 벌, 좌→우.
   1440 기준 체감 28px/s. 상한 30px/s 의 근거는 본문 줄높이(17×1.75≈30px)로,
   주변시 물체가 초당 한 줄 이상 움직이면 시선 재고정을 유발합니다.
   마퀴(.mq 30s 좌향) 바로 아래인 ABOUT 이 아니라 PROGRAM 에 둔 이유는
   반대 방향 두 속도벡터가 인접하면 자기운동 착각(vection)을 유발하기 때문입니다.
   검산 20+58.2+13+8+4 = 103.2 < 124 */
.sec--bee .bfl--cross{
  top:clamp(12px,1.6vw,20px); left:-150px;
  --bw:var(--bfl-m); --run:calc(100vw + 300px);
  --fx:0px; --fy:13px; --bh:8px; --rt:5deg; --sn:.96; --sf:1.04;
  --pn:bflCross; --dr:normal; --pe:linear; --dt:74s; --dd:-26s;
  --bt:3.7s; --bd:-2.4s;  --tt:8.3s; --td:-5.1s;  --nt:17s; --nd:-6s}

/* [4] NOTICE 상단 밴드 오른쪽 — 가장 작게, 가장 여유 있게.
   .news .t 가 nowrap+ellipsis 라 페이지에서 텍스트 위험이 가장 큰 구역입니다.
   검산 24+47.6+10+7+4 = 92.6 < 124 (여유 31px) */
.sec--bee .bfl--news{
  top:clamp(16px,1.9vw,24px); right:clamp(10px,7vw,180px);
  --bw:var(--bfl-s);
  --fx:24px; --fy:10px; --bh:7px; --rt:4deg;
  --dt:29s; --dd:-17s;  --bt:5.7s; --bd:-3.7s;  --tt:6.1s; --td:-1.4s;  --nt:19s; --nd:-8s}

/* [5] VIDEO 하단 밴드 오른쪽. 이 섹션은 상단 패딩이 0 이라 하단만 씁니다.
   영상 썸네일(#0D131A) 위로는 지나가지 않습니다 — 클릭 타깃이자 페이지 유일의 고대비 영역.
   검산 32+47.6+10+7+4 = 100.6 < 124 */
.sec--bee .bfl--vid{
  bottom:clamp(18px,2.2vw,36px); right:clamp(12px,8vw,200px);
  --bw:var(--bfl-s);
  --fx:22px; --fy:10px; --bh:7px; --rt:4deg;
  --dt:37s; --dd:-21s;  --bt:4.1s; --bd:-.6s;  --tt:9.7s; --td:-6.3s;  --nt:23s; --nd:-11s}

/* [6] 하단 CTA 배너 상단 밴드 왼쪽 — 마무리.
   .end 는 이미 position:relative+overflow:hidden 이고 .end .inner{z-index:2} 라
   z-index 1 이면 인물 일러스트와 같은 층에서 본문 아래·클리핑 안에 자동으로 들어갑니다.
   배경(#DEEFEB)이 페이지에서 가장 어두워 같은 불투명도에서 대비가 낮아지므로 .95 로 보정.
   검산 22+47.6+11+8+4 = 92.6 < 104 */
body.home .end .bfl--home{
  top:clamp(14px,1.8vw,22px); left:clamp(16px,8vw,190px); z-index:1;
  --bw:var(--bfl-s); --bo:.95;
  --fx:26px; --fy:11px; --bh:8px; --rt:5deg;
  --dt:41s; --dd:-13s;  --bt:4.9s; --bd:-2.8s;  --tt:7.9s; --td:-4.7s;  --nt:11s; --nd:-9s}

/* ── 4) 반응형 — 마리 수와 진폭을 함께 줄입니다 ──────────────────────────── */
/* 태블릿 641~1080px : 6마리 → 4마리. 안전 밴드가 124→76px 로 39% 얇아집니다. */
@media (max-width:1080px){
  .sec--bee .bfl--news,
  .sec--bee .bfl--vid{display:none}
  /* 검산 10+42.4+8+6+3 = 69.4 < 76 */
  .sec--bee .bfl--about{top:10px; right:clamp(8px,4vw,44px);
    --bw:32px; --fx:22px; --fy:8px; --bh:6px; --rt:4deg; --sn:.96; --sf:1.04}
  .sec--bee .bfl--cross{top:9px;
    --bw:32px; --fy:9px; --bh:6px; --rt:4deg; --dt:82s}
  /* .end 패딩 68px. 검산 6+37+8+6+3 = 60 < 68 */
  body.home .end .bfl--home{top:6px; left:clamp(12px,5vw,60px);
    --bw:28px; --fx:20px; --fy:8px; --bh:6px; --rt:4deg; --sn:.96; --sf:1.04}
  /* 히어로가 세로로 쌓이면서 .qmenu 가 전폭을 차지합니다 → 좌우로 피할 여백이 없으므로
     "카드보다 확실히 아래(언덕 안)"로 내려서 세로로 분리합니다.
     최악 구간은 768px 입니다 — 히어로 하단 패딩은 이미 최솟값 160px 인데 .qmenu 는 아직 4열이라
     가장 아래까지 내려옵니다. 실측으로 여유 +19px 가 나오는 bottom:36 / fy:10 으로 맞췄습니다.
     (bottom 60 / fy 12 이면 768px 에서 -9px 로 카드와 겹칩니다) */
  .hero .bfl--perch{left:clamp(10px,1.6vw,18px); bottom:36px;
    --bw:34px; --fx:40px; --fy:10px; --bh:5px; --rt:5deg}
}
/* 모바일 ≤640px : 4마리 → 3마리. .sec 패딩 60px 이라 여유가 5.6px 뿐입니다. */
@media (max-width:640px){
  .sec--bee .bfl--cross{display:none}   /* 상단 밴드 바로 아래가 13px eyebrow 라 가장 위험 */
  /* 검산 6+34.4+6+5+3 = 54.4 < 60.  right 는 진폭(16)만큼 여유를 둬 화면 밖으로 안 나가게 */
  .sec--bee .bfl--about{top:6px; right:20px;
    --bw:26px; --fx:16px; --fy:6px; --bh:5px; --rt:4deg; --sn:.97; --sf:1.03; --dt:35s}
  body.home .end .bfl--home{left:18px;
    --bw:26px; --fx:16px; --fy:6px; --bh:5px; --sn:.97; --sf:1.03}
  /* .qmenu 가 2×2 로 전폭을 차지하므로 여기서도 세로로 분리합니다.
     bottom 을 오른쪽 큰 벌(.hero__bee bottom:34px)과 같은 선에 맞춰 좌우 짝을 이룹니다.
     가로 최대 = 12 + 26 + 40 = 78px → 화면 안 (bflPerch 는 +방향으로만 이동). */
  .hero .bfl--perch{left:12px; bottom:34px;
    --bw:26px; --fx:40px; --fy:12px; --bh:5px; --rt:5deg; --sn:.97; --sf:1.03}
}
/* 초광폭에서 횡단 벌만 100vw 에 비례해 빨라지므로 주기를 늘려 체감 속도를 유지합니다 */
@media (min-width:1600px){ .sec--bee .bfl--cross{--dt:112s} }

/* ── 5) 모션 최소화 — "감추기"가 아니라 "멈추고 안전한 자리에 앉히기" ─────────
   키프레임이 앵커 중심 ±대칭이라 정지 지점이 곧 의도한 좌표입니다.
   상주형 5마리는 각자의 여백 밴드에 조용히 앉고, 횡단형 1마리만 숨깁니다.
   덤으로 kv.css 의 reduce 블록이 남겨 두던 will-change 레이어를 여기서 회수합니다. */
@media (prefers-reduced-motion:reduce){
  .bfl{animation:none!important;
       translate:none!important;rotate:none!important;scale:none!important;transform:none!important;
       opacity:.7}
  .bfl--cross{display:none}
  .bee,.kvfl,.kvcl,.sv__ptn,.end__bg,.mq__t{will-change:auto}
  .mq__t{animation:none!important}
  /* 히어로 진입 연출(kvRise/kvPop)도 함께 정지합니다.
     common.css 의 .rv(24px 슬라이드업)를 reduce 에서 끄는 것과 같은 정책인데
     히어로만 빠져 있었습니다 — 화면 최상단 6개 블록이 1.5초에 걸쳐 밀려 올라옵니다. */
  .hero .eyeb,.kv__slogan,.kv__name,.kv__date,.kv__org,.qmenu{
    animation:none!important;opacity:1;transform:none}
}
/* 사이트 자체 「움직임 줄이기」 훅 — OS 설정을 모르는 이용자를 위한 예비 스위치입니다.
   푸터에 버튼을 달아 document.documentElement.dataset.motion='off' 만 세팅하면 그대로 동작합니다.
   (버튼은 아직 노출하지 않았습니다 — 필요하시면 알려 주십시오) */
:root[data-motion="off"] .bfl{animation:none!important;
       translate:none!important;rotate:none!important;scale:none!important;transform:none!important;
       opacity:.7}
:root[data-motion="off"] .bfl--cross,
:root[data-motion="off"] .kvcl{display:none}
:root[data-motion="off"] .bee,
:root[data-motion="off"] .kvfl,
:root[data-motion="off"] .sv__ptn,
:root[data-motion="off"] .end__bg,
:root[data-motion="off"] .mq__t{animation:none!important;will-change:auto}
:root[data-motion="off"] .hero .eyeb,
:root[data-motion="off"] .kv__slogan,
:root[data-motion="off"] .kv__name,
:root[data-motion="off"] .kv__date,
:root[data-motion="off"] .kv__org,
:root[data-motion="off"] .qmenu{animation:none!important;opacity:1;transform:none}

/* 고대비 모드 이용자는 저시력자이므로 장식은 잡음입니다. 인쇄에서도 뺍니다. */
@media (forced-colors:active){ .beefld,.bfl{display:none} }
@media print{ .beefld,.bfl{display:none} }


/* ══════════════════════════════════════════════════════════════════════════
   마우스를 따라다니는 꿀벌 + 꽃가루  (assets/js/bee-cursor.js 가 구동)
   --------------------------------------------------------------------------
   · 요소 생성·좌표는 전부 JS 가 잡고, CSS 는 모양만 정의합니다.
     이미지 경로를 JS 에 문자열로 넣으면 CSS 상대경로 기준이 달라져 깨지므로
     기존 커스텀 속성(--kv-bee-fly / --kv-fl-o / --kv-fl-b)을 그대로 재사용합니다.
   · z-index 150 = 본문 위 · 상단 고정 헤더(200) 아래.
     헤더에 다가가면 내비게이션 뒤로 살짝 숨는 깊이감이 생깁니다.
   · 터치 기기·동작 줄이기 설정에서는 JS 가 아예 붙지 않습니다.
   ══════════════════════════════════════════════════════════════════════════ */
.beecur{position:fixed;left:0;top:0;z-index:150;pointer-events:none;
        -webkit-user-select:none;user-select:none;
        width:var(--bcw,46px);aspect-ratio:247/300;
        background:var(--kv-bee-fly) center/contain no-repeat;
        filter:drop-shadow(0 6px 9px rgba(44,89,116,.2));
        opacity:0;transition:opacity .45s ease;will-change:transform}
.beecur.is-on{opacity:.97}
.beecur.is-idle{opacity:.6}     /* 한동안 안 움직이면 살짝 물러나 떠 있습니다 */

/* 꽃가루 — 대부분은 작은 금빛 알갱이, 가끔 포스터의 낱꽃이 섞입니다 */
.pol{position:fixed;left:0;top:0;z-index:149;pointer-events:none;opacity:0;
     width:9px;height:9px;border-radius:50%;
     background:radial-gradient(circle at 38% 34%,#FFF7CC 0%,#F5AB19 46%,rgba(241,142,66,0) 74%)}
.pol.is-y{background:radial-gradient(circle at 38% 34%,#FFFDE8 0%,#F4F18E 50%,rgba(244,241,142,0) 76%)}
.pol.is-o{background:radial-gradient(circle at 38% 34%,#FFE7C6 0%,#F18E42 48%,rgba(241,142,66,0) 76%)}
.pol.is-fl{width:13px;height:13px;border-radius:0;
     background:var(--kv-fl-o) center/contain no-repeat}
.pol.is-fl.is-b{background-image:var(--kv-fl-b)}

/* 커서 연출은 정밀 포인터(마우스·트랙패드)에서만. 좁은 화면에서도 감춥니다 */
@media (pointer:coarse),(max-width:640px){ .beecur,.pol{display:none!important} }
@media (prefers-reduced-motion:reduce){ .beecur,.pol{display:none!important} }
:root[data-motion="off"] .beecur,
:root[data-motion="off"] .pol{display:none!important}
@media (forced-colors:active){ .beecur,.pol{display:none!important} }
@media print{ .beecur,.pol{display:none!important} }

/* ── 세로가 짧은 폰 (≤640px 폭 · ≤820px 높이) ─────────────────────────────
   2×2 버튼은 1행 4열보다 150px 쯤 더 높습니다. 화면이 짧으면 그만큼이 모자라
   풀밭은 물론 버튼 아래가 잘립니다. 이 구간만 키비주얼·버튼을 한 단 더 줄여
   '키비주얼 + 버튼 4개'가 반드시 첫 화면에 들어오게 합니다. */
@media (max-width:640px) and (max-height:820px){
  .hero{padding:clamp(10px,1.8vh,20px) 0 clamp(60px,10vh,96px)}
  .kv__slogan img{width:clamp(168px,min(44vw,26vh),340px)}
  .kv__name img{width:clamp(128px,min(28vw,17vh),240px)}
  .kv__slogan{margin:clamp(8px,1.2vh,16px) 0 0}
  .kv__name{margin:clamp(8px,1.3vh,18px) 0 0}
  .kv__date{margin:clamp(7px,1.1vh,14px) 0 0}
  .kv__org{margin:clamp(8px,1.3vh,16px) 0 0}
  .kv__org img{height:clamp(16px,2.4vh,24px)}
  .qmenu{margin-top:clamp(12px,2vh,22px);gap:clamp(7px,1.1vh,10px)}
  .qmenu>a,.qmenu>span{padding:clamp(10px,1.9vh,18px) 8px;gap:clamp(6px,1.1vh,10px)}
  .qmenu .ic{width:clamp(38px,5.8vh,53px);height:clamp(38px,5.8vh,53px)}
  .qmenu b{font-size:clamp(13px,1.8vh,15.5px)}
}