@charset "UTF-8";
/*
 * 모모법률사무소 블로그 테마
 *
 * 치수·색상은 시안(260902/..._1안_피드백_반영.png, 1920x3748 1:1)에서 픽셀 단위로 측정했다.
 * 이전에는 4배 렌더(7681px)를 4로 나눠 환산했는데, 1:1 원본으로 다시 재어 글자 크기까지 맞췄다.
 *
 *   상단 영역(네비·히어로·공지·소개) : 1060px   (실측 x 437~1500)
 *   3단 레이아웃                      : 1696px   (실측 x 114~1810)
 *   좌 240 / 중앙 1068 / 우 244, gap 72
 *   목록 행 간격 40px · 프로필 원형 로고 지름 120px · 푸터 전화 띠 높이 82px
 *
 *   브랜드 네이비 #073051   네비 강조 #FF4201   히어로 강조 #36F6FF
 *   카드 테두리 #F1F1F1     본문 #333   보조 #767676
 */

/* ---------------------------------------------------------------
 * 0. 토큰
 * ------------------------------------------------------------ */
:root {
	--navy: #073051;
	--navy-btn: #072d52;
	--navy-soft: #0e4472;
	--accent: #36f6ff;
	--orange: #ff4201;
	--naver: #03c75a;          /* [26090402] 네이버 그린 — 상단바·공지 제목·TOP 등 강조색 */

	--text: #333333;
	--muted: #767676;
	--muted-2: #858282;
	--line: #ececec;
	--line-soft: #f1f1f1;
	--line-strong: #dcdcdc;
	--bg: #ffffff;

	--w-page: 1696px;   /* 3단 레이아웃 — 시안 실측 114~1810 */
	--w-narrow: 1098px; /* 상단 영역 — 시안 실측: 소개문 x412~1500, 구분선 x411~1508 */
	--gap: 72px;
	--col-left: 240px;
	--col-right: 244px;

	--radius: 12px;
	--shadow: 0 2px 10px rgba(0, 0, 0, .06), 0 0 0 1px rgba(0, 0, 0, .03);

	--font: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕",
		system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------------------------------------------------------------
 * 1. 리셋 / 기본
 * ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.7;
	color: var(--text);
	background: var(--bg);
	word-break: keep-all;
	overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: var(--text); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { line-height: 1.4; font-weight: 700; margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* 인라인 SVG 아이콘 — 색은 currentColor 로 따라온다 */
.icon { display: block; flex: 0 0 auto; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
	clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	padding: 10px 16px; background: var(--navy); color: #fff;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------
 * 2. 상단 메뉴 — 네이비 위에 얹히고 아래는 점선
 * ------------------------------------------------------------ */
.topbar { background: var(--navy); }
.topbar__inner {
	max-width: var(--w-narrow);
	margin: 0 auto;
	padding: 47px 14px 8px;
	display: flex;
	align-items: center;
	gap: 0;
	flex-wrap: wrap;
	border-bottom: 1px dotted rgba(255, 255, 255, .10);
}
.topbar__brand {
	color: var(--muted-2);
	font-size: 13px;
	font-weight: 700;
	padding-right: 12px;
	position: relative;
}
.topbar__brand:hover { text-decoration: none; color: var(--orange); }
/* [26090404] 홈에 있을 때만 강조. 강조색은 기존 주황(붉은) 계열로 되돌렸다. */
.topbar__brand.is-current { color: var(--orange); }

.topbar__menu { display: flex; flex-wrap: wrap; }
.topbar__menu li { position: relative; }
.topbar__menu li::before {
	content: "";
	position: absolute; left: 0; top: 50%;
	width: 1px; height: 10px;
	margin-top: -5px;
	background: rgba(255, 255, 255, .25);
}
.topbar__menu a {
	display: block;
	padding: 0 12px;
	color: var(--muted-2);
	font-size: 13px;
}
.topbar__menu a:hover { color: #fff; text-decoration: none; }

/* [26090402] PC 상단 오른쪽 로고.
   상단바가 좁은 모바일에서는 카테고리를 밀어내므로 감춘다. */
.topbar__logo { margin-left: auto; display: inline-flex; align-items: center; }
.topbar__logo img { height: 22px; width: auto; opacity: .85; }
.topbar__logo:hover img { opacity: 1; }
/* [26090402] 지금 보고 있는 카테고리만 네이버 그린. 나머지는 회색 그대로 둔다. */
/* [26090404] 지금 보고 있는 카테고리 하나만. 상위 카테고리는 회색 그대로 둔다. */
.topbar__menu li.is-current > a,
.topbar__menu li.current-cat > a,
.topbar__menu li.current-menu-item > a { color: var(--orange); font-weight: 700; }

/* ---------------------------------------------------------------
 * 3. 히어로 — 로고 없이 텍스트만. 위아래 가로선.
 * ------------------------------------------------------------ */
.hero {
	background: var(--navy);
	color: #fff;
	text-align: center;
	padding: 0 20px 89px;
}
.hero__inner {
	max-width: var(--w-narrow);
	margin: 0 auto;
	padding-top: 100px;
}

.hero__office {
	margin: 0;
	padding: 47px 0 47px;
	font-size: 32px;
	line-height: 1.66;
	color: #fff;
	font-weight: 300;
}
/* 시안 실측(잉크 밀도 대비): 수식어·아랫줄은 가늘고, 사무소명만 굵다.
   면적/폭 = role 6.13 · sub 6.22 · name 12.18 → 300 / 300 / 700 */
.hero__office-role { font-weight: 300; }
.hero__office-name { font-weight: 700; }
.hero__office-sub { display: block; font-weight: 300; }

/* 가로선 — 히어로 위·아래 두 곳에 같은 모양으로 들어간다.
   시안 실측: 폭 1030px, 중앙 #C9EDFF, 좌우로 갈수록 배경에 묻힌다.
   가운데 1px 이 밝고 위아래로 살짝 번져 보여 box-shadow 로 글로우를 준다. */
.hero__rule {
	width: 1025px;
	max-width: 100%;
	height: 1px;
	margin: 0 auto;
	background: linear-gradient(90deg,
		rgba(150, 200, 255, .07) 0%,
		rgba(150, 200, 255, .20) 10%,
		rgba(140, 200, 255, .35) 20%,
		rgba(130, 200, 255, .47) 30%,
		rgba(120, 195, 255, .62) 40%,
		rgba(201, 237, 255, .88) 50%,
		rgba(120, 195, 255, .62) 60%,
		rgba(130, 200, 255, .47) 70%,
		rgba(140, 200, 255, .35) 80%,
		rgba(150, 200, 255, .20) 90%,
		rgba(150, 200, 255, .07) 100%);
	box-shadow: 0 0 4px rgba(120, 195, 255, .45);
}

.hero__lead {
	margin: 0;
	padding-top: 63px;
	font-size: 62px;
	line-height: 1.3;
	font-weight: 500;
	letter-spacing: -.01em;
	color: var(--accent);
}

/* ---------------------------------------------------------------
 * 4. 공지 — 점 인디케이터만. 화살표 없음.
 * ------------------------------------------------------------ */
/* 구간 사이 회색 띠 — 시안 실측: 히어로 아래·공지 다음·소개 다음 세 곳 모두 17~18px */
.notice {
	background: var(--bg);
	border-top: 18px solid #f8f7f7;
	border-bottom: 18px solid #f6f6f6;
}
.notice__inner {
	max-width: var(--w-narrow);
	margin: 0 auto;
	padding: 32px 0 22px;   /* [26090402] 위아래 폭 축소 (50/34 → 32/22) */
	text-align: center;
}
.notice__title { margin: 0 0 14px; font-size: 23px; color: var(--naver); font-weight: 700; }
/* 드래그로 넘길 수 있는 영역.
   touch-action: pan-y 로 세로 스크롤은 그대로 두고 가로만 가져온다.
   user-select 를 꺼야 끌 때 글자가 선택되지 않는다. */
.notice__list {
	min-height: 36px;
	cursor: grab;
	touch-action: pan-y;
	-webkit-user-select: none; user-select: none;
	overflow: hidden;
}
.notice__list.is-grabbing { cursor: grabbing; }
.notice__item { transition: transform .32s ease, opacity .32s ease; }
/* 드래그 중이거나 새 항목을 밀어 넣기 직전에는 애니메이션을 끈다 */
.notice__item.is-instant { transition: none; }
.notice__item a {
	color: #555; font-size: 27px; line-height: 1.5;
	-webkit-user-drag: none;   /* 링크를 끌 때 브라우저 기본 드래그가 끼어들지 않게 */
}
.notice__list.is-grabbing .notice__item a { cursor: grabbing; }

@media ( prefers-reduced-motion: reduce ) {
	.notice__item { transition: none; }
}

/* 점은 눌러서 넘기는 버튼이므로 손 모양을 준다 */
.notice__dot { cursor: pointer; }

.notice__nav { display: flex; justify-content: center; margin-top: 40px; }
.notice__dots { display: flex; gap: 10px; }
.notice__dot {
	width: 11px; height: 11px; padding: 0;
	border: 0; border-radius: 50%;
	background: #d6d6d6;
}
.notice__dot.is-active { background: var(--navy); }
.notice__arrow { display: none; } /* 시안에 없음 */

/* ---------------------------------------------------------------
 * 5. 소개
 * ------------------------------------------------------------ */
.intro { background: var(--bg); border-bottom: 18px solid #f5f5f5; }
.intro__inner {
	max-width: var(--w-narrow);
	margin: 0 auto;
	padding: 38px 0 18px;
}
.intro__title { margin: 0 0 20px; font-size: 20px; font-weight: 700; color: var(--navy); }
.intro__text {
	margin: 0 0 8px;
	font-size: 20px;
	line-height: 1.4;
	color: #555;
}
.intro__text--sub { color: var(--muted); }

.intro__contact { margin-top: 40px; }
.intro__contact-row {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px;
	padding: 24px 2px;
	border-top: 1px solid #e8e8e8;
	font-size: 20px;
}
/* 시안에는 마지막 행 아래 선이 없다 */
.intro__contact-label { display: flex; align-items: center; gap: 22px; color: var(--navy); }
.intro__icon { color: var(--navy); display: inline-flex; align-items: center; flex: 0 0 auto; }
.intro__contact-action { color: #5d7195; font-size: 14px; white-space: nowrap; }
.intro__contact-action:hover { color: var(--navy); }

/* ---------------------------------------------------------------
 * 6. 3단 레이아웃
 * ------------------------------------------------------------ */
.layout {
	max-width: var(--w-page);
	margin: 0 auto;
	padding: 40px 20px 70px;
	display: grid;
	grid-template-columns: var(--col-left) minmax(0, 1fr) var(--col-right);
	gap: var(--gap);
	align-items: start; /* sticky 가 동작하려면 stretch 가 아니어야 한다 */
}
.col-main { min-width: 0; }

/* 좌우 컬럼은 스크롤을 따라온다.
 * 화면에 떠서 본문을 덮는 고정배너가 아니라 자기 열 안에서만 머무는 방식이라
 * 본문 가독성을 해치지 않는다.
 * 카드가 뷰포트보다 길어지면 그 안에서 스크롤되게 해 윗부분이 잘리지 않도록 한다. */
@media (min-width: 861px) {
	.col-left {
		position: sticky;
		top: 24px;
		max-height: calc(100vh - 48px);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: #d8d8d8 transparent;
		/* 그림자가 스크롤 영역에서 잘리지 않도록 여유를 준다 */
		margin: -6px;
		padding: 6px;
	}
}

@media (min-width: 1181px) {
	.col-right {
		position: sticky;
		top: 24px;
		max-height: calc(100vh - 48px);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: #d8d8d8 transparent;
		margin: -6px;
		padding: 6px;
	}
}

.col-left::-webkit-scrollbar,
.col-right::-webkit-scrollbar { width: 6px; }
.col-left::-webkit-scrollbar-track,
.col-right::-webkit-scrollbar-track { background: transparent; }
.col-left::-webkit-scrollbar-thumb,
.col-right::-webkit-scrollbar-thumb { background: #d8d8d8; border-radius: 3px; }

/* 움직임을 줄이도록 설정한 사용자에게는 따라다니지 않게 한다 */
@media (prefers-reduced-motion: reduce) {
	.col-left, .col-right { position: static; max-height: none; overflow: visible; }
}

/* ---------------------------------------------------------------
 * 7. 좌측 프로필 카드 — 흰 카드 + 그림자, 좌측 정렬
 * ------------------------------------------------------------ */
.profile {
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 34px 30px 30px;
	text-align: left;
}
.profile[hidden] { display: none; }

.profile__logo { margin: 0 0 22px; text-align: center; }
.profile__logo img {
	width: 120px; height: 120px;
	border-radius: 50%;
	background: var(--navy);
	border: 0;
	padding: 26px;
	object-fit: contain;
}

.profile__name { margin: 0 0 6px; font-size: 22px; font-weight: 700; }
.profile__name a { color: var(--text); }
.profile__en-sub { margin: 0 0 18px; font-size: 13px; color: #555; }
.profile__en { margin: 0 0 24px; font-size: 15px; font-weight: 700; color: #111; }

.profile__role {
	margin: 0 0 16px;
	padding-top: 16px;
	border-top: 1px solid var(--line-soft);
	font-size: 14px;
	line-height: 2.05;
	color: #111;
	font-weight: 700;
}
.profile__role span { display: block; }

.profile__more { margin: 0 0 26px; font-size: 14px; font-weight: 700; }
.profile__more a { color: #111; }

.profile__contact {
	padding-top: 20px;
	border-top: 1px solid var(--line-soft);
	margin-bottom: 26px;
	font-size: 14px;
	line-height: 1.6;
}
.profile__contact li {
	display: flex; align-items: flex-start; gap: 10px;
	margin-bottom: 17px;
	color: var(--navy);
}
.profile__contact li:last-child { margin-bottom: 0; }
.profile__icon { color: var(--navy); flex: 0 0 auto; display: inline-flex; align-items: center; height: 1.5em; }
.profile__label { flex: 0 0 auto; color: var(--navy); }
.profile__contact a { color: var(--navy); }
.profile__address { line-height: 1.65; }

.profile__cta { margin: 0; }

/* "패널 숨기기" 로 접히는 부분.
   카드 전체가 아니라 로고·이름·아이디 아래만 접는다. */
.profile__fold { overflow: hidden; }
/* [26090407] 접히는 동안에는 사이드바의 스크롤을 잠근다.
   높이가 움직이는 사이 스크롤바가 잠깐 나타났다 사라지는 것을 막는다. */
.col-left.is-folding { overflow: hidden !important; }
.profile__fold.is-folding { transition: height .3s ease, opacity .3s ease; }
.profile__fold[hidden] { display: none; }

@media ( prefers-reduced-motion: reduce ) {
	.profile__fold.is-folding { transition: none; }
}

/* 패널 숨기기 — 카드 바깥, 원형 버튼 */
.profile__toggle-wrap { margin: 18px 0 0; text-align: center; }
.profile__toggle {
	border: 0; background: none;
	display: inline-flex; align-items: center; gap: 9px;
	font-size: 13px; color: #555;
	padding: 2px;
}
.profile__toggle:hover { color: var(--naver); }
.profile__toggle-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px;
	border-radius: 50%;
	background: var(--naver);   /* [26090402] 네이버 그린 */
	color: #fff;
	font-size: 10px;
}
.col-left__widgets { margin-top: 24px; }

/* ---------------------------------------------------------------
 * 8. 버튼
 * ------------------------------------------------------------ */
.btn {
	display: inline-block;
	padding: 13px 16px;
	border-radius: 4px;
	font-size: 13.5px; font-weight: 500;
	text-align: center;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--navy-btn); color: #fff; }
.btn--primary:hover { background: var(--navy-soft); color: #fff; }
.btn--wide { display: block; width: 100%; }

/* ---------------------------------------------------------------
 * 9. 글 목록 (게시판형)
 * ------------------------------------------------------------ */
.postlist__head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 12px; padding: 0 4px 16px;
}
.postlist__title { font-size: 15px; font-weight: 700; }
.postlist__count { margin-left: 8px; font-weight: 400; color: var(--muted); font-size: 13px; }
.postlist__fold { border: 0; background: none; font-size: 13px; color: #555; padding: 2px 4px; }
.postlist__fold:hover { color: var(--navy); }

.postlist__table { border-top: 1px solid var(--line); }
.postlist__row {
	display: flex; align-items: center; gap: 12px;
	padding: 13px 4px;
	border-bottom: 1px solid #f4f4f4;
	font-size: 15px;
}
.postlist__row--head {
	padding: 11px 4px;
	font-size: 12.5px;
	color: var(--muted);
	border-bottom: 1px solid var(--line);
}
.postlist__cell--subject {
	flex: 1 1 auto; min-width: 0;
	display: flex; align-items: center; gap: 6px;
	overflow: hidden;
}
.postlist__cell--subject a {
	color: var(--text);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.postlist__cell--subject a:hover { color: var(--navy); }
.postlist__cell--date { flex: 0 0 auto; color: var(--muted); font-size: 13px; }
.postlist__comments { color: var(--muted); font-size: 13px; flex: 0 0 auto; }
.postlist__empty { padding: 60px 0; text-align: center; color: var(--muted); }

/* 지금 보고 있는 글 — 위·아래 목록 모두에서 굵게 표시해 위치를 알 수 있게 한다 */
.postlist__row.is-current { background: #fafcfe; }
.postlist__row.is-current .postlist__cell--subject a { color: var(--navy); font-weight: 700; }
.postlist__row.is-current .postlist__cell--date { color: #5d7195; }

/* 줄 수 선택 */
.postlist__perpage { display: flex; justify-content: flex-end; padding: 16px 4px 0; }
.postlist__select {
	appearance: none;
	border: 1px solid var(--line-strong);
	border-radius: 4px;
	background: #fff;
	padding: 7px 30px 7px 12px;
	font-size: 12.5px;
	color: #555;
	background-image:
		linear-gradient(45deg, transparent 50%, #999 50%),
		linear-gradient(135deg, #999 50%, transparent 50%);
	background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

/* 비동기 목록 전환 중 표시 */
.postlist, .related { transition: opacity .15s ease; }
.postlist.is-loading,
.related.is-loading { opacity: .45; pointer-events: none; }
.postlist:focus, .related:focus { outline: none; }

/* ---------------------------------------------------------------
 * 10. 페이지네이션 — 숫자만, 현재 페이지 굵게
 * ------------------------------------------------------------ */
.pagination { margin: 26px 0 0; }
.pagination ul { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 2px; }
.pagination a, .pagination span {
	display: inline-block;
	min-width: 28px; padding: 6px 8px;
	text-align: center;
	font-size: 13.5px;
	color: #555;
}
.pagination a:hover { color: var(--navy); text-decoration: none; }
.pagination .current { color: var(--navy); font-weight: 700; }
.pagination .next, .pagination .prev { color: var(--muted); font-size: 13px; }

/* ---------------------------------------------------------------
 * 11. 글 상세
 * ------------------------------------------------------------ */
.breadcrumb { padding: 0 0 30px; font-size: 14px; color: var(--muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.breadcrumb li { display: flex; align-items: center; gap: 7px; }
.breadcrumb li::after { content: ">"; color: #c9c9c9; font-size: 11px; }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: var(--muted); }
.breadcrumb__home { color: var(--navy); display: inline-flex; align-items: center; }

/* 목록 바로 아래에 글 전문이 이어지므로 충분히 띄운다 */
.entry { max-width: 100%; margin-top: 58px; }

.entry__head { padding-bottom: 22px; }

/* 홈·카테고리에서 최신 글의 제목은 그 글로 가는 링크가 된다 */
.entry__title a { color: inherit; }
.entry__title a:hover { color: var(--navy); text-decoration: none; }
.entry__title {
	margin: 0 0 30px;
	font-size: 34px;
	line-height: 1.5;
	letter-spacing: -.02em;
	font-weight: 700;
}

.entry__meta {
	display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--line);
	font-size: 13px; color: var(--muted);
}
.entry__author { display: flex; align-items: center; gap: 9px; }
.entry__author a { color: var(--text); font-weight: 500; }
.entry__avatar {
	width: 28px; height: 28px;
	border-radius: 50%;
	background: var(--navy);
	padding: 5px;
	object-fit: contain;
}
.entry__date { color: var(--muted); }
.entry__revised { color: #a0a0a0; }
.entry__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.entry__copy { border: 0; background: none; font-size: 12.5px; color: var(--muted); padding: 4px 2px; }
.entry__copy:hover { color: var(--navy); }
.entry__share {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px;
	border: 1px solid var(--line-strong); border-radius: 4px;
	background: #fff; color: #555; font-size: 13px;
}
.entry__share:hover { border-color: var(--navy); color: var(--navy); }

.entry__lead {
	margin: 34px 0 0;
	font-size: 22px; line-height: 1.82; color: #16233d;
}
.entry__lead p { margin: 0; }

.entry__thumb { margin: 34px 0; }
.entry__thumb img { width: 100%; }
.entry__thumb figcaption,
.entry__content figcaption {
	margin-top: 10px; font-size: 13px; color: var(--muted); text-align: center;
}

.post-toc {
	margin: 30px 0;
	padding: 20px 22px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fafafa;
}
.post-toc__title { margin: 0 0 10px; font-size: 14px; }
.post-toc ol { list-style: decimal; padding-left: 20px; font-size: 14px; line-height: 1.95; }
.post-toc a { color: #444; }

.entry__content { margin-top: 34px; font-size: 17px; line-height: 1.8; color: #333; }
.entry__content > * + * { margin-top: 1.2em; }
.entry__content h2 { margin-top: 2.1em; margin-bottom: .7em; font-size: 21px; }
.entry__content h3 { margin-top: 1.8em; font-size: 18px; }
.entry__content p { margin: 0; }
.entry__content ul { list-style: disc; padding-left: 22px; }
.entry__content ol { list-style: decimal; padding-left: 22px; }
.entry__content li + li { margin-top: .4em; }
.entry__content blockquote {
	margin: 1.5em 0; padding: 4px 0 4px 18px;
	border-left: 3px solid var(--line-strong); color: #555;
}
.entry__content a { color: var(--link, #0d47bd); text-decoration: underline; }

.entry__tags { margin-top: 34px; }

/* 해시태그 — 시안 실측: 박스 높이 25px, 간격 3~4px, 테두리 #B0BED1, 굵은 푸른 글씨 */
.taglist { display: flex; flex-wrap: wrap; gap: 4px; }
.taglist li {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.5;
	padding: 4px 6px;
	border: 1px solid #b0bed1;
	border-radius: 4px;
	background: #fff;
	color: #3f5f94;
}
.taglist a { color: inherit; text-decoration: none; }
.taglist a:hover { color: var(--navy); text-decoration: none; }

.entry__notice {
	margin-top: 34px; padding: 18px 20px;
	border: 1px solid var(--line); border-radius: 8px;
	font-size: 12.5px; line-height: 1.8; color: var(--muted);
}
.entry__notice p { margin: 0; }
.entry__cta { margin: 28px 0 0; }

/* 이웃 글 */
/* 목록 페이지 넘김 — 시안 실측: 이전/다음은 컬럼 정중앙(간격 32px), TOP 은 우측 끝 */
.post-nav {
	position: relative;
	margin-top: 40px; padding-top: 18px;
	border-top: 1px solid var(--line);
	display: flex; align-items: center; justify-content: center;
	gap: 32px;
	font-size: 13px;
}
.post-nav__prev, .post-nav__next { flex: 0 0 auto; }
.post-nav__prev a, .post-nav__next a { color: #767676; }
.post-nav__prev a:hover, .post-nav__next a:hover { color: var(--navy); text-decoration: none; }

/* 첫/마지막 페이지에서도 버튼은 남기고 회색으로만 표시한다 */
.post-nav .is-disabled {
	color: #c9c9c9;
	cursor: default;
	user-select: none;
}

.post-nav__top {
	position: absolute;
	right: 0;
	top: 18px;
	margin: 0;
}
.post-nav__top a { color: var(--naver); }   /* [26090402] */
.post-nav__top a:hover { color: var(--naver); text-decoration: none; opacity: .75; }

/* 관련 글 */
.related { margin-top: 54px; }
.related__head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 12px; padding: 0 4px 16px;
}
.related__title { font-size: 14px; font-weight: 400; color: #555; }
.related__title strong { font-weight: 700; color: var(--text); }
.related__more { font-size: 13px; color: #555; }
.related__more strong { font-weight: 700; }

/* 카테고리 아카이브 머리말 */
.archive-head { margin-bottom: 26px; }
/* 소개문이 아직 없는 카테고리는 제목만 간결하게 */
.archive-head--bare { margin-bottom: 18px; }
.archive-head--bare .archive-head__title { margin-bottom: 0; }
.archive-head__title { margin: 0 0 12px; font-size: 24px; }
.archive-head__desc { font-size: 14px; line-height: 1.85; color: #555; }

/* ---------------------------------------------------------------
 * 12. 우측 카테고리 카드
 * ------------------------------------------------------------ */
.catbox {
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 30px 26px 26px;
}
.catbox__title {
	margin: 0 0 14px;
	padding-bottom: 14px;
	border-bottom: 2px solid #111;
	font-size: 15px;
	font-weight: 700;
}
.catbox__list { font-size: 14px; }
.catbox__item { position: relative; }
.catbox__item a {
	display: flex; align-items: center; gap: 6px;
	padding: 6px 20px 6px 0;
	color: #222; line-height: 1.5;
}
.catbox__item a:hover { color: var(--navy); text-decoration: none; }
.catbox__item.is-current > a { color: var(--navy); font-weight: 700; }
.catbox__item--all > a { font-weight: 700; color: var(--text); }

.catbox__icon { color: #c2c2c2; flex: 0 0 auto; display: inline-flex; align-items: center; height: 1.5em; }
.catbox__name { flex: 0 0 auto; }
.catbox__count { flex: 0 0 auto; color: #333; font-size: 13.5px; }
.catbox__item--sub a { padding-left: 12px; }

.catbox__fold {
	position: absolute; top: 4px; right: 0;
	border: 0; background: none;
	font-size: 9px; color: var(--navy);
	padding: 4px 4px;
}
.catbox__fold[aria-expanded="false"] { color: #999; }

.col-right__widgets { margin-top: 24px; }
.widget { margin-bottom: 24px; font-size: 13px; }
.widget-title { margin: 0 0 10px; font-size: 13px; }

/* ---------------------------------------------------------------
 * 13. 푸터
 * ------------------------------------------------------------ */
.site-footer { margin-top: 30px; }

/* [26090402] 띠 전체가 전화 링크가 되도록 a 로 감쌌다.
   터치 영역이 번호 글자에만 있으면 모바일에서 누르기 어렵다. */
.footer-contact { background: var(--navy); color: #fff; }
.footer-contact__link { display: block; color: #fff; }
.footer-contact__link:hover { text-decoration: none; color: #fff; }
.footer-contact__link:hover .footer-contact__tel { color: var(--accent); }
.footer-contact__inner {
	max-width: 1386px;
	margin: 0 auto;
	padding: 22px 20px;
	display: flex; align-items: center; justify-content: center; gap: 12px;
}
.footer-contact__icon { display: inline-flex; align-items: center; color: #fff; margin-right: 10px; }
.footer-contact__label { font-size: 22px; font-weight: 700; }
.footer-contact__tel { color: #fff; font-weight: 700; font-size: 24px; letter-spacing: .01em; margin-left: 10px; }
.footer-contact__tel:hover { color: var(--accent); text-decoration: none; }

.footer-body { background: #fff; }
.footer-body__inner {
	max-width: 1386px;
	margin: 0 auto;
	padding: 23px 20px 54px;
	display: flex; gap: 70px; flex-wrap: wrap; align-items: flex-start;
}
.footer-brand { flex: 0 0 auto; padding-top: 24px; }   /* [26090402] 42 → 24 */
.footer-brand img { height: 52px; width: auto; opacity: .6; filter: grayscale(1); }

.footer-info { flex: 1 1 480px; min-width: 0; color: var(--muted); }

.footer-menu { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 26px; }
.footer-menu li { position: relative; }
.footer-menu li:not(:first-child)::before {
	content: ""; position: absolute; left: 0; top: 50%;
	width: 1px; height: 11px; margin-top: -5px; background: var(--line-strong);
}
.footer-menu a { display: block; padding: 0 18px; color: #333; font-size: 17px; }
.footer-menu li:first-child a { padding-left: 0; }

.footer-nap { font-style: normal; line-height: 1.4; color: #444; font-size: 17px; }
.footer-nap__row { display: block; }
.footer-nap__sep { margin: 0 12px; color: #c9c9c9; }

.footer-legal { margin: 14px 0 0; line-height: 1.8; }
.footer-official { margin: 12px 0 0; }
.footer-official a { color: var(--navy); }
.footer-copy { margin: 12px 0 0; color: #9a9a9a; font-size: 16px; }
/* PC 에서는 조각들이 한 줄로 이어진다 (기존 모습 유지) */
.footer-copy__line { display: inline; }
.footer-copy__line + .footer-copy__line::before { content: " "; }

/* ---------------------------------------------------------------
 * 14. 반응형
 * ------------------------------------------------------------ */
@media (max-width: 1500px) {
	:root { --gap: 32px; }
	.layout { max-width: 1280px; }
}

@media (max-width: 1180px) {
	.layout { grid-template-columns: var(--col-left) minmax(0, 1fr); }
	.col-right { grid-column: 1 / -1; }
	.catbox__list { columns: 2; column-gap: 28px; }
	.catbox__item { break-inside: avoid; }
	.hero__lead { font-size: 32px; }
	.hero__office { font-size: 17px; }
}

@media (max-width: 860px) {
	.layout {
		grid-template-columns: minmax(0, 1fr);
		padding: 24px 16px 50px;
	}
	.col-left { order: 2; }
	.col-main { order: 1; }
	.col-right { order: 3; }

	.hero { padding-bottom: 48px; }
	.hero__inner { padding-top: 44px; }
	.hero__office { font-size: 15px; padding: 26px 0 30px; }
	.hero__lead { font-size: 24px; padding-top: 34px; }

	.topbar__inner { padding: 12px 16px 10px; }
	.topbar__logo { display: none; }   /* [26090402] 모바일은 카테고리 우선 */
	.intro__inner, .notice__inner { padding-left: 16px; padding-right: 16px; }

	.entry__title { font-size: 24px; }
	.entry__content { font-size: 15.5px; }

	/* 공지·소개 글자 크기 (모바일) */
	.notice__item a { font-size: 16px; }
	.intro__text { font-size: 13px; }

	/* 전화/위치 행 — "전화하기"·"길찾기" 가 아랫줄로 밀리지 않게 한 줄에 둔다.
	   줄바꿈을 막고, 대신 왼쪽 라벨이 줄어들며 그 안에서 여러 줄로 흐르게 한다. */
	.intro__contact-row {
		flex-wrap: nowrap;
		gap: 12px;
		font-size: 14px;
	}
	.intro__contact-label { min-width: 0; gap: 10px; }
	.intro__contact-action { flex: 0 0 auto; }
	/* [26090402] 띠 폭 축소, 아이콘·문구·번호를 한 줄로 */
	.footer-contact__inner { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 8px; text-align: center; padding: 12px 16px; }
	.footer-contact__label { font-size: 14px; }
	.footer-contact__tel { font-size: 17px; margin-left: 6px; }
	.footer-contact__icon { margin-right: 6px; }
	.footer-brand img { height: 38px; }   /* [26090402] 모바일 푸터 로고 축소 */
	.footer-body__inner { gap: 24px; padding: 26px 16px 34px; }
	.footer-brand { padding-top: 0; }
}

@media (max-width: 560px) {
	.postlist__row--head { display: none; }
	.postlist__cell--date { font-size: 12px; }
	.catbox__list { columns: 1; }
	.entry__actions { margin-left: 0; }
	.footer-menu a { padding: 0 10px; font-size: 12px; }
}

/* ---------------------------------------------------------------
 * 15. 인쇄
 * ------------------------------------------------------------ */
@media print {
	.topbar, .notice, .intro, .col-left, .col-right,
	.footer-contact, .post-nav, .entry__cta, .entry__actions { display: none !important; }
	.layout { display: block; padding: 0; max-width: none; }
	.hero { background: none; color: #000; padding: 0 0 12px; }
	.hero__lead, .hero__office { color: #000; }
	body { font-size: 12pt; }
}

/* ===============================================================
 * 16. 모바일 전용 재구성  [26090403]
 *
 * 기기를 서버에서 나눠 그리지 않고 화면 폭으로만 가른다.
 * 페이지 캐시(WP Super Cache)가 모바일/PC 를 분리하지 않는 설정이라,
 * 서버에서 나누면 먼저 만들어진 쪽이 양쪽 모두에게 나갈 수 있다.
 * =============================================================== */

/* PC 폭에서는 모바일 전용 요소를 감춘다 */
.cardlist,
.mobilebar,
.postlist__thumb { display: none; }

/* 배경 이미지를 지정했을 때 글자가 묻히지 않도록 어둡게 깐다 (PC·모바일 공통) */
.hero.has-bg { position: relative; background-size: cover; background-position: center; }
.hero.has-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(7, 48, 81, .72), rgba(7, 48, 81, .82));
}
.hero.has-bg > * { position: relative; }

@media (max-width: 860px) {

	/* -----------------------------------------------------------
	 * 16-1. 메인 · 카테고리 — 카드 목록이 먼저, 게시판형 목록은 아래로
	 *
	 * 요청: "주소 아래에 전체 글 표시가 나타나고 글이 최신순 20개,
	 *        전체보기 글 목록은 그 아래로"
	 * 최신 글 전문은 첫 화면에서 빼고 목록에서 골라 들어가게 한다.
	 * -------------------------------------------------------- */
	.home .col-main,
	.archive .col-main,
	.category .col-main { display: flex; flex-direction: column; }

	.home .cardlist,
	.archive .cardlist,
	.category .cardlist { display: block; order: 1; }

	.home .postlist,
	.archive .postlist,
	.category .postlist { order: 2; margin-top: 30px; }

	.home .entry,
	.archive .entry,
	.category .entry,
	.home .related,
	.archive .related,
	.category .related { display: none; }

	/* -----------------------------------------------------------
	 * 16-1b. 푸터 카피라이트 — 가운데 정렬, 온점에서 줄바꿈
	 * -------------------------------------------------------- */
	.footer-copy { text-align: center; }
	.footer-copy__line { display: block; }
	.footer-copy__line + .footer-copy__line::before { content: none; }

	/* -----------------------------------------------------------
	 * 16-2. 카드 목록
	 * -------------------------------------------------------- */
	.cardlist { margin: 0 0 8px; }
	.cardlist__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 2px 10px;
		border-bottom: 1px solid var(--line);
	}
	.cardlist__title { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }

	.cardlist__modes { display: flex; gap: 4px; }
	.cardlist__mode {
		width: 30px; height: 30px; padding: 0;
		border: 0; background: none; border-radius: 4px;
		display: inline-flex; align-items: center; justify-content: center;
		cursor: pointer;
	}
	.cardlist__mode[aria-pressed="true"] { background: #f1f3f5; }
	.cardlist__mode-icon { display: block; width: 16px; height: 16px; opacity: .55; }
	.cardlist__mode[aria-pressed="true"] .cardlist__mode-icon { opacity: 1; }

	/* 보기 방식 아이콘 — 격자 · 목록 · 카드 */
	.cardlist__mode-icon--photo {
		background:
			linear-gradient(var(--muted) 0 0) 0 0 / 7px 7px no-repeat,
			linear-gradient(var(--muted) 0 0) 9px 0 / 7px 7px no-repeat,
			linear-gradient(var(--muted) 0 0) 0 9px / 7px 7px no-repeat,
			linear-gradient(var(--muted) 0 0) 9px 9px / 7px 7px no-repeat;
	}
	.cardlist__mode-icon--list {
		background:
			linear-gradient(var(--muted) 0 0) 0 1px / 16px 3px no-repeat,
			linear-gradient(var(--muted) 0 0) 0 7px / 16px 3px no-repeat,
			linear-gradient(var(--muted) 0 0) 0 13px / 16px 3px no-repeat;
	}
	.cardlist__mode-icon--card {
		background:
			linear-gradient(var(--muted) 0 0) 0 0 / 16px 9px no-repeat,
			linear-gradient(var(--muted) 0 0) 0 12px / 16px 3px no-repeat;
	}

	.cardlist__items { display: block; }
	.cardlist__item { border-bottom: 1px solid var(--line-soft); }
	.cardlist__link {
		display: flex;
		gap: 14px;
		align-items: flex-start;
		padding: 16px 2px;
		color: var(--text);
	}
	.cardlist__link:hover { text-decoration: none; }

	.cardlist__thumb {
		flex: 0 0 auto;
		width: 76px; height: 76px;
		border-radius: 4px;
		overflow: hidden;
		background: #f1f3f5;
		display: flex; align-items: center; justify-content: center;
	}
	.cardlist__thumb img { width: 100%; height: 100%; object-fit: cover; }
	.cardlist__thumb.is-empty { background: var(--navy); }
	.cardlist__thumb.is-empty img { width: 34px; height: 34px; object-fit: contain; }

	.cardlist__body { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
	.cardlist__subject {
		font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--text);
		display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	}
	.cardlist__excerpt {
		font-size: 13px; line-height: 1.6; color: var(--muted);
		display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	}
	.cardlist__date { font-size: 12px; color: #9a9a9a; }

	/* 보기 방식 1 — 정사각형 사진만 격자로 */
	.cardlist.is-photo .cardlist__items {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 3px;
		padding-top: 3px;
	}
	.cardlist.is-photo .cardlist__item { border: 0; }
	.cardlist.is-photo .cardlist__link { display: block; padding: 0; }
	.cardlist.is-photo .cardlist__thumb {
		width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 0;
	}
	.cardlist.is-photo .cardlist__body { display: none; }

	/* 보기 방식 3 — 큰 가로 사진 아래 제목·본문 */
	.cardlist.is-card .cardlist__link { display: block; padding: 18px 2px 20px; }
	.cardlist.is-card .cardlist__thumb {
		width: 100%; height: auto; aspect-ratio: 16 / 9;
		margin-bottom: 12px; border-radius: 6px;
	}
	.cardlist.is-card .cardlist__thumb.is-empty img { width: 52px; height: 52px; }

	/* -----------------------------------------------------------
	 * 16-3. 글 화면 — 제목 위를 비우고 머리말 한 줄만 남긴다
	 *
	 * 헤더·공지·소개·주소를 본문 아래로 내린다.
	 * 마크업은 그대로 두고 .site 를 세로 flex 로 만들어 순서만 바꾼다.
	 * -------------------------------------------------------- */
	.single .site { display: flex; flex-direction: column; }
	.single .layout { order: 1; padding-top: 0; }
	.single .topbar { order: 4; }
	.single .hero { order: 5; }
	.single .notice { order: 6; }
	.single .intro { order: 7; }
	.single .site-footer { order: 8; }

	/* 제목 위에는 상단바의 카테고리 링크 하나만 남긴다.
	   위치 표시줄(홈 > 형사 전문 변호 > 형사)은 같은 정보라 중복이다.
	   구조화데이터가 붙어 있지 않은 순수 화면 요소라 감춰도 검색에 영향이 없다. */
	.single .breadcrumb { display: none; }

	/* 제목 위 게시판형 목록은 감춘다.
	   대신 상단바 오른쪽 목록 아이콘이 카테고리 목록으로 보낸다. */
	.single .postlist { display: none; }

	.single .mobilebar { display: block; background: #fff; }
	.mobilebar__top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 12px 2px;
	}
	.mobilebar__home {
		flex: 0 0 auto;
		font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -.02em;
	}
	.mobilebar__home:hover { text-decoration: none; }
	.mobilebar__title {
		flex: 1 1 auto; min-width: 0; text-align: center;
		font-size: 13px; color: var(--muted);
		overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	}
	.mobilebar__list { flex: 0 0 auto; color: var(--text); display: inline-flex; }
	.mobilebar__list:hover { color: var(--naver); }
	.mobilebar__cat {
		margin: 0;
		padding: 12px 2px 0;
		border-top: 1px solid var(--line-soft);
		font-size: 13px;
	}
	.mobilebar__cat a { color: var(--muted); }
	.mobilebar__cat a:hover { color: var(--naver); }

	/* -----------------------------------------------------------
	 * 16-4. 본문 아래 카테고리 글 — 제목 + 날짜 + 작은 사진, 두 개만
	 * -------------------------------------------------------- */
	.single .related .postlist__row {
		position: relative;
		padding-right: 78px;
		align-items: flex-start;
	}
	.single .related .postlist__row--head { display: none; }
	.single .related .postlist__row:nth-of-type(n+3) { display: none; }
	.single .related .postlist__cell--subject { white-space: normal; }
	.single .related .postlist__cell--subject a {
		white-space: normal;
		display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	}
	.single .related .postlist__thumb {
		display: block;
		position: absolute; right: 0; top: 50%;
		width: 64px; height: 64px; margin-top: -32px;
		border-radius: 4px; overflow: hidden; background: #f1f3f5;
	}
	.single .related .postlist__thumb img { width: 100%; height: 100%; object-fit: cover; }
	.single .related .postlist__thumb.is-empty {
		background: var(--navy);
		display: flex; align-items: center; justify-content: center;
	}
	.single .related .postlist__thumb.is-empty img { width: 28px; height: 28px; object-fit: contain; }

	/* 두 개만 보이므로 페이지 넘김 버튼은 감춘다 */
	.single .related .post-nav__prev,
	.single .related .post-nav__next { display: none; }
}