/* ==========================================================================
   공통(Design Tokens / Utilities)
   - 전 페이지 공통 색상/간격/라운드/버튼/레이아웃
   ========================================================================== */
:root {
    /* 🎨 Brand Palette */
    --color-primary: #2563eb;        /* 메인 파랑 */
    --color-primary-600: #1d4ed8;    /* 진한 파랑 (버튼 hover 등) */
    --color-primary-50: #eff6ff;     /* 매우 연한 파랑 배경 */
    --color-primary-weak: #eef5ff;   /* 연한 파랑 배경 (보조용) */

    --color-black: #1a1a1a;
    --color-black-600: #2c2c2c;

    --color-accent: #e74c3c;         /* 포인트/경고 빨강 */
    --color-success: #27ae60;        /* 성공/확인 그린 */
    --color-success-bg: #f0fdf4;
    --color-success-border: #bbf7d0;
    --color-success-600: #15803d;   /* hover용 진초록 */
    --color-success-50: #f0fdf4;    /* 아주 연한 배경 */
    --color-success-100: #dcfce7;   /* hover 배경 */

    --color-excel: #0f773f;
    --color-excel-600: #09572d;

    --color-warning: #e67e22;        /* 경고/주의 오렌지 */
    --color-danger: #dc2626;         /* 위험/에러 빨강 */
    --color-danger-bg: #fef2f2;
    --color-danger-border: #fecaca;

    /* 📢 Notice (공지 강조용) */
    --color-notice-bg: #fef3c7;
    --color-notice-border: #f59e0b;
    --color-notice-text: #92400e;
    --color-notice-text-hover: #632c09;

    /* 📝 Typography */
    --color-text-strong: #1e293b;    /* 제목/강조 텍스트 */
    --color-text: #555;               /* 일반 텍스트 */
    --color-text-sub: #475569;        /* 보조 텍스트 */
    --color-text-muted: #64748b;      /* 희미한 텍스트 */
    --color-text-weak: #666;          /* 약한 톤 */

    /* 🖼️ Background & Border */
    --color-bg: #fff;
    --color-bg-soft: #f5f5f5;
    --color-surface: #f8fafc;
    --color-hover-bg: #f1f5f9;

    --color-border: #e2e8f0;
    --color-border-weak: #ddd;

    /* 🔲 Shapes */
    --radius-sm: 5px;
    --radius-md: 10px;
    --radius-lg: 15px;
    --radius-xlg: 30px;
    --radius-circle: 50%;

    /* 📏 Spacing */
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;

    --gap-xs: 5px;
    --gap-sm: 10px;
    --gap-md: 15px;
    --gap-lg: 20px;
    --gap-xl: 30px;

    /* 🌑 Effects */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --transition: 0.3s ease;

    /* =======================
       🔁 Global Responsive Tokens (NEW)
       ======================= */
    --bp-xs: 480px;
    --bp-sm: 640px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;

    /* 폰트 사이즈 */
    --fs-body:  clamp(0.94rem, 0.88rem + 0.40vw, 1rem);

    --fs-h1:    clamp(1.80rem, 1.35rem + 2.20vw, 2.40rem);
    --fs-h2:    clamp(1.40rem, 1.10rem + 1.40vw, 1.80rem);
    --fs-h3:    clamp(1rem, 0.75rem + 1.00vw, 1.40rem);

    --fs-xxlarge: clamp(1.5rem, 1.2rem + 1.0vw, 1.5rem);        /* 24px */
    --fs-xlarge2: clamp(1.375rem, 1.1rem + 0.9vw, 1.375rem);    /* 22px */
    --fs-xlarge:  clamp(1.125rem, 0.85rem + 0.70vw, 1.25rem);   /* 20px */
    --fs-large:   clamp(1rem, 0.75rem + 0.60vw, 1.125rem);      /* 18px */
    --fs-medium:  clamp(0.875rem, 0.65rem + 0.50vw, 1rem);      /* 16px */
    --fs-small:   clamp(0.75rem, 0.55rem + 0.50vw, 0.875rem);   /* 14px */
    --fs-xsmall:  clamp(0.625rem, 0.45rem + 0.40vw, 0.75rem);   /* 12px */
    --fs-xxsmall: clamp(0.5rem, 0.4rem + 0.20vw, 0.625rem);     /* 10px */

    /* 간격 */
    --px-container: clamp(16px, 3vw, 24px);
    --space-section: clamp(28px, 4vw, 40px);
    --space-block:   clamp(12px, 2.4vw, 20px);
    --space-gap:     clamp(8px, 1.8vw, 15px);

    --sb-size: 10px;                 /* 스크롤바 두께 */
    --sb-radius: 5px;                /* 둥근 정도 */
    --sb-track: #f1f5f9;             /* 트랙(배경) */
    --sb-thumb: #cbd5e1;             /* 엄지 기본색 */
    --sb-thumb-hover: #94a3b8;       /* hover */
    --sb-thumb-active: #64748b;      /* active/drag */

}

* { margin: 0; padding: 0; box-sizing: border-box; }

html{
   scrollbar-width: thin; /* auto|thin|none */
}

body {
    font-family: 'Pretendard', sans-serif;
    line-height: 1.6;
    background-color: #fff;
    overflow-x: hidden;
    font-size: var(--fs-body); /* NEW: 전역 유동 본문 글꼴 크기 */
    -webkit-text-size-adjust: 100%; /* NEW: iOS 확대 보정 */
}

a { color: inherit; text-decoration: none; cursor: pointer;}

ul, li { list-style: none; }

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="date"],
select, textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-small);
    cursor: pointer;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
select:focus, textarea:focus { outline: none; border-color: var(--color-primary); }

input[type="file"]{width: 0;}

select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20,50 70,100 120,50' fill='none' stroke='%23999' stroke-width='15'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
}

textarea { resize: vertical; line-height: 1.6; }

.m-br {display: none}

.button {
  display:inline-flex;align-items:center;justify-content:center;gap:.375rem;
  padding:.5rem 1rem;border:1px solid var(--color-border);
  background-color:var(--color-bg);color:var(--color-text-muted);
  text-decoration:none;border-radius:var(--radius-sm);
  font-size: var(--fs-small); /* NEW: 유동 버튼 폰트 */
  transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,transform .05s;
  white-space: nowrap;cursor:pointer;
}

.button:hover{ background-color:var(--color-hover-bg); color:var(--color-text); }
.button--primary{ background-color:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.button--primary:hover{ background-color:var(--color-primary-600); color:#fff; border-color:var(--color-primary-600); }
.button--sub{ background-color:var(--color-primary-50); color:var(--color-primary); border-color:var(--color-primary-50); }
.button--sub:hover{ background-color:#dbeafe; }
.button--black{ background-color:var(--color-black); color:#fff; border-color:var(--color-black); }
.button--black:hover{ background-color:var(--color-black-600); color:#fff; border-color:var(--color-black-600); }

table {
    width: 100%;
    border-collapse: collapse;
    overflow-x: auto;
    background: #fff;
}

table thead {
    background: #fafbfc;
    border-bottom: 1px solid var(--color-border);
}

table th {
    padding: 1rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.875rem;
    color: #374151;
}

/* 게시판 본문 */
table tbody tr {
    border-bottom: 1px solid var(--color-border);
    transition: background-color 0.15s;
}

table tbody tr:hover {
    background-color: #fafbfc;
}

table td {
    padding: 1rem;
    text-align: center;
    color: #6b7280;
    font-size: 0.875rem;
}

@media (max-width: 768px) {
  .m-br{display: block;}

  /* 표 자체를 스크롤 컨테이너로 */
  table {
    display: block;
    font-size: 12px;
  }

  /* 한 글자씩 세로로 안 깨지게 */
  table th,
  table td {
    white-space: nowrap;
    padding: 5px 10px;             /* 패딩 축소 */
  }
}