/* aijmii fairytale motion library v2 — r25 v5.1
 * 4계절 동적: 봄(벚꽃) / 여름(반딧불이) / 가을(단풍) / 겨울(눈송이)
 * 자동 감지 (한국 시간 월 기준) + body[data-season] 수동 override
 * 외부 lib 0, vanilla CSS, prefers-reduced-motion 완벽 대응
 */

/* === Floating Container === */
.floats{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.float{position:absolute;will-change:transform,opacity;opacity:0.7;
  filter:drop-shadow(0 0 6px currentColor);user-select:none}

/* === 위치 (12개 슬롯) === */
.float.s1{top:8%;left:6%;animation-delay:0s}
.float.s2{top:24%;right:8%;animation-delay:-3s}
.float.s3{top:55%;left:12%;animation-delay:-7s}
.float.s4{top:72%;right:10%;animation-delay:-11s}
.float.s5{top:38%;left:48%;animation-delay:-15s}
.float.p1{top:-2%;left:18%;animation-delay:-2s}
.float.p2{top:-2%;left:58%;animation-delay:-9s}
.float.p3{top:-2%;left:82%;animation-delay:-15s}
.float.p4{top:-2%;left:32%;animation-delay:-22s}
.float.f1{top:30%;left:30%;animation-delay:0s}
.float.f2{top:50%;right:25%;animation-delay:-5s}
.float.f3{top:70%;left:55%;animation-delay:-9s}

/* ============================================ */
/* 🌸 SPRING — 벚꽃 (분홍·흰)                    */
/* ============================================ */
.season-spring .float.star{color:#ffd5e0;font-size:14px;animation:floatStar 22s ease-in-out infinite}
.season-spring .float.petal{color:#ffb3c7;font-size:20px;animation:floatPetalSlow 30s linear infinite}
.season-spring .float.firefly{color:#ffe5ec;font-size:8px;animation:floatFly 14s ease-in-out infinite;filter:drop-shadow(0 0 10px #ffc7d8)}

@keyframes floatPetalSlow{
  0%{transform:translate(0,-20px) rotate(0);opacity:0}
  10%{opacity:0.85}
  50%{transform:translate(60px,50vh) rotate(180deg);opacity:0.6}
  90%{opacity:0.4}
  100%{transform:translate(-40px,110vh) rotate(360deg);opacity:0}
}

/* ============================================ */
/* ☀️ SUMMER — 반딧불이·별 (노랑·금)             */
/* ============================================ */
.season-summer .float.star{color:#d4a85a;font-size:14px;animation:floatStar 22s ease-in-out infinite}
.season-summer .float.petal{color:#a0d4a0;font-size:14px;animation:floatPetal 28s linear infinite;opacity:0.5}
.season-summer .float.firefly{color:#ffd479;font-size:10px;animation:floatFlyBright 12s ease-in-out infinite;filter:drop-shadow(0 0 16px #ffe5a0)}

@keyframes floatFlyBright{
  0%,100%{transform:translate(0,0);opacity:0.4}
  20%{transform:translate(40px,-25px);opacity:1}
  40%{transform:translate(-30px,-15px);opacity:0.6}
  60%{transform:translate(20px,-40px);opacity:1}
  80%{transform:translate(-40px,-10px);opacity:0.5}
}

/* ============================================ */
/* 🍁 AUTUMN — 단풍 (주황·빨강·갈색)             */
/* ============================================ */
.season-autumn .float.star{color:#d4783a;font-size:14px;animation:floatStar 22s ease-in-out infinite}
.season-autumn .float.petal{color:#c84a2a;font-size:22px;animation:floatLeafFall 26s linear infinite}
.season-autumn .float.firefly{color:#e8a050;font-size:8px;animation:floatFly 14s ease-in-out infinite;filter:drop-shadow(0 0 10px #f0b878)}

@keyframes floatLeafFall{
  0%{transform:translate(0,-20px) rotate(0);opacity:0}
  10%{opacity:0.85}
  30%{transform:translate(-30px,30vh) rotate(120deg)}
  50%{transform:translate(40px,55vh) rotate(240deg);opacity:0.7}
  70%{transform:translate(-20px,80vh) rotate(360deg)}
  100%{transform:translate(50px,110vh) rotate(540deg);opacity:0}
}

/* ============================================ */
/* ❄ WINTER — 눈송이 (흰·연파랑)                */
/* ============================================ */
.season-winter .float.star{color:#e8f4ff;font-size:16px;animation:floatStar 22s ease-in-out infinite}
.season-winter .float.petal{color:#ffffff;font-size:20px;animation:floatSnow 28s linear infinite;filter:drop-shadow(0 0 8px #c8e0ff)}
.season-winter .float.firefly{color:#ffffff;font-size:6px;animation:floatSnowSmall 16s linear infinite;opacity:0.7;filter:drop-shadow(0 0 4px white)}

@keyframes floatSnow{
  0%{transform:translate(0,-20px) rotate(0);opacity:0}
  10%{opacity:0.9}
  50%{transform:translate(35px,55vh) rotate(180deg);opacity:0.7}
  100%{transform:translate(-25px,110vh) rotate(360deg);opacity:0.3}
}
@keyframes floatSnowSmall{
  0%{transform:translate(0,-10px);opacity:0}
  20%{opacity:0.8}
  100%{transform:translate(20px,110vh);opacity:0.4}
}

/* ============================================ */
/* 공통 keyframes (모든 계절)                    */
/* ============================================ */
@keyframes floatStar{
  0%,100%{transform:translate(0,0) rotate(0);opacity:0.4}
  25%{transform:translate(20px,-30px) rotate(90deg);opacity:0.9}
  50%{transform:translate(-15px,-50px) rotate(180deg);opacity:0.6}
  75%{transform:translate(-25px,-20px) rotate(270deg);opacity:0.8}
}
@keyframes floatPetal{
  0%{transform:translate(0,-20px) rotate(0);opacity:0}
  10%{opacity:0.7}
  50%{transform:translate(50px,50vh) rotate(180deg);opacity:0.5}
  100%{transform:translate(-30px,110vh) rotate(360deg);opacity:0}
}
@keyframes floatFly{
  0%,100%{transform:translate(0,0);opacity:0.3}
  20%{transform:translate(40px,-25px);opacity:1}
  40%{transform:translate(-30px,-15px);opacity:0.5}
  60%{transform:translate(20px,-40px);opacity:0.9}
  80%{transform:translate(-40px,-10px);opacity:0.4}
}

/* === Cursor sparkle (모든 계절 — gold 기본) === */
.spark{position:fixed;width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle,#ffd479 0%,#d4a85a 40%,transparent 70%);
  pointer-events:none;z-index:9999;opacity:0;transform:translate(-50%,-50%);
  will-change:transform,opacity;mix-blend-mode:screen;filter:blur(0.5px)}
/* 계절별 sparkle 색감 */
.season-winter .spark{background:radial-gradient(circle,#ffffff 0%,#a0c8ff 40%,transparent 70%)}
.season-autumn .spark{background:radial-gradient(circle,#ffc878 0%,#d4783a 40%,transparent 70%)}
.season-spring .spark{background:radial-gradient(circle,#ffe0ec 0%,#ffb3c7 40%,transparent 70%)}
@media(max-width:860px){.spark{display:none}}

/* === Card 3D tilt + spotlight === */
[data-tilt]{transform-style:preserve-3d;perspective:1000px;will-change:transform;
  transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1)}

/* === Magnetic CTA === */
[data-magnetic]{will-change:transform;transition:transform 0.3s cubic-bezier(0.2,0.8,0.2,1)}

/* === Reveal stagger === */
[data-reveal]{opacity:0;transform:translateY(30px) scale(0.97);
  transition:opacity 0.9s cubic-bezier(0.2,0.8,0.2,1),transform 0.9s cubic-bezier(0.2,0.8,0.2,1)}
[data-reveal].in{opacity:1;transform:translateY(0) scale(1)}

/* === Form sparkle feedback === */
.field input:focus,.field textarea:focus,.field select:focus,
.modal input:focus,.modal textarea:focus,.modal select:focus{
  box-shadow:0 0 0 3px rgba(212,168,90,0.18),0 0 20px rgba(212,168,90,0.25);
  transition:box-shadow 0.3s,border-color 0.3s}

/* === Submit success burst === */
@keyframes successBurst{
  0%{transform:scale(0.8);opacity:0}
  50%{transform:scale(1.2);opacity:1}
  100%{transform:scale(1);opacity:1}
}
.success-burst{animation:successBurst 0.6s cubic-bezier(0.2,0.8,0.2,1) both}

/* === 계절 배지 (옵션 표시) === */
.season-badge{position:fixed;bottom:90px;left:20px;z-index:50;
  background:rgba(10,6,8,0.7);border:1px solid var(--line);
  color:var(--paper-dim);padding:6px 12px;border-radius:999px;
  font-size:11px;letter-spacing:0.08em;backdrop-filter:blur(8px);
  pointer-events:auto;cursor:pointer;transition:all 0.2s;opacity:0;
  font-family:Pretendard,sans-serif}
.season-badge.show{opacity:0.85}
.season-badge:hover{opacity:1;border-color:var(--gold);color:var(--paper)}
@media(max-width:860px){.season-badge{bottom:100px;font-size:10px;padding:5px 10px}}

/* === reduced-motion 완벽 대응 === */
@media(prefers-reduced-motion:reduce){
  .floats,.spark,.season-badge{display:none!important}
  *,*::before,*::after{
    animation-duration:0.001s!important;
    transition-duration:0.001s!important
  }
}

/* ============================================ */
/* === r31 v5.7 — 반응형 + 모바일 풀 보강 === */
/* ============================================ */

/* ① 폼 input font-size 16px 강제 (iOS Safari zoom 방지) */
input,textarea,select{font-size:16px!important}
@media(min-width:769px){input,textarea,select{font-size:14px!important}}

/* ② 모바일 :active 터치 피드백 (탭 시 시각 반응) */
@media(hover:none) and (pointer:coarse){
  button:active,a:active,.btn:active,.btn-primary:active,.btn-secondary:active,
  .opt:active,.share-btn:active,.story-card:active,.bldg-card:active{
    transform:scale(0.97)!important;
    transition:transform 0.1s ease!important;
    opacity:0.85
  }
}

/* ③ 1920px+ 와이드 데스크탑 — 컨테이너 max 보강 */
@media(min-width:1920px){
  .container,header.nav,footer .container{max-width:1640px!important;margin:0 auto}
  .hero-content{max-width:960px}
  section{padding-left:max(60px,4vw)!important;padding-right:max(60px,4vw)!important}
}

/* ④ 모바일 모달 — sticky safe-area 대응 */
@supports(padding:env(safe-area-inset-bottom)){
  .modal-foot,.bot-nav{padding-bottom:max(18px,env(safe-area-inset-bottom))!important}
}

/* ⑤ 모바일 옵션 그리드 강제 1열 (320~480) */
@media(max-width:480px){
  .opt-grid{grid-template-columns:1fr!important}
  .opt{min-height:64px;padding:14px 16px}
  .opt strong{font-size:15px}
}

/* ⑥ 모바일 nav-link 터치 영역 ≥44px (a11y WCAG) */
@media(max-width:860px){
  .nav-link,a.nav-link,.bot-nav a,.bot-nav button{min-height:48px;display:flex;align-items:center;justify-content:center}
}

/* ⑦ Tap highlight 동화 톤 */
*{-webkit-tap-highlight-color:rgba(212,168,90,0.18)}

/* ⑧ 모바일 키보드 띄울 때 fixed 요소 안 가림 */
@media(max-width:860px){
  .modal{padding-bottom:env(keyboard-inset-height,0px)}
}

/* ⑨ 가로 모드 (landscape) 모바일 */
@media(max-width:900px) and (orientation:landscape){
  .hero{min-height:120vh;padding:80px 24px 60px}
  .bot-nav{display:none}
}

/* ⑩ 모바일 폼 레이블 터치 */
.field label,.consent label{cursor:pointer;min-height:24px}

/* ⑪ /policy 모바일 보강 */
@media(max-width:480px){
  .gh{padding:12px 16px}
  .gh .brand{font-size:14px}
  section h2{font-size:24px!important}
}

/* ⑫ Long press 방지 (iOS 이미지 저장 메뉴 → 사이트 내 이미지) */
img{-webkit-touch-callout:none;-webkit-user-select:none}

/* ⑬ 가로 스크롤 방지 (반응형 안전망) */
html,body{max-width:100vw;overflow-x:hidden}

/* ⑭ 색맹 사용자 — 색 대비 보강 (CTA 텍스트 그림자) */
.btn-primary,.nav-cta,.bot-nav .cta{text-shadow:0 1px 2px rgba(255,255,255,0.15)}

/* ⑮ r162-A: 모바일 푸터 터치 영역 보장 (Apple HIG 44px) — P1 점검 발견 */
@media (max-width:860px){
  footer a, .footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 0;
    line-height: 1.4;
  }
}

/* r223aa: stagger float timing. The per-season `animation:` shorthand reset
   animation-delay to 0, so every float was synced and the petals fell in one
   horizontal line. 4-class selectors win over the season rules; give each
   float its own duration/delay so they scatter naturally. */
.floats .float.star.s1{animation-duration:21s;animation-delay:-1s}
.floats .float.star.s2{animation-duration:25s;animation-delay:-9s}
.floats .float.star.s3{animation-duration:19s;animation-delay:-5s}
.floats .float.star.s4{animation-duration:27s;animation-delay:-14s}
.floats .float.star.s5{animation-duration:23s;animation-delay:-18s}
.floats .float.petal.p1{animation-duration:25s;animation-delay:-3s}
.floats .float.petal.p2{animation-duration:31s;animation-delay:-13s}
.floats .float.petal.p3{animation-duration:27s;animation-delay:-21s}
.floats .float.petal.p4{animation-duration:34s;animation-delay:-8s}
.floats .float.firefly.f1{animation-duration:11s;animation-delay:-2s}
.floats .float.firefly.f2{animation-duration:15s;animation-delay:-7s}
.floats .float.firefly.f3{animation-duration:13s;animation-delay:-11s}