/* ============================================================
   components.css — 버튼 / 뱃지 / 폼 / 표 / 카드 / 탭 / 모달 / 토스트 / 페이징

   [2026-09 개편] 222golf 톤(플랫). 라운드·그림자·그라디언트·호버 이동 제거.
     버튼 : 기본=흰 배경+#bfbfbf 보더 / primary=네이비 / green=실시간부킹 CTA
     표   : 보더 #e7e7e7, th #fcfcfc, td 12px — 222 실측값
   ============================================================ */

/* ---------- 페이지 타이틀 & 브레드크럼 ---------- */
.page-head{
  position:relative;
  background:var(--white);
  border-bottom:1px solid var(--gray-200);
  padding:28px 0 22px;margin-bottom:26px;
}
.page-head .inner{position:relative;}
.page-head h2{font-size:26px;font-weight:700;letter-spacing:-1.4px;color:var(--gray-900);}
.page-head .desc{margin-top:8px;color:var(--gray-600);font-size:13px;}
/* 브레드크럼은 222 처럼 우측 상단에 둔다 */
.breadcrumb{
  position:absolute;right:20px;top:6px;
  display:flex;gap:6px;font-size:12px;color:var(--gray-500);
}
.breadcrumb span::after{content:"›";margin-left:6px;color:var(--gray-400);}
.breadcrumb span:last-child{color:var(--gray-700);font-weight:700;}
.breadcrumb span:last-child::after{content:"";}
@media (max-width:760px){
  .breadcrumb{position:static;margin-bottom:8px;}
}

/* ---------- 섹션 ---------- */
.section{margin-bottom:40px;}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:14px;gap:12px;flex-wrap:wrap;}
/* 222 의 소제목 : 좌측에 네이비 사각 불릿 */
.section-head h3{
  position:relative;padding-left:12px;
  font-size:16px;font-weight:600;color:var(--gray-700);letter-spacing:-.6px;
}
.section-head h3::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:5px;height:5px;background:var(--navy-900);
}
.section-head h3 small{font-size:12px;font-weight:400;color:var(--gray-500);margin-left:8px;letter-spacing:0;}
.section-head .more{font-size:12px;font-weight:600;color:var(--gray-600);}
.section-head .more:hover{color:var(--navy-900);}

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  height:35px;padding:0 15px;border-radius:0;
  font-size:13px;font-weight:700;white-space:nowrap;
  border:1px solid var(--gray-300);background:var(--white);color:#636363;
}
.btn:hover{background:var(--gray-050);color:var(--navy-900);}
.btn-primary{background:var(--navy-900);border-color:var(--navy-900);color:#fff;}
.btn-primary:hover{background:var(--navy-800);color:#fff;}
/* 실시간부킹 같은 대표 CTA */
.btn-green{background:var(--green-600);border-color:var(--green-600);color:#fff;}
.btn-green:hover{background:var(--green-700);color:#fff;}
.btn-dark{background:var(--navy-700);border-color:var(--navy-700);color:#fff;}
.btn-dark:hover{background:#000;color:#fff;}
.btn-danger{background:var(--white);border-color:#e3b5b5;color:var(--red-600);}
.btn-danger:hover{background:var(--red-050);border-color:var(--red-600);color:var(--red-600);}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff;}
.btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff;}
.btn-lg{height:46px;padding:0 28px;font-size:15px;}
.btn-sm{height:29px;padding:0 10px;font-size:12px;}
.btn-block{width:100%;}
.btn:disabled,.btn.is-disabled{background:var(--gray-100);border-color:var(--gray-200);color:var(--gray-400);cursor:not-allowed;}
.btn-row{display:flex;gap:6px;justify-content:center;margin-top:24px;}
.btn-row.left{justify-content:flex-start;}
.btn-row.right{justify-content:flex-end;}

/* ---------- 뱃지 ---------- */
.badge{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:2px;font-size:11px;font-weight:700;letter-spacing:-.2px;}
.badge-m{background:var(--red-500);color:#fff;}          /* 회원제 */
.badge-p{background:var(--green-600);color:#fff;}        /* 퍼블릭 */
.badge-gray{background:var(--gray-100);color:var(--gray-600);}
.badge-red{background:var(--red-600);color:#fff;}
.badge-blue{background:var(--blue-600);color:#fff;}
.badge-green{background:var(--green-600);color:#fff;}
.badge-orange{background:var(--orange-600);color:#fff;}
.badge-solid{background:var(--gold-600);color:#fff;}

/*
  골프장 구분 표기(M/P) — 222 는 원형 아이콘이다.
  M(회원제)=붉은 원 / P(퍼블릭)=초록 원

  글자가 작으면 M 과 P 가 잘 안 읽혀서, 원을 키우고 굵게 넣는다.
  화면에는 글자만 보이므로 아이콘마다 title 로 '회원제/퍼블릭'을 달고
  표 위에는 범례(.bk-legend)를 둔다.
*/
.club-div{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  font-size:11px;font-weight:800;line-height:1;letter-spacing:0;
  margin-right:6px;color:#fff;vertical-align:-3px;flex-shrink:0;
}
/* 색은 메인 매트릭스의 .gh-div 와 같게 둔다 (운영사 사이트 표기) */
.club-div.m{background:#e8536f;}
.club-div.p{background:#2bb673;}
/* 범례에서는 글자 뜻을 함께 보여 준다 */
.bk-legend .club-div{margin-right:4px;}

/* ---------- 탭 (지역 탭 등) ---------- */
/*
  관리자 상단 탭.

  예전에는 칸마다 min-width:115px 를 고정으로 줬다. 최고관리자 탭이 11개라
  11 x 115 = 1265px 가 되어 웬만한 창에서는 두 줄로 접혔고, 바로 아래 녹색 업무
  메뉴까지 합쳐 가로줄만 세 개가 쌓여 답답했다.
  글자 길이에 맞춰 늘어나게 바꾸면 같은 11개가 940px 안쪽으로 들어와,
  1024px 창에서도 한 줄로 끝난다.
  좁은 화면에서는 그대로 접히게 둔다(flex-wrap) — 글자를 자르는 것보다 낫다.
*/
.tabs{display:flex;flex-wrap:wrap;margin-bottom:18px;border-bottom:1px solid var(--gray-150);}
.tabs a{
  padding:0 12px;height:36px;line-height:34px;text-align:center;white-space:nowrap;
  font-size:13px;font-weight:600;color:#545454;
  background:var(--gray-025);border:1px solid var(--gray-150);border-bottom:0;
  margin-right:-1px;
}
.tabs a:hover{color:var(--navy-900);}
.tabs a.on{background:var(--white);color:var(--navy-900);font-weight:700;border-top:2px solid var(--navy-900);}
.tabs.sm a{min-width:0;flex:1;font-size:13px;}

/* 시간대 필터 등 작은 사각 필터 (222 의 전체/오전/오후/야간) */
.chips{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px;}
.chips a{
  min-width:66px;height:32px;line-height:30px;padding:0 12px;text-align:center;
  border:1px solid #cbcbcb;border-radius:0;
  font-size:13px;font-weight:600;color:#424242;background:var(--white);
}
.chips a:hover{border-color:var(--navy-900);color:var(--navy-900);}
.chips a.on{background:#539ac5;border-color:#539ac5;color:#fff;}

/* ---------- 표: 목록형 ---------- */
/*
  목록 표.

  고친 이유
   · 본문 글자색이 #6e6e6e 로 흐려 숫자를 오래 보기 힘들었다. 머리글이 오히려
     본문보다 진했다(머리글 gray-500 + 굵게). 본문을 진하게, 머리글은 연하게 뒤집는다.
   · 행 높이를 49px 로 못박아 두어 한 화면에 들어가는 줄 수가 적었다.
     고정 높이를 풀고 아래위 여백으로 잡으면 글자 크기는 그대로인데 줄이 짧아진다.
   · 머리글 배경이 #fcfcfc 로 거의 흰색이라 본문과 구분이 안 됐다.
  얼룩(짝수 행 음영)은 .sunti-grid 에는 주지 않는다 — 거기는 선티 한 건이 자리 수만큼
  여러 <tr> 로 쪼개져 있어서, 줄 단위로 칠하면 한 선티가 반만 칠해져 되레 헷갈린다.
*/
.tbl{width:100%;font-size:12.5px;border-top:2px solid var(--gray-900);}
.tbl th{
  height:auto;padding:12px 10px;background:var(--gray-050);
  font-size:12.5px;font-weight:700;color:var(--gray-600);text-align:center;
  border-bottom:1px solid var(--gray-200);
}
.tbl td{
  height:auto;padding:11px 10px;font-size:12.5px;color:#3c3c3c;text-align:center;
  border-bottom:1px solid var(--gray-200);
}
.tbl td.subject{text-align:left;}
.tbl td.subject a:hover{color:var(--navy-900);text-decoration:underline;}
/* 숫자 칸은 자릿수가 흔들리지 않게 고정폭 숫자로 */
.tbl td.num,.tbl td.txt-right{text-align:right;font-variant-numeric:tabular-nums;}
.tbl:not(.sunti-grid) tbody tr:nth-child(even){background:#fafbfc;}
.tbl tbody tr:hover{background:var(--blue-050,#eef4fb);}
.tbl .empty{padding:56px 0;color:var(--gray-500);}

/* ---------- 표: 입력/상세형 ---------- */
.tbl-form{width:100%;font-size:13px;border-top:2px solid var(--gray-900);}
.tbl-form th{
  width:150px;padding:12px 15px;background:#fcfcfc;border-bottom:1px solid var(--gray-200);
  text-align:left;font-weight:700;color:var(--gray-500);vertical-align:middle;
}
.tbl-form td{padding:9px 15px;border-bottom:1px solid var(--gray-200);vertical-align:middle;color:var(--gray-700);}
.tbl-form th .req{color:var(--red-600);margin-left:3px;}

/* ---------- 폼 요소 ---------- */
.inp,.sel,.txa{
  width:100%;height:35px;padding:0 10px;border:1px solid var(--gray-150);border-radius:0;
  background:var(--white);color:var(--gray-900);font-size:13px;
}
.txa{height:auto;padding:10px;min-height:110px;resize:vertical;line-height:1.7;}
.inp:focus,.sel:focus,.txa:focus{outline:0;border-color:var(--navy-900);}
.inp:disabled,.inp[readonly]{background:var(--gray-100);color:var(--gray-600);}
.inp-sm{height:30px;font-size:12px;}
/* ------------------------------------------------------------
   iOS Safari(아이폰) date/time 입력 폭 넘침 방지.
   네이티브 컨트롤이 고유 최소폭을 강제해 width:100% 를 무시하고
   부모(그리드/카드) 밖으로 삐져나온다. appearance 를 끄고 min-width 를 0 으로.
   ------------------------------------------------------------ */
.inp[type="date"],.inp[type="time"],.inp[type="datetime-local"],.inp[type="month"]{
  -webkit-appearance:none;appearance:none;min-width:0;max-width:100%;
}
.inp[type="date"]::-webkit-date-and-time-value{text-align:left;margin:0;}
.inp::-webkit-date-and-time-value{min-width:0;}
/*
  폭 지정 유틸.
  w-80 / w-100 / w-240 / w-320 은 화면에서 쓰고 있는데 정의가 빠져 있었다.
  정의가 없으면 class 가 그냥 무시되어 input·select 가 기본 폭(검색바에서는 남은 줄
  전체)으로 늘어난다. 실제로 선티관리의 정렬 방향 콤보가 혼자 939px 로 퍼져 있었다.
*/
.w-80{width:80px;}.w-90{width:90px;}.w-100{width:100px;}.w-120{width:120px;}
.w-240{width:240px;}.w-320{width:320px;max-width:100%;}.w-140{width:140px;}.w-160{width:160px;}.w-200{width:200px;}.w-300{width:300px;}.w-400{width:400px;max-width:100%;}
.form-inline{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.form-help{margin-top:5px;font-size:12px;color:var(--gray-500);}
.form-err{margin-top:5px;font-size:12px;color:var(--red-600);}
.chk{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;}
.chk input{width:15px;height:15px;accent-color:var(--navy-900);cursor:pointer;}

/* ---------- 카드 ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.cards-3{grid-template-columns:repeat(3,1fr);}
.card{border:1px solid var(--gray-200);border-radius:0;overflow:hidden;background:var(--white);}
.card:hover{border-color:var(--gray-300);}

.card-thumb{height:150px;position:relative;display:flex;align-items:flex-end;padding:10px;overflow:hidden;}
.card-thumb>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.card-thumb .thumb-badges{display:flex;gap:4px;position:relative;z-index:2;}

.card-body{padding:12px 14px 14px;}
.card-body .cat{font-size:11px;color:var(--green-800);font-weight:700;}
.card-body h4{font-size:14px;font-weight:700;margin:5px 0 4px;line-height:1.4;letter-spacing:-.4px;color:var(--gray-900);}
.card-body .sub{font-size:12px;color:var(--gray-500);height:34px;overflow:hidden;line-height:1.45;}
.card-body .incl{
  margin-top:8px;font-size:11px;color:var(--gray-600);
  background:var(--gray-050);border:1px solid var(--gray-200);padding:3px 7px;display:inline-block;
}
.card-body .price{margin-top:8px;text-align:right;font-size:12px;color:var(--gray-500);}
.card-body .price b{font-size:18px;color:var(--gray-800);font-weight:700;letter-spacing:-.8px;}

/* 썸네일 배경 (사진이 없을 때) */
.thumb-g1{background:#2f5f47;}
.thumb-g2{background:#2f5a86;}
.thumb-g3{background:#8a6534;}
.thumb-g4{background:#4a4370;}
.thumb-g5{background:#2f6b6b;}
.thumb-g6{background:#7a4553;}

/* ---------- 페이징 ---------- */
.paging{display:flex;justify-content:center;gap:3px;margin-top:26px;}
.paging a{
  min-width:32px;height:32px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--gray-200);border-radius:0;font-size:12px;font-weight:600;color:var(--gray-600);
}
.paging a:hover{border-color:var(--navy-900);color:var(--navy-900);}
.paging a.on{background:var(--navy-900);border-color:var(--navy-900);color:#fff;}

/* ---------- 안내 박스 ---------- */
.notice-box{
  background:var(--gray-025);border:1px solid var(--gray-200);
  border-radius:0;padding:15px 18px;font-size:12px;color:var(--gray-600);line-height:1.9;
}
.notice-box h5{font-size:13px;font-weight:700;color:var(--gray-800);margin-bottom:6px;}
.notice-box li{position:relative;padding-left:10px;}
.notice-box li::before{content:"";position:absolute;left:2px;top:10px;width:3px;height:3px;background:var(--navy-900);}
.alert{border-radius:0;padding:12px 15px;font-size:13px;line-height:1.75;}
.alert-info{background:var(--blue-050);color:#0d4ea6;border:1px solid #cfe1fb;}
.alert-warn{background:#fff8e6;color:#8a5a00;border:1px solid #ffe2a8;}
.alert-ok{background:var(--green-050);color:var(--green-900);border:1px solid #cbe8b8;margin-bottom:16px;}
.alert-error{background:var(--red-050);color:#9c2b22;border:1px solid #f0c9c9;margin-bottom:16px;}

/* ---------- 모달 ---------- */
.modal-dim{
  position:fixed;inset:0;z-index:200;padding:20px;
  background:rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;
}
.modal{background:#fff;border-radius:0;border:1px solid var(--gray-150);width:100%;max-width:540px;max-height:86vh;display:flex;flex-direction:column;overflow:hidden;}
.modal-wide{max-width:880px;}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--gray-200);background:var(--gray-025);}
.modal-head h4{font-size:15px;font-weight:700;letter-spacing:-.4px;}
.modal-close{width:28px;height:28px;font-size:20px;color:var(--gray-500);line-height:1;}
.modal-close:hover{color:var(--gray-900);}
.modal-body{padding:18px;overflow-y:auto;}
.modal-foot{padding:12px 18px;border-top:1px solid var(--gray-200);background:var(--gray-025);display:flex;gap:6px;justify-content:flex-end;}

/* ---------- 토스트 ---------- */
#toastRoot{position:fixed;left:50%;bottom:40px;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:8px;align-items:center;}
.toast{
  background:rgba(31,35,38,.95);color:#fff;padding:11px 20px;border-radius:2px;font-size:13px;font-weight:700;
}
.toast.err{background:rgba(196,36,24,.96);}

/* ---------- 반응형 ---------- */
@media (max-width:1000px){
  .cards{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:760px){
  .cards,.cards-3{grid-template-columns:repeat(2,1fr);}
  .tbl-form th{width:100px;padding:10px;}
  .tbl-form td{padding:8px 10px;}
  .page-head h2{font-size:21px;}
}
@media (max-width:520px){
  .cards,.cards-3{grid-template-columns:1fr;}
}

/* ============================================================
   골프장 사진 관리 (club/edit.html)
   ============================================================ */
.photo-upload{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  padding:12px 14px;border:1px dashed var(--gray-300);border-radius:0;
  background:var(--gray-025);margin-bottom:14px;
}
.photo-upload input[type=file]{font-size:13px;}
.photo-upload .form-help{flex-basis:100%;margin-top:2px;}

.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;}
.photo-item{border:1px solid var(--gray-200);border-radius:0;overflow:hidden;background:var(--white);}
.photo-item.is-main{border-color:var(--green-600);}
.ph-thumb{aspect-ratio:4/3;background:var(--gray-100);}
.ph-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.ph-meta{padding:8px 10px 5px;font-size:12px;line-height:1.6;}
.ph-meta b{
  display:block;font-weight:700;color:var(--gray-800);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ph-meta span{color:var(--gray-500);margin-right:6px;}
.ph-btns{display:flex;gap:5px;padding:0 10px 10px;}
.ph-btns form{flex:1;}
.ph-btns .btn{width:100%;}

/* ============================================================
   관리 화면 검색 바
   ============================================================ */
/*
  검색바.

  관리자 화면의 검색 조건은 많으면 12칸이 넘는다. 칸마다 w-200·w-160 처럼 넉넉한
  폭을 쓰다 보니 1,500px 가까이 되어 보통 창에서 서너 줄로 접혔고, 줄마다 끝나는
  위치가 달라 들쭉날쭉했다. 표가 그만큼 아래로 밀려 스크롤이 생긴다.

  칸 자체를 지우는 대신 '검색바 안에서만' 폭 유틸을 한 단계씩 좁혀 쓴다.
  화면별 템플릿을 건드리지 않아도 되고(관리자 22개 화면에 한 번에 먹는다),
  검색바 밖의 같은 클래스는 영향받지 않는다.
  콤보는 글자가 짧아(지역선택·소유구분 등) 이 폭으로도 잘리지 않는다.
  날짜 칸(w-140)만 거의 그대로 둔다 — 브라우저 기본 날짜 위젯이 더 줄면 잘린다.
*/
.search-bar{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  padding:14px 16px;margin-bottom:18px;
  border:1px solid var(--gray-200);border-radius:0;
  background:var(--gray-025);
}
.search-bar .inp,.search-bar .sel{height:32px;font-size:12.5px;}
.search-bar .w-320{width:260px;}
.search-bar .w-300{width:240px;}
.search-bar .w-240{width:200px;}
.search-bar .w-200{width:170px;}
.search-bar .w-160{width:132px;}
.search-bar .w-140{width:128px;}
.search-bar .w-120{width:100px;}
.search-bar .w-100{width:86px;}
.search-bar .w-90{width:80px;}
.search-bar .w-80{width:86px;}   /* 정렬 방향 콤보 — 화살표 자리까지 있어 72px 면 "▼ 내" 로 잘린다 */
.search-bar .btn{height:32px;line-height:30px;}
/* 검색바도 같은 이유로 줄 안의 높이를 맞춘다(라디오·체크·물결표가 제각각이었다) */
.search-bar .rdo,.search-bar .chk,.search-bar > span{
  height:32px;display:inline-flex;align-items:center;
}
.search-bar .q-range{height:32px;align-items:center;}
@media (max-width:700px){
  .search-bar>.inp,.search-bar>.sel{flex:1 1 100%;width:auto;}
  .search-bar>span{display:none;}
}

/* ============================================================
   오픈 전 안내 (app.site.preview-mode)
   ============================================================ */
.dev-banner{
  position:relative;z-index:200;
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  padding:8px 16px;text-align:center;
  background:#b4341f;
  color:#fff;font-size:12px;line-height:1.5;
}
.dev-banner b{font-weight:700;}
.dev-banner .ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;flex-shrink:0;
  background:#fff;color:#b4341f;font-weight:900;font-size:11px;
}
.dev-banner .tel{padding:1px 8px;font-size:12px;background:rgba(255,255,255,.18);}
.dev-notice{margin-bottom:16px;line-height:1.8;}
@media (max-width:700px){
  .dev-banner{font-size:11px;padding:7px 12px;gap:5px;}
  .dev-banner .tel{display:none;}
}

/* 완료·취소된 목록 행을 흐리게 */
.tbl tr.row-dim td{opacity:.5;}

/* ============================================================
   선티관리 (admin/sunti)
   ============================================================ */
/*
  등록 폼(선티 등록 / 예약실적 등록).

  한 줄에 콤보·입력칸·라디오·글자·버튼이 섞여 있는데 저마다 높이가 달랐다.
  입력칸 32px, 버튼 35px, 라디오·글자는 글자 높이만큼(20px 안팎)이라
  align-items:center 로 가운데를 맞춰도 줄이 들쑥날쑥해 보였다.
  줄 안의 모든 것을 같은 32px 로 세워 글자의 가운데선이 하나로 맞게 한다.
*/
.sunti-form{border:1px solid var(--gray-200);border-radius:0;background:var(--gray-025);padding:12px 14px;}
.sf-row{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;}
.sf-row + .sf-row{margin-top:10px;padding-top:10px;border-top:1px dashed var(--gray-200);}
.sunti-form .inp,.sunti-form .sel{height:32px;font-size:12px;}
.sunti-form .btn{height:32px;line-height:30px;}
.sf-row .rdo,.sf-row .chk,.sf-row .sf-label,.sf-row .sf-unit{
  height:32px;display:inline-flex;align-items:center;
}
.sunti-form .inp:not([class*=w-]){width:130px;}
.sunti-form .sel:not([class*=w-]){width:auto;min-width:150px;}
.sf-label{font-size:12px;font-weight:700;color:var(--gray-600);white-space:nowrap;}
.sf-unit{font-size:12px;color:var(--gray-500);}
.rdo{display:inline-flex;align-items:center;gap:4px;font-size:12px;white-space:nowrap;cursor:pointer;}
.rdo input{width:14px;height:14px;accent-color:var(--navy-900);}
.inp.is-locked{background:var(--gray-100);color:var(--gray-600);}

.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.sunti-list{min-width:1200px;font-size:12px;}
.sunti-list th,.sunti-list td{padding:7px 6px;white-space:nowrap;height:auto;}
.sunti-list .txt-red{color:var(--red-600);}

/* 선티 인라인 그리드
   min-width 를 1440px 로 박아 두면 화면이 아무리 넓어도 표가 그만큼 '늘어나' 있어
   콘텐츠 폭(1179px) 안에서 항상 가로 스크롤이 생긴다. 실제 내용이 필요로 하는 폭보다
   더 넓게 강제하던 값이라, 1100px 로 낮춰 내용에 맞게 줄어들게 한다.
   (1100 은 열 18개가 겹치지 않는 하한선. 그보다 좁은 화면에서는 가로 스크롤이 남는데,
    그 폭에서 18열을 한 화면에 넣으면 글자가 읽히지 않아 스크롤이 나은 선택이다) */
.sunti-grid{min-width:1100px;font-size:12px;}
.sunti-grid th,.sunti-grid td{padding:5px 4px;border:1px solid var(--gray-200);vertical-align:middle;text-align:center;white-space:nowrap;height:auto;}
.sunti-grid thead th{background:var(--gray-025);}
.sunti-grid td.subject{text-align:left;}
/* 비고는 길이가 들쭉날쭉한 자유 입력이라, 한 줄로 붙잡아 두면 이 열 하나가
   표 전체를 가로로 밀어낸다. 줄바꿈을 허용하고 상한을 둬 표 폭을 안정시킨다. */
.sunti-grid td.bigo{text-align:left;font-size:11px;line-height:1.45;
  white-space:normal;max-width:96px;word-break:break-all;}
.sunti-grid .jcell{background:#fcfdff;}
.sunti-grid .txt-red{color:var(--red-600);}
.jrow{display:inline-flex;gap:3px;align-items:center;}
.j-inp{height:26px;border:1px solid var(--gray-150);border-radius:0;padding:0 5px;font-size:12px;background:#fff;color:var(--gray-900);}
.j-inp:focus{outline:0;border-color:var(--navy-900);}
select.j-inp{padding:0 2px;}
/* 46px 로는 '무관'·'남녀' 두 글자와 드롭다운 화살표가 같이 못 들어가 '무'·'남' 으로 잘렸다.
   조건은 글자가 길어(일행X 등) 더 주고, 성별은 두 글자면 충분하다. */
.j-cond{width:62px;}
.j-gender{width:54px;}
.j-people{width:44px;}
.btn-xs{height:24px;padding:0 7px;font-size:11px;border-radius:0;line-height:22px;}
.nowrap{white-space:nowrap;}
button.h-resv{border:0;cursor:pointer;font:inherit;}

/* ============================================================
   매니저 업무 메뉴 + 실적 화면
   ============================================================ */
.worknav{display:flex;flex-wrap:wrap;gap:0;margin:0 0 24px;background:var(--navy-900);}
.worknav a{padding:10px 15px;color:rgba(255,255,255,.75);font-weight:600;font-size:13px;white-space:nowrap;}
.worknav a:hover{background:rgba(255,255,255,.12);color:#fff;}
.worknav a.on{background:#fff;color:var(--navy-900);}

/*
  정렬 버튼은 소제목 오른쪽, 빠른 기간 버튼은 검색바 안쪽에 둔다(운영사 배치).
  .q-range 는 검색바(flex) 안의 span 이라 자기도 flex 로 풀어 줘야 버튼이 세로로
  쌓이지 않는다.
*/
.q-sort{display:flex;gap:5px;flex-wrap:wrap;}
.search-bar .q-range{display:inline-flex;gap:4px;flex-wrap:wrap;}

.perf-list{min-width:1280px;font-size:12px;}
.perf-list th,.perf-list td{padding:7px 6px;white-space:nowrap;text-align:center;height:auto;}
.perf-list td.subject{text-align:left;}
.perf-list .txt-red{color:var(--red-600);}

.stat-tbl{min-width:900px;font-size:12px;}
.stat-tbl th,.stat-tbl td{padding:8px;border:1px solid var(--gray-200);text-align:center;height:auto;}
.stat-tbl thead th{background:var(--gray-025);}
.stat-tbl td.subject{text-align:left;}
.stat-tbl tfoot td{border-top:2px solid var(--navy-900);}
.stat-total{background:var(--gray-050);font-weight:700;}

.p-inp{height:26px;border:1px solid var(--gray-150);border-radius:0;padding:0 5px;font-size:12px;background:#fff;color:var(--gray-900);}
.p-inp:focus{outline:0;border-color:var(--navy-900);}
select.p-inp{padding:0 4px;}

.section-head.sec-gap{margin-top:34px;padding-top:22px;border-top:1px dashed var(--gray-200);}
@media (max-width:700px){ .section-head.sec-gap{margin-top:26px;padding-top:18px;} }

/* ================= 알림톡전송관리 ================= */
.kakao-status{margin:14px 0;padding:12px 14px;border-radius:0;border:1px solid var(--gray-200);background:var(--gray-025);}
.kakao-status.ready{border-color:var(--green-600);background:var(--green-050);}
.kakao-status.notready{border-color:var(--orange-600);background:#fff4e5;}
.kakao-status b{font-size:13px;margin-right:10px;}
.kakao-status .st{display:inline-block;margin-right:6px;padding:2px 8px;border-radius:2px;font-size:11px;font-weight:700;
  background:#fff;border:1px solid var(--gray-200);color:var(--gray-600);}
.kakao-status .st.ok{background:var(--green-050);border-color:var(--green-600);color:var(--green-900);}
.kakao-status .st.no{background:var(--red-050);border-color:var(--red-600);color:var(--red-600);}
.kakao-status .ep{margin-top:7px;font-size:12px;}

.kakao-form{margin:12px 0 4px;}
.kf-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:9px;}
.kf-body{width:100%;min-height:92px;resize:vertical;font-family:inherit;line-height:1.5;padding:9px 10px;}
.kf-hint{font-size:12px;margin-top:5px;}
.kf-hint b{color:var(--green-900);}
.kf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;margin-bottom:8px;}
@media (max-width:760px){ .kf-grid{grid-template-columns:1fr;} }
.kf-vars{display:flex;flex-direction:column;gap:7px;}
.kv{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:9px;}
.kv>span{font-size:12px;font-weight:700;color:var(--gray-600);text-align:right;}
.kv>input{height:32px;}
.kakao-preview{white-space:pre-wrap;line-height:1.55;font-size:13px;color:var(--gray-900);
  background:#fef9e7;border:1px solid #f5e6a8;border-radius:0;padding:12px 14px;min-height:120px;}

.kakao-log{min-width:1080px;}
.bc-list{max-height:360px;overflow:auto;border:1px solid var(--gray-200);border-radius:0;}
.bc-list table{min-width:520px;}

/* 통계 프린트 : 표만 남기고 사이트 크롬 숨김 */
@media print {
  #header, #footer, .dev-banner, .gnb-util, .page-head, .tabs, .worknav, .quick,
  .search-bar, .btn, .section-head small { display:none !important; }
  .inner { padding:0 !important; max-width:none !important; }
  .tbl-scroll { overflow:visible !important; }
  .stat-tbl { min-width:0 !important; font-size:12px; }
  body { background:#fff !important; }
}

/* ── 선티관리 반응형 ────────────────────────────────────────────────
   열이 18개라 좁은 화면에서는 어떻게 줄여도 한 줄에 다 못 들어간다.
   폭이 줄어들수록 '덜 중요한 열부터 접어서' 가로 스크롤이 생기지 않게 한다.

   접는 열을 nth-child 로 고르면 안 된다. 선티 한 건이 자리 수만큼 행을 차지하고
   왼쪽 열은 rowspan 으로 병합돼 있어, 이어지는 행은 셀 개수가 달라
   같은 번째가 다른 열을 가리킨다. 그래서 열마다 클래스를 붙여 집는다.

   접는 순서는 '없어도 일을 할 수 있는 것' 부터다.
     비고      길이가 제각각이라 표 폭을 가장 많이 흔든다
     순번·지역  눈으로 훑는 값이 아니다(검색으로 찾는다)
     그린피현장·선입  선티를 열면 상세에서 바로 보인다 */
@media (max-width:1439px){
  .sunti-grid .c-bigo{display:none;}
  .sunti-grid th,.sunti-grid td{padding:4px 3px;}
}
@media (max-width:1366px){
  .sunti-grid .c-no,
  .sunti-grid .c-region{display:none;}
}
@media (max-width:1319px){
  .sunti-grid .c-gf,
  .sunti-grid .c-pre{display:none;}
  .sunti-grid{font-size:11.5px;}
}

/* 자리 담당 매니저 표기 — 배정된 자리는 콤보 대신 '약칭/이름' 텍스트로 굳힌다 */
.j-mgr{display:inline-block;min-width:54px;font-size:12px;color:var(--gray-800);
  white-space:nowrap;vertical-align:middle;}

/* 비고 열 : 메모·금액 아래 줄에 [수정]과 배지를 모아 둔다(운영사와 같은 배치) */
.bigo-act{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:3px;}
/*
  관리자 화면 버튼은 네 무리로만 쓴다. 쓰는 곳이 섞이면 색이 뜻을 잃는다.
    주동작  .btn-primary (남색 채움)  등록·저장·검색·예약
    기간    .btn-sky     (하늘 채움)  오늘·내일·모레·이번주·전월·당월·오늘접수
    바로가기 .btn-dark    (진회색 채움) 달력·MY·실시간 예약 내역·나의 실적·블랙검색
    보조    .btn         (흰 바탕)    초기화·정렬·수정
    위험    .btn-danger  (흰 바탕+빨강) 삭제·자리 취소
  주황(.btn-warn)은 비고의 [수정] 한 곳에서만 쓰여 혼자 튀었다. 보조로 옮기고
  클래스는 남겨 둔다 — 고객 화면에서 쓸 자리가 생길 수 있고, 지워도 얻는 게 없다.
*/
.btn-warn{background:#f59f3f;border-color:#f59f3f;color:#fff;}
.btn-warn:hover{background:#e8912f;border-color:#e8912f;color:#fff;}