또는 ======================== */ #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: color-mix(in srgb, var(--hb-point) 14%, transparent); --hb-point-bg-soft: color-mix(in srgb, var(--hb-point) 8%, transparent); --hb-point-border: color-mix(in srgb, var(--hb-point) 50%, transparent); --hb-point-border-strong: color-mix(in srgb, var(--hb-point) 70%, transparent); } /* ======================== 다크 테마 — 플랫 중립/검색 채움 보정 (플랫 기준의 rgba(0,0,0,..) 채움은 어두운 배경에서 안 보이므로 흰 오버레이로 치환) ======================== */ #hiveBlog:not(.hb-theme-light) .hblog-search-input, #hiveBlogView:not(.hb-theme-light) .hblog-search-input { background-color: rgba(255,255,255,.06); } #hiveBlog:not(.hb-theme-light) .hblog-search-input:focus, #hiveBlogView:not(.hb-theme-light) .hblog-search-input:focus { background-color: rgba(255,255,255,.10); } #hiveBlogView:not(.hb-theme-light) .hblog-act-btn { background: rgba(255,255,255,.08); } #hiveBlogView:not(.hb-theme-light) .hblog-act-btn:hover { background: rgba(255,255,255,.14); } #hiveBlogView:not(.hb-theme-light) .hblog-act-del { background: rgba(239,68,68,.16); color:#f87171; } #hiveBlogView:not(.hb-theme-light) .hblog-act-del:hover { background: rgba(239,68,68,.24); color:#f87171; } #hiveBlogWrite:not(.hb-theme-light) .hblog-btn { background: rgba(255,255,255,.08); } #hiveBlogWrite:not(.hb-theme-light) .hblog-btn:hover { background: rgba(255,255,255,.14); } /* ======================== 공통 리셋 ======================== */ #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-main); text-transform: uppercase; margin-bottom: 16px; overflow: hidden; } .hblog-hero-label .reveal-line { display: block; } .hblog-hero-title { font-size: var(--t-heading, clamp(22px, 4vw, 32px)); 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-hover); position: sticky; top: 0; z-index: 30; box-shadow: 0 4px 16px rgba(0,0,0,0.06); -webkit-backdrop-filter: saturate(160%) blur(8px); backdrop-filter: saturate(160%) blur(8px); } .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; } /* 카테고리 래퍼가 줄어들 수 있어야 내부 ul 가로 스크롤 동작 (flex min-width 기본 auto 회피) */ .hblog-filter-inner > div { min-width: 0; max-width: 100%; } /* 카테고리 칩 — 항상 한 줄 가로 스크롤 (개수 많아도 세로로 안 길어짐) */ .hblog-cats, #hiveBlog #bo_cate_ul { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; list-style: none; margin: 0; padding: 0 0 2px; max-width: 100%; } .hblog-cats::-webkit-scrollbar, #hiveBlog #bo_cate_ul::-webkit-scrollbar { display: none; } .hblog-cats li, #hiveBlog #bo_cate_ul li { flex-shrink: 0; } /* 칩 모양 — 시인성 위해 테두리/글자 대비 강화 + 줄바꿈 금지 */ .hblog-cats li a, .hblog-cats li span, #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-hover); font-size: var(--t-caption, 13px); color: var(--hb-text); white-space: nowrap; transition: all 0.2s var(--hb-ease); cursor: pointer; } .hblog-cats li a:hover, #hiveBlog #bo_cate_ul li a:hover { border-color: var(--hb-point); color: var(--hb-point); background: var(--hb-point-bg); } /* 활성 카테고리 — 솔리드 포인트색으로 명확히 (gnuboard bo_cate_on + JS hb-cat-active 둘 다 대응) */ .hblog-cats #bo_cate_on a, .hblog-cats li a.hb-cat-active, #hiveBlog #bo_cate_ul li#bo_cate_on a, #hiveBlog #bo_cate_ul li.bo_cate_on a, #hiveBlog #bo_cate_ul li a.hb-cat-active { border-color: var(--hb-point); color: var(--hb-on-point); background: var(--hb-point); font-weight: 600; } /* 그누보드 카테고리 오버라이드 */ #hiveBlog #bo_cate { float: none !important; margin: 0 !important; max-width: 100%; min-width: 0; } /* 검색폼 — 버튼 글씨 줄바꿈 방지 */ .hblog-search-form { display: flex; gap: 8px; align-items: center; } /* 검색창 — 플랫: 옅은 회색 채움 + 보더 제거 + 돋보기 아이콘 */ .hblog-search-input { height: 38px; /* 좌측 아이콘 자리(38px) 확보 */ padding: 0 16px 0 38px; border: 0; border-radius: 12px; background-color: rgba(0,0,0,.045); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 13px center; color: var(--hb-text); font-size: var(--t-caption, 13px); outline: none; flex: 1 1 auto; min-width: 0; transition: background-color 0.25s var(--hb-ease); } .hblog-search-input:focus { background-color: rgba(0,0,0,.07); } .hblog-search-input::placeholder { color: var(--hb-text-muted); } /* 검색 버튼 — 플랫 주요(솔리드 메인색) */ .hblog-search-btn { height: 38px; padding: 0 18px; border-radius: 12px; border: 0; background: var(--hb-point); color: var(--hb-on-point); font-size: var(--t-caption, 13px); font-weight: 600; cursor: pointer; flex-shrink: 0; white-space: nowrap; transition: filter 0.2s var(--hb-ease), transform 0.2s var(--hb-ease); } .hblog-search-btn:hover { filter: brightness(1.08); transform: translateY(-1px); } /* ======================== 카드 그리드 ======================== */ .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; /* 컬럼 수 = 옵션값(--hblog-cols, 인라인). 미디어쿼리가 모바일/태블릿에서 직접 덮어씀. 인라인으로 grid-template-columns 를 직접 박으면 미디어쿼리가 안 먹어서 변수로 처리. */ grid-template-columns: repeat(var(--hblog-cols, 3), 1fr); gap: 28px; } /* ======================== 카드 썸네일 채움 보정. 전역 #hiveBlog img{height:auto} 가 ID 우선순위로 .hblog-card-thumb img{height:100%} 를 덮어써 썸네일이 위쪽만 차던 문제 해결. (#hiveBlog .hblog-card-thumb img = 1,1,1 로 우선) ======================== */ #hiveBlog .hblog-card-thumb img { width: 100%; height: 100%; object-fit: cover; } /* 대표 이미지를 본문 안에 인라인으로 표시(상단 커버 대체) — 잘림 없이 원본 비율 */ #hiveBlogView .hblog-body-featured { margin: 0 0 28px; } #hiveBlogView .hblog-body-featured img { width: 100%; height: auto; display: block; border-radius: var(--hb-radius-lg, 14px); } /* ======================== 카드 ======================== */ .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(-4px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); 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; overflow-wrap: break-word; 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; word-break: keep-all; overflow-wrap: break-word; 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 1px 3px rgba(0,0,0,0.06); 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: 12px; border: 0; background: var(--hb-hover-bg); color: var(--hb-text); font-size: var(--t-caption, 13px); font-weight: 600; font-family: inherit; cursor: pointer; transition: filter 0.2s var(--hb-ease), transform 0.2s var(--hb-ease), background 0.2s var(--hb-ease); } .hblog-admin-btn:hover { background: var(--hb-point); color: var(--hb-on-point); filter: brightness(1.08); transform: translateY(-1px); } @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; gap: 7px; height: 40px; padding: 0 20px; border-radius: 12px; border: 0; background: var(--hb-point); font-size: var(--t-caption, 13px); font-weight: 600; color: var(--hb-on-point); transition: filter 0.2s var(--hb-ease), transform 0.2s var(--hb-ease); } .hblog-write-btn:hover { filter: brightness(1.08); transform: translateY(-1px); } /* ======================== 뷰 - 전체 래퍼 ======================== */ #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 { /* 전역 --t-heading(히어로용 큰 값) 상속 방지 — 블로그 본문 제목에 맞는 고정 크기 */ font-size: clamp(21px, 2.4vw, 30px); color: var(--hb-text-strong); font-weight: 700; line-height: 1.35; word-break: keep-all; overflow-wrap: break-word; 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: 16 / 9; /* 21:9 → 16: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-post-body.hblog-no-sidebar { grid-template-columns: minmax(0, 1fr); max-width: 920px; } /* 본문 컬럼 */ .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%; height: auto; } .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-main); 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: 12px; border: 0; background: var(--hb-hover-bg); color: var(--hb-text-sub); font-size: var(--t-caption, 13px); cursor: pointer; transition: background 0.2s var(--hb-ease), color 0.2s var(--hb-ease); text-decoration: none; } .hblog-share-btn:hover { color: var(--hb-text-strong); background: color-mix(in srgb, var(--hb-text) 10%, transparent); } /* 뷰 버튼 바 (목록/수정/삭제) */ .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: 12px; border: 0; background: rgba(0,0,0,.07); color: var(--hb-text); font-size: var(--t-caption, 13px); font-weight: 600; transition: background 0.2s var(--hb-ease); cursor: pointer; text-decoration: none; } .hblog-act-btn:hover { background: rgba(0,0,0,.12); color: var(--hb-text-strong); } /* 삭제(danger) — 플랫 */ .hblog-act-del { background: rgba(220,38,38,.09); color: #dc2626; } .hblog-act-del:hover { background: rgba(220,38,38,.15); color: #dc2626; } /* 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-main); 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; } /* ======================== 관련 시술(허브) 블록 — 글 하단 내부링크 (스포크 → 허브) ======================== */ .hblog-related { background: var(--hb-bg2); border-top: 1px solid var(--hb-border); padding: 64px 0; } .hblog-related-head { margin-bottom: 32px; } .hblog-related-eyebrow { font-size: var(--t-label, 11px); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hb-main); margin: 0 0 8px; } .hblog-related-title { font-size: var(--t-sub, 22px); color: var(--hb-text-strong); font-weight: 600; margin: 0; line-height: 1.4; } .hblog-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .hblog-related-card { display: flex; flex-direction: column; background: var(--hb-bg); 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); } .hblog-related-card:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); border-color: var(--hb-point-border); } .hblog-related-thumb { display: block; position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--hb-bg3); } .hblog-related-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--hb-ease); } .hblog-related-card:hover .hblog-related-thumb img { transform: scale(1.05); } .hblog-related-noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Cormorant SC', 'Sorts Mill Goudy', serif; font-size: 18px; letter-spacing: 0.1em; color: var(--hb-text-muted); } .hblog-related-body { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; flex: 1; } .hblog-related-name { font-size: var(--t-body, 16px); font-weight: 600; color: var(--hb-text-strong); line-height: 1.45; word-break: keep-all; transition: color 0.22s var(--hb-ease); } .hblog-related-card:hover .hblog-related-name { color: var(--hb-point); } .hblog-related-desc { font-size: var(--t-caption, 13px); color: var(--hb-text-sub); line-height: 1.7; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hblog-related-arr { margin-top: auto; padding-top: 10px; font-size: var(--t-label, 11px); letter-spacing: 0.04em; color: var(--hb-point); } @media (max-width: 1024px) { .hblog-related-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .hblog-related-grid { grid-template-columns: 1fr; } .hblog-related { padding: 44px 0; } } /* ======================== 쓰기폼 ======================== */ #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: 12px; border: 0; background: rgba(0,0,0,.07); color: var(--hb-text); font-size: var(--t-body, 16px); font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.2s var(--hb-ease); text-decoration: none; } .hblog-btn:hover { background: rgba(0,0,0,.12); color: var(--hb-text-strong); } /* 주요 버튼(등록완료/수정완료) — 플랫: 솔리드 메인색 */ .hblog-btn-primary { border: 0; background: var(--hb-point); color: var(--hb-on-point); } .hblog-btn-primary:hover { background: var(--hb-point); color: var(--hb-on-point); filter: brightness(1.08); transform: translateY(-1px); } /* 관련 시술 — 메뉴 검색 picker */ .hblog-menu-pick { position: relative; } .hblog-menu-results { display: none; list-style: none; margin: 6px 0 0; padding: 6px; border: 1px solid var(--hb-border); border-radius: var(--hb-radius); background: var(--hb-bg2); max-height: 260px; overflow-y: auto; } .hblog-menu-results .hb-menu-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--hb-radius); cursor: pointer; transition: background 0.15s var(--hb-ease); } .hblog-menu-results .hb-menu-item:hover { background: var(--hb-point-bg); } .hblog-menu-results .hb-menu-name { font-size: var(--t-caption, 13px); color: var(--hb-text-strong); font-weight: 500; } .hblog-menu-results .hb-menu-url { font-size: var(--t-label, 11px); color: var(--hb-text-muted); font-family: 'SF Mono', Menlo, monospace; } /* ======================== 페이지네이션 (그누보드 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: 0; border-radius: 0; background: transparent; box-shadow: none; font-family: 'Pretendard', sans-serif; font-size: var(--t-caption, 13px); color: var(--hb-text-muted); transition: color 0.2s var(--hb-ease); } #hiveBlog .pg_page:hover, #hiveBlogView .pg_page:hover { color: var(--hb-text-strong); } #hiveBlog .pg_current, #hiveBlogView .pg_current { background: transparent; color: var(--hb-point) !important; font-weight: 700; box-shadow: inset 0 -2px 0 var(--hb-point); } /* ======================== 댓글 ======================== */ #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: stretch; gap: 10px; padding: 12px 0; } .hblog-filter-inner > div { 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; } } /* ======================== 본문 디자인 블록 (.hbpost) — 글 본문(에디터)에 클래스만 붙여 쓰는 재사용 컴포넌트. 빌더 포인트색(--hb-point)·테마(--hb-text/--hb-border) 상속 → 다크/화이트 자동 대응. ======================== */ .hblog-content-col .hbpost{--p:var(--hb-point,#0b3b5c);--line:var(--hb-border,rgba(0,0,0,.1));--soft:var(--hb-bg2,rgba(0,0,0,.025));word-break:keep-all;line-height:1.78} .hblog-content-col .hbpost *{box-sizing:border-box} .hblog-content-col .hbpost .hbp-sec{margin:44px 0} /* 섹션 제목 — 좌측 포인트 바 */ .hblog-content-col .hbpost h2{position:relative;font-size:clamp(20px,3.2vw,25px);font-weight:800;margin:0 0 20px;padding-left:15px;line-height:1.35;letter-spacing:-.01em} .hblog-content-col .hbpost h2::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:4px;border-radius:3px;background:var(--p)} /* 타임라인 카드 — 포인트색 칩 라벨 */ .hblog-content-col .hbpost .hbp-cards{display:grid;gap:10px} .hblog-content-col .hbpost .hbp-card{display:grid;grid-template-columns:92px 1fr;gap:16px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:15px 18px;background:var(--soft)} .hblog-content-col .hbpost .hbp-when{display:block;text-align:center;font-weight:800;font-size:13px;color:#fff;background:var(--p);border-radius:30px;padding:6px 8px;white-space:nowrap} .hblog-content-col .hbpost .hbp-card p{margin:0;font-size:15px;color:var(--hb-text)} /* 체크리스트 — 원형 포인트 체크 (잔여 마커 제거) */ .hblog-content-col .hbpost ul.hbp-list{list-style:none!important;padding:0!important;margin:0;display:grid;gap:12px} .hblog-content-col .hbpost ul.hbp-list li{list-style:none!important;position:relative;padding:1px 0 1px 36px;margin:0;font-size:15.5px;min-height:24px} .hblog-content-col .hbpost ul.hbp-list li::marker{content:""!important} .hblog-content-col .hbpost ul.hbp-list li::before{content:"\2713";position:absolute;left:0;top:0;width:23px;height:23px;line-height:23px;text-align:center;font-size:13px;font-weight:700;color:#fff;background:var(--p);border-radius:50%} /* 강조·주의 — 좌측 포인트 바(색상 의존 적음) */ .hblog-content-col .hbpost .hbp-warn{border:1px solid var(--line);border-left:4px solid var(--p);border-radius:0 14px 14px 0;padding:16px 20px;background:var(--soft);font-size:15.5px} /* CTA — 버튼 색 강제(스킨 #id a 오버라이드 방지) */ .hblog-content-col .hbpost .hbp-cta{margin:42px 0 10px;padding:28px 26px;border-radius:18px;background:var(--p);color:#fff} .hblog-content-col .hbpost .hbp-cta b{display:block;font-size:18px;font-weight:800;margin-bottom:9px;color:#fff} .hblog-content-col .hbpost .hbp-cta>p{margin:0 0 18px;font-size:14.5px;color:#fff;opacity:.92} .hblog-content-col .hbpost .hbp-cta a.hbp-btn{display:inline-block;background:#fff!important;color:var(--p)!important;text-decoration:none!important;font-weight:800;padding:13px 24px;border-radius:11px;font-size:15px;box-shadow:0 6px 18px rgba(0,0,0,.18)} .hblog-content-col .hbpost .hbp-cta a.hbp-btn:hover{opacity:.94} .hblog-content-col .hbpost .hbp-cta .hbp-rel{margin-top:16px;font-size:14px;color:#fff;opacity:.95} .hblog-content-col .hbpost .hbp-cta .hbp-rel a{color:#fff!important;text-decoration:underline!important;font-weight:600} @media(max-width:560px){.hblog-content-col .hbpost .hbp-card{grid-template-columns:74px 1fr;gap:12px}} /* 핵심 요약 박스 — 인용문 스타일(아바타 + 텍스트 + 출처) */ .hblog-content-col .hblog-summary{display:flex;gap:18px;align-items:flex-start;margin:0 0 32px;padding:20px 24px;border:1px solid var(--hb-border);border-left:4px solid var(--hb-point,#0b3b5c);border-radius:0 14px 14px 0;background:var(--hb-bg2,rgba(0,0,0,.025));line-height:1.8;word-break:keep-all} .hblog-content-col .hblog-summary .hblog-sum-doc{flex:none;width:58px;height:58px;border-radius:50%;object-fit:cover;border:2px solid var(--hb-point,#0b3b5c);margin-top:2px} .hblog-content-col .hblog-summary .hblog-sum-text{flex:1;min-width:0;font-size:15.5px} .hblog-content-col .hblog-summary .hblog-sum-text p{margin:0 0 8px} .hblog-content-col .hblog-summary .hblog-sum-text p:last-child{margin-bottom:0} .hblog-content-col .hblog-summary .hblog-sum-cite{margin-top:12px;font-size:13px;color:var(--hb-text-sub)} .hblog-content-col .hblog-summary .hblog-sum-cite b{color:var(--hb-text-strong);font-weight:700} @media(max-width:560px){ .hblog-content-col .hblog-summary{gap:13px;padding:16px 18px} .hblog-content-col .hblog-summary .hblog-sum-doc{width:46px;height:46px} } /* 추가 업로드 이미지 갤러리 (대표 이미지 외) — auto-fit 으로 빈 영역 없이 꽉 채움 */ .hblog-content-col .hblog-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:32px 0} .hblog-content-col .hblog-gallery-item{display:block;aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid var(--hb-border)} .hblog-content-col .hblog-gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s var(--hb-ease,ease)} .hblog-content-col .hblog-gallery-item:hover img{transform:scale(1.04)}