/* ============================================================
   문의하기 위젯 — 채팅 미허용 회사(울림 외) 전용 우측 하단 위젯
   브랜드(인주색) #812B27 · chat-widget 과 동일한 위치/톤
   2026-09-02 M10: 리터럴 색·순검정 그림자 → renewal 토큰(폴백 포함) 전환,
   문의 유형 select 는 직원관리 표 select 규격(appearance:none+셰브론)으로 통일.
   ============================================================ */

.iq-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--rn-brand, #812B27);
    color: #fff;
    border: none;
    box-shadow: var(--rn-shadow-pop, 0 14px 34px rgba(34, 30, 28, .16));
    cursor: pointer;
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, background .15s ease;
}

.iq-fab:hover {
    background: var(--rn-brand-hover, #6E2421);
    transform: translateY(-2px);
}

.iq-fab .material-symbols-outlined {
    font-size: 28px;
}

.iq-fab-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: var(--rn-st-unmatched, #C24A42);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

.iq-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 420px;
    max-width: 100vw;
    background: #fff;
    box-shadow: -6px 0 24px rgba(34, 30, 28, .18); /* 드로어 방향 그림자 — 토큰 기하로 표현 불가, 웜 잉크 색만 (3차 drop-shadow 판정과 동일) */
    z-index: 99999;
    display: flex;
    flex-direction: column;
    transform: translateX(105%);
    transition: transform .25s ease;
}

.iq-panel.iq-open {
    transform: translateX(0);
}

.iq-header {
    height: 52px;
    flex: none;
    background: var(--rn-brand, #812B27);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
}

.iq-title {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.iq-icon-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.iq-icon-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.iq-body {
    flex: 1;
    overflow-y: auto;
    background: var(--rn-bg, #F8F7F5);
}

/* ── 목록 뷰 ── */
.iq-intro {
    margin: 14px 14px 10px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--rn-border-strong, #E2DAD5);
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--rn-grey-text, #57504A);
}

.iq-intro strong {
    color: var(--rn-brand, #812B27);
}

.iq-new-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 14px 12px;
    padding: 11px 0;
    width: calc(100% - 28px);
    background: var(--rn-brand, #812B27);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.iq-new-btn:hover {
    background: var(--rn-brand-hover, #6E2421);
}

.iq-list-title {
    margin: 4px 16px 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--rn-text-dim, #948C83);
}

.iq-ticket {
    margin: 0 14px 8px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--rn-border-soft, #F1EFEC);
    border-radius: 10px;
    cursor: pointer;
}

.iq-ticket:hover {
    border-color: var(--rn-brand-border, #E5C7C4);
}

.iq-ticket-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.iq-ticket-subject {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--rn-text, #221E1C);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.iq-ticket-date {
    margin-top: 4px;
    font-size: 11px;
    color: var(--rn-text-faint, #B8B1A8);
}

.iq-status {
    flex: none;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
}

.iq-status-OPEN {
    background: var(--rn-st-unmatched-soft, #F7ECEB);
    color: var(--rn-st-unmatched, #C24A42);
}

.iq-status-IN_PROGRESS {
    background: var(--rn-st-done-soft, #E9F1E8);
    color: var(--rn-st-done, #1F7A4D);
}

.iq-status-RESOLVED,
.iq-status-CLOSED {
    background: var(--rn-grey, #F1EFEC);
    color: var(--rn-text-sub, #7C756D);
}

.iq-empty {
    margin: 30px 0;
    text-align: center;
    font-size: 13px;
    color: var(--rn-text-faint, #B8B1A8);
}

/* ── 새 문의 작성 뷰 ── */
.iq-compose {
    padding: 16px 14px;
}

.iq-label {
    display: block;
    margin: 10px 2px 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--rn-text-sub, #7C756D);
}

.iq-category {
    width: 100%;
    padding: 10px 34px 10px 10px;
    border: 1px solid var(--rn-input-border, #E7E4DF);
    border-radius: 10px;
    font-size: 13px;
    font-family: inherit;
    color: var(--rn-text, #221E1C);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--rn-card-bg, #fff);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23837D76' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
}

.iq-textarea {
    width: 100%;
    min-height: 140px;
    padding: 12px;
    border: 1px solid var(--rn-input-border, #E7E4DF);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.6;
    resize: vertical;
    box-sizing: border-box;
    font-family: inherit;
}

.iq-textarea:focus,
.iq-category:focus {
    outline: none;
    border-color: var(--rn-brand, #812B27);
}

.iq-submit {
    width: 100%;
    margin-top: 14px;
    padding: 12px 0;
    background: var(--rn-brand, #812B27);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.iq-submit:disabled {
    background: #c9a6a3;
    cursor: default;
}

/* ── 스레드 뷰 ── */
.iq-thread {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.iq-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
}

.iq-msg {
    max-width: 82%;
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.iq-msg-user {
    margin-left: auto;
    background: var(--rn-brand, #812B27);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.iq-msg-admin {
    margin-right: auto;
    background: #fff;
    border: 1px solid var(--rn-border-strong, #E2DAD5);
    color: var(--rn-text, #221E1C);
    border-bottom-left-radius: 4px;
}

.iq-msg-meta {
    font-size: 10px;
    color: var(--rn-text-faint, #B8B1A8);
    margin: -4px 2px 10px;
}

.iq-msg-meta-user {
    text-align: right;
}

.iq-inputbar {
    flex: none;
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    background: #fff;
    border-top: 1px solid var(--rn-border-soft, #F1EFEC);
}

.iq-inputbar textarea {
    flex: 1;
    max-height: 90px;
    min-height: 38px;
    padding: 9px 12px;
    border: 1px solid var(--rn-input-border, #E7E4DF);
    border-radius: 10px;
    font-size: 13px;
    resize: none;
    font-family: inherit;
}

.iq-inputbar textarea:focus {
    outline: none;
    border-color: var(--rn-brand, #812B27);
}

.iq-send {
    flex: none;
    width: 42px;
    height: 38px;
    border: none;
    border-radius: 10px;
    background: var(--rn-brand, #812B27);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.iq-send:hover {
    background: var(--rn-brand-hover, #6E2421);
}

@media (max-width: 640px) {
    .iq-panel {
        width: 100vw;
    }
}