@import url("../HC-A130SW/style-local.css");

.header-camera-main.smcl2-product {
    width: min(320px, 31vw);
    max-height: 245px;
    object-fit: contain;
}

.series-models {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 0;
}

.series-models span {
    padding: 7px 11px;
    border: 1px solid #cfe2e5;
    border-radius: 999px;
    color: #245060;
    background: #f5fbfb;
    font-size: 0.84rem;
    font-weight: 700;
}

.series-spec-table,
.command-table { overflow-x: auto; }

.series-spec-table table {
    min-width: 900px;
    table-layout: fixed;
}

.series-spec-table th:first-child,
.series-spec-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 180px;
    background: #f4f8fa;
    color: #17394a;
    font-weight: 800;
}

.series-spec-table thead th:first-child {
    z-index: 3;
    background: #17394a;
    color: #fff;
}

.spectral-grid,
.image-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.image-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spectral-grid .pdf-figure, .image-grid .pdf-figure { margin: 0; }
.spectral-grid img, .image-grid img { width: 100%; max-height: 360px; object-fit: contain; }
.support-matrix th, .support-matrix td, .command-table th, .command-table td { font-size: 0.82rem; }
.command-table table { min-width: 980px; }
.command-table td:nth-child(2), .command-table td:nth-child(3) { white-space: nowrap; }

.uart-command-browser {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.uart-command-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border: 1px solid #d7e7eb;
    border-radius: 14px;
    background: #f7fbfc;
}

.uart-command-toolbar p {
    margin: 0;
    color: #486271;
    font-size: 0.9rem;
}

.uart-command-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.uart-command-action {
    border: 1px solid #bdd7dc;
    border-radius: 999px;
    padding: 7px 12px;
    color: #174250;
    background: #fff;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
}

.uart-command-action:hover,
.uart-command-action:focus-visible {
    border-color: var(--brand-teal);
    color: var(--brand-teal-dark);
}

.uart-command-group {
    overflow: hidden;
    border: 1px solid #d7e7eb;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(18, 53, 67, 0.06);
}

.uart-command-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 17px;
    color: #17394a;
    font-weight: 900;
    cursor: pointer;
    list-style: none;
}

.uart-command-group summary::-webkit-details-marker { display: none; }

.uart-command-summary-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.uart-command-summary-main::before {
    content: "＋";
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    background: var(--brand-teal);
    font-size: 0.82rem;
}

.uart-command-group[open] .uart-command-summary-main::before { content: "－"; }

.uart-group-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uart-group-count,
.uart-group-toggle {
    flex: 0 0 auto;
    color: #647c86;
    font-size: 0.78rem;
    font-weight: 800;
}

.uart-group-toggle {
    padding: 5px 9px;
    border-radius: 999px;
    background: #edf7f8;
    color: #1e6671;
}

.uart-group-toggle::after { content: "보기"; }
.uart-command-group[open] .uart-group-toggle::after { content: "숨기기"; }
.manual-en .uart-group-toggle::after { content: "View"; }
.manual-en .uart-command-group[open] .uart-group-toggle::after { content: "Hide"; }

.uart-command-group .table-container {
    margin: 0;
    border-top: 1px solid #dce9ec;
    border-radius: 0;
}

.uart-command-group table { min-width: 860px; }
.uart-command-group th,
.uart-command-group td { font-size: 0.82rem; }
.uart-command-group td:nth-child(2) { white-space: nowrap; }

.manual-note {
    margin: 16px 0;
    padding: 14px 16px;
    border-left: 4px solid var(--brand-teal);
    border-radius: 10px;
    background: var(--brand-teal-soft);
}

.contact-card a { color: #0d7f7a; }

@media (max-width: 900px) {
    .spectral-grid, .image-grid, .image-grid.cols-3 { grid-template-columns: 1fr; }
    .header-camera-main.smcl2-product { width: min(280px, 72vw); }
    .uart-command-group summary { align-items: flex-start; }
    .uart-command-summary-main { flex: 1 1 100%; }
}