/* docs/index-demo2.html 에서 옮김 — 001-landing-www */
/* ============ RESET ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ============ 공통 토큰 ============ */
:root{
  --bg:#0a0b14; --bg-2:#0c0d1a;
  --surface:#14162a; --surface-2:#1a1c34; --surface-3:#212442;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.15);
  --text:#f4f4fa; --muted:#a8a6c4; --muted-2:#7c7a9e;
  /* 푸터 제휴사 로고 카드 — 로고가 원래 색 그대로 보이는 흰 바탕(시안 streamu-footer). 이미 쓰는 흰색(--on-p)과 같은 값 */
  --logo-card:#ffffff;
  --radius:18px; --radius-lg:26px;
  --shadow:0 24px 60px -20px rgba(0,0,0,.6);
  --maxw:1180px; --header-h:70px;
  font-size:16px;

  /* 브랜드 색 — 데모에서는 팔레트 편집기가 실행 중에 채웠다. 결정 005 그라디언트 #FF8FAC → #FF4A78(45%) → #5CBCE8, 120° */
  --p:#ff4a78;
  --p-deep:#b83556;
  --p-light:#ff8fac;
  --on-p:#ffffff;
  --s:#5cbce8;
  --s-deep:#4084a2;
  --s-soft:#a0d8f2;
  --grad-brand:linear-gradient(120deg,#ff8fac 0%,#ff4a78 45%,#5cbce8 100%);
  --grad-p:linear-gradient(135deg,#ff638b,#c2385b);
  --grad-s:linear-gradient(135deg,#76c7ec,#448bac);
  --sh-p:0 18px 44px -14px rgba(255,74,120,0.45);
  --sh-s:0 18px 44px -14px rgba(92,188,232,0.4);
  --p-a09:rgba(255,74,120,0.09);
  --p-a13:rgba(255,74,120,0.13);
  --p-a30:rgba(255,74,120,0.3);
  --s-a09:rgba(92,188,232,0.09);
  --s-a13:rgba(92,188,232,0.13);
  --s-a30:rgba(92,188,232,0.3);
  /* #start 혜택 구역(시안 01-랜딩 「5. START」) — 금빛·라벤더. 빛 알갱이 값은 landing.js 가 알갱이마다 setProperty 로 덮어쓴다 */
  --gold:#f2cf63; --gold-hi:#fff3cf; --gold-mute:#cbbf95; --lav:#8d9bd4;
  /* #why 대화(시안 streamu-why) — 말풍선 글자, 해결 표시, 불편 표시 */
  --bubble-text:#d9d8ec; --mint:#6fd0b5; --warn:#ff6b8b;
  /* #service 맞춤(시안 streamu-customize) — 아직 켜지 않은 맞춤 문구 */
  --dim:#4d4c63;
  /* 진행 효과(STYP 게이지·카드 전환, 고민 대화, 맞춤 스위치, 혜택 카드 열기, 히어로 미리보기)의 시간 배율 — 1 이 원래 속도.
     대표 요청 2026-10-16 으로 1.25(20% 느리게). 스크립트도 이 값을 읽어 타이밍에 곱한다. 반짝임·맥박 같은 반복 장식은 곱하지 않는다 */
  --motion-pace:1.25;
  --pt-s:3px; --pt-c:#f2cf63; --pt-d:8s; --pt-dl:0s; --pt-dx:0px;
}

/* ============ 팔레트 A · 로즈 · 시안 ============ */
[data-theme="rose"]{
  --p:#ff4a78; --p-deep:#d42d5c; --p-light:#ff8fac; --on-p:#fff;
  --s:#5cbce8; --s-deep:#1f8dbd; --s-soft:#9bd8f2;
  --grad-brand:linear-gradient(120deg,#ff8fac 0%,#ff4a78 45%,#5cbce8 100%);
  --grad-p:linear-gradient(135deg,#ff6f96,#d42d5c);
  --grad-s:linear-gradient(135deg,#7fcdf0,#1f8dbd);
  --sh-p:0 18px 44px -14px rgba(255,74,120,.45);
  --sh-s:0 18px 44px -14px rgba(92,188,232,.4);
  --p-a09:rgba(255,74,120,.09); --p-a13:rgba(255,74,120,.13); --p-a30:rgba(255,74,120,.3);
  --s-a09:rgba(92,188,232,.1); --s-a13:rgba(92,188,232,.14); --s-a30:rgba(92,188,232,.32);
}
/* ============ 팔레트 B · 라임 · 바이올렛 ============ */
[data-theme="lime"]{
  --bg:#0b0c10; --bg-2:#0e1014; --surface:#15171d; --surface-2:#1b1e26; --surface-3:#232733;
  --p:#b4ff3a; --p-deep:#7fc400; --p-light:#d4ff8f; --on-p:#141f00;
  --s:#a78bfa; --s-deep:#7c3aed; --s-soft:#cbb8ff;
  --grad-brand:linear-gradient(120deg,#d4ff8f 0%,#b4ff3a 45%,#a78bfa 110%);
  --grad-p:linear-gradient(135deg,#c9ff6b,#8fd400);
  --grad-s:linear-gradient(135deg,#b9a3ff,#7c3aed);
  --sh-p:0 18px 44px -14px rgba(180,255,58,.35);
  --sh-s:0 18px 44px -14px rgba(167,139,250,.45);
  --p-a09:rgba(180,255,58,.09); --p-a13:rgba(180,255,58,.13); --p-a30:rgba(180,255,58,.3);
  --s-a09:rgba(167,139,250,.1); --s-a13:rgba(167,139,250,.14); --s-a30:rgba(167,139,250,.32);
}
/* ============ 팔레트 C · 앰버 · 인디고 ============ */
[data-theme="amber"]{
  --bg:#0f0c08; --bg-2:#130f0a; --surface:#1c1610; --surface-2:#241d15; --surface-3:#2e251b;
  --muted:#c0b3a0; --muted-2:#8f8474;
  --p:#f5a524; --p-deep:#c07800; --p-light:#ffd08a; --on-p:#2b1a00;
  --s:#7c8cff; --s-deep:#4a5cd6; --s-soft:#b3bcff;
  --grad-brand:linear-gradient(120deg,#ffd08a 0%,#f5a524 45%,#7c8cff 110%);
  --grad-p:linear-gradient(135deg,#ffbe4d,#d98a00);
  --grad-s:linear-gradient(135deg,#95a3ff,#4a5cd6);
  --sh-p:0 18px 44px -14px rgba(245,165,36,.4);
  --sh-s:0 18px 44px -14px rgba(124,140,255,.4);
  --p-a09:rgba(245,165,36,.1); --p-a13:rgba(245,165,36,.14); --p-a30:rgba(245,165,36,.32);
  --s-a09:rgba(124,140,255,.1); --s-a13:rgba(124,140,255,.14); --s-a30:rgba(124,140,255,.32);
}
/* ============ 팔레트 D · 아이스 (차분한 툴 톤) ============ */
[data-theme="ice"]{
  --bg:#080b12; --bg-2:#0a0e17; --surface:#111826; --surface-2:#16202f; --surface-3:#1d2939;
  --muted:#9aa8bd; --muted-2:#6e7d93;
  --p:#4cc9ff; --p-deep:#0d84c4; --p-light:#9ee0ff; --on-p:#03202e;
  --s:#6b7cff; --s-deep:#3f4fd6; --s-soft:#aab3ff;
  --grad-brand:linear-gradient(120deg,#9ee0ff 0%,#4cc9ff 45%,#6b7cff 110%);
  --grad-p:linear-gradient(135deg,#6fd6ff,#0d84c4);
  --grad-s:linear-gradient(135deg,#8b98ff,#3f4fd6);
  --sh-p:0 18px 44px -14px rgba(76,201,255,.4);
  --sh-s:0 18px 44px -14px rgba(107,124,255,.4);
  --p-a09:rgba(76,201,255,.1); --p-a13:rgba(76,201,255,.14); --p-a30:rgba(76,201,255,.32);
  --s-a09:rgba(107,124,255,.1); --s-a13:rgba(107,124,255,.14); --s-a30:rgba(107,124,255,.32);
}
/* ============ 팔레트 E · 모노 (흑백 + 한 색) ============ */
[data-theme="mono"]{
  --bg:#0b0b0d; --bg-2:#0e0e11; --surface:#151518; --surface-2:#1b1b1f; --surface-3:#232328;
  --muted:#a6a6ad; --muted-2:#77777f;
  --p:#f2f2f5; --p-deep:#c9c9d0; --p-light:#ffffff; --on-p:#0b0b0d;
  --s:#3fd8ff; --s-deep:#0aa6d4; --s-soft:#8ceaff;
  --grad-brand:linear-gradient(120deg,#ffffff 0%,#e2e2e8 45%,#3fd8ff 130%);
  --grad-p:linear-gradient(135deg,#ffffff,#d5d5dc);
  --grad-s:linear-gradient(135deg,#5fe0ff,#0aa6d4);
  --sh-p:0 18px 44px -14px rgba(255,255,255,.22);
  --sh-s:0 18px 44px -14px rgba(63,216,255,.4);
  --p-a09:rgba(255,255,255,.07); --p-a13:rgba(255,255,255,.1); --p-a30:rgba(255,255,255,.25);
  --s-a09:rgba(63,216,255,.09); --s-a13:rgba(63,216,255,.12); --s-a30:rgba(63,216,255,.3);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo',sans-serif;
  background:var(--bg);color:var(--text);
  font-size:1.0625rem;line-height:1.72;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  word-break:keep-all;overflow-wrap:break-word;
  transition:background .35s ease;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit;font-size:1rem}
::selection{background:var(--p-a30);color:#fff}
:focus-visible{outline:2px solid var(--s);outline-offset:3px;border-radius:6px}

/* ============ BACKGROUND FX ============ */
.bg-fx{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.bg-fx::before{
  content:"";position:absolute;inset:-2px;
  background-image:linear-gradient(var(--p-a09) 1px,transparent 1px),linear-gradient(90deg,var(--p-a09) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 78%);
}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.4;transition:background .35s ease}
.orb.a{width:520px;height:520px;background:radial-gradient(circle,var(--p-deep),transparent 68%);top:-170px;left:-120px}
.orb.b{width:460px;height:460px;background:radial-gradient(circle,var(--s-deep),transparent 68%);top:360px;right:-170px;opacity:.28}

/* ============ LAYOUT ============ */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{position:relative}
.sec-pad{padding:clamp(64px,9vw,120px) 0}
/* 구역 라벨 칩 — 모두 브랜드 포인트색(분홍) 하나 (대표 요청 2026-10-16: 파랑·금색 변형을 두지 않는다) */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.9rem;font-weight:700;color:var(--p-light);
  padding:7px 15px;border-radius:100px;
  background:var(--p-a09);border:1px solid var(--p-a30);margin-bottom:20px;
}
h2.title{font-size:clamp(1.85rem,4.6vw,3rem);line-height:1.2;font-weight:800;letter-spacing:-.03em}
.g{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:var(--p-light);-webkit-text-fill-color:transparent}
.lead{color:var(--muted);font-size:clamp(1.02rem,1.7vw,1.2rem);line-height:1.75;max-width:640px;margin-top:18px}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:1.03rem;letter-spacing:-.01em;padding:15px 26px;border-radius:14px;transition:transform .18s ease,box-shadow .25s ease,background .25s ease;white-space:nowrap}
.btn-primary{background:var(--grad-p);color:var(--on-p);box-shadow:var(--sh-p)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.05);color:var(--text);border:1px solid var(--line-2)}
.btn-ghost:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.btn-lg{padding:18px 34px;font-size:1.12rem;border-radius:16px}
.btn-block{display:flex;width:100%}

/* ============ HEADER ============ */
header.site{position:sticky;top:0;z-index:50;height:var(--header-h);display:flex;align-items:center;background:color-mix(in srgb,var(--bg) 74%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
header.site.scrolled{border-bottom-color:var(--line);box-shadow:0 8px 30px -18px rgba(0,0,0,.8)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%}
/* 로고 — docs/brand-guide.html 그대로 (결정 009). 크기는 「07 브랜드 관계」의 조합(심볼 52px · 사이 14px · 워드마크 28px ·
   디스크립터 10px), 색은 「03 배경별 사용」의 다크 배경. tests/StreamU.Tests/Brand 가 가이드와 대조한다 */
.su-lockup{display:flex;align-items:center;gap:14px;flex:none}
.su-mark{width:52px;height:57px;flex:none;display:block}
.su-type{display:block}
.su-wordmark{display:block;font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:.9;color:#f7f5ff}
.su-u{color:#ff7a9e}
.su-descriptor{display:block;margin-top:4px;font-size:10px;font-weight:500;letter-spacing:.05em;line-height:1.7;color:#8a81a8;white-space:nowrap}
/* 좁은 화면 — 기본 로고(251px)와 메뉴 버튼 사이에 보호 여백(심볼 폭의 1/2 = 26px)이 안 남으면 「02 로고 변형」의 심볼 단독 */
@media(max-width:368px){.su-lockup .su-type{display:none}}
/* 메뉴는 오른쪽 위 끝에 붙인다 — PC 에서 햄버거 칸(.nav-cta)이 비어 가운데로 밀리지 않게, 941px 이상은 그 칸을 거둔다 (062 조정 2026-10-16) */
.nav-links{display:flex;align-items:center;gap:30px;margin-left:auto}
.nav-links a{font-size:.98rem;font-weight:600;color:var(--muted);transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-cta{display:flex;align-items:center;gap:12px}
.nav-cta .btn{padding:11px 20px;font-size:.96rem}
@media(min-width:941px){.nav-cta{display:none}}
.hamburger{display:none;width:44px;height:44px;border-radius:11px;background:rgba(255,255,255,.06);border:1px solid var(--line);align-items:center;justify-content:center;flex-direction:column;gap:5px}
.hamburger span{width:20px;height:2px;background:var(--text);border-radius:2px;transition:.25s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:49;background:rgba(6,6,14,.6);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:.28s}
.drawer.open{opacity:1;visibility:visible}
.drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(84vw,340px);background:var(--bg-2);border-left:1px solid var(--line);padding:24px 22px;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;gap:6px}
.drawer.open .drawer-panel{transform:translateX(0)}
.drawer-panel a{padding:15px 12px;border-radius:12px;font-size:1.08rem;font-weight:600;border-bottom:1px solid var(--line)}
.drawer-panel .btn{margin-top:18px}

/* ============ HERO ============ */
.hero{padding:clamp(48px,7vw,84px) 0 clamp(60px,8vw,96px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,4vw,52px);align-items:center}
.hero h1{font-size:clamp(2.2rem,5.6vw,3.9rem);line-height:1.13;font-weight:800;letter-spacing:-.035em}
.hero .lead{font-size:clamp(1.05rem,1.9vw,1.26rem);max-width:540px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

.panel{background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line-2);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
.panel-bar{display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.03)}
.panel-bar .dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.16)}
.panel-bar .ch{margin-left:6px;font-size:.9rem;font-weight:700;color:var(--muted)}
.panel-body{padding:18px}
.msg{display:flex;gap:11px;padding:9px 0}
.msg .av{width:34px;height:34px;border-radius:50%;flex:0 0 auto;background:var(--surface-3);display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:800;color:var(--muted)}
.msg .av.bot{background:var(--grad-brand);color:var(--on-p);display:flex;align-items:center;justify-content:center}
.msg .nm{font-size:.92rem;font-weight:700;display:flex;align-items:center;gap:7px}
.tag{font-size:.66rem;font-weight:800;padding:2px 7px;border-radius:5px;background:var(--s-a13);color:var(--s-soft)}
.msg .tx{font-size:.94rem;color:var(--muted);line-height:1.6}
.embed{margin-top:9px;border-left:3px solid var(--p);background:rgba(255,255,255,.04);border-radius:0 12px 12px 0;padding:12px 14px}
.embed h4{font-size:.95rem;font-weight:800;margin-bottom:8px}
.bar{height:8px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden;margin:8px 0 6px}
.bar i{display:block;height:100%;width:72%;background:var(--grad-s);border-radius:99px}
.embed small{color:var(--muted-2);font-size:.8rem;font-weight:600}
.demo{min-height:214px}
.scene{animation:sceneIn .32s ease}
@keyframes sceneIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cmdtext{color:var(--s);font-weight:700}
.caret{display:inline-block;width:2px;height:.95em;background:var(--s);vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.reels{display:flex;gap:8px;margin:10px 0 8px}
.bar i.cd{animation:cdrun 8s linear forwards}
@keyframes cdrun{from{width:100%}to{width:0%}}
.picks{display:flex;gap:7px;margin:10px 0 8px}
.pick{flex:1;height:54px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid var(--line-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:.72rem;color:var(--muted)}
.pick b{font-size:.9rem;font-weight:800;color:var(--text)}
.pick.good{background:var(--s-a13);border-color:var(--s-a30)}
.pick.good b{color:var(--s-soft)}
.pick.risk{background:var(--p-a13);border-color:var(--p-a30)}
.pick.risk b{color:var(--p-light)}
.reel{flex:1;height:46px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:800;color:var(--p-light)}
.reel.hit{background:var(--p-a13);border-color:var(--p-a30)}
.cmdbar{display:flex;gap:7px;padding:12px 18px;border-top:1px solid var(--line);flex-wrap:wrap;align-items:center}
.cmdbar button{font-size:.82rem;font-weight:700;padding:7px 13px;border-radius:99px;border:1px solid var(--line-2);color:var(--muted);transition:.16s}
.cmdbar button:hover{color:var(--text);border-color:var(--s)}
.cmdbar button[aria-pressed="true"]{background:var(--s-a13);border-color:var(--s-a30);color:var(--s-soft)}
.cmdbar .hint{font-size:.72rem;color:var(--muted-2);margin-left:auto}
/* ============ CARDS ============ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;transition:border-color .25s,transform .25s}
.card:hover{border-color:var(--line-2);transform:translateY(-3px)}
.card h3{font-size:1.16rem;font-weight:800;letter-spacing:-.02em;margin-bottom:9px}
.card p{color:var(--muted);font-size:.99rem}
.icon{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:16px;background:var(--p-a13);border:1px solid var(--p-a30);color:var(--p-light)}
.icon.alt{background:var(--s-a13);border-color:var(--s-a30);color:var(--s-soft)}

.fine{color:var(--muted-2);font-size:.82rem;line-height:1.6;margin-top:18px;max-width:760px}
.center .fine{margin-left:auto;margin-right:auto}

/* ============ FAQ ============ */
.faq{max-width:820px;margin:44px auto 0;display:flex;flex-direction:column;gap:12px;text-align:left}
.q{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.q summary{width:100%;text-align:left;padding:20px 22px;font-size:1.04rem;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:16px}
.q summary .pm{color:var(--p);font-size:1.3rem;flex:0 0 auto;transition:transform .25s}
.q[open] summary .pm{transform:rotate(45deg)}
.q .a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.q .a p{padding:0 22px 20px;color:var(--muted);font-size:.99rem}
.q .a p:not(:last-child){padding-bottom:10px} /* 답이 여러 문단이면 문단 사이는 좁게 */

/* ============ FINAL CTA ============ */
.cta-box{background:linear-gradient(140deg,var(--p-a13),var(--s-a13));border:1px solid var(--line-2);border-radius:var(--radius-lg);padding:clamp(32px,5vw,58px);text-align:center}
.cta-box .hero-cta{justify-content:center}


/* ============ REVEAL ============ */
.reveal{transition:opacity .6s ease,transform .6s ease}
.js-ready .reveal:not(.in){opacity:0;transform:translateY(18px)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}

@media(max-width:940px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .grid-3{grid-template-columns:1fr}
  .nav-links,.nav-cta .btn{display:none}
  .hamburger{display:flex}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal,.js-ready .reveal:not(.in){opacity:1;transform:none}
}

/* ============ 001-landing-www 추가 ============ */
/* 인라인 style 을 클래스로 옮김 (CSP 강제 모드 대비 — research R11) */
.svg-defs{position:absolute}
/* 구역마다 따로 깔던 그라디언트 바탕(.sec-grad-a·.sec-grad-b·.cta-final)은 거뒀다 — 페이지에 고정된 배경(.bg-fx)이 히어로부터 끝까지 이어진다 (대표 요청 2026-10-16) */
/* FAQ 는 <details> — 여닫힘은 브라우저가 한다 */
.q summary{cursor:pointer;list-style:none}
.q summary::-webkit-details-marker{display:none}
.faq .a{max-height:none;overflow:visible}
/* 스크립트가 없으면 봇 데모 버튼이 동작하지 않으므로 숨긴다 (SC-007) */
html:not(.js) .cmdbar{display:none}

/* Blazor 의 FocusOnNavigate 가 페이지를 열 때 h1 에 포커스를 준다 (tabindex=-1).
   사용자가 만든 포커스가 아니므로 표시하지 않는다. Chrome 은 이 포커스를 :focus-visible 로 보기도 해서
   118 행의 :focus-visible 규칙보다 우선순위가 높은 선택자로 덮는다. 다른 요소의 키보드 포커스 표시는 그대로다 */
h1:focus{outline:none}

/* 봇 데모 — 인라인 style 대신 클래스 (CSP 강제 모드, research R11) */
.msg-body{flex:1}
.bot-mark{width:17px;height:19px;color:#fff}

/* ============ 062-landing-v2 — 시안 docs/mockups/flow/01-랜딩.html 의 구역 ============ */
/* 색은 위 :root 토큰만 쓴다. 유형마다 바뀌는 강조 색(--styp-tc)은 styp-reveal.css 가 준다 */
.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}

/* 히어로 — 유형마다 바뀌는 한 줄과 커뮤니티 미리보기 창 */
.rollbox{display:grid;gap:4px;text-align:center}
.rl-line{font-size:clamp(1.3rem,2.4vw,1.75rem);font-weight:800;letter-spacing:-.02em;line-height:1.3}
.rl-mod{color:var(--muted);font-size:1rem;min-height:1.6em}
.showcase{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;justify-items:center;min-width:0}
.bwin{width:100%;max-width:620px;border-radius:14px;overflow:hidden;background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow)}
.bw-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.bw-dots{display:flex;gap:6px;flex:none}
.bw-dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.16)}
.bw-url{flex:1;max-width:300px;margin:0 auto;text-align:center;font-size:.75rem;color:var(--muted);background:var(--bg);border-radius:8px;padding:5px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bw-url b{color:var(--text);font-weight:600}
/* 점 버튼 — 보이는 점은 작지만 누르는 자리는 24px 이다 */
.pdots{display:flex;gap:4px;justify-content:center}
.pdots button{min-width:24px;height:24px;display:grid;place-items:center;border-radius:99px}
.pdots button::before{content:"";width:10px;height:10px;border-radius:99px;background:var(--line-2);transition:width .25s,background .25s}
.pdots button[aria-pressed="true"]::before{width:26px}
html:not(.js) .pdots{display:none}




/* #start — 시안 01-랜딩 「5. START」 (062 조정 2026-10-16) */
.bx{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,4vw,52px);align-items:start;padding:clamp(24px,4vw,48px);border-radius:28px;
  background:radial-gradient(120% 90% at 0% 0%,rgba(141,155,212,.16),transparent 60%),linear-gradient(160deg,rgba(21,22,42,.85),rgba(11,12,20,.9));border:1px solid rgba(141,155,212,.28)}
.bx>*:not(.bx-fx){position:relative;z-index:1}
.bx-fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bx-fx::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 0 20%,rgba(242,207,99,.09) 28%,transparent 36% 55%,rgba(154,166,224,.10) 63%,transparent 72% 100%);animation:bxspin 18s linear infinite}
.bx-fx::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 30% 40%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 30% 40%,#000 20%,transparent 75%)}
@keyframes bxspin{to{transform:rotate(360deg)}}
.bx-fx .pt{position:absolute;bottom:-10px;width:var(--pt-s);height:var(--pt-s);border-radius:50%;background:var(--pt-c);box-shadow:0 0 10px var(--pt-c);opacity:0;animation:bxrise var(--pt-d) linear var(--pt-dl) infinite}
@keyframes bxrise{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:.9}80%{opacity:.6}100%{transform:translateY(-640px) translateX(var(--pt-dx)) scale(1);opacity:0}}
.bx-copy{display:grid;gap:18px;justify-items:start;min-width:0}
.bx-copy h2,.bx-copy .lead{margin:0;word-break:keep-all}
/* 「BETA · 사전신청 진행 중」은 혜택 구역의 금색 그대로 — 다른 구역 라벨 칩(포인트색)과 달리 둔다(대표 요청 2026-10-16) */
.bx-live{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--gold);padding:7px 14px;border-radius:999px;background:rgba(242,207,99,.10);border:1px solid rgba(242,207,99,.5)}
.bx-live i{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:bxp 1.6s infinite}
@keyframes bxp{0%{box-shadow:0 0 0 0 rgba(242,207,99,.7)}70%{box-shadow:0 0 0 9px rgba(242,207,99,0)}100%{box-shadow:0 0 0 0 rgba(242,207,99,0)}}
.bx-shine{background:linear-gradient(100deg,#f2cf63 0%,#fff6d6 18%,#f2a2b6 40%,#a9b6f2 62%,#f2cf63 85%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:bxshine 4s linear infinite;filter:drop-shadow(0 0 18px rgba(242,207,99,.35))}
@keyframes bxshine{to{background-position:-250% 0}}
/* 혜택 카드 — .anim 일 때만 뒷면(.bx-bk)으로 시작하고 li.open 이 되면 앞면으로 뒤집힌다 */
.bx-perks{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:10px;width:100%}
.bx-perks li{position:relative;perspective:1000px;min-width:0}
.bx-fl{position:relative;transform-style:preserve-3d;transition:transform calc(.85s * var(--motion-pace)) cubic-bezier(.2,.9,.25,1.15)}
.bx-perks.anim li:not(.open) .bx-fl{transform:rotateX(180deg)}
.bx-face{border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.bx-fr{position:relative;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:14px 16px;overflow:hidden;
  border:1px solid rgba(242,207,99,.55);background:linear-gradient(120deg,rgba(242,207,99,.13),rgba(11,12,20,.6) 65%);box-shadow:0 10px 30px -14px rgba(242,207,99,.4)}
.bx-fr>div{display:grid;gap:2px;min-width:0}
.bx-fr b{font-size:16px;color:var(--gold-hi);word-break:keep-all}
.bx-fr span{font-size:14px;color:var(--muted);word-break:keep-all}
.bx-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--gold);background:rgba(242,207,99,.14)}
.bx-ic svg{width:22px;height:22px}
.bx-tag{display:inline-block;margin-left:6px;font-style:normal;font-size:11.5px;font-weight:800;color:var(--gold);border:1px solid rgba(242,207,99,.6);padding:1px 8px;border-radius:999px;vertical-align:2px}
.bx-fr::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,240,200,.28),transparent);transform:skewX(-18deg);pointer-events:none}
.bx-perks.anim li.open .bx-fr::after{animation:bxsweep 3.6s ease-in-out .9s infinite}
@keyframes bxsweep{0%{left:-60%}35%,100%{left:130%}}
.bx-perks.anim li.open .bx-fr{animation:bxpop calc(.9s * var(--motion-pace)) ease-out calc(.5s * var(--motion-pace)) 1 both}
@keyframes bxpop{0%{box-shadow:0 0 0 0 rgba(242,207,99,.9)}100%{box-shadow:0 0 0 14px rgba(242,207,99,0),0 10px 30px -14px rgba(242,207,99,.4)}}
.bx-bk{display:none}
.bx-perks.anim .bx-bk{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;font:inherit;cursor:pointer;color:var(--gold);transform:rotateX(180deg);
  border:1px solid rgba(242,207,99,.55);background:repeating-linear-gradient(45deg,rgba(242,207,99,.07) 0 8px,transparent 8px 16px),linear-gradient(135deg,#2b2347,#15162b);overflow:hidden}
.bx-bk i{width:30px;height:33px;display:block}
.bx-bk i svg{width:100%;height:100%}
.bx-bk b{font-size:17px;font-weight:900;color:var(--gold-hi);letter-spacing:.04em}
.bx-bk span{font-size:13px;color:var(--gold-mute)}
.bx-bk::after{content:"";position:absolute;top:0;bottom:0;width:30%;left:-40%;background:linear-gradient(100deg,transparent,rgba(255,240,200,.25),transparent);transform:skewX(-18deg);animation:bxsweep 2.4s ease-in-out infinite}
.bx-bk:hover{border-color:var(--gold);box-shadow:0 0 24px -4px rgba(242,207,99,.6) inset}
.bx-bk:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.bx-burst{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;pointer-events:none;z-index:2;opacity:0}
.bx-perks.anim li.open .bx-burst{animation:bxburst calc(.9s * var(--motion-pace)) ease-out calc(.35s * var(--motion-pace)) 1}
@keyframes bxburst{0%{opacity:1;box-shadow:0 0 0 0 rgba(255,236,170,.95),0 0 40px 20px rgba(242,207,99,.7)}100%{opacity:0;box-shadow:0 0 0 160px rgba(255,236,170,0),0 0 80px 40px rgba(242,207,99,0)}}
/* 오른쪽 신청서 상자 · 완료 표시 · 색종이 */
.bx-form{display:grid;gap:6px;padding:26px;border-radius:22px;background:rgba(11,12,20,.8);border:1px solid var(--line);min-width:0;overflow:visible}
/* 신청서의 「베타 신청하기」 — 다른 주 버튼과 같다. 번지는 빛·스치는 빛은 뺐다(대표 요청 2026-10-16). .bx-go 는 버튼을 맨 아래에 두는 자리 표시로만 남는다 */
.bx-done{display:grid;text-align:center;gap:10px;justify-items:center;padding:20px 6px}
.bx-done svg{width:52px;height:52px;color:#7be0a6}
.bx-done b{font-size:20px;animation:bxstamp .6s cubic-bezier(.2,1.8,.4,1) 1 both}
@keyframes bxstamp{0%{transform:scale(2.2);opacity:0}100%{transform:scale(1);opacity:1}}
.bx-done p{margin:0;color:var(--muted);font-size:14.5px;word-break:keep-all}
.bx-done p.bx-tip{font-size:13px;color:var(--muted-2);margin-top:4px}
.bx-cf{position:absolute;width:9px;height:14px;border-radius:2px;pointer-events:none;z-index:5}
@media(prefers-reduced-motion:reduce){.bx-perks .bx-fl{transition:none}}
/* PC: 신청서 상자를 혜택 목록 높이에 맞추고 버튼은 맨 아래, 완료 카드는 세로 가운데 (시안 「balance」, 062 조정 2026-10-16) */
@media(min-width:901px){
  .bx{align-items:stretch}
  .bx-form{display:flex;flex-direction:column}
  .bx-form .beta-form{flex:1;display:flex;flex-direction:column}
  .bx-form .beta-form .bx-go{margin-top:auto}
  .bx-form:has(.bx-done){align-self:center}
}
@media(max-width:900px){.bx{grid-template-columns:minmax(0,1fr)}}
@media(max-width:420px){.bx-form{padding:20px}.bx-fr{padding:12px 13px;gap:12px}.bx-ic{width:38px;height:38px}}
/* 베타 신청 폼 (specs/081-beta-signup) — 정적 렌더링 폼. 사람에게 안 보이는 칸(.beta-hp)은 화면 밖으로 뺀다(display:none 이면 일부 신청기가 건너뛴다) */
.beta-form{display:grid;gap:12px}
.beta-label{font-weight:700;font-size:.95rem}
.beta-input{width:100%;padding:14px 16px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line-2);color:var(--text);font:inherit;font-size:1rem}
.beta-input::placeholder{color:var(--muted-2)}
.beta-input:focus-visible{outline:2px solid var(--p-light);outline-offset:2px;border-color:var(--p-a30)}
/* 희망 커뮤니티 주소 — 앞부분(play.streamu.kr/)을 칸에 붙여 보이고 뒷부분만 적는다. 앞부분과 적는 글 사이에 틈을 두지 않아
   play.streamu.kr/내주소 처럼 한 주소로 읽힌다(같은 글자 크기, 대표 요청 2026-10-16) */
.beta-slug{display:flex;align-items:stretch;min-width:0}
.beta-slug-host{flex:none;display:flex;align-items:center;padding:0 0 0 16px;border-radius:14px 0 0 14px;background:var(--bg-2);border:1px solid var(--line-2);border-right:0;color:var(--muted);font-size:1rem;white-space:nowrap}
.beta-slug .beta-input{flex:1;min-width:0;padding-left:0;border-left:0;border-radius:0 14px 14px 0}
.beta-slug:focus-within{border-radius:14px;outline:2px solid var(--p-light);outline-offset:2px}
.beta-slug .beta-input:focus-visible{outline:none}
.beta-hint{margin-top:-4px;color:var(--muted-2);font-size:.8rem;line-height:1.5}
/* 좁은 휴대폰 — 앞부분이 칸을 다 차지하지 않게 한 상자 안에서 위 줄(앞부분)·아래 줄(적는 칸)로 나눈다 */
@media(max-width:420px){
  .beta-slug{flex-direction:column}
  .beta-slug-host{padding:9px 14px 0;border:1px solid var(--line-2);border-bottom:0;border-radius:14px 14px 0 0;font-size:.8125rem}
  .beta-slug .beta-input{padding:4px 14px 12px;border:1px solid var(--line-2);border-top:0;border-radius:0 0 14px 14px}
}
.beta-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.beta-notice{list-style:none;display:grid;gap:4px;padding:12px 14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);font-size:.86rem;line-height:1.55}
.beta-check{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;line-height:1.5;cursor:pointer}
.beta-check input{width:18px;height:18px;margin-top:2px;flex:0 0 auto;accent-color:var(--p)}
.beta-refuse{color:var(--muted-2);font-size:.82rem;line-height:1.6}
.beta-refuse a{color:var(--p-light);text-decoration:underline}
.beta-result{padding:12px 14px;border-radius:12px;font-size:.92rem;line-height:1.55}
.beta-result.ok{background:var(--s-a13);border:1px solid var(--s-a30)}
.beta-result.warn{background:var(--p-a13);border:1px solid var(--p-a30)}
.beta-soon{color:var(--muted);text-align:center;padding:18px 0}
/* 개인정보 처리방침 (specs/081 FR-007) */
.legal-wrap{max-width:760px}
.legal h2{font-size:1.1rem;font-weight:800;margin:30px 0 10px}
.legal h3{font-size:.98rem;font-weight:700;margin:18px 0 8px}
.legal p+p,.legal ul+p,.legal p+ul{margin-top:8px}
.legal strong{color:var(--text)}
.legal ul{display:grid;gap:6px;padding-left:20px;color:var(--muted)}
.legal p{color:var(--muted);line-height:1.75}
.legal a{color:var(--p-light);text-decoration:underline}
.legal .legal-date{margin-top:30px;font-size:.88rem}

.q[open]{border-color:var(--p-a30)}


/* ============ 062 조정(2026-10-15) — 휴대폰 화면 정리: 중복 줄이기 (시안 「10/15 휴대폰 화면 정리」) ============ */
/* 900px 이하(휴대폰·폴드 펼친 화면·태블릿 세로, 시안 10/15): 히어로는 설명 앞 두 줄·버튼·「내 방송 유형별 커뮤니티」 카드만(styp-reveal.css).
   #styp·#service 는 2026-10-16 시안 교체로 휴대폰에서도 보인다(styp-race.css·customize.css) */
@media(max-width:900px){
  .hero .lead .lm{display:none}
  .hero .rollbox{display:none}
}