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

    --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 */
   scrollbar-color: var(--sb-thumb) var(--sb-track);
}

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; }

.list { position: relative; }
.list > li::before { content: "•"; position: absolute; left: 5px; color: #9ca3af; font-weight: 600; var(--fs-small); }

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="file"],
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="file"]:focus,
select:focus, textarea:focus { outline: none; border-color: var(--color-primary); }

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; }

/* 제목 유동 폰트 (NEW) */
h1, .main-title { font-size: var(--fs-h1); line-height: 1.25; }
h2{ font-size: var(--fs-h2); line-height: 1; }
h3 { font-size: var(--fs-h3); }

.section-title, .section__title, .form-section__title { font-size: var(--fs-xlarge)}
.section__subtitle { font-size: var(--fs-large)}

/* 미디어 안전폭 (NEW) */
img, video, iframe { max-width: 100%; height: auto; }

table { width: 100%; border-collapse: collapse;}

.table thead th { font-weight: 600; background-color: #fff; }
.table tbody th { font-weight: 500; background-color: #fff; }

th, td {
    text-align: center;
    vertical-align: middle;
    padding: 10px 15px;
    border-bottom: 1px solid #e7e7e7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
th { background-color: var(--color-bg-soft); color: var(--color-text-sub); }
td { color: #4a5568; }

tr { cursor: pointer; }
tr:hover { background-color: #f8fafc; }

/* 전역 테이블 래퍼/보정 (모바일 넘침 방지, NEW) */
.table, table { font-size: var(--fs-small); }
.table-wrap, .u-table-wrap { overflow-x: auto;}
@media (max-width: 1024px){
  /* 큰 태블릿 이하에서는 줄바꿈 허용 + 좌측 정렬로 자동 전환 */
  th, td {text-align: left; }
}

/* 공통 버튼 컴포넌트 */
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:.375rem;
  padding:.5rem .875rem;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;
  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--danger{ background-color:#fee2e2; color:#b91c1c; border-color:#fecaca; }
.button--danger:hover{ background-color:#fecaca; border-color:#fca5a5; }
.button--excel{ background-color: var(--color-excel); color: #fff; border-color: var(--color-excel); }
.button--excel:hover{ background-color: var(--color-excel-600); color: #fff; border-color: var(--color-excel-600); }
/* 소형 버튼 유틸 (NEW) */
.button--xs{ padding:.25rem .5rem; font-size: var(--fs-xsmall); border-radius:var(--radius-sm); }
.w-100 {width: 100%}

/* =======================
   Utilities (NEW)
   ======================= */
.u-w-full{ width:100% !important; }
.u-minw-0{ min-width:0 !important; }                /* flex 항목 넘침 방지 */
.u-clip-x{ overflow-x: clip !important; }           /* 뷰포트 넘침 차단 */
.u-nowrap-off{ white-space: normal !important; word-break: break-word; overflow-wrap:anywhere; text-overflow: clip !important; }
.stack-md{ display:flex; gap: var(--space-gap); }   /* 부모에 적용 → 모바일에서 세로 스택 */
@media (max-width: 768px){ .stack-md{ flex-direction: column; } }

/* 섹션 여백 전역 유동화 (NEW) */
.section, .form-section{ margin-bottom: var(--space-section); }