/* ============================================================================
   motion (4단계) — 기준서 모션 8(M1~M8) + 실측 키프레임·지속·딜레이 값.
   원칙: 이징은 --ease-main 단일(M3), 스태거는 CSS delay 방식(M4),
         미디어쿼리는 991/990 경계만. 마지막에 prefers-reduced-motion 대응.
   ============================================================================ */

/* ---------- 공용 키프레임 (실측 이름 체계와 동등한 재작성) ---------- */
@keyframes introScaleIn { 0% { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes lineGrowW    { 0% { width: 0; } to { width: calc(100% + 100px); } }
@keyframes lineGrowH    { 0% { height: 0; } to { height: calc(100% + 100px); } }
@keyframes introStem    { 0% { opacity: 0; height: 0; } to { opacity: 1; height: 30px; } }
@keyframes textDown     { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mainTxtIn    { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulseRing    { 0% { box-shadow: 0 0 0 0 var(--color-main2); } 100% { box-shadow: 0 0 0 20px rgba(0,0,0,0); } } /* 원본: pulse-animation 링 = main2 */
@keyframes circleDown   { 0% { transform: translateY(0); } 100% { transform: translateY(150px); } }
@keyframes sdbDot       { 0% { transform: translate(0,0); opacity: 0; } 40% { opacity: 1; } 80% { transform: translate(0,20px); opacity: 0; } 100% { opacity: 0; } }
@keyframes unitFloatIn  { from { opacity: 0; transform: scale(.94) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes bubbleBob   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes pullArrow    { 0%, 100% { transform: translateY(-50%) translateX(0); opacity: 1; } 50% { transform: translateY(-50%) translateX(-6px); opacity: .4; } }
@keyframes capFade      { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.pulse { animation: pulseRing 2s infinite; }

/* ============================== 데스크톱 (991px↑) ============================== */
@media (min-width: 991px) {

  /* ---------- 인트로 로딩 (M8: loading-end 체인 · 실측 지속/딜레이) ---------- */
  #introLoading { position: fixed; inset: 0; z-index: 1001; }
  #introLoading .intro-area {
    position: absolute; inset: 0;
    background: var(--color-main1);
    overflow: hidden;
    transition: opacity .6s ease;             /* 종료 fadeOut 0.6s(실측) */
  }
  #introLoading.is-closing .intro-area { opacity: 0; }
  #introLoading .intro-cont {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    animation: introScaleIn var(--dur-intro) var(--ease-main) both;   /* 1.4s */
  }
  #introLoading .intro-box { position: relative; width: 400px; height: 670px; }
  #introLoading .intro-visual { position: absolute; inset: 0; width: 400px; height: 670px; object-fit: cover; }
  #introLoading .intro-line-h,
  #introLoading .intro-line-v {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 100px); height: calc(100% + 100px);
    box-sizing: border-box;
    pointer-events: none;
  }
  #introLoading .intro-line-h {
    border-top: 3px solid #fff; border-bottom: 3px solid #fff;
    animation: lineGrowW var(--dur-intro-line) ease both;             /* 1.5s */
    animation-delay: var(--delay-2);                                  /* 0.2s */
  }
  #introLoading .intro-line-v {
    border-left: 3px solid #fff; border-right: 3px solid #fff;
    animation: lineGrowH var(--dur-intro-line) ease both;
    animation-delay: var(--delay-2);
  }
  #introLoading .intro-detail {
    position: absolute; top: 100px; left: 0; right: 0;
    text-align: center; z-index: 2;
  }
  #introLoading .intro-txt {
    color: var(--color-text-invert);            /* 사진(석경 투시도) 위 가독 */
    text-shadow: 0 1px 6px rgba(0, 9, 33, .6);
    font-weight: var(--fw-light);
    font-size: 1.4rem;
    line-height: 2;
    animation: textDown 1.2s var(--ease-main) both;
  }
  #introLoading .intro-txt b {
    font-weight: var(--fw-head);
    font-size: 2.4rem;
    line-height: 50px;
  }
  #introLoading .intro-txt::after {
    content: '';
    display: block; width: 1px; height: 40px;
    margin: var(--sp-20) auto;
    background: var(--color-text-invert);
    animation: introStem 1.2s var(--ease-main) both;
    animation-delay: var(--delay-1);
  }
  #introLoading .intro-wordmark { justify-content: center; font-size: 1.2rem; text-shadow: 0 1px 6px rgba(0, 9, 33, .6); animation: textDown 1.2s var(--ease-main) both; }
  #introLoading .intro-close {
    display: block; margin: 400px auto 0;
    color: rgba(255,255,255,.7);
    font-weight: var(--fw-emph);
    font-size: var(--fs-17);
  }

  /* ---------- 메인 카피 등장 체인 (loading-end 후, 실측 delay 1s/2s) ---------- */
  .sec-main .main-title { opacity: 0; transform: translateY(20px); }
  .sec-main .main-wordmark { opacity: 0; transform: translateY(20px); }
  .sec-main.loading-end .main-title { animation: mainTxtIn .8s ease forwards; animation-delay: var(--delay-10); }
  .sec-main.loading-end .main-wordmark { animation: mainTxtIn .8s ease forwards; animation-delay: var(--delay-20); }

  /* ---------- 커서 서클 ---------- */
  #cursorCircle {
    position: fixed; left: 0; top: 0;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--color-main2);   /* 원본: #cursor_circle { background:var(--color-main2) } */
    pointer-events: none;
    transition: .1s;
    z-index: 1200;
  }

  /* ---------- 마우스 따라다니는 사운드 버튼 (실측 80px 원형·pulse) ---------- */
  .sound-follow {
    position: fixed; left: 50vw; top: 50vh;
    transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 80px; height: 80px;
    border-radius: var(--radius-circle);
    background: var(--color-overlay-70);
    color: var(--color-text-invert);
    font-size: var(--fs-12);
    font-weight: var(--fw-btn);
    transition: opacity var(--dur-ui) ease;
    will-change: left, top;
    /* 헤더(z50) 아래로 — 커서 추종 버튼이 항상 커서 밑에 있어 z를 헤더 위로 두면
       헤더 :hover(메가메뉴)가 전면 차단된다(실측). 원본(z9999)은 클릭 시 버튼이
       사라지는 BGM UX라 잠복했던 문제 — 오디오 없는 재현에선 z를 내리는 게 근본해결. */
    z-index: 40;
  }
  /* 오산 실측: 아이콘 24×24 · stroke 1.5px · 아이콘↔라벨 간격 0 · 라벨 자간 -0.6px */
  .sound-follow svg { display: block; stroke-width: 1.5px; }
  .sound-follow span { letter-spacing: -0.6px; }
  .sound-follow.sound-on { opacity: 0; pointer-events: none; }
  /* 스플래시 중에는 인트로(z1001) 위로 — 오산과 동일하게 음표 버튼이 스플래시에서 커서를 따라다님.
     (평시 z40 유지 — 헤더 hover 차단 방지 근본수정과 충돌하지 않게 스플래시 동안만 상승) */
  .has-intro .sound-follow { z-index: 1100; }

  /* ---------- BGM 토글 (오산 실측: 헤더 안 우측 · 40×40 원형 · 아이콘 2개 스왑) ----------
     오산은 header .bgm-toggle{position:absolute; right:13rem @1440 / 17rem @1681-}로
     '방문예약'과 전화번호 사이에 놓인다. 우하단 플로팅이 아니다.
     배경은 오산이 자기 액센트(시안)를 쓰므로, 우리도 브랜드 액센트(main3 라이트스카이)를 쓴다
     — 헤더 위 네이비 원은 배경과 같은 색이라 보이지 않는다. */
  .site-header .bgm-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--radius-circle);
    background: var(--color-main3);
    color: var(--color-main1);
    flex-shrink: 0;
  }
  .site-header .bgm-toggle svg { width: 20px; height: 20px; stroke-width: 1.5px; flex-shrink: 0; }
  /* 아이콘 스왑: 정지 중 = music, 재생 중 = volume-x (오산 동일 구조) */
  .site-header .bgm-toggle .ic-off { display: none; }
  .site-header .bgm-toggle.bgm-on .ic-off { display: block; }
  .site-header .bgm-toggle.bgm-on .ic-on { display: none; }
  .site-header .bgm-toggle.bgm-on { animation: pulseRing 2s infinite; }

  /* ---------- 스크롤 유도 레일 (우측, circleDown 3s 무한) ---------- */
  .scroll-down {
    position: fixed; right: 50px; top: 50%;
    transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: center;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.3));
    z-index: 5;
  }
  .scroll-down p { display: flex; flex-direction: column; }
  .scroll-down p span {
    line-height: 1;
    font-weight: var(--fw-light);
    font-size: 12px;
    color: #fff;
    letter-spacing: var(--ls-point);
    transform: rotate(90deg);
  }
  .scroll-down .circle-rail { position: relative; margin-top: 30px; width: 1px; height: 150px; background: rgba(255,255,255,.3); }
  .scroll-down .rail-dot {
    position: absolute; top: 0; left: -4px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--color-main1);
    animation: circleDown 3s infinite;
  }

  /* ---------- 플로팅 버튼 (hover 확장 + pulse) ---------- */
  .floating-btns { position: fixed; right: 100px; bottom: 50px; display: flex; align-items: center; gap: var(--sp-20); z-index: 6; }
  .floating-btns .fb {
    display: flex; align-items: center; justify-content: center;
    width: 50px; height: 50px;
    border-radius: var(--radius-circle);
    color: var(--color-text-invert);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    white-space: nowrap;
    transition: var(--dur-ui-slow);
  }
  .floating-btns .fb-popup { background: var(--color-main2); }
  .floating-btns .fb-reserve { background: var(--color-main1); }
  .floating-btns .fb .fb-icon {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
  }
  .floating-btns .fb .fb-icon svg { width: 100%; height: 100%; display: block; }
  .floating-btns .fb p { display: none; padding-left: var(--sp-10); letter-spacing: var(--ls-title); }
  .floating-btns .fb:hover { background: #fff; color: #333; width: 150px; }
  .floating-btns .fb:hover p { display: inline-block; }

  /* 팝업 오버레이 (translateY -100%→0, 1s ease) */
  .fb-popup-wrap {
    position: fixed; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--sp-20);
    background: var(--color-overlay-60);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: 1s ease;
    z-index: 1000;
  }
  .fb-popup-wrap.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .fb-popup-list { display: flex; justify-content: center; gap: 3rem; }
  .fb-popup-list li { transition: var(--dur-ui); }
  .fb-popup-list li:hover { transform: translateY(-10px); box-shadow: var(--shadow-deep); }
  .fb-popup-list li img { width: 340px; box-shadow: var(--shadow-deep); }
  .fb-popup-close {
    background: var(--color-main1);
    color: var(--color-text-invert);
    font-weight: var(--fw-btn);
    padding: var(--sp-10) var(--sp-80);
  }

  /* ---------- 헤더/도트/메가 트랜지션 (실측 0.3s 0.4s · 0.5s) ---------- */
  .site-header { transition: background var(--dur-ui) var(--delay-4); }
  .site-header:hover { transition: background 0s 0s; }
  .mega { transition: max-height var(--dur-ui-slow); }
  .header-dim { transition: opacity var(--dur-ui); }
  .dot-nav a i { transition: var(--dur-ui); }
  .site-header .nav a, .mega-col ul li a { transition: color var(--dur-ui-fast), background var(--dur-ui-fast); }

  /* ---------- 입지 섹션: fade 슬라이드 + 등장 체인 (실측 값) ---------- */
  .loc-slide { display: flex; opacity: 0; pointer-events: none; transition: opacity 1s ease; }
  .loc-slide.is-current { opacity: 1; pointer-events: auto; z-index: 2; }

  /* 원본: 이미지·텍스트 등장은 '섹션 active' 1회 — 슬라이드 전환마다 재실행 금지
     (#location.active .images / .text-box — 슬라이드 간에는 슬라이드 크로스페이드만) */
  .loc-image { opacity: 0; transform: translateY(20px); transition: var(--dur-ui); }
  .sec-location.active .loc-image { opacity: 1; transform: translateY(0); transition: 1s; transition-delay: var(--delay-10); }
  .loc-text { opacity: 0; transform: translateY(-20px); transition: all 1s ease; }
  .sec-location.active .loc-text { opacity: 1; transform: translateY(0); }
  .loc-desc-wrap { overflow: hidden; }
  .loc-desc { transform: translateY(100%); transition: var(--dur-section); }
  .loc-slide.is-current .loc-desc { transform: translateY(0); }

  .loc-lines .line-h { transform: scaleX(0); transform-origin: left; transition: transform 1s ease var(--dur-section); }
  .sec-location.active .loc-lines .line-h { transform: scaleX(1); }
  .loc-lines .line-v { height: 0; transition: height 1s ease 1.2s; }
  .sec-location.active .loc-lines .line-v { height: 100%; }
  .loc-pg button { transition: opacity var(--dur-ui-fast); }

  /* 입지 스크롤 유도(마우스 모양, sdb 3s 무한) */
  .scroll-induce {
    position: absolute; left: 50%; bottom: 2%;
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center;
    opacity: .9; z-index: 3;
  }
  .scroll-induce .sdb {
    position: relative;
    width: 30px; height: 50px;
    border: 2px solid #dbdbdb;
    border-radius: 50px;
  }
  .scroll-induce .sdb::before {
    content: '';
    position: absolute; top: 10px; left: 50%;
    width: 6px; height: 6px; margin-left: -3px;
    background: #555; border-radius: 50%;
    animation: sdbDot 3s infinite;
  }
  .scroll-induce p { color: var(--color-gray-3); font-size: 14px; font-weight: var(--fw-light); padding-top: var(--sp-10); }  /* 실측: 리터럴 14px */

  /* ---------- 커뮤니티: 타이틀 자간 수축 + 배경 크로스페이드 (원본 실측:
     letter-spacing 70→5px 1s ease delay 1s · translateY 130→0 1s ease delay 2s) ---------- */
  .comm-display { letter-spacing: 70px; transform: translateY(130px); transition: 1s; }
  .sec-community.active .comm-display { letter-spacing: 5px; transform: translateY(0); transition: letter-spacing 1s ease var(--delay-10), transform 1s ease var(--delay-20); }
  .comm-tit p { opacity: 0; transform: translateY(-50px); transition: 1s; }
  .sec-community.active .comm-tit p { opacity: 1; transform: translateY(0); transition-delay: var(--delay-20); }
  .comm-thumbs { opacity: 0; transition: 1s; }
  .sec-community.active .comm-thumbs { opacity: 1; transition-delay: var(--delay-20); }
  .comm-thumbs button { transition: var(--dur-ui-slow); }
  .comm-thumbs button img { transition: filter var(--dur-ui-slow), transform var(--dur-ui-slow); }
  .comm-thumbs button:hover img { transform: scale(1.1); }
  /* 원본 실측: 보이는 모션 = 50px 상승 + 페이드(margin-top 50→0, 1s, delay 2s).
     (원본의 translateY(17rem)은 애니 없이 상시 고정 — 우리 플로우에선 margin으로 등가) */
  .comm-caption { opacity: 0; margin-top: 60px; transition: 1s; }
  .sec-community.active .comm-caption { opacity: 1; margin-top: 10px; transition-delay: var(--delay-20); }
  .comm-caption h3.swap { animation: capFade 1s ease both; }
  .comm-bg img { display: block; opacity: 0; transition: opacity 1s ease; }
  .comm-bg img.is-current { opacity: 1; }

  /* ---------- 유닛: 좌우 등장 + 탭/이미지 (실측 0.7s · 0.05/0.18s) ---------- */
  .unit-left { opacity: 0; transform: translateY(16px); transition: opacity .7s ease .05s, transform .7s ease .05s; }
  .unit-right { opacity: 0; transform: translateY(16px); transition: opacity .7s ease .18s, transform .7s ease .18s; }
  .sec-unit.active .unit-left, .sec-unit.active .unit-right { opacity: 1; transform: translateY(0); }
  .u-iso img.float-in { animation: unitFloatIn var(--dur-ui-slow) ease both; }
  .u-tabs button { transition: background 0.22s; }
  .u-tabs button::before { transition: height 0.25s; }
  .tab-label { transition: color 0.22s; }
  .plan-img img { transition: opacity var(--dur-ui-fast) ease; }

  /* ---------- 방문예약: 카드/라인 등장 + 보더 드로잉 호버 (실측 값) ---------- */
  .visit-card { position: relative; opacity: 0; transform: translateY(30px); transition: var(--dur-ui); }
  .sec-visit.active .visit-card { opacity: 1; transform: translateY(0); transition: 1s var(--delay-10); }
  .info-line { transform: scaleX(0); transition: var(--dur-ui); }
  .sec-visit.active .info-line { transform: scaleX(1); transition: var(--dur-section) var(--delay-10); }

  .visit-card::before, .visit-card::after,
  .visit-card .bd::before, .visit-card .bd::after { content: ''; position: absolute; background: var(--color-main3); transition: var(--dur-ui-slow); } /* 다크 배경 위 드로잉 라인 */
  .visit-card::before { left: -2px; top: -2px; width: 0; height: 2px; }
  .visit-card::after { right: -2px; top: -2px; width: 2px; height: 0; }
  .visit-card .bd { position: absolute; inset: 0; z-index: -1; transition: var(--dur-ui-slow); }
  .visit-card .bd::before { right: -2px; bottom: -2px; width: 0; height: 2px; }
  .visit-card .bd::after { left: -2px; bottom: -2px; width: 2px; height: 0; }
  .visit-card:hover::before { width: calc(100% + 2px); }
  .visit-card:hover::after { height: calc(100% + 2px); }
  .visit-card:hover .bd::before { width: calc(100% + 2px); }
  .visit-card:hover .bd::after { height: calc(100% + 2px); }
  .visit-card:hover .bd { background: rgba(0,0,0,.2); }
  .visit-card .card-desc, .visit-card .card-tit { transition: color var(--dur-ui-fast); }

  /* 데스크톱에서 숨길 모바일 전용 조각 */
  .pull-video, .pull-progress { display: none; }
}

/* ============================== 모바일 (990px↓) — UI 반응 0.2~0.3s (M2) ============================== */
@media (max-width: 990px) {
  /* 우하단 말풍선 위아래 흔들림 — 오산 GTX 말풍선과 같은 동작(2.2초 왕복) */
  .q-bubble.is-bob { animation: bubbleBob 2.2s ease-in-out infinite; }

  /* 커서류·플로팅·스플래시는 모바일 미노출.
     스플래시는 오산 원본 모바일에 없다(대표 지시 2026-08-27 #8).
     JS(defer)가 제거하기 전 한 프레임 번쩍이는 것까지 막으려면 CSS에서 먼저 끊어야 한다. */
  #cursorCircle, .sound-follow, .scroll-down, .floating-btns, .fb-popup-wrap, .scroll-induce,
  #introLoading { display: none; }

  /* 모바일 헤더 BGM 토글 (햄버거 오른쪽) */
  .bgm-toggle-mo {
    position: absolute; left: calc(4vw + 38px); top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: var(--radius-circle);
    border: 1px solid rgba(255,255,255,.45);
    color: #fff;
  }
  .bgm-toggle-mo.on { animation: pulseRing 2s infinite; }

  /* 메뉴 패널·햄버거 (실측: mega translateX 0.3s ease · menu_btn div 0.2s ease) */
  .mega { transition: transform var(--dur-ui) ease; }
  .site-header .menu-btn span { transition: transform var(--dur-ui-fast) ease, opacity var(--dur-ui-fast) ease; }
  /* 실측: header .menu_btn:hover scale(1.2) · header .number:hover scale(1.05) (0.2s) */
  .site-header .menu-btn { transition: transform var(--dur-ui-fast) ease; }
  .site-header .menu-btn:hover { transform: translateY(-50%) scale(1.2); }
  .site-header .tel { transition: transform var(--dur-ui-fast); }
  .site-header .tel:hover { transform: scale(1.05); }

  /* 퀵버튼 반응 (실측 hover scale 1.05 · 0.2s) */
  .mo-quick .q-btns a, .mo-quick .q-btns button, .mo-quick .q-banner a { transition: transform var(--dur-ui-fast); }
  .mo-quick .q-btns a:active, .mo-quick .q-btns button:active, .mo-quick .q-banner a:active { transform: scale(.96); }
  .mo-quick .q-btns a:hover, .mo-quick .q-btns button:hover { transform: scale(1.05); }
  #scrollTopBtn { transition: transform var(--dur-ui-fast); }
  #scrollTopBtn:active { transform: scale(.92); }

  /* 폼 포커스 (실측: background .3s, border .3s) */
  .mo-form input, .mo-form textarea { transition: background var(--dur-ui), border var(--dur-ui); }
  .mo-form input:focus, .mo-form textarea:focus { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.7); }

  /* ---------- 당겨보세요 풀 배너 (실측 0.38s cubic-bezier(0.25,0.46,0.45,0.94)) ---------- */
  .pull-banner { cursor: grab; }
  .pull-banner.grabbing { cursor: grabbing; }
  .pull-banner .pull-text, .pull-banner .pull-badge { transition: opacity 0.25s; }
  .pull-banner .pull-arrow { animation: pullArrow 1.4s ease-in-out infinite; transition: opacity var(--dur-ui-fast); }
  .pull-banner .hidden { opacity: 0; pointer-events: none; }
  .pull-banner .pull-arrow.hidden { animation: none; }
  /* 미리보기는 배경(.pull-thumb 안 루프 영상)이 맡는다.
     이 레이어는 '당겼을 때 덮는 전체 영상'이라 평소엔 완전히 숨긴다. */
  .pull-banner .pull-video {
    position: absolute; inset: 0;
    background: #000;
    transform: translateX(100%);
    transition: transform 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 16px;
    overflow: hidden;
    z-index: 4;
  }
  .pull-banner .pull-video.open { transform: translateX(0); }
  .pull-banner .pull-media { display: block; width: 100%; height: 100%; object-fit: cover; }
  .pull-banner .pull-video-ph {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    color: rgba(255,255,255,.6);
    font-size: var(--fs-14);
  }
  .pull-banner .pull-controls {
    position: absolute; top: var(--sp-10); right: var(--sp-12);
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s 0.2s;
    z-index: 5;
  }
  .pull-banner .pull-video.open .pull-controls { opacity: 1; pointer-events: auto; }
  .pull-banner .pull-close {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(0,0,0,.45);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
  }
  .pull-banner .pull-progress {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--color-main3);
    border-radius: 0 2px 2px 0;
    opacity: 0;
    transition: opacity .1s;
    z-index: 6;
  }
  .pull-banner.dragging .pull-progress { opacity: 1; }
}

/* ============================== 히어로 렌즈플레어 (19번 — 영상 위·타이틀 아래·하늘 영역만) ============================== */
@keyframes flareIn    { from { opacity: 0; } to { opacity: 1; } }
@keyframes flareDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-3.2vw, 1.8vw, 0) scale(1.06); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
.hero-flare {
  position: absolute; inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  animation: flareIn .5s ease forwards;    /* 로드 즉시(포스터 단계 포함) 0→1 0.5s */
  /* 하늘 영역에만 — 아래로 갈수록 소멸해 건물을 덮지 않음 */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 56%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 56%);
  z-index: 1;                               /* 영상 위 · 타이틀(z2) 아래 */
}
.hero-flare .hf-drift { position: absolute; inset: 0; animation: flareDrift 16s ease-in-out infinite; }
.hero-flare i { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); }
.hero-flare .hf-sun {
  left: 72%; top: 38%;
  width: 24vw; height: 24vw;
  background: radial-gradient(circle, rgba(255,246,220,.85) 0%, rgba(255,220,160,.32) 32%, rgba(255,220,160,0) 68%);
}
.hero-flare .hf-streak {
  left: 72%; top: 38%;
  width: 40vw; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,240,200,0), rgba(255,244,214,.75), rgba(255,240,200,0));
}
.hero-flare .hf-ring { background: radial-gradient(circle, rgba(255,255,255,.28) 0%, rgba(255,255,255,.10) 55%, rgba(255,255,255,0) 70%); }
.hero-flare .hf-r1 { left: 66%; top: 46%; width: 4.5vw; height: 4.5vw; }
.hero-flare .hf-r2 { left: 61%; top: 52%; width: 2vw;   height: 2vw; }
.hero-flare .hf-r3 { left: 78%; top: 30%; width: 6.5vw; height: 6.5vw; }

@media (max-width: 990px) {
  /* 하늘이 밝아(평균 207/255) screen 블렌드로 흰 빛만 얹으면 거의 안 보인다(SSIM 0.993 실측).
     코어를 키워 순백에 가깝게 올리고, 색이 있는 고스트를 함께 흘려 실제 렌즈플레어처럼 보이게 한다.
     마스크는 하늘 영역까지만 — 건물 위로 내려오면 지저분해진다. */
  .hero-flare { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 62%); mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 62%); }
  .hero-flare .hf-sun {
    left: 74%; top: 26%; width: 74vw; height: 74vw;
    background: radial-gradient(circle, rgba(255,255,255,.92) 0%, rgba(255,246,214,.42) 26%, rgba(255,232,180,.14) 48%, rgba(255,230,180,0) 70%);
  }
  .hero-flare .hf-streak { left: 74%; top: 26%; width: 128vw; height: 3px;
    background: linear-gradient(90deg, rgba(255,240,200,0), rgba(255,252,238,.85) 46%, rgba(255,214,150,.5) 58%, rgba(255,240,200,0)); }
  .hero-flare .hf-r1 { left: 60%; top: 38%; width: 11vw; height: 11vw; }
  .hero-flare .hf-r2 { left: 50%; top: 46%; width: 6vw;  height: 6vw; }
  .hero-flare .hf-r3 { left: 86%; top: 17%; width: 17vw; height: 17vw; }

  /* 색 고스트 — 해에서 화면 반대편으로 늘어서는 실제 플레어의 그 조각들 */
  .hero-flare .hf-ghost { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); }
  .hero-flare .hf-g1 { left: 44%; top: 50%; width: 26vw; height: 26vw;
    background: radial-gradient(circle, rgba(255,168,104,.30) 0%, rgba(255,168,104,.10) 52%, rgba(255,168,104,0) 72%); }
  .hero-flare .hf-g2 { left: 30%; top: 58%; width: 15vw; height: 15vw;
    background: radial-gradient(circle, rgba(255,132,176,.26) 0%, rgba(255,132,176,.08) 55%, rgba(255,132,176,0) 74%); }
  .hero-flare .hf-g3 { left: 62%; top: 33%; width: 9vw; height: 9vw;
    background: radial-gradient(circle, rgba(150,220,255,.34) 0%, rgba(150,220,255,.10) 55%, rgba(150,220,255,0) 74%); }
}

/* ============================== 모션 축소 대응 (기준서 견고성 — 의도적 차이) ============================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  html, .fp { scroll-behavior: auto !important; }
  #introLoading { display: none !important; }
  .hero-flare { opacity: 1 !important; }   /* 드리프트·페이드만 정지, 정적 플레어 유지(19e) */
  /* 등장 애니메이션의 초기 숨김 상태 해제 */
  .sec-main .main-title, .sec-main .main-wordmark,
  .loc-image, .loc-text, .comm-tit p, .comm-thumbs, .comm-caption,
  .unit-left, .unit-right, .visit-card { opacity: 1 !important; transform: none !important; }
  .loc-desc { transform: none !important; }
  .comm-display { letter-spacing: 5px !important; transform: none !important; }
  .loc-lines .line-h { transform: scaleX(1) !important; }
  .loc-lines .line-v { height: 100% !important; }
  .info-line { transform: scaleX(1) !important; }
}