/*
 * layout.css — WP0가 소유하는 구조 레이아웃 + 공용 프리미티브.
 *
 * 여기 포함된 것: 컨테이너, 헤더/푸터 골격, 하단탭, 스테퍼, 상태블록(state.php),
 * 버튼/토스트/모달의 최소 골격 CSS. (이 요소들은 includes/*.php 로 WP0에서 만든 것이므로
 * 스타일도 base 계층에 둔다. 이후 WP가 만드는 카드/폼 등 화면별 컴포넌트는
 * assets/css/components 또는 assets/css/pages 에 추가한다.)
 *
 * 브레이크포인트 (BRIEF §2 / CORRECTIONS.md C7):
 *   base = 모바일(390px~), 그 다음 순서대로
 *   @media (max-width:389.98px)  — 작은 모바일
 *   @media (min-width:768px)     — 태블릿 이상
 *   @media (min-width:1280px)    — PC
 */

/* ==== 컨테이너 ==== */
/* 짧은 페이지에서도 footer가 뷰포트 맨 아래에 오도록 공통 문서 흐름을 세로 flex로 구성한다.
   본문이 길어지면 body가 함께 늘어나므로 footer가 콘텐츠를 가리거나 화면에 고정되지 않는다. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sp-4);
  padding-right: var(--sp-4);
}

.container--wide {
  max-width: var(--hd-width);
}

/* ==== 사이트 헤더 (흰색 라운드 pill 바) ====
 * 모바일에서는 헤더(로고/GNB/알림벨/로그인·마이페이지 링크)를 완전히 숨긴다 — 하단탭 5개
 * (홈/견적/중고마켓/채팅/마이) 만으로는 업체찾기/이용후기/고객센터/서비스안내에 닿을 수 없으므로
 * 대신 member/mypage.php(로그인) · member/login.php(비로그인) 의 "전체메뉴"
 * (assets/css/components/sitemap-menu.css, includes/header.php 의 bingo_render_sitemap_menu())
 * 가 같은 사이트맵을 제공한다. 마크업은 항상 그대로 emit 하고(단일 반응형 코드베이스 원칙,
 * PHP에서 헤더 출력을 끊지 않는다 — 200% 확대/좁은 데스크톱 창처럼 "모바일 폭"이지만 실제로는
 * 데스크톱인 경우도 CSS 뷰포트 폭 기준으로 동일하게 동작해야 하기 때문이다), display:none 으로만
 * 전환한다. 태블릿 이상(>=768px)부터는 아래 "@media (min-width:768px)" 블록(하단탭/GNB 전환 블록)
 * 에서 다시 노출한다.
 *
 * .site-header 는 모바일에서 display:none 이므로 그 상태에서는 애초에 렌더되지 않아 차지하는
 * 공간이 없다 — 별도로 body/site-main 에 예약해둔 상단 padding/margin은 필요 없다.
 *
 * >=768px 에서는(아래 "@media (min-width:768px)" 블록) 클라이언트 레퍼런스 시안대로 흰색 알약
 * 헤더가 페이지 배경(홈 히어로 그라데이션/견적요청 타이틀 밴드 등) 위에 떠 있는 것처럼 보여야
 * 하므로 position:fixed 로 문서 흐름 밖으로 빼고(.site-header 자체 배경은 항상 transparent),
 * 알약(.site-header__inner)만 그 안에서 보이게 한다. fixed 는 더 이상 자기 높이를 문서 흐름에
 * 예약하지 않으므로, 그만큼을 --header-h 토큰(assets/css/base/tokens.css, 알약 min-height +
 * 헤더 상하 패딩)으로 고정해 .site-main 이 기본 상단 오프셋으로 대신 예약한다(바로 아래 "메인 영역"
 * 섹션). 헤더 바로 아래에 색이 있는 밴드가 있는 화면(홈 히어로/견적요청/로그인·가입류)은 그 기본
 * 오프셋을 취소하고 밴드 자신의 상단 패딩에 --header-h 를 더해, 배경이 헤더 뒤까지 이어지고
 * 내용은 알약 아래에서 시작하게 한다(해당 페이지 CSS: home.css .home-hero, estimate.css
 * .estimate-page__title, auth.css .auth-wrap, 그리고 이 파일의 body.has-stepper .site-main).
 *
 * chat/room.php 는 .chat-room-page 높이를 "100vh - 헤더높이 - 하단탭높이" 로 직접 계산해두고
 * 있어(assets/css/pages/chat.css) >=768px 헤더높이도 --header-h 로 맞춰 함께 갱신했다(같은 파일 참고).
 */
.site-header {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: var(--pd-40) var(--pd-20);
  background: transparent;
}

.site-header__inner {
  max-width: var(--hd-width);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  background: var(--surface-0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: var(--pd-20) var(--pd-40);
  min-height: var(--header-pill-min-h);
}

.logo {
  font-weight: 700;
  color: var(--sub-color);
  font-size: 1.25rem;
  white-space: nowrap;
}

.logo img {
  display: block;
  width: auto;
  height: 40px;
}

/*
 * GNB (WP-nav 패키지): 대메뉴 7종(서비스안내/견적요청/중고마켓/업체찾기/이용후기/고객센터) +
 * 2단계 드롭다운. 하위메뉴가 있는 항목은 <details class="gnb__item--dropdown"><summary> 로
 * 마크업해 브라우저 기본 동작(클릭·터치·Enter/Space)만으로 여닫히게 하고, assets/js/core/gnb.js
 * 가 aria-expanded 동기화/Escape 닫기/바깥클릭 닫기/아코디언(형제 닫기) 만 보강한다.
 *
 * 마크업은 데스크톱(인라인 드롭다운)과 모바일(전체높이 드로어)에서 동일하다 — CSS만 다르다
 * (PC/모바일 파일 분리 금지 원칙). 모바일에서는 헤더의 햄버거 버튼(.gnb-toggle)이 <nav class="gnb">
 * 에 .is-open 을 토글해 오른쪽에서 슬라이드인하는 드로어로 전환한다.
 */
.gnb {
  display: none;
}

.gnb.is-open {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  width: min(320px, 86vw);
  background: var(--surface-0);
  box-shadow: var(--shadow-2);
  padding: calc(var(--sp-4) + env(safe-area-inset-top, 0px)) var(--sp-4) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
  gap: var(--sp-1);
  overflow-y: auto;
}

.gnb-backdrop {
  position: fixed;
  inset: 0;
  z-index: 290;
  background: rgba(17, 24, 39, 0.5);
}

.gnb-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  color: var(--text-2);
}

.gnb__close {
  display: flex;
  align-self: flex-end;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  margin-bottom: var(--sp-2);
}

.gnb__item {
  border-bottom: 1px solid var(--surface-1);
}

.gnb__link,
.gnb__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  width: 100%;
  min-height: 48px;
  color: var(--text-2);
  font-weight: 500;
  font-size: 0.9375rem;
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.gnb__trigger::-webkit-details-marker {
  display: none;
}

.gnb__trigger-chevron {
  flex-shrink: 0;
  color: var(--text-3);
  transition: transform 0.15s ease;
}

.gnb__item[open] > .gnb__trigger .gnb__trigger-chevron {
  transform: rotate(180deg);
}

.gnb__link.is-current,
.gnb__trigger.is-current {
  color: var(--main-color);
}

.gnb__link:hover,
.gnb__trigger:hover {
  color: var(--main-color);
}

.gnb__link:focus-visible,
.gnb__trigger:focus-visible,
.gnb__toggle:focus-visible,
.gnb-toggle:focus-visible,
.gnb__close:focus-visible {
  outline: 2px solid var(--main-color);
  outline-offset: 2px;
}

.gnb__panel {
  padding: 0 0 var(--sp-2) var(--sp-3);
}

.gnb__panel-list {
  display: flex;
  flex-direction: column;
}

.gnb__panel-list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-2);
  font-size: 0.875rem;
}

.gnb__panel-list a:hover,
.gnb__panel-list a:focus-visible {
  color: var(--main-color);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}

.header-actions__login,
.header-actions__member {
  color: var(--text-2);
  font-size: 0.875rem;
  white-space: nowrap;
}

/* ==== 메인 영역 ==== */
.site-main {
  flex: 1 0 auto;
  width: 100%;
  min-height: 60vh;
 
  padding-bottom: calc(var(--sp-8) + 56px + env(safe-area-inset-bottom, 0px));
}

body.has-stepper .site-main {
  background: var(--hero-gradient);
}

@media (min-width: 768px) {
  .site-main {
    padding-bottom: var(--sp-8);
    /* 기본 오프셋: .site-header 가 fixed(문서 흐름 밖)라 더 이상 높이를 예약하지 않으므로,
       본문이 흰 알약 아래에서 시작하도록 site-main 이 --header-h 만큼 상단 여백을 대신 가진다. */
    padding-top: calc(var(--header-h) + var(--sp-4));
  }

  /* 오버레이 opt-in: 위 배경 규칙(body.has-stepper .site-main)이 이미 이 파일 소유이므로, 기본
     오프셋 취소도 같은 곳에 둔다 — 실제 내용 하강은 estimate.css 의 .estimate-page__title 이
     자기 상단 패딩에 --header-h 를 더해서 대신한다(header-h 두 번 적용 방지). */
  body.has-stepper .site-main {
    padding-top: 0;
  }
}

/* ==== 사이트 푸터 ==== */
.site-footer {
  flex-shrink: 0;
  width: 100%;
  background: var(--surface-1);
  padding: var(--sp-8) var(--sp-4);
  margin-top: var(--sp-8);
}

.site-footer__inner {
  max-width: var(--hd-width);
  margin-left: auto;
  margin-right: auto;
  color: var(--text-3);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}

.site-footer__links a {
  color: var(--text-2);
}
.site-footer__biz {
  font-size:inherit;
}
.site-footer__disclaimer {
  font-size: 0.75rem;
  color: var(--text-3);
  margin-top: var(--sp-2);
}

/* ==== 하단탭 (모바일 5탭: 홈/견적/중고마켓/채팅/마이) ==== */
.bottom-tab {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  background: var(--surface-0);
  border-top: 1px solid #eef1f4;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bottom-tab__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  min-width: 44px;
  color: var(--text-3);
  font-size: 0.6875rem;
}

.bottom-tab__label {
  white-space: nowrap;
}

.bottom-tab__item .bottom-tab__icon--home {
  background:url('/assets/images/icons/home.png') center/24px 24px no-repeat;
}

.bottom-tab__item .bottom-tab__icon--estimate {
  background:url('/assets/images/icons/menu.png') center/24px 24px no-repeat;
}

.bottom-tab__item .bottom-tab__icon--market {
  background:url('/assets/images/icons/market.png') center/24px 24px no-repeat;
}

.bottom-tab__item .bottom-tab__icon--chat {
  background:url('/assets/images/icons/chat.png') center/24px 24px no-repeat;
}

.bottom-tab__item .bottom-tab__icon--my {
  background:url('/assets/images/icons/user.png') center/24px 24px no-repeat;
}

.bottom-tab__item.is-active {
  color: #222;
}

.bottom-tab__icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  background: currentColor;
  opacity: 0.3;
}

.bottom-tab__item.is-active .bottom-tab__icon {
  opacity: 1;
}

/* >=768px 에서는 GNB가 흰색 pill 헤더 안 가로 메뉴로 보이므로 하단탭/햄버거는 숨긴다
   (마크업은 유지, CSS로만 전환 — 단일 반응형 코드베이스 원칙). */
@media (min-width: 768px) {
  .site-header {
    display: block;
  }

  .bottom-tab {
    display: none;
  }

  .gnb {
    display: flex !important;
    position: static;
    flex-direction: row;
    align-items: center;
    width: auto;
    gap: var(--sp-6);
    background: transparent;
    box-shadow: none;
    padding: 0;
    overflow: visible;
  }

  .gnb-toggle,
  .gnb__close {
    display: none;
  }

  .gnb-backdrop {
    display: none !important;
  }

  .gnb__item {
    position: relative;
    border-bottom: none;
  }

  .gnb__link,
  .gnb__trigger {
    width: auto;
    min-height: auto;
  }

  .gnb__trigger-chevron {
    width: 12px;
    height: 12px;
  }

  .gnb__panel {
    position: absolute;
    top: calc(100% + var(--sp-3));
    left: 50%;
    transform: translateX(-50%);
    min-width: 168px;
    background: var(--surface-0);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
    padding: var(--sp-2);
    z-index: 150;
    animation: gnb-panel-in 0.15s ease;
  }

  .gnb__panel-list a {
    padding: 0 var(--sp-3);
    border-radius: var(--radius-sm);
    white-space: nowrap;
  }

  .gnb__panel-list a:hover,
  .gnb__panel-list a:focus-visible {
    background: var(--surface-1);
    color: var(--main-color);
  }
}

@keyframes gnb-panel-in {
  from {
    opacity: 0;
    transform: translate(-50%, -4px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* ==== 스테퍼 (견적요청 3단계) ==== */
.stepper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--sp-6);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-4) var(--sp-4);
}

.stepper__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-3);
}

.stepper__index {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-1);
  color: var(--text-3);
  font-weight: 700;
  font-size: 0.875rem;
}

.stepper__item--active .stepper__index,
.stepper__item--done .stepper__index {
  background: var(--main-color);
  color: #fff;
}

.stepper__item--active .stepper__label {
  color: var(--text-1);
  font-weight: 700;
}

@media (max-width: 389.98px) {
  .stepper {
    gap: var(--sp-3);
  }
  .stepper__label {
    font-size: 0.8125rem;
  }
}

/* ==== 상태블록 (includes/state.php: 로딩/빈값/오류/로그인필요/권한없음) ==== */
.state-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
  color: var(--text-2);
}

.state-block__message {
  font-size: 0.9375rem;
}

.state-block__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background:var(--surface-1) url('/assets/images/icons/dot3.png') center/16px 16px no-repeat;
}

.state-block--error .state-block__icon { background: rgba(229,72,77,.15); }
.state-block--login .state-block__icon,
.state-block--forbidden .state-block__icon { background: rgba(12,81,161,.1); }

.state-block__spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--surface-1);
  border-top-color: var(--main-color);
  animation: bingo-spin 0.8s linear infinite;
}

@keyframes bingo-spin {
  to { transform: rotate(360deg); }
}

/* ==== 버튼 (공용 최소 골격, 화면별 변형은 각 WP의 컴포넌트 CSS에서 확장) ==== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--sp-6);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
}

.btn--primary {
  background: var(--sub-color);
  color: #fff;
}

.btn--outline {
  background: transparent;
  border: 1px solid var(--main-color);
  color: var(--main-color);
}

.btn:disabled {
  opacity: 0.5;
}

/* ==== 토스트 (assets/js/core/toast.js 가 생성) ==== */
.toast-container {
  position: fixed;
  left: 50%;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  pointer-events: none;
  width: 100%;
  padding: 0 var(--sp-4);
}

.toast {
  background: rgba(17, 24, 39, 0.92);
  color: #fff;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: 100%;
}

.toast--visible {
  opacity: 1;
  transform: translateY(0);
}

.toast--error { background: var(--color-danger); }
.toast--success { background: var(--color-success); }

/* ==== 모달 (assets/js/core/modal.js 가 열고 닫음, 실제 마켑은 각 WP에서 구성) ==== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.5);
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}

body.modal-open {
  overflow: hidden;
}