/* ==========================================================================
   CenturyQuest — 페이지 전용 컴포넌트 (subpages)
   tokens.css + app.css 위에서 동작. 메인 베이스라인 토큰만 사용.
   ========================================================================== */

/* ===== 서브페이지 헤더(뒤로/타이틀/액션) ===== */
.cq-subhead {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--cq-sp-3);
  height: var(--cq-header-h); padding: 0 var(--cq-sp-3);
  background: rgba(8,10,18,.86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cq-line-soft);
}
.cq-subhead .ico-btn {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  color: var(--cq-text-sub);
}
.cq-subhead .ttl { flex: 1; min-width: 0; }
.cq-subhead .ttl b { display: block; font-size: var(--cq-fs-lg); font-weight: 700; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cq-subhead .ttl small { color: var(--cq-text-sub); font-size: var(--cq-fs-xs); }
.cq-subhead .actions { display: flex; gap: 4px; }

/* ===== 검색바 ===== */
.cq-searchbar {
  display: flex; align-items: center; gap: var(--cq-sp-2);
  background: var(--cq-card); border: 1px solid var(--cq-line);
  border-radius: var(--cq-r-pill); padding: 0 var(--cq-sp-4); height: 44px;
}
.cq-searchbar input { flex: 1; background: none; border: none; color: var(--cq-text);
  font-size: var(--cq-fs-base); outline: none; }
.cq-searchbar svg { color: var(--cq-text-mute); }

/* ===== 필터 칩 레일 ===== */
.cq-chips { display: flex; gap: var(--cq-sp-2); overflow-x: auto; padding: 2px 0;
  margin: 0 calc(-1*var(--cq-sp-4)); padding-left: var(--cq-sp-4); padding-right: var(--cq-sp-4); }
.cq-chips::-webkit-scrollbar { display: none; }
.cq-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 var(--cq-sp-3); border-radius: var(--cq-r-pill);
  background: var(--cq-card); border: 1px solid var(--cq-line);
  color: var(--cq-text-sub); font-size: var(--cq-fs-sm); font-weight: 600;
}
.cq-chip.is-on { background: rgba(124,92,255,.16); color: var(--cq-purple-soft); border-color: rgba(124,92,255,.45); }
.cq-chip--gold.is-on { background: rgba(214,168,79,.16); color: var(--cq-gold-soft); border-color: rgba(214,168,79,.45); }

/* ===== 세그먼트 탭 ===== */
.cq-tabs { display: flex; gap: 4px; background: var(--cq-card); border: 1px solid var(--cq-line);
  border-radius: var(--cq-r-md); padding: 4px; }
.cq-tabs button { flex: 1; height: 34px; border-radius: var(--cq-r-sm); font-size: var(--cq-fs-sm);
  font-weight: 600; color: var(--cq-text-sub); }
.cq-tabs button.is-on { background: var(--cq-grad-purple); color: #fff; }
/* 텍스트 라인 탭(룰북/세션) */
.cq-linetabs { display: flex; gap: var(--cq-sp-4); border-bottom: 1px solid var(--cq-line-soft);
  overflow-x: auto; }
.cq-linetabs::-webkit-scrollbar { display: none; }
.cq-linetabs a { flex: 0 0 auto; padding: var(--cq-sp-3) 0; font-size: var(--cq-fs-sm); font-weight: 600;
  color: var(--cq-text-sub); border-bottom: 2px solid transparent; }
.cq-linetabs a.is-on { color: var(--cq-text); border-bottom-color: var(--cq-purple); }

/* ===== 풀폭 방 카드(마스터 설정 등 요약용) ===== */
.cq-roomf { display: flex; gap: var(--cq-sp-3); background: var(--cq-card);
  border: 1px solid var(--cq-line); border-radius: var(--cq-r-md); padding: var(--cq-sp-3); }
.cq-roomf__thumb { position: relative; width: 96px; flex: 0 0 96px; aspect-ratio: 3/4;
  border-radius: var(--cq-r-sm); overflow: hidden; }
.cq-roomf__thumb .st { position: absolute; top: 6px; left: 6px; }
.cq-roomf__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cq-roomf__title { font-size: var(--cq-fs-md); font-weight: 700; line-height: 1.25; }
.cq-roomf__tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.cq-roomf__meta { font-size: var(--cq-fs-xs); color: var(--cq-text-sub); display: flex; align-items: center; gap: 8px; }
.cq-roomf__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--cq-sp-2); padding-top: var(--cq-sp-2); }
.cq-roomf__btns { display: flex; gap: 6px; }

/* ===== 공개방 목록 카드(시안 3.2): 좌측 세로 상태바 + 정사각 썸네일 + 우측 버튼 세로 ===== */
.cq-rcard { display: flex; align-items: stretch; background: var(--cq-card);
  border: 1px solid var(--cq-line); border-radius: var(--cq-r-md); overflow: hidden; }
.cq-rcard__status { flex: 0 0 22px; writing-mode: vertical-rl; text-orientation: upright;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.cq-rcard__status.live { background: rgba(34,197,94,.16); color: #6EE7A0; }
.cq-rcard__status.wait { background: rgba(56,189,248,.16); color: #7DD3FC; }
.cq-rcard__status.end  { background: rgba(107,114,128,.18); color: #B9C0CC; }
.cq-rcard__thumb { flex: 0 0 84px; align-self: stretch; position: relative; min-height: 96px; }
.cq-rcard__main { flex: 1; min-width: 0; padding: var(--cq-sp-3); display: flex; flex-direction: column; gap: 5px; }
.cq-rcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cq-sp-2); }
.cq-rcard__title { font-size: var(--cq-fs-md); font-weight: 700; line-height: 1.2; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cq-rcard__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.cq-rcard__who { display: flex; align-items: center; gap: 6px; font-size: var(--cq-fs-xs); color: var(--cq-text-sub); margin-top: auto; }
.cq-rcard__actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; justify-content: center;
  padding: var(--cq-sp-3) var(--cq-sp-3) var(--cq-sp-3) 0; }
.cq-rcard__actions .cq-btn { width: 78px; }

/* ===== 패널(섹션 박스) ===== */
.cq-panel { background: var(--cq-card); border: 1px solid var(--cq-line);
  border-radius: var(--cq-r-md); padding: var(--cq-sp-4); }
.cq-panel + .cq-panel { margin-top: var(--cq-sp-3); }
.cq-panel__title { font-size: var(--cq-fs-sm); font-weight: 700; color: var(--cq-text-sub);
  margin: 0 0 var(--cq-sp-3); display: flex; align-items: center; gap: 6px; }

/* ===== 폼 요소 ===== */
.cq-field { margin-bottom: var(--cq-sp-4); }
.cq-field > label { display: block; font-size: var(--cq-fs-sm); color: var(--cq-text-sub); margin-bottom: 6px; }
.cq-input, .cq-select, .cq-textarea {
  width: 100%; background: var(--cq-bg-2); border: 1px solid var(--cq-line);
  border-radius: var(--cq-r-sm); color: var(--cq-text); font-size: var(--cq-fs-base);
  padding: 11px var(--cq-sp-3); outline: none;
}
.cq-textarea { min-height: 76px; resize: vertical; }
.cq-input:focus, .cq-select:focus, .cq-textarea:focus { border-color: var(--cq-purple); }
.cq-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.cq-seg button { flex: 1 0 auto; min-width: 64px; height: 38px; padding: 0 var(--cq-sp-3);
  border-radius: var(--cq-r-sm); background: var(--cq-bg-2); border: 1px solid var(--cq-line);
  color: var(--cq-text-sub); font-size: var(--cq-fs-sm); font-weight: 600; }
.cq-seg button.is-on { background: rgba(124,92,255,.16); color: var(--cq-purple-soft); border-color: rgba(124,92,255,.5); }

/* 토글 스위치 */
.cq-switch { position: relative; width: 44px; height: 26px; flex: 0 0 auto; }
.cq-switch input { display: none; }
.cq-switch i { position: absolute; inset: 0; background: var(--cq-line); border-radius: var(--cq-r-pill); transition: .2s; }
.cq-switch i::after { content:""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; transition: .2s; }
.cq-switch input:checked + i { background: var(--cq-purple); }
.cq-switch input:checked + i::after { transform: translateX(18px); }
.cq-switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--cq-sp-3); padding: var(--cq-sp-2) 0; }

/* 스텝퍼(능력치) */
.cq-stepper { display: inline-flex; align-items: center; gap: var(--cq-sp-2); }
.cq-stepper button { width: 28px; height: 28px; border-radius: 50%; background: var(--cq-bg-2);
  border: 1px solid var(--cq-line); display: grid; place-items: center; color: var(--cq-text-sub); }
.cq-stepper b { min-width: 24px; text-align: center; font-variant-numeric: tabular-nums; }

/* ===== 캐릭터 카드(3.6) ===== */
.cq-portrait { position: relative; border-radius: var(--cq-r-md); overflow: hidden; aspect-ratio: 3/4;
  border: 1px solid var(--cq-line); }
.cq-portrait .badge { position: absolute; top: 8px; left: 8px; }
.cq-portrait .name { position: absolute; left: 10px; bottom: 10px; right: 10px; }
.cq-portrait .name b { font-size: var(--cq-fs-lg); font-weight: 800; text-shadow: 0 2px 8px rgba(0,0,0,.7); }
.cq-portrait .name span { display: block; font-size: var(--cq-fs-xs); color: #cfcfe0; }
.cq-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cq-sp-2); }
/* 능력치 6열 한 줄(시안 3.6) */
.cq-stat-grid--6 { grid-template-columns: repeat(6, 1fr); gap: 5px; }
.cq-stat-grid--6 .cq-statbox { padding: 8px 2px; }
.cq-stat-grid--6 .lbl { font-size: 9px; white-space: nowrap; }
.cq-stat-grid--6 .val { font-size: var(--cq-fs-lg); }
.cq-stat-grid--6 .cq-stepper { gap: 2px; }
.cq-stat-grid--6 .cq-stepper button { width: 20px; height: 20px; }
.cq-stat-grid--6 .cq-stepper b { min-width: 16px; font-size: var(--cq-fs-sm); }
.cq-statbox { background: var(--cq-bg-2); border: 1px solid var(--cq-line); border-radius: var(--cq-r-sm);
  padding: var(--cq-sp-3); text-align: center; }
.cq-statbox .lbl { font-size: var(--cq-fs-xs); color: var(--cq-text-sub); }
.cq-statbox .val { font-size: var(--cq-fs-xl); font-weight: 800; margin: 2px 0; }
.cq-statbox .mod { font-size: var(--cq-fs-xs); color: var(--cq-success); }
.cq-statbox .mod.neg { color: var(--cq-danger); }
.cq-archetypes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cq-sp-2); }
.cq-arche { background: var(--cq-bg-2); border: 1px solid var(--cq-line); border-radius: var(--cq-r-sm);
  padding: var(--cq-sp-3); text-align: center; }
.cq-arche.is-on { border-color: var(--cq-purple); background: rgba(124,92,255,.12); }
.cq-arche .ico { color: var(--cq-purple-soft); margin-bottom: 4px; }
.cq-arche small { font-size: 10px; color: var(--cq-text-mute); display: block; }

/* ===== 룰북(3.7) ===== */
.cq-rb { display: flex; gap: var(--cq-sp-3); background: var(--cq-card); border: 1px solid var(--cq-line);
  border-radius: var(--cq-r-md); padding: var(--cq-sp-3); }
.cq-rb__cover { width: 64px; flex: 0 0 64px; aspect-ratio: 3/4; border-radius: var(--cq-r-sm);
  overflow: hidden; border: 1px solid var(--cq-line); }
.cq-rb__body { flex: 1; min-width: 0; }
.cq-rb__title { font-size: var(--cq-fs-base); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.cq-rb__desc { font-size: var(--cq-fs-xs); color: var(--cq-text-sub); margin: 4px 0; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cq-rb__meta { font-size: var(--cq-fs-xs); color: var(--cq-text-mute); display: flex; gap: 10px; }
.cq-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cq-sp-2); }
.cq-tool { background: var(--cq-bg-2); border: 1px solid var(--cq-line); border-radius: var(--cq-r-sm);
  padding: var(--cq-sp-3) 4px; text-align: center; font-size: 11px; color: var(--cq-text-sub); }
.cq-tool .ico { color: var(--cq-purple-soft); margin-bottom: 4px; }

/* ===== 대기실(3.3) ===== */
.cq-banner { position: relative; border-radius: var(--cq-r-md); overflow: hidden; aspect-ratio: 16/9; }
.cq-banner::after { content:""; position:absolute; inset:0; background: var(--cq-overlay); }
.cq-banner .meta { position: absolute; left: var(--cq-sp-4); right: var(--cq-sp-4); bottom: var(--cq-sp-3); z-index: 2; }
.cq-seat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--cq-sp-2); }
.cq-seat { text-align: center; min-width: 0; }
.cq-seat .av { margin: 0 auto 6px; position: relative; width: 46px; height: 46px; }
.cq-seat .av.cq-avatar--lg { width: 46px; height: 46px; }
.cq-seat--empty .av { width: 46px; height: 46px; }

/* 방 정보 2열 그리드 (시안 3.3) */
.cq-info2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cq-sp-2) var(--cq-sp-4); }
.cq-info2 .it { display: flex; align-items: center; gap: 8px; padding: 7px 0; min-width: 0;
  border-bottom: 1px solid var(--cq-line-soft); }
.cq-info2 .it .ic { color: var(--cq-purple-soft); flex: 0 0 auto; }
.cq-info2 .it .tx { min-width: 0; }
.cq-info2 .it .k { font-size: 10px; color: var(--cq-text-mute); }
.cq-info2 .it .v { font-size: var(--cq-fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cq-seat .nm { font-size: var(--cq-fs-xs); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cq-seat .rl { font-size: 10px; color: var(--cq-text-mute); }
.cq-seat--empty .av { width: 56px; height: 56px; border-radius: 50%; border: 2px dashed var(--cq-line);
  display: grid; place-items: center; color: var(--cq-text-mute); }
.cq-seat .crown { position: absolute; top: -6px; right: -2px; color: var(--cq-gold); }
.cq-info-row { display: flex; align-items: center; gap: var(--cq-sp-2); padding: var(--cq-sp-2) 0;
  font-size: var(--cq-fs-sm); border-bottom: 1px solid var(--cq-line-soft); }
.cq-info-row:last-child { border-bottom: none; }
.cq-info-row .k { color: var(--cq-text-sub); width: 92px; flex: 0 0 92px; display: flex; align-items: center; gap: 6px; }
.cq-info-row .v { color: var(--cq-text); font-weight: 600; }

/* 하단 고정 액션바(대기실/캐릭터/마스터) */
.cq-actionbar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 45;
  width: 100%; max-width: var(--cq-maxw);
  display: flex; gap: var(--cq-sp-3); padding: var(--cq-sp-3) var(--cq-sp-4);
  padding-bottom: calc(var(--cq-sp-3) + var(--cq-safe-b));
  background: rgba(12,15,26,.94); backdrop-filter: blur(14px); border-top: 1px solid var(--cq-line);
}
.cq-app--actionbar { padding-bottom: calc(72px + var(--cq-safe-b)); }

/* ===== 게임 진행(3.4) ===== */
/* ⚠️ z-index:-1 배경은 .cq-app/캔버스 불투명 배경에 덮였음 → 배경 z-index:0, 콘텐츠를 그 위로 */
.cq-app.cq-play { background: transparent; }
.cq-play { position: relative; min-height: 100dvh; }
.cq-play__bg { position: fixed; inset: 0; z-index: 0; background-color: #0a0b14; background-size: cover; background-position: center; }
.cq-play__bg::after { content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(8,10,18,.42) 0%, rgba(8,10,18,.62) 45%, rgba(8,10,18,.86) 100%); }
.cq-play > .cq-playhead, .cq-play > .cq-chat { position: relative; z-index: 1; }
.cq-chat { position: relative; z-index: 1; }
.cq-playhead { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--cq-sp-3);
  height: var(--cq-header-h); padding: 0 var(--cq-sp-3); background: rgba(8,10,18,.7); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cq-line-soft); }
.cq-playhead .scene { flex: 1; min-width: 0; }
.cq-playhead .scene b { font-size: var(--cq-fs-base); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cq-playhead .scene small { font-size: 11px; color: var(--cq-text-sub); }
.cq-chat { padding: var(--cq-sp-4); padding-bottom: 230px; display: flex; flex-direction: column; gap: var(--cq-sp-4); }
.cq-daydiv { text-align: center; font-size: var(--cq-fs-xs); color: var(--cq-text-mute); }
.cq-daydiv span { background: rgba(255,255,255,.06); padding: 3px 10px; border-radius: var(--cq-r-pill); }
.cq-msg { display: flex; gap: var(--cq-sp-2); max-width: 88%; }
.cq-msg__av { flex: 0 0 auto; }
.cq-msg__body { min-width: 0; }
.cq-msg__name { font-size: var(--cq-fs-xs); color: var(--cq-text-sub); margin-bottom: 3px; }
.cq-msg__bubble { background: var(--cq-card); border: 1px solid var(--cq-line); border-radius: 4px 14px 14px 14px;
  padding: var(--cq-sp-3); font-size: var(--cq-fs-base); line-height: 1.5; }
.cq-msg__time { font-size: 10px; color: var(--cq-text-mute); margin-top: 3px; }
.cq-msg--ai .cq-msg__bubble { background: rgba(124,92,255,.10); border-color: rgba(124,92,255,.35); }
.cq-msg--ai .cq-msg__name { color: var(--cq-purple-soft); }
.cq-msg--me { margin-left: auto; flex-direction: row-reverse; }
.cq-msg--me .cq-msg__bubble { background: var(--cq-grad-purple); border-color: transparent; color: #fff; border-radius: 14px 4px 14px 14px; }
/* 나레이션(마스터) */
.cq-narr { border-left: 3px solid var(--cq-gold); background: rgba(214,168,79,.07); border-radius: var(--cq-r-sm);
  padding: var(--cq-sp-3) var(--cq-sp-4); font-size: var(--cq-fs-base); line-height: 1.55; color: #ECE6D5; }
.cq-narr b { color: var(--cq-gold-soft); }
/* 주사위 결과 카드 (시안 3.4: 큼직한 중앙 카드) */
.cq-roll { display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--cq-card-2); border: 1px solid rgba(124,92,255,.35);
  border-radius: var(--cq-r-md); padding: var(--cq-sp-3) var(--cq-sp-4); }
.cq-roll__head { font-size: var(--cq-fs-xs); color: var(--cq-text-sub); }
.cq-roll__head b { color: var(--cq-text); }
.cq-roll__body { display: flex; align-items: center; gap: 8px; }
.cq-roll .d { width: 46px; height: 46px; border-radius: var(--cq-r-sm); display: grid; place-items: center;
  background: var(--cq-grad-purple); color: #fff; font-weight: 800; font-size: var(--cq-fs-xl);
  box-shadow: var(--cq-glow-purple); transition: transform .1s; }
/* 굴리는 중 애니메이션 */
.cq-roll.is-rolling .d { animation: cq-dice 0.16s linear infinite; }
@keyframes cq-dice {
  0% { transform: rotate(-12deg) scale(1.05); }
  50% { transform: rotate(12deg) scale(1.12); }
  100% { transform: rotate(-12deg) scale(1.05); }
}
[data-dice] { transition: transform .1s; }
[data-dice]:active { transform: scale(.88); }
.cq-roll .op { font-size: var(--cq-fs-sm); color: var(--cq-text-sub); }
.cq-roll .res { font-size: var(--cq-fs-2xl); font-weight: 800; color: var(--cq-gold); }
.cq-roll .ok { display: inline-flex; align-items: center; font-size: var(--cq-fs-sm); font-weight: 700;
  color: var(--cq-success); background: rgba(34,197,94,.14); border-radius: var(--cq-r-pill); padding: 3px 10px; }
/* 시스템 메시지 */
.cq-sys { text-align: center; font-size: var(--cq-fs-xs); color: var(--cq-text-mute); }

/* 하단 입력 영역(게임) */
.cq-playbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 40;
  width: 100%; max-width: var(--cq-maxw); background: rgba(10,12,20,.95); backdrop-filter: blur(14px);
  border-top: 1px solid var(--cq-line); padding: var(--cq-sp-2) var(--cq-sp-3);
  padding-bottom: calc(var(--cq-sp-2) + var(--cq-safe-b)); }
/* AI 추천 선택지 패널 (시안 3.4: 라벨 + 2×2 그리드) */
.cq-suggest { padding-bottom: var(--cq-sp-2); }
.cq-suggest__label { font-size: var(--cq-fs-xs); color: var(--cq-purple-soft); font-weight: 600;
  display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.cq-suggest__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cq-suggest .s { display: inline-flex; align-items: center; gap: 5px; height: 34px; min-width: 0;
  padding: 0 var(--cq-sp-3); border-radius: var(--cq-r-sm); background: rgba(124,92,255,.12);
  border: 1px solid rgba(124,92,255,.4); color: var(--cq-purple-soft); font-size: var(--cq-fs-sm); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cq-suggest .s span { overflow: hidden; text-overflow: ellipsis; }
.cq-inputrow { display: flex; align-items: flex-end; gap: var(--cq-sp-2); }
.cq-inputrow .tool { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  color: var(--cq-text-sub); flex: 0 0 auto; }
.cq-inputrow .box { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: var(--cq-sp-2);
  background: var(--cq-card); border: 1px solid var(--cq-line); border-radius: 20px; padding: 0 var(--cq-sp-3); min-height: 42px; }
.cq-inputrow .box textarea, .cq-inputrow .box input {
  flex: 1; min-width: 0; background: none; border: none; color: var(--cq-text); outline: none;
  font-size: var(--cq-fs-base); font-family: inherit; }
/* 줄바꿈 가능한 입력 — 모바일 키보드에 엔터(줄바꿈) 키 노출 */
.cq-inputrow .box textarea { resize: none; line-height: 1.4; padding: 10px 0; max-height: 112px; overflow-y: auto; }
.cq-inputrow .box .tool { align-self: center; }
.cq-inputrow .send { width: 42px; height: 42px; border-radius: 50%; background: var(--cq-grad-purple); color: #fff;
  display: grid; place-items: center; flex: 0 0 auto; box-shadow: var(--cq-glow-purple); }

/* ===== 마스터 설정(3.8) ===== */
.cq-mood-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.cq-mood { position: relative; aspect-ratio: 1; border-radius: var(--cq-r-sm); overflow: hidden;
  border: 1px solid var(--cq-line); }
.cq-mood::after { content:""; position:absolute; inset:0; background: var(--cq-overlay-soft); }
.cq-mood.is-on { border-color: var(--cq-purple); box-shadow: var(--cq-glow-purple); }
.cq-mood span { position: absolute; left: 3px; right: 3px; bottom: 4px; z-index: 2; font-size: 9px;
  font-weight: 700; line-height: 1.1; text-align: center; }
.cq-mood--add { display: grid; place-items: center; background: var(--cq-bg-2); color: var(--cq-text-mute); }
.cq-mood--add::after { display: none; }
.cq-level3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--cq-sp-2); }
.cq-level3 button { padding: var(--cq-sp-3); border-radius: var(--cq-r-sm); background: var(--cq-bg-2);
  border: 1px solid var(--cq-line); text-align: center; }
.cq-level3 button.is-on { border-color: var(--cq-purple); background: rgba(124,92,255,.12); }
.cq-level3 b { display: block; font-size: var(--cq-fs-sm); }
.cq-level3 small { font-size: 10px; color: var(--cq-text-mute); }

/* ===== 세션 기록(3.9) ===== */
.cq-recbar { position: relative; border-radius: var(--cq-r-md); overflow: hidden; aspect-ratio: 21/9; }
.cq-recbar::after { content:""; position:absolute; inset:0; background: var(--cq-overlay); }
.cq-recbar .meta { position: absolute; left: var(--cq-sp-4); bottom: var(--cq-sp-3); right: var(--cq-sp-4); z-index: 2; }
.cq-tl { position: relative; padding-left: var(--cq-sp-5); }
.cq-tl::before { content:""; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 2px; background: var(--cq-line); }
.cq-tl__item { position: relative; padding-bottom: var(--cq-sp-4); }
.cq-tl__item::before { content:""; position: absolute; left: -16px; top: 4px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--cq-purple); box-shadow: 0 0 0 3px rgba(124,92,255,.2); }
.cq-tl__time { font-size: var(--cq-fs-xs); color: var(--cq-purple-soft); font-weight: 600; }
.cq-tl__txt { font-size: var(--cq-fs-sm); margin-top: 2px; }
.cq-summary { background: rgba(124,92,255,.08); border: 1px solid rgba(124,92,255,.3);
  border-radius: var(--cq-r-md); padding: var(--cq-sp-4); font-size: var(--cq-fs-sm); line-height: 1.6; color: #DAD4F0; }
/* 세션 기록 2단 (시안 3.9: 좌 전체로그 / 우 요약 사이드바) */
.cq-sesgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cq-sp-3); align-items: start; }
.cq-sesgrid > .side { display: flex; flex-direction: column; gap: var(--cq-sp-3); }
.cq-log { background: var(--cq-card); border: 1px solid var(--cq-line); border-radius: var(--cq-r-md); }
.cq-log__head { display: flex; align-items: center; justify-content: space-between;
  padding: 9px var(--cq-sp-3); border-bottom: 1px solid var(--cq-line-soft); font-size: var(--cq-fs-sm); font-weight: 700; }
.cq-log__body { padding: 2px var(--cq-sp-3) 6px; }
.cq-log__item { display: flex; gap: 7px; padding: 8px 0; border-bottom: 1px solid var(--cq-line-soft); }
.cq-log__item:last-child { border-bottom: none; }
.cq-log__tx { min-width: 0; }
.cq-log__nm { font-size: 10px; color: var(--cq-text-sub); margin-bottom: 2px; }
.cq-log__nm b { color: var(--cq-text); }
.cq-log__nm.ai b { color: var(--cq-purple-soft); }
.cq-log__ms { font-size: 11px; line-height: 1.45; }
.cq-log__ms.sys { color: var(--cq-text-mute); }
.cq-sesgrid .cq-gallery { grid-template-columns: repeat(2, 1fr); }
.cq-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cq-gallery div { aspect-ratio: 1; border-radius: var(--cq-r-sm); overflow: hidden; border: 1px solid var(--cq-line); }
.cq-bar { height: 6px; border-radius: 3px; background: var(--cq-line); overflow: hidden; }
.cq-bar > i { display: block; height: 100%; background: var(--cq-grad-purple); }

/* ===== 신규 유저 페이지(메시지/프로필/가이드/알림) ===== */
.cq-msglist { display: flex; align-items: center; gap: 12px; padding: 12px var(--cq-sp-4);
  border-bottom: 1px solid var(--cq-line-soft); cursor: pointer; }
.cq-msglist:last-child { border-bottom: none; }
.cq-msglist__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cq-msglist__tx b { font-size: var(--cq-fs-base); }
.cq-msglist__tx small { font-size: var(--cq-fs-xs); color: var(--cq-text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cq-msglist__r { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: 0 0 auto; }
.cq-msglist__r .t { font-size: 10px; color: var(--cq-text-mute); }

.cq-prow { display: flex; align-items: center; gap: 12px; padding: 13px 0; cursor: pointer;
  border-bottom: 1px solid var(--cq-line-soft); font-size: var(--cq-fs-base); }
.cq-prow:last-child { border-bottom: none; }
.cq-prow > svg:first-child { color: var(--cq-purple-soft); }
.cq-prow .ch { margin-left: auto; color: var(--cq-text-mute); }

.cq-guide { display: flex; flex-direction: column; gap: var(--cq-sp-3); }
.cq-guide__step { display: flex; gap: var(--cq-sp-3); background: var(--cq-card);
  border: 1px solid var(--cq-line); border-radius: var(--cq-r-md); padding: var(--cq-sp-4); }
.cq-guide__step .n { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cq-grad-purple); color: #fff; font-weight: 800; }
.cq-guide__step b { font-size: var(--cq-fs-base); }
.cq-guide__step p { margin: 4px 0 0; font-size: var(--cq-fs-sm); color: var(--cq-text-sub); line-height: 1.5; }

.cq-noti { display: flex; gap: 12px; padding: 13px var(--cq-sp-4); border-bottom: 1px solid var(--cq-line-soft); cursor: pointer; }
.cq-noti:last-child { border-bottom: none; }
.cq-noti .ic { flex: 0 0 auto; color: var(--cq-text-sub); }
.cq-noti__tx { font-size: var(--cq-fs-sm); line-height: 1.45; }
.cq-noti__tx small { display: block; font-size: 10px; color: var(--cq-text-mute); margin-top: 3px; }
.cq-noti.is-unread { background: rgba(124,92,255,.06); }

/* ===== 관리자(3.10) — 데스크톱 폭 허용 ===== */
.cq-admin { max-width: 1180px; margin: 0 auto; padding: var(--cq-sp-5); }
.cq-admin__top { display: flex; align-items: center; gap: var(--cq-sp-3); margin-bottom: var(--cq-sp-5); }
.cq-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--cq-sp-3); }
.cq-kpi { background: var(--cq-card); border: 1px solid var(--cq-line); border-radius: var(--cq-r-md); padding: var(--cq-sp-4); }
.cq-kpi .ico { width: 34px; height: 34px; border-radius: var(--cq-r-sm); display: grid; place-items: center;
  background: rgba(124,92,255,.14); color: var(--cq-purple-soft); margin-bottom: var(--cq-sp-2); }
.cq-kpi .num { font-size: var(--cq-fs-xl); font-weight: 800; }
.cq-kpi .lbl { font-size: var(--cq-fs-xs); color: var(--cq-text-sub); }
.cq-kpi .delta { font-size: var(--cq-fs-xs); color: var(--cq-success); }
.cq-admin__grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--cq-sp-3); margin-top: var(--cq-sp-3); }
.cq-spark { display: flex; align-items: flex-end; gap: 6px; height: 120px; }
.cq-spark i { flex: 1; background: var(--cq-grad-purple); border-radius: 3px 3px 0 0; opacity: .85; }
.cq-list-row { display: flex; align-items: center; gap: var(--cq-sp-3); padding: var(--cq-sp-2) 0;
  border-bottom: 1px solid var(--cq-line-soft); font-size: var(--cq-fs-sm); }
.cq-list-row:last-child { border-bottom: none; }
/* 도넛 차트 (관리자) */
.cq-donutwrap { display: flex; align-items: center; gap: var(--cq-sp-4); }
.cq-donut { width: 110px; height: 110px; flex: 0 0 110px; border-radius: 50%; position: relative; }
.cq-donut::after { content: ""; position: absolute; inset: 17px; border-radius: 50%; background: var(--cq-card); }
.cq-donut__c { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; z-index: 1; }
.cq-donut__c b { font-size: var(--cq-fs-lg); font-weight: 800; }
.cq-donut__c small { font-size: 10px; color: var(--cq-text-sub); }
.cq-legend { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.cq-legend .lg { display: flex; align-items: center; gap: 7px; font-size: var(--cq-fs-sm); }
.cq-legend .lg i { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.cq-legend .lg .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cq-legend .lg .pct { color: var(--cq-text-sub); font-variant-numeric: tabular-nums; }
/* 빠른 작업 그리드 */
.cq-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cq-sp-2); }
.cq-quick button { display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: var(--cq-sp-3) 4px; border-radius: var(--cq-r-sm); background: var(--cq-bg-2);
  border: 1px solid var(--cq-line); font-size: 11px; color: var(--cq-text-sub); }
.cq-quick button .ic { color: var(--cq-purple-soft); }
.cq-admin__grid--3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--cq-sp-3); margin-top: var(--cq-sp-3); }

@media (max-width: 720px) {
  .cq-kpis { grid-template-columns: repeat(2, 1fr); }
  .cq-admin__grid, .cq-admin__grid--3 { grid-template-columns: 1fr; }
}