/* ============ #why 「WHY STREAMU?」 — 시안 docs/mockups/streamu-why.html (062 조정 2026-10-16) ============ */
/* 색은 landing.css :root 토큰만 쓴다(시안에만 있던 --bubble-text·--mint·--warn 은 거기 더했다). 폭은 .wrap, 버튼·라벨·제목은 랜딩 것 그대로.
   상태 클래스는 why- 접두사(why-active·why-done·why-live) — 랜딩 전역 클래스와 겹치지 않게 한다.
   움직임은 why.js 가 .why-live 를 붙일 때만 일어나고, 움직임 줄이기면 landing.css 가 모두 끈다 */
/* 구역 배경은 두지 않는다 — 시안의 격자 줄무늬·빛 두 개·그라디언트 바탕은 빼고, 페이지에 고정된 배경(.bg-fx)이 그대로 이어진다 (대표 요청 2026-10-16) */
/* 첫 줄은 라벨, 둘째 줄에 왼쪽 글과 대화 창 — 창 윗변은 제목 첫 줄, 아랫변은 불편 목록 끝에 맞는다(대표 요청 2026-10-16) */
.why-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);align-items:stretch;gap:14px 56px}
.why-inner>.eyebrow{grid-column:1;justify-self:start;margin-bottom:0}

/* 왼쪽 — 머리와 불편 목록 */
.why-left{grid-column:1;grid-row:2;min-width:0;display:flex;flex-direction:column;gap:22px}
.why-head{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.why-head .title,.why-head .lead{margin:0;word-break:keep-all}
.why-topics{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.why-topic{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;border:1px dashed var(--p-a30);background:color-mix(in srgb,var(--p) 4%,transparent);transition:background calc(.3s * var(--motion-pace)) ease,border-color calc(.3s * var(--motion-pace)) ease}
.why-ticon{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:12px;background:var(--p-a13)}
.why-ticon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.why-ticon .warn{color:var(--warn)}
.why-ticon .ok{display:none;color:var(--mint)}
.why-tbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.why-tno{font-size:.75rem;font-weight:700;letter-spacing:.04em;color:var(--muted-2)}
.why-ttext{font-size:1rem;line-height:1.45;font-weight:700;word-break:keep-all;text-decoration-color:color-mix(in srgb,var(--muted) 75%,transparent);text-decoration-thickness:2px}
.why-tchip{flex:none;padding:4px 10px;border-radius:99px;font-size:.75rem;font-weight:800;color:var(--p-light);background:var(--p-a13)}
.why-topic.why-active{border-style:solid;border-color:color-mix(in srgb,var(--p) 70%,transparent);background:color-mix(in srgb,var(--p) 10%,transparent)}
.why-topic.why-active .why-tchip{color:var(--on-p);background:color-mix(in srgb,var(--p) 55%,transparent)}
.why-topic.why-done{border-style:solid;border-color:color-mix(in srgb,var(--mint) 38%,transparent);background:color-mix(in srgb,var(--mint) 5%,transparent)}
.why-topic.why-done .why-ticon{background:color-mix(in srgb,var(--mint) 13%,transparent)}
.why-topic.why-done .why-ticon .warn{display:none}
.why-topic.why-done .why-ticon .ok{display:block}
.why-topic.why-done .why-ttext{color:var(--muted-2);text-decoration-line:line-through}
.why-topic.why-done .why-tchip{color:var(--mint);background:color-mix(in srgb,var(--mint) 14%,transparent)}

/* 오른쪽 — 「# 스트리머-라운지」 대화 창 */
.why-win{grid-column:2;grid-row:2;min-width:0;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius-lg);
  background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line-2);box-shadow:var(--shadow)}
.why-bar{display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.03)}
.why-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.16)}
.why-ch{margin-left:6px;font-size:.875rem;font-weight:700;color:var(--muted)}
.why-replay{margin-left:auto;min-height:32px;padding:6px 14px;border-radius:99px;font-size:.8125rem;font-weight:700;color:var(--muted);
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);cursor:pointer;transition:color .2s,background .2s}
.why-replay[hidden]{display:none}
.why-replay:hover{color:var(--text);background:rgba(255,255,255,.09)}
.why-chat{flex:1 1 0;min-height:360px;overflow-y:auto;display:flex;flex-direction:column;gap:18px;padding:22px 20px;scrollbar-width:none}
.why-chat::-webkit-scrollbar{width:0}
.why-chat:focus-visible{outline-offset:-3px}
.why-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 18px;border-top:1px solid var(--line)}
.why-foot>span{flex:1 1 200px;font-size:.875rem;color:var(--muted)}

/* 말 — 스트리머(왼쪽)와 스트리뮤(오른쪽) */
.why-msg{display:flex;gap:11px;max-width:82%}
.why-chat.why-live .why-msg{animation:why-pop calc(.45s * var(--motion-pace)) cubic-bezier(.2,.9,.3,1.2) both}
.why-av{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--surface-3);font-size:.8125rem;font-weight:800;color:var(--muted)}
.why-col{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.why-name{font-size:.875rem;font-weight:700}
.why-bubble{padding:10px 14px;border-radius:4px 16px 16px 16px;background:var(--surface-3);color:var(--bubble-text);font-size:1rem;line-height:1.55;word-break:keep-all}
/* 스트리뮤 — 심볼 단독(가이드 「프로필」) 31×34px, 심볼과 글 사이는 심볼 폭의 1/2 이상(16px) */
.why-su{align-self:flex-end;flex-direction:row-reverse;gap:16px;max-width:86%}
.why-su .why-col{align-items:flex-end}
.why-mark{flex:none;display:block;width:31px;height:34px}
/* 답장 말풍선 — 브랜드 그라디언트 테두리(--grad-brand), 분홍→하늘 은은한 바탕, 분홍 그림자와 윗변 빛. 첫 줄 앞에 브랜드 점 (대표 요청 2026-10-16).
   스치는 빛(::after)은 재생 중(.why-live)에 말풍선이 올라올 때만 한 번 — 스크립트 없음·움직임 줄이기면 없다 */
.why-reply,.why-su .why-typing{border:1px solid transparent;border-radius:20px 6px 20px 20px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--p) 15%,var(--surface-2)),color-mix(in srgb,var(--s) 11%,var(--surface-2))) padding-box,var(--grad-brand) border-box;
  box-shadow:0 18px 40px -22px color-mix(in srgb,var(--p) 75%,transparent),inset 0 1px 0 rgba(255,255,255,.08)}
.why-reply{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:9px;padding:16px 20px 17px}
.why-reply::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);transform:translateX(-130%) skewX(-18deg)}
.why-chat.why-live .why-reply::after{animation:why-shine 1.1s ease .3s 1 both}
@keyframes why-shine{to{transform:translateX(330%) skewX(-18deg)}}
.why-range{display:flex;align-items:flex-start;gap:8px;font-size:.8125rem;line-height:1.5;font-weight:700;letter-spacing:.01em;color:var(--p-light);word-break:keep-all}
.why-range::before{content:"";flex:none;width:7px;height:7px;margin-top:.42em;border-radius:50%;background:var(--grad-brand);box-shadow:0 0 10px color-mix(in srgb,var(--p) 80%,transparent)}
.why-promise{font-size:1.125rem;line-height:1.4;font-weight:800;letter-spacing:-.02em;color:var(--text);word-break:keep-all}
.why-typing{display:flex;gap:5px;padding:14px 16px;border-radius:16px 4px 16px 16px;background:var(--surface-3)}
.why-typing i{width:7px;height:7px;border-radius:50%;background:var(--bubble-text);animation:why-blink 1.2s infinite}
.why-typing i:nth-child(2){animation-delay:.2s}
.why-typing i:nth-child(3){animation-delay:.4s}
@keyframes why-pop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes why-blink{0%,80%,100%{opacity:.25}40%{opacity:1}}

/* 1000px 이하 — 한 줄로 쌓는다: 라벨 → 제목·설명·불편 목록 → 대화 창 */
@media(max-width:1000px){
  .why-inner{grid-template-columns:minmax(0,1fr)}
  .why-win{grid-column:1;grid-row:auto;margin-top:34px}
}
/* 760px 이하 — 대화 창만 남긴다(시안). 불편 목록은 대화와 같은 말이다 */
@media(max-width:760px){
  .why-topics{display:none}
  .why-msg{max-width:92%}
  .why-su{max-width:94%}
  .why-chat{padding:18px 14px}
}