@charset "utf-8";
/* 한국최신드라마 리스트 CSS - drama.css */

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

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

/* 테이블 공통 */
.tbl{
    /* 글자체 */
    font-family: 'Hahmlet', serif;
    /* 글자색 */
    color: #222;
    /* 테이블 기본 간극 없애기 - bdcol
    collapse(붕괴) 기본값은 seperate인데, collapse를 주면됨
    셀 사이 간격을 없애야 정확한 디자인 셋팅이 가능하다
    =>table태그에 bd1을 줘보면 바로 확인 가능하다! */
    border-collapse: collapse;
}

/* 드라마 테이블 전체 */
#drama{
    font-size: 24px;
    margin: 0 auto;
    /* 테이블은 특징이, 내용이 넓어지면 겉 박스보다 커지는 경우, 아래로 툭툭 떨어진다!
    그래서 가운데 올 때에 사이즈 지정 안하면~ 내용만큼 혼자서만 길어질 수 있다
    =>그러니까 사이즈 셋팅해주는 것이 좋음 */
    width: 1000px;
    /* 테이블은 width 지정이 없으면 내용만큼 늘어남! 좁으면 내용이 아래로 떨어져서 줄바꿈된다! */
}

/* 테이블 제목 */
#drama caption{
    font-size: 35px;
    font-weight: bold;
    letter-spacing: 5px;
    padding: 50px 0 20px;
}

/* td와 th 패딩 */
#drama td, #drama th{
    padding: 8px 10px;
}

/* td에 밑줄 넣기 (선 넣기) - tfoot에도 td가 있어서 그거 빼려고 tbody를 준 것임 */
#drama tbody td{
    border-bottom: 1px solid #ccc;
}

/* th에 윗줄, 아랫줄에 두꺼운 보더 넣기 */
#drama th{
    border-top: 2px solid #555;
    border-bottom: 2px solid #555;
}

/* tbody 마지막 td에 아랫줄 두꺼운 보더 넣기 - 좀더 정확하게 디자인 주기 위해서 td에 주는 것임 */
#drama tbody tr:last-child td{
    border-bottom: 2px solid #555;
}

/* tbody의 첫번째 td(번호)에 가운데 정렬하기 */
#drama tbody td:first-child{
    text-align: center;
    /* background-color: red; */
    /* 퍼스트차일드의 특징 중 하나가, 약간 그룹을 지정하듯이 전부 찾아서 적용(?)시키기 때문에 주의해서 쓰..라는거 같은데...잘 못들었엉ㅎㅎㅎ */
}

/* 하단부분(tfoot) */
#drama tfoot td{
    text-align: center;
    padding: 45px 0;
}

/* 본문 배경색 짝수만 넣기 - 실제 디자인 요소는 구체적인 내용이 들어가있는 td에 주기~!! */
#drama tbody tr:nth-child(even) td{
    background-color: #f0f0f0;
}

/* 링크 a요소 변경하기 */
#drama a{
    color: #222;
    text-decoration: none;
}

/* 링크 오버시 */
#drama tbody a:hover{
    color: hotpink;
    text-decoration: underline;
    text-decoration-style: wavy;
}
#drama tfoot a:hover{
    color: darkgreen;
    text-decoration: overline;
    text-decoration-style: double;
}


/* 구분 테이블 박스 */
.gubun{
    width: 1000px;
    margin: 0 auto;
    /* outline: 1px dashed red; */
    margin-bottom: 100px;

    overflow: hidden;
    /* 자식 float 감싸기 */
    /* 오버플로우히든 - 플로팅에 의해 부모박스가 납작하게 망가지는 것을 방지하기 위함 */
}

/* 구분 테이블 */
table#gubun{
    font-size: 20px;
    border: 1px solid #999;

    /* 오른쪽 끝으로 보내기 */
    float: right;

    /* td(테이블 셀)에 사이간격 주기 */
    border-collapse: separate;
    /* border-spacing: 20px 50px; */
    border-spacing: 10px;

    /* 셀 사이 간격 */
    /* border-spacing: 가로 세로;
    border-spacing: 양방향; */
}

/* 구분 테이블 td */
#gubun td{
    padding: 10px;
}

/* 구분테이블 첫번째 tr의 첫번째 td의 오른쪽 점선 넣기 */
#gubun tr:first-child td:first-child{
    border-right: 1px dotted #999;
}

/* 구분 테이블 두번째 tr부터 끝까지 td 위쪽 보더 점선 넣기 */
#gubun tr+tr td{
    border-top: 4px dotted #999;
}
/* tr+tr = 첫번째 tr의 형제 tr부터 쭉 = 두번쨰 tr부터 쭉 */