@charset "utf-8";

/* ==================== #hero · 메인 비주얼 ==================== */
.hero{position:relative;height:100vh;min-height:720px;max-height:1000px;overflow:hidden;background:#1f1212;color:#fff;cursor:none}
.hero .vw{position:absolute;inset:-4%;will-change:transform;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.hero video{width:100%;height:100%;object-fit:cover;display:block}
.hero .ov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,5,8,.62),rgba(20,5,8,.38) 55%,rgba(20,5,8,.3)),linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.55));pointer-events:none}
.hero .focus{position:absolute;inset:0;pointer-events:none;-webkit-backdrop-filter:blur(10px) brightness(.62);backdrop-filter:blur(10px) brightness(.62);--mx:50%;--my:50%;--r:360px;
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),transparent 0,transparent 35%,#000 100%);mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),transparent 0,transparent 35%,#000 100%)}
.hero .cwrap{position:absolute;left:50%;top:calc(50% - 10px);transform:translate(-50%,-50%);pointer-events:none}
.hero .copy{width:max-content;will-change:transform;transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.hero .copy .q1,.hero .copy .q2{display:block;width:39px;height:30px;color:#fff}
.hero .copy .q1 svg,.hero .copy .q2 svg{width:100%;height:100%}
.hero .copy .q2{margin-left:auto}
.hero .copy h1{display:grid;margin:28px 0;font-size:min(68px,calc((100vw - 48px) / 9.6));font-weight:700;line-height:1.3;text-align:center;white-space:nowrap}
.hero .copy h1 .ph{grid-area:1/1}
.hero .copy h1 .ln{display:block;overflow:hidden}
.hero .copy h1 .ln span{display:inline-block;transform:translateY(110%);transition:transform 1s var(--ease)}
.hero .copy h1 .ph.on .ln span{transform:none}
.hero .copy h1 .ph.out .ln span{transform:translateY(-110%);transition-duration:.7s}
.hero .copy h1 .ph.reset .ln span{transition:none!important}
.hero .copy h1 .ln:nth-child(2) span{transition-delay:.12s}
.hero .copy .q1,.hero .copy .q2{opacity:0;animation:fade .8s .5s forwards}
@keyframes fade{to{opacity:1}}
.hero .bar{position:relative;width:330px;height:3px;margin:95px auto 0;background:rgba(255,255,255,.3);overflow:hidden}
.hero .bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--red)}
.hero .chip{position:absolute;left:50%;bottom:71px;transform:translateX(-50%);display:flex;align-items:center;gap:20px;padding:20px 28px;white-space:nowrap;pointer-events:none}
.hero .chip div{display:flex;flex-direction:column;gap:4px}
.hero .chip small{font-size:13px;font-weight:700;line-height:1.5;color:rgba(255,255,255,.7)}
.hero .chip b{font-size:18px;font-weight:700;line-height:1.2}
.hero .chip i{width:1px;height:40px;background:rgba(255,255,255,.3)}

/* 커서 팔로워 · 스파클 */
.cur{position:fixed;left:0;top:0;z-index:70;pointer-events:none;opacity:0;transition:opacity .25s}
.cur.on{opacity:1}
.cur .dot{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;background:rgba(213,0,50,.55)}
.spark{position:fixed;z-index:65;width:14px;height:14px;margin:-7px 0 0 -7px;color:var(--gold);pointer-events:none;animation:sp 1s ease-out forwards}
.spark svg{width:100%;height:100%}
@keyframes sp{0%{opacity:1;transform:scale(.4) rotate(0)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1) rotate(90deg)}}
@media (hover:none),(pointer:coarse){.hero{cursor:auto}.cur{display:none}.hero .focus{display:none}}

/* ==================== #x3 · 3D 스크롤 (기부 자판기 소개) ==================== */
.x3{position:relative;height:640vh;background:#fff}
.x3 .stage{position:sticky;top:0;height:100vh;overflow:hidden;perspective:1800px;perspective-origin:50% 45%}
.x3 .bgd{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 45%,#2a0a0c 0%,#120405 70%);opacity:0}
.x3 .big{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-weight:900;font-size:min(15vw,234px);line-height:.9;color:rgba(193,160,30,.18);white-space:nowrap;user-select:none;pointer-events:none}
.x3 .copy2{position:absolute;left:calc(var(--pad) + 740px);top:50%;transform:translateY(-50%);width:560px;z-index:6}
.x3 .copy2 .sp{display:block;width:27px;height:45px;margin-bottom:32px}
.x3 .copy2 .sp svg{width:100%;height:100%}
.x3 .copy2 h2{font-size:56px;font-weight:700;line-height:1.3;margin-bottom:32px}
.x3 .copy2 h2 em{font-style:normal;font-weight:900;color:var(--gold)}
.x3 .copy2 p{font-size:20px;line-height:1.7;color:var(--ink2)}
.x3 .badge{position:absolute;z-index:7;left:0;top:0;width:190px;height:190px;margin:0;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;filter:drop-shadow(0 14px 24px rgba(120,90,0,.28));will-change:transform,opacity;isolation:isolate}
.x3 .badge>svg{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.x3 .badge small{font-size:15px;font-weight:700;line-height:1.5}
.x3 .badge b{font-size:48px;font-weight:900;line-height:1.1}
.x3 .cap{position:absolute;z-index:6;width:400px;opacity:0;will-change:transform,opacity}
.x3 .cap .t{font-size:15px;font-weight:900;color:var(--red);margin-bottom:10px}
.x3 .cap h3{font-size:32px;font-weight:900;line-height:1.3}
.x3 .cap p{margin-top:14px;font-size:17px;line-height:1.65;color:var(--ink2)}
.x3 .cap1{left:var(--pad);top:36%}
.x3 .cap2{right:var(--pad);top:40%;text-align:right}
.x3 .cap3{left:var(--pad);top:46%}
.x3 .world,.x3 .cards{position:absolute;left:50%;top:53%;width:0;height:0;transform-style:preserve-3d}
.x3 .cards{pointer-events:none;z-index:4}
.x3 .mc{position:absolute;left:0;top:0;transform-style:preserve-3d;will-change:transform}
.x3 .face{position:absolute;left:0;top:0;backface-visibility:hidden}
.x3 .shadow{position:absolute;left:50%;top:53%;width:560px;height:110px;margin-left:-280px;border-radius:50%;background:radial-gradient(closest-side,rgba(60,0,0,.32),rgba(60,0,0,0));filter:blur(6px);will-change:transform,opacity}
.x3 .frontimg{width:100%;height:100%;border-radius:10px 10px 0 0;overflow:hidden}
.x3 .frontimg img{width:100%;height:100%;display:block}
.x3 .scrdim{position:absolute;background:#0b1f3a;opacity:0;border-radius:4px}
.x3 .glare{position:absolute;inset:0;border-radius:10px 10px 0 0;background:linear-gradient(105deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.22) 45%,rgba(255,255,255,0) 60%);background-size:300% 100%;mix-blend-mode:screen;pointer-events:none}
.x3 .redside{background:linear-gradient(90deg,#8d0007,#c0020b 30%,#d6121a 55%,#a90009)}
.x3 .redback{background:linear-gradient(160deg,#d7101a,#b3000a);border-radius:10px 10px 0 0;box-shadow:inset 0 0 0 14px #c4000a,inset 0 0 0 16px rgba(0,0,0,.18)}
.x3 .redtop{background:linear-gradient(#ef3b3f,#c3020b);border-radius:10px 10px 0 0}
.x3 .basef{background:linear-gradient(#e4141c,#b8000a 70%,#8e0007);border-radius:0 0 10px 10px}
.x3 .basetop{background:linear-gradient(180deg,#b4000a,#e3121b)}
.x3 .gcard{position:absolute;left:0;top:0;border-radius:6px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.35);opacity:0;will-change:transform,opacity;background:#eef6fc}
.x3 .gcard img{width:100%;height:100%;object-fit:cover;display:block}
.x3 .final{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;z-index:7;opacity:0;pointer-events:none}
.x3 .final .flogo{display:block;width:min(300px,62vw);color:#fff}
.x3 .final .flogo svg{width:100%;height:auto}
.x3 .final .sep{margin:0 12px;color:rgba(255,255,255,.3)}
.x3 .final p{margin-top:36px;font-size:18px;color:rgba(255,255,255,.7);line-height:1.7}
.x3 .prog2{position:absolute;left:50%;bottom:36px;transform:translateX(-50%);width:200px;height:2px;background:rgba(213,0,50,.15);z-index:8}
.x3 .prog2 i{position:absolute;left:0;top:0;bottom:0;background:var(--red);width:0}

/* 버튼 */
.pill-btn{display:inline-flex;align-items:center;gap:10px;height:60px;margin-top:40px;padding:0 28px 0 32px;border-radius:999px;background:var(--red);color:#fff;font-size:17px;font-weight:700;transition:background .2s}
.pill-btn:hover{background:var(--deep)}
.pill-btn svg{width:20px;height:20px;transition:transform .3s var(--ease)}
.pill-btn:hover svg{transform:translateX(4px)}

/* ==================== #loc · 설치 장소 ==================== */
.loc{background:var(--cream);padding:140px var(--pad) 160px;text-align:center}
.loc h2{font-size:52px;font-weight:700;line-height:1.3}
.loc .d{margin-top:20px;font-size:20px;line-height:1.7;color:var(--ink2)}
.map{position:relative;margin-top:56px;height:600px;border-radius:24px;overflow:hidden;background:#ecece8;text-align:left}
.map .mapimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.map .mpin{position:absolute;left:63.8%;top:calc(50% - 30px);width:120px;height:120px;margin:-50px 0 0 -60px;pointer-events:none;animation:pinb 2.4s ease-in-out infinite}
.map .mpin svg{width:100%;height:100%}
@keyframes pinb{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* 네이버 지도 (index.php에 키 설정 시) : 기존 마커(.mpin)를 지도 마커로 사용 */
.map .naver-map{position:absolute;inset:0;z-index:0}
.map .naver-map .mpin{display:block;position:relative;left:auto;top:auto;margin:0}
.card{position:absolute;left:40px;top:50%;transform:translateY(-50%);width:500px;padding:40px;border-radius:20px;background:#fff;box-shadow:0 16px 40px rgba(50,25,25,.12)}
.card h3{font-size:28px;font-weight:700}
.info{display:flex;gap:16px;margin-top:24px}
.info .ic{flex:none;width:44px;height:44px;border-radius:50%;background:var(--cream);display:grid;place-items:center;color:var(--red)}
.info .ic svg{width:22px;height:22px}
.info small{display:block;font-size:13px;font-weight:700;color:var(--ink3)}
.info span{display:block;margin-top:4px;font-size:17px;font-weight:500;line-height:1.6}
.info span .nw{display:inline;margin:0;font-size:inherit;white-space:nowrap}
.card .acts{margin-top:32px}
.nbtn{display:inline-flex;white-space:nowrap;align-items:center;gap:8px;height:48px;padding:0 22px 0 24px;border-radius:999px;background:#3BAE47;color:#fff;font-size:15px;font-weight:700;transition:filter .2s}
.nbtn:hover{filter:brightness(.92)}
.nbtn svg{width:16px;height:16px}

/* 등장 효과 */
.rise{opacity:0;transform:translateY(28px);transition:opacity .8s ease-out,transform .9s var(--ease)}
.rise.in{opacity:1;transform:none}

/* ==================== #para · 패럴랙스 ==================== */
.para{position:relative;height:500px;background:#140a0a url(../img/8d62457ec9.jpg) center/cover no-repeat fixed}

/* ==================== 반응형 ==================== */
/* 작은 PC·태블릿 가로(901~1340px): 3D 구간 문구 잘림 · 캡션-자판기 겹침 방지 */
@media (min-width:901px) and (max-width:1340px){
  .x3 .copy2{left:calc(var(--pad) + min(310px, 27vw) + 290px);right:var(--pad);width:auto;max-width:560px}
  .x3 .copy2 h2{font-size:clamp(32px,3.8vw,56px)}
  .x3 .copy2 p{font-size:clamp(16px,1.5vw,20px)}
  .x3 .cap{width:min(400px, calc(50vw - var(--pad) - 190px))}
  .x3 .cap h3{font-size:clamp(24px,2.6vw,32px)}
  .x3 .cap p{font-size:clamp(15px,1.4vw,17px)}
}
@media (max-width:900px){
  .x3 .copy2{left:16px;right:16px;top:96px;transform:none;width:auto}
  .x3 .copy2 h2{font-size:30px;margin-bottom:16px}.x3 .copy2 .sp{width:18px;height:30px;margin-bottom:16px}.x3 .copy2 p{font-size:15px}
  .x3 .copy2 .pill-btn{display:none}
  .x3 .world,.x3 .cards,.x3 .shadow{top:70%}
  .x3 .badge{width:116px;height:116px}.x3 .badge b{font-size:30px}.x3 .badge small{font-size:12px}
  .x3 .cap{left:16px!important;right:16px!important;top:auto!important;bottom:72px;width:auto;text-align:left!important;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:18px 20px;border-radius:16px}
  .x3 .cap h3{font-size:22px}.x3 .cap p{font-size:14px;margin-top:6px}
  .x3 .final p{font-size:15px;padding:0 16px}.x3 .final p span{display:block}.x3 .final p .sep{display:none}
  .para{height:300px;background-attachment:scroll}
  .map .mpin{display:none}
}
@media (max-width:768px){
  .hero{min-height:600px;height:88vh}.hero .copy h1{margin:18px 0}.hero .copy .q1,.hero .copy .q2{width:26px;height:20px}.hero .bar{width:200px;margin-top:48px}.hero .chip{bottom:96px;gap:14px;padding:14px 18px}.hero .chip b{font-size:14px}.hero .chip small{font-size:12px}.hero .chip i{height:32px}
  .loc{padding:96px 16px}.loc h2{font-size:30px}.loc .d{font-size:16px}.map{height:auto;padding:260px 12px 12px}.map .mapimg{height:260px;object-position:64% 43%}.card{position:relative;left:auto;top:auto;transform:none;width:auto;padding:24px}
  .map .naver-map{bottom:auto;height:260px}
}
@media (max-width:480px){
  .card{padding:24px 20px}.card h3{font-size:22px}
  .info{gap:12px;margin-top:20px}.info .ic{width:40px;height:40px}.info .ic svg{width:20px;height:20px}
  .info span{font-size:15px}
}
/* 가로 모드 휴대폰: 문구·캡션 왼쪽, 자판기 오른쪽 */
@media (max-width:900px) and (max-height:500px) and (orientation:landscape){
  .hero .chip{bottom:40px}
  .x3 .copy2{right:52%;top:80px}
  .x3 .copy2 .sp{display:none}.x3 .copy2 h2{font-size:24px;margin-bottom:10px}.x3 .copy2 p{font-size:13px;line-height:1.6}
  .x3 .cap{right:52%!important;bottom:24px;padding:14px 16px}.x3 .cap h3{font-size:18px}.x3 .cap p{font-size:13px}
  .x3 .final .flogo{width:150px}.x3 .final p{margin-top:20px}
}
/* 소형 모바일(360px 미만) */
@media (max-width:359px){
  .hero .chip{flex-direction:column;gap:12px;bottom:48px;padding:0;text-align:center}
  .hero .chip div{align-items:center}
  .hero .chip i{width:32px;height:1px}
  .x3 .copy2 h2{font-size:26px}.x3 .copy2 p{font-size:14px}
  .x3 .cap{padding:16px}.x3 .cap h3{font-size:20px}
  .loc h2{font-size:26px}.loc .d{font-size:15px}
  .card .acts .nbtn{width:100%;justify-content:center;padding:0 16px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .hero .copy h1 .ln span{transform:none}.hero .copy h1 .ph:not(.on){visibility:hidden}.hero .copy .q1,.hero .copy .q2{opacity:1}.rise{opacity:1;transform:none}.cur{display:none}.hero{cursor:auto}
}