#video-diagram{
      --bg:#f7f9fc;
      --surface:#ffffff;
      --surface-soft:#f3f6fa;
      --text:#162334;
      --muted:#6e7c8e;
      --line:#d9e1ea;
      --blue:#1768d2;
      --blue-soft:#eaf3ff;
      --green:#169b67;
      --green-soft:#eaf8f2;
      --orange:#e58a18;
      --orange-soft:#fff4e5;
      --red:#c9473a;
      --red-soft:#fff0ee;
      --purple:#7256c8;
      --purple-soft:#f2effd;
      --shadow:0 12px 30px rgba(27,43,68,.08);
    }

    #video-diagram, #video-diagram *{box-sizing:border-box}

    #video-diagram{
      margin:0;
      background:var(--bg);
      color:var(--text);
      font-family:
        "Pretendard","Noto Sans KR","Apple SD Gothic Neo",
        "Malgun Gothic",Arial,sans-serif;
    }

    .video-section{
      width:100%;
      padding:72px 32px;
      background:
        radial-gradient(circle at 10% 18%, rgba(23,104,210,.06), transparent 26%),
        radial-gradient(circle at 90% 80%, rgba(114,86,200,.05), transparent 24%),
        var(--bg);
    }

    .video-inner{
      max-width:1480px;
      margin:0 auto;
    }

    #video-diagram .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:9px;
      margin-bottom:14px;
      color:var(--blue);
      font-size:13px;
      font-weight:800;
      letter-spacing:.12em;
      text-transform:uppercase;
    }

    #video-diagram .eyebrow::before{
      content:"";
      width:30px;
      height:2px;
      background:var(--blue);
    }

    #video-diagram h1{
      margin:0;
      font-size:40px;
      line-height:1.2;
      letter-spacing:-.04em;
    }

    .lead{
      max-width:880px;
      margin:16px 0 0;
      color:var(--muted);
      font-size:17px;
      line-height:1.8;
      word-break:keep-all;
    }

    .diagram{
      margin-top:46px;
      display:grid;
      grid-template-columns:
        minmax(270px,1.25fr)
        76px
        minmax(180px,.8fr)
        76px
        minmax(360px,1.35fr)
        84px
        minmax(250px,1.1fr);
      align-items:center;
      gap:0;
    }

    .input-groups{
      display:grid;
      gap:22px;
    }

    .group-box{
      background:var(--surface);
      border:1px solid var(--line);
      border-radius:20px;
      overflow:hidden;
      box-shadow:0 8px 24px rgba(28,45,70,.06);
    }

    .group-title{
      padding:13px 16px;
      font-size:14px;
      font-weight:800;
      letter-spacing:-.01em;
      display:flex;
      align-items:center;
      justify-content:space-between;
      border-bottom:1px solid var(--line);
      background:var(--surface-soft);
    }

    .group-title span{
      font-size:11px;
      color:var(--muted);
      font-weight:700;
    }

    .device-list{
      padding:14px;
      display:grid;
      gap:12px;
    }

    .device-card{
      position:relative;
      display:grid;
      grid-template-columns:46px 1fr;
      gap:12px;
      align-items:center;
      min-height:74px;
      padding:12px 13px;
      background:#fff;
      border:1px solid #e4e9ef;
      border-radius:14px;
    }

    .device-card strong{
      display:block;
      font-size:14px;
      margin-bottom:4px;
    }

    .device-card span{
      display:block;
      color:var(--muted);
      font-size:12px;
      line-height:1.45;
    }

    .device-icon{
      position:relative;
      width:46px;
      height:46px;
      flex:0 0 46px;
      border-radius:13px;
      display:grid;
      place-items:center;
      background:var(--blue-soft);
      color:var(--blue);
    }

    .device-icon::before,
    .device-icon::after{
      content:"";
      position:absolute;
    }

    /* CCTV */
    .icon-cctv::before{
      width:26px;
      height:14px;
      border:2px solid currentColor;
      border-radius:3px;
      transform:skewX(-12deg);
      top:12px;
      left:8px;
    }

    .icon-cctv::after{
      width:15px;
      height:3px;
      background:currentColor;
      transform:rotate(-28deg);
      bottom:10px;
      right:7px;
      box-shadow:-8px 5px 0 -1px currentColor;
    }

    /* Plugin device */
    .icon-plugin{
      background:var(--green-soft);
      color:var(--green);
    }

    .icon-plugin::before{
      width:19px;
      height:19px;
      border:2px solid currentColor;
      border-radius:4px;
      left:8px;
      top:13px;
    }

    .icon-plugin::after{
      width:15px;
      height:10px;
      border:2px solid currentColor;
      border-left:0;
      border-radius:0 4px 4px 0;
      right:5px;
      top:17px;
      box-shadow:6px 0 0 -4px currentColor;
    }

    .plugin-card{
      margin-left:22px;
      border-style:dashed;
      background:linear-gradient(90deg,#fbfffd,#fff);
    }

    .plugin-card::before{
      content:"PLUGIN";
      position:absolute;
      top:8px;
      right:10px;
      font-size:9px;
      font-weight:900;
      color:var(--green);
      letter-spacing:.08em;
      background:var(--green-soft);
      padding:3px 6px;
      border-radius:999px;
    }

    .plugin-line{
      position:absolute;
      left:-22px;
      top:50%;
      width:22px;
      border-top:2px dashed var(--green);
    }

    /* GPS */
    .icon-gps{
      background:var(--orange-soft);
      color:var(--orange);
    }

    .icon-gps::before{
      width:15px;
      height:15px;
      border:3px solid currentColor;
      border-radius:50% 50% 50% 0;
      transform:rotate(-45deg);
      top:9px;
    }

    .icon-gps::after{
      width:5px;
      height:5px;
      background:currentColor;
      border-radius:50%;
      top:14px;
    }

    /* Fire truck */
    .icon-fire{
      background:var(--red-soft);
      color:var(--red);
    }

    .icon-fire::before{
      width:27px;
      height:14px;
      border:2px solid currentColor;
      border-radius:3px;
      top:14px;
      left:7px;
      box-shadow:9px -7px 0 -5px currentColor;
    }

    .icon-fire::after{
      width:7px;
      height:7px;
      border:2px solid currentColor;
      border-radius:50%;
      left:10px;
      bottom:7px;
      box-shadow:17px 0 0 -2px #fff,17px 0 0 0 currentColor;
    }

    /* Drone */
    .icon-drone{
      background:#eef1f5;
      color:#34465c;
    }

    .icon-drone::before{
      width:25px;
      height:4px;
      background:currentColor;
      border-radius:4px;
      box-shadow:0 9px 0 -1px currentColor;
    }

    .icon-drone::after{
      width:4px;
      height:22px;
      background:currentColor;
      border-radius:4px;
      box-shadow:-10px 0 0 -1px currentColor,10px 0 0 -1px currentColor;
    }

    /* Mobile */
    .icon-mobile{
      background:var(--green-soft);
      color:var(--green);
    }

    .icon-mobile::before{
      width:16px;
      height:29px;
      border:2px solid currentColor;
      border-radius:4px;
    }

    .icon-mobile::after{
      width:4px;
      height:4px;
      background:currentColor;
      border-radius:50%;
      bottom:9px;
    }

    /* Bodycam */
    .icon-bodycam{
      background:var(--purple-soft);
      color:var(--purple);
    }

    .icon-bodycam::before{
      width:23px;
      height:27px;
      border:2px solid currentColor;
      border-radius:5px 5px 8px 8px;
    }

    .icon-bodycam::after{
      width:8px;
      height:8px;
      border:2px solid currentColor;
      border-radius:50%;
      top:13px;
      box-shadow:0 11px 0 -3px currentColor;
    }

    .flow-arrow{
      position:relative;
      height:2px;
      margin:0 12px;
      background:linear-gradient(90deg,rgba(201,71,58,.25),var(--red));
    }

    .flow-arrow::after{
      content:"";
      position:absolute;
      right:-1px;
      top:50%;
      transform:translateY(-50%);
      border-top:6px solid transparent;
      border-bottom:6px solid transparent;
      border-left:9px solid var(--red);
    }

    .flow-arrow.bi::before{
      content:"";
      position:absolute;
      left:-1px;
      top:50%;
      transform:translateY(-50%);
      border-top:6px solid transparent;
      border-bottom:6px solid transparent;
      border-right:9px solid var(--red);
    }

    .network-stack{
      display:grid;
      gap:18px;
    }

    .network-card,
    .router-card{
      background:var(--surface);
      border:1px solid var(--line);
      border-radius:20px;
      box-shadow:var(--shadow);
      text-align:center;
    }

    .network-card{
      padding:24px 18px;
      position:relative;
    }

    .cloud{
      width:110px;
      height:58px;
      margin:0 auto 10px;
      position:relative;
      background:var(--surface-soft);
      border:2px solid #738095;
      border-radius:32px;
    }

    .cloud::before,
    .cloud::after{
      content:"";
      position:absolute;
      background:var(--surface-soft);
      border:2px solid #738095;
      border-bottom:0;
      border-radius:50%;
    }

    .cloud::before{
      width:45px;
      height:45px;
      left:12px;
      top:-21px;
    }

    .cloud::after{
      width:56px;
      height:56px;
      right:8px;
      top:-28px;
    }

    .network-card h3,
    .router-card h3,
    .server-card h3{
      margin:0;
      font-size:17px;
    }

    .network-card p,
    .router-card p,
    .server-card p{
      margin:7px 0 0;
      color:var(--muted);
      font-size:12px;
      line-height:1.55;
    }

    .router-card{
      padding:16px 14px;
    }

    .router-symbol{
      width:48px;
      height:54px;
      margin:0 auto 8px;
      position:relative;
    }

    .router-symbol::before{
      content:"";
      position:absolute;
      width:6px;
      height:35px;
      background:#314357;
      border-radius:4px;
      left:21px;
      bottom:0;
    }

    .router-symbol::after{
      content:")))";
      position:absolute;
      top:-3px;
      left:5px;
      color:var(--blue);
      font-size:24px;
      font-weight:700;
      transform:rotate(-90deg);
    }

    .server-card{
      position:relative;
      background:linear-gradient(180deg,#fff 0%,#f5f8fb 100%);
      border:1px solid var(--line);
      border-radius:22px;
      box-shadow:0 16px 34px rgba(15,55,105,.12);
      min-height:330px;
      padding:24px 20px;
      overflow:hidden;
    }

    .server-card::before{
      content:"";
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:8px;
      background:linear-gradient(90deg,var(--blue),#477fe8);
    }

    .server-symbol{
      width:86px;
      height:70px;
      margin:10px auto 16px;
      position:relative;
    }

    .server-symbol::before{
      content:"";
      position:absolute;
      inset:0;
      border:2px solid #40566f;
      border-radius:8px;
      background:
        linear-gradient(#eaf0f6,#eaf0f6) 10px 14px/64px 10px no-repeat,
        linear-gradient(#eaf0f6,#eaf0f6) 10px 31px/64px 10px no-repeat,
        linear-gradient(#eaf0f6,#eaf0f6) 10px 48px/64px 10px no-repeat;
    }

    .server-symbol::after{
      content:"";
      position:absolute;
      width:5px;
      height:5px;
      border-radius:50%;
      background:var(--green);
      left:65px;
      top:17px;
      box-shadow:0 17px 0 var(--green),0 34px 0 var(--green);
    }

    .server-badge{
      display:inline-flex;
      padding:6px 10px;
      border-radius:999px;
      background:var(--blue-soft);
      color:var(--blue);
      font-size:10px;
      font-weight:900;
      letter-spacing:.06em;
      margin-bottom:12px;
    }

    .server-features{
      list-style:none;
      margin:20px 0 0;
      padding:0;
      display:grid;
      gap:9px;
    }

    .server-features li{
      display:flex;
      align-items:center;
      gap:9px;
      padding:9px 10px;
      border:1px solid #e5eaf0;
      border-radius:10px;
      background:#fff;
      color:#405165;
      font-size:12px;
    }

    .server-features li::before{
      content:"";
      width:7px;
      height:7px;
      border-radius:50%;
      background:var(--blue);
      flex:0 0 7px;
    }


    /* 영상통합관리시스템 + AI 분석 확장 구조 */
    .core-stack{
      display:flex;
      flex-direction:column;
      align-items:stretch;
      min-width:0;
    }

    .ai-connector{
      position:relative;
      width:2px;
      height:58px;
      margin:0 auto;
      background:linear-gradient(
        180deg,
        rgba(114,86,200,.28),
        var(--purple)
      );
    }

    .ai-connector::before,
    .ai-connector::after{
      content:"";
      position:absolute;
      left:50%;
      transform:translateX(-50%);
      border-left:6px solid transparent;
      border-right:6px solid transparent;
    }

    .ai-connector::before{
      top:-1px;
      border-bottom:9px solid var(--purple);
    }

    .ai-connector::after{
      bottom:-1px;
      border-top:9px solid var(--purple);
    }

    .ai-link-label{
      position:absolute;
      left:16px;
      top:50%;
      transform:translateY(-50%);
      white-space:nowrap;
      padding:4px 8px;
      border-radius:999px;
      background:var(--purple-soft);
      color:var(--purple);
      font-size:9px;
      font-weight:900;
      letter-spacing:.06em;
    }

    .ai-card{
      position:relative;
      overflow:hidden;
      padding:22px 20px 20px;
      border:1px solid #dcd6f4;
      border-radius:22px;
      background:
        linear-gradient(180deg,#ffffff 0%,#faf9ff 100%);
      box-shadow:0 14px 32px rgba(65,45,125,.09);
    }

    .ai-card::before{
      content:"";
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:7px;
      background:linear-gradient(90deg,var(--purple),#9077db);
    }

    .ai-head{
      display:flex;
      align-items:center;
      gap:13px;
      margin-bottom:12px;
    }

    .ai-symbol{
      position:relative;
      width:54px;
      height:54px;
      flex:0 0 54px;
      border-radius:16px;
      display:grid;
      place-items:center;
      background:var(--purple-soft);
      color:var(--purple);
    }

    .ai-symbol::before{
      content:"AI";
      font-size:16px;
      font-weight:950;
      letter-spacing:.02em;
    }

    .ai-symbol::after{
      content:"";
      position:absolute;
      width:8px;
      height:8px;
      border:2px solid currentColor;
      border-radius:50%;
      right:5px;
      bottom:5px;
      box-shadow:
        -36px -30px 0 -2px currentColor,
        -36px 0 0 -2px currentColor,
        0 -30px 0 -2px currentColor;
    }

    .ai-title{
      min-width:0;
    }

    .ai-badge{
      display:inline-flex;
      padding:5px 8px;
      margin-bottom:5px;
      border-radius:999px;
      background:var(--purple-soft);
      color:var(--purple);
      font-size:9px;
      font-weight:900;
      letter-spacing:.07em;
    }

    .ai-title h3{
      margin:0;
      font-size:19px;
      line-height:1.25;
    }

    .ai-card > p{
      margin:0;
      color:var(--muted);
      font-size:12px;
      line-height:1.65;
      word-break:keep-all;
    }

    .ai-section-title{
      margin:18px 0 9px;
      color:#405165;
      font-size:11px;
      font-weight:900;
      letter-spacing:.04em;
    }

    .ai-features{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:8px;
    }

    .ai-feature{
      display:flex;
      align-items:center;
      gap:8px;
      min-width:0;
      padding:9px 9px;
      border:1px solid #e8e4f5;
      border-radius:10px;
      background:#fff;
      color:#405165;
      font-size:11px;
      line-height:1.4;
    }

    .ai-feature::before{
      content:"";
      width:7px;
      height:7px;
      flex:0 0 7px;
      border-radius:50%;
      background:var(--purple);
    }

    .ai-ops{
      display:flex;
      flex-wrap:wrap;
      gap:6px;
    }

    .ai-op{
      padding:6px 8px;
      border:1px solid #e3e7ed;
      border-radius:999px;
      background:#f8fafc;
      color:#5d6d80;
      font-size:10px;
      line-height:1.2;
    }

    .ai-return{
      margin-top:16px;
      padding:10px 11px;
      border-left:3px solid var(--purple);
      border-radius:0 9px 9px 0;
      background:var(--purple-soft);
      color:#514273;
      font-size:11px;
      line-height:1.55;
    }

    .outputs{
      display:grid;
      gap:16px;
    }

    .output-card{
      position:relative;
      display:grid;
      grid-template-columns:48px 1fr;
      gap:14px;
      align-items:center;
      min-height:105px;
      padding:18px;
      background:var(--surface);
      border:1px solid var(--line);
      border-radius:16px;
      box-shadow:0 6px 18px rgba(26,42,67,.05);
    }

    .output-card::before{
      content:"";
      position:absolute;
      left:-44px;
      top:50%;
      width:36px;
      border-top:2px dashed var(--blue);
      transform:translateY(-50%);
    }

    .output-card::after{
      content:"";
      position:absolute;
      left:-10px;
      top:50%;
      transform:translateY(-50%);
      border-top:5px solid transparent;
      border-bottom:5px solid transparent;
      border-left:8px solid var(--blue);
    }

    .output-icon{
      position:relative;
      width:48px;
      height:48px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:var(--blue-soft);
      color:var(--blue);
      font-weight:900;
      font-size:13px;
    }

    .output-card:nth-child(2) .output-icon{
      background:var(--green-soft);
      color:var(--green);
    }

    .output-card:nth-child(3) .output-icon{
      background:var(--orange-soft);
      color:var(--orange);
    }

    .icon-center::before{
      content:"";
      width:26px;
      height:17px;
      border:2px solid currentColor;
      border-radius:3px;
    }

    .icon-center::after{
      content:"";
      position:absolute;
      width:18px;
      height:2px;
      background:currentColor;
      bottom:11px;
      left:15px;
    }

    .icon-terminal::before{
      content:"";
      width:14px;
      height:27px;
      border:2px solid currentColor;
      border-radius:4px;
      box-shadow:15px 5px 0 -3px currentColor;
    }

    .output-card strong{
      display:block;
      font-size:15px;
      margin-bottom:5px;
    }

    .output-card span{
      display:block;
      color:var(--muted);
      font-size:12px;
      line-height:1.55;
    }

    .summary{
      margin-top:38px;
      display:grid;
      grid-template-columns:repeat(5,1fr);
      background:var(--surface);
      border:1px solid var(--line);
      border-radius:18px;
      overflow:hidden;
    }

    .summary-item{
      padding:20px 22px;
      border-right:1px solid var(--line);
    }

    .summary-item:last-child{border-right:0}

    .summary-item b{
      display:block;
      color:var(--blue);
      font-size:13px;
      margin-bottom:7px;
    }

    .summary-item span{
      display:block;
      color:var(--muted);
      font-size:13px;
      line-height:1.6;
    }

    @media(max-width:1220px){
      .diagram{
        grid-template-columns:1fr 48px 1fr;
        gap:26px 0;
      }

      .input-groups{grid-column:1}
      .diagram > .flow-arrow:nth-of-type(1){grid-column:2}
      .network-stack{grid-column:3}

      .diagram > .flow-arrow:nth-of-type(2){
        grid-column:1 / -1;
        width:2px;
        height:56px;
        margin:0 auto;
        background:linear-gradient(180deg,rgba(201,71,58,.25),var(--red));
      }

      .diagram > .flow-arrow:nth-of-type(2)::before{display:none}

      .diagram > .flow-arrow:nth-of-type(2)::after{
        right:50%;
        top:auto;
        bottom:-1px;
        transform:translateX(50%);
        border-top:9px solid var(--red);
        border-left:6px solid transparent;
        border-right:6px solid transparent;
        border-bottom:0;
      }

      .core-stack{
        grid-column:1 / -1;
        max-width:520px;
        width:100%;
        margin:0 auto;
      }

      .server-card{
        width:100%;
      }

      .diagram > .flow-arrow:nth-of-type(3){
        grid-column:1 / -1;
        width:2px;
        height:56px;
        margin:0 auto;
        background:linear-gradient(180deg,rgba(23,104,210,.25),var(--blue));
      }

      .diagram > .flow-arrow:nth-of-type(3)::after{
        right:50%;
        top:auto;
        bottom:-1px;
        transform:translateX(50%);
        border-top:9px solid var(--blue);
        border-left:6px solid transparent;
        border-right:6px solid transparent;
        border-bottom:0;
      }

      .outputs{grid-column:1 / -1; grid-template-columns:repeat(3,1fr)}
      .output-card::before,.output-card::after{display:none}
    }

    @media(max-width:760px){
      .video-section{padding:48px 18px}
      #video-diagram h1{font-size:30px}
      .lead{font-size:15px}
      .diagram{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:20px;
        margin-top:34px;
      }

      .flow-arrow{
        width:2px!important;
        height:42px!important;
        margin:0 auto!important;
      }

      .flow-arrow::before{display:none!important}

      .flow-arrow::after{
        right:50%!important;
        top:auto!important;
        bottom:-1px!important;
        transform:translateX(50%)!important;
        border-top:9px solid var(--red)!important;
        border-left:6px solid transparent!important;
        border-right:6px solid transparent!important;
        border-bottom:0!important;
      }

      .diagram > .flow-arrow:nth-of-type(3)::after{
        border-top-color:var(--blue)!important;
      }

      .ai-features{grid-template-columns:1fr}
      .ai-link-label{left:14px}
      .outputs{grid-template-columns:1fr}
      .summary{grid-template-columns:1fr}
      .summary-item{
        border-right:0;
        border-bottom:1px solid var(--line);
      }
      .summary-item:last-child{border-bottom:0}
    }