/* 문의 게시판 — 2026-11-09 작업 04의 18번에서 음악 감성으로 다시 그렸어요 (사용자: 지금 문의 페이지가 '매우 최악').
   DJ 부스에 신청곡을 넣는 느낌: 맨 위 'REQUEST DESK' 큰 칸(돌아가는 레코드판 · 이퀄라이저 · 단톡방), 분류 = 채널 카드,
   내 문의 = 트랙 목록(번호 · 불빛 상태), 자주 묻는 질문 = 펼치는 카드, 쓰기의 분류 = DJ 패드.
   다크가 기본, 화이트는 [data-theme="light"]에서 색 변수만 바꿔요(theme-light.css의 --lt-*). 처음 판은 2026-11-09 요청 51 */
body:has(.iq) #container_title { display: none; }   /* 머리(head.php)의 게시판 제목 대신 이 스킨의 제목 */
.iq { --iq-card: #17171c; --iq-card2: #1f1f26; --iq-line: #2a2a33; --iq-text: #ededf0; --iq-sub: #a3a3ad; --iq-faint: #73737f;
  --iq-ac: #ff2e63; --iq-ac-soft: rgba(255,46,99,.14); --iq-ac-line: rgba(255,46,99,.45); --iq-ac-text: #ff7aa0;
  --iq-ok: #34d399; --iq-ok-soft: rgba(52,211,153,.13); --iq-wait: #fbbf24; --iq-wait-soft: rgba(251,191,36,.13); --iq-field: #111115;
  max-width: 880px; margin: 0 auto; padding: 4px 0 8px; color: var(--iq-text); font-size: 14.5px; line-height: 1.55; }
[data-theme="light"] .iq { --iq-card: var(--lt-surface, #fff); --iq-card2: var(--lt-subtle, #f7f6f3); --iq-line: var(--lt-border, #dcd8d1); --iq-text: var(--lt-text, #1d1b19);
  --iq-sub: var(--lt-text-3, #6f6a63); --iq-faint: var(--lt-text-4, #a39e97); --iq-ac: var(--lt-accent, #e0244e); --iq-ac-soft: var(--lt-accent-soft, #fdecef);
  --iq-ac-line: rgba(224,36,78,.4); --iq-ac-text: var(--lt-accent-hover, #c81d43); --iq-ok: #15803d; --iq-ok-soft: #e5f4ec; --iq-wait: #b45309; --iq-wait-soft: #fdf3e1; --iq-field: var(--lt-surface, #fff); }
.iq *, .iq *::before, .iq *::after { box-sizing: border-box; }

/* ── 단추 ── */
.iq-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 42px; padding: 0 17px; border-radius: 12px; border: 1px solid var(--iq-line); background: transparent;
  color: var(--iq-text); font: inherit; font-size: 14px; font-weight: 800; text-decoration: none; white-space: nowrap; cursor: pointer; transition: filter .15s, border-color .15s, transform .15s; }
.iq-btn:hover { border-color: var(--iq-sub); }
.iq-btn.is-main { background: linear-gradient(135deg, #ff2e63, #c2307f); border-color: transparent; color: #fff; box-shadow: 0 6px 18px rgba(255,46,99,.32); }
.iq-btn.is-main:hover { filter: brightness(1.07); transform: translateY(-1px); }
.iq-btn.is-kakao { background: #fee500; border-color: #fee500; color: #191600; }
.iq-btn.is-kakao svg { width: 18px; height: 18px; }
.iq-btn.is-ghost { height: 36px; padding: 0 13px; font-weight: 700; }
.iq-btn.is-wide { width: 100%; height: 50px; font-size: 15.5px; border-radius: 14px; }
.iq-btn.is-danger { color: var(--iq-ac-text); }
.iq-btn[disabled] { opacity: .6; }

/* ── 맨 위 REQUEST DESK ── */
.iq-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; margin: 4px 0 14px; padding: 26px 26px 44px; border-radius: 22px;
  background: radial-gradient(120% 140% at 100% 0%, rgba(168,50,158,.5) 0%, rgba(112,52,214,.2) 34%, transparent 62%), linear-gradient(135deg, #1b0f1e 0%, #130f19 55%, #0d0d12 100%);
  border: 1px solid rgba(255,46,99,.24); box-shadow: 0 18px 40px rgba(0,0,0,.32); color: #fff; }
.iq-kick { display: inline-flex; align-items: center; gap: 8px; padding: 4px 11px; border-radius: 999px; background: rgba(255,255,255,.09); font-size: 11px; font-weight: 800; letter-spacing: 2px; color: #ffd3df; }
.iq-live { width: 7px; height: 7px; border-radius: 50%; background: #ff2e63; animation: iq-live 1.6s ease-in-out infinite; }
@keyframes iq-live { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,46,99,.6); } 50% { box-shadow: 0 0 0 6px rgba(255,46,99,0); } }
.iq-title { margin: 10px 0 6px; font-size: 30px; font-weight: 900; letter-spacing: -.5px; line-height: 1.2; color: inherit; }
.iq-hero-d { margin: 0; max-width: 470px; color: rgba(255,255,255,.8); font-size: 14.5px; line-height: 1.6; word-break: keep-all; }
.iq-hero-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.iq-vinyl { width: 148px; height: 148px; filter: drop-shadow(0 12px 26px rgba(0,0,0,.55)); }
.iq-vinyl svg { display: block; width: 100%; height: 100%; animation: iq-spin 9s linear infinite; }
@keyframes iq-spin { to { transform: rotate(360deg); } }
.iq-vinyl .v-disc { fill: #0a0a0d; stroke: #26262e; stroke-width: 1; }
.iq-vinyl .v-groove { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 1; }
.iq-vinyl .v-shine { fill: none; stroke: rgba(255,255,255,.2); stroke-width: 2.4; stroke-linecap: round; }
.iq-vinyl .v-label { fill: #ff2e63; }
.iq-vinyl .v-txt { fill: #fff; font: 800 7px/1 -apple-system, "Segoe UI", sans-serif; letter-spacing: .6px; text-anchor: middle; }
.iq-vinyl .v-hole { fill: #0a0a0d; }
.iq-eq { position: absolute; left: 26px; right: 26px; bottom: 13px; height: 20px; display: flex; align-items: flex-end; gap: 4px; opacity: .6; pointer-events: none; }
.iq-eq i { flex: 1 1 0; height: 30%; border-radius: 2px; background: linear-gradient(180deg, #ff2e63, #7034d6); animation: iq-eq 1.2s ease-in-out infinite; }
.iq-eq i:nth-child(2n) { animation-delay: -.7s; }
.iq-eq i:nth-child(3n) { animation-duration: .9s; }
.iq-eq i:nth-child(4n+1) { animation-duration: 1.55s; }
.iq-eq i:nth-child(5n+2) { animation-delay: -.35s; }
@keyframes iq-eq { 0%, 100% { height: 18%; } 50% { height: 100%; } }
.iq-hero .iq-btn:not(.is-main):not(.is-kakao) { color: #fff; border-color: rgba(255,255,255,.28); }
[data-theme="light"] .iq-hero { background: radial-gradient(120% 140% at 100% 0%, rgba(224,36,78,.16) 0%, rgba(112,52,214,.08) 38%, transparent 64%), linear-gradient(135deg, #fff 0%, #fdf4f6 100%);
  border-color: var(--lt-accent-soft-2, #fbd9e0); box-shadow: 0 12px 30px rgba(29,27,25,.08); color: var(--lt-text, #1d1b19); }
[data-theme="light"] .iq-kick { background: var(--lt-accent-soft, #fdecef); color: var(--lt-accent-hover, #c81d43); }
[data-theme="light"] .iq-hero-d { color: var(--lt-text-2, #46423d); }
[data-theme="light"] .iq-hero .iq-btn:not(.is-main):not(.is-kakao) { color: var(--lt-text, #1d1b19); border-color: var(--lt-border-strong, #cdc8c0); }
@media (max-width: 600px) {
  .iq-hero { grid-template-columns: 1fr; padding: 20px 18px 40px; border-radius: 18px; }
  .iq-vinyl { position: absolute; top: -26px; right: -30px; width: 128px; height: 128px; opacity: .55; }
  .iq-title { font-size: 26px; }
  .iq-hero-d { max-width: none; padding-right: 54px; }
  .iq-hero-btns .iq-btn { flex: 1 1 auto; }
  .iq-eq { left: 18px; right: 18px; }
}
@media (prefers-reduced-motion: reduce) { .iq-vinyl svg, .iq-eq i, .iq-live, .iq-st.wait::before { animation: none; } }

/* ── 채널(분류) 카드 ── */
.iq-chs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.iq-ch { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px; border-radius: 16px; background: var(--iq-card); border: 1px solid var(--iq-line); color: inherit; text-decoration: none;
  transition: border-color .15s, transform .15s; }
.iq-ch:hover { border-color: var(--iq-ac); transform: translateY(-1px); }
.iq-ch-ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(135deg, rgba(255,46,99,.24), rgba(112,52,214,.24)); color: var(--iq-ac-text); font-size: 18px; }
.iq-ch-t { flex: 1 1 auto; min-width: 0; }
.iq-ch-t b { display: block; font-size: 15px; }
.iq-ch-t small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--iq-sub); word-break: keep-all; }
.iq-ch-go { flex: none; color: var(--iq-faint); transition: transform .15s, color .15s; }
.iq-ch:hover .iq-ch-go { color: var(--iq-ac-text); transform: translateX(2px); }
@media (max-width: 560px) { .iq-chs { grid-template-columns: 1fr; gap: 8px; } }

/* ── 비공개 안내 ── */
.iq-lock { display: flex; gap: 9px; align-items: flex-start; margin: 0 0 20px; padding: 10px 14px; border-radius: 12px; background: var(--iq-ok-soft); color: var(--iq-ok); font-size: 13px; line-height: 1.5; }
.iq-lock i { margin-top: 3px; }
.iq-lock b { color: inherit; }

/* ── 묶음 제목 ── */
.iq-sec { margin: 0 0 22px; }
.iq-sec h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 9px; font-size: 12px; font-weight: 800; letter-spacing: 1.2px; color: var(--iq-sub); }
.iq-sec h3::after { content: ""; flex: 1 1 auto; height: 1px; margin-left: 4px; background: var(--iq-line); }
.iq-sec h3 small { font-size: 12px; font-weight: 800; color: var(--iq-faint); letter-spacing: 0; }

/* ── 자주 묻는 질문 ── */
.iq-q { margin: 0 0 8px; border-radius: 14px; background: var(--iq-card); border: 1px solid var(--iq-line); overflow: hidden; }
.iq-q[open] { border-color: var(--iq-ac-line); }
.iq-q summary { display: flex; align-items: center; gap: 11px; padding: 13px 14px; cursor: pointer; list-style: none; font-weight: 700; }
.iq-q summary::-webkit-details-marker { display: none; }
.iq-q summary::after { content: "⌄"; margin-left: auto; color: var(--iq-faint); transition: transform .15s; }
.iq-q[open] summary::after { transform: rotate(180deg); }
.iq-q summary em { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--iq-ac-soft); color: var(--iq-ac-text); font-style: normal; font-size: 0; }
.iq-q summary em::before { content: "Q"; font-size: 12px; font-weight: 900; }
.iq-a { padding: 0 16px 15px 51px; color: var(--iq-sub); font-size: 14px; word-break: keep-all; overflow-wrap: anywhere; }
.iq-adm { margin: 8px 0 0; font-size: 12.5px; }
.iq-adm a { color: var(--iq-ac-text); text-decoration: none; }

/* ── 내 문의 · 모든 문의 = 트랙 목록 ── */
.iq-row { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; padding: 12px 14px; border-radius: 14px; background: var(--iq-card); border: 1px solid var(--iq-line); color: inherit; text-decoration: none; transition: border-color .15s; }
.iq-row:hover { border-color: var(--iq-ac-line); }
.iq-no { flex: none; width: 22px; text-align: center; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--iq-faint); }
.iq-rt { min-width: 0; flex: 1 1 auto; }
.iq-rt b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.iq-rt small { display: flex; flex-wrap: wrap; gap: 0 10px; margin-top: 1px; font-size: 12px; color: var(--iq-faint); }
.iq-cn { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--iq-card2); color: var(--iq-sub); font-style: normal; font-size: 11px; line-height: 18px; text-align: center; vertical-align: 1px; }
.iq-open { color: var(--iq-wait); }
.iq-st { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.iq-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.iq-st.wait { background: var(--iq-wait-soft); color: var(--iq-wait); }
.iq-st.wait::before { animation: iq-blink 1.4s ease-in-out infinite; }
.iq-st.done { background: var(--iq-ok-soft); color: var(--iq-ok); }
.iq-st.note { background: var(--iq-ac-soft); color: var(--iq-ac-text); }
@keyframes iq-blink { 50% { opacity: .25; } }
.iq-empty { padding: 30px 12px 24px; border-radius: 16px; border: 1px dashed var(--iq-line); text-align: center; color: var(--iq-sub); font-size: 13.5px; word-break: keep-all; }
.iq-empty::before { content: "♪"; display: block; margin-bottom: 4px; font-size: 26px; line-height: 1; color: var(--iq-ac-text); }
.iq-empty b { display: block; margin-bottom: 4px; font-size: 15.5px; color: var(--iq-text); }
.iq-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.iq-chip { display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--iq-line); color: var(--iq-sub); font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; }
.iq-chip.on { background: var(--iq-text); border-color: var(--iq-text); color: var(--iq-card); }
.iq-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

/* ── 손님 ── */
.iq-guestbox { padding: 18px; border-radius: 16px; border: 1px solid var(--iq-line); background: var(--iq-card); }
.iq-guestbox p { margin: 0 0 12px; color: var(--iq-sub); font-size: 13.5px; }
.iq-guestbox p b { display: block; margin-bottom: 2px; color: var(--iq-text); font-size: 15px; }
.iq-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.iq-search { display: flex; gap: 6px; margin: 10px 0 0; }
.iq-search input { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--iq-line); background: var(--iq-field); color: inherit; font: inherit; font-size: 14px; }
.iq-search button { height: 40px; padding: 0 15px; border-radius: 11px; border: 1px solid var(--iq-line); background: transparent; color: inherit; font-weight: 700; cursor: pointer; }
.iq .pg_wrap { margin-top: 14px; }
.iq-dlg { position: fixed; inset: 0; z-index: 10090; display: grid; place-items: center; padding: 16px; }
.iq-dlg[hidden] { display: none; }
.iq-dlg-dim { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.iq-dlg-box { position: relative; width: min(380px, 100%); padding: 24px 18px 18px; border-radius: 18px; background: #1b1b21; color: #ededf0; box-shadow: 0 18px 44px rgba(0,0,0,.45); text-align: center; }
.iq-dlg-box::before { content: "♪"; display: block; font-size: 28px; line-height: 1; color: #ff7aa0; }
.iq-dlg-box h3 { margin: 8px 0 6px; font-size: 17px; color: inherit; }
.iq-dlg-box p { margin: 0 0 16px; color: #a3a3ad; font-size: 13.5px; }
.iq-dlg-x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: inherit; cursor: pointer; }
[data-theme="light"] .iq-dlg-box { background: var(--lt-surface, #fff); color: var(--lt-text, #1d1b19); box-shadow: 0 18px 44px rgba(29,27,25,.18); }
[data-theme="light"] .iq-dlg-box p { color: var(--lt-text-3, #6f6a63); }
[data-theme="light"] .iq-dlg-x { background: var(--lt-fill, #f0eeea); }

/* ── 쓰기 ── */
.iq-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 14px; }
.iq-w .iq-hd .iq-title, .iq-v .iq-hd .iq-title { margin: 0; font-size: 24px; }
.iq-w .iq-hd .iq-title::before { content: "NEW REQUEST"; display: block; margin-bottom: 4px; font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--iq-ac-text); }
.iq-f { margin: 0 0 18px; }
.iq-lab { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 800; color: var(--iq-sub); }
.iq-lab small { font-weight: 600; color: var(--iq-faint); }
.iq-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.iq-cats .iq-chip { position: relative; display: block; height: 56px; padding: 0; border: 0; border-radius: 14px; }
.iq-cats .iq-chip span { position: absolute; inset: 0; display: flex; align-items: center; gap: 11px; padding: 0 16px; border-radius: 14px; background: var(--iq-card); border: 1px solid var(--iq-line);
  color: var(--iq-text); font-size: 14.5px; font-weight: 800; transition: border-color .15s, background .15s; }
.iq-cats .iq-chip span::before { content: ""; flex: none; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--iq-faint); transition: background .15s, box-shadow .15s; }
.iq-cats .iq-chip input:checked + span { background: var(--iq-ac-soft); border-color: var(--iq-ac); }
.iq-cats .iq-chip input:checked + span::before { border-color: var(--iq-ac); background: var(--iq-ac); box-shadow: 0 0 10px var(--iq-ac); }
.iq-cats .iq-chip input:focus-visible + span { outline: 2px solid var(--iq-ac); outline-offset: 2px; }
.iq-inp { width: 100%; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--iq-line); background: var(--iq-field); color: var(--iq-text); font: inherit; font-size: 15px; }
.iq-inp:focus { outline: 2px solid var(--iq-ac-line); outline-offset: 1px; border-color: transparent; }
.iq-ta { min-height: 260px; line-height: 1.7; resize: vertical; }
.iq-ta.is-short { min-height: 110px; }
.iq-fixed { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -6px 0 18px; color: var(--iq-ok); font-size: 13.5px; font-weight: 700; }
.iq-fixed small { color: var(--iq-faint); font-weight: 600; }
.iq-adm-opts { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; }

/* ── 보기 · 답변 ── */
.iq-back { display: inline-flex; align-items: center; gap: 7px; color: var(--iq-sub); font-weight: 700; text-decoration: none; }
.iq-back:hover { color: var(--iq-text); }
.iq-card { position: relative; overflow: hidden; padding: 20px; border-radius: 18px; border: 1px solid var(--iq-line); background: var(--iq-card); }
.iq-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: linear-gradient(90deg, #ff2e63, #a8329e, #7034d6); }
.iq-card h2 { margin: 10px 0 0; font-size: 20px; line-height: 1.4; color: var(--iq-text); word-break: keep-all; overflow-wrap: anywhere; }
.iq-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--iq-faint); font-size: 12.5px; }
.iq-lockt { display: inline-flex; align-items: center; gap: 4px; color: var(--iq-ok); }
.iq-body { margin: 14px 0 0; color: var(--iq-text); opacity: .92; word-break: keep-all; overflow-wrap: anywhere; }
.iq-acts { display: flex; gap: 6px; justify-content: flex-end; margin: 16px 0 0; }
.iq-ans { margin: 22px 0 0; }
.iq-ans h3, .iq-ans-w h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 9px; font-size: 12px; font-weight: 800; letter-spacing: 1.2px; color: var(--iq-sub); }
.iq-ans h3::after, .iq-ans-w h3::after { content: ""; flex: 1 1 auto; height: 1px; margin-left: 4px; background: var(--iq-line); }
.iq-cmt { margin: 0 0 10px; padding: 14px 16px; border-radius: 4px 16px 16px 16px; border: 1px solid var(--iq-line); background: var(--iq-card); }
.iq-cmt.is-admin { border-color: var(--iq-ac-line); background: linear-gradient(135deg, var(--iq-ac-soft), var(--iq-card) 70%); }
.iq-cmt header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; color: var(--iq-faint); }
.iq-cmt header b { font-size: 13.5px; color: var(--iq-text); }
.iq-cmt.is-admin header b { color: var(--iq-ac-text); }
.iq-cmt.is-admin header b::before { content: "🎧 "; }
.iq-cmt-acts { margin-left: auto; display: flex; gap: 10px; }
.iq-cmt-acts a { color: var(--iq-sub); text-decoration: none; }
.iq-cmt-body { margin: 8px 0 0; color: var(--iq-text); opacity: .92; word-break: keep-all; overflow-wrap: anywhere; }
.iq-ans-empty { margin: 0; padding: 16px 14px; border-radius: 14px; border: 1px dashed var(--iq-line); color: var(--iq-sub); font-size: 13.5px; }
.iq-ans-w { margin: 18px 0 0; }
.iq-ans-btns { display: flex; justify-content: flex-end; margin: 8px 0 0; }
.iq-c { text-align: center; }
@media (max-width: 720px) {
  .iq { padding: 2px 2px 8px; }
  .iq-card { padding: 18px 15px; }
  .iq-row { padding: 11px 12px; gap: 10px; }
  .iq-no { display: none; }
}