@charset "utf-8";
/* ==============================================================================
   menu_brochure.css  —  헤더 「Web Brochure」 알약 버튼
   생성 2026-08-18

   [이 파일의 역할]
     예전 헤더(layouts/navigation.blade.php) 맨 오른쪽에 붙는
     골드 알약 버튼 하나만 담당합니다.

   [왜 따로 만들었나]
     styles.css · reactive.css 는 손대지 않는 것이 원칙입니다.
     이 파일만 지우면 버튼 스타일이 깔끔하게 사라집니다.

   [적용 범위]
     .header .gnb 안에서만 적용됩니다.
     같은 메뉴 파일을 쓰는 **사이트맵(햄버거)** 과 **푸터** 에는 적용되지 않습니다.
       · 사이트맵 : styles.css 483행에서 한글(.after)을 숨기고 영문만 큰 글씨로 씁니다
       · 푸터     : styles.css 547행에서 똑같이 처리합니다
     거기서는 다른 메뉴들과 똑같은 평범한 글자로 보입니다. 의도된 동작입니다.
   ============================================================================== */

/* ------------------------------------------------------------------------------
   골드 색상 변수

   사이트에 --gold 라는 변수가 **정의된 적이 없어서** 여기서 만듭니다.
   값은 사이트가 실제로 쓰고 있는 골드입니다 (styles.css 에서 36번 사용).
   ------------------------------------------------------------------------------ */
:root{
  --gold:#c5a059;
}


/* ------------------------------------------------------------------------------
   1. 알약 모양 만들기

   원래 메뉴 글자는 헤더 높이(112px) 전체를 채우는 구조라
   그대로 두면 알약이 세로로 길쭉해집니다.
   그래서 이 메뉴만 높이를 글자에 맞추고 세로 가운데로 정렬합니다.
   ------------------------------------------------------------------------------ */
.header .gnb > li.gnb_brochure > .flip-link{
  display:flex;
  align-items:center;      /* 헤더 높이 안에서 세로 가운데 */
  height:100%;
  line-height:1;           /* 원래 112px 이던 줄높이를 풉니다 */
  padding:0 0 0 12px;      /* 왼쪽 COMMUNITY 와의 간격 */
}

/* 뒤집기 상자 — 원래는 106px 고정폭인데, 글자 길이에 맞게 늘어나도록 풉니다 */
.header .gnb > li.gnb_brochure .flip-inner{
  width:auto;
  height:auto;
}

/* 영문(평소)과 한글(호버) 두 면에 똑같이 알약 옷을 입힙니다 */
.header .gnb > li.gnb_brochure .before,
.header .gnb > li.gnb_brochure .after{
  padding:10px 14px;
  border-radius:32px;
  color:#ffffff;
  background-color:var(--gold);
  font-size:15px;
  font-weight:500;
  line-height:1.25;
  white-space:nowrap;
}

/* 영문 면은 흐름 안에 두어 **이 글자가 알약 크기를 결정**하게 합니다.
   한글 면은 그 위에 겹쳐 같은 크기를 그대로 씁니다. */
.header .gnb > li.gnb_brochure .before{ position:relative; }
.header .gnb > li.gnb_brochure .after { position:absolute; inset:0; }


/* ------------------------------------------------------------------------------
   2. 색 유지

   원래 메뉴는 마우스를 올리거나 현재 페이지일 때 글자가 골드로 바뀝니다.
   알약은 배경이 골드라 글자까지 골드가 되면 안 보이므로 흰색으로 고정합니다.
   ------------------------------------------------------------------------------ */
.header .gnb > li.gnb_brochure:hover > .flip-link,
.header .gnb > li.gnb_brochure.on > .flip-link{
  color:#ffffff !important;
}

/* 마우스를 올렸을 때 살짝 눌린 느낌 — 버튼이라는 신호를 줍니다 */
.header .gnb > li.gnb_brochure > .flip-link{
  transition:opacity .25s cubic-bezier(.22,.61,.36,1);
}
.header .gnb > li.gnb_brochure:hover > .flip-link{ opacity:.88; }

/* 키보드 사용자를 위한 표시 */
.header .gnb > li.gnb_brochure > .flip-link:focus-visible{
  outline:2px solid #ffffff;
  outline-offset:3px;
  border-radius:32px;
}


/* ==============================================================================
   3. 반응형 — 사이트 기존 기준점과 동일
   ------------------------------------------------------------------------------
   메뉴가 6개 → 7개가 되면서 1440px 화면의 여유가 줄었습니다.
   실측 : 로고 200 + 메뉴 924 + 간격 64 + 로그인·햄버거 68 + 여백 40 = 1296
          여기에 알약(약 123)이 더해져 1419 — 1440 안에 들어옵니다.
   좁은 화면에서 더 안전하도록 아래에서 한 번 더 줄입니다.
   ============================================================================== */
@media screen and (max-width:1499px){
  .header .gnb > li.gnb_brochure > .flip-link{ padding-left:8px; }
  .header .gnb > li.gnb_brochure .before,
  .header .gnb > li.gnb_brochure .after{ padding:9px 12px; font-size:14px; }
}

@media screen and (max-width:1023px){
  /* 이 구간부터 헤더 메뉴가 숨겨지고 햄버거(사이트맵)로 바뀝니다.
     사이트맵에서는 다른 메뉴와 똑같은 평범한 글자로 보입니다. */
}