/*
 * 감람나무 상담센터 — QUICK NAV V2
 *
 * 1360px 이상: 오른쪽 세로 고정 메뉴
 * 1360px 미만: 하단 가로 고정 메뉴
 *
 * 변경 사항:
 * - PC 메뉴 너비 104px → 80px
 * - PC 메뉴 오른쪽 간격 16px → 12px
 * - 실제 전화번호 및 '빠른 안내' 제목 숨김
 * - PC 버튼 높이와 내부 여백 축소
 *
 * HTML / CSS만 사용
 * 기존 .mobile-contact HTML은 base.html에서 제거한 상태로 유지
 */

/* =========================================================
   1. 기본 디자인 — PC 우측 메뉴
   ========================================================= */

#olive-quick-nav {
  --oq-accent: #3f3f00;
  --oq-accent-dark: #303000;
  --oq-text: #46513b;
  --oq-muted: #66705b;
  --oq-line: #dfe5d6;
  --oq-soft: #f3f6ec;
  --oq-paper: #fffefb;

  position: fixed;
  top: 50%;
  right: 12px;
  z-index: 40;

  width: 80px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);

  margin: 0;
  padding: 5px;

  overflow-y: auto;
  overscroll-behavior: contain;

  border: 1px solid var(--oq-line);
  border-radius: 14px;

  background: var(--oq-paper);
  color: var(--oq-text);

  font-family: var(--brand-font-ko, sans-serif);
  line-height: 1.5;

  box-shadow: 0 8px 28px rgba(49, 61, 36, .09);
  transform: translateY(-50%);
}

#olive-quick-nav,
#olive-quick-nav *,
#olive-quick-nav *::before,
#olive-quick-nav *::after {
  box-sizing: border-box;
}

/* 상단 제목은 생략합니다. */
#olive-quick-nav .oq-heading {
  display: none;
}

#olive-quick-nav .oq-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* =========================================================
   2. 메뉴 링크
   ========================================================= */

#olive-quick-nav .oq-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;

  min-width: 0;
  min-height: 64px;

  margin: 0;
  padding: 9px 2px;

  border: 1px solid transparent;
  border-radius: 9px;

  background: transparent;
  color: var(--oq-text);

  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;

  text-align: center;
  text-decoration: none;

  word-break: keep-all;
  overflow-wrap: anywhere;
  touch-action: manipulation;

  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

#olive-quick-nav .oq-link:hover {
  border-color: #e0e7d5;
  background: var(--oq-soft);
  color: var(--oq-accent-dark);
}

/* 주요 메뉴: 상담 문의 */
#olive-quick-nav .oq-link--consult {
  border-color: var(--oq-accent);
  background: var(--oq-accent);
  color: #fff;
}

#olive-quick-nav .oq-link--consult:hover {
  border-color: var(--oq-accent-dark);
  background: var(--oq-accent-dark);
  color: #fff;
}

/* 맨 위로 */
#olive-quick-nav .oq-link--top {
  min-height: 60px;

  border-top-color: var(--oq-line);
  border-radius: 0 0 8px 8px;

  color: var(--oq-muted);
}

#olive-quick-nav .oq-label {
  display: block;
}

/*
 * 실제 전화번호는 화면에서 숨깁니다.
 *
 * 기존 HTML의 tel: 링크와 aria-label은 그대로 유지되므로
 * 전화 연결 및 보조기기의 전화번호 안내에는 영향을 주지 않습니다.
 * 화면에서 번호를 확인하려면 기존 푸터를 이용합니다.
 */
#olive-quick-nav .oq-phone-number {
  display: none;
}

/*
 * 포커스 테두리가 메뉴의 overflow 영역에 잘리지 않도록
 * 링크 안쪽으로 표시합니다.
 */
#olive-quick-nav .oq-link:focus-visible {
  outline: 3px solid #8a6500;
  outline-offset: -3px;
}

#olive-quick-nav .oq-link--consult:focus-visible {
  outline-color: #fff;
}

/* =========================================================
   3. 아이콘
   ========================================================= */

#olive-quick-nav .oq-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;

  width: 24px;
  height: 24px;

  color: inherit;
}

#olive-quick-nav .oq-icon svg {
  display: block;

  width: 24px;
  height: 24px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   4. 작은 PC / 태블릿 / 모바일 — 하단 메뉴
   ========================================================= */

/*
 * 브라우저 너비가 1360px보다 작으면 하단 메뉴로 전환합니다.
 *
 * 기준은 모니터의 물리적 해상도가 아니라 CSS 화면 너비입니다.
 * 창 크기 및 화면 배율에 따라 하단 메뉴가 표시될 수 있습니다.
 */
@media (max-width: 1359.98px) {
  /*
   * 고정 메뉴가 푸터 마지막 내용을 가리지 않도록
   * 페이지 하단에 여유 공간을 확보합니다.
   */
  body.simple-site.has-quick-nav {
    padding-bottom:
      calc(7rem + env(safe-area-inset-bottom, 0px));
  }

  /*
   * 앵커 이동 및 키보드 포커스 이동 시
   * 하단 메뉴와의 여유 공간을 확보합니다.
   */
  body.simple-site.has-quick-nav main [id],
  body.simple-site.has-quick-nav a,
  body.simple-site.has-quick-nav button,
  body.simple-site.has-quick-nav input,
  body.simple-site.has-quick-nav select,
  body.simple-site.has-quick-nav textarea,
  body.simple-site.has-quick-nav summary,
  body.simple-site.has-quick-nav [tabindex] {
    scroll-margin-bottom:
      calc(7rem + env(safe-area-inset-bottom, 0px));
  }

  #olive-quick-nav {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;

    width: auto;
    max-height: 40vh;
    max-height: 40dvh;

    padding: 8px 12px;
    padding-right:
      max(12px, env(safe-area-inset-right, 0px));
    padding-bottom:
      calc(8px + env(safe-area-inset-bottom, 0px));
    padding-left:
      max(12px, env(safe-area-inset-left, 0px));

    border: 0;
    border-top: 1px solid var(--oq-line);
    border-radius: 0;

    background: var(--oq-paper);
    box-shadow: 0 -4px 20px rgba(49, 61, 36, .07);

    transform: none;
  }

  #olive-quick-nav .oq-items {
    flex-direction: row;
    align-items: stretch;
    gap: 8px;

    width: 100%;
    max-width: 680px;

    margin: 0 auto;
  }

  #olive-quick-nav .oq-link {
    flex: 1 1 0;
    gap: 4px;

    min-height: 62px;
    padding: 7px 3px;

    border-radius: 9px;

    font-size: 13px;
    line-height: 1.5;
  }

  #olive-quick-nav .oq-link--top {
    flex: .8 1 0;

    min-height: 62px;

    border-color: var(--oq-line);
    border-radius: 9px;

    background: #f7f8f3;
  }

  #olive-quick-nav .oq-icon,
  #olive-quick-nav .oq-icon svg {
    width: 21px;
    height: 21px;
  }
}

/* 좁은 휴대폰 */
@media (max-width: 360px) {
  #olive-quick-nav .oq-items {
    gap: 5px;
  }

  #olive-quick-nav .oq-link {
    font-size: 12px;
  }
}

/* =========================================================
   5. 입력 요소 및 공지 팝업
   ========================================================= */

/*
 * :has() 지원 브라우저에서:
 * - 작은 화면의 입력 요소에 포커스가 있으면 하단 메뉴 숨김
 * - 공지 팝업이 열리면 퀵 메뉴 숨김
 *
 * 상담 문의 페이지는 기존 템플릿 조건에서 메뉴를 제외합니다.
 */
@supports selector(body:has(input:focus)) {
  @media (max-width: 1359.98px) {
    body.simple-site:has(
      input:focus,
      textarea:focus,
      select:focus,
      [contenteditable="true"]:focus
    ) #olive-quick-nav {
      visibility: hidden;
      pointer-events: none;
    }
  }

  body.simple-site:has(
    dialog.olive-notice[open]
  ) #olive-quick-nav {
    visibility: hidden;
    pointer-events: none;
  }
}

/*
 * :has() 미지원 환경에서도 기존 showModal() 팝업은
 * 브라우저 최상위 레이어에 표시되며 배경 조작을 차단합니다.
 */

/* =========================================================
   6. 접근성 / 인쇄
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  #olive-quick-nav .oq-link {
    transition: none;
  }
}

@media print {
  #olive-quick-nav {
    display: none !important;
  }

  body.simple-site.has-quick-nav {
    padding-bottom: 0 !important;
  }
}

/* =========================================================
   퀵 메뉴 자료실 추가

   - 1360px 이상: 기존 메뉴 + 자료실 + 맨 위로
   - 1360px 미만: 상담 문의 / 전화 문의 / 오시는 길 / 자료실
   - 자료실 목록 및 PDF 열람 화면에서 자료실 메뉴 강조
   ========================================================= */

/* 현재 자료실 영역에 있을 때 */
#olive-quick-nav .oq-link--resources[aria-current] {
  border-color: #b9c7a8;
  background: #edf2e5;
  color: var(--oq-accent-dark);
}

/* 자료실 메뉴에 마우스를 올렸을 때 */
#olive-quick-nav .oq-link--resources:hover {
  border-color: #c6d2b7;
  background: #edf2e5;
  color: var(--oq-accent-dark);
}

/*
 * 하단 메뉴에서는 맨 위로를 숨깁니다.
 * 자료실을 포함한 핵심 메뉴 4개에 동일한 너비를 배분합니다.
 */
@media (max-width: 1359.98px) {
  #olive-quick-nav .oq-items {
    flex-wrap: nowrap;
  }

  #olive-quick-nav .oq-link {
    flex: 1 1 0;
  }

  #olive-quick-nav .oq-link--top {
    display: none;
  }
}