/* ============================================================
   base.css — 디자인 토큰, 리셋, 타이포그래피

   [2026-09 개편] GHGOLF 메인 시안(GHGOLF_main_html) 기준.
     · 폰트  : Noto Sans KR 14px (시안과 동일 서체. 10MB ttf 대신 웹폰트로 연결)
     · 색    : 브랜드 그린(#087142) 크롬 + 토 #1174c8 / 일 #ed4147 / 잔여수 #214a88
     · 형태  : 표 중심. 카드·패널만 4px 라운드
     · 폭    : 1179px 고정 컨테이너 (사이드바 183 + 본문 927)
   ============================================================ */

/* 디자인 토큰: 색·간격·폰트를 한 곳에서 관리 */
:root{
  /*
    ---- 브랜드 그린 (GHGOLF 메인 시안 기준) ----
    시안의 헤더 로고·사이드 타이틀·버튼이 모두 이 계열이다.
    이전 네이비 토큰은 이름을 유지하되 그린으로 바꿔, 기존 화면들이
    var(--navy-*) 를 참조하고 있어도 한 번에 새 톤을 따라오게 했다.
  */
  --navy-900:#087142;    /* 주 버튼·사이드 타이틀 */
  --navy-800:#09643f;    /* 진한 그린(hover·그라디언트 끝) */
  --navy-700:#075932;    /* 가장 진한 그린 */

  --green-900:#06442b;
  --green-800:#14663f;   /* 흰 배경 위 텍스트용 */
  --green-700:#09643f;
  --green-600:#087142;   /* CTA 배경 */
  --green-100:#e7f2ec;
  --green-050:#f4f9f6;

  /* ---- 요일·수량 색 (달력/매트릭스의 핵심) ---- */
  --blue-600:#1174c8;    /* 토요일 */
  --blue-500:#214a88;    /* 잔여 팀 수 숫자 */
  --blue-050:#eef3fb;
  --red-600:#ed4147;     /* 일요일·공휴일 */
  --red-500:#f33d43;
  --red-050:#fdeded;
  --orange-600:#f37735;  /* 탭 강조 */
  --gold-600:#ebac11;    /* 팀 수 배지 */

  /* ---- 회색 계열 : 222golf 실측값 ---- */
  --gray-900:#333333;
  --gray-800:#404040;
  --gray-700:#555555;
  --gray-600:#666666;
  --gray-500:#6d6d6d;
  --gray-400:#888888;
  --gray-300:#bfbfbf;    /* 버튼 보더 */
  --gray-200:#e7e7e7;    /* 표 보더 — 사이트에서 가장 많이 쓰인다 */
  --gray-150:#d8d8d8;
  --gray-100:#f2f2f2;
  --gray-050:#f6f6f6;    /* 주말 열 배경 */
  --gray-025:#f9f9f9;
  --white:#fff;

  /* 시간대별 액센트 — 티타임 목록에서 사용 */
  --slot-dawn:#6b5bd2;
  --slot-morning:#52bc1c;
  --slot-afternoon:#f37735;
  --slot-sunset:#d15454;

  /*
    이전 그라디언트 토큰은 이름만 남기고 전부 단색으로 바꿨다.
    (기존 화면들이 var(--grad-brand) 를 참조하고 있어 이름을 유지한다)
  */
  --grad-brand:#087142;
  --grad-deep:#09643f;
  --grad-gold:#ebac11;

  /* 플랫 UI — 라운드 없음. 배지만 아주 살짝 */
  --radius-sm:2px;
  --radius:0;
  --radius-lg:0;
  --radius-xl:0;

  --ease:ease;

  /* 그림자 없음 */
  --shadow-sm:none;
  --shadow:none;
  --shadow-md:none;
  --shadow-lg:none;
  --shadow-green:none;

  --container:1179px;
  /* 관리자 표 화면 전용 넓은 폭.
     1179px 는 고객 화면(읽기 중심) 기준이라, 열이 18개인 선티관리 같은 표에서는
     화면이 1440 이어도 260px 를 비워 두고 표만 가로로 스크롤되는 상황이 된다.
     표 화면에서만 이 값을 쓴다(#app.wide). 고객 화면은 종전대로 1179px. */
  --container-wide:1700px;
  /*
    시안과 같은 Noto Sans KR. 시안에 동봉된 ttf 는 9.9MB 라 그대로 쓰면
    방문자마다 10MB 를 받게 되므로, 서브셋 웹폰트(fragments.html 의 link)로 불러오고
    내려받기 전·실패 시에는 윈도우 기본 글꼴로 떨어뜨린다.
  */
  --font:"Noto Sans KR","맑은 고딕","Malgun Gothic","나눔고딕",돋움,Dotum,sans-serif;
  --font-head:var(--font);
}

/* 리셋 */
*,*::before,*::after{box-sizing:border-box;}
html,body,div,span,h1,h2,h3,h4,h5,h6,p,a,em,img,strong,b,i,ul,ol,li,
table,caption,tbody,tfoot,thead,tr,th,td,form,label,legend,fieldset,
article,aside,footer,header,main,nav,section,figure,figcaption{
  margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;
}
article,aside,footer,header,main,nav,section,figure{display:block;}
ul,ol{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
img{max-width:100%;height:auto;display:block;}
button{background:none;border:0;cursor:pointer;font:inherit;color:inherit;}
input,select,textarea{font:inherit;color:inherit;}
a{color:inherit;text-decoration:none;}

html{-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font);
  font-size:14px;          /* 시안 기준 본문 크기 */
  line-height:1.5;
  color:var(--gray-900);
  background:var(--white);  /* 배경 그라디언트 제거 — 순백 */
  word-break:keep-all;
}

/* 타이포그래피 — 별도 제목 폰트 없이 나눔고딕 굵기로만 위계를 준다 */
h1,h2,h3,h4{color:var(--gray-900);font-weight:600;line-height:1.35;letter-spacing:-1px;}
b,strong{font-weight:700;}
em{font-style:normal;}

/* 스킵 내비게이션: 평소 화면 밖, 포커스 시 노출 */
.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  padding:10px 20px;background:var(--navy-900);color:#fff;
}
.skip:focus{left:0;}

/* 공통 유틸 클래스 */
.inner{max-width:var(--container);margin:0 auto;padding:0 20px;}
/* 표가 넓은 관리자 화면은 본문 폭을 넓게 쓴다.
   <main id="app" class="wide"> 한 군데만 바꾸면 페이지 제목줄(.page-head .inner)과
   본문이 같이 넓어져 좌우가 어긋나지 않는다. 화면이 좁으면 100% 라 그대로 줄어든다. */
#app.wide .inner{max-width:var(--container-wide);}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
.txt-red{color:var(--red-600);}
.txt-blue{color:var(--blue-600);}
.txt-green{color:var(--green-800);}
.txt-gray{color:var(--gray-500);}
.txt-right{text-align:right;}
.txt-center{text-align:center;}
.mt-0{margin-top:0;}
.mt-8{margin-top:8px;}
.mt-16{margin-top:16px;}
.mt-24{margin-top:24px;}
.mt-32{margin-top:32px;}
.mt-40{margin-top:40px;}

/* 스크롤바 (매트릭스 가로 스크롤 등) */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.scroll-x::-webkit-scrollbar{height:10px;}
.scroll-x::-webkit-scrollbar-track{background:var(--gray-100);}
.scroll-x::-webkit-scrollbar-thumb{background:var(--gray-300);}
.scroll-x::-webkit-scrollbar-thumb:hover{background:var(--gray-400);}

/*
  이전 디자인의 장식 요소들 — 222golf 에는 없다.
  화면별 마크업을 걷어내는 중이라, 남아 있어도 보이지 않도록 무력화해 둔다.
*/
.dimple{background-image:none;}
.eyebrow{display:none;}
.grad-text{background:none;color:inherit;-webkit-text-fill-color:currentColor;}
.floaty{animation:none;}

/* 모션 최소화 설정을 존중 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}

/* 맨 위로 버튼 — 플랫 사각 */
#toTop{
  position:fixed;right:20px;bottom:20px;z-index:90;
  width:40px;height:40px;
  background:var(--navy-700);border:0;color:#fff;
  font-size:16px;
  display:none;align-items:center;justify-content:center;
}
#toTop.show{display:flex;}
#toTop:hover{background:var(--navy-900);}

/* 풍경 일러스트(SVG) 공통 배치 — art.js 가 만든 <svg class="art"> */
.art{position:absolute;inset:0;width:100%;height:100%;display:block;}