/* =========================================================
   IDEUNCS PRODUCT PAGE
   product.css
========================================================= */

/* Product Page Variables */
:root {
    --product-primary: #4a89dc;
    --product-primary-dark: #2563a8;
    --product-navy: #0f172a;
    --product-text: #222;
    --product-sub-text: #667085;
    --product-bg: #f6f8fb;
    --product-border: #e4e9f0;
    --product-white: #ffffff;
}

/* =========================================================
   Product Hero
========================================================= */

.product-hero {
    position: relative;
    padding: 120px 0 110px;
    overflow: hidden;
    color: #ffffff;

    background:
        linear-gradient(
            120deg,
            rgba(8, 23, 45, 0.96),
            rgba(23, 65, 110, 0.88)
        );
}

.product-hero::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -100px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(93, 156, 236, 0.13);
}

.product-hero::after {
    content: "";
    position: absolute;
    bottom: -230px;
    right: 240px;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.product-hero .container {
    position: relative;
    z-index: 2;
}

.product-hero .section-label {
    margin-bottom: 18px;
    color: #74b0ff;
}

.product-hero h1 {
    max-width: 820px;
    margin-bottom: 28px;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -1.5px;
    word-break: keep-all;
}

.product-hero-desc {
    max-width: 720px;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.82);
    word-break: keep-all;
}

/* =========================================================
   Product Category Section
========================================================= */

.product-category-section {
    padding: 110px 0;
    background: var(--product-bg);
}

.product-category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* Category Card */

.product-category-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 570px;
    padding: 38px 34px 32px;
    overflow: hidden;

    background: var(--product-white);
    border: 1px solid var(--product-border);
    border-radius: 20px;

    box-shadow:
        0 8px 25px rgba(15, 23, 42, 0.05);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.product-category-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background: linear-gradient(
        90deg,
        var(--product-primary),
        #83b9ff
    );

    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

.product-category-card:hover {
    transform: translateY(-12px);
    border-color: rgba(74, 137, 220, 0.35);

    box-shadow:
        0 25px 50px rgba(15, 23, 42, 0.13);
}

.product-category-card:hover::before {
    transform: scaleX(1);
}

/* Number */

.product-category-number {
    margin-bottom: 60px;

    font-size: 64px;
    font-weight: 700;
    line-height: 1;

    color: rgba(74, 137, 220, 0.12);

    transition:
        color 0.35s ease,
        transform 0.35s ease;
}

.product-category-card:hover .product-category-number {
    color: rgba(74, 137, 220, 0.22);
    transform: translateX(5px);
}

/* Card Content */

.product-category-content {
    flex: 1;
}

.product-category-label {
    margin-bottom: 12px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;

    color: var(--product-primary);
}

.product-category-content h2 {
    margin-bottom: 22px;

    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.8px;

    color: var(--product-text);
}

.product-category-content > p:not(.product-category-label) {
    min-height: 85px;
    margin-bottom: 28px;

    font-size: 15px;
    line-height: 1.8;

    color: var(--product-sub-text);
    word-break: keep-all;
}

/* Product Category List */

.product-category-content ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 18px;

    margin: 0;
    padding: 0;

    list-style: none;
    border-top: 1px solid #eef1f5;
}

.product-category-content li {
    position: relative;

    padding: 13px 0 13px 14px;

    font-size: 14px;
    color: #4b5563;

    border-bottom: 1px solid #eef1f5;
}

.product-category-content li::before {
    content: "";

    position: absolute;
    top: 50%;
    left: 0;

    width: 5px;
    height: 5px;

    border-radius: 50%;
    background: var(--product-primary);

    transform: translateY(-50%);
}

/* Arrow */

.product-category-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;
    margin-top: 32px;

    font-size: 24px;
    font-weight: 700;

    color: var(--product-primary);

    border: 1px solid rgba(74, 137, 220, 0.35);
    border-radius: 50%;

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        color 0.35s ease;
}

.product-category-card:hover .product-category-arrow {
    transform: translateX(8px);
    background: var(--product-primary);
    color: #ffffff;
}

/* =========================================================
   Product Support Section
========================================================= */

.product-support {
    padding: 100px 0;
    background: #ffffff;
}

.product-support-box {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;

    padding: 65px 70px;
    overflow: hidden;

    color: #ffffff;

    background:
        linear-gradient(
            125deg,
            #0d2038,
            #173e67
        );

    border-radius: 24px;

    box-shadow:
        0 20px 45px rgba(15, 23, 42, 0.16);
}

.product-support-box::before {
    content: "";

    position: absolute;
    top: -130px;
    right: -80px;

    width: 380px;
    height: 380px;

    border-radius: 50%;
    background: rgba(93, 156, 236, 0.13);
}

.product-support-box::after {
    content: "";

    position: absolute;
    bottom: -180px;
    right: 220px;

    width: 350px;
    height: 350px;

    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.product-support-box > div,
.product-support-btn {
    position: relative;
    z-index: 2;
}

.product-support .section-label {
    margin-bottom: 14px;
    color: #76b2ff;
}

.product-support h2 {
    margin-bottom: 18px;

    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.7px;
}

.product-support p {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.8;

    color: rgba(255, 255, 255, 0.75);
    word-break: keep-all;
}

.product-support-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    min-width: 180px;
    padding: 15px 26px;

    font-size: 15px;
    font-weight: 600;

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 30px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.product-support-btn:hover {
    background: #ffffff;
    color: #183c64;
    transform: translateY(-3px);
}

/* =========================================================
   Tablet
========================================================= */

@media (max-width: 1024px) {

    .product-hero {
        padding: 100px 0 90px;
    }

    .product-hero h1 {
        font-size: 42px;
    }

    .product-category-grid {
        grid-template-columns: 1fr;
        max-width: 760px;
        margin: 0 auto;
    }

    .product-category-card {
        min-height: auto;
    }

    .product-category-number {
        margin-bottom: 35px;
    }

    .product-category-content > p:not(.product-category-label) {
        min-height: auto;
    }

    .product-support-box {
        padding: 55px 50px;
    }
}

/* =========================================================
   Mobile
========================================================= */

@media (max-width: 768px) {

    .product-hero {
        padding: 80px 0 75px;
    }

    .product-hero h1 {
        font-size: 34px;
        line-height: 1.4;
    }

    .product-hero-desc {
        font-size: 16px;
    }

    .product-hero-desc br {
        display: none;
    }

    .product-category-section {
        padding: 75px 0;
    }

    .product-category-card {
        padding: 30px 24px 27px;
        border-radius: 16px;
    }

    .product-category-number {
        margin-bottom: 28px;
        font-size: 52px;
    }

    .product-category-content h2 {
        font-size: 27px;
    }

    .product-category-content > p:not(.product-category-label) br {
        display: none;
    }

    .product-category-content ul {
        grid-template-columns: 1fr;
    }

    .product-support {
        padding: 70px 0;
    }

    .product-support-box {
        flex-direction: column;
        align-items: flex-start;

        padding: 42px 28px;
        border-radius: 18px;
    }

    .product-support h2 {
        font-size: 27px;
    }

    .product-support p br {
        display: none;
    }

    .product-support-btn {
        width: 100%;
    }
}

/* =========================================================
   Small Mobile
========================================================= */

@media (max-width: 480px) {

    .product-hero h1 {
        font-size: 29px;
    }

    .product-category-number {
        font-size: 45px;
    }

    .product-category-content h2 {
        font-size: 25px;
    }

    .product-support h2 {
        font-size: 24px;
    }
}

/* =========================================================
   RETAIL PRODUCT PAGE
========================================================= */

/* Retail Hero */

.retail-hero {
    position: relative;
    padding: 95px 0 90px;
    overflow: hidden;
    color: #ffffff;
    background:
        linear-gradient(
            120deg,
            rgba(8, 23, 45, 0.97),
            rgba(24, 66, 110, 0.9)
        );
}

.retail-hero::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -80px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: rgba(93, 156, 236, 0.12);
}

.retail-hero .container {
    position: relative;
    z-index: 2;
}

.product-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 45px;
    font-size: 13px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.6);
}

.product-breadcrumb a {
    color: rgba(255, 255, 255, 0.7);
}

.product-breadcrumb a:hover {
    color: #ffffff;
}

.retail-hero .section-label {
    margin-bottom: 16px;
    color: #76b2ff;
}

.retail-hero h1 {
    margin-bottom: 24px;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -1.4px;
}

.retail-hero-desc {
    font-size: 17px;
    font-weight: 300;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.8);
}

/* Retail Main */

.retail-product-main {
    padding: 90px 0 110px;
    background: #f6f8fb;
}

/* Category Tabs */

.retail-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 85px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.05);
}

.retail-tab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 78px;
    padding: 15px;
    background: #ffffff;
    border: 0;
    border-right: 1px solid #e7ebf0;
    color: #667085;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background 0.3s ease,
        color 0.3s ease;
}

.retail-tab:last-child {
    border-right: 0;
}

.retail-tab::after {
    content: "";
    position: absolute;
    right: 20%;
    bottom: 0;
    left: 20%;
    height: 3px;
    background: #4a89dc;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.retail-tab:hover,
.retail-tab.active {
    color: #2563a8;
    background: #f8fbff;
}

.retail-tab.active::after {
    transform: scaleX(1);
}

.retail-tab-number {
    font-size: 12px;
    font-weight: 700;
    color: #9aa4b2;
}

/* Product Panels */

.retail-product-panel {
    display: none;
}

.retail-product-panel.active {
    display: block;
}

.retail-section-heading {
    display: block;
    margin-bottom: 45px;
}

.retail-section-heading > div {
    margin-bottom: 18px;
}

.retail-section-heading .section-label {
    margin-bottom: 12px;
}

.retail-section-heading h2 {
    margin: 0;
    font-size: 38px;
    line-height: 1.3;
    color: #172033;
}

.retail-section-heading > p {
    max-width: 700px;
    margin: 0;
    color: #667085;
    font-size: 16px;
    line-height: 1.8;
    text-align: left;
    word-break: keep-all;
}

/* Two Product Grid */

.retail-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.retail-product-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 980px;
    margin: 0 auto;
}

/* Product Card */

.retail-product-card {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.retail-product-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #4a89dc, #8bc0ff);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

.retail-product-card:hover {
    transform: translateY(-10px);
    border-color: rgba(74, 137, 220, 0.35);
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.13);
}

.retail-product-card:hover::before {
    transform: scaleX(1);
}

/* Product Image */

.retail-product-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 350px;
    padding: 40px;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f3f6fa
        );
    border-bottom: 1px solid #edf0f4;
}

.retail-product-image img {
    display: block;
    max-width: 100%;
    max-height: 270px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.retail-product-card:hover .retail-product-image img {
    transform: scale(1.05);
}

/* Product Information */

.retail-product-info {
    padding: 34px 34px 32px;
}

.retail-product-brand {
    margin-bottom: 9px;
    color: #4a89dc;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.retail-product-info h3 {
    margin-bottom: 17px;
    color: #172033;
    font-size: 29px;
    font-weight: 700;
    line-height: 1.25;
}

.retail-product-summary {
    min-height: 58px;
    margin-bottom: 25px;
    color: #667085;
    font-size: 15px;
    line-height: 1.8;
    word-break: keep-all;
}

.retail-product-features {
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
    border-top: 1px solid #edf0f4;
}

.retail-product-features li {
    position: relative;
    padding: 12px 0 12px 19px;
    color: #4b5563;
    font-size: 14px;
    border-bottom: 1px solid #edf0f4;
}

.retail-product-features li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 1px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4a89dc;
    transform: translateY(-50%);
}

/* Product Buttons */

.retail-product-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.retail-detail-link,
.retail-quote-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.retail-detail-link {
    flex: 1;
    gap: 10px;
    color: #ffffff;
    background: #326fae;
    border: 1px solid #326fae;
}

.retail-detail-link span {
    transition: transform 0.3s ease;
}

.retail-detail-link:hover {
    color: #ffffff;
    background: #245d98;
}

.retail-detail-link:hover span {
    transform: translateX(5px);
}

.retail-quote-link {
    min-width: 115px;
    padding: 0 20px;
    color: #326fae;
    background: #ffffff;
    border: 1px solid #b9cce1;
}

.retail-quote-link:hover {
    color: #ffffff;
    background: #326fae;
    border-color: #326fae;
}

/* Empty Panels */

.retail-empty-panel {
    padding: 100px 30px;
    text-align: center;
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 20px;
}

.retail-empty-panel h2 {
    margin-bottom: 15px;
    color: #172033;
    font-size: 30px;
}

.retail-empty-panel > p:last-child {
    color: #667085;
}

/* Retail CTA */

.retail-product-cta {
    padding: 100px 0;
    background: #ffffff;
}

.retail-product-cta-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    padding: 62px 68px;
    overflow: hidden;
    color: #ffffff;
    background: linear-gradient(125deg, #0d2038, #173e67);
    border-radius: 24px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.16);
}

.retail-product-cta-box::before {
    content: "";
    position: absolute;
    top: -130px;
    right: -60px;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: rgba(93, 156, 236, 0.13);
}

.retail-product-cta-box > div,
.retail-product-cta-box > a {
    position: relative;
    z-index: 2;
}

.retail-product-cta-box h2 {
    margin-bottom: 18px;
    font-size: 31px;
    line-height: 1.4;
}

.retail-product-cta-box p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 15px;
    line-height: 1.8;
}

.retail-product-cta-box > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 180px;
    padding: 15px 25px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 30px;
    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.retail-product-cta-box > a:hover {
    color: #173e67;
    background: #ffffff;
    transform: translateY(-3px);
}

/* Tablet */

@media (max-width: 1024px) {

    .retail-product-grid,
    .retail-product-grid-two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .retail-product-image {
        height: 310px;
    }

    .retail-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .retail-section-heading > p {
        text-align: left;
    }

    .retail-product-cta-box {
        padding: 52px 48px;
    }
}

/* Mobile */

@media (max-width: 768px) {

    .retail-hero {
        padding: 75px 0 70px;
    }

    .product-breadcrumb {
        margin-bottom: 30px;
    }

    .retail-hero h1 {
        font-size: 34px;
    }

    .retail-hero-desc {
        font-size: 15px;
    }

    .retail-hero-desc br {
        display: none;
    }

    .retail-product-main {
        padding: 70px 0 80px;
    }

    .retail-tabs {
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 60px;
    }

    .retail-tab:nth-child(2) {
        border-right: 0;
    }

    .retail-tab:nth-child(-n+2) {
        border-bottom: 1px solid #e7ebf0;
    }

    .retail-product-grid,
    .retail-product-grid-two {
        grid-template-columns: 1fr;
    }

    .retail-section-heading h2 {
        font-size: 31px;
    }

    .retail-product-image {
        height: 300px;
    }

    .retail-product-info {
        padding: 29px 25px 27px;
    }

    .retail-product-actions {
        flex-direction: column;
    }

    .retail-detail-link,
    .retail-quote-link {
        width: 100%;
    }

    .retail-product-cta {
        padding: 70px 0;
    }

    .retail-product-cta-box {
        align-items: flex-start;
        flex-direction: column;
        padding: 42px 28px;
        border-radius: 18px;
    }

    .retail-product-cta-box h2 {
        font-size: 26px;
    }

    .retail-product-cta-box > a {
        width: 100%;
    }
}

/* =========================================================
   PRODUCT DETAIL PAGE
   Toshiba TCx820
========================================================= */

/* Page Base */

.product-detail-page {
    background: #ffffff;
}

/* =========================================================
   Product Detail Hero
========================================================= */

.product-detail-hero {
    padding: 70px 0 100px;
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f5f8fc 100%
        );
}

.product-detail-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 55px;
    color: #8a94a3;
    font-size: 13px;
    letter-spacing: 0.5px;
}

.product-detail-breadcrumb a {
    color: #667085;
    transition: color 0.25s ease;
}

.product-detail-breadcrumb a:hover {
    color: #326fae;
}

.product-detail-breadcrumb strong {
    color: #326fae;
    font-weight: 600;
}

.product-detail-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: 80px;
}

/* Product Image */

.product-detail-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 560px;
    padding: 70px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e5eaf0;
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.product-detail-image::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(74, 137, 220, 0.08);
}

.product-detail-image::after {
    content: "";
    position: absolute;
    bottom: -100px;
    left: -100px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 1px solid rgba(74, 137, 220, 0.12);
}

.product-detail-image img {
    position: relative;
    z-index: 2;
    display: block;
    max-width: 100%;
    max-height: 430px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 25px 25px rgba(15, 23, 42, 0.18));
}

/* Product Summary */

.product-detail-summary {
    max-width: 600px;
}

.product-detail-brand {
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2.5px;
}

.brand-hp {
    color: #0096d6;
}

.brand-toshiba {
    color: #e31b23;
}

.brand-lg {
    color: #a50034;
}

.product-detail-summary h1 {
    margin-bottom: 18px;
    color: #111827;
    font-size: 66px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -2px;
}

.product-detail-subtitle {
    margin-bottom: 26px;
    color: #1f3653;
    font-size: 27px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.6px;
}

.product-detail-description {
    margin-bottom: 30px;
    color: #667085;
    font-size: 16px;
    line-height: 1.9;
    word-break: keep-all;
}

.product-detail-highlights {
    margin: 0 0 34px;
    padding: 0;
    list-style: none;
    border-top: 1px solid #e8edf3;
}

.product-detail-highlights li {
    position: relative;
    padding: 13px 0 13px 24px;
    color: #414b5a;
    font-size: 15px;
    border-bottom: 1px solid #e8edf3;
}

.product-detail-highlights li::before {
    content: "✓";
    position: absolute;
    top: 12px;
    left: 0;
    color: #326fae;
    font-weight: 700;
}

/* Hero Buttons */

.product-detail-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px;
}

.product-detail-primary-btn,
.product-detail-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 26px;
    border-radius: 28px;
    font-size: 14px;
    font-weight: 600;
    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.product-detail-primary-btn {
    color: #ffffff;
    background: #326fae;
    border: 1px solid #326fae;
}

.product-detail-primary-btn:hover {
    color: #ffffff;
    background: #245d98;
    transform: translateY(-2px);
}

.product-detail-secondary-btn {
    color: #326fae;
    background: #ffffff;
    border: 1px solid #b9cce1;
}

.product-detail-secondary-btn:hover {
    color: #ffffff;
    background: #326fae;
    border-color: #326fae;
    transform: translateY(-2px);
}

/* =========================================================
   Shared Detail Heading
========================================================= */

.product-detail-heading {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

.product-detail-heading .section-label {
    margin-bottom: 15px;
}

.product-detail-heading h2 {
    margin-bottom: 18px;
    color: #172033;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -1px;
}

.product-detail-heading > p:last-child {
    color: #667085;
    font-size: 16px;
    line-height: 1.8;
    word-break: keep-all;
}

/* =========================================================
   Key Features
========================================================= */

.product-detail-features {
    padding: 110px 0;
    background: #f6f8fb;
}

.product-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.product-feature-card {
    position: relative;
    min-height: 255px;
    padding: 34px 30px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e3e9f0;
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.05);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.product-feature-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #326fae, #7eb4ef);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

.product-feature-card:hover {
    transform: translateY(-8px);
    border-color: rgba(50, 111, 174, 0.3);
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.11);
}

.product-feature-card:hover::before {
    transform: scaleX(1);
}

.product-feature-number {
    display: block;
    margin-bottom: 35px;
    color: rgba(50, 111, 174, 0.22);
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
}

.product-feature-card h3 {
    margin-bottom: 14px;
    color: #172033;
    font-size: 21px;
    line-height: 1.35;
}

.product-feature-card p {
    color: #667085;
    font-size: 14px;
    line-height: 1.8;
    word-break: keep-all;
}

/* =========================================================
   Specifications
========================================================= */

.product-detail-specification {
    padding: 110px 0;
    background: #ffffff;
}

.product-spec-table-wrap {
    max-width: 1050px;
    margin: 0 auto;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #dde4ec;
    border-radius: 22px;
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.06);
}

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

.product-spec-table th,
.product-spec-table td {
    padding: 22px 27px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #e7ebf0;
}

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

.product-spec-table th {
    width: 230px;
    color: #23344b;
    background: #f5f8fb;
    font-size: 15px;
    font-weight: 700;
}

.product-spec-table td {
    color: #596273;
    font-size: 15px;
    line-height: 1.8;
}

/* =========================================================
   IDEUNCS Service
========================================================= */

.product-detail-service {
    position: relative;
    padding: 110px 0;
    overflow: hidden;
    color: #ffffff;
    background:
        linear-gradient(
            125deg,
            #0b1e35,
            #173f69
        );
}

.product-detail-service::before {
    content: "";
    position: absolute;
    top: -170px;
    right: -100px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: rgba(105, 165, 235, 0.1);
}

.product-detail-service .container {
    position: relative;
    z-index: 2;
}

.product-detail-heading.light h2 {
    color: #ffffff;
}

.product-detail-heading.light > p:last-child {
    color: rgba(255, 255, 255, 0.72);
}

.product-detail-heading.light .section-label {
    color: #78b6ff;
}

.product-service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.product-service-item {
    min-height: 235px;
    padding: 31px 27px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 18px;
    backdrop-filter: blur(6px);
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease;
}

.product-service-item:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}

.product-service-item span {
    display: block;
    margin-bottom: 38px;
    color: #78b6ff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}

.product-service-item h3 {
    margin-bottom: 14px;
    color: #ffffff;
    font-size: 20px;
}

.product-service-item p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.8;
    word-break: keep-all;
}

/* =========================================================
   Quote CTA
========================================================= */

.product-detail-quote {
    padding: 100px 0;
    background: #ffffff;
}

.product-detail-quote-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 55px;
    padding: 64px 70px;
    overflow: hidden;
    color: #ffffff;
    background:
        linear-gradient(
            125deg,
            #152b47,
            #245b91
        );
    border-radius: 26px;
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.16);
}

.product-detail-quote-box::before {
    content: "";
    position: absolute;
    top: -130px;
    right: -70px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
}

.product-detail-quote-box > div {
    position: relative;
    z-index: 2;
}

.product-detail-quote-box .section-label {
    margin-bottom: 14px;
    color: #88c0ff;
}

.product-detail-quote-box h2 {
    margin-bottom: 17px;
    color: #ffffff;
    font-size: 32px;
    line-height: 1.4;
    letter-spacing: -0.6px;
}

.product-detail-quote-box p {
    color: rgba(255, 255, 255, 0.74);
    font-size: 15px;
    line-height: 1.8;
}

.product-detail-quote-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    gap: 17px;
}

.product-detail-quote-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    min-height: 51px;
    color: #173e67;
    background: #ffffff;
    border-radius: 28px;
    font-size: 15px;
    font-weight: 700;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.product-detail-quote-actions a:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.16);
}

.product-detail-quote-actions strong {
    color: rgba(255, 255, 255, 0.88);
    font-size: 16px;
    letter-spacing: 0.5px;
}

/* =========================================================
   Detail Page Tablet
========================================================= */

@media (max-width: 1100px) {

    .product-detail-hero-grid {
        gap: 45px;
    }

    .product-detail-image {
        min-height: 480px;
        padding: 50px;
    }

    .product-detail-summary h1 {
        font-size: 56px;
    }

    .product-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================================================
   Detail Page Mobile
========================================================= */

@media (max-width: 768px) {

    .product-detail-hero {
        padding: 50px 0 75px;
    }

    .product-detail-breadcrumb {
        margin-bottom: 35px;
    }

    .product-detail-hero-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .product-detail-image {
        min-height: 360px;
        padding: 35px 25px;
        border-radius: 20px;
    }

    .product-detail-image img {
        max-height: 290px;
    }

    .product-detail-summary h1 {
        font-size: 47px;
    }

    .product-detail-subtitle {
        font-size: 23px;
    }

    .product-detail-description {
        font-size: 15px;
    }

    .product-detail-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .product-detail-primary-btn,
    .product-detail-secondary-btn {
        width: 100%;
    }

    .product-detail-features,
    .product-detail-specification,
    .product-detail-service {
        padding: 78px 0;
    }

    .product-detail-heading {
        margin-bottom: 42px;
    }

    .product-detail-heading h2 {
        font-size: 31px;
    }

    .product-feature-grid {
        grid-template-columns: 1fr;
    }

    .product-feature-card {
        min-height: auto;
    }

    .product-spec-table-wrap {
        overflow-x: auto;
        border-radius: 15px;
    }

    .product-spec-table {
        min-width: 720px;
    }

    .product-spec-table th,
    .product-spec-table td {
        padding: 18px 20px;
    }

    .product-service-grid {
        grid-template-columns: 1fr;
    }

    .product-service-item {
        min-height: auto;
    }

    .product-detail-quote {
        padding: 70px 0;
    }

    .product-detail-quote-box {
        flex-direction: column;
        align-items: flex-start;
        padding: 43px 28px;
        border-radius: 19px;
    }

    .product-detail-quote-box h2 {
        font-size: 26px;
    }

    .product-detail-quote-actions {
        align-items: stretch;
        width: 100%;
    }

    .product-detail-quote-actions a {
        width: 100%;
    }
}

/* =========================================================
   Small Mobile
========================================================= */

@media (max-width: 480px) {

    .product-detail-summary h1 {
        font-size: 41px;
    }

    .product-detail-subtitle {
        font-size: 21px;
    }

    .product-detail-heading h2 {
        font-size: 28px;
    }

    .product-detail-image {
        min-height: 310px;
    }
}

/* =========================================================
   HP ENGAGE ONE PRO G2 DETAIL PAGE
========================================================= */

/* HP 제품명 길이 보정 */
.product-detail-summary h1 {
    word-break: keep-all;
}

/* HP 상세페이지에서만 적용 */
body:has(.product-detail-brand) .product-detail-summary {
    min-width: 0;
}

/* Engage One Pro G2 제목 크기 */
.product-detail-summary h1 {
    line-height: 1.08;
}

/* HP 로고 컬러 */
.product-detail-brand {
    color: #0096d6;
}

/* 제품 이미지가 작게 보일 때 확대 */
.product-detail-image img[alt*="HP Engage One"] {
    max-width: 92%;
    max-height: 440px;
}

/* HP 버튼 3개 정렬 */
.product-detail-buttons {
    row-gap: 12px;
}

/* 기술자료 버튼 길이 통일 */
.product-detail-secondary-btn {
    min-width: 135px;
}

/* 긴 사양 내용 줄바꿈 */
.product-spec-table td {
    word-break: keep-all;
}

/* 태블릿 */
@media (max-width: 1100px) {

    .product-detail-image img[alt*="HP Engage One"] {
        max-width: 96%;
        max-height: 390px;
    }

    .product-detail-summary h1 {
        font-size: 50px;
    }
}

/* 모바일 */
@media (max-width: 768px) {

    .product-detail-summary h1 {
        font-size: 40px;
        line-height: 1.12;
    }

    .product-detail-image img[alt*="HP Engage One"] {
        max-width: 100%;
        max-height: 280px;
    }

    .product-detail-buttons {
        display: grid;
        grid-template-columns: 1fr;
    }

    .product-detail-primary-btn,
    .product-detail-secondary-btn {
        width: 100%;
        min-width: 0;
    }
}

/* =========================================================
   HP ENGAGE ONE PRO G2 DETAIL PAGE
========================================================= */

.product-detail-summary h1 {
    word-break: keep-all;
    line-height: 1.08;
}

.product-detail-image img[alt*="HP Engage One"] {
    max-width: 92%;
    max-height: 440px;
}

.product-detail-buttons {
    row-gap: 12px;
}

.product-detail-secondary-btn {
    min-width: 135px;
}

.product-spec-table td {
    word-break: keep-all;
}

@media (max-width: 1100px) {

    .product-detail-image img[alt*="HP Engage One"] {
        max-width: 96%;
        max-height: 390px;
    }

    .product-detail-summary h1 {
        font-size: 50px;
    }
}

@media (max-width: 768px) {

    .product-detail-summary h1 {
        font-size: 40px;
        line-height: 1.12;
    }

    .product-detail-image img[alt*="HP Engage One"] {
        max-width: 100%;
        max-height: 280px;
    }

    .product-detail-buttons {
        display: grid;
        grid-template-columns: 1fr;
    }

    .product-detail-primary-btn,
    .product-detail-secondary-btn {
        width: 100%;
        min-width: 0;
    }
}

/* =========================================================
   LG KIOSK PRODUCT
========================================================= */

.retail-product-grid-one {
    grid-template-columns: minmax(0, 520px);
    justify-content: center;
}

.brand-lg {
    color: #a50034;
}

@media (max-width: 768px) {
    .retail-product-grid-one {
        grid-template-columns: 1fr;
    }
}

/* 제품 브랜드 색상 최종 강제 적용 */

.product-detail-brand.brand-toshiba {
    color: #e31b23 !important;
}

.product-detail-brand.brand-hp {
    color: #0096d6 !important;
}

.product-detail-brand.brand-lg {
    color: #a50034 !important;
}

/* LANDI Brand */

.product-detail-brand.brand-landi,
.retail-product-brand.brand-landi {
    color: #00a8e8;
}

/* =========================================================
   RETAIL PERIPHERAL PRODUCTS
========================================================= */

.retail-product-type {
    margin: 0 0 8px;
    color: #8a94a3;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.brand-bixolon {
    color: #f47b20;
}

.brand-datalogic {
    color: #0067a0;
}

.brand-btc {
    color: #253d74;
}

/* 주변장치 카드 3개 높이 통일 */
#panel-peripheral .retail-product-card {
    display: flex;
    flex-direction: column;
}

#panel-peripheral .retail-product-info {
    display: flex;
    flex: 1;
    flex-direction: column;
}

#panel-peripheral .retail-product-summary {
    min-height: 82px;
}

#panel-peripheral .retail-product-features {
    flex: 1;
}

#panel-peripheral .retail-product-actions {
    margin-top: auto;
}

@media (max-width: 1024px) {

    #panel-peripheral .retail-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {

    #panel-peripheral .retail-product-grid {
        grid-template-columns: 1fr;
    }

    #panel-peripheral .retail-product-summary {
        min-height: auto;
    }
}

.product-detail-brand.brand-bixolon,
.retail-product-brand.brand-bixolon {
    color: #f47b20;
}

/* =========================================================
   DATALOGIC QUICKSCAN 2500 DETAIL
========================================================= */

.product-detail-brand.brand-datalogic,
.retail-product-brand.brand-datalogic {
    color: #0067a0;
}

.product-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.product-detail-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    color: #356d94;
    background: #edf6fc;
    border: 1px solid #cfe4f2;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

.datalogic-product-image {
    position: relative;
}

.product-image-badge {
    position: absolute;
    top: 28px;
    left: 28px;
    z-index: 4;
    padding: 9px 14px;
    color: #ffffff;
    background: #0067a0;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

/* Product Lineup */

.datalogic-lineup-section {
    padding: 105px 0;
    background: #ffffff;
}

.datalogic-lineup-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.datalogic-lineup-card {
    position: relative;
    min-height: 260px;
    padding: 31px 27px;
    overflow: hidden;
    background: #f7f9fc;
    border: 1px solid #e0e7ef;
    border-radius: 18px;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.datalogic-lineup-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #0067a0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.datalogic-lineup-card:hover {
    transform: translateY(-7px);
    border-color: rgba(0, 103, 160, 0.3);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
}

.datalogic-lineup-card:hover::before {
    transform: scaleX(1);
}

.datalogic-lineup-card > span {
    display: block;
    margin-bottom: 32px;
    color: rgba(0, 103, 160, 0.25);
    font-size: 37px;
    font-weight: 700;
    line-height: 1;
}

.datalogic-lineup-type {
    margin-bottom: 8px;
    color: #0067a0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.datalogic-lineup-card h3 {
    margin-bottom: 15px;
    color: #172033;
    font-size: 25px;
}

.datalogic-lineup-card > p:last-child {
    color: #667085;
    font-size: 14px;
    line-height: 1.8;
    word-break: keep-all;
}

@media (max-width: 1024px) {

    .datalogic-lineup-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {

    .product-image-badge {
        top: 18px;
        left: 18px;
    }

    .datalogic-lineup-section {
        padding: 75px 0;
    }

    .datalogic-lineup-grid {
        grid-template-columns: 1fr;
    }

    .datalogic-lineup-card {
        min-height: auto;
    }
}

/* =========================================================
   BTC SECU SPS184 PASSPORT READER
========================================================= */

.product-detail-brand.brand-btc,
.retail-product-brand.brand-btc {
    color: #253d74;
}

.passport-image-badge {
    background: #253d74;
}

/* Application Section */

.passport-application-section {
    padding: 105px 0;
    background: #ffffff;
}

.passport-application-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.passport-application-card {
    position: relative;
    min-height: 240px;
    padding: 31px 27px;
    overflow: hidden;
    background: #f7f9fc;
    border: 1px solid #e0e7ef;
    border-radius: 18px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.passport-application-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: #253d74;

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.3s ease;
}

.passport-application-card:hover {
    transform: translateY(-7px);
    border-color: rgba(37, 61, 116, 0.3);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
}

.passport-application-card:hover::before {
    transform: scaleX(1);
}

.passport-application-card > span {
    display: block;
    margin-bottom: 34px;

    color: rgba(37, 61, 116, 0.25);

    font-size: 37px;
    font-weight: 700;
    line-height: 1;
}

.passport-application-card h3 {
    margin-bottom: 14px;

    color: #172033;

    font-size: 23px;
}

.passport-application-card p {
    color: #667085;

    font-size: 14px;
    line-height: 1.8;

    word-break: keep-all;
}

@media (max-width: 1024px) {

    .passport-application-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {

    .passport-application-section {
        padding: 75px 0;
    }

    .passport-application-grid {
        grid-template-columns: 1fr;
    }

    .passport-application-card {
        min-height: auto;
    }
}

.product-detail-brand.brand-solum,
.retail-product-brand.brand-solum {
    color: #00a19b;
}

/* =========================================================
   SOLUM ESL
   - 리테일 목록 카드
   - ESL 상세페이지 전용
========================================================= */


/* =========================================================
   1. RETAIL LIST PAGE
========================================================= */

/* SOLUM 브랜드 색상 */
.product-detail-brand.brand-solum,
.retail-product-brand.brand-solum {
    color: #3b087c;
}

/*
   중요:
   ESL 목록 패널에는 배경색, 좌우 여백, 별도 padding을 주지 않는다.
   POS / KIOSK / PDA / PERIPHERAL과 동일한 공통 구조를 사용한다.
*/
#panel-solution {
    background: transparent;
}

/* 제품 한 개일 때 카드 가운데 배치 */
#panel-solution .retail-product-grid-one {
    display: grid;
    grid-template-columns: minmax(0, 520px);
    justify-content: center;
}

/* ESL 카드도 다른 제품 카드와 동일한 높이 구조 */
#panel-solution .retail-product-card {
    display: flex;
    flex-direction: column;
}

/* 카드 이미지 영역 */
#panel-solution .retail-product-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ESL 제품 이미지 크기 조정 */
#panel-solution .retail-product-image img {
    width: auto;
    max-width: 82%;
    max-height: 300px;
    object-fit: contain;
}

/* 카드 내용 */
#panel-solution .retail-product-info {
    display: flex;
    flex: 1;
    flex-direction: column;
}

/* 제품 설명 */
#panel-solution .retail-product-summary {
    min-height: 82px;
}

/* 특징 목록이 남은 높이를 채우도록 */
#panel-solution .retail-product-features {
    flex: 1;
}

/* 버튼을 카드 아래에 고정 */
#panel-solution .retail-product-actions {
    margin-top: auto;
}


/* =========================================================
   2. SOLUM ESL DETAIL PAGE - HERO
========================================================= */

.solum-detail-hero {
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f7f4fb 100%
        );
}

.solum-image-badge {
    background: #3b087c;
}

.solum-badge {
    color: #5e2b91;
    background: #f3edfa;
    border-color: #dfd0ef;
}

/* ESL 제품 이미지 영역 */
.solum-product-image {
    position: relative;
}

.solum-product-image img {
    width: auto;
    max-width: 90%;
    max-height: 450px;
    object-fit: contain;
}


/* =========================================================
   3. ESL BENEFITS
========================================================= */

.solum-benefit-section {
    padding: 105px 0;
    background: #ffffff;
}

.solum-benefit-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.solum-benefit-card {
    position: relative;
    min-height: 235px;
    padding: 31px 27px;
    overflow: hidden;

    background: #f8f7fa;
    border: 1px solid #e6e1eb;
    border-radius: 18px;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.solum-benefit-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            #3b087c,
            #8852b7
        );

    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.solum-benefit-card:hover {
    transform: translateY(-7px);
    border-color: rgba(59, 8, 124, 0.28);
    box-shadow: 0 18px 40px rgba(25, 13, 40, 0.1);
}

.solum-benefit-card:hover::before {
    transform: scaleX(1);
}

.solum-benefit-card > span {
    display: block;
    margin-bottom: 34px;

    color: rgba(59, 8, 124, 0.22);

    font-size: 38px;
    font-weight: 700;
    line-height: 1;
}

.solum-benefit-card h3 {
    margin-bottom: 14px;

    color: #172033;

    font-size: 21px;
}

.solum-benefit-card p {
    color: #667085;

    font-size: 14px;
    line-height: 1.8;

    word-break: keep-all;
}


/* =========================================================
   4. ESL PRODUCT LINEUP
========================================================= */

.solum-lineup-section {
    padding: 110px 0;
    background: #f5f4f7;
}

.solum-lineup-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;
}

.solum-lineup-card {
    position: relative;
    min-height: 440px;
    padding: 37px 34px;
    overflow: hidden;

    background: #ffffff;
    border: 1px solid #e1dde6;
    border-radius: 22px;

    box-shadow: 0 10px 30px rgba(27, 18, 40, 0.05);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.solum-lineup-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background:
        linear-gradient(
            90deg,
            #3b087c,
            #8a54bd
        );

    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

.solum-lineup-card:hover {
    transform: translateY(-8px);
    border-color: rgba(59, 8, 124, 0.28);
    box-shadow: 0 22px 48px rgba(27, 18, 40, 0.11);
}

.solum-lineup-card:hover::before {
    transform: scaleX(1);
}

/* 강조 카드 */
.solum-lineup-card-featured {
    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #260554,
            #54238d
        );

    border-color: transparent;
}

.solum-lineup-card-featured::before {
    background: #c59cff;
}

/* 카드 상단 번호와 종류 */
.solum-lineup-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 30px;
}

.solum-lineup-number {
    color: rgba(59, 8, 124, 0.24);

    font-size: 41px;
    font-weight: 700;
    line-height: 1;
}

.solum-lineup-card-featured .solum-lineup-number {
    color: rgba(255, 255, 255, 0.26);
}

.solum-lineup-type {
    margin: 0;

    color: #6d349f;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.solum-lineup-card-featured .solum-lineup-type {
    color: #d9b7ff;
}

/* 제목 */
.solum-lineup-card h3 {
    margin-bottom: 18px;

    color: #172033;

    font-size: 31px;
    line-height: 1.25;
    letter-spacing: -0.5px;
}

.solum-lineup-card-featured h3 {
    color: #ffffff;
}

/* 소개 문구 */
.solum-lineup-description {
    margin-bottom: 25px;

    color: #667085;

    font-size: 15px;
    line-height: 1.8;

    word-break: keep-all;
}

.solum-lineup-card-featured .solum-lineup-description {
    color: rgba(255, 255, 255, 0.74);
}

/* 특징 목록 */
.solum-lineup-card ul {
    margin: 0;
    padding: 0;

    list-style: none;

    border-top: 1px solid #ece8ef;
}

.solum-lineup-card-featured ul {
    border-top-color: rgba(255, 255, 255, 0.16);
}

.solum-lineup-card li {
    position: relative;

    padding: 11px 0 11px 21px;

    color: #4f5969;

    font-size: 14px;
    line-height: 1.55;

    border-bottom: 1px solid #ece8ef;
}

.solum-lineup-card-featured li {
    color: rgba(255, 255, 255, 0.78);
    border-bottom-color: rgba(255, 255, 255, 0.13);
}

.solum-lineup-card li::before {
    content: "✓";
    position: absolute;
    top: 10px;
    left: 0;

    color: #653095;

    font-weight: 700;
}

.solum-lineup-card-featured li::before {
    color: #d4a9ff;
}


/* =========================================================
   5. NEWTON E-PAPER 32 WIDE CARD
========================================================= */

.solum-lineup-wide {
    grid-column: 1 / -1;
    min-height: auto;
}

.solum-large-product-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    align-items: start;
    gap: 65px;
}

.solum-lineup-wide ul {
    border-top: 0;
}


/* =========================================================
   6. ESL FEATURE SECTION
========================================================= */

.solum-feature-section .product-feature-card::before {
    background:
        linear-gradient(
            90deg,
            #3b087c,
            #9c6ac5
        );
}

.solum-feature-section .product-feature-number {
    color: rgba(59, 8, 124, 0.22);
}


/* =========================================================
   7. ESL SPECIFICATIONS
========================================================= */

.solum-spec-section .product-spec-table th {
    color: #3b2455;
    background: #f6f2fa;
}


/* =========================================================
   8. ESL APPLICATION
========================================================= */

.solum-application-section {
    padding: 110px 0;
    background: #ffffff;
}

.solum-application-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.solum-application-card {
    position: relative;
    min-height: 230px;
    padding: 31px 28px;
    overflow: hidden;

    background: #f8f7fa;
    border: 1px solid #e6e1eb;
    border-radius: 18px;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.solum-application-card::before {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -70px;

    width: 170px;
    height: 170px;

    border: 1px solid rgba(59, 8, 124, 0.09);
    border-radius: 50%;
}

.solum-application-card:hover {
    transform: translateY(-7px);
    border-color: rgba(59, 8, 124, 0.28);
    box-shadow: 0 18px 40px rgba(27, 18, 40, 0.1);
}

.solum-application-card > span {
    display: block;
    margin-bottom: 34px;

    color: rgba(59, 8, 124, 0.23);

    font-size: 38px;
    font-weight: 700;
    line-height: 1;
}

.solum-application-card h3 {
    margin-bottom: 14px;

    color: #172033;

    font-size: 21px;
}

.solum-application-card p {
    position: relative;
    z-index: 2;

    color: #667085;

    font-size: 14px;
    line-height: 1.8;

    word-break: keep-all;
}


/* =========================================================
   9. ESL SERVICE / QUOTE
========================================================= */

.solum-detail-page .product-detail-service {
    background:
        linear-gradient(
            125deg,
            #210449,
            #4e1d80
        );
}

.solum-detail-page .product-service-item span {
    color: #d0a4ff;
}

.solum-quote-box {
    background:
        linear-gradient(
            125deg,
            #2a075b,
            #642c98
        );
}

.solum-quote-box .section-label {
    color: #d7b4ff;
}


/* =========================================================
   10. TABLET
========================================================= */

@media (max-width: 1100px) {

    .solum-benefit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .solum-application-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .solum-large-product-layout {
        gap: 40px;
    }
}


/* =========================================================
   11. MOBILE
========================================================= */

@media (max-width: 768px) {

    /* 목록 페이지 카드 */
    #panel-solution .retail-product-grid-one {
        grid-template-columns: 1fr;
    }

    #panel-solution .retail-product-summary {
        min-height: auto;
    }

    #panel-solution .retail-product-image img {
        max-width: 90%;
        max-height: 260px;
    }

    /* 상세페이지 */
    .solum-benefit-section,
    .solum-lineup-section,
    .solum-application-section {
        padding: 78px 0;
    }

    .solum-benefit-grid {
        grid-template-columns: 1fr;
    }

    .solum-benefit-card {
        min-height: auto;
    }

    .solum-lineup-grid {
        grid-template-columns: 1fr;
    }

    .solum-lineup-card {
        min-height: auto;
        padding: 31px 25px;
    }

    .solum-lineup-wide {
        grid-column: auto;
    }

    .solum-large-product-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .solum-application-grid {
        grid-template-columns: 1fr;
    }

    .solum-application-card {
        min-height: auto;
    }

    .solum-product-image img {
        max-width: 100%;
        max-height: 300px;
    }
}


/* =========================================================
   12. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .solum-lineup-card h3 {
        font-size: 27px;
    }

    .solum-lineup-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }
}

/* =========================================================
   INFRASTRUCTURE PRODUCT PAGE
========================================================= */


/* =========================================================
   1. HERO
========================================================= */

.infrastructure-hero {
    padding: 145px 0 115px;
    background:
        linear-gradient(
            135deg,
            #f8fafc 0%,
            #edf2f7 55%,
            #e7edf5 100%
        );
}

.infrastructure-hero .product-breadcrumb {
    margin-bottom: 48px;
}

.infrastructure-hero h1 {
    margin: 18px 0 24px;
    color: #172033;
    font-size: 58px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -2px;
}

.infrastructure-hero-desc {
    margin: 0;
    color: #667085;
    font-size: 17px;
    line-height: 1.9;
    word-break: keep-all;
}


/* =========================================================
   2. MAIN AREA
========================================================= */

.infrastructure-product-main {
    padding: 85px 0 125px;
    background: #f4f6f9;
}


/* =========================================================
   3. CATEGORY TABS
========================================================= */

.infrastructure-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    margin-bottom: 85px;
    overflow: hidden;

    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;

    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.05);
}

.infrastructure-tab {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;

    min-height: 92px;
    padding: 18px 20px;

    color: #667085;
    background: transparent;
    border: 0;
    border-right: 1px solid #e7ebf0;

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;

    cursor: pointer;

    transition:
        color 0.25s ease,
        background 0.25s ease;
}

.infrastructure-tab:last-child {
    border-right: 0;
}

.infrastructure-tab::after {
    content: "";
    position: absolute;
    right: 22px;
    bottom: 0;
    left: 22px;

    height: 3px;

    background: #cf1f2c;

    transform: scaleX(0);
    transform-origin: center;

    transition: transform 0.25s ease;
}

.infrastructure-tab:hover {
    color: #1f2937;
    background: #fafbfc;
}

.infrastructure-tab.active {
    color: #172033;
    background: #ffffff;
}

.infrastructure-tab.active::after {
    transform: scaleX(1);
}

.infrastructure-tab-number {
    color: #a0a8b5;
    font-size: 11px;
    font-weight: 700;
}

.infrastructure-tab.active .infrastructure-tab-number {
    color: #cf1f2c;
}


/* =========================================================
   4. PANELS
========================================================= */

.infrastructure-product-panel {
    display: none;
}

.infrastructure-product-panel.active {
    display: block;
    animation: infrastructureFade 0.35s ease;
}

@keyframes infrastructureFade {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   INFRASTRUCTURE CATEGORY HEADING
   POS 페이지처럼 세로 배치
========================================================= */

.infrastructure-section-heading,
.infrastructure-category-heading,
.infrastructure-product-heading {
    display: block !important;

    width: 100%;
    margin-bottom: 45px;
    padding-bottom: 24px;

    border-bottom: 1px solid #dfe5ec;
}

.infrastructure-section-heading > div,
.infrastructure-category-heading > div,
.infrastructure-product-heading > div {
    display: block !important;
    width: 100%;
}

.infrastructure-section-heading .section-label,
.infrastructure-category-heading .section-label,
.infrastructure-product-heading .section-label {
    display: block;

    margin: 0 0 16px;

    color: #5b97f7;

    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 2px;
}

.infrastructure-section-heading h2,
.infrastructure-category-heading h2,
.infrastructure-product-heading h2 {
    display: block;

    margin: 0 0 18px;

    color: #172033;

    font-size: 38px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -1px;
}

.infrastructure-section-heading > p,
.infrastructure-category-heading > p,
.infrastructure-product-heading > p {
    display: block !important;

    width: 100% !important;
    max-width: 760px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #667085;

    font-size: 15px;
    line-height: 1.8;

    text-align: left !important;
    word-break: keep-all;
}

@media (max-width: 768px) {

    .infrastructure-section-heading,
    .infrastructure-category-heading,
    .infrastructure-product-heading {
        margin-bottom: 36px;
        padding-bottom: 20px;
    }

    .infrastructure-section-heading h2,
    .infrastructure-category-heading h2,
    .infrastructure-product-heading h2 {
        font-size: 31px;
    }

    .infrastructure-section-heading > p,
    .infrastructure-category-heading > p,
    .infrastructure-product-heading > p {
        max-width: 100% !important;
        font-size: 14px;
    }
}


/* =========================================================
   INFRASTRUCTURE PRODUCT GROUP HEADING
   POS 페이지처럼 세로 배치
========================================================= */

.infrastructure-group-heading {
    display: block;

    width: 100%;
    margin-bottom: 32px;
    padding-bottom: 24px;

    border-bottom: 1px solid #dce2e9;
}

/* 번호 + 카테고리명 */
.infrastructure-group-heading > div {
    display: flex;
    align-items: center;
    gap: 14px;

    width: 100%;
    margin-bottom: 16px;
}

/* 01, 02, 03 */
.infrastructure-group-heading span {
    flex-shrink: 0;

    color: #cf1f2c;

    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1px;
}

/* SERVER, STORAGE, UPS */
.infrastructure-group-heading h3 {
    margin: 0;

    color: #172033;

    font-size: 23px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.3px;
}

/* 설명을 제목 아래로 이동 */
.infrastructure-group-heading > p {
    width: 100%;
    max-width: 760px;
    margin: 0;
    padding: 0;

    color: #7b8492;

    font-size: 14px;
    line-height: 1.8;

    text-align: left;
    word-break: keep-all;
}


/* =========================================================
   7. PRODUCT GRID
========================================================= */

.infrastructure-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;

    margin-bottom: 90px;
}

.infrastructure-grid-one {
    grid-template-columns: minmax(0, 520px);
    justify-content: center;
}


/* =========================================================
   8. PRODUCT CARD
========================================================= */

.infrastructure-product-card {
    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #ffffff;
    border: 1px solid #e2e7ed;
    border-radius: 18px;

    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.045);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.infrastructure-product-card:hover {
    transform: translateY(-7px);

    border-color: rgba(207, 31, 44, 0.22);

    box-shadow: 0 22px 45px rgba(15, 23, 42, 0.11);
}


/* =========================================================
   9. PRODUCT IMAGE
========================================================= */

.infrastructure-product-image {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 300px;
    padding: 34px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #f8fafc,
            #eef2f6
        );

    border-bottom: 1px solid #edf0f4;
}

.infrastructure-product-image img {
    display: block;

    width: 100%;
    max-width: 340px;
    height: 235px;

    object-fit: contain;

    transition: transform 0.35s ease;
}

.infrastructure-product-card:hover
.infrastructure-product-image img {
    transform: scale(1.035);
}


/* =========================================================
   10. PRODUCT INFORMATION
========================================================= */

.infrastructure-product-info {
    display: flex;
    flex: 1;
    flex-direction: column;

    padding: 31px 30px 29px;
}

.infrastructure-product-brand {
    margin: 0 0 8px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.infrastructure-product-type {
    margin: 0 0 11px;

    color: #8c95a2;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.25px;
}

.infrastructure-product-info h3 {
    margin: 0 0 18px;

    color: #172033;

    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.5px;
}

.infrastructure-product-summary {
    min-height: 82px;
    margin: 0 0 23px;

    color: #667085;

    font-size: 14px;
    line-height: 1.8;

    word-break: keep-all;
}


/* =========================================================
   11. PRODUCT FEATURES
========================================================= */

.infrastructure-product-features {
    flex: 1;

    margin: 0 0 29px;
    padding: 0;

    list-style: none;
}

.infrastructure-product-features li {
    position: relative;

    padding: 8px 0 8px 21px;

    color: #4f5968;

    font-size: 13px;
    line-height: 1.55;

    border-bottom: 1px solid #edf0f3;
}

.infrastructure-product-features li:first-child {
    border-top: 1px solid #edf0f3;
}

.infrastructure-product-features li::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 2px;

    width: 6px;
    height: 6px;

    background: #cf1f2c;
    border-radius: 50%;
}


/* =========================================================
   12. BUTTONS
========================================================= */

.infrastructure-product-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-top: auto;
}

.infrastructure-detail-link,
.infrastructure-quote-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 43px;
    padding: 0 18px;

    border-radius: 8px;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.infrastructure-detail-link {
    gap: 9px;

    color: #ffffff;
    background: #172033;
    border: 1px solid #172033;
}

.infrastructure-detail-link:hover {
    color: #ffffff;
    background: #cf1f2c;
    border-color: #cf1f2c;

    transform: translateY(-2px);
}

.infrastructure-quote-link {
    color: #4f5968;
    background: #ffffff;
    border: 1px solid #d9dfe6;
}

.infrastructure-quote-link:hover {
    color: #cf1f2c;
    border-color: #cf1f2c;

    transform: translateY(-2px);
}


/* =========================================================
   13. BRAND COLORS
========================================================= */

.brand-lenovo {
    color: #e2231a;
}

.brand-apc {
    color: #52a92c;
}

.brand-ideuncs {
    color: #1f4f82;
}


/* =========================================================
   14. SINGLE PRODUCT CARD
========================================================= */

.infrastructure-grid-one
.infrastructure-product-card {
    width: 100%;
}

.infrastructure-grid-one
.infrastructure-product-summary {
    min-height: auto;
}


/* =========================================================
   15. TABLET
========================================================= */

@media (max-width: 1100px) {

    .infrastructure-hero h1 {
        font-size: 50px;
    }

    .infrastructure-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .infrastructure-tab:nth-child(2) {
        border-right: 0;
    }

    .infrastructure-tab:nth-child(-n + 2) {
        border-bottom: 1px solid #e7ebf0;
    }

    .infrastructure-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .infrastructure-grid-one {
        grid-template-columns: minmax(0, 520px);
    }
}


/* =========================================================
   16. MOBILE
========================================================= */

@media (max-width: 768px) {

    .infrastructure-hero {
        padding: 105px 0 82px;
    }

    .infrastructure-hero h1 {
        font-size: 39px;
        line-height: 1.35;
        letter-spacing: -1.3px;
    }

    .infrastructure-hero-desc {
        font-size: 15px;
    }

    .infrastructure-product-main {
        padding: 65px 0 90px;
    }

    .infrastructure-tabs {
        grid-template-columns: 1fr;
        margin-bottom: 62px;
    }

    .infrastructure-tab {
        min-height: 70px;

        border-right: 0;
        border-bottom: 1px solid #e7ebf0;
    }

    .infrastructure-tab:last-child {
        border-bottom: 0;
    }

    .infrastructure-tab::after {
        right: 28px;
        left: 28px;
    }

    .infrastructure-section-heading {
        margin-bottom: 38px;
    }

    .infrastructure-section-heading h2 {
        font-size: 31px;
    }

    .infrastructure-section-heading > p {
        font-size: 15px;
    }

    .infrastructure-product-group {
        margin-bottom: 75px;
    }

    .infrastructure-group-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .infrastructure-product-grid,
    .infrastructure-grid-one {
        grid-template-columns: 1fr;
    }

    .infrastructure-product-image {
        height: 275px;
        padding: 28px;
    }

    .infrastructure-product-image img {
        height: 210px;
    }

    .infrastructure-product-summary {
        min-height: auto;
    }
}


/* =========================================================
   17. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .infrastructure-hero h1 {
        font-size: 34px;
    }

    .infrastructure-product-info {
        padding: 27px 23px 25px;
    }

    .infrastructure-product-info h3 {
        font-size: 22px;
    }

    .infrastructure-product-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .infrastructure-detail-link,
    .infrastructure-quote-link {
        width: 100%;
    }
}

/* =========================================================
   WHY THINKSYSTEM SR650 V4
========================================================= */

.server-why-section {
    padding: 110px 0;
    background: #f4f6f9;
}

.server-why-section .product-detail-heading {
    max-width: 820px;
    margin: 0 auto 58px;
    text-align: center;
}

.server-why-section .product-detail-heading .section-label {
    margin-bottom: 15px;
}

.server-why-section .product-detail-heading h2 {
    margin: 0 0 18px;

    color: #172033;

    font-size: 38px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -1px;
}

.server-why-section .product-detail-heading > p:last-child {
    margin: 0;

    color: #667085;

    font-size: 15px;
    line-height: 1.8;

    word-break: keep-all;
}

.server-why-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.server-why-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 255px;
    padding: 32px 28px;

    overflow: hidden;

    background: #ffffff;
    border: 1px solid #e1e6ec;
    border-radius: 18px;

    box-shadow:
        0 8px 25px
        rgba(15, 23, 42, 0.045);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.server-why-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            #e2231a,
            #ff655d
        );

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.3s ease;
}

.server-why-card::after {
    content: "";

    position: absolute;
    right: -65px;
    bottom: -65px;

    width: 150px;
    height: 150px;

    border: 1px solid rgba(226, 35, 26, 0.07);
    border-radius: 50%;
}

.server-why-card:hover {
    transform: translateY(-7px);

    border-color: rgba(226, 35, 26, 0.28);

    box-shadow:
        0 20px 45px
        rgba(15, 23, 42, 0.11);
}

.server-why-card:hover::before {
    transform: scaleX(1);
}

.server-why-card .server-card-number {
    position: relative;
    z-index: 2;

    display: block;
    margin-bottom: 38px;

    color: rgba(226, 35, 26, 0.24);

    font-size: 39px;
    font-weight: 700;
    line-height: 1;
}

.server-why-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 14px;

    color: #172033;

    font-size: 21px;
    font-weight: 700;
    line-height: 1.4;
}

.server-why-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #667085;

    font-size: 14px;
    line-height: 1.8;

    word-break: keep-all;
}

@media (max-width: 1100px) {

    .server-why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {

    .server-why-section {
        padding: 78px 0;
    }

    .server-why-section .product-detail-heading {
        margin-bottom: 42px;
    }

    .server-why-section .product-detail-heading h2 {
        font-size: 31px;
    }

    .server-why-grid {
        grid-template-columns: 1fr;
    }

    .server-why-card {
        min-height: auto;
    }
}

@media (max-width: 480px) {

    .server-why-card {
        padding: 27px 23px;
    }

    .server-why-card .server-card-number {
        margin-bottom: 30px;
        font-size: 35px;
    }
}

/* =========================================================
   SERVER RECOMMENDED WORKLOADS
========================================================= */

.server-workload-section {
    padding: 110px 0;
    background: #ffffff;
}

/* 제목 영역 */
.server-workload-section .product-detail-heading {
    max-width: 820px;
    margin: 0 auto 58px;
    text-align: center;
}

.server-workload-section .product-detail-heading .section-label {
    margin-bottom: 15px;
}

.server-workload-section .product-detail-heading h2 {
    margin: 0 0 18px;

    color: #172033;

    font-size: 38px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -1px;
}

.server-workload-section .product-detail-heading > p:last-child {
    margin: 0;

    color: #667085;

    font-size: 15px;
    line-height: 1.8;

    word-break: keep-all;
}

/* 3열 카드 배치 */
.server-workload-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

/* 개별 카드 */
.server-workload-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 245px;
    padding: 31px 28px;

    overflow: hidden;

    background: #f8fafc;
    border: 1px solid #e1e6ec;
    border-radius: 18px;

    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.045);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* 카드 상단 강조선 */
.server-workload-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: linear-gradient(
        90deg,
        #e2231a,
        #ff655d
    );

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.3s ease;
}

/* 우측 하단 장식 */
.server-workload-card::after {
    content: "";

    position: absolute;
    right: -65px;
    bottom: -65px;

    width: 150px;
    height: 150px;

    border: 1px solid rgba(226, 35, 26, 0.08);
    border-radius: 50%;
}

/* 카드 Hover */
.server-workload-card:hover {
    transform: translateY(-7px);

    border-color: rgba(226, 35, 26, 0.28);

    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.11);
}

.server-workload-card:hover::before {
    transform: scaleX(1);
}

/* 카드 번호 */
.server-workload-card .server-card-number {
    position: relative;
    z-index: 2;

    display: block;
    margin-bottom: 38px;

    color: rgba(226, 35, 26, 0.24);

    font-size: 39px;
    font-weight: 700;
    line-height: 1;
}

/* 예전 HTML에서 class가 없는 span도 대응 */
.server-workload-card > span {
    position: relative;
    z-index: 2;

    display: block;
    margin-bottom: 38px;

    color: rgba(226, 35, 26, 0.24);

    font-size: 39px;
    font-weight: 700;
    line-height: 1;
}

/* 카드 제목 */
.server-workload-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 14px;

    color: #172033;

    font-size: 21px;
    font-weight: 700;
    line-height: 1.4;
}

/* 카드 설명 */
.server-workload-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #667085;

    font-size: 14px;
    line-height: 1.8;

    word-break: keep-all;
}

/* 태블릿 */
@media (max-width: 1100px) {

    .server-workload-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 모바일 */
@media (max-width: 768px) {

    .server-workload-section {
        padding: 78px 0;
    }

    .server-workload-section .product-detail-heading {
        margin-bottom: 42px;
    }

    .server-workload-section .product-detail-heading h2 {
        font-size: 31px;
    }

    .server-workload-grid {
        grid-template-columns: 1fr;
    }

    .server-workload-card {
        min-height: auto;
    }
}

@media (max-width: 480px) {

    .server-workload-card {
        padding: 27px 23px;
    }

    .server-workload-card .server-card-number,
    .server-workload-card > span {
        margin-bottom: 30px;
        font-size: 35px;
    }
}

/* =========================================================
   LENOVO THINKSYSTEM DE SERIES DETAIL PAGE
========================================================= */


/* =========================================================
   1. HERO / BRAND
========================================================= */

.lenovo-storage-hero {
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f7f8fa 55%,
            #edf1f5 100%
        );
}

.storage-image-badge {
    background: #e2231a;
}

.storage-detail-badge {
    color: #a8191c;
    background: #fff1f1;
    border-color: #f2caca;
}

.lenovo-storage-image {
    position: relative;
}

.lenovo-storage-image::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;

    width: 72%;
    height: 72%;

    background: rgba(226, 35, 26, 0.055);
    border-radius: 50%;

    transform: translate(-50%, -50%);
}

.lenovo-storage-image img {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 560px;
    max-height: 420px;

    object-fit: contain;
}

.storage-configuration-notice {
    margin: 22px 0 0;
    padding: 14px 17px;

    color: #7a8391;
    background: #f7f8fa;
    border-left: 3px solid #e2231a;
    border-radius: 4px;

    font-size: 12px;
    line-height: 1.7;
}


/* =========================================================
   2. RECOMMENDED WORKLOADS
========================================================= */

.storage-workload-section {
    padding: 110px 0;
    background: #ffffff;
}

.storage-workload-section .product-detail-heading {
    max-width: 820px;
    margin: 0 auto 58px;
    text-align: center;
}

.storage-workload-section .product-detail-heading .section-label {
    margin-bottom: 15px;
}

.storage-workload-section .product-detail-heading h2 {
    margin: 0 0 18px;

    color: #172033;

    font-size: 38px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -1px;
}

.storage-workload-section .product-detail-heading > p:last-child {
    margin: 0;

    color: #667085;

    font-size: 15px;
    line-height: 1.8;

    word-break: keep-all;
}

.storage-workload-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}


/* =========================================================
   3. WORKLOAD CARDS
========================================================= */

.storage-workload-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 245px;
    padding: 31px 28px;

    overflow: hidden;

    background: #f8fafc;
    border: 1px solid #e1e6ec;
    border-radius: 18px;

    box-shadow:
        0 8px 25px
        rgba(15, 23, 42, 0.045);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.storage-workload-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            #e2231a,
            #ff655d
        );

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.3s ease;
}

.storage-workload-card::after {
    content: "";

    position: absolute;
    right: -65px;
    bottom: -65px;

    width: 150px;
    height: 150px;

    border: 1px solid rgba(226, 35, 26, 0.08);
    border-radius: 50%;
}

.storage-workload-card:hover {
    transform: translateY(-7px);

    border-color: rgba(226, 35, 26, 0.28);

    box-shadow:
        0 20px 45px
        rgba(15, 23, 42, 0.11);
}

.storage-workload-card:hover::before {
    transform: scaleX(1);
}

.storage-card-number {
    position: relative;
    z-index: 2;

    display: block;
    margin-bottom: 38px;

    color: rgba(226, 35, 26, 0.24);

    font-size: 39px;
    font-weight: 700;
    line-height: 1;
}

.storage-workload-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 14px;

    color: #172033;

    font-size: 21px;
    font-weight: 700;
    line-height: 1.4;
}

.storage-workload-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #667085;

    font-size: 14px;
    line-height: 1.8;

    word-break: keep-all;
}


/* =========================================================
   4. KEY FEATURES
========================================================= */

.storage-feature-section
.product-feature-card::before {
    background:
        linear-gradient(
            90deg,
            #e2231a,
            #ff7068
        );
}

.storage-feature-section
.product-feature-number {
    color: rgba(226, 35, 26, 0.22);
}


/* =========================================================
   5. STORAGE CONFIGURATION
========================================================= */

.storage-configuration-section {
    padding: 110px 0;
    background: #f4f6f9;
}

.storage-configuration-section .product-detail-heading {
    max-width: 820px;
    margin: 0 auto 58px;
    text-align: center;
}

.storage-configuration-section .product-detail-heading .section-label {
    margin-bottom: 15px;
}

.storage-configuration-section .product-detail-heading h2 {
    margin: 0 0 18px;

    color: #172033;

    font-size: 38px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -1px;
}

.storage-configuration-section .product-detail-heading > p:last-child {
    margin: 0;

    color: #667085;

    font-size: 15px;
    line-height: 1.8;

    word-break: keep-all;
}

.storage-configuration-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.storage-configuration-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 255px;
    padding: 32px 28px;

    overflow: hidden;

    background: #ffffff;
    border: 1px solid #e1e6ec;
    border-radius: 18px;

    box-shadow:
        0 8px 25px
        rgba(15, 23, 42, 0.045);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.storage-configuration-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            #e2231a,
            #ff655d
        );

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.3s ease;
}

.storage-configuration-card::after {
    content: "";

    position: absolute;
    right: -65px;
    bottom: -65px;

    width: 150px;
    height: 150px;

    border: 1px solid rgba(226, 35, 26, 0.07);
    border-radius: 50%;
}

.storage-configuration-card:hover {
    transform: translateY(-7px);

    border-color: rgba(226, 35, 26, 0.28);

    box-shadow:
        0 20px 45px
        rgba(15, 23, 42, 0.11);
}

.storage-configuration-card:hover::before {
    transform: scaleX(1);
}

.storage-configuration-card .storage-card-number {
    position: relative;
    z-index: 2;

    display: block;
    margin-bottom: 38px;

    color: rgba(226, 35, 26, 0.24);

    font-size: 39px;
    font-weight: 700;
    line-height: 1;
}

.storage-configuration-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 14px;

    color: #172033;

    font-size: 21px;
    font-weight: 700;
    line-height: 1.4;
}

.storage-configuration-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #667085;

    font-size: 14px;
    line-height: 1.8;

    word-break: keep-all;
}


/* =========================================================
   6. SERIES SPECIFICATIONS
========================================================= */

.storage-spec-section
.product-spec-table th {
    color: #6d2020;
    background: #fff5f5;
}

.storage-spec-section
.product-spec-table td {
    line-height: 1.85;
}

.storage-spec-notice {
    max-width: 850px;
    margin: 28px auto 0;
    padding: 16px 20px;

    color: #737d8b;
    background: #f7f8fa;
    border-left: 3px solid #e2231a;
    border-radius: 5px;

    font-size: 13px;
    line-height: 1.8;

    word-break: keep-all;
}


/* =========================================================
   7. IDEUNCS SERVICE
========================================================= */

.storage-service-section {
    background:
        linear-gradient(
            125deg,
            #111827 0%,
            #202a3a 55%,
            #3a1618 100%
        );
}

.storage-service-section
.product-service-item span {
    color: #ff7770;
}


/* =========================================================
   8. QUOTE
========================================================= */

.storage-quote-box {
    background:
        linear-gradient(
            125deg,
            #171c27,
            #5d171a
        );
}

.storage-quote-box
.section-label {
    color: #ff9690;
}


/* =========================================================
   9. BUTTONS
========================================================= */

.lenovo-storage-detail-page
.product-detail-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.lenovo-storage-detail-page
.product-detail-buttons a {
    white-space: nowrap;
}


/* =========================================================
   10. TABLET
========================================================= */

@media (max-width: 1100px) {

    .storage-workload-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .storage-configuration-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   11. MOBILE
========================================================= */

@media (max-width: 768px) {

    .storage-workload-section,
    .storage-configuration-section {
        padding: 78px 0;
    }

    .storage-workload-section .product-detail-heading,
    .storage-configuration-section .product-detail-heading {
        margin-bottom: 42px;
    }

    .storage-workload-section .product-detail-heading h2,
    .storage-configuration-section .product-detail-heading h2 {
        font-size: 31px;
    }

    .storage-workload-grid,
    .storage-configuration-grid {
        grid-template-columns: 1fr;
    }

    .storage-workload-card,
    .storage-configuration-card {
        min-height: auto;
    }

    .lenovo-storage-image img {
        max-width: 100%;
        max-height: 290px;
    }

    .lenovo-storage-detail-page
    .product-detail-buttons {
        align-items: stretch;
        flex-direction: column;
    }

    .lenovo-storage-detail-page
    .product-detail-buttons a {
        width: 100%;
    }
}


/* =========================================================
   12. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .storage-workload-card,
    .storage-configuration-card {
        padding: 27px 23px;
    }

    .storage-card-number,
    .storage-configuration-card .storage-card-number {
        margin-bottom: 30px;
        font-size: 35px;
    }
}

/* =========================================================
   LENOVO DM SERIES
========================================================= */

.dm-storage-hero .storage-image-badge {
    background: #0078d4;
}

.dm-storage-detail-page .storage-detail-badge {
    color: #005da6;
    background: #eef7ff;
    border-color: #c9e5ff;
}

.dm-storage-detail-page .storage-configuration-notice,
.dm-storage-detail-page .storage-spec-notice {
    border-left-color: #0078d4;
}

.dm-storage-detail-page .storage-feature-section .product-feature-card::before,
.dm-storage-detail-page .storage-workload-card::before,
.dm-storage-detail-page .storage-configuration-card::before {
    background: linear-gradient(
        90deg,
        #0078d4,
        #33a1ff
    );
}

.dm-storage-detail-page .storage-card-number,
.dm-storage-detail-page .product-feature-number {
    color: rgba(0, 120, 212, 0.22);
}

.dm-storage-detail-page .storage-workload-card:hover,
.dm-storage-detail-page .storage-configuration-card:hover {
    border-color: rgba(0, 120, 212, 0.28);
}

/* =========================================================
   LENOVO THINKSYSTEM DG SERIES
   - DE / DM 공통 스토리지 레이아웃 사용
   - DG 전용 포인트 색상만 적용
========================================================= */


/* =========================================================
   1. HERO BADGE
========================================================= */

.dg-storage-hero .storage-image-badge {
    background: #6f42c1;
}


/* =========================================================
   2. PRODUCT BADGES
========================================================= */

.dg-storage-detail-page .storage-detail-badge {
    color: #5b2fa3;
    background: #f5f0ff;
    border-color: #dfd1f5;
}


/* =========================================================
   3. HERO IMAGE DECORATION
========================================================= */

.dg-storage-detail-page .lenovo-storage-image::before {
    background: rgba(111, 66, 193, 0.065);
}


/* =========================================================
   4. NOTICE BOXES
========================================================= */

.dg-storage-detail-page .storage-configuration-notice,
.dg-storage-detail-page .storage-spec-notice {
    border-left-color: #6f42c1;
}


/* =========================================================
   5. WORKLOAD CARD ACCENT
========================================================= */

.dg-storage-detail-page .storage-workload-card::before {
    background:
        linear-gradient(
            90deg,
            #6f42c1,
            #9b72e3
        );
}

.dg-storage-detail-page .storage-workload-card::after {
    border-color: rgba(111, 66, 193, 0.08);
}

.dg-storage-detail-page .storage-workload-card:hover {
    border-color: rgba(111, 66, 193, 0.3);
}

.dg-storage-detail-page
.storage-workload-card
.storage-card-number {
    color: rgba(111, 66, 193, 0.24);
}


/* =========================================================
   6. FEATURE CARD ACCENT
========================================================= */

.dg-storage-detail-page
.storage-feature-section
.product-feature-card::before {
    background:
        linear-gradient(
            90deg,
            #6f42c1,
            #9b72e3
        );
}

.dg-storage-detail-page
.storage-feature-section
.product-feature-number {
    color: rgba(111, 66, 193, 0.23);
}


/* =========================================================
   7. CONFIGURATION CARD ACCENT
========================================================= */

.dg-storage-detail-page
.storage-configuration-card::before {
    background:
        linear-gradient(
            90deg,
            #6f42c1,
            #9b72e3
        );
}

.dg-storage-detail-page
.storage-configuration-card::after {
    border-color: rgba(111, 66, 193, 0.08);
}

.dg-storage-detail-page
.storage-configuration-card:hover {
    border-color: rgba(111, 66, 193, 0.3);
}

.dg-storage-detail-page
.storage-configuration-card
.storage-card-number {
    color: rgba(111, 66, 193, 0.24);
}


/* =========================================================
   8. SPECIFICATION TABLE
========================================================= */

.dg-storage-detail-page
.storage-spec-section
.product-spec-table th {
    color: #4f2b85;
    background: #f7f3fc;
}


/* =========================================================
   9. KEEP SERVICE / QUOTE SAME AS DE·DM
========================================================= */

/*
   아래 두 영역은 DG 전용 색상을 넣지 않는다.

   .storage-service-section
   .storage-quote-box

   DE / DM / DG 모두 공통 CSS를 사용해야
   하단 디자인이 동일하게 유지된다.
*/


/* =========================================================
   10. MOBILE
========================================================= */

@media (max-width: 768px) {

    .dg-storage-detail-page .lenovo-storage-image img {
        max-width: 100%;
        max-height: 290px;
    }
}

/* =========================================================
   APC SMART-UPS SMT3000RMI2U DETAIL PAGE
========================================================= */


/* =========================================================
   1. HERO
========================================================= */

.apc-ups-hero {
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f7f9f7 55%,
            #edf3ee 100%
        );
}

.apc-ups-image {
    position: relative;
}

.apc-ups-image::before {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    width: 72%;
    height: 72%;

    background: rgba(82, 169, 44, 0.07);
    border-radius: 50%;

    transform: translate(-50%, -50%);
}

.apc-ups-image img {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 560px;
    max-height: 420px;

    object-fit: contain;
}

.apc-ups-image-badge {
    background: #52a92c;
}

.apc-ups-badge {
    color: #3d7f21;
    background: #f0f8ec;
    border-color: #cee5c4;
}

.apc-ups-detail-page .brand-apc {
    color: #52a92c;
}


/* =========================================================
   2. HERO NOTICE
========================================================= */

.ups-configuration-notice {
    margin: 22px 0 0;
    padding: 14px 17px;

    color: #737d8b;
    background: #f7f9f7;

    border-left: 3px solid #52a92c;
    border-radius: 5px;

    font-size: 12px;
    line-height: 1.75;

    word-break: keep-all;
}


/* =========================================================
   3. PROTECTED EQUIPMENT
========================================================= */

.ups-workload-section {
    padding: 110px 0;
    background: #ffffff;
}

.ups-workload-section .product-detail-heading {
    max-width: 820px;
    margin: 0 auto 58px;

    text-align: center;
}

.ups-workload-section .product-detail-heading .section-label {
    margin-bottom: 15px;
}

.ups-workload-section .product-detail-heading h2 {
    margin: 0 0 18px;

    color: #172033;

    font-size: 38px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -1px;
}

.ups-workload-section .product-detail-heading > p:last-child {
    margin: 0;

    color: #667085;

    font-size: 15px;
    line-height: 1.8;

    word-break: keep-all;
}

.ups-workload-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}


/* =========================================================
   4. WORKLOAD CARDS
========================================================= */

.ups-workload-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 245px;
    padding: 31px 28px;

    overflow: hidden;

    background: #f8faf8;

    border: 1px solid #e1e7e2;
    border-radius: 18px;

    box-shadow:
        0 8px 25px
        rgba(15, 23, 42, 0.045);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.ups-workload-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            #52a92c,
            #86ce63
        );

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.3s ease;
}

.ups-workload-card::after {
    content: "";

    position: absolute;
    right: -65px;
    bottom: -65px;

    width: 150px;
    height: 150px;

    border: 1px solid rgba(82, 169, 44, 0.09);
    border-radius: 50%;
}

.ups-workload-card:hover {
    transform: translateY(-7px);

    border-color: rgba(82, 169, 44, 0.32);

    box-shadow:
        0 20px 45px
        rgba(15, 23, 42, 0.11);
}

.ups-workload-card:hover::before {
    transform: scaleX(1);
}

.ups-card-number {
    position: relative;
    z-index: 2;

    display: block;
    margin-bottom: 38px;

    color: rgba(82, 169, 44, 0.26);

    font-size: 39px;
    font-weight: 700;
    line-height: 1;
}

.ups-workload-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 14px;

    color: #172033;

    font-size: 21px;
    font-weight: 700;
    line-height: 1.4;
}

.ups-workload-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #667085;

    font-size: 14px;
    line-height: 1.8;

    word-break: keep-all;
}


/* =========================================================
   5. KEY FEATURES
========================================================= */

.apc-ups-feature-section
.product-feature-card::before {
    background:
        linear-gradient(
            90deg,
            #52a92c,
            #86ce63
        );
}

.apc-ups-feature-section
.product-feature-number {
    color: rgba(82, 169, 44, 0.24);
}


/* =========================================================
   6. POWER PROTECTION
========================================================= */

.ups-protection-section {
    padding: 110px 0;
    background: #f4f6f5;
}

.ups-protection-section .product-detail-heading {
    max-width: 820px;
    margin: 0 auto 58px;

    text-align: center;
}

.ups-protection-section .product-detail-heading .section-label {
    margin-bottom: 15px;
}

.ups-protection-section .product-detail-heading h2 {
    margin: 0 0 18px;

    color: #172033;

    font-size: 38px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -1px;
}

.ups-protection-section .product-detail-heading > p:last-child {
    margin: 0;

    color: #667085;

    font-size: 15px;
    line-height: 1.8;

    word-break: keep-all;
}

.ups-protection-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.ups-protection-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 255px;
    padding: 32px 28px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e1e7e2;
    border-radius: 18px;

    box-shadow:
        0 8px 25px
        rgba(15, 23, 42, 0.045);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.ups-protection-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            #52a92c,
            #86ce63
        );

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.3s ease;
}

.ups-protection-card::after {
    content: "";

    position: absolute;
    right: -65px;
    bottom: -65px;

    width: 150px;
    height: 150px;

    border: 1px solid rgba(82, 169, 44, 0.08);
    border-radius: 50%;
}

.ups-protection-card:hover {
    transform: translateY(-7px);

    border-color: rgba(82, 169, 44, 0.32);

    box-shadow:
        0 20px 45px
        rgba(15, 23, 42, 0.11);
}

.ups-protection-card:hover::before {
    transform: scaleX(1);
}

.ups-protection-card .ups-card-number {
    position: relative;
    z-index: 2;

    display: block;
    margin-bottom: 38px;

    color: rgba(82, 169, 44, 0.26);

    font-size: 39px;
    font-weight: 700;
    line-height: 1;
}

.ups-protection-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 14px;

    color: #172033;

    font-size: 21px;
    font-weight: 700;
    line-height: 1.4;
}

.ups-protection-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #667085;

    font-size: 14px;
    line-height: 1.8;

    word-break: keep-all;
}


/* =========================================================
   7. SPECIFICATION
========================================================= */

.ups-spec-section
.product-spec-table th {
    color: #386f21;
    background: #f2f8ef;
}

.ups-spec-section
.product-spec-table td {
    line-height: 1.85;
}

.ups-spec-notice {
    max-width: 850px;
    margin: 28px auto 0;
    padding: 16px 20px;

    color: #737d8b;
    background: #f7f9f7;

    border-left: 3px solid #52a92c;
    border-radius: 5px;

    font-size: 13px;
    line-height: 1.8;

    word-break: keep-all;
}


/* =========================================================
   8. PRODUCT BUTTONS
========================================================= */

.apc-ups-detail-page
.product-detail-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.apc-ups-detail-page
.product-detail-buttons a {
    white-space: nowrap;
}


/* =========================================================
   9. SERVICE / QUOTE
   스토리지 공통 디자인 사용
========================================================= */

/*
   HTML에서 아래 공통 클래스를 사용하므로
   UPS 전용 배경색 코드는 추가하지 않는다.

   .storage-service-section
   .storage-quote-box
*/


/* =========================================================
   10. TABLET
========================================================= */

@media (max-width: 1100px) {

    .ups-workload-grid,
    .ups-protection-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   11. MOBILE
========================================================= */

@media (max-width: 768px) {

    .ups-workload-section,
    .ups-protection-section {
        padding: 78px 0;
    }

    .ups-workload-section .product-detail-heading,
    .ups-protection-section .product-detail-heading {
        margin-bottom: 42px;
    }

    .ups-workload-section .product-detail-heading h2,
    .ups-protection-section .product-detail-heading h2 {
        font-size: 31px;
    }

    .ups-workload-grid,
    .ups-protection-grid {
        grid-template-columns: 1fr;
    }

    .ups-workload-card,
    .ups-protection-card {
        min-height: auto;
    }

    .apc-ups-image img {
        max-width: 100%;
        max-height: 290px;
    }

    .apc-ups-detail-page
    .product-detail-buttons {
        align-items: stretch;
        flex-direction: column;
    }

    .apc-ups-detail-page
    .product-detail-buttons a {
        width: 100%;
    }
}


/* =========================================================
   12. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .ups-workload-card,
    .ups-protection-card {
        padding: 27px 23px;
    }

    .ups-card-number,
    .ups-protection-card .ups-card-number {
        margin-bottom: 30px;
        font-size: 35px;
    }
}

/* =========================================================
   LOGISTICS PRODUCT PAGE
========================================================= */


/* =========================================================
   1. LOGISTICS HERO
========================================================= */

.logistics-hero {
    position: relative;

    padding: 105px 0 95px;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f8fafc 0%,
            #eef3f7 55%,
            #e7edf3 100%
        );
}

.logistics-hero::before {
    content: "";

    position: absolute;
    top: -190px;
    right: -110px;

    width: 480px;
    height: 480px;

    background: rgba(74, 137, 220, 0.055);
    border-radius: 50%;
}

.logistics-hero .container {
    position: relative;
    z-index: 2;
}

.logistics-hero .product-breadcrumb {
    margin-bottom: 42px;

    color: #8a94a3;
}

.logistics-hero .product-breadcrumb a {
    color: #667085;
}

.logistics-hero .product-breadcrumb a:hover {
    color: #326fae;
}

.logistics-hero .section-label {
    margin: 0 0 17px;

    color: #5b97f7;
}

.logistics-hero h1 {
    max-width: 850px;
    margin: 0 0 25px;

    color: #172033;

    font-size: 52px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -1.8px;

    word-break: keep-all;
}

.logistics-hero-desc {
    max-width: 760px;
    margin: 0;

    color: #667085;

    font-size: 17px;
    line-height: 1.9;

    word-break: keep-all;
}


/* =========================================================
   2. LOGISTICS MAIN
========================================================= */

.logistics-product-main {
    padding: 75px 0 120px;

    background: #f4f6f9;
}


/* =========================================================
   3. CATEGORY TABS
========================================================= */

.logistics-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    margin: 0 0 78px;
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e1e7ee;
    border-radius: 16px;

    box-shadow:
        0 8px 25px
        rgba(15, 23, 42, 0.05);
}

.logistics-tab {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 82px;
    padding: 16px 20px;

    color: #667085;
    background: #ffffff;

    border: 0;
    border-right: 1px solid #e7ebf0;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.4px;

    cursor: pointer;

    transition:
        color 0.25s ease,
        background 0.25s ease;
}

.logistics-tab:last-child {
    border-right: 0;
}

.logistics-tab::after {
    content: "";

    position: absolute;
    right: 20%;
    bottom: 0;
    left: 20%;

    height: 3px;

    background: #f28c28;

    transform: scaleX(0);

    transition: transform 0.25s ease;
}

.logistics-tab:hover,
.logistics-tab.active {
    color: #172033;
    background: #fffaf5;
}

.logistics-tab.active::after {
    transform: scaleX(1);
}

.logistics-tab-number {
    color: #9aa4b2;

    font-size: 11px;
    font-weight: 700;
}

.logistics-tab.active .logistics-tab-number {
    color: #f28c28;
}


/* =========================================================
   4. PRODUCT PANEL
========================================================= */

.logistics-product-panel {
    display: none;
}

.logistics-product-panel.active {
    display: block;

    animation: logisticsPanelFade 0.3s ease;
}

@keyframes logisticsPanelFade {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   5. SECTION HEADING
   POS / RETAIL 페이지처럼 세로 배치
========================================================= */

.logistics-section-heading {
    display: block;

    width: 100%;
    margin: 0 0 42px;
    padding: 0 0 26px;

    border-bottom: 1px solid #dce3eb;
}

.logistics-section-heading > div {
    display: block;

    width: 100%;
    margin: 0 0 18px;
}

.logistics-section-heading .section-label {
    display: block;

    margin: 0 0 14px;

    color: #5b97f7;

    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 2px;
}

.logistics-section-heading h2 {
    margin: 0;

    color: #172033;

    font-size: 38px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -1px;
}

.logistics-section-heading > p {
    width: 100%;
    max-width: 760px;

    margin: 0;
    padding: 0;

    color: #667085;

    font-size: 15px;
    line-height: 1.8;

    text-align: left;
    word-break: keep-all;
}


/* =========================================================
   6. PRODUCT GRID
========================================================= */

.logistics-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;

    width: 100%;
}

.logistics-grid-one {
    grid-template-columns: minmax(0, 520px);
    justify-content: center;
}


/* =========================================================
   7. PRODUCT CARD
========================================================= */

.logistics-product-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e1e7ed;
    border-radius: 18px;

    box-shadow:
        0 8px 25px
        rgba(15, 23, 42, 0.045);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.logistics-product-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            #f28c28,
            #ffb15e
        );

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.3s ease;
}

.logistics-product-card:hover {
    transform: translateY(-7px);

    border-color: rgba(242, 140, 40, 0.3);

    box-shadow:
        0 22px 45px
        rgba(15, 23, 42, 0.11);
}

.logistics-product-card:hover::before {
    transform: scaleX(1);
}


/* =========================================================
   8. PRODUCT IMAGE
========================================================= */

.logistics-product-image {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    height: 310px;
    padding: 38px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f1f4f7
        );

    border-bottom: 1px solid #edf0f4;

    text-decoration: none;
}

.logistics-image-label {
    position: absolute;
    top: 22px;
    left: 22px;
    z-index: 3;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 11px;

    color: #ffffff;
    background: #172033;

    border-radius: 5px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

.logistics-product-image img {
    display: block;

    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 230px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 18px 18px
            rgba(15, 23, 42, 0.14)
        );

    transition: transform 0.35s ease;
}

.logistics-product-card:hover
.logistics-product-image img {
    transform: scale(1.04);
}


/* =========================================================
   9. PRODUCT INFORMATION
========================================================= */

.logistics-product-info {
    display: flex;
    flex: 1;
    flex-direction: column;

    min-width: 0;
    padding: 31px 30px 29px;
}

.logistics-product-brand {
    margin: 0 0 8px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1.5px;
}

.logistics-product-type {
    margin: 0 0 11px;

    color: #8c95a2;

    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1.2px;
}

.logistics-product-info h3 {
    margin: 0 0 17px;

    color: #172033;

    font-size: 25px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.5px;

    word-break: keep-all;
}

.logistics-product-summary {
    min-height: 78px;
    margin: 0 0 23px;

    color: #667085;

    font-size: 14px;
    line-height: 1.8;

    word-break: keep-all;
}


/* =========================================================
   10. PRODUCT FEATURES
========================================================= */

.logistics-product-features {
    flex: 1;

    margin: 0 0 29px;
    padding: 0;

    list-style: none;

    border-top: 1px solid #edf0f3;
}

.logistics-product-features li {
    position: relative;

    padding: 11px 0 11px 21px;

    color: #4f5968;

    font-size: 13px;
    line-height: 1.55;

    border-bottom: 1px solid #edf0f3;

    word-break: keep-all;
}

.logistics-product-features li::before {
    content: "";

    position: absolute;
    top: 18px;
    left: 2px;

    width: 6px;
    height: 6px;

    background: #f28c28;
    border-radius: 50%;
}


/* =========================================================
   11. PRODUCT ACTIONS
========================================================= */

.logistics-product-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-top: auto;
}

.logistics-detail-link,
.logistics-quote-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding: 0 18px;

    border-radius: 8px;

    font-size: 13px;
    font-weight: 700;
    line-height: 1;

    text-decoration: none;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.logistics-detail-link {
    flex: 1;
    gap: 9px;

    color: #ffffff;
    background: #172033;

    border: 1px solid #172033;
}

.logistics-detail-link span {
    transition: transform 0.25s ease;
}

.logistics-detail-link:hover {
    color: #ffffff;
    background: #f28c28;

    border-color: #f28c28;

    transform: translateY(-2px);
}

.logistics-detail-link:hover span {
    transform: translateX(4px);
}

.logistics-quote-link {
    min-width: 105px;

    color: #4f5968;
    background: #ffffff;

    border: 1px solid #d9dfe6;
}

.logistics-quote-link:hover {
    color: #d66d08;

    border-color: #f28c28;

    transform: translateY(-2px);
}


/* =========================================================
   12. BRAND COLORS
========================================================= */

.logistics-product-brand.brand-zebra,
.brand-zebra {
    color: #111111;
}

.logistics-product-brand.brand-code,
.brand-code {
    color: #e56a1f;
}


/* =========================================================
   13. SINGLE PRODUCT PANEL
========================================================= */

.logistics-grid-one
.logistics-product-card {
    width: 100%;
}

.logistics-grid-one
.logistics-product-summary {
    min-height: auto;
}


/* =========================================================
   14. TABLET
========================================================= */

@media (max-width: 1100px) {

    .logistics-hero h1 {
        font-size: 46px;
    }

    .logistics-product-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .logistics-grid-one {
        grid-template-columns: minmax(0, 520px);
    }

    .logistics-product-summary {
        min-height: auto;
    }
}


/* =========================================================
   15. MOBILE
========================================================= */

@media (max-width: 768px) {

    .logistics-hero {
        padding: 78px 0 72px;
    }

    .logistics-hero .product-breadcrumb {
        margin-bottom: 30px;
    }

    .logistics-hero h1 {
        font-size: 37px;
        line-height: 1.38;
        letter-spacing: -1.2px;
    }

    .logistics-hero-desc {
        font-size: 15px;
    }

    .logistics-hero-desc br {
        display: none;
    }

    .logistics-product-main {
        padding: 60px 0 85px;
    }

    .logistics-tabs {
        grid-template-columns: 1fr;

        margin-bottom: 55px;
    }

    .logistics-tab {
        min-height: 67px;

        border-right: 0;
        border-bottom: 1px solid #e7ebf0;
    }

    .logistics-tab:last-child {
        border-bottom: 0;
    }

    .logistics-tab::after {
        right: 35%;
        left: 35%;
    }

    .logistics-section-heading {
        margin-bottom: 34px;
        padding-bottom: 21px;
    }

    .logistics-section-heading > div {
        margin-bottom: 15px;
    }

    .logistics-section-heading h2 {
        font-size: 31px;
    }

    .logistics-section-heading > p {
        max-width: 100%;

        font-size: 14px;
    }

    .logistics-product-grid,
    .logistics-grid-one {
        grid-template-columns: 1fr;
    }

    .logistics-product-image {
        height: 285px;
        padding: 32px;
    }

    .logistics-product-image img {
        max-height: 210px;
    }

    .logistics-product-info {
        padding: 28px 25px 26px;
    }

    .logistics-product-summary {
        min-height: auto;
    }
}


/* =========================================================
   16. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .logistics-hero h1 {
        font-size: 32px;
    }

    .logistics-section-heading .section-label {
        font-size: 12px;
        letter-spacing: 1.7px;
    }

    .logistics-section-heading h2 {
        font-size: 28px;
    }

    .logistics-product-image {
        height: 255px;
        padding: 27px 22px;
    }

    .logistics-product-image img {
        max-height: 185px;
    }

    .logistics-product-info {
        padding: 26px 22px 24px;
    }

    .logistics-product-info h3 {
        font-size: 22px;
    }

    .logistics-product-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .logistics-detail-link,
    .logistics-quote-link {
        width: 100%;
        min-width: 0;
    }
}

/* =========================================================
   ZEBRA MC3400 SERIES DETAIL PAGE
   카드 디자인 + 연한 주황 SERVICE / CONSULTING
========================================================= */


/* =========================================================
   1. HERO IMAGE / BADGE
========================================================= */

.zebra-mc3400-image {
    position: relative;
}

.zebra-mc3400-image img {
    position: relative;
    z-index: 2;

    width: auto;
    max-width: 92%;
    max-height: 430px;

    object-fit: contain;
}

.zebra-mc3400-image-badge {
    background: #172033;
}

.zebra-mc3400-badge {
    color: #49566a;
    background: #f5f7fa;
    border-color: #dce2e9;
}

.zebra-mc3400-detail-page .brand-zebra {
    color: #111111;
}


/* =========================================================
   2. HERO NOTICE
========================================================= */

.mc3400-configuration-notice {
    margin: 22px 0 0;
    padding: 14px 17px;

    color: #737d8b;
    background: #f7f9fb;

    border-left: 3px solid #f28c28;
    border-radius: 5px;

    font-size: 12px;
    line-height: 1.75;

    word-break: keep-all;
}


/* =========================================================
   3. 공통 MC3400 SECTION HEADING
========================================================= */

.mc3400-why-section .product-detail-heading,
.mc3400-workflow-section .product-detail-heading,
.mc3400-configuration-section .product-detail-heading {
    max-width: 820px;
    margin: 0 auto 58px;

    text-align: center;
}

.mc3400-why-section .product-detail-heading .section-label,
.mc3400-workflow-section .product-detail-heading .section-label,
.mc3400-configuration-section .product-detail-heading .section-label {
    margin-bottom: 15px;
}

.mc3400-why-section .product-detail-heading h2,
.mc3400-workflow-section .product-detail-heading h2,
.mc3400-configuration-section .product-detail-heading h2 {
    margin: 0 0 18px;

    color: #172033;

    font-size: 38px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -1px;
}

.mc3400-why-section .product-detail-heading > p:last-child,
.mc3400-workflow-section .product-detail-heading > p:last-child,
.mc3400-configuration-section .product-detail-heading > p:last-child {
    margin: 0;

    color: #667085;

    font-size: 15px;
    line-height: 1.8;

    word-break: keep-all;
}


/* =========================================================
   4. WHY MC3400
========================================================= */

.mc3400-why-section {
    padding: 110px 0;
    background: #f4f6f9;
}

.mc3400-why-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.mc3400-why-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 255px;
    padding: 32px 28px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e1e6ec;
    border-radius: 18px;

    box-shadow:
        0 8px 25px
        rgba(15, 23, 42, 0.045);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.mc3400-why-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            #f28c28,
            #ffb866
        );

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.3s ease;
}

.mc3400-why-card::after {
    content: "";

    position: absolute;
    right: -65px;
    bottom: -65px;

    width: 150px;
    height: 150px;

    border: 1px solid rgba(242, 140, 40, 0.09);
    border-radius: 50%;
}

.mc3400-why-card:hover {
    transform: translateY(-7px);

    border-color: rgba(242, 140, 40, 0.32);

    box-shadow:
        0 20px 45px
        rgba(15, 23, 42, 0.11);
}

.mc3400-why-card:hover::before {
    transform: scaleX(1);
}


/* =========================================================
   5. WORKFLOW
========================================================= */

.mc3400-workflow-section {
    padding: 110px 0;
    background: #ffffff;
}

.mc3400-workflow-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.mc3400-workflow-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 245px;
    padding: 31px 28px;

    overflow: hidden;

    background: #f8fafc;

    border: 1px solid #e1e6ec;
    border-radius: 18px;

    box-shadow:
        0 8px 25px
        rgba(15, 23, 42, 0.045);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.mc3400-workflow-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            #f28c28,
            #ffb866
        );

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.3s ease;
}

.mc3400-workflow-card::after {
    content: "";

    position: absolute;
    right: -65px;
    bottom: -65px;

    width: 150px;
    height: 150px;

    border: 1px solid rgba(242, 140, 40, 0.09);
    border-radius: 50%;
}

.mc3400-workflow-card:hover {
    transform: translateY(-7px);

    border-color: rgba(242, 140, 40, 0.32);

    box-shadow:
        0 20px 45px
        rgba(15, 23, 42, 0.11);
}

.mc3400-workflow-card:hover::before {
    transform: scaleX(1);
}


/* =========================================================
   6. 공통 카드 번호 / 제목 / 설명
========================================================= */

.mc3400-card-number {
    position: relative;
    z-index: 2;

    display: block;
    margin-bottom: 38px;

    color: rgba(242, 140, 40, 0.27);

    font-size: 39px;
    font-weight: 700;
    line-height: 1;
}

.mc3400-why-card h3,
.mc3400-workflow-card h3,
.mc3400-configuration-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 14px;

    color: #172033;

    font-size: 21px;
    font-weight: 700;
    line-height: 1.4;
}

.mc3400-why-card p,
.mc3400-workflow-card p,
.mc3400-configuration-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #667085;

    font-size: 14px;
    line-height: 1.8;

    word-break: keep-all;
}


/* =========================================================
   7. KEY FEATURES
========================================================= */

.mc3400-feature-section
.product-feature-card::before {
    background:
        linear-gradient(
            90deg,
            #f28c28,
            #ffb866
        );
}

.mc3400-feature-section
.product-feature-number {
    color: rgba(242, 140, 40, 0.25);
}

.mc3400-feature-section
.product-feature-card:hover {
    border-color: rgba(242, 140, 40, 0.3);
}


/* =========================================================
   8. MODEL CONFIGURATION
========================================================= */

.mc3400-configuration-section {
    padding: 110px 0;
    background: #f4f6f9;
}

.mc3400-configuration-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.mc3400-configuration-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 255px;
    padding: 32px 28px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e1e6ec;
    border-radius: 18px;

    box-shadow:
        0 8px 25px
        rgba(15, 23, 42, 0.045);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.mc3400-configuration-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            #f28c28,
            #ffb866
        );

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.3s ease;
}

.mc3400-configuration-card::after {
    content: "";

    position: absolute;
    right: -65px;
    bottom: -65px;

    width: 150px;
    height: 150px;

    border: 1px solid rgba(242, 140, 40, 0.09);
    border-radius: 50%;
}

.mc3400-configuration-card:hover {
    transform: translateY(-7px);

    border-color: rgba(242, 140, 40, 0.32);

    box-shadow:
        0 20px 45px
        rgba(15, 23, 42, 0.11);
}

.mc3400-configuration-card:hover::before {
    transform: scaleX(1);
}


/* =========================================================
   9. SPECIFICATION
========================================================= */

.mc3400-spec-section
.product-spec-table th {
    color: #754617;
    background: #fff7ed;
}

.mc3400-spec-notice {
    max-width: 850px;
    margin: 28px auto 0;
    padding: 16px 20px;

    color: #737d8b;
    background: #fffaf4;

    border-left: 3px solid #f28c28;
    border-radius: 5px;

    font-size: 13px;
    line-height: 1.8;

    word-break: keep-all;
}


/* =========================================================
   ZEBRA MC3400
   LIGHT ORANGE SERVICE / CONSULTING THEME
   기준 배경색: #fff7ed
========================================================= */


/* =========================================================
   1. IDEUNCS SERVICE
========================================================= */

.zebra-mc3400-detail-page .mc3400-service-section {
    position: relative;

    padding: 110px 0;
    overflow: hidden;

    color: #172033;

    background: #fff7ed !important;

    border-top: 1px solid #f2e2cf;
    border-bottom: 1px solid #f2e2cf;
}

/* 우측 상단 은은한 원 */
.zebra-mc3400-detail-page .mc3400-service-section::before {
    content: "";

    position: absolute;
    top: -180px;
    right: -100px;

    width: 470px;
    height: 470px;

    background: rgba(242, 140, 40, 0.055);
    border-radius: 50%;

    pointer-events: none;
}

.zebra-mc3400-detail-page
.mc3400-service-section .container {
    position: relative;
    z-index: 2;
}


/* 제목 영역 */

.zebra-mc3400-detail-page
.mc3400-service-section
.product-detail-heading .section-label {
    color: #d97706 !important;
}

.zebra-mc3400-detail-page
.mc3400-service-section
.product-detail-heading h2 {
    color: #172033 !important;
}

.zebra-mc3400-detail-page
.mc3400-service-section
.product-detail-heading > p:last-child {
    color: #667085 !important;
}


/* 서비스 카드 */

.zebra-mc3400-detail-page
.mc3400-service-section
.product-service-item {
    min-height: 235px;
    padding: 31px 27px;

    background: #ffffff !important;

    border: 1px solid #eadac7 !important;
    border-radius: 18px;

    box-shadow:
        0 8px 24px
        rgba(100, 65, 25, 0.055);

    backdrop-filter: none;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.zebra-mc3400-detail-page
.mc3400-service-section
.product-service-item:hover {
    transform: translateY(-6px);

    background: #ffffff !important;
    border-color: #efb36d !important;

    box-shadow:
        0 18px 40px
        rgba(100, 65, 25, 0.11);
}


/* 카드 번호 */

.zebra-mc3400-detail-page
.mc3400-service-section
.product-service-item span {
    display: block;
    margin-bottom: 38px;

    color: #e1841d !important;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}


/* 카드 제목 */

.zebra-mc3400-detail-page
.mc3400-service-section
.product-service-item h3 {
    margin: 0 0 14px;

    color: #172033 !important;

    font-size: 20px;
}


/* 카드 설명 */

.zebra-mc3400-detail-page
.mc3400-service-section
.product-service-item p {
    margin: 0;

    color: #667085 !important;

    font-size: 14px;
    line-height: 1.8;

    word-break: keep-all;
}


/* =========================================================
   2. CONSULTING SECTION
========================================================= */

.zebra-mc3400-detail-page .mc3400-quote-section {
    padding: 100px 0;

    background: #ffffff;
}


/* 견적문의 박스 */

.zebra-mc3400-detail-page .mc3400-quote-box {
    position: relative;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 55px;

    width: 100%;
    padding: 64px 70px;
    overflow: hidden;

    color: #172033;

    background: #fff7ed !important;

    border: 1px solid #ead7bf;
    border-radius: 26px;

    box-shadow:
        0 18px 45px
        rgba(100, 65, 25, 0.11);
}


/* 원형 장식 */

.zebra-mc3400-detail-page
.mc3400-quote-box::before {
    content: "";

    position: absolute;
    top: -135px;
    right: -65px;

    width: 380px;
    height: 380px;

    background: rgba(242, 140, 40, 0.075);
    border-radius: 50%;

    pointer-events: none;
}

.zebra-mc3400-detail-page
.mc3400-quote-box::after {
    content: none !important;
}


/* 내부 내용 */

.zebra-mc3400-detail-page
.mc3400-quote-box > div {
    position: relative;
    z-index: 2;
}


/* 영문 라벨 */

.zebra-mc3400-detail-page
.mc3400-quote-box .section-label {
    color: #d97706 !important;
}


/* 제목 */

.zebra-mc3400-detail-page
.mc3400-quote-box h2 {
    color: #172033 !important;
}


/* 설명 */

.zebra-mc3400-detail-page
.mc3400-quote-box p {
    color: #667085 !important;
}


/* 견적 버튼 */

.zebra-mc3400-detail-page
.mc3400-quote-box
.product-detail-quote-actions a {
    color: #ffffff !important;
    background: #e88618 !important;

    border: 1px solid #e88618;
}

.zebra-mc3400-detail-page
.mc3400-quote-box
.product-detail-quote-actions a:hover {
    color: #ffffff !important;
    background: #c96f0c !important;
    border-color: #c96f0c;
}


/* 전화번호 */

.zebra-mc3400-detail-page
.mc3400-quote-box
.product-detail-quote-actions strong {
    color: #7a4a18 !important;
}


/* =========================================================
   3. TABLET
========================================================= */

@media (max-width: 1100px) {

    .zebra-mc3400-detail-page
    .mc3400-quote-box {
        gap: 35px;
        padding: 55px 48px;
    }
}

/* =========================================================
   14. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .mc3400-why-card,
    .mc3400-workflow-card,
    .mc3400-configuration-card {
        padding: 27px 23px;
    }

    .mc3400-card-number {
        margin-bottom: 30px;
        font-size: 35px;
    }
}

/* =========================================================
   THINKPAD / WORKSTATION LINEUP CARDS
========================================================= */

.workstation-lineup-section {
    padding: 105px 0;
    background: #ffffff;
}

.workstation-lineup-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.workstation-lineup-card {
    position: relative;
    min-height: 270px;
    padding: 34px 30px;
    overflow: hidden;

    background: #f7f9fc;
    border: 1px solid #e0e7ef;
    border-radius: 20px;

    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.05);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.workstation-lineup-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: linear-gradient(
        90deg,
        #e2231a,
        #ff6b63
    );

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.35s ease;
}

.workstation-lineup-card:hover {
    transform: translateY(-8px);
    border-color: rgba(226, 35, 26, 0.28);

    box-shadow:
        0 20px 45px rgba(15, 23, 42, 0.11);
}

.workstation-lineup-card:hover::before {
    transform: scaleX(1);
}

.workstation-lineup-number {
    display: block;
    margin-bottom: 34px;

    color: rgba(226, 35, 26, 0.22);

    font-size: 42px;
    font-weight: 700;
    line-height: 1;
}

.workstation-lineup-type {
    margin-bottom: 9px;

    color: #e2231a;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.workstation-lineup-card h3 {
    margin-bottom: 16px;

    color: #172033;

    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;
}

.workstation-lineup-card > p:last-child {
    margin: 0;

    color: #667085;

    font-size: 14px;
    line-height: 1.8;
    word-break: keep-all;
}

/* Tablet */

@media (max-width: 1024px) {

    .workstation-lineup-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile */

@media (max-width: 768px) {

    .workstation-lineup-section {
        padding: 75px 0;
    }

    .workstation-lineup-grid {
        grid-template-columns: 1fr;
    }

    .workstation-lineup-card {
        min-height: auto;
        padding: 30px 25px;
    }

    .workstation-lineup-number {
        margin-bottom: 28px;
        font-size: 38px;
    }

    .workstation-lineup-card h3 {
        font-size: 22px;
    }
}