/* ─────────────────────────────────────────
   Light 팔레트 & 기본 레이아웃 (다크모드 제거)
   ───────────────────────────────────────── */
:root{
  --bg:#f6fbf6; --card:#ffffff; --card-2:#f2f8f1; --text:#0a1b12; --muted:#6b7680; --border:#e3eee3;
  --primary:#22c55e; --primary-2:#16a34a; --primary-weak:#e8ffe9;
  --danger:#ef4444; --danger-weak:#ffe8e8;
  --shadow:0 10px 30px rgba(3,7,18,.08), 0 2px 6px rgba(3,7,18,.06);
  --radius:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter','Pretendard','Noto Sans KR',system-ui,Segoe UI,Roboto,Apple SD Gothic Neo,Malgun Gothic,sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-text-size-adjust:100%;
}
.container{max-width:1180px;margin:0 auto;padding:20px}

/* 배경: 항상 뒤로 + 옅게 */
.bg{
  position:fixed; inset:0; pointer-events:none; opacity:.28; z-index:-1;
}
.bg-img{
  position:absolute; inset:-6% -8% auto -8%;
  min-width:116%; min-height:116%;
  filter:saturate(1.02);
  animation:slow-pan 50s linear infinite;
}
@keyframes slow-pan{from{transform:scale(1.03)}to{transform:scale(1.05) translateX(-2%)}}

/* 헤더 */
.header{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.66));
  backdrop-filter:blur(8px) saturate(120%);
  border:1px solid var(--border); border-radius:12px; margin-top:8px; box-shadow:var(--shadow);
}
.brand{
  display:flex; align-items:center; gap:10px; min-width:0;
  color: inherit; text-decoration: none; cursor: pointer;
}
.brand:focus-visible{ outline: 2px solid var(--primary); outline-offset: 3px; }

.logo-img{width:44px;height:44px;border-radius:12px;background:#fff;box-shadow:var(--shadow);padding:4px}
.app-title{
  margin:0; font-weight:900; letter-spacing:-.01em; line-height:1.1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:clamp(16px, 4.4vw, 20px);
}

.nav{display:flex; align-items:center; gap:8px; flex-shrink:0;}
.link{padding:8px 10px; text-decoration:none; color:var(--text); font-weight:800; border-radius:999px; background:var(--card-2); border:1px solid var(--border)}
.link.nav-primary{background:var(--card-2); border:1px solid var(--border)}
.hello{color:var(--muted)}

.main{padding-top:12px;padding-bottom:40px}
.footer{padding:18px 20px;color:var(--muted)}

/* 카드/섹션은 확실히 불투명 */
.card,.section{
  background-color:var(--card) !important;
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px;
}

/* 모션 */
.motion-fade{animation:fade .6s ease both}
.motion-rise{animation:rise .6s ease both}
.motion-float{animation:float 7s ease-in-out infinite}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;font-weight:900;padding:10px 16px;border-radius:12px;transition:transform .04s ease,filter .15s ease,background-color .2s ease;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--primary);color:#fff}
.btn.primary:hover{filter:brightness(.96)}
.btn.outline{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn.outline:hover{background:var(--card-2)}

/* 폼 */
input,select,textarea{
  background:#fff;border:1px solid var(--border);color:var(--text);
  padding:12px 12px;border-radius:12px;outline:none;transition:.15s ease;width:100%; font-size:16px;
}
input:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.date-picker{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.date-input{display:flex;align-items:center;gap:8px}
.weekday{font-weight:900;color:#10824a}

/* 소속 pill */
.aff-pills{display:flex;gap:10px;margin:6px 0 10px;flex-wrap:wrap}
.aff-pills input{display:none}
.aff-pills label{padding:8px 14px;border:1px solid var(--border);border-radius:999px;cursor:pointer;font-weight:800;background:var(--card-2)}
.aff-pills input:checked + label{background:var(--primary);color:#fff;border-color:var(--primary)}

/* 예약 그리드 */
.grid-wrapper{overflow:hidden;border-radius:var(--radius);border:1px solid var(--border)}
.grid-head,.grid-row{display:grid;grid-template-columns:160px repeat(3,1fr)}
.cell{
  padding:14px 12px; min-height:68px;
  border-bottom:1px solid var(--border); border-right:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; text-align:center; background:var(--card)
}
.cell.head{background:linear-gradient(180deg,var(--card),var(--card-2));font-weight:900}
.cell.time{background:var(--card-2);font-weight:900}
.cell.available{background:var(--primary-weak)}
.cell.reserved{background:var(--danger-weak);color:#b91c1c}

.resv{display:flex;flex-direction:column;gap:6px;align-items:stretch;width:100%}
.resv-title{font-weight:900}
.resv-userlist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.resv-user{text-align:left}
.cancel-btn{background:#ef4444;color:#fff;border:none;padding:8px 12px;border-radius:12px;font-weight:800;cursor:pointer}
.reserve-btn{background:var(--primary);color:#fff;border:none;padding:10px 14px;border-radius:12px;font-weight:900;cursor:pointer}
.reserve-btn:hover{filter:brightness(.95)}

.small{font-size:.9rem}.muted{color:var(--muted)}

/* Admin 스타일(유지) */
.admin-hero{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-radius:16px; background:linear-gradient(135deg, rgba(16,185,129,.08), rgba(59,130,246,.06)); border:1px solid rgba(0,0,0,.06); margin-bottom: 12px;}
.admin-title{margin:0 0 6px 0; font-weight:800; letter-spacing:-0.02em;}
.kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.kpi-card{background:#fff; border-radius:16px; padding:16px; box-shadow:0 6px 28px rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.06)}
.kpi-label{font-size:12px; color:#6b7280; margin-bottom:6px}
.kpi-value{font-size:28px; font-weight:800; letter-spacing:-0.02em}
.tabs{display:flex; gap:8px; margin:18px 0; position:sticky; top:8px; z-index:2}
.tab{padding:8px 14px; border-radius:999px; border:1px solid rgba(0,0,0,.08); background:#fff; text-decoration:none; color:#111827}
.tab.active{background:#10b981; color:#fff; border-color:#10b981}
.toolbar{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:16px; padding:12px; box-shadow:0 4px 18px rgba(0,0,0,.05)}
.toolbar .field{display:flex; flex-direction:column; gap:6px; min-width:160px}
.toolbar .field>span{font-size:12px; color:#6b7280}
.table-card{padding:0; overflow:auto}
.table-modern{width:100%; border-collapse:separate; border-spacing:0}
.table-modern thead th{position:sticky; top:0; z-index:1; background:#f8fafc; color:#334155; font-weight:700; border-bottom:1px solid rgba(0,0,0,.08); padding:12px}
.table-modern tbody td{padding:12px; border-bottom:1px solid rgba(0,0,0,.06)}
.table-modern tbody tr:hover{background:#f9fafb}
.chip{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:12px; white-space:nowrap; background:#f3f4f6; color:#111827; border:1px solid rgba(0,0,0,.06)}
.chip.green{background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.25); color:#065f46}
.chip.blue{background:rgba(59,130,246,.12); border-color:rgba(59,130,246,.25); color:#1e3a8a}
.chip.purple{background:rgba(139,92,246,.12); border-color:rgba(139,92,246,.25); color:#5b21b6}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace}
.center{text-align:center}
.participants{display:flex; flex-wrap:wrap; gap:6px}


/* 접근성 */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:fixed; left:12px; top:12px; width:auto; height:auto; padding:8px 10px;
  background:#111; color:#fff; border-radius:8px; z-index:1000;
}


/* CSV 다운로드 버튼 더 또렷하게 */
.btn.outline.csv {
  border-color: rgba(34,197,94,.55) !important; /* 진한 초록 테두리 */
  background: rgba(34,197,94,.06);
  color: #065f46;              /* 글자색 */
  border-width: 1.5px;
}
.btn.outline.csv:hover {
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.75) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}

.btn.ghost {
  border-color: rgba(34,197,94,.55) !important; /* 진한 초록 테두리 */
  background: rgba(34,197,94,.06);
  color: #065f46;              /* 글자색 */
  border-width: 1.5px;
}

.btn.ghost:hover {
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.75) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}

.table-modern { table-layout: fixed; }
.table-modern th, .table-modern td { vertical-align: middle; }

.users-table td:nth-child(1), .users-table th:nth-child(1) { text-align:left; }
.users-table td:nth-child(2), .users-table th:nth-child(2) {
  text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.users-table td:nth-child(3), .users-table th:nth-child(3) { text-align:center; }
.users-table td:nth-child(4), .users-table th:nth-child(4) { text-align:center; }
.users-table td:nth-child(5), .users-table th:nth-child(5) {
  text-align:right; font-variant-numeric: tabular-nums;
}

/* ==== 모바일에서 코트 3칸 모두 보이도록(가로 스크롤) ==== */
@media (max-width: 720px){
  /* 가로 스크롤 강제 켜기 (+ iOS 부드러운 스크롤) */
  .grid-wrapper{
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* 표 자체에 최소 너비 확보:  시간(96) + 코트(3 * 128) = 480px */
  .grid-head, .grid-row{
    grid-template-columns: 96px repeat(3, minmax(128px, 1fr));
    min-width: calc(96px + 3 * 128px);
  }

  /* 셀 간격 조금 타이트하게 */
  .cell{ min-height: 60px; padding: 10px 8px; }

  /* 왼쪽 시간 칼럼은 고정(스크롤해도 따라오게) */
  .cell.time,
  .grid-head .cell.head:first-child{
    position: sticky; left: 0; z-index: 3;
    background: var(--card-2);
    box-shadow: 2px 0 0 0 var(--border);
  }

  /* 부모 카드가 혹시라도 가로 스크롤을 막지 않게 */
  .card{ overflow: visible; }
}

/* =========================
   모바일: PC 레이아웃 고정 + 가로 스크롤 (수정)
   ========================= */
@media (max-width: 768px){

  /* 페이지 전체 가로 스크롤 금지 */
  .container{
    overflow-x: hidden;
  }

  /* 상단 액션 버튼 줄바꿈 금지 + 내부 스크롤 */
  .admin-actions{
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .admin-actions .btn{ flex: 0 0 auto; white-space: nowrap; }

  /* 탭도 내부 스크롤 */
  .tabs{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tabs .tab{ flex: 0 0 auto; white-space: nowrap; }

  /* 🔧 핵심: 툴바는 카드 폭에 맞춰 잘리고, 툴바 내부에서만 가로 스크롤 */
  .toolbar{
    flex-wrap: nowrap;                /* 줄바꿈 금지(한 줄 유지) */
    overflow-x: auto;                 /* 내부 스크롤 */
    -webkit-overflow-scrolling: touch;
    max-width: 100%;                  /* 카드/화면 폭을 넘지 않도록 */
  }
  .toolbar .field{ min-width: 160px; flex: 0 0 auto; }
  .toolbar .btn, .toolbar a{ flex: 0 0 auto; white-space: nowrap; }

  /* 표는 ‘카드 안’에서만 가로 스크롤 */
  .table-card{ overflow-x: auto !important; }
  .table-modern{
    min-width: 980px;                 /* 테이블 자체는 PC 폭 유지 */
    table-layout: fixed;
  }
  .table-modern th,
  .table-modern td{
    white-space: nowrap;
  }
}

/* 승인 모드 툴바: 모바일에서 안내문구를 아래 줄로 보내고 높이 폭발 방지 */
#approval-toolbar { align-items: center; gap: 12px; }
#approval-toolbar .lhs { display:flex; align-items:center; gap:12px; min-width:260px; }
#approval-toolbar .note { margin-left:auto; white-space:nowrap; } /* 데스크톱에선 한 줄 유지 */

@media (max-width: 768px){
  /* 전체 툴바는 한 줄 강제지만, 승인 툴바만 예외로 감싸지게 */
  #approval-toolbar { flex-wrap: wrap !important; overflow-x: visible; }

  /* 안내문구는 아래로 내려서 넓게 쓰기 (줄바꿈 허용) */
  #approval-toolbar .note {
    flex: 1 0 100%;
    order: 2;
    white-space: normal;
    line-height: 1.4;
  }

  /* 아주 좁은 화면에서는 '승인 모드' 라벨 숨겨서 높이 더 줄임 */
  #approval-toolbar .lhs > .muted { display: none; }
}

.kpis{align-items:stretch;} /* 카드 높이 동일하게 스트레치 */
.kpi-card{
  background:#fff; border-radius:16px; padding:16px;
  box-shadow:0 6px 28px rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.06);
  display:flex; flex-direction:column; justify-content:space-between;
  min-height: 120px;              /* 한 행에서 숫자 기준선 맞추는 최소 높이 */
}
.kpi-label{
  font-size:12px; color:#6b7280;
  line-height:1.15; margin-bottom:6px;
  word-break:keep-all;            /* 한글도 가능하면 단어 단위로 줄바꿈 */
}
.kpi-value{
  font-size:28px; font-weight:800; letter-spacing:-0.02em;
  line-height:1; margin-top:auto; /* 라벨이 두 줄이어도 숫자는 항상 카드 하단 */
  font-variant-numeric: tabular-nums;
}

/* 모바일에선 2열 그리드로 더 안정적인 높이 */
@media (max-width: 768px){
  .kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==== 필터 컨트롤: 높이/라인하이트 통일 ==== */
:root{ --control-h: 44px; }

.toolbar input,
.toolbar select,
.toolbar .btn{
  height: var(--control-h);
  line-height: var(--control-h);
  padding: 0 12px;
  font-size: 16px;
}

/* iOS select 기본 스타일 상쇄 + 화살표 일관화 */
.toolbar select{
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px; /* 화살표 공간 */
  border-radius: 12px;
}

/* CSV 버튼도 높이 맞추기(툴바 안에서만) */
.toolbar .btn.outline.csv{ line-height: calc(var(--control-h) - 2px); } /* 테두리 보정 */

/* 폼 라벨과 컨트롤 간격 미세 조정(모바일에서 더 타이트하게) */
@media (max-width: 768px){
  .toolbar .field{ min-width: 160px; }
  .toolbar .field>span{ margin-bottom: 2px; }
}

/* === 모바일: 헤더를 2줄로 쪼개기 (로고+타이틀 → 다음줄에 탭) === */
@media (max-width: 680px){
  .header{
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 12px;
  }
  .brand{
    flex: 1 0 100%; /* 로고+타이틀이 첫 줄 전체 차지 */
  }
  .app-title{
    white-space: normal;  /* 줄바꿈 허용 */
    line-height: 1.2;
    font-size: clamp(16px, 4.6vw, 18px);
  }
  .nav{
    width: 100%;          /* 두 번째 줄 */
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav .link{ flex: 0 0 auto; white-space: nowrap; }
}

/* === 가로 스크롤 힌트: 오른쪽 페이드 + ↔ 스크롤 배지 === */
.scroll-hint{ position: relative; }
.scroll-hint::before{
  content:"";
  position:absolute; top:0; right:0; bottom:0; width:28px;
  pointer-events:none;
  background: linear-gradient(to right, transparent, var(--card));
  opacity: .9;
}
.scroll-hint::after{
  content:"↔ 스크롤";
  position:absolute; right:8px; bottom:6px;
  padding:2px 8px; font-size:12px; border-radius:999px;
  background: rgba(0,0,0,.45); color:#fff;
  pointer-events:none; transition:.2s; opacity:.85;
}
.scroll-hint.hide-hint::before,
.scroll-hint.hide-hint::after{ opacity:0; }