body {
    margin: 0;
    min-height: 100vh;
    color: #fff;
    overflow-x: hidden;
    background:
        linear-gradient(rgba(8, 12, 25, 0.76), rgba(8, 12, 25, 0.88)),
        url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=1800&q=80') center / cover fixed;
}

/* =========================================================
   QnA 게시판 전용 스타일
   - qna.php 화면 전용 CSS입니다.
   - PHP 파일에서 인라인 <style>을 제거하고 이 파일로 분리했습니다.
   - 기존 프로젝트/공지사항 페이지와 같은 글래스모피즘 분위기를 유지합니다.
========================================================= */
* {
    font-family: 'NanumSquareAc', sans-serif;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

.page {
    position: relative;
    min-height: 100vh;
    overflow: visible;
}

/* =========================================================
   공통 glass 패널
========================================================= */
.glass,
.side-panel,
.chat-panel,
.quick-panel,
.question-compose-panel {
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}

.side-panel,
.chat-panel,
.quick-panel,
.question-compose-panel {
    border-radius: 28px;
}

/* =========================================================
   레이아웃
========================================================= */
.container-wrap {
    position: relative;
    z-index: 5;
    width: min(1180px, calc(100% - 40px));
    max-width: none;
    margin: 0 auto;
    padding: 95px 0 80px;
    transition: transform 0.25s ease;
}

.container-wrap.has-floating-profile {
    transform: translateX(130px);
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.82);
    font-size: 14px;
    font-weight: 900;
    backdrop-filter: blur(10px);
}

.page-title {
    margin: 0;
    font-size: 42px;
    font-weight: 900;
    letter-spacing: -0.8px;
    text-shadow: 0 14px 34px rgba(0,0,0,0.28);
}

.page-desc {
    margin: 10px 0 0;
    font-size: 16px;
    color: rgba(255,255,255,0.72);
    line-height: 1.7;
}

/* 배경 없는 QnA hero 영역 */
.qna-hero {
    position: relative;
    overflow: hidden;
    padding: 10px 10px 10px 0;
    margin-bottom: 0;
}

.qna-hero .eyebrow {
    margin-bottom: 18px;
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.88);
}

.qna-hero .page-title {
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.06;
    letter-spacing: -1.8px;
}

.qna-hero .page-desc {
    max-width: 660px;
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 17px;
    line-height: 1.7;
}

.qna-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    justify-content: stretch;
    gap: 24px;
    align-items: start;
}

.container-wrap.has-floating-profile .qna-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
}

.main-area {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

/* =========================================================
   우측 검색/카테고리 패널
========================================================= */
.side-panel {
    position: sticky;
    top: 325px;
    align-self: start;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    padding: 22px;
    opacity: 0;
    animation: revealSidePanel 0.92s cubic-bezier(0.22, 1, 0.36, 1) 0.26s forwards;
}

@keyframes revealSidePanel {
    0% {
        opacity: 0;
        transform: translateX(18px) translateY(8px) scale(0.988);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1);
        filter: blur(0);
    }
}

.side-title {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 900;
}

.search-box {
    margin-bottom: 18px;
}

.search-input,
.qna-select,
.qna-input,
.qna-textarea {
    width: 100%;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.08);
    color: #fff;
    outline: none;
    border-radius: 16px;
    padding: 13px 15px;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.25s ease;
}

.search-input {
    height: 50px;
}

.qna-select option {
    color: #111;
}

.qna-textarea {
    min-height: 104px;
    resize: vertical;
    line-height: 1.7;
}

.search-input::placeholder,
.qna-input::placeholder,
.qna-textarea::placeholder {
    color: rgba(255,255,255,0.45);
}

.search-input:focus,
.qna-select:focus,
.qna-input:focus,
.qna-textarea:focus {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.36);
    box-shadow: 0 0 0 4px rgba(255,255,255,0.08);
}

.category-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
}

.category-btn {
    width: 100%;
    min-height: 46px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    font-weight: 900;
    transition: all 0.25s ease;
    text-decoration: none;
}

.category-btn:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
    transform: translateX(4px);
}

.category-btn.active {
    background: rgba(255,255,255,0.92);
    border-color: rgba(255,255,255,0.92);
    color: #000;
    box-shadow: 0 14px 28px rgba(0,0,0,0.18);
}

.category-count {
    font-size: 12px;
    opacity: 0.72;
}

.side-info {
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 18px;
}

.side-info-title {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 900;
}

.side-info-text {
    margin: 0;
    color: rgba(255,255,255,0.66);
    font-size: 13px;
    line-height: 1.7;
}

/* =========================================================
   빠른질문 / 질문 작성
========================================================= */
.quick-panel,
.chat-panel,
.question-compose-panel {
    padding: 24px;
}

.quick-panel {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07)),
        rgba(255, 255, 255, 0.08);
}

.quick-panel::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, #ffffff, #a7c7ff);
    opacity: 0.88;
}

.quick-panel > * {
    position: relative;
    z-index: 1;
}

.section-title-row,
.compose-head,
.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.section-title,
.compose-title,
.chat-title {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
}

.section-caption,
.compose-sub,
.chat-sub {
    color: rgba(255,255,255,0.64);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.quick-card {
    display: block;
    min-height: 112px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 22px;
    background: rgba(255,255,255,0.07);
    padding: 16px;
    color: #fff;
    text-align: left;
    transition: all 0.25s ease;
    cursor: pointer;
    text-decoration: none;
}

.quick-card:hover {
    color: #fff;
    background: rgba(255,255,255,0.14);
    transform: translateY(-3px);
}

.quick-label {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.8);
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 12px;
}

.quick-title {
    margin: 0;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.45;
}

.compose-form {
    display: grid;
    gap: 12px;
}

.compose-row {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 10px;
}

.compose-submit,
.small-action-btn,
.answer-submit-btn {
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.92);
    color: #000;
    border-radius: 999px;
    font-weight: 900;
    transition: all 0.25s ease;
    cursor: pointer;
}

.compose-submit {
    justify-self: end;
    min-height: 46px;
    padding: 0 22px;
}

.compose-submit:hover,
.small-action-btn:hover,
.answer-submit-btn:hover {
    background: #fff;
    transform: translateY(-2px);
}

.login-compose-notice,
.empty-state {
    padding: 18px;
    border: 1px dashed rgba(255,255,255,0.2);
    border-radius: 20px;
    color: rgba(255,255,255,0.74);
    background: rgba(255,255,255,0.06);
    font-weight: 900;
    text-align: center;
}

.chat-panel {
    overflow: hidden;
    padding: 20px;
}

/* =========================================================
   채팅형 QnA 목록
========================================================= */
.chat-header {
    margin: -20px -20px 22px;
    padding: 24px 26px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    background: rgba(255, 255, 255, 0.035);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.84);
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 12px rgba(255,255,255,0.8);
}

.chat-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.chat-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-item.is-focused {
    animation: focusPulse 1.4s ease 1;
}

@keyframes focusPulse {
    0%, 100% { filter: none; }
    35% { filter: drop-shadow(0 0 22px rgba(255,255,255,0.35)); }
}

.message-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.message-row.answer {
    justify-content: flex-end;
}

.avatar {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.92);
    color: #000;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(0,0,0,0.22);
}

.answer .avatar {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.16);
}

.bubble {
    max-width: 78%;
    padding: 17px 18px;
    border-radius: 22px;
    line-height: 1.7;
    box-shadow: 0 12px 28px rgba(0,0,0,0.22);
}

.question-bubble {
    background: rgba(255,255,255,0.92);
    color: #000;
    border-bottom-left-radius: 6px;
}

.answer-bubble {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.88);
    border-bottom-right-radius: 6px;
}

.bubble-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 900;
    opacity: 0.72;
}

.bubble-title {
    margin: 0;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.55;
}

.bubble-text {
    margin: 8px 0 0;
    font-size: 14px;
    color: rgba(255,255,255,0.82);
    white-space: pre-wrap;
    word-break: break-word;
}

.question-bubble .bubble-text {
    color: rgba(0,0,0,0.72);
}

.edited-pill,
.waiting-pill {
    display: inline-flex;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 900;
    background: rgba(0,0,0,0.09);
    color: rgba(0,0,0,0.62);
}

.answer-bubble .edited-pill,
.waiting-pill {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.72);
}

.bubble-actions,
.form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.question-bubble .bubble-actions {
    justify-content: flex-start;
}

.small-action-btn {
    min-height: 32px;
    padding: 0 12px;
    font-size: 12px;
    background: rgba(0,0,0,0.08);
    color: rgba(0,0,0,0.78);
    border-color: rgba(0,0,0,0.12);
}

.answer-bubble .small-action-btn {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border-color: rgba(255,255,255,0.14);
}

.small-action-btn.danger {
    color: #ffd6d6;
}

.question-bubble .small-action-btn.danger {
    color: #922;
}

.small-action-btn.quick {
    background: rgba(37,99,235,0.14);
    color: #1e3a8a;
    border-color: rgba(37,99,235,0.22);
}

.small-action-btn.quick:hover {
    background: rgba(37,99,235,0.22);
    color: #172554;
}

.small-action-btn.quick.is-active {
    background: rgba(0,0,0,0.74);
    color: #fff;
    border-color: rgba(0,0,0,0.24);
}

.quick-mark-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(37,99,235,0.15);
    border: 1px solid rgba(37,99,235,0.2);
    color: #1e3a8a;
    font-size: 11px;
    font-weight: 900;
}

.inline-form {
    display: none;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(0,0,0,0.1);
    gap: 10px;
}

.answer-bubble .inline-form {
    border-top-color: rgba(255,255,255,0.12);
}

.inline-form.is-open {
    display: grid;
}

.question-bubble .inline-form .qna-input,
.question-bubble .inline-form .qna-textarea,
.question-bubble .qna-select {
    color: #111;
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.12);
}

.answer-submit-btn {
    min-height: 38px;
    padding: 0 16px;
    font-size: 13px;
}

.cancel-btn {
    background: rgba(255,255,255,0.08);
    color: #fff;
}

.question-bubble .cancel-btn {
    background: rgba(0,0,0,0.06);
    color: #111;
}

.admin-answer-shell {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.admin-answer-card {
    width: min(78%, 620px);
    border: 1px dashed rgba(255,255,255,0.18);
    border-radius: 22px;
    padding: 16px;
    background: rgba(255,255,255,0.06);
}

.admin-answer-title {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 900;
    color: rgba(255,255,255,0.78);
}

/* =========================================================
   페이지네이션
========================================================= */
.chat-actions {
    display: flex;
    justify-content: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.12);
}

.qna-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qna-page-link,
.qna-page-current,
.qna-page-disabled {
    min-width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.16);
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    transition: all 0.25s ease;
}

.qna-page-link {
    color: #fff;
    background: rgba(255,255,255,0.08);
}

.qna-page-link:hover {
    color: #000;
    background: rgba(255,255,255,0.92);
    border-color: rgba(255,255,255,0.92);
    transform: translateY(-2px);
}

.qna-page-current {
    color: #000;
    background: rgba(255,255,255,0.92);
    border-color: rgba(255,255,255,0.92);
}

.qna-page-disabled {
    color: rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.04);
    cursor: not-allowed;
}

.qna-page-prev,
.qna-page-next {
    min-width: 72px;
    padding: 0 14px;
}

/* =========================================================
   콘텐츠 등장 모션
========================================================= */
.content-motion {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(8px);
    animation: revealContent 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.delay-1 { animation-delay: 0.08s; }
.delay-2 { animation-delay: 0.16s; }
.delay-3 { animation-delay: 0.24s; }

@keyframes revealContent {
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* =========================================================
   반응형
========================================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .content-motion,
    .side-panel {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

@media (max-width: 1300px) {
    .container-wrap.has-floating-profile {
        transform: none;
    }
}

@media (max-width: 1200px) {
    .qna-layout {
        grid-template-columns: minmax(0, 1fr) 280px;
    }
}

@media (max-width: 992px) {
    .container-wrap {
        width: min(100% - 32px, 1180px);
        padding-top: 118px;
    }

    .qna-layout,
    .container-wrap.has-floating-profile .qna-layout {
        grid-template-columns: 1fr;
    }

    .side-panel {
        position: static;
        order: 2;
        max-height: none;
        overflow: visible;
    }

    .main-area {
        order: 1;
    }

    .category-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quick-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .container-wrap {
        width: min(100% - 24px, 1180px);
        padding-top: 96px;
    }

    .qna-hero {
        padding: 28px 0 8px;
    }

    .page-title {
        font-size: 32px;
    }

    .compose-row {
        grid-template-columns: 1fr;
    }

    .compose-submit {
        width: 100%;
    }

    .side-panel,
    .chat-panel,
    .quick-panel,
    .question-compose-panel {
        border-radius: 22px;
    }

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

    .chat-header {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
    }

    .bubble {
        max-width: 86%;
    }

    .message-row.answer {
        justify-content: flex-start;
        flex-direction: row-reverse;
    }

    .answer-bubble {
        border-bottom-right-radius: 22px;
        border-bottom-left-radius: 6px;
    }

    .admin-answer-card {
        width: 100%;
    }
}

.glass-panel-strong {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07));
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 28px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}