@charset "utf-8";

/*
 * 유튜브 게시판 IST-youtube 전용 스타일
 * 게시판 공통 배치(카드 목록 등)는 /css/ist/board.css, M3 토큰 · 컴포넌트는 /css/ist/m3.css (lib/ist.board_skin.lib.php 가 불러온다)
 */

/* 카드 · 본문 배경 : 흰색 (surface-container-lowest, IST-event · IST-program 과 같음) */
.ist-youtube .m3-card { background: var(--m3-surface-container-lowest); }

/* 목록 위 : 관리자 보기 방식 칩 */
.ist-youtube__head { justify-content: flex-start; }

.ist-youtube__mode {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ist-youtube__mode-label { margin-right: 4px; color: var(--m3-on-surface-variant); }
.ist-youtube__mode .m3-chip { cursor: pointer; font-family: inherit; }
.ist-youtube__mode .m3-chip .m3-icon { font-size: 18px; }

/* 카드 썸네일 : 16:9, 유튜브 썸네일(4:3 검은 띠)은 가운데를 잘라 보인다 */
.ist-board-card__media.ist-youtube__media { aspect-ratio: 16 / 9; }

/* 재생 표시 : 가운데 원(56, scrim 위 흰 아이콘), 카드에 마우스를 올리면 primary */
.ist-youtube__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    border-radius: var(--m3-corner-full);
    background: rgba(0, 0, 0, 0.32);
    color: #fff;
    transition: background-color 0.15s linear;
}

.ist-youtube__play .m3-icon { font-size: 32px; }

.ist-board-card__link:hover .ist-youtube__play,
.ist-board-card__link:focus-visible .ist-youtube__play {
    background: var(--m3-primary);
    color: var(--m3-on-primary);
}

/* 영상 (보기 · 레이어 팝업) : 16:9 */
.ist-youtube__player {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--m3-corner-medium);
    background: #000;
}

.ist-youtube__player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* 쇼츠 : 세로 9:16, 보기 화면은 가운데 360px, 레이어 팝업은 화면 높이에 맞춰 폭을 줄인다 */
.ist-youtube__player.is-shorts {
    aspect-ratio: 9 / 16;
    width: min(100%, 360px);
    margin-inline: auto;
}

.ist-board.ist-youtube-layer.is-shorts .ist-youtube-layer__box { width: min(100%, 440px, calc((100vh - 200px) * 9 / 16 + 48px)); }
.ist-youtube-layer.is-shorts .ist-youtube__player { aspect-ratio: 9 / 16; width: 100%; }

/* 보기 : 제목 아래 작성일, 영상 아래 설명 */
.ist-youtube__info { margin-top: 12px; color: var(--m3-on-surface-variant); }
.ist-youtube .ist-board-view__body { min-height: 0; }
.ist-youtube .ist-board-view__body #bo_v_con { margin-top: 24px; }

.ist-youtube__error {
    margin: 0;
    padding: 16px;
    border-radius: var(--m3-corner-small);
    background: var(--m3-error-container);
    color: var(--m3-on-error-container);
}

/* 레이어 팝업 : scrim(#000 32%) 위 대화상자 (surface-container-high, 모서리 28) */
/* .ist-board(글꼴 · 토큰용)의 게시판 여백 · 최대 너비는 쓰지 않는다 */
.ist-board.ist-youtube-layer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: none;
    margin: 0;
    padding: 24px;
}

.ist-board.ist-youtube-layer[hidden] { display: none; }

.ist-youtube-layer__scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
}

.ist-youtube-layer__box {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 960px;
    max-height: 100%;
    overflow: auto;
    padding: 24px;
    /* border-radius: var(--m3-corner-extra-large); */
    /* background: var(--m3-surface-container-high); */
    /* box-shadow: var(--m3-elevation-3); */
}

/* 위 : 닫기 버튼만 오른쪽 (팝업에는 제목을 쓰지 않는다) */
.ist-youtube-layer__head {
    display: flex;
    justify-content: flex-end;
    margin: -8px -8px -8px 0;
}
#yt_layer .m3-icon { color: #fff; }

.ist-youtube-layer__desc {
    max-height: 30vh;
    overflow: auto;
    color: #fff;
    word-break: break-all;
}

.ist-youtube-layer__desc[hidden] { display: none; }

.ist-youtube-layer__actions {
    display: flex;
    justify-content: flex-end;
    margin: -8px -12px -8px 0;
}

/* 글쓰기 : 영상 주소 + 유튜브 썸네일 미리 보기 */
.ist-youtube__url {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ist-youtube__preview {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--m3-on-surface-variant);
}

.ist-youtube__preview[hidden] { display: none; }

.ist-youtube__preview img {
    width: 160px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--m3-corner-small);
    background: #000;
}

.ist-youtube textarea.m3-field__input { min-height: 160px; }

/* 작은 화면 (Compact 0–599) : 팝업을 화면 너비로 */
@media (max-width: 599px) {
    .ist-board.ist-youtube-layer { padding: 16px; }
    .ist-youtube-layer__box { padding: 16px; gap: 12px; border-radius: var(--m3-corner-large); }
    .ist-youtube__preview img { width: 120px; }
}