/* 뿌리산업 소개 페이지 스타일 */

/* Page Banner */
.page-banner {
    width: 100%;
    height: 320px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    padding-left: 120px;
}

.page-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle, rgba(0, 0, 0, 0.2) 1px, transparent 1px),
        linear-gradient(0deg, rgba(7, 28, 81, 0.3), rgba(7, 28, 81, 0.3)),
        linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
    background-size: 4px 4px, 100% 100%, 100% 100%;
    mix-blend-mode: normal;
    z-index: 0;
}

.banner-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.page-title {
    font-family: 'Elice Digital Baeum', 'Pretendard', sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.02em;
}

/* Main Container */
.about-page {
    min-height: calc(100vh - 340px);
    background: #ffffff;
}

.about-container {
    margin: 0 auto;
    padding: 80px 120px;
}

/* 페이지 상단 메인 타이틀 */
.page-main-title {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 43px;
    color: #272727;
    margin-bottom: 32px;
}

/* Section Common Styles */
.intro-section,
.technology-section,
.materials-section,
.process-section {
    margin-bottom: 80px;
}

.section-title {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 43px;
    color: #272727;
    margin-bottom: 40px;
    padding-bottom: 0;
    border-bottom: none;
}

/* 뿌리기술이란? 섹션 */
.intro-section {
    margin-bottom: 60px;
}

.intro-box {
    background: linear-gradient(93.46deg, #CFDDE7 4.24%, #99BCDC 113.4%);
    padding: 40px;
    margin-bottom: 40px;
}

.intro-title {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 43px;
    color: #323232;
    margin-bottom: 24px;
    margin-top: 0;
}

.intro-text {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 500;
    font-size: 28px;
    line-height: 40px;
    color: #323232;
    margin-bottom: 20px;
}

.intro-note {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 32px;
    color: #323232;
    margin: 0;
}

/* 소재 다원화 및 뿌리 공정기술 확장 섹션 */
.technology-section {
    margin-bottom: 80px;
}

.section-title-with-dot {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    font-size: 28px;
    line-height: 33px;
    color: #272727;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.title-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 6px solid #3270AA;
    flex-shrink: 0;
}

.section-description {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 26px;
    color: #323232;
    margin-bottom: 32px;
}

.tech-table-wrapper {
    margin-bottom: 16px;
}

.tech-table {
    width: 1001px;
    border-collapse: collapse;
    background: #ffffff;
    border-top: 1px solid #3270AA;
    border-bottom: 1px solid #C3C4C6;
    margin-bottom: 8px;
}

.tech-table thead th {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: #3270AA;
    padding: 11px 20px;
    border-bottom: 1px solid #C3C4C6;
    text-align: left;
    background: #E5F1FA;
    height: 45px;
    box-sizing: border-box;
}

.tech-table .col-category {
    width: 177px;
    padding-left: 20px;
}

.tech-table .col-existing {
    width: 300px;
    padding-left: 0;
}

.tech-table .col-addition {
    width: 549px;
    padding-left: 0;
}

.tech-table tbody td {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    color: #272727;
    padding: 10px 20px;
    border-bottom: 1px solid #C3C4C6;
    vertical-align: middle;
    height: 44px;
    box-sizing: border-box;
}

.tech-table tbody tr:last-child td {
    border-bottom: 1px solid #C3C4C6;
}

.tech-table tbody tr:nth-child(2) .td-category,
.tech-table tbody tr:nth-child(2) .td-existing {
    border-bottom: 1px solid #C3C4C6;
}

.tech-table tbody tr:nth-child(3) .td-addition {
    border-bottom: 1px solid #C3C4C6;
}

.tech-table .td-category {
    font-weight: 700;
    color: #3270AA;
    text-align: left;
    padding-left: 20px;
}

.tech-table .td-existing {
    text-align: left;
    padding-left: 0;
}

.tech-table .td-addition {
    text-align: left;
    padding-left: 0;
}

.tech-table .cell-content {
    display: flex;
    align-items: center;
}

.tech-table .cell-content .count {
    flex-shrink: 0;
    min-width: 30px;
    text-align: right;
    margin-right: 49px;
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    color: #272727;
}

.tech-table .cell-content .content {
    flex: 1;
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    color: #272727;
}

.tech-table .count {
    display: inline-block;
    min-width: 30px;
    text-align: right;
    margin-right: 49px;
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    color: #272727;
}

.tech-table .content {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    color: #272727;
}

.tech-table .content.multiline {
    display: inline;
}

.table-note {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #323232;
    margin: 8px 0 0 0;
}

/* Subsection Titles */
.subsection-title {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    color: #3270AA;
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.title-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #BABD42;
    flex-shrink: 0;
}

.subtitle-text {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    color: #3270AA;
}

.count-badge {
    font-size: 14px;
    font-weight: 500;
    color: #1565C0;
    background: #E3F2FD;
    padding: 4px 12px;
    border-radius: 12px;
}

/* Materials and Process Wrapper - 좌우 배치 */
.materials-process-wrapper {
    display: flex;
    gap: 85px;
    align-items: flex-start;
    margin-bottom: 80px;
}

/* Materials Grid (소재 다원화) */
.materials-section {
    flex-shrink: 0;
}

.materials-grid {
    display: grid;
    grid-template-columns: repeat(2, 272px);
    gap: 28px 28px;
    row-gap: 104px;
    margin-bottom: 0;
}

.material-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.material-image {
    width: 272px;
    height: 202px;
    background: #F5F5F5;
    border: 1px solid #E0E0E0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.material-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.material-name {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    color: #323232;
    margin: 0;
    text-align: center;
}

/* Process Section */
.process-section {
    flex: 1;
}

.process-category {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: #272727;
    margin-bottom: 24px;
    margin-top: 40px;
}

.process-category.intelligence {
    margin-top: 80px;
}

.process-count {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: #272727;
}

/* Process Dual Grid Container (소재 다원화 기반 뿌리기술 확장) */
.process-dual-grid {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 40px;
}

/* 기존 6개 그리드 (3x2) */
.process-base-grid {
    display: grid;
    grid-template-columns: repeat(2, 172px);
    grid-template-rows: repeat(3, auto);
    gap: 24px;
    row-gap: 52px;
}


.add-icon-box {
    width: 85px;
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 추가 4개 그리드 (2x2) */
.process-additional-grid {
    display: grid;
    grid-template-columns: repeat(2, 231px);
    grid-template-rows: repeat(2, auto);
    gap: 31px;
    row-gap: 62px;
}

.process-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.process-image.base {
    width: 172px;
    height: 114px;
    background: #F5F5F5;
    border: 1px solid #E0E0E0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.process-image.base img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.process-image.additional {
    width: 231px;
    height: 153px;
    background: #F5F5F5;
    border: 1px solid #E0E0E0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.process-image.additional img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.process-name {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    color: #323232;
    margin: 0;
    text-align: center;
}

/* Process Grid Intelligence (지능화 공정기술) */
.process-intelligence-grid {
    display: grid;
    grid-template-columns: repeat(4, 223px);
    grid-template-rows: repeat(2, auto);
    gap: 31px;
    row-gap: 62px;
    margin-bottom: 40px;
}

.process-image.intelligence {
    width: 223px;
    height: 148px;
    background: #F5F5F5;
    border: 1px solid #E0E0E0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.process-image.intelligence img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* New Industry Section (신산업 필수 활용 기술) */
.new-industry-section {
    margin-top: 80px;
    margin-bottom: 80px;
}

.new-industry-grid {
    display: grid;
    grid-template-columns: repeat(2, 633px);
    gap: 120px;
}

.industry-item {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.industry-title {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    color: #3270AA;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.industry-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #BABD42;
    flex-shrink: 0;
}

.industry-image {
    width: 633px;
    height: 474px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.industry-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Tech Details Section (상세 기술 항목) */
.tech-details-section {
    margin-top: 80px;
    margin-bottom: 80px;
}

.tech-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(auto, 700px));
    column-gap: 40px;
}

.tech-column {
    display: flex;
    flex-direction: column;
    gap: 82px;
}

.tech-detail-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tech-icon-wrapper {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
    margin-bottom: 24px;
}

.tech-icon-bg {
    width: 195px;
    height: 195px;
    background: #E5F1FA;
    border: 1px solid #3270AA;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tech-icon-image {
    width: 195px;
    height: 195px;
    background: #F5F5F5;
    border: 1px solid #BCCEDC;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tech-icon-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tech-text-wrapper {
    display: flex;
    flex-direction: column;
    padding-left: 220px;
}

.tech-item-title {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    color: #3270AA;
    margin: 0;
    text-align: center;
    padding: 0 20px;
    word-break: keep-all;
}

.tech-item-processes {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    color: #272727;
    margin: 0;
}

/* Definition Section (뿌리산업 정의) */
.definition-section {
    margin-top: 80px;
    margin-bottom: 80px;
}

.definition-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.definition-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.definition-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3270AA;
    flex-shrink: 0;
    margin-top: 12px;
}

.definition-text {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    color: #272727;
    margin: 0;
    flex: 1;
}

/* 기반공정기술 섹션 */
.base-tech-section {
    margin-top: 80px;
}

.base-tech-grid {
    display: grid;
    grid-template-columns: repeat(2, 800px);
    column-gap: 40px;
    row-gap: 40px;
}

.base-tech-card {
    width: 800px;
    min-height: 176px;
    display: flex;
    border: 1px solid #3270AA;
    box-sizing: border-box;
}

.tech-card-content {
    word-spacing: -2px;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 24px 24px 24px 24px;
    gap: 16px;
    min-height: 176px;
}

.tech-card-label {
    width: 150px;
    min-height: 176px;
    background: #E5F1FA;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tech-card-title {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    text-align: center;
    color: #3270AA;
    margin: 0;
}

.tech-card-desc {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 550;
    font-size: 18px;
    line-height: 28px;
    color: #3270AA;
    margin: 0;
}

.tech-items-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
}

.tech-items-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
}

.tech-item {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 24px;
    color: #323232;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tech-item::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #3270AA;
    border-radius: 50%;
    flex-shrink: 0;
}

/* 섹션별 tech-card-label 배경색 */
/* 기반공정기술 - 파란색 계열 */
.tech-section-base .tech-card-label {
    background: #E5F1FA;
}

/* 소재다원화 공정기술 - 녹색 계열 */
.tech-section-material .tech-card-label {
    background: #EDFAE5;
}

/* 지능화 공정기술 - 보라색 계열 */
.tech-section-intelligence .tech-card-label {
    background: #E9E5FA;
}

.base-tech-column {
    display: grid;
    gap: 40px;
}