@charset "UTF-8";

/* ==========================================================================
   Common CSS
   - CSS Reset
   - 기본 타이포그래피
   - 유틸리티 클래스
   - 여백 유틸리티
   - Flex 유틸리티
   - 커스텀 스크롤바
   ========================================================================== */


/* ==========================================================================
   1. CSS Reset
   ========================================================================== */

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


/* 오토필 배경 제거 */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #fff inset;
    -webkit-text-fill-color: #000;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

/* IE 텍스트 지우기 버튼 제거 */
input[type="text"]::-ms-clear { display: none; }

/* 숫자 input 스핀 버튼 제거 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }
/* select focus 아웃라인 제거 */
select:focus { outline: none; }
input:focus {
    outline: none;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family:'Pretendard', 'Noto Sans KR', 'AppleSDGothic', 'Malgun Gothic', '맑은 고딕', 'dotum', '돋움', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    color: #333;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

ul,
ol {
    list-style: none;
}

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

a:hover,
a:focus {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
    font-size: inherit;
}

input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
}

textarea {
    resize: vertical;
}

fieldset {
    border: 0;
}

/* ==========================================================================
   2. 유틸리티 클래스
   ========================================================================== */

/* clearfix */
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}

/* 숨김 처리 (레이아웃 공간 제거) */
.hidden {
    display: none !important;
}

/* 스크린리더 전용 (시각적으로 숨김, 스크린리더는 읽음) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 말줄임 */
.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 텍스트 정렬 */
.tac {
    text-align: center !important;
}

.tar {
    text-align: right !important;
}

.tal {
    text-align: left !important;
}


/* ==========================================================================
   3. 여백 유틸리티 (5px 단위, 5~30)
   ========================================================================== */

/* margin-top */
.mt0  { margin-top:  0 !important; }
.mt5  { margin-top:  5px !important; }
.mt7  { margin-top:  7px !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt25 { margin-top: 25px !important; }
.mt30 { margin-top: 30px !important; }
.mt35 { margin-top: 35px !important; }
.mt50 { margin-top: 50px !important; }
.mt60 { margin-top: 60px !important; }
.mt70 { margin-top: 70px !important; }

/* margin-bottom */
.mb5  { margin-bottom:  5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb25 { margin-bottom: 25px !important; }
.mb30 { margin-bottom: 30px !important; }

/* margin-left */
.ml5  { margin-left:  5px !important; }
.ml10 { margin-left: 10px !important; }
.ml15 { margin-left: 15px !important; }
.ml20 { margin-left: 20px !important; }

/* margin-right */
.mr5  { margin-right:  5px !important; }
.mr10 { margin-right: 10px !important; }
.mr15 { margin-right: 15px !important; }
.mr20 { margin-right: 20px !important; }

/* padding */
.pd0 { padding:0 !important; }
.pt15{ padding-top:15px!important; }

.cper0700{width:7% !important ;}
.cper0800{width:8% !important ;}
.cper0950{width:9.5% !important ;}
.cper1100{width:11% !important ;}
.cper1200{width:12% !important ;}
.cper1300{width:13% !important ;}
.cper1500{width:15% !important ;}
.cper1800{width:18% !important ;}
.cper2000{width:20% !important ;}
.cper2100{width:21% !important ;}
.cper2200{width:22% !important ;}
.cper2300{width:23% !important ;}
.cper2400{width:24% !important ;}
.cper2500{width:25% !important ;}
.cper2600{width:26% !important ;}
.cper2900{width:29% !important ;}
.cper3000{width:30% !important ;}
.cper4000{width:40% !important ;}
.cper4500{width:45% !important ;}
.cper4800{width:48% !important ;}
.cper5500{width:55% !important ;}
.cper100p{width:100% !important ;}
.cperauto{width:auto !important ;}

/* ==========================================================================
   4. Flex 유틸리티
   ========================================================================== */

.flex {
    display: flex;
}

/* 수평 + 수직 모두 중앙 정렬 */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 양 끝 정렬 + 수직 중앙 */
.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 오른쪽 끝 정렬 + 수직 중앙 */
.flex-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}



/* ==========================================================================
   5. 커스텀 스크롤바 (Webkit 기반)
   ========================================================================== */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* ==========================================================================
   대회 참가신청 - 참가부 선택 / 선수 명단 테이블
   (admin application-edit 스타일을 프론트에서도 공유)
   ========================================================================== */
.inner_tbl { width: 100%; border-collapse: collapse; }
.inner_tbl th, .inner_tbl td { border: 1px solid #ddd; padding: 8px 10px; font-size: 14px; vertical-align: middle; background: #fff; }
.inner_tbl th { background: #f8f8f8; text-align: center; font-weight: 600; }

.age_tbl { width: 100%; border-collapse: collapse; }
.age_tbl th, .age_tbl td { border: 1px solid #ddd; padding: 8px 10px; font-size: 14px; vertical-align: middle; background: #fff; }
.age_tbl thead th { background: #f8f8f8; text-align: center; font-weight: 600; }
.age_tbl td label { margin-right: 14px; cursor: pointer; }
.age_tbl td .age_chk { margin-right: 4px; vertical-align: middle; }

/* 참가부별 선수 명단 등록 */
.app_edit_player_section { margin-top: 24px; border-top: 2px solid #3B6FB6; padding-top: 16px; }
.app_edit_section_title { font-size: 16px; font-weight: bold; color: #3B6FB6; margin-bottom: 6px; }
.app_edit_guide_txt { font-size: 13px; color: #888; margin-bottom: 12px; }

.app_edit_player_tbl { width: 100%; border-collapse: collapse; margin-top: 8px; }
.app_edit_player_tbl th { background: #f5f7fa; border: 1px solid #e0e0e0; padding: 10px; font-size: 13px; text-align: center; }
.app_edit_player_tbl td { border: 1px solid #e0e0e0; vertical-align: middle; padding: 10px 12px; background: #fff; }

.app_player_cat_td { background: #f5f7fa !important; vertical-align: top !important; text-align: center; white-space: nowrap; }
.app_player_cat_box { display: inline-block; background: #3B6FB6; color: #fff; padding: 4px 12px; border-radius: 3px; font-size: 13px; font-weight: bold; }
.app_player_list_td { vertical-align: top !important; }
.app_player_photo_td { vertical-align: top !important; text-align: center; }

.app_edit_player_count { font-size: 13px; color: #555; }

/* 선수 칩 영역 */
.app_edit_chip_area { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 36px; }
.app_edit_no_player { font-size: 13px; color: #bbb; }

.player_chip_edit { display: inline-flex; align-items: center; background: #e8f0fe; border: 1px solid #aac4f5; border-radius: 20px; padding: 4px 8px 4px 12px; font-size: 13px; gap: 4px; white-space: nowrap; }
.player_chip_edit .chip_name { color: #333; }
.player_chip_edit .chip_x_btn { background: none; border: none; color: #C30E23; font-size: 14px; font-weight: bold; cursor: pointer; padding: 0 2px; line-height: 1; }
.player_chip_edit .chip_x_btn:hover { color: #900; }

.app_edit_photo_preview { display: flex; align-items: center; gap: 6px; justify-content: center; }
.app_edit_photo_name { font-size: 12px; color: #555; }
.photo_x_btn { background: none; border: none; color: #C30E23; font-size: 14px; font-weight: bold; cursor: pointer; padding: 0 4px; line-height: 1; }

/* 참가신청 - 선수단 사진 업로드 미리보기 (team-edit.js 패턴 적용) */
.app_team_photo_wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.app_team_photo_preview { width: 100%; display: flex; justify-content: center; }
.app_team_photo_thumb { position: relative; display: inline-block; }
.app_team_photo_thumb img { display: block; max-width: 140px; max-height: 140px; border: 1px solid #e0e0e0; border-radius: 4px; object-fit: cover; }
.app_team_photo_thumb .photo_x_btn { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; background: #fff; border: 1px solid #C30E23; border-radius: 50%; padding: 0; display: flex; align-items: center; justify-content: center; }

/* 업로드 라벨 버튼 공용 사이즈 */
.app_edit_player_tbl .btn_sm { display: inline-block; padding: 4px 10px; font-size: 12px; line-height: 1.5; }

/* ==========================================================================
   Common.getPopupTemplate() 전용 팝업 스타일
   (admin sponsor 등록 팝업 패턴 - 프론트에서도 동일하게 사용)
   - .popup 자체는 layout.css에서 이미 display:flex/중앙정렬 처리됨
   - 내부 .popup-dim / .popup-content / .popup-header / .popup-body 만 추가
   ========================================================================== */
.popup .popup-dim { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.45); }
.popup .popup-content { position: relative; top:50%; left:50%; transform:translate(-50%, -50%); background: #fff; width: auto; height: auto; max-width: 900px; min-width: 400px; margin: 20px; border-radius: 6px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18); overflow: hidden; }
.popup .popup-header { position: relative; padding: 0 16px; height: 48px; background: #fff; border-bottom: 1px solid #e0e0e0; display: flex; align-items: center; }
.popup .popup-header .popup-title { color: #222; font-size: 15px; font-weight: 700; line-height: 1.4; flex: 1; }
.popup .popup-header .popup-close-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; cursor: pointer; background: none; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
.popup .popup-header .popup-close-btn:hover { background: #f0f0f0; }
.popup .popup-header .popup-close-btn:before,
.popup .popup-header .popup-close-btn:after { content: ''; position: absolute; width: 16px; height: 2px; background: #555; border-radius: 1px; }
.popup .popup-header .popup-close-btn:before { transform: rotate(45deg); }
.popup .popup-header .popup-close-btn:after  { transform: rotate(-45deg); }

.popup .popup-body { height: calc(100% - 48px); overflow: hidden; }
.popup .popup-body .scroll-y { width: 100%; padding: 20px; max-height: 700px; overflow-y: auto; }
.popup .popup-body.nospace .scroll-y { padding: 0; }
.popup .popup-body.mh300 .scroll-y { min-height: 300px; }
.popup .popup-body .searchbox{margin:0 20px 50px;}
.popup .popup-body .searchbox .input_txt{width:calc(100% - 76px);}


/* 동적 팝업 내 탭 — popwrap 팝업과 동일한 스타일 */
.popup .popup-body .tab { background: #f3f3f3; border-radius: 24px; }
.popup .popup-body .tab li a { padding: 0 20px; min-width: 120px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; text-align: center; border-radius: 19px; font-size: 17px; line-height: 1.1; color: #999; font-weight: 700; }
.popup .popup-body .tab li.on a, .popup .popup-body .tab li a:hover { background: transparent; border-color: #115fad; color: #115fad; box-shadow: none; }
/* 본선 대진표 줌 컨트롤 */
.bracket-zoom-ctrl { display: flex; align-items: center; gap: 8px; padding: 8px 0 4px; }
.bracket-zoom-btn { width: 28px; height: 28px; border: 1px solid #d0d0d0; border-radius: 4px; background: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.bracket-zoom-range { width: 100px; }
.bracket-zoom-label { font-size: 13px; color: #555; min-width: 42px; }
.bracket-scroll-wrap { overflow: auto; width: 100%; }

/* 본선 브래킷 Canvas 컨테이너 (어드민/프론트 공용) */
.bracket-container { position: relative; width: 100%; background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden; min-height: 400px; margin-top: 4px; }
.bracket-viewport { width: 100%; height: 560px; overflow: auto; position: relative; cursor: grab; }
.bracket-viewport.dragging { cursor: grabbing; }
.bracket-canvas { position: relative; transform-origin: 0 0; transition: transform 0.1s ease; padding: 10px 20px 40px; }
.bracket-zoom-control { position: absolute; bottom: 14px; right: 14px; display: flex; align-items: center; gap: 6px; z-index: 10; background: rgba(255,255,255,0.93); padding: 5px 10px; border-radius: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.bracket-zoom-control .bracket-zoom-btn { width: 26px; height: 26px; border: 1px solid #ddd; border-radius: 50%; background: #fff; cursor: pointer; font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; }
.bracket-zoom-control .bracket-zoom-btn:hover { background: #f0f4fb; border-color: #3B6FB6; color: #3B6FB6; }
.bracket-zoom-control input[type="range"] { width: 100px; accent-color: #3B6FB6; }
.bracket-minimap { display: none; }
.bracket-minimap-viewport { position: absolute; border: 2px solid #3B6FB6; background: rgba(59,111,182,0.08); border-radius: 2px; min-width: 20px; min-height: 12px; }
/* 동적 팝업 내 으뜸조/버금조 버튼 탭 — layout.css .popwrap .tab_under 와 동일 */
.popup .popup-body .tab_under { padding: 0 30px; display: flex; flex-wrap: nowrap; gap: 30px; }
.popup .popup-body .tab_under button { position: relative; padding: 10px 2px; display: inline-block; color: #717171; font-size: 16px; font-weight: 600; line-height: 1.5; background: none; cursor: pointer; }
.popup .popup-body .tab_under button.on { color: #115fad; }
.popup .popup-body .tab_under button.on::after { content: ''; position: absolute; bottom: 5px; left: 0; width: 100%; height: 2px; background-color: #115fad; }

/* 보유선수명단 테이블 */
.tbl_list { width: 100%; border-top: 1px solid #ddd; border-collapse: collapse; }
.tbl_list thead th { padding: 10px 8px; background: #fafafa; border-bottom: 1px solid #ddd; font-size: 13px; font-weight: 600; color: #555; text-align: center; white-space: nowrap; }
.tbl_list tbody td { padding: 10px 8px; border-bottom: 1px solid #f0f0f0; font-size: 13px; color: #555; text-align: center; }
.tbl_list tbody tr:hover { background: #fafcff; }

/* 대회 접수 현황 팝업 */
.reception_wrap .pop_desc { margin-bottom: 16px; font-size: 13px; color: #555; line-height: 1.6; }
.reception_group { margin-bottom: 8px; }
.tbl_reception { width: 100%; border-top: 2px solid #ddd; border-collapse: collapse; }
.tbl_reception tbody td { padding: 12px 16px; border-bottom: 1px solid #eee; vertical-align: top; }
.tbl_reception .td_label { width: 160px; font-size: 14px; font-weight: 600; color: #333; background: #f7f7f7; white-space: nowrap; }
.reception_col h5 { margin-bottom: 8px; font-size: 13px; font-weight: 700; }
.reception_col .team_badge { display: inline-block; margin: 2px 4px 2px 0; padding: 3px 10px; background: #f0f0f0; border-radius: 12px; font-size: 12px; color: #444; }
.reception_col .no_data { font-size: 12px; color: #aaa; }
.txt_blue { color: #1a73e8; }
.txt_red  { color: #e53935; }

/* 갤러리 상세/등록 버튼 */
#ownerButtons:not(.hidden) { margin-bottom: 15px; }