@charset "utf-8";

/*
 * FAQ 게시판 IST-faq 전용 스타일 : 질문 아코디언
 * 게시판 공통 배치(분류 칩 · 검색 · 보기 · 글쓰기 등)는 /css/ist/board.css, M3 토큰 · 컴포넌트는 /css/ist/m3.css
 * 질문 = surface-container 막대(모서리 medium) + 오른쪽 펼침 꺾쇠, 답변 = 흰 바탕(surface-container-lowest)
 * 스크립트(skin/board/faq/faq.lib.php)가 돌아야 닫힌 모양이 된다. (스크립트가 없으면 모두 펼쳐진 채)
 */

.ist-faq__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ist-faq__item {
    overflow: hidden;
    border-radius: var(--m3-corner-medium);
    background: var(--m3-surface-container);
}

.ist-faq__item.is-notice { background: var(--m3-secondary-container); }

.ist-faq__q {
    display: flex;
    align-items: center;
    margin: 0;
}

.ist-faq__chk { flex: 0 0 auto; padding-left: 8px; }

.ist-faq__btn {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 16px;
    min-width: 0;
    min-height: 72px;
    padding: 16px 16px 16px 24px;
    border: 0;
    background: none;
    color: var(--m3-on-surface);
    text-align: left;
    cursor: pointer;
}

.ist-faq__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ist-faq__title { word-break: keep-all; }
.ist-faq__title .m3-icon { font-size: 18px; vertical-align: -3px; color: var(--m3-on-surface-variant); }

/* 펼침 꺾쇠 : 40 원 안 24 아이콘, 펼치면 위로 */
.ist-faq__arrow {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--m3-on-surface-variant);
    transition: transform 0.3s ease;
}

.ist-faq__arrow .m3-icon { font-size: 24px; }
.ist-faq__item.is-open .ist-faq__arrow { transform: rotate(180deg); }

/* 답변 : 높이 0 ↔ 내용 높이 (grid 0fr ↔ 1fr), 닫히면 화면 읽기 · 탭 이동에서도 빠진다 */
.is-faq-js .ist-faq__a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.is-faq-js .ist-faq__a-inner {
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s 0.3s;
}

.is-faq-js .is-open .ist-faq__a { grid-template-rows: 1fr; }
.is-faq-js .is-open .ist-faq__a-inner { visibility: visible; transition: visibility 0s; }

.ist-faq__con {
    padding: 24px;
    background: var(--m3-surface-container-lowest);
    color: var(--m3-on-surface);
    word-break: keep-all;
}

.ist-faq__con img,
.ist-faq__con video { max-width: 100%; height: auto; }
.ist-faq__con iframe { max-width: 100%; }
.ist-faq__con iframe[src*="youtube"],
.ist-faq__con iframe[src*="vimeo"] { height: auto; aspect-ratio: 16 / 9; } /* 영상 : 좁은 화면에서도 16:9 (에디터가 넣은 높이 고정을 풀어 줌) */
.ist-faq__con > :first-child { margin-top: 0; }
.ist-faq__con > :last-child { margin-bottom: 0; }

.ist-faq__empty { margin: 0; color: var(--m3-on-surface-variant); }

.ist-faq__admin {
    margin: 0;
    padding: 0 16px 8px;
    background: var(--m3-surface-container-lowest);
    text-align: right;
}

.ist-faq__empty-list {
    padding: 64px 16px;
    color: var(--m3-on-surface-variant);
    text-align: center;
}

/* 보기 : 작성일 · 조회 */
.ist-faq__view-info { margin-top: 12px; color: var(--m3-on-surface-variant); }

@media (max-width: 599px) {
    .ist-faq__btn { gap: 8px; min-height: 56px; padding: 12px 8px 12px 16px; }
    .m3b .ist-faq__title.m3-title-medium { font-size: 15px; line-height: 22px; }
    .ist-faq__con { padding: 16px; }
}