@charset "utf-8";
/* 드라마pj 테이블 혼자 복습 CSS - dramaTalbe_review.css */

/* 웹폰트 */
@import url('https://fonts.googleapis.com/css2?family=Hahmlet&display=swap');
/* 
    font-family: 'Hahmlet', serif;
*/

/* 초기화 */
html, body{
    margin: 0;
    padding: 0;
}

a{
    color: #333;
    text-decoration: none;
}

/* 테이블 공통 초기화 */
.tbl{
    color: #333;
    font-family: 'Hahmlet', serif;
    border-collapse: collapse;
    /* 기본 셋팅되어있는 간격 없애기 */
}

#drama{
    margin: 0 auto;
    width: 1000px;
    /* 테이블에 가로값 안 주면 내용 넘칠 때 줄바꿈됨! 주의할 것 */

    font-size: 24px;
}

/* 테이블 제목 */
#drama caption{
    padding: 50px 0 30px;

    font-weight: bold;
    color: lightcoral;
    font-size: 35px;
    letter-spacing: 5px;
}

#drama td{
    padding: 5px;
}

/* 테이블 상단부분 */
#drama thead tr{
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    text-align: center;
}

#drama thead td{
    padding: 5px;

    font-weight: bold;
}

/* 테이블 메인부분 */
/* 번호 가운데 정렬 */
#drama tbody td:first-child{
    text-align: center;
}

/* 짝수 줄 배경색 주기 */
#drama tbody tr:nth-child(even){
    background-color: #f5f5f5;
}

#drama tbody tr+tr{
    border-top: 1px solid #d1d1d1;
}

#drama tbody tr:last-child{
    border-bottom: 2px solid #000;
}

/* 드라마제목에 마우스오버시 */
#drama tbody tr a:hover{
    color: salmon;
    text-shadow:
    1px 0px #333,
    -1px 0px #333,
    0px 1px #333,
    0px -1px #333;
}

/* 테이블 하단부분 */
#drama tfoot td{
    padding-top: 30px;
    text-align: center;
}

/* 테이블 하단부분 숫자에 마우스 오버시 */
#drama tfoot a:hover{
    color: cornflowerblue;
    text-decoration: underline;
}