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

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

#app {
  max-width:480px;
  margin:0 auto;
  padding-bottom:calc(124px + env(safe-area-inset-bottom));
}

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

/* MAIN POST */
.plaza-post {
  display:flex;
  gap:12px;
  padding:16px;
  border-bottom:1px solid #111;
}
.post-vote {
  width:36px;
  text-align:center;
  color:#888;
}
.post-vote button {
  background:none;
  border:none;
  color:#888;
  font-size:16px;
}
.vote-score {
  font-size:13px;
  margin:4px 0;
}
.post-title {
  font-size:17px;
  font-weight:700;
  margin-bottom:6px;
}
.post-meta {
  font-size:12px;
  color:#777;
  margin-bottom:10px;
}
.post-content {
  font-size:14px;
  line-height:1.6;
}

/* COMMENT WRITE */
.comment-write {
  padding:16px;
  border-bottom:1px solid #111;
}
.comment-write textarea {
  width:100%;
  height:72px;
  background:#111;
  border:1px solid #333;
  color:#fff;
  border-radius:8px;
  padding:10px;
}
.comment-write button {
  margin-top:8px;
  width:100%;
  padding:10px;
  background:#222;
  border:1px solid #333;
  color:#fff;
  border-radius:8px;
}

/* COMMENTS */
.comment-list {
  list-style:none;
}
.comment {
  padding:14px 16px;
  border-bottom:1px solid #111;
}
.comment-header {
  font-size:12px;
  color:#777;
  margin-bottom:4px;
}
.comment-body {
  font-size:14px;
  margin-bottom:6px;
}
.comment-actions button {
  background:none;
  border:none;
  color:#777;
  font-size:12px;
  margin-right:10px;
}
.comment-children {
  margin-left:16px;
  border-left:1px solid #111;
}


/* =========================
   SPACING UPGRADE (ADD ONLY)
   plaza_detail.css 하단에 추가
========================= */

/* GUIDE 아래 숨 쉴 공간 */
.plaza-guide {
  margin-bottom: 28px;
}

/* 메인 글 전체 블록 여백 강화 */
.plaza-post {
  margin-bottom: 32px;
}

/* 제목 / 메타 / 본문 리듬 분리 */
.post-title {
  margin-bottom: 10px;
  line-height: 1.45;
}

.post-meta {
  margin-bottom: 18px;
}

.post-content {
  line-height: 1.75;
  padding-bottom: 14px;
}

/* 댓글 입력 영역 분리 */
.comment-write {
  margin: 36px 0 40px;
}

.comment-write textarea {
  height: 90px;
  line-height: 1.6;
}

.comment-write button {
  margin-top: 14px;
}

/* 댓글 간격 확보 (답답함 제거 핵심) */
.comment {
  margin-bottom: 14px;
  padding: 18px 16px;
}

/* 댓글 액션(좋아요/싫어요/답글) 숨통 */
.comment-actions {
  margin-top: 8px;
}

/* 대댓글 스레드 공기 + 구조감 */
.comment-children {
  margin-top: 14px;
  margin-left: 20px;
  padding-left: 16px;
  border-left: 1px solid #1a1a1a;
}

.comment-children .comment {
  margin-bottom: 12px;
}

/* NAV 위 여백 확보 (댓글 마지막이 붙지 않게) */
.comment-list {
  padding-bottom: 24px;
}

/* =========================
   FIXED COMMENT WRITE
========================= */

.comment-write {
  position: fixed;
  left: 0;
  right: 0;
  /* 하단 네비(fixed: bottom 14px + safe-area, 높이 ~48px)보다 위에 떠야 한다.
     56px 하드코딩은 safe-area를 무시해 노치 기기에서 '댓글 등록'이 네비 뒤로 겹쳤다. */
  bottom: calc(78px + env(safe-area-inset-bottom));
  max-width: 480px;
  margin: 0 auto;
  padding: 12px;
  background: #000;
  border-top: 1px solid #222;
  z-index: 1000;
}

.comment-write textarea {
  width: 100%;
  height: 60px;
  resize: none;
  border-radius: 10px;
}

.comment-write button {
  margin-top: 8px;
  width: 100%;
}

/* 답글 N개 더보기 — 인스타 스타일 */
.toggle-replies-btn {
  background: none;
  border: none;
  padding: 0;
  margin-top: 6px;

  color: #8e8e8e;          /* 인스타 회색 */
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

/* 들여쓰기 유지 */
.reply-toggle-wrapper {
  margin-left: 25px;
}

/* =========================
   POST IMAGE RENDER
========================= */

.post-image-wrapper {
  margin: 12px 0;
  width: 100%;
}

.post-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

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

.post-content {
  width: 100%;
}

.post-image-wrapper {
  width: 100%;
  margin: 12px 0;
}

.post-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
}

.post-content img {
  max-width: 100%;
}


/* =========================
   POST ACTION BAR — FINAL (DARK + WHITE, PIXEL-ALIGNED)
========================= */

/* 전체 바 */
.post-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-top: 18px;
  padding: 10px 14px;

  background: #121212;
  border: 1px solid #222;
  border-radius: 999px;
}

/* 좌측 / 우측 그룹 */
.action-left,
.action-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 공통 pill */
.pill {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 6px 14px;
  border-radius: 999px;

  background: #1a1a1a;
  border: 1px solid #2a2a2a;

  color: #fff;
}

/* 업/다운 divider */
.vote-pill .divider {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,0.25);
}

/* 숫자 */
.count {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #fff;

  display: flex;
  align-items: center;
}

/* SVG 아이콘 공통 */
.icon {
  width: 18px;
  height: 18px;

  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;

  display: block;
}

/* 우측 원형 버튼 (어워드 / 공유) */
.circle-btn {
  width: 36px;
  height: 36px;

  border-radius: 50%;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;

  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* hover */
.pill:hover,
.circle-btn:hover {
  background: #222;
  border-color: #333;
}

.post-action-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 🔥 투표 pill */
.vote-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #0f0f0f;
  border: 1px solid #1f1f1f;
  border-radius: 999px;
}

/* 버튼은 독립 */
.vote-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.vote-btn:hover {
  background: #1a1a1a;
}

.vote-up:hover svg {
  color: #9aa4ff;
}

.vote-down:hover svg {
  color: #ff9a9a;
}

/* 숫자 */
.vote-score {
  font-size: 14px;
  font-weight: 600;
  color: #e5e5e5;
  min-width: 32px;
  text-align: center;
}

/* 가운데 구분선 */
.vote-divider {
  width: 1px;
  height: 18px;
  background: #2a2a2a;
}

/* 댓글 */
.comment-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #0f0f0f;
  border: 1px solid #1f1f1f;
}

/* 공유 */
.circle-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0f0f0f;
  border: 1px solid #1f1f1f;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
/* ===========================================================
   갈라 광장 본문 렌더 (공용 렌더러 결과: 이미지/동영상/임베드/마크다운)
=========================================================== */
.post-content .pb-p { margin: 0 0 10px; line-height: 1.65; }
.post-content .pb-gap { height: 10px; }
.post-content .pb-media { margin: 12px 0; }
.post-content .pb-media img,
.post-content .pb-media video {
  width: 100%; height: auto; display: block;
  border-radius: 10px; background: #000;
}
.post-content .pb-embed {
  position: relative; width: 100%; aspect-ratio: 16/9;
  margin: 12px 0; border-radius: 10px; overflow: hidden; background: #000;
}
.post-content .pb-embed iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.post-content .pb-quote {
  margin: 10px 0; padding: 8px 14px;
  border-left: 3px solid #2f7df6; color: #bcd3ff;
  background: rgba(47,125,246,.08); border-radius: 0 8px 8px 0;
}
.post-content .pb-list { margin: 10px 0; padding-left: 22px; }
.post-content .pb-list li { margin: 4px 0; }
.post-content .pb-linkcard {
  display: block; margin: 10px 0; padding: 12px 14px;
  border: 1px solid #333; border-radius: 10px; color: #7fb2ff;
  word-break: break-all; text-decoration: none;
}
.post-content a { color: #7fb2ff; }
.post-content strong { font-weight: 700; }
.post-content del { opacity: .7; }

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

/* ===========================================================
   댓글: 작성자 헤더 + 좋아요/싫어요
=========================================================== */
.comment-meta {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 4px;
}
.comment-meta .cm-nick {
  font-size: 13px; font-weight: 700; color: #8fb6ff;
}
.comment-meta .cm-time {
  font-size: 11.5px; color: #777;
}
.comment-body { font-size: 15px; line-height: 1.55; }

.comment-actions {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
}
.cv-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: #161616; border: 1px solid #2e2e2e; color: #bbb;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; cursor: pointer;
}
.cv-btn span { font-weight: 700; }
.cv-btn.cv-like.on { border-color: #4a7bff; color: #8fb6ff; background: rgba(74,123,255,.12); }
.cv-btn.cv-dislike.on { border-color: #ff6b6b; color: #ff9b9b; background: rgba(255,107,107,.12); }
.comment-actions .reply-btn {
  background: none; border: none; color: #888; font-size: 12px; cursor: pointer; padding: 4px 6px;
}

/* 저장(북마크) 버튼 활성 */
.bookmark-btn.on .icon { fill: #f5c518; stroke: #f5c518; }

/* =========================================================
   🏛 광장 상세 톤앤매너 고도화 (GALLA 게임 팔레트)
========================================================= */
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;
}

/* 제목·메타 */
.post-title { font-size: 20px !important; font-weight: 900 !important; color: #f5f5f2 !important; line-height: 1.35 !important; }
.post-meta { color: #8b8b93 !important; font-size: 12.5px !important; }

/* 본문 카드 */
.post-content {
  background: linear-gradient(180deg, #131418, #0c0c0f) !important;
  border: 1px solid rgba(255,255,255,.08) !important; border-radius: 16px !important;
  padding: 16px !important; margin: 14px 0 !important;
  font-size: 14.5px !important; line-height: 1.7 !important; color: #e7e7ea !important;
}
.post-content img, .post-content video { border-radius: 12px !important; }
.post-content a { color: #7f9dff !important; }
.post-content .pb-quote { border-left: 3px solid rgba(201,209,224,.5) !important; color: #c9c9cf !important; }

/* 액션 바 (추천 pill / 댓글 / 저장 / 공유) */
.post-action-bar {
  background: linear-gradient(180deg, #131418, #0c0c0f) !important;
  border: 1px solid rgba(255,255,255,.08) !important; border-radius: 999px !important;
}
.vote-pill { background: rgba(255,255,255,.04) !important; }
.vote-btn:hover { color: #c9d1e0 !important; }
.vote-btn.on.vote-up, .vote-up.on { color: #c9d1e0 !important; }
.vote-btn.on.vote-down, .vote-down.on { color: #ff5c5c !important; }
.vote-score { color: #f5f5f2 !important; font-weight: 900 !important; }
.circle-btn { border: 1px solid rgba(255,255,255,.1) !important; color: #c9c9cf !important; }
.circle-btn.on, .bookmark-btn.on { color: #c9d1e0 !important; }

/* 댓글 입력 */
.comment-write textarea {
  background: #101116 !important; border: 1px solid #23252f !important;
  border-radius: 12px !important; color: #fff !important; font-size: 14px !important;
}
.comment-write textarea:focus { border-color: #3d6bff !important; outline: none; }
.comment-write button {
  background: linear-gradient(135deg, #c9d1e0, #e0972a) !important;
  color: #1a1408 !important; border: none !important; border-radius: 12px !important;
  font-weight: 900 !important;
}

/* 댓글 리스트 카드 */
.comment-list > li {
  background: linear-gradient(180deg, #131418, #0c0c0f) !important;
  border: 1px solid rgba(255,255,255,.07) !important; border-radius: 14px !important;
  padding: 12px 14px !important; margin-bottom: 10px !important;
}
.cm-nick { color: #f5f5f2 !important; font-weight: 800 !important; font-size: 13px !important; }
.cm-time { color: #6c6c72 !important; font-size: 11px !important; }
.comment-body { color: #e7e7ea !important; font-size: 13.5px !important; line-height: 1.5 !important; margin: 6px 0 !important; }
.reply-btn, .toggle-replies-btn { color: #7f9dff !important; background: none !important; border: none !important; font-weight: 800 !important; font-size: 12px !important; cursor: pointer; }
.reply-list > li {
  background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 12px !important; padding: 10px 12px !important; margin-top: 8px !important;
}

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

/* 커뮤 원문 링크 등 긴 URL로 인한 가로 폭 깨짐 방지 (2026-07-13) */
.post-inner, .post-body, .post-content,
.post-content .pb-p, .post-content a {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.post-inner { max-width: 100%; box-sizing: border-box; }

/* 👻 유령 토글 (댓글 컴포저) */
.ghost-toggle{ display:inline-flex; align-items:center; gap:5px; margin:6px 0 2px;
  padding:7px 12px; border-radius:999px; cursor:pointer; font-size:12.5px; font-weight:800;
  background:#1a1726; border:1px solid #33304a; color:#9a92b5; transition:all .15s ease; }
.ghost-toggle .gt-hint{ font-size:10.5px; color:#6b6486; font-weight:700; }
.ghost-toggle.has-pass{ color:#c9beea; }
.ghost-toggle.has-pass .gt-hint{ display:none; }
.ghost-toggle.on{ background:linear-gradient(100deg,#4a3f7e,#372f5e); border-color:#7a6bc0; color:#fff; box-shadow:0 0 16px rgba(122,107,192,.25); }
.ghost-toggle.on .gt-hint::before{ content:"ON"; color:#e9e4ff; }
.ghost-toggle:active{ transform:scale(.95); }

/* =========================
   한 줄 컴포저 — 입력창 + 👻 + 등록 (타 게시판과 동일 UX)
========================= */
.comment-write { display: flex !important; align-items: center !important; gap: 8px !important; }
.comment-write textarea {
  flex: 1 1 auto !important; width: auto !important;
  height: 44px !important; min-height: 44px !important; padding: 12px !important;
}
.comment-write #commentSubmitBtn {
  flex: 0 0 auto !important; width: auto !important; margin: 0 !important;
  height: 44px !important; padding: 0 18px !important; white-space: nowrap !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; }
}

/* 액션바 아이콘 크기 통일 — 갈비스만 22px 로 커 보였다(26.9.19 사장님: 「크기가 동떨어져」) */
.circle-btn svg, .circle-btn .icon { width: 18px; height: 18px; }