/* 네네텔레콤 시안 D — 레퍼런스 충실판
   어두운 섹션(히어로·광고·기능·CTA)과 밝은 섹션(04 AI비서·CRM)의 교차.
   색은 spec/BRAND.md 네 색(잉크·크림·주황·파랑)만. 녹색·청록은 쓰지 않는다. */

@font-face{font-family:"Pretendard Variable";src:url("../fonts/PretendardVariable.woff2") format("woff2-variations"),url("../fonts/PretendardVariable.woff2") format("woff2");font-weight:45 920;font-display:swap}
/* 문의 구간 외곽선 제목 전용: 고정 800 굵기(겹친 획 병합)에서 그 문구 글자만 잘라 낸 판. 가변 글꼴은 획이 겹쳐 외곽선 안쪽에 속선이 보인다. 선 색은 원래대로 반투명 크림(채움이 끝나면 선이 채움에 묻힌다)(james 2026-10-04) */
@font-face{font-family:"Pretendard CTA";src:url("../fonts/PretendardCta-800.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Inter Tight";src:url("../fonts/inter-tight-latin-wght-normal.woff2") format("woff2-variations"),url("../fonts/inter-tight-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";src:url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../fonts/instrument-serif-latin-400-normal.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --ink:#0F1014; --ink-2:#16171C; --ink-3:#1C1D23; --ink-4:#24252C;
  --cream:#F2F0EA; --paper:#F8F6F1; --sand:#E6E2D8;
  --fg:#F2F0EA; --mute:rgba(242,240,234,.58); --faint:rgba(242,240,234,.12);
  --ink-mute:rgba(22,23,28,.6); --ink-faint:rgba(22,23,28,.12);
  --orange:#FF4F1A; --orange-2:#FF7A4D; --blue:#2E3BFF; --blue-2:#6E78FF;
  --call:#12A26B;   /* 초록은 '통화' 강조에만, 밝은 바탕에서만(빛 번짐 없음). 04 섹션과 핵심 두 문장 띠가 쓴다 */
  --sans:"Inter Tight","Pretendard Variable",Pretendard,system-ui,sans-serif;
  --kr:"Pretendard Variable",Pretendard,"Inter Tight",system-ui,sans-serif;
  --serif:"Instrument Serif","Pretendard Variable",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --gutter:clamp(16px,3.2vw,48px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);color:var(--fg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
body{background:var(--ink);font-family:var(--kr);overflow-x:clip;word-break:keep-all;overflow-wrap:break-word}
body.is-loading{overflow:hidden;height:100svh}
::selection{background:var(--orange);color:#fff}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,video,svg,canvas{display:block}
ul,ol{list-style:none}
em{font-style:normal}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.mono{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.eyebrow{font:500 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--mute);display:flex;gap:.9em;align-items:center}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 밝은 섹션 공통: 큰 글자는 파랑, 강조는 주황(BRAND) */
.flow{background:var(--cream);color:var(--ink-2)}
.flow .eyebrow{color:var(--ink-mute)}

/* ---------- 필름 그레인 ---------- */
.grain{position:fixed;inset:-100%;z-index:80;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .85 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,4%)}40%{transform:translate(4%,-3%)}60%{transform:translate(-5%,-4%)}80%{transform:translate(3%,5%)}100%{transform:translate(0,0)}}

/* ---------- 로더 ---------- */
.loader{position:fixed;inset:0;z-index:100;background:var(--ink);clip-path:inset(0 0 0 0);display:grid;place-items:center}
.loader__mark{width:min(24vw,118px);overflow:visible}
.lm-face{fill:rgba(242,240,234,0);stroke:var(--cream);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.lm-leye{fill:var(--cream);opacity:0}
.lm-reye{fill:var(--orange);opacity:0}   /* 크기 기준점은 GSAP이 transform 속성에 직접 계산한다(CSS 기준점을 겹치면 눈이 밀린다) */
.loader__count{position:absolute;left:var(--gutter);bottom:calc(var(--gutter) - .08em);font:600 clamp(72px,13vw,200px)/.78 var(--sans);letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.loader__label{position:absolute;right:var(--gutter);bottom:var(--gutter);text-align:right;font:500 11px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--mute)}
.loader__top{position:absolute;top:var(--gutter);left:var(--gutter);right:var(--gutter);display:flex;justify-content:flex-end;font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--mute)}

/* ---------- 원형 커서 (spec/MOUSE.md 그대로, 강조색만 녹색 → 주황) ---------- */
html.cur-active,html.cur-active body,html.cur-active a,html.cur-active button,html.cur-active summary,html.cur-active label{cursor:none}
.cur-dot,.cur-ring{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:999;opacity:0}
.cur-dot{width:5px;height:5px;background:#FF4F1A}
.cur-ring{width:34px;height:34px;border:1.5px solid rgba(255,255,255,.5);box-shadow:0 0 0 1px rgba(12,12,12,.3);transition:width .3s ease,height .3s ease,border-color .3s ease,opacity .3s ease}
html.cur-active .cur-dot,html.cur-active .cur-ring{opacity:1}
.cur-ring.on{width:58px;height:58px;border-color:#FF4F1A}
.cur-ring.on-big{width:86px;height:86px;border-color:#FF4F1A}

/* ---------- WebGL 캔버스 ---------- */
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
main{position:relative;z-index:1}
.no-webgl .hero{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='22 14 66 82'%3E%3Cpath d='M 81 44 A 30 30 0 1 1 29 44 L 28.5 19 L 44.5 30.5 A 30 30 0 0 1 65.5 30.5 L 81.5 19 L 81 44 Z' fill='none' stroke='%23F2F0EA' stroke-width='8' stroke-linejoin='round'/%3E%3Ccircle cx='44.5' cy='58' r='4.5' fill='%23F2F0EA'/%3E%3Cpath d='M 65 48.5 C 66.4 55.5 68.5 57.6 75.5 59 C 68.5 60.4 66.4 62.5 65 69.5 C 63.6 62.5 61.5 60.4 54.5 59 C 61.5 57.6 63.6 55.5 65 48.5 Z' fill='%23FF4F1A'/%3E%3C/svg%3E") 50% 26%/min(24vw,240px) auto no-repeat,radial-gradient(40% 50% at 38% 40%,rgba(124,92,255,.55),transparent 70%),radial-gradient(36% 46% at 64% 52%,rgba(194,89,143,.4),transparent 70%),var(--ink)}

/* ---------- 헤더 ---------- */
/* 인트로 동안 헤더를 로더 위로 올려 회사 로고를 처음부터 보인다(james 10-04). 메뉴·버튼은 히어로가 열릴 때 내려온다 */
body:has(.loader) .nav{z-index:101}
body.is-loading .nav__links,body.is-loading .nav__right{opacity:0}
.nav{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px var(--gutter);color:var(--fg);transition:color .5s var(--ease)}
.nav.is-light{color:var(--ink-2)}
.brand{display:flex;align-items:center;gap:10px;font:800 17px/1 var(--kr);letter-spacing:-.04em}
.logo-face{width:30px;height:30px;overflow:visible;transform-origin:50% 86%}
.logo-badge{opacity:0;transition:opacity .4s}
.nav.is-light .logo-badge{opacity:1}
.nav__links{display:flex;gap:30px;font:500 14px/1 var(--kr)}
.nav__right{display:flex;align-items:center;gap:16px}
.nav__time{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.nav__cta{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border:1px solid currentColor;border-radius:999px;font:600 13px/1 var(--kr);transition:background .4s var(--ease),color .4s,border-color .4s}
.nav__cta:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.nav__progress{position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.8;transform-origin:0 50%;transform:scaleX(0)}
.roll{display:inline-block;overflow:hidden;height:1.15em;line-height:1.15}
.roll span{display:block;transition:transform .6s var(--ease)}
.roll span::after{content:attr(data-t);display:block}
.roll:hover span,a:hover>.roll span{transform:translateY(-50%)}
/* 버거: 운영 사이트 트레이드마크 메뉴 형식 — 비대칭 두 줄 + MENU·OPEN·CLOSE 롤. 포인트색만 녹색 → 주황(james 10-04) */
.burger{display:flex;align-items:center;gap:11px;padding:10px 0 10px 6px;-webkit-tap-highlight-color:transparent}
.burger>span{transition:transform .35s cubic-bezier(.19,1,.22,1)}
.burger__label{position:relative;overflow:hidden;height:13px;font:700 10.5px/13px var(--sans);letter-spacing:.3em;color:var(--orange)}
.burger__label i{display:block;font-style:normal;transition:transform .35s cubic-bezier(.19,1,.22,1)}
@media (hover:hover){.burger:hover .burger__label i{transform:translateY(-100%)}}
body.mn-open .burger__label i{transform:translateY(-200%)!important}
.burger__lines{display:flex;flex-direction:column;gap:7px;align-items:flex-end;width:30px}
.burger__lines i{position:relative;overflow:hidden;display:block;height:2.5px;border-radius:2px;background:currentColor;transition:transform .5s cubic-bezier(.19,1,.22,1),width .3s ease,background .35s ease}
.burger__lines i:nth-child(1){width:15px}
.burger__lines i:nth-child(2){width:30px}
.burger__lines i::after{content:"";position:absolute;inset:0;background:var(--orange);transform:translateX(-101%);transition:transform .3s cubic-bezier(.785,.135,.15,.86)}
.burger__lines i:nth-child(2)::after{transition-delay:.06s}
/* 터치 기기는 손가락을 뗀 뒤에도 hover가 남으므로 마우스 기기에서만 */
@media (hover:hover){.burger:hover .burger__lines i{width:30px}.burger:hover .burger__lines i::after{transform:translateX(0)}}
body.mn-open .burger__lines i{width:30px;background:#fff}
body.mn-open .burger__lines i:nth-child(1){transform:translateY(4.75px) rotate(45deg)}
body.mn-open .burger__lines i:nth-child(2){transform:translateY(-4.75px) rotate(-45deg)}

/* 로고 트레이드 무빙 — 고개 까딱(오뚝이 감쇠 진동) */
.global-logo.is-nod .logo-face{animation:zoro-nod 2.6s cubic-bezier(.3,0,.25,1) both}
@keyframes zoro-nod{0%{transform:rotate(0)}14%{transform:rotate(-16deg)}31%{transform:rotate(10deg)}47%{transform:rotate(-6deg)}62%{transform:rotate(3.5deg)}76%{transform:rotate(-1.8deg)}89%{transform:rotate(.7deg)}100%{transform:rotate(0)}}
/* 눈 번쩍 — logo-ghost-eyeflash.css의 순서 그대로, 색만 녹색 → 파랑(흰빛 심 + #2E3BFF 글로우) */
@keyframes mn-eye-flash{
  0%{fill:#FF4F1A;transform:scale(1);filter:none}
  10%{fill:#C63A0E;transform:scale(.9);filter:none}
  20%{fill:#C9CDFF;transform:scale(1.32) rotate(9deg);filter:drop-shadow(0 0 8px rgba(46,59,255,1)) drop-shadow(0 0 20px rgba(46,59,255,.8))}
  30%{fill:#8C93FF;transform:scale(1.04);filter:drop-shadow(0 0 4px rgba(46,59,255,.5))}
  42%{fill:#FFFFFF;transform:scale(1.5) rotate(-7deg);filter:drop-shadow(0 0 10px rgba(110,120,255,1)) drop-shadow(0 0 30px rgba(46,59,255,.9)) drop-shadow(0 0 54px rgba(46,59,255,.5))}
  62%{fill:#C9CDFF;transform:scale(1.12);filter:drop-shadow(0 0 6px rgba(46,59,255,.6))}
  100%{fill:#FF4F1A;transform:scale(1);filter:none}
}
.mn-eye{transform-box:fill-box;transform-origin:center}
body.mn-eyeflash .global-logo .mn-eye,body.mn-eyeflash .spark .mn-eye{animation:mn-eye-flash 1.9s cubic-bezier(.36,.07,.19,.97) both}

/* ---------- 전체 메뉴 ---------- */
/* 전체 메뉴: 운영 사이트 트레이드마크 메뉴 형식(검은 커튼 낙하 + 감쇠 스프링 안착, 오른쪽 정렬 얇은 대형 글씨, 한↔영 세로 롤) */
.mn-overlay{position:fixed;inset:0;z-index:55;background:var(--ink);color:#fff;visibility:hidden;transform:translateY(-102%);transition:transform .85s cubic-bezier(.7,0,.3,1),visibility 0s linear .85s;overflow-y:auto;overscroll-behavior:contain;will-change:transform}
body.mn-open .mn-overlay{visibility:visible;transform:translateY(0);transition:transform 1.05s cubic-bezier(.22,1.18,.36,1);transition-timing-function:linear(0,.055 5.4%,.21 10.7%,.451 16.1%,.742 22%,.933 26.4%,1.027 30.9%,1.062 35.4%,1.059 40.3%,1.028 46.9%,1.005 53.9%,.994 62.4%,.998 74.1%,1)}
body.mn-open .nav{color:var(--cream)}
body.mn-open .nav .logo-badge{opacity:0}
.mn-inner{min-height:100%;max-width:1180px;margin:0 auto;padding:110px clamp(20px,4vw,48px) 48px;display:grid;grid-template-columns:auto 1fr;gap:44px;align-content:center}
.mn-menu ul{list-style:none;display:flex;flex-direction:column;align-items:flex-end;gap:clamp(2px,.9vh,10px)}
.mn-menu li{-webkit-clip-path:inset(0 -100vw);clip-path:inset(0 -100vw)}
.mn-menu a{display:block;font:200 clamp(34px,7vh,84px)/1.14 var(--kr);letter-spacing:-.01em;color:#fff;text-align:right;transform:translateY(115%);transition:transform .5s cubic-bezier(.19,1,.22,1)}
body.mn-open .mn-menu a{transform:none;transition:transform .8s cubic-bezier(.19,1,.22,1);transition-delay:calc(.42s + var(--i,0)*.06s)}
.mn-roll{position:relative;display:block;-webkit-clip-path:inset(0 -100vw);clip-path:inset(0 -100vw)}
.mn-kr{display:block;transition:transform .5s cubic-bezier(.19,1,.22,1)}
.mn-en{position:absolute;top:0;bottom:0;right:0;width:max-content;color:var(--orange);text-transform:uppercase;white-space:nowrap;transform:translateY(100%);transition:transform .5s cubic-bezier(.19,1,.22,1)}
.mn-menu a:focus-visible .mn-kr,.mn-menu a.is-hover .mn-kr{transform:translateY(-100%)}
.mn-menu a:focus-visible .mn-en,.mn-menu a.is-hover .mn-en{transform:translateY(0)}
@media (hover:hover){.mn-menu a:hover .mn-kr{transform:translateY(-100%)}.mn-menu a:hover .mn-en{transform:translateY(0)}}
.mn-aside{align-self:end;display:flex;flex-direction:column;gap:26px;opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
body.mn-open .mn-aside{opacity:1;transform:none;transition:opacity .6s ease .6s,transform .6s ease .6s}
.mn-aside dt{font:700 10.5px var(--sans);letter-spacing:.4em;color:var(--orange);text-transform:uppercase;margin-bottom:7px}
.mn-aside dd{margin:0;font:400 15px/1.6 var(--kr);color:#fff}
/* 관리자 진입점: 글자 없이 커튼 왼쪽 아래 구석의 작고 희미한 조로 얼굴(고양이 로고). james 10-04 "나만 알아볼 수 있게", "니 얼굴 하나 박아놔". 누르는 영역 30px */
.mn-admin{position:absolute;left:10px;bottom:10px;width:30px;height:30px;display:grid;place-items:center;color:var(--cream);opacity:.32;transition:opacity .3s}
.mn-admin svg{width:16px;height:20px;overflow:visible}
.mn-admin:hover,.mn-admin.is-flash{opacity:1}
/* 누르면 별 눈이 미세하게 번쩍(james 10-04 "클릭하면 눈 번쩍, 미세하게") — 헤더 로고의 큰 번쩍보다 작고 짧게 */
.mn-admin.is-flash .mn-eye{animation:mn-eye-soft .9s cubic-bezier(.36,.07,.19,.97) both}
@keyframes mn-eye-soft{0%{fill:#FF4F1A;transform:scale(1);filter:none}35%{fill:#E9EBFF;transform:scale(1.22) rotate(-6deg);filter:drop-shadow(0 0 3px rgba(110,120,255,.9))}60%{fill:#C9CDFF;transform:scale(1.06);filter:drop-shadow(0 0 2px rgba(110,120,255,.5))}100%{fill:#FF4F1A;transform:scale(1);filter:none}}
/* 로고 유령 시퀀스(커튼과 함께 증발 → 스르륵 귀환 → 까딱 → 눈 번쩍) */
body.mn-open .global-logo{animation:mn-logo-ghost 2.1s ease both}
@keyframes mn-logo-ghost{0%{opacity:1;filter:none}6%{opacity:0;filter:blur(2px)}55%{opacity:0;filter:blur(7px)}100%{opacity:1;filter:blur(0)}}
body.mn-open .global-logo .logo-face{animation:zoro-nod 2.6s cubic-bezier(.3,0,.25,1) 2.1s both}
body.mn-open .global-logo .mn-eye{animation:mn-eye-flash 1.9s cubic-bezier(.36,.07,.19,.97) 2.3s both}

/* ---------- 01 히어로 ---------- */
.hero{position:relative;height:100svh;min-height:640px;padding:calc(var(--gutter) + 64px) var(--gutter) var(--gutter);display:grid;grid-template-rows:auto 1fr auto}
.hero__top{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;font:500 11px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--mute)}
.hero__top>:nth-child(2){text-align:center}
.hero__top>:last-child{text-align:right}
.hero__top>h1{font:inherit;unicode-bidi:normal}
.hero__bottom{display:grid;gap:clamp(18px,3vw,40px)}
.hero__side{display:flex;justify-content:space-between;align-items:end;gap:24px}
.hero__lead{max-width:360px;font:400 15px/1.7 var(--kr);color:var(--mute)}
.hero__lead strong{display:block;color:var(--fg);font:600 clamp(21px,1.9vw,28px)/1.28 var(--kr);letter-spacing:-.035em;margin-bottom:12px}
.hero__pledge{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;width:fit-content;max-width:100%;margin-top:16px;padding:8px 14px;border-radius:12px;background:rgba(242,240,234,.06);box-shadow:inset 0 0 0 1px var(--faint);font:600 14px/1.3 var(--kr);letter-spacing:-.02em;color:var(--fg)}
.hero__pledge b{font-weight:800;font-size:15.5px;color:var(--orange-2)}
.hero__pledge span::before{content:"·";margin-right:10px;color:var(--mute)}
.scrollcue{display:flex;align-items:center;gap:14px;font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--mute)}
.scrollcue i{position:relative;width:1px;height:48px;background:var(--faint);overflow:hidden}
.scrollcue i::after{content:"";position:absolute;inset:0;background:var(--cream);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
.hero__title{font-family:var(--sans);font-weight:800;font-size:clamp(76px,15.66vw,288px);line-height:.84;letter-spacing:-.06em;white-space:nowrap;margin-left:-.03em}
.hero__word{display:inline-block;overflow:hidden;padding:.02em .06em .08em 0;margin-bottom:-.08em;vertical-align:top}
.hero__word:first-child{font-family:var(--kr);letter-spacing:-.07em}
.char{display:inline-block;will-change:transform}
.spark{width:.36em;height:.36em;margin-left:.06em;vertical-align:top;transform:translateY(.12em);will-change:auto}
.spark svg{width:100%;height:100%;overflow:visible}
.spark .mn-eye{fill:var(--orange)}

/* ---------- 02 광고 + 광고영상 카드 ---------- */
.film{position:relative;padding:clamp(70px,15vh,190px) 0 clamp(110px,12vw,180px);overflow:hidden}
.marquee{position:relative;padding-bottom:clamp(70px,11vw,190px);overflow:hidden}
.marquee__row{display:flex;white-space:nowrap;will-change:transform}
.marquee__group{display:flex;flex:none}
.marquee__item{display:flex;align-items:center;gap:.36em;padding-right:.36em;font:700 clamp(52px,9.4vw,150px)/1.02 var(--sans);letter-spacing:-.045em}
.marquee__item .serif{font-weight:400;letter-spacing:-.02em}
.marquee__item svg{width:.62em;height:.62em;flex:none;overflow:visible}
.marquee__row--outline .marquee__item{color:transparent;-webkit-text-stroke:1.2px rgba(242,240,234,.42)}
.marquee__row--outline .marquee__item .serif{color:var(--orange);-webkit-text-stroke:0}
.marquee__row--outline svg{color:var(--blue-2)}
.film__body{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:clamp(24px,3.2vw,60px);align-items:center;padding:0 var(--gutter)}
.film__side{display:grid;gap:clamp(16px,1.6vw,24px);align-content:center}
.film__title{font:700 clamp(28px,2.7vw,46px)/1.16 var(--kr);letter-spacing:-.045em}
.film__title b{color:var(--orange);font-weight:800}
.film__lead{max-width:460px;font:400 clamp(14px,1.05vw,16px)/1.7 var(--kr);color:var(--mute)}
.film__lead strong{font-weight:700;color:var(--fg)}
.film__frame{position:relative;margin:0;aspect-ratio:16/9;border-radius:clamp(16px,1.8vw,28px);overflow:hidden;background:#000;box-shadow:0 60px 120px -40px rgba(0,0,0,.9),0 0 0 1px var(--faint);transform-origin:50% 30%}
.film__frame video{width:100%;height:100%;object-fit:cover}
.film__tag{position:absolute;top:16px;left:16px;color:#fff;background:rgba(15,16,20,.5);padding:6px 10px;border-radius:999px;backdrop-filter:blur(8px)}
.film__open{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:flex-end;padding:16px;text-align:left}
.film__play{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 18px 0 6px;border-radius:999px;background:rgba(242,240,234,.92);color:var(--ink-2);font:600 13px/1 var(--kr);transition:background .3s,color .3s,transform .5s var(--ease)}
.film__play i{position:relative;width:30px;height:30px;border-radius:50%;background:var(--orange);transition:background .3s}
.film__play i::after{content:"";position:absolute;left:54%;top:50%;translate:-40% -50%;border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;transition:border-color .3s}
.film__open:hover .film__play{background:var(--orange);color:#fff;transform:scale(1.04)}
.film__open:hover .film__play i{background:#fff}
.film__open:hover .film__play i::after{border-left-color:var(--orange)}
.adcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.2vw,18px);margin-top:clamp(4px,.8vw,12px)}
.adcards__label{grid-column:1/-1;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.adcard{display:grid;gap:12px;text-align:left;color:var(--fg)}
.adcard__thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--ink-3);box-shadow:0 0 0 1px var(--faint);transition:box-shadow .5s var(--ease)}
.adcard__thumb img,.adcard__thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),opacity .4s}
.adcard__thumb video{opacity:0}
.adcard.is-hover .adcard__thumb video{opacity:1}
.adcard:hover .adcard__thumb img,.adcard:hover .adcard__thumb video{transform:scale(1.05)}
.adcard:hover .adcard__thumb{box-shadow:0 0 0 1px rgba(255,79,26,.7),0 20px 40px -20px rgba(255,79,26,.45)}
.adcard__play{position:absolute;left:12px;bottom:12px;width:40px;height:40px;border-radius:50%;background:var(--cream);transition:background .3s,transform .5s var(--ease)}
.adcard__play::after{content:"";position:absolute;left:52%;top:50%;translate:-40% -50%;border-left:11px solid var(--ink-2);border-top:7px solid transparent;border-bottom:7px solid transparent}
.adcard:hover .adcard__play{background:var(--orange);transform:scale(1.08)}
.adcard:hover .adcard__play::after{border-left-color:#fff}
.adcard__dur{position:absolute;right:10px;top:10px;color:#fff;background:rgba(15,16,20,.55);padding:4px 8px;border-radius:99px;font-size:10px}
.adcard__text{display:grid;gap:4px}
.adcard__text b{color:var(--orange);font-size:10.5px}
.adcard__text span{font:600 15px/1.35 var(--kr);letter-spacing:-.025em}

/* ---------- 라이트박스 ---------- */
.lb{position:fixed;inset:0;z-index:120;display:grid;place-items:center}
.lb[hidden]{display:none}
.lb__backdrop{position:absolute;inset:0;background:rgba(10,10,14,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.lb__panel{position:relative;width:min(70vw,calc((100svh - 150px) * 16 / 9));display:grid;gap:12px}
.lb__head{display:flex;justify-content:space-between;align-items:center;color:var(--cream)}
.lb__close{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;background:var(--cream);color:var(--ink-2);font:600 13px/1 var(--kr);transition:background .3s,color .3s}
.lb__close:hover{background:var(--orange);color:#fff}
.lb__frame{aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 50px 120px -30px rgba(0,0,0,.8)}
.lb__frame video{width:100%;height:100%;object-fit:contain;background:#000}

/* ---------- 03 선언(어두움, 레퍼런스 Manifesto와 같은 색) ---------- */
.manifesto{position:relative;z-index:2;background:var(--ink);color:var(--fg);padding:clamp(120px,15vw,230px) var(--gutter) clamp(100px,12vw,180px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:clamp(60px,8vw,120px)}
.manifesto .eyebrow{grid-column:1/3;align-self:start;padding-top:1.2em}
.manifesto__text{grid-column:3/-1;font:650 clamp(30px,4.4vw,72px)/1.18 var(--kr);letter-spacing:-.045em;color:var(--fg)}
.manifesto__text .w{display:inline-block;opacity:.12}
.manifesto .pt{color:var(--orange)}
.manifesto__text .grad{background:linear-gradient(100deg,var(--blue-2),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em}
.principles{grid-column:3/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);border-top:1px solid var(--faint);padding-top:28px}
.principles li{display:grid;gap:14px;align-content:start}
.principles b{font:500 11px var(--mono);letter-spacing:.14em;color:var(--mute)}
.principles h3{font:700 clamp(24px,2.1vw,32px)/1.05 var(--sans);letter-spacing:-.04em;color:var(--fg)}
.principles p{font:400 15px/1.7 var(--kr);color:var(--mute);max-width:30ch}

/* ---------- 핵심 두 문장: 상담원의 하루 막대(통화·링타임·기록). 기본은 두 문장과 막대(통화가 채운 상태)를 차례로 두는 정적 배치이고,
   움직임 경로의 main.js가 .core--scene을 붙일 때만 화면을 고정하고 링타임이 불어났다가 통화가 막대를 채우는 장면이 된다 ---------- */
.core{position:relative;z-index:2;background:var(--paper);color:var(--ink);text-align:left;word-break:keep-all}
.core__pin{padding:clamp(56px,6vw,96px) var(--gutter)}
.core--scene .core__pin{min-height:100vh;display:flex;align-items:center;padding-block:clamp(48px,5vw,72px)}
.core__inner{width:min(100%,1200px);margin-inline:auto}
.core__lines{display:grid;gap:clamp(36px,4vw,60px)}
.core--scene .core__lines{gap:0}
.core--scene .core__line{grid-area:1/1}
.core__line,.core__day{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);column-gap:clamp(24px,4vw,64px);align-items:start}
.core__body,.core__daybox{grid-column:2}
.core__tag{display:flex;align-items:center;gap:10px;padding-top:clamp(10px,1.4vw,24px);font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.core__tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);flex:none}
.core__line--call .core__tag::before{background:var(--call)}
.core__title{font:700 clamp(36px,4.6vw,70px)/1.12 var(--kr);letter-spacing:-.05em;text-wrap:balance}
.core__title .w{display:inline-block}
.core__title .w--keep{white-space:nowrap}
.core__mark{position:relative;font-style:normal;white-space:nowrap;color:var(--orange)}
.core__line--call .core__mark{color:var(--call)}
.core__mark::after{content:"";position:absolute;left:0;right:0;bottom:-.02em;height:.07em;border-radius:1px;background:currentColor;opacity:.32}
.core__support{margin-top:clamp(18px,1.8vw,28px);max-width:34em;font:400 clamp(16px,1.4vw,21px)/1.7 var(--kr);letter-spacing:-.02em;color:var(--ink-mute)}
.core__day{margin-top:clamp(32px,4vw,56px)}
/* 하루 막대 = 채움 게이지. 칸 모양·넓이는 고정, 칸마다 [0,--a) 초록 · [--a,--b) 복리색 · [--b,1] 초록.
   main.js가 막대 전체에서 움직이는 경계 하나를 칸별 --a·--b(0~1)로 나눠 준다(경계가 칸 중간에 설 수 있다). 바탕값(0,0)은 끝 상태 = 초록 꽉 참 */
.core__bar{--w-call:3;--w-ring:.25;--w-rec:.35;display:flex;gap:3px;height:clamp(12px,1.3vw,18px)}
.seg{display:block;min-width:0;border-radius:3px;background:linear-gradient(90deg,var(--call) calc(var(--a,0) * 100%),var(--orange) calc(var(--a,0) * 100%) calc(var(--b,0) * 100%),var(--call) calc(var(--b,0) * 100%))}
.seg--call{flex:var(--w-call) 1 0}
.seg--ring{flex:var(--w-ring) 1 0}
.seg--rec{flex:var(--w-rec) 1 0}
.core__legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:16px;font:500 13px/1.4 var(--kr);color:var(--ink-mute)}
.k::before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:2px;vertical-align:-1px}
.k--call::before{background:var(--call)}
.k--ring::before{background:var(--orange)}
.core__daylabel{margin-left:auto;font:500 12px/1.4 var(--kr);letter-spacing:-.01em}
@media (max-width:720px){
  .core__line,.core__day{grid-template-columns:1fr}
  .core__body,.core__daybox{grid-column:1}
  .core__tag{padding-top:0;margin-bottom:16px}
  .core__daylabel{margin-left:0}
}

/* ---------- 04 AI비서 + 고객관리CRM(밝음, 고정) — 짜임은 옛 '작동 방식' 그대로(왼쪽 단계, 오른쪽 폰), 단계마다 한 장면 ----------
   바탕 상태(이 파일의 값)가 '각 장면의 끝'이다. main.js 타임라인이 시작 상태를 깔고 스크롤로 끝까지 데려간다.
   그래서 스크립트 실패에서도 내용이 다 보인다. 초록(--call)은 '통화'에만 쓴다(밝은 바탕, 빛 번짐 없음) */
.flow{position:relative;z-index:2;background:var(--paper);color:var(--ink)}
.flow__pin{position:relative;height:100svh;min-height:700px;padding:calc(var(--gutter) + 70px) var(--gutter) var(--gutter);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:var(--gutter);overflow:hidden}
.flow__copy{display:flex;flex-direction:column;justify-content:space-between;min-height:0}
.flow__title{font:700 clamp(40px,5vw,86px)/1 var(--kr);letter-spacing:-.06em;margin-top:22px}
.flow .pt{color:var(--orange)}
/* 상담원의 하루: 회색 '상담기록' 칸이 장면마다 초록 '통화' 칸으로 바뀌고, 끝에 한 줄로 맺는다 */
.day{display:grid;grid-template-columns:minmax(0,1fr);row-gap:10px;max-width:440px;margin:clamp(20px,3.4vh,36px) 0 0}
.day__top,.day__end{grid-row:1;grid-column:1;align-self:end}
.day__top{display:flex;justify-content:space-between;align-items:center;gap:12px;font:700 13px/1.3 var(--kr);letter-spacing:-.02em;color:var(--ink-2);opacity:0}
.day__key{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:var(--ink-mute)}
.day__k{width:9px;height:9px;border-radius:3px;margin-left:8px}
.day__k--call{background:var(--call)}
.day__k--type{background:rgba(22,23,28,.16)}
.day__end{font:700 clamp(16px,1.35vw,20px)/1.3 var(--kr);letter-spacing:-.035em;color:var(--ink-2)}
.day__end b{font-weight:800;color:var(--call)}
.day__bar{grid-row:2;position:relative;display:flex;gap:3px;height:12px}
.day__bar>i{position:relative;flex:var(--g) 1 0;border-radius:3px;overflow:hidden}
.day__c{background:var(--call)}
.day__t{background:rgba(22,23,28,.13)}
.day__t b{position:absolute;inset:0;background:var(--call);transform-origin:0 50%}
.day__full{position:absolute;inset:0;border-radius:4px;background:var(--call)}
.steps{border-bottom:1px solid var(--ink-faint)}
.step{display:grid;grid-template-columns:clamp(48px,5vw,76px) 1fr;padding:clamp(14px,2vh,24px) 0;border-top:1px solid var(--ink-faint);opacity:.28;transition:opacity .6s var(--ease)}
.step.is-active{opacity:1}
.step__n{font:500 12px/2.4 var(--mono);letter-spacing:.1em}
.step h3{font:700 clamp(28px,2.9vw,46px)/1 var(--sans);letter-spacing:-.045em;display:flex;flex-wrap:wrap;align-items:baseline;gap:.4em}
.step h3 small{font:500 clamp(14px,1.1vw,17px) var(--kr);letter-spacing:-.02em;color:var(--ink-mute)}
.step p{font:400 15px/1.65 var(--kr);color:var(--ink-mute);max-width:44ch;display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease),margin .7s var(--ease)}
.step p>span{overflow:hidden}
.step.is-active p{grid-template-rows:1fr;margin-top:10px}
/* 단계의 큰 한 줄(대표 시점). 그 아래 작은 글은 기능 근거 */
.step__lead{display:block;margin-bottom:4px;font:700 clamp(17px,1.35vw,20px)/1.4 var(--kr);letter-spacing:-.035em;color:var(--ink-2)}
.flow__stage{position:relative;display:grid;place-items:center;perspective:1500px;perspective-origin:50% 40%;min-height:0}
.flow__stage::before{content:"";position:absolute;width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(46,59,255,.24),rgba(255,79,26,.16) 55%,transparent);filter:blur(22px)}
.flow__ring{position:absolute;width:min(620px,92%);aspect-ratio:1;border-radius:50%;border:1px dashed rgba(22,23,28,.16);animation:spin 60s linear infinite}
.flow__ring:nth-of-type(2){width:min(460px,70%);animation-duration:40s;animation-direction:reverse;border-style:solid;border-color:rgba(22,23,28,.08)}
@keyframes spin{to{transform:rotate(360deg)}}
.flow__shadow{position:absolute;left:50%;bottom:4%;width:42%;height:46px;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(20,22,60,.32),transparent);filter:blur(8px);pointer-events:none}
/* 폰: 뒤로 쌓은 얇은 판(측면 두께) + 티타늄 테두리·검은 베젤 앞면(CSS) + 그 안의 예시 화면. --ph가 폰 키이고 화면 글자 크기도 여기에 묶인다 */
.phone{--ph:min(620px,70svh);--h:620px;--d:30px;position:relative;z-index:1;height:var(--ph);aspect-ratio:1350/2760;transform-style:preserve-3d;will-change:transform}
.phone__body{position:absolute;left:2.15%;right:2.15%;top:.9%;bottom:.94%;border-radius:20.5%/9.8%;transform-style:preserve-3d}
.slice{position:absolute;inset:0;border-radius:inherit;transform:translateZ(calc(var(--d) * var(--t) * -1));
  background:linear-gradient(rgba(255,255,255,var(--hl)),rgba(255,255,255,var(--hl))),linear-gradient(rgba(12,10,8,var(--sh)),rgba(12,10,8,var(--sh))),linear-gradient(90deg,#8f8a82,#cbc6be 22%,#a9a49c 50%,#cbc6be 78%,#8f8a82)}
.phone__front{position:absolute;inset:0;transform:translateZ(1px);backface-visibility:hidden;border-radius:19.5%/9.55%;border:calc(var(--ph) * .0066) solid transparent;
  background:linear-gradient(#060608,#060608) padding-box,linear-gradient(140deg,#ebe6de,#a29d95 24%,#d9d4cc 48%,#8e8981 74%,#d2cdc5) border-box}
.phone__screen{position:absolute;left:4.2%;right:4.2%;top:2%;bottom:2%;border-radius:13.6%/6.45%;overflow:hidden;background:#F2F3F5;font-size:calc(var(--ph) * .023);line-height:1.35}
.phone__island{position:absolute;z-index:3;left:50%;top:3.3%;width:30%;height:3.4%;translate:-50% 0;border-radius:99px;background:#060608}
/* 뒷면: 레퍼런스처럼 뒷면부터 돌아 들어오도록 티타늄 판 + 카메라 + 가운데 고양이 로고 */
.phone__back{--cat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='22 14 66 82'%3E%3Cpath d='M 81 44 A 30 30 0 1 1 29 44 L 28.5 19 L 44.5 30.5 A 30 30 0 0 1 65.5 30.5 L 81.5 19 L 81 44 Z' fill='none' stroke='%23F2F0EA' stroke-width='8' stroke-linejoin='round'/%3E%3Ccircle cx='44.5' cy='58' r='4.5' fill='%23F2F0EA'/%3E%3Cpath d='M 65 48.5 C 66.4 55.5 68.5 57.6 75.5 59 C 68.5 60.4 66.4 62.5 65 69.5 C 63.6 62.5 61.5 60.4 54.5 59 C 61.5 57.6 63.6 55.5 65 48.5 Z' fill='%23FF4F1A'/%3E%3C/svg%3E");position:absolute;left:2.15%;right:2.15%;top:.9%;bottom:.94%;border-radius:20.5%/9.8%;backface-visibility:hidden;transform:translateZ(calc(var(--d) * -1 - 1px)) rotateY(180deg);background:radial-gradient(130% 75% at 22% 6%,#e6e2dc,#bab5ae 48%,#97928b);box-shadow:inset 0 0 0 calc(var(--h) * .0045) #8e8982}
.phone__back::after{content:"";position:absolute;left:50%;top:52%;width:15%;aspect-ratio:66/82;translate:-50% -50%;background:rgba(78,74,68,.3);-webkit-mask:var(--cat) center/contain no-repeat;mask:var(--cat) center/contain no-repeat}
.cam{position:absolute;top:3%;left:5.5%;width:48%;aspect-ratio:1;border-radius:27%;background:linear-gradient(150deg,#d9d4cd,#a39e97);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 3px 10px rgba(0,0,0,.22)}
.cam i{position:absolute;border-radius:50%}
.cam .lens{width:41%;aspect-ratio:1;background:radial-gradient(circle,#06070a 0 30%,#1c2440 36%,#08090c 48%,#2a2926 56%,#78736c 64%,#34322e 71%,#8f8a83 76%);box-shadow:0 2px 5px rgba(0,0,0,.45)}
.cam .lens::after{content:"";position:absolute;left:30%;top:26%;width:16%;height:16%;border-radius:50%;background:rgba(170,190,255,.55);filter:blur(1px)}
.cam .l1{top:6%;left:6%}.cam .l2{top:53%;left:6%}.cam .l3{top:29.5%;left:53%}
.cam .cam__flash{top:9%;right:11%;width:13%;aspect-ratio:1;background:radial-gradient(circle,#fff6e0,#d8cfb8 60%,#9d978d)}
.cam .lidar{bottom:9%;right:13%;width:11%;aspect-ratio:1;background:radial-gradient(circle,#222 0 40%,#555 60%,#888)}
.phone__img{position:absolute;inset:0;opacity:0;isolation:isolate}
.phone__img.is-on{opacity:1}
.phone__glare{position:absolute;z-index:4;left:4.2%;top:2%;width:91.6%;height:96%;border-radius:13.6%/6.45%;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(112deg,transparent 34%,rgba(255,255,255,.16) 46%,rgba(255,255,255,.03) 54%,transparent 64%);background-size:260% 100%;background-position:calc(50% + var(--gl,0) * 1.1%) 0}

/* 예시 화면 공통(앱과 같은 결: 옅은 회색 바탕, 흰 카드, 얇은 선, 남색 강조). 크기는 모두 em이라 폰 키를 따라 같이 줄고 는다 */
.ps{display:flex;flex-direction:column;padding:3.25em 1.1em 1.2em;background:#F2F3F5;color:#16171C;font-family:var(--kr);letter-spacing:-.025em;text-align:left}
.ps__bar{position:absolute;left:0;right:0;top:0;height:3.2em;display:flex;align-items:center;justify-content:space-between;padding:.3em 1.75em 0 2.15em}
.ps__bar b{font:650 .82em/1 var(--sans);letter-spacing:0}
.ps__sig{display:flex;align-items:flex-end;gap:.12em;height:.62em}
.ps__sig i{width:.2em;border-radius:.06em;background:currentColor}
.ps__sig i:nth-child(1){height:35%}.ps__sig i:nth-child(2){height:55%}.ps__sig i:nth-child(3){height:78%}.ps__sig i:nth-child(4){height:100%}
.ps__bat{align-self:center;width:1.45em;height:.72em;margin-left:.35em;padding:.1em;border-radius:.24em;box-shadow:inset 0 0 0 .09em currentColor;background:linear-gradient(90deg,currentColor 72%,transparent 72%) content-box}
.ps__cap{display:none}
.ps__head{display:flex;align-items:center;gap:.45em;margin-top:.5em;font:800 1.12em/1.2 var(--kr);letter-spacing:-.04em}
.ps__back{font-weight:400;color:rgba(22,23,28,.4)}
.ps__head .ps__ai,.ps__me{margin-left:auto}
.ps__me{padding:.5em .75em;border-radius:99px;background:rgba(74,106,147,.12);color:#4A6A93;font:700 .6em/1 var(--kr);letter-spacing:-.01em}
.ps .aibadge{height:1.8em;padding:0 .5em;border-radius:.4em;background:var(--orange);color:#fff;font-size:.62em}
.ps__sub{margin-top:.35em;font:500 .68em/1.3 var(--kr);color:rgba(22,23,28,.55)}
.ps__label{margin-top:1em;font:700 .64em/1.2 var(--kr);letter-spacing:-.01em;color:rgba(22,23,28,.5)}
.ps__panel,.ps__rows,.ps__card{border-radius:1em;background:#fff;box-shadow:0 0 0 1px rgba(22,23,28,.06),0 .7em 1.4em -1.1em rgba(22,23,28,.35)}
/* 01 통화 중 */
.ps--call{align-items:center;text-align:center;background:linear-gradient(180deg,#E6F4EC,#F3F3EF 56%,#F2F3F5)}
.ps__live{display:inline-flex;align-items:center;gap:.5em;margin-top:.9em;padding:.55em .9em;border-radius:99px;background:#fff;font:700 .72em/1 var(--kr);color:var(--call);box-shadow:0 .3em .8em -.4em rgba(22,23,28,.3)}
.ps__live span{font:500 1em/1 var(--mono);letter-spacing:.02em;color:rgba(22,23,28,.5)}
.ps__rec{width:.6em;height:.6em;border-radius:50%;background:var(--orange);animation:rec 1.4s ease-in-out infinite}
@keyframes rec{50%{opacity:.25}}
.ps__avatar{display:grid;place-items:center;flex:none;width:2.6em;height:2.6em;margin-top:.8em;border-radius:50%;background:linear-gradient(150deg,#C9D0FF,#8C93FF);color:#fff;font:800 1.75em/1 var(--kr)}
.ps__name{margin-top:.55em;font:800 1.3em/1.2 var(--kr);letter-spacing:-.045em}
.ps__num{margin-top:.4em;font:500 .76em/1 var(--mono);letter-spacing:.02em;color:rgba(22,23,28,.5)}
.ps__wave{display:flex;align-items:center;gap:.22em;width:12.5em;height:4.4em;margin-top:2.6em}
.ps__wave i{flex:1;height:100%;border-radius:.3em;background:var(--call);transform:scaleY(var(--s));animation:pswave 1.05s ease-in-out var(--t) infinite alternate}
@keyframes pswave{from{transform:scaleY(calc(var(--s) * .22))}to{transform:scaleY(var(--s))}}
.ps__keys{display:flex;justify-content:space-between;width:14.4em;margin-top:auto}
.ps__keys span{display:grid;justify-items:center;gap:.5em;font:600 .6em/1 var(--kr);color:rgba(22,23,28,.6)}
.ps__keys i{display:grid;place-items:center;width:5.5em;height:5.5em;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(22,23,28,.07)}
.ps__keys svg{width:2.4em;height:2.4em;fill:none;stroke:#16171C;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ps__keys .is-on{color:var(--orange)}
.ps__keys .is-on i{background:rgba(255,79,26,.1);box-shadow:0 0 0 1px rgba(255,79,26,.3)}
.ps__keys .is-on svg{fill:var(--orange);stroke:none}
.ps__end{display:grid;place-items:center;width:3.5em;height:3.5em;margin-top:1.3em;border-radius:50%;background:var(--orange);box-shadow:0 .6em 1.2em -.6em rgba(255,79,26,.7)}
.ps__end svg{width:1.55em;height:1.55em;fill:#fff;transform:rotate(135deg)}
/* 02 AI 상담기록: 값이 한 줄씩 타자 치듯 써진다(가리개가 오른쪽으로 비켜나며 커서가 따라감). 끝 상태는 가리개 없음 */
.ps__ai{position:relative;animation:aibeat 1.8s var(--ease) infinite}
.ps__ai::after{content:"";position:absolute;inset:-.35em;border-radius:.7em;border:1.5px solid var(--orange);opacity:0;animation:aiping 1.8s var(--ease) infinite}
@keyframes aibeat{0%,30%,100%{transform:scale(1)}12%{transform:scale(1.12)}}
@keyframes aiping{0%{opacity:.75;transform:scale(.9)}60%,100%{opacity:0;transform:scale(1.55)}}
.ps__rows{display:grid;margin-top:.8em;padding:.1em .85em}
.ps__rows div{display:grid;grid-template-columns:4.5em minmax(0,1fr);align-items:center;gap:.3em;padding:.7em 0;font-size:.76em}
.ps__rows div+div{border-top:1px solid rgba(22,23,28,.07)}
.ps__rows dt{font-weight:600;color:rgba(22,23,28,.5)}
.ps__rows dd{min-width:0;font-weight:700}
.tw{position:relative;display:inline-block;max-width:100%;overflow:hidden;white-space:nowrap;vertical-align:top}
.tw__mask{position:absolute;top:0;bottom:0;left:0;width:calc(100% + 3px);background:#fff;opacity:0}
.tw__mask::before{content:"";position:absolute;left:0;top:.1em;bottom:.1em;width:2px;background:var(--orange);animation:blink 1s steps(1) infinite}
.ps__done{display:flex;align-items:center;gap:.5em;margin-top:.8em;font:700 .7em/1.2 var(--kr)}
.ps__done b{display:grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:var(--call);color:#fff;font-size:.9em}
.ps__done em{margin-left:auto;padding:.6em 1.2em;border-radius:99px;background:#4A6A93;color:#fff}
.ps__script{display:grid;gap:.45em;margin-top:.5em;padding:.8em .85em;border-radius:1em;background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px rgba(22,23,28,.06)}
.ps__script p{font:500 .66em/1.45 var(--kr);color:rgba(22,23,28,.72)}
.ps__script b{margin-right:.5em;font-weight:700;color:rgba(22,23,28,.42)}
.ps__play{display:flex;align-items:center;gap:.6em;margin-top:.5em;padding:.7em .85em;border-radius:1em;background:#fff;box-shadow:0 0 0 1px rgba(22,23,28,.06)}
.ps__play i{display:grid;place-items:center;flex:none;width:1.9em;height:1.9em;border-radius:50%;background:#16171C;color:#fff;font-size:.62em;font-style:normal}
.ps__play b{position:relative;flex:1;height:.28em;border-radius:.2em;background:rgba(22,23,28,.1);overflow:hidden}
.ps__play b::after{content:"";position:absolute;inset:0 62% 0 0;background:var(--call)}
.ps__play em{font:500 .62em/1 var(--mono);letter-spacing:0;color:rgba(22,23,28,.5)}
/* 03 고객 카드: 요약이 날아 들어와 통화 기록 첫 줄이 되고, 결과 → 다음 약속 → 담당(도장) 순서로 채워진다 */
.ps__card{margin-top:.75em;padding:.85em .9em .4em}
.ps__cardhead{display:flex;align-items:center;gap:.6em}
.ps__cardhead .ps__avatar{width:2.2em;height:2.2em;margin:0;font-size:1.05em}
.ps__cardhead b{display:block;font:800 .95em/1.2 var(--kr);letter-spacing:-.04em}
.ps__cardhead div span{font:500 .64em/1 var(--mono);letter-spacing:.02em;color:rgba(22,23,28,.5)}
.ps__fields{display:grid;margin-top:.55em}
.ps__fields div{display:grid;grid-template-columns:5em minmax(0,1fr);align-items:center;min-height:2.65em;border-top:1px solid rgba(22,23,28,.07);font-size:.74em}
.ps__fields dt{font-weight:600;color:rgba(22,23,28,.5)}
.ps__fields dd{font-weight:700}
.ps__badge{display:inline-block;padding:.38em .75em;border-radius:99px;background:var(--orange);color:#fff;font-weight:700}
.ps__f2{display:inline-block}
.ps__stamp{display:inline-block;padding:.28em .6em;border:.16em solid #E0461A;border-radius:.45em;color:#E0461A;background:rgba(255,79,26,.06);font-weight:800;letter-spacing:-.02em;transform:rotate(-5deg)}
.ps__log{display:grid;gap:.4em;margin-top:.45em}
.ps__log li{display:grid;grid-template-columns:2.9em auto minmax(0,1fr);align-items:center;gap:.55em;padding:.62em .7em;border-radius:.8em;background:#fff;box-shadow:0 0 0 1px rgba(22,23,28,.06);font-size:.68em}
.ps__log span{font:500 .95em/1 var(--mono);letter-spacing:0;color:rgba(22,23,28,.5)}
.ps__log b{padding:.28em .5em;border-radius:.4em;background:rgba(22,23,28,.07);font-weight:700}
.ps__log i{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-style:normal;font-weight:600}
.ps__log .ps__new{position:relative;z-index:2;box-shadow:0 0 0 1.5px rgba(255,79,26,.55)}
.ps__memo{margin-top:.45em;padding:.6em .75em;border-radius:.8em;background:#FFF7E8;font:500 .66em/1.45 var(--kr);color:rgba(22,23,28,.75)}
.ps__res{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.35em;margin-top:.45em}
.ps__res span{display:grid;place-items:center;height:2.7em;border-radius:.7em;background:#fff;box-shadow:0 0 0 1px rgba(22,23,28,.08);font:700 .64em/1 var(--kr);color:rgba(22,23,28,.6)}
.ps__res .is-on{background:var(--orange);color:#fff;box-shadow:none}
.ps__fly{position:absolute;z-index:3;left:1.1em;right:1.1em;top:7.1em;height:9.8em;padding:.95em 1em;display:grid;align-content:start;gap:.75em;border-radius:1em;background:#fff;box-shadow:0 1.4em 2.6em -1em rgba(22,23,28,.45),0 0 0 1px rgba(22,23,28,.06);opacity:0}
.ps__fly p{display:flex;align-items:center;gap:.5em;font:800 .82em/1 var(--kr)}
.ps__fly i{height:.6em;border-radius:.3em;background:rgba(22,23,28,.1)}
.ps__fly i:nth-of-type(2){width:78%}.ps__fly i:nth-of-type(3){width:58%}
/* 04 TODAY: 오늘 약속이 하나씩 올라오고, 방금 잡힌 약속이 표시된다 */
.ps__tabs{display:flex;gap:.35em;margin-top:.8em}
.ps__tabs span{padding:.6em .85em;border-radius:.55em;background:#fff;box-shadow:0 0 0 1px rgba(22,23,28,.1);font:700 .62em/1 var(--kr);color:rgba(22,23,28,.6)}
.ps__tabs .is-on{background:#4A6A93;color:#fff;box-shadow:none}
.ps__today,.ps__mine{display:grid;gap:.4em;margin-top:.5em}
.ps__today li{position:relative;display:grid;grid-template-columns:3.1em minmax(0,1fr) auto;align-items:center;gap:.5em;padding:.72em .8em;border-radius:.85em;background:#fff;box-shadow:0 0 0 1px rgba(22,23,28,.06);font-size:.72em;overflow:hidden}
.ps__today li>span{font:600 .92em/1 var(--mono);letter-spacing:0;color:#4A6A93}
.ps__today b{display:block;font-weight:800}
.ps__today div i{display:block;margin-top:.25em;font-style:normal;font-size:.86em;font-weight:500;color:rgba(22,23,28,.55)}
.ps__today .is-hl{background:#FFF3EE;box-shadow:0 0 0 1.5px rgba(255,79,26,.55)}
.ps__mark{position:absolute;left:0;top:0;bottom:0;width:.32em;background:var(--orange);transform-origin:50% 0}
.ps__mine li{display:flex;align-items:center;justify-content:space-between;padding:.66em .8em;border-radius:.85em;background:rgba(255,255,255,.62);box-shadow:0 0 0 1px rgba(22,23,28,.05);font-size:.7em}
.ps__mine b{font-weight:700;color:rgba(22,23,28,.72)}
.st{padding:.32em .55em;border-radius:.45em;font-style:normal;font-weight:700;font-size:.84em;box-shadow:inset 0 0 0 1px currentColor}
.st--int{color:#4A6A93}
.st--hot{color:#E0461A}
.st--mgr{color:rgba(22,23,28,.55)}

/* 떠 있는 칩: 장면마다 한두 개 */
.chip{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:12px 18px 12px 12px;border-radius:999px;background:#fff;color:var(--ink-2);font:600 14px/1 var(--kr);letter-spacing:-.02em;box-shadow:0 20px 40px -18px rgba(22,23,28,.35),0 0 0 1px rgba(22,23,28,.05);white-space:nowrap;opacity:0}
.chip small{font:500 12px var(--kr);color:var(--ink-mute);margin-left:2px}
.chip__dot{width:10px;height:10px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(255,79,26,.2);margin-left:6px;animation:pulse 1.6s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,79,26,.45)}100%{box-shadow:0 0 0 10px rgba(255,79,26,0)}}
.chip__dot--call{background:var(--call);animation-name:pulse-call}
@keyframes pulse-call{0%{box-shadow:0 0 0 0 rgba(18,162,107,.45)}100%{box-shadow:0 0 0 10px rgba(18,162,107,0)}}
.chip__ico{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff}
.chip__ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chip__ico--blue{background:var(--blue)}
.chip__ico--orange{background:var(--orange)}
.chip__ico--ink{background:var(--ink-2)}
.aibadge{display:inline-grid;place-items:center;height:20px;padding:0 7px;border-radius:6px;background:var(--orange);color:#fff;font:600 10.5px/1 var(--mono);letter-spacing:.06em;flex:none}
/* 01: '통화 뒤 상담기록 작성 시간' 카드에 줄이 그어지고 흐려지며 사라진다 */
.chip--key{top:15%;left:0;color:var(--ink-mute)}
.key__caret{width:2px;height:1.05em;margin-left:-6px;background:var(--orange);animation:blink 1s steps(1) infinite}
.key__strike{position:absolute;left:46px;right:14px;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:var(--orange);transform-origin:0 50%}
.chip--a{top:31%;right:-2%}
.chip--b{top:46%;left:-2%}
.chip--c{top:22%;right:-2%}
.chip--d{bottom:17%;left:2%;padding:12px 18px;background:var(--ink-2);color:var(--cream)}
.chip--e{top:34%;right:0}
.chip--f{top:12%;left:-3%;padding:10px 18px 10px 10px;border-radius:18px}
.chip__txt{display:grid;gap:5px}
.chip--f small{margin:0;font-size:11.5px}
.chip--g{bottom:6%;right:4%;background:var(--ink-2);color:var(--cream)}

/* ---------- 05 기능(어두움, 가로) ---------- */
.features{position:relative;z-index:2;background:var(--ink);overflow:hidden}
.features__pin{position:relative;height:100svh;min-height:680px;display:flex;align-items:center}
.features__track{display:flex;align-items:stretch;gap:clamp(14px,1.6vw,24px);padding:0 var(--gutter);will-change:transform}
.features__intro{flex:0 0 min(600px,84vw);display:flex;flex-direction:column;justify-content:space-between;padding:8px clamp(0px,3vw,48px) 8px 0}
.features__intro h2{font:800 clamp(52px,6.8vw,116px)/1 var(--kr);letter-spacing:-.065em;margin-top:24px}
.features__intro h2 .pt{color:var(--orange)}
.features__intro p{font:400 16px/1.7 var(--kr);color:var(--mute);max-width:38ch}
.features__hint{display:flex;align-items:center;gap:12px;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.features__hint i{width:48px;height:1px;background:var(--mute);position:relative}
.features__hint i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid var(--mute);border-right:1px solid var(--mute);transform:rotate(45deg)}
.features__bar{position:absolute;left:var(--gutter);right:var(--gutter);bottom:calc(var(--gutter) + 4px);height:1px;background:var(--faint)}
.features__bar span{position:absolute;inset:0;background:var(--cream);transform-origin:0 50%;transform:scaleX(0)}
.fslot{flex:0 0 min(480px,84vw);display:flex}
.features__track::after{content:"";flex:0 0 max(0px,calc(16vw - var(--gutter)))}
.fcard{--c:var(--orange);position:relative;flex:1;height:min(700px,76svh);border-radius:28px;padding:clamp(22px,2.2vw,32px);display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;
  background:linear-gradient(180deg,var(--ink-3),var(--ink-2));border:1px solid var(--faint);transform-style:preserve-3d;transition:border-color .5s}
/* 기능 카드 테두리: 크림 1px 실선(james 10-10 "나머지 카드들은 흰색 테두리"). 출시 카드는 아래 .fcard--launch의 파랑→크림 그라데이션 선 */
.fcard,.fcard:hover{border-color:#F2F0EA}
.fcard::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--c) 22%,transparent),transparent 45%)}
.fcard:hover::before{opacity:1}
.fcard__top{display:flex;flex-wrap:wrap;gap:8px 12px;justify-content:space-between;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.fcard__top b{color:var(--c);font-weight:500}
.fcard__visual{position:relative;display:grid;place-items:center;min-height:0}
.fcard h3{font:700 clamp(34px,3.1vw,52px)/.95 var(--sans);letter-spacing:-.05em}
.fcard h3 .pt{color:var(--c)}
.fcard h4{font:600 17px/1.4 var(--kr);letter-spacing:-.025em;margin-top:14px}
.fcard p{font:400 14.5px/1.65 var(--kr);color:var(--mute);margin-top:8px;max-width:42ch}
.fcard--2{--c:var(--blue-2)}
.fcard--3{--c:var(--cream)}
.fcard--4{--c:var(--orange-2)}
.fcard--5{--c:var(--blue-2)}
/* v1 DB 정리 */
.v-clean{width:min(320px,90%);display:grid;gap:7px}
.v-clean li{position:relative;display:flex;justify-content:space-between;align-items:center;height:40px;padding:0 14px;border-radius:12px;background:var(--ink-4);border:1px solid var(--faint);font:500 13px var(--mono);letter-spacing:.04em;color:var(--fg)}
.v-clean em{font:600 11px var(--kr);letter-spacing:0;color:var(--mute)}
.v-clean li:not(.is-out) em{color:var(--orange-2)}
.v-clean li.is-out span{position:relative}
.v-clean li.is-out span::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:1.5px;background:var(--orange);transform-origin:left;transform:scaleX(0);animation:strike 5s var(--ease) infinite}
.v-clean li.is-out{animation:dim 5s var(--ease) infinite}
.v-clean li.is-out em{color:var(--orange);opacity:0;animation:tag 5s var(--ease) infinite}
.v-clean li:nth-child(5),.v-clean li:nth-child(5) span::after,.v-clean li:nth-child(5) em{animation-delay:.35s}
.v-clean li:nth-child(6),.v-clean li:nth-child(6) span::after,.v-clean li:nth-child(6) em{animation-delay:.7s}
@keyframes strike{0%,12%{transform:scaleX(0)}24%,86%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes dim{0%,14%{opacity:1}28%,86%{opacity:.42}100%{opacity:1}}
@keyframes tag{0%,16%{opacity:0}28%,86%{opacity:1}100%{opacity:0}}
/* v2 010 동시 발신 */
.v-big{position:absolute;right:-4%;bottom:-8%;font:800 clamp(120px,12vw,210px)/.8 var(--sans);letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1px rgba(110,120,255,.4);pointer-events:none}
.v-dial{position:relative;width:min(300px,86%);display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.v-dial i{height:44px;border-radius:12px;background:var(--ink-4);border:1px solid var(--faint);position:relative;overflow:hidden}
.v-dial i::after{content:"";position:absolute;left:12px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--blue-2);opacity:.25;animation:ring 2.4s var(--ease) infinite}
.v-dial i:nth-child(3n+1)::after{animation-delay:.3s}.v-dial i:nth-child(3n+2)::after{animation-delay:.9s}.v-dial i:nth-child(4n)::after{animation-delay:1.5s}
@keyframes ring{0%,100%{opacity:.2;transform:scale(.8)}40%{opacity:1;transform:scale(1.2)}}
.v-dial i.hit{animation:hit 4.8s var(--ease) infinite}
.v-dial i.hit::after{background:var(--orange)}
@keyframes hit{0%,30%{background:var(--ink-4);border-color:rgba(242,240,234,.12)}40%,85%{background:var(--orange);border-color:var(--orange)}100%{background:var(--ink-4);border-color:rgba(242,240,234,.12)}}
.v-dial__chip{position:absolute;left:50%;bottom:-58px;translate:-50% 0;display:flex;align-items:center;gap:8px;white-space:nowrap;padding:9px 14px;border-radius:99px;background:var(--cream);color:var(--ink-2);font:600 12.5px var(--kr);opacity:0;animation:chipin 4.8s var(--ease) infinite}
.v-dial__chip b{width:8px;height:8px;border-radius:50%;background:var(--orange)}
@keyframes chipin{0%,36%{opacity:0;transform:translateY(8px)}46%,85%{opacity:1;transform:none}100%{opacity:0}}
/* v3 결과 분류 */
.v-sort{width:min(330px,90%);display:grid;gap:16px}
.v-sort__label{color:var(--mute)}
.v-sort__tags{display:flex;flex-wrap:wrap;gap:8px}
.v-sort__tags span{padding:10px 15px;border-radius:99px;border:1px solid var(--faint);font:600 13.5px var(--kr);color:var(--mute);animation:topic 7s var(--ease) infinite}
.v-sort__tags span:nth-child(1){animation-delay:.2s}.v-sort__tags span:nth-child(2){animation-delay:1.2s}.v-sort__tags span:nth-child(3){animation-delay:2.2s}.v-sort__tags span:nth-child(4){animation-delay:3.2s}.v-sort__tags span:nth-child(5){animation-delay:4.2s}.v-sort__tags span:nth-child(6){animation-delay:5.2s}.v-sort__tags span:nth-child(7){animation-delay:6.2s}
.v-sort__tags span:nth-child(odd){--tc:var(--orange)}
.v-sort__tags span:nth-child(even){--tc:var(--blue)}
@keyframes topic{0%,8%{background:transparent;color:rgba(242,240,234,.58);border-color:rgba(242,240,234,.12)}14%,30%{background:var(--tc);color:#fff;border-color:var(--tc)}40%,100%{background:transparent;color:rgba(242,240,234,.58);border-color:rgba(242,240,234,.12)}}
.v-sort__bar{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:6px}
.v-sort__bar i{height:8px;border-radius:9px;background:linear-gradient(90deg,rgba(242,240,234,.22),rgba(242,240,234,.06))}
.v-sort__bar i:first-child{background:linear-gradient(90deg,var(--orange),rgba(255,79,26,.25))}
/* v4 녹취 · STT */
.v-rec{width:min(330px,90%);border-radius:22px;background:var(--ink-4);border:1px solid var(--faint);padding:20px;box-shadow:0 40px 80px -30px rgba(0,0,0,.8);display:grid;gap:16px}
.v-rec__head{display:flex;align-items:center;gap:10px;font:700 14px var(--kr)}
.v-rec__head .mono{margin-left:auto;color:var(--orange-2)}
.v-rec__dot{width:9px;height:9px;border-radius:50%;background:var(--orange);animation:pulse 1.4s var(--ease) infinite}
.v-wave{height:64px;display:flex;align-items:center;gap:3px}
.v-wave i{flex:1;height:100%;border-radius:3px;background:linear-gradient(180deg,var(--orange-2),var(--blue-2));transform:scaleY(.15);animation:wave 1.2s ease-in-out infinite}
@keyframes wave{0%,100%{transform:scaleY(var(--lo,.15))}50%{transform:scaleY(var(--hi,.9))}}
.v-rec__text{min-height:72px;display:grid;gap:8px;font:400 15px/1.55 var(--kr);color:var(--fg);border-top:1px solid var(--faint);padding-top:14px}
.v-rec__text .mono{color:var(--mute)}
#typer::after{content:"";display:inline-block;width:2px;height:1.05em;background:var(--orange);vertical-align:-.16em;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
/* v5 실시간 관리 */
.v-orbit{position:relative;width:min(330px,84%);aspect-ratio:1}
.v-orbit__ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(110,120,255,.22);animation:spin 26s linear infinite}
.v-orbit__ring:nth-child(2){inset:17%;animation-duration:18s;animation-direction:reverse;border-style:dashed;border-color:rgba(242,240,234,.16)}
.v-orbit__ring:nth-child(3){inset:34%;animation-duration:12s;border-color:rgba(255,79,26,.25)}
.v-orbit__node{position:absolute;top:-6px;left:50%;translate:-50% 0;width:12px;height:12px;border-radius:50%;background:var(--blue-2);box-shadow:0 0 18px var(--blue)}
.v-orbit__ring:nth-child(2) .v-orbit__node{top:auto;bottom:-6px;background:var(--cream);box-shadow:0 0 16px rgba(242,240,234,.7)}
.v-orbit__ring:nth-child(3) .v-orbit__node{top:50%;left:-6px;translate:0 -50%;background:var(--orange);box-shadow:0 0 18px var(--orange)}
.v-orbit__label{position:absolute;white-space:nowrap;font:500 11px var(--mono);letter-spacing:.04em;color:var(--mute);background:var(--ink-4);border:1px solid var(--faint);padding:6px 10px;border-radius:99px}
.v-orbit__core{position:absolute;inset:38%;border-radius:50%;background:var(--cream);display:grid;place-items:center;box-shadow:0 0 60px rgba(46,59,255,.35)}
.v-orbit__core svg{width:58%;height:58%;overflow:visible}
.v-orbit__core path:first-child{fill:none;stroke:var(--ink-2);stroke-width:7;stroke-linejoin:round}
.v-orbit__core circle{fill:var(--ink-2)}
.v-orbit__core .o-eye{fill:var(--orange)}

/* ---------- 05 기능: 10-12 출시 AI비서·고객관리CRM 카드(맨 앞 세 장) ----------
   출시 팝업과 같은 결: 잉크 카드 + 주황 NEW·✦, 초록(#3ED598)은 '통화에만 집중' 한 군데 글자색만(빛 번짐 없음) */
/* 출시 카드: 폭은 다른 카드와 같고(james 10-10 "왜 이 카드만 넓냐"), 강조는 맨 앞자리·NEW 배지·파랑→크림 그라데이션 선(james 확정 C안). 흐린 주황 선·주황 번짐은 탁해 보여 뺐다 */
.fcard--launch,.fcard--launch:hover{--c:var(--orange);border:1.5px solid transparent;background:linear-gradient(180deg,var(--ink-3),var(--ink-2)) padding-box,linear-gradient(135deg,#6E78FF,#F2F0EA 55%,rgba(242,240,234,.35)) border-box}
.fcard--ai{--c:var(--blue-2)}
.fcard--crm{--c:var(--cream)}
/* 상담원 업무정지 알림 카드: 주황 점·머리 한 줄(관리자에게 하는 말) */
.fcard--idle{--c:var(--orange-2)}
.fcard--launch,.fcard--ai,.fcard--crm,.fcard--idle{row-gap:20px}
/* AI비서·업무정지 알림 카드의 작은 상자 윗선을 가운데 CRM 상자 윗선에 맞춘다(james 10-21 핀셋). 값은 main.js가 데스크톱에서만 잰다 */
.fcard--ai .fcard__visual>*,.fcard--idle .fcard__visual>*{position:relative;top:var(--fc-dy,0px)}
.fcard__top .fcard__new{white-space:nowrap;padding:6px 10px;margin:-6px 0;border-radius:999px;background:var(--orange);color:#fff}
.fcard h3.fcard__ko{font:800 clamp(28px,2.2vw,32px)/1.1 var(--kr);letter-spacing:-.055em}
.fcard p strong{font-weight:700;color:var(--fg)}
.fcard p .go{color:#3ED598}
/* AI비서 카드 머리 한 줄: 관리자에게 직접 하는 말(james 10-10 "관리자들은 상담원이 타자 치는 데 시간 쓰는 걸 정말 안 좋아한다") */
.fcard .fcard__hook{margin:0 0 10px;max-width:none;font:700 15px/1.4 var(--kr);letter-spacing:-.02em;color:var(--c)}
.fcard__list{display:grid;gap:6px;margin-top:12px}
.fcard__list li{position:relative;padding-left:16px;font:500 13.5px/1.5 var(--kr);color:rgba(242,240,234,.82)}
.fcard__list li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--c)}
.launch{display:grid;gap:8px;margin-top:12px;max-width:520px}
.launch[hidden],details[data-until][hidden]{display:none}
.fcard .launch__band{margin-top:0;max-width:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font:500 13px/1.4 var(--kr);color:var(--mute)}
.launch__band b{font-weight:700;color:var(--fg)}
.launch__star{width:14px;height:14px;fill:var(--orange);flex:none}
.fcard .launch__perks{margin-top:0;max-width:none;display:flex;flex-wrap:wrap;gap:8px}
.launch__perks b{padding:8px 13px;border-radius:12px;background:rgba(242,240,234,.06);box-shadow:inset 0 0 0 1px var(--faint);font:700 14.5px/1.2 var(--kr);letter-spacing:-.02em;color:var(--fg)}
.launch__perks b:first-child{color:var(--orange-2)}
.btn.launch__cta{height:48px;justify-content:center;font-size:15px;margin-top:2px}
/* 출시 카드 흐름 한 줄: 통화 → AI 요약 → 자동 저장 → 상담원 배정 → 일정 → 알림. 초록은 '통화' 한 군데 글자색만 */
.fcard .launch__flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 4px;margin-top:10px;max-width:none}
.launch__flow i{display:inline-flex;align-items:center;gap:4px;font:600 12.5px/1.2 var(--kr);font-style:normal;color:rgba(242,240,234,.86)}
.launch__flow i:not(:last-child)::after{content:"→";margin-left:2px;color:var(--orange)}
.launch__flow i:first-child{color:#3ED598}
/* 고객관리CRM 카드 목록: 저장·정리·배정·일정·알림 머리말 */
.fcard__list--crm b{display:inline-block;min-width:2.4em;margin-right:6px;font-weight:700;color:var(--fg)}
/* 출시 카드 그림: 통화 종료 → AI 요약 줄이 차례로 → 고객 카드에 정리(8초 반복). 바탕 상태가 '다 보임'이라 움직임을 꺼도 내용이 남는다 */
.v-ai{width:min(360px,92%);display:grid;gap:10px}
.v-ai__call{justify-self:start;display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:99px;background:var(--ink-4);border:1px solid var(--faint);font:600 13px/1 var(--kr)}
.v-ai__call .mono{color:var(--mute);font-size:10.5px;letter-spacing:.08em}
.v-ai__dot{width:8px;height:8px;border-radius:50%;background:rgba(242,240,234,.4)}
.v-ai__sum{display:grid;gap:10px;padding:14px 16px;border-radius:18px;background:var(--ink-4);border:1px solid var(--faint);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.fcard .v-ai__label{margin-top:0;max-width:none;color:var(--fg);display:flex;align-items:center;gap:8px;font:700 13.5px/1 var(--kr)}
.v-ai__sum ul{display:grid;gap:8px;padding-top:10px;border-top:1px solid var(--faint)}
.v-ai__sum li{display:grid;grid-template-columns:64px 1fr;gap:10px;font:500 13px/1.4 var(--kr)}
.v-ai__sum em{font-size:12px;color:var(--mute)}
.v-ai__saved{justify-self:end;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:99px;background:var(--cream);color:var(--ink-2);font:600 12.5px/1 var(--kr)}
.v-ai__saved b{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--orange);color:#fff;font-size:10.5px}
.v-ai__call{animation:ai-a 8s var(--ease) infinite}
.v-ai__sum li:nth-child(1){animation:ai-b 8s var(--ease) infinite}
.v-ai__sum li:nth-child(2){animation:ai-c 8s var(--ease) infinite}
.v-ai__sum li:nth-child(3){animation:ai-d 8s var(--ease) infinite}
.v-ai__saved{animation:ai-e 8s var(--ease) infinite}
@keyframes ai-a{0%{opacity:0;transform:translateY(6px)}6%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes ai-b{0%,14%{opacity:0;transform:translateY(6px)}20%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes ai-c{0%,22%{opacity:0;transform:translateY(6px)}28%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes ai-d{0%,30%{opacity:0;transform:translateY(6px)}36%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes ai-e{0%,44%{opacity:0;transform:translateY(10px) scale(.96)}52%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
/* AI비서 카드 그림: 요약 카드 + 자동으로 채운 상태·다음 약속 + 확인 */
.v-note{width:min(340px,92%);display:grid;gap:12px;padding:18px;border-radius:22px;background:var(--ink-4);border:1px solid var(--faint);box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.v-note__head{display:flex;align-items:center;gap:8px;font:700 14px/1 var(--kr)}
.v-note__head .mono{margin-left:auto;color:var(--blue-2)}
.v-note__rows{display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--faint)}
.v-note__rows div{display:grid;grid-template-columns:64px 1fr;gap:10px;font:500 13px/1.4 var(--kr)}
.v-note__rows dt{font-size:12px;color:var(--mute)}
.v-note__fill{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:12px;border-top:1px solid var(--faint);font:500 12px/1 var(--kr);color:var(--mute)}
.v-note__fill b{display:inline-block;margin-left:4px;padding:5px 8px;border-radius:8px;background:rgba(110,120,255,.16);color:var(--fg);font-weight:600;animation:fill 5s var(--ease) infinite}
.v-note__fill span:nth-child(2) b{animation-delay:.35s}
.v-note__fill i{margin-left:auto;padding:7px 12px;border-radius:99px;background:var(--cream);color:var(--ink-2);font:700 12px/1 var(--kr);font-style:normal}
@keyframes fill{0%,20%{box-shadow:0 0 0 0 rgba(110,120,255,0)}30%{box-shadow:0 0 0 3px rgba(110,120,255,.45)}50%,100%{box-shadow:0 0 0 0 rgba(110,120,255,0)}}
/* 고객관리CRM 카드 그림: 고객 카드 한 장 + TODAY */
.v-crm{width:min(340px,92%);display:grid;gap:10px}
.v-crm__card{display:grid;gap:12px;padding:16px 18px;border-radius:22px;background:var(--cream);color:var(--ink-2);box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.v-crm__who{display:flex;align-items:center;gap:8px;font:700 15px/1 var(--kr)}
.v-crm__who .mono{font-size:10.5px;letter-spacing:.06em;color:var(--ink-mute)}
.v-crm__who em{margin-left:auto;padding:5px 9px;border-radius:99px;background:var(--orange);color:#fff;font:600 11.5px/1 var(--kr)}
.v-crm__log{display:grid;gap:7px;padding-top:12px;border-top:1px solid var(--ink-faint)}
.v-crm__log li{display:grid;grid-template-columns:40px auto 1fr;align-items:center;gap:8px;font:500 12.5px/1.3 var(--kr)}
.v-crm__log .mono{font-size:10px;letter-spacing:.04em;color:var(--ink-mute)}
.v-crm__log b{padding:3px 7px;border-radius:6px;background:var(--ink-faint);font-size:11px;font-weight:600}
.v-crm__log li:first-child{animation:crm-in 6s var(--ease) infinite}
.v-crm__log li:first-child b{background:rgba(255,79,26,.14);color:#C63A0E}
.v-crm__meta{display:flex;flex-wrap:wrap;gap:6px 16px;padding-top:12px;border-top:1px solid var(--ink-faint);font:500 12px/1 var(--kr);color:var(--ink-mute)}
.v-crm__meta b{color:var(--ink-2);font-weight:700}
.v-crm__today{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 14px;border-radius:16px;background:var(--ink-4);border:1px solid var(--faint);font:500 12px/1.2 var(--kr);color:rgba(242,240,234,.82)}
.v-crm__today .mono{color:var(--orange-2)}
.v-crm__today span{padding:4px 8px;border-radius:8px;background:rgba(242,240,234,.06)}
@keyframes crm-in{0%,8%{opacity:0;transform:translateY(-6px)}16%,92%{opacity:1;transform:none}100%{opacity:0}}

/* ---------- 06 관리자 화면(밝음) ---------- */
/* 06 관리자 화면: 레퍼런스 5번(숫자 구간)처럼 어두운 바탕·크림 글자. 광고 구간을 좌우로 뒤집어 왼쪽 설명, 오른쪽 화면(광고와 같은 폭) — james 10-04 */
.console{position:relative;z-index:2;background:var(--ink);color:var(--fg);padding:clamp(110px,13vw,200px) var(--gutter) clamp(90px,10vw,150px)}
.console__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.62fr);gap:clamp(24px,3.2vw,60px);align-items:center}
.console__copy{display:grid;gap:clamp(16px,1.6vw,24px);align-content:center;justify-items:start}
.console__title{font:700 clamp(36px,3.6vw,62px)/1.02 var(--kr);letter-spacing:-.055em}
.console__title .pt{color:var(--orange)}
.console__lead{max-width:460px;font:400 15.5px/1.7 var(--kr);color:var(--mute)}
.theme-switch{display:inline-flex;padding:4px;border-radius:999px;background:var(--ink-3);box-shadow:0 0 0 1px var(--faint)}
.theme-switch button{height:36px;padding:0 18px;border-radius:999px;font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);transition:background .35s,color .35s}
.theme-switch button.is-on{background:var(--cream);color:var(--ink-2)}
.browser{border-radius:clamp(16px,1.8vw,24px);overflow:hidden;background:#fff;box-shadow:0 60px 120px -40px rgba(0,0,0,.9),0 0 0 1px var(--faint);transform-origin:50% 0}
.browser__bar{display:flex;align-items:center;gap:7px;height:42px;padding:0 18px;background:var(--sand);color:var(--ink-mute);transition:background .6s,color .6s}
.browser__bar i{width:10px;height:10px;border-radius:50%;background:rgba(22,23,28,.18)}
.browser__bar .mono{margin-left:12px;font-size:10.5px;letter-spacing:.08em;text-transform:none}
.browser__view{position:relative;aspect-ratio:3104/1834}
.browser__view .shot{position:absolute;inset:0;width:100%;height:100%;transition:opacity .8s var(--ease)}
.shot--dark{opacity:0}
.browser.is-dark .shot--dark{opacity:1}
.browser.is-dark .browser__bar{background:var(--ink-3);color:var(--mute)}
.browser__view .hl{position:absolute;border:2px solid var(--orange);border-radius:8px;box-shadow:0 0 0 4px rgba(255,79,26,.14);opacity:0}
.browser__view .hl i{position:absolute;bottom:calc(100% + 8px);left:0;white-space:nowrap;font:600 12.5px/1 var(--kr);font-style:normal;color:#fff;background:var(--orange);padding:6px 10px;border-radius:999px}
.browser__view .hl--col{left:47.2%;top:14.6%;width:11.8%;height:81%}
.browser__view .hl--row{left:16.6%;top:38.4%;width:82.6%;height:4.1%;border-color:var(--blue);box-shadow:0 0 0 4px rgba(46,59,255,.14)}
.browser__view .hl--row i{left:auto;right:0;background:var(--blue)}
.console__facts{display:grid;width:100%;max-width:460px;margin-top:clamp(4px,.8vw,12px);border-top:1px solid var(--faint)}
.console__facts li{display:grid;grid-template-columns:76px 1fr;align-items:baseline;gap:12px;padding:14px 0;border-bottom:1px solid var(--faint)}
.console__facts b{color:var(--mute)}
.console__facts span{font:600 clamp(16px,1.2vw,19px)/1.3 var(--kr);letter-spacing:-.03em}

/* ---------- 07 FAQ(밝음) ---------- */
/* 07 FAQ: 레퍼런스 6번(페디버스)처럼 어두운 바탕 + 움직이는 연결망 + 가운데 큰 제목(둘째 줄 그라데이션) — james 10-04 */
.faq{position:relative;z-index:2;background:var(--ink);color:var(--fg);overflow:hidden;border-top:1px solid var(--faint);min-height:100svh;display:grid;place-items:center;padding:clamp(120px,14vw,200px) var(--gutter) clamp(110px,12vw,180px)}
.faq__net{position:absolute;inset:0;width:100%;height:100%}
.faq::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(closest-side at 50% 50%,rgba(15,16,20,.94) 0%,rgba(15,16,20,.62) 50%,transparent 100%)}
.faq__content{position:relative;z-index:1;display:grid;justify-items:center;gap:clamp(22px,2.4vw,34px);width:100%;max-width:1240px;text-align:center}
.faq .eyebrow{justify-content:center}
.faq__title{font:800 clamp(34px,6.2vw,108px)/1 var(--kr);letter-spacing:-.06em;white-space:nowrap}
.faq__title .pt{background:linear-gradient(100deg,var(--blue-2),#8C93FF 40%,var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .06em .06em}
.faq__list{width:100%;max-width:860px;text-align:left;margin-top:clamp(8px,1.6vw,24px)}
.faq__list details{border-top:1px solid var(--faint);padding:22px 0}
.faq__list details:last-child{border-bottom:1px solid var(--faint)}
.faq__list summary{list-style:none;display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:baseline;font:650 clamp(18px,1.5vw,23px)/1.35 var(--kr);letter-spacing:-.035em;cursor:pointer;color:var(--fg)}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list summary .mono{color:var(--orange)}
.faq__list summary::after{content:"+";font:300 1.5em/1 var(--sans);color:var(--blue-2);transition:transform .45s var(--ease)}
.faq__list details[open] summary::after{transform:rotate(45deg)}
.faq__list details p{margin:14px 0 0 64px;font:400 15.5px/1.75 var(--kr);color:var(--mute);max-width:44em}
.faq__guides{width:100%;max-width:860px;text-align:left}
.faq__guides p{font:400 15.5px/1.75 var(--kr);color:var(--mute);margin-bottom:16px}
.faq__guide-links{display:flex;flex-wrap:wrap;gap:12px}
.faq__guide-links a{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:12px 18px;border:1px solid var(--faint);border-radius:16px;font:600 15px/1.5 var(--kr);color:var(--fg)}
.faq__guide-links a span{color:var(--orange)}
.faq__guide-links a:hover,.faq__guide-links a:focus-visible{border-color:var(--orange);outline:2px solid var(--orange);outline-offset:3px}

/* 질문을 열면: 제목은 작아져 왼쪽 위로, 질문은 커져 위로(james 10-04). 위치 이동은 JS가 FLIP으로 부드럽게 잇는다 */
.faq.is-reading{place-items:start center}
.faq.is-reading .faq__content{justify-items:start;text-align:left;max-width:1040px}
.faq.is-reading .eyebrow{justify-content:flex-start}
.faq.is-reading .faq__title{font-size:clamp(30px,3vw,50px)}
.faq.is-reading .faq__list{margin-top:0;max-width:none}
.faq.is-reading .faq__list summary{font-size:clamp(22px,2.1vw,32px)}
.faq.is-reading .faq__list details p{font-size:17.5px}

/* ---------- 보안 장면(어두움, 문의 바로 위) — james 10-16 재작업: 카드 대신 한 장면. 새 색 없이 사이트의 잉크·크림·파랑(blue·blue-2)·글꼴만 쓴다 ----------
   바탕 값이 '끝 장면'(고리 맞물림·방패 잠김·번호 ****·로그 4줄)이다. 스크립트가 is-armed로 시작 장면을 깔고, 화면에 들어오면 is-play로 한 번 재생(약 3.2초)한 뒤
   두 표시를 걷어 바탕만 남긴다(끝나면 애니메이션·transform이 남지 않아 윈도우 배율에서도 글자가 흐려지지 않는다). 움직임은 transform·opacity만 쓴다 */
.secure{position:relative;z-index:2;background:var(--ink);color:var(--fg);border-top:1px solid var(--faint);overflow:hidden;padding:clamp(72px,4.8vw,92px) var(--gutter) clamp(64px,4vw,76px)}
.secure__inner{max-width:1240px;margin:0 auto;display:grid;gap:clamp(32px,2.1vw,40px)}
.secure__head{display:grid;justify-items:center;gap:14px;text-align:center}
.secure__head .eyebrow{justify-content:center}
.secure__title{font:800 clamp(40px,4vw,76px)/1.08 var(--kr);letter-spacing:-.06em;white-space:nowrap}
.secure__title .pt{background:linear-gradient(100deg,var(--blue-2),#8C93FF 40%,var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .06em .06em}
html.is-win .secure__title{font-family:"Pretendard Variable",Pretendard,"Inter Tight",system-ui,sans-serif}

/* 무대: 통화 기록 ─ 연결선 ─ 금고 ─ 연결선 ─ 감사 로그 */
.secure__stage{--core:clamp(300px,22vw,380px);--a0:1.6s;display:grid;grid-template-columns:minmax(0,330px) minmax(28px,1fr) var(--core) minmax(28px,1fr) minmax(0,330px);align-items:center}
.secure__core{position:relative;width:var(--core);aspect-ratio:1}
.secure__core::before{content:"";position:absolute;inset:-46%;z-index:-1;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(110,120,255,.12),rgba(110,120,255,.04) 55%,transparent)}
.secure__vault{display:block;width:100%;height:100%;overflow:visible}
.secure__wire{position:relative;height:2px;overflow:hidden;background:linear-gradient(90deg,transparent,rgba(242,240,234,.14) 18%,rgba(242,240,234,.14) 82%,transparent)}
.secure__wire i{position:absolute;inset:0;background:linear-gradient(90deg,transparent 55%,var(--blue-2) 92%,transparent);opacity:0;transform:translateX(-100%)}

/* 금고 그림(SVG). 고리는 화면 가운데(200,200)를 축으로 돈다 */
.secure__halo{transform-box:view-box;transform-origin:50% 50%}
.secure__guide{fill:none;stroke:var(--blue-2);stroke-width:1;stroke-dasharray:2 5;opacity:.6}
.secure__index{fill:var(--orange)}
.secure__ring{transform-box:view-box;transform-origin:50% 50%}
.secure__line{fill:none;stroke:rgba(242,240,234,.26);stroke-width:1}
.secure__line--dash{stroke-dasharray:2 7;stroke:rgba(242,240,234,.32)}
.secure__line--gap{stroke-dasharray:120 34;stroke:rgba(242,240,234,.26)}
.secure__ticks{fill:none;stroke:rgba(242,240,234,.22);stroke-width:5;stroke-dasharray:1.2 11.51}
.secure__label{font:600 13px/1 var(--kr);letter-spacing:.12em;fill:var(--mute);text-anchor:middle}
.secure__latch{fill:none;stroke:var(--blue-2);stroke-width:3;stroke-linecap:round;transform-box:fill-box;transform-origin:center}
.secure__pulse{fill:none;stroke:var(--blue-2);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.secure__sfill{fill:url(#sxShield)}
.secure__sline{fill:none;stroke:rgba(242,240,234,.55);stroke-width:1.5;stroke-linejoin:round}
.secure__lock{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* 양옆 화면 조각(통화 기록·감사 로그). 문의 폼과 같은 결의 어두운 판 */
.secure__panel{position:relative;padding:18px 20px 8px;border-radius:22px;background:linear-gradient(180deg,var(--ink-3),var(--ink-2));box-shadow:inset 0 0 0 1px var(--faint),0 40px 80px -40px rgba(0,0,0,.8)}
.secure__ptitle{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--faint)}
.secure__ptitle b{color:var(--mute)}
.secure__ptitle span{font:700 15px/1.2 var(--kr);letter-spacing:-.03em}
.secure__rowsbox{position:relative}
.secure__row,.secure__events li{display:grid;align-items:center;gap:14px;padding:12px 0;border-top:1px solid rgba(242,240,234,.06)}
.secure__row:first-child,.secure__events li:first-child{border-top:0}
.secure__row{grid-template-columns:auto minmax(0,1fr) auto}
.secure__events li{grid-template-columns:auto minmax(0,1fr)}
.secure__t{font:500 12px/1.75 var(--mono);letter-spacing:.04em;color:var(--mute);font-variant-numeric:tabular-nums}
.secure__no{display:inline-flex;align-items:center;font:500 14px/1.5 var(--mono);letter-spacing:.04em;color:var(--fg);white-space:nowrap;font-variant-numeric:tabular-nums}
.secure__hide{display:inline-flex}
.secure__d{display:inline-grid;overflow:hidden}
.secure__d>*{grid-area:1/1;font:inherit;text-align:center}
.secure__d i{opacity:0;transform:translateY(-100%)}
.secure__d b{color:var(--blue-2)}
/* 통화 기록 줄 끝 작은 자물쇠만 빨강(james 10-16 "자잘한열쇠 왼쪽 카드속"). 사이트 주황(#FF4F1A)과 구분되는 #FF3B3B, 시작·재생·끝 장면 모두 같은 색 */
.secure__rl{width:15px;height:15px;fill:none;stroke:#FF3B3B;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.secure__scan{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.secure__scan i{position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(110,120,255,.16));box-shadow:inset 0 -1px 0 var(--blue-2);opacity:0;transform:translateY(-100%)}
.secure__ev{font:400 14px/1.5 var(--kr);letter-spacing:-.01em;color:var(--mute)}
.secure__ev b{font-weight:700;color:var(--fg)}

/* 세 가지 약속: 카드 없이 가는 선 아래 세 줄 글 */
.secure__points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter);border-top:1px solid var(--faint);padding-top:20px}
.secure__points li{display:grid;gap:8px;align-content:start}
.secure__points .mono{color:var(--blue-2)}
.secure__points h3{font:700 clamp(17px,1.3vw,20px)/1.35 var(--kr);letter-spacing:-.03em;color:var(--fg)}
.secure__points p{font:400 15px/1.7 var(--kr);color:var(--mute)}

/* 시작 장면(is-armed) */
.secure__log.is-armed .secure__row{opacity:0;transform:translateY(10px)}
.secure__log.is-armed .secure__d i{opacity:1;transform:none}
.secure__log.is-armed .secure__d b{opacity:0;transform:translateY(100%)}
.secure__log.is-armed .secure__rl{opacity:0;transform:scale(.6)}
.secure__core.is-armed .secure__ring{transform:rotate(var(--from))}
.secure__core.is-armed .secure__latch{opacity:.3}
.secure__core.is-armed .secure__guide{opacity:.15}
.secure__core.is-armed .secure__halo{opacity:.4}
.secure__core.is-armed .secure__sfill{opacity:0}
.secure__core.is-armed .secure__lock{opacity:.7}
.secure__core.is-armed .secure__shackle{transform:translateY(-7px)}
.secure__audit.is-armed .secure__events li{opacity:0;transform:translateY(-8px)}

/* 재생(is-play): 기록이 들어오고(0~0.8초) → 훑는 선이 내려가며 가운데 네 자리를 가림(0.7~2.1초) → 고리 셋이 차례로 돌아 맞물림(0.25~2.0초)
   → 방패가 채워지고 자물쇠가 잠김(2.15초~) → 감사 로그가 한 줄씩 쌓임(1.6~3.15초) */
.secure__log.is-play .secure__row{animation:sx-rise .5s var(--ease) calc(var(--r) * .1s) both}
.secure__log.is-play .secure__scan i{animation:sx-scan 1.4s linear .7s both}
.secure__log.is-play .secure__d i{animation:sx-out .32s var(--ease) both}
.secure__log.is-play .secure__d b{animation:sx-up .32s var(--ease) both}
.secure__log.is-play .secure__d:nth-child(1)>*{animation-delay:calc(.875s + var(--r) * .35s)}
.secure__log.is-play .secure__d:nth-child(2)>*{animation-delay:calc(.915s + var(--r) * .35s)}
.secure__log.is-play .secure__d:nth-child(3)>*{animation-delay:calc(.955s + var(--r) * .35s)}
.secure__log.is-play .secure__d:nth-child(4)>*{animation-delay:calc(.995s + var(--r) * .35s)}
.secure__log.is-play .secure__rl{animation:sx-pop .4s cubic-bezier(.34,1.56,.64,1) calc(1.15s + var(--r) * .35s) both}
.secure__wire--in.is-play i{animation:sx-comet .8s cubic-bezier(.45,0,.55,1) .6s 2 both}
.secure__wire--out.is-play i{animation:sx-comet .8s cubic-bezier(.45,0,.55,1) 1.4s 2 both}
.secure__core.is-play .secure__ring{animation:sx-ring 1.45s calc(.25s + var(--k) * .15s) both}
.secure__core.is-play .secure__latch{animation:sx-latch .45s ease-out calc(1.5s + var(--k) * .15s) both}
.secure__core.is-play .secure__guide{animation:sx-guide .4s ease 2s both}
.secure__core.is-play .secure__halo{animation:sx-halo .8s ease 2.15s both}
.secure__core.is-play .secure__sfill{animation:sx-fade .4s ease 2.15s both}
.secure__core.is-play .secure__lock{animation:sx-lock .4s ease 2.15s both}
.secure__core.is-play .secure__shackle{animation:sx-lock .4s ease 2.15s both,sx-shut .45s cubic-bezier(.34,1.56,.64,1) 2.15s both}
.secure__core.is-play .secure__pulse{animation:sx-pulse 1s cubic-bezier(.16,1,.3,1) 2.2s forwards}
.secure__audit.is-play .secure__events li{animation:sx-drop .5s var(--ease) calc(var(--a0) + var(--a) * .35s) both}
@keyframes sx-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes sx-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes sx-scan{0%{opacity:0;transform:translateY(-100%)}8%,92%{opacity:1}100%{opacity:0;transform:none}}
@keyframes sx-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-100%)}}
@keyframes sx-up{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
@keyframes sx-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes sx-comet{0%{opacity:0;transform:translateX(-100%)}15%,85%{opacity:1}100%{opacity:0;transform:translateX(100%)}}
@keyframes sx-ring{0%{transform:rotate(var(--from));animation-timing-function:cubic-bezier(.6,.05,.25,1)}84%{transform:rotate(var(--over));animation-timing-function:cubic-bezier(.45,0,.55,1)}100%{transform:rotate(0deg)}}
@keyframes sx-latch{0%{opacity:.3;transform:none}40%{opacity:1;transform:scale(1.4)}100%{opacity:1;transform:none}}
@keyframes sx-guide{from{opacity:.15}to{opacity:.6}}
@keyframes sx-halo{from{opacity:.4}to{opacity:1}}
@keyframes sx-fade{from{opacity:0}to{opacity:1}}
@keyframes sx-lock{from{opacity:.7}to{opacity:1}}
@keyframes sx-shut{from{transform:translateY(-7px)}to{transform:none}}
@keyframes sx-pulse{0%{opacity:.7;transform:none}100%{opacity:0;transform:scale(1.9)}}

/* 1100px 아래: 가로 한 줄이면 양옆 판이 좁아 로그 글이 두 줄이 되므로, 금고를 맨 위에 크게 두고 그 아래 두 판(641px 아래는 한 줄씩), 연결선 없음.
   판마다 화면에 들어올 때 따로 재생한다 */
@media (max-width:1100px){
  .secure__stage{--core:min(340px,calc(100vw - 2 * var(--gutter)));--a0:.45s;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .secure__core{grid-column:1/-1;justify-self:center;order:-1;margin-bottom:8px}
  .secure__wire{display:none}
}
@media (max-width:900px){
  .secure__title{white-space:normal}
  .secure__points{grid-template-columns:minmax(0,1fr);gap:26px}
}
@media (max-width:640px){
  .secure__stage{grid-template-columns:minmax(0,1fr)}
  .secure__title{font-size:clamp(32px,9.4vw,44px)}
}

/* ---------- 08 CTA(어두움) ---------- */
.cta{position:relative;z-index:2;min-height:100svh;background:var(--ink);overflow:hidden;display:grid;place-items:center;padding:clamp(120px,13vw,180px) var(--gutter)}
/* 8번 빛 덩어리: 레퍼런스 구성(보라·코랄·하늘색, 같은 움직임)에서 코랄은 차분한 로즈(#C2598F, 히어로와 같은 색)로, 전체는 작고 연하게(james 10-04 "주황 너무 튄다, 빛들 너무 크고 진하다") */
.blobs{position:absolute;inset:0;filter:blur(70px) saturate(1.05);opacity:.55}
.blob{position:absolute;border-radius:50%;mix-blend-mode:screen}
.blob--1{width:38vw;aspect-ratio:1;left:-4vw;top:12%;background:radial-gradient(closest-side,#7C5CFF,transparent);animation:b1 16s ease-in-out infinite alternate}
.blob--2{width:32vw;aspect-ratio:1;right:-2vw;bottom:6%;background:radial-gradient(closest-side,#C2598F,transparent);animation:b2 19s ease-in-out infinite alternate}
.blob--3{width:22vw;aspect-ratio:1;left:42%;top:32%;background:radial-gradient(closest-side,#2BC4FF,transparent);opacity:.4;animation:b3 13s ease-in-out infinite alternate}
@keyframes b1{to{transform:translate(28vw,14vh) scale(1.15)}}
@keyframes b2{to{transform:translate(-30vw,-18vh) scale(.85)}}
@keyframes b3{to{transform:translate(-18vw,20vh) scale(1.3)}}
.cta::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at center,transparent 30%,var(--ink) 85%)}
.cta__inner{position:relative;z-index:2;display:grid;justify-items:center;gap:clamp(30px,4vw,56px);text-align:center;width:100%}
.cta__inner .eyebrow{justify-content:center}
.cta__copy{display:grid;justify-items:center;gap:clamp(20px,2.6vw,36px)}
.cta__title{font:800 clamp(52px,9.6vw,184px)/.92 "Pretendard CTA",var(--kr);letter-spacing:-.065em}
.cta__title .line{display:block;color:transparent;-webkit-text-stroke:0.7px rgba(242,240,234,1);background-image:linear-gradient(90deg,var(--cream) 0 50%,transparent 50% 100%);background-size:200.5% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;padding:0 .04em .06em}
.cta__pledge{font:700 clamp(20px,1.7vw,28px)/1.3 var(--kr);letter-spacing:-.035em;color:var(--fg)}
.cta__pledge em{font-style:normal;color:var(--orange-2)}
.cta__sub{font:400 16px/1.7 var(--kr);color:var(--mute);max-width:42ch}
@media (min-width:901px){
  .cta__inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;justify-items:stretch;text-align:left;max-width:1320px}
  .cta__copy{justify-items:start;justify-self:start;width:fit-content}
  .cta__copy .eyebrow{justify-content:flex-start}
  .cta__title{font-size:clamp(44px,5vw,92px)}
  .form{margin-top:0;width:100%}
  /* 화면이 고정된 동안 폼 전체(문의 보내기 버튼까지)가 한 화면에 들어오게 */
  .cta{padding:88px var(--gutter) 28px}
  .cta .form{gap:10px 16px;padding:22px 26px}
  .cta .field{gap:5px}
  .cta .field input,.cta .field textarea{padding:10px 13px}
  .cta .field textarea{height:64px;resize:vertical}
  .cta .btn{height:54px}
}
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;height:62px;padding:0 26px 0 28px;border-radius:999px;background:var(--cream);color:var(--ink-2);font:600 16px/1 var(--kr);letter-spacing:-.02em;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--orange);transform:translateY(101%);transition:transform .6s var(--ease)}
.btn:hover{color:#fff}
.btn:hover::before{transform:translateY(0)}
.btn svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn--ghost{background:rgba(15,16,20,.35);color:var(--cream);box-shadow:inset 0 0 0 1px rgba(242,240,234,.3);backdrop-filter:blur(10px)}
.btn--ghost::before{background:var(--cream)}
.btn--ghost:hover{color:var(--ink-2)}
.btn--orange{background:var(--orange);color:#fff}
.btn--orange::before{background:var(--blue)}
.magnet{display:inline-block}
.magnet>*{will-change:transform}
/* 문의 폼 — 화면만(전송 안 함) */
.form{width:min(760px,100%);margin-top:clamp(20px,3vw,40px);display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;padding:clamp(22px,2.6vw,36px);text-align:left;border-radius:26px;background:rgba(22,23,28,.55);box-shadow:inset 0 0 0 1px var(--faint),0 40px 80px -40px rgba(0,0,0,.8);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.form__head{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding-bottom:8px;border-bottom:1px solid var(--faint);margin-bottom:6px}
.form__head b{color:var(--mute)}
.form__head span{font:700 18px var(--kr);letter-spacing:-.03em}
.field{grid-column:1/-1;display:flex;flex-direction:column;gap:7px}
.field.half{grid-column:auto}
.field label{font:600 13.5px var(--kr)}
.field label b{color:var(--orange);font-weight:600;font-size:11.5px;margin-left:4px}
.field label span{color:var(--mute);font-weight:400;font-size:11.5px;margin-left:4px}
.field input,.field textarea{width:100%;min-width:0;font:400 16px var(--kr);color:var(--fg);background:rgba(242,240,234,.06);border:1px solid var(--faint);border-radius:12px;padding:13px 14px;transition:border-color .3s,background .3s;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--orange);background:rgba(242,240,234,.1)}
.form__privacy{grid-column:1/-1;font:400 12px/1.55 var(--kr);color:var(--mute)}
.form__privacy a{text-decoration:underline;text-underline-offset:3px}
.form__privacy a:hover{color:var(--orange)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__agree{grid-column:1/-1;display:flex;gap:9px;align-items:center;font:500 14px var(--kr)}
.form__agree input{accent-color:var(--orange);width:18px;height:18px}
.form__foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:4px}
.form__status{font:600 14px var(--kr);color:var(--orange-2)}
/* 문의 가능 시간(james 2026-10-09 "cta 문의창 하단에 빨간색 글씨로", 10-10 "개인정보수집동의 옆으로 좀 간격 띄어서 배치") — 동의 줄 오른쪽, 좁으면 아래로 */
.form__agree-row{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px}
.form__hours{margin:0;font:600 14px var(--kr);color:#FF5C5C}
.form__status a{text-decoration:underline;text-underline-offset:3px}

/* ---------- 푸터(밝음) ---------- */
.footer{position:relative;z-index:2;background:var(--ink);color:var(--fg);padding:clamp(70px,8vw,110px) var(--gutter) 0;overflow:hidden;border-top:1px solid var(--faint)}
.footer__grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:var(--gutter)}
.footer__lead{font:650 clamp(24px,2.4vw,36px)/1.22 var(--kr);letter-spacing:-.04em;max-width:18ch}
.footer__lead span{color:var(--orange)}
.footer__col h4{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:18px}
.footer__col li{padding:5px 0;font:500 15px var(--kr)}
.footer__col a:hover{color:var(--orange)}
.footer__word{display:flex;justify-content:center;margin-top:clamp(56px,7vw,110px);font:850 19.6vw/.86 var(--kr);letter-spacing:-.07em;white-space:nowrap;margin-bottom:.0057em;user-select:none;overflow:hidden;padding-top:.04em}
.footer__word .char{will-change:transform;background:linear-gradient(180deg,var(--cream) 35%,rgba(242,240,234,.06));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
/* 맨 아래 띠: 첫 줄 사업자 정보(항목명 밝게), 둘째 줄 왼쪽 법적 고지 · 오른쪽 저작권과 맨 위로(james 10-04 "깔끔하고 밸런스 있게") */
.footer__legal{position:relative;display:grid;gap:14px;padding:22px 0 26px;border-top:1px solid var(--faint);font:400 12px/1.65 var(--kr);color:var(--mute);background:var(--ink)}
.footer__biz{display:flex;flex-wrap:wrap;gap:4px 18px}
.footer__biz b{font-weight:600;color:rgba(242,240,234,.82);margin-right:4px}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;padding-top:12px;border-top:1px solid rgba(242,240,234,.07)}
.footer__links{display:flex;gap:18px;flex-wrap:wrap}
.footer__links a{color:rgba(242,240,234,.82)}
.footer__copy{display:flex;gap:18px;align-items:center}
.footer__links a:hover,.footer__copy a:hover,.footer__biz a:hover{color:var(--orange)}

/* ---------- 모바일 하단 고정 버튼(도입 문의·전화) ---------- */
/* 모바일 폭에서만 보인다. 히어로를 지나면 올라오고, 문의 구간·메뉴·로딩 중에는 내려간다. 버튼 모양은 헤더 도입 문의 알약 그대로 */
.mbar{display:none}

/* ---------- 스크롤바(정밀 포인터만, 섹션 눈금) ---------- */
.has-sbar{scrollbar-width:none}
.has-sbar::-webkit-scrollbar{display:none}
.sbar{position:fixed;top:0;right:0;bottom:0;width:26px;z-index:70;color:var(--cream);display:none;user-select:none;touch-action:none;transition:color .5s}
.sbar.is-light{color:var(--ink-2)}
.has-sbar .sbar{display:block}
.sbar__track{position:absolute;top:12px;bottom:12px;right:10px;width:1px;background:currentColor;opacity:.18;transition:opacity .4s}
.sbar:hover .sbar__track,.sbar.is-active .sbar__track{opacity:.34}
.sbar__thumb{position:absolute;top:0;right:8px;width:5px;border-radius:9px;background:currentColor;will-change:transform;transition:width .45s var(--ease),right .45s var(--ease)}
.sbar:hover .sbar__thumb,.sbar.is-drag .sbar__thumb{width:9px;right:6px}
.sbar__tick{position:absolute;right:0;width:26px;height:14px;translate:0 -50%;cursor:pointer}
.sbar__tick::before{content:"";position:absolute;right:10px;top:50%;width:5px;height:1px;background:currentColor;opacity:.6;transition:width .45s var(--ease)}
.sbar__tick span{position:absolute;right:24px;top:50%;translate:6px -50%;font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .4s,translate .5s var(--ease)}
.sbar:hover .sbar__tick span{opacity:.55;translate:0 -50%}
.sbar.is-active .sbar__tick.is-current span{opacity:.9;translate:0 -50%}
.sbar:hover .sbar__tick.is-current span,.sbar .sbar__tick:hover span{opacity:1}
.sbar__tick:first-child span{display:none}
.sbar__tick:hover::before,.sbar__tick.is-current::before{width:9px}



/* ---------- 반응형 ---------- */
/* 4번 작동 방식이 네 단계가 되어(10-12 출시 04 추가) 키가 낮은 데스크톱 화면에서는 제목·단계를 조금 줄여 겹치지 않게 */
@media (min-width:901px) and (max-height:820px){
  .step{padding:10px 0}
  .step h3{font-size:clamp(24px,2.4vw,38px)}
  .flow__title{font-size:clamp(36px,4.2vw,68px)}
  .step__lead{font-size:16px;margin-bottom:2px}
  .step p{font-size:14px;line-height:1.55}
  .step.is-active p{margin-top:8px}
  .day{margin-top:16px;row-gap:8px}
  /* 출시 카드가 다른 카드와 같은 폭이 되며 빽빽해져, 키 낮은 화면에서는 그림을 줄여 제목과 겹치지 않게 */
  .v-ai__call{display:none}
  .v-ai{gap:8px}
  .v-ai__sum{padding:11px 14px;gap:8px}
  .v-ai__sum ul{gap:5px;padding-top:8px}
  .fcard--launch p{font-size:13.5px;line-height:1.55}
  /* AI비서·고객관리CRM 카드도 글이 늘어 키 낮은 화면에서 그림이 제목을 덮으므로 그림만 줄인다(글은 그대로) */
  .v-note,.v-crm{zoom:.74}
  .v-note__fill,.v-crm__today{display:none}
}
/* 업무정지 알림 카드: 키 821~860px 화면에서는 위 규칙이 안 걸려 알림 상자 아래 줄(기준·운영 시간)이 훅 문장을 덮으므로 그 줄만 뺀다(james 10-21 핀셋) */
@media (min-width:901px) and (max-height:860px){.fcard--idle .v-note__fill{display:none}}
/* 키가 낮은 데스크톱 화면: 최소 높이를 풀고, 더 낮은 화면은 모양을 비틀지 않고 스크롤로 본다(james 10-13). */
@media (min-width:901px) and (max-height:760px){
  .flow__pin,.features__pin{min-height:0}
  .fcard{height:calc(100svh - 130px)}
  .fcard__visual{zoom:.8}
}
/* 1366×632 등: 출시 카드 그림 전체만 같은 비율로 줄여 제목을 덮지 않게 한다. */
@media (min-width:901px) and (max-height:700px){.fcard--launch .fcard__visual{zoom:.43}}
@media (max-width:1100px){
  .nav__time{display:none}
  .nav__links{gap:22px}
  .manifesto .eyebrow{grid-column:1/-1}
  .manifesto__text,.principles{grid-column:1/-1}
  .film__body{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
}
@media (max-width:900px){
  .nav__links{display:none}
  .nav{padding:12px var(--gutter)}
  .hero__top{grid-template-columns:1fr 1fr}
  .hero__top>:nth-child(2){display:none}
  .hero__top>*{white-space:nowrap}
  .hero__top>:last-child{font-size:9.5px;letter-spacing:.08em}
  .hero__side{flex-direction:column;align-items:flex-start}
  .scrollcue{display:none}
  /* 히어로 "수신율 UP"은 폰에서도 한 줄(james 10-11 "한줄로 만들자, 폰트 크기 조금만 줄여서") */
  .hero__title{font-size:clamp(40px,21vw,198px)}
  .marquee__item{font-size:clamp(44px,13vw,110px)}
  .film__body{grid-template-columns:1fr}
  .film__lead{max-width:none}
  .principles{grid-template-columns:1fr;gap:30px}
  /* 4번 모바일: 데스크톱처럼 화면 고정 + 스크롤로 폰 회전·칩·화면 전환. 위 제목, 가운데 폰, 아래 지금 단계 하나(james 10-04 "휴대폰 애니메이션이 하이라이트") */
  .flow__pin{height:100svh;min-height:0;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;row-gap:10px;padding:78px 20px 22px}
  .flow__copy{display:contents}
  .flow__copy>div{order:1}
  .flow__stage{order:2;min-height:0;height:auto}
  .steps{order:3;border-bottom:0}
  .flow__title{font-size:clamp(28px,8.4vw,44px);margin-top:12px}
  .step{display:none;border-top:0;padding:0}
  .step.is-active{display:grid;opacity:1}
  .step.is-active p{grid-template-rows:1fr;margin-top:6px}
  .step h3{font-size:clamp(24px,7vw,34px)}
  .step p{font-size:14px;line-height:1.55}
  .step__lead{font-size:16px;margin-bottom:2px}
  .day{margin-top:12px;row-gap:7px;max-width:none}
  .day__top{font-size:11.5px}
  .day__key{font-size:11px}
  .day__end{font-size:15px}
  .day__bar{height:9px;gap:2px}
  .phone{--ph:min(48svh,440px)}
  .chip{font-size:12px;padding:9px 14px 9px 9px;gap:8px}
  .chip small{font-size:11px}
  .chip__ico{width:22px;height:22px}
  .chip__ico svg{width:13px;height:13px}
  .key__strike{left:36px}
  .chip--key{top:7%;left:0}
  .chip--a{top:24%;right:0}
  .chip--b{top:66%;left:0}
  .chip--c{top:18%;right:0}
  .chip--d{bottom:12%;left:0;padding:9px 14px}
  .chip--e{top:30%;right:0}
  .chip--f{top:4%;left:0;padding:8px 14px 8px 8px;border-radius:14px}
  .chip--f small{font-size:10.5px}
  .chip--g{bottom:4%;right:0}
  /* 05 머리 제목은 폰에서 두 줄: 첫 줄 '상담기록 작성 시간을,'(글자 크기의 약 7.75배 폭)이 한 줄에 들어가는 만큼만 줄인다(10-11) */
  .features__intro h2{font-size:min(52px,calc((100vw - 2 * var(--gutter)) / 7.9))}
  .fcard{height:auto;min-height:540px}
  .console__body{grid-template-columns:1fr}
  .console__lead,.console__facts{max-width:none}
  .browser__view .hl i{font-size:10px;padding:4px 7px}
  .faq{min-height:0;padding:110px var(--gutter) 100px}
  .faq__title{font-size:clamp(30px,9.2vw,60px)}
  .faq__list summary{grid-template-columns:40px 1fr auto}
  .faq__list details p{margin-left:52px}
  .footer__grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:16px}
  .footer__lead{grid-column:1/-1}
  .footer__col li{font-size:13.5px}
  .footer__col h4{margin-bottom:12px}
  /* 모바일 푸터: 위아래 여백을 줄이고 워드마크를 올려 아래 법적 정보 띠에 가리지 않게(james 10-04) */
  .footer{padding-top:56px}
  .footer__grid{row-gap:28px}
  .footer__word{margin-top:26px;margin-bottom:.033em}
  .mn-inner{grid-template-columns:1fr;padding:96px 24px 40px}
  .mn-aside{order:1;gap:18px;align-self:auto}
  .mn-menu a{font-size:clamp(30px,5.6vh,52px)}
  .mn-aside dd{font-size:14px}
  /* 모바일도 데스크톱과 같은 커튼 낙하·순차 등장(james 10-04 "모바일에서도 동일한 애니메이션") */
  .lb__panel{width:calc(100vw - 32px)}
}
/* 05 기능 카드 세로 쌓기: 폰 폭만. */
@media (max-width:900px){
  .features__pin{height:auto;min-height:0;padding:100px 0 80px}
  .features__track{flex-direction:column;gap:14px;width:100%}
  .features__intro{flex:none;gap:40px;padding:0 0 30px}
  .fslot{flex:none;width:100%}
  .features__track::after{display:none}
  .features__bar{display:none}
}
@media (max-width:560px){
  .nav__cta{display:none}
  .adcards{gap:12px}
  .adcard__text span{font-size:13.5px}
  .adcard__play{width:32px;height:32px;left:8px;bottom:8px}
  .adcard__play::after{border-left-width:9px;border-top-width:6px;border-bottom-width:6px}
  .cta__title{font-size:clamp(46px,13.4vw,110px)}
  .btn{height:56px;justify-content:center}
  .form{grid-template-columns:minmax(0,1fr)}
  .field.half{grid-column:1/-1}
  .footer__legal{font-size:11px}
  /* 4번: 아래 고정 버튼(.mbar)이 단계 글을 덮지 않게 그 높이만큼 띄운다 */
  .flow__pin{padding-bottom:calc(80px + env(safe-area-inset-bottom));row-gap:4px}
  /* 4번 폰 목업: 무대(제목과 단계 글 사이 칸) 높이 안에 들어가게 줄인다. 어느 단계·어느 화면 높이에서도 단계 제목을 덮지 않게(james 10-11 "휴대폰 때매 아래 문구가 가림", 이어서 "너무 줄였다 조금 키워라") */
  .flow__stage{container-type:size}
  .phone{--ph:min(50svh,94cqh,440px)}
  .flow__stage::before{width:70%}
  /* 칩은 화면 양끝에 붙지 않게 안쪽으로 조금 들이고 글을 조금 줄인다 */
  .chip{font-size:11.5px;padding:8px 12px 8px 8px}
  .chip small{font-size:10.5px}
  .chip--key,.chip--b,.chip--d,.chip--f{left:6px}
  .chip--a,.chip--c,.chip--e,.chip--g{right:6px}
  .chip--d{padding:8px 12px}
  .chip--f{padding:7px 12px 7px 7px}
  .chip--f small{font-size:10px}
  /* 스크롤 중에만 헤더 밑에 옅은 반투명 바탕 + 흐림. 색은 섹션 색 전환(.is-light)을 그대로 따른다 */
  .nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(15,16,20,.66);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;pointer-events:none;transition:opacity .4s,background-color .5s var(--ease)}
  .nav.is-scrolled::before{opacity:1}
  .nav.is-light::before{background-color:rgba(248,246,241,.62)}
  body.mn-open .nav::before{opacity:0}
  /* 오른쪽 섹션 눈금은 모바일에서 본문을 가리므로 숨긴다 */
  .has-sbar .sbar{display:none}
  .mbar{position:fixed;left:0;right:0;bottom:0;z-index:58;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:rgba(15,16,20,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--faint);color:var(--fg);transform:translateY(100%);visibility:hidden;transition:transform .5s var(--ease),visibility 0s linear .5s}
  .mbar.is-on{transform:none;visibility:visible;transition:transform .5s var(--ease),visibility 0s}
  body.mn-open .mbar,body.is-loading .mbar{transform:translateY(100%);visibility:hidden;transition:transform .5s var(--ease),visibility 0s linear .5s}
  .mbar__btn{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;border:1px solid currentColor;border-radius:999px;font:600 14px/1 var(--kr);-webkit-tap-highlight-color:transparent}
  .mbar__btn--main{background:var(--cream);border-color:var(--cream);color:var(--ink-2)}
  /* 띠 높이만큼 푸터 끝을 띄워 마지막 줄이 가리지 않게 */
}

/* ---------- 관제탑 공지·팝업(js/hq-contents.js) — 게시 중인 것이 있을 때만 생긴다. 0개면 이 규칙은 아무 데도 닿지 않는다 ---------- */
.hq-dlg{position:fixed;inset:0;z-index:110;display:grid;place-items:center;padding:16px;overflow-y:auto;overscroll-behavior:contain}
.hq-dlg__shade{position:fixed;inset:0;background:rgba(10,10,14,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hq-btn{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 16px;border-radius:999px;font:600 13px/1 var(--kr);white-space:nowrap;transition:background .3s,color .3s}
.hq-btn--close{background:var(--cream);color:var(--ink-2)}
.hq-btn--close:hover{background:var(--orange);color:#fff}
.hq-btn--quiet{padding:0 4px;color:var(--mute)}
.hq-btn--quiet:hover{color:var(--fg)}
.hq-pops__stack{position:relative;display:flex;gap:16px;align-items:flex-start;justify-content:center;flex-wrap:wrap}
.hq-pop{width:min(360px,calc(100vw - 32px),calc((100svh - 32px - 62px) * .8));display:grid;border-radius:18px;overflow:hidden;background:var(--ink-2);color:var(--fg);box-shadow:0 0 0 1px var(--faint),0 50px 120px -30px rgba(0,0,0,.8)}
.hq-pop[hidden]{display:none}
.hq-pop__media{display:block;width:100%;padding:0;background:#000;cursor:pointer}
div.hq-pop__media{cursor:default}
.hq-pop__img{width:100%;height:auto;max-height:calc(100svh - 32px - 62px);object-fit:contain}
.hq-pop__text{display:grid;gap:14px;padding:28px 24px 8px}
.hq-pop__title{font:700 20px/1.35 var(--kr);letter-spacing:-.03em}
.hq-pop__body{font:400 15px/1.65 var(--kr);color:rgba(242,240,234,.82);white-space:pre-line;max-height:46svh;overflow-y:auto}
.hq-pop__more{justify-self:start;color:var(--orange);font:600 14px/1.4 var(--kr);text-decoration:underline;text-underline-offset:3px}
.hq-pop__foot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 12px 12px 16px;border-top:1px solid var(--faint)}
.hq-notices__panel{position:relative;width:min(640px,calc(100vw - 32px));max-height:calc(100svh - 32px);display:grid;grid-template-rows:auto minmax(0,1fr);border-radius:18px;overflow:hidden;background:var(--ink-2);color:var(--fg);box-shadow:0 0 0 1px var(--faint),0 50px 120px -30px rgba(0,0,0,.8)}
.hq-notices__head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 16px 16px 24px;border-bottom:1px solid var(--faint)}
.hq-notices__title{font:700 18px/1.3 var(--kr);letter-spacing:-.03em}
.hq-notices__scroll{overflow-y:auto;overscroll-behavior:contain}
.hq-notice+.hq-notice{border-top:1px solid var(--faint)}
.hq-notice__row{width:100%;display:flex;align-items:center;gap:10px;padding:16px 24px;text-align:left;font:500 15px/1.45 var(--kr)}
.hq-notice__row:hover .hq-notice__name{color:var(--orange)}
.hq-notice__pin{flex:none;padding:3px 8px;border-radius:999px;background:var(--orange);color:#fff;font:600 11px/1.2 var(--kr)}
.hq-notice__name{flex:1;min-width:0;transition:color .3s}
.hq-notice__date{flex:none;font:500 12px/1 var(--mono);color:var(--mute)}
.hq-notice__detail{display:grid;gap:14px;padding:0 24px 22px}
.hq-notice__detail[hidden]{display:none}
.hq-notice__img{width:100%;height:auto;border-radius:12px}
.hq-notice__body{font:400 15px/1.7 var(--kr);color:rgba(242,240,234,.82);white-space:pre-line}
.hq-dlg{animation:hq-fade .35s var(--ease) both}
.hq-pop,.hq-notices__panel{animation:hq-rise .5s var(--ease) both}
@keyframes hq-fade{from{opacity:0}}
@keyframes hq-rise{from{opacity:0;transform:translateY(18px) scale(.98)}}

/* Windows body uses the installed OS font. Display metrics stay in the original
   font; only successful SVG paint hides the source text. Mac/mobile never enter. */
html.is-win{--kr:"Malgun Gothic","맑은 고딕",sans-serif;--sans:"Inter Tight","Malgun Gothic","맑은 고딕",sans-serif;--serif:"Instrument Serif","Malgun Gothic","맑은 고딕",serif;--mono:"JetBrains Mono","Malgun Gothic","맑은 고딕",monospace}
html.is-win :is(.hero__word:first-child,.mn-menu a,.film__title,.manifesto__text,.core__title,.flow__title,.features__intro h2,.console__title,.faq__title,.footer__word,.g-article h1){font-family:"Pretendard Variable",Pretendard,"Inter Tight",system-ui,sans-serif}
html.is-win :is(.hero__title,.v-big,.loader__count){font-family:"Inter Tight","Pretendard Variable",Pretendard,system-ui,sans-serif}
html.is-win .cta__title{font-family:"Pretendard CTA","Pretendard Variable",Pretendard,"Inter Tight",system-ui,sans-serif}
html.is-win .win-display-text{position:relative}
html.is-win .win-display-ready{-webkit-text-fill-color:transparent;-webkit-text-stroke:0 transparent;background-image:none!important}
html.is-win .win-display-svg{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;display:block;color:inherit;-webkit-text-fill-color:initial;-webkit-text-stroke:initial;fill:currentColor}

html.is-win .marquee__item{font-family:"Inter Tight","Pretendard Variable",Pretendard,system-ui,sans-serif}
html.is-win .marquee__item .serif{font-family:"Instrument Serif","Pretendard Variable",Georgia,serif}