/* ============ #service 「CUSTOMIZE」 — 시안 docs/mockups/streamu-customize.html (062 조정 2026-10-16) ============ */
/* 색은 landing.css :root 토큰을 쓴다. 미리보기 속 「누가 써도 똑같은」 기본 커뮤니티의 회색 판만 .cu-phone 안의 지역 변수(--ph-*)로 둔다.
   구역 배경은 두지 않는다 — 시안의 그라디언트 바탕·격자·빛은 빼고 페이지 배경이 이어진다(대표 요청). 상태 클래스는 cu- 접두사.
   스위치 손잡이·진행 막대는 transform 으로 움직인다. 움직임 줄이기면 landing.css 가 모든 움직임·전환을 끈다 */
.cu{--cu-ease:cubic-bezier(.2,.8,.3,1)}
.cu-inner{display:flex;flex-direction:column;gap:48px}

/* 머리 — 라벨·제목, 오른쪽에 맞춤 진행과 다시 보기 */
.cu-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
.cu-titles{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.cu-titles .eyebrow{margin-bottom:0}
.cu-titles .title{margin:0;word-break:keep-all}
.cu-progress{display:flex;align-items:center;gap:14px}
.cu-prog{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.cu-prog-label{font-size:.875rem;font-weight:700;color:var(--muted)}
.cu-pl-done{display:none;color:var(--mint)}
.cu[data-stage="all"] .cu-pl-count,.cu[data-stage="ai"] .cu-pl-count{display:none}
.cu[data-stage="all"] .cu-pl-done,.cu[data-stage="ai"] .cu-pl-done{display:inline}
.cu-prog-bar{display:block;width:180px;height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.cu-prog-fill{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--p),var(--lav));
  transform:translateX(calc(var(--cu-prog,100%) - 100%));transition:transform calc(.45s * var(--motion-pace)) ease}
.cu-ghost{min-height:40px;padding:8px 16px;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}
.cu-ghost[hidden]{display:none}
.cu-ghost:hover{color:var(--text);background:rgba(255,255,255,.09)}

/* 999px 이하는 목록 아래에 휴대폰. 1000px 이상은 아래 미디어 쿼리에서 나란히 둔다 */
.cu-body{display:flex;flex-direction:column;gap:40px}

/* 왼쪽 — 맞춤 여섯 줄. 켜면 앞 문구에 줄이 그어지고 뒤 문구가 밝아진다 */
.cu-rows{min-width:0;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.cu-row{--c:var(--p-light);--cbg:var(--p-a13);--cline:color-mix(in srgb,var(--p) 35%,transparent);--ctrack:var(--p);
  display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:rgba(5,6,12,.55);
  transition:border-color calc(.45s * var(--motion-pace)) var(--cu-ease),background calc(.45s * var(--motion-pace)) var(--cu-ease)}
.cu-row[data-tone="sky"]{--c:var(--s);--cbg:var(--s-a13);--cline:color-mix(in srgb,var(--s) 35%,transparent);--ctrack:color-mix(in srgb,var(--s) 82%,#000)}
.cu-row[data-tone="gold"]{--c:var(--gold);--cbg:color-mix(in srgb,var(--gold) 13%,transparent);--cline:color-mix(in srgb,var(--gold) 35%,transparent);--ctrack:color-mix(in srgb,var(--gold) 80%,#000)}
/* 꼬리표는 가장 긴 「음성 라이브」에 폭을 맞춰 여섯 줄의 글자가 한 줄로 선다 */
.cu-tag{flex:none;min-width:84px;padding:5px 10px;border-radius:99px;text-align:center;white-space:nowrap;font-size:.75rem;font-weight:800;
  color:var(--muted-2);background:rgba(255,255,255,.06);transition:color calc(.45s * var(--motion-pace)) var(--cu-ease),background calc(.45s * var(--motion-pace)) var(--cu-ease)}
.cu-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.cu-before{font-size:.875rem;line-height:1.4;color:var(--muted-2);text-decoration-color:color-mix(in srgb,var(--muted) 70%,transparent);word-break:keep-all}
.cu-after{font-size:1.0625rem;line-height:1.4;font-weight:700;color:var(--dim);word-break:keep-all;transition:color calc(.45s * var(--motion-pace)) var(--cu-ease)}
.cu-switch{flex:none;width:52px;height:30px;padding:0;border:0;border-radius:99px;background:none;cursor:pointer}
.cu-track{position:relative;display:block;width:52px;height:30px;border-radius:99px;background:color-mix(in srgb,var(--surface-3) 88%,#fff);transition:background calc(.45s * var(--motion-pace)) var(--cu-ease)}
.cu-knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--on-p);box-shadow:0 2px 6px rgba(0,0,0,.4);transition:transform calc(.45s * var(--motion-pace)) var(--cu-ease)}
.cu-row.cu-on{border-color:var(--cline);background:rgba(255,255,255,.04)}
.cu-row.cu-on .cu-tag{color:var(--c);background:var(--cbg)}
.cu-row.cu-on .cu-before{text-decoration-line:line-through}
.cu-row.cu-on .cu-after{color:var(--text)}
.cu-row.cu-on .cu-track{background:var(--ctrack)}
.cu-row.cu-on .cu-knob{transform:translateX(22px)}
/* 스크립트가 없으면 눌러도 바뀌지 않으므로 스위치 자리만 남기고 감춘다 */
html:not(.js) .cu-switch{visibility:hidden}

/* 오른쪽 — 휴대폰 속 커뮤니티 미리보기 */
.cu-phone-wrap{min-width:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.cu-phone{--ph-bg:#15161d;--ph-head:#1c1d26;--ph-tile:#262733;--ph-chip:#1f2029;--ph-edge:#2a2b36;--ph-name:#c9c8d6;--ph-sub:#6b6a80;--ph-note:#9a99ac;
  --ph-ink:#e7e6f3;--ph-me:#3a3b48;--ph-mint:#8fe0c8;--ph-lav:#a9b4e4;--ph-soft:#e6e2f5;
  width:min(340px,100%);height:640px;padding:10px;border-radius:40px;background:#05060c;border:1px solid var(--line-2);zoom:.9;
  box-shadow:0 30px 80px -24px rgba(0,0,0,.75),0 0 0 6px rgba(255,255,255,.03)}
.cu-screen{position:relative;height:100%;overflow:hidden;display:flex;flex-direction:column;border-radius:31px;background:var(--ph-bg);transition:background calc(.45s * var(--motion-pace)) var(--cu-ease)}
.cu-screen *{transition:background calc(.45s * var(--motion-pace)) var(--cu-ease),color calc(.45s * var(--motion-pace)) var(--cu-ease),border-radius calc(.45s * var(--motion-pace)) var(--cu-ease)}
.cu-ph-head{display:flex;align-items:center;gap:12px;padding:22px 18px 16px;background:var(--ph-head)}
.cu-ph-av{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:12px;background:var(--ph-tile)}
.cu-ph-av svg{width:22px;height:22px}
.cu-box{fill:none;stroke:var(--ph-sub);stroke-width:2}
.cu-star{display:none;fill:#fff}
.cu-ph-names{display:flex;flex-direction:column;gap:3px;min-width:0}
.cu-ph-name{font-size:1rem;font-weight:800;color:var(--ph-name)}
.cu-ph-desc{font-size:.75rem;color:var(--ph-sub)}
.cu-ph-members{padding:10px 18px;border-bottom:1px solid var(--ph-tile)}
.cu-chips{display:flex;flex-wrap:wrap;gap:6px}
.cu-chip{padding:5px 10px;border-radius:99px;font-size:.75rem;font-weight:700;color:var(--muted-2);background:var(--ph-chip)}
.cu-chip.mint{color:var(--ph-mint);background:color-mix(in srgb,var(--mint) 14%,transparent)}
.cu-chip.rose{color:var(--p-light);background:var(--p-a13)}
.cu-chip.lav{color:var(--ph-lav);background:color-mix(in srgb,var(--lav) 15%,transparent)}
.cu-ph-chat{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;padding:14px 16px;overflow:hidden}
.cu-notice{padding:12px 14px;border-radius:12px;background:var(--ph-head);border:1px solid var(--ph-edge)}
.cu-notice b{display:block;margin-bottom:4px;font-size:.6875rem;font-weight:700;color:var(--ph-sub)}
.cu-notice span{font-size:.8125rem;line-height:1.5;color:var(--ph-note)}
.cu-say{display:none;flex-direction:column;gap:4px;max-width:84%}
.cu-who{font-size:.6875rem;font-weight:700}
.cu-msg{padding:9px 12px;font-size:.8125rem;line-height:1.5}
.cu-fan{align-self:flex-start}
.cu-fan .cu-who{color:var(--muted-2)}
.cu-fan .cu-msg{border-radius:4px 14px 14px 14px;background:var(--ph-tile);color:var(--ph-ink)}
.cu-me{align-self:flex-end;align-items:flex-end}
.cu-me .cu-who{color:var(--ph-note)}
.cu-me .cu-msg{border-radius:14px 4px 14px 14px;background:var(--ph-me);color:#fff}
.cu-raid{display:none;flex-direction:column;gap:8px;margin-top:auto;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.cu-raid-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.cu-raid-top strong{font-size:.8125rem}
.cu-raid-top span{flex:none;padding:3px 8px;border-radius:99px;font-size:.6875rem;font-weight:800;color:#1a1400;background:var(--gold)}
.cu-raid-bar{display:block;height:7px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.cu-raid-bar i{display:block;width:64%;height:100%;background:linear-gradient(90deg,var(--p),var(--gold))}
.cu-raid small{font-size:.6875rem;color:var(--muted)}
.cu-live{display:none;align-items:center;gap:12px;margin:0 12px 12px;padding:12px 14px;border-radius:16px;background:var(--ph-tile)}
.cu-live b{padding:4px 7px;border-radius:6px;font-size:.625rem;font-weight:900;letter-spacing:.08em;color:#fff;background:var(--p)}
.cu-live>span:not(.cu-wave){flex:1;min-width:0;font-size:.8125rem;font-weight:700}
.cu-wave{display:flex;align-items:flex-end;gap:3px;height:18px}
.cu-wave i{width:3px;height:18px;border-radius:2px;background:#fff;transform-origin:bottom;animation:cu-wave 1s ease-in-out infinite}
.cu-wave i:nth-child(2){animation-delay:.15s}
.cu-wave i:nth-child(3){animation-delay:.3s}
.cu-wave i:nth-child(4){animation-delay:.45s}
.cu-wave i:nth-child(5){animation-delay:.6s}

/* 맞춤 상태 — 휴대폰에 cu-<맞춤> 이 붙으면 그 모습으로 */
.cu-phone.cu-theme .cu-screen{background:linear-gradient(180deg,#1d1530,#121428)}
.cu-phone.cu-theme .cu-ph-head{background:linear-gradient(135deg,color-mix(in srgb,var(--p) 35%,transparent),color-mix(in srgb,var(--lav) 35%,transparent))}
.cu-phone.cu-theme .cu-ph-name{color:#fff}
.cu-phone.cu-theme .cu-ph-desc{color:var(--ph-soft)}
.cu-phone.cu-theme .cu-ph-members{border-bottom-color:rgba(255,255,255,.1)}
.cu-phone.cu-theme .cu-fan .cu-msg{background:rgba(255,255,255,.1)}
.cu-phone.cu-theme .cu-me .cu-who{color:var(--p-light)}
.cu-phone.cu-theme .cu-me .cu-msg{background:var(--grad-p)}
.cu-phone.cu-theme .cu-live{background:linear-gradient(135deg,color-mix(in srgb,var(--p) 45%,transparent),color-mix(in srgb,var(--lav) 45%,transparent))}
.cu-phone.cu-world .cu-ph-av{border-radius:50%;background:linear-gradient(135deg,var(--lav),var(--p-light))}
.cu-phone.cu-world .cu-box{display:none}
.cu-phone.cu-world .cu-star{display:block}
/* 바뀌는 글 — 두 가지를 모두 그려 두고 상태에 맞는 쪽만 보인다 */
.cu-on-w,.cu-on-n{display:none}
.cu-phone.cu-world .cu-ph-names .cu-off{display:none}
.cu-phone.cu-world .cu-on-w{display:inline}
.cu-phone.cu-name .cu-ph-members .cu-off,.cu-phone.cu-name .cu-who .cu-off{display:none}
.cu-phone.cu-name .cu-on-n{display:inline}
.cu-phone.cu-name .cu-chips.cu-on-n{display:flex}
.cu-phone.cu-name .cu-fan .cu-who{color:var(--ph-mint)}
.cu-phone.cu-reply .cu-notice{display:none}
.cu-phone.cu-reply .cu-say{display:flex;animation:cu-pop calc(.45s * var(--motion-pace)) cubic-bezier(.2,.9,.3,1.2) both}
.cu-phone.cu-play .cu-raid{display:flex;animation:cu-pop calc(.45s * var(--motion-pace)) cubic-bezier(.2,.9,.3,1.2) both}
.cu-phone.cu-voice .cu-live{display:flex;animation:cu-pop calc(.45s * var(--motion-pace)) cubic-bezier(.2,.9,.3,1.2) both}

/* AI 방송 분석 — 여섯 맞춤이 다 켜지면 휴대폰 화면 전체를 덮는다(아직 없는 기능이라 「예시 화면」) */
.cu-aiv{display:none;position:absolute;inset:0;z-index:5;overflow:hidden;flex-direction:column;gap:14px;padding:26px 18px 18px;
  background:radial-gradient(120% 80% at 50% 0%,#3a1648 0%,#150f2b 50%,#080912 100%)}
.cu-aiv::before,.cu-aiv::after{content:"";position:absolute;border-radius:50%;filter:blur(50px);pointer-events:none}
.cu-aiv::before{width:360px;height:360px;top:-170px;right:-140px;background:radial-gradient(circle,color-mix(in srgb,var(--p) 60%,transparent),transparent 65%)}
.cu-aiv::after{width:300px;height:300px;bottom:-160px;left:-120px;background:radial-gradient(circle,color-mix(in srgb,var(--s) 50%,transparent),transparent 65%)}
.cu-aiv>*{position:relative;z-index:1}
.cu-phone.cu-ai .cu-aiv{display:flex;animation:cu-reveal calc(1.1s * var(--motion-pace)) cubic-bezier(.7,0,.2,1) both}
.cu-aiv-top{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.cu-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:100px;font-size:.75rem;font-weight:800;letter-spacing:.06em;color:#fff;background:linear-gradient(120deg,var(--p),var(--lav))}
.cu-badge svg{width:12px;height:12px;fill:#fff}
.cu-aiv-title{margin:0;font-size:1.5625rem;line-height:1.22;font-weight:900;letter-spacing:-.03em;word-break:keep-all}
.cu-chart{padding:12px 12px 6px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.cu-chart-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;font-size:.6875rem;color:var(--muted)}
.cu-done{display:inline-flex;align-items:center;gap:5px;font-weight:800;color:var(--mint)}
.cu-done svg{width:7px;height:7px}
.cu-done circle{fill:var(--mint)}
/* 그래프 — 칸을 viewBox(280×96)와 같은 비율로 두어 잘라 낸 면(.cu-area)과 선(svg)이 정확히 겹친다 */
.cu-graph{position:relative;width:100%;aspect-ratio:280/96}
.cu-graph svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cu-area{position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--p) 40%,transparent),transparent);
  clip-path:polygon(0% 79.17%,9.29% 70.83%,18.57% 73.96%,28.57% 60.42%,37.86% 63.54%,47.86% 43.75%,55.71% 14.58%,62.14% 34.38%,71.43% 41.67%,80.71% 37.5%,90% 47.92%,100% 44.79%,100% 100%,0% 100%)}
.cu-line{fill:none;stroke:var(--p);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.cu-mark{stroke:rgba(255,255,255,.2);stroke-dasharray:3 4}
.cu-graph circle.cu-pulse{fill:var(--p)}
.cu-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cu-stat{display:flex;flex-direction:column;gap:4px;padding:11px;border-radius:14px}
.cu-stat span{font-size:.625rem;font-weight:700}
.cu-stat strong{font-size:.875rem;letter-spacing:-.02em}
.cu-stat small{font-size:.6875rem;color:var(--ph-soft)}
.cu-stat.hot{background:var(--p-a13);border:1px solid color-mix(in srgb,var(--p) 32%,transparent)}
.cu-stat.hot span{color:var(--p-light)}
.cu-stat.drop{background:var(--s-a13);border:1px solid color-mix(in srgb,var(--s) 32%,transparent)}
.cu-stat.drop span{color:var(--s)}
.cu-tip{display:flex;align-items:flex-start;gap:10px;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(135deg,color-mix(in srgb,var(--p) 22%,transparent),color-mix(in srgb,var(--lav) 22%,transparent))}
.cu-tip svg{flex:none;width:16px;height:16px;margin-top:2px;fill:#fff}
.cu-tip div{display:flex;flex-direction:column;gap:3px}
.cu-tip strong{font-size:.8125rem}
.cu-tip span{font-size:.75rem;line-height:1.55;color:var(--ph-soft);word-break:keep-all}
.cu-note{margin-top:auto;text-align:right;font-size:.625rem;color:var(--muted-2)}
.cu-phone.cu-ai .cu-rise{animation:cu-rise calc(.7s * var(--motion-pace)) var(--cu-ease) both}
.cu-phone.cu-ai .cu-rise.d1{animation-delay:calc(.7s * var(--motion-pace))}
.cu-phone.cu-ai .cu-rise.d2{animation-delay:calc(.9s * var(--motion-pace))}
.cu-phone.cu-ai .cu-rise.d3{animation-delay:calc(1.1s * var(--motion-pace))}
.cu-phone.cu-ai .cu-rise.d4{animation-delay:calc(1.3s * var(--motion-pace))}
.cu-phone.cu-ai .cu-rise.d5{animation-delay:calc(1.5s * var(--motion-pace))}
.cu-phone.cu-ai .cu-line{stroke-dasharray:900;animation:cu-draw calc(1.8s * var(--motion-pace)) ease calc(1.2s * var(--motion-pace)) both}
.cu-pulse{transform-origin:center;transform-box:fill-box;animation:cu-pulse 1.6s ease-in-out infinite}

/* 휴대폰 아래 한 줄 — 구역의 data-stage(none·some·all·ai)에 맞는 말만 */
.cu-caption{font-size:.9375rem;font-weight:800;color:var(--muted-2);text-align:center}
.cu-caption>span{display:none}
.cu[data-stage="none"] .cu-caption>[data-for="none"],.cu[data-stage="some"] .cu-caption>[data-for="some"],
.cu[data-stage="all"] .cu-caption>[data-for="all"],.cu[data-stage="ai"] .cu-caption>[data-for="ai"]{display:inline}
.cu[data-stage="all"] .cu-caption,.cu[data-stage="ai"] .cu-caption{color:var(--p-light)}

@keyframes cu-pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes cu-wave{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes cu-reveal{from{clip-path:circle(0% at 50% 55%)}to{clip-path:circle(150% at 50% 55%)}}
@keyframes cu-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes cu-draw{from{stroke-dashoffset:900}to{stroke-dashoffset:0}}
@keyframes cu-pulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.35)}}

/* 1000px 이상 — 목록과 휴대폰을 나란히 두고, 휴대폰을 목록 전체의 세로 가운데에 맞춘다(대표 요청 2026-10-16).
   아래 한 줄(.cu-caption)은 높이 셈에서 빼(absolute) 휴대폰 자체가 가운데에 온다. 목록 윗변은 제목 아래 48px 그대로 —
   휴대폰이 목록보다 40px 높아 목록이 20px 내려앉으므로 머리와 몸 사이를 28px 로 줄여 둔다 */
@media(min-width:1000px){
  .cu-inner{gap:28px}
  .cu-body{flex-direction:row;align-items:center;gap:56px}
  .cu-rows{flex:1 1 auto}
  .cu-phone-wrap{flex:0 0 360px;position:relative}
  .cu-caption{position:absolute;top:100%;left:0;right:0;margin-top:14px}
}

/* 휴대폰 미리보기는 zoom 으로 안의 배치 그대로 줄인다(PC 0.9, 600px 이하 0.82). 600px 이하는 목록 줄도 조금 작게 (대표 요청 2026-10-16) */
@media(max-width:600px){
  .cu-inner{gap:28px}
  .cu-progress{width:100%;justify-content:space-between}
  .cu-prog{align-items:flex-start}
  .cu-rows{gap:8px}
  .cu-row{gap:10px;padding:11px 12px;border-radius:14px}
  .cu-tag{min-width:72px;padding:4px 7px;font-size:.6875rem}
  .cu-before{font-size:.75rem}
  .cu-after{font-size:.9375rem}
  .cu-switch,.cu-track{width:46px;height:27px}
  .cu-knob{width:21px;height:21px}
  .cu-row.cu-on .cu-knob{transform:translateX(19px)}
  .cu-phone{height:600px;zoom:.82}
}