/*******************************************************/
/******************** 범용 콘텐츠 박스 *******************/
/*******************************************************/

.content-box {
    background: white; border-radius: 25px; padding: 25px 20px; margin-bottom: 20px;
    display: flex; flex-direction: column; gap: 10px;
    border: none; font-weight: 400; font-size: var(--fs-18); line-height: 1.6;
}
.content-box.centered, .content-box.centered * { text-align: center !important; }
.content-box-item { position: relative; padding-left: 15px; }
.content-box-item::before { content: "•"; position: absolute; left: 0; }
.content-box-label { font-weight: 700; margin-bottom: 5px; display: block; color: #333; text-align: left; }


/*********************************************************/
/******** 다중 콘텐츠 박스  (contentBox 2개 이상 시) *********/
/*********************************************************/

.content-box.multi-prev, 
.example-box-container.multi-prev {
    margin-bottom: 0 !important;
    border-bottom: 1px solid #E6E6E6 !important;
}

/* <보기> 박스가 다중 그룹의 중간이나 끝에 올 경우, 위 박스와 붙기 위해 상단 마진 제거 */
.example-box-container.multi-last {
    margin-top: 0 !important;
    padding-top: 20px; /* 라벨이 없으므로 상단 패딩 살짝 조정 */
}

/* 다중 박스 중 첫 번째가 아닌 <보기> 박스는 상단 라벨을 숨기거나 위치 조정 */
.example-box-container.multi-last .example-box-label { display: none; }


/*********************************************************/
/******** <보기> (example-box) - 텍스트형 기호(ㄱ) **********/
/*********************************************************/

.example-mark.plain {
    background-color: transparent !important;
    border: none !important;
    width: auto !important;
    /*min-width: 25px; /* (10) 처럼 두 자릿수가 되어도 정렬이 깨지지 않게 최소 폭 확보 */
    height: auto !important;
    margin-top: 2px !important;
    line-height: 1.6;
    font-family: 'NanumSquareRound', serif !important;
    font-size: var(--fs-18);
    text-align: left;
    font-weight: 400 !important;
}


/*********************************************************/
/******** <보기> (example-box) - 라벨박스형 기호(ㄱ) ********/
/*********************************************************/

.example-box-container {
    position: relative;    
    border-radius: 25px;
    background-color: #fff;
    padding: 30px 20px 25px;
    margin: 18px 0 20px 0;
    font-family: 'Noto Serif KR', serif !important;
}

/* 상태별 상단 마진 분기 */

/* 중발문 유무에 따른 마진 */
.example-box-container[data-has-title="true"] { margin-top: 34px; }
.example-box-container[data-has-title="false"] { margin-top: 20px; }

/* 리포트 화면일 때의 마진 */
.example-box-container[data-is-report="true"][data-has-title="true"] { margin-top: 34px; }
.example-box-container[data-is-report="true"][data-has-title="false"] { margin-top: 40px; }

/* 2단 레이아웃 때의 마진 보정 */
@media (min-width: 700px) {
    .example-box-container[data-has-title="true"] { margin-top: 18px; }
    .example-box-container[data-has-title="false"] { margin-top: 20px; }
}

/*
@media screen and (min-width: 700px) {
    .example-box-container {
        margin-top: 22px; /* 2단일 때 상단 마진 22px로 보정 
    }
} */

.example-box-label {
    position: absolute;
    background-color: #fff;
    top: 0;
    left: 50%;
    /*border: 1px solid #E6E6E6;*/
    border-radius: 15px;    
    box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
    transform: translate(-50%, -50%);
    padding: 2px 20px;
    z-index: 2;
}

.example-box-label span {
    display: inline-block;
    padding: 2px 12px;
    font-size: var(--fs-18);
    font-weight: 700;
    color: #000;
    white-space: nowrap;
}

.example-box-content { 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
}

.example-item { 
    display: flex; 
    align-items: flex-start; 
    gap: 7px; 
}

/* 기호 영역 (ㄱ., ㄴ. 등) */
.example-mark {
    width: 22px; height: 22px; 
    background-color: #C6EFFF; 
    border: 1px solid #D0D2FF; 
    border-radius: 5px; 
    flex-shrink: 0;
    font-family: 'NanumSquareRound', sans-serif !important; 
    font-weight: 700; 
    font-size: 15px; 
    text-align: center;
    margin-top: 5px; 
    line-height: 1.4;
}

.example-text { 
    flex: 1; 
    font-size: var(--fs-18); 
    line-height: 1.6; 
    text-align: justify; 
    text-justify: inter-word; 
    word-break: break-all; 
}


/*********************************************************/
/************* contentBox 내 화자 대화형 스타일 *************/
/*********************************************************/

.content-box-speaker {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 8px;
}

.content-box-speaker:last-child {
    margin-bottom: 0;
}

.cb-speaker-label {
    flex-shrink: 0;
    font-weight: 400;
    color: #000;
    white-space: nowrap;
}

.cb-speaker-text {
    flex: 1;
    text-align: justify;
    word-break: break-all;
}


/***********************************************************/
/************* contentBox 제목+이미지+출처+단락글 *************/
/***********************************************************/
.cb-it-container {
    width: 100%;
}

.cb-it-title {
    font-size: var(--fs-19);
    font-weight: 700;
    text-align: center;
    margin-bottom: 15px;
    color: #000;
    line-height: 1.4;
}

.cb-it-img-wrapper {
    width: 100%;
    margin-bottom: 15px;
    text-align: center;
}

.cb-it-img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

.cb-it-source {
    display: block;
    width: 100%;
    font-family: 'NanumSquareRound', serif !important;
    text-align: right;
    font-size: var(--fs-14);
    color: #666;
    font-weight: 400;
}

.cb-it-content {
    margin-top: 10px;
}

.cb-it-p {
    font-size: var(--fs-18);
    line-height: 1.6;
    color: #000;
    margin-bottom: 8px;
    text-align: justify;
}

.cb-it-p.indent {
    text-indent: 1em;
}

.cb-it-p:last-child {
    margin-bottom: 0;
}

.cb-it-p.source {
    font-family: 'NanumSquareRound', serif !important;
    text-align: right;
    font-size: var(--fs-14);
    color: #666;
    margin-top: 5px;
}

/* image-text 유형만 좌우 패딩 10px로 축소 */ 
/* 데이터에서 필요한 문항만 별도 조정함
.content-box.cb-type-image-text {
    padding-left: 10px;
    padding-right: 10px;
}
*/


/***********************************************************/
/*************** contentBox 내 자유 기호 내어쓰기 *************/
/***********************************************************/

.cb-hanging-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.cb-hanging-item:last-child {
    margin-bottom: 0;
}

.cb-hanging-mark {
    flex-shrink: 0;
    font-weight: 400;
    color: #000;
    white-space: nowrap;
}

.cb-hanging-text {
    flex: 1;
    text-align: justify;
    line-height: 1.6;
    word-break: break-all;
}

.cb-hanging-mark {
    flex-shrink: 0;
    font-weight: 400;
    color: #000;
    white-space: nowrap;
    line-height: 1.6;
}

.cb-hanging-mark.is-box {
    width: 22px;
    height: 22px;
    background-color: #C6EFFF;
    border: 1px solid #D0D2FF;
    border-radius: 5px;
    font-family: 'NanumSquareRound', sans-serif !important;
    font-weight: 700;
    /*display: flex;
    align-items: center;
    justify-content: center;*/
    text-align: center;
    font-size: 15px;
    line-height: 1;
    margin-top: 5px;
    line-height: 1.4;
}