/*
 * 몬스터 캐릭터 + 첫 화면 장면 + 엿보기·달리기 몬스터 (v3.3.0)
 *
 * 1) 몬스터 움직임  : parts/monster.php 의 SVG 를 움직인다.
 *    구조: .mon > svg > .mon-hop(점프) > .mon-root(숨쉬기) > 발 · 몸통(눈·입) · 팔
 *    상태 클래스(.mon 에 붙이면 재생): is-wave 인사 · is-cheer 만세 · is-hop 점프 · is-roar 포효 · is-look 위를 봄 · is-sleep 졸음 · is-walk/is-run 걷기·달리기
 *    눈동자는 --ex --ey (monster.js 가 마우스를 따라 계산), 몸 기울기는 --tilt
 * 2) 첫 화면(.hero)  : 건물 사진 + 걸어 들어오는 몬스터 + 간판 점등 연출. 연출 중에는 .hero-intro 클래스가 붙어 있고,
 *    끝나면 monster.js 가 떼어낸다. 떼어낸 뒤에도 모습이 같도록 "기본 스타일 = 연출이 끝난 모습"으로 짜 두었다.
 * 3) 엿보기(.peek) · 스크롤 달리기(.runner) · 상담 구역 몬스터(.cta-mon)
 */

/* ═════════ 1. 몬스터 ═════════ */
.mon { --ex: 0; --ey: 0; --tilt: 0; --bd: 0s; position: relative; display: inline-block; line-height: 0; }
.mon-svg { display: block; width: 100%; height: auto; overflow: visible; }
.mon-svg * { transform-box: view-box; }
.mon.is-flip .mon-svg { transform: scaleX(-1); }

/* ── 모양 색 ── */
.mon-shadow { fill: rgba(0, 0, 0, 0.55); transform-origin: 171px 316px; }
.mon-socket { fill: #140d22; stroke: rgba(255, 244, 200, 0.35); stroke-width: 1.4; }
.mon-pupil { fill: #2b1a06; }
.mon-glint { fill: #fff; opacity: 0.95; }
.mon-glint2 { fill: #fff; opacity: 0.65; }
.mon-smile { fill: #140d22; }
.mon-open { fill: #140d22; transform-origin: 155.5px 152px; transform: scaleY(0); }
.mon-tongue { fill: #ff6f8e; }
.mon-brow { stroke: #9c6a14; }

/* ── 기본 움직임 (항상) ── */
.mon-root { transform-origin: 171px 316px; animation: monBreathe 3.6s ease-in-out infinite; }
.mon-torso { transform-origin: 171px 300px; transform: rotate(calc(var(--tilt) * 1deg)); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.mon-armL { transform-origin: 62px 172px; animation: monArmL 4.3s ease-in-out infinite; }
.mon-armR { transform-origin: 278px 176px; animation: monArmR 4.9s ease-in-out -1.4s infinite; }
.mon-footL { transform-origin: 112px 272px; }
.mon-footR { transform-origin: 232px 272px; }
.mon-iris-track { transform: translate(calc(var(--ex) * 1px), calc(var(--ey) * 1px)); transition: transform 0.12s ease-out; }
.mon-lid { transform: translateY(-92px); animation: monBlink 5.8s var(--bd) infinite; }

/* 화면 밖에 있는 몬스터는 멈춰서 가볍게 */
.mon.is-off * { animation-play-state: paused !important; }

/* ── 상태: 인사 · 만세 · 점프 · 포효 · 졸음 ── */
.mon.is-look { --ex: 10; --ey: -13; }
.mon.is-wave .mon-armR { animation: monWaveR 3.6s ease-in-out 1 both; }
.mon.is-cheer .mon-armL { animation: monCheerL 1.5s ease-in-out 1 both; }
.mon.is-cheer .mon-armR { animation: monCheerR 1.5s ease-in-out 1 both; }
.mon.is-hop .mon-hop { animation: monHop 0.8s cubic-bezier(0.3, 0, 0.35, 1) 1; transform-origin: 171px 316px; }
.mon.is-hop .mon-shadow { animation: monShadowHop 0.8s ease-in-out 1; }
.mon.is-hop .mon-footL, .mon.is-hop .mon-footR { animation: monFootTuck 0.8s ease-in-out 1; }
.mon.is-roar .mon-open { animation: monOpen 1.5s cubic-bezier(0.3, 1.4, 0.5, 1) 1 both; }
.mon.is-roar .mon-armL { animation: monCheerL 1.5s ease-in-out 1 both; }
.mon.is-roar .mon-armR { animation: monCheerR 1.5s ease-in-out 1 both; }
.mon.is-roar .mon-root { animation: monRoarBody 1.5s ease-out 1; }
.mon.is-roar .mon-brow { animation: monBrow 1.5s ease-out 1; }
.mon.is-sleep .mon-lid { animation: none; transform: translateY(0); }
.mon.is-sleep .mon-root { animation-duration: 6s; }
.mon.is-sleep::after { content: "Z z"; position: absolute; right: 2%; top: -2%; font: 900 clamp(0.8rem, 1.5vw, 1.25rem)/1 var(--font-en, sans-serif); letter-spacing: 0.12em; color: var(--violet-2, #b79cff); text-shadow: 0 0 12px rgba(139, 92, 246, 0.9); animation: monZzz 2.6s ease-in-out infinite; pointer-events: none; }

/* ── 걷기: 발이 번갈아 들리고 몸이 통통 ── */
.mon.is-walk .mon-footL { animation: monStep 0.6s ease-in-out infinite; }
.mon.is-walk .mon-footR { animation: monStep 0.6s ease-in-out -0.3s infinite; }
.mon.is-walk .mon-hop { animation: monBob 0.6s ease-in-out infinite; transform-origin: 171px 316px; }
.mon.is-walk .mon-armL { animation: monSwingL 0.6s ease-in-out infinite; }
.mon.is-walk .mon-armR { animation: monSwingR 0.6s ease-in-out infinite; }
.mon.is-run .mon-footL, .mon.is-run .mon-footR { animation-duration: 0.28s; }
.mon.is-run .mon-footR { animation-delay: -0.14s; }
.mon.is-run .mon-hop { animation-duration: 0.28s; }
.mon.is-run .mon-armL, .mon.is-run .mon-armR { animation-duration: 0.28s; }

/* ── 키프레임 ── */
@keyframes monBreathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.014, 0.984); } }
@keyframes monArmL { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(5deg); } }
@keyframes monArmR { 0%, 100% { transform: rotate(1deg); } 50% { transform: rotate(-5deg); } }
@keyframes monBlink { 0%, 92% { transform: translateY(-92px); } 94.5% { transform: translateY(0); } 97% { transform: translateY(0); } 100% { transform: translateY(-92px); } }
@keyframes monWaveR {
  0% { transform: rotate(0deg); } 12% { transform: rotate(-116deg); } 20% { transform: rotate(-142deg); } 28% { transform: rotate(-112deg); }
  36% { transform: rotate(-142deg); } 44% { transform: rotate(-112deg); } 52% { transform: rotate(-142deg); } 60% { transform: rotate(-112deg); }
  68% { transform: rotate(-142deg); } 78% { transform: rotate(-116deg); } 100% { transform: rotate(0deg); }
}
@keyframes monCheerL { 0% { transform: rotate(0deg); } 25% { transform: rotate(138deg); } 45% { transform: rotate(124deg); } 65% { transform: rotate(140deg); } 100% { transform: rotate(0deg); } }
@keyframes monCheerR { 0% { transform: rotate(0deg); } 25% { transform: rotate(-138deg); } 45% { transform: rotate(-124deg); } 65% { transform: rotate(-140deg); } 100% { transform: rotate(0deg); } }
@keyframes monHop {
  0% { transform: translateY(0) scale(1, 1); } 16% { transform: translateY(0) scale(1.1, 0.88); }
  44% { transform: translateY(-62px) scale(0.95, 1.08); } 72% { transform: translateY(0) scale(1.12, 0.86); }
  86% { transform: translateY(0) scale(0.97, 1.04); } 100% { transform: translateY(0) scale(1, 1); }
}
@keyframes monShadowHop { 0%, 100% { transform: scale(1); opacity: 1; } 44% { transform: scale(0.62); opacity: 0.45; } 72% { transform: scale(1.12); } }
@keyframes monFootTuck { 0%, 16% { transform: translateY(0); } 44% { transform: translateY(-14px) rotate(6deg); } 72%, 100% { transform: translateY(0); } }
@keyframes monOpen { 0% { transform: scaleY(0); } 20% { transform: scaleY(1.05); } 70% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes monRoarBody { 0% { transform: scale(1); } 18% { transform: scale(1.06, 0.94); } 32% { transform: scale(0.95, 1.07); } 100% { transform: scale(1); } }
@keyframes monBrow { 0%, 100% { opacity: 0; } 20%, 70% { opacity: 0.9; } }
@keyframes monStep { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-18px) rotate(-9deg); } 50% { transform: translateY(0) rotate(0deg); } }
@keyframes monStepB { 0%, 100% { transform: translateY(0) rotate(0deg); } 75% { transform: translateY(-18px) rotate(-9deg); } 50% { transform: translateY(0) rotate(0deg); } }
@keyframes monBob { 0%, 100% { transform: translateY(0) scale(1.03, 0.97); } 25%, 75% { transform: translateY(-12px) scale(0.98, 1.03); } 50% { transform: translateY(0) scale(1.03, 0.97); } }
@keyframes monSwingL { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(22deg); } }
@keyframes monSwingR { 0%, 100% { transform: rotate(14deg); } 50% { transform: rotate(-22deg); } }
@keyframes monZzz { 0% { opacity: 0; transform: translate(0, 6px) scale(0.7); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(12px, -22px) scale(1.2); } }

/* ═════════ 2. 엿보기 · 달리기 · 상담 구역 ═════════ */
/* 구역 윗선에 걸터앉아 얼굴만 내미는 몬스터 (JS 가 .is-up 을 붙이고 뗀다) */
.peek { position: absolute; z-index: 3; width: clamp(84px, 9vw, 130px); aspect-ratio: 368 / 204; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.peek .mon { position: absolute; left: 0; top: 0; width: 100%; transform: translateY(105%); transition: transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1); }
.peek.is-up .mon { transform: translateY(1%); }
.peek-r { right: 7%; bottom: 100%; }
.peek-l { left: 7%; bottom: 100%; }
.peek-foot { left: 9%; bottom: 100%; }
.no-js .peek .mon, html:not(.js) .peek .mon { transform: translateY(1%); }

/* 헤더 아래 스크롤 진행선 위를 달리는 몬스터 */
.runner .mon { width: 100%; }

/* 하단 상담 구역 양옆에서 응원하는 몬스터 */
.cta-mon { position: absolute; z-index: 1; bottom: -2px; width: clamp(130px, 15vw, 220px); pointer-events: auto; }
.cta-mon .mon { width: 100%; }
.cta-mon-r { right: clamp(1rem, 6vw, 6.5rem); }
.cta-mon-l { left: clamp(1rem, 6vw, 6.5rem); width: clamp(100px, 11vw, 160px); }
@media (max-width: 899px) { .cta-mon { display: none; } }

/* 안쪽 페이지 맨 위 오른쪽에서 말하는 몬스터 */
.pg-mon { position: absolute; z-index: 2; right: 1.5rem; bottom: 0; width: clamp(120px, 14vw, 196px); }
.pg-mon .mon { width: 100%; cursor: pointer; }
.pg-bubble { position: absolute; z-index: 3; left: 46%; bottom: 93%; translate: -50% 0; padding: 0.6rem 1.05rem; font: 900 clamp(0.8rem, 1.12vw, 1rem)/1.25 var(--font-display); letter-spacing: -0.02em; white-space: nowrap; color: #130d02; background: var(--gold-grad); border-radius: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 28px rgba(243, 212, 125, 0.45); transform-origin: 50% 100%; pointer-events: none; animation: pgBubble 11s ease-in-out 1.4s infinite; }
.pg-bubble::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 10px; margin-left: -8px; background: #e5ad32; clip-path: polygon(0 0, 100% 0, 50% 100%); }
@keyframes pgBubble { 0%, 100% { opacity: 0; transform: scale(0.6) translateY(10px); } 7%, 55% { opacity: 1; transform: none; } 63% { opacity: 0; transform: scale(0.9) translateY(4px); } }
@media (max-width: 899px) { .pg-mon { display: none; } }

/* 404 페이지 */
.notfound { text-align: center; }
.nf-mon { width: clamp(150px, 22vw, 220px); margin: 0 auto 1.2rem; }
.nf-mon .mon { width: 100%; }

/* 시공사례 큐레이션 안내판 몬스터 · 도감 큰 몬스터 */

/* ═════════ 3. 첫 화면 ═════════ */
.hero {
  --stage-h: clamp(560px, calc(100vh - var(--header-h) - 118px), 860px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--bg);
  isolation: isolate;
  overflow: hidden;
}
@supports (height: 100svh) {
  .hero { --stage-h: clamp(560px, calc(100svh - var(--header-h) - 118px), 860px); }
}

/* 무대: 사진 + 몬스터가 이 안에서 움직인다 (글자는 그 위, 같은 칸에 겹쳐 둔다) */
.hero-stage { grid-area: 1 / 1; position: relative; height: var(--stage-h); min-width: 0; }
.hero-scene { position: absolute; inset: 0; overflow: hidden; container-type: size; }
.hero-glow { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(52% 70% at 6% 90%, rgba(139, 92, 246, 0.4), transparent 70%), radial-gradient(40% 55% at 30% 6%, rgba(139, 92, 246, 0.2), transparent 70%); }

/* 건물 사진 상자: 높이에 맞춰 오른쪽 정렬 (사진 안 위치를 % 로 잡아 두어 화면이 달라져도 간판·몬스터가 같은 자리에 선다) */
.hero-photo { position: absolute; z-index: 1; right: 0; top: 0; width: 100%; height: 100%; }
.hero-photo picture { display: block; width: 100%; height: 100%; }
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right top; user-select: none; -webkit-user-drag: none; }
@supports (width: 1cqh) {
  .hero-photo { width: 160cqh; height: 100cqh; }
  .hero-photo img { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%); mask-image: linear-gradient(90deg, transparent 0, #000 14%); }
}
/* 관리자가 다른 사진을 고르면 장면 전체를 꽉 채운다 (간판 위치를 알 수 없으므로 점등 연출은 생략) */
.hero-custom .hero-photo { inset: 0; width: auto; height: auto; }
.hero-custom .hero-photo img { -webkit-mask-image: none; mask-image: none; object-position: 70% 40%; }

.hero-vig { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(5, 4, 9, 0.5) 0, rgba(5, 4, 9, 0) 44%), linear-gradient(0deg, #050409 0, rgba(5, 4, 9, 0) 9%), linear-gradient(180deg, rgba(5, 4, 9, 0.5) 0, rgba(5, 4, 9, 0) 14%); }

/* 간판 점등: 어두운 막(.hero-signdim)이 깜빡이며 걷히고, 빛(.hero-signglow)이 숨쉰다 */
.hero-signdim, .hero-signglow, .hero-sparks { position: absolute; left: 62%; top: 4%; width: 31%; height: 38%; pointer-events: none; }
.hero-signdim { background: radial-gradient(closest-side, rgba(4, 3, 8, 0.95) 0, rgba(4, 3, 8, 0.9) 58%, rgba(4, 3, 8, 0) 100%); opacity: 0; }
.hero-signglow { background: radial-gradient(closest-side, rgba(255, 222, 140, 0.5) 0, rgba(255, 196, 96, 0.16) 58%, rgba(255, 196, 96, 0) 100%); mix-blend-mode: screen; opacity: 0.55; animation: heroGlowBreath 5.5s ease-in-out infinite; }
.hero-sparks i { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; opacity: 0; animation: heroSpark 3.2s ease-in-out calc(var(--k, 0) * 0.55s) infinite; }
.hero-sparks i::before { content: "✦"; position: absolute; left: -0.5em; top: -0.5em; font-size: var(--s, 1.1rem); line-height: 1; color: #fff3c4; text-shadow: 0 0 10px rgba(255, 214, 120, 0.95), 0 0 22px rgba(243, 212, 125, 0.7); }

/* 간판을 누르면 불이 꺼졌다가 깜빡이며 다시 켜진다 */
.hero-signhit { position: absolute; z-index: 4; left: 64%; top: 6%; width: 27%; height: 32%; padding: 0; background: none; border: 0; border-radius: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hero-signhit:focus-visible { outline: 2px dashed var(--gold); outline-offset: 4px; }
.hero-photo.is-flick .hero-signdim { animation: heroFlick 1.7s linear; }
.hero-photo.is-flick .hero-signglow { animation: heroFlickGlow 1.7s linear, heroGlowBreath 5.5s ease-in-out 1.7s infinite; }
.hero-bubble-b.is-show { opacity: 1; }

/* 먼지처럼 떠오르는 빛 알갱이 */
.hero-dust { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.hero-dust i { position: absolute; left: var(--x); bottom: -3%; width: calc(var(--s, 3px) * 4); height: calc(var(--s, 3px) * 4); margin-left: calc(var(--s, 3px) * -2); border-radius: 50%; background: radial-gradient(circle, rgba(255, 240, 190, 0.95) 0 16%, rgba(243, 212, 125, 0.4) 32%, rgba(243, 212, 125, 0) 62%); opacity: 0; animation: heroDust var(--t, 11s) linear var(--d, 0s) infinite; }

/* 주인공 몬스터 */
.hero-actor { --ax: 68%; --ay: 90%; position: absolute; z-index: 5; left: var(--ax); top: var(--ay); width: 15%; translate: -50% -100%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hero-actor .mon { width: 100%; }
.hero-custom .hero-actor { --ax: 74%; --ay: 95%; }

/* 말풍선 (A: 계속 보임 · B: 점등 때만) */
.hero-bubble { position: absolute; z-index: 6; left: 50%; bottom: 94%; translate: -50% 0; padding: 0.6rem 1.05rem; font: 900 clamp(0.8rem, 1.12vw, 1rem)/1.25 var(--font-display); letter-spacing: -0.02em; white-space: nowrap; color: #130d02; background: var(--gold-grad); border-radius: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 28px rgba(243, 212, 125, 0.5); transform-origin: 50% 100%; transition: opacity 0.4s ease, transform 0.5s var(--spring); pointer-events: none; }
.hero-bubble::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 10px; margin-left: -8px; background: #e5ad32; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.hero-bubble-b { color: #fff; background: linear-gradient(135deg, #b79cff, #6d45e8); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 30px rgba(139, 92, 246, 0.7); opacity: 0; }
.hero-bubble-b::after { background: #7a52ee; }
.hero-bubble-a.is-hide { opacity: 0; transform: scale(0.7) translateY(8px); }

/* 글자 영역 */
.hero-grid { grid-area: 1 / 1; position: relative; z-index: 4; align-self: center; pointer-events: none; }
.hero-copy { max-width: min(620px, 52vw); padding-block: 1.5rem; pointer-events: auto; }
.hero-kicker { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0 0 1.3rem; padding: 0.45rem 1.05rem 0.45rem 0.85rem; font: 800 0.74rem/1.25 var(--font-en); letter-spacing: 0.26em; text-transform: uppercase; color: var(--violet-2); background: rgba(139, 92, 246, 0.14); border: 1px solid rgba(139, 92, 246, 0.55); border-radius: 999px; box-shadow: 0 0 26px rgba(139, 92, 246, 0.28); }
.hk-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); animation: dotPulse 2s ease-in-out infinite; }
.hero-title { margin: 0 0 1.1rem; font-weight: 900; line-height: 1.06; letter-spacing: -0.05em; }
.ht-main { position: relative; display: block; font-size: clamp(3rem, 7vw, 6.1rem); }
.ht-main::before { content: ""; position: absolute; z-index: -1; left: -3%; top: 6%; width: 80%; height: 88%; background: radial-gradient(closest-side, rgba(243, 212, 125, 0.28), rgba(243, 212, 125, 0) 72%); pointer-events: none; }
.ht-mark { display: inline-block; padding-bottom: 0.08em; background: linear-gradient(100deg, #e0a92f 0%, #fff1bd 24%, #f3d47d 44%, #fff6d0 54%, #f3d47d 64%, #e0a92f 84%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: goldShine 7s linear infinite; }
.ht-sub { display: block; margin-top: 0.4rem; font-size: clamp(1.45rem, 3.1vw, 2.6rem); color: #fff; letter-spacing: -0.04em; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6); }
.hero-sub { max-width: 34rem; margin: 0 0 0.8rem; font-size: clamp(1.02rem, 1.65vw, 1.4rem); font-weight: 800; line-height: 1.55; color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.7); }
.hero-lead { max-width: 33rem; margin: 0 0 1.8rem; font-size: clamp(0.92rem, 1.2vw, 1.04rem); line-height: 1.75; color: var(--fg-dim); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.5rem; }
.hero-chip { display: inline-flex; align-items: baseline; gap: 0.55rem; padding: 0.55rem 1.05rem; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-2); border-radius: 999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero-chip b { font: 900 1.05rem/1 var(--font-en); }
.hero-chip span { font-size: 0.84rem; font-weight: 700; color: var(--fg-dim); }
.hero-chip-sky { position: relative; background: linear-gradient(135deg, rgba(243, 212, 125, 0.26), rgba(243, 212, 125, 0.06)); border-color: rgba(243, 212, 125, 0.65); box-shadow: 0 0 34px rgba(243, 212, 125, 0.24); }
.hero-chip-sky::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 46px rgba(243, 212, 125, 0.6); opacity: 0; pointer-events: none; animation: chipPulse 3.6s ease-in-out 3s infinite; }
.hero-chip-sky b { color: var(--gold); text-shadow: 0 0 16px rgba(243, 212, 125, 0.65); }
.hero-chip-sky span { color: #fff; font-weight: 900; }
.hero-chip-since b { color: var(--violet-2); }

/* 아래 4가지 약속 띠 */
.hero-pillars-bar { grid-area: 2 / 1; position: relative; z-index: 4; background: linear-gradient(180deg, rgba(10, 8, 18, 0.2), #0a0812 28%); border-top: 1px solid rgba(183, 156, 255, 0.3); box-shadow: 0 -1px 30px rgba(139, 92, 246, 0.2); }
.hero-pillars { display: grid; grid-template-columns: repeat(4, 1fr); }
.pillar-item { display: flex; align-items: center; gap: 0.95rem; padding: 1.35rem 1.2rem; border-left: 1px solid var(--line); }
.pillar-item:first-child { border-left: 0; padding-left: 0; }
.pillar-ico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; color: var(--gold); background: rgba(139, 92, 246, 0.16); border: 1px solid rgba(183, 156, 255, 0.45); border-radius: 15px; box-shadow: 0 0 24px rgba(139, 92, 246, 0.38); transition: transform 0.45s var(--spring); }
.pillar-item:hover .pillar-ico { transform: rotate(-10deg) scale(1.1); }
.pillar-icon { width: 22px; height: 22px; }
.pillar-num { display: block; font: 900 1.6rem/1.1 var(--font-en); color: var(--gold); text-shadow: 0 0 18px rgba(243, 212, 125, 0.4); }
.pillar-txt { display: block; margin-top: 0.15rem; font-size: 0.84rem; font-weight: 700; color: var(--fg-dim); }

/* 편집 중에만 보이는 사진 바꾸기 상자 (front-editor.css) */
.hero-imgedit { display: none; }

/* ── 시작 연출 타임라인 (약 10초) ──
   0.0 사진 등장 · 0.4~2.8 몬스터 걸어 들어옴 · 2.9 간판을 올려다봄 · 3.5~4.4 간판 깜빡이며 켜짐
   4.4 만세+점프 · 4.5 말풍선 B · 6.2 말풍선 A + 손 흔들기 → 약 10초에 monster.js 가 .hero-intro 를 뗀다 */
.hero-intro .hero-photo { animation: heroFadeIn 1.1s ease-out backwards, heroDolly 8s cubic-bezier(0.2, 0.6, 0.2, 1) backwards; transform-origin: 72% 35%; }
.hero-intro .hero-actor { animation: heroWalkIn 2.4s linear 0.4s backwards; }
.hero-intro .hero-actor .mon-hop { animation: monBob 0.6s ease-in-out 0.4s 4 backwards, monHop 0.8s cubic-bezier(0.3, 0, 0.35, 1) 4.4s 1; transform-origin: 171px 316px; }
.hero-intro .hero-actor .mon-shadow { animation: monShadowHop 0.8s ease-in-out 4.4s 1; }
.hero-intro .hero-actor .mon-footL { animation: monStep 0.6s ease-in-out 0.4s 4, monFootTuck 0.8s ease-in-out 4.4s 1; }
.hero-intro .hero-actor .mon-footR { animation: monStepB 0.6s ease-in-out 0.4s 4, monFootTuck 0.8s ease-in-out 4.4s 1; }
.hero-intro .hero-actor .mon-armL { animation: monArmL 4.3s ease-in-out infinite, monSwingL 0.6s ease-in-out 0.4s 4, monCheerL 1.5s ease-in-out 4.4s 1; }
.hero-intro .hero-actor .mon-armR { animation: monArmR 4.9s ease-in-out -1.4s infinite, monSwingR 0.6s ease-in-out 0.4s 4, monCheerR 1.5s ease-in-out 4.4s 1, monWaveR 3.6s ease-in-out 6.2s 1; }
.hero-intro .hero-actor .mon-open { animation: monOpen 1.5s cubic-bezier(0.3, 1.4, 0.5, 1) 4.4s 1; }
.hero-intro .hero-actor .mon-iris-track { animation: heroLook 4.2s linear 0s both; }
.hero-intro .hero-actor .mon-torso { animation: heroTilt 4.2s linear 0s both; }
.hero-intro .hero-signdim { animation: heroSignDim 4.6s linear both; }
.hero-intro .hero-signglow { animation: heroSignGlow 4.6s linear both, heroGlowBreath 5.5s ease-in-out 4.6s infinite; }
.hero-intro .hero-sparks i { animation-delay: calc(3.7s + var(--k, 0) * 0.3s); }
.hero-intro .hero-bubble-a { animation: heroBubbleA 0.6s var(--spring) 6.2s backwards; }
.hero-intro .hero-bubble-b { animation: heroBubbleB 1.8s ease 4.55s backwards; }
.hero-intro .hero-kicker { animation: riseIn 0.8s var(--ease) 0.15s backwards; }
.hero-intro .ht-main { animation: riseIn 0.9s var(--ease) 0.3s backwards; }
.hero-intro .ht-sub { animation: riseIn 0.9s var(--ease) 0.45s backwards; }
.hero-intro .hero-sub { animation: riseIn 0.9s var(--ease) 0.6s backwards; }
.hero-intro .hero-lead { animation: riseIn 0.9s var(--ease) 0.75s backwards; }
.hero-intro .hero-actions { animation: riseIn 0.9s var(--ease) 0.9s backwards; }
.hero-intro .hero-chips { animation: riseIn 0.9s var(--ease) 1.05s backwards; }
.hero-intro .pillar-item { animation: riseIn 0.8s var(--ease) calc(1.2s + var(--i, 0) * 0.1s) backwards; }

/* ── 키프레임 ── */
@keyframes heroFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroDolly { from { transform: scale(1.07); } to { transform: scale(1); } }
@keyframes heroWalkIn { from { left: 118%; } to { left: var(--ax); } }
@keyframes heroLook { 0%, 60% { transform: translate(-7px, 3px); } 68%, 100% { transform: translate(11px, -14px); } }
@keyframes heroTilt { 0%, 60% { transform: rotate(-3deg); } 68%, 100% { transform: rotate(5deg); } }
@keyframes heroSignDim { 0%, 76% { opacity: 1; } 78% { opacity: 0.2; } 80% { opacity: 0.92; } 83% { opacity: 0.1; } 86% { opacity: 0.75; } 90%, 100% { opacity: 0; } }
@keyframes heroSignGlow { 0%, 76% { opacity: 0; } 78% { opacity: 0.9; } 80% { opacity: 0.1; } 83% { opacity: 1; } 86% { opacity: 0.3; } 90%, 100% { opacity: 0.55; } }
@keyframes heroGlowBreath { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.85; } }
@keyframes heroSpark { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 35% { opacity: 1; transform: scale(1) rotate(45deg); } 70% { opacity: 0; transform: scale(0.5) rotate(90deg); } }
@keyframes heroDust { 0% { opacity: 0; transform: translate(0, 0); } 12% { opacity: 0.85; } 88% { opacity: 0.5; } 100% { opacity: 0; transform: translate(var(--dx, 24px), -760px); } }
@keyframes heroFlick { 0% { opacity: 0; } 6%, 40% { opacity: 1; } 44% { opacity: 0.15; } 48% { opacity: 0.95; } 53% { opacity: 0.1; } 58% { opacity: 0.8; } 64%, 100% { opacity: 0; } }
@keyframes heroFlickGlow { 0% { opacity: 0.55; } 6%, 40% { opacity: 0; } 44% { opacity: 0.9; } 48% { opacity: 0.1; } 53% { opacity: 1; } 58% { opacity: 0.3; } 64%, 100% { opacity: 0.55; } }
@keyframes heroBubbleA { from { opacity: 0; transform: scale(0.2) translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes heroBubbleB { 0% { opacity: 0; transform: scale(0.2) translateY(14px); } 12%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(0.8) translateY(6px); } }
@keyframes chipPulse { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* ═════════ 4. 화면이 좁을 때 ═════════ */
/* 태블릿·휴대폰: 사진 무대가 위, 글자가 아래 */
@media (max-width: 1023px) {
  .hero { --stage-h: min(112vw, 560px); }
  .hero-grid { grid-area: 2 / 1; align-self: start; margin-top: 0.2rem; }
  .hero-copy { max-width: none; padding-block: 0 1.6rem; }
  .hero-pillars-bar { grid-area: 3 / 1; }
  .hero-pillars { grid-template-columns: repeat(2, 1fr); }
  .pillar-item { padding: 1.1rem 0.9rem; }
  .pillar-item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .pillar-item:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .hero-actor { width: 16%; }
}
@media (max-width: 767px) {
  /* 휴대폰용 세로 사진(0.88 비율)을 꽉 채운다 */
  .hero-default .hero-photo { width: max(100cqw, 88cqh); height: max(113.636cqw, 100cqh); }
  .hero-default .hero-photo img { -webkit-mask-image: none; mask-image: none; }
  .hero-default .hero-signdim, .hero-default .hero-signglow, .hero-default .hero-sparks { left: 31%; top: 3%; width: 58%; height: 42%; }
  .hero-default .hero-signhit { left: 35%; top: 6%; width: 50%; height: 34%; }
  .hero-default .hero-actor { --ax: 63%; --ay: 95%; width: 28%; }
  .hero-custom .hero-actor { --ax: 72%; --ay: 95%; width: 28%; }
  .ht-main { font-size: clamp(2.7rem, 13.5vw, 4.4rem); }
  .ht-sub { font-size: clamp(1.4rem, 6.4vw, 2rem); }
  .hero-sub { font-size: 1.05rem; }
  .hero-actions .btn-pill { flex: 1 1 100%; }
  .hero-bubble { font-size: 0.78rem; padding: 0.5rem 0.85rem; }
  .pillar-num { font-size: 1.35rem; }
  .pillar-txt { font-size: 0.78rem; }
  .pillar-ico { width: 40px; height: 40px; border-radius: 12px; }
  .peek { width: 78px; }
}
@media (max-width: 380px) {
  .hero-actions .btn-pill { padding-inline: 1rem; font-size: 0.9rem; }
}

/* ═════════ 5. 움직임 줄이기 ═════════ */
@media (prefers-reduced-motion: reduce) {
  .mon *, .mon-root, .mon-armL, .mon-armR, .mon-lid { animation: none !important; }
  .mon-iris-track, .mon-torso { transition: none; }
  .peek .mon { transition: none; transform: translateY(1%); }
  .pg-bubble { animation: none !important; opacity: 1; }
  .hero-dust { display: none; }
  .hero-sparks i { animation: none; opacity: 0.8; }
  .hero-intro .hero-actor .mon-iris-track { animation: none; transform: translate(11px, -14px); }
  .hero-intro .hero-actor .mon-torso { animation: none; transform: rotate(5deg); }
}