@charset "utf-8";
/* 서브 페이지 공통 CSS - sub.css */

/* 
    [import로 파일 합치기]
    외부 CSS 파일에서 다른 외부 CSS 파일을 import방식으로 불러올 때 장점은?
    -html 파일에서 link요소로 호출할 경우
    http request (웹 요청)이 많아져서
    페이지 랜더링 속도에 영향을 미침
    따라서 import 방식을 쓰면
    더 적은 웹 요청에 따라 처리속도에 도움이 됨

    -주의: import는 CSS 파일 상단에서 처리함!
*/
/* @import url(파일주소); */
@import url(./common.css);

/* 본 CSS 설정 코드는 하단에 한다!*/

/* 메인영역 박스 (재정의) */
.cont{
    /* 패딩을 15px로 변경 (기존 20px) */
    padding: 15px;
}

/* 2-1.언론사 로고 */
.prlogo img{
    height: 32px;
    /* 이미지는 가로, 세로 중 한쪽만 설정해도 자동으로 비율 유지를 함. 여기서는 가로길이가 다 다를테니까 높이를 설정한 것임 */
}
/* 2-2.기사 제목 */
.atit{
    /* 글자 크기 fz30 */
    font-size: 30px;
    /* 글자 두께 보통 fwn */
    font-weight: normal;
    /*
    글자간격(자간) letter-spacing (ls)
    기본값은 0(normal), 양수는 멀어짐, 음수는 가까워짐
    */
    letter-spacing: -1px;
    /* 
    단어간격 word-spacing (ws)
    기본값은 0(normal), 양수는 멀어짐, 음수는 가까워짐
    */
    word-spacing: 3px;

    /*
    줄바꿈 방지 (공백->백공->white-space)
    -normal: 기본값 (박스 끝에서 줄바꿈)
    -nowrap: 박스 끝에서 줄바꿈이 안 되고, 계속 감
    (줄바꿈이 되면 안 될때)
    (버튼에 써있는 글씨들이 버튼 박스가 작아지거나 하면 글씨가 아랫줄로 떨어지는데, 그러면 안되니까! 그럴 때 씀=한줄에 버튼글자)
    (혹은 기사같은 것들...제목 좀 길게 써서 뒷 부분은 말줄임표시나오게=한줄에 말줄임표)
    */
    /* white-space: nowrap; */

    
}
/* 2-3.기사 사진(+사진 설명) */
.afig{
    /* 마진은 m : 2개 값-> 위아래 양쪽임 */
    margin: 15px 0;
    /* 인라인 가로 중앙 : tac (text-align: center) */
    text-align: center;
}
/* 기사 이미지 */
.afig img{
    width: 100%;
}
/* 기사 이미지 설명 글 */
.afig small{
    /* 글자체: ff */
    font-family: 'East Sea Dokdo', cursive;
    /* 글자크기: fz 
    -글자 크기 최저 한계는 10px임*/
    font-size: 17px;
    /* 글자색: c */
    color: #979797;
}

/* 2-4.기사 내용 */
.arti p{
    /* 글자크기: fz */
    font-size: 18px;
    /* 줄 간격: lh */
    line-height: 1.5;
    /* 주의사항: 단위가 없으면 배수임!! 생각없이 25라고 쓰고 엔터치면... 25배 간격이 나옴...! 기준은 글자 크기임 */
    /* 양쪽 패딩 */
    padding: 0 10px;
    /* 자간: ls */
    letter-spacing: 1px;
    /* 글자 들여쓰기: text-indent (ti) */
    /* text-indent: 15px; */
    /* 마이너스를 하면 내어쓰기가 되므로, 글자를 살짝 앞뒤로 수정하고 싶을 때 응용해서 쓰면 됨! */
    /* 양쪽 정렬: taj (text-aling: justify) */
    text-align: justify;

}
/* mark요소 변경하기! */
.arti p mark{
    /* 인라인을 블록으로 출신 변경해보기 */
    display: block;
    /* 글자크기 변경 */
    font-size: 20px;
    /* 줄간격 주기 */
    line-height: 2;
    /* 위아래, 양쪽 패딩 주기 */
    padding: 20px 50px;
    /* 배경색: bgc*/
    background-color: #e9e9e9;
    /*
    보더 위, 아래!
    위는 (top), 아래는 (bottom), 왼쪽 (left), 오른쪽(right)
    */
    border-top: 2px solid gray;
    border-bottom: 2px solid gray;
    /* 중앙 정렬: tac */
    text-align: center;
    /* 위아래 마진 */
    margin: 15px 0;
}
/* p요소 아래 em요소의 디자인 변경하기 */
.arti p em{
    /*
    글자에 그림자 넣기: ts (text-shadow)
    값: x축 y축 블러 (그림자)색
    블러는 그림자 경계 흐림 정도임
    */
    text-shadow: 2px 2px 2px rgba(224, 35, 199, 0.692);
    /* 이탤릭 해제하기: fsn (font-style: normal) */
    font-style: normal;
    /* 글자색 */
    color: darkmagenta;
    /* 글자 두껍게: fwb */
    font-weight: bold;
}

/* 2-5.기자 정보 */
.rpt{
    /* display 출신 변경하기
    디자인 적용과 동시에 인라인 특성인 글자 만큼만 크기가 잡히도록 인라인 블록으로 변경함*/
    display: inline-block;
    /* 글자크기 fz */
    font-size: 14px;
    /* 배경색 bgc */
    background-color: #ececec;
    /* 패딩 */
    padding: 5px;
    /* 마진 */
    margin: 15px 20px;
    
}
/* 2-6.기사 원문 */
/* 별도의 이름 없이 구조로만 기사 원문 선택함 (다른 곳의 h5는 직계 자손이 아니라서 ㅎㅎ) */
.cont>h5{
    /* 내부의 인라인 요소: 오른쪽 정렬임 */
    text-align: right;
}
.cont>h5>a{
    /* 디자인 적용 위해 display변경함! */
    display: inline-block;
    /* 블록요소 오른쪽 끝으로 보내기 */
    /* 그냥 두면 애가 모양이 망가지므로, 부모 박스인 .cont에 넘치는 자식 숨겨라!ㅋㅋㅋㅋ 
    =>overflow:hidden 세팅으로 박스가 망가지는 것을 막아야 함 */
    overflow: hidden;
    /* 기본 없애기 */
    margin: 20px 0;
    padding: 0;
    /* 가로, 세로 지정하기 */
    width: 70px;
    height: 70px;
    border: 2px solid #dbdbdb;
    /* 글자 중앙으로 옮기기 */
    text-align: center;
    /* 세로 중앙으로 옮기기: 줄간격으로 하기! */
    line-height: 70px;
    /* 둥글게 하기: border-radius
    50%는 원이 됨*/
    border-radius: 50%;
    /* 배경색 */
    background-color: #ffdb3a;
}
/* 모든 a에 밑줄 없애고 보라색 없애기 => 모든 a '공통'이니까 common에서 만들기*/

/* 가상클래스로 마우스 오버시 박스 그림자 넣기 */
.cont>h5>a:hover{
    /* 박스 그림자 넣기 bsh
        box-shadow: x y blur spread 색;
        (내부그림자는 inset을 씀)
        (spread는 박스 그림자 크기임! 필요할 때 쓰면 됨!)
    */
    box-shadow: 0 0 5px darkblue;
}

/* 메인 공통 article 박스 디자인 */
.cont article{
    /* 구분선: 보더 위 bdt (border-top) */
    border-top: 2px dashed #ccc;
    /* 마진 위 mt (margin-top) */
    margin-top: 40px;
    /* 패딩 p */
    padding: 15px;
}

/* 기사 관련 타이틀 h5 */
/* .cont>h5와 구분하기 위해서 중간경로 article을 씀 */
/* 꺽쇠는 웬만하면 쓰지 않고 싶어 함....그렇다네...? */
.cont article h5{
    /* 내용만큼 자동으로 커지게 하기 위해서 인라인-블록을 씀 */
    display: inline-block;/* 그러면 크기를 가지면서도 안쪽으로 들어가게됨 */
    /* 패딩은 위아래 양쪽 적용함 */
    padding: 10px 20px;
    /* 배경색 넣기 */
    background-color: #d4d4d4;
    /* 헤딩 요소 기본 마진 없앰 */
    margin: 0;
    /* 둥근 모서리 brad */
    border-radius: 20px;
    /* 내부 그림자: bsh */
    /* inset은 내부그림자 설정임 */
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.507);
    /* 글자 두께: 얇게(기본값) fwn */
    font-weight: bold;
    /* 글자 크기: fz */
    font-size: 20px;
    /* 글자 들여쓰기: ti */
    /* text-indent: 20px; */
    /* 글자 색: c */
    color: #333;
}

/* 각 파트별 공통 타이틀 h3 */
.cont h3{
    /* 글자체: 웹폰트 ff*/
    font-family: 'East Sea Dokdo', cursive;
    /* 글자 두께: 얇게(기본값) fwn */
    font-weight: normal;
    /* 글자 크기: fz */
    font-size: 30px;
    /* 글자 들여쓰기: ti */
    text-indent: 20px;
    /* 글자 색: c */
    color: #333;
}

/* 주해 박스 (내용 부분) */
.desc div{
    /* 패딩 p : 위, 양쪽, 아래 임*/
    /* 0은 단위 안 넣어도 되도록 되어 있음 */
    padding: 20px 5px 0;
    /* 줄간격: lh */
    line-height: 1.7;
    /* 자간: ls */
    letter-spacing: 1px;
    /* 양쪽 정렬: taj (text-aling: justify) */
    text-align: justify;
}

/* 인용 박스 (내용 부분) */
.qb blockquote{
    /* 기본 마진 없애기 */
    margin: 0;
    /* 패딩 p : 위, 양쪽, 아래 임*/
    /* 0은 단위 안 넣어도 되도록 되어 있음 */
    padding: 20px 5px 0;
    /* 줄간격: lh */
    line-height: 1.7;
    /* 자간: ls */
    /* letter-spacing: 0px; */
    /* 글자 크기 fz */
    font-size: 14px;
    /* 양쪽 정렬: taj (text-aling: justify) */
    text-align: justify;
}

/* 오늘의 작품 & 느낌 */
.work{
    /* 글자 중앙: tac */
    text-align: center;
    /* 배경색 */
    /* background-color: lightseagreen; */

    /* 그라데이션은 이미지로 넣음! bgi */
    /* background-image: linear-gradient(방향, 색1 %, 색2 %...); 
        -방향: to top, to bottom, to left, to right (방향에 각도를 쓰면 그라데이션 각도가 표현됨)
        -> 방향 대신 각도: 수치deg (예: 40deg)
        -색상을 콤마로 나열하면 등분할하여 그라데이션 표현되고, 색상 뒤에 % 수치를 쓰면
        특정 비율을 나타낼 수 있음
        -기본으로...색이 패딩이랑 보더까지도 색이 들어감! 
        -그걸 옵션으로 바꿔줄 수 있음 (clip속성!!)

    */
    /* background-image: linear-gradient(15deg, red 10%, yellow 20%, yellow 80%, blue); */
    background-image: linear-gradient(to bottom, #ffa0a0, #e2b890, #bbcef3);

    /* 배경 옵션 추가!!!!
        background-clip: 배경이 적용되는 범위 설정
        1.border-box: 보더까지 적용 (기본값)
        2.padding-box: 패딩까지 적용됨
        3.content-box: 내용영역만 적용(패딩, 보더가 빠짐)*/
    background-clip: content-box;
}

/* 작품명 */
.work figcaption{
    font-family: 'East Sea Dokdo', cursive;
}

.work figcaption cite{
    font-style: normal;
}

/* 작품이미지 */
.work img{
    border: 15px ridge goldenrod;
}

/* 파트별 a 링크 요소 공통 디자인 */
.cont article a{
    /* 글자크기 fz */
    font-size: 17px;
    /* 줄간격 lh */
    line-height: 2.5;
    /* 자간 ls */
    letter-spacing: -1px;
}
/* 가상클래스 hover 오버시 */
.cont article a:hover{
    /* 글자색 c */
    color: rgb(80, 191, 255);
    /* 글자그림자 ts */
    text-shadow: 1px 1px 1px rgb(187, 187, 187);
}

/* 공통 ul */
.cont article ul{
    /* 리스트 타입 lst */
    list-style-type: "🎃";
    /* 
        square 사각형, disc 원형, circle 빈원
        -> 따옴표안에 다른 문자형을 넣을 수 있음
        -> 윈도우키+점(.) -> 아이콘
    */
}

/* 공통 ol */
.cont article ol{
    /* 숫자형 리스트 스타일 lit */
    list-style-type: upper-roman;
    /* 순서를 표시하는 종류는 너무 많다! */
}

/* 주요 뉴스 li별 글자색 변경하기 */
/* 
    [자식 요소 선택 가상 클래스: 자식 요소 종류가 같아야함!!]
    요소:first-child -> 첫번째 자식요소
    요소:nth-child(n) -> n번째 자식요소
    요소:last-child -> 마지막 자식요소
*/

/* 첫번째 li */
.cont article ul li:first-child a{
    color: red;
}
.cont article ul li:nth-child(2) a{
    color: green;
}
.cont article ul li:last-child a{
    color: blue;
}

/* 불릿과 글자 사이 간격 주기 */
.cont article ul li,
.cont article ol li{
    /* 패딩 left: 불릿 뒤쪽이 적용됨 */
    padding-left: 10px;
}

/* 랭킹 뉴스에 색 넣기 */

.cont article ol li:first-child a{
    color: red;
}
.cont article ol li:nth-child(2) a{
    color: green;
}
.cont article ol li:last-child a{
    color: blue;
}
/*
    [CSS 적용 우선 순위]
    type < class < id < inline < !important
    ->더 쎈 선택자이어도 부모 요소를 업고 있는 것이 더 쎄다!!!
    예) #my < '.cont>.my' (부모 업고 있음)
*/

/* 분야별 뉴스 */
/* 각 분야명 dt 공통 디자인 */
.secnews dt{
    /* 글자체 */
    font-family: 'East Sea Dokdo', cursive;
    /* 글자 크기만큼 디자인 적용 위해 dib! */
    display: inline-block;
    /* 보더 bd */
    border: 3px dashed darkcyan;
    /* 패딩 p */
    padding: 10px;
    /* 둥근 모서리 */
    border-radius: 50%;
    /* 글자 크기: fz */
    font-size: 24px;
    /* 인라인요소가 이동될수있는건 마진가지고 이동할 수 있음 */
    /* 왼쪽 마진으로 이동하기 ml */
    margin-left: 20px;
    /* 박스 그림자 bsh
    -> (inset) x y blur spread 색 순으로 적으면 됨! */
    /* 보통 hoff, voff, blur는 같은 수치를 준다고 함 */
    box-shadow: 0 0 5px 5px rgba(189, 13, 86, 0.445);

    /* 마진 탑 밀기 => 전부다 탑에 마진 넣어서 맨 앞이 너무 밀림 */
    /* margin-top: 20px; */
}

/* 앞에 dd가 이는 dt만 마진탑 밀기 */
.secnews dd+dt{
    /* 마진 탑 밀기 => 전부다 탑에 마진 넣어서 맨 앞이 너무 밀림 */
    margin-top: 20px;
}

/* 
    [여러 종류가 섞여 있을 경우에 형제 선택하기]
    요소:first-of-type ->같은 요소(=타입) 중 첫번째! 선택하기~
    요소:nth-of-type(n) ->같은 요소 중 n번째
    요소:last-of-type ->같은 요소 중 마지막!
*/
/* dt별 글자색 다르게 하기 */
/* dt는 형제 중에 dd가 섞여 있으므로!! -of-type을 사용해야 함! */
.secnews dt:first-of-type{
    color: rgb(250, 16, 16);
}
.secnews dt:nth-of-type(2){
    color: rgb(54, 219, 13);
}
.secnews dt:last-of-type{
    color: rgb(18, 29, 185);
}

/* dd 공통 */
.secnews dd{
    /* 왼쪽 마진 ml */
    margin-left: 100px;
}

/* 사진뉴스 타이틀 */
.pnews h3{
    text-align: center;
}

/* 사진뉴스 타이틀에 가상요소로 아이콘 넣기^0^!
=>!!태그를 사용하지 않고 요소를 넣는 방법!! */
/* 맨 앞 가상요소는 '::before' 이렇게 콜론2개 쓴다 */
.pnews h3::before{
    content: '📸';
}

/* 사진뉴스 테이블 박스 */
.pnews table{
    /* 가로 중앙 이동: 마영오씨! */
    /* 마영오씨는 블록요소 또는 table에 적용됨! */
    /* 인라인에는 적용 안됨~ */
    margin: 0 auto;
    border: 2px solid #ccc;
/* 테이블에는 기본적으로 사이 간격이 있는데, 그걸 없애주는 것임
기본값: seperate임! */
    border-collapse: collapse;
}

/* 테이블 a요소 잡아서 lh를 조금 작게 줘보자 */
/* 기존의 .cont article a로 세팅된 것이 더 쎄기 때문에!
여기서 윗 부모를 같은 레벨로 넣어서 선택하면
하위에 클래스가 요소(타입)보다 더 높기 때문에 우선 적용된다~!*/
.cont .pnews a{
    /* 글자크기 */
    font-size: 14px;
    /* 줄간격 */
    line-height: 1.3;
}

/* 
tr이나 td에 child 선택자 사용 가능함!
왜? 같은 종류의 요소만 올 수 있으므로!
*/

/* 첫번째 td-숫자부분 */
.pnews td:first-child{
    /* 가로크기 w */
    width: 50px;
    /* 세로크기 h */
    height: 84px;
    /* 인라인 가로 중앙 tac*/
    text-align: center;
    /* 배경색 bgc */
    background-color: #ccc;
}

/* 두번째 td */
.pnews td:nth-child(2){
    /* 배경색 bgc */
    background-color: #e2e2e2;
    /* 양쪽 패딩: 위아래 양쪽 p*/
    padding: 0 20px;
}

/* 세번째 td */
.pnews td:last-child{
    background-color: #e2e2e2;
    /* 이미지가 너무 붙어있는 것 같아서 오른쪽 패딩주기~ */
    padding-right: 7px;
}

/* 사진 뉴스 이미지 */
.pnews img{
    height: 70px;
    /* 이미지는 한쪽만 크기줄 때 나머지는 자동 비율 유지 */
    /* 세로 정렬  */
    vertical-align: middle;
    /* td에서만 세로 정렬이 적용되고, 일반적으로는 vertical-align이라는 건 언제 쓰이냐면,
    인라인 요소간 세로 방향 정렬임 */
}

/* 맨앞 tr제외하고! 앞에 tr이 있는 tr만 하위 td에 디자인 주기
: 보통 디자인 같은 거는 데이터(td)요소에 준다~ */
.pnews tr+tr td{
    border-top: 2px solid #ccc;
}

/***************************************
말줄임표시 셋팅하기!
***************************************/
ul a, ol a, dl a{
    /* 1.디자인 적용 위해서 block하기*/
    display: block;
    /* 2.가로크기 한계를 주기 */
    width: 315px;
    /* 3.줄바꿈 방지(한줄짜리) */
    white-space: nowrap;
    /* 4.넘치는 자식 숨기기 */
    overflow: hidden;
    /* 5.넘치는 텍스트 말줄임 설정하기 */
    text-overflow: ellipsis;
    /* 가로 크기 한계를 주기 위해서 일부러 경계선 보여주기 위해 만듦~ */
    /* border: 1px solid red; */
}