/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  background: #000;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  padding-bottom: 140px;
}


/* GUIDE */
.plaza-guide {
  padding: 14px 16px;
  background: #0d0d0d;
  border-bottom: 1px solid #111;
  font-size: 13px;
  color: #bbb;
  line-height: 1.5;
}

/* CATEGORY */
.plaza-categories {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  border-bottom: 1px solid #111;
}
.plaza-categories button {
  background: #111;
  border: 1px solid #222;
  color: #aaa;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}
.plaza-categories button.active {
  background: #222;
  color: #fff;
  font-weight: 700;
}

/* LIST */
.plaza-list {
  list-style: none;
}

/* .plaza-post {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #111;
} */

/* Removed duplicate plaza-item and plaza-thumb styles to prevent conflict */
/*
.plaza-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #111;
  gap: 12px;
}

.plaza-text {
  flex: 1;
  min-width: 0;
}

.plaza-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 6px;
}

.plaza-meta {
  font-size: 12px;
  color: #777;
}

.plaza-thumb {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #111;
}

.plaza-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
*/

/* Unified plaza-post layout as per instructions */
.plaza-post {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #111;
  width: 100%;
  overflow: hidden;
}

.plaza-post a {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 12px;
  justify-content: space-between;
}

.plaza-post .post-body {
  flex: 1;
  min-width: 0;
}

.plaza-post .plaza-thumb {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  margin-left: 12px;
  border-radius: 8px;
  overflow: hidden;
  background: #111;
}

.plaza-post .plaza-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vote-col {
  width: 32px;
  text-align: center;
  font-size: 12px;
  color: #888;
  line-height: 1.2;
}

.post-body {
  flex: 1;
  min-width: 0;
}

.post-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 6px;
}

.post-meta {
  font-size: 12px;
  color: #777;
}

/* WRITE BAR */
.plaza-write-bar {
  position: fixed;
  bottom: 72px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  padding: 10px 16px;
  background: #000;
  border-top: 1px solid #111;
}

.plaza-write-bar button {
  width: 100%;
  padding: 14px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

/* =========================
   AUTH BUTTONS (PLAZA ONLY)
========================= */

.auth-buttons {
  display: flex;
  gap: 8px;
}

.auth-buttons button {
  background: #111;
  border: 1px solid #333;
  color: #eee;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 8px;
  cursor: pointer;
}

.auth-buttons button:hover {
  background: #1a1a1a;
}

/* =========================
   PLAZA WRITE MODAL (FIX)
========================= */

.plaza-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;

  /* ✅ 기본은 무조건 숨김 */
  display: none;
}

/* ✅ hidden 없을 때만 표시 */
.plaza-modal:not(.hidden) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.plaza-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}

.plaza-modal-box {
  position: relative;
  width: calc(100% - 32px);
  max-width: 420px;
  background: #0f0f0f;
  border: 1px solid #222;
  border-radius: 14px;
  padding: 18px;
  z-index: 1;
}

.modal-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
}

#plaza-title {
  width: 100%;
  background: #111;
  border: 1px solid #333;
  color: #fff;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 10px;
}

/* 🔖 해시태그 입력칸 */
.plaza-tags-field { margin: 4px 0 10px; }
#plaza-tags {
  width: 100%;
  background: #111;
  border: 1px solid #333;
  color: #7ea2ff;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
}
#plaza-tags::placeholder { color: #565c6b; font-weight: 400; }
#plaza-tags:focus { border-color: #3d6bff; outline: none; }

#plaza-body {
  width: 100%;
  height: 120px;
  background: #111;
  border: 1px solid #333;
  color: #fff;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  resize: none;
}

.modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.modal-actions button {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid #333;
}

.btn-cancel {
  background: #111;
  color: #aaa;
}

.btn-submit {
  background: #2F80FF;
  color: #fff;
  border-color: #2F80FF;
}

/* =========================
   PLAZA WRITE MODAL (FIX)
========================= */

.plaza-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;

  /* ❗ 기본은 무조건 숨김 */
  display: none;
}

/* 보일 때만 */
.plaza-modal:not(.hidden) {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* MODAL CATEGORY */
.modal-category {
  margin-bottom: 10px;
}

.modal-category select {
  width: 100%;
  background: #111;
  border: 1px solid #333;
  color: #fff;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
}

/* CHAR COUNTER */
.char-counter {
  margin-top: 6px;
  text-align: right;
  font-size: 12px;
  color: #777;
}

.post-nickname {
  font-weight: 600;
  color: #ddd;
}

.plaza-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* =========================
   WRITE MODAL LAYOUT
========================= */

#plaza-write-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

#plaza-write-modal.hidden {
  display: none;
}

.plaza-write-box {
  width: 92%;
  max-width: 420px;
  background: #0f0f0f;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
}

/* =========================
   FORM ELEMENTS
========================= */

.plaza-write-box select,
.plaza-write-box input[type="text"],
.plaza-write-box textarea {
  width: 100%;
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 12px;
  color: #fff;
  font-size: 14px;
  margin-bottom: 12px;
}

.plaza-write-box textarea {
  resize: none;
  min-height: 90px;
}

/* =========================
   EDITOR TOOLBAR
========================= */

.editor-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.editor-toolbar button {
  background: #1e1e1e;
  border: 1px solid #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}

.editor-toolbar button:hover {
  background: #2a2a2a;
}

/* =========================
   EDITOR BODY
========================= */

.editor-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.editor-block textarea {
  width: 100%;
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 10px;
  color: #fff;
  font-size: 14px;
}

.editor-block img {
  width: 100%;
  border-radius: 10px;
  display: block;
}

.editor-block a {
  color: #4da3ff;
  text-decoration: underline;
  font-size: 14px;
}

/* =========================
   COVER IMAGE
========================= */

.cover-image {
  margin: 10px 0;
}

.cover-image input {
  font-size: 13px;
  color: #ccc;
}

/* =========================
   FOOTER BUTTONS
========================= */

.plaza-write-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.plaza-write-actions button {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  font-size: 15px;
  cursor: pointer;
  border: none;
}

.plaza-write-actions .cancel {
  background: #1e1e1e;
  color: #ccc;
}

.plaza-write-actions .submit {
  background: #2f7df6;
  color: #fff;
}

.editor-body {
  margin-top: 12px;
}

#plaza-body {
  width: 100%;
  min-height: 140px;
  background: transparent;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 14px;
  color: #fff;
  font-size: 15px;
  line-height: 1.6;
  resize: none;
}

#plaza-body::placeholder {
  color: #777;
}

.editor {
  white-space: pre-wrap;   /* 엔터, 줄바꿈 유지 */
  word-break: break-word; /* 긴 텍스트 줄바꿈 */
  outline: none;
}

.editor-body textarea {
  width: 100%;
  min-height: 160px;
  resize: none;

  background: transparent;
  color: #fff;
  border: none;
  outline: none;

  font-size: 15px;
  line-height: 1.6;
  padding: 12px;
}

.editor-body {
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 4px;
  margin-top: 12px;
}

.plaza-list .plaza-thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.plaza-post .plaza-thumb {
  width: 64px !important;
  height: 64px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  border-radius: 8px;
  overflow: hidden;
  background: #111;
}

.plaza-post a {
  overflow: hidden;
}
/* ===========================================================
   갈라 광장 에디터 고도화 (툴바 2줄 · 첨부 · 미리보기 · 드롭)
=========================================================== */
#plaza-toolbar.editor-toolbar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
#plaza-toolbar .tb-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
#plaza-toolbar .tb-btn {
  background: #1b1b1b;
  border: 1px solid #333;
  color: #e8e8e8;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
#plaza-toolbar .tb-btn:hover { background: #262626; }
#plaza-toolbar .tb-btn:active { transform: translateY(1px); }
#plaza-toolbar .tb-btn b,
#plaza-toolbar .tb-btn i,
#plaza-toolbar .tb-btn s { font-size: 14px; }
#plaza-toolbar .tb-sep {
  width: 1px; height: 18px; background: #333; margin: 0 2px;
}
#plaza-toolbar .tb-preview { margin-left: auto; }
#plaza-toolbar .tb-preview.on {
  background: #2f7df6; border-color: #2f7df6; color: #fff;
}

/* 본문 입력 */
#plaza-body {
  font-size: 16px;              /* iOS 포커스 줌 방지 */
  min-height: 180px;
}

/* 에디터 바디(드롭 대응 relative) */
.editor-body { position: relative; }

.plaza-drophint {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(47,125,246,.12);
  border: 2px dashed #2f7df6;
  border-radius: 12px;
  color: #9cc4ff; font-weight: 700; font-size: 14px;
  pointer-events: none; z-index: 3;
}

/* 미리보기 패널 */
.plaza-preview {
  width: 100%;
  min-height: 180px;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 14px;
  color: #eee;
  line-height: 1.6;
  font-size: 15px;
  overflow-wrap: break-word;
}
.plaza-preview .pb-empty { color: #777; }

/* 첨부 미리보기 스트립 */
.plaza-attach {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 4px;
}
.plaza-attach .pa-item {
  position: relative;
  width: 74px; height: 74px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #333;
  background: #111;
}
.plaza-attach .pa-item img,
.plaza-attach .pa-item video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.plaza-attach .pa-badge {
  position: absolute; left: 4px; bottom: 4px;
  background: rgba(0,0,0,.7); color: #fff;
  font-size: 11px; padding: 1px 5px; border-radius: 6px;
}
.plaza-attach .pa-del {
  position: absolute; top: 3px; right: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0,0,0,.75); color: #fff;
  border: none; cursor: pointer; font-size: 12px; line-height: 1;
}
.plaza-attach .pa-uploading {
  display: flex; align-items: center; justify-content: center;
}
.plaza-attach .pa-spin {
  width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid #333; border-top-color: #2f7df6;
  animation: pa-spin 0.8s linear infinite;
}
@keyframes pa-spin { to { transform: rotate(360deg); } }

/* ===========================================================
   공용 본문 렌더 결과 (작성 미리보기 · 목록엔 미사용)
=========================================================== */
.pb-p { margin: 0 0 8px; }
.pb-gap { height: 8px; }
.pb-media { margin: 10px 0; }
.pb-media img,
.pb-media video {
  width: 100%; border-radius: 12px; display: block; background: #000;
}
.pb-embed {
  position: relative; width: 100%; aspect-ratio: 16/9;
  margin: 10px 0; border-radius: 12px; overflow: hidden; background: #000;
}
.pb-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pb-quote {
  margin: 8px 0; padding: 6px 12px;
  border-left: 3px solid #2f7df6; color: #bcd3ff; background: rgba(47,125,246,.08);
  border-radius: 0 8px 8px 0;
}
.pb-list { margin: 8px 0; padding-left: 20px; }
.pb-list li { margin: 3px 0; }
.pb-linkcard {
  display: block; margin: 8px 0; padding: 10px 12px;
  border: 1px solid #333; border-radius: 10px; color: #7fb2ff;
  word-break: break-all; text-decoration: none;
}

/* hidden 속성이 display 지정보다 우선하도록 (드롭힌트/첨부/미리보기) */
.plaza-drophint[hidden],
.plaza-attach[hidden],
.plaza-preview[hidden] { display: none !important; }

/* 익명 표시 선택 */
.plaza-anon-row {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 0 2px; font-size: 13px; color: #ccc; cursor: pointer;
}
.plaza-anon-row input { accent-color: #2f7df6; width: 16px; height: 16px; }
.plaza-anon-row .anon-note { color: #777; font-size: 11.5px; }

/* 목록 카드 통계 (추천/댓글/조회) */
.plaza-post .post-stats {
  display: flex; gap: 10px; margin-top: 5px;
  font-size: 12px; color: #8a8f99;
}
.plaza-post .post-stats span { display: inline-flex; align-items: center; gap: 3px; }

/* 댓글 아이콘 — 이모지(💬) 대신 다른 아이콘과 같은 규약의 SVG */
.pv-cmt { gap: 4px !important; }
.pv-cmt .ic-comment { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }



/* 목록 카드 저장: 통계 줄 인라인 SVG 북마크 (조회 바로 옆) */
.plaza-post .post-stats { align-items: center; }
.plaza-save-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; color: #8a8f99;
}
.plaza-save-btn .ic-bookmark { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.plaza-save-btn.on { color: #f5c518; }
.plaza-save-btn.on .ic-bookmark { fill: #f5c518; }
.plaza-save-btn:disabled { opacity: .5; }
.plaza-share-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; color: #8a8f99;
}
.plaza-share-btn .ic-share { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* 목록 카드 업/다운 투표 (레딧식) */
.pv-vote { display: inline-flex; align-items: center; gap: 4px; }
.pv-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; color: #8a8f99;
}
.pv-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.pv-btn.pv-up.on { color: #4da3ff; }
.pv-btn.pv-down.on { color: #ff5c5c; }
.pv-score { min-width: 14px; text-align: center; font-weight: 700; color: #cfd4de; }

/* =========================================================
   🏛 광장 톤앤매너 고도화 (GALLA 게임 팔레트)
   파랑 #3d6bff / 골드 #c9d1e0 / 빨강 #ff4d67 / 카드 그라데이션
========================================================= */
html, body {
  background: radial-gradient(120% 80% at 50% -10%, #14141a 0%, #0a0a0b 55%) #0a0a0b !important;
  color: #f5f5f2 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Pretendard', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* 안내 */
.plaza-guide {
  background: linear-gradient(180deg, rgba(201,209,224,.06), transparent) !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  color: #9a9aa0 !important; font-size: 12.5px !important; line-height: 1.6 !important;
}

/* 카테고리 칩 */
.plaza-categories { padding: 12px !important; border-bottom: none !important; scrollbar-width: none; }
.plaza-categories::-webkit-scrollbar { display: none; }
.plaza-categories button {
  background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.1) !important;
  color: #9a9aa0 !important; padding: 7px 14px !important; font-size: 12.5px !important;
  font-weight: 700 !important; cursor: pointer;
}
.plaza-categories button.active {
  background: rgba(201,209,224,.14) !important; border-color: rgba(201,209,224,.5) !important;
  color: #c9d1e0 !important;
}

/* 리스트 → 카드 */
.plaza-list { padding: 6px 12px !important; display: flex; flex-direction: column; gap: 10px; }
.plaza-post {
  display: block !important; padding: 0 !important; overflow: visible !important;
  background: linear-gradient(180deg, #131418, #0c0c0f) !important;
  border: 1px solid rgba(255,255,255,.08) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 16px !important;
  transition: transform .1s ease;
}
.plaza-post:active { transform: scale(.995); }
.plaza-post a, .plaza-post .plaza-link {
  display: flex !important; align-items: stretch !important; gap: 12px !important;
  padding: 14px !important; justify-content: space-between !important;
  text-decoration: none; color: inherit;
}
.plaza-post .post-body { flex: 1; min-width: 0; }

.post-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 11.5px; }
.post-cat {
  padding: 2px 8px; border-radius: 999px;
  background: rgba(61,107,255,.14); border: 1px solid rgba(61,107,255,.35);
  color: #7f9dff; font-weight: 800;
}
.post-author { color: #c9c9cf; font-weight: 700; }
.post-time { color: #6c6c72; margin-left: auto; }

.post-title { font-size: 15.5px !important; font-weight: 800 !important; color: #f5f5f2 !important; line-height: 1.35 !important; margin-bottom: 4px !important; }
.post-excerpt {
  font-size: 12.5px; color: #9a9aa0; line-height: 1.5; margin-bottom: 10px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* 썸네일 */
.plaza-post .plaza-thumb {
  width: 78px !important; height: 78px !important; flex: 0 0 78px !important;
  margin: 0 !important; border-radius: 12px !important; overflow: hidden;
  background: #1c1c22 !important; align-self: center;
}

/* 통계 + 추천 */
.plaza-post .post-stats { display: flex !important; align-items: center; gap: 14px !important; font-size: 12px; color: #8b8b93; font-weight: 700; margin-top: 2px; }
.pv-vote { display: inline-flex; align-items: center; gap: 2px; background: rgba(255,255,255,.04); border-radius: 999px; padding: 2px 5px; }
.pv-btn { background: none; border: none; color: #8b8b93; cursor: pointer; display: flex; padding: 2px; }
.pv-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.pv-btn.pv-up.on { color: #c9d1e0 !important; }
.pv-btn.pv-down.on { color: #ff5c5c !important; }
.pv-score { min-width: 14px; text-align: center; font-weight: 800; color: #cfd4de; font-size: 12px; }
.plaza-save-btn.on { color: #c9d1e0 !important; }
.plaza-save-btn.on .ic-bookmark { fill: #c9d1e0 !important; }

/* 글쓰기 바 → 골드 */
.plaza-write-bar {
  background: linear-gradient(180deg, transparent, #0a0a0b 45%) !important;
  border-top: none !important;
}
.plaza-write-bar button {
  border: none !important; border-radius: 14px !important;
  background: linear-gradient(135deg, #c9d1e0, #e0972a) !important;
  color: #1a1408 !important; font-size: 14.5px !important; font-weight: 900 !important;
  box-shadow: 0 10px 26px -10px rgba(139,147,163,.6);
}

/* 헤더 단차 제거 — 라디얼 본문 배경이 헤더 뒤로 이어지게 */
/* nav.css의 '그라디언트 상단 슬라이스' 헤더 배경을 그대로 쓴다(투과 겹침 방지) */
.header{ border-bottom:none !important; }

/* 가이드 밴드 → 카드화 (헤더/배경과의 단차 제거) */
.plaza-guide {
  margin: 4px 12px 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #131418, #0e0e12) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

/* =========================================================
   헤더-본문 폭 동기화 (태블릿·좁은 PC 창 481~1099px)
   헤더는 header.css가 fixed(left:0/right:0 = 전폭)로 고정하는데
   이 페이지 본문(#app)은 480px 캡 — 그 사이 폭에서 헤더의 +·♥가
   화면 양끝으로 찢어져 '폭 정렬 무너짐'으로 보였다.
   1100px+는 desktop.css가 헤더·본문을 함께 520으로 묶으므로 제외.
   ========================================================= */
@media (min-width: 481px) and (max-width: 1099.98px) {
  .header { max-width: 480px; margin-left: auto; margin-right: auto; }
}

/* ═══ 광장 툴바 — 검색 + 정렬(후끈/최신/조회) (2026-07-27 고도화) ═══ */
.plaza-toolbar { display: flex; flex-direction: column; gap: 8px; padding: 2px 16px 10px; }
.plaza-search { display: flex; align-items: center; gap: 8px; background: #12141c;
  border: 1px solid #232634; border-radius: 12px; padding: 9px 12px; }
.plaza-search svg { width: 17px; height: 17px; color: #8b93a7; flex: 0 0 auto; }
.plaza-search input { flex: 1; min-width: 0; background: transparent; border: none;
  color: #fff; font-size: 14px; outline: none; padding: 0; }
.plaza-search input::placeholder { color: #6b7280; }
#plaza-search-clear { flex: 0 0 auto; background: #2a2e3c; color: #cfd6e6; border: none;
  width: 20px; height: 20px; border-radius: 50%; font-size: 10px; cursor: pointer; line-height: 1; }
.plaza-sorts { display: flex; gap: 6px; }
.plaza-sorts button { background: #14161e; border: 1px solid #232634; color: #9aa3b8;
  font-size: 12.5px; font-weight: 700; padding: 6px 13px; border-radius: 999px; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s; }
.plaza-sorts button.active { background: rgba(61,79,255,.18); border-color: #3a4fff; color: #cdd6ff; }