/**
 * SOT Experience Center — Container width & readability (TicketBNK 기준)
 * Hero 1280 · Content 1200 · Doc 960 · FAQ 1000 · Contact 1080
 */

:root {
    --sot-width-hero: 1280px;
    --sot-width-content: 1200px;
    --sot-width-doc: 960px;
    --sot-width-faq: 1000px;
    --sot-width-contact: 1080px;
    --sot-width-prose: 860px;
    --sot-gutter: clamp(1rem, 2.5vw, 1.5rem);
}

/* Bootstrap .container override — responsive.css의 max-width:100% 무력화 방지 */
.site-header .container,
.hero-landing .container,
.hero-platform .container,
.hero-platform-grid,
.hero-exp .container,
.content-hero .container,
.phase2-hero .container,
.hero .container,
.home-cta-band .container,
.case-kpi-band .container,
.sales-cta-band .container {
    width: min(var(--sot-width-hero), calc(100% - 2 * var(--sot-gutter)));
    max-width: var(--sot-width-hero);
    margin-inline: auto;
    padding-inline: var(--sot-gutter);
}

.site-main .container,
.bk-section .container,
.section .container,
.site-footer .container {
    width: min(var(--sot-width-content), calc(100% - 2 * var(--sot-gutter)));
    max-width: var(--sot-width-content);
    margin-inline: auto;
    padding-inline: var(--sot-gutter);
}

.container--doc,
.layout-doc > .container,
.layout-doc.container,
.legal-doc {
    width: min(var(--sot-width-doc), calc(100% - 2 * var(--sot-gutter)));
    max-width: var(--sot-width-doc);
    margin-inline: auto;
}

.bk-section .container.container--doc,
.section .container.container--doc {
    max-width: var(--sot-width-doc);
    width: min(var(--sot-width-doc), calc(100% - 2 * var(--sot-gutter)));
}

.container--prose,
.layout-prose.case-detail-body {
    max-width: var(--sot-width-prose);
}

.bk-section .container.container--faq,
.layout-faq .container.container--faq,
.container--faq {
    width: min(var(--sot-width-faq), calc(100% - 2 * var(--sot-gutter)));
    max-width: var(--sot-width-faq);
}

.layout-faq:not(.container) {
    width: min(var(--sot-width-faq), calc(100% - 2 * var(--sot-gutter)));
    max-width: var(--sot-width-faq);
}

.bk-section .container.container--contact,
.section .container.container--contact,
.container--contact,
.layout-contact > .container,
.layout-contact.container {
    width: min(var(--sot-width-contact), calc(100% - 2 * var(--sot-gutter)));
    max-width: var(--sot-width-contact);
}

/* 본문 가독성 — 한 줄 길이 제한 */
.section-desc,
.bk-section-desc,
.content-hero .lead,
.phase2-hero .lead,
.hero-exp .lead,
.layout-prose,
.layout-prose p,
.case-detail-body,
.process-timeline,
#bridge p {
    max-width: var(--sot-width-prose);
}

.layout-prose-wide {
    max-width: var(--sot-width-doc);
}

/* Hero 높이·정렬 */
.hero-landing {
    min-height: min(72vh, 640px);
}

.hero-platform {
    min-height: min(78vh, 760px);
}

.hero-platform .hero-platform-grid {
    max-width: 1280px;
}

.hero-landing .container {
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

.hero-landing--split .row {
    align-items: center;
}

.hero-copy {
    max-width: 36rem;
}

.hero-landing .hero-sub {
    max-width: 34rem;
}

.content-hero,
.phase2-hero,
.hero-exp {
    padding-block: clamp(2rem, 4vw, 2.75rem);
}

/* 카드 그리드 — 데스크톱 3열 중심 */
@media (min-width: 992px) {
    .feature-grid,
    .product-grid,
    .bk-product-grid,
    .gallery-grid,
    .experience-grid,
    .home-screens-grid,
    .connect-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-product-teaser {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .metric-grid,
    .case-kpi-grid,
    .bk-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .flow-steps {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        max-width: var(--sot-width-content);
        margin-inline: auto;
    }
}

/* Contact 폼 패널 */
.layout-contact .form-panel {
    max-width: 100%;
}

/* Footer는 콘텐츠 폭과 동일 */
.site-footer .container {
    max-width: var(--sot-width-content);
}