/* =========================================================
   [1] 기본 및 공통 (Global & Layout)
========================================================= */
body {
    overflow-x: hidden;
}

/* PC 해상도(1024px) 기본 폰트 사이즈는 CMS 홈페이지 관리자 > 설정 > 기본설정에서 적용 */
/* html, body { font-size: 16px; } */

blockquote {
    font-size: unset;
}

.carousel-inner > .item > img {
    margin: 0 auto;
    width: 100%;
}


/* =========================================================
   [2] 타이포그래피 (Typography - Font Sizes)
========================================================= */
.font-5xl { font-size: 2.75rem; }
.font-4xl { font-size: 2.2rem; } /* title1 */
.font-3xl { font-size: 1.8rem; }
.font-2xl { font-size: 1.5rem; }
.font-xl  { font-size: 1.3rem; }
.font-l   { font-size: 1.2rem; }
.font-m   { font-size: 1.1rem; } /* 본문 */
.font-d   { font-size: 1rem; }   /* 본문 */
.font-s   { font-size: 0.9rem; }
.font-xs  { font-size: 0.8rem; }
.font-2xs { font-size: 0.7rem; }


/* =========================================================
   [3] 유틸리티 클래스 (정렬, 들여쓰기 등)
========================================================= */
.valign, 
.valign_c { 
    display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; 
}
.valign_r { 
    display: flex; justify-content: flex-start; align-items: center; text-align: right; flex-direction: row-reverse; flex-wrap: nowrap; padding-right: 2.1vw; 
}
.valign_l { 
    display: flex; justify-content: flex-end; align-items: center; text-align: left; flex-direction: row-reverse; flex-wrap: nowrap; padding-left: 2.1vw; 
}

/* 인라인 블럭에 적용 (ex: p태그 내어쓰기) */
.ti_1 { padding-left: 1.0rem; text-indent: -1.0rem; }
.ti_2 { padding-left: 2.0rem; text-indent: -2.0rem; }
.ti_3 { padding-left: 3.0rem; text-indent: -3.0rem; }
.ti_4 { padding-left: 4.0rem; text-indent: -4.0rem; }


/* =========================================================
   [4] 디모드 페이지 및 컴포넌트 (#dimodePage)
========================================================= */
#dimodePage { display: inline-block; position: relative; width: 100%; }
#dimodePage .page-actions { padding: 30px 0; text-align: right; }
#dimodePage .dimode-theme { position: relative; }
#dimodePage .dimode-sort { position: relative; } /* 김정란 적용: 차후 display: flex; flex-wrap: wrap; 적용 고려 */

#dimodePage .dimode-component { position: relative; }
#dimodePage .dimode-component .dimode-unit[data-type=widget] { display: none; }
#dimodePage .dimode-component .component-wing { 
    background: #eee; width: 300%; height: 100%; position: absolute; top: 0; left: -100%; 
}

/* 와이드 컴포넌트 */
.dimode-component-WIDE { 
    width: 100vw; margin-left: calc(-50vw + 50%); background-color: #f9f9f9; 
}


/* =========================================================
   [5] 그리드 시스템 (5열, 7열)
========================================================= */
.five-cols .col-md-1, .five-cols .col-sm-1, .five-cols .col-lg-1 { width: 20%; }
.seven-cols .col-md-1, .seven-cols .col-sm-1, .seven-cols .col-lg-1 { width: 14.285714%; }


/* =========================================================
   [6] 영상 처리 (유튜브, MP4)
========================================================= */
.Video_Box { width: 100%; } 
.embed-youtube { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; }
.embed-youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#directPopup .video-container video { max-width: 900px; } 
/* .video-container video {} */


/* =========================================================
   [7] 관리자 모달 및 하단 약관 팝업 (direcTerms 등)
========================================================= */
.direct-popup .manager .dragger { font-size: 14px; }
.modal-footer { font-size: 14px; }
.year td { text-align: left; }

#dimodePage #componentStyleModal table th,
#dimodePage .style-check,
#dimodePage label,
.dimode-modal .left-area .category .each-category,
#slideEditor .slide_title { 
    font-size: 14px; 
}

#boardSettingForm { font-size: 13px !important; }

#direcTerms { background-color: #000; }
#direcTerms .TermsM { display: flex; gap: 1vw; }
#direcTerms .TermsM a { padding: 0.5vw; text-decoration: none; color: #fff; cursor: pointer; font-size:12px; }


/* =========================================================
   [8] 반응형 (Media Queries)
========================================================= */

/* 태블릿 가로형 (sm) */
@media (max-width: 1023px) {
    html, body { font-size: 16px; }
    
    #directPopup .video-container video,
    .video-container video { max-width: 100% !important; width: 100% !important; }
    
    .five-cols .col-md-1, .five-cols .col-sm-1, .five-cols .col-lg-1 { width: calc( 100% / 5 ); }
    .seven-cols .col-md-1, .seven-cols .col-sm-1, .seven-cols .col-lg-1 { width: calc( 100% / 7 ); }
}

/* 태블릿 세로형 (xs) */
@media (max-width: 767px) {
    html, body { font-size: 15px; }
    
    #directPopup .video-container video,
    .video-container video { max-width: 100% !important; width: 100% !important; }

    .font-5xl { font-size: 2.2rem; }
    .font-l   { font-size: 1.2rem; }
    .font-s   { font-size: 1rem; }
    .font-xs  { font-size: 1rem; }
    .font-2xs { font-size: 0.9rem; } 

    /* .content > .container { padding-right:0px; padding-left: 0px; } 확인 필요 (스크롤 생성 유발) */ 

    /* 빈 속성 제거됨 : .col-lg-1, .col-lg-10, ... 등 부트스트랩 col 공통 클래스 나열부 */

    .five-cols .col-md-1, .five-cols .col-sm-1, .five-cols .col-lg-1 { width: calc( 100% / 2 ); }
    .seven-cols .col-md-1, .seven-cols .col-sm-1, .seven-cols .col-lg-1 { width: calc( 100% / 4 ); }
    .Video_Box { max-width: 100%; }
}

/* 모바일 */
@media (max-width: 467px) {
    html, body { font-size: 14px; }
    
    #directPopup .video-container video,
    .video-container video { max-width: 100% !important; width: 100% !important; }
    
    .font-s   { font-size: 1rem; }
    .font-xs  { font-size: 1rem; }
    .font-2xs { font-size: 1rem; } 

    .five-cols .col-md-1, .five-cols .col-sm-1, .five-cols .col-lg-1 { width: 100%; }
    .seven-cols .col-md-1, .seven-cols .col-sm-1, .seven-cols .col-lg-1 { width: 100%; }
}