body {
    font-family: 'Malgun Gothic', Arial, sans-serif; /* 폰트 우선 순위 */
    line-height: 1.6; /* 1.6으로 읽기 좋은 줄 간격 */
    margin: 20px; /* 바깥쪽 여백을 줘서 텍스트가 화면에 딱 붙지 않게 */
    max-width: 600px; /* 가독성을 위해 텍스트가 너무 넓어지지 않게 최대 너비 제한 */
}

h1, h2 {
    color: #333;
    margin-top: 40px;
}

ul {
    list-style-type: disc; /* bullet 표시 */
    list-style-type: disc; /* bullet 표시 */
    padding-left: 30px; /* 들여쓰기 조정 */
}
li {
    margin-bottom: 10px;
}


/* 단락 */

.word-breaker { /* <p class="word-break"> 단어 단위</p> */
  word-break: keep-all;  /* 단어 단위 줄바꿈 (한글 포함) */
  overflow-wrap: break-word; /* 긴 단어 잘라서 줄바꿈 허용 */
  white-space: normal; /* 기본 줄바꿈 허용 */
}
    /* 모든 요소에 적용 */
    /* 예:
        <div class="word-breaker">...</div>
        <p class="word-breaker">...</p>
        <span class="word-breaker">...</span> */
 

p.left1 { /* <p class="left1"> */
    padding-left: 1.5em;
}
p.left2 { /* <p class="left2"> */
    padding-left: 2.5em;
}
p.left3 { /* <p class="left3"> */
    padding-left: 3.5em;
}

p.indent {  /* <p class="indent"> */
    text-indent: 2em;
}
p.indent1 {  /* <p class="indent"> */
    text-indent: 2em;
    padding-left: 1.5em;
}

p.hang1 { /* <p class="hang1"> */
    text-indent: -1.5em;
    padding-left: 1.5em;
}
p.hang2 { /* <p class="hang2"> */
    text-indent: -1.5em;
    padding-left: 2.5em;
}
p.hang3 { /* <p class="hang3"> */
    text-indent: -1.5em;
    padding-left: 3.5em;
}


    /* p에만 적용 */
    /* 예:
        <div class="word-breaker">...</div>    X
        <p class="word-breaker">...</p>        O
        <span class="word-breaker">...</span>  X */



p.outdent { /* <p class="outdent"> */
    text-indent: -1.5em;
    padding-left: 1.5em;
}
p.outdent1 { /* <p class="outdent1"> */
    text-indent: -1.5em;
    padding-left: 2.5em;
}
p.outdent2 { /* <p class="outdent2"> */
    text-indent: -1.5em;
    padding-left: 3.5em;
}



/* 하이라이트 */
.highlight {
 /* 예시: <span class="highlight">문장</span> */
    background-color: #fffd75;
    padding: 0 4px;
    border-radius: 4px;
}

.highlight-red {
    color: red;
    font-weight: bold;
}
.highlight-blue {
    color: blue;
    font-weight: bold;
}

.red {
    color: red;
}
.blue {
    color: blue;
}



/* 테이블 */
table {
    width: 100%; /* 테이블 너비 지정 (선택사항) */
    border-collapse: collapse; /* 테두리 겹침 방지 */
    overflow-x: auto; /* 반응형 */
    margin: 20px 0;
}
th, td { 
    border: 1px solid black;
    padding: 10px;
    text-align: left;
    word-break: break-word; /* 너무 많은 내용이 들어가는 셀은 줄바꿈 허용 */
}

th {  /* 헤더(th) */
    background-color: #f2f2f2;
    text-align: center; /* 헤더만 중앙 정렬 */
}

td {  /* 데이터 셀은 왼쪽 정렬 (가독성 확보) */
    text-align: left;
}

td:first-child { /* 첫 번째 열(구분)만 다시 중앙 정렬 */
    text-align: center;
}


.center-table th, .center-table td {
    text-align: center;
}

.center-table caption {
    text-align: left;
}


/* 코드 */
code {
    font-family: "Courier New", "Consolas", monospace;
}

pre { /* preformatted */
    white-space: pre-wrap; /* 텍스트 자동 줄바꿈 */
    word-wrap: break-word; /* 긴 단어도 줄바꿈 가능 */
    background-color: #f4f4f4;
    padding: 10px;
    border-radius: 5px;
    overflow-x: auto;
}


/* 이미지 */
img {
    /* 모든 <img> 태그에 적용됨 
       기본 이미지 스타일을 지정함 
        예: 
            <h2>기본 이미지 (img 태그만 사용)</h2> 
            <img src="https:..." alt="기본 이미지"> */

    max-width: 100%;
    height: auto;
    display: block;
    margin-top: 10px;
}

.image { 
    /* 그림과 캡션을 중앙 정렬
       이미지 + 캡션을 감싸는 컨테이너 "클래스"에 적용 
        예: 
            <h2>중앙 정렬된 이미지 + 캡션 (.image 사용)</h2>
            <figure class="image">
                <img src="https://..." alt="스타일 이미지">
                <figcaption class="caption">...</figcaption>
            </figure> */

    display: flex;
    flex-direction: column; /* 이미지와 캡션을 세로로 배치 */
    align-items: center; /* 가로 방향 중앙 정렬 */
    justify-content: center;
    text-align: center; /* 텍스트 중앙 정렬 */
    margin: 20px auto; /* 상하 여백 추가 */
    width: 100%;
}


.image img {  
    /* 이미지 스타일 
       .image 클래스 안의 <img> 요소 전용 스타일 
       기본 img보다 좀 더 "안쪽에서 조정"하는 스타일
        예: 
            <h2>중앙 정렬된 이미지 + 캡션 (.image 사용)</h2>
            <figure class="image">
                <img src="https://..." alt="스타일 이미지">
                <figcaption class="caption">...</figcaption>
            </figure> */

    max-width: 80%; /* 이미지 크기 조절 가능 */
    height: auto;
    display: block;
    margin: 0 auto;
}

.caption {   
    /* 캡션 스타일 
        예: 
            <h2>중앙 정렬된 이미지 + 캡션 (.image 사용)</h2>
            <figure class="image">
                <img src="https://..." alt="스타일 이미지">
                <figcaption class="caption">...</figcaption>
            </figure> */

    font-size: 13px;
    margin-top: 5px; /* 이미지와 캡션 간격 조정 */
    color: #555; /* 캡션 색상 변경 */
    text-align: center;
}

/* 수식 
        <div class="box-formula">
            <strong>정적 주동토압:</strong><br>
            \[ P_A = \frac{1}{2} \gamma H^2 K_A \]<br>
            \[ K_A = \tan^2(45° - \frac{\phi}{2})   \qquad  \text{(Rankine)} \] 
        </div>
*/

.box-formula {
    background-color: #f9f9f9;
    border-left: 4px solid #2196F3;
    padding: 15px;
    margin: 15px 0;
    font-family: 'Courier New', monospace;
}

.box-standard {
    background-color: #f9f9f9;
    border-left: 4px solid #2196F3;
    padding: 15px;
    margin: 15px 0;
    font-family: 'Malgun Gothic', monospace;
    word-break: keep-all;  /* 단어 단위 줄바꿈 (한글 포함) */
}

/* 버튼 */

.btn-link {
    display: inline-block;
    margin-top: 10px;         /* 버튼 상단 바깥 여백 */
    padding: 1px 2px;       /* 상하 여백 */
    background: #1e3c72;      /* 진청색 배경 */
    color: #ffffff !important; /* 글자색 흰색 강제 적용 */
    text-decoration: none;
    border-radius: 5px;

    /* 가독성 및 줄 간격 */
    line-height: 1.5;         /* 줄 간격을 1.5배(약 24px)로 설정하여 가독성 확보 */

    /* 단어 잘림 방지 핵심 설정 */
    word-break: keep-all;      /* 한글 단어가 중간에 잘리지 않게 함 */
    overflow-wrap: break-word; /* 아주 긴 단어의 경우 영역 밖으로 나가는 것 방지 */
    text-align: center;        /* 줄바꿈 시 글자들을 중앙으로 정렬 */
}

.btn-link:hover {
    /* 마우스를 올렸을 때 (Hover) */
    background: #2a5298;      /* 약간 더 밝은 청색 */
    color: #ffffff !important;
    text-decoration: none;
    transform: translateY(-1px); /* 살짝 떠오르는 효과 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 입체감 추가 */
}


.btn-link-red {
    display: inline-block;
    margin-top: 5px;         /* 버튼 상단 바깥 여백 */
    padding: 0px 2px;         /* 상하 여백 */
    background: #ffe5e5;         /* 배경 제거 */
    text-decoration: none;
    border-radius: 5px;

    /* 가독성 및 줄 간격 */
    line-height: 1.5;

    /* 단어 잘림 방지 */
    word-break: keep-all;
    overflow-wrap: break-word;
    text-align: center;
}

.btn-link-red:hover {
    /* 마우스를 올렸을 때 */
    background: #ffcc66;          /* 연한 진홍색 배경 */
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-color: #a00000;
}