/* ======================================== */
/* Gas Blocks 폰트 통일 및 이미지 여백 */
/* 모바일과 PC 모두에 적용 */
/* ======================================== */

/* ======================================== */
/* 폰트 통일 - 기준 텍스트와 동일하게 맞춤 */
/* ======================================== */

/* 대상 텍스트를 기준 텍스트와 동일한 스타일로 통일 - 최고 특이성 */
html body .section.bg-light .container .detailed-content p {
    font-size: 0.9rem !important; /* 0.9rem으로 고정 */
    line-height: var(--gas-blocks-line-height-relaxed) !important; /* 기준 텍스트와 동일 */
    color: var(--text-primary) !important; /* 기준 텍스트와 동일 */
    margin-bottom: 10px !important; /* 줄 간격 10px 추가 */
    font-weight: 400 !important; /* 기준 텍스트와 동일 */
    letter-spacing: var(--gas-blocks-letter-spacing-normal) !important; /* 기준 텍스트와 동일 */
    padding: 0 !important; /* 기준 텍스트와 동일 (padding 제거) */
}

/* detailed-content div 좌우 패딩 추가 */
html body .section.bg-light .container .detailed-content > div {
    padding: 0 10px !important; /* 좌우 10px 패딩 */
}

/* 문장 앞 가운데 점을 파란색으로 변경 */
html body .section.bg-light .container .detailed-content > div p {
    color: var(--text-primary) !important;
}

html body .section.bg-light .container .detailed-content > div p::before {
    content: "•" !important;
    color: #003d7a !important; /* 진한 파란색 */
    margin-right: 8px !important;
}

html body .section.bg-light .container .detailed-content > div p {
    text-indent: -1em !important;
    padding-left: 1em !important;
}

/* 추가 보장 - 더 구체적인 선택자 */
html body .detail-page .section.bg-light .container .detailed-content p {
    font-size: 0.9rem !important; /* 0.9rem으로 고정 */
    line-height: var(--gas-blocks-line-height-relaxed) !important;
    color: var(--text-primary) !important;
    margin-bottom: 10px !important; /* 줄 간격 10px 추가 */
    font-weight: 400 !important;
    letter-spacing: var(--gas-blocks-letter-spacing-normal) !important;
    padding: 0 !important;
}

/* detailed-content div 좌우 패딩 추가 */
html body .detail-page .section.bg-light .container .detailed-content > div {
    padding: 0 10px !important; /* 좌우 10px 패딩 */
}

/* 문장 앞 가운데 점을 파란색으로 변경 */
html body .detail-page .section.bg-light .container .detailed-content > div p {
    color: var(--text-primary) !important;
}

html body .detail-page .section.bg-light .container .detailed-content > div p::before {
    content: "•" !important;
    color: #003d7a !important; /* 진한 파란색 */
    margin-right: 8px !important;
}

html body .detail-page .section.bg-light .container .detailed-content > div p {
    text-indent: -1em !important;
    padding-left: 1em !important;
}

/* 모바일에서도 동일하게 적용 */
@media (max-width: 768px) {
    html body .section.bg-light .container .detailed-content p,
    html body .detail-page .section.bg-light .container .detailed-content p {
        font-size: 0.9rem !important; /* 0.9rem으로 고정 */
        line-height: var(--gas-blocks-line-height-relaxed) !important;
        color: var(--text-primary) !important;
        margin-bottom: 10px !important; /* 줄 간격 10px 추가 */
        font-weight: 400 !important;
        letter-spacing: var(--gas-blocks-letter-spacing-normal) !important;
        padding: 0 !important;
    }
    
    /* detailed-content div 좌우 패딩 추가 */
    html body .section.bg-light .container .detailed-content > div,
    html body .detail-page .section.bg-light .container .detailed-content > div {
        padding: 0 10px !important; /* 좌우 10px 패딩 */
    }
    
    /* 문장 앞 가운데 점을 파란색으로 변경 */
    html body .section.bg-light .container .detailed-content > div p,
    html body .detail-page .section.bg-light .container .detailed-content > div p {
        color: var(--text-primary) !important;
    }
    
    html body .section.bg-light .container .detailed-content > div p::before,
    html body .detail-page .section.bg-light .container .detailed-content > div p::before {
        content: "•" !important;
        color: #003d7a !important; /* 진한 파란색 */
        margin-right: 8px !important;
    }
    
    html body .section.bg-light .container .detailed-content > div p,
    html body .detail-page .section.bg-light .container .detailed-content > div p {
        text-indent: -1em !important;
        padding-left: 1em !important;
    }
}

/* PC에서도 동일하게 적용 */
@media (min-width: 1025px) {
    html body .section.bg-light .container .detailed-content p,
    html body .detail-page .section.bg-light .container .detailed-content p {
        font-size: 0.9rem !important; /* 0.9rem으로 고정 */
        line-height: var(--gas-blocks-line-height-relaxed) !important;
        color: var(--text-primary) !important;
        margin-bottom: 10px !important; /* 줄 간격 10px 추가 */
        font-weight: 400 !important;
        letter-spacing: var(--gas-blocks-letter-spacing-normal) !important;
        padding: 0 !important;
    }
    
    /* detailed-content div 좌우 패딩 추가 */
    html body .section.bg-light .container .detailed-content > div,
    html body .detail-page .section.bg-light .container .detailed-content > div {
        padding: 0 10px !important; /* 좌우 10px 패딩 */
    }
    
    /* 문장 앞 가운데 점을 파란색으로 변경 */
    html body .section.bg-light .container .detailed-content > div p,
    html body .detail-page .section.bg-light .container .detailed-content > div p {
        color: var(--text-primary) !important;
    }
    
    html body .section.bg-light .container .detailed-content > div p::before,
    html body .detail-page .section.bg-light .container .detailed-content > div p::before {
        content: "•" !important;
        color: #003d7a !important; /* 진한 파란색 */
        margin-right: 8px !important;
    }
    
    html body .section.bg-light .container .detailed-content > div p,
    html body .detail-page .section.bg-light .container .detailed-content > div p {
        text-indent: -1em !important;
        padding-left: 1em !important;
    }
}

/* ======================================== */
/* 이미지 카드 하단 여백 추가 */
/* ======================================== */

/* Block 이미지 카드 하단 여백 추가 */
.block-image {
    margin-bottom: 10px !important; /* 하단 여백 10px 추가 */
}

/* Geological 이미지 카드 하단 여백 추가 */
.geological-image {
    margin-bottom: 10px !important; /* 하단 여백 10px 추가 */
}

/* Detailed 이미지 카드 상하 여백 추가 및 좌우 정렬 */
.detailed-image {
    margin-top: 25px !important; /* 상단 여백 25px 추가 */
    margin-bottom: 25px !important; /* 하단 여백 25px 추가 */
    text-align: center !important; /* 이미지 중앙 정렬 */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.detailed-image img {
    max-width: calc(100vw - 40px) !important;
    width: calc(100vw - 40px) !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* ======================================== */
/* 모바일 반응형 - 이미지 카드 하단 여백 */
/* ======================================== */
@media (max-width: 768px) {
    /* 모바일에서도 이미지 카드 하단 여백 유지 */
    .block-image {
        margin-bottom: 10px !important;
    }
    
    .geological-image {
        margin-bottom: 10px !important;
    }
    
    .detailed-image {
        margin-top: 25px !important; /* 상단 여백 25px 추가 */
        margin-bottom: 25px !important; /* 하단 여백 25px 추가 */
        text-align: center !important; /* 이미지 중앙 정렬 */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .detailed-image img {
        max-width: calc(100vw - 40px) !important;
        width: calc(100vw - 40px) !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }
}

/* ======================================== */
/* PC 반응형 - 이미지 카드 하단 여백 */
/* ======================================== */
@media (min-width: 1024px) {
    /* PC에서도 이미지 카드 하단 여백 유지 */
    .block-image {
        margin-bottom: 10px !important;
    }
    
    .geological-image {
        margin-bottom: 10px !important;
    }
    
    .detailed-image {
        margin-top: 25px !important; /* 상단 여백 25px 추가 */
        margin-bottom: 25px !important; /* 하단 여백 25px 추가 */
        text-align: center !important; /* 이미지 중앙 정렬 */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .detailed-image img {
        max-width: calc(100vw - 40px) !important;
        width: calc(100vw - 40px) !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }
}

/* ======================================== */
/* Detailed List 폰트 사이즈 5% 증가 */
/* ======================================== */

/* Detailed List 아이템들의 폰트 사이즈를 5% 증가 - 최고 특이성 */
html body .section.bg-light .container .detailed-content .detailed-list li {
    font-size: clamp(1.18125rem, 2.625vw, 1.3125rem) !important; /* 5% 증가 */
    line-height: var(--gas-blocks-line-height-relaxed) !important;
    color: var(--text-primary) !important;
    font-weight: 400 !important;
    letter-spacing: var(--gas-blocks-letter-spacing-normal) !important;
}

/* 추가 보장 - 더 구체적인 선택자 */
html body .detail-page .section.bg-light .container .detailed-content .detailed-list li {
    font-size: clamp(1.18125rem, 2.625vw, 1.3125rem) !important; /* 5% 증가 */
    line-height: var(--gas-blocks-line-height-relaxed) !important;
    color: var(--text-primary) !important;
    font-weight: 400 !important;
    letter-spacing: var(--gas-blocks-letter-spacing-normal) !important;
}

/* 모바일에서도 동일하게 적용 */
@media (max-width: 768px) {
    html body .section.bg-light .container .detailed-content .detailed-list li,
    html body .detail-page .section.bg-light .container .detailed-content .detailed-list li {
        font-size: clamp(1.18125rem, 2.625vw, 1.3125rem) !important; /* 5% 증가 */
        line-height: var(--gas-blocks-line-height-relaxed) !important;
        color: var(--text-primary) !important;
        font-weight: 400 !important;
        letter-spacing: var(--gas-blocks-letter-spacing-normal) !important;
    }
}

/* PC에서도 동일하게 적용 */
@media (min-width: 1025px) {
    html body .section.bg-light .container .detailed-content .detailed-list li,
    html body .detail-page .section.bg-light .container .detailed-content .detailed-list li {
        font-size: clamp(1.18125rem, 2.625vw, 1.3125rem) !important; /* 5% 증가 */
        line-height: var(--gas-blocks-line-height-relaxed) !important;
        color: var(--text-primary) !important;
        font-weight: 400 !important;
        letter-spacing: var(--gas-blocks-letter-spacing-normal) !important;
    }
}

/* ======================================== */
/* 추가 보장을 위한 높은 특이성 */
/* ======================================== */

/* 최고 특이성으로 확실하게 적용 */
html body .detailed-content p {
    font-size: 0.9rem !important; /* 0.9rem으로 고정 */
    line-height: var(--gas-blocks-line-height-relaxed) !important;
    color: var(--text-primary) !important;
    margin-bottom: 10px !important; /* 줄 간격 10px 추가 */
    font-weight: 400 !important;
    letter-spacing: var(--gas-blocks-letter-spacing-normal) !important;
    padding: 0 !important;
}

/* detailed-content div 좌우 패딩 추가 - 최고 특이성 */
html body .detailed-content > div {
    padding: 0 10px !important; /* 좌우 10px 패딩 */
}

/* 문장 앞 가운데 점을 파란색으로 변경 - 최고 특이성 */
html body .detailed-content > div p {
    color: var(--text-primary) !important;
}

html body .detailed-content > div p::before {
    content: "•" !important;
    color: #003d7a !important; /* 진한 파란색 */
    margin-right: 8px !important;
}

html body .detailed-content > div p {
    text-indent: -1em !important;
    padding-left: 1em !important;
}

/* 최고 특이성으로 이미지 여백 및 정렬 확실하게 적용 */
html body .block-image,
html body .geological-image,
html body .detailed-image {
    margin-bottom: 10px !important;
}

html body .detailed-image {
    margin-top: 25px !important; /* 상단 여백 25px 추가 */
    margin-bottom: 25px !important; /* 하단 여백 25px 추가 */
    text-align: center !important; /* 이미지 중앙 정렬 */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

html body .detailed-image img {
    max-width: calc(100vw - 40px) !important;
    width: calc(100vw - 40px) !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* ======================================== */
/* Gas Blocks 페이지 본문 텍스트 About Us 스타일 통일 */
/* ======================================== */

/* ULTIMATE SPECIFICITY - 모든 본문 텍스트 About Us 스타일 적용 */
html body.detail-page .card-content p,
html body.detail-page .block-details p,
html body.detail-page .geological-content p,
html body.detail-page .detailed-content p,
html body.detail-page .geological-subsection p,
html body.detail-page .geological-list li,
html body.detail-page .detailed-list li {
    font-size: 0.9rem !important; /* 0.9rem으로 고정 */
    line-height: 1.6 !important; /* About Us와 동일한 줄 간격 */
    letter-spacing: 0 !important; /* About Us와 동일한 글자 간격 */
    font-weight: 400 !important; /* About Us와 동일한 폰트 굵기 */
    color: var(--text-primary) !important; /* About Us와 동일한 텍스트 색상 */
    margin-bottom: 10px !important; /* 줄 간격 10px 추가 */
}

/* 모바일에서도 동일하게 적용 */
@media (max-width: 768px) {
    html body.detail-page .card-content p,
    html body.detail-page .block-details p,
    html body.detail-page .geological-content p,
    html body.detail-page .detailed-content p,
    html body.detail-page .geological-subsection p,
    html body.detail-page .geological-list li,
    html body.detail-page .detailed-list li {
        font-size: 0.9rem !important; /* 0.9rem으로 고정 */
        line-height: 1.6 !important; /* About Us와 동일한 줄 간격 */
        letter-spacing: 0 !important; /* About Us와 동일한 글자 간격 */
        font-weight: 400 !important; /* About Us와 동일한 폰트 굵기 */
        color: var(--text-primary) !important; /* About Us와 동일한 텍스트 색상 */
        margin-bottom: 10px !important; /* 줄 간격 10px 추가 */
    }
}

/* 데스크톱에서도 동일하게 적용 */
@media (min-width: 1025px) {
    html body.detail-page .card-content p,
    html body.detail-page .block-details p,
    html body.detail-page .geological-content p,
    html body.detail-page .detailed-content p,
    html body.detail-page .geological-subsection p,
    html body.detail-page .geological-list li,
    html body.detail-page .detailed-list li {
        font-size: 0.9rem !important; /* 0.9rem으로 고정 */
        line-height: 1.6 !important; /* About Us와 동일한 줄 간격 */
        letter-spacing: 0 !important; /* About Us와 동일한 글자 간격 */
        font-weight: 400 !important; /* About Us와 동일한 폰트 굵기 */
        color: var(--text-primary) !important; /* About Us와 동일한 텍스트 색상 */
        margin-bottom: 10px !important; /* 줄 간격 10px 추가 */
    }
}

/* ======================================== */
/* Overview 섹션 텍스트 박스 파란색 배경 */
/* ======================================== */

/* ULTIMATE SPECIFICITY - Overview Text About Us Style (Image Analysis Applied) */
html body.detail-page section#overview .container .content-card .card-content p {
    background: white !important; /* About Us와 동일한 흰색 배경 */
    color: var(--text-primary) !important; /* About Us와 동일한 회색 텍스트 */
    font-size: clamp(1rem, 2.5vw, 1.125rem) !important; /* About Us와 동일한 폰트 크기 */
    line-height: 1.6 !important; /* About Us와 동일한 줄 간격 */
    letter-spacing: 0 !important; /* About Us와 동일한 글자 간격 */
    font-weight: 400 !important; /* About Us와 동일한 폰트 굵기 */
    padding: var(--spacing-6) 0 !important; /* 좌우 패딩 0 */
    border-radius: 0 !important; /* 테두리 둥글기 제거 */
    border: none !important; /* 테두리 제거 */
    margin-left: 0 !important; /* 좌측 마진 0 */
    margin-right: 0 !important; /* 우측 마진 0 */
    box-shadow: none !important; /* 그림자 제거 */
}

/* 모바일에서도 동일하게 적용 */
@media (max-width: 768px) {
    html body.detail-page section#overview .container .content-card .card-content p {
        background: white !important; /* About Us와 동일한 흰색 배경 */
        color: var(--text-primary) !important; /* About Us와 동일한 회색 텍스트 */
        font-size: clamp(1rem, 2.5vw, 1.125rem) !important; /* About Us와 동일한 폰트 크기 */
        line-height: 1.6 !important; /* About Us와 동일한 줄 간격 */
        letter-spacing: 0 !important; /* About Us와 동일한 글자 간격 */
        font-weight: 400 !important; /* About Us와 동일한 폰트 굵기 */
        padding: var(--spacing-4) 0 !important; /* 모바일에서 좌우 패딩 0 */
        border-radius: 0 !important; /* 테두리 둥글기 제거 */
        border: none !important; /* 테두리 제거 */
        margin-left: 0 !important; /* 좌측 마진 0 */
        margin-right: 0 !important; /* 우측 마진 0 */
        box-shadow: none !important; /* 그림자 제거 */
    }
}

/* 데스크톱에서도 동일하게 적용 */
@media (min-width: 1025px) {
    html body.detail-page section#overview .container .content-card .card-content p {
        background: white !important; /* About Us와 동일한 흰색 배경 */
        color: var(--text-primary) !important; /* About Us와 동일한 회색 텍스트 */
        font-size: clamp(1rem, 2.5vw, 1.125rem) !important; /* About Us와 동일한 폰트 크기 */
        line-height: 1.6 !important; /* About Us와 동일한 줄 간격 */
        letter-spacing: 0 !important; /* About Us와 동일한 글자 간격 */
        font-weight: 400 !important; /* About Us와 동일한 폰트 굵기 */
        padding: var(--spacing-6) 0 !important; /* 데스크톱에서 좌우 패딩 0 */
        border-radius: 0 !important; /* 테두리 둥글기 제거 */
        border: none !important; /* 테두리 제거 */
        margin-left: 0 !important; /* 좌측 마진 0 */
        margin-right: 0 !important; /* 우측 마진 0 */
        box-shadow: none !important; /* 그림자 제거 */
    }
}