@charset "utf-8";

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}


@font-face {
    font-family: 'GangwonSpecialSelfGoverningProvince';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/GangwonState.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

.font {font-family: 'GangwonSpecialSelfGoverningProvince';}

body {margin:0;padding:0;font-size:0.75em;font-family:'Paperozi', dotum, sans-serif !important;background:#fff}
*, *::before, *::after { box-sizing: border-box; }

/* ① 페이지 전체 기본: 한글 단어 기준 줄바꿈 */
:lang(ko) {
  word-break: keep-all;        /* 한글을 글자 단위로 쪼개지 않음 */
  line-break: loose;           /* CJK 줄바꿈 규칙을 느슨하게(자연스럽게) */
}

/* ② 긴 토큰(URL/이메일/긴영단어)만 필요 시 줄바꿈 허용 */
:lang(ko) p, :lang(ko) li, :lang(ko) a, :lang(ko) span,
:lang(ko) h1, :lang(ko) h2, :lang(ko) h3, :lang(ko) h4, :lang(ko) h5, :lang(ko) h6,
:lang(ko) th, :lang(ko) td, :lang(ko) blockquote {
  overflow-wrap: break-word;   /* 너무 긴 단어는 박스 안에서 적절히 끊음 */
}

/* ③ 예외: 코드/프리 텍스트 영역은 원형 유지 */
pre, code, kbd, samp {
  word-break: normal !important;
  overflow-wrap: normal !important;
  white-space: pre; /* 개행/공백 유지 */
}

/* ④ 표는 넘침 방지(필요 시) */
.table { table-layout: fixed; }
.table th, .table td {
  word-break: break-word;      /* 셀 안에서만 긴 토큰 강제 줄바꿈 */
  overflow-wrap: anywhere;
}

/* 유틸: 특정 요소만 어디서든 강제 줄바꿈하고 싶을 때 */
.u-anywhere { overflow-wrap: anywhere; word-break: break-word; }

/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:0px solid #e9e9e9;background:#fff}
.hd_pops img {max-width:100%}
.hd_pops_con {}
.hd_pops_footer {padding:0;background:#000;color:#fff;text-align:left;position:relative}
.hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""}
.hd_pops_footer button {padding:10px;border:0;color:#fff}
.hd_pops_footer .hd_pops_reject {background:#000;text-align:left}
.hd_pops_footer .hd_pops_close {background:#393939;position:absolute;top:0;right:0}

.wrap {padding:150px 0 150px 0}

/* 항상 맨 위에 고정 + 겹침 이슈 방지 */
.main-header.fixed-top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1050;
}

/* 플러그인의 이동/숨김 효과 무력화 */
.main-header.mh-sticky,
.main-header.mh-pinned,
.main-header.mh-unpinned {
  transform: none !important;
  will-change: auto !important;
  transition: background-color .3s ease, box-shadow .3s ease !important;
}

/* 기본 투명 */
.main-header {
  transition: background-color 0.3s ease,
              box-shadow 0.3s ease,
              padding 0.3s ease;
  background-color: transparent;
  box-shadow: none;

}

.main-header.scrolled.py-5{
  background-color: rgba(0,0,0,.9) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0) !important;
  padding-top: 1rem !important;   /* py-3 → 1rem */
  padding-bottom: 1rem !important;
}

/* ① 헤더 자체에선 스크롤을 통과시키고, 실제 클릭 가능한 요소만 활성화 */
.main-header { pointer-events: none; }
.main-header .logo,
.main-header .main-nav-menu,
.main-header .off-menu-btn { pointer-events: auto; }

/* 스크롤 시 헤더 축소(이미 갖고 있는 .scrolled 상태라면 높이 ↓) */
.main-header.py-5 { transition: padding .25s ease; }
.main-header.scrolled.py-5 { padding-top: 1rem !important; padding-bottom: 1rem !important; }

/* ② 드롭다운은 기본 '완전 비표시' + 포커스/호버 때만 표시 & 이벤트 활성화 */
.main-nav-menu .sub-menu-wrap{
  display: none;           /* 중요: visibility/opacity 말고 display */
  pointer-events: none;    /* 보일 때만 이벤트 허용 */
  top: 100%; left: 0;
  z-index: 2000;
}
.main-nav-menu li:hover > .sub-menu-wrap,
.main-nav-menu li:focus-within > .sub-menu-wrap{
  display: block;
  pointer-events: auto;
}

/* ③ 오프캔버스: 닫혀 있을 땐 완전히 무력화(이벤트 차단) */
.offcanvas:not(.show){
  visibility: hidden;          /* 부트스트랩 기본 보강 */
  pointer-events: none !important;
}
.offcanvas-backdrop:not(.show){
  opacity: 0;
  pointer-events: none !important;
}

/* ④ 혹시 메뉴 하위 링크 줄바꿈로 인해 높이가 과도해지면 히트박스 최소화 */
.main-nav-menu .nav-link.depth1 { line-height: 1.2; padding: .5rem .75rem; }

/* ⑤ 헤더가 스크롤을 가리지 않게, 메인(인덱스) 상단에 안전 여백 확보 */
#index main, body._INDEX main, body.index main {
  /* 인덱스에서 .wrap이 없을 수 있으니, 상단 여백을 안전하게 보강 */
  padding-top: clamp(84px, 10vh, 140px);
}


.textcenter {z-index:999;width:90%}
.textcenter h1 {font-size:80px;font-weight:600;letter-spacing:-1px}
.textcenter h2 {font-weight:300;letter-spacing:-1px}
.textcenter p {font-size:18px}

.nav-link {color:#fff !important;font-size:19px !important}
.logo {font-size:24px;font-weight:400;line-height:1.1;text-align:right}
.logo img {display:inline-block;max-width:30px;margin-right:8px;vertical-align:middle;margin-top:-3px}

/* 가운데 작은 사각형 구분자 */
.sep-square{
  /* 필요 시 조절 가능한 변수 */
  --sq-size: .15em;   /* 정사각형 한 변 크기 */
  --sq-shift: -.06em; /* 세로 보정(폰트에 따라 미세 조정) */

  display:inline-block;
  width: var(--sq-size);
  height: var(--sq-size);
  background: currentColor;  /* 글자색을 따라감 */
  vertical-align: middle;
  transform: translateY(var(--sq-shift));
  margin: 0 .18em;  /* 앞뒤 여백 */
}



/* h1/h2는 원문 공백을 그대로 표시 */
#floating-gallery .textcenter h1,
#floating-gallery .textcenter h2 {
  white-space: pre-wrap;
}

/* p: 페이드인 준비 */
#floating-gallery .textcenter p {
  opacity: 0;
  transform: translateY(10px);
}
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}
.fade-show { animation: fadeUp 1s cubic-bezier(.22,.61,.36,1) forwards; }

/* h1: 글자별 페이드인용 span */
.h1-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(.25em);
  transition: opacity .5s ease, transform .5s ease;
}
.h1-char.show {
  opacity: 1;
  transform: translateY(0);
}

/* h2: 타자 커서 */
.typewriter {
  display: inline-block;
  border-right: 0.1em solid rgba(255,255,255,.9);
  overflow: hidden;
  animation: caretBlink 1s step-end infinite;
}
@keyframes caretBlink { 50% { border-right-color: transparent; } }
.typed {
  border-right-color: transparent !important;
  animation: none !important;
}

/* 모션 최소화 존중 */
@media (prefers-reduced-motion: reduce) {
  .fade-show { animation: none; opacity: 1; transform: none; }
  .h1-char { opacity: 1; transform: none; transition: none; }
  .typewriter, .typed { animation: none; border-right-color: transparent; }
}


  /* 섹션 공통 */
#floating-gallery { width:100%; }

/* 좌/우 레인 영역 */
/* 레인: 좌/우 각각 30%만 사용 */
#floating-gallery .lane{
  position:absolute; top:0; bottom:0; width:30%;
  pointer-events:none;z-index:100;
}
#floating-gallery .lane.left { left:5%; }
#floating-gallery .lane.right{ right:5%; } /* 가운데 40% 자동으로 비워짐 */

#floating-gallery .float-item{
  position:absolute;
  left:var(--x, 50%);
  top:100%;
  width:var(--size, 10vw);
  transform:translateX(-50%) scale(var(--scale, 1));
  opacity:0; /* ← 처음엔 보이지 않게 */
  z-index: var(--z, 1000);
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.6));
  will-change: top, transform, opacity; /* ← opacity 추가 */

  /* 1) 아래→목표로 이동하면서 페이드인  2) 자리에선 둥둥 */
  animation:
    riseTop var(--riseDur, 1.2s) cubic-bezier(.22,.8,.26,.99) var(--delay, 0s) 1 forwards,
    floatY  var(--floatDur, 4s)   ease-in-out calc(var(--delay, 0s) + var(--riseDur, 1.2s)) infinite alternate;
}


/* 깊이에 따라 살짝 투명/선명 차이를 주고 싶다면 선택 */
#floating-gallery .lane { perspective: 800px; } /* 선택사항(시각적 감정만) */

/* 내부 래퍼(타원형/비네팅) */
#floating-gallery .float-item .inner{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50% / 50%;
  overflow: hidden;
  transform: translateZ(0);
}
#floating-gallery .float-item img{
  display:block; width:100%; height:100%; object-fit:cover;
  filter: brightness(var(--brightness, 0.95)) contrast(1.05);
}
#floating-gallery .float-item .inner::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: rgba(0,0,0, var(--shade, 0.2));
}
#floating-gallery .float-item .inner::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  box-shadow:
    inset 0 0 90px rgba(0,0,0,0.75),
    inset 0 0 160px rgba(0,0,0,0.55),
    inset 0 0 260px rgba(0,0,0,0.45);
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(0,0,0,0.00) 38%,
      rgba(0,0,0,0.22) 65%,
      rgba(0,0,0,0.40) 85%,
      rgba(0,0,0,0.55) 100%);
}

/* 1회 상승: 아래(100%) → 목표 위치(--topPct) */
@keyframes riseTop{
  0%   { top: 100%;                    opacity: 0; }
  40%  {                                opacity: .8; } /* 중간 지점쯤부터 서서히 */
  100% { top: var(--topPct, 50%);      opacity: 1; }
}


/* 자리 잡은 뒤 상하로 살짝 둥둥 */
@keyframes floatY{
  0%   { transform: translate(-50%, 0) scale(var(--scale, 1)); }
  100% { transform: translate(-50%, var(--bob, -12px)) scale(var(--scale, 1)); }
}


/* 섹션 하단 별 레이어 */
#floating-gallery .stars-layer{
  position:absolute;
  left:0; right:0; bottom:0;
  height:min(90vh, 1200px); /* 별이 깔릴 높이(하단 영역) */
  pointer-events:none;
  z-index: 1; /* 이미지 레이어(1000+) 뒤쪽에 깔림 */
  overflow:hidden;

  /* 위쪽으로 갈수록 사라지는 마스크 → '하단만' 별 */
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
  mask-image:         linear-gradient(to top, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
}

/* 개별 별 */
#floating-gallery .stars-layer .star{
  position:absolute;
  left: var(--x, 50%);      /* % */
  bottom: var(--y, 10%);    /* %: 레이어 내부 기준 */
  width: var(--s, 2px);
  height: var(--s, 2px);
  border-radius: 50%;
  opacity: 0;
  /* 중앙 밝고 가장자리 퍼지는 글로우 */
  background: radial-gradient(circle, rgba(255,255,255,1) 0%,
                                        rgba(255,255,255,0.75) 40%,
                                        rgba(255,255,255,0.0) 70%);
  box-shadow:
    0 0 6px rgba(255,255,255,.9),
    0 0 12px rgba(255,255,255,.35);

  /* 반짝임 */
  animation: twinkle var(--t, 5s) ease-in-out var(--d, 0s) infinite;
  will-change: transform, opacity;
  transform: translateZ(0) scale(1);
}

/* 트윙클: 밝기/크기 살짝 요동 */
@keyframes twinkle{
  0%, 100% { opacity: .15; transform: scale(.8); }
  45%      { opacity: 1;    transform: scale(1.35); }
  55%      { opacity: .85;  transform: scale(1.05); }
}


  /* 레이아웃 기본값 */
  .full-hero{
    width:100%;
    min-height:100vh; /* 가로 100%, 세로 100% 섹션 */
    display:grid;
    grid-template-columns: 1fr 1fr; /* 좌우 50% */
    position:relative;

  }

  /* 왼쪽: 배경 꽉 채우기 */
  .hero-left{
    position:relative;
    isolation:isolate; /* 자식 그림자/필터 독립 */
    background-image:url('../img/main-left-bg.jpg');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    display:grid;
    place-items:center; /* keyvisual 수평/수직 중앙 */
  }

  /* 키비주얼 이미지: 부드러운 곡선 + 그림자 */
  .keyvisual{
    max-width:min(48vw, 640px);
    width:78%;
    height:auto;
    border-radius:24px;             /* 부드러운 곡선 */
    box-shadow:
      0 18px 35px rgba(0,0,0,.28),
      0 2px 8px rgba(0,0,0,.18);    /* 자연스러운 그림자 */
    display:block;
  }

/* 0) hero-right는 아이템 정렬 기준을 item으로 (track 정렬 X) */
.hero-right{
  display:grid;
  align-items:center;
  justify-items:center;   /* ← 기존 justify-content 대신 */
}

/* 1) hero-content 패딩을 총폭 안에 포함 */
.hero-content{
  box-sizing:border-box;
  max-width:720px;
  width:100%;
  padding:35px;           /* 고정 패딩 OK */
}

  .hero-title{
    font-size:clamp(38px, 4.2vw, 65px);
    line-height:1.1;
    margin:0 0em;
    font-weight:800;
    letter-spacing:-0.02em;
	color:#380c60 !important;
  }

  .hero-subtitle{
    font-size:clamp(24px, 1.8vw, 43px);
    line-height:1.5;
    margin:0 0 1.25em;
	color:#380c60 !important;
  }

  .hero-meta{
    margin:0;
    padding:0;
  }
  .hero-meta .row{
    display:flex;
    align-items:start;
    padding:14px 0;
    border-top:1px solid rgba(0,0,0,.08);
	  margin-left: 0;
  margin-right: 0;
  }
  .hero-meta .row:first-child{ border-top:0; }

  .hero-meta dt{
    margin:0;
    font-weight:700;
    color:#222 !important;
    white-space:nowrap;
	font-size:24px;
  }
  .hero-meta dd{
    margin:0;
    color:#333 !important;
    line-height:1.6;
	font-size:21px;
  }

.hero-meta dd span {display:inline-block;border:1px solid #ddd;border-radius:20px;padding:15px;max-width:48%;margin-right:1%;margin-top:15px}
.hero-meta dd.sponsor {margin-top:0px}
.hero-meta dd.sponsor span {display:inline-block;border:1px solid #ddd;border-radius:20px;padding:15px;max-width:33%;margin-right:1%}
.hero-meta dd.sponsor span img {max-height:50px}
.hero-meta dd img {width:100%}

/* 스크린리더만 읽도록 숨김 */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* 버튼 row의 dd가 좌우 컬럼 전체를 가로지르도록 */
.hero-meta .row .full{ grid-column: 1 / -1; }

/* 꽉 차는 라운드 그라데이션 버튼 */
.btn-route{
  display:inline-flex; justify-content:center; align-items:center;
  width:100%; min-height:65px; padding:20px 20px;
  border-radius:20px; text-decoration:none; color:#fff; font-weight:700;
  letter-spacing:.02em;
  background:#3e0764; /* fallback */

  transition:transform .16s ease, box-shadow .2s ease, filter .2s ease;
}

.btn-route:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 28px rgba(62,7,100,.38), 0 4px 10px rgba(0,0,0,.2);
  filter:brightness(1.02);
}

.btn-route:active{ transform:translateY(0); filter:brightness(.98); }

.btn-route:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(62,7,100,.3),
    0 0 0 6px rgba(62,7,100,.2),
    0 12px 24px rgba(62,7,100,.35);
}

@media (max-width: 992px){
  .btn-route{ min-height:52px; border-radius:14px; }
}


  /* 접근성 대비(밝은 배경 가정 시) */
  @media (prefers-color-scheme: dark){
    .hero-subtitle{ color:#cfd3d8; }
    .hero-meta dt{ color:#fff; }
    .hero-meta dd{ color:#e6e8ea; }
    .hero-meta .row{ border-color: rgba(255,255,255,.12); }
  }

  /* 반응형: 모바일에서는 세로 스택 */
  @media (max-width: 992px){
    .full-hero{
      grid-template-columns: 1fr; /* 단일 컬럼 */
    }
    .hero-left{
      min-height: 48vh; /* 상단에 이미지 영역 */
    }
    .keyvisual{
      max-width:min(88vw, 560px);
      width:82%;
      border-radius:20px;
    }
    .hero-content{

      max-width: 900px;
      margin: 0 auto;
    }
    .hero-meta .row{
      grid-template-columns: 90px 1fr;
      gap:10px 14px;
    }
  }

/* 레이아웃 */
.feature-section {
  width: 100%;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0; /* 카드가 ‘꽉 차게’ 이어지도록 간격 0 */
}


/* 배경 톤: 가운데 가장 진함, 왼쪽 중간, 오른쪽 가장 연함 */
.tone-left   { background: #eef1f5; }  /* 중간 */
.tone-center { background: #e5e9ef; }  /* 진함 */
.tone-right  { background: #f6f8fb; }  /* 연함 */

/* 경계가 더 자연스럽도록 아주 미세한 섀도우 */
.feature + .feature {
  box-shadow: inset 1px 0 0 rgba(0,0,0,.035);
}

/* 반응형: 모바일에서 1열로 (≤600px) */
@media (max-width: 600px) {

.hd_pops {position:absolute;border:0px solid #e9e9e9;background:#fff;max-width:100% !important;width:100% !important;height:auto !important;top:0px !important;left:0px !important}
.hd_pops img {max-width:100% !important;width:100% !important;height:auto !important}
.hd_pops_con {max-width:100% !important;width:100% !important;height:auto !important}


  .feature-grid {
    grid-template-columns: 1fr;
  }
  .feature + .feature {
    box-shadow: inset 0 1px 0 rgba(0,0,0,.035);
  }
}

/* 접근성: 포커스 표시 */
.feature-btn:focus-visible {
  outline: 2px solid #3e0764;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(62,7,100,.15);
}

.feature {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 우측 아이콘 공간 확보 */
  padding: clamp(16px, 3vw, 45px);
  min-height: 250px;
}

/* 좌측 아이콘 */
.feature-icon {
  flex: 0 0 auto;
  width: 60px;

  margin-right: clamp(12px, 2.5vw, 50px);
  display: grid;
  place-items: center;
}
.feature-icon img {
  max-width: 100%;
  max-height: 100%;
}

/* 가운데 텍스트 */
.feature-body {
  flex: 1 1 auto; /* 중앙 영역이 자연스럽게 늘어남 */
  display: flex;
  flex-direction: column;
  gap: 6px;
  letter-spacing:-0.2px;
}
.feature-title {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 500;
  color: #1f2328;
}
.feature-subtitle {
  margin: 0;
  font-size: clamp(14px, 1.9vw, 16px);
  color: #4f5864;
  line-height: 1.2;
}

/* 우측 화살표 */
.feature-arrow {
  flex: 0 0 auto;
  margin-left: 16px;
  font-size: 32px;  /* 크게 */
  color: #ccc;   /* 강조 컬러 */
  display: flex;
  align-items: center;
}
.feature-arrow i {
  display: inline-block;
}

.footer {padding:80px 0}

/* 기존 버튼 제거했으니 삭제 가능 */

.footer-text span {
  margin-bottom: 4px;
  font-size: 15px;
}

.footer-logo {border: 1px solid rgba(255,255,255,.4);border-radius:20px;padding:15px}

.footer-logo img {
  max-height: 50px; /* 로고 크기 조절 */
  height: auto;
}

.footer-title {font-size:19px !important;font-weight:600}
.footer-copy {font-size:13px}


/* 섹션 크기 & 배경 */
.memorial-hero{
  position: relative;
  width: 100%;
  min-height: 40vh;
  color: #fff;
  overflow: hidden;
  background: #000; /* 기본 배경은 검정 */
}

.memorial-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  /* 반원형 보라색 → 검정 그라데이션 */
  background: radial-gradient(
    ellipse at center bottom,
    #380c60 0%,
    #190020 40%,
    #000 80%
  );
}


/* 별 레이어 컨테이너 */
.skyfield{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.twinkles{
  position: absolute;
  inset: 0;
}

/* 중앙 정렬 래퍼 */
.hero-center{
  position: relative;
  z-index: 2;
  height: 40vh;
  max-width: 1100px;
  margin: 0 auto;
  padding: 54px 18px 0 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* 수직 중앙 */
  align-items: center;       /* 수평 중앙 */
  text-align: center;
}

/* 제목/부제목 */
.title-kr{
  margin: 0 0 0px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-size: clamp(28px, 5vw, 56px);
}
.title-kr br {display:none}
.subtitle-kr{
  margin: 0 0 18px;
  font-size: clamp(14px, 2.2vw, 40px);
  opacity: 1;
}

/* 가운데점 대체(폰트 무관 고정 정사각형) */
.dot-sep{
  display: inline-block;
  width: 0.24em;
  height: 0.24em;
  margin: 0 .2em;
  transform: translateY(-0.2em);
  background: currentColor;
  border-radius: 0px;
}

/* 메타 정보 */
.info-list{
  margin: 6px 0 0;
  display: inline-block;
  text-align: left; /* 블록은 가운데, 내부 텍스트는 좌측 */
  font-size: clamp(14px, 2.1vw, 18px);
}
.info-row{
  display: grid;
  grid-template-columns: auto auto;
  gap: 8px 14px;
  align-items: baseline;
  margin: 6px 0;
}
.info-list dt{
  font-weight: 700;
  white-space: nowrap;
}
.info-list dd{
  margin: 0;
  opacity: .95;
}

/* 별(개별) */
.starlet{
  --x: 50%;
  --y: 50%;
  --sz: 2px;
  --dur: 5s;
  --delay: 0s;

  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--sz);
  height: var(--sz);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #dbe6ff 45%, rgba(255,255,255,0) 70%);
  box-shadow:
    0 0 calc(var(--sz) * 2) rgba(255,255,255,0.85),
    0 0 calc(var(--sz) * 4) rgba(188,208,255,0.55);
  transform: translate(-50%, -50%);
  opacity: .85;
  animation: twinkle-alt var(--dur) ease-in-out infinite;
  animation-delay: var(--delay);
}

@keyframes twinkle-alt{
  0%, 100% { opacity: .28; transform: translate(-50%, -50%) scale(.9); filter: drop-shadow(0 0 1px rgba(255,255,255,.4)); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.35); filter: drop-shadow(0 0 6px rgba(255,255,255,.9)); }
}

/* 1) 왼쪽 이미지를 왼쪽에 붙이고 오른쪽을 비워두기 */
.kv-visual{
  display: flex;
  justify-content: flex-start;       /* 왼쪽 정렬 */
  align-items: center;
  

}
.kv-visual img{
  width: auto;
  max-width: var(--kv-img-max);      /* 이미지 최대폭 제한 → 오른쪽이 자연스레 비어 보임 */
  height: auto;
  /* 2) 자연스러운 그림자 (투명 PNG에도 자연스러움) */
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.22))
          drop-shadow(0 6px 10px rgba(0,0,0,.14));
  /* 이미지 자체 모서리도 살짝 부드럽게 */
  border-radius: 12px;
}


/* 3) 주최/주관 로고: 배너(필) 형태, 둥근 테두리 + 동일 높이 정렬 */
/* 공통: 리스트 초기화 + flex 정렬 */
.kv-logos{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0;
  margin: .5rem 0 0;
  list-style: none;
}

.kv-logos{
  display: flex;
  justify-content: space-between; /* 양쪽 끝 + 사이 간격 자동 */
  flex-wrap: wrap;
  padding: 0;
  margin: .5rem 0 0;
  list-style: none;
  gap: 0; /* gap은 쓰지 않고 직접 width로 제어 */
}

.kv-logos li{
  flex: 0 0 49%;   /* 각 li 너비 48% */
  max-width: 49%;
  display: flex;
  align-items: center;
  justify-content: center;
    /* 배너(필) 모양 */
  border: 1px solid rgba(0,0,0,.08);
  background: linear-gradient(180deg, #fff, #fff);
  border-radius: 20px;
  padding: 15px 25px;
  min-height: 46px;                  /* 같은 높이 느낌을 위한 최소 높이 */

}

.kv-logos li img{
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* kv-logos--sub 전용: inline-block 나열 */
.kv-logos.kv-logos--sub {
  display: block;          /* 부모는 block */
  padding: 0;
  margin: .5rem 0 0;
  list-style: none;
  text-align: left;        /* 필요시 left/center 조정 */
}

.kv-logos.kv-logos--sub li {
  display: inline-block;   /* 나란히 배치 */
  vertical-align: middle;
  margin-right: .5rem;     /* 간격 (원하시면 조정) */
}

.kv-logos.kv-logos--sub li:last-child {
  margin-right: 0;
}

.kv-logos.kv-logos--sub img {
  height: 46px;            /* 서브 로고 크기 통일 */
  width: auto;
  object-fit: contain;
}

.kv-info {margin-left:50px}

/* ===== KV Hero (new classes) ===== */
.kv-title{
	color:#380c60;
  line-height: 1;
  margin: 0 0 .9rem;
  /* 가변 제목 크기 */
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 4rem);
  letter-spacing:-1px;
}
.kv-subtitle{
	color:#380c60;
  margin: 0;
  opacity: 1;
  font-size: clamp(2.2rem, .9rem + .6vw, 1.125rem);
  letter-spacing:-1px;
}

.kv-meta {margin-top:70px}

/* kv-meta: 모든 화면에서 세로 나열 */
.kv-meta .kv-row{
  display: flex;
  flex-direction: column;   /* dt → dd 순서 세로 배치 */
  padding: .9rem 0;
  border-top: 1px solid rgba(0,0,0,.08);
}

.kv-meta .kv-row:first-child{ border-top: 0; }

.kv-meta dt{
  font-weight: 600;
  margin-bottom: .25rem;
  font-size:24px;
}
.kv-meta dd{
  margin: 0;
  color: #555;
  font-size:21px;
}


/* 가운데점 대체: 아주 작은 정사각형 */
.dot-sq{
  display: inline-block;
  width: .2em;
  height: .2em;
  background: currentColor;
  opacity: 1;
  margin: 0 .1em .08em;
  border-radius: 2px; /* 살짝 둥글게 */
  vertical-align: middle;
}

/* 좌측 비주얼 */
.kv-visual img{
  display: block;
  width: 100%;
  height: auto;
}



#container_title {display:block;text-align:center;padding:0 0 60px 0}
#container_title span {font-size:3rem;color:#111}
#container_title p {font-size:18px;color:#555;display:block;margin-top:15px}

/* ===== 장소 카드 섹션 ===== */
.places-section { width: 100%;margin-top:150px }

.place-section-title {text-align:center;letter-spacing:-1px;margin-bottom:50px}
.place-section-title .place-title-top {font-size:2.5rem}
.place-section-title span {font-size:2.7rem;font-weight:600;color:#380c60}

.places-section .date {display:block;margin-bottom:10px;font-size:24px;color:#380c60;font-weight:600}

/* 카드 */
.place-card{
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 16px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.place-title{
  margin: 0;
  font-weight: 600;
  font-size: clamp(1.125rem, .9rem + .8vw, 1.5rem);
}
.place-title p {display:block;font-size:2.5rem}

/* 이미지: 고정 비율 + 라운드 + 그림자 */
.place-figure{
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 16 / 9;            /* 비율 고정 */
  background: #f3f4f6;
}
.place-figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.12));
}

/* 주소/전화 */
.place-address{
  margin: 0;
  font-style: normal;
  color: #444;
  line-height: 1.6;
  font-size:18px;
}
.place-tel{
  color: #222;
  text-decoration: none;
	font-size:16px;
}
.place-tel:hover{ opacity: .85; }

/* 버튼: 섹션 좌우 스타일과 통일(보라 그라데이션, pill) */
.place-actions{ margin-top: .25rem; }
.place-mapbtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .7rem 1.05rem;
  border-radius:10px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background-image: linear-gradient(135deg, #3e0764 0%, #2b0649 50%, #1b0331 100%);
  transition: transform .15s ease, box-shadow .2s ease, opacity .15s ease;
}
.place-mapbtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(62,7,100,.33);
  color: #fff;
}

/* 다크 배경 페이지 대비 (선택) */
body.bg-dark .place-card{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 16px 42px rgba(0,0,0,.3);
}
body.bg-dark .place-address{ color: rgba(255,255,255,.9); }

.menu-icon {
  display: inline-block;
  position: relative;   /* ✅ 자신 기준으로 막대 위치 */
  width:65px;          /* 전체 길이(길게) */
  height: 18px;         /* 전체 높이(간격 좁게) */
  line-height: 0;       /* 라인박스 영향 제거 */
}

/* 위/아래 줄 */
.menu-icon::before,
.menu-icon::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;                 /* 얇은 두께 */
  background: #fff;    /* 글자색 상속 */
  border-radius: 1px;
}
.menu-icon::before { top: 0; }     /* 첫 줄 */
.menu-icon::after  { bottom: 0; }  /* 세 번째 줄 */

/* 가운데 줄 */
.menu-icon .mid {
  position: absolute;
  left: 0; right: 0;
  top: 8px;                 /* 간격 좁게(0, 8, 16px) */
  height: 2px;
  background: #fff;
  border-radius: 1px;
}


/* 데스크톱에서 dt/dd 2열 배치 */
@media (min-width: 992px){
  .kv-meta .kv-row{
    grid-template-columns: minmax(240px, 42%) 1fr;
    align-items: start;
  }
}

/* 모션 최소화 */
@media (prefers-reduced-motion: reduce){
  .starlet{ animation: none; opacity: .7; }
}

.message-section {
  position: relative;
  width: 100%;
  min-height: 100dvh; /* iOS 주소창 변동 대응 */
  -webkit-overflow-scrolling: touch; /* iOS 모멘텀 스크롤 */
  background: url('../img/messagebg.jpg') no-repeat center center;
  background-size: cover; /* 가로세로 100% 채우기 */
  display: flex;
  align-items: center;  /* 수직 중앙 */
  justify-content: center; /* 수평 중앙 */
  flex-direction: column;
  padding:150px 0 0 0;
}

.message-section,
.message-section * {
  pointer-events: auto;
}

.message-cont {width:100%}
.message-content {
  text-align: center;
  color: #fff; /* 배경 대비용 */
}

.message-title {
  font-size: 3rem;
  margin-bottom: 1rem;
  color:#111;
}

.message-subtitle {
  font-size: 1rem;
  margin-bottom: 2rem;
  color:#555;
}

.btn-message {
  display: inline-block;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  background: #3e0764;
  color: #fff;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.3s ease;
}

.btn-message:hover {
  background: #5a0c8c;
}

.message-cont .container {margin-top:100px}

  /* 반응형: 모바일에서 개수/크기 살짝 조정 */
  @media (max-width: 600px){
  .message-section {
  position: relative;
  width: 100%;
  min-height: 50vh; /* 화면 높이 100% */
  background: url('../img/messagebg.jpg') no-repeat center center;
  background-size: cover; /* 가로세로 100% 채우기 */
  display: flex;
  align-items: center;  /* 수직 중앙 */
  justify-content: center; /* 수평 중앙 */
  flex-direction: column;
  padding:50px 0 0 0;
}

.message-content {
  text-align: center;
  color: #fff; /* 배경 대비용 */
}

.message-title {
  font-size: 2rem;
  margin-bottom: 1rem;
  color:#111;
}

.message-subtitle {
  font-size: 0.8rem;
  margin-bottom: 2rem;
  color:#555;
}

 .feature-subtitle br {display:none}

    #floating-gallery .float-item{ width:var(--size, 18vw); }
	.main-header.py-5{
		 padding:15px 0 !important;
		}

	.logo {font-size:19px;font-weight:400;line-height:1.1;text-align:right}
	.logo img {display:inline-block;max-width:20px;margin-right:8px;vertical-align:middle;margin-top:-3px}
	.textcenter h1 {font-size:35px;font-weight:600}

	.textcenter h2 {font-weight:300;font-size:25px}
	.textcenter p {font-size:14px}
	.textcenter p br {display:none}

		 /* 전체 톤 + 스케일(애니메이션 scale 변수) */
	  #floating-gallery{
		--brightness: 1.10;  /* 살짝만 밝게 유지 */
		--shade: .06;        /* 어둡게 덮는 막 얕게 */
		--scale: .35;        /* ✅ 전체 스케일 다운 */
	  }

	 /* 섹션 자체가 위쪽에 딱 붙도록(상단 여백 제거) */
  #floating-gallery{
    padding-top: 0;
    margin-top: 0;
    --lane-gap: 10vh;     /* ← 레인 사이 간격: 필요 시 8~14vh로 조절 */
  }

  /* 레인 세로 스택 + 높이/여백 */
  #floating-gallery .lane{
    position: relative;
    top:auto; bottom:auto; left:auto; right:auto;
    width:100%;
    height: 44vh;         /* 각 레인 높이 (42~50vh 사이에서 조절) */
    margin: 0;            /* 기본 여백 제거 */
  }

  /* 첫 번째 레인(= left)이 맨 위에 딱 붙도록 */
  #floating-gallery .lane.left{
    margin-top: 0 !important;
  }

  /* 두 번째 레인(= right)만 위쪽 간격 부여 */
  #floating-gallery .lane.left + .lane.right{
    margin-top: var(--lane-gap);
  }

  /* 혹시 DOM 순서가 바뀔 때를 대비한 예비 규칙 */
  #floating-gallery .lane + .lane{
    margin-top: var(--lane-gap);
  }

	  /* ✅ 아이템 폭 축소: 너무 커지지 않도록 상한/하한 고정 */
	  /* 예) 최소 88px ~ 보통 28vw ~ 최대 150px */
	  #floating-gallery .float-item{
		width: clamp(88px, 28vw, 150px);
	  }

	  /* (선택) 오른쪽 레인은 더 작게 보고 싶다면 */
	 #floating-gallery .lane.right .float-item{ width: clamp(80px, 26vw, 140px); } 

	.hero-left {padding:50px 0}

	/* 2) 부트스트랩 .row의 음수 마진/거터 무력화 + 래핑 허용 */
.hero-meta .row{
  display:flex;
  flex-wrap:wrap;                 /* 한 줄 꽉 차면 다음 줄로 */
  gap:8px 16px;                   /* 거터를 gap으로 대체 */
  margin-left:0 !important;
  margin-right:0 !important;
  --bs-gutter-x: 0;               /* 부트스트랩 거터 변수도 0으로 */
}

/* 3) dt는 줄바꿈 허용, dd는 줄어들 수 있게 */
.hero-meta dt{
  white-space: normal;            /* ← nowrap 제거 (중요) */
  word-break: keep-all;           /* 한글 단어 기준 줄바꿈 */
  text-wrap: balance;             /* 제목 줄바꿈 균형(지원 브라우저) */
  flex: 0 1 18ch;
  font-size:18px;/* 대략 18자 폭을 기준으로 줄바꿈 */
}

.hero-meta dd{
  flex: 1 1 260px;                /* 남는 공간 차지, 필요하면 새 줄 */
  min-width: 0;       
  font-size:18px;/* ← flex 오버플로 방지 (중요) */
}

/* 4) 주최/주관 로고 영역: 넘침 방지 (d-flex가 붙어있음) */
.hero-meta dd.d-flex{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.hero-meta dd span{
  box-sizing:border-box;
  flex: 1 1 calc(50% - 8px);      /* 2열 기본 */
  max-width:none;                  /* max-width% 대신 flex 기준 사용 */
  padding:12px;                    /* 패딩이 폭에 포함되도록 */
}

 .feature{
    display: grid;
    grid-template-columns: 1fr auto minmax(0, 72vw) 1fr; /* 72vw 내에서 제목 폭 확보 */
    align-items: center;
    column-gap: 0px;
    row-gap: 6px;
    padding: 35px;
    min-height: 0;
  }

  .feature-icon{
    grid-column: 2;
    width: 30px;              /* 필요시 36~44px 조절 */
    margin-right: 0;
    justify-self: end;
  }

  /* h3, p를 상위 그리드에 직접 배치 */
  .feature-body{ display: contents; }

  /* 제목: 한 줄 고정 + 말줄임 + 가운데 정렬 */
  .feature-title{
    grid-column: 3;
    margin: 0;
    min-width: 0;             /* 그리드에서 수축 허용(중요) */
    white-space: nowrap;      /* 한 줄 고정 */
    overflow: hidden;
    text-overflow: ellipsis;  /* 길면 … */
    text-align: center;       /* 아이콘 옆 텍스트도 가운데 */
    font-size: clamp(20px, 4vw, 18px);
  }

  /* 부제목: 다음 줄에서 전체 폭 사용 + 자연 줄바꿈 */
  .feature-subtitle{
    grid-column: 1 / -1;            /* 4열 전체 */
    margin-top: 4px;
    text-align: center;
    max-width: min(92vw, 680px);    /* 너무 길어지지 않게 */
    margin-inline: auto;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: keep-all;
    font-size: clamp(13px, 3.6vw, 14px);
    line-height: 1.5;
  }

  /* 화살표 숨김 */
  .feature-arrow{ display: none !important; }

  .footer .container {    flex-direction: column !important;}
  .footer {padding:50px 0;flex-direction: column;align-items: center}
  .footer-text {padding:0px 0;flex-direction: column;align-items: center}

  .footer-title {text-align:center}
  .footer-text span {font-size:13px;text-align:center}
  .offcanvas {background-color:#3e0764 !important;z-index:9999 !important}
  .offcanvas .btn-close {color:#fff !important;font-size:40px;--bs-btn-close-bg:none !important;opacity:1 !important}
  
  /* 내부 링크/아이콘도 흰색 계열로 */
  #offcanvas_menu a { color:#fff; font-size:30px !important;letter-spacing:-1px;font-weight:400 !important }


.hero-center{
  position: relative;
  z-index: 2;
  height: 50vh;
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 18px 0 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* 수직 중앙 */
  align-items: center;       /* 수평 중앙 */
  text-align: center;
}

/* 제목/부제목 */
.title-kr{
  margin: 0 0 0px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-size: clamp(28px, 5vw, 56px);
}
.title-kr br {display:block}
.subtitle-kr{
  margin: 0 0 18px;
  font-size: clamp(30px, 2.2vw, 40px);
  opacity: 1;
}

/* 가운데점 대체(폰트 무관 고정 정사각형) */
.dot-sep{
  display: inline-block;
  width: 0.24em;
  height: 0.24em;
  margin: 0 .2em;
  transform: translateY(-0.2em);
  background: currentColor;
  border-radius: 0px;
}

/* 메타 정보 */
.info-list{
  margin: 6px 0 0;
  display: inline-block;
  text-align: left; /* 블록은 가운데, 내부 텍스트는 좌측 */
  font-size: clamp(16px, 2.1vw, 18px);
}
.info-row{
  display: flex;
  grid-template-columns: auto auto;
  gap:0px;
  align-items: center;
  margin: 6px 0;
 flex-direction: column;
 align-content: center;
text-align:center;
}
.info-list dt{
  font-weight: 700;
  white-space: nowrap;
}
.info-list dd{
  margin: 0;
  opacity: .95;
}

.wrap {padding:50px 0}

#container_title {display:block;text-align:center;padding:0 0 20px 0}
#container_title span {font-size:2rem;color:#111}
#container_title p {font-size:14px;color:#555;display:block;margin-top:15px}

  /* 1) 순서 뒤집기: 이미지가 먼저, 정보가 나중 */
  .kv-hero .row > [class*="col-"].order-1 { order: 2 !important; } /* 기존 info(col)가 뒤로 */
  .kv-hero .row > [class*="col-"].order-2 { order: 1 !important; } /* 기존 visual(col)가 앞으로 */

  /* (대안) 최신 브라우저라면 :has() 사용도 가능
  .kv-hero .row > div:has(.kv-visual){ order:1 !important; }
  .kv-hero .row > div:has(.kv-info){   order:2 !important; }
  */

  /* 2) 키비주얼: 중앙 정렬 + 폭 제어 */
  .kv-visual{
    justify-content: center;         /* 모바일에선 중앙 배치 */
    margin-bottom: 16px;             /* 이미지와 텍스트 사이 간격 */
  }
  .kv-visual img{
    max-width: min(88vw, 560px);     /* 화면에 맞게 축소 */
    border-radius: 12px;
  }

  /* 3) 정보 영역: 좌 여백 제거 + 모바일 사이즈로 */
  .kv-info{
    margin-left: 0;     
	margin-top:50px;/* PC에서 주던 여백 제거 */
    text-align: center;              /* 제목/부제/메타 중앙 정렬(원치 않으면 빼세요) */
  }

  /* 4) 타이포 축소/정렬 */
  .kv-title{
    font-size: clamp(2.5rem, 6vw, 2rem);
    line-height: 1.15;
    margin-bottom: .65rem;
  }
  .kv-subtitle{
    font-size: clamp(2rem, 3.8vw, 1.125rem);
    margin: 0;
  }

  /* 5) 메타/로고 영역 여백·크기 축소 */
  .kv-meta{ margin-top: 28px; }
  .kv-meta .kv-row{ padding: .7rem 0; }
  .kv-meta dt{ font-size: 1.2rem; font-weight: 600; }
  .kv-meta dd{ font-size: 1rem; }

  .kv-logos{
    justify-content: center;
    gap: 8px 10px;                   /* 모바일에선 gap 사용 */
  }
  .kv-logos li{
    flex: 0 1 calc(50% - 10px);      /* 2열 배치 */
    padding: 10px 12px;
    border-radius: 14px;
    min-height: 40px;
  }
  .kv-logos.kv-logos--sub{ text-align: center; }
  .kv-logos.kv-logos--sub img{ height: 36px; }

  .places-section {margin-top:10px}
  .place-section-title {text-align:center;letter-spacing:-1px;margin-bottom:50px}
  .place-section-title .place-title-top {font-size:1.7rem}
  .place-section-title span {font-size:2rem;font-weight:600;color:#380c60}
  .places-section .date {font-size:18px}
  .place-title p {font-size:1.5rem}

   /* figure 아래 small을 박스로 만들고 폭 제한 */
  .place-figure + small{
    display: block;
    max-width: 100%;
    margin-top: 8px;
    font-size: 12px;
    color: #6c757d;

    /* 줄바꿈 강제 옵션들 */
    white-space: normal !important;   /* 혹시 상위에서 nowrap 물려받았을 때 대비 */
    overflow-wrap: anywhere;          /* 공백 없어도 임의 위치에서 줄바꿈 */
    word-break: break-word;           /* 보조용(사파리 등) */
  }

  /* 부모가 flex/grid인 경우 폭 수축 허용 */
  .place-figure,
  .place-figure + small{
    min-width: 0;
  }
  .place-mapbtn {display:block;text-align:center}

  }

  /* 사용자가 모션 축소를 선호하면 정지 */
  @media (prefers-reduced-motion: reduce){
    #floating-gallery .float-item{ animation:none !important; opacity:1; transform:translate3d(-50%, 50%, 0) scale(var(--scale,1)); }
  }