@charset "utf-8";
/* Font */
@import url(font.css);
/* post */
@import url(post.css);

:root{
    --header-bg:#1962B9;         /* 상단 헤더 파랑 */
    --header-fg:#ffffff;
    --line: #d3d3d3;
    --cat-bg:#f5f7ff;            /* 좌측 대상 열 배경(연보라-블루 톤) */
    --pastel-1:#fff3e0;          /* 연오렌지 */
    --pastel-2:#e3f2fd;          /* 연하늘 */
    --pastel-3:#e8f5e9;          /* 연초록 */
    --pastel-4:#fce4ec;          /* 연핑크 */
    --pastel-5:#f3e5f5;          /* 연보라 */
    --chip:#edf2ff;
}
*{box-sizing:border-box}

.wrap{
    width: 100%; max-width: 1100px; margin: 50px 0;
}
h2{
    text-align:center; margin:8px 0 18px; font-weight:700;
}
.table{
    width:100%;
    border-collapse:separate; border-spacing:0;
    background:#fff;
    border: 1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
    /*box-shadow:0 8px 35px rgba(0,0,0,.16);*/
}
.table thead th{
    background:var(--header-bg); color:var(--header-fg);
    padding:14px 16px; font-size:14px; font-weight:700; text-align:center;
    border-right:1px solid rgba(255,255,255,.15);
}
.table tbody tr td{
    vertical-align:top; padding:10px 13px; font-size:14px; line-height:1.55;
    background:#fff;
}
.table tbody tr th{
    vertical-align:top; padding:15px 16px; font-size:14px; line-height:1.55;
    border-bottom:1px solid var(--line);
    border-right:1px solid var(--line);
    background:#fff;
}
.table .td-center {
    font-weight: bold;
    padding:15px 16px;
    color: #475066;
}

/* 좌측 대상(카테고리) 셀 */
.cat{
    width:140px; font-weight:700; text-align:center; color:#1b3a7a;
    background:var(--cat-bg);
    position:relative;
}
.cat small{
    display:block; margin-top:6px; font-weight:500; color:#586079;
    font-size:12px;
}
/* 교육명(타이틀) */
.title{
    font-weight:700; margin-bottom:8px; word-break:keep-all;
}
.p1 {
    border-bottom:1px solid var(--line);
    border-right:1px solid var(--line);
}
.desc{
    margin:0; padding-left:0; list-style:none; font-size:13px; color:#475066;
}
.desc b{ color:#223; margin-right:6px }
.chip{
    display:inline-block; padding:3px 8px; border-radius:999px; background:var(--chip);
    font-size:12px; font-weight:600; color:#2d3a8c; border:1px solid #dbe2ff;
    margin-left:6px;
}
/* 버튼 */
.goBtn {
    align-content: center;
    text-align: center;
    border-bottom: 1px solid var(--line);
}
.table tbody tr td a span:hover{
    transform:translateY(-3px);
    /*box-shadow:0 6px 12px rgba(13,71,161,.12) */
}
.table tbody tr td a span:active{ transform:translateY(0) }
.table tbody tr td a span{
    display: inline-block;
    color: #e5002b;
    padding: 5px 10px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    border: 1px solid;
    transition: all .4s;
    width: 100px;
    height: 30px;
    border-radius: 20px;
    align-content: center;
    background: white;
}
.table tbody td:last-child{border-right:none;}
.lastTd {
    border-bottom: none;
}
.tbl-wrap .table tbody tr td .formLI {
display: flex;
padding: 5px 0;
}
.tbl-wrap .table tbody tr td .formLI .contentTitle {
    width: 50px;
    font-weight: 600;
}

.tbl-wrap .table tbody tr td .formLI .content {
width: calc(100% - 50px);
white-space: pre-wrap;
}
.textar {
line-height: 1.6;
}
/* 파스텔 배경 띠(교육명/내용 열에만 은은하게) */
.p1{ background:var(--pastel-1) }
.p2{ background:var(--pastel-2) }
.p3{ background:var(--pastel-3) }
.p4{ background:var(--pastel-4) }
.p5{ background:var(--pastel-5) }

/* 반응형: 모바일에서는 카드형으로 쌓기 */
@media (max-width: 820px){
    .table, .table thead, .table tbody, .table tr, .table td, .table th{ display:block; width:100% }
    .table thead{ display:none }
    .table tbody tr{ border:1px solid var(--line); border-radius:12px; margin-bottom:16px; overflow:hidden; background:#fff }
    .cat{ width:auto; text-align:left; padding:14px 16px; border-bottom:1px solid var(--line) }
    .title{ margin-top:6px }
    .table tbody td{ border-right:none; border-bottom:1px solid var(--line) }
    .table tbody td:last-child{ border-bottom:none; padding:12px 16px }
    .btn{ width:100% }
}