*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --blue: #1a4fa0;
    --blue-dark: #0f2e6b;
    --blue-light: #2060c8;
    --red: #e22b2b;
    --text-dark: #1c2d47;
    --text-mid: #555;
    --text-light: #888;
    --border: #dde4f0;
    --bg-light: #EAF4F4;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Noto Sans KR', sans-serif;
    color: #333;
    line-height: 1.6;
    overflow-x: hidden;
    max-width: 1920px;
    margin: 0 auto;
    user-select: none;
}

input,
textarea,
[contenteditable] {
    user-select: text;
}

a {
    text-decoration: none;
    color: inherit;
}

button,
a,
label {
    user-select: none;
}

ul {
    list-style: none;
}

img {
    display: block;
    max-width: 100%;
}

/* ===========================
   HEADER
=========================== */
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s;
}

.header-inner {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 40px;
    height: 76px;
    display: flex;
    align-items: center;
    gap: 0;
    box-sizing: border-box;
}

.h-logo {
    flex: 0 0 344px;
    width: 344px;
    display: flex;
    align-items: center;
}

.h-logo img {
    width: auto;
}

nav {
    height: 76px;
}

.gnb {
    display: flex;
    align-items: center;
    height: 76px;
    width: 1493px;
    flex: 0 0 1493px;
    justify-content: space-between;
}

.gnb>li {
    position: relative;
    height: 76px;
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
}

.gnb>li>a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 76px;
    width: 100%;
    padding: 0 8px;
    font-size: 15px;
    color: #252E1B;
    white-space: nowrap;
    position: relative;
    transition: color 0.2s;
    text-align: center;
}

.gnb>li>a .arr {
    height: auto;
    display: inline-block;
    transition: transform 0.2s;
}

.gnb>li:hover>a .arr {
    transform: rotate(180deg);
}

.gnb>li>a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--blue);
    transform: scaleX(0);
    transition: transform 0.25s;
}

.gnb>li:hover>a,
.gnb>li.active>a {
    color: var(--blue);
}

.gnb>li:hover>a::after,
.gnb>li.active>a::after {
    transform: scaleX(1);
}

/* Contact Us special style */
.gnb>li.gnb-contact>a {
    background: var(--prd-red);
    color: #fff;
    border-radius: 4px;
    padding: 8px 18px;
    height: auto;
    margin-left: 8px;
    font-size: 13px;
}

.gnb>li.gnb-contact>a::after {
    display: none;
}

.gnb>li.gnb-contact>a:hover {
    background: #b51c1c;
    color: #fff;
}

/* ===========================
   DROPDOWN SUBMENU
=========================== */
.gnb>li>.sub-menu {
    display: none;
    position: absolute;
    top: 76px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #e2e8f4;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
    padding: 18px 16px;
    min-width: 100%;
    width: max-content;
    white-space: nowrap;
    z-index: 999;
}

.gnb>li:hover>.sub-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    animation: subFadeIn 0.18s ease;
}

@keyframes subFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.sub-menu a {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #444;
    padding: 9px 14px;
    border-radius: 6px;
    background: #f4f7fd;
    transition: background 0.18s, color 0.18s;
    text-align: center;
}

.sub-menu a:hover {
    background: var(--blue);
    color: #fff;
}

/* Contact Us 는 서브메뉴 없음 */
.gnb>li.gnb-contact>.sub-menu {
    display: none !important;
}

/* Mobile hamburger */
.h-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    margin-left: auto;
    padding: 8px;
}

.h-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: #333;
    border-radius: 2px;
    transition: all 0.3s;
}

/* ===========================
   HERO
=========================== */
#hero {
    margin-top: 76px;
    padding: 0;
}

.swiper-hero {
    width: 100%;
    aspect-ratio: 1905 / 919;
}

.swiper-hero .swiper-slide {
    position: relative;
    overflow: hidden;
}

.swiper-hero .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
            rgba(10, 25, 60, 0.68) 0%,
            rgba(10, 25, 60, 0.42) 50%,
            rgba(10, 25, 60, 0.08) 100%);
}

.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1280px;
    padding: 0 40px;
}

.hero-sub {
    font-size: 80px;
    font-weight: 500;
    color: #97CFFF;
    margin-bottom: 12px;
    letter-spacing: -3.7px;
}

.hero-title {
    font-size: 96px;
    font-weight: 900;
    color: #F6FFF8;
    line-height: 1;
    letter-spacing: -3.7px;
    margin-bottom: 199px;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);
}

.btn-red {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--red);
    color: #fff;
    font-size: 16px;
    padding: 14px 32px;
    border-radius: 8px;

    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.btn-red:hover {
    background: #c41e1e;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(226, 43, 43, 0.55);
}

.slide-redBtn {
    border-radius: 60px;
    box-shadow: 0 2px 1px rgba(255, 255, 255, 0.6);
}

.btn-arrow-icon {
    display: inline-block;
    width: auto;
    height: 18px;
    max-width: none;
    flex-shrink: 0;
}

.btn-red .arr-right {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    font-size: 12px;
}

/* Swiper UI */
.swiper-hero .swiper-pagination {
    bottom: 28px;
}

.swiper-hero .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.45);
    opacity: 1;
    transition: all 0.3s;
}

.swiper-hero .swiper-pagination-bullet-active {
    background: #fff;
    width: 26px;
    border-radius: 4px;
}

.swiper-hero .swiper-button-next,
.swiper-hero .swiper-button-prev {
    color: rgba(255, 255, 255, 0.75);
    width: 44px;
    height: 44px;
}

.swiper-hero .swiper-button-next::after,
.swiper-hero .swiper-button-prev::after {
    font-size: 18px;
}

@media (max-width: 586px) {
    .swiper-hero .swiper-slide:nth-child(1) img {
        object-fit: cover;
        object-position: 67% !important;
    }

    .swiper-hero .swiper-slide:nth-child(2) img {
        object-fit: cover;
        object-position: 30% !important;
    }

    .swiper-hero .swiper-slide:nth-child(3) img {
        object-fit: cover;
        object-position: right top !important;
    }
}

/* ===========================
   SECTION COMMON
=========================== */
section {
    padding: 120px 0;
}

.main .inner {
    max-width: 1300px !important;
}

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

.sec-head {
    text-align: center;
    margin-bottom: 60px;
}

.sec-tag {
    display: inline-block;
    background: #EEF1F6;
    color: #2A2D34;
    font-size: 20px;
    font-weight: 800;
    padding: 4px 14px;
    border-radius: 2px;
}

.sec-title {
    font-size: 56px;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.8px;
    line-height: 1.3;
    margin-top: 20px;
}

/* ===========================
   SERVICE: 비상벨 시스템 개요
=========================== */
#service {
    background: #fff;
}

.service-cards {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
}

.service-card {
    text-align: center;
    flex: 1;
    position: relative;
}

/* 카드 2를 아래로 내려 높낮이 차이 생성 */
.service-card:nth-child(2) {
    margin-top: 54px;
}

.service-card:nth-child(4) {
    margin-top: 54px;
}


.service-card-arrow {
    position: absolute;
    top: 10px;
    right: -22%;
    width: 44%;
    height: auto;
    z-index: 2;
    pointer-events: none;
}

/* 카드 2 화살표: 하단 위치, 위아래 반전 */
.service-card:nth-child(2) .service-card-arrow {
    top: auto;
    bottom: -10px;
    transform: scaleY(-1);
}

.service-card:last-child .service-card-arrow {
    display: none;
}

.service-circle {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    margin: 0 12.5px 22px;
    overflow: hidden;
    transition: border-color 0.3s, transform 0.3s;
}

.service-card:nth-child(2) .service-circle {
    width: 300px;
    height: 300px;
    border-color: var(--blue);
    margin-bottom: 10px;
}

.service-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-card:hover .service-circle {
    border-color: var(--blue);
    transform: translateY(-4px);
}

.service-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.service-card p {
    font-size: 15px;
    color: var(--text-light);
    line-height: 1.75;
}

/* ===========================
   PRODUCTS: 비상벨 시스템 제품
=========================== */
#products {
    background: rgba(234, 244, 244, 0.4);
}

#products .sec-tag {
    background: #005aa8;
    color: #fff;
}

.swiper-products {
    width: 100%;
    padding: 8px 4px 12px;
    overflow: hidden;
}

.swiper-products .swiper-slide {
    height: auto;
}

.swiper-products .swiper-button-next,
.swiper-products .swiper-button-prev {
    color: var(--blue);
    width: 44px;
    height: 44px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transition: background 0.2s, box-shadow 0.2s;
}

.swiper-products .swiper-button-next:hover,
.swiper-products .swiper-button-prev:hover {
    background: var(--blue);
    color: #fff;
    box-shadow: 0 6px 20px rgba(26, 79, 160, 0.3);
}

.swiper-products .swiper-button-next::after,
.swiper-products .swiper-button-prev::after {
    font-size: 16px;
    font-weight: 700;
}

.swiper-products-pagination {
    position: static;
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 24px;
}

.swiper-products-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #c5cfe0;
    opacity: 1;
    transition: all 0.3s;
}

.swiper-products-pagination .swiper-pagination-bullet-active {
    background: var(--blue);
    width: 24px;
    border-radius: 4px;
}

.product-card {
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    height: 480px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
    transition: transform 0.3s, box-shadow 0.3s;
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(26, 79, 160, 0.18);
}

.product-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.product-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s;
}

.product-card:hover .product-card-img img {
    transform: scale(1);
}

/* 상하단 그라디언트 오버레이 */
.product-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(10, 25, 60, 0.65) 0%,
            rgba(10, 25, 60, 0.0) 35%,
            rgba(10, 25, 60, 0.0) 50%,
            rgba(10, 25, 60, 0.80) 100%);
    border-radius: 14px;
}

.product-num-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 5px 14px;
    background: var(--red);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    letter-spacing: 0.5px;
    line-height: 3;
}

.product-card-body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 24px 28px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-card-body h3 {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0;
}

.product-card-body p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
}

/* ===========================
   BLUE BAR: IoT / Robust / Real-time / Total Care
=========================== */
#bluebar {
    background: linear-gradient(90deg, #0b2151 0%, var(--blue) 60%, #1a66c0 100%);
    padding: 60px 0;
}

.bluebar-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    gap: 20px;
}

.bluebar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 32px 28px;
    background: #EAF4F4;
    border-radius: 50px;
    border-right: none;
    transition: transform 0.25s, box-shadow 0.25s;
}

.bluebar-item:last-child {
    border-right: none;
}

.bluebar-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.bluebar-icon-wrap {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    background: #1446A0;
    flex-shrink: 0;
}

.bluebar-icon-wrap svg {
    width: 34px;
    height: 34px;
    fill: #fff;
    stroke: none;
}

.bluebar-item:nth-child(2) .bluebar-icon-wrap svg,
.bluebar-item:nth-child(4) .bluebar-icon-wrap svg {
    fill: #1a3a6b;
    stroke: none;
}

.bluebar-icon-wrap img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.bluebar-item h4 {
    font-size: 22.4px;
    font-weight: 800;
    color: #435058;
    margin-bottom: 12px;
    letter-spacing: -0.3px;
}

.bluebar-item p {
    font-size: 16px;
    color: #7A7A7A;
    line-height: 1.7;
    text-align: justify;
}

/* ===========================
   MERIT: 비상벨 시스템 특장점
=========================== */
#merit {
    background: #fff;
}

.merit-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 50px;
    min-height: 160px;
}

.merit-head-left {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}

.merit-head-left .sec-tag-icon {
    margin: 0 0 8px;
}

.merit-head-left .sec-tag {
    display: inline-block;
    text-align: center;
    margin-bottom: 10px;
}


.btn-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--red);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 4px;
    white-space: nowrap;
    transition: background 0.2s;
    width: 162px;
}

.btn-more:hover {
    background: #c41e1e;
}

.btn-more .arr-right {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-size: 11px;
}

/* Merit tabs */
.merit-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 32px;
    border-bottom: 2px solid #e8ecf5;
}

.merit-tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    cursor: pointer;
    background: transparent;
    margin-bottom: -2px;
    transition: all 0.25s;
    font-family: 'Noto Sans KR', sans-serif;
}

.merit-tab-btn img {
    width: 21px;
    height: 21px;
    object-fit: contain;
    filter: brightness(0);
    transition: filter 0.25s;
}


.merit-tab-btn span {
    font-size: 15px;
    font-weight: 600;
    color: #aaa;
    white-space: nowrap;
}

.merit-tab-btn.active {
    background: transparent;
    border-bottom-color: var(--red);
}

.merit-tab-btn.active span {
    color: var(--text-dark);
}

/* hover/active 시 빨간색 filter */
.merit-tab-btn.active img,
.merit-tab-btn:not(.active):hover img {
    filter: brightness(0) saturate(100%) invert(18%) sepia(97%) saturate(2000%) hue-rotate(348deg) brightness(105%) contrast(95%);
}

.merit-tab-btn:not(.active):hover {
    background: transparent;
    border-bottom-color: var(--red);
}

/* Merit layout */
.merit-layout {
    position: relative;
}

/* Merit panel */
.merit-panel {
    display: none;
}

.merit-panel.active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: stretch;
}

.merit-img {
    border-radius: 10px;
    overflow: hidden;
    min-height: 400px;
}

.merit-img img {
    width: 100%;
    height: 100%;
}

.merit-feat-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.merit-feat-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border: none;
    background: #EAF4F4;
    border-radius: 50px;
}

.merit-feat-item:first-child {
    border-top: none;
}

.merit-feat-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: #1a3564;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    line-height: 32px;
}

.merit-feat-txt {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.merit-feat-txt strong {
    display: inline;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0;
}

.merit-feat-txt span {
    font-size: 16px;
    color: var(--text-light);
    display: inline;
}

/* ===========================
   COMMAND CENTER + CONTACT
=========================== */
/* ===========================
   COMMAND / CONTACT SECTION
=========================== */
#command {
    position: relative;
    background: url('../images/main/Section.jpg') center / 100% 100% no-repeat;
    aspect-ratio: 1920 / 934;
    margin-bottom: 10px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* 고객문의 폼 카드 - Section.jpg 배경 위 position:absolute */
.contact-card {
    position: absolute;
    top: 56%;
    left: 18.5%;
    transform: translateY(-50%);
    width: 25.5%;
    padding: 30px 32px;
}

.contact-card-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.5px;
    color: var(--blue);
    border: 1.5px solid var(--blue);
    padding: 3px 10px;
    border-radius: 2px;
    margin-bottom: 10px;
}

.contact-card-title {
    font-size: clamp(28px, 2.9vw, 56px);
    font-weight: 900;
    color: #F7FAFA;
    letter-spacing: -0.8px;
    margin-top: 21px;
    margin-bottom: 20px;
}

.contact-card-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-card-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

.contact-card-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.contact-card-field label {
    font-size: 16px;
    font-weight: 200;
    color: #F7FAFA;
}

.contact-card-field input,
.contact-card-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #dde4f0;
    border-radius: 4px;
    padding: 9px 11px;
    font-size: 13px;
    color: #333;
    font-family: 'Noto Sans KR', sans-serif;
    outline: none;
    background: #fafbfd;
    transition: border-color 0.2s, background 0.2s;
}

.contact-card-field input:focus,
.contact-card-field textarea:focus {
    border-color: var(--blue);
    background: #fff;
}

.contact-card-field textarea {
    resize: none;
    min-height: 120px;
}

.contact-card-submit {
    background: #2A2D34;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Noto Sans KR', sans-serif;
    transition: background 0.2s;
    margin-top: 2px;
}

.contact-card-submit:hover {
    background: var(--blue-dark);
}

/* ===========================
   PAGE HERO (서브페이지 공통)
=========================== */
#page-hero {
    margin-top: 76px;
    position: relative;
    height: 260px;
    background: linear-gradient(105deg, #0b2151 0%, var(--blue) 60%, #1a66c0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.page-hero-overlay {
    position: absolute;
    inset: 0;
    background: url('assets/images/main/swiper-img01.jpg') center / cover no-repeat;
    opacity: 0.18;
}

.page-hero-content {
    position: relative;
    text-align: center;
}

.page-hero-sub {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 10px;
    text-transform: uppercase;
}

.page-hero-title {
    font-size: 42px;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.5px;
}

/* ===========================
   BREADCRUMB
=========================== */
#breadcrumb {
    background: #f4f6fb;
    border-bottom: 1px solid #e8ecf5;
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 0;
    font-size: 13px;
    color: #888;
}

.breadcrumb-list li::after {
    content: '›';
    margin-left: 8px;
    color: #ccc;
}

.breadcrumb-list li:last-child::after {
    display: none;
}

.breadcrumb-list a {
    color: #888;
    transition: color 0.2s;
}

.breadcrumb-list a:hover {
    color: var(--blue);
}

.breadcrumb-list li.active {
    color: var(--blue);
    font-weight: 600;
}

/* ===========================
   INTRO: 인사말
=========================== */
#intro {
    background: #fff;
    position: relative;
    overflow: hidden;
}

#intro::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 500px;
    background: linear-gradient(to top, #f4f7fd 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

#intro .inner,
#intro .intro-wrap,
#intro .intro-values {
    position: relative;
    z-index: 1;
}

.intro-wrap {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 80px;
}

.intro-img-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

.intro-logo {
    height: 50px;
    width: auto;
}

.intro-img-box {
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(145deg, #e8f0fb 0%, #d0dff5 100%);
    position: relative;
}

.intro-img-deco {
    position: absolute;
    inset: 0;
    background: url('../images/main/about-img02.png') center / cover no-repeat;
    opacity: 1;
}

.intro-tag-wrap {
    margin-bottom: 16px;
}

.intro-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.4;
    letter-spacing: -0.5px;
    margin-bottom: 24px;
}

.intro-title strong {
    color: var(--blue);
}

.intro-divider {
    width: 48px;
    height: 3px;
    background: var(--blue);
    border-radius: 2px;
    margin-bottom: 28px;
}

.intro-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: justify;
}

.intro-body p {
    font-size: 16px;
    color: #555;
    line-height: 1.9;
}

.intro-body strong {
    color: var(--text-dark);
    font-weight: 700;
}

.intro-sign {
    margin-top: 12px;
    font-size: 15px;
    color: var(--text-dark);
    font-weight: 500;
}

.intro-sign strong {
    font-size: 18px;
    font-weight: 900;
    color: var(--blue);
}

/* 핵심 가치 */
.intro-values {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding-top: 60px;
    border-top: 1px solid #e8ecf5;
}

.intro-value-item {
    text-align: center;
    padding: 36px 20px;
    background: #fff;
    border-radius: 16px;
    transition: transform 0.25s, box-shadow 0.25s;
}

.intro-value-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(26, 79, 160, 0.12);
}

.intro-value-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    color: var(--blue);
}

.intro-value-icon svg,
.intro-value-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.intro-value-item h4 {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.intro-value-item p {
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.7;
}

/* intro 반응형 */
@media (max-width: 900px) {
    .intro-wrap {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .intro-img-area {
        display: none;
    }

    .intro-values {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .page-hero-title {
        font-size: 30px;
    }

    .intro-title {
        font-size: 26px;
    }

    .intro-values {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ===========================
   PRODUCT PAGES
=========================== */

/* ── Product Overview ── */
#product-overview {
    background: #fff;
    padding: 80px 0;
}

.product-overview-wrap {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 80px;
    align-items: flex-start;
}

.product-overview-img {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.product-overview-img-main {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;
    background: #f0f4fb;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-overview-img-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 24px;
}

.product-overview-img-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.prod-badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.prod-badge-blue {
    background: #e8f0fb;
    color: var(--blue);
}

.prod-badge-red {
    background: #fdeaea;
    color: #d63030;
}

.prod-badge-gray {
    background: #f0f0f0;
    color: #666;
}

.product-overview-info {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.prod-category {
    font-size: 13px;
    font-weight: 600;
    color: var(--blue);
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.prod-title {
    font-size: 36px;
    font-weight: 900;
    color: var(--text-dark);
    letter-spacing: -0.5px;
    line-height: 1.3;
    margin-bottom: 20px;
}

.prod-desc {
    font-size: 15px;
    color: #555;
    line-height: 1.9;
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid #e8ecf5;
}

.prod-desc strong {
    color: var(--text-dark);
    font-weight: 700;
}

.prod-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 36px;
}

.prod-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #444;
    line-height: 1.6;
}

.prod-feat-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--blue);
}

.prod-feat-icon svg {
    width: 100%;
    height: 100%;
}

.prod-cta-wrap {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.prod-btn-spec,
.prod-btn-inquiry {
    display: inline-flex;
    align-items: center;
    padding: 13px 28px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    cursor: pointer;
}

.prod-btn-spec {
    background: #fff;
    color: var(--blue);
    border: 2px solid var(--blue);
}

.prod-btn-spec:hover {
    background: var(--blue);
    color: #fff;
}

.prod-btn-inquiry {
    background: var(--blue);
    color: #fff;
    border: 2px solid var(--blue);
}

.prod-btn-inquiry:hover {
    background: var(--blue-dark);
    border-color: var(--blue-dark);
}

/* ── Product Detail Features ── */
#product-detail {
    background: #f8fafd;
    padding: 80px 0;
}

.prod-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}

.prod-detail-item {
    background: #fff;
    border-radius: 16px;
    padding: 36px 28px;
    border: 1px solid #e8ecf5;
    transition: transform 0.25s, box-shadow 0.25s;
}

.prod-detail-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(26, 79, 160, 0.1);
}

.prod-detail-num {
    font-size: 40px;
    font-weight: 900;
    color: #e8effa;
    line-height: 1;
    margin-bottom: 16px;
    letter-spacing: -1px;
}

.prod-detail-item h4 {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.prod-detail-item p {
    font-size: 13.5px;
    color: #666;
    line-height: 1.8;
}

/* ── Product Spec ── */
#product-spec {
    background: #fff;
    padding: 80px 0;
}

.prod-spec-wrap {
    margin-top: 48px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e0e8f5;
}

.prod-spec-table {
    width: 100%;
    border-collapse: collapse;
}

.prod-spec-table th,
.prod-spec-table td {
    padding: 16px 24px;
    font-size: 14px;
    text-align: left;
    border-bottom: 1px solid #e8ecf5;
    line-height: 1.7;
}

.prod-spec-table tr:last-child th,
.prod-spec-table tr:last-child td {
    border-bottom: none;
}

.prod-spec-table th {
    background: #f4f7fc;
    font-weight: 700;
    color: var(--text-dark);
    white-space: nowrap;
}

.prod-spec-table td {
    color: #555;
}

.prod-spec-table tr:nth-child(even) td {
    background: #fafbfe;
}

/* ── Related Products ── */
#product-related {
    background: #f4f7fc;
    padding: 80px 0;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}

.related-card {
    display: block;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e8ecf5;
    transition: transform 0.25s, box-shadow 0.25s;
}

.related-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(26, 79, 160, 0.12);
}

.related-card-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #f0f4fb;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.related-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 24px;
    transition: transform 0.3s;
}

.related-card:hover .related-card-img img {
    transform: scale(1.04);
}

.related-card-info {
    padding: 20px 22px;
}

.related-card-cate {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--blue);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.related-card-info h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
}

/* ── Product Pages Responsive ── */
@media (max-width: 900px) {
    .product-overview-wrap {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .prod-title {
        font-size: 28px;
    }

    .prod-detail-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {

    #product-overview,
    #product-detail,
    #product-spec,
    #product-related {
        padding: 60px 0;
    }

    .prod-title {
        font-size: 24px;
    }

    .prod-detail-grid {
        grid-template-columns: 1fr;
    }

    .related-grid {
        grid-template-columns: 1fr;
    }

    .prod-spec-table th,
    .prod-spec-table td {
        padding: 12px 16px;
        font-size: 13px;
    }

    .prod-cta-wrap {
        flex-direction: column;
    }

    .prod-btn-spec,
    .prod-btn-inquiry {
        width: 100%;
        justify-content: center;
    }
}

/* ===========================
   PRODUCT-01 PAGE
=========================== */

/* Hero override */
.page-hero--p01 .page-hero-overlay {
    background-image: url('../images/product/banner-prd01.png');
    opacity: 0.45;
}

/* ── 공통 tagline ── */
.p1-tagline {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--red);
    letter-spacing: 2px;
    margin-bottom: 12px;
}

/* ── 01 제품 소개 ── */
#p1-intro {
    background: #fff;
    padding: 80px 0;
}

.p1i-wrap {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 80px;
    align-items: center;
}

.p1i-img-col {}

.p1i-img-frame {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(135deg, #fde8e8 0%, #ffd4d4 100%);
    padding: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
}

.p1i-img-frame::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 160px;
    height: 160px;
    background: rgba(255, 180, 180, 0.3);
    border-radius: 50%;
}

.p1i-img-frame img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.15));
}

.p1i-info-col {
    display: flex;
    flex-direction: column;
}

.p1i-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    color: var(--red);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.p1i-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--text-dark);
    letter-spacing: -1px;
    line-height: 1.2;
    margin-bottom: 36px;
    padding-bottom: 28px;
    border-bottom: 2px solid #e8ecf5;
}

.p1i-points {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.p1i-points li {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid #f0f3fa;
}

.p1i-points li:last-child {
    border-bottom: none;
}

.p1i-pt-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e8f0fb;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue);
}

.p1i-pt-icon svg {
    width: 22px;
    height: 22px;
}

.p1i-pt-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.p1i-pt-text strong {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-dark);
}

.p1i-pt-text p {
    font-size: 13.5px;
    color: #666;
    line-height: 1.8;
}

/* ── 02 시스템 기능 ── */
#p1-features {
    background: #f4f6fb;
    padding: 80px 0;
}

.p1f-head {
    text-align: center;
    margin-bottom: 52px;
}

.p1f-title {
    font-size: 38px;
    font-weight: 900;
    color: var(--text-dark);
    letter-spacing: -1px;
    margin-bottom: 16px;
}

.p1f-desc {
    font-size: 14.5px;
    color: #666;
    line-height: 1.9;
}

.p1f-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}


.p1f-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e4eaf5;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s, box-shadow 0.25s;
}

.p1f-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(26, 79, 160, 0.12);
}

.p1f-card-img {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f0f4fb;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p1f-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.p1f-card:hover .p1f-card-img img {
    transform: scale(1.04);
}

.p1f-card-img--volte {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.p1f-volte {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.volte-text {
    font-size: 38px;
    font-weight: 900;
    letter-spacing: -1px;
    color: #fff;
}

.volte-text em {
    font-style: normal;
    color: #e02020;
}

.volte-sub {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.p1f-card-body {
    padding: 22px 22px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.p1f-card-body h4 {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1.4;
}

.p1f-card-body p {
    font-size: 13px;
    color: #666;
    line-height: 1.8;
    flex: 1;
}

.p1f-more {
    display: flex;
    align-self: flex-end;
    margin-top: 8px;
}

.p1f-more img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

/* ── 03 시스템 구성 ── */
#p1-system {
    background: #edf2fa;
    padding: 80px 0;
}

.p1s-head {
    text-align: center;
    margin-bottom: 40px;
}

.p1s-title {
    font-size: 38px;
    font-weight: 900;
    color: var(--text-dark);
    letter-spacing: -1px;
}

.p1s-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    border-bottom: 2px solid #d8e2f0;
    margin-bottom: 48px;
    flex-wrap: wrap;
}

.p1s-tab {
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 600;
    color: #888;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.p1s-tab:hover {
    color: var(--blue);
}

.p1s-tab.active {
    color: var(--blue);
    border-bottom-color: var(--blue);
}

.p1s-panel {
    display: none;
}

.p1s-panel.active {
    display: block;
}

/* 시스템 다이어그램 */
.p1s-diagram {
    background: #fff;
    border-radius: 20px;
    padding: 52px 60px;
    border: 1px solid #dce6f4;
}

.p1sd-top-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.p1sd-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.p1sd-node-img {
    width: 100px;
    height: 100px;
    border-radius: 16px;
    background: #f0f4fb;
    border: 2px solid #d8e4f5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 8px;
}

.p1sd-node-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.p1sd-node-img--server {
    padding: 10px;
}

.p1sd-node-img--server svg {
    width: 100%;
    height: 100%;
}

.p1sd-node-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark);
    text-align: center;
}

.p1sd-conn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 80px;
}

.p1sd-conn-arrow svg {
    width: 100%;
    height: 20px;
}

.p1sd-conn span {
    font-size: 11px;
    color: #888;
    text-align: center;
    line-height: 1.5;
    white-space: nowrap;
}

/* 하단 배터리 row */
.p1sd-bottom-row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px dashed #d0daea;
    gap: 32px;
}

.p1sd-batt-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.p1sd-batt-label {
    font-size: 12px;
    color: #666;
    line-height: 1.7;
}

.p1sd-batt-arrows {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.p1sd-batt-arrows svg {
    width: 18px;
    height: 28px;
}

.p1sd-node--battery {}

.p1sd-node-img--battery {
    padding: 6px;
}

.p1sd-node-img--battery svg {
    width: 100%;
    height: 100%;
}

/* 탭 텍스트 콘텐츠 (탭 2~4) */
.p1s-tab-content {
    background: #fff;
    border-radius: 20px;
    padding: 60px;
    border: 1px solid #dce6f4;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    max-width: 560px;
    margin: 0 auto;
}

.p1s-tc-icon {
    width: 80px;
    height: 80px;
    color: var(--blue);
}

.p1s-tc-icon svg {
    width: 100%;
    height: 100%;
}

.p1s-tab-content h4 {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-dark);
}

.p1s-tab-content p {
    font-size: 14.5px;
    color: #666;
    line-height: 1.9;
}

/* ── 04 설치 사례 ── */
#p1-cases {
    background: #fff;
    padding: 80px 0;
}

.p1c-head {
    text-align: center;
    margin-bottom: 52px;
}

.p1c-title {
    font-size: 38px;
    font-weight: 900;
    color: var(--text-dark);
    letter-spacing: -1px;
}

.p1c-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.p1c-col {}

.p1c-col-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}

.p1c-col-header h3 {
    font-size: 22px;
    font-weight: 900;
    color: var(--text-dark);
}

.p1c-col-sub {
    font-size: 14px;
    color: #888;
    font-weight: 500;
}

.p1c-col-desc {
    font-size: 13px;
    color: #888;
    line-height: 1.7;
    margin-bottom: 20px;
}

.p1c-img-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.p1c-img-item {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #f0f4fb;
}

.p1c-img-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s;
}

.p1c-img-item:hover img {
    transform: scale(1.04);
}

.p1c-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.p1c-badge--blue {
    background: var(--blue);
    color: #fff;
}

.p1c-badge--red {
    background: var(--red);
    color: #fff;
}

/* ── PRODUCT-01 반응형 ── */
@media (max-width: 1024px) {
    .p1f-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .p1sd-top-row {
        gap: 10px;
    }

    .p1sd-node-img {
        width: 80px;
        height: 80px;
    }

    .p1s-diagram {
        padding: 36px 32px;
    }
}

@media (max-width: 900px) {
    .p1i-wrap {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .p1i-img-frame {
        max-width: 380px;
        margin: 0 auto;
    }

    .p1i-title {
        font-size: 32px;
    }

    .p1c-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .p1s-diagram {
        overflow-x: auto;
    }

    .p1sd-top-row {
        min-width: 560px;
    }
}

@media (max-width: 600px) {

    #p1-intro,
    #p1-features,
    #p1-system,
    #p1-cases {
        padding: 60px 0;
    }

    .p1f-title,
    .p1s-title,
    .p1c-title {
        font-size: 28px;
    }

    .p1f-grid {
        grid-template-columns: 1fr;
    }

    .p1i-title {
        font-size: 26px;
    }

    .p1s-tabs {
        flex-direction: column;
        align-items: stretch;
        border-bottom: none;
        gap: 4px;
    }

    .p1s-tab {
        border: 1px solid #dce6f4;
        border-radius: 8px;
        margin-bottom: 0;
        background: #fff;
    }

    .p1s-tab.active {
        background: var(--blue);
        color: #fff;
        border-color: var(--blue);
    }

    .p1s-tab-content {
        padding: 36px 24px;
    }

    .p1c-img-grid {
        grid-template-columns: 1fr;
    }
}

/* ===========================
   FOOTER
=========================== */
#footer {
    background: #0b1528;
    padding: 40px 0 24px;
}

.footer-top {
    display: flex;
    align-items: center;
    gap: 60px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 20px;
}

.footer-logo-area {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-logo-area img {
    height: 48px;
    width: auto;
    filter: brightness(0) invert(1);
}

.footer-sns-wrap {
    display: flex;
    gap: 8px;
}

.sns-link {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.55);
    transition: border-color 0.2s, color 0.2s;
}

.sns-link:hover {
    border-color: var(--blue);
    color: #fff;
}

.sns-instagram {
    border: none;
    background: transparent;
    width: auto;
    height: auto;
    padding: 0;
}

.sns-instagram:hover {
    border: none;
    opacity: 0.82;
}

.sns-instagram img {
    display: block;
    border-radius: 8px;
    width: 34px;
    height: 34px;
    filter: none;
}

.sns-link svg {
    width: 14px;
    height: 14px;
}

.footer-info-list {
    display: flex;
    flex: 1;
    justify-content: space-between;
}

.footer-info-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.footer-info-item img {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    object-fit: contain;
}

.footer-info-item span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
    white-space: nowrap;
}

.footer-bottom {
    display: flex;
    align-items: center;
}

.footer-copy {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
}

/* ===========================
   SCROLL TOP
=========================== */
.scroll-top {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
    background: var(--blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, background 0.2s, transform 0.2s;
    box-shadow: 0 4px 16px rgba(26, 79, 160, 0.4);
    z-index: 500;
}

.scroll-top.show {
    opacity: 1;
    pointer-events: auto;
}

.scroll-top:hover {
    background: var(--blue-dark);
    transform: translateY(-2px);
}

.scroll-top svg {
    width: 20px;
    height: 20px;
    fill: #fff;
}

/* ===========================
   RESPONSIVE — 헤더 햄버거 전환 (GNB 최소 필요 너비 ~1917px)
=========================== */
@media (max-width: 1024px) {
    .gnb {
        display: none;
        width: 100%;
    }

    .h-hamburger {
        display: flex;
    }

    .h-logo {
        flex: 0 0 auto;
        width: auto;
    }

    /* li를 세로 방향으로 — a 위, sub-menu 아래 */
    .gnb>li {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        height: auto;
    }

    /* 모바일 서브메뉴: max-height 트랜지션으로 위→아래 슬라이드 */
    .gnb>li>.sub-menu {
        display: flex !important;
        flex-direction: column;
        gap: 2px;
        position: static !important;
        transform: none !important;
        left: auto !important;
        top: auto !important;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0 0 0 16px;
        width: 100%;
        background: #f8f9fc;
        animation: none !important;
        max-height: 0;
        overflow: hidden;
        pointer-events: none;
        transition: max-height 0.4s ease, padding 0.4s ease;
    }

    /* hover 드롭다운 완전 비활성화 */
    .gnb>li:hover>.sub-menu {
        max-height: 0 !important;
        padding: 0 0 0 16px !important;
        pointer-events: none !important;
        animation: none !important;
        transform: none !important;
    }

    /* 모바일에서 hover 효과 비활성화 — .open 클래스로만 제어 */
    .gnb>li:hover>a {
        color: #252E1B;
    }

    .gnb>li:hover>a::after {
        transform: scaleX(0);
    }

    .gnb>li:hover>a .arr {
        transform: rotate(0deg);
    }

    /* .open 상태 — 화살표 위, 파란색, border-bottom */
    .gnb>li.open>a {
        color: var(--blue);
    }

    .gnb>li.open>a::after {
        transform: scaleX(1);
    }

    .gnb>li.open>a .arr {
        transform: rotate(180deg);
    }

    /* 클릭으로 .open 클래스 추가 시 열림 */
    .gnb>li.open>.sub-menu {
        max-height: 400px !important;
        padding: 4px 0 4px 16px !important;
        pointer-events: auto !important;
        animation: none !important;
        transform: none !important;
    }

    .sub-menu a {
        background: transparent;
        text-align: left;
        padding: 8px 16px;
        border-radius: 0;
        font-size: 13px;
        color: #555;
    }

    .sub-menu a:hover {
        background: transparent;
        color: var(--blue);
    }
}

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 1100px) {
    .service-cards {
        flex-wrap: wrap;
        gap: 24px;
    }

    .service-card {
        flex: 0 0 calc(50% - 12px);
    }

    .service-card-arrow {
        display: none;
    }

    .service-card:nth-child(2) {
        margin-top: 0;
    }

    .service-card:nth-child(2) .service-circle {
        width: 200px;
        height: 200px;
    }

    .merit-panel.active {
        grid-template-columns: 1fr;
    }

    .merit-img {
        min-height: 280px;
    }

    /* contact-card 1100px — still absolute, percentage sizing keeps alignment */
    .contact-card-title {
        font-size: 40px;
    }
}

@media (max-width: 900px) {
    .hero-content {
        padding: 0 40px;
    }

    .hero-title {
        font-size: 28px;
        margin-bottom: 24px;
        letter-spacing: unset;
    }

    .hero-sub {
        font-size: 13px;
        margin-bottom: 6px;
        letter-spacing: unset;
    }

    .hero-content .btn-red {
        font-size: 12px;
        padding: 8px 18px;
    }

    .hero-content .btn-red .arr-right {
        width: 16px;
        height: 16px;
        font-size: 10px;
    }

    .hero-content .btn-arrow-icon {
        height: 12px;
    }

    .sec-title {
        font-size: 26px;
    }

    .swiper-products .swiper-button-next,
    .swiper-products .swiper-button-prev {
        display: none;
    }

    .bluebar-inner {
        flex-wrap: wrap;
    }

    .bluebar-item {
        flex: 0 0 calc(50% - 10px);
    }

    .footer-top {
        flex-wrap: wrap;
    }

    .footer-info-list {
        flex-wrap: wrap;
        gap: 20px;
    }

    .footer-info-item span {
        white-space: normal;
    }

    .merit-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .merit-tab-btn {
        flex: 0 0 auto;
        min-width: 100px;
    }

    .merit-tab-btn span {
        font-size: 13px;
    }

    .merit-feat-list {
        padding-left: 0;
    }

}

@media (max-width: 1800px) {
    #command {
        aspect-ratio: unset;
        padding: 80px 40px;
        background-image: url('../images/main/command-bg.jpg');
    }

    .contact-card {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        max-width: 460px;
        margin: 0 auto;
        background: #005AA8;
        border: 20px solid #fff;
        border-radius: 10px;
    }

    .contact-card-title {
        font-size: 36px;
    }
}

@media (max-width: 600px) {
    .inner {
        padding: 0 20px;
    }

    .header-inner {
        padding: 0 20px;
    }

    .merit-feat-txt span {
        font-size: 13px;
    }

    section {
        padding: 60px 0;
    }

    .hero-content {
        padding: 0 40px;
    }

    .hero-title {
        font-size: 20px;
        margin-bottom: 14px;
        letter-spacing: unset;
    }

    .hero-sub {
        font-size: 11px;
        margin-bottom: 4px;
        letter-spacing: unset;
    }

    .hero-content .btn-red {
        font-size: 10px;
        padding: 6px 14px;
        gap: 6px;
    }

    .hero-content .btn-red .arr-right {
        width: 14px;
        height: 14px;
        font-size: 9px;
    }

    .hero-content .btn-arrow-icon {
        height: 10px;
    }

    .bluebar-inner {
        flex-direction: column;
    }

    .bluebar-item {
        flex: none;
        width: 100%;
    }


    .service-cards {
        flex-wrap: wrap;
        gap: 16px;
    }

    .service-card {
        flex: 0 0 calc(50% - 8px);
    }

    .service-circle {
        width: 160px !important;
        height: 160px !important;
    }

    /* contact-card 600px */
    #command {
        padding: 60px 20px;
    }

    .contact-card {
        max-width: 100%;
        padding: 20px 16px;
    }

    .contact-card-title {
        font-size: 28px;
    }

    .contact-card-row {
        grid-template-columns: 1fr;
    }

    .footer-info-list {
        flex-direction: column;
        align-items: flex-start;
    }

    .merit-head {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        min-height: auto;
    }

    .merit-head-left {
        position: static;
        transform: none;
        white-space: normal;
        text-align: center;
    }
}


/* ================================================================
   PRODUCT-01 NEW DESIGN (prd- prefix)
   Figma: 실내형_자가진단 (node 1647:64191)
   ================================================================ */

:root {
    --prd-red: #d72323;
    --prd-dark: #1a1a1a;
    --prd-mid: #404040;
    --prd-light: #eef1f6;
}

/* ── 공통 섹션 레이블 ── */
.prd-sec-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.prd-sec-label-line {
    display: inline-block;
    width: 30px;
    height: 4px;
    background: var(--prd-red);
    border-radius: 2px;
    flex-shrink: 0;
}

.prd-sec-label span:last-child {
    font-size: 18px;
    font-weight: 600;
    color: var(--prd-red);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ── HERO ── */
#prd-hero {
    position: relative;
    width: 100%;
    padding: 76px 0 0;
}

.prd-hero-bg {
    position: relative;
    width: 100%;
    height: 400px;
    background: url('../images/product/hero-prd01.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.prd-hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .7) 41%, rgba(255, 255, 255, .03) 84%);
}

.prd-hero-content {
    position: relative;
    text-align: left;
    padding-left: 100px;
}

.prd-hero-content h1 {
    font-size: 64px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -1px;
    text-transform: uppercase;
    margin: 0 0 20px;
}

.prd-hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    color: rgba(255, 255, 255, .65);
}

.prd-hero-breadcrumb a {
    color: rgba(255, 255, 255, .65);
}

.prd-hero-breadcrumb a:hover {
    color: #fff;
}

/* ── 소개 INTRO ── */
#prd-intro {
    background: #fff;
    padding: 80px 0;
}

.prd-intro-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

.prd-intro-img-col img {
    width: 100%;
    max-width: 570px;
    height: auto;
    display: block;
}

.prd-tag-label {
    font-size: 22px;
    font-weight: 600;
    color: var(--prd-red);
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}

.prd-intro-title {
    font-size: 46px;
    font-weight: 700;
    color: #333;
    margin-bottom: 40px;
    padding-bottom: 30px;
    position: relative;
    letter-spacing: -0.5px;
}

.prd-intro-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70px;
    height: 4px;
    background: var(--prd-red);
}

.prd-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.prd-feature-list li {
    display: flex;
    align-items: center;
    gap: 18px;
}

.prd-fi-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prd-fi-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.prd-fi-text h4 {
    font-size: 22px;
    font-weight: 700;
    color: #1f2226;
    margin-bottom: 6px;
}

.prd-fi-text p {
    font-size: 15px;
    color: var(--prd-mid);
    line-height: 1.65;
    margin: 0;
}

/* ── 시스템 기능 ── */

#system-hero {
    position: relative;
    width: 100%;
    padding: 76px 0 0;
}

.system-hero-bg {
    position: relative;
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: url(../images/product/hero-system.jpg) center / cover no-repeat;
}

#prd-func {
    background: #fff;
    padding: 80px 0;
}

.prd-func-head {
    max-width: 560px;
    margin-bottom: 48px;
}

.prd-func-title {
    font-size: 46px;
    font-weight: 700;
    color: var(--prd-dark);
    margin-bottom: 18px;
    letter-spacing: -0.5px;
}

.prd-func-desc {
    font-size: 15px;
    color: var(--prd-mid);
    line-height: 1.7;
    margin: 0;
}

.prd-func-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.prd-func-main {
    position: relative;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .15);
    display: flex;
    flex-direction: column;
}

.prd-func-main img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
}

.prd-func-main-label {
    /* padding: 14px 20px 14px 50px; */
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--prd-mid);
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prd-func-main-line {
    position: absolute;
    left: 30%;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 2px;
    background: var(--prd-dark);
    display: block;
}

.prd-func-card {
    background: #fff;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .15);
    position: relative;
    height: 377px;
    transition: transform .25s;
    will-change: transform;
    backface-visibility: hidden;
}

.prd-func-card:hover {
    transform: translateY(-4px);
}

.prd-func-card-img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 183px;
    overflow: hidden;
    will-change: transform;
    /* 하단을 하드 클립이 아닌 mask로 페이드 → hover 트랜지션 중 생기던 1px seam 제거 */
    -webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent 96%);
    mask-image: linear-gradient(to bottom, #000 66%, transparent 96%);
}

.prd-func-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}

.prd-func-grid>.prd-func-card:nth-child(2) .prd-func-card-img img {
    object-position: 50% 25%;
}

.prd-func-grid>.prd-func-card:nth-child(3) .prd-func-card-img img {
    object-position: 50% 50%;
}

/* 카드3 (양방향 비상통화) - 피그마 top:-37.89%, height:192.92% → Y=41% */
.prd-func-grid>.prd-func-card:nth-child(4) .prd-func-card-img img {
    object-position: 50% 41%;
}

/* 카드4 (배터리) - 피그마 이미지 height 269%, 줌인 필요 */
.prd-func-grid>.prd-func-card:nth-child(5) .prd-func-card-img img {
    object-position: 50% 50%;
    transform: scale(1.4);
}

.prd-func-grid>.prd-func-card:nth-child(5):hover .prd-func-card-img img {
    transform: scale(1.87);
}

/* 카드5 (무선 비상 버튼) - 제품이 이미지 중앙에 작게 위치하여 충분한 줌 필요 */
.prd-func-grid>.prd-func-card:last-child .prd-func-card-img img {
    object-position: 50% 50%;
    transform: scale(2.1);
}

.prd-func-grid>.prd-func-card:last-child:hover .prd-func-card-img img {
    transform: scale(2.5);
}

.prd-func-card:hover .prd-func-card-img img {
    transform: scale(1.04);
}

.prd-func-card-body {
    position: absolute;
    top: 183px;
    left: 30px;
    right: 30px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 194px;
}

.prd-func-card-body h3 {
    font-size: 21px;
    font-weight: 700;
    color: #2c2c2c;
    line-height: 1.3;
    margin: 0;
    min-height: 54px;
    letter-spacing: -0.03em;
}

.prd-func-card-body p {
    font-size: 14px;
    color: var(--prd-mid);
    line-height: 1.5;
    margin: 10px 0 0;
    height: 72px;
    overflow: hidden;
}

.prd-func-accent {
    position: absolute;
    top: 159px;
    left: 0;
    display: block;
    width: 20px;
    height: 2px;
    background: var(--prd-red);
    display: none;
}

/* 카드5 (무선 비상 버튼) - 1줄 타이틀 여백 활용해 p를 위로 올림 */
.prd-func-grid>.prd-func-card:last-child .prd-func-card-body h3 {
    min-height: 54px;
}

.prd-func-grid>.prd-func-card:last-child .prd-func-card-body p {
    height: auto;
    margin-top: 6px;
}

.prd-func-grid>.prd-func-card:last-child .prd-func-accent {
    position: absolute;
    top: 159px;
    margin-top: 0;
}

/* ── 시스템구성 ── */
#prd-system,
#system-intro02-section {
    background: var(--prd-light);
    padding: 80px 0;
}

.prd-sys-header {
    text-align: center;
    margin-bottom: 48px;
}

.prd-sys-tagline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.prd-sys-tagline-bar {
    display: inline-block;
    width: 30px;
    height: 4px;
    background: #3b3c3d;
    border-radius: 2px;
}

.prd-sys-tagline span:last-child {
    font-size: 18px;
    font-weight: 600;
    color: #000;
    letter-spacing: .5px;
}

.prd-sys-title {
    font-size: 46px;
    font-weight: 700;
    color: #000;
    letter-spacing: -0.5px;
    margin: 0;
}

.prd-sys-tabs-wrap {
    display: flex;
    border-bottom: 1px solid #ddd;
    margin-bottom: 48px;
    overflow-x: auto;
}

.prd-sys-tab {
    flex: 1;
    min-width: max-content;
    padding: 24px 20px 22px;
    background: none;
    border: none;
    border-bottom: 3px solid #bfbfc0;
    font-size: 28px;
    font-weight: 500;
    color: #78797a;
    cursor: pointer;
    transition: color .2s, border-color .2s;
    text-align: center;
    white-space: nowrap;
}

.prd-sys-tab.active {
    border-bottom-color: #0d1536;
    color: #0b122d;
    font-weight: 700;
}

.prd-sys-tab:hover:not(.active) {
    color: #444;
}

.prd-sys-content img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .1);
}

/* ── 설치사례 ── */
#prd-cases {
    background: #F5F5F5;
    padding: 80px 0;
}

.prd-cases-header {
    text-align: center;
    margin-bottom: 98px;
}

.prd-cases-header .prd-sec-label {
    justify-content: center;
}

.prd-cases-title {
    font-size: 46px;
    font-weight: 700;
    color: var(--prd-dark);
    letter-spacing: -0.5px;
    margin: 0;
}

.prd-cases-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.prd-case-col {
    border-right: 1px solid #7b7b7b;
}

.prd-case-col:last-child {
    border-right: none;
}

.prd-case-col-head {
    padding: 83.5px 50px 37.5px;
    text-align: center;
    background: #fff;
}

.prd-case-col-head h3 {
    font-size: 32px;
    font-weight: 700;
    color: #17181a;
    margin-bottom: 25px;
    line-height: 1.25;
}

.prd-case-col-head p {
    font-size: 20px;
    font-weight: 300;
    color: #444;
    line-height: 1.5;
    margin: 0;
    min-height: 2lh;
}

.prd-case-card-wrap {
    display: flex;
    flex-direction: column;
    gap: 66px;
    padding: 0 16px;
    background-color: #fff;
}

.prd-case-card {
    position: relative;
    height: auto;
    aspect-ratio: 952 / 683;
    /* 피그마 컬럼(952.5px) : 이미지 높이(683px) */
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 30px;
}

.prd-case-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .40);
}

.prd-case-tag {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #c73f3d;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    width: 86px;
    height: 44px;
    border-radius: 13px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prd-case-render {
    position: absolute;
    object-fit: contain;
    object-position: center;
    z-index: 1;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .4));
}

/* 외부/메인 카드 — 피그마 컬럼(952.5px) 기준: 렌더 663×532px, left=191px */
.prd-case-card-wrap .prd-case-card:first-child .prd-case-render {
    left: 4%;
    top: 5%;
    height: 95%;
}

/* 내부/무선 카드 — 피그마 컬럼(952.5px) 기준: 렌더 716×537px, left=139px */
.prd-case-card-wrap .prd-case-card:last-child .prd-case-render {
    left: 14.6%;
    /* (50+89)/952.5 */
    top: 7%;
    /* 127.5/683 */
    width: 75.2%;
    /* 716/952.5 */
    height: 78.6%;
    /* 537/683 */
}

.prd-case-card-wrap .prd-case-card:last-child .prd-case-render.prd-case2 {
    top: 0;
}

.prd-case-right .prd-case-card-wrap .prd-case-card:first-child .prd-case-render {
    left: 4%;
    height: 70%;
    top: 15%;
}

.prd-case-labels {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.prd-case-labels span {
    background: #fff;
    border: 3px solid #c73f3d;
    color: #c73f3d;
    font-size: 20px;
    font-weight: 700;
    height: 50px;
    padding: 0 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 공중화장실 외부 카드 — 연결선 개별 조정 */
.prd-ext-line,
.prd-ext-dot {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    background: #fff;
}

/* 좌측 세로선 */
.prd-ext-line--left-v {
    left: 9%;
    top: 44%;
    width: 1px;
    height: 27%;
}

/* 우측 세로선 */
.prd-ext-line--right-v {
    left: 60%;
    top: 35%;
    width: 1px;
    height: 34%;
}

/* 하단 가로선 */
.prd-ext-line--bottom-h {
    left: 9%;
    top: 71%;
    width: 8%;
    height: 1px;
}

/* 상단 가로선 */
.prd-ext-line--top-h {
    left: 16%;
    top: 35%;
    width: 44%;
    height: 1px;
}

.prd-ext-dot {
    background: #000;
    box-shadow: 0 0 0 1px #fff;
    width: max(5px, 0.74%);
    height: auto;
    aspect-ratio: 1;
}

/* 좌측 연결 도트 */
.prd-ext-dot--left {
    left: 17%;
    /* ← 좌우 위치 */
    top: 71%;
    /* ← 상하 위치 */
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* 우측 연결 도트 */
.prd-ext-dot--right {
    left: 60%;
    top: 68.6%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* 경광등 Set2 — 도트(547,505) / 세로(x=551,y=505→532) / 가로(551→664,y=531) */
.prd-ext-dot--light-2 {
    left: 56%;
    top: 70%;
    /* ← 상하 위치 (505.5/683) */
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.prd-ext-line--light-2-v {
    left: 56%;
    top: 70.4%;
    width: 1px;
    height: 7.6%;
}

.prd-ext-line--light-2-h {
    left: 56%;
    top: 77.8%;
    width: 26%;
    height: 1px;
}

/* 경광등 Set3 — 도트(297,505) / 세로(x=301,y=505→570) / 가로(300→674,y=570) */
.prd-ext-dot--light-3 {
    left: 25%;
    top: 70.1%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.prd-ext-line--light-3-v {
    left: 25%;
    top: 70.5%;
    width: 1px;
    height: 12.6%;
}

.prd-ext-line--light-3-h {
    left: 25%;
    top: 83.1%;
    width: 55%;
    height: 1px;
}

/* ── 공중화장실 내부 카드 callout ── */
/* 공통 속성은 .prd-int-callout 공통 룰에서 처리 */

/* 자가진단비상벨 — circle: (50+67)/952.5=12.3%, 198.5/683=29.1% */
.prd-int-callout--bell {
    left: 12.3%;
    top: 24%;
}

/* 무선비상버튼 — circle: (50+660)/952.5=74.5%, 118.5/683=17.3% */
.prd-int-callout--wireless {
    left: 74.5%;
    top: 17.3%;
}

/* 내부 안내판 — circle: (50+669)/952.5=75.5%, 371.5/683=54.4% */
.prd-int-callout--sign {
    left: 75.5%;
    top: 54.4%;
}

/* 자가진단비상벨 연결선 — Group55 세로선 (x=0.5, y=0→68) */
.prd-int-line--bell-v {
    left: 20.0%;
    top: 49%;
    width: 1px;
    height: 1.6%;
}

/* 자가진단비상벨 연결선 — Group55 가로선 (x=0→186, y=68.5) */
.prd-int-line--bell-h {
    left: 20%;
    top: 50.5%;
    width: 21%;
    height: 1px;
}

/* 자가진단비상벨 연결 도트 (cx=185.53, cy=67.53) */
.prd-int-dot--bell {
    /* left: 41%;
    top: 62%; */
    left: 41.5%;
    top: 50.5%;
}

/* 무선비상버튼 연결 */
.prd-int-dot,
.prd-int-line {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    background: #fff;
}

.prd-int-dot {
    width: max(5px, 0.74%);
    height: auto;
    aspect-ratio: 1;
    background: #000;
    box-shadow: 0 0 0 1px #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.prd-int-dot--wireless {
    left: 59.2%;
    top: 27.5%;
}

/* (50+519)/952.5, 191.5/683 */
.prd-int-line--wireless-h {
    left: 59.2%;
    top: 22%;
    width: 18%;
    height: 1px;
}

/* x=(50+522)/952.5, y=151.5/683, w=150/952.5 */
.prd-int-line--wireless-v {
    left: 59.2%;
    top: 22%;
    width: 1px;
    height: 4.8%;
}

/* y=131/683, h=41/683 */

/* 내부 안내판 연결 */
.prd-int-dot--sign {
    left: 65%;
    top: 59.2%;
}

/* (50+579)/952.5, 431.5/683 */
.prd-int-line--sign-h {
    left: 65.4%;
    top: 59.2%;
    width: 14%;
    height: 1px;
}

/* ── 민원실 메인 카드 callout ── */
/* 공통 속성은 .prd-main-callout 공통 룰에서 처리 */

.prd-main-dot,
.prd-main-line {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    background: #fff;
}

.prd-main-dot {
    background: #000;
    box-shadow: 0 0 0 1px #fff;
    width: max(5px, 0.74%);
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* 자가진단비상벨 — circle: (14+50)/952.5=6.7%, 188.5/683=27.6% */
.prd-main-callout--bell {
    left: 6.7%;
    top: 20%;
}

/* 자가진단비상벨 연결선 — Group55 세로(x=0.5,y=0→85) / 가로(x=0→373,y=85.5) / 도트(cx=376.5) */
.prd-main-line--bell-v {
    left: 14.4%;
    top: 45%;
    width: 1px;
    height: 10%;
}

.prd-main-line--bell-h {
    left: 14.4%;
    top: 55%;
    width: 28%;
    height: 1px;
}

.prd-main-dot--bell {
    left: 42%;
    top: 55%;
}

/* 경광등 — circle: (664+50)/952.5=74.9%, 458.5/683=67.1% */
.prd-main-callout--light {
    left: 74.9%;
    top: 55%;
}

/* 경광등 연결선 — 도트(484,335.5) / 가로(488→738,y=338.5) / 세로(x=738,y=339.5→458.5) */
.prd-main-dot--light {
    left: 46.5%;
    top: 38%;
}

.prd-main-line--light-h {
    left: 47%;
    top: 38%;
    width: 35.5%;
    height: 1px;
}

.prd-main-line--light-v {
    left: 82.4%;
    top: 38%;
    width: 1px;
    height: 17.4%;
}

/* ── 민원실 무선 카드 callout ── */
/* 무선 비상 버튼 — circle: (675+50)/952.5=76.1%, 486.5/683=71.2% */
.prd-mwsn-callout {
    left: 76.1%;
    /* ← 좌우 위치 */
    top: 60%;
    /* ← 상하 위치 */
}

.prd-mwsn-dot {
    position: absolute;
    left: 58%;
    top: 65%;
    width: max(5px, 0.74%);
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #000;
    box-shadow: 0 0 0 1px #fff;
    z-index: 2;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.prd-mwsn-line {
    position: absolute;
    left: 58.3%;
    top: 65%;
    width: 19%;
    height: 1px;
    background: #fff;
    z-index: 2;
    pointer-events: none;
}

/* 모든 callout 컨테이너 공통 — width: 15.3% (146px/952.5px 피그마 기준) */
.prd-case-callout,
.prd-int-callout,
.prd-main-callout,
.prd-mwsn-callout,
.prd-p02-callout,
.uc-gal-callout {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 15.3%;
    /* 카드 가로 기준 비율 */
    container-type: inline-size;
    /* cqi 단위 활성화 — 자식 요소가 이 너비 기준으로 스케일 */
}

.prd-callout--sign {
    left: 2%;
    top: 20%;
}

.prd-callout--light {
    left: 80%;
    top: 73%;
}

.prd-callout-circle {
    width: 100%;
    /* 부모 callout 컨테이너(15.3%) 기준으로 채움 */
    aspect-ratio: 1;
    position: relative;
}

.prd-callout-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.prd-callout-product {
    position: absolute;
    left: 18%;
    top: 18%;
    width: 64%;
    height: 64%;
    object-fit: contain;
}

.prd-callout-label {
    background: #fff;
    border: max(1px, 2cqi) solid #c73f3d;
    /* 피그마 3px/146px≈2% */
    color: #c73f3d;
    font-size: max(9px, 16cqi);
    /* 피그마 24px/146px≈16% */
    font-weight: 700;
    height: auto;
    padding: 3cqi 11cqi;
    /* 피그마 4px/146≈3%, 16px/146≈11% */
    border-radius: 7cqi;
    /* 피그마 10px/146px≈7% */
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    margin-top: -17cqi;
    /* 피그마: 라벨이 circle 하단 25px/146px≈17% 겹침 */
    position: relative;
    z-index: 2;
}

/* ── prd- 반응형 ── */
@media (max-width: 1100px) {
    .prd-func-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .prd-func-main {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .prd-hero-content h1 {
        font-size: 44px;
    }

    .prd-hero-content {
        padding-left: 40px;
    }

    .prd-intro-wrap {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .prd-intro-title {
        font-size: 36px;
    }

    .prd-func-grid {
        grid-template-columns: 1fr;
    }

    .prd-func-main {
        grid-column: auto;
    }

    .prd-cases-grid {
        grid-template-columns: 1fr;
    }

    .prd-case-col {
        border-right: none;
        border-bottom: 1px solid #7b7b7b;
    }

    .prd-sys-tabs-wrap {
        flex-wrap: wrap;
    }

    .prd-sys-tab {
        flex: unset;
        width: 50%;
    }
}

@media (max-width: 600px) {
    .prd-hero-content h1 {
        font-size: 30px;
    }

    .prd-hero-content {
        padding-left: 20px;
    }

    .prd-func-title,
    .prd-sys-title,
    .prd-cases-title,
    .prd-intro-title {
        font-size: 28px;
    }

    .prd-sys-tab {
        width: 100%;
    }

    /* prd-case-card height 제거 — aspect-ratio: 952/683 이 반응형 처리 */

    .prd-case-col-head {
        padding-left: 15px;
        padding-right: 15px;
    }

    .prd-case-col-head p {
        font-size: 16px;
    }

    .prd-cases-header {
        text-align: center;
    }

    .prd-cases-header .prd-sec-label {
        justify-content: center;
    }
}

/* ========================================
   PRODUCT-02 (천정형 비상벨) 전용 스타일
   ======================================== */

/* ── Hero ── */
.prd-hero-bg--02 {
    background-image: url('../images/product/hero-prd02.jpg');
}

.prd-hero-bg--awards {
    background-image: url('../images/awards/awards-hero-bg.jpg');
}

.prd-hero-bg--intro {
    background-image: url('../images/intro/intro-here-bg.png');
}

.prd-hero-bg--faq {
    background-image: url('../images/faq/intro-here-bg.png');
}

.prd-hero-bg--news {
    background-image: url('../images/faq/intro-here-bg.png');
}

.prd-hero-bg--data {
    background-image: url('../images/faq/intro-here-bg.png');
}

.prd-hero-bg--inquiry {
    background-image: url('../images/faq/intro-here-bg.png');
}

/* ── product-02 dot / line 공통 ── */
.prd-p02-dot,
.prd-p02-line {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.prd-p02-dot {
    width: max(5px, 0.74%);
    height: auto;
    aspect-ratio: 1;
    background: #000;
    box-shadow: 0 0 0 1px #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.prd-p02-line {
    background: #fff;
    height: 1px;
}

/* ── product-02 callout / dot / line 카드별 위치 ── */

/* 공중화장실 내부 */
.prd-case-card--int .prd-p02-callout--bell {
    left: 3%;
    top: 15%;
}

.prd-case-card--int .prd-p02-callout--wireless {
    left: 72%;
    top: 50%;
}

.prd-case-card--int .prd-p02-dot--bell {
    left: 51%;
    top: 23%;
}

.prd-case-card--int .prd-p02-line--bell {
    left: 18%;
    top: 23%;
    width: 32.6%;
}

.prd-case-card--int .prd-p02-dot--wireless {
    left: 69%;
    top: 60%;
}

.prd-case-card--int .prd-p02-line--wireless {
    left: 69.3%;
    top: 60%;
    width: 3%;
}

/* 지자체 민원실 */
.prd-case-card--main .prd-p02-callout--bell {
    left: 3%;
    top: 20%;
}

.prd-case-card--main .prd-p02-callout--wireless {
    left: 72%;
    top: 60%;
}

.prd-case-card--main .prd-p02-dot--bell {
    left: 50%;
    top: 31%;
}

.prd-case-card--main .prd-p02-line--bell {
    left: 18%;
    top: 31%;
    width: 31.5%;
}

.prd-case-card--main .prd-p02-dot--wireless {
    left: 58.3%;
    top: 71.5%;
}

.prd-case-card--main .prd-p02-line--wireless {
    left: 58.7%;
    top: 71.5%;
    width: 15%;
}

/* 병원 응급실 */
.prd-case-card--ext .prd-p02-callout--bell {
    left: 3%;
    top: 15%;
}

.prd-case-card--ext .prd-p02-callout--wireless {
    left: 72%;
    top: 60%;
}

.prd-case-card--ext .prd-p02-dot--bell {
    left: 47%;
    top: 26%;
}

.prd-case-card--ext .prd-p02-line--bell {
    left: 17.6%;
    top: 26%;
    width: 29%;
}

.prd-case-card--ext .prd-p02-dot--wireless {
    left: 56.5%;
    top: 70%;
}

.prd-case-card--ext .prd-p02-line--wireless {
    left: 57%;
    top: 70%;
    width: 16%;
}

/* 병원 진료실 */
.prd-case-card--mwsn .prd-p02-callout--bell {
    left: 3%;
    top: 20%;
}

.prd-case-card--mwsn .prd-p02-callout--wireless {
    left: 72%;
    top: 60%;
}

.prd-case-card--mwsn .prd-p02-dot--bell {
    left: 50%;
    top: 31%;
}

.prd-case-card--mwsn .prd-p02-line--bell {
    left: 18%;
    top: 31%;
    width: 31.7%;
}

.prd-case-card--mwsn .prd-p02-dot--wireless {
    left: 54.5%;
    top: 69%;
}

.prd-case-card--mwsn .prd-p02-line--wireless {
    left: 55%;
    top: 69%;
    width: 18%;
}

/* ========================================
   PRODUCT-01 설치사례 전용 오버라이드
   (.prd01-cases 스코프 안에서만 적용됨)
   ======================================== */

/* 여기에 product-01 전용 CSS를 작성하세요. 예시:
.prd01-cases .prd-cases-title { font-size: 40px; }
.prd01-cases .prd-cases-header { margin-bottom: 60px; }
.prd01-cases .prd-case-col-head h3 { font-size: 28px; }
*/


/* ── product-02 render 이미지 위치 (prd-cases-grid--02 내부만 적용) ── */
.prd-cases-grid--02 .prd-case-card .prd-case-render {
    left: 8%;
    top: 0;
    width: 92%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}

/* ========================================
   PRODUCT-03 (실외형 비상벨) 전용 스타일
   ======================================== */

/* ── Hero ── */
.prd-hero-bg--03 {
    background-image: url('../images/product/hero-prd03.jpg');
    background-position: center top;
}

/* ── CPTED 소개 섹션 ── */
#prd03-cpted {
    background: #fff;
    padding: 80px 0 60px;
}

.prd03-cpted-intro {
    display: flex;
    gap: 60px;
    align-items: flex-start;
    margin-bottom: 40px;
}

.prd03-cpted-title-col {
    flex: 0 0 340px;
}

.prd03-cpted-title {
    font-size: 28px;
    font-weight: 700;
    color: #17181a;
    margin-bottom: 10px;
    line-height: 1.3;
}

.prd03-cpted-title-cpted {
    color: #c73f3d;
}

.prd03-cpted-subtitle {
    font-size: 14px;
    line-height: 1.6;
    font-style: normal;
}

.prd03-cpted-sub-1 {
    color: #ceb5b7;
}

.prd03-cpted-sub-2 {
    color: #b5d6d6;
}

.prd03-cpted-desc-col {
    flex: 1;
    font-size: 16px;
    color: #444;
    line-height: 1.8;
    text-align: right;
}

.prd03-cpted-img-wrap {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 50px;
}

.prd03-cpted-img-wrap img {
    width: 100%;
    height: auto;
    display: block;
}

.prd03-6factors-title {
    font-size: 24px;
    font-weight: 700;
    color: #17181a;
    margin-bottom: 30px;
}

.prd03-6factors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 40px;
}

/* 피그마: pt-[72px] pl-[40px], flex-col, gap-[24px] */
/* 자연 높이 = 72(pt) + 50(icon) + 24(gap) + 26(text lh) + 17(text pb) = 189px */
.prd03-factor-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 72px 0 0 0;
    height: 189px;
    position: relative;
}

/* 피그마: ::before는 pt-72px 래퍼 안 링크 요소의 left-0, top-0
   → 셀 기준 y=72에서 시작, 100px 높이 */
.prd03-factor-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 72px;
    width: 1px;
    height: 100px;
    background: #c2c2c2;
}

/* 첫 번째 열(3열 기준)은 왼쪽 구분선 제거 */
.prd03-factor-item:nth-child(3n+1)::before {
    content: none;
}

/* 피그마: size-[50px] */
.prd03-factor-item img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    flex-shrink: 0;
}

.prd03-factor-item .bi {
    font-size: 50px;
    color: transparent;
    -webkit-text-stroke: 1.2px #E48A8A;
    flex-shrink: 0;
    line-height: 1;
}

/* 피그마: text-[20px] leading-[26px] tracking-[-0.6px] color-#1e1e2d pb-[17px] */
.prd03-factor-item span {
    font-size: 20px;
    font-weight: 700;
    color: #1e1e2d;
    letter-spacing: -0.6px;
    line-height: 26px;
    padding-bottom: 17px;
    text-align: center;
}

.prd03-cpted-bottom-text {
    font-size: 15px;
    color: #666;
    line-height: 1.8;
    padding-top: 10px;
}

/* ── 실외형 비상벨 섹션 ── */
#prd03-product {
    background: #f8f8f8;
    padding: 80px 0 80px;
    scroll-margin-top: 80px;
}

.prd03-product-head {
    text-align: center;
    margin-bottom: 40px;
}

.prd03-product-title {
    font-size: 48px;
    font-weight: 700;
    color: #17181a;
    margin-top: 12px;
    position: relative;
    display: inline-block;
    padding-bottom: 16px;
}

.prd03-product-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: #c73f3d;
    border-radius: 2px;
}

/* ── 탭 버튼 (uc-filters 스타일과 동일) ── */
.prd03-tabs {
    position: relative;
    display: flex;
    gap: 50px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 40px;
    overflow-x: auto;
}

.prd03-tabs::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #dde0e9;
}

.prd03-tab {
    flex: 1;
    text-align: center;
    padding: 0 0 21px 0;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #1f3b49;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    height: auto;
    font-family: inherit;
    transition: color 0.2s;
}

.prd03-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #1543a0;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 1;
}

/* 숫자 배지 숨김 (uc-filter와 동일) */
.prd03-tab-num {
    display: none;
}

.prd03-tab-text {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    white-space: nowrap;
    line-height: 1.1;
}

.prd03-tab.active {
    background: none;
    color: #1543a0;
    font-weight: 700;
}

.prd03-tab.active::after {
    opacity: 1;
}

/* ── 탭 패널 (흰 박스 + 그림자) ── */
.prd03-tab-panel {
    display: none;
    background: #fff;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    padding: 50px 30px;
    flex-direction: column;
    gap: 50px;
}

.prd03-tab-panel.active {
    display: flex;
}

.prd03-tab-placeholder {
    text-align: center;
    padding: 60px 0;
    color: #999;
    font-size: 16px;
}

/* ── 시스템 기능 래퍼 ── */
.prd03-func-wrap {
    display: flex;
    flex-direction: column;
}

/* ── 설치사례 (탭 패널 내부) ── */
.prd03-cases-inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 18px;
}

.prd03-cases-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.prd03-cases-label {
    font-size: 20px;
    font-weight: 500;
    color: #d72323;
}

.prd03-cases-title {
    font-size: 32px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.65;
}

.prd03-cases-sub {
    font-size: 24px;
    font-weight: 400;
    color: #17181a;
}

.prd03-cases-desc {
    font-size: 20px;
    font-weight: 300;
    color: #444;
}

/* ── 2×2 카드 그리드 ── */
.prd03-cases-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.prd03-cases-row {
    display: flex;
    gap: 20px;
}

/* ── 개별 케이스 카드 ── */
.prd03-case-card {
    position: relative;
    flex: 1;
    height: 435px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.prd03-case-overlay {
    position: absolute;
    inset: 0;
    background: rgba(201, 197, 197, 0.4);
    z-index: 1;
}

.prd03-case-render {
    position: absolute;
    left: 5%;
    top: -2%;
    width: 90%;
    height: 110%;
    object-fit: contain;
    object-position: center;
    z-index: 2;
}

/* ── CCTV 비상벨 dot / line 공통 ── */
.prd03-cctv-dot,
.prd03-cctv-line {
    position: absolute;
    z-index: 5;
    pointer-events: none;
}

.prd03-cctv-dot {
    width: max(5px, 0.74%);
    height: auto;
    aspect-ratio: 1;
    background: #000;
    box-shadow: 0 0 0 1px #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.prd03-cctv-line {
    height: 1px;
    background: #fff;
}

/* ── CCTV 비상벨 callout 공통 ── */
/* 피그마: CCTV 이미지 170×112px, circle 146×146px → 116%×77%, left/top 0 */
.prd03-cctv-callout .prd-callout-product {
    left: 0;
    top: 18%;
    width: 116%;
    height: 77%;
    object-fit: contain;
    /* object-position: left top; */
}

.prd03-cctv-callout {
    position: absolute;
    width: 24.9%;
    z-index: 10;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── 카드별 callout / dot / line 위치 ── */

/* CCTV 연동형 비상벨 탭 */
.prd03-card--cctv-1 .prd03-cctv-callout {
    left: 5.8%;
    top: 40%;
}

.prd03-card--cctv-1 .prd03-cctv-dot {
    left: 70.5%;
    top: 54%;
}

.prd03-card--cctv-1 .prd03-cctv-line {
    left: 31%;
    top: 54%;
    width: 39%;
}

.prd03-card--cctv-2 .prd03-cctv-callout {
    left: 5.8%;
    top: 52%;
}

.prd03-card--cctv-2 .prd03-cctv-dot {
    left: 61%;
    top: 63%;
}

.prd03-card--cctv-2 .prd03-cctv-line {
    left: 31%;
    top: 63%;
    width: 29.5%;
}

.prd03-card--cctv-3 .prd03-cctv-callout {
    left: 5.8%;
    top: 48%;
}

.prd03-card--cctv-3 .prd03-cctv-dot {
    left: 47%;
    top: 63%;
}

.prd03-card--cctv-3 .prd03-cctv-line {
    left: 30%;
    top: 63%;
    width: 16.5%;
}

.prd03-card--cctv-4 .prd03-cctv-callout {
    left: 5.8%;
    top: 45%;
}

.prd03-card--cctv-4 .prd03-cctv-dot {
    left: 48%;
    top: 60%;
}

.prd03-card--cctv-4 .prd03-cctv-line {
    left: 31%;
    top: 60%;
    width: 16.5%;
}

/* 가로등 비상벨 탭 */
.prd03-card--lamp-1 .prd03-cctv-callout {
    left: 5.8%;
    top: 52%;
}

.prd03-card--lamp-1 .prd03-cctv-dot {
    left: 49%;
    top: 63%;
}

.prd03-card--lamp-1 .prd03-cctv-line {
    left: 30%;
    top: 62.7%;
    width: 18.5%;
}

.prd03-card--lamp-2 .prd03-cctv-callout {
    left: 5.8%;
    top: 52%;
}

.prd03-card--lamp-2 .prd03-cctv-dot {
    left: 55%;
    top: 63%;
}

.prd03-card--lamp-2 .prd03-cctv-line {
    left: 30%;
    top: 63%;
    width: 24.5%;
}

.prd03-card--lamp-3 {
    /* flex: 0 0 calc(50% - 10px);
    max-width: calc(50% - 10px); */
}

.prd03-card--lamp-3 .prd03-cctv-callout {
    left: 5.8%;
    top: 40%;
}

.prd03-card--lamp-3 .prd03-cctv-dot {
    left: 55%;
    top: 53%;
}

.prd03-card--lamp-3 .prd03-cctv-line {
    left: 30.5%;
    top: 53%;
    width: 24%;
}

.prd03-card--lamp-4 .prd03-cctv-callout {
    left: 5.8%;
    top: 52%;
}

.prd03-card--lamp-4 .prd03-cctv-dot {
    left: 44%;
    top: 63%;
}

.prd03-card--lamp-4 .prd03-cctv-line {
    left: 30%;
    top: 63%;
    width: 13.5%;
}

/* 안심 부스 탭 */
.prd03-card--booth-1 .prd03-cctv-callout {
    left: 5.8%;
    top: 52%;
}

.prd03-card--booth-1 .prd03-cctv-dot {
    left: 52%;
    top: 63%;
}

.prd03-card--booth-1 .prd03-cctv-line {
    left: 31%;
    top: 63%;
    width: 21%;
}

.prd03-card--booth-2 .prd03-cctv-callout {
    left: 5.8%;
    top: 52%;
}

.prd03-card--booth-2 .prd03-cctv-dot {
    left: 52%;
    top: 63%;
}

.prd03-card--booth-2 .prd03-cctv-line {
    left: 31%;
    top: 63%;
    width: 21%;
}

.prd03-card--booth-3 {
    flex: 0 0 calc(50% - 10px);
    /* max-width: calc(50% - 10px); */
}

.prd03-card--booth-3 .prd03-cctv-callout {
    left: 5.8%;
    top: 52%;
}

.prd03-card--booth-3 .prd03-cctv-dot {
    left: 52%;
    top: 63%;
}

.prd03-card--booth-3 .prd03-cctv-line {
    left: 31%;
    top: 63%;
    width: 21%;
}

.prd03-card--booth-4 .prd03-cctv-callout {
    left: 5.8%;
    top: 52%;
}

.prd03-card--booth-4 .prd03-cctv-dot {
    left: 52%;
    top: 63%;
}

.prd03-card--booth-4 .prd03-cctv-line {
    left: 31%;
    top: 63%;
    width: 21%;
}

/* ── product-03 반응형 ── */
@media (max-width: 768px) {

    /* CPTED 소개 */
    .prd03-cpted-intro {
        flex-direction: column;
        gap: 20px;
    }

    .prd03-cpted-title-col {
        flex: unset;
    }

    .prd03-cpted-desc-col {
        text-align: left;
    }

    /* CPTED 6요소 */
    .prd03-6factors-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .prd03-factor-item {
        height: auto;
        min-height: 150px;
        padding: 40px 10px 20px 10px;
    }

    .prd03-factor-item::before {
        top: 40px;
        height: 80px;
    }

    /* 2열 기준: 첫 번째 열만 왼쪽 구분선 제거 */
    .prd03-factor-item:nth-child(3n+1)::before {
        content: '';
    }
    .prd03-factor-item:nth-child(2n+1)::before {
        content: none;
    }

    .prd03-factor-item img {
        width: 38px;
        height: 38px;
    }

    .prd03-factor-item .bi {
        font-size: 38px;
    }

    .prd03-factor-item span {
        font-size: 14px;
        letter-spacing: -0.3px;
        padding-bottom: 10px;
    }

    /* 제품 헤딩 */
    .prd03-product-title {
        font-size: 28px;
    }

    /* 탭 버튼 (uc-filters 모바일과 동일 - 가로 스크롤) */
    .prd03-tabs {
        gap: 10px;
        justify-content: start;
    }

    .prd03-tab {
        font-size: 15px;
        padding: 0 0 14px 0;
    }

    /* 탭 패널 */
    .prd03-tab-panel {
        padding: 28px 16px;
        gap: 36px;
    }

    /* 설치사례 */
    .prd03-cases-inner {
        padding: 0;
    }

    .prd03-cases-row {
        flex-direction: column;
        gap: 16px;
    }

    .prd03-case-card {
        width: 100%;
        height: 260px;
        flex: none;
    }

    .prd03-cases-title {
        font-size: 22px;
        line-height: 1.4;
    }

    .prd03-cases-sub {
        font-size: 17px;
    }

    .prd03-cases-desc {
        font-size: 14px;
    }

    .prd03-cases-label {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .prd03-cpted-title {
        font-size: 22px;
    }

    .prd03-6factors-title {
        font-size: 20px;
    }

    .prd03-factor-item {
        min-height: 130px;
        padding: 30px 8px 16px 8px;
    }

    .prd03-factor-item::before {
        top: 30px;
        height: 70px;
    }

    .prd03-factor-item span {
        font-size: 13px;
    }

    .prd03-case-card {
        height: 220px;
    }

    .prd03-cpted-bottom-text {
        font-size: 13px;
    }

    #prd03-cpted {
        padding: 50px 0 40px;
    }

    #prd03-product {
        padding: 50px 0 60px;
    }
}

/* ========================================
   USE-CASES.PHP 전용 스타일
   ======================================== */

/* ── Hero ── */
.uc-hero-bg {
    background-image: url('../images/uc/hero.jpg');
    background-position: center bottom;
}

/* ── 소개 섹션 전체 배경 ── */
/* 피그마: 상단 #232b52(solid) → 하단 transparent(59.4% 지점까지 solid, 이후 fade) */
.uc-intro-bg {
    background: linear-gradient(to bottom, #232b52 0%, #232b52 45%, rgba(35, 43, 82, 0) 100%);
    padding: 60px 0 0;
}

/* ── 소개 헤더 텍스트 ── */
#uc-intro {
    background: #fff;
}

.uc-intro-header {
    text-align: center;
    padding: 50px;
}

.uc-intro-logo {
    height: 42px;
    object-fit: contain;
    margin: 0 auto 20px;
    /* 로고 이미지가 어두운 배경에서 보이도록 */
    filter: brightness(10);
}

.uc-intro-sub {
    font-size: 24px;
    color: #fff;
    text-decoration: underline;
    margin-bottom: 20px;
}

.uc-intro-stats {
    font-size: 40px;
    line-height: 60px;
    color: #fff;
    font-weight: 400;
}

.uc-intro-stats em {
    color: #b5a284;
    font-style: normal;
    font-weight: 600;
}

/* ── 지도 + 말풍선 컨테이너 ── */
/* 피그마 비율: 1140px wide × 1307px tall → 114.6% aspect */
.uc-map-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 114.6%;
    /* 1307/1140 */
    margin-bottom: 0;
}

/* 이미지+버블 공통 컨테이너 — 이것만 이동하면 둘 다 따라옴 */
.uc-map-inner {
    position: absolute;
    left: 22.6%;
    /* 258/1140 */
    top: 7.1%;
    /* 93/1307  */
    width: 59.1%;
    /* 674/1140 */
    height: 86.8%;
    /* 1134/1307 */
    overflow: visible;
}

.uc-map-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    z-index: 1;
}

/* ── 말풍선 공통 ── */
.uc-bubble {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.uc-bubble-img {
    display: none;
}

.uc-bubble-content {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 70%;
    overflow: hidden;
}

.uc-bubble-content strong {
    font-size: clamp(8px, 10cqw, 30px);
    font-weight: 700;
    color: #1c2d47;
    display: block;
    line-height: 1.3;
    word-break: keep-all;
}

.uc-bubble-content span {
    font-size: clamp(7px, 8cqw, 24px);
    color: #fff;
    display: block;
    line-height: 1.4;
    font-weight: 400;
    word-break: keep-all;
}

/* 대형 버블: 300/674 = 44.5% of image */
.uc-bubble--subway,
.uc-bubble--toilet-lg,
.uc-bubble--civil {
    width: 44.5%;
    aspect-ratio: 1;
    container-type: inline-size;
}

/* 소형 버블: 250/674 = 37.1% of image */
.uc-bubble--toilet-sm {
    width: 37.1%;
    aspect-ratio: 1;
    container-type: inline-size;
}

/* 버블 위치 — uc-map-inner(이미지) 기준 % */
.uc-bubble--subway {
    left: -21.7%;
    top: 0.9%;
}

.uc-bubble--toilet-lg {
    left: 78.6%;
    top: 0%;
}

.uc-bubble--civil {
    left: -34.4%;
    top: 64.5%;
}

.uc-bubble--toilet-sm {
    left: 77.0%;
    top: 60.2%;
}

/* ── 지역별 통계 ── */
/* 피그마: top=1703px 에 위치, 색상 #404040, 배경은 이미 gradient fade후 흰 영역 */
.uc-region-stats {
    text-align: center;
    padding: 30px 0 60px;
}

.uc-region-stats p {
    font-size: 16px;
    color: #404040;
    line-height: 1.8;
}

.uc-region-date {
    display: block;
    font-size: 16px;
    color: #404040;
    text-align: right;
    margin-top: 8px;
}

/* ── 갤러리 섹션 ── */
#uc-gallery {
    background: #fff;
    padding: 100px 0 80px;
    scroll-margin-top: 80px;
}

.uc-gallery-head {
    text-align: center;
    margin-bottom: 50px;
}

/* "Use Cases": Work Sans Medium 24px, #d72323 */
.uc-gal-label {
    font-size: 24px;
    font-weight: 500;
    color: #d72323;
    margin-bottom: 10px;
}

/* "설치 사례": 50px bold, 하단 빨간 바 */
.uc-gal-title {
    font-size: 50px;
    font-weight: 700;
    color: #000;
    position: relative;
    display: inline-block;
    padding-bottom: 40px;
}

.uc-gal-title::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    background: #d72323;
}

/* ── 필터 탭 ── */
/* 피그마: gap 50px, border-bottom 1px #dde0e9, Spartan Medium 15px uppercase */
.uc-filters {
    position: relative;
    display: flex;
    gap: 50px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 40px;
    overflow-x: auto;
}

.uc-filter-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #dde0e9;
}

.uc-filter {
    padding: 0 0 21px 0;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #1f3b49;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color 0.2s;
}

.uc-filter::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #1543a0;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 1;
}

.uc-filter.active {
    color: #1543a0;
    font-weight: 700;
}

.uc-filter.active::after {
    opacity: 1;
}

/* ── 갤러리 그리드 ── */
.uc-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.uc-gal-item {
    position: relative;
    aspect-ratio: 360 / 270;
    overflow: hidden;
    cursor: pointer;
    box-sizing: border-box;
}

/* 갤러리 이미지 */
.uc-gal-item>img:first-child {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* hover 시에만 보이는 오버레이 — 피그마: rgba(201,197,197,0.4) */
.uc-gal-dark-overlay {
    position: absolute;
    inset: 0;
    background: rgba(201, 197, 197, 0.4);
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.uc-gal-item:hover .uc-gal-dark-overlay {
    opacity: 1;
}

/* 검색 아이콘: hover 시 표시 */
.uc-gal-hover-overlay::after {
    content: '';
    position: absolute;
    top: 19px;
    right: 24px;
    width: 30px;
    height: 30px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.0331 5.96438C15.0123 5.96438 16.9104 6.7506 18.3099 8.15009C19.7094 9.54958 20.4956 11.4477 20.4956 13.4269L20.4844 13.8094C20.3863 15.7199 19.5583 17.5198 18.1713 18.8374C16.7843 20.1549 14.9443 20.8895 13.0312 20.8894L12.6469 20.8781C10.7081 20.7717 8.88722 19.9139 7.57069 18.4868C6.25416 17.0596 5.5457 15.1756 5.59573 13.2346C5.64575 11.2936 6.45032 9.44849 7.83862 8.09106C9.22692 6.73364 11.0896 5.97075 13.0312 5.96438M13.0312 7.46063C11.4489 7.46063 9.93136 8.08921 8.81247 9.2081C7.69359 10.327 7.065 11.8445 7.065 13.4269C7.065 15.0092 7.69359 16.5268 8.81247 17.6457C9.93136 18.7645 11.4489 19.3931 13.0312 19.3931C14.6136 19.3931 16.1311 18.7645 17.25 17.6457C18.3689 16.5268 18.9975 15.0092 18.9975 13.4269C18.9975 11.8445 18.3689 10.327 17.25 9.2081C16.1311 8.08921 14.6136 7.46063 13.0312 7.46063Z' fill='white'/%3E%3Cpath d='M13.0331 2.235C16.0016 2.235 18.8485 3.41408 20.9476 5.51291C23.0468 7.61174 24.2264 10.4584 24.2269 13.4269L24.2119 14.0025C24.1332 15.5937 23.7117 17.1492 22.9763 18.5625L25.5506 21.1331C26.1626 21.7764 26.4989 22.6334 26.4879 23.5212C26.4768 24.409 26.1192 25.2573 25.4914 25.8851C24.8636 26.513 24.0152 26.8706 23.1274 26.8816C22.2396 26.8927 21.3827 26.5564 20.7394 25.9444L18.1687 23.3737C16.5822 24.1985 14.8194 24.6263 13.0312 24.6206L12.4556 24.6056C9.55337 24.4384 6.83002 23.1486 4.86178 21.0092C2.89353 18.8698 1.8348 16.0486 1.90959 13.1425C1.98437 10.2363 3.1868 7.47333 5.26248 5.43798C7.33815 3.40263 10.1242 2.25463 13.0312 2.23687M22.2544 19.7644C21.4766 20.8948 20.4987 21.8734 19.3688 22.6519L21.7013 24.9844C22.0876 25.3499 22.6013 25.5502 23.1331 25.5427C23.6649 25.5353 24.1728 25.3206 24.5488 24.9444C24.9247 24.5682 25.1391 24.0602 25.1462 23.5284C25.1533 22.9966 24.9526 22.483 24.5869 22.0969L22.2544 19.7644ZM13.0331 3.73125C10.4612 3.7315 7.99469 4.75344 6.17623 6.57225C4.35777 8.39106 3.33631 10.8578 3.33656 13.4297C3.33681 16.0016 4.35875 18.4681 6.17756 20.2866C7.99637 22.105 10.4631 23.1265 13.035 23.1262C14.3085 23.1261 15.5695 22.8752 16.746 22.3877C17.9225 21.9003 18.9915 21.1858 19.8919 20.2853C20.7923 19.3847 21.5065 18.3156 21.9937 17.139C22.481 15.9624 22.7317 14.7013 22.7316 13.4278C22.7314 12.1543 22.4805 10.8933 21.993 9.71681C21.5056 8.5403 20.7912 7.47133 19.8906 6.57092C18.99 5.67051 17.9209 4.9563 16.7443 4.46907C15.5677 3.98184 14.3066 3.73113 13.0331 3.73125Z' fill='white'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 호버 오버레이 — 피그마: rgba(134,134,134,0.4) */
.uc-gal-hover-overlay {
    position: absolute;
    inset: 0;
    background: rgba(35, 43, 82, 0.7);
    z-index: 3;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.uc-gal-item:hover .uc-gal-hover-overlay {
    opacity: 1;
}

/* ── 갤러리 callout / dot / line ── */
.uc-gal-dot,
.uc-gal-line {
    position: absolute;
    z-index: 4;
    pointer-events: none;
}

.uc-gal-dot {
    width: max(5px, 0.74%);
    height: auto;
    aspect-ratio: 1;
    background: #000;
    box-shadow: 0 0 0 1px #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.uc-gal-line {
    background: #fff;
    height: 1px;
}

/* 비상벨 callout — 좌측 상단, dot 우중앙 */
.uc-gal-callout--bell {
    left: 6%;
    top: 24%;
}

.uc-gal-dot--bell {
    left: 56%;
    top: 36%;
}

.uc-gal-line--bell {
    left: 21%;
    top: 36%;
    width: 35%;
}

/* 무선버튼 callout — 우측 하단 */
.uc-gal-callout--wireless {
    left: 72%;
    top: 58%;
}

.uc-gal-dot--wireless {
    left: 68%;
    top: 62%;
}

.uc-gal-line--wireless {
    left: 68%;
    top: 62%;
    width: 4%;
}


/* ── 반응형 ── */
@media (max-width: 1024px) {
    .uc-intro-stats {
        font-size: 28px;
        line-height: 48px;
    }

    .uc-bubble-content strong {
        font-size: clamp(10px, 2.5cqw, 18px);
    }
}

@media (max-width: 768px) {
    .uc-intro-stats {
        font-size: 20px;
        line-height: 36px;
    }

    .uc-intro-sub {
        font-size: 16px;
    }

    .uc-map-wrap {
        padding-bottom: 168%;
        /* 이미지 비율 1134/674 ≈ 168% */
    }

    .uc-map-inner {
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .uc-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 0;
    }
    
    .uc-filter {
    	font-size: 15px;
    }
}

@media (max-width: 480px) {
    .uc-gallery-grid {
        grid-template-columns: 1fr;
    }

    .uc-filters {
        gap: 10px;
        justify-content: start;
    }

    .uc-gal-title {
        font-size: 36px;
    }
}

/* ========================================
   AWARDS.PHP 전용 스타일
   ======================================== */

#awards {
    background: #f8f8f8;
    padding: 80px 0 100px;
}

.awards-head {
    text-align: center;
    margin-bottom: 60px;
}

.awards-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #c73f3d;
    margin-bottom: 12px;
}

.awards-title {
    font-size: 42px;
    font-weight: 900;
    color: #17181a;
    margin-bottom: 16px;
    position: relative;
    display: inline-block;
    padding-bottom: 18px;
}

.awards-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background: #c73f3d;
    border-radius: 2px;
}

.awards-desc {
    font-size: 16px;
    color: #666;
    line-height: 1.7;
    margin-top: 20px;
}

.awards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.awards-card {
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s, box-shadow 0.25s;
    overflow: hidden;
}

.awards-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}

.awards-card-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #eef0f5;
}

.awards-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.awards-img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e8ecf5 0%, #d0d6e8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.awards-img-placeholder::after {
    content: '';
    display: block;
    width: 48px;
    height: 48px;
    border: 2px solid #b0b8d0;
    border-radius: 4px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b8d0' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center/32px no-repeat;
}

.awards-card-body {
    padding: 24px 28px 28px;
}

.awards-year {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: #1543a0;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.awards-name {
    font-size: 18px;
    font-weight: 700;
    color: #17181a;
    line-height: 1.4;
    margin-bottom: 8px;
}

.awards-org {
    font-size: 14px;
    color: #888;
}

/* ── 반응형 ── */
@media (max-width: 900px) {
    .awards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .awards-title {
        font-size: 34px;
    }
}

@media (max-width: 600px) {
    .awards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .awards-title {
        font-size: 28px;
    }

    .awards-desc {
        font-size: 14px;
    }

    #awards {
        padding: 50px 0 70px;
    }
}

/* ========================================
   LIGHTBOX
   ======================================== */
#uc-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#uc-lightbox.active {
    opacity: 1;
    pointer-events: all;
}

.uc-lb-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    cursor: zoom-out;
}

.uc-lb-img-wrap {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.92);
    transition: transform 0.3s ease;
}

#uc-lightbox.active .uc-lb-img-wrap {
    transform: scale(1);
}

#uc-lb-img {
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    display: block;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}

.uc-lb-close {
    position: absolute;
    top: 20px;
    right: 24px;
    z-index: 2;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.uc-lb-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.uc-lb-prev,
.uc-lb-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.uc-lb-prev {
    left: 20px;
}

.uc-lb-next {
    right: 20px;
}

.uc-lb-prev:hover,
.uc-lb-next:hover {
    background: rgba(255, 255, 255, 0.3);
}

@media (max-width: 600px) {
    .uc-lb-prev {
        left: 8px;
    }

    .uc-lb-next {
        right: 8px;
    }

    .uc-lb-close {
        top: 12px;
        right: 12px;
    }
}

/* ========================================
   AWARDS PAGE — 인증/특허/수상 이력
   ======================================== */

/* ── Hero 배경 ── */
.page-hero--awards .page-hero-overlay {
    background-image: url('../images/awards/awards-hero-bg.jpg');
    opacity: 0.35;
}

/* ── 섹션 ── */
#cert-section {
    background: #fff;
    padding: 100px 0 80px;
}

/* ── 헤딩 ── */
.cert-head {
    text-align: center;
    margin-bottom: 50px;
}

.cert-label {
    font-size: 18px;
    font-weight: 600;
    color: #d72323;
    margin-bottom: 14px;
    letter-spacing: 0.5px;
}

.cert-title {
    font-size: 46px;
    font-weight: 700;
    color: #000;
    letter-spacing: -0.5px;
    margin: 0 0 34px;
    position: relative;
    display: inline-block;
}

.cert-title::after {
    content: '';
    display: block;
    width: 70px;
    height: 4px;
    background: #d72323;
    margin: 30px auto 0;
}

/* ── 탭 ── */
.cert-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    border-bottom: 1px solid #dde0e9;
    margin-bottom: 50px;
    padding: 0 80px;
}

.cert-tab {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0 0 21px;
    margin-right: 46px;
    font-size: 20px;
    font-weight: 500;
    color: #1f3b49;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    margin-bottom: -1px;
}

.cert-tab.active {
    color: #1543a0;
    border-bottom-color: #1543a0;
}

/* ── 패널 ── */
.cert-panel {
    display: none;
}

.cert-panel.active {
    display: block;
}

/* ── 카드 그리드 ── */
.cert-grid {
    display: grid;
    grid-template-columns: repeat(3, 360px);
    gap: 20px;
    justify-content: center;
}

/* ── 카드 ── */
.cert-card {
    background: #232b52;
    border-radius: 13px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
}

.cert-card-img {
    padding: 30px 0 0;
    overflow: hidden;
    border-radius: 13px 13px 0 0;
}

.cert-card-img img {
    width: 100%;
    aspect-ratio: 2480 / 2800;
    object-fit: contain;
    object-position: center;
    display: block;
    background: #fff;
}

.cert-card-body {
    padding: 20px 20px 30px;
    text-align: center;
}

.cert-card-body p {
    font-size: 20px;
    font-weight: 400;
    color: #fff;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
}

/* ── 반응형 ── */
@media (max-width: 1200px) {
    .cert-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 20px;
    }

    .cert-tabs {
        padding: 0 20px;
    }

    .cert-title {
        font-size: 36px;
    }
}

@media (max-width: 640px) {
    .cert-grid {
        grid-template-columns: 1fr;
    }

    .cert-title {
        font-size: 28px;
    }

    .cert-tab {
        font-size: 16px;
        margin-right: 24px;
    }

    .cert-card-body p {
        font-size: 15px;
    }
}

/* ── 페이지네이션 ── */
.cert-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 50px;
}

.cert-page-btn {
    width: 40px;
    height: 40px;
    border: 1px solid #dde0e9;
    border-radius: 8px;
    background: #fff;
    color: #1f3b49;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cert-page-btn:hover:not(.disabled) {
    background: #232b52;
    color: #fff;
    border-color: #232b52;
}

.cert-page-btn.active {
    background: #232b52;
    color: #fff;
    border-color: #232b52;
}

.cert-page-btn.disabled {
    color: #c0c5ce;
    border-color: #eef0f4;
    cursor: default;
}

.cert-page-prev,
.cert-page-next {
    font-size: 20px;
}

/* ── 카드 hover 오버레이 ── */
.cert-card-img {
    position: relative;
}

.cert-img-overlay {
    position: absolute;
    inset: 30px 0 0;
    background: rgba(35, 43, 82, 0.7);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cert-img-overlay::after {
    content: '';
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.0331 5.96438C15.0123 5.96438 16.9104 6.7506 18.3099 8.15009C19.7094 9.54958 20.4956 11.4477 20.4956 13.4269L20.4844 13.8094C20.3863 15.7199 19.5583 17.5198 18.1713 18.8374C16.7843 20.1549 14.9443 20.8895 13.0312 20.8894L12.6469 20.8781C10.7081 20.7717 8.88722 19.9139 7.57069 18.4868C6.25416 17.0596 5.5457 15.1756 5.59573 13.2346C5.64575 11.2936 6.45032 9.44849 7.83862 8.09106C9.22692 6.73364 11.0896 5.97075 13.0312 5.96438M13.0312 7.46063C11.4489 7.46063 9.93136 8.08921 8.81247 9.2081C7.69359 10.327 7.065 11.8445 7.065 13.4269C7.065 15.0092 7.69359 16.5268 8.81247 17.6457C9.93136 18.7645 11.4489 19.3931 13.0312 19.3931C14.6136 19.3931 16.1311 18.7645 17.25 17.6457C18.3689 16.5268 18.9975 15.0092 18.9975 13.4269C18.9975 11.8445 18.3689 10.327 17.25 9.2081C16.1311 8.08921 14.6136 7.46063 13.0312 7.46063Z' fill='white'/%3E%3Cpath d='M13.0331 2.235C16.0016 2.235 18.8485 3.41408 20.9476 5.51291C23.0468 7.61174 24.2264 10.4584 24.2269 13.4269L24.2119 14.0025C24.1332 15.5937 23.7117 17.1492 22.9763 18.5625L25.5506 21.1331C26.1626 21.7764 26.4989 22.6334 26.4879 23.5212C26.4768 24.409 26.1192 25.2573 25.4914 25.8851C24.8636 26.513 24.0152 26.8706 23.1274 26.8816C22.2396 26.8927 21.3827 26.5564 20.7394 25.9444L18.1687 23.3737C16.5822 24.1985 14.8194 24.6263 13.0312 24.6206L12.4556 24.6056C9.55337 24.4384 6.83002 23.1486 4.86178 21.0092C2.89353 18.8698 1.8348 16.0486 1.90959 13.1425C1.98437 10.2363 3.1868 7.47333 5.26248 5.43798C7.33815 3.40263 10.1242 2.25463 13.0312 2.23687M22.2544 19.7644C21.4766 20.8948 20.4987 21.8734 19.3688 22.6519L21.7013 24.9844C22.0876 25.3499 22.6013 25.5502 23.1331 25.5427C23.6649 25.5353 24.1728 25.3206 24.5488 24.9444C24.9247 24.5682 25.1391 24.0602 25.1462 23.5284C25.1533 22.9966 24.9526 22.483 24.5869 22.0969L22.2544 19.7644ZM13.0331 3.73125C10.4612 3.7315 7.99469 4.75344 6.17623 6.57225C4.35777 8.39106 3.33631 10.8578 3.33656 13.4297C3.33681 16.0016 4.35875 18.4681 6.17756 20.2866C7.99637 22.105 10.4631 23.1265 13.035 23.1262C14.3085 23.1261 15.5695 22.8752 16.746 22.3877C17.9225 21.9003 18.9915 21.1858 19.8919 20.2853C20.7923 19.3847 21.5065 18.3156 21.9937 17.139C22.481 15.9624 22.7317 14.7013 22.7316 13.4278C22.7314 12.1543 22.4805 10.8933 21.993 9.71681C21.5056 8.5403 20.7912 7.47133 19.8906 6.57092C18.99 5.67051 17.9209 4.9563 16.7443 4.46907C15.5677 3.98184 14.3066 3.73113 13.0331 3.73125Z' fill='white'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cert-card:hover .cert-img-overlay {
    opacity: 1;
}

/* ========================================
   INQUIRY WRITE / EDIT 폼
   ======================================== */
#inquiry-write {
    padding: 80px 0 100px;
}

.inqf-wrap {
    /* max-width: 900px; */
    margin: 0 auto;
}

.inqf-top {
    margin-bottom: 40px;
}

.inqf-required-note {
    text-align: right;
    font-size: 13px;
    color: #888;
    margin-bottom: 10px;
}

.inqf-star {
    color: #e53e3e;
    font-weight: 700;
}

/* ── PC 테이블 ── */
.inqf-table-outer {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #dee2e6;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    margin-bottom: 20px;
}

.inqf-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.inqf-table th,
.inqf-table td {
    border: none;
    border-bottom: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    padding: 0.7rem 1rem;
    font-size: 15px;
    vertical-align: middle;
}

.inqf-table th:last-child,
.inqf-table td:last-child {
    border-right: none;
}

.inqf-table tbody tr:last-child th,
.inqf-table tbody tr:last-child td {
    border-bottom: none;
}

.inqf-label {
    background: #f0f4fa;
    font-weight: 600;
    color: #444;
    white-space: nowrap;
    width: 120px;
    text-align: center;
}

.inqf-label--top {
    vertical-align: top;
    padding-top: 0.85rem;
}

.inqf-input {
    width: 100%;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s;
}

.inqf-input--sm {
    max-width: 260px;
}

.inqf-input:focus {
    border-color: #232b52;
}

.inqf-radio-group {
    display: flex;
    gap: 20px;
    align-items: center;
}

.inqf-radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    cursor: pointer;
    margin: 0;
}

.inqf-hint {
    font-size: 12px;
    color: #999;
    margin: 4px 0 0;
}

/* ── 에디터 ── */
.inqf-editor-cell {
    padding: 0 !important;
}

.inqf-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid #dee2e6;
    background: #fafafa;
}

.inqf-tool {
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 3px 7px;
    font-size: 13px;
    cursor: pointer;
    color: #444;
    transition: background 0.15s, border-color 0.15s;
    min-width: 28px;
    text-align: center;
}

.inqf-tool:hover {
    background: #e8edf5;
    border-color: #d0d8e8;
}

.inqf-sep {
    color: #ccc;
    padding: 0 4px;
    font-size: 13px;
}

.inqf-editor {
    min-height: 200px;
    padding: 12px;
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    outline: none;
}

.inqf-editor:empty::before {
    content: '내용을 입력하세요.';
    color: #bbb;
}

/* ── 파일 ── */
.inqf-file {
    font-size: 14px;
    color: #555;
}

/* ── 버튼 ── */
.inqf-btn-wrap {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.inqf-submit-btn {
    background: #232b52;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 28px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.inqf-submit-btn:hover {
    background: #1a2040;
}

.inqf-cancel-btn {
    background: #f0f0f0;
    color: #444;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 10px 28px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
}

.inqf-cancel-btn:hover {
    background: #e0e0e0;
    color: #333;
}

/* ── 모바일 폼 ── */
.inqf-mobile-form {
    display: none;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 20px;
}

.inqf-mobile-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.inqf-mobile-label {
    font-size: 14px;
    font-weight: 600;
    color: #444;
}

.inqf-textarea {
    width: 100%;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 15px;
    outline: none;
    resize: vertical;
}

.inqf-textarea:focus {
    border-color: #232b52;
}

/* ── 반응형 ── */
@media (max-width: 767px) {
    .inqf-table-outer {
        display: none;
    }

    .inqf-mobile-form {
        display: flex;
    }
}

.inqv-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #232b52;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 10px 28px;
    border-radius: 999px;
    text-decoration: none;
    border: 1px solid #232b52;
    transition: background 0.2s;
}

.inqv-edit-btn:hover {
    background: #1a2040;
    color: #fff;
}


/* ========================================
   FAQ 페이지
   ======================================== */
#faq-section {
    padding: 60px 0 100px;
    background: #f4f6fa;
}

.faq-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
}

.faq-tab {
    background: #fff;
    border: 1px solid #e0e4ed;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 500;
    color: #888;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.faq-tab:hover {
    border-color: var(--prd-red, #d72323);
    color: var(--prd-red, #d72323);
}

.faq-tab.active {
    background: var(--prd-red, #d72323);
    border-color: var(--prd-red, #d72323);
    color: #fff;
    font-weight: 600;
}

.faq-wrap {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.faq-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: #fff;
    border: 1px solid #e0e4ed;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.faq-item:hover {
    border-color: #b8c8e8;
    box-shadow: 0 2px 12px rgba(26, 79, 160, 0.07);
}

.faq-item.active {
    border-color: var(--blue);
    box-shadow: 0 2px 16px rgba(26, 79, 160, 0.1);
}

.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}

.faq-q-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.faq-badge-top {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: transparent;
    border: 1.5px solid var(--blue);
    color: var(--blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    padding-left: 2.5px;
}

.faq-q-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.faq-category {
    font-size: 11px;
    color: #999;
}

.faq-question {
    font-size: 18px;
    font-weight: 700;
    color: #1c2d47;
    line-height: 1.5;
}

.faq-chevron {
    flex-shrink: 0;
    color: #bbb;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.faq-chevron i {
    font-size: 16px;
}

.faq-item.active .faq-chevron {
    color: var(--blue);
}

.faq-a {
    display: none;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px 20px;
    background: #f7f9fd;
    border-top: 1px solid #e8ecf5;
}

.faq-item.active .faq-a {
    display: flex;
}

.faq-a-label {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    margin-top: 2px;
    line-height: 44px;
}

.faq-a-body {
    flex: 1;
    font-size: 14px;
    color: #444;
    line-height: 1.9;
}

.faq-a-body p {
    margin: 0 0 6px;
}

.faq-a-body p:last-child {
    margin-bottom: 0;
}

@media (max-width: 860px) {
    .faq-wrap {
        flex-direction: column;
        gap: 0;
    }

    .faq-col:last-child .faq-item:first-child {
        border-top: none;
    }

    .faq-col {
        gap: 12px;
    }
}

@media (max-width: 600px) {
    .faq-tab {
        font-size: 12px;
        padding: 8px 12px;
    }

    .faq-q {
        padding: 16px 14px;
    }

    .faq-a {
        padding: 14px 14px 18px;
    }

    .faq-badge-top {
        width: 38px;
        height: 22px;
        font-size: 10px;
    }

    .faq-question {
        font-size: 14px;
    }

    .faq-a-label {
        width: 38px;
        height: 38px;
        font-size: 11px;
    }
}

/* ============================================================
   data.php — 자료실
   ============================================================ */
#data-section {
    padding: 60px 0 100px;
    background: #fff;
}

.data-note {
    font-size: 13px;
    color: #999;
    text-align: right;
}

.data-block {
    border: 1px solid #e0e4ed;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}

.data-block-head {
    background: #f8f9fb;
    border-bottom: 1px solid #e0e4ed;
    padding: 20px 24px 0;
}

.data-block-head .prd-tag-label {
    margin-bottom: 4px;
    font-size: 14px;
}

.data-cat-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}

.data-cat-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark, #1c2d47);
}

.data-cat-chevron {
    color: #aaa;
    font-size: 16px;
    transition: transform 0.25s;
    display: flex;
    align-items: center;
}

.data-block:not(.active) .data-cat-chevron {
    transform: rotate(180deg);
}

.data-cat-body {
    display: block;
}

.data-block:not(.active) .data-cat-body {
    display: none;
}

.data-row {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #f0f2f8;
    background: #fff;
}

.data-row:last-child {
    border-bottom: none;
}

.data-sub {
    font-size: 14px;
    font-weight: 600;
    color: #444;
    min-width: 150px;
    flex-shrink: 0;
    border-right: 1px solid #d8dde8;
    padding-right: 24px;
    margin-right: 24px;
}

.data-files {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.data-file-item {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.data-file-item input[type="checkbox"] {
    display: none;
}

.data-file-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1px solid #d0d5e0;
    border-radius: 6px;
    font-size: 14px;
    color: #444;
    background: #fff;
    transition: all 0.2s;
    user-select: none;
}

.data-file-btn i {
    font-size: 13px;
    color: #aaa;
    transition: color 0.2s;
}

.data-file-item:hover .data-file-btn {
    border-color: var(--blue, #1a4fa0);
    color: var(--blue, #1a4fa0);
    background: #f4f7fd;
}

.data-file-item:hover .data-file-btn i {
    color: var(--blue, #1a4fa0);
}

.data-file-item input:checked+.data-file-btn {
    background: var(--blue, #1a4fa0);
    border-color: var(--blue, #1a4fa0);
    color: #fff;
}

.data-file-item input:checked+.data-file-btn i {
    color: #fff;
}

.data-file-item.data-chk-disabled .data-file-btn {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.data-dl-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 32px;
    padding: 20px 28px;
    background: var(--blue, #1a4fa0);
    border-radius: 12px;
    gap: 16px;
}

.data-dl-count {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.8);
}

.data-dl-count strong {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
}

.data-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: #fff;
    color: var(--blue, #1a4fa0);
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

.data-dl-btn:hover:not(:disabled) {
    background: #e8eef8;
}

.data-dl-btn:disabled {
    background: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.6);
    cursor: not-allowed;
}

@media (max-width: 600px) {
    .data-block-head {
        padding: 16px 16px 0;
    }

    .data-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 14px 16px;
    }

    .data-sub {
        min-width: unset;
        border-right: none;
        padding-right: 0;
        margin-right: 0;
        border-bottom: 1px solid #e0e4ed;
        padding-bottom: 8px;
        width: 100%;
    }

    .data-dl-bar {
        flex-direction: column;
        text-align: center;
        gap: 14px;
        padding: 20px;
    }

    .data-dl-btn {
        width: 100%;
        justify-content: center;
    }
}



/* ============================================================
   system_intro01.php — 비상벨 시스템의 문제점
   ============================================================ */
#si01-section {
    background: #fff;
    padding: 60px 0 100px;
    position: relative;
    overflow: hidden;
}

#si01-section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1100px;
    background: linear-gradient(to top, #f5dde1 0%, #faeaec 40%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

#si01-section>.inner {
    position: relative;
    z-index: 1;
}

/* ── Problem 블록 ── */
.si01-problem {
    margin-bottom: 0;
}

/* 헤더 */
.si01-prob-head {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding-bottom: 28px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 36px;
}

.si01-prob-num {
    font-size: 72px;
    font-weight: 900;
    line-height: 1;
    color: #d8dce6;
    letter-spacing: -0.04em;
    flex-shrink: 0;
    user-select: none;
}

.si01-problem--red .si01-prob-num {
    color: #fee2e2;
}

.si01-prob-text {
    padding-top: 8px;
}

.si01-prob-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blue, #1a4fa0);
    margin-bottom: 8px;
}

.si01-problem--red .si01-prob-label {
    color: #dc2626;
}

.si01-prob-title {
    font-size: 26px;
    font-weight: 800;
    color: #111827;
    line-height: 1.35;
    letter-spacing: -0.02em;
    margin: 0;
}

/* 본문 2열 */
.si01-prob-body {
    display: grid;
    /* grid-template-columns: 1fr 1fr; */
    gap: 32px;
    align-items: center;
    margin-bottom: 32px;
}

/* 이미지 영역 */
.si01-img-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
}

.si01-img-row2 img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}

.si01-img-full {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}

.si01-img-news {
    margin-bottom: 28px;
}

/* 리스트 */
.si01-prob-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.si01-prob-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 16px;
    color: #374151;
    line-height: 1.75;
}

.si01-prob-list li:last-child {
    border-bottom: none;
}

.si01-prob-list li strong {
    color: #111827;
    font-weight: 700;
}

.si01-li-num,
.si01-li-num--red {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.si01-li-num {
    background: #e5e7eb;
    color: #6b7280;
}

.si01-li-num--red {
    background: #fee2e2;
    color: #dc2626;
}

/* 인용구 */

/* 구분선 */
.si01-sep {
    height: 1px;
    background: linear-gradient(to right, transparent, #e5e7eb 15%, #e5e7eb 85%, transparent);
    margin: 64px 0;
}

/* figure (CTA용) */
.si01-figure--full img {
    width: 100%;
    display: block;
}

.si01-figure--noborder {
    border: none;
}

/* CTA */
.si01-cta {
    margin-top: 80px;
    text-align: center;
}


/* 반응형 */
@media (max-width: 860px) {
    .si01-prob-body {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .si01-prob-num {
        font-size: 52px;
    }

    .si01-prob-title {
        font-size: 20px;
    }

    .si01-img-row2 {
        grid-template-columns: 1fr 1fr;
    }

}

/* ============================================================
   system_intro03.php — 비상벨 시스템 구성도
   ============================================================ */
#si03-section {
    background: #fff;
    padding: 100px 0 100px;
    position: relative;
    overflow: hidden;
}

#si03-section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(to top, #f4f7fd 0%, rgba(244, 247, 253, 0.4) 60%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

#si03-section .inner {
    position: relative;
    z-index: 1;
}

/* 메인 다이어그램 */
.si03-diagram {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0;
}

.si03-diagram img {
    width: 100%;
    height: auto;
    display: block;
}


/* 서비스 특징 섹션 */
.si03-features {
    margin-bottom: 0;
}

/* 4열 카드 그리드 */
.si03-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.si03-feature-card {
    position: relative;
    background: #fff;
    border-radius: 12px;
    padding: 36px 24px 28px;
    text-align: center;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.si03-feature-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blue, #1a4fa0), #2d7dd2);
}

.si03-feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(26, 79, 160, 0.1);
    border-color: #d1ddf5;
}

.si03-feature-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #f3f6fd;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: background 0.22s ease;
}

.si03-feature-card:hover .si03-feature-icon {
    background: #e6edfa;
}

.si03-feature-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
}

.si03-feature-title {
    font-size: 15px;
    font-weight: 800;
    color: #111827;
    line-height: 1.55;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.si03-feature-desc {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.75;
    margin: 0;
}

/* Step 번호 em 스타일 */
#si03-section em {
    font-style: normal;
    font-size: 12px;
    color: #9ca3af;
}

/* 반응형 */
@media (max-width: 860px) {
    .si03-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .si03-feature-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   news.php — 뉴스레터
   ============================================================ */
#news-section {
    background: #fff;
    padding: 60px 0 100px;
}

/* system_intro03 — 스텝별 색상 */
/* Step 01, 03: si01과 동일한 회색 */
.si03-step--gray .si01-prob-num {
    color: #d8dce6;
}

.si03-step--gray .si01-prob-label {
    color: #9ca3af;
}

.si03-step--gray .si01-li-num {
    background: #e5e7eb;
    color: #6b7280;
}

/* Step 02: 하늘색 */
.si03-step--blue .si01-prob-num {
    color: #b8dffa;
}

.si03-step--blue .si01-prob-label {
    color: #0ea5e9;
}

.si03-step--blue .si01-li-num {
    background: #e0f2fe;
    color: #0ea5e9;
}

/* Step 03: si01 Problem 02(red)와 동일 */
.si03-step--red .si01-prob-num {
    color: #fee2e2;
}

.si03-step--red .si01-prob-label {
    color: #dc2626;
}

.si03-step--red .si01-li-num {
    background: #fee2e2;
    color: #dc2626;
}

/* system_intro03 — Optional 뱃지 */
.si03-optional {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #9ca3af;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    padding: 1px 7px;
    vertical-align: middle;
    margin: 0 4px;
}

/* ============================================================
   news.php — 뉴스레터
   ============================================================ */
#news-section {
    background: #fff;
    padding: 60px 0 100px;
}

/* 카드 그리드 */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 56px;
}

/* 카드 */
.news-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

/* 이미지 영역 */
.news-card-img {
    position: relative;
    aspect-ratio: 16 / 19;
    background: #f3f4f6;
    overflow: hidden;
}

.news-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
    transition: transform 0.35s ease;
}

.news-card:hover .news-card-img img {
    transform: scale(1.04);
}

/* 카테고리 태그 */
.news-card-tag {
    position: absolute;
    top: 16px;
    right: 0;
    font-size: 14px;
    letter-spacing: 0.05em;
    color: #fff;
    background: #000;
    padding: 5px 12px;
    border-radius: 4px 0 0 4px;
}


/* 카드 본문 */
.news-card-body {
    padding: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}

.news-card-download {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: #374151;
    font-size: 18px;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

.news-card-download:hover {
    background: #d72323;
    color: #fff;
}

.news-card-date {
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 10px;
}

.news-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    line-height: 1.5;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 1.5em;
}

.news-card-desc {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.75;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: calc(1.75em * 3);
}

.news-card-more {
    font-size: 13px;
    font-weight: 700;
    color: var(--blue, #1a4fa0);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: gap 0.2s ease;
}

.news-card-more:hover {
    gap: 8px;
    color: #163d80;
}

/* 페이지네이션 */
.news-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.news-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.18s ease;
}

.news-page-btn:hover {
    border-color: var(--blue, #1a4fa0);
    color: var(--blue, #1a4fa0);
}

.news-page-btn--active {
    background: var(--blue, #1a4fa0);
    border-color: var(--blue, #1a4fa0);
    color: #fff;
}

.news-page-btn--active:hover {
    color: #fff;
}

.news-page-btn.disabled {
    color: #d1d5db;
    pointer-events: none;
    cursor: default;
}

/* 반응형 */
@media (max-width: 900px) {
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .news-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   news-details.php — 뉴스레터 상세
   ============================================================ */
#news-detail-section {
    background: #fff;
    padding: 60px 0 100px;
}

.nd-wrap {
    margin: 0 auto;
}

/* 아티클 헤더 */
.nd-head {
    margin-bottom: 36px;
    padding-bottom: 28px;
    border-bottom: 1px solid #e5e7eb;
}

.nd-tag {
    display: inline-block;
    font-size: 13px;
    letter-spacing: 0.08em;
    color: #fff;
    background: #000;
    padding: 4px 12px;
    border-radius: 4px;
    margin-bottom: 16px;
}

.nd-title {
    font-size: 28px;
    font-weight: 800;
    color: #111827;
    line-height: 1.4;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.nd-meta {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nd-date {
    font-size: 13px;
    color: #9ca3af;
}

/* 피처드 이미지 */
.nd-featured {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 40px;
}

.nd-featured img {
    width: 100%;
    height: auto;
    display: block;
    object-position: top;
}

/* 본문 */
.nd-body {
    font-size: 15px;
    color: #374151;
    line-height: 1.9;
}

.nd-body p {
    margin-bottom: 20px;
}

.nd-body h3 {
    font-size: 18px;
    font-weight: 800;
    color: #111827;
    letter-spacing: -0.01em;
    margin: 36px 0 16px;
    padding-left: 14px;
    border-left: 3px solid var(--blue, #1a4fa0);
}

.nd-body ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nd-body ul li {
    padding: 14px 18px;
    background: #f8faff;
    border-radius: 6px;
    font-size: 14px;
    color: #374151;
    line-height: 1.7;
}

.nd-body ul li strong {
    color: #111827;
    font-weight: 700;
}

/* 하단 네비게이션 */
.nd-nav {
    margin-top: 60px;
    padding-top: 32px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.nd-nav-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f4f7fb;
    color: #444;
    font-size: 15px;
    font-weight: 600;
    padding: 10px 28px;
    border-radius: 999px;
    text-decoration: none;
    border: 1px solid #e5e9f0;
    transition: background 0.2s, color 0.2s;
}

.nd-nav-back:hover {
    background: #232b52;
    color: #fff;
    border-color: #232b52;
}

.nd-nav-arrows {
    display: flex;
    flex-direction: column;
    gap: 1px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
}

.nd-nav-arrow {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: #fff;
    text-decoration: none;
    transition: background 0.18s;
    border-bottom: 1px solid #f3f4f6;
}

.nd-nav-arrow:last-child {
    border-bottom: none;
}

.nd-nav-arrow:hover {
    background: #f8faff;
}

.nd-arrow-label {
    font-size: 14px;
    font-weight: 400;
    color: #9ca3af;
}

.nd-arrow-title {
    font-size: 14px;
    color: #374151;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nd-nav-arrow--next {
    /* flex-direction: row-reverse; */
    text-align: right;
}

.nd-nav-arrow--next .nd-arrow-title {
    text-align: right;
}

/* 반응형 */
@media (max-width: 640px) {
    .nd-title {
        font-size: 22px;
    }

    .nd-nav-arrow--next {
        flex-direction: row;
        text-align: left;
    }

    .nd-nav-arrow--next .nd-arrow-title {
        text-align: left;
    }
}

/* uc-gallery 페이지네이션 */
.uc-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
}

.uc-page-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.18s ease;
}

.uc-page-btn:hover {
    border-color: var(--blue, #1a4fa0);
    color: var(--blue, #1a4fa0);
}

.uc-page-btn.active {
    background: var(--blue, #1a4fa0);
    border-color: var(--blue, #1a4fa0);
    color: #fff;
}

/* 안심부스 탭 — 마지막 기능 카드 이미지 position */
#prd03-tab-booth .prd-func-grid>.prd-func-card:last-child .prd-func-card-img img {
    object-position: 60% 13%;
}

/* 안심부스 탭 — 마지막 카드 h3 min-height 복원 (이미지↔p 여백 확보) */
#prd03-tab-booth .prd-func-grid>.prd-func-card:last-child .prd-func-card-body h3 {
    min-height: 54px;
}

/* 가로등 탭 — 마지막 카드(무선비상버튼 유상제공) h3 min-height 제거 (p 텍스트 길어 prd-func-accent 겹침 방지) */
#prd03-tab-lamp .prd-func-grid>.prd-func-card:last-child .prd-func-card-body h3 {
    min-height: 0;
}

/* 안심부스 탭 — callout 제품 이미지 원 정중앙 정렬 */
#prd03-tab-booth .prd-callout-product {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 64%;
    height: 64%;
}

/* ===========================
   QUICK CONTACT BUTTON
=========================== */
/* 퀵메뉴 공통: 우측 가장자리에 붙는 동일 크기 정사각형 박스 (아이콘 위 / 텍스트 아래) */
.quick-contact {
    position: fixed;
    right: -200px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    width: 78px;
    height: 78px;
    background: var(--prd-red);
    color: #fff;
    border: 2px solid var(--prd-red);
    box-shadow: 0 4px 20px rgba(215, 35, 35, 0.25);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: unset;
    padding: 0;
    border-radius: 0;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: background 0.2s, color 0.2s, opacity 0.35s, right 0.35s;
}

.quick-contact.is-visible {
    right: 0;
    opacity: 1;
    pointer-events: auto;
}

.quick-contact svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.quick-contact:hover {
    background: #fff;
    color: var(--prd-red);
}

/* 메인 홈페이지 바로가기: Contact Us 버튼 바로 위에 같은 크기로 배치 */
/* Contact Us와 달리 로딩 시점부터 항상 표시 */
.quick-home {
    right: 0;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(calc(-50% - 76px)); /* Contact Us 박스(78) 위로, 보더 2px 겹쳐 붙임 */
    background: #0b1622;
    color: #fff;
    border-color: #0b1622;
    box-shadow: 0 4px 20px rgba(42, 92, 215, 0.25);
}

.quick-home:hover {
    background: #fff;
    color: #0b1622;
}

@media (max-width: 768px) {
    .quick-contact {
        width: 64px;
        height: 64px;
        font-size: 10px;
        gap: 5px;
    }

    .quick-contact svg {
        width: 20px;
        height: 20px;
    }

    .quick-home {
        transform: translateY(calc(-50% - 62px)); /* 박스(64) 위로, 보더 2px 겹쳐 붙임 */
    }
}
/* ============================================================ */
/* 1:1 문의 목록 (inquiry list)                                    */
/* ============================================================ */
#inquiry { padding: 80px 0 100px; }
.inq-section-head { margin-bottom: 50px; }

.inq-search-wrap { display: flex; justify-content: flex-end; margin-bottom: 16px; }
.inq-search-form { display: flex; gap: 8px; width: 100%; max-width: 420px; }
.inq-search-select { width: 90px; flex-shrink: 0; border: 1px solid #dee2e6; border-radius: 6px; padding: 6px 10px; font-size: 14px; color: #333; background: #fff; }
.inq-search-input { flex: 1; min-width: 0; border: 1px solid #dee2e6; border-radius: 6px; padding: 6px 12px; font-size: 14px; outline: none; }
.inq-search-input:focus { border-color: var(--blue); }
.inq-search-btn { flex-shrink: 0; background: #fff; border: 1px solid #dee2e6; border-radius: 6px; padding: 6px 16px; font-size: 14px; cursor: pointer; white-space: nowrap; transition: background 0.2s, color 0.2s; }
.inq-search-btn:hover { background: #232b52; color: #fff; border-color: #232b52; }

.inq-table-wrap { border-radius: 16px; overflow: hidden; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06); border: 1px solid #dee2e6; margin-bottom: 0; }
.inq-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.inq-table th, .inq-table td { border: none; border-bottom: 1px solid #dee2e6; border-right: 1px solid #dee2e6; padding: 0.9rem 1.1rem; font-size: 15px; }
.inq-table th:last-child, .inq-table td:last-child { border-right: none; }
.inq-table tbody tr:last-child td { border-bottom: none; }
.inq-table thead tr th { background: #f0f4fa; font-weight: 600; color: #333; border-bottom: 2px solid #dee2e6; text-align: center; }
.inq-table tbody tr:hover { background: #f8fbff; }

.inq-cell { vertical-align: middle; }
.inq-num { color: #888; white-space: nowrap; }
.inq-title-cell { max-width: 0; }
.inq-title-link { display: flex; align-items: center; gap: 5px; color: #222; text-decoration: none; overflow: hidden; }
.inq-title-link span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.inq-title-link:hover { color: var(--blue); text-decoration: underline; }
.inq-lock-icon { width: 12px; flex-shrink: 0; }
.inq-badge { display: inline-block; background: #333; color: #fff; font-size: 12px; padding: 0.18rem 0.6rem; border-radius: 999px; white-space: nowrap; }

.inq-card-list { display: none; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.inq-card { display: block; padding: 0.85rem 1rem; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; text-decoration: none; color: inherit; }
.inq-card:hover { background: #f0f6ff; }
.inq-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.inq-card-date { font-size: 13px; color: #999; }
.inq-card-title { display: flex; align-items: center; gap: 4px; overflow: hidden; font-size: 15px; font-weight: 500; color: #1a1a1a; margin: 0 0 4px; white-space: nowrap; }
.inq-card-title span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.inq-card-author { font-size: 13px; color: #888; }

.inq-pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 28px 0 20px; }
.inq-page-btn { width: 38px; height: 38px; border: none; border-radius: 10px; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08); font-size: 16px; font-weight: 600; color: #555; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s; text-decoration: none; }
.inq-page-btn.active { background: #232b52; color: #fff; }
.inq-page-btn.disabled { color: #ccc; cursor: default; }
.inq-page-btn:not(.active):not(.disabled):hover { background: #e8edf5; }

.inq-write-wrap { display: flex; justify-content: flex-end; }
.inq-write-btn { display: inline-flex; align-items: center; gap: 6px; background: #232b52; color: #fff; font-size: 15px; font-weight: 600; padding: 10px 24px; border-radius: 8px; text-decoration: none; transition: background 0.2s; }
.inq-write-btn:hover { background: #1a2040; color: #fff; }

.inq-modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1000; }
.inq-modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 340px; background: #fff; border-radius: 16px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18); z-index: 1001; overflow: hidden; }
.inq-modal.active, .inq-modal-backdrop.active { display: block; }
.inq-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px 14px; font-size: 15px; font-weight: 700; border-bottom: 1px solid #f0f0f0; }
.inq-modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: #888; line-height: 1; }
.inq-modal-body { padding: 16px 20px; }
.inq-modal-body p { font-size: 14px; color: #666; margin-bottom: 12px; }
.inq-pw-input { width: 100%; border: 1px solid #dee2e6; border-radius: 8px; padding: 10px 14px; font-size: 15px; outline: none; }
.inq-pw-input:focus { border-color: #232b52; }
.inq-pw-error { display: none; color: #e53e3e; font-size: 13px; margin-top: 8px; margin-bottom: 0; }
.inq-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 18px; }
.inq-modal-btn { padding: 8px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid #dee2e6; background: #fff; transition: background 0.2s, color 0.2s; }
.inq-modal-confirm { background: #232b52; color: #fff; border-color: #232b52; }
.inq-modal-confirm:hover { background: #1a2040; }
.inq-modal-cancel:hover { background: #f0f0f0; }

@media (max-width: 767px) {
    .inq-table-wrap { display: none; }
    .inq-card-list { display: flex; }
}

/* ============================================================ */
/* 1:1 문의 상세 (inquiry view)                                    */
/* ============================================================ */
#inquiry-view { padding: 80px 0 100px; }
.inqv-wrap { margin: 0 auto; background: #fff; border-radius: 20px; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.07); overflow: hidden; }
.inqv-header { padding: 2rem 2.5rem 1.75rem; border-bottom: 1px solid #f0f2f5; }
.inqv-label { display: inline-block; background: #eef2ff; color: #232b52; font-size: 13px; font-weight: 700; padding: 0.2rem 0.75rem; border-radius: 999px; margin-bottom: 14px; }
.inqv-title { display: flex; align-items: center; gap: 8px; font-size: 26px; font-weight: 700; color: #111; line-height: 1.4; margin: 0 0 1.25rem; flex-wrap: wrap; }
.inqv-lock { width: 14px; flex-shrink: 0; }
.inqv-meta { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; color: #999; font-size: 14px; }
.inqv-body { padding: 2.5rem; min-height: 200px; font-size: 15px; color: #444; line-height: 1.8; }
.inqv-files { padding: 0 2.5rem 1.5rem; }
.inqv-files ul { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.inqv-files a { color: #232b52; text-decoration: none; }
.inqv-files a:hover { text-decoration: underline; }
.inqv-reply { margin: 0 2.5rem 2rem; padding: 1.5rem; background: #f4f7fb; border-radius: 12px; }
.inqv-reply-head { display: flex; justify-content: space-between; margin-bottom: 0.75rem; }
.inqv-footer { padding: 1.25rem 2.5rem; border-top: 1px solid #f0f2f5; display: flex; justify-content: center; gap: 1em; }
.inqv-back-btn, .inqv-edit-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; padding: 10px 28px; border-radius: 999px; text-decoration: none; border: 1px solid #e5e9f0; transition: background 0.2s, color 0.2s; }
.inqv-back-btn { background: #f4f7fb; color: #444; }
.inqv-back-btn:hover { background: #232b52; color: #fff; border-color: #232b52; }
.inqv-edit-btn { background: #232b52; color: #fff; border-color: #232b52; }
.inqv-edit-btn:hover { background: #1a2040; color: #fff; }
.inqv-not-found { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 60px 20px; color: #888; font-size: 16px; }

@media (max-width: 600px) {
    .inqv-header { padding: 1.5rem 1.25rem 1.25rem; }
    .inqv-body { padding: 1.5rem 1.25rem; }
    .inqv-footer { padding: 1rem 1.25rem; }
    .inqv-title { font-size: 20px; }
}