#sensor-diagram{
      --bg:#f7f9fc;
      --surface:#ffffff;
      --surface-soft:#f3f6fa;
      --text:#152233;
      --muted:#6d7b8d;
      --line:#d9e1ea;
      --blue:#1768d2;
      --blue-dark:#0b4ca7;
      --blue-soft:#eaf3ff;
      --green:#16a36a;
      --green-soft:#e9f8f1;
      --orange:#e38a18;
      --orange-soft:#fff4e4;
      --red:#d94a4a;
      --shadow:0 12px 30px rgba(26, 42, 67, .08);
    }

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

    .sensor-section{
      width:100%;
      padding:72px 32px;
      background:
        radial-gradient(circle at 12% 20%, rgba(23,104,210,.06), transparent 26%),
        radial-gradient(circle at 88% 78%, rgba(22,163,106,.05), transparent 24%),
        var(--bg);
    }

    .sensor-inner{
      max-width:1440px;
      margin:0 auto;
    }

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

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

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

    .lead{
      max-width:820px;
      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(170px, .9fr)
        64px
        minmax(180px, 1fr)
        64px
        minmax(170px, .95fr)
        64px
        minmax(210px, 1.05fr)
        76px
        minmax(210px, 1.15fr);
      align-items:center;
      min-height:560px;
    }

    .source-list{
      display:flex;
      flex-direction:column;
      gap:14px;
    }

    .source-card,
    .output-card{
      background:var(--surface);
      border:1px solid var(--line);
      border-radius:16px;
      box-shadow:0 6px 18px rgba(26,42,67,.05);
    }

    .source-card{
      min-height:80px;
      display:flex;
      align-items:center;
      gap:14px;
      padding:15px 16px;
    }

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

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

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

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

    /* 네트워크 장비 */
    .icon-network::before{
      width:24px;
      height:14px;
      border:2px solid currentColor;
      border-radius:3px;
      top:10px;
    }
    .icon-network::after{
      width:28px;
      height:2px;
      background:currentColor;
      box-shadow:-6px 9px 0 -0.5px currentColor, 6px 9px 0 -0.5px currentColor;
      top:27px;
    }

    /* 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:8px;
    }
    .icon-gps::after{
      width:5px;
      height:5px;
      background:currentColor;
      border-radius:50%;
      top:13px;
    }

    /* Serial */
    .icon-serial{
      background:#eef2f7;
      color:#5b6b7f;
    }
    .icon-serial::before{
      width:24px;
      height:14px;
      border:2px solid currentColor;
      border-radius:3px;
    }
    .icon-serial::after{
      width:3px;
      height:3px;
      background:currentColor;
      border-radius:50%;
      box-shadow:6px 0 currentColor,-6px 0 currentColor,0 6px currentColor;
    }

    /* Bluetooth */
    .icon-bluetooth::before{
      content:"B";
      position:static;
      font-size:20px;
      font-weight:900;
    }

    /* Camera */
    .icon-camera{
      background:#edf0f4;
      color:#27364a;
    }
    .icon-camera::before{
      width:24px;
      height:15px;
      border:2px solid currentColor;
      border-radius:4px;
      top:12px;
      left:8px;
    }
    .icon-camera::after{
      width:10px;
      height:10px;
      border:2px solid currentColor;
      border-radius:50%;
      top:14px;
      left:14px;
      box-shadow:14px 4px 0 -4px currentColor;
    }

    .flow-arrow{
      position:relative;
      height:2px;
      background:linear-gradient(90deg, rgba(23,104,210,.25), var(--blue));
      align-self:center;
      margin:0 10px;
    }
    .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(--blue);
    }

    .flow-arrow.bi{
      background:linear-gradient(90deg, var(--red), rgba(217,74,74,.35), 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);
    }
    .flow-arrow.bi::after{
      border-left-color:var(--red);
    }

    .interface-card{
      background:var(--surface);
      border:1px solid var(--line);
      border-radius:26px;
      padding:26px 22px;
      text-align:center;
      box-shadow:var(--shadow);
      position:relative;
    }
    .interface-card::before{
      content:"";
      position:absolute;
      inset:-10px;
      border:1px dashed rgba(22,163,106,.55);
      border-radius:34px;
      pointer-events:none;
    }
    .interface-symbol{
      width:74px;
      height:74px;
      margin:0 auto 18px;
      border-radius:22px;
      background:var(--green-soft);
      color:var(--green);
      display:grid;
      place-items:center;
      position:relative;
    }
    .interface-symbol::before{
      content:"";
      width:27px;
      height:34px;
      border:2px solid currentColor;
      border-radius:4px;
    }
    .interface-symbol::after{
      content:"";
      width:8px;
      height:8px;
      border:2px solid currentColor;
      border-radius:50%;
      box-shadow:0 -14px 0 -2px currentColor;
      position:absolute;
      right:15px;
      bottom:16px;
    }
    .interface-card h3,
    .network-card h3,
    .engine-card h3{
      margin:0;
      font-size:18px;
    }
    .interface-card p,
    .network-card p,
    .engine-card p{
      margin:8px 0 0;
      font-size:13px;
      line-height:1.65;
      color:var(--muted);
      word-break:keep-all;
    }

    .network-card{
      position:relative;
      min-height:190px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:30px 18px;
      background:var(--surface);
      border:1px solid var(--line);
      border-radius:50% / 34%;
      box-shadow:var(--shadow);
    }
    .network-card::before,
    .network-card::after{
      content:"";
      position:absolute;
      background:var(--surface);
      border:1px solid var(--line);
      border-bottom:0;
      z-index:-1;
    }
    .network-card::before{
      width:75px;
      height:75px;
      border-radius:50%;
      left:23px;
      top:6px;
    }
    .network-card::after{
      width:95px;
      height:95px;
      border-radius:50%;
      right:17px;
      top:-8px;
    }
    .network-waves{
      width:62px;
      height:38px;
      position:relative;
      margin-bottom:10px;
    }
    .network-waves span{
      position:absolute;
      left:50%;
      transform:translateX(-50%);
      border:2px solid var(--blue);
      border-color:var(--blue) transparent transparent transparent;
      border-radius:50%;
    }
    .network-waves span:nth-child(1){width:58px;height:28px;top:2px}
    .network-waves span:nth-child(2){width:42px;height:22px;top:10px}
    .network-waves span:nth-child(3){
      width:8px;height:8px;top:27px;
      background:var(--blue);
      border:0;
      border-radius:50%;
    }

    .engine-card{
      background:linear-gradient(180deg,#ffffff 0%,#f5f8fc 100%);
      border:1px solid var(--line);
      border-radius:22px;
      padding:24px 20px;
      box-shadow:0 16px 34px rgba(15,55,105,.12);
      position:relative;
      min-height:300px;
      overflow:hidden;
    }
    .engine-card::before{
      content:"";
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:8px;
      background:linear-gradient(90deg,var(--blue),#4c7be8);
    }
    .engine-badge{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:7px 10px;
      border-radius:999px;
      background:var(--blue-soft);
      color:var(--blue);
      font-size:11px;
      font-weight:800;
      letter-spacing:.04em;
      margin-bottom:16px;
    }
    .engine-card h3{
      font-size:21px;
      line-height:1.3;
    }
    .engine-steps{
      margin:22px 0 0;
      padding:0;
      list-style:none;
      display:grid;
      gap:10px;
    }
    .engine-steps li{
      display:flex;
      align-items:center;
      gap:10px;
      font-size:13px;
      color:#405165;
      padding:10px 11px;
      border-radius:10px;
      background:#fff;
      border:1px solid #e6ebf1;
    }
    .engine-steps b{
      display:grid;
      place-items:center;
      width:24px;
      height:24px;
      flex:0 0 24px;
      border-radius:50%;
      background:var(--blue-soft);
      color:var(--blue);
      font-size:11px;
    }

    .outputs{
      display:grid;
      gap:16px;
    }
    .output-card{
      padding:18px;
      display:grid;
      grid-template-columns:48px 1fr;
      gap:14px;
      align-items:center;
      min-height:106px;
      position:relative;
    }
    .output-card::before{
      content:"";
      position:absolute;
      left:-34px;
      top:50%;
      width:28px;
      border-top:2px dashed var(--blue);
      transform:translateY(-50%);
    }
    .output-card::after{
      content:"";
      position:absolute;
      left:-9px;
      top:50%;
      transform:translateY(-50%);
      border-top:5px solid transparent;
      border-bottom:5px solid transparent;
      border-left:8px solid var(--blue);
    }
    .output-icon{
      width:48px;
      height:48px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:var(--blue-soft);
      color:var(--blue);
      position:relative;
      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;
      box-shadow:0 -3px 0 -1px currentColor;
    }
    .icon-mobile::before{
      content:"";
      width:13px;height:26px;
      border:2px solid currentColor;
      border-radius:4px;
    }
    .icon-mobile::after{
      content:"";
      position:absolute;
      width:4px;height:4px;
      border-radius:50%;
      background:currentColor;
      bottom:10px;
    }
    .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:36px;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      border:1px solid var(--line);
      border-radius:18px;
      overflow:hidden;
      background:var(--surface);
    }
    .summary-item{
      padding:20px 22px;
      border-right:1px solid var(--line);
    }
    .summary-item:last-child{border-right:0}
    .summary-item b{
      display:block;
      font-size:13px;
      color:var(--blue);
      margin-bottom:7px;
    }
    .summary-item span{
      color:var(--muted);
      font-size:13px;
      line-height:1.6;
    }

    @media (max-width:1180px){
      .diagram{
        grid-template-columns:1fr 40px 1fr 40px 1fr;
        row-gap:28px;
        min-height:auto;
      }
      .source-list{grid-column:1}
      .diagram > .flow-arrow:nth-of-type(1){grid-column:2}
      .interface-card{grid-column:3}
      .diagram > .flow-arrow:nth-of-type(2){grid-column:4}
      .network-card{grid-column:5}
      .diagram > .flow-arrow:nth-of-type(3){
        grid-column:1 / -1;
        width:2px;
        height:54px;
        margin:0 auto;
        background:linear-gradient(180deg,rgba(217,74,74,.25),var(--red));
      }
      .diagram > .flow-arrow:nth-of-type(3)::before{display:none}
      .diagram > .flow-arrow:nth-of-type(3)::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;
      }
      .engine-card{grid-column:2 / 4}
      .diagram > .flow-arrow:nth-of-type(4){
        grid-column:1 / -1;
        width:2px;
        height:54px;
        margin:0 auto;
        background:linear-gradient(180deg,rgba(23,104,210,.25),var(--blue));
      }
      .diagram > .flow-arrow:nth-of-type(4)::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:2 / 5}
      .output-card::before,
      .output-card::after{display:none}
    }

    @media (max-width:760px){
      .sensor-section{padding:48px 18px}
      #sensor-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;
        background:linear-gradient(180deg,rgba(23,104,210,.25),var(--blue))!important;
      }
      .flow-arrow::after{
        right:50%!important;
        top:auto!important;
        bottom:-1px!important;
        transform:translateX(50%)!important;
        border-top:9px solid var(--blue)!important;
        border-left:6px solid transparent!important;
        border-right:6px solid transparent!important;
        border-bottom:0!important;
      }
      .flow-arrow::before{display:none!important}
      .flow-arrow.bi{
        background:linear-gradient(180deg,rgba(217,74,74,.25),var(--red))!important;
      }
      .flow-arrow.bi::after{border-top-color:var(--red)!important}
      .network-card{
        width:100%;
        border-radius:28px;
      }
      .summary{grid-template-columns:1fr}
      .summary-item{
        border-right:0;
        border-bottom:1px solid var(--line);
      }
      .summary-item:last-child{border-bottom:0}
    }