/* GAMEBOY.KR AI 강의실 - 강의 문의 게시판 (/ai-class/qna/)
   site.css 의 토큰과 부품(.btn, .actions, .crumbs, .facts, .callout, .task, .sr-only)을 그대로 쓰고,
   게시판에만 있는 것(목록, 입력칸, 상태 표시, 강사 답변 상자)만 더한다.
   색은 모두 토큰으로만 쓴다. 그래야 어두운 화면에서 따로 손대지 않아도 같이 바뀐다.
   휴대폰을 먼저 그리고, 넓은 화면(1024px 부터)에서 목록을 표처럼 펼친다. */

/* ---------- 틀 ---------- */

.qna {
    max-width: var(--wide);
    margin: 0 auto;
    padding: 1.25rem var(--gutter) 4.5rem;
}
/* 글 보기, 쓰기, 비밀번호 화면: 강의 본문 폭으로 좁혀 한 줄이 너무 길지 않게 */
.qna-narrow { max-width: calc(var(--measure) + 2 * var(--gutter)); }

.qna-head { padding: 1.25rem 0 .5rem; }
.qna-h1 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.125rem, 8vw, 3rem);
    line-height: 1.18;
    letter-spacing: -.02em;
    text-wrap: balance;
}
.qna-lead {
    max-width: 40rem;
    margin: .875rem 0 0;
    color: var(--ink-2);
    font-size: 1.1875rem;
    line-height: 1.65;
}
.qna-head .actions { margin-top: 1.5rem; }
.qna-h2 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.3;
}

/* 강조 상자는 위 이름표 자리 때문에 위 간격이 크다(site.css). 아래 간격만 더한다 */
.qna .callout { margin-bottom: 1.75rem; }

/* ---------- 상태 표시 ---------- */

/* 색만으로 구분하지 않도록 늘 글자(답변 대기, 답변 완료)와 함께 쓴다 */
.qna-state, .qna-flag {
    display: inline-flex;
    align-items: center;
    padding: .125rem .625rem;
    border-radius: 999px;
    background: var(--warn-wash);
    color: var(--warn);
    font-weight: 800;
    font-size: .9375rem;
    line-height: 1.5;
    white-space: nowrap;
}
.qna-state.is-done { background: var(--tip-wash); color: var(--tip); }
.qna-flag { background: var(--caution-wash); color: var(--caution); }

/* 자물쇠: 그림 글자 대신 SVG 모양을 글자색으로 칠한다 */
.qna-lock {
    display: inline-block;
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    margin-right: .375em;
    vertical-align: -.125em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 11V8a4.5 4.5 0 0 1 9 0v3' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3Crect x='4.5' y='10.5' width='15' height='11' rx='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 11V8a4.5 4.5 0 0 1 9 0v3' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3Crect x='4.5' y='10.5' width='15' height='11' rx='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.qna-secret {
    display: inline-flex;
    align-items: center;
    color: var(--ink-2);
    font-weight: 800;
    font-size: 1rem;
}
.qna-secret-big {
    margin: 0 0 .75rem;
    padding: .25rem .875rem;
    border-radius: 999px;
    background: var(--violet-wash);
    color: var(--violet);
}

/* ---------- 목록 ---------- */

.qna-admin-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem 1rem;
    margin: 1.5rem 0 0;
    padding: .875rem 1.125rem;
    border-radius: 16px;
    background: var(--violet-wash);
    color: var(--ink-2);
    font-size: 1rem;
}
.qna-admin-bar strong { color: var(--violet); font-size: 1.25rem; font-weight: 800; }

.qna-tools {
    display: grid;
    gap: 1rem;
    margin: 1.75rem 0 1rem;
}
.qna-filter { display: grid; gap: .375rem; max-width: 32rem; }
.qna-filter-row { display: flex; gap: .5rem; }
.qna-filter-row .qna-select { flex: 1 1 auto; min-width: 0; }
.qna-filter-row .btn { flex: 0 0 auto; }
.qna-count { margin: 0; color: var(--ink-2); font-size: 1rem; font-weight: 700; }
.qna-count-page { color: var(--ink-3); font-weight: 600; }

.qna-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.qna-list-head { display: none; }

/* 휴대폰: 카드. 위에 상태와 강의, 가운데 제목, 아래 이름과 날짜 */
.qna-item {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "state course"
        "title title"
        "meta  meta";
    gap: .375rem .75rem;
    align-items: center;
    padding: 1rem 1.125rem;
    background: var(--sheet);
    border: 1px solid var(--line);
    border-radius: 18px;
}
.qna-item-title {
    grid-area: title;
    color: var(--ink);
    font-weight: 800;
    font-size: 1.1875rem;
    line-height: 1.45;
    text-decoration: none;
    overflow-wrap: anywhere;
}
/* 제목 링크가 카드 전체를 덮어 어디를 눌러도 열린다. 키보드 초점도 카드 둘레에 그린다 */
.qna-item-title::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
}
.qna-item-title:focus-visible { outline: none; }
.qna-item-title:focus-visible::after { outline: 3px solid var(--violet); outline-offset: 2px; }
.is-secret .qna-item-title { color: var(--ink-2); }
.qna-item-state { grid-area: state; display: flex; flex-wrap: wrap; gap: .25rem; }
.qna-item-course {
    grid-area: course;
    color: var(--ink-3);
    font-weight: 700;
    font-size: .9375rem;
    line-height: 1.4;
}
.qna-item-meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    gap: .125rem .75rem;
    color: var(--ink-3);
    font-size: 1rem;
}
.qna-item-no { display: none; }
.qna-item-date::before {
    content: "·";
    content: "·" / "";
    margin-right: .75rem;
    color: var(--line-2);
}

.qna-empty {
    display: grid;
    justify-items: center;
    gap: 1rem;
    padding: 2.5rem 1.25rem;
    background: var(--sheet);
    border: 1.5px dashed var(--line-2);
    border-radius: 18px;
    color: var(--ink-2);
    text-align: center;
}
.qna-empty p { margin: 0; }

/* 쪽 번호 */
.qna-pages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    margin-top: 2rem;
}
.qna-pages ol { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.qna-pages a, .qna-pages [aria-current="page"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 .875rem;
    border: 1.5px solid var(--line-2);
    border-radius: 999px;
    background: var(--sheet);
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
}
.qna-pages [aria-current="page"] { background: var(--violet); border-color: var(--violet); color: var(--on-violet); }

/* 넓은 화면: 표처럼 번호 | 상태 | 관련 강의 | 제목 | 이름 | 날짜 */
@media (min-width: 1024px) {
    .qna-tools {
        grid-template-columns: minmax(0, 32rem) auto;
        justify-content: space-between;
        align-items: end;
    }
    .qna-board {
        --qna-cols: 3.5rem 6.75rem 12rem minmax(0, 1fr) 8rem 6.5rem;
        background: var(--sheet);
        border: 1px solid var(--line);
        border-radius: 18px;
        overflow: hidden;
    }
    .qna-list-head, .qna-item {
        grid-template-columns: var(--qna-cols);
        column-gap: 1rem;
    }
    /* 머리줄은 칸 순서가 화면 순서와 같아 자리 이름 없이 차례로 채운다 */
    .qna-list-head {
        display: grid;
        padding: .75rem 1.25rem;
        background: var(--paper);
        border-bottom: 1px solid var(--line-2);
        color: var(--ink-3);
        font-size: .9375rem;
        font-weight: 800;
    }
    .qna-list { gap: 0; }
    .qna-item {
        grid-template-areas: "no state course title name date";
        padding: .875rem 1.25rem;
        background: none;
        border: 0;
        border-radius: 0;
    }
    .qna-item + .qna-item { border-top: 1px solid var(--line); }
    .qna-item-title { font-size: 1.125rem; }
    .qna-item-title::after { border-radius: 0; }
    /* 판이 overflow: hidden 이라 초점 테두리를 줄 안쪽에 그린다 */
    .qna-item-title:focus-visible::after { outline-offset: -3px; }
    .qna-item-meta { display: contents; }
    .qna-item-no { display: block; grid-area: no; color: var(--ink-3); font-size: .9375rem; }
    .qna-item-name { grid-area: name; color: var(--ink-2); overflow-wrap: anywhere; }
    .qna-item-date { grid-area: date; font-size: .9375rem; }
    .qna-item-date::before { display: none; }
    .is-hidden { background: var(--paper); }
}

/* ---------- 글 보기 ---------- */

.qna-post { margin-top: 1.25rem; }
.qna-post-kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .875rem;
    margin: 0 0 .875rem;
}
.qna-post-course { color: var(--ink-3); font-weight: 700; font-size: 1rem; }
.qna-post-title {
    margin: 0 0 1rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    line-height: 1.25;
    letter-spacing: -.015em;
    overflow-wrap: anywhere;
}
.qna-post .facts { padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
/* 손님이 쓴 글: 긴 주소가 화면 밖으로 밀려나지 않게 아무 데서나 줄을 바꾼다 */
.qna-text { font-size: 1.125rem; line-height: 1.8; overflow-wrap: anywhere; }
.qna-post .qna-text { margin-top: 1.5rem; }

/* 강사 답변: 강조 상자(.callout)에 보라 이름표. 손님 글과 한눈에 나뉘게 테두리를 두른다 */
.qna-answer {
    --tone: var(--violet);
    --wash: var(--violet-wash);
    border: 2px solid var(--violet);
}
.qna-answer .callout-title { margin-left: calc(-1.25rem - 2px); }
.qna-answer .callout-body { color: var(--ink); font-size: 1.125rem; line-height: 1.8; }
.qna-answer-date { margin: 1rem 0 0; color: var(--ink-3); font-size: .9375rem; font-weight: 700; }

.qna-waiting {
    margin: 2rem 0 0;
    padding: 1.125rem 1.25rem;
    border: 1.5px dashed var(--line-2);
    border-radius: 18px;
    color: var(--ink-2);
}

.qna-bottom { margin-top: 2.5rem; }

.qna-admin {
    display: grid;
    gap: 1.25rem;
    margin-top: 3rem;
    padding: 1.25rem;
    background: var(--sheet);
    border: 1.5px solid var(--line-2);
    border-radius: 20px;
}
.qna-admin .qna-hint { margin-top: -.75rem; }
.qna-admin .qna-form { margin-top: 0; }
.qna-admin-status {
    display: grid;
    justify-items: start;
    gap: .75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}
.qna-admin-status .qna-hint { margin: 0; }

/* ---------- 양식 ---------- */

.qna-form { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
.qna-field { display: grid; gap: .375rem; }
.qna-field > label, .qna-label {
    color: var(--ink);
    font-weight: 800;
    font-size: 1.125rem;
    line-height: 1.45;
}
.qna-optional { margin-left: .375rem; color: var(--ink-3); font-weight: 600; font-size: .9375rem; }
.qna-hint { margin: 0; color: var(--ink-3); font-size: 1rem; line-height: 1.55; }

/* 휴대폰에서 눌렀을 때 화면이 확대되지 않도록 입력 글자는 16px 보다 크게 (18px) */
.qna-input {
    display: block;
    width: 100%;
    min-height: 3.25rem;
    margin: 0;
    padding: .75rem 1rem;
    border: 1.5px solid var(--line-2);
    border-radius: 14px;
    background: var(--sheet);
    color: var(--ink);
    font: inherit;
    font-size: 1.125rem;
    line-height: 1.5;
}
textarea.qna-input { min-height: 13rem; resize: vertical; }
/* site.css 의 초점 표시는 모서리를 6px 로 바꾸므로, 입력칸은 제 모양을 지킨다 */
.qna-input:focus-visible { border-color: var(--violet); border-radius: 14px; outline-offset: 2px; }
.qna-input[aria-invalid="true"] { border-color: var(--caution); border-width: 2px; }

/* 고르기 칸: 화살표를 글자색 테두리로 그려 어두운 화면에서도 보이게 */
.qna-select { position: relative; display: block; }
.qna-select select { -webkit-appearance: none; appearance: none; padding-right: 3rem; cursor: pointer; }
.qna-select::after {
    content: "";
    position: absolute;
    right: 1.25rem;
    top: 50%;
    width: .625rem;
    height: .625rem;
    margin-top: -.5rem;
    border-right: 2px solid var(--ink-2);
    border-bottom: 2px solid var(--ink-2);
    transform: rotate(45deg);
    pointer-events: none;
}

.qna-error {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: .125rem 0 0;
    color: var(--caution);
    font-weight: 700;
    font-size: 1.125rem;   /* 꼭 읽어야 하는 글이라 본문과 같은 18px (명세: 글자 18px 이상) */
    line-height: 1.55;
}
.qna-error::before {
    content: "";
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: .2rem;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Cpath d='M12 7v6.5' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17' r='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Cpath d='M12 7v6.5' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17' r='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 위쪽 오류 요약(빨강 강조 상자): 칸으로 가는 링크에 밑줄.
   화면이 열릴 때 초점을 받는다(autofocus). site.css 의 초점 표시가 모서리를 6px 로 바꾸므로 상자 모양을 지킨다 */
.qna-alert .callout-body a { text-decoration: underline; text-underline-offset: .2em; }
.qna-alert:focus-visible { border-radius: 4px 20px 20px 20px; }

/* 비밀글 체크: site.css 의 체크 상자(.task)를 상자로 감싼다. 켜져 있으면 보라 */
.qna-check {
    padding: 1rem 1.125rem;
    background: var(--sheet);
    border: 1.5px solid var(--line-2);
    border-radius: 14px;
}
.qna-check:has(input:checked) { background: var(--violet-wash); border-color: var(--violet); }
.qna-check strong { display: block; font-weight: 800; font-size: 1.125rem; }
.qna-check-note { display: block; color: var(--ink-2); font-size: 1rem; line-height: 1.55; }

.qna-btn-danger { border-color: var(--caution); color: var(--caution); }

@media (hover: hover) {
    .qna-item:hover { border-color: var(--violet); }
    .qna-item:hover .qna-item-title {
        color: var(--violet);
        text-decoration: underline;
        text-decoration-thickness: from-font;
        text-underline-offset: .2em;
    }
    .qna-pages a:hover { border-color: var(--violet); color: var(--violet); }
    .qna-btn-danger:hover { background: var(--caution-wash); border-color: var(--caution); color: var(--caution); }
}
@media (hover: hover) and (min-width: 1024px) {
    .qna-item:hover { background: var(--violet-wash); }
}

@media print {
    .qna-form, .qna-admin, .qna-bottom, .qna-tools, .qna-pages { display: none !important; }
}