/* Trust 다크 테마 — 사이트 전체 배경·색을 D:\projects\Trust 팔레트로 맞춘다.
   사용자 지시(2026-09-04): "사이트 css 를 기존 트러스트 방식으로 변경해서 배경색을 바꾼다."

   구성(레이아웃·간격·컴포넌트 배치)은 mingo 그대로 두고 **색만** 덮는다.
   mingo.css 는 Tailwind 컴파일 결과라 유틸 클래스가 색을 직접 박아 넣는다.
   그래서 여기서 실제로 쓰이는 유틸만 골라 다시 칠한다(템플릿에서 쓰는 것 전부).
   되돌리려면 base.html 에서 이 파일 한 줄만 빼면 된다.

   원본 팔레트: D:\projects\Trust\templates\index.html
     --bg #070b12 · --panel #0f1723 · --line #22303f · --ink #eaf2fb · --sub #8798ad · --accent #38bdf8 */

:root {
  --t-bg: #070b12;
  --t-panel: #0f1723;
  --t-panel2: #16202f;
  --t-panel3: #1b2637;
  --t-line: #22303f;
  --t-ink: #eaf2fb;
  --t-sub: #8798ad;
  --t-dim: #6b7c93;
  --t-accent: #38bdf8;
  --t-gold: #ffd64a;
}

html { color-scheme: dark; }
body {
  background: radial-gradient(1100px 500px at 50% -10%, #12233d 0%, transparent 60%), var(--t-bg);
  background-attachment: fixed;
  color: var(--t-ink);
}

/* ── 배경 ───────────────────────────────────────────────────────── */
.bg-white { background-color: var(--t-panel) !important; }
.bg-gray-50 { background-color: var(--t-panel) !important; }
.bg-gray-100 { background-color: var(--t-panel2) !important; }
.bg-gray-200 { background-color: var(--t-panel3) !important; }
.bg-gray-300 { background-color: #26364b !important; }
.bg-gray-400 { background-color: #33465e !important; }
.bg-gray-700 { background-color: var(--t-panel2) !important; }
.bg-gray-800 { background-color: var(--t-panel) !important; }
.bg-gray-900 { background-color: #0a1017 !important; }
.bg-gray-900\/90 { background-color: #0a1017e6 !important; }
.hover\:bg-gray-50:hover { background-color: var(--t-panel2) !important; }
.hover\:bg-gray-100:hover { background-color: var(--t-panel3) !important; }
.hover\:bg-gray-200:hover { background-color: #26364b !important; }
.hover\:bg-gray-300:hover { background-color: #2e405a !important; }
.hover\:bg-gray-700:hover { background-color: var(--t-panel3) !important; }
.hover\:bg-gray-800:hover { background-color: var(--t-panel2) !important; }
.bg-yellow-50 { background-color: #2a2312 !important; }
.bg-yellow-100 { background-color: #33290f !important; }
.hover\:bg-yellow-100:hover { background-color: #3d3010 !important; }

/* ── 글자 ───────────────────────────────────────────────────────── */
.text-gray-900, .text-gray-800 { color: var(--t-ink) !important; }
.text-gray-700, .text-gray-600 { color: #b9c6d6 !important; }
.text-gray-500, .text-gray-400 { color: var(--t-sub) !important; }
.text-gray-300 { color: #c8d4e2 !important; }
.hover\:text-gray-900:hover { color: var(--t-ink) !important; }
.hover\:text-gray-700:hover { color: #cfdae7 !important; }
.hover\:text-gray-300:hover { color: var(--t-ink) !important; }
.text-orange-800 { color: #ffd7a4 !important; }
.text-primary-500, .text-primary-600 { color: var(--t-accent) !important; }
.hover\:text-primary-600:hover, .group:hover .group-hover\:text-primary-600 { color: #7dd3fc !important; }

/* ── 선 ─────────────────────────────────────────────────────────── */
.border-gray-100, .border-gray-200, .border-gray-300,
.border-gray-700, .border-gray-800 { border-color: var(--t-line) !important; }
.border-white { border-color: var(--t-line) !important; }

/* 어두운 바탕에서는 짙은 그림자가 보이지 않는다. 대신 테두리로 면을 나눈다. */
.shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xs, .xl\:shadow-lg {
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45) !important;
}

/* ── 내가 얹은 프레임 요소들(frame.css) ─────────────────────────── */
.sec-head h2 { color: var(--t-ink); }
.sec-head .more { color: var(--t-sub); }
.sec-head .more a { color: var(--t-accent); }

a.gcard { background: linear-gradient(180deg, var(--t-panel), #0b111b); border-color: var(--t-line); }
a.gcard:hover { border-color: var(--t-accent); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.gcard .gname { color: var(--t-ink); }
.gcard .gb { border-color: var(--t-line); background: var(--t-panel2); color: var(--t-sub); }
.gcard .gmin { color: var(--t-sub); }
.gcard .gfoot { color: var(--t-sub); border-top-color: var(--t-line); }
.gcard .gfoot b { color: var(--t-accent); }
.gcard .tag { background: var(--t-panel2); color: #cfdae7; }
.gcard .tag.gold { background: #33290f; color: var(--t-gold); }
.gcard .muted { color: var(--t-dim); }
.gcard .plus { color: var(--t-sub); }
.gcard .ball.sm.yellow { background: #c79a1a; color: #1a1300; }
.gcard .ball.sm.blue { background: #2f74e0; }
.gcard .ball.sm.red { background: #e0392a; }
.gcard .ball.sm.green { background: #1d9c55; }
.gcard .ball.sm.power { background: #7c3aed; }

.home-cols .card { background: var(--t-panel); border-color: var(--t-line); }
/* 홈 2단 배치(ntry 식) — 색만 어둡게. 배치는 frame.css 의 .home-wrap 에 있다. */
.home-side .card, .home-main .card { background: var(--t-panel); border-color: var(--t-line); }
.side-login .sl-join { background: #241d0d; border-color: #4a3c17; color: var(--t-gold); }
.side-login .sl-join:hover { border-color: var(--t-gold); }
.side-me .sm-av { background: var(--t-panel2); }
.side-me .sm-who b { color: var(--t-ink); }
.side-me .sm-grade { color: var(--t-sub); }
.side-me .sm-point { background: var(--t-panel2); color: var(--t-sub); }
.side-me .sm-point b { color: var(--t-accent); }
.notice-ticker { background: var(--t-panel); border-color: var(--t-line); }
.notice-ticker .nt-cap { color: var(--t-accent); }
.notice-ticker .nt-roll a { color: #c3d0df; }
.notice-ticker .nt-roll a:hover { color: var(--t-accent); }
.notice-ticker .nt-roll .d { color: var(--t-dim); }
.notice-ticker .nt-more { color: var(--t-sub); }
.notice-ticker .nt-more:hover { color: var(--t-accent); }
.list-lite li { border-bottom-color: #18222f; }
.list-lite .t { color: #c3d0df; }
.list-lite .t:hover { color: var(--t-accent); }
.list-lite .d { color: var(--t-dim); }

#gamemenu-panel { background: var(--t-panel); border-color: var(--t-line);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .6); }
#gamemenu-panel .gm-title { color: var(--t-sub); }
#gamemenu-panel a { color: #c3d0df; }
#gamemenu-panel a:hover { background: var(--t-panel2); color: var(--t-ink); }
#gamemenu-panel a.on { background: #0b2b45; color: var(--t-accent); }
#gamemenu-panel .gb { border-color: var(--t-line); background: var(--t-panel2); color: var(--t-sub); }

/* ── 옛 커뮤니티 페이지(.page-legacy) ───────────────────────────── */
.page-legacy { --line: var(--t-line); --muted: var(--t-sub); }
.page-legacy .card { background: var(--t-panel); }
.page-legacy .btn { background: var(--t-panel2); color: var(--t-ink); }
.page-legacy input, .page-legacy select, .page-legacy textarea,
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="search"], select, textarea {
  background: var(--t-panel2); color: var(--t-ink); border-color: var(--t-line);
}
input::placeholder, textarea::placeholder { color: var(--t-dim); }
table th { color: var(--t-sub); }
table td { color: #c3d0df; }
hr { border-color: var(--t-line); }

/* 스크롤바도 어둡게 (윈도우 크롬) */
* { scrollbar-color: #2b3a4d transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2b3a4d; border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* ── 옛 커뮤니티 조각들 ─────────────────────────────────────────── */
/* 강조색도 Trust 하늘색으로. 예전 살구색은 어두운 배경에서 겉돈다. */
.page-legacy { --accent: var(--t-accent); }
.page-legacy .btn.primary { color: #04121c; }
.tag, .page-legacy .tag { background: var(--t-panel2) !important; color: #c3d0df !important; }
.tag.blue, .page-legacy .tag.blue { background: #10243f !important; color: #9ec5ff !important; }
.tag.red, .page-legacy .tag.red { background: #3a1418 !important; color: #ff9aa4 !important; }
.tag.gold, .page-legacy .tag.gold { background: #33290f !important; color: var(--t-gold) !important; }
.tag.gray, .page-legacy .tag.gray { background: var(--t-panel2) !important; color: var(--t-sub) !important; }

/* 픽스터 방 목록 — site.css 를 걷어낸 뒤 스타일이 없어 맨 목록으로 흘렀다. 최소한만 입힌다. */
.tabnav { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 14px; }
.tabnav a { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--t-line);
  background: var(--t-panel); color: var(--t-sub); font-size: 12px; text-decoration: none; }
.tabnav a:hover { color: var(--t-ink); border-color: var(--t-accent); }
.tabnav a.on { background: #0b2b45; border-color: var(--t-accent); color: var(--t-accent); font-weight: 700; }
.room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
a.room { display: block; background: var(--t-panel); border: 1px solid var(--t-line); border-radius: 12px;
  padding: 13px 15px; text-decoration: none; color: inherit; transition: border-color .12s, transform .12s; }
a.room:hover { border-color: var(--t-accent); transform: translateY(-2px); }
a.room h3 { margin: 0 0 6px; font-size: 14px; font-weight: 800; color: var(--t-ink); }
a.room .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--t-sub); }
a.room .streak { color: var(--t-gold); font-weight: 800; }
.pager { display: flex; gap: 6px; align-items: center; justify-content: center; margin-top: 14px;
  font-size: 13px; color: var(--t-sub); }
.pager a, .pager .on { padding: 5px 11px; border-radius: 8px; border: 1px solid var(--t-line);
  background: var(--t-panel); text-decoration: none; color: inherit; }
.pager .on { color: var(--t-accent); border-color: var(--t-accent); font-weight: 700; }

/* 실시간 채팅 (홈) — 8행까지만 보이고 그 위는 스크롤한다(20 → 15 → **8**, 2026-09-06 사용자 지시).
   site.css 에 있던 `.chat{height:320px}` 는 base.html 이 site.css 를 **불러오지 않아** 적용된 적이 없다.
   그래서 메시지가 쌓이는 대로 카드가 끝없이 길어졌다(사용자 지적, 2026-09-05).
   행 수를 바꾸려면 --chat-rows 만 고친다. 줄바꿈된 긴 메시지는 2행을 차지한다. */
.chat { display: flex; flex-direction: column; }
.chat-log { --chat-rows: 8; --chat-row: 24px;
  height: calc(var(--chat-rows) * var(--chat-row));
  overflow-y: scroll; overscroll-behavior: contain; padding-right: 4px;
  scrollbar-width: thin; scrollbar-color: var(--t-line) transparent; }
.chat-log { font-size: 13px; }
.chat-log .m { line-height: 20px; padding: 2px 0; }
/* 닉네임·본문 색. 이 규칙도 죽은 site.css 에만 있어서 이름과 본문이 붙어 보였다(2026-09-05). */
.chat-log .m .n { font-weight: 700; color: var(--t-accent); margin-right: 6px; }
.chat-log .m .b { color: #c3d0df; }
.chat-log .m.hot .b { color: #ffb26b; font-weight: 700; }
.chat-log .m.legend .b { color: #ff9aa4; font-weight: 800; }
/* 스크롤바를 늘 보이게 둔다 — 위로 거슬러 읽을 수 있다는 것이 보여야 한다.
   최근 100줄까지만 남는다(community/views.py 초기 100줄 + site.js 의 CHAT_MAX). */
.chat-log::-webkit-scrollbar { width: 8px; }
.chat-log::-webkit-scrollbar-track { background: var(--t-panel2); border-radius: 8px; }
.chat-log::-webkit-scrollbar-thumb { background: #2f4257; border-radius: 8px; }
.chat-log::-webkit-scrollbar-thumb:hover { background: #3d566f; }

/* 위 frame.css 에서 새로 살린 조각들의 어두운 배색 (2026-09-05) */
.page-legacy .err { color: #ff9aa4; font-size: 12px; margin-top: 4px; }
.page-legacy .grade { background: #33290f; color: var(--t-gold); border: 1px solid #4a3c17; }
.page-legacy .errpage .code { color: var(--t-line); }
.page-legacy .errpage p { color: var(--t-sub); }

/* 홈 카드의 주기 칩(2·3·5분) — 밝은 기본색 그대로 두면 흰 상자가 뜬다. */
.gcard .gper span { background: #0e1522; border-color: var(--t-line); color: #7c8ba1; }
.gcard .gper span:hover { background: #162030; border-color: #26354b; color: #e6edf6; }
.gcard .gper span.on { background: #12233d; border-color: #1e3a68; color: #9dc4ff; }
.gm-row .gm-name { color: #c3d0df; }
.gm-row.on { background: #12233d; }
.gm-row.on .gm-name { color: #9dc4ff; }
#gamemenu-panel .gm-per a, #gnavMobile .gm-per a { background: #0e1522; border-color: var(--t-line);
  color: #7c8ba1; }
#gamemenu-panel .gm-per a:hover, #gnavMobile .gm-per a:hover { background: #16202f; color: #e6edf6; }
#gamemenu-panel .gm-per a.on, #gnavMobile .gm-per a.on { background: #1d4ed8; border-color: #1d4ed8;
  color: #fff; }