/* ===== BLE 도구 전용 스타일 ===== */
    .ble-card {
      max-width: 680px;
      margin: 0 auto;
      background: #fff;
      border: 1px solid var(--gray-200);
      border-radius: 12px;
      padding: 28px 20px;
    }
    @media (min-width: 481px) {
      .ble-card { padding: 36px 32px; }
    }

    /* 상태 배지 */
    .ble-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 0.85rem;
      font-weight: 700;
      margin-bottom: 20px;
    }
    .ble-status.disconnected { background: var(--gray-200); color: var(--gray-800); }
    .ble-status.connecting   { background: #fff3cd; color: #856404; }
    .ble-status.connected    { background: #d1f0d1; color: #1a6b1a; }
    .ble-status.error        { background: #ffe0dc; color: #b91c1c; }

    .ble-status .dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: currentColor;
    }
    .ble-status.connecting .dot {
      animation: blink 1s infinite;
    }
    @keyframes blink {
      0%,100% { opacity: 1; }
      50%      { opacity: 0.2; }
    }

    /* 기기 정보 박스 */
    .device-info {
      background: var(--gray-100);
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 20px;
      font-size: 0.9rem;
    }
    .device-info dt {
      color: var(--gray-600);
      font-size: 0.78rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-top: 10px;
    }
    .device-info dt:first-child { margin-top: 0; }
    .device-info dd {
      margin: 2px 0 0 0;
      font-weight: 700;
      word-break: break-all;
    }

    /* 바코드 캡처 영역 */
    #scan-capture-area:focus,
    #scan-capture-area.active {
      border-color: var(--orange);
      background: #fff8f3;
    }
    #scan-capture-area.active #scan-capture-hint {
      color: var(--orange);
      font-weight: 700;
    }
    .scan-result-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-bottom: 1px solid var(--gray-100);
      font-size: 0.9rem;
    }
    .scan-result-item:last-child { border-bottom: none; }
    .scan-result-barcode {
      flex: 1;
      font-family: monospace;
      font-size: 1rem;
      font-weight: 700;
      color: var(--navy);
      word-break: break-all;
    }
    .scan-result-time {
      flex-shrink: 0;
      font-size: 0.75rem;
      color: var(--gray-500);
    }
    .scan-result-src {
      flex-shrink: 0;
      font-size: 0.72rem;
      padding: 2px 6px;
      border-radius: 4px;
      background: var(--gray-100);
      color: var(--gray-600);
    }

    /* 서비스 아코디언 */
    .service-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .service-item {
      border: 1px solid var(--gray-200);
      border-radius: 8px;
      overflow: hidden;
    }
    .service-header {
      width: 100%;
      background: none;
      border: none;
      padding: 12px 16px;
      text-align: left;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-family: inherit;
      font-size: 0.88rem;
      font-weight: 700;
      color: var(--navy);
      background: var(--gray-100);
    }
    .service-header:hover { background: var(--gray-200); }
    .service-chevron {
      flex-shrink: 0;
      transition: transform 0.2s;
      font-style: normal;
    }
    .service-item.open .service-chevron { transform: rotate(90deg); }
    .service-body {
      display: none;
      padding: 12px 16px;
    }
    .service-item.open .service-body { display: block; }

    /* 특성(Characteristic) 카드 */
    .char-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .char-item {
      background: #fff;
      border: 1px solid var(--gray-200);
      border-radius: 6px;
      padding: 10px 12px;
      font-size: 0.82rem;
    }
    .char-name {
      font-weight: 700;
      color: var(--gray-800);
      word-break: break-all;
    }
    .char-uuid {
      color: var(--gray-600);
      font-size: 0.75rem;
      margin-bottom: 6px;
      word-break: break-all;
    }
    .char-props {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-bottom: 8px;
    }
    .prop-tag {
      font-size: 0.7rem;
      padding: 2px 7px;
      border-radius: 10px;
      font-weight: 700;
    }
    .prop-read    { background: #dbeafe; color: #1d4ed8; }
    .prop-write   { background: #fce7f3; color: #9d174d; }
    .prop-notify  { background: #dcfce7; color: #166534; }
    .prop-indicate{ background: #fef3c7; color: #92400e; }
    .prop-other   { background: var(--gray-200); color: var(--gray-800); }

    .char-value-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .char-value {
      flex: 1;
      min-width: 0;
      background: var(--gray-100);
      border-radius: 4px;
      padding: 4px 8px;
      font-family: 'Courier New', monospace;
      font-size: 0.78rem;
      word-break: break-all;
      color: var(--gray-800);
    }
    .char-actions {
      display: flex;
      gap: 4px;
      flex-shrink: 0;
    }
    .btn-sm {
      padding: 4px 10px;
      font-size: 0.75rem;
      border-radius: 4px;
      border: none;
      cursor: pointer;
      font-family: inherit;
      font-weight: 700;
    }
    .btn-read      { background: var(--navy); color: #fff; }
    .btn-read:hover{ background: var(--navy-dark); }
    .btn-sub       { background: #166534; color: #fff; }
    .btn-sub:hover { background: #14532d; }
    .btn-unsub     { background: var(--gray-600); color: #fff; }
    .btn-unsub:hover{ background: var(--gray-800); }
    .btn-sm:disabled { opacity: 0.4; cursor: not-allowed; }

    /* 알림 로그 */
    .notify-log {
      margin-top: 6px;
      font-size: 0.72rem;
      color: #166534;
      max-height: 80px;
      overflow-y: auto;
      background: #f0fdf4;
      border-radius: 4px;
      padding: 4px 8px;
    }

    /* 섹션 구분 제목 */
    .ble-section-title {
      font-size: 1rem;
      font-weight: 700;
      color: var(--navy);
      margin: 0 0 12px 0;
      padding-bottom: 8px;
      border-bottom: 2px solid var(--gray-200);
    }

    /* 지원 안내 박스 */
    .support-notice {
      background: #fff3cd;
      border-left: 4px solid #f0ad4e;
      border-radius: 0 6px 6px 0;
      padding: 12px 16px;
      font-size: 0.85rem;
      margin-bottom: 20px;
      display: none;
    }
    .support-notice.show { display: block; }

    /* 찾은 기기 리스트 */
    .found-device-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .found-device-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 14px;
      border: 1px solid var(--gray-200);
      border-radius: 8px;
      background: #fff;
    }
    .found-device-item.selected {
      border-color: var(--navy);
      background: #f0f4ff;
    }
    .found-device-info strong {
      display: block;
      font-size: 0.88rem;
      color: var(--navy);
    }
    .found-device-info span {
      font-size: 0.72rem;
      color: var(--gray-500);
      font-family: 'Courier New', monospace;
    }
    .btn-device-select {
      flex-shrink: 0;
      padding: 5px 14px;
      font-size: 0.82rem;
      border-radius: 6px;
      border: 1px solid var(--navy);
      background: #fff;
      color: var(--navy);
      cursor: pointer;
      font-family: inherit;
      font-weight: 700;
      white-space: nowrap;
    }
    .btn-device-select:hover { background: var(--navy); color: #fff; }
    .found-device-item.selected .btn-device-select { background: var(--navy); color: #fff; }

    /* 서비스 UUID 버튼 그룹 */
    .svc-btn-group {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .svc-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 8px 12px;
      border: 1px solid var(--gray-300);
      border-radius: 8px;
      background: #fff;
      cursor: pointer;
      font-family: inherit;
      transition: border-color 0.15s, background 0.15s;
    }
    .svc-btn:hover {
      border-color: var(--navy);
      background: var(--gray-100);
    }
    .svc-btn.active {
      border-color: var(--navy);
      background: var(--navy);
    }
    .svc-uuid {
      font-family: 'Courier New', monospace;
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--navy);
    }
    .svc-name {
      font-size: 0.72rem;
      color: var(--gray-600);
    }
    .svc-btn.active .svc-uuid,
    .svc-btn.active .svc-name {
      color: #fff;
    }

    /* 선택된 기기 카드 */
    .selected-device-card {
      background: #f0fdf4;
      border: 1px solid #86efac;
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 16px;
    }

    /* 타임라인 로그 */
    .timeline-log {
      display: none;
      margin-top: 20px;
    }
    .timeline-log.show { display: block; }
    .timeline-log-title {
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--gray-600);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin: 0 0 10px 0;
    }
    .tl-list {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .tl-item {
      position: relative;
      padding: 0 0 10px 22px;
      font-size: 0.82rem;
      line-height: 1.4;
      color: var(--gray-800);
    }
    .tl-item:last-child { padding-bottom: 0; }
    .tl-item::before {
      content: '';
      position: absolute;
      left: 4px;
      top: 14px;
      bottom: 0;
      width: 2px;
      background: var(--gray-200);
    }
    .tl-item:last-child::before { display: none; }
    .tl-item::after {
      content: '';
      position: absolute;
      left: 0;
      top: 4px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--gray-300);
      border: 2px solid #fff;
      box-sizing: border-box;
    }
    .tl-item.tl-info::after    { background: var(--navy); }
    .tl-item.tl-success::after { background: #16a34a; }
    .tl-item.tl-error::after   { background: #b91c1c; }
    .tl-item.tl-warning::after { background: #f59e0b; }
    .tl-item.tl-pending::after { background: #f59e0b; animation: blink 1s infinite; }
    .tl-time {
      font-family: 'Courier New', monospace;
      font-size: 0.72rem;
      color: var(--gray-500);
      margin-right: 6px;
    }

    /* 섹션 공통 */
    .tool-section {
      padding: 48px 20px;
    }
    .section-inner {
      max-width: 760px;
      margin: 0 auto;
    }
    .section-title {
      font-size: 1.4rem;
      font-weight: 900;
      color: var(--navy);
      margin-bottom: 8px;
      text-align: center;
    }
    .section-sub {
      text-align: center;
      color: var(--gray-600);
      margin-bottom: 32px;
      font-size: 0.95rem;
    }