/* ============================================================
   Plain — Unified Finance Platform 랜딩 (목업 2차 충실 재현)
   원본: Development Sector/랜딩페이지 목업 2차.png 픽셀 분석.
   그래픽은 assets/gen·assets/svg 벡터.
   base/buttons = styles.css 재사용.
   ============================================================ */
:root{
  --navy-0:#02103E; /* 파생: Navy #06142F 계열 — 다크 그라데이션 최심부(BI/CI 09장 파생톤) */ --navy-1:#08184D; /* 파생: Navy #06142F 계열 — 다크 그라데이션 중간톤 */ --navy-2:#10245C; /* 파생: Navy #06142F 계열 — 다크 그라데이션 밝은쪽 */
  --hero-a:#0A1C57; /* 파생: Navy #06142F 계열 — 히어로 그라데이션 stop1 */ --hero-b:#1B3A8F; /* 파생: Deep Blue #155DFC 계열 — 히어로 그라데이션 stop2 */ --hero-c:#2C50A6; /* 파생: Deep Blue #155DFC 계열 — 히어로 그라데이션 stop3 */
  --uni-1:#15234E; /* 파생: Navy #06142F 계열 — about Universe 섹션 배경 stop1 */ --uni-2:#0A1640; /* 파생: Navy #06142F 계열 — about Universe 섹션 배경 stop2 */
  --csr-1:#DCE8FD; /* 파생: Plain Blue #1773EB 계열 연톤 — Impact 페이지 배경 stop1 */ --csr-2:#C7DAFB; /* 파생: Plain Blue #1773EB 계열 연톤 — Impact 페이지 배경 stop2 */ --csr-ink:#16234E; /* 파생: Ink #0F1B2D 계열 — Impact 페이지 전용 텍스트톤 */
  --cta-1:#1A2F8C; /* 파생: Deep Blue #155DFC 계열 — CTA 다크 그라데이션 stop1 */ --cta-2:#10237E; /* 파생: Deep Blue #155DFC 계열 — CTA 다크 그라데이션 stop2 */ --cta-3:#0A1A66; /* 파생: Navy #06142F 계열 — CTA 다크 그라데이션 stop3 */
  --foot:#03103C; /* 파생: Navy #06142F 계열 — 푸터 배경 */
  --ease-q:cubic-bezier(.22,1,.36,1); --ease-e:cubic-bezier(.16,1,.3,1);
}
html,body{overflow-x:clip;}
/* 목업 밀도에 맞춘 타이트한 섹션 리듬(styles.css 전역 패딩 override) */
section{padding:clamp(16px,1.8vw,32px) 0;}
.container{max-width:1240px;}

/* reveal */
.js [data-reveal]{opacity:0;transform:translate3d(0,30px,0);}
.js [data-reveal="left"]{transform:translate3d(-40px,0,0);}
.js [data-reveal="right"]{transform:translate3d(40px,0,0);}
.js [data-reveal="zoom"]{transform:scale(.93);}
.js [data-reveal].is-in{opacity:1;transform:none;transition:opacity .8s var(--ease-q),transform .9s var(--ease-q);}
@media (prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1!important;transform:none!important;transition:none!important;}}

.lx-float{animation:lx-float 6s ease-in-out infinite;}
@keyframes lx-float{0%,100%{translate:0 0}50%{translate:0 -13px}}
@media (prefers-reduced-motion:reduce){.lx-float{animation:none}}

.lx-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;letter-spacing:.04em;color:var(--blue);background:var(--blue-50);border:1px solid var(--blue-100);padding:7px 15px;border-radius:999px;}
.lx-blue{color:var(--blue);}

/* ====== NAV over dark hero ====== */
.nav.nav--flex{transition:background .3s,box-shadow .3s,border-color .3s;}
.nav--scrolled:not(.nav--over){box-shadow:0 10px 30px -18px rgba(15,27,45,.28);} /* 스크롤 시 깊이 한 겹(첫 진입은 배경과 연결) */
.nav.nav--over{background:transparent;border-bottom-color:transparent;backdrop-filter:none;}
.nav.nav--over .nav-links a{color:rgba(255,255,255,.84);}
.nav.nav--over .nav-links a:hover{color:#fff;}
.nav.nav--over .nav-trigger,.nav.nav--over .nav-link{color:rgba(255,255,255,.84);}
.nav.nav--over .nav-trigger:hover,.nav.nav--over .nav-link:hover{color:#fff;}
/* 드롭다운 패널은 항상 흰 배경 — nav--over의 흰 글씨(.nav-links a)가 .nav-panel a 까지 잡혀 흰배경에 묻히는 데스크톱 깨짐 방지: 패널 내부 텍스트 다크 고정 */
.nav.nav--over .nav-panel a{color:var(--ink-2);}
.nav.nav--over .nav-panel a:hover{color:var(--blue);}
.nav.nav--over .nav-panel--mega a b{color:var(--ink);}
.nav.nav--over .nav-panel--mega a span{color:var(--gray);}
/* 모바일 메뉴 펼침(.open=흰 배경) — nav--over 흰 글씨가 묻히는 깨짐 방지: 텍스트 다크 복귀 */
@media (max-width:940px){
  .nav.nav--over .nav-links.open .nav-trigger,
  .nav.nav--over .nav-links.open .nav-link,
  .nav.nav--over .nav-links.open .nav-panel a{color:var(--ink-2);}
  .nav.nav--over .nav-links.open .nav-trigger:hover,
  .nav.nav--over .nav-links.open .nav-link:hover{color:var(--blue);}
  .nav.nav--over .nav-links.open .nav-panel--mega a b{color:var(--ink);}
}
.nav.nav--over .nav-logo .wm{color:#fff;}
.nav.nav--over .nav-toggle{color:#fff;}
/* real Plain logo — 공식 심볼(gen/symbol.png) + 워드마크(gen/wordmark.png) 1회씩 락업. 비율은 기존 plain-logo.svg 락업(심볼 26px·텍스트 338/531·간격 140/531) 그대로 */
.nav-logo{gap:7px;}
.nav-sym{height:26px;width:auto;display:block;transition:filter .3s;}
.nav-logo-img{height:16.5px;width:auto;display:block;transition:filter .3s;}

/* ============================================================
   1) HERO — 다크 네이비, 폰 2대
   ============================================================ */
.lx-hero{position:relative;display:flex;align-items:center;color:#fff;overflow:hidden;
  margin-top:calc(-1 * var(--nav-h));
  padding:calc(clamp(92px,11vh,118px) + var(--nav-h)) 0 clamp(30px,4vh,50px);
  background:
    radial-gradient(1100px 720px at 76% 60%, rgba(23,115,235,.50), transparent 60%),
    radial-gradient(680px 520px at 6% 12%, rgba(8,24,72,.78), transparent 60%),
    linear-gradient(165deg,#020817 0%,#06142F 44%,#0B2A66 78%,#123A86 100%);}
.lx-hero__grid{display:grid;grid-template-columns:.9fr 1.04fr .48fr;gap:clamp(14px,2.2vw,34px);align-items:center;position:relative;z-index:2;}
.lx-hero__grid--2col{grid-template-columns:1fr 1fr;} /* 980px 이하에선 아래 미디어쿼리가 1fr로 접음 */
.lx-hero__tag{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:#D8E4FF;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);padding:8px 16px;border-radius:999px;backdrop-filter:blur(8px);margin-bottom:18px;}
.lx-hero h1{font-size:clamp(30px,4.4vw,52px);font-weight:800;line-height:1.18;letter-spacing:-.035em;color:#fff;}
.lx-hero__brand{display:block;margin:6px 0 14px;font-size:clamp(54px,8.2vw,104px);font-weight:900;line-height:.96;letter-spacing:-.045em;
  background:linear-gradient(180deg,#6AA6FF 0%,#3B7BF0 55%,#1E54CE 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.lx-hero__lead{font-size:clamp(15px,1.7vw,19px);line-height:1.6;color:rgba(255,255,255,.8);font-weight:500;max-width:460px;}
.lx-hero__cta{display:flex;gap:13px;margin-top:30px;flex-wrap:wrap;}
.lx-hero__cta .btn-glass{background:rgba(255,255,255,.10);color:#fff;border:1.5px solid rgba(255,255,255,.26);backdrop-filter:blur(8px);}
.lx-hero__cta .btn-glass:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.42);}
.lx-hero__glints{position:absolute;inset:0;z-index:1;pointer-events:none;background:url("gen/hero-glints.svg") center/cover no-repeat;}
.lx-hero__art{position:relative;width:100%;}
.lx-hero__art img{transition:transform .35s var(--ease-q);}
/* hero right glass module menu */
.lx-hero__menu{display:grid;gap:7px;align-self:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:18px;padding:12px 11px;backdrop-filter:blur(12px);box-shadow:0 24px 50px rgba(4,12,40,.4),inset 0 1px 0 rgba(255,255,255,.18);}
.hm-row{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:11px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);font-size:12.5px;font-weight:700;color:rgba(255,255,255,.92);white-space:nowrap;}
.hm-row .hi{flex:0 0 24px;width:24px;height:24px;border-radius:7px;background:rgba(91,155,255,.22);border:1px solid rgba(120,170,255,.3);display:grid;place-items:center;color:#9FC1FF;}
.hm-row .hi svg{width:14px;height:14px;}
.lx-scrollhint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:grid;place-items:center;gap:7px;z-index:3;font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.5);font-weight:700;}
.lx-scrollhint .mouse{width:22px;height:36px;border:2px solid rgba(255,255,255,.45);border-radius:12px;position:relative;}
.lx-scrollhint .mouse::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:2px;background:#fff;transform:translateX(-50%);animation:lx-wheel 1.6s ease-in-out infinite;}
@keyframes lx-wheel{0%{opacity:0;top:7px}30%{opacity:1}60%{opacity:0;top:16px}100%{opacity:0}}

/* ====== HERO — cinematic multi-mockup device stage ====== */
.lx-stage{position:relative;width:100%;min-height:clamp(360px,45vw,540px);perspective:1500px;}
.lx-stage__phone img{display:block;width:100%;height:auto;}
.lx-stage__glow{position:absolute;left:50%;top:46%;width:80%;aspect-ratio:1/1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(66,157,255,.40),rgba(23,115,235,.10) 46%,transparent 70%);filter:blur(8px);z-index:0;pointer-events:none;}
.lx-stage__ring{position:absolute;left:5%;top:6%;width:46%;max-width:264px;display:block;z-index:1;opacity:.9;filter:drop-shadow(0 18px 40px rgba(2,8,23,.5));}
.lx-stage__phone{position:absolute;bottom:-3%;left:-2%;width:31%;max-width:188px;z-index:5;filter:drop-shadow(0 30px 52px rgba(2,8,23,.6));}
.lx-stage__phone img{border-radius:22px;}
@media(max-width:860px){.lx-stage{min-height:clamp(300px,78vw,420px);max-width:520px;margin:6px auto 0;}}

/* ============================================================
   4) PARTNERS
   ============================================================ */
.lx-partners{background:#fff;padding:clamp(40px,5vw,68px) 0;}
.lx-partners h3{text-align:center;font-size:clamp(15px,1.8vw,20px);font-weight:800;letter-spacing:-.01em;color:var(--ink-2);margin-bottom:16px;}
.lx-partners__strip{display:block;margin:0 auto;width:min(100%,980px);height:auto;}

/* ============================================================
   5) CSR — 라이트 블루 패널 + 유리 하트
   ============================================================ */
.lx-csr{background:var(--bg-soft);}
.lx-csr__panel{position:relative;overflow:hidden;border-radius:clamp(20px,2.6vw,30px);padding:clamp(22px,2.6vw,38px);color:var(--csr-ink);
  background:radial-gradient(560px 460px at 86% 60%, rgba(255,255,255,.7), transparent 60%),linear-gradient(135deg,#DCE8FD 0%,#C7DAFB 100%);
  border:1px solid #BFD3F7;}
.lx-csr__grid{position:relative;z-index:2;display:grid;grid-template-columns:.85fr 1.35fr;gap:clamp(22px,3vw,42px);align-items:center;}
.lx-csr__eyebrow{display:inline-block;font-size:12px;font-weight:900;letter-spacing:.08em;color:var(--blue-600);}
.lx-csr h2{font-size:clamp(21px,2.7vw,33px);font-weight:900;line-height:1.18;letter-spacing:-.03em;margin:9px 0 9px;color:var(--csr-ink);}
.lx-csr__lead{font-size:13px;color:#41538A;line-height:1.55;max-width:320px;}
.lx-csr__heart{position:absolute;right:-1%;top:50%;transform:translateY(-50%);width:min(34%,300px);z-index:1;pointer-events:none;}
@media(max-width:1040px){.lx-csr__heart{display:none;}}

/* ============================================================
   9) FAQ — 라이트 + 큐브
   ============================================================ */
.lx-faqwrap{background:var(--bg-blue);}
.lx-faqwrap__grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(28px,4vw,56px);align-items:start;}
.lx-faqwrap__left{position:relative;}
.lx-faqwrap__cube{position:absolute;right:-4%;bottom:-6%;width:clamp(120px,14vw,190px);z-index:0;
  -webkit-mask-image:radial-gradient(closest-side,#000 64%,transparent 100%);mask-image:radial-gradient(closest-side,#000 64%,transparent 100%);}
@media(max-width:860px){.lx-faqwrap__cube{position:static;width:120px;margin-top:14px;}}
.faq{max-width:none;margin:0;gap:9px;}
.lx-faqwrap .faq-q{padding:14px 18px;font-size:15px;}
.lx-faqwrap .faq-a div{padding:0 18px 16px;font-size:14px;}

/* ============================================================
   FOOTER (override for navy + social)
   ============================================================ */
/* 푸터 — 브랜드 경험의 안정적 마무리(여백·위계 상향, 법적 고지 텍스트는 불변) */
.footer{background:var(--foot);padding:clamp(56px,7vw,84px) 0 44px;}
.footer .footer-top{margin-bottom:clamp(30px,4vw,46px);}
.footer .footer-brand p{font-size:15px;color:rgba(255,255,255,.78);}
.footer .footer-col a{padding:5px 0;}
.footer .footer-bottom{padding-top:26px;}
.lx-social{display:flex;gap:10px;margin-top:16px;}
.lx-social a{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:rgba(255,255,255,.7);font-size:14px;font-weight:800;transition:background .2s,color .2s;}
.lx-social a:hover{background:rgba(255,255,255,.16);color:#1773EB;}

/* ===== 최종 IA v2 추가 컴포넌트 (메인+상세 공용) ===== */
.lx-dark{background:radial-gradient(700px 460px at 78% 20%,rgba(70,120,235,.4),transparent 60%),linear-gradient(160deg,#0A1C57,#0C1E6B);color:#fff;}
.lx-dark h2{color:#fff;}
.lx-note{font-size:12px;color:var(--gray);} .lx-dark .lx-note{color:rgba(255,255,255,.5);} /* 면책 각주 AA 대비(--gray 5.4:1, 구 --gray-400 2.6:1 실패) */
.lx-disc{display:inline-block;font-size:12px;color:rgba(255,255,255,.6);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:7px 13px;border-radius:999px;}
/* dark metric band reuse */
.lx-band{padding:clamp(28px,3.6vw,52px) 0;}
/* ===== 3D 히어로 스테이지 (앱 SVG + CSS perspective + 부유 오브제) ===== */
.lx3d{position:relative;display:grid;place-items:center;perspective:1500px;min-height:clamp(300px,38vw,440px);}
.lx3d__podium{position:absolute;left:50%;bottom:7%;width:62%;height:72px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(91,155,255,.5),transparent 70%);filter:blur(10px);z-index:0;}
.lx3d__dev{position:relative;z-index:2;transform:rotateY(-16deg) rotateX(6deg);transition:transform .5s var(--ease-q);animation:lx-float 6s ease-in-out infinite;}
.lx3d__dev img{display:block;width:100%;height:auto;filter:drop-shadow(-26px 38px 50px rgba(8,20,60,.42));}
.lx3d--phone .lx3d__dev{width:min(62%,248px);}
.lx3d--dash .lx3d__dev{width:min(112%,560px);}
.lx3d__obj{position:absolute;z-index:3;pointer-events:none;animation:lx-float 5.4s ease-in-out infinite;}
.lx3d__obj img{width:100%;height:auto;filter:drop-shadow(0 16px 22px rgba(8,20,60,.32));}
.lx3d__obj--a{top:2%;right:5%;width:80px;animation-delay:.3s;}
.lx3d__obj--b{bottom:14%;left:1%;width:92px;animation-delay:.8s;}
.lx3d__obj--c{top:40%;left:-3%;width:58px;animation-delay:.5s;}
@media(prefers-reduced-motion:reduce){.lx3d__dev,.lx3d__obj{animation:none;}}
@media(max-width:560px){.lx3d__obj--c{display:none;}.lx3d--dash .lx3d__dev{width:min(120%,420px);}}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:980px){
  .lx-hero__grid{grid-template-columns:1fr;text-align:center;gap:32px;}
  .lx-hero__lead{margin-left:auto;margin-right:auto;}
  .lx-hero__cta{justify-content:center;}
  .lx-hero__art{order:-1;}
  .lx-hero__menu{display:none;}
  .lx-csr__grid{grid-template-columns:1fr;}
  .lx-faqwrap__grid{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .lx-hero__cta .btn{width:100%;}
}

/* ====== PLAIN UNIVERSE — core + orbit + glass modules ====== */
.lx-eyebrow--dark{color:#9BC6FF;background:rgba(66,157,255,.14);border-color:rgba(66,157,255,.34);}
.lx-uni{position:relative;overflow:hidden;border-radius:clamp(22px,3vw,34px);padding:clamp(34px,5vw,66px) clamp(20px,4vw,56px) clamp(30px,4vw,52px);background:radial-gradient(900px 520px at 50% -6%,#143F92 0%,#0A2052 46%,#06142F 100%);border:1px solid rgba(255,255,255,.08);box-shadow:0 44px 96px rgba(2,8,23,.5);}
.lx-uni__field{position:absolute;left:50%;top:6%;width:min(1180px,128%);aspect-ratio:1160/680;transform:translateX(-50%);background:url("gen/orbit-field.svg") center/contain no-repeat;opacity:.30;z-index:0;pointer-events:none;}
.lx-uni__head{position:relative;z-index:2;text-align:center;max-width:740px;margin:0 auto;}
.lx-uni__head h2{color:#fff;font-size:clamp(25px,3.5vw,40px);font-weight:900;letter-spacing:-.035em;line-height:1.2;margin-top:14px;}
.lx-uni__head p{color:rgba(255,255,255,.72);margin-top:14px;font-size:clamp(13.5px,1.5vw,16px);line-height:1.72;}
.lx-uni__core{position:relative;z-index:2;display:grid;place-items:center;margin:clamp(14px,2.6vw,30px) 0 clamp(20px,3vw,34px);}
.lx-uni__core img{width:clamp(132px,16vw,196px);height:auto;filter:drop-shadow(0 18px 50px rgba(23,115,235,.45));}
.lx-uni__halo{position:relative;z-index:2;display:grid;place-items:center;margin:clamp(2px,1.2vw,14px) auto clamp(14px,2.4vw,26px);width:min(548px,94%);}
.lx-uni__halo img{width:100%;height:auto;}
@media(prefers-reduced-motion:reduce){.lx-uni__halo img{filter:none;}}
@media(max-width:520px){.lx-uni__field{opacity:.45;}}

/* ============================================================
   05 벤치마크 적용 — 내비 이중 CTA · 히어로 제3트랙 · 신뢰 띠 · WHY 단계 번호
   (신규 hex 금지: var() 토큰과 기존 흰색 rgba 값만 재사용)
   ============================================================ */
/* 내비 보조 CTA — index(nav--over)용 글래스 버튼. 760px 이하에서는 주 CTA만 노출 */
.nav .btn-glass{background:rgba(255,255,255,.10);color:rgba(255,255,255,.96);border:1.5px solid rgba(255,255,255,.26);backdrop-filter:blur(8px);}
.nav .btn-glass:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.42);}
@media(max-width:940px){.nav-cta-2nd{display:none;}} /* 햄버거 모드(940↓)에선 보조 CTA 숨김 — 주 CTA만 */
/* 히어로 제3트랙 — 밑줄 텍스트 링크(흰색 계열 기존 값 재사용) */
.lx-hero__more{align-self:center;font-size:14px;font-weight:700;color:rgba(255,255,255,.85);text-decoration:underline;text-underline-offset:4px;transition:color .2s;}
.lx-hero__more:hover{color:rgba(255,255,255,1);}

/* ===== TS — 토스형 스크롤 내러티브 ===== */
/* 스펙 06 §1·§4-1. hex 화이트리스트: --grad-a/b/c 토큰 선언 3행만(현행 인라인 값 승격, G13).
   그 외 색은 var() 토큰·기존 rgba 표기만 사용(화이트는 var(--bg)). */

/* ① :root ts 토큰 7종 — 타이포 4 + 그라데이션 3 */
:root{
  --ts-display: clamp(48px, 8vw, 96px);   /* 히어로·최종 CTA 헤드 */
  --ts-head:    clamp(40px, 6vw, 80px);   /* 일반 스크린 헤드 */
  --ts-sub:     clamp(16px, 2.2vw, 22px); /* 서브 1~2줄 */
  --ts-eyebrow: clamp(14px, 1.5vw, 17px); /* 제품명·작게 */
  /* 그라데이션 토큰 — 신규 색이 아니라 현행 index 히어로 인라인 값의 승격(G13 화이트리스트) */
  --grad-a: #9BC6FF; /* 파생: Sky #429DFF 계열 연톤 — 카운트업·글로우 그라데이션 시작점 */
  --grad-b: #429DFF;
  --grad-c: #1773EB;
}

/* ② 스크린 골격 + 변형 6종 (전역 section 패딩 override — §1-5-6) */
.ts-screen{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-block:clamp(56px,9vh,120px);
  padding-inline:0;
  overflow:clip;
}
.ts-screen .container{position:relative;z-index:2;}
/* 다크 런 단일 배경 원칙 — 런 내부는 플랫 단색(스크린별 그라데이션 금지: seam 방지, §1-3) */
.ts-screen--dark{background:var(--navy-deep);color:var(--bg);}
/* 톤 캡 — entry는 직전 스크린이 라이트일 때만, exit는 직후 스크린이 라이트일 때만(다크↔다크 사이 캡 금지) */
.ts-screen--dark-entry{background:linear-gradient(180deg,var(--bg) 0%,var(--navy-deep) 16%);}
.ts-screen--dark-exit{background:linear-gradient(0deg,var(--bg) 0%,var(--navy-deep) 16%);}
/* 첫 스크린 — sticky 내비 공간을 음수 마진으로 회수(.lx-hero 패턴 승계) */
.ts-screen--first{margin-top:calc(-1 * var(--nav-h));padding-top:calc(var(--nav-h) + clamp(40px,7vh,80px));}
/* 좌카피·우비주얼 스플릿(역방향 교차) */
.ts-screen__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center;}
.ts-screen--split-rev .ts-screen__grid .ts-copy{order:2;}
.ts-screen--split-rev .ts-screen__grid .ts-visual{order:1;}
.ts-copy{max-width:760px;}
/* 센터 스택 유틸(센터형 스크린) */
.ts-screen--center{text-align:center;}
.ts-screen--center .ts-copy{margin-inline:auto;}
.ts-screen--center .ts-cta{justify-content:center;}
/* 보조 자동높이 밴드(FAQ·요금표 등) */
.ts-band{min-height:auto;padding:clamp(64px,9vw,120px) 0;}
.ts-band--center{text-align:center;}
.ts-band--center .ts-copy{margin-inline:auto;}
.ts-band--center .ts-sub{margin-inline:auto;}
.ts-band .faq{margin-top:clamp(28px,4vw,44px);text-align:left;}

/* ③ 타이포 부속 */
.ts-eyebrow{display:block;font-size:var(--ts-eyebrow);font-weight:800;color:var(--blue-600);margin-bottom:18px;letter-spacing:-.01em;} /* AA 확정: 라이트 위 #1773EB는 4.48:1 경계 → --blue-600(7.4:1). 다크는 아래 --blue-400 오버라이드 유지 */
.ts-head{font-size:var(--ts-head);font-weight:900;line-height:1.12;letter-spacing:-.04em;text-wrap:balance;word-break:keep-all;overflow-wrap:break-word;}
.ts-head--display{font-size:var(--ts-display);line-height:1.06;}
.ts-head--grad{background:linear-gradient(100deg,var(--grad-a),var(--grad-b) 45%,var(--grad-c));-webkit-background-clip:text;background-clip:text;color:transparent;}
/* 두 줄 헤드 보호(561px↑ 게이트, 스펙 §1-2 스플릿 헤드 축소 단계) — 센터 카피 폭 확장 + 스플릿 컬럼 헤드 축소. :root 클램프 토큰은 무수정(G11) */
.ts-screen--center .ts-copy{max-width:min(1100px,100%);}
.ts-screen__grid .ts-head{font-size:clamp(34px,4.2vw,56px);} /* cap 56px — 60px이면 최장 스플릿 헤드(csr S3, 1440px 실측 593px>컬럼 567px)가 3줄로 게이트 위반 */
.ts-sub{margin-top:clamp(16px,2.5vh,24px);font-size:var(--ts-sub);line-height:1.6;color:var(--gray);max-width:560px;text-wrap:pretty;}
.ts-screen--center .ts-sub{margin-inline:auto;}
.ts-visual{margin-top:clamp(32px,5vh,64px);}
.ts-visual>img{width:min(100%,720px);max-height:clamp(280px,52vh,520px);object-fit:contain;margin-inline:auto;}
.ts-screen__grid .ts-visual{margin-top:0;}
.ts-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:32px;}
.ts-cta .ts-link{align-self:center;}
.ts-link{display:inline-block;font-weight:800;font-size:clamp(15px,1.8vw,18px);color:var(--blue);}
.ts-copy>.ts-link{margin-top:24px;}
.ts-copy .lx-note{display:block;margin-top:14px;}
.ts-pillrow{margin-top:18px;}

/* ④ 특수 부속 — 카드 그리드 대체재(전부 타이포그래픽, 테두리 박스 금지) */
.ts-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,36px);margin-top:clamp(36px,6vh,64px);text-align:center;}
.ts-stats .v{font-size:clamp(44px,7vw,88px);font-weight:900;color:var(--blue);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;}
.ts-stats .l{margin-top:12px;font-size:15px;color:var(--gray);font-weight:600;}
.ts-stats+.lx-note{display:inline-block;margin-top:clamp(20px,3vh,32px);}
/* 신뢰 수치 다크 밴드 — cases·about 공유(클래스101 비즈식 굵은 통계, 동일 4수치 동일 스타일) */
.stat-band{background:var(--ink);border-radius:var(--radius-lg);padding:clamp(34px,5vw,56px) clamp(22px,3vw,44px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(28px,4vh,44px);text-align:center;}
.stat-band__v{font-size:clamp(40px,6vw,72px);font-weight:900;color:#fff;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;}
.stat-band__v span:not(.pg-count){font-size:.45em;color:var(--blue-sky);margin-left:3px;} /* 단위 전용 — pg-count(숫자 래퍼) 제외(2026-07-03) */
.stat-band__l{margin-top:12px;font-size:14px;font-weight:600;color:rgba(255,255,255,.7);line-height:1.5;}
.stat-band+.lx-note{display:inline-block;margin-top:clamp(20px,3vh,32px);}
@media(max-width:760px){.stat-band{grid-template-columns:1fr 1fr;gap:30px 20px;}}
.ts-flowline{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.5vw,40px);margin-top:clamp(36px,6vh,64px);text-align:left;}
.ts-flowline__item{border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(22px,2.6vw,30px);background:#fff;transition:transform .25s var(--ease-q),box-shadow .25s var(--ease-q),border-color .25s;}
.ts-flowline__item .section-sub{margin-top:8px;}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.ts-flowline__item:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--blue-100);}}
.ts-flowline__item .n{display:block;font-size:14px;font-weight:900;letter-spacing:.06em;color:var(--blue);margin-bottom:10px;}
.ts-flowline__item .t{display:block;font-size:clamp(16px,1.8vw,20px);font-weight:800;line-height:1.45;letter-spacing:-.02em;}
.ts-chooser{margin-top:clamp(28px,5vh,52px);border-bottom:1px solid var(--line);text-align:left;}
.ts-chooser__row{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(14px,2.5vw,36px);align-items:center;border-top:1px solid var(--line);padding-block:clamp(20px,3vh,32px);transition:background .25s var(--ease-q);}
.ts-chooser__row:hover{background:var(--bg-soft);}
.ts-chooser__name{font-size:clamp(24px,3.4vw,44px);font-weight:900;letter-spacing:-.03em;line-height:1.15;word-break:keep-all;overflow-wrap:break-word;}
.ts-chooser__when{font-size:clamp(13px,1.5vw,16px);font-weight:600;color:var(--gray);}
.ts-chooser__go,.ts-chooser__arrow{font-size:clamp(13px,1.6vw,16px);font-weight:800;color:var(--blue);white-space:nowrap;}
.ts-quote{font-size:clamp(20px,2.6vw,30px);font-weight:700;line-height:1.55;letter-spacing:-.02em;}
/* 배경 오브제(장식 전용 — 760px 이하 비표시) */
.ts-bgobj{position:absolute;z-index:0;width:clamp(110px,14vw,200px);pointer-events:none;}
.ts-bgobj--tl{top:11%;left:3%;}
.ts-bgobj--tr{top:9%;right:4%;}
.ts-bgobj--bl{bottom:8%;left:3%;}
.ts-bgobj--br{bottom:7%;right:3%;}
/* S1 단일 디바이스 스테이지 — .lx-stage 단순화 오버라이드(콜라주 해체, 스펙 §2 S1) */
.ts-screen .lx-stage{display:grid;place-items:center;width:min(100%,560px);min-height:clamp(240px,30vh,420px);margin-inline:auto;perspective:1500px;}
.ts-screen .lx-stage__phone{position:relative;inset:auto;width:auto;max-width:none;z-index:2;}
.ts-screen .lx-stage__phone img{width:auto;max-width:100%;max-height:clamp(260px,38vh,420px);margin-inline:auto;}
.ts-screen .lx-stage__ring{left:0;top:0;width:50%;max-width:280px;}
.ts-screen .lx-stage__glow{top:50%;}
/* contact 전용 유틸 — 보존 구역의 인라인 style 이관(§3 contact·G8). 좌 카드 내부 인라인도 같은 방식으로 클래스화 */
.ts-contact .lead-form{max-width:none;}
.ts-contact .grid-2{gap:12px;}
.ts-contact .form-label{font-size:13px;font-weight:700;color:var(--ink-2);}
.ts-contact .check{display:flex;align-items:center;gap:11px;min-height:44px;padding:8px 0;font-size:12.5px;color:var(--gray);cursor:pointer;} /* 라벨 전체가 44px 탭 타깃(2026-07-14) */
.ts-contact .check input{width:22px;height:22px;margin:0;accent-color:var(--blue);flex:0 0 auto;} /* 체크박스 13→22px 가독·터치 개선 */
.ts-contact .note-center{text-align:center;}

/* ⑤ 다크 톤 오버라이드 */
.ts-screen--dark .ts-eyebrow{color:var(--blue-400);}
.ts-screen--dark .ts-sub{color:rgba(255,255,255,.72);}
.ts-screen--dark .ts-link{color:var(--blue-400);}
.ts-screen--dark .ts-stats .v{color:var(--blue-400);}
.ts-screen--dark .ts-stats .l{color:rgba(255,255,255,.66);}
.ts-screen--dark .ts-flowline__item{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);}
.ts-screen--dark .ts-flowline__item .n{color:var(--blue-400);}
.ts-screen--dark .ts-chooser{border-bottom-color:rgba(255,255,255,.16);}
.ts-screen--dark .ts-chooser__row{border-top-color:rgba(255,255,255,.16);}
.ts-screen--dark .ts-chooser__row:hover{background:rgba(255,255,255,.06);}
.ts-screen--dark .ts-chooser__when{color:rgba(255,255,255,.6);}
.ts-screen--dark .ts-chooser__go,.ts-screen--dark .ts-chooser__arrow{color:var(--blue-400);}
.ts-screen--dark .lx-note{color:rgba(255,255,255,.5);}
.ts-screen--dark .ts-cta .btn-glass{background:rgba(255,255,255,.10);color:var(--bg);border:1.5px solid rgba(255,255,255,.26);backdrop-filter:blur(8px);}
.ts-screen--dark .ts-cta .btn-glass:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.42);}
/* 내비 보조 CTA — 기본(라이트 내비)은 고스트, nav--over(다크 스크린 위·JS 부여)에서만 글래스 */
.nav .btn-glass{background:var(--bg);color:var(--blue);border-color:var(--blue-100);backdrop-filter:none;}
.nav .btn-glass:hover{background:var(--blue-50);border-color:var(--blue-100);}
.nav.nav--over .btn-glass{background:rgba(255,255,255,.10);color:rgba(255,255,255,.96);border-color:rgba(255,255,255,.26);backdrop-filter:blur(8px);}
.nav.nav--over .btn-glass:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.42);}
.nav.nav--over .btn-ghost{background:rgba(255,255,255,.10);color:rgba(255,255,255,.96);border-color:rgba(255,255,255,.26);backdrop-filter:blur(8px);} /* 서브페이지 다크 히어로에서 보조 CTA 글래스 전환 */
.nav.nav--over .btn-ghost:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.42);}
.ts-band.ts-screen--first{padding-top:calc(var(--nav-h) + 48px);} /* --first 내비 보정이 .ts-band 쇼트핸드에 덮이지 않게 재선언 */

/* ⑥ 모션 — 기존 IO 리빌 이동량 확대 + CSS scroll-driven 패럴랙스(점진 강화)
   transform 충돌 가드: [data-reveal]은 .ts-visual 래퍼에만, view() 패럴랙스는 .ts-visual>img에만(§1-4) */
.js .ts-screen [data-reveal]{transform:translate3d(0,48px,0);}
.js .ts-screen [data-reveal].is-in{transform:none;}
@keyframes ts-drift{from{transform:translateY(4vh);}to{transform:translateY(-4vh);}}
@supports (animation-timeline: view()){
  @media (min-width: 768px) and (prefers-reduced-motion: no-preference){ /* 모바일 제외 — 주소창 리사이즈 스크롤 흔들림 방지 */
    .ts-visual>img{animation:ts-drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%;}
  }
}

/* ⑦ 미디어쿼리 */
@media (max-width:980px){
  .ts-screen__grid{grid-template-columns:1fr;}
  .ts-screen--split-rev .ts-screen__grid .ts-copy{order:initial;}
  .ts-screen--split-rev .ts-screen__grid .ts-visual{order:initial;}
  .ts-screen__grid .ts-visual{margin-top:clamp(24px,4vh,40px);}
  .ts-stats{grid-template-columns:repeat(2,1fr);}
  .ts-flowline{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px){
  .ts-chooser__row{grid-template-columns:1fr;gap:6px;}
  .ts-chooser__when{order:-1;}
  .ts-bgobj{display:none;}
}
/* ≤560px 타이포 축소 단계(필수 — §1-2): 확정 카피의 두 줄 강제 해제, 자연 개행 최대 3줄 허용 */
@media (max-width:560px){
  :root{ --ts-display: clamp(40px, 11vw, 48px); --ts-head: clamp(33px, 9vw, 40px); }
  .ts-head br{ display: none; } /* 확정 카피의 <br/> 비표시 → text-wrap:balance 자연 개행 */
  .ts-flowline{grid-template-columns:1fr;}
  .ts-cta .ts-link{width:100%;text-align:center;}
  /* 모바일 터치 타깃 ≥44px(2026-07-14): 텍스트 링크 세로 히트영역 확대 */
  .ts-link{padding-block:11px;}
  .ts-copy>.ts-link{margin-top:14px;}
}
/* 가로모드 폰 보호(§1-5-3) */
@media (max-height:600px), (orientation:landscape) and (max-height:480px){
  .ts-screen{min-height:auto;padding-block:64px;}
  .ts-screen--first{padding-top:calc(var(--nav-h) + 40px);}
}

/* ⑧ reduced-motion 가드 */
@media (prefers-reduced-motion:reduce){
  .ts-visual>img{animation:none!important;}
}

/* ===== PG — 프리미엄 그래픽 ===== */
/* 기준 07 §4. hex 화이트리스트 추가분: --pg-black 선언 1행만(G13·PG6 — TS·PG 블록 내
   hex 리터럴은 --grad-a/b/c + --pg-black 4행이 전부). 그 외 색은 var()·rgba 표기만.
   mix-blend-mode는 .pg-render 계열 + 그레인 .ts-screen--dark::after 에만(PG10). */

/* ① 토큰 (§4-1) */
:root{
  --pg-black: #050505;                  /* 렌더 원본 블랙 기준값 (합성 검증용) */ /* 파생: 렌더 블랙 — 크리스털 3D 렌더 mix-blend 합성 기준(Navy 근접값) */
  --pg-glow: rgba(23,115,235,.14);      /* 다크 딥 필드 글로우 — 프라이머리 블루 계열 rgba */
  --pg-glow-soft: rgba(66,157,255,.10); /* 라이트 섹션 소프트 글로우 */
  --pg-grain-a: .04;                    /* 그레인 불투명도 */
}

/* ② 딥 필드 글로우 — 히어로·최종 CTA 2곳만(§4-3, 다크 런 단일 배경 원칙 유지) */
.pg-deepfield::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 50% at 70% 40%, var(--pg-glow), transparent 70%);}
/* 라이트 섹션용 소프트 글로우(렌더 도착 후 .lx-stage__glow 계열 대체용 — 그레인 없음) */
.pg-glowsoft::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 42%, var(--pg-glow-soft), transparent 70%);}

/* ③ 그레인 — 다크 스크린 전용 필름 노이즈(§4-3). 콘텐츠 .container(z-2) 아래 z-1.
   mix-blend 유일 예외(PG10). 라이트 섹션은 그레인 없음(클린 유지). */
.ts-screen--dark::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='pgn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23pgn)'/%3E%3C/svg%3E");
  background-size:160px 160px;opacity:var(--pg-grain-a);mix-blend-mode:overlay;}

/* ④ 렌더 합성 (§4-2) — 렌더 블랙(--pg-black)≠navy 미스매치를 blend로 해소.
   blend 미지원 폴백: 그냥 <img>로 노출돼도 두 값이 근접해 시각 파탄 없음. */
.pg-render{display:block;mix-blend-mode:screen;width:min(100%,720px);max-height:clamp(280px,52vh,520px);object-fit:contain;margin-inline:auto;}
.pg-render--light{mix-blend-mode:multiply;}

/* ⑤ Three.js 캔버스 + 렌더 슬롯 (§5-2) — 캔버스는 컨테이너(z-2) 아래·그레인과 동층.
   슬롯은 렌더(R1·R8·R10 등) 도착 즉시 <picture>+.pg-render 가 끼워질 자리(빈 상태로도
   §4 딥 필드+그레인이 베이스라 시각 성립 — §5-3 폴백 사다리). */
.pg-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;}
.pg-render-slot{position:relative;width:min(100%,440px);aspect-ratio:1/1;max-height:40vh;margin-inline:auto;}

/* ⑤b 히어로 v3 하단 대형 심볼 슬롯 (§4-4 히어로 구도 — 헤드라인 상단 1/3 → 광류 교차 중앙 → 심볼 하단 1/2).
   R1 hero-logo.png 도착 전엔 빈 슬롯 + 바닥 글로우만으로 시각 성립(flow-hero-v2 내장 좌대 글로우 위 보강).
   글로우는 기존 .lx-stage__glow rgba 값 재사용(신규 hex 0)·blur 0 — radial 자체 감쇠만.
   도착 시 내부 <picture>+img.pg-render — pg-hero.js 시차 셀렉터(.pg-render)가 자동 포착. */
/* v5 크리스털 심볼 1/2 축소 + 스크롤 텔링 — v4의 중간 페이드 마스크·음수 margin-bottom(페이드 전제 장치)
   전부 제거. 심볼은 잘림 없이 플로우 공간을 실제로 예약(가시 크기 1400→700px급 — height·picture 폭 절반).
   .pg-hero-stage 는 구조 래퍼 — 폴백(미지원·reduce)에선 일반 블록(레이아웃 무영향)이고 position:relative 로
   .pg-canvas(absolute inset:0, pg-hero.js가 [data-pg-hero]=스테이지에 마운트)의 기준 박스만 제공.
   translate 센터링은 picture 층 한정이라 [data-reveal] 래퍼 transform 과 충돌 0. 375px 오버플로 0(53.5svw<100svw). */
.pg-hero-stage{position:relative;}
.pg-hero-logo{position:relative;width:100%;height:min(48.5svw,700px);margin:clamp(12px,2.5vh,32px) auto 0;}
.pg-flow--hero .ts-head--display,
.pg-deepfield .ts-head--display{letter-spacing:.008em;} /* 히어로 헤드 자간 넓힘(2026-07-14 현행 히어로 .pg-deepfield 포함, -.008em→+.008em 한 단계 더) */
.pg-hero-logo::after{content:"";position:absolute;left:50%;bottom:1%;transform:translateX(-50%);width:66%;height:18%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(66,157,255,.32),rgba(23,115,235,.08) 46%,transparent 70%);}
.pg-hero-logo picture{position:absolute;top:0;bottom:0;left:50%;width:min(800px,53.5svw);translate:-50% 0;}
.pg-hero-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;}
.pg-hero-logo .pg-render{mix-blend-mode:normal;max-height:none;width:100%;} /* 알파 PNG 블렌드 불필요 + 공용 .pg-render 520px 캡 해제 */
/* ⑤c 스크롤 텔링 시퀀스 — @supports(animation-timeline:scroll()) + 모션 허용 한정(이중 게이트 안에만
   레이아웃 변경 — 미지원·reduce 는 위 정적 히어로 그대로). 섹션=200svh 스크롤 트랙,
   .pg-hero-stage=100svh sticky 핀. 히어로가 페이지 최상단이라 scroll(root) 0~100svh = 핀 구간.
   배경(flow-hero-v2+하단 화이트 분기)·그레인을 스테이지로 이관 — 핀 동안 프레임에 고정되고,
   핀 해제 후 스테이지가 통째로 밀려 올라가며 화이트 분기가 S2(라이트)로 끊김 없이 연결.
   시퀀스: 카피 페이드아웃(8→55svh) → 심볼 상승+미세 확대(0→95svh, 카피가 사라진 자리로) →
   배경 웨이브(스테이지 ::before, 기존 flow-cross.svg 재사용) 0→.4→0 일렁임(동기).
   keyframes 의 translate 는 picture 의 -50% 브레이크아웃 센터링을 동일 유지(애니 중 센터 불변).
   화이트 그라데이션·그레인 data URI 는 기존 값 복제(신규 hex 0 — #FFFFFF 는 ⑤ 히어로 분기 기존 값). */
@keyframes pg-hero-copy-out{to{opacity:0;translate:0 -6vh;}}
@keyframes pg-hero-whale-rise{from{translate:-50% 0;scale:1;}to{translate:-50% -34svh;scale:1.06;}}
@keyframes pg-hero-wave{0%{opacity:0;translate:0 6svh;}45%{opacity:.4;}100%{opacity:0;translate:0 -6svh;}}
@supports (animation-timeline: scroll()){
  @media (min-width: 768px) and (prefers-reduced-motion: no-preference){ /* 모바일 제외 — scroll(root) 핀이 주소창 리사이즈로 역스크롤 시 화면 흔들림 유발 → 모바일은 정적 히어로 */
    /* 핀 구조 — 섹션=순수 트랙(배경·그레인 스테이지로 이관), 스테이지=뷰포트 프레임 */
    .ts-screen--first.pg-flow--hero{height:200svh;min-height:0;display:block;padding:0;background:var(--navy-deep);}
    .ts-screen--first.pg-flow--hero::after{content:none;} /* 섹션 그레인 비표시 — 스테이지 ::after 가 대체 */
    .pg-hero-stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:flex-start;
      padding-top:calc(var(--nav-h) + clamp(40px,7vh,80px));padding-bottom:clamp(56px,9vh,120px);
      background-image:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 78%,#FFFFFF 100%),url("gen/flow-hero-v2.svg");
      background-position:center;background-size:100% 100%;background-repeat:no-repeat;background-color:var(--navy-deep);}
    /* 스테이지 그레인 — ③ .ts-screen--dark::after 와 동일 레이어(z1 — 캔버스 위·콘텐츠 z2 아래) */
    .pg-hero-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='pgn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23pgn)'/%3E%3C/svg%3E");
      background-size:160px 160px;opacity:var(--pg-grain-a);mix-blend-mode:overlay;}
    /* 심볼 높이 svh 동기화 — 핀 100svh 프레임 안에서 상승 종점(-34svh)에 풀 노출되도록 캡 */
    .pg-flow--hero .pg-hero-logo{height:min(48.5svw,66svh,700px);}
    /* ① 카피 페이드아웃 — 자식 [data-reveal] 리빌(transform/opacity 트랜지션)과 요소 분리로 충돌 0 */
    .pg-flow--hero .ts-copy{animation:pg-hero-copy-out linear both;animation-timeline:scroll(root);animation-range:8svh 55svh;}
    /* ② 심볼 상승 — 카피가 사라진 자리로 떠오름(+scale 1→1.06) */
    .pg-hero-stage .pg-hero-logo picture{animation:pg-hero-whale-rise linear both;animation-timeline:scroll(root);animation-range:0 95svh;} /* stage 한정 — 히어로 슬라이더(stage 미사용)에선 비활성 */
    /* ③ 배경 웨이브 — 기존 flow-cross.svg 광류를 보조 레이어로 재사용, 중반 일렁였다 잦아듦 */
    .pg-hero-stage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
      background:url("gen/flow-cross.svg") center/100% 100% no-repeat;opacity:0;
      animation:pg-hero-wave linear both;animation-timeline:scroll(root);animation-range:0 95svh;}
  }
}

/* ⑥ 로고 통합 (§6-2) — eyebrow·chooser 2곳 한정(푸터·내비는 텍스트 유지) */
.ts-eyebrow-logo{display:block;height:clamp(22px,2.4vw,28px);width:auto;margin-bottom:18px;}
.ts-screen--center .ts-eyebrow-logo{margin-inline:auto;}
.ts-chooser__logo{display:block;height:20px;width:auto;}

/* ⑦ 미디어·접근성 가드 */
@media (max-width:560px){
  .pg-render-slot{max-height:32vh;}
  .pg-hero-logo{max-height:min(36svh,300px);} /* 짧은 화면 한-화면-한-메시지 보호 — aspect-ratio 폭주도형이라 보통 비활성, 가로모드 안전망 */
}
@media (prefers-reduced-motion:reduce){
  .pg-canvas{display:none;} /* §5-3 — JS 가드와 별개의 CSS 측 이중 안전망 */
  .pg-hero-logo picture,.pg-flow--hero .ts-copy,.pg-hero-stage::before{animation:none!important;} /* 스크롤 텔링 정적 폴백 이중 안전망(시퀀스 자체는 no-preference 게이트 안) */
}

/* ===== PG-FLOW — 스크롤 연속 흐름 배경 v3 (PG-SILK 대체 · silk-*.svg 미참조화) ===== */
/* 기준 07 §4-4 v3. 사용자 피드백("전 스크린 동일 배경 벽지화 — 스크롤 시 어색") 해소.
   원리: 모든 스크린 배경 = [상단 엣지 캡 | 중앙 모티프 | 하단 엣지 캡] 3레이어.
   엣지 캡은 가로 100% × 고정높이(--flow-cap) — 소프트 블룸 빔 3가닥(코어1.7~2px+미드
   4.5px+블룸11px 동일경로 적층)이 항상 x 25%/50%/75%(=500/1000/1500, 중앙 빔이 헤드라인
   중심축 x50%와 일치)에서 수직으로 경계를 통과하고, 굵기·경계 불투명도가 전 캡 파일에서
   동일한 "앵커 계약 v3"를 지킨다 → 스크린 높이·순서와 무관하게
   인접 경계에서 실이 실제로 이어진다. 다크↔라이트 하드 컷은 같은 기하에 팔레트만 교차
   (다크=백색/라이트=블루 재점화), --dark-entry/--dark-exit 톤 캡 위에서는 fade 캡이
   그라데이션과 함께 백→블루로 변색되어 양쪽 프로파일을 정확히 잇는다.
   중앙 모티프는 100%×100% 스트레치(preserveAspectRatio=none), 전 스트로크
   vector-effect=non-scaling-stroke — 어느 뷰포트에서도 코어/블룸 굵기 일정.
   모티프 수렴점·기점은 전부 x 50% 정렬(히어로 플레어 1000/2000, cross 교차 1000,
   spread 기점 1000, converge 종착 1000) — 헤드라인 중심축과 일치.
   모티프 서사: hero(수렴·교차 플레어) → pass/rest(라이트 통과) → enter(유입) →
   cross(교차) → spread(분산) → converge(수렴 종착). 양끝 불투명도 0 — 끊김은 모두
   "잦아듦"으로만. 신규 hex 0건(CSS=var()·기존 rgba, SVG=기존 토큰 7값 한정), blur 0,
   래스터 0, 파일당 ≤80KB(실측 최대 약 12KB). 그레인(.ts-screen--dark::after z-1)·
   data-tone·.ts-* 골격 전부 무변경. 기존 pg-silk--* 는 하위호환 별칭으로 유지되어
   HTML 무수정으로 ts-* 상태클래스 조합이 변형을 자동 선택한다. 정식 API 는 .pg-flow--*
   — 스크린당 1개만 부여, --dark 와 변형 클래스 동시 부여 금지(자동 규칙과 충돌). */

:root{ --flow-cap:360px; } /* 엣지 캡 고정 높이(크기 토큰 — 색 아님). 자동높이 밴드는 240px, ≤560px 전역 240px — 캡은 수직 축소돼도 앵커 x%·경계 불투명도 불변 */

/* ① 다크 런 — 기본 모티프 cross. 클래스 1개로 상·하 캡이 자동 동반 */
.pg-silk--dark,.pg-flow--dark,.pg-flow--cross,.pg-flow--spread,.pg-flow--enter,.pg-flow--converge{
  background-image:url("gen/flow-cap-dark-top.svg"),url("gen/flow-cross.svg"),url("gen/flow-cap-dark-bottom.svg");
  background-position:center top,center,center bottom;
  background-size:100% var(--flow-cap),100% 100%,100% var(--flow-cap);
  background-repeat:no-repeat;
  background-color:var(--navy-deep);
}
/* 자동 변형 — 시각이 왼쪽인 split-rev 는 spread(분산 기점 좌측, 비주얼 컬럼 뒤) */
.ts-screen--split-rev.pg-silk--dark,.ts-screen--split-rev.pg-flow--dark{background-image:url("gen/flow-cap-dark-top.svg"),url("gen/flow-spread.svg"),url("gen/flow-cap-dark-bottom.svg");}
/* 명시 변형 — 모티프 레이어만 교체(골격은 위 base 가 공급). 자동 규칙(2클래스)을 이기도록 동급 특이도 + 후순서 */
.pg-flow--cross.pg-flow--cross{background-image:url("gen/flow-cap-dark-top.svg"),url("gen/flow-cross.svg"),url("gen/flow-cap-dark-bottom.svg");}
.pg-flow--spread.pg-flow--spread{background-image:url("gen/flow-cap-dark-top.svg"),url("gen/flow-spread.svg"),url("gen/flow-cap-dark-bottom.svg");}
.pg-flow--enter.pg-flow--enter{background-image:url("gen/flow-cap-dark-top.svg"),url("gen/flow-enter.svg"),url("gen/flow-cap-dark-bottom.svg");}
.pg-flow--converge.pg-flow--converge{background-image:url("gen/flow-cap-dark-top.svg"),url("gen/flow-converge.svg"),url("gen/flow-cap-dark-bottom.svg");}

/* ② 라이트 스크린 공통 — 연한 앵커 캡 + 코너 휴지 모티프(rest). 중앙 클린 유지.
   data-tone 훅으로 자동 적용(index S2·S3·S10·S11 등 무클래스 라이트 포함) — 흐름이
   라이트 구간을 "통과"하는 인상은 상·하 캡 앵커가 만든다 */
.ts-screen[data-tone="light"],.ts-band[data-tone="light"],.pg-silk--light,.pg-flow--rest,.pg-flow--pass{
  background-image:url("gen/flow-cap-light-top.svg"),url("gen/flow-rest-light.svg"),url("gen/flow-cap-light-bottom.svg");
  background-position:center top,center,center bottom;
  background-size:100% var(--flow-cap),100% 100%,100% var(--flow-cap);
  background-repeat:no-repeat;
  background-color:var(--bg);
}
/* 자동높이 밴드(FAQ·요금표·contact)는 캡 수직 축소 — 짧은 섹션에서 상·하 캡 겹침 방지 */
.ts-band[data-tone="light"],.pg-silk--band:not([data-tone="dark"]){--flow-cap:240px;}
/* 통과 변형(opt-in) — A2 실이 화면을 관통. index S2·S10 권장 */
.pg-flow--pass.pg-flow--pass{background-image:url("gen/flow-cap-light-top.svg"),url("gen/flow-pass-light.svg"),url("gen/flow-cap-light-bottom.svg");}

/* ③ 톤 전환 결합 — entry/exit 그라데이션을 4번째(최하) 레이어로 보존하고,
   전환 측 캡을 fade 캡으로 교체(경계 불투명도가 인접 라이트 캡과 일치) */
.ts-screen--dark-entry.pg-silk--dark,.ts-screen--dark-entry.pg-flow--dark,.ts-screen--dark-entry.pg-flow--enter{
  background-image:url("gen/flow-cap-fade-in.svg"),url("gen/flow-enter.svg"),url("gen/flow-cap-dark-bottom.svg"),linear-gradient(180deg,var(--bg) 0%,var(--navy-deep) 16%);
  background-position:center top,center,center bottom,0 0;
  background-size:100% var(--flow-cap),100% 100%,100% var(--flow-cap),100% 100%;
  background-repeat:no-repeat;
  background-color:var(--navy-deep);
}
.ts-screen--dark-exit.pg-silk--dark,.ts-screen--dark-exit.pg-flow--dark,.ts-screen--dark-exit.pg-flow--converge{
  background-image:url("gen/flow-cap-dark-top.svg"),url("gen/flow-converge.svg"),url("gen/flow-cap-fade-out.svg"),linear-gradient(0deg,var(--bg) 0%,var(--navy-deep) 16%);
  background-position:center top,center,center bottom,0 0;
  background-size:100% var(--flow-cap),100% 100%,100% var(--flow-cap),100% 100%;
  background-repeat:no-repeat;
  background-color:var(--navy-deep);
}

/* ④ 종착 — 푸터 직전 마지막 다크 스크린: 하단 캡 없이 converge 로 흐름 종결
   (:last-of-type = 문서 마지막 <section> 일 때만. 최종 CTA 밴드 별칭 포함) */
.pg-silk--dark:last-of-type,.pg-flow--dark:last-of-type,.pg-flow--finale.pg-flow--finale,.pg-silk--band[data-tone="dark"]{
  background-image:url("gen/flow-cap-dark-top.svg"),url("gen/flow-converge.svg");
  background-position:center top,center;
  background-size:100% var(--flow-cap),100% 100%;
  background-repeat:no-repeat;
  background-color:var(--navy-deep);
  --flow-cap:360px; /* 풀스크린 종착 — 밴드 축소 룰 상쇄 */
}
/* 마지막 섹션이 라이트(contact)면 하단 캡 생략 — 푸터 네이비에 실이 잘리지 않게 */
.ts-screen[data-tone="light"]:last-of-type,.ts-band[data-tone="light"]:last-of-type{
  background-image:url("gen/flow-cap-light-top.svg"),url("gen/flow-rest-light.svg");
  background-position:center top,center;
  background-size:100% var(--flow-cap),100% 100%;
}

/* ⑤ 히어로 — flow-hero-v2(별빛+수평 광류 3빔이 x50% 정중앙 교차 플레어+하단 심볼 글로우
   +경계 앵커 v3 내장 — 하단 앵커는 DARK 프로파일로 파일 안에서 직접 종결, 별도 캡 불필요).
   .pg-deepfield 동시 부여 시 기존 글로우는 가드로 차단(silk 시절 가드 승계) */
.pg-silk--hero,.pg-flow--hero{
  background-image:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 78%,#FFFFFF 100%),url("gen/flow-hero-v2.svg"); /* 하단 화이트 그라데이션 분기 — 심볼 페이드와 동기 */
  background-position:center;
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-color:var(--navy-deep);
}
.pg-deepfield.pg-silk--hero::before,.pg-deepfield.pg-flow--hero::before{content:none;}

/* ⑥ 모바일 — 짧은 화면에서 상·하 캡 겹침 방지(앵커 계약은 캡 높이와 무관) */
@media (max-width:560px){:root{--flow-cap:240px;}}

/* ===== MOTION — 위계·프리미엄 모션 (스펙 08 §2 M1·M2·M4·M5·M6 — additive only) =====
   기존 선언 수정 0건 · 신규 hex 0건(var()·기존 값만) · HTML 무수정(기존 클래스/구조 셀렉터만).
   전 모션 prefers-reduced-motion:no-preference 내부 — reduce 시 무효과.
   M3(신뢰 수치 카운트업)는 landing.js 전담 — CSS 불필요. */

/* M1. chooser 행 호버 포커스(#2) — a 행 한정(div 행 자동 제외).
   행 자체는 [data-reveal].is-in transition이 셰도잉하므로 자식 span에만 적용 */
@media (prefers-reduced-motion:no-preference){
  a.ts-chooser__row>span{transition:opacity .3s var(--ease-q),translate .35s var(--ease-q);}
  .ts-chooser:hover a.ts-chooser__row:not(:hover)>span{opacity:.45;}
  a.ts-chooser__row:hover>span{translate:10px 0;}
}

/* M2. ts-link 호버 넛지(#3 축소판) — translate 속성이라 reveal의 transform·reduce 가드(transform:none!important)와 비충돌 */
@media (prefers-reduced-motion:no-preference){
  a.ts-link{transition:translate .25s var(--ease-q);}
  /* is-in transition 셰도잉 해소 — 기존 값 재선언 + translate 추가(신규 셀렉터, 기존 :26 무수정) */
  .js a.ts-link[data-reveal].is-in{transition:opacity .8s var(--ease-q),transform .9s var(--ease-q),translate .25s var(--ease-q);}
  a.ts-link:hover{translate:4px 0;}
}

/* M4. ts-head--grad 시머 스윕(#9) — --grad-a/b/c 토큰만 사용, 신규 색 0 */
@media (prefers-reduced-motion:no-preference){
  .ts-head--grad{background-size:200% 100%;animation:ts-grad-sweep 9s ease-in-out infinite alternate;}
  @keyframes ts-grad-sweep{from{background-position:0% 50%}to{background-position:100% 50%}}
}

/* M5. universe-halo 스크럽 회전·스케일(#8) — ⑥ @supports 선언(timeline·range)을 상속하고
   animation-name만 신규 셀렉터(후순서·상위 특이도)로 교체 — 기존 블록 무수정.
   reduce 폴백은 ⑧ .ts-visual>img{animation:none!important}가 이미 커버, 미지원=정적 */
@supports (animation-timeline: view()){
  @media (min-width: 768px) and (prefers-reduced-motion:no-preference){
    #universe .ts-visual>img{animation-name:ts-halo-turn;}
    @keyframes ts-halo-turn{from{transform:rotate(-7deg) scale(.94)}to{transform:rotate(7deg) scale(1.03)}}
  }
}

/* M6. 비주얼 클립 마스크 리빌(#5) — 래퍼는 animation(clip-path), data-reveal은 transition(transform/opacity)
   → 속성 비충돌. img의 ts-drift와도 요소 분리. .pg-render-slot 래퍼에도 적용되나 무해(투명) */
@supports (animation-timeline: view()){
  @media (min-width: 768px) and (prefers-reduced-motion:no-preference){
    .ts-screen__grid .ts-visual{animation:ts-clip-open linear both;animation-timeline:view();animation-range:entry 0% entry 85%;}
    @keyframes ts-clip-open{from{clip-path:inset(12% 8% round 28px)}to{clip-path:inset(0 round 0)}}
  }
}

/* reduced-motion 해제 — ⑧ 가드 보강(추가만): M6 이중 안전망 */
@media (prefers-reduced-motion:reduce){
  .ts-screen__grid .ts-visual{animation:none!important;clip-path:none!important;}
}

/* ===== PG-UX — UX 모션 라운드(2026-06-12): 라이트 스윕·카운트업·디바이스 틸트 =====
   additive only — 기존 선언 수정 0건 · 신규 hex 0건(흰색 rgba + rgba(66,157,255)·rgba(23,115,235) 기존 표기 재사용).
   신규 네임스페이스 .pg-sheen/.pg-tilt/.pg-count — 전 파일 미사용 확인(충돌 0). */

/* ① 히어로 크리스털 라이트 스윕 — .pg-hero-logo <picture> 내부 오버레이(.pg-sheen).
   picture 가 스크롤 텔링 rise(pg-hero-whale-rise)의 주체라 sheen 도 자동 동반 — 별도 타임라인 0,
   기존 ⑤c 시퀀스 무수정. mask 가 로고 알파 PNG(landing.css 기준 상대경로 render/…)를 그대로 떠
   빛이 로고 모양 안에서만 흐른다. mix-blend-mode 예외 추가분: .pg-render 계열과 동일한 렌더 합성층. */
@property --shx{syntax:"<percentage>";inherits:false;initial-value:50%;}
@property --shy{syntax:"<percentage>";inherits:false;initial-value:36%;}
.pg-sheen{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(34% 26% at var(--shx,50%) var(--shy,36%),rgba(255,255,255,.85),rgba(66,157,255,.45) 44%,rgba(66,157,255,0) 72%);
  mix-blend-mode:screen;opacity:.85;
  -webkit-mask-image:url("render/hero-logo-alpha.webp");mask-image:url("render/hero-logo-alpha.webp"); /* png→webp(2026-07-03): <picture> img와 동일 파일로 캐시 공유 — PNG 1.9MB 이중 로드 제거 */
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;}
@supports not ((-webkit-mask-image:url("#")) or (mask-image:url("#"))){.pg-sheen{display:none;}} /* mask 미지원 — 사각 글로우 노출 방지 */
/* hover 불가 기기 — 포인터 대신 좌→우 느린 자동 스윕. @property 미등록 엔진은 중간 점프 1회뿐(소프트 글로우라 무해) */
@keyframes pg-sheen-sweep{from{--shx:16%;}to{--shx:84%;}}
@media (hover:none){
  .pg-sheen{animation:pg-sheen-sweep 8s ease-in-out infinite alternate;}
}
@media (prefers-reduced-motion:reduce){
  .pg-sheen{animation:none!important;} /* 스윕 정지 — 중앙 정적 하이라이트로 잔존 */
}

/* ② 신뢰 수치 카운트업 훅(.pg-count) — 동작은 landing.js(animateCount). 숫자 폭 고정으로 카운트 중 레이아웃 흔들림 방지 */
.pg-count{font-variant-numeric:tabular-nums;}

/* ③ 제품 디바이스 카드 3D 틸트+글레어(.pg-tilt — index S5~S8 .ts-visual 4개).
   tilt 는 transform 이 아니라 rotate 개별 속성(JS 인라인) — [data-reveal] 리빌의
   transform 트랜지션(:26)·reduce 가드(transform:none!important)와 비충돌(M2 translate 패턴 동일 원리).
   글레어는 ::after 의 --gx 위치만 JS 갱신. hover:none 은 JS 가드+아래 미디어 게이트로 완전 비활성. */
.pg-tilt{--gx:50%;position:relative;}
.pg-tilt::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(135deg,rgba(255,255,255,0) calc(var(--gx) - 22%),rgba(255,255,255,.12) var(--gx),rgba(255,255,255,0) calc(var(--gx) + 22%));}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .ts-screen__grid{perspective:800px;}
  .pg-tilt{transition:rotate .25s ease;}
  .pg-tilt::after{transition:opacity .3s ease;}
  .pg-tilt:hover::after{opacity:1;}
}
@media (prefers-reduced-motion:reduce){
  .pg-tilt:hover>img{filter:drop-shadow(0 28px 56px rgba(23,115,235,.28));} /* reduce — 그림자 변화만(이동·회전 0) */
}

/* ④ 최종 CTA 메시 그라디언트(.pg-mesh — index S12 한정, assets/js/pg-mesh.js).
   캔버스는 섹션 배경층(z-index:0) — .container(z-index:2) 아래. 상단 페이드 마스크로
   pg-flow--finale 경계 캡과 무단차 합성(엣지 앵커 계약 보존). JS 가드: reduce·WebGL 실패·
   IO 이탈·탭 숨김 → 미구동/정지/자체 제거(기존 딥필드 배경이 그대로 폴백). */
.pg-mesh{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.4s ease;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 100%);mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 100%);}
.pg-mesh.is-on{opacity:.92;}
@media (prefers-reduced-motion:reduce){.pg-mesh{display:none;}}

/* ============================================================
   TOSS-LIGHT 본문 재설계(2026-06-12) — 매니페스토 · 라이트 제품 쇼케이스(확대 UI+플로팅 카드) · 감성 사진
   다크 런 해체 → 라이트 지배. 다크는 히어로·Universe·최종 CTA 북엔드에만.
   ============================================================ */
/* 매니페스토 — 큰 센터 선언 */
.pg-manifesto .ts-head{font-size:clamp(31px,5.4vw,62px);line-height:1.22;letter-spacing:-.038em;}
.pg-manifesto .ts-sub{max-width:620px;margin-inline:auto;}

/* 라이트 제품 쇼케이스 — 디바이스 확대 + 플로팅 알림 카드 */
.pg-showcase{position:relative;}
.pg-showcase>img{width:min(112%,580px);height:auto;margin-inline:auto;}
/* 상세 히어로 비주얼 글로우 — 메인 슬라이드와 통일(라이트 배경 은은 후광) */
.ts-screen--first .ts-visual{position:relative;}
.ts-screen--first .ts-visual::before{content:"";position:absolute;inset:-3%;z-index:0;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle at 50% 46%,rgba(66,157,255,.2),rgba(66,157,255,0) 63%);filter:blur(36px);}
.ts-screen--first .ts-visual>img,.ts-screen--first .ts-visual>picture{position:relative;z-index:1;}
/* 라이트 히어로 면책 pill(insight 라이트화 대응) — 다크용 흰 글씨가 묻히지 않게 */
.ts-screen:not(.ts-screen--dark) .lx-disc{color:var(--gray);background:var(--bg-soft);border-color:var(--line);}
.pg-fc{position:absolute;z-index:4;width:clamp(150px,19vw,206px);height:auto;
  animation:lx-float 6s ease-in-out infinite;}
.pg-fc--tr{top:5%;right:-5%;}
.pg-fc--bl{bottom:9%;left:-7%;animation-delay:-2.4s;}
.pg-fc--br{bottom:13%;right:-4%;animation-delay:-1.2s;}
@media (prefers-reduced-motion:reduce){.pg-fc{animation:none;}}
@media(max-width:560px){
  .pg-showcase>img{width:100%;}
  .pg-fc{width:48%;}
  .pg-fc--tr{right:-1%;top:1%;} .pg-fc--bl{left:-1%;} .pg-fc--br{right:-1%;}
}

/* 감성 라이프스타일 사진 — 풀블리드 + 좌측 그라데이션 + 흰 카피 */
.pg-photo{position:relative;min-height:clamp(420px,62vh,640px);display:flex;align-items:center;overflow:clip;padding-block:0;}
.pg-photo__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.pg-photo::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(95deg,rgba(2,8,23,.80) 0%,rgba(2,8,23,.52) 42%,rgba(2,8,23,.14) 100%);}
.pg-photo>.container{position:relative;z-index:2;}
.pg-photo .ts-head{color:#fff;}
.pg-photo .ts-sub{color:rgba(255,255,255,.88);}

/* ============================================================
   드림시큐리티 벤치마크(docs/11) 적용 — 2026-06-18
   P3 제품 컬러 카드 캐러셀 · P4 워터마크 헤드라인 · 제품 색맵.
   additive only — 신규 hex 0(흰색 #fff·rgba·기존 토큰 var()만), reduced-motion 가드,
   캐러셀은 scroll-snap(스크롤타임라인 아님 → 모바일 역스크롤 흔들림 무관).
   ============================================================ */

/* 제품 색맵 — 블루 유니버스 토큰 조합(명도 단계로 5제품 구분, 신규 hue 0). P2·P3 공용 */
.pg-prod--edu{--pc1:var(--blue-sky);--pc2:var(--blue);}
.pg-prod--school{--pc1:var(--blue);--pc2:var(--blue-deep);}
.pg-prod--club{--pc1:var(--blue-400);--pc2:var(--blue-600);}
.pg-prod--insight{--pc1:var(--navy-card);--pc2:var(--navy);}
.pg-prod--csr{--pc1:var(--blue-deep);--pc2:var(--blue-700);}

/* P4. 대형 워터마크 영문 헤드라인 — 섹션 상단 옅은 초대형 텍스트(콘텐츠 뒤, 순수 장식) */
.ts-wm{position:absolute;top:clamp(8px,3.5vh,38px);left:50%;transform:translateX(-50%);
  z-index:0;pointer-events:none;user-select:none;white-space:nowrap;
  font-size:clamp(60px,15vw,188px);font-weight:900;letter-spacing:-.04em;line-height:1;
  color:rgba(23,115,235,.05);}
.ts-screen--dark .ts-wm{color:rgba(255,255,255,.05);}
@media (max-width:560px){.ts-wm{display:none;}}  /* 모바일은 워터마크 생략 — 폭 초과·가독 방해 방지 */

/* P3. 제품 컬러 카드 캐러셀 — index chooser 대체(가로 스냅 레일 + 화살표) */
.pg-rail-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:clamp(16px,3vh,28px);}
.pg-rail-hint{font-size:13px;font-weight:700;color:var(--gray);}
.pg-rail-nav{display:inline-flex;gap:10px;flex:none;}
.pg-rail-nav button{appearance:none;width:46px;height:46px;border-radius:999px;border:1.5px solid var(--line);
  background:#fff;color:var(--blue);font-size:20px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .2s ease,background .2s ease,color .2s ease,opacity .2s ease;}
.pg-rail-nav button:hover{border-color:var(--blue);background:var(--blue-50);}
.pg-rail-nav button:disabled{opacity:.32;cursor:default;}
.pg-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,1fr);gap:clamp(16px,2vw,24px);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  margin-inline:-24px;padding:4px 24px 6px;}  /* 컨테이너 패딩 상쇄 — 엣지까지 블리드 */
.pg-rail::-webkit-scrollbar{display:none;}
.pg-pcard{scroll-snap-align:start;position:relative;overflow:hidden;text-align:left;
  border-radius:var(--radius-lg);padding:clamp(22px,2.6vw,30px);
  min-height:clamp(312px,34vw,392px);
  background:linear-gradient(150deg,var(--pc1),var(--pc2));color:#fff;
  display:flex;flex-direction:column;
  transition:transform .25s var(--ease-q),box-shadow .25s var(--ease-q);}
.pg-pcard::after{content:"";position:absolute;width:200px;height:200px;right:-54px;top:-64px;border-radius:999px;
  background:radial-gradient(circle,rgba(255,255,255,.22),rgba(255,255,255,0) 70%);pointer-events:none;}
.pg-pcard__ic{position:relative;z-index:1;width:38px;height:38px;color:#fff;margin-bottom:14px;} /* 두레이식 아이콘 서비스 카드 */
.pg-pcard__ic svg{width:100%;height:100%;}
/* 3열 플로우라인(가치 3종 — 제품 상세 토스식 가치 섹션 공용, about 로컬에서 전역 승격 2026-06-22) */
.ts-flowline--tri{grid-template-columns:repeat(3,1fr);}
@media (max-width:980px){.ts-flowline--tri{grid-template-columns:1fr;}}

/* == 크리스털 스우시 키비주얼(2026-07-14) — Why(라이트)·최종 CTA(다크) 섹션 배경. 매뉴얼 15장 저채도 스우시 모티프(silk-hero 언어 계승). 정적(모션 없음) — reduce 가드 불필요. 콘텐츠(.container z2)는 스우시(z0)·그레인(z1) 위. == */
.pg-whyscene,.pg-ctascene{position:relative;overflow:hidden;}
.pg-whyviz,.pg-ctaviz{position:absolute;left:0;width:100%;height:100%;z-index:0;pointer-events:none;object-fit:cover;}
.pg-whyviz{top:0;object-position:center top;}
.pg-ctaviz{bottom:0;object-position:center bottom;}
.pg-whyscene>.container,.pg-ctascene>.container{position:relative;z-index:2;}
.pg-whyscene--flip .pg-whyviz{transform:scaleX(-1);} /* about 내러티브 섹션 교차 미러 — 같은 스우시가 좌우로 번갈아 흘러 리듬 부여(2026-07-14) */

/* == 구독 요금제 준비중(2026-07-22) — 셀프서브 구독 섹션(.is-prep)만 디밍·비상호작용, 협의 트랙은 무손. 상단 .pric-prep 배너는 선명 유지 == */
.pric-prep{max-width:820px;margin:0 auto clamp(22px,3.2vh,34px);text-align:center;background:var(--blue-50);border:1px solid var(--blue-100);border-radius:var(--radius-lg);padding:clamp(18px,2.4vw,26px) clamp(20px,3vw,32px);}
.pric-prep b{display:block;font-size:clamp(16px,2vw,20px);font-weight:800;letter-spacing:-.02em;color:var(--blue-700);margin-bottom:7px;}
.pric-prep p{font-size:14.5px;color:var(--gray);line-height:1.6;margin:0;}
.is-prep .prod-tabs,.is-prep .pric-billing,.is-prep .prod-block,.is-prep .ts-visual,.is-prep .pric-calc,.is-prep .mx-scroll{filter:saturate(.45);opacity:.5;pointer-events:none;}
/* 기능 하이라이트 그리드(잔디/토스식 — 제품 페이지 "기능 한눈에") 2026-06-23 */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.8vw,18px);margin-top:clamp(28px,4vh,44px);text-align:left;}
.feat-grid__item{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(18px,2.2vw,24px);transition:transform .25s var(--ease-q),box-shadow .25s var(--ease-q),border-color .25s;}
.feat-grid__t{font-size:clamp(15px,1.7vw,17px);font-weight:800;letter-spacing:-.02em;color:var(--ink);}
.feat-grid__t::before{content:"";display:inline-block;width:7px;height:7px;border-radius:2px;background:var(--blue);margin-right:9px;vertical-align:2px;}
.feat-grid__d{font-size:13.5px;color:var(--gray);line-height:1.6;margin-top:7px;}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.feat-grid__item:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--blue-100);}}
@media (max-width:860px){.feat-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.feat-grid{grid-template-columns:1fr;}}
.pg-pcard__tag{position:relative;z-index:1;font-size:12.5px;font-weight:800;letter-spacing:.06em;color:rgba(255,255,255,.78);}
.pg-pcard__name{position:relative;z-index:1;margin-top:auto;font-size:clamp(26px,2.9vw,34px);font-weight:900;letter-spacing:-.02em;}
.pg-pcard__when{position:relative;z-index:1;margin-top:8px;font-size:14.5px;font-weight:600;color:rgba(255,255,255,.84);line-height:1.5;word-break:keep-all;}
.pg-pcard__go{position:relative;z-index:1;margin-top:15px;font-size:14px;font-weight:800;color:#fff;}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .pg-pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
}
@media (max-width:560px){
  .pg-rail{grid-auto-columns:84%;}
}

/* ============================================================
   히어로 서비스 슬라이더 (드림시큐리티 벤치마크 — 2026-06-18)
   슬라이드1=브랜드(크리스털 심볼), 2~6=서비스. 가로 transform 슬라이드 + 도트·화살표·자동재생·스와이프.
   스크롤텔링(.pg-hero-stage ⑤c)과 배타 — 슬라이더 섹션은 pg-flow--hero/stage 미사용(자동 비활성).
   입자(pg-hero.js)는 [data-hero-slider] 섹션에 그대로 마운트. 신규 hex 0(흰색·rgba·토큰만).
   ============================================================ */
.hero-slider{position:relative;height:100svh;min-height:560px;overflow:hidden;padding:0;}
.hero-slider .hero-viewport{position:relative;z-index:2;height:100%;overflow:hidden;}
.hero-track{display:flex;height:100%;will-change:transform;transition:transform .65s var(--ease-q);}
.hero-slide{flex:0 0 100%;width:100%;height:100%;display:flex;align-items:center;}
/* 드림시큐리티 정합 — 좌 카피 / 우 비주얼 split (브랜드·서비스 공통) */
.hero-slide .container{width:100%;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center;padding-top:var(--nav-h);}
.hero-slide--brand .ts-cta{justify-content:flex-start;}
.hero-slide--brand .pg-hero-logo{height:min(46svw,560px);margin:0;}
.hero-slide--brand .pg-hero-logo picture{width:min(520px,44svw);}
.hero-slide--svc .ts-eyebrow{color:var(--blue-400);font-size:14px;margin-bottom:14px;}
/* 레퍼런스 정합 — 서비스 슬라이드 헤드라인 작게(브랜드보다 작게)·우측 비주얼 비중 ↑ */
.hero-slide--svc .ts-head{font-size:clamp(28px,3.6vw,46px);line-height:1.2;letter-spacing:-.025em;}
.hero-slide--svc .ts-sub{font-size:clamp(15px,1.5vw,17px);max-width:460px;}
.hero-slide--svc .container{grid-template-columns:1fr 1.1fr;}
@media (max-width:760px){.hero-slide--svc .ts-sub{margin-inline:auto;}}
/* 신뢰 섹션(S2) — 5개교 대형 + 보조 한 줄(심플, 신뢰 수치 4종 보존) */
.trust-hero{margin-top:clamp(26px,5vh,50px);text-align:center;}
.trust-hero__num{font-size:clamp(76px,15vw,156px);font-weight:900;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,var(--blue-sky),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent;}
.trust-hero__num span{font-size:.3em;font-weight:800;margin-left:.08em;-webkit-text-fill-color:var(--blue);color:var(--blue);}
.trust-hero__label{margin-top:6px;font-size:clamp(15px,1.8vw,18px);font-weight:700;color:var(--ink-2);}
.trust-sub{margin-top:clamp(22px,4vh,38px);display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,3vw,40px);}
.trust-sub span{font-size:14.5px;color:var(--gray);}
.trust-sub b{font-weight:800;color:var(--ink);font-size:16px;margin-right:5px;}
.hero-slide__visual{position:relative;display:flex;justify-content:center;align-items:center;perspective:1300px;}
/* device 뒤 후광 글로우(목업보다 크게) — 휑함 해소 */
/* 슬라이드별 글로우 색(제품 구분) — nth-child로 HTML 무수정. 슬라이드1=브랜드, 2~6=서비스 */
.hero-slide{--glow:66,157,255;}
.hero-slide:nth-child(2){--glow:66,157,255;}   /* edu — 스카이 */
.hero-slide:nth-child(3){--glow:23,115,235;}   /* School — 로열 */
.hero-slide:nth-child(4){--glow:21,93,252;}    /* Impact — 딥블루 */
.hero-slide:nth-child(5){--glow:91,160,255;}   /* Club — 밝은 블루 */
.hero-slide:nth-child(6){--glow:110,120,250;}  /* Insight — 인디고 */
.hero-slide__visual::before{content:"";position:absolute;width:106%;aspect-ratio:1/1.15;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 50% 44%,rgba(var(--glow),.42),rgba(var(--glow),0) 64%);filter:blur(34px);}
.hero-slide__visual img{position:relative;z-index:1;width:min(100%,470px);height:auto;
  transform:rotateY(-9deg) rotateX(1.5deg);filter:drop-shadow(0 38px 76px rgba(2,8,23,.64));}
@media (max-width:760px){.hero-slide__visual img{transform:none;}}
/* 우하단 컨트롤 — 가로 선분 인디케이터 + 라인 화살표(드림시큐리티와 동일 위치·형태, 색만 Plain) */
.hero-nav{position:absolute;right:clamp(20px,5vw,64px);bottom:clamp(26px,6vh,52px);z-index:5;display:flex;align-items:center;gap:clamp(14px,2vw,26px);}
.hero-dots{display:flex;align-items:center;gap:9px;}
.hero-dot{width:30px;height:2px;border:0;padding:0;background:rgba(255,255,255,.3);cursor:pointer;transition:background .25s ease;}
.hero-dot.is-active{background-color:#fff;} /* background-color(단축X) — pointer:coarse의 background-clip:content-box 보존 */
@media (pointer:coarse){.hero-dot{padding:21px 0;box-sizing:content-box;background-clip:content-box;}} /* 터치 탭 영역 ≥44px, 시각 라인은 2px 유지 */
.hero-arrows{display:flex;gap:8px;}
.hero-arrow{width:38px;height:38px;border-radius:999px;border:1.5px solid rgba(255,255,255,.28);background:transparent;color:#fff;font-size:19px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s ease,border-color .2s ease;}
.hero-arrow:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55);}
.no-js .hero-nav{display:none;}
@media (max-width:760px){
  .hero-slide .container{grid-template-columns:1fr;text-align:center;gap:clamp(14px,4vh,26px);}
  .hero-slide .ts-copy{margin-inline:auto;}
  .hero-slide--brand .ts-cta{justify-content:center;}
  .hero-slide__visual{order:-1;}
  .hero-slide__visual img{width:min(64%,240px);}
  .hero-slide--brand .pg-hero-logo{height:min(56svw,320px);margin-inline:auto;}
  .hero-slide--brand .pg-hero-logo picture{width:min(360px,62svw);}
  .hero-nav{left:50%;right:auto;transform:translateX(-50%);bottom:clamp(16px,3vh,28px);}
}
@media (max-width:560px){
  .hero-arrows{display:none;} /* 모바일은 스와이프 */
}
@media (prefers-reduced-motion:reduce){
  .hero-track{transition:none;}
}

/* ===== 요금 컴포넌트(허브&스포크 공유 — pricing.html 허브 + 제품 페이지 #pricing 재사용) 2026-06-22 ===== */
@media (min-width: 901px) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1081px) { .price-grid { grid-template-columns: repeat(4, 1fr); } }
.price-product { max-width: 760px; margin: 0 auto clamp(20px, 3vh, 32px); text-align: center; }
.price-product .eyebrow { margin-bottom: 12px; }
.consult-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.4vw, 24px); }
@media (max-width: 720px) { .consult-grid { grid-template-columns: 1fr; } }
.seg-toggle { display: inline-flex; gap: 4px; padding: 5px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; }
.seg-btn { appearance: none; border: 0; background: transparent; color: var(--gray); font: inherit; font-weight: 700; font-size: clamp(14px, 1.5vw, 15px); padding: 8px 22px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; cursor: pointer; transition: background .2s ease, color .2s ease; }
.seg-btn.is-active { background: var(--blue); color: #fff; box-shadow: var(--shadow-sm); }
.pric-billing { display: none; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 auto clamp(20px, 3vh, 30px); }
.pric-billing.is-on { display: flex; }
.pric-billing .seg-btn { padding: 9px 20px; }
.pric-billing .seg-toggle .seg-btn.is-active { background: var(--blue); color: #fff; box-shadow: var(--shadow-sm); }
.pric-billing .seg-toggle .seg-btn:not(.is-active) { background: transparent; color: var(--gray); }
.bill-chip { font-size: 13px; font-weight: 800; color: var(--blue); background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: 999px; padding: 7px 14px; }
.price-card.best { background: var(--blue-50); }
.price-card.best::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: linear-gradient(90deg, var(--blue-deep), var(--blue-sky)); }
@media (min-width: 901px) { .price-grid .price-card.best { transform: scale(1.035); z-index: 1; } .price-grid .price-card.best:hover { transform: scale(1.035) translateY(-4px); } }
@media (max-width: 900px) { .price-card.best { order: -1; } }
@media (prefers-reduced-motion: reduce) and (min-width: 901px) { .price-grid .price-card.best, .price-grid .price-card.best:hover { transform: none; } }
.pric-matrix { width: 100%; border-collapse: collapse; font-size: 14px; }
.pric-matrix th, .pric-matrix td { padding: 12px 10px; text-align: center; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pric-matrix thead th { color: var(--ink); font-weight: 800; font-size: 14.5px; }
.pric-matrix thead th.is-best { color: var(--blue); background: var(--blue-50); border-radius: 12px 12px 0 0; }
.pric-matrix th:first-child, .pric-matrix td:first-child { text-align: left; font-weight: 700; color: var(--ink-2); }
.pric-matrix .mx-group td { background: var(--bg-soft); font-weight: 800; color: var(--gray); font-size: 12.5px; letter-spacing: .04em; text-align: left; }
.pric-matrix .mx-yes { color: var(--blue); font-weight: 800; }
.pric-matrix .mx-no { color: var(--gray-400); }
.pric-matrix .mx-val { font-weight: 700; color: var(--ink-2); }
.pric-matrix tbody tr.is-bestcol td:nth-child(3) { background: var(--blue-50); }
.mx-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 560px) { .pric-matrix { min-width: 480px; } }
@media (prefers-reduced-motion: reduce) { .seg-btn { transition: none; } }

/* ===== 추천 강조형 요금 카드(B안, 2026-06-23) — 흰 카드 + 추천 플랜만 블루 필(토스·Stripe식). 셀프서브 .price-grid 한정, 색은 블루 토큰·화이트만 ===== */
.price-grid .price-card { padding: 30px 26px; }
.price-grid .price-card .pname { font-size: 15px; font-weight: 800; color: var(--gray); letter-spacing: .02em; }
.price-grid .price-card .amt { font-size: clamp(34px, 4vw, 42px); margin: 10px 0 6px; font-variant-numeric: tabular-nums; }
.price-grid .price-card.best { background: var(--blue); border-color: var(--blue); }
.price-grid .price-card.best::before { display: none; }
.price-grid .price-card.best .pname { color: rgba(255, 255, 255, .82); }
.price-grid .price-card.best .amt { color: #fff; }
.price-grid .price-card.best .amt small { color: rgba(255, 255, 255, .78); }
.price-grid .price-card.best .pdesc { color: rgba(255, 255, 255, .9); }
.price-grid .price-card.best ul li { color: #fff; }
.price-grid .price-card.best ul li::before { color: #fff; }
.price-grid .price-card.best .ribbon { background: #fff; color: var(--blue); }
.price-grid .price-card.best .btn-primary { background: #fff; color: var(--blue); }
.price-grid .price-card.best .btn-primary:hover { background: rgba(255, 255, 255, .92); }
.price-grid .price-card.best .btn-ghost { border-color: rgba(255, 255, 255, .55); color: #fff; }
.price-grid .price-card.best .btn-ghost:hover { background: rgba(255, 255, 255, .14); }
/* 비교표 — 추천 컬럼(3번째) 헤더 블루 강조 */
.pric-matrix thead th:nth-child(3) { color: var(--blue); }

/* ============================================================
   간결 모드(2026-07-03, 토스뱅크 방향 확정) — body.minimal
   index는 자체 간결 마크업, about은 Toss 확정안이라 미적용.
   풀스크린 극장(100svh)·워터마크·배경 오브젝트·플로팅 카드·광류 텍스처 제거.
   ============================================================ */
body.minimal .ts-screen{min-height:auto;padding:clamp(72px,13vh,132px) 0;}
body.minimal .ts-screen--first{min-height:auto;padding:clamp(96px,15vh,168px) 0 clamp(72px,12vh,120px);}
body.minimal .ts-band{padding:clamp(72px,13vh,132px) 0;}
body.minimal .ts-wm,body.minimal .ts-bgobj,body.minimal .pg-fc{display:none;}
body.minimal [class*="pg-flow--"]{background-image:none;}
body.minimal [class*="pg-flow--"]::before,body.minimal [class*="pg-flow--"]::after{content:none;}
body.minimal .ts-screen[data-tone="light"],body.minimal .ts-band[data-tone="light"]{background-image:none;}

/* ============================================================
   Clarity in Motion(2026-07-12) — 간결 모드 미세 깊이
   광류 텍스처 부활이 아님: 단색 위 '거의 안 보이는' 라디얼 광만.
   히어로=상단 블루 광 워시, 다크 피날레=심볼 후광+필름 그레인 복원.
   전부 위 background-image:none 룰 뒤에 두어 후순서로 이긴다.
   ============================================================ */
body.minimal .ts-screen--first,
body.minimal .ts-screen--first[data-tone="light"]{
  background-image:radial-gradient(64% 46% at 50% -8%, var(--tint-blue), transparent 72%);
  background-repeat:no-repeat;
}
body.minimal .ts-screen--dark{
  background-image:radial-gradient(58% 54% at 50% 0%, rgba(23,115,235,.20), transparent 70%);
  background-repeat:no-repeat;
}
body.minimal .ts-screen--dark::after{content:"";} /* 다크 필름 그레인 복원 — 플랫 단색 밴딩 방지(선언 본체는 .ts-screen--dark::after 유지) */

/* ============================================================
   프리미엄 시스템 전역화(2026-07-03, Clarity in Motion §5·§8-8)
   index에서 확정한 배경·FAQ 폴리시를 상세페이지(body.minimal)로 확장.
   위 간결 모드 블록의 background-image:none을 의도적으로 override.
   ============================================================ */
body.minimal .ts-screen[data-tone="light"],body.minimal .ts-band[data-tone="light"]{
  background-image:radial-gradient(rgba(23,115,235,.05) 1px,transparent 1.2px),radial-gradient(52% 44% at 50% 0%,rgba(23,115,235,.03),transparent 70%);
  background-size:26px 26px,100% 100%;background-position:center top;}
/* FAQ 여닫이 아이콘 — 전 페이지 회전·강조(reduce 시 정지) */
.faq-q .pm{transition:rotate .3s var(--ease-q),color .2s ease;}
.faq-q[aria-expanded="true"] .pm{rotate:45deg;color:var(--blue);}
.faq-q:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:6px;}
@media (prefers-reduced-motion:reduce){.faq-q .pm{transition:none;}}

/* ============================================================
   실사 이미지 처리(2026-08-08) — 스톡 대체 실제 현장 사진용.
   원본 Design Sector\Plain 리플렛\Plain School 리플렛 삽입 이미지\ (대외 사용 승인분)
   ============================================================ */
.is-photo{object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow);}
.ts-visual>img.is-photo,.pg-showcase>img.is-photo{aspect-ratio:16/10;width:min(100%,640px);}
.hero-slide__visual img.is-photo{width:min(100%,640px);aspect-ratio:16/10;max-height:none;}
.tb-cell__fig img.is-photo{width:100%;height:100%;max-height:none;object-fit:cover;border-radius:var(--radius);box-shadow:none;}
/* FIELD PROOF 박스 실사 배경 — 단체사진 위에 네이비 그라데이션으로 가독성 확보 */
.lf-proof--photo{position:relative;overflow:hidden;background:var(--navy);}
.lf-proof--photo::before{content:"";position:absolute;inset:0;background:url("gen/proof-group.jpg") center/cover no-repeat;opacity:.42;}
.lf-proof--photo::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(6,20,47,.94) 0%,rgba(14,37,82,.68) 100%);}
.lf-proof--photo>*{position:relative;z-index:1;}
/* 실사 밴드 짙은 오버레이 — 밝은 교실 사진 위 본문 가독성용(about 팀 밴드) */
.pg-photo--deep::after{background:linear-gradient(180deg,rgba(6,20,47,.74) 0%,rgba(6,20,47,.84) 100%);}
.pg-photo--deep .tv-lead{color:rgba(255,255,255,.88);text-shadow:0 1px 2px rgba(6,20,47,.6);}

/* ============================================================
   리플렛 이식(2026-08-06) — Design Sector\Plain 리플렛\ 의
   Plain_브랜드_리플렛.pdf(03 INTEGRATED MODEL) ·
   Plain_School_리플렛.pdf(02 WHY / 05 CONTACT) 섹션 구조를 랜딩으로.
   신규 hex 0 — 전부 :root 토큰. 인라인 style 없음.
   ============================================================ */

/* ⓪ 스크린리더 전용 텍스트 — 표 caption·빈 헤더 셀 라벨링용 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ① 선순환 3단계 — 브랜드 리플렛 "PLAIN의 선순환" */
.lf-cycle{display:grid;gap:12px;max-width:720px;margin:clamp(28px,4vh,44px) auto 0;text-align:left;}
.lf-cycle__item{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  padding:18px 20px;border-radius:var(--radius-lg);
  background:var(--bg-soft);}
.lf-cycle__n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--blue);color:#fff;font-weight:800;font-size:.95rem;font-variant-numeric:tabular-nums;}
.lf-cycle__t{font-weight:800;font-size:1.05rem;color:var(--ink);}
.lf-cycle__k{margin-left:8px;font-weight:700;font-size:.82rem;color:var(--blue);}
.lf-cycle__d{margin:4px 0 0;font-size:.94rem;color:var(--gray);}
.lf-cycle__arrow{justify-self:center;color:var(--blue-100);line-height:0;}
.lf-cycle__arrow svg{width:18px;height:18px;}
.lf-cycle__loop{display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 18px;border-radius:var(--radius-lg);background:var(--bg-blue);
  font-weight:700;font-size:.94rem;color:var(--blue-700);}
.lf-cycle__loop svg{width:16px;height:16px;flex:none;}

/* ② 비교표 — 브랜드 리플렛 "한눈에 비교하기" */
.lf-cmpwrap{max-width:720px;margin:clamp(24px,3.5vh,36px) auto 0;overflow-x:auto;
  border-radius:var(--radius-lg);background:var(--bg);box-shadow:var(--shadow-sm);}
.lf-cmp{width:100%;border-collapse:collapse;font-size:.94rem;text-align:left;}
.lf-cmp th,.lf-cmp td{padding:13px 16px;border-bottom:1px solid var(--line-2);}
.lf-cmp tr:last-child th,.lf-cmp tr:last-child td{border-bottom:0;}
.lf-cmp thead th{background:var(--bg-soft);color:var(--gray);font-weight:700;font-size:.86rem;}
.lf-cmp thead th.is-plain{background:var(--blue);color:#fff;}
.lf-cmp tbody th{width:76px;color:var(--gray);font-weight:700;font-size:.86rem;}
.lf-cmp td.is-plain{background:var(--blue-50);color:var(--blue-700);font-weight:700;}

/* ③ 현장 근거 다크 박스 — 브랜드 리플렛 "FIELD PROOF" */
.lf-proof{max-width:720px;margin:clamp(24px,3.5vh,36px) auto 0;padding:24px 26px;text-align:left;
  border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--navy) 0%,var(--navy-card) 100%);}
.lf-proof__eyebrow{display:block;font-size:.74rem;font-weight:800;letter-spacing:.12em;color:var(--blue-400);}
.lf-proof__t{margin:8px 0 0;font-size:1.14rem;font-weight:800;color:#fff;}
.lf-proof__d{margin:8px 0 0;font-size:.9rem;line-height:1.65;color:rgba(255,255,255,.72);}

/* ④ 체크리스트 — School 리플렛 "도입을 검토하는 학교의 상황" */
.lf-check{max-width:640px;margin:clamp(20px,3vh,32px) auto 0;padding:22px 24px;text-align:left;
  border-radius:var(--radius-lg);background:var(--bg-blue);}
.lf-check__cap{display:block;margin-bottom:4px;font-size:.82rem;font-weight:800;color:var(--blue-700);}
.lf-check__i{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  padding:11px 0;border-bottom:1px dashed var(--line);font-size:.94rem;color:var(--ink-2);}
.lf-check__i:last-child{border-bottom:0;}
.lf-check__i svg{width:16px;height:16px;margin-top:3px;color:var(--blue);}

/* ⑤ 라벨·내용 행 — School 리플렛 "Plain School이 제공하는 것" */
.lf-rows{max-width:640px;margin:clamp(20px,3vh,32px) auto 0;text-align:left;
  border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-soft);}
.lf-row{display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:baseline;
  padding:14px 18px;border-bottom:1px solid var(--line-2);}
.lf-row:last-child{border-bottom:0;}
.lf-row__k{justify-self:start;padding:3px 9px;border-radius:999px;background:var(--blue-50);
  font-size:.78rem;font-weight:800;color:var(--blue-700);white-space:nowrap;}
.lf-row__v b{display:block;font-size:.98rem;font-weight:800;color:var(--ink);}
.lf-row__v span{display:block;margin-top:3px;font-size:.88rem;color:var(--gray);}

/* ⑥ 사전 카드 — 브랜드 리플렛 01 "PLAIN의 뜻" */
.lf-dict{max-width:640px;margin:clamp(24px,3.5vh,36px) auto 0;padding:22px 26px;text-align:left;
  border-radius:var(--radius-lg);background:var(--bg-soft);}
.lf-dict__row{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin:0;}
.lf-dict__w{font-size:1.5rem;font-weight:800;color:var(--blue);letter-spacing:-.02em;}
.lf-dict__pos{padding:3px 9px;border-radius:999px;background:var(--bg-blue);
  font-size:.76rem;font-weight:700;color:var(--gray);}
.lf-dict__m{font-size:1.05rem;font-weight:800;color:var(--ink);}
.lf-dict__d{margin:10px 0 0;font-size:.94rem;color:var(--gray);}

/* ⑧ 대표 제품 배지 — 브랜드 리플렛 02 SERVICES "대표 제품" */
.lf-flag{display:inline-block;margin-left:8px;padding:3px 8px;border-radius:999px;
  background:var(--blue-50);font-size:.68rem;font-weight:800;letter-spacing:.02em;
  color:var(--blue-700);vertical-align:middle;white-space:nowrap;}

/* ⑦ 인용 블록 — 브랜드 리플렛 01 "우리가 바라는 내일" */
.lf-vow{max-width:640px;margin:clamp(18px,2.5vh,28px) auto 0;padding:18px 22px;text-align:left;
  border-radius:var(--radius);
  background:var(--bg-blue);font-size:1rem;font-weight:700;line-height:1.7;color:var(--ink);}

@media (max-width:760px){
  .lf-cycle__item{padding:15px 16px;gap:12px;}
  .lf-dict{padding:18px 18px;}
  .lf-dict__w{font-size:1.3rem;}
  .lf-cmp{font-size:.88rem;}
  .lf-cmp th,.lf-cmp td{padding:11px 12px;}
  .lf-cmp tbody th{width:60px;}
  .lf-proof{padding:20px 18px;}
  .lf-check{padding:18px 16px;}
  .lf-row{grid-template-columns:1fr;gap:6px;}
}