/* ===================================================================== 게시판 목록 위 도구 줄 (분류 탭 · 보기 방식 · 정렬) — 새 디자인 --------------------------------------------------------------------- · 예전 모양으로 되돌리려면 layout.php 에서 이 파일 한 줄만 지우면 됨 · 색·크기는 아래 :root 변수에서 한 번에 바꿀 수 있음 ===================================================================== */ :root { --tb-bg: #f4f5f7; /* 탭·단추 바탕 회색 */ --tb-text: #6b7684; /* 기본 글자 */ --tb-strong: #191f28; /* 고른 탭 바탕 / 진한 글자 */ --tb-icon-off: #b0b8c1; /* 안 고른 아이콘 */ } /* ---------- 분류 탭 (전체 튜닝 272 · 상품 튜닝 100 …) ---------- */ #blog-list .blog-category { padding: 0 0 50px; } #blog-list .blog-category-ul { gap: 8px; } #blog-list .blog-category-ul li a { gap: 6px; height: 42px; padding: 0 18px; border: 0; border-radius: 99px; background: var(--tb-bg); color: var(--tb-text); font-size: 16px; font-weight: 500; transition: background-color 120ms, color 120ms; } #blog-list .blog-category-ul li a:hover { background: #eaecef; color: var(--tb-strong); } #blog-list .blog-category-ul li a small { font-size: 13px; font-weight: 600; color: #b0b8c1; } /* 고른 탭: 진한 바탕 + 흰 글자 */ #blog-list .blog-category-ul li.on a { background: var(--tb-strong); color: #fff; font-weight: 600; } #blog-list .blog-category-ul li.on a small { color: rgba(255,255,255,.55); } /* ---------- 도구 줄: 왼쪽 보기 방식 / 오른쪽 정렬 ---------- */ #blog-list .blog-search { padding: 0 0 50px; } #blog-list .blog-search-group { align-items: center; } /* 보기 방식: 회색 틀 안 두 칸, 고른 칸은 흰 바탕 */ #blog-list .list-type { gap: 2px; padding: 3px; border-radius: 12px; background: var(--tb-bg); } #blog-list .list-type button { width: 40px; height: 34px; border: 0; border-radius: 9px; background: transparent; } #blog-list .list-type button.on { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08); } /* 아이콘: 그림(mask) 모양에 색만 칠함 → 고르면 진하게 */ #blog-list .list-type button span, #blog-list .list-type button.on span, #blog-list .list-type button.list-type-grid span { width: 18px; height: 18px; box-shadow: none; background: var(--tb-icon-off); -webkit-mask: var(--icon) no-repeat center / contain; mask: var(--icon) no-repeat center / contain; } #blog-list .list-type button.on span { background: var(--tb-strong); } #blog-list .list-type button.list-type-grid span::before { content: none; } /* 갤러리 아이콘 (네모 4개) */ #blog-list .list-type button.list-type-grid { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='1' y='1' width='7' height='7' rx='2'/%3E%3Crect x='10' y='1' width='7' height='7' rx='2'/%3E%3Crect x='1' y='10' width='7' height='7' rx='2'/%3E%3Crect x='10' y='10' width='7' height='7' rx='2'/%3E%3C/svg%3E"); } /* 목록 아이콘 (점 + 줄 3개) */ #blog-list .list-type button:not(.list-type-grid) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='1' y='2' width='3' height='3' rx='1.5'/%3E%3Crect x='6' y='2.5' width='11' height='2' rx='1'/%3E%3Crect x='1' y='7.5' width='3' height='3' rx='1.5'/%3E%3Crect x='6' y='8' width='11' height='2' rx='1'/%3E%3Crect x='1' y='13' width='3' height='3' rx='1.5'/%3E%3Crect x='6' y='13.5' width='11' height='2' rx='1'/%3E%3C/svg%3E"); } /* 정렬 (최신순 ▾): 회색 단추 + 아래로 펼침 */ #blog-list .blog-selectbox { width: auto; } #blog-list .blog-selectbox-title { height: 44px; line-height: 44px; padding: 0 36px 0 16px; border-radius: 12px; background: var(--tb-bg); color: var(--tb-strong); font-size: 14px; font-weight: 600; text-align: left; } #blog-list .blog-selectbox-title:after { right: 15px; width: 6px; height: 6px; border-width: 0 1.5px 1.5px 0; border-color: #8b95a1; } #blog-list .blog-selectbox.active .blog-selectbox-title { color: var(--tb-strong); } #blog-list .blog-selectbox-option { left: auto; right: 0; width: auto; min-width: 120px; margin-top: 6px !important; padding: 6px; border: 1px solid #eef0f3; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.08); } #blog-list .blog-selectbox-option li { height: 38px; line-height: 38px; padding: 0 12px; border-radius: 8px; font-size: 14px; color: var(--tb-text); text-align: left; } #blog-list .blog-selectbox-option li a { display: inline-block; font-size: 14px; color: inherit; } #blog-list .blog-selectbox-option li:hover { background: var(--tb-bg); color: var(--tb-strong); } #blog-list .blog-selectbox-option li.on { color: var(--color); font-weight: 600; } /* ---------- 휴대폰 ---------- */ @media (max-width: 768px) { #blog-list .blog-category { padding: 0 0 18px; } #blog-list .blog-category-ul li a { height: 36px; padding: 0 14px; font-size: 14px; } #blog-list .blog-category-ul li a small { font-size: 12px; } #blog-list .blog-search { padding: 0 0 18px; } #blog-list .list-type button { width: 36px; height: 30px; } #blog-list .list-type button span { width: 16px; height: 16px; } #blog-list .blog-selectbox-title { height: 36px; line-height: 36px; padding: 0 32px 0 14px; font-size: 13px; } #blog-list .blog-selectbox-title:after { right: 13px; } #blog-list .blog-selectbox-option li { height: 36px; line-height: 36px; font-size: 13px; } #blog-list .blog-selectbox-option li a { font-size: 13px; } } /* ---------- 여백 넉넉하게 (2차 조정) ---------- */ /* 분류 탭 */ #blog-list .blog-category-ul { gap: 10px; } #blog-list .blog-category-ul li a { height: 44px; padding: 0 20px; gap: 8px; } /* 정렬 단추: 예전 CSS 의 text-indent(-15px) 때문에 글자가 왼쪽에 붙던 것 바로잡음 */ #blog-list .blog-selectbox-title { min-width: 120px; height: 48px; line-height: 48px; padding: 0 44px 0 20px; text-indent: 0; } #blog-list .blog-selectbox-title:after { right: 20px; } /* 정렬 펼침 목록: 글자 왼쪽 줄 맞춤, 위아래 여백 고르게 */ #blog-list .blog-selectbox-option { min-width: 140px; padding: 8px; } #blog-list .blog-selectbox-option li { height: 42px; line-height: 42px; padding: 0; text-indent: 0; } #blog-list .blog-selectbox-option li a { padding: 0 16px; text-indent: 0; } /* 보기 방식 단추 */ #blog-list .list-type { padding: 6px; gap: 6px; } #blog-list .list-type button { width: 46px; height: 42px; } @media (max-width: 768px) { #blog-list .blog-category-ul { gap: 8px; } #blog-list .blog-category-ul li a { height: 40px; padding: 0 18px; } #blog-list .blog-selectbox-title { min-width: 96px; height: 38px; line-height: 38px; padding: 0 36px 0 16px; } #blog-list .blog-selectbox-title:after { right: 15px; } #blog-list .blog-selectbox-option li { height: 38px; line-height: 38px; } #blog-list .blog-selectbox-option li a { padding: 0 14px; } #blog-list .list-type button { width: 40px; height: 32px; } } /* 펼침 목록: 줄 전체(빈 곳 포함)를 눌러도 바뀌게 — 링크가 줄을 꽉 채우도록 (site.css 의 inline-block 규칙보다 우선) */ #blog-list .blog-selectbox .blog-selectbox-option li a { display: block !important; width: 100%; height: 100%; line-height: inherit; box-sizing: border-box; }