/* 오변호사 법률사무소 공통 레이아웃: 헤더, 메뉴, 푸터 */
*, *::before, *::after { box-sizing: border-box; }
/* 공통 색 (2026-10 새 디자인: 미색 바탕, 남색, 주황 강조색 하나) */
:root {
  --h2-bg: #f6f2ec;
  --h2-tint: #efe9df;
  --h2-ink: #1c2230;
  --h2-sub: #4a5061;
  --h2-line: #d9d1c4;
  --h2-navy: #10305a;
  --h2-accent: #e0603a;
  --h2-accent-dark: #c94f2b;
}
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--h2-bg);
  color: var(--h2-ink);
  font-family: 'Pretendard', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }

/* ---------- 헤더 ---------- */
.ol-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(246, 242, 236, .92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  height: 64px;
  border-bottom: 1px solid transparent;
}
.ol-header-inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
}
.ol-logo { display: flex; align-items: center; }
.ol-logo img { width: 90px; height: auto; display: block; }
.ol-logo .logo-m { display: none; }

.ol-nav { display: flex; align-items: center; gap: 4px; }
.ol-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; }
.ol-nav li { position: relative; }
.ol-nav > ul > li > a {
  display: block; padding: 0 15px; line-height: 40px;
  font-size: 15px; color: var(--h2-ink); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.ol-nav > ul > li > a:hover { color: rgba(54, 54, 54, .7); }
.ol-nav > ul > li > a.active { font-weight: 700; border-bottom-color: var(--h2-accent); }

/* 드롭다운 */
.ol-nav ul ul {
  list-style: none; margin: 0; padding: 8px 0;
  position: absolute; min-width: 210px;
  background: #fff; border: 1px solid var(--h2-line); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  display: none;
}
.ol-nav > ul > li > ul { top: 100%; left: 0; }
.ol-nav ul ul ul { top: -9px; left: 100%; }
.ol-nav li:hover > ul, .ol-nav li:focus-within > ul { display: block; }
.ol-nav ul ul a {
  display: block; padding: 9px 18px; font-size: 14px; color: #333;
  text-decoration: none; white-space: nowrap;
}
.ol-nav ul ul a:hover { background: var(--h2-bg); color: var(--h2-accent); }
.ol-nav ul ul li.has-sub > a::after { content: '›'; float: right; margin-left: 12px; color: #999; }
/* 오른쪽 끝 메뉴는 하위 메뉴를 왼쪽으로 */
.ol-nav > ul > li.edge ul ul { left: auto; right: 100%; }
.ol-nav > ul > li.edge > ul { left: auto; right: 0; }

.ol-call {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 10px;
  height: 40px; padding: 0 16px; border-radius: 999px;
  background: var(--h2-accent); color: #fff; font-size: 14px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
}
.ol-call:hover { background: var(--h2-accent-dark); }
/* 헤더의 전화번호: 네이버 예약 버튼 옆에 글씨로만 (2026-10-24) */
.ol-tel {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 14px;
  font-size: 14px; font-weight: 700; color: #212121; text-decoration: none; white-space: nowrap;
}
.ol-tel i { font-size: 12px; color: var(--h2-accent); }
.ol-tel:hover { color: var(--h2-accent); }
.ol-login {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 14px;
  font-size: 13px; color: var(--h2-sub, #666); text-decoration: none; white-space: nowrap;
}
.ol-login i { font-size: 11px; }
.ol-login:hover { color: var(--h2-accent); }
.ol-mmenu-login {
  display: flex; align-items: center; gap: 8px; margin: 16px 24px 24px; padding-top: 16px;
  border-top: 1px solid var(--h2-line, #e5e5e5); font-size: 14px; color: #666; text-decoration: none;
}

.ol-burger {
  display: none; width: 44px; height: 44px; border: 0; background: none;
  cursor: pointer; padding: 10px;
}
.ol-burger span { display: block; height: 2px; background: #212121; margin: 5px 0; border-radius: 2px; }

/* 모바일 메뉴 */
.ol-mmenu {
  position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, .4);
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
.ol-mmenu.open { opacity: 1; visibility: visible; }
.ol-mmenu-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(86vw, 360px);
  background: var(--h2-bg); overflow-y: auto; padding: 16px 0 100px;
  transform: translateX(100%); transition: transform .25s;
}
.ol-mmenu.open .ol-mmenu-panel { transform: none; }
.ol-mmenu-close { display: block; margin: 0 12px 8px auto; width: 44px; height: 44px; border: 0; background: none; font-size: 28px; cursor: pointer; }
.ol-mmenu ul { list-style: none; margin: 0; padding: 0; }
.ol-mmenu li a { display: block; padding: 12px 24px; text-decoration: none; color: #212121; font-size: 16px; }
.ol-mmenu li li a { padding-left: 40px; font-size: 15px; color: #444; }
.ol-mmenu li li li a { padding-left: 56px; font-size: 14px; color: #666; }
.ol-mmenu li li li li a { padding-left: 72px; }
.ol-mmenu details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.ol-mmenu details > summary::-webkit-details-marker { display: none; }
.ol-mmenu details > summary a { flex: 1; }
.ol-mmenu details > summary::after { content: '+'; padding: 0 24px; font-size: 18px; color: #888; }
.ol-mmenu details[open] > summary::after { content: '−'; }

@media (max-width: 1100px) {
  .ol-nav > ul { display: none; }
  .ol-burger { display: block; }
  .ol-header { height: 56px; }
}
@media (max-width: 767px) {
  .ol-header { height: 48px; }
  .ol-header-inner { padding: 0 6px 0 12px; }
  .ol-logo .logo-pc { display: none; }
  .ol-logo .logo-m { display: block; width: 119px; }
  .ol-call, .ol-tel { display: none; }
  .ol-login { margin-left: 0; margin-right: 4px; font-size: 12px; }
  .ol-burger span { height: 1.5px; margin: 6px 0; }
}

/* ---------- 푸터 ---------- */
.ol-footer { padding: 56px 24px 120px; background: var(--h2-tint); border-top: 1px solid var(--h2-line); }
.ol-footer-inner { max-width: 1000px; margin: 0 auto; display: flex; gap: 40px; justify-content: space-between; flex-wrap: wrap; }
.ol-footer-logo img { height: 30px; width: auto; margin-bottom: 14px; }
.ol-footer p { margin: 4px 0; font-size: 13px; color: var(--h2-sub); line-height: 1.7; }
.ol-footer .copy { margin-top: 18px; color: #888; font-size: 12px; }
.ol-sns { display: flex; gap: 14px; align-items: flex-start; }
.ol-sns a { color: #212121; font-size: 17px; text-decoration: none; }
.ol-sns .naver-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; background: #212121; color: #fff;
  font: 900 12px/1 Arial, sans-serif; border-radius: 2px;
}
.ol-footer p a { color: inherit; text-decoration: none; }
.ol-footer .ol-footer-login { margin-top: 10px; }
.ol-footer .ol-footer-login a { text-decoration: underline; text-underline-offset: 3px; }

/* 인쇄할 때 종이 아래쪽에 미색 바탕이 찍히지 않게 (모든 페이지 공통, 2026-10-23) */
@media print {
  html, body { background: #fff !important; }
}

/* 면책 안내 (푸터·칼럼·Q&A·매뉴얼·후기) */
.ol-footer .ol-footer-note { margin-top: 18px; max-width: 560px; font-size: 12px; color: #888; line-height: 1.7; word-break: keep-all; }
.ol-footer .ol-footer-note + .copy { margin-top: 6px; }
.ol-notice { margin: 32px 0 24px; padding: 14px 18px; background: #faf7f2; border-radius: 8px; font-size: 13px; line-height: 1.75; color: #5b6170; word-break: keep-all; text-align: left; }
.ol-notice.is-plain { background: none; padding: 0; margin: 28px 0 0; text-align: center; font-size: 12.5px; }

/* 메인 첫 화면 위에 겹치는 헤더 (index의 header에 is-over, 2026-10-26)
   첫 화면에서는 바탕 없이 흰 글씨, 조금 내리면 미색 바탕으로 바뀜(site.js가 is-solid를 붙임) */
.ol-header.is-over { position: fixed; left: 0; right: 0; transition: background-color .3s, box-shadow .3s; }
.ol-header.is-over:not(.is-solid) { top: 10px; left: 10px; right: 10px; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* 휴대폰은 첫 화면 사진을 테두리 없이 화면 끝까지 (2026-10-26 사용자 의견) */
@media (max-width: 640px) { .ol-header.is-over:not(.is-solid) { top: 0; left: 0; right: 0; } }
.ol-header.is-over:not(.is-solid) .ol-logo img { filter: brightness(0) invert(1); }
.ol-header.is-over:not(.is-solid) .ol-nav > ul > li > a,
.ol-header.is-over:not(.is-solid) .ol-tel { color: #fff; }
.ol-header.is-over:not(.is-solid) .ol-nav > ul > li > a:hover { color: rgba(255, 255, 255, .75); }
.ol-header.is-over:not(.is-solid) .ol-tel i { color: #ffb79c; }
.ol-header.is-over:not(.is-solid) .ol-burger span { background: #fff; }
.ol-header.is-over.is-solid { box-shadow: 0 1px 0 var(--h2-line); }