@charset "UTF-8";

/* =========================================================
   WOWON MAIN STYLE (CLEANED)

   01. RESET
   02. VARIABLES
   03. COMMON
   04. HEADER
   05. SCROLL PROGRESS
   06. SIDE NAV
   07. BUTTON
   08. OPENING
   09. HERO
   10. GLOBAL FLOW
   11. VISION
   12. ENGINE
   13. WOWON ECOSYSTEM
   14. LOCATION
   15. YES APM
   16. PROJECT
   17. JANGGEUM
   18. INVESTMENT
   19. CONTACT
   20. FOOTER
   21. REVEAL
   22. KEYFRAMES
   23. RESPONSIVE
========================================================= */


/* =========================================================
   01. RESET
========================================================= */

*, *::before, *::after {margin: 0; padding: 0; box-sizing: border-box;}
html {scroll-behavior: smooth; overflow-x: clip;}
body {font-family: "Inter", "Noto Sans KR", sans-serif; color: var(--text); background: var(--bg); overflow-x: clip; word-break: keep-all;}
body, button, input, textarea {font-family: "Inter", "Noto Sans KR", sans-serif;}
button {border: 0; background: none; color: inherit; cursor: pointer;}
a {color: inherit; text-decoration: none;}
img {display: block; max-width: 100%;}
ul, li {list-style: none;}
em, i {font-style: normal;}
svg {display: block;}


/* =========================================================
   02. VARIABLES
========================================================= */

:root {--bg: #f7f8fb; --bg-soft: #f1f4f8; --white: #ffffff;}
:root {--text: #17191f; --text-soft: #69707d; --text-light: #959ca8; --line: rgba(30, 42, 62, .10);}
:root {--navy: #18253c; --blue: #667cff; --coral: #7ccf2a; --coral-light: #d2ffa7; --coral-bg: #faffee;}
:root {--shadow: 0 25px 70px rgba(47, 62, 94, .10); --shadow-soft: 0 14px 45px rgba(47, 62, 94, .07);}
:root {--container: 1400px; --header-h: 84px; --radius-lg: 26px;}


/* =========================================================
   03. COMMON
========================================================= */

.page {position: relative; width: 100%;}
.container {width: min(calc(100% - 80px), var(--container)); margin: 0 auto;}
.section {position: relative; min-height: 100vh; padding: 120px 0; overflow: hidden; scroll-margin-top: var(--header-h);}
.section-label {display: inline-flex; align-items: center; gap: 12px; margin-bottom: 20px; font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--coral);}
.section-label::before {content: ""; width: 26px; height: 1px; background: currentColor;}
.section-head {position: relative; margin-bottom: 72px;}
.section-head h2 {font-size: clamp(42px, 5vw, 70px); line-height: 1.08; font-weight: 800; letter-spacing: -.065em; color: var(--text);}
.section-head h2 em {color: #aab1bd;}
.section-head-description {max-width: 600px; margin-top: 25px; font-size: 17px; line-height: 1.6; color: var(--text-soft);}
.pc {display: inline;}


/* =========================================================
   04. HEADER
========================================================= */

.header {position:fixed; top:0; left:0; width:100%; height:var(--header-h); z-index:1000; background:rgba(250,251,253,.55); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(28,39,61,.06); opacity: 0; visibility: hidden;transform: translateY(-20px); transition: opacity .45s ease, visibility .45s ease,    transform .45s cubic-bezier(.22, .61, .36, 1);}
.header.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.header-inner {width:min(calc(100% - 80px),var(--container)); height:100%; margin:0 auto; display:flex; align-items:center; justify-content:space-between;}
.logo {display:inline-flex; align-items:center; gap:12px; text-decoration:none;}
.logo-mark {position:relative; width:46px; height:46px; flex:0 0 46px; display:flex; align-items:center; justify-content:center; border-radius:14px; background:linear-gradient(135deg,#6d28d9 0%,#8b5cf6 48%,#6366f1 100%); border:1px solid rgba(255,255,255,.45); box-shadow:0 9px 24px rgba(109,40,217,.24),inset 0 1px 0 rgba(255,255,255,.32),inset 0 -5px 12px rgba(67,56,202,.12); color:#fff; font-size:25px; font-weight:900; line-height:1; letter-spacing:0; padding:0; text-align:center;}

.logo-mark::before {display:none;}

.logo-text {color:var(--navy); font-size:17px; font-weight:800; letter-spacing:-.04em; line-height:1;}

.header-cta {display:inline-flex; align-items:center; gap:16px; padding:12px 19px; border:1px solid rgba(35,48,76,.08); border-radius:100px; background:var(--navy); color:#fff; font-size:11px; font-weight:700; letter-spacing:.06em; box-shadow:0 10px 25px rgba(24,37,60,.18); transition:transform .3s ease,box-shadow .3s ease;}

.header-cta:hover {transform:translateY(-2px); box-shadow:0 15px 30px rgba(24,37,60,.25);}

.header-cta i {font-size:14px;}


/* =========================================================
   05. SCROLL PROGRESS
========================================================= */

.scroll-progress {position: fixed; top: var(--header-h); left: 0; width: 7px; height: calc(100vh - var(--header-h)); z-index: 999; background: rgba(40, 52, 77, .04);}
.scroll-progress span {display: block; width: 100%; height: 0; border-radius: 100px; background: linear-gradient(to bottom, var(--coral), var(--blue)); box-shadow: 0 0 14px rgba(255, 118, 100, .35); transition: height .25s ease;}


/* =========================================================
   06. SIDE NAV
========================================================= */

.side-nav {position: fixed; top: 50%; right: 28px; transform: translateY(-50%); z-index: 900; display: flex; flex-direction: column; gap: 12px;}
.side-item {display: flex; align-items: center; justify-content: flex-end; gap: 9px; cursor: pointer;}
.side-item span {font-size: 13px; font-weight: 600; color: var(--text-light); opacity: .4; transition: .3s ease; font-weight: bold; text-transform: uppercase;}
.side-item i {width: 6px; height: 6px; border-radius: 50%; background: #c5cad2; transition: .35s ease;}
.side-item.active span {color: var(--navy); opacity: 1;}
.side-item.active i {width: 24px; border-radius: 20px; background: var(--coral); box-shadow: 0 0 0 5px rgba(140, 236, 62, 0.08);}


/* =========================================================
   07. BUTTON
========================================================= */

.btn {display: inline-flex; align-items: center; justify-content: center; gap: 28px; min-height: 54px; padding: 15px 23px; border-radius: 100px; font-size: 15px; font-weight: 700; transition: transform .35s ease, box-shadow .35s ease, background .35s ease;}
.btn-primary {background: linear-gradient(135deg, var(--navy), #273b60); color: #fff; box-shadow: 0 14px 30px rgba(24, 37, 60, .18);}
.btn-primary:hover {transform: translateY(-4px); box-shadow: 0 20px 38px rgba(24, 37, 60, .25);}
.btn-outline {border: 1px solid rgba(37, 49, 74, .15); background: rgba(255, 255, 255, .65); color: var(--navy); backdrop-filter: blur(15px);}
.btn-outline:hover {transform: translateY(-4px); background: #fff; box-shadow: var(--shadow-soft);}


/* =========================================================
   08. OPENING
========================================================= */

.janggeum-opening {position: relative; width: 100%; height: 100vh; min-height: 700px; overflow: hidden; background: #080604;}
.janggeum-opening-video {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000;}
.janggeum-opening-dim {position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .5); pointer-events: none;}
.janggeum-opening-content {position: absolute; left: 50%; top: 50%; width: min(760px, 90%); transform: translate(-50%, -50%); z-index: 5; display: flex; flex-direction: column; align-items: center; text-align: center;}
.janggeum-opening-label {display: inline-flex; align-items: center; gap: 12px; margin-bottom: 24px; font-size: 13px; font-weight: 700; letter-spacing: .35em; color: var(--coral);}
.janggeum-opening-label::before, .janggeum-opening-label::after {content: ""; width: 28px; height: 1px; background: var(--coral);}
.janggeum-opening-kicker {margin: 0 0 20px; font-family: "Noto Serif KR", serif; font-size: 17px; line-height: 1.8; color: rgba(255, 255, 255, .8);}
.janggeum-opening-content h1 {display: flex; flex-direction: column; align-items: center; font-family: "Noto Serif KR", serif; font-weight: 400; line-height: .95; letter-spacing: -.08em; color: #fff;}
.janggeum-opening-content h1 small {margin-bottom: 20px; font-size: clamp(38px, 4vw, 64px);}
.janggeum-opening-content h1 strong {position: relative; font-size: clamp(78px, 8vw, 135px); font-weight: 700;}
.janggeum-opening-desc {margin: 35px 0 0; font-size: 17px; line-height: 1.6; color: #ddd;}
.janggeum-opening-btn {display: flex; align-items: center; justify-content: center; gap: 20px; width: 290px; height: 58px; margin-top: 30px; border: 1px solid rgba(136, 255, 100, 0.85); border-radius: 100px; background: rgba(0, 0, 0, .25); color: var(--coral); font-size: 15px; letter-spacing: .08em; transition: .35s ease;}
.janggeum-opening-btn b {color: var(--coral); font-size: 22px; font-weight: 300; transition: .35s ease;}
.janggeum-opening-btn:hover {background: var(--coral); border-color: var(--coral); color: #fff;}
.janggeum-opening-btn:hover b {color: #fff; transform: translateX(5px);}
.janggeum-opening-scroll {position: absolute; left: 50%; bottom: 50px; transform: translateX(-50%); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 9px; font-size: 9px; letter-spacing: .35em; color: rgba(255, 255, 255, .4);}
.janggeum-opening-scroll i {position: relative; width: 20px; height: 29px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 20px;}
.janggeum-opening-scroll i::after {content: ""; position: absolute; left: 50%; top: 5px; width: 2px; height: 5px; background: var(--coral); transform: translateX(-50%); animation: openingScroll 1.5s infinite;}


/* =========================================================
   09. HERO
========================================================= */

.hero {position: relative; min-height: 100vh; display: flex; align-items: center; padding-top: calc(var(--header-h) + 35px); overflow: hidden; background: radial-gradient(circle at 72% 42%, rgba(145, 158, 255, .14), transparent 28%), radial-gradient(circle at 82% 72%, rgba(255, 118, 100, .10), transparent 24%), linear-gradient(135deg, #fbfbfd 0%, #f7f8fb 52%, #f8f6f5 100%);}
.hero-atmosphere {position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 75% 50%, rgba(255, 255, 255, .95), transparent 25%); pointer-events: none;}
.hero-noise {position: absolute; inset: 0; z-index: 1; opacity: .025; mix-blend-mode: multiply; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");}
.hero-inner {position: relative; z-index: 5; width: min(calc(100% - 80px), var(--container)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 35px; align-items: center;}
.hero-copy {position: relative; z-index: 10;}
.eyebrow {display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: #747c89;}
.eyebrow-dot {width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 6px rgba(157, 255, 100, 0.09);}
.hero h1 {max-width: 760px; font-size: clamp(48px, 5.25vw, 80px); line-height: 1.06; letter-spacing: -.075em; color: var(--navy);}
.hero h1 em {position: relative; z-index: 1; color: var(--navy);}
.hero h1 em::after {content: ""; position: absolute; left: 0; bottom: 5px; width: 102%; height: 16px; z-index: -1; border-radius: 20px; background: linear-gradient(90deg, rgba(210, 255, 158, 0.8), rgba(172, 235, 130, 0.55));}
.hero-description {max-width: 650px; margin-top: 34px; font-size: 17px; line-height: 1.85; letter-spacing: -.025em; color: #6d7480;}
.hero-description strong {color: var(--navy); font-weight: 700;}
.hero-buttons {display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px;}

/* HERO VISUAL : LIQUID GLASS */

.hero-visual {position: relative; width: min(54vw, 760px); height: 720px; display: flex; align-items: center; justify-content: center; perspective: 1600px;}
.wowon-liquid {position: relative; width: 650px; height: 650px; transform-style: preserve-3d; isolation: isolate;}
.liquid-glow {position: absolute; border-radius: 50%; opacity: .65; pointer-events: none;}
.glow-coral {width: 300px; height: 300px; left: 130px; top: 150px; background: rgba(175, 255, 100, 0.28); filter: blur(75px);}
.glow-blue {width: 330px; height: 330px; right: 30px; top: 80px; background: rgba(82, 117, 255, .22); filter: blur(80px);}
.glow-purple {width: 260px; height: 260px; left: 220px; bottom: 50px; background: rgba(154, 112, 240, .20); filter: blur(75px);}
.liquid-ribbon {position: absolute; left: 50%; top: 50%; width: 390px; height: 110px; border-radius: 100px; transform-style: preserve-3d; filter: blur(.2px); opacity: .82; mix-blend-mode: multiply;}
.liquid-ribbon::before {content: ""; position: absolute; left: 8%; right: 8%; top: 18px; height: 1px; opacity: .8; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);}
.liquid-ribbon::after {content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(255, 255, 255, .22);}
.ribbon-01 {transform: translate(-50%, -50%) translateZ(-90px) rotateZ(-24deg) rotateX(22deg); background: linear-gradient(90deg, rgba(100, 255, 139, 0.1), rgba(175, 255, 100, 0.78), rgba(253, 255, 115, 0.72), rgba(255, 255, 255, .08)); box-shadow: 0 0 70px rgba(175, 255, 100, 0.3);}
.ribbon-02 {width: 430px; height: 95px; transform: translate(-50%, -50%) translateZ(-30px) rotateZ(26deg) rotateX(-18deg); background: linear-gradient(90deg, rgba(91, 115, 255, .08), rgba(91, 176, 255, 0.7), rgba(110, 143, 235, 0.75), rgba(239, 255, 100, 0.2)); box-shadow: 0 0 70px rgba(91, 115, 255, .25);}
.ribbon-03 {width: 360px; height: 125px; transform: translate(-50%, -50%) translateZ(55px) rotateZ(-8deg) rotateX(30deg); background: linear-gradient(90deg, rgba(255, 245, 100, 0.1), rgba(206, 255, 128, 0.7), rgba(119, 140, 235, 0.72), rgba(91, 135, 255, .24)); box-shadow: 0 0 75px rgba(245, 255, 100, 0.22);}
.ribbon-04 {width: 450px; height: 70px; transform: translate(-50%, -50%) translateZ(100px) rotateZ(15deg) rotateX(-10deg); background: linear-gradient(90deg, rgba(255, 219, 100, 0.12), rgba(162, 255, 100, 0.58), rgba(104, 135, 255, .58), rgba(121, 176, 239, 0.32)); filter: blur(1px);}
.liquid-glass {position: absolute; left: 50%; top: 50%; width: 285px; height: 285px; z-index: 20; transform: translate(-50%, -50%) translateZ(150px) rotateX(8deg) rotateY(-12deg); transform-style: preserve-3d; border-radius: 72px; border: 1px solid rgba(255, 255, 255, .95); background: linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(221, 228, 240, .72)); box-shadow: 0 40px 100px rgba(38, 48, 68, .22), 0 0 70px rgba(100, 120, 190, .10), inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -30px 70px rgba(80, 100, 145, .12); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);}
.glass-reflection {position: absolute; left: 30px; top: -25px; width: 180px; height: 100px; border-radius: 50%; background: rgba(255, 255, 255, .55); filter: blur(12px); transform: rotate(-18deg);}
.glass-inner {position: absolute; inset: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 52px; border: 1px solid rgba(23, 32, 51, .12); background: linear-gradient(145deg, rgba(255, 255, 255, .42), rgba(205, 216, 234, .28)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);}
.glass-mark {font-size: 82px; line-height: .8; font-weight: 900; letter-spacing: -.12em; margin-left: -.12em; background: linear-gradient(135deg, #eaf512 5%, #a3d70e 38%, #4ba70f 65%, #18860b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 10px 20px rgba(30, 51, 23, 0.18));}
.glass-inner strong {margin-top: 15px; font-size: 20px; font-weight: 800; letter-spacing: .18em; margin-left: .18em; color: #101827; text-shadow: 0 2px 8px rgba(23, 32, 51, .08);}
.glass-fragment {position: absolute; z-index: 15; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .65); background: linear-gradient(135deg, rgba(255, 255, 255, .60), rgba(210, 220, 236, .20)); box-shadow: 0 20px 45px rgba(23, 32, 51, .08); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);}
.fragment-01 {width: 72px; height: 72px; left: 95px; top: 165px; transform: rotate(18deg) translateZ(40px);}
.fragment-02 {width: 50px; height: 50px; right: 110px; top: 255px; border-radius: 14px; transform: rotate(-22deg) translateZ(70px);}
.fragment-03 {width: 62px; height: 62px; right: 145px; bottom: 135px; transform: rotate(35deg) translateZ(20px);}
.liquid-light {position: absolute; width: 6px; height: 6px; z-index: 30; border-radius: 50%; background: #89df62; box-shadow: 0 0 20px rgba(146, 255, 83, 0.8); animation: liquidPulse 3s ease-in-out infinite;}
.light-01 {left: 120px; top: 115px;}
.light-02 {right: 105px; top: 185px; animation-delay: -.8s;}
.light-03 {left: 175px; bottom: 115px; animation-delay: -1.5s;}
.light-04 {right: 95px; bottom: 165px; animation-delay: -2.2s;}


/* =========================================================
   10. GLOBAL FLOW
========================================================= */

.global-flow {position: relative; width: 100%; height: 260vh; overflow: clip; background: linear-gradient(180deg, #f7f8fb 0%, #f4f6fa 55%, #faf8f5 100%); padding-top: 100px;}
.global-flow__sticky {position: sticky; top: 140px; width: 100%; height: calc(100vh - var(--header-h)); min-height: 680px; overflow: hidden;}
.global-flow__content {position: absolute; left: 0; top: 0; width: 100%; height: 47vh; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none;}
.global-flow__eyebrow {margin-bottom: 25px; font-size: 11px; font-weight: 700; letter-spacing: .23em; color: var(--coral);}
.global-flow__eyebrow::before, .global-flow__eyebrow::after {content: ""; display: inline-block; width: 22px; height: 1px; margin: 0 11px; vertical-align: middle; background: rgba(129, 207, 56, 0.55);}
.global-flow__text {width: min(950px, 82vw); margin: 0 auto;}
.flow-paragraph {width: 100%; font-size: clamp(20px, 2vw, 38px); font-weight: 700; line-height: 1.45; letter-spacing: -.045em; text-align: center; color: #d1d5dc;}
.flow-word {display: inline; color: #d1d5dc; opacity: .72; transition: color .3s ease, opacity .3s ease;}
.global-flow .global-map {position: absolute; left: 50%; bottom: -2vh; width: min(1600px, 120vw); height: 75vh; min-height: 430px; transform: translateX(-50%); z-index: 5; overflow: visible; pointer-events: none;}
.global-flow .global-map::before {content: ""; position: absolute; left: 50%; top: 50%; width: 75%; height: 75%; z-index: 0; transform: translate(-50%, -50%); border-radius: 50%; filter: blur(12px); background: radial-gradient(ellipse at center, rgba(112, 255, 255, 0.12), rgba(100, 255, 170, 0.04) 35%, transparent 70%);}
.global-map-image {position: absolute; inset: 0; z-index: 1; background-image: url("../images/map.jpeg"); background-repeat: no-repeat; background-position: center; background-size: cover; filter: grayscale(1) contrast(.75) brightness(1.45); mix-blend-mode: multiply; mask-image: radial-gradient(ellipse 65% 70% at center, #000 40%, rgba(0, 0, 0, .8) 68%, transparent 100%);}
.global-map-grid {position: absolute; inset: 8% 5%; z-index: 2; background-image: linear-gradient(rgba(68, 84, 119, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(68, 84, 119, .045) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000, transparent 75%);}
.global-map-glow {position: absolute; left: 50%; top: 46%; width: 430px; height: 430px; z-index: 3; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(149, 255, 100, 0.15) 0%, rgba(175, 255, 100, 0.06) 35%, rgba(107, 124, 255, .035) 50%, transparent 73%); animation: globalGlow 4s ease-in-out infinite;}
.flow-lines {position: absolute; inset: 0; width: 100%; height: 100%; z-index: 8; overflow: visible; pointer-events: none;}
.flow-line-base {fill: none; stroke: rgba(39, 187, 51, 0.28); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: .8;}
.flow-line-light {fill: none; stroke: url(#flowLightGradient); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 240 1200; filter: drop-shadow(0 0 5px rgba(113, 255, 100, 0.7)); animation: flowTravel 5.5s linear infinite;}
.flow-line-light:nth-of-type(4) {animation-delay: -.8s;}
.flow-line-light:nth-of-type(6) {animation-delay: -1.7s;}
.flow-line-light:nth-of-type(8) {animation-delay: -2.6s;}
.flow-line-light:nth-of-type(10) {animation-delay: -3.5s;}
.flow-line-light:nth-of-type(12) {animation-delay: -4.4s;}
.map-point {position: absolute; width: 9px; height: 9px; margin-left: -4.5px; margin-top: -4.5px; z-index: 20; border-radius: 50%; background: radial-gradient(circle, #fff 0%, #fff 22%, #d3ffaf 42%, var(--coral) 75%); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 0 6px rgba(124, 180, 59, 0.15), 0 0 22px rgba(196, 255, 100, 0.7); animation: mapPointPulse 2.7s ease-in-out infinite;}
.map-point::before {content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; transform: translate(-50%, -50%); border: 1px solid rgba(157, 255, 100, 0.55); border-radius: 50%; animation: mapPointRing 2.7s ease-out infinite;}
.map-point::after {content: ""; position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; transform: translate(-50%, -50%); border: 1px solid rgba(188, 255, 100, 0.18); border-radius: 50%; animation: mapPointOuterRing 2.7s ease-out infinite;}
.map-point.point-1 {left: 36.4%; top: 21.8%;}
.map-point.point-2 {left: 77%; top: 30.9%; animation-delay: -.4s;}
.map-point.point-3 {left: 41.4%; top: 49.2%; animation-delay: -.8s;}
.map-point.point-4 {left: 16.6%; top: 68.7%; animation-delay: -1.2s;}
.map-point.point-5 {left: 84%; top: 69.5%; animation-delay: -1.6s;}
.map-point.point-6 {left: 86.5%; top: 86.7%; animation-delay: -2s;}
.global-node {position: absolute; left: 50%; top: 46.15%; width: 220px; height: 220px; z-index: 30; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center;}
.node-core {position: relative; width: 98px; height: 98px; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .9); background: linear-gradient(145deg, var(--coral), #c7e056); box-shadow: 0 0 0 7px rgba(188, 255, 100, 0.08), 0 18px 45px rgba(208, 255, 100, 0.38); color: #fff;}
.node-core::after {content: ""; position: absolute; inset: 13px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%;}
.node-core strong {position: relative; z-index: 2; font-size: 16px; font-weight: 800; letter-spacing: .07em;}
.node-core small {position: relative; z-index: 2; margin-top: 7px; font-size: 6px; font-weight: 600; letter-spacing: .15em; opacity: .8;}
.node-ring {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(183, 255, 100, 0.2); animation: nodeExpansion 4s ease-out infinite;}
.node-ring-1 {width: 125px; height: 125px;}
.node-ring-2 {width: 155px; height: 155px; animation-delay: -1s;}
.node-ring-3 {width: 185px; height: 185px; animation-delay: -2s;}
.node-ring-4 {width: 215px; height: 215px; animation-delay: -3s;}


/* =========================================================
   11. VISION
========================================================= */

.vision {background: #fcfcfc;}
.section-decoration--vision {position: absolute; right: -300px; top: 50%; width: 680px; height: 680px; transform: translateY(-50%); border: 1px solid rgba(107, 124, 255, .07); border-radius: 50%;}
.section-decoration--vision::before {content: ""; position: absolute; inset: 90px; border: 1px solid rgba(255, 118, 100, .08); border-radius: 50%;}
.vision-layout {position: relative; z-index: 2; display: grid; grid-template-columns: minmax(280px, .70fr) minmax(650px, 1.65fr); gap: 80px; align-items: center;}
.vision-intro {position: sticky; top: 130px; align-self: start; padding-top: 20px;}
.vision-intro h2 {font-size: clamp(38px, 3.5vw, 70px); line-height: 1.14; letter-spacing: -.055em; color: var(--navy);}
.vision-intro h2 em {color: var(--coral);}
.vision-intro-desc {max-width: 470px; margin-top: 32px; font-size: 17px; line-height: 1.6; color: #7a818c;}
.problem-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;}
.problem-card {position: relative; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; padding: 29px 30px; border: 1px solid rgba(66, 80, 111, .09); border-radius: 22px; background: rgba(255, 255, 255, .74); box-shadow: 0 15px 40px rgba(62, 75, 105, .04); overflow: hidden; transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease, border-color .4s ease;}
.problem-card::before {content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 0; border-radius: 20px; background: linear-gradient(var(--coral), var(--blue)); transition: height .4s ease;}
.problem-card::after {content: ""; position: absolute; right: -70px; bottom: -80px; width: 130px; height: 130px; border-radius: 50%; background: rgba(107, 124, 255, .035); transition: transform .45s ease;}
.problem-card:hover {transform: translateY(-7px); border-color: rgba(135, 201, 91, 0.22); box-shadow: 0 25px 50px rgba(66, 78, 108, .08);}
.problem-card:hover::before {height: 100%;}
.problem-card:hover::after {transform: scale(1.5);}
.problem-card-top {position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between;}
.problem-number {font-size: 13px; font-weight: 700; letter-spacing: .12em; color: #a2a8b2;}
.problem-icon {width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(64, 79, 112, .10); border-radius: 13px; background: #f8f9fc; color: #6f7887; transition: background .35s ease, color .35s ease, transform .35s ease;}
.problem-icon svg {width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;}
.problem-card:hover .problem-icon {transform: translateY(-3px); background: var(--coral-bg); color: var(--coral);}
.problem-card-content {position: relative; z-index: 2; margin-top: 34px;}
.problem-card h3 {font-size: 24px; line-height: 1.35; letter-spacing: -.04em; color: var(--navy);}
.problem-card p {margin-top: 17px; font-size: 15px; line-height: 1.6; color: #838a95;}


/* =========================================================
   12. ENGINE
========================================================= */

.engine {display: flex; align-items: center; background: linear-gradient(180deg, #f7f8fb, #f3f6fb);}
.engine-background {position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 12% 20%, rgba(214, 255, 100, 0.07), transparent 25%), radial-gradient(circle at 85% 70%, rgba(107, 124, 255, .08), transparent 28%);}
.engine .container {position: relative; z-index: 2;}
.engine-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;}
.engine-card {position: relative; min-height: 555px; padding: 32px; border: 1px solid rgba(64, 79, 110, .09); border-radius: 28px; background: rgba(255, 255, 255, .88); box-shadow: 0 15px 45px rgba(59, 73, 105, .055); overflow: hidden; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease;}
.engine-card:hover {box-shadow: 0 28px 65px rgba(58, 73, 106, .10);}
.engine-card-bg {position: absolute; right: -120px; top: -120px; width: 250px; height: 250px; border-radius: 50%; background: rgba(107, 124, 255, .055);}
.engine-featured {border-color: rgba(208, 255, 100, 0.18); background: linear-gradient(155deg, #fff6f3, #fff 55%, #f7f6ff); box-shadow: 0 20px 55px rgba(208, 255, 100, 0.1);}
.engine-featured .engine-card-bg {background: rgba(214, 255, 100, 0.12);}
.engine-top {position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between;}
.engine-index {font-size: 13px; font-weight: 700; letter-spacing: .12em; color: #a1a7b2;}
.engine-type {padding: 7px 10px; border-radius: 100px; background: #f1f4f8; font-size: 11px; font-weight: 700; letter-spacing: .11em; color: #8e95a1;}
.engine-featured .engine-type {background: var(--coral-bg); color: var(--coral);}
.engine-icon {position: relative; z-index: 2; display: flex; align-items: center; min-height: 82px; margin-top: 34px;}
.engine-icon img {width: auto; height: 88px; object-fit: contain;}
.engine-card h3 {position: relative; z-index: 2; margin-top: 18px; font-size: 39px; letter-spacing: -.065em; color: var(--navy);}
.engine-card h4 {position: relative; z-index: 2; margin-top: 13px; font-size: 21px; line-height: 1.4; letter-spacing: -.045em; color: #384151;}
.engine-card p {position: relative; z-index: 2; margin-top: 18px; font-size: 15px; line-height: 1.6; color: #838a96;}


/* =========================================================
   13. WOWON ECOSYSTEM
========================================================= */

.wowon-ecosystem {position: relative; min-height: 100vh; padding: 150px 0; overflow: hidden; background: radial-gradient(circle at 50% 45%, rgba(185, 255, 94, 0.07), transparent 28%), radial-gradient(circle at 10% 80%, rgba(104, 148, 255, .05), transparent 30%), #f8f9fc;}
.wowon-eco-bg {position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(255, 255, 255, .65), transparent 20%, transparent 80%, rgba(255, 255, 255, .65));}
.wowon-eco-head {position: relative; z-index: 5; max-width: 700px; margin: 0 auto 90px; text-align: center;}
.wowon-eco-head .section-label {display: inline-block; margin-bottom: 20px; font-size: 13px; font-weight: 700; letter-spacing: .18em; color: var(--coral);}
.wowon-eco-head h2 {font-size: clamp(36px, 4vw, 58px); line-height: 1.15; letter-spacing: -.055em; color: #17233a;}
.wowon-eco-head h2 em {color: var(--coral);}
.wowon-eco-head p {margin: 25px 0 0; font-size: 17px; line-height: 1.6; letter-spacing: -.025em; color: #858d9c;}
.wowon-eco-visual {position: relative; max-width: 1180px; height: 620px; margin: 0 auto;}
.wowon-source {position: absolute; top: 50%; width: 270px; z-index: 4; display: flex; flex-direction: column; gap: 18px; transform: translateY(-50%);}
.source-left {left: 0;}
.source-right {right: 0;}
.wowon-source-card, .wowon-commerce-card {position: relative; display: flex; align-items: center; min-height: 78px; padding: 15px 17px; border: 1px solid rgba(20, 35, 60, .065); border-radius: 16px; background: rgba(255, 255, 255, .88); box-shadow: 0 18px 45px rgba(20, 35, 60, .055); backdrop-filter: blur(15px); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;}
.wowon-source-card:hover, .wowon-commerce-card:hover {transform: translateY(-5px); border-color: rgba(239, 255, 94, 0.3); box-shadow: 0 25px 55px rgba(20, 35, 60, .09);}
.source-icon, .commerce-icon {width: 45px; height: 45px; flex: 0 0 45px; display: flex; align-items: center; justify-content: center; margin-right: 13px; border-radius: 13px; background: linear-gradient(145deg, #ffffff, #f0f3f8); color: var(--coral); font-size: 18px;}
.wowon-source-card strong, .wowon-commerce-card strong {display: block; font-size: 13px; letter-spacing: -.02em; color: #17233a;}
.wowon-source-card span, .wowon-commerce-card span {display: block; margin-top: 5px; font-size: 11px; color: #979eaa;}
.wowon-source-card i {margin-left: auto; color: #c3c8d0; transition: .3s;}
.wowon-source-card:hover i {color: var(--coral); transform: translateX(4px);}
.wowon-phone-area {position: absolute; left: 50%; top: 50%; width: 500px; height: 590px; z-index: 3; transform: translate(-50%, -50%);}
.wowon-phone {position: absolute; top: 50%; width: 220px; height: 450px; transform: translateY(-50%); transition: transform .7s cubic-bezier(.2, .7, .2, 1);}
.phone-left {left: 30px; z-index: 2; transform: translateY(-50%) rotate(-5deg);}
.phone-right {right: 25px; z-index: 3; transform: translateY(-50%) rotate(5deg);}
.wowon-phone:hover.phone-left {transform: translateY(-53%) rotate(-3deg);}
.wowon-phone:hover.phone-right {transform: translateY(-53%) rotate(3deg);}
.phone-frame {position: relative; width: 100%; height: 100%; padding: 9px; border-radius: 35px; background: linear-gradient(145deg, #263044, #111827); box-shadow: 0 35px 70px rgba(20, 35, 60, .22), 0 5px 15px rgba(20, 35, 60, .15);}
.phone-screen {position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 27px; background: #f7f8fa;}
.phone-camera {position: absolute; left: 50%; top: 15px; width: 70px; height: 19px; z-index: 10; transform: translateX(-50%); border-radius: 20px; background: #111827;}
.app-header {display: flex; align-items: center; justify-content: space-between; padding: 34px 16px 12px;}
.app-header img{width: 20px; height: 20px;}
.app-logo {font-size: 15px; font-weight: 800; letter-spacing: -.06em; color: #17233a;}
.app-logo span {color: var(--coral);}
.app-search {font-size: 17px; color: #9da4af;}
.app-hero {margin: 5px 12px 15px; padding: 18px 14px; border-radius: 15px; background: linear-gradient(135deg, #17233a, #33415d); color: #fff;}
.app-hero span {display: block; margin-bottom: 7px; font-size: 7px; letter-spacing: .12em; color: #b3ff87;}
.app-hero strong {font-size: 14px; line-height: 1.35; letter-spacing: -.04em;}
.app-section-title {padding: 0 14px 10px; font-size: 10px; font-weight: 700; color: #17233a;}
.app-product-list {padding: 0 11px;}
.app-product {display: flex; align-items: center; gap: 9px; margin-bottom: 8px; padding: 8px; border-radius: 10px; background: #fff; box-shadow: 0 5px 15px rgba(20, 35, 60, .04); transition: transform .3s ease, opacity .3s ease;}
.product-image {width: 47px; height: 47px; flex: 0 0 47px; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: linear-gradient(135deg, #e9edf3, #f8f9fb); font-size: 7px; font-weight: 700; color: #a0a7b2;}
.product-image-02 {background: linear-gradient(135deg, #e4ecf7, #f1f4f8);}
.product-image-03 {background: linear-gradient(135deg, #e9f0e9, #f6f8f5);}
.product-info strong {display: block; font-size: 8px; color: #28344a;}
.product-info span {display: block; margin-top: 3px; font-size: 6px; color: #a0a6b0;}
.product-info b {display: block; margin-top: 5px; font-size: 8px; color: var(--coral);}
.product-detail-image {height: 185px; margin: 0 11px; display: flex; flex-direction: column; justify-content: flex-end; padding: 17px; border-radius: 16px; background: radial-gradient(circle at 70% 25%, rgba(212, 255, 94, 0.28), transparent 30%), linear-gradient(145deg, #e9edf3, #f8f9fb);}
.product-detail-image span {font-size: 7px; letter-spacing: .15em; color: var(--coral);}
.product-detail-image strong {margin-top: 5px; font-size: 17px; line-height: 1.15; color: #17233a;}
.detail-category {margin: 15px 14px 6px; font-size: 7px; font-weight: 700; letter-spacing: .1em; color: var(--coral);}
.phone-screen h4 {margin: 0 14px; font-size: 15px; line-height: 1.3; letter-spacing: -.04em; color: #17233a;}
.detail-price {margin: 20px 14px; font-size: 20px; font-weight: 800; color: #17233a;}
.detail-price small {font-size: 9px;}
.detail-button {position: absolute; left: 13px; right: 13px; bottom: 14px; padding: 12px; border-radius: 10px; background: #17233a; font-size: 9px; font-weight: 700; text-align: center; color: #fff;}
.wowon-ai-badge {position: absolute; left: 50%; top: 47%; width: 84px; height: 84px; z-index: 8; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(145deg, #6dffaa, #589bff); color: #fff; box-shadow: 0 15px 35px rgba(226, 255, 94, 0.28); animation: aiPulse 2.8s ease-in-out infinite;}
.wowon-ai-badge span {font-size: 9px; font-weight: 700; letter-spacing: .12em;}
.wowon-ai-badge strong {margin-top: 4px; font-size: 13px;}
.wowon-floating-label {position: absolute; z-index: 10; display: flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid rgba(20, 35, 60, .06); border-radius: 30px; background: rgba(255, 255, 255, .9); box-shadow: 0 10px 30px rgba(20, 35, 60, .06); font-size: 11px; font-weight: 700; letter-spacing: .1em; color: #858d9a;}
.floating-top {left: 50%; top: 10px; transform: translateX(-50%);}
.floating-dot {width: 6px; height: 6px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(212, 255, 94, 0.1);}
.wowon-product-popup {position: absolute; right: -10px; bottom: 50px; width: 170px; z-index: 9; padding: 14px; border: 1px solid rgba(20, 35, 60, .06); border-radius: 15px; background: rgba(255, 255, 255, .95); box-shadow: 0 20px 45px rgba(20, 35, 60, .1); animation: popupFloat 4s ease-in-out infinite;}
.popup-label {display: block; font-size: 7px; font-weight: 700; letter-spacing: .1em; color: var(--coral);}
.wowon-product-popup > strong {display: block; margin-top: 7px; font-size: 11px; line-height: 1.4; color: #17233a;}
.popup-product {display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #edf0f4;}
.popup-product-image {width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #f1f3f7; font-size: 7px; color: #a3a9b3;}
.popup-product b {display: block; font-size: 7px; color: #354056;}
.popup-product span {display: block; margin-top: 3px; font-size: 6px; color: #9ba2ad;}
.wowon-value-flow {display: flex; align-items: center; justify-content: center; gap: 16px; max-width: 920px; margin: 25px auto 0;}
.value-step {min-width: 200px; padding: 20px; text-align: center; border: 1px solid rgba(20, 35, 60, .06); border-radius: 14px; background: rgba(255, 255, 255, .7); transition: .35s;}
.value-step.active, .value-step:hover {border-color: rgba(207, 255, 94, 0.25); background: #fff; box-shadow: 0 15px 35px rgba(20, 35, 60, .06); transform: translateY(-4px);}
.value-step span {display: block; font-size: 15px; font-weight: 700; letter-spacing: .1em; color: var(--coral);}
.value-step strong {display: block; margin-top: 5px; font-size: 17px; color: #17233a;}
.value-step small {display: block; margin-top: 5px; font-size: 11px; color: #9ba2ad;}
.value-arrow {font-size: 14px; color: #c7ccd4;}
.wowon-eco-message {margin-top: 65px; text-align: center;}
.wowon-eco-message strong {display: block; font-size: 24px; letter-spacing: -.045em; color: #17233a;}
.wowon-eco-message p {margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: #8b929e;}


/* =========================================================
   14. LOCATION
========================================================= */

.location {position: relative; min-height: 100vh; padding: 140px 0; overflow: hidden;}
.location-layout {width: min(1440px, calc(100% - 80px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr); gap: 80px; align-items: center;}
.location-map-wrap {position: relative; margin-left: calc((min(100vw, 1440px) - 100vw) / 2);}
.location-map {position: relative; width: calc(100% + 70px); height: min(720px, 75vh); overflow: hidden;}
.location-map img {display: block; width: 100%; height: 100%; transform: scale(1.02);}
.location-map::before {content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, var(--bg) 0%, transparent 12%, transparent 93%, var(--bg) 100%);}
.location-map::after {content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--bg) 0%, transparent 12%, transparent 82%, var(--bg) 100%);}
.location-map-wrap .point {position: absolute; right: 0; top: 0; width: 500px; height: 500px; z-index: 10; object-fit: contain; pointer-events: none; filter: drop-shadow(0 12px 20px rgba(28, 39, 61, .10)) drop-shadow(0 28px 45px rgba(28, 39, 61, .14)) drop-shadow(0 0 30px rgba(255, 118, 100, .16)); transition: transform .6s cubic-bezier(.2, .8, .2, 1), filter .6s ease;}
.location-map-wrap:hover .point {transform: scale(1.025); filter: drop-shadow(0 16px 24px rgba(28, 39, 61, .12)) drop-shadow(0 35px 55px rgba(28, 39, 61, .18)) drop-shadow(0 0 42px rgba(255, 118, 100, .22));}
.location-content {position: relative; z-index: 5;}
.location-content h2 {margin: 22px 0 24px; font-size: clamp(42px, 4vw, 68px); line-height: 1.05; letter-spacing: -.055em;}
.location-desc {max-width: 500px; margin-bottom: 40px; font-size: 17px; line-height: 1.6; color: rgba(28, 39, 61, .62);}
.location-cards {display: flex; flex-direction: column; gap: 10px;}
.location-card {position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 20px; padding: 26px 28px; border: 1px solid rgba(28, 39, 61, .08); border-radius: 18px; background: rgba(255, 255, 255, .66); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 16px 45px rgba(28, 39, 61, .06); transition: transform .45s ease, border-color .45s ease, background .45s ease, box-shadow .45s ease;}
.location-card:hover {transform: translateX(-8px); border-color: rgba(208, 255, 100, 0.28); background: rgba(255, 255, 255, .9); box-shadow: 0 24px 60px rgba(28, 39, 61, .1);}
.location-card > span {padding-top: 3px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--coral);}
.location-card h3 {margin: 0 0 8px; font-size: 16px; letter-spacing: -.02em;}
.location-card p {margin: 0; font-size: 13px; line-height: 1.7; color: rgba(28, 39, 61, .56);}


/* =========================================================
   15. YES APM
========================================================= */

.yes-apm-section {position: relative; width: 100%; overflow: clip; background: #f7f8fb; color: #202633;}
.yes-apm-stage {width: min(1440px, calc(100% - 100px)); margin: 0 auto; display: grid; grid-template-columns: minmax(420px, .9fr) minmax(0, 1fr); align-items: start;}
.yes-apm-visual {position: sticky; top: 60px; height: 100vh; min-height: 720px; z-index: 10; display: flex; align-items: center;}
.yes-apm-visual-inner {width: 100%; display: flex; flex-direction: column; align-items: center; padding: 30px 0;}
.yes-apm-building-wrap {width: 100%; display: flex; justify-content: center; align-items: flex-end;}
.yes-apm-building {--building-width: 400px; position: relative; width: var(--building-width); padding-bottom: 42px; transform: translateZ(0); filter: drop-shadow(0 28px 35px rgba(46, 55, 77, .12));}
.yb-roof {position: relative; width: calc(100% + 26px); height: 76px; margin-left: -13px; z-index: 5; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(40, 45, 65, .08); border-radius: 18px 18px 8px 8px; background: linear-gradient(135deg, #ffffff 0%, #f3f1ff 100%); box-shadow: 0 12px 28px rgba(41, 48, 70, .09);}
.yb-roof-cap {position: absolute; left: 18px; right: 18px; top: -7px; height: 7px; border-radius: 8px 8px 0 0; background: var(--coral);}
.yb-sign {display: flex; flex-direction: column; align-items: center; gap: 4px;}
.yb-sign strong {font-size: 22px; font-weight: 900; line-height: 1; letter-spacing: -.08em; color: #202633;}
.yb-sign span {font-size: 6px; font-weight: 800; letter-spacing: .13em; color: #9299a6;}
.yb-front {position: relative; width: 100%; border: 1px solid rgba(42, 48, 67, .08); border-top: 0; border-radius: 0 0 8px 8px; background: #ffffff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65);}
.yb-floor {position: relative; height: 60px; display: flex; align-items: center; padding: 0 22px; overflow: hidden; border-bottom: 1px solid rgba(42, 48, 67, .07); cursor: pointer; transition: .45s cubic-bezier(.2, .8, .2, 1);}
.yb-floor::before {content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--floor-color); opacity: .35; transition: .4s ease;}
.yb-floor::after {content: ""; position: absolute; right: -30px; top: 50%; width: 100px; height: 100px; border-radius: 50%; transform: translateY(-50%); background: var(--floor-color); opacity: .055; transition: .5s ease;}
.yb-floor-8 {--floor-color: #8b7cf6; background: #fbfaff;}
.yb-floor-7 {--floor-color: #ff8a76; background: #fffaf8;}
.yb-floor-6 {--floor-color: #6c9cff; background: #f8faff;}
.yb-floor-5 {--floor-color: #ffbd61; background: #fffdf7;}
.yb-floor-4 {--floor-color: #55c6aa; background: #f8fdfb;}
.yb-floor-3 {--floor-color: #f27baf; background: #fff9fc;}
.yb-floor-2 {--floor-color: #62b7e9; background: #f8fcff;}
.yb-floor-1 {--floor-color: #ff7664; background: #fff9f7;}
.yb-floor.is-active, .yb-basement.is-active {opacity: 1; z-index: 50; transform: translate3d(0, -10px, 35px) scale(1.05); filter: saturate(1.35) brightness(1.18) contrast(1.04); box-shadow: 0 8px 18px rgba(22, 30, 48, .08), 0 18px 35px rgba(22, 30, 48, .14), 0 30px 60px rgba(22, 30, 48, .12), 0 0 35px rgba(255, 118, 100, .22); transition: transform .55s cubic-bezier(.16, 1, .3, 1), filter .45s ease, opacity .45s ease, box-shadow .55s ease;}
.yb-floor.is-active {left: 8px;}
.yb-floor.is-active::before, .yb-basement.is-active::before {width: 8px; opacity: 1;}
.yb-floor.is-active::after {opacity: .12; transform: translateY(-50%) scale(1.25);}
.yb-floor.is-active .yb-floor-label, .yb-basement.is-active .yb-floor-label {color: #111827;}
.yb-floor-number {position: relative; z-index: 2; width: 48px; font-size: 19px; line-height: 1; font-weight: 900; letter-spacing: -.07em; color: #252b38;}
.yb-floor-label {position: relative; z-index: 2; font-size: 11px; font-weight: 900; letter-spacing: .13em; color: #9aa1ad;}
.yb-basement {--floor-color: #667085; position: relative; height: 60px; display: flex; align-items: center; padding: 0 22px; background: #eef0f5; border: 1px solid rgba(42, 48, 67, .08); border-top: 0; cursor: pointer; transition: .4s ease;}
.yb-basement::before {content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--floor-color); opacity: .35; transition: .4s ease;}
.yb-basement-2 {--floor-color: #5969a8; background: #eef0fa;}
.yes-apm-content {position: relative; min-width: 0;}
.yes-apm-content-head {min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; padding: 75px 0 42px;}
.yes-apm-eyebrow {display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; font-weight: 900; letter-spacing: .15em; color: var(--coral);}
.yes-apm-eyebrow::before {content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(255, 118, 100, .1);}
.yes-apm-content-head h2 {margin: 12px 0 9px; font-size: clamp(31px, 3.2vw, 70px); line-height: 1.14; font-weight: 700; letter-spacing: -.065em; color: #202633;}
.yes-apm-content-head h2 strong {font-weight: 800; color: var(--coral);}
.yes-apm-content-head p {margin-top: 10px; font-size: 17px; line-height: 1.6; color: #8a919d;}
.yes-apm-card {display: flex; flex-direction: column; justify-content: center; padding: 40px; margin: 50px auto; border-radius: 20px; background: #fff; opacity: .18; transform: translateY(28px); transition: opacity .65s ease, transform .75s cubic-bezier(.2, .8, .2, 1);}
.yes-apm-card.is-active {opacity: 1; transform: translateY(0);}
.yac-top {display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px;}
.yac-floor {display: flex; align-items: baseline; gap: 10px;}
.yac-floor strong {font-size: 39px; line-height: .9; font-weight: 900; letter-spacing: -.08em; color: #202633;}
.yac-index {font-size: 13px; color: #a4aab4;}
.yac-main {padding: 0 0 25px;}
.yac-main h3 {margin: 11px 0 14px; font-size: clamp(30px, 3.2vw, 36px); line-height: 1.14; font-weight: 300; letter-spacing: -.065em; color: #202633;}
.yac-main h3 em {font-weight: 800; color: var(--coral);}
.yac-main p {margin: 0; font-size: 15px; line-height: 1.6; color: #7f8793; word-break: keep-all;}
.yac-bottom {display: flex; align-items: center; flex-wrap: wrap; gap: 5px; padding-top: 14px; border-top: 1px solid rgba(32, 38, 51, .08);}
.yac-bottom span {display: inline-flex; align-items: center; min-height: 25px; padding: 0 9px; border: 1px solid rgba(32, 38, 51, .06); border-radius: 999px; background: rgba(255, 255, 255, .8); font-size: 11px; font-weight: 900; letter-spacing: .08em; color: #808894;}
.yes-apm-end {height: 35vh;}


/* =========================================================
   16. PROJECT
========================================================= */

.project {position: relative; display: flex; align-items: center; min-height: 100vh; padding: 150px 0 130px; overflow: hidden; background: linear-gradient(180deg, #f8f8fb 0%, #f4f9fa 100%);}
.project-bg {position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 8% 20%, rgba(107, 124, 255, .055), transparent 25%), radial-gradient(circle at 90% 30%, rgba(100, 180, 255, 0.09), transparent 28%), radial-gradient(circle at 50% 100%, rgba(120, 160, 255, .05), transparent 35%);}
.project-bg::after {content: ""; position: absolute; inset: 0; opacity: .35; background-image: linear-gradient(rgba(20, 31, 52, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 31, 52, .025) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(to bottom, #000, transparent 85%);}
.project .container {position: relative; z-index: 2;}
.project-head {display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; margin-bottom: 65px;}
.project-title-wrap {max-width: 850px;}
.project-head .section-label {display: inline-block; margin-bottom: 22px; font-size: 13px; font-weight: 800; letter-spacing: .18em; color: var(--coral);}
.project-head h2 {font-size: clamp(43px, 5.5vw, 70px); line-height: 1.03; letter-spacing: -.075em; color: var(--navy);}
.project-head h2 em {color: var(--coral);}
.project-lead {margin-top: 25px; font-size: 17px; line-height: 1.8; letter-spacing: -.025em; color: #858b96;}
.project-cards {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;}
.project-card {position: relative; min-height: 690px; display: flex; flex-direction: column; padding: 28px; border: 1px solid rgba(25, 35, 55, .075); border-radius: 28px; background: rgba(255, 255, 255, .72); box-shadow: 0 25px 70px rgba(36, 45, 65, .055); overflow: hidden; transition: transform .55s cubic-bezier(.2, .8, .2, 1), box-shadow .55s ease, border-color .55s ease;}
.project-card:hover {transform: translateY(-10px); border-color: rgba(100, 219, 255, 0.16); box-shadow: 0 35px 85px rgba(36, 45, 65, .12);}
.card-visual {position: relative; height: 190px; margin: 22px -4px 25px; border-radius: 20px; overflow: hidden; background: linear-gradient(145deg, #27364d, #182538);}
.project-card-ppl .card-visual {background: radial-gradient(circle at 50% 50%, rgba(100, 255, 234, 0.18), transparent 42%), linear-gradient(145deg, #29374e, #162338);}
.visual-orbit {position: absolute; left: 50%; top: 50%; border: 1px solid rgba(255, 255, 255, .1); border-radius: 50%; transform: translate(-50%, -50%) rotate(-15deg);}
.orbit-01 {width: 270px; height: 100px;}
.orbit-02 {width: 205px; height: 75px; border-color: rgba(183, 255, 100, 0.22); transform: translate(-50%, -50%) rotate(25deg);}
.visual-center {position: absolute; left: 50%; top: 50%; width: 105px; height: 105px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, #34465f, #202f45); box-shadow: 0 15px 40px rgba(0, 0, 0, .2);}
.visual-center span {font-size: 6px; letter-spacing: .15em; color: rgba(255, 255, 255, .45);}
.visual-center strong {margin-top: 4px; font-size: 48px; line-height: .9; letter-spacing: -.08em; color: var(--coral);}
.zone-visual {background: linear-gradient(135deg, #f0f1f6, #e8ebf2);}
.zone-grid {position: absolute; inset: 0; background-image: linear-gradient(rgba(25, 35, 55, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(25, 35, 55, .045) 1px, transparent 1px); background-size: 28px 28px;}
.zone-box {position: absolute; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(25, 35, 55, .09); border-radius: 10px; background: rgba(255, 255, 255, .65); box-shadow: 0 12px 25px rgba(35, 45, 65, .06); font-size: 7px; font-weight: 800; letter-spacing: .12em; color: #737b88;}
.zone-box-01 {width: 70px; height: 48px; left: 24px; top: 30px;}
.zone-box-02 {width: 75px; height: 55px; right: 25px; top: 25px; border-color: rgba(100, 255, 242, 0.16); background: rgba(100, 237, 255, 0.08); color: var(--coral);}
.zone-box-03 {width: 75px; height: 48px; left: 38px; bottom: 24px;}
.zone-center {position: absolute; left: 50%; top: 50%; width: 125px; height: 125px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; transform: translate(-50%, -50%); background: #202e43; box-shadow: 0 20px 40px rgba(25, 35, 55, .2);}
.zone-center span {font-size: 13px; font-weight: 800; letter-spacing: -.04em; color: var(--coral);}
.zone-center strong {margin-top: 2px; font-size: 25px; line-height: 1; letter-spacing: -.06em; color: #fff;}
.global-visual {background: radial-gradient(circle at 50% 50%, rgba(214, 255, 100, 0.14), transparent 35%), #172538;}
.global-visual .global-map {position: absolute; inset: 0; opacity: .28; background-image: radial-gradient(circle, rgba(255, 255, 255, .55) 1px, transparent 1px); background-size: 9px 9px; mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);}
.global-point {position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px rgba(255, 118, 100, .08), 0 0 20px rgba(208, 255, 100, 0.4);}
.global-point.point-01 {left: 20%; top: 36%;}
.global-point.point-02 {left: 35%; top: 58%;}
.global-point.point-03 {left: 58%; top: 30%;}
.global-point.point-04 {right: 22%; top: 48%;}
.global-point.point-05 {right: 13%; bottom: 27%;}
.global-core {position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(126, 255, 100, 0.35); border-radius: 50%; transform: translate(-50%, -50%); background: rgba(22, 35, 53, .88); box-shadow: 0 0 0 18px rgba(255, 118, 100, .025), 0 0 50px rgba(100, 250, 255, 0.12);}
.global-core span {font-size: 6px; letter-spacing: .18em; color: rgba(255, 255, 255, .45);}
.global-core strong {margin-top: 6px; font-size: 17px; letter-spacing: -.04em; color: var(--coral);}
.card-content {position: relative; z-index: 3;}
.card-label {display: block; font-size: 11px; font-weight: 800; letter-spacing: .15em; color: var(--coral);}
.card-content h3 {margin-top: 12px; font-size: clamp(27px, 2.3vw, 35px); line-height: 1.08; letter-spacing: -.065em; color: var(--navy);}
.card-content h3 em {color: var(--coral);}
.card-description {margin-top: 16px; font-size: 15px; line-height: 1.6; letter-spacing: -.02em; color: #858c97;}
.card-points {margin: 24px 0 0; border-top: 1px solid rgba(25, 35, 55, .08);}
.card-points li {display: flex; gap: 13px; padding: 14px 0; border-bottom: 1px solid rgba(25, 35, 55, .06);}
.card-points li > span {flex: 0 0 auto; padding-top: 7px; font-size: 7px; font-weight: 800; letter-spacing: .08em; color: #b1b6be;}
.card-points li strong {display: block; font-size: 17px; letter-spacing: -.02em; color: var(--navy);}
.card-points li p {margin-top: 10px; font-size: 13px; line-height: 1.45; color: #9a9fa7;}


/* =========================================================
   17. JANGGEUM
========================================================= */

.project-janggeum {position: relative; padding: 150px 0 160px; overflow: hidden; background: linear-gradient(180deg, #f4fbff 0%, #ecf4ff 48%, #eceef1 100%); color: #1b252b;}
.project-janggeum .container {position: relative; z-index: 2;}
.project-janggeum .section-label {color: #3d5c79 !important;}
.janggeum-bg {position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;}
.bg-circle {position: absolute; border-radius: 50%; border: 1px solid rgba(92, 67, 48, .08);}
.bg-circle-01 {width: 620px; height: 620px; right: -240px; top: 80px;}
.bg-circle-02 {width: 900px; height: 900px; left: -600px; bottom: -300px;}
.bg-line {position: absolute; width: 100%; height: 1px; background: rgba(78, 58, 43, .07);}
.bg-line-01 {top: 27%;}
.bg-line-02 {top: 73%;}
.janggeum-head {display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; margin-bottom: 90px;}
.janggeum-head h2 {font-size: clamp(48px, 5.4vw, 70px); line-height: 1.06; font-weight: 700; letter-spacing: -.055em;}
.janggeum-head h2 em {color: #3d5e79;}
.janggeum-head-meta {display: flex; align-items: center; gap: 24px; padding-bottom: 8px; font-size: 15px; font-weight: 700; letter-spacing: .12em; color: #64768b;}
.janggeum-head-meta span {position: relative;}
.janggeum-head-meta span:not(:last-child)::after {content: ""; position: absolute; right: -13px; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: #7998a1; transform: translateY(-50%);}
.janggeum-main {display: grid; grid-template-columns: minmax(360px, .78fr) minmax(500px, 1.22fr); gap: clamp(60px, 8vw, 100px); align-items: center; margin-bottom: 120px;}
.janggeum-poster-wrap {position: relative;}
.janggeum-poster {position: relative; height: 600px; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.janggeum-video {width: auto; height: 100%; min-width: 100%; object-fit: cover; object-position: center; flex-shrink: 0;}
.poster-overlay {position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; padding: 22px; background: linear-gradient(to top, rgba(20, 15, 11, .9), transparent); color: #fff;}
.poster-overlay span {font-size: 9px; letter-spacing: .18em; opacity: .75;}
.poster-overlay strong {font-size: 11px; letter-spacing: .18em;}
.janggeum-content {max-width: 760px;}
.ip-kicker {display: block; margin-bottom: 16px; font-size: 11px; font-weight: 900; letter-spacing: .16em; color: #627b98;}
.ip-title h3 {font-size: clamp(44px, 5vw, 60px); line-height: 1; letter-spacing: -.055em;}
.ip-title h3 em {color: #3d6379;}
.ip-description {max-width: 680px; margin: 25px 0 50px; font-size: 17px; line-height: 1.6; letter-spacing: -.025em; color: #47545f;}
.ip-info-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(62, 45, 34, .18);}
.ip-info {min-height: 140px; padding: 25px 24px 24px 0; border-bottom: 1px solid rgba(62, 45, 34, .12);}
.ip-info:nth-child(odd) {padding-right: 30px; border-right: 1px solid rgba(34, 46, 62, 0.12);}
.ip-info:nth-child(even) {padding-left: 30px;}
.ip-info span {display: block; margin-bottom: 12px; font-size: 9px; font-weight: 800; letter-spacing: .18em; color: #6f899b;}
.ip-info strong {display: block; margin-bottom: 7px; font-size: 20px; letter-spacing: -.02em;}
.ip-info p {margin: 0; font-size: 15px; line-height: 1.6; color: #69778a;}
.ip-tags {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px;}
.ip-tags span {padding: 8px 12px; border: 1px solid rgba(89, 67, 51, .16); border-radius: 50px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #596e80;}
.janggeum-consortium {position: relative;}
.consortium-head {display: grid; grid-template-columns: 1fr 1fr; align-items: end; margin-bottom: 60px;}
.consortium-head h3 {font-size: clamp(38px, 4vw, 62px); line-height: 1.08; letter-spacing: -.05em;}
.consortium-head h3 em {color: #3d5079;}
.consortium-head p {margin: 0; font-size: 17px; font-weight: 500; line-height: 1.6; text-align: right; color: #596576;}
.consortium-grid {display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(60, 45, 34, .17); border-left: 1px solid rgba(60, 45, 34, .12);}
.consortium-card {position: relative; min-height: 420px; padding: 28px 30px 30px; border-right: 1px solid rgba(60, 45, 34, .12); border-bottom: 1px solid rgba(60, 45, 34, .12); background: rgba(255, 255, 255, .17); transition: background .35s ease, transform .35s ease;}
.consortium-card:hover {background: rgba(255, 255, 255, .48); transform: translateY(-5px);}
.card-icon {display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin: 55px 0 28px; border: 1px solid rgba(85, 63, 47, .22); border-radius: 50%; font-size: 22px; font-weight: 300; color: #3d5979;}
.consortium-card h4 {margin: 0 0 15px; font-size: 27px; letter-spacing: -.045em;}
.consortium-card > p {margin: 0; min-height: 58px; font-size: 14px; line-height: 1.7; color: #4a5e66;}
.card-detail {margin-top: 30px; padding-top: 25px; border-top: 1px solid rgba(34, 41, 60, 0.11); font-size: 12px; font-weight: 800; line-height: 1.75; color: #798fa1;}
.janggeum-bottom {display: grid; grid-template-columns: 1fr auto; column-gap: 40px; align-items: end; margin-top: 90px;}
.bottom-line {grid-column: 1 / -1; width: 100%; height: 1px; margin-bottom: 28px; background: rgba(60, 45, 34, .17);}
.janggeum-bottom p {margin: 0; max-width: 720px; font-size: 16px; line-height: 1.8; color: #586a76;}
.janggeum-bottom p strong {color: #2b3949;}
.janggeum-bottom > span {font-size: 9px; font-weight: 800; letter-spacing: .16em; color: #6f899b;}


/* =========================================================
   18. INVESTMENT
========================================================= */

.investment {position: relative; padding: 150px 0 170px; overflow: hidden; background: var(--bg); color: var(--text);}
.investment-paper {position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 88% 12%, rgba(255, 245, 100, 0.08), transparent 30%), radial-gradient(circle at 10% 80%, rgba(102, 124, 255, .055), transparent 28%);}
.investment-intro {position: relative; z-index: 1; max-width: 1050px; margin-bottom: 110px;}
.investment-kicker {display: flex; align-items: center; gap: 12px; margin-bottom: 26px; font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--coral);}
.investment-kicker i {width: 34px; height: 1px; background: var(--coral-light);}
.investment-intro h2 {font-size: clamp(42px, 5vw, 70px); font-weight: 600; line-height: 1.12; letter-spacing: -.065em; color: var(--text);}
.investment-intro h2 em {position: relative; font-weight: 700; color: var(--coral);}
.investment-intro h2 em::after {content: ""; position: absolute; left: 0; bottom: -8px; width: 100%; height: 3px; border-radius: 10px; background: var(--coral-light);}
.investment-intro p {max-width: 780px; margin: 36px 0 0; font-size: 17px; line-height: 1.6; letter-spacing: -.025em; color: var(--text-soft);}
.investment-model {position: relative; z-index: 1;}
.investment-model-head {display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 34px;}
.investment-model-head h3, .milestone-head h3 {font-size: 40px; font-weight: 300; line-height: 1.25; letter-spacing: -.05em; color: var(--text);}
.investment-model-head h3 strong, .milestone-head h3 strong {font-weight: 700; color: var(--navy);}
.revenue-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;}
.revenue-card {position: relative; min-height: 370px; display: flex; flex-direction: column; padding: 28px; border: 1px solid rgba(30, 42, 62, .08); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .82); box-shadow: var(--shadow-soft); transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease, border-color .45s ease, background .45s ease;}
.revenue-card:hover {transform: translateY(-8px); border-color: rgba(214, 255, 100, 0.25); background: var(--white); box-shadow: var(--shadow);}
.revenue-top {display: flex; align-items: center; justify-content: space-between;}
.revenue-num {display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bg-soft); font-size: 10px; font-weight: 700; color: var(--navy);}
.revenue-type {font-size: 8px; font-weight: 600; letter-spacing: .13em; color: var(--text-light);}
.revenue-content {margin-top: auto; margin-bottom: 48px;}
.revenue-content h4 {margin: 0 0 16px; font-size: 24px; font-weight: 700; line-height: 1.24; letter-spacing: -.05em; color: var(--text);}
.revenue-content p {max-width: 230px; margin: 0; font-size: 15px; line-height: 1.6; letter-spacing: -.025em; color: var(--text-soft);}
.revenue-bottom {display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 20px; border-top: 1px solid var(--line);}
.revenue-bottom small {display: block; margin-bottom: 7px; font-size: 11px; font-weight: 500; color: var(--text-light);}
.revenue-bottom strong {display: block; font-size: 11px; font-weight: 500; line-height: 1.45; color: var(--text-soft);}
.revenue-bottom strong b {display: block; margin-top: 2px; font-size: 15px; font-weight: 700; color: var(--coral);}
.revenue-card.featured {overflow: hidden; border-color: var(--navy); background: var(--navy); color: var(--white); box-shadow: 0 25px 70px rgba(24, 37, 60, .18);}
.revenue-card.featured::before {content: ""; position: absolute; right: -65px; top: -65px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255, 245, 100, 0.18);}
.revenue-card.featured:hover {transform: translateY(-8px); background: #202e47; box-shadow: 0 30px 80px rgba(24, 37, 60, .22);}
.revenue-card.featured .revenue-num {position: relative; z-index: 1; background: rgba(255, 255, 255, .1); color: var(--coral-light);}
.revenue-card.featured .revenue-type {position: relative; z-index: 1; color: rgba(255, 255, 255, .5);}
.revenue-card.featured .revenue-content {position: relative; z-index: 1;}
.revenue-card.featured .revenue-content h4 {color: var(--white);}
.revenue-card.featured .revenue-content p {color: rgba(255, 255, 255, .62);}
.revenue-card.featured .revenue-bottom {position: relative; z-index: 1; border-color: rgba(255, 255, 255, .12);}
.revenue-card.featured .revenue-bottom small {color: rgba(255, 255, 255, .45);}
.revenue-card.featured .revenue-bottom strong {color: rgba(255, 255, 255, .72);}
.revenue-card.featured .revenue-bottom strong b {color: var(--coral-light);}
.milestone {position: relative; z-index: 1; margin-top: 145px;}
.milestone-head {display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 62px;}
.milestone-period {padding: 8px 13px; border-radius: 999px; background: var(--white); font-size: 9px; letter-spacing: .1em; color: var(--text-soft); box-shadow: 0 5px 20px rgba(47, 62, 94, .05);}
.milestone-track {position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;}
.milestone-progress {position: absolute; left: 30px; right: 30px; top: 100px; height: 2px; z-index: 0; overflow: hidden; background: rgba(30, 42, 62, .08);}
.milestone-progress span {position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, var(--coral-light) 0%, var(--coral) 45%, var(--coral) 100%); transition: transform 6s cubic-bezier(.16, 1, .3, 1);}
.milestone.is-active .milestone-progress span {transform: scaleX(1);}
.milestone-item {position: relative; padding: 0 10px;}
.milestone-year {height: 80px; display: flex; flex-direction: column;}
.milestone-year strong {font-size: 34px; font-weight: 600; letter-spacing: -.045em; color: var(--navy);}
.milestone-year small {margin-top: 3px; font-size: 13px; color: var(--text-light);}
.milestone-dot {position: relative; z-index: 3; width: 40px; height: 40px; margin-bottom: 24px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(227, 255, 100, 0.45); border-radius: 50%; background: var(--white); box-shadow: 0 0 0 6px rgba(183, 255, 100, 0.07); transition: transform .25s ease, box-shadow .25s ease, background .25s ease;}
.milestone-dot i {display: block; width: 20px; height: 20px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 12px rgba(201, 255, 100, 0.35); transform: scale(.65); transition: transform .25s ease;}
.milestone-item.active .milestone-dot {transform: scale(1.08); border-color: var(--coral); background: var(--coral); box-shadow: 0 0 0 7px rgba(221, 255, 100, 0.1), 0 0 0 13px rgba(239, 255, 100, 0.035), 0 8px 25px rgba(201, 255, 100, 0.2);}
.milestone-item.active .milestone-dot i {width: 8px; height: 8px; background: var(--white); box-shadow: none; transform: scale(1);}
.milestone-info {padding: 0 18px 0 0;}
.milestone-info h4 {margin: 0 0 13px; font-size: 24px; font-weight: 700; line-height: 1.35; letter-spacing: -.045em; color: var(--text);}
.milestone-info p {margin: 0; font-size: 15px; line-height: 1.6; letter-spacing: -.025em; color: var(--text-soft);}


/* =========================================================
   19. CONTACT
========================================================= */

.contact {position: relative; min-height: initial; padding: 170px 0 150px; overflow: hidden; background: #f7f7f5; color: #1b1b1b;}
.contact-intro {position: relative; z-index: 1; max-width: 900px;}
.contact-intro .section-label {display: block; margin-bottom: 26px; font-size: 13px; letter-spacing: .2em; color: #999;}
.contact-intro h2 {font-size: clamp(48px, 5.4vw, 70px); line-height: 1.06; font-weight: 600; letter-spacing: -.065em;}
.contact-intro h2 em {color: var(--coral);}
.contact-leadership {position: relative; z-index: 1; display: grid; grid-template-columns: 260px 1fr; gap: 80px; padding: 65px 0;}
.leader-visual {position: relative; display: flex; align-items: center; justify-content: center; min-height: 290px; overflow: hidden;}
.leader-visual img {position: absolute; bottom: -14px; max-width: 300px; z-index: 9;}
.leader-visual::before {content: ""; position: absolute; width: 210px; height: 210px; border-radius: 50%; border: 4px solid rgba(187, 239, 104, 0.35);}
.leader-visual::after {content: ""; position: absolute; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(187, 239, 104, 0.25), rgba(239, 126, 104, .04) 65%, transparent 70%);}
.leader-info {display: flex; flex-direction: column; justify-content: center;}
.leader-label {display: flex; align-items: center; gap: 12px; margin-bottom: 20px;}
.leader-label span {font-size: 13px; font-weight: 700; color: var(--coral);}
.leader-label i {width: 3px; height: 3px; border-radius: 50%; background: #ccc;}
.leader-label small {font-size: 11px; color: #999;}
.leader-name {display: flex; align-items: baseline; gap: 20px;}
.leader-name h3 {font-size: clamp(34px, 5vw, 46px); line-height: 1; font-weight: 500; letter-spacing: -.07em;}
.leader-name span {font-size: 13px; font-weight: 700; color: #222;}
.leader-career {display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 42px; border-top: 1px solid #ddd;}
.career-item {padding: 22px 25px 0 0; border-right: 1px solid #ddd;}
.career-item + .career-item {padding-left: 25px;}
.career-item:last-child {border-right: 0;}
.career-item strong {display: block; margin-bottom: 10px; font-size: 11px; letter-spacing: .16em; color: var(--coral);}
.career-item p {margin: 0; font-size: 13px; line-height: 1.6; color: #777;}


/* =========================================================
   20. FOOTER
========================================================= */

.footer {position: relative; padding: 0 0 45px; overflow: hidden; background: #181818; color: #fff;}
.footer::before {content: ""; position: absolute; right: -250px; top: -400px; width: 800px; height: 800px; border-radius: 50%; background: radial-gradient(circle, rgba(239, 126, 104, .12), transparent 68%); pointer-events: none;}
.footer::after {content: ""; position: absolute; left: -250px; bottom: -300px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(239, 126, 104, .06), transparent 70%); pointer-events: none;}
.footer-partnership {position: relative; z-index: 1; display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; padding: 120px 0; border-bottom: 1px solid rgba(255, 255, 255, .12);}
.footer-cta {padding-top: 10px;}
.footer-cta-label {display: block; margin-bottom: 30px; font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--coral);}
.footer-cta h2 {font-size: clamp(42px, 4.3vw, 68px); line-height: 1.08; font-weight: 500; letter-spacing: -.065em;}
.footer-cta h2 em {color: var(--coral);}
.footer-cta > p {margin: 32px 0 0; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .52);}
.footer-keywords {display: flex; flex-wrap: wrap; gap: 7px; margin-top: 45px;}
.footer-keywords span {display: inline-flex; align-items: center; padding: 9px 13px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 30px; font-size: 11px; letter-spacing: .08em; color: rgba(255, 255, 255, .5); font-weight: bold;}
.footer-keywords span:first-child {border-color: rgba(198, 239, 104, 0.55); color: var(--coral);}
.footer-form-wrap {padding: 45px 50px; background: #222; border: 1px solid rgba(255, 255, 255, .08);}
.footer-form-head {display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 28px; margin-bottom: 32px; border-bottom: 1px solid rgba(255, 255, 255, .12);}
.footer-form-head > span {font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--coral);}
.footer-form-head p {margin: 0; font-size: 13px; line-height: 1.6; text-align: right; color: rgba(255, 255, 255, .4);}
.footer-form-row {display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;}
.footer-field {margin-bottom: 25px;}
.footer-field label {display: block; margin-bottom: 9px; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .72);}
.footer-field label i {color: var(--coral);}
.footer-field input, .footer-field textarea {display: block; width: 100%; padding: 11px 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .18); outline: none; background: transparent; font-family: inherit; font-size: 15px; color: #fff; transition: border-color .25s ease;}
.footer-field input::placeholder, .footer-field textarea::placeholder {color: rgba(255, 255, 255, .25);}
.footer-field input:focus, .footer-field textarea:focus {border-color: var(--coral);}
.footer-field textarea {min-height: 90px; resize: vertical; line-height: 1.7;}
.footer-types {display: flex; flex-wrap: wrap; gap: 6px;}
.footer-types label {cursor: pointer;}
.footer-types input {position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;}
.footer-types span {display: flex; align-items: center; height: 31px; padding: 5px 13px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 30px; font-size: 13px; color: rgba(255, 255, 255, .5); transition: .25s ease;}
.footer-types label:hover span {border-color: var(--coral); color: var(--coral);}
.footer-types input:checked + span {border-color: var(--coral); background: var(--coral); color: #fff;}
.footer-form-bottom {display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 22px; margin-top: 5px;}
.footer-agree {display: flex; align-items: center; gap: 8px; cursor: pointer;}
.footer-agree input {position: absolute; width: 1px; height: 1px; opacity: 0;}
.footer-agree span {position: relative; width: 14px; height: 14px; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, .3);}
.footer-agree input:checked + span {border-color: var(--coral); background: var(--coral);}
.footer-agree input:checked + span::after {content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 8px; color: #fff;}
.footer-agree em {font-size: 13px; color: rgba(255, 255, 255, .35);}
.footer-submit {display: flex; align-items: center; justify-content: space-between; width: 205px; padding: 16px 18px; border: 0; background: var(--coral); color: #fff; cursor: pointer; transition: background .3s ease, transform .3s ease;}
.footer-submit span {font-size: 15px; font-weight: 600;}
.footer-submit strong {font-size: 16px; font-weight: 400; transition: transform .3s ease;}
.footer-submit:hover {background: #fff; color: #222; transform: translateY(-2px);}
.footer-submit:hover strong {transform: translate(4px, -4px);}
.footer-brand {position: relative; z-index: 1;}
.footer-top {display: flex; align-items: center; justify-content: space-between; padding: 45px 0 35px;}
.footer-logo {color: #fff;}
.footer-logo .logo-mark {border-color: rgba(255, 255, 255, .4);}
.footer-top p {margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .16em; color: rgba(255, 255, 255, .3);}
.footer-middle {display: flex; align-items: center; gap: 22px; padding: 25px 0; border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .08);}
.footer-middle span {font-size: 10px; letter-spacing: .12em; color: rgba(255, 255, 255, .45);}
.footer-middle span:last-child {color: var(--coral);}
.footer-middle i {font-size: 12px; color: rgba(255, 255, 255, .2);}
.footer-bottom {display: flex; justify-content: space-between; align-items: center; padding-top: 28px;}
.footer-bottom span {font-size: 11px; letter-spacing: .08em; color: rgba(255, 255, 255, .25);}


/* =========================================================
   21. REVEAL
========================================================= */

.reveal {opacity:1!important; filter:none!important; -webkit-filter:none!important; transform:translate3d(0,35px,0) scale(.98); transition:transform .65s cubic-bezier(.16,1.25,.3,1);}
.reveal.is-visible {opacity:1!important; filter:none!important; -webkit-filter:none!important; transform:translate3d(0,0,0) scale(1);}
.reveal.is-settled {opacity:1!important; filter:none!important; -webkit-filter:none!important; transform:translate3d(0,0,0) scale(1);}


/* =========================================================
   22. KEYFRAMES
========================================================= */

@keyframes openingScroll {0% {opacity: 0; transform: translate(-50%, 0);} 30%, 70% {opacity: 1;} 100% {opacity: 0; transform: translate(-50%, 8px);}}
@keyframes liquidPulse {0%, 100% {opacity: .3; transform: scale(.7) translateY(0);} 50% {opacity: 1; transform: scale(1.25) translateY(-7px);}}
@keyframes globalGlow {0%, 100% {transform: translate(-50%, -50%) scale(.92); opacity: .65;} 50% {transform: translate(-50%, -50%) scale(1.08); opacity: 1;}}
@keyframes flowTravel {from {stroke-dashoffset: 0;} to {stroke-dashoffset: -1440;}}
@keyframes mapPointPulse {0%, 100% {transform: scale(.9);} 50% {transform: scale(1.18);}}
@keyframes mapPointRing {0% {transform: translate(-50%, -50%) scale(.55); opacity: .75;} 100% {transform: translate(-50%, -50%) scale(1.55); opacity: 0;}}
@keyframes mapPointOuterRing {0% {transform: translate(-50%, -50%) scale(.45); opacity: .5;} 100% {transform: translate(-50%, -50%) scale(1.45); opacity: 0;}}
@keyframes nodeExpansion {0% {transform: translate(-50%, -50%) scale(.6); opacity: .6;} 70% {opacity: .18;} 100% {transform: translate(-50%, -50%) scale(1.2); opacity: 0;}}
@keyframes aiPulse {0%, 100% {box-shadow: 0 15px 35px rgba(201, 255, 233, .25), 0 0 0 0 rgba(201, 265, 94, .15);} 50% {box-shadow: 0 15px 45px rgba(201, 280, 94, .35), 0 0 0 15px rgba(255, 112, 94, 0);}}
@keyframes popupFloat {0%, 100% {transform: translateY(0);} 50% {transform: translateY(-7px);}}


/* =========================================================
   23. RESPONSIVE
========================================================= */

@media (max-width: 1280px) {
    .container, .header-inner, .hero-inner {width: min(calc(100% - 60px), var(--container));}
    .hero-inner {grid-template-columns: .95fr 1.05fr; gap: 45px;}
    .vision-layout {grid-template-columns: .65fr 1.65fr; gap: 52px;}
    .location-layout {grid-template-columns: 1.2fr .8fr;}
}

@media (max-width: 1200px) {
    .hero-visual {width: 50vw;}
    .wowon-liquid {transform: scale(.88); transform-origin: center;}
    .project {padding: 120px 0 100px;}
    .project-head {align-items: flex-start;}
    .project-card {min-height: 670px; padding: 24px;}
    .card-content h3 {font-size: 29px;}
    .revenue-grid {grid-template-columns: repeat(2, 1fr);}
    .revenue-card {min-height: 340px;}
    .milestone-track {grid-template-columns: repeat(2, 1fr); row-gap: 70px;}
}

@media (max-width: 1150px) {
    .yes-apm-stage {width: calc(100% - 60px); grid-template-columns: minmax(330px, .8fr) minmax(0, 1fr); column-gap: 55px;}
    .yes-apm-content-head h2 {font-size: 35px;}
    .yac-main h3 {font-size: 38px;}
}

@media (max-width: 1100px) {
    .hero {align-items: flex-start;}
    .hero-inner {grid-template-columns: 1fr; gap: 20px; padding-top: 70px; padding-bottom: 90px;}
    .hero-copy {max-width: 800px;}
    .global-flow .global-map {width: 140vw; height: 67vh; bottom: -8vh;}
    .vision-layout {grid-template-columns: 1fr; gap: 50px;}
    .vision-intro {position: relative; top: auto; max-width: 700px;}
    .engine-grid {grid-template-columns: 1fr 1fr;}
    .engine-card:last-child {grid-column: 1 / -1;}
    .wowon-eco-visual {transform: scale(.88); transform-origin: center;}
    .location-layout {grid-template-columns: 1fr;}
    .project-janggeum {padding: 110px 0 120px;}
    .janggeum-head {margin-bottom: 65px;}
    .janggeum-main {grid-template-columns: 1fr 1fr; gap: 50px;}
    .ip-description {font-size: 15px;}
    .consortium-head {gap: 40px;}
    .consortium-card {min-height: 390px; padding: 24px;}
    .contact-leadership {grid-template-columns: 210px 1fr; gap: 55px;}
    .footer-partnership {grid-template-columns: 1fr; gap: 70px; padding-top: 110px;}
    .footer-cta {max-width: 700px;}
}

@media (max-width: 1000px) {
    .hero-visual {width: 100%; height: 620px;}
    .wowon-liquid {transform: scale(.82);}
}

@media (max-width: 900px) {
    .project-head {display: block; margin-bottom: 45px;}
    .project-cards {grid-template-columns: 1fr; gap: 18px;}
    .project-card {min-height: auto; padding: 26px;}
    .card-visual {height: 220px;}
    .card-points {margin-bottom: 45px;}
    .contact {padding: 130px 0 110px;}
    .contact-leadership {grid-template-columns: 1fr; gap: 45px;}
    .leader-visual {width: 220px; min-height: 220px;}
    .leader-career {grid-template-columns: 1fr;}
    .career-item, .career-item + .career-item {padding: 18px 0; border-right: 0; border-bottom: 1px solid #ddd;}
    .career-item:last-child {border-bottom: 0;}
}

@media (max-width: 800px) {
    .footer-form-row {grid-template-columns: 1fr; gap: 0;}
}

@media (max-width: 767px) {
    :root {--header-h: 68px;}
    .container, .header-inner, .hero-inner {width: calc(100% - 36px);}
    .section {min-height: auto; padding: 95px 0 80px;}
    .side-nav {display: none;}
    .pc {display: none;}

    /* HEADER */
    .header {height: var(--header-h);}
    .logo {font-size: 15px;}
    .logo-mark {width: 30px; height: 30px; font-size: 12px;}
    .header-cta {padding: 10px 13px; font-size: 10px;}
    .header-cta i {font-size: 11px;}
    .scroll-progress {top: var(--header-h);}

    /* OPENING */
    .janggeum-opening-label {font-size: 11px; letter-spacing: .25em;}
    .janggeum-opening-kicker, .janggeum-opening-desc {font-size: 14px;}
    .janggeum-opening-btn {width: 250px; height: 54px;}

    /* HERO */
    .hero {min-height: 100svh; padding-top: calc(var(--header-h) + 40px); padding-bottom: 100px;}
    .hero-inner {display: block; padding-top: 25px; padding-bottom: 0;}
    .hero h1 {font-size: clamp(39px, 11vw, 62px); line-height: 1.08;}
    .hero h1 em::after {height: 10px; bottom: 3px;}
    .eyebrow {margin-bottom: 21px; font-size: 10px;}
    .hero-description {margin-top: 25px; font-size: 14px; line-height: 1.8;}
    .hero-buttons {margin-top: 30px;}
    .btn {min-height: 49px; padding: 13px 17px; gap: 17px; font-size: 15px;}

    /* GLOBAL FLOW */
    .global-flow {height: 230vh;}
    .global-flow__sticky {top: var(--header-h); height: calc(100svh - var(--header-h)); min-height: 620px;}
    .global-flow__content {height: 45vh; padding: 0 18px;}
    .global-flow__eyebrow {margin-bottom: 18px; font-size: 10px;}
    .global-flow__eyebrow::before, .global-flow__eyebrow::after {width: 12px; margin: 0 6px;}
    .global-flow__text {width: 100%;}
    .flow-paragraph {font-size: clamp(17px, 5.2vw, 24px); line-height: 1.48;}
    .global-flow .global-map {width: 185vw; height: 53vh; min-height: 340px; bottom: 0;}
    .global-node {transform: translate(-50%, -50%) scale(.72);}
    .map-point {transform: scale(.75);}
    .flow-line-base {stroke-width: 1.2;}
    .flow-line-light {stroke-width: 2.8;}

    /* COMMON HEAD */
    .section-head {margin-bottom: 45px;}
    .section-head h2 {font-size: 36px; line-height: 1.15;}
    .section-head-description {font-size: 13px;}

    /* VISION */
    .vision-layout {gap: 38px;}
    .vision-intro h2 {font-size: 35px;}
    .vision-intro-desc {margin-top: 25px; font-size: 14px;}
    .problem-grid {grid-template-columns: 1fr; gap: 12px;}
    .problem-card {min-height: 200px; padding: 24px; border-radius: 18px;}
    .problem-card h3 {font-size: 20px;}
    .problem-card p {font-size: 13px;}

    /* ENGINE */
    .engine-grid {grid-template-columns: 1fr;}
    .engine-card, .engine-card:last-child {min-height: 500px; grid-column: auto;}
    .engine-card h3 {font-size: 35px;}
    .engine-card h4 {font-size: 19px;}
    .engine-card p {font-size: 13px;}

    /* ECOSYSTEM */
    .wowon-ecosystem {padding: 100px 0;}
    .wowon-eco-head {padding: 0 20px; margin-bottom: 50px;}
    .wowon-eco-head h2 {font-size: 33px;}
    .wowon-eco-head p {font-size: 13px;}
    .wowon-eco-head p br {display: none;}
    .wowon-eco-visual {height: auto; display: flex; flex-direction: column; align-items: center; transform: none;}
    .wowon-source {position: static; width: calc(100% - 30px); margin-bottom: 30px; transform: none; order: 1;}
    .source-right {margin-top: 30px; order: 3;}
    .wowon-phone-area {position: relative; left: auto; top: auto; width: 100%; height: 500px; transform: none; order: 2;}
    .wowon-phone {width: 175px; height: 355px;}
    .phone-left {left: calc(50% - 170px);}
    .phone-right {right: calc(50% - 170px);}
    .wowon-product-popup {right: 5px; bottom: 30px; width: 140px;}
    .wowon-value-flow {flex-direction: column; width: calc(100% - 30px); margin-top: 50px; gap: 7px;}
    .value-step {width: 100%;}
    .value-arrow {transform: rotate(90deg);}
    .wowon-eco-message {padding: 0 20px;}
    .wowon-eco-message strong {font-size: 19px;}

    /* LOCATION */
    .location {padding: 95px 0 80px;}
    .location-layout {gap: 30px;}
    .location-map {width: 100%; height: 380px;}
    .location-map-wrap .point {width: 240px; height: 240px;}
    .location-desc {font-size: 14px;}

    /* YES APM */
    .yes-apm-stage {width: calc(100% - 36px); display: block;}
    .yes-apm-visual {position: relative; top: auto; height: auto; min-height: auto; padding: 45px 0 20px;}
    .yes-apm-building {--building-width: min(330px, 92vw);}
    .yes-apm-content-head {min-height: auto; padding: 40px 0 0;}
    .yes-apm-content-head h2 {font-size: 29px;}
    .yes-apm-content-head p {font-size: 14px;}
    .yes-apm-card {min-height: auto; padding: 30px 22px; margin: 24px auto;}
    .yac-main {padding: 20px 0;}
    .yac-main h3 {font-size: 26px;}
    .yac-main p {font-size: 14px; line-height: 1.7;}
    .yac-floor strong {font-size: 32px;}
    .yac-bottom span {min-height: 24px; padding: 0 8px; font-size: 10px;}
    .yes-apm-end {height: 10vh;}

    /* PROJECT */
    .project {min-height: auto; padding: 90px 0 80px;}
    .project-head h2 {font-size: 38px;}
    .project-lead {font-size: 14px;}
    .project-card {border-radius: 23px;}
    .card-visual {height: 190px;}
    .card-content h3 {font-size: 31px;}
    .card-description {font-size: 14px;}

    /* JANGGEUM */
    .project-janggeum {padding: 85px 0 90px;}
    .janggeum-head {display: block; margin-bottom: 55px;}
    .janggeum-head h2 {font-size: 43px;}
    .janggeum-head-meta {margin-top: 25px; gap: 18px; font-size: 13px;}
    .janggeum-main {display: block; margin-bottom: 80px;}
    .janggeum-poster-wrap {margin-bottom: 55px;}
    .janggeum-poster {height: 420px;}
    .janggeum-content {width: 100%;}
    .ip-title h3 {font-size: 43px;}
    .ip-description {margin: 28px 0 35px; font-size: 14px; line-height: 1.8;}
    .ip-info-grid {grid-template-columns: 1fr;}
    .ip-info, .ip-info:nth-child(odd), .ip-info:nth-child(even) {min-height: auto; padding: 20px 0; border-right: 0;}
    .consortium-head {display: block; margin-bottom: 40px;}
    .consortium-head h3 {font-size: 40px;}
    .consortium-head p {margin-top: 25px; font-size: 14px; text-align: left;}
    .consortium-grid {grid-template-columns: 1fr;}
    .consortium-card {min-height: 340px;}
    .card-icon {margin-top: 45px;}
    .janggeum-bottom {display: block; margin-top: 60px;}
    .janggeum-bottom p {font-size: 14px;}
    .janggeum-bottom > span {display: block; margin-top: 25px;}
    .bg-circle-01 {width: 420px; height: 420px; right: -280px;}

    /* INVESTMENT */
    .investment {padding: 100px 0 110px;}
    .investment-intro {margin-bottom: 80px;}
    .investment-intro h2 {font-size: 38px;}
    .investment-intro p {font-size: 15px;}
    .investment-model-head, .milestone-head {display: block;}
    .investment-model-head h3, .milestone-head h3 {font-size: 24px;}
    .milestone-period {display: inline-flex; margin-top: 16px;}
    .revenue-grid {grid-template-columns: 1fr; gap: 12px;}
    .revenue-card {min-height: 320px; padding: 25px;}
    .milestone {margin-top: 100px;}
    .milestone-track {display: block;}
    .milestone-progress {display: none;}
    .milestone-item {padding: 0 0 55px 30px; border-left: 1px solid var(--coral-light);}
    .milestone-item:last-child {border-left-color: transparent;}
    .milestone-year {height: auto; margin-bottom: 18px;}
    .milestone-dot {position: absolute; left: -8px; top: 2px; margin: 0;}
    .milestone-info {padding: 0;}

    /* CONTACT */
    .contact {padding: 100px 0 80px;}
    .contact-intro h2 {font-size: 42px;}
    .contact-leadership {padding: 40px 0;}
    .leader-visual {width: 180px; min-height: 180px;}
    .leader-visual::before {width: 145px; height: 145px;}
    .leader-visual::after {width: 90px; height: 90px;}
    .leader-name {flex-direction: column; align-items: flex-start; gap: 8px;}
    .leader-name h3 {font-size: 40px;}
    .leader-name span {font-size: 12px;}

    /* FOOTER */
    .footer {padding-bottom: 30px;}
    .footer-partnership {padding: 85px 0 80px; gap: 50px;}
    .footer-cta h2 {font-size: 42px;}
    .footer-cta > p {font-size: 14px;}
    .footer-keywords {margin-top: 30px;}
    .footer-form-wrap {padding: 30px 20px;}
    .footer-form-head {flex-direction: column; gap: 12px;}
    .footer-form-head p {text-align: left;}
    .footer-form-bottom {flex-direction: column; align-items: stretch; gap: 16px;}
    .footer-submit {width: 100%;}
    .footer-top {flex-direction: column; align-items: flex-start; gap: 15px; padding: 35px 0 30px;}
    .footer-top p {font-size: 10px;}
    .footer-middle {flex-wrap: wrap; gap: 12px; justify-content: space-between;}
    .footer-middle span {font-size: 10px;}
    .footer-middle i {font-size: 9px;}
    .footer-bottom {flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 22px;}
}

@media (max-width: 600px) {
    .hero-visual {height: 480px;}
    .wowon-liquid {transform: scale(.58);}
}

@media (max-width: 480px) {
    .yes-apm-stage {width: calc(100% - 28px);}
    .yes-apm-building {--building-width: min(300px, 90vw);}
    .yes-apm-content-head h2 {font-size: 26px;}
    .yac-main h3 {font-size: 24px;}
}

/* =========================================================
   WOWON SECTION COLOR SYSTEM
   기존 레이아웃 / 애니메이션 유지
   배경색만 섹션별로 차별화
========================================================= */

/* HERO
   밝고 시원한 블루톤 */
.hero {
    background:
        radial-gradient(
            circle at 72% 40%,
            rgba(120, 137, 255, .16),
            transparent 30%
        ),
        radial-gradient(
            circle at 82% 75%,
            rgba(255, 118, 100, .10),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #f5f7ff 0%,
            #f4f6fb 52%,
            #faf7f6 100%
        );
}


/* GLOBAL FLOW
   HERO보다 살짝 차분한 블루그레이 */
.global-flow {
    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(110, 126, 255, .07),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #eef2f9 0%,
            #f1f4f9 55%,
            #f7f5f2 100%
        );
}


/* VISION
   따뜻한 아이보리 */
.vision {
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(255, 145, 125, .055),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #fffdf9 0%,
            #faf9f6 55%,
            #f7f5f2 100%
        );
}


/* ENGINE
   블루 + 라벤더 */
.engine {
    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(255, 118, 100, .075),
            transparent 26%
        ),
        radial-gradient(
            circle at 88% 78%,
            rgba(110, 128, 255, .11),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #f1f4fb 0%,
            #f4f3fa 52%,
            #f1f5fb 100%
        );
}





/* LOCATION
   지도와 잘 어울리는 따뜻한 화이트 */
.location {
    background:
        radial-gradient(
            circle at 85% 35%,
            rgba(255, 118, 100, .055),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #faf9f6 0%,
            #f7f8fa 55%,
            #f5f6f9 100%
        );
}


/* LOCATION 지도 가장자리도 섹션 배경과 맞춤 */
.location-map::before {
    background:
        linear-gradient(
            180deg,
            #faf9f6 0%,
            transparent 14%,
            transparent 88%,
            #f5f6f9 100%
        );
}

.location-map::after {
    background:
        linear-gradient(
            90deg,
            #faf9f6 0%,
            transparent 12%,
            transparent 82%,
            #f5f6f9 100%
        );
}


/* YES APM
   건물과 카드가 잘 떠보이는 쿨그레이 */
.yes-apm-section {
    background:
        radial-gradient(
            circle at 18% 35%,
            rgba(102, 124, 255, .065),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(255, 118, 100, .045),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #eef1f6 0%,
            #f3f5f8 50%,
            #edf1f6 100%
        );
}




/* JANGGEUM
   기존 한지/사극 느낌을 조금 더 */
/* .project-janggeum {
    background:
        radial-gradient(
            circle at 80% 18%,
            rgba(182, 130, 92, .09),
            transparent 28%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(239, 126, 104, .055),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #f7f0e8 0%,
            #f3ece3 52%,
            #eee8df 100%
        );
} */


/* INVESTMENT
   다시 차가운 블루로 전환 */
.investment {
    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(255, 118, 100, .075),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 82%,
            rgba(102, 124, 255, .075),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f3f6fb 0%,
            #f6f5fa 55%,
            #f1f5fa 100%
        );
}


/* CONTACT
   투자 → 문의로 넘어가는 따뜻한 베이지 */
/* .contact {
    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(239, 126, 104, .08),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #f5f1eb 0%,
            #f7f4ef 55%,
            #f1f2f4 100%
        );
} */


/* FOOTER
   기존 블랙보다 WOWON 네이비에 가깝게 */
.footer {
   background: linear-gradient(180deg, #2a2a2a 0%, #222222 55%, #181818 100%);}
/* =========================================================
   WOWON 2026 MOTION ENHANCEMENT
   HTML 변경 없이 적용
========================================================= */

:root {--motion-ease: cubic-bezier(.16,1,.3,1); --motion-fast: .35s; --motion-slow: .8s; --glow-coral: rgba(255,118,100,.18); --glow-blue: rgba(102,124,255,.13);}

html {scroll-behavior: auto;}

body {background: #f7f8fb;}

.section, .global-flow, .wowon-ecosystem, .project-janggeum, .investment, .contact, .footer {isolation: isolate;}

.section::after, .global-flow::after, .wowon-ecosystem::after, .project::after, .investment::after, .contact::after {content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .45; background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.45), transparent 38%);}

.header {background: rgba(248,250,253,.68); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom-color: rgba(24,37,60,.055); transition: background .5s ease, box-shadow .5s ease, transform .5s var(--motion-ease);}

.header.is-scrolled {background: rgba(248,250,253,.86); box-shadow: 0 12px 40px rgba(24,37,60,.07);}

.logo-mark {transition: transform .5s var(--motion-ease), box-shadow .5s ease;}

.logo:hover .logo-mark {transform: rotate(-8deg) scale(1.08); box-shadow: 0 12px 28px rgba(255,118,100,.34);}

.header-cta {position: relative; overflow: hidden;}

.header-cta::before, .btn-primary::before, .janggeum-opening-btn::before, .footer-submit::before {content: ""; position: absolute; inset: 0; transform: translateX(-110%); background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.22) 50%, transparent 80%); transition: transform .75s var(--motion-ease); pointer-events: none;}

.header-cta:hover::before, .btn-primary:hover::before, .janggeum-opening-btn:hover::before, .footer-submit:hover::before {transform: translateX(110%);}

.btn, .header-cta, .janggeum-opening-btn, .footer-submit {position: relative; overflow: hidden; transform: translateZ(0);}

.section-label, .eyebrow, .investment-kicker, .card-label {transition: letter-spacing .6s var(--motion-ease), transform .6s var(--motion-ease);}

.is-visible .section-label, .is-visible .eyebrow {letter-spacing: .18em;}

.reveal {opacity: 0; transform: translate3d(0,42px,0) scale(.985); filter: blur(8px); transition: opacity .9s var(--motion-ease), transform 1s var(--motion-ease), filter 1s var(--motion-ease);}

.reveal.is-visible {opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0);}

.reveal[data-reveal-delay="1"] {transition-delay: .08s;}

.reveal[data-reveal-delay="2"] {transition-delay: .16s;}

.reveal[data-reveal-delay="3"] {transition-delay: .24s;}

.reveal[data-reveal-delay="4"] {transition-delay: .32s;}

.hero-copy {transform: translate3d(var(--mx,0),var(--my,0),0); transition: transform .18s ease-out;}

.hero-atmosphere {transform: translate3d(calc(var(--mx,0) * -.35),calc(var(--my,0) * -.35),0) scale(1.04); transition: transform .8s var(--motion-ease);}

.hero-grid {opacity: .32; transform: perspective(900px) rotateX(55deg) translateY(8%); transform-origin: center bottom; transition: transform 1.2s var(--motion-ease), opacity .8s ease;}

.hero h1 {text-wrap: balance;}

.hero h1 em::after {height: 13px; opacity: .72; transform: scaleX(.2); transform-origin: left center; transition: transform 1s var(--motion-ease), opacity .5s ease;}

.hero.is-active h1 em::after, .hero .reveal.is-visible h1 em::after {transform: scaleX(1); opacity: 1;}

.wowon-liquid {transition: transform .2s ease-out;}

.liquid-glow {animation: ambientFloat 8s ease-in-out infinite;}

.glow-blue {animation-delay: -2s;}

.glow-purple {animation-delay: -4s;}

.liquid-glass {transition: box-shadow .7s var(--motion-ease), transform .25s ease-out;}

.wowon-liquid:hover .liquid-glass {box-shadow: 0 48px 110px rgba(38,48,68,.24), 0 0 90px rgba(100,120,190,.14), inset 0 1px 0 rgba(255,255,255,1), inset 0 -30px 70px rgba(80,100,145,.12);}

.global-flow {background-attachment: fixed;}

.global-map-image {transform: scale(1.02); transition: transform 1.2s var(--motion-ease), filter 1s ease;}

.global-flow.is-active .global-map-image {transform: scale(1.07); filter: grayscale(.8) contrast(.82) brightness(1.38);}

.global-node {transition: transform .7s var(--motion-ease);}

.global-flow.is-active .global-node {transform: translate(-50%,-50%) scale(1.035);}

.flow-word {transition: color .5s ease, opacity .5s ease, text-shadow .5s ease;}

.flow-word.is-read {color: #1d2638; opacity: 1; text-shadow: 0 0 22px rgba(255,255,255,.25);}

.problem-card, .engine-card, .project-card, .revenue-card, .consortium-card, .location-card, .value-step, .wowon-source-card, .wowon-commerce-card {will-change: transform;}

.problem-card::after, .engine-card-bg, .project-card::after, .revenue-card::after {transition: transform .8s var(--motion-ease), opacity .8s ease;}

.problem-card:hover::after {transform: scale(1.7) translate(-10px,-10px);}

.problem-card:hover .problem-number, .engine-card:hover .engine-index, .project-card:hover .card-label {color: var(--coral);}

.problem-icon, .engine-icon img {transition: transform .6s var(--motion-ease);}

.problem-card:hover .problem-icon {transform: translateY(-5px) rotate(-4deg);}

.engine-card:hover .engine-icon img {transform: translate3d(0,-6px,0) scale(1.05);}

.engine-card {background: rgba(255,255,255,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);}

.engine-card::before, .project-card::before, .revenue-card::before, .location-card::before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, transparent, var(--coral), transparent); transition: transform .8s var(--motion-ease);}

.engine-card:hover::before, .project-card:hover::before, .revenue-card:hover::before, .location-card:hover::before {transform: scaleX(1);}

.wowon-eco-visual {perspective: 1400px;}

.wowon-phone-area {transition: transform .8s var(--motion-ease);}

.wowon-source-card, .wowon-commerce-card {overflow: hidden;}

.wowon-source-card::before, .wowon-commerce-card::before {content: ""; position: absolute; inset: 0; transform: translateX(-105%); background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%); transition: transform .8s var(--motion-ease); pointer-events: none;}

.wowon-source-card:hover::before, .wowon-commerce-card:hover::before {transform: translateX(105%);}

.wowon-ai-badge {animation: aiPulse 2.8s ease-in-out infinite, badgeFloat 5s ease-in-out infinite;}

.location-map img {transition: transform 1.2s var(--motion-ease), filter .8s ease;}

.location-map-wrap:hover .location-map img {transform: scale(1.045); filter: saturate(1.04) contrast(1.02);}

.location-card {overflow: hidden;}

.location-card::after {content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; transform: scaleY(0); transform-origin: top; background: var(--coral); transition: transform .65s var(--motion-ease);}

.location-card:hover::after {transform: scaleY(1);}

.yes-apm-building {transition: transform .8s var(--motion-ease), filter .8s ease;}

.yes-apm-building:hover {filter: drop-shadow(0 34px 50px rgba(46,55,77,.16));}

.yb-floor {will-change: transform;}

.yb-floor:not(.is-active):hover {transform: translateX(5px); box-shadow: 0 8px 25px rgba(32,38,51,.07);}

.yac-main h3 em {position: relative;}

.yac-main h3 em::after {content: ""; position: absolute; left: 0; right: 0; bottom: -.1em; height: .12em; border-radius: 20px; background: rgba(201,255,201,.18); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--motion-ease);}

.yes-apm-card.is-active .yac-main h3 em::after {transform: scaleX(1);}

.card-visual {transition: transform .8s var(--motion-ease), filter .8s ease;}

.project-card:hover .card-visual {transform: scale(1.015); filter: saturate(1.08);}

.visual-orbit {animation: orbitDrift 9s linear infinite;}

.orbit-02 {animation-direction: reverse; animation-duration: 7s;}

.visual-center, .zone-center, .global-core {transition: transform .7s var(--motion-ease), box-shadow .7s ease;}

.project-card:hover .visual-center {transform: translate(-50%,-50%) scale(1.08);}

.project-card:hover .zone-center {transform: translate(-50%,-50%) scale(1.06);}

.project-card:hover .global-core {transform: translate(-50%,-50%) scale(1.06);}

.card-points li {transition: transform .45s var(--motion-ease), padding-left .45s var(--motion-ease), background .45s ease;}

.card-points li:hover {padding-left: 8px; background: rgba(255,255,255,.35);}

.janggeum-poster {transform: translateZ(0);}

.janggeum-poster::after {content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.10) 50%, transparent 75%); transform: translateX(-110%); transition: transform 1s var(--motion-ease);}

.janggeum-poster:hover::after {transform: translateX(110%);}

.janggeum-video {transition: transform 1.4s var(--motion-ease), filter 1s ease;}

.consortium-card {overflow: hidden;}

.consortium-card::before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; transform: scaleX(0); transform-origin: left; background: #3d6379; transition: transform .7s var(--motion-ease);}

.consortium-card:hover::before {transform: scaleX(1);}

.card-icon {transition: transform .6s var(--motion-ease), background .5s ease, color .5s ease;}

.consortium-card:hover .card-icon {transform: rotate(-8deg) scale(1.06); background: rgba(255,255,255,.55);}

.revenue-card {overflow: hidden;}

.revenue-card.featured::after {content: ""; position: absolute; left: -90px; bottom: -90px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,118,100,.08); transition: transform .8s var(--motion-ease);}

.revenue-card.featured:hover::after {transform: scale(1.35);}

.milestone-dot {transition: transform .6s var(--motion-ease), box-shadow .6s ease;}

.milestone-item.is-active .milestone-dot {transform: scale(1.22); box-shadow: 0 0 0 8px rgba(255,118,100,.08), 0 0 28px rgba(255,118,100,.24);}

.milestone-item {transition: transform .6s var(--motion-ease);}

.milestone-item.is-active {transform: translateY(-4px);}

.contact-leadership, .footer-partnership {position: relative;}

.footer {position: relative; overflow: hidden;}

.footer-form-wrap {transition: transform .7s var(--motion-ease), box-shadow .7s ease;}

.footer-form-wrap:hover {transform: translateY(-5px); box-shadow: 0 35px 90px rgba(0,0,0,.18);}

@keyframes ambientFloat {
    0%,100% {transform: translate3d(0,0,0) scale(1);}
    50% {transform: translate3d(8px,-12px,0) scale(1.035);}
}

@keyframes badgeFloat {
    0%,100% {margin-top: 0;}
    50% {margin-top: -7px;}
}

@keyframes orbitDrift {
    from {transform: translate(-50%,-50%) rotate(-15deg);}
    to {transform: translate(-50%,-50%) rotate(345deg);}
}

@media (hover:none), (pointer:coarse) {
    .hero-copy {transform: none !important;}
    .wowon-liquid {transform: none;}
    .problem-card:hover, .engine-card:hover, .project-card:hover, .revenue-card:hover, .location-card:hover {transform: none;}
    .location-map-wrap:hover .location-map img {transform: scale(1.02);}
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important;}
}