@charset "UTF-8";

/* ═══════════════════════════════════════════════════════════════
   common.css — 범용 유틸 클래스 + 공용 애니메이션(@keyframes)

   로드: theme/design/head.sub.php (<head> 안, reset.css 뒤 / 섹션 CSS 앞)

   style.css · header.css · footer.css 에 흩어져 있던 것을 통합했다.
   - 표시 제어: .pc / .mobile / .tablet / .hide / .show / .flowhid …
   - 배치 유틸: .absol / .rltv / .flexrow / .flexcol / .absol_cover / .back_img …
   - 텍스트 유틸: .noto / .bold / .medium / .thin / .txct / .white / .lh …
   - 마퀴·슬라이드 공용: .image_sd* / .slide_y* / .flow_sd* / .swiper*
   - @keyframes 39종 (ddm·blk·marquee·scaleOpa·shake·line-*·spin 등)

   ★ 섹션 전용 스타일은 여기 넣지 않는다 (css/style.css 등 각 섹션 CSS 로).
   ═══════════════════════════════════════════════════════════════ */

/* ══ 디자인 토큰 (:root) ══
   디자이너 텍스트본(포션의 참고사항 txt 등)에서 추린 폰트·컬러를 여기에 등록한다.
   ★ style.css 가 아니라 이 파일이다 — style.css 는 메인 페이지에서만 로드되므로
     거기 :root 를 두면 서브·게시판 페이지와 header.css/footer.css 에서 토큰이 미정의가 된다.
     common.css 는 head.sub.php 가 전 페이지에 싣는다.
   등록 절차는 portion 스킬 참조. Pretendard 는 광역 카스케이드라 토큰 불필요. */
:root {
  /* 안드로이드·삼성인터넷 「웹페이지 다크모드」 강제 변환 거부 — 시안은 밝은 화면 기준(head.sub.php 의 color-scheme 메타와 같은 선언) */
  color-scheme: only light;
  --color-point: #06a2db;
  --color-pale-blue: #e8f8fc;
  --color-navy: #072346;
  --transition-ui: 0.28s;
  --transition-panel: 0.35s;
  --ease-ui: cubic-bezier(0.22, 1, 0.36, 1);
  --light-cool: 6, 162, 219;
  --light-ice: 160, 238, 255;
  --plate-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Crect width='1' height='1' fill='%23fff'/%3E%3C/svg%3E");
  /* --plate-white ← 「웹페이지 다크모드」(강제 변환)에서도 안 뒤집히는 흰 판. 강제 다크는 background-color·CSS 그라데이션은 뒤집지만 SVG 배경 이미지는 그대로 둔다.
     밝은 바탕 위 어두운 로고 뒤에 깔면(.header_logo) 바탕이 어두워져도 로고가 읽힌다. 밝은 화면에선 흰 바탕 위라 안 보인다.
     ※ 안드로이드 크롬은 color-scheme 선언으로 막히지만 삼성 인터넷은 선언을 무시한다는 보고가 있어, 뒤집혀도 읽히게 한 보강이다. */
  /* --light-cool / --light-ice ← 전역 커서 광원 RGB 3값 (rgba(var(--light-cool), 알파) 로 사용).
     cool = 밝은 바탕의 포인트색 빛, ice = 어두운 바탕·흰 글자의 얼음빛. 재질은 파일 끝 「전역 커서 광원」. */
  /* --color-point  ← 브랜드 포인트색.
     헤더 메뉴 호버(.header_menu_1:hover) · 퀵바 문의하기 버튼 배경(.quick_submit_div)
     · 퀵바 전화번호(.quick_call) 가 이 토큰을 쓴다.
     ★ 비워두면 조용히 깨진다 — CSS 변수는 미정의 시 선언 자체가 무효가 되어
       background-color 가 초기값 transparent 로 떨어지고, 흰 글자라 버튼이 안 보인다.
       (이미지 미비는 깨진 아이콘으로 보이지만 색 토큰은 아무 표시가 없다) */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-ui: 0s;
    --transition-panel: 0s;
  }
}

.flowhid {
  overflow: hidden;
}

.hide {
  display: none !important;
}

.hideopa {
  opacity: 0 !important;
}

.show {
  opacity: 1 !important;
}

/* CON02: 내려가는 화살표. 할당·진입/이탈 제어는 js/animation.js. */
@keyframes con02_arrow01_flow {
  0% {
    transform: translateY(-0.6vw);
    opacity: 0;
  }
  30% {
    opacity: var(--con02-arrow-opacity);
  }
  65% {
    opacity: calc(var(--con02-arrow-opacity) * 0.8);
  }
  100% {
    transform: translateY(2.3vw);
    opacity: 0;
  }
}

@keyframes con02_arrow02_flow {
  0% {
    transform: translateY(-0.4vw);
    opacity: 0;
  }
  30% {
    opacity: var(--con02-arrow-opacity);
  }
  65% {
    opacity: calc(var(--con02-arrow-opacity) * 0.8);
  }
  100% {
    transform: translateY(1.8vw);
    opacity: 0;
  }
}

/* 원형 배지의 반복 강조 링. 등장 완료 후 js/animation.js에서 재생한다. */
.badge_pulse_ring {
  position: absolute;
  inset: -6%;
  border: 1px solid var(--color-point);
  border-radius: 50%;
  opacity: 0;
}

/* CON15: 후광 맥동. 할당·진입/이탈 제어는 js/animation.js. */
@keyframes con13_food_float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.5vw);
  }
}

@keyframes con15_glow_pulse {
  0% {
    transform: scale(0.65);
    opacity: 0;
  }
  10% {
    transform: scale(1.1);
    opacity: 1;
  }
  70%, 100% {
    transform: scale(1.45);
    opacity: 0;
  }
}

/* CON15: 캡슐 오라의 수축·복원. 재생 제어는 js/animation.js. */
@keyframes con15_capsule_aura {
  0%, 100% {
    box-shadow: 0 0 calc(54 / 1905 * 100vw) rgba(15, 74, 119, .25), 0 0 calc(92 / 1905 * 100vw) rgba(6, 162, 219, .62);
  }
  50% {
    box-shadow: 0 0 calc(32 / 1905 * 100vw) rgba(15, 74, 119, .12), 0 0 calc(56 / 1905 * 100vw) rgba(6, 162, 219, .28);
  }
}

@keyframes ddm3 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: rotate(-8deg);
  }
  65% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes ddm4 {
  0% {
    transform: scale(1);
  }
  25% {
    transform: rotate(-2deg);
  }
  50% {
    transform: scale(1.05);
  }
  75% {
    transform: rotate(2deg);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes blk3 {
  0% {
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes rotate_image {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes scaleOpa {
  100% {
    transform: scale(1.1);
    opacity: 0;
  }
}

@keyframes scaleOpa2 {
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

@keyframes ddm {
  0% {
    transform: scale(1);
  }
  50% {
    transform: matrix(1.05, 0.01, 0.01, 1.05, 0, -30);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes rotate_imageY {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}

@keyframes ddm2 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: translateY(20px);
  }
  75% {
    transform: scale(1.02);
    transform: translateY(10px);
  }
  100% {
    transform: scale(1);
    transform: translateY(0px);
  }
}

@keyframes scaleOpa3 {
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

@keyframes smoke {
  0% {
    transform: translateY(30%) scale(0.8);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateY(-30%) scale(1.1);
    opacity: 0;
  }
}

.smoke {
  animation: smoke 4s infinite linear;
}

@keyframes light {
  0%, 31%, 34%, 39%, 42%, 47% {
    opacity: 0;
  }
  5%, 30%, 35%, 38%, 43%, 46% {
    opacity: 0.4;
  }
  50%, 55%, 60%, 67%, 51%, 54%, 68%, 100% {
    opacity: 1;
  }
  70% {
    opacity: 0.2;
  }
}

@keyframes marqueeX {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes marqueeX_r {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes marqueeY {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

@keyframes marqueeY_r {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

@keyframes opa {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes shakeAndFall {
  0% {
    transform: translate(0, -50%) rotate(0);
    opacity: 0;
  }
}

.shakeTwice {
  animation: shakeTwice 2s ease-in-out infinite;
  transform-origin: center;
}

.shakeTwices {
  animation: shakeTwices 2s ease-in-out infinite;
  transform-origin: center;
}

@keyframes shakeTwice {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(5deg);
  }
  20% {
    transform: rotate(-5deg);
  }
  30% {
    transform: rotate(4deg);
  }
  40% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes shakeTwices {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(3deg);
  }
  20% {
    transform: rotate(-3deg);
  }
  30% {
    transform: rotate(2deg);
  }
  40% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

div.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.swiper-wrapper.flow {
  pointer-events: none;
  transition-timing-function: linear;
}

.swiper-button-disabled {
  opacity: 0.3;
}

.noto {
  font-family: "Noto Serif", serif;
}

.notokr {
  font-family: "Noto Serif KR", serif;
}

.exbold {
  font-weight: 800;
}

.bold {
  font-weight: 700;
}

.sebold {
  font-weight: 600;
}

.medium {
  font-weight: 500;
}

.regular {
  font-weight: 400;
}

.flight {
  font-weight: 200;
}

.thin {
  font-weight: 100;
}

.animate-blk {
  animation: blk 1s infinite ease-in-out;
}

.scaleOpa {
  animation: scaleOpa infinite 2s;
}

.scaleOpa2 {
  animation: scaleOpa2 infinite 2s;
}

.light {
  animation: light infinite 5s;
}

.rotate_img {
  animation: rotate_image 10s infinite linear;
}

.white {
  color: white;
}

.point {
  color: var(--color-point);
}

.txct {
  text-align: center;
}

.lh {
  line-height: 1.5;
}

/* reveal 대신 사용 start */
/* 왼쪽부터 나타나기 */
.clip_off02 {
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  transition: all 0.8s;
}

/* 가운데에서 나타나기 */
.clip_off {
  clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
  transition: all 0.8s;
}

/* gsap에서 넣을 class */
.clip_on {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
}

/* reveal 대신 사용 end */
.absol_cover {
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  position: absolute;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}

.max_width {
  width: unset !important;
  max-width: 101%;
}

.back_img {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

/* image_sd */
.image_sd_wrap {
  overflow: hidden;
}

.image_sd {
  animation: marqueeX 20s infinite linear;
}

.image_sd .absol {
  left: 100%;
}

.image_sd_r {
  animation: marqueeX_r 20s infinite linear;
}

.image_sd_r .absol {
  right: 100%;
}

/* image_sd end */
/* y_slide start */
.slide_y_wrap {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0%;
  overflow: hidden;
}

.slide_y {
  animation: marqueeY 20s infinite linear;
}

.slide_y img.absol {
  top: 100%;
}

.slide_y_r {
  animation: marqueeY_r 20s infinite linear;
}

.slide_y_r img.absol {
  bottom: 100%;
}

/* y_slide end */
/* flow_sd 가로 (여러 이미지 마퀴) start */
.flow_sd {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}

.flow_sd_move {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  animation: marqueeX 20s infinite linear;
}

.flow_sd_move_r {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  animation: marqueeX_r 20s infinite linear;
}

.flow_sd_move_item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.flow_sd_move_item02 {
  left: 100%;
}

.flow_sd_move_item02_r {
  right: 100%;
}

.flow_sd_img {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* flow_sd 가로 end */
/* flow_sd 세로 (여러 이미지 마퀴) start */
.flow_sd_y {
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}

.flow_sd_y_move {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  animation: marqueeY 10s infinite linear;
}

.flow_sd_y_move_r {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  animation: marqueeY_r 10s infinite linear;
}

.flow_sd_y_move_item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}

.flow_sd_y_move_item02 {
  top: 100%;
}

.flow_sd_y_move_item02_r {
  bottom: 100%;
}

.flow_sd_y_img {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* flow_sd 세로 end */
/* swiper-arr */
.btn_arr {
  z-index: 2;
  cursor: pointer;
}

.arr_next {
  transform: rotateY(180deg);
}

/* swiper-arr */
iframe {
  width: 100%;
  height: 100%;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-button-lock {
  display: none !important;
}

.swiper {
  margin: 0;
  z-index: 0;
}

b {
  font-weight: 700;
}

.obj > img {
  height: 100%;
  object-fit: cover;
}

.pc-mobile {
  display: flex !important;
}

.mobile-pc {
  display: none !important;
}

.pc {
  display: flex !important;
}

.pc-inline {
  display: inline !important;
}

.tablet {
  display: none !important;
}

.mobile {
  display: none !important;
}

.absol {
  position: absolute;
}

.rltv {
  position: relative;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flexrow {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.flexcol {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

@keyframes marquee3 {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes blk {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  31% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes ddm_m {
  0% {
    transform: scale(1);
  }
  50% {
    transform: matrix(1.05, 0.01, 0.01, 1.05, 0, -15);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes ddm_m_reverse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: matrix(0.8, 0.01, 0.01, 0.8, 0, -5);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes blk2 {
  0% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes line-top {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(13px);
  }
}

/* 추가된 부분 */
@keyframes line-top-reverse {
  0% {
    transform: translateY(13px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes line-top-rotate {
  0% {
    transform: translateY(13px) rotateZ(0deg);
  }
  100% {
    transform: translateY(13px) rotateZ(45deg);
  }
}

/* 추가된 부분 */
@keyframes line-top-rotate-reverse {
  0% {
    transform: translateY(13px) rotateZ(45deg);
  }
  100% {
    transform: translateY(13px) rotateZ(0deg);
  }
}

@keyframes line-mid {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

/* 추가된 부분 */
@keyframes line-mid-reverse {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes line-mid-invisible {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(0);
  }
}

@keyframes line-bot {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-13px);
  }
}

/* 추가된 부분 */
@keyframes line-bot-reverse {
  0% {
    transform: translateY(-13px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes line-bot-rotate {
  0% {
    transform: translateY(-13px) rotateZ(0deg);
  }
  100% {
    transform: translateY(-13px) rotateZ(135deg);
  }
}

/* 추가된 부분 */
@keyframes line-bot-rotate-reverse {
  0% {
    transform: translateY(-13px) rotateZ(135deg);
  }
  100% {
    transform: translateY(-13px) rotateZ(0deg);
  }
}

/* -------------------header 커스텀 시작------------------- */
@keyframes dropHeader {
  0% {
    top: -5rem;
  }
  100% {
    top: 0;
  }
}

@keyframes insertHeader {
  0% {
    top: 0;
  }
  100% {
    top: -7rem;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* main 히어로 첫 화면 숨김의 안전장치 — JS 가 못 돌면 3초 뒤 나타난다 (style.css .main_tit·.main_desc·.main_logo) */
@keyframes main_reveal {
  to {
    opacity: 1;
  }
}

/* ══ 전역 커서 광원 (global-m01 · 계약 .planning/global-light.md) ══
   js/animation.js 가 보이지 않는 광원 좌표로 마우스를 부드럽게 따라가고(화면에 따라다니는 빛 원은 없음 — 유저 지시로 제거),
   커서 근처의 [data-light] 요소에만 재질 클래스와 아래 변수를 매 프레임 쓴다.
   · data-light="재질 톤" → 클래스 light_재질 + light_톤 (+ surface·card 중 원래 outline 없는 요소는 light_ring)
   · --light-x / --light-y = 요소 안 광원 좌표(px) · --light-on = 반응 세기 0~1 · --light-dx / --light-dy = 요소 중심→광원 방향 -1~1
   변수는 상속하지 않게 등록해 자식 스타일 재계산을 막는다. 클래스가 없는 평상시 화면은 그대로다.
   ★ text 재질은 요소 background-image 맨 앞 슬롯 var(--light-layer, none) 이 있어야 보인다 (css/style.css). */
@property --light-x {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@property --light-y {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@property --light-on {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

@property --light-dx {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

@property --light-dy {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

@property --light-layer {
  syntax: '*';
  inherits: false;
}

/* 톤 — ice: 어두운 바탕·흰 글자용 얼음빛 · point: 밝은 바탕 위 어두운 그라데이션 글자용 포인트색 반사 */
.light_ice {
  --light-tint: var(--light-ice);
}

.light_point {
  --light-glint: var(--light-cool);
  --light-tint: var(--light-cool);
}

/* text — 그라데이션 글자(background-clip:text) 안으로 반사광이 지나감. style.css 슬롯 필수 */
.light_text {
  --light-layer: radial-gradient(calc(var(--px) * 190) at var(--light-x) var(--light-y), rgba(var(--light-glint, 255, 255, 255), var(--light-on)) 0%, rgba(var(--light-glint, 255, 255, 255), var(--light-on)) 26%, rgba(var(--light-tint, var(--light-ice)), calc(var(--light-on) * .45)) 58%, rgba(var(--light-tint, var(--light-ice)), 0) 100%);
}

/* ink 구조 — 엔진이 가드를 통과한 ink 요소에 등록 시점부터 상주시킨다(.light_ink_base).
   커서에 맞춰 이 구조가 붙었다 떨어지면 글자 렌더가 「글자를 직접 색칠」↔「배경을 글자 모양으로
   마스킹」으로 갈아타면서 서브픽셀 AA 가 꺼지고 경계 픽셀 색이 어긋나, 글자에 얇은 외곽선이
   덧생긴다(2026-09-23 실측). text 재질이 style.css 에 구조를 상주시켜 이 현상이 없는 것과 같은 이유다.
   --light-layer 가 없는 평상시엔 currentColor 단색만 칠해지므로 색은 그대로다. */
.light_ink_base {
  background-image: var(--light-layer, none), linear-gradient(currentColor, currentColor);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ink — 단색 글자가 빛 닿는 곳부터 물듦. 자체 배경이 없는 글자에만 붙는다(JS 가드) */
.light_ink {
  --light-layer: radial-gradient(calc(var(--px) * 230) at var(--light-x) var(--light-y), rgba(var(--light-tint, var(--light-cool)), var(--light-on)) 0%, rgba(var(--light-tint, var(--light-cool)), calc(var(--light-on) * .9)) 30%, rgba(var(--light-tint, var(--light-cool)), 0) 100%);
}

/* surface — 버튼·라벨: 표면 광택(슬롯 있는 요소만 보임) + 광원 쪽으로 번지는 후광 */
.light_surface {
  --light-layer: radial-gradient(calc(var(--px) * 150) at var(--light-x) var(--light-y), rgba(255, 255, 255, calc(var(--light-on) * .55)) 0%, rgba(255, 255, 255, calc(var(--light-on) * .18)) 45%, rgba(255, 255, 255, 0) 100%);
  filter: drop-shadow(calc(var(--light-dx) * var(--px) * 8) calc(var(--light-dy) * var(--px) * 8) calc(var(--px) * 18) rgba(var(--light-tint, var(--light-cool)), calc(var(--light-on) * .7)));
}

/* card — 카드·패널: 둘레로 은은한 후광 */
.light_card {
  filter: drop-shadow(0 0 calc(var(--px) * 26) rgba(var(--light-tint, var(--light-cool)), calc(var(--light-on) * .45)));
}

/* ring — surface·card 중 원래 outline 이 없는 요소에만 JS 가 붙이는 빛 테두리 (디자인 outline 보존) */
.light_ring {
  outline: 1px solid rgba(var(--light-tint, var(--light-cool)), calc(var(--light-on) * .85));
  outline-offset: calc(var(--px) * var(--light-on) * 5);
}

/* glow — 이미지·아이콘: 광원 쪽으로 기우는 빛 번짐 + 살짝 밝아짐 */
.light_glow {
  filter: drop-shadow(calc(var(--light-dx) * var(--px) * 12) calc(var(--light-dy) * var(--px) * 12) calc(var(--px) * 26) rgba(var(--light-tint, var(--light-cool)), calc(var(--light-on) * .85))) brightness(calc(1 + var(--light-on) * .1));
}

/* 옵션 — 부모가 overflow 로 바깥 빛을 자르는 곳(슬라이드·레일·영상 스테이지)용. JS 는 두 옵션에 빛 테두리(light_ring)를 붙이지 않는다.
   flat: 바깥 후광 없이 살짝 밝아지기만 · inset: 빛 테두리·후광을 요소 안쪽으로 (자체 box-shadow 없는 요소에만) */
.light_flat {
  filter: brightness(calc(1 + var(--light-on) * .1));
}

.light_inset {
  filter: none;
  box-shadow: inset 0 0 0 calc(var(--px) * 2) rgba(var(--light-tint, var(--light-cool)), calc(var(--light-on) * .8)), inset 0 0 calc(var(--px) * 34) rgba(var(--light-tint, var(--light-cool)), calc(var(--light-on) * .35));
}

/* ══ 스크롤 잉크 — 뒤에 깔린 큰 글자(「압도적」「매출」「적은」「로열티」「STORY」)의 반응을 마우스 광원에서 스크롤로 옮긴 것 ══
   마우스 없이도 글자가 처음부터 --ink-base 색으로 또렷하게 보이고, 스크롤에 맞춰 --ink-lit 색이 글자를 왼쪽 → 오른쪽으로 채워 간다(마우스 광원이 글자를 물들이던 것의 스크롤 판).
   채움 위치 = background-position 하나뿐이라 레이아웃·기존 상하/좌우 이동 모션과 겹치지 않는다(js/animation.js 「스크롤 잉크」). 100% 0 = 안 채워짐 · 0% 0 = 다 채워짐.
   색은 각 글자 요소에서 --ink-base / --ink-lit 로 넘긴다. background-clip:text 라 전역 커서 광원(data-light="ink")과는 같이 쓰지 않는다.
   ★ background-clip:text 는 요소 상자 밖으로 나간 글자 조각(좁은 자간의 끝 글자·줄 높이보다 큰 글리프)을 칠하지 못하므로,
     쓰는 쪽에서 padding 으로 칠하는 영역을 넓히고 left/top 을 같은 만큼 물려 자리는 그대로 둔다. */
.scroll_ink {
  color: transparent;
  background-image: linear-gradient(100deg, var(--ink-lit) 0%, var(--ink-lit) 42%, var(--ink-base) 58%, var(--ink-base) 100%);
  background-repeat: no-repeat;
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
}