/* =================================
  Subpage 4 ('Field 1') Styles
  (Based on Design 5.jpg)
  ================================= */

/* 시안(5.jpg)의 소제목 스타일 */
.article-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 60px; /* 각 섹션 상단 여백 */
    margin-bottom: 25px;
    color: #333;
}

/* 첫 번째 소제목은 상단 여백 제거 */
.sub-content .article-title:first-of-type {
    margin-top: 0;
}

/* 시안(5.jpg)의 회색 정보 박스 */
.content-box {
    background-color: #f8f8f8; /* var(--light-gray-bg)와 유사한 연회색 */
    border-radius: 8px;
    padding: 30px 35px;
    margin-top: 25px; /* 소제목과의 간격 */
}

/* 회색 박스 안의 본문 텍스트 (소개글) */
.content-box p {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 30px; /* 목록과의 간격 */
}
.content-box p:last-child {
    margin-bottom: 0;
}

/* 시안(5.jpg)의 '파란색 점' 목록 스타일 */
.dot-list-blue {
    list-style-type: none;
    padding-left: 0;
    margin: 0; /* content-box의 padding으로 간격 조절 */
}

.dot-list-blue li {
    position: relative;
    padding-left: 1.2em;
    font-size: 1.1rem;
    color: #555;
    line-height: 1.8;
    margin-bottom: 10px;
}

.dot-list-blue li:last-child {
    margin-bottom: 0;
}

.dot-list-blue li::before {
    content: '·';
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    color: #4A90E2; /* 시안의 파란색 점 */
}