/* 웹 공통 인트로. 움직임은 intro.js가 프레임마다 직접 놓는다. 11/12 새 판 = 남색 가죽 바탕 · 금테 · 글로우 · 금빛 로고 */
#lp-intro { position: fixed; inset: 0; z-index: 2147483647; background: #fff; overflow: hidden;
  opacity: 1; transition: opacity .5s ease;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
#lp-intro.lp-out { opacity: 0; pointer-events: none; }

/* 11/12 이나가 만든 남색 가죽 바탕(로고 그림과 같은 질감) · 카드로 줄 때부터 깔린다 */
#lp-bg { position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none;
  background: #0a1226 url(bg_navy.jpg?v=1112) center / cover no-repeat; }

.lp-tile { position: absolute; background: #111a2c; box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  will-change: transform, opacity; }
.lp-clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.lp-tile video, .lp-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 정지 그림이 영상처럼 살짝 움직이게 */
.lp-tile img { animation: lp-drift 6s ease-in-out infinite alternate; }
@keyframes lp-drift { from { transform: scale(1); } to { transform: scale(1.14) translateX(-2%); } }

/* 금테(11/12 이나 「사진들에 전부 금빛 테두리」 · 「움직이지 않는 금테」) — 안쪽 그림자 선 두 겹(바깥 진한 금 · 안쪽 밝은 금)
   🚨 마스크로 오린 그라데이션 테두리 + 도는 빛은 크롬에서 깜박였다(11/12 이나 「왜 깜박이냐」 · 테두리를 끄면 사라짐) → 쓰지 않는다 */
.lp-tile::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  box-shadow: inset 0 0 0 2px #b8893b, inset 0 0 0 3px rgba(251, 231, 176, .85), inset 0 0 6px 3px rgba(255, 220, 140, .25);
  opacity: var(--frame, 1); }
/* 글로우(11/12 이나 「글로우 효과만 나중에」) — 켜짐 정도는 JS가 .lp-glow opacity로 · 숨쉬기는 안쪽 ::after(80~100% · 천천히) */
.lp-glow { position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; }
.lp-glow::after { content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 10px 1px rgba(255, 214, 128, .55), 0 0 28px 4px rgba(233, 180, 90, .35);
  animation: lp-glow 3.6s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes lp-glow { from { opacity: .8; } to { opacity: 1; } }

/* 글자는 줄마다 가림막 안에서 아래에서 올라온다 */
.lp-type { position: absolute; z-index: 5; pointer-events: none; color: #111827; }
.lp-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; }
.lp-mask > span { display: inline-block; will-change: transform, opacity; }
#lp-headline { left: 6vw; bottom: 9vh; color: #fff; font-weight: 800; font-size: 5.4vw; line-height: 1.14;
  letter-spacing: -0.03em; text-shadow: 0 2px 28px rgba(0,0,0,.38); }
#lp-headline .lp-mask { display: block; }
/* 11/12 대표님 「컬러 로고 · 좀 크게」 → 협회 공식 컬러 로고(KPGA 초록 엠블럼 · KLPGA 홈페이지 SVG) · 2.6vw → 4.2vw(폰에서도 34px 이상) */
#lp-logos { display: flex !important; align-items: center; gap: 2vw; margin-bottom: 1.2vw; }
#lp-logos img { height: clamp(34px, 4.2vw, 84px); width: auto; filter: drop-shadow(0 2px 12px rgba(0,0,0,.4)); }
/* KPGA 글자 로고(11/12 이나 「초록 엠블럼 말고 글씨만」 → 대표님 ⑤ = 엠블럼 초록 글자 + 흰 테두리 빛 · 비교 그림 협회로고_원본/★KPGA_글자로고_비교2_초록.png)
   꽉 찬 글자라 KLPGA의 80% 높이 · 흰 빛은 정지 필터(움직이지 않음) */
#lp-logos img:first-child { height: clamp(27px, 3.4vw, 68px);
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 6px rgba(255, 255, 255, .8)); }
/* 남색 바탕 위라 연한 금빛 */
/* 폰에서 1.9vw = 8px라 안 보였다(11/12) → 최소 15px */
#lp-caption { left: 0; right: 0; text-align: center; font-weight: 600; font-size: max(2.25vw, 18px); /* 11/13 대표님 「조금만 크게 하자」 · 옛 max(1.9vw, 15px) */ letter-spacing: -0.02em; color: #e8d6ae; }
#lp-caption .lp-mask { margin: 0 .16em; }

/* 로고 장면(사진들 뒤 z 2 · 사진들이 솟구치며 드러난다) */
#lp-stage { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; overflow: hidden;
  /* 무대는 따로 묶인 층이라 아래 #lp-bg와는 섞이지 않는다 → 같은 가죽을 무대에도 깐다(같은 자리·같은 크기라 겹쳐도 티 안 남) */
  background: #0a1226 url(bg_navy.jpg?v=1112) center / cover no-repeat; }
#lp-stage .lp-frame { position: absolute; }
/* 띠(폰·4:3 창): 위 26% · 아래 15%를 곡선으로 흐려(11/12 이나 「위아래 패더 · 투명도 좀 더」 · 글자 22~70%라 L 꼭대기는 거의 진하게 · 키운 슬로건이 83%까지라 아래는 85%부터) 남색 가죽에 녹인다 · 슬로건(세로 76~84%)은 안 걸린다 · 움직이지 않는 마스크(깜박임 교훈 = 움직이는 마스크만 금지) */
#lp-stage .lp-frame.lp-band {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.3) 9%, rgba(0,0,0,.75) 17%, #000 26%, #000 85%, rgba(0,0,0,.55) 91%, rgba(0,0,0,.15) 96%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.3) 9%, rgba(0,0,0,.75) 17%, #000 26%, #000 85%, rgba(0,0,0,.55) 91%, rgba(0,0,0,.15) 96%, transparent 100%); }
/* 띠 바깥 = 영상 자신의 가죽(로고 그림 위 200줄을 위아래 뒤집어 이어 붙인 bg_band.jpg · 크기는 JS가 영상 폭에 맞춤)
   🚨 mix-blend-mode: lighten은 쓰지 않는다 — 실제 재생에서 영상 가죽의 밝은 점이 살아 띠가 더 밝고 거칠게 보였다(11/12 이나 「경계 심해졌다」 · 멈춘 스샷엔 안 보임) */
#lp-stage.lp-band-bg { background: #0b0f1c url(bg_band.jpg?v=1112n) center top / var(--band-w, 100%) auto repeat-y; }
#lp-stage video { width: 100%; height: 100%; display: block; }
#lp-stage .lp-still { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
#lp-stage .lp-word { position: absolute; opacity: 0; will-change: transform, opacity, filter;
  /* 오린 네모 가장자리만 살짝 흐려 바탕과 이음매가 안 보이게(글자는 가장자리에서 20px 안쪽) */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-composite: intersect; }