@charset "utf-8"; /* ══════════════════════════════════════════════════════════════════════════ mtgal-ui.css — 폰트 교체(Noto Sans KR) + 다크모드 2026-08-16 ───────────────────────────────────────────────────────────────────────── 설계 원칙: 밝은 테마의 기존 모습은 한 픽셀도 건드리지 않는다. · 폰트만 전역 교체 · 다크모드 규칙은 전부 [data-theme="dark"] 안에서만 적용 · 따라서 다크모드를 끄면 지금과 완전히 동일하다 되돌리기: head.sub.php 의 mtgal-ui 블록을 지우면 끝. 이 파일만 지워도 무해. ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════ 0. 디자인 토큰 2026-08-16 ──────────────────────────────────────────────────────────────────────── 테마 원본(theme.css 43KB)에는 CSS 변수가 0개다. 색이 파일 곳곳에 하드코딩돼 있어 브랜드 색 하나 바꾸는 데도 전수 검색이 필요했다. 여기서부터는 값을 직접 쓰지 말고 토큰을 참조한다. 접두어 --mt- 는 우리 것이라는 표시다. 테마·부트스트랩 변수와 겹치지 않는다. 다크모드는 같은 토큰을 재정의하는 방식이라, 컴포넌트 CSS는 한 벌만 있으면 된다. ══════════════════════════════════════════════════════════════════════════ */ :root { /* ── 브랜드 파랑 — 기존 #007bff 를 기준으로 명도 단계를 폈다 ── */ --mt-blue-50: #E8F2FF; --mt-blue-100: #CCE4FF; --mt-blue-200: #99C9FF; --mt-blue-300: #66AFFF; --mt-blue-400: #3394FF; --mt-blue-500: #1A87FF; --mt-blue-600: #007BFF; --mt-blue-700: #0062CC; --mt-blue-base:#007BFF; /* 테마 원본 색 — 기존 요소와 이어 붙일 때 */ /* ── 중립 — 파랑 쪽으로 아주 살짝 기울여 브랜드와 어울리게 ── ★ 밝은 테마 가독성 손질 2026-08-17 "회색 글자 때문인지 회색 박스 때문인지 눈에 잘 안 들어온다". 실제로 재 보니 흐린 글자 두 단계가 기준(4.5:1) 언저리거나 아래였다. ink-500 #64748B 4.8:1 ← 날짜·조회수 같은 곁글 ink-400 #94A3B8 2.6:1 ← 기준 미달. 작은 글씨라 더 안 보인다 여기서 한 단계씩 내리면 그 색을 쓰는 66곳·25곳이 한 번에 좋아진다. ink-500 → #52627A 6.1:1 ink-400 → #6B7A90 4.6:1 (기준 통과) 짙은 글자(900/700)는 이미 10:1 이상이라 그대로 둔다. ★ 회색 상자도 같이 손봤다 ink-50(상자 바닥)이 회색기가 돌아 흰 바닥 위에서 뿌옇게 겹쳐 보였다. 바닥은 흰색에 가깝게 올리고, 대신 테두리(ink-100)를 한 톤 진하게 해 '회색으로 칠한 상자'가 아니라 '선으로 그은 상자'로 읽히게 한다. */ --mt-ink-900: #0F172A; --mt-ink-800: #1E293B; --mt-ink-700: #334155; --mt-ink-600: #475569; --mt-ink-500: #52627A; /* was #64748B — 대비 4.8 → 6.1 */ --mt-ink-400: #6B7A90; /* was #94A3B8 — 대비 2.6 → 4.6 */ --mt-ink-300: #CBD5E1; --mt-ink-200: #E2E8F0; --mt-ink-100: #E3E9F1; /* was #EEF2F6 — 상자 테두리를 또렷하게 */ --mt-ink-50: #FBFCFE; /* was #F7F9FB — 상자 바닥의 회색기를 뺀다 */ /* ── 의미색 ── */ --mt-danger: #DC3545; /* 테마가 쓰던 값 유지 */ --mt-success: #12805C; --mt-warn: #B4690E; /* ── 표면·선·글자 (컴포넌트는 이 다섯만 쓰면 된다) ── */ --mt-bg: #FFFFFF; --mt-surface: #FFFFFF; --mt-surface-2: var(--mt-ink-50); --mt-line: var(--mt-ink-200); --mt-line-soft: var(--mt-ink-100); --mt-text: var(--mt-ink-900); --mt-text-sub: var(--mt-ink-700); --mt-text-dim: var(--mt-ink-500); --mt-text-mute: var(--mt-ink-400); --mt-primary: var(--mt-blue-600); --mt-primary-h: var(--mt-blue-700); --mt-focus: rgba(37,99,235,.14); /* ── 라운드 ── */ --mt-r-xs: 6px; --mt-r-sm: 10px; --mt-r-md: 12px; --mt-r-lg: 14px; --mt-r-xl: 18px; --mt-r-pill: 999px; /* ── 그림자 — 흰 배경에서 영역을 가르는 용도 ── */ --mt-sh-xs: 0 1px 2px rgba(15,23,42,.05); --mt-sh-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06); --mt-sh-md: 0 2px 4px rgba(15,23,42,.04), 0 10px 24px -8px rgba(15,23,42,.16); --mt-sh-lg: 0 4px 8px rgba(15,23,42,.04), 0 18px 40px -12px rgba(15,23,42,.20); /* ── 모션 ── */ --mt-ease: cubic-bezier(.22,.61,.36,1); --mt-t-fast: .12s var(--mt-ease); --mt-t: .2s var(--mt-ease); /* ── 입력 요소 공통 치수 (검색·회원가입·게시판이 같은 값을 쓴다) ── */ --mt-field-h: 46px; --mt-field-h-mo: 48px; --mt-field-r: var(--mt-r-sm); } /* ── 다크모드: 같은 토큰만 갈아끼운다 ── 컴포넌트 CSS 를 다시 쓰지 않아도 되는 게 이 구조의 핵심이다. */ :root[data-theme="dark"] { --mt-bg: #0F1418; --mt-surface: #171D23; --mt-surface-2: #1F262E; --mt-line: #2B333C; --mt-line-soft: #232A31; /* 2026-08-16 상향 — "다크모드에서 글자가 회색이라 잘 안 보인다" 제보. WCAG 대비는 원래도 통과했지만(dim 6.4, mute 4.4) 눈에는 흐렸다. 본문에까지 dim 이 쓰이는 곳이 많아 전체가 회색으로 읽혔던 것. 토큰 하나로 283개 규칙이 같이 올라가므로 여기만 고친다. text 14.4 → 16.1 sub 10.5 → 13.2 dim 6.4 → 8.6 mute 4.4 → 5.9 (surface 기준) */ --mt-text: #EAF0F7; --mt-text-sub: #D6DFE9; --mt-text-dim: #BAC4D0; --mt-text-mute: #98A4B0; --mt-primary: var(--mt-blue-400); --mt-primary-h: var(--mt-blue-300); --mt-focus: rgba(96,165,250,.20); --mt-sh-xs: 0 1px 2px rgba(0,0,0,.4); --mt-sh-sm: 0 1px 3px rgba(0,0,0,.45); --mt-sh-md: 0 10px 24px -8px rgba(0,0,0,.6); --mt-sh-lg: 0 18px 40px -12px rgba(0,0,0,.7); } /* ── 1. 한글 서체 ────────────────────────────────────────────────────────── */ /* 실제 @font-face 선언은 notosanskr.css 에 있다(124조각, 가변폰트). head.sub.php 에서 이 파일보다 먼저 불러온다. Pretendard 에서 갈아탄 이유와 되돌리는 법은 그 파일 머리말에 적어 두었다. */ /* 테마 폰트 CSS 가 body 에 !important 를 걸어놔서 여기서도 필요하다. fontawesome 은 아이콘 폰트라 반드시 제외해야 한다(제외 안 하면 아이콘이 깨진다). */ /* 아래 선택자 목록은 테마 폰트 CSS(css/font/pc-NexonLv2Gothic.css)가 NEXON Lv2 Gothic 을 !important 로 거는 곳을 **하나도 빠짐없이** 덮어야 한다. 하나라도 빠지면 그 요소 때문에 브라우저가 NEXON woff2(118KB)를 실제로 받아온다. — 쓰지도 않을 한글 폰트를 통째로 내려받는 셈이라 낭비가 크다. 테마 쪽 대상: body / .f-md / .f-mo / .f-lg / .f-xl / h1~h6, .en 폰트 CSS 자체는 글자 크기·행간도 정하므로 지우면 안 된다. font-family 만 덮는다. */ body, body .f-de, button, input, select, textarea, optgroup, .btn, .form-control, .custom-select, h1, h2, h3, h4, h5, h6, .f-md, .f-mo, .f-lg, .f-xl, .en, .na-subject, .na-title, .na-info { /* 2026-08-17: Noto Sans KR → Pretendard. Pretendard 는 한글 자소가 조금 더 크고 자간이 좁아 같은 크기에서 더 또렷하게 읽힌다. 못 받았을 때를 대비해 뒤쪽 대체 목록은 그대로 둔다. */ font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Malgun Gothic', sans-serif !important; } /* 아이콘은 따로 손대지 않는다. · Font Awesome 은 .fa 에 자기 font-family 를 직접 걸어두므로 상속보다 우선한다 (여기서 !important 로 덮으면 .btn.fa 같은 조합에서 글자가 아이콘폰트로 깨진다) · 나리야 .na-icon / .qnaIco 는 폰트가 아니라 background-image 다 — 무관하다 · .na-text 는 11px 배지라 dotum 그대로 둔다. 본문 서체로 바꾸면 폭이 넘친다 */ /* 한글은 자간을 아주 살짝 조이면 덩어리감이 좋아진다. */ body { letter-spacing: -0.01em; } /* 굵기는 서체 기본(400)을 그대로 쓴다. Pretendard 시절 얇아 보여 500 으로 올렸던 블록은 서체를 바꾸면서 지웠다 — Noto Sans KR 은 400 에서도 획이 충분히 굵다. */ /* ── 2. 다크모드 ────────────────────────────────────────────────────────── */ /* 색은 전부 변수로 두어 나중에 한 곳에서 조정할 수 있게 했다. (기존 테마는 43KB CSS 에 색이 흩어져 있어 손대기 어렵다) */ :root[data-theme="dark"] { --mt-bg: #15181c; /* 페이지 바닥 */ --mt-surface: #1c2026; /* 카드·목록 등 올라온 면 */ --mt-surface-2: #232830; /* 한 겹 더 올라온 면(헤더·입력창) */ --mt-border: #2e343d; --mt-text: #dce1e8; --mt-text-dim: #98a3b2; --mt-text-mute: #7b8695; --mt-primary: #4d9bff; /* 원래 #007bff 는 어두운 배경에서 대비가 모자람 */ --mt-danger: #ff6b6b; --mt-shadow: rgba(0,0,0,.45); } /* 바탕 */ :root[data-theme="dark"] body, :root[data-theme="dark"] .wrapper, :root[data-theme="dark"] #wrapper { background-color: var(--mt-bg) !important; color: var(--mt-text) !important; } /* 흰 면들 → 표면색으로. 이 사이트는 bg-white 를 카드처럼 쓴다. */ :root[data-theme="dark"] .bg-white, :root[data-theme="dark"] .bg-light, :root[data-theme="dark"] .card, :root[data-theme="dark"] .list-group-item, :root[data-theme="dark"] .dropdown-menu, :root[data-theme="dark"] .modal-content, :root[data-theme="dark"] .popover, :root[data-theme="dark"] .toast, /* ★ .nt-container 는 여기서 뺐다. 2026-08-18 이건 카드가 아니라 **배치용 감싸개**다. 본문 칸과 사이드 칸을 둘 다 품고 있어서, 여기에 표면색을 칠하면 두 칸이 한 덩어리 상자처럼 보인다 ("사이드랑 컨텐츠가 한 박스처럼 보인다" 의 원인). 감싸개는 투명하게 두고, 그 위에 놓인 카드·위젯만 표면색을 갖게 한다. */ /* ★ .na-item 은 여기서 뺐다. 2026-08-18 이건 카드가 아니라 **목록 한 줄 안의 제목 묶개**다. 여기에 표면색을 칠하면 줄 배경(공지줄은 옅은 파란 틴트) 위에 어두운 상자가 덧그려져, 공지사항 줄에 검은 띠가 그어진 것처럼 보인다. 묶개는 투명하게 두고 줄 배경이 그대로 비치게 한다. */ :root[data-theme="dark"] .na-item { background-color: transparent !important; } :root[data-theme="dark"] .bg-white, :root[data-theme="dark"] .bg-light, :root[data-theme="dark"] .card, :root[data-theme="dark"] .list-group-item, :root[data-theme="dark"] .dropdown-menu, :root[data-theme="dark"] .modal-content, :root[data-theme="dark"] .popover, :root[data-theme="dark"] .toast { background-color: var(--mt-surface) !important; color: var(--mt-text) !important; } /* 헤더·메뉴는 한 겹 더 밝게 해서 층이 보이게 */ /* ★ 여기 있던 요소 선택자 `header` 를 뺐다.
는 사이트 상단만이 아니라 글 제목(bo_v_title)·댓글 등 본문 안에도 쓰인다. 그래서 다크모드에서 글 제목 뒤에 회색 상자가 생겼다(.me-li 때와 같은 실수다). 사이트 헤더는 id 로 콕 집는다. */ :root[data-theme="dark"] #header_pc, :root[data-theme="dark"] #header_mo, :root[data-theme="dark"] .navbar, :root[data-theme="dark"] .nt-header, :root[data-theme="dark"] .nt-menu, :root[data-theme="dark"] .me-li, :root[data-theme="dark"] .table thead th { background-color: var(--mt-surface-2) !important; color: var(--mt-text) !important; } /* 글자 */ :root[data-theme="dark"] .text-dark, :root[data-theme="dark"] .text-body, :root[data-theme="dark"] .text-black, :root[data-theme="dark"] .na-subject, :root[data-theme="dark"] .me-a, :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4, :root[data-theme="dark"] h5, :root[data-theme="dark"] h6 { color: var(--mt-text) !important; } :root[data-theme="dark"] .text-muted, :root[data-theme="dark"] .na-info, :root[data-theme="dark"] .text-secondary, :root[data-theme="dark"] small { color: var(--mt-text-mute) !important; } /* 링크 */ :root[data-theme="dark"] a { color: var(--mt-text); } :root[data-theme="dark"] a:hover { color: var(--mt-primary); } :root[data-theme="dark"] .text-primary, :root[data-theme="dark"] a.text-primary { color: var(--mt-primary) !important; } /* 선 */ :root[data-theme="dark"] .border, :root[data-theme="dark"] .border-top, :root[data-theme="dark"] .border-bottom, :root[data-theme="dark"] .border-left, :root[data-theme="dark"] .border-right, :root[data-theme="dark"] .na-line, :root[data-theme="dark"] .dropdown-divider, :root[data-theme="dark"] hr, :root[data-theme="dark"] .table td, :root[data-theme="dark"] .table th, :root[data-theme="dark"] .list-group-item { border-color: var(--mt-border) !important; } /* 입력 요소 — 밝은 채로 남으면 제일 눈에 띈다 */ :root[data-theme="dark"] .form-control, :root[data-theme="dark"] .custom-select, :root[data-theme="dark"] input[type="text"], :root[data-theme="dark"] input[type="password"], :root[data-theme="dark"] input[type="search"], :root[data-theme="dark"] input[type="email"], :root[data-theme="dark"] input[type="tel"], :root[data-theme="dark"] input[type="number"], :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { background-color: var(--mt-surface-2) !important; border-color: var(--mt-border) !important; color: var(--mt-text) !important; } :root[data-theme="dark"] .form-control::placeholder, :root[data-theme="dark"] textarea::placeholder { color: var(--mt-text-mute) !important; } :root[data-theme="dark"] .form-control:focus { border-color: var(--mt-primary) !important; box-shadow: 0 0 0 .2rem rgba(77,155,255,.25) !important; } /* 버튼 */ :root[data-theme="dark"] .btn-light, :root[data-theme="dark"] .btn-outline-secondary, :root[data-theme="dark"] .btn-secondary { background-color: var(--mt-surface-2) !important; border-color: var(--mt-border) !important; color: var(--mt-text) !important; } :root[data-theme="dark"] .btn-primary { border-color: var(--mt-primary) !important; } /* 표 줄무늬·호버 */ :root[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd), :root[data-theme="dark"] .table-hover tbody tr:hover, :root[data-theme="dark"] .list-group-item-action:hover, :root[data-theme="dark"] .na-item:hover { background-color: var(--mt-surface-2) !important; } /* 사이드 위젯도 스스로 표면색을 갖게 한다. theme.css 의 .main_sd_list 는 테두리만 있고 배경이 없다. 지금까지는 위 .nt-container 배경에 얹혀 카드처럼 보였는데, 그 배경을 뺐으니 여기서 직접 칠해 줘야 한다. */ :root[data-theme="dark"] .main_sd_list { background-color: var(--mt-surface) !important; border-color: var(--mt-line) !important; } /* 그림자는 어두운 배경에서 안 보이므로 더 진하게 */ :root[data-theme="dark"] .shadow, :root[data-theme="dark"] .shadow-sm, :root[data-theme="dark"] .card { box-shadow: 0 .125rem .5rem var(--mt-shadow) !important; } /* 이미지·배너는 그대로 두되 아주 살짝 눌러 눈부심만 줄인다. 광고 배너의 색을 바꾸면 광고주 자산을 훼손하는 것이라 밝기만 건드린다. */ :root[data-theme="dark"] img:not(.no-dim) { filter: brightness(.92); } /* 코드·인용 */ :root[data-theme="dark"] pre, :root[data-theme="dark"] code, :root[data-theme="dark"] blockquote { background-color: var(--mt-surface-2) !important; color: var(--mt-text) !important; } /* 에디터 iframe 은 부모 CSP·CSS 를 물려받지 않는다. 건드리지 않는다. (2026-08 에 CSP 로 에디터를 죽인 전례가 있다) */ /* ── 3. 전환 버튼 ───────────────────────────────────────────────────────── */ /* ★ 위치를 왼쪽 아래에서 오른쪽 아래로 옮겼다. 2026-08-17 모바일(767px 이하)에서 알림 버튼이 #nt_sidebar_noti{left:0;bottom:25px} 라서 정확히 같은 자리였다 — 두 개가 겹쳐 눌렸다. 오른쪽 아래는 '맨 위로' 버튼이 쓰는 자리인데, 그건 스크롤해야 나타났다 사라지는 버튼이다. 나타났다 사라지는 쪽을 기준으로 삼으면 전환 버튼이 같이 움직여 보이므로, 항상 있는 전환 버튼을 맨 아래에 고정하고 '맨 위로' 쪽을 한 칸 위로 올렸다(바로 아래 #nt_sidebar_move 규칙). */ .mt-theme-toggle { position: fixed; right: 25px; bottom: 20px; z-index: 1030; /* 공지 팝업(1035)보다 아래 */ width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); background: #fff; color: #333; font-size: 17px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.18); transition: transform .15s ease, background-color .15s ease; padding: 0; } /* '맨 위로'·'맨 아래로' 를 전환 버튼 위로 올린다. 위젯 CSS(widget/sidebar/widget.css)를 고치지 않고 여기서 덮는다 — 위젯은 나리야 것이라 업데이트하면 되돌아간다. 42px(버튼) + 20px(원래 아래 여백) + 10px(간격) = 72px */ #nt_sidebar_move { bottom: 72px !important; } .mt-theme-toggle:hover { transform: scale(1.06); } .mt-theme-toggle:focus-visible { outline: 2px solid #4d9bff; outline-offset: 2px; } :root[data-theme="dark"] .mt-theme-toggle { background: var(--mt-surface-2); color: #ffd166; border-color: var(--mt-border); box-shadow: 0 2px 10px rgba(0,0,0,.5); } @media (prefers-reduced-motion: reduce) { .mt-theme-toggle { transition: none; } .mt-theme-toggle:hover { transform: none; } } /* ══════════════════════════════════════════════════════════════════════════ 4. 게시판 목록 정리 (/top/mt) 2026-08-16 ──────────────────────────────────────────────────────────────────────── 원래 스킨은 .na-subject 에 text-overflow:unset / white-space:unset 을 걸어 제목이 2~3줄로 늘어났다. 제목 텍스트가 감싸는 태그 없이 맨몸으로 있어서 CSS 만으로는 잡을 수 없었기에 스킨에서 .mt-subject-text 로 감쌌다. ══════════════════════════════════════════════════════════════════════════ */ /* 제목 줄이 늘어나지 않게 셀 자체를 한 줄로 고정 */ #bo_list .na-title .na-subject > .na-table > div { white-space: nowrap; overflow: hidden; } /* 제목만 말줄임 — 뒤에 붙는 댓글수는 줄어들지 않게 한다 */ #bo_list .na-title .na-subject .mt-subject-text { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } /* ★ 댓글수가 제목 뒤가 아니라 칸 오른쪽 끝으로 밀리던 문제 2026-08-17 앞서는 제목에 max-width:calc(100% - 3.2rem) 로 **자리를 미리 비워** 뒀다. 그런데 그 3.2rem 은 댓글수가 한 자리든 세 자리든 늘 같은 폭이라, 짧은 숫자일 때는 제목과 숫자 사이에 빈 공간이 그대로 남았다. 자리를 재는 대신 flex 로 '제목은 남는 만큼만, 숫자는 제 폭만큼' 나눈다. 제목 flex: 0 1 auto + min-width: 0 → 모자랄 때만 줄며 말줄임 숫자·아이콘 flex: 0 0 auto → 절대 안 줄어듦 ★ 칸 전체가 아니라 .mt-subject-line 만 flex 인 이유 모바일에서는 이 칸에 사이트명·주소 줄이 하나 더 들어간다. 칸을 통째로 flex 로 만들면 그 줄이 제목 옆에 붙고, 줄바꿈을 허용하면 이번엔 댓글수가 아래로 떨어진다. 그래서 스킨에서 제목줄만 따로 감쌌다. */ #bo_list .na-title .na-subject .mt-subject-line { display: flex; align-items: center; column-gap: .3rem; min-width: 0; max-width: 100%; } #bo_list .na-title .na-subject .mt-subject-line > .mt-subject-text { flex: 0 1 auto; min-width: 0; } #bo_list .na-title .na-subject .mt-subject-line > .na-icon, #bo_list .na-title .na-subject .mt-subject-line > .na-hicon, #bo_list .na-title .na-subject .mt-subject-line > .count-plus { flex: 0 0 auto; } /* 사이트 주소 칸 — PHP 에서 16자로 자르고, 그래도 넘치면 CSS 로 한 번 더 */ #bo_list #mttip_site_name_wrap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ══════════════════════════════════════════════════════════════════════════ 5. 검색창 — 헤더 아래로 내려오는 패널 2026-08-16 ──────────────────────────────────────────────────────────────────────── 기존: 화면 전체를 검게 덮는 오버레이(theme.css:193, rgba(0,0,0,.85)). 마크업 구조를 정확히 알고 짜야 한다 — 닫기 버튼이 폼 안이 아니라 형제다: #nt_search > .closebtn (먼저 나옴, 원래 float:right) #nt_search > .tcontent > form > input + button 그래서 .closebtn 은 절대배치로 오른쪽 끝에 고정하고, 폼이 남은 폭을 쓴다. 원복: 이 절만 지우면 원래 전체화면 방식으로 돌아간다(마크업 무손상). ══════════════════════════════════════════════════════════════════════════ */ #nt_search { position: fixed; top: 0; /* JS 가 헤더 높이에 맞춰 다시 잡는다 */ left: 0; right: 0; width: 100%; height: auto; background: #fff !important; background-color: #fff !important; border-bottom: 1px solid #e7ebf0; box-shadow: 0 12px 28px rgba(16,24,40,.12); z-index: 1040; /* 공지 팝업(1035)·다크모드 버튼(1030) 위 */ padding: 0; animation: mtSearchDrop .16s cubic-bezier(.2,.7,.3,1); } @keyframes mtSearchDrop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { #nt_search { animation: none; } } /* 입력 영역 — 가운데 정렬. 오른쪽은 닫기 버튼 자리를 비워둔다 */ #nt_search .tcontent { position: static; top: auto; width: 100%; max-width: 680px; margin: 0 auto; padding: 1rem 1rem; text-align: left; } #nt_search form { display: flex; align-items: center; gap: .5rem; margin: 0; } #nt_search input[type="text"] { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 1rem; font-size: 1.02rem; line-height: 48px; color: #111827; background: #f4f6f9; border: 1px solid #e3e8ef; border-radius: 12px; outline: none; transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease; } #nt_search input[type="text"]:focus { background: #fff; border-color: #007bff; box-shadow: 0 0 0 3px rgba(37,99,235,.14); } #nt_search input[type="text"]::placeholder { color: #9aa4b2; } #nt_search button[type="submit"] { flex: 0 0 auto; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: filter .12s ease; } #nt_search button[type="submit"]:hover { filter: brightness(1.08); } #nt_search button[type="submit"] i { font-size: 1.05rem; } /* 닫기 — 패널 오른쪽 끝에 조용히 */ #nt_search .closebtn { position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); width: 36px; height: 36px; line-height: 36px; text-align: center; font-size: 20px; font-weight: 400; color: #98a2b3; background: transparent; border-radius: 10px; cursor: pointer; transition: background-color .12s ease, color .12s ease; } #nt_search .closebtn:hover { background: #f1f3f7; color: #111827; } /* 뒤 화면은 살짝 눌러 초점을 준다. 클릭하면 닫힌다 */ #mt-search-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.32); z-index: 1039; display: none; } @media (max-width: 575.98px) { #nt_search .tcontent { padding: .8rem .75rem; padding-right: 3rem; } #nt_search .closebtn { right: .5rem; } #nt_search input[type="text"] { height: 44px; line-height: 44px; font-size: .98rem; } #nt_search button[type="submit"] { width: 44px; height: 44px; } } /* ── 다크모드 ── */ :root[data-theme="dark"] #nt_search { background: var(--mt-surface-2) !important; background-color: var(--mt-surface-2) !important; border-bottom-color: var(--mt-border); box-shadow: 0 12px 28px rgba(0,0,0,.55); } :root[data-theme="dark"] #nt_search input[type="text"] { background: var(--mt-bg); border-color: var(--mt-border); color: var(--mt-text); } :root[data-theme="dark"] #nt_search input[type="text"]:focus { border-color: var(--mt-primary); box-shadow: 0 0 0 3px rgba(77,155,255,.20); } :root[data-theme="dark"] #nt_search .closebtn { color: var(--mt-text-dim); } :root[data-theme="dark"] #nt_search .closebtn:hover { background: var(--mt-surface); color: var(--mt-text); } /* ══════════════════════════════════════════════════════════════════════════ 5-1. 게시판 검색폼 — 위쪽 여백 2026-08-16 ──────────────────────────────────────────────────────────────────────── 래퍼에 mb-3 만 있고 위쪽 여백이 없어 앞 요소에 붙어 있었다. 같은 마크업이 스킨 8개에 흩어져 있어 파일마다 고치지 않고 CSS 로 잡는다. ══════════════════════════════════════════════════════════════════════════ */ #bo_search > .alert:has(#fsearch), #new_search > .alert:has(#fsearch) { margin-top: 1rem; } /* :has() 미지원 브라우저용 보조 — 이 클래스 조합은 검색폼 래퍼에만 쓰인다 */ #bo_search > .alert.bg-light.border.mx-3.mx-sm-0 { margin-top: 1rem; } /* ══════════════════════════════════════════════════════════════════════════ 6. 새글·새댓글 목록(/bbs/new.php) — 한 줄로 고정 2026-08-16 ══════════════════════════════════════════════════════════════════════════ */ /* 제목(댓글 내용) 1줄 */ #new_list .na-title, #new_list .na-item { min-width: 0; } #new_list .na-subject { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 등록자 1줄. 주의: 바깥 셀이나 .sv_wrap 에 overflow:hidden 을 걸면 안 된다 — 사이드뷰 팝업(.sv)이 그 안에 absolute 로 들어 있어서 통째로 잘린다. 그래서 눈에 보이는 이름 링크에만 말줄임을 건다. */ #new_list .sv_member { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } #new_list .xp-icon { flex: 0 0 auto; } /* ══════════════════════════════════════════════════════════════════════════ 7. 모바일 헤더 — 햄버거 · 로고 · 검색 한 줄 2026-08-16 ══════════════════════════════════════════════════════════════════════════ */ #header_mo h3 { position: relative; display: flex; align-items: center; justify-content: center; min-height: 52px; margin: 0; } /* float 을 쓰지 않고 절대배치로 좌우에 고정 — 로고 폭과 무관하게 정확히 가운데 */ #header_mo h3 > a.float-left, #header_mo h3 > #header_mo_search { position: absolute; top: 50%; transform: translateY(-50%); float: none !important; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; color: #374151; transition: background-color .12s ease; } #header_mo h3 > a.float-left { left: 0; } #header_mo h3 > #header_mo_search { right: 0; } #header_mo h3 > a.float-left:hover, #header_mo h3 > #header_mo_search a:hover { background: #f1f3f7; } #header_mo h3 > #header_mo_search a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 10px; color: inherit; } #header_mo h3 .fa { font-size: 1.15rem; } #header_mo #logo_img { max-height: 34px; width: auto; } :root[data-theme="dark"] #header_mo h3 > a.float-left, :root[data-theme="dark"] #header_mo h3 > #header_mo_search { color: var(--mt-text); } :root[data-theme="dark"] #header_mo h3 > a.float-left:hover, :root[data-theme="dark"] #header_mo h3 > #header_mo_search a:hover { background: var(--mt-surface); } /* ══════════════════════════════════════════════════════════════════════════ 8. 사이드바(오프캔버스) — tozinsa 구조에 맞춤 2026-08-16 ──────────────────────────────────────────────────────────────────────── tozinsa 는 사이드바를 열면 계정 버튼 → 메뉴 순으로 바로 이어진다. 우리는 그 앞에 4칸 아이콘 그리드(메뉴/새글/검색/더보기 + 더보기 7칸)가 있어서 정작 메뉴가 한참 아래로 밀린다. 그 그리드를 감춘다. 되돌리기: 아래 .sidebar-icon 규칙 두 줄만 지우면 즉시 원래대로다. 마크업은 그대로 두므로 링크·기능은 아무것도 사라지지 않는다. (감춰지는 바로가기: 새글·검색·관리자·테마설정·위젯설정·1:1문의·태그모음·신고모음 — 전부 메뉴나 헤더에서 다른 경로로 갈 수 있다) ══════════════════════════════════════════════════════════════════════════ */ #nt_sidebar .sidebar-icon { display: none !important; } #nt_sidebar #sidebar_more_icon { display: none !important; } /* 그리드를 감추면서 생긴 음수 여백 보정 */ #nt_sidebar .sidebar-content > .mt-n1 { margin-top: 0 !important; } /* ── 최소한의 다듬기 ── */ #nt_sidebar_header h3 { letter-spacing: -.01em; margin: 0; } #nt_sidebar_menu h5 { font-size: .78rem; font-weight: 700; letter-spacing: .06em; color: #8b95a5; padding: 1rem 1rem .5rem; margin: 0; } #nt_sidebar .me-ul > li > a, #nt_sidebar .sidebar-list .me-ul > li > a { padding-top: .7rem; padding-bottom: .7rem; transition: background-color .12s ease; } #nt_sidebar .me-ul > li > a:hover { background: rgba(0,0,0,.035); } /* 통계 숫자는 자릿수를 맞춘다 */ #nt_sidebar .float-right { font-variant-numeric: tabular-nums; } /* 경험치 바 — 줄무늬 애니메이션은 요즘 감각이 아니다 */ #nt_sidebar .progress { height: 6px; border-radius: 999px; overflow: hidden; } #nt_sidebar .progress-bar-striped { background-image: none !important; } /* ── 다크모드 ── */ :root[data-theme="dark"] #nt_sidebar { background: var(--mt-bg) !important; } :root[data-theme="dark"] #nt_sidebar .bg-white, :root[data-theme="dark"] #nt_sidebar .sidebar-list { background: var(--mt-surface) !important; } :root[data-theme="dark"] #nt_sidebar .me-ul > li > a { color: var(--mt-text); } :root[data-theme="dark"] #nt_sidebar .me-ul > li > a:hover { background: rgba(255,255,255,.06); } :root[data-theme="dark"] #nt_sidebar .border-top, :root[data-theme="dark"] #nt_sidebar .me-ul { border-color: var(--mt-border) !important; } :root[data-theme="dark"] #nt_sidebar .progress { background: var(--mt-border); } /* ══════════════════════════════════════════════════════════════════════════ 9. 사이드바 하위메뉴 화살표 · 헤더 구분 · 검색폼 여백 2026-08-16 ══════════════════════════════════════════════════════════════════════════ */ /* ── 하위메뉴 화살표: 오른쪽(▶) → 아래(▼), 펼치면 위(▲) ── 마크업이 +