/* =========================================================
OJO — 코나아이(konai.com) 메인 구조 기반 디자인
========================================================= */
:root{
--brand:#E8620C;
--brand-rgb:232,98,12;
--black:#000;
--white:#fff;
--gray-bg:#F2F2F2;
--gray-bg2:#F7F7F7;
--gray-line:#EBEBEB;
--gray-txt:#828282;
--gray-txt2:#555;
--f-kr:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
--f-en:'Unbounded','Pretendard',sans-serif; /* 영문: 코나아이 전용 서체처럼 가로로 넓은 서체 */
--inner:1280px;
--gut:40px;
--header-h:80px;
--ease:cubic-bezier(.19,1,.22,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--f-kr);color:var(--black);background:var(--white);line-height:1.6;word-break:keep-all;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font-family:inherit;background:none;border:0;cursor:pointer;color:inherit}
em{font-style:normal}
img,video{display:block;max-width:100%}
.inner{max-width:var(--inner);margin:0 auto;padding:0 var(--gut)}
.center{text-align:center}
/* ---------- 타이포 ---------- */
.eyebrow{font-family:var(--f-en);font-size:28px;font-weight:700;letter-spacing:-.01em;color:var(--brand);text-transform:uppercase}
.eyebrow b{color:var(--brand)}
.tit-xl{font-size:clamp(30px,3.9vw,56px);font-weight:800;line-height:1.32;letter-spacing:-.035em}
.tit-l{font-size:clamp(26px,2.8vw,40px);font-weight:800;line-height:1.35;letter-spacing:-.03em}
.desc{font-size:16px;line-height:1.9;color:#333}
/* ---------- 버튼 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 30px;border-radius:100px;font-size:15px;font-weight:700;letter-spacing:-.01em;transition:background .25s,color .25s,transform .25s}
.btn:hover{transform:translateY(-2px)}
.btn--red{background:var(--brand);color:#fff}
.btn--white{background:#fff;color:var(--brand)}
.btn--line{border:1px solid var(--brand);color:var(--brand)}
.btn--line:hover{background:var(--brand);color:#fff}
.btn--ghost{border:1px solid rgba(255,255,255,.35);color:#fff}
.btn--ghost:hover{background:#fff;color:#000}
/* ---------- 등장 모션 ---------- */
.rv{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
/* 이미지 자리 */
.ph{font-family:var(--f-en);font-size:11px;font-weight:600;letter-spacing:.18em;color:rgba(0,0,0,.28)}
[data-img].has-img .ph{display:none}
/* =========================================================
HEADER
========================================================= */
.header{position:fixed;top:0;left:0;right:0;height:var(--header-h);z-index:100;color:var(--black);transition:color .3s}
.header__bg{position:absolute;left:0;right:0;top:0;height:var(--bg-h,var(--header-h));background:#fff;border-bottom:1px solid var(--gray-line);opacity:1;transition:height .35s var(--ease),opacity .3s}
.header.is-over{color:#fff}
.header.is-over .header__bg{opacity:0}
.header.is-open{color:var(--black)}
.header.is-open .header__bg{opacity:1}
.header__inner{position:relative;height:var(--header-h);padding:0 var(--gut);display:flex;align-items:center;justify-content:space-between}
.logo{font-family:var(--f-en);font-size:26px;font-weight:800;letter-spacing:.12em;color:var(--brand)}
.menu{position:absolute;left:50%;top:0;transform:translateX(-50%);height:100%}
.menu__list{display:flex;gap:64px;height:100%}
.menu__item{position:relative;height:100%}
.menu__link{position:relative;display:flex;align-items:center;height:100%;font-family:var(--f-en);font-size:15px;font-weight:700;letter-spacing:.01em;text-transform:uppercase;white-space:nowrap}
.menu__link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brand);transform:scaleX(0);transition:transform .35s var(--ease)}
.menu__item:hover .menu__link::after,.menu__item:focus-within .menu__link::after{transform:scaleX(1)}
.sub{position:absolute;left:0;top:var(--header-h);display:flex;gap:56px;padding:30px 0 44px;opacity:0;visibility:hidden;transition:opacity .25s;white-space:nowrap;color:var(--black)}
.menu__item:hover .sub,.menu__item:focus-within .sub{opacity:1;visibility:visible;transition-delay:.08s}
.sub__col{display:flex;flex-direction:column;gap:9px}
.sub__col a{font-size:13.5px;color:var(--gray-txt2);transition:color .2s}
.sub__col a:hover{color:var(--brand)}
.sub__col .sub__tit{font-size:15px;font-weight:700;color:var(--black);margin-bottom:4px}
.header__util{display:flex;align-items:center;gap:14px}
.btn-apply{font-size:13.5px;font-weight:700;padding:10px 20px;background:var(--brand);color:#fff;border-radius:100px;transition:filter .2s}
.btn-apply:hover{filter:brightness(1.08)}
.btn-burger{display:none;position:relative;width:32px;height:32px}
.btn-burger span,.btn-burger span::before,.btn-burger span::after{position:absolute;left:5px;width:22px;height:2px;background:currentColor;transition:.3s}
.btn-burger span{top:15px}
.btn-burger span::before,.btn-burger span::after{content:"";left:0}
.btn-burger span::before{top:-7px}.btn-burger span::after{top:7px}
.m-open .btn-burger span{background:transparent}
.m-open .btn-burger span::before{top:0;transform:rotate(45deg)}
.m-open .btn-burger span::after{top:0;transform:rotate(-45deg)}
.m-menu{position:fixed;inset:0;z-index:99;background:#fff;padding:calc(var(--header-h) + 24px) 24px 40px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .3s}
.m-open .m-menu{opacity:1;visibility:visible}
.m-menu li{padding:20px 0;border-bottom:1px solid var(--gray-line)}
.m-menu li p{font-family:var(--f-en);font-size:20px;font-weight:700;margin-bottom:10px}
.m-menu li a{display:block;padding:5px 0;font-size:15px;color:var(--gray-txt2)}
.m-menu__apply{display:block;margin-top:28px;padding:16px;background:var(--brand);color:#fff;border-radius:100px;font-size:16px;font-weight:700;text-align:center}
/* =========================================================
01 HERO
========================================================= */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;background:#000;overflow:hidden;color:#fff}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.hero__slide.is-active{opacity:1;z-index:1}
.hero__bg{position:absolute;inset:-4%;transform:scale(1.1);transition:transform 8s linear}
.hero__slide.is-active .hero__bg{transform:scale(1)}
.hero__bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__bg::before{content:"";position:absolute;width:70vmax;height:70vmax;border-radius:50%;filter:blur(60px);opacity:.6;animation:drift 14s ease-in-out infinite alternate}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.05) 70%)}
/* 배경 영상이 있을 때: 글자가 잘 읽히도록 왼쪽·아래를 더 어둡게 */
.hero.has-video .hero__bg{background:#05070a}
.hero.has-video .hero__bg::before{display:none}
.hero.has-video .hero__txt,.hero.has-video .hero__info{text-shadow:0 2px 24px rgba(0,0,0,.5)}
.hero.has-video .hero__bg::after{background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.45) 45%,rgba(0,0,0,.18) 100%),linear-gradient(0deg,rgba(0,0,0,.55),transparent 35%)}
.hero__bg--1{background:radial-gradient(55% 65% at 78% 42%,rgba(var(--brand-rgb),.55),transparent 62%),radial-gradient(40% 45% at 18% 85%,rgba(255,140,90,.22),transparent 70%),linear-gradient(135deg,#1c0f11,#050505 70%)}
.hero__bg--1::before{right:-10vmax;top:-20vmax;background:radial-gradient(circle,rgba(var(--brand-rgb),.55),transparent 65%)}
.hero__bg--2{background:radial-gradient(50% 60% at 72% 30%,rgba(205,215,235,.32),transparent 62%),radial-gradient(35% 40% at 85% 85%,rgba(var(--brand-rgb),.25),transparent 70%),linear-gradient(160deg,#2a2d33,#08090b 75%)}
.hero__bg--2::before{right:0;bottom:-30vmax;background:radial-gradient(circle,rgba(170,190,230,.45),transparent 65%)}
.hero__bg--3{background:radial-gradient(60% 55% at 80% 70%,rgba(255,200,170,.32),transparent 62%),radial-gradient(30% 40% at 88% 18%,rgba(var(--brand-rgb),.38),transparent 70%),linear-gradient(120deg,#0b0b0b,#2b1c17)}
.hero__bg--3::before{left:30vw;top:-25vmax;background:radial-gradient(circle,rgba(255,170,130,.45),transparent 65%)}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(-12vw,8vh) scale(1.15)}}
.hero__content{position:absolute;left:12vw;right:var(--gut);top:0;bottom:0;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.hero__texts{display:grid}
/* 문구 위 작은 영문 라벨: 짧은 오렌지 선 + 하는 일 */
.hero__eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:30px;font-family:var(--f-en);font-size:13px;font-weight:500;letter-spacing:.14em;color:rgba(255,255,255,.62);transition:opacity 1s ease .3s,transform 1.2s var(--ease) .3s}
.hero__eyebrow::before{content:"";width:32px;height:2px;background:var(--brand)}
.is-loading .hero__eyebrow{opacity:0;transform:translateY(14px)}
.hero__txt{grid-area:1/1;align-self:end;font-size:clamp(40px,5.6vw,88px);font-weight:400;line-height:1.12;letter-spacing:-.04em;display:flex;flex-direction:column} /* flex: 줄 틀의 음수 여백이 겹쳐 줄간격이 벌어지지 않게 */
/* 줄마다 글자를 가리는 틀: 흐릿한 번짐이 네모나게 잘리지 않도록 틀을 넉넉히 키우고 위·아래 끝은 부드럽게 흐려지게 */
.hero__txt .ln{display:block;overflow:hidden;padding:.3em .6em .34em;margin:-.3em -.6em -.3em;-webkit-mask-image:linear-gradient(transparent,#000 .3em,#000 calc(100% - .3em),transparent);mask-image:linear-gradient(transparent,#000 .3em,#000 calc(100% - .3em),transparent)}
.hero__txt .ln>span{display:inline-block}
.hero__txt{visibility:hidden}
.hero__txt.is-active,.hero__txt.is-leave{visibility:visible}
/* 글자 단위 등장: 아래에서 기울어진 채 흐릿하게 → 선명하게 */
.hero__txt .ch{display:inline-block;white-space:pre;transform:translateY(105%) rotate(8deg);opacity:0;filter:blur(8px);transition:transform 1.1s var(--ease),opacity .9s ease,filter .9s ease;transition-delay:calc(var(--i) * 32ms)}
.hero__txt.is-active .ch{transform:none;opacity:1;filter:none}
.hero__txt.is-leave .ch{transform:translateY(-80%);opacity:0;filter:blur(6px);transition-duration:.55s;transition-delay:calc(var(--i) * 12ms)}
/* 세 줄 덩어리: is-wait 인 줄은 숨어 있다가 main.js 가 차례로 켬 */
.hero__txt.is-active .ln.is-wait .ch{transform:translateY(105%) rotate(8deg);opacity:0;filter:blur(8px);transition:none}
.hero__txt.is-reset .ch{transition:none}
.is-loading .hero__txt .ch{transform:translateY(105%) rotate(8deg);opacity:0;filter:blur(8px)}
.is-loading .hero__cta{animation:none;opacity:0}
.hero__cta{margin-top:48px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;opacity:0;visibility:hidden;transform:translateY(24px);transition:opacity .8s ease,transform 1s var(--ease),visibility 0s .8s}
.hero.is-final .hero__cta{opacity:1;visibility:visible;transform:none;transition-delay:.7s,.7s,0s}
.hero__info{font-size:15px;font-weight:600;color:rgba(255,255,255,.72);letter-spacing:-.01em}
.hero__cta .btn{height:56px;padding:0 34px;font-size:16px}
.hero__check{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:700;color:#fff;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.4);transition:border-color .3s}
.hero__check:hover{border-color:#fff}
.hero__check i{position:relative;width:14px;height:10px}
.hero__check i::before{content:"";position:absolute;left:0;top:4px;width:14px;height:1.5px;background:currentColor}
.hero__check i::after{content:"";position:absolute;right:0;top:1px;width:6px;height:6px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
.hero__check:hover i{animation:nudge .8s var(--ease) infinite}
@keyframes nudge{50%{transform:translateX(4px)}}
@keyframes heroCta{from{opacity:0;transform:translateY(20px)}}
.hero__txt em{color:var(--brand)}
.hero__txt b{font-weight:800}
.hero__pager{position:absolute;left:12vw;bottom:56px;z-index:3;display:flex;gap:8px}
.hero__pager span{width:44px;height:2px;background:rgba(255,255,255,.3);overflow:hidden}
.hero__pager i{display:block;height:100%;width:0;background:#fff}
.hero__pager .is-active i{animation:fill var(--dur,6s) linear forwards}
.hero__pager .is-done i{width:100%}
@keyframes fill{to{width:100%}}
.hero__down{position:absolute;left:50%;bottom:36px;z-index:3;width:34px;height:34px;margin-left:-17px;animation:bob 1.8s ease-in-out infinite}
.hero__down::before{content:"";position:absolute;left:9px;top:5px;width:14px;height:14px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
@keyframes bob{50%{transform:translateY(6px)}}
/* =========================================================
02 ABOUT (SINCE 1998)
========================================================= */
.sec-about{padding:200px 0 180px;text-align:center}
.sec-about .eyebrow{color:var(--black)}
.sec-about .tit-xl{margin-top:22px}
.sec-about .desc{margin-top:40px}
.circles{display:flex;justify-content:center;margin-top:110px;padding-left:44px}
.circle{position:relative;flex:none;width:300px;height:300px;margin-left:-44px;border-radius:50%;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;transition:transform 1.4s var(--ease),opacity 1s ease}
.circle:nth-child(1){z-index:1}.circle:nth-child(2){z-index:2}.circle:nth-child(3){z-index:3}
.circles:not(.in) .circle{opacity:0;transform:translateX(var(--x)) scale(.86)}
.circle:nth-child(1){--x:140px}.circle:nth-child(2){--x:0px}.circle:nth-child(3){--x:-140px} /* 세 원(상품 구성 · 가격 · 조건)이 가운데로 모이며 등장 */
.circle:nth-child(2){transition-delay:.08s}.circle:nth-child(3){transition-delay:.16s}
.circle b{font-family:var(--f-en);font-size:14px;font-weight:700;opacity:.6}
.circle strong{font-size:24px;font-weight:800;letter-spacing:-.03em}
.circle span{font-size:14px;line-height:1.6;opacity:.75}
.circle--img{background:linear-gradient(160deg,#dfe3e8,#b9c0c9);background-size:cover;background-position:center}
.circle--light{background:var(--gray-bg)}
.circle--dark{background:#000;color:#fff}
.circle--red{background:var(--brand);color:#fff}
/* =========================================================
03 STATEMENT
========================================================= */
.sec-state{min-height:100vh;display:flex;align-items:center;background:var(--gray-bg);text-align:center;padding:160px 0}
.sec-state .inner{width:100%}
.sec-state .tit-xl span{display:block}
.sec-state .tit-xl em{color:var(--brand)}
.sec-state .btn{margin-top:56px}
/* =========================================================
04 PROBLEM (FIRST → TOP)
- 기본: 정적 배치 / html.is-motion: 고정 스크롤 연출
========================================================= */
.sec-why{background:#000;color:#fff;overflow:hidden}
.why{position:relative;padding:160px var(--gut);text-align:center}
.why__globe{display:none}
.why__sub{font-size:clamp(22px,2.3vw,32px);font-weight:800;line-height:1.45;letter-spacing:-.03em}
.why__sub--1{color:var(--brand)}
.why__sub--2{margin-top:24px;color:#fff}
.why__mark{font-family:var(--f-en);font-size:clamp(160px,30vh,320px);font-weight:800;line-height:1;margin:48px 0}
.why__keys{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:var(--inner);margin:0 auto}
.why__keys strong{display:block;font-family:var(--f-en);font-size:clamp(40px,5vw,72px);font-weight:800;color:var(--brand);line-height:1.1;letter-spacing:-.02em}
.why__keys b{display:block;margin-top:14px;font-size:20px;font-weight:800}
.why__keys p{margin-top:12px;font-size:15px;line-height:1.8;color:#9a9a9a}
.is-motion .sec-why{background:#fff}
.is-motion .why{height:100vh;padding:0}
.is-motion .why__globe{display:block;position:absolute;left:50%;top:105%;width:320vw;height:320vw;margin-left:-160vw;border-radius:50%;
background:radial-gradient(circle at 50% 0,#000 0,#000 6%);
box-shadow:0 -24px 90px 10px rgba(var(--brand-rgb),.55),0 -6px 30px rgba(var(--brand-rgb),.3),inset 0 26px 60px -24px rgba(var(--brand-rgb),.75)}
.is-motion .why__copy{position:absolute;left:0;right:0;top:15vh;z-index:3}
.is-motion .why__sub--2{position:absolute;left:0;right:0;top:0;margin:0;opacity:0}
.is-motion .why__mark{position:absolute;left:50%;top:48%;z-index:2;margin:0;transform:none;color:#000;font-size:34vh}
.is-motion .why__keys{position:absolute;left:0;right:0;top:66vh;z-index:3;display:block}
.is-motion .why__keys li{position:absolute;left:0;right:0;top:0;opacity:0}
.is-motion .why__keys strong{font-size:clamp(56px,7vw,96px)}
/* =========================================================
05 APPROACH (숫자 실적)
========================================================= */
.sec-approach{position:relative;background:#000;color:#fff;padding:160px 0 220px;overflow:hidden}
.sec-approach::before{content:"";position:absolute;inset:0;background:linear-gradient(200deg,#3a3a3a,#141414 55%);clip-path:polygon(0 88%,100% 0,100% 100%,0 100%);opacity:.75}
.sec-approach .inner{position:relative}
.approach__head .eyebrow{font-size:22px}
.approach__head .tit-l{margin-top:16px}
.approach__list{display:grid;grid-template-columns:1fr 1fr;column-gap:120px;row-gap:90px;margin-top:110px;padding-left:8%}
.approach__list li:nth-child(2){margin-top:120px}
.approach__list strong{display:block;font-family:var(--f-en);font-size:clamp(56px,5.4vw,80px);font-weight:700;line-height:1;letter-spacing:-.02em}
.approach__list b{display:block;margin-top:22px;font-size:22px;font-weight:700;color:var(--brand);letter-spacing:-.02em}
.approach__list p{margin-top:14px;font-size:15px;line-height:1.85;color:var(--gray-txt)}
/* =========================================================
06 EXAMPLE (검정 배경 문구)
========================================================= */
.sec-example{background:#000;color:#fff}
.example{max-width:960px;margin:0 auto;padding:160px var(--gut);text-align:center}
.example__tit{font-size:clamp(28px,3.4vw,48px);font-weight:800;line-height:1.4;letter-spacing:-.03em}
.example__tit .w{display:inline-block;margin-right:.24em}
.example__rows{margin-top:72px;text-align:left;border-top:1px solid #2a2a2a}
.example__rows li{display:grid;grid-template-columns:160px 1fr;gap:24px;padding:26px 0;border-bottom:1px solid #2a2a2a}
.example__rows b{font-size:14px;font-weight:700;color:var(--brand);padding-top:3px}
.example__rows p{font-size:18px;line-height:1.75;color:#e6e6e6}
.example__note{margin-top:24px;font-size:13px;color:#6f6f6f}
.is-motion .example{height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:0;padding-bottom:0}
/* =========================================================
07 RING (KONA UNIVERSE)
========================================================= */
.sec-ring{position:relative;min-height:110vh;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center}
.ring{position:absolute;left:50%;top:50%;width:min(92vh,86vw);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
background:radial-gradient(circle,#000 0 62%,rgba(var(--brand-rgb),.14) 68%,transparent 71%);
box-shadow:0 0 70px 8px rgba(var(--brand-rgb),.5),0 0 200px 50px rgba(var(--brand-rgb),.18),inset 0 0 60px 10px rgba(var(--brand-rgb),.55)}
.is-motion .ring{transform:none}
.ring::before{content:"";position:absolute;left:4%;top:8%;width:34%;height:34%;border-radius:50%;background:radial-gradient(circle,rgba(255,235,240,.95),rgba(var(--brand-rgb),.35) 30%,transparent 65%);filter:blur(8px)}
.ring__copy{position:relative;z-index:2;padding:0 var(--gut)}
.ring__sub{font-family:var(--f-en);font-size:clamp(16px,1.6vw,22px);font-weight:700;letter-spacing:.04em}
.ring__tit{margin-top:10px;font-family:var(--f-en);font-size:clamp(40px,5.2vw,76px);font-weight:800;letter-spacing:.01em;line-height:1.1}
.ring__tit em{color:var(--brand)}
.ring__desc{margin-top:28px;font-size:16px;line-height:1.85;color:#c8c8c8}
.ring__copy .btn{margin-top:40px}
/* =========================================================
08 PROGRAM (CORE PRODUCT)
========================================================= */
.sec-program{position:relative;background:#ececec;clip-path:inset(0)}
.program__bg{position:sticky;top:0;height:100vh;margin-bottom:-100vh;overflow:hidden}
.program__layer{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;background-size:cover;background-position:center;display:flex;align-items:flex-end;justify-content:flex-end;padding:32px 40px}
.program__layer.is-active{opacity:1}
.program__layer:nth-child(1){background:radial-gradient(40% 45% at 22% 70%,rgba(var(--brand-rgb),.45),transparent 70%),linear-gradient(135deg,#fafafa,#e2e2e2 60%,#d4d4d4)}
.program__layer:nth-child(2){background:radial-gradient(45% 50% at 30% 75%,rgba(40,40,40,.22),transparent 70%),linear-gradient(160deg,#f6f6f6,#dcdcdc)}
.program__layer:nth-child(3){background:radial-gradient(55% 40% at 25% 85%,rgba(150,160,175,.5),transparent 70%),linear-gradient(140deg,#f3f4f6,#cfd3d9)}
.program__grid{position:relative;display:grid;grid-template-columns:1fr 1.35fr;gap:40px;padding-top:160px;padding-bottom:220px}
.program__head{position:sticky;top:160px;align-self:start}
.program__head .eyebrow{font-size:24px}
.program__head .tit-xl{margin-top:22px}
.program__head .desc{margin-top:36px;font-size:15px}
.program__cards{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.program__cards .pcard:nth-child(2){margin-top:240px}
.program__cards .pcard:nth-child(3){margin-top:-200px}
.pcard{position:relative;display:flex;flex-direction:column;min-height:500px;padding:40px 34px 34px;background:#fff;border:2px solid transparent;border-radius:22px;box-shadow:0 30px 60px -20px rgba(0,0,0,.14);transition:border-color .4s,transform .4s var(--ease)}
.pcard.is-active{border-color:var(--brand)}
.pcard__en{font-family:var(--f-en);font-size:14px;font-weight:700;color:var(--brand);letter-spacing:.02em}
.pcard h3{margin-top:10px;font-size:30px;font-weight:800;letter-spacing:-.03em}
.pcard__sub{margin-top:14px;font-size:15px;font-weight:700;color:#222}
.pcard__sub+p{margin-top:10px;font-size:15px;line-height:1.8;color:var(--gray-txt2)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:40px}
.tags li{padding:6px 14px;border:1px solid #bdbdbd;border-radius:100px;font-size:13px;font-weight:500;color:#333}
.tags li.is-red{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
/* =========================================================
09 CURRICULUM (미디어 슬라이더)
========================================================= */
.sec-curri{padding:180px 0 160px;text-align:center;overflow:hidden}
.sec-curri .desc{margin-top:28px;font-size:15px}
.curri{position:relative;margin-top:80px}
.curri__track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:10px max(var(--gut),calc((100vw - var(--inner))/2 + var(--gut)));scrollbar-width:none;text-align:left}
.curri__track::-webkit-scrollbar{display:none}
.ccur{position:relative;overflow:hidden;flex:none;width:380px;height:420px;scroll-snap-align:start;scroll-margin-left:max(var(--gut),calc((100vw - var(--inner))/2 + var(--gut)));display:flex;flex-direction:column;padding:34px 32px 30px;border-radius:20px;transition:transform .4s var(--ease)}
.ccur:hover{transform:translateY(-8px)}
.ccur--red{background:var(--brand);color:#fff}
.ccur--black{background:#000;color:#fff}
.ccur--gray{background:var(--gray-line);color:#000}
.ccur__tag{align-self:flex-start;padding:5px 12px;border-radius:100px;background:#fff;color:#000;font-family:var(--f-en);font-size:12px;font-weight:700}
.ccur__q{margin-top:22px;font-size:24px;font-weight:800;line-height:1.45;letter-spacing:-.03em}
.ccur__d{margin-top:14px;font-size:14px;line-height:1.7;opacity:.75}
.ccur__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between}
.ccur__t{font-size:14px;font-weight:600;opacity:.85}
.ccur__arw{position:relative;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.22)}
.ccur--gray .ccur__arw{background:#fff}
.ccur__arw::before{content:"";position:absolute;left:12px;top:19px;width:16px;height:2px;background:currentColor;transform:rotate(-45deg)}
.ccur__arw::after{content:"";position:absolute;left:17px;top:13px;width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor}
.curri__nav{position:absolute;top:50%;z-index:2;width:48px;height:48px;margin-top:-24px}
.curri__nav::before{content:"";position:absolute;left:16px;top:14px;width:16px;height:16px;border-left:2px solid #bbb;border-bottom:2px solid #bbb;transform:rotate(45deg)}
.curri__nav--prev{left:calc((100vw - var(--inner))/2 - 40px)}
.curri__nav--next{right:calc((100vw - var(--inner))/2 - 40px)}
.curri__nav--next::before{left:10px;transform:rotate(-135deg)}
.curri__nav:hover::before{border-color:#000}
.sec-curri .btn{margin-top:72px}
/* =========================================================
10 CTA (빨간 밴드)
========================================================= */
.sec-cta{position:relative;overflow:hidden;background:var(--brand);color:#fff;text-align:center;padding:180px 0 140px}
.sec-cta .inner{position:relative;z-index:1}
.sec-cta .desc{margin-top:32px;font-size:15px;color:rgba(255,255,255,.88)}
.cta__en{margin-bottom:20px;font-family:var(--f-en);font-size:15px;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.8)}
.sec-cta .btn{margin-top:56px}
.cta__cards{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:110px;text-align:left}
.ccard{position:relative;display:flex;flex-direction:column;min-height:260px;padding:40px 44px;border-radius:12px;overflow:hidden;transition:transform .4s var(--ease)}
.ccard:hover{transform:translateY(-6px)}
.ccard--white{background:#fff;color:#000}
.ccard--black{background:#1a1a1a;color:#fff}
.ccard__en{font-family:var(--f-en);font-size:14px;font-weight:700;color:var(--brand);letter-spacing:.02em}
.ccard__t{margin-top:18px;font-size:24px;font-weight:800;line-height:1.4;letter-spacing:-.03em;max-width:62%}
.ccard__d{margin-top:12px;font-size:14px;line-height:1.75;opacity:.65;max-width:62%}
.ccard__more{margin-top:auto;padding-top:24px;font-size:13px;font-weight:600;color:var(--brand)}
.ccard__more::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg) translateY(-1px)}
.ccard__art{position:absolute;right:44px;top:50%;transform:translateY(-50%)}
.ccard__art--dots{display:grid;grid-template-columns:repeat(3,26px);gap:12px}
.ccard__art--dots i{width:26px;height:26px;border-radius:50%;background:var(--brand)}
.ccard__art--dots i:nth-child(5){background:#000}
.ccard__art--bars{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.ccard__art--bars i{height:9px;background:#fff}
.ccard__art--bars i:nth-child(1){width:110px}.ccard__art--bars i:nth-child(2){width:80px;background:var(--brand)}.ccard__art--bars i:nth-child(3){width:120px}.ccard__art--bars i:nth-child(4){width:96px;background:var(--brand)}.ccard__art--bars i:nth-child(5){width:110px}
/* =========================================================
11 HOW (PARTNER & CLIENT)
========================================================= */
.sec-how{padding:180px 0 160px}
.sec-how .eyebrow{font-size:24px}
.sec-how .tit-xl{margin-top:16px}
.how__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));margin-top:80px;border-top:1px solid #ddd;text-align:center}
.how__list li{padding:56px 24px 0}
.how__list li+li{border-left:1px solid var(--gray-line)}
.how__list b{font-family:var(--f-en);font-size:28px;font-weight:700;color:var(--brand)}
.how__list strong{display:block;margin-top:12px;font-size:20px;font-weight:800;letter-spacing:-.02em}
.how__list p{margin-top:12px;font-size:14.5px;line-height:1.8;color:var(--gray-txt)}
.how__list li{display:flex;flex-direction:column;align-items:center}
.how__prog{margin-top:10px;padding:4px 12px;border-radius:100px;background:var(--gray-bg);font-size:12.5px;font-weight:700;color:var(--gray-txt2)}
.how__list li.is-main .how__prog{background:rgba(var(--brand-rgb),.12);color:var(--brand)}
.how__link{margin-top:18px;font-size:14px;font-weight:700;color:#222;border-bottom:1px solid #222;padding-bottom:2px}
.how__link:hover{color:var(--brand);border-color:var(--brand)}
.how__btn{margin-top:18px;height:46px;padding:0 24px;font-size:14px}
.curri__en{margin-bottom:18px;font-family:var(--f-en);font-size:15px;font-weight:700;letter-spacing:.04em;color:var(--brand)}
/* =========================================================
12 QUICK + FOOTER
========================================================= */
.sec-apply{background:var(--gray-bg2);border-top:1px solid var(--gray-line);padding:160px 0}
.apply__grid{display:grid;grid-template-columns:1fr 1.25fr;gap:80px;align-items:start}
.apply__head{position:sticky;top:140px}
.apply__head .eyebrow{font-size:24px}
.apply__head .tit-xl{margin-top:18px}
.apply__badge{display:inline-block;margin-top:18px;padding:7px 14px;border-radius:100px;background:rgba(var(--brand-rgb),.1);color:var(--brand);font-size:13.5px;font-weight:700}
.apply__head .desc{margin-top:22px;font-size:15px;color:var(--gray-txt2)}
.apply__flow{margin-top:44px;border-top:1px solid #ddd}
.apply__flow li{display:flex;gap:18px;padding:16px 0;border-bottom:1px solid #e5e5e5;font-size:15px;font-weight:600}
.apply__flow b{font-family:var(--f-en);font-size:13px;color:var(--brand);padding-top:2px}
.apply__demo{margin-top:24px;padding:12px 16px;border-radius:10px;background:rgba(var(--brand-rgb),.08);font-size:12.5px;line-height:1.7;color:var(--gray-txt2)}
.apply__box{background:#fff;border-radius:24px;padding:56px 52px;box-shadow:0 30px 60px -30px rgba(0,0,0,.12)}
.field{display:block;border:0;min-width:0;margin-bottom:34px}
.field label,.field legend{display:block;margin-bottom:10px;font-size:15px;font-weight:700;letter-spacing:-.01em}
.field i{font-style:normal;color:var(--brand)}
.field input[type=text],.field input[type=tel],.field textarea{width:100%;padding:12px 0;border:0;border-bottom:1.5px solid #d6d6d6;border-radius:0;background:none;font-family:inherit;font-size:16px;color:#000;outline:0;resize:vertical;transition:border-color .2s}
.field input::placeholder,.field textarea::placeholder{color:#b3b3b3}
.field input:focus,.field textarea:focus{border-bottom-color:var(--brand)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{margin:0;font-weight:500}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-block;padding:10px 18px;border:1.5px solid #dcdcdc;border-radius:100px;font-size:14px;cursor:pointer;transition:.2s}
.chips span:hover{border-color:#999}
.chips input:checked+span{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
.chips input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px}
.agree{display:flex!important;gap:12px;align-items:flex-start;font-weight:500!important;font-size:14px!important;cursor:pointer}
.agree input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--brand)}
.agree small{display:block;margin-top:4px;font-size:12.5px;color:var(--gray-txt)}
.field .err{display:none;margin-top:8px;font-size:13px;color:#e5484d}
.field.is-err .err{display:block}
.field.is-err input[type=text],.field.is-err input[type=tel],.field.is-err textarea{border-bottom-color:#e5484d}
.field.is-err .chips span{border-color:#f0a3a5}
.apply__submit{width:100%;height:60px;font-size:17px;margin-top:6px}
.apply__submit:disabled{opacity:.6;cursor:wait;transform:none}
.apply__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.apply__fail{margin-top:14px;font-size:13.5px;color:#e5484d;text-align:center}
[hidden]{display:none!important}
.apply__done{text-align:center;padding:40px 0}
.apply__check{position:relative;display:inline-block;width:64px;height:64px;border-radius:50%;background:var(--brand)}
.apply__check::after{content:"";position:absolute;left:24px;top:17px;width:14px;height:24px;border-right:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(45deg)}
.apply__done h3{margin-top:24px;font-size:28px;font-weight:800;letter-spacing:-.03em}
.apply__done>p{margin-top:12px;font-size:15px;line-height:1.8;color:var(--gray-txt2)}
.apply__done .apply__demo{display:inline-block}
.m-cta{display:none}
.footer{border-top:1px solid var(--gray-line);padding:80px 0 40px}
.footer__top{display:flex;justify-content:space-between;gap:60px}
.footer__info p{margin-top:22px;font-size:13.5px;line-height:1.9;color:var(--gray-txt2)}
.footer__policy{display:flex;gap:16px;margin-top:24px;font-size:13px;color:var(--gray-txt2)}
.footer__policy b{color:var(--brand);font-weight:600}
.footer__map{display:flex;gap:56px}
.footer__map dt{font-family:var(--f-en);font-size:15px;font-weight:700;margin-bottom:16px;white-space:nowrap}
.footer__map dd{font-size:13px;line-height:2;color:var(--gray-txt)}
.footer__map dd b{font-weight:600;color:#222}
.footer__map a:hover{color:var(--brand)}
.footer__bottom{margin-top:72px;padding-top:28px;border-top:1px solid var(--gray-line);font-size:12.5px;color:var(--gray-txt)}
.to-top{position:fixed;right:36px;bottom:36px;z-index:90;width:56px;height:56px;border-radius:50%;background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.14);opacity:0;visibility:hidden;transition:opacity .3s}
.to-top.is-show{opacity:1;visibility:visible}
.to-top::before{content:"";position:absolute;left:21px;top:22px;width:12px;height:12px;border-left:2px solid #333;border-top:2px solid #333;transform:rotate(45deg)}
.to-top::after{content:"";position:absolute;left:27px;top:22px;width:2px;height:16px;background:#333}
/* =========================================================
추가 모션 · 인터랙션 (motion.js)
========================================================= */
/* 스크롤 진행 막대 */
.progress{position:fixed;left:0;right:0;top:0;z-index:120;height:3px;pointer-events:none}
.progress i{display:block;height:100%;background:var(--brand);transform-origin:left;transform:scaleX(0)}
/* 헤더: 내려갈 때 숨고 올라올 때 나타남 */
.header{transition:color .3s,transform .45s var(--ease)}
.header.is-hidden{transform:translateY(-100%)}
/* 제목 줄 단위로 밀려 올라옴 */
.is-split.rv{opacity:1;transform:none}
.sl{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.sl>span{display:inline-block;transform:translateY(108%);transition:transform 1.1s var(--ease)}
.is-split.in .sl>span{transform:none}
/* 커서 (마우스 쓰는 PC) */
.cur__ring,.cur__dot{display:none}
/* 커서: 오렌지 점 + 얇은 링 · 링크·카드 위: 링이 커짐 · 버튼 위: 링이 버튼을 감싸며 달라붙음 (motion.js) */
.fx-on .cur__ring,.fx-on .cur__dot{display:flex;position:fixed;left:0;top:0;z-index:10001;pointer-events:none;border-radius:50%}
.fx-on .cur__dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--brand);box-shadow:0 0 0 1.5px rgba(255,255,255,.9);transition:opacity .2s}
.fx-on .cur__ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid rgba(var(--brand-rgb),.55);background:transparent;transition:width .45s var(--ease),height .45s var(--ease),margin .45s var(--ease),border-radius .45s var(--ease),border-color .3s,background-color .3s,opacity .3s}
.fx-on .cur__ring span{display:none}
.fx-on .cur__ring.is-hover{width:56px;height:56px;margin:-28px 0 0 -28px;border-color:rgba(var(--brand-rgb),.85);background:rgba(var(--brand-rgb),.06)}
.fx-on .cur__ring.is-stick{border-width:2px;border-color:var(--brand);background:transparent}
.fx-on .cur__ring.is-dark{border-color:rgba(255,255,255,.7)}
.fx-on .cur__ring.is-dark.is-hover{background:rgba(255,255,255,.08);border-color:#fff}
.fx-on .cur__ring.is-dark.is-stick{border-color:#fff}
.fx-on .cur__ring.is-off,.fx-on .cur__dot.is-off{opacity:0}
.fx-on:not(.cur-ready) .cur__ring,.fx-on:not(.cur-ready) .cur__dot{opacity:0}
.fx-on.cur-ready,.fx-on.cur-ready a,.fx-on.cur-ready button,.fx-on.cur-ready label{cursor:none}
.fx-on input,.fx-on textarea{cursor:text}
/* 자석 · 기울기와 겹치지 않게 CSS transform 전환 끔 */
.fx-on .btn,.fx-on .pcard,.fx-on .ccur,.fx-on .ccard{transition-property:background,color,border-color,box-shadow}
.fx-on .btn:hover,.fx-on .ccur:hover,.fx-on .ccard:hover{transform:none}
/* 카드 빛 반사 */
.glare{position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.28),transparent 60%);opacity:0;transition:opacity .4s}
.pcard .glare{background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(var(--brand-rgb),.10),transparent 60%)}
.pcard:hover .glare,.ccur:hover .glare,.ccard:hover .glare{opacity:1}
/* OJO란? 원: 등장 뒤 마우스 반응 */
.circles.done .circle{transition:transform .6s var(--ease),opacity .4s}
.circles.done:hover .circle{opacity:.55;transform:scale(.94)}
.circles.done .circle:hover{opacity:1;transform:scale(1.1);z-index:5}
/* 접근 방식 숫자: 외곽선 → 채워짐 */
.approach__list strong{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.75);transition:color 1s .5s ease}
.approach__list li.in strong{color:#fff}
/* 커리큘럼: 드래그 · 진행 막대 */
.curri__track{cursor:grab}
.curri__track.is-drag{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing;user-select:none}
.curri__track a{-webkit-user-drag:none}
.curri__bar{max-width:var(--inner);margin:36px auto 0;padding:0 var(--gut)}
.curri__bar span{display:block;height:2px;background:var(--gray-line);overflow:hidden}
.curri__bar i{display:block;height:100%;background:var(--brand);transform-origin:left;transform:scaleX(0)}
/* CTA 흐르는 글자 */
.marquee{position:absolute;left:0;right:0;top:28px;overflow:hidden;pointer-events:none;user-select:none}
.marquee__track{display:flex;width:max-content}
.marquee__track span{flex:none;padding-right:.4em;font-family:var(--f-en);font-size:clamp(70px,10vw,150px);font-weight:800;line-height:1;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.35)}
/* CTA 카드 그림 */
.ccard:hover .ccard__art--dots i{animation:dotPop .9s var(--ease) both}
.ccard__art--dots i:nth-child(1){animation-delay:0s}.ccard__art--dots i:nth-child(2){animation-delay:.05s}.ccard__art--dots i:nth-child(3){animation-delay:.1s}
.ccard__art--dots i:nth-child(4){animation-delay:.15s}.ccard__art--dots i:nth-child(5){animation-delay:.2s}.ccard__art--dots i:nth-child(6){animation-delay:.25s}
.ccard__art--dots i:nth-child(7){animation-delay:.3s}.ccard__art--dots i:nth-child(8){animation-delay:.35s}.ccard__art--dots i:nth-child(9){animation-delay:.4s}
@keyframes dotPop{40%{transform:scale(.4)}100%{transform:none}}
.ccard__art--bars i{transition:transform .6s var(--ease);transform-origin:right}
.ccard:hover .ccard__art--bars i:nth-child(odd){transform:scaleX(.55)}
.ccard:hover .ccard__art--bars i:nth-child(even){transform:scaleX(1.25)}
/* 신청서: 밑줄 채움 · 칩 튕김 · 버튼 빛 */
.field input[type=text],.field input[type=tel],.field textarea{background:linear-gradient(var(--brand),var(--brand)) left bottom/0 2px no-repeat;transition:border-color .2s,background-size .5s var(--ease)}
.field input[type=text]:focus,.field input[type=tel]:focus,.field textarea:focus{background-size:100% 2px}
.chips input:checked+span{animation:chipPop .4s var(--ease)}
@keyframes chipPop{40%{transform:scale(1.08)}}
.apply__submit{position:relative;overflow:hidden}
.apply__submit::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .8s var(--ease)}
.apply__submit:hover::after{left:120%}
/* =========================================================
프리미엄 연출 (premium.js)
========================================================= */
/* 관성 스크롤(Lenis) 기본값 */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
/* 인트로 로더 */
.loader{display:none}
.is-loading .loader,.loader.is-out{display:flex}
.loader{position:fixed;inset:0;z-index:10000;flex-direction:column;align-items:center;justify-content:center;background:#0b0b0b;color:#fff;clip-path:inset(0 0 0 0)}
.loader.is-out{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.77,0,.18,1) .25s;pointer-events:none}
.loader__logo{display:flex;gap:.08em;font-family:var(--f-en);font-size:clamp(72px,14vw,200px);font-weight:800;letter-spacing:.06em;line-height:1;color:var(--brand);overflow:hidden}
.loader__logo span{display:inline-block;transform:translateY(110%);animation:loaderIn 1s var(--ease) forwards}
.loader__logo span:nth-child(2){animation-delay:.08s}.loader__logo span:nth-child(3){animation-delay:.16s}
@keyframes loaderIn{to{transform:none}}
.loader.is-out .loader__logo span{transform:translateY(-110%);transition:transform .7s var(--ease);animation:none}
.loader__copy{margin-top:20px;font-size:15px;color:rgba(255,255,255,.55);letter-spacing:.02em;opacity:0;animation:fadeUp .8s .4s var(--ease) forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.loader__foot{position:absolute;left:var(--gut);right:var(--gut);bottom:40px;display:flex;align-items:center;gap:20px}
.loader__count{font-family:var(--f-en);font-size:14px;font-weight:700;min-width:44px;font-variant-numeric:tabular-nums}
.loader__count::after{content:"%"}
.loader__bar{flex:1;height:1px;background:rgba(255,255,255,.15)}
.loader__bar i{display:block;height:100%;background:var(--brand);transform-origin:left;transform:scaleX(0)}
/* 필름 그레인 */
.grain{position:fixed;left:-10%;top:-10%;width:120%;height:120%;will-change:transform;z-index:9000;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml;utf8,");animation:grain 1.2s steps(1) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-4%,-3%)}40%{transform:translate(-6%,3%)}60%{transform:translate(3%,-6%)}80%{transform:translate(5%,2%)}}
/* 메인 비주얼 빛 입자 */
.hero__fx{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
/* 빛의 고리 (hero-ring.js) · 스크롤하면 O 안쪽이 흰색으로 넓어지며 다음 섹션으로 */
.hero__gl{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
.hero__gl.is-flow{position:fixed} /* ?ring=flow: 화면에 고정된 채 고리가 아래 섹션까지 따라 내려옴 */
/* WebGL 이 안 되거나 '동작 줄이기' 기기: 정사각형 캔버스에 그린 2D 고리 (hero-ring.js flat) · 천천히 돎 */
.hero__ring2d{position:absolute;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.2s ease;animation:ring2d 160s linear infinite}
.hero__ring2d.is-on{opacity:1}
@keyframes ring2d{to{transform:rotate(360deg)}}
.hero__portal{position:absolute;inset:-2px;z-index:3;display:flex;align-items:center;justify-content:center;padding-top:12vh;background:#fff;pointer-events:none;visibility:hidden;clip-path:circle(0 at 50% 50%)}
.hero.is-portal{background:#fff}
.hero.is-portal .hero__slide,.hero.is-portal .hero__gl{visibility:hidden} /* 흰 화면이 다 덮인 뒤: 뒤의 어두운 배경이 아래 경계에 한 줄로 비치지 않게 */
/* 열리는 O 안에 보이는 'OJO란?' 머리글 (hero-ring.js 가 옮겨 옴) */
.portal__in{max-width:960px;padding:0 var(--gut);text-align:center;color:var(--black);opacity:0}
.portal__in .tit-xl{margin-top:20px}
.portal__in .desc{margin-top:30px}
.pin-spacer + .sec-about.is-portal-intro{padding-top:0} /* 머리글은 위 첫 화면(O 안)에 있으니 바로 세 원부터 */
.sec-about.is-portal-intro .circles{margin-top:8px}
/* O 속으로 들어간 뒤(첫 화면 고정 시): 흰 화면이 위 여백 역할을 하므로 'OJO란?' 위 여백은 짧게 → 내용이 바로 올라옴 */
.pin-spacer + .sec-about{padding-top:72px}
/* 버튼 글자 굴림 */
.roll{display:inline-flex;flex-direction:column;height:1.25em;line-height:1.25;overflow:hidden;vertical-align:middle}
.roll>span{display:block;transition:transform .55s var(--ease)}
.btn:hover .roll>span,.btn-apply:hover .roll>span,.how__link:hover .roll>span{transform:translateY(-100%)}
/* 링 주위를 도는 빛 */
.orbits{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.orbit{position:absolute;left:0;top:0;border:1px solid rgba(255,255,255,.06);border-radius:50%;animation:spin linear infinite}
.orbit b{position:absolute;left:50%;top:-4px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#fff;box-shadow:0 0 12px 3px rgba(var(--brand-rgb),.9),0 0 30px 8px rgba(var(--brand-rgb),.45)}
.orbit--1{width:min(110vh,104vw);height:min(110vh,104vw);margin:calc(min(110vh,104vw) / -2) 0 0 calc(min(110vh,104vw) / -2);animation-duration:26s}
.orbit--2{width:min(72vh,68vw);height:min(72vh,68vw);margin:calc(min(72vh,68vw) / -2) 0 0 calc(min(72vh,68vw) / -2);animation-duration:18s;animation-direction:reverse}
.orbit--2 b{width:5px;height:5px;margin-left:-2.5px;top:-2.5px}
.orbit--3{width:min(132vh,124vw);height:min(132vh,124vw);margin:calc(min(132vh,124vw) / -2) 0 0 calc(min(132vh,124vw) / -2);animation-duration:40s;border-style:dashed;border-color:rgba(255,255,255,.04)}
.orbit--3 b{width:4px;height:4px;margin-left:-2px;top:-2px;opacity:.7}
@keyframes spin{to{transform:rotate(360deg)}}
/* 원 4개: 둥실 떠 있음 */
.circles.done .circle{animation:float 6s ease-in-out infinite}
.circles.done .circle:nth-child(2){animation-delay:-2s}.circles.done .circle:nth-child(3){animation-delay:-4s}
.circles.done:hover .circle{animation-play-state:paused}
@keyframes float{50%{translate:0 -12px}}
/* 대형 로고 푸터 */
.footer{overflow:hidden}
.footer__mark{display:flex;justify-content:center;gap:.02em;margin-top:40px;font-family:var(--f-en);font-size:clamp(96px,28vw,460px);font-weight:800;line-height:.78;letter-spacing:-.02em;color:var(--brand);user-select:none}
.footer__mark span{display:inline-block;transition:color .4s,-webkit-text-stroke .4s}
.footer__mark span:hover{color:transparent;-webkit-text-stroke:2px var(--brand)}
/* 모바일 메뉴: 항목이 차례로 */
.m-menu li,.m-menu__apply{opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .7s var(--ease)}
.m-open .m-menu li,.m-open .m-menu__apply{opacity:1;transform:none}
.m-open .m-menu li:nth-child(2){transition-delay:.06s}.m-open .m-menu li:nth-child(3){transition-delay:.12s}.m-open .m-menu li:nth-child(4){transition-delay:.18s}.m-open .m-menu__apply{transition-delay:.24s}
/* 신청 완료 축하 */
.confetti{position:fixed;inset:0;z-index:9500;pointer-events:none;width:100%;height:100%}
/* =========================================================
오퍼 한 장
========================================================= */
.sec-sheet{background:var(--gray-bg2);padding:160px 0;overflow:hidden}
.sheet__grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}
.sheet__head .tit-xl{margin-top:18px}
.sheet__head .eyebrow{font-size:24px}
.sheet__head .desc{margin-top:28px;font-size:15.5px;color:var(--gray-txt2)}
.sheet__head .desc+.desc{margin-top:14px}
.sec-sheet.is-pinned{min-height:100vh;padding:90px 0;display:flex;align-items:center}
.sec-sheet.is-pinned .inner{width:100%}
.paper{position:relative;background:#fff;border-radius:22px;padding:36px 40px 28px;box-shadow:0 50px 90px -40px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.04);transform:rotate(-1.5deg)}
.paper__top{display:flex;justify-content:space-between;align-items:center}
.paper__tit{font-family:var(--f-en);font-size:13px;font-weight:700;letter-spacing:.08em}
.paper__tit em{font-family:var(--f-kr);font-weight:600;letter-spacing:0;color:var(--gray-txt)}
.paper__count{font-family:var(--f-en);font-size:13px;font-weight:700;color:var(--gray-txt);font-variant-numeric:tabular-nums}
.paper__count b{color:var(--brand)}
.paper__bar{display:block;height:2px;margin:16px 0 6px;background:var(--gray-line);overflow:hidden}
.paper__bar i{display:block;height:100%;background:var(--brand);transform-origin:left;transform:scaleX(var(--sp,1));transition:transform .6s var(--ease)}
.paper__rows li{display:grid;grid-template-columns:34px 1fr 24px;gap:14px;align-items:center;padding:17px 0;border-bottom:1px solid #f0f0f0}
.paper__no{font-family:var(--f-en);font-size:12px;font-weight:700;color:var(--brand);transition:color .4s}
.paper__rows b{display:block;font-size:12.5px;font-weight:600;color:var(--gray-txt);transition:opacity .4s}
.paper__rows p{margin-top:3px;font-size:16px;font-weight:700;letter-spacing:-.02em;transition:clip-path 1s var(--ease),opacity .6s}
.paper__chk{position:relative;width:22px;height:22px;border-radius:50%;background:var(--brand);transition:background .3s,transform .5s var(--ease),box-shadow .3s}
.paper__chk::after{content:"";position:absolute;left:8px;top:5px;width:5px;height:9px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
.paper__note{margin-top:16px;font-size:12px;color:#aaa}
.paper__stamp{position:absolute;right:-26px;top:-38px;width:118px;height:118px;border:2.5px solid var(--brand);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--f-en);font-size:16px;font-weight:800;letter-spacing:.06em;line-height:1.15;color:var(--brand);background:rgba(255,255,255,.85);transform:rotate(-14deg)}
.paper__stamp::before{content:"";position:absolute;inset:6px;border:1px dashed rgba(var(--brand-rgb),.5);border-radius:50%}
/* 채움 연출 (JS가 .is-anim 을 붙였을 때만) */
.paper.is-anim li:not(.is-on) .paper__no{color:#ccc}
.paper.is-anim li:not(.is-on) b{opacity:.45}
.paper.is-anim li:not(.is-on) p{clip-path:inset(0 100% 0 0);opacity:0}
.paper.is-anim li:not(.is-on) .paper__chk{background:#fff;box-shadow:inset 0 0 0 1.5px #ddd;transform:scale(.8)}
.paper.is-anim li.is-on .paper__chk{animation:chkPop .5s var(--ease)}
@keyframes chkPop{40%{transform:scale(1.3)}}
.paper.is-anim:not(.is-done) .paper__stamp{opacity:0;transform:rotate(10deg) scale(1.8)}
.paper.is-anim .paper__stamp{transition:opacity .4s,transform .7s cubic-bezier(.34,1.56,.64,1)}
/* =========================================================
30초 오퍼 진단
========================================================= */
.sec-quiz{position:relative;background:#0b0b0b;color:#fff;padding:160px 0;overflow:hidden}
.sec-quiz::before{content:"";position:absolute;right:-10vw;top:-20vh;width:70vw;height:70vw;border-radius:50%;background:radial-gradient(circle,rgba(var(--brand-rgb),.22),transparent 60%);pointer-events:none}
.quiz__grid{position:relative;display:grid;grid-template-columns:1fr 1.25fr;gap:80px;align-items:start}
.quiz__head{position:sticky;top:140px}
.quiz__head .eyebrow{font-size:24px}
.quiz__head .tit-xl{margin-top:18px}
.quiz__head .desc{margin-top:28px;font-size:15.5px;color:#a5a5a5}
.quiz{position:relative;min-height:560px;display:flex;flex-direction:column;padding:40px 44px;border:1px solid rgba(255,255,255,.1);border-radius:26px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.quiz__top{display:flex;justify-content:space-between;align-items:center;min-height:24px}
.quiz__step{font-family:var(--f-en);font-size:13px;font-weight:700;color:#777;font-variant-numeric:tabular-nums}
.quiz__step b{color:var(--brand)}
.quiz__back{font-size:13.5px;font-weight:600;color:#9a9a9a;transition:color .2s}
.quiz__back::before{content:"\2190 "}
.quiz__back:hover{color:#fff}
.quiz__bar{display:block;height:2px;margin:16px 0 36px;background:rgba(255,255,255,.1);overflow:hidden;border-radius:2px}
.quiz__bar i{display:block;height:100%;background:var(--brand);transform-origin:left;transform:scaleX(0);transition:transform .6s var(--ease)}
.quiz__stage{flex:1;transition:opacity .3s,transform .3s}
.quiz__stage.is-out{opacity:0;transform:translateX(-30px)}
.q__title{font-size:clamp(22px,2vw,28px);font-weight:800;line-height:1.45;letter-spacing:-.03em;animation:fadeUp .6s var(--ease) both}
.q__opts{display:grid;gap:10px;margin-top:28px}
.q__opt{display:flex;align-items:center;gap:16px;width:100%;padding:18px 20px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.02);color:#fff;font-size:16px;font-weight:500;line-height:1.5;text-align:left;transition:border-color .25s,background .25s;animation:optIn .6s var(--ease) both;animation-delay:calc(var(--i) * 70ms + .1s)}
@keyframes optIn{from{opacity:0;transform:translateY(16px)}}
.q__opt i{flex:none;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid rgba(255,255,255,.3);border-radius:50%;font-family:var(--f-en);font-size:12px;font-style:normal;font-weight:700;transition:.25s}
.q__opt:hover,.q__opt:focus-visible{border-color:var(--brand);background:rgba(var(--brand-rgb),.12);outline:0}
.q__opt:hover i,.q__opt:focus-visible i{background:var(--brand);border-color:var(--brand)}
.q__opt.is-picked{background:var(--brand);border-color:var(--brand)}
.q__opt.is-picked i{background:#fff;border-color:#fff;color:var(--brand)}
/* 결과 */
.q__res>*{animation:fadeUp .7s var(--ease) both}
.q__res>*:nth-child(2){animation-delay:.08s}.q__res>*:nth-child(3){animation-delay:.16s}.q__res>*:nth-child(4){animation-delay:.24s}.q__res>*:nth-child(5){animation-delay:.32s}.q__res>*:nth-child(6){animation-delay:.4s}.q__res>*:nth-child(7){animation-delay:.48s}
.q__label{font-family:var(--f-en);font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--brand)}
.q__name{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:10px;font-size:clamp(32px,3.4vw,46px);font-weight:800;letter-spacing:-.04em;line-height:1.2}
.q__name span{padding:5px 12px;border-radius:100px;background:rgba(var(--brand-rgb),.18);color:var(--brand);font-size:13px;font-weight:700;letter-spacing:0}
.q__lead{margin-top:14px;font-size:18px;font-weight:700;line-height:1.55}
.q__desc{margin-top:8px;font-size:15px;line-height:1.75;color:#a5a5a5}
.q__fit{margin-top:26px;display:grid;gap:10px}
.q__fit li{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;font-size:13px;color:#8a8a8a}
.q__fit li.is-top{color:#fff;font-weight:700}
.q__fit span{display:block;height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.q__fit i{display:block;height:100%;width:0;border-radius:6px;background:#555;transition:width 1.2s var(--ease) .3s}
.q__fit li.is-top i{background:var(--brand)}
.q__picked{margin-top:22px;display:flex;flex-wrap:wrap;gap:6px}
.q__picked li{padding:5px 11px;border-radius:100px;background:rgba(255,255,255,.06);font-size:12.5px;color:#bdbdbd}
.q__acts{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.q__retry{margin-left:auto;font-size:13.5px;font-weight:600;color:#8a8a8a;border-bottom:1px solid currentColor}
.q__retry:hover{color:#fff}
/* 커리큘럼 가로 스크롤 (PC, JS가 .is-hscroll 을 붙였을 때) */
.sec-curri.is-hscroll{padding:96px 0 56px;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.sec-curri.is-hscroll .curri{margin-top:44px}
.sec-curri.is-hscroll .curri__track{scroll-snap-type:none;scroll-behavior:auto}
.sec-curri.is-hscroll .ccur{height:380px}
.sec-curri.is-hscroll .btn{margin-top:36px}
/* =========================================================
자주 묻는 질문
========================================================= */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sec-faq{padding:160px 0;border-top:1px solid var(--gray-line)}
.faq__grid{display:grid;grid-template-columns:1fr 2fr;gap:80px;align-items:start}
.faq__head{position:sticky;top:140px}
.faq__head .eyebrow{font-size:24px}
.faq__head .tit-xl{margin-top:18px}
.faq__head .desc{margin-top:24px;font-size:15px;color:var(--gray-txt2)}
.faq__head .btn{margin-top:32px}
.faq__tools{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}
.faq__cats{display:flex;flex-wrap:wrap;gap:8px}
.faq__cats button{padding:9px 16px;border:1.5px solid #e2e2e2;border-radius:100px;font-size:14px;font-weight:600;color:#555;transition:.25s}
.faq__cats button:hover{border-color:#999;color:#000}
.faq__cats button[aria-selected="true"]{background:#000;border-color:#000;color:#fff}
.faq__search{position:relative;flex:0 1 280px}
.faq__search::before{content:"";position:absolute;left:14px;top:50%;width:12px;height:12px;margin-top:-8px;border:2px solid #999;border-radius:50%}
.faq__search::after{content:"";position:absolute;left:25px;top:50%;width:6px;height:2px;margin-top:4px;background:#999;transform:rotate(45deg)}
.faq__search input{width:100%;height:44px;padding:0 16px 0 40px;border:1.5px solid #e2e2e2;border-radius:100px;font-family:inherit;font-size:14px;outline:0;transition:border-color .25s}
.faq__search input:focus{border-color:var(--brand)}
.faq__count{margin-top:28px;font-size:13px;color:var(--gray-txt)}
.faq__count b{color:var(--brand);font-family:var(--f-en)}
.faq__list{margin-top:12px;border-top:2px solid #000}
.faq__item{position:relative;border-bottom:1px solid var(--gray-line)}
.faq__item[hidden]{display:none}
.faq__q{position:relative;isolation:isolate;display:grid;grid-template-columns:64px 1fr 28px;gap:12px;align-items:center;width:100%;padding:26px 8px 26px 0;text-align:left;overflow:hidden}
.faq__q::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--gray-bg2);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.faq__q:hover::before{transform:scaleX(1)}
.faq__no{padding-left:12px;font-family:var(--f-en);font-size:13px;font-weight:700;color:#bbb;transition:color .3s}
.faq__txt{font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.5}
.faq__txt mark{background:rgba(var(--brand-rgb),.18);color:inherit;border-radius:3px;padding:0 2px}
.faq__q i{position:relative;width:28px;height:28px;border-radius:50%;border:1.5px solid #ddd;transition:transform .5s var(--ease),background .3s,border-color .3s}
.faq__q i::before,.faq__q i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;margin:-.75px 0 0 -5px;background:#000;transition:background .3s}
.faq__q i::after{transform:rotate(90deg)}
.faq__item.is-open .faq__no,.faq__q:hover .faq__no{color:var(--brand)}
.faq__item.is-open .faq__q i{transform:rotate(135deg);background:var(--brand);border-color:var(--brand)}
.faq__item.is-open .faq__q i::before,.faq__item.is-open .faq__q i::after{background:#fff}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.faq__a>div{overflow:hidden}
.faq__item.is-open .faq__a{grid-template-rows:1fr}
.faq__a p{padding:0 48px 0 76px;font-size:15.5px;line-height:1.85;color:#444;opacity:0;transform:translateY(-8px);transition:opacity .4s,transform .5s var(--ease)}
.faq__a p:first-child{padding-top:2px}
.faq__a p:last-child{padding-bottom:28px}
.faq__a p+p{margin-top:10px}
.faq__item.is-open .faq__a p{opacity:1;transform:none;transition-delay:.12s}
.faq__a b{color:#000}
.faq__a a{color:var(--brand);font-weight:700;border-bottom:1px solid currentColor}
.faq__item.is-open::before{content:"";position:absolute;left:0;top:0;bottom:-1px;width:3px;background:var(--brand)}
.todo{display:inline-block;padding:2px 8px;border:1px dashed var(--brand);border-radius:6px;background:rgba(var(--brand-rgb),.06);color:var(--brand);font-size:14px;font-weight:600}
.faq__empty{padding:40px 0;text-align:center;font-size:15px;color:var(--gray-txt)}
.faq__empty a{color:var(--brand);font-weight:700;border-bottom:1px solid currentColor}
/* =========================================================
페이지 전환 (premium.js)
========================================================= */
.pt{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;background:#0b0b0b;transform:translateY(101%);pointer-events:none}
.pt b{font-family:var(--f-en);font-size:30px;font-weight:800;letter-spacing:.14em;color:var(--brand);opacity:0;transition:opacity .3s}
.pt.is-cover{transform:none;transition:transform .55s cubic-bezier(.77,0,.18,1)}
.pt.is-hold{transform:none}
.pt.is-cover b,.pt.is-hold b{opacity:1}
.pt.is-lift{transform:translateY(-101%);transition:transform .9s cubic-bezier(.77,0,.18,1)}
.pt.is-lift b{opacity:0}
.pcard__more{align-self:flex-start;margin-top:16px;font-size:13.5px;font-weight:700;border-bottom:1.5px solid currentColor;padding-bottom:2px}
.pcard__more:hover{color:var(--brand)}
.link{color:var(--brand);font-weight:700;border-bottom:1px solid currentColor}
/* =========================================================
오퍼 웍스 상세 · 01 첫 화면
========================================================= */
.frame{position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden;background:#0b0b0b;color:#fff;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:48px;padding:0 var(--gut)}
.frame__bg{position:absolute;inset:-6%;background:radial-gradient(48% 58% at 68% 36%,rgba(var(--brand-rgb),.5),transparent 62%),radial-gradient(38% 48% at 18% 82%,rgba(255,190,150,.16),transparent 70%),linear-gradient(140deg,#1b1210,#060606 72%);background-size:cover;background-position:center;animation:frameDrift 18s ease-in-out infinite alternate}
@keyframes frameDrift{to{transform:scale(1.08) translate(-1.5%,1%)}}
.frame__shade{position:absolute;inset:0;background:#000;opacity:.2}
.frame__q,.frame__a{position:relative;z-index:2}
.frame__en{font-family:var(--f-en);font-size:14px;font-weight:700;letter-spacing:.14em;color:var(--brand)}
.frame__tit{margin-top:20px;font-size:clamp(34px,5vw,74px);font-weight:800;line-height:1.26;letter-spacing:-.04em}
.frame__tit em{color:var(--brand)}
.frame__a p{font-size:clamp(17px,1.6vw,23px);font-weight:600;line-height:1.75;color:rgba(255,255,255,.9)}
.frame__a p+p{margin-top:24px}
.frame .hero__down{z-index:3}
/* PC 연출: 질문과 설명이 같은 자리에서 교체됨 (works.js) */
.is-motion .frame{display:block;padding:0}
.is-motion .frame__q,.is-motion .frame__a{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--gut)}
.is-motion .frame__a{opacity:0}
/* =========================================================
02 소개 + 번호 펼침 목록
========================================================= */
.w-intro{padding:170px 0 150px}
.w-eyebrow{font-size:17px;font-weight:700;color:var(--brand);letter-spacing:-.01em}
.w-intro .tit-xl{margin-top:16px}
.w-intro__txt{margin-top:40px;max-width:760px}
.w-intro__txt p{font-size:16px;line-height:1.9;color:#444}
.w-intro__txt p+p{margin-top:16px}
.feats{margin-top:100px;border-top:2px solid #000}
.feat{border-bottom:1px solid var(--gray-line)}
.feat__q{display:grid;grid-template-columns:80px 1fr 32px;gap:12px;align-items:center;width:100%;padding:32px 0;text-align:left}
.feat__q b{font-family:var(--f-en);font-size:20px;font-weight:700;color:#c8c8c8;transition:color .3s}
.feat__q span{font-size:clamp(19px,1.8vw,24px);font-weight:800;letter-spacing:-.03em;transition:color .3s}
.feat__q i{position:relative;width:32px;height:32px;border-radius:50%;border:1.5px solid #ddd;transition:transform .5s var(--ease),background .3s,border-color .3s}
.feat__q i::before,.feat__q i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:#000;transition:background .3s}
.feat__q i::after{transform:rotate(90deg)}
.feat__q:hover b,.feat.is-open .feat__q b{color:var(--brand)}
.feat.is-open .feat__q i{transform:rotate(135deg);background:var(--brand);border-color:var(--brand)}
.feat.is-open .feat__q i::before,.feat.is-open .feat__q i::after{background:#fff}
.feat__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .65s var(--ease)}
.feat.is-open .feat__a{grid-template-rows:1fr}
.feat__a>div{overflow:hidden}
.feat__in{display:grid;grid-template-columns:1fr 440px;gap:48px;align-items:start;padding:0 0 0 92px}
.feat__in p{font-size:16px;line-height:1.9;color:#555;opacity:0;transform:translateY(-10px);transition:opacity .4s,transform .6s var(--ease)}
.feat__img{position:relative;aspect-ratio:16/10;margin-bottom:40px;border-radius:18px;overflow:hidden;display:flex;align-items:flex-end;justify-content:flex-end;padding:14px 16px;background-size:cover;background-position:center;transform:scale(.94);opacity:0;transition:transform .8s var(--ease),opacity .5s}
.feat.is-open .feat__in p,.feat.is-open .feat__img{opacity:1;transform:none;transition-delay:.15s}
.feat__img--1{background:radial-gradient(60% 70% at 30% 70%,rgba(var(--brand-rgb),.55),transparent 70%),linear-gradient(140deg,#fbf6f2,#e9e4df)}
.feat__img--2{background:radial-gradient(60% 70% at 70% 30%,rgba(var(--brand-rgb),.4),transparent 70%),linear-gradient(140deg,#1b1b1b,#0b0b0b)}
.feat__img--2 .ph{color:rgba(255,255,255,.3)}
.feat__img--3{background:radial-gradient(60% 60% at 50% 80%,rgba(150,160,175,.5),transparent 70%),linear-gradient(160deg,#f6f7f8,#d8dbe0)}
/* =========================================================
03 질문 + 카드 4개
========================================================= */
.needs{background:var(--gray-bg2);padding:150px 0}
.needs__tit{text-align:center;font-size:clamp(28px,3.4vw,48px);font-weight:800;line-height:1.35;letter-spacing:-.035em}
.needs__tit em{color:var(--brand)}
.needs__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:72px}
.need{position:relative;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -34px rgba(0,0,0,.25)}
.need__img{position:relative;display:flex;align-items:flex-end;justify-content:flex-end;aspect-ratio:4/3;padding:12px 14px;background-size:cover;background-position:center;transition:transform .8s var(--ease)}
.need:hover .need__img{transform:scale(1.05)}
.need__img--1{background:radial-gradient(55% 60% at 30% 70%,rgba(var(--brand-rgb),.6),transparent 70%),linear-gradient(140deg,#fff7f1,#efe7e0)}
.need__img--2{background:radial-gradient(60% 60% at 70% 40%,rgba(var(--brand-rgb),.55),transparent 70%),linear-gradient(150deg,#1d1d1d,#090909)}
.need__img--2 .ph{color:rgba(255,255,255,.3)}
.need__img--3{background:radial-gradient(50% 60% at 50% 60%,rgba(70,70,70,.25),transparent 70%),linear-gradient(150deg,#f4f4f4,#dcdcdc)}
.need__img--4{background:radial-gradient(60% 60% at 40% 40%,rgba(255,255,255,.35),transparent 70%),linear-gradient(150deg,var(--brand),#b84a07)}
.need__img--4 .ph{color:rgba(255,255,255,.45)}
.need__body{position:relative;z-index:1;padding:22px 24px 26px;background:#fff}
.need__body small{display:block;font-family:var(--f-en);font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--brand)}
.need__body strong{display:block;margin-top:8px;font-size:18px;font-weight:800;line-height:1.45;letter-spacing:-.02em}
/* =========================================================
04 고정 탭 + 범위 상세
========================================================= */
.tabbar{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--gray-line);transition:top .45s var(--ease)}
body:has(.header:not(.is-hidden):not(.is-over)) .tabbar{top:var(--header-h)}
.tabbar__in{position:relative;display:flex;justify-content:center;gap:56px;height:64px;max-width:var(--inner);margin:0 auto;padding:0 var(--gut)}
.tabbar__in a{display:flex;align-items:center;font-size:15px;font-weight:600;color:#9a9a9a;white-space:nowrap;transition:color .3s}
.tabbar__in a:hover,.tabbar__in a.is-on{color:#000}
.tabbar__in a.is-on{font-weight:800}
.tabbar__line{position:absolute;bottom:-1px;left:0;width:0;height:2px;background:var(--brand);transition:left .5s var(--ease),width .5s var(--ease)}
.scopes{padding:130px 0 170px}
.scopes__tit{text-align:center;font-size:clamp(26px,3vw,44px);font-weight:800;line-height:1.4;letter-spacing:-.035em}
.scopes__tit em{color:var(--brand)}
.scope{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center;padding:70px 0;scroll-margin-top:150px}
.scope:first-of-type{margin-top:60px}
.scope--rev .scope__vis{order:2}
.scope__vis{position:relative;aspect-ratio:1/1;max-height:580px;border-radius:30px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#f9f4ef,#eae6e2)}
.scope__no{font-family:var(--f-en);font-size:14px;font-weight:700;letter-spacing:.08em;color:var(--brand)}
.scope__sub{margin-top:16px;font-size:16px;font-weight:700;line-height:1.6;color:#333}
.scope__txt h3{margin-top:12px;font-size:clamp(30px,3vw,46px);font-weight:800;line-height:1.25;letter-spacing:-.04em}
.scope__desc{margin-top:22px;font-size:16px;line-height:1.9;color:#555}
.scope .tags{margin-top:26px;padding-top:0}
.scope__txt .btn{margin-top:36px}
/* 범위 1 그림: 오퍼 한 장 + 떠 있는 키워드 */
.mini{width:62%;padding:24px 26px 14px;border-radius:18px;background:#fff;box-shadow:0 50px 80px -36px rgba(0,0,0,.3);transform:rotate(-4deg)}
.mini__top{font-family:var(--f-en);font-size:11px;font-weight:700;letter-spacing:.08em;padding-bottom:12px;border-bottom:2px solid var(--brand)}
.mini__top em{font-family:var(--f-kr);font-weight:600;letter-spacing:0;color:var(--gray-txt)}
.mini li{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid #f1f1f1;font-size:14px;font-weight:700}
.mini li:last-child{border-bottom:0}
.mini li b{font-family:var(--f-en);font-size:11px;color:var(--brand)}
.chip{position:absolute;padding:9px 16px;border-radius:100px;font-size:13.5px;font-weight:700;box-shadow:0 14px 30px -12px rgba(0,0,0,.3);animation:chipFloat 5s ease-in-out infinite}
.chip--1{left:7%;top:15%;background:var(--brand);color:#fff}
.chip--2{right:6%;top:30%;background:#111;color:#fff;animation-delay:-1.2s}
.chip--3{left:9%;bottom:18%;background:#fff;color:#111;animation-delay:-2.4s}
.chip--4{right:10%;bottom:11%;background:#fff;color:var(--brand);animation-delay:-3.6s}
@keyframes chipFloat{50%{transform:translateY(-10px)}}
/* 범위 2 그림: 고객이 처음 접해서 구매하기까지 */
.scope--rev .scope__vis{background:radial-gradient(60% 50% at 70% 20%,rgba(var(--brand-rgb),.35),transparent 70%),#0d0d0d}
.flow{position:relative;height:70%;width:56%}
.flow__line{position:absolute;left:13px;top:10px;bottom:10px;width:2px;background:#2c2c2c}
.flow__line i{display:block;width:100%;height:100%;background:var(--brand);transform-origin:top;transform:scaleY(var(--fp,1));box-shadow:0 0 12px rgba(var(--brand-rgb),.8)}
.flow ol{position:relative;height:100%;display:flex;flex-direction:column;justify-content:space-between}
.flow li{display:grid;grid-template-columns:28px 1fr;column-gap:20px;align-items:center;color:#fff;transition:opacity .5s}
.flow li i{grid-row:1/3;width:16px;height:16px;margin-left:6px;border-radius:50%;border:2px solid var(--brand);background:var(--brand);box-shadow:0 0 0 6px rgba(var(--brand-rgb),.18);transition:.4s}
.flow li b{font-family:var(--f-en);font-size:11px;font-weight:700;letter-spacing:.1em;color:#8a8a8a}
.flow li strong{font-size:22px;font-weight:800;letter-spacing:-.03em}
.flow.is-anim li:not(.is-on){opacity:.32}
.flow.is-anim li:not(.is-on) i{background:#0d0d0d;border-color:#444;box-shadow:none}
/* 진행 순서 */
.process{position:relative;margin-top:150px;padding-top:90px;border-top:1px solid var(--gray-line);scroll-margin-top:150px}
.process__tit{margin-top:12px;font-size:clamp(28px,2.8vw,40px);font-weight:800;letter-spacing:-.035em}
.process__list{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:56px;padding-top:34px}
.process__list::before,.process__list::after{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:var(--gray-line)}
.process__list::after{background:var(--brand);transform-origin:left;transform:scaleX(var(--pp,1))}
.process__list li{position:relative}
.process__list li::before{content:"";position:absolute;left:0;top:-34px;z-index:1;width:14px;height:14px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 5px #fff}
.process__list b{font-family:var(--f-en);font-size:14px;font-weight:700;color:var(--brand)}
.process__list strong{display:block;margin-top:10px;font-size:20px;font-weight:800;letter-spacing:-.02em}
.process__list p{margin-top:10px;font-size:14.5px;line-height:1.8;color:#666}
.process__bar{display:none}
/* 상세 페이지 FAQ */
.sec-faq--sub{background:#fff}
/* 하단 띠 */
.attached{background:var(--brand);color:#fff;padding:72px 0}
.attached__in{display:flex;justify-content:space-between;align-items:center;gap:24px}
.attached__t{font-size:clamp(22px,2.2vw,30px);font-weight:800;line-height:1.45;letter-spacing:-.03em}
/* =========================================================
오퍼 포커스 · 오퍼 세션 상세
========================================================= */
.frame__bg--focus{background:radial-gradient(46% 60% at 28% 40%,rgba(var(--brand-rgb),.45),transparent 62%),radial-gradient(40% 50% at 85% 75%,rgba(150,170,210,.18),transparent 70%),linear-gradient(200deg,#121418,#060606 72%)}
.frame__bg--session{background:radial-gradient(55% 50% at 50% 28%,rgba(var(--brand-rgb),.42),transparent 62%),radial-gradient(40% 40% at 15% 85%,rgba(255,210,170,.14),transparent 70%),linear-gradient(170deg,#17110e,#060606 72%)}
.feats__label{margin-top:90px;font-family:var(--f-en);font-size:14px;font-weight:700;letter-spacing:.08em;color:var(--brand)}
.feats__label+.feats{margin-top:18px}
.feat__img--4{background:radial-gradient(60% 60% at 40% 40%,rgba(255,255,255,.35),transparent 70%),linear-gradient(150deg,var(--brand),#b84a07)}
.feat__img--4 .ph{color:rgba(255,255,255,.45)}
.need__body q{display:block;margin-top:10px;font-size:13.5px;line-height:1.65;color:#777}
a.need .need__body q{quotes:none;color:var(--brand);font-weight:700}
/* 상세 단계 목록 */
.scope__steps{margin-top:24px;border-top:1px solid var(--gray-line)}
.scope__steps li{display:grid;grid-template-columns:36px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--gray-line)}
.scope__steps b{font-family:var(--f-en);font-size:14px;font-weight:700;color:var(--brand);padding-top:2px}
.scope__steps p{font-size:15px;line-height:1.75;color:#555}
.scope__steps strong{display:block;margin-bottom:4px;font-size:16px;color:#000}
.scope__note{margin-top:14px;font-size:12.5px;color:#aaa}
/* 상담 전 준비: 체크리스트가 하나씩 체크됨 */
.check{display:grid;gap:14px;width:70%}
.check li{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:16px;background:#fff;box-shadow:0 24px 40px -26px rgba(0,0,0,.25);font-size:16px;font-weight:700;opacity:.45;transform:translateX(-18px);transition:opacity .6s,transform .8s var(--ease)}
.check li b{margin-right:8px;font-family:var(--f-en);font-size:12px;color:var(--brand)}
.check i{position:relative;flex:none;width:26px;height:26px;border-radius:50%;border:2px solid #ddd;transition:background .3s,border-color .3s}
.check i::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg) scale(0);transition:transform .4s var(--ease)}
.check.in li{opacity:1;transform:none}
.check.in i{background:var(--brand);border-color:var(--brand)}
.check.in i::after{transform:rotate(45deg) scale(1)}
.check li:nth-child(2),.check li:nth-child(2) i,.check li:nth-child(2) i::after{transition-delay:.35s}
.check li:nth-child(3),.check li:nth-child(3) i,.check li:nth-child(3) i::after{transition-delay:.7s}
/* 상담 예시: 대화 말풍선 */
.chat{position:relative;width:78%;height:72%}
.chat p{position:absolute;max-width:72%;padding:16px 20px;border-radius:20px;font-size:16px;font-weight:700;line-height:1.5;box-shadow:0 24px 40px -24px rgba(0,0,0,.3);opacity:0;transform:translateY(20px) scale(.96);transition:opacity .6s,transform .8s cubic-bezier(.34,1.56,.64,1)}
.chat__q{left:0;background:#fff;border-bottom-left-radius:6px}
.chat__q--1{top:4%}
.chat__q--2{top:30%;transition-delay:.3s}
.chat__a{right:0;top:58%;background:var(--brand);color:#fff;border-bottom-right-radius:6px;transition-delay:.6s}
.chat__tag{position:absolute;left:0;bottom:0;padding:7px 14px;border-radius:100px;background:#111;color:#fff;font-size:12.5px;font-weight:700;opacity:0;transition:opacity .6s .9s}
.chat.in p{opacity:1;transform:none}
.chat.in .chat__tag{opacity:1}
/* 오퍼 세션: 커리큘럼 9개 */
.curri-grid{margin-top:70px;padding-bottom:40px;scroll-margin-top:150px}
.curri-grid__head h3{margin-top:12px;font-size:clamp(28px,2.8vw,40px);font-weight:800;letter-spacing:-.035em}
.curri-grid__head .scope__desc{max-width:640px}
.steps9{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.steps9 li{padding:26px 24px 28px;border:1.5px solid var(--gray-line);border-radius:18px;background:#fff;transition:opacity 1s var(--ease),transform 1s var(--ease),border-color .3s}
.steps9 li:hover{border-color:var(--brand)}
.steps9 b{font-family:var(--f-en);font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--brand)}
.steps9 strong{display:block;margin-top:8px;font-size:20px;font-weight:800;letter-spacing:-.02em}
.steps9 p{margin-top:8px;font-size:14.5px;line-height:1.7;color:#666}
.process__list--3{grid-template-columns:repeat(3,1fr)}
.process__list--5{grid-template-columns:repeat(5,1fr);gap:24px}
.process__note{margin-top:32px;font-size:14.5px;font-weight:700;color:var(--brand)}
/* =========================================================
RESPONSIVE
========================================================= */
@media(max-width:1280px){
.menu__list{gap:40px}
.curri__nav{display:none}
}
@media(max-width:1023px){
:root{--gut:24px;--header-h:64px}
.menu{display:none}
.btn-apply{display:none}
.btn-burger{display:block}
.eyebrow{font-size:20px}
.hero__content{left:var(--gut)}
.hero__eyebrow{gap:10px;margin-bottom:20px;font-size:10px;letter-spacing:.1em}
.hero__eyebrow::before{width:20px}
.hero__cta{margin-top:36px}
.hero__pager{left:var(--gut)}
.hero__pager span{width:26px}
.sec-about{padding:130px 0 110px}
.circles{flex-wrap:wrap;gap:0;padding-left:0;margin-top:64px}
.circle{width:170px;height:170px;margin:0 -10px}
.circle strong{font-size:17px}.circle span{font-size:12px}
.sec-state{min-height:auto;padding:120px 0}
.why{padding:120px var(--gut)}
.why__keys{grid-template-columns:1fr;gap:48px}
.sec-approach{padding:120px 0 140px}
.approach__list{grid-template-columns:1fr;row-gap:56px;margin-top:64px;padding-left:0}
.approach__list li:nth-child(2){margin-top:0}
.example{padding:120px var(--gut)}
.example__rows li{grid-template-columns:1fr;gap:6px}
.example__rows p{font-size:16px}
.sec-ring{min-height:90vh}
.program__grid{grid-template-columns:1fr;padding-top:110px;padding-bottom:110px;gap:48px}
.program__head{position:static}
.program__cards{grid-template-columns:1fr;gap:20px}
.program__cards .pcard:nth-child(2),.program__cards .pcard:nth-child(3){margin-top:0}
.pcard{min-height:auto}
.sec-curri{padding:120px 0 110px}
.curri{margin-top:48px}
.ccur{width:290px;height:360px;padding:28px 24px}
.ccur__q{font-size:20px}
.sec-cta{padding:120px 0 90px}
.cta__cards{grid-template-columns:1fr;gap:16px;margin-top:64px}
.ccard{min-height:220px;padding:32px 28px}
.ccard__art{right:28px;transform:translateY(-50%) scale(.75);transform-origin:right center}
.sec-how{padding:120px 0 100px}
.how__list{grid-template-columns:1fr;margin-top:48px}
.how__list li{padding:36px 0}
.how__list li+li{border-left:0;border-top:1px solid var(--gray-line)}
.sec-apply{padding:110px 0 120px}
.sec-sheet{padding:110px 0}
.sheet__grid{grid-template-columns:1fr;gap:56px}
.paper{padding:28px 22px 22px;transform:none}
.paper__rows p{font-size:15px}
.paper__stamp{right:-6px;top:-44px;width:92px;height:92px;font-size:13px}
.sec-quiz{padding:110px 0}
.sec-faq{padding:110px 0}
.frame{gap:32px}
.w-intro{padding:110px 0 90px}
.feats{margin-top:60px}
.feat__q{grid-template-columns:44px 1fr 28px;padding:24px 0}
.feat__q b{font-size:15px}
.feat__q span{font-size:17px}
.feat__in{grid-template-columns:1fr;gap:20px;padding:0 0 0 56px}
.feat__img{margin-bottom:28px}
.needs{padding:100px 0}
.needs__grid{grid-template-columns:1fr 1fr;gap:12px;margin-top:44px}
.need__body{padding:16px 16px 18px}
.need__body strong{font-size:15px}
.tabbar__in{justify-content:flex-start;gap:24px;height:54px;overflow-x:auto;scrollbar-width:none}
.tabbar__in::-webkit-scrollbar{display:none}
.tabbar__in a{font-size:14px}
.scopes{padding:90px 0 110px}
.scope{grid-template-columns:1fr;gap:32px;padding:40px 0;scroll-margin-top:130px}
.scope--rev .scope__vis{order:0}
.mini{width:76%}
.chip{font-size:12px;padding:7px 12px}
.flow{width:70%}
.flow li strong{font-size:18px}
.process{margin-top:90px;padding-top:60px}
.process__list{grid-template-columns:1fr;gap:28px;padding-top:0;padding-left:34px}
.process__list::before,.process__list::after{left:6px;right:auto;top:0;bottom:0;width:2px;height:auto}
.process__list::after{transform-origin:top;transform:scaleY(var(--pp,1))}
.process__list li::before{left:-34px;top:2px}
.attached{padding:56px 0 100px}
.attached__in{flex-direction:column;align-items:flex-start}
.feats__label{margin-top:60px}
.check{width:86%}
.check li{padding:16px;font-size:14.5px}
.chat{width:88%}
.chat p{font-size:14px;padding:12px 16px}
.steps9{grid-template-columns:1fr}
.process__list--3,.process__list--5{grid-template-columns:1fr}
.faq__grid{grid-template-columns:1fr;gap:40px}
.faq__head{position:static}
.faq__search{flex-basis:100%}
.faq__q{grid-template-columns:44px 1fr 26px;gap:8px;padding:20px 4px 20px 0}
.faq__no{padding-left:6px;font-size:12px}
.faq__txt{font-size:16px}
.faq__a p{padding:0 12px 0 52px;font-size:14.5px}
.quiz__grid{grid-template-columns:1fr;gap:40px}
.quiz__head{position:static}
.quiz{min-height:auto;padding:28px 22px}
.q__opt{padding:16px;font-size:15px}
.q__retry{margin-left:0}
.apply__grid{grid-template-columns:1fr;gap:48px}
.apply__head{position:static}
.apply__box{padding:36px 22px;border-radius:18px}
.ccard__t,.ccard__d{max-width:none}
.ccard__art{display:none}
.m-cta{display:flex;align-items:center;justify-content:center;position:fixed;left:16px;right:16px;bottom:16px;z-index:95;height:56px;border-radius:100px;background:var(--brand);color:#fff;font-size:16px;font-weight:700;box-shadow:0 10px 30px rgba(var(--brand-rgb),.4);transform:translateY(140%);transition:transform .45s var(--ease)}
.m-cta.is-show{transform:none}
.footer__top{flex-direction:column;gap:48px}
.footer__map{flex-wrap:wrap;gap:36px 48px}
.to-top{right:16px;bottom:84px;width:48px;height:48px}
.to-top::before{left:17px;top:18px}.to-top::after{left:23px;top:18px}
}
/* 좁은 휴대폰: 세 원이 한 줄에 안 들어가면 위 둘 · 아래 하나로 삼각형처럼 맞물림 */
@media(max-width:520px){
.circle:nth-child(3){margin-top:-28px}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important}
.grain,.hero__fx,.orbits{display:none}
.rv,.circles:not(.in) .circle{opacity:1;transform:none}
.hero__txt .ln>span,.hero__txt .ch,.hero__txt.is-active .ln.is-wait .ch{transform:none;opacity:1;filter:none}
}
/* =========================================================
index-v2 (섹션 줄이기 시안): OJO란? 기준 문장 · 문제 · 작업 범위 · 상담 사진 · 질문 더 보기
========================================================= */
.about__state{margin-top:120px;font-size:clamp(24px,2.6vw,38px);font-weight:800;line-height:1.45;letter-spacing:-.03em}
.about__state em{font-style:normal;color:var(--brand)}
.sec-problem{background:#000;color:#fff;padding:180px 0 160px}
.prob__head{text-align:center}
.prob__head .tit-xl em{font-style:normal;color:var(--brand)}
.prob__lead{margin-top:28px;font-size:clamp(17px,1.5vw,21px);font-weight:600;line-height:1.7;color:#cfcfcf}
.prob__keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:100px;padding-top:56px;border-top:1px solid #2a2a2a}
.prob__keys strong{display:block;font-family:var(--f-en);font-size:clamp(30px,3vw,46px);font-weight:700;color:var(--brand);line-height:1.1}
.prob__keys b{display:block;margin-top:16px;font-size:20px;font-weight:800}
.prob__keys p{margin-top:12px;font-size:15px;line-height:1.8;color:#9a9a9a}
.prob__ex{max-width:960px;margin:120px auto 0;padding:56px 56px 48px;border:1px solid #2a2a2a;border-radius:24px}
.prob__ex-tit{font-size:clamp(22px,2.2vw,32px);font-weight:800;line-height:1.4;letter-spacing:-.03em;text-align:center}
.prob__rows{margin-top:40px;border-top:1px solid #2a2a2a}
.prob__rows li{display:grid;grid-template-columns:140px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid #2a2a2a}
.prob__rows b{font-size:14px;font-weight:700;color:var(--brand);padding-top:3px}
.prob__rows p{font-size:17px;line-height:1.75;color:#e6e6e6}
.prob__note{margin-top:20px;font-size:13px;color:#6f6f6f;text-align:center}
.pcard__scopes{margin-top:28px;padding-top:22px;border-top:1px solid #eee}
.pcard__scopes-t{font-size:14px;font-weight:700;color:#222}
.pcard__scopes a{display:block;margin-top:10px;padding:14px 16px;border-radius:14px;background:var(--gray-bg);transition:background .25s,color .25s}
.pcard__scopes a span{display:block;font-family:var(--f-en);font-size:11px;font-weight:600;color:var(--brand)}
.pcard__scopes a b{display:block;margin-top:4px;font-size:14.5px;font-weight:700;line-height:1.45}
.pcard__scopes a i{display:block;margin-top:6px;font-style:normal;font-size:12.5px;font-weight:700;color:var(--gray-txt2)}
.pcard__scopes a i::after{content:" →"}
.pcard__scopes a:hover{background:var(--brand);color:#fff}
.pcard__scopes a:hover span,.pcard__scopes a:hover i{color:#fff}
.how__photo{width:min(520px,100%);aspect-ratio:16/9;margin:56px auto 0;border-radius:24px;background:linear-gradient(160deg,#eceff2,#d5dae0);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center}
.faq__more{display:block;width:100%;margin-top:20px;padding:16px;border:1px solid #ddd;border-radius:100px;background:#fff;font-size:14px;font-weight:700;color:#222;transition:border-color .25s,color .25s}
.faq__more:hover{border-color:var(--brand);color:var(--brand)}
@media(max-width:1023px){
.about__state{margin-top:80px}
.sec-problem{padding:120px 0 110px}
.prob__keys{grid-template-columns:1fr;gap:44px;margin-top:64px;padding-top:44px}
.prob__ex{margin-top:72px;padding:32px 22px 28px;border-radius:18px}
.prob__rows li{grid-template-columns:1fr;gap:8px}
.prob__rows p{font-size:15.5px}
.how__photo{margin-top:40px;border-radius:18px}
}
/* =========================================================
메인 index.html (OJO 랜딩 메시지 v9): 질문 머리말 → 장면 → 짧은 결론 한 줄
========================================================= */
.lp{position:relative;padding:180px 0 170px}
.lp__in{max-width:1040px}
.lp__label{display:flex;align-items:center;gap:14px;font-family:var(--f-en);font-size:13px;font-weight:600;letter-spacing:.16em;color:var(--brand)}
.lp__label::before{content:"";width:32px;height:2px;background:var(--brand)}
.lp__q{margin-top:26px;font-size:clamp(34px,4.4vw,64px);font-weight:800;line-height:1.28;letter-spacing:-.04em}
.lp__text{margin-top:44px;font-size:clamp(17px,1.3vw,19px);line-height:1.95;color:#3a3a3a}
.lp__lead{margin-top:36px;font-size:clamp(20px,1.8vw,26px);font-weight:700;line-height:1.6;letter-spacing:-.02em}
.lp__key{margin-top:44px;font-size:clamp(28px,3.2vw,46px);font-weight:800;line-height:1.4;letter-spacing:-.035em}
.lp__key em{font-style:normal;color:var(--brand)}
.lp__close{margin-top:72px;font-size:clamp(22px,2vw,30px);line-height:1.55;letter-spacing:-.03em;color:#666}
.lp__close b{font-weight:800;color:var(--black)}
.lp__close--plain{color:var(--black);font-weight:700}
/* ★ 대표가 고른 문장: 인용처럼 */
.lp__star{margin:72px 0 0;padding:6px 0 6px 30px;border-left:4px solid var(--brand);font-size:clamp(22px,2.1vw,31px);font-weight:500;line-height:1.55;letter-spacing:-.03em;color:#333}
.lp__star b{font-weight:800;color:var(--black)}
.lp__star--big{font-size:clamp(28px,3.2vw,48px);line-height:1.4}
/* 배경 */
.lp--gray{background:var(--gray-bg)}
.lp--dark{background:#0b0b0b;color:#fff}
.lp--dark .lp__text{color:#b9b9b9}
.lp--dark .lp__close{color:#9a9a9a}
.lp--dark .lp__close b,.lp--dark .lp__star b{color:#fff}
.lp--dark .lp__star{color:#d6d6d6}
.lp--brand{background:var(--brand);color:#fff}
.lp--brand .lp__label{color:#fff}
.lp--brand .lp__label::before{background:#fff}
.lp--brand .lp__text{color:rgba(255,255,255,.92)}
.lp--brand .lp__star{border-color:#fff;color:rgba(255,255,255,.92)}
.lp--brand .lp__star b{color:#fff}
/* 1 원했던 삶 */
.lp__life{margin-top:64px;border-top:1px solid #e3e3e3}
.lp__life li{display:flex;gap:28px;align-items:baseline;padding:26px 0;border-bottom:1px solid #e3e3e3;font-size:clamp(19px,1.7vw,25px);font-weight:600;letter-spacing:-.02em}
.lp__life span{flex:none;font-family:var(--f-en);font-size:13px;font-weight:600;color:var(--brand)}
/* 2 지금 */
.lp__scenes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:64px}
.lp__scenes p{position:relative;padding:56px 32px 34px;border:1px solid #262626;border-radius:20px;background:#121212;font-size:clamp(17px,1.35vw,20px);line-height:1.8;color:#e9e9e9}
.lp__scenes p::before{content:"";position:absolute;left:28px;top:18px;width:28px;height:28px;background:url("data:image/svg+xml;utf8,") center/contain no-repeat} /* 따옴표 아이콘: 대표님의 고민(인용)이라는 표시 */
.lp--now .lp__close{position:relative;padding-top:28px}
.lp--now .lp__close::before{content:"";position:absolute;left:0;top:0;width:40px;height:3px;background:var(--brand)}
/* 3 대표의 착각: 어두운 배경에 세로로 쌓인 말풍선, 하나씩 등장 */
.lp__says{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:64px}
.lp__says li{display:flex;align-items:center;gap:12px;padding:18px 30px 18px 24px;border-radius:100px;background:#1f1f1f;font-size:clamp(16px,1.3vw,20px);font-weight:700;line-height:1.4;color:#f2f2f2;letter-spacing:-.01em}
.lp__says li::before{content:"";flex:none;width:18px;height:18px;opacity:.55;background:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.lp__says li:nth-child(2){transition-delay:.08s}.lp__says li:nth-child(3){transition-delay:.16s}.lp__says li:nth-child(4){transition-delay:.24s}
.lp__says li:nth-child(5){transition-delay:.32s}.lp__says li:nth-child(6){transition-delay:.4s}.lp__says li:nth-child(7){transition-delay:.48s}
/* 4 시도와 결과 */
.lp__tries{margin-top:64px;border-top:2px solid var(--black)}
.lp__tries li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:32px;align-items:baseline;padding:24px 0;border-bottom:1px solid #e3e3e3}
.lp__tries span{font-size:clamp(17px,1.35vw,20px);font-weight:700}
.lp__tries p{font-size:clamp(16px,1.25vw,18px);line-height:1.75;color:#666}
/* 5-2 곳곳으로 번진다 */
.lp--spread{padding-top:40px}
/* 5-2 번진다: 점 무늬 바탕 + 가운데 오렌지 빛, 번지는 액체 */
.lp--spread::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 34%,rgba(var(--brand-rgb),.2),transparent 42%),radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.3px) 0 0/22px 22px}
.spread__viz{position:relative;width:min(680px,100%);aspect-ratio:1;margin:24px auto 0}
.spread__viz svg{display:block;width:100%;height:100%;overflow:visible}
.sv__core,.sv__d,.sv__bump{fill:var(--brand)}
.sv__orbit{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1.5}
.sv__orbit--in{stroke-dasharray:3 7}
.sv__label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(14px,1.3vw,18px);font-weight:800;line-height:1.35;letter-spacing:-.02em;color:#fff;text-align:center;white-space:nowrap;pointer-events:none;text-shadow:0 1px 8px rgba(120,40,0,.35)}
.sv__label--core{font-size:clamp(18px,2vw,26px)}
.is-lp .spread__stage{height:100vh;display:flex;flex-direction:column;justify-content:center}
.is-lp .spread__viz{width:min(66vh,640px);margin-top:8px}
.lp__spread{display:grid;grid-template-columns:1fr 1fr;column-gap:120px;row-gap:90px;margin-top:100px;padding-left:8%}
.lp__spread li:nth-child(2){margin-top:120px}
.lp__spread b{display:block;margin-top:22px;font-size:22px;font-weight:700;color:var(--brand);letter-spacing:-.02em}
.lp__spread p{margin-top:14px;font-size:15px;line-height:1.85;color:var(--gray-txt)}
/* 6 반론 */
.lp__buts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:64px}
.lp__buts li{padding:36px 34px;border:1px solid #e3e3e3;border-radius:22px}
.lp__buts b{display:block;font-size:clamp(18px,1.5vw,22px);font-weight:800;line-height:1.45;letter-spacing:-.02em}
.lp__buts p{margin-top:16px;font-size:16px;line-height:1.85;color:#555}
.lp__buts em{font-style:normal;font-size:1.15em;font-weight:800;color:var(--brand)}
/* 7 해결 */
.lp--brand .lp__lead{display:inline-block;padding:14px 26px;border:1.5px solid rgba(255,255,255,.7);border-radius:100px;color:#fff;font-size:clamp(17px,1.5vw,22px)}
.lp--fix .lp__star:not(.lp__star--big){padding:34px 40px;border:0;border-radius:24px;background:#0b0b0b;color:#d6d6d6}
.lp--fix .lp__star:not(.lp__star--big) b{color:#fff}
.lp--fix .lp__star--big{border-left-color:#fff}
.fix__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:start}
.fix__head .lp__q{font-size:clamp(32px,3.3vw,52px)}
.fix__head{position:sticky;top:120px}
.fix__head .lp__star{margin-top:48px}
.lp__steps.fix__cards{display:flex;flex-direction:column;gap:0;margin-top:0}
.fix__cards li{padding:0;background:none;border-radius:0}
.fix__cards li.rv{transform:translateY(160px) rotate(-6deg);transition:opacity 1.1s var(--ease),transform 1.3s var(--ease)}
.fix__cards li.rv:nth-child(2){transform:translateY(160px) rotate(6deg);transition-delay:.12s}
.fix__cards li.rv:nth-child(3){transition-delay:.24s}
.fix__cards li.rv.in{transform:none}
.fix__card{position:relative;min-height:260px;display:flex;flex-direction:column;padding:34px 30px;border-radius:22px;background:#fff;color:var(--black);box-shadow:0 30px 60px -20px rgba(0,0,0,.25)}
/* 지그재그: 넓은 카드가 왼쪽 · 오른쪽 · 왼쪽으로 겹쳐 쌓임 */
.fix__cards li{width:82%}
.fix__cards li:nth-child(2){align-self:flex-end;margin-top:-36px}
.fix__cards li:nth-child(3){margin-top:-36px}
.fix__cards li:nth-child(2) .fix__card{z-index:1}
.fix__cards li b{font-size:19px}
.fix__card p{margin-top:auto;padding-top:22px}
.tilt:hover .glare{opacity:1}
.lp__text--wide{margin-top:100px}
.lp__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:72px}
.lp__steps li{padding:34px 30px;border-radius:22px;background:#fff;color:var(--black)}
.lp__steps span{font-family:var(--f-en);font-size:28px;font-weight:700;color:var(--brand)}
.lp__steps b{display:block;margin-top:18px;font-size:20px;font-weight:800;letter-spacing:-.02em}
.lp__steps p{margin-top:12px;font-size:15.5px;line-height:1.8;color:#555}
/* 8 진단 */
.lp__take{margin-top:56px;padding:36px 36px 32px;border-radius:22px;background:var(--gray-bg)}
.lp__take>b{font-size:15px;font-weight:700;color:var(--brand)}
.lp__take ul{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.lp__take li{padding:10px 20px;border-radius:100px;background:#fff;font-size:clamp(17px,1.4vw,21px);font-weight:800}
.lp__take p{margin-top:18px;font-size:15.5px;color:#555}
.lp__sample{display:flex;align-items:center;justify-content:center;margin-top:28px;aspect-ratio:16/10;border-radius:22px;background:linear-gradient(160deg,#eceff2,#d5dae0);background-size:cover;background-position:center}
/* 9 신청하지 마세요 */
.lp__nots{margin-top:64px;border-top:2px solid var(--black)}
.lp__nots li{position:relative;padding:30px 0 30px 52px;border-bottom:1px solid #dcdcdc}
.lp__nots li::before,.lp__nots li::after{content:"";position:absolute;left:6px;top:42px;width:22px;height:2.5px;background:var(--brand);transform:rotate(45deg)}
.lp__nots li::after{transform:rotate(-45deg)}
.lp__nots b{font-size:clamp(18px,1.5vw,22px);font-weight:800;letter-spacing:-.02em}
.lp__nots p{margin-top:10px;font-size:16px;line-height:1.85;color:#555}
/* 10 신청 */
.lp-apply .lp__star{margin-top:28px}
.lp-apply .apply__badge{margin-top:36px}
/* 열리는 O 안의 1번 머리말 */
.portal__in .lp__label{justify-content:center}
.portal__in .lp__q{margin-top:22px}
.pin-spacer + .lp.is-portal-intro{padding-top:0}
.lp.is-portal-intro .lp__life{margin-top:0}
.page-landing .hero__portal{padding-top:24vh} /* 1번 머리말을 조금 아래에 두어, O를 지난 뒤 이어지는 목록과의 빈 공간을 줄임 */
@media(max-width:1023px){
.lp{padding:110px 0 100px}
.lp--spread{padding-top:20px}
.lp__q{margin-top:18px}
.lp__scenes,.lp__buts,.lp__steps,.lp__steps.fix__cards{grid-template-columns:1fr;gap:14px}
.fix__grid{grid-template-columns:1fr;gap:40px}
.fix__head{position:static}
.fix__card{min-height:0;padding:26px 22px}
.fix__cards li.rv,.fix__cards li.rv:nth-child(2){transform:translateY(60px)}
.fix__cards li.rv.in{transform:none}
.fix__cards li{width:100%}
.fix__cards li:nth-child(2),.fix__cards li:nth-child(3){margin-top:14px}
.lp__text--wide{margin-top:56px}
.lp__scenes{margin-top:44px}
.lp__spread li,.lp__buts li,.lp__steps li{padding:26px 22px}
.lp__scenes p{padding:50px 22px 24px}
.lp__scenes p::before{left:20px;top:14px;width:24px;height:24px}
.lp__tries li{grid-template-columns:1fr;gap:6px}
.lp__life li{gap:16px;padding:20px 0}
.lp__nots li{padding-left:40px}
.lp__nots li::before,.lp__nots li::after{left:2px;width:18px}
.lp__star{margin-top:56px;padding-left:20px}
.lp__close{margin-top:52px}
.lp__take{padding:26px 22px}
.page-landing .hero__portal{padding-top:14vh}
.portal__in .lp__q{font-size:clamp(24px,7vw,34px)} /* 휴대폰: 열리는 O 안에 머리말이 다 들어가게 */
}
/* =========================================================
메인 코나아이식 연출 (landing.js)
========================================================= */
.lp{overflow:hidden}
.lp__in{position:relative;z-index:1}
/* 1 원했던 삶: 더 크게 */
.lp__life li{font-size:clamp(22px,2.3vw,34px);font-weight:700;letter-spacing:-.03em;padding:30px 0}
/* 3 대표의 착각: 흐르는 말 */
.lp__says.is-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* 4 시도와 결과 · 5-2 · 7: 큰 번호 */
.lp__tries{counter-reset:try}
.lp__tries li{grid-template-columns:72px minmax(0,.9fr) minmax(0,1.3fr)}
.lp__tries li::before{counter-increment:try;content:"0" counter(try);font-family:var(--f-en);font-size:30px;font-weight:700;color:var(--brand);line-height:1}
.lp__spread{counter-reset:sp}
.lp__spread li::before{counter-increment:sp;content:"0" counter(sp);display:block;font-family:var(--f-en);font-size:clamp(56px,5.4vw,80px);font-weight:700;line-height:1;letter-spacing:-.02em;color:#fff;transform:translateY(var(--ny,0px))}
.lp__steps span{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:var(--brand);color:#fff;font-size:22px}
/* 7 해결: 흐르는 핵심 문장 */
.lp--fix{position:relative}
/* 2 지금 (PC 고정): 흰 화면에서 검은 구체가 올라옴 */
.now__globe{display:none}
.is-lp .lp--now{height:100vh;padding:0;background:#fff;color:var(--black)}
.is-lp .lp--now .lp__label{color:var(--black)}
.is-lp .lp--now .lp__label::before{background:var(--black)}
.is-lp .now__globe{display:block;position:absolute;left:50%;top:105%;z-index:0;width:320vw;height:320vw;margin-left:-160vw;border-radius:50%;
background:radial-gradient(circle at 50% 0,#0b0b0b 0,#0b0b0b 6%);
box-shadow:0 -24px 90px 10px rgba(var(--brand-rgb),.55),0 -6px 30px rgba(var(--brand-rgb),.3),inset 0 26px 60px -24px rgba(var(--brand-rgb),.75)}
.is-lp .lp--now .lp__in{height:100%}
.is-lp .lp--now .lp__head{position:absolute;left:var(--gut);right:var(--gut);top:14vh}
.is-lp .lp--now .lp__scenes{display:block;margin:0}
.is-lp .lp--now .lp__scenes p{position:absolute;left:var(--gut);right:var(--gut);top:52%;max-width:880px;margin:0 auto;padding:64px 56px 52px;transform:translateY(-50%);border:1px solid #2a2a2a;border-radius:28px;background:#141414;opacity:0;font-size:clamp(24px,2.5vw,36px);font-weight:700;line-height:1.55;letter-spacing:-.03em;color:#fff;text-align:center}
.is-lp .lp--now .lp__scenes p::before{left:50%;top:-30px;transform:translateX(-50%);width:60px;height:60px;border-radius:50%;background:var(--brand) url("data:image/svg+xml;utf8,") center/28px no-repeat}
.is-lp .lp--now .lp__close{position:absolute;left:var(--gut);right:var(--gut);top:52%;transform:translateY(-50%);margin:0;padding-top:36px;opacity:0;text-align:center;font-size:clamp(26px,2.6vw,38px);color:#9a9a9a}
.is-lp .lp--now .lp__close::before{left:50%;margin-left:-20px}
.is-lp .lp--now .lp__head{transition:opacity .4s}
.is-lp .cause__count,.is-lp .now__count{position:absolute;left:var(--gut);bottom:9vh;font-family:var(--f-en);font-size:15px;letter-spacing:.1em;color:rgba(255,255,255,.55);opacity:0}
.is-lp .now__count b{font-size:28px;font-weight:700;color:#fff;margin-right:6px}
/* 5-1 원인 (PC 고정): 문장이 가운데에서 한 덩어리씩 */
.is-lp .lp--cause{height:100vh;padding:0}
.is-lp .lp--cause .lp__in{height:100%}
.is-lp .lp--cause .lp__head{position:absolute;left:var(--gut);right:var(--gut);top:14vh}
.is-lp .lp--cause .lp__in > :not(.lp__head):not(.cause__count){position:absolute;left:var(--gut);right:var(--gut);top:54%;transform:translateY(-50%);margin:0;opacity:0;text-align:center}
.is-lp .lp--cause .lp__text{font-size:clamp(24px,2.4vw,36px);font-weight:600;line-height:1.6;letter-spacing:-.03em;color:#e6e6e6}
.is-lp .lp--cause .lp__key{font-size:clamp(34px,4vw,60px)}
.is-lp .lp--cause .lp__star{padding:0;border:0;font-size:clamp(28px,3vw,46px);line-height:1.5}
.is-lp .lp--cause .lp__in > :not(.lp__head):not(.cause__count)::before{content:"";display:block;width:40px;height:3px;margin:0 auto 32px;background:var(--brand)}
.is-lp .lp--cause .lp__in > :not(.lp__head):not(.cause__count){padding:52px 48px 48px;border-radius:28px;background:#141414;border:1px solid #262626;max-width:920px;margin-left:auto;margin-right:auto}
.is-lp .lp--cause .lp__head{transition:opacity .4s}
@media(max-width:1023px){
.lp__life li{font-size:clamp(18px,5vw,22px);padding:20px 0}
.lp__says{gap:12px;margin-top:40px}
.lp__says li{padding:14px 20px 14px 18px;font-size:15px;line-height:1.5;border-radius:24px}
.lp__tries li{grid-template-columns:44px 1fr}
.lp__tries li p{grid-column:2}
.lp__tries li::before{font-size:22px}
.lp__spread{grid-template-columns:1fr;row-gap:48px;margin-top:56px;padding-left:0}
.lp__spread li:nth-child(2){margin-top:0}
.lp__spread li::before{font-size:48px}
.lp__spread b{margin-top:12px;font-size:19px}
}
/* 10 신청 (메인): ★ 문장 → 버튼 → 펼쳐지는 신청서 */
.lp-apply{padding:180px 0 160px}
.apply__stack{max-width:760px;text-align:center}
.apply__stack .lp__label{justify-content:center}
.apply__stack .lp__star{margin-top:28px;padding:0;border:0}
.apply__stack .lp__star::before{content:"";display:block;width:40px;height:3px;margin:0 auto 28px;background:var(--brand)}
.apply__cta{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:48px}
.apply__open{height:64px;padding:0 44px;font-size:18px}
.apply__cta .apply__badge{margin-top:0}
.apply__note{margin-top:-4px;font-size:14.5px;color:var(--gray-txt2)}
.apply__flow--row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:56px;border:0;text-align:center}
.apply__flow--row li{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;padding:30px 20px 28px;border:1px solid #e3e3e3;border-radius:20px;background:#fff;font-size:15px}
.apply__flow--row li b{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;background:rgba(var(--brand-rgb),.1);font-size:14px}
.apply__flow--row li strong{margin-top:16px;font-size:18px;font-weight:800;letter-spacing:-.02em}
.apply__flow--row li span{margin-top:10px;font-size:14px;line-height:1.75;color:var(--gray-txt2)}
.apply__flow--row li+li::before{content:"";position:absolute;left:-13px;top:52px;width:10px;height:10px;border-top:2px solid var(--brand);border-right:2px solid var(--brand);transform:rotate(45deg)}
.apply__box.is-open{margin-top:56px;text-align:left;animation:applyOpen .7s var(--ease)}
@keyframes applyOpen{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.apply__box>.apply__demo{margin-top:20px;text-align:center}
@media(max-width:1023px){
.lp-apply{padding:110px 0 100px}
.apply__cta{margin-top:36px}
.apply__open{width:100%;height:58px;font-size:16px}
.apply__flow--row{grid-template-columns:1fr;gap:12px;margin-top:32px;text-align:left}
.apply__flow--row li{display:grid;grid-template-columns:44px 1fr;column-gap:16px;align-items:start;padding:20px 18px}
.apply__flow--row li b{grid-row:span 2}
.apply__flow--row li strong{margin-top:2px;font-size:16px}
.apply__flow--row li span{margin-top:6px;font-size:13.5px}
.apply__flow--row li span br{display:none}
.apply__flow--row li+li::before{display:none}
.apply__box.is-open{margin-top:40px}
}
/* =========================================================
7 해결: 만들고 → 잇고 → 알린다 (landing.js)
기본(휴대폰 · 동작 줄이기): 세로 목록 / PC(.is-lp): 화면 고정 + 가로 트랙
========================================================= */
.fixflow{position:relative;margin-top:80px}
.fixflow__steps{position:relative;display:flex;flex-direction:column;gap:14px;padding-left:0}
.fixflow__steps li{position:relative;padding:26px 24px 26px 92px;border-radius:22px;background:#fff;color:var(--black)}
.fixflow__node{position:absolute;left:22px;top:24px;width:52px;height:52px;border-radius:50%;background:var(--brand);color:#fff;font-family:var(--f-en);font-size:17px;font-weight:700;cursor:pointer;transition:transform .4s var(--ease),background .3s,color .3s,box-shadow .3s}
.fixflow__steps b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em}
.fixflow__steps p{margin-top:10px;font-size:15px;line-height:1.8;color:#555}
.fixflow__bar{display:none}
.fix__from{background:linear-gradient(currentColor,currentColor) 0 58%/var(--strike,0%) 3px no-repeat;transition:color .3s}
.lp--fix .lp__star--big b{display:inline-block;transform-origin:left center}
@media(max-width:1023px){
.fixflow{margin-top:56px}
.fixflow__steps li{padding:22px 20px 22px 80px}
.fixflow__node{left:18px;top:20px;width:46px;height:46px;font-size:15px}
}
/* PC: 고정된 화면에서 가로 트랙 */
.is-lp .fixflow{height:100vh;margin-top:60px;display:flex;flex-direction:column;justify-content:center}
.is-lp .fixflow__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding-bottom:210px}
.is-lp .fixflow__steps li{position:static;padding:0 16px;background:none;text-align:center;color:#fff}
.is-lp .fixflow__node{position:relative;left:auto;top:auto;display:block;margin:0 auto;width:96px;height:96px;font-size:26px;background:#fff;color:var(--brand);box-shadow:0 0 0 10px rgba(255,255,255,.18);z-index:1}
.is-lp .fixflow__node:hover{transform:scale(1.06)}
.is-lp .fixflow__steps li:not(.is-on) .fixflow__node{background:transparent;color:rgba(255,255,255,.75);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.is-lp .fixflow__steps li.is-active .fixflow__node{transform:scale(1.12);background:#0b0b0b;color:#fff;box-shadow:0 0 0 12px rgba(0,0,0,.18),0 24px 40px -16px rgba(0,0,0,.5)}
.is-lp .fixflow__steps b{margin-top:26px;font-size:clamp(18px,1.6vw,24px);color:#fff;opacity:.55;transition:opacity .4s}
.is-lp .fixflow__steps li.is-on b{opacity:1}
/* 단계 설명: 트랙 아래 같은 자리에 겹쳐 두고, 지금 단계만 보임 */
.is-lp .fixflow__steps p{position:absolute;left:50%;bottom:0;width:min(720px,90%);margin:0;padding:34px 40px;transform:translate(-50%,24px);border-radius:24px;background:#fff;color:#333;font-size:clamp(16px,1.3vw,19px);line-height:1.8;text-align:center;opacity:0;visibility:hidden;transition:opacity .45s,transform .6s var(--ease),visibility 0s .45s}
.is-lp .fixflow__steps li.is-active p{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .45s,transform .6s var(--ease),visibility 0s}
.is-lp .fixflow__bar{display:block;position:absolute;left:calc(100% / 6);right:calc(100% / 6);top:calc(50% - 105px - 48px);height:3px;margin-top:-1.5px;background:rgba(255,255,255,.3);pointer-events:none}
.is-lp .fixflow__bar i{display:block;height:100%;width:var(--fill,0%);background:#fff}
/* =========================================================
메인 v5 (홈페이지_랜딩_메시지_v5)
히어로(어두운) → 원했던 삶(밝은) → 원인(어두운) → 해결(밝은) → 사례(어두운)
→ 진단(밝은) → 신청하지 마세요(어두운) → 셀프 진단(회색) → 신청(어두운) · 신청 팝업
========================================================= */
/* ---------- 0 히어로 ---------- */
.page-landing .hero__content{left:8vw}
.hero__tag{display:flex;align-items:center;gap:14px;margin-bottom:30px;font-size:clamp(15px,1.25vw,19px);font-weight:600;letter-spacing:-.01em;color:rgba(255,255,255,.74);animation:heroTag 1.2s var(--ease) .15s both}
.hero__tag::before{content:"";flex:none;width:34px;height:2px;background:var(--brand)}
@keyframes heroTag{from{opacity:0;transform:translateY(16px)}}
.is-loading .hero__tag{animation:none;opacity:0}
.page-landing .hero__txt{font-size:clamp(34px,4.2vw,70px);font-weight:300;line-height:1.2;letter-spacing:-.045em}
.page-landing .hero__txt b{font-weight:800}
.page-landing .hero__pager{display:none}
.page-landing .hero__cta{gap:12px}
.btn--ghost{border:1px solid rgba(255,255,255,.38);background:rgba(255,255,255,.05);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.12)}
.lp--dark .lp__q em,.lp--sol .lp__q em{color:var(--brand)}
.lp--why .lp__in,.lp--cases .lp__in,.lp--diag .lp__in,.lp--self .lp__in{max-width:var(--inner)}
/* ---------- 1 원했던 삶 → 지금 ---------- */
.dream{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:72px}
.lp.is-portal-intro .dream{margin-top:24px}
.dream li.rv{transform:translateY(70px);transition:opacity 1.1s var(--ease),transform 1.3s var(--ease)}
.dream li.rv.in{transform:none}
.dream__card{position:relative;height:100%;min-height:300px;display:flex;flex-direction:column;padding:34px 32px 36px;border:1px solid #f1e3d9;border-radius:26px;background:linear-gradient(165deg,#fff 35%,#fff3ea);box-shadow:0 34px 60px -38px rgba(var(--brand-rgb),.55);overflow:hidden;transition:transform .6s var(--ease),box-shadow .6s}
.dream__card::before{content:"";position:absolute;right:-22%;top:-34%;width:72%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(var(--brand-rgb),.24),transparent 65%);pointer-events:none;transition:transform .8s var(--ease)}
.dream__card:hover{transform:translateY(-6px);box-shadow:0 40px 70px -36px rgba(var(--brand-rgb),.7)}
.dream__card:hover::before{transform:scale(1.2)}
.dream__ic{position:relative;width:52px;height:52px;fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dream__ic>*{stroke-dasharray:170;stroke-dashoffset:170;transition:stroke-dashoffset 1.8s var(--ease) .5s}
.dream li.in .dream__ic>*{stroke-dashoffset:0}
.dream__no{position:relative;font-family:var(--f-en);font-size:15px;font-weight:600;color:var(--brand)}
.dream__card p{position:relative;margin-top:auto;padding-top:56px;font-size:clamp(22px,2vw,30px);font-weight:800;line-height:1.38;letter-spacing:-.045em;color:#111}
/* 그런데 지금은: 꿈 아래에 작고 차분하게 */
.now{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;margin-top:56px;padding-top:30px;border-top:1px solid #e6e6e6}
.now__t{display:flex;align-items:center;gap:10px;padding-top:11px;font-size:15px;font-weight:800;color:#8a8a8a}
.now__t::before{content:"";width:22px;height:1.5px;background:#b5b5b5}
.now__list li{display:flex;align-items:baseline;gap:18px;padding:10px 0;font-size:clamp(17px,1.4vw,20px);font-weight:600;letter-spacing:-.025em;color:#666}
.now__list span{flex:none;font-family:var(--f-en);font-size:11px;font-weight:600;color:#bdbdbd}
/* '더' 했던 것들: 하나씩 쌓이며 점점 진해짐 */
.more{margin-top:110px;font-size:clamp(20px,1.9vw,28px);font-weight:600;line-height:2.15;letter-spacing:-.03em;color:#333}
.more__c{display:inline-block;padding:2px 16px 4px;margin:0 2px;border-radius:100px;background:#f1f1f1;color:#111;font-weight:800;line-height:1.5;opacity:0;transform:translateY(16px) scale(.9);transition:opacity .6s ease,transform .8s var(--ease),background .4s}
.more__c:nth-child(2){background:#e4e4e4}
.more__c:nth-child(3){background:#d2d2d2}
.more__c:nth-child(4){background:var(--black);color:#fff}
.more.in .more__c{opacity:1;transform:none}
.more.in .more__c:nth-child(1){transition-delay:.3s}.more.in .more__c:nth-child(2){transition-delay:.48s}
.more.in .more__c:nth-child(3){transition-delay:.66s}.more.in .more__c:nth-child(4){transition-delay:.84s}
.more__end{margin-top:18px;font-size:clamp(25px,2.5vw,38px);line-height:1.4;letter-spacing:-.04em}
.more__end b{font-weight:800}
.lp--life .lp__star{margin-top:96px}
/* ---------- 2 원인: 악순환 고리 ---------- */
.why__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.why__steps{margin-top:48px}
.why__step+.why__step{margin-top:26px}
.why__step p{font-size:clamp(17px,1.35vw,20px);line-height:1.85;color:#bdbdbd}
.why__step .why__one{font-size:clamp(18px,1.5vw,22px);font-weight:600;color:#fff}
.why__step .lp__key{margin-top:12px;font-size:clamp(26px,2.5vw,38px);line-height:1.4;color:#fff}
.why__step .lp__key b{font-weight:800}
.cycle{position:relative}
.cy{position:relative;width:min(100%,540px);aspect-ratio:640/740;margin:0 auto}
.cy svg{display:block;width:100%;height:100%;overflow:visible}
.cy__track{fill:none;stroke:rgba(255,255,255,.06);stroke-width:14;transition:stroke .8s}
.cycle.is-closed .cy__track{stroke:rgba(var(--brand-rgb),.09)}
.cy__tail{fill:var(--brand);opacity:0;pointer-events:none}
.cycle:not(.is-loop) .cy__tail{visibility:hidden}
.cy__link{fill:none;stroke:rgba(255,255,255,.18);stroke-width:2;stroke-dasharray:3 7;stroke-linecap:round;transition:stroke .5s,stroke-width .5s}
.cy__links g.is-on .cy__link{stroke:var(--brand);stroke-width:3;stroke-dasharray:none}
.cy__chev{fill:none;stroke:rgba(255,255,255,.3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .5s}
.cy__links g.is-on .cy__chev{stroke:var(--brand)}
/* 고리가 닫히는 마지막 호: 닫히는 순간 더 밝게 */
.cy__links g.is-close.is-on .cy__link{stroke:#ffb487;filter:drop-shadow(0 0 6px rgba(var(--brand-rgb),.9))}
.cy__dot{fill:#fff;opacity:0;transition:opacity .6s}
.cy__glow{fill:rgba(var(--brand-rgb),.6);filter:blur(7px);opacity:0;transition:opacity .6s}
.cycle.is-loop .cy__dot,.cycle.is-loop .cy__glow{opacity:1}
/* 칸: 고리 위의 점 + 바깥쪽 이름 (landing.js 가 점 · 이름 · 방향을 붙임) */
.cy__n{position:absolute;z-index:1;width:0;height:0}
.cy__n i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border:2px solid #3a3a3a;border-radius:50%;background:#0b0b0b;transition:background .45s,border-color .45s,box-shadow .45s,transform .6s var(--ease)}
.cy__n span{position:absolute;top:0;font-size:clamp(13px,1.05vw,16px);font-weight:700;letter-spacing:-.03em;line-height:1.3;color:#5d5d5d;white-space:nowrap;transition:color .45s}
.cy__n--r span{left:18px;transform:translateY(-50%)}
.cy__n--l span{right:18px;transform:translateY(-50%)}
.cy__n--b span{top:16px;left:0;transform:translateX(-50%)}
.cy__n--t span{top:auto;bottom:16px;left:0;transform:translateX(-50%)}
.cy__n.is-on i{border-color:var(--brand);background:#1c0f06}
.cy__n.is-on span{color:#e9e9e9}
.cy__n.is-cur i{border-color:var(--brand);background:var(--brand);transform:scale(1.25);box-shadow:0 0 0 6px rgba(var(--brand-rgb),.18),0 0 24px 4px rgba(var(--brand-rgb),.55)}
.cy__n.is-cur span{color:var(--brand)}
.cy__n--e span{font-size:clamp(12px,.95vw,14px);font-weight:600}
.cy__n--e i{left:-5px;top:-5px;width:10px;height:10px}
/* 가운데: 돈도 시간도 / 남지 않는다 — 고리가 닫히면 은은하게 빛남 */
.cy__core{position:absolute;left:50%;top:65.7%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}
.cy__core::before{content:"";position:absolute;left:50%;top:50%;z-index:-1;width:260%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(var(--brand-rgb),.22),transparent 62%);opacity:0;transition:opacity 1s}
.cycle.is-closed .cy__core::before{opacity:1}
.cy__core small{display:block;font-size:clamp(13px,1vw,15px);font-weight:600;color:#777}
.cy__core b{display:block;margin-top:4px;font-size:clamp(28px,2.8vw,44px);font-weight:800;line-height:1.1;letter-spacing:-.05em;white-space:nowrap;color:#2b2b2b;transition:color .8s,text-shadow .8s}
.cycle.is-closed .cy__core b{color:#6a6a6a}
.cycle.is-full .cy__core b{color:var(--brand);text-shadow:0 0 44px rgba(var(--brand-rgb),.55)}
/* 다시: 고리가 닫히는 호 바깥에 작은 글자 */
.cy__again{position:absolute;z-index:1;display:flex;align-items:center;gap:5px;transform:translate(-50%,-50%) scale(.7);font-size:clamp(12px,.95vw,14px);font-weight:800;color:#ffb487;white-space:nowrap;opacity:0;transition:opacity .4s,transform .6s cubic-bezier(.34,1.56,.64,1)}
.cy__again::before{content:"";width:1em;height:1em;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.cycle.is-closed .cy__again{opacity:1;transform:translate(-50%,-50%)}
/* 바깥에서 밀려 들어오는 시도: 화살표가 고리를 가리킴 */
.cy__in{position:absolute;z-index:1;display:flex;align-items:center;gap:8px;font-size:clamp(12px,.95vw,14px);font-weight:700;color:#bdbdbd;white-space:nowrap;opacity:0;transition:opacity .6s,translate .8s var(--ease)}
.cy__in::after{content:"";width:28px;height:1.5px;background:linear-gradient(90deg,rgba(var(--brand-rgb),.2),var(--brand))}
.cy__in--a{transform:translate(-100%,-50%);translate:-14px 0}
.cy__in--b{flex-direction:row-reverse;transform:translateY(-50%);translate:14px 0}
.cy__in--b::after{background:linear-gradient(270deg,rgba(var(--brand-rgb),.2),var(--brand))}
.cycle.is-full .cy__in{opacity:1;translate:0 0}
/* PC(가로 길): 위 · 아래에서 고리를 가리킴 */
.cycle.is-wide .cy__in{flex-direction:column;gap:6px;transform:translate(-50%,-100%);translate:0 -12px}
.cycle.is-wide .cy__in::after{width:1.5px;height:22px;background:linear-gradient(180deg,rgba(var(--brand-rgb),.2),var(--brand))}
.cycle.is-wide .cy__in--b{flex-direction:column-reverse;transform:translate(-50%,0);translate:0 12px}
.cycle.is-wide .cy__in--b::after{background:linear-gradient(0deg,rgba(var(--brand-rgb),.2),var(--brand))}
.cycle.is-wide.is-full .cy__in{translate:0 0}
.why__after{padding-top:110px}
.why__sign{font-size:clamp(20px,1.9vw,28px);line-height:1.6;letter-spacing:-.03em;color:#9a9a9a}
.why__sign b{display:block;margin-top:6px;font-weight:800;color:#fff}
.lp--why .lp__star--big{margin-top:90px}
/* PC: 화면에 고정된 채 문장이 한 덩어리씩 */
.is-lp .why__stage{height:100vh;display:flex;align-items:center}
.is-lp .why__grid{width:100%}
.is-lp .why__steps{position:relative;height:clamp(230px,30vh,300px);margin-top:56px}
.is-lp .why__step{position:absolute;left:0;right:0;top:0;margin:0;opacity:0;visibility:hidden;transform:translateY(34px);transition:opacity .5s ease,transform .8s var(--ease),visibility 0s .5s}
.is-lp .why__step.is-past{transform:translateY(-34px)}
.is-lp .why__step.is-cur{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease .1s,transform .9s var(--ease) .1s,visibility 0s}
.is-lp .why__step p{font-size:clamp(21px,1.8vw,28px);font-weight:600;line-height:1.65;letter-spacing:-.03em;color:#ececec}
.is-lp .why__step .lp__key{font-size:clamp(30px,2.9vw,46px)}
/* PC: 머리말은 왼쪽 위, 그 아래로 들어가는 길 → 오른쪽 큰 고리. 문장은 고리 한가운데 (landing.js 가 옮김) */
.is-lp .why__grid{display:block;position:relative;width:100%}
.is-lp .why__txt{position:absolute;left:var(--gut);top:0;z-index:2}
.is-lp .cy{width:min(100%,126vh)} /* 고리 위아래 꼬리표까지 한 화면에 */
.is-lp .cycle.is-wide .cy__core{opacity:0;transform:translate(-50%,-40%) scale(.9);transition:opacity .7s ease,transform 1s var(--ease)}
.is-lp .cycle.is-wide.is-core .cy__core{opacity:1;transform:translate(-50%,-50%)}
.is-lp .cycle.is-wide .cy__core small{font-size:clamp(15px,1.2vw,18px)}
.is-lp .cycle.is-wide .cy__core b{font-size:clamp(56px,6vw,96px)}
.is-lp .cy .why__steps{position:absolute;left:67.6%;top:51%;z-index:2;display:grid;width:36%;height:auto;margin:0;transform:translate(-50%,-50%);text-align:center}
.is-lp .cy .why__step{position:relative;left:auto;right:auto;top:auto;grid-area:1/1;align-self:center}
.is-lp .cy .why__step p{font-size:clamp(17px,1.45vw,22px);line-height:1.62}
.is-lp .cy .why__step .why__one{font-size:clamp(14px,1.05vw,16px);font-weight:600;color:#9a9a9a}
.is-lp .cy .why__step .lp__key{margin-top:10px;font-size:clamp(22px,2vw,31px);line-height:1.38}
.is-lp .cy .why__step br{display:none}
/* ---------- 3 해결 ---------- */
.lp--sol .lp__lead{max-width:860px}
.sol__vs{max-width:860px}
.q-off{background:linear-gradient(currentColor,currentColor) 0 58%/0% 2px no-repeat;transition:background-size .7s var(--ease) .6s,color .5s .6s}
.q-on{padding:0 2px;background:linear-gradient(rgba(var(--brand-rgb),.22),rgba(var(--brand-rgb),.22)) 0 90%/0% 42% no-repeat;font-weight:800;color:#111;transition:background-size .8s var(--ease) 1.25s}
.sol__vs.in .q-off{background-size:100% 2px;color:#a8a8a8}
.sol__vs.in .q-on{background-size:100% 42%}
.keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:84px}
.keys li.rv{transform:translateY(130px) rotate(-5deg);transition:opacity 1.1s var(--ease),transform 1.3s var(--ease)}
.keys li.rv:nth-child(2){transform:translateY(170px)}
.keys li.rv:nth-child(3){transform:translateY(130px) rotate(5deg)}
.keys li.rv.in{transform:none}
.key{position:relative;height:100%;min-height:380px;display:flex;flex-direction:column;padding:34px 34px 38px;border-radius:26px;background:#0b0b0b;color:#fff;overflow:hidden}
.key::before{content:"";position:absolute;right:-35%;top:-35%;width:85%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(var(--brand-rgb),.4),transparent 65%);opacity:.55;transition:opacity .5s,transform .8s var(--ease);pointer-events:none}
.key:hover::before{opacity:1;transform:scale(1.15)}
.key__top{position:relative;display:flex;justify-content:space-between;align-items:flex-start}
.key__no{font-family:var(--f-en);font-size:14px;font-weight:600;color:rgba(255,255,255,.45)}
.key__ic,.takes__ic{fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.key__ic{width:54px;height:54px}
.key__ic .fill{fill:var(--brand)}
.key__ic>*,.takes__ic>*{stroke-dasharray:170;stroke-dashoffset:170;transition:stroke-dashoffset 1.8s var(--ease) .55s}
.in .key__ic>*,.takes.in .takes__ic>*{stroke-dashoffset:0}
.key h3{position:relative;margin-top:auto;padding-top:64px;font-size:clamp(30px,2.7vw,40px);font-weight:800;letter-spacing:-.045em}
.key b{position:relative;display:block;margin-top:14px;font-size:clamp(17px,1.35vw,19px);font-weight:800;color:var(--brand);letter-spacing:-.02em}
.key p{position:relative;margin-top:12px;font-size:15.5px;line-height:1.8;color:#a9a9a9}
/* 순서 막대 */
.order{margin-top:130px}
.order .order__lead{margin-top:0;font-size:clamp(18px,1.5vw,22px);font-weight:600;color:#222}
.order__box{margin-top:32px;padding:48px 44px 42px;border-radius:28px;background:var(--gray-bg)}
.order__track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px}
.order__track li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 8px 20px;border:1.5px solid #dedede;border-radius:18px;background:#fff;font-size:clamp(15px,1.35vw,20px);font-weight:800;letter-spacing:-.03em;color:#9d9d9d;transition:background .5s,color .5s,border-color .5s,box-shadow .5s}
.order__track li span{font-family:var(--f-en);font-size:11px;font-weight:600;letter-spacing:.06em;color:#bdbdbd;transition:color .5s}
.order__track li+li::before{content:"";position:absolute;left:-12px;top:50%;width:8px;height:8px;border-top:2px solid #c4c4c4;border-right:2px solid #c4c4c4;transform:translate(-50%,-50%) rotate(45deg);opacity:0;transition:opacity .4s}
.order__box.is-sorted li{border-color:var(--black);color:var(--black)}
.order__box.is-sorted li:nth-child(-n+3){border-color:var(--brand);background:var(--brand);color:#fff;box-shadow:0 16px 30px -16px rgba(var(--brand-rgb),.8)}
.order__box.is-sorted li:nth-child(-n+3) span{color:rgba(255,255,255,.7)}
.order__box.is-sorted li+li::before{opacity:1}
.order__box.is-sorted li:nth-child(2){transition-delay:.06s}.order__box.is-sorted li:nth-child(3){transition-delay:.12s}
.order__box.is-sorted li:nth-child(4){transition-delay:.18s}.order__box.is-sorted li:nth-child(5){transition-delay:.24s}
.order__caps{display:grid;margin-top:32px;text-align:center}
.order__cap{grid-area:1/1;font-size:clamp(16px,1.35vw,20px);font-weight:600;line-height:1.75;color:#666;transition:opacity .5s,transform .7s var(--ease)}
.order__cap--ok{font-weight:800;color:var(--black);opacity:0;transform:translateY(14px)}
.order__box.is-sorted .order__cap--rev{opacity:0;transform:translateY(-14px)}
.order__box.is-sorted .order__cap--ok{opacity:1;transform:none}
.sol__end{margin-top:76px;font-size:clamp(26px,2.9vw,44px);line-height:1.4;letter-spacing:-.04em}
.sol__end em{color:var(--brand)}
/* ---------- 4 사례 ---------- */
.lp--cases{padding:0}
.cases__pin{padding:150px 0 130px}
.cases__bar{width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.cases__nav{display:flex;align-items:center;gap:22px;flex:none}
.cases__count{font-family:var(--f-en);font-size:14px;letter-spacing:.08em;color:rgba(255,255,255,.45)}
.cases__count b{margin-right:4px;font-size:26px;font-weight:700;color:#fff}
.cases__prog{display:block;width:150px;height:2px;background:rgba(255,255,255,.14)}
.cases__prog i{display:block;height:100%;background:var(--brand);transform-origin:left;transform:scaleX(.25);transition:transform .25s}
.cases__btns{display:flex;gap:8px}
.cases__btn{position:relative;width:52px;height:52px;border:1px solid rgba(255,255,255,.25);border-radius:50%;transition:border-color .3s,background .3s,opacity .3s}
.cases__btn::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;border-top:2px solid #fff;border-right:2px solid #fff;transform:translate(-65%,-50%) rotate(45deg)}
.cases__btn--prev::before{transform:translate(-35%,-50%) rotate(-135deg)}
.cases__btn:hover{border-color:var(--brand);background:var(--brand)}
.cases__btn:disabled{opacity:.3;pointer-events:none}
.cases__view{margin-top:56px;padding:0 max(var(--gut),calc((100vw - var(--inner)) / 2 + var(--gut)))}
.cases__track{display:flex;gap:24px}
.case{flex:none;width:min(560px,80vw)}
.case__in{position:relative;height:100%;display:flex;flex-direction:column;padding:40px 40px 0;border:1px solid #262626;border-radius:28px;background:#141414;overflow:hidden;transition:border-color .5s,background .5s}
.case.is-cur .case__in{border-color:rgba(var(--brand-rgb),.55);background:#17120f}
.case__no{font-family:var(--f-en);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--brand)}
.case h3{margin-top:14px;font-size:clamp(28px,2.4vw,36px);font-weight:800;letter-spacing:-.045em}
.case__keys{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.case__keys li{padding:6px 12px;border:1px solid #333;border-radius:100px;font-size:12.5px;font-weight:700;color:#5d5d5d}
.case__keys li.on{border-color:rgba(var(--brand-rgb),.55);background:rgba(var(--brand-rgb),.1);color:#ffb487}
.case__body{flex:1;display:grid;align-content:start;gap:22px;margin-top:30px}
.case__body>div{padding-left:18px;border-left:2px solid #2f2f2f}
.case__body>div+div{border-left-color:var(--brand)}
.case__body dt{font-family:var(--f-en);font-size:11px;font-weight:600;letter-spacing:.14em;color:#6b6b6b}
.case__body dd{margin-top:8px;font-size:15.5px;line-height:1.8;color:#a9a9a9}
.case__body>div+div dd{color:#f0f0f0}
.case__res{margin:32px -40px 0;padding:24px 40px 30px;background:var(--brand);color:#fff}
.case__res span{display:block;font-family:var(--f-en);font-size:11px;font-weight:600;letter-spacing:.14em;opacity:.72}
.case__res b{display:block;margin-top:8px;font-size:clamp(19px,1.6vw,23px);font-weight:800;line-height:1.45;letter-spacing:-.03em}
.case__res i{font-style:normal;font-weight:500;opacity:.75}
.cases__hint{display:none}
.is-lp .lp--cases .cases__pin{height:100vh;padding:0;display:flex;flex-direction:column;justify-content:center}
.is-lp .cases__view{overflow:visible}
/* PC 고정 화면 안에 머리말과 카드가 다 들어가게 */
.is-lp .lp--cases .lp__q{margin-top:18px;font-size:clamp(30px,3vw,46px)}
.is-lp .cases__view{margin-top:clamp(28px,4vh,48px)}
.is-lp .case__in{padding-top:32px}
.is-lp .case__body{gap:16px;margin-top:22px}
.is-lp .case__body dd{font-size:15px;line-height:1.72}
.is-lp .case__res{margin-top:26px;padding:20px 40px 24px}
/* ---------- 5 진단 ---------- */
.diag__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:80px;align-items:start}
.diag__copy .lp__text{margin-top:40px;color:#222;font-weight:600}
.diag__checks{display:grid;gap:10px;margin-top:22px}
.diag__checks li{position:relative;padding:16px 20px 16px 54px;border-radius:14px;background:var(--gray-bg);font-size:clamp(15.5px,1.2vw,17px);font-weight:700;letter-spacing:-.02em}
.diag__checks li::before{content:"";position:absolute;left:18px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--brand) url("data:image/svg+xml;utf8,") center/13px no-repeat}
.diag__take{padding-top:14px}
.diag__take-t{font-size:clamp(20px,1.7vw,25px);font-weight:800;letter-spacing:-.035em}
.takes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.takes.rv{opacity:1;transform:none}
.takes li{position:relative;min-height:260px;display:flex;flex-direction:column;padding:26px 22px;border:1px solid #e6e6e6;border-radius:20px;background:#fff;box-shadow:0 26px 50px -30px rgba(0,0,0,.28);opacity:0;transition:transform 1.1s var(--ease),opacity .7s ease,border-color .4s,box-shadow .4s}
/* 겹쳐 있던 세 장이 펼쳐짐 */
.takes li:nth-child(1){transform:translateX(calc(100% + 14px)) rotate(-6deg)}
.takes li:nth-child(2){z-index:1;transform:translateY(16px)}
.takes li:nth-child(3){transform:translateX(calc(-100% - 14px)) rotate(6deg)}
.takes.in li{opacity:1;transform:none}
.takes.in li:nth-child(1),.takes.in li:nth-child(3){transition-delay:.25s}
.takes.in li:hover{border-color:var(--brand);transform:translateY(-6px);box-shadow:0 30px 50px -26px rgba(var(--brand-rgb),.45);transition-delay:0s}
.takes__no{font-family:var(--f-en);font-size:12px;font-weight:600;color:#ababab}
.takes__ic{width:48px;height:48px;margin-top:22px}
.takes b{margin-top:auto;padding-top:26px;font-size:21px;font-weight:800;letter-spacing:-.035em}
.takes p{margin-top:8px;font-size:14.5px;line-height:1.7;color:#666}
.diag__note{display:flex;align-items:center;gap:14px;width:fit-content;margin-top:76px;padding:18px 28px 18px 24px;border:1px solid #e1e1e1;border-radius:100px;font-size:clamp(15px,1.2vw,17px);font-weight:700;letter-spacing:-.02em}
.diag__note span{flex:none;width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 0 rgba(var(--brand-rgb),.5);animation:ping 2.2s ease-out infinite}
@keyframes ping{70%,100%{box-shadow:0 0 0 10px rgba(var(--brand-rgb),0)}}
/* ---------- 6 신청하지 마세요 ---------- */
.nots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:64px}
.nots li{position:relative;padding:36px 36px 34px;border:1px solid #242424;border-radius:24px;background:#131313;transition:border-color .4s,background .4s}
.nots li:hover{border-color:rgba(var(--brand-rgb),.5);background:#17110d}
.nots__x{position:absolute;right:30px;top:30px;width:38px;height:38px;border:1.5px solid rgba(var(--brand-rgb),.5);border-radius:50%;transition:transform .6s var(--ease),background .4s,border-color .4s}
.nots__x::before,.nots__x::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;border-radius:2px;background:var(--brand);transform:rotate(45deg) scaleX(0);transition:transform .5s var(--ease) .55s,background .4s}
.nots__x::after{transform:rotate(-45deg) scaleX(0);transition-delay:.7s}
.nots li.in .nots__x::before{transform:rotate(45deg)}
.nots li.in .nots__x::after{transform:rotate(-45deg)}
.nots li:hover .nots__x{transform:rotate(90deg);border-color:var(--brand);background:var(--brand)}
.nots li:hover .nots__x::before,.nots li:hover .nots__x::after{background:#fff;transition-delay:0s}
.nots__no{font-family:var(--f-en);font-size:12px;font-weight:600;color:#5b5b5b}
.nots b{display:block;margin-top:18px;padding-right:48px;font-size:clamp(19px,1.6vw,23px);font-weight:800;line-height:1.45;letter-spacing:-.035em}
.nots p{margin-top:12px;font-size:15.5px;line-height:1.8;color:#9c9c9c}
/* ---------- 7 셀프 진단 테스트 ---------- */
.lp--self{background:var(--gray-bg)}
.self__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:center}
.self__btn{margin-top:44px;height:58px;padding:0 34px;font-size:16px}
.self__grid:has(.q9.is-done) .self__btn{animation:nudgeBtn 1.6s var(--ease) infinite}
@keyframes nudgeBtn{0%,100%{box-shadow:0 0 0 0 rgba(var(--brand-rgb),.5)}60%{box-shadow:0 0 0 14px rgba(var(--brand-rgb),0)}}
.q9{position:relative;padding:34px 32px 28px;border-radius:28px;background:#fff;box-shadow:0 40px 80px -40px rgba(0,0,0,.28)}
.q9__top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.q9__t{font-size:17px;font-weight:800;letter-spacing:-.02em}
.q9__t small{margin-left:8px;padding:4px 10px;border-radius:100px;background:rgba(var(--brand-rgb),.1);font-size:12px;font-weight:700;color:var(--brand)}
.q9__n{font-family:var(--f-en);font-size:13px;color:#a0a0a0}
.q9__n b{font-size:18px;color:#111}
.q9__bar{display:block;height:4px;margin-top:18px;border-radius:4px;background:#f0f0f0;overflow:hidden}
.q9__bar i{display:block;height:100%;background:var(--brand);transform-origin:left;transform:scaleX(var(--q,0));transition:transform .6s var(--ease)}
.q9__list{margin-top:6px}
.q9__list li{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 0;border-bottom:1px solid #f0f0f0}
.q9__list li p{font-size:15.5px;font-weight:700;line-height:1.5;letter-spacing:-.02em;transition:color .3s}
.q9__list li.is-answered p{color:#9a9a9a}
.yn{display:flex;flex:none;gap:6px}
.yn button{min-width:58px;height:38px;padding:0 14px;border:1.5px solid #e1e1e1;border-radius:100px;font-size:14px;font-weight:700;color:#555;transition:background .25s,border-color .25s,color .25s,transform .25s}
.yn button:hover{border-color:#111;color:#111}
.yn button[aria-pressed="true"]{border-color:#111;background:#111;color:#fff}
.yn button:last-child[aria-pressed="true"]{border-color:var(--brand);background:var(--brand)}
.yn button:active{transform:scale(.94)}
.q9__ghost{filter:blur(1.5px);opacity:.75;user-select:none}
.q9__ghost+.q9__ghost{opacity:.4}
.q9__ghost i{display:block;flex:1;height:12px;border-radius:6px;background:#ececec}
.q9__ghost i:last-child{flex:none;width:122px;height:38px;border-radius:100px}
.q9__list li.q9__ghost{border-bottom:0}
.q9__more{margin-top:12px;font-size:13.5px;font-weight:600;color:#a0a0a0;text-align:center;transition:color .3s}
.q9.is-done .q9__more{color:var(--brand)}
/* ---------- 8 신청 ---------- */
.lp--final{padding:230px 0;text-align:center}
.final__ring{--rw:min(96vh,94vw);position:absolute;left:50%;top:50%;width:var(--rw);height:var(--rw);margin:calc(var(--rw) / -2) 0 0 calc(var(--rw) / -2);transform-origin:center;pointer-events:none} /* 가운데: 여백으로 맞춤 (GSAP 크기 연출과 겹치지 않게) */
.final__ring::before{content:"";position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,rgba(var(--brand-rgb),.16),transparent 62%)}
.final__ring i,.final__ring::after{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(var(--brand-rgb),0),rgba(var(--brand-rgb),.95) 22%,rgba(255,226,200,.95) 30%,rgba(var(--brand-rgb),.3) 46%,rgba(var(--brand-rgb),0) 64%,rgba(var(--brand-rgb),.7) 86%,rgba(var(--brand-rgb),0));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));animation:spin 16s linear infinite}
.final__ring::after{content:"";filter:blur(14px);opacity:.8}
.final__in{position:relative;max-width:900px}
.final__star{font-size:clamp(30px,3.8vw,58px);font-weight:400;line-height:1.38;letter-spacing:-.045em;color:#cfcfcf}
.final__star b{font-weight:800;color:#fff}
.final__btn{margin-top:56px;height:66px;padding:0 46px;font-size:18px;box-shadow:0 20px 50px -18px rgba(var(--brand-rgb),.8)}
/* ---------- 신청 팝업 ---------- */
.modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:24px}
.modal__dim{position:absolute;inset:0;background:rgba(6,6,6,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .45s}
.modal__panel{position:relative;width:min(560px,100%);max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow-y:auto;overscroll-behavior:contain;padding:52px 48px 36px;border-radius:28px;background:#fff;box-shadow:0 40px 100px -30px rgba(0,0,0,.55);opacity:0;transform:translateY(40px) scale(.97);transition:opacity .4s ease,transform .6s var(--ease)}
.modal.is-open .modal__dim{opacity:1}
.modal.is-open .modal__panel{opacity:1;transform:none}
.modal__x{position:absolute;right:20px;top:20px;width:44px;height:44px;border-radius:50%;background:var(--gray-bg);transition:background .25s,transform .4s var(--ease)}
.modal__x::before,.modal__x::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;margin:-1px 0 0 -8px;background:#222;transform:rotate(45deg)}
.modal__x::after{transform:rotate(-45deg)}
.modal__x:hover{background:#e6e6e6;transform:rotate(90deg)}
.modal__head h2{margin-top:16px;font-size:clamp(26px,2.4vw,32px);font-weight:800;letter-spacing:-.045em}
.modal__head p:last-child{margin-top:10px;font-size:15px;line-height:1.6;color:var(--gray-txt2)}
.modal .apply__form{margin-top:36px}
.modal .field{margin-bottom:28px}
.field .help{display:block;margin-top:8px;font-size:12.5px;color:var(--gray-txt)}
.field.is-err .help{display:none}
.agree__row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.agree__row .agree{margin:0}
.agree__more{flex:none;padding:4px 0;font-size:13px;font-weight:700;color:var(--gray-txt2);text-decoration:underline;text-underline-offset:3px}
.agree__detail{margin-top:14px;padding:18px 20px;border-radius:14px;background:var(--gray-bg);font-size:13px;line-height:1.7;color:#555}
.agree__detail dl{display:grid;gap:6px}
.agree__detail dl div{display:grid;grid-template-columns:76px 1fr;gap:10px}
.agree__detail dt{font-weight:700;color:#222}
.agree__detail p{margin-top:10px;color:#777}
.modal .apply__done{padding:28px 0 8px}
.apply__close{margin-top:28px}
.modal .apply__demo{margin-top:22px;text-align:center}
.modal-open .m-cta{transform:translateY(140%)!important}
/* 안내 (곧 열립니다) */
.toast{position:fixed;left:50%;bottom:40px;z-index:3000;padding:14px 24px;border-radius:100px;background:#111;color:#fff;font-size:14.5px;font-weight:600;white-space:nowrap;opacity:0;transform:translate(-50%,20px);pointer-events:none;transition:opacity .35s,transform .5s var(--ease)}
.toast.is-show{opacity:1;transform:translate(-50%,0)}
.m-cta{border:0;font-family:inherit}
/* ---------- 휴대폰 ---------- */
@media(max-width:1023px){
.page-landing .hero__content{left:var(--gut)}
.hero__tag{gap:10px;margin-bottom:22px;font-size:14px}
.hero__tag::before{width:22px}
.page-landing .hero__txt{font-size:clamp(26px,7.4vw,44px)}
.page-landing .hero__cta .btn{height:52px;padding:0 24px;font-size:15px}
.dream{grid-template-columns:1fr;gap:12px;margin-top:48px}
.dream li.rv{transform:translateY(40px)}
.dream__card{min-height:0;padding:26px 24px 28px;border-radius:22px}
.dream__ic{width:42px;height:42px}
.dream__card p{padding-top:26px;font-size:21px}
.now{grid-template-columns:1fr;gap:6px;margin-top:40px;padding-top:24px}
.now__t{padding-top:0}
.now__list li{font-size:16px;padding:8px 0}
.more{margin-top:72px;line-height:2.2}
.more__c{padding:1px 12px 3px}
.lp--life .lp__star{margin-top:64px}
.why__grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
.why__txt{display:contents}
.why__grid .lp__head{order:1}
.cycle{order:2;position:sticky;top:0;z-index:2;margin:28px calc(var(--gut) * -1) 0;padding:calc(var(--header-h) + 8px) var(--gut) 6px;background:#0b0b0b} /* 위 여백: 상단 바에 가리지 않게 */
.cycle::after{content:"";position:absolute;left:0;right:0;top:100%;height:48px;background:linear-gradient(#0b0b0b,rgba(11,11,11,0));pointer-events:none}
.cy{width:min(64vw,256px)}
.cy__n span,.cy__n--e span{font-size:10.5px}
.cy__n--r span{left:12px}.cy__n--l span{right:12px}.cy__n--b span{top:11px}
.cy__n i{left:-5px;top:-5px;width:10px;height:10px;border-width:1.5px}
.cy__n--e i{left:-4px;top:-4px;width:8px;height:8px}
.cy__again{font-size:10.5px}
.cy__core small{font-size:11px}
.cy__core b{font-size:20px}
.cy__in{font-size:10px;gap:4px}
.cy__in::after{width:12px}
.why__steps{order:3;margin-top:24px}
.why__step+.why__step{margin-top:34vh}
.why__step:last-child{margin-bottom:12vh}
.why__after{padding-top:40px}
.lp--why .lp__star--big{margin-top:64px}
.keys{grid-template-columns:1fr;gap:14px;margin-top:52px}
.keys li.rv,.keys li.rv:nth-child(2),.keys li.rv:nth-child(3){transform:translateY(60px)}
.key{min-height:0;padding:28px 24px 30px}
.key h3{padding-top:36px}
.order{margin-top:90px}
.order__box{padding:26px 18px 24px;border-radius:22px}
.order__track{grid-template-columns:1fr;gap:10px}
.order__track li{flex-direction:row;justify-content:flex-start;gap:14px;padding:14px 18px}
.order__track li+li::before{display:none}
.order__cap{font-size:15.5px}
.order__cap br{display:none}
.sol__end{margin-top:56px}
.cases__pin{padding:110px 0 100px}
.cases__bar{flex-direction:column;align-items:flex-start}
.cases__nav{width:100%;justify-content:space-between}
.cases__prog{flex:1;width:auto}
.cases__btn{width:44px;height:44px}
.cases__view{margin-top:36px;padding:0 var(--gut);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cases__view::-webkit-scrollbar{display:none}
.cases__track{gap:12px;width:max-content;padding-right:var(--gut)}
.case{width:84vw;scroll-snap-align:center}
.case__in{padding:28px 24px 0;border-radius:22px}
.case__res{margin:26px -24px 0;padding:20px 24px 24px}
.cases__hint{display:block;margin-top:18px;padding:0 var(--gut);font-size:13px;font-weight:600;color:#6f6f6f}
.diag__grid{grid-template-columns:1fr;gap:56px}
.takes{grid-template-columns:1fr;gap:12px}
.takes li{min-height:0;display:grid;grid-template-columns:48px 1fr;column-gap:16px;align-items:center;padding:20px}
.takes li:nth-child(1),.takes li:nth-child(2),.takes li:nth-child(3){transform:translateY(40px)}
.takes__no{display:none}
.takes__ic{grid-row:span 2;margin:0}
.takes b{margin:0;padding:0;font-size:18px}
.takes p{margin-top:2px}
.takes.in li:nth-child(2){transition-delay:.12s}.takes.in li:nth-child(3){transition-delay:.24s}
.diag__note{width:auto;margin-top:48px;padding:16px 20px;border-radius:16px;font-size:14.5px}
.nots{grid-template-columns:1fr;gap:12px;margin-top:44px}
.nots li{padding:26px 22px}
.nots__x{right:20px;top:22px;width:32px;height:32px}
.self__grid{grid-template-columns:1fr;gap:48px}
.self__btn{width:100%}
.q9{padding:24px 20px 20px;border-radius:22px}
.q9__list li{flex-direction:column;align-items:flex-start;gap:12px;padding:18px 0}
.q9__list li.q9__ghost{flex-direction:row;align-items:center}
.q9__ghost i:last-child{width:90px}
.lp--final{padding:150px 0 160px}
.final__btn{width:100%;height:58px;font-size:16px}
.modal{align-items:flex-end;padding:0}
.modal__panel{width:100%;max-height:92vh;max-height:92dvh;padding:44px 24px 28px;border-radius:24px 24px 0 0;transform:translateY(100%)}
.modal__x{right:14px;top:14px}
.toast{bottom:92px}
}
@media(prefers-reduced-motion:reduce){
.more__c,.takes li,.dream li.rv{opacity:1;transform:none}
.dream__ic>*{stroke-dashoffset:0}
.key__ic>*,.takes__ic>*{stroke-dashoffset:0}
.nots__x::before{transform:rotate(45deg)}.nots__x::after{transform:rotate(-45deg)}
}
/* =========================================================
메인 v5 · 추가 연출 (2026-10-23)
========================================================= */
/* 히어로 문구: 처음 열 때 화면에 흩어진 빛 입자가 모여 문장이 됨 (landing.js 캔버스) → 다 모이면 진짜 글자로 바뀜
글자 하나하나는 움직이지 않음 */
.page-landing .hero__txt .ch,.is-loading .page-landing .hero__txt .ch{transform:none;opacity:1;filter:none;transition:none}
.page-landing .hero__txt .ln{overflow:visible;-webkit-mask-image:none;mask-image:none}
.hero__form{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none;transition:opacity 1s ease}
.hero__form.is-out{opacity:0}
.page-landing .hero.is-forming .hero__texts{opacity:0}
.page-landing .hero__texts{transition:opacity 1s ease}
.page-landing .hero.is-forming .hero__tag,.page-landing .hero.is-forming .hero__cta{opacity:0;visibility:hidden;transform:translateY(18px)}
.page-landing .hero__tag{animation:none;transition:opacity .9s ease .25s,transform 1.1s var(--ease) .25s}
.page-landing .hero.is-final:not(.is-forming) .hero__cta{transition-delay:.55s,.55s,0s}
/* 네모 칸 가장자리를 따라 주황 빛이 돎 */
@property --edge{syntax:'';inherits:false;initial-value:0deg}
.key::after,.case__in::after,.nots li::after,.takes li::after,.q9::after,.order__box::after,.diag__checks li::after,.dream__card::after{
content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;padding:1.5px;pointer-events:none;
background:conic-gradient(from var(--edge),transparent 0 62%,rgba(var(--brand-rgb),.0) 64%,rgba(var(--brand-rgb),.9) 82%,#ffd9bd 88%,rgba(var(--brand-rgb),.9) 91%,transparent 96%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
animation:edgeRun 5s linear infinite;opacity:.85;transition:opacity .4s}
.diag__checks li{position:relative}
.diag__checks li::after{padding:1px;opacity:.55;animation-duration:7s}
/* 칸마다 출발점을 달리해 함께 돌지 않게 */
.dream li:nth-child(2) .dream__card::after,.keys li:nth-child(2) .key::after,.case:nth-child(2) .case__in::after,.nots li:nth-child(2)::after,.takes li:nth-child(2)::after,.diag__checks li:nth-child(2)::after{animation-delay:-1.7s}
.dream li:nth-child(3) .dream__card::after,.keys li:nth-child(3) .key::after,.case:nth-child(3) .case__in::after,.nots li:nth-child(3)::after,.takes li:nth-child(3)::after,.diag__checks li:nth-child(3)::after{animation-delay:-3.4s}
.case:nth-child(4) .case__in::after,.nots li:nth-child(4)::after{animation-delay:-2.5s}
/* 마우스를 올리면 빛이 빨라지고 진해짐 */
.key:hover::after,.case__in:hover::after,.nots li:hover::after,.takes li:hover::after,.q9:hover::after{opacity:1;animation-duration:2.2s}
@keyframes edgeRun{to{--edge:360deg}}
.order__box,.q9{position:relative}
@media(prefers-reduced-motion:reduce){
.page-landing .hero__txt .ch{transform:none;opacity:1;filter:none}
.key::after,.case__in::after,.nots li::after,.takes li::after,.q9::after,.order__box::after,.diag__checks li::after{animation:none;opacity:.35}
}
/* =========================================================
2 원인: 악순환 목록 (원형 도표 대신)
========================================================= */
.why__cause{margin-top:56px}
.why__cause .why__one{font-size:clamp(18px,1.5vw,22px);font-weight:600;color:#bdbdbd}
.why__cause .lp__key{margin-top:12px;font-size:clamp(28px,3vw,46px);line-height:1.4;color:#fff}
.why__cause .lp__key b{font-weight:800}
.chain{counter-reset:ch;margin-top:100px;padding-left:72px}
.chain__loop{position:relative}
.chain__g{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:start;padding:30px 0;border-top:1px solid #232323}
.chain__list li{counter-increment:ch;display:flex;align-items:baseline;gap:18px;padding:9px 0;font-size:clamp(24px,2.4vw,36px);font-weight:800;line-height:1.3;letter-spacing:-.04em;color:#3b3b3b;transition:color .5s}
.chain__list li::before{content:counter(ch,decimal-leading-zero);flex:none;min-width:26px;font-family:var(--f-en);font-size:13px;font-weight:600;letter-spacing:0;color:#3b3b3b;transition:color .5s}
.chain__list li.is-on{color:#fff}
.chain__list li.is-on::before{color:var(--brand)}
.chain__list li.is-cur{color:var(--brand)}
.chain__cap{padding-top:14px;font-size:clamp(16px,1.3vw,19px);line-height:1.85;color:#8a8a8a;opacity:.4;transition:opacity .6s,color .6s}
.chain__g.is-on .chain__cap{opacity:1;color:#d2d2d2}
/* 괄호선: 09에서 왼쪽으로 나와 올라가 04로 돌아감 = 악순환 */
.chain__brk{position:absolute;left:-56px;width:32px;border:2px solid currentColor;border-right:0;border-radius:18px 0 0 18px;color:#333;transition:color .6s,filter .6s;pointer-events:none}
.chain__brk::before{content:"";position:absolute;right:-3px;top:-7px;width:11px;height:11px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.chain__brk span{position:absolute;left:-1px;top:50%;padding:10px 0;transform:translate(-50%,-50%);writing-mode:vertical-rl;background:#0b0b0b;font-size:15px;font-weight:800;letter-spacing:.3em;color:#555;transition:color .6s}
.chain.is-closed .chain__brk{color:var(--brand);filter:drop-shadow(0 0 8px rgba(var(--brand-rgb),.6))}
.chain.is-closed .chain__brk span{color:var(--brand)}
.why__more{margin-top:80px;font-size:clamp(17px,1.4vw,21px);line-height:1.85;color:#bdbdbd}
.lp--why .why__sign{margin-top:64px}
@media(max-width:1023px){
.chain{margin-top:64px;padding-left:44px}
.chain__g{grid-template-columns:1fr;gap:2px;padding:18px 0}
.chain__list li{gap:12px;padding:6px 0;font-size:clamp(20px,5.8vw,24px)}
.chain__list li::before{min-width:20px;font-size:11px}
.chain__cap{padding-top:6px;font-size:15px}
.chain__brk{left:-36px;width:22px;border-radius:12px 0 0 12px}
.chain__brk span{font-size:12px;letter-spacing:.2em}
.why__more{margin-top:56px}
}
/* =========================================================
2 원인: 악순환 그림 (사각 트랙 · 시계 방향) — landing.js 가 단계마다 불을 켬
========================================================= */
.vc{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:64px;align-items:center;margin-top:90px}
.vc__fig{position:relative}
.vc__entry{display:flex;flex-direction:column;align-items:center;gap:30px;margin-bottom:30px}
.vc__entry li{position:relative;display:flex;align-items:center;gap:8px;padding:9px 18px;border:1.5px dashed #3a3a3a;border-radius:100px;font-size:clamp(14px,1.1vw,16px);font-weight:700;letter-spacing:-.02em;color:#6a6a6a;transition:color .45s,border-color .45s,background .45s}
.vc__entry li::after{content:"";position:absolute;left:50%;top:100%;width:1.5px;height:24px;margin-left:-.75px;background:#333;transition:background .45s}
.vc__entry li::before{content:"";position:absolute;left:50%;top:calc(100% + 22px);margin-left:-5px;border:5px solid transparent;border-top:6px solid #333;transition:border-color .45s}
.vc__entry span,.vc__box span{font-family:var(--f-en);font-size:11px;font-weight:600;letter-spacing:0;color:#4d4d4d;transition:color .45s}
.vc__entry li.is-on{border-style:solid;border-color:rgba(var(--brand-rgb),.6);color:#fff}
.vc__entry li.is-on::after{background:var(--brand)}
.vc__entry li.is-on::before{border-top-color:var(--brand)}
.vc__entry li.is-on span{color:var(--brand)}
.vc__entry li.is-cur{border-color:var(--brand);background:var(--brand);color:#fff}
.vc__entry li.is-cur span{color:rgba(255,255,255,.75)}
.vc__loop{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr) 44px minmax(0,1fr);grid-template-rows:auto 92px auto;
grid-template-areas:"b9 a94 b4 a45 b5" "up core core core dn" "b8 a87 b7 a76 b6";align-items:center}
/* 트랙: 상자 가운데를 잇는 둥근 사각형 */
.vc__loop::before{content:"";position:absolute;left:calc((100% - 88px) / 6);right:calc((100% - 88px) / 6);top:48px;bottom:48px;border:1.5px dashed #2a2a2a;border-radius:28px;transition:border-color .8s}
.vc.is-closed .vc__loop::before{border-style:solid;border-color:rgba(var(--brand-rgb),.4);box-shadow:0 0 30px rgba(var(--brand-rgb),.12)}
.vc__box{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:96px;padding:14px 12px;border:1.5px solid #2c2c2c;border-radius:16px;background:#141414;
font-size:clamp(15px,1.25vw,18px);font-weight:800;line-height:1.35;letter-spacing:-.035em;color:#666;text-align:center;transition:color .45s,border-color .45s,background .45s,box-shadow .45s,transform .5s var(--ease)}
.vc__box.is-on{border-color:rgba(var(--brand-rgb),.55);background:#1d1108;color:#fff}
.vc__box.is-on span{color:var(--brand)}
.vc__box.is-cur,.vc__box.is-run{border-color:var(--brand);background:var(--brand);color:#fff;transform:scale(1.05);box-shadow:0 14px 36px -10px rgba(var(--brand-rgb),.75)}
.vc__box.is-cur span,.vc__box.is-run span{color:rgba(255,255,255,.75)}
.vc__ar{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;height:100%}
.vc__ar svg{width:24px;height:24px;fill:none;stroke:#3a3a3a;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .45s}
.vc__ar--l svg{transform:rotate(180deg)}
.vc__ar--u svg{transform:rotate(-90deg)}
.vc__ar--d svg{transform:rotate(90deg)}
.vc__ar.is-on svg{stroke:var(--brand)}
.vc__ar em{position:absolute;left:50%;bottom:calc(50% + 16px);transform:translateX(-50%);font-size:12px;font-weight:800;color:#4d4d4d;white-space:nowrap;transition:color .45s}
.vc__ar.is-on em{color:#ffb487}
.vc__core{text-align:center}
.vc__core b{font-size:clamp(36px,3.6vw,58px);font-weight:800;letter-spacing:-.05em;color:#2a2a2a;transition:color .8s,text-shadow .8s}
.vc.is-closed .vc__core b{color:var(--brand);text-shadow:0 0 40px rgba(var(--brand-rgb),.45)}
.vc__caps{display:grid;gap:12px}
.vc__cap{padding:20px 24px;border-left:2px solid #2a2a2a;opacity:.35;transition:opacity .6s,border-color .6s}
.vc__cap span{font-family:var(--f-en);font-size:12px;font-weight:600;letter-spacing:.04em;color:#666;transition:color .6s}
.vc__cap p{margin-top:8px;font-size:clamp(16px,1.25vw,18px);line-height:1.8;color:#d0d0d0}
.vc__cap.is-on{opacity:1;border-left-color:var(--brand)}
.vc__cap.is-on span{color:var(--brand)}
/* 진단 세 장 · 해결 카드: 아이콘 없이 */
.takes b{padding-top:40px}
@media(max-width:1023px){
.vc{grid-template-columns:1fr;gap:36px;margin-top:56px}
.vc__entry{gap:24px;margin-bottom:24px}
.vc__entry li{padding:7px 14px;font-size:13px}
.vc__entry li::after{height:18px}.vc__entry li::before{top:calc(100% + 16px)}
.vc__loop{grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr) 22px minmax(0,1fr);grid-template-rows:auto 64px auto}
.vc__loop::before{left:calc((100% - 44px) / 6);right:calc((100% - 44px) / 6);top:38px;bottom:38px;border-radius:18px}
.vc__box{min-height:76px;padding:10px 6px;gap:4px;border-radius:12px;font-size:13px}
.vc__box span{font-size:10px}
.vc__ar svg{width:18px;height:18px}
.vc__ar em{bottom:calc(50% + 11px);font-size:10.5px}
.vc__core b{font-size:30px}
.vc__cap{padding:12px 16px}
.vc__cap p{font-size:15px}
.takes li{grid-template-columns:34px 1fr}
.takes__no{display:block;grid-row:span 2;font-size:13px;color:var(--brand)}
.takes b{padding-top:0}
}
/* 악순환 그림: 원 (사각 트랙을 대신함) — 테두리 · 화살표 · 불빛이 계속 돌고, 상자는 제자리에 똑바로 */
.vc__loop{display:block;width:min(100%,560px);aspect-ratio:1;margin:0 auto;grid-template-columns:none;grid-template-rows:none;grid-template-areas:none}
.vc__loop::before{display:none}
.vc__entry{margin-bottom:-2px}
.vc__ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.vc__track{fill:none;stroke:#2e2e2e;stroke-width:.5;stroke-dasharray:1.1 1.5;transition:stroke .8s}
.vc.is-loop .vc__track{stroke:rgba(var(--brand-rgb),.5)}
.vc.is-closed .vc__track{stroke:var(--brand);stroke-width:.6;stroke-dasharray:none}
.vc__chev{fill:none;stroke:#444;stroke-width:.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .8s}
.vc.is-loop .vc__chev{stroke:var(--brand)}
.vc.is-closed .vc__chev{stroke:#ffd2b0}
.vc__tail{fill:var(--brand)}
.vc__head{fill:#fff}
.vc__glow{fill:rgba(var(--brand-rgb),.6);filter:blur(1.2px)}
.vc__tail,.vc__head,.vc__glow{transition:opacity .6s}
.vc:not(.is-loop) .vc__tail,.vc:not(.is-loop) .vc__head,.vc:not(.is-loop) .vc__glow{opacity:0!important}
.vc__loop .vc__box{position:absolute;width:31%;min-height:0;padding:14px 10px;transform:translate(-50%,-50%)}
.vc__loop .vc__box.is-cur,.vc__loop .vc__box.is-run{transform:translate(-50%,-50%) scale(1.06)}
.vc__loop .vc__core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.vc__again{position:absolute;z-index:2;transform:translate(-50%,-50%) scale(.7);font-style:normal;font-size:14px;font-weight:800;color:#ffb487;white-space:nowrap;opacity:0;transition:opacity .4s,transform .6s cubic-bezier(.34,1.56,.64,1)}
.vc__again.is-on{opacity:1;transform:translate(-50%,-50%)}
@media(max-width:1023px){
.vc__loop{width:100%}
.vc__loop .vc__box{width:32%;padding:8px 4px;font-size:12px;border-radius:11px}
.vc__again{font-size:11px}
}
/* =========================================================
휴대폰 다듬기 (2026-10-23 점검)
========================================================= */
.m-br{display:none}
@media(max-width:1023px){
.m-br{display:inline}
.lp .lp__q{font-size:clamp(27px,7.6vw,34px)} /* 제목이 세 줄로 쪼개지지 않게 */
.self__copy .lp__text br,.why__more br{display:none} /* 좁은 화면에선 강제 줄바꿈 대신 자연스럽게 */
.yn button{min-width:64px;height:44px} /* 손가락으로 누르기 쉬운 크기 */
.vc__box span,.vc__entry span{font-size:11px}
.final__star{font-size:clamp(26px,7.4vw,32px)}
.grain{display:none} /* 휴대폰: 화면 전체 질감 애니메이션 끔 (배터리 · 버벅임) */
.footer__info p a{display:inline-block;padding:8px 0}
}
/* =========================================================
히어로 A안: O 가운데 · 문구 가운데 · 바로 O 속으로 (hero-ring.js 가 O를 가운데에 둠)
========================================================= */
.page-landing .hero__content{left:0;right:0;padding:0 var(--gut);align-items:center;text-align:center}
.page-landing .hero__texts{justify-items:center}
.page-landing .hero__txt{align-items:center;font-size:clamp(30px,3.5vw,56px);text-shadow:0 2px 30px rgba(0,0,0,.55)}
.page-landing .hero__tag{justify-content:center;gap:14px;margin-bottom:26px;font-size:clamp(15px,1.3vw,19px);font-weight:700;color:rgba(255,255,255,.88);text-shadow:0 2px 20px rgba(0,0,0,.6)}
.page-landing .hero__tag::after{content:"";flex:none;width:34px;height:2px;background:var(--brand)}
.page-landing .hero__cta{justify-content:center;margin-top:40px}
/* 배경 빛도 O 뒤 가운데로 */
.page-landing .hero__bg--1{background:radial-gradient(42% 52% at 50% 48%,rgba(var(--brand-rgb),.36),transparent 66%),radial-gradient(60% 60% at 50% 110%,rgba(255,140,90,.12),transparent 70%),linear-gradient(180deg,#120a08,#050505 75%)}
.page-landing .hero__bg--1::before{right:auto;top:auto;left:calc(50% - 35vmax);bottom:-30vmax;opacity:.35}
.page-landing .hero__bg::after{background:radial-gradient(70% 70% at 50% 50%,transparent 40%,rgba(0,0,0,.45))}
@media(max-width:1023px){
.page-landing .hero__content{justify-content:center;padding-bottom:4vh}
.page-landing .hero__txt{font-size:clamp(26px,7.6vw,34px);line-height:1.24}
.page-landing .hero__tag{gap:10px;margin-bottom:18px;font-size:13.5px}
.page-landing .hero__tag::before,.page-landing .hero__tag::after{display:none} /* 휴대폰: 두 줄로 O 안에 */
.page-landing .hero__tag span{line-height:1.5;color:rgba(255,255,255,.9)}
.page-landing .hero__cta{margin-top:122px;flex-wrap:nowrap;gap:8px} /* O 아래 테두리 밖으로 */
.page-landing .hero__cta .btn{height:50px;padding:0 20px;font-size:14.5px}
}
/* 카드 대칭: 제목 · 문장을 위쪽 기준으로 맞춤 (아래 문장 길이가 달라도 제목 높이가 같게) */
.key{min-height:360px}
.key h3{margin-top:0;padding-top:72px}
.dream__card{min-height:260px}
.dream__card p{margin-top:0;padding-top:64px}
.takes li{min-height:230px}
.takes b{margin-top:0;padding-top:74px}
@media(max-width:1023px){
.key{min-height:0}.key h3{padding-top:36px}
.dream__card{min-height:0}.dream__card p{padding-top:22px}
.takes li{min-height:0}.takes b{padding-top:0}
}
/* 반쪽 칸 안의 제목: 세 줄로 쪼개지지 않게 (진단 · 셀프 진단) */
.lp--diag .lp__q,.lp--self .lp__q{font-size:clamp(32px,3.1vw,48px)}
.dream__no{display:block;line-height:1} /* 번호 줄 높이를 고정해 세 카드 문장 시작 높이를 같게 */
/* 사례 결과: 핵심 숫자를 크게, v5 결과 문장은 그 아래 (landing.js 가 숫자를 0부터 올림) */
.case__res .case__res-k{display:block;font-family:var(--f-en);font-size:11px;font-weight:600;letter-spacing:.14em;opacity:.78}
.case__big{margin-top:8px;font-size:clamp(26px,2.3vw,36px);font-weight:800;line-height:1.05;letter-spacing:-.04em;color:#fff;white-space:nowrap}
.case__res .case__big b{display:inline;margin:0;font-family:var(--f-en);font-size:1.6em;font-weight:700;line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.case__big i{margin:0 .12em;font-style:normal;font-weight:400;opacity:.65}
.case__big small{margin-left:8px;font-size:.5em;font-weight:700;letter-spacing:-.02em;opacity:.85}
.case__res-t{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.28);font-size:14px;font-weight:600;line-height:1.6;color:rgba(255,255,255,.9)}
@media(max-width:1023px){
.case__big{font-size:22px}
.case__res-t{font-size:13px}
}
/* 진단 끝: 안내 + 중간 신청 버튼 */
.diag__foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:76px}
.diag__foot .diag__note{margin-top:0}
.diag__btn{flex:none;height:60px;padding:0 36px;font-size:16.5px;box-shadow:0 18px 40px -18px rgba(var(--brand-rgb),.8)}
@media(max-width:1023px){
.diag__foot{flex-direction:column;align-items:stretch;gap:14px;margin-top:48px}
.diag__btn{width:100%;height:56px}
}
/* =========================================================
개인정보처리방침 (privacy.html)
========================================================= */
.page-legal .header__bg{opacity:1}
.legal{padding:calc(var(--header-h) + 90px) 0 140px}
.legal__in{max-width:860px}
.legal__tit{margin-top:22px;font-size:clamp(32px,3.6vw,52px);font-weight:800;letter-spacing:-.045em}
.legal__lead{margin-top:20px;font-size:17px;line-height:1.8;color:#444}
.legal__toc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 24px;margin-top:44px;padding:24px 28px;border-radius:18px;background:var(--gray-bg)}
.legal__toc a{padding:6px 0;font-size:14.5px;font-weight:600;color:#444;transition:color .2s}
.legal__toc a:hover{color:var(--brand)}
.legal__sec{padding-top:56px;scroll-margin-top:calc(var(--header-h) + 20px)}
.legal__sec h2{font-size:clamp(19px,1.6vw,22px);font-weight:800;letter-spacing:-.03em}
.legal__sec p,.legal__sec li{margin-top:12px;font-size:15.5px;line-height:1.85;color:#444}
.legal__sec ul{margin-top:6px}
.legal__sec li{position:relative;margin-top:6px;padding-left:16px}
.legal__sec li::before{content:"";position:absolute;left:2px;top:.8em;width:5px;height:5px;border-radius:50%;background:var(--brand)}
.legal__table{width:100%;margin-top:16px;border-collapse:collapse;font-size:15px;line-height:1.7}
.legal__table th,.legal__table td{padding:14px 16px;border-top:1px solid #e3e3e3;text-align:left;vertical-align:top}
.legal__table tr:last-child th,.legal__table tr:last-child td{border-bottom:1px solid #e3e3e3}
.legal__table th{width:120px;background:var(--gray-bg2);font-weight:700;color:#222}
.legal__table tr:first-child th{background:var(--gray-bg)}
.legal__todo{color:var(--brand)!important;font-weight:700}
.legal__back{margin-top:72px}
.agree__link{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;color:var(--brand);text-decoration:underline;text-underline-offset:3px}
@media(max-width:1023px){
.legal{padding:calc(var(--header-h) + 56px) 0 100px}
.legal__toc{grid-template-columns:1fr;padding:18px 20px}
.legal__table th,.legal__table td{padding:12px 10px;font-size:14px}
.legal__table th{width:80px}
.page-legal .btn-apply{display:inline-flex}
}
/* 메인 인트로: OJO가 크게 떴다가 위로 걷히며 홈페이지 (히어로와 같은 검정 · 주황 빛) */
.page-landing .loader{background:radial-gradient(circle at 50% 50%,rgba(var(--brand-rgb),.2),transparent clamp(200px,34vw,520px)),#0b0b0b}
/* 빛은 filter로: overflow:hidden(글자 올라오는 마스크)에 text-shadow가 잘려 네모가 보이던 것 고침 */
.page-landing .loader__logo{font-size:clamp(84px,17vw,240px);filter:drop-shadow(0 0 40px rgba(var(--brand-rgb),.5))}
.page-landing .loader__copy{margin-top:26px;font-size:clamp(14px,1.2vw,17px);font-weight:600;color:rgba(255,255,255,.7);letter-spacing:-.01em}
.page-landing .loader__foot{left:50%;right:auto;bottom:48px;width:min(240px,50vw);transform:translateX(-50%)}
.page-landing .loader__count{display:none}
/* 브랜드큐레이터처럼: 검은 화면 → 주황 문구 타이핑 → 문구가 빠지며 OJO가 크게 올라옴 (premium.js) · 누르면 건너뜀 */
.page-landing .loader{background:#0b0b0b;cursor:pointer}
.page-landing .loader::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(var(--brand-rgb),.2),transparent clamp(200px,34vw,520px));opacity:0;transition:opacity 1.2s ease}
.page-landing .loader.is-logo::before{opacity:1}
.page-landing .loader__copy{position:absolute;left:0;right:0;top:50%;margin:0;padding:0 20px;transform:translateY(-50%);text-align:center;white-space:pre;font-size:clamp(15px,4.2vw,28px);font-weight:700;letter-spacing:-.03em;color:var(--brand);opacity:1;animation:none;transition:opacity .5s ease,transform .6s var(--ease)}
.page-landing .loader__copy .lc{opacity:0}
.page-landing .loader__copy .lc.on{opacity:1}
.loader__caret{display:inline-block;width:2px;height:1em;margin-left:4px;vertical-align:-.12em;background:var(--brand);animation:caret .8s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.page-landing .loader.is-logo .loader__copy{opacity:0;transform:translateY(calc(-50% - 24px))}
.page-landing .loader__logo span{animation:none}
.page-landing .loader.is-logo .loader__logo span{animation:loaderIn 1s var(--ease) forwards}
.page-landing .loader.is-logo .loader__logo span:nth-child(2){animation-delay:.08s}
.page-landing .loader.is-logo .loader__logo span:nth-child(3){animation-delay:.16s}
.page-landing .loader.is-out .loader__logo span{animation:none;transform:translateY(-110%)}
.page-landing .loader__foot{display:none}
/* 해결: 순서 막대 대신 문장 — '알리는 건, 그다음입니다.'를 크게 */
.sol__then{margin-top:44px;padding-left:22px;border-left:4px solid var(--brand);font-size:clamp(28px,3vw,46px);font-weight:800;line-height:1.3;letter-spacing:-.045em}
.sol__then em{color:var(--brand)}
.lp--sol .sol__rev{margin-top:20px;color:#555}
.lp--sol .sol__end{font-weight:500;color:#666}
.lp--sol .sol__end b{display:inline-block;margin-top:6px;font-weight:800;color:var(--black)}
@media(max-width:1023px){
.sol__then{margin-top:32px;padding-left:16px;font-size:clamp(25px,7vw,32px)}
}
/* PC 사례 고정 화면: 화면 높이가 낮은 노트북(1536×730 등)에서 머리말 위 · 카드 아래가 잘리던 것 → 높이에 맞춰 줄어듦 */
.is-lp .lp--cases .lp__q{font-size:clamp(28px,min(3vw,5.4vh),46px)}
.is-lp .cases__view{margin-top:clamp(18px,3.6vh,48px)}
.is-lp .case__in{padding-top:clamp(20px,3.4vh,32px)}
.is-lp .case h3{margin-top:clamp(8px,1.4vh,14px);font-size:clamp(24px,min(2.4vw,4.4vh),36px)}
.is-lp .case__keys{margin-top:clamp(10px,1.8vh,18px)}
.is-lp .case__body{gap:clamp(8px,1.8vh,16px);margin-top:clamp(12px,2.4vh,22px)}
.is-lp .case__body dd{margin-top:clamp(4px,.8vh,8px)}
@media(max-height:820px){.is-lp .case__body dd{line-height:1.58}}
.is-lp .case__res{margin-top:clamp(14px,2.8vh,26px);padding-top:clamp(14px,2.2vh,20px);padding-bottom:clamp(16px,2.6vh,24px)}
.is-lp .case__big{font-size:clamp(22px,min(2.3vw,4.2vh),36px)}
.is-lp .case__res-t{margin-top:clamp(8px,1.4vh,12px);padding-top:clamp(8px,1.4vh,12px)}
@media(min-width:1024px) and (max-height:680px){
.is-lp .case__body dd{font-size:14px;line-height:1.5}
.is-lp .case__res-t{font-size:13px;line-height:1.5}
}