/* 졸업작품(Capstone) 입력 화면 공통 스타일.
   계획서 제출 · 작품 제출 · 재료신청 모달이 같은 모양을 쓰도록 여기 모았다.
   예전에는 화면마다 ul/li 와 row/col 을 제각각 써서 같은 항목이 화면마다 달라 보였다. */

/* ── 폼 껍데기 ────────────────────────────────────────────────── */

.cap-form {
    max-width: 56rem;
    margin: 0 auto;
}

.cap-form-head {
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e3e6f0;
}

.cap-form-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark, #1C2035);
    word-break: keep-all;
}

.cap-form-sub {
    margin-top: .35rem;
    font-size: .88rem;
    color: #7b8095;
}

/* ── 구역 ─────────────────────────────────────────────────────── */

.cap-section {
    padding: 1.25rem 1.4rem;
    background: #fff;
    border: 1px solid #e6e9f2;
    border-radius: .6rem;
}

    .cap-section + .cap-section {
        margin-top: 1rem;
    }

.cap-section-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 1rem;
    padding-bottom: .5rem;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--primary, #4761FF);
    border-bottom: 1px solid #eef0f7;
}

    .cap-section-title i {
        font-size: .95rem;
    }

/* ── 입력 항목 ────────────────────────────────────────────────── */

.cap-field + .cap-field,
.cap-row + .cap-field,
.cap-field + .cap-row,
.cap-row + .cap-row {
    margin-top: 1rem;
}

.cap-field > label,
.cap-field > .cap-label {
    display: block;
    margin-bottom: .3rem;
    font-size: .86rem;
    font-weight: 600;
    color: #414560;
}

.cap-required::after {
    content: "필수";
    margin-left: .35rem;
    padding: .05rem .3rem;
    font-size: .68rem;
    font-weight: 700;
    color: #c0392b;
    background: #fdeceb;
    border-radius: .2rem;
    vertical-align: 1px;
}

.cap-note {
    margin-left: .3rem;
    font-size: .76rem;
    font-weight: 400;
    color: #9aa0b5;
}

.cap-hint {
    margin-top: .3rem;
    font-size: .78rem;
    line-height: 1.55;
    color: #8a8fa3;
}

/* ★ 위 인접 규칙이 그리드 안에서도 먹으면 두 번째 칸만 아래로 밀려
   같은 행의 입력들이 세로로 어긋난다(실측: 16px 차이). 행 안에서는 끈다.
   행 안의 간격은 gap 이 담당한다. */
.cap-row > .cap-field + .cap-field,
.cap-row-3 > .cap-field + .cap-field {
    margin-top: 0;
}

/* 라벨이 한 줄/두 줄로 갈려도 입력의 세로 위치가 맞도록 아래를 기준으로 정렬한다 */
.cap-row,
.cap-row-3 {
    align-items: end;
}

/* 짝을 이루는 입력을 한 줄에 (학번·이름 등) */
.cap-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
}

.cap-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
}

@media (max-width: 575.98px) {
    .cap-row,
    .cap-row-3 { grid-template-columns: 1fr; }

    .cap-section { padding: 1rem; }
}

/* 폼 하단 버튼 */
.cap-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1.25rem;
}

    .cap-actions .btn {
        min-width: 6rem;
    }

    .cap-actions .cap-actions-left {
        margin-right: auto;
    }

/* ── 파일 끌어다 놓기 영역 ────────────────────────────────────── */

.dropzone {
    position: relative;
    display: block;
    padding: 1.4rem 1rem;
    text-align: center;
    background: #fafbfe;
    border: 1.5px dashed #ccd2e8;
    border-radius: .55rem;
    transition: border-color .15s ease, background .15s ease;
}

    .dropzone:hover:not(.is-disabled) {
        border-color: var(--primary, #4761FF);
        background: #f5f7ff;
    }

    /* dropzone.js 가 붙여 준다. 없어도 업로드는 동작한다. */
    .dropzone.is-dragover {
        border-color: var(--primary, #4761FF);
        border-style: solid;
        background: #eef1ff;
    }

    .dropzone.is-disabled {
        background: #f4f5f9;
        border-style: solid;
        border-color: #e3e6f0;
        opacity: .7;
    }

/* 파일 입력을 영역 전체에 투명하게 깔아 둔다 — 클릭과 드롭을 모두 받는다 */
.dropzone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.dropzone-inner {
    pointer-events: none;              /* 클릭이 아래 input 으로 통과하게 */
}

.dropzone-icon {
    display: block;
    margin-bottom: .5rem;
    font-size: 1.6rem;
    color: #aeb5d0;
}

.dropzone.is-dragover .dropzone-icon,
.dropzone:hover:not(.is-disabled) .dropzone-icon {
    color: var(--primary, #4761FF);
}

.dropzone-text {
    font-size: .88rem;
    color: #55597a;
}

.dropzone-hint {
    margin-top: .3rem;
    font-size: .76rem;
    color: #9aa0b5;
}

/* ── 고른 파일 목록 ───────────────────────────────────────────── */

.cap-filelist {
    margin-top: .6rem;
}

.cap-file {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .65rem;
    background: #fff;
    border: 1px solid #e6e9f2;
    border-radius: .4rem;
    font-size: .85rem;
}

    .cap-file + .cap-file {
        margin-top: .35rem;
    }

    .cap-file.is-new {
        border-color: #bcd6c4;
        background: #f4fbf6;
    }

.cap-file-icon {
    flex: 0 0 auto;
    width: 1.1rem;
    text-align: center;
    color: var(--primary, #4761FF);
}

.cap-file.is-new .cap-file-icon {
    color: #2f9e5e;
}

.cap-file-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .cap-file-name a {
        color: inherit;
        text-decoration: none;
    }

    .cap-file-name a:hover {
        color: var(--primary, #4761FF);
        text-decoration: underline;
    }

.cap-file-meta {
    flex: 0 0 auto;
    font-size: .76rem;
    color: #9aa0b5;
    white-space: nowrap;
}

.cap-file-remove {
    flex: 0 0 auto;
    padding: 0 .3rem;
    font-size: 1.1rem;
    line-height: 1;
    color: #b6bacb;
    background: transparent;
    border: 0;
    cursor: pointer;
}

    .cap-file-remove:hover {
        color: #c0392b;
    }

/* 업로드 진행 */
.cap-uploading {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .6rem;
    font-size: .85rem;
    color: #55597a;
}

/* 관리자 전용 구역 — 학생 눈에는 안 보이지만, 관리자에게는 성격이 다르다는 표시 */
.cap-section-admin {
    background: #fffdf7;
    border-color: #f0e2c0;
}

    .cap-section-admin .cap-section-title {
        color: #a5761b;
        border-bottom-color: #f3e8cf;
    }

/* 여러 줄 안내 (동영상 제출 방법 등) */
.cap-guide {
    padding: .8rem 1rem;
    margin-bottom: 1rem;
    background: #f7f8fc;
    border: 1px solid #e6e9f2;
    border-radius: .45rem;
    font-size: .84rem;
    line-height: 1.65;
    color: #4a4e66;
}

.cap-guide-list {
    margin: .5rem 0 .4rem;
    padding-left: 1.2rem;
}

    .cap-guide-list li + li {
        margin-top: .2rem;
    }

/* 진행 막대 */
.cap-progress {
    height: .45rem;
    margin-top: .5rem;
}

/* 동의 체크 */
.cap-agree {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 0;
    font-size: .9rem;
    line-height: 1.6;
    color: #414560;
    cursor: pointer;
}

    .cap-agree .form-check-input {
        flex: 0 0 auto;
        width: 1.15rem;
        height: 1.15rem;
        margin-top: .12rem;
    }

/* 참여학생처럼 라벨 없이 줄이 이어지는 경우의 간격 */
.cap-field > .cap-row + .cap-row {
    margin-top: .5rem;
}

/* ── 검증 표시 ────────────────────────────────────────────────── */

/* 제목 줄에 붙는 '필수' 배지 (.cap-required::after 와 같은 모양) */
.cap-badge-req {
    margin-left: .35rem;
    padding: .08rem .35rem;
    font-size: .68rem;
    font-weight: 700;
    color: #c0392b;
    background: #fdeceb;
    border-radius: .2rem;
    vertical-align: 1px;
}

/* 검증 메시지. Blazor 의 ValidationMessage 가 붙이는 클래스와 같은 모양으로 맞춘다. */
.cap-error,
.cap-form .validation-message {
    display: block;
    margin-top: .3rem;
    font-size: .8rem;
    font-weight: 500;
    color: #c0392b;
}

/* 문제가 있는 칸은 테두리로도 알린다 */
.cap-form .invalid,
.cap-form .form-control.invalid,
.cap-form .form-select.invalid {
    border-color: #e08b83;
    box-shadow: 0 0 0 .15rem rgba(192, 57, 43, .1);
}

.cap-field.has-error .dropzone {
    border-color: #e08b83;
    background: #fdf6f5;
}

/* 맨 위 요약 — 어디가 비었는지 한눈에 */
.cap-validation-summary {
    padding: .8rem 1rem;
    margin-bottom: 1rem;
    background: #fdeceb;
    border: 1px solid #f3c9c4;
    border-radius: .5rem;
    font-size: .86rem;
    color: #9d2f22;
}

    .cap-validation-summary ul {
        margin: .4rem 0 0;
        padding-left: 1.2rem;
    }

    .cap-validation-summary li + li {
        margin-top: .15rem;
    }