@charset "UTF-8";

/* 아카이브 → 글쓰기 시작 */
.ul-archive-write .td {display: -webkit-flex; display: flex; justify-content: start; align-items: center; padding: 13px 0; border-bottom: var(--border-solid);}
.ul-archive-write .input-label {text-align: center;}
input[type='text'].input-lecture-name {width: calc(100% - 88px); border-radius: 6px 0 0 6px;}
input[type='text'].input-lecture-name:disabled {background: #fff;}
.btn-look {width: 88px; border-radius: 0 6px 6px 0;}
.ul-archive-write .td-content textarea, .ul-archive-write .td-content .editor {width: 100%; height: 300px;}
.ul-archive-write .td-file .input-file-area {width: 100%; display: -webkit-flex; display: flex; justify-content: start; align-items: center;}
.ul-archive-write .td-file input[type=file].input-file {display: none;}
.ul-archive-write .td-file input[type=file].input-file + label {width: 100px; cursor: pointer;}
.ul-archive-write .td-file .file-name {width: calc(100% - 100px); padding: 0; padding-left: 20px; border-color: transparent; background: transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--primary);}

.archive-write .btn-write {margin: 0 auto; margin-top: 50px;}
/* //아카이브 → 글쓰기 끝 */

/* 아카이브 시작 */
.archive .sub-page-info {display: grid; justify-content: space-between; align-items: end;}
.archive .sub-page-info .title2 {grid-column: 1 / span 1; grid-row: 1 / span 1;}
.archive .sub-page-info .text2 {grid-column: 1 / span 1; grid-row: 2 / span 1;}
.archive .sub-page-info .btn-write {grid-column: 2 / span 1; grid-row: 1 / span 2;}

.ul-archive-list {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 30px;}
.ul-archive-list>.item {border: var(--border-solid); border-radius: 10px; overflow: hidden; cursor: pointer;}
.ul-archive-list .thumb {display: block; position: relative; padding-bottom: 56.25%; border: var(--border-solid); border-radius: 10px; overflow: hidden; margin: 18px 18px 0 18px;}
.ul-archive-list .thumb img {width: 100%; height: 100%; display: block; object-fit: cover; position: absolute; inset: 0;}
.ul-archive-list .txt-area {padding: 12px 18px 14px; border-radius: 0 0 10px 10px;}
.ul-archive-list .tit {display: block; font-weight: 600; color: var(--darkgray); line-height: 1.5;}
.ul-archive-list .tit .course-name {color: var(--violet-blue); word-break: normal;}
.ul-archive-list .tit .lecture-name {color: var(--darkgray); word-break: normal;}

.ul-archive-list .ul-info {display: grid; gap: 6px;}
.ul-info .tag-area {grid-column: 1 / span 2;}
.ul-info .name {grid-column: 1 / span 1;}
.ul-info .date {grid-column: 2 / span 1; font-size: 0.875rem; letter-spacing: -0.2px;}
/* //아카이브 끝 */

/* 아카이브 확인 시작 */
.board-contents {border-top: 2px solid var(--dark);}
.archive-view .subject-area {display: grid; justify-content: space-between; gap: 6px; padding: 15px 16px; border-bottom: 1px solid var(--dark);}
.archive-view .subject-area .title2 {line-height: 1.5; grid-row: 1 / span 2;}
.archive-view .subject-area .name {grid-column: 2 / span 1; text-align: right; margin-top: auto;}
.archive-view .subject-area .date {grid-column: 2 / span 1; grid-row: 2 / span 1; margin-bottom: auto;}
.archive-view .contents-area {padding-top: 30px; padding-bottom: 40px; white-space: pre-wrap;}
.archive-view .contents-area img {max-width: 100%;}
.archive-view .bottom {border-top: var(--border-solid); padding-top: 16px;}
.archive-view .bottom a {display: block; width: 100%; margin-bottom: 12px; margin-bottom: 12px;}
.archive-view .bottom a:last-child {margin-bottom: 0;}

.archive-view .btn-list {margin-top: 50px;}
/* 아카이브 확인 끝 */





@media screen and (max-width:1200px){
    .sub-page.archive-view {padding-top: 0; padding-left: 0; padding-right: 0;}

    .archive-view .subject-area {padding: 15px 50px;}
    .archive-view .contents-area {padding-left: var(--inner-padding-l); padding-right: var(--inner-padding-r);}
    .archive-view .bottom {padding-left: var(--inner-padding-l); padding-right: var(--inner-padding-r);}
}

@media screen and (min-width:993px){
    .archive-view-wrap {display: -webkit-flex; display: flex; flex-direction: column;}
    .archive-view-wrap #footer {margin-top: auto;}
}

@media screen and (max-width:992px){
    .ul-archive-write .td {padding: 10px 0;}
    input[type='text'].input-lecture-name {width: calc(100% - 72px);}
    .btn-look {width: 72px;}
    .ul-archive-write .td-content textarea, .ul-archive-write .td-content .editor {height: 220px;}
    .ul-archive-write .td-file input[type=file].input-file + label {width: 86px;}
    .ul-archive-write .td-file .file-name {padding-left: 14px;}
    .archive-write .btn-write {margin-top: 34px;}

    .ul-archive-list {gap: 18px;}
    .ul-archive-list .thumb {margin: 13px 13px 0 13px;}
    .ul-archive-list .txt-area {padding: 10px 13px 12px;}

    .archive-view .subject-area {padding: 10px 30px;}
    .archive-view .contents-area {padding-left: 30px; padding-right: 30px;}
    .archive-view .bottom {padding-left: 30px; padding-right: 30px;}
    .archive-view .btn-list {margin-top: 30px;}
}

@media screen and (max-width:768px){
    .ul-archive-write .td {-webkit-flex-wrap: wrap; flex-wrap: wrap;}
    .ul-archive-write .input-label {width: 100%; margin-bottom: 10px; text-align: left;}

    .ul-archive-list {grid-template-columns: 1fr 1fr;}
}

@media screen and (max-width:480px){
    .ul-archive-write .td {padding: 8px 0;}
    input[type='text'].input-lecture-name {width: calc(100% - 64px);}
    .btn-look {width: 64px;}
    .ul-archive-write .td-content textarea, .ul-archive-write .td-content .editor {height: 140px;}
    .ul-archive-write .td-file input[type=file].input-file + label {width: 80px;}
    .ul-archive-write .td-file .file-name {padding-left: 10px;}
    .archive-write .btn-write {margin-top: 24px;}

    .ul-archive-list {gap: 10px;}
    .ul-archive-list .thumb {margin: 11px 11px 0 11px;}
    .ul-archive-list .txt-area {padding: 8px 11px 11px;}

    .archive-view .subject-area {padding: 8px 12px;}
    .archive-view .contents-area {padding-top: 16px; padding-bottom: 20px; padding-left: 12px; padding-right: 12px;}
    .archive-view .bottom {padding-left: 12px; padding-right: 12px;}
    .archive-view .btn-list {margin-top: 26px;}
}