/* 히어로 STYP 결과 미리보기 (specs/016-hero-styp-reveal) — docs/STYP.html 시안에서 유형 데이터만 포팅.
   클래스는 전부 styp- 접두사를 붙여 기존 랜딩 클래스(.stage, .panel 등)와 겹치지 않게 한다.
   동적 값(색상 등)은 인라인 style="" 문자열로 만들지 않는다 — CSP style-src 'self' 아래서
   landing.js:124 와 같은 CSSOM 할당(el.style.setProperty 등)으로만 준다 (research.md R1). */

/* --styp-tc 는 유형별 대표 색 — JS가 결과 패널 요소에 setProperty로 덮어쓴다.
   기본값을 여기 둬서 LandingCssTests.cs의 "쓰는 변수는 root에 있어야 한다" 규칙을 그대로 만족한다. */
:root{--styp-tc:#e07a8f;--pct:0%}

/* ============ 유형 버튼 행 ============ */
.stypbar{display:flex;gap:7px;flex-wrap:wrap;align-items:center;justify-content:center}
.stypbar button{font-size:.86rem;font-weight:700;padding:8px 15px;border-radius:99px;border:1px solid var(--line-2);color:var(--muted);transition:.16s;background:none}
.stypbar button:hover{color:var(--text);border-color:var(--s)}
.stypbar button[aria-pressed="true"]{background:var(--s-a13);border-color:var(--s-a30);color:var(--s-soft)}
@media(max-width:520px){.stypbar button{font-size:.78rem;padding:6px 11px}}

/* ============ 062-landing-v2 — 히어로 미리보기의 유형 색 ============ */
/* styp-reveal.js 가 #heroRoll·#heroShow 에도 --styp-tc 를 setProperty 로 준다. 서체는 모든 유형이 같다(062 Q4) */
.rollbox b{color:var(--styp-tc);transition:color .3s}
.showcase .bwin{box-shadow:var(--shadow),0 0 70px -30px color-mix(in srgb,var(--styp-tc) 60%,transparent);transition:box-shadow .5s}
.pdots button[aria-pressed="true"]::before{background:var(--styp-tc)}

/* ============ 062 조정(2026-10-15) — 유형별 미니 커뮤니티(히어로) ============ */
/* 시안의 「직접 써 보는 커뮤니티」. 서체는 모든 유형이 같고 강조 색만 --styp-tc 로 바뀐다.
   --pct 는 투표 막대 길이 — styp-reveal.js 가 버튼에 setProperty 로 준다 */
.happ{display:grid;grid-template-columns:150px minmax(0,1fr);height:470px;text-align:left;font-size:.82rem;line-height:1.55;
  background:radial-gradient(90% 60% at 100% 0%,color-mix(in srgb,var(--styp-tc) 14%,transparent),transparent 70%),var(--surface);transition:opacity .22s ease}
/* 히어로 PC — 미리보기·점 버튼·유형 한 줄이 왼쪽 문구 높이와 비슷하게 창을 낮춘다(062 조정 2026-10-16). 900px 이하는 아래 360px */
.hero .happ{height:300px}
.happ.fading{opacity:.2}
.happ button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
.hside{display:flex;flex-direction:column;gap:10px;padding:14px 10px;border-right:1px solid var(--line);background:var(--bg-2);min-width:0}
.hcard{display:flex;align-items:center;gap:8px;padding:4px 4px 10px;border-bottom:1px solid var(--line);min-width:0}
.hcard>div{min-width:0}
.hcard b{display:block;font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcard small{display:block;font-size:.68rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hmenu{display:grid;gap:2px}
.hmenu button{display:flex;align-items:center;gap:7px;width:100%;padding:7px 8px;border-radius:8px;text-align:left;color:var(--muted);font-weight:600}
.hmenu button:hover{color:var(--text);background:var(--surface-2)}
.hmenu button[aria-current="true"]{color:var(--text);background:var(--surface-3);font-weight:800}
.happ .ic{font-style:normal;line-height:1}
.hmain{display:flex;flex-direction:column;gap:8px;padding:12px 14px;min-width:0;min-height:0}
.htop{display:flex;align-items:baseline;gap:8px}
.htop b{font-size:.88rem}.htop small{font-size:.68rem;color:var(--muted)}
.htop .hmob{display:none}
.hmt{display:none;gap:4px;overflow-x:auto;scrollbar-width:none;flex:none}
.hmt button{flex:none;border:1px solid var(--line-2);border-radius:99px;padding:3px 10px;font-size:.7rem;font-weight:700;color:var(--muted)}
.hmt button .ic{display:none}
.hmt button[aria-current="true"]{color:#111;background:var(--styp-tc);border-color:var(--styp-tc)}
.av{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:.66rem;font-weight:800;background:var(--surface-3);color:var(--text);font-style:normal}
.av.st{background:var(--styp-tc);color:#111}
.hcard .av{width:34px;height:34px;font-size:.8rem}
.hpin{flex:none;display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:10px;background:var(--surface-2);font-size:.72rem;min-width:0}
.hpin .tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hpin small{margin-left:auto;font-size:.64rem;color:var(--muted);white-space:nowrap}
.hpin.new{animation:hIn .5s cubic-bezier(.2,.8,.3,1) both}
.hlist{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:5px;scrollbar-width:thin}
.hlist>:first-child{margin-top:auto}
.hsys{align-self:center;text-align:center;font-size:.68rem;color:var(--muted);margin:2px 0 6px}
.hm{display:flex;gap:8px;align-items:flex-start;padding:5px 2px}
.hm .bd{display:grid;gap:3px;min-width:0}
.hm .who{display:flex;align-items:center;gap:5px;font-size:.7rem;font-weight:700;flex-wrap:wrap}
.hm.st .who{color:var(--styp-tc)}
.hm .sb{font-size:.62rem;font-weight:500;color:var(--muted)}
.hm .mg{font-size:.62rem;color:var(--styp-tc)}
.hm .mm{color:var(--text);overflow-wrap:anywhere}
.hm.hasq .av{margin-top:20px}
.hm.ani,.hsys.ani{animation:hIn .45s cubic-bezier(.2,.8,.3,1) both}
@keyframes hIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rq{display:flex;gap:5px;align-items:baseline;padding:1px 0 1px 8px;border-left:2px solid var(--line-2);font-size:.7rem;color:var(--muted);min-width:0}
.rq b{flex:none;color:var(--text)}
.rq span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.onlyme{font-size:.64rem;color:var(--muted)}
.hcap{font-size:.72rem;color:var(--muted)}
.hvoice{justify-self:start;display:flex;align-items:center;gap:10px;padding:7px 14px 7px 7px;border-radius:99px;background:var(--surface-2);border:1px solid color-mix(in srgb,var(--styp-tc) 40%,transparent)}
.hvoice>b{width:28px;height:28px;border-radius:50%;background:var(--styp-tc);display:grid;place-items:center}
.hvoice>b::before{content:"";border-left:8px solid #111;border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}
.hvoice.play>b::before{border:0;width:8px;height:9px;margin:0;background:linear-gradient(90deg,#111 0 3px,transparent 3px 5px,#111 5px 8px)}
.hvoice .wv{display:flex;align-items:center;gap:3px;height:20px}
.hvoice .wv s,.hlive .wv s{display:block;width:3px;border-radius:2px;background:var(--styp-tc);height:40%}
.hvoice .wv s:nth-child(3n+1),.hlive .wv s:nth-child(3n+1){height:70%}
.hvoice .wv s:nth-child(4n+2),.hlive .wv s:nth-child(4n+2){height:100%}
.hvoice .wv s:nth-child(5n),.hlive .wv s:nth-child(5n){height:55%}
.hvoice.play .wv s,.hlive.on .wv s{animation:hWave .7s ease-in-out infinite alternate}
.hvoice.play .wv s:nth-child(even),.hlive.on .wv s:nth-child(even){animation-delay:.2s}
@keyframes hWave{from{transform:scaleY(.35)}to{transform:scaleY(1.15)}}
.hvoice .dur{font-size:.68rem;font-weight:700;color:var(--muted)}
.htyping{display:flex;align-items:center;gap:6px;padding:4px 2px;font-size:.68rem;color:var(--muted)}
.htyping i{width:4px;height:4px;border-radius:50%;background:currentColor;animation:hDot 1s infinite ease-in-out}
.htyping i:nth-of-type(2){animation-delay:.15s}.htyping i:nth-of-type(3){animation-delay:.3s}
@keyframes hDot{0%,60%,100%{opacity:.25}30%{opacity:1}}
.hin{flex:none;display:flex;align-items:center;gap:6px;padding:5px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line)}
.hin input{flex:1;min-width:0;width:0;border:0;background:transparent;color:var(--text);font:inherit;font-size:.76rem;padding:4px 2px;outline:none}
.hin input::placeholder{color:var(--muted-2)}
.hin:focus-within{border-color:color-mix(in srgb,var(--styp-tc) 60%,transparent)}
.happ .hmg{font-size:.68rem;font-weight:800;padding:4px 8px;border-radius:7px;color:var(--muted)}
.happ .hmg[aria-pressed="true"]{background:var(--styp-tc);color:#111}
.happ .hsend{font-size:.68rem;font-weight:800;padding:5px 10px;border-radius:8px;background:var(--styp-tc);color:#111}
.hhint{font-size:.68rem;color:var(--muted);margin:-4px 2px 0}
.hhint:empty{display:none}
html:not(.js) .hin,html:not(.js) .hmenu,html:not(.js) .hmt{display:none}
/* 메뉴마다의 화면 */
.hscroll{flex:1;min-height:0;overflow-y:auto;display:grid;gap:8px;align-content:start}
.hpost{display:grid;gap:4px;text-align:left;padding:11px 12px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line);width:100%}
.hpost:hover{border-color:color-mix(in srgb,var(--styp-tc) 50%,transparent)}
.hpost .ht{display:flex;align-items:center;gap:7px;font-size:.8rem;font-weight:800}
.hpost .ht em{font-style:normal;font-size:.62rem;padding:0 6px;border-radius:99px;background:color-mix(in srgb,var(--styp-tc) 22%,transparent)}
.hpost .ht small{margin-left:auto;font-size:.64rem;color:var(--muted);font-weight:500}
.hpost p{color:var(--text)}
.hpost .mo{font-size:.68rem;color:var(--muted)}
.hnote{font-size:.68rem;color:var(--muted);text-align:center}
.hvq{font-size:.8rem;font-weight:800;padding:2px 2px 4px}
.hvo{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line)!important;background:var(--bg-2)!important;font-weight:700;text-align:left;overflow:hidden}
.hvo::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--pct);background:color-mix(in srgb,var(--styp-tc) 26%,transparent);transition:width .5s cubic-bezier(.2,.8,.3,1)}
.hvo>*{position:relative}.hvo small{font-size:.7rem;color:var(--muted)}
.hvo.on{border-color:var(--styp-tc)!important}
.hrk{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;background:var(--bg-2)}
.hrk em{font-style:normal;font-weight:900;width:14px;color:var(--styp-tc)}
.hrk span{flex:1;font-weight:700}.hrk small{color:var(--muted);font-size:.7rem}
.hrk.me{box-shadow:inset 0 0 0 1px var(--styp-tc)}
.happ .hrkb{padding:9px;border-radius:10px;background:var(--styp-tc);color:#111;font-weight:800}
.hlive{display:grid;gap:10px;padding:14px;border-radius:14px;background:var(--bg-2);border:1px solid color-mix(in srgb,var(--styp-tc) 40%,transparent)}
.hlive .r1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hlive .oa{font-size:.6rem;font-weight:900;letter-spacing:.06em;padding:1px 7px;border-radius:5px;background:var(--p);color:var(--on-p)}
.hlive .sub{margin-left:auto;font-size:.6rem;font-weight:800;padding:1px 7px;border-radius:99px;border:1px solid color-mix(in srgb,var(--styp-tc) 60%,transparent);color:var(--styp-tc)}
.hlive .r2{display:flex;align-items:center;gap:12px}
.happ .lp{width:40px;height:40px;border-radius:50%;background:var(--styp-tc);display:grid;place-items:center;flex:none}
.happ .lp::before{content:"";border-left:11px solid #111;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.hlive.on .lp::before{border:0;width:11px;height:13px;margin:0;background:linear-gradient(90deg,#111 0 4px,transparent 4px 7px,#111 7px 11px)}
.hlive .wv{flex:1;display:flex;align-items:center;gap:3px;height:30px}
.hlive .wv s{flex:1;width:auto;opacity:.5}.hlive.on .wv s{opacity:1}
.hlive small{font-size:.7rem;color:var(--muted)}
.heps{display:grid;gap:6px}.heps>b{font-size:.72rem;color:var(--muted)}
.hep{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;background:var(--bg-2)!important;border:1px solid var(--line)!important;text-align:left;width:100%}
.hep i{width:22px;height:22px;border-radius:50%;background:color-mix(in srgb,var(--styp-tc) 30%,transparent);display:grid;place-items:center;flex:none;font-style:normal;font-size:.56rem}
.hep.on{border-color:var(--styp-tc)!important}
.hep small{margin-left:auto;font-size:.64rem;color:var(--styp-tc);font-weight:800}
.hgcard{display:grid;gap:3px;padding:9px 11px;border-radius:10px;background:var(--bg-2);border-left:3px solid var(--styp-tc);animation:hIn .35s ease both}
.hgcard small{font-size:.64rem;color:var(--muted)}.hgcard small b{color:var(--styp-tc)}
.hgcard.sys{border-left-color:var(--line-2);color:var(--muted)}
.hgbtns{flex:none;display:flex;gap:6px}
.hgbtns button{flex:1;min-width:0;border:1px solid color-mix(in srgb,var(--styp-tc) 50%,transparent)!important;background:color-mix(in srgb,var(--styp-tc) 14%,transparent)!important;border-radius:9px;padding:7px 6px;font-weight:800}
.harts{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start}
.hart{display:grid;border-radius:12px;overflow:hidden;background:var(--bg-2);border:1px solid var(--line)}
.hart .img{aspect-ratio:4/3}
.hart .a0{background:conic-gradient(from 200deg at 50% 60%,var(--styp-tc),var(--s),var(--p),var(--styp-tc))}
.hart .a1{background:radial-gradient(circle at 50% 40%,var(--p-light) 0 16%,transparent 17%),linear-gradient(160deg,color-mix(in srgb,var(--styp-tc) 60%,var(--surface-2)),var(--surface-2))}
.hart .a2{background:radial-gradient(circle at 35% 40%,var(--styp-tc) 0 18%,transparent 19%),radial-gradient(circle at 65% 60%,var(--s) 0 22%,transparent 23%),var(--surface-3)}
.hart .a3{background:repeating-linear-gradient(105deg,rgba(255,255,255,.08) 0 2px,transparent 2px 14px),linear-gradient(180deg,color-mix(in srgb,var(--styp-tc) 45%,var(--surface-2)),var(--bg))}
.hart>div{display:flex;align-items:center;gap:6px;padding:7px 9px;font-size:.7rem;min-width:0}
.hart b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hart button{font-size:.7rem;font-weight:800;color:var(--muted);padding:0}
.hart button[aria-pressed="true"]{color:var(--p)}
@media(max-width:600px){
  .happ{grid-template-columns:minmax(0,1fr);height:460px}
  .hside{display:none}
  .hmt{display:flex}
  .htop .hmob{display:inline-flex;align-items:center;gap:7px}
  .htop .hdesk{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hm.ani,.hsys.ani,.hpin.new,.hgcard,.hvoice.play .wv s,.hlive.on .wv s,.htyping i{animation:none}
}

/* 062 조정(2026-10-15) — 휴대폰 화면 정리(시안 「10/15 휴대폰 화면 정리」).
   히어로 미리보기와 STYP 유형 소개를 「내 방송 유형별 커뮤니티」 카드 하나로 합친다: 위 유형 탭 · 가운데 미니 커뮤니티 · 아래 이름과 특징.
   900px 이하에 적용한다(폴드 펼친 화면·태블릿 세로 포함). 900px 을 넘는 PC 에서는 카드 머리·탭·설명이 숨어 지금 모습 그대로다. 스크립트가 없으면 탭도 숨는다(눌러도 바뀌지 않으므로) */
.mstyp-h,.showcase .mtabs,.mstyp-i{display:none}
@media(max-width:900px){
  .hero .showcase{width:100%;max-width:720px;margin-inline:auto;box-sizing:border-box;justify-items:stretch;gap:12px;padding:16px;border-radius:20px;background:rgba(255,255,255,.025);border:1px solid var(--line)}
  .mstyp-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 8px}
  .mstyp-h b{font-size:.95rem}
  .mstyp-h small{font-size:.75rem;color:var(--muted);white-space:nowrap}
  .showcase .mtabs{display:flex;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin:0 -16px;padding:0 16px 2px;scrollbar-width:none}
  .showcase .mtabs::-webkit-scrollbar{display:none}
  .showcase .mtabs button{flex:none}
  .showcase .mtabs button[aria-pressed="true"]{border-color:var(--styp-tc);color:var(--text);background:color-mix(in srgb,var(--styp-tc) 18%,transparent)}
  html:not(.js) .showcase .mtabs{display:none}
  .hero .pdots,.hero .bw-bar{display:none}
  .hero .showcase .bwin{max-width:none}
  .hero .happ{height:360px}
  .hero .hpin{display:none}
  .mstyp-i{display:grid;gap:6px}
  .mi-name{display:flex;align-items:baseline;gap:8px;margin:0}
  .mi-name b{font-size:1.05rem;color:var(--styp-tc)}
  .mi-name small{font-size:.8rem;font-weight:700;color:var(--muted)}
  .mstyp-i ul{margin:0;padding-left:18px;color:var(--text);font-size:.88rem;line-height:1.6}
  .mstyp-i li::marker{color:var(--styp-tc)}
}