/* CNOL — cnolplay.com
   Material Design 3 (CNOL 브랜드 색상으로 테마) + Amicro 전환 효과 */

:root {
  /* Material 3 color roles — source color CNOL blue #1F71F5 */
  --md-primary: #0058cb;
  --md-on-primary: #ffffff;
  --md-primary-container: #d9e2ff;
  --md-on-primary-container: #001945;
  --md-secondary: #575e71;
  --md-secondary-container: #dce2f9;
  --md-on-secondary-container: #141b2c;
  /* custom colors (CNOL AD magenta, CNOL gold) */
  --md-ad: #ba005c;
  --md-on-ad: #ffffff;
  --md-ad-container: #ffd9e1;
  --md-on-ad-container: #3f001b;
  --md-gold: #7f5700;
  --md-gold-container: #ffdead;
  --md-on-gold-container: #281900;
  --md-green-container: #c4f0d0;
  --md-on-green-container: #00210f;
  --md-error: #ba1a1a;
  --md-error-container: #ffdad6;

  --md-surface: #fefbff;
  --md-on-surface: #1b1b1f;
  --md-on-surface-variant: #44464f;
  --md-surface-container-lowest: #ffffff;
  --md-surface-container-low: #f5f3f7;
  --md-surface-container: #efedf1;
  --md-surface-container-high: #e9e7ec;
  --md-surface-container-highest: #e3e2e6;
  --md-surface-variant: #e1e2ec;
  --md-outline: #757780;
  --md-outline-variant: #c5c6d0;
  --md-inverse-surface: #303034;
  --md-inverse-on-surface: #f2f0f4;
  --md-inverse-primary: #b0c6ff;

  --brand-blue: #1f71f5;
  --brand-pink: #ec1e79;
  --brand-red: #ed1c24;
  --brand-yellow: #fbb116;

  /* elevation (M3) */
  --elev-1: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px 1px rgba(0, 0, 0, .15);
  --elev-2: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px 2px rgba(0, 0, 0, .15);
  --elev-3: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 8px 3px rgba(0, 0, 0, .15);
  --elev-4: 0 2px 3px rgba(0, 0, 0, .3), 0 6px 10px 4px rgba(0, 0, 0, .15);

  /* shape (M3) */
  --shape-xs: 4px;
  --shape-s: 8px;
  --shape-m: 12px;
  --shape-l: 16px;
  --shape-xl: 28px;
  --shape-full: 999px;

  /* motion (M3) */
  --ease-std: cubic-bezier(.2, 0, 0, 1);
  --ease-emph-decel: cubic-bezier(.05, .7, .1, 1);

  /* page accent (Music = primary, AD = magenta) */
  --accent: var(--md-primary);
  --on-accent: var(--md-on-primary);
  --accent-container: var(--md-primary-container);
  --on-accent-container: var(--md-on-primary-container);

  --max: 1200px;
  --bar: 64px;
}
.theme-ad {
  --accent: var(--md-ad);
  --on-accent: var(--md-on-ad);
  --accent-container: var(--md-ad-container);
  --on-accent-container: var(--md-on-ad-container);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + 16px); }
body {
  margin: 0;
  background: var(--md-surface);
  color: var(--md-on-surface);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: .01em;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 700; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.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; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); padding: 10px 16px; border-radius: var(--shape-s); }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--md-primary); outline-offset: 2px; }

/* Material Symbols */
.ms {
  font-family: "Material Symbols Rounded";
  font-weight: normal; font-style: normal; font-size: 24px; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap;
  word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  user-select: none; flex: none;
}
.ms.fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.ms.sm { font-size: 18px; }
.ms.lg { font-size: 32px; }

/* ---------- Type scale (M3, emphasized for Korean) ---------- */
.display-l { font-size: clamp(38px, 5.4vw, 57px); line-height: 1.18; font-weight: 700; letter-spacing: -.02em; }
.display-m { font-size: clamp(32px, 4.4vw, 45px); line-height: 1.22; font-weight: 700; letter-spacing: -.015em; }
.display-s { font-size: clamp(28px, 3.6vw, 36px); line-height: 1.28; font-weight: 700; letter-spacing: -.01em; }
.headline-m { font-size: clamp(24px, 2.6vw, 28px); line-height: 1.36; font-weight: 700; }
.headline-s { font-size: 24px; line-height: 1.34; font-weight: 700; }
.title-l { font-size: 22px; line-height: 1.36; font-weight: 500; }
.title-m { font-size: 16px; line-height: 1.5; font-weight: 500; letter-spacing: .01em; }
.body-l { font-size: 17px; line-height: 1.7; letter-spacing: .01em; }
.body-m { font-size: 15px; line-height: 1.65; letter-spacing: .015em; }
.label-l { font-size: 14px; line-height: 1.43; font-weight: 500; letter-spacing: .01em; }
.label-m { font-size: 12px; line-height: 1.34; font-weight: 500; letter-spacing: .04em; }
.overline { font-size: 13px; line-height: 1.4; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.on-variant { color: var(--md-on-surface-variant); }
.c-primary { color: var(--md-primary); }
.c-ad { color: var(--md-ad); }

@media (min-width: 761px) { .br-m { display: none; } }
@media (max-width: 760px) { .br-pc { display: none; } }

/* ---------- State layer + ripple ---------- */
.state { position: relative; overflow: hidden; isolation: isolate; -webkit-tap-highlight-color: transparent; }
.state::before {
  content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0;
  transition: opacity .2s var(--ease-std); pointer-events: none; z-index: -1; border-radius: inherit;
}
.state:hover::before { opacity: .08; }
.state:focus-visible::before { opacity: .1; }
.state:active::before { opacity: .1; }
.ripple-wave {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: -1;
  background: currentColor; opacity: .14; transform: scale(0);
  animation: ripple-in .45s var(--ease-std) forwards;
}
.ripple-wave.out { animation: ripple-in .45s var(--ease-std) forwards, ripple-out .3s linear .12s forwards; }
@keyframes ripple-in { to { transform: scale(1); } }
@keyframes ripple-out { to { opacity: 0; } }

/* ---------- Buttons (M3) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 24px; border-radius: var(--shape-full); border: 0;
  font-size: 14px; font-weight: 500; letter-spacing: .01em; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: box-shadow .2s var(--ease-std), background-color .2s var(--ease-std);
}
.btn .ms { font-size: 18px; margin-left: -8px; }
.btn .ms.trail { margin-left: 0; margin-right: -8px; }
.btn-lg { height: 56px; padding: 0 28px; font-size: 16px; border-radius: var(--shape-l); }
.btn-lg .ms { font-size: 22px; }
.btn-filled { background: var(--md-primary); color: var(--md-on-primary); }
.btn-filled:hover { box-shadow: var(--elev-1); }
.btn-filled.ad { background: var(--md-ad); color: var(--md-on-ad); }
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-accent:hover { box-shadow: var(--elev-1); }
.btn-tonal { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.btn-tonal:hover { box-shadow: var(--elev-1); }
.btn-tonal.ad { background: var(--md-ad-container); color: var(--md-on-ad-container); }
.btn-outlined { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--md-outline); }
.btn-text { background: transparent; color: var(--accent); padding: 0 12px; }
.btn-elevated { background: var(--md-surface-container-low); color: var(--accent); box-shadow: var(--elev-1); }
.btn-elevated:hover { box-shadow: var(--elev-2); }
.btn-on-accent { background: var(--md-surface-container-lowest); color: var(--accent); }
.btn-on-accent:hover { box-shadow: var(--elev-2); }

/* ---------- Top app bar (M3) ---------- */
.top-bar {
  position: sticky; top: 0; z-index: 60; height: var(--bar);
  background: var(--md-surface); transition: background-color .25s var(--ease-std), box-shadow .25s var(--ease-std);
}
.top-bar.scrolled { background: var(--md-surface-container); box-shadow: 0 1px 0 var(--md-outline-variant); }
.bar-in { height: 100%; display: flex; align-items: center; gap: 8px; }
.brand { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 8px 0 0; border-radius: var(--shape-full); }
.foot-brand .brand { height: auto; }
.drawer-head .brand, .drawer-head > .logo-mark { margin-left: 4px; }
.logo-mark { width: 32px; height: 32px; flex: none; }
.logo-text { font-family: inherit; font-weight: 700; font-size: 22px; letter-spacing: .04em; color: var(--md-on-surface); line-height: 1; }
.brand-sub { font-size: 13px; font-weight: 500; color: var(--md-on-surface-variant); }
.bar-nav { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.nav-pill { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--shape-full); background: var(--md-surface-container-low); border: 1px solid var(--md-outline-variant); }
.bar-nav a.nav-link { height: 34px; padding: 0 16px; border-radius: var(--shape-full); display: inline-flex; align-items: center; font-size: 15px; font-weight: 500; color: var(--md-on-surface-variant); transition: background-color .25s var(--ease-std), color .25s var(--ease-std), box-shadow .25s var(--ease-std); }
.bar-nav a.nav-link:hover { color: var(--md-on-surface); background: rgba(27, 27, 31, .04); }
.bar-nav a.nav-link[aria-current="page"] { background: var(--md-surface-container-lowest); color: var(--md-on-surface); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.icon-btn { width: 48px; height: 48px; border-radius: 50%; border: 0; background: transparent; display: none; place-items: center; cursor: pointer; color: var(--md-on-surface-variant); margin-left: auto; }
@media (max-width: 760px) {
  .brand-sub { display: none; }
  .bar-nav { display: none; }
  .icon-btn { display: grid; }
}

/* Navigation drawer (M3, modal) */
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .32); z-index: 80; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease-std); }
.drawer {
  position: fixed; top: 0; bottom: 0; right: 0; width: min(320px, 86vw); z-index: 90;
  background: var(--md-surface-container-low); border-radius: var(--shape-l) 0 0 var(--shape-l);
  padding: 12px; transform: translateX(105%); transition: transform .35s var(--ease-emph-decel);
  display: flex; flex-direction: column; gap: 4px;
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 16px 16px; }
.drawer a.drawer-item { height: 56px; border-radius: var(--shape-full); display: flex; align-items: center; gap: 12px; padding: 0 24px 0 16px; font-size: 15px; font-weight: 500; color: var(--md-on-surface-variant); }
.drawer a.drawer-item[aria-current="page"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.drawer-open .scrim { opacity: 1; pointer-events: auto; }
.drawer-open .drawer { transform: none; }

/* Extended FAB (M3) */
.fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 70;
  height: 56px; min-width: 56px; padding: 0 20px 0 16px; border-radius: var(--shape-l); border: 0;
  display: inline-flex; align-items: center; gap: 12px; overflow: hidden;
  background: var(--accent-container); color: var(--on-accent-container); box-shadow: var(--elev-3);
  font-size: 15px; font-weight: 500; cursor: pointer;
  transition: box-shadow .2s var(--ease-std), padding .3s var(--ease-std), gap .3s var(--ease-std);
}
.fab:hover { box-shadow: var(--elev-4); }
.fab .fab-label { max-width: 160px; transition: max-width .3s var(--ease-std), opacity .2s var(--ease-std); overflow: hidden; white-space: nowrap; }
.fab.shrink { padding: 0 16px; gap: 0; }
.fab.shrink .fab-label { max-width: 0; opacity: 0; }
@media (max-width: 760px) { .fab { right: 16px; bottom: 16px; } }

/* ---------- Sections ---------- */
.section { padding: 104px 0; }
.section.tint { background: var(--md-surface-container-low); }
.section.tint-2 { background: var(--md-surface-container); }
.section-head { max-width: 760px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .overline { display: block; margin-bottom: 12px; }
.section-head .lead { margin-top: 16px; }
.display-s + .body-l { margin-top: 16px; }
@media (max-width: 760px) { .section { padding: 72px 0; } .section-head { margin-bottom: 32px; } }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 16px; } }
@media (max-width: 480px) { .grid-4 { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center; }
.split.top { align-items: start; }
@media (max-width: 1000px) { .split { grid-template-columns: 1fr; gap: 40px; } }
.prose p { color: var(--md-on-surface-variant); font-size: 17px; line-height: 1.85; }
.prose p + p { margin-top: 16px; }
.prose a { font-weight: 700; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 72px 0 88px; }
.hero .lead { margin-top: 24px; max-width: 600px; color: var(--md-on-surface-variant); }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero .chips { margin-bottom: 24px; }
.hero-art { position: relative; min-height: 420px; display: grid; place-items: center; }
.shape { position: absolute; z-index: -1; }
.shape-cookie { width: 520px; height: 520px; right: -60px; top: 50%; transform: translateY(-50%); color: var(--accent-container); }
.shape-dot { width: 120px; height: 120px; border-radius: 50%; background: var(--md-ad-container); left: 4%; bottom: 6%; }
.theme-ad .shape-dot { background: var(--md-primary-container); }
.shape-pill { width: 160px; height: 64px; border-radius: var(--shape-full); background: var(--md-gold-container); right: 6%; top: 4%; }
@media (max-width: 1000px) {
  .hero { padding: 48px 0 64px; }
  .hero-art { min-height: 360px; }
  .shape-cookie { width: 420px; height: 420px; right: 50%; transform: translate(50%, -50%); }
}
@media (max-width: 760px) {
  .hero .actions .btn { flex: 1 1 100%; }
  .hero-art { min-height: 320px; }
  .shape-cookie { width: 340px; height: 340px; }
}

/* ---------- Chips (M3) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 16px; border-radius: var(--shape-s);
  border: 1px solid var(--md-outline-variant); background: var(--md-surface-container-lowest);
  font-size: 14px; font-weight: 500; color: var(--md-on-surface-variant); white-space: nowrap;
}
.chip .ms { font-size: 18px; margin-left: -6px; color: var(--accent); }
.chip.tonal { border-color: transparent; background: var(--accent-container); color: var(--on-accent-container); }
.chip.tonal .ms { color: inherit; }

/* ---------- Cards (M3) ---------- */
.card {
  background: var(--md-surface-container-low); border-radius: var(--shape-m); padding: 28px 24px;
  box-shadow: var(--elev-1); height: 100%; color: var(--md-on-surface);
  transition: box-shadow .25s var(--ease-std);
}
.card.filled { background: var(--md-surface-container-highest); box-shadow: none; }
.card.outlined { background: var(--md-surface); box-shadow: none; border: 1px solid var(--md-outline-variant); }
.card.lowest { background: var(--md-surface-container-lowest); }
a.card:hover, .card.hoverable:hover { box-shadow: var(--elev-2); }
.card h3 { font-size: 20px; line-height: 1.4; font-weight: 700; margin: 16px 0 8px; }
.card p { font-size: 15px; line-height: 1.7; color: var(--md-on-surface-variant); }
.icon-box { width: 48px; height: 48px; border-radius: var(--shape-m); display: grid; place-items: center; background: var(--accent-container); color: var(--on-accent-container); }
.icon-box.primary { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.icon-box.ad { background: var(--md-ad-container); color: var(--md-on-ad-container); }
.icon-box.gold { background: var(--md-gold-container); color: var(--md-on-gold-container); }
.icon-box.green { background: var(--md-green-container); color: var(--md-on-green-container); }
.icon-box.error { background: var(--md-error-container); color: #410002; }
.icon-box.neutral { background: var(--md-surface-container-highest); color: var(--md-on-surface-variant); }

/* service cards (home) */
.svc { display: flex; flex-direction: column; padding: 0; overflow: hidden; border-radius: var(--shape-xl); }
.svc-media { position: relative; padding: 32px 32px 0; background: var(--accent-container); min-height: 248px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.svc-media .mock { width: 100%; max-width: 420px; border-radius: var(--shape-l) var(--shape-l) 0 0; box-shadow: var(--elev-2); }
.svc-body { padding: 28px 32px 24px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.svc-body .actions { margin-top: auto; display: flex; gap: 8px; padding-top: 8px; }
@media (max-width: 760px) { .svc-media { padding: 24px 20px 0; min-height: 210px; } .svc-body { padding: 24px 20px 20px; } }

/* ---------- Mock UI (M3 lists) ---------- */
.mock { background: var(--md-surface-container-lowest); border-radius: var(--shape-l); padding: 8px 0; box-shadow: var(--elev-3); width: 100%; max-width: 440px; }
.mock-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px 8px; }
.mock-head .title-m { font-size: 15px; }
.badge-live { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--shape-full); background: var(--md-green-container); color: #0b5c2b; font-size: 12px; font-weight: 500; }
.badge-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #12a150; }
.li { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 16px; min-height: 64px; padding: 8px 20px; }
.li + .li { border-top: 1px solid var(--md-surface-container-high); }
.li .avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-container); color: var(--on-accent-container); }
.li .avatar.ad { background: var(--md-ad-container); color: var(--md-on-ad-container); }
.li .avatar.green { background: var(--md-green-container); color: var(--md-on-green-container); }
.li .avatar.error { background: var(--md-error-container); color: #410002; }
.li .avatar.primary { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.li .headline { font-size: 15px; font-weight: 500; line-height: 1.4; }
.li .support { font-size: 13px; color: var(--md-on-surface-variant); line-height: 1.4; margin-top: 2px; }
.tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--shape-s); font-size: 12px; font-weight: 500; white-space: nowrap; }
.tag.ok { background: var(--md-green-container); color: #0b5c2b; }
.tag.new { background: var(--md-gold-container); color: var(--md-on-gold-container); }
.tag.accent { background: var(--accent-container); color: var(--on-accent-container); }
.tag.primary { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.tag.ad { background: var(--md-ad-container); color: var(--md-on-ad-container); }
.tag.neutral { background: var(--md-surface-container-high); color: var(--md-on-surface-variant); }

.lin { margin: 4px 20px 0; height: 4px; border-radius: var(--shape-full); background: var(--md-surface-container-highest); overflow: hidden; }
.lin span { display: block; height: 100%; border-radius: inherit; background: var(--md-ad); }
.stepper { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 16px 20px 12px; }
.stepper li { text-align: center; font-size: 12px; font-weight: 500; color: var(--md-on-surface-variant); }
.stepper li i { display: grid; place-items: center; width: 28px; height: 28px; margin: 0 auto 6px; border-radius: 50%; font-style: normal; font-size: 12px; background: var(--md-surface-container-highest); color: var(--md-on-surface-variant); }
.stepper li.done i { background: var(--md-ad); color: #fff; }
.stepper li.now i { background: var(--md-ad-container); color: var(--md-on-ad-container); box-shadow: inset 0 0 0 2px var(--md-ad); }
.stepper li.done, .stepper li.now { color: var(--md-on-surface); }
.mock-note { padding: 10px 20px 4px; font-size: 14px; font-weight: 500; }
.mock-note small { display: block; font-size: 12px; font-weight: 400; color: var(--md-on-surface-variant); margin-top: 2px; }

/* layered hero mocks */
.mock-stack { position: relative; width: 100%; max-width: 460px; }
.mock-stack .mock.second { position: absolute; right: -24px; bottom: -48px; width: 72%; max-width: 320px; box-shadow: var(--elev-4); }
@media (max-width: 760px) { .mock-stack .mock.second { right: -8px; bottom: -40px; width: 78%; } }

/* ---------- Facts ---------- */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fact { background: var(--md-surface-container-lowest); border-radius: var(--shape-l); padding: 24px; box-shadow: var(--elev-1); }
.fact b { display: block; font-size: clamp(28px, 3.4vw, 36px); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--accent); }
.fact > span:not(.ms) { display: block; margin-top: 8px; font-size: 15px; color: var(--md-on-surface-variant); line-height: 1.55; }
.fact .ms { color: var(--accent); margin-bottom: 12px; }
@media (max-width: 760px) { .facts { grid-template-columns: 1fr; } }

/* ---------- Steps (vertical stepper) ---------- */
.steps { display: grid; counter-reset: step; }
.step { display: grid; grid-template-columns: 40px 1fr; gap: 20px; position: relative; padding-bottom: 28px; }
.step:last-child { padding-bottom: 0; }
.step::before {
  counter-increment: step; content: counter(step); width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 15px; background: var(--accent); color: var(--on-accent); z-index: 1;
}
.step::after { content: ""; position: absolute; left: 19px; top: 44px; bottom: 4px; width: 2px; background: var(--md-outline-variant); }
.step:last-child::after { display: none; }
.step h3 { font-size: 18px; font-weight: 700; line-height: 1.4; padding-top: 8px; }
.step p { font-size: 15px; color: var(--md-on-surface-variant); margin-top: 4px; }

.step-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: sc; }
.step-cards li { background: var(--md-surface-container-lowest); border-radius: var(--shape-l); padding: 22px 20px; box-shadow: var(--elev-1); }
.step-cards li::before { counter-increment: sc; content: counter(sc, decimal-leading-zero); display: inline-grid; place-items: center; min-width: 36px; height: 28px; padding: 0 8px; border-radius: var(--shape-s); background: var(--accent-container); color: var(--on-accent-container); font-size: 13px; font-weight: 700; margin-bottom: 14px; }
.step-cards h3 { font-size: 17px; font-weight: 700; line-height: 1.4; }
.step-cards p { font-size: 14px; color: var(--md-on-surface-variant); margin-top: 6px; line-height: 1.6; }
.step-cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) { .step-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .step-cards, .step-cards.two { grid-template-columns: 1fr; } }

/* flow (home synergy) */
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.flow li { background: var(--md-surface-container-lowest); border-radius: var(--shape-l); padding: 24px 22px; box-shadow: var(--elev-1); position: relative; }
.flow li .icon-box { margin-bottom: 16px; }
.flow li h3 { font-size: 17px; font-weight: 700; line-height: 1.4; }
.flow li p { font-size: 14px; color: var(--md-on-surface-variant); margin-top: 6px; line-height: 1.6; }
.flow li:not(:last-child)::after { content: "chevron_right"; font-family: "Material Symbols Rounded"; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); font-size: 24px; color: var(--md-outline); z-index: 1; }
@media (max-width: 1000px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flow li::after { display: none; } }
@media (max-width: 480px) { .flow { grid-template-columns: 1fr; } }

/* campaign cards (AD) */
.camp { display: flex; flex-direction: column; gap: 16px; padding: 28px 26px; border-radius: var(--shape-l); }
.camp .top { display: flex; align-items: center; gap: 10px; }
.camp h3 { margin: 0; font-size: 22px; }
.checks { display: grid; gap: 10px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: var(--md-on-surface); }
.checks li .ms { font-size: 20px; color: var(--accent); margin-top: 1px; }
.camp dl { margin: 0; display: grid; gap: 14px; padding-top: 16px; border-top: 1px solid var(--md-outline-variant); }
.camp dt { font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--md-on-surface-variant); margin-bottom: 4px; }
.camp dd { margin: 0; font-size: 15px; line-height: 1.65; }

/* ---------- Compare (data table in outlined card) ---------- */
.table-card { border: 1px solid var(--md-outline-variant); border-radius: var(--shape-m); overflow: hidden; background: var(--md-surface); }
.compare { width: 100%; border-collapse: collapse; }
.compare th, .compare td { padding: 18px 24px; text-align: left; vertical-align: top; font-size: 15px; line-height: 1.65; border-bottom: 1px solid var(--md-outline-variant); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare thead th { font-size: 14px; font-weight: 500; background: var(--md-surface-container); }
.compare thead th.music { color: var(--md-primary); }
.compare thead th.ad { color: var(--md-ad); }
.compare tbody th { width: 18%; font-size: 14px; font-weight: 500; color: var(--md-on-surface-variant); white-space: nowrap; }
.compare td { width: 41%; }
.compare tbody tr { transition: background-color .2s var(--ease-std); }
.compare tbody tr:hover { background: var(--md-surface-container-low); }
@media (max-width: 760px) {
  .compare, .compare thead, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100% !important; }
  .compare thead { display: none; }
  .compare tr { padding: 16px 20px; border-bottom: 1px solid var(--md-outline-variant); }
  .compare tr:last-child { border-bottom: 0; }
  .compare th, .compare td { padding: 0; border: 0; white-space: normal; }
  .compare tbody th { margin-bottom: 8px; }
  .compare td { padding-left: 72px; position: relative; font-size: 15px; }
  .compare td + td { margin-top: 8px; }
  .compare td::before { content: attr(data-label); position: absolute; left: 0; top: 1px; font-size: 12px; font-weight: 700; }
  .compare td.music::before { color: var(--md-primary); }
  .compare td.ad::before { color: var(--md-ad); }
}

/* ---------- Teams ---------- */
.teams { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.team { border-radius: var(--shape-l); padding: 24px; background: var(--md-surface-container-low); display: flex; gap: 16px; align-items: flex-start; }
.team b { display: block; font-size: 17px; font-weight: 700; }
.team b + span { display: block; font-size: 14px; color: var(--md-on-surface-variant); margin-top: 4px; }
@media (max-width: 760px) { .teams { grid-template-columns: 1fr; } }

/* ---------- FAQ (expansion panels) ---------- */
.faq { display: grid; gap: 12px; max-width: 880px; margin: 0 auto; }
.faq details { background: var(--md-surface-container-lowest); border-radius: var(--shape-m); box-shadow: var(--elev-1); overflow: hidden; transition: box-shadow .25s var(--ease-std); }
.faq details[open] { box-shadow: var(--elev-2); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 16px 20px 16px 24px; font-size: 16px; font-weight: 500; line-height: 1.5; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .q { color: var(--accent); font-weight: 700; }
.faq summary .ms.exp { margin-left: auto; color: var(--md-on-surface-variant); transition: transform .25s var(--ease-std); }
.faq details[open] summary .ms.exp { transform: rotate(180deg); }
.faq .answer { padding: 0 24px 22px 52px; color: var(--md-on-surface-variant); font-size: 15px; line-height: 1.8; }

/* ---------- CTA banner ---------- */
.banner { border-radius: var(--shape-xl); padding: 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--accent); color: var(--on-accent); position: relative; overflow: hidden; isolation: isolate; }
.banner::after { content: ""; position: absolute; width: 360px; height: 360px; border-radius: 42% 58% 61% 39% / 45% 41% 59% 55%; background: rgba(255, 255, 255, .12); right: -80px; top: -120px; z-index: -1; }
.banner h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; line-height: 1.35; }
.banner p { margin-top: 8px; opacity: .88; font-size: 16px; }
@media (max-width: 760px) { .banner { padding: 32px 24px; } .banner .btn { width: 100%; } }

/* ---------- Contact / form (M3 text fields) ---------- */
.contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
@media (max-width: 1000px) { .contact { grid-template-columns: 1fr; gap: 32px; } }
.contact-card { margin-top: 28px; background: var(--md-surface-container-lowest); border-radius: var(--shape-l); box-shadow: var(--elev-1); padding: 8px 0; }
.contact-card .li { grid-template-columns: 40px 1fr; }
.contact-card a { font-weight: 500; color: var(--md-on-surface); word-break: break-all; }
.contact-card a:hover { text-decoration: underline; }
.contact-card address { font-style: normal; }

.form { background: var(--md-surface-container-lowest); border-radius: var(--shape-xl); padding: 32px; box-shadow: var(--elev-2); }
@media (max-width: 760px) { .form { padding: 24px 18px; border-radius: var(--shape-l); } }
.form-label { font-size: 14px; font-weight: 500; color: var(--md-on-surface-variant); margin-bottom: 10px; display: block; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.filter-chips input { position: absolute; opacity: 0; pointer-events: none; }
.filter-chips label {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: var(--shape-s);
  border: 1px solid var(--md-outline); font-size: 14px; font-weight: 500; color: var(--md-on-surface-variant); cursor: pointer;
  transition: background-color .2s var(--ease-std), border-color .2s var(--ease-std), padding .2s var(--ease-std);
}
.filter-chips label .ms { font-size: 18px; width: 0; overflow: hidden; margin-left: -8px; transition: width .2s var(--ease-std), margin .2s var(--ease-std); }
.filter-chips input:checked + label { background: var(--md-secondary-container); border-color: var(--md-secondary-container); color: var(--md-on-secondary-container); padding-left: 10px; }
.filter-chips input:checked + label .ms { width: 18px; margin-left: 0; }
.filter-chips input:focus-visible + label { outline: 3px solid var(--md-primary); outline-offset: 2px; }

.tf { position: relative; margin-bottom: 20px; }
.tf input, .tf textarea {
  width: 100%; height: 56px; padding: 16px; border-radius: var(--shape-xs); border: 1px solid var(--md-outline);
  background: transparent; font-size: 16px; color: var(--md-on-surface); outline: none; transition: border-color .15s var(--ease-std), box-shadow .15s var(--ease-std);
}
.tf textarea { height: 148px; resize: vertical; line-height: 1.6; padding-top: 18px; }
.tf input:hover, .tf textarea:hover { border-color: var(--md-on-surface); }
.tf input:focus, .tf textarea:focus { border-color: var(--md-primary); box-shadow: inset 0 0 0 1px var(--md-primary); }
.tf label {
  position: absolute; left: 12px; top: 16px; padding: 0 4px; background: var(--md-surface-container-lowest);
  font-size: 16px; color: var(--md-on-surface-variant); pointer-events: none; transform-origin: 0 50%;
  transition: transform .15s var(--ease-std), top .15s var(--ease-std), color .15s var(--ease-std);
}
.tf input:focus + label, .tf input:not(:placeholder-shown) + label,
.tf textarea:focus + label, .tf textarea:not(:placeholder-shown) + label { top: -10px; transform: scale(.75); }
.tf input:focus + label, .tf textarea:focus + label { color: var(--md-primary); }
.tf .req { color: var(--md-error); }
.tf .helper { display: block; font-size: 12px; color: var(--md-on-surface-variant); padding: 4px 16px 0; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .row-2 { grid-template-columns: 1fr; gap: 0; } }
.agree { display: flex; align-items: center; gap: 12px; font-size: 15px; margin: 4px 0 8px; cursor: pointer; }
.agree input { width: 18px; height: 18px; margin: 0; accent-color: var(--md-primary); flex: none; }
.privacy { font-size: 13px; color: var(--md-on-surface-variant); background: var(--md-surface-container-low); border-radius: var(--shape-m); padding: 0 16px; margin-bottom: 20px; }
.privacy summary { cursor: pointer; padding: 12px 0; font-weight: 500; }
.privacy ul { padding: 0 0 14px; display: grid; gap: 4px; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form .btn { width: 100%; }
.form-status { margin-top: 14px; font-size: 14px; font-weight: 500; line-height: 1.6; min-height: 1px; }
.form-status.err { color: var(--md-error); }
.form-done { text-align: center; padding: 32px 8px; }
.form-done .icon-box { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px; }
.form-done h3 { font-size: 22px; font-weight: 700; }
.form-done p { color: var(--md-on-surface-variant); margin-top: 8px; font-size: 15px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--md-surface-container); padding: 56px 0 96px; font-size: 14px; color: var(--md-on-surface-variant); }
.foot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; padding-bottom: 24px; border-bottom: 1px solid var(--md-outline-variant); }
.foot-brand p { margin-top: 8px; font-size: 15px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px; }
.foot-links a { height: 40px; padding: 0 12px; border-radius: var(--shape-full); display: inline-flex; align-items: center; font-weight: 500; color: var(--md-on-surface); }
.foot-info { display: grid; gap: 14px; padding-top: 24px; line-height: 1.75; }
.foot-info b { color: var(--md-on-surface); font-weight: 700; }
.foot-info .sep { display: inline-block; width: 1px; height: 11px; background: var(--md-outline-variant); margin: 0 10px; vertical-align: -1px; }
.copyright { margin-top: 20px; color: var(--md-outline); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ripple-wave { display: none; }
}

/* ---------- HR Motion Kit 테마 (motion.css 변수만 CNOL 색으로) ---------- */
:root {
  --mk-accent: #1f71f5;
  --mk-accent2: #ec1e79;
  --mk-ink: #1b1b1f;
  --mk-card: linear-gradient(160deg, #6f9dff, #0058cb);
  --mk-shadow: 0 30px 50px -24px rgba(0, 25, 69, .55);
}
.theme-ad { --mk-card: linear-gradient(160deg, #ff77ab, #ba005c); --mk-shadow: 0 30px 50px -24px rgba(63, 0, 27, .5); }
/* 밝은 머티리얼 표면에서도 보이도록 커서 빛 색만 조정 */
.spot::before { background: radial-gradient(380px circle at var(--mx) var(--my), rgba(31, 113, 245, .13), transparent 60%); }
.theme-ad .spot::before { background: radial-gradient(380px circle at var(--mx) var(--my), rgba(236, 30, 121, .11), transparent 60%); }
.svc-media, .svc-body { position: relative; z-index: 1; }
/* 스크롤하면 서서히 떠오르던 등장 연출은 끔 — 내용은 처음부터 제자리에 */
html.rv-js [data-rv], html.rv-js [data-rv]:not(.is-in) { opacity: 1; transform: none; filter: none; transition: box-shadow .25s var(--ease-std), background-color .25s var(--ease-std); transition-delay: 0s; }
html.rv-js [data-split]:not(.is-in) .tw > span, .tw > span { transform: none; opacity: 1; transition: none; }

/* 히어로 부채꼴 카드 — 키트 모션 그대로, 카드마다 안에 '움직이는 플랫폼' 미니 화면 */
@media (min-width: 1001px) { .hero-home .split { grid-template-columns: minmax(0, 500px) minmax(0, 1fr); gap: 40px; } }
.hero-art { container-type: inline-size; }
.hero-art .fan { --w: clamp(116px, 34cqi, 200px); --g: clamp(32px, 10cqi, 84px); width: 100%; height: calc(var(--w) * 1.375 + 64px); }
@media (hover: hover) { .hero-art .fan.is-in:hover { --g: clamp(36px, 11.5cqi, 92px); } }
@media (min-width: 1001px) { .hero-art .fan { --w: clamp(132px, 30cqi, 184px); --g: clamp(50px, 13.4cqi, 84px); left: 3.5cqi; } }
@media (min-width: 1001px) and (max-width: 1279px) { .hero-art .fan { left: 0; } }
@media (min-width: 1001px) and (hover: hover) { .hero-art .fan.is-in:hover { --g: clamp(56px, 14.6cqi, 92px); } }
.hero-art .fan-card { width: var(--w); padding: calc(var(--w) * .065); gap: calc(var(--w) * .04); border-radius: calc(var(--w) * .11); container-type: inline-size; justify-content: flex-start; }
.fan-card:nth-child(3) { border-color: var(--md-outline-variant); }
.fan-card.mirror { align-items: flex-end; text-align: right; }
@media (max-width: 960px), (hover: none) { .fan-card { box-shadow: var(--elev-2) !important; } }
.fan-card .scr { font-size: 4.55cqi; flex: 1 1 auto; min-height: 0; }
.fan-card:nth-child(3) .scr { box-shadow: 0 0 0 1px #e6e8ee; }
.fan-card .fc-t { margin-top: auto; }
.fan-card .fc-t small { display: block; font-size: 5.6cqi; font-weight: 700; letter-spacing: .1em; opacity: .75; }
.fan-card .fc-t b { display: block; margin-top: 1.2cqi; font-size: 8.2cqi; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
.fan-card:nth-child(3) .fc-t small { color: var(--md-primary); opacity: 1; }

/* 서비스 카드 넘기기 (3D 커버플로) */
.cf-section { background: linear-gradient(125deg, #003a8c, #0058cb 45%, #1f71f5); color: #fff; overflow: hidden; }
.cf-section .overline { color: #b0c6ff; }
.cf-section .lead { color: rgba(255, 255, 255, .85); margin-left: auto; margin-right: auto; }
.cf-section { --mk-card: linear-gradient(160deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .1)); --mk-shadow: 0 30px 50px -24px rgba(0, 12, 40, .7); }
.cf-card { container-type: inline-size; gap: 10px; padding: clamp(18px, 7cqi, 24px); }
.cf-section .cflow { height: clamp(440px, 46vw, 500px); }
.cf-card .scr { font-size: 3.3cqi; height: 18em; flex: none; margin-bottom: 4px; }
.cf-card.is-on .scr { box-shadow: 0 0 0 1px #e6e8ee, 0 .5em 1.4em -.6em rgba(0, 25, 69, .35); }
.cf-card > small { font-size: 12px; font-weight: 700; letter-spacing: .12em; opacity: .8; }
.cf-card > h3 { margin: 0; font-size: clamp(19px, 7cqi, 22px); line-height: 1.3; font-weight: 700; }
.cf-card > p { font-size: 14px; line-height: 1.55; opacity: .9; }
.cf-card .cf-more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; }
.cf-card.is-on > small, .cf-card.is-on .cf-more { color: var(--md-primary); opacity: 1; }
.cf-card.ad.is-on > small, .cf-card.ad.is-on .cf-more { color: var(--md-ad); }
.cf-btn .ms { font-size: 24px; }

/* 진행선 (.tl) — 단계 번호 가운데를 따라 */
.tl { position: relative; }
.tl .tl-prog { left: 19px; top: 20px; bottom: 20px; width: 2px; background: var(--md-outline-variant); }
.tl .tl-prog::after { background: linear-gradient(var(--md-primary), var(--brand-blue)); }
.tl .step::after { display: none; }

/* @screens:start */
/* ================= 카드 안 '움직이는 플랫폼' 미니 화면 ================= */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.scr { position: relative; display: flex; flex-direction: column; width: 100%; overflow: hidden; border-radius: .95em; background: #fff; color: #1b1b1f; text-align: left; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; box-shadow: 0 .5em 1.4em -.5em rgba(0, 25, 69, .5); }
.scr b, .scr small, .scr em, .scr i, .scr u { font-style: normal; text-decoration: none; }
.scr .ms { font-size: 1.25em; line-height: 1; }
.scr-top { flex: none; display: flex; align-items: center; gap: .45em; height: 2.5em; padding: 0 .85em; border-bottom: 1px solid #eceef3; white-space: nowrap; }
.scr-top .lg { flex: none; width: 1.25em; height: 1.25em; }
.scr-top b { font-size: 1em; font-weight: 800; }
.scr-top b em { color: #1f71f5; }
.scr-top .sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: .88em; font-weight: 600; color: #757780; }
.scr-top .r { margin-left: auto; display: flex; align-items: center; gap: .45em; color: #757780; }
.scr-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .5em; padding: .65em .75em .75em; }
.tag-s { flex: none; display: inline-flex; align-items: center; gap: .2em; padding: .25em .6em; border-radius: 99px; font-size: .72em; font-weight: 700; white-space: nowrap; background: #d8f5e3; color: #0b6b34; }
.tag-s.new { background: #ffe3b3; color: #6b4100; }
.tag-s.blue { background: #dfe7ff; color: #0040a0; }
.tag-s.gray { background: #eef0f4; color: #5d5f68; }
.tag-s .ms { font-size: 1.1em; }
.scr .bar { display: block; height: .32em; border-radius: 99px; background: #e8eaf0; overflow: hidden; }
.scr .bar > i, .scr .bar > u { display: block; height: 100%; border-radius: inherit; background: #0058cb; transform-origin: 0 50%; }
.chips-s { display: flex; gap: .3em; }
.chips-s i { padding: .3em .7em; border-radius: 99px; font-size: .74em; font-weight: 700; background: #f1f2f6; color: #5d5f68; }
.chips-s i.on { background: #1b1b1f; color: #fff; }
.tabs-s { display: flex; gap: .9em; border-bottom: 1px solid #eceef3; }
.tabs-s i { padding-bottom: .45em; font-size: .74em; font-weight: 700; color: #8a8d97; }
.tabs-s i.on { color: #1b1b1f; box-shadow: inset 0 -.2em 0 #1f71f5; }

/* 음원 목록 — 재생 중인 곡이 차례로 바뀜 */
.trk { --dl: 0s; position: relative; display: grid; grid-template-columns: 1.9em minmax(0, 1fr) auto; align-items: center; gap: .55em; padding: .42em .5em; border-radius: .65em; animation: trk-bg 6s var(--dl) infinite; }
.trk.t2 { --dl: -4s; }
.trk.t3 { --dl: -2s; }
.trk .pb { position: relative; width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; background: #e3e9fb; }
.trk .tri { width: 0; height: 0; margin-left: .15em; border-left: .55em solid #0058cb; border-top: .36em solid transparent; border-bottom: .36em solid transparent; animation: trk-off 6s var(--dl) infinite; }
.trk .eqm { position: absolute; inset: 0; opacity: 0; animation: trk-on 6s var(--dl) infinite; }
.trk .tt { min-width: 0; }
.trk .tt b, .up .tt b, .lv-row .tt b, .mplay .tt b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92em; font-weight: 700; }
.trk .tt small, .lv-row .tt small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .74em; color: #8a8d97; }
.trk .pg { position: absolute; left: .6em; right: .6em; bottom: .16em; height: .16em; overflow: hidden; border-radius: 99px; }
.trk .pg i { display: block; height: 100%; background: #0058cb; transform-origin: 0 50%; transform: scaleX(0); animation: trk-pg 6s var(--dl) linear infinite; }
.eqm { display: flex; align-items: center; justify-content: center; gap: .14em; }
.eqm i { width: .2em; height: .85em; border-radius: .1em; background: #0058cb; transform-origin: 50% 100%; animation: eqm .9s ease-in-out infinite; }
.eqm i:nth-child(2) { animation-delay: -.3s; }
.eqm i:nth-child(3) { animation-delay: -.55s; }
.eqm i:nth-child(4) { animation-delay: -.15s; }
@keyframes trk-bg { 0%, 31% { background: #eef3ff; } 34%, 100% { background: transparent; } }
@keyframes trk-on { 0%, 31% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes trk-off { 0%, 31% { opacity: 0; } 34%, 100% { opacity: 1; } }
@keyframes trk-pg { 0% { transform: scaleX(0); opacity: 1; } 31% { transform: scaleX(1); opacity: 1; } 34%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes eqm { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.mplay { margin-top: auto; display: grid; grid-template-columns: 2em minmax(0, 1fr) auto; align-items: center; gap: .55em; padding: .5em .6em; border-radius: .7em; background: #1b1b1f; color: #fff; }
.mplay .pa { width: 2em; height: 2em; border-radius: .5em; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #ec1e79, #1f71f5); }
.mplay .bar { margin-top: .35em; background: rgba(255, 255, 255, .2); }
.mplay .bar > i { background: #fff; }
.mplay .eqm { width: 2.2em; height: 1.2em; }
.mplay .eqm i { background: #8fb1ff; }
.scr .bar > i.loop { animation: loop-bar 5s linear infinite; }
@keyframes loop-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 음원 제출 → 심사 → 계약 (단계가 차례로 완료) */
.up { display: grid; grid-template-columns: 2.1em minmax(0, 1fr); align-items: center; gap: .55em; padding: .5em .6em; border-radius: .7em; background: #f4f6fb; }
.up .fi { width: 2.1em; height: 2.1em; border-radius: .55em; display: grid; place-items: center; background: #dfe7ff; color: #0058cb; }
.up .bar { margin-top: .35em; }
.up .bar > i.upl { transform: scaleX(.55); animation: upl 9s infinite; }
@keyframes upl { 0% { transform: scaleX(.05); } 20%, 96% { transform: scaleX(1); } 100% { transform: scaleX(.05); } }
.sl { display: grid; gap: .25em; }
.sl-row { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto; align-items: center; gap: .55em; padding: .3em .5em; border-radius: .6em; }
.sl-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86em; font-weight: 700; }
.sl-row .st { display: grid; font-size: .7em; font-weight: 700; }
.sl-row .st em { grid-area: 1 / 1; text-align: right; opacity: 0; }
.sl-row .st .w { color: #9a9ca5; opacity: 1; }
.sl-row .st .p { color: #0058cb; }
.sl-row .st .d { color: #17a058; }
.scr .dot { position: relative; width: 1.6em; height: 1.6em; border-radius: 50%; display: grid; place-items: center; background: #eceef3; color: #8a8d97; }
.scr .dot .n { font-size: .72em; font-weight: 800; }
.scr .dot .ck { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.05em; opacity: 0; }
.sl-row.s1 { background: #eef3ff; }
.sl-row.s1 .dot { background: #0058cb; color: #fff; }
.sl-row.s1 .st .w { opacity: 0; }
.sl-row.s1 .st .p { opacity: 1; }

/* 크놀AD 캠페인 진행 (6단계가 차례로 진행) */
.cmp-h { display: grid; }
.cmp-h small { font-size: .7em; font-weight: 600; color: #8a8d97; }
.cmp-h .ht { display: grid; }
.cmp-h .ht b { grid-area: 1 / 1; font-size: .98em; font-weight: 800; opacity: 0; }
.cmp-h .ht b.nt1 { opacity: 1; }
.stp { display: grid; grid-template-columns: repeat(6, 1fr); gap: .2em; margin-top: .15em; }
.sp { display: grid; justify-items: center; gap: .25em; }
.sp .dot { width: 1.7em; height: 1.7em; }
.sp small { font-size: .66em; font-weight: 600; color: #8a8d97; white-space: nowrap; }
.sp.done .dot { background: #17a058; color: #fff; }
.sp.done .dot .n { opacity: 0; }
.sp.done .dot .ck { opacity: 1; }
.sp.done small { color: #1b1b1f; font-weight: 700; }
.sp.k3 .dot { background: #0058cb; color: #fff; box-shadow: 0 0 0 .28em rgba(0, 88, 203, .16); }
.sp.k3 small { color: #0058cb; font-weight: 800; }
.stp-bar { display: block; height: .32em; border-radius: 99px; background: #e8eaf0; overflow: hidden; }
.stp-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1f71f5, #0058cb); transform-origin: 0 50%; transform: scaleX(.43); animation: stp-bar 10s linear infinite; }
@keyframes stp-bar { 0% { transform: scaleX(.43); } 22% { transform: scaleX(.58); } 44% { transform: scaleX(.72); } 66% { transform: scaleX(.86); } 88%, 96% { transform: scaleX(1); } 100% { transform: scaleX(.43); } }
.note { display: grid; justify-items: center; gap: .2em; padding: .65em .6em; border-radius: .7em; border: 1px solid #cfdcff; background: #f5f8ff; text-align: center; }
.note em { grid-row: 1; grid-column: 1; font-size: .8em; font-weight: 800; color: #1b1b1f; white-space: nowrap; opacity: 0; }
.note em.nt1 { opacity: 1; }
.note small { grid-row: 2; font-size: .66em; color: #8a8d97; }

/* 인사이트 리포트 — 그래프가 그려지고 막대가 차오름 */
.rp-chart, .lv-chart { position: relative; display: block; height: 5.2em; }
.fan-card .rp-chart { flex: 1; min-height: 5.2em; }
.scr-cmp .msg { margin-top: auto; }
.lv-chart { flex: 1; min-height: 4.6em; }
.rp-chart svg, .lv-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.scr .area { fill: url(#cnol-area); }
.scr .ln { fill: none; stroke: #1f71f5; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.rp-chart .mk { position: absolute; width: .7em; height: .7em; margin: -.35em 0 0 -.35em; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .18em #1f71f5; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: .4em; }
.kpis i { display: grid; gap: .3em; padding: .45em .5em; border-radius: .55em; background: #f4f6fb; }
.kpis small { font-size: .68em; font-weight: 600; color: #757780; }
.kpis .bar > u, .src .bar > i { transform: scaleX(var(--v)); }
.src { display: grid; gap: .32em; }
.src-r { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); align-items: center; gap: .5em; }
.src-r small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7em; font-weight: 600; color: #5d5f68; }
@keyframes ln { 0% { stroke-dashoffset: 1; opacity: 1; } 55%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes area { 0%, 30% { opacity: 0; } 55%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes mk1 { 0%, 26% { transform: scale(0); } 30%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes mk2 { 0%, 36% { transform: scale(0); } 40%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes mk3 { 0%, 53% { transform: scale(0); } 57%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes fillv { 0%, 30% { transform: scaleX(0); } 60%, 92% { transform: scaleX(var(--v)); } 100% { transform: scaleX(0); } }

/* LIVE — 두 플랫폼이 함께 돌아가는 모습 */
.live-dot { width: .55em; height: .55em; border-radius: 50%; background: #e53935; animation: live 1.6s infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(229, 57, 53, .55); } 70%, 100% { box-shadow: 0 0 0 .55em rgba(229, 57, 53, 0); } }
.scr-live .scr-top .sub { color: #e53935; font-weight: 800; letter-spacing: .06em; }
.lv-row { display: grid; grid-template-columns: 1.9em minmax(0, 1fr) auto; align-items: center; gap: .5em; padding: .4em .5em; border-radius: .6em; background: #f6f7fb; }
.lv-row .ic { width: 1.9em; height: 1.9em; border-radius: .5em; display: grid; place-items: center; color: #fff; }
.lv-row .ic.m { background: linear-gradient(135deg, #ec1e79, #1f71f5); }
.lv-row .ic.a { background: linear-gradient(135deg, #ff77ab, #ba005c); }
.lv-row .ic.n { background: linear-gradient(135deg, #ffb74d, #f57c00); }
.lv-row .eqm { width: 2.4em; height: 1.2em; }
.mini-bar { width: 3.2em; height: .32em; border-radius: 99px; background: #e8eaf0; overflow: hidden; }
.mini-bar i { display: block; height: 100%; background: #ba005c; transform-origin: 0 50%; animation: loop-bar 4s linear infinite; }

/* 담당자 메신저 — 대화가 차례로 올라옴 */
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .4em; }
.msg { display: flex; align-items: flex-end; gap: .35em; }
.msg.me { justify-content: flex-end; }
.msg .av { flex: none; width: 2.6em; height: 2.6em; border-radius: 50%; display: grid; place-items: center; font-size: .6em; font-weight: 800; background: #1b1b1f; color: #fff; }
.msg .bb { max-width: 80%; padding: .5em .75em; border-radius: 1em; font-size: .78em; line-height: 1.35; background: #f1f2f6; color: #1b1b1f; }
.msg.them .bb { border-bottom-left-radius: .3em; }
.msg.me .bb { border-bottom-right-radius: .3em; background: #1f71f5; color: #fff; }
.slot { display: grid; }
.slot .msg { grid-area: 1 / 1; }
.msg.typing { opacity: 0; }
.typing .bb { display: flex; gap: .25em; padding: .75em .85em; }
.typing .bb i { width: .45em; height: .45em; border-radius: 50%; background: #9a9ca5; animation: typing 1s infinite; }
.typing .bb i:nth-child(2) { animation-delay: .15s; }
.typing .bb i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-.25em); opacity: 1; } }
.inp { display: flex; align-items: center; justify-content: space-between; gap: .4em; padding: .55em .8em; border-radius: 99px; background: #f4f6fb; color: #9a9ca5; font-size: .76em; }
.inp .ms { font-size: 1.3em; color: #1f71f5; }

@keyframes sl1-dot { 0%, 22% { background: #0058cb; color: #fff; box-shadow: 0 0 0 .28em rgba(0, 88, 203, .16); } 23.5%, 96% { background: #17a058; color: #fff; box-shadow: none; } 97.5%, 100% { background: #0058cb; color: #fff; box-shadow: 0 0 0 .28em rgba(0, 88, 203, .16); } }
@keyframes sl1-n { 0%, 22% { opacity: 1; } 23.5%, 96% { opacity: 0; } 97.5%, 100% { opacity: 1; } }
@keyframes sl1-ck { 0%, 22% { opacity: 0; } 23.5%, 96% { opacity: 1; } 97.5%, 100% { opacity: 0; } }
@keyframes sl1-w { 0%, 22% { opacity: 0; } 23.5%, 96% { opacity: 0; } 97.5%, 100% { opacity: 0; } }
@keyframes sl1-p { 0%, 22% { opacity: 1; } 23.5%, 96% { opacity: 0; } 97.5%, 100% { opacity: 1; } }
@keyframes sl1-d { 0%, 22% { opacity: 0; } 23.5%, 96% { opacity: 1; } 97.5%, 100% { opacity: 0; } }
@keyframes sl1-row { 0%, 22% { background: #eef3ff; } 23.5%, 96% { background: transparent; } 97.5%, 100% { background: #eef3ff; } }
@keyframes sl2-dot { 0%, 22% { background: #eceef3; color: #8a8d97; box-shadow: none; } 23.5%, 46% { background: #0058cb; color: #fff; box-shadow: 0 0 0 .28em rgba(0, 88, 203, .16); } 47.5%, 96% { background: #17a058; color: #fff; box-shadow: none; } 97.5%, 100% { background: #eceef3; color: #8a8d97; box-shadow: none; } }
@keyframes sl2-n { 0%, 22% { opacity: 1; } 23.5%, 46% { opacity: 1; } 47.5%, 96% { opacity: 0; } 97.5%, 100% { opacity: 1; } }
@keyframes sl2-ck { 0%, 22% { opacity: 0; } 23.5%, 46% { opacity: 0; } 47.5%, 96% { opacity: 1; } 97.5%, 100% { opacity: 0; } }
@keyframes sl2-w { 0%, 22% { opacity: 1; } 23.5%, 46% { opacity: 0; } 47.5%, 96% { opacity: 0; } 97.5%, 100% { opacity: 1; } }
@keyframes sl2-p { 0%, 22% { opacity: 0; } 23.5%, 46% { opacity: 1; } 47.5%, 96% { opacity: 0; } 97.5%, 100% { opacity: 0; } }
@keyframes sl2-d { 0%, 22% { opacity: 0; } 23.5%, 46% { opacity: 0; } 47.5%, 96% { opacity: 1; } 97.5%, 100% { opacity: 0; } }
@keyframes sl2-row { 0%, 22% { background: transparent; } 23.5%, 46% { background: #eef3ff; } 47.5%, 96% { background: transparent; } 97.5%, 100% { background: transparent; } }
@keyframes sl3-dot { 0%, 46% { background: #eceef3; color: #8a8d97; box-shadow: none; } 47.5%, 70% { background: #0058cb; color: #fff; box-shadow: 0 0 0 .28em rgba(0, 88, 203, .16); } 71.5%, 96% { background: #17a058; color: #fff; box-shadow: none; } 97.5%, 100% { background: #eceef3; color: #8a8d97; box-shadow: none; } }
@keyframes sl3-n { 0%, 46% { opacity: 1; } 47.5%, 70% { opacity: 1; } 71.5%, 96% { opacity: 0; } 97.5%, 100% { opacity: 1; } }
@keyframes sl3-ck { 0%, 46% { opacity: 0; } 47.5%, 70% { opacity: 0; } 71.5%, 96% { opacity: 1; } 97.5%, 100% { opacity: 0; } }
@keyframes sl3-w { 0%, 46% { opacity: 1; } 47.5%, 70% { opacity: 0; } 71.5%, 96% { opacity: 0; } 97.5%, 100% { opacity: 1; } }
@keyframes sl3-p { 0%, 46% { opacity: 0; } 47.5%, 70% { opacity: 1; } 71.5%, 96% { opacity: 0; } 97.5%, 100% { opacity: 0; } }
@keyframes sl3-d { 0%, 46% { opacity: 0; } 47.5%, 70% { opacity: 0; } 71.5%, 96% { opacity: 1; } 97.5%, 100% { opacity: 0; } }
@keyframes sl3-row { 0%, 46% { background: transparent; } 47.5%, 70% { background: #eef3ff; } 71.5%, 96% { background: transparent; } 97.5%, 100% { background: transparent; } }
@keyframes sl4-dot { 0%, 70% { background: #eceef3; color: #8a8d97; box-shadow: none; } 71.5%, 90% { background: #0058cb; color: #fff; box-shadow: 0 0 0 .28em rgba(0, 88, 203, .16); } 91.5%, 96% { background: #17a058; color: #fff; box-shadow: none; } 97.5%, 100% { background: #eceef3; color: #8a8d97; box-shadow: none; } }
@keyframes sl4-n { 0%, 70% { opacity: 1; } 71.5%, 90% { opacity: 1; } 91.5%, 96% { opacity: 0; } 97.5%, 100% { opacity: 1; } }
@keyframes sl4-ck { 0%, 70% { opacity: 0; } 71.5%, 90% { opacity: 0; } 91.5%, 96% { opacity: 1; } 97.5%, 100% { opacity: 0; } }
@keyframes sl4-w { 0%, 70% { opacity: 1; } 71.5%, 90% { opacity: 0; } 91.5%, 96% { opacity: 0; } 97.5%, 100% { opacity: 1; } }
@keyframes sl4-p { 0%, 70% { opacity: 0; } 71.5%, 90% { opacity: 1; } 91.5%, 96% { opacity: 0; } 97.5%, 100% { opacity: 0; } }
@keyframes sl4-d { 0%, 70% { opacity: 0; } 71.5%, 90% { opacity: 0; } 91.5%, 96% { opacity: 1; } 97.5%, 100% { opacity: 0; } }
@keyframes sl4-row { 0%, 70% { background: transparent; } 71.5%, 90% { background: #eef3ff; } 91.5%, 96% { background: transparent; } 97.5%, 100% { background: transparent; } }
@keyframes sp3-dot { 0%, 22% { background: #0058cb; color: #fff; box-shadow: 0 0 0 .28em rgba(0, 88, 203, .16); } 23.5%, 96% { background: #17a058; color: #fff; box-shadow: none; } 97.5%, 100% { background: #0058cb; color: #fff; box-shadow: 0 0 0 .28em rgba(0, 88, 203, .16); } }
@keyframes sp3-n { 0%, 22% { opacity: 1; } 23.5%, 96% { opacity: 0; } 97.5%, 100% { opacity: 1; } }
@keyframes sp3-ck { 0%, 22% { opacity: 0; } 23.5%, 96% { opacity: 1; } 97.5%, 100% { opacity: 0; } }
@keyframes sp3-lab { 0%, 22% { color: #0058cb; font-weight: 800; } 23.5%, 96% { color: #1b1b1f; font-weight: 700; } 97.5%, 100% { color: #0058cb; font-weight: 800; } }
@keyframes sp4-dot { 0%, 22% { background: #eceef3; color: #8a8d97; box-shadow: none; } 23.5%, 44% { background: #0058cb; color: #fff; box-shadow: 0 0 0 .28em rgba(0, 88, 203, .16); } 45.5%, 96% { background: #17a058; color: #fff; box-shadow: none; } 97.5%, 100% { background: #eceef3; color: #8a8d97; box-shadow: none; } }
@keyframes sp4-n { 0%, 22% { opacity: 1; } 23.5%, 44% { opacity: 1; } 45.5%, 96% { opacity: 0; } 97.5%, 100% { opacity: 1; } }
@keyframes sp4-ck { 0%, 22% { opacity: 0; } 23.5%, 44% { opacity: 0; } 45.5%, 96% { opacity: 1; } 97.5%, 100% { opacity: 0; } }
@keyframes sp4-lab { 0%, 22% { color: #8a8d97; font-weight: 600; } 23.5%, 44% { color: #0058cb; font-weight: 800; } 45.5%, 96% { color: #1b1b1f; font-weight: 700; } 97.5%, 100% { color: #8a8d97; font-weight: 600; } }
@keyframes sp5-dot { 0%, 44% { background: #eceef3; color: #8a8d97; box-shadow: none; } 45.5%, 66% { background: #0058cb; color: #fff; box-shadow: 0 0 0 .28em rgba(0, 88, 203, .16); } 67.5%, 96% { background: #17a058; color: #fff; box-shadow: none; } 97.5%, 100% { background: #eceef3; color: #8a8d97; box-shadow: none; } }
@keyframes sp5-n { 0%, 44% { opacity: 1; } 45.5%, 66% { opacity: 1; } 67.5%, 96% { opacity: 0; } 97.5%, 100% { opacity: 1; } }
@keyframes sp5-ck { 0%, 44% { opacity: 0; } 45.5%, 66% { opacity: 0; } 67.5%, 96% { opacity: 1; } 97.5%, 100% { opacity: 0; } }
@keyframes sp5-lab { 0%, 44% { color: #8a8d97; font-weight: 600; } 45.5%, 66% { color: #0058cb; font-weight: 800; } 67.5%, 96% { color: #1b1b1f; font-weight: 700; } 97.5%, 100% { color: #8a8d97; font-weight: 600; } }
@keyframes sp6-dot { 0%, 66% { background: #eceef3; color: #8a8d97; box-shadow: none; } 67.5%, 88% { background: #0058cb; color: #fff; box-shadow: 0 0 0 .28em rgba(0, 88, 203, .16); } 89.5%, 96% { background: #17a058; color: #fff; box-shadow: none; } 97.5%, 100% { background: #eceef3; color: #8a8d97; box-shadow: none; } }
@keyframes sp6-n { 0%, 66% { opacity: 1; } 67.5%, 88% { opacity: 1; } 89.5%, 96% { opacity: 0; } 97.5%, 100% { opacity: 1; } }
@keyframes sp6-ck { 0%, 66% { opacity: 0; } 67.5%, 88% { opacity: 0; } 89.5%, 96% { opacity: 1; } 97.5%, 100% { opacity: 0; } }
@keyframes sp6-lab { 0%, 66% { color: #8a8d97; font-weight: 600; } 67.5%, 88% { color: #0058cb; font-weight: 800; } 89.5%, 96% { color: #1b1b1f; font-weight: 700; } 97.5%, 100% { color: #8a8d97; font-weight: 600; } }
@keyframes nt1 { 0%, 22% { opacity: 1; transform: none; } 23.5%, 98% { opacity: 0; transform: translateY(-.35em); } 100% { opacity: 1; transform: none; } }
@keyframes nt2 { 0%, 22% { opacity: 0; transform: translateY(.35em); } 23.5%, 44% { opacity: 1; transform: none; } 45.5%, 100% { opacity: 0; transform: translateY(-.35em); } }
@keyframes nt3 { 0%, 44% { opacity: 0; transform: translateY(.35em); } 45.5%, 66% { opacity: 1; transform: none; } 67.5%, 100% { opacity: 0; transform: translateY(-.35em); } }
@keyframes nt4 { 0%, 66% { opacity: 0; transform: translateY(.35em); } 67.5%, 88% { opacity: 1; transform: none; } 89.5%, 100% { opacity: 0; transform: translateY(-.35em); } }
@keyframes nt5 { 0%, 88% { opacity: 0; transform: translateY(.35em); } 89.5%, 97% { opacity: 1; transform: none; } 98.5%, 100% { opacity: 0; transform: translateY(-.35em); } }
@keyframes m1 { 0%, 6% { opacity: 0; transform: translateY(.6em); } 10%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes m2 { 0%, 26% { opacity: 0; transform: translateY(.6em); } 30%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes m3 { 0%, 44% { opacity: 0; transform: translateY(.6em); } 48%, 58% { opacity: 1; transform: none; } 61%, 100% { opacity: 0; transform: none; } }
@keyframes m4 { 0%, 58% { opacity: 0; transform: translateY(.6em); } 62%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes m5 { 0%, 50% { opacity: 0; transform: translateY(.6em); } 54%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
.sl-row.s1 { animation: sl1-row 9s infinite; } .sl-row.s1 .dot { animation: sl1-dot 9s infinite; } .sl-row.s1 .dot .n { animation: sl1-n 9s infinite; } .sl-row.s1 .dot .ck { animation: sl1-ck 9s infinite; } .sl-row.s1 .st .w { animation: sl1-w 9s infinite; } .sl-row.s1 .st .p { animation: sl1-p 9s infinite; } .sl-row.s1 .st .d { animation: sl1-d 9s infinite; }
.sl-row.s2 { animation: sl2-row 9s infinite; } .sl-row.s2 .dot { animation: sl2-dot 9s infinite; } .sl-row.s2 .dot .n { animation: sl2-n 9s infinite; } .sl-row.s2 .dot .ck { animation: sl2-ck 9s infinite; } .sl-row.s2 .st .w { animation: sl2-w 9s infinite; } .sl-row.s2 .st .p { animation: sl2-p 9s infinite; } .sl-row.s2 .st .d { animation: sl2-d 9s infinite; }
.sl-row.s3 { animation: sl3-row 9s infinite; } .sl-row.s3 .dot { animation: sl3-dot 9s infinite; } .sl-row.s3 .dot .n { animation: sl3-n 9s infinite; } .sl-row.s3 .dot .ck { animation: sl3-ck 9s infinite; } .sl-row.s3 .st .w { animation: sl3-w 9s infinite; } .sl-row.s3 .st .p { animation: sl3-p 9s infinite; } .sl-row.s3 .st .d { animation: sl3-d 9s infinite; }
.sl-row.s4 { animation: sl4-row 9s infinite; } .sl-row.s4 .dot { animation: sl4-dot 9s infinite; } .sl-row.s4 .dot .n { animation: sl4-n 9s infinite; } .sl-row.s4 .dot .ck { animation: sl4-ck 9s infinite; } .sl-row.s4 .st .w { animation: sl4-w 9s infinite; } .sl-row.s4 .st .p { animation: sl4-p 9s infinite; } .sl-row.s4 .st .d { animation: sl4-d 9s infinite; }
.sp.k3 .dot { animation: sp3-dot 10s infinite; } .sp.k3 .dot .n { animation: sp3-n 10s infinite; } .sp.k3 .dot .ck { animation: sp3-ck 10s infinite; } .sp.k3 small { animation: sp3-lab 10s infinite; }
.sp.k4 .dot { animation: sp4-dot 10s infinite; } .sp.k4 .dot .n { animation: sp4-n 10s infinite; } .sp.k4 .dot .ck { animation: sp4-ck 10s infinite; } .sp.k4 small { animation: sp4-lab 10s infinite; }
.sp.k5 .dot { animation: sp5-dot 10s infinite; } .sp.k5 .dot .n { animation: sp5-n 10s infinite; } .sp.k5 .dot .ck { animation: sp5-ck 10s infinite; } .sp.k5 small { animation: sp5-lab 10s infinite; }
.sp.k6 .dot { animation: sp6-dot 10s infinite; } .sp.k6 .dot .n { animation: sp6-n 10s infinite; } .sp.k6 .dot .ck { animation: sp6-ck 10s infinite; } .sp.k6 small { animation: sp6-lab 10s infinite; }
.note .nt1, .cmp-h .nt1 { animation: nt1 10s infinite; }
.note .nt2, .cmp-h .nt2 { animation: nt2 10s infinite; }
.note .nt3, .cmp-h .nt3 { animation: nt3 10s infinite; }
.note .nt4, .cmp-h .nt4 { animation: nt4 10s infinite; }
.note .nt5, .cmp-h .nt5 { animation: nt5 10s infinite; }
.scr .ln { animation: ln 7s ease-in-out infinite; } .scr .area { animation: area 7s infinite; }
.rp-chart .mk1 { animation: mk1 7s infinite; } .rp-chart .mk2 { animation: mk2 7s infinite; } .rp-chart .mk3 { animation: mk3 7s infinite; }
.kpis .bar > u, .src .bar > i { animation: fillv 7s infinite; }
.msg.m1 { animation: m1 10s infinite; } .msg.m2 { animation: m2 10s infinite; } .msg.m3 { animation: m3 10s infinite; } .msg.m4 { animation: m4 10s infinite; } .msg.m5 { animation: m5 10s infinite; }
/* @screens:end */