/* v18 · 은은한 라이팅 + 글래스모피즘 강화 */
:root{
 --fire:#fd4533;
 --mx:50vw;--my:30vh;
 --g-fill:linear-gradient(155deg,rgba(255,255,255,.115) 0%,rgba(255,255,255,.04) 38%,rgba(255,255,255,.018) 62%,rgba(255,255,255,.06) 100%);
 --g-rim:linear-gradient(150deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.14) 22%,rgba(255,255,255,.03) 48%,rgba(253,69,51,.0) 70%,rgba(253,69,51,.38) 100%);
 --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── 1. 공간 조명: 고정된 빛 웅덩이 + 커서를 따라오는 아주 옅은 스포트라이트 ── */
.ambient-light{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient-light i{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform;mix-blend-mode:screen}
.ambient-light .l1{width:58vw;height:58vw;left:-14vw;top:-22vw;background:radial-gradient(circle,rgba(255,255,255,.085),transparent 62%);animation:drift1 34s ease-in-out infinite alternate}
.ambient-light .l2{width:46vw;height:46vw;right:-10vw;top:28vh;background:radial-gradient(circle,rgba(253,69,51,.10),rgba(253,69,51,.03) 40%,transparent 66%);animation:drift2 41s ease-in-out infinite alternate}
.ambient-light .l3{width:52vw;height:40vw;left:18vw;bottom:-24vw;background:radial-gradient(circle,rgba(190,196,214,.07),transparent 64%);animation:drift3 38s ease-in-out infinite alternate}
.ambient-light .cursor{width:720px;height:720px;left:0;top:0;filter:none;background:radial-gradient(circle,rgba(255,255,255,.045),rgba(255,255,255,.015) 35%,transparent 62%);transform:translate(calc(var(--mx) - 360px),calc(var(--my) - 360px));transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.ambient-light::after{content:'';position:absolute;inset:0;background-image:var(--grain);opacity:.05;mix-blend-mode:overlay}
@keyframes drift1{to{transform:translate(9vw,7vh) scale(1.08)}}
@keyframes drift2{to{transform:translate(-8vw,-10vh) scale(.92)}}
@keyframes drift3{to{transform:translate(-6vw,-6vh) scale(1.1)}}
.hd{z-index:60}#app{position:relative;z-index:1}

/* 섹션 배경을 살짝 투명하게 해서 공간 조명이 비치게 */
#app>.sec,#app>.grow,#app>.proc,#app>.contact{background:transparent!important}
body{background:radial-gradient(130% 90% at 50% -10%,#232327,#121215 40%,#08080a 72%,#050506) fixed!important}

/* 섹션마다 위에서 떨어지는 부드러운 톱 라이트 */
.sec,.grow,.proc{position:relative}
.section-atmosphere .section-orb{position:absolute;left:var(--orb-x,70%);top:-18%;width:min(1100px,90vw);aspect-ratio:1.6;transform:translateX(-50%);border-radius:50%;
 background:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.075),rgba(255,255,255,.02) 40%,transparent 68%);filter:blur(30px);opacity:0;transition:opacity 1.6s ease}
.section-seen>.section-atmosphere .section-orb{opacity:1}
.section-atmosphere .section-orb::after{content:'';position:absolute;left:50%;top:48%;width:38%;height:30%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(253,69,51,.09),transparent 70%);filter:blur(40px)}
.section-atmosphere::after{opacity:.1!important}

/* ── 2. 글래스: 두께감 · 빛 받는 테두리 · 상단 반사 · 그레인 ── */
.glass,#start .row,.card.c-studio,.card.c-ads,.card.c-desk,.nums>div,.chain .st,.ph,.crew>div,.story3>div,.formula,.cbox,.profw,.pvar,.faq details,.pass,.road>div{
 background:var(--g-fill)!important;
 border:1px solid rgba(255,255,255,.07)!important;
 backdrop-filter:blur(30px) saturate(170%);-webkit-backdrop-filter:blur(30px) saturate(170%);
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.26),
  inset 1px 0 0 rgba(255,255,255,.06),
  inset 0 -1px 0 rgba(0,0,0,.35),
  inset 0 0 40px rgba(255,255,255,.025),
  0 1px 1px rgba(0,0,0,.4),
  0 30px 70px -34px rgba(0,0,0,.95),
  0 0 0 .5px rgba(0,0,0,.6)!important;
 transition:box-shadow .6s ease,transform .7s var(--spring),border-color .5s,background .5s;
}
/* 빛 받는 그라데이션 테두리 (좌상단 흰 빛 → 우하단 키컬러 반사) */
.glass::before{content:''!important;display:block!important;position:absolute;inset:0;padding:1px;border-radius:inherit;pointer-events:none;z-index:3;
 background:var(--g-rim)!important;
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.85;transition:opacity .5s}
/* 상단 유리 반사 + 그레인 + 포인터 하이라이트 */
.glass::after{content:''!important;display:block!important;position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
 background:
  radial-gradient(520px circle at var(--gx,30%) var(--gy,-10%),rgba(255,255,255,calc(.05 + var(--go,0)*.08)),transparent 60%),
  linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 28%)!important;
 opacity:1!important;mix-blend-mode:normal}
.glass:hover{box-shadow:
  inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(0,0,0,.35),inset 0 0 50px rgba(255,255,255,.04),
  0 40px 90px -36px rgba(0,0,0,1),0 18px 60px -30px rgba(253,69,51,.22)!important}
.glass:hover::before{opacity:1}

/* 지나가는 빛줄기: 화면에 들어올 때 한 번, 호버 때 한 번 */
.glass>.sheen{position:absolute!important;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:2}
.glass>.sheen::after{content:'';position:absolute;inset:0;background-image:var(--grain);background-size:160px;opacity:.035;mix-blend-mode:overlay}
.glass>.sheen::before{content:'';position:absolute;top:-50%;left:-60%;width:36%;height:200%;transform:rotate(18deg) translateX(0);
 background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),rgba(255,255,255,.02) 60%,transparent);opacity:0}
.glass.in>.sheen::before,.glass.lit>.sheen::before{animation:sheen 1.8s cubic-bezier(.3,.6,.2,1) .25s 1 both}
.glass:hover>.sheen::before{animation:sheen 1.3s cubic-bezier(.3,.6,.2,1) 1 both}
@keyframes sheen{0%{opacity:0;transform:rotate(18deg) translateX(0)}20%{opacity:1}100%{opacity:0;transform:rotate(18deg) translateX(520%)}}

/* 강조 카드: 키컬러 테두리 빛 (TO BE, 추천 티어, 현재 탭) */
.tier.has-bd,.est>div[style*="--k"],.roles .cur{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px rgba(253,69,51,.45),0 30px 80px -30px rgba(253,69,51,.35),0 30px 70px -34px #000!important}

/* ── 3. 히어로 조명 ── */
.hero{background:transparent!important}
.hero::before{content:'';position:absolute;right:-6%;top:-10%;width:70%;height:120%;pointer-events:none;z-index:0;
 background:
  radial-gradient(40% 28% at 62% 8%,rgba(255,255,255,.12),transparent 70%),
  radial-gradient(34% 40% at 58% 56%,rgba(253,69,51,.16),transparent 68%);
 filter:blur(10px);animation:breathe 7s ease-in-out infinite alternate}
.hero::after{content:'';position:absolute;left:52%;top:-20%;width:26%;height:110%;pointer-events:none;z-index:0;
 background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.015) 55%,transparent);
 clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);filter:blur(24px);opacity:.75;animation:breathe 9s ease-in-out infinite alternate-reverse}
@keyframes breathe{from{opacity:.65}to{opacity:1}}
.hero>*{position:relative;z-index:1}
.render-image{filter:drop-shadow(0 50px 70px rgba(0,0,0,.7)) drop-shadow(0 0 60px rgba(253,69,51,.12)) contrast(1.04)}
/* 바닥 반사광 */
.hero-visual::after{content:'';position:absolute;left:8%;right:4%;bottom:-6%;height:22%;pointer-events:none;border-radius:50%;
 background:radial-gradient(50% 50% at 50% 50%,rgba(253,69,51,.16),rgba(255,255,255,.03) 50%,transparent 75%);filter:blur(22px);animation:breathe 6s ease-in-out infinite alternate}
.hero-copy h1{text-shadow:0 0 80px rgba(255,255,255,.08)}
.hero-hotspot{background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.04))!important;border-color:rgba(255,255,255,.22)!important;
 backdrop-filter:blur(18px) saturate(170%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 30px -10px rgba(0,0,0,.8)}
.btn-line{background:linear-gradient(150deg,rgba(255,255,255,.10),rgba(255,255,255,.025))!important;backdrop-filter:blur(16px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.btn-fire{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 40px -12px rgba(253,69,51,.6)!important}

/* 헤더: 얇은 유리 바 */
.hd,.hd.solid{background:linear-gradient(180deg,rgba(18,18,22,.55),rgba(10,10,12,.35))!important;backdrop-filter:blur(26px) saturate(170%)!important;-webkit-backdrop-filter:blur(26px) saturate(170%)!important;
 border-bottom:1px solid rgba(255,255,255,.08);box-shadow:inset 0 -1px 0 rgba(255,255,255,.03)}

/* 모달 */
.modal-box.glass{background:linear-gradient(155deg,rgba(40,40,46,.72),rgba(18,18,22,.78))!important}

@media (max-width:820px){
 .ambient-light .cursor{display:none}
 .ambient-light i{filter:blur(60px)}
 .glass,.card{backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%)}
}
@media (prefers-reduced-motion:reduce){
 .ambient-light i,.hero::before,.hero::after,.hero-visual::after{animation:none!important}
 .glass>.sheen::before{animation:none!important}
}
@media (max-width:820px){.hero-service.glass{background:none!important;box-shadow:none!important;backdrop-filter:none!important;border:0!important;border-bottom:1px solid #3b3b3b!important;border-radius:0}.hero-service.glass::before,.hero-service.glass::after{display:none!important}}
html{background:#050506}