/* 커뮤니티 게시판 (목록 / 글 보기 / 글쓰기) 전용 */



/* ---------- 글 보기 ---------- */
.post { overflow: hidden; }
.post__head { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-8) var(--sp-8) var(--sp-6); border-bottom: 1px solid var(--line); }
.post__title { font-size: var(--fs-post-title); font-weight: var(--fw-heavy); letter-spacing: var(--ls-tighter); line-height: var(--lh-tight); }
.post__author { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.post__author-info { flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; } /* 남는 폭을 채우고 좁으면 정보 줄이 접힘 (정보 줄이 길면 아바타만 윗줄에 남았음) */
.post__author-name { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text-strong); }
.post__author .meta { column-gap: var(--sp-2); }
.post__tools { display: flex; gap: var(--sp-2); margin-left: auto; }
.post__body { display: flex; flex-direction: column; gap: var(--sp-6); padding: var(--sp-8); font-size: var(--fs-lg); line-height: var(--lh-reading); color: var(--text); }
.post__img { aspect-ratio: 16 / 9; }
.post__video { position: relative; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); overflow: hidden; }
.post__video-label { position: absolute; left: var(--sp-4); bottom: var(--sp-4); padding: 4px 10px; font-size: var(--fs-sm); color: #fff; background: rgba(0,0,0,0.6); border-radius: 6px; }
.linked-data { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-4); color: var(--text); }
.linked-data:hover { color: var(--text); }
.linked-data__img { width: 96px; flex-shrink: 0; aspect-ratio: 1 / 1; }
.linked-data__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: var(--lh-snug); }
.linked-data__label { font-size: var(--fs-xs); color: var(--pink); font-weight: var(--fw-semibold); letter-spacing: 0.04em; }
.linked-data__name { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text-strong); }
.tag-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tag-list a { padding: 4px 12px; font-size: var(--fs-sm); border-radius: 999px; background: rgba(196,181,253,0.1); line-height: var(--lh-base); }
.post__actions { display: flex; justify-content: center; gap: var(--sp-3); padding: var(--sp-8) var(--sp-8) var(--sp-8); flex-wrap: wrap; }
.post__actions .btn { min-width: 120px; }

.post-nav { display: flex; flex-direction: column; }
.post-nav a { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-6); color: var(--text); min-width: 0; transition: background .2s ease; }
.post-nav a + a { border-top: 1px solid var(--line); }
.post-nav a:hover { background: var(--hover); }
.post-nav__label { flex-shrink: 0; width: 48px; font-size: var(--fs-sm); color: var(--muted); }

@media (max-width: 640px) {
  /* 폰 글 머리: 첫 줄 = 종류 딱지 · 주 캐릭터 + 오른쪽 위 링크 복사 · 더 보기(테두리 없는 아이콘), 제목, 아바타 + 글쓴이 · 날짜 · 조회 · 댓글 한 줄 */
  .post__head { position: relative; gap: var(--sp-3); padding: var(--sp-1) var(--sp-5) var(--sp-4); }
  .post__head > .row { min-height: 44px; padding-right: 96px; flex-wrap: nowrap; align-items: center; overflow: hidden; } /* 오른쪽 96 = 도구 아이콘 두 개 자리 */
  .post__title { font-size: var(--fs-3xl); }
  .post__author { flex-wrap: nowrap; gap: var(--sp-3); margin-top: var(--sp-1); }
  .post__author .avatar { width: 32px; height: 32px; font-size: var(--fs-xs); }
  .post__author-info { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--sp-2); row-gap: 0; } /* 글쓴이 이름이 길면 날짜 · 조회 · 댓글 묶음이 통째로 아랫줄로 (짧으면 한 줄 그대로) */
  .post__author-name { flex-shrink: 0; font-size: var(--fs-sm); }
  .post__author .meta { flex: 0 0 auto; flex-wrap: nowrap; } /* 묶음은 줄어들지 않고 한 덩어리로 아랫줄로 내려감 (.meta 는 flex + wrap 이라 nowrap 은 칸에 줘야 한 줄로 유지) */
  .post__author .meta > * { white-space: nowrap; }
  .post__author-name .user-link { display: inline-flex; align-items: center; min-height: 44px; margin-block: -13px; } /* 글쓴이 메뉴 누르는 곳 44px (보이는 줄 높이는 그대로) */
  .post__body { padding: var(--sp-6) var(--sp-5); font-size: var(--fs-base); gap: var(--sp-5); }
  .post__actions { padding: var(--sp-6) var(--sp-5) var(--sp-5); }
  .post__actions > form { flex: 1; min-width: 0; display: flex; } /* 늘어나는 칸은 버튼을 감싼 form 이라 form 이 반씩 차지하고 버튼은 그 폭을 채움 */
  .post__actions .btn { flex: 1; min-width: 0; }
  .post__tools { position: absolute; top: var(--sp-1); right: calc(var(--sp-3) * -1); margin: 0; gap: 0; } /* 머리 오른쪽 위에 띄움 (누르는 곳 44, 모양은 테두리 없이 아이콘만) */
  .post__tools .btn-icon { width: 44px; height: 44px; border: 0; background: none; color: var(--text-sub); }
  .linked-data { gap: var(--sp-4); }
  .linked-data__img { width: 64px; }
  .post-nav a { padding: var(--sp-4) var(--sp-5); }
}

/* 댓글 */
.comments__sort .pill { min-height: 34px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.comments__form {display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5) var(--sp-6); } /* 아래 테두리는 뺌: 카드 맨 아래라 흰 선처럼 보였음 */
.comments__form .textarea { min-height: 96px; }
.comments__form-foot { display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-3); }
.comments__form-foot .btn { min-width: 96px; min-height: 40px; border-radius: 10px; }
.comment { display: flex; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--line); }
.comment__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.comment__meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-md); }
.comment__name { font-weight: var(--fw-semibold); color: var(--text-strong); }
.comment__time { font-size: var(--fs-xs); color: var(--muted); }
.comment__text { font-size: var(--fs-base); line-height: var(--lh-loose); color: var(--text); }
.comment__actions { display: flex; gap: var(--sp-1); margin-left: calc(var(--sp-3) * -1); }
.comment__actions button { min-height: 36px; padding: 0 var(--sp-3); font-size: var(--fs-sm); color: var(--muted); background: transparent; border: 0; border-radius: 6px; }
.comment__actions button:hover { color: var(--text-strong); background: var(--hover); }
.comment--reply { padding-left: calc(var(--sp-6) + var(--sp-8)); background: var(--hover); }
.comment__reply-icon { flex-shrink: 0; margin-top: 6px; }
.chip--author { padding: 1px 8px; font-size: var(--fs-2xs); color: var(--pink); border-color: rgba(217,147,184,0.5); }
.comments__more { display: block; padding: var(--sp-4); text-align: center; font-size: var(--fs-md); }
@media (max-width: 640px) {
  .comments__form, .comment { padding: var(--sp-4) var(--sp-5); }
  .comment--reply { padding-left: var(--sp-8); }
  .comment__reply-icon { display: none; }
}

/* 사이드: 작성자 카드 */
.author-card { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); text-align: center; }
.author-card .avatar { width: 88px; height: 88px; font-size: var(--fs-2xl); } /* 글쓴이 카드는 크게 (마이페이지 프로필과 같은 88px, 다른 곳 아이콘은 --icon-size 그대로) */
.author-card__name { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-strong); }
.author-card__main { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--line); } /* 주 캐릭터 칸 */
.author-card__label { font-size: var(--fs-xs); color: var(--muted); }
.author-card__stats { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-2); }
.author-card__stat { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-2); background: var(--hover); border-radius: 8px; }
.author-card__stat strong { font-size: var(--fs-lg); color: var(--text-strong); }
.author-card__stat span { font-size: var(--fs-xs); color: var(--muted); }
.pop-list { display: flex; flex-direction: column; }
.pop-list a { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; color: var(--text); font-size: var(--fs-md); min-width: 0; }
.pop-list a + a { border-top: 1px solid var(--line); }
.pop-list a:hover { color: var(--text-strong); }
.pop-list .rank-no { font-size: var(--fs-md); }

/* ---------- 글쓰기 ---------- */
.editor { border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; background: rgba(0,0,0,0.25); }
.editor:focus-within { border-color: var(--accent); }
.editor__toolbar { display: flex; gap: 2px; padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.editor__toolbar::-webkit-scrollbar { display: none; }
.editor__toolbar button { width: 40px; height: 40px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--text-sub); background: transparent; border: 0; border-radius: 6px; }
.editor__toolbar button:hover { color: var(--text-strong); background: var(--hover); }
.editor .textarea { border: 0; border-radius: 0; background: transparent; min-height: 320px; }
.dropzone { width: 100%; min-height: 148px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-5); font-size: var(--fs-md); color: var(--text-sub); text-align: center; background: rgba(0,0,0,0.2); border: 1px dashed var(--accent-line); border-radius: var(--radius); }
.dropzone:hover { background: rgba(139,92,246,0.08); color: var(--text-strong); }
.dropzone__hint { font-size: var(--fs-xs); color: var(--muted); }
.yt-preview { min-height: 92px; }
.link-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.link-chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 4px 4px 4px 12px; font-size: var(--fs-md); color: var(--text); background: rgba(139,92,246,0.18); border: 1px solid var(--accent-line); border-radius: 999px; }
.link-chip__type { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--accent); }
.link-chip button { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-lg); line-height: var(--lh-none); color: var(--muted); background: transparent; border: 0; border-radius: 50%; }
.link-chip button:hover { color: var(--text-strong); background: var(--hover); }
.suggest { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); }
.suggest button { min-height: 32px; padding: 0 var(--sp-3); font-size: var(--fs-sm); color: var(--text-sub); background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; }
.suggest button:hover { border-color: var(--accent-line); color: var(--text-strong); }

@media (max-width: 480px) { .editor .textarea { min-height: 240px; } }

/* 글쓰기 (board/write.html, 시안 docs/write-sian/polish.html): 한 장짜리 카드를 묶음(기본 · 본문 · 첨부 · 영상 정보 · 분류와 연결)으로 나누고 등록 줄이 따라옴
   오른쪽은 고른 게시판에 맞는 가이드. 영상 정보 묶음 · 영상 종류는 board-editor.js 가 보이고 숨김 */
.wr { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--sp-6); align-items: start; } /* 오른쪽 작성 가이드는 좁게: 본문 칸이 넓게 */
.wr-title { grid-column: 1 / -1; display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-3); margin: 0 0 var(--sp-5); font-size: var(--fs-page-title); font-weight: var(--fw-heavy); color: var(--text-strong); }
.wr-title small { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--muted); }
.wr-main .form-alert { margin-bottom: var(--sp-4); }
.wr-sheet { background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.wr-grp { padding: var(--sp-6) var(--sp-6); border-top: 1px solid var(--line); }
.wr-grp:first-child { border-top: 0; }
.wr-grp__h { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-4); overflow-wrap: normal;   /* body 의 overflow-wrap: anywhere 를 끊음: 좁은 폭에서 '본문' 이 '본/문' 으로 세로로 쪼개졌음 */ font-size: var(--fs-xs); font-weight: var(--fw-heavy); letter-spacing: .06em; color: var(--muted); }
.wr-grp__h::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.wr-grp__h em { font-style: normal; font-weight: var(--fw-medium); letter-spacing: 0; opacity: .85; }
.wr-lab { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--sp-2); padding: 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); }
.wr-lab small { font-weight: var(--fw-medium); color: var(--muted); }
.wr-lab svg { color: var(--muted); }
.wr-hint { margin: 6px 0 0; font-size: var(--fs-xs); line-height: 1.6; color: var(--muted); }
.wr-hint.is-error { color: var(--danger, #f87171); }
.wr-inp { width: 100%; height: 44px; padding: 0 var(--sp-4); font: inherit; color: var(--text); background: rgba(0,0,0,.22); border: 1px solid var(--line-strong); border-radius: 10px; transition: border-color .15s, box-shadow .15s; }
.wr-inp:focus, .wr-ta:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* 선택 상자 (연결할 보스): 다크 화면에서 펼친 목록이 흰 바탕 · 흰 글씨가 되지 않게 + 사이트 .select 와 같은 화살표 */
select.wr-inp { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer; background: rgba(0,0,0,.22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23979BA6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; color-scheme: dark; }
select.wr-inp option { color: var(--text); background: var(--surface-solid); }
.wr-inp--title { height: 52px; margin-top: var(--sp-4); font-size: var(--fs-xl, 19px); font-weight: var(--fw-heavy); }
.wr-inp--title::placeholder { font-weight: var(--fw-medium); }
.wr-ta { width: 100%; padding: 10px var(--sp-4); font: inherit; line-height: 1.7; font-variant-numeric: tabular-nums; color: var(--text); background: rgba(0,0,0,.22); border: 1px solid var(--line-strong); border-radius: 10px; resize: vertical; }

/* 게시판: 한 줄 알약 (아이콘 + 이름) */
.wr-boards { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.wr-boardsel, .wr-boards-dim { display: none; } /* 폰(640px 이하)에서만 씀 */
.wr-boards label { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 var(--sp-4); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-sub); border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.wr-boards label:hover { color: var(--text-strong); border-color: rgba(255,255,255,.26); }
.wr-boards input { position: absolute; opacity: 0; pointer-events: none; }
.wr-boards label:has(input:checked) { color: #fff; background: var(--accent); border-color: var(--accent); }
.wr-boards label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 넣기 줄: 에디터 바로 아래 한 덩어리 (그림 · 영상 · 음악 · 링크 → 넣기 창 js/image-picker.js, 시안 docs/board-unify-sian) */
.wr-ins { display: flex; align-items: center; gap: var(--sp-2); margin-top: -1px; padding: var(--sp-2) var(--sp-3); background: #1b1c20; border: 1px solid var(--line-strong); border-top-color: var(--line); border-radius: 0 0 8px 8px; }
.editor--tiny .tox-tinymce { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.wr-ins__h { margin-right: var(--sp-1); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--muted); white-space: nowrap; }
.wr-ins button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 var(--sp-4); font: inherit; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text-strong); background: rgba(255,255,255,.06); border: 1px solid var(--line-strong); border-radius: 10px; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.wr-ins button svg { color: var(--accent); }
.wr-ins button:hover { background: var(--accent-soft); border-color: var(--accent-line); }
.wr-ins button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wr-ins__tip { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); text-align: right; }
@media (max-width: 1100px) { .wr-ins__tip { display: none; } }
@media (max-width: 768px) {
  .wr-ins { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; padding: var(--sp-2); }
  .wr-ins__h { display: none; }
  .wr-ins button { gap: 5px; padding: 0 var(--sp-1); font-size: var(--fs-sm); }
  #w-body-label em { display: none; } /* 묶음 제목 옆 안내가 두 줄로 늘어짐 → 폰은 '본문'만 */
}

/* 음악 (게시판 '음악'): 곡 올리기 칸 */
.wr-req { font-style: normal; color: var(--danger, #f87171); }
.wr-mu__yt { display: flex; gap: var(--sp-2); }
.wr-mu__yt .wr-inp { flex: 1; min-width: 0; }
.wr-mu__yt .btn { flex-shrink: 0; min-height: 44px; gap: 6px; white-space: nowrap; }
.wr-mu__pv { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); padding: var(--sp-2); background: rgba(255,255,255,.04); border-radius: var(--radius); font-size: var(--fs-sm); color: var(--text-sub); }
.wr-mu__pv[hidden] { display: none; }
.wr-mu__pv img { width: 112px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.wr-mu__cats { margin: var(--sp-5) 0 var(--sp-4); padding: 0; border: 0; }
.wr-mu__opts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.wr-mu__opts label { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 var(--sp-4); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-sub); border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; }
.wr-mu__opts label::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--accent)); }
.wr-mu__opts input { position: absolute; opacity: 0; pointer-events: none; }
.wr-mu__opts label:has(input:checked) { color: #fff; border-color: var(--c, var(--accent)); background: color-mix(in srgb, var(--c, var(--accent)) 24%, transparent); }
.wr-mu__opts label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.wr-mu__c { margin-top: var(--sp-4); }
@media (max-width: 640px) { .wr-mu__yt { flex-direction: column; } }

/* 오른쪽 안내: 한 상자 안 아코디언 (처음엔 첫 칸만 열림, 하나 열면 나머지 닫힘 — PC · 폰 같음). 칸 사이는 얇은 선 */
.wr-all { background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.wr-all__b .wr-card { padding: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.wr-all__b > .wr-card:first-child { border-top: 0; } /* 첫 칸은 숨는 일이 없음 */
.wr-acc > summary.wr-card__h { min-height: 52px; margin: 0; padding: 0 var(--sp-4); white-space: nowrap; }
.wr-acc > summary.wr-card__h:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 0; }
@media (hover: hover) { .wr-acc > summary.wr-card__h:hover { background: var(--surface); } }
.wr-acc:not([open]) > summary.wr-card__h { font-weight: var(--fw-bold); color: var(--text-sub); }
.wr-acc > summary .chip { margin-left: 0; }
.wr-acc__chv { margin-left: auto; flex-shrink: 0; color: var(--muted) !important; transition: transform .2s; }
.wr-acc[open] .wr-acc__chv { transform: rotate(180deg); }
.wr-acc > :not(summary) { margin-left: var(--sp-4); margin-right: var(--sp-4); }
.wr-acc[open] { padding-bottom: var(--sp-4); } /* 칸 맨 끝 목록이 숨어 있어도(게시판별 안내) 아래 여백이 남게 */
.wr-acc[hidden] { display: none; }

/* 영상 정보: 노란 테두리 묶음 (영상이 있을 때만) */
.wr-video { margin: 0 var(--sp-6) var(--sp-6); padding: var(--sp-5); background: rgba(var(--hud-yellow-rgb), .04); border: 1px solid rgba(var(--hud-yellow-rgb), .28); border-radius: 14px; }
.wr-video[hidden] { display: none; }
.wr-video .wr-grp__h { color: var(--hud-yellow); }
.wr-video .wr-grp__h::after { background: rgba(var(--hud-yellow-rgb), .2); }
.wr-vtype { margin: 0 0 var(--sp-4); padding: 0; border: 0; min-width: 0; }
.wr-vtype[hidden] { display: none; }
.wr-kind { margin-top: var(--sp-4); } /* 갤러리 · 영상 카테고리 (게시판 고르기 바로 아래) */
.wr-vtype__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.wr-vtype__opts label { display: flex; gap: 10px; align-items: flex-start; padding: 10px var(--sp-3); background: rgba(0,0,0,.2); border: 1px solid var(--line-strong); border-radius: 10px; cursor: pointer; }
.wr-vtype__opts input { margin-top: 3px; accent-color: var(--primary); }
.wr-vtype__opts label:has(input:checked) { border-color: var(--primary); background: rgba(var(--focus-rgb), .12); }
.wr-vtype__opts b { display: block; font-size: var(--fs-sm); color: var(--text-strong); }
.wr-vtype__opts small { font-size: var(--fs-xs); line-height: 1.5; color: var(--muted); }
.wr-chapters__cnt { margin-left: auto; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--hud-yellow); }

/* 분류 · 연결: 해시태그 칩 · 보스 · 공지 고정 */
.wr-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.wr-tagbox { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; padding: 6px 10px; background: rgba(0,0,0,.22); border: 1px solid var(--line-strong); border-radius: 10px; cursor: text; }
.wr-tagbox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.wr-tagbox input { flex: 1; min-width: 120px; height: 30px; font: inherit; font-size: var(--fs-sm); color: var(--text); background: transparent; border: 0; }
.wr-tagbox input:focus { outline: none; }
.wr-tag { display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 4px 0 10px; font-size: var(--fs-sm); color: var(--accent); background: var(--accent-soft); border-radius: 999px; }
.wr-tag button { width: 20px; height: 20px; display: grid; place-items: center; padding: 0; font-size: 10px; color: var(--muted); background: transparent; border: 0; border-radius: 50%; cursor: pointer; }
.wr-tag button:hover { color: var(--text-strong); background: var(--hover); }
.wr-pin { margin: var(--sp-5) 0 0; padding: 0; border: 0; min-width: 0; }
.wr-pin__opts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.wr-pin__opts label { display: inline-flex; align-items: center; justify-content: center; height: 36px; white-space: nowrap; padding: 0 var(--sp-4); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-sub); border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; }
.wr-pin__opts input { position: absolute; opacity: 0; pointer-events: none; }
.wr-pin__opts label:has(input:checked) { color: var(--text-strong); background: var(--accent-soft); border-color: var(--accent-line); }

/* 등록 줄: 카드 아래에 붙어 따라옴 */
.wr-bar { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-6); background: rgba(24,25,29,.94); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-lg) var(--radius-lg); backdrop-filter: blur(8px); }
.wr-bar__st { margin-right: auto; font-size: var(--fs-xs); color: var(--muted); }
.wr-bar__go { min-width: 110px; }

/* 오른쪽 가이드 */
.wr-guide { position: sticky; top: calc(var(--header-h, 72px) + 16px); display: flex; flex-direction: column; gap: var(--sp-3); }
details.wr-card .wr-card__h { margin: 0; cursor: pointer; list-style: none; }
details.wr-card .wr-card__h::-webkit-details-marker { display: none; }
details.wr-card[open] .wr-card__h { margin-bottom: var(--sp-3); }
/* 미리보기 창 (board-editor.js): 서버가 글 보기와 같게 그린 board/preview.html 을 iframe 으로. PC 는 가운데 큰 창, 폰은 화면 전체 */
.wr-pv { position: fixed; inset: 0; z-index: var(--dnd-z, 1000); display: grid; place-items: center; padding: var(--sp-6); background: rgba(var(--scrim-rgb), .72); }
.wr-pv[hidden] { display: none; }
.wr-pv__panel { display: flex; flex-direction: column; width: min(100%, 980px); height: 100%; overflow: hidden; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); }
.wr-pv__bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-5); background: var(--surface-solid); border-bottom: 1px solid var(--line); }
.wr-pv__bar b { font-size: var(--fs-md); font-weight: var(--fw-heavy); color: var(--text-strong); }
.wr-pv__bar span { font-size: var(--fs-xs); color: var(--muted); }
.wr-pv__bar .btn { margin-left: auto; } /* 닫기는 늘 오른쪽 끝 (폰은 안내 글을 숨김) */
.wr-pv iframe { flex: 1; width: 100%; border: 0; background: var(--bg); }
html.wr-pv-open { overflow: hidden; } /* 창이 떠 있는 동안 뒤 글쓰기 화면은 안 움직이게 */
.wr-pv-page .site-main { padding-block: var(--sp-6); } /* 미리보기 페이지 안: 머리글이 없으니 위아래 여백만 */
.wr-card { padding: var(--sp-5); background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.wr-card__h { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3); font-size: var(--fs-md); font-weight: var(--fw-heavy); color: var(--text-strong); }
.wr-card__h svg { color: var(--accent); }
.wr-card__h .chip { margin-left: auto; font-size: var(--fs-2xs); }
.wr-tips { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.wr-tips[hidden] { display: none; }
.wr-tips li { display: flex; gap: 10px; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-sub); }
.wr-tips li i { flex: none; width: 26px; height: 26px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); border-radius: 8px; }
.wr-tips b { color: var(--text-strong); }
/* 갤러리 글쓰기: 출처 남기는 법 (예시를 누르면 복사) */
.wr-src[hidden] { display: none; }
.wr-src__lead { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); line-height: 1.6; color: var(--text-sub); }
.wr-src__lead b { color: var(--text-strong); }
.wr-src__lab { margin: var(--sp-3) 0 var(--sp-1); font-size: var(--fs-xs); color: var(--muted); }
.wr-src__ex { display: block; width: 100%; min-height: 44px; padding: var(--sp-2) var(--sp-3); font: inherit; font-family: ui-monospace, Consolas, monospace; font-size: var(--fs-xs); line-height: 1.6; text-align: left; color: var(--text); overflow-wrap: anywhere; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius); cursor: copy; }
.wr-src__ex:hover { border-color: var(--accent); }
.wr-src__note { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); line-height: 1.6; color: var(--muted); }

@media (max-width: 1024px) {
  .wr { grid-template-columns: minmax(0, 1fr); }
  .wr-guide { position: static; }
}
@media (max-width: 640px) {
  /* 폰 글쓰기 (시안 docs/write-m-sian A): 제목 줄 · 묶음 머리를 빼고 게시판은 칩 한 줄(가로 밀기) → 제목 → 본문이 화면 폭 가득 */
  .wr-title, #g-basic, #w-body-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .site-main:has(> .wr) { padding-top: 0; } /* 숨긴 제목 위 여백(24)이 보라 띠로 남았음 */
  .wr-sheet { margin-inline: calc(var(--gutter) * -1); border-width: 1px 0; border-radius: 0; }
  .wr-grp { padding: var(--sp-3) var(--sp-4); }
  .wr-grp[aria-labelledby="w-body-label"] { padding: 0; }
  .wr-grp[aria-labelledby="w-body-label"] .wr-hint { padding: 0 var(--sp-4) var(--sp-3); }
  /* 게시판: 한 줄 선택 버튼 → 누르면 아래에서 목록이 올라옴 (시안 docs/write-m2-sian/cat.html 2번). 라디오는 그대로라 좌우 밀기·두 줄이 없음 */
  .wr-boardsel { display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: 52px; padding: 0 var(--sp-4); font: inherit; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-strong); text-align: left; background: rgba(0,0,0,.22); border: 1px solid var(--line-strong); border-radius: 10px; cursor: pointer; }
  .wr-boardsel small { margin-left: auto; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--muted); }
  .wr-boardsel svg { flex: none; color: var(--muted); }
  .wr-boards { position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--dnd-z, 1000) + 1); flex-direction: column; flex-wrap: nowrap; gap: 0; max-height: 80dvh; overflow-y: auto; padding: var(--sp-5) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px)); background: var(--surface-solid); border-top: 1px solid var(--line-strong); border-radius: 18px 18px 0 0; transform: translateY(105%); visibility: hidden; transition: transform .2s, visibility 0s .2s; }
  .wr-boards::before { content: '어디에 올릴까요?'; display: block; margin-bottom: var(--sp-2); font-size: var(--fs-xl); font-weight: var(--fw-heavy); color: var(--text-strong); }
  .wr-boards.is-open { transform: none; visibility: visible; transition: transform .2s; }
  .wr-boards label { flex: none; height: 52px; padding: 0 var(--sp-1); font-size: var(--fs-lg); font-weight: var(--fw-medium); color: var(--text); background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  .wr-boards label:has(input:checked) { color: var(--accent); background: none; border-color: var(--line); font-weight: var(--fw-bold); }
  .wr-boards label:has(input:checked)::after { content: '✓'; margin-left: auto; }
  .wr-boards-dim { display: block; position: fixed; inset: 0; z-index: var(--dnd-z, 1000); background: rgba(var(--scrim-rgb), .6); }
  .wr-boards-dim[hidden] { display: none; }
  html.wr-boards-open { overflow: hidden; }
  @media (prefers-reduced-motion: reduce) { .wr-boards, .wr-boards.is-open { transition: none; } }
  /* 제목: 상자 없이 본문 바로 위 한 줄로 (제목 상자와 에디터가 따로 떨어져 보였음). 아래 구분선은 본문 묶음의 위 선 하나 */
  .wr-grp[aria-labelledby="g-basic"]:has(+ .wr-grp[aria-labelledby="w-body-label"]:not([hidden])) { padding-bottom: 0; } /* 본문 묶음이 바로 아래 있을 때만 (음악은 본문이 숨어 제목 아래 여백 유지) */
  .wr-inp--title { height: 56px; margin-top: var(--sp-2); padding: 0; font-size: var(--fs-2xl); background: transparent; border: 0; border-radius: 0; }
  .wr-inp--title:focus { box-shadow: inset 0 -2px 0 rgba(var(--focus-rgb), 1); } /* 상자가 없으니 포커스는 밑줄로 */
  .wr-grp .editor--tiny .tox-tinymce { border-inline: 0; border-top: 0; border-radius: 0; } /* 위 선은 본문 묶음 선 하나만 (겹쳐 굵게 보였음) */
  /* 에디터 도구줄이 화면 오른쪽으로 튀어나가던 것: 에디터 · 도구줄이 칸 폭을 넘지 못하게 (폰은 도구줄이 두 줄로 꺾임: board-editor.js toolbar_mode wrap) */
  .wr-main, .wr-sheet, .wr-grp, .editor--tiny { min-width: 0; max-width: 100%; }
  .wr-sheet { max-width: none; } /* 판은 양옆 -gutter 로 화면 폭 가득 늘어야 함: max-width 100% 에 막혀 왼쪽으로만 당겨지고 오른쪽에 16px 빈 띠가 생겼음 */
  .editor--tiny .tox-tinymce { width: 100% !important; max-width: 100%; }
  .editor--tiny .tox .tox-toolbar--scrolling { flex-wrap: wrap !important; overflow: visible !important; } /* 폰(터치)에서 TinyMCE 가 도구줄을 옆으로 밀게(scrolling) 바꿔 버려 toolbar_mode wrap 이 무시됐음 → 두 줄로 꺾음 */
  .wr-ins { border-inline: 0; border-radius: 0; }
  .wr-video { margin: 0 var(--sp-4) var(--sp-5); padding: var(--sp-4); }
  .wr-bar { padding: var(--sp-3) var(--sp-4); }
  .wr-bar__st { display: none; }
  .wr-bar .btn { flex: 1 1 0; min-width: 0; padding-inline: var(--sp-2); } /* 네 버튼이 폭을 똑같이 나눔 (등록 110px 고정 + 버튼 안쪽 여백 때문에 화면 밖으로 밀려 좌우 스크롤이 생겼음) */
  .wr-bar__go { min-width: 0; }
  .wr-two { grid-template-columns: minmax(0, 1fr); }
  /* 갤러리 · 영상 카테고리: 두 칸 한 줄로 작게 (한 칸씩 큰 상자로 쌓여 제목과 멀리 떨어져 보였음) */
  .wr-kind { margin: var(--sp-3) 0 0; }
  .wr-kind .wr-lab { margin-bottom: var(--sp-2); }
  .wr-vtype__opts label { min-height: 44px; align-items: center; padding: var(--sp-2) var(--sp-3); }
  .wr-vtype__opts input { margin-top: 0; }
  .wr-vtype__opts small { display: none; } /* 설명은 PC 에서만 */
  .wr-pin__opts { flex-wrap: nowrap; }
  .wr-pin__opts label { flex: 1 1 0; min-width: 0; padding-inline: var(--sp-2); } /* 공지 고정 세 칸을 한 줄에 같은 폭으로 */
  .wr-pv { padding: 0; }
  .wr-pv__panel { width: 100%; border: 0; border-radius: 0; }
  .wr-pv__bar span { display: none; }
  /* 작성 안내: 위 글쓰기 칸들처럼 화면 폭 가득 (안쪽 아코디언은 PC 와 같음) */
  .wr-guide { margin-inline: calc(var(--gutter) * -1); gap: 0; }
  .wr-all { border-width: 1px 0; border-radius: 0; }
}
/* 채팅 버튼(chat.js .dc-fab)이 아래에 붙는 등록 줄(.wr-bar)을 가리지 않게: 등록 줄이 화면 폭을 다 쓰는 폭(1024 이하)에서는 줄 높이만큼 위로
   --wr-bar-h 는 board-editor.js 가 등록 줄 실제 높이로 넣음 (폰에서 버튼 줄 높이가 달라도 맞게) */
@media (max-width: 1024px) {
  body:has(.wr-bar) .dc-fab { bottom: calc(var(--wr-bar-h, 72px) + var(--sp-3) + env(safe-area-inset-bottom, 0px)); }
}

/* 게시판은 글을 오래 읽는 곳이라, 배경 그림이 은은하게만 비치도록 카드를 진하게 */
.card {
  background: linear-gradient(160deg, rgba(24,24,30,0.78), rgba(var(--bg-rgb),0.72));
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}

/* ---------- DB 게시판 ---------- */
.form-alert { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-md); color: var(--text-strong); background: rgba(154,61,110,0.18); border: 1px solid rgba(217,147,184,0.4); border-radius: var(--radius-sm); }
.board-empty { padding: var(--sp-8) var(--sp-6); text-align: center; color: var(--muted); }
.post__tools form { display: contents; }
.btn.is-on, .btn-icon.is-on { color: #fff; border-color: var(--accent-line); background: rgba(139,92,246,0.22); }
.comments__login { padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--line); }
.comment__actions { display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--sp-3); }
.comment__actions form { display: contents; }
.comment__text { white-space: pre-line; overflow-wrap: anywhere; }

/* 본문 (글쓰기 에디터로 쓴 HTML: TinyMCE, 예전 글은 Quill) */
.post__content { gap: var(--sp-4); overflow-wrap: anywhere; }
.post__content > * { margin: 0; }
.post__content h2 { font-size: var(--fs-3xl); font-weight: var(--fw-heavy); color: var(--text-strong); margin-top: var(--sp-3); }
.post__content h3 { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text-strong); margin-top: var(--sp-2); }
.post__content img { display: block; max-width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); }
/* 영상 구간 바로가기 (시안 docs/video-sian/chapters-simple.html P2 칩 흐름): 상자 없이 제목 한 줄 + '시각 이름' 알약이 이어짐 (줄 바꿈 자동)
   공략 영상 화면 · 게시판 글 공용 (post.js 가 게시판 글에서는 본문 첫 영상 밑으로 옮김), 제목을 누르면 접힘 */
.post-chapters { margin: var(--sp-2) 0 var(--sp-5); }
.post-chapters__head { display: inline-flex; align-items: baseline; gap: var(--sp-2); padding: 2px 0; font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); text-align: left; background: transparent; border: 0; cursor: pointer; }
.post-chapters__head small { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--muted); }
.post-chapters__head svg { align-self: center; color: var(--muted); transition: transform .2s ease; }
.post-chapters__list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-2); }
.post-chapters__item { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; font: inherit; font-size: var(--fs-sm); line-height: 1.4; color: var(--text-sub); text-align: left; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.post-chapters__item b { font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; color: var(--muted); }
.post-chapters__item:hover { color: var(--text-strong); border-color: var(--line-strong); }
.post-chapters__item.is-on { color: #fff; background: var(--accent); border-color: var(--accent); }
.post-chapters__item.is-on b { color: rgba(255,255,255,.8); }
.post-chapters__item.is-over { display: none; } /* 3줄 넘는 구간 (post.js 가 [더 보기] 로 펼침) */
.post-chapters__more { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 36px; margin-top: var(--sp-1); padding: 0 var(--sp-1); font: inherit; font-size: var(--fs-sm); color: var(--muted); background: transparent; border: 0; cursor: pointer; }
.post-chapters__more:hover { color: var(--text-strong); }
.post-chapters__more[hidden], .post-chapters.is-closed .post-chapters__more { display: none; }
.post-chapters.is-closed .post-chapters__list { display: none; }
.post-chapters.is-closed .post-chapters__head svg { transform: rotate(-90deg); }
/* 영상: 폭만 화면에 맞추고 높이는 늘 16:9. 에디터에서 크기를 바꾸면 style 에 height(예: 360px)가 저장돼, 폰에서 폭만 줄고 높이는 그대로라 세로로 길쭉해지던 것을 !important 로 막음 */
.post__content iframe.ql-video, .post__content .yt-facade { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto !important; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: #000; }
/* 영상 파일 주소(NAS mp4 같은 것)로 넣은 영상: 영상 비율대로 (검은 여백 없이). 에디터가 적은 크기는 서버가 style(폭 · 비율)로 넣음 (PostContentCleaner)
   크기가 안 적힌 예전 글은 본문 폭, 영상을 불러오기 전에만 16:9 */
.post__content video.post-video { display: block; width: 100%; max-width: 100%; aspect-ratio: auto 16 / 9; height: auto; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: #000; }
/* 영상이 재생되는 동안: 유리 흐림(backdrop-filter)을 끔. 흐림 위·안에서 영상이 돌면 폰이 프레임마다 흐림을 다시 그려 영상이 끊김.
   카드 바탕은 거의 불투명(.92)이라 흐림을 꺼도 겉모습은 그대로, 헤더는 조금 더 진하게 */
body:has(.post__content iframe) .card { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface-solid); }
body:has(.post__content iframe) .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(var(--bg-rgb), .94); }
/* 유튜브 썸네일 (누르면 플레이어로, dnd2.js [data-yt-embed]): 플레이어와 같은 자리·크기 */
.post__content .yt-facade { position: relative; overflow: hidden; cursor: pointer; background: var(--art-bg-deep); }
.yt-facade__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-facade__play { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); border-radius: 14px; background: rgba(var(--scrim-rgb), .72); transition: background .2s ease; }
.yt-facade__play::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%); border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent var(--text-strong); }
.post__content .yt-facade:hover .yt-facade__play, .post__content .yt-facade:focus-visible .yt-facade__play { background: var(--primary); }
.post__content .yt-facade:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--focus-rgb), .5); }
.post__content blockquote { padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--primary); background: rgba(139,92,246,0.08); border-radius: 0 8px 8px 0; color: var(--text-sub); }
.post__content ul, .post__content ol { padding-left: 1.4em; }
.post__content li { margin: 2px 0; }
.post__content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.post__content .ql-align-center { text-align: center; }
.post__content .ql-align-right { text-align: right; }
.post__content .ql-align-justify { text-align: justify; }
.post__content img.ql-align-center, .post__content .ql-align-center img { margin-inline: auto; }
/* 글쓰기 에디터 (TinyMCE, board-editor.js): 에디터 안 글 모양은 board-editor.js 의 CONTENT_STYLE */
.editor--tiny { border: 0; background: none; overflow: visible; } /* 툴바가 화면 위에 붙어 따라오려면 잘리면 안 됨 */
.editor--tiny .tox-tinymce { border-color: var(--line-strong); border-radius: 8px; }
.editor--tiny .tox-tinymce:focus-within { border-color: var(--accent); }
/* TinyMCE 어두운 테마(oxide-dark)의 푸른빛을 사이트 중립 회색·보라로 (툴바·펼침 메뉴·창) */
.tox .tox-editor-header, .tox .tox-toolbar-overlord, .tox .tox-toolbar, .tox .tox-toolbar__primary, .tox .tox-toolbar__overflow { background: #222327 !important; }
.tox .tox-editor-header { border-bottom: 1px solid var(--line) !important; box-shadow: none !important; }
.tox .tox-tbtn, .tox .tox-split-button__chevron { color: var(--text-sub) !important; background: transparent !important; }
.tox .tox-tbtn svg { fill: var(--text-sub) !important; }
.tox .tox-tbtn:hover { background: var(--surface-2) !important; }
.tox .tox-tbtn--enabled, .tox .tox-tbtn--enabled:hover { background: rgba(139,92,246,0.35) !important; }
.tox .tox-tbtn--enabled svg { fill: #fff !important; }
.tox .tox-tbtn--select, .tox .tox-split-button { background: transparent !important; }
.tox .tox-tbtn--bespoke .tox-tbtn__select-label { width: 4.6em !important; } /* 글자 크기 칸: "작은 제목" 이 들어가는 만큼만 */
.tox .tox-toolbar__group { padding: 0 3px !important; } /* 묶음 사이 여백을 줄여 한 줄에 다 들어가게 */
.tox .tox-menu, .tox .tox-collection--list, .tox .tox-dialog, .tox .tox-dialog__header, .tox .tox-dialog__footer, .tox .tox-swatches-menu, .tox .tox-pop__dialog { background: #222327 !important; border-color: var(--line-strong) !important; }
.tox .tox-collection__item--active { background: var(--surface-2) !important; }
.tox .tox-button:not(.tox-button--secondary):not(.tox-button--naked) { background: var(--primary) !important; border-color: var(--primary) !important; }
.tox .tox-textfield, .tox .tox-listboxfield .tox-listbox--select { background: #17181B !important; border-color: var(--line-strong) !important; }
.editor-status { margin-top: var(--sp-2); }
.editor-status.is-error { color: var(--pink); }
.board-sort { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.board-sort .pill { text-decoration: none; }

/* ---------- 댓글 정리 ----------
   답글은 단계(depth)마다 --indent 만큼 더 안쪽 (comment--d1 ~ d4, PostService 가 계산), 화살표는 픽셀 아이콘(Pixelarticons, MIT)
   '답글'·'삭제' 는 같은 작은 글씨 버튼으로 한 줄에, 답글 입력창은 그 줄 아래에 열림 */
.comment { position: relative; --indent: 44px; --base: var(--sp-6); --lv: 0; }
.comment--d1 { --lv: 1; } .comment--d2 { --lv: 2; } .comment--d3 { --lv: 3; } .comment--d4 { --lv: 4; }
.comment--reply { padding-left: calc(var(--base) + var(--indent) * var(--lv)); }
.comment__reply-icon {
  position: absolute; left: calc(var(--base) + var(--indent) * var(--lv) - 30px); top: calc(var(--sp-5) + 8px); width: 18px; height: 18px;
  background: var(--accent);
  -webkit-mask: url(/img/icons-svg/lucide/corner-down-right.svg) center / contain no-repeat;
  mask: url(/img/icons-svg/lucide/corner-down-right.svg) center / contain no-repeat;
}
.comment__actions { align-items: center; gap: var(--sp-1); margin-left: calc(var(--sp-3) * -1); }
.comment__actions button {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--sp-3);
  font-size: var(--fs-sm); line-height: var(--lh-none); color: var(--muted); background: transparent; border: 0; border-radius: 6px; cursor: pointer;
}
.comment__actions button:hover { color: var(--text-strong); background: var(--hover); }
@media (max-width: 768px) {
  .comment { --indent: 28px; --base: var(--sp-5); }
  .comment__reply-icon { display: block; width: 14px; height: 14px; left: calc(var(--base) + var(--indent) * var(--lv) - 22px); }
}
.comment__to { margin-right: 6px; font-weight: var(--fw-bold); color: var(--accent); } /* 답글 대상 @닉네임 */

/* ============ 게시판 목록 모양 (관리자 > 사이트 설정 > 게시판에서 게시판마다 고름) ============
   공통: 박스 대신 얇은 구분선 · 제목만 진하게 · 나머지는 작은 회색 */
.bl { min-width: 0; }
.bl a { color: inherit; text-decoration: none; }
.bl-t { color: var(--text-strong); font-weight: var(--fw-semibold); }
.bl-c { margin-left: 6px; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--accent); }
.bl-cat { color: var(--muted); font-size: var(--fs-sm); }
.bl-line2 { display: flex; flex-wrap: wrap; gap: 0 8px; margin-top: 3px; font-size: var(--fs-xs); color: var(--muted); }
.bl-line2 i { font-style: normal; opacity: .5; }
.bl-line2 .bl-cat { color: var(--text-sub); font-size: var(--fs-xs); }
.bl-thumb { flex-shrink: 0; object-fit: cover; border-radius: 6px; background: var(--surface-solid); }
.bl-ico { display: inline-block; width: 14px; height: 14px; margin-left: 6px; vertical-align: -2px; background: var(--muted); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.bl-ico--img { -webkit-mask-image: url(/img/icons-svg/lucide/image.svg); mask-image: url(/img/icons-svg/lucide/image.svg); }
.bl-ico--vid { -webkit-mask-image: url(/img/icons-svg/lucide/square-play.svg); mask-image: url(/img/icons-svg/lucide/square-play.svg); }

/* C: 표 */
.bl-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.bl-table th { padding: 10px 8px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--muted); text-align: left; border-bottom: 1px solid var(--line-strong); }
.bl-table td { padding: 12px 8px; font-size: var(--fs-md); color: var(--text-sub); border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bl-table tbody tr:hover td { background: var(--hover); }
.bl-table .bl-no { width: 64px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bl-table .bl-user { width: 130px; }
.bl-table .bl-time { width: 96px; color: var(--muted); }
.bl-table .bl-num { width: 64px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.bl-table .bl-title a { display: block; overflow: hidden; text-overflow: ellipsis; }
.bl-table .bl-cat { margin-right: 8px; }
.bl-table .bl-t { font-weight: var(--fw-medium); }
.bl-table tr.bl-notice td { background: rgba(139,92,246,.07); }
.bl-table tr.bl-notice .bl-no { color: var(--accent); font-weight: var(--fw-bold); }
.bl-table tr.bl-notice .bl-t { color: var(--accent); }

/* A: 두 줄 목록 */
.bl-rows { border-top: 1px solid var(--line); }
.bl-row { display: flex; align-items: center; gap: 16px; padding: 12px 10px; border-bottom: 1px solid var(--line); }
.bl-row:hover { background: var(--hover); }
.bl-main { flex: 1; min-width: 0; }
.bl-line1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-base); }
.bl-row .bl-thumb { width: 64px; height: 44px; }
.bl-pin { margin-right: 8px; padding: 2px 7px; border-radius: 4px; font-size: var(--fs-2xs); font-weight: var(--fw-heavy); color: var(--accent); background: rgba(139,92,246,.2); }
.bl-row.bl-notice .bl-t { color: var(--accent); }

/* B: 카드 목록 */
.bl-cards { display: flex; flex-direction: column; gap: 8px; }
.bl-card { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; background: var(--hover); }
.bl-card:hover { background: var(--hover); }
.bl-vote { width: 44px; flex-shrink: 0; text-align: center; }
.bl-vote b { display: block; font-size: var(--fs-xl); color: var(--text-strong); }
.bl-vote small { font-size: var(--fs-2xs); color: var(--muted); }
.bl-body { flex: 1; min-width: 0; }
.bl-card .bl-cat { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--accent); }
.bl-card .bl-t { display: block; margin: 2px 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.bl-prev { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bl-card .bl-thumb { width: 104px; height: 64px; border-radius: 8px; }
.bl-card.bl-notice .bl-t { color: var(--accent); }

@media (max-width: 768px) {
  .bl-table .bl-no, .bl-table .bl-num { display: none; }
  .bl-table .bl-user { width: 90px; } .bl-table .bl-time { width: 64px; }
  .bl-card .bl-thumb { width: 72px; height: 52px; }
  .bl-vote { display: none; }
}

.comments__list { padding-bottom: var(--sp-3); }
.comments__list:not(:has(.comment, .board-empty)) { padding: 0; } /* 댓글이 없으면 빈 칸 없이 바로 댓글창 */

/* ---------- 가독성: 게시판 화면의 박스는 불투명 (뒤 배경이 비치면 글씨가 묻힘) ---------- */
.site-main .card { background: rgba(27,28,31,0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* 살짝 비치게 (뒤 그림은 흐리게 해서 글씨는 또렷하게) */
.bl--a, .bl--b { padding: var(--sp-3) var(--sp-4); }
.bl--a .bl-rows { border-top: 0; }
.bl--b .bl-card { background: var(--hover); }

/* ---------- 댓글 / 답글 구분 ----------
   답글: 한 단계 밝은 바탕 + 왼쪽 보라 세로줄, 화살표 아이콘은 SVG 를 바로 넣음 (mask 가 안 먹는 환경 대비) */
.comments .comment--reply { background: var(--reply-bg); box-shadow: inset 3px 0 0 var(--accent-line); }
.comments .comment--d2, .comments .comment--d3, .comments .comment--d4 { background: var(--reply-bg-2); }
.comment__reply-icon { color: var(--accent); background: none; -webkit-mask: none; mask: none; }
.comment__actions button[aria-expanded="true"] { color: var(--accent); }
.comment__reply-form, .comment__edit-form { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); padding: var(--sp-3); background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.comment__reply-form[hidden], .comment__edit-form[hidden] { display: none; }
.comment__reply-form .textarea, .comment__edit-form .textarea { min-height: 80px; }
.comment__reply-foot { display: flex; justify-content: flex-end; gap: var(--sp-2); }



/* ---------- 글 보기: 이미지·영상 크기와 정렬 ----------
   TinyMCE 글: 문단 정렬(text-align)을 따르게 줄 안에 두고, 끌어서 정한 크기(width)는 화면보다 크면 줄어듦
   가운데 두기(display:block + margin auto)·양옆 띄우기(float)는 style 로 옴
   예전 Quill 글: 영상이 문단 밖(블록)에 ql-vsize-*(크기)·ql-align-*(정렬) 클래스로 옴 */
.post__content p img { display: inline-block; vertical-align: top; }
.post__content img { max-width: 100%; height: auto !important; } /* 그림도 style 의 height 때문에 폰에서 찌그러지지 않게 (폭에 맞춰 비율 유지) */
/* 유튜브 미리보기 그림은 예외: 위 height:auto 때문에 4:3 썸네일(hqdefault, 위아래 검은 띠 포함)이 제 비율로 늘어나 16:9 칸 아래로 밀려 보였음 → 칸에 꽉 채우고 가운데 기준으로 자름 */
.post__content .yt-facade .yt-facade__img { height: 100% !important; max-width: none; object-fit: cover; object-position: center; border: 0; border-radius: 0; }
.post__content p iframe.ql-video, .post__content p .yt-facade.ql-video { display: inline-block; vertical-align: top; }
.post__content iframe.ql-video, .post__content .yt-facade.ql-video { max-width: 100%; margin: 0; }
.post__content > iframe.ql-video, .post__content > .yt-facade.ql-video { display: block; }
.post__content iframe.ql-video.ql-vsize-s, .post__content .yt-facade.ql-video.ql-vsize-s { max-width: 420px; }
.post__content iframe.ql-video.ql-vsize-m, .post__content .yt-facade.ql-video.ql-vsize-m { max-width: 640px; }
.post__content iframe.ql-video.ql-align-center, .post__content .yt-facade.ql-video.ql-align-center { margin-inline: auto; }
.post__content iframe.ql-video.ql-align-right, .post__content .yt-facade.ql-video.ql-align-right { margin-left: auto; margin-right: 0; }

/* ---------- 글 보기 보강: 더 보기 메뉴 · 연결된 게임 데이터 · 해시태그 · 스크랩 · 댓글 추천·정렬 ---------- */
.more-menu { position: relative; }
.more-menu > summary { list-style: none; cursor: pointer; }
.more-menu > summary::-webkit-details-marker { display: none; }
.more-menu[open] > summary { border-color: var(--accent-line); color: var(--text-strong); }
.more-menu__list { position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-pop); min-width: 180px; display: flex; flex-direction: column; padding: var(--sp-1); background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 16px 32px -12px rgba(0,0,0,.8); }
.more-menu__list a, .more-menu__list button { display: block; width: 100%; padding: 9px 12px; font-size: var(--fs-md); text-align: left; color: var(--text); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.more-menu__list a:hover, .more-menu__list button:hover { color: var(--text-strong); background: var(--hover); }
.more-menu__list .more-menu__danger { color: #F08AA6; }
.more-menu__list hr { margin: var(--sp-1) 0; border: 0; border-top: 1px solid var(--line); }
.post__extra { display: flex; flex-direction: column; gap: var(--sp-4); padding: 0 var(--sp-8) var(--sp-2); }
.post__extra .linked-data { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.post__extra .linked-data:hover { border-color: var(--accent-line); }
.post__extra .linked-data__img { width: 120px; aspect-ratio: 350 / 130; object-fit: cover; border-radius: 6px; image-rendering: pixelated; }
.post__extra .tag-list a { color: var(--accent); }
.post__extra .tag-list a:hover { background: rgba(196,181,253,0.18); }
@media (max-width: 640px) { .post__extra { padding: 0 var(--sp-5) var(--sp-2); } .post__extra .linked-data__img { width: 88px; } }
.comment__actions button.is-on { color: var(--accent); }
.comment__likes { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--sp-3); font-size: var(--fs-sm); color: var(--muted); }
.comments .card__head { flex-wrap: wrap; gap: var(--sp-3); }
.author-card__bio { margin: calc(var(--sp-1) * -1) 0 0; line-height: var(--lh-snug); word-break: keep-all; }

/* ============ 커뮤니티 목록 v2 (C:/홈페이지/UI/community-v2 시안) ============
   머리말(공통 HUD) → 탭 + 글쓰기 → 검색·정렬·기간 → 공지 → 목록 → 쪽 번호 / 오른쪽: 인기 글 · 다른 게시판
   (예전 그림 띠 배너 .cm-head/.cm-hero 는 공통 머리말 .page-head--hud 로 바꾸면서 없앰. 배경 그림은 다른 페이지처럼 .page-art 로) */
.cm { display: flex; flex-direction: column; gap: 22px; }
.cm :is(a, button, select, input):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cm .page-title { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 긴 이름(해시태그 등)은 말줄임 */

.cm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--aside-gap); align-items: start; } /* 오른쪽 인기 글 · 다른 게시판은 글쓰기 가이드와 같은 240px (목록을 넓게) */
.cm-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* 게시판 탭 + 글쓰기 */
.cm-tabrow { display: flex; gap: 10px; align-items: stretch; }
.cm-tabs { flex: 1; min-width: 0; display: flex; gap: 3px; padding: 3px; border: 1px solid var(--glass-border); border-radius: 12px; background: var(--glass-bg); overflow-x: auto; scrollbar-width: none; }
.cm-tabs::-webkit-scrollbar { display: none; }
.cm-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 10px; color: var(--muted); font-weight: var(--fw-heavy); font-size: var(--fs-sm); white-space: nowrap; transition: background-color .2s, color .2s; }
.cm-tab span { padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.07); font-size: var(--fs-2xs); font-weight: var(--fw-bold); }
.cm-tab:hover { color: var(--text-strong); background: var(--hover); }
.cm-tab[aria-current="page"] { background: var(--primary); color: #fff; box-shadow: 0 8px 20px -10px rgba(var(--focus-rgb),.9); }
.cm-tab[aria-current="page"] span { background: rgba(255,255,255,.22); }
.cm-write { flex-shrink: 0; min-height: 40px; padding: 0 18px; border-radius: 12px; font-size: var(--fs-sm); }

/* 검색 · 정렬 · 기간 (한 줄) */
.cm-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cm-search { flex: 1 1 320px; display: flex; align-items: stretch; height: 36px; overflow: hidden; border: 1px solid var(--glass-border); border-radius: 10px; background: var(--glass-bg); }
.cm-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--focus-rgb),.18); }
.cm-search :focus-visible { outline: 0 !important; }
.cm-search select, .cm-select select { appearance: none; color: var(--text); font: inherit; font-size: var(--fs-xs); cursor: pointer;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239A9EA8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center no-repeat; }
.cm-search select { width: 100px; padding: 0 28px 0 12px; border: 0; border-right: 1px solid var(--line); }
.cm-search input { flex: 1; min-width: 0; padding: 0 12px; border: 0; background: none; color: var(--text); font: inherit; font-size: var(--fs-sm); outline: none; }
.cm-search input::placeholder { color: var(--placeholder); }
.cm-search button { width: 40px; border: 0; background: var(--primary); color: #fff; cursor: pointer; }
.cm-search button:hover { background: var(--primary-hover); }
.cm-sort { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--glass-border); border-radius: 10px; background: var(--glass-bg); }
.cm-sort a { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 8px; color: var(--muted); font-weight: var(--fw-bold); font-size: var(--fs-xs); transition: background-color .2s, color .2s; }
.cm-sort a:hover { color: var(--text-strong); }
.cm-sort a[aria-current] { background: rgba(var(--focus-rgb),.28); color: #fff; }
.cm-selects { display: flex; gap: 8px; }
.cm-select select { height: 36px; padding: 0 34px 0 12px; border: 1px solid var(--glass-border); border-radius: 10px; background-color: var(--glass-bg); background-position: right 12px center; }
.cm-search option, .cm-select option { background: var(--surface-solid); }

/* 목록 (표) : 번호 | 제목 | 글쓴이 | 작성 | 조회 | 추천 */
.cm-list { min-width: 0; border: 1px solid var(--glass-border); border-radius: 16px; background: var(--glass-bg); overflow: hidden; }
.cm-list.bl--a, .cm-list.bl--b { padding: var(--sp-3) var(--sp-4); }
.cm-row { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 140px 64px 48px 44px; align-items: center; gap: 0 10px; min-height: 56px; padding: 0 var(--sp-5) 0 var(--sp-3); border-bottom: 1px solid rgba(255,255,255,.05); font-size: var(--fs-sm); transition: background-color .15s, box-shadow .2s; }
.cm-row:last-child { border-bottom: 0; }
.cm-row[hidden] { display: none; }
/* 마지막으로 본 뒤 올라온 글 (왼쪽 빠른 메뉴 '새 글' 숫자와 같은 기준, dnd2.js 가 .is-unseen 을 붙임). 표 · 두 줄 · 카드 모양 공통
   줄 전체를 칠하면 목록이 지저분해 보여서, 제목 앞 작은 보라 점 + 제목 진하게만 */
.cm-row.is-unseen .cm-t, .bl-row.is-unseen .bl-title, .bl-card.is-unseen .bl-title { color: var(--text-strong); font-weight: var(--fw-bold); }
.cm-row.is-unseen .cm-t::before, .bl-row.is-unseen .bl-title::before, .bl-card.is-unseen .bl-title::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 7px 0 0; vertical-align: .2em; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px rgba(139,92,246,.18); }
.cm-row:not(.cm-row--head):hover { background: rgba(var(--focus-rgb),.07); box-shadow: inset 3px 0 0 var(--primary); }
.cm-row--head { min-height: 40px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.cm-c-no { color: var(--muted); font-size: var(--fs-xs); text-align: center; font-variant-numeric: tabular-nums; }
/* 분류 칸: 전체 보기에서만 (게시판별 보기는 분류가 하나라 칸 없음). 제목 앞 분류 글자(.cm-cat--inline)는 폰 화면용 */
.cm-list--cat .cm-row { grid-template-columns: 52px 64px minmax(0, 1fr) 140px 64px 48px 44px; }
.cm-c-cat { text-align: center; white-space: nowrap; } /* "공략 영상" 도 한 줄로 */
.cm-list--cat .cm-cat--inline { display: none; }
.cm-c-up { color: var(--accent); font-weight: var(--fw-bold); }
.cm-c-up.is-zero { color: var(--muted); font-weight: var(--fw-regular); }
/* 제목 칸: 제목(늘어남) + 오른쪽 40px 는 ⋯ 버튼 자리. 폰에서는 글쓴이·시간·조회·추천이 제목 아래 줄(.cm-mobile-meta)로 */
.cm-c-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; padding-right: 40px; } /* 오른쪽 40px = ⋯ 버튼 자리 (제목을 덮지 않게) */
.cm-c-title > .cm-title { flex: 1 1 0; min-width: 0; }
.cm-c-title > .cm-mobile-meta { flex-basis: 100%; }
/* 조회·추천: 오른쪽 좁은 숫자 칸 */
.cm-c-num { text-align: right; color: var(--text-sub); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.cm-c-date { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.cm-c-title, .cm-c-author { min-width: 0; }
.cm-title { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text-strong); }
.cm-title::after { content: ""; position: absolute; inset: 0; } /* 줄 어디를 눌러도 글로 */
.cm-title:hover { color: var(--text-strong); }
.cm-title:hover .cm-t { text-decoration: underline; text-underline-offset: 3px; }
.cm-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-md); font-weight: var(--fw-medium); }
.cm-cat { --c: var(--accent); flex-shrink: 0; display: inline-grid; place-items: center; min-width: 44px; padding: 2px 8px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); font-size: var(--fs-xs); font-weight: var(--fw-heavy); }
.cm-cat--free { --c: var(--cat-free); } .cm-cat--qna { --c: var(--cat-qna); } .cm-cat--guide { --c: var(--cat-guide); } .cm-cat--greet { --c: var(--cat-greet); } .cm-cat--gallery { --c: var(--cat-gallery); } .cm-cat--video { --c: var(--cat-video); }
.cm-row .cm-cat { min-width: 0; padding: 0; border: 0; background: none; font-size: var(--fs-xs); font-weight: var(--fw-bold); } /* 목록 줄에서는 딱지 대신 색 글자 (인기 글 쪽은 딱지 그대로) */
.cm-cm { flex-shrink: 0; min-width: 20px; padding: 0 6px; border-radius: 999px; background: rgba(196,181,253,.14); color: var(--accent); font-size: var(--fs-2xs); font-weight: var(--fw-heavy); text-align: center; }
.cm-media { flex-shrink: 0; display: inline-flex; color: var(--muted); }
.cm-new { flex-shrink: 0; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--new); color: #fff; font-size: var(--fs-micro); font-weight: var(--fw-black); animation: cm-beat 2.4s ease-in-out infinite; }
@keyframes cm-beat { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--new-rgb),.55); } 50% { box-shadow: 0 0 0 5px rgba(var(--new-rgb),0); } }
.cm-mobile-meta { display: none; }

/* 공지: 맨 위 고정, 2개 + 펼치기 */
.cm-nrow { background: rgba(var(--focus-rgb),.09); }
.cm-nrow:not(.cm-row--head):hover { background: rgba(var(--focus-rgb),.15); }
.cm-nrow .cm-t { font-weight: var(--fw-bold); }
.cm-nrow.is-extra:not([hidden]) { animation: cm-drop .25s ease-out; }
@keyframes cm-drop { from { opacity: 0; } }
.cm-pin { display: inline-flex; align-items: center; gap: 2px; padding: 2px 7px; border-radius: 999px; background: var(--primary); color: #fff; font-size: var(--fs-2xs); font-weight: var(--fw-heavy); white-space: nowrap; }
.cm-nmore { border-bottom: 1px solid var(--line); background: rgba(var(--focus-rgb),.05); }
.cm-nmore button { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 36px; border: 0; background: none; color: var(--accent); font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-bold); cursor: pointer; }
.cm-nmore button:hover { background: rgba(var(--focus-rgb),.1); }
.cm-nmore button svg { transition: transform .2s; }
.cm-nmore button[aria-expanded="true"] svg { transform: rotate(180deg); }

/* 마우스를 올리면 제목 칸 오른쪽 끝에 스크랩 · 링크 복사 */
/* 위치: 줄 오른쪽 끝에서 글쓴이·작성·조회·추천 칸 폭만큼 안쪽 (--tail) */
.cm-row { --tail: calc(var(--sp-5) + 140px + 64px + 48px + 44px + 10px * 4); } /* ⋯ 는 제목 칸 오른쪽 끝(글쓴이 칸 바로 앞)의 빈자리에 */
.cm-acts { position: absolute; z-index: 2; top: 50%; display: flex; transform: translateY(-50%); opacity: 0; pointer-events: none; right: var(--tail);
  transition: opacity .15s; }
.cm-row:hover .cm-acts, .cm-row:focus-within .cm-acts { opacity: 1; pointer-events: auto; }
.cm-act { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.cm-act:hover { background: rgba(255,255,255,.08); color: #fff; }
.cm-act.is-on { color: var(--accent); }
.cm-act.is-on svg { fill: currentColor; }
@media (hover: none) { .cm-acts { display: none; } }

/* 쪽 나눔 크기(.cm-pages)는 영상 · 갤러리와 같이 쓰려고 dnd2.css '페이지네이션' 으로 옮김 */

/* 오른쪽: 이번 주 인기 글 · 처음 오셨나요. 접기/펴기 (.cm-layout.is-side-closed, 상태는 board-list.js 가 기억) */
.cm-side { position: sticky; top: calc(var(--header-h) + 16px); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cm-side__body { display: flex; flex-direction: column; gap: 12px; }
.cm-side__toggle { align-self: flex-end; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 6px 0 10px; border: 1px solid var(--glass-border); border-radius: 8px; background: var(--glass-bg); color: var(--muted); font: inherit; font-size: var(--fs-xs); cursor: pointer; transition: color .2s, border-color .2s; }
.cm-side__toggle:hover { color: var(--text-strong); border-color: var(--accent-line); }
.cm-side__toggle-label { display: none; }
/* 접힌 상태: 오른쪽은 세로로 긴 좁은 버튼("인기 글 ‹") 하나만 */
.cm-layout.is-side-closed { grid-template-columns: minmax(0, 1fr) 36px; }
.is-side-closed .cm-side__body { display: none; }
.is-side-closed .cm-side__toggle { align-self: stretch; flex-direction: column; justify-content: flex-start; gap: 8px; height: auto; padding: 12px 0; }
.is-side-closed .cm-side__toggle svg { order: -1; transform: rotate(180deg); }
.is-side-closed .cm-side__toggle-label { display: block; writing-mode: vertical-rl; letter-spacing: .1em; }
/* 좁은 화면(1024 이하): 목록 아래로 내리고 접기 버튼은 숨김 (항상 펼침) */
@media (max-width: 1024px) {
  .cm-layout, .cm-layout.is-side-closed { grid-template-columns: minmax(0, 1fr); }
  .cm-side { position: static; }
  .cm-side__toggle { display: none; }
  .is-side-closed .cm-side__body { display: flex; }
}
.cm-card { display: flex; flex-direction: column; gap: var(--sp-2); padding: 14px; border: 1px solid var(--glass-border); border-radius: 14px; background: var(--glass-bg); }
.cm-card .small { font-size: var(--fs-xs); }
.cm-card h2 { display: flex; align-items: center; gap: 6px; margin: 0 0 2px; font-size: var(--fs-md); font-weight: var(--fw-heavy); color: var(--text-strong); }
.cm-card h2 svg { color: var(--hot); }
.cm-hot { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cm-hot a { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: center; padding: 5px 4px; border-radius: 10px; color: var(--text); transition: background-color .15s, transform .15s; }
.cm-hot a:hover { background: var(--hover); color: var(--text-strong); transform: translateX(3px); }
.cm-hot__no { font: var(--fw-heavy) var(--fs-sm)/var(--lh-snug) var(--font-display); color: var(--accent); text-align: center; }
.cm-hot li:first-child .cm-hot__no { background: linear-gradient(90deg, var(--cat-qna), #FFF3CF, var(--cat-qna)) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: cm-gold 2.5s linear infinite; }
@keyframes cm-gold { to { background-position: -200% 0; } }
.cm-hot__t { display: flex; align-items: center; gap: 6px; min-width: 0; } /* 분류 딱지 + 제목 한 줄 (조회 · 댓글은 말풍선) */
.cm-hot__t b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.cm-hot__t .cm-cat { flex: none; min-width: 0; padding: 0 6px; font-size: var(--fs-micro); }
.cm-boards { display: grid; gap: 2px; }
.cm-board { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 10px; color: var(--text); transition: background-color .15s; }
.cm-board:hover, .cm-board[aria-current] { background: var(--hover); color: var(--text-strong); }
.cm-board__ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(var(--focus-rgb),.16); color: var(--accent); transition: background-color .2s, color .2s; }
.cm-board:hover .cm-board__ic, .cm-board[aria-current] .cm-board__ic { background: var(--primary); color: #fff; }
.cm-board b { display: block; font-size: var(--fs-sm); }
.cm-board em { font-style: normal; font-size: var(--fs-2xs); color: var(--muted); }

/* 좁은 화면: 표 머리·번호·숫자 칸을 빼고 제목 아래 한 줄에 글쓴이·시간·조회·추천 */
@media (max-width: 768px) {
  .cm-tabrow { flex-direction: column-reverse; }
  .cm-write { min-height: 42px; }
  .cm-tab { flex: 0 0 auto; }
  .cm-tools { gap: 8px; }
  .cm-search { flex-basis: 100%; }
  .cm-sort { flex: 1; } .cm-sort a { flex: 1; justify-content: center; padding: 0 6px; }
  .cm-row { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; }
  .cm-c-title { padding-right: 0; } .cm-c-title > .cm-title { flex: 1 1 100%; }
  .cm-row--head, .cm-c-no, .cm-c-cat, .cm-c-author, .cm-c-date, .cm-c-num { display: none; }
  .cm-list--cat .cm-row { grid-template-columns: minmax(0, 1fr); }
  .cm-list--cat .cm-cat--inline { display: inline-grid; }
  .cm-nrow .cm-title::before { content: "공지"; flex-shrink: 0; padding: 2px 8px; border-radius: 999px; background: var(--primary); color: #fff; font-size: var(--fs-2xs); font-weight: var(--fw-heavy); }
  .cm-title { align-items: flex-start; }
  .cm-t { flex: 1 1 0; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: var(--lh-snug); }
  .cm-title > .cm-cat, .cm-title > .cm-cm, .cm-title > .cm-media, .cm-title > .cm-new { margin-top: 1px; }
  .cm-mobile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 8px; font-size: var(--fs-xs); color: var(--muted); }
  .cm-mobile-meta .user { gap: 6px; font-size: var(--fs-xs); }
  .cm-mobile-meta .user__name { max-width: 9em; }
}
@media (max-width: 480px) {
  .cm-selects { width: 100%; } .cm-select { flex: 1; } .cm-select select { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cm-new, .cm-nrow.is-extra:not([hidden]), .cm-hot li:first-child .cm-hot__no { animation: none !important; }
  .cm-hot li:first-child .cm-hot__no { color: var(--cat-qna); }
  .cm-nmore button svg, .cm-hot a { transition: none; }
}

/* ----- 공통 UI 키트 연결 (말풍선·메뉴·뼈대) ----- */
/* 글쓴이: 아바타(말풍선 카드) + 레벨 + 닉네임(메뉴). 줄 전체 링크(.cm-title::after) 위로 올라와야 눌림 */
.cm-author { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; min-width: 0; }
.cm-avwrap { display: inline-flex; flex-shrink: 0; border-radius: 50%; cursor: help; }
.cm-name { min-width: 0; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; background: none; color: var(--text); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.cm-name:hover, .cm-name[aria-expanded="true"] { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.cm-title > [data-tip] { position: relative; z-index: 1; } /* 댓글 수·이미지·N 에 마우스를 올리면 말풍선 */
.cm-act[aria-expanded="true"] { background: rgba(var(--focus-rgb),.25); color: #fff; }
/* 글쓴이 카드 (말풍선 안) */
.cm-ucard { display: grid; gap: 4px; min-width: 190px; padding: 12px 14px; }
.cm-ucard b { font-size: var(--fs-md); color: var(--text-strong); }
.cm-ucard > span { font-size: var(--fs-xs); color: var(--muted); }
.cm-ucard dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 0; padding-top: 8px; border-top: 1px solid var(--line); }
.cm-ucard dt { font-size: var(--fs-2xs); color: var(--muted); }
.cm-ucard dd { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-heavy); color: var(--text-strong); }
/* 뼈대(로딩): 반짝이는 회색 막대 */
.cm-skel .cm-row:hover { background: none; box-shadow: none; }
.cm-skel i { display: block; width: 100%; height: 12px; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.05) 75%) 0 0 / 200% 100%; animation: cm-shimmer 1s linear infinite; }
.cm-skel .cm-c-no i { width: 24px; margin: 0 auto; }
@keyframes cm-shimmer { to { background-position: -200% 0; } }
@media (max-width: 768px) {
  .cm-skel .cm-row > span:nth-child(2) i { height: 16px; }
}
@media (prefers-reduced-motion: reduce) { .cm-skel i { animation: none; } }

/* 왼쪽 빠른 메뉴 세로줄은 메인과 같이 메뉴 자체의 오른쪽 테두리(dnd2.css .home-rail)를 씀.
   예전처럼 목록 끝까지만 JS 로 재서 그으면, 탭을 누를 때마다(로딩 뼈대 → 새 화면) 길이가 바뀌며 선이 튐 */

/* 글 상세: 글쓴이·댓글 작성자 이름 → 누르면 프로필·작성글·쪽지 메뉴 (fragments/board.html :: userMenu) */
.user-link { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; border-radius: var(--radius-sm); }
.user-link:hover, .user-link[aria-expanded="true"] { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.user-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 글 보기 아래 글 목록 (예전 게시판처럼 댓글 아래, board/detail.html .post-list): 게시판 목록 화면의 표(.cm-list)를 그대로, 오른쪽 칸까지 전체 폭 */
.post-list { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.post-list__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: 0 4px; }
.post-list__head h2 { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-strong); }
.post-list__head a { font-size: var(--fs-sm); color: var(--muted); }
.post-list__head a:hover { color: var(--text-strong); }
.post-list .cm-row.is-current { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--primary); }
.post-list .cm-row.is-current .cm-t { color: var(--text-strong); font-weight: var(--fw-bold); }
.post-list .cm-row.is-current .cm-c-no { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--accent); }

/* ============ 이 글을 읽은 사람 (fragments/readers.html, post.js) ============
   추천 · 스크랩 아래 가운데 한 줄: 작은 얼굴 3 + '누구, 누구 외 n명이 읽었습니다 ›' (흐린 글씨, 테두리 · 바탕 없음). 누르면 작은 창으로 명단
   예전 본문 폭 상자는 본문만큼 눈에 띄었고, 정보 줄의 '읽음 n'은 너무 안 보였음 → 그 사이
   창은 post.js 가 문서 끝(body)으로 꺼내 화면 기준(fixed)으로 버튼 밑에 놓음: 글 카드의 반투명 효과 · 영상 제목 띠의 잘림 안에서도 제자리에 */
.post-readers { display: flex; justify-content: center; }
.post .post-readers { padding: 0 var(--sp-8) var(--sp-10); margin-top: calc(-1 * var(--sp-3)); } /* 게시판: 추천 · 스크랩 바로 밑에 붙여 한 묶음으로. 아래는 글 상자 끝까지 40 (24 는 끝에 붙어 보였음) */
.post-readers__btn { display: inline-flex; align-items: center; gap: var(--sp-2); max-width: 100%; min-height: 36px; padding: var(--sp-1) var(--sp-3); font: inherit; font-size: var(--fs-sm); color: var(--muted); background: none; border: 0; border-radius: 999px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.post-readers__btn:hover, .post-readers__btn[aria-expanded="true"] { color: var(--text-sub); background: var(--hover); }
.post-readers__btn .ico { flex: none; width: 14px; height: 14px; }
.post-readers__stack { display: inline-flex; flex: none; }
.post-readers__stack .avatar { width: 20px; height: 20px; font-size: var(--fs-micro); box-shadow: 0 0 0 2px var(--surface-solid); }
.post-readers__stack .avatar + .avatar { margin-left: -5px; }
.post-readers__names { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-readers__names b { font-weight: var(--fw-medium); color: var(--text-sub); }
.post-readers__none { min-height: 36px; display: inline-flex; align-items: center; font-size: var(--fs-sm); color: var(--muted); }
.post-readers__pop { position: fixed; z-index: var(--z-pop); width: 300px; max-height: 360px; overflow-y: auto; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--text-sub); text-align: left; white-space: normal; background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 16px 40px -12px rgba(0,0,0,.7); }
.post-readers__pop[hidden] { display: none; }
.post-readers__head { margin: 0 0 var(--sp-2); font-weight: var(--fw-semibold); color: var(--text-strong); }
.post-readers__head b { color: var(--accent); }
.post-readers__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.post-readers__item { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; padding: var(--sp-1) 0; }
.post-readers__item + .post-readers__item { border-top: 1px solid var(--line); }
.post-readers__item .avatar { width: 26px; height: 26px; font-size: var(--fs-xs); }
.post-readers__name { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.post-readers__name:hover { color: var(--accent); }
.post-readers__ago { flex: none; margin-left: auto; font-size: var(--fs-xs); color: var(--muted); }
.post-readers__more { display: block; width: 100%; min-height: 36px; margin-top: var(--sp-2); font: inherit; color: var(--accent); background: transparent; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; }
.post-readers__more[hidden] { display: none; }
.post-readers__more:hover { border-color: var(--accent-line); }
/* 폰 · 태블릿: 버튼 칸 아래가 20 이라 -12 를 빼면 8 만 남고, 글 상자가 투명이라 아래 40 은 빈 공간으로 보임 */
@media (max-width: 768px) { .post .post-readers { padding-inline: 0; margin-top: 0; padding-bottom: var(--sp-5); } }
@media (max-width: 640px) {
  .post-readers__btn { min-height: 44px; }
  /* 폰: 정보 줄 어디에 있든 화면 밖으로 나가지 않게 화면 가운데 창으로.
     예전엔 맨 아래(bottom 16)에 z-pop 으로 떠서 아래 고정 단추(채팅 · 메뉴 · 편집, 음악 재생 줄)와 겹치고 가려졌음
     → 아래 단추 자리를 피해 가운데에 두고, 단추보다 위(z-sheet)로 올리며, 뒤는 어둡게 덮어 창이 떠 있음을 분명히 (밖을 누르면 닫힘, post.js)
     max-height 의 200px 은 음악 재생 줄(76px)과 위아래 여백 몫 */
  .post-readers__pop { position: fixed; z-index: var(--z-sheet); top: 50%; right: var(--sp-4); bottom: auto; left: var(--sp-4); width: auto; max-height: min(60vh, 440px, calc(100vh - 200px)); padding: var(--sp-4); transform: translateY(-50%); box-shadow: 0 0 0 100vmax rgba(var(--scrim-rgb), .7); }
  .post-readers__item { min-height: 44px; padding: var(--sp-2) 0; }
  .post-readers__more { min-height: 44px; }
}

/* 폰: 글 속 유튜브는 본문 폭 안에 꽉 (예전엔 100vw 로 화면 양끝까지 늘렸는데, 100vw 에 세로 스크롤바 폭이 들어가 좌우가 화면 밖으로 잘렸음) */
@media (max-width: 768px) {
  .post__content iframe.ql-video, .post__content .yt-facade {
    display: block; width: 100%; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important;
  }
}

/* ---------- 댓글 꾸밈 (CommentFormat · comment-editor.js) ---------- */
.cm-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); margin-bottom: var(--sp-2); }
/* 댓글 쓰기 에디터 (comment-editor.js, TinyMCE, 시안 docs/comment-sian/redesign.html B): 입력 칸 위 · 도구줄 아래 (toolbar_location bottom), 누르면 보라 테두리 */
:is(.comments__form, .comment__reply-form, .comment__edit-form, .media-comments__form) .tox-tinymce { border: 1px solid var(--line-strong) !important; border-radius: 14px !important; background: #1d1e22 !important; transition: border-color .15s, box-shadow .15s; }
:is(.comments__form, .comment__reply-form, .comment__edit-form, .media-comments__form) .tox-tinymce:focus-within { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(139,92,246,.18); }
:is(.comments__form, .comment__reply-form, .comment__edit-form, .media-comments__form) .tox .tox-editor-header { box-shadow: none !important; border: 0 !important; border-top: 1px solid rgba(255,255,255,.06) !important; padding: 0 !important; }
:is(.comments__form, .comment__reply-form, .comment__edit-form, .media-comments__form) .tox :is(.tox-editor-header, .tox-toolbar-overlord, .tox-toolbar, .tox-toolbar__primary) { background: transparent !important; }
:is(.comments__form, .comment__reply-form, .comment__edit-form, .media-comments__form) .tox .tox-tbtn { height: 34px !important; border-radius: 8px !important; }
:is(.comments__form, .comment__reply-form, .comment__edit-form, .media-comments__form) .tox .tox-tbtn[data-mce-name="gif"] { font-weight: 800 !important; letter-spacing: .02em; }
/* 흰 선 원인: 안쪽 iframe 바탕이 흰색이라 가장자리 틈으로 비침 · TinyMCE 가 누르면 안쪽에 흰 테두리 2px (위 보라 테두리가 대신) */
:is(.comments__form, .comment__reply-form, .comment__edit-form, .media-comments__form) .tox .tox-edit-area__iframe { background: #1d1e22 !important; }
:is(.comments__form, .comment__reply-form, .comment__edit-form, .media-comments__form) .tox .tox-edit-area::before { display: none !important; }
.cm-count { margin-right: auto; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; } /* 글자 수 (comment-editor.js 가 등록 버튼 줄 왼쪽에 넣음) */
.cm-count.is-over { color: var(--danger); }
.media-comments__form .tox-tinymce { flex: 1 1 100%; min-width: 0; }
.media-comments__form:has(.tox-tinymce) { justify-content: flex-end; } /* 에디터가 한 줄을 다 쓰므로 등록 버튼은 그 아래 오른쪽 */
.cm-c--red { color: #f87171; } .cm-c--orange { color: #fb923c; } .cm-c--yellow { color: #facc15; } .cm-c--green { color: #4ade80; }
.cm-c--blue { color: #60a5fa; } .cm-c--purple { color: #c084fc; } .cm-c--gray { color: #9ca3af; }
:is(.comment__text, .media-comment__text) a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
:is(.comment__text, .media-comment__text) .cm-imglink { display: block; width: fit-content; margin: var(--sp-2) 0; text-decoration: none; }
.cm-img { display: block; max-width: min(100%, 360px); max-height: 280px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.cm-img.is-sized { max-width: 100%; max-height: none; height: auto; } /* 댓글 에디터에서 크기를 바꾼 그림 (CommentFormat #w=폭) */
.cm-yt { position: relative; display: block; width: min(100%, 480px); aspect-ratio: 16 / 9; margin: var(--sp-2) 0; overflow: hidden; cursor: pointer; background: var(--art-bg-deep); border-radius: var(--radius-sm); border: 1px solid var(--line-strong); white-space: normal; }
.cm-yt .yt-facade__img { width: 100%; height: 100%; object-fit: cover; }
iframe.cm-yt { height: auto; }
/* 댓글 에디터 GIF 고르기 창 (js/comment-editor.js, body 바로 아래에 붙음. 시안 redesign.html B): 제목 · 닫기 · 둥근 검색 칸 · 자주 쓰는 말 칩 · 큰 그림 칸. 폰은 아래에서 올라오는 판 */
.gifp { position: absolute; z-index: var(--z-sheet); width: 360px; max-width: calc(100vw - 24px); overflow: hidden; background: #1c1d21; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; box-shadow: 0 18px 48px rgba(0,0,0,.6); }
.gifp[hidden], .gifp__dim[hidden] { display: none; }
.gifp__top { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 0 14px; }
.gifp__top b { font-size: var(--fs-md); color: var(--text-strong); letter-spacing: .02em; }
.gifp__x { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; color: var(--text-sub); background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
.gifp__x:hover { background: var(--hover); color: var(--text-strong); }
.gifp__search { position: relative; margin: 10px 12px 0; }
.gifp__search svg { position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--text-sub); pointer-events: none; }
.gifp__search input { width: 100%; min-height: 42px; padding: 0 12px 0 36px; font: inherit; font-size: 16px; color: var(--text); background: #121315; border: 1px solid var(--line-strong); border-radius: 999px; } /* 16px: 폰이 칸을 누를 때 화면을 확대하지 않게 */
.gifp__search input:focus { outline: none; border-color: var(--accent); }
.gifp__chips { display: flex; gap: 6px; padding: 10px 12px 2px; overflow-x: auto; scrollbar-width: none; }
.gifp__chips::-webkit-scrollbar { display: none; }
.gifp__chips button { flex-shrink: 0; min-height: 32px; padding: 0 12px; font-size: var(--fs-sm); color: var(--text-sub); background: rgba(255,255,255,.06); border: 0; border-radius: 999px; cursor: pointer; }
.gifp__chips button[aria-pressed="true"] { color: #fff; background: var(--primary); }
.gifp__chipwrap { position: relative; }
.gifp__cbtn { position: absolute; top: calc(50% + 4px); z-index: 1; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; transform: translateY(-50%); font: inherit; font-size: 20px; line-height: 1; color: var(--text-strong); background: #1c1d21; border: 1px solid var(--line-strong); border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,.5); cursor: pointer; }
.gifp__cbtn--prev { left: 4px; } .gifp__cbtn--next { right: 4px; }
.gifp__cbtn[hidden] { display: none; }
.gifp__label { min-height: 18px; margin: 8px 14px 6px; font-size: var(--fs-xs); color: var(--text-sub); }
.gifp__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 104px; align-content: start; gap: 6px; height: 300px; padding: 0 12px; overflow-y: auto; overscroll-behavior: contain; }
.gifp__grid button { height: 100%; padding: 0; background: var(--art-bg-deep); border: 0; border-radius: 10px; overflow: hidden; cursor: pointer; transition: transform .12s; }
.gifp__grid button:hover, .gifp__grid button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; transform: scale(.97); }
.gifp__grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gifp__empty { grid-column: 1 / -1; grid-row: span 2; align-self: center; margin: 0; text-align: center; font-size: var(--fs-sm); color: var(--text-sub); }
.gifp__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); margin-top: 8px; padding: 10px 14px 12px; border-top: 1px solid rgba(255,255,255,.06); font-size: var(--fs-2xs); color: var(--text-sub); }
.gifp__foot b { color: var(--text-strong); letter-spacing: .02em; }
.gifp__dim { display: none; }
@media (max-width: 640px) {
  .gifp { position: fixed; left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; max-width: none; border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom); animation: gifp-up .22s ease-out; }
  .gifp::before { content: ""; display: block; width: 38px; height: 4px; margin: 8px auto 0; background: rgba(255,255,255,.18); border-radius: 4px; }
  .gifp__grid { height: 46vh; grid-auto-rows: calc((100vw - 36px) / 3); }
  .gifp__dim { display: block; position: fixed; inset: 0; z-index: calc(var(--z-sheet) - 1); background: rgba(0,0,0,.5); }
}
@keyframes gifp-up { from { transform: translateY(40px); opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .gifp { animation: none; } .gifp__grid button { transition: none; } }
.cm-yt:hover .yt-facade__play { background: var(--primary); }

/* 폰: 게시판 글 카드(테두리 · 바탕 · 안쪽 여백)를 없애고 화면 바탕에 바로 → 글 폭이 화면 여백(16px)만 빼고 다 (카드 안 카드 안 영상이라 작았음) */
@media (max-width: 768px) {
  .post.card, body:has(.post__content iframe) .post.card { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; -webkit-backdrop-filter: none; backdrop-filter: none; } /* 영상을 틀면(iframe) 위 'body:has(iframe) .card' 가 카드 바탕을 다시 칠해 양끝까지 영상이 카드 밖으로 튀어나와 보였음 → 폰은 틀어도 바탕 없음 */
  .post__head, .post__body, .post__actions, .post__extra { padding-left: 0; padding-right: 0; }
}

/* 게시판 글 보기 폰 · 태블릿(1024 이하) 순서: PC 의 [본문 · 이전다음 · 댓글 | 작성자 · 인기글 · 목록으로] 를 그대로 쌓아
   본문 → 이전/다음 → 댓글 → 작성자 → 인기글 이 되던 것 → 본문 → 작성자 → 댓글 → 이전/다음 → (아래 게시판 목록)
   인기글 · '목록으로' 는 바로 아래 게시판 목록이 대신해서 뺌 */
@media (max-width: 1024px) {
  .bd-layout { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-6); }
  .bd-layout > .stack, .bd-layout > .aside { display: contents; }
  .bd-layout .post, .bd-layout .author-card, .bd-layout .comments, .bd-layout .post-nav { min-width: 0; max-width: 100%; } /* 긴 제목(한 줄 말줄임)이 칸을 화면 밖으로 늘리지 않게 */
  .bd-layout .post { order: 1; }
  .bd-layout .author-card { order: 2; }
  .bd-layout .comments { order: 3; }
  .bd-layout .post-nav { order: 4; }
  .bd-layout .bd-popular, .bd-layout .bd-back { display: none; }
}

/* ---------- 글 보기 모양 (관리자 > 게시판 관리 · board.view.pc / board.view.m, detail.html 이 .container 에 붙임) ----------
   PC 한 판(bd-pc-flat): 본문 · 댓글 · 이전/다음을 테두리 하나로 잇고(아카라이브처럼) 댓글만 한 단계 밝게. 위 여백 · 칸 사이를 줄여 본문을 넓게. 오른쪽 칸은 카드 그대로
   폰 화면 꽉 차게(bd-m-bleed): 위 여백을 줄이고 본문 · 글쓴이 · 댓글 · 이전/다음을 화면 양끝까지, 덩어리 사이는 어두운 띠 */
@media (min-width: 1025px) {
  .site-main:has(> .bd-pc-flat) { padding-top: var(--sp-5); }
  .container.bd-pc-flat { gap: var(--sp-3); }
  .bd-pc-flat .layout-aside.bd-layout { gap: var(--sp-4); }
  .bd-pc-flat .bd-layout > .stack { gap: 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface-solid); }
  .site-main .bd-pc-flat .bd-layout > .stack > * { margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .site-main .bd-pc-flat .bd-layout > .stack > .comments { background: var(--surface); border-top: 1px solid var(--line-strong); }
  .site-main .bd-pc-flat .bd-layout > .stack > .post-nav { border-top: 1px solid var(--line-strong); }
  .bd-pc-flat .post__head { padding: var(--sp-6) var(--sp-6) var(--sp-5); }
  .bd-pc-flat :is(.post__body, .post__extra, .post__actions) { padding-inline: var(--sp-6); }
}
@media (max-width: 1024px) {
  .site-main:has(> .bd-m-bleed) { padding-top: var(--sp-2); }
  .container.bd-m-bleed { gap: var(--sp-2); }
  .bd-m-bleed .bd-layout { gap: 0; }
  .site-main .bd-m-bleed .bd-layout :is(.post, .author-card, .comments, .post-nav) { width: auto; max-width: none; margin-inline: calc(-1 * var(--gutter)); border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
  .site-main .bd-m-bleed .bd-layout :is(.author-card, .comments, .post-nav) { border-top: var(--sp-2) solid var(--bg); }
  .bd-m-bleed > .post-list { margin-top: var(--sp-4); }   /* 꽉 찬 띠와 아래 목록 사이는 원래만큼(24) */
}
/* 768 이하는 본문 상자가 이미 투명 · 안쪽 여백 0 (바깥 여백이 글 여백) → 본문은 넓히지 않아야 글자가 화면 끝에 안 붙음 */
@media (max-width: 768px) {
  .site-main .bd-m-bleed .bd-layout .post { width: auto; margin-inline: 0; }
}

/* ---------- 출처 줄 (post.js 가 '출처:' 줄에 .post-src) : 본문보다 작고 옅게, 링크는 밑줄 없이 ---------- */
.post__content p.post-src { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: calc(var(--sp-2) * -1) 0 var(--sp-1); font-size: var(--fs-xs); line-height: 1.5; color: var(--muted); } /* 본문은 줄 사이 16px(flex gap)라 위로 당겨 영상에 붙임 */
.post__content > p:empty:has(+ .post-src) { display: none; } /* 영상과 출처 사이 빈 줄 (gap 이 한 번 더 들어가 떠 보였음) */
.post__content .post-src a { color: var(--text-sub); font-weight: var(--fw-medium); text-decoration: none; }
.post__content .post-src a:hover { color: var(--accent); }
.post-src__k { display: inline-flex; align-items: center; gap: 4px; margin-right: 2px; padding: 1px 7px 1px 5px; font-size: 11px; font-weight: var(--fw-semibold); color: var(--text-sub); background: var(--surface-2); border-radius: 999px; }
.post-src__k svg { color: #ff4e45; }

/* ---------- 글쓴이 카드 접기 (post.js .is-foldable): 폰 · 태블릿에서 처음엔 얼굴 · 이름 · 소개 한 줄 ---------- */
.author-card__fold { display: none; }
@media (max-width: 1024px) {
  .author-card.is-foldable { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 0; padding: var(--sp-3) var(--sp-2) var(--sp-3) var(--sp-4); text-align: left; cursor: pointer; }
  .author-card.is-foldable.is-open { cursor: default; }
  .author-card.is-foldable > .avatar { grid-row: 1 / span 2; width: 44px; height: 44px; margin-right: var(--sp-3); box-shadow: 0 0 0 2px var(--surface-solid), 0 0 0 3px rgba(255,255,255,.16); }
  .author-card.is-foldable .author-card__name { grid-column: 2; font-size: var(--fs-md); }
  .author-card.is-foldable .author-card__bio { grid-column: 2; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .author-card.is-foldable .author-card__fold { grid-column: 3; grid-row: 1 / span 2; display: inline-grid; place-items: center; width: 40px; height: 40px; color: var(--text-sub); background: none; border: 0; cursor: pointer; }
  .author-card.is-foldable .author-card__fold svg { transition: transform .2s ease; }
  .author-card.is-open .author-card__fold svg { transform: rotate(180deg); }
  .author-card.is-foldable > .author-card__main, .author-card.is-foldable > .author-card__stats, .author-card.is-foldable > .btn { grid-column: 1 / -1; margin-top: var(--sp-3); }
  .author-card.is-foldable > .btn + .btn { margin-top: var(--sp-2); }
  .author-card.is-foldable:not(.is-open) > .author-card__main, .author-card.is-foldable:not(.is-open) > .author-card__stats, .author-card.is-foldable:not(.is-open) > .btn { display: none; }
  .author-card.is-open .author-card__bio { white-space: normal; }
  .author-card.is-foldable > .author-card__stats, .author-card.is-foldable > .author-card__main { text-align: center; }
}

/* ===== 링크 카드 (주소를 붙이면 제목 · 설명 · 대표 그림 카드, LinkCardService · js/link-paste.js, 시안 docs/link-paste-sian) ===== */
.lc { display: flex; max-width: 620px; margin: var(--sp-3) 0; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface-solid); overflow: hidden; color: inherit; text-decoration: none !important; transition: border-color .15s, background-color .15s; }
.lc:hover { border-color: var(--accent-line); background: #222327; }
.lc:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--focus-rgb), .5); }
.lc__img { flex: 0 0 168px; min-height: 112px; background: #18191c; }
.post__content .lc__img img, .lc__img img { display: block; width: 100%; height: 100% !important; max-width: none; object-fit: cover; border: 0; border-radius: 0; margin: 0; }
.lc__t { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 12px 14px; line-height: 1.45; }
.lc__site { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc__title { font-size: 15px; font-weight: 700; color: var(--text-strong); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lc__desc { font-size: 13px; color: var(--text-sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lc--noimg { border-left: 3px solid var(--primary); }
/* 댓글 안: 조금 작게, 줄바꿈 글자(pre-line) 영향 없이 */
.lc--cm { max-width: 520px; margin: var(--sp-2) 0; white-space: normal; }
.lc--cm .lc__img { flex-basis: 112px; min-height: 88px; }
.lc--cm .lc__t { padding: 10px 12px; }
.lc--cm .lc__title { font-size: 14px; }
@media (max-width: 640px) {
  .lc__img { flex-basis: 104px; min-height: 96px; }
  .lc__t { padding: 10px 12px; }
  .lc__title { font-size: 14px; }
  .lc__desc { -webkit-line-clamp: 1; }
  .lc--cm .lc__img { flex-basis: 92px; min-height: 84px; }
}
/* 붙인 바로 아래 작은 알림 (js/link-paste.js chip) */
.lp-chip { position: fixed; z-index: 1400; display: inline-flex; align-items: center; gap: 2px; max-width: calc(100vw - 16px); padding: 4px 4px 4px 14px; font-size: 13px; color: var(--text-sub); background: #26272c; border: 1px solid var(--line-strong); border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.45); animation: lpIn .15s ease-out; }
.lp-chip span { margin-right: 4px; white-space: nowrap; }
.lp-chip button { min-height: 36px; padding: 0 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--accent); background: transparent; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.lp-chip button:hover { background: var(--hover); }
@keyframes lpIn { from { opacity: 0; transform: translateY(-4px); } }

/* ===== '그림 넣기' 창 (js/image-picker.js, 시안 docs/link-paste-sian #pc-pick · #m-pick): PC 가운데 창 · 폰 아래 판 ===== */
.ipk-dim { position: fixed; inset: 0; z-index: 1390; background: rgba(0,0,0,.6); }
.ipk-dim[hidden], .ipk[hidden], .ipk__url[hidden] { display: none; }
.ipk { position: fixed; z-index: 1391; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(680px, calc(100vw - 32px)); max-height: min(760px, calc(100vh - 48px)); display: flex; flex-direction: column; color: var(--text); background: #1c1d21; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.ipk__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 10px 0 18px; }
.ipk__head b { font-size: 17px; color: var(--text-strong); }
.ipk__x { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; color: var(--text-sub); background: transparent; border: 0; border-radius: 10px; cursor: pointer; }
.ipk__x:hover { background: var(--hover); color: var(--text-strong); }
.ipk__url { display: flex; gap: 8px; margin: 8px 18px 0; }
.ipk__in { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; color: var(--muted); background: #121315; border: 1px solid var(--line-strong); border-radius: 12px; }
.ipk__in:focus-within { border-color: var(--accent); }
.ipk__in input { flex: 1; min-width: 0; height: 100%; padding: 0; font: inherit; font-size: 16px; color: var(--text); background: transparent; border: 0; outline: 0; }
.ipk__in input::placeholder { color: var(--placeholder); }
.ipk__go, .ipk__ok { flex-shrink: 0; min-height: 46px; padding: 0 20px; font: inherit; font-size: 15px; font-weight: 700; color: #fff; background: var(--primary); border: 0; border-radius: 12px; cursor: pointer; white-space: nowrap; }
.ipk__go:hover, .ipk__ok:hover:not(:disabled) { background: var(--primary-hover); }
.ipk__ok:disabled { opacity: .45; cursor: default; }
.ipk__tabs { display: flex; gap: 4px; margin: 14px 18px 0; padding: 4px; background: #121315; border-radius: 12px; }
.ipk__tabs button { flex: 1; min-height: 42px; padding: 0 4px; font: inherit; font-size: 14px; color: var(--text-sub); background: transparent; border: 0; border-radius: 9px; cursor: pointer; }
.ipk__tabs button[aria-selected="true"] { color: #fff; background: #2d2e34; font-weight: 700; }
.ipk__ts { display: none; }
.ipk__body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 12px 18px 0; overflow: hidden; }
.ipk__bar { display: flex; gap: 8px; align-items: center; }
.ipk__q { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; color: var(--muted); background: #121315; border: 1px solid var(--line); border-radius: 999px; }
.ipk__q:focus-within { border-color: var(--accent); }
.ipk__q input { flex: 1; min-width: 0; padding: 0; font: inherit; font-size: 16px; color: var(--text); background: transparent; border: 0; outline: 0; }
.ipk__src { display: inline-flex; gap: 4px; flex-shrink: 0; }
.ipk__src button { min-height: 36px; padding: 0 12px; font: inherit; font-size: 13px; color: var(--text-sub); background: rgba(255,255,255,.06); border: 0; border-radius: 999px; cursor: pointer; }
.ipk__src button[aria-pressed="true"][data-src="kakao"] { color: #191919; background: #FEE500; font-weight: 700; }
.ipk__src button[aria-pressed="true"][data-src="naver"] { color: #fff; background: #03C75A; font-weight: 700; }
.ipk__src button:disabled { opacity: .35; cursor: default; }
.ipk__res { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 12px; }
.ipk__body > .ipk__grid, .ipk__res > .ipk__grid { flex: 1; min-height: 0; overflow-y: auto; }
.ipk__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-content: start; height: 380px; padding-bottom: 12px; overscroll-behavior: contain; }
.ipk__tile { position: relative; height: 0; padding: 0 0 100%; overflow: hidden; background: #222; border: 0; border-radius: 10px; cursor: pointer; } /* 정사각형 (aspect-ratio 는 높이 고정 칸 안에서 줄이 눌려 겹침) */
.ipk__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ipk__tile small { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 1px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: #fff; background: rgba(0,0,0,.65); border-radius: 6px; }
.ipk__tile:hover { outline: 2px solid var(--accent-line); outline-offset: -2px; }
.ipk__tile:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.ipk__tile[aria-pressed="true"] { outline: 3px solid var(--primary); outline-offset: -3px; }
.ipk__tile[aria-pressed="true"]::after { content: "✓"; position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; display: grid; place-items: center; font-size: 14px; font-weight: 800; color: #fff; background: var(--primary); border-radius: 50%; }
.ipk__tile.is-checking::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.ipk__tile.is-bad { cursor: not-allowed; }
.ipk__tile.is-bad img { opacity: .25; filter: grayscale(1); }
.ipk__tile.is-bad::after { content: "못 넣는 그림"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: var(--text-sub); }
.ipk__cell { position: relative; min-width: 0; } /* 내 그림: 칸 + 왼쪽 위 휴지통 (image-picker.js) */
.ipk__cell > .ipk__tile { display: block; width: 100%; }
.ipk__del { position: absolute; left: 6px; top: 6px; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; color: #fff; background: rgba(0,0,0,.7); border: 0; border-radius: 8px; cursor: pointer; }
.ipk__del::before { content: ""; position: absolute; inset: -6px; } /* 누르는 곳은 44px */
.ipk__del:hover { background: var(--danger); }
.ipk__del:focus-visible { outline: 3px solid rgba(var(--focus-rgb), .9); outline-offset: 1px; }
.ipk__cell.is-busy { opacity: .4; pointer-events: none; }
.ipk__empty { margin: 0; padding: 48px 12px; text-align: center; font-size: 14px; line-height: 1.7; color: var(--muted); }
.ipk__drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 300px; margin-bottom: 12px; color: var(--text-sub); text-align: center; background: rgba(255,255,255,.03); border: 1.5px dashed var(--line-strong); border-radius: 14px; cursor: pointer; }
.ipk__drop b { font-size: 16px; color: var(--text-strong); }
.ipk__drop span { font-size: 13px; color: var(--muted); }
.ipk__drop:hover, .ipk__drop.is-over { border-color: var(--accent); background: rgba(139,92,246,.08); }
.ipk__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px 16px; border-top: 1px solid rgba(255,255,255,.06); }
.ipk__note { font-size: 13px; line-height: 1.5; color: var(--muted); }
.ipk__note.is-bad { color: #fca5a5; }
html.ipk-open { overflow: hidden; }
@media (max-width: 640px) {
  .ipk { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: auto; max-height: 88vh; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom); animation: ipkUp .22s ease-out; }
  .ipk::before { content: ""; display: block; width: 40px; height: 4px; margin: 8px auto 0; background: rgba(255,255,255,.2); border-radius: 4px; }
  .ipk__head { padding-left: 16px; }
  .ipk__url, .ipk__tabs { margin-left: 16px; margin-right: 16px; }
  .ipk__body { padding: 12px 16px 0; }
  .ipk__tabs button { min-height: 44px; font-size: 13px; }
  .ipk__tl { display: none; }
  .ipk__ts { display: inline; }
  .ipk__grid { grid-template-columns: repeat(3, 1fr); gap: 6px; height: 46vh; }
  .ipk__drop { height: 38vh; }
  .ipk__foot { padding: 12px 16px 16px; }
}
@keyframes ipkUp { from { transform: translateY(40px); opacity: .4; } }

/* 글 속 곡 카드 (SongCardService · 글쓰기 [넣기 › 음악]). ▶ 를 누르면 사이트 고정 재생기 (dnd2.js [data-song-card]) */
.scd { display: flex; align-items: center; gap: var(--sp-3); max-width: 560px; margin: var(--sp-3) 0; padding: 10px 14px 10px 10px; background: var(--surface-solid); border: 1px solid var(--line-strong); border-left: 3px solid var(--accent); border-radius: var(--radius-lg); }
.scd__th { flex-shrink: 0; width: 64px; height: 64px; overflow: hidden; border-radius: 10px; background: #222; }
.scd__th img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; margin: 0 !important; border-radius: 0 !important; }
.scd__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.scd__k { align-self: flex-start; display: inline-block; padding: 1px 8px; font-size: 11px; font-style: normal; font-weight: var(--fw-bold); color: #fff; background: color-mix(in srgb, var(--c, var(--accent)) 70%, #000); border-radius: 999px; }
.scd__n { overflow: hidden; font-size: var(--fs-md); color: var(--text-strong); white-space: nowrap; text-overflow: ellipsis; }
.scd__a { overflow: hidden; font-size: var(--fs-sm); color: var(--text-sub); white-space: nowrap; text-overflow: ellipsis; }
.scd__play { flex-shrink: 0; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; color: #fff; background: var(--primary); border: 0; border-radius: 50%; cursor: pointer; transition: background .15s, transform .15s; }
.scd__play:hover { background: var(--primary-hover); transform: scale(1.05); }
.scd__play:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.scd.is-playing { border-color: var(--accent-line); background: #221f2b; }
.scd.is-playing .scd__play svg { display: none; }
.scd.is-playing .scd__play::before { content: ""; width: 14px; height: 16px; border-left: 4px solid #fff; border-right: 4px solid #fff; }
@media (max-width: 640px) { .scd { gap: 10px; padding: 8px 10px 8px 8px; } .scd__th { width: 52px; height: 52px; } }

/* 넣기 창 (글쓰기): 그림 · 영상 · 음악 고르기 + 영상 · 곡 목록 (js/image-picker.js kinds) */
.ipk__kinds { display: flex; gap: 4px; margin: 14px 18px 0; padding: 4px; background: #121315; border-radius: 12px; }
.ipk__kinds[hidden], .ipk__tabs[hidden], .ipk__foot[hidden] { display: none; }
.ipk__kinds button { flex: 1; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 4px; font: inherit; font-size: 15px; color: var(--text-sub); background: transparent; border: 0; border-radius: 9px; cursor: pointer; }
.ipk__kinds button[aria-selected="true"] { color: #fff; background: #2d2e34; font-weight: 800; }
.ipk__kinds button[aria-selected="true"] svg { color: var(--accent); }
.ipk__kinds + .ipk__tabs { margin-top: 8px; }
.ipk__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ipk__chips button { min-height: 36px; padding: 0 14px; font: inherit; font-size: 13px; color: var(--text-sub); background: rgba(255,255,255,.06); border: 0; border-radius: 999px; cursor: pointer; }
.ipk__chips button[aria-pressed="true"] { color: #fff; background: var(--primary); font-weight: 700; }
.ipk__list { flex: 1; min-height: 0; height: 380px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; }
.ipk__row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 6px 8px; font: inherit; text-align: left; color: inherit; background: transparent; border: 0; border-radius: 10px; cursor: pointer; }
.ipk__row:hover { background: rgba(255,255,255,.05); }
.ipk__row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ipk__row[aria-pressed="true"] { background: rgba(139,92,246,.16); box-shadow: inset 0 0 0 2px var(--primary); }
.ipk__sth { flex-shrink: 0; width: 48px; height: 48px; overflow: hidden; border-radius: 8px; background: #222; }
.ipk__vth { position: relative; flex-shrink: 0; width: 112px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #222; }
.ipk__sth img, .ipk__vth img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ipk__vth em { position: absolute; right: 4px; bottom: 4px; padding: 0 5px; font-size: 11px; font-style: normal; color: #fff; background: rgba(0,0,0,.75); border-radius: 4px; }
.ipk__vth em:empty { display: none; }
.ipk__rt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ipk__rt b { overflow: hidden; font-size: 15px; color: var(--text-strong); white-space: nowrap; text-overflow: ellipsis; }
.ipk__rt small { overflow: hidden; font-size: 13px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.ipk__cat { flex-shrink: 0; padding: 2px 8px; font-size: 11px; font-weight: 700; color: #fff; background: color-mix(in srgb, var(--c, var(--accent)) 70%, #000); border-radius: 999px; }
.ipk__ck { flex-shrink: 0; width: 26px; height: 26px; display: grid; place-items: center; border: 2px solid var(--line-strong); border-radius: 50%; }
.ipk__row[aria-pressed="true"] .ipk__ck { background: var(--primary); border-color: var(--primary); }
.ipk__row[aria-pressed="true"] .ipk__ck::after { content: "✓"; font-size: 13px; font-weight: 900; color: #fff; }
@media (max-width: 768px) {
  .ipk__kinds { margin-left: 16px; margin-right: 16px; }
  .ipk__kinds button { font-size: 14px; gap: 5px; }
  .ipk__list { height: 46vh; }
  .ipk__vth { width: 96px; }
  .ipk__cat { display: none; }
}