/**
 * solution — 소프트웨어 솔루션 3페이지 공통 (sub0301 개요 · sub0302 상세 · sub0303 도입안내)
 * Figma: SUB 03 솔루션 개요(94:2978) · 솔루션 상세(94:3387) · SUB 04 도입안내(57:4129)
 * 페이지 전용 규칙은 <main> 의 클래스로 나눈다: .sol-overview · .sol-detail · .sol-guide
 */

:root {
    /* Figma 변수 없음 — 디자이너 확인 (솔루션 Sub Hero 94:2980 의 붉은 덮개. 공통 --sub-hero-tint 는 0.7 · color-burn) */
    --sol-hero-tint: rgba(246, 0, 0, 0.2);

    /* 숫자 서체 — Figma 가 Pretendard 대신 쓴 글꼴 (Google Fonts 로 페이지 head 에서 불러온다) */
    --font-num: 'Poppins', var(--font);
    --font-num-alt: 'Urbanist', var(--font);

    /* 강조색 짝 — 기본 레드. .is-green 을 붙이면 그린 */
    --sol-accent: var(--text-brand);
    --sol-soft: var(--bg-tint);
}

/* ==========================================================================
   Sub Hero — 솔루션 3페이지 공통 배경 (Figma 94:2980 · 94:3389 · 336:4313)
   <div id="sub-top" class="sub-top-wrap--solution"></div>
   ========================================================================== */
.sub-top-wrap--solution .sub-top-bg { opacity: 0.73; background-position: center; }
.sub-top-wrap--solution .sub-top::after { background: var(--sol-hero-tint); mix-blend-mode: normal; }

/* 공통 — 색 변형: 레드(기본) · 그린(--green) */
.is-green { --sol-accent: var(--text-accent); --sol-soft: var(--bg-accent-soft); }
.is-red   { --sol-accent: var(--text-brand);  --sol-soft: var(--bg-tint); }

/* ==========================================================================
   sub0301 · S1 Platform — 3계층 알약 카드
   ========================================================================== */
.sol-layers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.sol-layer {
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    padding: 60px var(--space-40); background: var(--sol-soft); border-radius: var(--radius-full);
}
.sol-layer-top { display: flex; align-items: center; gap: 10px; line-height: 1.1; white-space: nowrap; }
.sol-layer-num { font: 500 28px/1.1 var(--font-num); letter-spacing: -0.01em; color: var(--sol-accent); }
.sol-layer-en { font: 600 20px/1.1 var(--font-num); letter-spacing: -0.01em; color: var(--text-tertiary); }
.sol-layer h3 { margin-top: var(--space-28); font: var(--title-28); letter-spacing: var(--title-28-ls); }
.sol-layer-desc { margin-top: 10px; font: var(--body-20); color: var(--text-secondary); }
.sol-layer-mods { margin-top: 18px; font: var(--body-16); color: var(--sol-accent); }

/* ==========================================================================
   sub0301 · S1b Platform Core — 좌측 헤드 + 알약 목록
   ========================================================================== */
/* 헤드 310 · 간격 170 · 체크리스트 960 = 1440 (2026-10-02 2차 수정사항) */
.sol-core .container { display: flex; align-items: flex-start; gap: 170px; }
.sol-core .sec-head { flex: none; width: 310px; margin-bottom: 0; }
.sol-core-list { flex: none; width: 960px; display: flex; flex-direction: column; gap: var(--grid-gap); padding-top: 50px; }
.sol-core-item {
    display: flex; align-items: center; gap: 10px;
    padding: 22px 26px; background: var(--bg-subtle); border-radius: var(--radius-full);
}
.sol-core-item.is-note { background: var(--bg-tint); }
.sol-core-item img { flex: none; }
.sol-core-item h3, .sol-core-item strong {
    flex: none; width: 142px;
    font: var(--title-20); letter-spacing: var(--title-20-ls); color: var(--sol-accent);
}
.sol-core-item p { flex: 1 1 0; min-width: 0; font: var(--body-18); color: var(--text-secondary); }

/* ==========================================================================
   sub0301 · S2 Architecture — 공정 축 + 3계층 × 3 + AI Agent 띠
   ========================================================================== */
.sol-arch .sec-desc { font: var(--body-16); }
.arch-row { display: grid; grid-template-columns: 160px 1fr; align-items: center; column-gap: var(--grid-gap); }
.arch-row + .arch-row { margin-top: var(--element-gap); }
.arch-row--axis + .arch-row { margin-top: var(--space-20); }
.arch-label { font: 600 15px/1.6 var(--font); color: var(--text-secondary); }
.arch-row--axis .arch-label { font: 500 12px/1.4 var(--font); letter-spacing: var(--label-eyebrow-ls); color: var(--text-tertiary); }
.arch-axis {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px var(--space-80); background: var(--gray-800); border-radius: var(--radius-full);
    font: var(--body-16); white-space: nowrap;
}
.arch-axis li { font-weight: 600; color: var(--text-inverse); }
.arch-axis li[aria-hidden] { font-weight: 400; color: var(--gray-200); }
.arch-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-20); }
.arch-cell { padding: 26px var(--space-28); background: var(--bg-default); border-radius: var(--radius-lg); }
.arch-code { display: block; font: 600 13px/1.4 var(--font); color: var(--sol-accent); }
.arch-cell h3 { margin-top: 10px; font: var(--title-20); letter-spacing: var(--title-20-ls); }
.arch-cell p { margin-top: var(--space-8); font: var(--body-18); color: var(--text-secondary); }
.arch-band {
    display: flex; align-items: center; gap: var(--space-16); margin-top: var(--space-20);
    padding: var(--space-24) 36px; background: var(--action-secondary); border-radius: var(--radius-lg); color: var(--text-inverse);
}
.arch-band img { flex: none; }
.arch-band h3 { flex: none; font: var(--title-20); letter-spacing: var(--title-20-ls); }
.arch-band p { font: var(--body-16); color: color-mix(in srgb, var(--white) 80%, transparent); }
.arch-note { margin-top: var(--space-20); font: var(--body-15); color: var(--text-tertiary); }

/* ==========================================================================
   sub0301 · S2b PIP-AI — 4 카드
   ========================================================================== */
.sol-ai-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
.sol-ai-card { min-height: 220px; padding: 36px var(--space-32); background: var(--sol-soft); border-radius: var(--radius-lg); }
.sol-ai-num { display: block; font: 500 13px/1.4 var(--font-num); color: var(--sol-accent); }
.sol-ai-card h3 { margin-top: 18px; font: var(--title-20); letter-spacing: var(--title-20-ls); }
.sol-ai-card p { margin-top: var(--space-12); font: var(--body-15); color: var(--text-secondary); }

/* ==========================================================================
   sub0301 · S3 Modules — 3그룹 × 모듈 카드 + 도입 순서
   ========================================================================== */
.mod-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.mod-group { display: flex; flex-direction: column; gap: var(--element-gap); }
.mod-group-head { display: flex; align-items: center; gap: 10px; padding-bottom: 4px; font: var(--title-20); letter-spacing: var(--title-20-ls); }
.mod-group-head::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--action-primary); }
.mod-group-head.is-green::before { background: var(--action-secondary); }
.mod-list { display: flex; flex-direction: column; gap: var(--element-gap); }
.mod-card {
    display: flex; flex-direction: column; gap: 6px; min-height: 157px; padding: var(--space-28);
    background: var(--bg-default); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
    transition: border-color var(--transition-fast);
}
.mod-card:hover, .mod-card:focus-visible { border-color: var(--border-brand); }
.mod-num { font: 500 18px/1.1 var(--font-num); letter-spacing: -0.01em; color: var(--sol-accent); }
.mod-card h4 { margin-top: 4px; font: var(--title-24); letter-spacing: var(--title-24-ls); }
.mod-card p { font: var(--body-18); color: var(--text-secondary); }
/* 그룹 설명 — 가장 긴 그룹 아래 한 줄로 맞춘다 (위 간격 16 + 4 = 20) */
.mod-group-tagline { margin-top: auto; padding-top: 4px; font: var(--body-15); color: var(--text-secondary); }
.mod-order {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
    margin-top: var(--space-40); padding: 22px var(--space-32);
    background: var(--bg-default); border-radius: var(--radius-md); white-space: nowrap;
}
.mod-order-label { font: 600 13px/1.4 var(--font); color: var(--text-brand); }
.mod-order ol { display: contents; }
.mod-order li { display: flex; align-items: center; gap: var(--space-8); font: var(--body-15); color: var(--text-tertiary); }
.mod-order li b { font-weight: 600; color: var(--text-primary); }
.mod-order-arrow { font: var(--body-15); color: var(--text-tertiary); }

/* ==========================================================================
   sub0301 · S4 Results — 좌측 헤드 + 성과 표
   ========================================================================== */
.sol-results .container { display: flex; align-items: flex-start; gap: 100px; }
.sol-results .sec-head { flex: none; width: 452px; margin-bottom: 0; }
.sol-results-body { flex: 1 1 0; min-width: 0; }
.result-table { width: 100%; border-top: 1px solid var(--gray-700); }
.result-table th, .result-table td { padding: 22px var(--space-12); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border-strong); }
.result-table th:first-child, .result-table td:first-child { padding-left: var(--space-28); }
.result-table th:last-child, .result-table td:last-child { padding-right: var(--space-28); }
.result-table thead th { padding-block: var(--space-16); font: 600 13px/1.4 var(--font); color: var(--text-secondary); border-bottom-color: var(--border-default); }
.result-table tbody th { width: 24%; font: var(--title-20); letter-spacing: var(--title-20-ls); white-space: nowrap; }
.result-table .col-kpi { width: 18%; font: var(--body-16); color: var(--gray-700); }
.result-table .col-result { font: var(--title-20); letter-spacing: var(--title-20-ls); color: var(--red-700); white-space: nowrap; }
.result-table .col-result.is-green { color: var(--green-700); }
.result-table .col-note { width: 28%; font: var(--body-15); color: var(--text-secondary); }
.sol-results .source-note { margin-top: var(--space-20); color: var(--text-secondary); }

/* ==========================================================================
   sub0302 · 솔루션 상세 — 모듈 카드 (Figma Module/PIP-PMS 94:3415 형식을 11개에 적용)
   ========================================================================== */
.sol-modules { display: flex; flex-direction: column; gap: var(--space-32); }
.sol-module {
    display: flex; align-items: flex-start; gap: var(--space-80); scroll-margin-top: calc(var(--header-h) + var(--space-24));
    padding: var(--space-40) var(--space-40) 44px;
    background: var(--bg-default); border: 1px solid var(--border-default); border-radius: var(--radius-xl);
}
.sol-module-screen { flex: none; width: 619px; height: 420px; display: flex; align-items: center; }
.sol-module-screen img { width: 100%; height: auto; border-radius: var(--radius-md); }
.sol-module-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.sol-module-top { display: flex; align-items: center; gap: var(--space-20); white-space: nowrap; }
.sol-module-num { font: 700 32px/1.1 var(--font-num-alt); letter-spacing: -0.01em; color: var(--sol-accent); }
.sol-module-code { font: var(--heading-40); letter-spacing: var(--heading-40-ls); }
.sol-module-name { font: var(--heading-32); letter-spacing: var(--heading-32-ls); }
.sol-module-desc { font: var(--body-18); color: var(--text-primary); }
.sol-module-features { display: flex; flex-direction: column; gap: 10px; padding-top: 50px; }
.sol-module-features li { display: flex; align-items: flex-start; gap: 14px; font: var(--body-15); color: var(--text-primary); }
.sol-module-features img { flex: none; }
.sol-module-results { display: flex; flex-wrap: wrap; gap: 10px; padding-top: var(--space-20); }
.sol-module-results li {
    display: inline-flex; align-items: center; gap: var(--space-8); padding: 10px var(--space-16);
    background: var(--sol-soft); border-radius: var(--radius-full); white-space: nowrap;
}
.sol-module-results b { font: 600 15px/1.6 var(--font); color: var(--sol-accent); }
.sol-module-results span:not([data-count]) { font: 400 13px/1.4 var(--font); color: var(--text-secondary); }
.sol-module .source-note { font-size: 13px; }
.sol-module-results + .sol-module-fit { margin-top: var(--space-20); }
.sol-module .source-note + .sol-module-fit { margin-top: 10px; }
.sol-module-fit { display: flex; flex-direction: column; gap: var(--space-8); padding-top: 22px; border-top: 1px solid var(--border-default); }
.sol-module-fit h4 { font: 600 16px/1.4 var(--font); }
.sol-module-fit p { font: var(--body-15); color: var(--text-primary); }

/* ==========================================================================
   sub0303 · S1 Packages — STEP A / B / C 카드
   ========================================================================== */
.pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.pack-card {
    display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid var(--border-strong); border-radius: 20px; background: var(--bg-default);
    --pack-head: var(--gray-600); --pack-tint: var(--gray-100);
}
.pack-card.is-red { border-color: var(--red-400); --pack-head: var(--bg-brand); --pack-tint: color-mix(in srgb, var(--red-50) 90%, transparent); }
.pack-card.is-green { border-color: var(--green-500); --pack-head: var(--bg-accent); --pack-tint: var(--green-50); }
.pack-label { padding: 13px var(--space-16); background: var(--pack-head); font: 600 17px/1.4 var(--font); color: var(--text-inverse); text-align: center; }
.pack-body {
    flex: 1 1 auto; display: flex; flex-direction: column; align-items: center;
    padding: 37px 36px var(--space-48); background: linear-gradient(to bottom, var(--pack-tint), var(--white) 50%);
}
.pack-body h3 { font: var(--heading-32); letter-spacing: var(--heading-32-ls); text-align: center; }
.pack-sub { margin-top: 14px; font: var(--body-15); color: var(--text-secondary); text-align: center; }
.pack-list { align-self: stretch; display: flex; flex-direction: column; gap: var(--space-16); margin-top: var(--space-32); padding-top: var(--space-32); border-top: 1px solid var(--border-default); }
.pack-list li { display: flex; align-items: center; gap: var(--space-12); font: var(--body-18); color: var(--text-primary); }
.pack-list img { flex: none; }

/* ==========================================================================
   sub0303 · S3 Support — 정부지원사업 + 차별점 3
   ========================================================================== */
.edge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--element-gap); }
.edge-item {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-8); text-align: center;
    padding: 60px var(--space-28); background: var(--bg-default); border-radius: var(--radius-full);
}
.edge-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; }
.edge-item h3 { font: var(--title-24); letter-spacing: var(--title-24-ls); }
.edge-item p { font: var(--body-20); color: var(--text-secondary); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1439px) {
    .sol-layer { padding-inline: var(--space-24); }
    .sol-core .container, .sol-results .container { flex-direction: column; gap: 0; }
    .sol-core .sec-head, .sol-results .sec-head { width: auto; margin-bottom: var(--sec-gap-head); }
    .sol-core-list { width: 100%; padding-top: 0; }
    .sol-results-body { width: 100%; }
    .sol-ai-cards { grid-template-columns: repeat(2, 1fr); }
    .sol-module { flex-direction: column; gap: var(--space-40); }
    .sol-module-screen { width: 100%; height: auto; }
    .sol-module-features { padding-top: var(--space-20); }
}
@media (max-width: 1023px) {
    .sol-layers { grid-template-columns: 1fr; }
    .sol-layer { padding-block: var(--space-40); }
    .sol-core-item { flex-wrap: wrap; row-gap: 4px; border-radius: var(--radius-xl); }
    .sol-core-item p { flex-basis: 100%; padding-left: 34px; }
    .arch-row { grid-template-columns: 1fr; row-gap: var(--space-12); }
    .arch-axis { padding-inline: var(--space-32); }
    .arch-band { flex-wrap: wrap; row-gap: var(--space-8); }
    .arch-band p { flex-basis: 100%; }
    .mod-groups { grid-template-columns: 1fr; gap: var(--space-40); }
    .mod-order { flex-direction: column; align-items: flex-start; gap: var(--space-8); white-space: normal; }
    .mod-order .mod-order-arrow { display: none; }
    .pack-grid, .edge-grid { grid-template-columns: 1fr; }
    .pack-grid { max-width: 560px; margin-inline: auto; }
    .edge-item { padding-block: var(--space-40); border-radius: var(--radius-xl); }
}
@media (max-width: 767px) {
    .sol-layer h3 { font-size: 24px; }
    .sol-layer-desc { font-size: 17px; }
    .sol-layer { border-radius: var(--radius-xl); padding-inline: var(--space-20); }
    .sol-core-item { padding: var(--space-16) var(--space-20); }
    .sol-core-item p { font-size: 16px; }
    .arch-axis { padding: var(--space-12) var(--space-16); font-size: 14px; }
    .arch-cells { grid-template-columns: 1fr; gap: var(--space-12); }
    .arch-cell { padding: var(--space-20); }
    .arch-cell p { font-size: 16px; }
    .arch-band { padding: var(--space-20); }
    .sol-ai-cards { grid-template-columns: 1fr; gap: var(--space-16); }
    .sol-ai-card { min-height: 0; padding: var(--space-28) var(--space-24); }
    .result-table { min-width: 720px; }
    .sol-module { padding: var(--space-24) var(--space-20) var(--space-28); border-radius: var(--radius-lg); gap: var(--space-24); }
    .sol-module-num { font-size: 24px; }
    .sol-module-code { font-size: 30px; }
    .sol-module-name { font-size: 24px; }
    .sol-module-desc { font-size: 16px; }
    .sol-module-results li { white-space: normal; }
    .pack-body { padding: var(--space-28) var(--space-20) var(--space-32); }
    .pack-body h3 { font-size: 26px; }
    .pack-list li { font-size: 16px; }
    .edge-item p { font-size: 17px; }
}