/* ==========================================
   SMGM Website - Pages Stylesheet
   ========================================== */

/* ==========================================
   HOME PAGE - HERO SECTION
   ========================================== */
.hero {
    position: relative;
    background-color: #2b1a0f;
    background-image:
        linear-gradient(to right,
            rgba(0,0,0,0.55) 0%,
            rgba(0,0,0,0.40) 50%,
            rgba(0,0,0,0.20) 100%),
        url('../img/hero-bg-new.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 80vh;
    padding: 0 0 56px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 220px;
    height: 140px;
    background: radial-gradient(ellipse at bottom right, rgba(130,75,38,1) 0%, rgba(130,75,38,1) 45%, rgba(130,75,38,0.7) 65%, transparent 80%);
    pointer-events: none;
}
.hero .hero__title,
.hero .hero__title-line,
.hero .hero__subtitle-main {
    color: #ffffff;
}
.hero .hero__subtitle-sub,
.hero .hero__description {
    color: rgba(255,255,255,0.80);
}

/* Brand / News pages — brick wall background with dark overlay + white text */
.hero--dark {
    background-color: #1a0e0a;
    background-image:
        linear-gradient(rgba(0,0,0,0.52), rgba(0,0,0,0.62)),
        url('../img/brand-news-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* News page — dedicated hero image */
.hero--news {
    background-image:
        linear-gradient(rgba(0,0,0,0.52), rgba(0,0,0,0.62)),
        url('../img/news-hero-img.png');
}

/* Brand page — overlay removed, matches main/solution page style */
.hero--brand {
    background-image:
        linear-gradient(to right,
            rgba(0,0,0,0.55) 0%,
            rgba(0,0,0,0.35) 50%,
            rgba(0,0,0,0.10) 100%),
        url('../img/brand-hero-bg.png');
}

.hero--dark .hero__title,
.hero--dark .hero__title-line,
.hero--dark .hero__subtitle,
.hero--dark .hero__subtitle-main,
.hero--dark .hero__subtitle-sub,
.hero--dark .badge {
    color: var(--color-white);
}

/* JS adds .anim-ready to body → hero lines hidden until revealed */
.anim-ready .hero__title-line {
    opacity: 0;
    filter: brightness(0.2);
}

/* 모든 히어로 섹션 — 컨테이너 전폭 확보 + 왼쪽 정렬 통일 */
.hero .container,
.hero--dark .container,
.company-hero .container,
.solution-hero .container {
    width: 100%;
    text-align: left;
}

.hero .container > * {
    max-width: 100%;
}

.hero__title-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: var(--spacing-lg);
}

.hero__title-line {
    display: block;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-black);
}

.hero__subtitle-group {
    margin-top: var(--spacing-xl);
}

.hero__subtitle-main {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-black);
    margin-bottom: var(--spacing-sm);
}

.hero__subtitle-sub {
    font-size: 18px;
    line-height: 1.6;
    color: var(--color-gray-dark);
    margin: 0;
}

.hero__description-group {
    margin-top: var(--spacing-md);
    line-height: 1.4;
}

.hero__description {
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-gray-dark);
    margin: 0;
    margin-bottom: 4px;
}

.hero__description:last-child {
    margin-bottom: 0;
}

/* ==========================================
   MATERIAL INTELLIGENCE SECTION
   ========================================== */
.section__title-lg {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 0;
}

.section__title-normal {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: var(--spacing-xs);
}

.section__subtitle-eng {
    font-size: var(--font-size-base);
    color: var(--color-gray-dark);
    font-style: italic;
    margin-bottom: var(--spacing-md);
}

.section__description {
    font-size: var(--font-size-base);
    color: var(--color-gray-dark);
    line-height: 1.6;
}

.intelligence-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

.intelligence-item {
    background-color: var(--color-white);
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: var(--spacing-lg);
    transition: all var(--transition-base);
}

.intelligence-item:hover {
    border-color: var(--color-terracotta);
    background-color: var(--color-muted, #f4f4f5);
    box-shadow: var(--shadow-sm);
}

.intelligence-item__number {
    font-size: 48px;
    font-weight: 700;
    color: var(--color-terracotta);
    margin-bottom: var(--spacing-md);
    line-height: 1;
}

.intelligence-item__title-en {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: var(--spacing-xs);
}

.intelligence-item__title-ko {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-gray-dark);
    margin-bottom: var(--spacing-md);
}

.intelligence-item__description {
    font-size: 15px;
    color: var(--color-gray-dark);
    line-height: 1.8;
}

/* ==========================================
   SOLUTIONS SECTION — Expanding Panels
   ========================================== */
.solutions-panel {
    display: flex;
    height: 540px;
    background: #0a1628;
    overflow: hidden;
    margin-top: var(--spacing-xl);
}

.solutions-panel--tall {
    height: 720px;
}

.sp-item {
    position: relative;
    flex: 1;
    overflow: hidden;
    cursor: pointer;
    border-right: 1px solid rgba(255,255,255,0.08);
    transition: flex 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.sp-item.active { flex: 4.5; }
.sp-item:last-child { border-right: none; }
.sp-item:focus-visible { outline: 2px solid var(--color-terracotta); outline-offset: -2px; }

.sp-item__bg {
    position: absolute;
    inset: 0;
    background: center / cover no-repeat;
    opacity: 0.42;
    transition: opacity 0.6s ease;
}
.sp-item.active .sp-item__bg { opacity: 0.92; }

.sp-item.active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
        rgba(10,22,40,0.78) 0%,
        rgba(10,22,40,0.32) 65%,
        rgba(10,22,40,0.04) 100%);
    pointer-events: none;
    z-index: 1;
}

.sp-item__collapsed {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 40px;
    gap: 14px;
    z-index: 2;
    transition: opacity 0.25s ease;
}
.sp-item.active .sp-item__collapsed {
    opacity: 0;
    pointer-events: none;
}

.sp-item__icon {
    width: 38px;
    height: 38px;
    opacity: 0.65;
}
.sp-item__icon svg {
    width: 100%;
    height: 100%;
    stroke: rgba(255,255,255,0.85);
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sp-item__label {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
}

.sp-item__expanded {
    position: absolute;
    z-index: 2;
    bottom: 52px;
    left: 48px;
    right: 38%;
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sp-item.active .sp-item__expanded {
    pointer-events: auto;
}

.sp-item__badge {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-terracotta);
    border: 1px solid var(--color-terracotta);
    border-radius: 4px;
    padding: 3px 10px;
    width: fit-content;
}

.sp-item__title {
    font-size: clamp(22px, 2.4vw, 34px);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
}

.sp-item__subtitle {
    font-size: 13px;
    color: rgba(255,255,255,0.45);
    margin: 0;
}

.sp-item__desc {
    font-size: 14px;
    color: rgba(255,255,255,0.78);
    line-height: 1.7;
    word-break: keep-all;
    margin: 0;
}

.sp-item__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-terracotta);
    color: #fff;
    padding: 10px 20px;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    width: fit-content;
    margin-top: 4px;
    transition: background 0.2s, transform 0.2s;
}
.sp-item__link:hover {
    background: #c96b50;
    transform: translateX(3px);
}

.sp-item__indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-terracotta);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 3;
}
.sp-item.active .sp-item__indicator { transform: scaleX(1); }

@media (max-width: 768px) {
    .solutions-panel {
        flex-direction: column;
        height: auto;
    }
    .sp-item {
        flex: none !important;
        height: 72px;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        transition: height 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .sp-item.active { height: 380px; }
    .solutions-panel--tall .sp-item.active { height: 480px; }
    .sp-item:last-child { border-bottom: none; }
    .sp-item__expanded {
        left: 24px;
        right: 24px;
        bottom: 28px;
    }
    .sp-item__collapsed {
        flex-direction: row;
        justify-content: flex-start;
        padding: 0 24px;
        gap: 12px;
    }
    .sp-item__icon { width: 28px; height: 28px; }
    .sp-item__title { font-size: 22px; }
}

/* Old solution box styles - deprecated */
.solutions-section {
    background-color: var(--color-gray-light);
}

/* ==========================================
   COMPANY PAGE — Solution Family Boxes (Glassmorphism)
   ========================================== */
.company-brands-section {
    background: linear-gradient(135deg, #f5e0cc 0%, #edddd0 40%, #e8d2be 100%);
}

.solution-box {
    cursor: pointer;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 16px;
    box-shadow:
        0 8px 32px rgba(160, 80, 40, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: all 0.35s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
}

.solution-box:hover {
    background: rgba(255, 255, 255, 0.68);
    border-color: rgba(224, 122, 95, 0.50);
    transform: translateY(-5px);
    box-shadow:
        0 14px 42px rgba(160, 80, 40, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.solution-box .box-title {
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    font-size: 17px;
    font-weight: 700;
    color: #3a2010;
    margin-bottom: 0;
}

/* ==========================================
   APPLICATION RELIABILITY SECTION
   ========================================== */
.reliability-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

.reliability-item {
    background-color: var(--color-white);
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: var(--spacing-lg);
    transition: all var(--transition-base);
    text-align: center;
}

.reliability-item:hover {
    border-color: var(--color-terracotta);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.reliability-item__title-en {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: var(--spacing-xs);
}

.reliability-item__title-ko {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-gray-dark);
    margin-bottom: var(--spacing-md);
}

.reliability-item__description {
    font-size: 15px;
    color: var(--color-gray-dark);
    line-height: 1.8;
}

/* ==========================================
   ESG / ENVIRONMENTAL COMMITMENT SECTION
   ========================================== */
.esg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

.esg-item {
    background-color: var(--color-white);
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: var(--spacing-lg);
    transition: all var(--transition-base);
    text-align: center;
}

.esg-item:hover {
    border-color: var(--color-terracotta);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.esg-item__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: var(--spacing-md);
}

.esg-item__description {
    font-size: 15px;
    color: var(--color-gray-dark);
    line-height: 1.8;
}

/* Benefits Grid */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

.benefit-card {
    background-color: var(--color-white);
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: var(--spacing-lg);
    transition: all var(--transition-base);
}

.benefit-card:hover {
    border-color: var(--color-terracotta);
    background-color: var(--color-muted, #f4f4f5);
    box-shadow: var(--shadow-sm);
}

.benefit-card__category {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-terracotta);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--color-terracotta);
}

.benefit-card__item {
    margin-bottom: var(--spacing-md);
}

.benefit-card__item:last-child {
    margin-bottom: 0;
}

.benefit-card__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: var(--spacing-xs);
}

.benefit-card__description {
    font-size: 15px;
    color: var(--color-gray-dark);
    line-height: 1.6;
}

/* Problem Grid */
.problem-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

.problem-card {
    background-color: var(--color-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

.problem-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.problem-card__accent {
    width: 100%;
    height: 6px;
    background-color: var(--color-terracotta);
}

.problem-card__content {
    padding: var(--spacing-lg);
}

.problem-card__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: var(--spacing-sm);
}

.problem-card__description {
    font-size: 15px;
    color: var(--color-gray-dark);
    line-height: 1.7;
}

.section__subtitle-desc {
    font-size: 16px;
    color: var(--color-black);
    font-weight: 500;
}

/* Certification Grid */
.certification-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

.certification-card {
    background-color: var(--color-white);
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: var(--spacing-lg);
    text-align: center;
    transition: all var(--transition-base);
}

.certification-card:hover {
    border-color: var(--color-terracotta);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.certification-card__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: var(--spacing-md);
}

.certification-card__description {
    font-size: 15px;
    color: var(--color-gray-dark);
    line-height: 1.7;
}

/* Background Grid */
.background-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

.background-card {
    background-color: var(--color-white);
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: var(--spacing-xl) var(--spacing-lg);
    text-align: left;
    transition: all var(--transition-base);
}

.background-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.background-card__icon-box {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #a8e063 0%, #56ab2f 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
    color: var(--color-white);
}

.background-card__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: var(--spacing-sm);
    line-height: 1.4;
}

.background-card__description {
    font-size: 13px;
    color: var(--color-gray-dark);
    line-height: 1.6;
}

/* Comparison Grid */
.comparison-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.comparison-card {
    background-color: var(--color-white);
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: var(--spacing-lg);
    position: relative;
    transition: all var(--transition-base);
}

.comparison-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.comparison-card--highlight {
    border-color: var(--color-terracotta);
    background: linear-gradient(to bottom, #fff9f7 0%, #ffffff 100%);
}

.comparison-card__badge {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background-color: var(--color-terracotta);
    color: var(--color-white);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.comparison-card__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-gray-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-xs);
}

.comparison-card__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: var(--spacing-sm);
    line-height: 1.4;
}

.comparison-card__desc {
    font-size: 14px;
    color: var(--color-gray-dark);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
}

.comparison-card__divider {
    width: 100%;
    height: 1px;
    background-color: #e0e0e0;
    margin: var(--spacing-md) 0;
}

.comparison-card__subtitle {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: var(--spacing-sm);
}

.comparison-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comparison-card__list li {
    font-size: 14px;
    color: var(--color-gray-dark);
    line-height: 1.8;
    padding-left: 20px;
    position: relative;
    margin-bottom: 8px;
}

.comparison-card__list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-terracotta);
    font-weight: 700;
}

.comparison-card--highlight .comparison-card__list li::before {
    content: '✓';
}

/* Comparison Table */
.comparison-table-wrapper {
    overflow-x: auto;
    margin-top: var(--spacing-xl);
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--color-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.comparison-table thead {
    background-color: var(--color-black);
    color: var(--color-white);
}

.comparison-table th {
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    border-right: 1px solid rgba(255,255,255,0.1);
}

.comparison-table th:last-child {
    border-right: none;
}

.comparison-table th.highlight {
    background-color: var(--color-terracotta);
}

.comparison-table tbody tr {
    border-bottom: 1px solid #e0e0e0;
}

.comparison-table tbody tr:last-child {
    border-bottom: none;
}

.comparison-table tbody tr:hover {
    background-color: #f9f9f9;
}

.comparison-table td {
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: center;
    font-size: 15px;
    color: var(--color-gray-dark);
    border-right: 1px solid #e0e0e0;
}

.comparison-table td:last-child {
    border-right: none;
}

.comparison-table td.item-label {
    font-weight: 700;
    color: var(--color-black);
    text-align: left;
}

.comparison-table td.highlight {
    background-color: #fff9f7;
    color: var(--color-terracotta);
}

.comparison-table td.highlight strong {
    color: var(--color-terracotta);
}

/* Composition Chart */
.composition-chart {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-lg);
    background-color: #f9f9f9;
    border-radius: 12px;
}

.composition-bar {
    display: flex;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-lg);
}

.composition-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm);
    color: var(--color-white);
    position: relative;
    transition: all var(--transition-base);
}

.composition-item:hover {
    transform: scaleY(1.05);
    filter: brightness(1.1);
}

.composition-item--large,
.composition-item--medium {
    padding: var(--spacing-md);
}

.composition-item--small {
    min-width: 50px;
}

.composition-label {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.composition-item--small .composition-label {
    font-size: 13px;
}

.composition-name {
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
}

/* Composition Legend */
.composition-legend {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md) var(--spacing-xl);
    justify-items: start;
    margin-top: var(--spacing-md);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.legend-line {
    width: 40px;
    height: 2px;
    border-top: 2px solid;
}

.legend-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.legend-percent {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-black);
}

.legend-name {
    font-size: 12px;
    color: var(--color-gray-dark);
}

/* Core Benefits Grid */
.core-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.core-benefit-card {
    background-color: var(--color-white);
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: var(--spacing-xl) var(--spacing-lg);
    text-align: center;
    transition: all var(--transition-base);
}

.core-benefit-card:hover {
    border-color: var(--color-terracotta);
    background-color: var(--color-muted, #f4f4f5);
    box-shadow: var(--shadow-sm);
}

.core-benefit-card__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: var(--spacing-md);
}

.core-benefit-card__description {
    font-size: 14px;
    color: var(--color-gray-dark);
    line-height: 1.7;
}

/* Performance Highlights */
.performance-highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.performance-card {
    background-color: var(--color-white);
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: var(--spacing-xl);
    text-align: center;
    transition: all var(--transition-base);
}

.performance-card:hover {
    border-color: var(--color-terracotta);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.performance-card__value {
    font-size: 48px;
    font-weight: 700;
    color: var(--color-terracotta);
    margin-bottom: var(--spacing-md);
    line-height: 1;
}

.performance-card__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: var(--spacing-sm);
}

.performance-card__description {
    font-size: 14px;
    color: var(--color-gray-dark);
    line-height: 1.7;
}

/* Performance Detail Grid */
.performance-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.performance-detail-card {
    background-color: var(--color-white);
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: var(--spacing-xl);
    transition: all var(--transition-base);
}

.performance-detail-card:hover {
    border-color: var(--color-terracotta);
    box-shadow: var(--shadow-lg);
}

.performance-detail-card__category {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    border-bottom: 3px solid var(--color-terracotta);
}

.performance-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) 0;
}

.performance-detail-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-black);
}

.performance-detail-value {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 14px;
    color: var(--color-gray-dark);
}

.performance-stars {
    color: #FFD700;
    font-size: 14px;
}

.performance-detail-divider {
    height: 1px;
    background-color: #e0e0e0;
}

/* Partnership Container */
.partnership-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

.partnership-card {
    flex: 1;
    max-width: 450px;
    background-color: var(--color-white);
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: var(--spacing-xl);
    transition: all var(--transition-base);
}

.partnership-card:hover {
    border-color: var(--color-terracotta);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.partnership-card__header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.partnership-card__company {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-terracotta);
    margin-bottom: var(--spacing-sm);
}

.partnership-card__role {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: var(--spacing-xs);
}

.partnership-card__subtitle {
    font-size: 13px;
    color: var(--color-gray-dark);
}

.partnership-card__divider {
    height: 2px;
    background: linear-gradient(to right, transparent, var(--color-terracotta), transparent);
    margin: var(--spacing-lg) 0;
}

.partnership-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.partnership-item__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: 4px;
}

.partnership-item__desc {
    font-size: 13px;
    color: var(--color-gray-dark);
}

.partnership-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.partnership-connector__line {
    width: 2px;
    height: 40px;
    background-color: var(--color-terracotta);
}

.partnership-connector__icon {
    width: 50px;
    height: 50px;
    background-color: var(--color-terracotta);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
}

.partnership-note {
    font-size: 16px;
    color: var(--color-terracotta);
    line-height: 1.8;
}

.partnership-note strong {
    font-weight: 700;
}

/* Project Cases Grid */
.project-cases-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.project-case-card {
    background-color: var(--color-white);
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: var(--spacing-xl);
    transition: all var(--transition-base);
}

.project-case-card:hover {
    border-color: var(--color-terracotta);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.project-case-card__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-terracotta);
    margin-bottom: var(--spacing-xs);
}

.project-case-card__subtitle {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: var(--spacing-md);
}

.project-case-card__divider {
    height: 2px;
    background: linear-gradient(to right, var(--color-terracotta), transparent);
    margin: var(--spacing-md) 0;
}

.project-case-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.project-case-card__list li {
    font-size: 15px;
    color: var(--color-gray-dark);
    line-height: 1.8;
    padding-left: 20px;
    position: relative;
    margin-bottom: var(--spacing-sm);
}

.project-case-card__list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-terracotta);
    font-weight: 700;
}

.project-note {
    font-size: 16px;
    color: var(--color-terracotta);
    line-height: 1.8;
}

.project-note strong {
    font-weight: 700;
}

/* Keypoints Grid */
.keypoints-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.keypoint-card {
    background-color: var(--color-white);
    border: 2px solid var(--color-terracotta);
    border-radius: 12px;
    padding: var(--spacing-xl) var(--spacing-lg);
    text-align: center;
    transition: all var(--transition-base);
}

.keypoint-card:hover {
    background-color: var(--color-terracotta);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.keypoint-card:hover .keypoint-card__title {
    color: var(--color-white);
}

.keypoint-card__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-terracotta);
    transition: all var(--transition-base);
}

/* Problem Solution Grid */
.problem-solution-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);
}

.problem-solution-card {
    background-color: var(--color-white);
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    overflow: visible;
    transition: all var(--transition-base);
    position: relative;
}

.problem-solution-badge {
    position: absolute;
    top: -20px;
    right: var(--spacing-lg);
    background: linear-gradient(135deg, #2e7d32, #4caf50);
    color: var(--color-white);
    font-size: 14px;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.35);
    z-index: 10;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

.problem-solution-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.problem-solution-card--problem {
    border-color: #e0e0e0;
}

.problem-solution-card--problem:hover {
    border-color: #999;
}

.problem-solution-card--solution {
    border-color: var(--color-terracotta);
    background: linear-gradient(to bottom, #fff9f7 0%, #ffffff 100%);
}

.problem-solution-card__header {
    background-color: var(--color-black);
    padding: var(--spacing-lg);
    text-align: center;
}

.problem-solution-card--solution .problem-solution-card__header {
    background-color: var(--color-terracotta);
}

.problem-solution-card__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.4;
}

.problem-solution-card__content {
    padding: var(--spacing-lg);
}

.problem-solution-item {
    padding: var(--spacing-sm) 0;
}

.problem-solution-item__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 4px;
}

.problem-solution-item__desc {
    font-size: 14px;
    color: var(--color-gray-dark);
    line-height: 1.6;
}

.problem-solution-divider {
    height: 1px;
    background-color: #e0e0e0;
    margin: var(--spacing-sm) 0;
}

/* Specs Grid */
.specs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

.specs-card {
    background-color: var(--color-white);
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: var(--spacing-lg);
    transition: all var(--transition-base);
}

.specs-card:hover {
    border-color: var(--color-terracotta);
    box-shadow: var(--shadow-lg);
}

.specs-card__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--color-terracotta);
}

.specs-card__item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid #e0e0e0;
}

.specs-card__item:last-child {
    border-bottom: none;
}

.specs-card__label {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-black);
    min-width: 100px;
}

.specs-card__value {
    font-size: 15px;
    color: var(--color-gray-dark);
    text-align: right;
    flex: 1;
}

/* ==========================================
   SECTION VARIATIONS
   ========================================== */
.section-gray {
    background-color: var(--color-gray-light);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.section__title {
    font-size: var(--font-size-h1);
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-black);
}

.section__title-xl {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-black);
    margin-bottom: 0;
}

.section__subtitle {
    font-size: 18px;
    color: var(--color-gray-dark);
    margin-top: var(--spacing-sm);
}

/* ==========================================
   PERFORMANCE DATA CARDS
   ========================================== */
.performance-data-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.performance-data-card {
    background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
    border: 2px solid #e0e0e0;
    border-radius: 16px;
    padding: var(--spacing-xl);
    text-align: center;
    transition: all var(--transition-base);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.performance-data-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 24px rgba(224, 122, 95, 0.2);
    border-color: var(--color-terracotta);
}

.performance-data-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--spacing-md);
    color: var(--color-terracotta);
    display: flex;
    align-items: center;
    justify-content: center;
}

.performance-data-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-terracotta);
    margin-bottom: var(--spacing-sm);
}

.performance-data-desc {
    font-size: 15px;
    color: var(--color-gray-dark);
    line-height: 1.6;
}

.performance-emphasis-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-terracotta);
    margin-bottom: var(--spacing-sm);
}

.performance-sub-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-black);
    line-height: 1.6;
}

.performance-final-text {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-black);
    line-height: 1.4;
    margin-top: var(--spacing-xl);
}

/* ==========================================
   AGRICULTURE PROBLEM CARDS
   ========================================== */
.agriculture-problem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.agriculture-problem-card {
    background-color: var(--color-white);
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: var(--spacing-xl);
    text-align: center;
    transition: all var(--transition-base);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.agriculture-problem-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-terracotta);
}

.agriculture-problem-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--spacing-md);
    color: var(--color-terracotta);
    display: flex;
    align-items: center;
    justify-content: center;
}

.agriculture-problem-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: var(--spacing-sm);
}

.agriculture-problem-desc {
    font-size: 15px;
    color: var(--color-gray-dark);
    line-height: 1.6;
}

@media (max-width: 1024px) {
    .agriculture-problem-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .agriculture-problem-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .agriculture-problem-icon {
        width: 44px;
        height: 44px;
    }
    
    .agriculture-problem-title {
        font-size: 18px;
    }
}

/* ==========================================
   SOIL SOLUTION CARDS (2x2 GRID)
   ========================================== */
.soil-solution-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.soil-solution-card {
    background-color: var(--color-white);
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: var(--spacing-xl);
    transition: all var(--transition-base);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.soil-solution-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-terracotta);
}

.soil-solution-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-terracotta);
    margin-bottom: var(--spacing-sm);
}

.soil-solution-desc {
    font-size: 15px;
    color: var(--color-gray-dark);
    line-height: 1.6;
}

@media (max-width: 768px) {
    .soil-solution-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .soil-solution-title {
        font-size: 18px;
    }
}

/* ==========================================
   GAIACURE BENEFITS GRID (특별 레이아웃)
   ========================================== */
.benefits-grid-gaiacure {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

.benefit-card-gaiacure {
    background-color: var(--color-white);
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: var(--spacing-lg);
    text-align: center;
    transition: all var(--transition-base);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.benefit-card-gaiacure--wide {
    grid-column: span 4;
}

.benefit-card-gaiacure:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-terracotta);
}

.benefit-icon-gaiacure {
    width: 52px;
    height: 52px;
    margin: 0 auto var(--spacing-sm);
    color: var(--color-terracotta);
    display: flex;
    align-items: center;
    justify-content: center;
}

.benefit-title-gaiacure {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: var(--spacing-xs);
}

.benefit-desc-gaiacure {
    font-size: 14px;
    color: var(--color-gray-dark);
    line-height: 1.5;
}

@media (max-width: 1024px) {
    .benefits-grid-gaiacure {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .benefit-card-gaiacure--wide {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .benefits-grid-gaiacure {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    .benefit-card-gaiacure--wide {
        grid-column: span 1;
    }
    
    .benefit-icon-gaiacure {
        width: 42px;
        height: 42px;
    }
    
    .benefit-title-gaiacure {
        font-size: 16px;
    }
}

/* ==========================================
   APPLICATION PROCESS (순서형 프로세스)
   ========================================== */
.application-process {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

.application-step {
    background-color: var(--color-white);
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: var(--spacing-lg);
    text-align: center;
    transition: all var(--transition-base);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.application-step:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-terracotta);
}

.application-step-number {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: linear-gradient(135deg, var(--color-terracotta), #d88570);
    color: var(--color-white);
    font-size: 20px;
    font-weight: 700;
    border-radius: 50%;
    margin-bottom: var(--spacing-xs);
}

.application-step-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: var(--spacing-xs);
}

.application-step-desc {
    font-size: 13px;
    color: var(--color-gray-dark);
    line-height: 1.5;
}

.application-arrow {
    font-size: 28px;
    color: var(--color-terracotta);
    font-weight: 700;
    flex-shrink: 0;
}

.application-emphasis-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: var(--spacing-sm);
}

.application-final-text {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-terracotta);
    line-height: 1.4;
}

@media (max-width: 1024px) {
    .application-process {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    .application-arrow {
        display: none;
    }

    .application-step {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .application-process {
        grid-template-columns: 1fr;
    }

    .application-step {
        width: 100%;
    }
    
    .application-step-number {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 20px;
    }
    
    .application-step-title {
        font-size: 16px;
    }
    
    .application-final-text {
        font-size: 22px;
    }
}

@media (max-width: 768px) {
    .performance-data-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .performance-data-icon {
        width: 44px;
        height: 44px;
    }
    
    .performance-data-title {
        font-size: 20px;
    }
    
    .performance-final-text {
        font-size: 22px;
    }
}

/* ==========================================
   PROCESS TIMELINE
   ========================================== */
.process-timeline {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin-top: var(--spacing-xxl);
}

.process-timeline__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 0 0 auto;
    max-width: 200px;
}

.process-timeline__number {
    width: 80px;
    height: 80px;
    background-color: var(--color-terracotta);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
}

.process-timeline__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: var(--spacing-sm);
}

.process-timeline__description {
    font-size: 15px;
    color: var(--color-gray-dark);
    line-height: 1.6;
}

.process-timeline__connector {
    flex: 1;
    height: 2px;
    background-color: var(--color-terracotta);
    align-self: flex-start;
    margin-top: 40px;
    min-width: 60px;
}

.section__subtitle-main {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-black);
    line-height: 1.4;
    margin-bottom: 0;
}

/* ==========================================
   PERFORMANCE CARDS
   ========================================== */
.performance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.performance-card {
    background-color: var(--color-white);
    border: 2px solid var(--color-terracotta);
    border-radius: 12px;
    padding: var(--spacing-xl);
    text-align: center;
    transition: all var(--transition-base);
}

.performance-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.performance-card__value {
    font-size: 56px;
    font-weight: 700;
    color: var(--color-terracotta);
    margin-bottom: var(--spacing-sm);
}

.performance-card__label {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: var(--spacing-sm);
}

.performance-card__description {
    font-size: 14px;
    color: var(--color-gray-dark);
    line-height: 1.6;
}

/* ==========================================
   OVERVIEW PERFORMANCE GRID (2x2)
   ========================================== */
.overview-performance-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    max-width: 800px;
    margin: 0 auto;
}

.overview-performance-card {
    background-color: var(--color-white);
    border: 2px solid var(--color-terracotta);
    border-radius: 12px;
    padding: var(--spacing-xl);
    text-align: center;
    transition: all var(--transition-base);
}

.overview-performance-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.overview-performance-value {
    font-size: 48px;
    font-weight: 700;
    color: var(--color-terracotta);
    margin-bottom: var(--spacing-sm);
    line-height: 1;
}

.overview-performance-label {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-black);
    line-height: 1.4;
}

@media (max-width: 768px) {
    .overview-performance-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .overview-performance-value {
        font-size: 40px;
    }
    
    .overview-performance-label {
        font-size: 16px;
    }
}

/* ==========================================
   CHEMICAL ANALYSIS (2 CARDS IN ROW)
   ========================================== */
.chemical-analysis-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    max-width: 1000px;
    margin: 0 auto;
}

.chemical-analysis-card {
    background-color: var(--color-white);
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: var(--spacing-xl);
    transition: all var(--transition-base);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.chemical-analysis-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-terracotta);
}

.chemical-analysis-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-terracotta);
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.chemical-analysis-desc {
    font-size: 15px;
    color: var(--color-gray-dark);
    line-height: 1.6;
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.chemical-analysis-values {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.chemical-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-black);
}

.chemical-separator {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-terracotta);
}

@media (max-width: 768px) {
    .chemical-analysis-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .chemical-analysis-title {
        font-size: 20px;
    }
    
    .chemical-value {
        font-size: 20px;
    }
    
    .chemical-separator {
        font-size: 20px;
    }
}

/* ==========================================
   INSTITUTE BANNER
   ========================================== */
.institute-banner {
    background-color: var(--color-gray-light);
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px 24px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-gray-dark);
    margin: 0 auto var(--spacing-lg);
    max-width: 400px;
}

/* 3D 입체적 배너 */
.institute-banner-3d {
    background: linear-gradient(145deg, #ffffff, #f0f0f0);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 12px;
    padding: 14px 32px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-black);
    margin: 0 auto var(--spacing-xl);
    max-width: 500px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08), 
                inset 0 1px 0 rgba(255,255,255,0.8),
                inset 0 -1px 0 rgba(0,0,0,0.05);
    position: relative;
}

/* ==========================================
   PERFORMANCE TEST CARDS
   ========================================== */
.performance-test-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    max-width: 1000px;
    margin: 0 auto;
}

.performance-test-card {
    background-color: var(--color-white);
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: var(--spacing-xl);
    text-align: center;
    transition: all var(--transition-base);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.performance-test-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-terracotta);
}

.performance-test-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-terracotta);
    margin-bottom: var(--spacing-sm);
}

.performance-test-desc {
    font-size: 15px;
    color: var(--color-gray-dark);
    line-height: 1.6;
}

@media (max-width: 768px) {
    .performance-test-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .performance-test-title {
        font-size: 20px;
    }
}

/* ==========================================
   HEAVY METAL TEST (시각적 연결)
   ========================================== */
.heavy-metal-test {
    max-width: 800px;
    margin: var(--spacing-xl) auto;
    position: relative;
}

.metal-items {
    display: flex;
    justify-content: space-around;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.metal-box {
    background-color: var(--color-white);
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-black);
    text-align: center;
    min-width: 100px;
    transition: all var(--transition-base);
}

.metal-box:hover {
    border-color: var(--color-terracotta);
    transform: translateY(-2px);
}

.connection-lines {
    text-align: center;
    margin: var(--spacing-md) 0;
}

.result-box {
    background: linear-gradient(135deg, var(--color-terracotta), #d88570);
    color: var(--color-white);
    font-size: 28px;
    font-weight: 700;
    padding: var(--spacing-lg);
    border-radius: 12px;
    text-align: center;
    max-width: 300px;
    margin: 0 auto;
    box-shadow: 0 4px 12px rgba(224, 122, 95, 0.3);
}

/* 3D 입체적 불검출 박스 (화이트 투명) */
.result-box-3d {
    background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(240,240,240,0.9));
    color: var(--color-black);
    font-size: 32px;
    font-weight: 700;
    padding: var(--spacing-xl);
    border-radius: 16px;
    text-align: center;
    max-width: 300px;
    margin: 0 auto;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15), 
                inset 0 2px 4px rgba(255,255,255,0.8),
                inset 0 -2px 4px rgba(0,0,0,0.1);
    border: 2px solid rgba(224, 122, 95, 0.3);
    backdrop-filter: blur(10px);
}

/* ==========================================
   ANTIBACTERIAL BANNER
   ========================================== */
.antibacterial-banner {
    background: linear-gradient(135deg, #2e7d32, #4caf50);
    color: var(--color-white);
    font-size: 24px;
    font-weight: 700;
    padding: var(--spacing-lg);
    border-radius: 12px;
    text-align: center;
    max-width: 600px;
    margin: var(--spacing-xl) auto 0;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
}

.antibacterial-banner-terracotta {
    background: linear-gradient(135deg, var(--color-terracotta), #d88570);
    color: var(--color-white);
    font-size: 16px;
    font-weight: 700;
    padding: var(--spacing-md);
    border-radius: 8px;
    text-align: center;
    max-width: 500px;
    margin: var(--spacing-xl) auto 0;
    box-shadow: 0 4px 12px rgba(224, 122, 95, 0.3);
}

/* 3D 입체적 항균 배너 (초록색 투명) */
.antibacterial-banner-3d {
    background: linear-gradient(145deg, rgba(46,125,50,0.85), rgba(76,175,80,0.75));
    color: var(--color-white);
    font-size: 16px;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: 12px;
    text-align: center;
    display: inline-block;
    margin: var(--spacing-xl) auto 0;
    box-shadow: 0 6px 16px rgba(46,125,50,0.3), 
                inset 0 1px 2px rgba(255,255,255,0.4),
                inset 0 -1px 2px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(8px);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 768px) {
    .metal-items {
        flex-direction: column;
        align-items: center;
    }
    
    .metal-box {
        width: 80%;
    }
    
    .result-box {
        font-size: 24px;
    }
    
    .antibacterial-banner {
        font-size: 20px;
    }
    
    .antibacterial-banner-terracotta {
        font-size: 14px;
    }
    
    .institute-banner-3d {
        font-size: 14px;
        padding: 12px 24px;
    }
    
    .result-box-3d {
        font-size: 24px;
        padding: var(--spacing-md);
    }
    
    .antibacterial-banner-3d {
        font-size: 14px;
        padding: 12px 20px;
    }
}

/* ==========================================
   PERFORMANCE RENEWAL — At a Glance
   ========================================== */
.perf-glance-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    max-width: 900px;
    margin: 0 auto var(--spacing-lg);
}

.perf-glance-card {
    background: var(--color-white);
    border: 2px solid var(--color-terracotta);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg) var(--spacing-md);
    text-align: center;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.perf-glance-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.perf-glance-value {
    font-size: 48px;
    font-weight: 700;
    color: var(--color-terracotta);
    line-height: 1;
    margin-bottom: 8px;
}

.perf-glance-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-gray-dark);
}

.perf-institutes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.perf-institute-tag {
    display: inline-block;
    background: var(--color-gray-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: 6px 16px;
    font-size: 13px;
    color: var(--color-gray-dark);
    font-weight: 500;
}

@media (max-width: 768px) {
    .perf-glance-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }
    .perf-glance-value {
        font-size: 36px;
    }
}

/* ==========================================
   PERFORMANCE RENEWAL — Mineral Composition
   ========================================== */
.perf-mineral-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 800px;
    margin: var(--spacing-lg) auto;
}

.perf-mineral-card {
    display: grid;
    grid-template-columns: 140px 1fr 80px;
    align-items: center;
    gap: 16px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    transition: box-shadow var(--transition-base);
}

.perf-mineral-card:hover {
    box-shadow: var(--shadow-md);
}

.perf-mineral-primary {
    border-color: var(--color-terracotta);
    border-width: 2px;
}

.perf-mineral-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-black);
}

.perf-mineral-bar-wrap {
    height: 24px;
    background: var(--color-gray-light);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.perf-mineral-bar {
    height: 100%;
    width: var(--bar-width);
    background: linear-gradient(90deg, var(--color-terracotta), #d88570);
    border-radius: var(--radius-full);
    transition: width 1.2s ease-out;
}

.perf-mineral-primary .perf-mineral-bar {
    background: linear-gradient(90deg, var(--color-red), var(--color-terracotta));
}

.perf-mineral-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-terracotta);
    text-align: right;
}

.perf-mineral-formula {
    display: none;
}

.perf-mineral-note {
    text-align: center;
    font-size: 14px;
    color: var(--color-gray-dark);
    margin-top: var(--spacing-md);
    line-height: 1.6;
}

@media (max-width: 768px) {
    .perf-mineral-card {
        grid-template-columns: 100px 1fr 60px;
        gap: 10px;
        padding: 12px 14px;
    }
    .perf-mineral-name {
        font-size: 13px;
    }
    .perf-mineral-value {
        font-size: 16px;
    }
}

/* ==========================================
   PERFORMANCE RENEWAL — XRF Chemical Analysis
   ========================================== */
.perf-xrf-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-top: var(--spacing-lg);
}

.perf-xrf-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    text-align: center;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.perf-xrf-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.perf-xrf-highlight {
    border-color: var(--color-terracotta);
    border-width: 2px;
}

.perf-xrf-formula {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-gray-dark);
    margin-bottom: 8px;
}

.perf-xrf-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-black);
    line-height: 1.2;
}

.perf-xrf-highlight .perf-xrf-value {
    color: var(--color-terracotta);
}

.perf-xrf-name {
    font-size: 12px;
    color: var(--color-gray-medium);
    margin-top: 4px;
}

@media (max-width: 1024px) {
    .perf-xrf-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .perf-xrf-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .perf-xrf-value {
        font-size: 22px;
    }
}

/* ==========================================
   PERFORMANCE RENEWAL — Functional Properties
   ========================================== */
.perf-func-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.perf-func-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.perf-func-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.perf-func-header {
    padding: 16px 20px 0;
}

.perf-func-body {
    padding: 16px 20px 24px;
}

.perf-func-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 16px;
}

.perf-func-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.perf-func-stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 14px;
    background: var(--color-gray-light);
    border-radius: var(--radius-md);
}

.perf-func-stat-label {
    font-size: 13px;
    color: var(--color-gray-dark);
}

.perf-func-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-terracotta);
}

.perf-func-desc {
    font-size: 14px;
    color: var(--color-gray-dark);
    line-height: 1.6;
}

@media (max-width: 1024px) {
    .perf-func-grid {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin: 0 auto;
    }
}

/* ==========================================
   PERFORMANCE RENEWAL — Safety Certification
   ========================================== */
.perf-safety-block {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.perf-safety-block .institute-banner-3d {
    margin-bottom: var(--spacing-md);
}

.perf-safety-metals {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: var(--spacing-md);
}

.perf-safety-metal-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    background: var(--color-gray-light);
    border-radius: var(--radius-md);
}

.perf-safety-metal-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-black);
    text-align: center;
}

.perf-safety-metal-result {
    font-size: 15px;
    font-weight: 700;
}

.perf-safe {
    color: var(--color-success);
    font-weight: 700;
}

.perf-safety-method {
    font-size: 12px;
    color: var(--color-gray-medium);
    margin-top: var(--spacing-sm);
    line-height: 1.5;
}

.perf-safety-asbestos {
    text-align: center;
    padding: var(--spacing-md) 0;
}

.perf-safety-big-result {
    display: inline-block;
    font-size: 24px;
    font-weight: 700;
    padding: 12px 32px;
    border-radius: var(--radius-md);
    background: var(--color-success-light);
    border: 2px solid var(--color-success);
}

.perf-safety-asbestos-detail {
    font-size: 13px;
    color: var(--color-gray-dark);
    margin-top: 12px;
    line-height: 1.6;
}

/* Safety Table */
.perf-safety-table-wrap {
    overflow-x: auto;
    margin: var(--spacing-md) 0;
    -webkit-overflow-scrolling: touch;
}

.perf-safety-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.perf-safety-table th,
.perf-safety-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.perf-safety-table th {
    background: var(--color-gray-light);
    font-weight: 600;
    color: var(--color-black);
    position: sticky;
    top: 0;
}

.perf-safety-table tbody tr:hover {
    background: rgba(224, 122, 95, 0.04);
}

/* Pesticide */
.perf-safety-pesticide {
    text-align: center;
    padding: var(--spacing-lg) 0;
}

.perf-safety-pesticide-result {
    margin-bottom: var(--spacing-md);
}

.perf-safety-big-number {
    font-size: 64px;
    font-weight: 700;
    color: var(--color-terracotta);
    line-height: 1;
}

.perf-safety-big-unit {
    font-size: 22px;
    font-weight: 600;
    color: var(--color-gray-dark);
    margin-left: 8px;
}

@media (max-width: 768px) {
    .perf-safety-metals {
        grid-template-columns: repeat(3, 1fr);
    }
    .perf-safety-big-number {
        font-size: 48px;
    }
    .perf-safety-big-result {
        font-size: 18px;
        padding: 10px 20px;
    }
    .perf-safety-block {
        padding: var(--spacing-md);
    }
}

@media (max-width: 480px) {
    .perf-safety-metals {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================
   PERFORMANCE RENEWAL — Radioactivity (FITI)
   ========================================== */
.perf-radio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.perf-radio-card {
    background: var(--color-gray-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow var(--transition-base);
}

.perf-radio-card:hover {
    box-shadow: var(--shadow-md);
}

.perf-radio-isotope {
    font-size: 26px;
    font-weight: 700;
    color: var(--color-black);
    line-height: 1;
    letter-spacing: -0.5px;
}

.perf-radio-sup {
    font-size: 13px;
    vertical-align: super;
    font-weight: 600;
    color: var(--color-gray-dark);
}

.perf-radio-measured {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.perf-radio-val {
    font-size: 34px;
    font-weight: 700;
    color: var(--color-success);
    line-height: 1;
}

.perf-radio-unit {
    font-size: 13px;
    color: var(--color-gray-dark);
    font-weight: 500;
}

.perf-radio-bar-wrap {
    height: 10px;
    background: var(--color-border);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.perf-radio-bar {
    height: 100%;
    width: var(--rpct, 0%);
    background: linear-gradient(90deg, var(--color-success), #4ade80);
    border-radius: var(--radius-full);
    transition: width 1.2s ease-out;
}

.perf-radio-ratio {
    font-size: 13px;
    color: var(--color-gray-dark);
    font-weight: 500;
}

.perf-radio-ratio em {
    font-style: normal;
    font-weight: 700;
    color: var(--color-success);
}

.perf-radio-note {
    font-size: 12px;
    color: var(--color-gray-medium);
    line-height: 1.5;
    margin: 0;
}

.perf-radio-footer {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.perf-radio-index-box {
    background: var(--color-success-light);
    border: 2px solid var(--color-success);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: center;
    min-width: 160px;
    flex-shrink: 0;
}

.perf-radio-index-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-gray-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.perf-radio-index-val {
    font-size: 30px;
    font-weight: 700;
    color: var(--color-success);
    line-height: 1;
    margin-bottom: 4px;
}

.perf-radio-index-note {
    font-size: 12px;
    color: var(--color-success);
    font-weight: 600;
}

.perf-radio-safety-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
}

.perf-radio-safety-desc {
    font-size: 14px;
    color: var(--color-gray-dark);
    line-height: 1.7;
    margin: 0;
}

.perf-radio-info-card {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-success);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.perf-radio-info-icon {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-success);
    background: var(--color-success-light);
    border-radius: var(--radius-md);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: -1px;
}

.perf-radio-info-body {
    font-size: 14px;
    color: var(--color-gray-dark);
    line-height: 1.6;
}

.perf-radio-info-body strong {
    display: block;
    font-size: 15px;
    color: var(--color-black);
    margin-bottom: 6px;
}

.perf-radio-info-body p {
    margin: 0;
}

@media (max-width: 768px) {
    .perf-radio-grid {
        grid-template-columns: 1fr;
    }
    .perf-radio-footer {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    .perf-radio-index-box {
        width: 100%;
    }
    .perf-radio-val {
        font-size: 28px;
    }
}

/* ==========================================
   PERFORMANCE RENEWAL — Certificate Gallery
   ========================================== */
.perf-cert-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

.perf-cert-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    text-align: center;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.perf-cert-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.perf-cert-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-terracotta), #d88570);
    color: var(--color-white);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
}

.perf-cert-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 6px;
}

.perf-cert-org {
    font-size: 12px;
    color: var(--color-gray-dark);
    margin-bottom: 4px;
}

.perf-cert-date {
    font-size: 12px;
    color: var(--color-gray-medium);
    margin-bottom: 8px;
}

.perf-cert-id {
    display: inline-block;
    font-size: 11px;
    color: var(--color-gray-medium);
    background: var(--color-gray-light);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-family: monospace;
}

@media (max-width: 1024px) {
    .perf-cert-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .perf-cert-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   NEWS CARDS
   ========================================== */
.card-image-placeholder {
    width: 100%;
    height: 200px;
    background-color: var(--color-gray-light);
    border-radius: 8px;
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-medium);
}

.card-date {
    display: inline-block;
    font-size: 13px;
    color: var(--color-terracotta);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

/* ==========================================
   NEWS SECTION TOGGLE
   ========================================== */
.news-toggle-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.news-toggle-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-terracotta);
    color: var(--color-white);
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
}

.news-toggle-btn:hover {
    background-color: #c45d45;
    transform: translateY(-2px);
}

.news-toggle-icon {
    transition: transform var(--transition-base);
    font-size: 14px;
}

.news-toggle-btn.active .news-toggle-icon {
    transform: rotate(180deg);
}

.news-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.5s ease;
}

.news-content.active {
    max-height: 2000px;
    opacity: 1;
}

/* ==========================================
   CTA SECTION
   ========================================== */
.cta-section {
    background: linear-gradient(
        135deg,
        #1a1a1a 0%,
        #2a1610 45%,
        #5a2a1c 80%,
        #c45d45 100%
    );
    padding: var(--spacing-xl) 0;
}

.cta-box {
    text-align: center;
    color: var(--color-white);
}

.cta__title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--color-white);
}

.cta__subtitle {
    font-size: 16px;
    margin-bottom: var(--spacing-lg);
    color: var(--color-white);
    opacity: 0.95;
}

.btn-lg {
    padding: 12px 32px;
    font-size: 16px;
    background-color: var(--color-white);
    color: var(--color-terracotta);
}

.btn-lg:hover {
    background-color: var(--color-black);
    color: var(--color-white);
    transform: translateY(-4px);
}

/* ==========================================
   COMPANY PAGE
   ========================================== */
.company-hero {
    position: relative;
    min-height: 80vh;
    padding: 0 0 56px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    background-color: #1a1a1a;
    background-image:
        linear-gradient(to bottom,
            transparent 50%,
            rgba(26,26,26,0.6) 72%,
            rgba(26,26,26,1) 88%),
        url('../img/smgm_logo_3d.png');
    background-size: 100% auto, 100% auto;
    background-position: center top, center top;
    background-color: #1a1a1a;
    background-repeat: no-repeat;
}
.company-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 220px;
    height: 140px;
    background: radial-gradient(ellipse at bottom right, rgba(90,90,90,1) 0%, rgba(90,90,90,1) 45%, rgba(90,90,90,0.7) 65%, transparent 80%);
    pointer-events: none;
}

.company-hero__title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-white);
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.company-hero__subtitle {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    margin-bottom: var(--spacing-lg);
}

/* Hero 태그라인 */
.company-hero__tagline {
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
    margin-top: var(--spacing-sm);
    letter-spacing: 0.02em;
}

/* ==========================================
   BRAND PAGE
   ========================================== */
.brand-essence-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.essence-card {
    background-color: var(--color-white);
    border: 2px solid var(--color-gray-light);
    border-radius: 12px;
    padding: var(--spacing-xl);
    text-align: center;
    transition: all var(--transition-base);
}

.essence-card:hover {
    border-color: var(--color-terracotta);
    transform: translateY(-4px);
}

.essence-card__icon {
    font-size: 48px;
    margin-bottom: var(--spacing-md);
}

.essence-card__title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
}

.essence-card__subtitle {
    font-size: 14px;
    color: var(--color-gray-medium);
    margin-bottom: var(--spacing-md);
}

.essence-card__description {
    font-size: 14px;
    color: var(--color-gray-dark);
    line-height: 1.6;
}

/* ==========================================
   SOLUTION PAGES
   ========================================== */
.solution-hero {
    min-height: 560px;
    padding: var(--spacing-xxl) 0;
    display: flex;
    align-items: center;
    background-color: #1a0e0a;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.solution-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.5));
}

.gaiacure-hero::before {
    background: linear-gradient(
        rgba(0,0,0,0.35) 0%,
        rgba(0,20,5,0.50) 50%,
        rgba(0,15,5,0.65) 100%
    );
}

.solution-hero .container {
    position: relative;
    z-index: 1;
    text-align: left;
}

.solution-hero .badge {
    background-color: rgba(224, 122, 95, 0.9);
    color: var(--color-white);
}

.solution-hero .hero__title {
    font-size: 48px;
    font-weight: 700;
    color: var(--color-white);
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.solution-hero .hero__subtitle-main {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: var(--spacing-xs);
}

.solution-hero .hero__subtitle-sub {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-white);
    opacity: 0.9;
    margin-bottom: var(--spacing-xs);
}

.solution-hero .hero__subtitle {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-white);
    opacity: 0.9;
}

.features-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.feature-item {
    display: flex;
    align-items: start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background-color: var(--color-gray-light);
    border-radius: 8px;
}

.feature-item__icon {
    width: 24px;
    height: 24px;
    background-color: var(--color-terracotta);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.feature-item__text {
    font-size: 15px;
    color: var(--color-black);
    line-height: 1.6;
}

/* ==========================================
   PERFORMANCE PAGE
   ========================================== */
.data-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

.data-card {
    background-color: #1a0e0a;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    position: relative;
    min-height: 350px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: box-shadow var(--transition-base), transform 0.4s ease;
}

.data-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.data-card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 60%, rgba(0,0,0,0.3) 85%, transparent 100%);
    padding: var(--spacing-xl) var(--spacing-lg);
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 180px;
}

.data-card .badge-small {
    font-size: 11px;
    font-weight: 600;
    padding: 6px 14px;
    margin-bottom: var(--spacing-md);
    background-color: var(--color-terracotta);
    align-self: flex-start;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-card__title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--color-white);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    text-transform: none;
    letter-spacing: 0;
}

.data-card__content {
    font-size: 15px;
    color: var(--color-white);
    line-height: 1.7;
    opacity: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.data-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-black);
    margin: var(--spacing-sm) 0;
}

/* ==========================================
   BRAND PAGE — Explorer 2-panel layout
   ========================================== */
.solution-explorer {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--spacing-lg);
    align-items: stretch;
}

.solution-explorer__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    height: 100%;
}

.solution-explorer__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.65rem var(--spacing-lg);
    background: var(--color-white);
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.solution-explorer__item:hover {
    border-color: rgba(224, 122, 95, 0.5);
    background: rgba(224, 122, 95, 0.03);
}

.solution-explorer__item.active {
    border-color: var(--color-terracotta);
    background: rgba(224, 122, 95, 0.05);
}

.solution-explorer__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-black);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    margin-bottom: 0;
}

.solution-explorer__sub {
    font-size: 12px;
    color: var(--color-gray-dark);
    margin-top: 4px;
}

.solution-explorer__panel {
    position: relative;
    background: var(--color-white);
    border: 2px solid #e0e0e0;
    border-radius: 16px;
    overflow: hidden;
    padding: var(--spacing-xl);
}

.solution-explorer__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: right center;
    opacity: 0.22;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.solution-explorer__pane {
    display: none;
    position: relative;
    z-index: 1;
    animation: paneIn 0.3s ease forwards;
}

.solution-explorer__pane.active {
    display: block;
}

@keyframes paneIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.solution-explorer__en-sub {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--color-gray-dark);
    text-transform: uppercase;
    margin-bottom: var(--spacing-xs);
}

.solution-explorer__title {
    font-size: 34px;
    font-weight: 700;
    color: var(--color-black);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: var(--spacing-md);
}

.solution-explorer__feature-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-terracotta);
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: 8px;
}

.solution-explorer__feature-label::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-terracotta);
    flex-shrink: 0;
}

.solution-explorer__desc {
    font-size: 15px;
    line-height: 1.75;
    color: #333;
    margin-bottom: var(--spacing-lg);
    max-width: 580px;
}

.solution-explorer__field-box {
    background: rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    max-width: 580px;
}

.solution-explorer__field-box strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 6px;
}

.solution-explorer__field-box p {
    font-size: 13px;
    color: var(--color-gray-dark);
}

.solution-explorer__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--spacing-lg);
}

.solution-tag {
    background: rgba(224, 122, 95, 0.1);
    color: var(--color-terracotta);
    border: 1px solid rgba(224, 122, 95, 0.3);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 500;
}

@media (max-width: 1024px) {
    .solution-explorer {
        grid-template-columns: 1fr;
    }

    .solution-explorer__list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .solution-explorer__panel {
        min-height: 380px;
    }
}

@media (max-width: 768px) {
    .solution-explorer__list {
        grid-template-columns: 1fr 1fr;
    }

    .solution-explorer__title {
        font-size: 26px;
    }
}

@media (max-width: 480px) {
    .solution-explorer__list {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   NEWS PAGE
   ========================================== */
.news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

.news-card {
    background-color: var(--color-white);
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    transition: all var(--transition-base);
}

.news-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.news-card__image {
    width: 100%;
    height: 250px;
    background-color: var(--color-gray-light);
}

.news-card__content {
    padding: var(--spacing-lg);
}

.news-card__date {
    font-size: 13px;
    color: var(--color-terracotta);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.news-card__title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    color: var(--color-black);
}

.news-card__excerpt {
    font-size: 15px;
    color: var(--color-gray-dark);
    line-height: 1.6;
}

/* ==========================================
   PROCESS SECTION
   ========================================== */
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

.process-step {
    background-color: var(--color-white);
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: var(--spacing-lg);
    text-align: center;
    position: relative;
}

.process-step::after {
    content: '→';
    position: absolute;
    right: -24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: var(--color-terracotta);
}

.process-step:last-child::after {
    display: none;
}

.process-step__number {
    width: 40px;
    height: 40px;
    background-color: var(--color-terracotta);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    margin: 0 auto var(--spacing-md) auto;
}

.process-step__title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
}

.process-step__description {
    font-size: 13px;
    color: var(--color-gray-dark);
    line-height: 1.6;
}

/* ==========================================
   RESPONSIVE DESIGN
   ========================================== */
@media (max-width: 1024px) {
    .hero__title-line {
        font-size: 32px;
    }
    
    .performance-grid,
    .features-grid,
    .brand-essence-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .intelligence-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .solutions-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .reliability-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .esg-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .problem-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .certification-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .background-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .comparison-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-md);
    }
    
    .core-benefits-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .performance-highlights {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .performance-detail-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .partnership-container {
        flex-direction: column;
    }
    
    .partnership-connector {
        flex-direction: row;
    }
    
    .partnership-connector__line {
        width: 40px;
        height: 2px;
    }
    
    .project-cases-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .keypoints-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .problem-solution-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .process-step::after {
        display: none;
    }
}

@media (max-width: 768px) {
    .hero {
        padding: var(--spacing-xl) 0;
        min-height: auto;
    }
    
    .solution-hero,
    .company-hero {
        min-height: 400px;
    }
    
    .solution-hero .hero__title {
        font-size: 32px;
    }
    
    .hero__title-line {
        font-size: 24px;
    }
    
    .hero__subtitle-main {
        font-size: 20px;
    }
    
    .hero__subtitle-sub {
        font-size: 16px;
    }
    
    .cta__title {
        font-size: 24px;
    }
    
    .cta__subtitle {
        font-size: 14px;
    }
    
    .btn-lg {
        padding: 10px 24px;
        font-size: 14px;
    }
    
    .performance-grid,
    .features-grid,
    .brand-essence-grid,
    .data-grid,
    .news-grid,
    .intelligence-grid {
        grid-template-columns: 1fr;
    }
    
    .solutions-grid {
        grid-template-columns: 1fr;
    }
    
    .reliability-grid {
        grid-template-columns: 1fr;
    }
    
    .esg-grid {
        grid-template-columns: 1fr;
    }
    
    .benefits-grid {
        grid-template-columns: 1fr;
    }
    
    .problem-grid {
        grid-template-columns: 1fr;
    }
    
    .certification-grid {
        grid-template-columns: 1fr;
    }
    
    .background-grid {
        grid-template-columns: 1fr;
    }
    
    .comparison-grid {
        grid-template-columns: 1fr;
    }
    
    .core-benefits-grid {
        grid-template-columns: 1fr;
    }
    
    .performance-highlights {
        grid-template-columns: 1fr;
    }
    
    .performance-detail-grid {
        grid-template-columns: 1fr;
    }
    
    .composition-bar {
        flex-direction: column;
        height: auto;
    }
    
    .composition-item {
        width: 100% !important;
        min-height: 60px;
    }
    
    .project-cases-grid {
        grid-template-columns: 1fr;
    }
    
    .keypoints-grid {
        grid-template-columns: 1fr;
    }
    
    .problem-solution-grid {
        grid-template-columns: 1fr;
    }
    
    .features-list {
        grid-template-columns: 1fr;
    }
    
    .process-timeline {
        flex-direction: column;
        gap: var(--spacing-lg);
    }
    
    .process-timeline__connector {
        display: none;
    }
    
    .section__title-xl {
        font-size: 32px;
    }
    
    .cta__title {
        font-size: 28px;
    }
    
    .cta__subtitle {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .hero__title-line {
        font-size: 20px;
    }
    
    .hero__subtitle-main {
        font-size: 18px;
    }
    
    .section__title {
        font-size: 24px;
    }
    
    .performance-card__value {
        font-size: 40px;
    }
    
    .cta__title {
        font-size: 22px;
    }
}

/* ==========================================
   GLOBAL BORDER SWEEP HOVER
   색상 없는 박스 전체 — solution-card와 동일한
   terracotta border sweep 효과 일괄 적용
   ========================================== */
.card,
.intelligence-item,
.reliability-item,
.esg-item,
.feature-box,
.essence-card,
.benefit-card,
.problem-card,
.specs-card,
.certification-card,
.background-card,
.comparison-card,
.core-benefit-card,
.performance-card,
.performance-detail-card,
.partnership-card,
.project-case-card,
.agriculture-problem-card,
.soil-solution-card,
.benefit-card-gaiacure,
.application-step,
.performance-data-card,
.chemical-analysis-card,
.performance-test-card,
.metal-box,
.news-card,
.soil-shift-card,
.target-user-card,
.value-proof-item {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.card::before,
.intelligence-item::before,
.reliability-item::before,
.esg-item::before,
.feature-box::before,
.essence-card::before,
.benefit-card::before,
.problem-card::before,
.specs-card::before,
.certification-card::before,
.background-card::before,
.comparison-card::before,
.core-benefit-card::before,
.performance-card::before,
.performance-detail-card::before,
.partnership-card::before,
.project-case-card::before,
.agriculture-problem-card::before,
.soil-solution-card::before,
.benefit-card-gaiacure::before,
.application-step::before,
.performance-data-card::before,
.chemical-analysis-card::before,
.performance-test-card::before,
.metal-box::before,
.news-card::before,
.soil-shift-card::before,
.target-user-card::before,
.value-proof-item::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent 0%, rgba(224,122,95,0.7) 50%, transparent 100%);
    background-size: 200% 100%;
    background-position: -100% 0;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
}

.card:hover::before,
.intelligence-item:hover::before,
.reliability-item:hover::before,
.esg-item:hover::before,
.feature-box:hover::before,
.essence-card:hover::before,
.benefit-card:hover::before,
.problem-card:hover::before,
.specs-card:hover::before,
.certification-card:hover::before,
.background-card:hover::before,
.comparison-card:hover::before,
.core-benefit-card:hover::before,
.performance-card:hover::before,
.performance-detail-card:hover::before,
.partnership-card:hover::before,
.project-case-card:hover::before,
.agriculture-problem-card:hover::before,
.soil-solution-card:hover::before,
.benefit-card-gaiacure:hover::before,
.application-step:hover::before,
.performance-data-card:hover::before,
.chemical-analysis-card:hover::before,
.performance-test-card:hover::before,
.metal-box:hover::before,
.news-card:hover::before,
.soil-shift-card:hover::before,
.target-user-card:hover::before,
.value-proof-item:hover::before {
    opacity: 1;
    animation: borderSweep 0.55s ease forwards;
}

/* ==========================================
   GAIACURE — SOIL SHIFT (섹션 A)
   ========================================== */
.soil-shift-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.soil-shift-card {
    background-color: var(--color-white);
    border: 2px solid #e0e0e0;
    border-bottom: 4px solid var(--color-terracotta);
    border-radius: 12px;
    padding: var(--spacing-lg);
    transition: all var(--transition-base);
}

.soil-shift-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.soil-shift-number {
    display: block;
    font-size: 44px;
    font-weight: 700;
    color: var(--color-terracotta);
    opacity: 0.2;
    line-height: 1;
    margin-bottom: var(--spacing-sm);
    letter-spacing: -2px;
}

.soil-shift-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: var(--spacing-sm);
    line-height: 1.4;
}

.soil-shift-desc {
    font-size: 14px;
    color: var(--color-gray-dark);
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 1024px) {
    .soil-shift-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .soil-shift-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    .soil-shift-number {
        font-size: 36px;
    }
    .soil-shift-title {
        font-size: 16px;
    }
}

/* ==========================================
   GAIACURE — TARGET USERS (섹션 B)
   ========================================== */
.target-users-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.target-user-card {
    background-color: var(--color-white);
    border: 2px solid #e0e0e0;
    border-left: 6px solid var(--color-terracotta);
    border-radius: 12px;
    padding: var(--spacing-lg);
    transition: all var(--transition-base);
}

.target-user-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.target-user-icon {
    width: 48px;
    height: 48px;
    color: var(--color-terracotta);
    margin-bottom: var(--spacing-sm);
}

.target-user-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: var(--spacing-xs);
    line-height: 1.3;
}

.target-user-pain {
    font-size: 14px;
    color: var(--color-black);
    font-weight: 500;
    margin-bottom: 4px;
    line-height: 1.6;
}

.target-user-need {
    font-size: 14px;
    color: var(--color-gray-dark);
    margin: 0;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .target-users-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    .target-user-title {
        font-size: 16px;
    }
}

/* ==========================================
   GAIACURE — VALUE PROOF (섹션 C)
   ========================================== */
.value-proof-lead {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-black);
    font-style: italic;
    margin-bottom: 0;
}

.value-proof-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.value-proof-item {
    background-color: var(--color-white);
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    transition: all var(--transition-base);
}

.value-proof-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.value-proof-check {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background-color: var(--color-terracotta);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    margin-top: 2px;
}

.value-proof-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-black);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
    .value-proof-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    .value-proof-lead {
        font-size: 17px;
    }
    .value-proof-text {
        font-size: 14px;
    }
}

/* ==========================================
   GAIACURE — Soil Shift Keyword Chips
   ========================================== */
.soil-shift-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}
.soil-shift-keywords span {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-gray-dark);
    background-color: #f5f0ee;
    border: 1px solid #e0d8d5;
    border-radius: 20px;
    padding: 4px 12px;
    white-space: nowrap;
    line-height: 1.6;
}

/* ==========================================
   GAIACURE — Target User Meta Rows
   ========================================== */
.target-user-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}
.target-user-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.tu-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-terracotta);
    flex-shrink: 0;
    min-width: 28px;
}
.tu-keywords {
    font-size: 13px;
    color: var(--color-gray-dark);
    line-height: 1.6;
}

/* ==========================================
   COMPANY — Material Guide Bridge Banner
   ========================================== */
/* ==========================================
   COMPANY PAGE — New Sections (리뉴얼)
   ========================================== */

/* --- Section 2: 적토이암 이해 --- */
.cp-understand {
    background-color: var(--color-gray-light, #f9f6f3);
}

/* 정의 도표 */
.definition-table {
    max-width: 800px;
    margin: 0 auto var(--spacing-lg);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
    background: var(--color-white);
}

.definition-table__row {
    display: grid;
    grid-template-columns: 190px 1fr;
    align-items: stretch;
    border-bottom: 1px solid #f0ece9;
}

.definition-table__row:last-child {
    border-bottom: none;
}

.definition-table__label-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #fdf7f5;
    border-right: 3px solid var(--color-terracotta);
}

.definition-table__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--color-terracotta);
}

.definition-table__label {
    font-weight: 800;
    font-size: 13px;
    color: var(--color-black);
}

.definition-table__value {
    padding: 16px 24px;
    font-size: 14px;
    color: var(--color-gray-dark);
    line-height: 1.7;
    display: flex;
    align-items: center;
}

/* 생산 과정 플로우차트 */
.process-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
    margin-top: var(--spacing-lg);
}

.process-step {
    background: var(--color-white);
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: var(--spacing-lg) var(--spacing-xl);
    text-align: center;
    min-width: 140px;
    transition: border-color var(--transition-base);
}

.process-step:hover {
    border-color: var(--color-terracotta);
}

.process-step__number {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-terracotta);
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

.process-step__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 4px;
}

.process-step__desc {
    font-size: 13px;
    color: var(--color-gray-dark);
}

.process-arrow {
    font-size: 24px;
    color: var(--color-terracotta);
    font-weight: 700;
    padding: 0 var(--spacing-sm);
}

/* --- Section 3: 성분·입도 & 물성 데이터 --- */
.cp-data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: stretch;
}

.cp-data-card {
    background: var(--color-white);
    border-radius: 12px;
    padding: var(--spacing-xl);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
    display: flex;
    flex-direction: column;
}

.cp-data-card .histogram,
.cp-data-card .radar-chart {
    flex: 1;
}

.cp-data-card__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

/* 히스토그램 */
.histogram {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: var(--spacing-md);
    height: 220px;
    padding-bottom: var(--spacing-md);
}

.histogram__bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    height: 100%;
    justify-content: flex-end;
}

.histogram__value {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-terracotta);
    margin-bottom: 6px;
}

.histogram__bar {
    width: 100%;
    max-width: 48px;
    background: linear-gradient(180deg, var(--color-terracotta) 0%, rgba(224, 122, 95, 0.6) 100%);
    border-radius: 6px 6px 0 0;
    min-height: 4px;
    transition: height 0.8s ease;
}

.histogram__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-gray-dark);
    margin-top: 8px;
    text-align: center;
}

/* Radar Chart (성분) */
.radar-chart {
    max-width: 320px;
    margin: 0 auto;
}

.radar-chart svg {
    width: 100%;
    height: auto;
}

/* --- Section 4: 현장 성능 비교 --- */
.cp-performance {
    background-color: var(--color-gray-light, #f9f6f3);
}

.compare-grid {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.compare-row {
    background: var(--color-white);
    border-radius: 12px;
    padding: var(--spacing-lg) var(--spacing-xl);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
}

.compare-row__label {
    font-size: 14px;
    font-weight: 800;
    color: var(--color-black);
    margin-bottom: var(--spacing-md);
}

.compare-row__bars {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.compare-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.compare-bar__name {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-gray-dark);
    min-width: 64px;
    flex-shrink: 0;
}

.compare-bar__track {
    flex: 1;
    height: 28px;
    background: #f0ece9;
    border-radius: 6px;
    overflow: hidden;
}

.compare-bar__fill {
    height: 100%;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-white);
    transition: width 0.8s ease;
}

.compare-bar__fill--primary {
    background: linear-gradient(90deg, var(--color-terracotta) 0%, #c96a4f 100%);
}

.compare-bar__fill--gray {
    background: linear-gradient(90deg, #b0b0b0 0%, #999 100%);
}

/* --- Section 5: 규격 체계 트리맵 --- */
.spec-tree {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}

.spec-tree__root {
    display: inline-block;
    background: var(--color-black);
    color: var(--color-white);
    font-size: 16px;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 8px;
    letter-spacing: 0.02em;
}

.spec-tree__connector {
    width: 2px;
    height: 32px;
    background: #ccc;
    margin: 0 auto;
}

.spec-tree__branches {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    position: relative;
}

.spec-tree__branches::before {
    content: '';
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    height: 2px;
    background: #ccc;
}

.spec-tree__branch {
    position: relative;
    padding-top: var(--spacing-lg);
}

.spec-tree__branch::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: var(--spacing-lg);
    background: #ccc;
}

.spec-tree__leaf {
    background: var(--color-white);
    border-radius: 12px;
    padding: var(--spacing-xl);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        inset 0 -1px 0 rgba(224,122,95,0.08),
        0 4px 20px rgba(0,0,0,0.07);
    text-align: left;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.spec-tree__leaf::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-terracotta, #E07A5F);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.spec-tree__leaf:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        inset 0 -1px 0 rgba(224,122,95,0.15),
        0 12px 36px rgba(0,0,0,0.12);
}

.spec-tree__leaf:hover::after {
    transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
    .spec-tree__leaf,
    .spec-tree__leaf::after { transition: none; }
}

.spec-tree__branch--g .spec-tree__leaf {
    border-top: 4px solid var(--color-terracotta);
}

.spec-tree__branch--ge .spec-tree__leaf {
    border-top: 4px solid #5C3D2E;
}

.spec-tree__leaf-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 8px;
}

.spec-tree__branch--g .spec-tree__leaf-title {
    color: var(--color-terracotta);
}

.spec-tree__branch--ge .spec-tree__leaf-title {
    color: #5C3D2E;
}

.spec-tree__leaf-desc {
    font-size: 14px;
    color: var(--color-gray-dark);
    margin-bottom: var(--spacing-md);
    line-height: 1.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spec-tree__leaf-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.spec-tree__leaf-list li {
    position: relative;
    padding: 6px 0 6px 16px;
    font-size: 13px;
    color: var(--color-gray-dark);
    font-weight: 600;
}

.spec-tree__leaf-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    transform: translateY(-50%);
}

.spec-tree__branch--g .spec-tree__leaf-list li::before {
    background: var(--color-terracotta);
}

.spec-tree__branch--ge .spec-tree__leaf-list li::before {
    background: #5C3D2E;
}

/* --- Section 6: 응용 카테고리 --- */
.cp-app-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--spacing-lg);
}

.cp-app-grid .cp-app-card.solution-box {
    background: var(--color-white);
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: var(--spacing-lg) var(--spacing-sm);
    text-align: center;
    cursor: pointer;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.cp-app-grid .cp-app-card.solution-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-terracotta);
    background-color: var(--color-white);
}

.cp-app-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--spacing-md);
    border-radius: 12px;
    background: rgba(224, 122, 95, 0.08);
    color: var(--color-terracotta);
}

.cp-app-card__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: var(--spacing-sm);
    word-break: keep-all;
    overflow-wrap: break-word;
}

.cp-app-card__perf {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-terracotta);
    line-height: 1.5;
    margin-bottom: 4px;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.cp-app-card__example {
    font-size: 11px;
    color: var(--color-gray-dark);
    line-height: 1.5;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* --- Section 7: 데이터 & 근거 --- */
.cp-evidence {
    background-color: var(--color-gray-light, #f9f6f3);
}

.test-result-table {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.test-result-table__row {
    background: var(--color-white);
    border-radius: 12px;
    padding: var(--spacing-lg) var(--spacing-xl);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
}

.test-result-table__info {
    margin-bottom: var(--spacing-md);
}

.test-result-table__name {
    font-size: 16px;
    font-weight: 800;
    color: var(--color-black);
    margin-bottom: 4px;
}

.test-result-table__detail {
    font-size: 13px;
    color: var(--color-gray-dark);
}

.progress-bar {
    width: 100%;
    height: 24px;
    background: #f0ece9;
    border-radius: 12px;
    overflow: hidden;
}

.progress-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-terracotta) 0%, #c96a4f 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 12px;
    transition: width 0.8s ease;
}

.progress-bar__text {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-white);
}

/* --- Section 8: 비교 분석 (Spider Chart) --- */
.spider-chart {
    max-width: 440px;
    margin: 0 auto;
    text-align: center;
}

.spider-chart svg {
    width: 100%;
    height: auto;
}

.spider-chart__legend {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-lg);
}

.spider-chart__legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-gray-dark);
}

.spider-chart__legend-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.spider-chart__legend-dot--primary {
    background: var(--color-terracotta);
}

.spider-chart__legend-dot--gray {
    background: #999;
}

/* --- Section 9: 생태·환경 공헌 --- */
.cp-eco {
    background-color: var(--color-gray-light, #f9f6f3);
}

.cp-eco-card {
    background: var(--color-white);
    border-radius: 12px;
    padding: var(--spacing-xl);
    text-align: center;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.cp-eco-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

.cp-eco-card__icon {
    font-size: 40px;
    margin-bottom: var(--spacing-md);
}

.cp-eco-card__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 8px;
}

.cp-eco-card__value {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-terracotta);
    margin-bottom: var(--spacing-sm);
}

.cp-eco-card__desc {
    font-size: 13px;
    color: var(--color-gray-dark);
    line-height: 1.7;
}

/* ==========================================
   COMPANY PAGE — Responsive (리뉴얼)
   ========================================== */
@media (max-width: 1024px) {
    .cp-data-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-lg);
    }

    .spec-tree__branches {
        gap: var(--spacing-md);
    }

    .cp-app-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .definition-table__row {
        grid-template-columns: 150px 1fr;
    }

    .definition-table__label-wrap {
        padding: 14px 14px;
        gap: 8px;
    }

    .definition-table__icon {
        font-size: 17px;
    }

    .definition-table__label {
        font-size: 12px;
    }

    .definition-table__value {
        padding: 14px 16px;
        font-size: 13px;
    }

    .process-flow {
        flex-direction: column;
        gap: 0;
    }

    .process-arrow {
        transform: rotate(90deg);
        padding: var(--spacing-xs) 0;
    }

    .process-step {
        min-width: auto;
        width: 100%;
        max-width: 260px;
    }

    .cp-data-grid {
        grid-template-columns: 1fr;
    }

    .spec-tree__branches {
        grid-template-columns: 1fr;
    }

    .spec-tree__branches::before {
        display: none;
    }

    .spec-tree__branch::before {
        left: var(--spacing-xl);
    }

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

    .compare-bar__name {
        min-width: 56px;
        font-size: 11px;
    }

    .spider-chart {
        max-width: 320px;
    }
}

@media (max-width: 480px) {
    .definition-table__row {
        grid-template-columns: 1fr;
    }

    .definition-table__label-wrap {
        border-right: none;
        border-bottom: 2px solid var(--color-terracotta);
    }

    .histogram {
        height: 180px;
        gap: var(--spacing-sm);
    }

    .compare-row {
        padding: var(--spacing-md);
    }

    .compare-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .compare-bar__name {
        min-width: auto;
    }

    .compare-bar__track {
        width: 100%;
    }

    .spec-tree__leaf {
        padding: var(--spacing-lg);
    }

    .test-result-table__row {
        padding: var(--spacing-md);
    }

    .cp-app-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cp-app-card {
        transition: none;
        transform: none !important;
    }
    .histogram__bar,
    .compare-bar__fill,
    .progress-bar__fill {
        transition: none;
    }

    .cp-eco-card {
        transition: none;
        transform: none !important;
    }

    .process-step {
        transition: none;
    }
}

/* ==========================================
   COMPANY PAGE — NEW SECTIONS (2026-04 upgrade)
   ========================================== */

/* --- Badge & Title light variants (for dark bg sections) --- */
.badge--light {
    background: rgba(245,242,233,0.15);
    color: #F5F2E9;
    border: 1px solid rgba(245,242,233,0.3);
}

.section__title--light {
    color: #F5F2E9;
}

.section__description--light {
    color: rgba(245,242,233,0.7);
}

/* ==========================================
   cp-identity (P2 — 자연이 빚은 붉은 보석)
   ========================================== */

.cp-identity {
    background: #fff;
}

.cp-identity__grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 0;
    align-items: stretch;
    min-height: 520px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(0,0,0,0.08);
}

.cp-identity__img-wrap {
    position: relative;
    overflow: hidden;
}

.cp-identity__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}

.cp-identity__img-wrap:hover .cp-identity__img {
    transform: scale(1.03);
}

.cp-identity__content {
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #faf8f6;
}

.cp-identity__headline {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 300;
    color: #1a1a1a;
    line-height: 1.2;
    word-break: keep-all;
    overflow-wrap: break-word;
    margin-bottom: 32px;
}

.cp-identity__headline strong {
    font-weight: 700;
    color: #1a1a1a;
}

.cp-identity__cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cp-identity__card {
    background: #fff;
    border-radius: 8px;
    padding: 20px 22px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        inset 0 -1px 0 rgba(224,122,95,0.08),
        0 4px 16px rgba(0,0,0,0.06);
    border: 1px solid rgba(224,122,95,0.12);
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s cubic-bezier(0.16,1,0.3,1);
}

.cp-identity__card:hover {
    transform: translateX(4px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        inset 0 -1px 0 rgba(224,122,95,0.12),
        0 8px 28px rgba(0,0,0,0.10);
}

.cp-identity__card-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    color: var(--color-terracotta);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.cp-identity__card-stat {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 5px;
    line-height: 1.1;
}

.cp-identity__card-label {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 0.05em;
    margin-bottom: 5px;
}

.cp-identity__card-desc {
    font-size: 12px;
    color: #666;
    line-height: 1.55;
    word-break: keep-all;
    overflow-wrap: break-word;
    margin: 0;
}

/* ==========================================
   cp-features (10대 핵심 특성 그리드)
   ========================================== */

.cp-features {
    background: #fff;
}

.cp-feat-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
}

.cp-feat-card {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem 1.25rem;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        inset 0 -1px 0 rgba(224,122,95,0.08),
        0 4px 20px rgba(0,0,0,0.07);
    border: 1px solid rgba(224,122,95,0.12);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.cp-feat-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-terracotta, #E07A5F);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cp-feat-card:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        inset 0 -1px 0 rgba(224,122,95,0.15),
        0 12px 36px rgba(0,0,0,0.12);
}

.cp-feat-card:hover::after {
    transform: scaleX(1);
}

.cp-feat-num {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-terracotta, #E07A5F);
    letter-spacing: 0.05em;
}

.cp-feat-icon {
    font-size: 1.75rem;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.cp-feat-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-dark, #1a0e0a);
    word-break: keep-all;
    overflow-wrap: break-word;
    line-height: 1.4;
    margin: 0;
}

.cp-feat-desc {
    font-size: 0.8rem;
    color: #6b5c55;
    line-height: 1.5;
    word-break: keep-all;
    overflow-wrap: break-word;
    margin: 0;
    flex: 1;
}

.cp-feat-kw {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-terracotta, #E07A5F);
    background: rgba(224,122,95,0.07);
    border-radius: 20px;
    padding: 0.2rem 0.6rem;
    display: inline-block;
    word-break: keep-all;
    margin-top: auto;
}

@media (max-width: 1200px) {
    .cp-feat-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1024px) {
    .cp-feat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .cp-feat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .cp-feat-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cp-feat-card,
    .cp-feat-card::after {
        transition: none;
    }
}

/* ==========================================
   cp-durability (P3 — 압도적 내구성)
   ========================================== */

.cp-durability {
    background: var(--color-gray-light, #f9f6f3);
}

.cp-dur-outer-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0;
    align-items: stretch;
    min-height: 520px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(0,0,0,0.08);
}

.cp-dur-content {
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
}

.cp-dur-img-wrap {
    position: relative;
    overflow: hidden;
}

.cp-dur-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}

.cp-dur-img-wrap:hover .cp-dur-img {
    transform: scale(1.03);
}

.cp-dur-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 28px;
}

.cp-dur-card {
    background: #faf8f6;
    border: 1px solid rgba(224,122,95,0.12);
    border-left: 3px solid var(--color-terracotta);
    border-radius: 8px;
    padding: 20px 22px;
    transition: background 0.3s cubic-bezier(0.16,1,0.3,1), transform 0.3s cubic-bezier(0.16,1,0.3,1);
}

.cp-dur-card:hover {
    background: #fff;
    transform: translateX(4px);
}

.cp-dur-card__tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    color: var(--color-terracotta);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.cp-dur-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 6px;
    word-break: keep-all;
    overflow-wrap: break-word;
    line-height: 1.4;
}

.cp-dur-card__desc {
    font-size: 12px;
    color: #666;
    line-height: 1.6;
    margin: 0;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* ==========================================
   cp-chem-section (P5 — XRF + KIFA)
   ========================================== */

.cp-chem-section {
    margin-top: 56px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.cp-chem-xrf {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 40px;
    align-items: center;
    background: var(--color-gray-light, #f9f6f3);
    border-radius: 12px;
    overflow: hidden;
}

.cp-chem-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 200px;
}

.cp-chem-data {
    padding: 36px 40px 36px 0;
}

.cp-chem-data__title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 20px;
    letter-spacing: -0.01em;
    word-break: keep-all;
}

.cp-chem-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0,0,0,0.07);
}

.cp-chem-item:last-child {
    border-bottom: none;
}

.cp-chem-item__formula {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-terracotta);
    min-width: 52px;
}

.cp-chem-item__name {
    font-size: 13px;
    color: #555;
    flex: 1;
    word-break: keep-all;
}

.cp-chem-item__value {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
}

.cp-kifa-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.cp-kifa-card {
    background: #fff;
    border-radius: 10px;
    padding: 28px 28px 24px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        inset 0 -1px 0 rgba(224,122,95,0.08),
        0 8px 32px rgba(0,0,0,0.08);
    border: 1px solid rgba(224,122,95,0.12);
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}

.cp-kifa-card:hover {
    transform: translateY(-4px);
}

.cp-kifa-card__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--color-terracotta);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.cp-kifa-card__value {
    font-size: 2.4rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
    margin-bottom: 6px;
}

.cp-kifa-card__unit {
    font-size: 1rem;
    font-weight: 400;
    color: #666;
}

.cp-kifa-card__title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}

.cp-kifa-card__grade {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-terracotta);
    border: 1px solid var(--color-terracotta);
    border-radius: 3px;
    padding: 2px 8px;
    margin-bottom: 12px;
}

.cp-kifa-card__desc {
    font-size: 12px;
    color: #666;
    line-height: 1.6;
    margin: 0;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* ==========================================
   cp-economics (P4 — 절대적 경제성)
   ========================================== */

.cp-economics {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
}

.cp-economics__bg {
    position: absolute;
    inset: 0;
    background-image: url('../img/jeokto-economics-bg.png');
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.cp-economics__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 15, 25, 0.86);
}

.cp-economics__inner {
    position: relative;
    z-index: 1;
}

.cp-econ-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

.cp-econ-stat {
    background: rgba(245,242,233,0.07);
    border: 1px solid rgba(245,242,233,0.15);
    border-radius: 10px;
    padding: 40px 32px;
    text-align: center;
    transition: background 0.3s cubic-bezier(0.16,1,0.3,1);
}

.cp-econ-stat:hover {
    background: rgba(245,242,233,0.12);
}

.cp-econ-stat__number {
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 700;
    color: var(--color-terracotta);
    line-height: 1;
    margin-bottom: 10px;
}

.cp-econ-stat__label {
    font-size: 15px;
    font-weight: 700;
    color: #F5F2E9;
    margin-bottom: 8px;
    word-break: keep-all;
}

.cp-econ-stat__desc {
    font-size: 12px;
    color: rgba(245,242,233,0.55);
    line-height: 1.6;
    margin: 0;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.cp-econ-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cp-econ-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px 28px;
    background: rgba(245,242,233,0.06);
    border: 1px solid rgba(245,242,233,0.12);
    border-left: 4px solid var(--color-terracotta);
    border-radius: 8px;
    transition: background 0.3s cubic-bezier(0.16,1,0.3,1);
}

.cp-econ-row:hover {
    background: rgba(245,242,233,0.10);
}

.cp-econ-row__title {
    font-size: 15px;
    font-weight: 700;
    color: #F5F2E9;
    min-width: 180px;
    word-break: keep-all;
    flex-shrink: 0;
}

.cp-econ-row__desc {
    font-size: 13px;
    color: rgba(245,242,233,0.65);
    line-height: 1.65;
    margin: 0;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* ==========================================
   Responsive — NEW SECTIONS
   ========================================== */

@media (max-width: 1024px) {
    .cp-identity__grid {
        grid-template-columns: 1fr 1fr;
    }

    .cp-identity__content {
        padding: 36px 32px;
    }

    .cp-dur-outer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .cp-dur-content {
        padding: 36px 32px;
    }

    .cp-chem-xrf {
        grid-template-columns: 1fr 1.2fr;
        gap: 24px;
    }

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

@media (max-width: 768px) {
    .cp-identity__grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .cp-identity__img-wrap {
        height: 260px;
    }

    .cp-identity__content {
        padding: 32px 28px;
    }

    .cp-dur-outer-grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .cp-dur-img-wrap {
        height: 260px;
        order: -1;
    }

    .cp-dur-content {
        padding: 32px 28px;
    }

    .cp-chem-xrf {
        grid-template-columns: 1fr;
    }

    .cp-chem-img {
        min-height: 180px;
        max-height: 220px;
    }

    .cp-chem-data {
        padding: 24px;
    }

    .cp-kifa-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .cp-econ-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .cp-econ-row {
        flex-direction: column;
        gap: 8px;
    }

    .cp-econ-row__title {
        min-width: unset;
    }
}

@media (max-width: 480px) {
    .cp-identity__headline {
        font-size: 1.6rem;
    }

    .cp-identity__card-stat {
        font-size: 1.2rem;
    }

    .cp-kifa-card__value {
        font-size: 2rem;
    }

    .cp-econ-stat__number {
        font-size: 3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cp-identity__img,
    .cp-dur-img,
    .cp-identity__card,
    .cp-dur-card,
    .cp-kifa-card,
    .cp-econ-stat,
    .cp-econ-row {
        transition: none;
        transform: none !important;
    }
}

/* ==========================================
   PROJECTS PAGE
   ========================================== */

/* Filter Tabs */
.project-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.project-filter__btn {
    background: none;
    border: 1.5px solid var(--color-gray-light);
    border-radius: 24px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-gray);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.project-filter__btn:hover {
    border-color: var(--color-terracotta);
    color: var(--color-terracotta);
}

.project-filter__btn.active {
    background-color: var(--color-terracotta);
    border-color: var(--color-terracotta);
    color: var(--color-white);
}

/* Project Grid */
.project-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.project-card {
    background: var(--color-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.project-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.project-card__image {
    width: 100%;
    height: 220px;
    background-size: cover;
    background-position: center;
    background-color: var(--color-gray-light);
}

.project-card__body {
    padding: 20px;
}

.project-card__tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-terracotta);
    background-color: rgba(224, 122, 95, 0.1);
    padding: 3px 10px;
    border-radius: 12px;
    margin-bottom: 10px;
}

.project-card__title {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.4;
}

.project-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 13px;
    color: var(--color-gray);
    margin-bottom: 12px;
}

.project-card__result {
    font-size: 14px;
    color: var(--color-dark-gray);
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 1024px) {
    .project-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .project-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .project-card__image {
        height: 200px;
    }

    .project-filter {
        gap: 6px;
    }

    .project-filter__btn {
        padding: 6px 14px;
        font-size: 13px;
    }
}

/* ==========================================
   CERTIFICATES PAGE
   ========================================== */

/* Summary Stats */
.cert-summary {
    display: flex;
    justify-content: center;
    gap: 60px;
    padding: 20px 0;
}

.cert-summary__item {
    text-align: center;
}

.cert-summary__number {
    display: block;
    font-size: 36px;
    font-weight: 700;
    color: var(--color-terracotta);
    line-height: 1.2;
}

.cert-summary__label {
    display: block;
    font-size: 14px;
    color: var(--color-gray);
    margin-top: 4px;
}

/* Certificate Grid */
.cert-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.cert-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    border: 1.5px solid #2c3e6b;
    border-radius: 12px;
    padding: 28px 24px 20px;
    cursor: pointer;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.cert-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.82);
    z-index: 0;
}

.cert-card > * {
    position: relative;
    z-index: 1;
}

.cert-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: #1a2a50;
}

.cert-card__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(224, 122, 95, 0.08);
    border-radius: 12px;
    color: var(--color-terracotta);
    margin-bottom: 16px;
}

.cert-card__body {
    flex: 1;
}

.cert-card__tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-terracotta);
    background: rgba(224, 122, 95, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
    margin-bottom: 8px;
}

.cert-card__title {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.3;
}

.cert-card__institute {
    font-size: 13px;
    color: var(--color-gray);
    margin-bottom: 4px;
}

.cert-card__date {
    font-size: 12px;
    color: var(--color-gray);
    opacity: 0.7;
    margin-bottom: 10px;
}

.cert-card__desc {
    font-size: 13px;
    color: var(--color-dark-gray);
    line-height: 1.5;
}

.cert-card__action {
    display: inline-block;
    margin-top: 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-terracotta);
    letter-spacing: 0.02em;
}

.cert-card:hover .cert-card__action {
    text-decoration: underline;
}

/* PDF Lightbox */
.pdf-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.pdf-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.pdf-lightbox__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
}

.pdf-lightbox__content {
    position: relative;
    width: 90%;
    max-width: 900px;
    height: 85vh;
    background: var(--color-white);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.pdf-lightbox.active .pdf-lightbox__content {
    transform: translateY(0);
}

.pdf-lightbox__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--color-gray-light);
    background: var(--color-white);
}

.pdf-lightbox__title {
    font-size: 16px;
    font-weight: 600;
}

.pdf-lightbox__close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--color-gray);
    line-height: 1;
    padding: 0 4px;
    transition: color var(--transition-fast);
}

.pdf-lightbox__close:hover {
    color: var(--color-black);
}

.pdf-lightbox__body {
    flex: 1;
    overflow: hidden;
}

.pdf-lightbox__frame {
    width: 100%;
    height: 100%;
    border: none;
}

.cert-lightbox__img {
    max-width: 100%;
    height: auto;
    display: block;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}

/* Responsive */
@media (max-width: 1024px) {
    .cert-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cert-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .cert-summary {
        gap: 32px;
    }

    .cert-summary__number {
        font-size: 28px;
    }

    .pdf-lightbox__content {
        width: 96%;
        height: 80vh;
    }

    .cert-card {
        padding: 20px 18px 16px;
    }
}

@media (max-width: 480px) {
    .cert-summary {
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }
}

/* ==========================================
   QUANTITY ESTIMATOR PAGE
   ========================================== */

/* Solution Pills */
.calc-solution-pills {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.calc-solution-pill {
    padding: 10px 28px;
    border: 1.5px solid var(--color-gray-light);
    border-radius: 28px;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-dark-gray);
    background: var(--color-white);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.calc-solution-pill:hover {
    border-color: var(--color-terracotta);
    color: var(--color-terracotta);
    background: rgba(224, 122, 95, 0.05);
}

.calc-solution-pill.active {
    border-color: var(--color-terracotta);
    background: var(--color-terracotta);
    color: var(--color-white);
}

/* Formula Bar */
.calc-formula {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid var(--color-gray-light);
    border-radius: 10px;
    padding: 16px 24px;
    margin-bottom: 32px;
    font-size: 14px;
    color: var(--color-dark-gray);
    font-family: 'Courier New', Courier, monospace;
}

.calc-formula__divider {
    color: var(--color-gray);
    font-weight: 300;
}

/* Calculator Grid */
.calc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.calc-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.calc-card__header {
    padding: 16px 20px;
    background: linear-gradient(135deg, #2d3436 0%, #636e72 100%);
    color: var(--color-white);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}

.calc-card__body {
    padding: 24px 20px;
}

/* Input Fields */
.calc-field {
    margin-bottom: 16px;
}

.calc-field__label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-dark-gray);
    margin-bottom: 6px;
}

.calc-field__wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.calc-field__input {
    width: 100%;
    padding: 10px 50px 10px 14px;
    border: 1.5px solid var(--color-gray-light);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-black);
    background: var(--color-white);
    outline: none;
    transition: border-color var(--transition-fast);
    -moz-appearance: textfield;
}

.calc-field__input::-webkit-outer-spin-button,
.calc-field__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.calc-field__input:focus {
    border-color: var(--color-terracotta);
}

.calc-field__unit {
    position: absolute;
    right: 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-gray);
    pointer-events: none;
}

.calc-field--readonly .calc-field__input {
    background: #f5f5f5;
    color: var(--color-gray);
    cursor: default;
}

.calc-field__display {
    padding: 10px 14px;
    border: 1.5px solid var(--color-gray-light);
    border-radius: 8px;
    background: #f5f5f5;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-terracotta);
    text-align: center;
}

.calc-field__note {
    margin: 4px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-terracotta);
}

.calc-field__note--sub {
    font-size: 11px;
    font-weight: 400;
    color: var(--color-gray);
    margin-top: 1px;
}

/* Calculate Button — 3D Push Effect */
.calc-btn {
    display: block;
    width: 100%;
    padding: 14px;
    margin-top: 8px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-white);
    background: linear-gradient(135deg, #E07A5F 0%, #d4644a 100%);
    cursor: pointer;
    position: relative;
    box-shadow: 0 4px 0 #b8533a, 0 6px 12px rgba(224, 122, 95, 0.3);
    transform: translateY(0);
    transition: all 0.1s ease;
    user-select: none;
}

.calc-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 0 #b8533a, 0 8px 16px rgba(224, 122, 95, 0.35);
}

.calc-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #b8533a, 0 2px 4px rgba(224, 122, 95, 0.2);
}

/* Results */
.calc-result {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed var(--color-gray-light);
}

.calc-result__item {
    text-align: center;
}

.calc-result__value {
    display: block;
    font-size: 36px;
    font-weight: 700;
    color: var(--color-terracotta);
    line-height: 1.1;
    transition: all 0.3s ease;
}

.calc-result__unit {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-gray);
    margin-top: 4px;
}

/* Total Bar */
.calc-total {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 32px;
    padding: 24px 32px;
    background: linear-gradient(135deg, #2d3436 0%, #636e72 100%);
    border-radius: 16px;
    color: var(--color-white);
}

.calc-total__label {
    font-size: 18px;
    font-weight: 700;
}

.calc-total__items {
    display: flex;
    align-items: center;
    gap: 20px;
}

.calc-total__item {
    text-align: center;
}

.calc-total__value {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: var(--color-terracotta);
    line-height: 1.1;
}

.calc-total__unit {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 2px;
}

.calc-total__divider {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 300;
}

/* Quote Request Button */
.calc-quote-btn {
    display: inline-block;
    padding: 18px 48px;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-white);
    background: linear-gradient(135deg, #E07A5F 0%, #d4644a 100%);
    cursor: pointer;
    box-shadow: 0 4px 0 #b8533a, 0 6px 16px rgba(224, 122, 95, 0.3);
    transform: translateY(0);
    transition: all 0.15s ease;
    animation: calcPulse 2s ease-in-out infinite;
}

.calc-quote-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #b8533a, 0 10px 24px rgba(224, 122, 95, 0.4);
    animation: none;
}

.calc-quote-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #b8533a, 0 2px 4px rgba(224, 122, 95, 0.2);
    animation: none;
}

@keyframes calcPulse {
    0%, 100% { box-shadow: 0 4px 0 #b8533a, 0 6px 16px rgba(224, 122, 95, 0.3); }
    50% { box-shadow: 0 4px 0 #b8533a, 0 6px 24px rgba(224, 122, 95, 0.5); }
}

/* Responsive */
@media (max-width: 1024px) {
    .calc-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .calc-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .calc-formula {
        flex-direction: column;
        gap: 8px;
        font-size: 13px;
        padding: 14px 16px;
    }

    .calc-formula__divider {
        display: none;
    }

    .calc-total {
        flex-direction: column;
        gap: 12px;
        padding: 20px;
    }

    .calc-result__value {
        font-size: 28px;
    }

    .calc-total__value {
        font-size: 26px;
    }

    .calc-quote-btn {
        width: 100%;
        padding: 16px 32px;
    }
}

@media (max-width: 480px) {
    .calc-solution-pills {
        gap: 8px;
    }

    .calc-solution-pill {
        padding: 8px 18px;
        font-size: 13px;
    }

    .calc-result {
        gap: 20px;
    }

    .calc-result__value {
        font-size: 24px;
    }

    .calc-card__body {
        padding: 20px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .calc-quote-btn {
        animation: none;
    }
}

/* ==========================================
   SOILAROMA — 힐링 로드 10대 기능 (2열 카드)
   ========================================== */
.sa-healing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.sa-healing-card {
    background: #fff;
    border: 1px solid rgba(224,122,95,0.13);
    border-radius: 14px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        inset 0 -1px 0 rgba(224,122,95,0.08),
        0 4px 20px rgba(0,0,0,0.07);
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1),
                box-shadow 0.35s cubic-bezier(0.16,1,0.3,1);
}
.sa-healing-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-terracotta, #E07A5F);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.sa-healing-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        inset 0 -1px 0 rgba(224,122,95,0.08),
        0 16px 40px rgba(0,0,0,0.12);
}
.sa-healing-card:hover::after { transform: scaleX(1); }

.sa-healing-card__header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.sa-healing-num {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-terracotta, #E07A5F);
    line-height: 1;
    letter-spacing: -0.02em;
    opacity: 0.3;
    min-width: 2.2rem;
}
.sa-healing-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 0.18rem 0.55rem;
    border-radius: 20px;
}
.sa-healing-badge--safety    { background: #f0f7ed; color: #3d7a32; }
.sa-healing-badge--durability{ background: #edf0f7; color: #2c3e6b; }
.sa-healing-badge--heal      { background: #fef0ec; color: var(--color-terracotta, #E07A5F); }
.sa-healing-badge--hygiene   { background: #edf7f5; color: #1f6b5e; }
.sa-healing-badge--env       { background: #f0f7ed; color: #3d7a32; }
.sa-healing-badge--econ      { background: #fdf5e8; color: #7a5a1f; }
.sa-healing-badge--landscape { background: #f7f0ed; color: #7a4a2f; }

.sa-healing-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-black, #1a1a1a);
    line-height: 1.35;
}
.sa-healing-desc {
    font-size: 0.875rem;
    color: var(--color-gray-dark, #555);
    line-height: 1.8;
    flex: 1;
}
.sa-healing-kw {
    display: inline-block;
    background: #f5ede9;
    color: var(--color-terracotta, #E07A5F);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.22rem 0.75rem;
    border-radius: 20px;
    width: fit-content;
    margin-top: auto;
}

@media (max-width: 768px) {
    .sa-healing-grid { grid-template-columns: 1fr; }
    .sa-healing-card { padding: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
    .sa-healing-card,
    .sa-healing-card::after { transition: none; }
}

/* ==========================================
   SOILAROMA — 공법 비교 테이블 (섹션 A)
   ========================================== */
.sa-compare-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.sa-compare-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    background: var(--color-white);
    font-size: 15px;
}

.sa-compare-table thead tr {
    background: var(--color-black);
    color: var(--color-white);
}

.sa-compare-table th {
    padding: 16px 20px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
}

.sa-compare-table th:first-child {
    text-align: left;
}

.sa-compare-table thead th.sa-compare-table__highlight {
    background: var(--color-terracotta);
    color: var(--color-white);
}

.sa-compare-table tbody tr {
    border-bottom: 1px solid #f0ece9;
}

.sa-compare-table tbody tr:last-child {
    border-bottom: none;
}

.sa-compare-table tbody tr:nth-child(even) {
    background: #fdf8f6;
}

.sa-compare-table td {
    padding: 14px 20px;
    text-align: center;
    vertical-align: middle;
    font-size: 14px;
    color: var(--color-gray-dark);
}

.sa-compare-table td:first-child {
    text-align: left;
    font-weight: 700;
    color: var(--color-black);
    white-space: nowrap;
}

.sa-compare-table tbody td.sa-compare-table__highlight {
    background: rgba(224, 122, 95, 0.08);
}

.sa-compare-table tbody td.sa-compare-table__highlight .sa-rating {
    background: rgba(224, 122, 95, 0.15);
    color: var(--color-terracotta);
    font-weight: 700;
}

.sa-rating {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.sa-rating--low {
    background: #f5f5f5;
    color: #999;
}

.sa-rating--mid {
    background: #fff8e1;
    color: #b8860b;
}

.sa-rating--high {
    background: rgba(224, 122, 95, 0.12);
    color: var(--color-terracotta);
}

/* ==========================================
   SOILAROMA — 안전성 시험 현황 (섹션 B)
   ========================================== */
.sa-test-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.sa-test-card {
    background: var(--color-white);
    border: 1px solid #e0e0e0;
    border-top: 4px solid var(--color-terracotta);
    border-radius: 12px;
    padding: var(--spacing-lg);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.sa-test-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.sa-test-card__status {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-white);
    background: var(--color-terracotta);
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: var(--spacing-sm);
    letter-spacing: 0.03em;
}

.sa-test-card__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 6px;
    line-height: 1.4;
}

.sa-test-card__org {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-gray);
    margin-bottom: var(--spacing-sm);
}

.sa-test-card__desc {
    font-size: 13px;
    color: var(--color-gray-dark);
    line-height: 1.65;
    margin: 0;
}

.sa-test-cta {
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-gray-dark);
    margin: 0;
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--color-white);
    border: 1px dashed #ccc;
    border-radius: 8px;
    max-width: 480px;
    margin: 0 auto;
}

/* ==========================================
   SOILAROMA — 표준 시공 기준 (섹션 C)
   ========================================== */
.sa-construction-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: var(--spacing-xl);
    align-items: stretch;
}

.sa-construction-targets {
    background: var(--color-white);
    border: 1px solid #e0e0e0;
    border-left: 6px solid var(--color-terracotta);
    border-radius: 12px;
    padding: var(--spacing-xl);
}

.sa-construction-targets__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: var(--spacing-md);
}

.sa-construction-targets__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.sa-construction-targets__list li {
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-gray-dark);
    background: #fdf8f6;
    border-radius: 8px;
    position: relative;
    padding-left: 32px;
}

.sa-construction-targets__list li::before {
    content: '✓';
    position: absolute;
    left: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-terracotta);
}

.sa-spec-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.sa-spec-table {
    width: 100%;
    min-width: 320px;
    border-collapse: collapse;
    background: var(--color-white);
    font-size: 15px;
}

.sa-spec-table thead tr {
    background: var(--color-black);
    color: var(--color-white);
}

.sa-spec-table th {
    padding: 14px 20px;
    text-align: left;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
}

.sa-spec-table th:last-child {
    text-align: right;
}

.sa-spec-table tbody tr {
    border-bottom: 1px solid #f0ece9;
}

.sa-spec-table tbody tr:last-child {
    border-bottom: none;
}

.sa-spec-table tbody tr:nth-child(even) {
    background: #fdf8f6;
}

.sa-spec-table td {
    padding: 14px 20px;
    font-size: 14px;
    color: var(--color-gray-dark);
    vertical-align: middle;
}

.sa-spec-table td:first-child {
    font-weight: 700;
    color: var(--color-black);
    white-space: nowrap;
}

.sa-spec-table td:last-child {
    text-align: right;
    color: var(--color-terracotta);
    font-weight: 600;
}

/* Responsive */
@media (max-width: 1024px) {
    .sa-test-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sa-construction-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
}

@media (max-width: 768px) {
    .sa-test-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .sa-test-card__title {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .sa-test-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sa-test-card {
        transition: none;
        transform: none !important;
    }
}

/* ==========================================
   GAIACURE: 12대 장점 그리드
   ========================================== */
.gc-adv-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.gc-adv-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(224,122,95,0.08), 0 4px 20px rgba(0,0,0,0.07);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.gc-adv-card:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 12px 36px rgba(224,122,95,0.14);
}
.gc-adv-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--color-terracotta);
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    margin-bottom: 4px;
}
.gc-adv-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-dark);
    word-break: keep-all;
    overflow-wrap: break-word;
    line-height: 1.4;
}
.gc-adv-desc {
    font-size: 12px;
    color: #666;
    line-height: 1.6;
    word-break: keep-all;
    overflow-wrap: break-word;
    flex-grow: 1;
}
.gc-adv-stat {
    display: inline-block;
    margin-top: 4px;
    padding: 3px 10px;
    background: #fef0ec;
    color: var(--color-terracotta);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    width: fit-content;
    word-break: keep-all;
}

/* ==========================================
   GAIACURE: 종합 비교표
   ========================================== */
.gc-compare-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.09);
}
.gc-compare-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 14px;
}
.gc-compare-table thead tr {
    background: transparent;
    color: var(--color-dark);
}
.gc-compare-table th {
    padding: 14px 16px;
    text-align: center;
    font-weight: 600;
    word-break: keep-all;
    background: #d4b896;
}
.gc-compare-table th:first-child {
    text-align: left;
}
.gc-compare-table th.gc-compare-hl {
    background: var(--color-terracotta);
}
.gc-compare-table td {
    padding: 13px 16px;
    border-bottom: 1px solid #f0e8e4;
    text-align: center;
    color: #666;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.gc-compare-table td:first-child {
    text-align: left;
    font-weight: 600;
    color: var(--color-dark);
}
.gc-compare-table td.gc-compare-hl {
    background: #fff8f6;
    font-weight: 600;
}
.gc-compare-table tbody tr:last-child td {
    border-bottom: none;
}
.gc-compare-table tbody tr:hover {
    background: #fef8f6;
}
.gc-tag--good { color: #2a7a4e; font-weight: 700; }
.gc-tag--bad  { color: #bbb; }
.gc-tag--mid  { color: #888; }
.gc-compare-note {
    margin-top: 20px;
    padding: 18px 24px;
    background: #fef0ec;
    border-left: 3px solid var(--color-terracotta);
    border-radius: 0 8px 8px 0;
    font-size: 14px;
    color: var(--color-dark);
    line-height: 1.7;
    word-break: keep-all;
    overflow-wrap: break-word;
}

@media (max-width: 1024px) {
    .gc-adv-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .gc-adv-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .gc-adv-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .gc-adv-card { transition: none; transform: none !important; }
}

/* ==========================================
   GAIACURE: 유기농업자재 공시 인증 섹션
   ========================================== */
.gc-cert-section {
    background: linear-gradient(135deg, #1a0e0a 0%, #2e1810 50%, #1a0e0a 100%);
    position: relative;
    overflow: hidden;
}
.gc-cert-section::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -5%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(224,122,95,0.12) 0%, transparent 65%);
    pointer-events: none;
}
.gc-cert-section::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -5%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(224,122,95,0.07) 0%, transparent 65%);
    pointer-events: none;
}
.gc-cert-split {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 64px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.gc-cert-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 36px 28px;
    border: 1.5px solid rgba(224,122,95,0.45);
    border-radius: 20px;
    background: rgba(224,122,95,0.07);
    text-align: center;
}
.gc-cert-badge__top-label {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(224,122,95,0.75);
    font-weight: 700;
}
.gc-cert-badge__seal {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(224,122,95,0.15);
    border: 1.5px solid rgba(224,122,95,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px auto;
}
.gc-cert-badge__number {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.03em;
    line-height: 1.2;
}
.gc-cert-badge__divider {
    width: 40px;
    height: 1px;
    background: rgba(224,122,95,0.3);
    margin: 0 auto;
}
.gc-cert-badge__issuer {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    line-height: 1.7;
    word-break: keep-all;
}
.gc-cert-badge__date {
    font-size: 11px;
    color: rgba(224,122,95,0.6);
    margin-top: 4px;
}

.gc-cert-right {
    display: flex;
    flex-direction: column;
    gap: 32px;
    position: relative;
    z-index: 1;
}
.gc-cert-title {
    color: #fff;
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 700;
    line-height: 1.35;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.gc-cert-subtitle {
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    line-height: 1.7;
    word-break: keep-all;
    margin-top: 8px;
}
.gc-cert-proof-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.gc-cert-proof-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: rgba(255,255,255,0.75);
    word-break: keep-all;
    line-height: 1.5;
}
.gc-cert-proof-item svg {
    flex-shrink: 0;
    margin-top: 1px;
}

.gc-cert-stats-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.08);
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    margin-top: 56px;
    border: 1px solid rgba(255,255,255,0.08);
}
.gc-cert-stat {
    padding: 24px 16px;
    text-align: center;
    background: rgba(255,255,255,0.03);
    transition: background 0.2s;
}
.gc-cert-stat:hover {
    background: rgba(224,122,95,0.1);
}
.gc-cert-stat__crop {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    margin-bottom: 8px;
    word-break: keep-all;
}
.gc-cert-stat__pct {
    font-size: 28px;
    font-weight: 800;
    color: var(--color-terracotta);
    line-height: 1;
}
.gc-cert-stat__raw {
    font-size: 11px;
    color: rgba(255,255,255,0.3);
    margin-top: 6px;
    line-height: 1.5;
}

/* ==========================================
   GAIACURE: 작물 생육 비교 사진
   ========================================== */
.gc-photo-editorial {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 56px;
    align-items: center;
}
.gc-photo-editorial__text {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.gc-photo-editorial__title {
    font-size: clamp(20px, 2.5vw, 26px);
    font-weight: 700;
    color: var(--color-dark);
    word-break: keep-all;
    line-height: 1.4;
}
.gc-photo-editorial__desc {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
    word-break: keep-all;
}
.gc-photo-editorial__meta {
    font-size: 12px;
    color: #aaa;
    line-height: 1.6;
    word-break: keep-all;
    padding-top: 8px;
    border-top: 1px solid #f0e8e4;
}
.gc-photo-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.gc-photo-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.1);
}
.gc-photo-label {
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.03em;
    word-break: keep-all;
}
.gc-photo-label--before {
    background: #ece8e4;
    color: #888;
}
.gc-photo-label--after {
    background: var(--color-terracotta);
    color: #fff;
}
.gc-photo-slot {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    background: #f5ede8;
}
.gc-photo-placeholder {
    width: 100%;
    aspect-ratio: 3 / 4;
    background: linear-gradient(145deg, #f9f0eb, #f0e4dc);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #ccc;
    font-size: 12px;
    text-align: center;
    padding: 16px;
}
.gc-photo-placeholder span:last-child {
    font-size: 10px;
    color: #ddd;
    word-break: break-all;
}
.gc-photo-source {
    margin-top: 16px;
    font-size: 11px;
    color: #bbb;
    text-align: center;
    word-break: keep-all;
}

/* Responsive */
@media (max-width: 1024px) {
    .gc-cert-split { grid-template-columns: 1fr; gap: 36px; }
    .gc-cert-stats-row { grid-template-columns: repeat(5, 1fr); }
    .gc-photo-editorial { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 768px) {
    .gc-cert-stats-row { grid-template-columns: repeat(3, 1fr); }
    .gc-cert-stat:nth-child(4),
    .gc-cert-stat:nth-child(5) { grid-column: span 1; }
}
@media (max-width: 480px) {
    .gc-cert-stats-row { grid-template-columns: repeat(2, 1fr); }
    .gc-cert-badge__number { font-size: 18px; }
}

/* ==========================================
   cp-xrf-wrap — XRF 전성분표
   ========================================== */

.cp-xrf-wrap {
    background: #fff;
    border: 1px solid rgba(224,122,95,0.15);
    border-radius: 12px;
    padding: 1.75rem 2rem;
}

.cp-xrf-header {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-terracotta, #E07A5F);
}

.cp-xrf-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-dark, #1a0e0a);
    margin: 0;
    word-break: keep-all;
}

.cp-xrf-unit {
    font-size: 0.8rem;
    color: #8a7670;
}

.cp-xrf-table-scroll {
    overflow-x: auto;
}

.cp-xrf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.cp-xrf-table thead tr {
    background: var(--color-terracotta, #E07A5F);
    color: #fff;
}

.cp-xrf-table thead th {
    padding: 0.6rem 0.9rem;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

.cp-xrf-table tbody tr {
    border-bottom: 1px solid #f0ebe8;
    transition: background 0.15s;
}

.cp-xrf-table tbody tr:hover {
    background: rgba(224,122,95,0.04);
}

.cp-xrf-table tbody td {
    padding: 0.55rem 0.9rem;
    color: #3a2e2a;
    word-break: keep-all;
}

.cp-xrf-val {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    white-space: nowrap;
}

.cp-xrf-hl--cao {
    background: rgba(224,122,95,0.08) !important;
    color: #c0392b;
}

.cp-xrf-hl--cao td {
    color: #b83a28;
}

.cp-xrf-hl--mgo {
    background: rgba(74,111,165,0.07) !important;
}

.cp-xrf-hl--mgo td {
    color: #2c5282;
}

.cp-xrf-source {
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    color: #a09088;
}

/* ==========================================
   cp-chart-split — XRF 바 + XRD 도넛
   ========================================== */

.cp-chart-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.cp-chart-card {
    background: #fff;
    border: 1px solid rgba(224,122,95,0.12);
    border-radius: 12px;
    padding: 1.5rem;
}

.cp-chart-card__title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-dark, #1a0e0a);
    margin: 0 0 1.25rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #f0ebe8;
    word-break: keep-all;
}

/* 수평 바 차트 */
.cp-hbar-chart {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.cp-hbar-row {
    display: grid;
    grid-template-columns: 52px 1fr 48px;
    align-items: center;
    gap: 0.6rem;
}

.cp-hbar-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #3a2e2a;
    font-family: 'Noto Sans KR', sans-serif;
    white-space: nowrap;
}

.cp-hbar-track {
    height: 16px;
    background: #f0ebe8;
    border-radius: 4px;
    overflow: hidden;
}

.cp-hbar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.cp-hbar-fill--default { background: #bdb0aa; }
.cp-hbar-fill--cao     { background: var(--color-terracotta, #E07A5F); }
.cp-hbar-fill--mgo     { background: #4a6fa5; }

.cp-hbar-val {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b5c55;
    text-align: right;
    white-space: nowrap;
}

.cp-hbar-axis {
    grid-column: 2 / 3;
    display: flex;
    justify-content: space-between;
    margin-top: 0.25rem;
    font-size: 0.68rem;
    color: #a09088;
}

/* XRD 도넛 차트 */
.cp-donut-wrap {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.cp-donut-svg {
    flex: 0 0 160px;
    width: 160px;
    height: 160px;
    transform: rotate(-90deg);
}

.cp-donut-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.cp-donut-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
}

.cp-donut-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cp-donut-name {
    color: #3a2e2a;
    flex: 1;
    word-break: keep-all;
}

.cp-donut-item strong {
    color: var(--color-dark, #1a0e0a);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ==========================================
   cp-perf-grid — 현장 성능 비교 2열 카드
   ========================================== */

.cp-perf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.cp-perf-card {
    background: #fff;
    border: 1px solid rgba(224,122,95,0.12);
    border-radius: 12px;
    padding: 1.5rem 1.5rem 1.25rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.cp-perf-metric {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-terracotta, #E07A5F);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.9rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #f0ebe8;
    word-break: keep-all;
}

.cp-perf-bar-group {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.cp-perf-bar-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cp-perf-name {
    font-size: 0.75rem;
    font-weight: 600;
}

.cp-perf-name--primary { color: var(--color-terracotta, #E07A5F); }
.cp-perf-name--gray    { color: #a09088; }

.cp-perf-track {
    height: 24px;
    background: #f0ebe8;
    border-radius: 6px;
    overflow: hidden;
}

.cp-perf-fill {
    height: 100%;
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding-left: 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    color: #fff;
    transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.cp-perf-fill--primary { background: var(--color-terracotta, #E07A5F); }
.cp-perf-fill--gray    { background: #c4b5ae; }

@media (max-width: 1024px) {
    .cp-chart-split { grid-template-columns: 1fr; }
    .cp-donut-wrap { justify-content: center; }
}

@media (max-width: 768px) {
    .cp-perf-grid { grid-template-columns: 1fr; }
    .cp-xrf-wrap { padding: 1.25rem; }
    .cp-chart-card { padding: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cp-hbar-fill,
    .cp-perf-fill { transition: none; }
}

/* =============================================
   ESG 확장 섹션 — 탄소 흡수 · 도시열섬 완화
   ============================================= */

/* Section A: esg-carbon */
.esg-carbon-split {
    display: grid;
    grid-template-columns: 60% 40%;
    gap: 3rem;
    align-items: center;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.esg-carbon-left { }
.esg-carbon-stat {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.esg-carbon-num {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-terracotta, #E07A5F);
    letter-spacing: -0.02em;
}
.esg-carbon-unit {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-terracotta, #E07A5F);
}
.esg-carbon-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-black, #1a1a1a);
    line-height: 1.4;
}
.esg-carbon-desc {
    font-size: 0.95rem;
    color: var(--color-gray-dark, #555);
    line-height: 1.8;
}
.esg-carbon-note {
    font-size: 0.78rem;
    color: #999;
    line-height: 1.6;
}

/* CaO / MgO 카드 */
.esg-carbon-right { display: flex; flex-direction: column; }
.esg-carbon-card {
    background: #fff;
    border: 1px solid rgba(224,122,95,0.15);
    border-radius: 14px;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        inset 0 -1px 0 rgba(224,122,95,0.08),
        0 8px 32px rgba(0,0,0,0.10);
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s cubic-bezier(0.16,1,0.3,1);
}
.esg-carbon-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-terracotta, #E07A5F);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.esg-carbon-card:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        inset 0 -1px 0 rgba(224,122,95,0.08),
        0 16px 40px rgba(0,0,0,0.14);
}
.esg-carbon-card:hover::after { transform: scaleX(1); }
.esg-carbon-card__label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-terracotta, #E07A5F);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.75rem;
}
.esg-carbon-card__content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.esg-carbon-card__comp {
    font-size: 1rem;
    font-weight: 600;
    color: #444;
    background: #f5ede9;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
}
.esg-carbon-card__arrow {
    color: #aaa;
    font-size: 1rem;
}
.esg-carbon-card__result {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-black, #1a1a1a);
}
.esg-carbon-card__formula {
    font-size: 0.75rem;
    color: #aaa;
    margin-top: 0.5rem;
}

/* Section B: esg-heat */
.esg-heat-mechs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.esg-heat-mech-card {
    background: #fff;
    border: 1px solid rgba(224,122,95,0.12);
    border-radius: 14px;
    padding: 1.75rem 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        inset 0 -1px 0 rgba(224,122,95,0.08),
        0 4px 20px rgba(0,0,0,0.07);
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s cubic-bezier(0.16,1,0.3,1);
}
.esg-heat-mech-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-terracotta, #E07A5F);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.esg-heat-mech-card:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        inset 0 -1px 0 rgba(224,122,95,0.08),
        0 16px 40px rgba(0,0,0,0.14);
}
.esg-heat-mech-card:hover::after { transform: scaleX(1); }
.esg-heat-mech-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    display: block;
}
.esg-heat-mech-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-black, #1a1a1a);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}
.esg-heat-mech-desc {
    font-size: 0.875rem;
    color: var(--color-gray-dark, #555);
    line-height: 1.7;
    margin-bottom: 1rem;
}
.esg-heat-mech-kw {
    display: inline-block;
    background: #f5ede9;
    color: var(--color-terracotta, #E07A5F);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
}

/* 온도 비교 차트 */
.esg-temp-chart {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.esg-temp-caption {
    font-size: 0.8rem;
    color: #999;
    text-align: center;
    margin-bottom: 1.5rem;
    letter-spacing: 0.02em;
}
.esg-temp-bars {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.esg-temp-bar {
    display: grid;
    grid-template-columns: 80px 1fr 60px;
    align-items: center;
    gap: 0.75rem;
    word-break: keep-all;
}
.esg-temp-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #666;
    text-align: right;
}
.esg-temp-label--primary {
    color: var(--color-terracotta, #E07A5F);
    font-weight: 700;
}
.esg-temp-track {
    height: 28px;
    background: #f0ebe8;
    border-radius: 6px;
    overflow: hidden;
}
.esg-temp-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.8s cubic-bezier(0.16,1,0.3,1);
}
.esg-temp-fill--dark    { background: #6b6260; }
.esg-temp-fill--mid     { background: #9b9190; }
.esg-temp-fill--light   { background: #bdb6b4; }
.esg-temp-fill--primary { background: var(--color-terracotta, #E07A5F); }
.esg-temp-value {
    font-size: 0.875rem;
    font-weight: 700;
    color: #555;
}
.esg-temp-value--primary {
    color: var(--color-terracotta, #E07A5F);
}

/* 반응형 */
@media (max-width: 1024px) {
    .esg-carbon-split { grid-template-columns: 1fr; gap: 2rem; }
    .esg-carbon-num { font-size: 2.8rem; }
}
@media (max-width: 768px) {
    .esg-heat-mechs { grid-template-columns: 1fr; }
    .esg-temp-bar { grid-template-columns: 70px 1fr 50px; gap: 0.5rem; }
    .esg-temp-label { font-size: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .esg-carbon-card,
    .esg-carbon-card::after,
    .esg-heat-mech-card,
    .esg-heat-mech-card::after,
    .esg-temp-fill { transition: none; }
}

/* =============================================
   AQUACURE-G — 녹조저감 솔루션 페이지
   ============================================= */

/* Hero */
.aquacure-hero {
    background-color: #0a1e30;
    background-image:
        linear-gradient(to right,
            rgba(0,0,0,0.65) 0%,
            rgba(0,20,40,0.45) 55%,
            rgba(0,30,50,0.15) 100%),
        url('../img/img-aquacure-hero.png');
    background-size: cover;
    background-position: center 40%;
}
.aquacure-hero .hero__title { font-size: 2rem; }
.aquacure-hero .hero__description {
    color: rgba(255,255,255,0.88);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 640px;
    margin-top: 12px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* 3대 원인 카드 */
.ac-cause-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.ac-cause-card {
    background: #fff;
    border: 1px solid rgba(224,122,95,0.13);
    border-radius: 14px;
    padding: 1.75rem;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        inset 0 -1px 0 rgba(224,122,95,0.08),
        0 4px 20px rgba(0,0,0,0.07);
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s cubic-bezier(0.16,1,0.3,1);
    position: relative; overflow: hidden;
}
.ac-cause-card::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
    background: var(--color-terracotta, #E07A5F);
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.ac-cause-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 16px 40px rgba(0,0,0,0.12); }
.ac-cause-card:hover::after { transform: scaleX(1); }
.ac-cause-icon { font-size: 2rem; margin-bottom: 0.75rem; display: block; }
.ac-cause-title { font-size: 1rem; font-weight: 700; color: var(--color-black, #1a1a1a); margin-bottom: 0.75rem; line-height: 1.4; }
.ac-cause-desc { font-size: 0.875rem; color: #555; line-height: 1.75; margin-bottom: 1rem; }
.ac-cause-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.ac-cause-list li { font-size: 0.8rem; color: #888; padding-left: 1rem; position: relative; }
.ac-cause-list li::before { content: '·'; position: absolute; left: 0; color: var(--color-terracotta, #E07A5F); }

/* 기존방법 한계 카드 */
.ac-limit-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.ac-limit-card {
    background: #fff;
    border: 1px solid #e8e0dc;
    border-radius: 14px;
    padding: 1.5rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.ac-limit-method {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    background: #444;
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 0.75rem;
}
.ac-limit-merit { font-size: 0.8rem; color: #3d7a32; font-weight: 600; margin-bottom: 0.75rem; }
.ac-limit-cons { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.ac-limit-cons li { font-size: 0.8rem; color: #666; line-height: 1.5; }

/* 10대 장점 카드 */
.ac-adv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.ac-adv-card {
    background: #fff;
    border: 1px solid rgba(224,122,95,0.13);
    border-radius: 14px;
    padding: 1.75rem;
    display: flex; flex-direction: column; gap: 0.75rem;
    position: relative; overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        inset 0 -1px 0 rgba(224,122,95,0.08),
        0 4px 20px rgba(0,0,0,0.07);
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s cubic-bezier(0.16,1,0.3,1);
}
.ac-adv-card::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
    background: var(--color-terracotta, #E07A5F);
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.ac-adv-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 16px 40px rgba(0,0,0,0.12); }
.ac-adv-card:hover::after { transform: scaleX(1); }
.ac-adv-header { display: flex; align-items: center; gap: 0.6rem; }
.ac-adv-num { font-size: 1.5rem; font-weight: 800; color: var(--color-terracotta, #E07A5F); opacity: 0.3; line-height: 1; min-width: 2.2rem; }
.ac-adv-badge { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; padding: 0.18rem 0.55rem; border-radius: 20px; }
.ac-adv-badge--block { background: #fef0ec; color: var(--color-terracotta, #E07A5F); }
.ac-adv-badge--water { background: #edf3f7; color: #1a4e6b; }
.ac-adv-badge--safe  { background: #f0f7ed; color: #3d7a32; }
.ac-adv-badge--econ  { background: #fdf5e8; color: #7a5a1f; }
.ac-adv-title { font-size: 1rem; font-weight: 700; color: var(--color-black, #1a1a1a); line-height: 1.35; }
.ac-adv-desc  { font-size: 0.875rem; color: #555; line-height: 1.8; flex: 1; }
.ac-adv-kw {
    display: inline-block; background: #f5ede9;
    color: var(--color-terracotta, #E07A5F);
    font-size: 0.75rem; font-weight: 700;
    padding: 0.22rem 0.75rem; border-radius: 20px; width: fit-content; margin-top: auto;
}

/* 비교표 */
.ac-compare-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}
.ac-compare-table {
    width: 100%; border-collapse: collapse; min-width: 700px;
    font-size: 0.875rem; word-break: keep-all;
}
.ac-compare-table thead tr { background: #1a1a1a; }
.ac-compare-table th {
    padding: 1rem 0.875rem; font-weight: 700; color: #fff;
    text-align: center; font-size: 0.82rem;
}
.ac-compare-table th:first-child { text-align: left; }
.ac-compare-table th.ac-compare-hl { background: var(--color-terracotta, #E07A5F); }
.ac-compare-table tbody tr:nth-child(even) { background: #fafafa; }
.ac-compare-table tbody tr { border-bottom: 1px solid #f0ebe8; }
.ac-compare-table tbody tr:last-child { border-bottom: none; }
.ac-compare-table td { padding: 0.875rem; text-align: center; }
.ac-compare-table td:first-child { text-align: left; font-weight: 600; color: #333; }
.ac-compare-table td.ac-compare-hl { background: rgba(224,122,95,0.06); }
.ac-rating { display: inline-block; font-size: 0.8rem; padding: 0.2rem 0.5rem; border-radius: 6px; }
.ac-rating--high { color: #2a6a20; background: #edf7ea; font-weight: 700; }
.ac-rating--mid  { color: #7a5a1f; background: #fdf5e8; }
.ac-rating--low  { color: #8b2a2a; background: #fdf0f0; }

/* 적용 대상 */
.ac-apply-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.ac-apply-card {
    background: #fff;
    border: 1px solid rgba(224,122,95,0.13);
    border-radius: 14px;
    padding: 2rem 1.75rem;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.07);
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
    position: relative; overflow: hidden;
}
.ac-apply-card::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
    background: var(--color-terracotta, #E07A5F);
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.ac-apply-card:hover { transform: translateY(-4px); }
.ac-apply-card:hover::after { transform: scaleX(1); }
.ac-apply-icon { font-size: 2.5rem; margin-bottom: 1rem; display: block; }
.ac-apply-title { font-size: 1.05rem; font-weight: 700; color: var(--color-black, #1a1a1a); margin-bottom: 0.75rem; }
.ac-apply-desc { font-size: 0.875rem; color: #555; line-height: 1.75; }

/* CTA */
.ac-cta {
    text-align: center;
    margin-top: var(--spacing-xl, 3rem);
    padding: 3rem 2rem;
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(224,122,95,0.15);
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}
.ac-cta__title { font-size: 1.4rem; font-weight: 700; color: var(--color-black, #1a1a1a); margin-bottom: 0.75rem; word-break: keep-all; }
.ac-cta__desc  { font-size: 0.95rem; color: #666; margin-bottom: 1.75rem; line-height: 1.7; word-break: keep-all; }

/* 반응형 */
@media (max-width: 1024px) {
    .ac-limit-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .ac-cause-grid { grid-template-columns: 1fr; }
    .ac-limit-grid { grid-template-columns: 1fr; }
    .ac-adv-grid   { grid-template-columns: 1fr; }
    .ac-apply-grid { grid-template-columns: 1fr; }
    .ac-adv-card, .ac-cause-card { padding: 1.25rem; }
    .aquacure-hero .hero__title { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ac-cause-card, .ac-cause-card::after,
    .ac-adv-card, .ac-adv-card::after,
    .ac-apply-card, .ac-apply-card::after { transition: none; }
}