:root { --bsw-bg: #faf7f1; --bsw-bg-alt: #f3eee4; --bsw-card: #ffffff; --bsw-ink: #1c1813; --bsw-ink-2: #3a322a; --bsw-muted: #6f6357; --bsw-faint: #7a6f62; /* 구 #a1968a — WCAG AA(4.5:1) 미달(2.7:1)이라 어둡게(bg 4.59·card 4.91), 2026-07-19 */ --bsw-line: #ebe4d6; --bsw-line-strong: #d8cdb9; --bsw-accent: #e85c2c; --bsw-accent-deep: #bf4317; --bsw-accent-deeper: #a83a12; /* 대비 강화용 최심 주황(bg 5.99) — 호버·soft 배경 위 텍스트 */ --bsw-accent-soft: #fde6da; --bsw-font-kr: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif; --bsw-font-orbit: 'Orbit', 'Pretendard', sans-serif; --bsw-container: 1198px; /* 1148 → +50 본문 너비 확대 (2026-07-20 운영자) */ --bsw-r-xs: 4px; /* 미세 장식(색 바·스트라이프) */ --bsw-r-sm: 6px; /* 칩·태그·작은 버튼 — 8→6, binsvina 수준으로 라운드 축소(신뢰감, 2026-07-21 운영자) */ --bsw-r-md: 9px; /* 카드·박스 기본 — 12→9 */ --bsw-r-lg: 12px; /* 큰 컨테이너(히어로·광고 프레임) — 16→12 */ --bsw-r-pill: 999px; --bsw-r-squircle: 32%; } /* Ticker and header stay together; JS measures their height for anchor clearance. */ :root { --bsw-header-height:87px; } .bsw-site-header { position:sticky; top:0; z-index:40; } @media (max-width:960px) { :root { --bsw-header-height:85px; } } @media print { .bsw-site-header { display:none; } } .bsw-topbar { background: var(--bsw-ink-2); color: var(--bsw-bg); } .bsw-topbar__inner { max-width: var(--bsw-container); padding: 0 40px; margin: 0 auto; display: flex; align-items: center; gap: 28px; min-height: 34px; } .bsw-ticker { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; font-size: 12px; } .bsw-ticker__label { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font-weight: 700; color: #ffbd9f; } .bsw-ticker__items { flex: 1; min-width: 0; opacity: 1; transition: opacity 200ms ease; } .bsw-ticker__items.is-leaving { opacity: 0; } .bsw-ticker__item { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 34px; line-height: 34px; color: inherit; text-decoration: none; } .bsw-ticker__item[hidden] { display: none; } .bsw-ticker__item:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .bsw-language-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 14px; margin-left: auto; font-size: 11.5px; flex-shrink: 0; } .bsw-language-nav a { display: inline-flex; align-items: center; min-height: 34px; color: inherit; text-decoration: none; white-space: nowrap; } .bsw-language-nav a[aria-current] { color: #ffbd9f; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; } .bsw-language-nav a:hover { color: #fff; text-decoration: underline; } .bsw-topbar :focus-visible { outline: 2px solid #ffbd9f; outline-offset: 2px; } @media (max-width: 960px) { .bsw-topbar__inner { padding: 0 18px; min-height: 30px; } .bsw-ticker { display: none; } .bsw-language-nav { gap: 0 18px; } .bsw-language-nav a { min-height: 30px; } } @media (prefers-reduced-motion: reduce) { .bsw-ticker__items { transition: none; } } @media print { .bsw-topbar { display: none; } } html:lang(ru) .bsw-nav--desktop { min-width: 0; } html:lang(ru) .bsw-nav--desktop a { white-space: normal; line-height: 1.35; } html:lang(ru) .bsw-hero h1 { overflow-wrap: anywhere; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* 목차 등 앵커 이동을 부드럽게. 단 '동작 줄이기' 사용자는 즉시 점프(멀미·접근성). 도착 보정은 heading의 scroll-margin-top이 담당. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { background: var(--bsw-bg); color: var(--bsw-ink); font-family: var(--bsw-font-kr); font-size: 15px; line-height: 1.65; } img { max-width: 100%; height: auto; } .bsw-icon { display: inline-block; flex-shrink: 0; vertical-align: -0.15em; } a { color: inherit; } *:focus { outline: none; } *:focus-visible { outline: 2px solid var(--bsw-accent); outline-offset: 2px; border-radius: var(--bsw-r-sm); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .bsw-skip-link { position: absolute; left: 12px; top: -40px; padding: 8px 14px; background: var(--bsw-accent); color: #fff; font-size: 13px; font-weight: 700; border-radius: var(--bsw-r-sm); text-decoration: none; z-index: 100; transition: top .15s; } .bsw-skip-link:focus { top: 8px; } .bsw-container { max-width: var(--bsw-container); margin: 0 auto; padding: 0 40px; } .bsw-container--narrow { max-width: 760px; } .bsw-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; margin-top: 36px; } /* 히어로↔피드 36px (2026-07-21 운영자) */ @media (max-width: 1000px) { .bsw-grid { grid-template-columns: 1fr; } } /* 좌(본문)·우(사이드바) 컬럼의 첫/끝 요소 상·하단 마진 제거 → 두 컬럼이 같은 선에서 시작·종료 + 카드/히어로 위, 푸터 아래 여백을 18px(.bsw-grid margin-top / .bsw-footer margin-top)으로 통일(이중 여백 방지). */ .bsw-grid > * > :first-child { margin-top: 0; } .bsw-grid > * > :last-child { margin-bottom: 0; } .bsw-header { position: relative; background: rgba(250,247,241,0.86); backdrop-filter: blur(12px); border-bottom: 1px solid var(--bsw-line); } /* 헤더 기본값. 데스크톱 압축은 아래 ≥961px 규칙, 모바일은 ≤960px 규칙에서 관리. */ .bsw-header__inner { max-width: var(--bsw-container); margin: 0 auto; padding: 18px 40px; display: flex; align-items: center; justify-content: space-between; gap: 28px; } .bsw-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; } .bsw-logo__mark { flex: 0 0 40px; box-sizing: border-box; width: 40px; height: 40px; border-radius: var(--bsw-r-sm); background: var(--bsw-accent); color: #fff; font-family: var(--bsw-font-orbit); font-weight: 900; font-size: 21px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding-bottom: 2px; } .bsw-logo__wordmark { display: flex; flex-direction: column; justify-content: center; gap: 2px; line-height: 1.12; } .bsw-logo__wordmark strong { font-family: var(--bsw-font-orbit); font-weight: 400; font-size: 18px; letter-spacing: 0.01em; color: var(--bsw-ink); height: 23px; } .bsw-logo__wordmark small { font-family: var(--bsw-font-orbit); font-size: 9.5px; letter-spacing: 0.18em; color: var(--bsw-muted); text-transform: uppercase; height: 12px; } .bsw-nav ul { display: flex; gap: 28px; list-style: none; padding: 0; margin: 0; } .bsw-nav a { font-size: 14px; font-weight: 500; color: var(--bsw-ink-2); text-decoration: none; display: inline-block; padding: 4px 0; } /* 터치 타깃 24px(PSI target-size) */ .bsw-nav a:hover { color: var(--bsw-accent); } .bsw-header__actions { display: flex; gap: 8px; align-items: center; } .bsw-searchform { display: inline-flex; gap: 4px; align-items: center; } .bsw-searchform input { padding: 8px 12px; border: 1px solid var(--bsw-line); border-radius: var(--bsw-r-sm); background: transparent; font-size: 13px; } .bsw-searchform button { width: 38px; height: 38px; border: 1px solid var(--bsw-line); background: transparent; border-radius: var(--bsw-r-md); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--bsw-ink-2); } .bsw-searchform button:hover { color: var(--bsw-accent); border-color: var(--bsw-line-strong); } /* 헤더 접이식 검색 — 돋보기 클릭 시 좌측으로 입력칸 확장 (JS 향상, no-JS면 항상 보임) */ .bsw-headsearch { display: flex; align-items: center; } .bsw-headsearch__input { width: 190px; padding: 8px 12px; border: 1px solid var(--bsw-line); border-radius: var(--bsw-r-md); background: transparent; font-family: inherit; font-size: 13px; color: var(--bsw-ink); transition: width .28s cubic-bezier(.2,.7,.3,1), opacity .2s ease, padding .28s ease, border-color .18s ease; } .bsw-headsearch__input::placeholder { color: var(--bsw-faint); } .bsw-headsearch__input:focus { outline: none; border-color: var(--bsw-accent); } .bsw-headsearch__btn { flex: 0 0 38px; width: 38px; height: 38px; margin-left: 6px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--bsw-line); background: transparent; border-radius: var(--bsw-r-md); color: var(--bsw-ink-2); cursor: pointer; transition: color .15s ease, background .15s ease, border-color .15s ease; } .bsw-headsearch__btn:hover { color: var(--bsw-accent); border-color: var(--bsw-line-strong); } /* JS 향상 시: 기본은 접힘 (데스크톱 전용 — 모바일은 별도 규칙) */ .bsw-headsearch:not(.bsw-headsearch--mobile).is-js .bsw-headsearch__input { width: 0; padding-left: 0; padding-right: 0; margin: 0; opacity: 0; border-color: transparent; pointer-events: none; } .bsw-headsearch:not(.bsw-headsearch--mobile).is-js.is-open .bsw-headsearch__input { width: 200px; padding: 8px 12px; opacity: 1; border-color: var(--bsw-line); pointer-events: auto; } .bsw-headsearch.is-js.is-open .bsw-headsearch__btn { background: var(--bsw-accent); border-color: var(--bsw-accent); color: #fff; } /* 모바일 검색 폼 — 데스크톱에선 숨김(모바일 상단바에서만 노출) */ .bsw-headsearch--mobile { display: none; } .bsw-cta { padding: 11px 18px; font-size: 13.5px; font-weight: 600; border-radius: var(--bsw-r-md); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .bsw-cta--ghost { background: transparent; color: var(--bsw-ink); border: 1px solid var(--bsw-line-strong); } .bsw-cta--outline { background: transparent; color: var(--bsw-ink); border: 1.5px solid var(--bsw-accent); } /* 데스크톱: 32px 컨트롤 + 상하 10px + 하단 선 = 53px. 긴 메뉴는 필요한 만큼 줄바꿈. */ @media (min-width: 961px) { .bsw-header { --bsw-header-control-size: 32px; } .bsw-header__inner { padding-top: 10px; padding-bottom: 10px; } .bsw-header .bsw-logo__mark, .bsw-header .bsw-headsearch__btn { flex-basis: var(--bsw-header-control-size); width: var(--bsw-header-control-size); } .bsw-header .bsw-logo__mark, .bsw-header .bsw-headsearch__btn, .bsw-header .bsw-headsearch__input, .bsw-header__actions .bsw-cta { height: var(--bsw-header-control-size); border-radius: var(--bsw-r-sm); } .bsw-header .bsw-logo__mark { font-size: 18px; } .bsw-header .bsw-logo__wordmark strong { height: 20px; font-size: 16px; } .bsw-header .bsw-headsearch__btn svg { width: 16px; height: 16px; } .bsw-header__actions .bsw-cta { padding: 0 10px; font-size: 12.5px; white-space: nowrap; } /* 러시아어 두 줄 메뉴도 컨트롤 높이에 맞춘다. */ html:lang(ru) .bsw-nav--desktop a { display: flex; align-items: center; min-height: 32px; padding-top: 0; padding-bottom: 0; font-size: 13px; line-height: 1.23; } } .bsw-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 36px; padding: 18px 0 0; } .bsw-hero h1 { font-size: 34px; font-weight: 800; line-height: 1.22; letter-spacing: -0.035em; margin: 14px 0 0; } .bsw-hero h1 em { font-style: normal; color: var(--bsw-accent); } .bsw-hero p { font-size: 14.5px; line-height: 1.65; color: var(--bsw-muted); margin: 14px 0 0; max-width: 440px; } .bsw-eyebrow { font-family: var(--bsw-font-orbit); font-size: 10.5px; letter-spacing: 0.24em; color: var(--bsw-accent-deep); font-weight: 700; text-transform: uppercase; } /* 피드 헤더 — "최신 글 LATEST" 한 줄, 밑선 없음 (2026-07-21 운영자) */ .bsw-feed__head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 0; border-bottom: 0; margin-bottom: -6px; } /* row-gap 24 보정 = 첫 카드와 18px */ .bsw-feed__head h2 { display: flex; align-items: baseline; gap: 10px; font-size: 17px; font-weight: 800; margin: 0; } /* 글 카드 전체 클릭(stretched-link): 제목 링크의 ::after가 카드 전면을 덮는다. 카테고리 pill·더 읽기 등 내부 링크는 z-index로 위층에 살려둠. */ /* 피드 = 2열 그리드 + 개방형 카드(박스·선 없음, 순수 여백 구분 — 2026-07-21 운영자 2차 확정). * 마크업 무변경: 카드 외 자식(헤더·인피드 광고·페이지네이션)은 전폭 행. * 인피드 광고 간격 4 = 2열의 배수라 광고 앞 줄이 항상 완결(그리드+광고 줄 깨짐 함정). * 좌우 균형: 행 stretch + 제목·부제 고정 높이(클램프+min-height) + 푸터 바닥 고정. */ /* 피드 = 1열 리스트(우아한형제들 레퍼런스 후 운영자 확정, 2026-07-21) */ .bsw-feed { display: grid; grid-template-columns: 1fr; row-gap: 24px; } .bsw-feed > *:not(.bsw-card) { grid-column: 1 / -1; } /* 카드 = 페이지 배경색 + 색 테두리, 호버는 카드 전체(테두리 강조·살짝 떠오름) */ .bsw-card { position: relative; background: transparent; border: 1px solid var(--bsw-line-strong); border-radius: var(--bsw-r-md); padding: 22px 24px; margin-bottom: 0; display: flex; flex-direction: column; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .bsw-card:hover { border-color: var(--bsw-accent); box-shadow: 0 6px 18px rgba(122, 96, 65, 0.10); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .bsw-card, .bsw-card:hover { transform: none; } } .bsw-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* 메타 = 날짜(좌) + NEW/UPDATED 칩(우) — Igniel 해부도(2026-07-21 운영자) */ .bsw-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; font-size: 13px; color: var(--bsw-muted); } .bsw-card__meta time { font-family: var(--bsw-font-orbit); letter-spacing: 0.04em; } /* 칩 — 굵게·정중앙(letter-spacing이 마지막 글자 뒤에도 붙어 우측 패딩을 1px 줄여 보정) */ .bsw-card__chip { display: inline-flex; align-items: center; justify-content: center; line-height: 1; font-family: var(--bsw-font-orbit); font-size: 9px; letter-spacing: 0.14em; font-weight: 800; padding: 5px 7px 5px 8px; border-radius: var(--bsw-r-sm); } .bsw-card__chip--updated { color: var(--bsw-accent-deeper); background: var(--bsw-accent-soft); } .bsw-card__chip--new { color: var(--bsw-muted); background: var(--bsw-bg-alt); } /* 제목 — 2줄 클램프만, min-height 예약 없음(비대칭 허용). 1열 전폭이라 19px */ .bsw-card h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.45; margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bsw-card h3 a { color: var(--bsw-ink); text-decoration: none; transition: color .15s ease; } .bsw-card:hover h3 a { color: var(--bsw-accent); } .bsw-card p { font-size: 14px; line-height: 1.65; color: var(--bsw-muted); margin: 0; } /* 내용 = 부제(2줄, 반강조) + 본문 도입(2줄, 옅게). 부제 없으면 도입부만 4줄 */ .bsw-card .bsw-card__sub { font-size: 14px; font-weight: 600; line-height: 1.6; color: var(--bsw-ink-2); margin-top: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bsw-card__excerpt { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin-top: 12px; } .bsw-card .bsw-card__excerpt--short { -webkit-line-clamp: 2; margin-top: 8px; } @media (max-width: 720px) { .bsw-feed { row-gap: 20px; } } /* 카드 헤더 — 제목+부제목을 묶고 왼쪽에 카테고리 색 세로 선(약간 두께감). */ .bsw-cat-pill { display: inline-flex; padding: 5px 11px; font-size: 12.5px; font-weight: 600; border-radius: var(--bsw-r-sm); background: var(--bsw-bg-alt); color: var(--bsw-ink-2); white-space: nowrap; } .bsw-cat-pill--sanjae-basics, .bsw-cat-pill--basics { background: var(--bsw-bg-alt); color: var(--bsw-muted); } .bsw-cat-pill--application, .bsw-cat-pill--apply { background: var(--bsw-bg-alt); color: var(--bsw-muted); } .bsw-cat-pill--compensation { background: var(--bsw-bg-alt); color: var(--bsw-muted); } .bsw-cat-pill--work-disease { background: var(--bsw-bg-alt); color: var(--bsw-muted); } .bsw-cat-pill--cases { background: var(--bsw-bg-alt); color: var(--bsw-muted); } .bsw-article { min-width: 0; } .bsw-article h1 { font-size: 32px; line-height: 1.3; font-weight: 800; margin: 0 0 16px; } .bsw-article__subtitle { display: block; margin-top: 10px; font-size: 15px; line-height: 1.65; font-weight: 400; color: var(--bsw-muted); letter-spacing: -0.02em; } .bsw-breadcrumb { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 12px; color: var(--bsw-faint); } .bsw-breadcrumb a { text-decoration: none; } .bsw-breadcrumb a.bsw-cat-pill { transition: filter .15s ease; } .bsw-breadcrumb a.bsw-cat-pill:hover { filter: brightness(.96); } .bsw-article__meta { display: grid; grid-template-columns:44px minmax(0, 1fr) auto; gap: 12px; align-items: start; font-size: 13px; color: var(--bsw-muted); padding-bottom: 24px; border-bottom: 1px solid var(--bsw-line); margin-bottom: 24px; } .bsw-article__tools { display: flex; align-items: center; gap: 12px; margin-left: auto; } /* 사진 옆 두 줄: 작성자·읽기 시간 / 발행·업데이트 날짜. */ .bsw-article__portrait { display:block; margin-top:1px; width:44px; height:44px; box-sizing:border-box; padding:2px; background:var(--bsw-line-strong); border-radius:var(--bsw-r-squircle); clip-path:path("M 22,0 C 4.4,0 0,4.4 0,22 0,39.6 4.4,44 22,44 39.6,44 44,39.6 44,22 44,4.4 39.6,0 22,0 Z"); } .bsw-article__meta img.avatar { display:block; margin:0; width:40px; height:40px; flex:none; border-radius:var(--bsw-r-squircle); object-fit:cover; clip-path:path("M 20,0 C 4,0 0,4 0,20 0,36 4,40 20,40 36,40 40,36 40,20 40,4 36,0 20,0 Z"); } .bsw-article__byline { flex:1; min-width:0; font-size:12px; line-height:1.6; } .bsw-article__author-row { min-height:20px; line-height:20px; display:flex; flex-wrap:wrap; align-items:center; gap:7px; } .bsw-article__author { color:var(--bsw-ink-2); font-size:13px; } .bsw-article__dates { min-height:24px; line-height:20px; display:flex; flex-wrap:wrap; align-items:center; gap:0 5px; margin-top:2px; } .bsw-date__label { color:var(--bsw-muted); } /* 날짜 행: 최신 수정일을 먼저 표시하고 최초 발행일은 네이티브 접기로 제공. */ .bsw-article__date-history { margin-top:2px; } .bsw-article__date-history > summary { display:flex; align-items:center; flex-wrap:wrap; gap:0 5px; min-height:24px; line-height:20px; width:fit-content; list-style:none; cursor:pointer; } .bsw-article__date-history > summary::-webkit-details-marker { display:none; } .bsw-article__date-history > summary:hover { color:var(--bsw-ink); } .bsw-article__date-history > summary:focus-visible { outline:2px solid var(--bsw-accent-deep); outline-offset:2px; border-radius:var(--bsw-r-xs); } .bsw-article__date-history > summary .bsw-icon { transition:transform .2s ease; } .bsw-article__date-history:not(.is-animated)[open] > summary .bsw-icon, .bsw-article__date-history.is-expanded > summary .bsw-icon { transform:rotate(180deg); } .bsw-date-history__panel { overflow:hidden; } .bsw-date-history__panel .bsw-article__dates { margin-top:0; } @media (prefers-reduced-motion:reduce) { .bsw-article__date-history > summary .bsw-icon { transition:none; } } .bsw-article__date-history time { font-variant-numeric:tabular-nums; } .bsw-article__dates time { font-variant-numeric:tabular-nums; } .bsw-article__body { font-size: var(--bsw-reading-size, 16px); line-height: 1.88; color: var(--bsw-ink-2); } /* 본문 인라인 링크 — 밑줄을 글자에서 띄우고(offset) 연한 주황 실선으로. 용어집(주황 점선·.glossaryLink)과 구분. 박스 컴포넌트 안 링크(출처·이어읽기·버튼 등)는 각자 클래스 스타일이 우선. */ .bsw-article__body p a:not([class]), .bsw-article__body > ul:not([class]) a:not([class]), .bsw-article__body > ol:not([class]) a:not([class]), .bsw-faq__a a:not([class]) { color: var(--bsw-ink); text-decoration: underline; text-decoration-color: rgba(232, 92, 44, 0.4); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .15s ease, text-decoration-color .15s ease; } .bsw-article__body p a:not([class]):hover, .bsw-article__body > ul:not([class]) a:not([class]):hover, .bsw-article__body > ol:not([class]) a:not([class]):hover, .bsw-faq__a a:not([class]):hover { color: var(--bsw-accent-deep); text-decoration-color: var(--bsw-accent); } /* h2 형광펜 — 인라인 래퍼에 칠해 두 줄 제목도 각 줄의 글자 폭만 따라가게 한다. */ .bsw-article__body h2 { font-size: 26px; line-height: 1.3; font-weight: 800; letter-spacing: -0.03em; margin: 36px 0 14px; color: var(--bsw-ink); } .bsw-article__body h2 .bsw-h2t { padding: 0 0.12em; margin: 0 -0.12em; background: linear-gradient(transparent 60%, var(--bsw-accent-soft) 60%, var(--bsw-accent-soft) 88%, transparent 88%); -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* 부속 영역 헤더(이어 읽기·참고 자료·태그·하단 관련글)는 data-toc="skip"이라 span이 안 감기므로 형광펜 자동 제외 */ /* 본문 h3 — h2 섹션 안에서 급여·항목 여러 개를 나눌 때의 소제목 (FAQ의 h3는 h3.bsw-faq__q가 특이도로 덮음) */ .bsw-article__body h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.025em; margin: 28px 0 10px; color: var(--bsw-ink); } /* 본문 직속(>) class 없는 리스트만 — 출처/저자/숏코드 박스 안 리스트는 건드리지 않음 */ .bsw-article__body > ul:not([class]), .bsw-article__body > ol:not([class]) { margin: 18px 0; padding-left: 26px; } .bsw-article__body > ul:not([class]) { list-style: disc; } .bsw-article__body > ol:not([class]) { list-style: decimal; } .bsw-article__body > ul:not([class]) li, .bsw-article__body > ol:not([class]) li { margin: 7px 0; padding-left: 4px; line-height: 1.8; } .bsw-article__body > ul:not([class]) li::marker { color: var(--bsw-accent); } .bsw-article__body > ol:not([class]) > li::marker { color: var(--bsw-accent-deep); font-family: var(--bsw-font-orbit); font-weight: 700; } .bsw-article__body > ul:not([class]) ul, .bsw-article__body > ul:not([class]) ol, .bsw-article__body > ol:not([class]) ul, .bsw-article__body > ol:not([class]) ol { margin: 7px 0; } .bsw-tags { margin-top: 36px; } /* 본문 후미 섹션 리듬 36px 통일(2026-07-21 운영자) */ /* 새 순서: 본문(출처)→태그→저자박스→댓글. 태그~저자 18px, 출처 아래(=태그 위) 18px */ /* 라벨이 상자 위로 ~13px 솟으므로 +13 보정해야 눈에 보이는 간격이 36px */ .bsw-tags + .bsw-author { margin-top: 49px; } /* 저자박스 위(18px)와 통일 — 박스 아래 댓글 섹션까지 18px */ .bsw-tags__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; } .bsw-tags__head h2 { flex: 0 0 auto; white-space: nowrap; font-size: 17px; font-weight: 800; margin: 0; } .bsw-tags__list { display: flex; flex-wrap: wrap; gap: 8px; } .bsw-tags a { padding: 5px 11px; font-size: 12.5px; color: var(--bsw-ink-2); border: 1px solid var(--bsw-line); background: var(--bsw-card); border-radius: var(--bsw-r-sm); text-decoration: none; transition: color .15s ease, border-color .15s ease; } .bsw-tags a:hover { color: var(--bsw-accent); border-color: var(--bsw-accent); } .bsw-notice { margin: 24px 0; padding: 14px 18px; border-radius: var(--bsw-r-md); background: var(--bsw-accent-soft); border: 1px solid rgba(232,92,44,0.2); } .bsw-notice--warn { background: #fef9ed; border-color: #f1e3b8; } .bsw-notice--info { background: var(--bsw-accent-soft); border-color: rgba(232,92,44,0.2); } .bsw-notice--tip { background: #eaf3ec; border-color: #bbd6c1; } .bsw-notice strong { display: block; color: var(--bsw-accent-deep); margin-bottom: 6px; } /* 첫/마지막 자식 margin 제거 → 위·아래 여백을 padding(14px)으로 대칭 유지 */ .bsw-notice > :first-child { margin-top: 0; } .bsw-notice > :last-child { margin-bottom: 0; } /* ─── [notice] 라인 SVG 배지 + 좌측 컬러바 (시안 B안) ─── */ .bsw-notice--icon { position: relative; display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start; padding: 16px 18px 16px 20px; border-radius: var(--bsw-r-md); border: 1px solid; overflow: hidden; } .bsw-notice--icon::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; } .bsw-notice__icon { width: 38px; height: 38px; border-radius: var(--bsw-r-md); display: inline-flex; align-items: center; justify-content: center; } .bsw-notice__icon svg { width: 20px; height: 20px; } .bsw-notice__label { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: 0.01em; margin-bottom: 4px; } .bsw-notice__body { font-size: 14px; line-height: 1.72; color: var(--bsw-ink-2); } /* 숏코드 notice 본문 속 강조는 문장 흐름 유지 — 위 .bsw-notice strong(block, 사이드바 제목용)을 되돌림 */ .bsw-notice__body strong { display: inline; color: inherit; margin: 0; font-weight: 700; } .bsw-notice__body > :first-child { margin-top: 0; } .bsw-notice__body > :last-child { margin-bottom: 0; } .bsw-notice--icon.bsw-notice--warn { background: #fef9ed; border-color: #f1e3b8; } .bsw-notice--icon.bsw-notice--warn::before { background: #d8a72a; } .bsw-notice--icon.bsw-notice--warn .bsw-notice__icon { background: #f7edcf; color: #7a5a14; } .bsw-notice--icon.bsw-notice--warn .bsw-notice__label { color: #7a5a14; } .bsw-notice--icon.bsw-notice--info { background: var(--bsw-accent-soft); border-color: rgba(232,92,44,0.22); } .bsw-notice--icon.bsw-notice--info::before { background: var(--bsw-accent); } .bsw-notice--icon.bsw-notice--info .bsw-notice__icon { background: #fbd3c2; color: var(--bsw-accent-deep); } .bsw-notice--icon.bsw-notice--info .bsw-notice__label { color: var(--bsw-accent-deep); } .bsw-notice--icon.bsw-notice--tip { background: #eaf3ec; border-color: #bbd6c1; } .bsw-notice--icon.bsw-notice--tip::before { background: #4f9266; } .bsw-notice--icon.bsw-notice--tip .bsw-notice__icon { background: #d6e8da; color: #3f7a4f; } .bsw-notice--icon.bsw-notice--tip .bsw-notice__label { color: #3f7a4f; } .bsw-notice--bar { position: relative; padding: 0 0 0 16px; border: 0; border-radius: 0; background: transparent; } .bsw-notice--bar::before { content: ""; position: absolute; left: 0; top: .35em; bottom: .35em; width: 3px; border-radius: var(--bsw-r-pill); background: rgba(232,92,44,.5); background: color-mix(in srgb, var(--bsw-accent) 50%, transparent); } .bsw-notice--bar.bsw-notice--warn::before { background: rgba(216,167,42,.55); } .bsw-notice--bar.bsw-notice--tip::before { background: rgba(79,146,102,.5); } .bsw-notice--bar .bsw-notice__body { font-size: inherit; line-height: inherit; color: var(--bsw-ink); } /* ─── [quote] 인용 — 좌상단/우하단 따옴표 + 우상단·좌하단 '끊긴 실선' 틀 ─── */ .bsw-quote { position: relative; margin: 40px 0; text-align: center; padding: 40px 42px; font-size: 17px; line-height: 1.8; font-weight: 400; color: var(--bsw-ink-2); text-wrap: balance; } /* 짧은 코너 실선: 우상단 ㄱ자(윗변+오른변) · 좌하단 ㄴ자(아랫변+왼변) — 40px 코너 틱 */ .bsw-quote::before, .bsw-quote::after { content: ""; position: absolute; width: 40px; height: 40px; pointer-events: none; } .bsw-quote::before { top: 0; right: 0; border-top: 1px solid var(--bsw-line-strong); border-right: 1px solid var(--bsw-line-strong); border-top-right-radius: 4px; } .bsw-quote::after { bottom: 0; left: 0; border-bottom: 1px solid var(--bsw-line-strong); border-left: 1px solid var(--bsw-line-strong); border-bottom-left-radius: 4px; } /* 따옴표 글리프 — 여는("): 좌상단 모서리, 닫는("): 우하단 모서리 (대각선 끝에 가깝게) */ .bsw-quote__open, .bsw-quote__close { position: absolute; font-family: Georgia, "Times New Roman", serif; font-size: 40px; line-height: 1; color: var(--bsw-accent); } .bsw-quote__open { top: 8px; left: 8px; transform: rotate(180deg); } .bsw-quote__close { right: 8px; bottom: 8px; } .bsw-quote p { position: relative; margin: 0; } /* cite는 항상 자기 줄에 — inline-flex였을 때 마지막 텍스트 줄에 붙으면서 margin-top이 그 줄 높이를 부풀려 * 위 줄과의 간격이 벌어져 보이던 문제(2026-07-05) 수정. */ .bsw-quote cite { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 16px; font-size: 12.5px; font-weight: 400; font-style: normal; letter-spacing: 0; color: var(--bsw-muted); } .bsw-quote cite::before { content: ""; width: 22px; height: 1px; background: var(--bsw-line-strong); } /* ─── [tldr] 번호 요약 (시안 C안) ─── */ .bsw-tldr { background: var(--bsw-accent-soft); border-radius: var(--bsw-r-lg); padding: 20px 22px; margin: 24px 0; } .bsw-tldr__eyebrow { display: block; font-family: var(--bsw-font-orbit); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bsw-accent-deep); font-weight: 700; margin-bottom: 12px; } .bsw-tldr__list { margin: 0; padding: 0; list-style: none; counter-reset: bsw-t; display: flex; flex-direction: column; gap: 12px; } .bsw-tldr__list li { counter-increment: bsw-t; display: grid; grid-template-columns: 26px 1fr; gap: 12px; font-size: 14.5px; color: var(--bsw-ink-2); line-height: 1.6; } .bsw-tldr__list li::before { content: counter(bsw-t, decimal-leading-zero); font-family: var(--bsw-font-orbit); font-size: 13px; color: var(--bsw-accent-deep); font-weight: 700; } .bsw-tldr__text { min-width: 0; } /* ─── [steps] 타임라인 (시안 B안) ─── */ .bsw-steps { list-style: none; padding: 0; margin: 24px 0; } .bsw-steps li { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 16px; padding: 0 0 22px; } .bsw-steps li::before { content: ""; position: absolute; left: 17px; top: 34px; bottom: -2px; width: 2px; background: linear-gradient(var(--bsw-accent-soft), var(--bsw-line)); } .bsw-steps li:last-child { padding-bottom: 0; } .bsw-steps li:last-child::before { display: none; } .bsw-step-num { width: 36px; height: 36px; border-radius: var(--bsw-r-pill); background: var(--bsw-accent-soft); color: var(--bsw-accent-deep); box-shadow: inset 0 0 0 1px rgba(232,92,44,0.28), 0 0 0 4px var(--bsw-bg); display: flex; align-items: center; justify-content: center; font-family: var(--bsw-font-kr); font-variant-numeric:tabular-nums; font-weight: 600; font-size: 15px; line-height: 1; z-index: 1; } .bsw-step-body { min-width: 0; } .bsw-step-body strong { display:flex; align-items:center; min-height:36px; line-height:1.5; padding-top:0; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: var(--bsw-ink); } .bsw-step-body span { display: block; margin-top: 5px; font-size: 14.5px; line-height: 1.65; color: var(--bsw-muted); } /* ─── [checklist] 채움 체크마크 (시안 B안) ─── */ .bsw-checklist { list-style: none; padding: 0; margin: 24px 0; display: flex; flex-direction: column; } .bsw-checklist li { display: grid; grid-template-columns: 24px 1fr; gap: 11px; padding: 9px 0; align-items: start; font-size: 15px; color: var(--bsw-ink-2); } .bsw-checklist li:not(:last-child) { border-bottom: 1px dashed var(--bsw-line); } .bsw-checklist__text { min-width: 0; } .bsw-check { width: 22px; height: 22px; border-radius: var(--bsw-r-sm); background: var(--bsw-accent); display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; } .bsw-check svg { width: 14px; height: 14px; color: #fff; } /* ─── [kv] accent 라벨 + 줄무늬 (시안 B안) ─── */ .bsw-kv { display: grid; grid-template-columns: 170px 1fr; border: 1px solid var(--bsw-line-strong); border-radius: var(--bsw-r-md); overflow: hidden; margin: 24px 0; } .bsw-kv dt, .bsw-kv dd { padding: 13px 18px; margin: 0; font-size: 14px; border-bottom: 1px solid var(--bsw-line); } .bsw-kv dt { font-weight: 700; color: var(--bsw-accent-deep); background: var(--bsw-accent-soft); } .bsw-kv dd { color: var(--bsw-ink-2); background: var(--bsw-card); } .bsw-kv dt:last-of-type, .bsw-kv dd:last-of-type { border-bottom: none; } /* ─── [mythfact] 오해→사실 팩트체크 쌍 (v0.6.60) ─── */ .bsw-mythfact { border: 1px solid var(--bsw-line-strong); border-radius: var(--bsw-r-md); overflow: hidden; margin: 24px 0; background: var(--bsw-card); } .bsw-mythfact__pair { border-bottom: 1px solid var(--bsw-line); } .bsw-mythfact__pair:last-child { border-bottom: none; } .bsw-mythfact__row { display: flex; align-items: flex-start; gap: 10px; padding: 11px 16px; font-size: 13.5px; line-height: 1.6; } .bsw-mythfact__row--myth { background: var(--bsw-bg); color: var(--bsw-muted); padding-bottom: 8px; } .bsw-mythfact__row--fact { padding-top: 9px; color: var(--bsw-ink-2); } .bsw-mythfact__tag { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; margin-top: 1px; border-radius: var(--bsw-r-sm); } .bsw-mythfact__row--myth .bsw-mythfact__tag { background: var(--bsw-line); color: var(--bsw-muted); } .bsw-mythfact__row--fact .bsw-mythfact__tag { background: var(--bsw-accent-soft); color: var(--bsw-accent-deep); } .bsw-mythfact__tag svg { width: 11px; height: 11px; } /* ─── [compare] 장단점 O/X (시안 B안) ─── */ .bsw-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 24px 0; } /* wpautop이 [col] 사이에 끼워넣는
/빈

가 그리드 칸을 차지하지 않도록 제거 */ .bsw-compare > br, .bsw-compare > p:empty { display: none; } .bsw-compare__col { border: 1px solid var(--bsw-line); border-radius: var(--bsw-r-md); overflow: hidden; background: var(--bsw-card); } .bsw-compare__h { display: flex; align-items: center; gap: 8px; padding: 11px 16px; font-weight: 800; font-size: 13.5px; background: var(--bsw-bg-alt); color: var(--bsw-ink); } .bsw-compare__h svg { width: 18px; height: 18px; } .bsw-compare__col--pro .bsw-compare__h { background: #eaf3ec; color: #3f7a4f; } .bsw-compare__col--con .bsw-compare__h { background: #fbeae3; color: var(--bsw-accent-deep); } .bsw-compare__list { list-style: none; margin: 0; padding: 12px 16px; display: flex; flex-direction: column; gap: 9px; } .bsw-compare__list li { position: relative; padding-left: 16px; font-size: 13.5px; color: var(--bsw-ink-2); line-height: 1.55; } .bsw-compare__list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: var(--bsw-r-pill); background: var(--bsw-line-strong); } .bsw-compare__col--pro .bsw-compare__list li::before { background: #4f9266; } .bsw-compare__col--con .bsw-compare__list li::before { background: var(--bsw-accent); } .bsw-compare__free { padding: 12px 16px; font-size: 14px; line-height: 1.65; color: var(--bsw-ink-2); } @media (max-width: 520px) { .bsw-compare { grid-template-columns: 1fr; } } /* 공용 스포일러의 상태 pill. 네이티브 details로 키보드·JS 미지원 대응. */ .bsw-spoiler, .bsw-accordion { margin:24px 0; border:1px solid var(--bsw-line-strong); border-radius:var(--bsw-r-md); background:var(--bsw-bg); overflow:hidden; } .bsw-spoiler > summary, .bsw-accordion__item > summary { display:flex; align-items:center; gap:16px; padding:17px 20px; min-height:60px; list-style:none; cursor:pointer; font-size:15px; line-height:1.6; font-weight:600; color:var(--bsw-ink-2); } .bsw-spoiler > summary::-webkit-details-marker, .bsw-accordion__item > summary::-webkit-details-marker { display:none; } .bsw-spoiler > summary > span:first-child, .bsw-accordion__item > summary > span { min-width:0; overflow-wrap:anywhere; } .bsw-spoiler > summary:hover, .bsw-accordion__item > summary:hover { background:var(--bsw-bg-alt); } .bsw-spoiler > summary:focus-visible, .bsw-accordion__item > summary:focus-visible { outline:2px solid var(--bsw-accent-deep); outline-offset:-3px; } .bsw-spoiler__state { margin-left:auto; flex:none; padding:4px 11px; border-radius:var(--bsw-r-pill); color:#fff; background:var(--bsw-accent-deep); font-size:11px; font-weight:500; white-space:nowrap; } .bsw-spoiler__opened, .bsw-spoiler[open] .bsw-spoiler__closed { display:none; } .bsw-spoiler[open] .bsw-spoiler__opened { display:inline; } .bsw-spoiler__body, .bsw-accordion__body { padding:0 20px 20px; font-size:16px; overflow-wrap:anywhere; } .bsw-spoiler__body > :first-child, .bsw-accordion__body > :first-child { margin-top:0; } .bsw-spoiler__body > :last-child, .bsw-accordion__body > :last-child { margin-bottom:0; } .bsw-accordion__item + .bsw-accordion__item { border-top:1px solid var(--bsw-line); } .bsw-accordion__item > summary .bsw-icon { flex:none; margin-left:auto; } .bsw-accordion__item > summary .bsw-accordion__minus, .bsw-accordion__item[open] > summary .bsw-accordion__plus { display:none; } .bsw-accordion__item[open] > summary .bsw-accordion__minus { display:block; } .bsw-accordion__item[open] > summary { color:var(--bsw-accent-deeper); } /* ─── [btn] soft(ghost) 변형 ─── */ .bsw-cta--soft { background: var(--bsw-accent-soft); color: var(--bsw-accent-deep); border: 1px solid transparent; } .bsw-cta--soft:hover { background: #fbd3c2; } /* ─── [related] 카드 + 화살표 (시안 B안) ─── */ .bsw-related-inline { display: flex; align-items: flex-start; gap: 16px; background: var(--bsw-card); border: 1px solid var(--bsw-line); border-radius: var(--bsw-r-md); padding: 15px 18px; text-decoration: none; margin: 24px 0; transition: border-color .15s ease; } .bsw-related-inline:hover { border-color: var(--bsw-accent); } .bsw-related-inline__ic { flex: 0 0 42px; width: 42px; height: 42px; border-radius: var(--bsw-r-md); background: var(--bsw-accent-soft); color: var(--bsw-accent-deep); display: inline-flex; align-items: center; justify-content: center; } .bsw-related-inline__ic svg { width: 20px; height: 20px; } .bsw-related-inline__tx { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; } .bsw-related-inline__tx .bsw-eyebrow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bsw-related-inline__tx strong { display: block; font-size: 15px; line-height: 1.3; color: var(--bsw-ink); letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bsw-related-inline__ex { font-size: 12.5px; line-height: 1.5; color: var(--bsw-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bsw-related-inline__ar { flex: 0 0 auto; align-self: center; margin-left: 12px; color: var(--bsw-faint); font-size: 18px; } /* 이어 읽기 — 본문 끝 편집 링크(인프로즈). 박스 없이 가는 선 + 화살표 텍스트 링크. 하단 자동 관련글(.bsw-related)과 결 구분. */ /* 위 여백 36px = 본문 h2 섹션 전환 리듬과 동일(마지막 문단→점선). 점선→헤더는 18px 유지. */ .bsw-readnext { margin: 36px 0 0; } .bsw-readnext + .bsw-sources { margin-top: 36px; } .bsw-readnext__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; } .bsw-readnext__head h2 { flex: 0 0 auto; white-space: nowrap; font-size: 17px; font-weight: 800; margin: 0; } .bsw-readnext__list { list-style: none; margin: 0; padding: 0; } .bsw-readnext__item { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 5px 0; font-size: 13px; line-height: 1.55; } .bsw-readnext__arw { flex: 0 0 auto; color: var(--bsw-accent); font-size: 12px; } .bsw-readnext__tx { min-width: 0; } .bsw-readnext__lnk { text-decoration: none; color: var(--bsw-ink-2); } .bsw-readnext__lnk .bsw-readnext__tx { border-bottom: 1px solid transparent; transition: color .15s ease, border-color .15s ease; } .bsw-readnext__lnk:hover .bsw-readnext__tx { color: var(--bsw-accent-deep); border-bottom-color: var(--bsw-accent); } .bsw-readnext__cat { margin-left: 8px; font-size: 11.5px; color: var(--bsw-faint); } .bsw-readnext__item--soon { color: var(--bsw-muted); } .bsw-readnext__item--soon .bsw-readnext__arw { color: var(--bsw-faint); } .bsw-readnext__soon { margin-left: 6px; font-size: 12px; color: var(--bsw-faint); } /* FAQ — Q1은 열고 Q2부터 접는 다중 아코디언 ([faq]+[q]) */ .bsw-faq { margin: 8px 0; border: 1px solid var(--bsw-line-strong); border-radius: var(--bsw-r-md); background: transparent; overflow: hidden; } .bsw-faq__item + .bsw-faq__item { border-top: 1px solid var(--bsw-line); } .bsw-faq__q { display: flex; align-items: baseline; gap: 10px; min-height: 60px; padding: 15px 18px; list-style: none; cursor: pointer; color: var(--bsw-ink); transition: background .15s ease, color .15s ease; } .bsw-faq__q::-webkit-details-marker { display: none; } .bsw-faq__q:hover { background: var(--bsw-bg-alt); } .bsw-faq__q:focus-visible { outline: 2px solid var(--bsw-accent-deep); outline-offset: -3px; } .bsw-faq__badge { flex: 0 0 34px; font-family: 'Chakra Petch', var(--bsw-font-orbit); font-size: 14px; line-height: 1.55; font-weight: 700; letter-spacing: 0.04em; color: var(--bsw-accent); } .bsw-faq__qtx { min-width: 0; font-size: 16px; line-height: 1.55; font-weight: 700; letter-spacing: -0.015em; } .bsw-faq__q .bsw-icon { flex: none; align-self: center; margin-left: auto; } .bsw-faq__minus, .bsw-faq__item[open] .bsw-faq__plus { display: none; } .bsw-faq__item[open] .bsw-faq__minus { display: block; } .bsw-faq__item[open] > .bsw-faq__q { color: var(--bsw-accent-deeper); } .bsw-faq__a { padding: 0 18px 18px 62px; color: var(--bsw-ink-2); } .bsw-faq__a p { margin: 0 0 8px; } .bsw-faq__a p:last-child { margin-bottom: 0; } @media (max-width: 768px) { .bsw-faq__q { min-height: 56px; padding: 13px 14px; } .bsw-faq__badge { flex-basis: 28px; } .bsw-faq__a { padding: 0 14px 16px 52px; } } /* ─── [carousel] 이미지 캐러셀 — 좌우 넘김(스크롤 스냅) + 클릭 원본(라이트박스) ─── */ .bsw-carousel { margin: 24px 0; } .bsw-carousel__label { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 800; color: var(--bsw-ink); text-align: center; } .bsw-carousel__label::before { content: "["; margin-right: .2em; } .bsw-carousel__label::after { content: "]"; margin-left: .2em; } .bsw-carousel__stage { position: relative; } .bsw-carousel__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .bsw-carousel__viewport::-webkit-scrollbar { display: none; } .bsw-carousel__track { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; } .bsw-carousel__item { flex: 0 0 calc((100% - 10px) / 2); min-width: 0; scroll-snap-align: start; } .bsw-carousel[data-per="1"] .bsw-carousel__item { flex-basis: 100%; } .bsw-carousel[data-per="3"] .bsw-carousel__item { flex-basis: calc((100% - 20px) / 3); } .bsw-carousel__zoom { display: block; width: 100%; padding: 0; border: 1px solid var(--bsw-line-strong); border-radius: var(--bsw-r-md); overflow: hidden; background: var(--bsw-card); cursor: zoom-in; transition: border-color .15s ease; } .bsw-carousel__zoom:hover { border-color: var(--bsw-accent); } .bsw-carousel__zoom img { display: block; width: 100%; height: auto; } .bsw-carousel__cap { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--bsw-muted); text-align: center; } .bsw-carousel__btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--bsw-line-strong); border-radius: var(--bsw-r-pill); background: rgba(255,255,255,.94); color: var(--bsw-ink-2); cursor: pointer; box-shadow: 0 2px 8px rgba(28,24,19,.10); transition: color .15s ease, border-color .15s ease; } .bsw-carousel__btn svg { width: 16px; height: 16px; } .bsw-carousel__btn:hover { color: var(--bsw-accent-deep); border-color: var(--bsw-accent); } .bsw-carousel__btn[disabled] { opacity: .35; cursor: default; pointer-events: none; } .bsw-carousel__btn--prev { left: -10px; } .bsw-carousel__btn--next { right: -10px; } .bsw-carousel__count { display: block; margin-top: 8px; text-align: center; font-family: 'Chakra Petch', var(--bsw-font-orbit); font-size: 12px; letter-spacing: .06em; color: var(--bsw-faint); } .bsw-carousel--static .bsw-carousel__btn, .bsw-carousel--static .bsw-carousel__count { display: none; } @media (max-width: 640px) { .bsw-carousel[data-per] .bsw-carousel__item { flex-basis: 100%; } } /* 라이트박스 — 캐러셀 이미지 원본 보기 (carousel.js가 body 끝에 생성) */ .bsw-lightbox { position: fixed; inset: 0; z-index: 60; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 4vh 4vw; background: rgba(28, 24, 19, .84); cursor: zoom-out; } .bsw-lightbox.is-open { display: flex; } .bsw-lightbox__img { max-width: 100%; max-height: 86vh; border-radius: var(--bsw-r-sm); background: #fff; box-shadow: 0 12px 48px rgba(0, 0, 0, .4); } .bsw-lightbox__cap { font-size: 13px; color: #fff; text-align: center; } .bsw-lightbox__close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border: none; border-radius: var(--bsw-r-pill); background: rgba(255,255,255,.14); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; } .bsw-lightbox__close:hover { background: rgba(255,255,255,.26); } .bsw-lightbox-open { overflow: hidden; } /* 댓글 허니팟 — 사람 눈·포커스 밖으로 (display:none은 일부 봇이 감지하므로 오프스크린 방식) */ .bsw-hp-wrap { position: absolute !important; left: -9999px !important; top: -9999px !important; height: 1px; width: 1px; overflow: hidden; } /* ─── [calc] 인터랙티브 계산기 — 도구 기능군(현재 hueop=1일 휴업급여 어림). 컴팩트 카드. ─── */ .bsw-calc { margin: 24px 0; padding: 18px; border: 1px solid var(--bsw-line-strong); border-radius: var(--bsw-r-md); background: var(--bsw-card); } .bsw-calc__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; } .bsw-calc__label { font-family: 'Orbit', var(--bsw-font-kr); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--bsw-accent); } .bsw-calc__title { font-size: 15.5px; font-weight: 800; color: var(--bsw-ink); letter-spacing: -0.02em; } .bsw-calc__row { display: grid; grid-template-columns: 230px 1fr; gap: 10px; align-items: center; margin-bottom: 12px; } .bsw-calc__row label { font-size: 13px; color: var(--bsw-muted); } .bsw-calc__in { width: 100%; padding: 8px 12px; border: 1px solid var(--bsw-line-strong); border-radius: var(--bsw-r-sm); background: var(--bsw-bg); font-size: 14px; text-align: right; color: var(--bsw-ink); font-variant-numeric: tabular-nums; } .bsw-calc__in:focus { outline: none; border-color: var(--bsw-accent); } .bsw-calc__btn { padding: 9px 18px; border: none; border-radius: var(--bsw-r-sm); background: var(--bsw-accent); color: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background .15s ease; } .bsw-calc__btn:hover { background: var(--bsw-accent-deep); } .bsw-calc__out { margin: 14px 0 0; padding: 12px 14px; display: grid; grid-template-columns: 230px 1fr; gap: 8px 10px; background: var(--bsw-bg-alt); border-radius: var(--bsw-r-sm); } .bsw-calc__out dt { font-size: 13px; color: var(--bsw-muted); } .bsw-calc__out dd { margin: 0; font-size: 14px; font-weight: 700; text-align: right; color: var(--bsw-ink); font-variant-numeric: tabular-nums; } .bsw-calc__out dd[data-calc="daily"] { font-size: 15.5px; color: var(--bsw-accent-deep); } .bsw-calc__note { margin: 12px 0 0; font-size: 12px; line-height: 1.6; color: var(--bsw-faint); } @media (max-width: 640px) { .bsw-calc__row, .bsw-calc__out { grid-template-columns: 1fr; gap: 5px; } .bsw-calc__out dd { text-align: left; padding-bottom: 4px; } .bsw-calc__btn { width: 100%; } } .bsw-sources { margin-top: 36px; } .bsw-sources header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; } .bsw-sources h2 { flex: 0 0 auto; white-space: nowrap; font-size: 17px; font-weight: 800; margin: 0; } .bsw-sources__checked { margin-left: auto; font-size: 11.5px; color: var(--bsw-faint); letter-spacing: -0.005em; } .bsw-sources ul { list-style: none; padding: 0; margin: 0; } .bsw-sources li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--bsw-line); } .bsw-sources li:last-child { border-bottom: none; padding-bottom: 0; } .bsw-source-kind { flex: 0 0 auto; white-space: nowrap; padding: 2px 8px; font-size: 11px; font-weight: 700; border-radius: var(--bsw-r-xs); background: var(--bsw-bg-alt); color: var(--bsw-ink-2); } .bsw-source-kind--law { background: #f3ece1; color: #7a6041; } .bsw-source-kind--case { background: #e3eee1; color: #3f7a4f; } .bsw-source-kind--official { background: #e2edf5; color: #235a93; } .bsw-source-kind--news { background: var(--bsw-bg-alt); color: var(--bsw-muted); } .bsw-sources a, .bsw-sources__label { flex: 1; min-width: 0; color: var(--bsw-ink-2); text-decoration: none; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bsw-sources__arrow { flex: 0 0 auto; color: var(--bsw-faint); } .bsw-sources a:hover { color: var(--bsw-accent); } /* 본문 목차 (TOC) — 시안 InlineToc 일치 */ .bsw-toc { margin: 0 0 32px; border: 1px solid var(--bsw-line); border-radius: var(--bsw-r-md); background: var(--bsw-bg-alt); overflow: hidden; } .bsw-toc__head { list-style: none; cursor: pointer; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .bsw-toc__head::-webkit-details-marker { display: none; } .bsw-toc__head::marker { content: ''; } .bsw-toc__titles { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .bsw-toc__kicker { letter-spacing: 0.22em; } .bsw-toc__label { font-size: 14px; font-weight: 700; color: var(--bsw-ink); letter-spacing: -0.025em; } .bsw-toc__count { font-family: var(--bsw-font-orbit); font-size: 10.5px; letter-spacing: 0.12em; color: var(--bsw-faint); } .bsw-toc__chevron { display: inline-flex; color: var(--bsw-muted); transition: transform .18s ease; } .bsw-toc[open] .bsw-toc__chevron { transform: rotate(180deg); } .bsw-toc__list { list-style: none; margin: 0; padding: 4px 20px 16px; border-top: 1px solid var(--bsw-line); } .bsw-toc__list a { display: flex; align-items: center; gap: 14px; padding: 10px 0; text-decoration: none; border-bottom: 1px solid var(--bsw-line); } .bsw-toc__list li:last-child a { border-bottom: none; } .bsw-toc__num { font-family: var(--bsw-font-orbit); font-size: 11px; color: var(--bsw-accent); letter-spacing: 0.04em; flex: 0 0 22px; } .bsw-toc__text { font-size: 14px; line-height: 1.45; color: var(--bsw-ink-2); font-weight: 500; letter-spacing: -0.015em; } .bsw-toc__list a:hover .bsw-toc__text { color: var(--bsw-accent); } /* 앵커 점프 시 스티키 헤더에 가리지 않도록 여백 확보 */ .bsw-article__body h2 { scroll-margin-top: calc(var(--bsw-header-height) + 18px); } .bsw-sidebar > * { margin-bottom: 18px; } .bsw-popular { background: var(--bsw-card); border: 1px solid var(--bsw-line); border-radius: var(--bsw-r-lg); padding: 20px; } .bsw-popular h3 { font-size: 14px; font-weight: 800; margin: 0 0 16px; } .bsw-popular ol { list-style: none; padding: 0; counter-reset: pop; margin: 0; } .bsw-popular li { counter-increment: pop; padding: 9px 0; border-bottom: 1px solid var(--bsw-line); font-size: 13px; } .bsw-popular li:last-child { border-bottom: none; } .bsw-popular li::before { content: counter(pop, decimal-leading-zero); display: inline-block; width: 22px; height: 22px; border-radius: var(--bsw-r-sm); background: var(--bsw-accent-soft); color: var(--bsw-accent-deep); font-family: var(--bsw-font-orbit); font-size: 11.5px; font-weight: 800; text-align: center; line-height: 22px; margin-right: 12px; } .bsw-popular a { color: var(--bsw-ink-2); text-decoration: none; } .bsw-empty-small { font-size: 13px; color: var(--bsw-muted); } .bsw-ad-placeholder { padding: 20px; border: 1px dashed var(--bsw-line-strong); border-radius: var(--bsw-r-md); color: var(--bsw-muted); font-size: 12.5px; text-align: center; background: var(--bsw-card); margin: 18px 0; } /* ────────────────────────────────────────────────────────── * Ad slots — reserve space (CLS 0) + responsive fill * The box keeps its height before the ad loads, so content * below never jumps. Responsive ads center & fill within it. * ────────────────────────────────────────────────────────── */ .bsw-ad { display: flex; align-items: center; justify-content: center; margin: 18px 0; overflow: hidden; } /* 시안: 와이드 배너존 위 우측 캡션 — 직접 배너 영업 안내 */ .bsw-ad__caption { font-size: 10.5px; color: var(--bsw-faint); text-align: right; letter-spacing: -0.005em; margin: 18px 0 6px; } .bsw-ad__caption + .bsw-ad { margin-top: 0; } /* 광고 미게재(승인 전) 방문자용 — 예약 크기의 빈 배너 프레임 + 규격 표시. * 광고주가 배너 규격을 가늠하도록 실제 예약 높이를 그대로 점유. */ .bsw-ad--empty { border: 1px dashed var(--bsw-line-strong); border-radius: var(--bsw-r-md); background: var(--bsw-card); } .bsw-ad__empty-label { display: inline-flex; align-items: baseline; gap: 9px; font-family: var(--bsw-font-orbit); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bsw-faint); } .bsw-ad__empty-size { font-family: var(--bsw-font-orbit); font-size: 13px; letter-spacing: 0.04em; color: var(--bsw-muted); } /* 관리자 미리보기: 빈 프레임을 실제 배너 크기로 점유하고, 그 안에 슬롯 ID + 위젯 링크를 함께 표시 */ .bsw-ad--admin { flex-direction: column; gap: 10px; padding: 16px; } .bsw-ad__admin-meta { font-size: 12px; color: var(--bsw-muted); letter-spacing: -0.01em; text-align: center; } .bsw-ad__admin-meta code { font-size: 11.5px; background: var(--bsw-bg); border: 1px solid var(--bsw-line); border-radius: var(--bsw-r-xs); padding: 1px 6px; color: var(--bsw-ink); } .bsw-ad__admin-meta a { color: var(--bsw-accent); text-decoration: none; } .bsw-ad__admin-meta a:hover { text-decoration: underline; } .bsw-ad__admin-flag { color: var(--bsw-accent-deep); font-weight: 700; } .bsw-ad > * { max-width: 100%; } .bsw-ad ins, .bsw-ad .adsbygoogle { display: block; width: 100%; } .bsw-ad--ad-hero { min-height: 280px; } /* 336×280 */ .bsw-ad--ad-top-banner { min-height: 250px; } /* 970×250 */ .bsw-ad--ad-in-feed { min-height: 250px; } .bsw-ad--ad-in-article { min-height: 250px; } .bsw-ad--ad-sidebar-mpu { min-height: 250px; } /* 300×250 */ .bsw-ad--ad-footer { min-height: 90px; } /* 728×90 */ .bsw-ad--ad-sidebar-mpu, .bsw-ad--ad-sidebar-sticky { max-width: 300px; margin-inline: auto; } .bsw-ad--ad-sidebar-sticky { min-height: 600px; } /* Sticky follow group — 용어집 + 300×600 광고를 한 덩어리로 묶어 스크롤 추적. 사이드바 맨 아래에 두어(뒤 형제 없음) 겹침 없이 깔끔히 고정된다. 고정된 티커·헤더의 실제 높이 + 위젯 간격 18px를 사용한다. */ .bsw-sidebar__follow { position: sticky; top: calc(var(--bsw-header-height) + 18px); } .bsw-sidebar__follow > * + * { margin-top: 18px; } /* Mobile: drop the sticky + shrink wide reservations so the box never reserves more than a mobile ad can fill. */ @media (max-width: 1000px) { .bsw-sidebar__follow { position: static; } .bsw-ad--ad-sidebar-sticky { min-height: 100px; } .bsw-ad--ad-top-banner { min-height: 100px; } /* mobile 320×100 */ } /* 폰: 히어로 광고를 300×250로 — 좁은 화면에서 336폭이 넘쳐 답답해 보이지 않게 */ @media (max-width: 640px) { .bsw-ad--ad-hero { min-height: 250px; max-width: 300px; margin-inline: auto; } } .bsw-footer { color: var(--bsw-ink-2); padding: 18px 0 24px; margin-top: 18px; border-top: 1px solid var(--bsw-line); } .bsw-footer__inner { max-width: var(--bsw-container); margin: 0 auto; padding: 0 40px; } .bsw-footer__grid { display: grid; grid-template-columns: 1.4fr 2fr; gap: 64px; margin-top: 0; } .bsw-footer h4 { font-size: 12px; font-family: var(--bsw-font-orbit); letter-spacing: 0.16em; color: var(--bsw-faint); text-transform: uppercase; margin: 0 0 14px; } .bsw-footer ul { list-style: none; padding: 0; margin: 0; } .bsw-footer ul li a { color: var(--bsw-ink-2); text-decoration: none; line-height: 2; font-size: 13.5px; } /* 시안: 푸터 카테고리 2열 그리드 */ .bsw-footer__cats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 32px; list-style: none; padding: 0; margin: 0; } @media (max-width: 480px) { .bsw-footer__cats { display: flex; flex-wrap: wrap; gap: 10px 20px; } } .bsw-footer__grid p { margin: 14px 0 0; line-height: 1.65; } .bsw-footer__est { font-family: var(--bsw-font-orbit); font-size: 10px; letter-spacing: 0.24em; color: var(--bsw-faint); margin-top: 14px; display: inline-block; } .bsw-footer__bottom { margin-top: 19px; padding-top: 18px; border-top: 1px solid var(--bsw-line); display: flex; justify-content: space-between; align-items: center; gap: 18px; font-size: 12px; color: var(--bsw-muted); } /* 하단 법적 페이지 메뉴 — wp_nav_menu(