/* CNOL RADAR 소개 페이지 — Material Design (#6200EE · #03DAC6) + 부드러운 마이크로 트랜지션 */
:root{color-scheme:only light;
  --p:#6200EE; --p2:#3700B3; --p-cont:#EDE3FF; --on-p-cont:#21005D;
  --s:#03DAC6; --s2:#018786; --s-cont:#D3F8F4; --on-s-cont:#00403B;
  --bg:#FFFFFF; --tint:#F7F3FE; --ink:#1C1B1F; --ink2:#49454F; --ink3:#6F6A75; --line:#E7E0EC; --outline:#CAC4D0;
  --e1:0 1px 2px rgba(28,27,31,.12),0 1px 3px 1px rgba(28,27,31,.06);
  --e2:0 1px 2px rgba(28,27,31,.12),0 2px 6px 2px rgba(28,27,31,.08);
  --e3:0 4px 8px 3px rgba(28,27,31,.10),0 1px 3px rgba(28,27,31,.12);
  --e4:0 8px 16px 4px rgba(28,27,31,.12),0 2px 4px rgba(28,27,31,.12);
  --em:cubic-bezier(.2,0,0,1); --em-out:cubic-bezier(.05,.7,.1,1);
  --yt-ink:#0f0f0f; --yt-ink2:#606060; --yt-bar:#2a8cf0;
  --font:'Pretendard Variable',Pretendard,'Noto Sans KR','Noto Sans JP',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.md{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.6;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-x:hidden}
html:lang(ja) body.md{word-break:normal;line-break:strict}
body.md a{color:inherit}
body.md :focus-visible{outline:2px solid var(--p);outline-offset:3px;border-radius:8px}
.md-wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.md-wrap.narrow{max-width:820px}

/* 진행 막대 · 위 막대 */
.md-progress{position:fixed;inset:0 0 auto;height:3px;z-index:40;pointer-events:none}
.md-progress i{display:block;height:100%;background:var(--p);transform-origin:0 50%;transform:scaleX(0)}
.md-bar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:box-shadow .3s var(--em)}
.md-bar.up{box-shadow:var(--e2)}
.md-bar .md-wrap{display:flex;align-items:center;gap:12px 20px;min-height:64px}
.md-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.md-brand .mk{width:34px;height:34px;border-radius:10px;background:#fff;box-shadow:var(--e1);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.md-brand .mk img{width:22px;height:auto}
.md-brand b{font-size:16px;font-weight:800;letter-spacing:.2px}
.md-nav{display:flex;gap:2px;flex:1 1 auto;margin-left:12px}
.md-nav a{position:relative;padding:8px 14px;border-radius:20px;font-size:14.5px;font-weight:600;color:var(--ink2);text-decoration:none;transition:background-color .25s var(--em),color .25s var(--em)}
.md-nav a:hover{background:rgba(98,0,238,.08);color:var(--p)}
.md-tools{display:flex;align-items:center;gap:10px;margin-left:auto}
.md-lang{display:flex;padding:3px;border-radius:20px;background:#F3EDF7}
.md-lang button{border:0;background:transparent;color:var(--ink2);font:600 12.5px/1 var(--font);padding:7px 11px;border-radius:16px;cursor:pointer;transition:background-color .25s var(--em),color .25s var(--em)}
.md-lang button:hover{color:var(--p)}
.md-lang button[aria-pressed="true"]{background:#fff;color:var(--p);box-shadow:var(--e1)}

/* 버튼 · 칩 · 카드 */
.md-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 24px;border-radius:22px;border:1px solid transparent;font:700 15px/1 var(--font);text-decoration:none;cursor:pointer;isolation:isolate;transition:box-shadow .25s var(--em),background-color .25s var(--em),transform .35s var(--em-out);-webkit-tap-highlight-color:transparent}
.md-btn::after{content:"";position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity .2s var(--em);z-index:-1;border-radius:inherit}
.md-btn:hover::after{opacity:.08}
.md-btn:active::after{opacity:.12}
.md-btn.lg{height:54px;padding:0 30px;border-radius:27px;font-size:16.5px}
.md-btn.sm{height:38px;padding:0 18px;font-size:14px}
.md-btn.filled{background:var(--p);color:#fff}
.md-btn.filled:hover{box-shadow:var(--e2)}
.md-btn.filled::after{background:#fff}
.md-btn.outlined{border-color:var(--outline);color:var(--p);background:transparent}
.md-btn.white{background:#fff;color:var(--p)}
.md-btn.white:hover{box-shadow:var(--e3)}
.md-btn.ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.md-btn .rp,.md-tabs .rp,.md-faq .rp,.md-fab .rp{position:absolute;border-radius:50%;background:currentColor;opacity:.22;transform:scale(0);pointer-events:none;animation:rp .6s var(--em) forwards;z-index:0}
@keyframes rp{to{transform:scale(1);opacity:0}}
.md-chip{display:inline-flex;align-items:center;gap:6px;margin:0;padding:7px 14px;border-radius:8px;font-size:13.5px;font-weight:700}
.md-chip.tonal{background:var(--p-cont);color:var(--on-p-cont)}
.md-chip.teal{background:var(--s-cont);color:var(--on-s-cont)}
.md-card{background:#fff;border-radius:24px;transition:box-shadow .35s var(--em),transform .5s var(--em-out)}
.md-card.e1{box-shadow:var(--e1)}
.md-card.e2{box-shadow:var(--e2)}
.md-card.e3{box-shadow:var(--e3)}
.md-checks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.md-checks li{display:flex;gap:10px;font-size:15.5px;line-height:1.55;color:var(--ink2)}
.md-checks li::before{content:"";width:20px;height:20px;margin-top:1px;flex-shrink:0;border-radius:50%;background:var(--s-cont) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23018786' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.md-checks.light li{color:#fff}
.md-checks.light li::before{background-color:rgba(255,255,255,.18);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2303DAC6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E")}

/* 첫 화면 */
.md-hero{position:relative;padding:56px 0 88px;overflow:hidden}
.md-hero::before{content:"";position:absolute;width:760px;height:760px;right:-220px;top:-200px;border-radius:50%;background:radial-gradient(circle,#F1E9FF 0%,rgba(241,233,255,0) 68%);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
.md-h1{margin:20px 0 0;font-size:clamp(34px,3.7vw,50px);font-weight:800;line-height:1.2;letter-spacing:-.035em}
.md-h1>span{display:block}
.md-h1 .hl{color:var(--p)}
html:lang(en) .md-h1{font-size:clamp(30px,3.1vw,42px);letter-spacing:-.03em}
html:lang(ja) .md-h1{font-size:clamp(28px,3.1vw,44px);line-height:1.24;letter-spacing:-.02em}
.md-h1 .w{display:inline-block}
.md-h1.go .w{animation:wIn .8s var(--em-out) both;animation-delay:calc(var(--i) * 55ms + 60ms)}
@keyframes wIn{from{opacity:0;transform:translateY(.45em)}to{opacity:1;transform:none}}
.md-sub{margin:22px 0 0;max-width:33em;font-size:18px;line-height:1.75;color:var(--ink2)}
.md-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.md-cta.c{justify-content:center}
.md-trust{display:flex;flex-wrap:wrap;gap:10px 20px;margin:28px 0 0;padding:0;list-style:none}
.md-trust li{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink2)}
.md-trust li::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--s-cont) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23018786' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat}
.hero-art{position:relative;padding:84px 10px 64px 26px}
.art-main{padding:20px 20px 16px;display:flex;flex-direction:column;gap:10px}
.art-h .live{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--yt-ink2)}
.art-h .live i{width:8px;height:8px;border-radius:50%;background:#e53935;box-shadow:0 0 0 0 rgba(229,57,53,.5);animation:pulse 2.2s var(--em) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(229,57,53,.45)}70%{box-shadow:0 0 0 8px rgba(229,57,53,0)}100%{box-shadow:0 0 0 0 rgba(229,57,53,0)}}
.art-v{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.art-v b{font-size:30px;font-weight:800;color:var(--yt-ink);letter-spacing:-.02em}
.art-v em{font-style:normal;font-size:13px;font-weight:700;color:#2ba640}
.stk{display:flex;align-items:flex-end;gap:2px;height:150px}
.stk .c{flex:1 1 0;display:flex;flex-direction:column;justify-content:flex-end;gap:1px;height:100%;transform-origin:50% 100%}
.stk i{display:block;border-radius:1px}
.stk .c i:first-child{border-radius:2px 2px 1px 1px}
.stk.grow .c{animation:grow .9s var(--em-out) both;animation-delay:calc(var(--i) * 14ms)}
@keyframes grow{from{transform:scaleY(.04);opacity:.3}to{transform:none;opacity:1}}
.ax{display:flex;justify-content:space-between;font-size:11.5px;color:var(--yt-ink2)}
.lg{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--yt-ink2)}
.lg>span{display:flex;align-items:center;gap:6px}
.lg i{width:9px;height:9px;border-radius:2px}
.art-msg{position:absolute;left:0;bottom:-36px;max-width:330px;display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:18px;animation:bob 7s ease-in-out infinite}
.art-msg .av{width:32px;height:32px;border-radius:50%;background:#fff;box-shadow:var(--e1);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.art-msg p{margin:0;display:flex;flex-direction:column;gap:2px;font-size:13.5px;line-height:1.5;color:var(--ink2)}
.art-msg p b{font-size:13px;color:var(--ink)}
.art-try{position:absolute;right:-8px;top:0;display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-radius:18px;animation:bob 8s ease-in-out -3s infinite}
.art-try b{font-size:14.5px}
.btns{display:flex;gap:8px}
.btns span{padding:7px 14px;border-radius:16px;font-size:12.5px;font-weight:700;color:var(--ink2);border:1px solid var(--outline)}
.btns span.on{background:var(--p);border-color:var(--p);color:#fff}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -6px}}

/* 공통 섹션 */
.md-sec{padding:96px 0}
.md-sec.tint{background:var(--tint)}
.md-head{max-width:760px}
.md-head.c{margin:0 auto;text-align:center}
.md-head .over,.md-pillar .over{margin:0 0 10px;font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--p)}
.md-h2{margin:0;font-size:clamp(28px,3.2vw,42px);font-weight:800;line-height:1.28;letter-spacing:-.03em}
html:lang(ja) .md-h2{font-size:clamp(24px,2.7vw,36px);letter-spacing:-.01em}
.md-head .lead{margin:14px 0 0;font-size:17.5px;line-height:1.7;color:var(--ink2)}
.md-head .md-chip{margin-top:18px}
.md-fine{margin:18px 0 0;font-size:13px;color:var(--ink3)}
.md-fine.c{text-align:center}

/* 숫자 */
.md-sec#numbers{padding:56px 0}
.md-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.md-nums>div{display:flex;flex-direction:column;gap:6px;padding:8px 6px}
.md-nums b{font-size:clamp(34px,3.4vw,46px);font-weight:800;line-height:1.1;color:var(--p);letter-spacing:-.03em}
.md-nums b small{margin-left:2px;font-size:.5em;font-weight:800}
.md-nums>div>span{font-size:15px;line-height:1.55;color:var(--ink2)}

/* 핵심 기능 */
.md-pillar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;margin-top:84px}
.md-pillar.flip .pv{order:2}
.md-pillar h3{margin:0;font-size:clamp(24px,2.4vw,32px);font-weight:800;line-height:1.3;letter-spacing:-.025em}
.md-pillar .pt>p:not(.over){margin:14px 0 22px;font-size:17px;line-height:1.75;color:var(--ink2)}
.pv{display:flex;justify-content:center}
.fv{width:100%;max-width:500px;padding:22px;display:flex;flex-direction:column;gap:12px}
.fv .top{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.fv .top small{flex:1 0 100%;font-size:12.5px;font-weight:600;color:var(--yt-ink2)}
.fv .top b{font-size:28px;font-weight:800;color:var(--yt-ink)}
.fv .top em{font-style:normal;font-size:12.5px;font-weight:700;color:#2ba640}
.fv .stk{height:130px}
.fv.rec{gap:12px}
.fv .row{display:flex;align-items:center;gap:14px;padding:12px;border-radius:16px;background:#F7F5FA;transition:background-color .3s var(--em)}
.fv .row:hover{background:#F0EAFB}
.fv .th{width:42px;height:64px;border-radius:9px;flex-shrink:0;background:linear-gradient(160deg,#fdba74,#f43f5e)}
.fv .th.b{background:linear-gradient(160deg,#93c5fd,#6366f1)}
.fv .th.wide{width:64px;height:38px}
.fv .row .tx{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.fv .row b{font-size:14px;line-height:1.4;color:var(--yt-ink)}
.fv .row small{font-size:12px;color:var(--yt-ink2)}
.fv .row em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--p);line-height:1.45}
.fv .fit{flex-shrink:0;padding:4px 9px;border-radius:8px;background:var(--p-cont);color:var(--on-p-cont);font-size:11.5px;font-weight:800;white-space:nowrap}
.fv.try .q{font-size:19px;font-weight:800;color:var(--yt-ink)}
.fv.try small{font-size:13.5px;color:var(--yt-ink2);line-height:1.5}
.fv .hrs{display:flex;align-items:flex-end;gap:3px;height:96px;margin-top:4px}
.fv .hrs i{flex:1 1 0;border-radius:2px 2px 0 0;background:#c5dcf7;transform-origin:50% 100%}
.fv .hrs i.hot{background:#065fd4}
.fv .hrs.grow i{animation:grow .8s var(--em-out) both;animation-delay:calc(var(--i) * 22ms)}
.fv .btns{margin-top:4px}
.chat{width:100%;max-width:500px;margin:0;padding:18px}
.chat .hd{display:flex;align-items:center;gap:12px;padding:2px 2px 14px;border-bottom:1px solid var(--line)}
.chat .av{width:36px;height:36px;border-radius:50%;background:#fff;box-shadow:var(--e1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chat .who{display:flex;flex-direction:column;min-width:0}
.chat .who b{font-size:14.5px}
.chat .who small{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink3)}
.chat .who small i{width:7px;height:7px;border-radius:50%;background:#1baf7a}
.chat time{margin-left:auto;font-size:12px;color:var(--ink3);white-space:nowrap}
.chat .msgs{display:flex;flex-direction:column;gap:10px;padding-top:14px}
.chat .msg{align-self:flex-start;max-width:90%;margin:0;padding:11px 14px;border-radius:18px 18px 18px 6px;background:#F3EDF7;font-size:14px;line-height:1.6;color:var(--ink)}
.chat .msg.me{align-self:flex-end;border-radius:18px 18px 6px 18px;background:var(--p);color:#fff;font-weight:700}
.chat .tag{display:inline-block;padding:2px 8px;border-radius:8px;background:var(--s-cont);color:var(--on-s-cont);font-size:11.5px;font-weight:800;vertical-align:1px}
.tilt{transform-style:preserve-3d;will-change:transform}

/* 전체 도구 */
.md-tabs{position:relative;display:flex;justify-content:center;gap:4px;margin:36px auto 0;max-width:560px;border-bottom:1px solid var(--line)}
.md-tabs button{position:relative;overflow:hidden;flex:1 1 0;padding:14px 12px;border:0;background:transparent;font:700 15px/1.2 var(--font);color:var(--ink2);cursor:pointer;border-radius:12px 12px 0 0;transition:color .25s var(--em),background-color .25s var(--em)}
.md-tabs button:hover{background:rgba(98,0,238,.06)}
.md-tabs button[aria-selected="true"]{color:var(--p)}
.md-tabs .ind{position:absolute;bottom:-1px;left:0;height:3px;width:0;border-radius:3px 3px 0 0;background:var(--p);transition:transform .4s var(--em-out),width .4s var(--em-out)}
.md-toolgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px}
.tool{display:flex;gap:14px;align-items:flex-start;padding:20px;border-radius:20px;background:#fff;box-shadow:var(--e1);transition:box-shadow .3s var(--em),transform .4s var(--em-out)}
.tool:hover{box-shadow:var(--e3);transform:translateY(-2px)}
.tool .ic{width:42px;height:42px;border-radius:12px;background:var(--p-cont);color:var(--p);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tool b{display:block;font-size:16px;line-height:1.35}
.tool span{display:block;margin-top:4px;font-size:14px;line-height:1.55;color:var(--ink2)}
.md-toolgrid.cascade .tool{animation:cas .55s var(--em-out) both;animation-delay:calc(var(--i) * 45ms)}
@keyframes cas{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

/* 유튜브 스튜디오 카드: 실시간(48시간 막대) · 개요(지표 탭 + 선 차트) */
.yt-rt,.yt-ov,.lp-tip{font-family:Roboto,var(--font)}
.yt-rt{padding:18px 20px 14px;display:flex;flex-direction:column;gap:4px}
.rt-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rt-h b{font-size:16px;font-weight:700;color:var(--yt-ink)}
.rt-h .live{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--yt-ink2)}
.rt-h .live i{width:8px;height:8px;border-radius:50%;background:#065fd4;animation:pulseB 2.2s var(--em) infinite}
@keyframes pulseB{0%{box-shadow:0 0 0 0 rgba(6,95,212,.45)}70%{box-shadow:0 0 0 8px rgba(6,95,212,0)}100%{box-shadow:0 0 0 0 rgba(6,95,212,0)}}
.rt-sub{margin:0;font-size:12.5px;color:var(--yt-ink2)}
.rt-k{display:flex;flex-direction:column;margin-top:10px}
.rt-k small{font-size:12.5px;color:var(--yt-ink2)}
.rt-k b{font-size:28px;font-weight:700;line-height:1.25;color:var(--yt-ink);font-variant-numeric:tabular-nums}
.rt-bars{position:relative;display:flex;align-items:flex-end;gap:2px;height:96px;margin-top:8px;border-bottom:1px solid #e5e5e5}
.rt-bars i{flex:1 1 0;min-height:2px;background:var(--yt-bar);transform-origin:50% 100%;transition:background-color .15s}
.rt-bars i.on{background:#065fd4}
.rt-bars.grow i{animation:grow .8s var(--em-out) both;animation-delay:calc(var(--i) * 12ms)}
.scene.on .rt-bars i{animation:grow .8s var(--em-out) both;animation-delay:calc(var(--i) * 12ms)}
.rt-ax{display:flex;justify-content:space-between;margin-top:5px;font-size:11.5px;color:var(--yt-ink2)}
.rt-top{margin-top:12px;padding-top:10px;border-top:1px solid #e5e5e5}
.rt-top p{margin:0 0 4px;font-size:12.5px;font-weight:500;color:var(--yt-ink2)}
.rt-top .r{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:13px;color:var(--yt-ink)}
.rt-top .av{width:24px;height:24px;border-radius:50%;flex-shrink:0}
.rt-top .n{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rt-top b{font-weight:500;font-variant-numeric:tabular-nums}
.yt-ov{width:100%;max-width:520px;padding:0 0 16px;overflow:hidden}
.ov-h{margin:0;padding:20px 20px 14px;text-align:center;font-size:17px;font-weight:500;color:var(--yt-ink)}
.yt-ov .tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5}
.yt-ov .tb{display:flex;flex-direction:column;gap:3px;padding:12px 14px 12px 18px;background:#f9f9f9;border-top:3px solid transparent;min-width:0}
.yt-ov .tb+.tb{border-left:1px solid #e5e5e5}
.yt-ov .tb.on{background:#fff;border-top-color:#065fd4}
.yt-ov .tb>span{font-size:12.5px;font-weight:500;color:var(--yt-ink2)}
.yt-ov .tb>b{font-size:23px;font-weight:700;line-height:1.2;color:var(--yt-ink);font-variant-numeric:tabular-nums}
.yt-ov .tb>small{display:flex;align-items:center;gap:5px;font-size:11.5px;line-height:1.35;color:var(--yt-ink2)}
.yt-ov .tb>small i{width:15px;height:15px;border-radius:50%;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:9.5px;font-weight:900;color:#fff;background:#2ba640}
.yt-ov .tb>small i.dn{background:#cc0000}
.yt-ov .plot{position:relative;height:190px;margin:18px 56px 26px 20px}
.yt-ov .plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.yt-ov .plot .g{stroke:#e5e5e5;stroke-width:1;vector-effect:non-scaling-stroke}
.yt-ov .plot .g.z{stroke:#c6c6c6}
.yt-ov .plot .band{fill:rgba(0,0,0,.07)}
.yt-ov .plot .ln{fill:none;stroke:#065fd4;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.yt-ov .plot .ln.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.4s var(--em-out) .2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.yt-ov .plot .yl{position:absolute;right:-52px;width:46px;transform:translateY(-50%);font-size:11.5px;color:var(--yt-ink2);font-variant-numeric:tabular-nums}
.yt-ov .plot .xl{position:absolute;top:calc(100% + 8px);transform:translateX(-50%);font-size:11.5px;color:var(--yt-ink2);white-space:nowrap}
.yt-ov .plot .xl.first{transform:none}.yt-ov .plot .xl.last{transform:translateX(-100%)}
.yt-ov .plot .cross{position:absolute;top:0;bottom:0;width:1px;background:#909090;opacity:0;pointer-events:none}
.yt-ov .plot .dot{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#065fd4;border:2px solid #fff;box-shadow:0 0 0 1px #065fd4;opacity:0;pointer-events:none}
.yt-ov .plot.on .cross,.yt-ov .plot.on .dot{opacity:1}
.yt-ov .key{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;margin:0 20px;font-size:12px;color:var(--yt-ink2)}
.yt-ov .key i{display:inline-block;margin-right:-8px}
.yt-ov .key i.ln{width:16px;height:2.5px;border-radius:2px;background:#065fd4}
.yt-ov .key i.bd{width:16px;height:10px;border-radius:2px;background:rgba(0,0,0,.09)}
.lp-tip{position:absolute;z-index:5;padding:8px 11px;border-radius:8px;background:#fff;color:var(--yt-ink);font-size:12px;line-height:1.5;white-space:nowrap;border:1px solid rgba(0,0,0,.06);box-shadow:0 4px 18px rgba(0,0,0,.16),0 1px 3px rgba(0,0,0,.08);pointer-events:none;opacity:0;transform:translate(-50%,calc(-100% - 10px));transition:opacity .18s var(--em)}
.lp-tip.on{opacity:1}
.lp-tip b{display:block;font-weight:700}
.lp-tip span{color:var(--yt-ink2)}

/* 60초 둘러보기 (영상 대신 움직이는 화면) */
.md-player{max-width:880px;margin:40px auto 0;overflow:hidden;border-radius:24px}
.md-player .chrome{display:flex;align-items:center;gap:7px;padding:12px 16px;background:#F3EDF7;border-bottom:1px solid var(--line)}
.md-player .chrome>i{width:10px;height:10px;border-radius:50%;background:#CAC4D0}
.md-player .chrome>i:nth-child(1){background:#ff5f57}.md-player .chrome>i:nth-child(2){background:#febc2e}.md-player .chrome>i:nth-child(3){background:#28c840}
.md-player .chrome span{flex:1 1 auto;margin:0 10px;padding:6px 12px;border-radius:8px;background:#fff;font-size:12.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-player .pp{width:34px;height:34px;border:0;border-radius:50%;background:#fff;color:var(--p);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--e1)}
.md-player .pp .pl{display:none}
.md-player .pp[aria-pressed="true"] .pl{display:block}
.md-player .pp[aria-pressed="true"] .ps{display:none}
.md-player .stage{position:relative;height:330px;background:#fff}
.scene{position:absolute;inset:0;padding:30px 36px;display:flex;flex-direction:column;justify-content:center;gap:14px;opacity:0;transform:translateY(10px) scale(.99);pointer-events:none;transition:opacity .5s var(--em),transform .6s var(--em-out)}
.scene.on{opacity:1;transform:none;pointer-events:auto}
.scene .lab{margin:0;font-size:13px;font-weight:700;color:var(--ink3)}
.scene .ta{display:flex;flex-direction:column;gap:8px;padding:16px 18px;border-radius:14px;border:1.5px solid var(--p);background:#FBF8FF;font:500 14.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}
.scene .ta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:0}
.scene.on .ta span{animation:type .9s steps(36,end) forwards;animation-delay:calc(var(--i) * .75s + .2s)}
@keyframes type{to{max-width:100%}}
.scene .row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.scene .go{display:inline-flex;align-items:center;height:42px;padding:0 22px;border-radius:21px;background:var(--p);color:#fff;font-weight:700;font-size:14.5px}
.scene.on .go{animation:press .5s var(--em) 2.6s both}
@keyframes press{50%{transform:scale(.94);box-shadow:0 0 0 6px rgba(98,0,238,.18)}}
.scene .ok{font-size:14px;font-weight:700;color:var(--s2);opacity:0}
.scene.on .ok{animation:fade .5s var(--em) 3s both}
@keyframes fade{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.scene .top{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.scene .top small{flex:1 0 100%;font-size:13px;font-weight:600;color:var(--yt-ink2)}
.scene .top b{font-size:34px;font-weight:800;color:var(--yt-ink)}
.scene .top em{font-style:normal;font-size:13px;font-weight:700;color:#2ba640}
.scene .stk{height:170px}
.scene.on .stk .c{animation:grow .9s var(--em-out) both;animation-delay:calc(var(--i) * 14ms)}
.scene .row2{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:16px;background:#F7F5FA;opacity:0}
.scene.on .row2{animation:slide .6s var(--em-out) both;animation-delay:calc(var(--i) * .25s + .15s)}
@keyframes slide{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.scene .row2 .tx{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.scene .row2 b{font-size:15px;color:var(--yt-ink)}
.scene .row2 small{font-size:12.5px;color:var(--yt-ink2)}
.scene .row2 em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--p)}
.scene .th{width:42px;height:64px;border-radius:9px;flex-shrink:0;background:linear-gradient(160deg,#fdba74,#f43f5e)}
.scene .th.b{background:linear-gradient(160deg,#93c5fd,#6366f1)}
.scene .th.wide{width:64px;height:38px}
.scene .fit{flex-shrink:0;padding:4px 9px;border-radius:8px;background:var(--p-cont);color:var(--on-p-cont);font-size:11.5px;font-weight:800;white-space:nowrap}
.scene .q{font-size:22px;font-weight:800;color:var(--yt-ink)}
.scene small{font-size:14px;color:var(--yt-ink2)}
.scene.on .btns .on{animation:press .5s var(--em) 1.2s both}
.scene .toast{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin:6px 0 0;padding:10px 14px;border-radius:12px;background:#1C1B1F;color:#fff;font-size:13.5px;opacity:0}
.scene.on .toast{animation:fade .5s var(--em-out) 1.7s both}
.scene .toast .tag{display:inline-block;padding:2px 8px;border-radius:8px;background:var(--s-cont);color:var(--on-s-cont);font-size:11.5px;font-weight:800}
.md-player .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:14px 16px 16px;background:#fff;border-top:1px solid var(--line)}
.md-player .steps button{display:flex;flex-direction:column;gap:8px;padding:6px 4px;border:0;background:transparent;text-align:left;font:700 13.5px/1.3 var(--font);color:var(--ink3);cursor:pointer;border-radius:8px}
.md-player .steps button[aria-current="true"]{color:var(--p)}
.md-player .steps i{display:block;height:4px;border-radius:2px;background:#E7E0EC;overflow:hidden}
.md-player .steps b{display:block;height:100%;width:0;background:var(--p);border-radius:2px}
.md-player .steps button.done b{width:100%}
.md-player .steps button[aria-current="true"] b{animation:fill var(--dur,4.2s) linear forwards}
.md-player.paused .steps button[aria-current="true"] b{animation-play-state:paused}
@keyframes fill{to{width:100%}}

/* 누구를 위한: 쓰기 전 · 후 */
.md-who .ba{display:flex;flex-direction:column;gap:6px;margin:0 0 6px;padding:12px 14px;border-radius:14px;background:#F7F5FA}
.md-who .ba p{display:flex;gap:10px;align-items:flex-start;margin:0;font-size:14px;line-height:1.5;color:var(--ink2)}
.md-who .ba span.b,.md-who .ba span.a{flex-shrink:0;padding:1px 8px;border-radius:6px;font-size:12px;font-weight:800}
.md-who .ba span.b{background:#ECE6F0;color:var(--ink3)}
.md-who .ba span.a{background:var(--p-cont);color:var(--p)}

/* 사용 예시 */
.md-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px}
.case{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:24px 26px 28px}
.case .ill{width:100%;height:130px;border-radius:18px;background:#FBF8FF;display:flex;align-items:center;justify-content:center}
.case .ill svg{width:220px;height:120px}
.case h3{margin:4px 0 0;font-size:19px;font-weight:800}
.case p{margin:0;font-size:15.5px;line-height:1.7;color:var(--ink2)}
.case:hover{box-shadow:var(--e3)}
.review{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;padding:24px 28px}
.review h3{margin:0;font-size:18px;font-weight:800}
.review p{margin:4px 0 0;font-size:15px;color:var(--ink2)}

/* 누구를 위한 */
.md-who{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px}
.md-who article{padding:28px;display:flex;flex-direction:column;gap:10px}
.md-who .ic{width:52px;height:52px;border-radius:16px;background:var(--p-cont);color:var(--p);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800}
.md-who h3{margin:8px 0 0;font-size:20px;font-weight:800}
.md-who p{margin:0 0 8px;font-size:15.5px;line-height:1.7;color:var(--ink2)}
.md-who article:hover{box-shadow:var(--e3)}

/* 비교 */
.md-cmp{margin-top:40px;overflow-x:auto;padding:8px}
.md-cmp table{width:100%;border-collapse:collapse;min-width:560px}
.md-cmp th,.md-cmp td{padding:16px 18px;text-align:left;font-size:15px;line-height:1.55;border-bottom:1px solid var(--line);vertical-align:top}
.md-cmp tbody tr:last-child th,.md-cmp tbody tr:last-child td{border-bottom:0}
.md-cmp thead th{font-size:14px;font-weight:800;color:var(--ink3)}
.md-cmp thead th.us{color:var(--p)}
.md-cmp tbody th{width:18%;font-weight:700;color:var(--ink)}
.md-cmp td{color:var(--ink2)}
.md-cmp td.us{color:var(--ink);font-weight:700;background:linear-gradient(90deg,rgba(98,0,238,.05),rgba(98,0,238,.02))}

/* 요금 */
.md-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;gap:6px;padding:30px}
.plan:hover{box-shadow:var(--e3)}
.plan.rec{outline:2px solid var(--p);outline-offset:-2px}
.plan .tag{position:absolute;top:24px;right:24px;padding:4px 10px;border-radius:8px;background:var(--p);color:#fff;font-size:12px;font-weight:800}
.plan h3{margin:0;font-size:19px;font-weight:800}
.plan .who{margin:0;font-size:14px;color:var(--ink3)}
.plan .price{margin:16px 0 8px;font-size:38px;font-weight:800;letter-spacing:-.02em}
.plan .price small{margin-left:3px;font-size:15px;font-weight:600;color:var(--ink3)}
.plan .md-checks{flex:1 1 auto;margin:6px 0 24px}
.plan .md-btn{align-self:stretch}

/* 질문 */
.md-faq{display:flex;flex-direction:column;gap:12px;margin-top:36px}
.qa{border-radius:18px;background:#fff;box-shadow:var(--e1);overflow:hidden;transition:box-shadow .3s var(--em)}
.qa.open{box-shadow:var(--e2)}
.qa button{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;width:100%;padding:20px 22px;border:0;background:transparent;text-align:left;font:700 16.5px/1.45 var(--font);color:var(--ink);cursor:pointer}
.qa button svg{margin-left:auto;flex-shrink:0;color:var(--ink3);transition:transform .45s var(--em-out)}
.qa.open button svg{transform:rotate(180deg);color:var(--p)}
.qa .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--em-out)}
.qa.open .a{grid-template-rows:1fr}
.qa .a>div{overflow:hidden}
.qa .a p{margin:0;padding:0 22px 22px;font-size:15.5px;line-height:1.75;color:var(--ink2)}

/* 마지막 */
.md-end{padding:40px 0 110px}
.end{padding:60px 40px;text-align:center;color:#fff;background:linear-gradient(135deg,var(--p) 0%,var(--p2) 100%);border-radius:32px}
.end h2{margin:0;font-size:clamp(28px,3.4vw,42px);font-weight:800;letter-spacing:-.03em;line-height:1.28}
.end .md-checks{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px 24px;margin:26px 0 34px}

/* 떠 있는 버튼 */
.md-fab{position:fixed;right:24px;bottom:24px;z-index:35;overflow:hidden;display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 22px 0 18px;border-radius:16px;background:var(--p);color:#fff;font:700 15px/1 var(--font);text-decoration:none;box-shadow:var(--e3);opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;transition:opacity .35s var(--em),transform .5s var(--em-out),box-shadow .3s var(--em)}
.md-fab.show{opacity:1;transform:none;pointer-events:auto}
.md-fab:hover{box-shadow:var(--e4)}

/* 바닥 */
.md-foot{padding:56px 0 40px;border-top:1px solid var(--line);font-size:14px;color:var(--ink2)}
.md-foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px;margin-bottom:28px}
.md-foot .cols>div{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.md-foot .brandcol p{margin:6px 0 0;font-size:13.5px;color:var(--ink3)}
.md-foot h4{margin:0 0 4px;font-size:13px;font-weight:800;color:var(--ink)}
.md-foot a{text-decoration:none}
.md-foot a:hover{color:var(--p)}
.md-foot .api{margin:0 0 6px;font-size:12.5px;color:var(--ink3)}

/* 등장 (스크립트가 있을 때만 숨겼다가 보여줘요) */
html.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--em) var(--d,0s),transform .8s var(--em-out) var(--d,0s)}
html.js .rv.in,html.rv-all .rv{opacity:1;transform:none}

/* 화면 크기 */
@media (max-width:1000px){
  .md-nav{display:none}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .hero-art{max-width:560px}
  .md-pillar,.md-pillar.flip{grid-template-columns:minmax(0,1fr);gap:32px;margin-top:64px}
  .md-pillar.flip .pv{order:0}
  .md-toolgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md-who,.md-plans,.md-cases{grid-template-columns:minmax(0,1fr);max-width:560px;margin-left:auto;margin-right:auto}
  .md-nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md-foot .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .md-sec{padding:72px 0}
  .md-hero{padding:36px 0 64px}
  .md-sub{font-size:16.5px}
  .hero-art{padding:20px 0 0}
  .art-msg,.art-try{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin-top:12px;max-width:none;animation:none}
  .md-toolgrid{grid-template-columns:minmax(0,1fr)}
  .end{padding:44px 22px;border-radius:24px}
  .md-player .stage{height:360px}
  .scene{padding:22px 18px}
  .scene .ta{font-size:12.5px;padding:12px}
  .scene .top b{font-size:28px}
  .scene .stk{height:150px}
  .md-player .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md-fab{right:16px;bottom:16px}
}
@media (max-width:420px){
  .md-wrap{padding:0 16px}
  .md-brand b{display:none}
  .md-lang button{padding:7px 8px}
  .md-cta .md-btn{width:100%}
  .md-bar .md-btn.sm{padding:0 14px}
  .md-nums{gap:12px}
  .md-foot .cols{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js .rv{opacity:1;transform:none}
}

/* v8 · 맨 위 '이게 다 돼요' */
.md-feats{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.md-feats b{font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--p)}
.md-feats ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.md-feats li{padding:7px 12px;border-radius:999px;font-size:13px;font-weight:700;color:var(--ink);background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(16,12,40,.06)}
.md-feats li:nth-child(-n+4){color:#3700B3;background:var(--p-cont);border-color:transparent}
@media (max-width:640px){.md-feats li{font-size:12.5px;padding:6px 10px}}

/* v8 · 실제 화면 (브라우저 창 틀) */
.shot{position:relative;margin:0;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 34px 70px -30px rgba(40,20,120,.45),0 0 0 1px rgba(28,27,31,.07)}
.shot .bar{display:flex;align-items:center;gap:6px;height:32px;padding:0 14px;background:#f5f1fb;border-bottom:1px solid var(--line)}
.shot .bar i{width:10px;height:10px;border-radius:50%;background:#ddd}
.shot .bar i:nth-child(1){background:#ff5f57}.shot .bar i:nth-child(2){background:#febc2e}.shot .bar i:nth-child(3){background:#28c840}
.shot .bar span{margin-left:10px;padding:3px 12px;border-radius:999px;background:#fff;font-size:11.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot img{display:block;width:100%;height:auto;background:linear-gradient(135deg,#efe7ff,#e6f0ff)}
.md-pillar .pv .shot{transition:transform .25s cubic-bezier(.2,0,0,1)}
@media (hover:hover){.md-pillar .pv .shot:hover{transform:translateY(-4px)}}
.hero-art .hero-shot{position:relative;z-index:1}
.hero-art .art-msg{z-index:3}
.hero-art .art-try{z-index:3}
.md-links{display:flex;flex-direction:column;gap:6px;margin:14px 0 18px;padding:0;list-style:none}
.md-links a{font-size:15px;font-weight:700;color:var(--p);text-decoration:none}
.md-links a:hover{text-decoration:underline}
.tools-cta{margin-top:26px;align-items:center}
.md-more{font-size:15px;font-weight:700;color:var(--p);text-decoration:none}
.md-more:hover{text-decoration:underline}
.md-who .pain{margin:0 0 6px;font-size:15px;font-weight:700;font-style:italic;color:var(--p2);line-height:1.5}

/* v8 · 첫 화면: 실제 화면을 크게 */
.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:44px}
.md-h1{font-size:clamp(32px,3.3vw,48px)}
.md-h1>span{text-wrap:balance}
.hero-art{padding:58px 0 70px 10px}
@media (min-width:1200px){.hero-art .hero-shot{width:calc(100% + 110px)}}
.art-try{right:-6px;top:6px}
.art-msg{left:-18px;bottom:-6px}
@media (max-width:1000px){.hero-art .hero-shot{width:100%}.hero-art{padding:10px 0 0}}

.md-pillar .pt .d2{margin-top:-4px;font-size:15px;color:var(--ink2)}
.tl-desc{max-width:760px;margin:18px auto 0;text-align:center;font-size:15.5px;line-height:1.7;color:var(--ink2)}
.tl-note{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;margin:22px 0 0;font-size:15px}
.tl-note b{color:var(--ink)}
.tl-note span{color:var(--ink2)}
.end .end-sub{margin:10px auto 0;max-width:640px;font-size:16px;line-height:1.65;color:rgba(255,255,255,.88)}

/* ---------- v9: 로그인 링크 · 이게 다 돼요(눌러서 바로) · 채널 12개 48시간(유튜브 실시간처럼) · 사용 신청 ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.md-h2.pre{white-space:pre-line}
.md-login{padding:8px 12px;border-radius:18px;font-size:14.5px;font-weight:700;color:var(--ink2);text-decoration:none;transition:background-color .25s var(--em),color .25s var(--em)}
.md-login:hover{background:rgba(98,0,238,.08);color:var(--p)}
#fb1,#fb2,#fb3,#fb4,#fb5,#multi,#tools,#start,#demo{scroll-margin-top:84px}
.md-pillar.flash .pv>*,.yt-band.flash .mt-rt,#tools.flash .md-toolgrid{animation:flashRing 1.8s var(--em) 1}
@keyframes flashRing{0%{box-shadow:0 0 0 0 rgba(98,0,238,0)}18%{box-shadow:0 0 0 6px rgba(98,0,238,.28)}100%{box-shadow:0 0 0 14px rgba(98,0,238,0)}}

/* 이게 다 돼요 */
.md-capab{padding:4px 0 64px;background:linear-gradient(180deg,#fff 0%,#fff 55%,var(--tint) 100%)}
.cap-card{background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--e3);padding:28px 28px 24px;display:flex;flex-direction:column;gap:20px}
.cap-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px}
.cap-head h2{margin:0;font-size:24px;font-weight:900;letter-spacing:-.02em}
.cap-head p{margin:6px 0 0;font-size:15px;line-height:1.6;color:var(--ink2);max-width:620px}
.cap-key{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;padding:0;list-style:none;font-size:13px;font-weight:700;color:var(--ink2)}
.cap-key li{display:inline-flex;align-items:center;gap:6px}
.cap-key li::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--gc)}
.g-find{--gc:#6200EE;--gt:#EDE3FF}.g-watch{--gc:#065fd4;--gt:#E3EEFD}.g-make{--gc:#018786;--gt:#D3F8F4}.g-agent{--gc:#B45309;--gt:#FEF0D7}
.cap-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.cap{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px 34px 14px 14px;border-radius:18px;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;min-width:0;transition:transform .5s var(--em-out),box-shadow .3s var(--em),border-color .3s var(--em),background-color .3s var(--em)}
.cap .ic{width:40px;height:40px;border-radius:12px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:var(--gt,#F3EDF7);color:var(--gc,var(--ink2));transition:background-color .3s var(--em),color .3s var(--em),transform .5s var(--em-out)}
.cap .tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.cap .tx b{font-size:14.5px;font-weight:800;line-height:1.35;letter-spacing:-.01em}
.cap .tx small{font-size:12.5px;line-height:1.5;color:var(--ink3)}
.cap .go{position:absolute;right:14px;top:50%;font-size:16px;font-weight:800;color:var(--gc,var(--p));opacity:0;transform:translate(-6px,-50%);transition:opacity .3s var(--em),transform .45s var(--em-out)}
.cap:hover,.cap:focus-visible{transform:translateY(-3px);border-color:transparent;box-shadow:var(--e2);background:linear-gradient(180deg,#fff 0%,var(--gt,#F7F3FE) 160%)}
.cap:hover .ic,.cap:focus-visible .ic{background:var(--gc,var(--p));color:#fff;transform:scale(1.04)}
.cap:hover .go,.cap:focus-visible .go{opacity:1;transform:translate(0,-50%)}
.cap.all{border-style:dashed;border-color:var(--outline);background:var(--tint)}
.cap.all .ic{background:#fff;color:var(--p)}
.cap.all:hover .ic{background:var(--p);color:#fff}
.cap-card.rv.in .cap{animation:capIn .6s var(--em-out) both;animation-delay:calc(var(--i) * 35ms + .1s)}
@keyframes capIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:1040px){.cap-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.cap-card{padding:22px 16px 18px;border-radius:24px}.cap-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.cap{padding:12px 12px 12px 12px}.cap .go{display:none}.cap .ic{width:34px;height:34px;border-radius:10px}.cap .ic svg{width:18px;height:18px}.cap .tx small{display:none}}
@media (max-width:380px){.cap-grid{grid-template-columns:minmax(0,1fr)}}

/* 채널 12개 · 48시간 — 유튜브 스튜디오 카드 그대로의 느낌 (Roboto · 회색 글씨 · 얇은 테두리) */
.yt-band{background:#f9f9f9}
.yt-card{background:#fff;border:1px solid #e5e5e5;border-radius:12px;padding:16px 20px 18px;font-family:Roboto,var(--font);color:var(--yt-ink);min-width:0}
.mt-row{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:16px;margin-top:8px}
.mt-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.mt-hd .t{display:flex;align-items:center;gap:12px}
.mt-hd .t b{font-size:16px;font-weight:500;color:var(--yt-ink)}
.mt-hd small{font-size:12px;color:var(--yt-ink2)}
.yt-band .live{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--yt-ink2)}
.yt-band .live i{width:8px;height:8px;border-radius:50%;background:#065fd4;animation:pulseB 2.2s var(--em) infinite}
.yt-chips{display:inline-flex;gap:8px}
.yt-chips button{height:32px;padding:0 12px;border:0;border-radius:8px;background:#f2f2f2;color:#0f0f0f;font:500 14px/1 Roboto,var(--font);cursor:pointer;transition:background-color .2s var(--em),color .2s var(--em)}
.yt-chips button:hover{background:#e5e5e5}
.yt-chips button[aria-pressed="true"]{background:#0f0f0f;color:#fff}
.mt-sub{margin:4px 0 0;font-size:12.5px;color:var(--yt-ink2)}
.mt-k{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:12px}
.mt-k small{display:block;font-size:12.5px;color:var(--yt-ink2)}
.mt-k b{display:block;font-size:30px;font-weight:500;line-height:1.25;color:var(--yt-ink);font-variant-numeric:tabular-nums}
.mt-k .r{text-align:right}
.mt-k .r b{font-size:20px}
.mt-k em{display:flex;align-items:center;gap:6px;margin-top:2px;font-style:normal;font-size:12px;color:var(--yt-ink2)}
.mt-k em i{width:15px;height:15px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:9.5px;font-weight:900;color:#fff;background:#2ba640}
.mt-plot{position:relative;display:flex;align-items:stretch;gap:2px;height:160px;margin-top:14px;border-bottom:1px solid #e5e5e5}
.mt-plot .c{flex:1 1 0;min-width:0;display:flex;flex-direction:column-reverse;justify-content:flex-start;gap:2px;cursor:default}
.mt-plot .c i{display:block;flex:0 0 auto;width:100%;background:var(--yt-bar);transition:opacity .2s var(--em),background-color .2s var(--em)}
.mt-plot .c i:last-child{border-radius:2px 2px 0 0}
.mt-plot.sum .c:hover i,.mt-plot.sum .c.on i{background:#065fd4}
.mt-plot.ch:hover .c i{opacity:.55}
.mt-plot.ch .c:hover i,.mt-plot.ch .c.on i{opacity:1}
.mt-plot.hl .c i{opacity:.14}
.mt-plot.hl .c i.hs{opacity:1}
.mt-plot.grow .c{animation:grow .8s var(--em-out) both;animation-delay:calc(var(--i) * 10ms);transform-origin:50% 100%}
.mt-plot .lp-tip{min-width:170px}
.mt-plot .lp-tip .rw{display:flex;align-items:center;gap:8px;margin-top:3px;font-size:12px;color:var(--yt-ink)}
.mt-plot .lp-tip .rw i{width:9px;height:9px;border-radius:2px;flex-shrink:0}
.mt-plot .lp-tip .rw b{display:inline;font-weight:500;font-variant-numeric:tabular-nums;min-width:56px}
.mt-plot .lp-tip .rw span{color:var(--yt-ink2);max-width:150px;overflow:hidden;text-overflow:ellipsis}
.mt-ax{display:flex;justify-content:space-between;margin-top:6px;font-size:12px;color:var(--yt-ink2)}
.mt-legend{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:12px}
.mt-legend .lg{display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 8px;border-radius:8px;background:#f2f2f2;font-size:12px;color:var(--yt-ink);cursor:default;transition:opacity .25s var(--em),background-color .25s var(--em)}
.mt-legend .lg i{width:10px;height:10px;border-radius:2px;flex-shrink:0}
.mt-legend .lg em{font-style:normal;color:var(--yt-ink2);font-variant-numeric:tabular-nums}
.mt-legend .lg:hover,.mt-legend .lg:focus-visible{background:#e5e5e5}
.mt-legend.dim .lg:not(.on){opacity:.4}
.mt-ex{margin:12px 0 0;font-size:11.5px;color:#909090}
.mt-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column}
.mt-list li{display:flex;align-items:center;gap:10px;padding:7px 6px;border-radius:8px;font-size:13px;color:var(--yt-ink);transition:background-color .2s var(--em)}
.mt-list li:hover,.mt-list li.on{background:#f2f2f2}
.mt-list .n{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-list b{font-weight:500;font-variant-numeric:tabular-nums}
.mt-list li.more{color:var(--yt-ink2)}
.mt-list li.more:hover{background:none}
.yt-av{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font:700 11px/1 Roboto,var(--font);color:#fff;background:var(--av,#909090)}
.yt-mine{flex-shrink:0;padding:2px 6px;border-radius:4px;background:#e3eefd;color:#065fd4;font-size:11px;font-weight:500}
.mt-tiles-hd{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;margin:28px 0 10px;font-family:Roboto,var(--font)}
.mt-tiles-hd b{font-size:16px;font-weight:500;color:var(--yt-ink)}
.mt-tiles-hd small{font-size:12.5px;color:var(--yt-ink2)}
.mt-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mt-tile{display:flex;flex-direction:column;gap:6px;padding:12px 14px 12px;transition:border-color .25s var(--em),box-shadow .3s var(--em),transform .5s var(--em-out)}
.mt-tile:hover,.mt-tile.on{border-color:#c6c6c6;box-shadow:0 4px 14px rgba(0,0,0,.08);transform:translateY(-2px)}
.mt-tile .tp{display:flex;align-items:center;gap:8px;min-width:0}
.mt-tile .tp .n{flex:1 1 auto;min-width:0;font-size:13px;font-weight:500;color:var(--yt-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-tile .nb{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.mt-tile .nb b{font-size:20px;font-weight:500;color:var(--yt-ink);font-variant-numeric:tabular-nums}
.mt-tile .nb small{font-size:12px;color:var(--yt-ink2)}
.mt-tile .hot{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--yt-ink2)}
.mt-tile .hot i{width:14px;height:14px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:9px;font-weight:900;color:#fff;background:#2ba640}
.mt-sp{position:relative;height:44px}
.mt-sp svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mt-sp .ar{fill:#065fd4;opacity:.08}
.mt-sp .ln{fill:none;stroke:#065fd4;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.mt-sp .dot{position:absolute;right:-4px;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#065fd4;box-shadow:0 0 0 2px #fff}
.mt-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:28px}
.mt-foot .md-checks{flex-direction:row;flex-wrap:wrap;gap:8px 22px}
.mt-foot .md-checks li{font-size:14.5px}
@media (max-width:1040px){.mt-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.mt-row{grid-template-columns:minmax(0,1fr)}}
@media (max-width:720px){.mt-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.yt-card{padding:14px 14px 16px}.mt-k b{font-size:26px}.mt-plot{height:130px;gap:1px}.mt-plot .c{gap:1px}.mt-tile .nb{flex-direction:column;align-items:flex-start;gap:0}}
@media (max-width:380px){.mt-tiles{grid-template-columns:minmax(0,1fr)}}

/* 사용 신청 (이메일) */
.wl{display:flex;gap:10px;max-width:560px;margin:26px auto 0;padding:6px;border-radius:34px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28)}
.wl input[type="email"]{flex:1 1 auto;min-width:0;height:54px;padding:0 20px;border:0;border-radius:28px;background:#fff;color:var(--ink);font:500 16px/1 var(--font);outline:none}
.wl input[type="email"]:focus{box-shadow:0 0 0 3px rgba(3,218,198,.55)}
.wl .md-btn{flex-shrink:0;height:54px}
.wl .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.wl-msg{min-height:0;margin:12px auto 0;max-width:560px;font-size:15px;font-weight:700;line-height:1.55}
.wl-msg:empty{display:none}
.wl-msg.ok{color:#B8F5EE}
.wl-msg.err{color:#FFD8E4}
.wl-fine{margin:12px 0 0;font-size:13px;color:rgba(255,255,255,.75)}
.wl-fine a,.wl-have a{color:#fff;font-weight:700}
.wl-have{margin:18px 0 0;font-size:14px;color:rgba(255,255,255,.85)}
.end .md-checks.light{justify-content:center;margin-top:22px}
@media (max-width:560px){.wl{flex-direction:column;border-radius:24px}.wl .md-btn{width:100%}}

/* v14: 폰에서 언어 버튼을 누르기 쉽게 (32px 이상) */
@media (max-width:640px){.md-lang button{min-height:32px;min-width:36px}}