또는 ======================== */ #hiveBlog.hb-theme-light, #hiveBlogView.hb-theme-light, #hiveBlogWrite.hb-theme-light, .hb-theme-light #hiveBlog, .hb-theme-light #hiveBlogView, .hb-theme-light #hiveBlogWrite { --hb-bg: #ffffff; --hb-bg2: #f7f6f3; --hb-bg3: #efece6; --hb-border: rgba(0,0,0,0.08); --hb-border-hover: rgba(0,0,0,0.22); --hb-text: #1a1a1a; --hb-text-strong: #0a0a0a; --hb-text-sub: rgba(0,0,0,0.62); --hb-text-muted: rgba(0,0,0,0.45); --hb-hover-bg: rgba(0,0,0,0.03); --hb-shadow: 0 16px 40px rgba(0,0,0,0.10); --hb-on-point: #ffffff; --hb-notice-border: rgba(0,0,0,0.18); --hb-notice-text: rgba(0,0,0,0.62); --hb-point-bg: rgba(212, 168, 83, 0.14); --hb-point-bg-soft: rgba(212, 168, 83, 0.08); --hb-point-border: rgba(212, 168, 83, 0.50); --hb-point-border-strong: rgba(212, 168, 83, 0.70); } /* ======================== 공통 리셋 ======================== */ #hiveBlog *, #hiveBlogView *, #hiveBlogWrite * { box-sizing: border-box; } #hiveBlog a, #hiveBlogView a, #hiveBlogWrite a { text-decoration: none; color: inherit; } #hiveBlog img, #hiveBlogView img { max-width: 100%; height: auto; display: block; } /* ======================== 리스트 - 히어로 ======================== */ .hblog-hero { background: var(--hb-bg); padding: 80px 0 60px; border-bottom: 1px solid var(--hb-border); } .hblog-hero-inner { width: 95%; max-width: 1250px; margin: 0 auto; } .hblog-hero-label { font-size: var(--t-label, 11px); letter-spacing: 0.14em; color: var(--hb-point); text-transform: uppercase; margin-bottom: 16px; overflow: hidden; } .hblog-hero-label .reveal-line { display: block; } .hblog-hero-title { font-size: var(--t-heading, clamp(32px, 4vw, 52px)); color: var(--hb-text-strong); font-weight: 600; line-height: 1.2; margin: 0 0 16px; } .hblog-hero-sub { font-size: var(--t-body, 16px); color: var(--hb-text-sub); line-height: 1.7; } /* ======================== 카테고리 필터 ======================== */ .hblog-filter { background: var(--hb-bg); border-bottom: 1px solid var(--hb-border); position: sticky; top: 0; z-index: 1; } .hblog-filter-inner { width: 95%; max-width: 1250px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 0; } .hblog-cats { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .hblog-cats li a, .hblog-cats li span { display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--hb-border); font-size: var(--t-caption, 13px); color: var(--hb-text-sub); transition: all 0.25s var(--hb-ease); cursor: pointer; } .hblog-cats li a:hover, .hblog-cats #bo_cate_on a { border-color: var(--hb-point); color: var(--hb-point); background: var(--hb-point-bg); } /* 그누보드 카테고리 오버라이드 */ #hiveBlog #bo_cate { float: none !important; margin: 0 !important; } #hiveBlog #bo_cate_ul { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } #hiveBlog #bo_cate_ul li a { display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--hb-border); font-size: var(--t-caption, 13px); color: var(--hb-text-sub); transition: all 0.25s var(--hb-ease); } #hiveBlog #bo_cate_ul li a:hover { border-color: var(--hb-point); color: var(--hb-point); } #hiveBlog #bo_cate_ul li#bo_cate_on a { border-color: var(--hb-point); color: var(--hb-point); background: var(--hb-point-bg); } /* 검색폼 */ .hblog-search-form { display: flex; gap: 8px; align-items: center; } .hblog-search-input { height: 36px; padding: 0 14px; border: 1px solid var(--hb-border); border-radius: 999px; background: var(--hb-bg2); color: var(--hb-text); font-size: var(--t-caption, 13px); outline: none; min-width: 200px; transition: border-color 0.25s var(--hb-ease); } .hblog-search-input:focus { border-color: var(--hb-point); } .hblog-search-input::placeholder { color: var(--hb-text-muted); } .hblog-search-btn { height: 36px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--hb-point); background: transparent; color: var(--hb-point); font-size: var(--t-caption, 13px); cursor: pointer; transition: all 0.25s var(--hb-ease); } .hblog-search-btn:hover { background: var(--hb-point); color: var(--hb-on-point); } /* ======================== 카드 그리드 ======================== */ .hblog-main { background: var(--hb-bg); padding: 60px 0; min-height: 50vh; } .hblog-container { width: 95%; max-width: 1250px; margin: 0 auto; } .hblog-count { font-size: var(--t-caption, 13px); color: var(--hb-text-muted); margin-bottom: 36px; } .hblog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } /* ======================== 카드 ======================== */ .hblog-card { background: var(--hb-bg2); border: 1px solid var(--hb-border); border-radius: var(--hb-radius-lg); overflow: hidden; transition: transform 0.3s var(--hb-ease), box-shadow 0.3s var(--hb-ease), border-color 0.3s var(--hb-ease); display: flex; flex-direction: column; } .hblog-card:hover { transform: translateY(-6px); box-shadow: var(--hb-shadow); border-color: var(--hb-border-hover); } .hblog-card-thumb { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--hb-bg3); cursor: pointer; } .hblog-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--hb-ease); filter: blur(12px); opacity: 0.7; } .hblog-card-thumb img.hb-loaded { filter: blur(0); opacity: 1; } .hblog-card:hover .hblog-card-thumb img { transform: scale(1.05); } .hblog-card-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: var(--t-caption, 13px); color: var(--hb-text-muted); } .hblog-card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; gap: 12px; } .hblog-card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .hblog-cat-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--hb-point-border); font-size: var(--t-label, 11px); color: var(--hb-point); letter-spacing: 0.04em; } .hblog-notice-badge { border-color: var(--hb-notice-border); color: var(--hb-notice-text); } .hblog-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--hb-text-muted); flex-shrink: 0; } .hblog-card-date { font-size: var(--t-label, 11px); color: var(--hb-text-muted); letter-spacing: 0.04em; } .hblog-card-read { font-size: var(--t-label, 11px); color: var(--hb-text-muted); } .hblog-card-title { font-size: var(--t-body, 16px); color: var(--hb-text-strong); font-weight: 500; line-height: 1.55; word-break: keep-all; transition: color 0.22s var(--hb-ease); margin: 0; } .hblog-card:hover .hblog-card-title { color: var(--hb-point); } .hblog-card-excerpt { font-size: var(--t-caption, 13px); color: var(--hb-text-sub); line-height: 1.8; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .hblog-card-footer { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--hb-border); font-size: var(--t-label, 11px); color: var(--hb-text-muted); } /* ======================== 관리자 일괄 작업 — 카드 체크박스 / 액션 바 ======================== */ .hblog-card { position: relative; } .hb-card-check { position: absolute; top: 12px; left: 12px; z-index: 5; width: 28px; height: 28px; cursor: pointer; display: none; /* 기본 숨김 — 관리자 모드에서만 노출 */ } .hb-admin-mode .hb-card-check { display: inline-flex; } .hb-card-check input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .hb-card-check-box { width: 100%; height: 100%; border-radius: 6px; background: var(--hb-bg); border: 1.5px solid var(--hb-border-hover); box-shadow: 0 2px 8px rgba(0,0,0,0.18); display: block; position: relative; transition: all 0.18s var(--hb-ease); } .hb-card-check input:checked + .hb-card-check-box { background: var(--hb-point); border-color: var(--hb-point); } .hb-card-check input:checked + .hb-card-check-box::after { content: ""; position: absolute; top: 6px; left: 9px; width: 6px; height: 12px; border: solid var(--hb-on-point); border-width: 0 2px 2px 0; transform: rotate(45deg); } .hblog-card.is-checked { outline: 2px solid var(--hb-point); outline-offset: -1px; } .hblog-admin-bar { margin-top: 28px; padding: 16px 20px; background: var(--hb-bg2); border: 1px solid var(--hb-border); border-radius: var(--hb-radius-lg); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .hblog-admin-check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-caption, 13px); color: var(--hb-text); cursor: pointer; user-select: none; } .hblog-admin-check input { accent-color: var(--hb-point); width: 16px; height: 16px; } .hblog-admin-actions { display: flex; gap: 8px; flex-wrap: wrap; } .hblog-admin-btn { height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--hb-border-hover); background: transparent; color: var(--hb-text); font-size: var(--t-caption, 13px); font-family: inherit; cursor: pointer; transition: all 0.22s var(--hb-ease); } .hblog-admin-btn:hover { background: var(--hb-point); border-color: var(--hb-point); color: var(--hb-on-point); } @media (max-width: 600px) { .hblog-admin-bar { flex-direction: column; align-items: stretch; } .hblog-admin-actions { justify-content: center; } } /* ======================== 빈 목록 ======================== */ .hblog-empty { width: 100%; grid-column: 1 / -1; padding: 80px 20px; text-align: center; border: 1px solid var(--hb-border); border-radius: var(--hb-radius-lg); color: var(--hb-text-muted); font-size: var(--t-body, 16px); } /* ======================== 하단 버튼 / 페이지네이션 ======================== */ .hblog-bottom { margin-top: 48px; display: flex; flex-direction: column; align-items: center; gap: 20px; } .hblog-pages { display: flex; justify-content: center; } .hblog-actions { display: flex; justify-content: flex-end; width: 100%; } .hblog-write-btn { display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border-radius: var(--hb-radius); border: 1px solid var(--hb-point); font-size: var(--t-caption, 13px); color: var(--hb-point); transition: all 0.25s var(--hb-ease); } .hblog-write-btn:hover { background: var(--hb-point); color: var(--hb-on-point); } /* ======================== 뷰 - 전체 래퍼 ======================== */ #hiveBlogView { background: var(--hb-bg); } /* 빵 부스러기 */ .hblog-breadcrumb { width: 95%; max-width: 1250px; margin: 0 auto; padding: 20px 0; } .hblog-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .hblog-breadcrumb li { display: flex; align-items: center; gap: 6px; font-size: var(--t-caption, 13px); color: var(--hb-text-muted); } .hblog-breadcrumb li a { color: var(--hb-text-muted); transition: color 0.22s; } .hblog-breadcrumb li a:hover { color: var(--hb-text); } .hblog-breadcrumb .bc-sep { color: var(--hb-text-muted); font-size: 10px; } .hblog-breadcrumb li:last-child { color: var(--hb-text-sub); } /* 포스트 헤더 */ .hblog-post-header { width: 95%; max-width: 1250px; margin: 0 auto; padding: 48px 0 40px; border-bottom: 1px solid var(--hb-border); } .hblog-post-cat { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--hb-point-border); font-size: var(--t-label, 11px); color: var(--hb-point); letter-spacing: 0.06em; margin-bottom: 20px; } .hblog-post-title { font-size: var(--t-heading, clamp(32px, 4vw, 52px)); color: var(--hb-text-strong); font-weight: 600; line-height: 1.3; word-break: keep-all; margin: 0 0 24px; } .hblog-post-meta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: var(--t-caption, 13px); color: var(--hb-text-muted); } .hblog-post-meta-row .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--hb-text-muted); } /* 대표 이미지 */ .hblog-featured-img { width: 95%; max-width: 1250px; margin: 36px auto 0; border-radius: var(--hb-radius-lg); overflow: hidden; aspect-ratio: 21 / 9; } .hblog-featured-img img { width: 100%; height: 100%; object-fit: cover; } /* 포스트 바디: 2컬럼 */ .hblog-post-body { width: 95%; max-width: 1250px; margin: 48px auto 80px; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; align-items: start; } /* 본문 컬럼 */ .hblog-content-col { min-width: 0; color: var(--hb-text); line-height: 2; font-size: 17px; letter-spacing: 0.005em; } .hblog-content-col h2 { font-size: 26px; color: var(--hb-text-strong); margin: 2.6em 0 0.9em; font-weight: 600; line-height: 1.4; } .hblog-content-col h3 { position: relative; font-size: 18px; color: var(--hb-text-strong); font-weight: 600; margin: 2.6em 0 1.1em; padding-left: 16px; line-height: 1.5; } .hblog-content-col h3::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 3px; height: 0.9em; background: var(--hb-point); border-radius: 2px; } .hblog-content-col p { margin: 0 0 3em; } .hblog-content-col img { border-radius: var(--hb-radius); margin: 1.4em 0; max-width: 100%; } .hblog-content-col a { color: var(--hb-point); text-decoration: underline; text-underline-offset: 3px; } .hblog-content-col blockquote { border-left: 3px solid var(--hb-point); margin: 1.6em 0; padding: 12px 20px; background: var(--hb-point-bg-soft); border-radius: 0 var(--hb-radius) var(--hb-radius) 0; color: var(--hb-text-sub); } .hblog-content-col pre, .hblog-content-col code { background: var(--hb-bg2); border: 1px solid var(--hb-border); border-radius: var(--hb-radius); padding: 2px 6px; font-size: var(--t-caption, 13px); } .hblog-content-col pre { padding: 16px 20px; overflow-x: auto; } .hblog-content-col table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: var(--t-caption, 13px); } .hblog-content-col th, .hblog-content-col td { border: 1px solid var(--hb-border); padding: 10px 14px; text-align: left; } .hblog-content-col th { background: var(--hb-bg2); color: var(--hb-text-strong); } /* ul / ol */ .hblog-content-col ul, .hblog-content-col ol { padding-left: 0; margin: 0 0 2em; list-style: none; } .hblog-content-col li { line-height: 1.85; } .hblog-content-col ul > li { position: relative; padding-left: 24px; margin-bottom: 14px; } .hblog-content-col ul > li::before { content: ""; position: absolute; left: 4px; top: 0.75em; width: 12px; height: 1px; background: var(--hb-point); } .hblog-content-col ol:not([class]) { counter-reset: hblog-ol; } .hblog-content-col ol:not([class]) > li { counter-increment: hblog-ol; position: relative; padding-left: 32px; margin-bottom: 14px; } .hblog-content-col ol:not([class]) > li::before { content: counter(hblog-ol, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: 'Cormorant SC', 'Sorts Mill Goudy', serif; font-size: 15px; color: var(--hb-point); font-weight: 600; letter-spacing: 0.06em; line-height: 1.85; } /* strong / em */ .hblog-content-col strong { color: var(--hb-text-strong); font-weight: 600; } .hblog-content-col em { color: var(--hb-point); font-style: normal; } /* hr 구분선 */ .hblog-content-col hr { border: none; border-top: 1px solid var(--hb-border); margin: 2.4em 0; } /* 강조 박스: .hblog-tip */ .hblog-tip { background: var(--hb-point-bg-soft); border: 1px solid var(--hb-point-border); border-radius: var(--hb-radius); padding: 18px 22px; margin: 1.8em 0; font-size: var(--t-body, 16px); line-height: 1.8; } .hblog-tip .hblog-tip-label { font-size: var(--t-caption, 13px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--hb-point); font-weight: 600; margin-bottom: 8px; display: block; } /* 포인트 박스: .hblog-point */ .hblog-point { background: var(--hb-bg2); border-left: 3px solid var(--hb-point); border-radius: 0 var(--hb-radius) var(--hb-radius) 0; padding: 16px 20px; margin: 1.6em 0; color: var(--hb-text-strong); font-size: var(--t-body, 16px); line-height: 1.8; } /* 2열 그리드: .hblog-two-col */ .hblog-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 1.6em 0; } .hblog-two-col-item { background: var(--hb-bg2); border: 1px solid var(--hb-border); border-radius: var(--hb-radius); padding: 20px; } .hblog-two-col-item strong { display: block; margin-bottom: 6px; font-size: var(--t-body, 16px); color: var(--hb-text-strong); } /* 스텝 리스트: .hblog-steps 구조:

제목
설명

(구버전 제목
설명 도 자동 호환) */ .hblog-steps { list-style: none; padding: 0; margin: 1.6em 0; counter-reset: hblog-step; } .hblog-steps li { counter-increment: hblog-step; position: relative; padding-left: 50px; min-height: 32px; margin-bottom: 22px; font-size: var(--t-body, 16px); line-height: 1.8; color: var(--hb-text-sub); word-break: keep-all; } .hblog-steps li::before { content: counter(hblog-step); position: absolute; left: 0; top: 2px; width: 32px; height: 32px; background: var(--hb-point); color: var(--hb-on-point); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--t-caption, 13px); font-weight: 700; } .hblog-steps li strong { display: block; color: var(--hb-text-strong); font-weight: 600; margin-bottom: 4px; } .hblog-steps li strong + br { display: none; } .hblog-steps li p { margin: 0; } @media (max-width: 600px) { .hblog-steps li { padding-left: 46px; } } /* 반응형 */ @media (max-width: 900px) { .hblog-two-col { grid-template-columns: 1fr; } } /* ======================== 본문 시멘틱 섹션 패턴 글 작성 시 아래 구조로 작성하면 자동 적용됨

Good candidates

아래와 같은 고민이 있다면 전문의 상담을 권장합니다

2컬럼 번호 박스

3컬럼 케어 카드

질문

답변

======================== */ .hblog-content-col .hblog-section { margin: 100px 0; display: flow-root; } .hblog-content-col .hblog-section > *:first-child { margin-top: 0; } .hblog-content-col .hblog-section > *:last-child { margin-bottom: 0; } .hblog-section-head { margin-bottom: 72px; } .hblog-content-col .hblog-section-title { font-family: 'Cormorant SC', 'Sorts Mill Goudy', 'Pretendard', serif; font-size: clamp(28px, 3vw, 42px); font-weight: 500; color: var(--hb-point); margin: 0 0 8px; line-height: 1.2; letter-spacing: 0.01em; } .hblog-section-lead { font-size: var(--t-caption, 13px); color: var(--hb-text-muted); margin: 0; letter-spacing: 0.02em; } /* 번호 그리드 - Good candidates (2컬럼) */ .hblog-content-col .hblog-numgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; list-style: none; padding: 0; margin: 1.6em 0; counter-reset: hblog-num; } .hblog-content-col .hblog-numgrid li { counter-increment: hblog-num; display: flex; align-items: center; gap: 20px; padding: 22px 26px; background: var(--hb-bg2); border: 1px solid var(--hb-border); border-radius: var(--hb-radius); color: var(--hb-text); font-size: var(--t-body, 16px); line-height: 1.6; word-break: keep-all; transition: border-color 0.25s var(--hb-ease), transform 0.25s var(--hb-ease); margin: 0; } .hblog-content-col .hblog-numgrid li::marker { content: none; } .hblog-content-col .hblog-numgrid li::before { content: counter(hblog-num, decimal-leading-zero); font-family: 'Cormorant SC', 'Sorts Mill Goudy', serif; font-size: 15px; color: var(--hb-point); min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--hb-point-border); border-radius: 6px; flex-shrink: 0; letter-spacing: 0.08em; } .hblog-content-col .hblog-numgrid li:hover { border-color: var(--hb-point-border); transform: translateY(-2px); } /* 케어 그리드 - After care (3컬럼) */ .hblog-content-col .hblog-caregrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; list-style: none; padding: 0; margin: 1.6em 0; counter-reset: hblog-care; border-top: 1px solid var(--hb-border); border-left: 1px solid var(--hb-border); } .hblog-content-col .hblog-caregrid li { counter-increment: hblog-care; padding: 32px 30px; border-right: 1px solid var(--hb-border); border-bottom: 1px solid var(--hb-border); background: var(--hb-bg); color: var(--hb-text-sub); font-size: var(--t-body, 16px); line-height: 1.8; word-break: keep-all; margin: 0; list-style: none; } .hblog-content-col .hblog-caregrid li::marker { content: none; } .hblog-content-col .hblog-caregrid li::before { content: counter(hblog-care, decimal-leading-zero); display: inline-block; font-family: 'Cormorant SC', 'Sorts Mill Goudy', serif; font-size: 26px; color: var(--hb-point); margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--hb-point-border); min-width: 36px; letter-spacing: 0.06em; } /* FAQ - Common questions (펼쳐진 리스트 형태) 구조 (그누보드 에디터가 보존하는 표준 태그):

Q. 질문: 답변
Q. 질문: 답변

*/ .hblog-content-col .hblog-faq { margin: 1.6em 0; padding: 0; } .hblog-content-col .hblog-faq dt { position: relative; background: var(--hb-point-bg-soft); border: 1px solid var(--hb-point-border); border-radius: var(--hb-radius) var(--hb-radius) 0 0; padding: 20px 26px 20px 56px; font-size: var(--t-body, 16px); color: var(--hb-text-strong); font-weight: 500; line-height: 1.6; word-break: keep-all; margin: 20px 0 0; } .hblog-content-col .hblog-faq dt:first-child { margin-top: 0; } .hblog-content-col .hblog-faq dt::before { content: "Q"; position: absolute; left: 26px; top: 50%; transform: translateY(-50%); font-family: 'Cormorant SC', 'Sorts Mill Goudy', serif; font-size: 18px; color: var(--hb-point); font-weight: 600; letter-spacing: 0.05em; } .hblog-content-col .hblog-faq dd { position: relative; background: var(--hb-bg); border: 1px solid var(--hb-border); border-top: 0; border-radius: 0 0 var(--hb-radius) var(--hb-radius); padding: 22px 26px 22px 56px; margin: 0; font-size: var(--t-body, 16px); color: var(--hb-text-sub); line-height: 1.9; word-break: keep-all; } .hblog-content-col .hblog-faq dd::before { content: "A"; position: absolute; left: 26px; top: 22px; font-family: 'Cormorant SC', 'Sorts Mill Goudy', serif; font-size: 18px; color: var(--hb-text-muted); font-weight: 600; letter-spacing: 0.05em; } @media (max-width: 600px) { .hblog-content-col .hblog-faq dt, .hblog-content-col .hblog-faq dd { padding-left: 48px; } .hblog-content-col .hblog-faq dt::before, .hblog-content-col .hblog-faq dd::before { left: 20px; } } /* 본문 시멘틱 섹션 반응형 */ @media (max-width: 900px) { .hblog-content-col .hblog-numgrid { grid-template-columns: 1fr; } .hblog-content-col .hblog-caregrid { grid-template-columns: 1fr; } .hblog-content-col .hblog-section-title { font-size: clamp(24px, 6vw, 32px); } } /* 사이드바 */ .hblog-sidebar-col { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 20px; } .hblog-sidebar-card { background: var(--hb-bg2); border: 1px solid var(--hb-border); border-radius: var(--hb-radius-lg); padding: 24px; } .hblog-sidebar-title { font-size: var(--t-caption, 13px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--hb-text-muted); margin-bottom: 16px; } .hblog-info-list { display: flex; flex-direction: column; gap: 12px; } .hblog-info-item { display: flex; justify-content: space-between; align-items: center; font-size: var(--t-caption, 13px); } .hblog-info-label { color: var(--hb-text-muted); } .hblog-info-value { color: var(--hb-text); } /* 공유 버튼 */ .hblog-share-wrap { display: flex; flex-direction: column; gap: 8px; } .hblog-share-btn { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; border-radius: var(--hb-radius); border: 1px solid var(--hb-border); background: transparent; color: var(--hb-text-sub); font-size: var(--t-caption, 13px); cursor: pointer; transition: all 0.25s var(--hb-ease); text-decoration: none; } .hblog-share-btn:hover { border-color: var(--hb-border-hover); color: var(--hb-text-strong); background: var(--hb-hover-bg); } /* 뷰 버튼 바 (목록/수정/삭제) */ .hblog-view-actions { border-top: 1px solid var(--hb-border); background: var(--hb-bg); } .hblog-act-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 18px; border-radius: var(--hb-radius); border: 1px solid var(--hb-border); background: transparent; color: var(--hb-text-sub); font-size: var(--t-caption, 13px); transition: all 0.22s var(--hb-ease); cursor: pointer; text-decoration: none; } .hblog-act-btn:hover { border-color: var(--hb-border-hover); color: var(--hb-text-strong); background: var(--hb-hover-bg); } .hblog-act-del { border-color: rgba(239,68,68,0.25); color: rgba(239,68,68,0.78); } .hblog-act-del:hover { border-color: rgba(239,68,68,0.6); color: #ef4444; background: rgba(239,68,68,0.06); } /* CTA 섹션 */ .hblog-post-cta { background: var(--hb-bg2); border-top: 1px solid var(--hb-border); border-bottom: 1px solid var(--hb-border); padding: 60px 0; } .hblog-post-cta-inner { width: 95%; max-width: 1250px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .hblog-cta-label { font-size: var(--t-label, 11px); letter-spacing: 0.14em; color: var(--hb-point); text-transform: uppercase; margin-bottom: 10px; } .hblog-cta-heading { font-size: var(--t-sub, 24px); color: var(--hb-text-strong); font-weight: 600; margin: 0 0 8px; } .hblog-cta-sub { font-size: var(--t-caption, 13px); color: var(--hb-text-muted); line-height: 1.7; } /* 이전/다음 */ .hblog-post-nav { width: 95%; max-width: 1250px; margin: 48px auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .hblog-nav-item { background: var(--hb-bg2); border: 1px solid var(--hb-border); border-radius: var(--hb-radius-lg); padding: 24px; transition: border-color 0.25s var(--hb-ease), transform 0.25s var(--hb-ease); display: block; } .hblog-nav-item:hover { border-color: var(--hb-border-hover); transform: translateY(-3px); } .hblog-nav-dir { font-size: var(--t-label, 11px); letter-spacing: 0.08em; color: var(--hb-text-muted); text-transform: uppercase; margin-bottom: 8px; } .hblog-nav-title { font-size: var(--t-body, 16px); color: var(--hb-text); line-height: 1.5; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hblog-nav-next { text-align: right; } /* ======================== 쓰기폼 ======================== */ #hiveBlogWrite { background: var(--hb-bg); padding: 60px 0; } .hblog-write-wrap { width: 95%; max-width: 900px; margin: 0 auto; } .hblog-write-heading { font-size: var(--t-sub, 24px); color: var(--hb-text-strong); font-weight: 600; margin-bottom: 32px; } .hblog-field { background: var(--hb-bg2); border: 1px solid var(--hb-border); border-radius: var(--hb-radius-lg); padding: 24px; margin-bottom: 16px; } .hblog-label { display: block; font-size: var(--t-caption, 13px); color: var(--hb-text-muted); letter-spacing: 0.06em; margin-bottom: 12px; } .hblog-input, .hblog-select, .hblog-textarea { width: 100%; background: var(--hb-bg3); border: 1px solid var(--hb-border); border-radius: var(--hb-radius); padding: 0 16px; height: 48px; color: var(--hb-text); font-size: var(--t-body, 16px); font-family: inherit; outline: none; transition: border-color 0.25s var(--hb-ease); } .hblog-textarea { height: auto; min-height: 100px; padding: 14px 16px; resize: vertical; line-height: 1.7; } .hblog-input:focus, .hblog-select:focus, .hblog-textarea:focus { border-color: var(--hb-point-border-strong); } .hblog-input::placeholder, .hblog-textarea::placeholder { color: var(--hb-text-muted); } .hblog-select option { background: var(--hb-bg2); color: var(--hb-text); } .hblog-checks { display: flex; gap: 16px; flex-wrap: wrap; } .hblog-check-item { display: flex; align-items: center; gap: 8px; font-size: var(--t-caption, 13px); color: var(--hb-text-sub); cursor: pointer; } /* 이미지 업로드 */ .hblog-upload-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .hblog-dropzone { position: relative; aspect-ratio: 1; border: 1px dashed var(--hb-border); border-radius: var(--hb-radius-lg); background: var(--hb-bg3); overflow: hidden; cursor: pointer; transition: border-color 0.25s var(--hb-ease); } .hblog-dropzone:hover { border-color: var(--hb-point-border); } .hblog-file-input { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .hblog-preview { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; } .hblog-preview-img { width: 100%; height: 100%; object-fit: cover; display: block; } .hblog-preview-empty { text-align: center; } .hblog-preview-plus { display: block; font-size: 32px; color: var(--hb-text-muted); margin-bottom: 4px; } .hblog-preview-label { font-size: var(--t-caption, 13px); color: var(--hb-text-muted); } /* 폼 버튼 */ .hblog-btn-row { display: flex; justify-content: center; gap: 12px; margin-top: 8px; } .hblog-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 140px; height: 48px; padding: 0 24px; border-radius: var(--hb-radius); border: 1px solid var(--hb-border); background: transparent; color: var(--hb-text-sub); font-size: var(--t-body, 16px); font-family: inherit; cursor: pointer; transition: all 0.25s var(--hb-ease); text-decoration: none; } .hblog-btn:hover { border-color: var(--hb-border-hover); color: var(--hb-text-strong); } .hblog-btn-primary { border-color: var(--hb-point); color: var(--hb-point); } .hblog-btn-primary:hover { background: var(--hb-point); color: var(--hb-on-point); } /* ======================== 페이지네이션 (그누보드 override) ======================== */ #hiveBlog .pg_wrap, #hiveBlogView .pg_wrap { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 0; padding: 0; } #hiveBlog .pg_page, #hiveBlog .pg_current, #hiveBlogView .pg_page, #hiveBlogView .pg_current { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--hb-border); font-size: var(--t-caption, 13px); color: var(--hb-text-sub); transition: all 0.22s var(--hb-ease); } #hiveBlog .pg_page:hover, #hiveBlogView .pg_page:hover { border-color: var(--hb-border-hover); color: var(--hb-text-strong); } #hiveBlog .pg_current, #hiveBlogView .pg_current { background: var(--hb-point); border-color: var(--hb-point); color: var(--hb-on-point) !important; } /* ======================== 댓글 ======================== */ #hiveBlogView .bo_vc { width: 95%; max-width: 1250px; margin: 0 auto 60px; } #hiveBlogView .bo_vc * { box-sizing: border-box; } /* ======================== 반응형 ======================== */ @media (max-width: 1024px) { .hblog-grid { grid-template-columns: repeat(2, 1fr); } .hblog-post-body { grid-template-columns: 1fr; } .hblog-sidebar-col { position: static; display: grid; grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .hblog-hero { padding: 60px 0 40px; } .hblog-hero-title { word-break: keep-all; } .hblog-filter-inner { flex-direction: column; align-items: flex-start; } .hblog-search-input { min-width: 0; width: 100%; } .hblog-search-form { width: 100%; } .hblog-grid { grid-template-columns: 1fr; } .hblog-post-nav { grid-template-columns: 1fr; } .hblog-post-cta-inner { flex-direction: column; } .hblog-sidebar-col { grid-template-columns: 1fr; } .hblog-featured-img { aspect-ratio: 16 / 9; } .hblog-write-wrap { width: 95%; } .hblog-upload-grid { grid-template-columns: repeat(2, 1fr); } .hblog-btn-row { flex-direction: column; } .hblog-btn { width: 100%; } } /* ======================== 접근성 ======================== */ @media (prefers-reduced-motion: reduce) { #hiveBlog *, #hiveBlogView *, #hiveBlogWrite * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }