/* hidden 속성이 display:grid 같은 규칙에 덮이지 않게(로그인 뒤 로그인 화면이 안 사라지던 문제) */
[hidden] { display: none !important; }

:root {
  --paper: #f6f5f1; --card: #fff; --ink: #1b1b19; --muted: #7d7b74; --line: #e3e0d8;
  --chip: #efede7; --accent: #e8452c; --ok: #2f7d4f; --danger: #c0392b;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', sans-serif; word-break: keep-all; -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 9px 15px; font-weight: 600; font-size: 14px; }
button:hover { border-color: #cfcbc1; }
button.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
button.primary:disabled { opacity: .45; cursor: default; }
button.danger { color: var(--danger); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input, textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; background: #fff; font-size: 14px; }
textarea { resize: vertical; min-height: 64px; line-height: 1.55; }
label { font-size: 12px; font-weight: 600; color: var(--muted); }
code { background: var(--chip); padding: 1px 6px; border-radius: 4px; font-size: .95em; }
.brand { margin: 0; font-weight: 800; font-size: 17px; letter-spacing: -.3px; }
.brand span { color: var(--accent); }
.form-msg { min-height: 1.4em; margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.form-msg.error { color: var(--danger); }
.form-msg.ok { color: var(--ok); }

.login { min-height: 100dvh; display: grid; place-items: center; padding: 20px; }
.login-card { width: min(360px, 100%); background: var(--card); border-radius: 16px; padding: 32px; display: grid; gap: 10px; box-shadow: 0 20px 60px #0000000d; }
.login-card .brand { margin-bottom: 14px; }

.bar { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: 14px clamp(16px, 3vw, 40px); background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.bar nav { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.bar a { color: var(--muted); text-decoration: none; margin-right: 6px; }
main { max-width: 1400px; margin: 0 auto; padding: 24px clamp(16px, 3vw, 40px) 80px; }

.drop { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 48px 20px; border: 2px dashed #cfcbc1; border-radius: 18px; background: var(--card); cursor: pointer; transition: border-color .15s, background .15s; }
.drop strong { font-size: 20px; }
.drop span { color: var(--muted); font-size: 14px; }
.drop small { color: var(--muted); font-size: 13px; margin-top: 6px; }
.drop small code { white-space: nowrap; }
.drop.over { border-color: var(--accent); background: #fff6f3; }

.section-head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin: 40px 0 14px; }
.section-head h2 { margin: 0; font-size: 19px; }
.section-head h2 span { color: var(--muted); font-weight: 500; font-size: 15px; }
.actions { display: flex; gap: 8px; }

.pending-list { display: grid; gap: 14px; }
.pending-item { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 18px; background: var(--card); border-radius: 14px; padding: 14px; align-items: start; }
.pending-item > img { width: 220px; height: 220px; object-fit: contain; background: var(--chip); border-radius: 10px; }
.pending-item .remove { border: 0; background: none; font-size: 18px; color: var(--muted); padding: 4px 8px; }
.pending-item.done { opacity: .55; }
.pending-item.done .remove { visibility: hidden; }
.pending-state { font-size: 13px; font-weight: 600; }
.pending-state.error { color: var(--danger); }
.pending-state.ok { color: var(--ok); }

.fields { display: grid; grid-template-columns: minmax(0, 2fr) minmax(90px, 1fr); gap: 10px 12px; align-content: start; }
.fields .wide { grid-column: 1 / -1; }
.fields > div { display: grid; gap: 5px; }
.tag-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-picker button { border: 0; background: var(--chip); border-radius: 999px; padding: 6px 12px; font-size: 13px; }
.tag-picker button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); font-weight: 500; }
.check input { width: auto; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { border: 0; background: var(--chip); border-radius: 999px; padding: 6px 12px; font-size: 13px; }
.chips button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.lib-item { position: relative; padding: 0; border: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 1; background: var(--chip); text-align: left; }
.lib-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-item .cap { position: absolute; inset: auto 0 0 0; padding: 22px 10px 8px; color: #fff; font-size: 12px; line-height: 1.35; background: linear-gradient(transparent, #0009); }
.lib-item .badges { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; }
.lib-item .badges b { background: #fffffff0; color: var(--ink); font-size: 11px; padding: 3px 7px; border-radius: 6px; }
.lib-item.hidden-item img { opacity: .35; }
.empty { color: var(--muted); font-size: 14px; padding: 30px 0; }

.editor { width: min(960px, 94vw); border: 0; border-radius: 18px; padding: 0; }
.editor::backdrop { background: #1b1b1999; backdrop-filter: blur(3px); }
.editor-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 22px; padding: 22px; }
.editor-body img { width: 100%; max-height: 60vh; object-fit: contain; background: var(--chip); border-radius: 10px; }
.editor-actions { display: flex; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--line); }
.editor-actions button { white-space: nowrap; }
/* 폰: DESIGN 'Facebook 올리기'는 윗줄 한 칸 가득, 지우기·닫기·저장은 아랫줄(2026-10-12) */
@media (max-width: 480px) {
  .editor-actions { flex-wrap: wrap; }
  #edit-fb { order: -1; flex: 1 0 100%; }
}
.spacer { flex: 1; }

@media (max-width: 760px) {
  .pending-item { grid-template-columns: 1fr auto; }
  .pending-item > img { width: 100%; height: 200px; grid-column: 1 / -1; }
  .pending-item .fields { grid-column: 1 / 2; }
  .editor-body { grid-template-columns: 1fr; }
  .fields { grid-template-columns: 1fr 100px; }
}

/* DESIGN / PHOTO 바꾸기 */
.bar-left { display: flex; align-items: center; gap: 18px; }
.section-tabs { display: flex; gap: 4px; }
.section-tabs button { border: 0; background: none; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--muted); }
.section-tabs button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.section-tabs .tab-link { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--muted); text-decoration: none; white-space: nowrap; }
.section-tabs .tab-link:hover { color: var(--ink); }
/* 올릴 작품: 자동으로 읽은 값만 한 줄, 칸은 '고치기'를 눌러야 열림 */
.fields-wrap { display: grid; gap: 8px; align-content: start; }
.auto-summary { margin: 4px 0 0; font-size: 15px; font-weight: 600; }
.more > summary { cursor: pointer; font-size: 13px; color: var(--muted); width: fit-content; }
.more[open] > summary { margin-bottom: 10px; }
.pending-item h2 [data-label], .section-head h2 [data-label] { color: inherit; font-weight: inherit; font-size: inherit; }

/* CODE: 사이트 넣기(이미지 없이 글만) */
.site-add form { background: var(--card); border-radius: 18px; padding: 22px; display: grid; gap: 14px; }
.site-add h2 { margin: 0; font-size: 17px; }
.site-add-foot { display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.site-add-foot .form-msg { margin: 0; }
.site-add-foot button { flex: none; }
.lib-item.site-item { aspect-ratio: 16 / 10; }
.lib-item.song-item { display: block; aspect-ratio: 16 / 9; background: #111; }
.lib-item .noshot { display: grid; place-items: center; height: 100%; padding: 10px; font-size: 13px; color: var(--muted); text-align: center; }
.edit-media { display: grid; gap: 8px; align-content: start; }
.edit-media img:not([src]), .edit-media img[src=""] { display: none; }
@media (max-width: 760px) { .site-add-foot { flex-direction: column; align-items: stretch; } }

/* 분류 고치기 */
.tag-picker .add-tag { background: none; border: 1px dashed #cfcbc1; color: var(--muted); }
.chips .tag-manage { background: none; border: 1px solid var(--line); color: var(--muted); }
.tag-dialog { width: min(560px, 94vw); padding: 22px; }
.tag-dialog-head { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: start; margin-bottom: 14px; }
.tag-dialog-head h2 { margin: 0; font-size: 17px; }
.tag-dialog-head p { grid-column: 1; margin: 0; font-size: 13px; color: var(--muted); line-height: 1.55; }
.tag-dialog-head button { grid-column: 2; grid-row: 1; }
.tag-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.tag-old { font-weight: 600; font-size: 14px; }
.tag-old small { color: var(--muted); font-weight: 400; }

/* 허브 관리자 = 왼쪽 세로 사이드바(2026-10-12 사용자 결정: 허브는 세로, 형제 사이트 관리 화면은 위쪽 가로 메뉴).
   위에서부터 한눈에 · 사이트 관리(늘 펼침) · 공통관리 ▸(접힘) · 관리 화면 없는 사이트 ▸(접힘) … 아래 방문 통계 · Bros.Site ↗ · 재로그인.
   휴대폰은 위쪽 얇은 줄의 ☰로 서랍처럼 연다. */
.hub-app { display: grid; grid-template-columns: 216px minmax(0, 1fr); min-height: 100dvh; }
.hub-app[hidden] { display: none; }
.hub-side { position: sticky; top: 0; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; padding: 16px 10px 12px; background: var(--ink); color: #ffffffb0; z-index: 7; }
.hub-title { margin: 0; padding: 0 8px 14px; font-size: 15px; font-weight: 400; letter-spacing: .01em; white-space: nowrap; color: #ff5b3f; } /* 로고의 빨강: 어두운 바탕에서 읽히게 조금 밝게 */
.hub-title b { font-weight: 800; }
.hub-side :is(button, a) { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; border-radius: 7px; background: none; color: inherit; padding: 7px 8px; text-align: left; text-decoration: none; font: inherit; font-size: 13.5px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.hub-side :is(button, a):hover { color: #fff; }
.hub-side :is(button, a):focus-visible { outline: 2px solid #ff5b3f; outline-offset: -2px; }
.hub-side [aria-current="true"] { background: #ffffff1f; color: #fff; font-weight: 700; }
.hub-side .ic { flex: none; width: 22px; height: 22px; border-radius: 6px; background: #ffffff14; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; }
.hub-side .lab { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hub-side .n { margin-left: auto; flex: none; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; }
.hub-side .ext { margin-left: auto; font-size: 11px; opacity: .55; }
.hub-side .off .lab { opacity: .6; }
.hub-side-head { margin: 12px 8px 3px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #ffffff60; }
.hub-side .hub-grp { margin-top: 10px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #ffffff70; }
.hub-side .hub-grp .n { margin-left: 6px; letter-spacing: 0; }
.hub-side .hub-grp::after { content: ''; order: 3; flex: none; width: 6px; height: 6px; margin: 0 4px 0 auto; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform .15s; }
.hub-side .hub-grp[aria-expanded="true"]::after { transform: rotate(45deg); }
.hub-side-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid #ffffff1a; display: grid; gap: 1px; }
/* 재로그인은 실수로 안 눌리게 위 메뉴와 크게 띄움(2026-10-12 사용자 요청) */
.hub-side-foot #logout { margin-top: 44px; }
.hub-mtop, .hub-dim { display: none; }
.hub-body { min-width: 0; }
.bar { top: 0; }
@media (prefers-reduced-motion: reduce) { .hub-side .hub-grp::after { transition: none; } }
@media (max-width: 720px) {
  .hub-app { display: block; }
  .hub-mtop { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 12px 0 6px; background: var(--ink); color: #fff; }
  .hub-mtop .hub-title { padding: 0; font-size: 14px; }
  .hub-burger { width: 40px; height: 40px; border: 0; background: none; color: #fff; font-size: 20px; padding: 0; }
  .hub-where { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: #ffffffb0; }
  .hub-side { position: fixed; inset: 0 auto 0 0; width: min(260px, 82vw); transform: translateX(-100%); transition: transform .2s; z-index: 30; }
  .hub-app.side-open .hub-side { transform: none; box-shadow: 10px 0 30px #0004; }
  .hub-dim { position: fixed; inset: 0; z-index: 29; border: 0; padding: 0; background: #0005; }
  .hub-app.side-open .hub-dim { display: block; }
  /* 휴대폰: 페이지가 가로로 밀리지 않게(2026-10-11 사용자 지적). 올릴 곳 단추들과 '공개 화면 보기'는 한 덩어리로 줄바꿈 */
  .bar { position: static; flex-wrap: wrap; justify-content: flex-start; gap: 2px 0; padding: 8px 10px; }
  .bar-left, .section-tabs { display: contents; }
  .section-tabs :is(button, .tab-link) { flex: none; padding: 6px 9px; letter-spacing: .04em; }
  .bar nav { margin-left: auto; padding: 0 6px; font-size: 12px; white-space: nowrap; }
  .bar a { margin-right: 0; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) { .hub-side { transition: none; } }

/* 한눈에: 관리자 첫 화면. 관리 화면이 있는 사이트마다 카드(새 문의·오늘 방문·부품 상태), 누르면 그 사이트 관리 화면 */
.board { max-width: 1100px; margin: 0 auto; padding: 28px clamp(16px, 3vw, 40px) 60px; }
.board-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-bottom: 14px; }
.board-head h2 { margin: 0; font-size: 18px; }
.board-head span { color: var(--muted); font-size: 12.5px; }
.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.board-card { display: grid; gap: 8px; align-content: start; padding: 14px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.board-card:hover { border-color: #c9c4b8; }
.board-card .h { display: flex; align-items: center; gap: 8px; min-width: 0; }
.board-card .h b { font-size: 15px; min-width: 0; }
.board-card .h small { margin-left: auto; flex: none; white-space: nowrap; font-size: 11.5px; color: var(--muted); }
.board-card .addr { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.board-card .stat { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--chip); color: var(--muted); }
.pill.ok { background: #e6f2ea; color: var(--ok); }
.pill.warn { background: #fbf1df; color: #a86a12; }
.pill.new { background: #fdeae6; color: var(--accent); }
.pill.live { background: #e7eef8; color: #2d5a8c; }
.board-card .spark { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.board-card .spark i { width: 8px; border-radius: 2px 2px 0 0; background: #d9d5cb; }
.board-card .spark i:last-child { background: var(--ink); }
/* 한눈에 › 방문 요약·안 읽은 문의 */
.board-inbox { margin-bottom: 14px; }
.board-sum { margin-top: 14px; }
.board-sum, .board-inbox { padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.board-wait { margin: 0; color: var(--muted); font-size: 13px; }
.sum-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sum-nums div { display: grid; gap: 2px; min-width: 0; }
.sum-nums span { font-size: 12px; color: var(--muted); }
.sum-nums b { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sum-nums small { font-size: 12px; color: var(--muted); }
.sum-nums small.up { color: var(--ok); }
.sum-nums small.down { color: var(--danger); }
.sum-bars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; align-items: end; margin-top: 16px; }
.sum-bars span { display: grid; justify-items: center; gap: 4px; }
.sum-bars i { width: 100%; max-width: 40px; border-radius: 3px 3px 0 0; background: #d9d5cb; }
.sum-bars span:last-child i { background: var(--ink); }
.sum-bars em { white-space: nowrap; font-style: normal; font-size: 10.5px; color: var(--muted); height: 13px; font-variant-numeric: tabular-nums; }
.sum-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.sum-list { min-width: 0; }
.sum-list h3, .board-inbox h3 { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.sum-list ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.sum-list li { display: flex; gap: 10px; font-size: 13px; }
.sum-list li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sum-list li small { color: var(--muted); font-size: 11.5px; }
.sum-list li b { font-weight: 600; font-variant-numeric: tabular-nums; }
.sum-list p { margin: 0; font-size: 13px; color: var(--muted); }
.sum-more { margin-top: 14px; padding: 7px 12px; font-size: 12.5px; }
.board-inbox { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.board-inbox button { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; font-weight: 400; font-size: 13px; text-align: left; color: var(--ink); }
.board-inbox h3 + button { border-top: 0; }
.board-inbox .who { flex: none; font-weight: 600; color: var(--accent); }
.board-inbox .what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-inbox small { flex: none; color: var(--muted); font-size: 11.5px; }
@media (max-width: 720px) {
  .sum-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .sum-nums b { font-size: 22px; }
  .sum-lists { grid-template-columns: 1fr; gap: 14px; }
  .sum-bars { gap: 2px; }
  .sum-bars em { font-size: 9.5px; }
}
.site-panel { padding: 0; }
.site-frame { display: block; width: 100%; height: 100dvh; border: 0; background: #fff; }
.site-wait { max-width: 560px; margin: 80px auto; padding: 0 20px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.site-wait h2 { margin: 0; font-size: 20px; }
.site-wait p { margin: 0; color: var(--muted); line-height: 1.6; }
.site-wait .actions { margin-top: 8px; flex-wrap: wrap; justify-content: center; }
a.button { display: inline-block; text-decoration: none; color: var(--ink); border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 9px 15px; font-weight: 600; font-size: 14px; }
a.button.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (max-width: 720px) { .site-frame { height: calc(100dvh - 52px); } }

/* 문의: ABOUT 문의하기로 들어온 글 */
.inbox { max-width: 760px; margin: 0 auto; padding: 32px clamp(16px, 3vw, 40px) 80px; display: grid; gap: 12px; }
.inbox h2 { margin: 0 0 8px; font-size: 18px; }
.inbox h2 small { color: var(--muted); font-weight: 500; }
.inbox-empty { color: var(--muted); font-size: 14px; }
.inbox-item { position: relative; background: var(--card); border-radius: 12px; padding: 18px 20px; display: grid; gap: 6px; }
.inbox-item header { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding-right: 64px; }
.inbox-item time { flex: none; font-size: 12px; color: var(--muted); }
.inbox-from { margin: 0; font-size: 13px; color: var(--muted); }
.inbox-from a { color: inherit; }
.inbox-flag { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: #fdecea; color: var(--danger); font-size: 11px; font-weight: 600; }
.inbox-body { margin: 4px 0 0; white-space: pre-wrap; line-height: 1.7; font-size: 14px; }
.inbox-item [data-inbox-delete] { position: absolute; top: 14px; right: 14px; padding: 4px 10px; font-size: 12px; }


/* 그림 고치기 창: 이미지 미리보기를 크게(2026-10-08 사용자 요청). 창을 넓히고 그림 칸을 칸 입력보다 넓게, 세로도 화면 대부분 */
@media (min-width: 900px) {
  .editor { width: min(1320px, 96vw); }
  .editor-body { grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); }
  .editor-body img { max-height: calc(100dvh - 180px); }
}

/* PHOTO 올릴 목록 2단(2026-10-08 사용자 요청: 여러 장 올릴 때 세로로 길어 불편, 한 줄 글은 짧음). 사진을 작게 */
.pending-list.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.two-col .pending-item { grid-template-columns: 120px minmax(0, 1fr) auto; gap: 12px; padding: 10px; }
.two-col .pending-item > img { width: 120px; height: 120px; }
.two-col .pending-item .fields { grid-template-columns: 1fr; }
@media (max-width: 760px) {
  .two-col .pending-item { grid-template-columns: minmax(0, 1fr) auto; }
  .two-col .pending-item > img { width: 100%; height: 120px; }
  .two-col .pending-item .fields label { display: none; } /* 휴대폰은 칸이 좁아 설명 글자를 숨기고 입력 칸만 */
}

/* CODE 새 사이트: 스크린샷 고르기(2026-10-08) */
.sf-shot-row { display: flex; align-items: center; gap: 10px; }
.sf-shot-pick span { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px dashed #cfcbc1; border-radius: 6px; font: 500 13px var(--sans); color: var(--muted); cursor: pointer; white-space: nowrap; }
.sf-shot-pick:hover span { color: var(--ink); border-color: var(--ink); }
.sf-shot-pre { width: 96px; height: 60px; object-fit: cover; object-position: top; border-radius: 4px; border: 1px solid #e3e0d8; }
.sf-shot-x { width: 26px; height: 26px; border: 0; border-radius: 50%; background: #efede7; color: var(--ink); font-size: 11px; cursor: pointer; }
.sf-shot-pre[hidden], .sf-shot-x[hidden] { display: none; }

/* 문의함(2026-10-08 공통 문의창): 사이트별 거르기, 안 읽은 글은 굵게+점, 펼치면 읽음 */
.inbox-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.inbox-chip { padding: 5px 12px; border: 1px solid var(--line, #ddd); border-radius: 999px; background: none; font-size: 13px; cursor: pointer; color: var(--muted); }
.inbox-chip[aria-pressed="true"] { border-color: currentColor; color: inherit; font-weight: 600; }
.inbox-chip b { margin-left: 6px; font-size: 11px; color: var(--danger); }
details.inbox-item summary { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; cursor: pointer; list-style: none; }
details.inbox-item summary::-webkit-details-marker { display: none; }
details.inbox-item summary b { font-weight: 500; word-break: keep-all; }
details.inbox-item.unread summary b { font-weight: 700; }
details.inbox-item.unread summary b::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--danger); vertical-align: 2px; }
details.inbox-item[open] summary { margin-bottom: 6px; }
.inbox-actions { display: flex; gap: 8px; margin-top: 8px; }
.inbox-actions button, .inbox-reply { padding: 5px 12px; font-size: 12px; }
.inbox-reply { border-radius: 8px; background: var(--ink, #1b1b19); color: #fff; text-decoration: none; }
.inbox-actions .danger { margin-left: auto; }

/* CODE 주소 칸 오른쪽 링크 똑딱이(켜면 방문자가 눌러 갈 수 있음) */
.url-row { display: flex; align-items: center; gap: 10px; }
.url-row > input { flex: 1; min-width: 0; }
.link-switch { flex: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; white-space: nowrap; }
.link-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.link-switch .ls-track { position: relative; width: 36px; height: 20px; border-radius: 999px; background: #d6d2c8; transition: background .15s; }
.link-switch .ls-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.link-switch input:checked + .ls-track { background: var(--ink); }
.link-switch input:checked + .ls-track::after { transform: translateX(16px); }
.link-switch input:focus-visible + .ls-track { outline: 2px solid var(--ink); outline-offset: 2px; }
.link-switch .ls-text { font-size: 13px; font-weight: 600; color: var(--muted); }
.link-switch input:checked ~ .ls-text { color: var(--ink); }

/* 한눈에 › YouTube 요약 한 줄(2026-10-12) */
.board-yt { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 10px 26px; width: 100%; margin-top: 14px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; font-weight: 400; text-align: left; }
.board-yt:hover { border-color: #c9c4b8; }
.board-yt .yt-h { display: grid; gap: 2px; }
.board-yt .yt-h b { font-size: 15px; }
.board-yt .yt-h small { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.board-yt .yt-n, .board-yt .yt-v { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 6px; min-width: 0; }
.board-yt .yt-n > span, .board-yt .yt-v > span { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); }
.board-yt .yt-n b { font-size: 20px; font-variant-numeric: tabular-nums; }
.board-yt .yt-v { grid-template-columns: minmax(0, 1fr) auto auto; }
.board-yt .yt-v em { font-style: normal; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-yt .yt-v b { font-size: 13px; font-variant-numeric: tabular-nums; }
.board-yt small.up, .board-yt b.up { color: var(--ok); }
@media (max-width: 900px) { .board-yt { grid-template-columns: repeat(2, minmax(0, 1fr)); } .board-yt .yt-h, .board-yt .yt-v { grid-column: 1 / -1; } }

/* 사이드바 'YouTube' 자세히(youtube.js, 읽기 전용) */
.yt { max-width: 1100px; margin: 0 auto; padding: 28px clamp(16px, 3vw, 40px) 60px; display: grid; gap: 14px; }
.yt-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.yt-head h2 { margin: 0; font-size: 18px; }
.yt-head h2 span { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 6px; }
.yt-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.yt-act button, .yt-act .yt-studio { padding: 7px 12px; font-size: 12.5px; font-weight: 600; line-height: 1.4; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: inherit; text-decoration: none; white-space: nowrap; }
.yt-act .yt-studio:hover { border-color: #cfcbc1; }
/* 폰에서 단추 3개를 한 줄로(2026-10-18 어랍쇼: 갤럭시에서 두 줄로 나뉨). 글자 크기는 그대로, 안쪽 여백만 줄이고 줄을 꽉 채운다. 350px보다 좁으면 글자가 안 들어가 원래대로 줄바꿈 */
@media (min-width: 350px) and (max-width: 520px) {
  .yt-act { flex-wrap: nowrap; gap: 6px; width: 100%; }
  .yt-act button, .yt-act .yt-studio { flex: 1 1 auto; padding: 7px 4px; text-align: center; }
}
@media (min-width: 350px) and (max-width: 380px) {
  .yt-act { gap: 4px; }
  .yt-act button, .yt-act .yt-studio { padding: 7px 2px; }
}
.yt-note { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.yt-note.warn { color: #a86a12; }
.yt-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.yt-nums div { display: grid; gap: 2px; min-width: 0; }
.yt-nums span { font-size: 12px; color: var(--muted); }
.yt-nums b { font-size: 26px; font-variant-numeric: tabular-nums; }
.yt-nums b.sm { font-size: 20px; padding-top: 4px; }
.yt-nums small, .yt-num small { font-size: 12px; color: var(--muted); }
.yt small.up { color: var(--ok); }
.yt-box { padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); min-width: 0; }
.yt-box h3 { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.yt-bars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; align-items: end; }
.yt-bars span { display: grid; justify-items: center; gap: 4px; }
.yt-bars i { width: 100%; max-width: 40px; border-radius: 3px 3px 0 0; background: #d9d5cb; }
.yt-bars span:last-child i { background: var(--ink); }
.yt-bars em { font-style: normal; font-size: 10.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.yt-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.yt-box ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.yt-box li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.yt-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--chip); }
.yt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-thumb em { position: absolute; right: 3px; bottom: 3px; padding: 0 4px; border-radius: 3px; background: #000a; color: #fff; font-style: normal; font-size: 10px; }
.yt-meta { display: grid; gap: 2px; min-width: 0; }
.yt-meta a { color: var(--ink); text-decoration: none; font-size: 13.5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; line-height: 1.35; }
.yt-meta a:hover { text-decoration: underline; }
.yt-meta span { font-size: 11.5px; color: var(--muted); }
.yt-num { display: grid; justify-items: end; gap: 1px; }
.yt-num b { font-size: 14px; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) { .yt-box li { grid-template-columns: 72px minmax(0, 1fr) auto; } .yt-meta a { -webkit-line-clamp: 2; } .yt-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } .yt-nums b { font-size: 22px; } .yt-bars { gap: 2px; } .yt-bars em { font-size: 9px; } }
/* 조회수순 영상 | 조회순 쇼츠 나란히(PC), 좁으면 위아래(2026-10-12 사용자) */
.yt-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.yt-pair .yt-box li { grid-template-columns: 72px minmax(0, 1fr) auto; }
.yt-pair .yt-meta a { -webkit-line-clamp: 2; }
@media (max-width: 900px) { .yt-pair { grid-template-columns: minmax(0, 1fr); } }
.yt-head .yt-run { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--muted); }
/* YouTube 숫자 다섯 칸·새 댓글(2026-10-12) */
.yt-nums { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.yt-cmts { gap: 0 !important; }
.yt-cmts li { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 3px !important; padding: 10px 0; border-top: 1px solid var(--line); }
.yt-cmts li:first-child { border-top: 0; padding-top: 0; }
.yt-cmts .h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13px; }
.yt-cmts .h span { font-size: 11.5px; color: var(--muted); }
.yt-cmts p { margin: 0; font-size: 13.5px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.yt-cmts a { font-size: 12px; color: var(--muted); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yt-cmts a:hover { text-decoration: underline; }
@media (max-width: 1100px) { .yt-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .yt-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.yt-pace { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.yt-pace div { display: grid; gap: 2px; min-width: 0; }
.yt-pace span, .yt-pace small { font-size: 12px; color: var(--muted); }
.yt-pace b { font-size: 18px; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .yt-pace { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .yt-pace { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* PHOTO 여러 장 고르기 → 시리즈 한꺼번에 넣기·빼기(2026-10-12) */
.pick-bar { position: sticky; top: 66px; z-index: 4; box-shadow: 0 6px 18px #0000000f; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -4px 0 14px; padding: 12px 14px; border-radius: 10px; background: var(--chip); font-size: 13px; word-break: keep-all; }
.pick-bar[hidden] { display: none; }
.pick-bar button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 13px; }
.pick-bar button.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.pick-bar button:disabled { opacity: .4; }
.pick-set { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pick-set input { width: 170px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.pick-bar .form-msg { margin: 0; }
.library-grid.picking .lib-item { cursor: copy; }
.library-grid.picking .lib-item::after { content: ''; position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; background: #0003; box-shadow: 0 0 0 1px #0002; }
.library-grid.picking .lib-item.picked { outline: 3px solid var(--accent); outline-offset: -3px; }
.library-grid.picking .lib-item.picked::after { content: '✓'; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; background: var(--accent); border-color: #fff; }
.library-grid.picking .lib-item.picked img { opacity: .8; }
@media (max-width: 640px) {
  .pick-bar { top: 60px; }
  .pick-set { width: 100%; } .pick-set input { flex: 1; min-width: 0; }
  .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } /* 휴대폰도 두 장씩(여러 장 고르기가 편하게) */
}

/* NOTES·DEAL 목록(2026-10-12): CODE 카드와 같은 모양. 누르면 고치기, 휴지통은 마우스를 올리면(inline-admin.js). + 단추 대신 위 '쓰기' 단추 */
.ed-card { cursor: pointer; }
.ed-card .cap small { opacity: .8; }
.ed-card .noshot { padding-bottom: 44px; word-break: keep-all; }
.ed-card > .ia-tools [data-ia="edit"] { display: none; }
body:has(#editor-add:not([hidden])) .ia-add { display: none; }

/* ABOUT(2026-10-12): 공개 ABOUT과 같은 모양 미리보기(about.css)를 흰 칸 대신 공개 화면 바탕색 칸에. 연필·편집 칸은 about.css */
.about-admin { display: grid; gap: 12px; }
.about-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.about-head h2 { margin: 0; font-size: 17px; }
.about-head .form-msg { margin: 0; }
.about-preview {
  --wall: #f3f1ec; --ink: #23221f; --muted: #7d7b75; --faint: #a9a7a0; --line: color-mix(in srgb, #23221f 10%, transparent);
  --sans: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', sans-serif; --serif: 'Nanum Myeongjo', 'AppleMyungjo', 'Noto Serif KR', serif;
  background: var(--wall); border-radius: 18px; padding: 0 clamp(16px, 4vw, 48px); color: var(--ink);
}
.about-preview .about { margin: 0 auto; padding-top: clamp(28px, 5vw, 56px); padding-bottom: 56px; }
.about-preview button, .about-preview input, .about-preview textarea { font-family: var(--sans); }

/* 사이드바 'Facebook'(facebook.js, 2026-10-12): 모양은 YouTube 요약(yt-*)을 같이 쓰고, 연결 안내만 더한다 */
.fb-flash { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--chip); font-size: 13px; line-height: 1.6; word-break: keep-all; }
.fb-flash.ok { color: var(--ok); }
.fb-flash.warn { color: #a86a12; }
.fb-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.fb-steps li { display: grid !important; grid-template-columns: 18px minmax(0, 1fr) !important; gap: 6px !important; align-items: baseline !important; font-size: 13.5px; line-height: 1.5; word-break: keep-all; }
.fb-steps li > span:first-child { color: var(--muted); }
.fb-steps li.done { color: var(--muted); }
.fb-steps li.done > span:first-child { color: var(--ok); }
.fb-go { margin: 16px 0 6px; }
.fb-btn { display: inline-block; padding: 10px 18px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; }
.fb-btn[aria-disabled="true"] { opacity: .35; cursor: not-allowed; }
.fb-paste { margin-top: 12px; font-size: 13px; }
.fb-paste summary { cursor: pointer; color: var(--muted); }
.fb-paste .yt-note { margin: 8px 0; word-break: keep-all; }
.fb-paste-form { display: flex; gap: 6px; }
.fb-paste-form input { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13px; }
.fb-paste-form button { padding: 7px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font: inherit; font-size: 13px; font-weight: 600; }
.fb .fb-thumb { aspect-ratio: 1; }
.fb .yt-box li { grid-template-columns: 56px minmax(0, 1fr) auto; }
.fb-steps small { font-size: 12px; color: var(--muted); }
/* Facebook › 연결된 페이지 · 새 영상 자동 글(2026-10-12) */
.fb .fb-pages ul, .fb .fb-auto-list { margin: 0 0 8px; padding: 0; list-style: none; display: grid; gap: 8px; }
.fb .fb-pages li, .fb .fb-auto-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13.5px; }
.fb .fb-pages li a, .fb .fb-auto-list a { color: inherit; text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb .fb-pages li a:hover, .fb .fb-auto-list a:hover { text-decoration: underline; }
.fb .fb-pages small { margin-left: 4px; color: var(--muted); }
.fb .fb-pages li > span, .fb .fb-auto-list li > span { flex: none; font-size: 12px; color: var(--muted); }
.fb .warn { color: #a86a12; }
.fb-twin .fb-dk { margin-top: 14px; } /* 어제의 똥킹 자동 글: SONG 자동 글 칸 밑에 붙여 둠 */
.fb-auto-form { display: grid; gap: 10px; margin: 0 0 10px; font-size: 13.5px; }
.fb-auto-form label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; word-break: keep-all; }
.fb-auto-form small { color: var(--muted); font-size: 12px; }
.fb-auto-form select, .fb-auto-form input[name="head"] { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font: inherit; font-size: 13px; }
.fb-auto-form input[name="head"] { flex: 1; min-width: 160px; }
.fb-auto-on { font-weight: 600; }
.fb-auto-btns { display: flex; gap: 6px; margin: 0; }
.fb-auto-btns button { padding: 7px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.fb-auto-btns button[type="submit"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.fb-auto .yt-note { word-break: keep-all; }
.fb-auto h3 + .fb-auto-list, .fb-auto h3 + .yt-note { margin-top: 0; }
.fb-auto .yt-note + h3 { margin-top: 14px; }
.fb-auto-form input[type="checkbox"] { width: auto; margin: 0; flex: none; }
.fb-auto-form label { justify-content: flex-start; }
.fb-go .fb-check { margin-left: 10px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.fb-go .fb-check:hover { color: var(--ink); }
/* Facebook 페이지 두 칸(왼쪽 arapshowcom 회사 · 오른쪽 arapshownet 공용, 2026-10-12 사용자) */
/* 두 페이지 두 칸(arapshowcom | arapshownet): 줄마다 높이 맞춤. 좁은 화면은 페이지별로 모은다 */
.fb-twin { display: flex; flex-direction: column; gap: 14px; }
.fb-twin > div { min-width: 0; display: grid; }
.fb-twin .fb-c2 { order: 2; }
.fb-twin .fb-c2 > .fb-title { margin-top: 22px; }
@media (min-width: 1000px) {
  .fb-twin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; }
  .fb-twin .fb-c2 { order: 0; }
  .fb-twin .fb-c2 > .fb-title { margin-top: 0; }
}
@media (min-width: 721px) { .fb-twin .yt-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fb-title .yt-note { word-break: keep-all; }
.fb-title { padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.fb-title h2 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.fb-title h2 small { margin-left: 8px; font-size: 13px; font-weight: 500; color: var(--muted); }
.fb-title p { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13.5px; }
.fb-title p a { color: inherit; text-decoration: none; font-weight: 600; }
.fb-title p a:hover { text-decoration: underline; }
.fb-title p span { color: var(--muted); }
.fb-title .yt-note { margin: 6px 0 0; }
.fb-manage .yt-note { word-break: keep-all; }
.fb-manage .fb-go { margin: 14px 0 10px; }

/* 한눈에 › Bros. 일일보고 한 줄(누르면 사이드바 일일보고로) */
.board-bros { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; width: 100%; margin-top: 14px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; font-weight: 400; text-align: left; }
.board-bros:hover { border-color: #c9c4b8; }
.board-bros b { font-size: 15px; }
.board-bros span { font-size: 13px; min-width: 0; }
.board-bros small { margin-left: auto; font-size: 11.5px; color: var(--muted); white-space: nowrap; }

/* NOTES 관리: 그림 카드 대신 분류별 글 목록(2026-10-12) */
.library-grid.note-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: start; } /* 분류마다 한 단 */
.nl-group h3 { margin: 0 0 4px; padding-bottom: 8px; border-bottom: 1px solid var(--ink, #1b1b19); font-size: 14px; font-weight: 600; }
.nl-group h3 small { margin-left: 4px; font-weight: 400; color: var(--muted); }
.nl-row { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 40px 9px 2px; border-bottom: 1px solid #e8e5dd; }
.nl-row:hover { background: #f6f5f1; }
.nl-main { min-width: 0; flex: 1; display: flex; align-items: center; gap: 10px; }
.nl-main img { flex: none; width: 48px; height: 36px; object-fit: cover; border-radius: 3px; background: var(--chip); } /* 사진 들어간 글은 제목 뒤에 작은 그림(날짜·제목은 왼쪽에 붙여 둔다) */
.nl-text { min-width: 0; flex: 1; }
.nl-main b { display: block; font-weight: 600; font-size: 14px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl-main small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.nl-tags { flex: none; display: flex; gap: 4px; }
.nl-tags em { padding: 0 6px; border: 1px solid #d8d4ca; border-radius: 999px; font-size: 10.5px; line-height: 1.6; font-weight: 500; font-style: normal; color: var(--muted); white-space: nowrap; }
.nl-row.hidden-item .nl-main img { opacity: .4; }
.nl-row.hidden-item .nl-main b { color: var(--muted); }
.nl-row > .ia-tools { top: 50%; right: 4px; transform: translateY(-50%); }
.nl-empty { margin: 0; padding: 12px 2px; font-size: 13px; color: var(--muted); }
@media (max-width: 900px) {
  .library-grid.note-list { grid-template-columns: minmax(0, 1fr); gap: 26px; } /* 좁으면 위아래로 */
}

/* 관리 목록 칸 크기(2026-10-12 사용자): 모든 메뉴 한 줄 최대 6칸(넓은 화면에서 7칸은 너무 작음) */
.library-grid { grid-template-columns: repeat(auto-fill, minmax(max(170px, calc((100% - 60px) / 6)), 1fr)); }
/* CODE·DEAL: 제목이 그림에 겹치지 않게 그림 아래로 */
.library-grid:is([data-section="code"], [data-section="deal"]) .lib-item { display: flex; flex-direction: column; aspect-ratio: auto; overflow: visible; border-radius: 0; background: none !important; }
.library-grid:is([data-section="code"], [data-section="deal"]) .lib-item > img,
.library-grid:is([data-section="code"], [data-section="deal"]) .lib-item > .noshot { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; background: var(--chip); padding-bottom: 10px; }
.library-grid[data-section="deal"] .lib-item > img, .library-grid[data-section="deal"] .lib-item > .noshot { aspect-ratio: 1; }
.library-grid:is([data-section="code"], [data-section="deal"]) .lib-item > img { padding: 0; }
.library-grid:is([data-section="code"], [data-section="deal"]) .lib-item .cap { position: static; padding: 8px 2px 2px; background: none; color: var(--ink); font-size: 13.5px; font-weight: 600; line-height: 1.4; word-break: keep-all; }
.library-grid:is([data-section="code"], [data-section="deal"]) .lib-item .cap small { font-weight: 400; color: var(--muted); opacity: 1; }
.library-grid:is([data-section="code"], [data-section="deal"]) .lib-item.hidden-item .cap { color: var(--muted); }
@media (max-width: 640px) {
  .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* CODE 순서 옮기기(2026-10-14): 칸 아래 작은 ← → */
.site-slot { display: grid; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* 끌어서 옮기기(2026-10-17) */
.site-slot img { -webkit-user-drag: none; pointer-events: none; }
.sorting { cursor: grabbing; }
.site-slot.dragging { opacity: .45; transform: scale(.97); transition: transform .12s; }
.site-slot.dragging .lib-item { outline: 2px dashed var(--ink); outline-offset: 3px; }

/* CODE 고치기: 넘겨 볼 이미지(썸네일 슬라이드, 2026-10-15). 작은 그림 + 오른쪽 위 ✕, 3장 미만이면 + 이미지 */
.sf-extra-row { flex-wrap: wrap; }
.sf-extra-item { position: relative; display: block; }
.sf-extra-item img { display: block; width: 96px; height: 60px; object-fit: cover; object-position: top; border-radius: 4px; border: 1px solid #e3e0d8; }
.sf-extra-item .sf-shot-x { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.sf-extra-msg { margin: 6px 0 0; font: 400 12px/1.5 var(--sans); color: var(--muted); word-break: keep-all; }
/* CODE 이미지 한 줄(2026-10-17): 첫 칸 = 대표 그림, 아래 띠 [대표 · 바꾸기]. [+ 이미지]는 그림 칸과 같은 높이 */
.sf-main img { border-color: var(--ink); }
.sf-main-swap { position: absolute; left: 1px; right: 1px; bottom: 1px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 0 0 3px 3px; background: rgba(20, 20, 20, .66); color: #fff; font: 600 11px var(--sans); white-space: nowrap; cursor: pointer; }
.sf-main-swap:hover { background: rgba(20, 20, 20, .85); }
.sf-extra-row .sf-shot-pick span { height: 60px; }

/* CODE 카테고리(2026-10-17): 목록은 카테고리별 작은 제목, '카테고리 고치기' 창은 ↑↓ · 이름 · 개수 · 바꾸기 · 지우기 */
.lib-group { grid-column: 1 / -1; margin: 14px 0 -4px; font: 600 13px var(--sans); color: var(--ink); }
.lib-group:first-child { margin-top: 0; }
.lib-group small { margin-left: 4px; font-weight: 400; color: var(--muted); }
.cat-row { grid-template-columns: auto minmax(0, 1fr) auto auto auto; }
.cat-row.cat-new { grid-template-columns: minmax(0, 1fr) auto; }
.cat-row small { font: 400 12px var(--sans); color: var(--muted); white-space: nowrap; }
.cat-move { display: inline-flex; gap: 2px; }
.cat-move button { width: 28px; height: 28px; padding: 0; }
.cat-row button[disabled] { opacity: .35; cursor: default; }
#cat-dialog { width: min(620px, 94vw); }
/* CODE '첫 화면 배너 하단 사이드프로젝트' 스위치 옆 개수(1/4) */
.sf-promo b { margin-left: 4px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.sf-promo .link-switch { justify-self: start; }
/* 글자 수(지금/최대): 라벨 끝에 작게, 가득 차면 빨강 */
.len { margin-left: 4px; font: 600 11px var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.len.full { color: #c2410c; }
.link-switch:has(input:disabled) { opacity: .35; cursor: not-allowed; } /* 비공개라 못 켜는 사이드프로젝트 스위치(2026-10-17) */

/* CODE 사이트 넣기·고치기 칸 정리(2026-10-20): 이름표는 한 크기·한 무게, 보조 설명(.hint)은 옅고 가늘게, 칸 사이는 넉넉하고 고르게.
   사이드프로젝트는 이름표 왼쪽·스위치 오른쪽 한 줄, 이미지 안내문은 작고 옅게. 기능·칸은 그대로 */
.site-add form { gap: 20px; }
.site-add .fields { gap: 18px 12px; }
.site-add .fields > div { gap: 7px; }
.site-add .fields > div > label:not(.link-switch):not(.sf-shot-pick):not(.sf-main-swap) { font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--ink); word-break: keep-all; }
.site-add .fields .hint, .tag-dialog .fields .hint, .edit-media .hint { margin-left: 6px; font-weight: 400; font-size: 12px; color: var(--muted); }
.site-add .fields .hint .m-br { display: none; }
.site-add .fields .len { margin-left: 6px; }
.fields .sf-promo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fields .sf-promo .link-switch { justify-self: auto; }
.site-add .sf-extra-msg { margin: 2px 0 0; font-size: 12px; font-weight: 400; line-height: 1.6; color: var(--muted); } /* 옛 규칙이 정의 안 된 var(--sans)라 무시돼 글자가 크게 보이던 것 */
.site-add .len { font-size: 11px; font-weight: 600; }
.site-add-foot { padding-top: 4px; }
.site-add-foot .form-msg { font-size: 12px; line-height: 1.6; word-break: keep-all; }
@media (max-width: 760px) {
  .site-add form { padding: 20px 16px; }
  .site-add .fields .hint { display: block; margin: 1px 0 0; }
  .site-add .fields .hint .m-br { display: inline; }
  .site-add .fields .len { margin-left: 0; }
}
.site-add .fields .sf-promo > label:first-child { flex: 1; min-width: 0; }
.site-add .fields .sf-promo b { white-space: nowrap; }
/* CODE 사이트 넣기: 넓은 화면은 2열(2026-10-20 사용자 "우측 여백이 너무 많다, 짜임새 있게"). 이름|주소 · 한 줄 소개|카테고리 · 표시|사이드프로젝트 · 이미지(한 줄 전체). 좁은 화면은 한 줄씩 그대로 */
@media (min-width: 761px) {
  #site-add form { gap: 16px; }
  #site-add .fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 28px; }
  #site-add .fields > .wide { grid-column: auto; }
  /* 이미지는 오른쪽 아래 두 줄 자리(표시·사이드프로젝트 옆)에 놓아 단추가 혼자 아래로 떨어지지 않게 */
  #site-add .fields > .sf-extra { grid-column: 2; grid-row: 3 / span 2; align-content: start; }
  #site-add .fields > :nth-child(5) { grid-column: 1; grid-row: 3; }
  #site-add .fields > .sf-promo { grid-column: 1; grid-row: 4; align-self: center; min-height: 36px; }
  #site-add .fields .sf-extra-msg { margin: 2px 0 0; }
}

/* CODE 썸네일 왼쪽 아래 '첫 화면' 체크(2026-10-21 사용자: 너무 크다): 글자 없이 작은 네모, 켜면 차례 번호. 썸네일은 16:10이라 칸 폭의 62.5% 높이가 그림 아래 끝 */
.site-slot { position: relative; container-type: inline-size; }
.promo-chk { position: absolute; left: 8px; top: calc(62.5cqw - 28px); width: 20px; height: 20px; padding: 0; box-sizing: border-box; display: grid; place-items: center; border-radius: 5px; border: 1.5px solid #fff; background: #0005; color: #fff; font: 700 11px/1 var(--sans); cursor: pointer; }
.promo-chk:hover { background: #0008; }
.promo-chk.on { background: var(--accent); }
.promo-chk.on::before { content: attr(data-n); }
.promo-chk:disabled { opacity: .5; }