/* ============================================================
   layout.css — 헤더 / GNB / 좌측 사이드바 / 우측 퀵메뉴 / 푸터

   [2026-09] GHGOLF 메인 시안 기준으로 재작성.
     · 헤더  : 로고(마크 + GHGOLF + 태그라인) / 가로 메뉴 / 우상단 작은 유틸
     · 본문  : 1179px = 좌측 사이드바 183px + 본문 927px (gap 22)
     · 하단 섹션(추천 골프장·공지·뉴스레터)은 사이드바 밖 전체폭으로 둔다
   ============================================================ */

/* ---------- 헤더 ---------- */
#header{
  position:relative;z-index:100;
  background:var(--white);
  border-bottom:1px solid var(--gray-200);
}
#header .inner{
  position:relative;display:flex;align-items:center;
  height:74px;padding:0 24px;max-width:var(--container);
}

/* 로고 : 마크 + GHGOLF + 태그라인 */
.logo{display:flex;align-items:center;gap:12px;flex-shrink:0;margin-right:34px;}
.logo-mark{width:46px;height:46px;flex-shrink:0;}
.logo-mark img,.logo-mark svg{width:100%;height:100%;object-fit:contain;display:block;}
.logo-text{
  display:block;font-size:28px;font-weight:800;line-height:1;
  color:var(--green-700);letter-spacing:-1.4px;white-space:nowrap;
}
.logo-text i{font-style:normal;color:var(--green-700);}
/* 로고 아래 태그라인 */
.logo-tag{
  display:block;font-size:11px;font-weight:700;line-height:14px;
  color:#48705b;letter-spacing:-.3px;margin-top:3px;font-style:normal;
}

/* ---------- GNB ---------- */
.gnb{flex:1;}
.gnb-1d{display:flex;align-items:center;gap:30px;}
.gnb-1d>li{position:relative;}
.gnb-1d>li>a{
  display:block;line-height:74px;
  font-size:15px;font-weight:700;color:var(--gray-800);
  letter-spacing:-.5px;white-space:nowrap;
}
.gnb-1d>li:hover>a,.gnb-1d>li.on>a{color:var(--green-700);}
.gnb-1d>li.on>a{box-shadow:inset 0 -3px 0 var(--green-600);}

/* 2뎁스 드롭다운 */
.gnb-2d{
  display:none;position:absolute;top:100%;left:-14px;min-width:158px;z-index:20;
  background:var(--white);border:1px solid var(--gray-200);border-top:2px solid var(--green-600);
  padding:6px 0;
}
.gnb-1d>li:hover .gnb-2d{display:block;}
.gnb-2d a{display:block;padding:8px 16px;font-size:13px;color:var(--gray-700);white-space:nowrap;}
.gnb-2d a:hover{background:var(--green-050);color:var(--green-700);font-weight:700;}

/* ---------- 우상단 유틸 ---------- */
.gnb-util{
  position:absolute;right:24px;top:9px;
  display:flex;align-items:center;gap:12px;
  font-size:11px;color:var(--gray-400);
}
.gnb-util a{color:var(--gray-400);}
.gnb-util a:hover{color:var(--green-700);text-decoration:underline;}
.gnb-util .util-user{color:var(--gray-700);}
.gnb-util .util-user b{color:var(--green-700);font-weight:700;}
.util-mile{padding:1px 7px;border:1px solid var(--green-600);color:var(--green-700) !important;font-weight:700;}
.util-tel{display:none;}

/* 전체메뉴 버튼 — 시안에는 없고 좁은 화면에서만 쓴다 */
.allmenu-btn{
  display:none;margin-left:auto;width:40px;height:34px;
  align-items:center;justify-content:center;
  border:1px solid var(--gray-200);border-radius:4px;
}
.allmenu-btn .bars{display:inline-flex;flex-direction:column;gap:3px;}
.allmenu-btn .bars span{display:block;width:16px;height:2px;background:var(--gray-700);}
.allmenu{
  position:absolute;left:0;right:0;top:100%;z-index:99;
  background:var(--white);border-bottom:1px solid var(--gray-200);
}
.allmenu .inner{display:grid;grid-template-columns:repeat(5,1fr);padding-top:24px;padding-bottom:28px;}
.allmenu-col{padding:0 18px;border-left:1px solid var(--gray-200);}
.allmenu-col:first-child{border-left:0;}
.allmenu-col h4{
  font-size:15px;color:var(--green-700);font-weight:700;
  padding-bottom:9px;margin-bottom:9px;border-bottom:1px solid var(--gray-200);
}
.allmenu-col a{display:block;padding:5px 0;font-size:13px;color:var(--gray-700);}
.allmenu-col a:hover{color:var(--green-700);font-weight:700;}

/* ---------- 본문 ---------- */
#app{min-height:60vh;padding-bottom:0;}

/*
  관리자·담당자 화면은 페이지 제목줄(.page-head)을 걷어냈다.
  '관리자' 제목 한 줄과 빵부스러기뿐인데 padding 28+22 에 margin 26 까지 80px 가까이
  세로를 먹었고, 바로 아래 탭과 녹색 업무 메뉴가 현재 위치를 이미 알려 준다.
  그 결과 본문(.inner)이 사이트 헤더에 딱 붙으므로 여기서 위 여백을 준다.
  헤더와 녹색 업무 메뉴 사이라 넓을 이유가 없다 — 붙지만 않을 만큼만 준다.
  아래쪽(#app.wide > .inner:last-child)은 표가 푸터에 닿지 않아야 해서 더 넉넉하다.
  한때 그 자리에 얇은 빵부스러기 줄을 뒀다가 뺐다 — 탭과 녹색 업무 메뉴가 현재 위치를
  이미 알려 주는데 줄만 하나 더 늘어서다.
  제목줄이 있는 고객 화면은 .page-head 가 첫 자식이라 이 규칙에 걸리지 않는다.
*/
#app > .inner:first-child{padding-top:10px;}

/*
  관리자·담당자 화면(= #app.wide) 본문 아래 여백.
  #app 은 padding-bottom:0 이라 마지막 표가 푸터에 0px 로 딱 붙어 있었다.
  제목줄을 걷어내고 간격을 줄이면서 더 답답해 보였다.
  고객 화면은 블록마다 자기 여백이 있어 건드리지 않는다.
*/
#app.wide > .inner:last-child{padding-bottom:36px;}

/* 시안 레이아웃 : 사이드바 + 본문 */
.layout{
  display:grid;grid-template-columns:183px 927px;gap:22px;
  max-width:var(--container);margin:0 auto;padding:0 24px;align-items:start;
}
.layout>.main{min-width:0;}

/* ---------- 좌측 사이드바 ---------- */
.sidebar{width:183px;}
.side-menu{border:1px solid #e8e9ec;border-radius:4px;overflow:hidden;background:var(--white);}
.side-title{
  height:64px;display:flex;align-items:center;padding-left:22px;
  background:linear-gradient(110deg,#09643f,#117647);
  color:#fff;font-size:21px;font-weight:800;letter-spacing:-1px;
}
.side-title svg{width:20px;height:20px;margin-right:9px;}
.side-menu a{
  height:54px;display:flex;align-items:center;padding:0 23px;
  font-size:15px;font-weight:500;color:var(--gray-800);
  border-bottom:1px solid #fafafa;
}
.side-menu a:last-child{border-bottom:0;}
.side-menu a::after{content:"›";margin-left:auto;font-size:19px;color:#dcdcdc;}
.side-menu a:hover{background:var(--green-050);color:var(--green-700);font-weight:700;}

/* 고객센터 블록 */
.support{margin-top:18px;padding:20px;border:1px solid #e8e9ec;border-radius:4px;background:var(--white);}
.support h3{font-size:17px;font-weight:700;margin-bottom:5px;letter-spacing:-.5px;}
/* 사이드바 폭(183px)에서 한 줄로 떨어지도록 크기를 맞춘다 */
.support strong{display:block;font-size:20px;line-height:28px;letter-spacing:-1px;color:#14663f;font-weight:800;white-space:nowrap;}
.support p{margin:5px 0 20px;font-size:13px;line-height:22px;color:var(--gray-600);}
.support a{
  display:flex;align-items:center;gap:7px;height:44px;margin-top:8px;padding-left:11px;
  background:#f3f4f6;border-radius:5px;font-size:12px;font-weight:700;color:var(--gray-700);
}
.support a:hover{background:var(--green-050);color:var(--green-700);}

/* 사이드 프로모션 배너 */
.side-promo{display:block;width:183px;margin-top:18px;border-radius:5px;overflow:hidden;}
.side-promo img{width:100%;display:block;}

/* ---------- 우측 고정 퀵메뉴 (조인 배너 + 바로가기 3개) ----------
   배너 그림도 SVG 라 글자가 이미지에 박히지 않는다(문구 수정 자유·고배율 선명). */
.quick{position:fixed;top:150px;z-index:80;width:106px;left:calc(50% + 610px);}
.quick-banner{
  display:block;border:1px solid var(--gray-200);background:var(--white);
  margin-bottom:8px;overflow:hidden;text-align:center;padding-bottom:11px;
}
/* 배너 그림 : 브랜드 그린 단색 바탕에 골프공 하나 */
.quick-banner .qb-art{
  display:flex;align-items:center;justify-content:center;height:72px;
  background:linear-gradient(140deg,var(--green-700),#12a066);
}
.quick-banner .qb-art svg{width:52px;height:52px;display:block;}
.quick-banner b{
  display:block;margin-top:10px;font-size:13px;font-weight:800;
  letter-spacing:-.6px;color:var(--green-700);
}
.quick-banner i{display:block;margin-top:4px;font-style:normal;font-size:11px;line-height:1.45;color:var(--gray-600);}
.quick-banner em{
  display:inline-block;margin-top:9px;padding:5px 13px;font-style:normal;
  background:var(--green-600);color:#fff;font-size:11px;font-weight:700;border-radius:12px;
}
.quick-banner:hover em{background:var(--green-800);}
.quick .tit{
  display:block;height:25px;line-height:25px;text-align:center;
  background:#1f2326;color:#fff;font-size:13px;font-weight:600;
}
.quick ul{border:1px solid var(--gray-200);border-top:0;background:var(--white);}
.quick li+li{border-top:1px solid var(--gray-200);}
.quick li a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  height:66px;font-size:12px;color:var(--gray-700);text-align:center;
}
.quick li a svg{width:22px;height:22px;color:var(--green-700);}
.quick li a:hover{background:var(--green-050);color:var(--green-700);}
@media (max-width:1440px){ .quick{display:none;} }

/* ---------- 푸터 ---------- */
#footer{background:var(--white);border-top:1px solid var(--gray-200);color:var(--gray-500);font-size:13px;}
.foot-top{max-width:var(--container);margin:0 auto;padding:26px 24px 30px;display:flex;gap:40px;align-items:flex-start;}
.foot-brand{display:flex;align-items:center;gap:10px;flex-shrink:0;width:210px;}
.foot-brand .logo-mark{width:38px;height:38px;}
.foot-brand b{display:block;font-size:20px;color:var(--green-700);font-weight:800;letter-spacing:-1px;line-height:1;}
/* 브랜드명 아래 태그라인 (b 다음의 span 만) */
.foot-brand b + span{display:block;font-size:11px;color:#48705b;font-weight:700;margin-top:4px;}
.foot-info{flex:1;line-height:1.95;color:var(--gray-600);font-size:13px;}
.foot-info b{color:var(--gray-800);font-weight:700;}
.foot-links{display:flex;flex-direction:column;gap:9px;align-items:flex-end;flex-shrink:0;}
.foot-links a{font-size:13px;color:var(--gray-600);}
.foot-links a:hover{color:var(--green-700);}
.foot-copy{border-top:1px solid var(--gray-200);}
.foot-copy .inner{padding-top:14px;padding-bottom:22px;color:var(--gray-400);font-size:12px;}

/* ---------- 반응형 (시안은 PC 고정. 좁은 화면은 우리가 유지) ---------- */
@media (max-width:1220px){
  .layout{grid-template-columns:170px 1fr;gap:18px;}
  .sidebar,.side-promo{width:170px;}
  .gnb-1d{gap:18px;}
  .gnb-1d>li>a{font-size:14px;}
  .logo{margin-right:20px;}
}
@media (max-width:980px){
  #header .inner{height:62px;}
  .gnb{display:none;}
  .allmenu-btn{display:flex;}
  .layout{grid-template-columns:1fr;}
  .sidebar{display:none;}          /* 좁은 화면에서는 본문만 */
  .allmenu .inner{grid-template-columns:repeat(3,1fr);}
  .allmenu-col{border-left:0;padding:0 12px;}
  .foot-top{flex-direction:column;gap:16px;}
  .foot-links{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:14px;}
}
@media (max-width:640px){
  #header .inner{padding:0 14px;}
  .logo-text{font-size:23px;}
  .logo-mark{width:38px;height:38px;}
  .gnb-util{right:14px;gap:8px;}
  .allmenu .inner{grid-template-columns:repeat(2,1fr);}
}

/* 우측 퀵메뉴(조인 배너·바로가기)는 고객 화면용이다.
   관리자/매니저 화면에서는 숨긴다 — 업무 화면에 고객 유도 배너가 뜰 이유가 없고,
   표가 넓은 화면에서는 가로 폭까지 잡아먹는다.
   footer 조각 안에 들어 있어 모든 화면에 따라붙던 것을,
   '넓은 본문'(#app.wide = 관리자 표 화면)의 형제일 때만 숨겨서 고객 화면은 그대로 둔다. */
#app.wide ~ .quick,
#app.wide ~ * .quick{display:none;}