/** * H-Style Layout Switcher * 글 목록 레이아웃 전환 — 프론트페이지(.posts-grid)와 아카이브(.archive-grid) 공용 * * 이 파일은 front-page.css / archive.css 어느 쪽에도 넣지 않는다. * 두 파일에는 이미 카드 기본 스타일이 중복 정의돼 있어(CLAUDE.md 참고), * 레이아웃 규칙까지 나누어 담으면 한쪽만 고치는 사고가 반복된다. * * 적용 방식: assets/js/front-layout.js 가 에 클래스를 건다 * .hstyle-layout-grid(기본) / .hstyle-layout-list-thumb / .hstyle-layout-list * 표시는 전적으로 CSS 가 담당하므로 AJAX 로 추가된 카드도 자동으로 따라온다. * * 로드 위치: functions.php — is_front_page() || is_archive() */ /* ─── 전환 버튼 UI ─── */ .layout-switcher { display: flex; align-items: center; gap: 10px; margin-left: auto; } .layout-switcher-label { font-size: 12px; font-weight: 500; color: #9aa0a6; letter-spacing: 0.04em; } .layout-switcher-buttons { display: flex; gap: 3px; padding: 3px; background: #ffffff; border: 1px solid #e6e6e6; border-radius: 9px; } .layout-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 28px; padding: 0; border-radius: 6px; color: #9aa0a6; background: none; transition: color 0.18s ease, background 0.18s ease; } .layout-btn:hover { color: #1a1a2e; background: #f1f3f5; } .layout-btn[aria-pressed="true"] { color: #ffffff; background: var(--color-bg-dark, #111827); } .layout-btn:focus-visible { outline: 2px solid var(--color-accent, #16a085); outline-offset: 2px; } /* 아카이브 전용 툴바 — 프론트페이지는 .posts-section-header 안에 들어간다 */ .archive-toolbar { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 20px; } /* ─── 카드 요약문 — 목록에서만 노출 (기본 숨김은 style.css) ─── */ .posts-grid .card-excerpt, .archive-grid .card-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13.5px; line-height: 1.7; color: #6b7280; margin-bottom: 12px; } /* ─── 목록형 공통 (썸네일 유무 무관) — 카드가 아니라 한 장의 흰 패널 ─── */ .hstyle-layout-list .posts-grid, .hstyle-layout-list .archive-grid, .hstyle-layout-list-thumb .posts-grid, .hstyle-layout-list-thumb .archive-grid { display: block; gap: 0; background: #ffffff; border: 1px solid #eeeeee; border-radius: 12px; overflow: hidden; } .hstyle-layout-list .card-item, .hstyle-layout-list-thumb .card-item { background: none; border: none; border-bottom: 1px solid #f0f1f3; border-radius: 0; overflow: visible; } .hstyle-layout-list .card-item:last-child, .hstyle-layout-list-thumb .card-item:last-child { border-bottom: none; } /* 목록에서는 카드가 떠오르는 hover 대신 배경만 은은하게 */ .hstyle-layout-list .card-item:hover, .hstyle-layout-list-thumb .card-item:hover { transform: none; box-shadow: none; border-color: #f0f1f3; background: #fafbfc; } .hstyle-layout-list .card-item:last-child:hover, .hstyle-layout-list-thumb .card-item:last-child:hover { border-bottom-color: transparent; } /* 목록형에서는 태그를 감춰 한 줄 밀도를 유지한다 */ .hstyle-layout-list .card-tags, .hstyle-layout-list-thumb .card-tags { display: none; } .hstyle-layout-list .card-excerpt, .hstyle-layout-list-thumb .card-excerpt { font-size: 14px; line-height: 1.75; } /* ─── ① 목록형 — 왼쪽 날짜 컬럼 + 제목·요약 ─── */ .hstyle-layout-list .card-thumbnail { display: none; } .hstyle-layout-list .card-body { display: grid; grid-template-columns: 92px 1fr; column-gap: 30px; align-items: start; padding: 26px 34px; } .hstyle-layout-list .card-date { grid-column: 1; grid-row: 1 / span 3; text-align: right; font-size: inherit; color: inherit; padding-top: 2px; } .hstyle-layout-list .card-category, .hstyle-layout-list .card-title, .hstyle-layout-list .card-excerpt { grid-column: 2; } .hstyle-layout-list .card-title { font-size: 19px; line-height: 1.45; -webkit-line-clamp: 2; margin-bottom: 10px; } .hstyle-layout-list .card-excerpt { margin-bottom: 0; } /* 날짜를 연도 / 월-일 두 줄로 분리 표기 */ .hstyle-layout-list .card-date-full { display: none; } .hstyle-layout-list .card-date-year { display: block; font-size: 22px; font-weight: 700; color: #2b3445; letter-spacing: 0.01em; line-height: 1.2; } .hstyle-layout-list .card-date-md { display: block; font-size: 12.5px; color: #9aa0a6; margin-top: 3px; } /* ─── ② 썸네일 목록형 — 왼쪽 썸네일 + 오른쪽 본문 ─── */ .hstyle-layout-list-thumb .card-link { display: grid; grid-template-columns: 264px 1fr; align-items: center; } .hstyle-layout-list-thumb .card-thumbnail { padding-top: 0; height: 148px; margin: 24px 0 24px 24px; border-radius: 10px; } .hstyle-layout-list-thumb .card-body { padding: 24px 32px; } .hstyle-layout-list-thumb .card-title { font-size: 18px; line-height: 1.45; -webkit-line-clamp: 2; margin-bottom: 10px; } .hstyle-layout-list-thumb .card-excerpt { margin-bottom: 14px; }