@charset "utf-8";

/*
 * 레거시에 **없는** 서식
 *
 * 이 프로젝트에서 유일하게 로컬로 서비스하는 CSS 입니다.
 * 나머지 CSS·이미지는 전부 메뉴서버에서 받습니다. (MenuAssetLib::style)
 *
 * 지금 살아 있는 것은 아래 "복원" 두 줄뿐입니다. 레거시에 없던 추가분은
 * 파일 아래쪽에서 꺼 두었습니다. 사정은 그 구역 머리말을 보세요.
 */

/*
 * 정정·반론보도 말머리.
 *
 * 메뉴서버의 common.css 는 EUC-KR 인데 @charset "euc-kr" 가 **2번째 줄**에
 * 있습니다. 주석 뒤에 오면 규격상 무시됩니다. 레거시는 문서 자체가 EUC-KR
 * 이라 브라우저가 문서 인코딩을 물려받아 제대로 나왔지만, 우리 문서는
 * UTF-8 이라 같은 파일이 깨져 보입니다. (content:'������')
 *
 * 그래서 그 두 줄만 여기서 다시 선언합니다. 이 파일은 UTF-8 이고
 * @charset 이 1번째 줄이라 안전합니다.
 *
 * 근본 해결은 메뉴서버 common.css 의 @charset 을 1번째 줄로 올리는 것입니다.
 * 그러면 레거시·우리 양쪽 모두 문서 인코딩과 무관하게 바르게 읽힙니다.
 * 그때 아래 두 줄은 지우세요.
 */
.lst_type7 .bundle.correct:before { content: '정정보도'; }
.lst_type7 .bundle.reply:before { content: '반론보도'; }

/* ════════════════════════════════════════════════════════════════════
   여기서부터 끝까지: 레거시에 없던 추가분 — **꺼 둠**

   아래 클래스들은 레거시 마크업이 쓰지만 메뉴서버 CSS 어디에도
   (common / base / slick / paging_type) 규칙이 없습니다. 운영 화면도
   서식 없이 나옵니다. 포팅 과정에서 서식을 새로 입혔다가, 레거시와
   같게 두기로 하여 껐습니다.

   CSS 주석으로 감쌀 수 없습니다. 주석은 중첩되지 않아서, 안쪽 주석의 첫
   종료 표시에서 끊기고 나머지 규칙이 되살아납니다. 그래서 **맞을 수 없는
   미디어쿼리**로 감쌌습니다. 규칙 원문은 손대지 않았습니다.

   다시 켜려면 바로 아래 @media 줄과 파일 맨 끝 닫는 중괄호만 지우세요.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 99999px) {

/* ───────── 페이지 제목 ─────────
 * articlePhotoList, articlePhotoView, communication 이 씁니다.
 * .tit1 과 같은 모양(빨간 세로선)으로 맞췄습니다.
 */
#content .h2_tit {
    position: relative;
    padding-bottom: 2px;
    padding-left: 17px;
    font-size: 17px;
    font-weight: normal;
    line-height: 24px;
    letter-spacing: -0.6px;
    color: #d80820;
}

#content .h2_tit:after {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-left: 2px solid #d80820;
}

/* ───────── 포토 갤러리 (articlePhotoList) ─────────
 * 사진과 제목만 있는 격자입니다. 한 줄에 4칸.
 */
.thum_type2 .group {
    display: flex;
    flex-wrap: wrap;
    gap: 26px 20px;
}

.thum_type2 .bundle {
    flex: 0 0 calc((100% - 60px) / 4);
    min-width: 0;
}

.thum_type2 .bundle .thum {
    display: block;
    position: relative;
    overflow: hidden;
}

.thum_type2 .bundle .thum a {
    display: block;
    position: relative;
    padding-bottom: 66.66%;
}

.thum_type2 .bundle .thum img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * 썸네일 위에 얹는 테두리. 레거시가 사진마다 두는 빈 span 입니다.
 * 이미지와 같은 자리에 1px 선만 그려 경계를 만듭니다.
 */
.thum_type2 .bundle .thum .edge,
.lst_type2 .bundle .thum .edge,
.lst_type4 .bundle .thum .edge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.07);
    box-sizing: border-box;
}

.thum_type2 .bundle .txt {
    display: block;
    margin-top: 10px;
    max-height: 44px;
    overflow: hidden;
    font-size: 15px;
    font-weight: normal;
    line-height: 22px;
    letter-spacing: -0.6px;
    color: #262626;
}

.thum_type2 .bundle .txt a {
    color: #262626;
}

.thum_type2 .bundle .txt a:hover,
.thum_type2 .bundle .txt a:focus {
    text-decoration: underline;
}


/* ═════════ 열린정책 소통합시다 (/communication) ═════════
 * 전에는 이 화면 전용 파일(communication.css)로 따로 뒀는데, 결국 성격이
 * 같아서(레거시에 없는 서식) 이 파일로 합쳤습니다. 셀렉터가 전부 이 화면의
 * 클래스라 다른 화면에 닿지 않습니다.
 */

/* ───────── 전체 틀 ───────── */
#content.bxbg_type1 {
    padding-bottom: 60px;
}

/* 페이지 제목(.h2_tit)은 여러 화면이 함께 써서 supplement.css 에 있습니다. */

/* ───────── 상단 안내문 ───────── */
.txt_type1 {
    padding-bottom: 8px;
    border-bottom: 1px solid #dadada;
}

.txt_type1 .tit {
    font-size: 22px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: -0.9px;
    color: #262626;
}

.txt_type1 .txt1,
.txt_type1 .txt2,
.txt_type1 .txt3 {
    font-size: 16px;
    line-height: 28px;
    letter-spacing: -0.6px;
    color: #4c4c4c;
}

.txt_type1 .txt1 {
    margin-top: 14px;
    color: #262626;
}

.txt_type1 .txt3 {
    color: #666;
}

/* ───────── 인물 소개 ───────── */
.infobox {
    display: flex;
    gap: 0 30px;
    align-items: flex-start;
}

.infobox .thum {
    flex: 0 0 260px;
}

.infobox .thum img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #dadada;
    box-sizing: border-box;
}

.infobox .txt {
    flex: 1 1 auto;
    min-width: 0;
}

.infobox .txt h4 {
    font-size: 15px;
    font-weight: normal;
    line-height: 22px;
    letter-spacing: -0.6px;
    color: #d80820;
}

.infobox .txt h5 {
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: -0.8px;
    color: #262626;
}

/* 프로필 */
.pfbox .tit {
    position: relative;
    padding-bottom: 8px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.6px;
    color: #262626;
}

/* 제목 아래 짧은 밑줄 */
.pfbox .tit .bl {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 24px;
    height: 2px;
    background: #d80820;
}

.pfbox .list {
    margin-top: 10px;
}

.pfbox .list ul {
    font-size: 15px;
    line-height: 26px;
    letter-spacing: -0.6px;
    color: #4c4c4c;
}

/* ───────── 질문 접수 ───────── */
.bx_ask {
    padding: 28px 30px 30px;
    background: #f7f7f7;
    border: 1px solid #dadada;
}

.bx_ask .t_area {
    padding-bottom: 20px;
    border-bottom: 1px solid #dadada;
}

.bx_ask .t_area .txt1 {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.6px;
    color: #262626;
}

.bx_ask .t_area .date {
    display: block;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.6px;
    color: #d80820;
}

.in_area {
    margin-top: 22px;
}

.in_area dl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.in_area dt {
    flex: 0 0 76px;
    padding: 7px 0;
    font-size: 15px;
    line-height: 34px;
    letter-spacing: -0.6px;
    color: #262626;
}

.in_area dd {
    flex: 1 1 calc(100% - 76px);
    padding: 7px 0;
    min-width: 0;
}

.in_area input[type="text"],
.in_area textarea {
    padding: 0 12px;
    font-size: 15px;
    letter-spacing: -0.6px;
    color: #262626;
    background: #fff;
    border: 1px solid #c8c8c8;
    border-radius: 2px;
    box-sizing: border-box;
    outline: none;
}

.in_area input[type="text"]:focus,
.in_area textarea:focus {
    border-color: #8c8c8c;
}

.in_area .size1 {
    width: 240px;
    height: 34px;
    line-height: 34px;
}

.in_area .size2 {
    width: 100%;
    height: 34px;
    line-height: 34px;
}

.in_area .area_size {
    padding: 10px 12px;
    width: 100%;
    height: 160px;
    line-height: 24px;
    resize: vertical;
}

/* 질문하기 버튼 */
.in_area .btn_area {
    text-align: center;
}

.in_area .btn_area a {
    display: inline-block;
}

.in_area .btn_area img {
    display: block;
}

/* 레거시가 폼 끝에 두는 빈 요소. 자리만 차지합니다. */
.bxbg_type2 {
    clear: both;
}


}