/* ==========================================================================
   헤더 / 사이드 내비 / 플로팅 / 상담바 / 팝업 / 푸터
   ========================================================================== */

/* --------------------------------------------------------------- header -- */
#header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  width: 100%;
  transition: all var(--dur);
}

#header > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

#header .logo { width: var(--logo-w); }
#header .logo img { height: 38px; }

/* 밝은 배경 위(=스크롤/드롭다운 상태)에서만 어두운 아이콘 세트를 노출한다 */
#header .ico-dark { display: none !important; }

#header .gnb ul { display: flex; }

#header .gnb li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 144px;
  padding: 45.5px 0;
  text-align: center;
}

#header .gnb li.is-active { background: var(--tint); }

#header .gnb li a {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--white);
}

#header .util,
#sidebar .util {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 220px;
}

#header .util .search-box { margin-right: 24px; }
#header .util .search-box img,
#sidebar .util .search-box img { height: 24px; }

#header .util .loc-box { display: none; }
#header .util .menu-box { margin-left: 44px; }
#header .util .menu-box button { display: flex; align-items: center; }

/* 언어 선택 */
.lang-box { position: relative; }

.lang-box > button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--white);
  border-radius: 100px;
}

.lang-box > button p {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--white);
}

.lang-box .dropdown {
  position: absolute;
  top: 44px;
  left: 50%;
  display: none;
  width: fit-content;
  padding: 20px;
  transform: translateX(-50%);
  background: var(--white);
  border: 1px solid var(--line-input);
  border-radius: 6px;
}

.lang-box .dropdown a {
  display: block;
  margin-bottom: 20px;
  font-size: var(--fs-base);
  font-weight: 400;
  color: #6A6A6A;
  white-space: nowrap;
}

.lang-box .dropdown a:last-child { margin-bottom: 0; }
.lang-box .dropdown a:hover { color: #111; font-weight: 700; }

/* 원본에서 열림(.on) 상태 색 변화는 헤더 ID 셀렉터에 밀려 실제로는 나타나지 않는다 */
#header.is-solid .lang-box > button { border-color: var(--brand); }
#header.is-solid .lang-box > button p { color: var(--brand); }

/* 헤더 반전 상태: 스크롤(.is-stuck) / 드롭다운 오픈(.is-open) 공통 */
#header.is-solid { background: var(--white); }
#header.is-solid .ico-dark { display: block !important; }
#header.is-solid .ico-light { display: none !important; }
#header.is-solid .gnb li a { color: var(--ink-900); }
#header.is-stuck { box-shadow: var(--shadow-header); }

/* 2차 메뉴 드롭다운 */
.gnb-drop {
  position: absolute;
  left: 0;
  display: none;
  width: 100%;
  overflow: hidden;
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.gnb-drop .container { display: flex; justify-content: space-between; }
.gnb-drop .spacer { width: var(--logo-w); }
.gnb-drop .sub-gnb > ul { display: flex; }

.gnb-drop .sub-gnb > ul > li {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 144px;
  padding: 40px 20px 75px;
  text-align: center;
}

/* 세로 구분선은 없앴다(박변 지시) — 윗칸 메뉴엔 선이 없어, 강조된 열의 좌우 끝이 윗칸보다 1px 어긋나 보였다 */
.gnb-drop .sub-gnb > ul > li.is-active { background: var(--tint); }

.gnb-drop .sub-gnb a {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink-700);
  white-space: nowrap;
}

.gnb-drop .sub-gnb a:last-child { margin-bottom: 0; }

.gnb-drop .sub-gnb a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  background: var(--brand);
  opacity: 0;
  transform: translateY(-50%);
  transition: all var(--dur);
}

.gnb-drop .sub-gnb a:hover { color: var(--brand); }
.gnb-drop .sub-gnb a:hover::before { left: -10px; opacity: 1; }

@media (max-width: 1500px) {
  #header .gnb { display: none; }
  #header .util .search-box { margin-right: 12px; }
  #header .util .lang-box { margin-right: 12px; }
  #header .util .loc-box { display: block; }
  #header .util .menu-box { margin-left: 24px; }
  #header .util .menu-box img { height: 20px; }
}

@media (max-width: 1024px) {
  #header .logo img { height: 24px; }
  #header .util .lang-box > button p { display: none; }
  #header .util .menu-box img { height: 18px; }
}

@media (max-width: 768px) {
  #header .util .menu-box { margin-left: 20px; }
  #header .util .menu-box img { height: 14px; }
}

/* -------------------------------------------------------------- sidebar -- */
#sidebar {
  position: fixed;
  inset: 0;
  z-index: 10000;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .4);
  opacity: 0;
  visibility: hidden;
  transition: all var(--dur);
}

#sidebar.is-open { opacity: 1; visibility: visible; }

#sidebar .box {
  width: 100%;
  max-width: 375px;
  height: 100%;
  margin-left: auto;
  background: var(--white);
  box-shadow: var(--shadow-header);
}

#sidebar .top { display: flex; align-items: center; padding: 10px 16px; }
#sidebar .top .logo { margin-right: auto; }
#sidebar .top .logo img { height: 24px; }

#sidebar .util { width: auto; margin-right: 10px; }
#sidebar .util .search-box { margin-right: 10px; }
#sidebar .util .search-box a { display: block; }
#sidebar .util .lang-box > button { border-color: var(--brand); }
#sidebar .util .lang-box > button p { color: var(--brand); }

#sidebar .side-gnb { padding: 30px 20px; }
#sidebar .side-gnb > ul > li { margin-bottom: 20px; }
#sidebar .side-gnb > ul > li:last-child { margin-bottom: 0; }

#sidebar .side-gnb > ul > li > a {
  display: block;
  padding: 7px 10px;
  font-size: var(--fs-md);
  font-weight: 800;
}

#sidebar .side-gnb .dropdown { display: none; }

#sidebar .side-gnb .dropdown a {
  display: block;
  padding: 7px 10px;
  font-size: var(--fs-xs);
  color: #3C3C3C;
}

/* ------------------------------------------------------- floating btns -- */
.float-btns {
  position: fixed;
  right: 40px;
  bottom: 100px;
  z-index: 99;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.float-btns > * {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 60px;
  background: var(--charcoal);
  box-shadow: var(--shadow-float);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  transition: all var(--dur-s);
}

.float-btns > *:hover { transform: translateY(-5px); }
.float-btns > * svg { width: 24px; height: 24px; }
.float-btns .btn-call { background: var(--brand); }
.float-btns .mobile { display: none; }
.float-btns .float-form-open { display: none; }

@media (max-width: 1200px) {
  .float-btns .float-form-open { display: flex; }
}

@media (max-width: 1024px) {
  .float-btns { right: 16px; bottom: 30px; gap: 14px; }
  .float-btns > * { width: 48px; height: 48px; }
  .float-btns > * svg { width: 18px; height: 18px; }
}

@media (max-width: 768px) {
  .float-btns .mobile { display: flex; }
  .float-btns .pc { display: none; }
}

/* --------------------------------------------------- 하단 고정 상담 폼 -- */
.float-form {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 1001;
  display: flex;
  width: 100%;
}

.float-form .info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 20px;
  padding: 0 24px;
  background: var(--brand);
  color: var(--white);
  font-size: var(--fs-base);
  font-weight: 500;
}

.float-form .info * { color: inherit; }
.float-form .info strong { font-size: 1.64em; font-weight: 700; }

.float-form .panel { flex: 1; padding: 20px 34px; background: var(--charcoal); }
.float-form .panel > .btn-close { display: none; }

.float-form form {
  display: flex;
  align-items: center;
  gap: 0 24px;
  color: var(--white);
}

.float-form .field { display: flex; align-items: center; gap: 0 10px; }
.float-form .field .tit { font-size: 18px; font-weight: 700; color: var(--white); }

.float-form .field input,
.float-form .field textarea {
  display: block;
  width: 100%;
  max-width: 250px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid #252525;
  border-radius: 5px;
  background: #333;
  color: var(--white);
  font-size: var(--fs-base);
}

.float-form .field input::placeholder,
.float-form .field textarea::placeholder { color: #8b8b8b; }

.float-form .field--memo { flex: 1; }
.float-form .field textarea { max-width: initial; padding: 11px 16px; resize: none; }

.float-form .agree input { display: none; }

.float-form .agree label {
  display: flex;
  align-items: center;
  gap: 0 10px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: rgba(255, 255, 255, .7);
  cursor: pointer;
}

.float-form .agree label::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  border: 1px solid #747474;
  background: var(--white);
}

.float-form .agree input:checked + label { color: var(--white); }
.float-form .agree input:checked + label::before {
  background: var(--white) url(../img/check_01.svg) no-repeat center / 115%;
}

.float-form .submit {
  display: flex;
  align-items: center;
  min-width: 128px;
  height: 44px;
  padding: 0 30px;
  background: var(--brand);
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
}

@media (max-width: 1700px) {
  .float-form .info { flex-direction: column; gap: 4px; padding: 0 16px; font-size: var(--fs-2xs); }
  .float-form .panel { padding: 20px; }
  .float-form .field .tit { font-size: var(--fs-sm); }
  .float-form .field input { max-width: 180px; }
  .float-form .field--name input { max-width: 140px; }
}

@media (max-width: 1500px) {
  .float-form .info { display: none; }
}

@media (max-width: 1200px) {
  .float-form {
    display: none;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 24px;
    background: rgba(0, 0, 0, .6);
  }
  .float-form .panel {
    position: relative;
    max-width: 400px;
    max-height: 100%;
    overflow-y: auto;
    background: var(--white);
  }
  .float-form .panel > .btn-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
  }
  .float-form form { flex-direction: column; align-items: flex-start; gap: 20px 0; width: 100%; }
  .float-form .field { flex-direction: column; align-items: flex-start; gap: 8px 0; width: 100%; }
  .float-form .field .tit { color: #000; font-size: var(--fs-base); font-weight: 500; }
  .float-form .field input,
  .float-form .field textarea {
    width: 100%;
    max-width: 100% !important;
    padding: 0 14px;
    border-color: var(--line-input);
    background: transparent;
    color: #000;
    font-size: var(--fs-xs);
  }
  .float-form .field textarea { height: 136px; padding: 14px; }
  .float-form .agree label { color: rgba(0, 0, 0, .7); }
  .float-form .agree input:checked + label { color: #000; }
  .float-form .submit {
    justify-content: center;
    width: 100%;
    border-radius: 50px;
    font-size: var(--fs-sm);
    font-weight: 700;
  }
}

/* --------------------------------------------------------------- footer -- */
#footer { padding: 80px 0 120px; border-top: 1px solid #e6e0d4; background: var(--footer-bg); }
#footer .container { display: flex; justify-content: space-between; }
#footer .logo img { height: 30px; }   /* 화백 워드마크는 13.75:1 가로형 — 65px 이면 894px 폭이 되어 정보줄을 밀어낸다 */

#footer .util {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 10px;
}

#footer .util ul { display: flex; align-items: center; gap: 20px; }
#footer .util ul li { position: relative; padding-right: 20px; }

#footer .util ul li::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 1px;
  height: 14px;
  background: #d6cfc1;
  transform: translateY(-50%);
}

#footer .util ul li:last-child { padding-right: 0; }
#footer .util ul li:last-child::after { display: none; }

#footer .util ul a,
#footer .util ul button {
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}

#footer .sns { display: flex; align-items: center; gap: 12px; }
#footer .sns img { height: 34px; }

#footer .info { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 20px; }
#footer .info p { white-space: nowrap; }
#footer .info p { font-size: var(--fs-xs); font-weight: 400; color: var(--ink-600); }
#footer .info b { font-weight: 700; color: var(--ink); }

#footer .copyright { font-size: var(--fs-xs); font-weight: 400; color: var(--ink-500); }

@media (max-width: 1500px) {
  #footer .logo img { height: 26px; }
}

@media (max-width: 1280px) {
  #footer .container { flex-direction: column; }
  #footer .logo { margin-bottom: 24px; }
}

@media (max-width: 768px) {
  #footer { padding: 60px 0; }
  #footer .logo img { height: 22px; }
  #footer .util { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 24px; }
  #footer .util ul { flex-wrap: wrap; gap: 10px; }
  #footer .util ul li { padding-right: 10px; }
  #footer .util ul a,
  #footer .util ul button { font-size: 12px; }
  #footer .sns img { height: 22px; }
  #footer .info { flex-direction: column; align-items: flex-start; gap: 10px; }
  #footer .info p { font-size: 13px; }
  #footer .copyright { font-size: 12px; }
}

/* ------------------------------------------------- 개인정보처리방침 팝업 -- */
.term-pop {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 20px;
  background: rgba(0, 0, 0, .5);
}

.term-pop.is-open { display: flex; }

.term-pop .inner {
  display: flex;
  flex-direction: column;
  width: calc(100% - 40px);
  max-width: 1360px;
  height: 100%;
  max-height: 770px;
  padding: 60px;
  border-radius: 30px;
  background: var(--white);
  box-shadow: 0 4px 34px rgba(0, 0, 0, .1);
}

.term-pop .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 60px;
}

.term-pop .head .tit { font-size: 36px; font-weight: 600; }
.term-pop .cont { height: 100%; overflow-y: auto; }
.term-pop .cont p { font-size: var(--fs-sm); line-height: 1.2; }

@media (max-width: 768px) {
  .term-pop { padding: 0; }
  .term-pop .inner { padding: 40px 24px; }
  .term-pop .head { margin-bottom: 30px; }
  .term-pop .head .tit { font-size: 28px; }
  .term-pop .head .btn-close svg { width: 24px; }
}

/* --------------------------------------------------------- 상담 팝업 ---- */
.popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .65);
}

.popup-overlay.hidden { display: none !important; }

.popup-box {
  position: relative;
  width: 90%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 25px 30px;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 4px 25px rgba(0, 0, 0, .3);
  text-align: center;
  animation: fadeInUp .4s ease;
}

#aiPopup .popup-box { width: 100%; max-width: 530px; padding: 25px; border-radius: 15px; }

.popup-box .close-btn {
  position: absolute;
  right: 15px;
  top: 15px;
  font-size: var(--fs-lg);
  line-height: 1;
  cursor: pointer;
}

.popup-header .phone-icon img {
  display: block;
  width: 70px;
  height: 70px;
  margin: 0 auto;
  object-fit: contain;
}

.popup-header h2 { margin-bottom: 5px; font-size: 22px; font-weight: 700; color: var(--cta-blue); }
.popup-header p { margin-bottom: 5px; font-size: var(--fs-2xs); color: #555; }

.popup-form label {
  display: block;
  margin: 8px 0 4px;
  text-align: left;
  font-size: var(--fs-2xs);
  color: #333;
}

.popup-form input,
.popup-form textarea {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: var(--fs-2xs);
}

.popup-form .privacy-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.popup-form .privacy-wrap input[type='checkbox'] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--cta-blue);
  -webkit-appearance: auto;
          appearance: auto;
}

.popup-form .privacy-wrap label { margin: 0; white-space: nowrap; }

.submit-btn {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border-radius: 30px;
  background: var(--cta-blue);
  color: var(--white);
  font-size: var(--fs-sm);
  transition: var(--dur);
}

.submit-btn:hover { background: var(--cta-blue-hi); }

.ai-popup-content { overflow-y: auto; }
.ai-popup-content iframe { width: 100%; height: 70vh; border: none; }

.error-bubble {
  position: relative;
  display: inline-block;
  margin-top: 5px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--danger);
  color: var(--white);
  font-size: 13px;
}

.error-bubble::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 20px;
  border: 6px solid transparent;
  border-bottom-color: var(--danger);
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── 화백: 구성원 섹션은 프로필 사진·명단 확보 전까지 숨김 ── */
.newcomers { display: none; }


/* ── 화백 로고: 삼족오 심볼 + 한글 사명 한 줄(박변 지시 2026-08-22 — 2줄 적층에서 변경) ──
   img{max-width:100%} 때문에 심볼이 눌리지 않도록 width:auto 를 명시한다. */
.logo a { display: flex; align-items: center; gap: 12px; }
.logo .logo__mark { height: 46px; width: auto; flex: none; }
#header .logo__text { color: #fff; }
#header.is-solid .logo__text { color: #121212; }
#sidebar .top .logo .logo__mark { height: 30px; }
#sidebar .top .logo .logo__text { font-size: 18px; color: #121212; }
#footer .logo .logo__mark { height: 44px; }
#footer .logo .logo__text { font-size: 20px; color: #fff; }
@media (max-width: 1024px) {
  #header .logo { width: auto; }   /* 1500px 이하에선 GNB 가 숨으므로 정렬 제약 없음 */
  #header .logo a { gap: 9px; }
  #header .logo .logo__text { font-size: 17px; }
  #footer .logo .logo__text { font-size: 17px; }
}
/* 심볼 크기: #header .logo img / #footer .logo img 규칙(ID 선택자)이 이기므로 같은 무게로 덮는다 */
#header .logo img.logo__mark { height: 46px; }
#footer .logo img.logo__mark { height: 48px; }
@media (max-width: 1024px) { #header .logo img.logo__mark { height: 34px; } #footer .logo img.logo__mark { height: 36px; } }

/* 워드마크 이미지(법률사무소 화백 + LAW OFFICE) — 헤더는 투명/불투명에 따라 흰↔검정 교체 */
.logo .logo__wm { width: auto; flex: none; }
#header .logo .logo__wm { height: 34px; }
#header .logo .logo__wm.ico-dark { display: none !important; }
#header.is-solid .logo .logo__wm.ico-light { display: none !important; }
#header.is-solid .logo .logo__wm.ico-dark { display: block !important; }
#sidebar .top .logo .logo__wm { height: 24px; }
#footer .logo .logo__wm { height: 30px; }
@media (max-width: 1024px) {
  #header .logo .logo__wm { height: 26px; }
  #footer .logo .logo__wm { height: 24px; }
}

/* 인물 사진 비표시 (2026-08-28 박변 지시)
 * 실제 인물(동인 변호사·행사 참석자) 사진 89장은 파일을 지우지 않고 `_임시` 접미사를 붙여
 * 서빙 경로에서 제외했다. 그 사진을 담고 있던 상자는 빈 채로 남으면 레이아웃이 어그러지므로
 * 여기서 접는다. 사진을 되살리려면 파일명에서 `_임시` 를 떼고 이 클래스만 제거하면 된다. */
.no-person-img { display: none !important; }

/* 상담봇 준비 중 안내 (외부 프로토타입 iframe 대체) */
.ai-ready { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 64px 24px; text-align: center; }
.ai-ready__title { font-size: var(--fs-lg); font-weight: 700; color: var(--ink); }
.ai-ready__desc { font-size: var(--fs-base); line-height: 1.7; color: var(--ink-600); }
.ai-ready__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
.ai-ready__btns .consult-btn { display: inline-flex; align-items: center; }